/* --------------------------------------------------------------- 0. Fonts — self-hosted (2026-09-21) The brand guidelines specify Tiempos Headline for headlines and Avenir LT Std for text. Both are commercial faces, and the files in the brand kit are DESKTOP licences — they do not permit serving the font as a .woff2 to every visitor. Until Draavi buys webfont licences from Klim (Tiempos) and Monotype (Avenir), the site uses the closest open substitutes: Newsreader -> Tiempos Headline Times-derived, high contrast, sharp-cut serifs, display-tuned Mulish -> Avenir LT Std geometric humanist sans, near- circular bowls, tall x-height Both are variable fonts, instanced down to the weights the site actually uses (400-700), with Newsreader's optical-size axis pinned at 36 — 108 KB for all four files, against 296 KB for the Spectral and IBM Plex Sans they replace. Swapping the real faces in later is two @font-face blocks and the --serif / --sans tokens; nothing else in this stylesheet names a family. IBM Plex Mono stays for the micro-labels. The guidelines name no monospace, and it is a functional UI face, not a brand voice. Licences in assets/fonts/LICENSE.txt. --------------------------------------------------------------- */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/newsreader-var-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: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/newsreader-var-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; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/mulish-var-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: 'Mulish'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/mulish-var-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; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/ibm-plex-mono-400-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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/ibm-plex-mono-400-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; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/ibm-plex-mono-500-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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/ibm-plex-mono-500-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; } /* ============================================================ Draavi — marketing website Warm paper · deep ink · indigo primary · gold accent Every token below mirrors the running application, so the site and the product read as one thing: :root -> frontend/src/styles/styles.css (:root) brand colours -> frontend/src/styles/styles.css (.theme-draavi) type system -> frontend/src/brand.ts (BRANDS.draavi.fontsHref) Plain CSS. No build step, no framework, no preprocessor. ============================================================ */ /* --------------------------------------------------------------- 1. Tokens — the brand guidelines palette (2022), applied exactly --------------------------------------------------------------- */ :root { /* Base — pure white, and a neutral ramp tinted with the brand blue so every grey on the page is a dilution of #190D40 rather than a warm or neutral grey borrowed from somewhere else. Percentages are the share of Deep Blue mixed into white. */ --paper: #ffffff; /* Pure white — brand primary palette */ --paper-2: #f6f5f7; /* 4% — alternating section bands */ --panel: #ffffff; --ink: #190d40; /* Deep Blue — body and headings, 17.9:1 */ --ink-2: #4c426a; /* 78% — 9.2:1 */ --ink-3: #6f6787; /* 63% — 5.3:1, muted labels */ --line: #e8e7ec; /* 10% */ --line-2: #f1f0f4; /* 6% */ --ring-track: #dfdde4; /* 14% */ --ink-bar: #cccad5; /* 22% */ --mono-bg: #efeef2; /* 7% */ --slate-wash: #eeedf2; --slate-ink: #55506b; /* Draavi brand — the three colours of the primary palette, exact. Brand guidelines 2022, page 13. Gold on Deep Blue is 8.6:1, so the brand's own signature pairing carries text safely. */ --brand-primary: #190d40; /* Deep Blue */ --brand-primary-2: #2b1a66; /* lifted, for the indigo gradients */ --accent: #d5b038; /* Gold */ --accent-soft: #e8d492; /* 55% gold on white */ --accent-ink: #846d23; /* gold darkened to 5.0:1 — link text */ --accent-wash: #f7f1db; /* 18% gold on white */ /* semantic — momentum up / risk down */ --good: #3f7d55; --good-wash: #e7f0e8; --good-line: #cfe2d4; --risk: oklch(0.56 0.13 28); --risk-ink: oklch(0.46 0.12 28); --risk-wash: oklch(0.95 0.03 36); --risk-line: oklch(0.86 0.05 33); /* type — Tiempos and Avenir stand-ins (see the note at the top) */ --serif: 'Newsreader', 'Tiempos Headline', Georgia, 'Times New Roman', serif; --sans: 'Mulish', 'Avenir LT Std', Avenir, system-ui, -apple-system, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* layout */ --maxw: 1180px; --maxw-prose: 720px; --gutter: 32px; /* elevation — warm shadows, never neutral grey */ --shadow-sm: 0 1px 3px rgba(25, 13, 64, .05); --shadow: 0 2px 9px rgba(25, 13, 64, .08); --shadow-lg: 0 14px 40px rgba(25, 13, 64, .13); --ease: cubic-bezier(.22, 1, .36, 1); } /* --------------------------------------------------------------- 2. Reset + base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* sticky header height + breathing room, so #anchors don't land under the bar */ scroll-padding-top: 96px; } body { margin: 0; position: relative; /* the canvas in body::before measures against this */ background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ONE canvas behind the whole page, not a ring per section. Until 2026-09-21 the Ownership ring was placed by hand in four spots — the hero, a page head, the numbers band, the board — so on the long scroll page it appeared twice near the top and then never again (the user's catch). Instead the body carries a single layer the height of the document, with the ring struck five times down it, alternating sides. The sections flow over it: `header, main, footer` are already z-index 1, the plain bands have no background of their own so the canvas simply shows, and the tinted bands are 90% opaque so it ghosts through rather than stopping dead at an edge. One file, five mask layers, painted once — the layer never moves relative to the document, so scrolling it costs nothing. The Deep Blue bands are opaque by design and carry their own ring instead (.section--ink::after). */ body::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: var(--accent); opacity: .32; -webkit-mask-image: url(assets/brand-ownership.webp), url(assets/brand-ownership.webp), url(assets/brand-ownership.webp), url(assets/brand-ownership.webp), url(assets/brand-ownership.webp); mask-image: url(assets/brand-ownership.webp), url(assets/brand-ownership.webp), url(assets/brand-ownership.webp), url(assets/brand-ownership.webp), url(assets/brand-ownership.webp); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 114% 2%, -28% 21%, 112% 42%, -26% 63%, 110% 85%; mask-position: 114% 2%, -28% 21%, 112% 42%, -26% 63%, 110% 85%; -webkit-mask-size: 680px, 540px, 760px, 560px, 660px; mask-size: 680px, 540px, 760px, 560px, 660px; } @media (max-width: 640px) { /* On a phone the rings are wider than the screen and sit under the copy rather than beside it — the same call the per-section rings made. */ body::before { display: none; } } /* Everything sits above the background. */ header, main, footer { position: relative; z-index: 1; } img, svg { max-width: 100%; display: block; } a { color: var(--accent-ink); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent-wash); color: var(--ink); } /* Skip link — visible only on keyboard focus. */ .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--brand-primary); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0; font-size: 14px; font-weight: 600; } .skip:focus { left: 0; text-decoration: none; } /* --------------------------------------------------------------- 3. Layout --------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: 86px 0; } .section--tight { padding: 58px 0; } .section--alt { /* 90%, not solid: the page canvas ghosts through a tinted band instead of stopping dead at its edge. */ background: color-mix(in oklab, var(--paper-2) 90%, transparent); border-block: 1px solid var(--line); } .section--panel { background: var(--panel); border-block: 1px solid var(--line); } .stack { display: flex; flex-direction: column; } .stack-6 { gap: 6px; } .stack-10 { gap: 10px; } .stack-14 { gap: 14px; } .stack-20{ gap: 20px; } .stack-28 { gap: 28px; } /* --------------------------------------------------------------- 4. Typography --------------------------------------------------------------- */ /* Mono micro-label. The app's signature: uppercase, letterspaced, tiny, muted. Used above every section heading and on every data label. */ .kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0; } .kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } .kicker--plain::before { display: none; } .kicker--good::before { background: var(--good); } /* Display — the hero headline. Newsreader, tight, large. */ .display { font-family: var(--serif); font-size: clamp(38px, 5.4vw, 62px); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); margin: 0; text-wrap: balance; } /* Section heading. */ .h2 { font-family: var(--serif); font-size: clamp(27px, 3.1vw, 37px); font-weight: 600; line-height: 1.18; letter-spacing: -.015em; color: var(--ink); margin: 0; text-wrap: balance; } .h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); margin: 0; } .h4 { font-family: var(--sans); font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--ink); margin: 0; } .lede { font-size: 18.5px; line-height: 1.62; color: var(--ink-2); margin: 0; max-width: 62ch; text-wrap: pretty; } .body { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); margin: 0; text-wrap: pretty; } .body-sm{ font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; } .muted { color: var(--ink-3); } /* Mono figure — tabular so columns of numbers line up. */ .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* Gold underline used under centred section headings. */ .rule-accent { width: 54px; height: 2px; border: none; margin: 0; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); border-radius: 2px; } .center { text-align: center; } .center .lede { margin-inline: auto; } .center .kicker, .center .rule-accent { margin-inline: auto; } /* Section header block — kicker, heading, lede. */ .sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 44px; } .sec-head--center { align-items: center; text-align: center; } /* --------------------------------------------------------------- 5. Buttons --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-size: 14.5px; font-weight: 600; padding: 11px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .16s, border-color .16s, color .16s, box-shadow .16s, transform .16s; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--brand-primary); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--brand-primary-2); box-shadow: var(--shadow); } .btn--accent { background: linear-gradient(180deg, var(--accent-soft), var(--accent)); color: #3d3210; box-shadow: var(--shadow-sm); } .btn--accent:hover { filter: brightness(1.04); box-shadow: var(--shadow); } .btn--ghost { background: var(--panel); color: var(--ink-2); border-color: var(--line); } .btn--ghost:hover { border-color: var(--accent-soft); color: var(--accent-ink); } .btn--quiet { background: none; color: var(--ink-2); border-color: var(--line); } .btn--quiet:hover { border-color: var(--accent-soft); color: var(--accent-ink); background: var(--panel); } .btn--sm { font-size: 13px; padding: 8px 16px; } .btn--lg { font-size: 15.5px; padding: 14px 28px; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .center .btn-row { justify-content: center; } /* Text link with a moving chevron — the app's "read more" affordance. */ .link-go { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--accent-ink); } .link-go svg { transition: transform .18s var(--ease); flex: none; } .link-go:hover { text-decoration: none; } .link-go:hover svg { transform: translateX(3px); } /* --------------------------------------------------------------- 6. Header / navigation --------------------------------------------------------------- */ .site-head { position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--paper) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } /* Shadow appears only once the page has scrolled (toggled by site.js). */ .site-head.is-stuck { box-shadow: 0 1px 14px rgba(25, 13, 64, .07); } .nav { display: flex; align-items: center; gap: 26px; height: 68px; } /* The wordmark from the brand kit, painted with CSS masking so one SVG serves every colourway: Deep Blue on white, gold on Deep Blue. The artwork is never recoloured outside the palette and never restretched — mask-size:contain holds its 1508.97 x 433 proportion. The guidelines set an exclusion zone of one 'd' — the height of the letter d, which is 0.62 of the mark's box — that nothing may intrude on. --wordmark-h drives both the mark and that padding, so they cannot drift apart. */ .wordmark { --wordmark-h: 30px; display: flex; align-items: center; gap: 11px; flex: none; padding-inline-end: calc(var(--wordmark-h) * .62); color: var(--brand-primary); } .wordmark:hover { text-decoration: none; } .wordmark-logo { display: block; flex: none; height: var(--wordmark-h); width: calc(var(--wordmark-h) * 3.4849); /* 1508.97 / 433 */ background-color: currentColor; -webkit-mask: url(assets/draavi-wordmark.svg) no-repeat center / contain; mask: url(assets/draavi-wordmark.svg) no-repeat center / contain; } .nav-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; list-style: none; padding: 0; } .nav-link { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 8px 15px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink-3); transition: color .15s, background .15s; white-space: nowrap; background: none; border: none; cursor: pointer; } .nav-link:hover { color: var(--ink); background: var(--accent-wash); text-decoration: none; } .nav-link[aria-current="page"], .nav-link[aria-current="location"] { background: var(--brand-primary); color: var(--paper); } /* margin-left:auto is load-bearing now that the sign-in/sign-up pair is out: this box holds only the mobile toggle, so without it the toggle packs up against the wordmark instead of sitting at the right edge, and the centred .nav-links lose the counterweight that kept them off the right margin. */ .nav-actions { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; } /* Dropdown (Our Platform, FAQs) — click-toggled by site.js, hover-opened on pointer devices. */ .nav-item { position: relative; } .nav-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 232px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 7px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s var(--ease), visibility .16s; } .nav-item.is-open .nav-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-menu a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: 14px; font-weight: 600; } .nav-menu a:hover { background: var(--accent-wash); text-decoration: none; } .nav-menu .nav-menu-note { font-size: 12px; font-weight: 400; color: var(--ink-3); line-height: 1.4; } .nav-caret { transition: transform .18s; flex: none; } .nav-item.is-open .nav-caret { transform: rotate(180deg); } /* Mobile menu toggle — hidden until the breakpoint. */ .nav-toggle { display: none; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; cursor: pointer; color: var(--ink-2); } .nav-toggle:hover { border-color: var(--accent-soft); color: var(--accent-ink); } /* --------------------------------------------------------------- 7. Hero --------------------------------------------------------------- */ .hero { padding: 76px 0 84px; position: relative; overflow: hidden; } /* Concentric radar rings bleeding off the right edge — the product's own motif used as page furniture instead of a stock photograph. */ /* Brand elements as page furniture. Growth — the radiating dot burst: "infinity and abundance, and continuous growth" (guidelines, Elements). Ownership — the fingerprint ring, the same idea the wordmark carries in the tittle of the 'i'. Both ship as alpha masks and are painted with background-color, so one file works in Deep Blue on white and in gold on Deep Blue, and the artwork can never appear in a colour outside the palette. */ .brand-element { position: absolute; pointer-events: none; z-index: 0; background-color: var(--accent); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .brand-element--growth { -webkit-mask-image: url(assets/brand-growth.webp); mask-image: url(assets/brand-growth.webp); } .brand-element--ownership { -webkit-mask-image: url(assets/brand-ownership.webp); mask-image: url(assets/brand-ownership.webp); } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 56px; align-items: center; } .hero-copy { display: flex; flex-direction: column; gap: 22px; } .hero-copy .display em { font-style: normal; color: var(--accent-ink); } /* Trust strip under the hero CTAs. A grid, not flex-wrap — four facts on one even row while they fit, then a clean 2×2, instead of a ragged 3+1. */ .hero-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 16px 22px; padding-top: 22px; margin-top: 4px; border-top: 1px solid var(--line); } .hero-fact { display: flex; flex-direction: column; gap: 2px; } .hero-fact-v { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); line-height: 1.1; letter-spacing: -.01em; } .hero-fact-l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } /* --------------------------------------------------------------- 8. Product panel — a real slice of the radar UI, in HTML --------------------------------------------------------------- */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); } .panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--paper-2); border-bottom: 1px solid var(--line); } .panel-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .panel-tag { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); border: 1px dashed var(--line); border-radius: 5px; padding: 3px 8px; white-space: nowrap; } /* Traffic-light dots, so the panel reads as an application window. */ .panel-dots { display: flex; gap: 5px; flex: none; } .panel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-bar); opacity: .5; } .panel-body { padding: 4px 0; } /* Radar row — the app's .d-row, one brand per line. */ .rrow { display: grid; grid-template-columns: 22px minmax(0, 1fr) 52px 74px; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); position: relative; transition: background .15s; } .rrow:last-child { border-bottom: none; } .rrow:hover { background: color-mix(in oklab, var(--accent-wash) 60%, var(--panel)); } /* Gold left bar on hover — straight from .d-row--brand::before. */ .rrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: center; transition: transform .18s; } .rrow:hover::before { transform: scaleY(1); } .rrow-n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .rrow-name { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; } .rrow-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rrow-delta { font-family: var(--mono); font-size: 11.5px; font-weight: 600; text-align: right; white-space: nowrap; } .rrow-delta.is-up { color: var(--good); } .rrow-delta.is-down { color: var(--risk); } /* --------------------------------------------------------------- 9. Score ring — the 0–100 growth score The app's ScoreRing: r = (size - stroke) / 2, rotated -90deg so the arc starts at twelve o'clock, dasharray = circumference and dashoffset = circumference × (1 - score/100). Every ring here is drawn in a 56×56 box with a 4.5 stroke, so r = 25.75 and C = 161.79 for all of them; .ring--lg just scales the box up. site.js sets --offset from data-score. Arc colour is BANDED by score, exactly as the app does it: >= 80 --accent (gold) 68-79 --accent-soft < 68 --ink-3 --------------------------------------------------------------- */ .ring { position: relative; width: 56px; height: 56px; flex: none; } .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; } .ring-track { fill: none; stroke: var(--ring-track); stroke-width: 4.5; } .ring-arc { fill: none; stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 161.79; /* Undrawn until site.js paints it; C × (1 - 0) = full offset. */ stroke-dashoffset: var(--offset, 161.79); transition: stroke-dashoffset .95s cubic-bezier(.215, .61, .355, 1); } .ring-arc--mid { stroke: var(--accent-soft); } .ring-arc--low { stroke: var(--ink-3); } .ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 22.4px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em; } .ring--lg { width: 92px; height: 92px; } .ring--lg .ring-num { font-size: 38.6px; } .ring--sm { width: 44px; height: 44px; } .ring--sm .ring-num { font-size: 17.6px; } /* Score plus its label, as the app's hero shows it. */ .ring-block { display: flex; align-items: center; gap: 16px; } .ring-meta { display: flex; flex-direction: column; gap: 2px; } .ring-lbl { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); } .ring-unit { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } /* --------------------------------------------------------------- 10. Sparkline + signal bars Up is --accent (gold), down is --risk — the app's rule, not a green/red convention. --------------------------------------------------------------- */ .spark { width: 100%; height: 30px; display: block; overflow: visible; } .spark-path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .spark-area { fill: var(--accent); opacity: .14; } .spark-dot { fill: var(--accent); } .spark--down .spark-path { stroke: var(--risk); } .spark--down .spark-area { fill: var(--risk); } .spark--down .spark-dot { fill: var(--risk); } /* Labelled sparkline tile (the app's MiniTrend). */ .trend { display: flex; flex-direction: column; gap: 4px; } .trend-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .trend-lbl { font-size: 11.5px; color: var(--ink-2); } .trend-delta { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-3); } .trend-delta.is-up { color: var(--accent-ink); } .trend-delta.is-down { color: var(--risk); } /* Five-family signal read, as vertical mini-bars (.b-signals in the app). */ .sigbars { display: flex; align-items: flex-end; gap: 4px; height: 26px; } .sigbar { width: 6px; height: 26px; background: var(--ring-track); border-radius: 3px; display: flex; align-items: flex-end; overflow: hidden; } .sigbar-fill { width: 100%; background: linear-gradient(180deg, var(--accent-soft), var(--accent)); border-radius: 3px 3px 0 0; min-height: 2px; transition: height .6s var(--ease); } /* Horizontal family bars, used in the methodology section (.b-fam in the app). */ .fam { display: grid; grid-template-columns: minmax(120px, 168px) 1fr 40px; align-items: center; gap: 14px; } .fam-name { font-size: 13.5px; font-weight: 600; color: var(--ink-2); } .fam-track { height: 8px; background: var(--ring-track); border-radius: 999px; overflow: hidden; } .fam-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); transition: width .8s var(--ease); } .fam-val { font-family: var(--mono); font-size: 12.5px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- 11. Chips, pills, badges --------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: var(--accent-ink); background: var(--accent-wash); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } .chip--slate { color: var(--slate-ink); background: var(--slate-wash); } .chip--good { color: var(--good); background: var(--good-wash); } .chip--line { color: var(--ink-2); background: var(--panel); border: 1px solid var(--line); } /* A chip that is a link — a client name that goes to the client's own site. The card around it is deliberately NOT clickable, so this has to read as the affordance on its own. */ a.chip--link { text-decoration: none; transition: color .18s, border-color .18s; } a.chip--link:hover { color: var(--accent-ink); border-color: var(--accent-soft); text-decoration: none; } .chip-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } /* A chip that is a button — the FAQ expand/collapse toggle. Hidden without the script, because without it there is nothing to toggle. */ button.chip { cursor: pointer; font: inherit; font-family: var(--sans); font-size: 10.5px; font-weight: 600; line-height: inherit; } button.chip:hover { color: var(--accent-ink); border-color: var(--accent-soft); } html:not(.js) .faq-toggle { display: none; } .badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--good); background: var(--good-wash); border: 1px solid var(--good-line); border-radius: 5px; padding: 3px 7px; } .badge--accent { color: var(--accent-ink); background: var(--accent-wash); border-color: var(--accent-soft); } .badge--slate { color: var(--slate-ink); background: var(--slate-wash); border-color: var(--line); } /* --------------------------------------------------------------- 12. Cards --------------------------------------------------------------- */ .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card { display: flex; flex-direction: column; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; position: relative; overflow: hidden; transition: border-color .18s, box-shadow .18s, transform .18s var(--ease); } /* Gold cap that draws in on hover — the site's one recurring flourish. */ .card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .card:hover { border-color: var(--accent-soft); box-shadow: var(--shadow); transform: translateY(-2px); } .card:hover::after { transform: scaleX(1); } .card--flat:hover { transform: none; } .card--static::after { display: none; } .card--static:hover { border-color: var(--line); box-shadow: none; transform: none; } /* Icon plate at the top of a feature card. */ .card-ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--accent-wash); color: var(--accent-ink); border: 1px solid var(--accent-soft); flex: none; } .card-ic svg { width: 19px; height: 19px; } .card-ic--indigo { background: color-mix(in oklab, var(--brand-primary) 9%, var(--panel)); color: var(--brand-primary); border-color: color-mix(in oklab, var(--brand-primary) 22%, var(--line)); } /* A numbered card, for process steps. */ .card-n { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--accent-ink); } /* --------------------------------------------------------------- 13. Split — text one side, product motif the other --------------------------------------------------------------- */ .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; } .split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } .split--wide-right { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } .split-copy { display: flex; flex-direction: column; gap: 18px; } /* Ordered feature list with hairline separators — the editorial alternative to a grid of boxes. */ .rows { display: flex; flex-direction: column; } .rows-item { display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); } .rows-item:last-child { border-bottom: 1px solid var(--line); } .rows-n { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent-ink); padding-top: 3px; } .rows-body { display: flex; flex-direction: column; gap: 6px; } /* Two-up quote panel — "category thesis / investor blindspot" from the app. */ .thesis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .thesis-cell { padding: 24px 26px; display: flex; flex-direction: column; gap: 9px; } .thesis-cell + .thesis-cell { border-left: 1px solid var(--line); } .thesis-tx { font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0; } /* Contact, compact (2026-09-21, user's call: the two full-height split sections read as four screens of the same thing). The two audiences sit side by side as cards, each with its buttons and its "what to include" list; the entity facts share one row beneath. The homepage copies both. */ /* Raising or investing, as a slider rather than two cards side by side (the client's ask, 2026-09-21). The pill behind the labels slides; only the chosen pane is in the document, so a visitor fills one short form instead of choosing between two. Raising is the default. */ .switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: max-content; max-width: 100%; margin: 0 auto 26px; padding: 4px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; } .switch-ink { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-2) 100%); transition: transform .3s var(--ease); } .switch[data-on="investing"] .switch-ink { transform: translateX(100%); } .switch-opt { position: relative; z-index: 1; appearance: none; background: none; border: 0; cursor: pointer; padding: 11px 30px; border-radius: 999px; white-space: nowrap; font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink-2); transition: color .22s var(--ease); } .switch-opt[aria-selected="true"] { color: var(--paper); } .switch-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Talk to us, in two columns (user's call, 2026-09-21): what the page has to say on the left, the switch and its card on the right. Centred under a full-width head the card left a tall narrow column with empty space either side. Below 900px the two stack, words first. */ .write-split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 58px; align-items: start; } .write-say { display: flex; flex-direction: column; gap: 14px; } .write-say .lede { font-size: 17.5px; max-width: 44ch; } .write-say .link-go { margin-top: 2px; } .write-alt { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); } .write-box .switch { margin: 0 0 20px; } @media (max-width: 900px) { .write-split { grid-template-columns: 1fr; gap: 32px; } .write-say .lede { max-width: 62ch; } } /* Switching panes: a short directional cross-fade (user's call, 2026-09-21 — a coin flip was tried first and was too much for a form). The pane leaving slips a few pixels the way the pill is travelling and fades out; the pane arriving is placed the same distance on the far side and released. site.js drives the three steps and sets --slide, which carries the direction. */ .panes-flip { transition: transform .23s var(--ease), opacity .23s linear; } .panes-flip.is-out { transform: translateX(var(--slide, 0px)); opacity: 0; transition: transform .17s var(--ease), opacity .17s linear; /* out is quicker than in */ } /* The far side, placed without a transition so the movement reads one way. */ .panes-flip.is-far { transform: translateX(calc(var(--slide, 0px) * -1)); opacity: 0; transition: none; } .panes .contact-card { min-height: 0; } @media (prefers-reduced-motion: reduce) { .switch-ink, .panes-flip { transition: none; } } @media (max-width: 640px) { .switch { width: 100%; } .switch-opt { padding: 11px 8px; font-size: 13.5px; } } .contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .contact-card { display: flex; flex-direction: column; gap: 14px; padding: 30px 30px 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); } /* A class rule wins against the browser's own [hidden], so the pane that is not selected has to be told again. */ .contact-card[hidden] { display: none; } .contact-card .h3 { margin: 0; } .contact-card > .body-sm { color: var(--ink-2); margin: 0; } .contact-card .btn-row { margin-top: 6px; } .contact-k { margin: 14px 0 0; padding-top: 16px; border-top: 1px solid var(--line-2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .contact-list, .door-list { list-style: none; margin: 0; padding: 0; counter-reset: include; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 20px; } .contact-list li, .door-list li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.45; color: var(--ink-2); } .contact-list li::before, .door-list li::before { counter-increment: include; content: counter(include, decimal-leading-zero); font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--accent-ink); flex: none; } .contact-card .link-go { margin-top: auto; padding-top: 10px; } /* The enquiry forms (2026-09-21, the client's ask: a form in the page, four questions for founders and three for investors, submitting to admin@draavi.com). Labels above the field, not inside it — a placeholder that vanishes on focus is the wrong pattern for a form somebody is filling from memory. */ .f { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 0; } .f-row { display: flex; flex-direction: column; gap: 5px; margin: 0; } .f-lab { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .f-in { font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; width: 100%; box-sizing: border-box; transition: border-color .16s, box-shadow .16s; } .f-in:hover { border-color: var(--ring-track); } .f-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } .f-in.is-bad { border-color: #b3261e; box-shadow: 0 0 0 3px #fbe9e7; } textarea.f-in { resize: vertical; min-height: 62px; line-height: 1.5; } /* The honeypot: off-screen rather than display:none, which some bots skip. */ .f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .f-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .f-msg { font-size: 13px; color: var(--ink-3); } .f-msg--bad { color: #b3261e; } .f-msg--ok { color: var(--good); } .f-alt { margin: 0; font-size: 12.5px; color: var(--ink-3); } .f-done { margin: 0; padding: 18px 0 6px; font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--ink); } .thesis--contact { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* Platform doors on the homepage (2026-09-21): the chapter is one screen — the head, then a door per chair carrying the capability names generated from the owning page (deploy/sync_home_sections.py, LISTS) and a button into it. The detail stays on the two platform pages. The investor door is Deep Blue so the two chairs read as two and the page keeps its contrast. */ .doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .door { display: flex; flex-direction: column; gap: 14px; padding: 30px 30px 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); } .door .h3 { margin: 0; } .door-n { margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 14px; line-height: 1.45; color: var(--ink-2); } .door .btn { align-self: flex-start; margin-top: auto; white-space: normal; max-width: 100%; text-align: center; } .door--ink { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-2) 100%); border-color: transparent; color: var(--paper); } .door--ink .kicker { color: var(--accent); } .door--ink .h3 { color: var(--paper); } .door--ink .door-n { color: rgba(255,255,255,.74); border-top-color: rgba(255,255,255,.16); } .door--ink .door-list li { color: rgba(255,255,255,.86); } .door--ink .door-list li::before { color: var(--accent); } .door--ink .btn--ghost { color: var(--paper); border-color: rgba(255,255,255,.45); background: transparent; } .door--ink .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); color: var(--paper); } /* Pull statements (startupPlatform.html #fit, 2026-09-21): the two proof facts as large serif lines with a gold mark and a label — the user's call over two small cells with links into the board. The sentences are count-checked, so they carry no inline markup. */ .pulls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .pull { margin: 0; position: relative; padding: 34px 32px 30px 36px; border-left: 3px solid var(--accent); background: var(--paper-2); border-radius: 0 16px 16px 0; } .pull::before { content: "\201C"; position: absolute; top: 52px; left: 18px; font-family: var(--serif); font-size: 76px; line-height: 0; color: var(--accent-soft); } .pull-tx { margin: 0; padding-left: 24px; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); } .pull-k { margin: 16px 0 0; padding-left: 24px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); } @media (max-width: 880px) { .pulls { grid-template-columns: 1fr; } } /* The page head carries the two facts beside the title (user's call: one block, not a title band and a facts row). White plates on the grey band. */ /* Doubled class: the base .pagehead-inner rule (display: flex) sits later in the file. */ .pagehead-inner.pagehead-inner--split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; } .pagehead-copy { display: flex; flex-direction: column; gap: 14px; } .pulls--stack { grid-template-columns: 1fr; gap: 14px; } .pagehead .pull { background: var(--panel); padding: 24px 24px 22px 30px; box-shadow: 0 1px 0 rgba(25,13,64,.04); } .pagehead .pull::before { top: 42px; left: 14px; font-size: 60px; } .pagehead .pull-tx { font-size: clamp(18px, 1.55vw, 21px); padding-left: 18px; } .pagehead .pull-k { margin-top: 10px; padding-left: 18px; } @media (max-width: 1040px) { .pagehead-inner.pagehead-inner--split { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 640px) { .pull { padding: 26px 22px 24px 26px; } .pull::before { top: 42px; left: 12px; font-size: 60px; } } /* Capability cards on the Deep Blue band (the two platform pages, 2026-09-21: the user asked for the detail pages to look better). Numbered, translucent, the ring behind them; a five-card set centres its last row. */ .section--ink .sec-head .kicker { color: var(--accent); } .section--ink .sec-head .h2 { color: var(--paper); } .section--ink .sec-head .lede { color: rgba(255,255,255,.78); } .caps { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .cap { flex: 1 1 280px; max-width: calc((100% - 40px) / 3); display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 24px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: var(--paper); position: relative; transition: background .18s, border-color .18s; } .cap:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); } .cap-n { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--accent); } .cap .card-ic { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: var(--accent-soft); } .cap .h3 { color: var(--paper); margin: 0; } .cap .body-sm { color: rgba(255,255,255,.76); margin: 0; } .cap .chips { margin-top: auto; } .cap .chip--line { color: var(--accent-soft); border-color: rgba(255,255,255,.3); } @media (max-width: 1040px) { .cap { max-width: calc((100% - 20px) / 2); } } @media (max-width: 640px) { .cap { max-width: 100%; flex-basis: 100%; } } @media (max-width: 880px) { .doors { grid-template-columns: 1fr; } } @media (max-width: 640px) { .door { padding: 22px 20px 20px; } } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .contact-card { padding: 22px 20px 20px; } .contact-list, .door-list { grid-template-columns: 1fr; } } /* --------------------------------------------------------------- 14. Statistics strip --------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; } .stat { padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; } .stat + .stat { border-left: 1px solid var(--line); } .stat-v { font-family: var(--serif); font-size: 33px; font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -.02em; } .stat-l { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .stat-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; } /* The book in four numbers, as a Deep Blue band (user's call, 2026-09-21: the bordered white strip read like a footnote). Numerals in paper, labels in gold, the Ownership ring faint off the right edge — the user's choice of the ring as the one background element (2026-09-21). Scoped to the band, so the article page's .stats keeps its quiet panel. */ .section--ink { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-2) 100%); color: var(--paper); } /* The blue bands are opaque, so the page canvas cannot reach them; each carries the ring itself, in gold, off its right edge. */ .section--ink::after { content: ""; position: absolute; top: 50%; right: -240px; z-index: 0; width: 560px; height: 560px; transform: translateY(-50%); pointer-events: none; background-color: var(--accent); opacity: .34; -webkit-mask: url(assets/brand-ownership.webp) no-repeat center / contain; mask: url(assets/brand-ownership.webp) no-repeat center / contain; } .section--ink .shell { position: relative; z-index: 1; } .section--ink .stats { border: 0; border-radius: 0; background: transparent; overflow: visible; } .section--ink .stat { padding: 10px 28px 10px 0; gap: 12px; } .section--ink .stat + .stat { border-left-color: rgba(255,255,255,.16); padding-left: 28px; } .section--ink .stat-v { font-size: 58px; color: var(--paper); } .section--ink .stat-l { font-size: 11px; letter-spacing: .12em; color: var(--accent); } .section--ink .stat-note { font-size: 15px; color: rgba(255,255,255,.74); line-height: 1.5; } @media (max-width: 1040px) { .section--ink::after { display: none; } .section--ink .stat { padding: 18px 24px 18px 0; } .section--ink .stat:nth-child(odd) { padding-left: 0; } .section--ink .stat:nth-child(even) { padding-left: 24px; } .section--ink .stat:nth-child(n+3) { border-top-color: rgba(255,255,255,.16); } } @media (max-width: 640px) { .section--ink .stat:nth-child(n) { padding: 16px 0; } .section--ink .stat + .stat { border-top-color: rgba(255,255,255,.16); } } /* --------------------------------------------------------------- 15. Comparison table --------------------------------------------------------------- */ .ctable { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 14px; } .ctable th, .ctable td { padding: 14px 18px; text-align: left; vertical-align: top; } .ctable thead th { background: var(--paper-2); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); } .ctable tbody tr + tr td { border-top: 1px solid var(--line-2); } .ctable tbody tr:hover td { background: color-mix(in oklab, var(--accent-wash) 45%, var(--panel)); } .ctable td:first-child { font-weight: 600; color: var(--ink); } .ctable-wrap { overflow-x: auto; border-radius: 14px; } /* --------------------------------------------------------------- 16. FAQ accordion --------------------------------------------------------------- */ .faq { display: flex; flex-direction: column; } .faq-item { border-top: 1px solid var(--line); } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; display: flex; align-items: flex-start; gap: 16px; background: none; border: none; cursor: pointer; padding: 22px 4px; font-family: var(--serif); font-size: 17.5px; font-weight: 600; line-height: 1.4; color: var(--ink); text-align: left; transition: color .15s; } .faq-q:hover { color: var(--accent-ink); } .faq-q-n { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-3); padding-top: 6px; flex: none; } .faq-q-tx { flex: 1 1 auto; min-width: 0; } .faq-ic { flex: none; margin-top: 4px; color: var(--accent-ink); transition: transform .22s var(--ease); } .faq-item.is-open .faq-ic { transform: rotate(45deg); } /* Height animated by site.js via max-height, so it works without JS too (the panel is simply always open when JS is unavailable). */ .faq-a { overflow: hidden; max-height: 0; transition: max-height .3s var(--ease); } .faq-a-inner { padding: 0 4px 24px 56px; display: flex; flex-direction: column; gap: 12px; } .faq-a-inner p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); } .faq-a-inner ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 15px; color: var(--ink-2); } /* --------------------------------------------------------------- 17. Blog cards + article prose --------------------------------------------------------------- */ .post { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .18s, box-shadow .18s, transform .18s var(--ease); } .post:hover { border-color: var(--accent-soft); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; } /* Generated cover: a tinted plate carrying a product motif, not a stock photo. */ .post-cover { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(150deg, var(--paper-2), var(--accent-wash)); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .post-cover svg { width: 100%; height: 100%; } .post-cover--indigo { background: linear-gradient(150deg, #190d40, #2b1a66); } .post-cover--good { background: linear-gradient(150deg, var(--paper-2), var(--good-wash)); } .post-cover--slate { background: linear-gradient(150deg, var(--paper-2), var(--slate-wash)); } .post-meta { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--paper-2); border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); } .post-meta span { display: inline-flex; align-items: center; gap: 6px; } .post-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; } .post-title { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.32; color: var(--ink); margin: 0; letter-spacing: -.01em; } .post-excerpt { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; flex: 1 1 auto; } .post-foot { padding-top: 4px; } /* Long-form article body. SPECIFICITY NOTE — the flow rule and the element rules must not fight. `.prose > * + *` scores (0,1,0) because `*` adds nothing, so any rule like `.prose p { margin: 0 }` at (0,1,1) would beat it and collapse every gap in the article. So: the reset and the flow rule both target `> *`, and the element rules below set no vertical margin at all — except the headings, which deliberately use (0,1,1) to claim a LARGER top margin than the flow. */ .prose { max-width: var(--maxw-prose); } .prose > * { margin-top: 0; margin-bottom: 0; } .prose > * + * { margin-top: 22px; } .prose p { font-size: 17px; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; } .prose h2 { font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1.25; color: var(--ink); letter-spacing: -.015em; margin-top: 46px; } .prose h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--ink); margin-top: 36px; } /* A heading opening the article shouldn't push off the top. */ .prose > :first-child { margin-top: 0; } .prose ul, .prose ol { padding-left: 26px; display: flex; flex-direction: column; gap: 11px; } .prose li { font-size: 17px; line-height: 1.7; color: var(--ink-2); } .prose li::marker { color: var(--accent-ink); } .prose strong { color: var(--ink); font-weight: 600; } .prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; } .prose hr { border: none; border-top: 1px solid var(--line); margin-top: 40px; } .prose blockquote { margin-left: 0; margin-right: 0; padding: 4px 0 4px 24px; border-left: 2.5px solid var(--accent); font-family: var(--serif); font-size: 20px; line-height: 1.55; color: var(--ink); } /* Nested — not a direct child, so the flow rule never reaches it. */ .prose blockquote p { font-family: inherit; font-size: inherit; color: inherit; } .prose blockquote > * + * { margin-top: 14px; } .prose figure { margin-left: 0; margin-right: 0; } .prose figcaption { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 9px; line-height: 1.5; } /* Callout box inside an article. */ .callout { background: var(--paper-2); border: 1px solid var(--line); border-left: 2.5px solid var(--accent); border-radius: 10px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; } .callout p { font-size: 15px; line-height: 1.65; margin: 0; } /* Status variant — the platform's public sign-up is paused for now (client instruction 2026-09-07, wording settled 2026-09-16). Slate rather than gold so it reads as a notice, not a highlight. One component, one wording, used everywhere the site describes something you cannot currently reach. */ .callout--status { border-left-color: var(--slate-ink); background: var(--slate-wash); } .callout-label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-ink); } .callout-links { font-family: var(--mono); font-size: 13px; } .callout-links a { color: var(--ink-2); } .callout-links a:hover { color: var(--accent-ink); } /* Named people — the About split's right-hand column, and (compact) the contact page. Each card is one link to the person's LinkedIn. The avatar is a monogram with the photo laid over it, so a file missing from assets/founders/ degrades to initials and never to a broken image. */ .founders { display: flex; flex-direction: column; gap: 14px; } .founder { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; color: inherit; } .founder:hover { text-decoration: none; } .card.founder { flex-direction: row; padding: 20px 22px; } .founder-avatar { position: relative; flex: none; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-wash); border: 1px solid var(--accent-soft); /* A paper-coloured gap, then a hairline gold ring: the radar mark's concentric circles, borrowed for a face. */ box-shadow: 0 0 0 4px var(--panel), 0 0 0 5px var(--accent-soft); margin: 5px; overflow: hidden; } .founder-initials { font-family: var(--serif); font-weight: 600; font-size: 27px; letter-spacing: .02em; color: var(--accent-ink); } .founder-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .founder-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .founder-name { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--ink); } .founder-role { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .founder-go { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--accent-ink); white-space: nowrap; padding: 6px 11px; border-radius: 999px; background: var(--accent-wash); transition: background .18s; } .founder:hover .founder-go { background: color-mix(in oklab, var(--accent) 22%, var(--accent-wash)); } /* Contact page: the same person, without the card, inside a thesis cell. */ .founder--compact { gap: 12px; padding: 4px 0; } .founder--compact .founder-avatar { width: 44px; height: 44px; margin: 0; box-shadow: none; } .founder--compact .founder-initials { font-size: 15px; } .founder--compact .founder-id { gap: 2px; } .founder--compact .founder-name { font-size: 16px; } .founder--compact .founder-go { padding: 0; background: none; } .founder--compact:hover .founder-go { background: none; text-decoration: underline; text-underline-offset: 3px; } /* --------------------------------------------------------------- 18. Page header (inner pages) --------------------------------------------------------------- */ .pagehead { padding: 56px 0 46px; border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--paper-2) 90%, transparent); position: relative; overflow: hidden; } .pagehead-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; } /* Breadcrumb. */ .crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .crumbs a { color: var(--ink-3); } .crumbs a:hover { color: var(--accent-ink); } .crumbs-sep { opacity: .5; } /* --------------------------------------------------------------- 19. Call to action band --------------------------------------------------------------- */ .cta { position: relative; background: var(--brand-primary); color: #fff; border-radius: 18px; padding: 56px 48px; overflow: hidden; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; } /* :not(.cta-rings) matters — a bare `.cta > *` rule would give the decorative SVG position:relative, putting it back in flow and inflating the band. */ .cta > *:not(.cta-rings) { position: relative; z-index: 1; } .cta-rings { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .16; pointer-events: none; } .cta .h2 { color: #fff; } .cta .lede { color: #d3d0da; } .cta .kicker { color: #aeaabc; } .cta .kicker::before { background: var(--accent); } .cta .btn--ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.26); color: #fff; } .cta .btn--ghost:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.42); color: #fff; } /* --------------------------------------------------------------- 20. Footer --------------------------------------------------------------- */ .site-foot { background: var(--brand-primary); color: #c5c2cf; padding: 56px 0 0; margin-top: 0; } .foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 44px; } .foot-brand { display: flex; flex-direction: column; gap: 14px; } /* Gold on Deep Blue — the pairing the guidelines lead with (8.6:1). */ .foot-brand .wordmark { color: var(--accent); --wordmark-h: 34px; } .foot-note { font-size: 13.5px; line-height: 1.6; color: #aeaabc; max-width: 34ch; } .foot-col { display: flex; flex-direction: column; gap: 11px; } .foot-h { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #807a96; margin: 0 0 3px; } .foot-col a { color: #c5c2cf; font-size: 14px; } .foot-col a:hover { color: var(--accent-soft); text-decoration: none; } .foot-bar { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13px; color: #9892a9; } .foot-contact { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .foot-contact a { color: #c5c2cf; display: inline-flex; align-items: center; gap: 7px; } .foot-contact a:hover { color: var(--accent-soft); text-decoration: none; } .foot-social { display: flex; align-items: center; gap: 9px; } .foot-social a { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: #c5c2cf; transition: background .16s, color .16s; } .foot-social a:hover { background: var(--accent); color: #190d40; text-decoration: none; } /* --------------------------------------------------------------- 21. Reveal on scroll (progressive enhancement) .reveal only dims/offsets once site.js has confirmed JS + motion preference, so a no-JS visitor sees everything immediately. --------------------------------------------------------------- */ .js .reveal { opacity: 0; transform: translateY(14px); } .js .reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .6s var(--ease); } .js .reveal-d1.is-in { transition-delay: .07s; } .js .reveal-d2.is-in { transition-delay: .14s; } .js .reveal-d3.is-in { transition-delay: .21s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* --------------------------------------------------------------- 22. Responsive --------------------------------------------------------------- */ @media (max-width: 1040px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; gap: 38px; } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(3) { border-left: none; } .stat:nth-child(n+3) { border-top: 1px solid var(--line); } .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } } @media (max-width: 860px) { :root { --gutter: 22px; } .section { padding: 62px 0; } /* Collapse the bar into a toggle-driven sheet. */ .nav-toggle { display: inline-flex; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 10px var(--gutter) 18px; margin: 0; display: none; } .nav-links.is-open { display: flex; } .nav-link { justify-content: space-between; padding: 11px 12px; font-size: 15px; } .nav-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none; background: none; padding: 0 0 6px 12px; min-width: 0; display: none; } .nav-item.is-open .nav-menu { display: block; transform: none; } .nav-actions .btn { padding: 9px 16px; font-size: 13.5px; } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .thesis { grid-template-columns: 1fr; } .thesis-cell + .thesis-cell { border-left: none; border-top: 1px solid var(--line); } .cta { padding: 44px 26px; border-radius: 14px; } .fam { grid-template-columns: 108px 1fr 38px; } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; } .stat + .stat { border-left: none; border-top: 1px solid var(--line); } .foot-grid { grid-template-columns: 1fr; } .foot-bar { flex-direction: column; align-items: flex-start; } .wordmark { --wordmark-h: 26px; } /* On a phone the burst is wider than the screen, so it sits under the copy instead of beside it. Better to drop it than to dim it further. */ .rrow { grid-template-columns: 18px minmax(0, 1fr) 44px; } .rrow-delta { display: none; } .faq-a-inner { padding-left: 4px; } .prose p, .prose li { font-size: 16px; } /* Founder card: the LinkedIn pill drops under the name instead of squeezing it. */ .card.founder { grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; } .card.founder .founder-avatar { width: 64px; height: 64px; grid-row: span 2; } .card.founder .founder-initials { font-size: 22px; } .card.founder .founder-id { align-self: end; } .card.founder .founder-go { justify-self: start; align-self: start; } } /* --------------------------------------------------------------- 23. Print — articles and the privacy policy should print cleanly --------------------------------------------------------------- */ @media print { /* Scroll-reveal must never hide content on paper. */ .js .reveal { opacity: 1 !important; transform: none !important; } body::before, .site-head, .site-foot, .cta { display: none !important; } .section--ink { background: #fff !important; color: #000; } .cap { background: #fff; border-color: #ccc; color: #000; } .cap .h3, .cap .body-sm, .section--ink .sec-head .h2, .section--ink .sec-head .lede { color: #000; } .section--ink .stat-v, .section--ink .stat-l, .section--ink .stat-note { color: #000; } body { background: #fff; color: #000; } .panel, .card, .ctable { box-shadow: none; border-color: #ccc; } .prose p, .prose li { font-size: 11pt; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } } /* =============================================================== v2 ADDITIONS =============================================================== Everything below is new in v2 and nothing above it changed, so a v1 page dropped into this folder still renders exactly as it did. Two rules hold for the whole block: - only tokens already declared in :root above are used, because a second palette on a hand-maintained static site becomes a second brand within a release or two; - every component is readable with JavaScript blocked. The filter chips are the only thing that needs the script, and they are hidden until it arrives. =============================================================== */ /* --------------------------------------------------------------- 24. Provenance — .prov / .prov-note / .srcref v2 publishes no figure without saying where it came from. These are the two affordances that carry that: a mono link to the derivation table, and a chip naming the exact published answer a claim was lifted from. Deliberately small — apparatus, not copy. --------------------------------------------------------------- */ .prov-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); margin: 0; } .prov { font-family: var(--mono); font-size: 11px; color: var(--accent-ink); text-decoration: none; white-space: nowrap; border-bottom: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); } .prov:hover { border-bottom-color: var(--accent); text-decoration: none; } /* Scoped on purpose: the source chip appears in the duty table and the "what stays yours" statements and nowhere else. On a whole page it reads as legal apparatus; on two components it reads as confidence. */ .srcref { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-wash); border-radius: 5px; padding: 3px 7px; text-decoration: none; white-space: nowrap; } .srcref:hover { background: color-mix(in oklab, var(--accent) 22%, var(--accent-wash)); text-decoration: none; } .srcref + .srcref { margin-left: 4px; } /* --------------------------------------------------------------- 25. Split counter panel — .panel--split The hero's two counters. The value and its qualifier live in the SAME cell so a later edit cannot separate the 64 Cr figure from "Being raised now" — the one abbreviation this site must never make. --------------------------------------------------------------- */ .panel--split .panel-split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .panel--split .stat { padding: 22px 20px; } /* The reconciliation line, as the last row of the panel body. */ .panel-foot { border-top: 1px solid var(--line-2); padding: 14px 20px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); } /* --------------------------------------------------------------- 26. Ticket ladder and cadence rail — .ladder / .cadence Two static inline SVGs. Colour lives here rather than in fill= attributes so a palette edit happens once, and both carry a real aria-label because the figure is data, not decoration. Both scroll inside their own box below ~520px instead of shrinking the mono axis labels past legibility. The PAGE never scrolls. --------------------------------------------------------------- */ .ladder, .cadence { margin: 0; overflow-x: auto; } .ladder svg { width: 100%; height: auto; min-width: 520px; } .cadence svg { width: 100%; height: auto; min-width: 560px; } .ladder text, .cadence text { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; fill: var(--ink-3); } .ladder-rail { stroke: var(--ring-track); stroke-width: 2; stroke-linecap: round; } .cadence-rail { stroke: var(--line); stroke-width: 1; } /* The break mark that holds the 2024 sale apart from the 2026 run. */ .cadence-break { stroke: var(--line); stroke-width: 1.2; fill: none; } /* Hollow = still in market, filled = closed. The same key on both figures. */ .node { fill: none; stroke: var(--accent-soft); stroke-width: 1.6; } .node.is-closed { fill: var(--accent); stroke: var(--accent); } .ladder figcaption, .cadence figcaption { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; } /* --------------------------------------------------------------- 27. Disclosure meter — .disclose Seven segments, one per field the ledger holds: six filled, the seventh an empty dashed track. Turns "six names withheld" from an apology into a countable standard. The fills are painted by CSS, not by site.js's data-h pass, because a claim about what Draavi publishes must still be true with the script blocked. data-h stays on the markup so it self-describes, and the script's paint lands on the same 100%. --------------------------------------------------------------- */ .disclose { display: flex; flex-direction: column; } .disclose .sigbars { height: 38px; gap: 6px; } .disclose .sigbar { width: 36px; height: 38px; } .disclose .sigbar-fill { height: 100%; } .sigbar--empty { background: var(--panel); border: 1px dashed var(--line); } .disclose-lbl { display: flex; gap: 6px; list-style: none; margin: 8px 0 0; padding: 0; } .disclose-lbl li { width: 36px; text-align: center; font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } .disclose-lbl li.is-out { color: var(--ink-bar); } .disclose-cap { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); margin: 14px 0 0; } /* --------------------------------------------------------------- 28. Step rail — .steprail A modifier on .rows that runs a hairline down the number gutter and sets each number on it, so six capabilities read as a sequence rather than six equal cards. The rail opens at the first step and closes at the last, so the sequence visibly has both ends. --------------------------------------------------------------- */ /* .rows is used on a bare