/* ============================================================ ZENOS DATA - zenosdata.com site styles (LIGHT theme) ------------------------------------------------------------ Sits on top of css/base.css (the parent design system, copied verbatim). This file carries the light-page grammar from the parent's esports page plus the components zenosdata needs. Light grammar rules (see esports.css / README): - Sections: --white base, alternate #f0eff8. No grid texture on light. Only faint radial corner glows. - Labels are FULL purple on light (purple-tint washes out). - Cards: chip-border--light, fill #F6F6F6 -> #EDE8FF. - Cyan as TEXT on light uses the darkened ink #1bbfa0 (raw --cyan #54FFE0 is illegible on white). - One dark moment per page: the closing CTA band + footer. ============================================================ */ :root { --cyan-ink: #1bbfa0; /* readable cyan for light bgs */ --alt-bg: #f0eff8; /* alternating light section */ --flag: #a98600; /* pre-publish ⚑ ledger */ --zd-section-padding: clamp(4.5rem, 7vw, 7rem); /* Audience accent system. Default = purple (IP owners / brand). .t-green flips a page, section, or single element to the cyan family (AI labs side). Components reference these vars only. */ --ac-ink: var(--purple); /* text + strokes */ --ac-soft: rgba(123, 112, 251, 0.09); /* tinted fills */ --ac-ring: rgba(123, 112, 251, 0.2); /* chip borders */ --ac-ring-strong: rgba(123, 112, 251, 0.55); /* emphasised ring */ } /* AI-labs accent scope: put on for whole pages (data, labs), or on a card/column/group for element-level coding (home doors, side-by-side, FAQ groups). */ .t-green { --ac-ink: var(--cyan-ink); --ac-soft: rgba(27, 191, 160, 0.1); --ac-ring: rgba(27, 191, 160, 0.3); --ac-ring-strong: rgba(27, 191, 160, 0.65); } /* Accent-aware chip rings (base.css hardcodes purple) */ .t-green .chip-border--light::before, .t-green.chip-border--light::before, .t-green .chip-border-double--light::before, .t-green.chip-border-double--light::before { background: var(--ac-ring); } .t-green .chip-border--light:hover::before, .t-green.chip-border--light:hover::before, .t-green .chip-border-double--light:hover::before, .t-green.chip-border-double--light:hover::before { background: rgba(27, 191, 160, 0.5); } .t-green .chip-border--light::after, .t-green.chip-border--light::after, .t-green .chip-border-double--light::after, .t-green.chip-border-double--light::after { background: linear-gradient(135deg, #F6F6F6, #E5F8F2); } .t-green .chip-border--light:hover::after, .t-green.chip-border--light:hover::after, .t-green .chip-border-double--light:hover::after, .t-green.chip-border-double--light:hover::after { background: linear-gradient(135deg, #EFFAF6, #DBF5EC); } html { background: var(--white); } body { background: var(--white); color: var(--black); } /* Light scrollbar (base.css default is dark-themed) */ * { scrollbar-color: #7B70FB rgba(14, 11, 22, 0.07); } ::-webkit-scrollbar-track { background: rgba(14, 11, 22, 0.05); border-left: 1px solid rgba(123, 112, 251, 0.1); } ::-webkit-scrollbar-thumb { border-color: var(--white); } /* Selection */ ::selection { background: rgba(123, 112, 251, 0.25); } /* Inline text links (accent-aware) */ .zd-link { color: var(--ac-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; transition: text-decoration-color var(--duration-fast); } .zd-link:hover { text-decoration-color: currentColor; } /* --- Labels: full accent ink on light (purple-tint washes out) --- */ .label { color: var(--ac-ink); } /* ============================================================ Nav (light variant; width:auto links - this site has 6 items) ============================================================ */ .nav--zd .nav__link { width: auto; padding: 0.25rem 0.75rem; } .nav--zd .nav__links { gap: 0.5rem; } .nav__logo { display: inline-flex; align-items: center; gap: 0.6rem; } .nav__logo svg { height: 1.4rem; width: auto; } .nav__logo .logo-data { font-family: var(--font-heading); font-weight: 900; font-stretch: 125%; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--purple); line-height: 1; transform: translateY(1px); } @media (max-width: 991px) { .nav--zd .nav__link { padding: 0.25rem 0; } } /* ============================================================ Sections ============================================================ */ .zd-section { padding: var(--zd-section-padding) 0; background: var(--white); position: relative; } .zd-section--alt { background: var(--alt-bg); } /* faint corner glows, the only decoration light sections get */ .zd-section--glow::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 0%, rgba(123, 112, 251, 0.07) 0%, transparent 50%), radial-gradient(ellipse at 15% 100%, rgba(84, 255, 224, 0.05) 0%, transparent 45%); pointer-events: none; } .zd-section > .container { position: relative; z-index: 1; } .zd-section .section-header p { color: var(--grey); opacity: 1; } /* Section headline scale. base.css h2 clamps up to 3.5rem, which is tuned for the parent's 2-3 word headlines. This site's section heads are longer, so the whole tier comes down a notch; full display scale is reserved for the hero h1 and the closing CTA band. */ .zd-section .section-header h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); } /* Sentence-length headlines: even the reduced size reads as shouting. Apply to any h2 that is a full sentence rather than a short title. */ .h2--long { font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2.125rem) !important; max-width: 38ch; line-height: 1.18; } .section-header:has(.h2--long) { max-width: 920px; } /* Sentence-boundary line control in multi-sentence headlines. Each .hl span is one line group; breaks land after full stops, never mid-sentence (no trailing "Only" / "Under" orphans). Long sentences still wrap internally on narrow screens. */ .hl { display: block; } .h2--long:has(.hl) { max-width: none; } /* Closing line under a section's content */ .zd-kicker { margin-top: var(--space-lg); font-size: 1.0625rem; color: var(--grey); max-width: 64ch; line-height: 1.7; } .zd-kicker strong { color: var(--black); font-weight: 600; } /* one-line variant — wider cap so a short closing line doesn't wrap */ .zd-kicker--wide { max-width: 92ch; } /* ============================================================ Pre-publish flag ledger (⚑) - internal, styled to whisper ============================================================ */ .flag { color: var(--flag); font-weight: 700; cursor: help; font-size: 0.8em; vertical-align: super; line-height: 0; } /* ============================================================ Hero (full-screen, two doors) - HOME only ============================================================ */ .zd-hero { min-height: 100vh; display: flex; align-items: center; position: relative; padding: calc(var(--nav-height) + 2rem) 0 3rem; background: var(--white); overflow: hidden; } .zd-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 15%, rgba(123, 112, 251, 0.09) 0%, transparent 50%), radial-gradient(ellipse at 25% 85%, rgba(84, 255, 224, 0.06) 0%, transparent 40%); pointer-events: none; } .zd-hero .container { position: relative; z-index: 1; } .zd-hero__head { max-width: 880px; } .zd-hero__head h1 { max-width: 18ch; margin: var(--space-sm) 0 var(--space-md); } .zd-hero__sub { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: var(--grey); max-width: 56ch; line-height: 1.7; } /* Two doors */ .zd-doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-xl); } @media (max-width: 820px) { .zd-doors { grid-template-columns: 1fr; } } .zd-door { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--space-lg); min-height: 240px; cursor: pointer; } .zd-door__k { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac-ink); } .zd-door h3 { font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; } .zd-door p { font-size: 0.9875rem; color: var(--grey); line-height: 1.65; flex: 1; } .zd-door__cta { font-family: var(--font-heading); font-weight: 900; font-stretch: 125%; font-size: 0.875rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ac-ink); } .zd-door__cta::after { content: '\00a0\2192'; display: inline-block; transition: transform var(--duration-fast) var(--ease-out); } .zd-door:hover .zd-door__cta::after { transform: translateX(4px); } .zd-hero__trust { display: block; margin-top: var(--space-lg); font-size: 0.8125rem; color: var(--grey-light); letter-spacing: 0.02em; } /* ============================================================ Inner-page hero (hero-mid: NOT full-screen, NOT collapsed) ============================================================ */ .zd-hero-mid { min-height: 56vh; display: flex; align-items: center; position: relative; padding: calc(var(--nav-height) + 3rem) 0 3.5rem; background: var(--white); overflow: hidden; } .zd-hero-mid::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 10%, rgba(123, 112, 251, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 20% 90%, rgba(84, 255, 224, 0.05) 0%, transparent 40%); pointer-events: none; } .zd-hero-mid .container { position: relative; z-index: 1; } .zd-hero-mid h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3.4rem); max-width: 24ch; margin: var(--space-sm) 0 var(--space-md); } .zd-hero-mid .zd-hero__sub { max-width: 62ch; } .zd-hero-mid .zd-hero__trust { margin-top: var(--space-md); } /* hero-mid with a right-hand device panel */ .zd-hero-mid__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); align-items: center; } @media (max-width: 900px) { .zd-hero-mid__grid { grid-template-columns: 1fr; } } /* ============================================================ Pills (light content chips) ============================================================ */ .zd-pills { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: var(--space-md); } .zd-pill { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; color: var(--grey-dark); background: var(--ac-soft); padding: 0.4rem 0.8rem; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); } /* ============================================================ Stat claim (one oversized numeral + lead) ============================================================ */ .zd-claim { display: flex; gap: var(--space-lg); align-items: center; flex-wrap: wrap; margin-top: var(--space-md); } .zd-claim__num { font-family: var(--font-heading); font-size: clamp(5rem, 4rem + 5vw, 9rem); font-weight: 900; font-stretch: 125%; line-height: 0.85; color: var(--ac-ink); } .zd-claim__body { max-width: 56ch; } .zd-claim__body h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); font-weight: 900; font-stretch: 125%; text-transform: uppercase; margin-bottom: 0.5rem; } .zd-claim__body p { color: var(--grey); line-height: 1.7; font-size: 0.9875rem; } /* ============================================================ Runtime comparison (the usual way vs with ZENOS) ============================================================ */ .zd-runtime { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-lg); } @media (max-width: 700px) { .zd-runtime { grid-template-columns: 1fr; } } .zd-rcol { padding: var(--space-md) var(--space-md) var(--space-lg); } .zd-rcol h4 { font-size: 0.9375rem; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-sm); } .zd-rcol ul { display: flex; flex-direction: column; gap: 0.5rem; } .zd-rcol li { font-size: 0.9375rem; color: var(--grey); padding-left: 1.2rem; position: relative; line-height: 1.5; } .zd-rcol li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 8px; height: 8px; background: rgba(14, 11, 22, 0.18); } .zd-rcol--good h4 { color: var(--purple); } .zd-rcol--good li::before { background: var(--purple); } .zd-rcol--good.chip-border-double--light::before { background: rgba(123, 112, 251, 0.55); } /* keep the ZENOS callout purple even on accent-themed pages (.t-green would otherwise tint the chip fill green) */ .zd-rcol--good.chip-border-double--light::after, .t-green .zd-rcol--good.chip-border-double--light::after { background: linear-gradient(135deg, #F6F6F6, #EDE8FF); } .t-green .zd-rcol--good.chip-border-double--light::before { background: rgba(123, 112, 251, 0.55); } /* The "usual way" column is the muted/negative side: grey & monochrome so the purple ZENOS callout carries all the emphasis. Heading + chip ring forced to neutral grey even on accent-themed pages (e.g. .t-green tints chip rings, which we override here). */ .zd-rcol--usual h4 { color: var(--grey); } .zd-rcol--usual li { color: var(--grey-light); } .zd-rcol--usual li::before { background: rgba(14, 11, 22, 0.16); } .zd-rcol--usual.chip-border--light::before, .t-green .zd-rcol--usual.chip-border--light::before { background: rgba(14, 11, 22, 0.12); } .zd-rcol--usual.chip-border--light::after, .t-green .zd-rcol--usual.chip-border--light::after { background: linear-gradient(135deg, #f4f3f3, #ebeaea); } /* ============================================================ Table (earnings) ============================================================ */ .zd-table { width: 100%; border-collapse: collapse; margin-top: var(--space-md); background: var(--white-pure); border: 1px solid rgba(123, 112, 251, 0.18); font-size: 0.9375rem; } .zd-table th, .zd-table td { text-align: left; padding: 0.8rem 1.1rem; border-bottom: 1px solid rgba(14, 11, 22, 0.07); } .zd-table th { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ac-ink); background: var(--ac-soft); } .zd-table .r { text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.875rem; } .zd-table tr:last-child td { border-bottom: none; } .zd-note { font-size: 0.8125rem; color: var(--grey-light); margin-top: var(--space-sm); } /* ============================================================ Pull quote (researcher placeholder) ============================================================ */ .zd-quote { margin-top: var(--space-lg); padding: var(--space-sm) 0 var(--space-sm) var(--space-md); border-left: 3px solid var(--ac-ink); font-size: 1.0625rem; font-style: italic; line-height: 1.7; color: var(--grey); max-width: 60ch; } .zd-quote cite { display: block; margin-top: var(--space-xs); font-style: normal; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.75rem; color: var(--grey-light); } /* ============================================================ FAQ ============================================================ */ .zd-faq-group { font-size: 1.125rem; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ac-ink); margin: var(--space-xl) 0 var(--space-md); } .zd-faq-group:first-of-type { margin-top: var(--space-lg); } .zd-card--faq h4 { font-size: 1rem; margin-bottom: 0.45rem; } /* ============================================================ Trust logos (parent/esports relationships, framed carefully) ============================================================ */ .zd-logos { display: flex; align-items: center; gap: clamp(2.25rem, 5vw, 4.5rem); flex-wrap: wrap; margin-top: var(--space-md); } /* Logo PNGs are pre-trimmed to their visible bounding box (no baked-in canvas padding), so height = visible artwork height. Stacked/square marks (Nvidia) need a taller box to match the wordmarks' visual mass. */ .zd-logos img { height: clamp(1.625rem, 1.4rem + 0.7vw, 2.0625rem); width: auto; object-fit: contain; filter: brightness(0); opacity: 0.45; transition: opacity var(--duration-mid) var(--ease-out); } .zd-logos img.logo-tall { height: clamp(2.4rem, 2.1rem + 1vw, 3.1rem); } .zd-logos img:hover { opacity: 0.8; } /* ============================================================ Light cards (generic) ============================================================ */ .zd-card { padding: var(--space-md) var(--space-md) var(--space-lg); } .zd-card__k { display: block; font-family: var(--font-body); font-size: 0.71875rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ac-ink); margin-bottom: 0.6rem; } .zd-card h4 { margin-bottom: 0.35rem; font-size: 1.0625rem; } .zd-card p { font-size: 0.9375rem; color: var(--grey); line-height: 1.6; } /* ============================================================ Tier ladder (Home 03) - accent escalates grey -> cyan -> purple ============================================================ */ .zd-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-xl); align-items: stretch; } @media (max-width: 991px) { .zd-tiers { grid-template-columns: 1fr; } } .zd-tier { padding: var(--space-md) var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: 0.45rem; } .zd-tier__num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-light); } .zd-tier--t2 .zd-tier__num { color: var(--cyan-ink); } .zd-tier--t3 .zd-tier__num { color: var(--purple); } .zd-tier h4 { font-size: 1.125rem; font-weight: 900; font-stretch: 125%; text-transform: uppercase; } .zd-tier p { font-size: 0.9375rem; color: var(--grey); line-height: 1.6; flex: 1; } /* T3 carries the brand: stronger ring */ .zd-tier--t3.chip-border-double--light::before { background: rgba(123, 112, 251, 0.55); } .zd-tier__incl { align-self: flex-start; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--purple); background: rgba(123, 112, 251, 0.1); padding: 0.3rem 0.6rem; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } /* ============================================================ Sample beat (Home 04): video placeholder + synced state panel ============================================================ */ .zd-sample { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-md); margin-top: var(--space-xl); align-items: stretch; } @media (max-width: 900px) { .zd-sample { grid-template-columns: 1fr; } } /* dark media placeholder, chipped like parent imagery */ .zd-media-ph { position: relative; min-height: 300px; background: var(--black); display: flex; align-items: center; justify-content: center; clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px); filter: drop-shadow(0 24px 48px rgba(14, 11, 22, 0.18)); } .zd-media-ph::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(123, 112, 251, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 112, 251, 0.05) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at 50% 50%, black 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 20%, transparent 75%); } .zd-media-ph span { position: relative; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--purple-tint); text-align: center; padding: 0 1.5rem; } /* chipped live video (same device language as the dark placeholder) */ .zd-media-video { background: var(--black); clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px); filter: drop-shadow(0 24px 48px rgba(14, 11, 22, 0.18)); align-self: start; } .zd-media-video video { width: 100%; display: block; } /* stacked demo variant: ultra-wide video on top, panel below */ .zd-demo--stack { display: block; } .zd-demo--stack .zd-statepanel { margin-top: var(--space-md); max-width: 860px; } .zd-demo-note { margin-top: var(--space-sm); font-size: 0.75rem; color: var(--grey-light); } /* dark mono state readout, the "terminal" device */ .zd-statepanel { background: var(--black); color: var(--white); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.8125rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); display: flex; flex-direction: column; } .zd-statepanel__head { padding: 0.6rem 1rem; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); background: rgba(123, 112, 251, 0.12); border-bottom: 1px solid rgba(123, 112, 251, 0.25); } .zd-statepanel__r { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 1rem; border-bottom: 1px solid rgba(245, 244, 244, 0.06); } .zd-statepanel__r:last-child { border-bottom: none; } .zd-statepanel__r span:first-child { color: var(--purple-tint); } .zd-statepanel__r span:last-child { color: var(--white); text-align: right; } /* light variant — a key/value readout that sits on a light section (the dark "device" treatment reads as a random black box there). ACCENT-AWARE: colour follows the page's --ac-* tokens (purple by default, cyan on .t-green), so every table shares one concept + chip + sizing and only the accent changes per page. The border is drawn as a chamfer-following frame (host bg = border colour, ::before = the fill inset by the border width with a matching, slightly smaller chamfer) — the design system's two-layer chip technique — because an inset box-shadow is rectangular and gets sliced off by the panel's clip-path at the angled corner. */ .zd-statepanel--light { position: relative; background: var(--ac-ring); color: var(--black); padding: 1.5px; box-shadow: none; } .zd-statepanel--light::before { content: ''; position: absolute; inset: 1.5px; z-index: 0; background: linear-gradient(150deg, #ffffff, var(--ac-soft)), #ffffff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%); pointer-events: none; } .zd-statepanel--light .zd-statepanel__head, .zd-statepanel--light .zd-statepanel__r { position: relative; z-index: 1; } .zd-statepanel--light .zd-statepanel__head { color: var(--ac-ink); background: var(--ac-soft); border-bottom-color: var(--ac-ring); } .zd-statepanel--light .zd-statepanel__r { border-bottom-color: rgba(14, 11, 22, 0.07); } .zd-statepanel--light .zd-statepanel__r span:first-child { color: var(--ac-ink); } .zd-statepanel--light .zd-statepanel__r span:last-child { color: var(--black); } /* ============================================================ Capture dimension cards (Home 04) Ported from the parent AI page (.ai-dimension, css/ai.css): colour-coded chip + tags per dimension (purple / cyan / magenta-Enrich), and at wide widths a "+" divider so it reads "3 capture sources + 1 post-process layer". Inks darkened for the light theme (raw --cyan / --magenta wash out on white). ============================================================ */ :root { --magenta-ink: #a348e8; } .zd-dims { display: grid; grid-template-columns: repeat(3, 1fr) auto 1fr; gap: var(--space-md); margin-top: var(--space-md); align-items: stretch; } @media (max-width: 1100px) { .zd-dims { grid-template-columns: 1fr 1fr; } .zd-dim__plus { display: none; } } @media (max-width: 640px) { .zd-dims { grid-template-columns: 1fr; } } /* "+" divider between capture cards and the Enrichment card */ .zd-dim__plus { display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 900; font-size: 2rem; line-height: 1; color: var(--magenta-ink); opacity: 0.65; padding: 0 var(--space-xs); user-select: none; } .zd-dim { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.55rem; } .zd-dim__k { align-self: flex-start; display: inline-block; font-family: var(--font-heading); font-weight: 900; font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--purple); background: rgba(123, 112, 251, 0.14); padding: 4px 10px; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); } .zd-dim h4 { font-size: 1.1875rem; } .zd-dim p { font-size: 0.9375rem; color: var(--grey); line-height: 1.6; flex: 1; } .zd-dim__tags { display: flex; flex-wrap: wrap; gap: 5px 6px; } .zd-dim__tag { display: inline-block; padding: 4px 10px; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--purple); background: rgba(123, 112, 251, 0.12); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); } /* Cyan dimension (Input) */ .zd-dim--cyan .zd-dim__k { color: var(--cyan-ink); background: rgba(27, 191, 160, 0.13); } .zd-dim--cyan .zd-dim__tag { color: var(--cyan-ink); background: rgba(27, 191, 160, 0.11); } /* Enrichment: magenta chip + tags + a subtle magenta wash on the card fill and ring, so it reads as a different (derived) layer */ .zd-dim--enrich .zd-dim__k { color: var(--magenta-ink); background: rgba(184, 112, 251, 0.16); } .zd-dim--enrich .zd-dim__tag { color: var(--magenta-ink); background: rgba(184, 112, 251, 0.14); } .zd-dim--enrich.chip-border--light::before { background: rgba(184, 112, 251, 0.3); } .zd-dim--enrich.chip-border--light::after { background: linear-gradient(135deg, #F6F6F6, #F3E8FE); } .zd-dim__added { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.625rem; letter-spacing: 0.06em; color: var(--magenta-ink); opacity: 0.75; } /* ============================================================ Side-by-side audience columns (Home 05) ============================================================ */ .zd-sbs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-xl); } @media (max-width: 900px) { .zd-sbs { grid-template-columns: 1fr; } } .zd-sbs__col { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); } .zd-sbs__col .label { font-size: 0.75rem; letter-spacing: 0.12em; font-weight: 600; } .zd-sbs__col h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); font-weight: 900; font-stretch: 125%; text-transform: uppercase; } .zd-sbs__col ul { display: flex; flex-direction: column; gap: 0.55rem; flex: 1; } .zd-sbs__col li { font-size: 0.9375rem; color: var(--grey); line-height: 1.55; padding-left: 1.2rem; position: relative; } .zd-sbs__col li::before { content: '\25B8'; position: absolute; left: 0; color: var(--ac-ink); } .zd-sbs__jab { font-style: italic; color: var(--black); border-left: 3px solid var(--ac-ink); padding: 0.4rem 0 0.4rem 0.9rem; font-size: 0.9375rem; line-height: 1.6; } .zd-sbs__col .zd-ctas { margin-top: var(--space-sm); } /* ============================================================ How it works steps (Home 06) ============================================================ */ .zd-steps { display: flex; gap: var(--space-sm); margin-top: var(--space-xl); flex-wrap: wrap; } .zd-step { flex: 1; min-width: 165px; padding: var(--space-md); position: relative; } .zd-step__n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--ac-ink); } .zd-step h4 { margin: 0.4rem 0 0.3rem; font-size: 1rem; } .zd-step p { font-size: 0.8125rem; color: var(--grey); line-height: 1.55; } /* ============================================================ CTA rows ============================================================ */ .zd-ctas { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-lg); align-items: center; } /* Outline chipped button for light sections (from esports.css) */ .btn--outline { position: relative; color: var(--ac-ink); background: transparent !important; isolation: isolate; overflow: visible; border-radius: 0; } .btn--outline::before, .btn--outline::after { content: ''; position: absolute; transition: background var(--duration-mid) var(--ease-out); } .btn--outline::before { inset: 0; z-index: -2; background: var(--ac-ink); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); } .btn--outline::after { inset: 1.5px; z-index: -1; background: var(--white); clip-path: polygon(8.5px 0, 100% 0, 100% calc(100% - 8.5px), calc(100% - 8.5px) 100%, 0 100%, 0 8.5px); } .btn--outline:hover { color: var(--white); } .btn--outline:hover::after { background: var(--ac-ink); } .zd-section--alt .btn--outline::after { background: var(--alt-bg); } .zd-section--alt .btn--outline:hover::after { background: var(--ac-ink); } /* ============================================================ Dual CTA band (global, dark) + footer adjustments ============================================================ */ .zd-cta { padding: var(--space-2xl) 0; background: var(--black); color: var(--white); text-align: center; position: relative; overflow: hidden; } .zd-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(123, 112, 251, 0.16) 0%, transparent 60%); pointer-events: none; } .zd-cta .container { position: relative; z-index: 1; } .zd-cta h2 { margin-bottom: var(--space-xl); } .zd-cta__row { display: flex; gap: clamp(2rem, 6vw, 5rem); justify-content: center; flex-wrap: wrap; } .zd-cta__col { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); } .zd-cta__k { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple-tint); } /* This site has brand + 4 link columns (base.css assumes 3) */ .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } @media (max-width: 991px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .footer__grid { grid-template-columns: 1fr; } } .footer__logo { display: inline-flex; align-items: center; gap: 0.6rem; } .footer__logo svg { height: 1.3rem; width: auto; } .footer__logo svg .cls-1 { fill: var(--white); } .footer__logo .logo-data { font-family: var(--font-heading); font-weight: 900; font-stretch: 125%; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--purple-tint); line-height: 1; transform: translateY(1px); } /* ============================================================ Reveal-on-scroll (JS adds .is-in; no-JS keeps content visible) ============================================================ */ html.js .rv { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } html.js .rv.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1; transform: none; transition: none; } } /* ════════════════════════════════════════════════════════════ 2026 REFRESH — flair pass ------------------------------------------------------------ Adds the brand's own unused range to the home page: a geometric mark system, diagrammatic sections, a dark dramatic moment, and the oversized-numeral / mono-data type moments base.css supports but the page never used. Nothing new to the brand — chip corners, Archivo caps, JetBrains Mono, the purple/cyan/magenta accents. ════════════════════════════════════════════════════════════ */ /* --- Geometric mark system (angular, square-cap, currentColor) --- */ .zd-ico { width: 1.75rem; height: 1.75rem; flex-shrink: 0; color: inherit; /* take colour from the tile/wrapper, so hover (white-on-fill) + per-tier colours actually reach the glyph */ stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; overflow: visible; } /* chipped accent tile the glyph sits inside */ .zd-ico-tile { width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; background: var(--ac-soft); color: var(--ac-ink); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); flex-shrink: 0; transition: background var(--duration-mid) var(--ease-out), transform var(--duration-mid) var(--ease-out); } .zd-ico-tile .zd-ico { width: 1.6rem; height: 1.6rem; } /* ============================================================ Hero triplet strip — the imitation-learning triplet, in mono. Faithful to the pitch ("the (state, action, next-state) triplet"), used as a graphic device under the doors. ============================================================ */ .zd-triplet { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-top: var(--space-lg); } .zd-triplet__chip { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-dark); padding: 0.5rem 0.9rem; position: relative; isolation: isolate; } .zd-triplet__chip::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(123, 112, 251, 0.22); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); } .zd-triplet__chip::after { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: var(--white-pure); clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); } .zd-triplet__chip b { color: var(--purple); font-weight: 700; } .zd-triplet__chip--next b { color: var(--cyan-ink); } .zd-triplet__arrow { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--grey-light); font-size: 0.9rem; } .zd-triplet__tail { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--grey-light); margin-left: 0.25rem; } @media (max-width: 520px) { .zd-triplet__tail { width: 100%; margin-left: 0; } } /* ============================================================ Oversized-numeral claim, paired with icon cards (Why ZENOS) ============================================================ */ .zd-why { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--space-2xl); margin-top: var(--space-xl); align-items: start; } @media (max-width: 900px) { .zd-why { grid-template-columns: 1fr; gap: var(--space-xl); } } .zd-why__num { font-family: var(--font-heading); font-weight: 900; font-stretch: 125%; font-size: clamp(5.5rem, 4rem + 9vw, 10rem); line-height: 0.82; color: var(--purple); letter-spacing: -0.02em; } .zd-why__num small { display: block; font-size: clamp(1rem, 0.85rem + 0.7vw, 1.375rem); font-stretch: 125%; letter-spacing: 0.01em; text-transform: uppercase; color: var(--black); margin-top: var(--space-xs); max-width: 16ch; line-height: 1.1; } .zd-why__lead { font-size: 1.0625rem; color: var(--grey); line-height: 1.7; margin-top: var(--space-md); max-width: 40ch; } .zd-why__cards { display: grid; gap: var(--space-md); } .zd-why__card { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md); } .zd-why__card h4 { font-size: 1.0625rem; margin-bottom: 0.3rem; } .zd-why__card p { font-size: 0.9375rem; color: var(--grey); line-height: 1.6; } /* ============================================================ Tier ladder → dark dramatic moment (Home 03) Reuses base.css .section--dark grammar (grid texture + glow). ============================================================ */ .zd-section--dark { background: var(--black); color: var(--white); } /* when two dark sections stack, a faint seam keeps them legible as two beats rather than one continuous slab */ .zd-section--dark + .zd-section--dark { border-top: 1px solid rgba(123, 112, 251, 0.22); } .zd-section--dark .section-header h2, .zd-section--dark .section-header h1, .zd-section--dark .section-header .hl { color: var(--white); } .zd-section--dark .section-header p { color: var(--purple-tint); opacity: 0.85; } .zd-section--dark .label { color: var(--purple-tint); } .zd-section--dark .zd-kicker { color: var(--purple-tint); opacity: 0.9; } .zd-section--dark .zd-kicker strong { color: var(--white); } .zd-section--dark .zd-quote { color: var(--purple-tint); border-left-color: var(--cyan); } .zd-section--dark .zd-quote cite { color: var(--grey-light); } /* sample explorer, on a dark stage: meta strip / stats / note restyled so the chips read as keycaps on black rather than light-page chips */ .zd-section--dark .zsv__title { color: var(--white); } .zd-section--dark .zsv__subtitle { color: var(--purple-tint); } .zd-section--dark .zsv__tag { color: var(--purple-tint); background: rgba(123, 112, 251, 0.12); border-color: rgba(123, 112, 251, 0.3); } .zd-section--dark .zsv__stat { background: rgba(255, 255, 255, 0.04); border-color: rgba(123, 112, 251, 0.3); color: rgba(245, 244, 244, 0.85); } .zd-section--dark .zsv__stat b { color: var(--cyan); } .zd-section--dark .zsv__note { color: rgba(245, 244, 244, 0.5); } .zd-section--dark .zsv__unit { filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.5)); } /* game-selector bar on a dark stage */ .zd-section--dark .zsv__games-k { color: var(--purple-tint); } .zd-section--dark .zsv__game { color: rgba(245, 244, 244, 0.7); background: rgba(123, 112, 251, 0.12); } .zd-section--dark .zsv__game:hover { color: var(--white); } .zd-section--dark .zsv__game.is-active { background: var(--cyan); color: var(--black); } .zd-section--dark .zsv__game.is-ready .zsv__game-dot { background: var(--cyan); } .zd-section--dark .zsv__game.is-active .zsv__game-dot { background: var(--black); } /* viewer-section dressing on a dark stage */ .zd-section--dark .zd-demo-note { color: rgba(245, 244, 244, 0.5); } .zd-section--dark .zd-pill { color: var(--purple-tint); background: rgba(123, 112, 251, 0.14); } .zd-section--dark::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(123, 112, 251, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 112, 251, 0.05) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; mask-image: radial-gradient(ellipse at 50% 40%, black 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 10%, transparent 75%); } .zd-section--dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 8%, rgba(123, 112, 251, 0.16) 0%, transparent 52%), radial-gradient(ellipse at 12% 95%, rgba(84, 255, 224, 0.07) 0%, transparent 45%); pointer-events: none; } /* The ladder: three rungs escalating in height + signal */ .zd-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-xl); align-items: end; } @media (max-width: 860px) { .zd-ladder { grid-template-columns: 1fr; } } .zd-rung { display: flex; flex-direction: column; gap: 0.7rem; padding: var(--space-md) var(--space-md) var(--space-lg); min-height: 232px; justify-content: flex-end; } .zd-rung--2 { min-height: 270px; } .zd-rung--3 { min-height: 320px; } @media (max-width: 860px) { .zd-rung, .zd-rung--2, .zd-rung--3 { min-height: 0; } } /* signal meter — fills 1/3, 2/3, 3/3 across the tiers */ .zd-meter { display: flex; gap: 5px; } .zd-meter span { flex: 1; height: 6px; background: rgba(14, 11, 22, 0.1); } .zd-meter span.on { background: currentColor; } .zd-rung__num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; } .zd-rung__icon { color: var(--grey-light); margin-bottom: 0.1rem; } .zd-rung__icon .zd-ico { width: 2.1rem; height: 2.1rem; } .zd-rung h4 { font-size: 1.1875rem; font-weight: 900; font-stretch: 125%; text-transform: uppercase; color: var(--black); } .zd-rung p { font-size: 0.9375rem; color: var(--grey); opacity: 1; line-height: 1.55; } .zd-rung__incl { align-self: flex-start; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--cyan); background: rgba(84, 255, 224, 0.1); padding: 0.3rem 0.6rem; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } /* Tier 1 — grey/raw (light card) */ .zd-rung--1 { color: var(--grey); } .zd-rung--1 .zd-rung__num { color: var(--grey); } .zd-rung--1 .zd-rung__icon { color: var(--grey-light); } /* Tier 2 — cyan/inferred (light card, cyan-ink for legibility) */ .zd-rung--2 { color: var(--cyan-ink); } .zd-rung--2 .zd-rung__num { color: var(--cyan-ink); } .zd-rung--2 .zd-rung__icon { color: var(--cyan-ink); } .zd-rung--2.chip-border--light::before { background: rgba(27, 191, 160, 0.4); } /* tiers 1 & 2 need a visible card body on white (the default --light fill is near-transparent); paint a solid white-pure fill behind the content */ .zd-rung--1.chip-border--light::after, .zd-rung--2.chip-border--light::after { background: var(--white-pure); } .zd-rung--1.chip-border--light::before { background: rgba(123, 112, 251, 0.28); } /* Tier 3 — solid-purple hero / ground truth (carries the brand) */ .zd-rung--3 { color: #fff; background: linear-gradient(150deg, var(--purple), #5247c4); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); } .zd-rung--3 .zd-rung__num { color: #fff; } .zd-rung--3 .zd-rung__icon { color: #fff; } .zd-rung--3 h4 { color: #fff; } .zd-rung--3 p { color: rgba(255, 255, 255, 0.86); opacity: 1; } .zd-rung--3 .zd-meter span { background: rgba(255, 255, 255, 0.22); } .zd-rung--3 .zd-rung__incl { color: #fff; background: rgba(255, 255, 255, 0.16); } /* ============================================================ Capture dimension cards — add an icon row (Home 04) ============================================================ */ .zd-dim__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } .zd-dim__icon { color: var(--ac-ink); } .zd-dim--cyan .zd-dim__icon { color: var(--cyan-ink); } .zd-dim--enrich .zd-dim__icon { color: var(--magenta-ink); } /* ============================================================ Side-by-side audience columns — icon header + center splitter ============================================================ */ .zd-sbs { position: relative; } .zd-sbs__head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: 0.2rem; } .zd-sbs__head .label { margin: 0; } .zd-sbs__col li::before { content: '\25B8'; } /* ============================================================ Process pipeline (Home 06) — replaces flat .zd-steps ============================================================ */ .zd-flow { display: flex; margin-top: var(--space-xl); flex-wrap: wrap; gap: var(--space-md) 0; } .zd-flow__step { flex: 1 1 0; min-width: 160px; display: flex; flex-direction: column; gap: 0.55rem; padding-right: var(--space-lg); } .zd-flow__icon { position: relative; display: flex; align-items: center; } .zd-flow__icon::after { content: ''; position: absolute; left: 3.4rem; right: calc(-1 * var(--space-lg) + 0.6rem); top: 50%; height: 0; border-top: 1.5px dashed var(--ac-ring); } .zd-flow__step:last-child { padding-right: 0; } .zd-flow__step:last-child .zd-flow__icon::after { display: none; } @media (max-width: 720px) { .zd-flow__step { flex: 1 1 45%; padding-right: var(--space-md); } .zd-flow__icon::after { display: none; } } .zd-flow__n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--ac-ink); } .zd-flow__step h4 { font-size: 1.0625rem; } .zd-flow__step p { font-size: 0.875rem; color: var(--grey); line-height: 1.55; } .zd-flow__step:last-child { --ac-ink: var(--cyan-ink); --ac-soft: rgba(27,191,160,0.1); } /* ============================================================ Governance grid — icon-tile cards + one wide anchor (Home 07) ============================================================ */ .zd-gov { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-xl); } @media (max-width: 860px) { .zd-gov { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .zd-gov { grid-template-columns: 1fr; } } .zd-gov__item { padding: var(--space-md) var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: 0.75rem; } .zd-gov__item h4 { font-size: 1.0625rem; } .zd-gov__item p { font-size: 0.9375rem; color: var(--grey); line-height: 1.6; } /* one inverted focal card — the core principle, solid purple fill. Filled shape with no border, so clip-path is the brand-correct chamfer here (the chip ::after pseudo wouldn't composite a dark fill reliably). */ .zd-gov__item--anchor { background: linear-gradient(145deg, #5247c4 0%, #2c2668 100%); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); color: var(--white); } .zd-gov__item--anchor h4 { color: var(--white); } .zd-gov__item--anchor p { color: rgba(255, 255, 255, 0.86); } .zd-gov__item--anchor .zd-ico-tile { background: rgba(255, 255, 255, 0.16); color: var(--white); } .zd-gov__item--anchor .zd-ico { color: var(--white); } /* card hover lifts the icon tile (light cards only) */ .chip-border--light:hover .zd-ico-tile, .chip-border-double--light:hover .zd-ico-tile { background: var(--ac-ink); color: var(--white); } /* Nav CTA: precise label centering. base.css used display:block with a 1.6 line-height, which left the all-caps label sitting ~1px high in the tall line-box and reading as off-centre next to the chip. Flex-centre with line-height:1 so the cap line-box centres deterministically. The ~9rem desktop width + chip stay as-is. */ .nav__cta { display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding-top: 0.85rem; padding-bottom: 0.85rem; }