* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; } :root { --color: #667dff; --text-primary: #ffffff; --text-secondary: #a0a0a0; --bg-primary: #0a0a0a; --bg-secondary: #1a1a1a; --accent: #00aeac; --border-color: rgba(255, 255, 255, 0.1); --shadow: rgba(0, 0, 0, 0.3); --bg-primary-fade: rgba(10, 10, 10, 0); } [data-theme="light"] { --text-primary: #1a1a1a; --text-secondary: #666666; --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --border-color: rgba(0, 0, 0, 0.1); --shadow: rgba(0, 0, 0, 0.1); --bg-primary-fade: rgba(255, 255, 255, 0); } body { font-family: "Inter", sans-serif; background-color: var(--bg-primary); color: var(--text-primary); /* Two scrollbars came from here. Per spec, when one axis is `hidden` and the other is `visible`, the visible one computes to `auto` — so this line quietly turned into its own scroll container with its own vertical scrollbar, stacked next to the viewport's. `clip` clips exactly the same way but is defined NOT to create a scroll container. `hidden` first as a fallback for engines without `clip`. */ overflow-x: hidden; overflow-x: clip; line-height: 1.6; transition: background-color 0.3s ease, color 0.3s ease; } /* Loading screen */ .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; z-index: 999; flex-direction: column } .loader-text { font-size: 2rem; font-weight: 600; margin-bottom: 2rem; opacity: 0; } .loader-bar { width: 300px; height: 4px; background: var(--bg-secondary); border-radius: 2px; overflow: hidden; } .loader-progress { width: 0%; height: 100%; background: linear-gradient(90deg, var(--color), var(--accent)) } /* Custom Cursor */ .cursor { position: fixed; width: 20px; height: 20px; background: var(--accent); border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; transition: transform 0.1s ease; } .cursor-follower { position: fixed; width: 40px; height: 40px; border: 2px solid var(--accent); border-radius: 50%; pointer-events: none; z-index: 9998; transition: transform 0.2s ease; } /* Navigation */ nav { position: fixed; top: 0; /* 100vw includes the scrollbar gutter, making the bar wider than the page and forcing horizontal overflow. 100% measures the containing block. */ width: 100%; padding: 1.5rem 2rem; background-color: rgba(10, 10, 10, 0.5); backdrop-filter: blur(20px); z-index: 1000; transition: background-color 0.3s ease; transform: translateY(-100%); } [data-theme="light"] nav { background-color: rgba(255, 255, 255, 0.5); } .nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; } .logo { font-size: 1.5rem; font-weight: 700; color: var(--accent); font-family: 'Playfair Display', serif; } .nav-links { display: flex; list-style: none; gap: 2rem; transition: transform 0.3s ease; } .nav-links a { text-decoration: none; color: var(--text-primary); font-weight: 500; transition: color 0.3s ease; position: relative; } .nav-links a:hover { color: var(--accent); } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 0.3s ease; } .nav-links a:hover::after { width: 100%; } /* Theme Toggle */ .theme-toggle { position: relative; width: 60px; height: 30px; background-color: var(--bg-secondary); border-radius: 15px; cursor: pointer; transition: background-color 0.3s ease; border: 2px solid var(--border-color); margin-left: 1rem; } .theme-toggle::before { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background-color: var(--accent); border-radius: 50%; transition: transform 0.3s ease; box-sizing: 0 0 10px rgba(0, 255, 229, 0.7); } [data-theme="light"] .theme-toggle::before { transform: translate(28px); background: var(--color); box-shadow: 0 0 10px rgba(25, 117, 255, 0.7); } .theme-toggle-icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 0.8rem; transition: opacity 0.3s ease; } .theme-toggle-icon.sun { right: 6px; opacity: 0; } .theme-toggle-icon.moon { left: 5px; opacity: 1; } [data-theme="light"] .theme-toggle-icon.sun { opacity: 1; } [data-theme="light"] .theme-toggle-icon.moon { opacity: 0; } /* Mobile menu */ .menu-toggle { display: none; flex-direction: column; cursor: pointer; z-index: 1001; } .menu-toggle span { width: 25px; height: 3px; background: var(--text-primary); margin: 3px 0; transform-origin: center; } .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } .mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--bg-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 999; transform: translateX(-100%); transition: transform 0.3s ease; } .mobile-menu.active { transform: translateX(0%); } .mobile-menu a { color: var(--text-primary); text-decoration: none; font-size: 2rem; font-weight: 600; margin: 1rem 0; font-family: 'Playfair Display', serif; transform: translateY(20px); transition: all 0.3s ease; opacity: 0; } .mobile-menu.active a{ opacity: 1; transform: translateY(0); } .mobile-menu a:nth-child(1) { transition-delay: 0.1s; } .mobile-menu a:nth-child(2) { transition-delay: 0.2s; } .mobile-menu a:nth-child(3) { transition-delay: 0.3s; } .mobile-menu a:nth-child(4) { transition-delay: 0.4s; } .mobile-menu a:nth-child(5) { transition-delay: 0.5s; } /* Hero section */ .hero { height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero-img { height: 60%; margin-left: 5%; margin-right: 5%; position: relative; z-index: 2; } .hero-content { text-align: center; z-index: 2; max-width: 800px; padding: 0 2rem; } .hero-title { font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 700; line-height: 1.1; margin-bottom: 1rem; font-family: 'Playfair Display', serif; filter: blur(10px); transform: translateY(5rem); opacity: 0; } .hero-subtitle { font-size: clamp(1.2rem, 3vw, 2rem); color: var(--text-secondary); margin-bottom: 2rem; filter: blur(10px); transform: translateY(5rem); opacity: 0; } .hero-description { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 3rem; filter: blur(10px); transform: translateY(5rem); opacity: 0; } .cta-button { display: inline-block; padding: 1rem 2.5rem; background: linear-gradient(135deg, var(--color), var(--accent)); color: var(--text-primary); text-decoration: none; border-radius: 50px; font-weight: 600; transition: transform 0.3s ease; filter: blur(10px); transform: translateY(5rem); opacity: 0; } .cta-button:hover { transform: translateY(-3px); } /* Spline scene: oversized so the artwork bleeds past the hero instead of leaving black gutters. Bump --spline-zoom if black edges still show. */ .hero-3d-model { /* Spline's camera auto-fits the scene to its container, so resizing the element just re-fits the artwork and the scene's own framed panel stays visible. transform scales the RENDERED output instead, which actually crops that frame off the edges. Raise until the frame is gone. */ --spline-zoom: 1.35; position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: 1; pointer-events: none; transform: scale(var(--spline-zoom)); /* Anchor at the bottom: the artwork sits low in the scene, so scaling from the centre throws it off-screen. From the bottom edge it stays in view and only spreads outwards to fill the width. */ transform-origin: center bottom; } .hero-3d-model canvas { width: 100% !important; height: 100% !important; display: block; } @font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); font-display: swap; } @media (max-width: 1080px) { .hero-img { height: 38%; } } @media (max-width: 768px) { .nav-links { display: none; } .menu-toggle { display: flex; } .nav-container { padding: 0 1rem; } .cursor, .cursor-follower { display: none; } .hero { flex-direction: column; /* Was flex-start, which stacked everything against the top of the screen and left the leftover height as dead space at the bottom. */ justify-content: center; align-items: center; /* The nav is fixed and roughly 5.1rem tall (1.5rem padding top and bottom around a ~34px control row). The old 4.5rem was less than that, so the portrait tucked underneath it. */ padding-top: 6rem; padding-bottom: 2.5rem; gap: 0.75rem; height: 100svh; } .hero-img { height: 40%; width: auto; margin: 0; order: -1; flex-shrink: 0; } .hero-content { padding: 0 1.5rem; text-align: center; flex-shrink: 0; } .hero-title { font-size: clamp(2rem, 9vw, 3rem); } .hero-subtitle { font-size: clamp(0.85rem, 3.5vw, 1.2rem); margin-bottom: 0.8rem; } .hero-description { font-size: 0.9rem; margin-bottom: 1.5rem; } .cta-button { padding: 0.8rem 2rem; font-size: 0.95rem; } } @media (max-width: 480px) { .hero { padding-top: 5.5rem; padding-bottom: 2rem; gap: 0.5rem; } .hero-img { height: 36%; } .hero-title { font-size: 1.8rem; } .hero-description { font-size: 0.85rem; margin-bottom: 1.2rem; } } /* ====================================================== About section ====================================================== */ /* about hero */ .about-hero { min-height: 100vh; padding: 6rem 2rem; background-color: var(--bg-primary); color: var(--text-primary); display: flex; justify-content: center; align-items: flex-start; font-family: "Playfair Display", serif; /* Same trap as on : `hidden` on one axis makes the other `auto`, so this section grew its own vertical scrollbar mid-page. */ overflow-x: hidden; overflow-x: clip; } .about-hero-content { max-width: 900px; text-align: left; } .about-title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; margin-bottom: 1.5rem; filter: blur(10px); transform: translateY(5rem); opacity: 0; } .about-subtitle { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 600; margin-top: 3rem; margin-bottom: 1rem; filter: blur(10px); transform: translateY(5rem); opacity: 0; color: var(--accent); } .about-text { font-size: 1.1rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: 2rem; filter: blur(10px); transform: translateY(5rem); opacity: 0; } .about-list { list-style: none; padding-left: 1rem; color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 2rem; filter: blur(10px); transform: translateY(5rem); opacity: 0; } .about-list li { margin-bottom: 0.7rem; position: relative; padding-left: 1.5rem; } .about-list li::before { content: "•"; position: absolute; left: 0; color: var(--accent); font-weight: bold; } .numbers-container { display: flex; gap: 3rem; margin-bottom: 3rem; filter: blur(10px); transform: translateY(5rem); opacity: 0; flex-wrap: wrap; } .number-item { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 120px; } .number-icon { font-size: 3rem; margin-bottom: 0.3rem; } .number-value { font-size: 2.5rem; font-weight: 700; color: var(--accent); margin-bottom: 0.3rem; } .number-label { font-size: 1rem; color: var(--text-secondary); font-family: "Inter", sans-serif; } /* Premiere Pro timeline screenshot */ .timeline-figure { margin: 0 0 3rem; filter: blur(10px); transform: translateY(5rem); opacity: 0; } .timeline-figure img { width: 100%; display: block; border-radius: 14px; border: 1px solid var(--border-color); box-shadow: 0 18px 45px var(--shadow); } .timeline-figure figcaption { margin-top: 0.85rem; font-family: "Inter", sans-serif; font-size: 0.9rem; color: var(--text-secondary); text-align: center; } .cta-button { display: inline-block; padding: 1rem 2.5rem; background: linear-gradient(135deg, var(--color), var(--accent)); color: var(--text-primary); text-decoration: none; border-radius: 50px; font-weight: 600; transition: transform 0.3s ease; filter: blur(10px); transform: translateY(5rem); opacity: 0; } .cta-button:hover { transform: translateY(-3px); } /* Responsive */ @media (max-width: 768px) { .about-hero { padding: 3rem 1rem; } .numbers-container { justify-content: center; } } /* ====================================================== Work section ====================================================== */ /* ===== Work page layout ===== */ .gallery-section { max-width: 1400px; margin: 0 auto; padding: 8rem 2rem 5rem; display: flex; flex-direction: column; gap: 5rem; } .work-header { text-align: center; max-width: 720px; margin: 0 auto; } .work-title { font-family: 'Playfair Display', serif; font-size: clamp(2.2rem, 6vw, 3.5rem); line-height: 1.1; margin-bottom: 1rem; } .work-intro { color: var(--text-secondary); font-size: 1.05rem; } .gallery-group { display: flex; flex-direction: column; gap: 0.5rem; } .group-title { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; color: var(--accent); text-align: center; } .group-subtitle { text-align: center; color: var(--text-secondary); margin-bottom: 2rem; font-size: 0.95rem; } /* ===== Video grids ===== */ .video-grid { display: grid; gap: 1.75rem; } .video-grid.landscape { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .video-grid.portrait { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 1180px; margin: 0 auto; width: 100%; } .video-card { display: flex; flex-direction: column; gap: 0.75rem; } /* Click-to-load thumbnail — keeps the page from booting 10 YouTube players */ .video-thumb { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; background: var(--bg-secondary); cursor: pointer; box-shadow: 0 10px 30px var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; } .landscape .video-thumb { aspect-ratio: 16 / 9; } .portrait .video-thumb { aspect-ratio: 9 / 16; } .video-thumb:hover, .video-thumb:focus-visible { transform: translateY(-5px); box-shadow: 0 16px 40px var(--shadow); outline: none; border-color: var(--accent); } .video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .video-thumb:hover img { transform: scale(1.04); } .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--color), var(--accent)); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); transition: transform 0.3s ease; } .play-icon::after { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; } .video-thumb:hover .play-icon { transform: translate(-50%, -50%) scale(1.12); } .video-thumb iframe { width: 100%; height: 100%; border: none; display: block; } .video-meta { display: flex; flex-direction: column; gap: 0.2rem; padding: 0 0.15rem; } .video-name { font-size: 0.98rem; font-weight: 600; line-height: 1.35; } .video-channel { font-size: 0.85rem; color: var(--text-secondary); text-decoration: none; transition: color 0.3s ease; width: fit-content; } .video-channel:hover { color: var(--accent); } /* ===== Client channels ===== */ .client-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .client-card { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 2rem 1.25rem; text-decoration: none; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; text-align: center; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .client-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 14px 34px var(--shadow); } .client-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 0.75rem; border: 2px solid var(--border-color); } .client-name { font-weight: 600; font-size: 1rem; line-height: 1.3; } .client-handle { font-size: 0.85rem; color: var(--text-secondary); } /* Subscriber badge. The figure carries the weight; the word next to it is just a unit, so it stays quiet. */ .client-subs { margin-top: 0.6rem; display: inline-flex; align-items: baseline; gap: 0.3rem; font-size: 0.72rem; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 50px; padding: 0.3rem 0.8rem; } .client-subs strong { font-size: 0.95rem; font-weight: 700; color: var(--accent); } /* ===== Closing CTA ===== */ .cta-button { display: inline-block; padding: 1rem 2.5rem; background: linear-gradient(135deg, var(--color), var(--accent)); color: #fff; text-decoration: none; border-radius: 50px; font-weight: 600; transition: transform 0.3s ease; } .cta-button:hover { transform: translateY(-3px); } /* Entry state — GSAP clears these on scroll */ .group-title, .group-subtitle, .video-card, .client-card { opacity: 0; transform: translateY(30px); filter: blur(10px); } /* No JS / reduced motion: never leave the work hidden */ @media (prefers-reduced-motion: reduce) { .group-title, .group-subtitle, .video-card, .client-card { opacity: 1; transform: none; filter: none; } } /* For mobile devices and smaller screens */ @media (max-width: 768px) { /* Mobile menu */ .nav-links { display: none; } .menu-toggle { display: flex; } .mobile-menu.active { transform: translateX(0); } .cursor, .cursor-follower { display: none; } .gallery-section { padding: 6rem 1rem 3rem; gap: 3.5rem; } .video-grid { gap: 1.25rem; } .video-grid.landscape { grid-template-columns: 1fr; } .video-grid.portrait { grid-template-columns: repeat(2, 1fr); } .client-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .client-card { padding: 1.5rem 0.85rem; } .client-card img { width: 72px; height: 72px; } .play-icon { width: 52px; height: 52px; } } @media (max-width: 420px) { .video-grid.portrait, .client-grid { grid-template-columns: 1fr; } .client-card img { width: 88px; height: 88px; } } /* ====================================================== Contact section ====================================================== */ /* Contact Section */ .contact { height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .contact-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50% rgba(0, 102, 255, 0.1) 0%, transparent -50%); } .contact-content { text-align: center; z-index: 2; max-width: 800px; padding: 0 2rem; } .contact-title { font-size: clamp(3rem, 8vw, 0.8rem); font-weight: 700; line-height: 0.9; margin-bottom: 1rem; font-family: 'Playfair Display', serif; filter: blur(10px); transform: translateY(5rem); opacity: 0; } .contact-subtitle { font-size: clamp(1.2rem, 3vw, 2rem); color: var(--text-secondary); margin-bottom: 2rem; filter: blur(10px); transform: translateY(5rem); opacity: 0; } .contact-description { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 3rem; filter: blur(10px); transform: translateY(5rem); opacity: 0; } .contact-buttons { display: flex; justify-content: center; gap: 2rem; filter: blur(10px); transform: translateY(5rem); opacity: 0; } .cta-button { display: inline-block; padding: 1rem 2.5rem; background: linear-gradient(135deg, var(--color), var(--accent)); color: var(--text-primary); text-decoration: none; border-radius: 50px; font-weight: 600; transition: transform 0.3s ease; } .cta-button:hover { transform: translateY(-3px); } .contact-3d-model { position: absolute; width: 130%; z-index: -1; } /* The About and Contact stylesheets each carried their own copy of the hero + nav responsive rules. Harmless when those pages had no hero — but merged into one document they landed AFTER the real hero rules and overrode them (notably `.hero { flex-direction: column-reverse }`, which flipped the portrait below the text on mobile). Removed: style.css above already has the correct versions. */ /* ====================================================== One-page build: additions not needed by the multi-page version (anchor offsets, active nav state) ====================================================== */ /* The nav is fixed, so an anchor jump would tuck the section heading underneath it. scroll-margin pushes the landing point down past the bar. */ #home, #about, #work, #contact { scroll-margin-top: 5rem; } /* The logo is a link back to the top here, not a plain label */ .logo { text-decoration: none; } /* Current section indicator. The underline is the same one the hover state uses — this just pins it open for whichever section is on screen. */ .nav-links a.active { color: var(--accent); } .nav-links a.active::after { width: 100%; } /* Section rhythm. The gap a reader sees between two sections is the first one's bottom padding PLUS the next one's top padding. The page stylesheets were written for standalone documents, where a big top padding just cleared the fixed nav — stacked on one page those numbers added up (7rem + 8rem = 15rem, and the root font-size grows to 18-26px on large screens, so ~270px+ of dead space). Halved, and balanced so every seam is the same height. */ .about-hero { min-height: auto; padding-top: 4.5rem; padding-bottom: 3rem; } /* A trailing margin on the section's last block stacks on top of the section padding — zero it so the padding is the whole story. */ .about-hero-content > *:last-child { margin-bottom: 0; } /* "What I Do" and "Tools I Use" run as a pair of columns. Uneven weighting: the first list has five long lines, the second has two short ones, so a straight 50/50 split would wrap the left column hard while the right sat half empty. align-items: start keeps both headings on the same baseline instead of centring the shorter column. */ .about-columns { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0 3rem; align-items: start; } /* The first heading inside each column already has the section's top margin; a second one on the column itself would double it. */ .about-col > .about-subtitle { margin-top: 3rem; } @media (max-width: 860px) { .about-columns { grid-template-columns: 1fr; gap: 0; } } .gallery-section { padding-top: 3.5rem; padding-bottom: 3rem; } .contact { height: auto; min-height: auto; padding: 3.5rem 2rem 6rem; } @media (max-width: 768px) { #home, #about, #work, #contact { scroll-margin-top: 4rem; } .about-hero { padding-top: 3rem; padding-bottom: 2rem; } /* The base clamp bottoms out at 1.8rem, which is still ~29px on a 360px phone — wide enough that an arabic heading (consistently longer than its english counterpart) wraps instead of fitting. Let it scale further down on small screens so headings stay on one line. */ .about-subtitle { font-size: clamp(1.25rem, 6vw, 1.8rem); } .gallery-section { padding-top: 2.5rem; padding-bottom: 2rem; } .contact { padding: 2.5rem 1rem 4rem; } } /* The Spline wave is clipped dead flat by the hero's `overflow: hidden`, so the seam with the About section read as a hard cut line. This fades the bottom of the hero into the page background before it gets there, so the artwork dissolves instead of stopping. z-index 1 puts it over the scene (also 1 — a pseudo-element paints after its siblings at the same level) but under the copy and portrait at 2. */ .hero::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 32%; z-index: 1; pointer-events: none; background: linear-gradient( to bottom, var(--bg-primary-fade) 0%, var(--bg-primary) 92%, var(--bg-primary) 100% ); }