/* ============================================================================= * Editorial-Celestial palette — parchment + ink + brass + lapis. * Mirrors the in-app theme (see src/config/theme.ts in the mobile app). * ============================================================================= */ /* Fonts are loaded via tags in each page's (preconnect + stylesheet) — an @import here would serialize CSS → font-CSS → font files and visibly delay text on a serif-body site. */ :root { color-scheme: light; /* parchment + ink */ --paper: #f7f2e8; --paper-2: #efe8d7; --paper-3: #e5dcc4; --paper-hi: #fbf7eb; --ink: #1b1814; --ink-2: #3a342b; --ink-3: #6b6253; --ink-4: #a29a89; /* brass + lapis accents */ --brass: #8b6f2f; --brass-2: #b8923d; --brass-3: #d9b968; --brass-wash: #f1e6c5; --lapis: #1a2a4a; --lapis-2: #2c3f66; --lapis-wash: #e5e8f0; /* status */ --vermilion: #b73b2c; --jade: #4f7048; /* rules */ --rule: #d9cfb6; --rule-2: #c5b894; /* type */ --serif: "Source Serif 4", "Iowan Old Style", "Apple Garamond", Georgia, "Times New Roman", serif; /* Newsreader, not Fraunces: Fraunces's WONK axis defaults ON and swaps in wonky f/l/d/h stems at display sizes via rvrn — unfixable through the standard Google Fonts build. Newsreader's opsz axis is pure outline interpolation: no alternate-glyph surprises. */ --display: "Newsreader", "Source Serif 4", Georgia, serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } * { box-sizing: border-box; } html { background: var(--paper); /* 1rem = 17px. The body used to be 17px over a 16px root, which made every heading sized near 1rem render SMALLER than body copy. Size the root. */ font-size: 106.25%; /* anchor jumps must clear the landing page's sticky nav */ scroll-padding-top: 76px; } body { min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(1100px 520px at 50% -180px, rgba(139, 111, 47, 0.08), transparent 70%), var(--paper); font-family: var(--serif); font-size: 1rem; line-height: 1.62; font-feature-settings: "kern", "liga", "onum"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--lapis); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(139, 111, 47, 0.45); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; transition: color 0.12s ease, text-decoration-color 0.12s ease; } a:hover { color: var(--brass); text-decoration-color: var(--brass); } main p a, main li a, .toc a { overflow-wrap: anywhere; } header, main, footer { width: min(840px, calc(100% - 32px)); margin: 0 auto; } header { padding: 36px 0 12px; } main { position: relative; padding: 40px 44px 44px; background: var(--paper-hi); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 1px 0 rgba(27, 24, 20, 0.04), 0 24px 48px -32px rgba(27, 24, 20, 0.18); } main::before { content: ""; position: absolute; top: 14px; right: 14px; bottom: 14px; left: 14px; border: 1px solid var(--rule); border-radius: 8px; pointer-events: none; opacity: 0.55; } main > * { position: relative; } footer { padding: 28px 0 48px; color: var(--ink-3); font-family: var(--sans); font-size: 0.88rem; text-align: center; } /* type ramp ------------------------------------------------------------------ */ h1, h2, h3 { color: var(--ink); text-wrap: balance; } h1, h2 { line-height: 1.18; letter-spacing: -0.01em; } /* h3s sit near body size — display leading and negative tracking hurt them */ h3 { line-height: 1.3; letter-spacing: 0; } h1 { margin: 12px 0 12px; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 2.5rem; font-optical-sizing: auto; } h2 { display: flex; align-items: baseline; gap: 14px; margin: 2.4rem 0 0.85rem; padding-top: 0.4rem; font-family: var(--serif); font-weight: 600; font-size: 1.28rem; border-top: 1px solid var(--rule); } h2::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--brass); transform: translateY(-0.35em); flex-shrink: 0; } h3 { margin: 1.6rem 0 0.5rem; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; } p { margin: 0.75rem 0; text-wrap: pretty; } ul, ol { padding-left: 1.45rem; } li { margin: 0.4rem 0; } li::marker { color: var(--brass); } strong { color: var(--ink); font-weight: 600; } em { font-style: italic; color: var(--ink-2); } code { font-family: var(--mono); font-size: 0.88em; background: var(--brass-wash); border: 1px solid var(--rule); border-radius: 2px; padding: 0.1em 0.32em; color: var(--ink-2); } hr { border: none; height: 1px; background: var(--rule); margin: 1.8rem 0; } /* brand + meta --------------------------------------------------------------- */ .brand { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; } .brand:hover { color: var(--ink); } .brand-icon { width: 52px; height: 52px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-hi); object-fit: cover; } .brand-text { display: grid; gap: 2px; } .brand-name { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.1rem; line-height: 1.1; } .brand-subtitle { color: var(--ink-3); font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; } /* Section markers rank above the masthead byline: brass ties them to the accent system, and the extra weight keeps them legible on parchment. */ .eyebrow { color: var(--brass); font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; } .meta, .fineprint { color: var(--ink-3); font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.02em; } /* hero (home) ---------------------------------------------------------------- */ .home-hero { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding-top: 28px; } .hero-icon { width: 92px; height: 92px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-hi); object-fit: cover; box-shadow: 0 18px 36px -22px rgba(27, 24, 20, 0.35); } .lede { max-width: 640px; color: var(--ink-2); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.12rem; line-height: 1.55; } /* home panel ----------------------------------------------------------------- */ .product-strip { margin: 0 0 24px; padding: 18px 20px; background: var(--brass-wash); border: 1px solid var(--rule-2); border-left: 3px solid var(--brass); border-radius: 12px; } .product-strip p { margin: 0; color: var(--ink-2); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; padding-left: 0; list-style: none; } .card { display: flex; min-height: 96px; margin: 0; padding: 18px 22px; background: var(--paper-hi); border: 1px solid var(--rule-2); border-radius: 16px; transition: background 0.12s ease, border-color 0.12s ease; } .card:hover { background: rgba(241, 230, 197, 0.42); border-color: var(--brass-2); } .card > div { display: flex; flex-direction: column; gap: 4px; } .card a { display: inline-block; margin-bottom: 2px; color: var(--ink); font-family: var(--serif); font-weight: 600; font-size: 1.02rem; text-decoration: none; border-bottom: 1px solid transparent; width: max-content; transition: border-color 0.12s ease, color 0.12s ease; } .card a:hover { color: var(--brass); border-bottom-color: var(--brass); } .card small { display: block; color: var(--ink-3); font-family: var(--serif); font-size: 0.94rem; font-style: italic; line-height: 1.45; } /* callouts ------------------------------------------------------------------- */ .callout { margin: 1.5rem 0; padding: 1rem 1.15rem; background: var(--lapis-wash); border: 1px solid var(--rule); border-left: 3px solid var(--lapis); border-radius: 12px; color: var(--ink-2); } .callout.warn { background: #fbeae6; border-left-color: var(--vermilion); } .callout.note { background: var(--brass-wash); border-left-color: var(--brass); } .callout strong { color: var(--ink); } /* buttons -------------------------------------------------------------------- */ .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.4rem; } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.6rem 1.35rem; color: var(--paper-hi); background: var(--ink); border: 1px solid var(--ink); border-radius: 999px; font-family: var(--sans); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .button:hover { color: var(--paper-hi); background: var(--lapis); border-color: var(--lapis); } .button.secondary { color: var(--ink); background: transparent; border-color: var(--ink); } .button.secondary:hover { color: var(--paper-hi); background: var(--ink); } /* attribution block ---------------------------------------------------------- */ .attribution { margin-top: 2.2rem; padding: 14px 18px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; color: var(--ink-3); font-family: var(--sans); font-size: 0.84rem; line-height: 1.55; } .attribution strong { color: var(--ink-2); font-family: var(--sans); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.78rem; } /* responsive ----------------------------------------------------------------- */ @media (max-width: 720px) { header { padding-top: 24px; } main { padding: 28px 22px; } main::before { top: 10px; right: 10px; bottom: 10px; left: 10px; } h1 { font-size: 2rem; } .home-hero { grid-template-columns: 1fr; gap: 14px; } .hero-icon { width: 72px; height: 72px; } .grid { grid-template-columns: 1fr; } .card { padding: 16px 18px; border-right: none; } } @media (max-width: 460px) { /* shrink the ROOT so every rem-derived size compresses together — a px body size here would leave rem elements on the 17px root */ html { font-size: 100%; } h1 { font-size: 1.75rem; } h2 { font-size: 1.18rem; } } /* ============================================================================= * Landing page (index.html only — scoped under body.landing). * v2 — display type layer (Fraunces), banded scroll rhythm, full palette. * Legal/support pages keep the boxed-panel look above. * ============================================================================= */ .landing { background: radial-gradient(1400px 640px at 50% -220px, rgba(139, 111, 47, 0.16), transparent 70%), var(--paper); /* the hero zodiac arc bleeds past small viewports; clip preferred over hidden because it can never create a scroll container */ overflow-x: hidden; overflow-x: clip; } .landing header, .landing main, .landing footer { width: auto; margin: 0; } /* landing main is a bare flow container — sections frame themselves */ .landing main { padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; } .landing main::before { content: none; } .landing .section, .landing .hero, .landing .attribution, .landing .disclaimer-line, .landing .orn { width: min(1060px, calc(100% - 40px)); margin-left: auto; margin-right: auto; } /* full-bleed band: background spans the viewport, children keep the frame */ .landing .band { width: 100%; max-width: none; padding: 62px 0 64px; } .landing .band > * { width: min(1060px, calc(100% - 40px)); margin-left: auto; margin-right: auto; } /* Light unbanded sections. Longhands on purpose, and EARLY on purpose: .depth/.quiet/.trust carry class="section X" and refine their own padding later in the file — a late shorthand here clobbered their horizontal padding once already (content ran under the depth plate's frame). */ .landing .section { padding-top: 54px; padding-bottom: 10px; } /* nav — sticky, with the page's persistent CTA ------------------------------- */ .landing .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px max(20px, calc((100% - 1060px) / 2)); background: rgba(251, 247, 235, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); } .landing .nav .brand-icon { width: 40px; height: 40px; } .landing .nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; font-family: var(--sans); font-size: 0.85rem; } .landing .nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.12s ease, border-color 0.12s ease; } .landing .nav-links a:hover { color: var(--brass); border-bottom-color: var(--brass); } .landing .nav-cta, .landing .nav-links a.nav-cta { padding: 7px 15px; color: var(--paper-hi); background: var(--brass); border: 1px solid var(--brass); border-radius: 999px; font-weight: 600; transition: background 0.12s ease, border-color 0.12s ease; } a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; } .landing .nav-links a.nav-cta:hover { color: var(--paper-hi); background: var(--brass-2); border-color: var(--brass-2); } /* display type layer ---------------------------------------------------------- */ .landing .hero h1 { margin: 10px 0 14px; max-width: 17ch; font-family: var(--display); font-style: normal; font-weight: 580; font-size: clamp(2.5rem, 5.2vw, 3.625rem); font-optical-sizing: auto; line-height: 1.08; letter-spacing: -0.01em; } .landing .section-title { display: block; /* longhands: a margin shorthand here once zeroed the auto side-margins that center titles inside full-bleed bands */ margin-top: 8px; margin-bottom: 18px; padding: 0; border: none; font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.75rem, 3.2vw, 2.375rem); font-optical-sizing: auto; line-height: 1.15; letter-spacing: -0.01em; } /* the page's typographic drumbeat: a small brass tick above every title */ .landing .section-title::before { content: ""; display: block; width: 26px; height: 2px; margin-bottom: 12px; background: linear-gradient(90deg, var(--brass-2), var(--brass-3)); /* interior pages' h2::before carries translateY(-0.35em) — without this reset the tick floats up under the eyebrow and reads as an underline */ transform: none; } /* Newsreader hairlines get eaten by halation on the dark bands — thicken */ .landing .vani .section-title, .landing .langs .section-title { font-weight: 540; } /* vermilion tilak dot — brand signature, hero + Vani + close only */ .landing .eyebrow-tilak::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--vermilion); vertical-align: 0.12em; } /* uppercase settings misalign with the body's oldstyle figures. The font-feature-settings override is required: the body's low-level "onum" inherits in and would silently defeat font-variant-numeric alone. */ .landing .eyebrow, .landing .plan-tag, .landing .fact-strip { font-variant-numeric: lining-nums; font-feature-settings: "kern", "liga"; } /* hero ------------------------------------------------------------------------ */ .landing .hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 38px; } .landing .hero .lede { max-width: 54ch; font-size: 1.176rem; line-height: 1.5; } .landing .hero-note { margin-top: 12px; color: var(--ink-3); font-family: var(--sans); font-size: 0.824rem; line-height: 1.5; } .landing .hero-note strong { color: var(--jade); font-weight: 600; } .landing .hero-note a { color: var(--ink-3); } .landing .fact-strip { margin-top: 14px; color: var(--brass); font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.04em; } /* official store badges + QR handoff card ------------------------------------- */ .landing .store-row { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 26px; } .landing .store-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .landing .store-badges a { display: inline-flex; border-radius: 12px; transition: transform 0.12s ease; } .store-badge-pending { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-3); font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; text-align: center; } .store-badge-pending img { display: block; width: auto; opacity: 0.48; filter: grayscale(1); } .landing .store-badges .store-badge-pending img { height: 54px; } .landing .store-badges a:hover { transform: translateY(-2px); } .landing .store-badges img { display: block; height: 54px; width: auto; } .landing .qr-card { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; background: var(--paper-hi); border: 1px solid var(--rule-2); border-radius: 16px; color: var(--ink-3); font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5; text-decoration: none; transition: border-color 0.12s ease; } .landing .qr-card:hover { color: var(--ink-2); border-color: var(--brass-2); } .landing .qr-card img { display: block; } /* phone frame ----------------------------------------------------------------- */ .landing .phone { margin: 0; padding: 10px; background: linear-gradient(155deg, #2e2a22, #1b1814 60%); border: 1px solid rgba(217, 185, 104, 0.25); border-radius: 34px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(27, 24, 20, 0.35), 0 24px 48px -24px rgba(26, 42, 74, 0.45), 0 44px 80px -40px rgba(27, 24, 20, 0.55); } .landing .phone img { display: block; width: 100%; height: auto; border-radius: 24px; } .landing .hero-phone { position: relative; /* new stacking context: without it the z-index:-1 zodiac arcs join the ROOT context's negative layer and paint behind the body background — i.e. they exist but are invisible */ isolation: isolate; display: flex; justify-content: center; } .landing .hero-phone .phone { width: min(310px, 80vw); transform: rotate(1.6deg); } /* zodiac arcs behind the hero phone — chart plate without an image */ .landing .hero-phone::before, .landing .hero-phone::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: -1; } .landing .hero-phone::before { width: min(520px, 100%); height: auto; aspect-ratio: 1; border: 1px dashed rgba(139, 111, 47, 0.3); } .landing .hero-phone::after { width: min(410px, 82%); height: auto; aspect-ratio: 1; border: 1px solid rgba(139, 111, 47, 0.15); } /* Vani spotlight — the money-maker gets the night sky ------------------------- */ .landing .vani { margin-top: 34px; background: radial-gradient(1px 1px at 11% 22%, rgba(217, 185, 104, 0.7), transparent 100%), radial-gradient(1px 1px at 28% 68%, rgba(247, 242, 232, 0.5), transparent 100%), radial-gradient(1.5px 1.5px at 46% 15%, rgba(217, 185, 104, 0.55), transparent 100%), radial-gradient(1px 1px at 63% 55%, rgba(247, 242, 232, 0.4), transparent 100%), radial-gradient(1px 1px at 78% 28%, rgba(217, 185, 104, 0.6), transparent 100%), radial-gradient(1.5px 1.5px at 91% 70%, rgba(247, 242, 232, 0.45), transparent 100%), radial-gradient(820px 420px at 32% 20%, rgba(217, 185, 104, 0.12), transparent 70%), linear-gradient(180deg, #16233f, var(--lapis) 55%, #16233f); } .landing .vani-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 52px; align-items: center; } .landing .vani-phone { display: flex; justify-content: center; } .landing .vani-phone .phone { width: min(290px, 78vw); transform: rotate(-1.4deg); border-color: rgba(217, 185, 104, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 60px -20px rgba(217, 185, 104, 0.25); } .landing .vani .eyebrow { color: var(--brass-3); } .landing .vani .section-title { margin-top: 6px; color: var(--paper-hi); } .landing .vani-copy > p { max-width: 58ch; color: rgba(247, 242, 232, 0.78); } .landing .vani-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: 22px 0 0; padding: 0; list-style: none; } .landing .vani-points li { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 10px 0 0; border-top: 1px solid rgba(247, 242, 232, 0.16); } .landing .vani-points strong { color: var(--paper-hi); font-family: var(--serif); font-weight: 600; font-size: 0.99rem; } .landing .vani-points strong::before { content: "◆"; margin-right: 7px; color: var(--brass-3); font-size: 0.5em; vertical-align: 0.35em; } .landing .vani-points span { color: rgba(247, 242, 232, 0.66); font-family: var(--sans); font-size: 0.82rem; } .landing .vani-offer { display: inline-block; margin-top: 24px; padding: 8px 16px; color: var(--brass-3); border: 1px solid rgba(217, 185, 104, 0.45); border-radius: 999px; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; } /* trust band ------------------------------------------------------------------ */ .landing .trust { padding-top: 46px; padding-bottom: 8px; } .landing .trust .eyebrow { margin-bottom: 14px; } .landing .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 0; padding: 30px 26px 26px; list-style: none; background: linear-gradient(180deg, #f5ecd2, var(--brass-wash)); border: 1px solid var(--brass-2); border-top-width: 3px; border-radius: 20px; } .landing .stats li { margin: 0; } .landing .stats h3 { margin: 0 0 6px; font-size: 1.176rem; font-weight: 600; color: var(--brass); } .landing .stats h3.stat-jade { color: var(--jade); } .landing .stats p { margin: 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.55; } /* tint bands (features, plans) ------------------------------------------------ */ .landing .band.tint { margin-top: 54px; background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } /* features -------------------------------------------------------------------- */ .landing .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 34px; margin: 26px 0 0; padding: 0; list-style: none; } .landing .features li { margin: 0; padding-top: 14px; border-top: 1px solid var(--rule-2); } .landing .features h3 { margin: 0 0 6px; font-size: 1.176rem; font-weight: 600; } .landing .features p { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.55; } /* gallery --------------------------------------------------------------------- */ .landing .gallery { display: flex; gap: 26px; margin-top: 26px; padding: 26px 20px 22px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; background: linear-gradient(180deg, var(--paper-3), var(--paper-2)); border: 1px solid var(--rule); border-radius: 20px; } /* store artwork already includes its screen frame; the website adds only a quiet keyline so the alternating lapis/parchment sequence stays intact */ .landing .gallery figure.store-art { flex: 0 0 auto; width: 252px; margin: 0; padding: 0; scroll-snap-align: center; } .landing .gallery figure.store-art img { display: block; width: 100%; height: auto; border: 1px solid rgba(139, 111, 47, 0.3); border-radius: 18px; box-shadow: 0 18px 36px -22px rgba(27, 24, 20, 0.52); } .landing .gallery figcaption { margin-top: 10px; color: var(--ink-3); font-family: var(--serif); font-style: italic; font-size: 0.88rem; text-align: center; } .landing .gallery:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; } /* depth — the connoisseur's plate --------------------------------------------- */ .landing .depth { position: relative; margin-top: 54px; padding: 40px 44px 44px; background: var(--paper-hi); border: 1px solid var(--rule); border-radius: 18px; } .landing .depth::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--rule); border-radius: 10px; opacity: 0.55; pointer-events: none; } .landing .depth::after { content: ""; position: absolute; inset: 12px; pointer-events: none; background: linear-gradient(var(--brass-2), var(--brass-2)) 0 0 / 18px 2px, linear-gradient(var(--brass-2), var(--brass-2)) 0 0 / 2px 18px, linear-gradient(var(--brass-2), var(--brass-2)) 100% 0 / 18px 2px, linear-gradient(var(--brass-2), var(--brass-2)) 100% 0 / 2px 18px, linear-gradient(var(--brass-2), var(--brass-2)) 0 100% / 18px 2px, linear-gradient(var(--brass-2), var(--brass-2)) 0 100% / 2px 18px, linear-gradient(var(--brass-2), var(--brass-2)) 100% 100% / 18px 2px, linear-gradient(var(--brass-2), var(--brass-2)) 100% 100% / 2px 18px; background-repeat: no-repeat; } .landing .depth-lede { max-width: 62ch; color: var(--ink-2); } .landing .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; } .landing .chips li { margin: 0; padding: 5px 13px; background: var(--paper-hi); border: 1px solid var(--rule-2); border-radius: 999px; color: var(--ink-2); font-family: var(--sans); font-size: 0.82rem; transition: background 0.12s ease, border-color 0.12s ease; } .landing .chips li:hover { background: var(--brass-wash); border-color: var(--brass-2); } /* ornament rule — manuscript divider ------------------------------------------ */ .landing .orn { position: relative; height: 1px; margin-top: 54px; margin-bottom: 0; border: none; background: linear-gradient(90deg, transparent, var(--rule-2) 15%, var(--rule-2) 85%, transparent); } .landing .orn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg); background: var(--paper); border: 1px solid var(--brass-2); } .landing .orn-vermilion::before { background: var(--vermilion); border-color: var(--vermilion); } /* plans ----------------------------------------------------------------------- */ .landing .plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; } .landing .plan { padding: 22px 24px 24px; background: var(--paper-hi); border: 1px solid var(--rule-2); border-radius: 18px; box-shadow: 0 12px 28px -22px rgba(27, 24, 20, 0.35); transition: transform 0.12s ease, box-shadow 0.12s ease; } .landing .plan:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -22px rgba(27, 24, 20, 0.45); } .landing .plan-featured { position: relative; background: linear-gradient(180deg, var(--paper-hi), var(--brass-wash) 45%); border-color: var(--brass-2); border-top: 3px solid var(--vermilion); box-shadow: 0 22px 44px -30px rgba(139, 111, 47, 0.55); } .landing .plan-featured::after { content: "Most chosen"; position: absolute; top: -11px; right: 16px; padding: 3px 10px; background: var(--vermilion); color: var(--paper-hi); border-radius: 999px; font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .landing .plan h3 { margin: 0; font-family: var(--display); font-style: normal; font-weight: 560; font-size: 1.5rem; } .landing .plan-featured h3 { color: var(--brass); } .landing .plan-tag { margin: 2px 0 12px; color: var(--ink-3); font-family: var(--sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .landing .plan-price { margin: 0 0 12px; font-family: var(--serif); font-weight: 600; font-size: 1.06rem; color: var(--ink); } .landing .plan-price span { display: block; margin-top: 1px; color: var(--ink-3); font-family: var(--sans); font-weight: 400; font-size: 0.72rem; } .landing .plan ul { margin: 0; padding-left: 1.15rem; } .landing .plan li { margin: 0.35rem 0; font-size: 0.94rem; color: var(--ink-2); } .landing .plan li::marker { color: var(--jade); } .landing .plans-cta { display: flex; justify-content: center; margin-top: 30px; } .landing .plans-note { max-width: 62ch; margin: 18px auto 0; color: var(--ink-3); font-family: var(--sans); font-size: 0.84rem; line-height: 1.6; text-align: center; } /* FAQ ------------------------------------------------------------------------- */ .landing .faq { max-width: 760px; } .landing .faq details { margin: 0 0 10px; background: var(--paper-hi); border: 1px solid var(--rule-2); border-radius: 18px; transition: border-color 0.12s ease, background 0.12s ease; } .landing .faq details:hover { border-color: var(--brass-2); } .landing .faq details[open] { background: linear-gradient(180deg, var(--paper-hi), var(--brass-wash)); border-color: var(--brass-2); } .landing .faq summary { position: relative; padding: 16px 60px 16px 20px; cursor: pointer; list-style: none; font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--ink); } .landing .faq summary::-webkit-details-marker { display: none; } .landing .faq summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; background: var(--brass-wash); border: 1px solid var(--brass-2); border-radius: 50%; color: var(--brass); font-family: var(--sans); font-weight: 400; font-size: 1.15rem; line-height: 1; transition: background 0.12s ease, color 0.12s ease; } .landing .faq details[open] summary::after { content: "−"; background: var(--brass); color: var(--paper-hi); } .landing .faq details p, .landing .faq details ul, .landing .faq details ol { margin: 0; padding: 0 22px 18px 20px; color: var(--ink-2); font-size: 0.97rem; line-height: 1.6; } .landing .faq details ul, .landing .faq details ol { padding-left: 2.6rem; } /* languages band (dark, gilded edges) ----------------------------------------- */ .landing .langs { margin-top: 54px; background: radial-gradient(1px 1px at 14% 30%, rgba(217, 185, 104, 0.6), transparent 100%), radial-gradient(1px 1px at 34% 72%, rgba(247, 242, 232, 0.45), transparent 100%), radial-gradient(1.5px 1.5px at 57% 20%, rgba(217, 185, 104, 0.5), transparent 100%), radial-gradient(1px 1px at 82% 60%, rgba(247, 242, 232, 0.4), transparent 100%), radial-gradient(900px 380px at 50% -140px, rgba(217, 185, 104, 0.14), transparent 70%), var(--lapis); border-top: 1px solid rgba(217, 185, 104, 0.45); border-bottom: 1px solid rgba(217, 185, 104, 0.45); box-shadow: inset 0 1px 0 rgba(217, 185, 104, 0.18), inset 0 -1px 0 rgba(217, 185, 104, 0.18); } .landing .langs .eyebrow { color: var(--brass-3); } .landing .langs .section-title { color: var(--paper-hi); } .landing .langs .depth-lede { color: rgba(247, 242, 232, 0.72); } .landing .lang-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 26px auto 0; padding: 0; list-style: none; } .landing .lang-grid li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 14px 16px; background: rgba(247, 242, 232, 0.05); border: 1px solid rgba(247, 242, 232, 0.14); border-radius: 14px; } /* real Indic serifs — Source Serif 4 has no Indic coverage, and system fallbacks break the "written by hand" claim with mismatched sans glyphs */ .landing .lang-native { color: var(--paper-hi); font-family: "Noto Serif Devanagari", "Noto Serif Telugu", "Noto Serif Tamil", "Noto Serif Kannada", "Noto Serif Malayalam", "Noto Serif Bengali", "Noto Serif Gujarati", var(--serif); font-size: 1.18rem; font-weight: 500; } .landing .lang-name { color: rgba(247, 242, 232, 0.66); font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } /* final close ------------------------------------------------------------------ */ .landing .quiet { margin-top: 54px; padding: 36px 40px 40px; background: var(--lapis-wash); border: 1px solid #c9cfdd; border-left: 3px solid var(--lapis); border-radius: 18px; } .landing .quiet .hero-note { margin-top: 18px; } /* closing blocks --------------------------------------------------------------- */ .landing .attribution { margin-top: 44px; } .landing .disclaimer-line { margin: 18px auto 0; font-family: var(--sans); letter-spacing: 0; } /* footer — dark close, bookends the lapis bands -------------------------------- */ .landing .site-footer { margin-top: 44px; background: #23201a; border-top: 2px solid var(--brass-2); color: rgba(247, 242, 232, 0.55); } .landing .footer-cols, .landing .footer-line { width: min(1060px, calc(100% - 40px)); } .landing .footer-head { color: var(--brass-3); } .landing .site-footer a { color: rgba(247, 242, 232, 0.78); } .landing .site-footer a:hover { color: var(--brass-3); } .landing .footer-line { border-top-color: rgba(247, 242, 232, 0.14); color: rgba(247, 242, 232, 0.45); } /* landing responsive ----------------------------------------------------------- */ @media (max-width: 900px) { .landing .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; } .landing .hero h1 { max-width: none; } .landing .hero-phone .phone { transform: none; } .landing .vani-inner { grid-template-columns: 1fr; gap: 32px; } /* copy first on small screens — the pitch shouldn't hide below the phone */ .landing .vani-phone { order: 2; } .landing .vani-phone .phone { transform: none; } .landing .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .landing .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .landing .plan-grid { grid-template-columns: 1fr; } /* phones don't scan themselves */ .landing .qr-card { display: none; } } @media (max-width: 560px) { .landing .nav { padding-left: 16px; padding-right: 16px; gap: 10px; } .landing .nav .brand { min-width: 0; } .landing .nav .brand-icon { width: 36px; height: 36px; } .landing .nav .brand-name { font-size: 1rem; } .landing .nav .brand-subtitle, .landing .nav-links a:not(.nav-cta) { display: none; } .landing .nav-links { flex-wrap: nowrap; gap: 0; margin-left: auto; font-size: 0.82rem; } .landing .nav-links a.nav-cta { min-height: 44px; padding: 8px 14px; } .landing .hero { gap: 28px; padding-top: 34px; padding-bottom: 24px; } .landing .hero .lede { font-size: 1.08rem; } .landing .hero-phone::before { width: min(380px, calc(100vw - 32px)); height: auto; } .landing .hero-phone::after { width: min(300px, calc(100vw - 72px)); height: auto; } .landing .features { grid-template-columns: 1fr; } .landing .stats { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px 20px; } .landing .stats p { font-size: 0.86rem; } .landing .store-badges img { height: 48px; } .landing .store-badges .store-badge-pending img { height: 48px; } .landing .vani-points { grid-template-columns: 1fr; } .landing .depth { padding: 28px 22px 30px; } .landing .footer-cols { grid-template-columns: 1fr; } } @media (max-width: 360px) { .landing .nav { padding-left: 12px; padding-right: 12px; } .landing .nav .brand { gap: 9px; } .landing .nav .brand-icon { width: 34px; height: 34px; } .landing .store-badges { gap: 8px; } .landing .store-badges a { min-height: 44px; } .landing .store-badges img { height: 40px; } .landing .store-badges .store-badge-pending img { height: 40px; } .landing .hero-phone::before { width: min(300px, calc(100vw - 24px)); height: auto; } .landing .hero-phone::after { width: min(240px, calc(100vw - 68px)); height: auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ============================================================================= * Shared chrome — nav row + directory footer, used by BOTH the landing page * and the interior document pages. Landing-scoped rules above override the * widths (1060px frame); interior pages keep the 840px document width. * ============================================================================= */ .page-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 18px; padding-bottom: 6px; } .nav-links { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--sans); font-size: 0.88rem; } .nav-links a { color: var(--ink-2); font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.12s ease, border-color 0.12s ease; } .nav-links a:hover { color: var(--brass); border-bottom-color: var(--brass); } /* directory footer (full-bleed band; inner columns follow the page width) */ .site-footer { width: auto; margin: 44px 0 0; padding: 40px 0 48px; background: var(--paper-2); border-top: 1px solid var(--rule); color: var(--ink-3); font-family: var(--sans); font-size: 0.88rem; text-align: left; } .footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; width: min(840px, calc(100% - 32px)); margin: 0 auto; } .footer-head { margin: 0 0 10px; color: var(--ink-2); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .site-footer ul { margin: 0; padding: 0; list-style: none; } .site-footer li { margin: 0.45rem 0; } .site-footer a { color: var(--ink-2); font-weight: 400; text-decoration: none; } .site-footer a:hover { color: var(--brass); text-decoration: underline; } .footer-line { width: min(840px, calc(100% - 32px)); margin: 30px auto 0; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 0.8rem; } @media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; } } /* ============================================================================= * Document pages — support/legal/FAQ chrome: display titles, table of * contents, Q&A accordions, step cards. Landing is untouched by these. * ============================================================================= */ /* "On this page" — long legal documents get a map before the wall of text */ .toc { margin: 1.4rem 0 2rem; padding: 18px 22px 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; } .toc-title { margin: 0 0 8px; color: var(--brass); font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 36px; font-family: var(--sans); font-size: 0.86rem; line-height: 1.45; } .toc li { margin: 0.3rem 0; break-inside: avoid; } .toc li::marker { color: var(--brass-2); } .toc a { color: var(--ink-2); font-weight: 400; text-decoration: none; } .toc a:hover { color: var(--brass); text-decoration: underline; } /* Q&A accordions (FAQ page) — the landing FAQ look, document-scoped */ .qa { margin: 0.4rem 0 2rem; } .qa details { margin: 0 0 10px; background: var(--paper-hi); border: 1px solid var(--rule-2); border-radius: 18px; transition: border-color 0.12s ease, background 0.12s ease; } .qa details:hover { border-color: var(--brass-2); } .qa details[open] { background: linear-gradient(180deg, var(--paper-hi), var(--brass-wash)); border-color: var(--brass-2); } .qa summary { position: relative; padding: 16px 60px 16px 20px; cursor: pointer; list-style: none; font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--ink); } .qa summary::-webkit-details-marker { display: none; } .qa summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; background: var(--brass-wash); border: 1px solid var(--brass-2); border-radius: 50%; color: var(--brass); font-family: var(--sans); font-weight: 400; font-size: 1.15rem; line-height: 1; transition: background 0.12s ease, color 0.12s ease; } .qa details[open] summary::after { content: "−"; background: var(--brass); color: var(--paper-hi); } .qa details p, .qa details ul, .qa details ol { margin: 0; padding: 0 22px 18px 20px; color: var(--ink-2); font-size: 0.97rem; line-height: 1.6; } .qa details ul, .qa details ol { padding-left: 2.6rem; } /* numbered step cards (account deletion, how-tos) */ .steps { counter-reset: step; margin: 1rem 0 1.4rem; padding: 0; list-style: none; } .steps li { counter-increment: step; position: relative; margin: 0 0 10px; padding: 13px 18px 13px 58px; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; } .steps li::before { content: counter(step); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; background: var(--brass-wash); border: 1px solid var(--brass-2); border-radius: 50%; color: var(--brass); font-family: var(--sans); font-weight: 600; font-size: 0.88rem; font-feature-settings: "kern"; } @media (max-width: 560px) { .toc ol { columns: 1; } }