/* * Component language: skip link, header/nav, buttons, hero, cards, status tags, flow * diagrams, CTA band, forms, notices, footer. Depends on tokens.css + layout.css. */ /* ── Skip link ─────────────────────────────────────────────────────── */ .skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; padding: var(--s-3) var(--s-4); background: var(--ink); color: #fff; font-weight: var(--fw-semibold); border-radius: var(--radius); } .skip-link:focus { top: var(--s-2); color: #fff; } /* ── Header / navigation ───────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--card); border-bottom: 1px solid var(--mist); } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 4rem; } .wordmark { display: inline-flex; align-items: center; min-height: var(--target); font-size: 1.125rem; font-weight: var(--fw-bold); letter-spacing: 0.2em; color: var(--ink); text-decoration: none; } .wordmark:hover { color: var(--ink); text-decoration: none; } .wordmark__accent { color: var(--teal); } .nav-toggle { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--target); min-width: var(--target); padding: 0 var(--s-3); font: inherit; font-weight: var(--fw-semibold); color: var(--ink); background: transparent; border: 1px solid var(--control-border); border-radius: var(--radius); cursor: pointer; } .nav-toggle__icon { width: 18px; height: 12px; border-block: 2px solid currentColor; position: relative; } .nav-toggle__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; } .site-nav { flex-basis: 100%; padding-bottom: var(--s-4); } /* Without JS the nav is always shown (stacked on small screens). main.js adds .js to and only then is the small-screen menu collapsible. */ .js .site-nav[data-collapsed="true"] { display: none; } .site-nav__list { list-style: none; margin: 0; padding: 0; } .site-nav__list a { display: flex; align-items: center; min-height: var(--target); padding: 0 var(--s-2); color: var(--ink); font-weight: var(--fw-semibold); text-decoration: none; border-radius: var(--radius); } .site-nav__list a:hover { color: var(--teal-deep); background: var(--teal-pale); } .site-nav__list a[aria-current="page"] { color: var(--teal-deep); box-shadow: inset 0 -3px 0 var(--teal); } .site-nav__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); } @media (min-width: 900px) { .nav-toggle { display: none; } .site-nav, .js .site-nav[data-collapsed="true"] { display: flex; flex-basis: auto; align-items: center; gap: var(--s-4); padding-bottom: 0; } .site-nav__list { display: flex; gap: var(--s-1); } .site-nav__actions { margin-top: 0; } } /* ── Buttons ───────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--target); padding: 0 var(--s-5); font: inherit; font-weight: var(--fw-bold); line-height: 1.2; text-align: center; text-decoration: none; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; } .btn:hover { text-decoration: none; } .btn--primary { background: var(--teal); border-color: var(--teal); color: #fff; } .btn--primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; } .btn--secondary { background: transparent; border-color: var(--teal); color: var(--teal); } .btn--secondary:hover { background: var(--teal-pale); color: var(--teal-deep); } /* On dark bands: amber button with ink text (7.09:1). */ .btn--accent { background: var(--amber); border-color: var(--amber); color: var(--ink); } .btn--accent:hover { background: #f0ad4a; border-color: #f0ad4a; color: var(--ink); } .btn--on-dark { background: transparent; border-color: var(--text-on-dark); color: #fff; } .btn--on-dark:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); } /* ── Hero ──────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 15% 0%, var(--teal) 0%, var(--teal-deep) 46%, var(--ink) 100%); color: var(--text-on-dark); padding-block: var(--s-7) var(--s-6); } .hero h1 { color: #fff; max-width: 18ch; } .hero__sub { font-size: var(--fs-lead); font-weight: var(--fw-semibold); color: #bfe4e0; margin-bottom: var(--s-4); } .hero__lede { font-size: var(--fs-lead); color: var(--text-on-dark); max-width: 60ch; } .hero__note { margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--text-on-dark-soft); } .hero--compact { padding-block: var(--s-6) var(--s-5); } .hero--compact h1 { max-width: 24ch; } @media (min-width: 900px) { .hero { padding-block: var(--s-8) var(--s-7); } .hero--compact { padding-block: var(--s-7) var(--s-6); } } /* ── Cards ─────────────────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--mist); border-radius: var(--radius); padding: var(--s-5); height: 100%; } .card--rule { border-top: 3px solid var(--teal); } .card--preview { border-top: 3px solid var(--tag-preview-fg); } .card--roadmap { border-top: 3px dashed var(--tag-roadmap-fg); background: #fbfbfd; } .card h3 { margin-bottom: var(--s-2); } .card p { margin-bottom: var(--s-3); } .card p:last-child { margin-bottom: 0; } .card__benefit { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--teal-deep); } .card__benefit span { font-weight: var(--fw-regular); color: var(--text-muted); } .card__qualifier { font-size: var(--fs-sm); color: var(--tag-preview-fg); font-weight: var(--fw-semibold); } .section--dark .card { background: rgba(255, 255, 255, 0.04); border-color: rgba(216, 237, 233, 0.18); color: var(--text-on-dark); } /* ── Status tags (text label always present; colour is never the only signal) ── */ .tag { display: inline-block; margin-bottom: var(--s-3); padding: 0.15rem 0.55rem; font-size: 0.75rem; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; border-radius: 3px; border: 1px solid transparent; } .tag--available { background: var(--tag-available-bg); color: var(--tag-available-fg); border-color: #b9dcc0; } .tag--preview { background: var(--tag-preview-bg); color: var(--tag-preview-fg); border-color: #efcf9f; } .tag--roadmap { background: var(--tag-roadmap-bg); color: var(--tag-roadmap-fg); border-style: dashed; border-color: #9a9ab3; } .tier-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; margin: var(--s-4) 0 0; padding: 0; font-size: var(--fs-sm); } .tier-legend li { display: flex; align-items: baseline; gap: var(--s-2); } .tier-legend .tag { margin: 0; } /* ── Challenge list ────────────────────────────────────────────────── */ .problem { border-left: 3px solid var(--amber); padding: var(--s-1) 0 var(--s-1) var(--s-4); } .problem h3 { font-size: 1.05rem; margin-bottom: var(--s-1); } .problem p { margin: 0; } /* ── Operating model (ordered list rendered as a vertical flow) ───── */ .model { list-style: none; margin: 0; padding: 0; counter-reset: model; max-width: 40rem; } .model__step { position: relative; counter-increment: model; padding: var(--s-3) var(--s-4) var(--s-3) 3.5rem; background: var(--card); border: 1px solid var(--mist); border-radius: var(--radius); } .model__step::before { content: counter(model, decimal-leading-zero); position: absolute; left: var(--s-4); top: var(--s-3); font-size: 0.8125rem; font-weight: var(--fw-bold); letter-spacing: 0.1em; color: var(--teal-deep); } .model__step + .model__step { margin-top: var(--s-5); } .model__step + .model__step::after { content: ""; position: absolute; left: 1.6rem; top: calc(-1 * var(--s-5)); height: var(--s-5); border-left: 2px solid var(--teal); } .model__name { display: block; font-weight: var(--fw-bold); color: var(--ink); } .model__desc { display: block; font-size: var(--fs-sm); color: var(--text-muted); } /* ── SVG diagrams ──────────────────────────────────────────────────── */ .diagram { margin: var(--s-5) 0 0; } .diagram svg { display: block; width: 100%; height: auto; font-family: var(--font); } /* Each diagram ships a horizontal and a vertical variant; exactly one is displayed (the hidden one is display:none, so it is also removed from the accessibility tree). */ .diagram .diagram__v { max-width: 22rem; margin-inline: auto; } .diagram .diagram__h { display: none; } @media (min-width: 900px) { .diagram .diagram__h { display: block; } .diagram .diagram__v { display: none; } } .diagram figcaption { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-muted); } .section--dark .diagram figcaption { color: var(--text-on-dark-soft); } .dg-node { fill: var(--card); stroke: var(--mist); stroke-width: 1.5; } .dg-node--preview { stroke: var(--tag-preview-fg); } .dg-node--roadmap { fill: #fbfbfd; stroke: var(--tag-roadmap-fg); stroke-dasharray: 6 4; } .dg-rule { fill: var(--teal); } .dg-name { fill: var(--ink); font-size: 19px; font-weight: 800; } .dg-desc { fill: var(--text-muted); font-size: 13px; } .dg-arrow { stroke: var(--teal); stroke-width: 2; fill: none; } .dg-arrowhead { fill: var(--teal); } .dg-tag--available rect { fill: var(--tag-available-bg); } .dg-tag--available text { fill: var(--tag-available-fg); } .dg-tag--preview rect { fill: var(--tag-preview-bg); } .dg-tag--preview text { fill: var(--tag-preview-fg); } .dg-tag--roadmap rect { fill: var(--tag-roadmap-bg); } .dg-tag--roadmap text { fill: var(--tag-roadmap-fg); } .dg-tag text { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; } /* ── Callouts / notices ────────────────────────────────────────────── */ .callout { background: var(--card); border: 1px solid var(--mist); border-left: 4px solid var(--teal); border-radius: var(--radius); padding: var(--s-4) var(--s-5); } .callout > :last-child { margin-bottom: 0; } .callout--preview { border-left-color: var(--tag-preview-fg); } .notice { border: 2px solid var(--tag-preview-fg); background: var(--tag-preview-bg); color: var(--ink); border-radius: var(--radius); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); } .notice > :last-child { margin-bottom: 0; } .notice__title { display: block; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--fs-sm); margin-bottom: var(--s-1); } /* Visible marker for copy awaiting approved content. */ .placeholder { background: #fff6e6; border: 1px dashed var(--tag-preview-fg); color: #6b3f06; padding: 0 0.3em; border-radius: 3px; font-weight: var(--fw-semibold); } .section--dark .placeholder, .site-footer .placeholder { background: transparent; border-color: var(--amber); color: var(--amber); } /* ── Prose (legal, about) ──────────────────────────────────────────── */ .prose { max-width: 46rem; } .prose h2 { font-size: 1.4rem; margin-top: var(--s-6); } .prose h2:first-child { margin-top: 0; } .prose li + li { margin-top: var(--s-2); } /* ── CTA band ──────────────────────────────────────────────────────── */ .cta-band { background: var(--ink); color: var(--text-on-dark); padding-block: var(--s-6); } .cta-band__inner { display: grid; gap: var(--s-5); align-items: center; } .cta-band__line { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -0.01em; color: #fff; max-width: none; } .cta-band__accent { display: block; color: var(--amber); } .cta-band .btn-row { margin-top: 0; } @media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1fr auto; } } /* ── Forms ─────────────────────────────────────────────────────────── */ .form { background: var(--card); border: 1px solid var(--mist); border-radius: var(--radius-lg); padding: var(--s-5); box-shadow: var(--shadow); } .form__row { display: grid; gap: var(--s-4); } @media (min-width: 600px) { .form__row--2 { grid-template-columns: 1fr 1fr; } } .field { margin-bottom: var(--s-5); } .field__label, .fieldset__legend { display: block; margin-bottom: var(--s-1); font-weight: var(--fw-bold); color: var(--ink); } .field__req, .field__opt { font-weight: var(--fw-regular); font-size: var(--fs-sm); color: var(--text-muted); } .field__hint { display: block; margin-bottom: var(--s-2); font-size: var(--fs-sm); color: var(--text-muted); } .field__error { display: block; margin-top: var(--s-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--error); } .field__error:empty { display: none; } .input, .select, .textarea { display: block; width: 100%; min-height: var(--target); padding: 0.55rem 0.75rem; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--control-border); border-radius: var(--radius); } .textarea { min-height: 8rem; resize: vertical; } .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--focus-light); outline-offset: 1px; border-color: var(--teal-deep); } .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border: 2px solid var(--error); } .fieldset { margin: 0 0 var(--s-5); padding: 0; border: 0; } .fieldset[aria-invalid="true"] .choice { border-color: var(--error); } .choices { display: grid; gap: var(--s-2); } @media (min-width: 600px) { .choices { grid-template-columns: 1fr 1fr; } } .choice { display: flex; align-items: center; gap: var(--s-3); min-height: var(--target); padding: var(--s-2) var(--s-3); border: 1px solid var(--control-border); border-radius: var(--radius); cursor: pointer; } .choice input, .consent input { width: 1.25rem; height: 1.25rem; flex: none; margin: 0; accent-color: var(--teal); } .consent { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--target); padding: var(--s-3); border: 1px solid var(--control-border); border-radius: var(--radius); cursor: pointer; } .consent input { margin-top: 0.2rem; } .counter { display: block; margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--text-muted); text-align: right; } /* Honeypot: off-screen, not display:none (some bots skip hidden inputs). */ .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .error-summary { border: 3px solid var(--error); background: var(--error-bg); border-radius: var(--radius); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); } .error-summary h2 { font-size: 1.15rem; color: var(--error); margin-bottom: var(--s-2); } .error-summary ul { margin: 0; padding-left: 1.2rem; } .error-summary a { color: var(--error); font-weight: var(--fw-semibold); } .form-status { border-radius: var(--radius); margin-bottom: var(--s-5); } .form-status:empty { display: none; } .form-status__panel { padding: var(--s-4) var(--s-5); border: 2px solid var(--teal); background: var(--teal-pale); border-radius: var(--radius); } .form-status__panel--disabled { border-color: var(--tag-preview-fg); background: var(--tag-preview-bg); } .form-status__panel--failure { border-color: var(--error); background: var(--error-bg); } .form-status__panel h2 { font-size: 1.15rem; margin-bottom: var(--s-2); } .form-status__panel p:last-child { margin-bottom: 0; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); } .form[aria-busy="true"] .btn--primary { opacity: 0.7; } .aside-list { padding-left: 1.2rem; } /* ── Footer ────────────────────────────────────────────────────────── */ .site-footer { background: var(--ink); color: var(--text-on-dark); padding-block: var(--s-6) var(--s-5); font-size: var(--fs-sm); } .site-footer a { color: var(--text-on-dark); } .site-footer a:hover { color: #fff; } .site-footer :focus-visible { outline-color: var(--focus-dark); } .site-footer__grid { display: grid; gap: var(--s-5); } .site-footer__brand { font-weight: var(--fw-bold); letter-spacing: 0.2em; color: var(--amber); margin-bottom: var(--s-2); } .site-footer__heading { font-size: 0.75rem; font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-on-dark-soft); margin-bottom: var(--s-2); } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li a { display: inline-flex; align-items: center; min-height: var(--target); } .site-footer__legal { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid rgba(216, 237, 233, 0.18); color: var(--text-on-dark-soft); } @media (min-width: 600px) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } } /* ── Small utilities used by page markup ───────────────────────────── */ .lead-text { font-size: var(--fs-lead); } .h3-size { font-size: var(--fs-h3); } .hero .on-dark-strong { color: #fff; } /* ── Marketing components ──────────────────────────────────────────── */ .hero__grid { display: grid; gap: var(--s-6); align-items: center; } .hero-map { display: none; margin: 0; } .hero-map svg { display: block; width: 100%; height: auto; font-family: var(--font); } @media (min-width: 900px) { .hero__grid { grid-template-columns: 1.15fr 0.85fr; } .hero-map { display: block; } } .hm-node { fill: rgba(255, 255, 255, 0.06); stroke: rgba(216, 237, 233, 0.35); stroke-width: 1.5; } .hm-step { fill: var(--amber); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; } .hm-name { fill: #ffffff; font-size: 20px; font-weight: 800; } .hm-desc { fill: #bfe4e0; font-size: 14px; } .hm-arrow { stroke: var(--amber); stroke-width: 2; } .hm-arrowhead { fill: var(--amber); } .glance-band { padding-block: var(--s-5); } .glance { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; } .glance li { display: flex; flex-direction: column; gap: var(--s-1); border-left: 3px solid var(--teal); padding-left: var(--s-3); } .glance__value { font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem); font-weight: var(--fw-bold); line-height: 1; color: var(--teal-deep); } .glance__label { font-size: var(--fs-sm); color: var(--text); } @media (min-width: 900px) { .glance { grid-template-columns: repeat(4, 1fr); } } .timeline { list-style: none; margin: var(--s-5) 0 var(--s-4); padding: 0; border-left: 2px solid var(--teal); } .timeline li { position: relative; padding: 0 0 var(--s-4) var(--s-5); } .timeline li::before { content: ""; position: absolute; left: -7px; top: 0.35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--teal); } .timeline li:last-child::before { background: var(--error); border-color: var(--error); } .timeline__when { display: block; font-size: 0.8125rem; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-deep); } .timeline__what { display: block; } .source-note { font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; } .section--dark .source-note { color: var(--text-on-dark-soft); } .callout--feature { border-left-width: 4px; box-shadow: var(--shadow); padding: var(--s-5); } .check-list { list-style: none; padding: 0; } .check-list li { position: relative; padding-left: 1.75rem; } .check-list li + li { margin-top: var(--s-3); } .check-list li::before { content: ""; position: absolute; left: 0.2rem; top: 0.35rem; width: 0.5rem; height: 0.85rem; border: solid var(--teal); border-width: 0 3px 3px 0; transform: rotate(45deg); } .roadmap-note { margin-top: var(--s-4); color: var(--tag-roadmap-fg); } .compare-wrap { overflow-x: auto; } .compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--mist); border-radius: var(--radius); font-size: var(--fs-sm); } .compare th, .compare td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--mist); width: 50%; } .compare tr:last-child td { border-bottom: 0; } .compare thead th { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .compare thead th:last-child { color: var(--teal-deep); } .compare td:last-child { background: var(--teal-pale); color: var(--ink); font-weight: var(--fw-semibold); } @media (min-width: 600px) { .compare { font-size: var(--fs-base); } } .signal-list { list-style: none; margin: 0; padding: 0; } .signal-list li { display: grid; gap: var(--s-1); padding: var(--s-3) 0; border-bottom: 1px solid rgba(216, 237, 233, 0.18); } .signal-list strong { color: #fff; } .preview-inline { font-style: normal; font-weight: var(--fw-bold); color: var(--amber); white-space: nowrap; } .link-on-dark { color: #fff; } .link-on-dark:hover { color: var(--amber); } .pullquote { margin: 0; padding: var(--s-5); background: var(--ink); border-left: 4px solid var(--amber); border-radius: var(--radius); } .pullquote p { margin: 0; font-size: var(--fs-lead); font-weight: var(--fw-bold); line-height: 1.4; color: #fff; } .steps { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; } .steps li { background: var(--card); border: 1px solid var(--mist); border-radius: var(--radius); padding: var(--s-5); } .steps__num { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--s-3); border-radius: 50%; background: var(--teal); color: #fff; font-weight: var(--fw-bold); } .steps h3 { margin-bottom: var(--s-2); } .steps p { margin: 0; } @media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } } /* Light-surface variant of the four-signals list (AI governance page). */ .signal-list--light li { border-bottom-color: var(--mist); } .signal-list--light strong { color: var(--ink); } .preview-inline--light { color: var(--tag-preview-fg); }