/* ============================================================ THEMES Dark is the default. The light theme is opt-in via , set by the toggle in the header. To ship a single theme once the client picks, delete the toggle button + its script and either keep this :root block (dark) or fold the [data-theme="light"] values into it. ============================================================ */ :root { /* --- surfaces & text --- */ --black: #0b0b0d; /* page base */ --panel: #141417; --panel-2: #1a1a1e; --line: #2a2a2e; --gold: #c9a24b; --gold-bright: #e0bf6f; --silver: #b9bcc2; --cream: #eae7df; --muted: #9a978f; /* --- fixed regardless of theme --- */ /* A filled gold button stays bright in both themes, so its fill and the text on it are theme-independent. --gold/--gold-bright do shift, because they are used as *ink* and have to earn contrast against the page. */ --gold-fill: linear-gradient(135deg, #e0bf6f, #c9a24b); --gold-solid: #c9a24b; --on-gold: #0b0b0d; /* text sitting directly on a photograph, over its own dark scrim */ --on-photo: #eae7df; --on-photo-accent: #e0bf6f; /* --- themeable overlays --- */ --header-bg: rgba(11, 11, 13, 0.88); --menu-bg: rgba(11, 11, 13, 0.97); --card-glass: rgba(26, 26, 30, 0.82); --ghost-border: rgba(234, 231, 223, 0.35); --hero-shadow: 0 2px 40px rgba(0, 0, 0, 0.6); --hero-lede-shadow: 0 2px 20px rgba(0, 0, 0, 0.7); --footer-credit: #838078; --footer-credit-line: #3a3833; /* hero particles, read by the canvas script */ --dust-rgb: 224, 191, 111; /* photo treatments */ --media-filter: grayscale(0.45) brightness(0.72); --media-filter-hover: grayscale(0) brightness(0.92); --shot-filter: brightness(0.8); /* gradient scrims */ --hero-scrim: linear-gradient(180deg, rgba(11, 11, 13, 0.92) 0%, rgba(11, 11, 13, 0.55) 35%, rgba(11, 11, 13, 0.80) 78%, var(--black) 100%); --story-scrim: linear-gradient(180deg, rgba(11, 11, 13, 0.10), rgba(11, 11, 13, 0.62)); --service-scrim: linear-gradient(180deg, rgba(11, 11, 13, 0) 35%, rgba(11, 11, 13, 0.85) 100%); --contact-scrim: linear-gradient(180deg, var(--black) 0%, rgba(11, 11, 13, 0.60) 34%, rgba(11, 11, 13, 0.80) 100%); } /* ---------- light theme ---------- */ :root[data-theme="light"] { --black: #faf9f7; /* warm white page base */ --panel: #f2f0eb; --panel-2: #eae7e0; --line: #ddd9d0; /* gold is darkened for contrast against white; --gold-bright is the *emphasis* token, so on a light background it is the darker of the two */ --gold: #836619; --gold-bright: #7d611c; --silver: #4a4a52; --cream: #17171a; --muted: #6b6862; --header-bg: rgba(250, 249, 247, 0.9); --menu-bg: rgba(250, 249, 247, 0.97); --card-glass: rgba(255, 255, 255, 0.78); --ghost-border: rgba(23, 23, 26, 0.3); --hero-shadow: 0 2px 30px rgba(255, 255, 255, 0.9); --hero-lede-shadow: 0 1px 16px rgba(255, 255, 255, 0.95); --footer-credit: #767269; --footer-credit-line: #d5d1c8; --dust-rgb: 150, 116, 38; --media-filter: none; --media-filter-hover: brightness(1.04); --shot-filter: none; --hero-scrim: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.58) 34%, rgba(255, 255, 255, 0.78) 74%, var(--black) 100%); --story-scrim: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.28)); --service-scrim: linear-gradient(180deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.30) 100%); --contact-scrim: linear-gradient(180deg, var(--black) 0%, rgba(255, 255, 255, 0.74) 34%, rgba(255, 255, 255, 0.88) 100%); } /* Swap the photography with the theme. The dark theme wants dusk exteriors; under a white wash those go muddy and the type loses contrast, so the light theme gets daylight shots instead. Applies to the hero and the contact band. */ .img-light { display: none; } :root[data-theme="light"] .img-dark { display: none; } :root[data-theme="light"] .img-light { display: block; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--black); color: var(--cream); font-family: 'Jost', sans-serif; font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; /* clip, not hidden: `overflow:hidden` would make body a scroll container and break ScrollTrigger's pinning of the gallery */ overflow-x: clip; } h1, h2, h3, h4 { font-family: 'Playfair Display', serif; font-weight: 600; letter-spacing: 0.01em; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px; } /* ---------- divider motif ---------- */ .divider { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 auto; } .divider .arc { height: 1px; width: 60px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .divider .dot { width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg); } /* ---------- header ---------- */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease; } header.solid { background: var(--header-bg); backdrop-filter: blur(10px); border-bottom-color: var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; max-width: 1100px; margin: 0 auto; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 44px; width: 44px; object-fit: contain; } .brand-text { font-family: 'Playfair Display', serif; font-size: 1.05rem; letter-spacing: 0.06em; } .brand-text .thin { display: block; font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.6rem; letter-spacing: 0.28em; color: var(--muted); text-transform: uppercase; margin-top: 2px; } nav ul { list-style: none; display: flex; gap: 34px; } nav ul a { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver); transition: color .2s; } nav ul a:hover, nav ul a:focus-visible { color: var(--gold-bright); } .nav-cta { border: 1px solid var(--gold); color: var(--gold-bright); padding: 9px 18px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; transition: background .2s, color .2s; } .nav-cta:hover { background: var(--gold-solid); color: var(--on-gold); } .menu-toggle { display: none; background: none; border: none; color: var(--cream); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 6px; } /* ---------- theme toggle ---------- Client-facing switch so both palettes can be compared live. Remove this rule, the button in index.html, and the theme script once a palette is chosen. */ .theme-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--silver); font-family: inherit; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 14px; margin-left: 18px; cursor: pointer; white-space: nowrap; transition: color .25s ease, border-color .25s ease; } .theme-toggle:hover { color: var(--gold-bright); border-color: var(--gold); } .theme-toggle .tt-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; background: var(--cream); border: 1px solid var(--line); transition: background .25s ease; } :root[data-theme="light"] .theme-toggle .tt-dot { background: #16161a; } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; text-align: center; padding: 130px 28px 90px; overflow: hidden; isolation: isolate; } .hero-media { position: absolute; inset: -6% -6% -6% -6%; z-index: -3; } .hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: kenburns 26s ease-in-out infinite alternate; } @keyframes kenburns { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(0, -2%, 0); } } .hero-scrim { position: absolute; inset: 0; z-index: -2; background: var(--hero-scrim); } .hero-dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero .wrap { position: relative; } .hero-logo { width: 150px; margin: 0 auto 28px; } .hero h1 { font-size: clamp(2.2rem, 5.6vw, 3.9rem); color: var(--cream); max-width: 840px; margin: 0 auto 20px; text-shadow: var(--hero-shadow); } .hero h1 .w { display: inline-block; } .hero h1 em { font-style: normal; color: var(--gold-bright); } .hero p.lede { max-width: 580px; margin: 0 auto 36px; color: var(--silver); font-size: 1.05rem; text-shadow: var(--hero-lede-shadow); } .hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-block; padding: 14px 30px; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all .2s; border: 1px solid transparent; } .btn-primary { background: var(--gold-fill); color: var(--on-gold); font-weight: 500; } .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn-ghost { border-color: var(--ghost-border); color: var(--cream); backdrop-filter: blur(4px); } .btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); } .hero-strap { margin-top: 52px; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; } .scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 1px; height: 56px; background: linear-gradient(180deg, transparent, var(--gold)); overflow: hidden; } .scroll-cue::after { content: ""; position: absolute; inset: 0; background: var(--gold-bright); animation: cue 2.4s ease-in-out infinite; } @keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } } /* ---------- section shared ---------- */ section { padding: 110px 0; } /* keep anchor jumps clear of the fixed header */ section[id] { scroll-margin-top: 86px; } .section-head { text-align: center; max-width: 640px; margin: 0 auto 60px; } .eyebrow { color: var(--gold); font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; display: block; margin-bottom: 14px; } .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--cream); margin-bottom: 16px; } .section-head p { color: var(--muted); font-size: 0.98rem; } /* ---------- story ---------- */ .story { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .story-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: start; } .story-figure { position: relative; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 1/1; margin-bottom: 34px; } .story-figure img { width: 100%; height: 120%; object-fit: cover; will-change: transform; } .story-figure::after { content: ""; position: absolute; inset: 0; background: var(--story-scrim); pointer-events: none; } .story-quote { font-family: 'Playfair Display', serif; font-size: 1.5rem; line-height: 1.5; color: var(--cream); position: relative; padding-left: 26px; border-left: 2px solid var(--gold); } .story-quote span { color: var(--gold-bright); } .story-sign { margin-top: 26px; padding-left: 26px; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; } .story-body p { color: var(--silver); margin-bottom: 18px; font-size: 0.98rem; } .story-body p:last-child { margin-bottom: 0; } /* ---------- services ---------- */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .service-card { background: var(--black); transition: background .25s; display: flex; flex-direction: column; } .service-card:hover { background: var(--panel); } .service-media { position: relative; overflow: hidden; aspect-ratio: 3/2; } .service-media img { width: 100%; height: 100%; object-fit: cover; filter: var(--media-filter); transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .5s ease; } .service-card:hover .service-media img, .service-card:focus-within .service-media img { transform: scale(1.07); filter: var(--media-filter-hover); } .service-media::after { content: ""; position: absolute; inset: 0; background: var(--service-scrim); } .service-body { padding: 30px 32px 40px; } .service-num { font-family: 'Playfair Display', serif; color: var(--gold); font-size: 0.85rem; letter-spacing: 0.15em; margin-bottom: 14px; display: block; } .service-card h3 { color: var(--cream); font-size: 1.2rem; margin-bottom: 12px; } .service-card p { color: var(--muted); font-size: 0.92rem; } /* ---------- work / gallery ---------- */ .work { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-bottom: 80px; } /* the stage is what gets pinned — it must fit the viewport on its own */ .track-stage { display: flex; flex-direction: column; justify-content: center; overflow: hidden; } @media (min-width:861px) { html.js-anim .track-stage { min-height: 100svh; } } .track-viewport { width: 100%; } .track { display: flex; gap: 22px; padding: 0 28px; will-change: transform; } .shot { position: relative; flex: 0 0 auto; height: min(56vh, 500px); aspect-ratio: 4/5; overflow: hidden; border: 1px solid var(--line); } .shot img { width: 100%; height: 100%; object-fit: cover; filter: var(--shot-filter); transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .5s ease; } .shot:hover img { transform: scale(1.06); filter: brightness(1); } .shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 22px 20px; /* this text sits on the photo itself, so it keeps its own dark scrim and light type in both themes — page colours would be unreadable here */ background: linear-gradient(180deg, transparent, rgba(11, 11, 13, 0.9)); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-photo); } .shot figcaption b { display: block; font-weight: 400; color: var(--on-photo-accent); font-size: 0.68rem; letter-spacing: 0.24em; margin-bottom: 4px; } .track-hint { text-align: center; margin-top: 34px; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; } /* Fallback whenever the pinned scrub is not running (no JS, reduced motion, or narrow screens): the track stays a plain horizontal swipe strip. */ .track-viewport { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .track-viewport::-webkit-scrollbar { display: none; } @media (min-width:861px) { html.js-anim .track-viewport { overflow-x: visible; } } /* ---------- values strip ---------- */ .values { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 40px; } .value h4 { color: var(--gold-bright); font-size: 1.9rem; margin-bottom: 6px; } .value p { color: var(--muted); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; } /* ---------- contact ---------- */ .contact { position: relative; border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; } .contact-media { position: absolute; inset: -8% 0; z-index: -2; } .contact-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; } .contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--contact-scrim); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .contact-list { list-style: none; } .contact-list li { display: flex; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); } .contact-list li:last-child { border-bottom: none; } .icon-circle { width: 44px; height: 44px; border: 1px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-bright); flex-shrink: 0; font-size: 1.1rem; } .icon-circle svg { display: block; } .contact-list .label { display: block; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 3px; } .contact-list .value { color: var(--cream); font-size: 1.05rem; } .contact-cta { background: var(--card-glass); backdrop-filter: blur(6px); border: 1px solid var(--line); padding: 44px; } .contact-cta h3 { color: var(--cream); font-size: 1.4rem; margin-bottom: 14px; } .contact-cta p { color: var(--muted); margin-bottom: 26px; font-size: 0.95rem; } /* ---------- footer ---------- */ footer { padding: 40px 0; text-align: center; color: var(--muted); font-size: 0.8rem; border-top: 1px solid var(--line); background: var(--black); } footer .fbrand { font-family: 'Playfair Display', serif; color: var(--silver); letter-spacing: 0.08em; margin-bottom: 8px; } footer .credit { margin-top: 10px; font-size: 0.7rem; color: var(--footer-credit); } footer .credit a { border-bottom: 1px solid var(--footer-credit-line); } footer .credit a:hover { color: var(--gold); } /* ---------- scroll-reveal (only active once JS confirms) ---------- */ html.js-anim .reveal { opacity: 0; } /* ---------- responsive ---------- */ @media (max-width:860px) { nav ul { position: fixed; inset: 0 0 auto 0; top: 72px; flex-direction: column; gap: 0; background: var(--menu-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 8px 28px 22px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; } nav ul li { border-top: 1px solid var(--line); } nav ul a { display: block; padding: 16px 0; font-size: 0.9rem; } nav.open ul { opacity: 1; transform: translateY(0); pointer-events: auto; } .menu-toggle { display: block; } .nav-cta { display: none; } .theme-toggle { margin-left: auto; margin-right: 12px; padding: 7px 11px; font-size: 0.6rem; letter-spacing: 0.12em; } .story-grid { grid-template-columns: 1fr; gap: 40px; } .story-figure { aspect-ratio: 16/10; margin-bottom: 28px; } .services-grid { grid-template-columns: 1fr; } .values { grid-template-columns: 1fr 1fr; gap: 30px 20px; } .contact-grid { grid-template-columns: 1fr; } section { padding: 80px 0; } /* ---------- mobile: nothing overlays the photography ---------- The dimming and the gradient scrims exist to make room for the desktop hover reveal. Touch has no hover, so on mobile the images are shown clean and the gallery captions move below the photo. */ /* "What We Do" — full-colour images, no scrim */ .service-media img, .service-card:hover .service-media img, .service-card:focus-within .service-media img { filter: none; transform: none; } .service-media::after { display: none; } /* "The Standard" — caption sits under the photo, not on it */ .shot { height: auto; aspect-ratio: auto; width: 78vw; overflow: visible; border: none; display: flex; flex-direction: column; } .shot img, .shot:hover img { height: auto; aspect-ratio: 4/5; filter: none; transform: none; border: 1px solid var(--line); } .shot figcaption { position: static; background: none; padding: 14px 2px 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } .hero-media img { transform: none; } } :focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }