/* ───────────────────────────────────────────────────────────────────────────── Dovilo design system — one theme for every page on dovilo.app. Every page links this file first, then adds only what is specific to it. Before writing page CSS, look here: if a button, card, pill, code block or prose block already exists, use it rather than redefining it two pixels off. Layers, in order: 1. Font Inter, self-hosted, no third-party request 2. Reset 3. Tokens colour, ink, type ramp, space, radius, shadow 4. Elements html, body, headings, links, media, focus 5. Layout .wrap, sections, the rhythm between them 6. Chrome nav, footer — identical on every page 7. Components buttons, cards, pills, code, steps, prose, FAQ 8. Utilities 9. Motion Palette mirrors the mobile app's src/theme/tokens.ts (Mist / Amber). Dark is the default; light mirrors lightTokens. An explicit data-theme on always beats the OS preference, and is set before first paint so nothing flashes. ───────────────────────────────────────────────────────────────────────────── */ /* ─── 1. FONT ─── Inter as the variable woff2 Google serves, self-hosted so the first paint waits on nobody. latin-ext only downloads when a page actually uses it. */ @font-face{ font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url('/fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url('/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ─── 2. RESET ─── */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} /* ─── 3. TOKENS ─── */ :root{ color-scheme:dark; /* Surfaces */ --bg:#161B1D; --bg-2:#1F2426; --fg:#E8EAEB; --accent:#D4880A; --muted:#E8A832; --on-accent:#161B1D; --bg-rgb:22,27,29; --fg-rgb:232,234,235; --accent-rgb:212,136,10; /* Text alpha multiplier — light ink on dark needs no boost, dark ink on light does (.35 alpha of near-black is unreadably pale). */ --fa:1; /* Accent glow multiplier — a wash that reads on dark blows out on light. */ --ga:1; /* Ink scale. Four steps, and only four: full for headings, -1 for body copy, -2 for support, -3 for meta. Every page uses these names instead of inventing another alpha. */ --ink:var(--fg); --ink-1:rgba(var(--fg-rgb),calc(.72 * var(--fa))); --ink-2:rgba(var(--fg-rgb),calc(.55 * var(--fa))); --ink-3:rgba(var(--fg-rgb),calc(.42 * var(--fa))); /* Lines and fills */ --dim2:rgba(var(--fg-rgb),.06); --card:rgba(var(--fg-rgb),.06); --hover:rgba(var(--fg-rgb),.12); --line:rgba(var(--fg-rgb),.06); --line-strong:rgba(var(--fg-rgb),.12); --shadow-1:rgba(0,0,0,.7); --shadow-2:rgba(0,0,0,.45); --ring:rgba(255,255,255,.05); --accent-wash:rgba(var(--accent-rgb),calc(.12 * var(--ga))); --accent-edge:rgba(var(--accent-rgb),calc(.28 * var(--ga))); /* Type ramp. One ladder for the whole site: a page picks a rung, it does not invent a size. t-6 is the largest: the home hero caps lower still, because its headline names four things and needs the room to wrap. */ --t-6:clamp(2rem,4.4vw,3rem); --t-5:clamp(1.75rem,3.5vw,2.5rem); --t-4:clamp(1.5rem,3vw,2rem); --t-3:1.125rem; --t-2:1rem; --t-1:.9375rem; --t-0:.875rem; --t--1:.8125rem; --t--2:.75rem; --t--3:.6875rem; /* Line heights */ --lh-tight:1.15; --lh-head:1.3; --lh-body:1.65; --lh-prose:1.75; /* Space — an 8px rhythm, named so sections space themselves the same way. */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --section-y:clamp(64px,9vw,112px); --gutter:clamp(20px,5vw,64px); /* Shape */ --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:100px; /* Widths. --max is the page's own content width. */ --max:1120px; --max-prose:760px; /* Chrome */ --nav-h:68px; } :root[data-theme="light"]{ color-scheme:light; --bg:#F7F8F8; --bg-2:#FFFFFF; --fg:#161B1D; --accent:#D97706; --muted:#B45309; --on-accent:#FFFFFF; --bg-rgb:247,248,248; --fg-rgb:22,27,29; --accent-rgb:217,119,6; --fa:1.55; --ga:.5; --dim2:rgba(var(--fg-rgb),.05); --card:#FFFFFF; --hover:#EEF0F1; --line:#E4E7E8; --line-strong:#D7DADB; --shadow-1:rgba(22,27,29,.16); --shadow-2:rgba(22,27,29,.09); --ring:rgba(22,27,29,.08); } @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){ color-scheme:light; --bg:#F7F8F8; --bg-2:#FFFFFF; --fg:#161B1D; --accent:#D97706; --muted:#B45309; --on-accent:#FFFFFF; --bg-rgb:247,248,248; --fg-rgb:22,27,29; --accent-rgb:217,119,6; --fa:1.55; --ga:.5; --dim2:rgba(var(--fg-rgb),.05); --card:#FFFFFF; --hover:#EEF0F1; --line:#E4E7E8; --line-strong:#D7DADB; --shadow-1:rgba(22,27,29,.16); --shadow-2:rgba(22,27,29,.09); --ring:rgba(22,27,29,.08); } } /* Surfaces that stay dark in BOTH themes — a terminal is a terminal, and a focus scene is content, not a theme variant (the same call the app makes for its Midnight scene). Re-declaring the palette is enough: the token formulas resolve against the element that uses them. */ .keep-dark{ color-scheme:dark; --bg:#161B1D; --bg-2:#1F2426; --fg:#E8EAEB; --accent:#D4880A; --muted:#E8A832; --on-accent:#161B1D; --bg-rgb:22,27,29; --fg-rgb:232,234,235; --accent-rgb:212,136,10; --fa:1; --ga:1; --ink:var(--fg); --ink-1:rgba(var(--fg-rgb),.72); --ink-2:rgba(var(--fg-rgb),.55); --ink-3:rgba(var(--fg-rgb),.42); --accent-wash:rgba(212,136,10,.12); --accent-edge:rgba(212,136,10,.28); --dim2:rgba(var(--fg-rgb),.06); --card:rgba(var(--fg-rgb),.06); --hover:rgba(var(--fg-rgb),.12); --line:rgba(var(--fg-rgb),.06); --line-strong:rgba(var(--fg-rgb),.12); --shadow-1:rgba(0,0,0,.7); --shadow-2:rgba(0,0,0,.45); --ring:rgba(255,255,255,.05); color:var(--fg); } /* ─── 4. ELEMENTS ─── */ html{ scroll-behavior:smooth; /* Anchors land below the sticky nav, not under it. */ scroll-padding-top:calc(var(--nav-h) + 16px); -webkit-text-size-adjust:100%; } body{ font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--ink-1); line-height:var(--lh-body); font-size:var(--t-2); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } h1,h2,h3,h4,h5,h6{color:var(--ink);line-height:var(--lh-head);font-weight:700} h1{font-size:var(--t-6);font-weight:800;letter-spacing:-.03em;line-height:var(--lh-tight)} h2{font-size:var(--t-4);letter-spacing:-.02em} h3{font-size:var(--t-3);letter-spacing:-.01em} h4{font-size:var(--t-1)} /* An inside a heading is the accent phrase, not italics — the site's one typographic idiom, and it is the same on every page. */ h1 em,h2 em,h3 em{font-style:normal;color:var(--accent)} a{color:var(--accent);text-decoration:none} a:hover{color:var(--muted)} /* A link sitting inside running text is underlined, so it is not identified by colour alone (WCAG 1.4.1). Links that are already their own affordance — buttons, cards, nav, footer, chips — opt out below. */ p a,li a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:.06em} p a.btn,li a.btn, .site-nav a,footer a,.footer-links a,.page-jump a, .card a,a.card,.pick a,.meta a,.tag,.pill a{text-decoration:none} strong,b{color:var(--ink);font-weight:600} img,svg,video{max-width:100%} img{height:auto} ::selection{background:rgba(var(--accent-rgb),.28);color:var(--fg)} :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm); } /* ─── 5. LAYOUT ─── .wrap is the one container. .container and .page are kept as aliases so the pages that already use those names keep working. */ .wrap,.page{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)} .wrap-prose{max-width:var(--max-prose)} /* ─── 6. CHROME ─── The header is .site-nav, not the bare