/* ===== PRELOADER — Glitch logo reveal on first visit ===== Full-screen overlay with RGB chromatic aberration animation. Skipped on return visits via .preloader-skip on . */ /* Skip preloader on return visits */ .preloader-skip #chaos-preloader { display: none; } /* Full-screen overlay */ #chaos-preloader { position: fixed; inset: 0; z-index: 9999; background: #0D0D0D; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Logo container */ .preloader-logo-wrap { position: relative; width: 240px; } .preloader-logo-main { width: 100%; height: auto; display: block; position: relative; z-index: 2; opacity: 0; } /* Red channel clone */ .preloader-logo-r { position: absolute; inset: 0; z-index: 1; opacity: 0; mix-blend-mode: screen; } .preloader-logo-r img { width: 100%; height: auto; filter: brightness(0) saturate(100%) invert(10%) sepia(100%) saturate(7000%) hue-rotate(345deg); } /* Cyan channel clone */ .preloader-logo-c { position: absolute; inset: 0; z-index: 1; opacity: 0; mix-blend-mode: screen; } .preloader-logo-c img { width: 100%; height: auto; filter: brightness(0) saturate(100%) invert(60%) sepia(100%) saturate(3000%) hue-rotate(155deg); } /* Scanlines overlay */ .preloader-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px); pointer-events: none; opacity: 0; z-index: 5; } /* Red slash line */ .preloader-slash { position: absolute; width: 0; height: 2px; background: #E2002B; left: 50%; top: calc(50% + 45px); transform: translateX(-50%); z-index: 3; } /* Red glow behind logo */ .preloader-glow { position: absolute; width: 350px; height: 350px; border-radius: 50%; background: radial-gradient(circle, rgba(226,0,43,0.25) 0%, transparent 65%); left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); z-index: 0; opacity: 0; } /* Wipe curtain */ .preloader-wipe { position: absolute; inset: 0; background: #0D0D0D; z-index: 10; transform: scaleY(0); transform-origin: bottom; } /* Mobile: smaller logo, tighter glow */ @media (max-width: 768px) { .preloader-logo-wrap { width: 160px; } .preloader-glow { width: 250px; height: 250px; } .preloader-slash { top: calc(50% + 30px); } } /* Reduced motion: no glitch, just fade */ @media (prefers-reduced-motion: reduce) { .preloader-logo-main { opacity: 1 !important; transform: none !important; } .preloader-logo-r, .preloader-logo-c, .preloader-scan { display: none; } } /* ============================================================ CHAOS AGENCY — Master Stylesheet Design system, layout, typography, and all section styles. This is the foundation CSS file loaded on every page. ============================================================ */ /* ------------------------------------------------------------ CSS RESET Strip browser defaults so we start from a clean slate. ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; /* Prevent iOS text size inflation */ } /* Prevent horizontal overflow from animations and off-screen elements */ html, body { overflow-x: hidden; } body { min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Smoother text on Mac/Chrome */ -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } /* ------------------------------------------------------------ CUSTOM PROPERTIES — DESIGN TOKENS Every colour, font, spacing, and size value lives here. Never hardcode hex values or pixel sizes in component CSS. Always reference these variables instead. ------------------------------------------------------------ */ :root { /* --- Backgrounds --- */ --color-bg: #0D0D0D; /* Primary background — near-black, NOT pure black */ --color-bg-alt: #111111; /* Alternate sections (services, lead magnet) */ --color-bg-card: #161616; /* Cards, elevated surfaces (clients section) */ --color-bg-warm: #0F0D0C; /* Warmest dark — used sparingly for depth */ /* --- Brand Red --- */ --color-red: #E2002B; /* PRIMARY BRAND RED — accents, CTAs, highlights */ --color-red-dark: #8B0019; /* Dark red — work tile overlays, subtle red tones */ --color-red-hover: #C4001F; /* Red hover states — slightly darker than primary */ /* --- Text --- */ --color-white: #FFFFFF; /* Primary headlines, logo */ --color-text: #F0F0F0; /* Body text — slightly soft white, easy on eyes */ --color-text-muted: #B0B0B0; /* Secondary text, captions, taglines — WCAG AA compliant (~4.5:1 on #0D0D0D) */ --color-text-subtle: #555555; /* Very subtle text — barely visible labels */ /* --- UI Elements --- */ --color-border: rgba(255, 255, 255, 0.08); /* Subtle borders between sections */ --color-border-red: rgba(226, 0, 43, 0.3); /* Red-tinted borders (nav on scroll) */ /* --- Typography Scale --- */ /* Uses clamp() for fluid responsive sizing: min, preferred, max */ --type-display: clamp(56px, 10vw, 140px); /* Hero rotating word — biggest text on site */ --type-h1: clamp(48px, 7vw, 96px); /* Page titles, hero static lines */ --type-h2: clamp(32px, 5vw, 64px); /* Section headlines */ --type-h3: clamp(24px, 3vw, 36px); /* Card titles, service names */ --type-body-lg: clamp(18px, 2vw, 22px); /* Large body text, sublines */ --type-body: 16px; /* Standard body copy */ --type-small: 13px; /* Labels, captions, fine print */ /* --- Spacing --- */ --space-section: 120px; /* Standard section padding top/bottom (desktop) */ --space-section-sm: 80px; /* Section padding on mobile */ --space-container: 48px; /* Container side padding (desktop) */ --space-container-sm: 24px; /* Container side padding (mobile) */ /* --- Font Families --- */ /* Nunito: rounded sans-serif — main font for headings and body */ /* DM Serif Display: elegant serif — accent font for highlighted phrases */ --font-heading: 'Nunito', sans-serif; --font-body: 'Nunito', sans-serif; --font-accent: 'DM Serif Display', serif; /* --- Border Radius --- */ --radius: 6px; /* Soft rounding on buttons, cards, inputs */ --radius-lg: 10px; /* Slightly larger for bigger containers */ } /* ------------------------------------------------------------ BASE TYPOGRAPHY Default body styles applied globally. Clash Display is for headlines only — Inter is the workhorse. ------------------------------------------------------------ */ body { font-family: var(--font-body); font-size: var(--type-body); font-weight: 400; color: var(--color-text); background-color: var(--color-bg); } /* Headings default to Clash Display */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; color: var(--color-white); line-height: 1.1; } h1 { font-size: var(--type-h1); } h2 { font-size: var(--type-h2); } h3 { font-size: var(--type-h3); } p { line-height: 1.7; color: var(--color-text); } /* ------------------------------------------------------------ LAYOUT — CONTAINERS & SECTIONS Standard containers keep content centred with consistent side padding. Sections use generous vertical spacing. ------------------------------------------------------------ */ /* Main content wrapper — keeps content away from screen edges */ .container { width: 100%; max-width: 1400px; margin: 0 auto; padding-left: var(--space-container); padding-right: var(--space-container); } /* Standard section spacing — 120px top/bottom on desktop */ .section { padding-top: var(--space-section); padding-bottom: var(--space-section); position: relative; /* Needed for section transition pseudo-elements */ } /* The
element wraps all page content between nav and footer */ main { overflow-x: hidden; /* Prevent horizontal scroll from animations */ } /* ------------------------------------------------------------ UTILITY CLASSES Reusable styles for common patterns across all pages. ------------------------------------------------------------ */ /* --- Section Label --- Small red uppercase text that appears above every section headline. Example: "SELECTED WORKS", "WHY CHAOS", "WHAT WE DO" */ .section-label { font-family: var(--font-body); font-size: var(--type-small); font-weight: 600; color: var(--color-red); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 24px; display: block; } /* --- Section Headline --- Large Clash Display headline used in every major section. Uses fluid type scale for responsive sizing. */ .section-headline { font-family: var(--font-heading); font-size: clamp(24px, 4vw, 48px); font-weight: 600; color: var(--color-white); line-height: 1.2; margin-bottom: 32px; } /* Scriptive accent within section headlines — Gambetta italic in red. Slightly larger than the surrounding sans-serif to create contrast. Mirrors the hero rotating-word treatment for visual consistency. */ .headline-accent { font-family: var(--font-accent); font-style: normal; font-weight: 400; color: var(--color-red); font-size: 1.15em; } /* .section-body removed — unused in HTML */ /* ------------------------------------------------------------ BUTTONS Two button styles: primary (red filled) and secondary (white outline). Primary has a sliding fill hover effect — dark background slides in from right, revealing red text on dark. ------------------------------------------------------------ */ /* --- Primary Button (Red Filled) --- Used for main CTAs: "Let's Build Your Brand", "Send It", etc. Hover: dark background slides in from right, text turns red. */ .btn-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 16px 40px; font-family: var(--font-heading); font-size: var(--type-body); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-white); background: var(--color-red); border: 2px solid var(--color-red); border-radius: var(--radius); overflow: hidden; /* Clip the sliding ::before element */ transition: color 0.35s ease; cursor: pointer; text-decoration: none; } /* The sliding dark fill that moves in on hover */ .btn-primary::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--color-bg); transform: translateX(101%); /* Hidden off-screen to the right */ transition: transform 0.35s ease; } /* On hover: dark fill slides in, text turns red */ .btn-primary:hover { color: var(--color-red); } .btn-primary:hover::before { transform: translateX(0); /* Slides into view */ } /* Keep button text above the sliding fill */ .btn-primary span { position: relative; z-index: 1; } /* --- Secondary Button (White Outline) --- Used for secondary CTAs: "See Our Work", etc. Hover: fills white, text turns dark. */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 16px 40px; font-family: var(--font-heading); font-size: var(--type-body); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-white); background: transparent; border: 2px solid var(--color-white); border-radius: var(--radius); transition: all 0.35s ease; text-decoration: none; cursor: pointer; } .btn-secondary:hover { background: var(--color-white); color: var(--color-bg); } /* ------------------------------------------------------------ SECTION BACKGROUND VARIANTS Each section can use a different background shade to create visual depth as the user scrolls through the page. ------------------------------------------------------------ */ .bg-primary { background-color: var(--color-bg); } /* #0D0D0D */ .bg-alt { background-color: var(--color-bg-alt); } /* #111111 */ .bg-card { background-color: var(--color-bg-card); } /* #161616 */ /* .bg-warm removed — unused in HTML */ .bg-red { background-color: var(--color-red); } /* #E2002B */ /* ============================================================ HERO SECTION Full viewport height. 3D floating work cards in space with particle field background and mouse-tracking glow. Centred headline with rotating word. Scroll indicator at bottom. ============================================================ */ /* --- Hero container --- Full viewport height, centred content, hidden overflow. perspective: 1000px enables 3D depth for floating cards. */ .hero-section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-bg); perspective: 1000px; } /* --- Particle canvas --- Full-screen canvas behind everything. Drawn by hero.js — 80 particles with mouse repulsion and connection lines. */ .hero-particle-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* --- Mouse-tracking gradient glow --- Subtle dark red radial gradient that follows the cursor. Position updated by hero.js each frame. */ .hero-bg-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.5s ease; } /* Subtle dark vignette behind headline area for text legibility. Very faint — just deepens the darkness in the centre so headline and CTAs always have contrast against floating cards. */ .hero-text-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient( ellipse 55% 40% at 50% 50%, rgba(13, 13, 13, 0.7) 0%, rgba(13, 13, 13, 0.35) 40%, transparent 70% ); } .hero-bg-glow.active { opacity: 1; } /* --- 3D floating cards container --- preserve-3d enables real z-depth for cards at different translateZ values. Cards are created by hero.js. */ /* Cards space — preserve-3d on desktop for real z-depth. Sits BEHIND hero-content so headline is always readable. */ .hero-cards-space { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; z-index: 40; } /* --- Individual floating card --- Absolutely positioned at % coordinates set by hero.js. Rounded corners, shadow for depth, clickable. */ .hero-float-card { position: absolute; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 15px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05); cursor: pointer; pointer-events: auto; will-change: transform; backface-visibility: hidden; transition: box-shadow 0.5s ease, opacity 0.5s ease, filter 0.5s ease; } /* When ANY card is hovered — dim all cards */ .hero-cards-space.has-hover .hero-float-card { opacity: 0.35 !important; filter: brightness(0.6); } /* The hovered card — bright, glowing, lifted above others within card layer */ .hero-cards-space.has-hover .hero-float-card.card-active { opacity: 1 !important; filter: brightness(1.05); box-shadow: 0 25px 80px rgba(226,0,43,0.35), 0 0 0 1px rgba(226,0,43,0.3), 0 0 40px rgba(226,0,43,0.15); z-index: 10 !important; } /* Card images — cover the card, slight overscale to crop edges */ .hero-float-card img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.05); } /* Subtle red tint overlay on hover */ .hero-float-card::after { content: ''; position: absolute; inset: 0; background: rgba(226,0,43,0); transition: background 0.3s ease; pointer-events: none; } .hero-float-card.card-active::after { background: rgba(226,0,43,0.06); } /* Dragging state — lifted card with grab cursor */ .hero-float-card.card-dragging { cursor: grabbing; will-change: transform; z-index: 20 !important; filter: brightness(1.1); } /* Expanded card — brought to front with red glow halo behind it. Override backface-visibility and will-change to force re-rasterization at the expanded size for crisp text and images. */ .hero-float-card.card-expanded { z-index: 200 !important; overflow: visible; border-radius: var(--radius-lg); backface-visibility: visible; will-change: auto; box-shadow: 0 0 40px rgba(226, 0, 43, 0.4), 0 0 80px rgba(226, 0, 43, 0.25), 0 0 120px rgba(226, 0, 43, 0.15), 0 20px 60px rgba(0, 0, 0, 0.6); } /* Info panel — slides in below the card image */ .hero-float-card .card-info { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg-card); padding: 18px 20px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); opacity: 0; transform: translateY(-8px); transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s; pointer-events: auto; /* Crisp text rendering — prevent parent 3D transforms from blurring text */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hero-float-card.card-expanded .card-info { opacity: 1; transform: translateY(0); } .card-info .card-info-brand { color: var(--color-white); font-family: var(--font-heading); font-weight: 700; font-size: 18px; margin-bottom: 4px; } .card-info .card-info-category { color: var(--color-red); font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; } .card-info .card-info-tagline { color: var(--color-text-muted); font-family: var(--font-body); font-size: 15px; line-height: 1.5; margin-bottom: 12px; } .card-info .card-info-link { color: var(--color-red); font-family: var(--font-body); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; display: inline-block; transition: transform 0.3s ease, text-shadow 0.3s ease, color 0.3s ease; } .card-info .card-info-link:hover { color: var(--color-red); transform: scale(1.06); text-shadow: 0 0 12px rgba(226, 0, 43, 0.5), 0 0 24px rgba(226, 0, 43, 0.25); } /* Dark overlay behind expanded card — dims entire hero background. z-index 45 puts it ABOVE the cards-space (40) normally, but when a card is expanded the cards-space jumps to z-index 150 to pop the expanded card above the overlay. */ .hero-expand-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); z-index: 45; pointer-events: none; transition: background 0.4s ease; } .hero-expand-overlay.active { background: rgba(0, 0, 0, 0.7); pointer-events: auto; z-index: 1200; } /* When a card is expanded, lift the entire cards-space above the overlay and above the flying CTAs (z-index 1100) so the expanded card is on top */ .hero-cards-space.has-expanded { z-index: 1300 !important; } /* Other cards dimmed when a card is expanded */ .hero-cards-space.has-expanded .hero-float-card { opacity: 0.05 !important; filter: brightness(0.2); transition: opacity 0.3s ease, filter 0.3s ease; } /* The expanded card — bright, vivid, with red glow halo */ .hero-cards-space.has-expanded .hero-float-card.card-expanded { opacity: 1 !important; filter: brightness(1.1); } /* --- Hero content wrapper --- Centred text block containing headline and rotating word. z-index 50 puts it ABOVE the floating cards (z:40). Headline always stays in front — cards never overlap it. Full width with 48px side padding — aligns headline edges with the nav logo (left) and MENU button (right). */ .hero-content { position: relative; z-index: 50; text-align: center; width: 100%; padding: 0 var(--space-container); box-sizing: border-box; pointer-events: none; } /* --- Hero headline (h1) --- Single inline sentence: "Great communication [word] people" Clash Display 400wt, sentence case. The rotating word is Gambetta italic 600wt in red, slightly larger. transform-style: preserve-3d enables the mouse tilt effect that hero.js applies via GSAP rotateX/rotateY. */ .hero-headline { font-family: var(--font-heading); font-weight: 600; font-size: clamp(28px, 4.2vw, 64px); text-align: center; transform-style: preserve-3d; margin-bottom: 24px; line-height: 1.3; letter-spacing: 0.04em; word-spacing: -0.08em; color: var(--color-white); white-space: nowrap; /* Strong text shadow for readability over floating 3D cards */ text-shadow: 0 0 60px rgba(13,13,13,1), 0 0 120px rgba(13,13,13,1), 0 0 200px rgba(13,13,13,0.9), 0 2px 4px rgba(13,13,13,1); } /* --- Flying CTA buttons wrapper --- Position:fixed container for the two CTA buttons that fly between hero (centred, large) and nav (right-aligned, compact). Animated by flying-ctas.js. z-index 1100 keeps buttons above nav. */ .flying-ctas { position: fixed; z-index: 1100; display: flex; gap: 16px; pointer-events: auto; opacity: 0; /* Hidden until JS positions them — prevents FOUC on load */ } /* Individual flying button — nowrap prevents text breaking during animation */ .flying-cta { white-space: nowrap; will-change: font-size, padding; } /* In nav state: disable the dark swipe hover fill on primary button */ .flying-cta-nav.btn-primary::before { display: none; } /* Nav-state hover: text glow + subtle scale-up, smooth ease */ .flying-cta-nav { transition: text-shadow 0.35s ease, transform 0.35s ease, color 0.35s ease !important; } .flying-cta-nav.btn-primary:hover { color: #E2002B; text-shadow: 0 0 14px rgba(226, 0, 43, 0.6), 0 0 28px rgba(226, 0, 43, 0.25); transform: scale(1.08); } .flying-cta-nav.btn-secondary:hover { background: transparent !important; color: #FFFFFF !important; text-shadow: 0 0 14px rgba(255, 255, 255, 0.5), 0 0 28px rgba(255, 255, 255, 0.2); transform: scale(1.08); } /* Placeholder in hero content — reserves the vertical space where buttons would sit so the headline stays vertically centred. */ .hero-ctas-placeholder { height: 56px; /* Approximate height of btn-primary */ pointer-events: none; } /* Mobile-only static hero buttons — shown only on small screens where the flying animation is disabled. */ .hero-ctas-mobile { position: relative; z-index: 70; display: none; /* Hidden on desktop — flying-ctas handles it */ gap: 16px; justify-content: center; flex-wrap: wrap; pointer-events: auto; } /* On mobile: show static buttons, hide flying wrapper */ @media (max-width: 768px) { .flying-ctas { display: none !important; } .hero-ctas-mobile { display: flex; flex-direction: column; align-items: center; gap: 12px; } .hero-ctas-mobile .btn-primary, .hero-ctas-mobile .btn-secondary { width: 280px; max-width: 80vw; text-align: center; box-sizing: border-box; } .hero-ctas-placeholder { display: none; } } /* --- Rotating word wrapper --- Inline container for the rotating word — sits within the sentence. perspective: 500px enables the 3D flip effect on individual letters during the split-flap animation. */ .rotating-word-wrapper { display: inline; perspective: 500px; } /* --- Rotating word itself --- Gambetta italic 600wt — scriptive serif that contrasts with the clean sans-serif static text. Slightly larger than the sentence. Starts in RED (#E2002B) — during the split-flap animation each letter flips red then settles white. hero.js handles the cycling. */ .hero-rotating-word { font-family: var(--font-accent); font-size: clamp(36px, 5.4vw, 84px); font-weight: 400; font-style: normal; color: var(--color-red); display: inline-flex; letter-spacing: 0.01em; transform-style: preserve-3d; line-height: 1; text-shadow: 0 0 60px rgba(13,13,13,1), 0 0 120px rgba(13,13,13,1), 0 0 200px rgba(13,13,13,0.9); } /* --- Individual letters inside the rotating word --- Each letter is a separate span for the split-flap effect. hero.js creates these spans dynamically and animates them with staggered rotateX flips. */ .hero-rotating-word .letter { display: inline-block; transform-origin: center center; will-change: transform, color; backface-visibility: hidden; } /* --- Hero mobile responsive --- Adjustments for smaller screens: fewer/smaller 3D cards (handled in JS), reduced perspective, text wrapping, tighter padding. */ @media (max-width: 768px) { .hero-section { height: 100svh; /* Use small viewport height on mobile (avoids URL bar issues) */ perspective: none; /* No 3D on mobile — keeps click targets aligned */ } /* No preserve-3d on mobile — 2D transforms only */ .hero-cards-space { transform-style: flat; } /* Hero content full width on mobile with tighter padding */ .hero-content { width: 100%; padding: 0 var(--space-container-sm); } /* Allow headline to wrap on mobile — single line won't fit */ .hero-headline { white-space: normal; font-size: clamp(24px, 7vw, 36px); text-shadow: 0 0 40px rgba(13,13,13,1), 0 0 80px rgba(13,13,13,1), 0 0 120px rgba(13,13,13,0.95), 0 2px 4px rgba(13,13,13,1); } /* Rotating word scales down on mobile */ .hero-rotating-word { font-size: clamp(30px, 8.5vw, 46px); } /* Cards are smaller on mobile — reduce shadow and border */ .hero-float-card { box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); } /* Hide the mouse-tracking glow on mobile (no mouse) */ .hero-bg-glow { display: none; } } /* Extra small screens (under 400px) */ @media (max-width: 400px) { .hero-headline { font-size: clamp(20px, 6.5vw, 28px); } .hero-rotating-word { font-size: clamp(26px, 8vw, 36px); } } /* --- Interaction hints --- Glassmorphism pill hints for hero (drag/click), orbital (scroll), and work view (scroll to explore). Shared base, per-hint overrides. */ .interaction-hint { position: absolute; z-index: 100; display: inline-flex; align-items: center; gap: 10px; background: rgba(13,13,13,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(226,0,43,0.12); border-radius: 24px; padding: 10px 22px; opacity: 0; pointer-events: none; transition: none; } /* Bottom-centre positioning (work view) */ .interaction-hint--bottom { bottom: 24px; left: 50%; transform: translateX(-50%); } /* Top-half positioning (hero) — sits in the upper portion of the hero */ .interaction-hint--below-buttons { position: absolute; top: 28vh; bottom: auto; left: 50%; transform: translateX(-50%); } /* Centre-viewport positioning (orbital) */ .interaction-hint--centre { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Divider between hint sections */ .interaction-hint__divider { width: 1px; height: 14px; background: rgba(255,255,255,0.08); } /* Hint label text */ .interaction-hint__label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--color-text-muted); } /* Gentle pulse for hero + work hints */ @keyframes hintPulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } /* Smooth pulse for orbital hint */ @keyframes hintSmoothPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Desktop/mobile icon + label toggle */ .interaction-hint__icon--mobile, .interaction-hint__label--mobile { display: none; } @media (max-width: 768px) { .interaction-hint__icon--desktop, .interaction-hint__label--desktop { display: none; } .interaction-hint__icon--mobile, .interaction-hint__label--mobile { display: inline; } /* Slightly smaller pill on mobile */ .interaction-hint { padding: 9px 18px; gap: 8px; } .interaction-hint__label { font-size: 9px; } } /* ------------------------------------------------------------ CTA STRIP — Centred buttons between Selected Works and Services. Compact section with just two buttons — no headline, no copy. Appears after the visitor has seen the work. ------------------------------------------------------------ */ .cta-strip { padding: 60px 0; } .cta-strip-inner { display: flex; justify-content: center; align-items: center; gap: 20px; } /* Stack buttons on mobile */ @media (max-width: 768px) { .cta-strip { padding: 48px 0; } .cta-strip-inner { flex-direction: column; gap: 12px; } .cta-strip-inner .btn-primary, .cta-strip-inner .btn-secondary { width: 280px; max-width: 80vw; text-align: center; box-sizing: border-box; } } /* ------------------------------------------------------------ SECTION TRANSITIONS — DIAGONAL & CURVED DIVIDERS These create the bold visual breaks between sections. Diagonal cuts for energetic sections, curves for warm ones. Applied via classes on the section element. ------------------------------------------------------------ */ /* --- Diagonal cut (bold/energetic sections) --- Creates a 4-degree angled cut at the bottom of a section. The --next-bg custom property sets the colour of the triangle. */ .diagonal-bottom { position: relative; } .diagonal-bottom::after { content: ''; position: absolute; bottom: -2px; /* Overlap slightly to prevent gap lines */ left: 0; width: 100%; height: 80px; background: var(--next-bg, var(--color-bg)); clip-path: polygon(0 100%, 100% 0, 100% 100%); z-index: 1; /* Above section background, below content (z:3) */ } /* --- Curved wave (warm/human sections) --- Uses an SVG wave inserted in HTML before the section's closing tag. This CSS positions the wave container correctly. */ .section-wave { position: absolute; bottom: -2px; left: 0; width: 100%; overflow: hidden; line-height: 0; z-index: 1; /* Above section background, below content (z:3) */ background: transparent; /* No background — only the SVG path has colour */ pointer-events: none; /* Don't block clicks on content underneath */ } .section-wave svg { display: block; width: 100%; height: 80px; background: transparent; /* Transparent canvas — path fill is the only colour */ } /* ============================================================ SELECTED WORKS SECTION Three square work tiles in a horizontal row. Each tile has a random subtle tilt (1–2°) applied via JS. On hover: tile straightens, scales up, dark red overlay slides up from the bottom revealing brand, service, descriptor. Diagonal transition into Services section below. Reference: chaos-animations.md section 6 ============================================================ */ /* ============================================================ ORBITAL TEXT REVEAL SECTION Words orbit in chaos then lock into reading position as user scrolls. Central glowing orb as gravitational centre. Asymmetric line stagger. Accent words in red DM Serif Display regular (larger size). ============================================================ */ /* Section container — full viewport, pinned by ScrollTrigger */ .orbital-reveal-section { position: relative; height: 100vh; background: var(--color-bg); overflow: hidden; } /* Canvas for orb particles and background geometric lines */ .orbital-reveal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Text container — centred, holds the final reading layout */ .orbital-reveal-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 85%; pointer-events: none; } /* Individual lines — centre-aligned, bold editorial sizing */ .orbital-line { font-family: var(--font-heading); font-weight: 600; font-size: clamp(22px, 3.5vw, 44px); line-height: 1.5; color: var(--color-white); margin-bottom: 20px; position: relative; text-align: center; } .orbital-line:last-child { margin-bottom: 0; } /* Stagger classes neutralised — centre alignment on all lines */ .orbital-line-left, .orbital-line-right { text-align: center; padding-left: 0; padding-right: 0; } /* Individual word spans — positioned by JS during orbit, then transition to their natural inline flow position when locked */ .orbital-word { display: inline-block; position: relative; opacity: 0.12; filter: blur(6px); transform: scale(0.7); transition: none; } /* Locked state — word has settled into reading position */ .orbital-word.word-locked { opacity: 1; filter: blur(0); transform: scale(1) translate(0, 0) !important; transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease; } /* Accent words — red DM Serif Display, normal weight (not bold), larger */ .reveal-accent { font-family: var(--font-accent); font-style: normal; font-weight: 400; color: var(--color-red); font-size: 1.25em; } /* Mobile adjustments */ @media (max-width: 768px) { .orbital-reveal-text { width: 92%; } .orbital-line { font-size: clamp(20px, 5vw, 36px); line-height: 1.5; margin-bottom: 16px; } } /* --- Selected Works headline --- Italic quote styling for the section headline */ .selected-works-headline { font-style: italic; max-width: 720px; /* Prevent headline from stretching too wide */ margin-bottom: 56px; /* Extra space before the work grid */ } /* --- Work grid container (work page) --- 3 equal columns with 24px gap. Tiles sit inside with generous horizontal padding (48px from container). */ .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } /* --- Asymmetric work grid (homepage) --- Two columns: left is a tall portrait tile spanning 2 rows, right has two landscape tiles stacked with a gap. Fixed height so all edges align flush — no aspect ratios. The two right tiles each fill exactly half the height minus gap. */ .work-grid-asymmetric { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; height: clamp(420px, 48vw, 680px); } /* Override the base .work-tile aspect-ratio: 1 for the asymmetric grid. These tiles must stretch to fill their grid cells, not force a square. */ .work-grid-asymmetric .work-tile { aspect-ratio: auto; height: 100%; } /* Hero tile — spans both rows, fills full grid height */ .work-tile-hero { grid-row: 1 / 3; } /* Small tiles — stretch to fill their row */ .work-tile-small { /* height driven by grid row */ } /* Flipped orientation — hero moves to the right column. JS adds this class randomly on page load. */ .work-grid-asymmetric.grid-flipped { grid-template-columns: 1fr 1.2fr; } .work-grid-asymmetric.grid-flipped .work-tile-hero { grid-column: 2; grid-row: 1 / 3; } .work-grid-asymmetric.grid-flipped .work-tile-small:first-of-type { grid-column: 1; grid-row: 1; } .work-grid-asymmetric.grid-flipped .work-tile-small:last-of-type { grid-column: 1; grid-row: 2; } /* --- Individual work tile --- Square aspect ratio. Overflow hidden clips the image and contains the overlay. Random tilt applied by main.js. will-change hints the browser to GPU-accelerate transforms. */ .work-tile { position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer; will-change: transform; border-radius: var(--radius-lg); background: var(--color-bg); /* Dark fallback — hides any image edge gaps */ } /* Work tile image — fills the tile with a slight scale-up (1.05) to crop the white borders baked into the source images. Scale enlarges from center; parent overflow: hidden + border-radius clips cleanly on all sides with consistent rounded corners. */ .work-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.05); transition: transform 0.4s ease; } /* --- Tile overlay --- Dark red overlay that sits on top of the image. Hidden by default (opacity 0). On hover, GSAP fades it in and the tile-info text slides up from below. Positioned at the bottom (justify-content: flex-end). */ .tile-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(139, 0, 25, 0.95) 0%, /* Strong dark red at bottom */ rgba(139, 0, 25, 0.7) 50%, /* Fades slightly in the middle */ rgba(139, 0, 25, 0.4) 100% /* Subtle at the top — image shows through */ ); opacity: 0; /* Hidden — GSAP reveals on hover */ display: flex; flex-direction: column; justify-content: flex-end; /* Text sits at the bottom */ padding: 32px; transition: opacity 0.3s ease; /* CSS fallback if JS fails */ } /* --- Tile info wrapper --- Contains brand name, service label, and descriptor. Slides up from below on hover via GSAP. */ .tile-info { transform: translateY(20px); /* Starting offset — GSAP animates to 0 */ opacity: 0; /* Hidden — GSAP reveals on hover */ transition: transform 0.3s ease, opacity 0.3s ease; /* CSS fallback */ } /* Brand name — large white Clash Display */ .tile-brand { font-family: var(--font-heading); font-size: clamp(22px, 2.5vw, 28px); font-weight: 600; color: var(--color-white); display: block; line-height: 1.2; } /* Service label — small red uppercase Inter */ .tile-service { font-family: var(--font-body); font-size: var(--type-small); /* 13px */ color: var(--color-red); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-top: 6px; } /* One-line descriptor — slightly transparent white, italic */ .tile-description { font-family: var(--font-body); font-size: 15px; color: rgba(255, 255, 255, 0.8); margin-top: 10px; font-style: italic; line-height: 1.5; } /* --- "View All Work" link --- White text with underline, centred below the grid. Arrow shifts right on hover for a subtle motion cue. */ .selected-works-cta { text-align: center; margin-top: 56px; } .view-all-link { font-family: var(--font-heading); font-size: var(--type-body-lg); /* clamp(18px, 2vw, 22px) */ font-weight: 600; color: var(--color-white); text-decoration: none; position: relative; padding-bottom: 4px; letter-spacing: 0.02em; transition: color 0.3s ease; } /* White underline that grows on hover */ .view-all-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--color-white); transform: scaleX(0.3); transform-origin: left center; transition: transform 0.4s ease; } .view-all-link:hover::after { transform: scaleX(1); } .view-all-link:hover { color: var(--color-red); } /* Arrow shifts right on hover */ .view-all-link .arrow { display: inline-block; transition: transform 0.3s ease; } .view-all-link:hover .arrow { transform: translateX(6px); } /* --- Selected Works responsive --- Asymmetric grid stacks on mobile: hero full-width on top, two small tiles side by side below. Work page grid: 2 columns on tablet. */ @media (max-width: 768px) { .work-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } /* Asymmetric grid — stack vertically on mobile. Hero tile full-width on top, two smalls side by side below. Auto height replaces the fixed desktop height. */ .work-grid-asymmetric, .work-grid-asymmetric.grid-flipped { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 12px; height: auto; } /* Hero tile spans full width on top row */ .work-grid-asymmetric .work-tile-hero, .work-grid-asymmetric.grid-flipped .work-tile-hero { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 3; } /* Small tiles sit side by side on the second row */ .work-grid-asymmetric .work-tile-small, .work-grid-asymmetric.grid-flipped .work-tile-small:first-of-type, .work-grid-asymmetric.grid-flipped .work-tile-small:last-of-type { grid-column: auto; grid-row: auto; aspect-ratio: 1; } .selected-works-headline { margin-bottom: 40px; } .selected-works-cta { margin-top: 40px; } /* Mobile: overlay hidden by default, shown on tap via .tile-active class. Replaces always-visible overlay — first tap reveals, second dismisses. */ .work-tile .tile-overlay { opacity: 0; transition: opacity 0.3s ease; } .work-tile .tile-info { opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; } .work-tile.tile-active .tile-overlay { opacity: 1; } .work-tile.tile-active .tile-info { opacity: 1; transform: translateY(0); } /* Remove tilt on mobile — performance */ .work-tile { transform: none !important; } } @media (max-width: 480px) { .work-grid { grid-template-columns: 1fr; gap: 24px; } } /* ============================================================ WORK PAGE — BENTO PORTFOLIO Scroll-hijack bento grid. Each project is one viewport section. 15 projects + CTA. Staggered cell transitions between projects. ============================================================ */ /* --- Bento section — full viewport, transparent bg --- */ .work-bento-section { display: flex; align-items: stretch; justify-content: stretch; padding: 80px 80px 40px 80px; background: transparent; box-sizing: border-box; } /* --- Bento grid container --- */ .bento-grid { display: grid; gap: 16px; width: 100%; flex: 1; overflow: hidden; } /* --- Layout: Full (2+ images) --- */ .bento-grid.layout-full { grid-template-columns: 1.4fr 0.6fr 1fr; grid-template-rows: auto 1fr auto; } .bento-grid.layout-full .cell-brand { grid-column: 1 / 3; grid-row: 1; } .bento-grid.layout-full .cell-link { grid-column: 3; grid-row: 1; } .bento-grid.layout-full .cell-side { grid-column: 3; grid-row: 2; } .bento-grid.layout-full .cell-hero { grid-column: 1; grid-row: 2; } .bento-grid.layout-full .cell-img2 { grid-column: 2; grid-row: 2; } .bento-grid.layout-full .cell-tag { grid-column: 1 / 4; grid-row: 3; } /* --- Layout: Standard (1 image, no video) --- */ .bento-grid.layout-standard { grid-template-columns: 2fr 1fr; grid-template-rows: auto 1fr auto; } .bento-grid.layout-standard .cell-brand { grid-column: 1; grid-row: 1; } .bento-grid.layout-standard .cell-link { grid-column: 2; grid-row: 1; } .bento-grid.layout-standard .cell-side { grid-column: 2; grid-row: 2; } .bento-grid.layout-standard .cell-hero { grid-column: 1; grid-row: 2; } .bento-grid.layout-standard .cell-tag { grid-column: 1 / 3; grid-row: 3; } /* --- Layout: Minimal (image + text only) --- */ .bento-grid.layout-minimal { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr auto; } .bento-grid.layout-minimal .cell-hero { grid-column: 1; grid-row: 1; } .bento-grid.layout-minimal .cell-side { grid-column: 2; grid-row: 1; } .bento-grid.layout-minimal .cell-tag { grid-column: 1 / 3; grid-row: 2; } /* --- Bento cells — shared styles --- */ .bento-cell { border-radius: 14px; overflow: hidden; position: relative; min-height: 0; } /* Text cells — glassmorphism: translucent dark, backdrop blur, subtle border */ .cell-brand, .cell-side { background: rgba(13, 13, 13, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.06); padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; } /* Brand + headline cell */ .cell-brand .bento-brand { font-size: 12px; color: var(--color-red); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; margin-bottom: 12px; } .cell-brand .bento-headline { font-size: clamp(22px, 2.8vw, 38px); font-weight: 700; color: var(--color-white); line-height: 1.25; } /* Side panel — description, video, counter */ .cell-side .bento-description { font-size: clamp(14px, 1.4vw, 15px); color: rgba(255, 255, 255, 0.55); line-height: 1.7; margin-bottom: 20px; } .cell-side .bento-video { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 80px; margin-bottom: 16px; transition: border-color 0.3s ease; } .cell-side .bento-video .play-icon { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; transition: border-color 0.3s ease, transform 0.3s ease; } .cell-side .bento-video .play-icon::after { content: ''; width: 0; height: 0; border-left: 10px solid rgba(255, 255, 255, 0.4); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; } .cell-side .bento-video:hover { border-color: rgba(226, 0, 43, 0.3); } .cell-side .bento-video:hover .play-icon { border-color: var(--color-red); transform: scale(1.1); } .cell-side .bento-counter { font-size: 12px; color: rgba(255, 255, 255, 0.25); font-weight: 500; letter-spacing: 0.08em; order: -1; /* Move to top of flex column */ margin-bottom: 16px; } /* Image cells — subtle border for definition */ .cell-hero, .cell-img2 { background: #111; min-height: 100px; border: 1px solid rgba(255, 255, 255, 0.04); overflow: hidden; position: relative; } .cell-hero img, .cell-img2 img, .cell-img2 video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Video sits on top of poster image — image visible for glitch, video covers it when playing */ .cell-img2-video { position: absolute; inset: 0; z-index: 1; } /* Category tag cell — outline style, not solid red */ .cell-tag { background: transparent; border: 1px solid rgba(226, 0, 43, 0.4); display: flex; align-items: center; justify-content: center; padding: 14px 24px; } .cell-tag .bento-category { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--color-red); font-size: clamp(13px, 1.4vw, 17px); letter-spacing: 0.02em; } /* "View full project" link cell */ .cell-link { background: transparent; border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; padding: 14px 24px; cursor: pointer; transition: border-color 0.3s ease, background 0.3s ease; } .cell-link:hover { border-color: rgba(226, 0, 43, 0.5); background: rgba(226, 0, 43, 0.06); } .cell-link a { color: rgba(255, 255, 255, 0.5); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: color 0.3s ease; } .cell-link:hover a { color: var(--color-red); } /* --- Work page dot nav — tighter gap for 16 dots --- */ .work-dots.scroll-dots { gap: 14px; } /* --- Work CTA section (last section) --- */ .work-cta-bento { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: transparent; padding: 80px 80px 40px 48px; } .work-cta-bento .section-headline { font-style: italic; margin-bottom: 20px; } .work-cta-bento .work-cta-subline { font-size: var(--type-body-lg); color: var(--color-text-muted); max-width: 520px; margin: 0 auto 48px; } .work-cta-bento .btn-primary { width: auto; } /* --- Scroll-hijack overrides for work page --- */ html.scroll-hijack .work-bento-section, html.scroll-hijack .work-cta-bento, html.scroll-hijack .work-archive-section { background: transparent; } /* ── Archive — Sliding Portrait Rows ── Two rows of portrait-format tiles sliding in opposite directions at 30px/s. Infinite seamless loop. "Like what you see?" shows in nav bar only on this section. */ .work-archive-section { position: relative; overflow: hidden; } /* Sliding rows container — inset to avoid nav, back arrow, dot nav */ .slide-container { position: absolute; top: 81px; bottom: 34px; left: 60px; right: 60px; overflow: hidden; } /* Each sliding row — flex row of cards, translated by JS RAF loop */ .slide-row { position: absolute; left: 0; display: flex; gap: 14px; will-change: transform; } /* Individual slide cards — portrait format, height fills row */ .slide-card { flex-shrink: 0; width: 280px; border-radius: 11px; overflow: hidden; position: relative; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } .slide-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .slide-card .slide-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.10); pointer-events: none; } /* Top/bottom edge fades */ .slide-edge-fade { position: absolute; left: 0; right: 0; height: 28px; z-index: 5; pointer-events: none; } .slide-edge-top { top: 0; background: linear-gradient(to bottom, #0D0D0D, transparent); } .slide-edge-bottom { bottom: 0; background: linear-gradient(to top, #0D0D0D, transparent); } /* "Like what you see?" nav statement — only visible on archive section. Slides in from top and sits next to "Let's Build Your Brand". */ .flying-cta-archive { font-family: var(--font-heading); font-size: 21px; font-weight: 500; letter-spacing: 1px; color: var(--color-white); white-space: nowrap; pointer-events: none; margin-right: 8px; } .flying-cta-archive .headline-accent { font-family: var(--font-accent); color: var(--color-red); font-style: normal; } /* --- Mobile bento --- */ @media (max-width: 768px) { .work-bento-section { padding: 70px 20px 20px; } /* All layouts collapse to single column */ .bento-grid.layout-full, .bento-grid.layout-standard, .bento-grid.layout-minimal { grid-template-columns: 1fr; grid-template-rows: auto; } /* Reset all cell grid positions — flow naturally */ .bento-grid .bento-cell { grid-column: auto !important; grid-row: auto !important; } /* Image cells get fixed aspect ratio on mobile */ .cell-hero { aspect-ratio: 4 / 3; } .cell-img2 { aspect-ratio: 16 / 9; } .work-cta-bento { padding: 70px 20px 20px; } .work-cta-bento .btn-primary { width: 100%; } /* ── Archive sliding rows mobile ── */ .slide-container { left: 16px; right: 16px; top: 70px; bottom: 16px; } .slide-card { width: 160px; border-radius: 8px; } } /* ============================================================ SERVICES SECTION — HORIZONTAL SCROLL 6 service cards in a horizontal scrollable track. Cursor-driven drift on desktop (JS), drag-to-scroll, swipe on mobile. Cards: red number, large service name, italic tagline. Hover: red underline draws from left, background lightens. Reference: chaos-animations.md section 7 ============================================================ */ /* ============================================================ SERVICES SECTION — Interactive shapes with tabbed navigation Single viewport-height section. Canvas-rendered floating shapes. Centred content, service nav tabs at bottom. Spec: docs/superpowers/specs/2026-03-25-services-section-design.md ============================================================ */ .services-section { position: relative; width: 100%; height: 100vh; overflow: visible; /* Allow wave transition to overlap into next section */ background: var(--color-bg); } .services-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; transition: background 1s ease; } .services-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .services-label { position: absolute; top: 48px; left: 50%; transform: translateX(-50%); z-index: 10; } .services-see-all { position: absolute; top: 48px; left: 48px; font-size: 12px; color: var(--color-text-subtle); text-decoration: none; border-bottom: 1px solid #333; padding-bottom: 2px; transition: all 0.3s; z-index: 10; } .services-see-all:hover { color: var(--color-red); border-color: var(--color-red); } .services-counter { position: absolute; top: 48px; right: 48px; font-size: 13px; color: #333; z-index: 10; } .services-counter span { color: var(--color-white); font-weight: 700; } .services-content { position: relative; z-index: 10; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; padding-bottom: calc(14vh - 14px); } .services-content * { pointer-events: auto; } .services-main { text-align: center; max-width: 700px; padding: 0 32px; margin-bottom: 40px; } .s-number { font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 16px; opacity: 0; transition: opacity 0.4s ease, color 0.5s ease; } .s-number.visible { opacity: 0.6; } .s-name { font-family: var(--font-heading); font-size: clamp(38px, 5.5vw, 68px); font-weight: 700; line-height: 1.1; margin-bottom: 16px; opacity: 0; transform: translateY(15px); transition: opacity 0.5s ease, transform 0.5s ease; } .s-name.visible { opacity: 1; transform: translateY(0); } .s-tagline { font-size: clamp(15px, 1.7vw, 19px); font-weight: 400; line-height: 1.6; max-width: 520px; margin: 0 auto; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s; } .s-tagline.visible { opacity: 0.6; transform: translateY(0); } .s-learn { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 10px 0; background: none; border: none; color: inherit; font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; letter-spacing: 0.5px; opacity: 0; transition: opacity 0.5s ease 0.15s; } .s-learn.visible { opacity: 0.45; } .s-learn:hover { opacity: 1; } .s-learn .arrow { display: inline-block; transition: transform 0.3s; font-size: 11px; } .s-learn.expanded .arrow { transform: rotate(180deg); } .s-detail { max-height: 0; overflow: hidden; transition: opacity 0.4s ease; opacity: 0; } .s-detail.open { /* max-height set dynamically by services.js via inline style */ overflow-y: auto; overflow-x: hidden; opacity: 1; margin-top: 18px; /* Subtle scrollbar — colour driven by --svc-scroll set in JS */ scrollbar-width: thin; scrollbar-color: var(--svc-scroll, rgba(226,0,43,0.2)) transparent; } /* Webkit scrollbar on detail panel — thin, service-coloured hint */ .s-detail::-webkit-scrollbar { width: 3px; } .s-detail::-webkit-scrollbar-track { background: transparent; } .s-detail::-webkit-scrollbar-thumb { background: var(--svc-scroll, rgba(226,0,43,0.2)); border-radius: 3px; } .s-detail-inner { padding: 20px 26px; border-left: 2px solid; text-align: left; font-size: var(--type-body); line-height: 1.7; opacity: 0.6; max-width: 500px; margin: 0 auto; } /* Deliverables list — red-dot bullets, left-aligned within centred panel */ .s-deliverables { list-style: none; padding: 0; margin: 14px auto 0; max-width: 500px; text-align: left; } .s-deliverables li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; } /* Red dot bullet — colour set via --svc-color CSS custom property per li */ .s-deliverables li::before { content: '\25CF'; font-size: 8px; flex-shrink: 0; color: var(--svc-color, var(--color-red)); } .service-nav { position: absolute; bottom: 14vh; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 20; } .service-nav-item { padding: 10px 18px; border-radius: var(--radius); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: #666; transition: all 0.4s ease; white-space: nowrap; } .service-nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #aaa; border-color: rgba(255, 255, 255, 0.15); } .service-nav-item.active { color: var(--color-white); } @media (max-width: 768px) { .services-see-all { top: 24px; left: 24px; } .services-counter { top: 24px; right: 24px; } .services-label { top: 24px; } .services-main { padding: 0 24px; } .service-nav { bottom: 28px; max-width: calc(100% - 32px); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .service-nav::-webkit-scrollbar { display: none; } .service-nav-item { padding: 8px 14px; font-size: 11px; } } /* ============================================================ TESTIMONIALS SECTION — CAROUSEL Single-testimonial carousel: one quote at a time. Horizontal slide (CSS transition on translateX). Text arrows, dot indicators, auto-advance. ============================================================ */ /* --- Testimonials headline --- No italic. headline-accent handles the accent word. */ /* Centre the section content — label, headline, carousel */ .testimonials-section .container { text-align: center; } .testimonials-headline { max-width: 720px; margin: 0 auto 56px; } /* --- Carousel wrapper --- Relative container for arrows + slides + dots. Horizontal padding makes room for arrows inside overflow boundary. perspective enables 3D mouse-tilt on the visible slide. */ .testimonial-carousel { position: relative; max-width: 800px; margin: 0 auto; text-align: center; } /* --- Viewport --- Clips the slides strip. overflow:hidden lives here so arrows and dots (siblings outside viewport) are never clipped. */ .testimonial-viewport { overflow: hidden; perspective: 800px; } /* --- Slides container --- Horizontal strip of slides. translateX driven by JS. */ .testimonial-slides { display: flex; transition: transform 0.4s ease-out; } /* --- Individual slide --- Each slide takes full width of the carousel wrapper. min-width ensures slides don't collapse in the flex row. */ .testimonial-slide { flex: 0 0 100%; min-width: 100%; padding: 0 24px; display: flex; flex-direction: column; align-items: center; transform-style: preserve-3d; } /* --- Decorative quote mark --- Large red DM Serif Display opening quote. Purely decorative. */ .testimonial-quote-mark { font-family: var(--font-accent); font-size: 96px; font-weight: 400; font-style: normal; color: var(--color-red); line-height: 0.6; display: block; margin-bottom: 16px; opacity: 0.8; } /* --- Quote text --- White italic Nunito. Comfortable reading width. */ .testimonial-quote-text { font-family: var(--font-body); font-size: var(--type-body-lg); font-weight: 400; font-style: italic; color: var(--color-white); line-height: 1.8; max-width: 700px; margin: 0; } /* --- Red divider --- Small centred horizontal line between quote and attribution. */ .testimonial-divider { width: 40px; height: 2px; background: var(--color-red); margin: 24px auto; } /* --- Attribution --- Client name + company stacked. */ .testimonial-attribution { display: flex; flex-direction: column; align-items: center; gap: 4px; } .testimonial-name { font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--color-white); } .testimonial-company { font-family: var(--font-body); font-size: var(--type-small); font-weight: 400; color: var(--color-red); letter-spacing: 0.05em; } /* --- Navigation arrows --- Text arrows flanking the carousel. Vertically centred. */ .testimonial-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 24px; color: var(--color-text-muted); cursor: pointer; padding: 12px; transition: color 0.2s ease; z-index: 2; } .testimonial-arrow:hover { color: var(--color-red); } .testimonial-arrow-prev { left: -60px; } .testimonial-arrow-next { right: -60px; } /* --- Dot indicators --- Small circles below the carousel. Active = red. */ .testimonial-dots { display: flex; justify-content: center; gap: 12px; margin-top: 40px; } .testimonial-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-subtle); border: none; padding: 0; cursor: pointer; transition: background-color 0.3s ease; } .testimonial-dot.active { background: var(--color-red); } /* --- Testimonials responsive (tablet) --- */ @media (max-width: 1024px) { .testimonial-arrow-prev { left: -40px; } .testimonial-arrow-next { right: -40px; } .testimonial-quote-text { max-width: 600px; } } /* --- Testimonials responsive (mobile) --- */ @media (max-width: 768px) { .testimonials-headline { margin-bottom: 40px; } .testimonial-arrow { display: none; } .testimonial-quote-mark { font-size: 72px; } .testimonial-slide { padding: 0 16px; } } /* ============================================================ LEAD MAGNET SECTION Two-column layout: bold copy left, email capture right. Offers a free FMCG brand audit PDF in exchange for email. Dark #111111 background. Email input + red submit button sit in a single row. On submit: form hides, success shows. Diagonal transition into the full red enquiry form below. ============================================================ */ /* --- Lead Magnet headline --- No italic on this one — direct and bold. */ .lead-magnet-headline { margin-bottom: 16px; } /* --- Lead Magnet two-column grid --- Copy on the left (wider), form on the right. Vertically centred so both columns align at the middle. */ .lead-magnet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } /* --- Subline — the hook line --- Large, bold, red. Bridges headline to description. Clash Display to match the headline family. */ .lead-magnet-subline { font-family: var(--font-heading); font-size: var(--type-h3); /* clamp(24px, 3vw, 36px) */ font-weight: 600; color: var(--color-red); /* #E2002B */ line-height: 1.2; margin-bottom: 24px; } /* --- Description paragraph --- Comfortable reading size. Soft white on dark background. Capped width to prevent overly long lines. */ .lead-magnet-description { font-family: var(--font-body); font-size: var(--type-body-lg); /* clamp(18px, 2vw, 22px) */ font-weight: 400; color: var(--color-text); /* #F0F0F0 */ line-height: 1.7; max-width: 520px; } /* --- Form wrapper --- Contains both the form and the hidden success message. Relative positioning for the success overlay. */ .lead-magnet-form-wrapper { position: relative; } /* --- Email input + button row --- Horizontal layout: email field stretches, button fixed width. Seamless visual join — no gap between input and button. */ .lead-magnet-input-row { display: flex; width: 100%; } /* --- Email input field --- Dark background, subtle border, white text. Grows to fill available width. Left corners rounded, right corners flat to butt against the button. */ .lead-magnet-input { flex: 1; padding: 16px 20px; font-family: var(--font-body); font-size: var(--type-body); /* 16px */ font-weight: 400; color: var(--color-white); background: var(--color-bg); /* #0D0D0D */ border: 1px solid var(--color-border); /* rgba(255,255,255,0.08) */ border-right: none; /* Seamless join with button */ border-radius: var(--radius) 0 0 var(--radius); /* Round left side only */ outline: none; transition: border-color 0.3s ease; min-width: 0; /* Prevent flex item from overflowing */ } /* Placeholder text — muted colour */ .lead-magnet-input::placeholder { color: var(--color-text-muted); /* #999999 */ font-weight: 400; } /* Focus state — red border to match brand */ .lead-magnet-input:focus { border-color: var(--color-border-red); /* rgba(226,0,43,0.3) */ } /* --- Submit button --- Override .btn-primary defaults for this context: no letter-spacing bloat, tighter padding, no shrink. White-space nowrap prevents text wrapping on narrow screens. */ .lead-magnet-btn { flex-shrink: 0; white-space: nowrap; padding: 16px 32px; border: 1px solid var(--color-red); border-left: none; border-radius: 0 var(--radius) var(--radius) 0; /* Round right side only */ } /* --- Disclaimer text --- Tiny muted text below the form. Reassures users their email won't be abused. */ .lead-magnet-disclaimer { font-family: var(--font-body); font-size: var(--type-small); /* 13px */ color: var(--color-text-subtle); /* #555555 */ margin-top: 16px; font-style: italic; } /* --- Success message --- Hidden by default. Shown via JS after successful form submit. Replaces the form visually in the same position. */ .lead-magnet-success { display: none; } /* When active: shown as a styled confirmation */ .lead-magnet-success.active { display: block; } /* Success text — large, bold, white with a touch of red */ .lead-magnet-success-text { font-family: var(--font-heading); font-size: var(--type-h3); /* clamp(24px, 3vw, 36px) */ font-weight: 600; color: var(--color-white); line-height: 1.3; } /* --- Diagonal transition override --- The diagonal sits inside the section as a child div rather than a ::after pseudo-element (because the section already has position: relative for other purposes). This positions the diagonal correctly at the bottom. */ .lead-magnet-section .diagonal-bottom { position: absolute; bottom: -2px; left: 0; width: 100%; height: 80px; z-index: 2; } .lead-magnet-section .diagonal-bottom::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: var(--next-bg, var(--color-red)); clip-path: polygon(0 100%, 100% 0, 100% 100%); } /* --- Lead Magnet responsive (tablet) --- Tighter gap between columns, adjust spacing */ @media (max-width: 1024px) { .lead-magnet-grid { gap: 48px; } } /* --- Lead Magnet responsive (mobile) --- Stack columns vertically. Form sits below the copy. Input and button stack vertically as well. */ @media (max-width: 768px) { .lead-magnet-grid { grid-template-columns: 1fr; gap: 40px; } .lead-magnet-headline { margin-bottom: 12px; } /* Stack input and button vertically on mobile */ .lead-magnet-input-row { flex-direction: column; } /* Input gets full rounded border on mobile (no seamless join) */ .lead-magnet-input { border-right: 1px solid var(--color-border); margin-bottom: 12px; } /* Button gets full border on mobile */ .lead-magnet-btn { border-left: 1px solid var(--color-red); width: 100%; } } /* ============================================================ ENQUIRY FORM SECTION Full red (#E2002B) background — the boldest section on the page. Two-column layout: bold copy left, full contact form right. White inputs with dark text sit on the red background. "Send It →" button in dark #0D0D0D with white text. All text on this section is white (labels, headlines, etc.) Straight horizontal transition into the footer. ============================================================ */ /* --- Enquiry section --- Extra bottom padding to give breathing room before the footer. No diagonal or wave transition — straight horizontal cut. */ .enquiry-section { padding-bottom: calc(var(--space-section) + 20px); } /* --- Enquiry section label override --- The .section-label is normally red, but on a red background it needs to be white to remain visible. */ .enquiry-label { color: var(--color-white); opacity: 0.8; } /* --- Enquiry headline --- White Clash Display on red. No italic — bold and direct. */ .enquiry-headline { color: var(--color-white); margin-bottom: 20px; } /* --- Enquiry subline --- Slightly softer white. Bridges headline to sign-off. Inter body font for contrast with the Clash Display headline. */ .enquiry-subline { font-family: var(--font-body); font-size: var(--type-body-lg); /* clamp(18px, 2vw, 22px) */ font-weight: 400; color: rgba(255, 255, 255, 0.85); line-height: 1.6; margin-bottom: 32px; max-width: 440px; } /* --- Enquiry sign-off --- The "Big thinking. Small team. Serious results." line. Clash Display, bold, full white. A confident closer. */ .enquiry-signoff { font-family: var(--font-heading); font-size: var(--type-body-lg); font-weight: 600; color: var(--color-white); line-height: 1.3; letter-spacing: 0.02em; } /* --- Enquiry two-column grid --- Copy on the left, form on the right (wider). Vertically top-aligned — form is taller than copy. */ .enquiry-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; } /* --- Form wrapper --- Contains both the form and the hidden success message. Relative positioning for the success overlay. */ .enquiry-form-wrapper { position: relative; } /* --- Form field rows --- Two fields side by side (Name + Company, Email + WhatsApp). Equal width columns with consistent gap. */ .enquiry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* --- Individual field container --- Wraps label + input/select/textarea. Consistent bottom margin between all field rows. */ .enquiry-field { margin-bottom: 20px; } /* --- Field labels --- White Inter text, small, uppercase. Sits above the input with a small gap. */ .enquiry-field-label { font-family: var(--font-body); font-size: var(--type-small); /* 13px */ font-weight: 600; color: var(--color-white); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 8px; } /* --- Input fields (text, email, tel, select, textarea) --- White background with dark text on the red section. No border — clean look against the red. Consistent padding and font size across all field types. */ .enquiry-input { width: 100%; padding: 14px 16px; font-family: var(--font-body); font-size: var(--type-body); /* 16px */ font-weight: 400; color: var(--color-bg); /* #0D0D0D — dark text on white */ background: var(--color-white); border: none; border-radius: var(--radius); outline: none; transition: box-shadow 0.3s ease; } /* Focus state — subtle red glow to signal active field */ .enquiry-input:focus { box-shadow: 0 0 0 3px rgba(139, 0, 25, 0.4); } /* Placeholder text — dark at 60% opacity for readability on white */ .enquiry-input::placeholder { color: rgba(13, 13, 13, 0.4); } /* --- Select dropdown --- Matches text input styling. Custom arrow via background SVG. appearance: none removes native browser dropdown styling. */ .enquiry-select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%230D0D0D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; /* Room for the custom arrow */ } /* Default/placeholder option styling — muted colour */ .enquiry-select option[value=""][disabled] { color: rgba(13, 13, 13, 0.4); } /* --- Textarea --- Taller input for the message field. Resize only vertically to prevent layout breaking from horizontal resize. */ .enquiry-textarea { resize: vertical; min-height: 120px; line-height: 1.6; } /* --- Submit button --- Dark #0D0D0D background with white text. Stands out against the red section background. Hover: background lightens, text stays white. */ .enquiry-submit-btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 48px; font-family: var(--font-heading); font-size: var(--type-body); /* 16px */ font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-white); background: var(--color-bg); /* #0D0D0D */ border: 2px solid var(--color-bg); border-radius: var(--radius); cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.35s ease; margin-top: 8px; } /* Sliding fill pseudo-element — slides in from left on hover. The ::before covers the button with a lighter background, transitioning from scaleX(0) to scaleX(1). Button text stays above via z-index on the span. */ .enquiry-submit-btn::before { content: ''; position: absolute; inset: 0; background: var(--color-bg-card); /* #161616 */ transform: scaleX(0); transform-origin: left center; transition: transform 0.35s ease; z-index: 0; } /* Hover: slide the fill in from left */ .enquiry-submit-btn:hover::before { transform: scaleX(1); } /* Hover: update border to match fill colour */ .enquiry-submit-btn:hover { border-color: var(--color-bg-card); } /* Keep button text above any pseudo-elements */ .enquiry-submit-btn span { position: relative; z-index: 1; } /* Disabled state while submitting */ .enquiry-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; } /* --- Success message --- Hidden by default. Shown via JS after successful form submit. Replaces the form visually in the same position. */ .enquiry-success { display: none; } /* When active: shown as a styled confirmation */ .enquiry-success.active { display: flex; align-items: center; min-height: 300px; } /* Success text — large white Clash Display on red background */ .enquiry-success-text { font-family: var(--font-heading); font-size: var(--type-h2); /* clamp(32px, 5vw, 64px) */ font-weight: 600; color: var(--color-white); line-height: 1.2; } /* --- Enquiry responsive (tablet) --- Tighter gap, slightly less padding */ @media (max-width: 1024px) { .enquiry-grid { gap: 48px; } } /* --- Enquiry responsive (mobile) --- Stack columns vertically. Form rows also stack. All fields become full width. */ @media (max-width: 768px) { .enquiry-grid { grid-template-columns: 1fr; gap: 40px; } /* Stack field rows on mobile — one field per line */ .enquiry-row { grid-template-columns: 1fr; gap: 0; } .enquiry-headline { margin-bottom: 16px; } .enquiry-subline { margin-bottom: 24px; max-width: none; } /* Full width submit button on mobile */ .enquiry-submit-btn { width: 100%; } /* Success message slightly smaller on mobile */ .enquiry-success.active { min-height: 200px; } } /* ============================================================ SERVICES PAGE — HERO SECTION Short 60vh hero — same pattern as work page hero. Section label, large headline, subline. Centred text. Background: #0D0D0D with padding to clear the fixed nav. ============================================================ */ /* Services hero — 60vh centred layout, clears fixed nav */ .services-hero-section { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding-top: 120px; /* Clear the fixed nav */ padding-bottom: var(--space-section); background: var(--color-bg); /* #0D0D0D */ text-align: center; } /* Services hero headline — massive Clash Display */ .services-hero-headline { font-family: var(--font-heading); font-size: var(--type-h1); /* clamp(48px, 7vw, 96px) */ font-weight: 700; color: var(--color-white); line-height: 1.05; margin-bottom: 24px; max-width: 900px; margin-left: auto; margin-right: auto; } /* Services hero subline — Inter, muted, centred */ .services-hero-subline { font-family: var(--font-body); font-size: var(--type-body-lg); /* clamp(18px, 2vw, 22px) */ font-weight: 400; color: var(--color-text-muted); /* #999999 */ line-height: 1.6; max-width: 580px; margin: 0 auto; } /* ============================================================ SERVICES PAGE — PHILOSOPHY STATEMENT Full-width centred blockquote section. Background: #111111. Large italic text in soft white. Curved wave transition from hero above. ============================================================ */ /* Philosophy section — generous vertical padding */ .services-philosophy-section { padding-top: 80px; padding-bottom: var(--space-section); text-align: center; } /* Philosophy quote — large, italic, centred, soft white */ .services-philosophy-quote { font-family: var(--font-body); font-size: var(--type-h3); /* clamp(24px, 3vw, 36px) */ font-weight: 300; font-style: italic; color: var(--color-text); /* #F0F0F0 */ line-height: 1.6; max-width: 900px; margin: 0 auto; border: none; padding: 0; } /* ============================================================ SERVICES PAGE — STRATEGIC FLOW Three-step process visual: STRATEGY → CREATIVE → EXECUTION. Flexbox row on desktop, stacked column on mobile. Each step in a dark card box with red number accent. ============================================================ */ /* Section wrapper — same dark bg as surrounding sections */ .strategic-flow-section { padding-top: var(--space-section-sm); padding-bottom: var(--space-section); text-align: center; } /* Label above the flow — muted uppercase descriptor */ .strategic-flow-label { font-family: var(--font-body); font-size: var(--type-small); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 48px; } /* Flow container — horizontal row of steps and arrows */ .strategic-flow { display: flex; align-items: center; justify-content: center; gap: 24px; } /* Each step box — dark card with subtle border */ .flow-step { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 40px 48px; min-width: 200px; transition: border-color 0.3s ease; } /* Hover: red border glow */ .flow-step:hover { border-color: var(--color-border-red); } /* Step number — small red label above title */ .flow-number { display: block; font-family: var(--font-body); font-size: var(--type-small); color: var(--color-red); font-weight: 600; letter-spacing: 2px; margin-bottom: 12px; } /* Step title — bold Clash Display heading */ .flow-title { font-family: var(--font-heading); font-size: var(--type-h3); font-weight: 700; color: var(--color-white); margin: 0; letter-spacing: 1px; } /* Arrow between steps — red, large */ .flow-arrow { font-size: 32px; color: var(--color-red); font-weight: 700; flex-shrink: 0; line-height: 1; } /* Mobile — stack vertically, rotate arrows */ @media (max-width: 768px) { .strategic-flow { flex-direction: column; gap: 16px; } .flow-step { min-width: unset; width: 100%; padding: 32px 24px; } /* Rotate arrow to point downward on mobile */ .flow-arrow { transform: rotate(90deg); font-size: 28px; } } /* ============================================================ SERVICES PAGE — SERVICE DETAIL SECTIONS 6 full sections, one per service. Two-column grid layout. Alternates between normal (text left / visual right) and reversed (visual left / text right) for visual rhythm. Each section: number, name, tagline, body, deliverables. ============================================================ */ /* Service detail sections — stacking context keeps diagonal/wave transitions behind the section content */ .service-detail-section { position: relative; z-index: 1; overflow: visible; } /* --- Service section diagonal fix --- Scoped absolute positioning so the diagonal overlay doesn't render as a visible black box in service sections. Parent .service-detail-section already has position: relative. */ .service-detail-section .diagonal-bottom { position: absolute; bottom: -2px; left: 0; width: 100%; height: 80px; pointer-events: none; } /* Content containers sit above diagonal/wave transitions (z:1) */ .service-detail-text, .service-detail-visual { position: relative; z-index: 3; } /* Two-column grid — text and visual side by side */ .service-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } /* Reversed layout — visual column comes first in the DOM, but on mobile everything stacks so text always leads */ .service-detail-reversed { direction: rtl; /* Flip column order */ } /* Reset text direction inside reversed grid children */ .service-detail-reversed > * { direction: ltr; } /* Service number — large red numeral, Clash Display */ .service-detail-number { display: block; font-family: var(--font-heading); font-size: clamp(48px, 6vw, 80px); font-weight: 700; color: var(--color-red); /* #E2002B */ line-height: 1; margin-bottom: 16px; opacity: 0.3; /* Subtle background presence */ } /* Service name — large Clash Display headline */ .service-detail-name { font-family: var(--font-heading); font-size: var(--type-h2); /* clamp(32px, 5vw, 64px) */ font-weight: 700; color: var(--color-white); line-height: 1.1; margin-bottom: 12px; } /* Service tagline — italic, red accent */ .service-detail-tagline { font-family: var(--font-body); font-size: var(--type-body-lg); /* clamp(18px, 2vw, 22px) */ font-weight: 400; font-style: italic; color: var(--color-red); /* #E2002B */ margin-bottom: 32px; } /* Service body text — Inter, soft white, spaced paragraphs */ .service-detail-body { margin-bottom: 32px; } .service-detail-body p { font-family: var(--font-body); font-size: var(--type-body); /* 16px */ font-weight: 400; color: var(--color-text-muted); /* #999999 */ line-height: 1.8; margin-bottom: 16px; } .service-detail-body p:last-child { margin-bottom: 0; } /* Deliverables list — red bullet markers, muted text */ .service-detail-deliverables { list-style: none; padding: 0; border-top: 1px solid var(--color-border); /* rgba(255,255,255,0.08) */ padding-top: 24px; } .service-detail-deliverables li { font-family: var(--font-body); font-size: var(--type-body); /* 16px */ font-weight: 400; color: var(--color-text-muted); /* #999999 */ line-height: 1.6; padding: 8px 0; padding-left: 20px; position: relative; } /* Red bullet marker — small red dot before each deliverable */ .service-detail-deliverables li::before { content: ''; position: absolute; left: 0; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-red); /* #E2002B */ } /* ============================================================ SERVICES PAGE — VISUAL COLUMN Decorative block with a large SVG icon and service number. Dark card background with subtle red border accent. Centred within its grid column. ============================================================ */ /* Visual block — centred card with icon and number */ .service-visual-block { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 400px; aspect-ratio: 1 / 1; margin: 0 auto; background: transparent; /* No card background — icon floats freely */ border: none; box-shadow: none; border-radius: 0; position: relative; overflow: visible; } /* Large decorative SVG icon — red stroke, centred */ .service-visual-icon { width: 80px; height: 80px; color: var(--color-red); /* #E2002B */ opacity: 0.6; margin-bottom: 24px; background: transparent; /* Ensure no inherited background */ background-color: transparent; } /* Large background number — faint, behind the icon */ .service-visual-number { font-family: var(--font-heading); font-size: clamp(100px, 15vw, 200px); font-weight: 700; color: var(--color-white); opacity: 0.03; /* Very faint watermark */ position: absolute; bottom: -20px; right: -10px; line-height: 1; pointer-events: none; background: transparent; /* Ensure no inherited background */ background-color: transparent; } /* ============================================================ SERVICES PAGE — BOTTOM CTA SECTION Full red (#E2002B) background. Bold headline, subline, button. White text on red. Button is white bg with dark text. Curved wave transition from last service section. ============================================================ */ /* Services CTA section — extra vertical padding for impact */ .services-cta-section { text-align: center; padding-top: 80px; } /* CTA headline — white on red, centred */ .services-cta-headline { color: var(--color-white); font-style: normal; } /* CTA subline — white, slightly muted on red */ .services-cta-subline { font-family: var(--font-body); font-size: var(--type-body-lg); /* clamp(18px, 2vw, 22px) */ font-weight: 400; color: rgba(255, 255, 255, 0.85); line-height: 1.6; margin-bottom: 48px; } /* Button wrapper — centre the button */ .services-cta-button-wrapper { display: flex; justify-content: center; } /* CTA button — white background, dark text (on red section) */ .services-cta-btn { background: var(--color-white) !important; color: var(--color-red) !important; border-color: var(--color-white) !important; } .services-cta-btn:hover { background: var(--color-text) !important; border-color: var(--color-text) !important; } /* Override btn-primary width to auto on services CTA */ .services-cta-button-wrapper .btn-primary { width: auto; } /* --- Services page responsive (mobile) --- */ @media (max-width: 768px) { /* Stack the two-column grid into a single column on mobile */ .service-detail-grid { grid-template-columns: 1fr; gap: 48px; } /* Reset reversed direction on mobile — text always first */ .service-detail-reversed { direction: ltr; } /* Visual block comes after text on mobile */ .service-detail-reversed .service-detail-visual { order: 2; } .service-detail-reversed .service-detail-text { order: 1; } /* Smaller visual block on mobile */ .service-visual-block { max-width: 280px; aspect-ratio: 1 / 1; } /* Full width CTA button on mobile */ .services-cta-button-wrapper .btn-primary { width: 100%; } /* Tighter CTA subline spacing on mobile */ .services-cta-subline { margin-bottom: 32px; } } /* ============================================================ ABOUT PAGE — HERO SECTION Short 60vh hero — same pattern as work/services page heroes. Large headline in Clash Display, centred. Background: #0D0D0D with padding to clear the fixed nav. ============================================================ */ /* About hero — 60vh centred layout, clears fixed nav */ .about-hero-section { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding-top: 120px; /* Clear the fixed nav */ padding-bottom: var(--space-section); background: var(--color-bg); /* #0D0D0D */ text-align: center; } /* About hero headline — massive Clash Display */ .about-hero-headline { font-family: var(--font-heading); font-size: var(--type-h1); /* clamp(48px, 7vw, 96px) */ font-weight: 700; color: var(--color-white); line-height: 1.05; max-width: 900px; margin-left: auto; margin-right: auto; } /* ============================================================ ABOUT PAGE — ORIGIN SECTION Founding story narrative. Background: #111111 (bg-alt). Generous padding. Curved wave transition from hero above. ============================================================ */ /* Origin section — extra top padding to account for wave */ .about-origin-section { padding-top: 40px; } /* Origin headline — slightly smaller than hero */ .about-origin-headline { font-style: italic; max-width: 720px; } /* Origin body — text paragraphs with comfortable spacing */ .about-origin-body { max-width: 720px; } .about-origin-body p { font-family: var(--font-body); font-size: var(--type-body-lg); /* clamp(18px, 2vw, 22px) */ font-weight: 400; color: var(--color-text); /* #F0F0F0 */ line-height: 1.7; margin-bottom: 24px; } /* Last paragraph — no bottom margin */ .about-origin-body p:last-child { margin-bottom: 0; } /* ============================================================ ABOUT PAGE — DIAGONAL TOP TRANSITION Creates a diagonal cut at the TOP of a section. The --prev-bg custom property sets the colour of the triangle. Mirrors the diagonal-bottom pattern but inverted. ============================================================ */ .diagonal-top { position: absolute; top: -2px; left: 0; width: 100%; height: 80px; pointer-events: none; z-index: 1; } .diagonal-top::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 80px; background: var(--prev-bg, var(--color-bg-alt)); clip-path: polygon(0 0, 100% 0, 0 100%); z-index: 1; } /* ============================================================ ABOUT PAGE — PHILOSOPHY SECTION How Chaos Agency thinks and works. Background: #0D0D0D (bg-primary). Diagonal transition from origin above, curved wave below. ============================================================ */ /* Philosophy section — needs extra top padding for diagonal */ .about-philosophy-section { padding-top: calc(var(--space-section) + 40px); } /* Philosophy headline */ .about-philosophy-headline { font-style: italic; max-width: 720px; } /* Philosophy body — text paragraphs */ .about-philosophy-body { max-width: 720px; } .about-philosophy-body p { font-family: var(--font-body); font-size: var(--type-body-lg); /* clamp(18px, 2vw, 22px) */ font-weight: 400; color: var(--color-text); /* #F0F0F0 */ line-height: 1.7; margin-bottom: 24px; } .about-philosophy-body p:last-child { margin-bottom: 0; } /* Sign-off line — "We call it work that works." — bold, italic, red */ .about-philosophy-signoff { font-weight: 600; font-style: italic; color: var(--color-red) !important; font-size: clamp(20px, 2.5vw, 28px) !important; margin-top: 16px; } /* ============================================================ ABOUT PAGE — TEAM SECTION Team intro + 3 member cards in a grid. Background: #111111 (bg-alt). Curved wave transition from philosophy above, wave into CTA. ============================================================ */ /* Team headline */ .about-team-headline { font-style: italic; max-width: 720px; } /* Team intro paragraphs — above the cards */ .about-team-intro { max-width: 720px; margin-bottom: 72px; } .about-team-intro p { font-family: var(--font-body); font-size: var(--type-body-lg); font-weight: 400; color: var(--color-text); line-height: 1.7; margin-bottom: 20px; } .about-team-intro p:last-child { margin-bottom: 0; } /* Team grid — 3 columns on desktop */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } /* Individual team card — dark card with subtle border */ .team-card { background: var(--color-bg-card); /* #161616 */ border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.3s ease, transform 0.3s ease; } /* Hover: subtle red border glow and lift */ .team-card:hover { border-color: var(--color-border-red); transform: translateY(-4px); } /* Photo placeholder — portrait aspect ratio (600×700) */ .team-photo-placeholder { width: 100%; aspect-ratio: 6 / 7; /* 600:700 portrait ratio */ background: var(--color-bg); /* #0D0D0D — dark placeholder */ display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } /* Initials shown as placeholder text */ .team-photo-initials { font-family: var(--font-heading); font-size: clamp(48px, 6vw, 72px); font-weight: 700; color: var(--color-bg-card); /* Subtle — just above background */ letter-spacing: 4px; user-select: none; } /* Card text info — below the photo */ .team-card-info { padding: 32px 28px; } /* Team member name — Clash Display, white */ .team-name { font-family: var(--font-heading); font-size: clamp(22px, 2.5vw, 28px); font-weight: 600; color: var(--color-white); line-height: 1.2; margin-bottom: 6px; } /* Team member role — red, uppercase, small */ .team-role { display: block; font-family: var(--font-body); font-size: var(--type-small); /* 13px */ font-weight: 600; color: var(--color-red); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px; } /* Team member bio — body text */ .team-bio { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--color-text-muted); /* #999999 */ line-height: 1.6; } /* ============================================================ ABOUT PAGE — CTA SECTION Bold call-to-action at the bottom of the about page. Full red (#E2002B) background. White text and button. Curved wave transition from team section. Straight horizontal transition into footer. ============================================================ */ /* About CTA section — centred text, extra top padding */ .about-cta-section { text-align: center; padding-top: 80px; } /* CTA headline — white on red */ .about-cta-headline { color: var(--color-white); font-style: italic; } /* CTA subline — slightly muted white on red */ .about-cta-subline { font-family: var(--font-body); font-size: var(--type-body-lg); /* clamp(18px, 2vw, 22px) */ font-weight: 400; color: rgba(255, 255, 255, 0.85); line-height: 1.6; margin-bottom: 48px; } /* Button wrapper — centre the button */ .about-cta-button-wrapper { display: flex; justify-content: center; } /* CTA button — white background, red text (on red section) */ .about-cta-btn { background: var(--color-white) !important; color: var(--color-red) !important; border-color: var(--color-white) !important; } .about-cta-btn:hover { background: var(--color-text) !important; border-color: var(--color-text) !important; } /* Override btn-primary width to auto on about CTA */ .about-cta-button-wrapper .btn-primary { width: auto; } /* ============================================================ ABOUT PAGE — MOBILE RESPONSIVE Stack team cards to 2 columns on tablet, 1 on mobile. Tighten spacing on smaller screens. ============================================================ */ @media (max-width: 1024px) { /* 2 columns on tablet */ .team-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } } @media (max-width: 768px) { /* About hero tighter on mobile */ .about-hero-section { padding-top: 100px; min-height: 50vh; } /* Reduce diagonal/wave spacing on mobile */ .about-philosophy-section { padding-top: calc(var(--space-section-sm) + 20px); } /* 1 column on phone */ .team-grid { grid-template-columns: 1fr; gap: 32px; max-width: 480px; } /* Card info padding tighter */ .team-card-info { padding: 24px 20px; } /* Team intro tighter margin */ .about-team-intro { margin-bottom: 48px; } /* Full width CTA button on mobile */ .about-cta-button-wrapper .btn-primary { width: 100%; } /* Tighter CTA subline spacing on mobile */ .about-cta-subline { margin-bottom: 32px; } } /* ============================================================ CONTACT PAGE — HERO SECTION Short 60vh hero — same pattern as work/services/about heroes. Large headline in Clash Display, centred. Background: #0D0D0D with padding to clear the fixed nav. ============================================================ */ /* Contact hero — 60vh centred layout, clears fixed nav */ .contact-hero-section { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding-top: 120px; /* Clear the fixed nav */ padding-bottom: var(--space-section); background: var(--color-bg); /* #0D0D0D */ text-align: center; } /* Contact hero headline — massive Clash Display */ .contact-hero-headline { font-family: var(--font-heading); font-size: var(--type-h1); /* clamp(48px, 7vw, 96px) */ font-weight: 700; color: var(--color-white); line-height: 1.05; max-width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 24px; } /* Contact hero subline — Inter, muted, warm and inviting */ .contact-hero-subline { font-family: var(--font-body); font-size: var(--type-body-lg); /* clamp(18px, 2vw, 22px) */ font-weight: 400; color: var(--color-text-muted); /* #999999 */ line-height: 1.6; max-width: 620px; margin: 0 auto; } /* ============================================================ CONTACT PAGE — SPLIT LAYOUT SECTION Two-column layout: bold copy + details left, form right. Background: #111111 (bg-alt). Curved wave transition from hero above. ============================================================ */ /* Contact section — extra top padding to account for wave */ .contact-main-section { padding-top: 40px; } /* Two-column grid: copy left (5fr), form right (7fr) */ .contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; } /* ============================================================ CONTACT PAGE — LEFT COLUMN (Bold Copy + Details) Response promise, three pain-point questions, "Start here.", WhatsApp button, email, and location. ============================================================ */ /* Response promise line — large, bold, Clash Display */ .contact-response-line { font-family: var(--font-heading); font-size: var(--type-h3); /* clamp(24px, 3vw, 36px) */ font-weight: 600; color: var(--color-white); line-height: 1.2; margin-bottom: 40px; } /* Three pain-point questions — body text, stacked */ .contact-questions { margin-bottom: 32px; } .contact-question { font-family: var(--font-body); font-size: var(--type-body-lg); /* clamp(18px, 2vw, 22px) */ font-weight: 400; color: var(--color-text); /* #F0F0F0 */ line-height: 1.7; margin-bottom: 4px; } /* "Start here." — bold, red, Clash Display. A confident nudge. */ .contact-start-here { font-family: var(--font-heading); font-size: clamp(20px, 2.5vw, 28px); font-weight: 600; color: var(--color-red); /* #E2002B */ margin-bottom: 32px; } /* Red horizontal divider line — animated on scroll via main.js */ .contact-divider { width: 80px; height: 3px; background: var(--color-red); margin-bottom: 32px; } /* ============================================================ CONTACT PAGE — WHATSAPP BUTTON Green button (#25D366) with WhatsApp SVG icon and white text. Hover: slightly darker green. Links to wa.me. ============================================================ */ .contact-whatsapp-btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 32px; border-radius: var(--radius); background: #25D366; /* Official WhatsApp green */ color: var(--color-white); font-family: var(--font-heading); font-size: var(--type-body); /* 16px */ font-weight: 600; letter-spacing: 0.04em; text-decoration: none; transition: background 0.3s ease, transform 0.3s ease; margin-bottom: 32px; } /* WhatsApp icon sizing */ .whatsapp-icon { width: 22px; height: 22px; flex-shrink: 0; } /* Hover: slightly darker green + subtle lift */ .contact-whatsapp-btn:hover { background: #1DA851; transform: translateY(-2px); } /* ============================================================ CONTACT PAGE — CONTACT DETAILS Email link and location text below the WhatsApp button. ============================================================ */ .contact-details { display: flex; flex-direction: column; gap: 8px; } /* Email link — white, turns red on hover */ .contact-email-link { font-family: var(--font-body); font-size: var(--type-body); /* 16px */ font-weight: 500; color: var(--color-white); text-decoration: none; transition: color 0.25s ease; word-break: break-all; } .contact-email-link:hover { color: var(--color-red); } /* Location — muted text */ .contact-location { font-family: var(--font-body); font-size: 15px; color: var(--color-text-muted); /* #999999 */ } /* ============================================================ CONTACT PAGE — RIGHT COLUMN (Enquiry Form) Reuses the existing enquiry form field styles from homepage (.enquiry-input, .enquiry-row, .enquiry-field, etc.) but with a dark background instead of red. ============================================================ */ /* Form wrapper — contains form + success message */ .contact-form-wrapper { position: relative; } /* Override input styles for dark background (not red like homepage). Inputs get a subtle dark bg-card background with white text, and a white border for visibility on the #111111 section. */ .contact-form .enquiry-input { background: var(--color-bg-card); /* #161616 */ color: var(--color-text); /* #F0F0F0 */ border: 1px solid var(--color-border); /* Subtle white border */ } /* Focus state — red border glow on dark background */ .contact-form .enquiry-input:focus { border-color: var(--color-red); box-shadow: 0 0 0 2px rgba(226, 0, 43, 0.2); } /* Placeholder text — muted on dark background */ .contact-form .enquiry-input::placeholder { color: var(--color-text-subtle); /* #555555 */ } /* Select arrow — white arrow SVG for dark background. Must re-declare background-repeat and background-position here because .contact-form .enquiry-input uses the background shorthand which resets all background sub-properties (repeat, position, etc.) to defaults. */ .contact-form .enquiry-select { background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23999999' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; } /* Labels — white on dark background */ .contact-form .enquiry-field-label { color: var(--color-white); } /* Submit button — red with white text (on dark background) */ .contact-submit-btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 48px; font-family: var(--font-heading); font-size: var(--type-body); /* 16px */ font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-white); background: var(--color-red); /* #E2002B */ border: 2px solid var(--color-red); border-radius: var(--radius); cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.35s ease; margin-top: 8px; } /* Sliding fill pseudo-element — slides in from left on hover. The ::before covers the button with a darker red background, transitioning from scaleX(0) to scaleX(1). Button text stays above via z-index on the span. */ .contact-submit-btn::before { content: ''; position: absolute; inset: 0; background: var(--color-red-hover); /* #C4001F */ transform: scaleX(0); transform-origin: left center; transition: transform 0.35s ease; z-index: 0; } /* Hover: slide the fill in from left */ .contact-submit-btn:hover::before { transform: scaleX(1); } /* Hover: update border to match fill colour */ .contact-submit-btn:hover { border-color: var(--color-red-hover); } /* Keep button text above any pseudo-elements */ .contact-submit-btn span { position: relative; z-index: 1; } /* Disabled state while submitting */ .contact-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; } /* ============================================================ CONTACT PAGE — SUCCESS MESSAGE Hidden by default. Shown after successful form submit. Replaces the form visually in the same position. ============================================================ */ .contact-success { display: none; } /* When active: shown as a styled confirmation */ .contact-success.active { display: flex; align-items: center; min-height: 300px; } /* Success text — large white Clash Display */ .contact-success-text { font-family: var(--font-heading); font-size: var(--type-h2); /* clamp(32px, 5vw, 64px) */ font-weight: 600; color: var(--color-white); line-height: 1.2; } /* ============================================================ CONTACT PAGE — BOTTOM SIGN-OFF "Big thinking. Small team. Serious results." Full width, centred, bold Clash Display. Diagonal transition from contact section above. ============================================================ */ /* Sign-off section — needs extra top padding for diagonal */ .contact-signoff-section { padding-top: calc(var(--space-section) + 40px); text-align: center; } /* Sign-off text — massive, bold, italic Clash Display */ .contact-signoff-text { font-family: var(--font-heading); font-size: var(--type-h2); /* clamp(32px, 5vw, 64px) */ font-weight: 700; color: var(--color-white); line-height: 1.1; font-style: italic; max-width: 800px; margin: 0 auto; } /* ============================================================ CONTACT PAGE — RESPONSIVE (TABLET) Tighter grid gap at medium screens. ============================================================ */ @media (max-width: 1024px) { .contact-grid { gap: 48px; } } /* ============================================================ CONTACT PAGE — RESPONSIVE (MOBILE) Stack columns vertically. Form rows also stack. WhatsApp button and details centre-aligned. ============================================================ */ @media (max-width: 768px) { /* Contact hero tighter on mobile */ .contact-hero-section { padding-top: 100px; min-height: 50vh; } /* Stack to single column on mobile */ .contact-grid { grid-template-columns: 1fr; gap: 48px; } /* Stack field rows on mobile — one field per line */ .contact-form .enquiry-row { grid-template-columns: 1fr; gap: 0; } /* Full width submit button on mobile */ .contact-submit-btn { width: 100%; } /* Full width WhatsApp button on mobile */ .contact-whatsapp-btn { width: 100%; justify-content: center; } /* Reduce diagonal/wave spacing on mobile */ .contact-signoff-section { padding-top: calc(var(--space-section-sm) + 20px); } /* Tighter response line on mobile */ .contact-response-line { margin-bottom: 28px; } /* Success message slightly smaller on mobile */ .contact-success.active { min-height: 200px; } } /* ------------------------------------------------------------ MOBILE RESPONSIVE — BASE BREAKPOINTS Mobile-first: base styles are for mobile. These overrides adjust spacing and layout for smaller screens. ------------------------------------------------------------ */ @media (max-width: 768px) { /* Reduce section padding on mobile */ .section { padding-top: var(--space-section-sm); padding-bottom: var(--space-section-sm); } /* Tighter container padding on mobile */ .container { padding-left: var(--space-container-sm); padding-right: var(--space-container-sm); } /* Slightly smaller buttons on mobile for touch comfort */ .btn-primary, .btn-secondary { padding: 14px 32px; font-size: 14px; width: 100%; /* Full width buttons on mobile */ } } /* ------------------------------------------------------------ ACCESSIBILITY — REDUCED MOTION Respects user preference for reduced motion. Disables all animations and transitions when enabled. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Screen-reader-only utility — visually hidden but accessible to assistive technology */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ CONTACT SECTION — MERGED Split layout: bold copy left, contact channel cards right. Direct links to WhatsApp, Email, Phone. No form. ============================================================ */ .contact-section { position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1200px; width: 100%; padding: 0 20px; align-items: center; } /* --- Left column: copy --- */ .contact-copy { display: flex; flex-direction: column; gap: 0; } .contact-headline { margin-bottom: 20px; } .contact-subline { font-size: var(--type-body-lg); color: var(--color-text-muted); line-height: 1.6; margin-bottom: 16px; } .contact-signoff { font-size: var(--type-body); color: var(--color-text-subtle); font-style: italic; margin-bottom: 40px; } /* Free audit aside */ .contact-audit-aside { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .contact-audit-text { font-size: var(--type-small); color: var(--color-text-subtle); margin-bottom: 6px; } .contact-audit-link { font-size: var(--type-body); color: var(--color-red); text-decoration: none; font-weight: 600; transition: color 0.3s ease; } .contact-audit-link:hover { color: var(--color-red-hover); } /* --- Right column: contact cards --- */ .contact-channels { display: flex; flex-direction: column; gap: 16px; } /* --- Email card wrapper — holds and copy button side by side --- */ .contact-card-wrapper { display: flex; align-items: center; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); transition: all 0.3s ease; } .contact-card-wrapper:hover { border-color: rgba(226, 0, 43, 0.4); transform: translateY(-2px); background: rgba(255, 255, 255, 0.05); } .contact-card-wrapper .contact-card { flex: 1; border: none; background: none; border-radius: 0; } .contact-card-wrapper .contact-card:hover { transform: none; border-color: transparent; background: none; } .contact-card { display: flex; align-items: center; gap: 20px; padding: 24px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); text-decoration: none; color: var(--color-text); transition: all 0.3s ease; } .contact-card:hover { border-color: rgba(226, 0, 43, 0.4); transform: translateY(-2px); background: rgba(255, 255, 255, 0.05); } .contact-card:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; } .contact-card-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--color-red); flex-shrink: 0; } .contact-card-content { display: flex; flex-direction: column; gap: 4px; } .contact-card-title { font-size: var(--type-body-lg); font-weight: 600; color: var(--color-white); } .contact-card-detail { font-size: var(--type-body); color: var(--color-text-muted); } /* --- Copy button — sits beside email card inside wrapper --- */ .contact-copy-btn { margin-right: 16px; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: rgba(176, 176, 176, 1); cursor: pointer; transition: all 0.2s ease; opacity: 0.5; position: relative; } .contact-copy-btn:hover { opacity: 1; color: #FFFFFF; background: rgba(255, 255, 255, 0.1); border-color: rgba(226, 0, 43, 0.4); } /* "Copied!" state — applied via JS */ .contact-card-detail.copied { color: #E2002B; } /* --- Phone card needs relative positioning for tooltip --- */ .contact-card-phone { position: relative; } /* --- Custom tooltips — transparent red border, glassmorphism --- */ .contact-tooltip { position: absolute; top: 50%; left: calc(100% + 16px); transform: translateY(-50%); background: rgba(226, 0, 43, 0); color: #E2002B; font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 4px; border: 1px solid rgba(226, 0, 43, 1); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); z-index: 10; } /* Arrow caret pointing left toward trigger */ .contact-tooltip::before { content: ''; position: absolute; top: 50%; right: 100%; transform: translateY(-50%); border: 6px solid transparent; border-right-color: rgba(226, 0, 43, 1); } /* Show tooltip on hover */ .contact-copy-btn:hover .contact-tooltip, .contact-card-phone:hover .contact-tooltip { opacity: 1; } /* Hide phone tooltip on mobile — tel: link fires instead of copy */ @media (pointer: coarse) { .contact-card-phone .contact-tooltip { display: none; } } /* --- Social media links --- */ .contact-social { display: flex; gap: 20px; padding-top: 24px; } .contact-social-link { color: rgba(255, 255, 255, 0.4); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .contact-social-link:hover { color: var(--color-white); transform: scale(1.15); } .contact-social-link:focus-visible { outline: 2px solid var(--color-red); outline-offset: 4px; } /* --- Mobile: single column stack --- */ @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; } .contact-copy { align-items: center; } .contact-audit-aside { text-align: center; } .contact-social { justify-content: center; } } /* ============================================================ SCROLL-HIJACK — FULL-PAGE SECTION SYSTEM All styles scoped under html.scroll-hijack so they only activate when scroll-manager.js adds the class to . Spec: docs/superpowers/specs/2026-03-27-scroll-hijack-architecture-design.md ============================================================ */ /* --- Base: kill native scroll, fix all sections --- */ html.scroll-hijack, html.scroll-hijack body { overflow: hidden; height: 100vh; } html.scroll-hijack #view-home > section, html.scroll-hijack #view-work > section { position: fixed; inset: 0; width: 100%; height: 100vh; visibility: hidden; z-index: 1; } html.scroll-hijack #view-home > section.section-active, html.scroll-hijack #view-work > section.section-active { visibility: visible; z-index: 10; } html.scroll-hijack #view-home > section.section-transitioning, html.scroll-hijack #view-work > section.section-transitioning { visibility: visible; z-index: 5; } /* Incoming section sits above outgoing during transition */ html.scroll-hijack #view-home > section.section-entering, html.scroll-hijack #view-work > section.section-entering { z-index: 11; } /* ═══════════════════════════════════════════════════════ VIEW CONTAINERS — horizontal axis (home ↔ work) ═══════════════════════════════════════════════════════ */ /* Both views are position:fixed, full viewport, stacked */ .view-container { position: fixed; inset: 0; width: 100%; height: 100vh; z-index: 1; visibility: hidden; pointer-events: none; } /* Active view is visible and interactive */ .view-container.view-active { z-index: 10; visibility: visible; pointer-events: auto; } /* Transitioning view is visible but below active */ .view-container.view-transitioning { visibility: visible; pointer-events: none; z-index: 5; } /* Force all sections hidden when their view container is inactive — prevents section-active children from bleeding through */ .view-container:not(.view-active):not(.view-transitioning) > section { visibility: hidden !important; opacity: 0 !important; } /* Work view dot nav — hidden by default, shown when work is active */ #view-work .scroll-dots { display: none; } #view-work.view-active .scroll-dots, #view-work.view-transitioning .scroll-dots { display: flex; } /* Home view dot nav — hidden when home is inactive */ #view-home:not(.view-active):not(.view-transitioning) .scroll-dots { display: none; } /* ═══════════════════════════════════════════════════════ FLOATING BACK ARROW — work view → home (left edge) ═══════════════════════════════════════════════════════ */ .view-back-arrow { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 10001; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: var(--color-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease; -webkit-tap-highlight-color: transparent; } .view-back-arrow:hover { border-color: rgba(255, 255, 255, 0.5); color: var(--color-white); transform: translateY(-50%) scale(1.08); } @media (max-width: 768px) { .view-back-arrow { width: 44px; height: 44px; left: 16px; } } /* --- Dot Navigation --- */ .scroll-dots { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 24px; z-index: 10000; } /* Pill indicator — positioned absolutely, animated by JS */ .scroll-pill { position: absolute; width: 4px; height: 28px; background: var(--color-red); border-radius: 3px; box-shadow: 0 0 8px rgba(226, 0, 43, 0.35); pointer-events: none; z-index: 2; /* Initial position set by JS on load */ top: 0; left: 50%; transform: translateX(-50%); will-change: transform; } /* Inactive dots — small filled grey circles, no border */ .scroll-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.2); cursor: pointer; padding: 0; transition: background 200ms ease; outline: none; z-index: 1; } /* Expand hit area for easier clicking */ .scroll-dot::before { content: ''; position: absolute; inset: -8px; } .scroll-dot:hover { background: rgba(255, 255, 255, 0.4); } /* Active dot — hidden behind the pill */ .scroll-dot.active { background: transparent; } /* Hover label — naked uppercase text, no background */ .scroll-dot-label { position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(8px); color: rgba(255, 255, 255, 0.6); font-size: 11px; font-family: var(--font-body); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 150ms ease, transform 150ms ease; } .scroll-dot:hover .scroll-dot-label { opacity: 1; transform: translateY(-50%) translateX(0); } /* Hide dots on mobile */ @media (max-width: 767px) { .scroll-dots { display: none; } } /* --- Footer Drawer --- */ .footer-drawer-trigger { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; background: none; border: none; color: rgba(255, 255, 255, 0.4); font-size: 12px; font-family: var(--font-body); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; padding: 8px 16px; z-index: 9999; transition: color 300ms ease; } .footer-drawer-trigger:hover { color: rgba(255, 255, 255, 0.8); } .footer-drawer-trigger .drawer-chevron { display: inline-block; transition: transform 300ms ease; font-size: 14px; } .footer-drawer-trigger.open .drawer-chevron { transform: rotate(180deg); } /* Backdrop */ .footer-drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 9997; opacity: 0; visibility: hidden; transition: opacity 400ms ease; } .footer-drawer-backdrop.visible { opacity: 1; visibility: visible; } /* Drawer panel */ .footer-drawer-panel { position: fixed; bottom: 0; left: 0; right: 0; height: 40vh; background: var(--color-bg); z-index: 9998; transform: translateY(100%); overflow-y: auto; border-top: 1px solid rgba(226, 0, 43, 0.2); } @media (max-width: 767px) { .footer-drawer-panel { height: 70vh; } } /* --- Reduced motion: skip transform animations --- */ @media (prefers-reduced-motion: reduce) { html.scroll-hijack #view-home > section, html.scroll-hijack #view-work > section { transition: opacity 200ms ease !important; } } /* --- Teal corner vignettes --- Canvas-rendered dark teal (#101919) radial gradients at viewport corners. Complementary to Chaos red — adds depth and life to the flat black bg. Sits behind particles (z-index -2) and glow (z-index -1). Rendered on canvas by vignette.js with per-pixel dithering to eliminate banding. */ .bg-teal-vignette { position: fixed; inset: 0; z-index: -3; pointer-events: none; } /* --- Persistent background in scroll-hijack mode --- Canvas and glow become fixed full-viewport elements behind all sections instead of absolute within hero. */ html.scroll-hijack .hero-particle-canvas { position: fixed; inset: 0; z-index: -2; pointer-events: none; } html.scroll-hijack .hero-bg-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* ── Transition System ── */ /* ── VHS Glitch Layers ── */ /* Block displacement container — holds horizontal bands with tracking errors */ .vhs-block-container { position: fixed; inset: 0; z-index: 13; pointer-events: none; overflow: hidden; } /* Individual displacement band — clip-path defines visible region */ .vhs-block-band { position: absolute; inset: 0; will-change: transform; overflow: hidden; } /* RGB channel separation container */ .vhs-rgb-container { position: fixed; inset: 0; z-index: 12; pointer-events: none; overflow: hidden; } /* Individual RGB channel layer */ .vhs-rgb-layer { will-change: transform; overflow: hidden; } /* Red channel — isolate red via CSS filter */ .vhs-rgb-red { filter: saturate(2) hue-rotate(-15deg) brightness(1.1); } /* Cyan channel — isolate blue/green via CSS filter */ .vhs-rgb-cyan { filter: saturate(2) hue-rotate(15deg) brightness(1.1); } /* Scanlines overlay — horizontal repeating lines for CRT/VHS feel */ .vhs-scanlines { position: fixed; inset: 0; z-index: 17; pointer-events: none; opacity: 0; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 2px, rgba(0, 0, 0, 0.15) 2px, rgba(0, 0, 0, 0.15) 4px ); transition: opacity 0.05s; } /* Strip fracture container — holds cloned section strips during exit animation */ .fracture-container { position: fixed; inset: 0; z-index: 14; perspective: 1000px; transform-style: preserve-3d; pointer-events: none; overflow: hidden; } /* Individual fracture strip — clip-path defines visible region */ .fracture-strip { position: absolute; inset: 0; will-change: transform, opacity; } /* RGB split active state — applied to fracture container for 0.1s */ .fracture-container.rgb-split-active { filter: url(#rgb-split); } /* Noise grain overlay — flashed for 0.1s during fracture */ .glitch-noise { position: fixed; inset: 0; z-index: 16; pointer-events: none; opacity: 0; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); background-repeat: repeat; } /* --- Transparent section backgrounds --- All sections become see-through so the persistent hero background (particles + glow) shows through. */ html.scroll-hijack .hero-section, html.scroll-hijack .orbital-reveal-section, html.scroll-hijack .services-section, html.scroll-hijack .testimonials-section, html.scroll-hijack .lead-magnet-section, html.scroll-hijack .enquiry-section { background: transparent !important; } /* Remove background utility classes in scroll-hijack mode */ html.scroll-hijack .bg-card, html.scroll-hijack .bg-alt, html.scroll-hijack .bg-red { background-color: transparent !important; } /* Services background wash — transparent */ html.scroll-hijack .services-bg { background: transparent !important; } /* Hide diagonal and wave transitions between sections — no background colours to bridge anymore. NOTE: .diagonal-bottom is on the section tags themselves, so only hide the ::after pseudo-element, not the section. */ html.scroll-hijack .diagonal-bottom::after, html.scroll-hijack .section-wave, html.scroll-hijack .section-wave-top, html.scroll-hijack .lead-magnet-section .diagonal-bottom { display: none !important; } /* --- Section content spacing — clear the fixed nav --- Nav is ~88px tall. 20px breathing room on all sides. Hero is vertically centred so it doesn't need top padding. Services uses absolute-positioned elements that need pushing down. */ html.scroll-hijack #view-home > section, html.scroll-hijack #view-work > section { padding: 100px 20px 20px 20px; box-sizing: border-box; } /* Hero is flex-centred — padding would shift the centre, so override */ /* Hero is flex-centred — padding would shift the centre, so override */ html.scroll-hijack .hero-section { padding: 0; } /* Testimonials — true vertical centre on all screen sizes */ html.scroll-hijack .testimonials-section { display: flex; align-items: center; justify-content: center; padding-top: 0; } /* Services section — push absolute-positioned top elements below nav */ html.scroll-hijack .services-label { top: 100px; } html.scroll-hijack .services-see-all { top: 100px; left: 20px; } html.scroll-hijack .services-counter { top: 100px; right: 20px; } @media (max-width: 768px) { html.scroll-hijack .services-label { top: 80px; } html.scroll-hijack .services-see-all { top: 80px; left: 20px; } html.scroll-hijack .services-counter { top: 80px; right: 20px; } }