/* Khunt's Lab: one stylesheet. The phone's own font, never heavier than Medium, light and dark, nothing loaded from elsewhere. Radii, spacing and motion come from shared/design/tokens.json through tokens.css (written by build.py); colours are the brand palette (shared/brand/palette.md). Pink is for shapes only, never text. */ :root { --cream: #F4ECE6; --cream-2: #EDE3DB; --cream-3: #E2D3C8; --pink: #C09BAC; --pink-soft: #EBD3DE; --forest: #314021; --olive: #617246; --olive-light: #8FA06A; --ink: #0C0D07; --bg: var(--cream); --bg-2: #FBF7F4; --card: #FFFDFB; --fg: var(--ink); --muted: #4E5344; --line: #E2D3C8; --accent: var(--forest); --accent-fg: var(--cream); --link: #3C5427; --chip: var(--cream-2); --eyebrow: var(--olive); --mark-k: var(--forest); --mark-olive: var(--olive); --mark-bubble: var(--pink); --glass: rgba(244, 236, 230, .72); --shadow: 0 1px 2px rgba(49, 64, 33, .06), 0 12px 32px -12px rgba(49, 64, 33, .18); --glow: rgba(192, 155, 172, .22); --sun: 0; color-scheme: light; } /* Dark, twice with the same values (a test keeps them equal): from the system unless light was picked with the ☀︎/☾ toggle, and from the toggle. theme.js sets data-theme on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0F110B; --bg-2: #151810; --card: #1A1E14; --fg: #EDE3DB; --muted: #B7AEA5; --line: #2C3222; --accent: var(--olive-light); --accent-fg: #0F110B; --link: #B9C893; --chip: #232919; --eyebrow: var(--olive-light); --mark-k: #D8C6BA; --mark-olive: var(--olive-light); --mark-bubble: #D3B3C2; --glass: rgba(15, 17, 11, .72); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -14px rgba(0, 0, 0, .6); --glow: rgba(143, 160, 106, .16); --sun: 1; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0F110B; --bg-2: #151810; --card: #1A1E14; --fg: #EDE3DB; --muted: #B7AEA5; --line: #2C3222; --accent: var(--olive-light); --accent-fg: #0F110B; --link: #B9C893; --chip: #232919; --eyebrow: var(--olive-light); --mark-k: #D8C6BA; --mark-olive: var(--olive-light); --mark-bubble: #D3B3C2; --glass: rgba(15, 17, 11, .72); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -14px rgba(0, 0, 0, .6); --glow: rgba(143, 160, 106, .16); --sun: 1; color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); overflow-x: hidden; font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 400; } img, svg, video { max-width: 100%; } a { color: var(--link); text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } h1, h2, h3 { font-weight: 500; letter-spacing: -.015em; line-height: 1.15; } h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); margin: 0 0 14px; } h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: 0 0 10px; } h3 { font-size: 1.12rem; margin: 0 0 6px; letter-spacing: 0; } p { margin: 0 0 14px; } .lead { font-size: clamp(1.08rem, 2vw, 1.25rem); color: var(--muted); max-width: 44em; } .small { font-size: .9rem; color: var(--muted); } .eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--eyebrow); font-weight: 500; margin-bottom: 10px; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; } .narrow { max-width: 760px; } section { padding: clamp(48px, 8vw, 96px) 0; } section.tight { padding-top: 0; } .band { background: var(--bg-2); border-block: 1px solid var(--line); } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--glass); border-bottom: 1px solid transparent; -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); } .site-header { transition: box-shadow var(--d-in-place) var(--ease-standard), border-color var(--d-in-place) var(--ease-standard); } .site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .35); } .site-header .wrap { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav toggle"; align-items: center; gap: 12px; min-height: 64px; } .brand { grid-area: brand; } .site-header nav { grid-area: nav; justify-self: end; } .theme-toggle { grid-area: toggle; } .brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; } .brand svg { width: 34px; height: 30px; } .wordmark { text-transform: uppercase; letter-spacing: .22em; font-weight: 400; font-size: .95rem; white-space: nowrap; } .site-header nav { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; } .site-header nav::-webkit-scrollbar { display: none; } .site-header nav a { color: var(--fg); text-decoration: none; padding: 8px 12px; border-radius: var(--r-pill); font-size: .95rem; white-space: nowrap; transition: background var(--d-in-place) var(--ease-standard); } .site-header nav a:hover { background: var(--chip); } .site-header nav a[aria-current] { background: var(--chip); font-weight: 500; } .site-header nav a.lang { color: var(--muted); border: 1px solid var(--line); margin-left: 6px; } @media (max-width: 720px) { .site-header .wrap { grid-template-columns: 1fr auto; grid-template-areas: "brand toggle" "nav nav"; gap: 0 8px; padding-top: 10px; } .site-header nav { justify-self: stretch; margin: 0 -16px; padding: 6px 12px 10px; } } /* ☀︎ / ☾: monochrome text glyphs (U+FE0E), the one you'd switch to is shown. Hidden until theme.js is there to run it. */ .theme-toggle { display: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; padding: 0; font: 1.15rem/1 system-ui, sans-serif; font-variant-emoji: text; -webkit-tap-highlight-color: transparent; transition: background var(--d-in-place) var(--ease-standard), transform var(--d-exit) var(--ease-standard); } .has-theme-toggle .theme-toggle { display: grid; } .theme-toggle:hover { background: var(--chip); } .theme-toggle:active { transform: scale(var(--press-button)); } .theme-toggle span { grid-area: 1 / 1; transition: transform var(--d-enter) var(--ease-decel), opacity var(--d-exit) var(--ease-standard); } .theme-toggle .sun { opacity: var(--sun); transform: rotate(calc((1 - var(--sun)) * -90deg)) scale(calc(.4 + .6 * var(--sun))); } .theme-toggle .moon { opacity: calc(1 - var(--sun)); transform: rotate(calc(var(--sun) * 90deg)) scale(calc(1 - .6 * var(--sun))); } .theme-swap, .theme-swap *, .theme-swap *::before { transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease !important; } .draft-banner { background: var(--pink-soft); color: var(--ink); text-align: center; font-size: .88rem; padding: 6px 16px; } /* ---------- buttons, chips ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: var(--r-pill); text-decoration: none; font-weight: 500; background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent); transition: transform var(--d-exit) var(--ease-standard), box-shadow var(--d-in-place) var(--ease-standard); } .btn:hover { box-shadow: var(--shadow); } .btn:active { transform: scale(var(--press-button)); } .btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); } .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; } .chip { background: var(--chip); border-radius: var(--r-pill); padding: 5px 12px; font-size: .85rem; color: var(--fg); } .chip.soon { background: transparent; border: 1px dashed var(--line); color: var(--muted); } /* ---------- hero ---------- */ .hero { position: relative; padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 8vw, 96px); overflow: hidden; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none; background: radial-gradient(40% 50% at 78% 30%, color-mix(in srgb, var(--pink) 38%, transparent), transparent 70%), radial-gradient(35% 45% at 12% 70%, color-mix(in srgb, var(--olive-light) 26%, transparent), transparent 70%); transform: translate3d(calc(var(--px, 0) * 28px), calc(var(--py, 0) * 20px), 0); transition: transform .9s var(--ease-decel); } .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; } .hero .motto { font-size: clamp(1.05rem, 2vw, 1.3rem); letter-spacing: .02em; color: var(--muted); margin-bottom: 20px; } .hero .motto .w { display: inline-block; } .stage { position: relative; aspect-ratio: 1416 / 1216; width: 100%; max-width: 440px; justify-self: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } .stage .mark { width: 100%; height: 100%; display: block; overflow: visible; } .stage .fx { position: absolute; inset: 0; pointer-events: none; } .bubble { position: absolute; border-radius: 50%; background: var(--mark-bubble); opacity: 0; will-change: transform, opacity; } .bubble::after { content: ""; position: absolute; left: 19%; top: 19%; width: 22%; height: 22%; border-radius: 50%; background: var(--cream); } .bubble.plain::after { content: none; } @media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; gap: 12px; } .stage { order: -1; max-width: 220px; justify-self: start; } } .app-hero .icon { width: 96px; height: 96px; border-radius: 26%; box-shadow: var(--shadow); margin-bottom: 18px; } /* ---------- cards & grids ---------- */ .grid { display: grid; gap: var(--s-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-large); padding: 22px; transition: transform var(--d-in-place) var(--ease-decel), box-shadow var(--d-in-place) var(--ease-standard); } .card p:last-child { margin-bottom: 0; } .card p { color: var(--muted); } a.card { display: block; color: inherit; text-decoration: none; } a.card:hover, .card.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); } a.card:active { transform: scale(var(--press-card)); } .card .emoji { font-size: 1.6rem; line-height: 1; display: inline-block; margin-bottom: 12px; } .card .more { color: var(--link); font-weight: 500; margin-top: 12px; display: inline-block; } .card .more::after { content: " →"; display: inline-block; transition: transform var(--d-in-place) var(--ease-decel); } a.card:hover .more::after { transform: translateX(4px); } .app-card { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: start; padding: 26px; } .app-card img { width: 72px; height: 72px; border-radius: 26%; } .app-card ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); } .promise { display: grid; gap: var(--s-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .promise .card { background: transparent; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-gap); text-align: center; } .stat b { display: block; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stat span { color: var(--muted); font-size: .92rem; } .steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .steps li { counter-increment: step; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-large); padding: 20px 20px 18px; } .steps li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 500; margin-bottom: 12px; } .steps li p { color: var(--muted); margin: 0; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } @media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 20px; } } .quote { font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 300; line-height: 1.25; letter-spacing: -.01em; margin: 0; } .quote .w { display: inline-block; } /* ---------- tables ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-medium); background: var(--card); margin: 14px 0; } table { width: 100%; border-collapse: collapse; font-size: .95rem; } th, td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); } tr:last-child td { border-bottom: 0; } th { font-weight: 500; background: var(--bg-2); } .platforms td:not(:first-child), .platforms th:not(:first-child) { width: 28%; } .yes::before { content: "✓ "; color: var(--eyebrow); font-weight: 500; } .no { color: var(--muted); } /* ---------- press kit ---------- */ .center { text-align: center; } .actions.center { justify-content: center; } .sw-forest { background: #314021; } .sw-olive { background: #617246; } .sw-pink { background: #C09BAC; } .sw-cream { background: #D8C6BA; } .sw-ink { background: #0C0D07; } .sw-olive-light { background: #8FA06A; } .swatches { display: grid; gap: var(--s-gap); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .swatch { border: 1px solid var(--line); border-radius: var(--r-medium); overflow: hidden; background: var(--card); cursor: pointer; text-align: left; font: inherit; color: inherit; padding: 0; transition: transform var(--d-exit) var(--ease-standard); } .swatch:active { transform: scale(var(--press-card)); } .swatch i { display: block; height: 84px; } .swatch span { display: block; padding: 10px 12px; font-size: .9rem; } .swatch code { color: var(--muted); } .swatch.popped { animation: pop var(--d-popfade) var(--ease-decel); } .downloads { display: grid; gap: var(--s-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .download img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--cream-2); border-radius: var(--r-small); margin-bottom: 12px; padding: 14px; } .download.dark img { background: #0F110B; } .download a { margin-right: 12px; font-size: .92rem; } .boiler { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-medium); padding: 18px 20px; } video.brand-film { width: 100%; border-radius: var(--r-large); border: 1px solid var(--line); background: var(--cream); } /* ---------- long reading pages (legal) ---------- */ .prose h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); } .prose h2 { font-size: 1.3rem; margin: 34px 0 8px; } .prose h3 { margin-top: 22px; } .prose ul { padding-left: 20px; } .prose li { margin-bottom: 6px; } .prose .table-wrap table { font-size: .93rem; } .toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; } .toc a { text-decoration: none; } .placeholder { background: #FFF3B0; color: #3A2E00; padding: 0 4px; border-radius: 4px; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: 56px 0 36px; margin-top: 40px; font-size: .94rem; } .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; } .foot-grid h4 { margin: 0 0 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 500; color: var(--muted); } .foot-grid ul { list-style: none; padding: 0; margin: 0; } .foot-grid li { margin-bottom: 8px; } .foot-grid a { color: var(--fg); text-decoration: none; } .foot-grid a:hover { text-decoration: underline; } .foot-brand svg { width: 44px; height: 38px; margin-bottom: 10px; } .foot-brand .motto { font-style: italic; color: var(--muted); margin: 8px 0; } .foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); margin-top: 36px; padding-top: 18px; color: var(--muted); font-size: .86rem; } @media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } } /* ---------- play (site.js) ---------- */ .card, .steps li, .swatch { isolation: isolate; } .card::after, .swatch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity var(--d-in-place) var(--ease-standard); background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 70%); } .card:hover::after, .swatch:hover::after { opacity: 1; } .swatch { position: relative; } .card:hover .emoji { animation: wiggle .6s var(--ease-decel); } @keyframes wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-12deg) scale(1.15); } 60% { transform: rotate(8deg) scale(1.1); } } .app-card, .download { transition: transform .35s var(--ease-decel), box-shadow var(--d-in-place) var(--ease-standard); will-change: transform; } .fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; } .fx-layer .bubble { opacity: 1; } .confetti { position: absolute; border-radius: 2px; } .progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--olive), var(--pink)); } /* ---------- motion (site.js adds .js; nothing is hidden without it) ---------- */ @keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(.92); } to { transform: scale(1); } } @keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .js [data-reveal] > *, .js .reveal { opacity: 0; } .js [data-reveal].in > *, .js .reveal.in { animation: fadeup var(--d-reveal-enter) var(--ease-decel) both; animation-delay: min(calc(var(--i, 0) * var(--d-reveal-step)), var(--d-reveal-max)); } .js .motto .w, .js .quote .w { opacity: 0; } .js .in .w, .js .motto.in .w { animation: fadeup var(--d-enter) var(--ease-decel) both; animation-delay: calc(var(--i) * 90ms + 200ms); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .js [data-reveal] > *, .js .reveal, .js .w { opacity: 1 !important; } }