/* ============================================================ motion.css — LGR Web Studio site motion + layout system. Built from the template-factory starter, tuned for restraint (lighter reveals) and dual light/dark theming. Page-specific styles (form, work list, footer, pixel toggle) stay inline in index.html. This file owns ALL design tokens. ============================================================ */ /* ---------- SELF-HOSTED FONTS (woff2, latin subset) ---------- Replaces the render-blocking third-party Google Fonts request. The two above-the-fold faces are preloaded in . font-display:swap shows the fallback immediately, then swaps in — no invisible text. Variable woff2: one file each covers the Cormorant 400–500 and Inter 300–500 ranges. */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('fonts/cormorant-garamond.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/cormorant-garamond-italic.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('fonts/inter.woff2') format('woff2'); } :root { /* Brand */ --ink: #2A2218; --gold: #B89968; /* decorative fills only (bars, button bg) */ --gold-text: #7E6234; /* darker gold for TEXT/UI state — passes WCAG AA on limestone */ --serif: 'Cormorant Garamond', serif; --sans: 'Inter', -apple-system, sans-serif; /* Semantic (theme-aware) */ --bg: #EDE7D9; --surface: #ffffff; --text: #2A2218; --muted: #5A4F3E; --line: #E5DDD0; --field-border: #8E8472; /* form-control boundary — passes WCAG 1.4.11 (3:1) */ /* Back-compat aliases (older inline rules / pixel overlays) */ --limestone: #EDE7D9; --slate: #5A4F3E; --maxw: 920px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } [data-theme="dark"] { --bg: #211B12; --surface: #2C2417; --text: #EDE7D9; --muted: #B7A98E; --line: #3A3022; --field-border: #6E6452; /* form-control boundary on dark surface (3:1) */ --limestone: #EDE7D9; /* stays light: used where we want light-on-dark */ --slate: #B7A98E; --gold-text: #B89968; /* gold already passes AA on dark ink */ } /* Offset native anchor jumps + scroll-into-view below the sticky nav. (Lenis ignores this and uses the JS offset instead; this covers the reduced-motion / no-Lenis path.) */ html { scroll-padding-top: 64px; } /* ---------- LENIS recommended stylesheet ---------- The official CSS (darkroomengineering/lenis). Lenis adds .lenis / .lenis-smooth / .lenis-stopped / .lenis-scrolling / .lenis-locked to at runtime; these rules make it behave correctly (proper height, scroll-lock clipping, nested scroll containment via [data-lenis-prevent], iframe pointer safety). */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } /* guard vs native smooth */ .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ---------- NAV (glass, sticky) ---------- */ .nav { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 24px; transition: padding 0.3s var(--ease), background-color 0.3s var(--ease); } /* Condense once you leave the hero: tighter bar + firmer glass. */ .nav.glass.is-condensed { padding-top: 9px; padding-bottom: 9px; background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: 0 1px 0 var(--line); } .nav-mark { font-family: var(--serif); font-size: 19px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; color: var(--text); } .nav-links { display: flex; gap: 24px; margin-left: auto; margin-right: 6px; } .nav-links a { position: relative; font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); text-decoration: none; transition: color 0.2s var(--ease); } .nav-links a:hover { color: var(--gold-text); } /* gold underline slides in under the section you're currently viewing */ .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .nav-links a[aria-current="true"] { color: var(--gold-text); } .nav-links a[aria-current="true"]::after { transform: scaleX(1); } .nav-links a:focus-visible, .nav-mark:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 4px; border-radius: 2px; } .glass { background: color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--bg); } } @media (max-width: 560px) { .nav-links { display: none; } /* with the links gone, keep the controls grouped at the right edge */ .nav-pixel { margin-left: auto; } } /* ---------- THEME TOGGLE ---------- */ .theme-toggle { background: none; border: 1px solid var(--line); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text); transition: border-color 0.2s var(--ease), color 0.2s var(--ease); -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { border-color: var(--gold-text); color: var(--gold-text); } .theme-toggle:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; } .theme-toggle-icon { position: relative; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; /* sun disc (ring) */ transition: box-shadow 0.35s var(--ease); } /* Sun rays (light mode): spokes drawn with a conic gradient, masked to an outer ring so only the ray tips show around the disc. */ .theme-toggle-icon::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: repeating-conic-gradient(currentColor 0deg 5deg, transparent 5deg 45deg); -webkit-mask: radial-gradient(closest-side, transparent 64%, #000 66%); mask: radial-gradient(closest-side, transparent 64%, #000 66%); opacity: 1; transition: opacity 0.3s var(--ease); } /* Dark mode: crescent moon, no rays. */ [data-theme="dark"] .theme-toggle-icon { box-shadow: inset -4px -4px 0 0 currentColor; } [data-theme="dark"] .theme-toggle-icon::before { opacity: 0; } @media (prefers-reduced-motion: reduce) { .theme-toggle-icon::before { transition: none; } } /* Mobile width: keep the serif wordmark on one line (a slow font-swap could wrap it). */ @media (max-width: 560px) { .nav-mark { font-size: 16px; white-space: nowrap; } } /* Touch devices: enlarge the round theme-toggle hit area to >=44px (icon unchanged). */ @media (pointer: coarse) { .theme-toggle { width: 44px; height: 44px; } } /* ---------- SECTION SHELL ---------- */ /* Full-height sections so each "presents fully" when the proximity-snap settles on it. svh (small viewport height) avoids the mobile address-bar jump; the vh line is a fallback for old engines. Minus the ~64px sticky nav. These are min-heights, never fixed — a taller-than-screen section (e.g. a long form) grows and scrolls instead of clipping. */ .section { padding: 72px 24px; min-height: 100vh; min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: center; align-items: center; } .band { max-width: var(--maxw); margin: 0 auto; width: 100%; } /* Contact is the last screen: size it to its content so the footer sits with it (reachable + fully visible at the bottom snap) instead of being pushed a whole screen below. */ #start { min-height: auto; } .section-label { font-family: var(--sans); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.32em; color: var(--gold-text); text-align: center; margin-bottom: 28px; } /* ---------- HERO ---------- */ .hero { min-height: 100vh; min-height: 100svh; max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px; } .hero-eyebrow { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.32em; color: var(--gold-text); margin-bottom: 22px; } .hero-title { font-family: var(--serif); font-weight: 500; line-height: 1.12; font-size: clamp(38px, 7vw, 64px); margin-bottom: 22px; } .hero-title em { color: var(--gold-text); font-style: italic; } .hero-sub { font-family: var(--serif); font-size: clamp(17px, 2.6vw, 22px); color: var(--muted); max-width: 34ch; line-height: 1.45; } /* Hero call-to-action: primary button + the scroll cue beneath it. */ .hero-actions { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: 44px; } .btn-primary { font-family: var(--sans); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.28em; text-decoration: none; padding: 15px 36px; background: var(--ink); color: #EDE7D9; border: 1px solid var(--ink); transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .btn-primary:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); } .btn-primary:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 4px; } [data-theme="dark"] .btn-primary { background: var(--gold); color: var(--ink); border-color: var(--gold); } [data-theme="dark"] .btn-primary:hover { background: #EDE7D9; } .scroll-cue { width: 20px; height: 32px; flex: none; border: 1px solid var(--muted); border-radius: 12px; position: relative; opacity: 0.7; } .scroll-cue::after { content: ""; position: absolute; top: 7px; left: 50%; width: 3px; height: 6px; background: var(--gold); border-radius: 2px; transform: translateX(-50%); animation: cue 1.8s var(--ease) infinite; } @keyframes cue { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 10px); } } /* ---------- APPROACH CARDS ---------- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card { background: var(--surface); border: 1px solid var(--line); padding: 28px 24px; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease); } .card:hover { transform: translateY(-3px); border-color: var(--gold); } .card h3 { font-family: var(--serif); font-weight: 500; font-size: 23px; margin-bottom: 9px; } .card p { color: var(--muted); font-size: 15px; } @media (max-width: 680px) { .cards { grid-template-columns: 1fr; } } /* ---------- PROCESS STEPS ---------- */ .steps { list-style: none; max-width: 600px; margin: 0 auto; } .step { display: flex; gap: 20px; padding: 22px 4px; border-bottom: 1px solid var(--line); align-items: center; } .step:first-child { border-top: 1px solid var(--line); } /* Numbered steps as hairline plates (atelier "drawn list" motif). */ .step-n { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-width: 42px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--gold-text); transition: border-color 0.3s var(--ease); } .step:hover .step-n { border-color: var(--gold); } .step h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin-bottom: 4px; } .step p { color: var(--muted); font-size: 15px; } /* ---------- SECTION FRAMING (editorial "spec-sheet" treatment) ---------- Numbered plate + hairline rule turns each label into an editorial masthead (CSS counters — no HTML change). The barest sections (Process, Work) sit on a faint framed panel with corner registration ticks (a print/atelier motif) so the "cute statements" read as composed, not floating. Additive + fully reversible: delete this block to restore the bare sections. */ main { counter-reset: sec; } .section .section-label { counter-increment: sec; } .section .section-label::before { content: "0" counter(sec); display: block; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--gold-text); letter-spacing: 0.04em; margin-bottom: 6px; } .section .section-label::after { content: ""; display: block; width: 44px; height: 1px; margin: 12px auto 0; background: var(--line); } #process .band, #work .band { position: relative; padding: clamp(28px, 4vw, 52px); background: color-mix(in srgb, var(--surface) 50%, transparent); border: 1px solid var(--line); transition: border-color 0.5s var(--ease); } @supports not (background: color-mix(in srgb, white 50%, transparent)) { #process .band, #work .band { background: var(--surface); } } #process .band::before, #work .band::before, #process .band::after, #work .band::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1px solid var(--gold); pointer-events: none; transition: width 0.5s var(--ease), height 0.5s var(--ease); } #process .band::before, #work .band::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } #process .band::after, #work .band::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } /* Ticks "ink in" (draw from the corner) as the panel reveals — like a plate being registered on a press. Static immediately if no JS / reduced motion. */ html.js-reveal #process .band:not(.is-visible)::before, html.js-reveal #process .band:not(.is-visible)::after, html.js-reveal #work .band:not(.is-visible)::before, html.js-reveal #work .band:not(.is-visible)::after { width: 0; height: 0; } /* Signature: a quiet gold wash on text selection (the one moment a visitor "touches" the page) — reads as considered, not a default blue template. */ ::selection { background: color-mix(in srgb, var(--gold) 30%, transparent); } ::-moz-selection { background: color-mix(in srgb, var(--gold) 30%, transparent); } /* ============================================================ MOTION — lighter than the factory default. Content is only hidden once .js-reveal is added by motion.js. ============================================================ */ html.js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } html.js-reveal .reveal.is-visible { opacity: 1; transform: none; } /* Registered Cascade: a section's children settle in sequence (not as one block), resolving with the corner-tick ink-in — reads as the panel being "set" on a press, not a generic stagger. Pure delays on the existing reveal; reduced-motion users get the instant reveal (no delays applied). */ @media (prefers-reduced-motion: no-preference) { html.js-reveal .cards .card:nth-child(2) { transition-delay: 90ms; } html.js-reveal .cards .card:nth-child(3) { transition-delay: 180ms; } html.js-reveal .steps .step:nth-child(2) { transition-delay: 70ms; } html.js-reveal .steps .step:nth-child(3) { transition-delay: 140ms; } html.js-reveal .steps .step:nth-child(4) { transition-delay: 210ms; } html.js-reveal .work-list li:nth-child(2) .work-item { transition-delay: 90ms; } } /* Letter-by-letter reveal: motion.js splits a few headings into .char spans (accessibly — aria-label on the element, aria-hidden chars). The element box shows immediately; the letters cascade in when the section is-visible. */ .split .char { display: inline-block; opacity: 0; transform: translateY(0.45em); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 26ms); } html.js-reveal .reveal.split { opacity: 1; transform: none; } /* box visible; chars do the reveal */ html.js-reveal .reveal.split.is-visible .char, html.js-reveal .is-visible .split .char { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .split .char { opacity: 1; transform: none; transition: none; } } .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; opacity: 0.85; } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .scroll-progress { animation: progress linear both; animation-timeline: scroll(root); } } } @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js-reveal .reveal { opacity: 1; transform: none; transition: none; } .scroll-cue::after { animation: none; } .scroll-progress { display: none; } body, .card, .theme-toggle, .theme-toggle-icon { transition: none; } }