/* Pythia one-pager (WIZ-147). * * The rule this file follows: the page is the app's front door at desktop * scale. Every colour, radius, space, shadow and type size below is a --wz-* * token from @wizzard/design (vendor/tokens.css) — nothing is hand-picked — so * the site can never drift from the product the way the store screenshots did * on WIZ-127/128. The shapes mirror the bento home: an eyebrow → title → body * rhythm on parchment cards, closing on the tab-bar-flat footer. * * LIGHT ONLY (founder call, rev 2). pins the kit's * "Arcane Daylight" palette, so the OS preference can't flip the marketing page * — and the WIZ-139 app captures we show are light-theme too, so the shots sit * on the page instead of floating on it. The dark art still appears, but it is * framed *inside* a parchment card rather than being the page background. * * The other rev-2 change is air: one --pg-section rhythm token drives every gap * between sections, and tile padding scales with the viewport instead of * sitting at a fixed 1.5rem. */ :root { /* The two page-level rhythm knobs. Everything else is a kit token; these * exist because "how much air between sections" is a property of a marketing * page, not of the app's design contract. */ --pg-section: clamp(3.5rem, 7vw, 7rem); --pg-pad-tile: clamp(1.5rem, 2.4vw, 2.5rem); --pg-measure: 36rem; /* body-copy line length, ~72 characters */ } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--wz-bg); color: var(--wz-ink); font-family: var(--wz-font-body); font-size: var(--wz-text-base); line-height: var(--wz-leading-normal); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Static stand-in for the app's animated .wz-mesh — the four blob colours come * from the light theme's own --wz-mesh-* tokens, so this warms the parchment * exactly as far as the kit says it should. No animation: a marketing page * should not burn a battery to sit still. */ .pg-mesh { position: fixed; inset: 0; z-index: -1; background: radial-gradient(60rem 40rem at 10% -10%, var(--wz-mesh-1), transparent 70%), radial-gradient(52rem 38rem at 94% 4%, var(--wz-mesh-4), transparent 70%), radial-gradient(64rem 48rem at 50% 104%, var(--wz-mesh-2), transparent 72%), var(--wz-mesh-base); } a { color: inherit; } /* ---- shared atoms ------------------------------------------------------- */ .pg-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .pg-eyebrow--gold .pg-ico, [data-appstore] .pg-ico { fill: currentColor; stroke: none; } .pg-eyebrow { display: flex; align-items: center; gap: var(--wz-space-2); margin: 0 0 var(--wz-space-3); font-size: var(--wz-text-xs); font-weight: var(--wz-weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wz-ink-subtle); } .pg-eyebrow--gold { color: var(--wz-gold); } .pg-eyebrow--center { justify-content: center; } .pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--wz-space-2); padding: 0.75rem 1.25rem; border: 1px solid transparent; border-radius: var(--wz-radius-pill); font-family: var(--wz-font-body); font-size: var(--wz-text-base); font-weight: var(--wz-weight-semibold); text-decoration: none; cursor: pointer; transition: background var(--wz-dur-fast) var(--wz-ease-standard), transform var(--wz-dur-fast) var(--wz-ease-standard), box-shadow var(--wz-dur-fast) var(--wz-ease-standard); } .pg-btn--primary { background: var(--wz-primary); color: var(--wz-primary-ink); box-shadow: var(--wz-shadow-md); } .pg-btn--primary:hover { background: var(--wz-primary-hover); transform: translateY(-1px); } .pg-btn--ghost { background: var(--wz-surface-raised); color: var(--wz-ink-muted); border-color: var(--wz-line-strong); } .pg-btn--static { cursor: default; } .pg-btn--sm { padding: 0.5rem 0.95rem; font-size: var(--wz-text-sm); } .pg-btn--lg { padding: 1rem 2.25rem; font-size: var(--wz-text-lg); } .pg-wrap { width: min(74rem, 100% - 2.5rem); margin: 0 auto; padding-bottom: var(--pg-section); } /* ---- top bar ------------------------------------------------------------ */ .pg-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--wz-space-5); width: 100%; padding: var(--wz-space-4) max(1.25rem, calc((100% - 74rem) / 2)); background: var(--wz-bg); border-bottom: 1px solid var(--wz-line); } /* Frosted only where the browser can actually do both halves of the effect — * otherwise the opaque fallback above stands, which is fine. */ @supports (backdrop-filter: blur(1px)) and (background: color-mix(in srgb, red 50%, transparent)) { .pg-top { background: color-mix(in srgb, var(--wz-bg) 78%, transparent); backdrop-filter: blur(10px); } } .pg-brand { display: flex; align-items: center; gap: var(--wz-space-2); text-decoration: none; } /* Inline SVG, tinted by currentColor — the gold laurel head from the app. */ .pg-brand__mark { display: block; width: 1.75rem; height: 1.75rem; color: var(--wz-gold); } .pg-brand__mark svg { display: block; width: 100%; height: 100%; } .pg-foot__brand .pg-brand__mark { width: 1.4rem; height: 1.4rem; } .pg-brand__word { font-family: var(--wz-font-display); font-size: var(--wz-text-xl); font-weight: var(--wz-weight-bold); letter-spacing: 0.12em; color: var(--wz-ink); } .pg-top__nav { display: flex; gap: var(--wz-space-6); margin-inline-start: auto; } .pg-top__nav a { font-size: var(--wz-text-sm); color: var(--wz-ink-muted); text-decoration: none; } .pg-top__nav a:hover { color: var(--wz-ink); } .pg-top__right { display: flex; align-items: center; gap: var(--wz-space-3); } .pg-lang { display: flex; border: 1px solid var(--wz-line-strong); border-radius: var(--wz-radius-pill); overflow: hidden; } .pg-lang__btn { padding: 0.35rem 0.7rem; border: 0; background: transparent; color: var(--wz-ink-subtle); font: inherit; font-size: var(--wz-text-xs); font-weight: var(--wz-weight-semibold); letter-spacing: 0.08em; cursor: pointer; } .pg-lang__btn[aria-pressed="true"] { background: var(--wz-gold-soft); color: var(--wz-gold); } /* ---- hero: a parchment card that frames the painting -------------------- */ .pg-hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; gap: clamp(1.5rem, 3vw, 3rem); min-height: 33rem; margin-top: clamp(2rem, 4vw, 3.5rem); padding: clamp(2rem, 4vw, 3.75rem); background: var(--wz-surface); border: 1px solid var(--wz-line); border-radius: var(--wz-radius-xl); box-shadow: var(--wz-shadow-card); } .pg-hero__body { max-width: var(--pg-measure); } .pg-hero__title { margin: 0 0 var(--wz-space-4); font-family: var(--wz-font-display); font-size: var(--wz-text-display); font-weight: var(--wz-weight-bold); line-height: var(--wz-leading-tight); color: var(--wz-ink); } .pg-hero__sub { margin: 0 0 var(--wz-space-6); font-size: var(--wz-text-lg); color: var(--wz-ink-muted); } .pg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--wz-space-3); } .pg-hero__note { margin: var(--wz-space-5) 0 0; font-size: var(--wz-text-sm); color: var(--wz-ink-subtle); } /* The painting hangs on the card — a framed panel, not a page background. That * is what keeps the page light: dark art appears exactly once, inside a border, * with no text on top of it to fight for contrast. */ .pg-hero__art { position: relative; align-self: stretch; min-height: 24rem; background-image: url("./assets/hero.webp"); background-size: cover; background-position: 64% 22%; border: 1px solid var(--wz-line-strong); border-radius: var(--wz-radius-lg); box-shadow: var(--wz-shadow-lg); overflow: hidden; } /* A whisper of warmth at the panel's edges so the crop does not end on a hard * rectangle of red. */ .pg-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,19,10,0.22) 0%, rgba(20,19,10,0) 30%), linear-gradient(0deg, rgba(20,19,10,0.28) 0%, rgba(20,19,10,0) 34%); } /* ---- sections ----------------------------------------------------------- */ /* The top bar is sticky, so an anchor jump must stop short of it — otherwise * #how lands with its heading hidden behind the bar (seen on real WebKit). */ .pg-section { margin-top: var(--pg-section); } .pg-section[id] { scroll-margin-top: 6rem; } .pg-section__head { max-width: 46rem; margin: 0 auto var(--wz-space-7); text-align: center; } .pg-section__title { margin: 0; font-family: var(--wz-font-display); font-size: var(--wz-text-3xl); font-weight: var(--wz-weight-bold); line-height: var(--wz-leading-snug); text-wrap: balance; } .pg-section__sub { margin: var(--wz-space-3) 0 0; color: var(--wz-ink-muted); } /* ---- bento tiles -------------------------------------------------------- */ .pg-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--wz-space-5); } .pg-tile { grid-column: span 3; padding: var(--pg-pad-tile); background: var(--wz-surface); border: 1px solid var(--wz-line); border-radius: var(--wz-radius-xl); box-shadow: var(--wz-shadow-sm); } /* The lead tile carries the longest rule, so it runs the full width — but body * copy 70rem wide is unreadable. Two columns: the heading holds the left, the * paragraph keeps a sane measure on the right, and no half of the card is * empty. */ .pg-tile--wide { grid-column: span 6; display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; } .pg-tile--wide .pg-eyebrow { grid-column: 1; grid-row: 1; } .pg-tile--wide .pg-tile__title { grid-column: 1; grid-row: 2; margin-bottom: 0; } .pg-tile--wide .pg-tile__body { grid-column: 2; grid-row: 1 / span 2; } .pg-tile--stat { grid-column: span 2; text-align: center; padding-block: clamp(1.75rem, 3vw, 2.75rem); /* Lets .pg-tile__stat size itself against this tile — see the note there. */ container-type: inline-size; } .pg-tile__title { margin: 0 0 var(--wz-space-3); font-family: var(--wz-font-display); font-size: var(--wz-text-2xl); font-weight: var(--wz-weight-bold); line-height: var(--wz-leading-snug); } .pg-tile__body { margin: 0; max-width: var(--pg-measure); color: var(--wz-ink-muted); } .pg-tile__stat { margin: 0; font-family: var(--wz-font-display); font-weight: var(--wz-weight-bold); color: var(--wz-gold); /* A stat is one word at display size, so it cannot wrap — it just leaves the * tile. Three across a 390px phone gives each tile ~100px, and German is the * one that does not fit: "Gratis" measures 128px at 36px where "Free" is 85px, * so it shipped spilling 36px into the neighbouring tile. Sizing against the * tile fixes every language at once, including ones we have not written yet. * * Declared twice on purpose: `cqi` needs Safari 16, and without the plain * fallback first an iOS 15 phone would drop the declaration entirely and * render the figure at body size. Old WebKit keeps today's 36px; everything * else fits. The cap means desktop is untouched — the tile is wide there, so * `min()` always picks the token. */ font-size: var(--wz-text-3xl); font-size: min(var(--wz-text-3xl), 22cqi); } .pg-tile__statlabel { margin: var(--wz-space-2) 0 0; font-size: var(--wz-text-sm); color: var(--wz-ink-subtle); } /* The stat strip is its own beat — same tiles, but held apart from the rules * above so the eye gets a rest between them. */ .pg-stats { margin-top: var(--wz-space-5); } /* ---- text pages: privacy / support / impressum (WIZ-148) ---------------- * * One parchment card, one column, held to the same reading measure as the * bento body copy. These pages exist to be READ — by a person looking for the * delete-my-account sentence, and by an App Store reviewer checking the * privacy URL resolves — so nothing here competes with the prose. The only * decoration is the gold rule under each h2, which is the same eyebrow gold * the rest of the page uses to open a section. * * The card is a hair wider than --pg-measure because the padding eats into it: * the text column inside still lands at ~72 characters. */ .pg-doc { display: block; max-width: calc(var(--pg-measure) + 2 * var(--pg-pad-tile)); margin: var(--pg-section) auto 0; padding: var(--pg-pad-tile); background: var(--wz-surface); border: 1px solid var(--wz-line); border-radius: var(--wz-radius-xl); box-shadow: var(--wz-shadow-sm); } .pg-doc h1 { margin: 0 0 var(--wz-space-2); font-family: var(--wz-font-display); font-size: var(--wz-text-3xl); font-weight: var(--wz-weight-bold); line-height: var(--wz-leading-snug); } .pg-doc h2 { margin: var(--wz-space-7) 0 var(--wz-space-3); padding-top: var(--wz-space-4); border-top: 1px solid var(--wz-line); font-family: var(--wz-font-display); font-size: var(--wz-text-xl); font-weight: var(--wz-weight-bold); line-height: var(--wz-leading-snug); } .pg-doc h3 { margin: var(--wz-space-5) 0 var(--wz-space-2); font-size: var(--wz-text-base); font-weight: var(--wz-weight-semibold); color: var(--wz-ink); } .pg-doc p, .pg-doc li { color: var(--wz-ink-muted); } .pg-doc p { margin: 0 0 var(--wz-space-3); } .pg-doc ul, .pg-doc ol { margin: 0 0 var(--wz-space-3); padding-inline-start: 1.25rem; } .pg-doc li { margin-bottom: var(--wz-space-2); } .pg-doc strong { color: var(--wz-ink); font-weight: var(--wz-weight-semibold); } .pg-doc a { color: var(--wz-primary); text-decoration: underline; text-underline-offset: 0.15em; } .pg-doc a:hover { color: var(--wz-primary-hover); } .pg-doc__updated { font-size: var(--wz-text-sm); color: var(--wz-ink-subtle); } /* The one paragraph a reader who reads nothing else should still get. */ .pg-doc__lead { margin-top: var(--wz-space-5); padding: var(--wz-space-4); background: var(--wz-surface-raised); border: 1px solid var(--wz-line); border-radius: var(--wz-radius-lg); } .pg-doc__address { font-style: normal; line-height: var(--wz-leading-relaxed); } /* The first h2 sits directly under the lead card, so its divider would double * up on the lead's own top border. */ .pg-doc__lead + h2 { border-top: 0; padding-top: 0; } .pg-foot__links a[aria-current="page"] { color: var(--wz-ink); } /* ---- screens ------------------------------------------------------------ */ .pg-screens__row { display: flex; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap; } /* Deliberately NOT a photoreal phone: a synthetic glass rect the capture fills * edge to edge. The WIZ-127/128 rejects both came from app pixels and a real * bezel disagreeing about where the screen starts; with no bezel art there is * nothing to disagree with. */ .pg-phone { margin: 0; width: min(16.5rem, 42vw); text-align: center; } .pg-phone img { display: block; width: 100%; height: auto; border: 1px solid var(--wz-line-strong); border-radius: var(--wz-radius-xl); box-shadow: var(--wz-shadow-lg); } .pg-phone figcaption { margin-top: var(--wz-space-4); font-size: var(--wz-text-sm); color: var(--wz-ink-subtle); } /* ---- closing CTA + footer ---------------------------------------------- */ .pg-cta { padding: clamp(3rem, 6vw, 5rem) var(--wz-space-5); text-align: center; background: var(--wz-surface); border: 1px solid var(--wz-gold-soft); border-radius: var(--wz-radius-xl); box-shadow: var(--wz-shadow-card); } .pg-cta__title { margin: 0 0 var(--wz-space-3); font-family: var(--wz-font-display); font-size: var(--wz-text-3xl); font-weight: var(--wz-weight-bold); } .pg-cta__sub { margin: 0 auto var(--wz-space-6); max-width: var(--pg-measure); color: var(--wz-ink-muted); } .pg-foot { display: flex; align-items: center; gap: var(--wz-space-5); flex-wrap: wrap; margin-top: var(--pg-section); padding-top: var(--wz-space-6); border-top: 1px solid var(--wz-line); } .pg-foot__brand { display: flex; align-items: center; gap: var(--wz-space-2); } .pg-foot__brand .pg-brand__word { font-size: var(--wz-text-base); } .pg-foot__links { display: flex; gap: var(--wz-space-6); margin-inline-start: auto; } .pg-foot__links a { font-size: var(--wz-text-sm); color: var(--wz-ink-muted); text-decoration: none; } .pg-foot__links a:hover { color: var(--wz-ink); } .pg-foot__legal { margin: 0; font-size: var(--wz-text-sm); color: var(--wz-ink-subtle); } /* ---- tablet ------------------------------------------------------------- */ @media (max-width: 64rem) { .pg-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; } .pg-hero__body { max-width: none; order: 2; } .pg-hero__art { order: 1; min-height: 18rem; } .pg-tile { grid-column: span 6; } .pg-tile--wide { grid-template-columns: minmax(0, 1fr); row-gap: var(--wz-space-3); } .pg-tile--wide .pg-eyebrow, .pg-tile--wide .pg-tile__title, .pg-tile--wide .pg-tile__body { grid-column: 1; grid-row: auto; } } /* ---- phone -------------------------------------------------------------- */ @media (max-width: 48rem) { /* Never wrap: a two-row sticky bar ate a third of the viewport in German on * the iOS simulator. One row, and the brand gives up its word before the bar * is allowed to grow. */ .pg-top { gap: var(--wz-space-3); flex-wrap: nowrap; } .pg-top__nav { display: none; } .pg-top__right { margin-inline-start: auto; flex: none; } .pg-hero__art { min-height: 14rem; } .pg-hero__title { font-size: var(--wz-text-2xl); } .pg-hero__sub { font-size: var(--wz-text-base); } .pg-hero__actions .pg-btn { width: 100%; } .pg-section__title { font-size: var(--wz-text-2xl); } .pg-tile--stat { grid-column: span 2; padding-inline: var(--wz-space-2); } .pg-phone { width: min(16rem, 72vw); } .pg-foot { flex-direction: column; align-items: flex-start; } .pg-foot__links { margin-inline-start: 0; } } /* ---- small phones (390pt and below) ------------------------------------- */ @media (max-width: 30rem) { .pg-top .pg-brand__word { display: none; } .pg-top .pg-brand__mark { width: 2rem; height: 2rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pg-btn { transition: none; } }