/* ========================================================================== Zayeed shared theme — tokens, site chrome, light/dark toggle -------------------------------------------------------------------------- ONE source of truth for the palette and for the furniture every page wears: the sticky header, the hero, the card grid, the footer, the buttons. How it works ------------ - Every colour is a custom property with a hardcoded hex fallback at the point of use (e.g. color: var(--zyd-fg, #dbe6e0); ) so a browser without custom-property support still renders a readable DARK page — it just does not get the toggle. - Light is applied by adding the class "theme-light" to . The light values re-declare the same properties, so the switch itself needs no var() resolution and cannot half-apply. - Default (no class) = dark. That is the brand look. Keep this palette in sync with the per-page hex fallbacks. ========================================================================== */ :root { /* ---- DARK (default) ---- */ --zyd-bg: #0a0c0b; /* page background */ --zyd-bg-2: #0d100e; /* slightly raised background */ --zyd-surface: #111413; /* cards / panels */ --zyd-surface-2: #161a18; /* card headers / inputs / raised */ --zyd-border: #1e2620; /* hairline borders */ --zyd-border-2: #263028; /* stronger borders */ --zyd-fg: #dbe6e0; /* body text */ --zyd-fg-dim: #aec0b7; /* secondary text */ --zyd-fg-bright: #f2f7f4; /* emphasised text */ --zyd-accent: #00d6aa; /* teal accent */ --zyd-accent-2: #00b894; /* hover / pressed accent */ --zyd-on-accent: #06100c; /* text on an accent fill */ --zyd-danger: #ff5566; --zyd-on-danger: #1a0508; --zyd-warn: #ffb454; --zyd-link: #2ee6bd; /* decorative glow + scanline strength (dark only) */ --zyd-glow: rgba(0,214,170,0.08); --zyd-glow-2: rgba(0,214,170,0.05); --zyd-scanline: rgba(0,0,0,0.04); /* semantic status ramp (dark) */ --zyd-faint: #ccc; --zyd-muted: #9aa8a2; --zyd-ok: #44cc88; --zyd-ok-soft: #81c784; --zyd-danger-soft: #ef9a9a; --zyd-warn-soft: #ffd06a; --zyd-info: #5cc8ff; --zyd-info-soft: #8dd9ff; --zyd-accent-soft: #80cbc4; --zyd-purple: #ce93d8; /* tinted panel surfaces (error / warning / success / info banners) */ --zyd-surface-danger: #1a1010; --zyd-surface-warn: #221008; --zyd-surface-ok: #0e2a18; --zyd-surface-info: #0a1525; --zyd-surface-purple: #1a0e28; /* floating control surfaces */ --zyd-toggle-bg: rgba(17,20,19,0.92); --zyd-toggle-border: var(--zyd-border-2); --zyd-toggle-fg: var(--zyd-fg); color-scheme: dark; } html.theme-light { /* ---- LIGHT (WCAG-AA friendly) ---- */ --zyd-bg: #f3f6f5; --zyd-bg-2: #e9eeec; --zyd-surface: #ffffff; --zyd-surface-2: #eaf0ed; --zyd-border: #d3ddd8; --zyd-border-2: #c2cfc9; --zyd-fg: #172320; /* ~13:1 on #f3f6f5 */ --zyd-fg-dim: #3e4c45; /* 8.2:1 — AAA */ --zyd-fg-bright: #0a120f; --zyd-accent: #00664f; /* 6.4:1 */ --zyd-accent-2: #00503f; --zyd-on-accent: #ffffff; --zyd-danger: #b81f31; --zyd-on-danger: #ffffff; --zyd-warn: #8a5100; --zyd-link: #00503f; --zyd-faint: #444f49; --zyd-muted: #4a5a52; --zyd-ok: #0e6b35; --zyd-ok-soft: #0e6b35; --zyd-danger-soft: #a3202f; --zyd-warn-soft: #8a5100; --zyd-info: #0f4c8a; --zyd-info-soft: #0f4c8a; --zyd-accent-soft: #00503f; --zyd-purple: #6b21a8; --zyd-surface-danger: #fdecee; --zyd-surface-warn: #fdf4e3; --zyd-surface-ok: #e7f6ed; --zyd-surface-info: #e9f1fb; --zyd-surface-purple: #f4ecfc; --zyd-glow: rgba(0,120,95,0.05); --zyd-glow-2: rgba(0,120,95,0.035); --zyd-scanline: rgba(0,0,0,0); --zyd-toggle-bg: rgba(255,255,255,0.94); --zyd-toggle-border: var(--zyd-border-2); --zyd-toggle-fg: var(--zyd-fg); color-scheme: light; } /* ========================================================================== Reset + typography ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 106.25%; scroll-behavior: smooth; } /* 16px -> 17px base */ body { font-family: 'Rajdhani', system-ui, sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.65; color: var(--zyd-fg, #dbe6e0); background: var(--zyd-bg, #0a0c0b); -webkit-text-size-adjust: 100%; min-height: 100vh; background-image: radial-gradient(ellipse 1100px 600px at 18% -10%, rgba(0,214,170,0.08), transparent 60%), radial-gradient(ellipse 900px 700px at 110% 30%, rgba(0,214,170,0.05), transparent 60%); } html.theme-light body { background-image: radial-gradient(ellipse 1100px 600px at 18% -10%, rgba(0,120,95,0.06), transparent 60%), radial-gradient(ellipse 900px 700px at 110% 30%, rgba(0,120,95,0.04), transparent 60%); } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; } .mono { font-family: 'Share Tech Mono', 'Source Code Pro', monospace; } /* CRT scanlines — the house texture. Removed in light, where it only costs contrast. */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9000; background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--zyd-scanline, rgba(0,0,0,0.04)) 2px, var(--zyd-scanline, rgba(0,0,0,0.04)) 4px); } html.theme-light body::before { display: none; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--zyd-accent, #00d6aa); color: var(--zyd-on-accent, #06100c); padding: 0.6em 1em; font-family: 'Share Tech Mono', monospace; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; z-index: 9999; border-radius: 0 0 4px 0; } .skip-link:focus { left: 0; top: 0; } /* ========================================================================== Header ========================================================================== */ header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5em; height: 56px; background: var(--zyd-header-bg, rgba(10,12,11,0.95)); border-bottom: 1px solid var(--zyd-surface-2, #161a18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html.theme-light header { background: rgba(243,246,245,0.95); } .brand { display: flex; align-items: center; gap: 0.8em; } .brand svg { display: block; flex-shrink: 0; overflow: visible; } .brand-text { font-family: 'Share Tech Mono', monospace; font-size: 0.9rem; color: var(--zyd-accent, #00d6aa); letter-spacing: 2px; } .brand-text span { color: var(--zyd-fg-dim, #aec0b7); font-size: 0.78em; } .top-links { display: flex; align-items: center; gap: 0.4em; } .top-links a { font-family: 'Share Tech Mono', monospace; font-size: 0.66rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--zyd-fg-dim, #aec0b7); padding: 0.55em 0.85em; border: 1px solid transparent; border-radius: 3px; transition: all 0.18s; white-space: nowrap; } .top-links a:hover, .top-links a:focus-visible { color: var(--zyd-accent, #00d6aa); border-color: var(--zyd-border, #1e2620); background: var(--zyd-glow, rgba(0,214,170,0.06)); } .top-links a.here { color: var(--zyd-fg-bright, #f2f7f4); } .top-links a.primary { color: var(--zyd-accent, #00d6aa); border-color: var(--zyd-border, #1e2620); background: var(--zyd-glow, rgba(0,214,170,0.06)); } .top-links a.primary:hover { border-color: var(--zyd-accent, #00d6aa); } /* Mobile burger — CSS checkbox toggle, works with JS disabled */ .nav-toggle-cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .nav-burger { display: none; box-sizing: border-box; width: 40px; height: 40px; cursor: pointer; -webkit-user-select: none; user-select: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border: 1px solid var(--zyd-border, #1e2620); border-radius: 4px; background: var(--zyd-glow, rgba(0,214,170,0.04)); } .nav-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--zyd-accent, #00d6aa); transition: transform 0.2s, opacity 0.2s; } @media (max-width: 860px) { .nav-burger { display: flex; } .top-links { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5em; background: var(--zyd-bg, #0a0c0b); border-bottom: 1px solid var(--zyd-surface-2, #161a18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-height: calc(100vh - 56px); overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 12px 30px rgba(0,0,0,0.45); } .top-links a { display: block; font-size: 0.8rem; padding: 0.85em 1em; border-radius: 4px; } .nav-toggle-cb:checked ~ .top-links { display: flex; } .nav-toggle-cb:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle-cb:checked ~ .nav-burger span:nth-child(2) { opacity: 0; } .nav-toggle-cb:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ========================================================================== Layout ========================================================================== */ .wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5em; } section { padding: 3.5em 0; } .narrow { max-width: 800px; } /* ========================================================================== Hero ========================================================================== */ .hero { padding: 4em 0 2.5em; position: relative; overflow: hidden; } .hero-grid { display: grid; gap: 2.5em; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; position: relative; z-index: 2; } @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } } .hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; opacity: 0.55; } .hero-particles span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--zyd-accent, #00d6aa); box-shadow: 0 0 8px var(--zyd-accent, #00d6aa); opacity: 0; } .hero-particles span:nth-child(1) { left: 8%; top: 70%; animation: zydFloat 11s linear infinite; } .hero-particles span:nth-child(2) { left: 18%; top: 80%; animation: zydFloat 14s linear infinite 2s; width: 3px; height: 3px; } .hero-particles span:nth-child(3) { left: 32%; top: 65%; animation: zydFloat 9s linear infinite 4s; } .hero-particles span:nth-child(4) { left: 48%; top: 78%; animation: zydFloat 13s linear infinite 1s; width: 5px; height: 5px; } .hero-particles span:nth-child(5) { left: 62%; top: 72%; animation: zydFloat 10s linear infinite 3s; } .hero-particles span:nth-child(6) { left: 75%; top: 82%; animation: zydFloat 12s linear infinite 5s; width: 3px; height: 3px; } .hero-particles span:nth-child(7) { left: 88%; top: 68%; animation: zydFloat 15s linear infinite 6s; } .hero-particles span:nth-child(8) { left: 5%; top: 60%; animation: zydFloat 16s linear infinite 7s; width: 2px; height: 2px; } @media (max-width: 720px) { .hero-particles { display: none; } } @keyframes zydFloat { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.6; } 100% { transform: translateY(-260px) translateX(24px); opacity: 0; } } .hero-logo-wrap { display: flex; align-items: center; gap: 1.4em; margin-bottom: 1.4em; flex-wrap: wrap; } .hero-logo { width: 92px; height: 92px; flex-shrink: 0; filter: drop-shadow(0 0 16px rgba(0,214,170,0.25)); } @media (max-width: 480px) { .hero-logo { width: 72px; height: 72px; } } .hero-logo-meta { flex: 1; min-width: 0; } .hero-logo-meta .ver { font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; letter-spacing: 3px; color: var(--zyd-fg-dim, #aec0b7); text-transform: uppercase; } .hero-logo-meta .ver b { color: var(--zyd-accent, #00d6aa); font-weight: 400; } .hero-logo-meta h2 { font-family: 'Share Tech Mono', monospace; font-size: 1.05rem; color: var(--zyd-fg-bright, #f2f7f4); letter-spacing: 4px; margin-top: 0.2em; font-weight: 400; } .eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; letter-spacing: 3px; color: var(--zyd-accent, #00d6aa); text-transform: uppercase; margin-bottom: 1em; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zyd-accent, #00d6aa); box-shadow: 0 0 8px var(--zyd-accent, #00d6aa); animation: zydPulse 2.4s infinite; } @keyframes zydPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } h1.headline { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -1.5px; color: var(--zyd-fg-bright, #f2f7f4); margin-bottom: 0.5em; } h1.headline span { color: var(--zyd-accent, #00d6aa); } .lede { font-size: 1.1rem; color: var(--zyd-fg, #dbe6e0); max-width: 620px; margin-bottom: 1.6em; } .lede strong { color: var(--zyd-fg-bright, #f2f7f4); font-weight: 600; } /* ========================================================================== Buttons + badges ========================================================================== */ .hero-cta { display: flex; flex-wrap: wrap; gap: 0.7em; margin-bottom: 1.4em; } .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.85em 1.3em; border-radius: 4px; font-family: 'Share Tech Mono', monospace; font-size: 0.72rem; letter-spacing: 1.8px; text-transform: uppercase; border: 1px solid var(--zyd-border-2, #263028); background: var(--zyd-surface, #111413); color: var(--zyd-fg, #dbe6e0); transition: all 0.2s; cursor: pointer; } .btn:hover, .btn:focus-visible { border-color: var(--zyd-accent, #00d6aa); color: var(--zyd-accent, #00d6aa); background: var(--zyd-glow, rgba(0,214,170,0.06)); } .btn-primary { background: var(--zyd-accent, #00d6aa); border-color: var(--zyd-accent, #00d6aa); color: var(--zyd-on-accent, #06100c); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--zyd-accent-2, #00b894); border-color: var(--zyd-accent-2, #00b894); color: var(--zyd-on-accent, #06100c); box-shadow: 0 0 24px rgba(0,214,170,0.28); } html.theme-light .btn-primary:hover { box-shadow: 0 0 24px rgba(0,102,79,0.24); } .hero-meta { display: flex; flex-wrap: wrap; gap: 0.45em; } .badge { font-family: 'Share Tech Mono', monospace; font-size: 0.66rem; letter-spacing: 1px; padding: 0.35em 0.7em; border-radius: 2px; background: var(--zyd-glow, rgba(0,214,170,0.06)); border: 1px solid var(--zyd-border, #1e2620); color: var(--zyd-accent, #00d6aa); } /* ========================================================================== Terminal panel ========================================================================== */ .terminal { background: var(--zyd-bg-2, #0d100e); border: 1px solid var(--zyd-border, #1e2620); border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); overflow: hidden; } html.theme-light .terminal { box-shadow: 0 12px 30px rgba(23,35,32,0.12); } .term-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.6em 0.9em; border-bottom: 1px solid var(--zyd-border, #1e2620); background: var(--zyd-surface, #111413); } .term-bar .dots { display: flex; gap: 0.45em; } .term-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--zyd-border-2, #263028); } .term-bar .dots i.live { background: var(--zyd-accent, #00d6aa); box-shadow: 0 0 6px var(--zyd-accent, #00d6aa); } .term-bar .title { font-family: 'Share Tech Mono', monospace; font-size: 0.65rem; color: var(--zyd-fg-dim, #aec0b7); letter-spacing: 1.5px; } .term-body { padding: 1.1em 1.2em; font-family: 'Share Tech Mono', monospace; font-size: 0.78rem; line-height: 1.85; overflow-x: auto; } .term-body .tline { display: block; white-space: pre; } .term-body .ln { color: var(--zyd-fg-dim, #aec0b7); } .term-body .t { color: var(--zyd-accent, #00d6aa); } .term-body .v { color: var(--zyd-fg-bright, #f2f7f4); } .term-body .c { color: var(--zyd-muted, #9aa8a2); } .term-body .ok { color: var(--zyd-ok, #44cc88); } .cursor { display: inline-block; width: 8px; height: 14px; background: var(--zyd-accent, #00d6aa); vertical-align: -2px; animation: zydBlink 1s steps(2) infinite; } @keyframes zydBlink { 50% { opacity: 0; } } /* ========================================================================== Section headers + card grid ========================================================================== */ .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: 1.6em; flex-wrap: wrap; } .sec-num { font-family: 'Share Tech Mono', monospace; font-size: 0.65rem; letter-spacing: 3px; color: var(--zyd-fg-dim, #aec0b7); text-transform: uppercase; margin-bottom: 0.4em; } .sec-title { font-size: 1.7rem; font-weight: 600; color: var(--zyd-fg-bright, #f2f7f4); letter-spacing: -0.3px; } .sec-title em { color: var(--zyd-accent, #00d6aa); font-style: normal; } .sec-link { font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; letter-spacing: 1.5px; color: var(--zyd-fg-dim, #aec0b7); text-transform: uppercase; } .sec-link:hover { color: var(--zyd-accent, #00d6aa); } .grid { display: grid; gap: 1em; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 880px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .card { background: var(--zyd-bg-2, #0d100e); border: 1px solid var(--zyd-surface-2, #161a18); border-radius: 5px; padding: 1.3em; transition: all 0.22s; display: flex; flex-direction: column; min-height: 100%; position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--zyd-accent, #00d6aa); transform: scaleY(0); transform-origin: top; transition: transform 0.25s ease; } .card:hover { border-color: var(--zyd-border-2, #263028); background: var(--zyd-glow-2, rgba(0,214,170,0.03)); transform: translateY(-2px); } .card:hover::before { transform: scaleY(1); } html.theme-light .card { background: var(--zyd-surface, #fff); } .card-head { display: flex; align-items: center; gap: 0.7em; margin-bottom: 0.7em; } .card-icon { width: 34px; height: 34px; border-radius: 4px; flex-shrink: 0; background: var(--zyd-glow, rgba(0,214,170,0.07)); border: 1px solid var(--zyd-border, #1e2620); color: var(--zyd-accent, #00d6aa); display: flex; align-items: center; justify-content: center; font-family: 'Share Tech Mono', monospace; font-size: 0.85rem; } .card h3 { font-size: 1rem; font-weight: 600; color: var(--zyd-fg-bright, #f2f7f4); letter-spacing: 0.2px; } .card .tag { font-family: 'Share Tech Mono', monospace; font-size: 0.6rem; color: var(--zyd-fg-dim, #aec0b7); letter-spacing: 2px; text-transform: uppercase; margin-top: 0.15em; } .card p { font-size: 0.92rem; color: var(--zyd-fg-dim, #aec0b7); line-height: 1.55; flex-grow: 1; } .card .arrow { margin-top: 0.9em; font-family: 'Share Tech Mono', monospace; font-size: 0.65rem; letter-spacing: 1.5px; color: var(--zyd-accent, #00d6aa); text-transform: uppercase; } /* Spotlight tiles */ .spotlight { display: grid; gap: 1em; grid-template-columns: repeat(3, 1fr); } @media (max-width: 880px) { .spotlight { grid-template-columns: 1fr; } } .spot { position: relative; padding: 1.6em 1.5em; border-radius: 6px; background: linear-gradient(160deg, var(--zyd-surface, #111413) 0%, var(--zyd-bg, #0a0c0b) 100%); border: 1px solid var(--zyd-surface-2, #161a18); overflow: hidden; transition: all 0.25s; display: flex; flex-direction: column; gap: 0.6em; min-height: 200px; } html.theme-light .spot { background: linear-gradient(160deg, var(--zyd-surface, #fff) 0%, var(--zyd-bg-2, #e9eeec) 100%); } .spot::after { content: ''; position: absolute; top: -40%; right: -20%; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(0,214,170,0.18), transparent 70%); pointer-events: none; opacity: 0.6; transition: opacity 0.3s; } .spot:hover { border-color: var(--zyd-accent, #00d6aa); transform: translateY(-3px); } .spot:hover::after { opacity: 1; } .spot .kicker { font-family: 'Share Tech Mono', monospace; font-size: 0.62rem; color: var(--zyd-accent, #00d6aa); letter-spacing: 2px; text-transform: uppercase; } .spot h3 { font-size: 1.2rem; font-weight: 600; color: var(--zyd-fg-bright, #f2f7f4); } .spot p { font-size: 0.92rem; color: var(--zyd-fg-dim, #aec0b7); flex-grow: 1; } .spot .go { font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; letter-spacing: 1.8px; color: var(--zyd-accent, #00d6aa); text-transform: uppercase; } /* ========================================================================== Prose, tables, code, notes — the page-body furniture ========================================================================== */ .prose h2 { font-size: 1.5rem; font-weight: 600; color: var(--zyd-fg-bright, #f2f7f4); margin: 1.8em 0 0.5em; letter-spacing: -0.2px; } .prose h3 { font-size: 1.1rem; font-weight: 600; color: var(--zyd-fg-bright, #f2f7f4); margin: 1.4em 0 0.4em; } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose p { margin-bottom: 0.9em; color: var(--zyd-fg-dim, #aec0b7); } .prose p strong, .prose li strong { color: var(--zyd-fg-bright, #f2f7f4); font-weight: 600; } .prose ul, .prose ol { margin: 0 0 1.1em 1.2em; color: var(--zyd-fg-dim, #aec0b7); } .prose li { margin-bottom: 0.35em; } .prose a:not(.btn) { color: var(--zyd-link, #2ee6bd); border-bottom: 1px solid var(--zyd-border-2, #263028); } .prose a:not(.btn):hover { color: var(--zyd-accent, #00d6aa); border-bottom-color: var(--zyd-accent, #00d6aa); } code.inline, kbd { font-family: 'Share Tech Mono', monospace; font-size: 0.86em; background: var(--zyd-surface-2, #161a18); border: 1px solid var(--zyd-border, #1e2620); border-radius: 3px; padding: 0.1em 0.4em; color: var(--zyd-fg-bright, #f2f7f4); } kbd { border-bottom-width: 2px; border-bottom-color: var(--zyd-border-2, #263028); } pre.code { background: var(--zyd-bg-2, #0d100e); border: 1px solid var(--zyd-border, #1e2620); border-radius: 5px; padding: 1em 1.1em; overflow-x: auto; font-family: 'Share Tech Mono', monospace; font-size: 0.78rem; line-height: 1.75; color: var(--zyd-fg, #dbe6e0); margin-bottom: 1.1em; } pre.code .c { color: var(--zyd-muted, #9aa8a2); } pre.code .t { color: var(--zyd-accent, #00d6aa); } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.2em; } table.matrix { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 560px; } table.matrix th, table.matrix td { text-align: left; padding: 0.7em 0.9em; border-bottom: 1px solid var(--zyd-border, #1e2620); vertical-align: top; } table.matrix th { font-family: 'Share Tech Mono', monospace; font-size: 0.64rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--zyd-accent, #00d6aa); white-space: nowrap; } table.matrix td { color: var(--zyd-fg-dim, #aec0b7); } table.matrix td strong { color: var(--zyd-fg-bright, #f2f7f4); font-weight: 600; } table.matrix tbody tr:hover { background: var(--zyd-glow-2, rgba(0,214,170,0.03)); } .yes { color: var(--zyd-ok, #44cc88); font-family: 'Share Tech Mono', monospace; } .no { color: var(--zyd-muted, #9aa8a2); font-family: 'Share Tech Mono', monospace; } .note { background: var(--zyd-surface-2, #161a18); border-left: 2px solid var(--zyd-accent, #00d6aa); border-radius: 0 5px 5px 0; padding: 1em 1.2em; margin-bottom: 1.2em; font-size: 0.92rem; color: var(--zyd-fg-dim, #aec0b7); } .note strong { color: var(--zyd-fg-bright, #f2f7f4); } /* Definition rows — used by FAQ, glossary, docs */ .qa { border-top: 1px solid var(--zyd-border, #1e2620); padding: 1.2em 0; } .qa:last-of-type { border-bottom: 1px solid var(--zyd-border, #1e2620); } .qa h3 { font-size: 1.05rem; font-weight: 600; color: var(--zyd-fg-bright, #f2f7f4); margin-bottom: 0.35em; } .qa p { color: var(--zyd-fg-dim, #aec0b7); font-size: 0.95rem; } /* Page head band */ .page-head { padding: 3em 0 1.5em; } .page-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -1px; color: var(--zyd-fg-bright, #f2f7f4); margin-bottom: 0.35em; line-height: 1.05; } .page-head h1 span { color: var(--zyd-accent, #00d6aa); } .page-head p { font-size: 1.05rem; color: var(--zyd-fg-dim, #aec0b7); max-width: 680px; } .crumbs { font-family: 'Share Tech Mono', monospace; font-size: 0.64rem; letter-spacing: 2px; text-transform: uppercase; color: var(--zyd-fg-dim, #aec0b7); margin-bottom: 1em; } .crumbs a:hover { color: var(--zyd-accent, #00d6aa); } /* Pre-footer call to action */ .pre-cta { border: 1px solid var(--zyd-border, #1e2620); border-radius: 6px; background: var(--zyd-bg-2, #0d100e); padding: 2.2em; text-align: center; } html.theme-light .pre-cta { background: var(--zyd-surface, #fff); } .pre-cta h2 { font-size: 1.6rem; font-weight: 600; color: var(--zyd-fg-bright, #f2f7f4); margin-bottom: 0.4em; } .pre-cta p { color: var(--zyd-fg-dim, #aec0b7); max-width: 620px; margin: 0 auto 1.4em; } .pre-cta .hero-cta { justify-content: center; } /* ========================================================================== Footer ========================================================================== */ footer { border-top: 1px solid var(--zyd-surface-2, #161a18); padding: 2.5em 0 2em; margin-top: 3em; background: var(--zyd-bg, #0a0c0b); } html.theme-light footer { background: var(--zyd-bg-2, #e9eeec); } .foot-grid { display: grid; gap: 2em; grid-template-columns: 2fr 1fr 1fr 1fr; } @media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } } .foot-col h5 { font-family: 'Share Tech Mono', monospace; font-size: 0.66rem; color: var(--zyd-accent, #00d6aa); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.9em; } .foot-col a { display: block; padding: 0.25em 0; font-size: 0.88rem; color: var(--zyd-fg-dim, #aec0b7); transition: color 0.15s; } .foot-col a:hover { color: var(--zyd-accent, #00d6aa); } .foot-col p { font-size: 0.88rem; color: var(--zyd-fg-dim, #aec0b7); margin-bottom: 0.8em; } .foot-bottom { margin-top: 2em; padding-top: 1.4em; border-top: 1px dashed var(--zyd-surface-2, #161a18); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1em; font-family: 'Share Tech Mono', monospace; font-size: 0.65rem; color: var(--zyd-fg-dim, #aec0b7); letter-spacing: 1.5px; } .foot-bottom a:hover { color: var(--zyd-accent, #00d6aa); } /* ========================================================================== Floating theme toggle (injected by theme.js) ========================================================================== */ #zyd-theme-toggle { position: fixed; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 2147483600; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 13px; margin: 0; font-family: 'Share Tech Mono', 'Courier New', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1; cursor: pointer; color: var(--zyd-toggle-fg, #dbe6e0); background: var(--zyd-toggle-bg, rgba(17,20,19,0.92)); border: 1px solid var(--zyd-toggle-border, #263028); border-radius: 22px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0,0,0,0.35); transition: color .15s, border-color .15s, background .15s; -webkit-tap-highlight-color: transparent; } #zyd-theme-toggle:hover, #zyd-theme-toggle:focus-visible { color: var(--zyd-accent, #00d6aa); border-color: var(--zyd-accent, #00d6aa); outline: none; } #zyd-theme-toggle .tt-icon { width: 15px; height: 15px; display: inline-block; flex-shrink: 0; } @media (max-width: 480px) { #zyd-theme-toggle .tt-label { display: none; } #zyd-theme-toggle { padding: 8px; min-width: 44px; justify-content: center; } } /* ========================================================================== Motion: honoured here, unlike the product's own in-exam animations, because a marketing page has nothing to lose by holding still. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .hero-particles { display: none; } } :focus-visible { outline: 2px solid var(--zyd-accent, #00d6aa); outline-offset: 2px; }