/* ========================================================================== choiro.css — the shared stylesheet for the three Choiro sites (choiro.com, choirocode.com, choirocore.com). One palette across all three: data-brand on the element selects the mark and name, never a different palette. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Shared tokens — light theme (default) with the choirocode accent -------------------------------------------------------------------------- */ :root { /* color — neutral surfaces, ink, borders */ --ch-color-bg-canvas: #ffffff; --ch-color-bg-subtle: #f4f4f5; --ch-color-bg-surface: #fafafa; --ch-color-bg-raised: #ffffff; --ch-color-bg-inverse: #18181b; --ch-color-fg-primary: #18181b; --ch-color-fg-secondary: #3f3f46; --ch-color-fg-muted: #6b6b73; --ch-color-fg-inverse: #fafafa; --ch-color-fg-onAccent: #ffffff; --ch-color-border-default: #e4e4e7; --ch-color-border-strong: #71717a; /* color — status */ --ch-color-success-fg: #047857; --ch-color-success-bg: #ecfdf5; --ch-color-success-border: #a7f3d0; --ch-color-warn-fg: #b45309; --ch-color-warn-bg: #fffbeb; --ch-color-warn-border: #fcd34d; --ch-color-danger-fg: #b91c1c; --ch-color-danger-bg: #fef2f2; --ch-color-danger-border: #fca5a5; --ch-color-info-fg: #0369a1; --ch-color-info-bg: #f0f9ff; --ch-color-info-border: #bae6fd; /* color — the default brand accent is choirocode */ --ch-color-accent-primary: #047857; --ch-color-accent-hover: #065f46; --ch-color-accent-strong: #065f46; --ch-color-accent-subtle: #ecfdf5; --ch-color-accent-fg: #047857; --ch-color-focus-ring: #059669; /* elevation */ --ch-shadow-1: 0 1px 2px 0 rgba(9, 9, 11, 0.06), 0 1px 3px 0 rgba(9, 9, 11, 0.08); --ch-shadow-2: 0 4px 6px -1px rgba(9, 9, 11, 0.08), 0 2px 4px -2px rgba(9, 9, 11, 0.06); --ch-shadow-3: 0 10px 15px -3px rgba(9, 9, 11, 0.10), 0 4px 6px -4px rgba(9, 9, 11, 0.08); /* typography */ --ch-font-sans: Inter, "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ch-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --ch-font-weight-regular: 400; --ch-font-weight-medium: 500; --ch-font-weight-semibold: 600; --ch-font-weight-bold: 700; --ch-text-xs: 12px; --ch-text-xs--line-height: 16px; --ch-text-sm: 14px; --ch-text-sm--line-height: 20px; --ch-text-base: 16px; --ch-text-base--line-height: 24px; --ch-text-lg: 18px; --ch-text-lg--line-height: 28px; --ch-text-xl: 20px; --ch-text-xl--line-height: 28px; --ch-text-2xl: 24px; --ch-text-2xl--line-height: 32px; --ch-text-3xl: 30px; --ch-text-3xl--line-height: 36px; --ch-text-4xl: 36px; --ch-text-4xl--line-height: 40px; --ch-text-5xl: 48px; --ch-text-5xl--line-height: 48px; --ch-tracking-tight: -0.01em; --ch-tracking-normal: 0em; --ch-tracking-caps: 0.06em; /* spacing */ --ch-space-0: 0px; --ch-space-1: 4px; --ch-space-2: 8px; --ch-space-2_5: 10px; /* the shipped footer link rhythm's step; not in the core scale */ --ch-space-3: 12px; --ch-space-4: 16px; --ch-space-5: 20px; --ch-space-6: 24px; --ch-space-8: 32px; --ch-space-10: 40px; --ch-space-12: 48px; --ch-space-16: 64px; --ch-space-20: 80px; --ch-space-24: 96px; /* radii */ --ch-radius-none: 0px; --ch-radius-sm: 4px; --ch-radius-md: 8px; --ch-radius-lg: 12px; --ch-radius-xl: 16px; --ch-radius-full: 9999px; /* motion */ --ch-motion-duration-instant: 0ms; --ch-motion-duration-fast: 100ms; --ch-motion-duration-base: 200ms; --ch-motion-duration-slow: 300ms; --ch-motion-duration-slower: 500ms; --ch-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --ch-motion-easing-entrance: cubic-bezier(0, 0, 0.2, 1); --ch-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1); --ch-motion-easing-emphasis: cubic-bezier(0.2, 0, 0, 1); /* interaction timings */ --ch-menu-open-delay: 80ms; --ch-menu-close-delay: 140ms; /* iconography + focus geometry */ --ch-icon-stroke-width: 1.5px; --ch-icon-grid: 24px; --ch-focus-ring-width: 2px; --ch-focus-ring-offset: 2px; /* grid (the tokens' grid group) */ --ch-container-max: 1152px; --ch-container-gutter: 24px; /* logo ink aliases (consumed by the brand marks) */ --brand-accent-primary: #047857; --brand-accent-hover: #065f46; --brand-accent-strong: #065f46; --brand-accent-fg: #047857; --brand-ink-muted: #a1a1aa; } /* -------------------------------------------------------------------------- 2. Dark theme — OS-dark unless the manual light seam is set, plus the manual [data-theme="dark"] override. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ch-color-bg-canvas: #09090b; --ch-color-bg-subtle: #101013; --ch-color-bg-surface: #18181b; --ch-color-bg-raised: #27272a; --ch-color-bg-inverse: #fafafa; --ch-color-fg-primary: #fafafa; --ch-color-fg-secondary: #d4d4d8; --ch-color-fg-muted: #a1a1aa; --ch-color-fg-inverse: #09090b; --ch-color-fg-onAccent: #09090b; --ch-color-border-default: #27272a; --ch-color-border-strong: #71717a; --ch-color-success-fg: #34d399; --ch-color-success-bg: #022c22; --ch-color-success-border: #065f46; --ch-color-warn-fg: #fbbf24; --ch-color-warn-bg: #451a03; --ch-color-warn-border: #92400e; --ch-color-danger-fg: #f87171; --ch-color-danger-bg: #450a0a; --ch-color-danger-border: #991b1b; --ch-color-info-fg: #38bdf8; --ch-color-info-bg: #082f49; --ch-color-info-border: #075985; /* choirocode dark accent */ --ch-color-accent-primary: #10b981; --ch-color-accent-hover: #34d399; --ch-color-accent-strong: #6ee7b7; --ch-color-accent-subtle: #022c22; --ch-color-accent-fg: #6ee7b7; --ch-color-focus-ring: #34d399; --ch-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.40), 0 1px 3px 0 rgba(0, 0, 0, 0.50); --ch-shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.50), 0 2px 4px -2px rgba(0, 0, 0, 0.40); --ch-shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.60), 0 4px 6px -4px rgba(0, 0, 0, 0.50); --brand-accent-primary: #10b981; --brand-accent-hover: #34d399; --brand-accent-strong: #6ee7b7; --brand-accent-fg: #6ee7b7; --brand-ink-muted: #a1a1aa; } } [data-theme="dark"] { --ch-color-bg-canvas: #09090b; --ch-color-bg-subtle: #101013; --ch-color-bg-surface: #18181b; --ch-color-bg-raised: #27272a; --ch-color-bg-inverse: #fafafa; --ch-color-fg-primary: #fafafa; --ch-color-fg-secondary: #d4d4d8; --ch-color-fg-muted: #a1a1aa; --ch-color-fg-inverse: #09090b; --ch-color-fg-onAccent: #09090b; --ch-color-border-default: #27272a; --ch-color-border-strong: #71717a; --ch-color-success-fg: #34d399; --ch-color-success-bg: #022c22; --ch-color-success-border: #065f46; --ch-color-warn-fg: #fbbf24; --ch-color-warn-bg: #451a03; --ch-color-warn-border: #92400e; --ch-color-danger-fg: #f87171; --ch-color-danger-bg: #450a0a; --ch-color-danger-border: #991b1b; --ch-color-info-fg: #38bdf8; --ch-color-info-bg: #082f49; --ch-color-info-border: #075985; --ch-color-accent-primary: #10b981; --ch-color-accent-hover: #34d399; --ch-color-accent-strong: #6ee7b7; --ch-color-accent-subtle: #022c22; --ch-color-accent-fg: #6ee7b7; --ch-color-focus-ring: #34d399; --ch-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.40), 0 1px 3px 0 rgba(0, 0, 0, 0.50); --ch-shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.50), 0 2px 4px -2px rgba(0, 0, 0, 0.40); --ch-shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.60), 0 4px 6px -4px rgba(0, 0, 0, 0.50); --brand-accent-primary: #10b981; --brand-accent-hover: #34d399; --brand-accent-strong: #6ee7b7; --brand-accent-fg: #6ee7b7; --brand-ink-muted: #a1a1aa; } /* -------------------------------------------------------------------------- 3. Per-brand accents — one palette across all three sites: data-brand selects the logo and name, never a different palette. -------------------------------------------------------------------------- */ /* choiro — the choirocode accent set (one palette across all three sites) */ [data-brand="choiro"] { --ch-color-accent-primary: #047857; --ch-color-accent-hover: #065f46; --ch-color-accent-strong: #065f46; --ch-color-accent-subtle: #ecfdf5; --ch-color-accent-fg: #047857; --ch-color-focus-ring: #059669; --brand-accent-primary: #047857; --brand-accent-hover: #065f46; --brand-accent-strong: #065f46; --brand-accent-fg: #047857; --brand-ink-muted: #a1a1aa; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-brand="choiro"] { --ch-color-accent-primary: #10b981; --ch-color-accent-hover: #34d399; --ch-color-accent-strong: #6ee7b7; --ch-color-accent-subtle: #022c22; --ch-color-accent-fg: #6ee7b7; --ch-color-focus-ring: #34d399; --brand-accent-primary: #10b981; --brand-accent-hover: #34d399; --brand-accent-strong: #6ee7b7; --brand-accent-fg: #6ee7b7; --brand-ink-muted: #a1a1aa; } } [data-theme="dark"][data-brand="choiro"] { --ch-color-accent-primary: #10b981; --ch-color-accent-hover: #34d399; --ch-color-accent-strong: #6ee7b7; --ch-color-accent-subtle: #022c22; --ch-color-accent-fg: #6ee7b7; --ch-color-focus-ring: #34d399; --brand-accent-primary: #10b981; --brand-accent-hover: #34d399; --brand-accent-strong: #6ee7b7; --brand-accent-fg: #6ee7b7; --brand-ink-muted: #a1a1aa; } /* choirocore — the choirocode accent set (one palette across all three sites) */ [data-brand="choirocore"] { --ch-color-accent-primary: #047857; --ch-color-accent-hover: #065f46; --ch-color-accent-strong: #065f46; --ch-color-accent-subtle: #ecfdf5; --ch-color-accent-fg: #047857; --ch-color-focus-ring: #059669; --brand-accent-primary: #047857; --brand-accent-hover: #065f46; --brand-accent-strong: #065f46; --brand-accent-fg: #047857; --brand-ink-muted: #a1a1aa; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-brand="choirocore"] { --ch-color-accent-primary: #10b981; --ch-color-accent-hover: #34d399; --ch-color-accent-strong: #6ee7b7; --ch-color-accent-subtle: #022c22; --ch-color-accent-fg: #6ee7b7; --ch-color-focus-ring: #34d399; --brand-accent-primary: #10b981; --brand-accent-hover: #34d399; --brand-accent-strong: #6ee7b7; --brand-accent-fg: #6ee7b7; --brand-ink-muted: #a1a1aa; } } [data-theme="dark"][data-brand="choirocore"] { --ch-color-accent-primary: #10b981; --ch-color-accent-hover: #34d399; --ch-color-accent-strong: #6ee7b7; --ch-color-accent-subtle: #022c22; --ch-color-accent-fg: #6ee7b7; --ch-color-focus-ring: #34d399; --brand-accent-primary: #10b981; --brand-accent-hover: #34d399; --brand-accent-strong: #6ee7b7; --brand-accent-fg: #6ee7b7; --brand-ink-muted: #a1a1aa; } /* -------------------------------------------------------------------------- 4. Base -------------------------------------------------------------------------- */ html { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } [data-theme="dark"] { color-scheme: dark; } body { margin: 0; background-color: var(--ch-color-bg-canvas); color: var(--ch-color-fg-primary); font-family: var(--ch-font-sans); font-size: var(--ch-text-base); line-height: var(--ch-text-base--line-height); -webkit-font-smoothing: antialiased; } /* the one focus grammar: 2px ring, 2px offset tokens accessibility.focusRing) */ :focus-visible { outline: var(--ch-focus-ring-width) solid var(--ch-color-focus-ring); outline-offset: var(--ch-focus-ring-offset); } /* anchored headings clear the sticky header */ [id] { scroll-margin-top: var(--ch-space-20); } /* reduced motion: every motion token collapses to 0ms linear (the tokens' motion group) */ @media (prefers-reduced-motion: reduce) { :root { --ch-motion-duration-instant: 0ms; --ch-motion-duration-fast: 0ms; --ch-motion-duration-base: 0ms; --ch-motion-duration-slow: 0ms; --ch-motion-duration-slower: 0ms; --ch-motion-easing-standard: linear; --ch-motion-easing-entrance: linear; --ch-motion-easing-exit: linear; --ch-motion-easing-emphasis: linear; --ch-menu-open-delay: 0ms; --ch-menu-close-delay: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .ch-skip-link { position: absolute; left: -9999px; top: 0; background: var(--ch-color-bg-raised); color: var(--ch-color-fg-primary); padding: var(--ch-space-2) var(--ch-space-4); z-index: 50; } .ch-skip-link:focus { left: 0; } /* -------------------------------------------------------------------------- 5. Buttons and CTAs -------------------------------------------------------------------------- */ .ch-btn, .ch-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--ch-space-2); border-radius: var(--ch-radius-md); font-weight: var(--ch-font-weight-medium); font-size: var(--ch-text-sm); line-height: var(--ch-text-sm--line-height); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: color var(--ch-motion-duration-fast) var(--ch-motion-easing-standard), background-color var(--ch-motion-duration-fast) var(--ch-motion-easing-standard), border-color var(--ch-motion-duration-fast) var(--ch-motion-easing-standard), transform var(--ch-motion-duration-fast) var(--ch-motion-easing-standard), box-shadow var(--ch-motion-duration-fast) var(--ch-motion-easing-standard); } .ch-btn:active, .ch-cta:active { transform: translateY(1px); /* the pressed settle — tactile, not colour-only */ } .ch-btn:disabled, .ch-cta:disabled { opacity: 0.5; pointer-events: none; } .ch-btn--md, .ch-cta--md { padding: var(--ch-space-2) var(--ch-space-4); /* 8px 16px */ } .ch-btn--lg, .ch-cta--lg { padding: var(--ch-space-2_5) var(--ch-space-5); font-size: var(--ch-text-sm); } @media (min-width: 768px) { .ch-btn--lg, .ch-cta--lg { padding: var(--ch-space-3) var(--ch-space-6); font-size: var(--ch-text-base); line-height: var(--ch-text-base--line-height); } } .ch-btn--primary, .ch-cta--primary { background: var(--ch-color-accent-primary); color: var(--ch-color-fg-onAccent); box-shadow: var(--ch-shadow-1); } .ch-btn--primary:hover, .ch-cta--primary:hover { background: var(--ch-color-accent-hover); } .ch-cta--primary:hover { transform: translateY(-1px); /* the hover lift — movement, not colour alone */ } .ch-btn--secondary, .ch-cta--secondary { background: var(--ch-color-bg-surface); color: var(--ch-color-fg-primary); border-color: var(--ch-color-border-strong); } .ch-btn--secondary:hover, .ch-cta--secondary:hover { background: var(--ch-color-bg-subtle); } .ch-btn--danger { background: var(--ch-color-danger-bg); color: var(--ch-color-danger-fg); border-color: var(--ch-color-border-strong); } .ch-btn--ghost { background: transparent; color: var(--ch-color-fg-secondary); } .ch-btn--ghost:hover { background: var(--ch-color-bg-subtle); color: var(--ch-color-fg-primary); } .ch-cta--ghost { background: transparent; color: var(--ch-color-accent-fg); } .ch-cta--ghost:hover { text-decoration: underline; text-underline-offset: 4px; } /* -------------------------------------------------------------------------- 6. Cards, badges, inputs -------------------------------------------------------------------------- */ .ch-card { border-radius: var(--ch-radius-lg); border: 1px solid var(--ch-color-border-default); background: var(--ch-color-bg-surface); padding: var(--ch-space-6); box-shadow: var(--ch-shadow-1); } .ch-card__title { margin: 0; font-size: var(--ch-text-lg); line-height: var(--ch-text-lg--line-height); font-weight: var(--ch-font-weight-semibold); color: var(--ch-color-fg-primary); } .ch-badge { display: inline-flex; align-items: center; border-radius: var(--ch-radius-sm); border: 1px solid var(--ch-color-border-default); padding: 2px var(--ch-space-2); font-size: var(--ch-text-xs); line-height: var(--ch-text-xs--line-height); font-weight: var(--ch-font-weight-medium); background: var(--ch-color-bg-subtle); color: var(--ch-color-fg-secondary); } .ch-badge--success { background: var(--ch-color-success-bg); color: var(--ch-color-success-fg); border-color: var(--ch-color-success-border); } .ch-badge--warn { background: var(--ch-color-warn-bg); color: var(--ch-color-warn-fg); border-color: var(--ch-color-warn-border); } .ch-badge--danger { background: var(--ch-color-danger-bg); color: var(--ch-color-danger-fg); border-color: var(--ch-color-danger-border); } .ch-badge--info { background: var(--ch-color-info-bg); color: var(--ch-color-info-fg); border-color: var(--ch-color-info-border); } .ch-badge--accent { background: var(--ch-color-accent-subtle); color: var(--ch-color-accent-fg); border-color: transparent; } .ch-label { display: block; margin-bottom: var(--ch-space-1); font-size: var(--ch-text-sm); line-height: var(--ch-text-sm--line-height); font-weight: var(--ch-font-weight-medium); color: var(--ch-color-fg-secondary); } .ch-input, .ch-select { width: 100%; border-radius: var(--ch-radius-md); border: 1px solid var(--ch-color-border-strong); /* ui-grade visible boundary at rest */ background: var(--ch-color-bg-raised); color: var(--ch-color-fg-primary); padding: var(--ch-space-2) var(--ch-space-3); font-size: var(--ch-text-sm); line-height: var(--ch-text-sm--line-height); font-family: inherit; } .ch-input::placeholder { color: var(--ch-color-fg-muted); } .ch-input:focus-visible, .ch-select:focus-visible { border-color: var(--ch-color-accent-primary); outline: none; } /* -------------------------------------------------------------------------- 7. Nav chrome -------------------------------------------------------------------------- */ .ch-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--ch-color-border-default); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* light keeps a firmer surface; dark keeps the enterprise glass */ background-color: color-mix(in srgb, var(--ch-color-bg-surface) 97%, transparent); transition: border-color var(--ch-motion-duration-fast) var(--ch-motion-easing-standard); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ch-header { background-color: color-mix(in srgb, var(--ch-color-bg-surface) 80%, transparent); } } [data-theme="dark"] .ch-header { background-color: color-mix(in srgb, var(--ch-color-bg-surface) 80%, transparent); } .ch-header--scrolled { border-bottom-color: var(--ch-color-accent-primary); /* the awake hairline */ } .ch-nav { position: relative; margin-inline: auto; max-width: var(--ch-container-max); padding: var(--ch-space-3) var(--ch-container-gutter); display: flex; align-items: center; gap: var(--ch-space-4); } .ch-nav__brand { display: flex; align-items: center; gap: var(--ch-space-2); margin-right: var(--ch-space-2); flex-shrink: 0; white-space: nowrap; border-radius: var(--ch-radius-md); font-size: var(--ch-text-lg); line-height: var(--ch-text-lg--line-height); font-weight: var(--ch-font-weight-semibold); color: var(--ch-color-fg-primary); text-decoration: none; } .ch-nav__brand:hover { color: var(--ch-color-accent-fg); } .ch-nav__brand .ch-logo { width: 24px; height: 24px; } .ch-nav__links { display: none; /* below lg the compact structure owns the bar */ align-items: center; gap: var(--ch-space-1); } @media (min-width: 1024px) { .ch-nav__links { display: flex; } } /* the one nav item: 15px optical half-step, 10px x 6px hit area, md radius */ .ch-nav__link, .ch-nav__trigger { position: relative; display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; border-radius: var(--ch-radius-md); padding: 6px 10px; font-family: inherit; font-size: 15px; line-height: 20px; font-weight: var(--ch-font-weight-medium); color: var(--ch-color-fg-primary); text-decoration: none; cursor: pointer; transition: color var(--ch-motion-duration-fast) var(--ch-motion-easing-standard), background-color var(--ch-motion-duration-fast) var(--ch-motion-easing-standard); } .ch-nav__link:hover, .ch-nav__trigger:hover, .ch-nav__trigger[aria-expanded="true"] { background: var(--ch-color-accent-subtle); color: var(--ch-color-accent-fg); } .ch-nav__link.is-active { font-weight: var(--ch-font-weight-semibold); color: var(--ch-color-accent-fg); } /* the active underline — a shape, so "you are here" survives greyscale */ .ch-nav__link.is-active::after { content: ""; position: absolute; left: var(--ch-space-2); right: var(--ch-space-2); bottom: -14px; height: 2px; border-radius: var(--ch-radius-full); background: var(--ch-color-accent-primary); } /* the dropdown panel */ .ch-nav__panel { position: absolute; left: 0; top: 100%; z-index: 50; margin-top: var(--ch-space-2); width: 352px; border-radius: var(--ch-radius-lg); border: 1px solid var(--ch-color-border-strong); background: var(--ch-color-bg-surface); padding: var(--ch-space-2); box-shadow: var(--ch-shadow-2); } .ch-nav__caps, .ch-footer__caps { display: flex; align-items: center; gap: var(--ch-space-2); margin: 0; font-size: var(--ch-text-xs); line-height: var(--ch-text-xs--line-height); font-weight: var(--ch-font-weight-semibold); text-transform: uppercase; letter-spacing: var(--ch-tracking-caps); color: var(--ch-color-accent-fg); } .ch-nav__caps::before, .ch-footer__caps::before { content: ""; display: block; width: var(--ch-space-5); height: 1px; flex-shrink: 0; background: var(--ch-color-accent-primary); } .ch-nav__entry { position: relative; display: block; border-radius: var(--ch-radius-md); padding: var(--ch-space-2) var(--ch-space-3); text-decoration: none; } .ch-nav__entry:hover { background: var(--ch-color-accent-subtle); } .ch-nav__entry-title { display: block; font-size: var(--ch-text-sm); line-height: var(--ch-text-sm--line-height); font-weight: var(--ch-font-weight-semibold); color: var(--ch-color-fg-primary); } .ch-nav__entry:hover .ch-nav__entry-title { color: var(--ch-color-accent-fg); } .ch-nav__entry-desc { display: block; margin-top: 2px; font-size: var(--ch-text-xs); line-height: 20px; /* leading-5 for menu descriptions */ color: var(--ch-color-fg-muted); } .ch-nav__entry:hover .ch-nav__entry-desc { color: var(--ch-color-fg-secondary); } /* the compact structure under lg */ .ch-nav__menu-button { display: inline-flex; border-radius: var(--ch-radius-md); border: 1px solid var(--ch-color-border-default); background: transparent; color: var(--ch-color-fg-secondary); padding: 6px var(--ch-space-3); font-family: inherit; font-size: var(--ch-text-sm); cursor: pointer; transition: color var(--ch-motion-duration-fast) var(--ch-motion-easing-standard), background-color var(--ch-motion-duration-fast) var(--ch-motion-easing-standard), border-color var(--ch-motion-duration-fast) var(--ch-motion-easing-standard); } .ch-nav__menu-button:hover { border-color: var(--ch-color-accent-primary); background: var(--ch-color-accent-subtle); color: var(--ch-color-accent-fg); } @media (min-width: 1024px) { .ch-nav__menu-button, .ch-nav__mobile { display: none; } } /* the header sign-in link: quiet ink, hover accent + underline, desktop-only like the rest of the CTA row */ .ch-nav__signin { display: none; flex-shrink: 0; white-space: nowrap; border-radius: var(--ch-radius-md); padding: 6px 10px; color: var(--ch-color-fg-secondary); text-decoration: none; transition: color var(--ch-motion-duration-fast) var(--ch-motion-easing-standard); } .ch-nav__signin:hover { color: var(--ch-color-accent-fg); text-decoration: underline; text-underline-offset: 4px; } @media (min-width: 1024px) { .ch-nav__signin { display: inline-block; } } .ch-nav__mobile { position: absolute; inset-inline: 0; top: 100%; max-height: calc(100vh - 64px); overflow-y: auto; border-bottom: 1px solid var(--ch-color-border-strong); background: var(--ch-color-bg-surface); padding: var(--ch-space-4) var(--ch-space-6); box-shadow: var(--ch-shadow-2); } /* -------------------------------------------------------------------------- 8. Footer chrome -------------------------------------------------------------------------- */ .ch-footer { border-top: 1px solid var(--ch-color-border-default); background: var(--ch-color-bg-subtle); } .ch-footer__inner { margin-inline: auto; max-width: var(--ch-container-max); padding: var(--ch-space-16) var(--ch-container-gutter); } @media (min-width: 768px) { .ch-footer__inner { padding-top: 64px; padding-bottom: 64px; } } .ch-footer__band { display: flex; flex-direction: column; gap: var(--ch-space-6); } @media (min-width: 1024px) { .ch-footer__band { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .ch-footer__intro { max-width: 65ch; /* the brand-band measure */ } .ch-footer__blurb { max-width: 65ch; margin: var(--ch-space-4) 0 0; font-size: var(--ch-text-base); line-height: 28px; color: var(--ch-color-fg-secondary); } .ch-footer__lockup { height: 40px; width: auto; } .ch-footer__cols { display: grid; margin-top: var(--ch-space-12); padding-top: var(--ch-space-10); border-top: 1px solid var(--ch-color-border-default); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ch-space-6); row-gap: var(--ch-space-10); } @media (min-width: 640px) { .ch-footer__cols { column-gap: var(--ch-space-10); } } @media (min-width: 1024px) { .ch-footer__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .ch-footer__col { margin: 0; } .ch-footer__links { list-style: none; margin: var(--ch-space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--ch-space-2_5); font-size: var(--ch-text-sm); line-height: var(--ch-text-sm--line-height); } .ch-footer__link { display: inline-block; border-radius: var(--ch-radius-sm); padding: var(--ch-space-1) 0; /* 28px hit target with the 20px line box */ color: var(--ch-color-fg-secondary); text-decoration: none; transition: color var(--ch-motion-duration-fast) var(--ch-motion-easing-standard); } .ch-footer__link:hover { color: var(--ch-color-accent-fg); text-decoration: underline; text-underline-offset: 4px; } .ch-footer__legal { display: flex; flex-direction: column; gap: var(--ch-space-4); margin-top: var(--ch-space-12); padding-top: var(--ch-space-6); border-top: 1px solid var(--ch-color-border-default); font-size: var(--ch-text-sm); line-height: var(--ch-text-sm--line-height); color: var(--ch-color-fg-secondary); /* small text on subtle is secondary, never muted (AA floor) */ } @media (min-width: 768px) { .ch-footer__legal { flex-direction: row; align-items: center; justify-content: space-between; } } .ch-footer__legal-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--ch-space-4); row-gap: var(--ch-space-2); } .ch-footer__entity { margin: 0; } /* the live status pill — 10px round dot, four honest states */ .ch-status { display: inline-flex; align-items: center; gap: var(--ch-space-2); border-radius: var(--ch-radius-sm); color: var(--ch-color-fg-secondary); text-decoration: none; } .ch-status:hover { color: var(--ch-color-accent-fg); text-decoration: underline; text-underline-offset: 4px; } .ch-status-dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--ch-radius-full); background: var(--ch-color-fg-muted); /* checking */ } .ch-status-dot--ok { background: var(--ch-color-success-fg); } .ch-status-dot--degraded { background: var(--ch-color-warn-fg); } .ch-status-dot--unreachable { background: var(--ch-color-danger-fg); } /* -------------------------------------------------------------------------- 9. Decorative field + view transitions -------------------------------------------------------------------------- */ .ch-dot-field { background-image: radial-gradient(var(--ch-color-border-default) 1px, transparent 1px); background-size: 18px 18px; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--ch-motion-duration-fast, 100ms); } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }