/* ===================================================================== Ember & Frames — Unified Studio Site Shared design system --------------------------------------------------------------------- Palette built around the F&B portfolio (loved) with the brand ember accent from the identity guide. One tight, warm, editorial system. ===================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } :root { /* Brand palette — Ember & Frames identity guide (gold retained as-is) */ --off-white: #F5EFE6; /* Parchment — page background, breathing space */ --warm: #ECE0CE; /* warm sand — contrast blocks (hero, contact, cards) */ --cream-soft: #FBF7F1; /* lifted parchment — secondary surfaces */ --olive: #B05C3A; /* retired olive-green → Terracotta accent — hover, strips */ --gold: #C9A84C; /* metallic accent — labels, dividers, focus */ --charcoal: #1E1E1E; /* Charcoal — primary text & dark sections */ --muted: #5F6B6E; /* Slate — secondary text & metadata */ --ember: #C97B3A; /* Ember Amber — signature accent: ampersand, key CTAs, highlights */ --terracotta: #B05C3A; /* Terracotta — warm secondary accent */ --light-ember:#D49A5E; /* Light Ember — highlights, hovers, soft fills */ --label-ink: #8F4E22; /* Burnt amber — small labels on light backgrounds (AA contrast) */ --line: rgba(201,168,76,0.18); --line-strong:rgba(201,168,76,0.4); --display: 'Cormorant Garamond', Georgia, serif; --body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pad-x: 56px; --nav-h: 74px; --maxw: 1280px; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { width: 100%; max-width: 100%; overflow-x: clip; } @supports not (overflow-x: clip) { html, body { overflow-x: hidden; } } body { background: var(--off-white); color: var(--charcoal); font-family: var(--body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } section[id], div[id] { scroll-margin-top: calc(var(--nav-h) + 12px); } img, video { display: block; max-width: 100%; } a { color: inherit; } .brand-amp { font-family: var(--display); font-style: italic; font-weight: 500; color: var(--ember); } /* ---------- Shared type helpers ---------- */ .eyebrow, .section-label { font-family: var(--body); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--label-ink); font-weight: 400; } h1 { font-family: var(--display); font-size: clamp(52px, 6.4vw, 94px); line-height: 0.92; letter-spacing: -1px; color: var(--charcoal); font-weight: 600; } h2 { font-family: var(--display); font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.5px; font-weight: 500; } h2 em, h1 em { font-style: italic; color: var(--olive); } .skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; background: var(--charcoal); color: var(--off-white); padding: 12px 20px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } .skip-link:focus { left: 12px; top: 12px; } /* ===================================================================== NAV / HEADER ===================================================================== */ .nav { position: sticky; top: 0; z-index: 200; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--pad-x); min-height: var(--nav-h); background: rgba(236, 224, 206, 0.92); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line-strong); box-shadow: 0 8px 26px -16px rgba(30, 28, 24, 0.4); transform: translateZ(0); } .nav-logo { font-family: var(--display); font-size: 23px; letter-spacing: 0.01em; color: var(--charcoal); font-weight: 600; text-decoration: none; white-space: nowrap; } .nav-links { display: flex; gap: 17px; align-items: center; } .nav-links a { font-family: var(--body); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 400; color: rgba(42,42,37,0.85); text-decoration: none; transition: color 0.2s; white-space: nowrap; } .nav-links a:hover, .nav-cat.is-active { color: var(--olive); } /* Inline category links (was a dropdown) */ .nav-cat { display: inline-flex; align-items: center; gap: 5px; } .nav-cat .soon { font-size: 7.5px; letter-spacing: 1px; color: var(--label-ink); font-weight: 500; line-height: 1.6; border: 1px solid rgba(143,78,34,0.5); border-radius: 20px; padding: 1px 5px; } .nav-divider { width: 1px; height: 15px; background: var(--line-strong); flex: 0 0 auto; } .nav-pill { border: 1px solid var(--charcoal); padding: 10px 20px !important; border-radius: 40px; transition: background 0.2s, color 0.2s, border-color 0.2s; } .nav-pill:hover { background: var(--charcoal); color: var(--off-white) !important; } .hamburger { display: none; background: none; border: none; cursor: pointer; width: 30px; height: 22px; position: relative; } .hamburger span { position: absolute; left: 0; height: 1.5px; width: 100%; background: var(--charcoal); transition: transform 0.25s, opacity 0.25s; } .hamburger span:nth-child(1) { top: 2px; } .hamburger span:nth-child(2) { top: 10px; } .hamburger span:nth-child(3) { top: 18px; } body.menu-open .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } body.menu-open .hamburger span:nth-child(2) { opacity: 0; } body.menu-open .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: 190; background: var(--off-white); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 8px; opacity: 0; visibility: hidden; transition: opacity 0.3s; padding: calc(var(--nav-h) + 30px) 40px 48px; overflow-y: auto; } body.menu-open .mobile-menu { opacity: 1; visibility: visible; } .mobile-menu .mm-label { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin: 18px 0 4px; } .mobile-menu a { font-family: var(--display); font-size: 26px; color: var(--charcoal); text-decoration: none; padding: 6px 0; display: inline-flex; align-items: center; gap: 12px; } .mobile-menu a .soon { font-family: var(--body); font-size: 9px; letter-spacing: 1.5px; color: var(--ember); border: 1px solid rgba(201,123,58,0.4); border-radius: 20px; padding: 2px 8px; text-transform: uppercase; } .mobile-menu a:hover, .mobile-menu a.is-active { color: var(--olive); } /* ===================================================================== BUTTONS ===================================================================== */ .btn-primary, .btn-ghost { display: inline-block; font-family: var(--body); font-size: 11px; font-weight: 400; letter-spacing: 3.5px; text-transform: uppercase; text-decoration: none; padding: 15px 34px; border-radius: 40px; cursor: pointer; transition: all 0.22s; } .btn-primary { background: var(--charcoal); color: var(--off-white); border: 1px solid var(--charcoal); } .btn-primary:hover { background: var(--olive); border-color: var(--olive); } .btn-ghost { background: transparent; color: var(--charcoal); border: 1px solid var(--charcoal); } .btn-ghost:hover { color: var(--olive); border-color: var(--olive); } /* ===================================================================== HERO (split layout, used by industry pages + home) ===================================================================== */ .hero { display: grid; grid-template-columns: 54% 46%; min-height: 78vh; max-height: 860px; margin-top: 16px; } .hero.hero--solo { grid-template-columns: 1fr; min-height: 62vh; text-align: center; place-items: center; } .hero-left { padding: 72px var(--pad-x); display: flex; flex-direction: column; justify-content: center; position: relative; } .hero.hero--solo .hero-left { align-items: center; max-width: 900px; margin: 0 auto; } .hero-left::after { content: ''; position: absolute; right: 0; top: 16%; bottom: 16%; width: 1px; background: linear-gradient(to bottom, transparent, var(--line-strong), transparent); } .hero.hero--solo .hero-left::after { display: none; } .hero-tag { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; display: flex; align-items: center; gap: 16px; } .hero-tag::after { content: ''; flex: 1; max-width: 60px; height: 1px; background: var(--gold); opacity: 0.4; } .hero.hero--solo .hero-tag { justify-content: center; } .hero.hero--solo .hero-tag::before { content: ''; flex: 1; max-width: 60px; height: 1px; background: var(--gold); opacity: 0.4; } .hero h1 { margin-bottom: 30px; } .hero h1 span { display: block; color: var(--olive); } .hero-desc { font-family: var(--body); font-weight: 300; font-style: italic; font-size: 18px; color: var(--muted); line-height: 1.75; max-width: 460px; margin-bottom: 30px; } .hero.hero--solo .hero-desc { margin-left: auto; margin-right: auto; } .hero-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .hero.hero--solo .hero-cta { justify-content: center; } .hero-bio { font-family: var(--body); font-weight: 300; font-size: 14.5px; line-height: 1.8; color: rgba(42,42,37,0.72); max-width: 480px; margin-top: 30px; } .hero-media { position: relative; overflow: hidden; display: grid; grid-template-rows: 3fr 2fr; min-height: 0; } .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-media img.hero-shot { cursor: zoom-in; transition: transform 0.6s ease; } .hero-media img.hero-shot:hover { transform: scale(1.03); } .hero-media-main { position: relative; overflow: hidden; background: var(--warm); min-height: 0; } .hero-media-sub { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; } .hero-media-sub > div { position: relative; overflow: hidden; background: var(--cream-soft); border-top: 2px solid var(--off-white); min-height: 0; } .hero-media-sub > div:last-child { border-left: 2px solid var(--off-white); } /* ===================================================================== INGREDIENT / DISCIPLINE STRIP ===================================================================== */ .strip { background: var(--terracotta); padding: 14px var(--pad-x); margin-top: 16px; display: flex; gap: 34px; align-items: center; justify-content: center; flex-wrap: wrap; } .strip span { font-size: 11px; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(250,246,240,0.92); white-space: nowrap; } .strip .dot { color: var(--gold); font-size: 6px; } /* ===================================================================== SECTION SCAFFOLD ===================================================================== */ .section { padding: 78px var(--pad-x); } .section--cream { background: var(--cream-soft); } .section--warm { background: var(--warm); } .section-head { margin-bottom: 40px; } .section-head.center { text-align: center; } .section-head .eyebrow { display: block; margin-bottom: 14px; } /* ===================================================================== FILM STRIP (horizontal reel) ===================================================================== */ .filmstrip-wrap { position: relative; margin: 0 calc(var(--pad-x) * -1); } .filmstrip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--pad-x) 20px; scrollbar-width: none; } .filmstrip::-webkit-scrollbar { display: none; } .filmstrip .frame { flex: 0 0 auto; width: clamp(240px, 26vw, 340px); aspect-ratio: 4/5; position: relative; overflow: hidden; scroll-snap-align: start; background: var(--warm); cursor: zoom-in; } .filmstrip .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .filmstrip .frame:hover img { transform: scale(1.04); } .filmstrip-nav { display: flex; gap: 10px; justify-content: flex-end; padding: 0 var(--pad-x); } .filmstrip-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--charcoal); cursor: pointer; font-size: 18px; transition: all 0.2s; } .filmstrip-btn:hover { background: var(--charcoal); color: var(--off-white); border-color: var(--charcoal); } /* ===================================================================== SERVICES LIST (dark) ===================================================================== */ .services { background: var(--charcoal); padding: 78px var(--pad-x); display: grid; grid-template-columns: 1fr 1.8fr; gap: 70px; align-items: start; } .services .eyebrow { color: var(--gold); display: block; margin-bottom: 20px; } .services h2 { color: var(--off-white); } .services-note { color: rgba(245,235,215,0.6); font-size: 14px; margin-top: 16px; line-height: 1.7; } .services-list { display: flex; flex-direction: column; } .service-item { padding: 26px 0; border-bottom: 1px solid rgba(250,248,244,0.08); display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; transition: padding-left 0.2s; } .service-item:hover { padding-left: 14px; } .service-num { font-size: 11px; letter-spacing: 4px; color: var(--gold); padding-top: 6px; } .service-name { font-family: var(--display); font-size: 24px; color: var(--off-white); } .service-desc { font-size: 13.5px; color: rgba(245,235,215,0.62); margin-top: 8px; line-height: 1.7; font-weight: 300; } /* ===================================================================== WORK TABS + GALLERY GRID ===================================================================== */ .tabs { display: flex; gap: 0; justify-content: center; flex-wrap: wrap; border-bottom: 1px solid rgba(201,168,76,0.22); } .tab { padding: 14px 30px; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; cursor: pointer; color: rgba(42,42,37,0.45); border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--body); transition: color 0.25s, border-color 0.25s; } .tab:hover { color: var(--olive); } .tab.is-active { color: var(--charcoal); border-bottom-color: var(--gold); } .subtabs { display: flex; gap: 0; justify-content: center; border-bottom: 1px solid rgba(201,168,76,0.15); margin-top: 4px; } .subtab { padding: 10px 26px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; color: rgba(42,42,37,0.5); border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--body); transition: color 0.2s, border-color 0.2s; } .subtab:hover { color: var(--olive); } .subtab.is-active { color: var(--charcoal); border-bottom-color: var(--ember); } .tab-panel { display: none; padding-top: 32px; } .tab-panel.is-active { display: block; } .subpanel { display: none; } .subpanel.is-active { display: block; } .brief { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1000px; margin: 8px auto 40px; padding-top: 24px; } .brief-label { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--label-ink); margin-bottom: 10px; } .brief-text { font-size: 14.5px; line-height: 1.8; color: rgba(42,42,37,0.8); font-weight: 300; } /* Photo galleries are a masonry layout with a fixed column count. The columns come from grid-template-columns: repeat(5, 1fr) (responsive below), so every category always shows the same number of photos per row. The masonry packing comes from grid-auto-rows: 1px plus a per-tile grid-row span that site.js sets from each image's height — tiles stack tight in their column with no height-mismatch white space, while natural aspect ratios are preserved (no cropping). Reels (.grid--reels) share one ratio and opt out below. The brand watermark is baked into the image files themselves (white corner mark), so it survives download; no CSS overlay is drawn on photo tiles. */ .grid { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 6px; row-gap: 0; grid-auto-rows: 1px; align-items: start; } .grid .item { position: relative; overflow: hidden; cursor: zoom-in; background: var(--warm); margin: 0; display: block; } .grid .item img { width: 100%; height: auto; display: block; transition: transform 0.6s ease, opacity 0.5s ease; } .grid .item:hover img { transform: scale(1.03); } /* Brand watermark is baked into each photo file (white corner mark) so it can't be stripped by downloading. Video tiles (.play) carry their own burned-in mark and show a play glyph instead. */ .grid .item.play::after { content: '▶'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.9); font-size: 30px; background: rgba(30,30,25,0.18); transition: background 0.2s; pointer-events: none; } .grid .item.play:hover::after { background: rgba(30,30,25,0.32); } /* Reels grid (portrait 9/16) — every reel shares one ratio, so a uniform row-based grid keeps rows tidy without ever affecting watermark size. */ .grid--reels { columns: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; grid-auto-rows: auto; align-items: start; } .grid--reels .item { aspect-ratio: 9/16; margin: 0; } .grid--reels .item img { width: 100%; height: 100%; object-fit: cover; } img[data-lazy] { opacity: 0; } img[data-lazy].loaded { opacity: 1; } /* ===================================================================== INDUSTRIES GRID (home) ===================================================================== */ .industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .industry { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--warm); text-decoration: none; color: var(--off-white); display: block; } .industry img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; filter: brightness(0.82); } .industry:hover img { transform: scale(1.05); } .industry::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,28,24,0.7) 0%, rgba(30,28,24,0.05) 55%); } .industry-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; z-index: 2; } .industry-name { font-family: var(--display); font-size: 27px; font-weight: 600; line-height: 1.05; } .industry-sub { font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.82); margin-top: 8px; } .industry-cta { font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; margin-top: 10px; color: var(--gold); display: inline-flex; align-items: center; gap: 7px; } .industry .ribbon { position: absolute; top: 16px; right: 16px; z-index: 3; font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; background: rgba(250,245,238,0.92); color: var(--label-ink); padding: 5px 12px; border-radius: 30px; font-weight: 500; } /* ===================================================================== COMING SOON ===================================================================== */ .coming { padding: 92px var(--pad-x); text-align: center; background: var(--cream-soft); } .coming-inner { max-width: 720px; margin: 0 auto; } .coming .eyebrow { display: block; margin-bottom: 18px; } .coming h2 { margin-bottom: 20px; } .coming p { font-size: 16px; line-height: 1.8; color: rgba(42,42,37,0.76); font-weight: 300; max-width: 600px; margin: 0 auto 14px; } .coming .coming-note { font-family: var(--display); font-style: italic; font-size: 21px; color: var(--charcoal); margin: 26px auto; } .coming-teaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 44px 0; } .coming-teaser .t { aspect-ratio: 3/4; overflow: hidden; position: relative; background: var(--warm); } .coming-teaser .t img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; } .coming-teaser .t:hover img { transform: scale(1.05); } .coming-teaser .t::after { content: ''; position: absolute; inset: 0; background: rgba(42,42,37,0.04); } .coming .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; } /* ===================================================================== ABOUT ===================================================================== */ .about { padding: 60px var(--pad-x) 80px; background: var(--off-white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .about-inner { max-width: 1100px; margin: 0 auto; } .about-head { text-align: center; max-width: 780px; margin: 0 auto; } .about-lede { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.55; color: var(--charcoal); margin-top: 22px; } .about-body { font-size: 15.5px; line-height: 1.85; color: rgba(42,42,37,0.82); font-weight: 300; margin-top: 22px; } .process { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); margin: 44px 0; padding: 34px 0; } .process-head { text-align: center; margin-bottom: 30px; } .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .process-num { font-size: 11px; letter-spacing: 4px; color: var(--label-ink); margin-bottom: 12px; } .process-name { font-family: var(--display); font-size: 21px; margin-bottom: 8px; } .process-desc { font-size: 13.5px; line-height: 1.7; color: rgba(42,42,37,0.72); font-weight: 300; } .about-foot { text-align: center; max-width: 720px; margin: 0 auto; } .about-foot-quote { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(18px, 2.1vw, 23px); line-height: 1.55; color: var(--charcoal); margin: 0 0 20px; } .about-foot-tag { font-size: 15px; line-height: 1.8; color: rgba(42,42,37,0.72); font-weight: 300; margin: 0 0 34px; } /* ===================================================================== CONTACT ===================================================================== */ .contact { padding: 78px var(--pad-x); background: color-mix(in srgb, var(--warm) 55%, var(--cream-soft) 45%); text-align: center; } @supports not (background: color-mix(in srgb, red, blue)) { .contact { background: #F2E8D5; } } .contact-head { max-width: 720px; margin: 0 auto 42px; } .contact p { font-weight: 300; font-size: 16px; font-style: italic; color: rgba(42,42,37,0.78); margin-top: 10px; } .contact-card { margin: 0 auto; padding: 34px 52px; border: 1px solid var(--line-strong); display: inline-grid; grid-template-columns: repeat(3, auto); gap: 26px 60px; text-align: left; justify-content: center; } .contact-item { display: flex; flex-direction: column; gap: 6px; } .contact-item-label { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--label-ink); } .contact-item-value { font-weight: 300; font-size: 16px; } .contact-item a { text-decoration: none; transition: color 0.2s; } .contact-item a:hover { color: var(--olive); } .contact-item--full { grid-column: 1 / -1; align-items: center; text-align: center; } /* ===================================================================== ENQUIRE (form) ===================================================================== */ .enquire { padding: 70px var(--pad-x) 84px; background: var(--warm); text-align: center; border-top: 1px solid var(--line-strong); } .enquire-head { max-width: 720px; margin: 0 auto 34px; } .enquire-head p { font-weight: 300; font-size: 16px; font-style: italic; color: rgba(42,42,37,0.78); margin-top: 10px; } .enquire-head .eyebrow { font-size: 17px; } .contact-form { max-width: 660px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 20px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--label-ink); } .form-hint { text-transform: none; letter-spacing: 0.3px; color: rgba(42,42,37,0.5); font-size: 11px; } .form-field input, .form-field textarea { background: transparent; border: none; border-bottom: 1px solid var(--line-strong); padding: 12px 0; font-family: var(--body); font-weight: 300; font-size: 15px; color: var(--charcoal); outline: none; transition: border-color 0.2s; width: 100%; } .form-field input:focus, .form-field textarea:focus { border-bottom-color: var(--olive); } .form-field textarea { resize: vertical; min-height: 90px; } .pill-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .pill { font-family: var(--body); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 9px 18px; border: 1px solid var(--line-strong); border-radius: 40px; background: transparent; color: rgba(42,42,37,0.72); cursor: pointer; transition: all 0.18s; } .pill:hover { border-color: var(--olive); color: var(--olive); } .pill[aria-pressed="true"] { background: var(--charcoal); color: var(--off-white); border-color: var(--charcoal); } .pill--cat::after { content: "+"; margin-left: 7px; font-size: 12px; font-weight: 600; opacity: 0.55; } .pill--cat[aria-expanded="true"]::after { content: "\2013"; } .subpill-wrap { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .subpill-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-left: 2px solid var(--terracotta); background: rgba(176,92,58,0.06); border-radius: 0 10px 10px 0; } .subpill-group[hidden] { display: none; } .subpill-cap { flex-basis: 100%; font-family: var(--body); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--terracotta); } .pill--sub { font-size: 10.5px; padding: 8px 15px; } body.motion-on .subpill-group:not([hidden]) { animation: subPop 0.26s ease both; } @keyframes subPop { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } .form-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; } .btn-form { font-family: var(--body); font-size: 11px; font-weight: 400; letter-spacing: 3.5px; text-transform: uppercase; padding: 15px 34px; border-radius: 40px; cursor: pointer; transition: all 0.22s; border: 1px solid var(--charcoal); } .btn-form.solid { background: var(--charcoal); color: var(--off-white); } .btn-form.solid:hover { background: var(--olive); border-color: var(--olive); } .btn-form.alt { background: transparent; color: var(--charcoal); } .btn-form.alt:hover { color: var(--olive); border-color: var(--olive); } .form-status { text-align: center; font-size: 13px; letter-spacing: 0.3px; color: var(--olive); min-height: 20px; margin-top: 4px; } /* ===================================================================== FOOTER ===================================================================== */ .footer { background: var(--charcoal); padding: 26px var(--pad-x); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; } .footer span, .footer a { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(245,235,215,0.62); font-weight: 300; text-decoration: none; } .footer .footer-brand { justify-self: start; display: inline-flex; align-items: baseline; gap: 12px; } .footer .footer-wordmark { font-family: var(--display); font-size: 20px; letter-spacing: 0.01em; text-transform: none; font-weight: 400; color: var(--off-white); } .footer .footer-wordmark .brand-amp { font-size: 1em; letter-spacing: 0.01em; text-transform: none; color: var(--ember); font-style: italic; font-weight: 500; } .footer .footer-copy { font-size: 10.5px; letter-spacing: 2px; text-transform: none; color: rgba(245,235,215,0.6); font-weight: 300; } .footer .footer-tagline { justify-self: center; text-align: center; font-size: 10.5px; letter-spacing: 3px; color: var(--gold); white-space: nowrap; } .footer [data-top] { justify-self: end; } .footer a:hover { color: var(--gold); } /* ===================================================================== WHATSAPP FAB (added on all pages via site.js; desktop lifts above the footer, touch devices never lift) ===================================================================== */ .wa-fab { position: fixed; bottom: 22px; right: 22px; width: 56px; height: 56px; border-radius: 50%; background: var(--ember); box-shadow: 0 6px 20px rgba(42,42,37,0.28), 0 2px 6px rgba(0,0,0,0.16); display: flex; align-items: center; justify-content: center; z-index: 9500; text-decoration: none; transition: bottom 0.3s cubic-bezier(0.2,0.7,0.2,1), transform 0.2s ease, box-shadow 0.2s ease; animation: waPulse 2.8s ease-in-out infinite; } .wa-fab:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(42,42,37,0.34), 0 4px 10px rgba(0,0,0,0.2); animation-play-state: paused; } .wa-fab svg { width: 30px; height: 30px; fill: #fff; } .wa-fab-label { position: absolute; right: 66px; background: var(--charcoal); color: var(--off-white); font-family: var(--body); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; padding: 8px 12px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(8px); transition: opacity 0.2s ease, transform 0.2s ease; } .wa-fab:hover .wa-fab-label { opacity: 1; transform: translateX(0); } @keyframes waPulse { 0%, 100% { box-shadow: 0 6px 20px rgba(42,42,37,0.28), 0 2px 6px rgba(0,0,0,0.16), 0 0 0 0 rgba(201,123,58,0.5); } 50% { box-shadow: 0 6px 20px rgba(42,42,37,0.28), 0 2px 6px rgba(0,0,0,0.16), 0 0 0 14px rgba(201,123,58,0); } } @media (prefers-reduced-motion: reduce) { .wa-fab { animation: none; } } /* ===================================================================== LIGHTBOX (image + video) ===================================================================== */ .lightbox { --gutter: 84px; display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(10,10,8,0.94); align-items: center; justify-content: center; } .lightbox.open { display: flex; } .lightbox-media { max-width: calc(100vw - (var(--gutter) * 2)); max-height: 88vh; object-fit: contain; box-shadow: 0 16px 60px rgba(0,0,0,0.7); } .lightbox-close { position: absolute; top: 22px; right: 34px; color: var(--off-white); font-size: 34px; cursor: pointer; opacity: 0.75; font-weight: 300; line-height: 1; background: none; border: none; } .lightbox-close:hover { opacity: 1; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(20,20,18,0.55); color: var(--off-white); font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.85; transition: opacity 0.2s, background 0.2s; border: none; } .lightbox-nav:hover { opacity: 1; background: rgba(20,20,18,0.8); } .lightbox-prev { left: calc((var(--gutter) - 54px) / 2); } .lightbox-next { right: calc((var(--gutter) - 54px) / 2); } /* ===================================================================== REVEAL ON SCROLL ===================================================================== */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none; } html { scroll-behavior: auto; } } /* ===================================================================== MOTION EFFECTS (page-scoped scroll / hover / cursor animations) --------------------------------------------------------------------- Injected + wired by site.js enhanceMotion(). Progressive enhancement: the pre-animation states live behind JS-added classes (.rf, .dev-tile, .duo, .grain, .torch) or body.motion-on, and JS only adds those when the visitor has NOT requested reduced motion — so with no JS, or with reduce-motion, every image renders clean and static. ===================================================================== */ /* --- Ken Burns — F&B gallery, slow zoom + pan on scroll-in (replays) --- */ body.motion-on[data-page="fnb"] .grid .item.kb img { transform-origin: var(--kb-ox, 60%) var(--kb-oy, 40%); } body.motion-on[data-page="fnb"] .grid .item.kb.in img { animation: kenTile 7s ease-in-out both; } @keyframes kenTile { 0% { transform: scale(1.03) translate(0, 0); } 100% { transform: scale(1.14) translate(var(--kb-tx, -3%), var(--kb-ty, -2%)); } } /* --- Rack Focus — Interiors gallery, blur pulls sharp on scroll-in (replays) --- */ body.motion-on[data-page="interiors"] .grid .item.rf img { filter: blur(15px) brightness(1.05); transition: filter 1.4s ease; } body.motion-on[data-page="interiors"] .grid .item.rf.in img { filter: none; } /* --- Darkroom "Develop" — Events gallery, on scroll-in (replays). Mirrors the Events standalone portfolio darkroom effect exactly. --- */ body[data-page="events"] .grid .item.dev-tile { background: #e9e5da; } body[data-page="events"] .grid .item.dev-tile img { transform: scale(1.06); filter: contrast(.3) brightness(1.7) saturate(.15) sepia(.1); transition: filter 3.4s cubic-bezier(.4,0,.2,1), transform 3.4s cubic-bezier(.4,0,.2,1); } body[data-page="events"] .grid .item.dev-tile.developed img { transform: none; filter: none; } body[data-page="events"] .grid .item.dev-tile .bath { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(150deg, #f4f0e8, #e7e3d9); opacity: 1; transition: opacity 3.4s ease; } body[data-page="events"] .grid .item.dev-tile.developed .bath { opacity: 0; } body[data-page="events"] .grid .item.dev-tile .cast { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(95,122,156,.30); opacity: 1; transition: opacity 3.4s ease; } body[data-page="events"] .grid .item.dev-tile.developed .cast { opacity: 0; } body[data-page="events"] .grid .item.dev-tile .sheen { position: absolute; top: -30%; left: -60%; width: 48%; height: 160%; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(0) rotate(9deg); opacity: 0; } body[data-page="events"] .grid .item.dev-tile.developing .sheen { animation: devSweep 2.6s ease forwards; } @keyframes devSweep { 0% { opacity: 0; transform: translateX(0) rotate(9deg); } 22% { opacity: .85; } 100% { opacity: 0; transform: translateX(360%) rotate(9deg); } } /* --- Duotone → Colour — Lifestyle teasers, on scroll-in (replays) --- */ body[data-page="lifestyle"] .coming-teaser .t.duo img { filter: sepia(.85) saturate(1.9) hue-rotate(-12deg) brightness(.92) contrast(1.06); transition: filter 2.2s ease; } body[data-page="lifestyle"] .coming-teaser .t.duo.in img { filter: none; } body[data-page="lifestyle"] .coming-teaser .t.duo .tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(160deg, rgba(201,123,58,.35), rgba(30,20,12,.28)); mix-blend-mode: multiply; opacity: 1; transition: opacity 2.2s ease; } body[data-page="lifestyle"] .coming-teaser .t.duo.in .tint { opacity: 0; } /* --- Film Grain Dissolve — Hospitality teasers, on scroll-in (replays) --- */ body[data-page="hospitality"] .coming-teaser .t.grain img { filter: contrast(1.15) brightness(.9) saturate(.7); transform: scale(1.04); transition: filter 2.4s ease, transform 2.4s ease; } body[data-page="hospitality"] .coming-teaser .t.grain.in img { filter: none; transform: none; } body[data-page="hospitality"] .coming-teaser .t.grain .noise { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .95; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 170px; transition: opacity 2.4s ease; } body[data-page="hospitality"] .coming-teaser .t.grain.in .noise { opacity: 0; } /* --- Cursor Spotlight — Products teasers, warm torch follows the pointer --- */ body[data-page="products"] .coming-teaser .t.torch { cursor: crosshair; } body[data-page="products"] .coming-teaser .t.torch .mask { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle 110px at var(--mx, 50%) var(--my, 50%), rgba(20,16,12,0) 0, rgba(20,16,12,0) 62px, rgba(18,14,10,0.86) 150px); transition: background 0.12s ease; } /* On touch devices there is no pointer to follow, so the torch becomes a drag-to-reveal spotlight: the teaser sits clean at rest and the dark mask only lights up while a finger drags across it (paired with the products touch handlers in site.js). */ @media (hover: none) and (pointer: coarse) { body[data-page="products"] .coming-teaser .t.torch { cursor: default; } body[data-page="products"] .coming-teaser .t.torch .mask { opacity: 0; transition: background 0.12s ease, opacity 0.25s ease; } body[data-page="products"] .coming-teaser .t.torch.is-touching .mask { opacity: 1; } } /* --- Film Sprocket Pan — Ember filmstrips: charcoal reel panel that hugs the frames with terracotta sprocket perforations on the top AND bottom edges (symmetric, thin). The nav buttons sit below the reel on the section background, unchanged. The sprocket graphic is static (always on); the continuous projector pan (JS) needs motion-on. --- */ .filmstrip-reel { position: relative; background: var(--charcoal); border-radius: 2px; } .filmstrip-reel .filmstrip { padding-top: 6px; padding-bottom: 6px; } .filmstrip-reel::before, .filmstrip-reel::after { content: ""; position: absolute; left: 0; right: 0; height: 15px; z-index: 2; pointer-events: none; background-color: var(--charcoal); background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(176,92,58,0.8) 6px 22px, transparent 22px 28px); background-size: 100% 8px; background-position: center; background-repeat: no-repeat; } .filmstrip-reel::before { top: 0; } .filmstrip-reel::after { bottom: 0; } .filmstrip-nav { margin-top: 16px; } body.motion-on .filmstrip { scroll-snap-type: none; } /* While the lightbox is open, its native