/* WeaveONE prototype design system — 2026-08-06 Dual light/dark theme, toggled via [data-theme] on . LIGHT is the default (no attribute) — we lead with the calm light palette. data-theme="dark" opts into the warm dark + gold identity from 2026-08-03. Selector specificity does the work: html[data-theme="dark"] (0,1,1) outranks :root (0,1,0), so source order between the two blocks is irrelevant. Every previously-hardcoded per-theme value (nav backdrop, walkthrough bar, button gradient, frame chrome, sign-in drawer surface) is a variable, so both themes live here with no per-selector duplication. NOTE: anything keyed off "is light" must test html:not([data-theme="dark"]) — light has NO attribute to match on. */ :root { /* ── Core palette — LIGHT (and the DEFAULT) ── */ --bg: #faf9f5; --panel: #ffffff; --panel-2: #f3f6f4; --cream: #eaf3ee; --cream-ink: #1e2a24; --cream-soft: #48584f; --ink: #1e2a24; --soft: rgba(30, 42, 36, 0.74); --dim: rgba(30, 42, 36, 0.68); --line: rgba(30, 42, 36, 0.13); --gold: #2f6b54; /* primary accent — sage */ --gold-deep: #23543f; --blue: #1d7c89; /* schools thread — teal, nudged for AA on cream */ --rose: #aa5a44; /* parents thread — terracotta, darkened for AA on cream */ /* Layout constants — theme-independent, so they live in the DEFAULT block and are inherited by the dark override. Stranding them in a themed-only block once left the other theme with no --w, which silently dropped every section's max-width and made the whole site full-bleed. */ --radius: 12px; --w: 1140px; /* ── Chrome / component tokens — LIGHT ── */ --nav-bg: rgba(250, 249, 245, 0.88); --proto-bg: #eaf4ee; --proto-ink: #1f3d31; --proto-border: rgba(31, 61, 49, 0.3); --proto-hover: rgba(31, 61, 49, 0.1); --proto-current: rgba(31, 61, 49, 0.16); --proto-next-border: rgba(31, 61, 49, 0.35); --sheet-bg: #fbfaf6; --icon-tint: rgba(47, 107, 84, 0.12); --btn-grad-start: #3e9172; --btn-text: #f3fbf6; --btn-shadow: rgba(47, 107, 84, 0.28); --frame-bar-tint: rgba(30, 42, 36, 0.03); --frame-dot-tint: rgba(30, 42, 36, 0.16); --frame-shadow: 0 30px 80px rgba(30, 42, 36, 0.14); --card-shadow: 0 1px 2px rgba(30, 42, 36, 0.04); --ph-tint: rgba(30, 42, 36, 0.05); --tr-hover-tint: rgba(30, 42, 36, 0.025); --footer-bg: var(--cream); --overlay-hover: rgba(30, 42, 36, 0.05); --input-bg: #ffffff; --si-bg: #ffffff; --si-app-bg: rgba(30, 42, 36, 0.035); --si-app-hover-border: rgba(47, 107, 84, 0.4); --si-app-hover-bg: rgba(47, 107, 84, 0.08); --si-tab-active-bg: rgba(47, 107, 84, 0.14); /* Status colours need DIFFERENT values per theme: the original #ef5b5b / #4ecf9d were tuned for a near-black drawer and drop to ~3.2:1 and ~1.9:1 on a light one (both fail AA). */ --si-danger: #b3261e; --si-success: #0f7a52; --si-success-bg: rgba(15, 122, 82, 0.12); } html[data-theme="dark"] { /* ── Core palette — DARK (opt-in) ── */ --bg: #0a0a0d; --panel: #13131a; --panel-2: #17171f; --cream: #f6f1e7; --cream-ink: #201c15; --cream-soft: #5b5548; --ink: #f5f2ea; --soft: rgba(245, 242, 234, 0.78); --dim: rgba(245, 242, 234, 0.55); --line: rgba(245, 242, 234, 0.12); --gold: #f2b32c; --gold-deep: #d99a10; --blue: #6aa5f8; --rose: #f27d98; /* ── Chrome / component tokens — DARK ── */ --nav-bg: rgba(10, 10, 13, 0.92); --proto-bg: #1d1405; --proto-ink: #f6d68a; --proto-border: rgba(246, 214, 138, 0.3); --proto-hover: rgba(246, 214, 138, 0.12); --proto-current: rgba(246, 214, 138, 0.18); --proto-next-border: rgba(246, 214, 138, 0.4); --sheet-bg: #0b0b0e; --icon-tint: rgba(242, 179, 44, 0.14); --btn-grad-start: #f8c85c; --btn-text: #241a05; --btn-shadow: rgba(242, 179, 44, 0.25); --frame-bar-tint: rgba(245, 242, 234, 0.04); --frame-dot-tint: rgba(245, 242, 234, 0.18); --frame-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); --card-shadow: none; --ph-tint: rgba(245, 242, 234, 0.045); --tr-hover-tint: rgba(245, 242, 234, 0.03); --footer-bg: var(--bg); --overlay-hover: rgba(245, 242, 234, 0.05); --input-bg: rgba(245, 242, 234, 0.05); --si-bg: #101016; --si-app-bg: rgba(245, 242, 234, 0.03); --si-app-hover-border: rgba(242, 179, 44, 0.5); --si-app-hover-bg: rgba(242, 179, 44, 0.07); --si-tab-active-bg: rgba(242, 179, 44, 0.2); --si-danger: #ef5b5b; --si-success: #4ecf9d; --si-success-bg: rgba(78, 207, 157, 0.15); } * { box-sizing: border-box; margin: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } body { background: var(--bg); color: var(--ink); font: 17px/1.65 "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; transition: background 0.2s ease-out, color 0.2s ease-out; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } /* ── Walkthrough bar (prototype-only chrome) ── A guided sequence: numbered steps joined by arrows, current step highlighted, Next pinned right. On narrow screens the step strip scrolls sideways (left-aligned — never centre an overflow strip) and auto-centres the current step. */ .proto { background: var(--proto-bg); color: var(--proto-ink); font-size: 13px; letter-spacing: 0.04em; padding: 8px 4vw; display: flex; gap: 14px; align-items: center; } .proto strong { text-transform: uppercase; font-size: 11px; letter-spacing: 0.14em; flex-shrink: 0; display: flex; align-items: center; gap: 8px; } .proto .count { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0; opacity: 0.7; border: 1px solid var(--proto-border); border-radius: 999px; padding: 1px 8px; } .proto-steps { display: flex; align-items: center; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; } .proto-steps::-webkit-scrollbar { display: none; } .proto-steps a { padding: 2px 7px; border-radius: 6px; opacity: 0.75; flex-shrink: 0; } .proto-steps a:hover { opacity: 1; background: var(--proto-hover); } .proto-steps a[aria-current] { opacity: 1; background: var(--proto-current); font-weight: 700; } .proto .sep { opacity: 0.35; flex-shrink: 0; padding: 0 3px; font-size: 11px; } .proto .next { flex-shrink: 0; font-weight: 700; border: 1px solid var(--proto-next-border); padding: 4px 13px; border-radius: 999px; } .proto .next:hover { background: var(--proto-hover); } @media (max-width: 700px) { .proto strong span.count { display: inline; } .proto strong { font-size: 0; gap: 0; } /* hide the word, keep the 1/13 count */ .proto .count { font-size: 11px; } } /* ── Nav ── */ header.nav { position: sticky; top: 0; z-index: 40; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .nav-in { max-width: var(--w); margin: 0 auto; padding: 0 4vw; height: 68px; display: flex; align-items: center; gap: 28px; } .logo { font-weight: 800; font-size: 21px; letter-spacing: -0.03em; } .logo span { color: var(--gold); } .nav-links { display: flex; gap: 4px; flex: 1; } .nav-links a { font-size: 15px; font-weight: 600; color: var(--soft); padding: 10px 14px; border-radius: 8px; transition: color 0.15s, background 0.15s; } .nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); background: var(--overlay-hover); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; height: 52px; padding: 0 26px; border-radius: var(--radius); background: linear-gradient(135deg, var(--btn-grad-start), var(--gold)); color: var(--btn-text); font-size: 16px; font-weight: 700; border: 0; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; } .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px var(--btn-shadow); } .btn-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; height: 52px; padding: 0 24px; border-radius: var(--radius); border: 1px solid var(--line); color: var(--ink); font-size: 16px; font-weight: 600; background: transparent; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .btn-quiet:hover { border-color: var(--dim); background: var(--overlay-hover); } .nav .btn { height: 44px; padding: 0 20px; font-size: 15px; } .nav-menu { display: none; } /* ── Theme toggle ── */ .theme-toggle { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s, border-color 0.15s; } .theme-toggle:hover { background: var(--overlay-hover); border-color: var(--dim); } /* Light is the default and carries NO attribute, so "currently light, offer the moon" is the base state and dark is the [data-theme="dark"] override. */ .theme-toggle .ti-sun { display: none; } .theme-toggle .ti-moon { display: block; } html[data-theme="dark"] .theme-toggle .ti-sun { display: block; } html[data-theme="dark"] .theme-toggle .ti-moon { display: none; } /* ── Sections / bands ── */ section { padding: 96px 4vw; } .in { max-width: var(--w); margin: 0 auto; } /* The cream band is a LIGHT band in BOTH themes (--cream is #f6f1e7 in dark, #eaf3ee in light). So every surface/ink token its descendants consume must resolve to light-appropriate values *inside the band*, regardless of the page theme. Re-pointing the tokens here fixes the whole subtree at once — cards, inputs, frames, tables, hovers — instead of needing a `.band-cream .x` override per component. Without this, dark theme painted #13131a cards and dark inputs onto a cream background and inherited --cream-ink onto them, so headings went dark-on-dark and vanished. */ .band-cream { background: var(--cream); color: var(--cream-ink); --ink: var(--cream-ink); --soft: var(--cream-soft); --dim: rgba(32, 28, 21, 0.58); --line: rgba(32, 28, 21, 0.12); --panel: #ffffff; --panel-2: #f7f4ec; --input-bg: #ffffff; --overlay-hover: rgba(32, 28, 21, 0.05); --card-shadow: 0 1px 2px rgba(32, 28, 21, 0.05); --frame-bar-tint: rgba(32, 28, 21, 0.04); --frame-dot-tint: rgba(32, 28, 21, 0.16); --tr-hover-tint: rgba(32, 28, 21, 0.03); --ph-tint: rgba(32, 28, 21, 0.05); --icon-tint: rgba(242, 179, 44, 0.18); /* Accents on cream must be dark-on-light in BOTH themes: the dark theme's bright gold/blue/rose measure 2.1-2.2:1 here. These values clear AA on every cream/white surface used inside the band (#f6f1e7, #eaf3ee, #fff). Buttons keep their own --btn-* tokens, which are already legible. */ --gold-deep: #8d640a; --gold: #8d640a; --blue: #466da4; --rose: #a25466; } .band-cream .eyebrow { color: var(--gold-deep); } .band-cream p, .band-cream li { color: var(--cream-soft); } .band-panel { background: var(--panel); } .eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } h1 { font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; } h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; margin-bottom: 20px; } h3 { font-size: 21px; line-height: 1.3; font-weight: 700; margin-bottom: 8px; } .lede { font-size: 20px; line-height: 1.6; color: var(--soft); max-width: 620px; } p { color: var(--soft); } .small { font-size: 15px; color: var(--dim); } /* ── Layout helpers ── */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .split-40 { display: grid; grid-template-columns: 2fr 3fr; gap: 64px; align-items: start; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; align-items: center; } /* ── Cards (earn their existence: interactive or data, never decoration) ── */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--card-shadow); } .band-cream .card { background: var(--panel); border-color: var(--line); } .card h3 { display: flex; align-items: center; gap: 12px; } .icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--icon-tint); color: var(--gold); } .icon svg { width: 20px; height: 20px; } /* ── Product frame (browser chrome around UI screenshots) ── */ .frame { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel-2); box-shadow: var(--frame-shadow); } .frame-bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--frame-bar-tint); } .frame-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--frame-dot-tint); } .frame-bar span { font-size: 12px; color: var(--dim); margin-left: 10px; font-family: "IBM Plex Mono", ui-monospace, monospace; } .frame-body { padding: 0; min-height: 300px; } .ui-placeholder { display: grid; place-items: center; min-height: 300px; text-align: center; padding: 24px; background: linear-gradient(var(--ph-tint) 1px, transparent 1px) 0 0 / 100% 44px, linear-gradient(90deg, var(--ph-tint) 1px, transparent 1px) 0 0 / 180px 100%; color: var(--dim); font-size: 14px; font-family: "IBM Plex Mono", ui-monospace, monospace; } /* ── Ecosystem hero visual — deliberately NOT a card/window. No border, no shadow, no mask/vignette gimmick either (that produced its own visible soft-grey oval, trading one seam for another) — the iframe's internal --bg is set to the exact same hex as the page --bg (see weave-embed.html), so a plain rectangle is seamless by construction. ── */ .eco-visual { position: relative; } /* While a role panel is open inside the embed, it pulls its own iframe element out to cover the full viewport (see openProduct/closeProduct in weave-embed.html) — the panel/backdrop are position:fixed *inside that iframe*, so without this they were fixed to (and clipped by) the small inline hero box instead of the real page. */ .eco-visual iframe.eco-expanded { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 200 !important; } .eco-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; } .eco-legend button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 13.5px; font-weight: 650; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .eco-legend button:hover { border-color: var(--dim); background: var(--overlay-hover); } .eco-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* ── Stats ── */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .stat b { display: block; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; } .band-cream .stat b { color: var(--cream-ink); } .stat span { font-size: 15px; color: var(--dim); } .band-cream .stat span { color: var(--cream-soft); } /* ── Quote ── */ .quote { border-left: 3px solid var(--gold); padding: 6px 0 6px 28px; max-width: 680px; } .quote p { font-size: 22px; line-height: 1.55; color: var(--ink); font-weight: 500; } .band-cream .quote p { color: var(--cream-ink); } .quote footer { margin-top: 14px; font-size: 15px; color: var(--dim); } /* ── Tables ── */ table { width: 100%; border-collapse: collapse; font-size: 16px; } th { text-align: left; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--dim); padding: 14px 16px; border-bottom: 1px solid var(--line); } td { padding: 16px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } tr:hover td { background: var(--tr-hover-tint); } .band-cream th { color: var(--cream-soft); border-color: var(--line); } .band-cream td { border-color: var(--line); } .band-cream tr:hover td { background: var(--tr-hover-tint); } /* ── Forms ── */ label { display: block; font-size: 14px; font-weight: 700; margin: 18px 0 6px; } input, select, textarea { width: 100%; height: 52px; padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--input-bg); color: var(--ink); font: 16px "Plus Jakarta Sans", sans-serif; } textarea { height: auto; padding: 14px 16px; } input::placeholder, textarea::placeholder { color: var(--dim); } /* ── Footer ── */ footer.site { border-top: 1px solid var(--line); padding: 64px 4vw 40px; background: var(--footer-bg); } .foot-in { max-width: var(--w); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 36px; } .foot-in h4 { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; } .foot-in a { display: block; padding: 7px 0; font-size: 15px; color: var(--soft); } .foot-in a:hover { color: var(--ink); } .foot-legal { max-width: var(--w); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); display: flex; gap: 20px; flex-wrap: wrap; } /* ── Reveal (fast, transform+opacity only) ── */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.22s ease-out, transform 0.22s ease-out; } .reveal.on { opacity: 1; transform: none; } /* ── Responsive ── */ @media (max-width: 900px) { section { padding: 68px 5vw; } .split, .split-40, .grid-3, .stats { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .split { gap: 40px; } .foot-in { grid-template-columns: 1fr 1fr; gap: 32px 20px; min-width: 0; } .foot-in > div { min-width: 0; } .nav-links { display: none; } .nav-signin { display: none; } /* lives in the mobile sheet instead */ /* Same for the theme toggle: logo + toggle + Book-a-demo + burger with 28px gaps came to ~435px, which pushed the layout viewport wider than 390px and made every static page shrink-to-fit on a phone. The sheet carries #themeToggleMobile, so nothing is lost. */ .nav-in > .theme-toggle { display: none; } .nav-menu { display: block; margin-left: auto; position: relative; } .nav-menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); } .nav-menu summary::-webkit-details-marker { display: none; } .nav-menu[open] summary { background: var(--overlay-hover); } .nav-menu:not([open]) .sheet { display: none; } .nav-menu .sheet { position: fixed; left: 0; right: 0; top: 68px; background: var(--sheet-bg); border-bottom: 1px solid var(--line); padding: 12px 5vw 28px; z-index: 50; } .nav-menu .sheet a { display: block; padding: 14px 4px; font-size: 17px; font-weight: 600; color: var(--soft); } .nav-menu .sheet .theme-toggle-row { display: flex; align-items: center; gap: 10px; padding: 14px 4px; } .nav-in { justify-content: space-between; } h1 { font-size: clamp(38px, 10vw, 56px); } .lede { font-size: 18px; } } /* ── Sign-in drawer ── */ .si-group { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin: 24px 0 10px; } .si-app { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--si-app-bg); color: var(--ink); font-family: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; margin-bottom: 8px; } .si-app:hover:not(.si-soon) { border-color: var(--si-app-hover-border); background: var(--si-app-hover-bg); } .si-app > span:nth-child(2) { flex: 1; min-width: 0; } .si-app b { display: block; font-size: 15px; } .si-app > span:nth-child(2) > span { display: block; font-size: 12.5px; color: var(--dim); line-height: 1.4; } .si-badge { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font: 800 13px "Plus Jakarta Sans", sans-serif; color: #241a05; } .si-go { font-size: 13px; font-weight: 700; color: var(--gold); flex-shrink: 0; } .si-soon { opacity: 0.45; cursor: default; } .si-soon .si-go { color: var(--dim); } .si-google { width: 100%; margin-top: 20px; height: 50px; border-radius: 12px; background: #fff; color: #1c1a17; border: 0; font: 700 15px "Plus Jakarta Sans", sans-serif; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; } .si-google:hover { filter: brightness(0.96); } .si-badge { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.25); } .si-tab { padding: 8px 20px; border-radius: 999px; border: 0; background: transparent; color: var(--dim); font: 700 14px "Plus Jakarta Sans", sans-serif; cursor: pointer; } .si-tab[aria-pressed="true"] { background: var(--si-tab-active-bg); color: var(--ink); } .si-link { display: block; background: none; border: 0; padding: 0; color: var(--gold); font: 600 13.5px "Plus Jakarta Sans", sans-serif; cursor: pointer; } .si-link:hover { text-decoration: underline; }