@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); } /* ========================================================================== 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: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: 250vh; z-index: 10; background: var(--blue-stage-bg); background-attachment: fixed; background-size: 100vw 100vh; background-position: center; } .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; } } /* Large display typography */ .intro-container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; max-width: 1200px; padding: 0 2rem; z-index: 10; position: relative; --hero-scroll-blend: 0; /* Animated by GSAP from 0 to 1 */ } .intro-word { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -2px; line-height: 0.85; display: block; z-index: 2; } .intro-word.w1 { font-size: clamp(4rem, 15vw, 13rem); line-height: 0.9; margin-bottom: clamp(0.45rem, 1vw, 1.2rem); color: color-mix(in srgb, #ffffff calc((1 - var(--hero-scroll-blend)) * 100%), var(--text-primary)); } .intro-word.w2 { font-size: clamp(3rem, 10vw, 9rem); line-height: 0.86; color: color-mix(in srgb, rgba(255, 255, 255, 0.72) calc((1 - var(--hero-scroll-blend)) * 100%), var(--text-secondary)); } .intro-word.w3 { font-size: clamp(5rem, 18vw, 15rem); color: color-mix(in srgb, #ffffff calc((1 - var(--hero-scroll-blend)) * 100%), var(--text-primary)); text-shadow: 0 0 50px rgba(255, 255, 255, calc((1 - var(--hero-scroll-blend)) * 0.35)); margin-top: 1rem; } .hero-bg-blue { position: absolute; inset: 0; background: var(--blue-stage-bg); background-attachment: fixed; background-size: 100vw 100vh; background-position: center; z-index: 1; pointer-events: none; mix-blend-mode: normal; } .intro-sub { margin-top: 3rem; font-family: var(--font-main); font-size: clamp(0.9rem, 1.5vw, 1.2rem); font-weight: 400; color: color-mix(in srgb, rgba(255, 255, 255, 0.8) calc((1 - var(--hero-scroll-blend, 0)) * 100%), var(--text-secondary)); max-width: 500px; letter-spacing: 0.5px; opacity: 1; } .hero-stats-sequence { position: absolute; inset: 0; z-index: 11; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(1.55rem, 3.2vw, 3rem); padding: clamp(2rem, 6vw, 6rem); pointer-events: none; opacity: 0; color: #ffffff; text-align: center; } .hero-stat-line { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.5rem, 1vw, 0.9rem); width: min(860px, 100%); opacity: 0; transform: translate3d(0, 54px, 0) scale(0.96); } .hero-stat-number { font-family: var(--font-display); font-size: clamp(4.4rem, 10vw, 10.2rem); font-weight: 900; line-height: 0.82; color: #ffffff; letter-spacing: 0; font-variant-numeric: tabular-nums; text-shadow: 0 18px 70px rgba(0, 18, 80, 0.24); } .hero-stat-label { font-family: var(--font-display); font-size: clamp(1.45rem, 3vw, 3.1rem); font-weight: 800; line-height: 0.9; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); text-align: center; } .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 { --about-scroll-height: 299vh; --about-scroll-height-mobile: 270vh; min-height: var(--about-scroll-height); margin-top: -100vh; position: relative; z-index: 20; background: var(--blue-stage-bg); background-attachment: fixed; background-size: 100vw 100vh; background-position: center; } .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; } .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; border-radius: 8px; 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: 255vh; } .about-section { min-height: var(--about-scroll-height-mobile); margin-top: -124vh; } .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-stats-sequence { align-items: center; text-align: center; gap: 1.75rem; } .hero-stat-line { align-items: center; gap: 0.45rem; } .hero-stat-number { font-size: clamp(4.2rem, 20vw, 6.6rem); } .hero-stat-label { font-size: clamp(1.18rem, 6.4vw, 2rem); text-align: center; } } /* ========================================================================== 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; } .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; } }