/* ========================================= iIDEA - Visual Core Theme: Not-Too-Dark (Cyber/Industrial) Author: Antigravity ========================================= */ /* Fonts loaded via in HTML — no @import needed */ :root { /* -- Backgrounds ----------------------------------- */ --bg-void: #F3F6FB; /* page base */ --bg-secondary: #FFFFFF; /* card / panel */ --bg-tertiary: #E8EEF7; /* raised surface / input */ /* -- Accents --------------------------------------- */ --accent-primary: #4361ee; /* Trustworthy Blue */ --accent-secondary: #7209b7; /* Royal Purple */ --accent-primary-dim: rgba(67, 97, 238, 0.10); /* tinted surface */ --accent-primary-mid: rgba(67, 97, 238, 0.40); /* mid-opacity accent */ --accent-glow: rgba(67, 97, 238, 0.28); /* glow / shadow */ /* -- Text ------------------------------------------ */ --text-main: #0F172A; --text-muted: #64748B; --text-contrast: #FFFFFF; /* text on colored backgrounds */ /* -- Borders --------------------------------------- */ --border-subtle: rgba(15, 23, 42, 0.08); --border-strong: rgba(15, 23, 42, 0.18); /* -- Glass & Shadows ------------------------------- */ --glass-bg: rgba(0, 0, 0, 0.05); --glass-blur: 10px; --shadow-card: 0 20px 60px rgba(15, 23, 42, 0.08); /* -- Status Colors --------------------------------- */ --success: #22c55e; --success-dim: rgba(34, 197, 94, 0.10); --error: #e53e3e; --error-dim: rgba(229, 62, 62, 0.10); --warning: #f59e0b; /* -- Border Radius --------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* -- Transitions ----------------------------------- */ --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.6s var(--easing-pro); /* -- Motion ---------------------------------------- */ --easing-pro: cubic-bezier(0.22, 1, 0.36, 1); /* -- Typography ------------------------------------ */ --font-head: 'Orbitron', sans-serif; --font-body: 'Rajdhani', sans-serif; /* -- Layout ---------------------------------------- */ --spacing-container: 5vw; --z-header: 2000; --z-overlay: 1500; --menu-text: #0e1624; /* -- RGB channel values (for rgba() usage) --------- */ --accent-primary-rgb: 67, 97, 238; --accent-secondary-rgb: 114, 9, 183; } body.game-mode { /* -- Backgrounds ----------------------------------- */ --bg-void: #050510; --bg-secondary: #0c0c14; --bg-tertiary: #141420; /* -- Accents --------------------------------------- */ --accent-primary: #00FFCC; /* Cyberpunk Cyan */ --accent-secondary: #FF00FF; /* Cyberpunk Neon Pink */ --accent-primary-dim: rgba(0, 255, 204, 0.10); --accent-primary-mid: rgba(0, 255, 204, 0.40); --accent-glow: rgba(0, 255, 204, 0.35); /* -- Text ------------------------------------------ */ --text-main: #FFFFFF; --text-muted: #8892B0; /* -- Borders --------------------------------------- */ --border-subtle: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.16); /* -- Glass & Shadows ------------------------------- */ --glass-bg: rgba(255, 255, 255, 0.05); --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.6); --menu-text: #e6edf8; /* -- RGB channel values (game-mode palette) --------- */ --accent-primary-rgb: 0, 255, 204; --accent-secondary-rgb: 255, 0, 255; } /* Force Light Theme on all sections by default unless Game Mode is active */ body:not(.game-mode) section { background-color: var(--bg-secondary); color: var(--menu-text); } /* Exclude canvas-driven hero sections from the generic light-mode override */ body:not(.game-mode) .instr-hero-section, body:not(.game-mode) .instr-stack-section, body:not(.game-mode) .ab-masters, body:not(.game-mode) .ab-testimonials, body:not(.game-mode) .ab-gateway { background-color: var(--bg-void) !important; } body:not(.game-mode) .architect-journey, body:not(.game-mode) .section-opening, body:not(.game-mode) .section-core { background-color: var(--bg-void) !important; } /* ========================================= Reset & Base ========================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Audit Fix: Global Focus Ring for Keyboard Accessibility */ :focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 4px; } body { background-color: var(--bg-void); color: var(--menu-text); font-family: var(--font-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; opacity: 0; /* JS Fade-in */ visibility: hidden; } body.loaded { opacity: 1; visibility: visible; transition: opacity 0.5s ease; } a { text-decoration: none; color: inherit; cursor: pointer; /* Restored cursor until custom one is added */ } ul { list-style: none; } img { max-width: 100%; display: block; } /* ... existing styles ... */ /* ========================================= Full-Screen Page Loader Dark panel, white logo, geometric HUD, fluid progress bar. Exits by sliding up. ========================================= */ #site-loader { position: fixed; inset: 0; background: #0c0c0c; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } /* Full-screen background SVG � subtle cross-hair and diagonal lines */ #loader-bg-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Rotated-square diamonds, centered via CSS transform. GSAP owns the full transform (centering + rotation). CSS sets position only. */ .l-diamond { position: absolute; top: 50%; left: 50%; pointer-events: none; } .l-diamond-sm { width: min(34vmin, 290px); height: min(34vmin, 290px); border: 1px solid rgba(255, 255, 255, 0.07); } .l-diamond-lg { width: min(70vmin, 600px); height: min(70vmin, 600px); border: 1px solid rgba(255, 255, 255, 0.032); } /* HUD corner brackets */ .l-corner { position: absolute; width: clamp(22px, 2.8vw, 40px); height: clamp(22px, 2.8vw, 40px); pointer-events: none; } .l-corner-tl { top: clamp(22px, 4vw, 52px); left: clamp(22px, 4vw, 52px); border-top: 1px solid rgba(255, 255, 255, 0.38); border-left: 1px solid rgba(255, 255, 255, 0.38); } .l-corner-tr { top: clamp(22px, 4vw, 52px); right: clamp(22px, 4vw, 52px); border-top: 1px solid rgba(255, 255, 255, 0.38); border-right: 1px solid rgba(255, 255, 255, 0.38); } .l-corner-bl { bottom: clamp(22px, 4vw, 52px); left: clamp(22px, 4vw, 52px); border-bottom: 1px solid rgba(255, 255, 255, 0.38); border-left: 1px solid rgba(255, 255, 255, 0.38); } .l-corner-br { bottom: clamp(22px, 4vw, 52px); right: clamp(22px, 4vw, 52px); border-bottom: 1px solid rgba(255, 255, 255, 0.38); border-right: 1px solid rgba(255, 255, 255, 0.38); } /* Horizontal scan line � GSAP moves it top ? bottom once */ #loader-scan { position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(67, 97, 238, 0.45) 25%, rgba(67, 97, 238, 0.75) 50%, rgba(67, 97, 238, 0.45) 75%, transparent 100%); pointer-events: none; } /* Center stack: logo + progress */ .loader-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(30px, 5vw, 58px); } .loader-logo { width: clamp(150px, 19vw, 250px); height: auto; display: block; } /* Progress group � width matches logo roughly */ .loader-progress-group { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: clamp(160px, 22vw, 300px); } /* 1px track + animated fill */ .loader-bar-track { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.09); position: relative; } .loader-bar-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: rgba(255, 255, 255, 0.88); } /* Small dot that rides the leading edge of the fill */ .loader-bar-dot { position: absolute; right: -1.5px; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background: #fff; } /* Percentage counter */ .loader-pct { font-family: var(--font-head); font-size: clamp(0.5rem, 0.8vw, 0.68rem); color: rgba(255, 255, 255, 0.28); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; } /* Status label � absolute at bottom */ .loader-label { position: absolute; bottom: clamp(18px, 3vw, 42px); left: 50%; transform: translateX(-50%); font-family: var(--font-body); font-size: clamp(0.46rem, 0.68vw, 0.60rem); color: rgba(255, 255, 255, 0.14); letter-spacing: 0.34em; text-transform: uppercase; white-space: nowrap; pointer-events: none; } /* Responsive */ @media (max-width: 768px) { .hero-title { font-size: 10vw; } /* --- Mobile Footer Reset (No Sticky/Reveal) --- */ .site-footer { display: flex; flex-direction: column; } .footer-top-section { margin-bottom: 40vh; box-shadow: none; padding: 60px 24px 50px; } .footer-inner { grid-template-columns: 1fr; gap: 40px; } .footer-links-group { grid-template-columns: 1fr; gap: 40px; } .footer-cta-col { width: 100%; } .footer-cta-btn { width: 100%; height: 46px; } .footer-logo-section { position: fixed; bottom: 0; left: 0; width: 100%; height: 40vh; z-index: 1; } .footer-mega-logo { font-size: 22vw; } .footer-bottom-bar { position: relative; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding-bottom: 24px; } main { margin-bottom: 0; box-shadow: none; } } /* ========================================= Header: The Floating HUD ========================================= */ .site-header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: var(--z-header); display: flex; justify-content: space-between; align-items: center; padding: 0 48px; background: transparent; border-bottom: 1px solid transparent; transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; transform: translateY(-100%); /* JS Slide-in */ } /* Always-on subtle divider — light / game mode variants */ body:not(.game-mode) .site-header { border-bottom-color: rgba(50, 80, 140, 0.12); } body.game-mode .site-header { border-bottom-color: rgba(0, 255, 200, 0.08); box-shadow: 0 1px 0 rgba(0, 255, 200, 0.04); } /* Scrolled state — frosted glass per theme */ .site-header.header--scrolled { backdrop-filter: blur(12px); } body:not(.game-mode) .site-header.header--scrolled { background: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(0, 0, 0, 0.08); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); } body.game-mode .site-header.header--scrolled { background: rgba(6, 10, 18, 0.85); border-bottom-color: rgba(0, 255, 200, 0.08); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); } /* Animated energy divider — bottom of scrolled header */ .site-header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent-primary) 30%, var(--accent-secondary) 50%, var(--accent-primary) 70%, transparent 100%); background-size: 200% 100%; opacity: 0; transition: opacity 0.4s ease; animation: headerEnergyFlow 3.5s linear infinite; animation-play-state: paused; } .site-header.header--scrolled::after { opacity: 1; animation-play-state: running; } @keyframes headerEnergyFlow { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .logo-container { display: flex; align-items: center; position: relative; z-index: var(--z-header); text-decoration: none; cursor: pointer; } /* Dual-logo: switch between black and white SVG per theme */ .logo-img { height: 36px; width: auto; display: block; transition: opacity 0.25s ease; } .logo-img.logo-light { opacity: 0.92; } .logo-img.logo-dark { display: none; opacity: 0.85; } body.game-mode .logo-img.logo-light { display: none; } body.game-mode .logo-img.logo-dark { display: block; } .logo-container:hover .logo-img { opacity: 1; } /* ── Global Fixed Game Mode Toggle ─────────────────────────── */ .game-mode-toggle { width: 48px; height: 26px; background: var(--bg-secondary); border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); position: fixed; bottom: 20px; right: 20px; cursor: pointer; overflow: hidden; display: flex; align-items: center; transition: all var(--transition-base); z-index: 999997; box-shadow: var(--shadow-card); } .gmt-track { width: 100%; height: 100%; position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 5px; } .gmt-thumb { width: 18px; height: 18px; background: var(--text-main); border-radius: 50%; position: absolute; top: 50%; left: 3px; transform: translateY(-50%); transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 2; } .game-mode-toggle.active { border-color: var(--accent-primary); box-shadow: 0 0 14px var(--accent-glow); } .game-mode-toggle.active .gmt-thumb { left: calc(100% - 21px); background: var(--accent-primary); box-shadow: 0 0 8px var(--accent-glow); } .gmt-icon-light, .gmt-icon-neon { font-size: 11px; z-index: 1; user-select: none; transition: opacity var(--transition-base); line-height: 1; } .gmt-icon-neon { opacity: 0.3; } .game-mode-toggle.active .gmt-icon-light { opacity: 0.3; } .game-mode-toggle.active .gmt-icon-neon { opacity: 1; } /* Centered hamburger / close button — always visible above overlay */ .menu-trigger { background: rgba(12, 18, 35, 0.9); border: none; cursor: pointer; position: absolute; left: 50%; transform: translateX(-50%); z-index: var(--z-header); width: 54px; height: 54px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 0; border-radius: 50%; transition: all 0.25s ease; box-shadow: 0 0 20px rgba(0, 255, 200, 0.15); } /* Light mode: white button with soft shadow */ body:not(.game-mode) .menu-trigger { background: #ffffff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); } .menu-trigger:hover { transform: translateX(-50%) scale(1.08); box-shadow: 0 0 0 2px rgba(0, 255, 200, 0.25), 0 0 25px rgba(0, 255, 200, 0.3); } body:not(.game-mode) .menu-trigger:hover { background: #f0f4ff; box-shadow: 0 0 0 2px rgba(26, 115, 255, 0.2), 0 8px 24px rgba(0, 0, 0, 0.12); } .menu-trigger.active { background: rgba(12, 18, 35, 0.95); box-shadow: 0 0 20px rgba(0, 255, 200, 0.15); } .menu-trigger.active .bar { background-color: #fff; } .bar { display: block; width: 26px; height: 2px; background-color: #fff; transition: all 0.25s ease; transform-origin: center; } /* Dark bars on white button in light mode */ body:not(.game-mode) .bar, body:not(.game-mode) .menu-trigger.active .bar { background-color: #0e1626 !important; } /* Hover effect for Closed state only —� skip when menu is open (.active) */ /* Apply CTA */ .btn-apply { background: transparent; border: 1px solid rgba(0, 0, 0, 0.25); color: var(--text-main); padding: 12px 26px; font-family: var(--font-head); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; position: relative; z-index: var(--z-header); transition: all 0.25s ease; white-space: nowrap; } /* Game mode: translucent white border readable against dark hero */ body.game-mode .btn-apply { border-color: rgba(255, 255, 255, 0.4); color: #ffffff; } /* Scrolled: slightly muted (header has frosted bg, so softer border) */ body.game-mode .site-header.header--scrolled .btn-apply { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.05); } .btn-apply:hover { background: linear-gradient(135deg, #00e7c2, #00bfff); color: #000; border-color: transparent; box-shadow: 0 0 12px rgba(0, 255, 200, 0.25), 0 0 30px rgba(0, 255, 200, 0.15); } .btn-apply:active { transform: translateY(1px); } /* -- Unified Button System -------------------------------------------------- Base class + variants. Combine: class="btn btn-primary" Variants: btn-primary, btn-outline, btn-ghost, btn-danger Sizes: btn-sm, btn-lg | Shape: btn-pill ----------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 28px; font-family: var(--font-head); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1.5px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: all var(--transition-base); position: relative; overflow: hidden; white-space: nowrap; line-height: 1; } /* -- Primary: filled accent -- */ .btn.btn-primary { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-contrast); box-shadow: 0 4px 20px var(--accent-glow); } .btn.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px var(--accent-glow); filter: brightness(1.12); color: var(--text-contrast); } /* -- Outline: bordered transparent -- */ .btn.btn-outline { background: transparent; border-color: var(--accent-primary); color: var(--accent-primary); } .btn.btn-outline:hover { background: var(--accent-primary-dim); box-shadow: 4px 4px 0 var(--accent-primary); transform: translate(-2px, -2px); } /* -- Ghost: minimal -- */ .btn.btn-ghost { background: transparent; border-color: var(--border-subtle); color: var(--text-muted); } .btn.btn-ghost:hover { background: var(--border-subtle); border-color: var(--border-strong); color: var(--menu-text); } /* -- Danger: filled red -- */ .btn.btn-danger { background: var(--error); border-color: var(--error); color: var(--text-contrast); box-shadow: 0 4px 20px var(--error-dim); } .btn.btn-danger:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 8px 28px var(--error-dim); } /* -- Shape modifier -- */ .btn.btn-pill { border-radius: var(--radius-pill); } /* -- Size modifiers -- */ .btn.btn-sm { padding: 7px 18px; font-size: 0.74rem; } .btn.btn-lg { padding: 15px 40px; font-size: 0.95rem; } /* -- Disabled state -- */ .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; cursor: not-allowed; } /* Scroll lock when menu is open */ body.menu-open { overflow: hidden; } /* Fullscreen Menu Overlay (Curtain Logic) */ .menu-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 0; background: radial-gradient(circle at 80% 20%, rgba(26, 115, 255, 0.06), transparent 40%), radial-gradient(circle at 20% 80%, rgba(100, 120, 200, 0.05), transparent 50%), linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%); z-index: 999; overflow: hidden; } body.game-mode .menu-overlay { background: radial-gradient(circle at 80% 20%, rgba(0, 255, 200, 0.08), transparent 40%), radial-gradient(circle at 20% 80%, rgba(120, 0, 255, 0.06), transparent 50%), linear-gradient(180deg, #05080f 0%, #02040a 100%); } /* Cyber grid texture inside overlay */ .menu-overlay::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 80px 80px; opacity: 0.25; pointer-events: none; z-index: 0; } /* Background geometric graphic */ .menu-bg-gfx { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); width: 60vw; max-width: 700px; aspect-ratio: 1; pointer-events: none; z-index: 0; opacity: 1; } .menu-bg-gfx svg { width: 100%; height: 100%; } /* NAVIGATION label bar */ .menu-header-bar { position: absolute; top: 0; left: 0; right: 0; height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--spacing-container) 0 calc(var(--spacing-container) + 4vw); border-bottom: 1px solid rgba(67, 97, 238, 0.08); z-index: 2; pointer-events: none; } .menu-header-label { font-family: var(--font-head); font-size: 10px; letter-spacing: 0.30em; color: var(--accent-primary); opacity: 0.65; } .menu-header-count { font-family: var(--font-head); font-size: 9px; letter-spacing: 0.20em; color: var(--text-muted); } /* Internal Grid */ .menu-content-grid { width: 100%; height: 100%; display: grid; /* Adjusted for massive canvas presence (35% links, 65% visuals) */ grid-template-columns: 45% 55%; padding: 80px 4vw 0; position: relative; z-index: 1; } .menu-nav { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: 90px; gap: 18px; max-width: 600px; position: relative; z-index: 50; } /* Hover glow pulse — game mode only */ @keyframes navPulse { 0% { text-shadow: 0 0 6px rgba(0, 255, 200, 0.2); } 50% { text-shadow: 0 0 14px rgba(0, 255, 200, 0.35); } 100% { text-shadow: 0 0 6px rgba(0, 255, 200, 0.2); } } /* Menu items � initial visibility is controlled entirely by JS (gsap.set) */ .menu-item { font-family: var(--font-head); font-size: 44px; font-weight: 500; color: var(--menu-text); text-transform: uppercase; text-decoration: none; line-height: 1.2; cursor: pointer; position: relative; display: inline-block; white-space: nowrap; /* never wraps � keeps hover on one line */ letter-spacing: 1px; transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease; } /* Game mode: brighter base color for better contrast on dark overlay */ body.game-mode .menu-item { color: #e6eef8; } /* // marker � absolutely positioned LEFT of the text, zero layout impact */ .menu-item::before { content: '//'; font-family: monospace; font-size: 0.38em; letter-spacing: 3px; color: var(--accent-secondary); position: absolute; right: calc(100% + 0.7vw); /* stays left of text regardless of text length */ top: 50%; transform: translateY(-50%) translateX(-6px); opacity: 0; transition: opacity 0.22s ease, transform 0.22s ease; white-space: nowrap; pointer-events: none; } /* Underbar accent line */ .menu-item::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0%; height: 1px; background: var(--accent-primary); transition: width 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: none; } /* Active page highlight */ .menu-item.active { opacity: 1; font-weight: 600; } body:not(.game-mode) .menu-item.active { color: #1a73ff; } body.game-mode .menu-item.active { color: #00e7c2; } /* Focus ring */ .menu-item:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 4px; border-radius: 2px; } /* Dim siblings � only kicks in after JS clears GSAP's inline opacity */ .menu-nav:hover .menu-item { opacity: 0.85; } /* Hovered item */ .menu-nav .menu-item:hover { opacity: 1; transform: translateX(6px); letter-spacing: 1px; } /* Light mode hover */ body:not(.game-mode) .menu-nav .menu-item:hover { color: #1a73ff; text-shadow: 0 0 6px rgba(26, 115, 255, 0.18); } /* Game mode hover — full glow + pulse */ body.game-mode .menu-nav .menu-item:hover { color: #00e7c2; text-shadow: 0 0 8px rgba(0, 255, 200, 0.35), 0 0 18px rgba(0, 255, 200, 0.15); } body.game-mode .menu-nav .menu-item:hover { text-shadow: 0 0 10px rgba(0, 255, 200, 0.45), 0 0 22px rgba(0, 255, 200, 0.25), 0 0 40px rgba(0, 255, 200, 0.15); animation: navPulse 2s infinite ease-in-out; } .menu-nav .menu-item:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); } .menu-nav .menu-item:hover::after { width: 100%; } /* Image Reveal Section */ .menu-image-container { display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; /* Ensure no background overrides so canvas shows */ background: transparent; } .menu-image-wrapper { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; background: radial-gradient(circle, rgba(0, 120, 255, 0.04), transparent 70%); filter: drop-shadow(0 0 25px rgba(0, 120, 255, 0.15)); } body.game-mode .menu-image-wrapper { background: radial-gradient(circle, rgba(0, 255, 200, 0.06), transparent 70%); filter: drop-shadow(0 0 40px rgba(0, 255, 200, 0.2)); } #nav-canvas { width: 100%; height: 100%; display: block; pointer-events: auto; will-change: transform; position: relative; z-index: 10; } /* --- Responsive Menu (Mobile) --- */ @media (max-width: 768px) { .site-header { padding: 0 24px; } /* Hide "Apply Now" button — header is logo + menu-trigger only on mobile */ .btn-apply { display: none; } /* Move hamburger out of absolute-center into flex-end */ .menu-trigger { position: relative; left: auto; transform: none; margin-left: auto; } /* Adjust hover — no translateX offset on mobile */ .menu-trigger:hover { transform: scale(1.08); } /* Stronger mobile scrolled backgrounds */ body:not(.game-mode) .site-header.header--scrolled { background: rgba(255, 255, 255, 0.95); } body.game-mode .site-header.header--scrolled { background: rgba(6, 10, 18, 0.95); } .menu-content-grid { grid-template-columns: 1fr; padding-top: 80px; padding-bottom: 60px; padding-left: 0; padding-right: 0; } .menu-image-container { position: absolute; inset: 0; transform: none; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; opacity: 0.35; } .menu-nav { padding-left: 32px; gap: 4px; position: relative; z-index: 2; max-width: 100%; } .menu-item { font-size: clamp(14px, 5vw, 22px); line-height: 1.3; white-space: nowrap; word-break: normal; padding: 10px 0; min-height: 48px; display: flex; align-items: center; } .menu-item:hover { background: rgba(255, 255, 255, 0.04); } .menu-item::before { right: calc(100% + 12px); } } /* ========================================= Hero Section (Dummy) ========================================= */ .hero-section { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6)), url('../images/iidea_main_banner.jpeg'); background-size: cover; background-position: center; } .hero-title { font-family: var(--font-head); font-size: 5vw; text-align: center; line-height: 1.1; margin-bottom: 20px; } .hero-title span { display: block; color: var(--accent-primary); } .hero-subtitle { font-size: 1.5rem; color: var(--text-muted); max-width: 600px; text-align: center; } /* ========================================= Page Transition � Shutter Gate Two panels close from top and bottom, meeting at center. Neon edges converge, flash at seam, then fly apart to reveal new page. ========================================= */ .t-shutter { position: fixed; left: 0; width: 100%; z-index: 9500; pointer-events: none; background: #0d0d0d; will-change: transform; } .t-shutter-top { top: 0; height: 55vh; } .t-shutter-bot { bottom: 0; height: 55vh; } /* Neon discharge line that flashes at center when shutters meet */ .t-seam { position: fixed; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(67, 97, 238, 0.5) 10%, #4361ee 30%, #a855f7 50%, #7209b7 70%, rgba(114, 9, 183, 0.5) 90%, transparent 100%); z-index: 9502; pointer-events: none; opacity: 0; box-shadow: 0 0 10px rgba(67, 97, 238, 1.0), 0 0 28px rgba(67, 97, 238, 0.7), 0 0 55px rgba(114, 9, 183, 0.5); } /* ========================================= Main Content Wrapper (Barba) ========================================= */ main { position: relative; z-index: 10; background-color: var(--bg-void); /* Removed large margin-bottom since footer is no longer fixed behind */ min-height: 100vh; } /* ========================================= Footer: Two-Part Structure ========================================= */ .site-footer { position: relative; width: 100%; /* background: transparent; so the fixed logo shows through */ background-color: transparent; z-index: 1; display: block; } /* ══════════════════════════════════════════════════════════════ SITE FOOTER The footer uses a "reveal" effect: the top section (z-index 10) sits above a fixed logo section. As the user scrolls, the top slides off revealing the watermark logo beneath. ══════════════════════════════════════════════════════════════ */ .site-footer { position: relative; width: 100%; background-color: transparent; z-index: 1; display: block; } /* ── Part 1: Top Section (links + CTA) ─────────────────────── */ .footer-top-section { padding: clamp(60px, 8vw, 100px) clamp(24px, 5vw, 80px) clamp(50px, 6vw, 80px); background: radial-gradient(circle at 82% 28%, var(--accent-primary-dim), transparent 44%), var(--bg-secondary); position: relative; z-index: 10; margin-bottom: 50vh; /* Must match .footer-logo-section height */ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.14); } /* ── Inner grid: 3 link cols + CTA card ────────────────────── */ .footer-inner { max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: clamp(40px, 6vw, 80px); align-items: start; } .footer-links-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 60px); } /* ── Column header ──────────────────────────────────────────── */ .footer-col-title { font-family: var(--font-head); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-muted); opacity: 0.6; margin-bottom: 18px; font-weight: 600; } .footer-col ul { list-style: none; padding: 0; margin: 0; } /* ── Links ──────────────────────────────────────────────────── */ .footer-link { display: block; font-family: var(--font-body); font-size: 16px; line-height: 2.1; font-weight: 400; color: var(--menu-text); text-decoration: none; position: relative; width: fit-content; transition: color var(--transition-fast), transform var(--transition-fast); } .footer-link::after { content: ''; position: absolute; bottom: 3px; left: 0; width: 0; height: 1.5px; background: var(--accent-primary); transition: width 0.3s var(--easing-pro); } .footer-link:hover { color: var(--accent-primary); transform: translateX(3px); } .footer-link:hover::after { width: 100%; } /* ── CTA Column ─────────────────────────────────────────────── */ .footer-cta-col { width: clamp(260px, 26vw, 420px); } .footer-cta-box { background: var(--glass-bg); border: 1px solid var(--border-strong); border-radius: 6px; padding: 28px; backdrop-filter: blur(var(--glass-blur)); display: flex; flex-direction: column; position: relative; overflow: hidden; } /* Top accent line on CTA card */ .footer-cta-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-primary), transparent); opacity: 0.55; } .footer-cta-title { font-family: var(--font-head); font-size: 19px; font-weight: 500; color: var(--menu-text); margin-bottom: 10px; line-height: 1.3; letter-spacing: 2px; } .footer-cta-sub { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); margin-bottom: 22px; line-height: 1.65; } .footer-cta-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; padding: 0 24px; background: var(--accent-primary); color: var(--text-contrast); border: none; border-radius: 4px; font-family: var(--font-head); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 4px 20px var(--accent-glow); } .footer-cta-btn:hover { transform: scale(1.025); box-shadow: 0 6px 30px var(--accent-glow); filter: brightness(1.1); color: var(--text-contrast); } .footer-cta-micro { margin-top: 14px; text-align: center; } .footer-micro-link { display: inline-block; min-height: 44px; line-height: 44px; font-family: var(--font-body); font-size: 12px; color: var(--text-muted); text-decoration: none; transition: color var(--transition-fast); } .footer-micro-link:hover { color: var(--accent-primary); } /* ── Part 2: Fixed Logo Section ─────────────────────────────── */ .footer-logo-section { position: fixed; bottom: 0; left: 0; width: 100%; height: 50vh; background: radial-gradient(circle at 28% 65%, var(--accent-primary-dim), transparent 42%), var(--bg-void); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 30px; z-index: 1; overflow: hidden; } /* ── Mega Watermark ─────────────────────────────────────────── */ .footer-mega-logo { font-family: var(--font-head); font-size: clamp(120px, 16vw, 260px); font-weight: 900; color: var(--menu-text); opacity: 0.04; line-height: 0.8; text-align: center; width: 100%; pointer-events: none; user-select: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ── Bottom Bar ─────────────────────────────────────────────── */ .footer-bottom-bar { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(24px, 5vw, 80px); position: relative; z-index: 3; } .footer-copy { font-family: var(--font-head); font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-muted); opacity: 0.65; } .footer-credit { display: flex; align-items: center; gap: 14px; font-family: var(--font-head); font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-muted); opacity: 0.65; } /* ── Footer Theme Toggle ────────────────────────────────────── */ .footer-theme-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 4px 10px 4px 5px; cursor: pointer; color: var(--text-muted); font-family: var(--font-head); font-size: 8px; letter-spacing: 1.4px; text-transform: uppercase; transition: all var(--transition-base); opacity: 0.65; } .footer-theme-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); opacity: 1; } .footer-theme-btn.active { border-color: var(--accent-primary); color: var(--accent-primary); opacity: 1; box-shadow: 0 0 10px var(--accent-glow); } .ftb-track { width: 28px; height: 16px; background: var(--bg-tertiary); border-radius: var(--radius-pill); position: relative; border: 1px solid var(--border-strong); flex-shrink: 0; transition: background var(--transition-base), border-color var(--transition-base); } .ftb-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); position: absolute; top: 2px; left: 2px; transition: transform var(--transition-base), background var(--transition-base); } .footer-theme-btn.active .ftb-track { background: var(--accent-primary-dim); border-color: var(--accent-primary); } .footer-theme-btn.active .ftb-thumb { transform: translateX(12px); background: var(--accent-primary); box-shadow: 0 0 6px var(--accent-glow); } .cursor-blink { display: inline-block; width: 8px; height: 18px; background-color: var(--accent-primary); margin-left: 5px; animation: blink 1s infinite step-end; } @keyframes blink { 50% { opacity: 0; } } /* --------------------------------------------------------------- CUSTOM GAMING CURSOR - Native cursor hidden globally via @media (pointer: fine) - #g-cursor positioned via RAF transform (no layout reflow) - CSS handles all looping animations - Velocity-based rotation handled in cursor.js RAF loop VISIBILITY GUARANTEE: The base SVG filter always carries a tight dark drop-shadow. This makes every cursor readable on ANY background � white, black, colored, or gradient � by creating a thin dark halo around all elements. Every hover/click filter rule MUST include the dark shadow prefix, otherwise it would override and lose the contrast. --------------------------------------------------------------- */ /* Shorthand: dark halo shared by every filter rule below */ /* Format: drop-shadow(tight-outline) drop-shadow(soft-diffuse) [+ glow] */ @media (pointer: fine) { html, html * { cursor: none !important; } } /* -- Cursor wrapper ------------------------------------------- */ #g-cursor { position: fixed; top: 0; left: 0; z-index: 999999; /* Max z-index to stay visible over everything */ pointer-events: none; will-change: transform; transition: opacity 0.18s ease; line-height: 0; color: var(--menu-text); /* Feeds currentColor in SVG */ } /* Base SVG: dark shadow applied universally */ #g-cursor svg { display: block; overflow: visible; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 3px rgba(0, 0, 0, 0.4)); } /* Game Mode Neon Glow */ body.game-mode #g-cursor { color: var(--accent-primary); } body.game-mode #g-cursor svg { filter: drop-shadow(0 0 4px var(--accent-primary)) drop-shadow(0 0 8px var(--accent-secondary)) !important; } /* -- transform-box fix for CSS-animated SVG elements --------- */ .c-ring, .c-ring-out, .c-ring-mid, .c-hex-outer, .c-hex-inner, .c-ping { transform-box: fill-box; transform-origin: center; } /* -- HOME � crosshair ring pulse ------------------------------ */ .gc-home .c-ring { animation: gc-ring-pulse 2.4s ease-in-out infinite; } @keyframes gc-ring-pulse { 0%, 100% { transform: scale(1); opacity: 0.80; } 50% { transform: scale(1.08); opacity: 1.00; } } /* Hover: dark shadow + white glow */ .gc-home.gc-hover svg { filter: drop-shadow(0 0 0.8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.55)); } /* Click: ring flash outward */ .gc-home.gc-click .c-ring { animation: gc-ring-click 0.32s ease-out forwards; } @keyframes gc-ring-click { 0% { transform: scale(1); opacity: 1.0; } 40% { transform: scale(1.8); opacity: 0.35; } 100% { transform: scale(1); opacity: 0.80; } } /* -- ABOUT � blueprint compass --------------------------------- */ /* Needle rotation handled in JS; CSS only does hover glow */ .gc-about.gc-hover svg { filter: drop-shadow(0 0 0.8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 6px rgba(67, 97, 238, 0.60)); } /* -- PROGRAMS � dual hex spin ---------------------------------- */ .gc-programs .c-hex-outer { animation: gc-hex-cw 7s linear infinite; } .gc-programs .c-hex-inner { animation: gc-hex-ccw 4.5s linear infinite; } @keyframes gc-hex-cw { to { transform: rotate(360deg); } } @keyframes gc-hex-ccw { to { transform: rotate(-360deg); } } .gc-programs.gc-hover svg { filter: drop-shadow(0 0 0.8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 7px rgba(168, 85, 247, 0.60)); } /* Click: hex spins faster */ .gc-programs.gc-click .c-hex-outer { animation-duration: 0.9s; } /* -- INSTRUCTORS � blade (JS velocity rotation) ---------------- */ /* Blade SVG already has dark fill outlines on each element. Dark shadow is still applied from the base rule. */ .gc-instructors.gc-hover svg { filter: drop-shadow(0 0 0.8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.45)); } .gc-instructors.gc-click svg { filter: drop-shadow(0 0 0.8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.85)) brightness(1.3); } /* -- ADMISSIONS � counter-rotating rings ----------------------- */ .gc-admissions .c-ring-out { animation: gc-ring-cw 9s linear infinite; } .gc-admissions .c-ring-mid { animation: gc-ring-ccw 5.5s linear infinite; } @keyframes gc-ring-cw { to { transform: rotate(360deg); } } @keyframes gc-ring-ccw { to { transform: rotate(-360deg); } } .gc-admissions.gc-hover svg { filter: drop-shadow(0 0 0.8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 6px rgba(245, 158, 11, 0.55)); } .gc-admissions.gc-click svg { filter: drop-shadow(0 0 0.8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(245, 158, 11, 0.95)) brightness(1.4); } /* -- CONTACT � radar (sweep handled by JS RAF) ----------------- */ .gc-contact .c-ping { animation: gc-ping 1.8s ease-out infinite; } @keyframes gc-ping { 0% { transform: scale(1); opacity: 0.95; } 70% { transform: scale(2.8); opacity: 0; } 100% { transform: scale(2.8); opacity: 0; } } .gc-contact.gc-hover svg { filter: drop-shadow(0 0 0.8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 7px rgba(16, 185, 129, 0.60)); } .gc-contact.gc-click svg { filter: drop-shadow(0 0 0.8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(16, 185, 129, 0.95)); } /* -------------------------------------------------------------- */ /* Responsive */ @media (max-width: 768px) { .hero-title { font-size: 10vw; } .footer-top-section { margin-bottom: 40vh; } .footer-logo-section { height: 40vh; } .footer-inner { grid-template-columns: 1fr; gap: 40px; } .footer-links-group { grid-template-columns: repeat(3, 1fr); } .footer-cta-col { width: 100%; } .footer-mega-logo { font-size: 26vw; } } /* ========================================= CINEMATIC ABOUT PAGE - "PERSISTENT WORLD" ========================================= */ /* 1. World Space Core */ .world-track { width: 100%; height: 600vh; /* Calibrated for breathing room */ position: relative; background: var(--bg-void); } .pinned-world { width: 100vw; height: 100vh; position: fixed; /* GSAP will handle pinning, but fixed ensures layer stack */ top: 0; left: 0; overflow: hidden; perspective: 1000px; z-index: 0; /* Behind Header */ } /* 2. Z-Index Layering Strategy */ .bg-layer { z-index: 1; } .chapter-layer { z-index: 10; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; } /* Maximum HUD layer */ /* 3. Dynamic Backgrounds (Layer 0) */ .bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; } .bg-void { background: radial-gradient(circle at center, #ffffff 0%, #f3f4f6 100%); /* Light Void */ opacity: 1; } .bg-wireframe { /* Abstract Tech Grid */ background-image: linear-gradient(rgba(67, 97, 238, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 97, 238, 0.1) 1px, transparent 1px); background-size: 50px 50px; } .bg-render { /* Fallback for "Rendered Environment" */ background: radial-gradient(circle at bottom right, rgba(114, 9, 183, 0.1), transparent 60%), radial-gradient(circle at top left, rgba(67, 97, 238, 0.1), transparent 60%); background-color: #fff; } .bg-blueprint { /* Blueprint Style */ background-color: var(--accent-primary); background-image: linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px); background-size: 100px 100px; color: white; /* Text inversion for this section */ } /* 4. Phase 1: The Awakening (Hero) */ .hero-wordmark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-head); font-weight: 900; font-size: 25vw; line-height: 0.8; color: transparent; -webkit-text-stroke: 2px var(--text-main); /* Video Texture Fallback: Animated Gradient */ background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary)); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; animation: gradientFlow 5s ease infinite; transform-origin: center center; } @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* 5. Phase 2: The Intention (Narrative) */ .narrative-block { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 0; } .glitch-text { font-size: 4vw; font-weight: 700; color: var(--accent-secondary); position: relative; font-family: var(--font-head); } .parallax-text { font-size: 1.5rem; color: var(--text-muted); margin-top: 20px; } /* 6. Phase 3: The Vision (Card Flip) */ .card-perspective { position: absolute; top: 50%; right: 10%; transform: translateY(-50%); width: 400px; height: 600px; perspective: 2000px; opacity: 0; } .flip-card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; /* Rotation handled by GSAP */ } .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.05); } .card-back { transform: rotateY(180deg); background: var(--accent-primary); color: var(--bg-void); /* Better contrast against accent */ } .card-back h3, .card-back p { color: var(--bg-void); } .vision-render-placeholder { width: 100%; height: 60%; background: #f3f4f6; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; border-radius: 10px; font-family: monospace; color: var(--text-muted); } /* 7. Phase 4: The Sankalp */ .sankalp-ui { position: absolute; bottom: 20%; left: 10%; font-family: var(--font-head); opacity: 0; } .obj-list { margin: 20px 0; font-family: monospace; font-size: 1.2rem; color: var(--accent-primary); } .final-message { font-size: 3vw; font-weight: 700; line-height: 1.1; max-width: 800px; color: var(--menu-text); } /* Mobile Responsiveness */ @media (max-width: 1024px) { .world-track { height: auto; } .pinned-world { position: relative; height: auto; overflow: visible; } .hero-wordmark { position: relative; font-size: 20vw; transform: none; top: auto; left: auto; padding: 100px 0; } .chapter-layer { position: relative; height: auto; padding: 50px 20px; opacity: 1 !important; transform: none !important; } .card-perspective { position: relative; width: 100%; height: 400px; right: auto; top: auto; transform: none; margin: 50px 0; } .flip-card { transform: none !important; } .card-back { transform: none; margin-top: 20px; position: relative; height: 400px; } } /* ========================================= MANIFESTO "RITE OF PASSAGE" (ABOUT PAGE) ========================================= */ /* 1. Track & Pinning */ .manifesto-track { width: 100%; height: 800vh; /* ~11s scroll pacing */ background-color: #000; /* Pitch Black Start */ position: relative; z-index: 1; } .pinned-manifesto { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; overflow: hidden; background-color: var(--bg-void); color: var(--menu-text); } /* 2. Layer Architecture */ .narrative-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; /* Hidden by default */ pointer-events: none; transition: opacity 0.5s ease; } .narrative-layer.active { opacity: 1; pointer-events: auto; } /* 3. Layer 1: The Descent (Black Void) */ .layer-descent { background-color: #000; z-index: 10; } .manifesto-text { font-family: var(--font-head); font-size: 4vw; text-align: center; line-height: 1.2; } .highlight { color: var(--accent-primary); } .hero-logo-large { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 25vw; font-family: var(--font-head); font-weight: 900; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.1); opacity: 0; /* Controlled by GSAP */ } /* 4. Layer 2: The Intention (Blueprint) */ .layer-intention { background-color: #050505; z-index: 9; } .bg-blueprint-grid { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-image: linear-gradient(rgba(67, 97, 238, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 97, 238, 0.1) 1px, transparent 1px); background-size: 60px 60px; transform: perspective(500px) rotateX(60deg); opacity: 0.3; } .manifesto-question { font-size: 5vw; color: var(--accent-secondary); margin-top: 20px; } /* 5. Layer 3: The Hard Truth (Vision Card) */ .layer-truth { z-index: 11; } .vision-card-container { perspective: 2000px; width: 400px; height: 600px; } .vision-card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; } .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; background: #111; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); } .face-back { transform: rotateY(180deg); background: var(--accent-primary); border: none; } .card-title { font-family: var(--font-head); font-size: 3rem; margin-bottom: 20px; } .card-footer { position: absolute; bottom: 30px; font-family: monospace; font-size: 0.8rem; letter-spacing: 2px; color: rgba(255, 255, 255, 0.5); } /* 6. Layer 4: The Construction (Factory) */ .layer-construction { z-index: 8; background: #000; } .svg-factory-draw { position: absolute; width: 100%; height: 100%; opacity: 0.5; } .mission-log { background: rgba(0, 0, 0, 0.8); border: 1px solid var(--accent-primary); padding: 30px; font-family: monospace; color: var(--accent-primary); z-index: 12; } .mission-log ul { list-style: none; padding: 0; } .mission-log li { margin: 10px 0; } /* 7. Layer 5: The Resolution */ .layer-resolution { background: #000; z-index: 20; } .final-statement { font-size: 3vw; text-align: center; color: var(--menu-text); } .pulse-lightbulb { width: 50px; height: 50px; background: var(--accent-primary); border-radius: 50%; margin-top: 50px; box-shadow: 0 0 20px var(--accent-primary); animation: pulseHeart 1s infinite ease-in-out; } @keyframes pulseHeart { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 0.8; } } /* Footer Override for Manifesto */ /* ========================================= "THE ARCHITECT'S JOURNEY" (ABOUT PAGE) ========================================= */ /* 1. Track & Layout */ .architect-journey { width: 100%; /* No fixed height, sections stack naturally */ position: relative; position: relative; background-color: var(--bg-void); color: var(--menu-text); overflow: hidden; } .journey-section { min-height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; } /* 2. Themes */ .theme-purple { background-color: #240046; /* Deep Atmospheric Purple */ color: white; } .theme-dark { background-color: #101010; /* Desaturated Workspace */ color: var(--text-muted); } .theme-white { background-color: #ffffff; color: var(--menu-text); } .theme-purple-matte { background-color: #3c096c; /* Matte Finish */ color: white; } /* 3. Section 1: The Opening (Deep Purple) */ .section-opening { height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; background-color: var(--bg-void); z-index: 2; } .digital-rain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%); background-size: 100% 20px; animation: rainFall 2s linear infinite; opacity: 0.3; pointer-events: none; } @keyframes rainFall { 0% { background-position: 0 0; } 100% { background-position: 0 100px; } } .hero-wordmark-massive { font-family: var(--font-head); font-size: 20vw; font-weight: 900; line-height: 0.8; color: var(--menu-text); margin-bottom: 20px; } .narrative-text { font-size: 1.5rem; max-width: 600px; text-align: center; margin: 0 auto; font-weight: 300; } /* (legacy block removed — see .what_iidea_do section below) */ /* 4. Section 2: The Reveal (Desaturated) */ .section-reveal { min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: var(--bg-void); position: relative; z-index: 3; } .bg-workspace { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Placeholder for workspace image */ background: radial-gradient(circle at center, #1a1a1a 0%, var(--bg-void) 100%); z-index: -1; } .typing-text { font-family: var(--font-head); font-size: 4vw; color: var(--accent-primary); margin-bottom: 20px; } /* 5. Section 3: The Core (Split Screen) */ .section-core { min-height: 100vh; display: flex; align-items: center; padding: 0 5vw; background-color: var(--bg-void); position: relative; z-index: 4; } .split-container { display: flex; width: 100%; height: 100vh; } .split-side { width: 50%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; } .left-side { background: var(--bg-void); overflow: hidden; } .right-side { padding: 5vw; background: #fff; color: var(--menu-text); } .vision-image { width: 100%; height: 100%; background-color: #333; /* Fallback */ display: flex; justify-content: center; align-items: center; } .img-placeholder { color: rgba(255, 255, 255, 0.2); font-family: var(--font-head); font-size: 2vw; } .text-swap-container { position: relative; width: 100%; height: 300px; /* Constrain height for swap overlap */ } .text-state { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; } .text-state.active { opacity: 1; transform: translateY(0); } .text-state h3 { font-family: var(--font-head); font-size: 3rem; color: var(--accent-secondary); margin-bottom: 20px; } /* 6. Section 4: The Stakes (White + Terminal) */ .terminal-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, rgba(114, 9, 183, 0.05) 1px, transparent 1px); background-size: 40px 100%; z-index: 0; } .sankalp-list { list-style: none; padding: 0; margin-top: 40px; z-index: 1; position: relative; } .objective-item { font-family: var(--font-head); font-size: 2.5vw; color: var(--text-muted); /* Inactive state */ margin-bottom: 20px; transition: color 0.3s ease, transform 0.3s ease; cursor: default; } .objective-item.active { color: var(--accent-primary); transform: translateX(20px); } .marker { margin-right: 15px; color: var(--accent-secondary); } .section-label { font-family: monospace; color: var(--text-muted); letter-spacing: 2px; } /* 7. Section 5: The Resolution (Matte Purple) */ .final-quote { font-family: var(--font-head); font-size: 4vw; text-align: center; margin-bottom: 40px; } .final-logo-pulse { display: flex; justify-content: center; } .bulb-icon { width: 60px; height: 60px; background: white; border-radius: 50%; box-shadow: 0 0 30px white; animation: bulbPulse 2s infinite ease-in-out; } @keyframes bulbPulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 0.8; } } /* Footer Fix */ /* We need the footer to be visible normally on this page or revealed. The plan says "Resolution slides up to reveal pinned footer". So Footer needs z-index: -1 and sticky behavior, or Resolution needs margin-bottom to reveal. Let's use a simpler approach: Footer is static at bottom, but Resolution covers it initially? Actually, "Slides up to reveal" implies footer is fixed at bottom z-index -1. */ .fixed-footer { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1; /* Below Resolution (z-index 10+) */ } .section-resolution { z-index: 20; /* Above footer */ position: relative; margin-bottom: 50vh; /* Space for footer? No, we will animate Y transform */ background-color: #3c096c; /* Ensure opacity */ } /* ========================================= WHY IIDEA EXISTS — Mission Briefing ========================================= */ .wid-section { height: 100dvh; background: var(--bg-void); position: relative; overflow: hidden; /* z-index must be above all ab-stack-wrap sticky elements (max --si:16) so the section is visible when GSAP pins it (position:fixed). */ z-index: 20; } .wid-scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(67, 97, 238, 0.02) 2px, rgba(67, 97, 238, 0.02) 4px); pointer-events: none; z-index: 50; } .wid-icon { position: absolute; width: clamp(100px, 10vw, 150px); aspect-ratio: 1; z-index: 5; pointer-events: auto; will-change: transform, opacity; } .wid-icon canvas { display: block; cursor: crosshair; } .wid-icon-tl { top: 12%; left: 10%; } .wid-icon-tr { top: 12%; right: 10%; } .wid-icon-bl { bottom: 12%; left: 10%; } .wid-icon-br { bottom: 12%; right: 10%; } .wid-heading { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; pointer-events: none; gap: 0; } .wid-word { display: block; font-family: var(--font-head); font-size: clamp(3rem, 10vw, 11rem); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--menu-text); line-height: 1.0; will-change: opacity; } .wid-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; pointer-events: none; padding: 0 5vw; } .wid-line { font-family: var(--font-body); font-size: clamp(1rem, 2.2vw, 1.8rem); line-height: 1.5; color: var(--text-muted); text-align: center; max-width: 780px; margin-bottom: 1.2rem; pointer-events: auto; will-change: opacity, transform; } .wid-line-hl { font-family: var(--font-head); font-size: clamp(1.1rem, 2.5vw, 2.2rem); font-weight: 700; color: var(--accent-primary); margin-top: 2rem; } body.game-mode .wid-line-hl { text-shadow: 0 0 24px var(--accent-glow); } .wid-robot { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: clamp(120px, 12vw, 190px); height: clamp(170px, 18vw, 280px); z-index: 8; pointer-events: none; will-change: opacity, transform; } .wid-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0.5; pointer-events: none; z-index: 25; font-family: var(--font-head); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); transition: opacity 0.3s; } .wid-hint.hidden { opacity: 0; } .wid-hint-arrow { font-size: 1.1rem; animation: wid-bounce 1.5s ease-in-out infinite; } @keyframes wid-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (max-width: 768px) { .wid-word { font-size: clamp(2.2rem, 15vw, 5rem); letter-spacing: 0.1em; } .wid-icon { width: clamp(65px, 16vw, 90px); } .wid-icon-tl { top: 6%; left: 4%; } .wid-icon-tr { top: 6%; right: 4%; } .wid-icon-bl { bottom: 6%; left: 4%; } .wid-icon-br { bottom: 6%; right: 4%; } .wid-robot { display: none; } .wid-line { font-size: clamp(0.9rem, 4vw, 1.3rem); margin-bottom: 0.7rem; } .wid-line-hl { font-size: clamp(1rem, 4.5vw, 1.6rem); margin-top: 1rem; } .wid-text { padding: 0 6vw; } } @media (min-width: 769px) and (max-width: 1024px) { .wid-word { font-size: clamp(3rem, 9vw, 7rem); } .wid-icon { width: clamp(80px, 9vw, 120px); } .wid-line { font-size: 1.3rem; } } .what_iidea_do { height: 100vh; height: 100svh; background-color: var(--bg-void); position: relative; overflow: hidden; z-index: 1; } .what_iidea_do_content { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; } /* --- HEADING WRAPPER (centered via flexbox parent, GSAP controls scale/opacity) --- */ .wid-heading-wrap { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; pointer-events: none; z-index: 30; will-change: transform, opacity; } .why-heading { font-family: var(--font-head); font-size: clamp(3rem, 10vw, 11rem); font-weight: 700; letter-spacing: 0.2em; text-align: center; text-transform: uppercase; color: var(--menu-text); margin: 0; line-height: 0.95; white-space: normal; display: flex; flex-direction: column; align-items: center; gap: 0; } .wh-word { display: block; line-height: 1.0; will-change: transform, opacity; } /* --- TEXT LAYER (centered via flexbox, visibility controlled by JS) --- */ .central-text-layer { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 10; pointer-events: none; text-align: center; visibility: hidden; } .emerging-text { position: relative; width: 90%; max-width: 820px; text-align: center; } .reveal-line { font-family: var(--font-body); font-size: 1.8rem; line-height: 1.4; color: var(--text-muted); margin-bottom: 1.5rem; pointer-events: auto; will-change: transform, opacity; opacity: 0; transform: translateY(26px); } .highlight-line { font-family: var(--font-head); font-size: 2.2rem; font-weight: 700; color: var(--accent-primary); margin-top: 3rem; } body.game-mode .highlight-line { text-shadow: 0 0 24px var(--accent-glow); } /* --- ICONS LAYER --- */ .floating-icons-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 15; pointer-events: none; } .icon-wrap { position: absolute; pointer-events: auto; width: clamp(110px, 11vw, 155px); aspect-ratio: 1; will-change: transform, opacity; } .icon-1 { top: 15%; left: 15%; } .icon-2 { top: 20%; right: 15%; } .icon-3 { bottom: 20%; left: 15%; } .icon-4 { bottom: 15%; right: 20%; } .icon-wrap canvas { display: block; cursor: crosshair; } /* --- SCROLL HINT --- */ .wid-scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0.5; pointer-events: none; z-index: 25; transition: opacity var(--transition-base); } .wid-scroll-hint.hidden { opacity: 0; } .wid-hint-label { font-family: var(--font-head); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); } .wid-hint-arrow { font-size: 1.1rem; color: var(--text-muted); animation: wid-bounce 1.5s ease-in-out infinite; } @keyframes wid-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* --- ROBOT --- */ .wid-robot-wrap { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: clamp(130px, 14vw, 200px); height: clamp(180px, 20vw, 290px); z-index: 18; pointer-events: none; opacity: 0; will-change: transform, opacity; } /* Mobile Overrides */ @media (max-width: 768px) { /* About Hero */ section.about_iidea { min-height: 100vh; padding: 0 5vw; } .about_iidea_content { padding-top: 15vh; max-width: 100%; } .about_iidea_content blockquote { font-size: clamp(16px, 4.5vw, 22px); max-width: 95%; } .hero-container { font-size: clamp(10vw, 15vw, 20vw); transform: translateY(-110%); } #about-3d-canvas { opacity: 0.3; width: 100%; left: 0; right: auto; } /* What IIDEA Do */ .wid-robot-wrap { display: none; } .why-heading { font-size: clamp(2.2rem, 15vw, 5rem); letter-spacing: 0.1em; } .icon-wrap { width: clamp(60px, 14vw, 85px); } .icon-1 { top: 6%; left: 3%; } .icon-2 { top: 6%; right: 3%; } .icon-3 { bottom: 6%; left: 3%; } .icon-4 { bottom: 6%; right: 3%; } .central-text-layer { width: 94%; } .reveal-line { font-size: clamp(0.95rem, 4.5vw, 1.4rem); margin-bottom: 0.75rem; } .highlight-line { font-size: clamp(1.1rem, 5vw, 1.8rem); margin-top: 1.5rem; } } /* .about_hero_background_1, .about_hero_background_2 { position: absolute; bottom: 0; display: block; width: 35%; height: 50%; z-index: 0; } img.about_hero_background_1 { right: 0; z-index: 2; } .about_hero_background_2 { left: 0; } */ /* ================================================================= ABOUT PAGE — HUD Command Interface Inspired by iIDEA Instructor page design language ================================================================= */ /* ── Shared HUD tokens ─────────────────────────────────────────── */ .ab-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-primary); margin-bottom: 1.2rem; } .ab-accent { color: var(--accent-primary); } /* HUD corner brackets (reused by hero + gateway) */ .ab-corner { position: absolute; width: clamp(18px, 2.2vw, 32px); height: clamp(18px, 2.2vw, 32px); opacity: 0; z-index: 4; pointer-events: none; } .ab-corner--tl { top: 1.5rem; left: 1.5rem; border-top: 2px solid var(--accent-primary); border-left: 2px solid var(--accent-primary); } .ab-corner--tr { top: 1.5rem; right: 1.5rem; border-top: 2px solid var(--accent-primary); border-right: 2px solid var(--accent-primary); } .ab-corner--bl { bottom: 1.5rem; left: 1.5rem; border-bottom: 2px solid var(--accent-primary); border-left: 2px solid var(--accent-primary); } .ab-corner--br { bottom: 1.5rem; right: 1.5rem; border-bottom: 2px solid var(--accent-primary); border-right: 2px solid var(--accent-primary); } /* Skill chips (same aesthetic as instructor page) */ .ab-skill-cluster { position: absolute; bottom: 5.5rem; right: var(--spacing-container); display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-end; z-index: 4; pointer-events: none; } .ab-skill-chip { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-primary); background: rgba(67, 97, 238, 0.08); border: 1px solid rgba(67, 97, 238, 0.22); border-radius: 2px; padding: 0.22rem 0.6rem; opacity: 0; } /* ── HERO HUD overlay ──────────────────────────────────────────── */ .ab-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; padding: 1.5rem; } .ab-hud-tl, .ab-hud-tr, .ab-hud-bl, .ab-hud-br { position: absolute; display: flex; flex-direction: column; gap: 0.28rem; opacity: 0; } .ab-hud-tl { top: 5.2rem; left: 1.5rem; padding-left: 0.6rem; border-left: 1px solid rgba(67, 97, 238, 0.3); } .ab-hud-tr { top: 5.2rem; right: 1.5rem; align-items: flex-end; padding-right: 0.6rem; border-right: 1px solid rgba(67, 97, 238, 0.3); } .ab-hud-bl { bottom: 1.5rem; left: 1.5rem; padding-left: 0.6rem; border-left: 1px solid rgba(67, 97, 238, 0.3); } .ab-hud-br { bottom: 1.5rem; right: 1.5rem; align-items: flex-end; padding-right: 0.6rem; border-right: 1px solid rgba(67, 97, 238, 0.3); } .ab-hud-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-primary); } .ab-hud-status { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(67, 97, 238, 0.7); display: flex; align-items: center; gap: 0.4rem; } .ab-hud-sub { font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .ab-hud-coord, .ab-hud-version { font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } /* HUD progress bars */ .ab-hud-bar-wrap { display: flex; flex-direction: column; gap: 0.18rem; } .ab-hud-bar-label { font-size: 0.52rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(67, 97, 238, 0.65); } .ab-hud-bar-track { width: 88px; height: 2px; background: rgba(67, 97, 238, 0.15); position: relative; overflow: hidden; } .ab-hud-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent-primary); transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1); } .ab-hud-blink { animation: ab-blink 1.4s steps(1) infinite; color: #00e676; } @keyframes ab-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ════════════════════════════════════════════════════════════════ SCROLL CARD STACK (correct two-level wrapper pattern) RULE: NEVER apply transform to position:sticky elements. Doing so creates a new stacking context that breaks z-index ordering, overflow clipping, and Safari sticky. Structure per section: .ab-stack-wrap ← position:sticky, z-index (NO transform ever) .ab-stack-card ← border-radius, overflow:hidden, scale() goes here
← height:100%, position:relative ════════════════════════════════════════════════════════════════ */ /* Outer sticky frame — scroll space + z-index, nothing else */ .ab-stack-wrap { position: sticky; top: 0; height: 100dvh; z-index: var(--si, 10); /* set inline per wrapper */ } /* Inner card — GSAP fades + blurs this on scroll. overflow:hidden clips content during dissolve. translateZ(0) creates a compositing layer for blur perf. */ .ab-stack-card { position: relative; width: 100%; height: 100%; overflow: hidden; will-change: filter, opacity; transform: translateZ(0); } /* Depth dissolve waterline — gradient overlay that sweeps bottom→top, creating a "sinking underwater" boundary effect on the outgoing section */ .ab-depth-waterline { position: absolute; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 25%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.03) 75%, transparent 100%); } /* Light theme: use white-based waterline so it blends with light backgrounds */ body:not(.game-mode) .ab-depth-waterline { background: linear-gradient(to top, rgba(243, 246, 251, 0.85) 0%, rgba(243, 246, 251, 0.55) 25%, rgba(243, 246, 251, 0.25) 50%, rgba(243, 246, 251, 0.06) 75%, transparent 100%); } /* Sections inside wrappers: fill the card, no min-height override */ .ab-stack-wrap .ab-hero, .ab-stack-wrap .ab-metrics, .ab-stack-wrap .ab-masters, .ab-stack-wrap .ab-paths, .ab-stack-wrap .ab-testimonials, .ab-stack-wrap .ab-gateway { position: relative !important; height: 100% !important; min-height: unset !important; top: unset !important; } /* Variable-height sections: center their content in the 100vh card */ .ab-stack-wrap .ab-metrics, .ab-stack-wrap .ab-paths { display: flex; flex-direction: column; justify-content: center; } /* ════════════════════════════════════════════════════════════════ MOBILE: Break the sticky card-stack into normal document flow. On mobile, content inside sections (paths cards, testimonials, icons) is taller than 100vh. Sticky + fixed height clips it. ════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Remove sticky — let sections stack in reading order */ .ab-stack-wrap { position: relative !important; height: auto !important; z-index: auto !important; } /* Let content expand naturally — no overflow clipping */ .ab-stack-card { height: auto !important; overflow: visible !important; will-change: auto; filter: none !important; opacity: 1 !important; } /* Sections: auto height so they size to their content */ .ab-stack-wrap .ab-hero, .ab-stack-wrap .ab-metrics, .ab-stack-wrap .ab-masters, .ab-stack-wrap .ab-paths, .ab-stack-wrap .ab-testimonials, .ab-stack-wrap .ab-gateway, .ab-stack-wrap .wid-section { height: auto !important; min-height: auto !important; } /* Hero still needs viewport height on mobile */ .ab-stack-wrap .ab-hero { min-height: 100dvh !important; } /* Gateway: min-height instead of fixed height so it sizes naturally */ .ab-stack-wrap .ab-gateway { min-height: 80vh !important; } /* Metrics: ensure proper padding on mobile */ .ab-stack-wrap .ab-metrics { padding: 4rem var(--spacing-container, 5vw) 5rem !important; } /* Paths: no flex-centering needed, content flows naturally */ .ab-stack-wrap .ab-paths { display: block !important; padding: 4rem var(--spacing-container, 5vw) 5rem !important; } /* Testimonials: proper padding and auto height for 3 stacked cards */ .ab-stack-wrap .ab-testimonials { padding: 4rem var(--spacing-container, 5vw) 5rem !important; } /* Hide waterline overlay on mobile (dissolve disabled) */ .ab-depth-waterline { display: none !important; } } /* ── SECTION 1: HERO ───────────────────────────────────────────── */ .ab-hero { height: 100dvh; overflow: hidden; background: var(--bg-void); display: flex; align-items: center; padding: 0 var(--spacing-container); } .ab-hero__canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; } .ab-hero__content { position: relative; z-index: 4; max-width: 820px; } .ab-hero__title { font-size: clamp(4rem, 12vw, 11rem); font-weight: 900; line-height: 0.88; letter-spacing: -0.04em; text-transform: uppercase; color: var(--text-primary); margin: 0 0 2rem; } .ab-hero__title-line { display: block; overflow: hidden; } .ab-hero__title-inner { display: block; transform: translateY(100%); } .ab-hero__sub { font-size: clamp(0.9rem, 1.5vw, 1.15rem); color: var(--text-secondary); line-height: 1.65; max-width: 480px; margin-bottom: 2.5rem; opacity: 0; } .ab-hero__cta { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); border: 1px solid var(--accent-primary); padding: 0.85rem 2rem; text-decoration: none; border-radius: 2px; opacity: 0; transition: background 0.2s, color 0.2s, box-shadow 0.2s; } .ab-hero__cta:hover { background: var(--accent-primary); color: #fff; box-shadow: 0 0 28px rgba(67, 97, 238, 0.4); } .ab-hero__cta svg { transition: transform 0.2s; } .ab-hero__cta:hover svg { transform: translateX(4px); } @media (max-width: 768px) { .ab-hero { align-items: flex-end; padding-bottom: 16vh; } .ab-hud-tl, .ab-hud-tr { display: none; } .ab-hud-bl, .ab-hud-br { display: none; } .ab-skill-cluster { display: none; } .ab-hero__title { font-size: clamp(3.5rem, 16vw, 7rem); } } /* ── SECTION 2: METRICS ────────────────────────────────────────── */ .ab-metrics { position: relative; background: var(--bg-primary); overflow: hidden; padding: 6rem var(--spacing-container) 7rem; } .ab-metrics__canvas { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.06; width: 100%; height: 100%; } .ab-metrics__inner { position: relative; z-index: 1; max-width: 900px; } .ab-metrics__db-header { margin-bottom: 3rem; } .ab-metrics__db-inner { margin-bottom: 0.75rem; } .ab-metrics__db-tag { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-primary); margin-bottom: 0.5rem; } .ab-metrics__db-title { display: block; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; letter-spacing: -0.03em; color: var(--text-primary); } .ab-metrics__db-meta { display: block; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.5rem; } .ab-metrics__db-line { height: 1px; background: linear-gradient(90deg, var(--accent-primary), transparent); opacity: 0.3; margin-top: 1rem; } /* Metric rows */ .ab-metric-row { display: grid; grid-template-columns: 2rem 1fr 1fr auto; align-items: center; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--border-subtle); opacity: 0; } .ab-metric-row:last-child { border-bottom: none; } .ab-metric__index { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; color: rgba(67, 97, 238, 0.45); font-variant-numeric: tabular-nums; } .ab-metric__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-secondary); } .ab-metric__bar-wrap { position: relative; } .ab-metric__bar-track { height: 2px; background: var(--border-subtle); position: relative; overflow: hidden; border-radius: 1px; } .ab-metric__bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--accent-primary), rgba(67, 97, 238, 0.5)); transform-origin: left; border-radius: 1px; } .ab-metric__value { font-size: clamp(2.2rem, 3.5vw, 3.5rem); font-weight: 900; letter-spacing: -0.04em; color: var(--text-primary); min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ab-metric__value-suffix { font-size: 0.38em; color: var(--text-muted); margin-left: 0.1em; } @media (max-width: 768px) { /* Section: full-width, centered content */ .ab-metrics { padding: 3.5rem 0; display: flex; flex-direction: column; justify-content: center; } .ab-metrics__inner { max-width: 100%; padding: 0 24px; } /* Condense header on mobile */ .ab-metrics__db-header { margin-bottom: 1.75rem; } .ab-metrics__db-title { font-size: clamp(1.8rem, 6vw, 2.5rem); } .ab-metrics__db-meta { display: none; /* save space on mobile */ } /* 2×2 grid — clean cells, no background-as-divider hack */ .ab-metrics__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: transparent; border: none; margin-top: 0; } /* Each stat cell: bordered card feel, centered content */ .ab-metric-row { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1rem 1.75rem; gap: 0.4rem; background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); opacity: 0; position: relative; } /* Remove right border from cells in the right column */ .ab-metric-row:nth-child(2n) { border-right: none; } /* Remove bottom border from last row cells */ .ab-metric-row:nth-last-child(-n+2) { border-bottom: none; } /* Accent top-line on each cell */ .ab-metric-row::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--accent-primary); opacity: 0.6; } /* Number — large, bold, accent color */ .ab-metric__value { font-size: clamp(2.8rem, 12vw, 4rem); min-width: unset; text-align: center; color: var(--accent-primary); order: 1; line-height: 1; } .ab-metric__value-suffix { font-size: 0.4em; color: var(--accent-primary); opacity: 0.7; } /* Label — beneath the number */ .ab-metric__label { font-size: 0.6rem; letter-spacing: 0.14em; text-align: center; color: var(--text-muted); order: 2; line-height: 1.5; text-transform: uppercase; } /* Hide index and bar — not needed on mobile */ .ab-metric__index { display: none; } .ab-metric__bar-wrap { display: none; } } /* Game mode: accent-colored accents in mobile grid */ @media (max-width: 768px) { body.game-mode .ab-metric-row::before { background: #00ffcc; } } /* ── SECTION 3: MASTERS ────────────────────────────────────────── */ .ab-masters { position: relative; height: 100vh; overflow: hidden; background: var(--bg-void); } .ab-masters__canvas { position: absolute; inset: 0; z-index: 1; cursor: crosshair; width: 100%; height: 100%; } .ab-masters__overlay { position: absolute; left: var(--spacing-container); top: 50%; transform: translateY(-50%); max-width: 360px; z-index: 3; pointer-events: none; } .ab-masters__overlay a { pointer-events: auto; } .ab-masters__title { font-size: clamp(2rem, 3.8vw, 3.2rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.08; color: var(--text-main); margin: 0 0 1rem; } .ab-masters__sub { font-size: 0.95rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.75rem; } .ab-masters__link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; /* Readable on dark canvas regardless of theme — cyan works on both */ color: #00e5cc !important; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s, gap 0.2s; } .ab-masters__link:hover { gap: 0.7rem; border-bottom-color: #00e5cc; } /* The ab-tag inside the masters section also needs to be light */ .ab-masters .ab-tag { color: var(--text-muted); } .ab-masters__link:hover { gap: 0.7rem; border-bottom-color: var(--accent-primary); } /* Instructor tooltip card */ .ab-masters__card { position: fixed; z-index: 200; pointer-events: none; width: 240px; background: rgba(245, 247, 255, 0.96); border: 1px solid rgba(67, 97, 238, 0.18); border-left: 3px solid var(--accent-primary); border-radius: 3px; padding: 1.1rem 1.3rem; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); opacity: 0; transform: translateY(6px) scale(0.97); transition: opacity 0.18s ease, transform 0.18s ease; } .ab-masters__card.is-visible { opacity: 1; transform: translateY(0) scale(1); } .ab-masters__card-flag { font-size: 1.3rem; display: block; margin-bottom: 0.3rem; } .ab-masters__card-name { font-size: 0.88rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.1rem; } .ab-masters__card-role { font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: 0.55rem; } .ab-masters__card-sep { height: 1px; background: var(--border-subtle); margin-bottom: 0.5rem; } .ab-masters__card-games { list-style: none; margin: 0; padding: 0; } .ab-masters__card-games li { font-size: 0.72rem; color: var(--text-secondary); padding: 0.16rem 0; padding-left: 0.85rem; position: relative; } .ab-masters__card-games li::before { content: '▸'; position: absolute; left: 0; color: var(--accent-primary); font-size: 0.65rem; } .ab-masters__card-link { display: inline-block; margin-top: 0.6rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-primary); text-decoration: none; } @media (max-width: 768px) { .ab-masters__overlay { left: var(--spacing-container); top: auto; bottom: 2.5rem; transform: none; max-width: calc(100% - 2 * var(--spacing-container)); } .ab-masters__title { font-size: clamp(1.6rem, 5.5vw, 2.5rem); } .ab-masters__sub { font-size: 0.85rem; } .ab-masters__card { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; top: auto; width: auto; } } /* ── SECTION 4: PATHS ──────────────────────────────────────────── */ .ab-paths { background: var(--bg-primary); padding: 6rem var(--spacing-container) 7rem; } .ab-paths__header { margin-bottom: 3.5rem; } .ab-paths__meta { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.5rem; } .ab-paths__title { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; letter-spacing: -0.03em; color: var(--text-primary); margin: 0; } .ab-paths__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; } .ab-path-card { position: relative; min-height: 380px; cursor: pointer; overflow: hidden; background: var(--bg-secondary); display: flex; flex-direction: column; transition: background 0.25s; } .ab-path-card+.ab-path-card { border-left: 1px solid var(--border-subtle); } .ab-path-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .ab-path-card:hover::before, .ab-path-card.is-open::before { transform: scaleX(1); } .ab-path-card:hover { background: var(--bg-primary); } .ab-path-card__content { padding: 2.25rem 1.75rem; flex: 1; display: flex; flex-direction: column; } .ab-path-card__index { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em; color: rgba(67, 97, 238, 0.35); margin-bottom: 1.8rem; } .ab-path-card__icon { width: 36px; height: 36px; color: var(--accent-primary); margin-bottom: 1.5rem; opacity: 0.85; } .ab-path-card__persona { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-primary); margin-bottom: 0.6rem; } .ab-path-card__heading { font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.25; margin-bottom: 0.75rem; flex: 1; } .ab-path-card__hook { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1.5rem; } .ab-path-card__trigger { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-primary); opacity: 0.6; transition: opacity 0.2s, gap 0.2s; margin-top: auto; } .ab-path-card:hover .ab-path-card__trigger { opacity: 1; gap: 0.55rem; } /* Expand panel */ .ab-path-card__panel { position: absolute; inset: 0; z-index: 2; background: var(--bg-secondary); padding: 2rem 1.75rem; pointer-events: none; display: flex; flex-direction: column; opacity: 0; transform: translateY(100%); overflow: hidden; border-top: 2px solid var(--accent-primary); } .ab-path-card.is-open .ab-path-card__panel { pointer-events: auto; } .ab-path-card__panel-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1rem; line-height: 1; padding: 0.3rem; transition: color 0.2s; } .ab-path-card__panel-close:hover { color: var(--text-primary); } .ab-path-card__panel-persona { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-primary); margin-bottom: 0.5rem; } .ab-path-card__panel-title { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 1.2rem; } .ab-path-card__panel-list { list-style: none; margin: 0 0 1.5rem; padding: 0; flex: 1; } .ab-path-card__panel-list li { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; padding: 0.45rem 0 0.45rem 1.1rem; border-bottom: 1px solid var(--border-subtle); position: relative; } .ab-path-card__panel-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent-primary); font-size: 0.72rem; } .ab-path-card__panel-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-primary); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.75rem 1.5rem; border-radius: 2px; text-decoration: none; margin-top: auto; transition: opacity 0.2s; } .ab-path-card__panel-cta:hover { opacity: 0.88; } @media (max-width: 1024px) { .ab-paths__grid { grid-template-columns: repeat(2, 1fr); } .ab-path-card+.ab-path-card { border-left: none; } .ab-path-card:nth-child(odd) { border-right: 1px solid var(--border-subtle); } .ab-path-card:nth-child(1), .ab-path-card:nth-child(2) { border-bottom: 1px solid var(--border-subtle); } } @media (max-width: 768px) { .ab-paths__title { font-size: clamp(1.6rem, 6vw, 2.8rem); } .ab-paths__header { margin-bottom: 2rem; } .ab-path-card__heading { font-size: clamp(1rem, 4vw, 1.25rem); } } @media (max-width: 600px) { .ab-paths { padding: 3.5rem var(--spacing-container) 4.5rem; } .ab-paths__grid { grid-template-columns: 1fr; } .ab-path-card+.ab-path-card { border-left: none; border-top: 1px solid var(--border-subtle); } .ab-path-card:nth-child(odd) { border-right: none; } .ab-path-card { min-height: 240px; } .ab-path-card__content { padding: 1.75rem 1.4rem; } } /* ── SECTION 6: GATEWAY ────────────────────────────────────────── */ .ab-gateway { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--bg-primary); } .ab-gateway__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .ab-gateway__vignette { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 25%, var(--bg-primary) 100%); pointer-events: none; } .ab-gateway__content { position: relative; z-index: 3; max-width: 560px; padding: 0 1.5rem; } .ab-gateway__overline { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent-primary); margin-bottom: 1.25rem; opacity: 0; } .ab-gateway__title { font-size: clamp(3rem, 7.5vw, 6.5rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.0; color: var(--text-main); margin: 0 0 1.5rem; opacity: 0; } .ab-gateway__sub { font-size: clamp(0.9rem, 1.4vw, 1.1rem); color: var(--text-muted); line-height: 1.65; margin-bottom: 2.5rem; opacity: 0; } .ab-gateway__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; opacity: 0; } .ab-gateway__cta-primary { display: inline-flex; align-items: center; background: var(--accent-primary); color: #fff; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 1rem 2.25rem; border-radius: 2px; text-decoration: none; transition: box-shadow 0.2s, transform 0.2s; } .ab-gateway__cta-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(67, 97, 238, 0.5); } .ab-gateway__cta-secondary { display: inline-flex; align-items: center; border: 1px solid var(--border-subtle); color: var(--text-main); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 1rem 2.25rem; border-radius: 2px; text-decoration: none; transition: border-color 0.2s, background 0.2s; } .ab-gateway__cta-secondary:hover { border-color: var(--text-muted); background: var(--bg-secondary); } .ab-gateway__urgency { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); opacity: 0; } .ab-gateway__urgency-dot { width: 6px; height: 6px; border-radius: 50%; background: #00e676; flex-shrink: 0; animation: ab-pulse-dot 2s ease-in-out infinite; } @keyframes ab-pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.45; } } @media (max-width: 768px) { .ab-gateway__actions { flex-direction: column; align-items: center; } .ab-gateway__cta-primary, .ab-gateway__cta-secondary { width: 100%; max-width: 280px; justify-content: center; } } /* ── GAME MODE overrides ──────────────────────────────────────── */ body.game-mode .ab-corner--tl, body.game-mode .ab-corner--tr, body.game-mode .ab-corner--bl, body.game-mode .ab-corner--br { border-color: var(--accent-primary); filter: drop-shadow(0 0 4px rgba(0, 255, 204, 0.5)); } body.game-mode .ab-skill-chip { background: rgba(0, 255, 204, 0.06); border-color: rgba(0, 255, 204, 0.2); } body.game-mode .ab-hud-tl, body.game-mode .ab-hud-bl { border-left-color: rgba(0, 255, 204, 0.3); } body.game-mode .ab-hud-tr, body.game-mode .ab-hud-br { border-right-color: rgba(0, 255, 204, 0.3); } body.game-mode .ab-hud-bar-track { background: rgba(0, 255, 204, 0.12); } body.game-mode .ab-hero__cta { border-color: var(--accent-primary); } body.game-mode .ab-hero__cta:hover { background: var(--accent-primary); color: #000; box-shadow: 0 0 30px rgba(0, 255, 204, 0.45); } body.game-mode .ab-metrics { background: var(--bg-void); } body.game-mode .ab-metric__bar-fill { background: linear-gradient(90deg, var(--accent-primary), rgba(0, 255, 204, 0.4)); } body.game-mode .ab-masters__card { background: rgba(8, 10, 20, 0.96); border-left-color: var(--accent-primary); } body.game-mode .ab-masters__card-name { color: var(--accent-primary); } body.game-mode .ab-paths { background: var(--bg-void); } body.game-mode .ab-path-card { background: rgba(0, 255, 204, 0.02); } body.game-mode .ab-path-card:hover { background: rgba(0, 255, 204, 0.04); } body.game-mode .ab-path-card__panel { background: rgba(5, 8, 18, 0.98); } body.game-mode .ab-path-card__panel-cta { background: var(--accent-primary); color: #000; } body.game-mode .ab-gateway__urgency-dot { background: var(--accent-primary); } body.game-mode .ab-gateway__cta-primary { background: var(--accent-primary); color: #000; } body.game-mode .ab-gateway__cta-primary:hover { box-shadow: 0 10px 36px rgba(0, 255, 204, 0.5); } /* Hardcoded blue index numbers — swap to cyan in game mode */ body.game-mode .ab-metric__index { color: rgba(0, 255, 204, 0.4); } body.game-mode .ab-path-card__index { color: rgba(0, 255, 204, 0.35); } body.game-mode .ab-metric-row { border-bottom-color: rgba(0, 255, 204, 0.08); } /* Masters section — game mode overline + sub */ body.game-mode .ab-masters__overline { color: var(--accent-primary); } body.game-mode .ab-masters__sub { color: rgba(255, 255, 255, 0.55); } body.game-mode .ab-masters__title { color: #e8eeff; } body.game-mode .ab-masters__link { color: var(--accent-primary); } body.game-mode .ab-masters__link:hover { border-bottom-color: var(--accent-primary); } /* Paths section — game mode card border highlight */ body.game-mode .ab-paths__grid { border-color: rgba(0, 255, 204, 0.1); } body.game-mode .ab-path-card::before { background: var(--accent-primary); } body.game-mode .ab-path-card+.ab-path-card { border-left-color: rgba(0, 255, 204, 0.08); } body.game-mode .ab-path-card:nth-child(odd) { border-right-color: rgba(0, 255, 204, 0.08); } body.game-mode .ab-path-card:nth-child(1), body.game-mode .ab-path-card:nth-child(2) { border-bottom-color: rgba(0, 255, 204, 0.08); } /* Hero sub text — slightly brighter in game mode */ body.game-mode .ab-hero__sub { color: rgba(200, 220, 255, 0.72); } /* wid-section scanlines — cyan tint in game mode */ body.game-mode .wid-scanlines { background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 204, 0.025) 2px, rgba(0, 255, 204, 0.025) 4px); } /* ── END ABOUT PAGE ───────────────────────────────────────────── */ /* --------------------------------------------------------------- INSTRUCTOR HERO� AAA Command Interface --------------------------------------------------------------- */ .instr-hero-section { position: relative; width: 100%; height: 100vh; overflow: hidden; background: var(--bg-void); display: flex; align-items: center; justify-content: flex-start; } /* Canvas sits behind everything */ .instr-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* Light beams behind silhouette */ .instr-beams { position: absolute; right: 8%; bottom: 0; width: clamp(180px, 28vw, 420px); height: 80%; z-index: 1; pointer-events: none; display: flex; justify-content: space-around; align-items: flex-end; opacity: 0; /* GSAP controls */ } .instr-beam { width: 1px; height: 100%; background: linear-gradient(to top, rgba(67, 97, 238, 0.22), transparent); animation: instrBeamPulse 3.2s ease-in-out infinite; } .instr-beam:nth-child(2) { width: 2px; background: linear-gradient(to top, rgba(114, 9, 183, 0.16), transparent); animation-delay: 1.1s; } .instr-beam:nth-child(3) { animation-delay: 2.2s; } @keyframes instrBeamPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* -- Silhouette -------------------------------------------------- */ .instr-sil-layer { position: absolute; right: 8%; bottom: 0; width: auto; height: clamp(300px, 88vh, 780px); z-index: 2; pointer-events: none; opacity: 0; /* GSAP controls */ } .instr-sil-svg { height: 100%; width: auto; display: block; animation: instrSilBreathe 4.2s ease-in-out infinite; } @keyframes instrSilBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* -- HUD Overlays ----------------------------------------------- */ .instr-hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; font-family: var(--font-head); font-size: clamp(8px, 0.68vw, 10px); letter-spacing: 0.12em; color: rgba(67, 97, 238, 0.6); } .hud-tl { position: absolute; top: clamp(62px, 9vh, 105px); left: clamp(16px, 3vw, 44px); display: flex; flex-direction: column; gap: 5px; opacity: 0; /* GSAP controls */ } .hud-tr { position: absolute; top: clamp(62px, 9vh, 105px); right: clamp(16px, 3vw, 44px); display: flex; flex-direction: column; gap: 5px; text-align: right; opacity: 0; /* GSAP controls */ } .hud-bl { position: absolute; bottom: clamp(38px, 5vh, 68px); left: clamp(16px, 3vw, 44px); display: flex; flex-direction: column; gap: 7px; opacity: 0; /* GSAP controls */ } .hud-br { position: absolute; bottom: clamp(38px, 5vh, 68px); right: clamp(16px, 3vw, 44px); display: flex; flex-direction: column; gap: 7px; align-items: flex-end; opacity: 0; /* GSAP controls */ } .hud-label { font-weight: 700; color: rgba(67, 97, 238, 0.85); } .hud-status { display: flex; align-items: center; gap: 5px; } .hud-sub { color: rgba(67, 97, 238, 0.38); } .hud-coord, .hud-version { color: rgba(67, 97, 238, 0.4); } .hud-bar-wrap { display: flex; flex-direction: column; gap: 3px; } .hud-bar-wrap--right { align-items: flex-end; } .hud-bar-label { color: rgba(67, 97, 238, 0.42); font-size: 0.85em; } .hud-bar-track { width: 90px; height: 2px; background: var(--accent-primary-dim); border-radius: 1px; overflow: hidden; } .hud-bar-fill { height: 100%; background: rgba(67, 97, 238, 0.6); border-radius: 1px; animation: instrBarPulse 2.8s ease-in-out infinite; } @keyframes instrBarPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .hud-blink { display: inline-block; color: rgba(67, 97, 238, 0.95); font-size: 0.72em; animation: instrBlink 1.3s step-end infinite; } @keyframes instrBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* -- Corner brackets ------------------------------------------- */ .instr-corner { position: absolute; width: 26px; height: 26px; z-index: 4; pointer-events: none; opacity: 0; /* GSAP controls */ } .instr-corner::before, .instr-corner::after { content: ''; position: absolute; background: rgba(67, 97, 238, 0.55); } .instr-corner::before { width: 100%; height: 1.5px; top: 0; left: 0; } .instr-corner::after { width: 1.5px; height: 100%; top: 0; left: 0; } .instr-corner-tl { top: 22px; left: 22px; } .instr-corner-tr { top: 22px; right: 22px; transform: scaleX(-1); } .instr-corner-bl { bottom: 22px; left: 22px; transform: scaleY(-1); } .instr-corner-br { bottom: 22px; right: 22px; transform: scale(-1); } /* -- Skill chips ----------------------------------------------- */ .instr-skills-cluster { position: absolute; right: clamp(190px, 30vw, 460px); top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .instr-skill-chip { display: block; font-family: var(--font-head); font-size: clamp(7px, 0.62vw, 10px); font-weight: 700; letter-spacing: 0.22em; color: rgba(67, 97, 238, 0.92); background: var(--accent-primary-dim); border: 1px solid rgba(67, 97, 238, 0.22); border-left: 2px solid rgba(67, 97, 238, 0.7); padding: 5px 12px 5px 8px; border-radius: 2px; opacity: 0; /* GSAP controls */ } /* -- Main text content ----------------------------------------- */ .instr-hero-content { position: relative; z-index: 6; max-width: min(520px, 50vw); margin-left: clamp(24px, 8vw, 120px); display: flex; flex-direction: column; gap: 18px; } .instr-hero-tag { font-family: var(--font-head); font-size: clamp(8px, 0.68vw, 10px); letter-spacing: 0.26em; color: rgba(67, 97, 238, 0.72); opacity: 0; /* GSAP controls */ } .instr-hero-title { font-family: var(--font-head); font-size: clamp(38px, 6vw, 90px); font-weight: 900; line-height: 0.94; color: var(--menu-text); letter-spacing: -0.01em; text-transform: uppercase; opacity: 0; /* GSAP controls */ } .instr-hero-title .accent-text { color: var(--accent-primary); } .instr-hero-sub { font-family: var(--font-body); font-size: clamp(14px, 1.15vw, 18px); color: var(--text-muted); line-height: 1.65; max-width: 380px; opacity: 0; /* GSAP controls */ } .instr-hero-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: clamp(10px, 0.82vw, 13px); font-weight: 700; letter-spacing: 0.18em; color: var(--accent-primary); text-decoration: none; border: 1.5px solid rgba(67, 97, 238, 0.48); padding: 12px 24px; border-radius: 3px; transition: background 0.25s, border-color 0.25s; opacity: 0; /* GSAP controls */ width: fit-content; } .instr-hero-cta:hover { background: var(--accent-primary-dim); border-color: rgba(67, 97, 238, 0.85); } /* -- Scroll hint ----------------------------------------------- */ .instr-hero-scroll-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 9px; letter-spacing: 0.26em; color: rgba(67, 97, 238, 0.48); pointer-events: none; opacity: 1; animation: instrHintPulse 3s ease-in-out infinite; animation-delay: 1.2s; } @keyframes instrHintPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } } .instr-scroll-line { width: 1px; height: 38px; background: linear-gradient(to bottom, transparent, rgba(67, 97, 238, 0.55)); animation: instrScrollLine 2.2s ease-in-out infinite; transform-origin: top; } @keyframes instrScrollLine { 0% { transform: scaleY(0); opacity: 0; } 40%, 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } } /* -- Mobile ---------------------------------------------------- */ @media (max-width: 768px) { .instr-hero-section { justify-content: center; align-items: flex-end; padding-bottom: 18vh; } .instr-hero-content { margin-left: 0; max-width: 90vw; text-align: center; align-items: center; padding: 0 20px; } .instr-hero-sub { max-width: 100%; text-align: center; } .instr-sil-layer { right: 50%; transform: translateX(50%); width: clamp(130px, 48vw, 210px); height: auto; opacity: 0.45; bottom: 14vh; z-index: 1; } .instr-sil-svg { width: 100%; height: auto; } .instr-skills-cluster { display: none; } .hud-tr, .hud-br { display: none; } .hud-tl { top: 68px; left: 16px; } } /* -- Reduced motion -------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .instr-sil-svg, .instr-beam, .hud-bar-fill, .hud-blink, .instr-scroll-line, .instr-hero-scroll-hint { animation: none !important; } .instr-hero-canvas { display: none; } .instr-hero-tag, .instr-hero-title, .instr-hero-sub, .instr-hero-cta, .instr-hero-scroll-hint, .instr-sil-layer, .instr-beams, .instr-corner, .hud-tl, .hud-tr, .hud-bl, .hud-br { opacity: 1 !important; } } /* --------------------------------------------------------------- INSTRUCTORS PAGE � Names Stack + Popup Panel --------------------------------------------------------------- */ /* -- Gradient Bridge: hero ? database ------------------------- */ .instr-hero-bridge { width: 100%; height: 120px; background: linear-gradient(to bottom, var(--bg-void), var(--bg-void)); pointer-events: none; flex-shrink: 0; } /* -- Database Header ------------------------------------------- */ .instr-db-header { position: relative; width: 100%; padding: 0 var(--spacing-container) 0; margin-bottom: 4vh; z-index: 2; } .instr-db-header-inner { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; } .instr-db-tag { font-family: var(--font-head); font-size: 9px; letter-spacing: 0.24em; color: var(--accent-primary); opacity: 0.65; } .instr-db-title { font-family: var(--font-head); font-size: clamp(13px, 1.5vw, 18px); letter-spacing: 0.14em; color: var(--menu-text); } .instr-db-meta { font-family: var(--font-head); font-size: 9px; letter-spacing: 0.18em; color: var(--text-muted); margin-left: auto; } .instr-db-line { width: 100%; height: 1px; margin-top: 14px; background: linear-gradient(to right, var(--accent-primary), rgba(67, 97, 238, 0.18) 60%, transparent); } /* -- Stack Section ---------------------------------------------- */ .instr-stack-section { position: relative; width: 100%; /* No horizontal padding � names stretch edge-to-edge */ padding: 6vh 0 16vh; overflow: hidden; background: var(--bg-void); } /* Subtle grid-continuation watermark */ .instr-stack-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(67, 97, 238, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 97, 238, 0.04) 1px, transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.6) 85%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.6) 85%, transparent 100%); } /* -- Background Parallax Shapes ------------------------------- */ .instr-bg-shapes { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 0; } .bg-shape { position: absolute; will-change: transform; opacity: 0.8; } .bg-shape:nth-child(1) { width: 240px; top: 5%; left: 2%; } .bg-shape:nth-child(2) { width: 150px; top: 16%; right: 6%; } .bg-shape:nth-child(3) { width: 200px; top: 36%; left: 9%; } .bg-shape:nth-child(4) { width: 105px; top: 54%; right: 3%; } .bg-shape:nth-child(5) { width: 310px; top: 68%; left: 25%; } .bg-shape:nth-child(6) { width: 125px; top: 8%; left: 51%; } .bg-shape:nth-child(7) { width: 170px; top: 81%; right: 18%; } /* -- Names List ----------------------------------------------- */ .instr-names-list { list-style: none; margin: 0; /* Left padding creates the gutter where characters live */ padding: 0 0 0 var(--spacing-container); position: relative; z-index: 10; } /* * Layout: flex-row � character occupies a fixed left gutter, * name button takes the remaining width. * Character-wrap is position:absolute so it NEVER creates * invisible height gaps (old bug: 200px dead space between names). */ .instr-name-item { position: relative; display: flex; align-items: center; gap: 2.4vw; padding: 1.6vh 0; border-bottom: 1px solid rgba(26, 26, 26, 0.07); } .instr-name-item:first-child { border-top: 1px solid rgba(26, 26, 26, 0.07); } /* -- Character SVG � absolutely positioned in left gutter ----- */ /* * GSAP owns opacity and y on these elements. * NO CSS opacity or transition here � prevents CSS/GSAP conflict. */ .instr-character-wrap { flex-shrink: 0; width: 80px; height: 150px; position: relative; pointer-events: none; /* opacity starts at 0, set by gsap.set() in JS */ } .instr-character { width: 80px; height: 150px; display: block; } /* Discipline tag above the character */ .instr-hover-label { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-family: var(--font-head); font-size: 0.48rem; letter-spacing: 0.26em; color: var(--accent-primary); white-space: nowrap; text-transform: uppercase; /* NO opacity or transition � owned by GSAP */ } /* -- Name Button ---------------------------------------------- */ .instr-name-btn { background: none; border: none; padding: 0; margin: 0; font-family: var(--font-head); font-size: clamp(2.4rem, 7vw, 9rem); font-weight: 900; color: var(--menu-text); text-transform: uppercase; line-height: 1.0; letter-spacing: -0.03em; cursor: pointer; position: relative; display: block; flex: 1; text-align: left; /* GSAP owns y � only CSS-transition color */ transition: color 0.32s ease; } /* Skill discipline tag */ .instr-skill-tag { flex-shrink: 0; font-family: var(--font-head); font-size: 9px; letter-spacing: 0.22em; color: var(--text-muted); border: 1px solid rgba(67, 97, 238, 0.20); border-radius: 3px; padding: 3px 8px; white-space: nowrap; transition: color 0.3s var(--easing-pro), border-color 0.3s var(--easing-pro), background 0.3s var(--easing-pro); } .instr-name-item.is-hovered .instr-skill-tag { color: var(--accent-primary); border-color: var(--accent-primary); background: var(--accent-primary-dim); } /* Energy line � expands from center on hover */ .instr-energy-line { position: absolute; bottom: 0; left: 50%; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-primary) 30%, var(--accent-secondary) 70%, transparent); transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform 0.55s var(--easing-pro); pointer-events: none; } .instr-name-item.is-hovered .instr-energy-line { transform: translateX(-50%) scaleX(1); } /* Name button hover color */ .instr-name-item.is-hovered .instr-name-btn { color: var(--accent-primary); } /* Dim non-hovered siblings � only the name color, not opacity (opacity would fight GSAP entrance animation) */ .instr-names-list:has(.is-hovered) .instr-name-item:not(.is-hovered) .instr-name-btn { color: rgba(15, 23, 42, 0.15); } .instr-names-list:has(.is-hovered) .instr-name-item:not(.is-hovered) .instr-skill-tag { opacity: 0.3; } /* ── Instructor list: mobile vertical layout ─────────────────── */ @media (max-width: 600px) { .instr-name-item { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 1.4rem 1rem; } /* Character sits at top, full-width centered */ .instr-character-wrap { width: 64px; height: 120px; align-self: center; } .instr-character { width: 64px; height: 120px; } /* Skill tag below character */ .instr-skill-tag { align-self: center; font-size: 8px; } /* Name fills full width below */ .instr-name-btn { font-size: clamp(1.8rem, 11vw, 3rem); text-align: center; width: 100%; flex: none; } } /* -- Popup Backdrop — GSAP owns opacity, NO CSS transition ----- */ /* ── Popup Backdrop — GSAP owns opacity, NO CSS transition ───── */ .instr-popup-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.62); z-index: 2999; opacity: 0; pointer-events: none; /* No CSS transition — GSAP handles fade */ } /* --------------------------------------------------------------- POPUP � Light theme, scroll-based instructor navigation --------------------------------------------------------------- */ /* * White popup � accent highlights only. * GSAP owns transform (slides up from y:'100%' at init). */ .instr-popup { position: fixed; bottom: 0; left: 0; width: 100%; /* height is set dynamically by JS based on real header height */ z-index: 3000; background: var(--bg-secondary); color: var(--menu-text); border-radius: 20px 20px 0 0; overflow: hidden; will-change: transform; display: flex; flex-direction: column; box-shadow: 0 -12px 60px rgba(0, 0, 0, 0.14); } /* HUD corner bracket top-left */ .instr-popup::before { content: ''; position: absolute; top: 14px; left: 14px; width: 26px; height: 26px; border-top: 1.5px solid rgba(67, 97, 238, 0.35); border-left: 1.5px solid rgba(67, 97, 238, 0.35); pointer-events: none; z-index: 5; } /* HUD corner bracket bottom-right */ .instr-popup::after { content: ''; position: absolute; bottom: 68px; right: 14px; width: 26px; height: 26px; border-bottom: 1.5px solid rgba(67, 97, 238, 0.35); border-right: 1.5px solid rgba(67, 97, 238, 0.35); pointer-events: none; z-index: 5; } /* -- Scan line � GSAP sweeps y from 0 ? popup height on open -- */ .instr-scan-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(67, 97, 238, 0.0) 5%, #4361ee 35%, #7209b7 65%, rgba(114, 9, 183, 0.0) 95%, transparent 100%); opacity: 0.9; z-index: 20; pointer-events: none; filter: blur(0.6px); } /* -- Top bar --------------------------------------------------- */ .instr-popup-topbar { flex-shrink: 0; height: 46px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid rgba(67, 97, 238, 0.1); gap: 0; position: relative; z-index: 4; background: var(--bg-secondary); } .instr-topbar-brand { font-family: var(--font-head); font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(67, 97, 238, 0.75); flex: 1; } .instr-topbar-counter { font-family: var(--font-head); font-size: 0.56rem; letter-spacing: 0.18em; color: var(--text-muted); margin-right: 16px; } /* Close button � scoped light version */ .instr-popup-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-subtle); background: var(--glass-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; position: static; top: auto; right: auto; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; } .instr-popup-close:hover { border-color: var(--accent-primary); background: var(--accent-primary-dim); color: var(--accent-primary); transform: none; } /* -- Scrollable container -------------------------------------- */ /* * All 5 instructor sections stacked vertically. * Native overflow-y: scroll � no GSAP track, no snapping. * Scrolling here scrolls between instructors naturally. */ .instr-popup-scroller { flex: 1; min-height: 0; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: rgba(67, 97, 238, 0.2) transparent; } /* -- One section per instructor -------------------------------- */ .instr-profile-section { display: flex; border-bottom: 1px solid rgba(67, 97, 238, 0.07); } .instr-profile-section:last-child { border-bottom: none; } /* -- Left column � sticky while right content scrolls ---------- */ /* * Dot-grid background creates the "terminal grid paper" feel. * position:sticky + align-self:flex-start keeps it anchored at * the scroller's top while the right panel's content scrolls by. */ .instr-profile-left { width: 36%; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 48px 20px; border-right: 1px solid rgba(67, 97, 238, 0.08); position: sticky; top: 0; align-self: flex-start; background-image: radial-gradient(circle, rgba(67, 97, 238, 0.07) 1px, transparent 1px); background-size: 26px 26px; background-color: var(--bg-secondary); } /* Character SVG container */ .instr-char-display { width: clamp(110px, 14vw, 200px); flex-shrink: 0; } /* * Light theme: original SVG stroke colours show naturally. * Soft blue drop-shadow only � no invert / brightness hack. */ .instr-char-display svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 20px rgba(67, 97, 238, 0.15)); } /* -- HUD Stat block -------------------------------------------- */ .instr-stat-block { width: 100%; max-width: 210px; border: 1px solid rgba(67, 97, 238, 0.14); border-radius: 6px; overflow: hidden; background: var(--bg-tertiary); } .instr-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 14px; border-bottom: 1px solid rgba(67, 97, 238, 0.08); gap: 8px; } .instr-stat:last-child { border-bottom: none; } .instr-stat-val { font-family: var(--font-head); font-size: clamp(0.9rem, 1.5vw, 1.4rem); font-weight: 700; color: var(--accent-primary); letter-spacing: 0.04em; min-width: 3ch; text-align: left; } .instr-stat-key { font-family: var(--font-head); font-size: 0.4rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-muted); text-align: right; } /* -- Right column: profile content ---------------------------- */ .instr-profile-right { flex: 1; padding: 48px 5vw 72px 4vw; } /* -- Discipline tag with blinking dot ------------------------- */ .instr-profile-discipline { font-family: var(--font-head); font-size: 0.54rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--accent-primary); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .instr-profile-discipline::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-primary); flex-shrink: 0; animation: dot-pulse 2.4s ease-in-out infinite; box-shadow: 0 0 6px rgba(67, 97, 238, 0.5); } @keyframes dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.78); } } /* -- Instructor name � huge, periodic glitch ------------------- */ .instr-profile-name { font-family: var(--font-head); font-size: clamp(2.4rem, 5.2vw, 5.8rem); font-weight: 900; color: var(--menu-text); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 24px; position: relative; animation: name-glitch 9s infinite; } @keyframes name-glitch { 0%, 88% { clip-path: none; transform: none; color: var(--menu-text); } 89% { clip-path: polygon(0 18%, 100% 18%, 100% 38%, 0 38%); transform: translate(-4px, 0); color: var(--accent-primary); } 90% { clip-path: polygon(0 58%, 100% 58%, 100% 78%, 0 78%); transform: translate(4px, 0); color: var(--accent-secondary); } 91% { clip-path: none; transform: none; color: var(--menu-text); } 92% { clip-path: polygon(0 8%, 100% 8%, 100% 28%, 0 28%); transform: translate(-2px, 0); } 93%, 100% { clip-path: none; transform: none; color: var(--menu-text); } } /* -- Bio ------------------------------------------------------- */ .instr-profile-bio { font-family: var(--font-body); font-size: clamp(1rem, 1.25vw, 1.16rem); color: var(--text-muted); line-height: 1.76; max-width: 580px; margin-bottom: 4px; } /* -- Section dividers ------------------------------------------ */ .instr-section-div { display: flex; align-items: center; gap: 0; margin: 44px 0 28px; } .instr-section-div span { font-family: var(--font-head); font-size: 0.5rem; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(67, 97, 238, 0.65); white-space: nowrap; margin-right: 18px; flex-shrink: 0; } .instr-section-div::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(67, 97, 238, 0.45), rgba(114, 9, 183, 0.25), transparent); } /* -- Timeline -------------------------------------------------- */ .instr-timeline { display: flex; flex-direction: column; gap: 0; padding-left: 28px; position: relative; width: 100%; max-width: 620px; } /* Vertical spine */ .instr-timeline::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(to bottom, var(--accent-primary), var(--accent-secondary)); opacity: 0.22; } .instr-milestone { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); position: relative; align-items: start; } .instr-milestone:last-child { border-bottom: none; } /* Glowing dot on spine */ .instr-milestone::before { content: ''; position: absolute; left: -35px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary); box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1), 0 0 10px rgba(67, 97, 238, 0.3); } .instr-milestone-bar { display: none; } .instr-milestone-year { font-family: var(--font-head); font-size: 0.5rem; letter-spacing: 0.2em; color: var(--accent-secondary); text-transform: uppercase; padding-top: 3px; line-height: 1.5; } .instr-milestone-text { font-family: var(--font-body); font-size: clamp(0.9rem, 1.15vw, 1.05rem); color: var(--text-muted); line-height: 1.62; } /* -- Q & A accordion ------------------------------------------- */ .instr-qa-list { width: 100%; max-width: 620px; } .instr-qa-item { border-bottom: 1px solid var(--border-subtle); } .instr-qa-item:last-child { border-bottom: none; } .instr-qa-toggle-btn { width: 100%; background: none; border: none; padding: 20px 0 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; cursor: pointer; text-align: left; } .instr-qa-toggle-btn:focus-visible { outline: 2px solid rgba(67, 97, 238, 0.5); outline-offset: 4px; border-radius: 4px; } .instr-qa-q { font-family: var(--font-head); font-size: clamp(0.64rem, 0.88vw, 0.82rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-primary); line-height: 1.45; } .instr-qa-icon { flex-shrink: 0; font-size: 1.3rem; font-weight: 300; font-family: sans-serif; line-height: 1; color: var(--accent-primary); display: inline-block; transition: transform 0.28s ease; } .instr-qa-toggle-btn[aria-expanded="true"] .instr-qa-icon { transform: rotate(45deg); } .instr-qa-answer { overflow: hidden; /* height + opacity set by gsap.set() in JS */ } .instr-qa-a { font-family: var(--font-body); font-size: clamp(0.92rem, 1.18vw, 1.08rem); color: var(--text-muted); line-height: 1.74; padding-bottom: 22px; } /* -- Footer: navigate between instructors ---------------------- */ .instr-popup-footer { flex-shrink: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-top: 1px solid rgba(67, 97, 238, 0.1); background: var(--bg-secondary); position: relative; z-index: 4; } .instr-foot-btn { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 5px 8px; border-radius: 4px; transition: color 0.22s ease, background 0.22s ease; font-family: var(--font-head); min-width: 0; } .instr-foot-btn:hover:not(:disabled) { color: var(--accent-primary); background: var(--accent-primary-dim); } .instr-foot-btn:disabled { opacity: 0.2; cursor: default; pointer-events: none; } .instr-foot-label { font-size: 0.46rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; } /* Instructor position dots (injected by JS) */ .instr-foot-dots { display: flex; gap: 6px; align-items: center; } .instr-foot-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; border: none; padding: 0; } .instr-foot-dot.is-active { background: var(--accent-primary); transform: scale(1.5); box-shadow: 0 0 8px rgba(67, 97, 238, 0.5); } /* -- Mobile --------------------------------------------------- */ @media (max-width: 768px) { .instr-popup { /* height set by JS */ border-radius: 14px 14px 0 0; } .instr-profile-section { flex-direction: column; } /* On mobile: left column becomes a horizontal strip at the top */ .instr-profile-left { width: 100%; flex-direction: row; justify-content: space-around; align-items: center; padding: 12px 5vw; border-right: none; border-bottom: 1px solid rgba(67, 97, 238, 0.08); gap: 12px; flex-shrink: 0; position: relative; top: auto; } .instr-char-display { width: 70px; flex-shrink: 0; } .instr-stat-block { flex-direction: row; max-width: none; flex: 1; border-radius: 6px; } .instr-stat { flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-bottom: none; border-right: 1px solid rgba(67, 97, 238, 0.08); flex: 1; padding: 8px 4px; } .instr-stat:last-child { border-right: none; } .instr-profile-right { flex: 1; padding: 22px 5vw 40px; } .instr-profile-name { font-size: clamp(2rem, 9vw, 3.4rem); } .instr-foot-label { display: none; } .instr-popup-topbar { padding: 0 14px; } .instr-popup-footer { padding: 0 14px; } } /* -- Desktop: Horizontal panel navigation -------------------------------- */ @media (min-width: 1024px) { /* Scroller becomes horizontal � JS wheel handler drives navigation */ .instr-popup-scroller { overflow-x: scroll; overflow-y: hidden; scrollbar-width: none; /* Firefox */ } .instr-popup-scroller::-webkit-scrollbar { display: none; } /* Flex row: all panels side-by-side */ .instr-sections-wrapper { display: flex; flex-wrap: nowrap; height: 100%; } /* Each panel = exact popup width, fixed height */ .instr-profile-section { min-width: 100%; flex-shrink: 0; height: 100%; overflow: hidden; border-bottom: none; border-right: 1px solid rgba(67, 97, 238, 0.07); } /* Left column: full panel height, own vertical scroll for overflow */ .instr-profile-left { position: relative; top: auto; align-self: auto; height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(67, 97, 238, 0.1) transparent; } /* Right column: full panel height, own vertical scroll */ .instr-profile-right { overflow-y: auto; height: 100%; scrollbar-width: thin; scrollbar-color: rgba(67, 97, 238, 0.2) transparent; } } /* ========================================================================= CONTACT PAGE � AAA GAMING INSTITUTE (Light Theme) Sticky globe background, glass-panel sections, scroll-fade ========================================================================= */ /* -- Contact Main Wrapper -------------------------------------- */ main[data-barba-namespace="contact"] { position: relative; background: transparent; } /* -- Globe: Sticky � stays visible during main, scrolls away at footer -- */ .globe-zone { position: sticky; top: 0; width: 100%; height: 100vh; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(67, 97, 238, 0.04) 0%, transparent 70%); } body.game-mode .globe-zone { background: radial-gradient(ellipse at center, rgba(0, 255, 200, 0.04) 0%, transparent 70%); } #globe-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* -- Pin Wrapper: New overlapping container for crossfade scroll -- */ .contact-pin-wrapper { position: relative; width: 100%; min-height: 100dvh; margin-top: -100dvh; /* pull up over the globe */ display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; } /* -- Section 1: Hero (glass panel, overlaps sticky globe) ------ */ .contact-hero-section { position: relative; width: 100%; min-height: 100dvh; grid-column: 1 / 2; grid-row: 1 / 2; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 3; overflow: visible; transform-origin: center center; } .contact-overlay { position: relative; z-index: 1; display: flex; width: 100%; min-height: 100vh; align-items: center; padding-bottom: 60px; } /* Left: Info */ .contact-info-side { flex: 1; padding: 0 clamp(30px, 5vw, 80px); padding-top: 100px; display: flex; flex-direction: column; justify-content: center; } .info-tag { font-family: var(--font-head); font-size: 0.65rem; letter-spacing: 0.2em; color: var(--accent-primary); text-transform: uppercase; margin-bottom: 16px; } .contact-hero-title { font-family: var(--font-head); font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: var(--menu-text); margin-bottom: 16px; } .accent-text { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .contact-hero-sub { font-family: var(--font-body); font-size: clamp(0.9rem, 1vw, 1rem); color: var(--text-muted); max-width: 440px; line-height: 1.7; margin-bottom: 28px; } .contact-details-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .detail-group-label { font-family: var(--font-head); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-primary); opacity: 0.7; margin-bottom: 6px; } .detail-item a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; } .detail-item a:hover { color: var(--accent-primary); } .detail-item { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 0.9rem; color: var(--text-muted); } .detail-item svg { flex-shrink: 0; } .trust-row { display: flex; gap: 12px; flex-wrap: wrap; } .trust-chip { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-muted); padding: 8px 16px; border: 1px solid rgba(67, 97, 238, 0.2); border-radius: 100px; background: var(--accent-primary-dim); } .trust-chip strong { color: var(--accent-primary); font-weight: 700; } /* Contact detail group spacing (moved from inline styles) */ .detail-group-label.admissions-label, .detail-group-label.campus-label { margin-top: 10px; } /* Right: Form */ .contact-form-side { flex: 0 0 480px; display: flex; align-items: center; justify-content: center; padding: 40px; padding-top: 100px; } .contact-form-card { width: 100%; max-width: 420px; padding: 36px; background: rgba(243, 244, 246, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); } .form-card-heading { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; color: var(--menu-text); margin-bottom: 6px; } .form-card-sub { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-muted); margin-bottom: 28px; line-height: 1.5; } .contact-form { display: flex; flex-direction: column; gap: 18px; } .form-group { position: relative; width: 100%; } .form-group input, .form-group textarea, .form-group select { width: 100%; background: var(--bg-void); border: 1.5px solid rgba(0, 0, 0, 0.1); border-radius: 10px; color: var(--menu-text); font-family: var(--font-body); font-size: 16px; /* iOS zoom fix */ padding: 13px 14px; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.12); } .form-group textarea { resize: vertical; min-height: 70px; } .form-group label { position: absolute; left: 14px; top: 13px; font-family: var(--font-body); font-size: 0.85rem; color: var(--text-muted); pointer-events: none; transition: 0.25s ease all; padding: 0 4px; } .form-group input:focus~label, .form-group input:not(:placeholder-shown)~label, .form-group textarea:focus~label, .form-group textarea:not(:placeholder-shown)~label { top: -10px; left: 10px; font-size: 0.65rem; color: var(--accent-primary); background: var(--bg-secondary); letter-spacing: 0.04em; font-weight: 600; } .form-group select { appearance: none; cursor: pointer; color: var(--text-muted); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .form-group select:focus, .form-group select:valid { color: var(--menu-text); } .form-group select option { background: var(--bg-void); color: var(--menu-text); } .field-error { display: none; font-family: var(--font-body); font-size: 0.7rem; color: var(--error); margin-top: 4px; padding-left: 4px; } .form-group.has-error input, .form-group.has-error textarea, .form-group.has-error select { border-color: var(--error); box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1); } .form-group.has-error .field-error { display: block; } .captcha-group { display: flex; flex-direction: column; gap: 6px; } .captcha-label { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-muted); position: static !important; pointer-events: auto !important; padding: 0 !important; background: transparent !important; } .captcha-label span { font-weight: 700; color: var(--accent-primary); } .captcha-group input { max-width: 100px; } .submit-btn { margin-top: 6px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border: none; color: #fff; padding: 14px 24px; font-family: var(--font-head); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(67, 97, 238, 0.25); } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(67, 97, 238, 0.4); } .submit-btn:active { transform: translateY(0); } .submit-btn.is-loading { pointer-events: none; opacity: 0.7; } .submit-btn span, .submit-btn svg { position: relative; z-index: 1; } .form-success { display: none; text-align: center; padding: 30px 20px; } .form-success.is-visible { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: contactFadeUp 0.6s ease forwards; } .form-success.is-visible svg path, .form-success.is-visible svg polyline { stroke-dasharray: 60; stroke-dashoffset: 60; animation: drawCheck 0.6s ease forwards 0.3s; } @keyframes drawCheck { to { stroke-dashoffset: 0; } } .form-success h3 { font-family: var(--font-head); font-size: 1.3rem; color: var(--accent-primary); } .form-success p { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-muted); } @keyframes contactFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* -- Scroll Hint -----------------------------------------------*/ .contact-scroll-hint { width: 3px; height: 6px; background: var(--accent-primary); left: 50%; top: 5px; transform: translateX(-50%); border-radius: 2px; animation: contactScrollWheel 1.5s infinite; } @keyframes contactScrollWheel { 0% { top: 5px; opacity: 1; } 100% { top: 16px; opacity: 0; } } /* (globe-zone and #globe-canvas rules are defined above at line ~3140) */ /* -- Section 2: Showcase --------------------------------------- */ .contact-showcase-section { position: relative; width: 100%; min-height: 100dvh; grid-column: 1 / 2; grid-row: 1 / 2; opacity: 0; transform: scale(1.04); transform-origin: center center; pointer-events: none; /* hidden by default — JS enables when visible */ background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 80px var(--spacing-container); z-index: 2; } .showcase-content { max-width: 800px; text-align: center; } .showcase-tag { font-family: var(--font-head); font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent-secondary); display: block; margin-bottom: 16px; } .showcase-heading { font-family: var(--font-head); font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 700; line-height: 1.1; color: var(--menu-text); margin-bottom: 16px; } .showcase-sub { font-family: var(--font-body); font-size: clamp(0.95rem, 1.1vw, 1.1rem); color: var(--text-muted); max-width: 560px; margin: 0 auto 48px; line-height: 1.7; } /* Stats Row */ .showcase-stats { display: flex; justify-content: center; gap: clamp(24px, 4vw, 56px); margin-bottom: 56px; flex-wrap: wrap; } .stat-block { display: flex; flex-direction: column; align-items: center; gap: 4px; } .stat-number { font-family: var(--font-head); font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 900; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } .stat-label { font-family: var(--font-head); font-size: 0.52rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); } /* Testimonial */ .showcase-testimonial { background: var(--bg-secondary); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 16px; padding: 32px 36px; margin-bottom: 40px; position: relative; } .showcase-testimonial::before { content: '"'; position: absolute; top: -10px; left: 24px; font-family: var(--font-head); font-size: 4rem; line-height: 1; color: var(--accent-primary); opacity: 0.15; } .showcase-testimonial blockquote { font-family: var(--font-body); font-size: clamp(1rem, 1.15vw, 1.1rem); color: var(--menu-text); line-height: 1.75; font-style: italic; margin-bottom: 12px; } .showcase-testimonial cite { font-family: var(--font-head); font-size: 0.55rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-primary); font-style: normal; } /* CTA Button */ .showcase-cta { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; padding: 16px 36px; border-radius: 12px; font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); box-shadow: 0 6px 24px rgba(67, 97, 238, 0.3); } .showcase-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(67, 97, 238, 0.45); } .showcase-cta:active { transform: translateY(0); } /* -- Responsive ------------------------------------------------ */ @media (max-width: 1024px) { .contact-hero-section { min-height: auto; } .contact-overlay { flex-direction: column; min-height: auto; } .contact-info-side { padding: 120px 24px 40px; } .contact-form-side { flex: none; padding: 0 24px 60px; } .contact-hero-section, .contact-showcase-section { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } } @media (max-width: 768px) { /* ── Globe: sticky behind content, same as desktop ── */ .globe-zone { position: sticky; top: 0; height: 100dvh; z-index: 0; } /* ── Pin wrapper: pull content up over the globe ── */ .contact-pin-wrapper { margin-top: -100dvh; display: block; min-height: auto; position: relative; z-index: 1; } /* ── Hero section: subtle glassmorphism over content ── */ .contact-hero-section { position: relative; min-height: auto; grid-column: unset; grid-row: unset; background: rgba(5, 8, 22, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ── Showcase: natural height, visible, glassmorphism ── */ .contact-showcase-section { position: relative; min-height: auto; grid-column: unset; grid-row: unset; opacity: 1 !important; transform: none !important; pointer-events: auto !important; padding: 60px 24px 80px; background: rgba(5, 8, 22, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ── Scroll hint: hide on mobile (desktop crossfade only) ── */ .contact-scroll-hint { display: none !important; } /* ── Light-mode: white-tinted glassmorphism ── */ body:not(.game-mode) .contact-hero-section { background: rgba(243, 246, 251, 0.85); } body:not(.game-mode) .contact-showcase-section { background: rgba(243, 246, 251, 0.85); } /* ── Overlay: column layout, auto height ─────────────────── */ .contact-overlay { flex-direction: column; min-height: auto; align-items: stretch; padding-bottom: 0; } /* ── Info side: full-width ────────────────────────────────── */ .contact-info-side { padding: 100px 24px 32px; flex: none; } /* ── Form side: full-width ────────────────────────────────── */ .contact-form-side { flex: none; padding: 0 16px 48px; } /* ── Typography tweaks ────────────────────────────────────── */ .contact-hero-title { font-size: clamp(1.8rem, 7vw, 2.6rem); } .contact-form-card { padding: 24px 18px; border-radius: 16px; } .trust-row { gap: 8px; flex-wrap: wrap; } .trust-chip { font-size: 0.7rem; padding: 6px 12px; } .showcase-stats { gap: 20px; flex-wrap: wrap; } .showcase-testimonial { padding: 24px 20px; } .contact-scroll-hint { display: none; } } /* Contact page footer — no special overrides needed. Footer works identically to all other pages: .footer-logo-section is position:fixed, .footer-top-section has margin-bottom equal to logo section height for scroll-reveal. */ /* ========================================================================= CONTACT PAGE — Game-Mode & Atmospheric Enhancements ========================================================================= */ /* Block 1 – Light mode: atmospheric depth on hero (Needs explicit transparent base to not block globe) */ .contact-hero-section { background-color: transparent !important; background-image: radial-gradient(ellipse at 72% 18%, rgba(67, 97, 238, 0.09) 0%, transparent 50%), radial-gradient(ellipse at 15% 82%, rgba(114, 9, 183, 0.05) 0%, transparent 45%); } /* Block 2 – Light mode: atmospheric depth on showcase */ .contact-showcase-section { background-color: transparent !important; background-image: radial-gradient(ellipse at 50% 40%, rgba(67, 97, 238, 0.06) 0%, transparent 60%); } /* Block 3 – Game mode: dark hero with neon gradients */ body.game-mode .contact-hero-section { background: rgba(2, 4, 14, 0.55); background-image: radial-gradient(ellipse at 72% 18%, rgba(0, 255, 200, 0.07) 0%, transparent 55%), radial-gradient(ellipse at 15% 82%, rgba(114, 9, 183, 0.06) 0%, transparent 48%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Block 4 – Game mode: dark showcase — same overlay as hero for seamless transition */ body.game-mode .contact-showcase-section { background: rgba(2, 4, 14, 0.55); background-image: radial-gradient(ellipse at 45% 50%, rgba(0, 255, 200, 0.05) 0%, transparent 60%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Block 5 – Light mode: enhanced form card glass */ .contact-form-card { background: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.92); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10), 0 1px 0 rgba(255, 255, 255, 0.8) inset; } /* Block 6 – Game mode: form card dark glass */ body.game-mode .contact-form-card { background: rgba(6, 12, 28, 0.88); border-color: rgba(0, 255, 200, 0.14); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 255, 200, 0.03) inset; } body.game-mode .form-card-heading { color: #e8f4f0; } body.game-mode .form-card-sub { color: rgba(0, 255, 200, 0.45); } /* Block 7 – Game mode: form fields */ body.game-mode .contact-form input, body.game-mode .contact-form textarea, body.game-mode .contact-form select { background: rgba(255, 255, 255, 0.04); border-color: rgba(0, 255, 200, 0.16); color: #00ffcc; } body.game-mode .contact-form input:focus, body.game-mode .contact-form textarea:focus, body.game-mode .contact-form select:focus { border-color: rgba(0, 255, 200, 0.5); box-shadow: 0 0 0 3px rgba(0, 255, 200, 0.08); } body.game-mode .contact-form label { color: rgba(0, 255, 200, 0.85); font-weight: 500; } body.game-mode .contact-form input:not(:placeholder-shown)~label, body.game-mode .contact-form textarea:not(:placeholder-shown)~label { color: #00ffcc; text-shadow: 0 0 8px rgba(0, 255, 200, 0.4); } body.game-mode .captcha-label { color: rgba(0, 255, 200, 0.85); font-weight: 500; } body.game-mode .contact-form select option { background: #060a18; color: #00ffcc; } /* Block 8 – Game mode: hero title + showcase heading cyan gradients */ body.game-mode .contact-hero-title { background: linear-gradient(135deg, #e8f4f0 0%, #00e7c2 50%, rgba(123, 47, 255, 0.85) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body.game-mode .showcase-heading { background: linear-gradient(135deg, #ffffff 0%, #00e7c2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body.game-mode .contact-hero-sub { color: rgba(180, 220, 210, 0.7); } body.game-mode .showcase-sub { color: rgba(180, 220, 210, 0.65); } /* Block 9 – Game mode: info/showcase tags */ body.game-mode .info-tag { color: #00e7c2; text-shadow: 0 0 10px rgba(0, 255, 200, 0.45); } body.game-mode .showcase-tag { color: #00e7c2; text-shadow: 0 0 8px rgba(0, 255, 200, 0.35); } /* Block 10 – Game mode: trust chips with neon energy */ body.game-mode .trust-chip { background: rgba(0, 255, 200, 0.07); border-color: rgba(0, 255, 200, 0.22); color: rgba(0, 230, 185, 0.9); } body.game-mode .trust-chip strong { color: #00ffcc; text-shadow: 0 0 14px rgba(0, 255, 200, 0.65); } /* Block 11 – Game mode: stat numbers with gradient glow */ body.game-mode .stat-number { background: linear-gradient(135deg, #00ffcc, #7b2fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 8px rgba(0, 255, 200, 0.35)); } body.game-mode .stat-label { color: rgba(0, 255, 200, 0.55); } body.game-mode .stat-block { border-color: rgba(0, 255, 200, 0.12); } /* Block 12 – Game mode: testimonial depth */ body.game-mode .showcase-testimonial { background: rgba(0, 255, 200, 0.04); border-color: rgba(0, 255, 200, 0.14); box-shadow: 0 0 30px rgba(0, 255, 200, 0.04); } body.game-mode .showcase-testimonial blockquote { color: rgba(210, 240, 230, 0.85); } body.game-mode .showcase-testimonial cite { color: rgba(0, 255, 200, 0.5); } /* Block 13 – Game mode: CTA button */ body.game-mode .showcase-cta { border-color: rgba(0, 255, 200, 0.4); color: #00e7c2; } body.game-mode .showcase-cta:hover { background: rgba(0, 255, 200, 0.10); box-shadow: 0 0 24px rgba(0, 255, 200, 0.25), 0 0 60px rgba(0, 255, 200, 0.08); border-color: rgba(0, 255, 200, 0.65); } /* Block 14 – Game mode: submit button cyan gradient */ body.game-mode .submit-btn { background: linear-gradient(135deg, #00e7c2, #7b2fff); box-shadow: 0 8px 24px rgba(0, 255, 200, 0.3); } body.game-mode .submit-btn:hover { box-shadow: 0 12px 40px rgba(0, 255, 200, 0.45); transform: translateY(-1px); } /* Block 15 – Game mode: scroll hint */ body.game-mode .contact-scroll-mouse { border-color: #00e7c2; opacity: 0.6; } body.game-mode .contact-scroll-mouse::before { background: #00e7c2; } body.game-mode .contact-scroll-hint span { color: rgba(0, 255, 200, 0.45); } /* Block 16 – Game mode: detail items text */ body.game-mode .detail-item span { color: rgba(200, 235, 225, 0.75); } /* Block 17 – Game mode: form success state */ body.game-mode .form-success h3 { color: #00e7c2; } body.game-mode .form-success p { color: rgba(0, 255, 200, 0.5); } /* Block 18 – removed: game-mode mobile backgrounds now handled in the unified @media (max-width: 768px) block above */ /* -- Menu SVG Illustrations ----------------------------------------------- */ .menu-image-wrapper { width: 96%; height: 92%; position: relative; } .menu-illustration { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 65%; height: auto; color: rgba(255, 255, 255, 0.88); filter: drop-shadow(0 0 22px rgba(67, 97, 238, 0.45)); pointer-events: none; opacity: 0; } @media (prefers-reduced-motion: reduce) { .submit-btn, .detail-item, .showcase-cta { transition: none !important; } .globe-zone { display: none; } .contact-hero-section, .contact-showcase-section { background: var(--bg-void); backdrop-filter: none; } } /* ═══════════════════════════════════════════════════════════════ SHARED PAGE HERO — Dark hero for Programs & Admissions pages ═══════════════════════════════════════════════════════════════ */ .page-hero-section { width: 100%; height: 100vh; min-height: 560px; background: var(--bg-void); display: flex; align-items: center; justify-content: flex-start; padding: 80px var(--spacing-container) 0; position: relative; overflow: hidden; } .page-hero-grid-decor { position: absolute; inset: 0; background-image: linear-gradient(rgba(67, 97, 238, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 97, 238, 0.06) 1px, transparent 1px); background-size: 80px 80px; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 25% 50%, black 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 25% 50%, black 20%, transparent 75%); } .page-hero-inner { position: relative; z-index: 2; max-width: 820px; } .page-hero-tag { display: block; font-family: var(--font-head); font-size: 10px; letter-spacing: 0.28em; color: var(--accent-primary); opacity: 0.65; margin-bottom: 20px; } .page-hero-title { color: var(--text-main) !important; text-align: left !important; margin-bottom: 18px; } .page-hero-title span { color: var(--accent-primary) !important; } .page-hero-sub { color: var(--text-muted) !important; text-align: left !important; font-size: clamp(14px, 1.5vw, 18px); max-width: 520px; margin-bottom: 28px; } .page-hero-pills-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .page-hero-pill { font-family: var(--font-head); font-size: 8.5px; letter-spacing: 0.2em; padding: 5px 12px; border: 1px solid var(--accent-primary); color: var(--menu-text); border-radius: 3px; white-space: nowrap; } .page-hero-apply-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 11px; letter-spacing: 0.22em; color: #fff; background: var(--accent-primary); padding: 14px 28px; border-radius: 4px; text-decoration: none; transition: background 0.28s var(--easing-pro), transform 0.22s var(--easing-pro); } .page-hero-apply-btn:hover { background: var(--accent-secondary); transform: translateX(4px); } .page-hero-scroll-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 8px; letter-spacing: 0.24em; color: rgba(67, 97, 238, 0.45); pointer-events: none; } .page-hero-scroll-line { width: 1px; height: 36px; background: linear-gradient(to bottom, transparent, rgba(67, 97, 238, 0.5)); animation: pageHeroScroll 2.2s ease-in-out infinite; transform-origin: top; } @keyframes pageHeroScroll { 0% { transform: scaleY(0); opacity: 0; } 40%, 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } } @media (max-width: 768px) { .page-hero-section { align-items: flex-end; padding-bottom: 14vh; } .page-hero-inner { max-width: 100%; } .page-hero-title { font-size: clamp(2.4rem, 10vw, 5rem) !important; } } /* ═══════════════════════════════════════════════════════════════ PROGRAMS PAGE ═══════════════════════════════════════════════════════════════ */ /* ── Programs Hero Bird Animation ── */ .page-hero-bird-wrap { position: absolute; right: 8%; top: 25%; width: 300px; height: 300px; z-index: 5; pointer-events: none; opacity: 0.8; } .bird-float { transform-origin: 100px 100px; animation: birdHover 4s ease-in-out infinite; } .bird-wing-left { transform-origin: 80px 100px; animation: flapLeft 0.8s ease-in-out infinite alternate; } .bird-wing-right { transform-origin: 120px 100px; animation: flapRight 0.8s ease-in-out infinite alternate; } @keyframes birdHover { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-18px) rotate(3deg); } } @keyframes flapLeft { 0% { transform: scaleY(1) skewX(0deg); } 100% { transform: scaleY(0.4) skewX(-15deg); } } @keyframes flapRight { 0% { transform: scaleY(1) skewX(0deg); } 100% { transform: scaleY(0.3) skewX(15deg); } } @media (max-width: 1024px) { .page-hero-bird-wrap { right: 2%; opacity: 0.4; transform: scale(0.7); } } @media (max-width: 768px) { .page-hero-bird-wrap { right: 0; top: auto; bottom: 10%; transform: scale(0.55); transform-origin: right bottom; opacity: 0.35; } } .programs-grid-section { padding: 8vh var(--spacing-container) 10vh; background: var(--bg-void); position: relative; } .programs-section-hdr { margin-bottom: 5vh; } .programs-section-tag { font-family: var(--font-head); font-size: 9px; letter-spacing: 0.24em; color: var(--accent-primary); opacity: 0.65; display: block; margin-bottom: 8px; } .programs-section-heading { font-family: var(--font-head); font-size: clamp(22px, 3vw, 38px); letter-spacing: 0.08em; color: var(--menu-text); margin-bottom: 14px; } .programs-section-line { width: 60px; height: 2px; background: var(--accent-primary); } .programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .prog-card { background: var(--bg-secondary); border: 1px solid rgba(67, 97, 238, 0.10); border-radius: 8px; padding: 32px 28px 28px; position: relative; overflow: hidden; transition: border-color 0.32s var(--easing-pro), box-shadow 0.32s var(--easing-pro); box-shadow: var(--shadow-card); display: flex; flex-direction: column; } .prog-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); transform: scaleX(0); transform-origin: left; transition: transform 0.42s var(--easing-pro); } .prog-card:hover { border-color: rgba(67, 97, 238, 0.28); box-shadow: 0 28px 64px rgba(15, 23, 42, 0.12); } .prog-card:hover::before { transform: scaleX(1); } .prog-card-num { font-family: var(--font-head); font-size: 9.5px; letter-spacing: 0.2em; color: var(--text-muted); opacity: 0.5; margin-bottom: 16px; } .prog-card-icon { width: 40px; height: 40px; margin-bottom: 16px; color: var(--accent-primary); flex-shrink: 0; } .prog-card-icon svg { width: 100%; height: 100%; } .prog-card-title { font-family: var(--font-head); font-size: clamp(14px, 1.4vw, 18px); letter-spacing: 0.06em; color: var(--menu-text); margin-bottom: 6px; } .prog-card-duration { display: block; font-family: var(--font-head); font-size: 9px; letter-spacing: 0.18em; color: var(--accent-primary); margin-bottom: 14px; } .prog-card-desc { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--text-muted); margin-bottom: 18px; flex-grow: 1; } .prog-card-skills { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .prog-card-skills li { font-family: var(--font-head); font-size: 8.5px; letter-spacing: 0.16em; color: var(--text-muted); border: 1px solid rgba(67, 97, 238, 0.14); padding: 3px 8px; border-radius: 2px; } .prog-card-cta { font-family: var(--font-head); font-size: 9px; letter-spacing: 0.22em; color: var(--accent-primary); text-decoration: none; transition: color 0.22s ease, letter-spacing 0.22s ease; align-self: flex-start; } .prog-card-cta:hover { color: var(--accent-secondary); letter-spacing: 0.28em; } .programs-stats-section { background: var(--bg-void); padding: 7vh var(--spacing-container); } .programs-stats-inner { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 32px; } .prog-stat { text-align: center; } .prog-stat-num { display: inline-block; font-family: var(--font-head); font-size: clamp(36px, 5vw, 60px); color: var(--accent-primary); line-height: 1; } .prog-stat-suffix { font-family: var(--font-head); font-size: clamp(20px, 2.5vw, 32px); color: var(--accent-primary); vertical-align: super; } .prog-stat-label { display: block; font-family: var(--font-head); font-size: 9px; letter-spacing: 0.22em; color: var(--text-muted); margin-top: 6px; } @media (max-width: 900px) { .programs-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .programs-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════ ADMISSIONS PAGE — ENHANCED (Section 19) Full cinematic: hero vortex canvas, mission brief, HUD panels ═══════════════════════════════════════════════════════════════ */ /* ── shared tag line ─────────────────────────────────────────── */ .adm-tag-line { display: block; font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-primary, #4361ee); margin-bottom: 0.75rem; } /* ── HERO ─────────────────────────────────────────────────────── */ .adm-hero-section { position: relative; min-height: 100vh; background: var(--bg-void); /* adapts: light=#F3F6FB / game=dark */ overflow: hidden; display: flex; align-items: center; padding: 100px var(--spacing-container, 5vw) 60px; gap: 6vw; } .adm-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* HUD corner brackets */ .adm-hud-corner { position: absolute; width: 28px; height: 28px; z-index: 2; pointer-events: none; } .adm-hud-corner::before, .adm-hud-corner::after { content: ''; position: absolute; background: var(--accent-primary, #4361ee); opacity: 0.7; } .adm-hud-corner::before { width: 2px; height: 100%; } .adm-hud-corner::after { width: 100%; height: 2px; } .adm-hud-corner--tl { top: 24px; left: 24px; } .adm-hud-corner--tl::before { top: 0; left: 0; } .adm-hud-corner--tl::after { top: 0; left: 0; } .adm-hud-corner--tr { top: 24px; right: 24px; } .adm-hud-corner--tr::before { top: 0; right: 0; left: auto; } .adm-hud-corner--tr::after { top: 0; right: 0; } .adm-hud-corner--bl { bottom: 24px; left: 24px; } .adm-hud-corner--bl::before { bottom: 0; top: auto; left: 0; } .adm-hud-corner--bl::after { bottom: 0; top: auto; left: 0; } .adm-hud-corner--br { bottom: 24px; right: 24px; } .adm-hud-corner--br::before { bottom: 0; top: auto; right: 0; left: auto; } .adm-hud-corner--br::after { bottom: 0; top: auto; right: 0; } /* HUD status bar */ .adm-hud-statusbar { position: absolute; top: 0; left: 0; right: 0; padding: 10px var(--spacing-container, 5vw); font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.18em; color: var(--text-muted, #64748b); display: flex; align-items: center; gap: 12px; z-index: 3; border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08)); } .adm-hud-dot { width: 6px; height: 6px; border-radius: 50%; background: #00cc88; box-shadow: 0 0 6px #00cc88; animation: adm-blink 1.8s ease-in-out infinite; flex-shrink: 0; } .adm-hud-sep { opacity: 0.3; } @keyframes adm-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } /* Hero text */ .adm-hero-content { position: relative; z-index: 2; flex: 1; max-width: 580px; } .adm-hero-tag { display: block; font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; color: var(--accent-primary, #4361ee); margin-bottom: 1.2rem; opacity: 0.85; } .adm-hero-title { font-family: var(--font-heading, 'Orbitron', monospace); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 900; color: var(--menu-text); line-height: 1; letter-spacing: -0.02em; margin-bottom: 1.25rem; text-shadow: 0 0 40px rgba(67, 97, 238, 0.18); } .adm-hero-title em { font-style: normal; color: var(--accent-primary, #4361ee); display: block; } .adm-hero-sub { font-size: clamp(0.95rem, 1.6vw, 1.1rem); color: var(--text-muted, #64748b); line-height: 1.65; margin-bottom: 2.2rem; } .adm-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 2.5rem; } .adm-hero-ghost-btn { /* Override .btn base so it's a clean text-link style with animated underline */ font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; color: var(--accent-primary, #4361ee); text-decoration: none; padding: 8px 0; border: none; background: transparent; position: relative; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s, gap 0.25s cubic-bezier(0.22, 1, 0.36, 1); } /* Animated underline */ .adm-hero-ghost-btn::after { content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 1.5px; background: var(--accent-primary, #4361ee); transform: scaleX(0.3); transform-origin: left; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s; opacity: 0.5; } .adm-hero-ghost-btn:hover { color: var(--accent-primary, #4361ee); gap: 10px; } .adm-hero-ghost-btn:hover::after { transform: scaleX(1); opacity: 1; } /* Game mode */ body.game-mode .adm-hero-ghost-btn { color: #00ffcc; } body.game-mode .adm-hero-ghost-btn::after { background: #00ffcc; } body.game-mode .adm-hero-ghost-btn:hover { color: #00ffcc; } /* Inline stat row */ .adm-hero-stats { display: flex; align-items: center; gap: 24px; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08)); } .adm-hero-stat-num { display: block; font-family: var(--font-heading, 'Orbitron', monospace); font-size: 1.15rem; font-weight: 900; color: var(--accent-primary, #4361ee); line-height: 1; } .adm-hero-stat-lbl { display: block; font-size: 0.62rem; color: var(--text-muted, #64748b); letter-spacing: 0.1em; margin-top: 3px; } .adm-hero-stat-div { width: 1px; height: 32px; background: var(--border-subtle, rgba(0, 0, 0, 0.08)); } /* Countdown clock */ .adm-countdown { position: relative; z-index: 2; flex-shrink: 0; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 28px 28px 22px; min-width: 280px; max-width: 340px; width: 100%; } /* HUD corner brackets */ .adm-countdown::before, .adm-countdown::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--accent-primary, #4361ee); border-style: solid; opacity: 0.6; } .adm-countdown::before { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 2px 0 0; } .adm-countdown::after { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 2px; } /* Header: DEADLINE IN / date */ .adm-countdown-header { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .adm-countdown-label { font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; } .adm-countdown-date { font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.8rem; font-weight: 700; color: var(--accent-primary, #4361ee); letter-spacing: 0.06em; } /* Units row — centre-align so the sep : sits at the vertical middle of the num boxes */ .adm-countdown-units { display: flex; align-items: center; /* all children share the same vertical axis */ justify-content: space-between; gap: 0; margin-bottom: 18px; } .adm-cd-unit { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; } .adm-cd-num { display: block; font-family: var(--font-heading, 'Orbitron', monospace); font-size: 1.75rem; font-weight: 900; color: #ffffff; line-height: 1; width: 54px; text-align: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 10px 6px 8px; letter-spacing: 0.02em; } .adm-cd-lbl { font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.38rem; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.32); text-transform: uppercase; white-space: nowrap; } /* Separator — sits at center of num boxes; translate up by half the label height */ .adm-cd-sep { font-family: var(--font-heading, 'Orbitron', monospace); font-size: 1.4rem; font-weight: 900; color: var(--accent-primary, #4361ee); opacity: 0.65; flex-shrink: 0; padding: 0 2px; /* Shift up so it aligns with num box center, not unit center (which includes lbl) */ transform: translateY(-10px); line-height: 1; } /* Progress track */ .adm-countdown-track { height: 2px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; margin-bottom: 12px; } .adm-countdown-fill { height: 100%; background: var(--accent-primary, #4361ee); border-radius: 2px; width: 0; transition: width 1s linear; box-shadow: 0 0 6px rgba(67, 97, 238, 0.5); } .adm-countdown-footnote { font-size: 0.55rem; color: rgba(255, 255, 255, 0.28); letter-spacing: 0.05em; text-align: center; } /* ── MISSION BRIEF (process steps) ───────────────────────────── */ .adm-brief-section { padding: 8vh var(--spacing-container, 5vw) 10vh; background: var(--bg-void); } .adm-brief-inner { max-width: 960px; margin: 0 auto; } .adm-brief-hdr { text-align: center; margin-bottom: 5vh; } .adm-brief-title { font-family: var(--font-heading, 'Orbitron', monospace); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -0.02em; color: var(--menu-text); margin-bottom: 0.5rem; } .adm-brief-sub { font-size: 1rem; color: var(--text-muted, rgba(100, 116, 139, 1)); } /* Timeline container */ .adm-brief-timeline { position: relative; padding-left: 80px; } /* Vertical track line */ .adm-brief-track { position: absolute; left: 28px; top: 20px; bottom: 20px; width: 2px; background: rgba(67, 97, 238, 0.12); border-radius: 1px; } .adm-brief-track-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, var(--accent-primary, #4361ee), rgba(67, 97, 238, 0.3)); transform: scaleY(0); transform-origin: top center; border-radius: 1px; box-shadow: 0 0 8px rgba(67, 97, 238, 0.4); } /* Individual entry */ .adm-brief-entry { display: flex; gap: 28px; margin-bottom: 3rem; position: relative; } .adm-brief-entry:last-child { margin-bottom: 0; } /* Node (number + dot) */ .adm-brief-node { position: absolute; left: -68px; top: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; } .adm-brief-idx { font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent-primary, #4361ee); opacity: 0.7; } .adm-brief-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent-primary, #4361ee); background: var(--bg-void); box-shadow: 0 0 10px rgba(67, 97, 238, 0.4); } .adm-brief-node--final .adm-brief-dot { background: var(--accent-primary, #4361ee); box-shadow: 0 0 16px rgba(67, 97, 238, 0.6); } /* Card */ .adm-brief-card { flex: 1; background: var(--bg-secondary); border: 1px solid rgba(67, 97, 238, 0.12); border-radius: 4px; padding: 1.5rem 1.75rem; position: relative; transition: border-color 0.3s, box-shadow 0.3s; } .adm-brief-card:hover { border-color: rgba(67, 97, 238, 0.35); box-shadow: 0 0 24px rgba(67, 97, 238, 0.1); } /* HUD bracket on card */ .adm-brief-card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 16px; height: 16px; border-top: 2px solid var(--accent-primary, #4361ee); border-left: 2px solid var(--accent-primary, #4361ee); border-radius: 2px 0 0 0; opacity: 0.5; } .adm-brief-card--final { border-color: rgba(67, 97, 238, 0.3); background: linear-gradient(135deg, rgba(67, 97, 238, 0.06), var(--bg-secondary)); } .adm-brief-card-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(67, 97, 238, 0.1); } .adm-brief-status { font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.48rem; font-weight: 700; letter-spacing: 0.18em; color: rgba(67, 97, 238, 0.7); } .adm-brief-status--go { color: #00cc88; text-shadow: 0 0 8px rgba(0, 204, 136, 0.5); } .adm-brief-meta { font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.44rem; letter-spacing: 0.1em; color: var(--text-muted, #64748b); } .adm-brief-card-title { font-family: var(--font-heading, 'Orbitron', monospace); font-size: 1.05rem; font-weight: 700; color: var(--menu-text); margin-bottom: 0.6rem; letter-spacing: 0.02em; } .adm-brief-card-desc { font-size: 0.9rem; color: var(--text-muted, #64748b); line-height: 1.6; margin-bottom: 1rem; } .adm-brief-card-tags { display: flex; gap: 8px; flex-wrap: wrap; } .adm-tag-chip { font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.44rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent-primary, #4361ee); border: 1px solid rgba(67, 97, 238, 0.25); padding: 3px 8px; border-radius: 2px; opacity: 0.8; } /* ── ACCESS CONTROL (requirements + batches) ──────────────────── */ /* (keeps existing .adm-req-grid, .adm-batch-card rules below) */ /* New overrides for enhanced batch cards */ .adm-batch-card { position: relative; overflow: visible; } .adm-batch-card--open { border-color: rgba(67, 97, 238, 0.3) !important; } .adm-batch-card-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(67, 97, 238, 0.1); } .adm-batch-body { display: flex; flex-direction: column; gap: 4px; margin-bottom: 1.25rem; grid-column: 1 / -1; } .adm-batch-dot { width: 7px; height: 7px; border-radius: 50%; background: #00cc88; box-shadow: 0 0 6px #00cc88; display: inline-block; margin-right: 5px; animation: adm-blink 1.8s ease-in-out infinite; } .adm-batch-cta { grid-column: 1 / -1; width: 100%; display: inline-flex; justify-content: center; align-items: center; text-align: center; font-size: 0.72rem !important; letter-spacing: 0.12em; padding: 0.75rem 1.5rem; white-space: nowrap; text-decoration: none; margin-top: 0.25rem; } /* ── FEES SECTION (theme-adaptive) ───────────────────────────── */ .adm-fees-section { background: var(--bg-secondary); /* white in light / dark in game */ padding: 8vh var(--spacing-container, 5vw) 10vh; } .adm-fees-inner { max-width: 860px; margin: 0 auto; } .adm-fees-hdr { margin-bottom: 3.5rem; } .adm-fees-title { font-family: var(--font-heading, 'Orbitron', monospace); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 900; color: var(--menu-text); letter-spacing: -0.02em; margin-bottom: 0.5rem; } .adm-fees-sub { font-size: 0.92rem; color: var(--text-muted, #64748b); } .adm-fees-grid { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: 4px; overflow: hidden; } .adm-fee-item { display: flex; align-items: center; gap: 24px; padding: 1.4rem 1.75rem; border-bottom: 1px solid var(--border-subtle); transition: background 0.2s; } .adm-fee-item:last-child { border-bottom: none; } .adm-fee-item:hover { background: rgba(67, 97, 238, 0.04); } .adm-fee-item__idx { font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text-muted, #64748b); opacity: 0.5; flex-shrink: 0; width: 24px; } .adm-fee-item__info { flex: 1; display: flex; flex-direction: column; gap: 3px; } .adm-fee-item__label { font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.78rem; font-weight: 700; color: var(--menu-text); letter-spacing: 0.04em; } .adm-fee-item__sub { font-size: 0.75rem; color: var(--text-muted, #64748b); } .adm-fee-item__price { font-family: var(--font-heading, 'Orbitron', monospace); font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 900; color: var(--accent-primary, #4361ee); text-align: right; flex-shrink: 0; line-height: 1; } .adm-fee-item__price small { display: block; font-size: 0.4em; font-weight: 400; color: var(--text-muted, #64748b); margin-top: 3px; letter-spacing: 0.06em; } .adm-fee-item--scholarship .adm-fee-item__price--sch { color: #9c4dcc; } .adm-fees-note { font-size: 0.72rem; color: var(--text-muted, #64748b); opacity: 0.65; margin-top: 1.5rem; line-height: 1.5; } /* Game mode: restore dark cyberpunk look */ body.game-mode .adm-fees-section { background: #04050f !important; } body.game-mode .adm-fees-grid { border-color: rgba(0, 255, 204, 0.1); } body.game-mode .adm-fee-item { border-bottom-color: rgba(0, 255, 204, 0.06); } body.game-mode .adm-fee-item:hover { background: rgba(0, 255, 204, 0.03); } body.game-mode .adm-fee-item__idx { color: rgba(0, 255, 204, 0.3); opacity: 1; } body.game-mode .adm-fee-item__label { color: rgba(255, 255, 255, 0.85); } body.game-mode .adm-fee-item__sub { color: rgba(255, 255, 255, 0.35); } body.game-mode .adm-fee-item__price small { color: rgba(255, 255, 255, 0.3); } body.game-mode .adm-fees-note { color: rgba(255, 255, 255, 0.22); opacity: 1; } /* ── LIGHT MODE: hero + countdown overrides ──────────────────── */ body:not(.game-mode) .adm-hero-section { background: var(--bg-void); } body:not(.game-mode) .adm-hero-title { text-shadow: 0 0 40px rgba(67, 97, 238, 0.12); } body:not(.game-mode) .adm-hud-statusbar { color: var(--text-muted, #64748b); border-bottom-color: var(--border-subtle, rgba(0, 0, 0, 0.08)); background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); } body:not(.game-mode) .adm-hud-corner::before, body:not(.game-mode) .adm-hud-corner::after { background: var(--accent-primary, #4361ee); opacity: 0.4; } body:not(.game-mode) .adm-countdown { background: rgba(255, 255, 255, 0.75); border-color: rgba(67, 97, 238, 0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(67, 97, 238, 0.08); } body:not(.game-mode) .adm-countdown-header { border-bottom-color: rgba(67, 97, 238, 0.1); } body:not(.game-mode) .adm-countdown-label { color: var(--text-muted, #64748b); } body:not(.game-mode) .adm-countdown-track { background: rgba(67, 97, 238, 0.08); } body:not(.game-mode) .adm-countdown-footnote { color: var(--text-muted, #64748b); } body:not(.game-mode) .adm-cd-num { color: var(--menu-text); background: rgba(67, 97, 238, 0.06); border-color: rgba(67, 97, 238, 0.14); } body:not(.game-mode) .adm-cd-lbl { color: var(--text-muted, #64748b); } body:not(.game-mode) .adm-cd-sep { color: var(--accent-primary, #4361ee); opacity: 0.6; } body:not(.game-mode) .adm-countdown::before { border-color: var(--accent-primary, #4361ee); opacity: 0.4; } body:not(.game-mode) .adm-countdown::after { border-color: var(--accent-primary, #4361ee); opacity: 0.4; } /* ── INTERACTIVITY: brief card slide + transition ─────────────── */ .adm-brief-card { transition: border-color 0.3s, box-shadow 0.3s, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .adm-brief-card:hover { transform: translateX(6px); } /* ── INTERACTIVITY: countdown pulse glow on hover ─────────────── */ .adm-countdown { transition: box-shadow 0.3s, border-color 0.3s; } .adm-countdown:hover { border-color: rgba(67, 97, 238, 0.4); box-shadow: 0 0 32px rgba(67, 97, 238, 0.18), 0 8px 24px rgba(67, 97, 238, 0.1); } @keyframes adm-cd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } .adm-countdown:hover .adm-cd-num { animation: adm-cd-pulse 1.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .adm-countdown:hover .adm-cd-num { animation: none; } } /* ── INTERACTIVITY: batch card 3D tilt setup ──────────────────── */ .adm-batch-col { perspective: 900px; } .adm-batch-card { transform-style: preserve-3d; transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s, border-color 0.2s; will-change: transform; } .adm-batch-card:hover { box-shadow: 0 20px 48px rgba(67, 97, 238, 0.16); } /* ── INTERACTIVITY: Apply Now shimmer sweep ───────────────────── */ .adm-hero-actions .btn-primary { position: relative; overflow: hidden; } .adm-hero-actions .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .adm-hero-actions .btn-primary:hover::after { transform: translateX(100%); } @media (prefers-reduced-motion: reduce) { .adm-hero-actions .btn-primary::after { display: none; } } /* ── GAME MODE overrides ──────────────────────────────────────── */ body.game-mode .adm-hero-section { background: #050510 !important; } body.game-mode .adm-hero-title { text-shadow: 0 0 40px rgba(0, 255, 204, 0.35); } body.game-mode .adm-hero-title em { color: #00ffcc; } body.game-mode .adm-hero-stat-num { color: #00ffcc; } body.game-mode .adm-hud-corner::before, body.game-mode .adm-hud-corner::after { background: #00ffcc; } body.game-mode .adm-countdown { border-color: rgba(0, 255, 204, 0.2); } body.game-mode .adm-countdown::before { border-color: #00ffcc; } body.game-mode .adm-countdown::after { border-color: #ff00ff; } body.game-mode .adm-countdown-date { color: #00ffcc; } body.game-mode .adm-cd-num { color: #00ffcc; border-color: rgba(0, 255, 204, 0.15); } body.game-mode .adm-cd-sep { color: #00ffcc; } body.game-mode .adm-countdown-fill { background: #00ffcc; box-shadow: 0 0 8px rgba(0, 255, 204, 0.5); } body.game-mode .adm-hero-tag { color: #00ffcc; } body.game-mode .adm-tag-line { color: #00ffcc; } body.game-mode .adm-tag-chip { color: #00ffcc; border-color: rgba(0, 255, 204, 0.25); } body.game-mode .adm-brief-track { background: rgba(0, 255, 204, 0.12); } body.game-mode .adm-brief-track-fill { background: linear-gradient(to bottom, #00ffcc, rgba(0, 255, 204, 0.3)); box-shadow: 0 0 8px rgba(0, 255, 204, 0.4); } body.game-mode .adm-brief-dot { border-color: #00ffcc; box-shadow: 0 0 10px rgba(0, 255, 204, 0.4); } body.game-mode .adm-brief-node--final .adm-brief-dot { background: #00ffcc; box-shadow: 0 0 16px rgba(0, 255, 204, 0.6); } body.game-mode .adm-brief-card { border-color: rgba(0, 255, 204, 0.12); background: rgba(0, 255, 204, 0.03); } body.game-mode .adm-brief-card:hover { border-color: rgba(0, 255, 204, 0.35); box-shadow: 0 0 24px rgba(0, 255, 204, 0.1); } body.game-mode .adm-brief-card::before { border-color: #00ffcc; } body.game-mode .adm-brief-card--final { border-color: rgba(0, 255, 204, 0.3); background: linear-gradient(135deg, rgba(0, 255, 204, 0.06), rgba(0, 255, 204, 0.02)); } body.game-mode .adm-brief-card-hdr { border-color: rgba(0, 255, 204, 0.1); } body.game-mode .adm-brief-status { color: rgba(0, 255, 204, 0.7); } body.game-mode .adm-brief-idx { color: #00ffcc; } body.game-mode .adm-fee-item__price { color: #00ffcc; } body.game-mode .adm-fee-item--scholarship .adm-fee-item__price--sch { color: #ff00ff; } body.game-mode .adm-fee-item { border-color: rgba(0, 255, 204, 0.06); } body.game-mode .adm-fee-item:hover { background: rgba(0, 255, 204, 0.025); } body.game-mode .adm-fees-grid { border-color: rgba(0, 255, 204, 0.1); } body.game-mode .adm-brief-section { background: #04050f; } body.game-mode .adm-batch-card--open { border-color: rgba(0, 255, 204, 0.3) !important; } body.game-mode .adm-batch-cta.btn-primary { background: #00ffcc; color: #050510; } body.game-mode .adm-countdown:hover { border-color: rgba(0, 255, 204, 0.5); box-shadow: 0 0 32px rgba(0, 255, 204, 0.2), 0 8px 24px rgba(0, 255, 204, 0.12); } body.game-mode .adm-batch-card:hover { box-shadow: 0 20px 48px rgba(0, 255, 204, 0.12); } /* ── MOBILE RESPONSIVE ────────────────────────────────────────── */ @media (max-width: 900px) { .adm-hero-section { flex-direction: column; align-items: flex-start; padding: 90px 5vw 60px; gap: 3rem; } .adm-countdown { min-width: 0; max-width: 100%; width: 100%; } .adm-hero-content { max-width: 100%; } } @media (max-width: 640px) { .adm-brief-timeline { padding-left: 60px; } .adm-brief-node { left: -50px; } .adm-hero-title { font-size: clamp(2rem, 10vw, 3rem); } .adm-countdown { min-width: 240px; padding: 20px 18px 16px; } .adm-cd-num { font-size: 1.4rem; width: 44px; padding: 8px 4px 6px; } .adm-cd-sep { font-size: 1.2rem; transform: translateY(-8px); } .adm-hero-stats { gap: 14px; } .adm-fee-item { flex-wrap: wrap; } .adm-fee-item__price { margin-left: auto; } } /* ── ORIGINAL ADMISSIONS PAGE CLASSES (legacy, kept for compat) ── */ .admissions-process-section { padding: 8vh var(--spacing-container) 10vh; background: var(--bg-void); } .admissions-section-hdr { margin-bottom: 5vh; } .admissions-section-tag { font-family: var(--font-head); font-size: 9px; letter-spacing: 0.24em; color: var(--accent-primary); opacity: 0.65; display: block; margin-bottom: 8px; } .admissions-section-heading { font-family: var(--font-head); font-size: clamp(22px, 3vw, 38px); letter-spacing: 0.08em; color: var(--menu-text); margin-bottom: 14px; } .admissions-section-line { width: 60px; height: 2px; background: var(--accent-primary); } .admissions-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } .admissions-steps::before { content: ''; position: absolute; top: 22px; left: 12.5%; right: 12.5%; height: 1px; background: linear-gradient(90deg, var(--accent-primary) 0%, rgba(67, 97, 238, 0.18) 100%); z-index: 0; } .adm-step { padding: 0 16px; position: relative; z-index: 1; } .adm-step-num { font-family: var(--font-head); font-size: 9px; letter-spacing: 0.22em; color: var(--accent-primary); background: var(--bg-void); display: inline-block; padding-right: 8px; margin-bottom: 18px; } .adm-step-body { border: 1px solid rgba(67, 97, 238, 0.10); border-radius: 6px; padding: 24px 20px; background: var(--bg-secondary); box-shadow: var(--shadow-card); transition: border-color 0.28s var(--easing-pro), box-shadow 0.28s var(--easing-pro); height: 100%; } .adm-step-body:hover { border-color: rgba(67, 97, 238, 0.3); box-shadow: 0 22px 52px rgba(15, 23, 42, 0.10); } .adm-step-icon { width: 36px; height: 36px; color: var(--accent-primary); display: block; margin-bottom: 14px; } .adm-step-title { font-family: var(--font-head); font-size: clamp(12px, 1.2vw, 16px); letter-spacing: 0.06em; color: var(--menu-text); margin-bottom: 10px; } .adm-step-desc { font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: var(--text-muted); } .admissions-requirements-section { padding: 8vh var(--spacing-container); background: var(--bg-secondary); border-top: 1px solid rgba(67, 97, 238, 0.08); border-bottom: 1px solid rgba(67, 97, 238, 0.08); } .adm-req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: start; } .adm-req-tag { font-family: var(--font-head); font-size: 9px; letter-spacing: 0.24em; color: var(--accent-primary); opacity: 0.65; display: block; margin-bottom: 8px; } .adm-req-heading { font-family: var(--font-head); font-size: clamp(20px, 2.5vw, 32px); letter-spacing: 0.06em; color: var(--menu-text); margin-bottom: 24px; } .adm-req-list { list-style: none; display: flex; flex-direction: column; gap: 0; } .adm-req-item { display: flex; align-items: center; gap: 14px; font-family: var(--font-body); font-size: 16px; color: var(--menu-text); padding: 14px 0; border-bottom: 1px solid rgba(67, 97, 238, 0.07); } .adm-req-check { font-family: var(--font-head); font-size: 11px; color: var(--accent-primary); flex-shrink: 0; width: 22px; } .adm-batch-cards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; } .adm-batch-card { border: 1px solid rgba(67, 97, 238, 0.14); border-radius: 6px; padding: 20px 24px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; background: var(--bg-void); box-shadow: var(--shadow-card); align-items: center; } .adm-batch-month { font-family: var(--font-head); font-size: 12px; letter-spacing: 0.12em; color: var(--menu-text); } .adm-batch-status { font-family: var(--font-head); font-size: 8.5px; letter-spacing: 0.2em; padding: 3px 10px; border-radius: 2px; white-space: nowrap; } .adm-batch-open { color: var(--success); background: var(--success-dim); border: 1px solid rgba(34, 197, 94, 0.28); } .adm-batch-soon { color: var(--text-muted); background: rgba(100, 116, 139, 0.07); border: 1px solid rgba(100, 116, 139, 0.18); } .adm-batch-info, .adm-batch-seats { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); grid-column: 1 / -1; } .adm-scholarship-note { font-family: var(--font-head); font-size: 9px; letter-spacing: 0.18em; color: var(--accent-secondary); opacity: 0.8; } .admissions-cta-section { padding: 10vh var(--spacing-container); background: var(--bg-void); /* light=#F3F6FB / game=dark — adapts to theme */ text-align: center; } .admissions-cta-inner { max-width: 600px; margin: 0 auto; } .admissions-cta-tag { font-family: var(--font-head); font-size: 9px; letter-spacing: 0.28em; color: var(--accent-primary); display: block; margin-bottom: 14px; opacity: 0.65; } .admissions-cta-heading { font-family: var(--font-head); font-size: clamp(24px, 3.5vw, 48px); letter-spacing: 0.06em; color: var(--menu-text); margin-bottom: 12px; } .admissions-cta-sub { font-family: var(--font-body); font-size: 16px; color: var(--text-muted, #64748b); margin-bottom: 32px; } /* Game mode: dark bg + white text */ body.game-mode .admissions-cta-section { background: #060a14 !important; } body.game-mode .admissions-cta-heading { color: rgba(255, 255, 255, 0.92); } body.game-mode .admissions-cta-sub { color: rgba(255, 255, 255, 0.38); } body.game-mode .admissions-cta-tag { opacity: 0.85; } .admissions-cta-btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head); font-size: 11px; letter-spacing: 0.22em; color: #fff; background: var(--accent-primary); padding: 16px 32px; border-radius: 4px; text-decoration: none; transition: background 0.28s var(--easing-pro), transform 0.22s var(--easing-pro); } .admissions-cta-btn:hover { background: var(--accent-secondary); transform: translateX(4px); } @media (max-width: 768px) { .admissions-steps { grid-template-columns: 1fr 1fr; gap: 20px; } .admissions-steps::before { display: none; } .adm-req-grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 480px) { .admissions-steps { grid-template-columns: 1fr; } } /* -- GTA-6 Section Stacking ------------------------------------------------ Scale-push animation originates from top so sections recede into viewport. will-change hints the compositor for GPU-accelerated transforms. --------------------------------------------------------------------- */ section[style*="z-index"] { transform-origin: center top; will-change: transform, opacity; } /* ── Footer mid-breakpoint (tablets in landscape) ────────────────────── */ @media (max-width: 900px) and (min-width: 769px) { .footer-links-group { grid-template-columns: repeat(3, 1fr); } .footer-cta-col { width: 100%; } } /* ── Footer small mobile: collapse link cols ─────────────────────────── */ @media (max-width: 520px) { .footer-links-group { grid-template-columns: 1fr 1fr; } } /* ========================================= iIDEA — Custom Gaming Cursor System ========================================= */ /* Hide custom cursor on all touch/coarse-pointer devices (mobile safety net) */ @media (pointer: coarse) { #g-cursor { display: none !important; } html, html * { cursor: auto !important; } } /* Use JS class to ensure we only hide system cursor if custom cursor actually mounted */ html.has-custom-cursor { /* Hide system cursors on fine pointer devices */ cursor: none !important; } html.has-custom-cursor body, html.has-custom-cursor a, html.has-custom-cursor button, html.has-custom-cursor [role="button"], html.has-custom-cursor input, html.has-custom-cursor textarea, html.has-custom-cursor select, html.has-custom-cursor label { cursor: none !important; } /* Core cursor container */ #g-cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 999999; will-change: transform; /* Fallback color if page namespace isn't caught */ color: var(--accent-primary, #4361ee); /* Tight, hard drop-shadow ensures legibility on any background */ filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.85)); transition: color 0.3s ease; } /* SVG Base styling */ #g-cursor svg { display: block; overflow: visible; /* Default transition for hover/click scale */ transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); } /* Click compression */ .gc-click svg { transform: scale(0.85); } /* Page-specific Theme Colors mapped to Barber JS namespaces */ .gc-home { color: #ffffff !important; } .gc-about { color: #4361ee !important; } .gc-programs { color: #f72585 !important; } .gc-instructors { color: #e8e8e8 !important; } .gc-admissions { color: #ffd166 !important; } .gc-contact { color: #10b981 !important; } /* ========================================= SVG Internal Animations (Referenced by cursor.js macros) ========================================= */ /* Home FPS Crosshair: Breathing outer ring */ .c-ring { animation: gc-pulse 2.5s infinite ease-in-out; transform-origin: 21px 21px; } /* Programs Dual Hex Tech */ .c-hex-outer { animation: gc-spin-cw 8s linear infinite; transform-origin: 21px 21px; } .c-hex-inner { animation: gc-spin-ccw 5s linear infinite; transform-origin: 21px 21px; } /* Admissions Bullseye Target */ .c-ring-out { animation: gc-spin-cw 12s linear infinite; transform-origin: 23px 23px; } .c-ring-mid { animation: gc-spin-ccw 8s linear infinite; transform-origin: 23px 23px; } /* Contact Radar Sweep: ping pulse */ .c-ping { animation: gc-radar-ping 2s infinite ease-out; transform-origin: 23px 23px; } /* Keyframes */ @keyframes gc-pulse { 0%, 100% { transform: scale(0.95); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 0.4; } } @keyframes gc-spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes gc-spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes gc-radar-ping { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(3.5); opacity: 0; } } /* ═══════════════════════════════════════════════════════════════════ PHANTOM GRID — Home Hero v3 ═══════════════════════════════════════════════════════════════════ */ .hg-hero { position: relative; height: 280vh; } .hg-sticky { position: sticky; top: 0; height: 100vh; min-height: 580px; overflow: hidden; background: var(--bg-void, #030612); } /* ── Canvas layers ── */ .hg-canvas, /* Merged grid+bird canvas — replaces .hg-grid-cv and .hg-bird-cv */ .hg-game-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: auto; cursor: crosshair; } .hg-canvas { z-index: 0; } /* ── HUD elements ── */ .hg-hud { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 0.15rem; font-family: "JetBrains Mono", "Courier New", monospace; font-size: 0.60rem; line-height: 1.45; letter-spacing: 0.1em; pointer-events: none; user-select: none; } .hg-hud--tl { top: 5.2rem; left: 1.2rem; } .hg-hud--tr { top: 5.2rem; right: 1.2rem; align-items: flex-end; } .hg-hud--bl { bottom: 1.4rem; left: 1.2rem; flex-direction: row; align-items: center; gap: 0.45rem; } .hg-hud--br { bottom: 1.4rem; right: 1.2rem; align-items: flex-end; } .hg-hud-label { font-size: 0.50rem; letter-spacing: 0.18em; color: var(--accent-primary, #4361ee); text-transform: uppercase; } body.game-mode .hg-hud-label { color: #00FFCC; } .hg-hud-val { color: rgba(215, 225, 255, 0.80); text-shadow: 0 1px 5px rgba(0, 3, 18, 0.85); } /* Kill counter */ .hg-hud-kills { font-size: 1.55rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1; color: var(--text-primary, #f0f2ff); transition: color 0.08s, text-shadow 0.08s; } .hg-hud-kills.hg-hud-flash { color: #ff4455; text-shadow: 0 0 14px rgba(255, 50, 65, 0.7); } body.game-mode .hg-hud-kills { color: #00FFCC; } body.game-mode .hg-hud-kills.hg-hud-flash { color: #ff4455; text-shadow: 0 0 14px rgba(255, 50, 65, 0.8); } .hg-hud-kills-tip { font-size: 0.48rem; letter-spacing: 0.14em; color: rgba(200, 210, 255, 0.28); text-transform: uppercase; } /* Status dot */ .hg-hud-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #00cc66; box-shadow: 0 0 6px rgba(0, 204, 100, 0.65); animation: hgDot 2.4s ease-in-out infinite; } @keyframes hgDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ── Content panels ── */ .hg-panel { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; visibility: hidden; pointer-events: none; will-change: transform, opacity; } .hg-panel--left { left: var(--spacing-container, 6vw); max-width: 440px; padding: 2.5rem 3rem; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } body.game-mode .hg-panel--left { background: rgba(5, 7, 20, 0.70); border-color: rgba(0, 255, 204, 0.2); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(0, 255, 204, 0.1); } .hg-panel--right { right: var(--spacing-container, 6vw); display: flex; flex-direction: column; gap: 1.8rem; align-items: flex-end; text-align: right; max-width: 240px; padding: 2rem 2.5rem; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } body.game-mode .hg-panel--right { background: rgba(5, 7, 20, 0.70); border-color: rgba(0, 255, 204, 0.2); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(0, 255, 204, 0.1); } .hg-panel a { pointer-events: auto; } /* ── Eyebrow ── */ .hg-eyebrow { font-size: clamp(0.56rem, 0.82vw, 0.70rem); font-weight: 600; letter-spacing: 0.22em; color: var(--accent-primary, #4361ee); text-transform: uppercase; margin-bottom: 1rem; font-family: "JetBrains Mono", "Courier New", monospace; text-shadow: 0 1px 8px rgba(0, 3, 18, 0.90); } body.game-mode .hg-eyebrow { color: #00FFCC; } /* ── Headline ── */ .hg-headline { margin: 0 0 1.5rem; line-height: 0.9; } .hg-headline-line { display: block; overflow: hidden; } .hg-hl-inner { display: block; font-size: clamp(2.8rem, 7.8vw, 7.2rem); font-weight: 900; letter-spacing: -0.04em; color: var(--text-primary, #f0f2ff); line-height: 1; } .hg-accent .hg-hl-inner { color: var(--accent-primary, #4361ee); } body.game-mode .hg-accent .hg-hl-inner { color: #00FFCC; } /* ── Sub ── */ .hg-sub { font-size: clamp(0.78rem, 1.1vw, 0.94rem); line-height: 1.70; color: var(--text-main, #0F172A); margin: 0 0 1.5rem; text-shadow: none; } body.game-mode .hg-sub { color: rgba(220, 228, 255, 0.90); text-shadow: 0 1px 8px rgba(0, 3, 18, 0.80); } /* ── CTAs ── */ .hg-actions { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; } .hg-cta-primary { display: inline-flex; align-items: center; padding: 0.72rem 1.55rem; background: var(--accent-primary, #4361ee); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; border-radius: 3px; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; font-family: "JetBrains Mono", "Courier New", monospace; } .hg-cta-primary:hover { background: #3451d4; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(67, 97, 238, 0.42); } body.game-mode .hg-cta-primary { background: #00FFCC; color: #000; } body.game-mode .hg-cta-primary:hover { background: #00e0b5; box-shadow: 0 8px 26px rgba(0, 255, 204, 0.38); } .hg-cta-secondary { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; color: var(--text-main, #0F172A); text-decoration: none; transition: color 0.2s, opacity 0.2s; font-family: "JetBrains Mono", "Courier New", monospace; text-shadow: none; } .hg-cta-secondary:hover { color: var(--accent-primary, #4361ee); } body.game-mode .hg-cta-secondary { color: rgba(215, 222, 255, 0.78); text-shadow: 0 1px 6px rgba(0, 3, 18, 0.70); } body.game-mode .hg-cta-secondary:hover { color: #fff; } /* ── Stats ── */ .hg-stat { display: flex; flex-direction: column; gap: 0.20rem; } .hg-stat-n { font-size: clamp(1.7rem, 2.8vw, 2.6rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--text-main, #0F172A); text-shadow: none; } .hg-stat-l { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.45; color: var(--text-muted, #64748B); text-transform: uppercase; font-family: "JetBrains Mono", "Courier New", monospace; text-shadow: none; } body.game-mode .hg-stat-n { color: #00FFCC; } /* ── Mobile ── */ @media (max-width: 768px) { .hg-hero { height: 220vh; } .hg-panel--left { left: 5vw; right: 5vw; top: auto; bottom: 5.5rem; transform: none; max-width: 100%; } .hg-panel--right { display: none; } .hg-hl-inner { font-size: clamp(2.4rem, 11.5vw, 4.5rem); } .hg-sub { max-width: 100%; } .hg-hud { font-size: 0.54rem; } .hg-hud--tl { top: 4.8rem; left: 0.9rem; } .hg-hud--tr { top: 4.8rem; right: 0.9rem; } .hg-hud--bl, .hg-hud--br { display: none; } .hg-hud-kills { font-size: 1.0rem; } } /* ── Header: transparent while scrolling inside hero section ── */ /* ── PROGRAMS PAGE — game mode ───────────────────────────────── */ body.game-mode .prog-card { border-color: rgba(0, 255, 204, 0.10); background: var(--bg-void); } body.game-mode .prog-card:hover { border-color: rgba(0, 255, 204, 0.3); box-shadow: 0 12px 40px rgba(0, 255, 204, 0.08); } /* ── ADMISSIONS PAGE — game mode ──────────────────────────────── */ body.game-mode .adm-step-body { border-color: rgba(0, 255, 204, 0.10); background: rgba(0, 255, 204, 0.02); } body.game-mode .adm-step-body:hover { border-color: rgba(0, 255, 204, 0.3); } body.game-mode .admissions-steps::before { background: linear-gradient(90deg, var(--accent-primary) 0%, rgba(0, 255, 204, 0.1) 100%); } /* ── HEADER transparent on page hero ─────────────────────────── */ .site-header.hg-is-hero { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border-bottom-color: transparent !important; } .site-header.hg-is-hero::after { opacity: 0 !important; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .hg-hero { height: 100vh; } .hg-sticky { position: relative; } .hg-panel { visibility: visible !important; opacity: 1 !important; transform: translateY(-50%) !important; } @media (max-width: 768px) { .hg-panel--left { transform: none !important; } } .hg-game-cv { display: none; } } /* ========================================= ENHANCEMENT LAYER — Added 2026-03-18 Accessibility, Focus, Skip Link, Scroll Reveals, Utility Classes ========================================= */ /* ── Skip to Main Content ─────────────────────────────── */ .skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 99999; padding: 0.6rem 1.4rem; background: var(--accent-primary); color: #fff; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; border-radius: var(--radius-md); text-decoration: none; transform: translateY(calc(-100% - 1.5rem)); transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 20px rgba(var(--accent-primary-rgb), 0.4); outline: none; } .skip-link:focus { transform: translateY(0); box-shadow: 0 8px 30px rgba(var(--accent-primary-rgb), 0.5); } /* ── Visually Hidden (accessible to screen readers) ──── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ── Enhanced Focus Visible ───────────────────────────── */ /* Remove all default outlines, add consistent focus ring */ *:focus { outline: none; } *:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; border-radius: var(--radius-sm); } /* Override: buttons need slightly larger ring */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 4px; border-radius: var(--radius-md); } /* Inputs keep inset glow */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent-primary) !important; box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.18) !important; } /* Game-mode focus glow */ body.game-mode *:focus-visible { outline-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.25); } /* ── Scroll Anchor Offset (compensate for sticky header) */ [id] { scroll-margin-top: 5rem; } /* ── Scroll Reveal System ─────────────────────────────── */ /* JS adds .is-visible when element enters viewport */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* Stagger children */ [data-reveal-stagger]>* { opacity: 0; transform: translateY(24px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } [data-reveal-stagger].is-visible>* { opacity: 1; transform: translateY(0); } /* Stagger delay cascade (up to 8 children) */ [data-reveal-stagger].is-visible>*:nth-child(1) { transition-delay: 0ms; } [data-reveal-stagger].is-visible>*:nth-child(2) { transition-delay: 80ms; } [data-reveal-stagger].is-visible>*:nth-child(3) { transition-delay: 160ms; } [data-reveal-stagger].is-visible>*:nth-child(4) { transition-delay: 240ms; } [data-reveal-stagger].is-visible>*:nth-child(5) { transition-delay: 320ms; } [data-reveal-stagger].is-visible>*:nth-child(6) { transition-delay: 400ms; } [data-reveal-stagger].is-visible>*:nth-child(7) { transition-delay: 480ms; } [data-reveal-stagger].is-visible>*:nth-child(8) { transition-delay: 560ms; } /* Respect reduced motion — reveal instantly */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-stagger]>* { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── Lazy Image Fade-in ───────────────────────────────── */ img[loading="lazy"] { opacity: 0; transition: opacity 0.5s ease; } img[loading="lazy"].is-loaded, img[loading="lazy"]:not([src=""]) { opacity: 1; } /* ── Text truncation utilities ───────────────────────── */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Form field error role ───────────────────────────── */ .field-error[role="alert"] { display: block; min-height: 1.2em; } /* ========================================================================= VISUAL ENHANCEMENT LAYER v2 Based on DIAGNOSIS.md findings — appended to preserve existing code. ========================================================================= */ /* ── 1. SCROLL PROGRESS BAR ─────────────────────────────────────────────── */ #scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); z-index: calc(var(--z-header) + 1); pointer-events: none; transform-origin: left center; will-change: width; transition: opacity 0.3s ease; } body.game-mode #scroll-progress { background: linear-gradient(90deg, #00ffcc 0%, #ff00ff 100%); box-shadow: 0 0 8px rgba(0, 255, 204, 0.5); } /* ── 2. SCROLL-TO-TOP BUTTON ────────────────────────────────────────────── */ #scroll-top-btn { position: fixed; bottom: 64px; /* sit above the game-mode toggle */ right: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-primary); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(67, 97, 238, 0.35); opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease; z-index: 999996; } #scroll-top-btn.visible { opacity: 1; transform: translateY(0); } #scroll-top-btn:hover { background: var(--accent-secondary); box-shadow: 0 4px 20px rgba(114, 9, 183, 0.4); } #scroll-top-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; } #scroll-top-btn svg { pointer-events: none; } body.game-mode #scroll-top-btn { background: #00ffcc; color: #050510; box-shadow: 0 4px 16px rgba(0, 255, 204, 0.35); } body.game-mode #scroll-top-btn:hover { background: #ff00ff; box-shadow: 0 4px 20px rgba(255, 0, 255, 0.4); } /* ── 3. CONTRAST & READABILITY FIXES ───────────────────────────────────── */ /* Ensure body text in content sections is always readable */ body:not(.game-mode) .contact-hero-sub, body:not(.game-mode) .showcase-sub, body:not(.game-mode) .form-card-sub, body:not(.game-mode) .adm-step-desc, body:not(.game-mode) .adm-req-item, body:not(.game-mode) .adm-batch-info, body:not(.game-mode) .adm-batch-seats, body:not(.game-mode) .adm-scholarship-note, body:not(.game-mode) .admissions-cta-sub, body:not(.game-mode) .prog-card-desc, body:not(.game-mode) .instr-bio, body:not(.game-mode) .about-body-text, body:not(.game-mode) p { color: #334155; /* slate-700: 8.9:1 on white – WCAG AAA */ } /* Section decorative tags — boost contrast */ .page-hero-tag, .admissions-section-tag, .admissions-cta-tag, .adm-req-tag, .programs-section-tag, .showcase-tag, .info-tag { color: var(--accent-primary); font-weight: 600; letter-spacing: 0.12em; font-size: 0.7rem; text-transform: uppercase; } /* Batch card status badges */ .adm-batch-open { color: #16a34a; background: rgba(34, 197, 94, 0.12); padding: 2px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; } .adm-batch-soon { color: #b45309; background: rgba(245, 158, 11, 0.12); padding: 2px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; } /* ── 4. CONTENT VISIBILITY FALLBACK ─────────────────────────────────────── */ /* * When JS hasn't marked .js-ready on body yet (e.g. slow connection, * no-JS, or crawlers), keep section content visible. * GSAP's fromTo() adds .js-ready BEFORE setting opacity:0 via site.js, * so real users get both: initial visibility + smooth animation. */ body:not(.js-ready) section h1, body:not(.js-ready) section h2, body:not(.js-ready) section h3, body:not(.js-ready) section p, body:not(.js-ready) section ul, body:not(.js-ready) section li, body:not(.js-ready) .prog-card, body:not(.js-ready) .adm-step, body:not(.js-ready) .adm-req-item, body:not(.js-ready) .adm-batch-card, body:not(.js-ready) .stat-block, body:not(.js-ready) .prog-stat, body:not(.js-ready) .instr-card, body:not(.js-ready) .about-chapter, body:not(.js-ready) .contact-overlay, body:not(.js-ready) .showcase-content { opacity: 1 !important; transform: none !important; visibility: visible !important; } /* Loader auto-dismiss fallback (CSS-only, fires if GSAP is very slow) */ @keyframes loader-css-exit { 0%, 88% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; pointer-events: none; } } #site-loader:not(.gsap-controlled) { animation: loader-css-exit 5s ease-in-out forwards; } /* ── 5. PAGE HERO IMPROVEMENTS ───────────────────────────────────────────── */ /* Ensure hero sections have a minimum visible height */ .page-hero-section { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; position: relative; } /* Grid decoration lines for non-canvas pages */ .page-hero-grid-decor { position: absolute; inset: 0; background-image: linear-gradient(rgba(67, 97, 238, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 97, 238, 0.04) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } .page-hero-inner { position: relative; z-index: 1; } /* ── 6. ADMISSIONS STEPS — ensure visibility ─────────────────────────────── */ .adm-step { display: flex; gap: 24px; align-items: flex-start; padding: 28px 24px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease; } .adm-step:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(67, 97, 238, 0.12); } .adm-step-num { font-family: var(--font-head); font-size: 2rem; font-weight: 900; color: var(--accent-primary); opacity: 0.25; line-height: 1; flex-shrink: 0; min-width: 2.5rem; } .adm-step-icon { width: 40px; height: 40px; stroke: var(--accent-primary); flex-shrink: 0; margin-bottom: 12px; } .adm-step-title { font-family: var(--font-head); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 8px; color: var(--text-main); } .adm-step-desc { font-size: 0.9rem; line-height: 1.6; } /* ── 7. PROGRAMS STATS — clean baseline ──────────────────────────────────── */ .programs-stats-section { /* !important beats body:not(.game-mode) section { background-color: #fff } */ background-color: var(--accent-primary) !important; padding: clamp(40px, 5vw, 60px) var(--spacing-container); } .programs-stats-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .prog-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; } .prog-stat-num { font-family: var(--font-head); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.02em; } body.game-mode .prog-stat-num { color: var(--accent-primary); } .prog-stat-suffix { font-family: var(--font-head); font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 700; color: rgba(255, 255, 255, 0.7); } body.game-mode .prog-stat-suffix { color: var(--accent-primary); opacity: 0.7; } .prog-stat-label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.1em; text-transform: uppercase; } body.game-mode .prog-stat-label { color: rgba(255, 255, 255, 0.6); } @media (max-width: 600px) { .programs-stats-inner { grid-template-columns: repeat(2, 1fr); } } /* ── 8. CONTACT FORM — enforce visibility baseline ───────────────────────── */ .contact-overlay { position: relative; z-index: 2; } .contact-form-card { background: var(--bg-secondary); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--border-subtle); } /* ── 9. GLOBAL CARD HOVER LIFT ───────────────────────────────────────────── */ .prog-card, .adm-batch-card, .contact-form-card, .trust-chip { transition: transform 0.25s var(--easing-pro), box-shadow 0.25s var(--easing-pro); } .prog-card:hover, .adm-batch-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(67, 97, 238, 0.15); } body.game-mode .prog-card:hover, body.game-mode .adm-batch-card:hover { box-shadow: 0 16px 40px rgba(0, 255, 204, 0.12); } /* ── 10. TRUST CHIPS (contact page) ─────────────────────────────────────── */ .trust-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } .trust-chip { padding: 8px 16px; background: var(--accent-primary-dim); border: 1px solid var(--accent-primary-mid); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 0.8rem; color: var(--accent-primary); font-weight: 600; letter-spacing: 0.04em; } .trust-chip strong { font-family: var(--font-head); font-size: 0.9rem; } /* ── 11. SECTION VISUAL RHYTHM — divider accents ─────────────────────────── */ .admissions-process-section, .admissions-requirements-section, .programs-grid-section { position: relative; } .admissions-process-section::before, .programs-grid-section::before { content: ''; display: block; width: 48px; height: 2px; background: var(--accent-primary); margin: 0 auto 48px; opacity: 0.5; } /* ── 12. MOBILE REFINEMENTS ──────────────────────────────────────────────── */ @media (max-width: 768px) { /* Prevent massive loader on mobile */ #site-loader .loader-center { padding: 0 24px; } /* Better section padding on mobile */ .contact-hero-section, .contact-showcase-section { min-height: auto; padding: 60px 24px; } /* Trust chips wrap nicely */ .trust-row { gap: 8px; } .trust-chip { font-size: 0.72rem; padding: 6px 12px; } /* Admissions steps stack */ .admissions-steps { display: flex; flex-direction: column; gap: 16px; } /* Stats — full mobile redesign */ .programs-stats-section { padding: 0; } .programs-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 0; max-width: 100%; padding: 0; } .prog-stat { /* Switch to block so inline num+suffix sit on one line naturally */ display: block; text-align: center; padding: 28px 16px 22px; position: relative; border-right: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } /* No right border on 2nd column */ .prog-stat:nth-child(2n) { border-right: none; } /* No bottom border on last row */ .prog-stat:nth-last-child(-n+2) { border-bottom: none; } /* Small accent bar above each number */ .prog-stat::before { content: ''; display: block; width: 20px; height: 2px; background: rgba(255, 255, 255, 0.45); margin: 0 auto 14px; border-radius: 2px; } .prog-stat-num { font-size: clamp(2.6rem, 11vw, 3.2rem); letter-spacing: -0.03em; } .prog-stat-suffix { font-size: clamp(1.1rem, 4.5vw, 1.4rem); vertical-align: super; line-height: 1; } .prog-stat-label { display: block; margin-top: 8px; font-size: 0.62rem; letter-spacing: 0.14em; opacity: 0.75; } } /* ========================================= BUG-FIX BATCH — 2026-03-18 ========================================= */ /* ── FIX 1: Game-mode programs stats — dark bg so cyan numbers are readable */ body.game-mode .programs-stats-section { background: #05050f !important; /* near-black, not cyan */ border-top: 1px solid rgba(0, 255, 204, 0.18) !important; border-bottom: 1px solid rgba(0, 255, 204, 0.10) !important; } body.game-mode .prog-stat-num { color: #00ffcc !important; /* cyan — now readable on dark bg */ text-shadow: 0 0 18px rgba(0, 255, 204, 0.5); } body.game-mode .prog-stat-suffix { color: rgba(0, 255, 204, 0.75) !important; text-shadow: none; } body.game-mode .prog-stat-label { color: rgba(180, 220, 255, 0.65) !important; } /* ── FIX 2: Scroll progress bar — smooth out width jumps */ #scroll-progress { transition: width 0.12s linear; } /* ── FIX 3: Hamburger button — visible border in light mode */ body:not(.game-mode) .menu-trigger { border: 1.5px solid rgba(0, 0, 0, 0.14) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important; } /* ── FIX 4: "APPLY NOW" nav button — prevent nav-canvas layer bleeding through text */ .btn-apply, .site-header .btn-apply { isolation: isolate; position: relative; z-index: 2; } /* Remove any accidental double text / pseudo-element overlap on the button */ .btn-apply::before, .btn-apply::after { /* Allow existing glitch/shimmer effects but prevent content duplication */ pointer-events: none; } /* ── FIX 5: Home hero mobile — bigger, more readable text ────────────────── */ @media (max-width: 768px) { /* Sub-headline: was clamp(0.78rem, 1.1vw, 0.94rem) → 1.1vw ≈ 4px on 390px */ .hg-sub { font-size: clamp(0.95rem, 2.8vw, 1.05rem) !important; line-height: 1.65 !important; letter-spacing: 0.01em; } /* Eyebrow tag: was clamp(0.56rem, 0.82vw, 0.70rem) → ~3px on mobile */ .hg-eyebrow { font-size: clamp(0.62rem, 2vw, 0.72rem) !important; letter-spacing: 0.14em; } /* CTA buttons — bigger tap targets */ .hg-cta-primary, .hg-cta-secondary { font-size: clamp(0.75rem, 2.5vw, 0.85rem) !important; padding: 12px 22px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; } /* Stats panel numbers — slightly larger */ .hg-stat-n { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; } .hg-stat-l { font-size: clamp(0.6rem, 1.8vw, 0.72rem) !important; } /* Left panel — more breathing room */ .hg-panel--left { padding: 0 20px !important; } /* Actions row — better spacing on mobile */ .hg-actions { gap: 10px !important; margin-top: 20px !important; } } /* Very small screens (< 430px) — extra boost */ @media (max-width: 430px) { .hg-sub { font-size: 1rem !important; } .hg-eyebrow { font-size: 0.65rem !important; } } /* ── 13. FOCUS VISIBLE — keyboard nav polish ─────────────────────────────── */ :focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; border-radius: 3px; } /* ── 14. SELECTION COLOR ─────────────────────────────────────────────────── */ ::selection { background: rgba(67, 97, 238, 0.25); color: var(--text-main); } body.game-mode ::selection { background: rgba(0, 255, 204, 0.25); color: #ffffff; } /* ── 15. SMOOTH SCROLLING ────────────────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ========================================================================= HOME HERO — HUD + PANEL FIX BATCH (v3) Fixes: logo overlap, mobile readability, panel backdrop, kill-counter pos ========================================================================= */ /* Desktop: push HUD elements further below the nav so they don't crowd logo */ .hg-hud--tl { top: 6.2rem; } .hg-hud--tr { top: 6.2rem; } @media (max-width: 768px) { /* --- Coordinate HUD overlaps logo — hide on mobile --- */ .hg-hud--tl { display: none !important; } /* --- Kill counter: push below "APPLY NOW" button area --- */ .hg-hud--tr { top: 6.8rem !important; right: 1rem !important; } /* --- Left panel: frosted-glass card so text is always readable --- */ .hg-panel--left { bottom: 1.2rem !important; left: 0.9rem !important; right: 0.9rem !important; top: auto !important; transform: none !important; padding: 18px 20px 16px !important; background: rgba(3, 6, 20, 0.82) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 14px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.60), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } /* Game mode panel tint */ body.game-mode .hg-panel--left { background: rgba(2, 4, 18, 0.88) !important; border-color: rgba(0, 255, 204, 0.18) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 255, 204, 0.08), inset 0 1px 0 rgba(0, 255, 204, 0.06) !important; } /* Sub text — solid readable color inside the card */ .hg-panel--left .hg-sub { color: rgba(225, 232, 255, 0.95) !important; text-shadow: none !important; } /* Eyebrow inside card */ .hg-panel--left .hg-eyebrow { text-shadow: none !important; margin-bottom: 0.75rem !important; } /* CTA secondary inside card */ .hg-panel--left .hg-cta-secondary { color: rgba(220, 228, 255, 0.88) !important; text-shadow: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 16. NEW UTILITY & COMPONENT STYLES — HUD/Cyberpunk design language ═══════════════════════════════════════════════════════════════════════════ */ /* ── Visually hidden — accessible but off-screen ── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Focus indicators — WCAG 2.4.7 ── */ :focus-visible { outline: 2px solid var(--accent-primary, #4361ee); outline-offset: 3px; border-radius: 2px; } /* ════════════════════════════════════════════ WHATSAPP BUTTON ════════════════════════════════════════════ */ .whatsapp-btn { display: inline-flex; align-items: center; gap: 0.625rem; background: #25d366; color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.75rem 1.5rem; border-radius: 4px; font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: background 0.2s, box-shadow 0.2s, transform 0.15s; margin-top: 1rem; position: relative; } .whatsapp-btn::before, .whatsapp-btn::after { content: ''; position: absolute; width: 8px; height: 8px; border-color: rgba(255, 255, 255, 0.5); border-style: solid; } .whatsapp-btn::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; } .whatsapp-btn::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; } .whatsapp-btn:hover, .whatsapp-btn:focus-visible { background: #1da851; box-shadow: 0 0 18px rgba(37, 211, 102, 0.4); transform: translateY(-1px); } .whatsapp-btn svg { flex-shrink: 0; } /* ════════════════════════════════════════════ ADMISSIONS — DEADLINE BADGE (HUD status strip) ════════════════════════════════════════════ */ .adm-deadline-badge { display: inline-flex; align-items: center; gap: 0.625rem; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.3); border-left: 3px solid #ef4444; color: var(--token-text-body, #334155); padding: 0.6rem 1.1rem 0.6rem 0.875rem; border-radius: 2px; font-family: var(--font-body, 'Rajdhani', sans-serif); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 1.75rem; position: relative; } .adm-deadline-badge svg { flex-shrink: 0; color: #ef4444; } .adm-deadline-badge strong { color: #ef4444; } /* Blink animation on the clock icon */ .adm-deadline-badge svg { animation: adm-pulse 2s ease-in-out infinite; } @keyframes adm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Game mode */ body.game-mode .adm-deadline-badge { background: rgba(255, 0, 60, 0.08); border-color: rgba(255, 0, 60, 0.25); border-left-color: #ff003c; color: rgba(220, 240, 255, 0.8); } body.game-mode .adm-deadline-badge strong { color: #ff4466; } body.game-mode .adm-deadline-badge svg { color: #ff4466; } /* Duplicate .adm-fees-section removed — definition lives at the canvas hero section above */ .adm-req-tag { display: block; font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-primary, #4361ee); margin-bottom: 0.4rem; } body.game-mode .adm-req-tag { color: #00ffcc; } .adm-req-heading { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.5rem; } .adm-fees-grid { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--token-border-base, rgba(15, 23, 42, 0.14)); border-radius: 4px; overflow: hidden; margin: 2rem 0 1.5rem; } .adm-fee-item { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: 1rem 1.5rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--token-border-subtle, rgba(15, 23, 42, 0.08)); position: relative; transition: background 0.15s; } .adm-fee-item:last-child { border-bottom: none; } .adm-fee-item:hover { background: var(--token-accent-dim, rgba(67, 97, 238, 0.05)); } .adm-fee-item__idx { font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; color: var(--token-text-muted, #64748b); } .adm-fee-item__info { min-width: 0; } .adm-fee-item__label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--token-text-muted, #64748b); margin-bottom: 0.15rem; } .adm-fee-item__sub { display: block; font-size: 0.78rem; color: var(--token-text-body, #334155); } .adm-fee-item__price { font-family: var(--font-heading, 'Orbitron', monospace); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 900; color: var(--accent-primary, #4361ee); white-space: nowrap; text-align: right; } .adm-fees-note { font-size: 0.75rem; color: var(--token-text-muted, #64748b); line-height: 1.5; } /* Game mode */ body.game-mode .adm-fees-grid { border-color: rgba(0, 255, 204, 0.15); } body.game-mode .adm-fee-item { border-bottom-color: rgba(0, 255, 204, 0.08); } body.game-mode .adm-fee-item:hover { background: rgba(0, 255, 204, 0.04); } body.game-mode .adm-fee-item__price { color: #00ffcc; } /* ── Admissions CTA buttons row ── */ .admissions-cta-btns { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.75rem; justify-content: center; } /* ════════════════════════════════════════════ PROGRAMS — INVESTMENT / FEES SECTION Theme-adaptive: light bg in light mode, dark in game mode ════════════════════════════════════════════ */ /* ── Section shell ─────────────────────────────────────────── */ .prog-investment-section { position: relative; background: var(--bg-void) !important; /* beats body:not(.game-mode) section specificity */ padding: 0; overflow: hidden; } /* Dot-grid texture */ .prog-investment-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(67, 97, 238, 0.12) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } /* Game mode: go dark */ body.game-mode .prog-investment-section { background: #05080f; } body.game-mode .prog-investment-section::before { background-image: radial-gradient(rgba(0, 255, 204, 0.09) 1px, transparent 1px); } /* ── Inner container ───────────────────────────────────────── */ .prog-investment-inner { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; padding: 5rem 2rem 6rem; } /* ── Section header ────────────────────────────────────────── */ .prog-investment-hdr { margin-bottom: 3.5rem; } .prog-investment-hdr .programs-section-tag { color: var(--accent-primary); } .programs-section-heading { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.02em; color: var(--menu-text); margin: 0.4rem 0 0; } .prog-investment-sub { color: var(--text-muted); margin-top: 0.5rem; font-size: 0.9rem; } .prog-investment-hdr::after { content: ''; display: block; height: 1px; background: linear-gradient(90deg, var(--accent-primary), transparent); margin-top: 1.5rem; max-width: 480px; } body.game-mode .prog-investment-hdr .programs-section-tag { color: #00ffcc; } body.game-mode .prog-investment-hdr::after { background: linear-gradient(90deg, #00ffcc, transparent); } body.game-mode .programs-section-heading { color: #fff; } body.game-mode .prog-investment-sub { color: rgba(255, 255, 255, 0.5); } /* ── Grid ──────────────────────────────────────────────────── */ .prog-fee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* ── Base card ─────────────────────────────────────────────── */ .prog-fee-card { position: relative; background: #fff; border: 1px solid rgba(67, 97, 238, 0.18); border-radius: 6px; padding: 2rem 1.75rem 1.75rem; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 2px 16px rgba(67, 97, 238, 0.07); } .prog-fee-card .btn { margin-top: auto; } /* Corner HUD brackets */ .prog-fee-card::before, .prog-fee-card::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--accent-primary); border-style: solid; opacity: 0.4; transition: opacity 0.25s; } .prog-fee-card::before { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; } .prog-fee-card::after { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; } .prog-fee-card:hover { border-color: rgba(67, 97, 238, 0.5); background: rgba(67, 97, 238, 0.04); box-shadow: 0 8px 32px rgba(67, 97, 238, 0.14); transform: translateY(-2px); } .prog-fee-card:hover::before, .prog-fee-card:hover::after { opacity: 1; } /* Featured card (B.Sc. + B.Des.) — strong border, pure white bg for text clarity */ .prog-fee-card--featured { border-color: var(--accent-primary); border-width: 2px; background: #fff; box-shadow: 0 4px 24px rgba(67, 97, 238, 0.14); } .prog-fee-card--featured::before, .prog-fee-card--featured::after { opacity: 1; } /* Scholarship card — full-width horizontal banner */ .prog-fee-card--scholarship { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 0; padding: 2rem 2rem; border-color: rgba(114, 9, 183, 0.35); background: #fff; border-radius: 6px; } .prog-fee-card--scholarship::before, .prog-fee-card--scholarship::after { border-color: #7209b7; opacity: 0.6; } .prog-fee-card--scholarship:hover { border-color: rgba(114, 9, 183, 0.6); background: rgba(114, 9, 183, 0.07); box-shadow: 0 8px 32px rgba(114, 9, 183, 0.12); transform: translateY(-2px); } /* Scholarship internal grid: label | amount | checklist | cta */ .prog-fee-card--scholarship { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(140px, auto) minmax(160px, 1.4fr) minmax(200px, auto); gap: 1.25rem 2rem; align-items: center; overflow: visible; /* override base card overflow:hidden so button isn't clipped */ } .prog-fee-card--scholarship .prog-fee-scholarship-left { min-width: 0; } .prog-fee-card--scholarship .prog-fee-scholarship-mid { display: contents; } .prog-fee-card--scholarship .prog-fee-scholarship-right { justify-self: end; min-width: 0; } /* Amount inside scholarship sits inline */ .prog-fee-card--scholarship .prog-fee-amount { margin-bottom: 0; white-space: nowrap; } /* Includes list inside scholarship: horizontal dots */ .prog-fee-card--scholarship .prog-fee-includes { border-top: none; padding-top: 0; margin-bottom: 0; display: flex; flex-direction: column; gap: 0; } .prog-fee-card--scholarship .prog-fee-includes li { white-space: nowrap; } .prog-fee-card--scholarship .btn { margin-top: 0; white-space: nowrap; flex-shrink: 0; } /* ── Text tokens — light mode ──────────────────────────────── */ .prog-fee-badge { display: inline-block; font-family: var(--font-head); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-primary); border: 1px solid currentColor; padding: 0.2rem 0.6rem; border-radius: 2px; margin-bottom: 1.25rem; } .prog-fee-card--scholarship .prog-fee-badge { color: #7209b7; } .prog-fee-track { display: block; font-family: var(--font-head); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--menu-text); margin-bottom: 0.3rem; } .prog-fee-tracks-list { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.45; } .prog-fee-card--scholarship .prog-fee-tracks-list { margin-bottom: 0; } .prog-fee-amount { font-family: var(--font-head); font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 900; color: var(--accent-primary); letter-spacing: -0.02em; margin-bottom: 1.5rem; line-height: 1; } .prog-fee-amount .prog-fee-per { font-size: 0.5em; font-weight: 500; color: var(--text-muted); letter-spacing: 0.02em; vertical-align: middle; } .prog-fee-card--scholarship .prog-fee-amount { color: #7209b7; } .prog-fee-includes { list-style: none; margin: 0 0 1.75rem; padding: 0; border-top: 1px solid var(--border-subtle); padding-top: 1rem; } .prog-fee-includes li { font-size: 0.78rem; color: var(--text-muted); padding: 0.28rem 0; padding-left: 0.5rem; line-height: 1.4; } .prog-fee-note { font-size: 0.72rem; color: var(--text-muted); margin-top: 2.5rem; line-height: 1.5; opacity: 0.65; } /* ── Game mode overrides ───────────────────────────────────── */ body.game-mode .prog-fee-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(0, 255, 204, 0.14); box-shadow: none; border-radius: 2px; color: #fff; } body.game-mode .prog-fee-card:hover { border-color: rgba(0, 255, 204, 0.5); background: rgba(0, 255, 204, 0.05); box-shadow: 0 0 40px rgba(0, 255, 204, 0.12); } body.game-mode .prog-fee-card::before, body.game-mode .prog-fee-card::after { border-color: #00ffcc; } body.game-mode .prog-fee-card--featured { border-color: #00ffcc; background: rgba(0, 255, 204, 0.06); } body.game-mode .prog-fee-card--scholarship { border-color: rgba(255, 0, 255, 0.28); background: rgba(255, 0, 255, 0.03); } body.game-mode .prog-fee-card--scholarship::before, body.game-mode .prog-fee-card--scholarship::after { border-color: #ff00ff; } body.game-mode .prog-fee-card--scholarship:hover { border-color: rgba(255, 0, 255, 0.55); box-shadow: 0 0 40px rgba(255, 0, 255, 0.12); } body.game-mode .prog-fee-badge { color: #00ffcc; border-color: #00ffcc; } body.game-mode .prog-fee-card--scholarship .prog-fee-badge { color: #ff00ff; border-color: #ff00ff; } body.game-mode .prog-fee-track { color: rgba(255, 255, 255, 0.6); } body.game-mode .prog-fee-tracks-list { color: rgba(255, 255, 255, 0.4); } body.game-mode .prog-fee-amount { color: #00ffcc; } body.game-mode .prog-fee-card--scholarship .prog-fee-amount { color: #ff00ff; } body.game-mode .prog-fee-amount .prog-fee-per { color: rgba(255, 255, 255, 0.4); } body.game-mode .prog-fee-includes { border-color: rgba(255, 255, 255, 0.08); } body.game-mode .prog-fee-includes li { color: rgba(255, 255, 255, 0.6); } body.game-mode .prog-fee-note { color: rgba(255, 255, 255, 0.3); opacity: 1; } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 960px) { .prog-fee-grid { grid-template-columns: repeat(2, 1fr); } .prog-fee-card--scholarship { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .prog-fee-card--scholarship .prog-fee-scholarship-left { grid-column: 1 / -1; } .prog-fee-card--scholarship .prog-fee-amount { grid-column: 1; } .prog-fee-card--scholarship .prog-fee-includes { grid-column: 2; } .prog-fee-card--scholarship .prog-fee-scholarship-right { grid-column: 1 / -1; justify-self: stretch; } .prog-fee-card--scholarship .prog-fee-includes li { white-space: normal; } .prog-fee-card--scholarship .btn { width: 100%; text-align: center; } } @media (max-width: 640px) { .prog-fee-grid { grid-template-columns: 1fr; } .prog-fee-card--scholarship { grid-template-columns: 1fr; padding: 1.75rem 1.5rem; gap: 1rem; } .prog-fee-card--scholarship .prog-fee-scholarship-left, .prog-fee-card--scholarship .prog-fee-amount, .prog-fee-card--scholarship .prog-fee-includes, .prog-fee-card--scholarship .prog-fee-scholarship-right { grid-column: 1; } .prog-fee-card--scholarship .prog-fee-amount { margin-bottom: 0; } .prog-fee-card--scholarship .prog-fee-includes li { white-space: normal; } .prog-fee-card--scholarship .btn { width: 100%; text-align: center; } } /* ════════════════════════════════════════════ ABOUT — TESTIMONIALS SECTION Dark always, canvas bg, HUD card panels ════════════════════════════════════════════ */ .ab-testimonials { position: relative; min-height: 100vh; display: flex; align-items: center; background: #05080f; /* always dark — canvas is the bg */ overflow: hidden; color: #fff; } /* Canvas fills the section */ .ab-testimonials__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* Scanline overlay */ .ab-testimonials__scanlines { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.07) 3px, rgba(0, 0, 0, 0.07) 4px); } /* Corner brackets from existing .ab-corner class — recolor for dark bg */ .ab-testimonials .ab-corner { border-color: rgba(67, 97, 238, 0.5); } body.game-mode .ab-testimonials .ab-corner { border-color: rgba(0, 255, 204, 0.5); } .ab-testimonials__inner { position: relative; z-index: 2; max-width: 1160px; margin: 0 auto; padding: 5rem 2rem 5.5rem; width: 100%; } /* DB-style header (mirrors .ab-metrics__db-*) */ .ab-testimonials__db-header { margin-bottom: 3rem; } .ab-testimonials__db-inner { margin-bottom: 0.75rem; } .ab-testimonials__db-tag { display: block; font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-primary, #4361ee); margin-bottom: 0.5rem; } body.game-mode .ab-testimonials__db-tag { color: #00ffcc; } .ab-testimonials__title { font-size: clamp(2.2rem, 4.5vw, 3.5rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--text-main); margin: 0 0 0.5rem; } .ab-testimonials__meta { display: block; font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .ab-testimonials__db-line { height: 1px; background: linear-gradient(90deg, var(--accent-primary, #4361ee), transparent); margin-top: 1.5rem; } body.game-mode .ab-testimonials__db-line { background: linear-gradient(90deg, #00ffcc, transparent); } /* Card grid */ .ab-testimonials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; } /* Individual card — HUD panel */ .ab-test-card { position: relative; margin: 0; padding: 1.75rem 1.5rem 1.5rem; background: var(--bg-secondary); border: 1px solid rgba(67, 97, 238, 0.22); border-left: 2px solid var(--accent-primary, #4361ee); border-radius: 2px; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; overflow: hidden; } /* Top-right + bottom-right corner brackets */ .ab-test-card::before, .ab-test-card::after { content: ''; position: absolute; width: 10px; height: 10px; border-color: var(--accent-primary, #4361ee); border-style: solid; opacity: 0.5; transition: opacity 0.2s; } .ab-test-card::before { top: -1px; right: -1px; border-width: 1px 1px 0 0; } .ab-test-card::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; } .ab-test-card:hover { background: rgba(67, 97, 238, 0.07); border-color: rgba(67, 97, 238, 0.5); box-shadow: 0 0 32px rgba(67, 97, 238, 0.14), inset 0 0 0 1px rgba(67, 97, 238, 0.06); } .ab-test-card:hover::before, .ab-test-card:hover::after { opacity: 1; } /* Game mode card */ body.game-mode .ab-test-card { border-color: rgba(0, 255, 204, 0.18); border-left-color: #00ffcc; } body.game-mode .ab-test-card::before, body.game-mode .ab-test-card::after { border-color: #00ffcc; } body.game-mode .ab-test-card:hover { background: rgba(0, 255, 204, 0.05); border-color: rgba(0, 255, 204, 0.5); box-shadow: 0 0 32px rgba(0, 255, 204, 0.12); } /* Index number */ .ab-test-card__index { font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.14em; color: var(--accent-primary, #4361ee); margin-bottom: 0.35rem; } body.game-mode .ab-test-card__index { color: #00ffcc; } /* Status badge */ .ab-test-card__status { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.5rem; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.35); margin-bottom: 1rem; } .ab-test-card__dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; animation: ab-dot-blink 2.4s ease-in-out infinite; } @keyframes ab-dot-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Quote */ .ab-test-card__quote { font-size: 0.92rem; line-height: 1.72; color: rgba(255, 255, 255, 0.78); margin: 0 0 1.5rem; font-style: italic; } /* Footer */ .ab-test-card__footer { display: flex; align-items: center; gap: 0.875rem; border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 1rem; } /* Avatar — HUD-style hexagonal feel */ .ab-test-card__avatar { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--accent-primary, #4361ee); background: rgba(67, 97, 238, 0.15); color: var(--accent-primary, #4361ee); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.62rem; font-weight: 700; flex-shrink: 0; letter-spacing: 0.05em; } body.game-mode .ab-test-card__avatar { border-color: #00ffcc; background: rgba(0, 255, 204, 0.1); color: #00ffcc; } .ab-test-card__name { display: block; font-weight: 700; font-size: 0.88rem; font-style: normal; color: #fff; letter-spacing: 0.01em; } .ab-test-card__role { display: block; font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); margin-top: 0.2rem; } /* Trust strip */ .ab-testimonials__trust { display: flex; align-items: center; justify-content: center; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.07); } .ab-trust-badge { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-heading, 'Orbitron', monospace); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); } .ab-trust-badge__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-primary, #4361ee); box-shadow: 0 0 8px var(--accent-primary, #4361ee); flex-shrink: 0; animation: ab-dot-blink 2s ease-in-out infinite; } body.game-mode .ab-trust-badge__dot { background: #00ffcc; box-shadow: 0 0 8px #00ffcc; } /* Mobile responsiveness */ @media (max-width: 640px) { .ab-testimonials__grid { grid-template-columns: 1fr; } .adm-fee-item { grid-template-columns: 2rem 1fr; grid-template-rows: auto auto; } .adm-fee-item__price { grid-column: 2; text-align: left; font-size: 1.1rem; } } /* ════════════════════════════════════════════ HOME HERO — MOBILE PANEL IMPROVEMENTS ════════════════════════════════════════════ */ @media (max-width: 768px) { .hg-hud--tl { display: none; } /* ── Right stats panel ────────────────────────────────────── Dark frosted HUD card — always readable in both themes. Positioned bottom-right, clear of the canvas headline (which renders center-upper) and above the left panel. ─────────────────────────────────────────────────────────── */ .hg-panel--right { /* Dark frosted card — readable over canvas in any theme */ background: rgba(4, 6, 18, 0.78) !important; backdrop-filter: blur(12px) saturate(1.2) !important; -webkit-backdrop-filter: blur(12px) saturate(1.2) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important; border-radius: 14px !important; overflow: hidden !important; padding: 0 !important; /* Bottom-right, above the left content panel */ top: auto !important; bottom: 16rem !important; right: 5vw !important; left: auto !important; transform: none !important; /* Compact 2×2 grid with hairline dividers */ display: grid !important; grid-template-columns: 1fr 1fr; gap: 1px; background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important; max-width: 190px; } /* Stat cells */ .hg-panel--right .hg-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.18rem; padding: 0.75rem 0.6rem; background: rgba(4, 6, 18, 0.78); } /* Numbers: accent, readable over dark card */ .hg-panel--right .hg-stat-n { font-size: clamp(1.4rem, 7.5vw, 2rem) !important; color: var(--accent-primary, #4361ee) !important; text-shadow: none; line-height: 1; } /* Labels */ .hg-panel--right .hg-stat-l { font-size: 0.48rem !important; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5) !important; text-shadow: none; line-height: 1.35; } /* Game mode: neon cyan */ body.game-mode .hg-panel--right .hg-stat-n { color: #00FFCC !important; text-shadow: 0 0 12px rgba(0, 255, 204, 0.35); } body.game-mode .hg-panel--right .hg-stat { background: rgba(4, 6, 18, 0.82); } /* Left panel: frosted glass for legibility */ .hg-panel--left { backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); } } /* ── 17. RENDERING PERFORMANCE OPTIMIZATIONS ──────────────────────────────── */ .ab-stack-wrap, .instr-stack-section, .contact-showcase-section, .programs-grid-section, .wid-section, my-footer { content-visibility: auto; contain-intrinsic-size: auto 100vh; } /* my-footer { z-index: 11111111; position: relative; } */ /* ── 18. LIGHT THEME CONTRAST FIXES ──────────────────────────────── */ /* Fix 1: Removed hardcoded Space/Canvas section overrides to allow natural light mode. */ /* Fix 2: Admissions Pricing Items */ body:not(.game-mode) .adm-fee-item, body:not(.game-mode) .adm-fee-item__sub, body:not(.game-mode) .adm-fee-item__price { color: var(--text-main); } /* Fix 3: Admissions process text */ body:not(.game-mode) .admissions-cta-sub { color: var(--text-muted); } /* ═══════════════════════════════════════════════════════════════ APPLY NOW POPUP FORM ═══════════════════════════════════════════════════════════════ */ /* Body scroll lock */ body.apu-body-lock { overflow: hidden; } /* ── Root overlay ── */ .apu-root { position: fixed; inset: 0; z-index: var(--token-z-modal, 2000); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s var(--token-ease-spring, cubic-bezier(0.22,1,0.36,1)), visibility 0s linear 0.35s; } .apu-root--open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s var(--token-ease-spring, cubic-bezier(0.22,1,0.36,1)), visibility 0s linear 0s; } .apu-root--closing { opacity: 0; pointer-events: none; } /* ── Backdrop ── */ .apu-backdrop { position: absolute; inset: 0; background: rgba(5, 8, 25, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); cursor: pointer; } body:not(.game-mode) .apu-backdrop { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ── Card ── */ .apu-card { position: relative; z-index: 1; width: 100%; max-width: 600px; max-height: 90dvh; overflow-y: auto; background: rgba(8, 10, 24, 0.92); border: 1px solid rgba(0, 255, 204, 0.18); border-radius: var(--token-radius-2xl, 24px); box-shadow: 0 32px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(0,255,204,0.06) inset; transform: scale(0.92) translateY(24px); transition: transform 0.4s var(--token-ease-spring, cubic-bezier(0.22,1,0.36,1)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .apu-root--open .apu-card { transform: scale(1) translateY(0); } .apu-root--closing .apu-card { transform: scale(0.94) translateY(16px); } /* Scrollbar */ .apu-card::-webkit-scrollbar { width: 4px; } .apu-card::-webkit-scrollbar-track { background: transparent; } .apu-card::-webkit-scrollbar-thumb { background: rgba(0,255,204,0.2); border-radius: 2px; } body:not(.game-mode) .apu-card { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(67, 97, 238, 0.18); box-shadow: 0 32px 80px rgba(15,23,42,0.14), 0 0 0 1px rgba(67,97,238,0.06) inset; } body:not(.game-mode) .apu-card::-webkit-scrollbar-thumb { background: rgba(67,97,238,0.2); } /* ── Canvas background ── */ .apu-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: inherit; z-index: 0; } /* ── All card children above canvas ── */ .apu-header, .apu-progress, .apu-steps-wrapper { position: relative; z-index: 1; } /* ── Header ── */ .apu-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 28px 28px 0; gap: 12px; } .apu-badge { font-family: var(--token-font-display, 'Orbitron', sans-serif); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--token-accent, #00ffcc); opacity: 0.75; display: block; margin-bottom: 6px; } .apu-title { font-family: var(--token-font-display, 'Orbitron', sans-serif); font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 800; color: var(--token-text-primary, #e6edf8); line-height: 1.15; margin: 0 0 4px; letter-spacing: -0.01em; } .apu-subtitle { font-family: var(--token-font-ui, 'Rajdhani', sans-serif); font-size: var(--token-text-sm, 0.875rem); color: var(--token-text-muted, #8892b0); margin: 0; } body:not(.game-mode) .apu-title { color: var(--token-text-primary, #0f172a); } body:not(.game-mode) .apu-badge { color: var(--token-accent, #4361ee); } body:not(.game-mode) .apu-subtitle { color: var(--token-text-muted, #64748b); } .apu-close { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: var(--token-text-muted, #8892b0); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s, transform 0.2s; margin-top: 2px; } .apu-close:hover { background: rgba(255,255,255,0.12); color: var(--token-text-primary, #e6edf8); transform: rotate(90deg); } body:not(.game-mode) .apu-close { border-color: rgba(15,23,42,0.12); background: rgba(15,23,42,0.04); } body:not(.game-mode) .apu-close:hover { background: rgba(15,23,42,0.08); } /* ── Progress ── */ .apu-progress { padding: 24px 28px 0; } .apu-progress-track { height: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; margin-bottom: 16px; overflow: visible; } body:not(.game-mode) .apu-progress-track { background: rgba(15,23,42,0.08); } .apu-progress-fill { height: 100%; background: var(--token-accent, #00ffcc); border-radius: 2px; width: 0%; transition: width 0.5s var(--token-ease-spring, cubic-bezier(0.22,1,0.36,1)); box-shadow: 0 0 8px var(--token-accent, #00ffcc); } body:not(.game-mode) .apu-progress-fill { box-shadow: 0 0 8px rgba(67,97,238,0.4); } .apu-step-dots { display: flex; gap: 8px; } .apu-dot { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: default; padding: 0; font-family: var(--token-font-ui, 'Rajdhani', sans-serif); pointer-events: none; } .apu-dot-num { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--token-text-muted, #8892b0); transition: all 0.3s; font-family: var(--token-font-display, 'Orbitron', sans-serif); } .apu-dot-label { font-size: 10px; letter-spacing: 0.1em; color: var(--token-text-muted, #8892b0); text-transform: uppercase; transition: color 0.3s; } .apu-dot--active .apu-dot-num { background: var(--token-accent, #00ffcc); border-color: var(--token-accent, #00ffcc); color: #000; box-shadow: 0 0 12px var(--token-accent, #00ffcc); } .apu-dot--active .apu-dot-label { color: var(--token-accent, #00ffcc); } .apu-dot--done .apu-dot-num { background: rgba(0,255,204,0.15); border-color: rgba(0,255,204,0.4); color: var(--token-accent, #00ffcc); } body:not(.game-mode) .apu-dot-num { border-color: rgba(15,23,42,0.15); background: rgba(15,23,42,0.04); color: var(--token-text-muted, #64748b); } body:not(.game-mode) .apu-dot--active .apu-dot-num { background: var(--token-accent, #4361ee); border-color: var(--token-accent, #4361ee); color: #fff; box-shadow: 0 0 12px rgba(67,97,238,0.4); } body:not(.game-mode) .apu-dot--active .apu-dot-label { color: var(--token-accent, #4361ee); } body:not(.game-mode) .apu-dot--done .apu-dot-num { background: rgba(67,97,238,0.12); border-color: rgba(67,97,238,0.35); color: var(--token-accent, #4361ee); } /* ── Steps wrapper ── */ .apu-steps-wrapper { padding: 24px 28px 28px; overflow: hidden; } /* ── Individual Step ── */ .apu-step { display: none; animation: apuStepIn 0.4s var(--token-ease-spring, cubic-bezier(0.22,1,0.36,1)) both; } .apu-step--active { display: block; } .apu-step--prev { display: none; } @keyframes apuStepIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } .apu-step-title { font-family: var(--token-font-display, 'Orbitron', sans-serif); font-size: clamp(0.95rem, 2.5vw, 1.1rem); font-weight: 700; color: var(--token-text-primary, #e6edf8); margin: 0 0 20px; letter-spacing: 0.05em; } body:not(.game-mode) .apu-step-title { color: var(--token-text-primary, #0f172a); } .apu-step-sub { font-family: var(--token-font-ui, 'Rajdhani', sans-serif); font-size: var(--token-text-sm, 0.875rem); color: var(--token-text-muted, #8892b0); margin: -12px 0 20px; } body:not(.game-mode) .apu-step-sub { color: var(--token-text-muted, #64748b); } /* ── Fields ── */ .apu-field { margin-bottom: 18px; } .apu-label { display: block; font-family: var(--token-font-ui, 'Rajdhani', sans-serif); font-size: var(--token-text-sm, 0.875rem); font-weight: 600; color: var(--token-text-body, #b8c4d8); margin-bottom: 6px; letter-spacing: 0.04em; } body:not(.game-mode) .apu-label { color: var(--token-text-body, #334155); } .apu-req { color: var(--token-accent, #00ffcc); } body:not(.game-mode) .apu-req { color: var(--token-error, #ef4444); } .apu-hint { font-family: var(--token-font-ui, 'Rajdhani', sans-serif); font-size: var(--token-text-xs, 0.75rem); color: var(--token-text-faint, #5a6380); margin: -2px 0 8px; } body:not(.game-mode) .apu-hint { color: var(--token-text-faint, #94a3b8); } .apu-input-wrap { position: relative; display: flex; align-items: center; } .apu-field-icon { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--token-text-faint, #5a6380); pointer-events: none; flex-shrink: 0; } body:not(.game-mode) .apu-field-icon { color: var(--token-text-faint, #94a3b8); } .apu-input { width: 100%; height: 46px; padding: 0 14px 0 38px; background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.1); border-radius: var(--token-radius-md, 8px); font-family: var(--token-font-ui, 'Rajdhani', sans-serif); font-size: var(--token-text-base, 1rem); color: var(--token-text-primary, #e6edf8); outline: none; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; -webkit-appearance: none; appearance: none; } .apu-input::placeholder { color: var(--token-text-faint, #5a6380); } .apu-input:focus { border-color: var(--token-accent, #00ffcc); background: rgba(0,255,204,0.04); box-shadow: 0 0 0 3px rgba(0,255,204,0.1); } body:not(.game-mode) .apu-input { background: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.14); color: var(--token-text-primary, #0f172a); } body:not(.game-mode) .apu-input::placeholder { color: var(--token-text-faint, #94a3b8); } body:not(.game-mode) .apu-input:focus { border-color: var(--token-accent, #4361ee); background: rgba(67,97,238,0.04); box-shadow: 0 0 0 3px rgba(67,97,238,0.1); } .apu-textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 80px; } /* Select */ .apu-select-wrap { position: relative; } .apu-select { padding-right: 36px; cursor: pointer; } .apu-select option { background: #0c0c14; color: #e6edf8; } body:not(.game-mode) .apu-select option { background: #fff; color: #0f172a; } .apu-select-arrow { position: absolute; right: 12px; width: 12px; height: 8px; color: var(--token-text-faint, #5a6380); pointer-events: none; } /* Error state */ .apu-field--error .apu-input { border-color: var(--token-error, #ef4444) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important; } .apu-err { display: block; font-family: var(--token-font-ui, 'Rajdhani', sans-serif); font-size: var(--token-text-xs, 0.75rem); color: var(--token-error, #ef4444); margin-top: 4px; min-height: 16px; } /* ── Faculty Grid ── */ .apu-faculty-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @media (max-width: 480px) { .apu-faculty-grid { grid-template-columns: 1fr; } } .apu-faculty-card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 38px; background: rgba(255,255,255,0.03); border: 1.5px solid rgba(255,255,255,0.08); border-radius: var(--token-radius-lg, 12px); cursor: pointer; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; overflow: hidden; } .apu-faculty-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,255,204,0) 0%, rgba(0,255,204,0.04) 100%); opacity: 0; transition: opacity 0.2s; } .apu-faculty-card:hover, .apu-faculty-card--checked { border-color: rgba(0,255,204,0.4); background: rgba(0,255,204,0.05); } .apu-faculty-card--checked { box-shadow: 0 0 16px rgba(0,255,204,0.1); } .apu-faculty-card--checked::before { opacity: 1; } .apu-faculty-cb { position: absolute; opacity: 0; pointer-events: none; } .apu-faculty-check { position: absolute; top: 12px; left: 12px; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; } .apu-faculty-check svg { opacity: 0; transition: opacity 0.2s; width: 10px; height: 10px; color: #000; } .apu-faculty-card--checked .apu-faculty-check { background: var(--token-accent, #00ffcc); border-color: var(--token-accent, #00ffcc); } .apu-faculty-card--checked .apu-faculty-check svg { opacity: 1; } .apu-faculty-role { font-family: var(--token-font-display, 'Orbitron', sans-serif); font-size: 7px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--token-accent, #00ffcc); opacity: 0.7; } .apu-faculty-name { font-family: var(--token-font-ui, 'Rajdhani', sans-serif); font-size: 13px; font-weight: 700; color: var(--token-text-primary, #e6edf8); line-height: 1.2; } .apu-faculty-meta { font-family: var(--token-font-ui, 'Rajdhani', sans-serif); font-size: 11px; color: var(--token-text-muted, #8892b0); } .apu-faculty-game { font-family: var(--token-font-display, 'Orbitron', sans-serif); font-size: 7px; letter-spacing: 0.15em; color: var(--token-text-faint, #5a6380); margin-top: 2px; } /* Light mode faculty cards */ body:not(.game-mode) .apu-faculty-card { background: rgba(15,23,42,0.03); border-color: rgba(15,23,42,0.1); } body:not(.game-mode) .apu-faculty-card:hover, body:not(.game-mode) .apu-faculty-card--checked { border-color: rgba(67,97,238,0.45); background: rgba(67,97,238,0.05); } body:not(.game-mode) .apu-faculty-card--checked { box-shadow: 0 0 16px rgba(67,97,238,0.1); } body:not(.game-mode) .apu-faculty-role { color: var(--token-accent, #4361ee); } body:not(.game-mode) .apu-faculty-name { color: var(--token-text-primary, #0f172a); } body:not(.game-mode) .apu-faculty-meta { color: var(--token-text-muted, #64748b); } body:not(.game-mode) .apu-faculty-game { color: var(--token-text-faint, #94a3b8); } body:not(.game-mode) .apu-faculty-check { border-color: rgba(15,23,42,0.18); background: rgba(15,23,42,0.04); } body:not(.game-mode) .apu-faculty-card--checked .apu-faculty-check { background: var(--token-accent, #4361ee); border-color: var(--token-accent, #4361ee); } body:not(.game-mode) .apu-faculty-check svg { color: #fff; } /* ── Chips ── */ .apu-chips { display: flex; flex-wrap: wrap; gap: 8px; } .apu-chip { font-family: var(--token-font-ui, 'Rajdhani', sans-serif); font-size: var(--token-text-sm, 0.875rem); font-weight: 500; padding: 7px 14px; border-radius: var(--token-radius-pill, 9999px); border: 1.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--token-text-body, #b8c4d8); cursor: pointer; transition: all 0.2s; white-space: nowrap; } .apu-chip:hover { border-color: rgba(0,255,204,0.35); color: var(--token-accent, #00ffcc); background: rgba(0,255,204,0.05); } .apu-chip--active { border-color: var(--token-accent, #00ffcc); background: rgba(0,255,204,0.12); color: var(--token-accent, #00ffcc); box-shadow: 0 0 10px rgba(0,255,204,0.12); } body:not(.game-mode) .apu-chip { border-color: rgba(15,23,42,0.14); background: rgba(15,23,42,0.04); color: var(--token-text-body, #334155); } body:not(.game-mode) .apu-chip:hover { border-color: rgba(67,97,238,0.4); color: var(--token-accent, #4361ee); background: rgba(67,97,238,0.06); } body:not(.game-mode) .apu-chip--active { border-color: var(--token-accent, #4361ee); background: rgba(67,97,238,0.1); color: var(--token-accent, #4361ee); box-shadow: 0 0 10px rgba(67,97,238,0.12); } /* ── Navigation buttons ── */ .apu-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; gap: 12px; } .apu-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--token-font-display, 'Orbitron', sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 22px; border-radius: var(--token-radius-sm, 4px); border: none; cursor: pointer; transition: all 0.25s var(--token-ease-spring, cubic-bezier(0.22,1,0.36,1)); white-space: nowrap; } .apu-btn--primary { background: var(--token-accent, #00ffcc); color: #000; box-shadow: 0 4px 20px rgba(0,255,204,0.25); } .apu-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,255,204,0.4); } .apu-btn--primary:active { transform: translateY(0); } body:not(.game-mode) .apu-btn--primary { background: var(--token-accent, #4361ee); color: #fff; box-shadow: 0 4px 20px rgba(67,97,238,0.25); } body:not(.game-mode) .apu-btn--primary:hover { box-shadow: 0 8px 32px rgba(67,97,238,0.4); } .apu-btn--ghost { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--token-text-muted, #8892b0); } .apu-btn--ghost:hover { background: rgba(255,255,255,0.1); color: var(--token-text-primary, #e6edf8); } body:not(.game-mode) .apu-btn--ghost { background: rgba(15,23,42,0.05); border-color: rgba(15,23,42,0.14); color: var(--token-text-muted, #64748b); } body:not(.game-mode) .apu-btn--ghost:hover { background: rgba(15,23,42,0.09); color: var(--token-text-primary, #0f172a); } .apu-btn--submit { flex: 1; justify-content: center; background: linear-gradient(135deg, #00e7c2, #7b2fff); color: #fff; box-shadow: 0 6px 24px rgba(0,255,204,0.25); } .apu-btn--submit:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(0,255,204,0.35); } .apu-btn--submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } body:not(.game-mode) .apu-btn--submit { background: linear-gradient(135deg, var(--token-accent, #4361ee), var(--token-secondary, #7209b7)); box-shadow: 0 6px 24px rgba(67,97,238,0.25); } /* ── Success Screen ── */ .apu-success { text-align: center; padding: 20px 0 12px; } .apu-success-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative; } .apu-success-icon { width: 80px; height: 80px; } .apu-checkmark { width: 100%; height: 100%; animation: apuCheckmarkScale 0.5s var(--token-ease-bounce, cubic-bezier(0.34,1.56,0.64,1)) 0.1s both; } .apu-checkmark-circle { stroke: var(--token-accent, #00ffcc); stroke-width: 2; stroke-dasharray: 166; stroke-dashoffset: 166; animation: apuCircleDraw 0.6s ease 0.1s forwards; } body:not(.game-mode) .apu-checkmark-circle { stroke: var(--token-accent, #4361ee); } .apu-checkmark-path { stroke: var(--token-accent, #00ffcc); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: apuCheckDraw 0.4s ease 0.65s forwards; } body:not(.game-mode) .apu-checkmark-path { stroke: var(--token-accent, #4361ee); } @keyframes apuCircleDraw { to { stroke-dashoffset: 0; } } @keyframes apuCheckDraw { to { stroke-dashoffset: 0; } } @keyframes apuCheckmarkScale { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } .apu-success-title { font-family: var(--token-font-display, 'Orbitron', sans-serif); font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 800; color: var(--token-text-primary, #e6edf8); margin: 0; letter-spacing: -0.01em; } body:not(.game-mode) .apu-success-title { color: var(--token-text-primary, #0f172a); } .apu-success-msg { font-family: var(--token-font-ui, 'Rajdhani', sans-serif); font-size: var(--token-text-base, 1rem); color: var(--token-text-muted, #8892b0); line-height: 1.65; max-width: 400px; margin: 0; } body:not(.game-mode) .apu-success-msg { color: var(--token-text-muted, #64748b); } .apu-success-msg strong { color: var(--token-accent, #00ffcc); } body:not(.game-mode) .apu-success-msg strong { color: var(--token-accent, #4361ee); } .apu-success-close { margin-top: 8px; } /* ── Confetti ── */ .apu-confetti { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 300px; height: 200px; pointer-events: none; overflow: visible; } .apu-confetti-piece { position: absolute; top: 0; border-radius: 2px; animation: apuConfettiFall linear both; opacity: 0; } @keyframes apuConfettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 80% { opacity: 0.8; } 100% { transform: translateY(180px) rotate(720deg); opacity: 0; } } /* ── Mobile: full-screen bottom sheet ── */ @media (max-width: 540px) { .apu-root { padding: 0; align-items: flex-end; } .apu-card { max-width: 100%; max-height: 92dvh; border-radius: var(--token-radius-2xl, 24px) var(--token-radius-2xl, 24px) 0 0; transform: translateY(40px); } .apu-root--open .apu-card { transform: translateY(0); } .apu-root--closing .apu-card { transform: translateY(40px); } .apu-header { padding: 20px 20px 0; } .apu-progress { padding: 18px 20px 0; } .apu-steps-wrapper { padding: 20px 20px 24px; } .apu-step-dots { gap: 6px; } .apu-dot-label { display: none; } .apu-faculty-grid { grid-template-columns: 1fr; } .apu-btn { font-size: 9px; padding: 11px 18px; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .apu-root, .apu-card, .apu-step, .apu-chip, .apu-btn, .apu-progress-fill { transition: none !important; animation: none !important; } .apu-checkmark-circle, .apu-checkmark-path { stroke-dashoffset: 0 !important; } .apu-confetti-piece { display: none; } }