/* ================================================================ THE ARC COLLECTIVE — SITE STYLES Built on the ARC web kit (assets/css/arc.css, loaded first — see index.html ): Archivo / Instrument Sans / Space Mono, and the Ember/Gate/Paper/Charcoal/Ash/Haze palette. This file wires that system onto the site's actual sections and components. It keeps every existing Apple-fluid-interface motion principle (response, interruptibility, spring motion, reduced-motion parity) — only the surface material changes: Paper is now the default ground, Gate (near-black) is reserved for a handful of deliberately cinematic dark sections, and the old blur/glass/ gradient card system is gone in favour of the kit's flatter eyebrow / framed-still / statement / point vocabulary. Contents: 1. Tokens (aliases onto arc-tokens.css + site-specific additions) 2. Reset & base 3. Typography scale 4. Layout utilities 5. Motion primitives (fade-up, reveal) 6. Buttons, badges, social icons 7. Nav (desktop + mobile) 8. Sticky CTA 9. Hero 10. Marquee 11. Second door 12. About + Why Arc 13. Work / portfolio carousel 14. Case study 15. Process 16. Architech teaser + before/after slider 17. Contact 18. Footer 19. Reel trigger + lightbox 20. Legal panel 21. Loader 22. Film grain 23. Responsive 24. Reduced motion / transparency / contrast ================================================================ */ /* ============================================================ 1. TOKENS arc-tokens.css (loaded via arc.css, before this file) already defines every --arc-* value. This block aliases the site's existing custom-property names onto them — Ember and Paper are literally unchanged hex values, so most of the file below needed no per-rule edits at all; Ink/ink-mid/ink-soft now mean "Gate and its two elevated steps", used only by the sections that stay dark. A parallel on-light ramp is added for the sections that are now Paper by default. ============================================================ */ :root { /* Brand */ --ember: var(--arc-ember); --ember-dark: var(--arc-ember-deep); --ember-light: var(--arc-ember-lift); /* Dark-ground surfaces — Gate and two elevated steps above it, used only inside the sections that stay cinematic (hero, marquee, case study, architech teaser, footer, reel lightbox, mobile nav). */ --ink: var(--arc-gate); --ink-deep: #0B0B0D; --ink-mid: #1E1E21; --ink-soft: var(--arc-haze); --paper: var(--arc-paper); --accent-gold: #C8A96E; --accent-red: #E05C5C; /* Text-on-Gate opacity ramp — unchanged from before, used only inside Gate-scoped sections below. */ --paper-95: rgba(242,242,244,.95); --paper-85: rgba(242,242,244,.85); --paper-72: rgba(242,242,244,.72); --paper-60: rgba(242,242,244,.60); --paper-55: rgba(242,242,244,.55); --paper-45: rgba(242,242,244,.45); --paper-30: rgba(242,242,244,.30); --paper-18: rgba(242,242,244,.18); --paper-10: rgba(242,242,244,.10); --paper-06: rgba(242,242,244,.06); /* Text-on-Paper opacity ramp — new. Most of the site is Paper by default now, so this is the ramp in play most often. */ --ink-95: rgba(20,20,22,.95); --ink-85: rgba(20,20,22,.85); --ink-72: rgba(20,20,22,.72); --ink-60: rgba(20,20,22,.60); --ink-55: rgba(20,20,22,.55); --ink-45: rgba(20,20,22,.45); --ink-30: rgba(20,20,22,.30); --ink-18: rgba(20,20,22,.18); --ink-10: rgba(20,20,22,.10); --ink-06: rgba(20,20,22,.06); /* Secondary text that must flip with its ground. Defaults to the Paper value; every Gate-scoped block below re-points it. */ --text-muted: var(--ink-72); --ember-08: rgba(209,74,42,.08); --ember-15: rgba(209,74,42,.15); --ember-25: rgba(209,74,42,.25); /* Fonts — straight aliases onto the kit; every existing font-family: var(--font-display)/var(--font-body) call site below picks up Archivo / Instrument Sans automatically. */ --font-display: var(--arc-font-display); font-weight: 800; --font-body: 'Noah', var(--arc-font-body); /* was Instrument Sans */ --font-mono: 'Noah', var(--arc-font-mono); /* was Space Mono */ --font-nav: 'Noah', system-ui, sans-serif; /* nav + primary CTAs */ /* Spacing scale — unchanged */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --space-2xl: 96px; --space-3xl: 140px; /* Radius scale — the kit's framed-still uses a tighter 12px; everything structural here stays close to that rather than the old glass-card's heavy rounding. */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 999px; /* Elevation — the kit's own rule is "no drop shadows" on cards; kept minimal, used only where a floating overlay genuinely needs to separate from a scrim (modals), never as card styling. */ --shadow-sm: 0 2px 10px rgba(0,0,0,.18); --shadow-md: 0 16px 40px rgba(0,0,0,.22); --shadow-lg: 0 30px 80px rgba(0,0,0,.32); --ease-standard: var(--arc-ease); --ease-spring-ish: cubic-bezier(.22,1,.36,1); --dur-fast: .18s; --dur-med: .3s; --dur-slow: .45s; --max-w: 1320px; --pad: clamp(24px, 5vw, 80px); --nav-h: 96px; /* em colour — flips inside Gate sections below, so a phrase set in always clears the 4.5:1 floor for its ground: Ember Deep on Paper, Ember Lift on Gate. Never plain Ember on body copy, per the kit's one rule. */ --em-color: var(--arc-link); } /* ============================================================ 2. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: var(--nav-h); overflow-x: hidden; } body { background: var(--arc-paper); color: var(--arc-charcoal); font-family: var(--font-body); font-weight: 400; line-height: 1.6; overflow-x: hidden; cursor: default; } body.loading { overflow: hidden; } ::selection { background: var(--ember); color: var(--arc-gate); } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { border: none; background: none; cursor: pointer; font-family: inherit; color: inherit; } /* Visible keyboard focus everywhere — Apple's "agency" + a11y baseline */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: var(--radius-xs); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .icon-sprite { display: none; } .icon { display: inline-block; flex-shrink: 0; } /* Skip link */ .skip-link { position: fixed; top: -60px; left: 16px; z-index: 10000; background: var(--ember); color: var(--arc-gate); padding: 12px 20px; border-radius: var(--radius-xs); font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; transition: top .2s var(--ease-standard); } .skip-link:focus { top: 16px; } /* ============================================================ 3. TYPOGRAPHY SCALE Archivo is a variable font — width (font-stretch) is set alongside weight at every display level, per the kit. Lowercase display copy stays: it's a deliberate, long-standing ARC voice (the wordmark itself is lowercase "arc"), independent of the typeface swap. ============================================================ */ .t-display { font-family: var(--font-display); font-weight: 800; text-transform: lowercase; line-height: 0.95; letter-spacing: -0.03em; font-stretch: 118%; font-optical-sizing: auto; } .t-h1 { font-size: clamp(56px, 9vw, 148px); letter-spacing: -0.035em; font-stretch: 125%; line-height: .92; } .t-h2 { font-size: clamp(40px, 6.5vw, 96px); letter-spacing: -0.03em; font-stretch: 122%; } .t-h3 { font-size: clamp(30px, 4.5vw, 60px); letter-spacing: -0.02em; font-stretch: 115%; } .t-h4 { font-size: clamp(22px, 3vw, 40px); letter-spacing: -0.015em; font-stretch: 110%; } .t-label { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--arc-link); } .t-label::before { content: ''; width: 26px; height: 2px; background: var(--ember); flex: none; } .t-body { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.7; font-weight: 400; letter-spacing: 0; } .t-small { font-size: 14px; letter-spacing: 0.02em; } em { font-style: normal; color: var(--em-color); font-weight: 600; } /* ============================================================ 4. LAYOUT UTILITIES ============================================================ */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); } .section { padding: clamp(120px, 13vw, 200px) 0 clamp(90px, 10vw, 160px); position: relative; overflow: hidden; } .section--dark { background: var(--ink); } .section--mid { background: var(--ink-mid); } /* The arc — ARC's decorative device from the web kit: a large, low-opacity Ember curve bleeding off the corner of a dark section. Pure decoration; turned off under reduced transparency. */ /* Dropped from #hero: the reel carries its own centred arc mark, and the video plate is meant to read completely uncovered. */ .hero-intro::after, .architech-teaser::after, footer::after { content: ''; position: absolute; z-index: 0; pointer-events: none; right: -8%; bottom: -20%; width: 52%; aspect-ratio: 2 / 1; opacity: .13; border: 26px solid var(--ember); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; } .hero-intro, .architech-teaser, footer { position: relative; overflow: hidden; } .hero-intro .hero-content, .architech-teaser-inner, .footer-top, .footer-bottom { position: relative; z-index: 1; } .section > .container { position: relative; z-index: 1; } /* Framed still — the kit's signature: a rounded corner, ember keyline, wrapped around a photo or video. Replaces the old glass-card treatment on the work grid; no blur, no shadow. */ .arc-frame { border-radius: var(--arc-radius); border: var(--arc-keyline) solid var(--ember); overflow: hidden; } /* A flat, rule-divided block — the kit's alternative to a card: used for Why Arc's pillars and Process's steps. No background, no blur, no shadow — just a hairline top rule and honest padding. */ .arc-flat { border-top: 1px solid var(--ink-18); padding-top: var(--space-lg); transition: border-color .3s var(--ease-standard); } .arc-flat:hover { border-color: var(--ember); } /* Kept for compatibility: any element still carrying .glass-card in markup gets the flat treatment above, not the old blur/tint. */ .glass-card { border-top: 1px solid var(--ink-18); padding-top: var(--space-lg); transition: border-color .3s var(--ease-standard); } .glass-card:hover { border-color: var(--ember); } /* ============================================================ 5. MOTION PRIMITIVES ============================================================ */ .fade-up { opacity: 1; transform: none; } html.js-anim .fade-up { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease-standard), transform .6s var(--ease-standard); } html.js-anim .fade-up.visible { opacity: 1; transform: translateY(0); } /* ============================================================ 6. BUTTONS, BADGES, SOCIAL ICONS Ember-filled buttons carry Gate text, not white — white on Ember measures 4.0:1 and fails the kit's accessibility floor. ============================================================ */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 32px; background: var(--ember); color: var(--arc-gate); font-family: var(--font-nav); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--ember); border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .btn-primary:hover { background: var(--ember-dark); color: var(--paper); border-color: var(--ember-dark); } .btn-primary:active { transform: scale(.97); transition-duration: .08s; } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); transition: color var(--dur-fast) var(--ease-standard), transform .08s; } .btn-ghost:hover { color: var(--em-color); } .btn-ghost:active { transform: scale(.97); } .btn-ghost::after { content: '↗'; font-size: 16px; transition: transform var(--dur-med) var(--ease-standard); } .btn-ghost:hover::after { transform: translate(2px,-2px); } .link-underline { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); border-bottom: 1px solid var(--paper-18); padding-bottom: 4px; transition: border-color var(--dur-fast), color var(--dur-fast), transform .08s; } .link-underline:hover { color: var(--ember); border-color: var(--ember); } .link-underline:active { transform: scale(.98); } .link-underline::after { content: '↗'; font-size: 16px; } .social-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); border: 1px solid var(--paper-30); color: var(--paper); transition: all .22s var(--ease-standard); } .social-btn:hover { border-color: var(--ember); color: var(--ember); background: var(--ember-08); } .social-btn:active { transform: scale(.92); } .social-btn--nav { width: 36px; height: 36px; } #nav.scrolled .social-btn--nav { border-color: var(--ink-18); color: var(--arc-charcoal); } .social-btn--nav:hover, #nav.scrolled .social-btn--nav:hover { border-color: var(--ember); color: var(--ember); } .social-btn--hero { width: 38px; height: 38px; } .social-btn--contact { width: 40px; height: 40px; border-color: var(--ink-18); color: var(--arc-charcoal); } .social-btn--contact:hover { border-color: var(--ember); color: var(--ember); } .social-btn--footer { width: 40px; height: 40px; color: var(--paper); } .social-btn--mobile { width: 38px; height: 38px; } .social-btn--cs { width: 40px; height: 40px; } .social-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); } /* ============================================================ 7. NAV Transparent with Paper-coloured text over the dark hero; once scrolled past it, a solid Paper bar with Charcoal text and a hairline rule — no blur, no gradient. ============================================================ */ #nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 22px var(--pad); display: flex; align-items: center; justify-content: space-between; background: transparent; border-bottom: 1px solid transparent; transition: background .4s var(--ease-standard), border-color .4s var(--ease-standard), padding .4s var(--ease-standard); } #nav.scrolled { background: var(--arc-paper); border-bottom: 1px solid var(--ink-10); padding: 16px var(--pad); } .nav-logo img { height: 64px; width: auto; transition: height .3s var(--ease-standard); } #nav.scrolled .nav-logo img { height: 52px; } .nav-links { display: flex; gap: 32px; list-style: none; } .nav-links a { font-family: var(--font-nav); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); transition: color .2s, opacity .2s; } #nav.scrolled .nav-links a { color: var(--ink-72); } .nav-links a:hover { color: var(--ember); } .nav-links a.nav-architech { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: 16px; letter-spacing: 0; text-transform: lowercase; color: var(--paper); } #nav.scrolled .nav-links a.nav-architech { color: var(--arc-charcoal); } .nav-links a.nav-architech .arc { color: var(--arc-link); } .nav-links a.nav-architech:hover { color: var(--ember-dark); } .nav-cta { font-family: var(--font-nav); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; display: inline-flex; align-items: center; min-height: 40px; padding: 0 24px; background: var(--ember); color: var(--arc-gate); border-radius: var(--radius-sm); transition: background .2s, transform .08s; } .nav-cta:hover { background: var(--ember-dark); color: var(--paper); } .nav-cta:active { transform: scale(.96); } .nav-social { display: flex; align-items: center; gap: 10px; } @media (max-width: 860px) { .nav-social { display: none; } } /* Hamburger — Paper lines over the dark hero, Charcoal once the nav bar itself has gone solid Paper. */ .nav-burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; cursor: pointer; z-index: 110; } .nav-burger span { width: 28px; height: 2px; background: var(--paper); border-radius: 1px; transition: transform .3s var(--ease-standard), opacity .3s var(--ease-standard), background .3s; } #nav.scrolled .nav-burger span { background: var(--arc-charcoal); } .nav-burger.open span { background: var(--paper); } .nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile menu — a solid Gate sheet (a cinematic full-screen moment, not a translucent panel), driven by site.js springs. */ .nav-mobile { position: fixed; inset: 0; background: var(--ink); color: var(--paper); z-index: 99; display: none; flex-direction: column; justify-content: center; align-items: center; gap: clamp(6px, 1.8vh, 18px); padding: 72px 40px 24px; --arc-link: var(--arc-link-on-dark); --text-muted: var(--paper-72); --em-color: var(--arc-ember-lift); } .nav-mobile a { font-family: var(--font-display); font-weight: 800; font-stretch: 115%; font-size: clamp(18px, 4.5vh, 32px); text-transform: lowercase; color: var(--paper); transition: color .2s; line-height: 1; } .nav-mobile a:hover { color: var(--ember); } .nav-mobile .mobile-cta { margin-top: clamp(4px, 1vh, 12px); display: inline-flex; align-items: center; min-height: 44px; padding: 0 30px; background: var(--ember); color: var(--arc-gate); border-radius: var(--radius-sm); font-family: var(--font-nav); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: clamp(12px, 1.7vh, 14px); } .mobile-social { display: flex; align-items: center; gap: 12px; margin-top: clamp(4px, 1vh, 10px); } /* ============================================================ 8. STICKY CTA ============================================================ */ #sticky-cta { position: fixed; bottom: 32px; right: 32px; z-index: 90; opacity: 0; transform: translateY(10px) scale(.95); pointer-events: none; transition: opacity .35s var(--ease-standard), transform .35s var(--ease-standard); } #sticky-cta.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } #sticky-cta a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; background: var(--ember); color: var(--arc-gate); border-radius: var(--radius-sm); font-family: var(--font-nav); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: var(--shadow-md); transition: transform .2s, background .2s, color .2s; } #sticky-cta a:hover { background: var(--ember-dark); color: var(--paper); transform: translateY(-2px); } #sticky-cta a:active { transform: translateY(0) scale(.96); } #sticky-cta a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--arc-gate); animation: pulse 2s infinite; } @keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(1.4); } } /* ============================================================ 9. HERO Gate ground, video plate — exactly the job the kit's Gate colour is defined for. ============================================================ */ /* #hero is now the video plate alone. The copy that used to sit under it lives in .hero-intro, below the marquee, so nothing crowds the video. */ #hero { position: relative; background: var(--ink); color: var(--paper); } .hero-intro { background: var(--ink); color: var(--paper); --arc-link: var(--arc-link-on-dark); --text-muted: var(--paper-72); --em-color: var(--arc-ember-lift); } /* Clipping frame for the video. Sized by aspect rather than viewport height so the reel is seen close to as shot; capped so it can't eat a short screen. */ .hero-media { position: relative; overflow: hidden; width: 100%; /* 56.25vw is exactly 16:9 of the viewport width, so the whole frame is shown with no crop. Desktop displays are themselves ~16:9, so this lands at or just under viewport height on virtually every standard screen. The svh cap only bites on ultrawide (21:9) or unusually short windows. */ height: min(56.25vw, 100svh); min-height: 320px; } .hero-bg { position: absolute; inset: -6% -6%; background: url('../arc-hero.jpg') center center / cover no-repeat; will-change: transform; } /* Light vignette only — the heavy bottom scrim existed to keep overlaid text readable, and there is no longer any text over the video. */ .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,8,8,.22) 0%, rgba(8,8,8,0) 26%, rgba(8,8,8,0) 74%, rgba(8,8,8,.55) 100%); } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; will-change: transform; } .hero-content { position: relative; z-index: 2; padding: clamp(52px, 7vh, 88px) var(--pad) clamp(56px, 7vh, 92px); max-width: var(--max-w); width: 100%; margin: 0 auto; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: clamp(20px, 2.6vh, 30px); } .hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px var(--ember-25); flex-shrink: 0; } /* Headline left, supporting copy and actions right — keeps the block compact now that it has to share the fold with the video. */ .hero-lower { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: end; } .hero-headline { font-family: var(--font-display); font-weight: 800; font-stretch: 125%; font-size: clamp(34px, 4.4vw, 66px); text-transform: lowercase; line-height: .95; letter-spacing: -0.035em; margin: 0; } .hero-lower-right { padding-bottom: 6px; } .hero-sub { font-size: clamp(16px, 1.5vw, 19px); font-weight: 400; color: var(--paper-72); max-width: 460px; margin-bottom: 26px; line-height: 1.6; } .hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .hero-social { display: flex; align-items: center; gap: 14px; margin-top: 22px; } @media (max-width: 900px) { .hero-lower { grid-template-columns: 1fr; align-items: start; gap: 24px; } .hero-lower-right { padding-bottom: 0; } .hero-sub { max-width: 560px; } } /* ============================================================ 10. MARQUEE Continuation of the hero's cinematic open — stays on Gate. ============================================================ */ .marquee-wrap { overflow: hidden; border-top: 1px solid var(--paper-10); border-bottom: 1px solid var(--paper-10); padding: clamp(20px, 3vw, 40px) 0; background: var(--ink); position: relative; --arc-link: var(--arc-link-on-dark); --text-muted: var(--paper-72); --em-color: var(--arc-ember-lift); } .marquee-track { display: flex; align-items: baseline; white-space: nowrap; animation: marquee 18s linear infinite; } .marquee-track span { font-family: var(--font-display); font-weight: 800; font-stretch: 118%; font-size: clamp(24px, 4.2vw, 60px); letter-spacing: -0.015em; text-transform: lowercase; padding: 0 clamp(20px, 2.6vw, 44px); color: transparent; -webkit-text-stroke: 1.5px var(--paper-30); text-stroke: 1.5px var(--paper-30); } .marquee-track span.accent { color: var(--ember); -webkit-text-stroke: 0; text-stroke: 0; font-family: var(--font-mono); font-weight: 700; font-size: clamp(12px, 1.2vw, 14px); letter-spacing: 0.2em; text-transform: uppercase; padding: 0 clamp(16px, 2vw, 32px); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 768px) { .marquee-track span { -webkit-text-stroke: 1px var(--paper-30); } } /* ============================================================ 11. SECOND DOOR First Paper section — a short, quiet aside. ============================================================ */ .second-door { padding: clamp(48px, 6vw, 72px) 0; background: var(--arc-paper); border-bottom: 1px solid var(--ink-10); } .second-door-text { max-width: 720px; margin: 0 auto; text-align: center; font-family: var(--font-body); font-weight: 400; font-size: clamp(18px, 2.1vw, 24px); line-height: 1.6; color: var(--ink-72); } .second-door-text em { font-style: normal; color: var(--arc-link); font-weight: 600; } .second-door-tags { margin: 22px auto 0; max-width: 640px; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); } /* ============================================================ 12. ABOUT + WHY ARC (merged) Paper. ============================================================ */ #about-preview { background: var(--arc-paper); } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(60px, 7vw, 100px); align-items: center; } .about-left .t-label { margin-bottom: 20px; } .about-headline { font-family: var(--font-display); font-weight: 800; font-stretch: 118%; font-size: clamp(36px, 5vw, 64px); text-transform: lowercase; line-height: 1; letter-spacing: -0.02em; margin-bottom: 24px; color: var(--arc-charcoal); } .about-right p { color: var(--ink-72); margin-bottom: 20px; } .about-right .link-underline { margin-top: 12px; color: var(--arc-link); border-color: var(--ink-18); } .about-right .link-underline:hover { color: var(--ember); border-color: var(--ember); } .why-ghost { position: absolute; z-index: 0; pointer-events: none; user-select: none; top: 46%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 800; font-stretch: 125%; font-size: clamp(220px, 34vw, 640px); line-height: 1; text-transform: lowercase; color: var(--arc-charcoal); opacity: .04; white-space: nowrap; } .why-top { margin-bottom: clamp(64px, 8vw, 100px); max-width: 720px; } .why-top--merged { margin-top: clamp(64px, 8vw, 100px); } .why-top .t-label { margin-bottom: 20px; } .why-headline { font-family: var(--font-display); font-weight: 800; font-stretch: 100%; font-size: clamp(32px, 4.4vw, 56px); text-transform: lowercase; line-height: 1.08; letter-spacing: -0.015em; max-width: 800px; margin-bottom: 24px; color: var(--arc-charcoal); } .why-body { color: var(--ink-60); max-width: 580px; font-size: 19px; line-height: 1.7; } .why-pillars { /* Three co-equal claims, so three equal columns — matching the Process rhythm below. The old 1.15fr/1fr split promoted pillar 01 without earning it and left a gap underneath. */ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .why-pillar { padding: clamp(28px, 3vw, 36px) 0 0; border-top: 1px solid var(--ink-18); } .why-pillar-num { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; color: var(--arc-link); margin-bottom: 18px; } .why-pillar-title { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: clamp(19px, 1.7vw, 23px); text-transform: lowercase; letter-spacing: -0.01em; margin-bottom: 14px; color: var(--arc-charcoal); } .why-pillar p { color: var(--ink-60); font-size: 17px; line-height: 1.75; } @media (max-width: 1024px) { .why-pillars { grid-template-columns: 1fr; } } /* ============================================================ 13. WORK / PORTFOLIO Paper section ground; each item stays a framed, dark photo plate (a small "video plate" in its own right) — the ember keyline is what now marks it as an ARC piece, not a glass tint. ============================================================ */ #work { background: var(--arc-paper); } .work-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; gap: 16px; flex-wrap: wrap; } .work-header-sub { margin-top: 12px; font-family: var(--font-body); font-size: 16px; color: var(--ink-72); letter-spacing: 0.01em; max-width: 460px; } .work-header .link-underline { color: var(--arc-link); border-color: var(--ink-18); } .work-header .link-underline:hover { color: var(--ember); border-color: var(--ember); } .swipe-hint { display: none; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-30); margin-bottom: 16px; } .swipe-hint-arrow { display: flex; gap: 3px; align-items: center; } .swipe-hint-arrow span { display: block; width: 18px; height: 1px; background: var(--ink-30); animation: swipeArrow 1.6s ease-in-out infinite; } .swipe-hint-arrow span:nth-child(2) { animation-delay: .2s; } .swipe-hint-arrow span:nth-child(3) { animation-delay: .4s; } @keyframes swipeArrow { 0%,100% { transform: translateX(0); opacity: .3; } 50% { transform: translateX(5px); opacity: .7; } } @media (hover: none) { .swipe-hint { display: flex; } } .work-cursor { position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none; width: 84px; height: 84px; border-radius: 50%; background: var(--ember); color: var(--arc-gate); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; box-shadow: var(--shadow-md); transition: opacity .25s ease; will-change: transform, opacity; } .work-cursor.show { opacity: 1; } @media (hover: hover) and (pointer: fine) { .work-item { cursor: none; } } .work-carousel-outer { position: relative; transform: translateZ(0); } .work-grid { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; will-change: scroll-position; transform: translateZ(0); padding-bottom: 4px; } .work-grid::-webkit-scrollbar { display: none; } .work-item { position: relative; overflow: hidden; cursor: pointer; background: var(--ink-mid); display: block; text-decoration: none; color: var(--paper); flex: 0 0 290px; width: 290px; height: 387px; scroll-snap-align: start; transform: translateZ(0); border-radius: var(--arc-radius); border: var(--arc-keyline) solid var(--ember); } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--arc-paper); border: 1px solid var(--ink-18); color: var(--arc-charcoal); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s, color .2s, opacity .25s, transform .08s; z-index: 10; padding: 0; box-shadow: var(--shadow-sm); } .carousel-btn:hover { background: var(--ember); border-color: transparent; color: var(--arc-gate); } .carousel-btn:active { transform: translateY(-50%) scale(.9); } .carousel-btn.disabled { opacity: .18; pointer-events: none; } .carousel-btn-prev { left: 8px; } .carousel-btn-next { right: 8px; } .work-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-standard); filter: brightness(.68) saturate(.88); } .work-item:hover img, .work-item.revealed img { transform: scale(1.06); filter: brightness(.82) saturate(1.05); } .work-item-platform { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 5px; background: rgba(20,20,22,.72); border-radius: var(--radius-xs); padding: 5px 10px; font-size: 9px; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-95); opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; z-index: 3; pointer-events: none; } .work-item-platform.yt { border-left: 2px solid #FF4444; } .work-item-platform.ig { border-left: 2px solid #E1306C; } .work-item-platform.tt { border-left: 2px solid #69C9D0; } .work-item-platform.yt .icon { color: #FF4444; } .work-item-platform.ig .icon { color: #E1306C; } .work-item-platform.tt .icon { color: #69C9D0; } .work-item:hover .work-item-platform, .work-item.revealed .work-item-platform { opacity: 1; transform: translateY(0); } .work-item-award { position: absolute; top: 14px; left: 14px; z-index: 3; background: var(--ember); color: var(--arc-gate); border-radius: var(--radius-xs); padding: 5px 10px; font-size: 9px; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .work-item-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 72px 20px 20px; background: linear-gradient(transparent, rgba(10,10,11,.95)); z-index: 2; } .work-item-title { font-family: var(--font-body); font-weight: 600; font-size: 15px; margin-bottom: 4px; line-height: 1.3; } .work-item-cat { font-size: 10px; letter-spacing: 0.16em; color: var(--ember-light); text-transform: uppercase; font-family: var(--font-mono); font-weight: 700; } .work-item-desc { font-size: 13px; line-height: 1.6; color: var(--paper-72); font-family: var(--font-body); font-weight: 400; margin: 10px 0 12px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s var(--ease-standard), opacity .3s; } .work-item:hover .work-item-desc, .work-item.revealed .work-item-desc { max-height: 120px; opacity: 1; } .work-item-stats { display: flex; align-items: center; gap: 14px; margin: 8px 0 10px; opacity: 0; transform: translateY(4px); transition: opacity .3s .04s, transform .3s .04s; } .work-item:hover .work-item-stats, .work-item.revealed .work-item-stats { opacity: 1; transform: translateY(0); } .work-stat { display: flex; align-items: center; gap: 4px; font-size: 10px; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.04em; color: var(--paper-72); } .work-item-watch { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember-light); opacity: 0; transform: translateY(5px); transition: opacity .3s .12s, transform .3s .12s; } .work-item:hover .work-item-watch, .work-item.revealed .work-item-watch { opacity: 1; transform: translateY(0); } @media (max-width: 768px) { .work-item { flex: 0 0 220px; width: 220px; height: 293px; } } .work-group-header { margin-top: 72px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 6px; max-width: 560px; } .work-group-header:first-of-type { margin-top: 0; } .work-group-label { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--arc-link); } .work-group-desc { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--ink-72); letter-spacing: 0.01em; } /* A fluid two-up grid rather than fixed 520px cards, so rows fill the container instead of leaving a dead margin on the right. A card with no partner spans the full width and reads as a deliberate feature, rather than sitting next to a hole. */ .work-feature-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .work-item.work-item--feature { width: 100%; max-width: none; height: 420px; } .work-feature-row > .work-item--feature:nth-child(odd):last-child { grid-column: 1 / -1; } .work-feature-row > .work-item--feature:only-child { height: 520px; } @media (max-width: 768px) { .work-feature-row { grid-template-columns: 1fr; } .work-item.work-item--feature, .work-feature-row > .work-item--feature:only-child { height: 320px; } } .work-empty-state { padding: 40px 32px; text-align: center; font-family: var(--font-body); font-size: 14px; letter-spacing: 0.02em; color: var(--ink-45); } /* ============================================================ 14. CASE STUDY Gate — a full-bleed video plate, exactly what the colour is for. Stat badges become plain points; the recontextualising line becomes a statement. ============================================================ */ #case-study.case-study-cinematic { padding: 0; overflow: hidden; position: relative; min-height: 96vh; display: flex; align-items: flex-end; background: var(--ink); color: var(--paper); --arc-link: var(--arc-link-on-dark); --text-muted: var(--paper-72); --em-color: var(--arc-ember-lift); } .cs-bg { position: absolute; inset: 0; z-index: 0; } .cs-bg video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.58) contrast(1.08) saturate(.92); } .cs-bg-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,.12) 0%, rgba(10,10,11,.32) 45%, rgba(10,10,11,.96) 100%), linear-gradient(90deg, rgba(10,10,11,.84) 0%, rgba(10,10,11,.38) 48%, rgba(10,10,11,.06) 78%); } .case-study-cinematic .container { position: relative; z-index: 1; width: 100%; padding-top: clamp(140px, 15vw, 220px); padding-bottom: clamp(90px, 9vw, 140px); } .cs-content { max-width: 640px; } .cs-content .t-label { margin-bottom: 20px; } .cs-image-badge { position: absolute; z-index: 1; right: var(--pad); bottom: clamp(90px, 9vw, 140px); width: min(300px, 32vw); background: rgba(10,10,11,.6); border: 1px solid var(--paper-10); border-radius: var(--radius-md); padding: 20px; display: grid; grid-template-columns: 1fr; gap: 14px; } .badge-item { display: flex; align-items: center; justify-content: space-between; text-align: left; padding-bottom: 12px; border-bottom: 1px solid var(--paper-06); } .badge-item:last-child { border-bottom: none; padding-bottom: 0; } .badge-item-label { font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-72); margin-bottom: 0; } .badge-item-value { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--paper); } .cs-headline { font-family: var(--font-display); font-weight: 800; font-stretch: 118%; font-size: clamp(44px, 6vw, 92px); text-transform: lowercase; line-height: .96; letter-spacing: -0.025em; margin-bottom: 28px; } .cs-body { color: var(--paper-72); margin-bottom: 32px; } .cs-recontext { font-family: var(--font-display); font-weight: 800; font-stretch: 100%; font-size: clamp(18px, 2vw, 24px); line-height: 1.25; letter-spacing: -0.01em; color: var(--paper); margin: -6px 0 28px; text-transform: lowercase; } .awards-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; } .award-item { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: transparent; border: 1px solid var(--ember-25); border-radius: var(--radius-sm); } .award-icon { color: var(--ember); font-size: 16px; } .award-text { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-95); } .award-year { margin-left: 6px; font-size: 11px; font-family: var(--font-mono); font-weight: 700; color: var(--paper-72); } .cs-social-links { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; } .cs-social-label { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-72); margin-right: 4px; } @media (max-width: 900px) { .case-study-cinematic { min-height: auto; padding-bottom: 0; } .cs-bg-scrim { background: linear-gradient(180deg, rgba(10,10,11,.4) 0%, rgba(10,10,11,.6) 40%, rgba(10,10,11,.98) 100%); } .cs-image-badge { position: static; width: 100%; margin-top: 32px; grid-template-columns: repeat(3, 1fr); } .badge-item { flex-direction: column; align-items: flex-start; gap: 4px; border-bottom: none; padding-bottom: 0; } } /* ============================================================ 15. PROCESS Paper. Steps drop the card treatment for a flat, rule-topped, Space-Mono-numbered list — matches the kit's "no cards" rule directly. ============================================================ */ #process { background: var(--arc-paper); } .process-header { text-align: center; margin-bottom: clamp(64px, 8vw, 96px); } .process-header .t-label { margin-bottom: 16px; justify-content: center; } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); position: relative; } .process-step { padding: 0; position: relative; z-index: 1; } .step-num { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; color: var(--arc-link); line-height: 1; margin-bottom: 18px; } .step-dot { display: none; } .step-title { font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 21px; text-transform: lowercase; letter-spacing: -0.01em; margin-bottom: 12px; color: var(--arc-charcoal); } .step-body { color: var(--ink-60); font-size: 16px; line-height: 1.75; } .process-reassurance { text-align: center; color: var(--ink-72); font-size: 15px; max-width: 520px; margin: clamp(40px, 5vw, 56px) auto 0; } /* ============================================================ 16. ARCHITECH TEASER + BEFORE/AFTER SLIDER Gate — dark, cinematic, video-heavy. ============================================================ */ .architech-teaser { background: var(--ink); color: var(--paper); border-top: 1px solid var(--paper-06); border-bottom: 1px solid var(--paper-06); --arc-link: var(--arc-link-on-dark); --text-muted: var(--paper-72); --em-color: var(--arc-ember-lift); } .architech-teaser-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 6vw, 80px); } .architech-teaser-wordmark { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); font-weight: 800; font-stretch: 118%; text-transform: lowercase; color: var(--paper); line-height: 1; margin-bottom: 20px; } .at-slider { position: relative; width: 100%; overflow: hidden; border-radius: var(--arc-radius); cursor: ew-resize; user-select: none; -webkit-user-select: none; background: var(--ink-mid); touch-action: pan-y; border: var(--arc-keyline) solid var(--ember); } .at-before-img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; } .at-after-wrap { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); will-change: clip-path; } .at-after-wrap img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; } .at-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--ember); transform: translateX(-50%); z-index: 4; pointer-events: none; will-change: left; } .at-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); width: 44px; height: 44px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); color: var(--arc-gate); cursor: ew-resize; transition: transform .18s var(--ease-standard), box-shadow .18s var(--ease-standard); } .at-slider.dragging .at-handle { transform: translate(-50%, -50%) scale(1.12); } .at-badge { position: absolute; top: 12px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-sm); z-index: 5; pointer-events: none; } .at-badge--before { right: 12px; background: rgba(10,10,11,.7); color: var(--paper-72); } .at-badge--after { left: 12px; background: var(--ember); color: var(--arc-gate); } @media (max-width: 768px) { .architech-teaser-inner { grid-template-columns: 1fr; gap: 32px; } } /* ============================================================ 17. CONTACT Paper — flat bordered inputs, no glass fill. ============================================================ */ #contact { background: var(--arc-paper); } .contact-header { text-align: center; max-width: 780px; margin: 0 auto; } .contact-header .t-label { margin-bottom: 20px; justify-content: center; } .contact-headline { font-family: var(--font-display); font-weight: 800; font-stretch: 122%; font-size: clamp(44px, 6.4vw, 96px); text-transform: lowercase; line-height: .96; letter-spacing: -0.03em; margin-bottom: 24px; color: var(--arc-charcoal); } .contact-body { color: var(--ink-60); margin: 0 auto 40px; max-width: 520px; } .contact-meta-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 28px; margin: 0 auto clamp(56px, 6vw, 84px); text-align: center; padding: 20px 28px; background: var(--arc-ember-wash); border-left: 3px solid var(--ember); max-width: fit-content; } .contact-detail { display: flex; align-items: center; gap: 12px; color: var(--arc-ember-deep); font-size: 15px; font-weight: 500; } .contact-detail a:hover { color: var(--ember); } .contact-social { display: flex; align-items: center; gap: 12px; } .contact-form-card { max-width: 760px; margin: 0 auto; padding: 0; } .contact-form { display: flex; flex-direction: column; gap: 20px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-field { display: flex; flex-direction: column; gap: 8px; } .form-field label { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-72); } .form-field input, .form-field textarea { background: var(--arc-paper); border: 1px solid var(--ink-18); border-radius: var(--radius-xs); padding: 14px 18px; color: var(--arc-charcoal); font-family: var(--font-body); font-size: 16px; font-weight: 400; outline: none; transition: border-color .2s; resize: vertical; } .form-field input:focus, .form-field textarea:focus { border-color: var(--ember); } .form-field textarea { min-height: 120px; } .form-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 32px; background: var(--ember); color: var(--arc-gate); font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid var(--ember); border-radius: var(--radius-sm); cursor: pointer; transition: background .2s, color .2s, transform .08s; align-self: flex-start; } .form-submit:hover { background: var(--ember-dark); color: var(--paper); } .form-submit:active { transform: scale(.97); } .form-submit:disabled { opacity: .6; cursor: default; } .form-note { font-size: 14px; color: var(--ink-72); margin-top: -8px; } .form-status { margin-top: 4px; padding: 16px 20px; border-radius: var(--radius-xs); font-family: var(--font-body); font-size: 15px; color: var(--arc-charcoal); letter-spacing: 0.02em; background: var(--ink-06); display: none; } .form-status[data-state="success"] { border-left: 3px solid var(--ember); } .form-status[data-state="error"] { border-left: 3px solid var(--accent-red); } .form-status.show { display: block; } /* ============================================================ 18. FOOTER Gate — the traditional dark ground the kit names explicitly. ============================================================ */ footer { padding: clamp(48px, 6vw, 80px) 0 32px; background: var(--ink); border-top: 1px solid var(--paper-06); color: var(--paper); --arc-link: var(--arc-link-on-dark); --text-muted: var(--paper-72); --em-color: var(--arc-ember-lift); } .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--paper-06); margin-bottom: 32px; } .footer-brand img { height: 48px; width: auto; margin-bottom: 16px; } .footer-brand p { font-size: 15px; color: var(--paper-72); max-width: 240px; line-height: 1.6; } .footer-col-title { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); margin-bottom: 20px; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; } /* Touch targets: these link rows are only ~16px tall from text alone. */ @media (max-width: 768px) { .footer-links { gap: 0; } .footer-links a { display: inline-block; padding: 12px 0; } .footer-legal-bar a { display: inline-block; padding: 10px 0; } } .footer-links a { font-size: 15px; color: var(--paper-72); transition: color .2s; } .footer-links a:hover { color: var(--ember-light); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .footer-copy { font-size: 14px; color: var(--paper-72); } .footer-social-icons { display: flex; align-items: center; gap: 10px; } .footer-tagline { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: 14px; letter-spacing: 0.02em; text-transform: lowercase; color: var(--ember-light); } .footer-legal-bar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding-top: 20px; border-top: 1px solid var(--paper-06); margin-top: 20px; } .footer-legal-bar a { font-family: var(--font-mono); font-weight: 700; font-size: 11px; color: var(--paper-55); letter-spacing: 0.08em; text-transform: uppercase; transition: color .2s; } .footer-legal-bar a:hover { color: var(--paper); } .footer-legal-sep { font-size: 11px; color: var(--paper-30); } /* ============================================================ 19. REEL TRIGGER + LIGHTBOX The trigger appears only once the sizzle reel is confirmed to load (see site.js). The lightbox is a Gate video plate — no blur, a simple ember-keyline ring on the trigger and close button in place of the old glass ring. ============================================================ */ .reel-trigger { grid-row: 1; align-self: center; justify-self: center; position: relative; z-index: 3; display: none; flex-direction: column; align-items: center; gap: 14px; background: none; border: none; padding: 0; cursor: pointer; opacity: 0; transition: opacity .6s var(--ease-standard); } .reel-trigger.ready { display: flex; } .reel-trigger.ready.visible { opacity: 1; } .reel-trigger-ring { position: relative; width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(20,20,22,.55); border: var(--arc-keyline) solid var(--ember); color: var(--paper); transition: background .25s var(--ease-standard), transform .12s; } .reel-trigger-ring::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--ember-25); animation: reelPulse 2.6s ease-in-out infinite; } .reel-trigger .icon { margin-left: 3px; } .reel-trigger:hover .reel-trigger-ring { background: var(--ember); } .reel-trigger:active .reel-trigger-ring { transform: scale(.92); transition-duration: .08s; } .reel-trigger-label { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-95); text-shadow: 0 2px 12px rgba(0,0,0,.6); } @keyframes reelPulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.35); opacity: 0; } } @media (max-width: 768px) { .reel-trigger-ring { width: 64px; height: 64px; } } .reel-backdrop { position: fixed; inset: 0; background: rgba(6,6,7,.9); z-index: 9100; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .reel-backdrop.open { opacity: 1; pointer-events: all; } .reel-lightbox { position: fixed; inset: 0; z-index: 9101; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .reel-lightbox.open { visibility: visible; opacity: 1; pointer-events: all; } .reel-lightbox-inner { position: relative; width: min(1100px, 100%); transform: scale(.92); } .reel-close { position: absolute; top: -52px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--paper-22, rgba(255,255,255,.22)); background: rgba(20,20,22,.6); color: var(--paper); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; } .reel-close:hover { background: var(--ember); border-color: transparent; } .reel-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--arc-gate); border-radius: var(--arc-radius); overflow: hidden; border: var(--arc-keyline) solid var(--ember); } .reel-video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--arc-gate); } .reel-video.hidden { display: none; } .reel-empty { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 40px; } .reel-video-wrap.no-reel .reel-empty { display: flex; } .reel-empty-label { font-family: var(--font-display); font-weight: 800; font-stretch: 115%; font-size: clamp(22px, 3vw, 32px); text-transform: lowercase; color: var(--paper); } .reel-empty-text { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--paper-55); max-width: 340px; } @media (max-width: 600px) { .reel-close { top: -44px; width: 36px; height: 36px; } } /* ============================================================ 20. LEGAL PANEL Paper — dense legal text reads better light. Solid, no blur. ============================================================ */ .legal-backdrop { position: fixed; inset: 0; background: rgba(20,20,22,.5); z-index: 9000; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .legal-backdrop.open { opacity: 1; pointer-events: all; } .legal-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100vw); background: var(--arc-paper); z-index: 9001; transform: translateX(100%); overflow-y: auto; display: flex; flex-direction: column; border-left: 1px solid var(--ink-10); visibility: hidden; box-shadow: var(--shadow-lg); } .legal-panel.open { visibility: visible; } .legal-panel-header { position: sticky; top: 0; background: var(--arc-paper); border-bottom: 1px solid var(--ink-10); padding: 28px 40px; display: flex; align-items: center; justify-content: space-between; z-index: 10; flex-shrink: 0; } .legal-panel-title { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: clamp(20px,3vw,28px); text-transform: lowercase; letter-spacing: 0; color: var(--arc-charcoal); } .legal-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink-18); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-60); font-size: 18px; transition: all .2s; flex-shrink: 0; } .legal-close:hover { background: var(--arc-ember-wash); border-color: var(--ember); color: var(--ember); } .legal-panel-body { padding: 40px; flex: 1; } .legal-panel-body h2 { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember); margin: 36px 0 12px; } .legal-panel-body h2:first-child { margin-top: 0; } .legal-panel-body p { font-family: var(--font-body); font-size: 16px; line-height: 1.8; color: var(--ink-72); margin-bottom: 14px; } .legal-panel-body ul { margin: 0 0 14px 0; padding-left: 18px; } .legal-panel-body ul li { font-family: var(--font-body); font-size: 15px; line-height: 1.8; color: var(--ink-72); margin-bottom: 6px; } .legal-panel-body a { color: var(--arc-link); text-decoration: underline; } .legal-meta { display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-55); background: var(--ink-06); border-radius: var(--radius-full); padding: 6px 14px; margin-bottom: 28px; } @media (max-width: 600px) { .legal-panel-header { padding: 20px 24px; } .legal-panel-body { padding: 28px 24px; } .footer-legal-sep { display: none; } .footer-legal-bar { gap: 10px; } } /* ============================================================ 21. LOADER ============================================================ */ #loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; pointer-events: all; overflow: hidden; animation: loaderFailsafe .4s ease-out 4.5s forwards; } #loader-bg { position: absolute; inset: 0; background: var(--ink); } #loader-logo-wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; } #loader-logo { width: clamp(80px, 12vw, 140px); height: auto; opacity: 0; animation: loaderLogoFailsafe .5s ease .1s forwards; } #loader.gone { display: none; pointer-events: none; } @keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } @keyframes loaderLogoFailsafe { to { opacity: 1; } } /* ============================================================ 22. FILM GRAIN Kept only over Gate sections — it reads as texture on footage, dirt on clean Paper. Scoped by mix-blend-mode + a mask built from the page's own dark-section geometry isn't practical in pure CSS, so the pragmatic version: a much lighter overall opacity, screen-blended, which stays near-invisible on Paper but still textures the dark sections. ============================================================ */ #bg-grain { position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%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)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; opacity: .07; mix-blend-mode: overlay; } @media (max-width: 768px) { #bg-grain { position: absolute; height: 100%; } } /* ============================================================ 23. RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .about-content { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr 1fr; } .carousel-btn { display: none; } .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-links, .nav-cta { display: none; } .nav-burger { display: flex; } .process-grid { grid-template-columns: 1fr; } .why-pillars { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; } #sticky-cta { bottom: 20px; right: 20px; } #sticky-cta a { padding: 0 18px; font-size: 11px; } .work-header { flex-direction: column; align-items: flex-start; gap: 16px; } } /* ============================================================ 24. REDUCED MOTION / TRANSPARENCY / CONTRAST ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #loader-logo, .hero-scroll-line, .marquee-track, .swipe-hint-arrow span, #sticky-cta a::before, .reel-trigger-ring::before { animation: none !important; } html.js-anim .fade-up { transition: opacity .25s ease !important; transform: none !important; } html.js-anim .fade-up:not(.visible) { opacity: 0; } #nav, .nav-mobile, .legal-panel, .legal-backdrop, #sticky-cta, .at-handle, .btn-primary, .btn-ghost, .work-item img, .reel-lightbox-inner, .reel-backdrop, .reel-lightbox { transition-duration: .15s !important; } .reel-lightbox-inner { transform: none !important; } .at-slider.dragging .at-handle { transform: translate(-50%, -50%) scale(1); } } @media (prefers-reduced-transparency: reduce) { .cs-image-badge, .carousel-btn { background: var(--ink-mid); } .reel-trigger-ring, .reel-close { background: var(--ink-mid); } .reel-backdrop { background: rgba(6,6,7,.97); } } @media (prefers-contrast: more) { :root { --paper-72: rgba(242,242,244,.92); --paper-60: rgba(242,242,244,.85); --paper-55: rgba(242,242,244,.8); --paper-45: rgba(242,242,244,.72); --ink-72: rgba(20,20,22,.94); --ink-60: rgba(20,20,22,.88); --ink-55: rgba(20,20,22,.84); --ink-45: rgba(20,20,22,.78); } .work-item, .process-step, .why-pillar { border-color: var(--ink-30); } }