/* ========================================================================= site.css — shared design system for Charith Purushotham portfolio Dual-identity "ML systems lab" aesthetic. Dark is the default. Theme model: :root = LIGHT tokens ("Lab Notebook"), html.dark = DARK overrides ("Aurora Deep-Space"). LIGHT — paper #f7f5ee, ink #1d1a14, hot vermillion #d92d3f, live green #157347; dotted notebook grid + red margin rule. DARK — deep space #060a12, aurora green #2ee6a6 + teal #38c6e6 + magenta whisper #b98cff; attention-grid shimmer + aurora ribbon. The FOUC guard defaults to .dark unless the user chose light, so LIGHT-only overrides are keyed with html:not(.dark). No build step — plain CSS. Used verbatim by every page. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Design tokens ------------------------------------------------------------------------- */ :root { /* ---- LIGHT = "Lab Notebook" (paper, ink, vermillion) ---- */ /* Surfaces (paper) */ --bg: #f7f5ee; --bg-2: #f1eee3; --panel: #fffdf6; --panel-2: #f3f0e6; --panel-hover: #fffefa; /* Text (ink) */ --text: #1d1a14; --text-muted: #4c473c; --text-soft: #6b6559; --text-faint: #6f6857; /* darkened from notebook #8d8676 for small-text AA */ /* Lines & borders */ --border: rgba(28,25,20,0.16); --border-soft: rgba(28,25,20,0.09); --rule: rgba(28,25,20,0.12); /* Accents — hot vermillion + live green (notebook) */ --accent: #d92d3f; /* vermillion (fills, borders, large text, icons) */ --accent-ink: #b3202f; /* darker vermillion for small accent TEXT (AA) */ --accent-2: #a01824; /* deep red (gradient tail) */ --accent-3: #d92d3f; --live: #157347; /* live green */ --amber: #b45309; /* WIP amber (rust) */ --accent-rgb: 217,45,63; --accent-2-rgb: 160,24,36; --live-rgb: 21,115,71; --amber-rgb: 180,83,9; /* Hero gradient text — vermillion -> ink */ --grad-a: #d92d3f; --grad-b: #1d1a14; /* Effects */ --glow: rgba(217,45,63,0.14); --shadow-card: 0 1px 2px rgba(28,25,20,0.05), 0 8px 22px rgba(28,25,20,0.07); --shadow-lift: 0 10px 28px rgba(217,45,63,0.16); --grid-line: rgba(28,25,20,0.06); --dot-line: rgba(28,25,20,0.10); /* Header glass */ --header-bg: rgba(247,245,238,0.80); --header-border: rgba(28,25,20,0.12); /* Type */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Spacing scale (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* Radii */ --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* Layout */ --maxw: 1120px; --nav-h: 62px; } html.dark { /* ---- DARK = "Aurora Deep-Space" (deep space, aurora green/teal) ---- */ --bg: #060a12; --bg-2: #081020; --panel: #0b1322; --panel-2: #0f1a2e; --panel-hover: #12203a; --text: #e6f1ee; --text-muted: #a6bcbe; --text-soft: #88a0a2; --text-faint: #6d868a; --border: rgba(110,225,195,0.15); --border-soft: rgba(110,225,195,0.08); --rule: rgba(110,225,195,0.12); --accent: #2ee6a6; /* aurora green */ --accent-ink: #2ee6a6; /* same — reads strong on deep space */ --accent-2: #38c6e6; /* teal */ --accent-3: #b98cff; /* magenta whisper */ --live: #34d399; /* live green */ --amber: #fbbf24; /* WIP amber */ --accent-rgb: 46,230,166; --accent-2-rgb: 56,198,230; --live-rgb: 52,211,153; --amber-rgb: 251,191,36; --grad-a: #2ee6a6; --grad-b: #38c6e6; --glow: rgba(46,230,166,0.18); --shadow-card: 0 1px 2px rgba(0,0,0,0.45), 0 12px 40px rgba(0,0,0,0.5); --shadow-lift: 0 12px 44px rgba(46,230,166,0.18); --grid-line: rgba(110,225,195,0.06); --dot-line: rgba(110,225,195,0.07); --header-bg: rgba(6,10,18,0.70); --header-border: rgba(110,225,195,0.12); } /* ------------------------------------------------------------------------- 2. Reset ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; overflow-x: hidden; transition: background-color .35s ease, color .35s ease; } img, svg, video, canvas { display: block; max-width: 100%; } img, video { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } ul, ol { list-style: none; padding: 0; } :where(h1, h2, h3, h4, h5, h6) { line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; } hr { border: none; border-top: 1px solid var(--rule); } /* Themed text selection — vermillion tint (light) / aurora tint (dark) */ ::selection { background: rgba(var(--accent-rgb), 0.22); color: var(--text); } /* Themed scrollbar */ * { scrollbar-color: rgba(var(--accent-rgb), 0.45) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bg-2); } ::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.40); border: 3px solid var(--bg-2); border-radius: var(--r-pill); } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.60); } /* ------------------------------------------------------------------------- 3. Typography scale ------------------------------------------------------------------------- */ .font-mono { font-family: var(--font-mono); } .display { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; overflow-wrap: break-word; } @media (max-width: 430px) { .display { font-size: clamp(1.9rem, 9.5vw, 2.4rem); } .h1 { font-size: clamp(1.7rem, 8vw, 2rem); } } .h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; } .h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; } .h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--text-muted); line-height: 1.55; } .muted { color: var(--text-muted); } .soft { color: var(--text-soft); } .faint { color: var(--text-faint); } .small { font-size: .875rem; } .tiny { font-size: .78rem; } .grad-text { background: linear-gradient(100deg, var(--grad-a), var(--grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ------------------------------------------------------------------------- 4. Layout containers & section spacing ------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); } .section { padding-block: clamp(56px, 9vw, 104px); } .section-sm { padding-block: clamp(40px, 6vw, 72px); } .section-alt { background: var(--bg-2); } .section-panel { background: var(--panel-2); } /* Page hero — gradient-washed intro band for non-index pages. Shared implementation; pages use `.page-hero bg-grid`. */ .page-hero { position: relative; overflow: hidden; padding-block: clamp(56px, 9vw, 104px); } /* LIGHT (notebook): faint vermillion glow + a red margin rule down the left. */ .page-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.55) 0 2px, transparent 2px), radial-gradient(760px 460px at 12% -10%, rgba(var(--accent-rgb), 0.08), transparent 60%); background-repeat: no-repeat, no-repeat; background-position: max(20px, 5vw) 0, 0 0; } /* DARK (aurora): attention-grid + aurora ribbon wash. */ html.dark .page-hero::before { background: linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px), radial-gradient(680px 320px at 20% -20%, rgba(46,230,166,0.20), transparent 62%), radial-gradient(600px 340px at 80% -10%, rgba(56,198,230,0.16), transparent 62%), radial-gradient(520px 360px at 60% 118%, rgba(185,140,255,0.12), transparent 60%); background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 0; background-size: 46px 46px, 46px 46px, auto, auto, auto; } .page-hero .container { position: relative; z-index: 1; } /* Spacing utilities (margin steps on the 4px scale) */ .mt-1{margin-top:var(--sp-1);} .mb-1{margin-bottom:var(--sp-1);} .mt-2{margin-top:var(--sp-2);} .mb-2{margin-bottom:var(--sp-2);} .mt-3{margin-top:var(--sp-3);} .mb-3{margin-bottom:var(--sp-3);} .mt-4{margin-top:var(--sp-4);} .mb-4{margin-bottom:var(--sp-4);} .mt-6{margin-top:var(--sp-6);} .mb-6{margin-bottom:var(--sp-6);} .mt-8{margin-top:var(--sp-8);} .mb-8{margin-bottom:var(--sp-8);} .mt-12{margin-top:var(--sp-12);} .mb-12{margin-bottom:var(--sp-12);} .stack { display: flex; flex-direction: column; } .grid { display: grid; gap: var(--sp-6); } /* Let grid items shrink below their min-content so long tokens/text wrap instead of forcing horizontal overflow (fixes transient 3px page overflow). */ .grid > * { min-width: 0; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .flow > * + * { margin-top: var(--sp-4); } .center { text-align: center; } .mx-auto { margin-inline: auto; } .measure { max-width: 62ch; } /* Decorative page backgrounds */ .bg-grid { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px; } /* DARK: attention-grid gently drifts — a living "shimmer". */ html.dark .bg-grid { animation: gridShimmer 22s linear infinite; } @keyframes gridShimmer { to { background-position: 56px 56px, 56px 56px; } } /* LIGHT: dotted notebook-paper grid (24px like ruled dot paper). */ .bg-dots { background-image: radial-gradient(var(--dot-line) 1px, transparent 1px); background-size: 24px 24px; } /* ------------------------------------------------------------------------- 5. Header / nav (sticky, glass, hamburger) ------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--header-border); } .nav { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .brand { display: inline-flex; align-items: center; gap: var(--sp-3); font-weight: 700; letter-spacing: -0.02em; font-size: 1.02rem; color: var(--text); } .brand-sub { font-family: var(--font-mono); font-size: .68rem; color: var(--text-faint); letter-spacing: .02em; } .nav-links { display: flex; align-items: center; gap: var(--sp-1); } .nav-link { position: relative; padding: 8px 12px; border-radius: var(--r-sm); font-size: .9rem; color: var(--text-muted); transition: color .2s, background-color .2s; } .nav-link:hover { color: var(--text); background: var(--panel-2); } .nav-link.active { color: var(--text); } .nav-link.active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .nav-actions { display: flex; align-items: center; gap: var(--sp-2); } .icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--text-muted); border: 1px solid transparent; transition: background-color .2s, color .2s, border-color .2s; } .icon-btn:hover { color: var(--text); background: var(--panel-2); border-color: var(--border-soft); } .icon-btn svg { width: 18px; height: 18px; } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: block; } html.dark .theme-toggle .sun { display: block; } html.dark .theme-toggle .moon { display: none; } .nav-toggle { display: none; } /* Mobile nav */ @media (max-width: 820px) { .nav-toggle { display: inline-flex; } .nav-links { position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px clamp(20px,5vw,40px) 20px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-card); transform-origin: top; display: none; } .nav-links.open { display: flex; } .nav-link { padding: 12px; font-size: 1rem; border-radius: var(--r-sm); } .nav-link.active::after { left: 12px; right: auto; width: 18px; } } /* ------------------------------------------------------------------------- 6. Buttons ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 11px 18px; border-radius: var(--r-md); font-size: .92rem; font-weight: 600; letter-spacing: -0.01em; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, background-color .2s, border-color .2s, box-shadow .2s, color .2s; white-space: nowrap; } .btn svg { width: 17px; height: 17px; flex: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(100deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.28); } .btn-primary:hover { box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.42); transform: translateY(-2px); } html.dark .btn-primary { color: #04120d; } .btn-ghost { background: var(--panel); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-card); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); transform: translateY(-2px); } .btn-quiet { background: transparent; color: var(--text-muted); border-color: var(--border); } .btn-quiet:hover { color: var(--text); border-color: var(--text-faint); } .btn-sm { padding: 7px 13px; font-size: .82rem; border-radius: var(--r-sm); } .btn-lg { padding: 13px 22px; font-size: 1rem; } /* ------------------------------------------------------------------------- 7. System label (mono eyebrow) ------------------------------------------------------------------------- */ .syslabel { font-family: var(--font-mono); font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: var(--sp-2); } .syslabel .accent { color: var(--accent-ink); } .eyebrow { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; color: var(--accent-ink); margin-bottom: var(--sp-3); display: inline-block; } /* ------------------------------------------------------------------------- 8. Cards & panels ------------------------------------------------------------------------- */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-card); transition: transform .25s ease, border-color .25s, box-shadow .25s, background-color .25s; } .card-hover:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), 0.5); box-shadow: var(--shadow-lift); } .card-link { display: block; color: inherit; } .panel { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); } .panel-inset { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: var(--sp-5); } .card-title { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; } .card-meta { font-family: var(--font-mono); font-size: .74rem; color: var(--text-faint); letter-spacing: .04em; } /* ------------------------------------------------------------------------- 9. Telemetry stat blocks (signature) ------------------------------------------------------------------------- */ .tl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); } .tl-stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); position: relative; overflow: hidden; } .tl-stat::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent); opacity: .8; } .tl-num { font-family: var(--font-mono); font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--text); display: block; } .tl-num .unit { color: var(--accent); font-size: .5em; margin-left: 2px; } .tl-label { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); } /* ------------------------------------------------------------------------- 10. Status / LIVE pulse dots & badges ------------------------------------------------------------------------- */ .status { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text-muted); } .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-faint); } .dot-live { background: var(--live); animation: pulseDot 2s infinite; } .dot-amber { background: var(--amber); } .dot-cyan { background: var(--accent); } .status-live { color: var(--live); border-color: rgba(var(--live-rgb), 0.35); } .status-live .dot { background: var(--live); } .status-wip { color: var(--amber); border-color: rgba(var(--amber-rgb),0.35); } .status-wip .dot { background: var(--amber); } @keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--live-rgb), 0.6); } 70% { box-shadow: 0 0 0 7px rgba(var(--live-rgb), 0); } } /* Chips / tech tags */ .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .chip { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .02em; padding: 4px 10px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--border-soft); color: var(--text-muted); transition: color .2s, border-color .2s; } .chip:hover { color: var(--accent-ink); border-color: rgba(var(--accent-rgb), 0.4); } .badge { font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-sm); background: rgba(var(--accent-rgb), 0.12); color: var(--accent-ink); border: 1px solid rgba(var(--accent-rgb), 0.28); } /* ------------------------------------------------------------------------- 11. Pipeline flow (node → connector → node) ------------------------------------------------------------------------- */ .pipe { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); font-family: var(--font-mono); } .pipe-node { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 8px 12px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--border); font-size: .8rem; color: var(--text); white-space: nowrap; } .pipe-node .dot { width: 6px; height: 6px; background: var(--accent); } .pipe-conn { flex: 1 1 24px; min-width: 24px; height: 2px; position: relative; background: repeating-linear-gradient(90deg, var(--text-faint) 0, var(--text-faint) 5px, transparent 5px, transparent 11px); background-size: 22px 2px; animation: pipeFlow 1s linear infinite; opacity: .6; } @keyframes pipeFlow { to { background-position: 22px 0; } } .pipe-conn::after { content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); border-left: 5px solid var(--text-faint); border-top: 3px solid transparent; border-bottom: 3px solid transparent; } @media (max-width: 600px) { .pipe { flex-direction: column; align-items: stretch; } .pipe-node { justify-content: flex-start; } .pipe-conn { width: 2px; height: 18px; min-width: 0; flex: none; margin-left: 18px; background: repeating-linear-gradient(180deg, var(--text-faint) 0, var(--text-faint) 5px, transparent 5px, transparent 11px); background-size: 2px 22px; animation: pipeFlowV 1s linear infinite; } .pipe-conn::after { right: 50%; top: auto; bottom: -1px; transform: translateX(50%); border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid var(--text-faint); border-bottom: none; } } @keyframes pipeFlowV { to { background-position: 0 22px; } } /* ------------------------------------------------------------------------- 12. Footer ------------------------------------------------------------------------- */ .site-footer { background: var(--bg-2); border-top: 1px solid var(--border); padding-block: var(--sp-12); color: var(--text-faint); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6); } .footer-copy { font-size: .85rem; color: var(--text-soft); } .footer-copy .mono { font-family: var(--font-mono); font-size: .8rem; } .social-links { display: flex; align-items: center; gap: var(--sp-2); } .social-link { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--text-muted); border: 1px solid var(--border); background: var(--panel); transition: color .2s, border-color .2s, transform .2s, background-color .2s; } .social-link:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),0.5); transform: translateY(-2px); } .social-link svg { width: 19px; height: 19px; } /* ------------------------------------------------------------------------- 13. Scroll reveal utilities ------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; } .reveal.revealed { opacity: 1; transform: none; } .reveal-left { transform: translateX(-28px); } .reveal-right { transform: translateX(28px); } .reveal-scale { transform: scale(.96); } /* stagger delays */ .reveal.d1 { transition-delay: .06s; } .reveal.d2 { transition-delay: .12s; } .reveal.d3 { transition-delay: .18s; } .reveal.d4 { transition-delay: .24s; } .reveal.d5 { transition-delay: .30s; } /* ------------------------------------------------------------------------- 14. Hero canvas holder ------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; } .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .hero-content { position: relative; z-index: 1; } /* ------------------------------------------------------------------------- 15. Focus states & a11y ------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--panel); color: var(--text); padding: 10px 16px; border-radius: var(--r-sm); border: 1px solid var(--border); } .skip-link:focus { left: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- 16. Reduced motion ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } .dot-live { animation: none; } .pipe-conn { animation: none; } .bg-grid, html.dark .bg-grid { animation: none !important; } } /* ------------------------------------------------------------------------- 17. Responsive breakpoints ------------------------------------------------------------------------- */ @media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; align-items: flex-start; } .btn { width: 100%; justify-content: center; } .btn-row .btn { width: auto; } } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); } @media (max-width: 460px) { .btn-row { flex-direction: column; align-items: stretch; } .btn-row .btn { width: 100%; justify-content: center; } } /* ========================================================================= 18. Visual-experience additions (redesign-v2 visual pass) Scroll-story pipeline · sport illustrations · media panels · modality strip · hero parallax. Additive only; theme-aware via tokens. ========================================================================= */ /* ---- 18.1 Modality strip (index / research) ------------------------------ */ .modalities { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 6px 0; } .mod-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .82rem; color: var(--text); padding: 8px 15px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--panel); transition: color .2s, border-color .2s, transform .2s; } .mod-chip:hover { color: var(--accent-ink); border-color: rgba(var(--accent-rgb), .4); transform: translateY(-2px); } .mod-chip svg { width: 16px; height: 16px; color: var(--accent); flex: none; } .mod-cap { flex-basis: 100%; text-align: center; margin-top: 6px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); } /* ---- 18.2 Scroll-story pipeline (index) ---------------------------------- */ .scrollstory { position: relative; height: 300vh; margin: 8px 0 20px; } .ss-sticky { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: flex; align-items: center; } .ss-inner { width: 100%; } .ss-topline { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: clamp(28px, 6vh, 52px); } .ss-kicker { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .ss-counter { font-size: .82rem; color: var(--text-faint); } .ss-counter .ss-idx { color: var(--text); font-weight: 600; } .ss-rail { position: relative; } .ss-line { position: absolute; left: 10%; right: 10%; top: 27px; height: 2px; background: var(--rule); border-radius: 2px; z-index: 1; } .ss-line-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px; transition: width .25s linear; } .ss-packet { position: absolute; top: 27px; left: 10%; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); z-index: 3; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18), 0 0 18px 2px rgba(var(--accent-rgb), .55); transition: left .25s linear, top .25s linear; } .ss-stages { display: flex; position: relative; z-index: 2; } .ss-stage { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 0 4px; } .ss-node { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border); background: var(--panel); color: var(--text-faint); transition: color .4s, border-color .4s, background-color .4s, box-shadow .4s, transform .4s; } .ss-node svg { width: 25px; height: 25px; } .ss-stage.is-done .ss-node { border-color: rgba(var(--accent-rgb), .55); color: var(--accent); } .ss-stage.is-active .ss-node { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .12); transform: scale(1.14); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .10), 0 0 26px 3px rgba(var(--accent-rgb), .35); } .ss-name { font-family: var(--font-mono); font-size: .78rem; color: var(--text-soft); transition: color .3s; } .ss-stage.is-active .ss-name { color: var(--text); font-weight: 600; } .ss-micro { font-family: var(--font-mono); font-size: .68rem; color: var(--text-faint); min-height: 1.1em; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s, color .35s; } .ss-stage.is-active .ss-micro { opacity: 1; transform: none; color: var(--accent); } .ss-caption-wrap { position: relative; margin-top: clamp(28px, 6vh, 48px); min-height: 84px; } .ss-caption { position: absolute; inset: 0; margin-inline: auto; max-width: 62ch; text-align: center; line-height: 1.5; color: var(--text-muted); font-size: clamp(1rem, 1.6vw, 1.22rem); opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s; } .ss-caption.is-active { opacity: 1; transform: none; } .ss-caption b { color: var(--text); font-weight: 600; } @media (max-width: 680px) { .scrollstory { height: 240vh; } .ss-rail { min-height: 46vh; display: flex; align-items: stretch; } .ss-line { left: 27px; right: auto; top: 6%; bottom: 6%; width: 2px; height: auto; } .ss-line-fill { width: 100%; height: 0; background: linear-gradient(180deg, var(--accent), var(--accent-2)); transition: height .25s linear; } .ss-packet { left: 27px; top: 6%; transition: top .25s linear; } .ss-stages { flex-direction: column; justify-content: space-between; flex: 1; width: 100%; } .ss-stage { flex-direction: row; align-items: center; gap: 16px; text-align: left; padding: 0; } .ss-node { width: 46px; height: 46px; flex: none; } .ss-node svg { width: 21px; height: 21px; } .ss-caption-wrap { min-height: 118px; margin-top: 26px; } .ss-caption { text-align: left; } } @media (prefers-reduced-motion: reduce) { .scrollstory { height: auto !important; } .ss-sticky { position: static !important; height: auto !important; display: block; } .ss-line-fill { width: 100% !important; height: 100% !important; } .ss-packet { display: none; } .ss-stage .ss-node { border-color: var(--accent); color: var(--accent); } .ss-micro { opacity: 1 !important; transform: none !important; color: var(--accent) !important; } .ss-caption-wrap { min-height: 0; } .ss-caption { position: static; opacity: 1 !important; transform: none !important; margin-top: 10px; } } /* ---- 18.3 Sport-card CV illustrations (experience) ----------------------- */ .sportviz { width: 100%; height: 128px; display: block; margin: 2px 0 6px; overflow: visible; } .sportviz text { font-family: var(--font-mono); } .vz-frame { stroke: var(--rule); stroke-width: 1.3; fill: none; } .vz-accent { stroke: var(--accent); } .vz-fillsoft { fill: rgba(var(--accent-rgb), .12); } .vz-tag { fill: var(--text-faint); font-size: 10px; letter-spacing: .04em; } /* animated members hidden by default; revealed via .viz-in (see JS) */ .sv-anim { opacity: 0; } .viz-in .sv-anim { opacity: 1; } .viz-in .sv-fade { animation: vzFade .6s ease both; } .viz-in .sv-pop { animation: vzPop .5s cubic-bezier(.2,1.2,.3,1) both; } .viz-in .sv-draw { opacity: 1; stroke-dasharray: 480; stroke-dashoffset: 480; animation: vzDraw 1.1s ease forwards; } .viz-in .sv-grow { opacity: 1; transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; animation: vzGrow .8s cubic-bezier(.2,.8,.2,1) forwards; } .viz-in .sv-pulse { animation: vzPulse 1.4s ease-out both; } @keyframes vzFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes vzPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } } @keyframes vzDraw { to { stroke-dashoffset: 0; } } @keyframes vzGrow { to { transform: scaleY(1); } } @keyframes vzPulse { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: .9; } 100% { opacity: 0; transform: scale(1.7); } } .sv-pop, .sv-grow { transform-box: fill-box; transform-origin: center; } @media (prefers-reduced-motion: reduce) { .sportviz .sv-anim { opacity: 1 !important; } .sportviz .sv-draw { stroke-dashoffset: 0 !important; animation: none !important; } .sportviz .sv-grow { transform: none !important; animation: none !important; } .sportviz .sv-pop, .sportviz .sv-fade, .sportviz .sv-pulse { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ---- 18.4 Media panels (video / framed image) --------------------------- */ .media-panel { position: relative; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--panel-2); box-shadow: var(--shadow-card); margin: var(--sp-2) 0 var(--sp-1); } .media-panel video, .media-panel img { width: 100%; height: auto; display: block; } .media-cap { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .03em; color: var(--text-faint); padding: 8px 12px; border-top: 1px solid var(--rule); background: var(--panel); } .media-frame { position: relative; } .media-frame .brk { position: absolute; width: 20px; height: 20px; z-index: 2; pointer-events: none; border: 2px solid var(--accent); opacity: .9; } .media-frame .brk.tl { top: 9px; left: 9px; border-right: none; border-bottom: none; } .media-frame .brk.tr { top: 9px; right: 9px; border-left: none; border-bottom: none; } .media-frame .brk.bl { bottom: 9px; left: 9px; border-right: none; border-top: none; } .media-frame .brk.br { bottom: 9px; right: 9px; border-left: none; border-top: none; } .media-frame .frame-tag { position: absolute; top: 10px; right: 12px; z-index: 3; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .4); border-radius: var(--r-pill); padding: 3px 9px; } /* ---- 18.5 Hero parallax (page-hero + home-hero backgrounds) ------------- */ @media (prefers-reduced-motion: no-preference) { .page-hero::before, .home-hero::before { transform: translateY(var(--par, 0)); will-change: transform; } } /* ---- 18.3b Sport-illustration element palette --------------------------- */ .sv-arc { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; } .sv-box { stroke: var(--accent); stroke-width: 1.6; fill: rgba(var(--accent-rgb), .12); } .sv-ball { fill: var(--accent); } .sv-check { stroke: var(--live); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; } .sv-in { fill: var(--live); font-size: 12px; font-weight: 700; } .sv-num { fill: var(--text); font-weight: 700; } .sv-lbl { fill: var(--text-faint); font-size: 10px; } .sv-seg { fill: var(--border); } .sv-seg.on { fill: var(--accent); } .sv-bar { fill: rgba(var(--accent-rgb), .10); stroke: var(--accent); stroke-width: 1.4; } .sv-barfill { fill: var(--accent); } .sv-prob { stroke: var(--accent-2); stroke-width: 1.6; fill: none; stroke-dasharray: 2 4; } .sv-dot { fill: var(--accent); } .sv-ringbg { stroke: var(--rule); stroke-width: 5; fill: none; } .sv-ring { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; fill: none; stroke-dasharray: 277; stroke-dashoffset: 277; } .viz-in .sv-ring { opacity: 1; animation: vzRing 1.2s ease .1s forwards; } @keyframes vzRing { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .sportviz .sv-ring { stroke-dashoffset: 0 !important; animation: none !important; opacity: 1 !important; } } /* ---- 18.6 Event/org branding badge (sport cards + live cards) ----------- */ .org-badge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); background: rgba(var(--accent-rgb), .10); border: 1px solid rgba(var(--accent-rgb), .35); border-radius: var(--r-pill); padding: 4px 11px; white-space: nowrap; } .org-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } /* ---- 18.3c stroked pulse ring (basketball impact) ---------------------- */ .sv-ringpulse { fill: none; stroke: var(--accent); stroke-width: 2; } .sportviz .sv-pulse { transform-box: fill-box; transform-origin: center; }