/* Self-hosted fonts. Previously three faces came from fonts.googleapis.com, which was the last render-blocking request on the page and a third-party dependency the whole visual identity relied on. All three are OFL licensed, so they are served from our own origin now. Nothing external to fail. */ @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-condensed-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-condensed-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-condensed-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/barlow-condensed-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Rajdhani';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/rajdhani-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Rajdhani';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/rajdhani-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/rajdhani-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/rajdhani-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/share-tech-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* Theme tokens now live in assets/css/tokens.css, loaded before this file on every page. They were duplicated across six files and drifted; see that file for what the drift cost. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-mono); line-height: 1.7; overflow-x: hidden; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease); } /* scanlines — dark only */ [data-theme="dark"] body::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px); pointer-events: none; z-index: 9999; } /* ── OPEN TO WORK BANNER ────────────────────────────────── */ .otw-banner { display: inline-flex; align-items: center; gap: .7rem; background: rgba(var(--accent2-rgb),.06); border: 1px solid rgba(var(--accent2-rgb),.3); padding: .45rem 1.1rem; border-radius: 40px; margin-bottom: 1.8rem; animation: fadeSlideUp .5s ease both; position: relative; overflow: hidden; } .otw-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(var(--accent2-rgb),.06), transparent); animation: shimmer 2.5s infinite; } @keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} } .otw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); flex-shrink: 0; position: relative; } .otw-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--accent2); animation: ripple 1.8s ease-out infinite; } @keyframes ripple { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(2.6);opacity:0} } .otw-text { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent2); font-family: var(--font-mono); } .otw-divider { width: 1px; height: 12px; background: rgba(var(--accent2-rgb),.3); } .otw-loc { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); font-family: var(--font-mono); } /* ── HERO NAME GLITCH — CINEMATIC ───────────────────────── */ .hero-name-glitch { position: relative; display: inline-block; } .hero-name-glitch::before, .hero-name-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; pointer-events: none; opacity: 0; } .hero-name-glitch::before { color: var(--accent); } .hero-name-glitch::after { color: var(--accent3); } /* Phase 1 — quick stutter */ @keyframes cineGlitch1 { 0% { opacity:0; transform:translate(0,0) skewX(0deg); } 5% { opacity:1; clip-path:inset(8% 0 85% 0); transform:translate(-8px,0) skewX(-3deg); } 10% { opacity:1; clip-path:inset(65% 0 10% 0); transform:translate(8px,0) skewX(3deg); } 15% { opacity:0; transform:translate(0,0); } 16% { opacity:0; } 30% { opacity:1; clip-path:inset(40% 0 40% 0); transform:translate(-6px,0) skewX(-2deg); } 35% { opacity:1; clip-path:inset(15% 0 70% 0); transform:translate(6px,0) skewX(2deg); } 40% { opacity:0; transform:translate(0,0); } 41% { opacity:0; } 55% { opacity:1; clip-path:inset(75% 0 5% 0); transform:translate(-10px,0) skewX(-4deg); } 60% { opacity:1; clip-path:inset(5% 0 75% 0); transform:translate(10px,0) skewX(4deg); } 65% { opacity:1; clip-path:inset(30% 0 55% 0); transform:translate(-6px,0); } 70% { opacity:0; transform:translate(0,0) skewX(0deg); } 100% { opacity:0; } } /* Phase 2 — red channel offset */ @keyframes cineGlitch2 { 0% { opacity:0; transform:translate(0,0); } 8% { opacity:.8; clip-path:inset(55% 0 20% 0); transform:translate(10px,0) skewX(4deg); } 14% { opacity:.8; clip-path:inset(20% 0 65% 0); transform:translate(-10px,0) skewX(-4deg); } 18% { opacity:0; } 32% { opacity:.7; clip-path:inset(80% 0 5% 0); transform:translate(8px,0) skewX(3deg); } 38% { opacity:.7; clip-path:inset(10% 0 78% 0); transform:translate(-8px,0) skewX(-3deg); } 44% { opacity:0; } 57% { opacity:.9; clip-path:inset(45% 0 35% 0); transform:translate(12px,0) skewX(5deg); } 63% { opacity:.9; clip-path:inset(2% 0 88% 0); transform:translate(-12px,0) skewX(-5deg); } 68% { opacity:.9; clip-path:inset(70% 0 18% 0); transform:translate(6px,0); } 72% { opacity:0; transform:translate(0,0) skewX(0deg); } 100% { opacity:0; } } /* Phase 3 — whole element shake */ @keyframes cineShake { 0%,100% { transform: translate(0,0) skewX(0deg); } 10% { transform: translate(-3px, 1px) skewX(-1deg); } 20% { transform: translate(3px, -1px) skewX(1deg); } 30% { transform: translate(-2px, 2px) skewX(0deg); } 40% { transform: translate(2px, -2px); } 50% { transform: translate(-4px, 0px) skewX(-2deg); } 60% { transform: translate(4px, 1px) skewX(2deg); } 70% { transform: translate(-2px, -1px); } 80% { transform: translate(2px, 2px) skewX(1deg); } 90% { transform: translate(-1px, -2px); } } .hero-name-glitch.is-glitching { animation: cineShake .6s steps(1) forwards; } .hero-name-glitch.is-glitching::before { animation: cineGlitch1 .6s steps(1) forwards; } .hero-name-glitch.is-glitching::after { animation: cineGlitch2 .6s steps(1) .03s forwards; } /* ── LOADING SCREEN ──────────────────────────────────────── */ #loader { position: fixed; inset: 0; background: #020408; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); transition: opacity var(--t-slow) var(--ease); } #loader.fade-out { opacity: 0; pointer-events: none; } .loader-logo { font-family: var(--font-display); font-size: 4rem; font-weight: 800; color: #00d4ff; letter-spacing: .1em; margin-bottom: 2rem; text-transform: uppercase; } .loader-logo span { color: #00ff9d; } .loader-lines { width: min(480px, 90vw); } .loader-line { font-size: .78rem; color: #8899aa; margin-bottom: .4rem; opacity: 0; transform: translateX(-8px); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); } .loader-line.show { opacity: 1; transform: translateX(0); } .loader-bar-wrap { margin-top: 1.5rem; width: min(480px, 90vw); height: 2px; background: #1e2d3d; border-radius: 2px; overflow: hidden; } .loader-bar { height: 100%; width: 0; background: linear-gradient(90deg, #00d4ff, #00ff9d); transition: width var(--t-instant) linear; } /* ── PROGRESS INDICATOR ──────────────────────────────────── */ #progress-track { position: fixed; right: 0; top: 0; bottom: 0; width: 3px; background: var(--border); z-index: 900; } #progress-fill { width: 100%; height: 0%; background: linear-gradient(180deg, var(--accent), var(--accent2)); transition: height var(--t-instant) linear; box-shadow: 0 0 8px var(--accent); } #progress-dot { position: absolute; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 10px var(--accent2); transform: translateX(0); transition: top var(--t-instant) linear; top: 0; } /* ── CANVAS & VIGNETTE ───────────────────────────────────── */ #net-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .45; } [data-theme="light"] #net-canvas { opacity: .12; } [data-theme="light"] body { background-image: repeating-radial-gradient(ellipse at 10% 20%, transparent 0, transparent 28px, rgba(0,119,170,.18) 29px, transparent 30px), repeating-radial-gradient(ellipse at 88% 12%, transparent 0, transparent 22px, rgba(0,135,90,.15) 23px, transparent 24px), repeating-radial-gradient(ellipse at 50% 52%, transparent 0, transparent 34px, rgba(0,119,170,.14) 35px, transparent 36px), repeating-radial-gradient(ellipse at 18% 82%, transparent 0, transparent 20px, rgba(0,135,90,.15) 21px, transparent 22px), repeating-radial-gradient(ellipse at 82% 78%, transparent 0, transparent 30px, rgba(0,119,170,.15) 31px, transparent 32px), repeating-radial-gradient(ellipse at 65% 28%, transparent 0, transparent 18px, rgba(0,135,90,.14) 19px, transparent 20px); background-attachment: fixed; } .depth-vignette { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 25%, rgba(8,11,16,0.35) 100%); pointer-events: none; z-index: 1; transition: background var(--t-base) var(--ease); } [data-theme="light"] .depth-vignette { background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(240,244,248,0.75) 100%); } /* ── THEME TOGGLE ────────────────────────────────────────── */ #theme-toggle { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: all var(--t-base) var(--ease); display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; margin-left: .5rem; } #theme-toggle:hover { border-color: var(--accent); box-shadow: 0 0 12px rgba(0,212,255,.3); transform: rotate(20deg); } #theme-toggle svg { width: 17px; height: 17px; transition: all var(--t-base) var(--ease); } /* Group the toggle with the hamburger wherever the hamburger is showing. This was scoped to 900px while the hamburger band later grew to 1299px, which left the toggle stranded mid-navbar across 399px of widths. */ @media (max-width: 1299px) { #theme-toggle { margin-left: auto; margin-right: .6rem; } } /* ── NAVBAR ──────────────────────────────────────────────── */ /* Full bleed on purpose: the logo sits in the far left corner, the links spread across the middle, the theme toggle sits in the far right corner. An earlier version aligned the logo with the content column below it. That is a defensible thing to do and it is not what this nav is for - it made the bar look inset and cramped the twelve links into 1104px. */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--gutter); background: rgba(8,11,16,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); transition: all var(--t-base) var(--ease); } [data-theme="light"] nav { background: rgba(240,244,248,0.9); } nav.scrolled { padding: .7rem var(--gutter); box-shadow: 0 4px 30px rgba(0,212,255,0.08); } .nav-logo { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--accent); letter-spacing: .18em; text-decoration: none; text-transform: uppercase; transition: text-shadow var(--t-base) var(--ease); } /* Hover is written for BOTH states in one rule, because at the top of the page the logo already carries the .active glow, and that is exactly where a visitor's pointer is. A first attempt went 12px/50% to 16px/62% and the difference was invisible: the hover has to clear the resting glow by a wide margin to read as a hover at all. Two layers now, a tight bright core and a wide soft halo. Colour comes from --accent-rgb, not a hardcoded cyan. The old .active rule painted the dark-theme cyan in light mode too, where the accent is #0077aa, so the glow was the wrong colour on half the site. */ .nav-logo:hover, .nav-logo.active:hover { text-shadow: 0 0 22px rgba(var(--accent-rgb),.95), 0 0 42px rgba(var(--accent-rgb),.5); } .nav-logo.active { text-shadow: 0 0 12px rgba(var(--accent-rgb),.5); } .nav-logo span { color: var(--text2); } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { font-size: .78rem; color: var(--text2); text-decoration: none; letter-spacing: .12em; text-transform: uppercase; position: relative; transition: color var(--t-base) var(--ease); } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width var(--t-base) var(--ease); } .nav-links a.active { color: var(--accent); } .nav-links a.active::after { width: 100%; } .nav-links a:hover { color: var(--accent); } .nav-links a:hover::after { width: 100%; } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--text2); transition: all var(--t-base) var(--ease); } /* ── HERO ────────────────────────────────────────────────── */ /* No width cap here on purpose. #hero is a
, so the `section` rule below already gives it max-width:var(--page-max) and margin:0 auto - it was never the element that stranded on a wide screen. Adding a padding-inline cap here computed 680px a side against the 2560px parent, which blew past the 1200px max-width and crushed the content to zero. The nav is the one that genuinely had no cap. */ #hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: 8rem var(--gutter) 4rem; overflow: hidden; z-index: 2; } .hero-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(0,212,255,0.06) 0%, transparent 70%); top: -100px; right: -100px; pointer-events: none; animation: pulseGlow 6s ease-in-out infinite; } .hero-glow2 { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(0,255,157,0.04) 0%, transparent 70%); bottom: 50px; left: 5%; pointer-events: none; animation: pulseGlow 8s ease-in-out infinite reverse; } @keyframes pulseGlow { 0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.7} } .hero-content { max-width: 800px; min-width: 0; position: relative; z-index: 2; } /* ── HERO BADGES (right column stack — holds Credly + any future badges) ── */ .hero-badges { position: relative; z-index: 2; flex-shrink: 0; align-self: flex-start; margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; animation: fadeSlideUp .7s .6s ease both; } .hero-badge-card { padding: .85rem; display: flex; align-items: center; justify-content: center; transition: transform var(--t-base) var(--ease); } .hero-badge-card:hover { transform: translateY(-2px); } .hero-badge-card > a { border-radius: 6px; overflow: hidden; line-height: 0; display: inline-block; } /* object-fit keeps non-square badge art (league badges are ~443x500) in proportion inside the fixed 130px box — never hardcode a square onto a new badge image. */ .hero-badge-card img { display: block; width: 130px; height: 130px; object-fit: contain; } @keyframes blink{0%,100%{opacity:1}50%{opacity:0}} h1.hero-name { font-family: var(--font-display); font-size: clamp(3.5rem,10vw,8rem); font-weight: 800; line-height: 0.95; letter-spacing: .04em; text-transform: uppercase; color: var(--text); animation: fadeSlideUp .7s .1s ease both; margin-bottom: .3rem; } .hero-role { font-family: 'Rajdhani', sans-serif; font-size: clamp(1rem,2.5vw,1.6rem); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text2); animation: fadeSlideUp .7s .2s ease both; margin-bottom: 1.5rem; min-height: 2rem; } .role-cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--accent); margin-left: 3px; vertical-align: middle; animation: blink .8s step-end infinite; } .hero-tagline { font-size: .9rem; color: var(--text2); max-width: 500px; line-height: 1.8; animation: fadeSlideUp .7s .3s ease both; margin-bottom: 2.5rem; border-left: 2px solid var(--accent); padding-left: 1rem; } .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeSlideUp .7s .4s ease both; } .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.8rem; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: all var(--t-base) var(--ease); cursor: pointer; border: none; } .btn-primary { background: var(--accent); color: var(--bg); font-weight: 700; border: 1px solid var(--accent); } .btn-primary:hover { background: transparent; color: var(--accent); box-shadow: 0 0 20px rgba(0,212,255,.3); } .btn-secondary { background: transparent; color: var(--text2); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--accent2); color: var(--accent2); box-shadow: 0 0 20px rgba(0,255,157,.15); } .btn-cv { background: transparent; color: var(--accent2); border: 1px solid var(--accent2); } .btn-cv:hover { background: var(--accent2); color: var(--bg); box-shadow: 0 0 20px rgba(0,255,157,.3); } .hero-stats { display: flex; gap: 3rem; margin-top: 3rem; animation: fadeSlideUp .7s .5s ease both; } .stat-item { text-align: left; } .stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--accent); line-height: 1; } .stat-label { font-size: .7rem; color: var(--text3); letter-spacing: .1em; text-transform: uppercase; margin-top: .3rem; } /* ── PLATFORM BADGES ─────────────────────────────────────── */ .platform-badges { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; animation: fadeSlideUp .7s .8s ease both; opacity: 1; } /* right-hand column: TryHackMe + GitHub stacked beside the LinkedIn card */ .platform-col { display: flex; flex-direction: column; gap: 1rem; align-self: flex-start; } /* TryHackMe anchor — unboxed: no surface, no border, no padding, no hover box */ .thm-link { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; background: transparent; border: none; padding: 0; border-radius: 0; text-decoration: none; transition: all var(--t-base) var(--ease); } .thm-link:hover { transform: none; box-shadow: none; border-color: transparent; } .thm-card { display: flex; flex-direction: column; gap: .7rem; width: 100%; max-width: 360px; max-width: 100%; box-sizing: border-box; padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; transition: all var(--t-base) var(--ease); } .thm-card:hover { border-color: var(--thm-green); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.3); } .thm-card-head { display: flex; align-items: center; gap: .75rem; } .thm-card-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; object-position: center 20%; border: 2px solid var(--border); transition: border-color var(--t-base) var(--ease); } .thm-card:hover .thm-card-avatar { border-color: var(--thm-green); } .thm-card-info { display: flex; flex-direction: column; min-width: 0; } .thm-card-name { font-size: .65rem; color: var(--text3); letter-spacing: .1em; text-transform: uppercase; } .thm-card-handle { font-size: .9rem; color: var(--text); font-weight: 700; line-height: 1.2; } .thm-card-pts { margin-left: auto; font-size: 1.05rem; font-weight: 800; color: var(--thm-green); line-height: 1; white-space: nowrap; } .thm-card-pts small { font-size: .6rem; font-weight: 600; color: var(--text3); margin-left: .15rem; } .thm-card-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; border-top: 1px solid var(--border); padding-top: .7rem; } .thm-stat { display: flex; flex-direction: column; align-items: center; gap: .3rem; } .thm-stat b { font-size: .92rem; font-weight: 800; color: var(--text); line-height: 1; } .thm-stat span { font-size: .55rem; color: var(--text3); letter-spacing: .06em; text-transform: uppercase; } .thm-stat-icon { width: 15px; height: 15px; color: var(--thm-green); opacity: .9; margin-bottom: .15rem; } .thm-pts-icon { width: 14px; height: 14px; vertical-align: -1px; margin-right: .4rem; color: var(--thm-green); } .thm-card-pts small { margin-left: .35rem; } /* GitHub card — self-contained, matches the boxed-card look */ .gh-card { display: flex; align-items: center; gap: .75rem; width: 100%; max-width: 360px; height: 96px; max-width: 100%; box-sizing: border-box; padding: 0 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; transition: all var(--t-base) var(--ease); } .gh-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.3); } .gh-card svg { width: 28px; height: 28px; color: var(--text); flex-shrink: 0; transition: color var(--t-base) var(--ease); } .gh-card:hover svg { color: var(--accent); } .gh-card-info { display: flex; flex-direction: column; min-width: 0; } .gh-card-name { font-size: .65rem; color: var(--text3); letter-spacing: .1em; text-transform: uppercase; } .gh-card-handle { font-size: .9rem; color: var(--text); font-weight: 700; line-height: 1.2; } .gh-card-cta { margin-left: auto; font-size: .72rem; color: var(--accent); font-weight: 700; letter-spacing: .04em; white-space: nowrap; } @keyframes fadeSlideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} /* ── SECTIONS ────────────────────────────────────────────── */ section { position: relative; z-index: 2; padding: 6rem var(--gutter); max-width: var(--page-max); margin: 0 auto; } .section-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 3.5rem; } .section-num { font-size: .72rem; color: var(--accent); letter-spacing: .2em; font-weight: 700; } h2.section-title { font-family: var(--font-display); font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 800; color: var(--text); letter-spacing: .08em; text-transform: uppercase; } /* The scramble uses glyphs wider than the real text, so the longest title wrapped mid-animation and snapped back. The flexible .section-line absorbs the extra. */ @media (min-width: 620px) { h2.section-title.glitch-title { white-space: nowrap; } } .section-line { flex: 1; height: 1px; background: linear-gradient(to right, var(--border), transparent); } /* "See all" — only present when a section has more items than the home page shows (see tools/build-fallbacks.mjs). Quiet by design: same size as .section-num, sits after the fade line so it never competes with the title. Absent entirely (not just hidden) when every item already fits. */ .section-see-all { flex-shrink: 0; font-family: var(--font-mono); font-size: .72rem; color: var(--text2); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; padding: .3rem .15rem; border-radius: 2px; transition: color var(--t-base) var(--ease); } .section-see-all:hover { color: var(--accent); } /* Below ~600px the num+title+line+link no longer fit one nowrap row (the link's own text can't shrink) — wrap it onto its own line instead of letting it push the page into horizontal scroll. */ @media (max-width: 600px) { .section-header { flex-wrap: wrap; } .section-see-all { flex-basis: 100%; margin-top: .2rem; } } /* ── ABOUT ───────────────────────────────────────────────── */ #about { border-top: 1px solid var(--border); padding-top: 6rem; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .about-text p { color: var(--text2); font-size: .88rem; line-height: 1.9; margin-bottom: 1.2rem; } .about-text p strong { color: var(--accent); font-weight: 700; } .about-highlights { display: flex; flex-direction: column; gap: 1rem; } .highlight-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 1.2rem 1.5rem; border-radius: 2px; transition: all var(--t-base) var(--ease); } .highlight-card:hover { border-left-color: var(--accent2); background: rgba(var(--accent-rgb),.04); transform: translateX(4px); } .highlight-card h4, .highlight-card h3 { font-family: var(--font-display); font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: .4rem; } .highlight-card p { font-size: .78rem; color: var(--text2); line-height: 1.6; } /* ── SKILLS ──────────────────────────────────────────────── */ #skills { border-top: 1px solid var(--border); } .skills-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: 1.5rem; } .skill-category { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1.8rem; transition: border-color var(--t-base) var(--ease); position: relative; overflow: hidden; } .skill-category::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; } /* Category colour is bound to MEANING, not DOM position — red team = offence, blue team = defence (industry convention). Set data-team on the category; reordering or inserting categories can no longer scramble the palette. */ .skill-category[data-team="red"] { --cat: var(--accent3); --cat-rgb: var(--accent3-rgb); } .skill-category[data-team="blue"] { --cat: var(--accent); --cat-rgb: var(--accent-rgb); } .skill-category[data-team="green"] { --cat: var(--accent2); --cat-rgb: var(--accent2-rgb); } .skill-category[data-team="amber"] { --cat: var(--accent4); --cat-rgb: var(--accent4-rgb); } /* Fallback so an un-tagged future category degrades gracefully instead of going colourless */ .skill-category { --cat: var(--accent); --cat-rgb: var(--accent-rgb); } .skill-category::before{background:var(--cat)} .skill-category:hover{border-color:var(--cat)} .skill-category h3{font-family:var(--font-display);font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.2rem;color:var(--cat)} .skill-tags{display:flex;flex-wrap:wrap;gap:.5rem} .skill-tag{font-size:.72rem;padding:.3rem .7rem;border-radius:2px;letter-spacing:.05em;border:1px solid;transition: all var(--t-base) var(--ease)} .skill-tag:hover{transform:translateY(-2px)} .skill-category .skill-tag{border-color:rgba(var(--cat-rgb),.25);color:rgba(var(--cat-rgb),.8);background:rgba(var(--cat-rgb),.05)} .skill-category .skill-tag:hover{background:rgba(var(--cat-rgb),.12);border-color:var(--cat);color:var(--cat)} /* ── CURRENTLY LEARNING ─────────────────────────────────── */ #learning{border-top:1px solid var(--border)} .learning-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start} .learning-block h3{font-family:var(--font-display);font-size:.8rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text3);margin-bottom:1.5rem;padding-bottom:.7rem;border-bottom:1px solid var(--border)} .goal-list{display:flex;flex-direction:column;gap:.8rem} .goal-item{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.2rem;background:var(--surface);border:1px solid var(--border);border-radius:3px;transition: all var(--t-base) var(--ease)} .goal-item:hover{border-color:var(--accent2);transform:translateX(4px)} .goal-icon{width:36px;height:36px;border-radius:50%;background:rgba(0,255,157,.1);border:1px solid rgba(0,255,157,.2);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;margin-top:.1rem} .goal-info h4{font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:.2rem} .goal-info p{font-size:.75rem;color:var(--text2);line-height:1.6} .goal-status{font-size:.65rem;color:var(--accent2);letter-spacing:.1em;text-transform:uppercase;margin-top:.3rem;display:block} .goal-status.targeting{color:var(--accent)} .roadmap-list{display:flex;flex-direction:column} .roadmap-item{display:flex;gap:1rem;align-items:flex-start} .roadmap-marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0} .roadmap-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex-shrink:0} .roadmap-dot.done{background:var(--accent2);box-shadow:0 0 8px rgba(0,255,157,.5)} .roadmap-dot.active{background:var(--accent);box-shadow:0 0 8px rgba(0,212,255,.5);animation:blink 1.5s step-end infinite} .roadmap-dot.next{background:transparent;border:1.5px solid var(--text3)} .roadmap-line{width:1px;flex:1;background:var(--border);min-height:16px;margin:3px 0} .roadmap-content{padding-bottom:1.2rem;flex:1} .roadmap-content h4{font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:.15rem} .roadmap-content p{font-size:.75rem;color:var(--text2);line-height:1.5;margin-bottom:.3rem} .roadmap-tag{font-size:.63rem;padding:.15rem .55rem;border-radius:2px;letter-spacing:.07em;border:1px solid;display:inline-block} .roadmap-tag.done{border-color:rgba(0,255,157,.3);color:var(--accent2);background:rgba(0,255,157,.05)} .roadmap-tag.active{border-color:rgba(0,212,255,.3);color:var(--accent);background:rgba(0,212,255,.05)} .roadmap-tag.next{border-color:var(--border);color:var(--text3)} @media(max-width:900px){.learning-grid{grid-template-columns:1fr;gap:2rem}} /* ── PRINT MODE ─────────────────────────────────────────── */ @media print { #net-canvas, .depth-vignette, nav, #loader, #backToTop, #progress-track, .hero-btns, .platform-badges, .otw-banner, .hero-stats, #terminal-overlay, #mobileMenu, footer, .section-line, .section-num, #skills, #projects, #testimonials, #cv, #contact, .glitch-title::before, .glitch-title::after, .role-cursor, body::before, body::after { display: none !important; } * { background: #fff !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; } html, body { font-family: Georgia, serif !important; font-size: 11pt; line-height: 1.5; } h1.hero-name { font-size: 32pt !important; color: #000 !important; letter-spacing: .02em; } h1.hero-name span { color: #1a5276 !important; } .hero-role { font-size: 13pt !important; color: #555 !important; margin-bottom: .5rem; } .hero-tagline { border-left: 3px solid #1a5276 !important; color: #333 !important; font-size: 10pt; } #hero { min-height: auto !important; padding: 2rem 2rem 1rem !important; } section { padding: 1.2rem 2rem !important; max-width: 100% !important; page-break-inside: avoid; } h2.section-title { font-size: 16pt !important; color: #1a5276 !important; border-bottom: 1.5px solid #1a5276; padding-bottom: .3rem; margin-bottom: 1rem; } .about-grid { grid-template-columns: 1fr !important; } .highlight-card { border-left: 3px solid #1a5276 !important; padding: .5rem .8rem; margin-bottom: .4rem; } .highlight-card h4, .highlight-card h3 { font-size: 10pt !important; } .highlight-card p { font-size: 9pt !important; } .exp-card { grid-template-columns: 140px 1fr !important; border: none !important; border-bottom: 1px solid #ddd !important; padding: .8rem 0 !important; } .exp-card::after { display: none !important; } .exp-period { color: #1a5276 !important; font-size: 9pt; } .exp-company { font-size: 10pt !important; font-weight: 700; } .exp-main h3 { font-size: 12pt !important; } .exp-main p { font-size: 9.5pt !important; } .exp-achievements li { font-size: 9.5pt !important; } .exp-achievements li::before { color: #1a5276 !important; } .tech-badge { border: 1px solid #ccc !important; font-size: 8pt !important; padding: .1rem .4rem; } .timeline-item::before { background: #1a5276 !important; box-shadow: none !important; } .timeline-item { border-left: 1px solid #ccc !important; } .certs-grid { grid-template-columns: 1fr 1fr !important; gap: .6rem !important; } .cert-card { border: 1px solid #ccc !important; padding: .5rem .7rem !important; } .cert-card::before { display: none !important; } .cert-card-badge { display: none !important; } .cert-card-issuer { color: #1a5276 !important; font-size: 8pt !important; } .cert-card-name { font-size: 10pt !important; } .cert-card-foot { border-top: 1px solid #ddd !important; padding-top: .3rem !important; } .cert-card-id, .cert-pill { font-size: 8.5pt !important; } #about, #experience, #education, #certifications { display: block !important; border-top: none !important; } .reveal { opacity: 1 !important; transform: none !important; } @page { margin: 1.5cm 1.8cm; size: A4; } } /* ── CV VIEWER ──────────────────────────────────────────── */ #cv { border-top: 1px solid var(--border); } .cv-wrap { display: flex; flex-direction: column; gap: 1rem; } .cv-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 4px 4px 0 0; padding: .8rem 1.2rem; } .cv-toolbar-left { display: flex; align-items: center; gap: .8rem; } .cv-filename { font-size: .75rem; color: var(--accent); letter-spacing: .08em; } .cv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); } .cv-toolbar-right { display: flex; gap: .6rem; } .cv-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; cursor: pointer; transition: all var(--t-base) var(--ease); text-decoration: none; } .cv-btn-primary { background: var(--accent); color: var(--bg); border: 1px solid var(--accent); font-weight: 700; } .cv-btn-primary:hover { background: transparent; color: var(--accent); } .cv-btn-secondary { background: transparent; color: var(--text2); border: 1px solid var(--border); } .cv-btn-secondary:hover { border-color: var(--accent2); color: var(--accent2); } .cv-frame-wrap { position: relative; width: 100%; background: var(--bg2); border: 1px solid var(--border); border-top: none; border-radius: 0 0 4px 4px; overflow: hidden; } .cv-frame-wrap iframe { width: 100%; height: 780px; border: none; display: block; } .cv-fallback { display: none; padding: 3rem; text-align: center; font-size: .85rem; color: var(--text2); line-height: 1.8; } .cv-fallback a { color: var(--accent); } @media (max-width: 900px) { .cv-frame-wrap iframe { height: 500px; } } /* ── TESTIMONIALS ───────────────────────────────────────── */ #testimonials { border-top: 1px solid var(--border); } .testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.5rem; } .testi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 2rem; display: flex; flex-direction: column; gap: 1.2rem; transition: all var(--t-base) var(--ease); position: relative; } .testi-card::before { content: '\201C'; position: absolute; top: .8rem; left: 1.2rem; font-size: 4rem; color: var(--accent); opacity: .15; font-family: Georgia, serif; line-height: 1; } .testi-card:hover { border-color: rgba(0,212,255,.3); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.4); } .testi-quote { font-size: .85rem; color: var(--text2); line-height: 1.9; font-style: italic; padding-top: 1rem; } .testi-author { display: flex; align-items: center; gap: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; } .testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--accent); flex-shrink: 0; } .testi-meta { flex: 1; } .testi-name { font-family: var(--font-display); font-size: .9rem; font-weight: 700; color: var(--text); } .testi-role { font-size: .7rem; color: var(--text3); letter-spacing: .08em; margin-top: .15rem; } .testi-platform { font-size: .65rem; color: var(--accent2); letter-spacing: .1em; text-transform: uppercase; } /* ── EXPERIENCE ──────────────────────────────────────────── */ #experience{border-top:1px solid var(--border)} .exp-list{display:flex;flex-direction:column;gap:2rem} .exp-card{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:2rem 2.5rem;display:grid;grid-template-columns:200px 1fr;gap:2rem;transition: all var(--t-base) var(--ease);position:relative;overflow:hidden} .exp-card::after{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--border);transition: background var(--t-base) var(--ease)} .exp-card:hover{border-color:rgba(0,212,255,.35);transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.4)} .exp-card:hover::after{background:var(--accent)} .exp-meta{padding-top:.2rem} .exp-period{font-size:.72rem;color:var(--accent);letter-spacing:.1em;margin-bottom:.5rem;display:block} .exp-company{font-family:var(--font-display);font-size:.9rem;font-weight:700;color:var(--text2)} .exp-location{font-size:.7rem;color:var(--text3);margin-top:.3rem;letter-spacing:.05em} .exp-main h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:.8rem} .exp-main p{font-size:.82rem;color:var(--text2);line-height:1.8;margin-bottom:1rem} .exp-achievements{list-style:none;margin-bottom:1.2rem;display:flex;flex-direction:column;gap:.5rem} .exp-achievements li{font-size:.8rem;color:var(--text2);padding-left:1.2rem;position:relative;line-height:1.7} .exp-achievements li::before{content:'\25B8';position:absolute;left:0;color:var(--accent2);font-size:.7rem} .exp-achievements li strong{color:var(--accent2)} .tech-stack{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .tech-badge{font-size:.68rem;padding:.2rem .6rem;border:1px solid var(--border);border-radius:2px;color:var(--text3);letter-spacing:.06em;background:rgba(255,255,255,.02);transition: all var(--t-base) var(--ease);position:relative;z-index:2} .tech-badge:hover{border-color:var(--accent);color:var(--accent)} /* ── PROJECTS ────────────────────────────────────────────── */ #projects{border-top:1px solid var(--border)} .projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1.5rem} .project-card{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:2rem;display:flex;flex-direction:column;gap:1rem;transition: all var(--t-base) var(--ease);position:relative;overflow:hidden} .project-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,212,255,.05) 0%,transparent 60%);opacity:0;transition: opacity var(--t-base) var(--ease);pointer-events:none} .project-card:hover{border-color:rgba(0,212,255,.35);transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.4)} .project-card:hover::before{opacity:1} .project-icon{width:44px;height:44px;border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:rgba(0,212,255,.06)} .project-card h3{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text)} .project-org{font-size:.7rem;color:var(--accent);letter-spacing:.1em;text-transform:uppercase} .project-card p{font-size:.8rem;color:var(--text2);line-height:1.8;flex:1} .project-outcomes{list-style:none;display:flex;flex-direction:column;gap:.4rem} .project-outcomes li{font-size:.75rem;color:var(--text2);padding-left:1rem;position:relative} .project-outcomes li::before{content:'\2192';position:absolute;left:0;color:var(--accent)} /* ── EDUCATION ───────────────────────────────────────────── */ #education{border-top:1px solid var(--border)} .edu-block h3{font-family:var(--font-display);font-size:.8rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text3);margin-bottom:1.5rem;padding-bottom:.7rem;border-bottom:1px solid var(--border)} .timeline{display:flex;flex-direction:column} .timeline-item{position:relative;padding:0 0 2rem 1.8rem;border-left:1px solid var(--border)} .timeline-item:last-child{border-left:1px solid transparent} .timeline-item::before{content:'';position:absolute;left:-4px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(0,212,255,.5)} .timeline-period{font-size:.7rem;color:var(--accent);letter-spacing:.12em;margin-bottom:.4rem;display:block} .timeline-item h4, .timeline-item h3{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:.2rem} .timeline-item .inst{font-size:.78rem;color:var(--text2);margin-bottom:.5rem} .timeline-item p{font-size:.76rem;color:var(--text3);line-height:1.7} /* ── CERTIFICATIONS (dedicated section) ─────────────────── */ #certifications{border-top:1px solid var(--border)} .certs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.5rem} .cert-card{position:relative;display:flex;flex-direction:column;gap:1rem;background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:1.8rem;overflow:hidden;transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)} .cert-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--cert-accent,var(--accent))} .cert-card:hover{transform:translateY(-4px);border-color:var(--cert-accent,var(--accent));box-shadow:0 18px 40px rgba(0,0,0,.4)} .cert-card.ceh{--cert-accent:var(--accent2)} .cert-card.nse{--cert-accent:var(--accent2)} .cert-card.thm{--cert-accent:var(--accent2)} .cert-card-top{display:flex;align-items:flex-start;gap:1rem} .cert-card-badge{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;background:color-mix(in srgb,var(--cert-accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--cert-accent) 30%,transparent)} .cert-card-head{flex:1;min-width:0} .cert-card-issuer{font-size:.62rem;color:var(--cert-accent);letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:.35rem;display:block} .cert-card-name{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--text);line-height:1.25} .cert-card-foot{margin-top:auto;border-top:1px solid var(--border);padding-top:.9rem} .cert-card-id{font-family:var(--font-mono);font-size:.7rem;color:var(--text2);letter-spacing:.06em;word-break:break-all} /* The credential ID becomes an when the cert has a downloadable certificate. Keep it looking identical to the non-linked
, and only signal interactivity on hover. */ a.cert-card-id{display:block;text-decoration:none;transition: color var(--t-base) var(--ease)} a.cert-card-id:hover{color:var(--accent)} a.cert-card-id:hover .val{text-decoration:underline} a.cert-card-id:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} .cert-card-id .lbl{color:var(--text3);text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;margin-right:.4rem} .cert-card-id .val{color:var(--text);font-weight:700} .cert-pill{display:inline-flex;align-items:center;gap:.45rem;font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cert-accent);text-decoration:none;cursor:pointer} .cert-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cert-accent);box-shadow:0 0 8px var(--cert-accent);animation:blink 1.5s step-end infinite} a.cert-pill:hover{opacity:.75;text-decoration:underline} @media(max-width:600px){.certs-grid{grid-template-columns:1fr}} /* ── BADGES ─────────────────────────────────────────────── */ .badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.1rem} .badge-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.2rem .9rem;text-decoration:none;transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)} .badge-card:hover{transform:translateY(-4px)} .badge-card img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))} .badge-name{font-size:.82rem;font-weight:600;color:var(--text);line-height:1.3} .badge-tag{font-size:.66rem;letter-spacing:.08em;text-transform:none;font-weight:700;color:var(--text-dim);background:var(--surface-2,rgba(255,255,255,.05));border:1px solid var(--border);border-radius:20px;padding:.12rem .55rem} /* Rarity-tier tag colours — theme tokens (see assets/css/tokens.css) so light mode meets 4.5:1 contrast instead of inheriting the dark-only literals. */ .badge-card.t-exam .badge-tag{color:var(--tier-exam);border-color:rgba(var(--tier-exam-rgb),.45);background:rgba(var(--tier-exam-rgb),.08)} .badge-card.t-common .badge-tag{color:var(--tier-common);border-color:rgba(var(--tier-common-rgb),.35);background:rgba(var(--tier-common-rgb),.06)} .badge-card.t-rare .badge-tag{color:var(--tier-rare);border-color:rgba(var(--tier-rare-rgb),.42);background:rgba(var(--tier-rare-rgb),.08)} .badge-card.t-epic .badge-tag{color:var(--tier-epic);border-color:rgba(var(--tier-epic-rgb),.5);background:rgba(var(--tier-epic-rgb),.1)} /* Per-tier coloured border + glow on every badge (matches its tag colour). */ .badge-card.t-exam{border-color:rgba(62,207,142,.42);box-shadow:0 0 15px -6px rgba(62,207,142,.55)} .badge-card.t-exam:hover{box-shadow:0 9px 24px -8px rgba(62,207,142,.72)} .badge-card.t-common{border-color:rgba(143,214,166,.38);box-shadow:0 0 15px -6px rgba(143,214,166,.42)} .badge-card.t-common:hover{box-shadow:0 9px 24px -8px rgba(143,214,166,.6)} .badge-card.t-rare{border-color:rgba(245,166,35,.42);box-shadow:0 0 15px -6px rgba(245,166,35,.5)} .badge-card.t-rare:hover{box-shadow:0 9px 24px -8px rgba(245,166,35,.7)} .badge-card.t-epic{border-color:rgba(215,161,255,.48);box-shadow:0 0 17px -5px rgba(215,161,255,.62)} .badge-card.t-epic:hover{box-shadow:0 9px 26px -8px rgba(215,161,255,.8)} .badge-desc{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(5px);width:max-content;max-width:196px;background:var(--surface-2,#141a24);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.5rem .7rem;font-size:.7rem;font-weight:500;line-height:1.45;text-align:center;box-shadow:0 10px 26px -10px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);z-index:20} .badge-desc::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--border)} .badge-card:hover .badge-desc,.badge-card:focus-visible .badge-desc{opacity:1;transform:translateX(-50%) translateY(0)} @media(prefers-reduced-motion:reduce){.badge-desc{transition: opacity var(--t-base) var(--ease);transform:translateX(-50%)}.badge-card:hover .badge-desc,.badge-card:focus-visible .badge-desc{transform:translateX(-50%)}} @media(max-width:600px){.badges-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.8rem}.badge-card img{width:76px;height:76px}.badge-desc{max-width:150px}} /* ── GLITCH HEADING EFFECT ──────────────────────────────── */ @keyframes glitch { 0% { clip-path: inset(40% 0 60% 0); transform: translate(-3px, 0); } 10% { clip-path: inset(10% 0 85% 0); transform: translate(2px, 0); } 20% { clip-path: inset(70% 0 5% 0); transform: translate(-2px, 0); } 30% { clip-path: inset(30% 0 50% 0); transform: translate(3px, 0); } 40% { clip-path: inset(80% 0 10% 0); transform: translate(-1px, 0); } 50% { clip-path: inset(20% 0 70% 0); transform: translate(2px, 0); } 60% { clip-path: inset(55% 0 35% 0); transform: translate(-3px, 0); } 70% { clip-path: inset(5% 0 90% 0); transform: translate(1px, 0); } 80% { clip-path: inset(65% 0 25% 0); transform: translate(-2px, 0); } 90% { clip-path: inset(15% 0 75% 0); transform: translate(3px, 0); } 100% { clip-path: inset(40% 0 60% 0); transform: translate(-3px, 0); } } .glitch-title { position: relative; } .glitch-title::before, .glitch-title::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; opacity: 0; pointer-events: none; } .glitch-title.glitching::before { color: var(--accent); opacity: .7; animation: glitch .18s steps(1) 0s 3; } .glitch-title.glitching::after { color: var(--accent2); opacity: .5; animation: glitch .18s steps(1) .04s 3; } /* ── CONTACT ─────────────────────────────────────────────── */ #contact{position:relative;z-index:2;border-top:1px solid var(--border);max-width:100%;padding:6rem var(--gutter);background:linear-gradient(180deg,transparent,rgba(var(--accent-rgb),.03))} .contact-inner{max-width:var(--page-max);margin:0 auto} .contact-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;column-gap:4rem;row-gap:0;align-items:start} .contact-info h3{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;color:var(--text);margin-bottom:1rem;letter-spacing:.08em;text-transform:uppercase} .contact-info h3 span{color:var(--accent)} .contact-info p{font-size:.85rem;color:var(--text2);line-height:1.8;margin-bottom:2rem;max-width:380px} /* Local time and availability. Starts [hidden] in the markup and is only revealed if SITE.features.clock is on, so turning the feature off leaves no empty row behind. */ .local-now{display:flex;align-items:center;gap:.5rem;margin:.9rem 0 0;font-family:var(--font-mono); font-size:.72rem;color:var(--text3);letter-spacing:.04em} .now-dot{width:7px;height:7px;border-radius:50%;background:var(--accent2);flex:none; box-shadow:0 0 0 0 rgba(var(--accent2-rgb),.55);animation:nowPulse 2.4s ease-out infinite} .now-dot.off{background:var(--text3);animation:none;box-shadow:none} @keyframes nowPulse{ 0%{box-shadow:0 0 0 0 rgba(var(--accent2-rgb),.5)} 70%{box-shadow:0 0 0 7px rgba(var(--accent2-rgb),0)} 100%{box-shadow:0 0 0 0 rgba(var(--accent2-rgb),0)} } .now-label{color:var(--text3)} .now-time{color:var(--text2);font-variant-numeric:tabular-nums} .now-avail{color:var(--accent2)} .now-avail.off{color:var(--text3)} .contact-links{display:flex;flex-direction:column;gap:.8rem} .contact-link{display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--text2);padding:.9rem 1.2rem;background:var(--surface);border:1px solid var(--border);border-radius:3px;transition: all var(--t-base) var(--ease);font-size:.82rem} .contact-link:hover{border-color:var(--accent);color:var(--text);transform:translateX(4px)} /* A row so the copy button can be a sibling of the link rather than inside it - a