/* ============================================================ Tokens The page follows the browser's colour-scheme preference on its own. The toggle in the nav writes data-theme onto to override that, so the cascade below is ordered: dark default -> light when the OS asks for it -> explicit data-theme always wins. --amber stays the same bright fill in both themes so the brand reads identically, but amber text on a near-white page only reaches ~2.1:1, so text and links use --amber-text, which darkens in light mode. ============================================================ */ :root { --font-sans: 'Inter', -apple-system, system-ui, sans-serif; --font-display: 'Space Grotesk', 'Inter', -apple-system, system-ui, sans-serif; --font-mono: 'Fira Code', 'SF Mono', monospace; --radius-card: 8px; --radius-control: 6px; --nav-h: 76px; --nav-h-scrolled: 62px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --t: 0.25s cubic-bezier(0.16, 1, 0.3, 1); } /* ---- Dark (default) ---- */ :root, :root[data-theme='dark'] { color-scheme: dark; --bg: #0A0A0F; --bg-raised: #111118; --bg-card: #15151E; --line: rgba(148, 163, 184, 0.1); --line-strong: rgba(148, 163, 184, 0.2); /* Solid, not alpha: composited alpha text dropped below WCAG AA on this background */ --text: #e2e8f0; --text-body: #a8b4c8; --text-dim: #94a3b8; --text-faint: #808fa3; --amber: #f59e0b; --amber-text: #f59e0b; --amber-soft: rgba(245, 158, 11, 0.12); --amber-line: rgba(245, 158, 11, 0.25); --amber-bright: #fbbf24; --on-amber: #0A0A0F; --nav-bg: rgba(10, 10, 15, 0.88); --tint: rgba(255, 255, 255, 0.03); --tint-soft: rgba(255, 255, 255, 0.02); /* Lifts the duotone shadows just enough to sit on the dark page. */ --duotone-screen: #0A0A0F; } /* ---- Light, chosen by the browser ---- */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { color-scheme: light; --bg: #f7f9fb; --bg-raised: #ffffff; --bg-card: #ffffff; --line: rgba(15, 25, 35, 0.12); --line-strong: rgba(15, 25, 35, 0.2); --text: #0d1721; --text-body: #41505f; --text-dim: #556374; --text-faint: #5f6d7e; --amber: #f59e0b; --amber-text: #96560a; --amber-soft: rgba(180, 83, 9, 0.1); --amber-line: rgba(150, 86, 10, 0.45); --amber-bright: #b45309; --on-amber: #0A0A0F; --nav-bg: rgba(247, 249, 251, 0.88); --tint: rgba(15, 25, 35, 0.04); --tint-soft: rgba(15, 25, 35, 0.03); /* Screening a near-white page colour would blow the duotone out to flat white, so light mode drops the lift entirely. */ --duotone-screen: transparent; } } /* ---- Light, chosen explicitly by the toggle ---- */ :root[data-theme='light'] { color-scheme: light; --bg: #f7f9fb; --bg-raised: #ffffff; --bg-card: #ffffff; --line: rgba(15, 25, 35, 0.12); --line-strong: rgba(15, 25, 35, 0.2); --text: #0d1721; --text-body: #41505f; --text-dim: #556374; --text-faint: #5f6d7e; --amber: #f59e0b; --amber-text: #96560a; --amber-soft: rgba(180, 83, 9, 0.1); --amber-line: rgba(150, 86, 10, 0.45); --amber-bright: #b45309; --on-amber: #0A0A0F; --nav-bg: rgba(247, 249, 251, 0.88); --tint: rgba(15, 25, 35, 0.04); --tint-soft: rgba(15, 25, 35, 0.03); --duotone-screen: transparent; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text-body); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body.menu-open { overflow: hidden; } img { max-width: 100%; display: block; } a { color: var(--amber-text); text-decoration: none; transition: var(--t); } ::selection { background: var(--amber-soft); color: var(--text); } a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: var(--radius-control); } .skip-link { position: absolute; top: -100px; left: 16px; z-index: 100; padding: 10px 18px; color: var(--on-amber); background: var(--amber); border-radius: var(--radius-control); font-family: var(--font-mono); font-size: 13px; font-weight: 500; transition: top 0.2s ease; } .skip-link:focus { top: 16px; } /* ============ Loader ============ */ .loader { position: fixed; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: opacity 0.4s ease, visibility 0.4s ease; } .loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Only JS ever removes the overlay, so without JS it would sit there as a full-screen opaque panel and the page would look blank. */ html:not(.js) .loader { display: none; } .loader-coin svg { width: 92px; height: 92px; } .loader .coin-ring { fill: none; stroke: var(--amber); stroke-width: 4; stroke-dasharray: 277; stroke-dashoffset: 277; transform-origin: center; animation: coinDraw 0.55s var(--ease) forwards 0.1s; } .loader .coin-letter { fill: var(--amber); font-family: var(--font-mono); font-size: 40px; font-weight: 500; opacity: 0; animation: coinLetter 0.3s ease forwards 0.5s; } @keyframes coinDraw { to { stroke-dashoffset: 0; } } @keyframes coinLetter { to { opacity: 1; } } /* ============ Header ============ */ .header { position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-h); z-index: 50; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: height var(--t), transform var(--t), border-color var(--t); } .header.scrolled { height: var(--nav-h-scrolled); border-bottom-color: var(--line); } #navSentinel { position: absolute; top: 0; height: 1px; width: 1px; } .nav { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px; } .logo { color: var(--text); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .logo-accent { color: var(--amber-text); } .logo:hover { color: var(--amber-text); } .nav-right { display: flex; align-items: center; gap: 8px; } /* Theme toggle */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; color: var(--text-dim); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-control); cursor: pointer; transition: var(--t); } .theme-toggle:hover { color: var(--amber-text); border-color: var(--amber-line); } .theme-toggle svg { width: 17px; height: 17px; } /* Show the icon for the theme you would switch TO. */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .theme-toggle .icon-sun { display: block; } :root:not([data-theme='dark']) .theme-toggle .icon-moon { display: none; } } :root[data-theme='light'] .theme-toggle .icon-sun { display: block; } :root[data-theme='light'] .theme-toggle .icon-moon { display: none; } :root[data-theme='dark'] .theme-toggle .icon-sun { display: none; } :root[data-theme='dark'] .theme-toggle .icon-moon { display: block; } .mobile-menu .theme-toggle { width: auto; gap: 8px; padding: 10px 18px; font-size: 13px; } .nav-links { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .nav-links a { display: block; padding: 8px 14px; color: var(--text-dim); font-size: 13px; font-weight: 500; border-radius: var(--radius-control); } .nav-links a:hover { color: var(--amber-text); background: var(--tint); } .resume-btn { margin-left: 12px; padding: 9px 18px; color: var(--on-amber); background: var(--amber); border-radius: var(--radius-control); font-size: 13px; font-weight: 600; line-height: 1; } .resume-btn:hover { background: var(--amber-bright); transform: translateY(-1px); } .resume-btn:active { transform: scale(0.98); } .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; background: transparent; border: 0; cursor: pointer; z-index: 60; } .hamburger span { display: block; width: 26px; height: 2px; border-radius: 2px; background: var(--amber); transition: var(--t); } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu */ .mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(78vw, 360px); z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; background: var(--bg-raised); border-left: 1px solid var(--line); transform: translateX(100%); visibility: hidden; transition: transform 0.3s var(--ease), visibility 0s linear 0.3s; } .mobile-menu.open { transform: translateX(0); visibility: visible; transition: transform 0.3s var(--ease), visibility 0s linear 0s; } @media (min-width: 861px) { .mobile-menu { display: none; } } .mobile-links { list-style: none; margin: 0 0 28px; padding: 0; text-align: center; } .mobile-links li { margin: 16px 0; } .mobile-links a { color: var(--text); font-size: 17px; font-weight: 500; } .mobile-links a:hover { color: var(--amber-text); } /* ============ Layout ============ */ main { max-width: 1240px; margin: 0 auto; padding: 0 40px; } .section { padding: 88px 0; } .section-heading { margin: 0 0 44px; color: var(--text); font-family: var(--font-display); font-size: clamp(28px, 4vw, 38px); font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 20px; } .section-heading::after { content: ''; flex: 1; height: 1px; background: var(--line); } .subsection-heading { margin: 0 0 24px; color: var(--text); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; } .section-lead { max-width: 60ch; margin: -24px 0 32px; color: var(--text-dim); font-size: 15px; line-height: 1.7; } /* ============ Hero ============ */ .hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100dvh; padding: calc(var(--nav-h) + 24px) 0 72px; overflow: hidden; } .hero-gradient { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 60% 50% at 70% 20%, rgba(245, 158, 11, 0.08) 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 20% 80%, rgba(245, 158, 11, 0.05) 0%, transparent 70%), radial-gradient(ellipse 80% 40% at 50% 50%, rgba(99, 102, 241, 0.04) 0%, transparent 60%); animation: heroShift 12s ease-in-out infinite alternate; } @keyframes heroShift { 0% { opacity: 0.7; transform: scale(1) translate(0, 0); } 50% { opacity: 1; transform: scale(1.05) translate(-1%, 2%); } 100% { opacity: 0.8; transform: scale(1.02) translate(1%, -1%); } } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 56px; align-items: center; } .hero-content { max-width: 780px; } /* Hero visual: a market-share read that draws itself in, mirroring the Vahan trend work described alongside it. */ .hero-visual { width: 100%; } .viz { display: block; width: 100%; height: auto; overflow: visible; } .viz-grid line { stroke: var(--line); stroke-width: 1; } .viz-axis { stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; } .viz-bars rect { fill: var(--amber); opacity: 0.16; transform-origin: center bottom; } .viz-line { stroke: var(--amber); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .viz-proj { stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 6; opacity: 0.55; } .viz-nodes circle { fill: var(--amber); stroke: var(--bg); stroke-width: 2.5; } .viz-pulse { fill: none; stroke: var(--amber); stroke-width: 1.5; opacity: 0; } .viz-stop-top { stop-color: var(--amber); stop-opacity: 0.2; } .viz-stop-bottom { stop-color: var(--amber); stop-opacity: 0; } /* The chart is fully drawn by default. Only where motion is welcome do the parts start hidden and draw themselves in, so an animation that is paused, skipped, or never started can't leave an empty frame in the hero. */ @media (prefers-reduced-motion: no-preference) { .js .viz-grid, .js .viz-area { opacity: 0; } .js .viz-axis, .js .viz-line, .js .viz-proj { stroke-dasharray: 1; stroke-dashoffset: 1; } .js .viz-bars rect { transform: scaleY(0); } .js .viz-nodes circle { opacity: 0; transform: scale(0); transform-origin: center; transform-box: fill-box; } body.loaded .viz-grid { animation: vizFade 0.7s ease-out 0.15s both; } body.loaded .viz-axis { animation: vizDraw 0.9s ease-out 0.3s both; } body.loaded .viz-bars rect { animation: vizGrow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } body.loaded .viz-bars rect:nth-child(1) { animation-delay: 0.75s; } body.loaded .viz-bars rect:nth-child(2) { animation-delay: 0.85s; } body.loaded .viz-bars rect:nth-child(3) { animation-delay: 0.95s; } body.loaded .viz-bars rect:nth-child(4) { animation-delay: 1.05s; } body.loaded .viz-bars rect:nth-child(5) { animation-delay: 1.15s; } body.loaded .viz-line { animation: vizDraw 1.5s cubic-bezier(0.65, 0, 0.35, 1) 1.3s both; } body.loaded .viz-area { animation: vizFade 0.9s ease-out 2.2s both; } body.loaded .viz-proj { animation: vizDraw 0.6s ease-out 2.75s both; } body.loaded .viz-nodes circle { animation: vizPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } body.loaded .viz-nodes circle:nth-child(1) { animation-delay: 1.45s; } body.loaded .viz-nodes circle:nth-child(2) { animation-delay: 1.72s; } body.loaded .viz-nodes circle:nth-child(3) { animation-delay: 1.99s; } body.loaded .viz-nodes circle:nth-child(4) { animation-delay: 2.26s; } body.loaded .viz-nodes circle:nth-child(5) { animation-delay: 2.53s; } body.loaded .viz-pulse { animation: vizPulse 2.6s ease-out 3.2s infinite; } } @keyframes vizFade { from { opacity: 0; } to { opacity: 1; } } @keyframes vizDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes vizGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes vizPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } @keyframes vizPulse { 0% { opacity: 0.7; transform: scale(0.6); transform-origin: center; transform-box: fill-box; } 70% { opacity: 0; transform: scale(2.1); transform-origin: center; transform-box: fill-box; } 100% { opacity: 0; transform: scale(2.1); transform-origin: center; transform-box: fill-box; } } .hero-name { margin: 0 0 6px; color: var(--text); font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; } .hero-subtitle { margin: 0 0 20px; color: var(--text-dim); font-family: var(--font-display); font-size: clamp(20px, 2.8vw, 28px); font-weight: 500; letter-spacing: -0.01em; } .hero-text { max-width: 46ch; margin: 0 0 32px; font-size: 16px; line-height: 1.7; } .hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; } .hero-badge { padding: 5px 12px; color: var(--text-dim); background: var(--tint); border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; } .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; } .hero-microcopy { margin: 14px 0 0; color: var(--text-faint); font-family: var(--font-mono); font-size: 12px; } .btn-primary, .btn-outline { display: inline-block; padding: 13px 26px; border-radius: var(--radius-control); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; transition: var(--t); } .btn-primary { color: var(--on-amber); background: var(--amber); border: 1px solid var(--amber); } .btn-primary:hover { background: var(--amber-bright); border-color: var(--amber-bright); transform: translateY(-2px); } .btn-primary:active { transform: scale(0.98); } .btn-outline { color: var(--amber-text); background: transparent; border: 1px solid var(--amber-line); } .btn-outline:hover { background: var(--amber-soft); border-color: var(--amber); transform: translateY(-2px); } .btn-outline:active { transform: scale(0.98); } /* Coin emblem */ /* ============ Route bar ============ */ .route-bar { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .route-track { position: absolute; top: 33px; left: 10%; right: 10%; height: 1px; background: var(--amber-line); opacity: 0.35; } .route-stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; } .route-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--amber-line); transition: var(--t); } .route-stop.is-active .route-dot { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); } .route-city { color: var(--text-dim); font-size: 13px; font-weight: 500; } .route-stop.is-active .route-city { color: var(--amber-text); } .route-year { color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; } /* ============ About ============ */ .about-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 56px; align-items: start; } .about-text p { margin: 0 0 16px; line-height: 1.75; } .about-text p:last-child { margin-bottom: 0; } .about-text a { border-bottom: 1px solid var(--amber-line); } .about-text a:hover { border-bottom-color: var(--amber); } .about-text em { color: var(--text); font-style: italic; } .about-pic { max-width: 300px; justify-self: end; } /* Duotone photo: amber tint at rest, full colour on hover */ .pic-wrapper { position: relative; border-radius: var(--radius-card); background: var(--amber); transition: var(--t); } .pic-wrapper img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-card); mix-blend-mode: multiply; filter: grayscale(100%) contrast(1.05); transition: var(--t); } .pic-wrapper::after { content: ''; position: absolute; top: 14px; left: 14px; width: 100%; height: 100%; z-index: -1; border: 2px solid var(--amber-line); border-radius: var(--radius-card); transition: var(--t); } .pic-wrapper:hover { transform: translate(-4px, -4px); } .pic-wrapper:hover img { filter: none; mix-blend-mode: normal; } .pic-wrapper:hover::after { transform: translate(8px, 8px); border-color: var(--amber); } /* Plan */ .plan { margin-top: 64px; } .plan-intro { max-width: 60ch; margin: 0 0 24px; color: var(--text-dim); font-size: 14px; line-height: 1.65; } .plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .plan-item { padding: 26px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-card); transition: var(--t); } .plan-item:hover { border-color: var(--amber-line); transform: translateY(-4px); } .plan-when { margin: 0 0 5px; color: var(--amber-text); font-family: var(--font-mono); font-size: 12px; } .plan-title { margin: 0 0 10px; color: var(--text); font-size: 18px; font-weight: 600; } .plan-item p:last-child { margin: 0; font-size: 14px; line-height: 1.65; } /* ============ Experience tabs ============ */ .tabs { display: flex; gap: 32px; } .tab-list { position: relative; display: flex; flex-direction: column; flex-shrink: 0; } .tab-btn { display: flex; align-items: center; height: 44px; min-width: 150px; padding: 0 18px; background: transparent; border: 0; border-left: 2px solid var(--line); color: var(--text-dim); font-family: var(--font-mono); font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer; transition: var(--t); } .tab-btn:hover { color: var(--amber-text); background: var(--tint-soft); } .tab-btn.is-active { color: var(--amber-text); } .tab-highlight { position: absolute; top: 0; left: 0; z-index: 1; width: 2px; height: 44px; background: var(--amber); border-radius: 2px; transition: transform 0.28s var(--ease); } .tab-panels { flex: 1; min-width: 0; } .tab-panel[hidden] { display: none; } .tab-panel.is-active { animation: panelIn 0.35s var(--ease); } @keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .tab-panel h3 { margin: 0 0 4px; color: var(--text); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; } .tab-panel .at { color: var(--amber-text); } .tab-panel .range { margin: 0 0 22px; color: var(--text-faint); font-family: var(--font-mono); font-size: 12px; } .tab-panel ul { margin: 0; padding: 0; list-style: none; } .tab-panel ul li { position: relative; margin-bottom: 13px; padding-left: 24px; font-size: 15px; line-height: 1.65; } .tab-panel ul li:last-child { margin-bottom: 0; } .tab-panel ul li::before { content: ''; position: absolute; top: 10px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); opacity: 0.6; } .tab-panel ul li .lead { color: var(--text); font-weight: 600; } /* ============ Work ============ */ .featured-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .featured:first-child { grid-column: 1 / -1; } .featured { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; transition: var(--t); } .featured:hover { border-color: var(--amber-line); } .featured:first-child { flex-direction: row; align-items: stretch; } .featured:first-child .featured-img { flex: 1.15; } .featured:first-child .featured-content { flex: 1; } /* Duotone project images: amber at rest, full colour on hover */ .featured-img { position: relative; overflow: hidden; } .img-wrap { position: relative; height: 100%; background: var(--amber); overflow: hidden; } .img-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: grayscale(100%) contrast(1.05) brightness(0.92); transition: filter var(--t), mix-blend-mode var(--t), transform 0.4s var(--ease); } .img-wrap::before { content: ''; position: absolute; inset: 0; z-index: 2; background: var(--duotone-screen); mix-blend-mode: screen; transition: var(--t); } .featured:hover .img-wrap img { filter: none; mix-blend-mode: normal; transform: scale(1.03); } .featured:hover .img-wrap::before { background: transparent; } .featured-content { display: flex; flex-direction: column; padding: 26px; } .featured-title { margin: 0 0 12px; color: var(--text); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; } .featured-title a { color: inherit; } .featured-title a:hover { color: var(--amber-text); } .featured-desc { margin: 0 0 auto; font-size: 14px; line-height: 1.65; } .featured-metric { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } .metric-value { color: var(--amber-text); font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .metric-label { color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; } .featured-tech { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; } .featured-tech li { padding: 3px 10px; color: var(--text-dim); background: var(--tint); border-radius: var(--radius-control); font-family: var(--font-mono); font-size: 11px; } .featured-note { margin: 14px 0 0; color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; } .featured-links { display: flex; gap: 8px; margin-top: 14px; } .featured-links a { color: var(--text-dim); padding: 4px; } .featured-links a:hover { color: var(--amber-text); transform: translateY(-2px); } /* ============ Contact ============ */ .contact { max-width: 620px; margin: 0 auto; text-align: center; } .contact-overline { margin: 0 0 16px; color: var(--amber-text); font-family: var(--font-mono); font-size: 14px; } .contact-title { margin: 0 0 18px; color: var(--text); font-family: var(--font-display); font-size: clamp(32px, 5vw, 46px); font-weight: 700; letter-spacing: -0.02em; } .contact-text { margin: 0 0 36px; font-size: 16px; line-height: 1.7; } .contact-channels { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; } .contact-btn { padding: 16px 32px; font-size: 15px; } .contact-meta { margin: 0; color: var(--text-faint); font-family: var(--font-mono); font-size: 12px; } /* ============ Footer ============ */ .site-footer { padding: 40px 0 44px; text-align: center; border-top: 1px solid var(--line); } .social-row { display: flex; justify-content: center; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; } .social-row a { display: block; padding: 9px; color: var(--text-dim); } .social-row a:hover { color: var(--amber-text); transform: translateY(-3px); } .site-footer p { margin: 0; color: var(--text-faint); font-family: var(--font-mono); font-size: 12px; } /* ============ Light hero gradient ============ */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .hero-gradient { background: radial-gradient(ellipse 60% 50% at 70% 20%, rgba(245, 158, 11, 0.06) 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 20% 80%, rgba(245, 158, 11, 0.04) 0%, transparent 70%), radial-gradient(ellipse 80% 40% at 50% 50%, rgba(99, 102, 241, 0.03) 0%, transparent 60%); } } :root[data-theme='light'] .hero-gradient { background: radial-gradient(ellipse 60% 50% at 70% 20%, rgba(245, 158, 11, 0.06) 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 20% 80%, rgba(245, 158, 11, 0.04) 0%, transparent 70%), radial-gradient(ellipse 80% 40% at 50% 50%, rgba(99, 102, 241, 0.03) 0%, transparent 60%); } /* ============ Word reveal ============ */ .word-reveal { display: inline-block; opacity: 0; transform: translateY(12px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .word-reveal.is-visible { opacity: 1; transform: none; } /* ============ Motion ============ */ .js .reveal { opacity: 0; transform: translateY(22px); } .reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms); } .js .hero-content > * { opacity: 0; transform: translateY(20px); } body.loaded .hero-content > * { opacity: 1; transform: none; transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } body.loaded .hero-name { transition-delay: 0.05s; } body.loaded .hero-subtitle { transition-delay: 0.15s; } body.loaded .hero-badges { transition-delay: 0.2s; } body.loaded .hero-text { transition-delay: 0.25s; } body.loaded .hero-buttons { transition-delay: 0.35s; } body.loaded .hero-microcopy { transition-delay: 0.45s; } /* ============ Responsive ============ */ /* Below this the two hero columns crowd each other, and the chart is decorative, so the copy takes the full width instead. */ @media (max-width: 1080px) { .hero-inner { grid-template-columns: 1fr; gap: 0; } .hero-visual { display: none; } } @media (max-width: 860px) { main { padding: 0 28px; } .nav { padding: 0 24px; } .nav-right { display: none; } .hamburger { display: flex; } .section { padding: 64px 0; } .hero { padding-top: calc(var(--nav-h) + 16px); } .coins-simple { padding: 32px 24px; gap: 26px; } .route-bar { grid-template-columns: repeat(5, 1fr); padding: 18px 0; } .route-track { top: 29px; } .route-city { font-size: 11px; } .route-year { font-size: 10px; } .about-grid { grid-template-columns: 1fr; gap: 40px; } .about-pic { max-width: 260px; justify-self: start; } .plan-grid { grid-template-columns: 1fr; } .tabs { flex-direction: column; gap: 26px; } .tab-list { flex-direction: row; overflow-x: auto; } .tab-btn { min-width: 132px; border-left: 0; border-bottom: 2px solid var(--line); } .tab-highlight { top: auto; bottom: 0; width: 132px; height: 2px; } .featured-list { grid-template-columns: 1fr; } .featured:first-child { flex-direction: column; } .featured-img { aspect-ratio: 16 / 9; } .featured:first-child .featured-img { flex: none; } .project-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { main { padding: 0 20px; } .section-heading::after { display: none; } .route-bar { grid-template-columns: repeat(3, 1fr); row-gap: 18px; } .route-track { display: none; } .coins-simple { padding: 28px 18px; } .total-label { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }