/* ATS site — shared theme. Light/dark via color-scheme by default. * User can force a theme via the toggle button (§1.2); selection is * applied as [data-theme="light"|"dark"] on . */ :root { color-scheme: light dark; --bg: Canvas; --fg: CanvasText; --muted: color-mix(in oklab, CanvasText 60%, transparent); --border: color-mix(in oklab, CanvasText 22%, transparent); --card: color-mix(in oklab, Canvas 96%, CanvasText); --accent: #4a6cff; --max: 1100px; } /* Forced light theme — explicit palette so it works regardless of the * user-agent's prefers-color-scheme. */ :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --fg: #111827; --muted: rgba(17, 24, 39, 0.60); --border: rgba(17, 24, 39, 0.18); --card: #f3f4f6; --accent: #4a6cff; } /* Forced dark theme — palette matches the PWA splash background. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0f17; --fg: #e8eef7; --muted: rgba(232, 238, 247, 0.65); --border: rgba(232, 238, 247, 0.22); --card: #131a26; --accent: #6c8cff; } /* Terminal — black background, phosphor green, mono font global. */ :root[data-theme="terminal"] { color-scheme: dark; --bg: #0c0c0c; --fg: #33ff33; --muted: rgba(51, 255, 51, 0.55); --border: rgba(51, 255, 51, 0.30); --card: #1a1a1a; --accent: #33ff33; } :root[data-theme="terminal"] body { font-family: ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace; } :root[data-theme="terminal"] header.site nav a.active, :root[data-theme="terminal"] .theme-toggle:focus-visible { text-shadow: 0 0 6px var(--accent); } /* Aquarelle — washed pastels. */ :root[data-theme="aquarelle"] { color-scheme: light; --bg: #fdfaf3; --fg: #3d4a5a; --muted: rgba(61, 74, 90, 0.55); --border: rgba(61, 74, 90, 0.18); --card: #f3eedf; --accent: #7a8bc4; } /* Neon — deep black + magenta/cyan accents. */ :root[data-theme="neon"] { color-scheme: dark; --bg: #0a0a14; --fg: #e0e0e8; --muted: rgba(224, 224, 232, 0.60); --border: rgba(255, 43, 214, 0.30); --card: #16162a; --accent: #ff2bd6; } :root[data-theme="neon"] header.site nav a.active { box-shadow: 0 1px 0 var(--accent), 0 0 8px rgba(255, 43, 214, 0.6); border-bottom-color: var(--accent); } /* Theme toggle button — 3 cycling glyphs, sits beside .lang-switch. */ .theme-toggle { background: transparent; color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 0.2rem 0.55rem; font-size: 1rem; line-height: 1.2; cursor: pointer; opacity: 0.75; font-family: inherit; } .theme-toggle:hover { opacity: 1; } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Test vectors page — implementer guide section (header above the JS-rendered tables) */ .vec-guide { margin: 1.5rem 0 2rem 0; padding: 1.25rem 1.5rem; border-radius: 12px; background: color-mix(in oklab, CanvasText 5%, Canvas); border: 1px solid color-mix(in oklab, CanvasText 12%, transparent); } .vec-guide h2 { font-size: 1.15rem; margin: 1.25rem 0 0.4rem 0; border: none; padding: 0; } .vec-guide h2:first-of-type { margin-top: 0; } .vec-guide p, .vec-guide ul, .vec-guide ol { font-size: 0.94rem; line-height: 1.55; } .vec-guide pre { background: color-mix(in oklab, CanvasText 9%, Canvas); border: 1px solid color-mix(in oklab, CanvasText 14%, transparent); border-radius: 8px; padding: 0.75rem 1rem; overflow-x: auto; font-size: 0.82rem; line-height: 1.45; } .vec-guide code { font-size: 0.88em; } .vec-meta { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin: 0.5rem 0 1rem 0; } .vec-meta th, .vec-meta td { text-align: left; padding: 0.45rem 0.65rem; border-bottom: 1px solid color-mix(in oklab, CanvasText 12%, transparent); vertical-align: top; } .vec-meta thead th { font-weight: 700; background: color-mix(in oklab, CanvasText 8%, transparent); border-bottom: 2px solid color-mix(in oklab, CanvasText 25%, transparent); } .vec-meta tbody tr:last-child th, .vec-meta tbody tr:last-child td { border-bottom: none; font-weight: 600; background: color-mix(in oklab, CanvasText 6%, transparent); } /* Test vectors page (§5.5) */ .vec-card { border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; margin: 1.25rem 0; background: var(--card); } .vec-card h2 { margin-top: 0; border: none; padding: 0; } .vec-filter { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--fg); font-family: inherit; margin: 0.5rem 0; } .vec-tablewrap { overflow-x: auto; } .vec-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .vec-table tr { border-bottom: 1px solid var(--border); } .vec-table tr:last-child { border-bottom: none; } .vec-table td { padding: 0.5rem 0.4rem; vertical-align: top; word-break: break-word; } .vec-label { font-weight: 600; white-space: normal; max-width: 12rem; } .vec-canonical { font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; font-size: 0.82rem; color: var(--accent); } .vec-json pre { margin: 0; white-space: pre; overflow-x: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; color: var(--muted); max-width: 28rem; } .vec-actions { white-space: nowrap; } .vec-actions button { background: transparent; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.6rem; font-size: 0.78rem; cursor: pointer; margin: 0.1rem 0.15rem; } .vec-actions button:hover { background: var(--bg); } /* Konami easter egg confetti (§5.7) */ .konami-confetti { position: fixed; top: -3rem; font-size: 1.8rem; pointer-events: none; user-select: none; z-index: 9999; color: var(--accent); text-shadow: 0 0 6px var(--accent); animation: konami-fall 1.6s cubic-bezier(.55,.1,.7,.95) forwards; } @keyframes konami-fall { 0% { transform: translateY(0) rotate(0) scale(0.6); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg) scale(1.1); opacity: 0; } } body.konami { /* discreet hook for pages to know the egg is active */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.55; color: var(--fg); background: var(--bg); } main, header, footer { padding: 0 1.25rem; } .container { max-width: var(--max); margin: 0 auto; } header.site { display: flex; align-items: center; justify-content: space-between; padding-top: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 0.75rem; } header.site .brand { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; text-decoration: none; color: var(--fg); } header.site nav a { margin-left: 1rem; text-decoration: none; color: var(--fg); opacity: 0.8; font-size: 0.95rem; } header.site nav a:hover { opacity: 1; } header.site nav a.active { border-bottom: 2px solid var(--accent); padding-bottom: 2px; } /* Hamburger button — visible only on small viewports. */ .hamburger { display: none; background: transparent; color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 0.35rem 0.7rem; font-size: 1.1rem; line-height: 1; cursor: pointer; } .hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 600px) { header.site { flex-wrap: wrap; gap: 0.5rem; } /* Visual order: brand · lang-switch · hamburger (top row), nav (below when open). */ header.site .brand { order: 0; } header.site .lang-switch { order: 1; margin-left: auto; } .hamburger { display: inline-block; order: 2; } header.site nav { order: 3; flex-basis: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0.15rem; padding: 0.5rem 0; border-top: 1px solid var(--border); margin-top: 0.5rem; } header.site nav a { margin-left: 0; padding: 0.5rem 0.5rem; border-radius: 6px; } header.site nav a:hover { background: color-mix(in oklab, Canvas 90%, CanvasText); } header.site .hamburger[aria-expanded="true"] ~ nav { display: flex; } } .lang-switch { font-size: 0.85rem; opacity: 0.7; } .lang-switch a { color: var(--fg); text-decoration: none; margin: 0 0.25rem; } .lang-switch a.active { font-weight: 700; opacity: 1; } main { padding-top: 1.5rem; padding-bottom: 3rem; } h1, h2, h3 { line-height: 1.25; } h1 { font-size: clamp(2rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0.25rem 0 0.75rem 0; } h2 { margin-top: 2.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.35rem; } footer.site { border-top: 1px solid var(--border); padding: 1.25rem; opacity: 0.7; font-size: 0.85rem; text-align: center; } a { color: var(--accent); } a:hover { text-decoration: underline; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .muted { opacity: 0.7; font-size: 0.9rem; } /* Clock card */ .clock-card { border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem 1.75rem; margin-top: 1.25rem; background: color-mix(in oklab, Canvas 97%, CanvasText); } /* Center EVERYTHING inside the active face panel (analog dial card, readouts, legends, city list). The converter and units-grid live in
, outside .face-panel, so they keep their own alignment. */ .face-panel { text-align: center; } .face-panel > svg { display: block; margin-left: auto; margin-right: auto; } /* Numeric/Analog segmented toggle, on top of the clock card. */ .face-toggle { display: flex; width: fit-content; margin: 0 auto 1.25rem auto; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in oklab, Canvas 96%, CanvasText); } .face-toggle button { appearance: none; background: transparent; border: 0; border-radius: 999px; padding: 0.35rem 1rem; font: inherit; font-size: 0.92rem; color: var(--fg); cursor: pointer; opacity: 0.6; } .face-toggle button[aria-selected="true"] { background: var(--accent); /* Compute readable text on the accent regardless of theme (light accent → dark text, dark accent → light text). */ color: color-mix(in oklab, var(--accent), Canvas 90%); opacity: 1; } .face-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Analog dial */ .analog-dial { width: min(100%, 360px); height: auto; color: var(--fg); margin-top: 0.5rem; } /* CLS prevention — reserve space (height AND vertical margins) for the search input that search.js inserts at the top of
on faq/manifesto pages. min-height covers the rendered input box; margin matches the `.ats-search { margin: 0.75rem 0 1.5rem }` rule that search.js injects inline once it boots — applying it to the placeholder up-front prevents the ~36 px downward shift of
when that class lands. The placeholder is also valid on pages that don't load search.js. */ #ats-search { min-height: 60px; margin: 0.75rem 0 1.5rem; } /* Pedagogical ATS readout (Bloc · Centi · …) under the dial. */ .ats-readout { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; text-align: center; margin-top: 0.75rem; letter-spacing: 0.01em; } .ats-readout .frac { opacity: 0.55; margin-left: 0.4rem; } /* Color each unit label to match its hand on the analog dial. */ .ats-readout .u-bloc { color: var(--fg); } .ats-readout .u-centi { color: var(--accent); } .ats-readout .u-milli { color: var(--fg); opacity: 0.5; } /* Beat & Blink: blend the brand greens/reds with CanvasText so they remain distinct from each other AND legible against any theme background. */ .ats-readout .u-beat { color: color-mix(in oklab, #2bb673 65%, CanvasText); } .ats-readout .u-blink { color: color-mix(in oklab, #ff5a5a 65%, CanvasText); } /* World-cities color legend (matin / midi / soir) and city list. */ .city-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem; font-size: 0.84rem; opacity: 0.85; margin-top: 0.75rem; } /* Pattern legend (matin/midi/après-midi/soir) — colors come from the per-city palette; patterns differentiate the four time slots within each city. Each legend uses an inline SVG line that mirrors exactly the stroke-dasharray used on the arcs. */ .city-legend .pat-svg { display: inline-block; width: 28px; height: 6px; vertical-align: middle; margin-right: 0.35rem; color: currentColor; } /* City legend below the dial — forced 4×2 grid. Each entry carries a colored dot (one color per city). */ .city-list { display: grid; /* Columns sized to their content, group centered on the row, so the 4×2 block sits in the middle of the panel. */ grid-template-columns: repeat(4, max-content); justify-content: center; gap: 0.3rem 1.4rem; font-size: 0.78rem; opacity: 0.85; margin-top: 0.5rem; font-family: ui-monospace, monospace; text-align: left; } .city-list .row { white-space: nowrap; } .city-list .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 0.3rem; } @media (max-width: 540px) { .city-list { grid-template-columns: repeat(2, max-content); gap: 0.3rem 1rem; } } @media (max-width: 320px) { .city-list { grid-template-columns: max-content; } } /* Side-by-side Macro / Micro units sections in
. */ .units-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem; } .units-grid > section h3 { margin: 0 0 0.5rem 0; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; } @media (max-width: 600px) { .units-grid { grid-template-columns: 1fr; gap: 1rem; } } /* Halo behind each city code on the analog dial (drawn before the text). Halo carries the city's arc color (set inline per-element in JS); text color is auto-picked (black on bright halos, white on dark ones) so the trigrams stay legible in any theme. The CSS rule only holds the opacity. */ .city-halo { opacity: 0.95; } /* Invisible enlarged hit target for trigram clicks (touch friendly). The actual halo + text below it both keep pointer-events:none, so this circle is the sole click target — it activates the city focus mode. */ .city-hit { cursor: pointer; } .city-hit:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; } /* Cities page — world map view. Each ~40 capital is a pin on an equirectangular projection; the pin's emoji morphs with what's happening LOCALLY at the current reference UTC instant. The user can either watch live (1 Hz tick) or scrub a slider through the 24 h day. */ .cities-note { max-width: none; } .cities-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0.5rem 0 1rem 0; font-size: 0.85rem; color: color-mix(in oklab, CanvasText 75%, transparent); } .cities-legend-item { display: inline-flex; align-items: center; gap: 0.25rem; } .cities-legend-icon { font-size: 1.05rem; line-height: 1; } .cities-map { border: 1px solid color-mix(in oklab, CanvasText 12%, transparent); border-radius: 8px; overflow: hidden; background: color-mix(in oklab, CanvasText 4%, transparent); } .cities-map-svg { display: block; width: 100%; height: auto; } /* CLS prevention (Lighthouse desktop).
is empty in the static HTML — cities-page.js fetches /assets/data/cities.json + world-land.geo.json and renders intro + legend + map SVG inside it. Without a reserved min-height, that ~700-900px of content lands AFTER first paint and shifts the footer up by that amount, crashing CLS to 0.69 on desktop (mobile is fine — the section happens to size correctly there). The min-height matches the natural rendered size; oversize is harmless because the section's final content is taller than the minimum. */ #cities-root { min-height: 720px; } .cities-ocean { fill: color-mix(in oklab, CanvasText 6%, Canvas); } .cities-land path { fill: color-mix(in oklab, CanvasText 18%, Canvas); stroke: color-mix(in oklab, CanvasText 30%, transparent); stroke-width: 0.4; vector-effect: non-scaling-stroke; } .cities-pin { cursor: pointer; } .cities-pin-dot { fill: color-mix(in oklab, CanvasText 70%, Canvas); stroke: Canvas; stroke-width: 1.2; transition: r 120ms ease, fill 120ms ease; } .cities-pin-icon { font-size: 11px; pointer-events: none; user-select: none; } .cities-pin:hover .cities-pin-dot, .cities-pin:focus .cities-pin-dot { r: 11; fill: color-mix(in oklab, CanvasText 95%, Canvas); } /* Keyboard focus must stay visible — the dot's stroke alone is not enough. */ .cities-pin:focus { outline: none; } .cities-pin:focus-visible .cities-pin-dot { stroke: color-mix(in oklab, var(--accent) 80%, CanvasText); stroke-width: 2.5; } .cities-pin:focus-visible { outline: 2px dashed var(--accent); outline-offset: 2px; } .cities-pin:focus:not(:focus-visible) .cities-pin-dot { stroke: color-mix(in oklab, CanvasText 60%, transparent); stroke-width: 2; } /* State-tinted halo around dot. Each base hex is blended with CanvasText so the pin keeps theme-aware contrast on light, dark, terminal, and neon palettes. */ .cities-pin[data-state="sleep"] .cities-pin-dot { fill: color-mix(in oklab, #2c3e6b 70%, CanvasText); } .cities-pin[data-state="wake"] .cities-pin-dot { fill: color-mix(in oklab, #f5a04a 70%, CanvasText); } .cities-pin[data-state="breakfast"].cities-pin-dot { fill: color-mix(in oklab, #d97759 70%, CanvasText); } .cities-pin[data-state="commute"] .cities-pin-dot { fill: color-mix(in oklab, #6b7280 70%, CanvasText); } .cities-pin[data-state="school"] .cities-pin-dot { fill: color-mix(in oklab, #8b5cf6 70%, CanvasText); } .cities-pin[data-state="work"] .cities-pin-dot { fill: color-mix(in oklab, #4a6cff 70%, CanvasText); } .cities-pin[data-state="lunch"] .cities-pin-dot { fill: color-mix(in oklab, #eab308 70%, CanvasText); } .cities-pin[data-state="evening"] .cities-pin-dot { fill: color-mix(in oklab, #ec4899 70%, CanvasText); } .cities-pin[data-state="dinner"] .cities-pin-dot { fill: color-mix(in oklab, #c2410c 70%, CanvasText); } .cities-pin[data-state="leisure"] .cities-pin-dot { fill: color-mix(in oklab, #14b8a6 70%, CanvasText); } .cities-controls { display: flex; align-items: center; gap: 0.75rem; margin: 0.9rem 0 0 0; flex-wrap: wrap; } .cities-now-btn { padding: 0.35rem 0.85rem; font: inherit; font-weight: 600; border: 1px solid color-mix(in oklab, CanvasText 35%, transparent); border-radius: 6px; background: Canvas; color: CanvasText; cursor: pointer; } .cities-now-btn:hover { background: color-mix(in oklab, CanvasText 8%, Canvas); } .cities-slider { flex: 1; min-width: 180px; max-width: 480px; min-height: 44px; /* WCAG touch target on mobile */ accent-color: color-mix(in oklab, CanvasText 60%, transparent); } .cities-caption { font-size: 0.9rem; display: inline-flex; align-items: baseline; gap: 0.4rem; } .cities-caption-ats { font-weight: 600; } .cities-caption-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1rem 0.45rem; border-radius: 999px; background: color-mix(in oklab, CanvasText 12%, transparent); color: color-mix(in oklab, CanvasText 75%, transparent); } .cities-tooltip { position: fixed; pointer-events: none; z-index: 1000; min-width: 14rem; padding: 0.55rem 0.7rem; border-radius: 8px; background: Canvas; color: CanvasText; border: 1px solid color-mix(in oklab, CanvasText 25%, transparent); box-shadow: 0 6px 24px color-mix(in oklab, CanvasText 25%, transparent); font-size: 0.88rem; } .cities-tooltip[hidden] { display: none; } .cities-tooltip-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; } .cities-tooltip-icon { font-size: 1.4rem; line-height: 1; } .cities-tooltip-name { font-weight: 700; } .cities-tooltip-code { margin-left: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.72rem; padding: 0.05rem 0.35rem; border-radius: 4px; background: color-mix(in oklab, CanvasText 14%, transparent); } .cities-tooltip-row { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.1rem 0; } .cities-tooltip-row .lbl { color: color-mix(in oklab, CanvasText 60%, transparent); font-size: 0.78rem; } @media (max-width: 600px) { .cities-pin-icon { font-size: 10px; } .cities-tooltip { font-size: 0.82rem; min-width: 12rem; } } @media (max-width: 400px) { /* Compact layout for small phones (iPhone SE 360 px etc.) */ .cities-legend { font-size: 0.78rem; gap: 0.3rem 0.6rem; } .cities-tooltip { min-width: 11rem; padding: 0.45rem 0.55rem; } .cities-pin-icon { font-size: 9px; } .cities-pin-dot { stroke-width: 1; } } /* Print: hide chrome, expand content, prefer ink-saving. */ @media print { header.site, footer.site, .face-toggle, .converter, .actions, .cities-controls, .cities-tooltip, .toast { display: none !important; } main, .container { padding: 0; max-width: none; } body { color: #000; background: #fff; } a { color: inherit; text-decoration: none; } details { open: true; } details > summary { list-style: none; } } /* Options block at the end of the details panel */ .options { margin-top: 1.25rem; } .options h3 { margin: 0 0 0.5rem 0; font-size: 1rem; } .options label.opt { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; } .options label.opt input { width: auto; } /* User-added city pins for the analog dial. Form + persisted list. */ .custom-cities { margin-top: 1.25rem; } .custom-cities h3 { margin: 0 0 0.3rem 0; font-size: 1rem; } .custom-city-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.5rem 0.75rem; margin: 0.5rem 0 0.5rem 0; } .custom-city-form .lbl-inline { display: flex; flex-direction: column; gap: 0.2rem; } .custom-city-form .lbl { font-size: 0.78rem; color: color-mix(in oklab, CanvasText 65%, transparent); } .custom-city-form input[type="text"], .custom-city-form input[type="color"] { font: inherit; padding: 0.35rem 0.5rem; border: 1px solid color-mix(in oklab, CanvasText 30%, transparent); border-radius: 6px; background: Canvas; color: CanvasText; min-height: 36px; } .custom-city-form input[type="color"] { padding: 0.2rem; width: 100%; cursor: pointer; } .custom-city-form .actions { grid-column: 1 / -1; } .custom-city-list { list-style: none; padding: 0; margin: 0.5rem 0 0 0; display: flex; flex-direction: column; gap: 0.3rem; } .custom-city-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.6rem; border: 1px solid color-mix(in oklab, CanvasText 12%, transparent); border-radius: 6px; font-size: 0.92rem; } .custom-city-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid color-mix(in oklab, CanvasText 30%, transparent); flex-shrink: 0; } .custom-city-name { flex: 1; } .custom-city-remove { background: transparent; border: 1px solid color-mix(in oklab, CanvasText 25%, transparent); color: CanvasText; width: 28px; height: 28px; border-radius: 50%; font-size: 1.15rem; line-height: 1; cursor: pointer; } .custom-city-remove:hover { background: color-mix(in oklab, CanvasText 10%, transparent); } /* Click-to-copy affordance on the headline values. */ .clock-card > .big:hover { opacity: 0.85; } /* Toast — temporary feedback after a copy or shortcut action. */ .toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translate(-50%, 0.5rem); background: color-mix(in oklab, CanvasText 80%, transparent); color: Canvas; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.9rem; padding: 0.55rem 1rem; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 1000; } .toast.visible { opacity: 1; transform: translate(-50%, 0); } .clock-card .label { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.12em; opacity: 0.65; margin-bottom: 0.25rem; } .clock-card .big { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: 0.02em; margin: 0.1rem 0 0.75rem 0; } .clock-card .secondary { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; opacity: 0.85; } .clock-card details { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; } .clock-card details summary { cursor: pointer; font-size: 0.9rem; opacity: 0.8; } .clock-card details summary::marker { color: var(--accent); } .kv { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0.35rem 1rem; margin-top: 0.75rem; font-size: 0.95rem; } .kv .k { opacity: 0.6; } .kv .v { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Converter inputs */ .converter { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; } @media (min-width: 720px) { .converter { grid-template-columns: 1fr 1fr; } } .converter label { display: block; } .converter label .lbl { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.3rem; } .converter input { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); } .converter input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; } button { font: inherit; padding: 0.55rem 1rem; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in oklab, Canvas 90%, CanvasText); color: var(--fg); cursor: pointer; } button:hover { background: color-mix(in oklab, Canvas 80%, CanvasText); } .status { font-size: 0.85rem; opacity: 0.75; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .status.ok { color: color-mix(in oklab, CanvasText 75%, transparent); } .status.err { color: color-mix(in oklab, #d34a4a 75%, CanvasText); } /* Markdown rendering */ .markdown { max-width: 80ch; margin: 0 auto; } .markdown table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; } .markdown th, .markdown td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; } .markdown th { background: color-mix(in oklab, Canvas 93%, CanvasText); } .markdown blockquote { border-left: 3px solid var(--accent); padding: 0.25rem 1rem; margin: 1rem 0; opacity: 0.85; background: color-mix(in oklab, Canvas 97%, CanvasText); } .markdown code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: color-mix(in oklab, Canvas 92%, CanvasText); padding: 0.05rem 0.35rem; border-radius: 4px; font-size: 0.92em; } .markdown pre { background: color-mix(in oklab, Canvas 92%, CanvasText); padding: 1rem; border-radius: 10px; overflow-x: auto; } .markdown pre code { background: transparent; padding: 0; } /* Hero */ .hero { text-align: center; padding: 4rem 1rem; border: 1px solid var(--border); border-radius: 16px; margin-top: 1rem; background: color-mix(in oklab, Canvas 97%, CanvasText); } .hero .symbol { font-size: clamp(4rem, 12vw, 8rem); line-height: 1; margin-bottom: 1rem; } .hero .tagline { font-size: 1.05rem; opacity: 0.8; max-width: 56ch; margin: 0 auto 1.5rem auto; } .hero .actions { justify-content: center; } .hero .lang-pick { display: inline-flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; justify-content: center; } .hero .lang-pick a { display: inline-block; padding: 0.65rem 1.5rem; border-radius: 10px; border: 1px solid var(--border); text-decoration: none; color: var(--fg); background: var(--bg); } .hero .lang-pick a:hover { background: color-mix(in oklab, Canvas 88%, CanvasText); }