/* ceggesta.com — marketing site styles. * * All color/type/spacing/radius values come from the committed brand kit * (assets/ceggesta-tokens.css, drift-guarded against tokens/ in CI). The site * pins dark mode (data-theme="dark" on ) per the CEG-92 spec; the tokens * remain dual-mode, so a light variant is a one-attribute change later. * Register: restrained, editorial, technical. Emerald is the only chroma; * status colors carry data meaning only. No gradients, no glow. */ :root { --site-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; --site-max: 1120px; --site-pad: 24px; --site-hairline-accent: color-mix(in srgb, var(--ceg-action-default) 38%, transparent); --site-accent-soft: color-mix(in srgb, var(--ceg-action-default) 12%, transparent); } :root[data-theme="dark"] { color-scheme: dark; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-padding-top: 88px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--ceg-surface-page); color: var(--ceg-text-primary); font-family: var(--ceg-font-sans); font-size: 16px; line-height: 1.6; letter-spacing: var(--ceg-tracking-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } p { margin: 0; } h1, h2, h3 { margin: 0; font-weight: 600; } ::selection { background: var(--ceg-action-default); color: var(--ceg-text-on-accent); } :focus-visible { outline: 2px solid var(--ceg-action-default); outline-offset: 2px; border-radius: var(--ceg-radius-sm); } .container { max-width: var(--site-max); margin-inline: auto; padding-inline: var(--site-pad); } .accent { color: var(--ceg-action-default); } .mono { font-family: var(--site-font-mono); } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--ceg-surface-raised); border: 1px solid var(--ceg-border-subtle); border-radius: var(--ceg-radius-md); font-size: 14px; } .skip-link:focus-visible { left: 12px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--ceg-radius-md); font-family: var(--ceg-font-sans); font-size: 15px; font-weight: 600; letter-spacing: var(--ceg-tracking-body); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn-primary { background: var(--ceg-action-default); color: var(--ceg-text-on-accent); } .btn-primary:hover { background: var(--ceg-action-hover); } .btn-ghost { background: transparent; color: var(--ceg-text-primary); border-color: var(--ceg-border-strong); } .btn-ghost:hover { border-color: var(--ceg-action-default); color: var(--ceg-action-default); } .btn-compact { min-height: 40px; padding: 8px 16px; font-size: 14px; } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ceg-surface-page) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ceg-border-subtle); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; } .wordmark { font-size: 20px; font-weight: 600; letter-spacing: var(--ceg-tracking-h3); color: var(--ceg-text-primary); } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a:not(.btn) { font-size: 14px; font-weight: 500; color: var(--ceg-text-secondary); transition: color 0.15s ease; } .nav-links a:not(.btn):hover { color: var(--ceg-text-primary); } .nav-right { display: flex; align-items: center; gap: 12px; } .nav-toggle { display: none; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--ceg-border-subtle); border-radius: var(--ceg-radius-md); color: var(--ceg-text-primary); cursor: pointer; } .nav-toggle svg { margin: auto; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } /* Small screens: the demo button must stay visible next to the toggle (it never collapses into the menu — CEG-92), so the whole row slims down to fit 360px. */ @media (max-width: 480px) { .nav .container { padding-inline: 14px; } .nav-inner { gap: 8px; min-height: 56px; } .wordmark { font-size: 17px; } .nav-right { gap: 8px; } .nav-right .btn-compact { font-size: 12px; padding: 8px 10px; letter-spacing: 0; } } @media (max-width: 1000px) { .nav-links { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--ceg-surface-page); border-bottom: 1px solid var(--ceg-border-subtle); padding: 8px var(--site-pad) 16px; } .nav-links.open { display: flex; } .nav-links a:not(.btn) { padding: 12px 4px; font-size: 15px; border-bottom: 1px solid var(--ceg-border-subtle); } .nav-links a:last-child { border-bottom: none; } .nav-toggle { display: inline-flex; } } /* ---------- hero ---------- */ .hero { padding: clamp(56px, 9vw, 112px) 0 clamp(48px, 7vw, 88px); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .eyebrow { font-family: var(--site-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ceg-text-brand); } .hero h1 { margin-top: 20px; font-size: clamp(2.5rem, 5.4vw, 4.15rem); font-weight: 500; line-height: 1.06; letter-spacing: var(--ceg-tracking-display); } .hero-sub { margin-top: 24px; max-width: 58ch; font-size: 1.125rem; line-height: 1.65; color: var(--ceg-text-secondary); } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .hero-ctas .btn { font-size: 14px; padding: 11px 16px; } .hero-micro { margin-top: 20px; font-family: var(--site-font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ceg-text-muted); } /* Product vignette (pure HTML/CSS — deliberately not a screenshot) */ .vignette-wrap { min-width: 0; } .vignette { background: var(--ceg-surface-default); border: 1px solid var(--ceg-border-subtle); border-radius: var(--ceg-radius-lg); padding: 24px; } .vignette-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--ceg-border-subtle); } .vignette-title { font-family: var(--site-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ceg-text-secondary); } .vignette-mark { width: 16px; height: 16px; } .vignette-insight { margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--ceg-text-primary); } .vignette-figure { color: var(--ceg-status-warning); font-weight: 500; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .chip { font-family: var(--site-font-mono); font-size: 11px; color: var(--ceg-text-secondary); background: var(--ceg-surface-panel); border: 1px solid var(--ceg-border-subtle); border-radius: var(--ceg-radius-sm); padding: 3px 8px; } .spark { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ceg-border-subtle); } .spark span { flex: 1; background: var(--ceg-action-default); opacity: 0.45; border-radius: var(--ceg-radius-sm) var(--ceg-radius-sm) 0 0; } .spark span:last-child { opacity: 1; } .vignette-caption { margin-top: 12px; font-family: var(--site-font-mono); font-size: 11px; color: var(--ceg-text-muted); } @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .vignette-wrap { max-width: 480px; } } /* ---------- statement bands ---------- */ .band { background: var(--ceg-surface-default); border-top: 1px solid var(--ceg-border-subtle); border-bottom: 1px solid var(--ceg-border-subtle); padding: clamp(64px, 9vw, 108px) 0; text-align: center; } .band-line { margin-inline: auto; max-width: 24ch; font-size: clamp(1.75rem, 3.8vw, 2.85rem); font-weight: 500; line-height: 1.2; letter-spacing: var(--ceg-tracking-h1); } .band-sub { margin: 20px auto 0; max-width: 62ch; font-size: 1rem; color: var(--ceg-text-muted); } /* ---------- sections ---------- */ .section { padding: clamp(72px, 9vw, 128px) 0; } .sec-label { display: flex; align-items: center; gap: 12px; font-family: var(--site-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ceg-text-brand); } .sec-label::before { content: ""; width: 8px; height: 8px; background: var(--ceg-action-default); border-radius: var(--ceg-radius-sm); } .section h2 { margin-top: 20px; max-width: 26ch; font-size: clamp(1.65rem, 3.1vw, 2.35rem); font-weight: 600; line-height: 1.18; letter-spacing: var(--ceg-tracking-h2); } .sec-lede { margin-top: 14px; max-width: 60ch; font-size: 1.0625rem; color: var(--ceg-text-muted); } /* cards */ .cards-3, .cards-2x2 { display: grid; gap: 20px; margin-top: 48px; } .cards-3 { grid-template-columns: repeat(3, 1fr); } .cards-2x2 { grid-template-columns: repeat(2, 1fr); } .card { background: var(--ceg-surface-default); border: 1px solid var(--ceg-border-subtle); border-radius: var(--ceg-radius-md); padding: 28px; transition: transform 0.15s ease, border-color 0.15s ease; } .card:hover { transform: translateY(-2px); border-color: var(--ceg-border-strong); } .card h3 { font-size: 1rem; font-weight: 600; letter-spacing: var(--ceg-tracking-h3); } .card p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.6; color: var(--ceg-text-secondary); } .card--elevated { background: var(--ceg-surface-raised); border-color: var(--site-hairline-accent); } .card--elevated:hover { border-color: var(--ceg-action-default); } .card--elevated h3 { color: var(--ceg-text-brand); } @media (max-width: 860px) { .cards-3, .cards-2x2 { grid-template-columns: 1fr; } } /* pull-quote */ .pullquote { padding: clamp(24px, 5vw, 64px) 0 0; text-align: center; } .pullquote blockquote { margin: clamp(40px, 6vw, 72px) auto 0; max-width: 20ch; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 500; line-height: 1.12; letter-spacing: var(--ceg-tracking-display); } .pullquote-support { margin: 24px auto 0; max-width: 55ch; font-size: 1rem; color: var(--ceg-text-muted); } /* steps (how it works) */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; } .step-num { font-family: var(--site-font-mono); font-size: 13px; font-weight: 500; color: var(--ceg-text-brand); } .step h3 { margin-top: 10px; font-size: 1.0625rem; } .step p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.6; color: var(--ceg-text-secondary); } .diff { margin: 16px 0 0; padding: 14px 16px; background: var(--ceg-surface-panel); border: 1px solid var(--ceg-border-subtle); border-radius: var(--ceg-radius-md); font-family: var(--site-font-mono); font-size: 13px; line-height: 1.7; overflow-x: auto; } .diff .del { color: var(--ceg-status-danger); white-space: pre; } .diff .add { color: var(--ceg-status-success); white-space: pre; } .footnote { margin-top: 40px; font-size: 0.875rem; color: var(--ceg-text-muted); } @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } } /* trust band */ .trust-band { background: var(--ceg-surface-default); border-top: 1px solid var(--ceg-border-subtle); border-bottom: 1px solid var(--ceg-border-subtle); } .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; margin-top: 48px; } .t-item h3 { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; font-weight: 600; } .t-item h3::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--ceg-action-default); border-radius: var(--ceg-radius-sm); } .t-item p { margin-top: 8px; font-size: 0.875rem; line-height: 1.6; color: var(--ceg-text-secondary); } .trust-link { display: inline-block; margin-top: 40px; font-size: 0.9375rem; font-weight: 500; color: var(--ceg-text-brand); } .trust-link:hover { color: var(--ceg-action-emphasis); } @media (max-width: 960px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .trust-grid { grid-template-columns: 1fr; } } /* demo strip */ .demo-strip { padding: clamp(64px, 8vw, 104px) 0; } .demo-card { max-width: 680px; margin-inline: auto; padding: clamp(36px, 5vw, 56px); text-align: center; background: var(--ceg-surface-default); border: 1px solid var(--site-hairline-accent); border-radius: var(--ceg-radius-lg); } .demo-card h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 600; letter-spacing: var(--ceg-tracking-h2); } .demo-card .btn { margin-top: 24px; } .demo-micro { margin-top: 16px; font-family: var(--site-font-mono); font-size: 12px; color: var(--ceg-text-muted); } /* ---------- design partners ---------- */ .partner-intro { margin-top: 14px; max-width: 58ch; font-size: 1.0625rem; color: var(--ceg-text-secondary); } .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; } .col-block { background: var(--ceg-surface-default); border: 1px solid var(--ceg-border-subtle); border-radius: var(--ceg-radius-md); padding: 28px; } .col-block h3 { font-family: var(--site-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ceg-text-secondary); } .col-block ul { margin: 18px 0 0; padding: 0; list-style: none; } .col-block li { position: relative; padding-left: 22px; margin-top: 12px; font-size: 0.9375rem; line-height: 1.55; color: var(--ceg-text-secondary); } .col-block li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: var(--ceg-radius-sm); } .list-get li::before { background: var(--ceg-action-default); } .list-ask li::before { border: 1px solid var(--ceg-border-strong); } @media (max-width: 860px) { .cols-2 { grid-template-columns: 1fr; } } /* form */ .form-card { max-width: 760px; margin-top: 48px; padding: clamp(24px, 4vw, 40px); background: var(--ceg-surface-default); border: 1px solid var(--ceg-border-subtle); border-radius: var(--ceg-radius-lg); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field { display: flex; flex-direction: column; gap: 6px; } .field-full { grid-column: 1 / -1; } .field label { font-size: 13px; font-weight: 500; color: var(--ceg-text-secondary); } .field input, .field select, .field textarea { width: 100%; padding: 11px 14px; background: var(--ceg-surface-panel); color: var(--ceg-text-primary); border: 1px solid var(--ceg-border-subtle); border-radius: var(--ceg-radius-md); font-family: var(--ceg-font-sans); font-size: 15px; letter-spacing: var(--ceg-tracking-body); transition: border-color 0.15s ease; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ceg-border-strong); } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ceg-action-default); outline-offset: 0; border-color: var(--ceg-action-default); } .field textarea { resize: vertical; min-height: 110px; } .field-err { display: none; font-size: 12px; color: var(--ceg-status-danger); } .field.invalid input, .field.invalid select { border-color: var(--ceg-status-danger); } .field.invalid .field-err { display: block; } /* Honeypot — visually removed, never perceivable by real users */ .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 28px; } .form-status { font-size: 14px; color: var(--ceg-text-secondary); } .form-status.error { color: var(--ceg-status-danger); } .form-status a { color: var(--ceg-text-brand); font-weight: 500; } .form-success { font-size: 1.0625rem; color: var(--ceg-text-primary); padding: 8px 0; } .form-micro { margin-top: 20px; font-family: var(--site-font-mono); font-size: 12px; color: var(--ceg-text-muted); } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } /* ---------- footer ---------- */ .footer { border-top: 1px solid var(--ceg-border-subtle); padding: 48px 0 40px; } .footer-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-tag { font-size: 14px; color: var(--ceg-text-secondary); } .footer-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; font-size: 14px; } .footer-links a { color: var(--ceg-text-secondary); transition: color 0.15s ease; } .footer-links a:hover { color: var(--ceg-text-primary); } .footer-coming-soon { color: var(--ceg-text-secondary); cursor: default; } .tag-soon { font-family: var(--site-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ceg-text-muted); border: 1px solid var(--ceg-border-subtle); border-radius: var(--ceg-radius-sm); padding: 1px 5px; margin-left: 6px; vertical-align: 1px; } .footer-small { margin-top: 28px; font-size: 12px; color: var(--ceg-text-muted); } /* ---------- document pages (/trust /privacy /terms) ---------- */ .doc { max-width: 720px; margin-inline: auto; padding: clamp(56px, 8vw, 96px) 0; } .doc h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: var(--ceg-tracking-h1); } .doc-intro { margin-top: 20px; font-size: 1.125rem; line-height: 1.65; color: var(--ceg-text-secondary); } .doc-meta { margin-top: 16px; font-family: var(--site-font-mono); font-size: 12px; color: var(--ceg-text-muted); } .doc h2 { margin-top: 48px; font-size: 1.25rem; font-weight: 600; letter-spacing: var(--ceg-tracking-h3); } .doc h2 + p, .doc p + p { margin-top: 14px; } .doc p { font-size: 0.9688rem; line-height: 1.7; color: var(--ceg-text-secondary); } .doc ul { margin: 14px 0 0; padding-left: 22px; } .doc li { font-size: 0.9688rem; line-height: 1.7; color: var(--ceg-text-secondary); margin-top: 6px; } .doc a { color: var(--ceg-text-brand); } .doc a:hover { color: var(--ceg-action-emphasis); } /* Operator placeholders — impossible to publish unnoticed */ .placeholder { font-family: var(--site-font-mono); font-size: 0.85em; color: var(--ceg-status-warning); background: var(--ceg-status-warning-surface); border-radius: var(--ceg-radius-sm); padding: 1px 6px; } .faq-q { margin-top: 32px; font-size: 1.0625rem; font-weight: 600; } .faq-a { margin-top: 8px; } /* ---------- 404 ---------- */ .notfound { text-align: center; padding: clamp(96px, 16vw, 192px) 0; } .notfound-code { font-family: var(--site-font-mono); font-size: 13px; letter-spacing: 0.14em; color: var(--ceg-text-brand); } .notfound h1 { margin-top: 16px; font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 500; letter-spacing: var(--ceg-tracking-h1); } .notfound p { margin-top: 16px; color: var(--ceg-text-secondary); } .notfound .btn { margin-top: 32px; } /* ---------- product pages (/product/*) ---------- */ .feat-hero { padding: clamp(56px, 8vw, 96px) 0 clamp(24px, 4vw, 40px); } .feat-hero h1 { margin-top: 20px; max-width: 22ch; font-size: clamp(2.1rem, 4.4vw, 3.3rem); font-weight: 500; line-height: 1.08; letter-spacing: var(--ceg-tracking-h1); } .feat-intro { margin-top: 20px; max-width: 62ch; font-size: 1.125rem; line-height: 1.65; color: var(--ceg-text-secondary); } .feat-vignette { padding: clamp(24px, 4vw, 40px) 0; } .feat-vignette .vignette { max-width: 640px; } /* Findings vignette rows */ .f-row { padding: 14px 0; border-bottom: 1px solid var(--ceg-border-subtle); } .f-row:last-of-type { border-bottom: none; } .f-title { font-size: 14px; line-height: 1.5; color: var(--ceg-text-primary); } /* Velocity vignette bars */ .vrow { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .vlabel { flex: none; width: 88px; font-family: var(--site-font-mono); font-size: 11px; color: var(--ceg-text-secondary); } .vtrack { flex: 1; height: 8px; background: var(--ceg-surface-panel); border-radius: var(--ceg-radius-sm); overflow: hidden; } .vfill { display: block; height: 100%; background: var(--ceg-action-default); border-radius: var(--ceg-radius-sm); } .vdelta { flex: none; width: 44px; font-family: var(--site-font-mono); font-size: 11px; text-align: right; } .vdelta.up { color: var(--ceg-status-success); } .vdelta.flat { color: var(--ceg-text-muted); } .vdelta.down { color: var(--ceg-status-warning); } /* Overlap vignette heatmap */ .hm-wrap { display: flex; gap: 10px; margin-top: 16px; } .hm-y { display: flex; flex-direction: column; justify-content: space-around; font-family: var(--site-font-mono); font-size: 10px; color: var(--ceg-text-muted); text-align: right; } .hm-main { flex: 1; min-width: 0; } .hm { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; } .hm span { aspect-ratio: 2 / 1; background: var(--ceg-action-default); border-radius: var(--ceg-radius-sm); } .hm-x { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 6px; font-family: var(--site-font-mono); font-size: 10px; color: var(--ceg-text-muted); text-align: center; } /* Guidance vignette source rows */ .src-row { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--ceg-border-subtle); } .src-row:last-of-type { border-bottom: none; } .src-row::before { content: ""; flex: none; align-self: center; width: 8px; height: 8px; background: var(--ceg-action-default); border-radius: var(--ceg-radius-sm); } .src-row.pending::before { background: transparent; border: 1px solid var(--ceg-border-strong); } .src-title { font-size: 14px; color: var(--ceg-text-primary); } .src-meta { margin-left: auto; font-family: var(--site-font-mono); font-size: 11px; color: var(--ceg-text-muted); white-space: nowrap; } .src-meta.active { color: var(--ceg-text-brand); } .src-meta.pend { color: var(--ceg-status-warning); } .src-flow { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ceg-border-subtle); font-family: var(--site-font-mono); font-size: 11px; color: var(--ceg-text-secondary); } /* "Under the hood" strip */ .hood { background: var(--ceg-surface-default); border-top: 1px solid var(--ceg-border-subtle); border-bottom: 1px solid var(--ceg-border-subtle); padding: clamp(28px, 4vw, 44px) 0; } .hood-label { font-family: var(--site-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ceg-text-muted); } .hood ul { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 14px 0 0; padding: 0; list-style: none; } .hood li { display: flex; align-items: center; gap: 8px; font-family: var(--site-font-mono); font-size: 12px; color: var(--ceg-text-secondary); } .hood li::before { content: ""; width: 6px; height: 6px; background: var(--ceg-action-default); border-radius: var(--ceg-radius-sm); } /* Clickable feature cards (product hub) */ a.card { display: block; } a.card .card-go { display: inline-block; margin-top: 14px; font-size: 0.875rem; font-weight: 500; color: var(--ceg-text-brand); } a.card:hover { border-color: var(--ceg-action-default); } /* Prev/next pager on feature pages */ .pager { display: flex; justify-content: space-between; gap: 16px; padding: 28px 0 0; margin-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--ceg-border-subtle); } .pager a { font-size: 0.9375rem; font-weight: 500; color: var(--ceg-text-secondary); } .pager a:hover { color: var(--ceg-text-brand); } /* Homepage explore row (section 02 -> product pages) */ .explore-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-top: 28px; } .explore-label { font-family: var(--site-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ceg-text-muted); } .explore-row a { font-size: 0.9375rem; font-weight: 500; color: var(--ceg-text-brand); } .explore-row a:hover { color: var(--ceg-action-emphasis); } /* ---------- reveal motion ---------- */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.55s ease, transform 0.55s ease; transition-delay: var(--d, 0ms); } .reveal.in { opacity: 1; transform: none; } }