/* ───────────────────────────────────────────── globals.css — All global styles for the portfolio. CUSTOMIZATION: Edit config.js (not this file) to change colors, fonts, animations, and features. This file provides fallback defaults — config.js overrides them at runtime. ───────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Barlow+Condensed:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500&display=swap'); /* ── THEME VARIABLES (dark default) ────────── These CSS custom properties drive all colors. config.js overrides these at runtime via inline styles on . The -rgb variants provide R,G,B channels for Tailwind's opacity modifier syntax (e.g., bg-skin-text/50). ─────────────────────────────────────────────── */ :root { --bg-primary: #161616; /* Near-black background */ --bg-secondary: #10232A; /* Deep dark teal surface */ --bg-tertiary: #1c2e35; /* Cards — teal-tinted dark */ --border-primary: #3D4D55; /* Blue-gray borders */ --border-subtle: #2a3a42; /* Subtle teal dividers */ --border-accent: #4a5a62; /* Accent borders */ --text-primary: #D3C3B9; /* Warm beige headings */ --text-secondary: #A79E9C; /* Warm gray body */ --text-tertiary: #7a7270; /* Muted warm captions */ --text-muted: #3D4D55; /* Ghost text — blue-gray */ --text-faint: #6a7a82; /* Tag text */ --hover-text: #B58863; /* Hover — warm amber */ --btn-bg: #B58863; /* Warm amber button */ --btn-text: #161616; /* Dark button text */ --btn-hover-bg: #a07650; /* Deeper amber hover */ --nav-bg: rgba(22,22,22,0.92); /* Near-black navbar */ --scrollbar-thumb: #3D4D55; /* Blue-gray scrollbar */ --cursor-color: rgba(181,136,99,1); /* Amber cursor */ --cursor-ring: rgba(181,136,99,0.35); /* Amber cursor ring */ --cursor-ring-hover-bg: rgba(181,136,99,0.04); /* RGB channels for Tailwind opacity modifier support */ --bg-primary-rgb: 22, 22, 22; --bg-secondary-rgb: 16, 35, 42; --bg-tertiary-rgb: 28, 46, 53; --text-primary-rgb: 211, 195, 185; --border-primary-rgb: 61, 77, 85; --text-muted-rgb: 61, 77, 85; } /* ── LIGHT THEME ───────────────────────────── Activated by toggling the theme button in the navbar. Sets data-theme="light" on . ─────────────────────────────────────────────── */ html[data-theme="light"] { --bg-primary: #F2E9E4; --bg-secondary: #e8ddd6; --bg-tertiary: #ddd0c8; --border-primary: #C9ADA7; --border-subtle: #d8c4be; --border-accent: #b89e98; --text-primary: #22223B; --text-secondary: #4A4E69; --text-tertiary: #6a6d84; --text-muted: #C9ADA7; --text-faint: #8a7e7a; --hover-text: #22223B; --btn-bg: #4A4E69; --btn-text: #F2E9E4; --btn-hover-bg: #22223B; --nav-bg: rgba(242,233,228,0.92); --scrollbar-thumb: #C9ADA7; --cursor-color: rgba(34,34,59,1); --cursor-ring: rgba(34,34,59,0.25); --cursor-ring-hover-bg: rgba(34,34,59,0.04); /* RGB channels for Tailwind opacity modifier support */ --bg-primary-rgb: 242, 233, 228; --bg-secondary-rgb: 232, 221, 214; --bg-tertiary-rgb: 221, 208, 200; --text-primary-rgb: 34, 34, 59; --border-primary-rgb: 201, 173, 167; --text-muted-rgb: 201, 173, 167; } /* ── RESET ─────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── BASE ──────────────────────────────── */ html { scroll-behavior: smooth; } body { font-family: 'Barlow', sans-serif; cursor: none; overflow-x: hidden; background: var(--bg-primary); color: var(--text-primary); transition: background 0.3s ease, color 0.3s ease; } /* Deep space gradient overlay behind content */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(16,35,42,0.25) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 80% 80%, rgba(61,77,85,0.15) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 50% 50%, rgba(181,136,99,0.05) 0%, transparent 50%); pointer-events: none; z-index: 0; } html[data-theme="light"] body::before { background: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(201,173,167,0.12) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 80% 80%, rgba(74,78,105,0.06) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 50% 50%, rgba(34,34,59,0.03) 0%, transparent 50%); } a, button, [role="button"] { cursor: none; border-color: var(--border-primary); transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease; } a:hover, button:hover, [role="button"]:hover { background-color: rgba(var(--text-primary-rgb), 0.25); } a.nav-link:hover, a.nav-logo:hover { background-color: transparent; } a.primary-btn:hover { background: #a07650 !important; color: #161616 !important; } html[data-theme="light"] a.primary-btn:hover { background: #22223B !important; color: #F2E9E4 !important; } /* ── FEATURE TOGGLE: Custom Cursor ──────── Set CONFIG.features.showCursor = false in config.js to use the default browser cursor instead. ─────────────────────────────────────────────── */ html.no-custom-cursor body, html.no-custom-cursor a, html.no-custom-cursor button, html.no-custom-cursor [role="button"] { cursor: auto; } /* ── SCROLLBAR ─────────────────────────── */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); } ::-webkit-scrollbar-track { background: var(--bg-primary); } /* ── GRAIN OVERLAY ──────────────────────── Film-grain texture effect. Opacity controlled by CONFIG.animations.grainOpacity in config.js. Disable entirely with CONFIG.features.showGrain = false. ─────────────────────────────────────────────── */ html.no-grain body::after { display: none; } body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 200; opacity: 0.55; } /* ── CURSOR ────────────────────────────── */ .cursor-cross { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; } .cursor-cross-inner { width: 24px; height: 24px; transform: translate(-50%, -50%); position: relative; } .cursor-cross-inner::before, .cursor-cross-inner::after { content: ''; position: absolute; background: var(--cursor-color); } .cursor-cross-inner::before { width: 1px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); } .cursor-cross-inner::after { width: 100%; height: 1px; top: 50%; left: 0; transform: translateY(-50%); } .cursor-dot { position: fixed; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--cursor-color); transform: translate(-50%, -50%); pointer-events: none; z-index: 9998; transition: left 0.05s, top 0.05s; } /* ── PARTICLES CANVAS ──────────────────── */ .particles-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.25; } /* ── SCROLL REVEAL CLASSES ──────────────── Elements with .rev, .rev-l, or .rev-r start hidden and animate in when they enter the viewport. Controlled by the useReveal() hook in shared.js. ─────────────────────────────────────────────── */ .rev { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; } .rev.on { opacity: 1; transform: translateY(0); } .rev-l { opacity: 0; transform: translateX(-22px); transition: opacity 0.6s ease, transform 0.6s ease; } .rev-l.on { opacity: 1; transform: translateX(0); } .rev-r { opacity: 0; transform: translateX(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .rev-r.on { opacity: 1; transform: translateX(0); } /* ── TIMELINE FILL ─────────────────────── */ .tl-fill { height: 0; transition: height 1.8s ease; } .tl-fill.on { height: 100%; } /* ── MARQUEE ────────────────────────────── Speed controlled by CONFIG.animations.marqueeSpeed. Disable with CONFIG.features.showMarquee = false. ─────────────────────────────────────────────── */ .marquee-track { overflow: hidden; white-space: nowrap; } .marquee-inner { display: inline-block; white-space: nowrap; animation: marquee 18s linear infinite; } /* ── DIVIDERS ──────────────────────────── */ .hairline { border-top: 2px solid var(--border-subtle); } .hairline-v { border-left: 2px solid var(--border-subtle); } /* ── NAV LINK UNDERLINE ───────────────── */ .nav-link { position: relative; padding-bottom: 4px; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--text-primary); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } /* ── NAV DOT ───────────────────────────── */ .nav-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-primary); display: inline-block; } /* ── TAGS ───────────────────────────────── .skill-tag — About section skill pills .etag — Experience primary tags .etag-w — Experience secondary tags ─────────────────────────────────────────────── */ .skill-tag, .etag, .etag-w { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; } .skill-tag { display: inline-block; letter-spacing: 0.1em; padding: 4px 12px; border: 1px solid var(--border-accent); color: var(--text-tertiary); transition: all 0.2s; } .skill-tag:hover { border-color: var(--text-primary); color: var(--text-primary); } .etag { border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent); color: color-mix(in srgb, var(--text-primary) 45%, transparent); } .etag-w { border: 1px solid var(--border-accent); color: var(--text-faint); } .ghlink { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); transition: color 0.2s; } .ghlink:hover { color: var(--text-primary); } /* ── KEYFRAME ANIMATIONS ───────────────── */ @keyframes fadeUp { 0% { opacity: 0; transform: translateY(32px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes dotPulse { 0%, 20% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } } @keyframes scanV { 0% { transform: translateY(-100%); } 100% { transform: translateY(600%); } } @keyframes spinSlow { to { transform: rotate(360deg); } } /* ── ANIMATION UTILITIES ───────────────── */ .anim-fade-up { animation: fadeUp 0.7s ease both; } .anim-fade-up-1 { animation: fadeUp 0.7s 0.10s ease both; } .anim-fade-up-2 { animation: fadeUp 0.7s 0.20s ease both; } .anim-fade-up-3 { animation: fadeUp 0.7s 0.35s ease both; } .anim-fade-up-4 { animation: fadeUp 0.7s 0.50s ease both; } .anim-fade-up-5 { animation: fadeUp 0.7s 0.65s ease both; } .anim-fade-late { animation: fadeIn 1s 1.6s ease both; } .anim-blink { animation: blink 1.4s ease-in-out infinite; } .anim-scan-v { animation: scanV 2.4s linear infinite; } .anim-bounce { animation: bounce2 1.6s ease-in-out infinite; } @keyframes bounce2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* ── MOBILE MENU OPEN — lock scroll ────── */ body.menu-open { overflow: hidden; }