/* Nandee site styles: site.css, heroes.css and prose.css from the React site, concatenated. */ /* ---- site.css ---- */ /* * Nandee site styles: design tokens, base element rules, header/menu, * motion, and the shared classes the pages are built from. * * Source of truth: the "Red Pen" redesign export (navy and mist palette). * Token values are copied exactly from it; don't round or rename them. */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ .nd { --paper: #F5F6F3; --paper-2: #FFFFFF; --code: #EAEDF0; --ink: #12161C; --ink-2: #333A44; --muted: #55606B; --rule: #D5DAE0; --pen: #C2311B; --fix: #2546B8; --on-pen: #FFFFFF; --f-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --f-body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; --f-hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; background: var(--paper); color: var(--ink); font-family: var(--f-body); -webkit-font-smoothing: antialiased; } .nd.dark { --paper: #0E1117; --paper-2: #161A22; --code: #1C212A; --ink: #F1F3F5; --ink-2: #CDD5E0; --muted: #A3ADBB; --rule: #2A303A; --pen: #FF7A5E; --fix: #9DB4FF; --on-pen: #12161C; } @media (prefers-color-scheme: dark) { .nd.auto { --paper: #0E1117; --paper-2: #161A22; --code: #1C212A; --ink: #F1F3F5; --ink-2: #CDD5E0; --muted: #A3ADBB; --rule: #2A303A; --pen: #FF7A5E; --fix: #9DB4FF; --on-pen: #12161C; } } /* Section grounds: navy (.inv) and mist (.kraft). */ .inv { --paper: #13233A; --paper-2: #1B2E49; --code: #22375A; --ink: #F1F3F5; --ink-2: #CDD5E0; --muted: #A9B4C4; --rule: #2C4263; --pen: #FF7A5E; --fix: #9DB4FF; --on-pen: #13233A; background: var(--paper); color: var(--ink); } .kraft { --paper: #E4EAF0; --paper-2: #EFF3F7; --code: #D9E1E9; --rule: #C8D2DD; background: var(--paper); } .nd.dark .inv { --paper: #14243B; --paper-2: #1C2F4A; --code: #23395C; --rule: #2E4566; } .nd.dark .kraft { --paper: #151A21; --paper-2: #1C222A; --code: #232A33; --rule: #2E3640; } @media (prefers-color-scheme: dark) { .nd.auto .inv { --paper: #14243B; --paper-2: #1C2F4A; --code: #23395C; --rule: #2E4566; } .nd.auto .kraft { --paper: #151A21; --paper-2: #1C222A; --code: #232A33; --rule: #2E3640; } } /* ── Base element rules ───────────────────────────────────────────────────── * In a cascade layer so the shared classes below always win over them, the * same way the reference files' inline styles did. The !important hover on * .btn-primary still wins, as it did in the reference. (Named nd-base, not * base: Tailwind rewrites `@layer base` into unlayered CSS.) */ @layer nd-base { html, body { margin: 0; background: var(--page-bg, #F5F6F3); } .nd a { color: var(--ink); } .nd a:hover { color: var(--pen); } /* Real links and buttons only: mock report buttons (spans) don't react. */ .nd a.btn-primary:hover, .nd button.btn-primary:hover { background: var(--pen) !important; color: var(--on-pen) !important; } .nd a:focus-visible, .nd button:focus-visible, .nd summary:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; border-radius: 8px; } .nd input:focus-visible, .nd select:focus-visible, .nd textarea:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; } .nd input, .nd select, .nd textarea { font: inherit; color: var(--ink); background: var(--paper-2); } .nd input:hover, .nd select:hover, .nd textarea:hover { border-color: var(--ink) !important; } .nd input[type=checkbox] { accent-color: var(--ink); width: 20px; height: 20px; margin: 0; } .nd summary { cursor: pointer; list-style: none; } .nd summary::-webkit-details-marker { display: none; } } /* The page background behind .nd follows the theme too (overscroll, short pages). */ html:has(.nd.auto) { --page-bg: #F5F6F3; } @media (prefers-color-scheme: dark) { html:has(.nd.auto) { --page-bg: #0E1117; } } /* ── Header and menus ───────────────────────────────────────────────────── */ .site-header { position: relative; } .nav-links { display: flex; } .menu-btn { display: none; } .prod-menu { position: relative; } .prod-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; } .prod-menu summary::-webkit-details-marker { display: none; } /* Full-width mega menus (components/site/MegaMenu.tsx), from the menu design. The panel hangs from the header (.site-header) and spans the viewport. It resets the colour tokens to the page theme so it reads the same over a mist hero as over the page ground. */ .prod-menu.mm { position: static; } .mm-panel { --paper: #F5F6F3; --paper-2: #FFFFFF; --code: #EAEDF0; --ink: #12161C; --ink-2: #333A44; --muted: #55606B; --rule: #D5DAE0; --pen: #C2311B; --fix: #2546B8; --on-pen: #FFFFFF; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 100vw; z-index: 40; background: var(--paper-2); color: var(--ink); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); box-shadow: 0 40px 60px -40px rgba(18, 22, 28, .35); text-align: left; font-size: 15px; line-height: 1.45; animation: mmFade .16s ease-out; } .nd.dark .mm-panel { --paper: #0E1117; --paper-2: #161A22; --code: #1C212A; --ink: #F1F3F5; --ink-2: #CDD5E0; --muted: #A3ADBB; --rule: #2A303A; --pen: #FF7A5E; --fix: #9DB4FF; --on-pen: #12161C; } @media (prefers-color-scheme: dark) { .nd.auto .mm-panel { --paper: #0E1117; --paper-2: #161A22; --code: #1C212A; --ink: #F1F3F5; --ink-2: #CDD5E0; --muted: #A3ADBB; --rule: #2A303A; --pen: #FF7A5E; --fix: #9DB4FF; --on-pen: #12161C; } } .mm-panel p { margin: 0; } .mm-inner { max-width: 1248px; margin: 0 auto; padding: 32px clamp(16px, 5vw, 48px) 28px; display: grid; grid-template-columns: minmax(200px, .9fr) repeat(3, minmax(0, 1.1fr)); gap: 40px; animation: mmDrop .18s ease-out; } .mm-inner-ind { grid-template-columns: minmax(200px, .9fr) 3.3fr; } .mm-intro { padding-right: 24px; border-right: 1px solid var(--rule); } .mm-title { font-family: var(--f-display); font-size: 44px; line-height: .95; letter-spacing: -.02em; } .mm-sub { margin-top: 14px !important; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 22em; } .mm-panel .mm-start { display: inline-block; margin-top: 18px; font-size: 14px; text-decoration: none; } .mm-hand { font-family: var(--f-hand); font-size: 24px; line-height: 1; color: var(--pen); margin-left: 4px; white-space: nowrap; } .mm-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); margin-bottom: 8px !important; } .mm-gl { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .mm-note { display: inline-block; font-family: var(--f-hand); font-size: 24px; line-height: 1; color: var(--pen); transform: rotate(-3deg); } .mm-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .mm-group-wide ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 40px; } .mm-panel .mm-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 10px; margin: 0 -10px; border-radius: 12px; text-decoration: none; color: var(--ink); transition: background-color .15s ease; } .mm-panel .mm-item:hover, .mm-panel .mm-item:focus-visible { background: var(--paper); } .mm-ico { width: 36px; height: 36px; box-sizing: border-box; border: 1px solid var(--rule); border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); transition: border-color .15s ease, color .15s ease; } .mm-item:hover .mm-ico, .mm-item:focus-visible .mm-ico { border-color: var(--ink); color: var(--ink); } .mm-name { display: block; font-weight: 500; font-size: 16px; line-height: 1.25; } .mm-tag { font-family: var(--f-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; } .mm-def { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); } .mm-item[aria-current="page"] .mm-name { text-decoration: underline; text-underline-offset: 4px; } /* Navy card: fixed colours in both themes, like the navy pricing card. */ .mm-panel .mm-cta { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: #13233A; color: #F1F3F5; text-decoration: none; transition: background-color .15s ease; } .mm-panel .mm-cta:hover { background: #1B2E49; color: #F1F3F5; } .mm-cta-k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #A9B4C4; } .mm-cta-t { font-size: 15px; line-height: 1.35; } .mm-cta-go { margin-top: 4px; font-size: 14px; font-weight: 500; color: #FF7A5E; } /* "Where it works": hovering an item lights the lifecycle stages it covers. */ .mm-life { max-width: 1248px; margin: 0 auto; padding: 14px clamp(16px, 5vw, 48px) 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--rule); } .mm-life-lbl { letter-spacing: .08em; text-transform: uppercase; } .mm-life ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; } .mm-life li { position: relative; padding: 5px 11px; border-radius: 999px; border: 1px dashed var(--rule); transition: background-color .15s ease, color .15s ease; } .mm-life li + li { margin-left: 28px; } .mm-life li + li::before { content: ""; position: absolute; left: -24px; top: 50%; width: 20px; border-top: 1px solid var(--rule); } .mm-life-tip { margin-left: auto; transition: opacity .15s ease; } .mm-panel:has(.mm-item:hover, .mm-item:focus-visible) .mm-life-tip { opacity: 0; } .mm-panel:has(.s-code:hover, .s-code:focus-visible) .lc-code, .mm-panel:has(.s-build:hover, .s-build:focus-visible) .lc-build, .mm-panel:has(.s-test:hover, .s-test:focus-visible) .lc-test, .mm-panel:has(.s-release:hover, .s-release:focus-visible) .lc-release, .mm-panel:has(.s-run:hover, .s-run:focus-visible) .lc-run { background: var(--ink); border: 1px solid var(--ink); color: var(--paper-2); } @keyframes mmFade { from { opacity: 0 } to { opacity: 1 } } @keyframes mmDrop { from { transform: translateY(-6px) } to { transform: none } } @media (max-width: 1100px) and (min-width: 821px) { .mm-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mm-inner-ind { grid-template-columns: 1fr; } .mm-intro { display: none; } } @media (prefers-reduced-motion: reduce) { .mm-panel, .mm-inner { animation: none; } .mm-panel .mm-item, .mm-ico, .mm-life li, .mm-life-tip { transition: none; } } @media (max-width: 820px) { .nav-links { display: none; } .menu-btn { display: inline-flex; } .nd.nav-open .nav-links { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0 !important; position: absolute; top: 84px; left: 16px; right: 16px; z-index: 30; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px; padding: 12px 20px; } .nd.nav-open .nav-links > a, .nd.nav-open .prod-menu summary { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--rule); } .nd.nav-open .nav-links > a:last-child { border-bottom: 0; } /* Mega menus fold into the mobile menu: groups and items only. */ .nd.nav-open .mm-panel { --paper: inherit; --paper-2: inherit; --ink: inherit; --ink-2: inherit; --muted: inherit; --rule: inherit; --pen: inherit; position: static; transform: none; width: auto; border: 0; box-shadow: none; background: transparent; animation: none; } .nd.nav-open .mm-inner { display: block; max-width: none; padding: 0 0 8px; animation: none; } .nd.nav-open .mm-intro, .nd.nav-open .mm-life, .nd.nav-open .mm-note, .nd.nav-open .mm-cta { display: none; } .nd.nav-open .mm-gh { border-bottom: 0; margin: 14px 0 2px !important; padding: 0; } .nd.nav-open .mm-group-wide ul { display: flex; flex-direction: column; gap: 2px; } .nd.nav-open .mm-panel .mm-item { margin: 0; padding: 10px 0; border-radius: 0; } .nd.nav-open .mm-panel .mm-item:hover { background: transparent; } } /* ── FAQ ────────────────────────────────────────────────────────────────── */ .plus { transition: transform .2s ease; } .nd details[open] .plus { transform: rotate(45deg); } /* ── Blog cards ─────────────────────────────────────────────────────────── */ .post:hover .post-title { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; } /* ── Motion ───────────────────────────────────────────────────────────────── * Hero: scan line, pen marks drawing in, notes fading in. Default timings * here; per-page timings in heroes.css. Section reveals use scroll-driven * animations where supported. */ .scan { animation: ndScan 5.5s cubic-bezier(.45,0,.55,1) 1 forwards; } @keyframes ndScan { 0% { transform: translateY(0); opacity: 0 } 6% { opacity: 1 } 90% { opacity: 1 } 100% { transform: translateY(360px); opacity: 0 } } .ink { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ndDraw 1s ease-out forwards; } @keyframes ndDraw { to { stroke-dashoffset: 0 } } .note { opacity: 0; animation: ndFade .6s ease-out forwards; } @keyframes ndFade { to { opacity: 1 } } @keyframes ndRise { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } } @supports (animation-timeline: view()) { .reveal { animation: ndRise linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; } .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ndDraw linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; } } /* !important: per-page hero rules in heroes.css are more specific. */ @media (prefers-reduced-motion: reduce) { .scan { animation: none !important; opacity: 0 !important; } .ink, .draw { animation: none !important; stroke-dashoffset: 0 !important; } .note, .reveal { animation: none !important; opacity: 1 !important; transform: none !important; } .plus { transition: none; } } /* ── Shared classes ───────────────────────────────────────────────────────── * The reference files repeat the same inline style strings hundreds of * times; each recurring one is a class here (name: what it's used for). * Values are verbatim from the reference. */ .plain{text-decoration:none} .fw5{font-weight:500} .sub{font-size:13px;color:var(--muted)} .muted{color:var(--muted)} .f-ink{fill:var(--ink)} .body-sm{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)} .label{font-family:var(--f-mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)} .read-item{border-top:1px solid var(--ink);padding:24px 0 32px;display:flex;flex-direction:column;gap:10px} .h3{margin:0;font-size:21px;font-weight:500} .rule-top{border-top:1px solid var(--rule)} .stack-4{display:flex;flex-direction:column;gap:4px} .eyebrow{margin:0;font-family:var(--f-mono);font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)} .h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(40px, 5.6vw, 72px);line-height:1;letter-spacing:-0.02em} .num-lg{font-family:var(--f-display);font-size:32px;line-height:1} .f-muted{fill:var(--muted)} .fit-step{border-top:1px solid var(--rule);padding-top:16px;display:flex;flex-direction:column;gap:6px;color:var(--muted)} .mono-12{font-family:var(--f-mono);font-size:12px} .fs14{font-size:14px} .faq-item{border-bottom:1px solid var(--rule);padding:20px 0} .faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:19px;font-weight:500;min-height:44px} .faq-a{margin:12px 0 0;font-size:17px;line-height:1.55;color:var(--ink-2)} .logo-link{display:inline-flex;color:var(--ink);text-decoration:none} .menu-label{margin:0 0 6px;font-family:var(--f-mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)} .f-pen{fill:var(--pen)} .stack-20{display:flex;flex-direction:column;gap:20px} .fit-link{font-size:18px;font-weight:500;text-underline-offset:5px} .s-pen{stroke:var(--pen)} .td{padding:16px 12px} .fs18-500{font-size:18px;font-weight:500} .code-block{margin:0;background:var(--code);border-radius:12px;padding:20px;font-family:var(--f-mono);font-size:14px;line-height:1.8;overflow-x:auto;color:var(--ink)} /* clip, not the reference's hidden: overflow-x:hidden turns this wrapper into a scroll container, so the scroll-driven reveals tracked it (it never scrolls) instead of the window and froze part-faded near the page end. */ .root{min-height:100%;overflow-x:clip} .body{margin:0;font-size:17px;line-height:1.55;color:var(--ink-2)} .code-fig{margin:0;display:flex;flex-direction:column;gap:14px} .btn-outline{text-decoration:none;border:1px solid var(--ink);border-radius:999px;padding:12px 20px;font-size:15px;font-weight:500;white-space:nowrap} .fix-c{color:var(--fix)} .stack-ruled{display:flex;flex-direction:column;border-top:1px solid var(--ink)} .btn-lg{background:var(--ink);color:var(--paper);text-decoration:none;padding:20px 32px;border-radius:999px;font-size:17px;font-weight:500} .mono-13-muted{font-family:var(--f-mono);font-size:13px;color:var(--muted)} .stack-28{display:flex;flex-direction:column;gap:28px} .link-16{font-size:16px;text-underline-offset:6px} .s-ink{stroke:var(--ink)} .chip{font-family:var(--f-mono);font-size:12px;border:1px solid var(--rule);border-radius:999px;padding:5px 11px} .hand{margin:0;font-family:var(--f-hand);font-size:27px;line-height:1.05;color:var(--pen)} .cta-wrap{max-width:1248px;margin:0 auto;padding:clamp(96px, 14vw, 176px) clamp(16px, 5vw, 48px);display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center} .h2-xl{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(44px, 7vw, 96px);line-height:1;letter-spacing:-0.02em;text-wrap:balance} .pill-link{border:1px solid var(--ink);border-radius:999px;padding:12px 18px;text-decoration:none;font-size:15px} .hero{max-width:1248px;margin:0 auto;padding:clamp(32px, 6vw, 72px) clamp(16px, 5vw, 48px) clamp(64px, 9vw, 120px);display:grid;grid-template-columns:repeat(auto-fit, minmax(min(460px, 100%), 1fr));gap:clamp(40px, 5vw, 64px);align-items:center} .lede{margin:0;font-size:clamp(18px, 1.6vw, 20px);line-height:1.5;color:var(--ink-2);max-width:30em;text-wrap:pretty} .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding-top:4px} .btn-md{background:var(--ink);color:var(--paper);text-decoration:none;padding:18px 28px;border-radius:999px;font-size:16px;font-weight:500} .hero-art{width:100%;max-width:600px;justify-self:center} .hero-svg{width:100%;height:auto;display:block;overflow:visible} .phone-frame{fill:none;stroke:var(--ink)} .card-rect{fill:var(--paper-2);stroke:var(--rule)} .wrap-160{max-width:1248px;margin:0 auto;padding:clamp(88px, 12vw, 160px) clamp(16px, 5vw, 48px);display:flex;flex-direction:column;gap:clamp(40px, 5vw, 64px)} .wrap-160-56{max-width:1248px;margin:0 auto;padding:clamp(88px, 12vw, 160px) clamp(16px, 5vw, 48px);display:flex;flex-direction:column;gap:clamp(40px, 5vw, 56px)} .wrap-144-grid{max-width:1248px;margin:0 auto;padding:clamp(88px, 12vw, 144px) clamp(16px, 5vw, 48px);display:grid;grid-template-columns:repeat(auto-fit, minmax(min(360px, 100%), 1fr));gap:48px} .wrap-144{max-width:1248px;margin:0 auto;padding:clamp(88px, 12vw, 144px) clamp(16px, 5vw, 48px);display:flex;flex-direction:column;gap:40px} .row-split{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr));gap:8px 48px;border-bottom:1px solid var(--rule);padding:22px 0} .num-30{font-family:var(--f-display);font-size:30px;line-height:1.1} .chip-pen{border:1px solid var(--pen);color:var(--pen);border-radius:999px;padding:5px 12px} .finding-card{background:var(--paper);border:1px solid var(--rule);border-radius:20px;padding:clamp(20px, 4vw, 48px);display:flex;flex-direction:column;gap:32px} .finding-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-family:var(--f-mono);font-size:13px} .finding-h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(32px, 4vw, 52px);line-height:1.02;letter-spacing:-0.015em} .h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(52px, 7.6vw, 104px);line-height:0.95;letter-spacing:-0.025em} .h2-fit{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(36px, 4.8vw, 60px);line-height:1;letter-spacing:-0.02em} /* ---- heroes.css ---- */ /* Per-page hero animation timing, generated from each reference page's