/* ============================================================ Starky — Site styles Built on tokens.css. Anchored to docs/design.md: one soft-violet accent · Newsreader + DM Sans · soft rounded · generous whitespace. Expressive maple/violet/gold reserved for the mascot & magic art. The SITE runs dark (); the APP is light. Every colour here comes from a token so the two skins swap cleanly. Regions that depict the app carry data-theme="light" and island themselves back to paper — see .app-window and .mock. ============================================================ */ /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--surface); overflow-x: hidden; } body { overflow-x: hidden; margin: 0; background: var(--surface); color: var(--on-surface); font-family: var(--font-sans); font-size: var(--type-body-size); line-height: var(--type-body-lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* height:auto is load-bearing: images carry width/height attributes so the layout doesn't shift while they load, and without this the HTML height attribute wins wherever CSS only sets a width. Rules that genuinely want a fixed height (.scene-media img, .scene-art img) are more specific and win. */ img, svg { max-width: 100%; height: auto; display: block; } p, li, h1, h2, h3, .display, .hero-title, .page-title { overflow-wrap: break-word; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } /* Focus: a solid ring plus a soft halo, so it stays visible on surface, on surface-raised, and on top of imagery alike. */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: var(--elev-focus); border-radius: var(--rounded-sm); } hr { border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0; } ::selection { background: var(--accent-soft); color: var(--on-surface); } /* A theme island (data-theme on something other than ) MUST re-declare `color`. Inheritance passes down the COMPUTED colour from the ancestor, so redefining the custom properties alone leaves the outer theme's text colour in place: without this, .app-window renders #F4F1EE on white at 1.06:1. */ [data-theme] { color: var(--on-surface); } /* ---------- Layout ---------- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; } .container-reading { max-width: var(--container-reading); margin: 0 auto; padding: 0 24px; } .section { padding: 96px 0; } .section-sm { padding: 64px 0; } .center { text-align: center; } .stack > * + * { margin-top: var(--space-4); } /* ---------- Type utilities ---------- */ .eyebrow { font-family: var(--font-sans); font-weight: var(--type-eyebrow-weight); font-size: var(--type-eyebrow-size); letter-spacing: var(--type-eyebrow-ls); line-height: var(--type-eyebrow-lh); text-transform: uppercase; color: var(--accent); display: inline-block; margin: 0 0 16px; } .display { font-family: var(--font-serif); font-weight: var(--type-display-weight); font-size: clamp(2.6rem, 6vw, var(--type-display-size)); line-height: var(--type-display-lh); letter-spacing: var(--type-display-ls); margin: 0; } h1, .h1 { font-family: var(--font-serif); font-weight: var(--type-h1-weight); font-size: clamp(2.1rem, 5vw, var(--type-h1-size)); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); margin: 0; } h2, .h2 { font-family: var(--font-serif); font-weight: var(--type-h2-weight); font-size: clamp(1.8rem, 4vw, var(--type-h2-size)); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); margin: 0; } h3, .h3 { font-family: var(--font-serif); font-weight: var(--type-h3-weight); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); letter-spacing: var(--type-h3-ls); margin: 0; } .h4 { font-family: var(--font-sans); font-weight: var(--type-h4-weight); font-size: var(--type-h4-size); line-height: var(--type-h4-lh); letter-spacing: var(--type-h4-ls); margin: 0; } .lead { font-size: var(--type-lead-size); line-height: var(--type-lead-lh); color: var(--on-surface-muted); margin: 0; } .muted { color: var(--on-surface-muted); } .subtle { color: var(--on-surface-subtle); } .measure { max-width: 42ch; } .measure-wide { max-width: 54ch; } /* ---------- Buttons ---------- */ .btn { font-family: var(--font-sans); font-size: var(--type-button-size); font-weight: var(--type-button-weight); line-height: 1; border: 1px solid transparent; border-radius: var(--rounded-full); padding: 16px 30px; min-height: 52px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; text-decoration: none; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--elev-accent-glow); } .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-1px); box-shadow: var(--elev-accent-glow-hover); } .btn-secondary { background: var(--surface-raised); color: var(--on-surface); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--surface-sunken); color: var(--on-surface); } .btn-ghost { background: transparent; color: var(--accent); padding: 16px 20px; } .btn-ghost:hover { background: var(--accent-soft); color: var(--accent-strong); } .btn-lg { min-height: 58px; padding: 18px 34px; font-size: 1.0625rem; } .btn-sm { min-height: 44px; padding: 11px 20px; font-size: .9375rem; } .btn-block { width: 100%; } .btn .arrow { transition: transform .16s ease; } .btn:hover .arrow { transform: translateX(3px); } /* On the dark violet magic blocks and over scene imagery. These grounds are dark in BOTH themes, so their buttons use the fixed on-night values — a white pill with deep-violet ink, never the theme accent. */ .on-dark .btn-primary { background: var(--on-night-fill); color: var(--on-night-fill-ink); box-shadow: 0 10px 30px var(--night-shadow); } .on-dark .btn-primary:hover { background: var(--on-night-fill); color: var(--on-night-fill-ink-hover); } .on-dark .btn-secondary { background: var(--on-night-wash); color: var(--on-night); border-color: var(--on-night-line); } .on-dark .btn-secondary:hover { background: var(--on-night-wash-hover); color: var(--on-night); } .on-dark :focus-visible { outline-color: var(--on-night); } /* ---------- Pills / badges / chips ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 4px 12px; border-radius: var(--rounded-full); font-size: var(--type-caption-size); font-weight: 600; } .badge-violet { background: var(--accent-soft); color: var(--accent-strong); } .badge-maple { background: var(--surface-maple); color: var(--maple-deep); } .badge-gold { background: var(--surface-gold); color: var(--warning); } .badge-success { background: var(--success-soft); color: var(--success); } .reassure { display: inline-flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; color: var(--on-surface-muted); font-size: var(--type-body-sm-size); } .reassure span { display: inline-flex; align-items: center; gap: 7px; } .dot-check { color: var(--success); font-weight: 700; } /* ---------- Navigation ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); } .nav-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 500; color: var(--on-surface); letter-spacing: -0.01em; } .brand:hover { text-decoration: none; color: var(--on-surface); } .brand img { width: 36px; height: 36px; } .nav-links { display: flex; align-items: center; gap: 2px; } .nav-link { padding: 8px 14px; border-radius: var(--rounded-full); color: var(--on-surface); font-size: var(--type-body-size); } .nav-link:hover { background: var(--surface-sunken); color: var(--on-surface); text-decoration: none; } .nav-link.active { color: var(--accent-strong); font-weight: 500; } .nav-right { display: flex; align-items: center; gap: 10px; } .nav-toggle { display: none; background: none; border: 1px solid var(--border-strong); border-radius: var(--rounded-sm); width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 18px; height: 2px; background: var(--on-surface); position: relative; } .nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; } /* ---------- Page headers ---------- One component for all four page tops (Home, Download, Resources, Company): a landscape scene behind, the same scrim as the magic CTA, the same measurements everywhere. Only the title STEP differs — the homepage gets `hero`, the other three share `page`, so they read as one system. */ .page-hero { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: 84px 0 92px; } .page-hero .container { position: relative; z-index: 1; } /* Just a measure + centring wrapper now; the scrim lives on .scene-band. */ .hero-plate { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 40px 24px 44px; } /* No separate plate. Page headers and the magic CTA share ONE treatment: the .scene-band ellipse scrim. Stacking a plate on top of that scrim was darkening the headers twice and swallowing the artwork. */ .hero-plate > * { position: relative; } .hero-plate .lead { margin-left: auto; margin-right: auto; } /* Shared title step for Download / Resources / Company. */ .page-title { font-family: var(--font-serif); font-weight: var(--type-page-weight); font-size: clamp(2.25rem, 5.4vw, var(--type-page-size)); line-height: var(--type-page-lh); letter-spacing: var(--type-page-ls); color: var(--on-night); margin: 0; text-wrap: balance; } /* ---------- Hero ---------- */ .hero-head { max-width: none; } .hero-plate .lead { margin: 28px auto 0; max-width: 54ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 38px 0 0; } /* The one big statement on the page. Leading drops below 1 and the tracking closes up, because at this size default settings read loose and drifty. */ .hero-title { font-family: var(--font-serif); font-weight: var(--type-hero-weight); font-size: clamp(2.6rem, 7.2vw, var(--type-hero-size)); line-height: var(--type-hero-lh); letter-spacing: var(--type-hero-ls); color: var(--on-night); margin: 0; text-wrap: balance; } /* Deliberately quiet: this is reassurance, not a selling point. */ .hero-meta { margin: 22px 0 0; font-size: var(--type-caption-size); color: var(--on-night-muted); letter-spacing: .01em; } /* The big violet "stage" block — the Intercom-style hero image + in-hero app demo. A night block: dark in both themes. On the dark site it stops being a punch-out and becomes a lit clearing, so it keeps a hairline to hold its edge. */ .stage { position: relative; overflow: hidden; border-radius: var(--rounded-2xl); padding: 64px 40px 0; margin-top: 48px; background: radial-gradient(120% 90% at 15% 8%, var(--wash-violet-a), transparent 46%), radial-gradient(130% 100% at 88% 12%, var(--wash-violet-b), transparent 50%), radial-gradient(90% 120% at 60% 120%, var(--wash-gold), transparent 46%), linear-gradient(158deg, var(--night-1) 0%, var(--night-2) 55%, var(--night-3) 100%); box-shadow: var(--elev-violet); } [data-theme="dark"] .stage { border: 1px solid var(--border); } .stage-tall { padding-bottom: 64px; } .stage-glow { position: absolute; left: 50%; top: 42%; width: min(640px, 90%); height: 380px; transform: translate(-50%,-50%); background: radial-gradient(closest-side, var(--wash-glow), transparent 70%); filter: blur(10px); pointer-events: none; } /* Star field */ .stars { position: absolute; inset: 0; pointer-events: none; } .star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--star); box-shadow: 0 0 6px 1px var(--star-glow); opacity: .8; animation: twinkle 3.4s ease-in-out infinite; } .star.gold { background: var(--gold); box-shadow: 0 0 7px 1px var(--star-gold-glow); } .star.big { width: 5px; height: 5px; } @keyframes twinkle { 0%,100% { opacity:.35; transform: scale(.7);} 50% { opacity:1; transform: scale(1.15);} } /* App demo window. Carries data-theme="light" in the markup: it depicts the Starky app, which is light. A bright window sitting on a dark page is the intended reading, not a bug. */ .app-window { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; background: var(--surface-raised); border-radius: 16px 16px 0 0; border: 1px solid var(--frame-highlight); box-shadow: var(--elev-xl); overflow: hidden; } .app-window.float { border-radius: 16px; margin-bottom: 56px; } .app-titlebar { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--surface-sunken); border-bottom: 1px solid var(--border); } .tl { width: 12px; height: 12px; border-radius: 50%; } .tl.r { background: var(--mac-close); } .tl.y { background: var(--mac-min); } .tl.g { background: var(--mac-max); } .app-title { flex: 1; text-align: center; font-size: .8125rem; color: var(--on-surface-subtle); font-weight: 500; margin-right: 44px; } .app-body { display: grid; grid-template-columns: 216px 1fr; min-height: 388px; } .app-side { background: var(--surface-sunken); border-right: 1px solid var(--border); padding: 14px 12px; } .app-side .app-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px; font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem; } .app-side .app-brand img { width: 26px; height: 26px; } .side-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--rounded-md); color: var(--on-surface-muted); font-size: var(--type-body-sm-size); margin-bottom: 2px; } .side-item .gi { width: 18px; text-align: center; opacity: .9; } .side-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 500; } .app-main { padding: 26px 28px; background: var(--surface-raised); } /* Learn-drill content inside the app demo */ .drill-eyebrow { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-subtle); font-weight: 600; } .drill-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; margin: 8px 0 20px; } .say-pill { display: inline-flex; align-items: center; gap: 12px; background: var(--surface-accent); border: 1px solid var(--accent-soft); color: var(--accent-strong); border-radius: var(--rounded-full); padding: 14px 22px; font-size: 1.35rem; font-family: var(--font-serif); } .say-pill .mic { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .hears { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 12px 14px; background: var(--surface-sunken); border-radius: var(--rounded-md); font-size: var(--type-body-sm-size); color: var(--on-surface-muted); } .wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; } .wave i { width: 3px; background: var(--accent); border-radius: 2px; animation: wave 1.1s ease-in-out infinite; } .wave i:nth-child(1){height:6px; animation-delay:0s} .wave i:nth-child(2){height:14px; animation-delay:.1s} .wave i:nth-child(3){height:20px; animation-delay:.2s} .wave i:nth-child(4){height:11px; animation-delay:.3s} .wave i:nth-child(5){height:16px; animation-delay:.4s} .wave i:nth-child(6){height:7px; animation-delay:.5s} @keyframes wave { 0%,100%{ transform: scaleY(.5);} 50%{ transform: scaleY(1);} } .hears .heard { margin-left: auto; color: var(--success); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .drill-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 14px; background: var(--success-soft); color: var(--success); border-radius: var(--rounded-md); font-weight: 500; font-size: var(--type-body-sm-size); } .drill-progress { display: flex; gap: 6px; margin-top: 22px; } .drill-progress i { height: 6px; border-radius: 3px; background: var(--border-strong); flex: 1; } .drill-progress i.done { background: var(--accent); } .drill-progress i.now { background: var(--accent-soft); } /* ---------- Feature grid ---------- */ .grid { display: grid; gap: 24px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--rounded-lg); padding: var(--space-6); box-shadow: var(--elev-sm); } .card.plain { background: var(--surface-sunken); box-shadow: none; } /* A sunken card on a sunken band is the same fill as its ground and vanishes. Lift it back to raised — true in both themes, more urgent on dark. */ .band .card.plain { background: var(--surface-raised); } .card h3 { margin: 16px 0 8px; } .card p { margin: 0; color: var(--on-surface-muted); font-size: var(--type-body-sm-size); } .icon-dot { width: 46px; height: 46px; border-radius: var(--rounded-full); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; } /* The single brand icon treatment: brown tile, gold mark. Deliberately the one warm note on a very violet page. */ .icon-brand { background: var(--surface-maple); color: var(--icon-brand-fg); } .icon-violet { background: var(--accent-soft); color: var(--accent-strong); } .icon-maple { background: var(--surface-maple); color: var(--maple-deep); } .icon-gold { background: var(--surface-gold); color: var(--warning); } .icon-success { background: var(--success-soft); color: var(--success); } /* ---------- Showcase rows (media + text) ---------- */ .showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .showcase.flip .showcase-media { order: 2; } .showcase-media { } .showcase-text .eyebrow { margin-bottom: 14px; } .showcase-text h2 { margin-bottom: 16px; } .showcase-text p { color: var(--on-surface-muted); font-size: var(--type-lead-size); line-height: 1.6; } .showcase-list { list-style: none; padding: 0; margin: 22px 0 0; } .showcase-list li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--on-surface); } .showcase-list li::before { content: "✦"; position: absolute; left: 0; color: var(--accent); } /* ---------- Real app screenshots ---------- Captures of the running app, not drawings of it. The app ships light by default, so a shot reads as a bright window on the dark page, which is the same reading the old hand-built mockups were going for. macOS's rounded window corners are cropped off at export, so the radius below cannot leave a sliver of desktop showing in the corners. Inside .stage, a shot MUST be positioned and lifted: .stage-glow and .stars are absolutely positioned siblings, so an unpositioned shot paints underneath them and takes a violet wash across its middle. .app-window carried the same z-index for the same reason. */ .shot { position: relative; z-index: 2; border-radius: var(--rounded-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--elev-xl); background: var(--surface-raised); line-height: 0; } .shot img { display: block; width: 100%; height: auto; } .shot-hero { box-shadow: var(--elev-violet), var(--elev-xl); } .shot-caption { margin-top: 16px; font-size: var(--type-body-sm-size); color: var(--on-surface-subtle); text-align: center; } .showcase .shot-caption { text-align: left; } /* Editor mock */ .mock { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--rounded-lg); box-shadow: var(--elev-md); overflow: hidden; } .mock-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); } .mock-body { padding: 22px; } .field-row { margin-bottom: 18px; } .field-row label { display: block; font-size: var(--type-caption-size); font-weight: 600; color: var(--on-surface-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; } .fake-input { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--rounded-sm); padding: 12px 14px; font-family: var(--font-serif); font-size: 1.25rem; color: var(--on-surface); } .fake-input.focus { border-color: var(--accent); box-shadow: var(--elev-focus); } .step-chip { display: flex; align-items: center; gap: 12px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--rounded-md); padding: 11px 14px; margin-bottom: 8px; font-size: var(--type-body-sm-size); } .step-chip .num { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .kbd { font-family: var(--font-mono); font-size: .82rem; background: var(--surface-raised); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; } .valid { display: inline-flex; align-items: center; gap: 7px; color: var(--success); font-size: var(--type-body-sm-size); font-weight: 500; margin-top: 6px; } /* ---------- Magic CTA block ---------- */ .magic-cta { position: relative; overflow: hidden; border-radius: var(--rounded-2xl); padding: 84px 40px; text-align: center; background: radial-gradient(120% 120% at 20% 0%, var(--wash-violet-a), transparent 45%), radial-gradient(120% 120% at 85% 20%, var(--wash-violet-b), transparent 50%), radial-gradient(100% 120% at 50% 120%, var(--wash-gold), transparent 46%), linear-gradient(158deg, var(--night-1), var(--night-2) 60%, var(--night-3)); box-shadow: var(--elev-violet); } [data-theme="dark"] .magic-cta { border: 1px solid var(--border); } /* The mascot was drawn for paper, so his hat was the worry on dark ground. Measured rather than assumed, and the intuitive fix is wrong: a soft light halo behind him RAISES the background through the hat's own luminance and makes it disappear — hat #483060 goes from 1.69:1 on the night ground to 1.06:1 behind a 20% white halo. So there is no halo. He reads through his coat (10.2:1) and cream (13.0:1); the hat is a silhouette carrying gold emblems, which is how it was drawn. Decorative art, not a UI control — the 3:1 non-text minimum does not apply, and the alt text carries meaning. */ .magic-cta .mascot-peek { position: relative; z-index: 1; width: 128px; margin: 0 auto 8px; filter: drop-shadow(0 12px 24px var(--art-shadow)); } /* ---------- On-dark text scope ---------- For night blocks and scene bands — grounds that are dark in BOTH themes. Uses the fixed on-night values, never the theme tokens, so this stays correct if the surrounding page is ever light again. */ .on-dark { color: var(--on-night); } .on-dark h1, .on-dark h2, .on-dark h3, .on-dark .display { color: var(--on-night); } .on-dark .eyebrow { color: var(--on-night-eyebrow); } .on-dark .lead, .on-dark p { color: var(--on-night-muted); } .on-dark .muted, .on-dark .subtle { color: var(--on-night-muted); } .on-dark .reassure, .on-dark .post-meta { color: var(--on-night-muted); } .on-dark .cat { background: var(--on-night-wash); border-color: var(--on-night-line); color: var(--on-night); } .on-dark .cat.active, .on-dark .cat:hover { background: var(--on-night-fill); border-color: transparent; color: var(--on-night-fill-ink); } /* ---------- Scene bands — the 12 landscape stills ---------- A full-bleed illustrated section. The image sits behind its own scrim; .scene-content holds the text. Decorative only: alt="" + aria-hidden. */ .scene-band { position: relative; isolation: isolate; overflow: hidden; } .scene-band .scene-media { position: absolute; inset: 0; z-index: -3; } .scene-band .scene-media picture { display: block; width: 100%; height: 100%; } .scene-band .scene-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Centred, not top-to-bottom: darken behind the text column and let the edges of the illustration through. Values solved by pixel sampling — see tokens.css. */ .scene-band::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse var(--scrim-ellipse) at 50% 50%, var(--scrim-core) 0%, var(--scrim-mid) 55%, var(--scrim-edge) 100%), linear-gradient(180deg, var(--scrim-veil-top), var(--scrim-veil-bottom)); } .scene-band .scene-content { position: relative; z-index: 1; } /* Rounded variant, for a scene used as a contained block rather than full-bleed */ .scene-band.scene-inset { border-radius: var(--rounded-2xl); } /* A scene standing in for the magic-cta gradient */ .magic-cta.scene-band { background: var(--night-3); } /* Blog / article header image */ .scene-header { display: block; position: relative; isolation: isolate; overflow: hidden; border-radius: var(--rounded-xl); background: var(--night-3); } .scene-header picture { display: block; width: 100%; height: 100%; } .scene-header img { width: 100%; height: 100%; object-fit: cover; display: block; } .scene-header::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--scrim-art-top) 0%, var(--scrim-art-bottom) 100%); } /* Card-sized scene art — blog thumbnails and the featured tile */ .scene-art { display: block; position: relative; overflow: hidden; background: var(--night-3); } .scene-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .scene-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--scrim-art-top) 0%, var(--scrim-art-bottom) 100%); } /* ---------- Footer ---------- */ .footer { background: var(--surface-sunken); border-top: 1px solid var(--border); padding: 72px 0 40px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } .footer .brand { margin-bottom: 14px; } .footer .foot-tag { color: var(--on-surface-muted); font-size: var(--type-body-sm-size); max-width: 30ch; } .footer h4 { font-family: var(--font-sans); font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--on-surface-subtle); margin: 0 0 14px; font-weight: 600; } .footer ul { list-style: none; padding: 0; margin: 0; } .footer li { margin-bottom: 10px; } .footer li a { color: var(--on-surface-muted); font-size: var(--type-body-sm-size); } .footer li a:hover { color: var(--accent); text-decoration: none; } .footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; color: var(--on-surface-subtle); font-size: var(--type-body-sm-size); } /* ---------- Auth (login) ---------- */ .auth-wrap { min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; justify-content: center; padding: 56px 24px; background: radial-gradient(60% 60% at 15% 10%, var(--surface-accent), transparent 60%), radial-gradient(60% 60% at 90% 90%, var(--surface-maple), transparent 55%), var(--surface); } .auth-card { width: 100%; max-width: 428px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--rounded-xl); box-shadow: var(--elev-lg); padding: 40px 38px; } .auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 20px; } .auth-brand img { width: 64px; height: 72px; } .auth-toggle { display: flex; gap: 4px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--rounded-full); padding: 4px; margin-bottom: 22px; } .auth-tab { flex: 1; border: none; background: none; font-family: var(--font-sans); font-size: .9375rem; font-weight: 500; color: var(--on-surface-muted); padding: 12px 9px; min-height: 44px; border-radius: var(--rounded-full); cursor: pointer; } .auth-tab.active { background: var(--surface-raised); color: var(--accent-strong); box-shadow: var(--elev-sm); } .auth-card h1 { text-align: center; font-size: 2rem; } .auth-sub { text-align: center; color: var(--on-surface-muted); margin: 8px 0 26px; font-size: var(--type-body-sm-size); } .form-field { margin-bottom: 16px; } .form-field label { display: block; font-size: var(--type-caption-size); font-weight: 600; color: var(--on-surface); margin-bottom: 7px; } .input { width: 100%; font-family: var(--font-sans); font-size: var(--type-body-size); background: var(--surface-raised); color: var(--on-surface); border: 1px solid var(--border-strong); border-radius: var(--rounded-sm); padding: 13px 14px; min-height: 48px; } .input::placeholder { color: var(--on-surface-subtle); } .input:focus { outline: none; border-color: var(--accent); box-shadow: var(--elev-focus); } .form-row { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 22px; font-size: var(--type-body-sm-size); } .divider { display: flex; align-items: center; gap: 14px; color: var(--on-surface-subtle); font-size: var(--type-body-sm-size); margin: 22px 0; } .divider::before, .divider::after { content: ""; height: 1px; background: var(--border); flex: 1; } /* Auth feedback. Errors and confirmations both land here, so it needs to read as one component with two tones rather than two different treatments. */ .auth-alert { border-radius: var(--rounded-sm); padding: 12px 14px; margin: 0 0 18px; font-size: var(--type-body-sm-size); line-height: 1.5; } .auth-alert.error { background: var(--error-soft); color: var(--error); border: 1px solid var(--error); } .auth-alert.ok { background: var(--success-soft); color: var(--success); border: 1px solid var(--success); } .auth-card .btn[disabled] { opacity: .6; cursor: progress; } .auth-alt { text-align: center; margin-top: 24px; color: var(--on-surface-muted); font-size: var(--type-body-sm-size); } .auth-note { text-align: center; margin-top: 18px; color: var(--on-surface-subtle); font-size: var(--type-caption-size); } /* ---------- Blog / resources ---------- */ .page-header { padding: 72px 0 8px; text-align: center; } .page-header .lead { margin: 20px auto 0; max-width: 44ch; } .cat-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 30px 0 0; } .cat { padding: 8px 16px; border-radius: var(--rounded-full); border: 1px solid var(--border-strong); color: var(--on-surface-muted); font-size: var(--type-body-sm-size); background: var(--surface-raised); } .cat.active, .cat:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-strong); text-decoration: none; } .featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--rounded-xl); overflow: hidden; box-shadow: var(--elev-sm); } .featured .art, .featured .scene-art { min-height: 320px; height: 100%; } .featured .fx { padding: 40px; } .post-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--on-surface-subtle); font-size: var(--type-body-sm-size); } .post-meta .cat-tag { color: var(--accent-strong); font-weight: 600; } /* Gradient art placeholder — kept as the fallback for any tile without a scene image yet. Real scenes use .scene-art. */ .art { background: radial-gradient(120% 120% at 20% 0%, var(--wash-violet-a), transparent 50%), radial-gradient(120% 120% at 85% 30%, var(--wash-violet-b), transparent 55%), linear-gradient(158deg, var(--night-1), var(--night-2) 60%, var(--night-3)); position: relative; overflow: hidden; } .post-list { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 8px; } .post-item { display: grid; grid-template-columns: 200px 1fr; gap: 28px; padding: 32px 0; border-bottom: 1px solid var(--border); align-items: center; } .post-item .thumb { border-radius: var(--rounded-md); height: 130px; } .post-item h3 { margin: 8px 0 8px; } .post-item h3 a { color: var(--on-surface); } .post-item h3 a:hover { color: var(--accent); text-decoration: none; } .post-item p { color: var(--on-surface-muted); font-size: var(--type-body-sm-size); margin: 0 0 12px; } /* ---------- Article ---------- */ .article { padding: 48px 0 32px; } .article .back { display: inline-flex; align-items: center; gap: 8px; color: var(--on-surface-muted); font-size: var(--type-body-sm-size); margin-bottom: 22px; } .article h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; margin: 14px 0 18px; } .article .lead { font-size: 1.3rem; } .article-art { border-radius: var(--rounded-xl); height: 300px; margin: 36px 0; box-shadow: var(--elev-violet); } .prose { font-size: 1.125rem; line-height: 1.75; color: var(--on-surface); } .prose > * + * { margin-top: 1.3em; } .prose h2 { font-family: var(--font-serif); font-weight: 500; font-size: 1.9rem; letter-spacing: -0.015em; margin-top: 1.9em; line-height: 1.2; } .prose h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.4rem; margin-top: 1.6em; } .prose p { margin-top: 1.1em; } .prose ul, .prose ol { padding-left: 1.3em; margin-top: 1.1em; } .prose li { margin-bottom: .5em; } .prose li::marker { color: var(--accent); } .prose strong { font-weight: 600; } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--accent-soft); font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; line-height: 1.4; color: var(--on-surface); } .prose code { font-family: var(--font-mono); font-size: .92em; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; color: var(--accent-strong); } .callout { background: var(--surface-accent); border: 1px solid var(--accent-soft); border-radius: var(--rounded-lg); padding: 20px 22px; margin: 1.6em 0; font-size: 1.05rem; } .callout strong { color: var(--accent-strong); } /* ---------- Long-form article furniture ---------- Tables, contents, key points and inline FAQs. Long guides need these and the first six articles all invented their own, so they live here once. */ /* Tables must scroll inside their own box. A comparison table is the widest thing on the page and the body must never scroll sideways because of one. */ .table-scroll { overflow-x: auto; margin: 1.8em 0; border: 1px solid var(--border); border-radius: var(--rounded-lg); background: var(--surface-raised); } .prose table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 560px; } .prose thead th { text-align: left; font-weight: 600; font-size: var(--type-body-sm-size); letter-spacing: .02em; text-transform: uppercase; color: var(--on-surface-subtle); padding: 16px 18px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); white-space: nowrap; } .prose tbody td { padding: 15px 18px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--on-surface-muted); } .prose tbody tr:last-child td { border-bottom: 0; } .prose tbody th { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--on-surface); vertical-align: top; white-space: nowrap; } .prose tbody tr:last-child th { border-bottom: 0; } .prose td code, .prose th code { white-space: nowrap; } /* Contents. Long guides get one; it helps a reader and it is how search engines pick up the jump links for a result. */ .toc { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--rounded-lg); padding: 24px 26px; margin: 2em 0; } .toc h2 { font-family: var(--font-sans); font-size: var(--type-body-sm-size); text-transform: uppercase; letter-spacing: .06em; color: var(--on-surface-subtle); margin: 0 0 14px; font-weight: 600; } .toc ol { margin: 0; padding-left: 1.2em; } .toc li { margin-bottom: .45em; } .toc li:last-child { margin-bottom: 0; } .toc a { color: var(--on-surface); text-decoration: none; } .toc a:hover { color: var(--accent); text-decoration: underline; } /* The short answer, up top, for the reader who wants it in ten seconds. */ .key-points { border-left: 3px solid var(--accent); background: var(--surface-raised); border-radius: 0 var(--rounded-md) var(--rounded-md) 0; padding: 22px 24px; margin: 1.8em 0; } .key-points h2 { font-family: var(--font-sans); font-size: var(--type-body-sm-size); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin: 0 0 12px; font-weight: 600; } .key-points ul { margin: 0; padding-left: 1.2em; } .key-points li { margin-bottom: .5em; color: var(--on-surface); } .key-points li:last-child { margin-bottom: 0; } /* Inline FAQ. Real questions, answered plainly, marked up as FAQPage. */ .faq-block { margin: 1.8em 0; } .faq-block details { border-bottom: 1px solid var(--border); padding: 20px 0; } .faq-block details:first-of-type { border-top: 1px solid var(--border); } .faq-block summary { cursor: pointer; font-weight: 600; font-size: 1.0625rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--on-surface); } .faq-block summary::-webkit-details-marker { display: none; } .faq-block summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; flex: none; } .faq-block details[open] summary::after { content: "\2013"; } .faq-block p { margin: 12px 0 0; color: var(--on-surface-muted); font-size: 1.0625rem; } /* Read-next, so an article always offers somewhere to go. */ .read-next { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--border); } .read-next h2 { font-family: var(--font-sans); font-size: var(--type-body-sm-size); text-transform: uppercase; letter-spacing: .06em; color: var(--on-surface-subtle); margin: 0 0 18px; font-weight: 600; } .read-next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .read-next a { display: block; padding: 20px 22px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--rounded-lg); text-decoration: none; } .read-next a:hover { border-color: var(--accent-soft); background: var(--surface-accent); text-decoration: none; } .read-next .rn-cat { display: block; font-size: var(--type-caption-size); text-transform: uppercase; letter-spacing: .05em; color: var(--accent); font-weight: 600; margin-bottom: 7px; } .read-next .rn-title { display: block; color: var(--on-surface); font-weight: 600; line-height: 1.35; } @media (max-width: 720px) { .read-next-grid { grid-template-columns: 1fr; } } .article-foot { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 14px; color: var(--on-surface-muted); font-size: var(--type-body-sm-size); } /* Long-form editorial copy (the company blurb). Larger and looser than .prose, because it is read straight through rather than scanned. */ .prose-lg p { font-size: 1.25rem; line-height: 1.72; color: var(--on-surface); margin: 0 0 1.15em; } .prose-lg p:last-child { margin-bottom: 0; } .prose-lg p:first-child { font-size: 1.4rem; color: var(--on-surface); } /* ---------- Misc sections ---------- */ .band { background: var(--surface-sunken); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section-head { text-align: center; max-width: 620px; margin: 0 auto 56px; } .section-head .lead { margin-top: 16px; } .checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .checklist li { display: flex; gap: 12px; align-items: flex-start; } .checklist .tick { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } /* ---------- Responsive ---------- */ /* Tablet and below: page headers lose their desktop breathing room, and the hero plate stops reserving side padding it no longer has room for. */ @media (max-width: 1024px) { .page-hero { padding: 64px 0 72px; } .hero-plate { padding: 32px 12px 36px; } .section { padding: 72px 0; } } @media (max-width: 900px) { .nav-links { display: none; } .nav-links.open { display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--surface-raised); border-bottom: 1px solid var(--border); padding: 12px 16px; box-shadow: var(--elev-md); } .nav-links.open .nav-link { padding: 12px 14px; } .nav-toggle { display: inline-flex; } .showcase, .featured { grid-template-columns: 1fr; gap: 32px; } .showcase.flip .showcase-media { order: 0; } .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .featured .art { min-height: 200px; } .post-item { grid-template-columns: 1fr; gap: 14px; } .post-item .thumb { height: 160px; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .page-hero { padding: 48px 0 56px; } .hero-plate { padding: 24px 4px 28px; } .hero-cta { width: 100%; } .hero-cta .btn { width: 100%; } .hero-meta { font-size: .8125rem; } .cat-row { gap: 8px; } .prose-lg p, .prose-lg p:first-child { font-size: 1.0625rem; line-height: 1.65; } .article-art { height: 200px; } .featured .fx { padding: 28px 22px; } .auth-card { padding: 28px 22px; } .section { padding: 64px 0; } .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } .stage { padding: 40px 18px 0; } .app-body { grid-template-columns: 1fr; } .app-side { display: none; } .magic-cta { padding: 60px 22px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .hero-cta { flex-direction: column; } .hero-cta .btn { width: 100%; } .nav-right .btn-nav-hide { display: none; } } /* ---------- Motion preference ---------- */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto !important; transition: none !important; } }