@import url("fonts.css"); /* ============================================================================ VERISCO — product-led company site. ---------------------------------------------------------------------------- Architecture taken from the homepages of WorkOS, Linear and Tailscale, which all run the same skeleton: deep nav -> hero with a large PRODUCT SCREENSHOT -> proof band -> feature sections alternating copy-left/visual-right on alternating light and dark grounds -> deep multi-column footer The rule that follows from it: THE PAGE IS NEAR-MONOCHROME AND THE COLOUR COMES FROM THE PRODUCT. Severity ramps, node roles and the two product brands live inside the consoles. The page itself has one signal colour, for actions and active states only. Still banned: gradients, glow, decorative shadow, and any typeface that was inherited rather than chosen. ========================================================================== */ :root { /* ── Palette. True neutrals: warm paper was part of the document read. ── */ --l-page:#FFFFFF; --l-raised:#F6F7F8; --l-sunken:#EEEFF1; --l-ink:#0A0A0B; --l-ink-2:#52565C; --l-ink-3:#82878E; --l-rule:#E4E6E9; --l-rule-2:#D2D5DA; --l-signal:#A8102A; /* default: crimson. Overridden by [data-accent]. */ --d-page:#0A0A0B; --d-raised:#131416; --d-sunken:#08080A; --d-ink:#F5F6F7; --d-ink-2:#A0A5AC; --d-ink-3:#6B7076; --d-rule:#232529; --d-rule-2:#33363B; --d-signal:#FF5C71; /* Product brands. Used INSIDE consoles and on product markers only. */ --shield:#4C8DFF; --alertio:#8B9BFF; /* Severity — Alertio's measured ladder. Console-only, so always the dark ramp: a console is a dark surface whatever the page theme is. */ --sev-critical:#FF4D64; --sev-high:#FF8A3D; --sev-medium:#FFCE3A; --sev-low:#57A0FF; --sev-info:#8C98AC; --ok:#3ECF8E; --warn:#E8B84B; --stop:#FF4D64; /* Diagram node roles */ --node-edge:#4C8DFF; --node-identity:#A78BFA; --node-control:#3ECF8E; --node-store:#F0A83E; --node-app:#A0A5AC; /* ── Semantic. Light by default; the two blocks below remap them. ── */ --page: var(--l-page); --raised: var(--l-raised); --sunken: var(--l-sunken); --ink: var(--l-ink); --ink-2: var(--l-ink-2); --ink-3: var(--l-ink-3); --rule: var(--l-rule); --rule-2: var(--l-rule-2); --signal: var(--l-signal); /* ── Type ── */ --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; --fs-100:.6875rem; --fs-200:.75rem; --fs-300:.8125rem; --fs-400:.9375rem; --fs-500:1.0625rem; --fs-600:1.25rem; --fs-700:1.75rem; --fs-800:2.5rem; --fs-900: clamp(2.75rem, 1.6rem + 4vw, 4.75rem); /* ── Spacing ── */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; --r:4px; /* a product UI has a small radius, not none */ --dur-micro:120ms; --dur-ui:200ms; --ease-out: cubic-bezier(.16,1,.3,1); --container:1200px; --prose:60ch; --header-h:60px; } :root[data-theme="dark"] { --page: var(--d-page); --raised: var(--d-raised); --sunken: var(--d-sunken); --ink: var(--d-ink); --ink-2: var(--d-ink-2); --ink-3: var(--d-ink-3); --rule: var(--d-rule); --rule-2: var(--d-rule-2); --signal: var(--d-signal); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page: var(--d-page); --raised: var(--d-raised); --sunken: var(--d-sunken); --ink: var(--d-ink); --ink-2: var(--d-ink-2); --ink-3: var(--d-ink-3); --rule: var(--d-rule); --rule-2: var(--d-rule-2); --signal: var(--d-signal); color-scheme: dark; } } /* ── ACCENT OPTIONS ────────────────────────────────────────────────────── The visitor picks one; it is stored as `verisco-accent` and applied as data-accent on before first paint, exactly like the theme. Each has a light and a dark value: a hue that reads well on white is usually too dark to read on near-black. Deliberately no plain mid-blue -- that is the default every generated site lands on. These MUST sit outside the :root block above. Nested inside it they parse as `:root :root[data-accent=...]`, a descendant selector that can never match, and the picker silently does nothing. */ :root[data-accent="ember"] { --l-signal:#D6440D; --d-signal:#FF6B2C; } :root[data-accent="forest"] { --l-signal:#0B6B45; --d-signal:#3ECF8E; } :root[data-accent="cobalt"] { --l-signal:#1B4D7A; --d-signal:#7FB2E0; } :root[data-accent="violet"] { --l-signal:#6D28D9; --d-signal:#A78BFA; } :root[data-accent="crimson"] { --l-signal:#A8102A; --d-signal:#FF5C71; } /* ============================================================================ Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + var(--sp-5)); } body { margin:0; background: var(--page); color: var(--ink-2); font: 400 var(--fs-400)/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display:block; max-width:100%; } svg { flex:none; } h1,h2,h3,h4 { margin:0; color: var(--ink); font-weight: 500; line-height:1.1; letter-spacing:-.025em; text-wrap: balance; } p { margin:0; } ul,ol { margin:0; padding:0; list-style:none; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--r); } :focus:not(:focus-visible) { outline: none; } code,kbd,samp { font-family: var(--mono); font-size:.92em; } .num, .count { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* The mono label — the site's second voice. */ .label { display:block; color: var(--ink-3); font:500 var(--fs-100)/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; } .muted { color: var(--ink-2); } .faint { color: var(--ink-3); } .prose { max-width: var(--prose); } .ink { color: var(--ink); } /* ============================================================================ Layout ========================================================================== */ .wrap { width:100%; max-width: var(--container); margin-inline:auto; padding-inline: var(--sp-6); } .section { padding-block: var(--sp-9); } .section--tight { padding-block: var(--sp-8); } /* Grounds. The rhythm comes from alternating these. */ .section--raised { background: var(--raised); } .section--dark { --page: var(--d-page); --raised: var(--d-raised); --sunken: var(--d-sunken); --ink: var(--d-ink); --ink-2: var(--d-ink-2); --ink-3: var(--d-ink-3); --rule: var(--d-rule); --rule-2: var(--d-rule-2); --signal: var(--d-signal); background: var(--page); color: var(--ink-2); } .stack { display:flex; flex-direction:column; } .stack-2{gap:var(--sp-2)} .stack-3{gap:var(--sp-3)} .stack-4{gap:var(--sp-4)} .stack-5{gap:var(--sp-5)} .stack-6{gap:var(--sp-6)} .stack-7{gap:var(--sp-7)} .row { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; } .grid { display:grid; gap:var(--sp-6); } .grid > * { min-width:0; } .grid-2 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(3,1fr); } .grid-4 { grid-template-columns: repeat(4,1fr); } .scroll-x { overflow-x:auto; min-width:0; } /* ── The alternating feature section: copy one side, visual the other ── */ .split { display:grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items:center; } /* `order` changes which grid TRACK an item lands in, not just where it is drawn -- so mirroring must swap the track sizes too, or the visual ends up in the narrow column and its console gets clipped. */ .split--mirror { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .split--mirror > :first-child { order: 2; } .split__copy { max-width: 46ch; } /* ============================================================================ Section heads ========================================================================== */ .eyebrow { display:inline-block; margin-bottom: var(--sp-4); color: var(--ink-3); font:500 var(--fs-100)/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; } .eyebrow--shield { color: var(--shield); } .eyebrow--alertio { color: var(--alertio); } .h-section { font-size: var(--fs-700); margin-bottom: var(--sp-4); max-width: 20ch; } .lead { color: var(--ink-2); font-size: var(--fs-500); line-height:1.5; max-width: 52ch; } /* ============================================================================ HERO ========================================================================== */ .hero { padding-block: var(--sp-9) var(--sp-8); } .hero__title { font-size: var(--fs-900); letter-spacing:-.035em; line-height:1.02; margin-bottom: var(--sp-5); max-width: 17ch; } .hero__lead { font-size: var(--fs-500); line-height:1.5; max-width: 52ch; margin-bottom: var(--sp-6); } .hero__visual { margin-top: var(--sp-8); } /* ============================================================================ PROOF BAND — the slot the reference sites fill with customer logos. ========================================================================== */ .proof { border-block: 1px solid var(--rule); background: var(--raised); } .proof__in { display:grid; grid-template-columns: repeat(4, 1fr); } .proof__cell { padding: var(--sp-6) var(--sp-5); border-left: 1px solid var(--rule); } .proof__cell:first-child { border-left:0; padding-left:0; } .proof__n { display:block; color: var(--ink); font:500 var(--fs-800)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing:-.02em; } .proof__k { display:block; margin-top: var(--sp-2); color: var(--ink-3); font-size: var(--fs-300); } .proof__note { display:flex; align-items:center; gap: var(--sp-2); padding-bottom: var(--sp-5); color: var(--ink-3); font: 400 var(--fs-200)/1.6 var(--mono); } .live-dot { width:6px; height:6px; border-radius:50%; background: var(--ok); flex:none; } /* ============================================================================ CONSOLE — the product, shown. This is the site's main image. Always dark: the products render dark, so a light "screenshot" would be a lie about what the software looks like. ========================================================================== */ .console { --c-page:#0B0C0E; --c-raised:#131519; --c-sunken:#08090B; --c-ink:#F2F4F6; --c-ink-2:#A8AEB6; --c-ink-3:#6E747C; --c-rule:#22252A; --c-rule-2:#31353B; --c-brand: var(--shield); /* Rebind the page tokens too, so any component dropped inside a console (the decision trace, the score factors, the kill-chain rail) inherits the console's dark surface without needing a console-specific variant. */ --page: var(--c-page); --raised: var(--c-raised); --sunken: var(--c-sunken); --ink: var(--c-ink); --ink-2: var(--c-ink-2); --ink-3: var(--c-ink-3); --rule: var(--c-rule); --rule-2: var(--c-rule-2); --signal: var(--c-brand); border:1px solid var(--c-rule-2); border-radius: var(--r); background: var(--c-page); overflow:hidden; color: var(--c-ink-2); font-size: var(--fs-200); } .console--alertio { --c-page:#0E1219; --c-raised:#151A24; --c-sunken:#0A0D13; --c-ink:#F2F5FA; --c-ink-2:#A8B3C5; --c-ink-3:#6E7C91; --c-rule:rgba(190,205,230,.13); --c-rule-2:rgba(190,205,230,.24); --c-brand: var(--alertio); --page: var(--c-page); --raised: var(--c-raised); --sunken: var(--c-sunken); --ink: var(--c-ink); --ink-2: var(--c-ink-2); --ink-3: var(--c-ink-3); --rule: var(--c-rule); --rule-2: var(--c-rule-2); --signal: var(--c-brand); } .console__bar { display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom:1px solid var(--c-rule); background: var(--c-raised); } .console__dots { display:flex; gap:6px; } .console__dots i { width:9px; height:9px; border-radius:50%; background: var(--c-rule-2); } .console__path { color: var(--c-ink-3); font: 400 var(--fs-100)/1 var(--mono); letter-spacing:.06em; } .console__body { display:grid; grid-template-columns: 168px minmax(0,1fr); min-height: 340px; } .console__body--drawer { grid-template-columns: 168px minmax(0,1fr) 244px; } .console__side { border-right:1px solid var(--c-rule); padding: var(--sp-3) 0; background: var(--c-sunken); } .console__group { padding: var(--sp-3) var(--sp-4) var(--sp-2); color: var(--c-ink-3); font:500 9px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; } .console__nav { display:flex; align-items:center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); color: var(--c-ink-2); font-size: var(--fs-200); } .console__nav.is-active { color: var(--c-ink); background: var(--c-raised); box-shadow: inset 2px 0 0 var(--c-brand); } .console__nav i { width:5px; height:5px; border-radius:1px; background: currentColor; opacity:.5; flex:none; } .console__nav b { margin-left:auto; color: var(--c-ink-3); font:400 var(--fs-100)/1 var(--mono); } .console__main { padding: var(--sp-4); min-width:0; } .console__drawer { border-left:1px solid var(--c-rule); padding: var(--sp-4); background: var(--c-sunken); } .console__h { display:flex; align-items:baseline; justify-content:space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .console__title { color: var(--c-ink); font-size: var(--fs-400); font-weight:500; } .console__meta { color: var(--c-ink-3); font:400 var(--fs-100)/1 var(--mono); } /* Console tables */ .ctable { width:100%; border-collapse:collapse; font-family: var(--mono); font-size: var(--fs-100); } .ctable th { padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom:1px solid var(--c-rule); color: var(--c-ink-3); font-weight:500; text-align:left; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; } .ctable td { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom:1px solid var(--c-rule); color: var(--c-ink-2); vertical-align:middle; white-space:nowrap; } .ctable tr:last-child td { border-bottom:0; } .ctable .strong { color: var(--c-ink); } .ctable tr.is-sel td { background: var(--c-raised); } /* Console KPI strip */ .ckpi { display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--c-rule); border:1px solid var(--c-rule); margin-bottom: var(--sp-4); } .ckpi > div { padding: var(--sp-3); background: var(--c-page); } .ckpi span { display:block; color: var(--c-ink-3); font:400 9px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; } .ckpi b { display:block; margin-top:4px; color: var(--c-ink); font:500 var(--fs-600)/1 var(--mono); font-variant-numeric: tabular-nums; } /* Severity — console-only, hue AND glyph AND label */ .sev { display:inline-flex; align-items:center; gap:5px; font:400 var(--fs-100)/1.7 var(--mono); letter-spacing:.06em; text-transform:uppercase; } .sev__glyph { font-size:8px; } .sev--critical{color:var(--sev-critical)} .sev--high{color:var(--sev-high)} .sev--medium{color:var(--sev-medium)} .sev--low{color:var(--sev-low)} .sev--info{color:var(--sev-info)} /* Decision pills inside a console */ .pill { display:inline-block; padding:1px 7px; border:1px solid currentColor; border-radius:2px; font:400 9px/1.7 var(--mono); letter-spacing:.1em; text-transform:uppercase; } .pill--allow { color: var(--ok); } .pill--step { color: var(--warn); } .pill--block { color: var(--stop); } /* ============================================================================ FIGURES — Linear labels its screenshots "Fig 0.1"; so do we. ========================================================================== */ .fig { margin:0; } .fig__cap { margin-top: var(--sp-3); color: var(--ink-3); font:400 var(--fs-200)/1.6 var(--mono); } .fig__cap b { color: var(--ink-2); font-weight:500; } /* ============================================================================ FEATURE ROWS — a bordered list, not floating cards ========================================================================== */ .rows { border-top:1px solid var(--rule); } .rows__row { display:grid; grid-template-columns: minmax(0,22ch) minmax(0,1fr); gap: var(--sp-6); padding: var(--sp-5) 0; border-bottom:1px solid var(--rule); align-items:baseline; } .rows__t { color: var(--ink); font-size: var(--fs-400); font-weight:500; } .rows__d { color: var(--ink-2); font-size: var(--fs-300); line-height:1.7; max-width:64ch; } /* Three columns divided by rules, for triads. */ .cols { display:grid; grid-template-columns: repeat(3,1fr); border-top:1px solid var(--rule); } .cols > * { min-width:0; padding: var(--sp-6) var(--sp-6) 0 0; border-left:1px solid var(--rule); padding-left: var(--sp-6); } .cols > :first-child { border-left:0; padding-left:0; } /* ============================================================================ HEADER — deep nav with a product dropdown ========================================================================== */ .header { position:sticky; top:0; z-index:60; height: var(--header-h); background: var(--page); border-bottom:1px solid var(--rule); } .header__in { display:flex; align-items:center; gap: var(--sp-6); height:100%; } .brand { display:flex; align-items:center; gap: var(--sp-2); color: var(--ink); font:600 var(--fs-300)/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; } .brand__dot { width:7px; height:7px; background: var(--signal); } .nav { display:flex; align-items:center; gap: var(--sp-1); margin-left:auto; } .nav__link { padding: var(--sp-2) var(--sp-3); border-radius: var(--r); color: var(--ink-2); font-size: var(--fs-300); } .nav__link:hover { color: var(--ink); background: var(--raised); } .nav__link[aria-current] { color: var(--ink); } /* Product dropdown */ .menu { position:relative; } .menu__btn { display:flex; align-items:center; gap:5px; padding: var(--sp-2) var(--sp-3); border:0; background:none; border-radius: var(--r); color: var(--ink-2); font: 400 var(--fs-300)/1 var(--sans); cursor:pointer; } .menu__btn:hover { color: var(--ink); background: var(--raised); } .menu__btn::after { content:""; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); } .menu__panel { position:absolute; top: calc(100% + 8px); left:0; width: 340px; padding: var(--sp-2); border:1px solid var(--rule-2); border-radius: var(--r); background: var(--page); } .menu__item { display:block; padding: var(--sp-3); border-radius: var(--r); } .menu__item:hover { background: var(--raised); } .menu__item strong { display:block; color: var(--ink); font-size: var(--fs-300); font-weight:500; } .menu__item span { display:block; margin-top:2px; color: var(--ink-3); font-size: var(--fs-200); line-height:1.5; } .header .nav__toggle { display:none; } /* ============================================================================ BUTTONS ========================================================================== */ .btn { display:inline-flex; align-items:center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border:1px solid var(--rule-2); border-radius: var(--r); background: var(--page); color: var(--ink); font:500 var(--fs-300)/1 var(--sans); cursor:pointer; white-space:nowrap; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); } .btn:hover { background: var(--raised); border-color: var(--ink-3); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--ink); border-color: var(--ink); color: var(--page); } .btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); } .btn--signal { background: var(--signal); border-color: var(--signal); color:#fff; } .btn--signal:hover { background: var(--ink); border-color: var(--ink); color: var(--page); } .btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-400); } .btn:disabled { opacity:.45; cursor:not-allowed; } .btn:disabled:active { transform:none; } .link-arrow { display:inline-flex; align-items:center; gap:6px; color: var(--ink); font-size: var(--fs-300); font-weight:500; } .link-arrow::after { content:"\2192"; transition: transform var(--dur-micro) var(--ease-out); } .link-arrow:hover::after { transform: translateX(3px); } /* ============================================================================ THEME CONTROL ========================================================================== */ .theme { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--rule); border-radius: var(--r); } .theme__opt { padding:4px 7px; border:0; border-radius:2px; background:none; color: var(--ink-3); font:400 var(--fs-100)/1 var(--mono); text-transform:uppercase; letter-spacing:.06em; cursor:pointer; } .theme__opt:hover { color: var(--ink); } .theme__opt[aria-pressed="true"] { color: var(--ink); background: var(--raised); } /* ============================================================================ FOOTER ========================================================================== */ .footer { border-top:1px solid var(--rule); padding-block: var(--sp-8) var(--sp-6); background: var(--raised); } .footer__cols { display:grid; grid-template-columns: 2fr repeat(4,1fr); gap: var(--sp-6); } .footer__h { margin-bottom: var(--sp-4); } .footer__list { display:flex; flex-direction:column; gap: var(--sp-3); } .footer__list a { color: var(--ink-2); font-size: var(--fs-300); } .footer__list a:hover { color: var(--ink); } .footer__bar { display:flex; justify-content:space-between; gap: var(--sp-4); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top:1px solid var(--rule); color: var(--ink-3); font:400 var(--fs-200)/1.6 var(--mono); flex-wrap:wrap; } /* ============================================================================ FORMS ========================================================================== */ .field { display:flex; flex-direction:column; gap: var(--sp-2); } .field > label { color: var(--ink); font-size: var(--fs-300); font-weight:500; } .field > label span { color: var(--ink-3); font-weight:400; } .input,.textarea,.select { width:100%; padding: var(--sp-3); border:1px solid var(--rule-2); border-radius: var(--r); background: var(--page); color: var(--ink); font: 400 var(--fs-300)/1.4 var(--sans); transition: border-color var(--dur-micro) var(--ease-out); } .textarea { min-height:120px; resize:vertical; line-height:1.6; } .select { appearance:none; padding-right: var(--sp-7); cursor:pointer; } .input::placeholder,.textarea::placeholder { color: var(--ink-3); } .input:focus,.textarea:focus,.select:focus { outline:none; border-color: var(--ink); } .select-wrap { position:relative; } .select-wrap::after { content:""; position:absolute; right: var(--sp-4); top:50%; width:6px; height:6px; border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); pointer-events:none; } .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .alert { display:flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border:1px solid; border-radius: var(--r); font-size: var(--fs-300); line-height:1.55; } .alert svg { width:15px; height:15px; margin-top:2px; } .alert--ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); color: var(--ok); } .alert--bad { border-color: color-mix(in srgb, var(--stop) 40%, transparent); background: color-mix(in srgb, var(--stop) 7%, transparent); color: var(--stop); } .spinner { width:12px; height:12px; border:1.5px solid currentColor; border-top-color:transparent; border-radius:50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================================ CODE ========================================================================== */ .code { border:1px solid var(--rule); border-radius: var(--r); background: var(--sunken); overflow:hidden; } .code__bar { padding: var(--sp-2) var(--sp-4); border-bottom:1px solid var(--rule); background: var(--raised); } .code__label { color: var(--ink-3); font:400 var(--fs-100)/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; } .code__body { margin:0; padding: var(--sp-4); overflow-x:auto; color: var(--ink-2); font:400 var(--fs-200)/1.75 var(--mono); tab-size:2; } /* ============================================================================ Reveal ========================================================================== */ .js .reveal { opacity:0; transform: translateY(6px); } .js .reveal.is-in { opacity:1; transform:none; transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); } /* ============================================================================ Responsive ========================================================================== */ @media (max-width: 1040px) { .split { grid-template-columns: 1fr; gap: var(--sp-6); } .split--mirror > :first-child { order: 0; } .split__copy { max-width: none; } .console__body { grid-template-columns: 140px minmax(0,1fr); } .console__body--drawer { grid-template-columns: 140px minmax(0,1fr); } .console__drawer { display:none; } } @media (max-width: 940px) { :root { --fs-700:1.5rem; --fs-800:2rem; } .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } .cols { grid-template-columns: 1fr; } .cols > * { border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top: var(--sp-5); } .cols > :first-child { border-top:0; } .proof__in { grid-template-columns: repeat(2,1fr); } .proof__cell:nth-child(odd) { border-left:0; padding-left:0; } .proof__cell:nth-child(n+3) { border-top:1px solid var(--rule); } .footer__cols { grid-template-columns: repeat(3,1fr); } .header .nav__toggle { display:inline-flex; margin-left:auto; } .js .nav { display:none; } .js .nav:not([hidden]) { display:flex; } .nav { position:absolute; top: var(--header-h); left:0; right:0; margin-left:0; flex-direction:column; align-items:stretch; gap: var(--sp-2); padding: var(--sp-5) var(--sp-6); background: var(--page); border-bottom:1px solid var(--rule-2); } .menu__panel { position:static; width:auto; border:0; padding:0; } .menu__btn { display:none; } } @media (max-width: 620px) { :root { --sp-9:64px; --fs-800:1.75rem; } .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } .proof__in { grid-template-columns:1fr; } .proof__cell { border-left:0; padding-left:0; border-top:1px solid var(--rule); } .proof__cell:first-child { border-top:0; } .rows__row { grid-template-columns:1fr; gap: var(--sp-2); } .footer__cols { grid-template-columns: repeat(2,1fr); } .console__body, .console__body--drawer { grid-template-columns:1fr; } .console__side { display:none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .js .reveal { opacity:1; transform:none; } } @media print { .header,.footer,.nav,.btn,.theme { display:none; } body { background:#fff; color:#000; } } /* ============================================================================ COMPONENTS USED INSIDE CONSOLES AND ON PRODUCT PAGES These read --ink / --rule / --page, which a console rebinds, so each one works identically on the page and inside a console. ========================================================================== */ /* ── Decision trace ── */ .trace { font-family: var(--mono); font-size: var(--fs-100); } .trace__row { display:grid; grid-template-columns:14px minmax(0,1fr) auto; gap: var(--sp-2); align-items:baseline; padding: var(--sp-2) 0; border-bottom:1px solid var(--rule); } .trace__row:last-child { border-bottom:0; } .trace__mark--pass { color: var(--ok); } .trace__mark--fail { color: var(--stop); } .trace__label { color: var(--ink-2); font-family: var(--sans); font-size: var(--fs-200); line-height:1.4; } .trace__value { color: var(--ink-3); white-space:nowrap; } .trace__verdict { display:flex; justify-content:space-between; gap: var(--sp-3); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top:1px solid var(--rule-2); color: var(--ink-3); font:400 var(--fs-100)/1.6 var(--mono); } .trace__verdict strong { color: var(--ink); font-weight:500; letter-spacing:.08em; } /* ── Kill-chain rail ── */ .killchain { display:flex; gap:1px; background: var(--rule); border:1px solid var(--rule); } .kc { flex:1; min-width:0; padding: var(--sp-2) var(--sp-3); background: var(--page); } .kc__phase { display:block; color: var(--ink-3); font:500 9px/1.4 var(--mono); letter-spacing:.1em; } .kc__count { display:block; margin-top:3px; color: var(--ink-3); font:400 var(--fs-100)/1 var(--mono); } .kc--hit { background: color-mix(in srgb, var(--sev-critical) 13%, var(--page)); } .kc--hit .kc__phase { color: var(--sev-critical); } .kc--hit .kc__count { color: var(--ink-2); } /* ── Risk score factors ── */ .factors { display:flex; flex-direction:column; gap: var(--sp-3); } .factor__head { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); font-family: var(--mono); font-size: var(--fs-100); } .factor__name { color: var(--ink-2); min-width:0; } .factor__math { color: var(--ink-3); } .factor__bar { height:2px; margin-top:5px; background: var(--rule); } .factor__fill { height:100%; background: var(--signal); } /* ── Architecture diagram ── */ .arch { width:100%; height:auto; display:block; } .arch__box { fill: var(--raised); stroke: var(--rule-2); stroke-width:1; transition: stroke var(--dur-ui) var(--ease-out); } .arch__label { fill: var(--ink); font:500 13px var(--sans); } .arch__sub { fill: var(--ink-3); font:400 10px var(--mono); letter-spacing:.04em; } .arch__edge { fill:none; stroke: var(--rule-2); stroke-width:1; } .arch__arrow { fill: var(--rule-2); } .arch__node[data-role="edge"] .arch__accent { fill: var(--node-edge); } .arch__node[data-role="identity"] .arch__accent { fill: var(--node-identity); } .arch__node[data-role="control"] .arch__accent { fill: var(--node-control); } .arch__node[data-role="store"] .arch__accent { fill: var(--node-store); } .arch__node[data-role="app"] .arch__accent { fill: var(--node-app); } .arch__node[data-emphasis] .arch__box { stroke: var(--node-store); stroke-width:2; } .arch[data-active] .arch__node, .arch[data-active] .arch__leg { opacity:.26; transition: opacity var(--dur-ui) var(--ease-out); } .arch[data-active="1"] .arch__node[data-step="1"], .arch[data-active="1"] .arch__leg[data-step="1"], .arch[data-active="2"] .arch__node[data-step="2"], .arch[data-active="2"] .arch__leg[data-step="2"], .arch[data-active="3"] .arch__node[data-step="3"], .arch[data-active="3"] .arch__leg[data-step="3"], .arch[data-active="4"] .arch__node[data-step="4"], .arch[data-active="4"] .arch__leg[data-step="4"] { opacity:1; } .arch__trace { fill:none; stroke: var(--signal); stroke-width:2; stroke-dasharray:40 1400; stroke-dashoffset:40; opacity:0; } .js .arch.is-in .arch__trace { animation: trace 2.1s var(--ease-out) .3s 1 both; } @keyframes trace { 0%{opacity:0;stroke-dashoffset:40} 8%{opacity:1} 88%{opacity:1} 100%{opacity:0;stroke-dashoffset:-1400} } /* ── Walkthrough steps: rows that happen to be buttons ── */ .steps { border-top:1px solid var(--rule); } .steps__step { display:grid; grid-template-columns:3.5rem minmax(0,18ch) minmax(0,1fr); gap: var(--sp-4); width:100%; padding: var(--sp-4) 0 var(--sp-4) var(--sp-3); border:0; border-bottom:1px solid var(--rule); border-left:2px solid transparent; background:none; text-align:left; cursor:pointer; align-items:baseline; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); } .steps__step:hover { background: var(--raised); } .steps__step[aria-pressed="true"] { border-left-color: var(--signal); background: var(--raised); } :not(.js) .steps__step { cursor:default; } .steps__n { color: var(--ink-3); font:400 var(--fs-200)/1.5 var(--mono); } .steps__step[aria-pressed="true"] .steps__n { color: var(--signal); } .steps__t { display:block; color: var(--ink); font-size: var(--fs-400); font-weight:500; line-height:1.4; } .steps__d { display:block; color: var(--ink-2); font-size: var(--fs-300); line-height:1.65; } /* ── Tabs ── */ .tabs__list { display:none; gap: var(--sp-5); border-bottom:1px solid var(--rule); margin-bottom: var(--sp-6); overflow-x:auto; } .js .tabs__list { display:flex; } .tabs__tab { flex:none; padding: var(--sp-3) 0; margin-bottom:-1px; border:0; border-bottom:2px solid transparent; background:none; color: var(--ink-3); font:500 var(--fs-300)/1 var(--sans); white-space:nowrap; cursor:pointer; transition: color var(--dur-micro) var(--ease-out); } .tabs__tab:hover { color: var(--ink); } .tabs__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--signal); } .tabs__panel + .tabs__panel { margin-top: var(--sp-7); padding-top: var(--sp-7); border-top:1px solid var(--rule); } .js .tabs__panel + .tabs__panel { margin-top:0; padding-top:0; border-top:0; } /* ── The lab: zones and the attack chain ── */ .zones { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background: var(--rule); border:1px solid var(--rule); } .zones > * { min-width:0; } .zone { padding: var(--sp-4); background: var(--page); transition: background-color var(--dur-ui) var(--ease-out); } .zone__name { display:block; color: var(--ink); font-size: var(--fs-300); font-weight:500; margin-bottom:2px; } .zone__net { display:block; margin-bottom: var(--sp-3); color: var(--ink-3); font:400 var(--fs-100)/1.5 var(--mono); } .zone__hosts { display:flex; flex-direction:column; gap: var(--sp-2); } .zone__host { display:flex; flex-direction:column; color: var(--ink-3); font:400 var(--fs-100)/1.5 var(--mono); } .zone__host b { color: var(--ink-2); font-weight:400; font-size: var(--fs-200); } .zone.is-hot { background: color-mix(in srgb, var(--sev-critical) 12%, var(--page)); } .chain { display:flex; gap:1px; background: var(--rule); border:1px solid var(--rule); margin-bottom: var(--sp-6); } .chain__stage { flex:1; min-width:0; padding: var(--sp-3) var(--sp-2); border:0; background: var(--page); color: var(--ink-3); font-family: var(--mono); text-align:center; cursor:pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); } .chain__stage:hover { color: var(--ink); background: var(--raised); } .chain__stage.is-reached { color: var(--sev-critical); background: color-mix(in srgb, var(--sev-critical) 10%, var(--page)); } .chain__stage[aria-pressed="true"] { color: var(--sev-critical); background: color-mix(in srgb, var(--sev-critical) 20%, var(--page)); } .chain__letter { display:block; font-size: var(--fs-300); font-weight:500; } .chain__phase { display:block; margin-top:3px; font-size:9px; letter-spacing:.08em; } .stage__detail { display:grid; grid-template-columns:minmax(0,1fr) auto; gap: var(--sp-6); align-items:start; } .stage__detail > * { min-width:0; } .stage__title { font-size: var(--fs-600); margin-bottom: var(--sp-3); } .stage__what { color: var(--ink-2); line-height:1.7; max-width:56ch; } .stage__meta { display:flex; flex-direction:column; gap: var(--sp-3); min-width:160px; } .stage__row { display:flex; flex-direction:column; gap:2px; } .stage__k { color: var(--ink-3); font:500 var(--fs-100)/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; } .stage__v { color: var(--ink-2); font:400 var(--fs-200)/1.5 var(--mono); } /* ── ATT&CK coverage ── */ .attack { display:grid; grid-template-columns:repeat(14,1fr); gap:2px; max-width:440px; } .attack i { aspect-ratio:1; background: var(--raised); } .attack i[data-cov="1"] { background: color-mix(in srgb, var(--alertio) 30%, transparent); } .attack i[data-cov="2"] { background: color-mix(in srgb, var(--alertio) 60%, transparent); } .attack i[data-cov="3"] { background: var(--alertio); } /* ── Dotted-leader index ── */ .leaders { border-top:1px solid var(--rule); } .leaders li { display:flex; align-items:baseline; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom:1px solid var(--rule); font-size: var(--fs-300); } .leaders__t { color: var(--ink); } .leaders__fill { flex:1; border-bottom:1px dotted var(--rule-2); transform: translateY(-3px); } .leaders__v { color: var(--ink-3); font:400 var(--fs-200)/1 var(--mono); white-space:nowrap; } @media (max-width: 940px) { .steps__step { grid-template-columns:3rem minmax(0,1fr); gap: var(--sp-2) var(--sp-3); } .steps__d { grid-column:2; } .zones { grid-template-columns:repeat(2,1fr); } .stage__detail { grid-template-columns:1fr; } .stage__meta { flex-direction:row; flex-wrap:wrap; gap: var(--sp-5); } } @media (max-width: 620px) { .zones { grid-template-columns:1fr; } .chain { flex-wrap:wrap; } .chain__stage { flex:1 1 24%; } .killchain { flex-wrap:wrap; } .kc { flex:1 1 30%; } .attack { grid-template-columns:repeat(7,1fr); } } /* ============================================================================ PRICING — plan cards and a capability comparison table. The cards carry the shape of the offer; the table carries the substance. ========================================================================== */ /* No align-items:start -- the cards must stretch to match, or they only line up when the tiers happen to have the same number of bullet points. */ .plans { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--sp-5); } .plans > * { min-width:0; } .plan { display:flex; flex-direction:column; padding: var(--sp-6); border:1px solid var(--rule); border-radius: var(--r); background: var(--page); height:100%; } /* The recommended tier is marked by a heavier border and a badge, not by a colour fill -- a filled card reads as an advertisement. */ .plan--featured { border-color: var(--ink); } .plan__head { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); } .plan__name { color: var(--ink); font-size: var(--fs-600); font-weight:500; letter-spacing:-.02em; } .plan__badge { padding:2px 8px; border:1px solid var(--signal); border-radius:2px; color: var(--signal); font:500 var(--fs-100)/1.7 var(--mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; } .plan__for { color: var(--ink-2); font-size: var(--fs-300); line-height:1.65; margin-bottom: var(--sp-5); } .plan__price { display:flex; align-items:baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); } .plan__amount { color: var(--ink); font: 500 var(--fs-800)/1 var(--sans); letter-spacing: -.035em; } .plan__unit { color: var(--ink-3); font: 400 var(--fs-300)/1.3 var(--sans); } .plan__terms { color: var(--ink-3); font-size: var(--fs-200); line-height:1.6; margin-bottom: var(--sp-5); min-height:2.6em; } .plan__cta { margin-bottom: var(--sp-6); } .plan__cta .btn { width:100%; justify-content:center; } .plan__list { display:flex; flex-direction:column; gap: var(--sp-3); margin-top:auto; } .plan__item { display:grid; grid-template-columns:16px 1fr; gap: var(--sp-3); color: var(--ink-2); font-size: var(--fs-300); line-height:1.55; } .plan__tick { color: var(--ok); font-size: var(--fs-200); line-height:1.5; } .plan__list-h { margin-bottom: var(--sp-1); } /* ── Comparison table ── */ .cmp-wrap { overflow-x:auto; } .cmp { width:100%; border-collapse:collapse; min-width:640px; } .cmp caption { text-align:left; padding-bottom: var(--sp-4); color: var(--ink-3); font:400 var(--fs-200)/1.6 var(--mono); } .cmp th, .cmp td { padding: var(--sp-4); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; } .cmp th:first-child, .cmp td:first-child { padding-left: 0; } .cmp thead th { border-bottom:1px solid var(--rule-2); color: var(--ink); font:500 var(--fs-300)/1.4 var(--sans); white-space:nowrap; } .cmp thead th span { display:block; margin-top:2px; color: var(--ink-3); font:400 var(--fs-100)/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase; } /* A section divider inside the table body. */ .cmp tr.cmp__group td { padding-top: var(--sp-6); border-bottom:1px solid var(--rule-2); } .cmp tr.cmp__group td span { color: var(--ink-3); font:500 var(--fs-100)/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; } .cmp tbody th { color: var(--ink); font:400 var(--fs-300)/1.5 var(--sans); font-weight:400; } .cmp td { color: var(--ink-2); font-size: var(--fs-300); } .cmp td.is-yes { color: var(--ok); } .cmp td.is-no { color: var(--ink-3); } .cmp .cmp__v { font-size: var(--fs-300); color: var(--ink-2); } .cmp tbody tr:hover td, .cmp tbody tr:hover th { background: var(--raised); } /* The featured plan's column is tinted the whole way down, so the eye can follow one plan without tracking across a wall of ticks. */ .cmp th:nth-child(3), .cmp td:nth-child(3) { background: color-mix(in srgb, var(--signal) 4%, transparent); box-shadow: inset 1px 0 0 var(--rule), inset -1px 0 0 var(--rule); } .cmp thead th:nth-child(3) { box-shadow: inset 1px 0 0 var(--rule-2), inset -1px 0 0 var(--rule-2); } /* Tick and dash are drawn at a consistent size so columns read as a grid. */ .cmp td.is-yes, .cmp td.is-no { font-size: var(--fs-400); line-height:1.4; } /* The header stays put while a long comparison scrolls. */ .cmp thead th { position: sticky; top: var(--header-h); background: var(--raised); z-index: 1; } @media (max-width: 940px) { .plans { grid-template-columns:1fr; } } /* ============================================================================ APPEARANCE MENU — theme and accent, in one popover. Reuses the .menu mechanics already built for the Products dropdown rather than inventing a second popover pattern. ========================================================================== */ .appearance { width: 240px; } .appearance__group + .appearance__group { margin-top: var(--sp-5); } .appearance__h { margin-bottom: var(--sp-3); } .seg { display:flex; border:1px solid var(--rule); border-radius: var(--r); overflow:hidden; } .seg__opt { flex:1; padding: var(--sp-2) 0; border:0; border-left:1px solid var(--rule); background:none; color: var(--ink-2); font:500 var(--fs-200)/1.4 var(--sans); cursor:pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); } .seg__opt:first-child { border-left:0; } .seg__opt:hover { background: var(--raised); color: var(--ink); } .seg__opt[aria-pressed="true"] { background: var(--ink); color: var(--page); } .swatches { display:flex; gap: var(--sp-2); } .swatch { width:30px; height:30px; padding:0; border:1px solid var(--rule-2); border-radius: var(--r); background: var(--sw); cursor:pointer; position:relative; transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); } .swatch:hover { transform: translateY(-1px); border-color: var(--ink-3); } .swatch[aria-pressed="true"] { border-color: var(--ink); } /* The selected swatch gets a tick, not only a border -- colour alone is not a state indicator, and these buttons are literally colours. */ .swatch[aria-pressed="true"]::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size: var(--fs-300); line-height:1; text-shadow: 0 0 3px rgba(0,0,0,.5); } .swatch__name { position:absolute; left:-9999px; } /* The trigger shows the current accent as a small dot. */ .menu__btn--appearance { gap: var(--sp-2); } .menu__btn--appearance .brand__dot { background: var(--signal); }