/* Google Font is now loaded from home.html via a preloaded, non-blocking instead of @import — @import forces the browser to fetch styles.css, parse it, discover the import, then fetch the font CSS: a fully sequential chain that delayed first paint. Loading it from lets it start in parallel. */ :root { /* Fluid type scale — clamp(min, preferred, max). Preferred uses vw so size interpolates smoothly between the min/max instead of jumping at breakpoints. Scale widened slightly (h1/h2 especially) for a stronger premium hierarchy — bigger contrast between display type and body copy reads as more considered, less "default browser heading" sizing. */ --fs-body: clamp(0.9375rem, 0.895rem + 0.2vw, 1.0625rem); /* ~15px -> 17px */ --fs-small: clamp(0.8125rem, 0.79rem + 0.15vw, 0.9375rem); /* ~13px -> 15px */ --fs-eyebrow: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* ~12px -> 13px */ --fs-h1: clamp(2.25rem, 1.4rem + 4.1vw, 3.75rem); /* ~36px -> 60px */ --fs-h2: clamp(1.875rem, 1.35rem + 2.5vw, 2.75rem); /* ~30px -> 44px */ --fs-h3: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem); /* ~18px -> 22px */ --fs-h4: clamp(1rem, 0.93rem + 0.35vw, 1.1rem); /* ~16px -> 17.6px */ /* Fluid section spacing */ --space-section-y: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); --space-card-pad: clamp(1.375rem, 1.1rem + 1.4vw, 2.25rem); --container-pad-x: clamp(1rem, 0.7rem + 1.6vw, 2rem); /* ---- Premium refinement pass: shared motion / elevation / radius tokens ---- Centralizing these means every card, button and panel across the site pulls from the same physical "material" instead of each section inventing its own shadow depth or corner radius — that consistency is most of what separates an agency-polish site from a merely good one. */ --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --surface-glass: rgba(255, 255, 255, 0.035); --surface-glass-hover: rgba(255, 255, 255, 0.06); --border-glass: rgba(255, 255, 255, 0.09); --border-glass-hover: rgba(254, 215, 0, 0.35); --shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.4); --shadow-md: 0 16px 40px -16px rgba(0, 0, 0, 0.55); --shadow-lg: 0 28px 70px -24px rgba(0, 0, 0, 0.6); --shadow-accent: 0 18px 44px -18px rgba(254, 215, 0, 0.22); /* ---- Navbar clearance (global fix) ---- 96px is a safe fallback matching the desktop floating navbar's resting height, used only for the instant before script.js measures the real rendered height on DOMContentLoaded (and as a no-JS safety net). script.js overwrites --navbar-height with the *actual* measured height of the fixed navbar, and sets it to 0px on breakpoints where the navbar is position:relative (in normal flow) and already pushes content down on its own — see the 1050px breakpoint below. The +24px in --navbar-clearance is deliberate breathing room so headings don't just barely clear the bar but sit comfortably below it. */ --navbar-height: 96px; --navbar-clearance: calc(var(--navbar-height) + 24px); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Offsets in-page anchor jumps so content isn't hidden under the sticky header. Tied to --navbar-clearance (rather than a hardcoded value) so it always matches the navbar's real height instead of drifting out of sync with it. */ scroll-padding-top: var(--navbar-clearance); /* FIX: body already had overflow-x: hidden, but the document's actual scrollable viewport is governed by , not . Without this, some mobile browsers still allow horizontal scroll/gap when a descendant overflows (see .FirstElement::before fix above), because body's overflow-x doesn't reliably propagate to the viewport on every engine. Setting it on both is the safe, standard fix. */ overflow-x: hidden; } a { text-decoration: none; color: #fff; transition: color 0.3s ease, transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } ul { list-style: none; } img { max-width: 100%; display: block; } body { font-family: 'Lexend', sans-serif; font-size: var(--fs-body); line-height: 1.65; letter-spacing: 0.1px; background-color: #202020; overflow-x: hidden; } /* Headings get their own tighter rhythm — body copy needs generous line-height for readability, but multi-line headings look loose and amateurish at the same 1.65 value, so they're pulled back down here globally. */ h1, h2, h3, h4, h5, h6 { line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; } button { font-family: inherit; } /* ------------------- Accessibility utilities ------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 10px; left: 10px; background: #fed700; color: #202020; padding: 10px 18px; border-radius: 8px; font-weight: 600; z-index: 10001; transform: translateY(-70px); transition: transform 0.3s ease; } .skip-link:focus { transform: translateY(0); } /* Visible, consistent focus ring for keyboard users across the whole site */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #fed700; outline-offset: 3px; border-radius: 4px; } /* Pause the page's infinite/continuous animations (photo float, cert-line shimmer) whenever the tab isn't visible — toggled by script.js via the Page Visibility API. Saves battery/GPU on a background tab for no visible benefit, since nobody is watching it animate. */ body.tab-hidden * { animation-play-state: paused !important; } /* Respect users who prefer less motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Scroll-reveal (replaces the old ScrollReveal dependency) Note: will-change is intentionally NOT set permanently here — that would force the browser to keep a composited layer alive for every reveal section for the entire page lifetime, wasting GPU memory. script.js instead toggles will-change on briefly, right before each element animates, and removes it once the transition finishes. */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.in-view { opacity: 1; transform: translateY(0); } .container { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 var(--container-pad-x); } /* Thin top scroll-progress bar (Vercel/Linear-style), GPU-accelerated via transform */ .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 10001; background: linear-gradient(90deg, #fed700, #fff3b0); transform: scaleX(0); transform-origin: 0 0; will-change: transform; pointer-events: none; } /*---------------------------Header---------------------------*/ /* Floating glass navbar (Phase 1). The bar is fixed and "docked" with breathing room from the very first paint — not just once you scroll — so it always reads as an object floating above the page rather than a plain top strip. .header-area only controls the docking offset + z-index; .header is the actual glass surface, so the two responsibilities (position vs. material) don't fight each other in the same ruleset. */ .header-area { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; padding: 14px 0 0; transition: padding 0.4s var(--ease-premium); } .header-area.sticky { padding: 8px 0 0; } .header { display: flex; justify-content: space-between; align-items: center; gap: 14px; max-width: 1180px; margin: 0 auto; padding: 7px 16px 7px 18px; border-radius: var(--radius-lg); background: rgba(28, 28, 28, 0.55); border: 1px solid var(--border-glass); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 50px -24px rgba(0, 0, 0, 0.65); transition: padding 0.4s var(--ease-premium), background-color 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium); } /* Shrink + firm up on scroll: less padding, slightly denser glass, deeper shadow — the classic "navbar just got more serious" scroll effect. */ .header-area.sticky .header { padding: 6px 14px 6px 16px; background: rgba(20, 20, 20, 0.78); border-color: rgba(255, 255, 255, 0.11); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px -22px rgba(0, 0, 0, 0.7); } /* ================= Navbar clearance (global fix) ================= The navbar only floats as position:fixed on wider viewports — past the 1050px breakpoint further down it switches to position:relative and already occupies space in normal document flow, pushing content down on its own. So this extra clearance is scoped to the same range: it never adds unwanted whitespace on mobile/tablet, and the original mobile spacing/layout is left completely untouched. */ @media (min-width: 1051px) { /* Whichever section opens a page (i.e. is the first child inside
) sits directly beneath the fixed navbar with nothing in flow to push it down, so it needs guaranteed top clearance regardless of whatever padding its own section class already carries. This targets *position in the document*, not a specific class list, so it automatically keeps working for every current page (projects/certifications/contact) and any future page/section without needing a hand patch each time. .FirstElement (the home hero) already computes its own larger, intentional clearance above and is excluded so that unique hero spacing is preserved exactly as designed. */ main#main-content > section:first-child:not(.FirstElement) { padding-top: max(var(--space-section-y), var(--navbar-clearance)); } } /* Anchor-nav offset: every navigable section needs scroll-margin-top so a jump — from the navbar links, footer links, or a direct #hash URL — never lands with its heading tucked under the navbar. Safe to apply globally (including on mobile) since script.js resolves --navbar-height to 0px wherever the navbar is in-flow, collapsing this to just the small breathing-room constant there. */ section[id], #main-content { scroll-margin-top: var(--navbar-clearance); } /* Fallback for browsers without backdrop-filter support: keep it solid so text stays legible */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .header { background-color: #1c1c1c; } .header-area.sticky .header { background-color: #181818; } } /* Groups the theme toggle + hamburger together on the right edge of the bar. Without this wrapper the two controls were separate flex children of .header, so justify-content: space-between spread all three items (logo / menu icon / theme toggle) evenly — pushing the hamburger into the dead center of the bar on mobile instead of pairing it with the toggle on the right. Grouping them keeps the layout to a clean logo-left / controls-right pair at every width. */ .header-actions { display: flex; align-items: center; gap: 10px; } /* Desktop only: a slim hairline (reusing the bar's own border color/token, no new color introduced) precedes the toggle so it reads as its own zone instead of trailing off the last nav link. Scoped to the width where the full nav sits inline next to it — on mobile the nav collapses into a dropdown and .header-actions sits directly beside the logo, where this divider would read as a stray line rather than a separator. */ @media (min-width: 1051px) { .header-actions { padding-left: 14px; margin-left: 4px; border-left: 1px solid var(--border-glass); } } .logo { display: flex; align-items: center; gap: 6px; text-transform: uppercase; font-size: 17px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: 0.2px; transition: transform 0.3s var(--ease-out-soft); } .logo:hover { transform: translateY(-1px); } .logo-text { color: #fff; line-height: 1; display: inline-block; } .logo-icon { width: 0.72em; height: 0.72em; flex-shrink: 0; display: block; color: #fed700; /* The bolt glyph's own path sits slightly high inside its viewBox (it touches the top edge with almost no bottom margin), so centering the icon's bounding box with flexbox still reads as "too high" next to the text's cap-height. A small downward nudge corrects that optically. */ transform: translateY(1px); transition: transform 0.3s ease; } .logo:hover .logo-icon { transform: translateY(1px) scale(1.08) rotate(-4deg); } .header ul li:first-child { margin-right: auto; } .header ul { display: flex; align-items: center; } .header ul li { margin: 0 2px; } .header ul li a { text-transform: capitalize; display: block; position: relative; padding: 8px 15px; border-radius: var(--radius-pill); font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.82); transition: color 0.3s var(--ease-out-soft), background-color 0.3s var(--ease-out-soft); } /* Single, clean signal for hover/active — a soft pill fill only. The previous build layered a gold underline on top of the pill background, which read as two competing indicators for one state; dropping the underline keeps the same colors and interaction, just a tidier result. */ .header ul li a.active { color: #fff; background: rgba(254, 215, 0, 0.1); } .header ul li a:hover, .header ul li a:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.06); } /* Hamburger toggle button — three independent bars morph into an X. aria-expanded drives the animation (no extra JS classes needed). */ .header .menu_icon { position: relative; background: none; border: 0; cursor: pointer; display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 10px; transition: background 0.25s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); } .header .menu_icon:hover, .header .menu_icon:focus-visible { background: rgba(255, 255, 255, 0.07); transform: scale(1.06); } .header .menu_icon:active { transform: scale(0.94); } .menu_icon-bar { position: absolute; left: 10px; width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, background 0.25s ease; } .menu_icon-bar:nth-child(1) { top: 14px; } .menu_icon-bar:nth-child(2) { top: 20px; } .menu_icon-bar:nth-child(3) { top: 26px; } .header .menu_icon:hover .menu_icon-bar { background: #fed700; } /* Hamburger → X */ .header .menu_icon[aria-expanded="true"] .menu_icon-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .header .menu_icon[aria-expanded="true"] .menu_icon-bar:nth-child(2) { opacity: 0; transform: scaleX(0); } .header .menu_icon[aria-expanded="true"] .menu_icon-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /*---------------------------HomePage--------------------------*/ .FirstElement { /* The floating navbar is fixed from first paint now (Phase 1), so it no longer reserves space in normal document flow the way the old in-flow header did — this padding has to supply that clearance on its own (~110px for the bar itself) on top of the original breathing room. */ padding-top: clamp(7.5rem, 6.5rem + 4vw, 11rem); padding-bottom: clamp(2.5rem, 2.1rem + 1.8vw, 4rem); position: relative; overflow: hidden; } /* Cinematic ambient glow behind the hero — two soft, off-center radial washes (warm gold behind the copy, a cooler dim wash behind the photo) instead of a flat #202020 field. Subtle enough not to fight the content, but it's the difference between "dark background" and "atmosphere". Dark theme only; light theme already has its own equivalent treatment below. */ .FirstElement::before { content: ""; position: absolute; inset: -15% -10% auto -10%; height: 130%; background: radial-gradient(640px 420px at 18% 25%, rgba(254, 215, 0, 0.10), transparent 62%), radial-gradient(560px 440px at 88% 12%, rgba(255, 255, 255, 0.05), transparent 60%); pointer-events: none; z-index: 0; } [data-theme="light"] .FirstElement::before { display: none; } .FirstElement .container { position: relative; z-index: 1; } /* Previously the hero's flex layout lived directly on .FirstElement, which had no .container wrapper (every other section does) — so it stretched edge to edge on wide screens and space-around pushed the photo and text apart into large, uneven empty margins. Scoping the flex layout to .container brings the hero in line with the rest of the page's content width and lets the two columns sit at a consistent, intentional distance instead of drifting with viewport width. */ .FirstElement .container { display: flex; justify-content: space-between; align-items: center; gap: clamp(2.5rem, 1.8rem + 3vw, 5rem); flex-wrap: wrap; } /* Wrapper handles mouse-parallax translation (desktop, JS-driven); the actual floating/glow/border styling stays on .profile-photo so the two transforms never fight over the same element. */ .profile-photo-parallax { display: inline-block; flex-shrink: 0; transition: transform 0.15s ease-out; } .FirstElement .profile-photo { width: 350px; height: 350px; border-radius: 50%; overflow: hidden; border: 16px solid #444444; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(254, 215, 0, 0.1), 0 0 46px rgba(254, 215, 0, 0.16); animation: heroFadeIn 0.8s ease both, photoFloat 6s ease-in-out 0.8s infinite; } /* Extra-large / high-resolution desktops: let the photo take up slightly more room since there's more space on either side to balance against. */ @media (min-width: 1600px) { .FirstElement .profile-photo { width: 380px; height: 380px; border-width: 18px; } } /* Hero entrance: quiet fade + rise, staggered — no layout impact since only opacity/transform are animated and both settle to their resting values. */ @keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes photoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .profile-text .hero-eyebrow { animation: heroFadeUp 0.6s ease both 0.05s; } .profile-text h1 { animation: heroFadeUp 0.7s ease both 0.12s; } .profile-text .hero-role { animation: heroFadeUp 0.7s ease both 0.19s; } .profile-text .hero-badges { animation: heroFadeUp 0.7s ease both 0.26s; } .profile-text > p { animation: heroFadeUp 0.7s ease both 0.33s; } .FirstElement .btn-group { animation: heroFadeUp 0.7s ease both 0.4s; } .profile-text .social { animation: heroFadeUp 0.7s ease both 0.47s; } /* Professional title — sits between the name and the bio so the visitor's eye lands on "who + what they do" within the first couple seconds. */ .hero-role { color: #fed700; font-size: var(--fs-h4); font-weight: 600; letter-spacing: 0.2px; margin: 0 0 16px; } /* Status/location badges */ .hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .badge { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.1px; padding: 9px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); color: #e5e5e5; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease; } /* Premium SaaS-style pill: layered glass surface + soft shadow + faint inner highlight, in the spirit of Linear/Vercel/Stripe status chips. */ .badge-available { position: relative; color: #7dffbb; font-weight: 550; border-color: rgba(107, 255, 176, 0.3); background: linear-gradient(180deg, rgba(107, 255, 176, 0.1), rgba(107, 255, 176, 0.05)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 18px -8px rgba(61, 220, 132, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .badge-available:hover { transform: translateY(-1px); border-color: rgba(107, 255, 176, 0.45); background: linear-gradient(180deg, rgba(107, 255, 176, 0.14), rgba(107, 255, 176, 0.06)); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 10px 24px -8px rgba(61, 220, 132, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .badge-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; flex-shrink: 0; /* Soft, steady glow around the dot itself — separate from the pulse ring so the glow reads as "always on" rather than animating in/out. */ box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.18), 0 0 8px 1px rgba(61, 220, 132, 0.55); } /* Soft pulsing ring around the availability dot — transform/opacity only, so it stays GPU-composited even though it repeats forever. */ .badge-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3ddc84; transform: scale(1); opacity: 0.55; animation: badgePulse 2.4s ease-out infinite; } @keyframes badgePulse { to { transform: scale(2.6); opacity: 0; } } .badge-location { color: #e5e5e5; } /*---------------------------Trust Strip---------------------------*/ /* Quiet credibility bar directly under the hero — reinforces the value prop with concrete role/skill highlights before the visitor has to scroll or read a full About section. Deliberately understated: no cards, no icons fighting for attention, just a calm divider-bound row. */ .trust-strip { padding: 22px 0; border-top: 1px solid var(--border-glass); border-bottom: 1px solid var(--border-glass); } .trust-strip-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 36px; } .trust-strip-list li { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 500; color: rgba(229, 229, 229, 0.7); letter-spacing: 0.1px; } .trust-strip-list i { color: #fed700; font-size: 0.95em; opacity: 0.9; } @media (max-width: 640px) { .trust-strip-list { justify-content: flex-start; gap: 12px 22px; } } .FirstElement .profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.5s ease; } .FirstElement .profile-photo img:hover { transform: scale(1.15); } .profile-text { flex: 1 1 420px; max-width: 750px; display: flex; flex-direction: column; } .profile-text .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.6); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .profile-text .hero-eyebrow::before { content: ""; width: 26px; height: 1.5px; background: linear-gradient(90deg, #fed700, transparent); flex-shrink: 0; } .profile-text h1 { color: #fed700; font-size: var(--fs-h1); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; margin: 10px 0 16px; overflow-wrap: break-word; } .profile-text p { color: rgba(229, 229, 229, 0.88); line-height: 1.7; max-width: 58ch; } .profile-text .social { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; } .profile-text .social a { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease; /* Staggered entrance */ opacity: 0; transform: translateY(18px) scale(0.85); animation: socialIconIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .profile-text .social a:nth-child(1) { animation-delay: 0.55s; } .profile-text .social a:nth-child(2) { animation-delay: 0.63s; } .profile-text .social a:nth-child(3) { animation-delay: 0.71s; } .profile-text .social a:nth-child(4) { animation-delay: 0.79s; } .profile-text .social a:nth-child(5) { animation-delay: 0.87s; } @keyframes socialIconIn { to { opacity: 1; transform: translateY(0) scale(1); } } .profile-text .social i { color: #e5e5e5; font-size: 18px; transition: color 0.35s ease, transform 0.35s ease; } .profile-text .social a:hover, .profile-text .social a:focus-visible { background: linear-gradient(155deg, rgba(254, 215, 0, 0.18), rgba(254, 215, 0, 0.05)); border-color: #fed700; transform: translateY(-6px) scale(1.12); box-shadow: 0 16px 30px rgba(254, 215, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(254, 215, 0, 0.08); } .profile-text .social a:active { transform: translateY(-2px) scale(1.05); } .profile-text .social a:hover i, .profile-text .social a:focus-visible i { color: #fed700; transform: scale(1.18) rotate(6deg); } /* Tooltip label (reuses each link's existing title="" via JS-set data-tooltip) */ .profile-text .social a::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px); background: #16171b; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; padding: 6px 11px; border-radius: 7px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4); transition: opacity 0.25s ease, transform 0.25s ease; z-index: 5; } .profile-text .social a::before { content: ""; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #16171b; opacity: 0; visibility: hidden; transition: opacity 0.25s ease; z-index: 5; } .profile-text .social a:hover::after, .profile-text .social a:focus-visible::after, .profile-text .social a:hover::before, .profile-text .social a:focus-visible::before { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { .profile-text .social a { animation: none; opacity: 1; transform: none; } } /*---------------------------About---------------------------*/ .about-area { padding: var(--space-section-y) 0 calc(var(--space-section-y) * 0.4); background-color: #202020; } /*---------------------------Page Hero (sub-pages)---------------------------*/ /* Lightweight hero for interior pages (currently: Projects). Mirrors the main hero's eyebrow/heading treatment via dedicated classes so it doesn't fight the .profile-text-scoped hero rules, while staying visually identical — same gold heading, same fluid type scale. */ .page-hero { padding: max(var(--space-section-y), var(--navbar-clearance)) 0 calc(var(--space-section-y) * 0.5); text-align: center; } .page-hero-inner { max-width: 720px; margin: 0 auto; } .page-hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.6); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; } .page-hero-eyebrow::before { content: ""; width: 26px; height: 1.5px; background: linear-gradient(90deg, #fed700, transparent); flex-shrink: 0; } .page-hero h1 { color: #fed700; font-size: var(--fs-h1); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; } .page-hero p { color: rgba(229, 229, 229, 0.78); font-size: 1.05rem; line-height: 1.7; max-width: 58ch; margin: 0 auto; } /* Filters get their own thin section between the hero and the featured project so project cards stay reachable within the first scroll, without the extra weight of a heading. */ .project-filters-content { padding: 0 0 calc(var(--space-section-y) * 0.4); } .project-filters-content .project-filters { margin-bottom: 0; } /* Projects previously had no explicit section padding of its own (it inherited whatever whitespace neighboring sections happened to leave) — giving it the same rhythm token as every other section closes a visible gap in the page's vertical consistency. */ .project-content { padding: var(--space-section-y) 0; } /*---------------------------Process---------------------------*/ .process-content { padding: var(--space-section-y) 0; } .process-title { margin-bottom: 56px; text-align: center; } .process-title h2 { text-transform: uppercase; font-size: var(--fs-h2); letter-spacing: 0.02em; color: #fed700; margin-bottom: 14px; } .process-title p { color: rgba(229, 229, 229, 0.7); font-size: 1.05rem; } .process-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; counter-reset: none; } .process-step { position: relative; padding: 26px 22px 24px; border: 1px solid var(--border-glass); border-radius: var(--radius-md); background: linear-gradient(155deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); transition: border-color 0.35s var(--ease-premium), transform 0.35s var(--ease-premium), background 0.35s var(--ease-premium); } .process-step:hover { border-color: var(--border-glass-hover); transform: translateY(-4px); background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); } /* Connecting line between steps on wide screens — reinforces "this is a sequence", not just five unrelated cards */ .process-step:not(:last-child)::after { content: ""; position: absolute; top: 44px; left: 100%; width: 24px; height: 1px; background: linear-gradient(90deg, rgba(254, 215, 0, 0.35), transparent); } .process-step-number { display: block; font-size: 1.6rem; font-weight: 700; color: rgba(254, 215, 0, 0.4); margin-bottom: 10px; letter-spacing: 0.02em; } .process-step h3 { font-size: 1.05rem; color: #fff; margin-bottom: 8px; } .process-step p { font-size: var(--fs-small); color: rgba(229, 229, 229, 0.72); line-height: 1.6; } @media (max-width: 980px) { .process-steps { grid-template-columns: repeat(2, 1fr); } .process-step:not(:last-child)::after { display: none; } } @media (max-width: 560px) { .process-steps { grid-template-columns: 1fr; } } .about { display: flex; justify-content: space-between; align-items: center; gap: 40px; margin-bottom: 50px; flex-wrap: wrap; } .about-content { flex-basis: 60%; flex-grow: 1; min-width: 280px; } .about-content h2 { color: #fed700; font-size: var(--fs-h2); line-height: 1.3; text-transform: capitalize; margin-bottom: 10px; } .about-content ul { color: #fff; text-align: justify; } .about-content ul li { list-style-type: disc; margin-bottom: 10px; margin-left: 20px; } .about-skills { flex-basis: 35%; flex-grow: 1; min-width: 260px; } /* Personal-info cards: reuses the same glass-card language as .wid-card (blur, soft border, radius) so it reads as one consistent design system, just in a horizontal icon+text layout instead of a centered icon stack. */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; list-style: none; } .info-card { display: flex; align-items: flex-start; gap: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; padding: 16px 18px; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; } .info-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(254, 215, 0, 0.1); color: #fed700; font-size: 17px; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .info-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; /* lets long emails/values wrap instead of overflowing the card */ } .info-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; color: rgba(255, 255, 255, 0.5); } .info-value { font-size: var(--fs-h4); font-weight: 500; color: #fff; overflow-wrap: break-word; word-break: break-word; } .info-value a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; } .info-value a:hover, .info-value a:focus-visible { color: #fed700; border-bottom-color: rgba(254, 215, 0, 0.5); } .info-card:hover, .info-card:focus-within { transform: translateY(-4px); border-color: #fed700; box-shadow: 0 12px 26px rgba(254, 215, 0, 0.15); background-color: rgba(255, 255, 255, 0.07); } .info-card:hover .info-icon { background: #fed700; color: #202020; transform: scale(1.08) rotate(6deg); } @media (max-width: 480px) { .info-grid { grid-template-columns: 1fr; } } /*---------------------------Button---------------------------*/ .btn-group { margin: 45px 0 0; display: flex; flex-wrap: wrap; gap: 10px; } /* Tertiary row (Book a Call / Email / Resume) sits visually below the primary+secondary pair — smaller, quieter, no competing weight. */ .btn-group-tertiary { margin: 14px 0 45px; } .btn-group-tertiary .btn { padding: 9px 18px; font-size: 0.85rem; background-color: transparent; box-shadow: none; } .btn-group .btn { border-color: rgba(255, 255, 255, 0.16); color: #f2f2f2; background-color: rgba(255, 255, 255, 0.04); padding: 13px 26px; border-radius: var(--radius-pill); border: 1.5px solid rgba(255, 255, 255, 0.16); font-weight: 500; font-size: 0.95rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; gap: 8px; } /* Primary CTA ("Hire Me") is filled solid — the single highest-emphasis action on the page. Every other button reads as secondary/ghost by comparison, giving one clear visual hierarchy instead of several buttons competing at equal weight. */ .btn-group .btn.btn-primary { background: linear-gradient(180deg, #ffe14d, #fed700); border-color: #fed700; color: #1a1a1a; font-weight: 600; box-shadow: 0 14px 30px -10px rgba(254, 215, 0, 0.45), var(--shadow-sm); } .btn-group .btn.btn-primary:hover, .btn-group .btn.btn-primary:focus-visible { color: #1a1a1a !important; border-color: #ffe14d !important; background: linear-gradient(180deg, #ffe873, #fed700); box-shadow: 0 18px 38px -10px rgba(254, 215, 0, 0.55), var(--shadow-sm); } /* Secondary CTA ("View Projects") — clear outline, second-highest emphasis */ .btn-group .btn.btn-secondary { border-color: rgba(254, 215, 0, 0.55); color: #fed700; background-color: rgba(254, 215, 0, 0.06); } .btn-group .btn.btn-secondary:hover, .btn-group .btn.btn-secondary:focus-visible { border-color: #fed700; background-color: rgba(254, 215, 0, 0.12); color: #fed700; } /* Ghost/tertiary actions — lowest visual weight, still fully accessible */ .btn-group .btn.btn-ghost { border-color: rgba(255, 255, 255, 0.12); color: rgba(242, 242, 242, 0.75); } .btn-group .btn { position: relative; overflow: hidden; isolation: isolate; transition: border-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; } /* Icons inherit the button's text color and animate subtly on hover */ .btn-group .btn i { color: inherit; font-size: 16px; line-height: 1; transition: transform 0.3s ease; } .btn-group .btn:hover, .btn-group .btn:focus-visible { border-color: #fed700; color: #fed700; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(254, 215, 0, 0.18), 0 0 18px rgba(254, 215, 0, 0.25); } .btn-group .btn:hover i, .btn-group .btn:focus-visible i { transform: scale(1.15) translateX(2px); } .btn-group .btn:active { transform: translateY(-1px) scale(0.97); transition-duration: 0.1s; } .btn.active { border-color: #fed700; } /* Accessible focus state — visible ring independent of hover color cue */ .btn-group .btn:focus-visible, .contact-card:focus-visible, .footer-social a:focus-visible, .social a:focus-visible { outline: 2px solid #fed700; outline-offset: 3px; } /* Ripple effect — a is injected by script.js on click/tap */ .btn-group .btn .ripple, .contact-card .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, 0.55); pointer-events: none; animation: ripple-anim 0.6s ease-out; } @keyframes ripple-anim { to { transform: scale(2.6); opacity: 0; } } /* WhatsApp CTA styling — Hire Me / Book a Call */ .btn-whatsapp { background-color: #1f2a22; border-color: #25D366; color: #eafff1; } .btn-whatsapp:hover, .btn-whatsapp:focus-visible { border-color: #25D366 !important; color: #25D366 !important; box-shadow: 0 8px 22px rgba(37, 211, 102, 0.22), 0 0 20px rgba(37, 211, 102, 0.35) !important; } /* WhatsApp contact card — premium accent to match brand color */ .contact-card-whatsapp .contact-card-icon { background: rgba(37, 211, 102, 0.12); color: #25D366; } .contact-card-whatsapp:hover, .contact-card-whatsapp:focus-visible { border-color: #25D366; box-shadow: 0 12px 30px rgba(37, 211, 102, 0.22); } .contact-card-whatsapp:hover .contact-card-icon, .contact-card-whatsapp:focus-visible .contact-card-icon { background: #25D366; color: #0d1f13; transform: scale(1.1) rotate(8deg); } @media (prefers-reduced-motion: reduce) { .btn-group .btn .ripple { display: none; } } /*---------------------------Section Divider---------------------------*/ /* Strong, deliberate transition between Certifications and Education — a centered gold-ringed icon on a fading hairline, echoing the same gradient language used in the certification timeline connectors. */ .section-divider { display: flex; align-items: center; justify-content: center; gap: 18px; max-width: 880px; margin: 0 auto; padding: 0 24px; opacity: 0; transform: translateY(10px); transition: opacity 0.7s ease, transform 0.7s ease; } .section-divider.in-view { opacity: 1; transform: translateY(0); } .section-divider-line { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(254, 215, 0, 0.4) 50%, transparent); } .section-divider-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; font-size: 17px; color: #fed700; background: rgba(254, 215, 0, 0.06); border: 1px solid rgba(254, 215, 0, 0.35); box-shadow: 0 0 20px rgba(254, 215, 0, 0.18); } /*---------------------------Education---------------------------*/ .education-content { padding: var(--space-section-y) 0; } .education-title { margin-bottom: 70px; text-align: center; } .education-title h2 { text-transform: uppercase; font-size: var(--fs-h2); line-height: 1.2; color: #fed700; margin-bottom: 20px; letter-spacing: 1px; } .education-title p { color: #e5e5e5; } /* Vertical timeline (left marker) + premium glass cards (right) — same visual system as the Certifications timeline for a matched, unified feel. */ .education-timeline { position: relative; max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; } .edu-entry { position: relative; display: flex; align-items: flex-start; gap: 28px; } /* Entrance: fade up + slide in from the left, staggered per entry */ .edu-entry.reveal { transform: translate(-22px, 28px); transition: opacity 0.7s ease, transform 0.7s ease; } .edu-entry.reveal.in-view { transform: translate(0, 0); } .edu-entry:nth-child(1).reveal { transition-delay: 0s; } .edu-entry:nth-child(2).reveal { transition-delay: 0.15s; } .edu-entry:nth-child(3).reveal { transition-delay: 0.3s; } .edu-entry:nth-child(4).reveal { transition-delay: 0.45s; } /* Connecting line between markers — grows top-to-bottom as each entry scrolls into view, matching the certification timeline. */ .edu-entry:not(:last-child)::before { content: ""; position: absolute; left: 28px; top: 68px; bottom: -48px; width: 2px; background: linear-gradient(180deg, #fed700 0%, rgba(254, 215, 0, 0.5) 50%, rgba(254, 215, 0, 0.05) 100%); transform: scaleY(0); transform-origin: top; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; contain: paint; } .edu-entry.in-view:not(:last-child)::before { transform: scaleY(1); } /* Timeline marker: gradient ring + glass icon well */ .edu-entry-marker { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; position: relative; z-index: 2; padding: 2px; background: linear-gradient(135deg, #fed700, rgba(254, 215, 0, 0.15) 55%, #fed700); box-shadow: 0 0 0 rgba(254, 215, 0, 0); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease; } .edu-entry-marker-inner { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fed700; background: rgba(28, 28, 28, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.4s ease, color 0.4s ease; } .edu-entry.in-view .edu-entry-marker { box-shadow: 0 0 24px rgba(254, 215, 0, 0.45); } .edu-entry:hover .edu-entry-marker, .edu-entry:focus-within .edu-entry-marker { transform: scale(1.12) rotate(6deg); box-shadow: 0 0 30px rgba(254, 215, 0, 0.65); } .edu-entry:hover .edu-entry-marker-inner, .edu-entry:focus-within .edu-entry-marker-inner { background: #fed700; color: #202020; } /* Premium glassmorphism card — mirrors .cert-entry-card exactly so both sections read as one designed system. */ .edu-entry-card { position: relative; flex: 1 1 auto; min-width: 0; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 20px; padding: var(--space-card-pad); overflow: hidden; min-height: 200px; display: flex; flex-direction: column; justify-content: center; row-gap: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease, background 0.45s ease; } .edu-entry-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #fed700, rgba(254, 215, 0, 0)); opacity: 0.6; transition: opacity 0.4s ease; } .edu-entry-card::after { content: ""; position: absolute; inset: -20px; background: radial-gradient(circle at 15% 0%, rgba(254, 215, 0, 0.28), transparent 65%); opacity: 0; transition: opacity 0.45s ease; pointer-events: none; z-index: -1; } .edu-entry:hover .edu-entry-card, .edu-entry:focus-within .edu-entry-card { transform: translateY(-8px) scale(1.02); border-color: rgba(254, 215, 0, 0.45); background: rgba(255, 255, 255, 0.065); box-shadow: 0 26px 55px rgba(0, 0, 0, 0.45), 0 0 32px rgba(254, 215, 0, 0.16); } .edu-entry:hover .edu-entry-card::before, .edu-entry:focus-within .edu-entry-card::before { opacity: 1; } .edu-entry:hover .edu-entry-card::after, .edu-entry:focus-within .edu-entry-card::after { opacity: 1; } .edu-entry-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; } .edu-entry-title { color: #fff; font-size: var(--fs-h3); font-weight: 700; letter-spacing: 0.2px; } .edu-entry-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px; padding: 7px 14px; border-radius: 30px; white-space: nowrap; transition: box-shadow 0.4s ease, background 0.4s ease, border-color 0.4s ease; } .edu-entry-status.status-complete { color: #fed700; background: rgba(254, 215, 0, 0.08); border: 1px solid rgba(254, 215, 0, 0.3); } /* Currently-pursuing gets a distinct live/active accent so the one in-progress entry stands out from the completed ones at a glance. */ .edu-entry-status.status-active { color: #6ee7b7; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.35); } .edu-entry-status.status-active i { animation: eduStatusSpin 2.2s linear infinite; } @keyframes eduStatusSpin { to { transform: rotate(360deg); } } .edu-entry:hover .edu-entry-status.status-complete, .edu-entry:focus-within .edu-entry-status.status-complete { background: rgba(254, 215, 0, 0.14); border-color: rgba(254, 215, 0, 0.55); box-shadow: 0 0 16px rgba(254, 215, 0, 0.3); } .edu-entry:hover .edu-entry-status.status-active, .edu-entry:focus-within .edu-entry-status.status-active { background: rgba(52, 211, 153, 0.16); border-color: rgba(52, 211, 153, 0.55); box-shadow: 0 0 16px rgba(52, 211, 153, 0.25); } .edu-entry-org { display: flex; align-items: center; gap: 9px; color: #e5e5e5; font-size: var(--fs-small); font-weight: 600; } .edu-entry-org i { color: #fed700; } .edu-entry-date { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, 0.5); font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; } .edu-entry-date i { color: rgba(254, 215, 0, 0.7); } .edu-entry-desc { color: rgba(255, 255, 255, 0.68); font-size: var(--fs-small); line-height: 1.8; max-width: 62ch; } /*---------------------------Projects---------------------------*/ /*---------------------------Featured Project---------------------------*/ .featured-project { display: flex; align-items: stretch; gap: 0; margin-bottom: 64px; border: 1px solid var(--border-glass); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)); box-shadow: var(--shadow-lg); transition: border-color 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium); } .featured-project:hover { border-color: var(--border-glass-hover); box-shadow: var(--shadow-lg), var(--shadow-accent); } .featured-project-visual { flex: 1 1 42%; min-width: 300px; padding: clamp(28px, 3vw, 44px); display: flex; align-items: center; justify-content: center; background: radial-gradient(480px 320px at 20% 10%, rgba(254, 215, 0, 0.1), transparent 65%), rgba(0, 0, 0, 0.18); } /* Lightweight "browser chrome" mockup drawn entirely in CSS — gives the featured slot a concrete visual anchor without depending on an external screenshot asset that may not exist for every project. */ .featured-project-browser { width: 100%; max-width: 380px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: #17171a; box-shadow: var(--shadow-md); } .featured-project-browser-bar { display: flex; gap: 6px; padding: 12px 14px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .featured-project-browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); } .featured-project-browser-bar span:first-child { background: #ff5f57; } .featured-project-browser-bar span:nth-child(2) { background: #febc2e; } .featured-project-browser-bar span:nth-child(3) { background: #28c840; } .featured-project-browser-body { display: flex; min-height: 200px; } .featured-project-browser-sidebar { flex: 0 0 64px; display: flex; flex-direction: column; gap: 10px; padding: 16px 12px; background: rgba(255, 255, 255, 0.02); border-right: 1px solid rgba(255, 255, 255, 0.06); } .featured-project-browser-sidebar span { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.09); } .featured-project-browser-sidebar span:first-child { background: rgba(254, 215, 0, 0.55); } .featured-project-browser-main { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 12px; } .featured-project-browser-chart { height: 90px; border-radius: 8px; background: linear-gradient(180deg, rgba(254, 215, 0, 0.16), transparent 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 20%); border: 1px solid rgba(255, 255, 255, 0.06); } .featured-project-browser-row { height: 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); width: 100%; } .featured-project-browser-row.short { width: 60%; } .featured-project-body { flex: 1 1 58%; min-width: 300px; padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; } .featured-project-tag { align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #1a1a1a; background: linear-gradient(180deg, #ffe14d, #fed700); padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 16px; } .featured-project-body h3 { font-size: var(--fs-h3); color: #fff; margin-bottom: 12px; } .featured-project-overview { color: rgba(229, 229, 229, 0.8); line-height: 1.65; margin-bottom: 22px; } .featured-project-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; padding-top: 18px; border-top: 1px solid var(--border-glass); } .featured-project-columns h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: #fed700; margin-bottom: 6px; } .featured-project-columns p { font-size: var(--fs-small); color: rgba(229, 229, 229, 0.72); line-height: 1.55; } .featured-project-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .featured-project-highlights { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; } .featured-project-highlights li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: rgba(229, 229, 229, 0.85); } .featured-project-highlights i { color: #fed700; width: 18px; text-align: center; } .featured-project-cta { align-self: flex-start; margin-top: auto; } @media (max-width: 860px) { .featured-project { flex-direction: column; } .featured-project-columns { grid-template-columns: 1fr; } } .project-title { margin-bottom: 64px; text-align: center; } .project-title h2 { text-transform: uppercase; font-size: var(--fs-h2); letter-spacing: 0.02em; color: #fed700; margin-bottom: 14px; } .project-title p { color: rgba(229, 229, 229, 0.7); font-size: 1.05rem; } .projects { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; } .project { color: #e5e5e5; border: 1px solid var(--border-glass); border-radius: var(--radius-lg); width: 100%; position: relative; overflow: hidden; isolation: isolate; padding: 34px 28px 28px; text-align: left; flex-basis: 32%; flex-grow: 1; min-width: 260px; background: linear-gradient(155deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); box-shadow: var(--shadow-md); transition: border-color .4s var(--ease-premium), transform .4s var(--ease-premium), opacity .6s ease, box-shadow .4s var(--ease-premium), background .4s var(--ease-premium); row-gap: 10px; display: flex; flex-direction: column; opacity: 0; transform: translateY(24px); } /* Faint top sheen + gold radial wash that only appears on hover — the "agency card" depth cue: light catching an edge, not just a flat color swap. */ .project::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(360px 200px at 85% -10%, rgba(254, 215, 0, 0.14), transparent 60%); opacity: 0; transition: opacity .5s var(--ease-premium); } .project::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); opacity: 0; transition: opacity .4s ease; } /* Stagger in once the section itself has scrolled into view (reuses the existing .reveal/.in-view system on .project-content — no JS changes needed) */ .project-content.in-view .project { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s cubic-bezier(0.22, 1, 0.36, 1), border-color .3s ease, box-shadow .3s ease; } .project-content.in-view .project:nth-child(1) { transition-delay: 0s; } .project-content.in-view .project:nth-child(2) { transition-delay: 0.06s; } .project-content.in-view .project:nth-child(3) { transition-delay: 0.12s; } .project-content.in-view .project:nth-child(4) { transition-delay: 0.18s; } .project-content.in-view .project:nth-child(5) { transition-delay: 0.24s; } .project-content.in-view .project:nth-child(6) { transition-delay: 0.3s; } .project-content.in-view .project:nth-child(7) { transition-delay: 0.36s; } .project-content.in-view .project:nth-child(8) { transition-delay: 0.42s; } .project-content.in-view .project:nth-child(n+9) { transition-delay: 0.46s; } .project-badges { display: flex; flex-wrap: wrap; gap: 8px; } .project-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; padding: 5px 11px; border-radius: var(--radius-pill); background: rgba(107, 255, 176, 0.08); border: 1px solid rgba(107, 255, 176, 0.25); color: #7dffbb; } .project-badge i { font-size: 0.85em; } .project i { background: linear-gradient(155deg, #ffe14d, #fed700); width: 54px; height: 54px; color: #201a00; font-size: 22px; line-height: 54px; text-align: center; border-radius: var(--radius-md); align-self: flex-start; box-shadow: 0 10px 24px -10px rgba(254, 215, 0, 0.5); transition: transform 0.4s var(--ease-premium), box-shadow 0.4s ease; } .project:hover i, .project:focus-within i { transform: scale(1.06) rotate(-4deg); box-shadow: 0 14px 30px -8px rgba(254, 215, 0, 0.65); } .project h3 { font-size: var(--fs-h3); font-weight: 700; text-transform: capitalize; margin: 6px 0 2px; color: #fff; } .project p { text-align: left; color: rgba(229, 229, 229, 0.78); line-height: 1.65; flex-grow: 1; } .buy-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); padding: 11px 24px; border-radius: var(--radius-pill); cursor: pointer; align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.9rem; transition: background .3s var(--ease-out-soft), border-color .3s ease, transform .3s ease, color .3s ease; } .buy-btn i { transition: transform 0.3s ease; } .buy-btn:hover i, .buy-btn:focus-visible i { transform: scale(1.15) translateX(2px); } .buy-btn:hover, .buy-btn:focus-visible { background: #fed700; border-color: #fed700; color: #202020; transform: translateY(-2px); } .buy-btn:active { transform: translateY(-1px) scale(0.96); } .project:hover, .project:focus-within { border-color: var(--border-glass-hover); transform: translateY(-6px); background: linear-gradient(155deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02)); box-shadow: var(--shadow-lg), var(--shadow-accent); } .project:hover::before, .project:focus-within::before, .project:hover::after, .project:focus-within::after { opacity: 1; } /*---------------------------Certifications---------------------------*/ .certificates-content { padding: var(--space-section-y) 0; } .certificates-title { margin-bottom: 70px; text-align: center; } .certificates-title h2 { text-transform: uppercase; font-size: var(--fs-h2); line-height: 1.2; color: #fed700; margin-bottom: 20px; letter-spacing: 1px; } .certificates-title p { color: #e5e5e5; } /* Vertical timeline (left) + premium glass cards (right) */ .certifications-timeline { position: relative; max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; } .cert-entry { position: relative; display: flex; align-items: flex-start; gap: 28px; } /* Entrance: fade up + slide in from the left, staggered per entry */ .cert-entry.reveal { transform: translate(-22px, 28px); transition: opacity 0.7s ease, transform 0.7s ease; } .cert-entry.reveal.in-view { transform: translate(0, 0); } .cert-entry:nth-child(1).reveal { transition-delay: 0s; } .cert-entry:nth-child(2).reveal { transition-delay: 0.15s; } .cert-entry:nth-child(3).reveal { transition-delay: 0.3s; } .cert-entry:nth-child(4).reveal { transition-delay: 0.45s; } .cert-entry:nth-child(5).reveal { transition-delay: 0.6s; } /* Connecting line between markers — grows top-to-bottom as each entry scrolls into view, with a slow shimmer running through it */ .cert-entry:not(:last-child)::before { content: ""; position: absolute; left: 28px; top: 68px; bottom: -48px; width: 2px; background: linear-gradient(180deg, #fed700 0%, rgba(254, 215, 0, 0.5) 50%, rgba(254, 215, 0, 0.05) 100%); background-size: 100% 200%; transform: scaleY(0); transform-origin: top; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; /* This element's own shimmer animation repaints (background-position isn't GPU-composited). `contain: paint` scopes that repaint to this thin 2px line's own box instead of letting it bubble up and repaint the whole card/timeline every frame. */ contain: paint; } .cert-entry.in-view:not(:last-child)::before { transform: scaleY(1); animation: certLineShimmer 3.5s linear infinite 1.1s; } @keyframes certLineShimmer { 0% { background-position: 0 0; } 100% { background-position: 0 -200%; } } /* Timeline marker: gradient ring + glass icon well */ .cert-entry-marker { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; position: relative; z-index: 2; padding: 2px; background: linear-gradient(135deg, #fed700, rgba(254, 215, 0, 0.15) 55%, #fed700); box-shadow: 0 0 0 rgba(254, 215, 0, 0); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease; } .cert-entry-marker-inner { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fed700; background: rgba(28, 28, 28, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.4s ease, color 0.4s ease; } /* Active state: marker lights up once its card has entered the viewport */ .cert-entry.in-view .cert-entry-marker { box-shadow: 0 0 24px rgba(254, 215, 0, 0.45); } .cert-entry:hover .cert-entry-marker, .cert-entry:focus-within .cert-entry-marker { transform: scale(1.12) rotate(6deg); box-shadow: 0 0 30px rgba(254, 215, 0, 0.65); } .cert-entry:hover .cert-entry-marker-inner, .cert-entry:focus-within .cert-entry-marker-inner { background: #fed700; color: #202020; } /* Premium glassmorphism card — Apple x Stripe x Vercel x Linear inspired: quiet surface, soft depth, gold accent reserved for detail, not noise. */ .cert-entry-card { position: relative; flex: 1 1 auto; min-width: 0; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 20px; padding: var(--space-card-pad); overflow: hidden; min-height: 200px; display: flex; flex-direction: column; justify-content: center; row-gap: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease, background 0.45s ease; } /* Thin gradient hairline along the top edge of every card */ .cert-entry-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #fed700, rgba(254, 215, 0, 0)); opacity: 0.6; transition: opacity 0.4s ease; } /* Ambient gradient glow that blooms from behind the card on hover */ .cert-entry-card::after { content: ""; position: absolute; inset: -20px; background: radial-gradient(circle at 15% 0%, rgba(254, 215, 0, 0.28), transparent 65%); opacity: 0; transition: opacity 0.45s ease; pointer-events: none; z-index: -1; } .cert-entry:hover .cert-entry-card, .cert-entry:focus-within .cert-entry-card { transform: translateY(-8px) scale(1.02); border-color: rgba(254, 215, 0, 0.45); background: rgba(255, 255, 255, 0.065); box-shadow: 0 26px 55px rgba(0, 0, 0, 0.45), 0 0 32px rgba(254, 215, 0, 0.16); } .cert-entry:hover .cert-entry-card::before, .cert-entry:focus-within .cert-entry-card::before { opacity: 1; } .cert-entry:hover .cert-entry-card::after, .cert-entry:focus-within .cert-entry-card::after { opacity: 1; } .cert-entry-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; } .cert-entry-title { color: #fff; font-size: var(--fs-h3); font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase; } .cert-entry-date { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px; color: #fed700; background: rgba(254, 215, 0, 0.08); border: 1px solid rgba(254, 215, 0, 0.3); padding: 7px 14px; border-radius: 30px; white-space: nowrap; transition: box-shadow 0.4s ease, background 0.4s ease, border-color 0.4s ease; } .cert-entry:hover .cert-entry-date, .cert-entry:focus-within .cert-entry-date { background: rgba(254, 215, 0, 0.14); border-color: rgba(254, 215, 0, 0.55); box-shadow: 0 0 16px rgba(254, 215, 0, 0.3); } .cert-entry-org { display: flex; align-items: center; gap: 9px; color: #e5e5e5; font-size: var(--fs-small); font-weight: 600; } .cert-entry-org i { color: #fed700; } .cert-entry-desc { color: rgba(255, 255, 255, 0.68); font-size: var(--fs-small); line-height: 1.8; max-width: 62ch; } /*---------------------------Contact Me---------------------------*/ .contact-content { padding: var(--space-section-y) 0; color: #fff; text-align: center; } .contact-content .contact-title h2 { font-size: var(--fs-h2); text-transform: capitalize; color: #fed700; padding-bottom: 10px; } .contact-content .contact-title p { padding-bottom: 20px; } /* Premium icon-only social row (GitHub / LinkedIn / Discord) */ .social-icons-row { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 0 auto 34px; padding: 0; } .social-icon-link { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255, 255, 255, 0.65); font-size: 22px; transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .social-icon-link i { transition: transform 0.3s ease; } .social-icon-link:hover, .social-icon-link:focus-visible { color: #202020; background: #fed700; border-color: #fed700; box-shadow: 0 12px 26px rgba(254, 215, 0, 0.3); transform: translateY(-4px); } .social-icon-link:hover i, .social-icon-link:focus-visible i { transform: rotate(8deg) scale(1.1); } /* Custom premium tooltip */ .social-icon-link::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(4px); background: #17181c; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding: 6px 12px; border-radius: 8px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); transition: opacity 0.25s ease, transform 0.25s ease; z-index: 2; } .social-icon-link::before { content: ""; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #17181c; opacity: 0; visibility: hidden; transition: opacity 0.25s ease; z-index: 2; } .social-icon-link:hover::after, .social-icon-link:focus-visible::after, .social-icon-link:hover::before, .social-icon-link:focus-visible::before { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Glassmorphism contact cards */ .contact-cards { display: grid; grid-template-columns: repeat(2, minmax(220px, 300px)); gap: 20px; max-width: 640px; margin: 0 auto 45px; padding: 0; justify-content: center; } /* If an odd number of cards leaves a lone item on the last row, keep it centered under the pair above instead of sticking to the left column. */ .contact-cards li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 300px; } .contact-card { position: relative; overflow: hidden; isolation: isolate; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; padding: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem) clamp(0.875rem, 0.7rem + 0.8vw, 1.125rem); text-align: center; display: flex; flex-direction: column; align-items: center; height: 100%; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .contact-card-icon { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(254, 215, 0, 0.1); font-size: 22px; color: #fed700; transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease; } .contact-card h3 { color: #fff; font-size: var(--fs-h4); margin-bottom: 6px; } .contact-card p { color: rgba(255, 255, 255, 0.55); font-size: var(--fs-small); word-break: break-word; } .contact-card:hover, .contact-card:focus-visible { transform: translateY(-8px); border-color: #fed700; box-shadow: 0 12px 30px rgba(254, 215, 0, 0.18); } .contact-card:hover .contact-card-icon, .contact-card:focus-visible .contact-card-icon { background: #fed700; color: #202020; transform: scale(1.1) rotate(8deg); } .contact { max-width: 700px; margin: auto; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 18px; padding: clamp(1.375rem, 1.1rem + 1.4vw, 2.1875rem); } .contact .form-group { position: relative; margin-bottom: 10px; } .contact input, .contact textarea { width: 100%; padding: 15px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: #fff; font-family: 'Lexend', sans-serif; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .contact input::placeholder, .contact textarea::placeholder { color: rgba(255, 255, 255, 0.4); } .contact input:focus, .contact textarea:focus { outline: none; border-color: #fed700; box-shadow: 0 0 12px rgba(254, 215, 0, 0.3); } .contact input.invalid, .contact textarea.invalid { border-color: #ff5c5c; box-shadow: 0 0 10px rgba(255, 92, 92, 0.35); animation: shake 0.4s ease; } .field-error { display: block; text-align: left; color: #ff8080; font-size: 12px; margin: 4px 2px 0; min-height: 14px; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .contact .submit { width: auto; background-color: #fed700; padding: 10px 40px; font-weight: bold; font-size: 18px; border-radius: 30px; margin-top: 5px; border: 0; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .contact .submit:hover, .contact .submit:focus-visible { transform: scale(1.08); box-shadow: 0 0 20px rgba(254, 215, 0, 0.5); } .contact .submit:active { transform: scale(1.03); } /* Restrained click ripple — one small radial pulse, brand color, self-removes */ .submit-ripple { position: absolute; border-radius: 50%; background: rgba(32, 32, 32, 0.35); transform: scale(0); animation: submitRipple 0.6s ease-out; pointer-events: none; } @keyframes submitRipple { to { transform: scale(3.5); opacity: 0; } } #msg { font-size: 16px; margin-top: 12px; display: block; min-height: 20px; transition: color 0.3s ease; } #msg.success { color: #6bffb0; } #msg.error { color: #ff8080; } /*---------------------------Footer---------------------------*/ .footer { max-width: 1170px; margin: 60px auto 0; padding: 40px 20px 26px; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.02); } .footer-main { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 30px; padding-bottom: 25px; } .footer-brand h3 { color: #fed700; font-size: var(--fs-h3); letter-spacing: 0.5px; margin-bottom: 6px; } .footer-brand p { color: rgba(255, 255, 255, 0.5); font-size: 14px; } .footer-links h4 { color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; } .footer-social { display: flex; gap: 14px; flex-wrap: wrap; } .footer-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 16px; transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .footer-social a i { transition: transform 0.3s ease; } .footer-social a:hover, .footer-social a:focus-visible { color: #fed700; border-color: #fed700; box-shadow: 0 0 14px rgba(254, 215, 0, 0.45); transform: translateY(-3px); } .footer-social a:hover i, .footer-social a:focus-visible i { transform: rotate(8deg) scale(1.1); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; } .footer-bottom .copyright { font-size: 13px; color: rgba(255, 255, 255, 0.5); } .footer-bottom .message { font-size: 12px; color: rgba(255, 255, 255, 0.35); } /*---------------------------Back to top---------------------------*/ .back-to-top { position: fixed; right: 22px; bottom: 22px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(254, 215, 0, 0.4); background: #202020; color: #fed700; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 90; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, visibility 0.3s ease; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover, .back-to-top:focus-visible { box-shadow: 0 0 20px rgba(254, 215, 0, 0.55); transform: translateY(-3px); } .back-to-top:active { transform: translateY(-1px) scale(0.94); } /*------------------- Responsive Design -------------------*/ /* Small-desktop / laptop */ @media (max-width: 1200px) { .container { max-width: 970px; } } /* Tablet landscape and below: stack hero, and collapse the full 6-item nav into the hamburger before it has a chance to overflow/wrap on tablets (iPad portrait is 768px — a 6-word nav plus logo doesn't fit past this point). */ @media (max-width: 1050px) { .FirstElement .container { flex-direction: column; text-align: center; } .FirstElement { padding-top: 6rem; } /* Tablet: proportionally smaller than the desktop size above, but still a step up from the original — plenty of room in a centered column. */ .FirstElement .profile-photo { width: 300px; height: 300px; border-width: 15px; } .profile-text { align-items: center; } .btn-group, .profile-text .social { justify-content: center; } .header .menu_icon { display: flex; } .header-area { position: relative; padding: 12px 0 0; } /* Same floating glass pill as desktop, just slightly denser proportions — a touch less padding and a smaller wordmark/controls so the bar reads as a compact version of the same component rather than a stretched copy of the desktop bar. */ .header { padding: 8px 14px 8px 16px; } .logo { font-size: 16px; } .theme-toggle { width: 32px; height: 32px; font-size: 0.8rem; } .header .menu_icon { width: 36px; height: 36px; } /* Re-center the three bars now that the button itself is 4px smaller — keeps the hamburger glyph optically centered instead of drifting toward the bottom-right of its smaller hit area. */ .menu_icon-bar { left: 8px; } .menu_icon-bar:nth-child(1) { top: 12px; } .menu_icon-bar:nth-child(2) { top: 18px; } .menu_icon-bar:nth-child(3) { top: 24px; } /* Same glass surface as the desktop pill (warm dark + gold), just applied to a dropdown panel instead of an inline bar — so opening the menu never introduces a second, unrelated color language. Stays on the dark glass treatment regardless of site theme (Apple/Linear-style mobile menus keep dark contrast even on a light page). */ .header #primary-navigation { position: absolute; top: calc(100% + 10px); left: 0; width: 100%; z-index: 9998; border-radius: var(--radius-lg); background: rgba(20, 20, 20, 0.92); background-image: radial-gradient(circle at top, rgba(254, 215, 0, 0.12), transparent 60%); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--border-glass); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 50px -24px rgba(0, 0, 0, 0.65); max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.4s ease, visibility 0s linear 0.35s; } .header #primary-navigation.show { max-height: 520px; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); padding: 18px 0 22px; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.4s ease, visibility 0s linear 0s; } .header ul.navbar { flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 18px 0; width: 100%; } .header ul.navbar li { margin: 0; width: 100%; text-align: left; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } /* Each item animates in individually once the panel is open; delays are reset (no transition-delay) when closed so the sequence replays from the top every time the menu opens rather than only firing once. */ .header #primary-navigation.show ul.navbar li { opacity: 1; transform: translateY(0); } .header #primary-navigation.show ul.navbar li:nth-child(1) { transition-delay: 0.10s; } .header #primary-navigation.show ul.navbar li:nth-child(2) { transition-delay: 0.15s; } .header #primary-navigation.show ul.navbar li:nth-child(3) { transition-delay: 0.20s; } .header #primary-navigation.show ul.navbar li:nth-child(4) { transition-delay: 0.25s; } .header #primary-navigation.show ul.navbar li:nth-child(5) { transition-delay: 0.30s; } .header #primary-navigation.show ul.navbar li:nth-child(6) { transition-delay: 0.35s; } .header #primary-navigation.show ul.navbar li:nth-child(7) { transition-delay: 0.40s; } .header #primary-navigation.show ul.navbar li:nth-child(8) { transition-delay: 0.45s; } /* Mobile dropdown links previously relied on line-height alone for their tap area (~24px) — well under the 44px touch-target minimum. Kept here, now with premium color/hover treatment. */ .header ul.navbar li a { padding: 13px 16px; min-height: 44px; display: flex; align-items: center; justify-content: flex-start; width: 100%; border-radius: 10px; color: rgba(255, 255, 255, 0.82); font-weight: 500; letter-spacing: 0.2px; transition: color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease; } /* Keep tooltips from clipping off-screen on narrow viewports — the row is centered here, so only the outer two icons need re-anchoring. */ .profile-text .social a:first-child::after, .profile-text .social a:first-child::before { left: 0; transform: translateX(0) translateY(6px); } .profile-text .social a:first-child:hover::after, .profile-text .social a:first-child:hover::before { transform: translateX(0) translateY(0); } .profile-text .social a:last-child::after, .profile-text .social a:last-child::before { left: auto; right: 0; transform: translateX(0) translateY(6px); } .profile-text .social a:last-child:hover::after, .profile-text .social a:last-child:hover::before { transform: translateX(0) translateY(0); } .header ul.navbar li a:hover, .header ul.navbar li a:focus-visible { color: #fff; background-color: rgba(255, 255, 255, 0.06); transform: translateX(8px); } .header ul.navbar li a.active { color: #fff; background-color: rgba(254, 215, 0, 0.1); } /* Active-section indicator: a small glowing dot ahead of the label. */ .header ul.navbar li a.active::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; margin-right: 10px; border-radius: 50%; background: #fed700; box-shadow: 0 0 8px rgba(254, 215, 0, 0.7); } } /* Tablet */ @media (max-width: 999px) { .container { max-width: 750px; } } /* Phones: tighten the certification timeline — no side-scroll, marker shrinks slightly to keep the card the focus. (Nav is already collapsed by the 1050px breakpoint above by this point.) */ @media (max-width: 767px) { .certifications-timeline, .education-timeline { gap: 30px; } .cert-entry, .edu-entry { gap: 16px; } .cert-entry.reveal, .edu-entry.reveal { transform: translate(-14px, 24px); } .cert-entry-marker, .edu-entry-marker { width: 44px; height: 44px; } .cert-entry-marker-inner, .edu-entry-marker-inner { font-size: 16px; } .cert-entry:not(:last-child)::before, .edu-entry:not(:last-child)::before { left: 21px; top: 50px; bottom: -30px; } .cert-entry-card, .edu-entry-card { min-height: 0; } .section-divider { gap: 12px; padding: 0 16px; } .section-divider-icon { width: 38px; height: 38px; font-size: 15px; } } /* Phones (481px–767px): a step between the tablet size and the smallest mobile size, so the image scales down smoothly instead of jumping straight from 300px to the sub-480px size. */ @media (min-width: 481px) and (max-width: 767px) { .FirstElement .profile-photo { width: 260px; height: 260px; border-width: 12px; } } /* Small screens: tighten hero, avoid overflow */ @media (max-width: 480px) { .FirstElement .profile-photo { width: 230px; height: 230px; border-width: 10px; } .contact-cards { grid-template-columns: 1fr; max-width: 320px; } .social-icons-row { gap: 16px; } .social-icon-link { width: 48px; height: 48px; font-size: 19px; } .cert-entry-head, .edu-entry-head { flex-direction: column; align-items: flex-start; gap: 8px; } .contact { padding: 22px 16px; } .back-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; } } @media (max-width: 767px) { .footer-main { flex-direction: column; text-align: center; align-items: center; } .footer-social { justify-content: center; } } /* ========================================================= PREMIUM UPGRADE — new components (typing, badge, resume, about/what-i-do, skills, stats, project filters/tags, cert verify, why-work-with-me, theme toggle, loader, cursor glow, floating social, light theme) ========================================================= */ /* ---- Typing effect ---- */ .typing-effect::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; background: #fed700; vertical-align: -0.15em; animation: caretBlink 1s steps(1) infinite; } @keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ---- Resume CTA button ---- */ .btn-resume { background-color: #2a2210; border-color: #fed700; color: #fed700; } .btn-resume:hover, .btn-resume:focus-visible { border-color: #fed700 !important; color: #202020 !important; background-color: #fed700 !important; box-shadow: 0 8px 22px rgba(254, 215, 0, 0.3) !important; } /* ---- Theme toggle ---- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); color: #fed700; font-size: 0.85rem; cursor: pointer; position: relative; transition: border-color 0.3s ease, transform 0.3s ease; } .theme-toggle:hover, .theme-toggle:focus-visible { border-color: #fed700; transform: translateY(-2px); } .theme-toggle .fa-sun { display: none; } [data-theme="light"] .theme-toggle .fa-moon { display: none; } [data-theme="light"] .theme-toggle .fa-sun { display: inline-block; } /* ---- Page loader ---- */ .page-loader { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: #202020; transition: opacity 0.5s ease, visibility 0.5s ease; } .page-loader-mark { width: 46px; height: 46px; color: #fed700; animation: loaderPulse 1s ease-in-out infinite; } @keyframes loaderPulse { 0%, 100% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 1; } } body.loaded .page-loader { opacity: 0; visibility: hidden; pointer-events: none; } /* ---- Cursor glow (desktop, pointer:fine only — toggled via body class) ---- */ .cursor-glow { position: fixed; top: 0; left: 0; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(254, 215, 0, 0.08) 0%, rgba(254, 215, 0, 0) 70%); pointer-events: none; z-index: 1; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease; will-change: transform; } body.cursor-glow-active .cursor-glow { opacity: 1; } /* ---- Floating social rail (desktop) ---- */ .floating-social { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 14px; } .floating-social a { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.65); font-size: 16px; transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s ease; } .floating-social a:hover, .floating-social a:focus-visible { color: #202020; background: #fed700; border-color: #fed700; transform: translateX(4px); } .floating-social a::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px); background: #17181c; color: #fff; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .floating-social a:hover::after, .floating-social a:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); } .floating-social-line { width: 1px; height: 60px; background: rgba(255, 255, 255, 0.15); } @media (max-width: 999px) { .floating-social { display: none; } } /* ---- About: title + intro + What I Do ---- */ .about-title { margin-bottom: 40px; text-align: center; } .about-title h2 { text-transform: uppercase; font-size: var(--fs-h2); line-height: 1.2; color: #fed700; margin-bottom: 12px; letter-spacing: 1px; } .about-title p { color: #e5e5e5; } .about-intro { font-size: var(--fs-h4); color: #fff; line-height: 1.7; margin-bottom: 20px; font-weight: 500; } .what-i-do { margin-top: 60px; } .what-i-do h3 { text-align: center; font-size: var(--fs-h3); color: #fed700; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 1px; } .what-i-do-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .wid-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; padding: 28px 20px; text-align: center; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .wid-icon { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(254, 215, 0, 0.1); font-size: 22px; color: #fed700; transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease; } .wid-card h4 { color: #fff; font-size: var(--fs-h4); margin-bottom: 8px; } .wid-card p { color: rgba(255, 255, 255, 0.6); font-size: var(--fs-small); } .wid-card:hover, .wid-card:focus-within { transform: translateY(-6px); border-color: #fed700; box-shadow: 0 12px 30px rgba(254, 215, 0, 0.15); } .wid-card:hover .wid-icon { background: #fed700; color: #202020; transform: scale(1.1) rotate(8deg); } @media (max-width: 999px) { .what-i-do-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .what-i-do-grid { grid-template-columns: 1fr; } } /* ---- Skills ---- */ .skills-content { padding: var(--space-section-y) 0; } .skills-title { margin-bottom: 50px; text-align: center; } .skills-title h2 { text-transform: uppercase; font-size: var(--fs-h2); color: #fed700; margin-bottom: 12px; letter-spacing: 1px; } .skills-title p { color: #e5e5e5; } .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 18px; max-width: 1000px; margin: 0 auto; } .skill-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; padding: 24px 12px; text-align: center; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .skill-icon { font-size: 34px; margin-bottom: 12px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .skill-card h4 { color: #fff; font-size: var(--fs-small); font-weight: 600; } .skill-card:hover, .skill-card:focus-within { transform: translateY(-6px); border-color: #fed700; box-shadow: 0 12px 26px rgba(254, 215, 0, 0.15); } .skill-card:hover .skill-icon { transform: scale(1.15) rotate(-6deg); } /* ---- Stats / animated counters ---- */ .stats-content { padding: var(--space-section-y) 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 1100px; margin: 0 auto; } /* Each card fades/slides in independently (per-card .reveal, observed by the same generic IntersectionObserver already driving every other .reveal element on the page — no JS changes needed) and separately carries its own hover transition, so the two never fight over one shared `transition` list. */ .stat-card { position: relative; overflow: hidden; text-align: center; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 18px; padding: 34px 20px 30px; transition: opacity 0.7s ease 0s, transform 0.7s ease 0s, border-color 0.35s ease 0s, box-shadow 0.35s ease 0s, background-color 0.35s ease 0s; } .stat-card.reveal { opacity: 0; transform: translateY(28px); } .stat-card.reveal.in-view { opacity: 1; transform: translateY(0); } /* Staggered entrance: only the opacity/transform delay changes per card — the trailing three 0s keep hover feeling instant on every card. */ .stat-card:nth-child(2) { transition-delay: 0.12s, 0.12s, 0s, 0s, 0s; } .stat-card:nth-child(3) { transition-delay: 0.24s, 0.24s, 0s, 0s, 0s; } .stat-card:nth-child(4) { transition-delay: 0.36s, 0.36s, 0s, 0s, 0s; } /* Premium top accent bar — hidden until hover, sweeps in like Linear/Vercel cards */ .stat-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, #FACC15, transparent); transform: scaleX(0); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .stat-card:hover::before, .stat-card:focus-within::before { transform: scaleX(1); } .stat-card:hover, .stat-card:focus-within { transform: translateY(-6px); border-color: rgba(250, 204, 21, 0.4); box-shadow: 0 16px 34px rgba(250, 204, 21, 0.16); background-color: rgba(255, 255, 255, 0.06); } .stat-icon { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(250, 204, 21, 0.12); color: #FACC15; font-size: 19px; transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease; } .stat-card:hover .stat-icon { background: #FACC15; color: #202020; transform: scale(1.08) rotate(6deg); } .stat-number { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 3rem); font-weight: 800; color: #FACC15; line-height: 1.1; letter-spacing: -0.01em; } .stat-card p { margin-top: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.6); } @media (max-width: 767px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } } /* ---- Project filters + tags ---- */ .project-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 36px; } .filter-btn { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.75); border: 1.5px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-pill); padding: 8px 22px; font-size: var(--fs-small); font-weight: 600; cursor: pointer; transition: border-color 0.3s var(--ease-out-soft), color 0.3s ease, background 0.3s ease, transform 0.2s ease; } .filter-btn:hover, .filter-btn:focus-visible { border-color: rgba(254, 215, 0, 0.45); color: #fed700; transform: translateY(-2px); } .filter-btn.active { background: #fed700; border-color: #fed700; color: #202020; } .project.is-hidden { display: none; } .project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .tag { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.72); font-size: 12px; font-weight: 500; letter-spacing: 0.2px; padding: 5px 12px; border-radius: var(--radius-pill); transition: color .3s ease, border-color .3s ease; } .project:hover .tag, .project:focus-within .tag { border-color: rgba(254, 215, 0, 0.3); color: #ffe873; } .project-empty { text-align: center; color: rgba(255, 255, 255, 0.6); margin-top: 20px; } /* ---- Certification verify button ---- */ .cert-verify-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 12px; padding: 8px 18px; border-radius: 30px; border: 2px solid #fed700; color: #fed700; font-size: var(--fs-small); font-weight: 600; transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease; } .cert-verify-btn i { transition: transform 0.3s ease; } .cert-verify-btn:hover, .cert-verify-btn:focus-visible { background: #fed700; color: #202020; transform: translateY(-2px); } .cert-verify-btn:hover i, .cert-verify-btn:focus-visible i { transform: translateY(2px); } /* ---- Why Work With Me ---- */ .why-content { position: relative; padding: var(--space-section-y) 0; } .why-title { text-align: center; } .why-title h2 { text-transform: uppercase; font-size: var(--fs-h2); color: #fed700; letter-spacing: 1px; } .why-title p { color: #e5e5e5; } .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1170px; margin: 0 auto; align-items: stretch; } /* Same glass-card language as .wid-card, now with a short supporting line under each title and a richer hover state — still icon-led, just with more visual weight and depth per card. */ .why-card { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; padding: 32px 22px; text-align: center; overflow: hidden; opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .35s cubic-bezier(0.22, 1, 0.36, 1), border-color .35s ease, box-shadow .35s ease, background .35s ease; } /* Faint top sheen so the glass reads as a lit surface rather than a flat tile */ .why-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(254, 215, 0, 0.08), rgba(254, 215, 0, 0) 45%); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .why-card:hover::before, .why-card:focus-within::before { opacity: 1; } /* Stagger in once the section scrolls into view (reuses the existing .reveal/.in-view system — no extra JS needed) */ .why-content.in-view .why-card { opacity: 1; transform: translateY(0); } .why-content.in-view .why-card:nth-child(1) { transition-delay: 0s; } .why-content.in-view .why-card:nth-child(2) { transition-delay: .06s; } .why-content.in-view .why-card:nth-child(3) { transition-delay: .12s; } .why-content.in-view .why-card:nth-child(4) { transition-delay: .18s; } .why-content.in-view .why-card:nth-child(5) { transition-delay: .24s; } .why-content.in-view .why-card:nth-child(6) { transition-delay: .3s; } .why-content.in-view .why-card:nth-child(7) { transition-delay: .36s; } .why-content.in-view .why-card:nth-child(8) { transition-delay: .42s; } .why-icon { position: relative; width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(254, 215, 0, 0.1); border: 1px solid rgba(254, 215, 0, 0.25); font-size: 22px; color: #fed700; box-shadow: 0 0 0 rgba(254, 215, 0, 0); transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .why-card h4 { color: #fff; font-size: var(--fs-small); font-weight: 600; line-height: 1.4; margin-bottom: 8px; } .why-card p { color: rgba(229, 229, 229, 0.68); font-size: 0.9rem; line-height: 1.55; max-width: 28ch; } .why-card:hover, .why-card:focus-within { transform: translateY(-8px); border-color: rgba(254, 215, 0, 0.55); box-shadow: 0 18px 38px rgba(254, 215, 0, 0.16), 0 0 0 1px rgba(254, 215, 0, 0.12); } .why-content.in-view .why-card:hover, .why-content.in-view .why-card:focus-within { transform: translateY(-8px); } .why-card:hover .why-icon, .why-card:focus-within .why-icon { background: #fed700; color: #202020; border-color: #fed700; transform: scale(1.12) rotate(8deg); box-shadow: 0 0 24px rgba(254, 215, 0, 0.45); } @media (max-width: 999px) { .why-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .why-grid { grid-template-columns: 1fr; } } /* ========================================================= LIGHT THEME — premium redesign Palette: Background #F8FAFC Secondary Surface #FFFFFF Primary Text #111827 Secondary Text #4B5563 Border #E5E7EB Accent #FACC15 Success #22C55E Shadow system: --lt-shadow 0 10px 30px rgba(17,24,39,0.08) --lt-shadow-hover 0 16px 40px rgba(17,24,39,0.12) ========================================================= */ [data-theme="light"] { --lt-bg: #F8FAFC; --lt-surface: #FFFFFF; --lt-text: #111827; --lt-text-secondary: #4B5563; --lt-border: #E5E7EB; --lt-accent: #FACC15; --lt-accent-ink: #92700a; /* darker gold for text-on-light, keeps AA contrast */ --lt-success: #22C55E; --lt-shadow: 0 10px 30px rgba(17, 24, 39, 0.08); --lt-shadow-hover: 0 16px 40px rgba(17, 24, 39, 0.14); --lt-shadow-sm: 0 4px 14px rgba(17, 24, 39, 0.06); } /* ---- Base surface: soft gradient + fixed radial glows (Apple/Linear/Stripe style) ---- */ [data-theme="light"] body { background-color: var(--lt-bg); background-image: radial-gradient(900px 500px at 12% -8%, rgba(250, 204, 21, 0.16), transparent 60%), radial-gradient(800px 480px at 88% 12%, rgba(59, 130, 246, 0.08), transparent 60%), linear-gradient(180deg, #ffffff 0%, #f8fafc 45%, #f3f5f9 100%); background-attachment: fixed; color: var(--lt-text); } [data-theme="light"] a { color: var(--lt-text); } [data-theme="light"] ::selection { background: rgba(250, 204, 21, 0.35); color: var(--lt-text); } /* ---- Header ---- */ /* Targets .header (the floating glass pill itself) rather than .header-area (the fixed positioning wrapper) — matches the Phase 1 navbar restructure where the visual surface moved from the wrapper onto the inner bar. */ [data-theme="light"] .header { background-color: rgba(248, 250, 252, 0.78); border-color: var(--lt-border); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 20px 50px -26px rgba(15, 23, 42, 0.25); } [data-theme="light"] .header-area.sticky .header { background-color: rgba(248, 250, 252, 0.92); } [data-theme="light"] .header ul li a { color: var(--lt-text-secondary); } [data-theme="light"] .header ul li a.active, [data-theme="light"] .header ul li a:hover, [data-theme="light"] .header ul li a:focus-visible { color: var(--lt-text); } [data-theme="light"] .logo-text { color: var(--lt-text); } [data-theme="light"] .menu_icon-bar { background: var(--lt-text); } [data-theme="light"] .header .menu_icon:hover .menu_icon-bar { background: var(--lt-accent-ink); } /* The mobile dropdown panel itself intentionally stays on the dark glass treatment in light mode too (see #primary-navigation above) — so its own link colors need to stay light-on-dark, overriding the general light-theme link rule which targets the desktop-visible ul only. */ @media (max-width: 1050px) { [data-theme="light"] .header ul.navbar li a { color: rgba(255, 255, 255, 0.82); } [data-theme="light"] .header ul.navbar li a:hover, [data-theme="light"] .header ul.navbar li a:focus-visible, [data-theme="light"] .header ul.navbar li a.active { color: #fff; } } [data-theme="light"] .theme-toggle { background: var(--lt-surface); border-color: var(--lt-border); color: var(--lt-accent-ink); box-shadow: var(--lt-shadow-sm); } /* ---- Typography: strong hierarchy, higher contrast ---- */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] .project h3, [data-theme="light"] .cert-entry-title, [data-theme="light"] .edu-entry-title { color: var(--lt-text); font-weight: 700; } [data-theme="light"] .profile-text h1, [data-theme="light"] .page-hero h1 { color: var(--lt-text); -webkit-text-fill-color: initial; } /* Section eyebrow / accent headings keep the gold accent but darker for contrast */ [data-theme="light"] .hero-eyebrow, [data-theme="light"] .page-hero-eyebrow, [data-theme="light"] .project-title h2, [data-theme="light"] .certificates-title h2, [data-theme="light"] .education-title h2, [data-theme="light"] .about-title h2, [data-theme="light"] .skills-title h2, [data-theme="light"] .why-title h2, [data-theme="light"] .contact-content .contact-title h2, [data-theme="light"] .what-i-do h3 { color: var(--lt-accent-ink); } [data-theme="light"] p, [data-theme="light"] .profile-text p, [data-theme="light"] .project-title p, [data-theme="light"] .certificates-title p, [data-theme="light"] .education-title p, [data-theme="light"] .about-title p, [data-theme="light"] .skills-title p, [data-theme="light"] .why-title p, [data-theme="light"] .contact-content .contact-title p, [data-theme="light"] .badge-location, [data-theme="light"] .about-content ul li, [data-theme="light"] .info-label, [data-theme="light"] .project p, [data-theme="light"] .wid-card p, [data-theme="light"] .why-card p, [data-theme="light"] .stat-card p, [data-theme="light"] .cert-entry-desc, [data-theme="light"] .cert-entry-org, [data-theme="light"] .edu-entry-desc, [data-theme="light"] .edu-entry-org, [data-theme="light"] .edu-entry-date { color: var(--lt-text-secondary); } [data-theme="light"] .info-value { color: var(--lt-text); } [data-theme="light"] .about-intro { color: var(--lt-text); } /* ============================================================ Phase 2 / 5 — consolidated section-heading rhythm. Every section title above already sets its own h2/p rules; this pass (placed last so it wins ties of equal specificity) normalizes the parts that make a heading system feel *designed* rather than assembled — consistent letter-spacing, a slightly quieter subtitle color/size, and even margin rhythm — without touching each block's unique bits (color, uppercase) individually. ============================================ */ .project-title, .certificates-title, .education-title, .about-title, .skills-title, .why-title, .contact-content .contact-title { margin-bottom: clamp(2.75rem, 2.3rem + 2vw, 4.25rem); } .project-title h2, .certificates-title h2, .education-title h2, .about-title h2, .skills-title h2, .why-title h2, .contact-content .contact-title h2 { letter-spacing: 0.02em; margin-bottom: 14px; } .project-title p, .certificates-title p, .education-title p, .about-title p, .skills-title p, .why-title p, .contact-content .contact-title p { color: rgba(229, 229, 229, 0.66); font-size: 1.02rem; max-width: 46ch; margin-left: auto; margin-right: auto; } /* ---- Hero: separate content from background with a soft elevated glow ---- */ [data-theme="light"] .FirstElement { position: relative; } [data-theme="light"] .FirstElement::before { content: ""; position: absolute; /* FIX: previously "inset: -10% -10% auto -10%" pushed this pseudo-element 10% past the LEFT and RIGHT edges of .FirstElement. Since .FirstElement has no overflow clipping, that extra 10% became real horizontal overflow on the document (this glow only exists in light theme, which is why the gap only showed up there). Keeping the vertical bleed (top -10%, height 120%) but pinning left/right to 0 removes the overflow with no visible change to the glow itself. */ inset: -10% 0 auto 0; height: 120%; background: radial-gradient(720px 420px at 30% 20%, rgba(250, 204, 21, 0.20), transparent 65%); pointer-events: none; z-index: 0; overflow: hidden; } [data-theme="light"] .FirstElement .container { position: relative; } [data-theme="light"] .FirstElement .profile-photo { box-shadow: var(--lt-shadow-hover); border-color: var(--lt-surface); } /* ---- Availability badge: premium pill instead of washed-out tint ---- */ [data-theme="light"] .badge { background: var(--lt-surface); border: 1px solid var(--lt-border); color: var(--lt-text-secondary); box-shadow: var(--lt-shadow-sm); } [data-theme="light"] .badge-available { color: #15803d; border-color: rgba(34, 197, 94, 0.32); background: linear-gradient(180deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.05)); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px -8px rgba(34, 197, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); } [data-theme="light"] .badge-available:hover { border-color: rgba(34, 197, 94, 0.45); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 10px 22px -8px rgba(34, 197, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6); } [data-theme="light"] .badge-dot, [data-theme="light"] .badge-dot::after { background: var(--lt-success); } [data-theme="light"] .badge-dot { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16), 0 0 8px 1px rgba(34, 197, 94, 0.5); } /* ---- CTA buttons: stronger surfaces, real elevation on hover ---- */ [data-theme="light"] .btn-group .btn { background-color: var(--lt-surface); border-color: var(--lt-border); color: var(--lt-text); box-shadow: var(--lt-shadow-sm); } [data-theme="light"] .btn-group .btn:hover, [data-theme="light"] .btn-group .btn:focus-visible { border-color: var(--lt-accent); color: var(--lt-accent-ink); box-shadow: var(--lt-shadow-hover); } [data-theme="light"] .btn-group .btn.btn-primary { border-color: var(--lt-accent); background: linear-gradient(180deg, #fde68a, var(--lt-accent)); color: #1a1a1a; } [data-theme="light"] .btn-group .btn.btn-primary:hover, [data-theme="light"] .btn-group .btn.btn-primary:focus-visible { color: #1a1a1a !important; border-color: var(--lt-accent) !important; } [data-theme="light"] .btn-group .btn.btn-secondary { border-color: rgba(250, 204, 21, 0.6); background-color: #fffbeb; color: var(--lt-accent-ink); } [data-theme="light"] .btn-group .btn.btn-ghost { background-color: transparent; border-color: var(--lt-border); color: var(--lt-text-secondary); } [data-theme="light"] .btn-whatsapp { background-color: #f0fdf4; border-color: #22C55E; color: #15803d; } [data-theme="light"] .btn-whatsapp:hover, [data-theme="light"] .btn-whatsapp:focus-visible { border-color: #22C55E !important; color: #15803d !important; background-color: #dcfce7 !important; box-shadow: 0 12px 28px rgba(34, 197, 94, 0.22) !important; } [data-theme="light"] .btn-resume { background-color: #fffbeb; border-color: var(--lt-accent); color: var(--lt-accent-ink); } [data-theme="light"] .btn-resume:hover, [data-theme="light"] .btn-resume:focus-visible { border-color: var(--lt-accent) !important; color: #4b3a05 !important; background-color: var(--lt-accent) !important; box-shadow: 0 12px 28px rgba(250, 204, 21, 0.35) !important; } /* ---- Section backgrounds: alternate very subtle tint for rhythm/separation ---- */ [data-theme="light"] .FirstElement, [data-theme="light"] .about-area, [data-theme="light"] .skills-content, [data-theme="light"] .stats-content, [data-theme="light"] .project-content, [data-theme="light"] .certificates-content, [data-theme="light"] .why-content, [data-theme="light"] .contact-content, [data-theme="light"] .education-content { background-color: transparent; } [data-theme="light"] .why-card::before { display: none; } /* ---- Layered surfaces / cards: white + border + soft shadow (not flat) ---- */ [data-theme="light"] .project, [data-theme="light"] .wid-card, [data-theme="light"] .skill-card, [data-theme="light"] .stat-card, [data-theme="light"] .contact-card, [data-theme="light"] .why-card, [data-theme="light"] .cert-entry-card, [data-theme="light"] .edu-entry-card, [data-theme="light"] .info-card, [data-theme="light"] .process-step, [data-theme="light"] .featured-project { background-color: var(--lt-surface); border: 1px solid var(--lt-border); color: var(--lt-text); box-shadow: var(--lt-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; } [data-theme="light"] .project:hover, [data-theme="light"] .project:focus-within, [data-theme="light"] .wid-card:hover, [data-theme="light"] .wid-card:focus-within, [data-theme="light"] .why-card:hover, [data-theme="light"] .why-card:focus-within, [data-theme="light"] .skill-card:hover, [data-theme="light"] .skill-card:focus-within, [data-theme="light"] .contact-card:hover, [data-theme="light"] .contact-card:focus-visible, [data-theme="light"] .info-card:hover, [data-theme="light"] .info-card:focus-within, [data-theme="light"] .stat-card:hover, [data-theme="light"] .stat-card:focus-within, [data-theme="light"] .process-step:hover, [data-theme="light"] .featured-project:hover, [data-theme="light"] .cert-entry:hover .cert-entry-card, [data-theme="light"] .cert-entry:focus-within .cert-entry-card, [data-theme="light"] .edu-entry:hover .edu-entry-card, [data-theme="light"] .edu-entry:focus-within .edu-entry-card { border-color: var(--lt-accent); box-shadow: var(--lt-shadow-hover); } /* ---- New premium-pass components: trust strip, process steps, featured project, project badges — themed to match the light palette instead of inheriting dark-mode glass/white defaults. ---- */ [data-theme="light"] .trust-strip { border-color: var(--lt-border); } [data-theme="light"] .trust-strip-list li { color: var(--lt-text-secondary); } [data-theme="light"] .trust-strip-list i { color: var(--lt-accent-ink); } [data-theme="light"] .process-title p, [data-theme="light"] .process-step p { color: var(--lt-text-secondary); } [data-theme="light"] .process-step h3 { color: var(--lt-text); } [data-theme="light"] .process-step-number { color: rgba(146, 112, 10, 0.35); } [data-theme="light"] .process-step:not(:last-child)::after { background: linear-gradient(90deg, rgba(250, 204, 21, 0.5), transparent); } [data-theme="light"] .featured-project-visual { background: radial-gradient(480px 320px at 20% 10%, rgba(250, 204, 21, 0.14), transparent 65%), #F3F4F6; } [data-theme="light"] .featured-project-browser { background: #ffffff; border-color: var(--lt-border); } [data-theme="light"] .featured-project-browser-bar { background: #F3F4F6; border-color: var(--lt-border); } [data-theme="light"] .featured-project-browser-sidebar { background: #FAFAFA; border-color: var(--lt-border); } [data-theme="light"] .featured-project-browser-sidebar span, [data-theme="light"] .featured-project-browser-row { background: #E5E7EB; } [data-theme="light"] .featured-project-body h3 { color: var(--lt-text); } [data-theme="light"] .featured-project-overview, [data-theme="light"] .featured-project-columns p { color: var(--lt-text-secondary); } [data-theme="light"] .featured-project-columns { border-color: var(--lt-border); } [data-theme="light"] .featured-project-columns h4 { color: var(--lt-accent-ink); } [data-theme="light"] .featured-project-tag { color: #1a1a1a; } [data-theme="light"] .featured-project-highlights li { color: var(--lt-text); } [data-theme="light"] .featured-project-highlights i { color: var(--lt-accent-ink); } [data-theme="light"] .project-badge { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.3); color: #15803d; } [data-theme="light"] .cert-entry-card::before, [data-theme="light"] .cert-entry-card::after, [data-theme="light"] .edu-entry-card::before, [data-theme="light"] .edu-entry-card::after { display: none; } [data-theme="light"] .cert-entry-marker-inner, [data-theme="light"] .edu-entry-marker-inner { background: var(--lt-surface); border: 1px solid var(--lt-border); color: var(--lt-accent-ink); box-shadow: var(--lt-shadow-sm); } [data-theme="light"] .cert-entry:hover .cert-entry-marker-inner, [data-theme="light"] .cert-entry:focus-within .cert-entry-marker-inner, [data-theme="light"] .edu-entry:hover .edu-entry-marker-inner, [data-theme="light"] .edu-entry:focus-within .edu-entry-marker-inner { background: var(--lt-accent); color: #4b3a05; border-color: var(--lt-accent); } [data-theme="light"] .cert-entry:not(:last-child)::before, [data-theme="light"] .edu-entry:not(:last-child)::before { background: var(--lt-border); } [data-theme="light"] .edu-entry-status.status-complete { color: var(--lt-accent-ink); background: #fffbeb; border-color: rgba(146, 112, 10, 0.3); } [data-theme="light"] .edu-entry-status.status-active { color: #15803d; background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.3); } [data-theme="light"] .section-divider-icon { color: var(--lt-accent-ink); background: var(--lt-surface); border-color: var(--lt-border); box-shadow: var(--lt-shadow-sm); } [data-theme="light"] .section-divider-line { background: linear-gradient(90deg, transparent, var(--lt-border) 50%, transparent); } [data-theme="light"] .cert-verify-btn { border-color: var(--lt-accent); color: var(--lt-accent-ink); } [data-theme="light"] .cert-verify-btn:hover, [data-theme="light"] .cert-verify-btn:focus-visible { background: var(--lt-accent); color: #4b3a05; } [data-theme="light"] .tag { background: #fffbeb; color: var(--lt-accent-ink); } [data-theme="light"] .filter-btn { border-color: var(--lt-border); color: var(--lt-text-secondary); background: var(--lt-surface); } [data-theme="light"] .filter-btn:hover, [data-theme="light"] .filter-btn:focus-visible { border-color: var(--lt-accent); color: var(--lt-accent-ink); } [data-theme="light"] .filter-btn.active { background: var(--lt-accent); border-color: var(--lt-accent); color: #3a2c04; } /* ---- Social icons everywhere: real contrast, clear hover ---- */ [data-theme="light"] .profile-text .social a, [data-theme="light"] .footer-social a, [data-theme="light"] .floating-social a, [data-theme="light"] .social-icon-link { background: var(--lt-surface); border: 1px solid var(--lt-border); color: var(--lt-text-secondary); box-shadow: var(--lt-shadow-sm); } [data-theme="light"] .profile-text .social a:hover, [data-theme="light"] .profile-text .social a:focus-visible, [data-theme="light"] .footer-social a:hover, [data-theme="light"] .footer-social a:focus-visible, [data-theme="light"] .floating-social a:hover, [data-theme="light"] .floating-social a:focus-visible, [data-theme="light"] .social-icon-link:hover, [data-theme="light"] .social-icon-link:focus-visible { color: #3a2c04; background: var(--lt-accent); border-color: var(--lt-accent); box-shadow: 0 10px 24px rgba(250, 204, 21, 0.3); } /* The floating rail is `position: fixed` directly over the page background (not sitting on a card), and in light mode that background is near-white — so the shared social-icon treatment above (white fill + hairline border + a barely-there shadow) all but disappears here, regardless of which section happens to be scrolled behind it. Give it a visibly tinted fill, a firmer border, darker icon color, and a real shadow so it stays legible everywhere on the page. */ [data-theme="light"] .floating-social a { background: #F3F4F6; border-color: rgba(17, 24, 39, 0.14); color: var(--lt-text); box-shadow: var(--lt-shadow); } [data-theme="light"] .social-icon-link::after { background: var(--lt-text); color: #fff; } [data-theme="light"] .social-icon-link::before { border-top-color: var(--lt-text); } [data-theme="light"] .profile-text .social a::after { background: var(--lt-text); color: #fff; } [data-theme="light"] .profile-text .social a::before { border-top-color: var(--lt-text); } [data-theme="light"] .floating-social a::after { background: var(--lt-text); color: #fff; } [data-theme="light"] .floating-social-line { background: var(--lt-border); } [data-theme="light"] .contact-card-icon { background: rgba(250, 204, 21, 0.12); color: var(--lt-accent-ink); } [data-theme="light"] .contact-card:hover .contact-card-icon, [data-theme="light"] .contact-card:focus-visible .contact-card-icon { background: var(--lt-accent); color: #3a2c04; } [data-theme="light"] .contact-card-whatsapp .contact-card-icon { background: rgba(34, 197, 94, 0.12); color: #15803d; } [data-theme="light"] .contact-card-whatsapp:hover .contact-card-icon, [data-theme="light"] .contact-card-whatsapp:focus-visible .contact-card-icon { background: #22C55E; color: #0d1f13; } /* ---- Form fields ---- */ [data-theme="light"] .contact input, [data-theme="light"] .contact textarea { background: var(--lt-surface); border: 1px solid var(--lt-border); color: var(--lt-text); box-shadow: var(--lt-shadow-sm); } [data-theme="light"] .contact input::placeholder, [data-theme="light"] .contact textarea::placeholder { color: #9ca3af; } [data-theme="light"] .contact input:focus, [data-theme="light"] .contact textarea:focus { border-color: var(--lt-accent); box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.25); } [data-theme="light"] .contact .submit { background: var(--lt-text); color: #fff; } [data-theme="light"] .contact .submit:hover, [data-theme="light"] .contact .submit:focus-visible { background: var(--lt-accent); color: #3a2c04; } /* ---- Chrome: back-to-top, scroll progress, footer, loader ---- */ [data-theme="light"] .back-to-top { background: var(--lt-surface); border-color: var(--lt-border); color: var(--lt-accent-ink); box-shadow: var(--lt-shadow); } [data-theme="light"] .scroll-progress { background: linear-gradient(90deg, var(--lt-accent), #f59e0b); } [data-theme="light"] .footer, [data-theme="light"] .footer-main { background-color: var(--lt-surface); color: var(--lt-text); border-top: 1px solid var(--lt-border); } [data-theme="light"] .footer-bottom { border-top-color: var(--lt-border); color: var(--lt-text-secondary); } [data-theme="light"] .page-loader { background: var(--lt-bg); } [data-theme="light"] .cursor-glow { background: radial-gradient(circle, rgba(250, 204, 21, 0.12) 0%, rgba(250, 204, 21, 0) 70%); } [data-theme="light"] .wid-icon, [data-theme="light"] .why-icon, [data-theme="light"] .info-icon, [data-theme="light"] .stat-icon { background: rgba(250, 204, 21, 0.12); color: var(--lt-accent-ink); } [data-theme="light"] .wid-card:hover .wid-icon, [data-theme="light"] .why-card:hover .why-icon, [data-theme="light"] .info-card:hover .info-icon, [data-theme="light"] .stat-card:hover .stat-icon { background: var(--lt-accent); color: #3a2c04; } [data-theme="light"] .stat-number { color: var(--lt-accent-ink); } /* ========================================================================== Multi-page restructure additions - .about-more: native
disclosure for the Home page's trimmed About section (keeps the full bio one click away without lengthening the homepage scroll). - .contact-cta: compact closing section on Home pointing to the new dedicated Contact page. Both reuse the same tokens, radii and easing already defined above so they read as part of the same design system, not a bolt-on. ========================================================================== */ .about-more { margin-top: 18px; } .about-more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; color: #fed700; padding: 6px 0; transition: color 0.25s ease, gap 0.25s ease; } .about-more summary::-webkit-details-marker { display: none; } .about-more summary::before { content: "\f078"; /* fa-chevron-down */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.75em; transition: transform 0.3s var(--ease-premium, ease); } .about-more[open] summary::before { transform: rotate(180deg); } .about-more summary:hover, .about-more summary:focus-visible { gap: 12px; } .about-more ul { color: #fff; text-align: justify; margin-top: 14px; } .about-more ul li { list-style-type: disc; margin-bottom: 10px; margin-left: 20px; } .about-more a { color: #fed700; text-decoration: underline; } [data-theme="light"] .about-more summary { color: var(--lt-accent-ink); } [data-theme="light"] .about-more ul, [data-theme="light"] .about-more ul li { color: var(--lt-text); } [data-theme="light"] .about-more a { color: var(--lt-accent-ink); } /* ---- Contact CTA (Home page closer) ---- */ .contact-cta { padding: var(--space-section-y) 0; } .contact-cta-inner { max-width: 720px; margin: 0 auto; text-align: center; background: var(--surface-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: clamp(2rem, 1.6rem + 2vw, 3.25rem) clamp(1.25rem, 1rem + 1.2vw, 2.5rem); box-shadow: var(--shadow-md); } .contact-cta-inner h2 { font-size: var(--fs-h2); color: #fed700; margin-bottom: 12px; } .contact-cta-inner p { color: #e5e5e5; margin-bottom: 24px; max-width: 56ch; margin-left: auto; margin-right: auto; } .contact-cta-inner .btn-group { justify-content: center; } /* Single, stronger primary CTA (Resume button removed) — bigger padding and type size than the standard .btn-primary so it reads as the one clear action in this closing section, not just another button in a row. */ .contact-cta-btn-group { margin-top: 8px; } .contact-cta-btn-group .btn-lg { padding: 17px 38px; font-size: 1.05rem; box-shadow: 0 18px 40px -12px rgba(254, 215, 0, 0.55), var(--shadow-sm); } .contact-cta-btn-group .btn-lg i { font-size: 18px; } .contact-cta-btn-group .btn-lg:hover, .contact-cta-btn-group .btn-lg:focus-visible { box-shadow: 0 22px 48px -12px rgba(254, 215, 0, 0.65), var(--shadow-sm); } /* Email / GitHub / LinkedIn row sits below the CTA with clear breathing room, reusing the same premium icon-link component from the Contact page so the two pages share one consistent "how to reach me" pattern. */ .contact-cta-social { margin: 30px auto 0; gap: 18px; } .contact-cta-social .social-icon-link { width: 48px; height: 48px; font-size: 19px; } [data-theme="light"] .contact-cta-inner { background: var(--lt-surface); border-color: var(--lt-border); box-shadow: var(--lt-shadow); } [data-theme="light"] .contact-cta-inner h2 { color: var(--lt-accent-ink); } [data-theme="light"] .contact-cta-inner p { color: var(--lt-text-secondary); }