/* =================================================================== GLOBAL TOKENS & RESETS (refined) - Dark is the default. - Light mode can be activated by EITHER: 1) (legacy hook) 2) (new hook) - If neither is set, we follow the system preference. =================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); *, *::before, *::after { box-sizing: border-box; } /* ---------- DARK (default) ---------- */ :root, :root[data-theme="dark"] { /* Brand palette */ --bg-color: #070c2b; --second-bg-color: #0e2247; --text-color: #ffffff; --muted: #d6d8e6; --main-color: #04f39f90; /* Accent / CTA */ --accent: #00fff2; /* Neon */ /* Layout */ --container-x: clamp(1.2rem, 4vw, 9%); --radius: 16px; --radius-sm: 10px; --border: color-mix(in oklab, #ffffff, #000 80%); --card-bg: color-mix(in oklab, var(--second-bg-color), black 0%); /* Shadows */ --shadow: 0 8px 30px rgba(0,0,0,.25); --shadow-soft: 0 6px 20px rgba(0,0,0,.18); --shadow-glow: 0 0 25px rgba(0,255,136,.25); /* Fluid type scale */ --fs-h1: clamp(3rem, 2rem + 3vw, 6.4rem); --fs-h2: clamp(2.2rem, 1.4rem + 2vw, 4.5rem); --fs-h3: clamp(1.6rem, 1.2rem + 1vw, 2.6rem); --fs-body: clamp(1.4rem, 1.1rem + 0.5vw, 1.8rem); --fs-small: clamp(1.2rem, 1rem + 0.3vw, 1.5rem); /* Spacing */ --space-1: clamp(.6rem, .4rem + .5vw, .9rem); --space-2: clamp(1rem, .8rem + .8vw, 1.6rem); --space-3: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); --space-4: clamp(2.2rem, 1.6rem + 1.4vw, 3rem); --space-5: clamp(3rem, 2rem + 2vw, 4.5rem); } /* ---------- LIGHT (bridge: either hook works) ---------- */ :root[data-theme="light"], body.light-mode { --bg-color: #f7f7f5; /* ← off-white, not #fff */ --second-bg-color: #ffffff; --text-color: #111315; --muted: #334155; --border: #e5e7eb; --card-bg: #ffffff; --main-color: #10b981; /* ← add this so accents pop on light */ } /* ---------- System preference fallback ---------- Only applies when you haven't explicitly set a theme (no data-theme on AND no .light-mode on ). -------------------------------------------------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --bg-color: #f7f7f5; /* match your off-white */ --second-bg-color: #ffffff; --text-color: #111315; --muted: #334155; --border: #e5e7eb; --card-bg: #ffffff; --accent: #10b981; --shadow: 0 8px 24px rgba(2, 6, 23, .08); --shadow-soft: 0 6px 18px rgba(2, 6, 23, .06); --shadow-glow: 0 0 22px rgba(16,185,129,.18); } } /* Base */ html { font-size: 62.5%; overflow-x: hidden; } body { margin: 0; background: var(--bg-color); color: var(--text-color); font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height: 1.6; text-rendering: optimizeLegibility; } /* Smooth scrolling (respects reduced motion) */ :root { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } img { max-width: 100%; height: auto; } /* Explicit light-mode override via body class (your toggle) */ body.light-mode { --bg-color: #ffffff; --second-bg-color: #f6f7fb; --text-color: #111315; --muted: #334155; --border: #e5e7eb; --card-bg: #ffffff; } /* Base */ html { font-size: 62.5%; overflow-x: hidden; } body { margin: 0; background: var(--bg-color); color: var(--text-color); font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height: 1.6; text-rendering: optimizeLegibility; } /* Motion */ :root { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } img { max-width: 100%; height: auto; } /* Sections */ section { min-height: 100vh; padding: 10rem var(--container-x) 2rem; } .heading { text-align: center; font-size: var(--fs-h2); margin-bottom: var(--space-5); } .heading span { color: var(--main-color); } /* ========================================================= SUPER–STICKY, GLASSY NAV (MOBILE-OPTIMIZED) ========================================================= */ /* Keep content from sliding under the fixed header + safe areas */ :root{ --header-h: 76px; } html { scroll-padding-top: var(--header-h); } /* anchors don't hide */ body { padding-top: var(--header-h); } /* Header bar */ .header{ position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: clamp(.8rem, 1.5vw, 2rem); padding: .9rem max(var(--container-x), env(safe-area-inset-left)) .9rem max(var(--container-x), env(safe-area-inset-right)); /* premium glass gradient with subtle depth */ background: linear-gradient(180deg, color-mix(in oklab, var(--bg-color), transparent 8%) 0%, color-mix(in oklab, var(--bg-color), transparent 2%) 60%, color-mix(in oklab, var(--bg-color), transparent 0%) 100%); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid color-mix(in oklab, var(--text-color), transparent 86%); transition: padding .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; } /* Ambient glow ridge on the top edge (kept light for perf) */ .header::before{ content:""; position:absolute; inset:0 0 auto 0; height:12px; pointer-events:none; background: radial-gradient(120% 12px at 50% 0, color-mix(in oklab, var(--main-color), transparent 72%), transparent 70%); opacity:.45; } /* Compress/shadow on scroll (JS toggles .is-shrink) */ .header.is-shrink{ padding: .4rem max(var(--container-x), env(safe-area-inset-left)) .4rem max(var(--container-x), env(safe-area-inset-right)); box-shadow: 0 6px 28px rgba(0,0,0,.28); } /* ===== brand block ===== */ .logo-section{ display:flex; align-items:center; gap:.8rem; white-space:nowrap; text-decoration:none; min-height: 44px; /* tap target */ } .brand-mark{ width:32px; height:32px; display:block; object-fit:contain; border-radius:8px; filter: drop-shadow(0 0 6px rgba(0,255,136,.45)); will-change: transform; } .logo-section:hover .brand-mark{ transform: translateZ(0) scale(1.02); transition: transform .2s ease; } .brand-title{ line-height:1; font-size:1.5rem; font-weight:800; color:var(--text-color); opacity:.98; letter-spacing:.01em; } .brand-chip{ margin-left:.5rem; padding:.28rem .72rem; font-size:1.15rem; font-weight:800; border-radius:999px; color:#0b1220; background:var(--accent); border: 1px solid color-mix(in oklab, var(--accent), transparent 45%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px rgba(0,0,0,.18), 0 0 14px color-mix(in oklab, var(--accent), transparent 70%); position:relative; overflow:hidden; } .brand-chip::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.38) 45%, transparent 65%); transform: translateX(-120%); animation: chipShine 4s ease-in-out infinite; } @keyframes chipShine{ 0%,30%{ transform: translateX(-120%); } 55% { transform: translateX(120%); } 100% { transform: translateX(120%); } } /* ===== centered nav ===== */ .header .navbar{ justify-self:center; display:flex; align-items:center; gap: clamp(1.2rem, 3vw, 3.2rem); } /* Links: bold + animated underline */ .header .navbar .nav-link{ position: relative; font-size: 1.8rem; font-weight: 800; letter-spacing:.01em; color: var(--text-color); text-decoration: none; opacity: .92; padding: .4rem 0; line-height: 1; /* taller hit area */ transition: opacity .2s ease, color .2s ease; } .header .navbar .nav-link:hover{ opacity: 1; } .header .navbar .nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--main-color), var(--accent)); border-radius: 2px; transition: transform .25s cubic-bezier(.2,.8,.2,1); } .header .navbar .nav-link.is-active::after{ transform: scaleX(1); } .header .navbar .nav-link:focus-visible{ outline: 3px solid color-mix(in oklab, var(--main-color), white 15%); outline-offset: 4px; border-radius: 4px; } /* ===== progress line (GPU-friendly) ===== */ #nav-progress{ position:absolute; left:0; right:0; bottom:0; height:3px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--main-color), var(--accent)); box-shadow: 0 0 10px color-mix(in oklab, var(--main-color), transparent 40%); opacity:.95; pointer-events:none; will-change: transform; } /* ===== mobile drawer (GPU-accelerated; no layout thrash) ===== */ .hamburger{ display:inline-flex; align-items:center; justify-content:center; width: 42px; height: 42px; min-width: 42px; min-height: 42px; border: 1px solid color-mix(in oklab, var(--text-color), transparent 85%); border-radius: 10px; background: color-mix(in oklab, var(--second-bg-color), transparent 20%); color: var(--text-color); cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .08s ease, box-shadow .2s ease; } .hamburger:hover{ background: color-mix(in oklab, var(--second-bg-color), #000 6%); } .hamburger:active{ transform: translateY(1px); } @media (max-width: 900px){ .header{ grid-template-columns: 1fr auto auto; /* lighter glass on mobile for perf */ backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); } /* Drawer uses transform+opacity instead of display:none to avoid reflow */ .header .navbar{ position: absolute; inset: calc(100% + 1px) 0 auto 0; display:flex; flex-direction: column; gap: .9rem; padding: 1.1rem max(var(--container-x), env(safe-area-inset-left)) 1.4rem max(var(--container-x), env(safe-area-inset-right)); background: color-mix(in oklab, var(--bg-color), transparent 6%); backdrop-filter: blur(10px) saturate(140%); border-top: 1px solid color-mix(in oklab, var(--text-color), transparent 86%); box-shadow: 0 14px 30px rgba(0,0,0,.22); transform: translateY(-8px); opacity: 0; pointer-events: none; will-change: transform, opacity; transition: transform .18s ease, opacity .18s ease; } .header .navbar.active{ transform: translateY(0); opacity: 1; pointer-events: auto; } .header .navbar .nav-link{ font-size: 2rem; padding: .7rem 0; /* ≥44px tap target */ } /* Tone down chip shine on small screens (battery/GPU) */ .brand-chip::after{ animation-duration: 6s; opacity: .85; } } /* ===== light mode refinements (strong visibility) ===== */ body.light-mode .header{ background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 60%, rgba(255,255,255,.7) 100%); border-bottom: 1px solid var(--border); box-shadow: 0 10px 26px rgba(16,24,40,.08); } body.light-mode .header .navbar .nav-link{ color:#0b1220; opacity:.92; } body.light-mode .header .navbar .nav-link.is-active::after{ background: linear-gradient(90deg, color-mix(in oklab, var(--main-color), #000 0%), var(--accent)); } body.light-mode .brand-chip{ color:#071018; background: color-mix(in oklab, var(--accent), white 0%); border-color: color-mix(in oklab, var(--accent), transparent 40%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(16,24,40,.08), 0 0 12px color-mix(in oklab, var(--accent), transparent 70%); } /* Respect reduced motion everywhere */ @media (prefers-reduced-motion: reduce){ .header, .header *{ transition: none !important; animation: none !important; } } /* ============ Minimal neon-teal brand ============ */ .brand-hero{ display:flex; align-items:center; gap:.9rem; text-decoration:none; user-select:none; will-change:transform, filter; } .brand-hero:focus-visible{ outline:3px solid color-mix(in oklab, var(--accent), white 20%); outline-offset:4px; border-radius:12px; } /* --- Icon (ion ring + monogram) --- */ .brand-icon{ position:relative; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background: radial-gradient(closest-side, #061a18, #061114); box-shadow: 0 0 18px rgba(0,255,136,.35), inset 0 0 10px rgba(0,255,136,.28); overflow:hidden; } .brand-initials{ position:relative; z-index:2; font: 800 1.1rem/1 Poppins, system-ui; letter-spacing:.04em; color:#cffff1; text-shadow:0 0 8px rgba(0,255,136,.45); } /* segmented ring (no rainbow, teal only) */ .ion-ring{ position:absolute; inset:-3px; border-radius:50%; } .ring-seg{ position:absolute; inset:0; border-radius:50%; border:3px solid transparent; -webkit-mask: conic-gradient(from var(--from,0deg), #000 0 85%, transparent 85% 100%), radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0); -webkit-mask-composite: source-in; mask-composite: intersect; background: conic-gradient(from var(--rot,0deg), rgba(0,255,136,.95) 0 30%, rgba(0,255,136,.16) 30% 100%); filter: blur(.2px) saturate(125%); animation: ring-spin 8s linear infinite; opacity:.95; } .ring-seg--1{ --from: 0deg; --rot: 0deg; } .ring-seg--2{ --from:120deg; --rot: 30deg; animation-duration: 10s; opacity:.85;} .ring-seg--3{ --from:240deg; --rot:-30deg; animation-duration: 12s; opacity:.72;} @keyframes ring-spin { to { transform: rotate(1turn); } } /* --- Wordmark --- */ .brand-word{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; } .brand-name{ --ink-a: color-mix(in oklab, var(--main-color, #00f39f), #0ee 10%); --ink-b: color-mix(in oklab, var(--accent, #00fff2), #0f8 15%); font-weight:900; font-size:1.7rem; letter-spacing:.01em; line-height:1; background: linear-gradient(90deg, var(--ink-a), var(--ink-b)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 1px 0 rgba(0,0,0,.25); } /* --- Portfolio chip (teal, no rainbow) --- */ .brand-chip{ position:relative; padding:.32rem .8rem; border-radius:999px; font-weight:800; font-size:1.15rem; line-height:1; color:#061018; background: #22f7c4; border:1px solid color-mix(in oklab, #22f7c4, #000 30%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 16px rgba(0,0,0,.16), 0 0 12px rgba(34,247,196,.45); overflow:hidden; } .chip-sweep{ position:absolute; inset:0; border-radius:inherit; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform: translateX(-120%); animation: chip-sweep 3.2s ease-in-out infinite; pointer-events:none; } @keyframes chip-sweep{ 0%,30%{ transform:translateX(-120%); } 55% { transform:translateX(120%); } 100% { transform:translateX(120%); } } /* hover micro-tilt (desktop only) */ @media (hover:hover){ .brand-hero:hover{ transform: translateZ(0) perspective(900px) rotateX(1.5deg) rotateY(-1.8deg); filter: drop-shadow(0 6px 18px rgba(0,0,0,.20)); } } /* Light mode tuning */ body.light-mode .brand-icon{ background: radial-gradient(closest-side, #f2fffb, #eafff7); box-shadow: 0 0 14px rgba(16,185,129,.32), inset 0 0 8px rgba(16,185,129,.24); } body.light-mode .brand-initials{ color:#065f46; text-shadow:none; } body.light-mode .brand-name{ --ink-a: #0ea5e9; /* sky */ --ink-b: #10b981; /* emerald */ text-shadow:none; } body.light-mode .brand-chip{ background:#10b981; color:#071018; border-color: color-mix(in oklab, #10b981, #000 25%); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 6px 16px rgba(16,24,40,.08); } /* Motion safety */ @media (prefers-reduced-motion: reduce){ .ring-seg, .chip-sweep{ animation:none !important; } } /* =========================== THEME TOGGLE (checkbox or button) =========================== */ /* THEME TOGGLE — high-contrast, mobile-friendly */ .header-actions{ display:flex; gap:.6rem; align-items:center; } /* Button surface */ .theme-toggle-btn{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; min-width:46px; min-height:46px; /* ≥44px tap target */ border-radius:12px; border:1px solid color-mix(in oklab, var(--text-color), transparent 82%); background: color-mix(in oklab, var(--second-bg-color), transparent 12%); color: var(--text-color); box-shadow: 0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08); transition: background .18s ease, border-color .18s ease, transform .08s ease, box-shadow .18s ease; -webkit-tap-highlight-color: transparent; } .theme-toggle-btn:hover{ background: color-mix(in oklab, var(--second-bg-color), #000 6%); } .theme-toggle-btn:active{ transform: translateY(1px); } .theme-toggle-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), white 10%), 0 6px 18px rgba(0,0,0,.22); } /* SVG icons inside the button */ .theme-toggle-btn .icon{ width:22px; height:22px; flex:0 0 22px; } /* Swap by theme */ :root[data-theme="light"] .theme-toggle-btn .sun{ display:inline; } :root[data-theme="light"] .theme-toggle-btn .moon{ display:none; } :root[data-theme="dark"] .theme-toggle-btn .sun{ display:none; } :root[data-theme="dark"] .theme-toggle-btn .moon{ display:inline; } /* Light mode surface (so it doesn't disappear on bright backgrounds) */ :root[data-theme="light"] .theme-toggle-btn, body.light-mode .theme-toggle-btn{ background:#ffffff; color:#111315; border-color: var(--border, #e5e7eb); box-shadow: 0 8px 20px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.6); } /* Mobile size tune */ @media (max-width: 900px){ .theme-toggle-btn{ width:44px; height:44px; border-radius:11px; } } /* =========================== HAMBURGER + MOBILE NAV =========================== */ .hamburger{ justify-self:end; display: none; align-items:center; justify-content:center; width: 42px; height: 34px; border: 1px solid color-mix(in oklab, var(--text-color), transparent 85%); border-radius: 9px; background: color-mix(in oklab, var(--second-bg-color), transparent 20%); color: var(--text-color); cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .08s ease, box-shadow .2s ease; } .hamburger i{ font-size: 1.65rem; line-height: 34px; } .hamburger:hover{ background: color-mix(in oklab, var(--second-bg-color), #000 6%); } .hamburger:active{ transform: translateY(1px); } .hamburger:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%); } /* optional open-state class from JS */ .hamburger.is-open{ background: color-mix(in oklab, var(--second-bg-color), #000 10%); } /* Mobile sheet */ @media (max-width: 900px){ .hamburger{ display:inline-flex; } .header{ grid-template-columns: 1fr auto auto; } /* logo | toggle | burger */ .header .navbar{ position: absolute; inset: calc(100% + 1px) 0 auto 0; display: none; flex-direction: column; gap: 1.2rem; padding: 1.2rem var(--container-x) 1.6rem; background: color-mix(in oklab, var(--bg-color), transparent 4%); backdrop-filter: blur(8px); border-top: 1px solid color-mix(in oklab, var(--text-color), transparent 86%); } .header .navbar.active{ display:flex; } .header .navbar a{ font-size: 1.9rem; } .header .navbar a::after{ bottom:-6px; height:2px; } } /* ---------- Light mode readability ---------- */ body.light-mode .header{ background: linear-gradient(to right, rgba(255,255,255,.82), rgba(255,255,255,.66)); border-bottom:1px solid var(--border); box-shadow:0 10px 26px rgba(16,24,40,.08); } body.light-mode .brand-chip{ background:rgba(16,185,129,1); color:#071018; border:none; } body.light-mode .theme-toggle label{ background:#ffffff; border-color:var(--border); box-shadow:0 6px 16px rgba(2,6,23,.06) inset; } body.light-mode .header .navbar a{ color:var(--text-color); } body.light-mode .header .navbar a.active{ color:var(--main-color); } /* =================================================================== HOME =================================================================== */ /* Hero takes the full viewport height and has bottom padding for the chevron */ /* ===== HERO (refined, same visuals) ===== */ .home{ position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(1.6rem, 2vw, var(--space-4)); align-items: center; /* clear fixed header + give breathing room for the chevron */ padding-top: 8rem; padding-bottom: clamp(7rem, 10vh, 10rem); /* full viewport height (small-viewport safe) */ min-height: 100svh; /* keep content away from viewport edges on tiny screens */ padding-left: max(1.2rem, env(safe-area-inset-left)); padding-right: max(1.2rem, env(safe-area-inset-right)); } /* CTA never hugs the seam; keep spacing consistent even if text wraps */ .home .btn{ margin-bottom: 2.2rem; inline-size: fit-content; } /* Center block + readable line lengths */ .home-content{ justify-self: center; text-align: center; max-width: 860px; margin-inline: auto; text-wrap: balance; /* prettier multi-line headings */ } .home-content h3{ font-size: clamp(1.9rem, 1.2rem + 1.4vw, 3.2rem); margin: 0 0 .75rem; letter-spacing: .2px; } .home-content h1{ font-size: var(--fs-h1); font-weight: 900; color: var(--main-color); line-height: 1.15; /* a touch tighter, same look */ margin: 0 0 1.25rem; } /* Roles line – theme aware and slightly stronger contrast */ #typed-roles{ font-size: clamp(1.6rem, 1.1rem + .9vw, 2.6rem); color: color-mix(in oklab, var(--text-color), #000 10%); } .home-content p{ font-size: var(--fs-body); color: var(--muted); max-width: 60rem; margin: 0 auto 1.2rem; } /* Image: preserve aspect ratio, prevent CLS, crisp on retina */ .home-image img{ width: min(100%, 420px); aspect-ratio: 1 / 1; /* keeps layout steady before load */ border-radius: 2rem; box-shadow: var(--shadow-soft); display: block; margin-inline: auto; image-rendering: -webkit-optimize-contrast; } /* Slightly smaller image on mid screens to reduce crowding */ @media (max-width: 1099px){ .home-image img{ width: min(100%, 360px); } } /* Give a little more vertical ease on very short viewports */ @media (max-height: 680px){ .home{ padding-bottom: clamp(5rem, 8vh, 7rem); } } /* Social icons (centered) */ .social-media { display: flex; justify-content: center; gap: 1.1rem; margin: 1.2rem auto 2rem; flex-wrap: wrap; } .social-media a { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; background: var(--second-bg-color); border: 2px solid var(--main-color); color: var(--text-color); font-size: 2.4rem; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; } .social-media a:hover { background: var(--main-color); color: #fff; transform: translateY(-2px); box-shadow: 0 0 12px var(--main-color); } /* CTA */ .btn { display: inline-block; padding: 1rem 2.2rem; background: var(--main-color); color: var(--second-bg-color); border-radius: 999px; font-size: 1.6rem; font-weight: 700; letter-spacing: .06em; text-decoration: none; box-shadow: 0 0 1rem color-mix(in oklab, var(--main-color), transparent 40%); transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; } .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 1.4rem var(--main-color); } /* Pin the chevron to the bottom-center of the hero */ .home { position: relative; } /* make the hero a positioning context */ .scroll-down{ position: absolute; left: 50%; bottom: clamp(1.6rem, 3vh, 3.2rem); transform: translateX(-50%) rotate(45deg); width: 26px; height: 26px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; color: var(--text-color); opacity: .9; z-index: 15; animation: sd-bounce 2s infinite; } .scroll-down:hover{ opacity: 1; transform: translateX(-50%) translateY(2px) rotate(45deg); } @keyframes sd-bounce{ 0%,100% { transform: translateX(-50%) translateY(0) rotate(45deg); } 50% { transform: translateX(-50%) translateY(10px) rotate(45deg); } } @media (prefers-reduced-motion: reduce){ .scroll-down{ animation: none; } } /* Quote */ .quote-box { font-size: var(--fs-small); font-style: italic; font-weight: 500; text-align: center; margin: var(--space-3) auto; max-width: 80ch; padding: 1.2rem 1.8rem; border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.05); box-shadow: var(--shadow-glow); backdrop-filter: blur(5px); transition: opacity .5s ease-in-out; } .quote-box.fade { opacity: 0; } body.light-mode .quote-box { color: #0f172a; background: rgba(0,0,0,.06); box-shadow: 0 0 25px rgba(0,0,0,.07); } /* =================================================================== ABOUT =================================================================== */ .about { display: grid; gap: var(--space-4); align-items: center; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); background: var(--second-bg-color); } .about-content h2 { text-align: left; line-height: 1.2; margin: 0 0 var(--space-2); } .about-content h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-1); } .about-content p { font-size: 1.6rem; margin: 1rem 0 2rem; color: var(--text-color); } /* =========================== Luxe About Portrait (subtle) =========================== */ :root{ /* tune these two to your taste */ --about-radius: 28px; /* “circular edges” */ --about-shadow: 0 14px 40px rgba(0,0,0,.28); } .about .about-image{ display: grid; place-items: center; } .about-portrait.luxe{ position: relative; width: min(520px, 92vw); aspect-ratio: 4/5; /* keep the original look */ border-radius: var(--about-radius); overflow: hidden; background: linear-gradient(180deg, color-mix(in oklab, var(--bg-color), var(--main-color) 6%), var(--second-bg-color)); box-shadow: var(--about-shadow); transform-style: preserve-3d; will-change: transform; } /* The image stays the hero — gentle “breathing” only */ .luxe-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); filter: saturate(1.03) contrast(1.02); transition: transform .6s ease; } /* Premium 1.5px animated gradient border (very subtle) */ .luxe-border{ position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1.5px; background: conic-gradient( from 0deg, color-mix(in oklab, var(--accent), #0ff 15%) 0%, color-mix(in oklab, var(--main-color), #0ff 10%) 25%, transparent 40% 60%, var(--accent) 75%, color-mix(in oklab, var(--main-color), #0ff 20%) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .65; animation: luxeRing 24s linear infinite; } /* Gentle light streak — paused until hover/focus */ .luxe-glare{ position: absolute; inset: -15%; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 60%); mix-blend-mode: screen; opacity: .0; transform: translate(-12%, -6%) rotate(.6deg); transition: opacity .6s ease, transform .8s ease; } /* Hover/focus states: a touch more alive, still elegant */ .about-portrait.luxe:hover .luxe-img, .about-portrait.luxe:focus-within .luxe-img{ transform: scale(1.035); } .about-portrait.luxe:hover .luxe-glare, .about-portrait.luxe:focus-within .luxe-glare{ opacity: .8; transform: translate(8%, 6%) rotate(2deg); } /* Tiny ring spin (kept very slow) */ @keyframes luxeRing { to { transform: rotate(1turn); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ .luxe-border{ animation: none !important; } .luxe-img{ transform: none; } .luxe-glare{ transition: none; } } /* ========================================= ABOUT — make the portrait fully visible on phones ========================================= */ @media (max-width: 600px){ /* Let the card size itself to the image (no forced ratio) */ .about .about-portrait.luxe, .about .ultra-card, .about .about-image{ width: 100%; border-radius: 20px; aspect-ratio: auto; /* stop enforcing 4/5 etc. */ overflow: hidden; /* keep rounded corners clean */ } /* Make the photo fit entirely */ .about .about-image img, .about .luxe-img, .about .ultra-fallback{ position: static; /* no absolute fill */ display: block; width: 100%; height: auto; /* take natural height */ object-fit: contain; /* show the whole image */ transform: none !important;/* cancel scale(1.02) etc. */ animation: none !important; } /* If you’re using the WebGL canvas, hide it on phones so the static image shows */ .about .ultra-canvas{ display: none !important; } /* Give the section a little breathing room so the full image isn’t cramped */ section.about{ padding-left: 1rem; padding-right: 1rem; } } /* ========================================= ABOUT — PLATINUM EDITION (absolute fancy) ========================================= */ :root{ --platinum-max: 1100px; --halo-a: color-mix(in oklab, var(--main-color), transparent 80%); --halo-b: color-mix(in oklab, var(--accent), transparent 82%); --edge: color-mix(in oklab, var(--main-color), #0ff 22%); --glass: color-mix(in oklab, var(--second-bg-color), var(--main-color) 12%); } /* keep background dots *behind* */ section.about{ position: relative; isolation: isolate; } section.about > *{ position: relative; z-index: 1; } @media (min-width: 992px){ .about .about-copy.platinum{ max-width: var(--platinum-max); } } .about .about-copy.platinum{ display: grid; gap: 1.35rem; position: relative; } /* soft gradient halo just behind the text column */ .about .about-copy.platinum::before{ content:""; position:absolute; inset:-6% -10% -8% -6%; background: radial-gradient(60% 50% at 20% 12%, var(--halo-a), transparent 70%), radial-gradient(70% 60% at 85% 20%, var(--halo-b), transparent 70%); filter: blur(40px); z-index: 0; pointer-events: none; } /* HERO headline + animated underline + traveling sparkle */ .about .about-copy.platinum .about-hd{ font-size: clamp(3.2rem, 2.8vw + 2.4rem, 5.2rem); line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 .55rem 0; padding-bottom: .6rem; position: relative; } .about .about-copy.platinum .about-hd .accent{ background: linear-gradient(90deg, color-mix(in oklab, var(--main-color), #0ff 25%), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; } .about .about-copy.platinum .about-hd::after{ content:""; position:absolute; left:0; bottom:0; width: clamp(220px, 36%, 360px); height:3px; border-radius:3px; background: linear-gradient(90deg, var(--edge), var(--accent)); box-shadow: 0 0 30px color-mix(in oklab, var(--main-color), transparent 58%); transform-origin:left center; animation: underlineBreath 9s ease-in-out infinite; } .about .about-copy.platinum .sparkle{ position:absolute; bottom:-2px; left:0; width:10px; height:10px; border-radius:50%; background: radial-gradient(circle, #fff, var(--edge) 60%, transparent 70%); filter: drop-shadow(0 0 12px var(--edge)); animation: sparkleRun 4.8s ease-in-out infinite; } @keyframes underlineBreath{ 0%,100%{transform:scaleX(1)} 50%{transform:scaleX(1.08)} } @keyframes sparkleRun{ 0%{transform:translateX(0)} 50%{transform:translateX(clamp(220px,36%,360px))} 100%{transform:translateX(0)} } /* Editorial lead + sculpted drop cap */ .about .about-copy.platinum .lead{ font-size: clamp(1.2rem, 1.1vw + 1rem, 1.5rem); line-height: 1.95; text-wrap: pretty; letter-spacing:.005em; } .about .about-copy.platinum .lead.drop::first-letter{ float:left; font-size:4.4em; line-height:.9; font-weight:800; margin:.04em .26em 0 0; padding-right:.02em; color: color-mix(in oklab, var(--main-color), #0ff 18%); text-shadow: 0 12px 32px color-mix(in oklab, var(--main-color), transparent 60%); } /* bespoke highlight mark */ .about .about-copy.platinum mark.spark{ background: linear-gradient(90deg, color-mix(in oklab, var(--accent), transparent 72%), transparent 78%) !important; color: inherit !important; padding:.06em .16em; border-radius:.35em; box-shadow: 0 1px 0 inset color-mix(in oklab, var(--main-color), transparent 72%); } /* premium pills with icon dot + hover lift */ .about .about-copy.platinum .about-pills{ display:flex; flex-wrap:wrap; gap:.68rem; margin:.25rem 0 0; padding-left:0; list-style:none; } .about .about-copy.platinum .about-pills li{ display:inline-flex; align-items:center; gap:.5rem; padding:.64rem 1rem; border-radius:999px; font-size:1rem; background: color-mix(in oklab, var(--second-bg-color), var(--main-color) 10%); border:1px solid color-mix(in oklab, var(--main-color), transparent 70%); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .about .about-copy.platinum .about-pills li i{ width:.55rem; height:.55rem; border-radius:50%; background: radial-gradient(circle at 30% 30%, var(--edge), transparent); box-shadow: 0 0 10px color-mix(in oklab, var(--main-color), transparent 50%); } .about .about-copy.platinum .about-pills li:hover{ transform: translateY(-2px); border-color: var(--edge); box-shadow: 0 8px 18px color-mix(in oklab, var(--main-color), transparent 55%); } /* GLASS cred panels: corner cut + micro grid + animated edge */ .about .about-copy.platinum .about-creds{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:.2rem; } @media (max-width:900px){ .about .about-copy.platinum .about-creds{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .about .about-copy.platinum .about-creds{ grid-template-columns:1fr; } } .about .about-copy.platinum .cred{ position:relative; overflow:hidden; padding:1.25rem 1.2rem 1.5rem; background: linear-gradient(180deg, var(--glass), var(--second-bg-color)); border-radius:20px; border:1px solid color-mix(in oklab, var(--main-color), transparent 58%); box-shadow: 0 18px 60px rgba(0,0,0,.28); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; } .about .about-copy.platinum .cred .cut{ position:absolute; top:0; right:0; width:120px; height:120px; background: radial-gradient(60px 60px at 70% 30%, color-mix(in oklab, var(--main-color), #0ff 20%), transparent 60%); border-bottom-left-radius: 120px; opacity:.55; pointer-events:none; } .about .about-copy.platinum .cred .grid{ position:absolute; inset:0; pointer-events:none; opacity:.12; background-image: linear-gradient(transparent 31px, rgba(255,255,255,.4) 32px, transparent 33px), linear-gradient(90deg, transparent 31px, rgba(255,255,255,.4) 32px, transparent 33px); background-size: 32px 32px; } .about .about-copy.platinum .cred::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background: conic-gradient(from 0deg, color-mix(in oklab, var(--main-color), #0ff 18%), var(--accent), transparent 40% 60%, color-mix(in oklab, var(--main-color), #0ff 22%)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.45; animation: ringSlow 22s linear infinite; pointer-events:none; } @keyframes ringSlow{ to{ transform:rotate(1turn) } } .about .about-copy.platinum .cred h3{ margin:0 0 .1rem 0; font-weight:800; font-size:1.18rem; letter-spacing:.01em; } .about .about-copy.platinum .cred p{ margin:.25rem 0 0; opacity:.82; font-size:.95rem; } /* hover lift */ .about .about-copy.platinum .cred:hover{ transform: translateY(-4px); border-color: var(--edge); box-shadow: 0 24px 80px rgba(0,0,0,.34), 0 0 120px color-mix(in oklab, var(--main-color), transparent 55%); } /* Quote */ .about .about-copy.platinum .about-quote{ margin:.4rem 0 0; font-style:italic; opacity:.92; letter-spacing:.01em; font-size:1.08rem; } /* reveal */ .about .about-copy.platinum > *{ opacity:0; transform:translateY(14px); transition: opacity .66s ease, transform .66s ease; } .about .about-copy.platinum > *.in{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .about .about-copy.platinum > *{ opacity:1; transform:none; transition:none; } .about .about-copy.platinum .about-hd::after, .about .about-copy.platinum .sparkle, .about .about-copy.platinum .cred::before{ animation:none !important; } } /* ========================================= ABOUT — Mobile Smooth Refinement (scoped) Applies ONLY inside: section.about … ========================================= */ /* Keep background nodes behind About content */ section.about { position: relative; isolation: isolate; } section.about .about-copy, section.about .about-image { position: relative; z-index: 1; } /* ===== Phones ≤ 600px ===== */ @media (max-width: 600px){ /* Rhythm & spacing */ section.about .about-copy, section.about .about-copy.grand, section.about .about-copy.platinum { gap: 1rem; } /* Headline: readable & light on GPU */ section.about .about-copy .about-hd{ font-size: clamp(2rem, 7vw, 2.8rem); letter-spacing: -0.015em; padding-bottom: .45rem; margin-bottom: .35rem; } section.about .about-copy .about-hd::after{ width: 56%; height: 3px; box-shadow: none; /* cheaper to render on mobile */ } section.about .about-copy .sparkle{ width: 8px; height: 8px; bottom: -1px; filter: drop-shadow(0 0 8px color-mix(in oklab, var(--main-color), #0ff 22%)); } /* Lead paragraph */ section.about .about-copy .lead{ font-size: 1.02rem; line-height: 1.85; } section.about .about-copy .lead.drop::first-letter{ font-size: 3.2em; margin-right: .18em; text-shadow: none; } /* Inline highlights */ section.about .about-copy mark.spark{ padding: .05em .12em; } /* Region chips */ section.about .about-copy .about-pills{ gap: .5rem; } section.about .about-copy .about-pills li{ font-size: .95rem; padding: .52rem .82rem; border-radius: 999px; } /* Cred cards: stack + lighter effects */ section.about .about-copy .about-creds{ grid-template-columns: 1fr !important; gap: .8rem; } section.about .about-copy .cred{ padding: 1rem .9rem 1.1rem; border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.26); } section.about .about-copy .cred .cut{ opacity: .4; width: 90px; height: 90px; } section.about .about-copy .cred .grid{ opacity: .1; } /* Quote */ section.about .about-copy .about-quote{ font-size: .98rem; opacity: .9; } /* Image in this section */ section.about .about-image img, section.about .about-portrait, section.about .ultra-card, section.about .about-portrait.luxe{ max-width: 100%; height: auto; } } /* ===== Very small devices ≤ 360px ===== */ @media (max-width: 360px){ section.about .about-copy .about-hd{ font-size: clamp(1.8rem, 8vw, 2.4rem); } section.about .about-copy .lead{ font-size: .98rem; line-height: 1.8; } section.about .about-copy .about-pills li{ font-size: .9rem; padding: .46rem .72rem; } } /* ===== Touch devices: reduce blur cost (battery/GPU) ===== */ @media (hover: none) and (pointer: coarse){ section.about .about-copy .cred{ backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } section.about .about-copy .about-hd::after{ box-shadow: none; } } /* ===== Fallback when blur isn’t supported ===== */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ section.about .about-copy .cred{ background: linear-gradient(180deg, color-mix(in oklab, var(--second-bg-color), var(--main-color) 8%), var(--second-bg-color)); } } /* ===== Respect reduced motion (only this section) ===== */ @media (prefers-reduced-motion: reduce){ section.about .about-copy > *, section.about .about-copy .about-hd::after, section.about .about-copy .sparkle, section.about .about-copy .cred::before{ animation: none !important; transition: none !important; } section.about .about-copy > *{ opacity: 1; transform: none; } } /* =============================== Prestige Ribbon — About (deluxe) =============================== */ .about .about-ribbon.deluxe{ --rb-h: 48px; --rb-gap: 28px; --rb-speed: 22s; /* slower = more premium */ --rb-dot: color-mix(in oklab, var(--main-color), #0ff 25%); --rb-edge: color-mix(in oklab, var(--main-color), transparent 60%); position: relative; height: var(--rb-h); border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, color-mix(in oklab, var(--second-bg-color), var(--main-color) 8%), var(--second-bg-color)); border: 1px solid color-mix(in oklab, var(--main-color), transparent 65%); box-shadow: 0 14px 40px rgba(0,0,0,.22), 0 0 50px var(--rb-edge); display: grid; align-items: center; } .about .about-ribbon.deluxe .ribbon-track{ display: inline-flex; gap: var(--rb-gap); align-items: center; white-space: nowrap; list-style: none; padding: 0 24px; margin: 0; animation: ribbonSlide var(--rb-speed) linear infinite; will-change: transform; } .about .about-ribbon.deluxe .ribbon-track li{ display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .01em; opacity: .95; } .about .about-ribbon.deluxe .ribbon-track li i{ width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--rb-dot), transparent 55%); box-shadow: 0 0 10px var(--rb-dot), 0 0 26px color-mix(in oklab, var(--main-color), transparent 60%); flex: 0 0 auto; } /* Edge fades (luxury mask) */ .about .about-ribbon.deluxe .fade{ position: absolute; top: 0; bottom: 0; width: 64px; pointer-events: none; } .about .about-ribbon.deluxe .fade.left{ left: 0; background: linear-gradient(90deg, var(--second-bg-color), transparent); } .about .about-ribbon.deluxe .fade.right{ right: 0; background: linear-gradient(270deg, var(--second-bg-color), transparent); } /* Pause on hover/focus for accessibility */ .about .about-ribbon.deluxe:hover .ribbon-track, .about .about-ribbon.deluxe:focus-within .ribbon-track{ animation-play-state: paused; } /* Smooth on phones */ @media (max-width: 600px){ .about .about-ribbon.deluxe{ --rb-h: 44px; --rb-gap: 22px; } .about .about-ribbon.deluxe .fade{ width: 44px; } } /* Motion-safe */ @media (prefers-reduced-motion: reduce){ .about .about-ribbon.deluxe .ribbon-track{ animation: none; } } /* Keyframes */ @keyframes ribbonSlide{ to { transform: translateX(-50%); } /* continuous loop with cloned content */ } /* =================================================================== EXPERIENCE (Services) — refined & performant (same visuals) =================================================================== */ .services h2{ margin-bottom: var(--space-5); } /* Defer heavy layout/paint until near view (section-level) */ .services{ content-visibility: auto; contain-intrinsic-size: 1800px; } /* Responsive, comfy grid — create ONE 3D context for all cards */ .services-container{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: var(--space-3); align-items: stretch; /* perf isolation */ contain: layout paint; /* cheaper 3D tilt (cards inherit this) */ perspective: 1400px; } /* Glass cards */ .services-box{ position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: 2.2rem 2rem 2.6rem; border-radius: 20px; /* keep work local + stable */ contain: layout paint style; backface-visibility: hidden; transform-style: preserve-3d; /* render in the container’s 3D space */ background: linear-gradient(180deg, color-mix(in oklab, var(--second-bg-color), transparent 6%), color-mix(in oklab, var(--second-bg-color), transparent 0%)); border: 1px solid color-mix(in oklab, var(--text-color), transparent 86%); box-shadow: 0 14px 40px rgba(0,0,0,.28); /* keep transitions you had; add transform-gpu safety */ transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; overflow: hidden; } /* Only hint GPU while interacting (prevents first-hover jank) */ .services-box.tilting, .services-box:is(:hover, :focus-visible){ will-change: transform; } /* Elevation hover (unchanged look) */ @media (hover: hover){ .services-box:hover{ transform: translateY(-4px) translateZ(0); border-color: color-mix(in oklab, var(--main-color), transparent 40%); box-shadow: 0 22px 52px rgba(0,0,0,.36); } } /* Keep keyboard focus clear without heavy repaints */ .services-box:focus-within{ outline: 2px solid color-mix(in oklab, var(--main-color), transparent 30%); outline-offset: 2px; } /* Media/image */ .services-box img{ width: 100%; aspect-ratio: 16 / 9; /* reserves space = no CLS */ object-fit: contain; background: color-mix(in oklab, var(--bg-color), #000 10%); border-radius: 12px; display: block; } /* Titles & copy */ .services-box h3{ font-size: var(--fs-h3); margin: 0; color: var(--text-color); } /* theme-aware paragraph & meta */ .services-box p{ font-size: 1.6rem; margin: .6rem 0 1.2rem; color: color-mix(in oklab, var(--text-color), #000 15%); } .services-box span{ font-size: 1.4rem; color: color-mix(in oklab, var(--text-color), #000 28%); } body.light-mode .services-box p { color:#273449; } /* slate-800-ish */ body.light-mode .services-box span{ color:#3a4a66; } /* slate-700-ish */ /* CTA alignment */ .services-box .btn{ margin-top: auto; align-self: flex-start; } /* Compact tweaks */ @media (max-width: 480px){ .services-box{ padding: 1.6rem 1.4rem; } } /* ---------- Optional: Fancy period badge (top-right) ---------- */ /* Requires markup:

*/ .period-badge{ position:absolute; top:14px; right:14px; display:inline-flex; align-items:center; gap:.55rem; padding:.45rem .75rem; border-radius:999px; font-size:1.25rem; font-weight:700; line-height:1; color:var(--text-color); background: color-mix(in oklab, var(--second-bg-color), transparent 20%); border:1px solid color-mix(in oklab, var(--text-color), transparent 82%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 20px rgba(0,0,0,.22), 0 0 20px color-mix(in oklab, var(--accent), transparent 75%) inset; } .period-badge i{ font-size:1.35rem; opacity:.9; } .period-badge .sep{ opacity:.7; } /* pulsing dot for “Present” */ .period-badge .live-dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); box-shadow:0 0 8px var(--accent); position:relative; } .period-badge .live-dot::after{ content:""; position:absolute; inset:-6px; border-radius:999px; border:2px solid color-mix(in oklab, var(--accent), transparent 35%); animation:badge-ping 1.6s ease-out infinite; } @keyframes badge-ping{ 0%{ transform:scale(.6); opacity:.9; } 70%{ transform:scale(1.6); opacity:0; } 100%{ transform:scale(1.8); opacity:0; } } body.light-mode .period-badge{ background:#ffffffcc; border-color:var(--border, #e5e7eb); color:var(--text-color); box-shadow:0 10px 22px rgba(16,24,40,.08), 0 0 16px color-mix(in oklab, var(--accent), transparent 70%) inset; } /* ---------- Meta row (location + optional extras) ---------- */ .services-box .meta-line{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin:.9rem 0 .2rem; } /* Location pill */ .location-pill{ display:inline-flex; align-items:center; gap:.55rem; padding:.42rem .85rem; border-radius:999px; font-size:1.25rem; font-weight:700; letter-spacing:.01em; color: color-mix(in oklab, var(--accent), #0b1220 40%); background: color-mix(in oklab, var(--accent), transparent 86%); border:1px solid color-mix(in oklab, var(--accent), transparent 55%); box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), 0 0 18px color-mix(in oklab, var(--accent), transparent 78%); } .location-pill i{ font-size:1.35rem; opacity:.95; line-height:1; } /* Light-mode tune for readability */ body.light-mode .location-pill{ color:#065f46; /* teal-800 vibe */ background:#e6fbf4; /* soft mint */ border-color:#b7f2df; box-shadow: inset 0 -1px 0 rgba(16,24,40,.06), 0 0 14px rgba(16,185,129,.18); } /* Title spacing with meta-line present */ .services-box h3{ margin-top:.2rem; } /* ---------- (already provided) Period badge polish works as-is ---------- */ /* If you pasted my earlier .period-badge styles, they’ll match perfectly. */ /* ---------- Optional: Skill chips (auto or manual) ---------- */ /* If you turn “Skills: A · B · C” into chips (via JS), they’ll look like this. */ .skill-chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.4rem; } .skill-chips .chip{ font-size:1.2rem; font-weight:700; letter-spacing:.02em; padding:.35rem .7rem; border-radius:999px; color: color-mix(in oklab, var(--text-color), #000 12%); background: color-mix(in oklab, var(--text-color), transparent 88%); border:1px solid color-mix(in oklab, var(--text-color), transparent 80%); box-shadow: inset 0 -1px 0 rgba(0,0,0,.06); } body.light-mode .skill-chips .chip{ color:#0b1220; background:#eef2f7; border-color:#e5e7eb; } /* ===================== Education ===================== */ .education-container{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--space-3); align-items:stretch; } .edu-card{ position:relative; display:flex; flex-direction:column; gap:var(--space-2); padding:2.2rem 2rem 2.6rem; border-radius:20px; background: linear-gradient(180deg, color-mix(in oklab,var(--second-bg-color), transparent 6%), color-mix(in oklab,var(--second-bg-color), transparent 0%)); border:1px solid color-mix(in oklab, var(--text-color), transparent 86%); box-shadow:0 14px 40px rgba(0,0,0,.28); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; overflow:hidden; } .edu-card:hover{ transform:translateY(-4px); border-color:color-mix(in oklab,var(--main-color), transparent 40%); box-shadow:0 22px 52px rgba(0,0,0,.36); } .edu-card:focus-within{ outline:2px solid color-mix(in oklab, var(--main-color), transparent 30%); outline-offset:2px; } .edu-logo{ width:100%; max-width:360px; aspect-ratio:16/6; object-fit:contain; background: color-mix(in oklab, var(--bg-color), #000 10%); border-radius:12px; } /* Reuse your meta-line & location-pill from experience */ .education .meta-line{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin:.2rem 0 .2rem; } /* ===================== University Name ===================== */ .uni-name{ --ink: color-mix(in oklab, var(--text-color), black 12%); margin:.65rem 0 .35rem; display:inline-flex; align-items:flex-end; gap:.6rem; flex-wrap:wrap; position:relative; color:var(--ink); font-weight:900; font-size:clamp(1.15rem, 1.05rem + 0.8vw, 1.6rem); line-height:1.15; letter-spacing:.005em; text-wrap:balance; /* balanced multi-line title */ -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; hyphens:auto; /* tiny lift for dark backgrounds without looking glowy */ text-shadow: 0 1px 0 rgba(0,0,0,.25); } /* underline accent that animates from the left */ .uni-name::after{ content:""; position:absolute; left:0; bottom:-8px; height:3px; width:100%; border-radius:999px; background:linear-gradient(90deg, color-mix(in oklab, var(--brand, var(--main-color)), white 8%), var(--brand, var(--main-color))); transform:scaleX(.35); transform-origin:left; transition:transform .35s ease; box-shadow:0 4px 12px color-mix(in oklab, var(--brand, var(--main-color)), transparent 72%); } .edu-card:hover .uni-name::after{ transform:scaleX(1); } /* Full name span: ensure clean breaks and strong readability */ .uni-name .uni-long{ display:inline; word-break:normal; } /* Compact brand tag (acronym) */ .uni-tag{ font-size:.78em; font-weight:800; line-height:1; padding:.28em .6em; border-radius:999px; color: color-mix(in oklab, var(--brand, var(--main-color)), #fff 90%); background: color-mix(in oklab, var(--brand, var(--main-color)), #000 0%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px color-mix(in oklab, var(--brand, var(--main-color)), transparent 72%); } /* Light mode refinements */ body.light-mode .uni-name{ --ink: color-mix(in oklab, var(--text-color), black 6%); text-shadow:none; } body.light-mode .uni-name::after{ box-shadow:0 3px 10px color-mix(in oklab, var(--brand, var(--main-color)), transparent 65%); } /* If you want even more clarity on very small screens */ @media (max-width:420px){ .uni-name{ font-weight:800; letter-spacing:.003em; } .uni-tag{ display:none; } /* keep it ultra-clean on tiny widths */ } /* ===================== GPA ring badge ===================== */ /* JS sets --gpa-p (0..1). Fallback at 0.85 */ .gpa-badge{ --gpa-p:.85; position:relative; width:56px; height:56px; border-radius:50%; background: conic-gradient(var(--accent) calc(var(--gpa-p)*360deg), color-mix(in oklab, var(--text-color), transparent 90%) 0); display:grid; place-items:center; box-shadow:0 0 0 3px color-mix(in oklab, var(--text-color), transparent 82%) inset, 0 8px 16px rgba(0,0,0,.20); } .gpa-badge::before{ content:""; position:absolute; inset:6px; border-radius:50%; background: color-mix(in oklab, var(--second-bg-color), transparent 10%); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); } .gpa-badge .gpa-inner{ position:relative; z-index:1; font-weight:800; font-size:1.35rem; line-height:1; color:var(--text-color); } /* Light-mode polish */ body.light-mode .edu-card{ background:#fff; border-color:var(--border); box-shadow:0 10px 26px rgba(16,24,40,.08); } body.light-mode .gpa-badge{ box-shadow:0 0 0 3px #eef2f7 inset, 0 8px 16px rgba(16,24,40,.08); } /* ===== Honours (First Class) pill ===== */ .honours-pill{ display:inline-flex; align-items:center; gap:.55rem; padding:.42rem .9rem; border-radius:999px; font-size:1.25rem; font-weight:800; letter-spacing:.01em; color:#3a2a00; /* readable on gold */ background: linear-gradient(135deg,#ffe799 0%, #ffd166 35%, #f4b400 70%, #f39c12 100%); border:1px solid rgba(216, 158, 29, .6); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.08), 0 6px 14px rgba(243, 156, 18, .25); position:relative; } /* subtle moving shine */ .honours-pill::after{ content:""; position:absolute; inset:0; border-radius:999px; background: linear-gradient(120deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.0) 60%); transform: translateX(-120%); animation: honour-shine 3.6s ease-in-out infinite; pointer-events:none; } @keyframes honour-shine{ 0%, 30% { transform: translateX(-120%); } 55% { transform: translateX(120%); } 100% { transform: translateX(120%); } } .honours-pill i{ font-size:1.35rem; line-height:1; filter: drop-shadow(0 0 6px rgba(255,215,0,.35)); } /* Light/Dark polish */ body.light-mode .honours-pill{ color:#3a2a00; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(0,0,0,.06), 0 6px 14px rgba(243, 156, 18, .22); } /* Ensure meta items sit nicely together */ .education .meta-line, .edu-card .meta-line{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; } /* =================================================================== PORTFOLIO GRID + OVERLAYS =================================================================== */ .portfolio h2 { margin-bottom: var(--space-4); } .portfolio-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; perspective: 1400px; } @media (max-width: 992px) { .portfolio-container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .portfolio-container { grid-template-columns: 1fr; } } .portfolio-box { position: relative; overflow: hidden; border-radius: 2rem; box-shadow: 0 0 1rem var(--bg-color); background: #0b1330; transform-style: preserve-3d; backface-visibility: hidden;} .portfolio-box img { width: 100%; display: block; transition: transform .5s ease; } .portfolio-box:hover img { transform: scale(1.08); } .portfolio-layer { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 2.4rem; text-align: center; background: linear-gradient(rgba(0,0,0,.2), color-mix(in oklab, var(--main-color), black 10%)); transform: translateY(100%); transition: transform .5s ease; color: #fff; } .portfolio-box:hover .portfolio-layer { transform: translateY(0); } .portfolio-layer h4 { font-size: 2.2rem; margin-bottom: .8rem; text-shadow: 1px 1px 4px rgba(0,0,0,.5); } .portfolio-layer p { font-size: 1.4rem; line-height: 1.6; max-height: 10rem; overflow-y: auto; margin: .3rem 0 1.2rem; } .portfolio-layer a { width: 5rem; height: 5rem; border-radius: 50%; background: var(--text-color); display: inline-flex; align-items: center; justify-content: center; transition: transform .3s ease, background .3s ease; } .portfolio-layer a:hover { transform: scale(1.08); background: var(--main-color); } .portfolio-layer a i { font-size: 2rem; color: var(--second-bg-color); } /* Publication icon links */ .pub-links { display: flex; justify-content: center; align-items: center; gap: 1.2rem; margin-top: 1.2rem; flex-wrap: wrap; } .pub-links a { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--text-color); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease, background .2s ease; } .pub-links a:hover { transform: translateY(-2px); background: var(--main-color); } .pub-links a i { font-size: 1.9rem; color: var(--second-bg-color); } /* =================================================================== TERMINAL / RECOMMENDATIONS / CONTACT =================================================================== */ .terminal-window { background: #111; border-radius: 15px; padding: 30px; color: var(--accent); box-shadow: var(--shadow-glow); width: min(100%, 1000px); margin: 0 auto; } .terminal-header { background: linear-gradient(to right, #0f0f0f, #1a1a1a); color: var(--accent); border-bottom: 2px solid var(--accent); border-radius: 10px 10px 0 0; padding: 1rem 1.5rem; font-size: 1.8rem; display: flex; align-items: center; gap: 10px; text-shadow: 0 0 5px var(--accent); } .terminal-body { text-align: left; line-height: 2.4rem; padding-top: 1rem; } .terminal-body .prompt { font-size: 1.6rem; font-weight: 800; color: #00ff00; } .terminal-body .output { font-size: 1.6rem; font-weight: 600; color: #aaffaa; } /* Recommendations (testimonial) */ .section-title { font-family: 'Playfair Display', serif; font-size: clamp(2.8rem, 2rem + 2vw, 4rem); margin-bottom: var(--space-4); } .testimonial-card { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.3rem); line-height: 1.8; max-width: 1300px; min-height: 420px; margin: 0 auto; padding: 4rem 5rem; border-radius: 30px; background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); color: #f5f7ff; backdrop-filter: blur(25px); box-shadow: 0 0 80px rgba(255,255,255,.2); display: flex; flex-direction: column; justify-content: space-between; position: relative; } .testimonial-card::before { content: "“"; position: absolute; top: 20px; left: 40px; font-size: 5rem; color: rgba(255,255,255,.2); font-family: Georgia, serif; } .testimonial-card .author { text-align: right; font-size: 1.6rem; font-weight: 600; opacity: .9; } body.light-mode .testimonial-card { color: #1f2937; background: linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.02)); box-shadow: 0 8px 40px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.06); } body.light-mode .testimonial-card::before { color: rgba(0,0,0,.18); } /* Contact */ .contact-section { position: relative; z-index: 1; color: var(--text-color); padding: 6rem var(--container-x); } .contact-container { max-width: 1200px; margin: 0 auto; text-align: center; } .contact-subtitle { font-size: var(--fs-small); opacity: .85; margin-bottom: var(--space-3); } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; margin-top: 40px; } .contact-form, .tidycal-widget, .calendly-box { background: rgba(0,0,0,.6); padding: 25px; border-radius: 12px; box-shadow: var(--shadow-glow); } .contact-form input, .contact-form textarea { width: 100%; padding: 12px; margin-bottom: 14px; border: none; border-radius: 8px; font-size: 1.5rem; background: #0d0d0d; color: #fff; } .btn-submit { background: var(--accent); color: #000; padding: 12px 24px; font-size: 1.5rem; border: none; border-radius: 8px; cursor: pointer; transition: background .2s ease; } .btn-submit:hover { background: #00cc77; } /* =================================================================== BACKGROUND LAYERS — CONSOLIDATED (back → front) + SAFEGUARDS =================================================================== */ /* 0) Particles (furthest back) */ #particles-js, #particles-js-contact, #particles-js-terminal, #particles-js-recommendations{ position: fixed; inset: 0; z-index: 0; pointer-events: none; /* never block clicks */ } /* 1) Aurora background blobs (soft color base) */ .aurora-bg{ position: fixed; inset: 0; z-index: 1; pointer-events: none; /* your original palette + motion */ background: radial-gradient(circle at 20% 20%, #00ffe7, transparent 60%), radial-gradient(circle at 80% 40%, #7f00ff, transparent 60%), radial-gradient(circle at 50% 80%, #ff007f, transparent 60%); filter: blur(60px); opacity: .30; animation: moveAurora 15s ease-in-out infinite; } /* 2) Optional vignette/gradient overlay (keep empty if you set it elsewhere) */ .gradient-overlay{ position: fixed; inset: 0; z-index: 2; pointer-events: none; /* You can add a gentle vignette if desired: background: radial-gradient(120% 80% at 50% 20%, transparent 60%, rgba(0,0,0,.15)); */ } /* 3) Premium aurora sheen (blends on top of 0–2, still under content) */ .aurora{ position: fixed; inset: -20% -20% -20% -20%; /* bleed for blur edges */ z-index: 3; pointer-events: none; background: radial-gradient(40% 35% at 20% 10%, #49ffd8 0%, transparent 60%), radial-gradient(35% 30% at 80% 30%, #8a7dff 0%, transparent 60%), radial-gradient(45% 40% at 30% 80%, #ff7dff 0%, transparent 65%), radial-gradient(30% 25% at 75% 75%, #00e3ff 0%, transparent 60%); filter: blur(40px) saturate(110%); opacity: .18; mix-blend-mode: screen; animation: auroraMove 18s linear infinite alternate; } /* Keep content above backgrounds WITHOUT breaking the fixed header */ main, section, footer, .navbar{ position: relative; z-index: 10; } /* The header must stay fixed and on top */ .header{ position: fixed; /* keep it fixed */ z-index: 1000; /* above all background layers */ } /* Ensure progress bar sits above the ambient glow inside header */ .header::before{ z-index: 1; } /* glow underlay */ #nav-progress{ z-index: 2; } /* thin progress line on top */ /* Light-mode softening so text stays crisp */ body.light-mode #particles-js, body.light-mode #particles-js-contact, body.light-mode #particles-js-terminal, body.light-mode #particles-js-recommendations{ opacity: .28; } body.light-mode .aurora-bg{ opacity: .18; filter: blur(52px) saturate(.9); } /* Keep Bootstrap carousel arrows clickable */ .carousel .carousel-control-prev, .carousel .carousel-control-next{ z-index: 20; } /* Portfolio hover interactivity (unchanged) */ .portfolio-layer{ pointer-events: none; transform: translateY(100%); } .portfolio-box:hover .portfolio-layer, .portfolio-box:focus-within .portfolio-layer{ transform: translateY(0); pointer-events: auto; } /* -------- Animations (kept from your file) -------- */ @keyframes moveAurora{ 0% { background-position: 0% 0%, 100% 100%, 50% 50%; } 50% { background-position: 50% 50%, 0% 100%, 100% 0%; } 100% { background-position: 0% 0%, 100% 100%, 50% 50%; } } @keyframes auroraMove{ 0% { transform: translate3d(-2%, -2%, 0) rotate(.6deg); } 100% { transform: translate3d( 2%, 2%, 0) rotate(-.6deg); } } /* =================================================================== FOOTER =================================================================== */ .footer { padding: 2rem var(--container-x); background: var(--second-bg-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .footer-text p { font-size: 1.6rem; margin: 0; } .footer-iconTop a { display:inline-flex; justify-content:center; align-items:center; padding:.8rem; background: var(--main-color); border-radius:.8rem; text-decoration: none; } .footer-iconTop a:hover { box-shadow: 0 0 1rem var(--main-color); } .footer-iconTop a i { font-size: 2.4rem; color: var(--second-bg-color); } /* === Scroll reveal === */ .reveal { opacity: 0; transform: translateY(14px) scale(.995); transition: opacity .42s ease, transform .42s ease; will-change: transform, opacity; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* === 3D tilt (refined) ============================================= */ .tilt{ perspective: 1400px; transform-style: preserve-3d; transition: transform .15s ease, box-shadow .2s ease; will-change: transform; backface-visibility: hidden; } .tilt:hover{ box-shadow: 0 14px 40px rgba(0,0,0,.22); } /* Only elements you explicitly mark as .tilt-lift will come forward */ .tilt .tilt-lift{ transform: translateZ(10px); transition: transform .2s ease; } .tilt:hover .tilt-lift{ transform: translateZ(16px); } /* Never lift images — prevents logo/cover art from covering badges */ .tilt img, .tilt .tilt-lift img{ transform: none !important; } /* Make sure date/badge/ribbon stays above any lifted content */ .period, .date-badge, .ribbon{ position: relative; z-index: 3; } /* Smoother rendering on some GPUs */ .tilt *, .tilt::before, .tilt::after{ backface-visibility: hidden; } /* Motion preferences & mobile: keep it calm */ @media (prefers-reduced-motion: reduce){ .tilt, .tilt .tilt-lift{ transition: none !important; transform: none !important; box-shadow: none !important; } } @media (max-width: 900px){ .tilt{ transform: none !important; box-shadow: none !important; } }