/* ======================================================================= NUMERATA — BRAND SYSTEM All colors, type, and spacing live here as CSS variables. To re-skin the site (see README "Customizing"), you should only ever need to touch the :root block below — the components underneath read from these tokens. ======================================================================= */ :root { /* ---- Color: see Brand Guidelines Sec. 5.1 for the psychology rationale ---- */ --color-ink: #0B0B0A; /* Numerata Ink — base surface, all channels */ --color-paper: #F0EEE8; /* Paper — primary text on dark */ --color-blue: #4A8CE0; /* Numerata Blue — the ONE accent, reserved for the parent; never reuse this on a product page */ --color-slate: #7D7A72; /* Slate — secondary text, captions, index labels */ --color-cream: #F6F1E7; /* Ledger Cream — reserved secondary surface */ --color-hair: #2A2825; /* hairline rules / borders on dark */ --color-dim: #64615A; /* dimmest text, footer fine print */ --color-panel: #0F0F0E; /* the "raised" band bg — philosophy + the stack */ --color-quote: #D2CEC4; /* italic pull-quotes: stat-line, card-tag */ /* ---- Per-product accents: each product owns one color. Never let the parent site use these outside of the small identifying dot. Referenced via var() everywhere a stage's color shows up (card, dot, footer link, stack background wash) — change the color once, here, and every use updates. The -rgb twins exist only because rgba() can't take a hex var() directly; keep each pair in sync if you ever change a color. ---- */ --accent-ninetyfive: #5FD191; /* mint green */ --accent-ninetyfive-rgb: 95, 209, 145; --accent-p95: #E87A60; /* coral */ --accent-p95-rgb: 232, 122, 96; --accent-lupine: #9678E8; /* violet */ --accent-lupine-rgb: 150, 120, 232; /* ---- Type: see Brand Guidelines Sec. 5.2. Swap the family names here to re-license (e.g. a custom/self-hosted font) without touching markup. ---- */ --font-serif: "Fraunces", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", "Courier New", monospace; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ---- Layout ---- */ --page-max: 1320px; --page-pad: 60px; --radius: 4px; } @media (max-width: 720px) { :root { --page-pad: 24px; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background-color: var(--color-ink); /* subtle ledger/grid texture — reinforces the quant/technical register */ background-image: radial-gradient(rgba(240, 238, 232, 0.035) 1px, transparent 1px); background-size: 28px 28px; color: var(--color-paper); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; } a { color: inherit; text-decoration: none; } .mono { font-family: var(--font-mono); } .serif { font-family: var(--font-serif); } .serif-italic { font-family: var(--font-serif); font-style: italic; } .accent { color: var(--color-blue); } .muted { color: var(--color-slate); } .eyebrow { font-size: 13px; letter-spacing: 0.18em; margin: 0 0 18px; } .cursor-blink { display: inline-block; width: 2px; height: 0.85em; margin-left: 4px; background: var(--color-paper); vertical-align: -0.1em; animation: cursor-blink 1.1s steps(1) infinite; } @keyframes cursor-blink { 0%, 70% { opacity: 1; } 70.01%, 100% { opacity: 0; } } /* ---- scroll-reveal: philosophy pillars and stack cards fade/rise into view ---- Only hidden once html.js confirms script.js is actually running (that class is set by a synchronous inline script in , before anything else). If the JS ever fails to load or throws on a live host, html.js never gets set, .reveal never goes to opacity:0, and this content just shows immediately instead of vanishing forever with no way to un-hide it. */ html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } /* Matches html.js .reveal's specificity (type + 2 classes) so this reliably wins over the opacity:0 rule above once JS adds .is-visible — a plain ".reveal.is-visible" (2 classes) is LESS specific than "html.js .reveal" (1 type + 2 classes) and silently loses, leaving revealed content stuck at opacity:0 forever despite the class being present. */ html.js .reveal.is-visible { opacity: 1; transform: translateY(0); } .stat-grid .stat.reveal:nth-child(2) { transition-delay: 0.08s; } .stat-grid .stat.reveal:nth-child(3) { transition-delay: 0.16s; } .stack-grid article.stack-stage.reveal:nth-of-type(2) { transition-delay: 0.08s; } .stack-grid article.stack-stage.reveal:nth-of-type(3) { transition-delay: 0.16s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cursor-blink { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } .stack-stage { transition: border-color 0.25s ease; } .stack-stage:hover { transform: none; } .hero::before { display: none; } .flow-pulse { display: none; } } /* ---- shared button component (used on the homepage, and reusable in any future collateral: one-pagers, decks, etc. — see Brand Guidelines Sec. 6) ---- */ .btn { display: inline-block; appearance: none; background: none; font-family: var(--font-mono); font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; } .btn-primary { background: var(--color-blue); color: var(--color-ink); } .btn-primary:hover { opacity: 0.88; } .btn-secondary { background: transparent; color: var(--color-paper); border-color: var(--color-dim); } .btn-secondary:hover { border-color: var(--color-paper); } /* ---- nav ---- */ .site-nav { max-width: var(--page-max); margin: 0 auto; padding: 18px var(--page-pad) 16px; display: flex; align-items: baseline; gap: 24px; border-bottom: 1px solid var(--color-hair); } .logo { display: flex; align-items: baseline; gap: 12px; font-size: 22px; } .logo .logo-word { font-weight: 500; } .nav-links { display: flex; gap: 28px; margin-left: auto; flex-wrap: wrap; } .nav-links a { position: relative; font-family: var(--font-mono); font-size: 14px; color: var(--color-slate); padding-bottom: 2px; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--color-blue); transition: right 0.25s ease; } .nav-links a:hover { color: var(--color-paper); } .nav-links a:hover::after { right: 0; } @media (max-width: 720px) { .site-nav { flex-wrap: wrap; } .nav-links { order: 3; width: 100%; margin: 4px 0 0; } } /* ---- hero ---- */ .hero { position: relative; max-width: var(--page-max); margin: 0 auto; padding: 90px var(--page-pad) 70px; text-align: center; --spot-x: 50%; --spot-y: 20%; } /* cursor-reactive spotlight, set via JS pointermove; inert (fixed position) if JS never runs */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(560px circle at var(--spot-x) var(--spot-y), rgba(74, 140, 224, 0.14), transparent 62%); } .hero > * { position: relative; z-index: 1; } .hero-headline { font-weight: 500; font-size: clamp(48px, 8vw, 92px); line-height: 1.05; margin: 0 0 28px; } .hero-sub { max-width: 640px; margin: 0 auto 34px; color: var(--color-slate); font-size: 19px; line-height: 1.6; } .hero-ctas { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } /* ---- philosophy ---- */ .philosophy { background: var(--color-panel); border-top: 1px solid var(--color-hair); border-bottom: 1px solid var(--color-hair); padding: 28px var(--page-pad); text-align: center; } .philosophy > .eyebrow { max-width: var(--page-max); margin: 0 auto 18px; } .stat-grid { max-width: var(--page-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .stat { border-left: 1px solid var(--color-hair); padding: 0 24px; } .stat:first-child { border-left: none; } .stat-num { display: block; font-size: 18px; font-weight: 700; margin-bottom: 6px; } .stat-title { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; margin-bottom: 8px; } .stat-line { color: var(--color-quote); font-size: 16px; line-height: 1.4; margin: 0; } @media (max-width: 900px) { .stat-grid { grid-template-columns: 1fr; gap: 28px; } .stat { border-left: none; padding: 0; border-top: 1px solid var(--color-hair); padding-top: 20px; } .stat:first-child { border-top: none; padding-top: 0; } } /* ---- the stack ---- */ /* Three pipeline stages (compute → train → deploy), connected by arrows — not three independent products. See Brand Guidelines Sec. 4.3 for why this replaced a flat 3-card "portfolio" grid. */ .stack { position: relative; background: var(--color-panel); border-top: 1px solid var(--color-hair); border-bottom: 1px solid var(--color-hair); overflow: hidden; } /* faint wash of each stage's own accent, ties the panel to the pipeline it houses. Sourced from the same --accent-*-rgb tokens as the cards below — add a fourth stage's color here too if the stack ever grows a fourth stage. */ .stack::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px circle at 12% 25%, rgba(var(--accent-lupine-rgb), 0.16), transparent 60%), radial-gradient(680px circle at 50% 85%, rgba(var(--accent-p95-rgb), 0.11), transparent 60%), radial-gradient(620px circle at 88% 25%, rgba(var(--accent-ninetyfive-rgb), 0.16), transparent 60%); } .stack-inner { position: relative; z-index: 1; max-width: var(--page-max); margin: 0 auto; padding: 108px var(--page-pad) 84px; } .stack .eyebrow { font-size: 15px; } .stack-kicker { color: #BEBAAE; font-size: 30px; font-weight: 500; margin: 12px 0 40px; } .stack-grid { display: flex; align-items: stretch; gap: 0; } .stack-arrow { position: relative; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; color: var(--color-slate); font-size: 20px; } /* small pulse traveling compute -> train -> deploy, in the parent's reserved blue */ .flow-pulse { position: absolute; top: 50%; left: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-blue); transform: translateY(-50%); opacity: 0; animation: flow-pulse 2.6s ease-in-out infinite; } .stack-arrow:nth-of-type(2) .flow-pulse { animation-delay: 0.5s; } @keyframes flow-pulse { 0% { left: 6px; opacity: 0; } 20% { opacity: 0.85; } 80% { opacity: 0.85; } 100% { left: calc(100% - 6px); opacity: 0; } } .stack-stage { flex: 1 1 0; border: 1px solid var(--color-dim); border-radius: 8px; padding: 36px 30px; display: flex; flex-direction: column; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .stack-stage:hover { transform: translateY(-4px); border-color: var(--accent, var(--color-blue)); box-shadow: 0 16px 32px -16px var(--accent, var(--color-blue)); } .stage-label { display: block; color: var(--color-blue); font-size: 15px; letter-spacing: 0.1em; margin: 0 0 6px; } .stage-note { display: block; color: var(--color-dim); font-size: 12px; margin: 0 0 18px; } .card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .dot { width: 12px; height: 12px; min-width: 12px; border-radius: 50%; background: var(--accent, #4A8CE0); display: inline-block; flex-shrink: 0; } .card-name { font-weight: 700; font-size: 24px; } .card-tag { color: var(--color-quote); font-size: 19px; margin: 0 0 12px; } .card-desc { color: var(--color-slate); font-size: 15px; line-height: 1.55; margin: 0; flex-grow: 1; } .card-link { color: var(--accent, var(--color-blue)); font-weight: 700; font-size: 14px; margin-top: 14px; display: inline-block; } .card-link:hover { opacity: 0.8; } .stack-cta { display: block; width: max-content; margin: 22px auto 0; } @media (max-width: 900px) { .stack-grid { flex-direction: column; } .stack-arrow { transform: rotate(90deg); padding: 4px 0; flex: 0 0 auto; } /* the pulse's left->right math doesn't translate cleanly once the arrow is rotated */ .flow-pulse { display: none; } } /* ---- footer ---- */ .site-footer { max-width: var(--page-max); margin: 0 auto; padding: 32px var(--page-pad) 50px; border-top: 1px solid var(--color-hair); } .index-row { color: var(--color-dim); font-size: 13px; margin: 0 0 20px; } .footer-links { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 28px; } .footer-link { font-size: 14px; display: flex; align-items: center; gap: 8px; } .footer-link:hover { color: var(--color-slate); } .footer-fine { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; margin: 0; padding-top: 20px; border-top: 1px solid var(--color-hair); } .footer-mail { color: var(--color-paper); } .footer-mail:hover { color: var(--color-blue); } /* ---- signup modal: triggered by any [data-open-modal] button, see script.js ---- */ body.modal-open { overflow: hidden; } .modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(11, 11, 10, 0.75); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .modal-overlay.is-open { opacity: 1; visibility: visible; } .modal { position: relative; width: 100%; max-width: 420px; background: var(--color-panel); border: 1px solid var(--color-hair); border-radius: 8px; padding: 36px; transform: scale(0.96) translateY(8px); transition: transform 0.2s ease; } .modal-overlay.is-open .modal { transform: scale(1) translateY(0); } .modal-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--color-slate); font-size: 24px; line-height: 1; padding: 6px; cursor: pointer; } .modal-close:hover { color: var(--color-paper); } .modal-heading { font-size: 28px; font-weight: 500; margin: 0 0 26px; } .modal-form { display: flex; flex-direction: column; transition: opacity 0.18s ease; } .modal-form[hidden] { display: none; } .modal-form.is-fading { opacity: 0; } .modal-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--color-slate); margin: 14px 0 6px; } .modal-label:first-child { margin-top: 0; } .modal-row { display: flex; gap: 12px; } .modal-field { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; } @media (max-width: 360px) { .modal-row { flex-direction: column; gap: 0; } } .modal-input { width: 100%; background: transparent; border: 1px solid var(--color-hair); border-radius: var(--radius); padding: 11px 13px; font-family: var(--font-sans); font-size: 15px; color: var(--color-paper); } .modal-input:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(74, 140, 224, 0.2); } .modal-submit { width: 100%; margin-top: 20px; text-align: center; } .modal-submit[disabled] { opacity: 0.6; cursor: default; } .modal-error { color: var(--accent-p95); font-size: 13px; text-align: center; margin: 12px 0 0; transition: opacity 0.18s ease; } .modal-error.is-fading { opacity: 0; } .modal-success { text-align: center; color: var(--color-paper); font-size: 16px; margin: 10px 0 0; transition: opacity 0.18s ease; } .modal-success.is-fading { opacity: 0; } @media (prefers-reduced-motion: reduce) { .modal-overlay, .modal, .modal-form, .modal-success, .modal-error { transition: none; } }