@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700;800;900&family=Manrope:wght@300;400;500;600;700;800&display=swap'); /* ========================================================================== DESIGN SYSTEM VARIABLES ========================================================================== */ :root { --black: #050505; --black-card: #0c0c0e; --black-card-hover: #121216; --blue: #0052ff; --blue-deep: #003ee6; --blue-soft: rgba(0, 82, 255, 0.06); --blue-glow: rgba(0, 82, 255, 0.15); --blue-dot: rgba(0, 82, 255, 0.7); --blue-stage-bg: radial-gradient(circle at 50% 50%, #004cff 0%, #001f99 100%); --text-primary: #ffffff; --text-secondary: #a0a0a5; --text-muted: #62626a; --line: rgba(255, 255, 255, 0.06); --line-active: rgba(0, 82, 255, 0.3); --font-display: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, sans-serif; --font-main: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); /* * Opening geometry. The hero wrapper spans its own chapters plus the whole * About stage, which overlaps it by exactly its own height, so the pinned * hero scene stays underneath the About reveal. js/render.js rewrites the * About values from the number of motion cards. */ --hero-scroll-height: 380vh; --hero-scroll-height-mobile: 340vh; --about-scroll-height: 270vh; --about-scroll-height-mobile: 250vh; } /* ========================================================================== RESET & BASE STYLES ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } body, a, button, input, textarea, select, [contenteditable] { cursor: none; } html, body { background-color: var(--black); color: var(--text-primary); font-family: var(--font-main); font-weight: 400; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.5s ease, color 0.5s ease; } html.mobile-boot-lock, html.mobile-boot-lock body { overflow: hidden; touch-action: none; } /* ========================================================================== SITE PRELOADER ========================================================================== */ html.is-preloading, html.is-preloading body { overflow: hidden; touch-action: none; } /* The theme class only reaches once the engine boots, so the curtain reads the stored preference straight off . */ html.boot-theme-light { --black: #f5f6f9; --black-card: #ffffff; --text-primary: #121214; --text-secondary: #4a4d55; --text-muted: #848792; --line: rgba(0, 0, 0, 0.06); background-color: #f5f6f9; } .site-preloader { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 2rem; background-color: var(--black); cursor: default; opacity: 1; transition: opacity 0.76s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.76s cubic-bezier(0.16, 1, 0.3, 1); } .site-preloader::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, var(--blue-glow) 0%, transparent 62%); opacity: 0.9; pointer-events: none; } .site-preloader * { cursor: default; } .site-preloader-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.75rem; transition: transform 0.76s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease; } /* A light pass travels left to right across the word, nothing else. */ .site-preloader-word { font-family: var(--font-main); font-size: 0.7rem; font-weight: 600; letter-spacing: 6px; text-indent: 6px; text-transform: uppercase; line-height: 1; color: var(--text-muted); background: linear-gradient( 100deg, var(--text-muted) 0%, var(--text-muted) 38%, var(--text-primary) 50%, var(--text-muted) 62%, var(--text-muted) 100% ); background-size: 250% 100%; background-position: 150% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: preloaderSheen 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .site-preloader-meter { position: relative; width: clamp(124px, 32vw, 150px); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } .site-preloader-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .site-preloader-ring circle { fill: none; stroke-width: 1.5; } .site-preloader-ring-track { stroke: var(--line); } .site-preloader-ring-value { stroke: var(--blue); stroke-linecap: round; stroke-dashoffset: 0; } /* A single point of light rides the head of the arc. */ .site-preloader-head { position: absolute; inset: 0; transform: rotate(0deg); pointer-events: none; } .site-preloader-head::after { content: ''; position: absolute; top: 5%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background-color: var(--blue); box-shadow: 0 0 16px var(--blue); } .site-preloader-count { font-family: var(--font-display); font-size: clamp(1.9rem, 6vw, 2.4rem); font-weight: 800; letter-spacing: 1px; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; } .site-preloader-status { font-family: var(--font-main); font-size: 0.62rem; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); opacity: 0.7; transition: opacity 0.3s ease; } .site-preloader.is-complete { opacity: 0; visibility: hidden; pointer-events: none; } .site-preloader.is-complete .site-preloader-inner { transform: translateY(-14px); opacity: 0; } @keyframes preloaderSheen { 0% { background-position: 150% 0; } 60%, 100% { background-position: -50% 0; } } @media (prefers-reduced-motion: reduce) { .site-preloader, .site-preloader-inner { transition-duration: 0.01ms; } .site-preloader-word { animation: none; -webkit-text-fill-color: var(--text-muted); } } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--black); } ::-webkit-scrollbar-thumb { background: #1c1c22; border-radius: 4px; border: 2px solid var(--black); } ::-webkit-scrollbar-thumb:hover { background: var(--blue); } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ========================================================================== CUSTOM CURSOR ========================================================================== */ /* * The hover size change used to run as a `width` / `height` / `margin` * transition: eight layout-animated properties across the two cursor elements, * relaying out on every frame of a 300-400 ms transition, restarted every time * the pointer crossed one of the 55 hover targets on the page. * * Both elements now keep a fixed border box at their largest size and carry * nothing but the position the pointer loop writes. A child does the size * change with `transform: scale()`, so the two transforms never fight, and the * whole hover is transform and colour only — no layout, no geometry change. * The centring margins are gone with the widths; the pointer loop appends * `translate(-50%, -50%)`, which stays correct at any scale. */ .custom-cursor { width: 8px; height: 8px; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10030; will-change: transform; } .custom-cursor-dot { display: block; width: 100%; height: 100%; border-radius: 50%; background-color: var(--blue); transition: transform 0.3s, background-color 0.3s; } .custom-cursor-follower { /* Fixed at the hovered size. The rings inside decide what is drawn. */ width: 70px; height: 70px; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10029; will-change: transform; display: flex; align-items: center; justify-content: center; font-size: 8px; font-family: var(--font-main); font-weight: 800; text-transform: uppercase; color: transparent; letter-spacing: 1px; transition: color 0.4s; } /* * A single scaled ring would carry its 1px border through the scale with it, * so one of the two states would always draw a hairline at the wrong weight — * measured at 37/255 too faint when scaling 70 down to 40, and 235/255 too * heavy scaling 40 up to 70. So there are two rings, each authored at its own * true size and drawn at scale 1 in the state it owns, cross-fading in between. * * Both are given the same pair of scale endpoints, so at every moment of the * transition they are the same diameter and sit exactly on top of each other: * what is seen is one ring of the right size whose stroke weight blends across, * never two. `inset` differs per ring but is a static value, never animated. */ .custom-cursor-ring { position: absolute; border-radius: 50%; border: 1px solid transparent; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, background-color 0.4s; } /* The 40px idle ring, centred in the 70px box. */ .custom-cursor-ring--idle { inset: 15px; border-color: var(--line-active); background-color: rgba(0, 82, 255, 0.02); transform: scale(1); opacity: 1; } /* The 70px hover ring, filling the box. */ .custom-cursor-ring--hover { inset: 0; border-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.08); transform: scale(0.5714); /* 40 / 70 */ opacity: 0; } /* * Cursor Hover States. These classes sit on the cursor elements rather than on * , so entering a hover target invalidates two elements instead of * inviting a style recalc scoped to the whole document. */ .custom-cursor.is-interactive .custom-cursor-dot { transform: scale(0.5); background-color: #fff; } .custom-cursor-follower.is-interactive .custom-cursor-ring--idle { transform: scale(1.75); /* 70 / 40 */ opacity: 0; } .custom-cursor-follower.is-interactive .custom-cursor-ring--hover { transform: scale(1); opacity: 1; } .custom-cursor-follower.is-interactive { color: #fff; } .custom-cursor-follower.is-link::after { content: 'VIEW'; color: #fff; } .custom-cursor-follower.is-drive::after { content: 'DRIVE'; color: var(--blue); } .custom-cursor-follower.is-drive .custom-cursor-ring--hover { border-color: var(--blue); background-color: var(--blue-soft); } /* Hide custom cursor on mobile */ @media (max-width: 768px) { body, a, button, input, textarea, select, [contenteditable] { cursor: auto !important; } .custom-cursor, .custom-cursor-follower { display: none !important; } } /* Safari: native cursor */ body.native-cursor, body.native-cursor a, body.native-cursor button, body.native-cursor input, body.native-cursor textarea, body.native-cursor select, body.native-cursor [contenteditable] { cursor: auto !important; } body.native-cursor .custom-cursor, body.native-cursor .custom-cursor-follower { display: none !important; } /* ========================================================================== DYNAMIC BACKGROUND ORBS ========================================================================== */ .ambient-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 50% 50%, #08080c 0%, #050505 100%); } /* * The orbs used to be small boxes carrying `filter: blur(120px)` plus * `mix-blend-mode: screen`. The blend mode broke layer isolation, so Chrome had * to re-run a viewport-sized blur and re-composite it against the page on every * frame the mouse moved — cheap on the macOS Metal backend, very expensive on * the Windows ANGLE/D3D11 path, which is where the cursor lag came from. * * Both are gone. Each orb is now a plain multi-stop radial gradient whose alpha * ramp was sampled off the old blurred render, one stop per 1/17th of the * measured reach, painted into a box grown to hold the spread the blur used to * add outside the element. Same picture, no per-frame filter pass. Measured * difference against the old rendering: max 4/255 on any pixel, both themes. */ .orb { position: absolute; opacity: 0.28; pointer-events: none; } .orb-blue { /* 2 x the measured 601px reach; offsets keep the pre-blur centre at 85vw. */ width: calc(49.5vw + 490px); height: calc(49.5vw + 490px); background: radial-gradient(circle closest-side, rgba(0, 82, 255, 0.5765) 0%, rgba(0, 82, 255, 0.5686) 5.88%, rgba(0, 82, 255, 0.5451) 11.76%, rgba(0, 82, 255, 0.5020) 17.65%, rgba(0, 82, 255, 0.4529) 23.53%, rgba(0, 82, 255, 0.3902) 29.41%, rgba(0, 82, 255, 0.3255) 35.29%, rgba(0, 82, 255, 0.2647) 41.18%, rgba(0, 82, 255, 0.2039) 47.06%, rgba(0, 82, 255, 0.1529) 52.94%, rgba(0, 82, 255, 0.1059) 58.82%, rgba(0, 82, 255, 0.0706) 64.71%, rgba(0, 82, 255, 0.0471) 70.59%, rgba(0, 82, 255, 0.0275) 76.47%, rgba(0, 82, 255, 0.0157) 82.35%, rgba(0, 82, 255, 0.0078) 88.24%, rgba(0, 82, 255, 0.0039) 94.12%, rgba(0, 82, 255, 0) 100%); top: calc(0.25vw - 10vh - 245px); right: calc(-9.75vw - 245px); --orb-drift: 5vw; /* 10% of the original 50vw box */ animation: orbFloat 25s infinite alternate ease-in-out; will-change: transform; } .orb-purple { /* 2 x the measured 511px reach; offsets keep the pre-blur centre at 10vw. */ width: calc(39.6vw + 452px); height: calc(39.6vw + 452px); background: radial-gradient(circle closest-side, rgba(91, 33, 182, 0.4780) 0%, rgba(91, 33, 182, 0.4725) 5.88%, rgba(91, 33, 182, 0.4533) 11.76%, rgba(91, 33, 182, 0.4203) 17.65%, rgba(91, 33, 182, 0.3791) 23.53%, rgba(91, 33, 182, 0.3324) 29.41%, rgba(91, 33, 182, 0.2802) 35.29%, rgba(91, 33, 182, 0.2280) 41.18%, rgba(91, 33, 182, 0.1813) 47.06%, rgba(91, 33, 182, 0.1374) 52.94%, rgba(91, 33, 182, 0.0989) 58.82%, rgba(91, 33, 182, 0.0659) 64.71%, rgba(91, 33, 182, 0.0440) 70.59%, rgba(91, 33, 182, 0.0275) 76.47%, rgba(91, 33, 182, 0.0192) 82.35%, rgba(91, 33, 182, 0.0110) 88.24%, rgba(91, 33, 182, 0.0055) 94.12%, rgba(91, 33, 182, 0) 100%); left: calc(-9.8vw - 226px); bottom: calc(0.2vw - 10vh - 226px); --orb-drift: 4vw; /* 10% of the original 40vw box */ animation: orbFloat 20s infinite alternate-reverse ease-in-out; will-change: transform; } /* * This is the only orb that moves with the pointer, so its box is the one that * gets recomposited on every frame the mouse moves. It was 722px square to hold * the full sampled reach, but the outer third of that ramp is alpha <= 0.0118 * and the layer is drawn at opacity 0.2, i.e. under 1/255 once composited — * paying for 271k px of layer to render nothing. The box is 500px now and the * stop percentages are rescaled onto the smaller radius (x 361/250), so the * visible falloff is stop-for-stop what it was; only the invisible tail is * clipped, with the last 6.6% fading out so there is no edge. Composited area * drops from 521k px to 250k px. */ .orb-interactive { /* 2 x the 250px kept reach; JS centres it with translate(-50%, -50%). */ width: 500px; height: 500px; background: radial-gradient(circle closest-side, rgba(0, 82, 255, 0.0824) 0%, rgba(0, 82, 255, 0.0824) 8.49%, rgba(0, 82, 255, 0.0784) 16.98%, rgba(0, 82, 255, 0.0745) 25.49%, rgba(0, 82, 255, 0.0667) 33.98%, rgba(0, 82, 255, 0.0588) 42.47%, rgba(0, 82, 255, 0.0510) 50.96%, rgba(0, 82, 255, 0.0431) 59.46%, rgba(0, 82, 255, 0.0373) 67.95%, rgba(0, 82, 255, 0.0275) 76.45%, rgba(0, 82, 255, 0.0235) 84.94%, rgba(0, 82, 255, 0.0157) 93.44%, rgba(0, 82, 255, 0) 100%); opacity: 0; top: 0; left: 0; will-change: transform; transition: opacity 1.5s ease; } /* * The drift used to be `translate(-10%, 10%)`, i.e. relative to the element's * own box. The boxes are larger now that they carry the blur spread themselves, * so the distance is pinned in absolute units instead — 10% of the original * 50vw / 40vw boxes — to keep the motion exactly as it was. */ @keyframes orbFloat { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(calc(-1 * var(--orb-drift)), var(--orb-drift)) scale(1.15); } } @media (prefers-reduced-motion: reduce) { .orb-blue, .orb-purple { animation: none; } } /* ========================================================================== LAYOUT & CONTAINER ========================================================================== */ .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 4rem; } @media (max-width: 1024px) { .container { padding: 0 2rem; } } @media (max-width: 640px) { .container { padding: 0 1.5rem; } } /* ========================================================================== STICKY NAV HEADER ========================================================================== */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: transparent; backdrop-filter: none; border-bottom: 0; pointer-events: none; transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, padding 0.4s ease; padding: 2rem 0; } header.scrolled { background: rgba(5, 5, 8, 0.74); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 1.2rem 0; } /* Enforce white header elements when overlayed on the initial blue hero backdrop in both themes */ body header:not(.scrolled) .logo { color: #ffffff; } body header:not(.scrolled) nav a { color: rgba(255, 255, 255, 0.86); } body header:not(.scrolled) nav a:hover { color: #ffffff; } body header:not(.scrolled) nav a::after { background-color: rgba(255, 255, 255, 0.86); } body header:not(.scrolled) .theme-toggle, body header:not(.scrolled) .mobile-menu-toggle { color: #ffffff; border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); } body header:not(.scrolled) .theme-toggle:hover, body header:not(.scrolled) .mobile-menu-toggle:hover { background: var(--blue-soft); border-color: var(--blue); color: #ffffff; transform: scale(1.05); box-shadow: 0 0 20px var(--blue-glow); } body header:not(.scrolled) .theme-toggle:hover { transform: scale(1.05) rotate(15deg); } .nav-container { display: flex; justify-content: center; align-items: center; position: relative; } .nav-right { display: flex; align-items: center; justify-content: center; gap: 1.25rem; width: 100%; } header nav { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; } header.nav-visible nav { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .theme-toggle, .mobile-menu-toggle { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-primary); transition: var(--transition-fast); backdrop-filter: blur(8px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .theme-toggle { pointer-events: auto; } .theme-toggle[hidden] { display: none !important; } .theme-toggle:hover, .mobile-menu-toggle:hover { background: var(--blue-soft); border-color: var(--line-active); transform: scale(1.05); box-shadow: 0 4px 20px var(--blue-glow); } .theme-toggle:hover { transform: scale(1.05) rotate(15deg); } .mobile-menu-toggle { display: none; /* Hidden on desktop by default */ z-index: 101; /* Ensure it stays on top of the menu overlay */ pointer-events: auto; } .mobile-menu-toggle .menu-icon, .mobile-menu-toggle svg { width: 18px; height: 18px; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; } /* Default icon states */ .mobile-menu-toggle .menu-icon-open, .mobile-menu-toggle svg:nth-child(1) { display: block !important; } .mobile-menu-toggle .menu-icon-close, .mobile-menu-toggle svg:nth-child(2) { display: none !important; } /* Active open states */ body.mobile-menu-open .mobile-menu-toggle, body.mobile-menu-open header .mobile-menu-toggle, body.mobile-menu-open header:not(.scrolled) .mobile-menu-toggle { background: var(--blue) !important; border-color: var(--blue) !important; color: #ffffff !important; box-shadow: 0 0 25px var(--blue-glow) !important; transform: scale(1.05) !important; } body.mobile-menu-open .mobile-menu-toggle:hover, body.mobile-menu-open header .mobile-menu-toggle:hover, body.mobile-menu-open header:not(.scrolled) .mobile-menu-toggle:hover { background: var(--blue-soft) !important; border-color: var(--blue) !important; color: #ffffff !important; transform: scale(1.1) !important; box-shadow: 0 0 30px var(--blue-glow) !important; } body.mobile-menu-open .mobile-menu-toggle .menu-icon-open, body.mobile-menu-open .mobile-menu-toggle svg:nth-child(1) { display: none !important; } body.mobile-menu-open .mobile-menu-toggle .menu-icon-close, body.mobile-menu-open .mobile-menu-toggle svg:nth-child(2) { display: block !important; } .theme-toggle .theme-icon { width: 18px; height: 18px; transition: transform 0.5s ease; } .theme-toggle .theme-icon-sun { display: none; } .theme-toggle .theme-icon-moon { display: block; } body.light-theme .theme-toggle .theme-icon-sun { display: block; } body.light-theme .theme-toggle .theme-icon-moon { display: none; } /* Mobile Menu Overlay Styles */ .mobile-menu-overlay { position: fixed; inset: 0; z-index: 99; background: rgba(5, 5, 8, 0.95); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s cubic-bezier(0.16, 1, 0.3, 1); } body.light-theme .mobile-menu-overlay { background: rgba(245, 246, 249, 0.95); } body.mobile-menu-open .mobile-menu-overlay { opacity: 1; visibility: visible; pointer-events: auto; } body.mobile-menu-open { overflow: hidden; } .mobile-menu-content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 4rem 2rem; } .mobile-nav ul { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; list-style: none; padding: 0; margin: 0; } .mobile-nav-link { font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--text-primary); text-decoration: none; display: block; opacity: 0; transform: translateY(30px); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease; } body.mobile-menu-open .mobile-nav-link { opacity: 1; transform: translateY(0); } /* Staggered load delays for links */ body.mobile-menu-open .mobile-nav ul li:nth-child(1) .mobile-nav-link { transition-delay: 0.1s; } body.mobile-menu-open .mobile-nav ul li:nth-child(2) .mobile-nav-link { transition-delay: 0.18s; } body.mobile-menu-open .mobile-nav ul li:nth-child(3) .mobile-nav-link { transition-delay: 0.26s; } body.mobile-menu-open .mobile-nav ul li:nth-child(4) .mobile-nav-link { transition-delay: 0.34s; } .mobile-nav-link:hover { color: var(--blue); transform: scale(1.04); } .logo { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; position: absolute; left: 4rem; opacity: 0; visibility: hidden; pointer-events: none; } .logo-dot { width: 8px; height: 8px; background-color: var(--blue); border-radius: 50%; display: inline-block; box-shadow: 0 0 10px var(--blue); } nav ul { display: flex; gap: 2.5rem; } nav a { font-family: var(--font-main); font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 2px; position: relative; padding: 0.5rem 0; transition: var(--transition-fast); } nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--blue); transition: var(--transition-fast); } nav a:hover { color: var(--text-primary); } nav a:hover::after { width: 100%; } @media (max-width: 768px) { .nav-container { justify-content: flex-end; } header nav { display: none; /* Modern slide out / simple nav for mobile */ } .mobile-menu-toggle { display: flex; /* Show mobile menu button on mobile/tablets */ } .nav-right { width: auto; justify-content: flex-end; gap: 1.2rem; /* Symmetrically cluster buttons */ } } /* ========================================================================== SCROLL-DRIVEN HERO INTRO ========================================================================== */ .hero-wrapper { position: relative; width: 100%; min-height: calc(var(--hero-scroll-height) + var(--about-scroll-height)); z-index: 10; /* Never visible: the pinned .hero-sticky covers it for its whole range. */ background: #001f99; } .hero-trigger { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .hero-sticky { position: sticky; top: 0; width: 100%; height: 100vh; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; } @supports (height: 100dvh) { .hero-sticky { height: 100dvh; min-height: 100dvh; } } .intro-word { display: block; } .hero-bg-blue { position: absolute; inset: 0; background: var(--blue-stage-bg); z-index: 1; pointer-events: none; } /* The WebGL scene sits between the fallback blue and the typography. */ .hero-scene { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 0.9s ease; } body.opening-webgl .hero-scene { opacity: 1; } /* No WebGL: nothing occupies the left third, so the copy takes the whole frame instead of sitting against the right edge. */ body.opening-no-webgl .hero-copy { left: 8vw; } body.opening-no-webgl .intro-sub { margin-left: 0; } /* * Editorial composition: the tower stands centre-left, the name is set huge * and crosses it, the kicker sits above the name and the caption clears the * object's base. Positions are viewport fractions so they track the scene's * camera, which frames the same fractions. */ .hero-copy { position: absolute; left: 30vw; right: 3vw; top: 50%; transform: translate3d(0, -52%, 0); z-index: 10; color: #ffffff; } .hero-kicker { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 2.4vh, 1.6rem); letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); margin: 0 0 clamp(0.6rem, 1.6vh, 1.2rem) 0.25rem; } .hero-kicker .intro-word { display: inline; font: inherit; letter-spacing: inherit; color: inherit; text-shadow: none; } .hero-name { font-family: var(--font-display); font-weight: 900; font-size: clamp(5.2rem, 19.5vh, 15rem); line-height: 0.86; letter-spacing: -0.012em; text-transform: uppercase; margin: 0; color: #ffffff; text-shadow: 0 28px 90px rgba(0, 10, 60, 0.55); } .intro-sub { margin: clamp(1.6rem, 3.4vh, 2.6rem) 0 0 22vw; font-family: var(--font-main); font-size: clamp(0.9rem, 1.05vw, 1.08rem); font-weight: 400; line-height: 1.65; color: rgba(255, 255, 255, 0.76); max-width: 380px; letter-spacing: 0.2px; } .hero-stats-sequence { position: absolute; inset: 0; z-index: 11; pointer-events: none; opacity: 0; color: #ffffff; } /* One chapter at a time, in the same right-hand column as the name. */ .hero-stat-line { position: absolute; left: 52vw; right: 3vw; top: 50%; transform: translate3d(0, -50%, 0); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.5rem, 1.4vh, 1.1rem); opacity: 0; visibility: hidden; } .hero-stat-number { font-family: var(--font-display); font-size: clamp(5.6rem, 24vh, 17rem); font-weight: 900; line-height: 0.8; color: #ffffff; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; text-shadow: 0 28px 90px rgba(0, 10, 60, 0.55); } .hero-stat-label { font-family: var(--font-display); font-size: clamp(1.2rem, 3.4vh, 2.6rem); font-weight: 800; line-height: 0.95; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); padding-left: 0.2rem; } .scroll-indicator { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.8rem; color: color-mix(in srgb, rgba(255, 255, 255, 0.7) calc((1 - var(--hero-scroll-blend, 0)) * 100%), var(--text-muted)); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; z-index: 10; } .scroll-mouse { width: 20px; height: 32px; border: 1px solid color-mix(in srgb, rgba(255, 255, 255, 0.4) calc((1 - var(--hero-scroll-blend, 0)) * 100%), var(--line-active)); border-radius: 12px; position: relative; } .scroll-wheel { width: 3px; height: 6px; background-color: color-mix(in srgb, #ffffff calc((1 - var(--hero-scroll-blend, 0)) * 100%), var(--blue)); border-radius: 2px; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); animation: scrollWheelAnim 1.6s infinite ease-in-out; } @keyframes scrollWheelAnim { 0% { top: 6px; opacity: 1; } 70% { top: 18px; opacity: 0; } 100% { top: 6px; opacity: 0; } } main#main-content { position: relative; z-index: 20; margin-top: 0; background: var(--black); } /* ========================================================================== ABOUT / BIO SECTION ========================================================================== */ .about-section { min-height: var(--about-scroll-height); /* Overlaps the hero by its own height: the pinned hero scene is its backdrop. */ margin-top: calc(-1 * var(--about-scroll-height)); position: relative; z-index: 20; background: var(--blue-stage-bg); background-attachment: fixed; background-size: 100vw 100vh; background-position: center; } body.has-opening-scene .about-section, body.has-opening-scene .about-stage-bg { background: transparent; } .about-stage-sticky { position: relative; top: 0; min-height: 100vh; height: 100vh; display: flex; align-items: center; overflow: hidden; color: #ffffff; padding: clamp(4.8rem, 7vh, 6.5rem) 0 clamp(3rem, 5vh, 4.2rem); } @supports (height: 100dvh) { .about-stage-sticky { min-height: 100dvh; height: 100dvh; } } .about-stage-bg { position: absolute; inset: 0; background: var(--blue-stage-bg); background-attachment: fixed; background-size: 100vw 100vh; background-position: center; pointer-events: none; } .about-stage .container { position: relative; z-index: 1; } .about-stage.is-static { min-height: auto; margin-top: 0; } body.has-opening-scene .about-stage.is-static { background: var(--blue-stage-bg); background-attachment: scroll; background-size: auto; } .about-stage.is-static .about-stage-sticky { position: relative; min-height: min(92vh, 820px); height: auto; } .section-label { font-family: var(--font-main); font-size: 0.75rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 4px; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; } .section-label::before { content: ''; display: inline-block; width: 20px; height: 1px; background-color: var(--blue); } .about-stage .section-label { color: rgba(255, 255, 255, 0.82); } .about-stage .section-label::before { background-color: rgba(255, 255, 255, 0.78); } .about-grid { display: grid; grid-template-columns: minmax(370px, 0.92fr) minmax(460px, 1.04fr); gap: clamp(2.2rem, 4.6vw, 5.5rem); align-items: center; } .about-text h2 { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; line-height: 1.1; text-transform: uppercase; margin-bottom: 2.5rem; letter-spacing: -1px; } .about-stage .about-text h2 { color: #ffffff; font-size: clamp(2.7rem, 3.85vw, 4.1rem); } .about-text p { font-size: 1.15rem; font-weight: 400; color: var(--text-secondary); margin-bottom: 2rem; max-width: 700px; line-height: 1.8; } .about-stage .about-text p { color: rgba(255, 255, 255, 0.82); max-width: 590px; } .about-stage .about-text strong { color: #ffffff; } .highlight-blue { color: var(--blue); border-bottom: 0; } .about-stage .highlight-blue { color: rgba(255, 255, 255, 0.62); } .about-video-reel { height: clamp(560px, 76vh, 720px); position: relative; width: 100%; } .about-video-wave { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(1.3rem, 3vh, 2.4rem); pointer-events: none; } .about-video-card { width: min(88%, 550px); aspect-ratio: 16 / 9; /* Set by js/hero-experience.js to the projected corner of the slab that lands on this card, so card and slab share one silhouette. The fallback is for the no-WebGL path, where no slab is drawn. */ border-radius: var(--about-card-radius, 10px); position: relative; overflow: hidden; background: #06122e; border: 1px solid rgba(255, 255, 255, 0.17); box-shadow: 0 22px 48px rgba(0, 12, 68, 0.25); } .about-video-card--right { align-self: flex-end; } .about-video-card--left { align-self: flex-start; } .about-video-card video, .about-video-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; } .about-video-card.is-unavailable::after { content: 'Video unavailable'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #06163d; color: rgba(255, 255, 255, 0.58); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .about-video-placeholder { position: relative; background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 42%), radial-gradient(circle at 70% 30%, rgba(91, 139, 255, 0.3), transparent 44%), #06163d; } .about-video-placeholder::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.08), transparent); animation: aboutPlaceholderSheen 2.4s ease-in-out infinite; } .about-video-placeholder span { position: absolute; left: 1.2rem; bottom: 1rem; font-family: var(--font-main); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.36); } @keyframes aboutPlaceholderSheen { 55%, 100% { transform: translateX(100%); } } .about-stage.is-static .about-grid { grid-template-columns: minmax(0, 780px); } .about-stage.is-static .about-video-reel { display: none; } @media (max-width: 1024px) { .about-grid { grid-template-columns: minmax(300px, 0.92fr) minmax(380px, 1fr); gap: 2.25rem; } } @media (max-width: 768px) { .hero-wrapper { min-height: calc(var(--hero-scroll-height-mobile) + var(--about-scroll-height-mobile)); } .about-section { min-height: var(--about-scroll-height-mobile); margin-top: calc(-1 * var(--about-scroll-height-mobile)); } } /* Compact opening: phones and tablets held upright. The tower stands in the upper half, the copy sits below it on the floor plane. */ @media (max-width: 768px), (max-width: 1100px) and (orientation: portrait) { .hero-copy { left: 1.5rem; right: 1.5rem; top: auto; bottom: 13vh; transform: none; } .hero-kicker { font-size: 0.78rem; letter-spacing: 0.3em; margin-bottom: 0.5rem; } .hero-name { font-size: clamp(3.6rem, 17.5vw, 5.4rem); letter-spacing: 0; } .intro-sub { margin: 1.1rem 0 0; font-size: 0.86rem; line-height: 1.55; max-width: 330px; } .hero-stat-line { left: 1.5rem; right: 1.5rem; top: auto; bottom: 15vh; transform: none; gap: 0.45rem; } .about-stage-sticky { align-items: stretch; padding: clamp(4.7rem, 8vh, 5.25rem) 0 1.25rem; } .about-grid { height: calc(100dvh - 8rem); display: flex; flex-direction: column; gap: 1rem; align-items: stretch; } .about-stage .section-label { margin-bottom: 0.9rem; } .about-stage .about-text h2 { font-size: clamp(2.05rem, 10.5vw, 2.7rem); line-height: 1.01; margin-bottom: 1rem; letter-spacing: 0; } .about-stage .about-text p { font-size: clamp(0.76rem, 3.15vw, 0.87rem); line-height: 1.52; margin-bottom: 0.68rem; } .about-video-reel { flex: 1; min-height: 0; height: auto; margin-top: 0.2rem; } .about-video-wave { display: contents; } .about-video-card { position: absolute; inset: 0; width: 100%; max-height: 100%; margin: auto; align-self: unset; } .hero-stat-number { font-size: clamp(4.6rem, 22vw, 7rem); } .hero-stat-label { font-size: clamp(1rem, 4.6vw, 1.5rem); } } /* ========================================================================== REDUCED MOTION: the opening as a static composition Every piece of content stays; nothing pins, travels or blurs. The hero keeps its artboard (drawn once) with the stats laid out beneath the name, and About becomes an editorial block with all motion cards visible as still frames. ========================================================================== */ body.reduced-opening .hero-wrapper { min-height: 0; } body.reduced-opening .hero-sticky { height: 100vh; min-height: 100vh; } body.reduced-opening .scroll-indicator { display: none; } /* The still frame keeps the editorial layout; the stats line up under the caption instead of taking their own chapters. */ body.reduced-opening .hero-copy { top: 44%; } body.reduced-opening .hero-stats-sequence { opacity: 1; } body.reduced-opening .hero-stat-line { position: absolute; top: auto; bottom: 9vh; left: 52vw; right: auto; transform: none; opacity: 1; visibility: visible; gap: 0.3rem; } body.reduced-opening .hero-stat-line:nth-child(2) { left: calc(52vw + 12.5rem); } body.reduced-opening .hero-stat-line:nth-child(3) { left: calc(52vw + 26rem); } body.reduced-opening .hero-stat-number { font-size: clamp(2.4rem, 5vh, 3.4rem); text-shadow: none; } body.reduced-opening .hero-stat-label { font-size: clamp(0.72rem, 1.4vh, 0.9rem); letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.68); } @media (max-width: 768px) { body.reduced-opening .hero-copy { top: auto; bottom: 24vh; } body.reduced-opening .hero-stat-line, body.reduced-opening .hero-stat-line:nth-child(2), body.reduced-opening .hero-stat-line:nth-child(3) { left: 1.5rem; bottom: 6vh; flex-direction: row; align-items: baseline; gap: 0.6rem; } body.reduced-opening .hero-stat-line:nth-child(1) { bottom: 15vh; } body.reduced-opening .hero-stat-line:nth-child(2) { bottom: 10.5vh; } body.reduced-opening .hero-stat-number { font-size: 1.6rem; } } body.reduced-opening .about-section { min-height: 0; margin-top: 0; background: var(--blue-stage-bg); background-attachment: scroll; background-size: auto; } body.reduced-opening .about-stage-sticky { position: relative; height: auto; min-height: 0; overflow: visible; padding: clamp(5rem, 9vh, 7rem) 0 clamp(4rem, 8vh, 6rem); } body.reduced-opening .about-grid { height: auto; align-items: start; } body.reduced-opening .about-video-reel { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0; } body.reduced-opening .about-video-wave { display: contents; } body.reduced-opening .about-video-card { position: relative; inset: auto; width: 100%; max-height: none; margin: 0; align-self: auto; } body.reduced-opening .about-video-placeholder::after { animation: none; } @media (max-width: 768px) { body.reduced-opening .about-grid { height: auto; } body.reduced-opening .about-video-reel { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .scroll-wheel, .about-video-placeholder::after { animation: none; } } /* ========================================================================== PORTFOLIO SHOWCASE SECTION ========================================================================== */ .portfolio-section { padding: 8rem 0 9rem; position: relative; z-index: 20; } .portfolio-description { max-width: 760px; margin-top: 1.2rem; color: var(--text-secondary); font-size: clamp(1rem, 1.2vw, 1.16rem); line-height: 1.75; } .portfolio-group + .portfolio-group { margin-top: clamp(4rem, 6vw, 6rem); padding-top: clamp(2.5rem, 4vw, 4rem); border-top: 1px solid var(--line); } .portfolio-group-heading { display: grid; gap: 0.55rem; margin-top: 3rem; } .portfolio-group-heading span { color: var(--blue); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .portfolio-group-heading h2 { font-family: var(--font-display); font-size: clamp(2.1rem, 3.3vw, 3.75rem); font-weight: 900; line-height: 1; text-transform: uppercase; } .portfolio-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portfolio-grid--archive { opacity: 0.9; } .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.45vw, 1.75rem); margin-top: 2.5rem; } #portfolio-grid .portfolio-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } #portfolio-grid { display: block; } .portfolio-card { background-color: var(--black-card); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; overflow: hidden; display: block; /* Same timing as --transition-smooth, spelled out so the registered --x/--y spotlight coordinates below are not swept up by `all`. These four are everything that actually moves: border-colour and box-shadow from :hover and from the theme switch, background-color from the theme switch (--black-card goes #0c0c0e -> #ffffff), transform from the tilt. */ transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); transform-style: preserve-3d; perspective: 1000px; position: relative; min-height: 0; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28); /* Chrome border-radius subpixel clipping fixes during transforms */ isolation: isolate; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); } /* * The spotlight coordinates are rewritten on the hovered card on every pointer * frame. An unregistered custom property inherits, so each write invalidated * the card's entire subtree — about sixteen elements re-resolved per frame, and * the single largest block of Recalculate Style while the pointer moved. * Registering them as non-inherited scopes the invalidation to the card and its * ::after, which is the only thing that reads them. Browsers without @property * simply keep the old behaviour. * * Registered properties are animatable, which is why .portfolio-card spells its * transition out rather than using the `all` shorthand: `all` would sweep these * two in and make the spotlight lag 0.6s behind the pointer. */ @property --x { syntax: ''; inherits: false; initial-value: 0px; } @property --y { syntax: ''; inherits: false; initial-value: 0px; } .portfolio-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(400px circle at var(--x, 0px) var(--y, 0px), rgba(0, 82, 255, 0.08), transparent 40%); opacity: 0; transition: opacity 0.5s; pointer-events: none; } .portfolio-card:hover::after { opacity: 1; } .portfolio-card:hover { border-color: rgba(0, 82, 255, 0.72); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.55); /* Unify transform completely in JS to prevent transition snaps and sharp corners */ } .portfolio-image-wrapper { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--black-card); /* Chrome border-radius subpixel clipping fixes during transforms */ border-radius: 20px 20px 0 0; isolation: isolate; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); } .portfolio-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .portfolio-card:hover .portfolio-image-wrapper img { transform: scale(1.06); } .portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.62) 62%, rgba(0, 0, 0, 0.15) 100%), rgba(5, 5, 5, 0.12); opacity: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: clamp(1.4rem, 2vw, 2.2rem); transition: opacity 0.4s; /* A 1px backdrop-filter is visually indistinguishable from none, but it still forces a backdrop copy + blur pass per hovered card. Removed. */ } .portfolio-card:hover .portfolio-overlay { opacity: 1; } .portfolio-view-text { font-family: var(--font-main); font-size: 0; font-weight: 800; color: #fff; background-color: transparent; padding: 0; border-radius: 0; letter-spacing: 0; display: inline-flex; align-items: center; gap: 0; box-shadow: none; transition: var(--transition-fast); } .portfolio-card:hover .portfolio-view-text { transform: translateX(6px); } .portfolio-view-text span { display: none; } .portfolio-view-text i { width: 26px !important; height: 26px !important; stroke-width: 1.6; } .portfolio-info { position: absolute; inset: 0; z-index: 3; padding: clamp(1.4rem, 2vw, 2.2rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.85rem; width: min(78%, 460px); pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.35s ease; } .portfolio-card:hover .portfolio-info { opacity: 1; transform: translateY(0); } .portfolio-category { font-size: clamp(0.68rem, 0.78vw, 0.84rem); font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 1.6px; line-height: 1.25; } .portfolio-info h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.15vw, 2.45rem); font-weight: 800; text-transform: uppercase; color: #ffffff; line-height: 1.06; letter-spacing: 0; text-wrap: balance; } @media (max-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } @media (max-width: 640px) { .portfolio-grid, .portfolio-grid--featured { grid-template-columns: 1fr; gap: 1.8rem; } #portfolio-grid .portfolio-grid--featured { grid-template-columns: 1fr; } .portfolio-info { width: 88%; opacity: 1 !important; transform: none !important; inset: auto 0 0; width: 100%; min-height: 48%; justify-content: flex-end; background: linear-gradient(180deg, transparent, rgba(5, 5, 5, 0.92)); } .portfolio-overlay { opacity: 0 !important; } .portfolio-group-heading h2 { font-size: clamp(1.85rem, 9vw, 2.4rem); } } @media (hover: none), (pointer: coarse) { body, a, button, input, textarea, select, [contenteditable] { cursor: auto !important; } .custom-cursor, .custom-cursor-follower { display: none !important; } .portfolio-card::after, .portfolio-overlay { opacity: 0 !important; } .portfolio-info { inset: auto 0 0; width: 100%; min-height: 48%; justify-content: flex-end; opacity: 1 !important; transform: none !important; background: linear-gradient(180deg, transparent, rgba(5, 5, 5, 0.92)); } .portfolio-card:hover { border-color: rgba(10, 15, 30, 0.08); box-shadow: 0 16px 42px rgba(10, 15, 30, 0.1); } .portfolio-card:hover .portfolio-image-wrapper img, .portfolio-card:hover .portfolio-view-text, .portfolio-card:hover .portfolio-info { transform: none !important; } } .footer-ats-link { display: inline-block; margin-top: 1rem; color: var(--text-secondary); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .footer-ats-link:hover { color: var(--blue); } /* ========================================================================== AI & WORKFLOW SHOWCASE ========================================================================== */ .ai-section { padding: 6rem 0; position: relative; z-index: 20; } .ai-intro { max-width: 800px; margin-bottom: 4rem; } .ai-intro h2 { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; text-transform: uppercase; line-height: 1.1; margin-top: 1rem; } .ai-heading-accent { color: var(--blue); } .ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .ai-card { background-color: var(--black-card); border: 1px solid var(--line); border-radius: 20px; padding: 3rem; position: relative; overflow: hidden; transition: var(--transition-smooth); } .ai-card:hover { border-color: var(--line-active); transform: translateY(-5px); background-color: var(--black-card-hover); } .ai-card-glow { position: absolute; top: 0; right: 0; width: 150px; height: 150px; background: radial-gradient(circle, rgba(0, 82, 255, 0.08) 0%, rgba(0, 82, 255, 0) 70%); z-index: 1; } .ai-card-icon { margin-bottom: 2rem; color: var(--blue); z-index: 2; position: relative; display: flex; align-items: center; } .ai-card h3 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.5px; z-index: 2; position: relative; } .ai-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; z-index: 2; position: relative; } @media (max-width: 1024px) { .ai-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .ai-grid { grid-template-columns: 1fr; } } /* ========================================================================== DRIVE CTA SHOWCASE ========================================================================== */ .drive-section { padding: 8rem 0; position: relative; z-index: 20; } .drive-box { background: radial-gradient(circle at 100% 0%, var(--blue-soft) 0%, transparent 60%), var(--black-card); border: 1px solid var(--line-active); border-radius: 24px; padding: 5rem; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; align-items: center; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .drive-box::before { content: ''; position: absolute; bottom: -150px; right: -150px; width: 400px; height: 400px; background: radial-gradient(circle, var(--blue-glow) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .drive-content h2 { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.2rem); font-weight: 800; text-transform: uppercase; line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -0.5px; } .drive-content p { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.7; margin-bottom: 2.5rem; max-width: 600px; } .drive-btn { display: inline-flex; align-items: center; gap: 1rem; background-color: var(--blue); color: #fff; padding: 1.2rem 2.8rem; border-radius: 50px; font-family: var(--font-main); font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition-smooth); box-shadow: 0 10px 30px rgba(0, 82, 255, 0.35); position: relative; } .drive-btn:hover { background-color: var(--blue-deep); transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0, 82, 255, 0.5); } .drive-visual { display: flex; justify-content: center; align-items: center; position: relative; } /* Premium folder icon mock */ .folder-mock { width: 220px; height: 170px; background-color: rgba(255, 255, 255, 0.02); border: 1px solid var(--line-active); border-radius: 16px; position: relative; backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; transform: rotate(-3deg); transition: var(--transition-smooth); } .folder-tab { width: 70px; height: 20px; background-color: var(--blue-soft); border: 1px solid var(--line-active); border-bottom: none; position: absolute; top: -20px; left: 20px; border-top-left-radius: 8px; border-top-right-radius: 8px; } .folder-core { font-family: var(--font-display); font-size: 5rem; font-weight: 800; color: var(--blue); opacity: 0.9; text-shadow: 0 0 30px var(--blue-glow); } .folder-sub { position: absolute; bottom: 1.5rem; font-family: var(--font-main); font-size: 0.75rem; font-weight: 600; color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase; } .drive-box:hover .folder-mock { transform: rotate(2deg) scale(1.05); border-color: rgba(0, 82, 255, 0.6); box-shadow: 0 20px 50px rgba(0, 82, 255, 0.2); } @media (max-width: 1024px) { .drive-box { grid-template-columns: 1fr; padding: 4rem; gap: 3rem; } .drive-visual { order: -1; } } /* ========================================================================== AESTHETIC FOOTER ========================================================================== */ footer { border-top: 1px solid var(--line); padding: 8rem 0 4rem; position: relative; z-index: 20; background-color: var(--black); transition: background-color 0.5s ease; } .footer-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 8rem; margin-bottom: 6rem; } .footer-brand h2 { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -1px; margin-bottom: 2rem; } .footer-heading-accent { color: var(--blue); } .footer-cv-btn { padding-inline: 2.4rem; min-height: 58px; } .footer-links { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; align-self: center; } .footer-contact-link { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; color: var(--blue); transition: var(--transition-fast); } .footer-contact-icon { width: 100%; height: 100%; flex: 0 0 auto; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--blue); background: var(--blue-soft); border: 1px solid var(--line-active); transition: var(--transition-fast); } .footer-contact-link:hover { color: #ffffff; transform: translateY(-3px); } .footer-contact-link:hover .footer-contact-icon { background: var(--blue); border-color: var(--blue); color: #ffffff; box-shadow: 0 16px 38px rgba(0, 82, 255, 0.28); } body.light-theme .footer-contact-link:hover .footer-contact-icon { background: var(--blue); border-color: var(--blue); color: #ffffff; } .footer-contact-icon svg, .footer-contact-icon i { width: 22px; height: 22px; display: block; } .footer-contact-icon--brand svg { fill: currentColor; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 3rem; border-top: 1px solid var(--line); } .copyright { font-size: 0.85rem; color: var(--text-muted); } .footer-credit { font-size: 0.85rem; color: var(--text-muted); } .footer-credit a { color: var(--text-secondary); font-weight: 600; } .footer-credit a:hover { color: var(--blue); } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; gap: 4rem; } .footer-links { justify-content: flex-start; } } @media (max-width: 480px) { .footer-links { justify-content: center; } .footer-bottom { flex-direction: column; gap: 1.5rem; text-align: center; } } /* ========================================================================== PORTFOLIO POPUP MODAL ========================================================================== */ body.modal-open { position: fixed; inset-inline: 0; width: 100%; overflow: hidden; padding-right: 8px; /* Avoid layout shift when scrollbar disappears */ } .portfolio-modal { position: fixed; inset: 0; width: 100%; height: 100dvh; z-index: 2000; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .portfolio-modal.active { visibility: visible; opacity: 1; pointer-events: auto; } .portfolio-modal.portfolio-modal--full { align-items: stretch; justify-content: stretch; background: var(--project-full-bg, #ffffff); color: var(--project-full-fg, #121214); } .modal-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 5, 8, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 1; } .portfolio-modal.portfolio-modal--full .modal-backdrop { background: var(--project-full-bg, #ffffff); backdrop-filter: none; -webkit-backdrop-filter: none; } .modal-wrapper { position: relative; width: 90vw; max-width: 1200px; height: 85vh; background: rgba(12, 12, 14, 0.75); border: 1px solid var(--line-active); border-radius: 24px; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05); z-index: 2; overflow: hidden; display: flex; flex-direction: column; transform: scale(0.95) translateY(30px); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .portfolio-modal.portfolio-modal--full .modal-wrapper { width: 100vw; max-width: none; height: 100vh; background: var(--project-full-bg, #ffffff); border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } @supports (height: 100dvh) { .portfolio-modal.portfolio-modal--full .modal-wrapper { height: 100dvh; } } .portfolio-modal.active .modal-wrapper { transform: scale(1) translateY(0); } .modal-close { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 100; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); color: var(--text-primary); display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .modal-close:hover { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 15px var(--blue-glow); transform: rotate(90deg); } .portfolio-modal.portfolio-modal--full .modal-close { color: var(--project-full-fg, #121214); background: rgba(128, 128, 128, 0.12); border-color: rgba(128, 128, 128, 0.28); box-shadow: none; } .portfolio-modal.portfolio-modal--full .modal-close:hover { color: #ffffff; background: var(--blue); border-color: var(--blue); } .modal-content { width: 100%; height: 100%; overflow: hidden; padding: 4rem; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-anchor: none; } .portfolio-modal.portfolio-modal--flow .modal-content { overflow-y: auto; } .portfolio-modal.portfolio-modal--full .modal-content { overflow-y: auto; padding: clamp(1.25rem, 3vw, 3.5rem); background: var(--project-full-bg, #ffffff); color: var(--project-full-fg, #121214); } /* Custom Scrollbar for Modal Content */ .modal-content::-webkit-scrollbar { width: 6px; } .modal-content::-webkit-scrollbar-track { background: transparent; } .modal-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; } .modal-content::-webkit-scrollbar-thumb:hover { background: var(--blue); } /* Modal Content Layout Grid */ .modal-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 3rem; align-items: start; height: 100%; min-height: 0; } .modal-grid--flow { height: auto; min-height: 100%; } .modal-visual-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; width: 100%; max-height: 100%; min-height: 0; overflow-y: auto; padding-right: 0.8rem; align-content: start; grid-auto-rows: max-content; } .modal-full-flow { width: 100%; min-height: 100%; background: var(--project-full-bg, #ffffff); color: var(--project-full-fg, #121214); } .portfolio-modal.portfolio-modal--full .modal-visual-stack { grid-template-columns: minmax(0, 1fr); gap: 0; max-height: none; overflow: visible; padding-right: 0; } .portfolio-modal.portfolio-modal--flow .modal-visual-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-right: 0; max-height: none; overflow: visible; } .modal-media-item { grid-column: 1 / -1; min-width: 0; align-self: start; justify-self: stretch; min-height: 0; } .modal-media-item--half { grid-column: span 1; } .modal-media-item--original, .modal-media-item--custom { grid-column: 1 / -1; max-width: 100%; } .modal-media-item--original { width: fit-content; } .modal-media-item--custom { width: min(100%, var(--media-custom-width, 640px)); } .modal-media-item--align-left { justify-self: start; } .modal-media-item--align-center { justify-self: center; } .modal-media-item--align-right { justify-self: end; } .portfolio-modal.portfolio-modal--full .modal-media-item, .portfolio-modal.portfolio-modal--full .modal-media-item--half { grid-column: 1 / -1; } .portfolio-modal.portfolio-modal--full .modal-media-item--full { width: 100%; max-width: none; justify-self: stretch; } .portfolio-modal.portfolio-modal--full .modal-media-item--half { width: 100%; max-width: none; justify-self: stretch; } .portfolio-modal.portfolio-modal--full .modal-media-item--custom { width: min(100%, var(--media-custom-width, 640px)); } .portfolio-modal.portfolio-modal--full .modal-media-item--original { width: fit-content; max-width: 100%; } .portfolio-modal.portfolio-modal--flow .modal-media-item, .portfolio-modal.portfolio-modal--flow .modal-media-item--full, .portfolio-modal.portfolio-modal--flow .modal-media-item--custom, .portfolio-modal.portfolio-modal--flow .modal-media-item--original, .portfolio-modal.portfolio-modal--flow .modal-media-item--spacer { grid-column: 1 / -1; } .portfolio-modal.portfolio-modal--flow .modal-media-item--full, .portfolio-modal.portfolio-modal--flow .modal-media-item--half, .portfolio-modal.portfolio-modal--flow .modal-media-item--spacer { width: 100%; max-width: none; justify-self: stretch; } .portfolio-modal.portfolio-modal--flow .modal-media-item--half { grid-column: span 1; } .portfolio-modal.portfolio-modal--flow .modal-media-item--custom { width: min(100%, var(--media-custom-width, 640px)); } .portfolio-modal.portfolio-modal--flow .modal-media-item--original { width: fit-content; max-width: 100%; } .modal-visual-stack::-webkit-scrollbar, .modal-details::-webkit-scrollbar { width: 6px; } .modal-visual-stack::-webkit-scrollbar-track, .modal-details::-webkit-scrollbar-track { background: transparent; } .modal-visual-stack::-webkit-scrollbar-thumb, .modal-details::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; } .modal-visual-stack::-webkit-scrollbar-thumb:hover, .modal-details::-webkit-scrollbar-thumb:hover { background: var(--blue); } .modal-media-item > img, .modal-media-item > .modal-video-frame { width: 100%; border-radius: 16px; border: 1px solid var(--line); background-color: var(--black-card); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transition: transform 0.4s ease, border-color 0.4s ease; } .portfolio-modal.portfolio-modal--full .modal-media-item > img, .portfolio-modal.portfolio-modal--full .modal-media-item > .modal-video-frame, .portfolio-modal.portfolio-modal--flow .modal-media-item > img, .portfolio-modal.portfolio-modal--flow .modal-media-item > .modal-video-frame { border: 0; border-radius: 0; background: transparent; box-shadow: none; } .portfolio-modal.portfolio-modal--full .modal-media-item--full > .modal-video-frame, .portfolio-modal.portfolio-modal--flow .modal-media-item > .modal-video-frame { max-width: none; margin-inline: 0; } .portfolio-modal.portfolio-modal--full .modal-media-item--original > img { width: auto; max-width: 100%; } .portfolio-modal.portfolio-modal--flow .modal-media-item--full > img, .portfolio-modal.portfolio-modal--flow .modal-media-item--half > img, .portfolio-modal.portfolio-modal--flow .modal-media-item--custom > img { width: 100%; max-width: 100%; } .portfolio-modal.portfolio-modal--flow .modal-media-item--original > img { width: auto; max-width: 100%; } .modal-media-item > img { height: auto; display: block; cursor: zoom-in; } .modal-media-item--spacer { grid-column: 1 / -1; width: 100%; max-width: none; } .modal-flow-spacer { width: 100%; height: var(--flow-spacer-height, 72px); min-height: 0; background: var(--flow-spacer-color, #ffffff); } .modal-media-item--original > img { width: auto; max-width: 100%; } .modal-media-item--original > .modal-video-frame { width: min(100%, 900px); } .modal-text-block { width: 100%; padding: clamp(1.6rem, 3vw, 3rem) clamp(1.15rem, 4vw, 3.5rem); font-size: 1rem; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; min-height: 0; display: block; background: transparent; border: 0; box-shadow: none; } .modal-text-heading { max-width: 22ch; font-family: var(--font-display); font-size: clamp(1.5rem, 2.35vw, 2.35rem); font-weight: 850; line-height: 1.02; letter-spacing: -0.025em; text-transform: uppercase; text-wrap: balance; } .modal-text-copy { max-width: 68ch; margin-top: 1rem; font-family: var(--font-main); font-size: clamp(0.92rem, 1vw, 1.05rem); font-weight: 500; line-height: 1.7; color: var(--text-secondary); } .modal-text-copy p + p { margin-top: 0.85rem; } .modal-text-block--align-center .modal-text-heading, .modal-text-block--align-center .modal-text-copy { margin-inline: auto; } .modal-text-block--align-right .modal-text-heading, .modal-text-block--align-right .modal-text-copy { margin-left: auto; margin-right: 0; } .modal-text-block--intro { padding-block: clamp(2.25rem, 4.5vw, 4.75rem); } .modal-text-block--intro .modal-text-heading { max-width: 18ch; font-size: clamp(1.8rem, 3vw, 3rem); } .modal-text-block--section .modal-text-heading { max-width: none; color: var(--blue); font-family: var(--font-main); font-size: 0.72rem; line-height: 1.2; letter-spacing: 0.16em; } .modal-text-block--section .modal-text-copy { max-width: 62ch; margin-top: 0.75rem; color: inherit; font-size: clamp(0.98rem, 1.15vw, 1.14rem); line-height: 1.65; } .modal-text-block--statement .modal-text-heading { max-width: 26ch; font-size: clamp(1.45rem, 2.4vw, 2.4rem); } .modal-media-caption { padding: 0.65rem clamp(0.8rem, 1.6vw, 1.4rem) 1.1rem; color: var(--text-muted); font-size: 0.7rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; } .modal-text-block--auto { color: var(--text-primary); } .portfolio-modal.portfolio-modal--full .modal-text-block--auto { color: var(--project-full-fg, #121214); } .portfolio-modal.portfolio-modal--full .modal-text-block { width: min(100%, 1120px); margin-inline: auto; padding: clamp(2rem, 5vw, 5rem) clamp(1.25rem, 6vw, 5rem); } .modal-info-button { position: absolute; top: 1.5rem; right: 5rem; z-index: 100; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(128, 128, 128, 0.28); background: rgba(128, 128, 128, 0.12); color: var(--project-full-fg, #121214); display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-smooth); } .modal-info-button:hover { background: var(--blue); border-color: var(--blue); color: #ffffff; } .project-info-backdrop { position: absolute; inset: 0; z-index: 110; background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .project-info-modal { position: absolute; top: clamp(1rem, 4vw, 3rem); right: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 4vw, 3rem); z-index: 120; width: min(430px, calc(100vw - 2rem)); overflow-y: auto; padding: 2rem; border-radius: 18px; border: 1px solid var(--line-active); background: rgba(12, 12, 14, 0.9); color: #ffffff; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } body.light-theme .project-info-modal { background: rgba(255, 255, 255, 0.92); color: #121214; } .project-info-close { position: sticky; top: 0; margin-left: auto; margin-bottom: 1rem; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: rgba(128, 128, 128, 0.12); color: inherit; display: flex; align-items: center; justify-content: center; } .project-info-modal .modal-details { max-height: none; overflow: visible; padding-right: 0; } body.light-theme .modal-text-block { background: transparent; } .modal-video-frame { position: relative; display: block; width: 100%; height: auto; min-height: 0; padding: 0; aspect-ratio: var(--media-aspect-ratio, 1 / 1); max-width: min(100%, 900px); margin-inline: auto; overflow: hidden; } .modal-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .modal-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000000; object-fit: cover; } /* * Embedded players (Drive) are cross-origin: we cannot reach into their chrome, * and Drive only offers a pop-out button at the top right. This sits at the top * LEFT so it never collides with that, and fullscreens the frame element, which * this document does own. Uploaded videos are left alone — their native control * bar already carries a fullscreen button. */ .modal-video-fullscreen { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; appearance: none; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; /* Deliberately always visible. A cross-origin iframe swallows pointer events, so `.modal-video-frame:hover` never fires while the pointer is over the player — a hover-to-reveal control here would be undiscoverable. */ opacity: 0.75; transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .modal-video-fullscreen:hover, .modal-video-fullscreen:focus-visible { opacity: 1; background: rgba(0, 0, 0, 0.78); border-color: var(--blue); } .modal-video-fullscreen svg { width: 17px; height: 17px; } .modal-video-fullscreen .modal-video-fullscreen-close { display: none; } .modal-video-frame:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; max-width: none; background: #000000; } /* Inline the frame is sized to the clip, so `cover` never crops. A screen is a different shape, so fullscreen has to letterbox instead. */ .modal-video-frame:fullscreen video { object-fit: contain; } .modal-video-frame:fullscreen .modal-video-fullscreen-open { display: none; } .modal-video-frame:fullscreen .modal-video-fullscreen-close { display: block; } .modal-video-placeholder { appearance: none; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; justify-content: center; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 800; background: radial-gradient(circle at 50% 45%, rgba(0, 82, 255, 0.18), transparent 34%), rgba(255, 255, 255, 0.035); } .modal-video-placeholder::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(5, 8, 12, 0.18), rgba(5, 8, 12, 0.62)), var(--video-thumbnail); background-size: cover; background-position: center; opacity: 0; transform: scale(1.015); transition: opacity 0.35s ease, transform 0.45s ease; } .modal-video-placeholder.has-thumbnail::before { opacity: 1; } .modal-video-placeholder-inner { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; justify-content: center; z-index: 1; color: #ffffff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); } .modal-video-placeholder .video-play-icon { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--line-active); background: rgba(255, 255, 255, 0.08); display: inline-flex; align-items: center; justify-content: center; color: var(--blue); box-shadow: 0 12px 35px rgba(0, 82, 255, 0.22); } .modal-video-placeholder .video-play-icon i { width: 22px; height: 22px; transform: translateX(1px); } .modal-video-placeholder:hover { background: radial-gradient(circle at 50% 45%, rgba(0, 82, 255, 0.28), transparent 38%), rgba(255, 255, 255, 0.055); } .modal-video-placeholder:hover::before { transform: scale(1.045); } .modal-visual-stack img:hover, .modal-video-frame:hover { border-color: var(--line-active); transform: translateY(-2px); } .portfolio-modal.portfolio-modal--flow .modal-visual-stack img:hover, .portfolio-modal.portfolio-modal--flow .modal-video-frame:hover, .portfolio-modal.portfolio-modal--full .modal-visual-stack img:hover, .portfolio-modal.portfolio-modal--full .modal-video-frame:hover { border-color: transparent; transform: none; } .modal-details { display: flex; flex-direction: column; position: sticky; top: 0; align-self: start; max-height: 100%; min-height: 0; overflow-y: auto; padding-right: 0.8rem; } /* * Flow mode lets the media column grow to its natural height and scrolls the * whole modal instead, so .modal-grid--flow is `height: auto` — which makes the * `max-height: 100%` above resolve to none. The details column therefore never * became a scroll container of its own: it could only move when the media * column moved, so the lower half of the project meta was unreachable until the * media had run out. * * A percentage cannot work here (it would resolve against the tall grid area), * so the height is tied to the wrapper's own 85vh minus the 4rem the modal * content pads with on each side. `top` stays 0: Chrome resolves the sticky * constraint against the content box, so 0 already pins the panel level with * the top of the media column — giving it the padding as breathing room. Any * offset here pushes it that far below the media column instead. * * `overscroll-behavior` must stay `auto`. `contain` reads as the right thing — * keep the wheel in the panel — but `overflow-y: auto` makes this a scroll * container even when the meta is short enough to fit, and `contain` then traps * the wheel in a pane with nowhere to go: on a short project the modal would * not scroll at all while the pointer sat over the sidebar. Measured. With * `auto`, Chrome's scroll latching still keeps a gesture inside the panel for * as long as the panel has travel, which is the behaviour that was asked for. */ .portfolio-modal.portfolio-modal--flow .modal-details { max-height: calc(85vh - 8rem); overscroll-behavior: auto; } .media-lightbox { position: fixed; inset: 0; z-index: 10000; display: block; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .media-lightbox.active { opacity: 1; visibility: visible; } .media-lightbox-backdrop { position: fixed; inset: 0; background: rgba(4, 4, 7, 0.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .media-lightbox-shell { position: relative; z-index: 2; width: 100%; height: 100%; padding: clamp(4.5rem, 6vh, 5.5rem) clamp(1rem, 5vw, 4rem); display: flex; align-items: center; justify-content: center; } .media-lightbox-stage { width: 100%; height: 100%; display: flex; justify-content: center; min-height: 0; } .media-lightbox-stage.is-fit, .media-lightbox-stage.is-loading { align-items: center; overflow: hidden; } .media-lightbox-stage.is-tall { align-items: flex-start; overflow-y: auto; padding: 1rem 0 3rem; } .media-lightbox-stage::-webkit-scrollbar { width: 6px; } .media-lightbox-stage::-webkit-scrollbar-track { background: transparent; } .media-lightbox-stage::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 999px; } .media-lightbox-image { position: relative; display: block; width: auto; max-width: min(92vw, 1500px); max-height: calc(100dvh - 150px); height: auto; object-fit: contain; margin: 0 auto; border-radius: 18px; border: 1px solid var(--line-active); box-shadow: 0 35px 90px rgba(0, 0, 0, 0.75); } .media-lightbox-stage.is-tall .media-lightbox-image { width: min(92vw, 980px); max-width: 980px; max-height: none; } .media-lightbox-close { position: fixed; top: 1.4rem; right: 1.4rem; z-index: 4; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); color: var(--text-primary); display: flex; align-items: center; justify-content: center; } .media-lightbox-close:hover { background: var(--blue); border-color: var(--blue); } .media-lightbox-nav { position: fixed; top: 50%; z-index: 4; width: clamp(44px, 4.6vw, 64px); height: clamp(44px, 4.6vw, 64px); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.07); color: #ffffff; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } .media-lightbox-nav:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-50%) scale(1.07); } .media-lightbox-nav--prev { left: clamp(1rem, 3vw, 2.5rem); } .media-lightbox-nav--next { right: clamp(1rem, 3vw, 2.5rem); } .media-lightbox-nav i { width: 28px; height: 28px; } .media-lightbox-counter { position: fixed; left: 50%; bottom: 1.35rem; z-index: 4; transform: translateX(-50%); padding: 0.55rem 0.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.34); color: rgba(255, 255, 255, 0.82); font-size: 0.72rem; font-weight: 800; line-height: 1; letter-spacing: 0.16em; } .media-lightbox.has-single-item .media-lightbox-counter { display: none; } .modal-category { font-size: 0.8rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 0.8rem; } .modal-details h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 2.7vw, 2.65rem); font-weight: 800; text-transform: uppercase; line-height: 1.1; color: var(--text-primary); margin-bottom: 1.5rem; } .modal-divider { width: 100%; height: 1px; background-color: var(--line); margin-bottom: 2rem; } .modal-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; } .meta-item { display: flex; flex-direction: column; gap: 0.3rem; } .meta-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; } .meta-value { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); } .meta-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; } .meta-tag { font-size: 0.75rem; font-weight: 600; background: var(--blue-soft); border: 1px solid rgba(0, 82, 255, 0.15); color: var(--blue); padding: 0.2rem 0.6rem; border-radius: 6px; } .modal-description { font-size: 1rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 2rem; } .modal-description p { margin-bottom: 1rem; } .modal-highlights { margin-top: 1rem; } .modal-highlights h4 { font-family: var(--font-main); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: var(--text-primary); letter-spacing: 2px; margin-bottom: 1rem; } .highlights-list { display: flex; flex-direction: column; gap: 0.8rem; } .highlight-bullet { display: flex; align-items: flex-start; gap: 0.8rem; font-size: 0.95rem; color: var(--text-secondary); } .highlight-bullet i { color: var(--blue); margin-top: 0.2rem; flex-shrink: 0; } @media (max-width: 1024px) { body.modal-open { padding-right: 0; } .portfolio-modal { height: 100dvh; transition: none; } .modal-backdrop { background: rgba(5, 5, 8, 0.86); backdrop-filter: none; -webkit-backdrop-filter: none; } body.light-theme .portfolio-modal .modal-backdrop { background: rgba(245, 246, 249, 0.9); backdrop-filter: none; -webkit-backdrop-filter: none; } .modal-content { padding: 3rem; overflow-y: auto; } .modal-grid { grid-template-columns: 1fr; gap: 3rem; height: auto; } .modal-wrapper { height: 90dvh; background: rgba(12, 12, 14, 0.98); backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; transition: none; } body.light-theme .portfolio-modal .modal-wrapper { background: rgba(250, 250, 252, 0.99); backdrop-filter: none; -webkit-backdrop-filter: none; } .portfolio-modal.active .modal-wrapper { transform: none; } .portfolio-modal .modal-close { z-index: 500; width: 50px; height: 50px; } /* One column below 1024px, so neither pane is its own scroller — the flow variant is named explicitly because it out-specifies this reset. */ .modal-visual-stack, .modal-details, .portfolio-modal.portfolio-modal--flow .modal-details { max-height: none; overflow: visible; padding-right: 0; position: static; } .modal-visual-stack { grid-template-columns: 1fr; } .portfolio-modal.portfolio-modal--flow .modal-visual-stack { grid-template-columns: 1fr; } .modal-media-item, .modal-media-item--half { grid-column: 1 / -1; } .portfolio-modal.portfolio-modal--flow .modal-media-item--half { grid-column: 1 / -1; } } @media (max-width: 640px) { .modal-content { padding: 2rem; } .portfolio-modal.portfolio-modal--flow .modal-text-block { padding: 1.8rem 1rem; } .portfolio-modal.portfolio-modal--flow .modal-text-heading { font-size: 1.45rem; } .portfolio-modal.portfolio-modal--flow .modal-text-block--intro .modal-text-heading { font-size: 1.85rem; } .portfolio-modal.portfolio-modal--flow .modal-text-block--section .modal-text-heading { font-size: 0.68rem; } .portfolio-modal.portfolio-modal--flow .modal-text-copy { font-size: 0.95rem; line-height: 1.62; } .media-lightbox-shell { padding: 4.5rem 0.85rem 4rem; } .media-lightbox-image { max-width: calc(100vw - 1.7rem); max-height: calc(100dvh - 140px); border-radius: 12px; } .media-lightbox-stage.is-tall .media-lightbox-image { width: calc(100vw - 1.7rem); } .media-lightbox-nav { width: 42px; height: 42px; background: rgba(255, 255, 255, 0.1); } .media-lightbox-nav--prev { left: 0.65rem; } .media-lightbox-nav--next { right: 0.65rem; } .modal-details h2 { font-size: 2.2rem; } .modal-meta-grid { grid-template-columns: 1fr; } } /* ========================================================================== LIGHT THEME SYSTEM OVERRIDES ========================================================================== */ body.light-theme { --black: #f5f6f9; --black-card: #ffffff; --black-card-hover: #eceef4; --text-primary: #121214; --text-secondary: #4a4d55; --text-muted: #848792; --line: rgba(0, 0, 0, 0.06); --line-active: rgba(0, 82, 255, 0.25); --blue-soft: rgba(0, 82, 255, 0.04); --blue-glow: rgba(0, 82, 255, 0.1); } /* Base Light Mode adaptations */ body.light-theme .ambient-bg { background: radial-gradient(circle at 50% 50%, #f1f3f6 0%, #e2e5ea 100%); } body.light-theme header.scrolled { background: rgba(245, 246, 249, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } /* * `multiply` against the near-white light-theme canvas resolved to almost the * same colour as plain source-over (the orb hues are near-black in the channels * multiply would darken), so dropping the blend mode costs no visible fidelity. */ body.light-theme .orb { opacity: 0.14; } /* * The light theme holds the ring's own colours through every hover state — a * white 0.8-alpha ring is invisible against the near-white canvas. That came * from this rule out-specifying the hover rules while both were (0,2,1) and * this one came later in the file. The hover rules are (0,3,0) now, so the * follower is named explicitly here to keep this at (0,3,1) and keep winning. */ body.light-theme .custom-cursor-follower .custom-cursor-ring { border-color: rgba(0, 82, 255, 0.18); background-color: rgba(0, 82, 255, 0.01); } body.light-theme ::-webkit-scrollbar-track { background: var(--black); } body.light-theme ::-webkit-scrollbar-thumb { background: #cbd3dc; border: 2px solid var(--black); } body.light-theme ::-webkit-scrollbar-thumb:hover { background: var(--blue); } /* Light Theme Card Shadow Refinements */ body.light-theme .portfolio-card { border-color: rgba(10, 15, 30, 0.08); box-shadow: 0 16px 42px rgba(10, 15, 30, 0.1); } body.light-theme .portfolio-overlay { background: linear-gradient(90deg, rgba(5, 8, 14, 0.75) 0%, rgba(5, 8, 14, 0.58) 62%, rgba(5, 8, 14, 0.1) 100%), rgba(5, 8, 14, 0.08); } body.light-theme .portfolio-view-text { color: #ffffff; border: 0; background: transparent; box-shadow: none; } body.light-theme .ai-card { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02); background: var(--black-card); } body.light-theme .ai-card-glow { background: radial-gradient(circle, rgba(0, 82, 255, 0.05) 0%, rgba(0, 82, 255, 0) 70%); } body.light-theme .folder-mock { background: rgba(255, 255, 255, 0.6); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04); } body.light-theme .drive-box { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.04); } body.light-theme .contact-info-card { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02); background: var(--black-card); } body.light-theme .contact-input { background-color: #fcfdfe; } body.light-theme .contact-input:focus { background-color: #ffffff; } /* Modal and Detail Refinements */ body.light-theme .modal-backdrop { background: rgba(245, 246, 249, 0.6); } body.light-theme .modal-wrapper { background: rgba(255, 255, 255, 0.75); border: 1px solid var(--line-active); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow: 0 30px 100px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4); } body.light-theme .modal-close { background: rgba(0, 0, 0, 0.03); color: var(--text-primary); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); } body.light-theme .modal-close:hover { background: rgba(0, 0, 0, 0.06); } /* Meta items inherit standard muted/primary variable styling cleanly */ body.light-theme .meta-tag { background: #f1f3f6; color: var(--text-secondary); border: 1px solid rgba(0, 0, 0, 0.04); } body.light-theme .modal-highlights h4 { color: var(--text-primary); } body.light-theme .modal-visual-stack img, body.light-theme .modal-video-frame { border-color: rgba(0, 0, 0, 0.05); box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06); } body.light-theme .modal-visual-stack img:hover, body.light-theme .modal-video-frame:hover { border-color: var(--blue); } /* ========================================================================== ADMIN PANEL INTEGRATION & LUXURY GLASSMORPHISM STYLES ========================================================================== */ /* Shared Admin Transitions & Variables */ :root { --admin-glass-bg: rgba(12, 12, 14, 0.75); --admin-glass-border: rgba(255, 255, 255, 0.05); --admin-card-bg: rgba(255, 255, 255, 0.02); --admin-card-border: rgba(255, 255, 255, 0.04); --admin-input-bg: rgba(0, 0, 0, 0.3); --admin-input-border: rgba(255, 255, 255, 0.08); --admin-text-active: #ffffff; --admin-btn-hover: rgba(0, 82, 255, 0.15); } body.light-theme { --admin-glass-bg: rgba(245, 246, 249, 0.85); --admin-glass-border: rgba(0, 0, 0, 0.06); --admin-card-bg: rgba(0, 0, 0, 0.02); --admin-card-border: rgba(0, 0, 0, 0.05); --admin-input-bg: rgba(255, 255, 255, 0.7); --admin-input-border: rgba(0, 0, 0, 0.1); --admin-text-active: #050505; --admin-btn-hover: rgba(0, 82, 255, 0.1); } /* Scroll Block on Body when Dashboard or modal is open */ body.admin-dashboard-active { overflow: hidden !important; } /* 1. SECURED LOGIN PIN MODAL */ .admin-login-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .admin-login-modal.active { opacity: 1; pointer-events: auto; } .admin-login-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 5, 5, 0.75); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); } body.light-theme .admin-login-backdrop { background: rgba(240, 242, 245, 0.7); } .admin-login-wrapper { position: relative; width: 100%; max-width: 400px; background: var(--admin-glass-bg); border: 1px solid var(--admin-glass-border); border-radius: 24px; padding: 3rem 2.5rem; box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); transform: scale(0.9); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); z-index: 10; text-align: center; } body.light-theme .admin-login-wrapper { box-shadow: 0 50px 100px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .admin-login-modal.active .admin-login-wrapper { transform: scale(1); } .admin-login-close { position: absolute; top: 1.2rem; right: 1.2rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--admin-glass-border); width: 32px; height: 32px; border-radius: 50%; color: var(--text-primary); display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .admin-login-close:hover { background: rgba(255, 255, 255, 0.08); transform: scale(1.05); } .admin-login-header { margin-bottom: 2rem; } .admin-login-icon { width: 56px; height: 56px; background: var(--blue-soft); border: 1px solid var(--line-active); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.2rem; } .admin-login-header h3 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; text-transform: uppercase; color: var(--text-primary); letter-spacing: 0.5px; } .admin-login-header p { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.2rem; } /* PIN Screen Input & Dots */ .admin-pin-display { position: relative; margin-bottom: 2rem; } .admin-pin-dots { display: flex; justify-content: center; gap: 1.2rem; margin-bottom: 0.5rem; } .pin-dot { width: 14px; height: 14px; border: 2px solid var(--text-muted); border-radius: 50%; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .pin-dot.filled { background-color: var(--blue); border-color: var(--blue); box-shadow: 0 0 10px var(--blue-glow); transform: scale(1.2); } #admin-pin-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } /* Keypad Grid Layout */ .admin-pin-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 280px; margin: 0 auto; } .keypad-btn { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--admin-glass-border); border-radius: 16px; padding: 1rem; font-family: var(--font-main); font-size: 1.2rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .keypad-btn:hover { background: var(--blue-soft); border-color: var(--line-active); transform: scale(1.05); color: var(--blue); } .keypad-btn:active { transform: scale(0.95); } .keypad-clear { color: #ef4444; } .keypad-clear:hover { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.25); color: #ef4444; } .keypad-back { color: var(--text-secondary); } /* Shake Animation on PIN failure */ @keyframes pinShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } } .admin-login-wrapper.shake { animation: pinShake 0.4s ease-in-out; } .admin-login-error { margin-top: 1.5rem; color: #ef4444; font-size: 0.85rem; font-weight: 600; opacity: 0; transition: opacity 0.3s; } .admin-login-error.visible { opacity: 1; } /* 2. FULLSCREEN ADMIN PANEL STYLING */ .admin-dashboard-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1999; background: var(--admin-glass-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); opacity: 0; pointer-events: none; transform: scale(1.02); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .admin-dashboard-overlay.active { opacity: 1; pointer-events: auto; transform: scale(1); } .admin-dashboard-container { display: grid; grid-template-columns: 280px 1fr; width: 100%; height: 100%; overflow: hidden; } /* Sidebar Styling */ .admin-sidebar { background: rgba(0, 0, 0, 0.2); border-right: 1px solid var(--admin-glass-border); display: flex; flex-direction: column; height: 100%; padding: 2.5rem 2rem; } body.light-theme .admin-sidebar { background: rgba(255, 255, 255, 0.15); } .admin-sidebar-header { margin-bottom: 3.5rem; } .admin-logo { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; letter-spacing: 1px; color: var(--text-primary); display: flex; align-items: center; gap: 0.4rem; } .admin-version { font-size: 0.7rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-top: 0.2rem; display: block; } .admin-sidebar-nav { display: flex; flex-direction: column; gap: 0.8rem; flex-grow: 1; } .sidebar-nav-btn { background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 0.9rem 1.2rem; display: flex; align-items: center; gap: 1rem; color: var(--text-secondary); font-family: var(--font-main); font-size: 0.9rem; font-weight: 600; text-align: left; transition: var(--transition-fast); } .sidebar-nav-btn i { width: 18px; height: 18px; color: var(--text-muted); transition: var(--transition-fast); } .sidebar-nav-btn:hover { background: rgba(255, 255, 255, 0.02); color: var(--text-primary); } .sidebar-nav-btn:hover i { color: var(--text-primary); } .sidebar-nav-btn.active { background: var(--blue-soft); border-color: var(--line-active); color: var(--blue); } .sidebar-nav-btn.active i { color: var(--blue); } .admin-sidebar-footer { border-top: 1px solid var(--admin-glass-border); padding-top: 2rem; } .admin-exit-btn { background: rgba(239, 68, 68, 0.05); border: 1px solid rgba(239, 68, 68, 0.15); border-radius: 12px; width: 100%; padding: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 0.8rem; color: #ef4444; font-family: var(--font-main); font-size: 0.9rem; font-weight: 700; transition: var(--transition-fast); } .admin-exit-btn:hover { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); transform: translateY(-2px); } /* Main Display Panel Styling */ .admin-main-panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 2.5rem 4rem; } .admin-panel-header { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--admin-glass-border); border-radius: 18px; padding: 1.35rem 1.65rem; margin-bottom: 2rem; position: sticky; top: 1rem; z-index: 100; background: rgba(10, 10, 12, 0.68); box-shadow: 0 16px 42px rgba(0, 0, 0, 0.16); backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); } body.light-theme .admin-panel-header { background: rgba(255, 255, 255, 0.72); box-shadow: 0 16px 42px rgba(20, 30, 45, 0.08); } .admin-panel-header h2 { font-family: var(--font-display); font-size: clamp(1.55rem, 2.2vw, 2.1rem); font-weight: 800; text-transform: uppercase; color: var(--text-primary); letter-spacing: 0; line-height: 1; } .admin-header-actions { display: flex; align-items: center; gap: 1.5rem; } .admin-theme-badge { background: var(--admin-card-bg); border: 1px solid var(--admin-card-border); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; gap: 0.6rem; transition: var(--transition-fast); } .admin-theme-badge:hover { background: var(--admin-btn-hover); border-color: var(--line-active); color: var(--text-primary); } .admin-theme-badge i { width: 14px; height: 14px; } .admin-status-indicator { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); } .pulse-dot { width: 8px; height: 8px; background-color: #10b981; border-radius: 50%; display: inline-block; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); animation: statusPulse 2s infinite ease-in-out; } @keyframes statusPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.9); } } /* Tab Scrollable Area */ .admin-tab-content-wrapper { flex-grow: 1; overflow-y: auto; overflow-x: hidden; padding-right: 1.5rem; } .admin-tab-content-wrapper::-webkit-scrollbar { width: 6px; } .admin-tab-content-wrapper::-webkit-scrollbar-thumb { background: var(--admin-card-border); border-radius: 3px; } .admin-tab-content { display: none; animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .admin-tab-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* TAB 1: OVERVIEW COMPONENT */ .admin-dashboard-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2.5rem; } .widget-card { background: var(--admin-card-bg); border: 1px solid var(--admin-card-border); border-radius: 20px; padding: 1.8rem 2rem; display: flex; align-items: center; gap: 1.5rem; } .widget-card.glow-blue { border-color: var(--line-active); background: var(--blue-soft); } .widget-icon { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--admin-card-border); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--blue); } body.light-theme .widget-icon { background: #ffffff; } .widget-icon i { width: 22px; height: 22px; } .widget-data { display: flex; flex-direction: column; } .widget-val { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; } .widget-lbl { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0.2rem; } .overview-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; } .overview-panel { background: var(--admin-card-bg); border: 1px solid var(--admin-card-border); border-radius: 20px; padding: 2.2rem; } .overview-panel h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--text-primary); text-transform: uppercase; margin-bottom: 1.2rem; } .overview-panel p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; } .overview-instructions { margin-top: 1.8rem; border-top: 1px solid var(--admin-glass-border); padding-top: 1.5rem; } .overview-instructions h4 { font-size: 0.9rem; font-weight: 700; color: var(--blue); margin-bottom: 0.8rem; } .overview-instructions ul { padding-left: 1.2rem; list-style-type: disc; } .overview-instructions li { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.6rem; line-height: 1.5; } .status-list { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1rem; } .status-list-item { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--admin-glass-border); padding-bottom: 0.8rem; } .status-list-item:last-child { border-bottom: none; padding-bottom: 0; } .status-list-item span { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; } .status-list-item strong { font-size: 0.9rem; color: var(--text-primary); min-width: 0; } .text-truncate { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* TAB 2: PROJECTS MANAGER */ .projects-tab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8rem; } .projects-tab-header h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; text-transform: uppercase; color: var(--text-primary); } .admin-action-btn { background: rgba(0, 82, 255, 0.08); border: 1px solid rgba(0, 82, 255, 0.28); color: var(--blue); border-radius: 14px; padding: 0.72rem 1.15rem; font-family: var(--font-main); font-size: 0.85rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.6rem; transition: var(--transition-fast); } .admin-action-btn:hover { background: rgba(0, 82, 255, 0.9); color: #ffffff; box-shadow: 0 10px 24px rgba(0, 82, 255, 0.18); transform: translateY(-2px); } .admin-action-btn.secondary { background: var(--admin-card-bg); border: 1px solid var(--admin-card-border); color: var(--text-primary); } .admin-action-btn.secondary:hover { background: rgba(255, 255, 255, 0.055); border-color: rgba(255, 255, 255, 0.16); } body.light-theme .admin-action-btn.secondary:hover { background: rgba(10, 15, 25, 0.045); border-color: rgba(10, 15, 25, 0.12); } .admin-action-btn.danger { color: #ef4444; border-color: rgba(239, 68, 68, 0.15); background: rgba(239, 68, 68, 0.05); } .admin-action-btn.danger:hover { background: #ef4444; color: #ffffff; box-shadow: 0 10px 20px rgba(239, 68, 68, 0.2); } .admin-action-btn.text { background: transparent; border: none; padding: 0.5rem 0; font-size: 0.8rem; color: var(--blue); } .admin-action-btn.text:hover { color: var(--blue-deep); transform: translateX(3px); box-shadow: none; } .admin-table-wrapper { background: var(--admin-card-bg); border: 1px solid var(--admin-card-border); border-radius: 20px; overflow: hidden; } .admin-projects-table { width: 100%; border-collapse: collapse; text-align: left; } .admin-projects-table th, .admin-projects-table td { padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--admin-glass-border); font-size: 0.85rem; vertical-align: middle; } .admin-projects-table th { background: rgba(0, 0, 0, 0.1); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); } body.light-theme .admin-projects-table th { background: rgba(0, 0, 0, 0.02); } .admin-projects-table tr:last-child td { border-bottom: none; } .table-order-col { display: flex; align-items: center; gap: 0.5rem; } .order-btn { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--admin-card-border); color: var(--text-secondary); width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .order-btn:hover:not(:disabled) { background: var(--blue-soft); border-color: var(--line-active); color: var(--blue); } .order-btn:disabled { opacity: 0.2; } .table-project-meta { display: flex; align-items: center; gap: 1rem; } .table-thumb { width: 50px; height: 38px; border-radius: 8px; object-fit: cover; border: 1px solid var(--admin-glass-border); } .table-project-meta strong { font-weight: 700; color: var(--text-primary); font-size: 0.9rem; } .featured-project-badge { display: flex; align-items: center; gap: 0.35rem; width: fit-content; margin-top: 0.3rem; padding: 0.28rem 0.52rem; border: 1px solid rgba(0, 82, 255, 0.34); border-radius: 999px; background: rgba(0, 82, 255, 0.1); color: var(--blue); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .featured-project-badge i, .featured-project-badge svg { width: 12px; height: 12px; fill: currentColor; } .table-badge { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--admin-card-border); padding: 0.3rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-status-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.55rem; border-radius: 999px; border: 1px solid var(--admin-card-border); font-size: 0.72rem; font-weight: 800; } .project-status-badge i { width: 13px; height: 13px; } .project-status-badge.active { color: #22c55e; background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.22); } .project-status-badge.inactive { color: #f59e0b; background: rgba(245, 158, 11, 0.09); border-color: rgba(245, 158, 11, 0.24); } .table-actions { display: flex; gap: 0.6rem; } .table-action-icon-btn { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--admin-card-border); color: var(--text-secondary); width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .table-action-icon-btn:hover { background: var(--blue-soft); border-color: var(--line-active); color: var(--blue); transform: translateY(-1px); } .table-action-icon-btn.danger-hover:hover { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.25); color: #ef4444; } .table-action-icon-btn i { width: 14px; height: 14px; } /* TAB 3: GLOBAL SETTINGS FORM */ .admin-settings-form { padding-bottom: 5rem; } .settings-sections-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 3rem; } .settings-card { background: var(--admin-card-bg); border: 1px solid var(--admin-card-border); border-radius: 20px; padding: 2.2rem; display: flex; flex-direction: column; gap: 1.5rem; } .settings-card.full-row { grid-column: span 2; } .settings-card h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; text-transform: uppercase; color: var(--blue); letter-spacing: 0.5px; border-bottom: 1px solid var(--admin-glass-border); padding-bottom: 0.8rem; margin-bottom: 0.5rem; } .settings-card h4 { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin: 0.5rem 0 -0.2rem; } .divider { height: 1px; background-color: var(--admin-glass-border); margin: 0.5rem 0; } /* Premium Form Elements */ .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-row { display: flex; gap: 1rem; } .form-group.col { flex: 1; } .form-group label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); } .form-group input, .form-group textarea, .form-group select { background-color: var(--admin-input-bg); border: 1px solid var(--admin-input-border); border-radius: 10px; padding: 0.8rem 1rem; font-family: var(--font-main); font-size: 0.9rem; color: var(--text-primary); outline: none; transition: var(--transition-fast); } .form-group input:focus, .form-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.1); background-color: rgba(0, 0, 0, 0.4); } body.light-theme .form-group input:focus, body.light-theme .form-group textarea:focus { background-color: #ffffff; } .input-tip { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; } .about-video-settings-list { display: flex; flex-direction: column; gap: 0.8rem; } .about-video-setting-card { display: grid; grid-template-columns: 42px 118px minmax(0, 1fr); gap: 0.75rem; align-items: center; border: 1px solid var(--admin-card-border); border-radius: 12px; padding: 0.7rem; background: rgba(255, 255, 255, 0.025); } body.light-theme .about-video-setting-card { background: rgba(255, 255, 255, 0.72); } .about-video-slot-order { display: flex; flex-direction: column; gap: 0.25rem; align-items: center; } .about-video-slot-order .media-icon-btn { width: 30px; height: 30px; } .about-video-slot-preview { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #081635; border: 1px solid var(--admin-card-border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .about-video-slot-preview video, .about-video-slot-preview img { width: 100%; height: 100%; display: block; object-fit: cover; } .about-video-slot-preview i { width: 18px; height: 18px; } .about-video-slot-fields { display: flex; flex-direction: column; min-width: 0; gap: 0.45rem; } .about-video-slot-fields input { width: 100%; font-size: 0.76rem; padding: 0.58rem 0.65rem; } .about-video-slot-actions { display: flex; flex-wrap: wrap; gap: 0.38rem; } .about-video-slot-actions .admin-action-btn { padding: 0.45rem 0.65rem; min-height: 32px; font-size: 0.7rem; } .about-video-upload-state { color: var(--blue); font-size: 0.68rem; font-weight: 700; } .project-display-settings { gap: 0.65rem; } .admin-segmented-control { display: inline-grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; width: min(100%, 520px); padding: 0.28rem; border: 1px solid var(--admin-card-border); border-radius: 12px; background: rgba(255, 255, 255, 0.025); } body.light-theme .admin-segmented-control { background: rgba(255, 255, 255, 0.68); } .admin-segmented-control label { cursor: pointer; } .admin-segmented-control input { position: absolute; opacity: 0; pointer-events: none; } .admin-segmented-control span { min-height: 38px; padding: 0.68rem 0.85rem; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; transition: var(--transition-fast); } .admin-segmented-control input:checked + span { color: #ffffff; background: var(--blue); box-shadow: 0 10px 26px rgba(0, 82, 255, 0.2); } .project-color-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .project-color-row input[type="color"] { width: 54px; height: 42px; padding: 0.2rem; flex: 0 0 auto; } .project-bg-swatches { display: flex; flex-wrap: wrap; gap: 0.45rem; } .project-bg-swatch { min-height: 36px; padding: 0 0.75rem 0 0.55rem; border: 1px solid var(--admin-card-border); border-radius: 999px; background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.42rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; transition: var(--transition-fast); } .project-bg-swatch::before { content: ''; width: 16px; height: 16px; border-radius: 999px; background: var(--swatch-color); border: 1px solid rgba(128, 128, 128, 0.35); } .project-bg-swatch.active, .project-bg-swatch:hover { color: var(--blue); border-color: var(--line-active); background: var(--blue-soft); } /* Sticky Action Bar at footer of settings */ .settings-action-bar { position: sticky; bottom: 0; left: 1.5rem; width: calc(100% - 3rem); margin: 0 1.5rem; background: rgba(10, 10, 12, 0.64); border: 1px solid var(--admin-glass-border); border-radius: 18px; padding: 1rem; display: flex; gap: 0.9rem; z-index: 10; backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.16); } body.light-theme .settings-action-bar { background: rgba(255, 255, 255, 0.78); box-shadow: 0 -8px 36px rgba(20, 30, 45, 0.08); } .settings-action-bar .admin-action-btn { min-height: 54px; padding-inline: 1.35rem; } /* TAB 4: BACKUP & DEPLOY PANEL */ .exporter-panel-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 3rem; align-items: start; width: 100%; } .exporter-instructions { background: var(--admin-card-bg); border: 1px solid var(--admin-card-border); border-radius: 20px; padding: 2.5rem; min-width: 0; } .exporter-instructions h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; text-transform: uppercase; color: var(--text-primary); margin-bottom: 1rem; } .instruction-box { background: rgba(0, 82, 255, 0.03); border: 1px solid var(--admin-card-border); border-radius: 12px; padding: 1.5rem; margin: 1.8rem 0; } .instruction-box h4 { font-size: 0.9rem; font-weight: 700; color: var(--blue); margin-bottom: 0.8rem; } .instruction-box ol { padding-left: 1.2rem; } .instruction-box li { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.6rem; line-height: 1.5; } .exporter-actions { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; } .exporter-code-blocks { display: flex; flex-direction: column; gap: 2rem; min-width: 0; } .code-block-container { background: #08080a; border: 1px solid var(--admin-card-border); border-radius: 16px; overflow: hidden; max-width: 100%; } body.light-theme .code-block-container { background: #f5f6f9; } .code-block-header { background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--admin-card-border); padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } body.light-theme .code-block-header { background: rgba(0, 0, 0, 0.02); } .code-block-header h4 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); } .copy-code-btn { background: var(--blue-soft); border: 1px solid var(--line-active); color: var(--blue); padding: 0.4rem 0.8rem; border-radius: 8px; font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; transition: var(--transition-fast); } .copy-code-btn:hover { background: var(--blue); color: #ffffff; } .code-block-container pre { padding: 1.5rem; max-height: 250px; overflow-y: auto; overflow-x: hidden; margin: 0; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; } .code-block-container code { font-family: 'Courier New', Courier, monospace; font-size: 0.8rem; color: #10b981; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; } body.light-theme .code-block-container code { color: #059669; } /* 3. DYNAMIC PROJECT EDITOR OVERLAY MODAL */ .admin-editor-overlay-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2005; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .admin-editor-overlay-modal.active { opacity: 1; pointer-events: auto; } .admin-editor-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 5, 5, 0.8); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); } body.light-theme .admin-editor-backdrop { background: rgba(240, 242, 245, 0.75); } .admin-editor-wrapper { position: relative; width: 100%; max-width: 800px; height: 90vh; background: var(--admin-glass-bg); border: 1px solid var(--admin-glass-border); border-radius: 24px; box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); display: flex; flex-direction: column; transform: scale(0.9); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); z-index: 10; overflow: hidden; } body.light-theme .admin-editor-wrapper { box-shadow: 0 50px 100px rgba(0, 0, 0, 0.1); } .admin-editor-overlay-modal.active .admin-editor-wrapper { transform: scale(1); } .admin-editor-header { padding: 2rem 2.5rem; border-bottom: 1px solid var(--admin-glass-border); display: flex; justify-content: space-between; align-items: center; } .admin-editor-header h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; text-transform: uppercase; color: var(--text-primary); } .admin-editor-close { background: transparent; border: none; color: var(--text-secondary); } .admin-editor-close:hover { color: var(--text-primary); } .admin-project-editor-form { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; } .editor-scroll-area { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 2.5rem; display: flex; flex-direction: column; gap: 1.8rem; } .editor-scroll-area::-webkit-scrollbar { width: 6px; } .editor-scroll-area::-webkit-scrollbar-thumb { background: var(--admin-card-border); border-radius: 3px; } .admin-editor-footer { border-top: 1px solid var(--admin-glass-border); padding: 1.5rem 2.5rem; background: rgba(0, 0, 0, 0.1); display: flex; gap: 1rem; } body.light-theme .admin-editor-footer { background: rgba(0, 0, 0, 0.01); } .admin-toggle-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid var(--admin-card-border); border-radius: 12px; background: rgba(255, 255, 255, 0.025); cursor: pointer; } .admin-toggle-row input { width: 18px; height: 18px; accent-color: var(--blue); } .admin-toggle-row span { color: var(--text-primary); font-size: 0.9rem; font-weight: 700; } /* Interactive dynamic lists inside editor */ .admin-interactive-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.4rem; } .admin-media-timeline { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 0.9rem; } .media-timeline-card { display: grid; grid-template-columns: 52px 150px minmax(0, 1fr) 40px; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--admin-card-border); border-radius: 14px; background: rgba(255, 255, 255, 0.025); } .media-timeline-card--text { grid-template-columns: 52px 190px minmax(0, 1fr) 40px; align-items: start; } .media-timeline-card--spacer { grid-template-columns: 52px 190px minmax(0, 1fr) 40px; } body.light-theme .media-timeline-card { background: rgba(255, 255, 255, 0.72); } .media-order-controls { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .media-order-index { min-width: 30px; height: 30px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; font-size: 0.76rem; font-weight: 800; } .media-icon-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--admin-card-border); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .media-icon-btn:hover:not(:disabled) { background: var(--blue-soft); color: var(--blue); border-color: var(--line-active); } .media-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; } .media-icon-btn.danger-hover:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; border-color: rgba(239, 68, 68, 0.35); } .media-icon-btn i { width: 15px; height: 15px; } .media-preview-frame { width: 100%; aspect-ratio: var(--media-preview-aspect-ratio, 16 / 10); border-radius: 12px; overflow: hidden; border: 1px solid var(--admin-card-border); background: rgba(0, 0, 0, 0.22); position: relative; } .media-preview-frame.text-preview { aspect-ratio: auto; min-height: 74px; padding: 0; display: block; border-color: transparent; background: transparent; } .media-preview-frame.spacer-preview { aspect-ratio: auto; min-height: 74px; padding: 0.55rem; display: flex; align-items: center; background: repeating-linear-gradient(45deg, rgba(132, 135, 146, 0.08) 0 8px, transparent 8px 16px), rgba(255, 255, 255, 0.025); } .media-preview-frame img, .media-preview-frame video, .media-preview-frame iframe { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; } .media-preview-frame iframe { pointer-events: none; } .media-text-preview { width: 100%; display: block; padding: 0.25rem 0; white-space: pre-wrap; overflow: hidden; line-height: 1.08; overflow-wrap: anywhere; } .media-spacer-preview { width: 100%; height: var(--spacer-preview-height, 48px); min-height: 18px; border-radius: 8px; border: 1px solid var(--admin-card-border); background: var(--spacer-preview-color, #ffffff); display: flex; align-items: center; justify-content: center; color: rgba(18, 18, 20, 0.62); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .media-preview-frame.preview-error::after { content: "Preview unavailable"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.62); color: #ffffff; font-size: 0.75rem; font-weight: 700; text-align: center; } .media-preview-empty, .media-timeline-empty { min-height: 96px; display: flex; align-items: center; justify-content: center; gap: 0.55rem; color: var(--text-muted); } .media-preview-empty i, .media-timeline-empty i { width: 20px; height: 20px; } .media-timeline-empty { border: 1px dashed var(--admin-card-border); border-radius: 14px; background: rgba(255, 255, 255, 0.02); } .media-card-fields { min-width: 0; display: flex; flex-direction: column; gap: 0.55rem; } .media-card-header { display: flex; align-items: center; gap: 0.6rem; min-width: 0; } .media-type-badge { flex: 0 0 auto; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 800; padding: 0.25rem 0.45rem; border-radius: 999px; border: 1px solid var(--admin-card-border); } .media-type-badge.image { color: #38bdf8; background: rgba(56, 189, 248, 0.08); } .media-type-badge.video { color: #f59e0b; background: rgba(245, 158, 11, 0.1); } .media-type-badge.text { color: var(--blue); background: rgba(0, 82, 255, 0.1); } .media-type-badge.spacer { color: #848792; background: rgba(132, 135, 146, 0.1); } .media-source-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 0.76rem; } .media-title-input, .media-src-input, .media-aspect-select, .media-layout-select, .media-width-input { width: 100%; } .media-caption-toggle { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; color: var(--text-secondary); font-size: 0.74rem; font-weight: 700; cursor: pointer; } .media-caption-toggle input { accent-color: var(--blue); } .media-size-row { display: grid; grid-template-columns: minmax(90px, 0.8fr) auto; gap: 0.6rem; align-items: end; } .media-size-row label { display: flex; flex-direction: column; gap: 0.32rem; min-width: 0; } .media-size-row span { color: var(--text-muted); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .media-textarea { width: 100%; min-height: 92px; resize: vertical; line-height: 1.5; } .media-text-editor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; } .media-spacer-editor-grid { display: grid; grid-template-columns: minmax(100px, 0.5fr) minmax(90px, 0.45fr) minmax(140px, 1fr); gap: 0.55rem; align-items: end; } .media-text-editor-grid label, .media-spacer-editor-grid label, .media-color-control { display: flex; flex-direction: column; gap: 0.32rem; min-width: 0; } .media-text-editor-grid span, .media-spacer-editor-grid span, .media-color-control span { color: var(--text-muted); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .media-text-editor-grid input, .media-text-editor-grid select, .media-spacer-editor-grid input, .media-color-control input { width: 100%; } .media-text-toolbar { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: flex-end; } .media-align-group { display: flex; gap: 0.35rem; } .media-align-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--admin-card-border); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .media-align-btn.active, .media-align-btn:hover, .media-auto-color-btn.active, .media-auto-color-btn:hover { color: var(--blue); border-color: var(--line-active); background: var(--blue-soft); } .media-align-btn i { width: 15px; height: 15px; } .media-auto-color-btn { height: 34px; border-radius: 9px; border: 1px solid var(--admin-card-border); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); padding: 0 0.75rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; transition: var(--transition-fast); } .media-color-control { width: 72px; } .media-color-control input { height: 34px; padding: 0; border-radius: 9px; overflow: hidden; } .media-color-swatches { display: flex; gap: 0.35rem; align-items: center; min-height: 34px; } .media-color-swatch { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--admin-card-border); background: var(--swatch-color); transition: var(--transition-fast); } .media-color-swatch.active, .media-color-swatch:hover { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.12); transform: translateY(-1px); } .admin-media-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; } .interactive-row { display: flex; gap: 0.6rem; align-items: center; } .interactive-row input { flex-grow: 1; } .remove-row-btn { background: rgba(239, 68, 68, 0.05); border: 1px solid rgba(239, 68, 68, 0.15); color: #ef4444; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .remove-row-btn:hover { background: #ef4444; color: #ffffff; } @media (max-width: 760px) { .about-video-setting-card { grid-template-columns: 42px minmax(0, 1fr); } .about-video-slot-preview { grid-column: 2; } .about-video-slot-fields { grid-column: 1 / -1; } .media-timeline-card { grid-template-columns: 44px minmax(0, 1fr) 38px; } .media-preview-frame { grid-column: 2 / 3; } .media-card-fields { grid-column: 1 / -1; } .media-spacer-editor-grid { grid-template-columns: 1fr; } } /* 4. PREMIUM TOAST FEEDBACK PANEL */ .admin-toast-container { position: fixed; bottom: 2.5rem; right: 2.5rem; z-index: 9999; pointer-events: none; opacity: 0; transform: translateY(20px); transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .admin-toast-container.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .admin-toast-body { background: rgba(12, 12, 14, 0.9); border: 1px solid var(--line-active); box-shadow: 0 15px 40px rgba(0, 82, 255, 0.25); backdrop-filter: blur(15px); border-radius: 16px; padding: 1rem 1.6rem; display: flex; align-items: center; gap: 0.8rem; } body.light-theme .admin-toast-body { background: rgba(255, 255, 255, 0.95); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); } .admin-toast-icon { color: #10b981; display: flex; align-items: center; } .admin-toast-message { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); letter-spacing: 0.2px; } /* Desktop grid overrides for editor forms */ @media (min-width: 768px) { .form-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; } .col-md-6 { grid-column: span 6; } .col-md-4 { grid-column: span 4; } } @media (max-width: 992px) { .admin-dashboard-container { grid-template-columns: 1fr; } .admin-sidebar { display: none; /* Hide sidebar on mobile / medium screens or fallback */ } .admin-main-panel { padding: 2rem; } .settings-sections-grid { grid-template-columns: 1fr; } .settings-card.full-row { grid-column: span 1; } .exporter-panel-layout { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== MEDIA LOADING STATES (GRID COVERS + PROJECT MODAL) ========================================================================== */ .portfolio-image-wrapper.is-media-loading::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient( 100deg, transparent 12%, var(--blue-soft) 34%, rgba(255, 255, 255, 0.045) 50%, var(--blue-soft) 66%, transparent 88% ), var(--black-card); background-size: 260% 100%, 100% 100%; animation: mediaSkeletonSweep 1.5s ease-in-out infinite; pointer-events: none; } .portfolio-image-wrapper.is-media-loading img { opacity: 0; } .portfolio-image-wrapper img { opacity: 1; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease; } .modal-media-item.is-media-loading { position: relative; min-height: clamp(160px, 34vh, 340px); overflow: hidden; border-radius: 12px; background: linear-gradient( 100deg, transparent 12%, var(--blue-soft) 34%, rgba(255, 255, 255, 0.05) 50%, var(--blue-soft) 66%, transparent 88% ), var(--black-card); background-size: 260% 100%, 100% 100%; } /* Only the pending items near the viewport shimmer; the rest stay static so a long case study does not animate dozens of skeletons at once. */ .modal-media-item.is-media-loading.is-media-visible { animation: mediaSkeletonSweep 1.5s ease-in-out infinite; } .modal-media-item.is-media-loading img { opacity: 0; } .modal-media-item img[data-modal-image] { opacity: 1; transition: opacity 0.45s ease; } body.light-theme .portfolio-image-wrapper.is-media-loading::after, body.light-theme .modal-media-item.is-media-loading { background: linear-gradient( 100deg, transparent 12%, rgba(0, 82, 255, 0.05) 34%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 82, 255, 0.05) 66%, transparent 88% ), var(--black-card-hover); background-size: 260% 100%, 100% 100%; } /* Opening indicator while the first screen of a case study resolves */ .portfolio-modal.is-opening .modal-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 20; background: linear-gradient(90deg, transparent, var(--blue), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: modalOpeningSweep 1.15s ease-in-out infinite; pointer-events: none; } @keyframes mediaSkeletonSweep { 0% { background-position: 180% 0, 0 0; } 100% { background-position: -80% 0, 0 0; } } @keyframes modalOpeningSweep { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } } @media (prefers-reduced-motion: reduce) { .portfolio-image-wrapper.is-media-loading::after, .modal-media-item.is-media-loading.is-media-visible, .portfolio-modal.is-opening .modal-wrapper::before { animation: none; } }