) so each section's gradient stays visible during the resolve phase: hard-refreshing #about shows About's navy gradient, #contact shows Contact's teal gradient, etc. Projects has no gradient, so it still shows the canvas dots, which matches its normal look. main.js removes .hash-resolving and adds .hash-resolved once the target offsetTop is stable across consecutive frames. */ html.hash-resolving .section-inner { visibility: hidden; } html.hash-resolved .section-inner { visibility: visible; animation: hash-fade-in 0.22s ease-out; } @keyframes hash-fade-in { from { opacity: 0.001; } to { opacity: 1; } } /* ── UNIFIED TYPE SCALE ── Same kind of element shares one size across every section. Hierarchy preserved: home H1 > section H2 > card title > body > list > mono label. Home H1 (name) and section H2s already used responsive clamp values and are intentionally left alone. DM Mono stays on small uppercase metadata labels for the "tech" accent feel; only its size is unified. Skipped on purpose because changing them would break tight grids or alter featured display elements: .stat-n, .stat-l (counters), .typewriter, .skills-banner h3 (feature CTA), .contact-tagline (large body), .avail-status (CTA), .hw-k, .hw-v, .vtag (tight homelab grids), .cert-badge main text (credential display), .section-sub (already close at clamp(0.95rem, 1.1vw, 1.05rem)). Appended at the end so the original per-component rules stay intact and these overrides win by source order. Easy to roll back by deleting this block. */ /* TIER: card titles (h3, h4 inside cards) -> 1.125rem */ .win-body h3, .mini-body h3, .tl-title, .approach-card h3 { font-size: 1.125rem; } /* TIER: body paragraphs -> 1rem */ .about-text, .win-body p, .win-sm p, .tl-desc, .approach-card p, .contact-sub, .avail-text { font-size: 1rem; } /* TIER: compact body / list items -> 0.95rem */ .skill-mini li, .long-list li, .skills-banner p { font-size: 0.95rem; } /* TIER: small mono uppercase labels -> 0.62rem */ .home-badge, .about-role, .win-num, .win-chip, .tl-date, .approach-num, .certs-label, .cert-year, .avail-label, .stack-logos .logo-pill { font-size: 0.62rem; } /* About section: bio at 1rem, box title eyebrow-small, bullets moderate */ #about .about-text { font-size: 1rem; } #about .long-title { font-size: 0.7rem; } #about .long-list li { font-size: 0.85rem; } #about .about-role { display: inline-flex; align-items: center; font-size: 0.7rem; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(131,166,206,0.4); background: rgba(131,166,206,0.06); width: fit-content; } #about .stack-logos .logo-pill { font-size: 0.72rem; } /* ── KEYBOARD FOCUS RINGS ── :focus-visible only triggers on keyboard navigation (Tab/Shift+Tab), not on mouse clicks. WCAG 2.4.7 requires a visible focus indicator. */ :focus { outline: none; } :focus-visible { outline: 2px solid #83A6CE; outline-offset: 3px; border-radius: 4px; } .nav-link:focus-visible, .btn:focus-visible, .chip:focus-visible, .contact-chip:focus-visible, .sb-cta:focus-visible, .cert-badge:focus-visible, .win-card:focus-visible, .skill-mini:focus-visible { outline-offset: 2px; border-radius: inherit; } /* ── SITE FOOTER ── Hardcoded "Last updated" date. Bump manually when shipping visible changes. */ .site-footer { position: relative; z-index: 2; text-align: center; padding: 24px 16px 32px; font-family: "DM Mono", monospace; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244,247,251,0.55); border-top: 1px solid rgba(255,255,255,0.04); background: #03122F; } .site-footer .sep { margin: 0 10px; opacity: 0.5; } /* ── CONTACT CHIP HIERARCHY ── Email is primary (full opacity, brand border). LinkedIn / GitHub / Resume are secondary (muted, smaller padding). */ .contact-chip.primary { border-color: rgba(131,166,206,0.45); background: rgba(131,166,206,0.10); } .contact-chip.secondary { padding: 11px 16px; font-size: 0.92rem; font-weight: 500; color: rgba(244,247,251,0.72); border-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); } .contact-chip.secondary:hover { color: #F4F7FB; background: rgba(255,255,255,0.08); } .contact-note { margin-top: 14px; font-family: "DM Mono", monospace; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244,247,251,0.45); } /* ── "Book a 30-min call" inner button-box ── Box only around the headline text inside the CTA card so the click target is obvious. Slow glow draws attention without the whole card pulsing. Hover pauses the animation. */ a.avail-cta-box .avail-status { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; margin-top: 4px; border-radius: 10px; border: 1px solid rgba(110,231,183,0.55); background: rgba(110,231,183,0.08); width: fit-content; animation: avail-cta-glow 4s ease-in-out infinite; } @keyframes avail-cta-glow { 0%, 100% { box-shadow: 0 0 10px rgba(110,231,183,0.18); } 50% { box-shadow: 0 0 28px rgba(110,231,183,0.55); } } a.avail-cta-box:hover .avail-status { animation-play-state: paused; border-color: rgba(110,231,183,0.85); background: rgba(110,231,183,0.14); box-shadow: 0 0 32px rgba(110,231,183,0.5); } @media (prefers-reduced-motion: reduce) { a.avail-cta-box .avail-status { animation: none; } } /* Brand emphasis inside contact paragraphs */ .contact-sub .emp { color: #83A6CE; font-weight: 700; } /* Earned cert badges are now clickable Credly links */ a.cert-badge { text-decoration: none; color: inherit; cursor: pointer; transition: border-color 0.2s, transform 0.2s, background 0.2s; } a.cert-badge:hover { border-color: rgba(131,166,206,0.55); background: rgba(131,166,206,0.10); transform: translateY(-1px); } /* Neon "Latest Project" button: a single white line draws around the border once, glows briefly, slowly dims, then a final echo glow flashes on the button itself. */ .btn-neon { position: relative; isolation: isolate; animation: btn-flash 1s ease-out 3.5s 1, btn-breathe 3s ease-in-out 5.5s 1; } @keyframes btn-flash { 0% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); } 30% { box-shadow: 0 0 12px rgba(255, 255, 255, 0.42), 0 0 26px rgba(196, 140, 179, 0.3); } 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); } } @keyframes btn-breathe { 0% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); } 45% { box-shadow: 0 0 18px rgba(255, 255, 255, 0.65), 0 0 38px rgba(196, 140, 179, 0.5); } 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); } } .btn-neon .neon-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; } .btn-neon .btn-label { position: relative; z-index: 2; } /* Trail: grows from 0 to full perimeter as the dot travels (3s, slow start). Path length ~490 viewBox units; dasharray transitions guarantee a single continuous visible segment at every frame, no pathLength normalization. ⚠️ KNOWN BUG (unresolved): On real phone widths (Note 9, S10, S25, iPhone), this animation still renders TWO visible segments at start instead of one. Tested fixes that did NOT resolve it: - removed pathLength="100" attribute - switched stroke-linecap from round to butt - hidden .neon-dot on ≤600px - dasharray transition vs dashoffset variants Suspected root cause: vector-effect: non-scaling-stroke + preserveAspectRatio="none" cause inconsistent dasharray length math on mobile browsers. Revisit later. Likely needs a JS-driven approach using path.getTotalLength() or replacement with a CSS-only conic-gradient border beam. */ .neon-trail { fill: none; stroke: #ffffff; stroke-width: 1.1; stroke-linecap: butt; vector-effect: non-scaling-stroke; stroke-dasharray: 0 490; opacity: 0; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 5px rgba(196, 140, 179, 0.25)); animation: neon-trail-grow 3s 0.5s 1 forwards, neon-trail-flash 1s ease-out 3.5s 1 forwards, neon-breathe 3s ease-in-out 5.5s 1 forwards; } @keyframes neon-trail-flash { 0% { opacity: 1; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 5px rgba(196, 140, 179, 0.25)); } 30% { opacity: 1; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 12px rgba(196, 140, 179, 0.35)); } 100% { opacity: 0; filter: drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.05)); } } @keyframes neon-trail-grow { 0% { stroke-dasharray: 0 490; opacity: 0; animation-timing-function: linear; } 4% { stroke-dasharray: 0 490; opacity: 1; animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { stroke-dasharray: 490 0; opacity: 1; } } /* Dot: small bright droplet that leads the trail around the perimeter. Fades out as it returns to the start so it doesn't reappear at the end. */ .neon-dot { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; /* 2-unit beam, 488-unit gap, total 490 = full path length (one beam visible) */ stroke-dasharray: 2 488; stroke-dashoffset: 0; opacity: 0; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 7px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 14px rgba(196, 140, 179, 0.65)); animation: neon-dot-travel 3s 0.5s 1 forwards, neon-dot-fade 0.4s ease-out 3.1s 1 forwards; } @keyframes neon-dot-travel { 0% { stroke-dashoffset: 0; opacity: 0; animation-timing-function: linear; } 4% { stroke-dashoffset: 0; opacity: 1; animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { stroke-dashoffset: -490; opacity: 1; } } @keyframes neon-dot-fade { 0% { opacity: 1; } 100% { opacity: 0; } } /* Breathing glow on the trail: starts invisible (default state), swells to bright, then fades back out (3s total, slow inhale + slow exhale). */ @keyframes neon-breathe { 0% { opacity: 0; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4)); } 50% { opacity: 1; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 18px rgba(196, 140, 179, 0.55)); } 100% { opacity: 0; filter: drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.05)); } } @media (prefers-reduced-motion: reduce) { .btn-neon { animation: none; } .neon-trail, .neon-dot { animation: none; opacity: 0; } } /* Mobile: hide the traveling dot (dasharray rendering on small SVG paths is inconsistent across iOS Safari, Chrome Android, and Brave). Trail still draws. */ @media (max-width: 600px) { .neon-dot { display: none; } }