/* ============================================================ MERGED CSS Base: honeyshade(2).css Added from honeyshade-pages-v2(1).css where selectors did not conflict. Conflicting duplicate selectors are in honeyshade-review-overlaps.css. ============================================================ */ /* ============================================================ HONEYSHADE — Colours & Type Rooftop restaurant · lounge · social — London Brand guidelines: B3 Designers, June 2026 ============================================================ */ /* ---- FONTS ------------------------------------------------- Brand fonts are commercial / non-Google and NOT bundled here: · Display / logo : "Penumbra Serif Std Semibold" (Adobe / Type Network — paid) · Body / tagline : "Chanticleer Roman" (dafont — free, manual install) Until the licensed files are dropped into /fonts, we fall back to the closest free Google substitutes: · Display -> Marcellus (glyphic, flared, all-caps elegance) · Body -> EB Garamond (old-style book serif) Load substitutes in HTML : ------------------------------------------------------------ */ :root { /* ---------- BRAND PALETTE (7 colours, from guidelines) ---------- */ --plum: #2e1118; /* Main 1 · deepest — "shade", night */ --mauve: #543241; /* Main 2 · plum-mauve */ --gold: #67552d; /* Secondary · bronze/olive gold — "honey" */ --honey: #d5b096; /* Additional · warm honey tan */ --navy: #14223b; /* Additional · midnight blue accent */ --blush: #dbcabf; /* Additional · pale warm blush */ --paper: #f2f2f2; /* Additional · off-white paper */ --white: #ffffff; /* ---------- SEMANTIC — DAY (light) THEME ---------- */ --bg: var(--paper); /* page surface */ --bg-raised: #ffffff; /* cards / sheets */ --bg-sunk: var(--blush); /* wells, alt sections */ --ink: var(--plum); /* primary text / marks */ --ink-soft: var(--mauve); /* secondary text */ --accent: var(--gold); /* gold details / rules */ --accent-warm: var(--honey); /* warm highlight */ --line: rgba(46,17,24,.14); --line-strong: rgba(46,17,24,.28); /* ---------- TYPE FAMILIES ---------- */ --font-display: "Marcellus", "Penumbra Serif Std", "Optima", "Albertus", serif; --font-body: "EB Garamond", "Chanticleer Roman", "Hoefler Text", Georgia, serif; /* ---------- TYPE SCALE (translated from A4 print spec) ---------- Guidelines: Title 38/39 tr+50 · Subtitle 18/22 tr+50 · Copy 12/17 tr0 InDesign tracking 50 == 0.05em. Scaled up for screen. */ --tracking-display: 0.06em; /* generous, engraved feel */ --tracking-eyebrow: 0.30em; /* wide caps labels */ --tracking-body: 0; --fs-display: clamp(2.6rem, 6vw, 4.75rem); --fs-h1: clamp(2.1rem, 4.4vw, 3.25rem); --fs-h2: clamp(1.55rem, 3vw, 2.25rem); --fs-h3: 1.5rem; --fs-sub: 1.25rem; --fs-body: 1.0625rem; --fs-small: 0.875rem; --fs-eyebrow: 0.78rem; --lh-tight: 1.04; --lh-head: 1.12; --lh-body: 1.62; /* ---------- SPACING (8pt base) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---------- RADII — small, restrained, editorial ---------- */ --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-pill: 999px; /* ---------- SHADOWS — soft, warm-tinted, low ---------- */ --shadow-sm: 0 1px 2px rgba(46,17,24,.08); --shadow-md: 0 8px 24px -12px rgba(46,17,24,.30); --shadow-lg: 0 30px 60px -28px rgba(46,17,24,.45); } /* ---------- NIGHT (dark) THEME ---------- Apply on or .theme-night */ [data-theme="night"], .theme-night { --bg: var(--plum); --bg-raised: #3a1d25; /* lifted plum */ --bg-sunk: #240d13; --ink: var(--blush); /* warm light text */ --ink-soft: var(--honey); --accent: var(--honey); /* honey glows at night */ --accent-warm: var(--gold); --line: rgba(219,202,191,.16); --line-strong: rgba(219,202,191,.32); --shadow-md: 0 10px 30px -12px rgba(0,0,0,.6); --shadow-lg: 0 36px 70px -28px rgba(0,0,0,.72); } /* WordPress block theme spacing reset */ .wp-site-blocks { padding-top: 0 !important; padding-bottom: 0 !important; } .wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } .wp-block-template-part { margin-block-start: 0 !important; margin-block-end: 0 !important; } .wp-block-template-part > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } body .is-layout-flow > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .display, h1, h2, h3, .eyebrow { font-family: var(--font-display); font-weight: 400; color: var(--ink); } .display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); text-transform: uppercase; } h1 { font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: var(--tracking-display); text-transform: uppercase; margin: 0 0 var(--s-5); } h2 { font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 var(--s-4); } h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: .02em; margin: 0 0 var(--s-3); } .subtitle { font-family: var(--font-body); font-style: italic; font-size: var(--fs-sub); color: var(--ink-soft); line-height: 1.4; } .eyebrow { font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); } p { margin: 0 0 var(--s-4); max-width: 64ch; text-wrap: pretty; } a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; } small, .small { font-size: var(--fs-small); } /* Hairline gold rule — a recurring brand device */ .rule-gold { height: 1px; background: var(--accent); border: 0; opacity: .6; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--plum);overflow-x:hidden} img{display:block;max-width:100%} ::selection{background:var(--gold);color:var(--paper)} /* ---------------- scroll reveal ---------------- */ @media (prefers-reduced-motion: no-preference) { .reveal{opacity:0;transform:scale(0.93) translateY(12px);transition:opacity .75s ease,transform .75s cubic-bezier(.22,.68,0,1.08);transition-delay:var(--reveal-delay,0s)} .reveal.is-visible{opacity:1;transform:scale(1) translateY(0)} .reveal-fade{opacity:0;transition:opacity .9s ease;transition-delay:var(--reveal-delay,0s)} .reveal-fade.is-visible{opacity:1} } /* ---------------- layout primitives ---------------- */ .page{position:relative;min-height:100vh;isolation:isolate;z-index:2} .section{position:relative;padding:clamp(64px,10vw,140px) clamp(22px,7vw,120px); background:var(--sbg,var(--paper));color:var(--sink,var(--plum));--accent:var(--sacc,var(--gold))} .h{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em; font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.02;margin:0;color:inherit} .eyebrow{display:block;margin-bottom:18px} .sec-head{max-width:760px;margin-bottom:clamp(36px,5vw,64px)} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .sec-lede{font-family:var(--font-body);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.6; margin:22px 0 0;max-width:54ch;opacity:.86} .sec-lede.center{margin-left:auto;margin-right:auto} .fill{width:100%;height:100%} /* image-slot absolute fill — height:100% doesn't resolve when parent height comes from aspect-ratio alone; position:absolute;inset:0 always works */ .exp-media,.gal-cell,.loc-map{position:relative} /* inner parallax wrappers — slightly oversized so image can pan without clipping */ .exp-inner,.gal-inner{position:absolute;inset:-14% 0;will-change:transform} .exp-inner image-slot, .gal-inner image-slot, .loc-map > image-slot{position:absolute;inset:0;width:100%;height:100%} /* ---------------- buttons ---------------- */ .btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display); text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;line-height:1;cursor:pointer; padding:1.05em 1.5em;border-radius:var(--r-sm);border:1px solid transparent;text-decoration:none; transition:background .25s,color .25s,border-color .25s,transform .15s;white-space:nowrap} .btn i{font-size:1.15em} .btn:active{transform:translateY(1px) scale(.98)} /* -- icon micro-animations: icons slide the direction they point -- */ .btn i,.nav-link i,.foot-col a i,.loc-actions a i{ display:inline-flex;transition:transform .25s cubic-bezier(.34,1.56,.64,1)} /* right-pointing arrows */ .btn:hover .ph-arrow-right,.nav-link:hover .ph-arrow-right{transform:translateX(4px)} /* outbound arrows (↗) */ .btn:hover .ph-arrow-up-right,.nav-link:hover .ph-arrow-up-right, .foot-col a:hover .ph-arrow-up-right,.loc-actions a:hover .ph-arrow-up-right{transform:translate(3px,-3px)} /* down arrows (scroll) */ .hero-scroll:hover .ph-arrow-down{transform:translateY(4px)} /* map pin on location card */ .loc-map:hover .ph-map-pin{transform:translateY(-3px) scale(1.12)} .loc-map-pin i{display:inline-flex;transition:transform .3s cubic-bezier(.34,1.56,.64,1)} /* -- button lift on hover -- */ .btn{transition:background .25s,color .25s,border-color .25s,transform .22s cubic-bezier(.34,1.3,.64,1),box-shadow .22s} .btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.14)} .btn:active{transform:translateY(0) scale(.98);box-shadow:none} /* -- menu rows: nudge right on hover -- */ .menu-row{transition:transform .3s cubic-bezier(.22,.68,0,1.1),padding-left .3s} .menu-row:hover{transform:translateX(6px)} /* -- nav links: icon nudge already covered above; letter-spacing breathe -- */ .nav-link{transition:opacity .2s,color .2s,letter-spacing .25s} .nav-link:hover{letter-spacing:.18em} /* -- footer links slide -- */ .foot-col a{transition:color .2s,opacity .2s,transform .25s cubic-bezier(.22,.68,0,1.1)} .foot-col a:hover{transform:translateX(4px)} /* -- mobile tap feedback (active state fires on touch) -- */ @media (hover: none) { .btn:active{transform:scale(.96);box-shadow:none} .gal-cell:active{transform:scale(.98)} .exp-card:active .exp-media{transform:scale(1.015)} .menu-row:active{transform:translateX(4px)} } .btn-solid-light{background:var(--honey);color:var(--plum)} .btn-solid-light:hover{background:#e6c8b0} .btn-solid-dark{background:var(--plum);color:var(--paper)} .btn-solid-dark:hover{background:#43212b} .btn-ghost-light{background:transparent;color:var(--paper);border-radius:0;border-bottom:1px solid rgba(245,245,245,.6);padding:1.05em .3em} .btn-ghost-light:hover{border-color:var(--honey);color:var(--honey)} .btn-outline-light{background:transparent;border-color:var(--honey);color:var(--honey)} .btn-outline-light:hover{background:rgba(213,176,150,.14)} /* ---------------- nav ---------------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between; padding:12px clamp(22px,7vw,120px);opacity:1; transition:background .4s,backdrop-filter .4s,padding .35s cubic-bezier(.22,.68,0,1.1),box-shadow .4s} .nav.nav-centered{justify-content: flex-end;padding-right: 26px;padding-left: 26px;} .nav-burger-always {margin-left: auto;} .nav-brand{transition:opacity .5s ease} .nav-brand img{height:22px;width:auto;transition:height .35s cubic-bezier(.22,.68,0,1.1)} .nav.is-scrolled{padding-top:18px;padding-bottom:18px} /* transparent nav over hero — light links */ .nav:not(.is-scrolled) .nav-link{color:rgba(245,235,225,.88)} .nav:not(.is-scrolled) .nav-link:hover{color:var(--honey)} .nav:not(.is-scrolled) .nav-cta{border-color:rgba(245,235,225,.55);color:rgba(245,235,225,.88)} .nav:not(.is-scrolled) .nav-cta:hover{background:var(--honey);border-color:var(--honey);color:var(--plum)} .nav:not(.is-scrolled) .nav-burger{color:rgba(245,235,225,.88)} .nav.is-scrolled .nav-brand img{height:30px} .nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,34px)} .nav-link{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;white-space:nowrap; color:var(--plum);text-decoration:none;opacity:.92;transition:opacity .2s,color .2s;display:inline-flex;align-items:center;gap:.4em} .nav-link:hover{opacity:1;color:var(--honey)} .nav-cta{border:1px solid currentColor;padding:.7em 1.1em;border-radius:var(--r-pill);opacity:1} .nav-cta:hover{background:var(--honey);border-color:var(--honey);color:var(--plum)} /* scrolled light (day) */ .nav.is-scrolled:not(.nav-dark){background:rgba(242,242,242,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)} .nav.is-scrolled:not(.nav-dark) .nav-link{color:var(--plum)} .nav.is-scrolled:not(.nav-dark) .nav-link:hover{color:var(--gold)} /* dark (night / late journey) */ .nav.nav-dark.is-scrolled{background:rgba(36,13,19,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(219,202,191,.12)} .nav.nav-dark .nav-link{color:var(--blush)} .nav.nav-dark .nav-burger, .nav.nav-dark.is-scrolled .nav-burger { color: var(--honey); } .nav-burger{display:none;background:none;border:0;color:var(--plum);font-size:1.7rem;cursor:pointer;line-height:1} .nav.is-scrolled:not(.nav-dark) .nav-burger{color:var(--plum)} /* centered nav variant */ .nav-centered{justify-content:flex-end} .nav-brand-center{position:absolute;left:50%;transform:translateX(-50%); opacity:0;pointer-events:none;transition:opacity .4s} .nav-brand-center.nav-brand-visible{opacity:1;pointer-events:auto} .nav-burger-always{display:block} /* nav sheet — full-screen mobile, right panel desktop */ .nav-sheet-backdrop{position:fixed;inset:0;z-index:79;background:rgba(28,8,12,.55); backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .38s} .nav-sheet-backdrop.is-open{opacity:1;pointer-events:auto} .nav-sheet{position:fixed;inset:0;z-index:80;background:linear-gradient(160deg,#3a1d25,#200a10); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .35s,transform .35s} .nav-sheet.is-open{opacity:1;visibility: visible;pointer-events:auto;transform:none} .nav-sheet-close{position:absolute;top:22px;right:26px;background:none;border:0;color:var(--honey);font-size:2rem;cursor:pointer} .nav-sheet-emblem{height:70px;margin-bottom:24px;opacity:.95} .nav-sheet-links{display:flex;flex-direction:column;align-items:center;gap:4px} .nav-sheet-links a{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em; font-size:1.7rem;color:var(--blush);text-decoration:none;padding:10px;display:inline-flex;align-items:center;gap:.4em} .nav-sheet-links a:hover{color:var(--honey)} .nav-sheet-tag{font-family:var(--font-body);font-style:italic;color:var(--honey);margin-top:26px;letter-spacing:.06em} /* desktop: slide in from right, ~1/3 width */ @media(min-width:760px){ .nav-sheet{inset:0 0 0 auto;width:min(440px,38vw);transform:translateX(100%); border-left:1px solid rgba(255,235,210,.09)} .nav-sheet.is-open{transform:translateX(0)} .nav-sheet-links a{font-size:1.35rem} } /* video hero — dial back the ambient overlay so footage shows through */ .hero-video .hero-amb{ background: radial-gradient(120% 60% at 50% 0%, rgba(255,228,178,.32) 0%, transparent 55%), linear-gradient(to bottom, rgba(28,8,12,.45) 0%, rgba(28,8,12,.15) 35%, rgba(28,8,12,.3) 70%, rgba(28,8,12,.72) 100%); animation:none} /* centered hero copy */ .hero-center .hero-inner{justify-content:center} .hero-center .hero-copy{text-align:center;max-width:760px} .hero-center .hero-actions{justify-content:center} .hero-actions p {margin: 0;display: contents;} .hero-center .hero-logo{margin-left:auto;margin-right:auto} /* -------- scroll-over / curtain effects -------- */ /* Hero stays pinned; sections (z-index:1) slide over it as they scroll up. Journey mode only — in night mode sections are transparent so we skip sticky. */ .mode-journey .hero{position:sticky;top:0;height:100svh;z-index:0} .section{z-index:1} .marquee{position:relative;z-index:1} /* Footer — sticky reveal: sits behind content (z-index:1), exposed as page scrolls away */ /* ---------------- hero ---------------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--plum)} .hero-media{position:absolute;inset:-8% 0 0 0;z-index:0;will-change:transform} .hero-slot{position:absolute;inset:0;width:100%;height:100%} .hero-amb{position:absolute;inset:0;background: radial-gradient(120% 80% at 72% 12%, rgba(255,228,178,.95) 0%, rgba(231,178,128,.6) 26%, rgba(132,74,72,0) 58%), radial-gradient(90% 70% at 20% 0%, rgba(255,245,225,.5) 0%, rgba(255,245,225,0) 45%), linear-gradient(176deg, #caa06f 0%, #9a5f53 34%, #5a2f38 62%, #2e1118 100%); background-size:140% 140%,140% 140%,100% 100%;animation:ambdrift 26s ease-in-out infinite alternate} .hero-amb::after{content:"";position:absolute;inset:0;background: radial-gradient(60% 40% at 50% 120%, rgba(0,0,0,.5), transparent 70%); mix-blend-mode:multiply;opacity:.6} @keyframes ambdrift{from{background-position:0% 0%,100% 0%,0 0}to{background-position:30% 18%,60% 30%,0 0}} @media (prefers-reduced-motion: reduce){.hero-amb{animation:none}} .hero-videotag{position:absolute;right:clamp(22px,7vw,120px);bottom:96px;z-index:3;display:inline-flex;align-items:center;gap:.5em; font-family:ui-monospace,Menlo,monospace;font-size:.72rem;letter-spacing:.04em;color:rgba(255,245,235,.82); background:rgba(28,8,12,.4);backdrop-filter:blur(4px);padding:.5em .8em;border-radius:var(--r-sm);border:1px solid rgba(255,235,210,.22)} .hero-videotag i{font-size:1.2em} .hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(28,8,12,.82) 0%,rgba(28,8,12,.18) 38%,rgba(28,8,12,0) 64%)} .hero-scroll-veil{position:absolute;inset:0;z-index:2;background:#1c080c;pointer-events:none;transition:opacity .1s linear} .hero-inner{position:relative;z-index:2;width:100%;padding:0 clamp(22px,7vw,120px) clamp(72px,9vw,120px); display:flex;align-items:flex-end} .hero-copy{max-width:680px} .hero-eyebrow{color:var(--honey)} .hero-logo{width:min(560px,84vw);margin:14px 0 26px;filter:drop-shadow(0 6px 30px rgba(0,0,0,.35))} .hero-lede{font-family:var(--font-body);font-size:clamp(1.1rem,1.9vw,1.45rem);line-height:1.55;color:#f6ece1;max-width:46ch;margin:0 auto 32px} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .hero-scroll{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--honey);text-decoration:none; font-family:var(--font-display);text-transform:uppercase;letter-spacing:.22em;font-size:.66rem} .hero-scroll i{font-size:1.2rem;animation:bob 1.8s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} /* split variant */ .hero-split .hero-inner-split{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:flex-end} .hero-splitpanel{align-self:stretch;display:none} @media(min-width:900px){ .hero-split .hero-media{right:38%} .hero-split .hero-scrim{right:38%} .hero-splitpanel{display:flex;align-items:center;justify-content:center;background:linear-gradient(200deg,#3a1d25,#200a10); position:absolute;top:0;right:0;bottom:0;width:38%;z-index:1} .hero-splitpanel img{width:46%;opacity:.92} .hero-split .hero-inner{align-items:center;min-height:100svh} } /* ---- tab bar ---- */ .tab-bar{position:sticky;top:54px;z-index:50;background:var(--plum); border-bottom:1px solid rgba(219,202,191,.12);display:flex;justify-content:center} .tab-btn{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.2em; font-size:.7rem;color:var(--blush);background:none;border:0;cursor:pointer; padding:17px clamp(20px,4vw,56px);opacity:.52; transition:opacity .25s,color .25s;position:relative;white-space:nowrap; display:flex;flex-direction:column;align-items:center;gap:3px} .tab-btn::after{content:"";position:absolute;bottom:-1px;left:15%;right:15%;height:2px; background:var(--honey);transform:scaleX(0);transform-origin:center; transition:transform .3s cubic-bezier(.22,.68,0,1.1)} .tab-btn.active{opacity:1;color:var(--honey)} .tab-btn.active::after{transform:scaleX(1)} .tab-btn:hover:not(.active){opacity:.78} .tab-sub{font-family:var(--font-body);font-size:.8rem;font-style:italic; letter-spacing:0;text-transform:none;opacity:.7;line-height:1} .tab-btn:focus { outline: none; } .tab-btn:focus-visible { outline: none; box-shadow: none; } .tab-btn::-moz-focus-inner { border: 0; } /* ---- panels ---- */ .panel{display:none} .panel.active{display:block;animation:panelin .4s ease} @keyframes panelin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} .panel-day{background:var(--paper);color:var(--plum)} .panel-eve{background:var(--plum);color:var(--blush)} .panel-dri{background:var(--blush);color:var(--plum)} /* ---- menu inner ---- */ .menu-inner{padding:clamp(52px,7vw,96px) clamp(22px,7vw,120px);position:relative} .two-col{display:grid;grid-template-columns:1fr 1fr; gap:clamp(0px,1vw,8px) clamp(48px,8vw,104px)} /* ---- responsive ---- */ @media (max-width: 900px) { .menu-page .two-col, .menu-page .beer-softs { grid-template-columns: 1fr; gap: 0; } .menu-page .spirits-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .menu-page .menu-inner { padding-left: 24px; padding-right: 24px; } .menu-page .dish-top { align-items: flex-start; gap: 8px; } .menu-page .dish-left { max-width: none; flex: 1; flex-wrap: wrap; } .menu-page .dish-leader { display: none; } .menu-page .dish-price { margin-left: auto; } .menu-page .dish-name { max-width: 100%; } .menu-page .dish-tags { flex-wrap: wrap; } } .panel-img-wrap { aspect-ratio: 3 / 1; overflow: hidden; } .panel-image { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 700px) { .panel-img-wrap { aspect-ratio: 16 / 9; } } .sec-divider { display: flex; align-items: center; justify-content: center; margin: clamp(40px, 5vw, 58px) 0; gap: 18px; } .panel-day .dline, .panel-dri .dline { background: var(--plum); } .sec-divider .dline { display: block; width: 52px; height: 1px; opacity: .2; } .sec-divider img { height: 22px; opacity: .26; } /* ---- section header ---- */ .msec{margin-bottom:clamp(40px,5vw,60px)} .msec:last-child{margin-bottom:0} .msec-head{display:flex;align-items:center;gap:14px;margin-bottom:18px} .msec-label{font-family:var(--font-display);text-transform:uppercase; letter-spacing:.28em;font-size:.66rem;flex-shrink:0} .msec-rule{flex:1;height:1px;opacity:.3} .panel-day .msec-label{color:var(--gold)} .panel-day .msec-rule{background:var(--gold)} .panel-eve .msec-label{color:var(--honey)} .panel-eve .msec-rule{background:var(--honey)} .panel-dri .msec-label{color:var(--gold)} .panel-dri .msec-rule{background:var(--gold)} .brunch-band .msec-label{color:var(--gold)} .brunch-band .msec-rule{background:var(--gold)} .panel-bg-emblem { position: absolute; top: clamp(36px, 5.5vw, 72px); right: clamp(16px, 4.5vw, 72px); height: clamp(72px, 12vw, 150px); opacity: .055; pointer-events: none; z-index: 0; } .brunch-corner-bee { position: absolute; top: clamp(18px, 2.5vw, 28px); right: clamp(18px, 3.5vw, 36px); height: clamp(38px, 5.5vw, 60px); opacity: .18; pointer-events: none; } /* ---- dish row ---- */ .dish{padding:12px 0;border-top:1px solid} .dish:first-child{border-top:0} .panel-day .dish{border-color:rgba(46,17,24,.1)} .panel-eve .dish{border-color:rgba(219,202,191,.13)} .panel-dri .dish{border-color:rgba(46,17,24,.12)} .brunch-band .dish{border-color:rgba(46,17,24,.13)} .dish-top{display:flex;align-items:baseline;gap:7px} .dish-left{display:inline-flex;align-items:baseline;gap:5px;flex-shrink:0;max-width:68%} .dish-name{font-family:var(--font-display);text-transform:uppercase; letter-spacing:.04em;font-size:clamp(.86rem,1.25vw,1.02rem);line-height:1.2} .dish-chef{font-size:.68rem;flex-shrink:0;line-height:1} .panel-day .dish-chef,.brunch-band .dish-chef{color:var(--gold)} .panel-eve .dish-chef{color:var(--honey)} .panel-dri .dish-chef{color:var(--gold)} .dish-tags{display:inline-flex;gap:3px;flex-shrink:0;align-items:center} .dtag{font-family:var(--font-display);font-size:.52rem;letter-spacing:.1em; padding:2px 5px;border-radius:var(--r-xs);text-transform:uppercase; line-height:1.5;flex-shrink:0;white-space:nowrap} .panel-day .dtag,.brunch-band .dtag{border:1px solid rgba(103,85,45,.32);color:var(--gold)} .panel-eve .dtag{border:1px solid rgba(213,176,150,.32);color:var(--honey)} .panel-dri .dtag{border:1px solid rgba(103,85,45,.32);color:var(--gold)} .dish-leader{flex:1;min-width:20px;border-bottom:1px dotted;opacity:.22; transform:translateY(-4px);align-self:flex-end;margin-bottom:5px} .panel-day .dish-leader,.brunch-band .dish-leader{border-color:var(--plum)} .panel-eve .dish-leader{border-color:var(--blush)} .panel-dri .dish-leader{border-color:var(--plum)} .dish-price{font-family:var(--font-body);font-size:.98rem;flex-shrink:0} .panel-day .dish-price,.brunch-band .dish-price{color:var(--gold)} .panel-eve .dish-price{color:var(--honey)} .panel-dri .dish-price{color:var(--gold)} .dish-desc{font-family:var(--font-body);font-style:italic;font-size: var(--fs-body); margin-top:4px;opacity:.62;line-height:1.42;display:block} /* ---- wine price ---- */ .dish-wine-price{display:inline-flex;align-items:center;gap:5px; font-family:var(--font-body);font-size:.88rem;flex-shrink:0;white-space:nowrap} .wine-label{font-size:.6rem;font-family:var(--font-display);letter-spacing:.1em; text-transform:uppercase;opacity:.5} .wine-sep{opacity:.28;font-size:.8rem} /* ---- sub-heads ---- */ .sub-head{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.22em; font-size:.62rem;margin:24px 0 2px;display:block} .panel-day .sub-head,.brunch-band .sub-head{color:var(--gold);opacity:.8} .panel-eve .sub-head{color:var(--honey);opacity:.75} .panel-dri .sub-head{color:var(--gold);opacity:.8} /* ---- brunch band ---- */ .brunch-band{background:var(--blush);border-radius:var(--r-md); padding:clamp(30px,4.5vw,52px) clamp(22px,5vw,52px); margin-top:clamp(48px,6vw,72px);position:relative;overflow:hidden} .brunch-badge{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.2em; font-size:.62rem;background:var(--gold);color:var(--paper); padding:5px 12px;border-radius:var(--r-pill);display:inline-block;margin-bottom:12px} .brunch-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em; font-size:clamp(1.35rem,2.5vw,1.85rem);margin:0 0 5px;color:var(--plum)} .brunch-note{font-family:var(--font-body);font-style:italic;font-size:.9rem; color:var(--mauve);margin:0 0 26px;opacity:.8} /* ---- spirits grid ---- */ .spirits-grid{display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.5vw,30px) clamp(40px,7vw,96px)} @media(min-width:900px){.spirits-grid{grid-template-columns:repeat(3,1fr)}} /* ---- beer & softs ---- */ .beer-softs{display:grid;grid-template-columns:1fr 1fr; gap:0 clamp(48px,8vw,104px)} /* ---- pricing note ---- */ .price-note{font-family:var(--font-body);font-size:var(--fs-body);font-style:italic; opacity:.5;margin-top:clamp(36px,5vw,52px);padding-top:26px; border-top:1px solid;text-align:center;line-height:1.7;max-width:none;margin-left:auto;margin-right:auto} .panel-day .price-note{border-color:var(--line);color:var(--plum)} .panel-eve .price-note{border-color:rgba(219,202,191,.16);color:var(--blush)} .panel-dri .price-note{border-color:rgba(46,17,24,.12);color:var(--plum)} /* ---------------- marquee ---------------- */ .marquee{--accent:var(--gold);background:var(--paper);color:var(--plum);overflow:hidden; border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0} .marquee-row{display:flex;width:max-content;animation:scrollx 32s linear infinite} @media (prefers-reduced-motion: reduce){.marquee-row{animation:none}} .marquee-item{display:inline-flex;align-items:center;font-family:var(--font-display);text-transform:uppercase; letter-spacing:.14em;font-size:clamp(1rem,1.8vw,1.4rem);padding:0 0 0 0} .marquee-dot{color:var(--gold);font-style:normal;margin:0 .9em;font-size:.6em;transform:translateY(-1px)} @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------------- experience ---------------- */ .exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)} .exp-card{display:flex;flex-direction:column} .exp-media{aspect-ratio:4/5;border-radius:var(--r-sm);overflow:hidden;margin-bottom:22px;will-change:transform;background:rgba(0,0,0,.04);border:1px solid var(--line);transition:transform .55s cubic-bezier(.22,.68,0,.98);position:relative} .exp-card:hover .exp-media{transform:scale(1.035)} /* image frame overlay */ .exp-frame{position:absolute;inset:0;pointer-events:none;z-index:4;border-radius:inherit} .exp-fc{position:absolute;display:block;width:28px;height:28px;opacity:.72;transition:opacity .3s} .exp-card:hover .exp-fc{opacity:.95} .exp-fc.tl{top:13px;left:13px} .exp-fc.tr{top:13px;right:13px;transform:scaleX(-1)} .exp-fc.bl{bottom:13px;left:13px;transform:scaleY(-1)} .exp-fc.br{bottom:13px;right:13px;transform:scale(-1,-1)} .exp-fc svg{width:100%;height:100%;display:block} .exp-frame-bee{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);width:26px;height:auto;opacity:.62;transition:opacity .3s} .exp-card:hover .exp-frame-bee{opacity:.85} .exp-kicker{font-family:var(--font-body);font-style:italic;color:var(--accent);font-size:1rem;margin-bottom:4px} .exp-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:1.7rem;margin:0 0 10px;color:inherit} .exp-desc{font-family:var(--font-body);font-size:1.02rem;line-height:1.6;opacity:.84;margin:0;max-width:34ch} /* ---------------- menu ---------------- */ .menu-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,90px);align-items:center} .menu-left .btn{margin-top:30px} .menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .menu-row{padding:20px 0;border-top:1px solid var(--line-strong)} .menu-row:last-child{border-bottom:1px solid var(--line-strong)} .menu-row-top{display:flex;align-items:baseline;gap:14px} .menu-name{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.05rem,1.6vw,1.35rem);white-space:nowrap;flex-shrink:0} .menu-leader{flex:1;border-bottom:1px dotted var(--line-strong);transform:translateY(-4px)} .menu-price{font-family:var(--font-body);font-size:1.2rem;color:var(--accent)} .menu-desc{font-family:var(--font-body);font-style:italic;font-size:1rem;opacity:.74;margin-top:5px;display:block} /* ---------------- gallery ---------------- */ .gal-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:230px;gap:clamp(12px,1.6vw,20px)} .gal-cell{border-radius:var(--r-sm);overflow:hidden;will-change:transform;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);transition:transform .55s cubic-bezier(.22,.68,0,.98)} .gal-cell:hover{transform:scale(1.03)} .gal-cell.g-tall{grid-row:span 2} .expand-gallery { display: flex; gap: 12px; width: min(1180px, calc(100% - 40px)); margin: 0 auto; min-height: 430px; } .expand-gallery-card { flex: 1; min-width: 0; margin: 0; border-radius: 18px; overflow: hidden; position: relative; transition: flex 500ms ease, transform 500ms ease; background: rgba(255,255,255,.08); } .expand-gallery-card.is-featured, .expand-gallery-card:hover { flex: 4; } .expand-gallery-card img { width: 100%; height: 100%; display: block; object-fit: cover; } .expand-gallery-card:hover { transform: translateY(-4px); } @media (max-width: 760px) { .expand-gallery { width: auto; min-height: 0; overflow-x: auto; padding: 0 18px 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .expand-gallery-card, .expand-gallery-card.is-featured, .expand-gallery-card:hover { flex: 0 0 78%; height: 360px; transform: none; scroll-snap-align: center; } .expand-gallery-card { border-radius: 16px; } } /* ---------------- location ---------------- */ .loc-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:stretch} .loc-info{display:flex;flex-direction:column;align-items:flex-start} .loc-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px} .loc-block{display:flex;gap:14px;margin-top:26px;align-items:flex-start} .loc-ic{color:var(--accent);font-size:1.4rem;margin-top:2px} .loc-block p{margin:0;font-family:var(--font-body);font-size:1.05rem;line-height:1.55} .loc-block b{font-weight:600} .loc-note{font-family:var(--font-body);font-style:italic;opacity:.8;margin-top:24px;max-width:42ch;line-height:1.5} .loc-map{position:relative;display:block;border-radius:var(--r-sm);overflow:hidden;min-height:420px; border:1px solid var(--line-strong);text-decoration:none; background:linear-gradient(135deg,#3a2630 0%,#241019 60%,#1c0c12 100%)} .loc-map-pin i{font-size:1.2em} .loc-map { width: 100% !important; height: 100% !important; } .loc-map iframe { width: 100% !important; height: 100% !important; min-height: inherit; border: 0; display: block; } @media (max-width: 768px) { .loc-map { min-height: 360px; } } /* ---------------- newsletter ---------------- */ .sec-news{text-align:center} .news-wrap{max-width:660px;margin:0 auto;display:flex;flex-direction:column;align-items:center} .news-emblem{height:62px;margin-bottom:22px;opacity:.9} .news-form{display:flex;gap:12px;width:100%;max-width:480px;margin-top:30px} .news-form input{flex:1;font-family:var(--font-body);font-size:1.05rem;color:var(--blush); background:rgba(255,255,255,.06);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:.95em 1.1em;outline:none} .news-form input::placeholder{color:var(--blush);opacity:.5;font-style:italic} .news-form input:focus{border-color:var(--honey);box-shadow:0 0 0 3px rgba(213,176,150,.16)} .news-thanks{font-family:var(--font-body);font-style:italic;font-size:1.3rem;color:var(--honey);margin-top:28px} .news-embed { width: min(620px, 100%); margin: 26px auto 0; } .news-embed iframe { width: 100%; min-height: 180px; border: 0; display: block; } .news-embed form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .news-embed input[type="email"], .news-embed input[type="text"] { min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: inherit; } .news-embed button, .news-embed input[type="submit"] { min-height: 48px; border-radius: 999px; } /* ---------------- instagram ---------------- */ .sec-insta{padding-top:clamp(40px,5vw,70px);padding-bottom:0} .insta-head{display:flex;align-items:center;justify-content:center;gap:.5em;text-decoration:none; font-family:var(--font-display);text-transform:uppercase;letter-spacing:.2em;font-size:1.1rem;color:inherit;margin-bottom:30px} .insta-head i{font-size:1.3em;color:var(--accent)} .insta-row{display:grid;grid-template-columns:repeat(6,1fr)} .insta-cell{aspect-ratio:1;width:100%;border:1px solid rgba(219,202,191,.18);transition:transform .55s cubic-bezier(.22,.68,0,.98)} .insta-cell:hover{transform:scale(1.06);z-index:2;position:relative} /* ---------------- footer ---------------- */ .footer{background:#1c080c;color:var(--blush);padding:clamp(54px,7vw,90px) clamp(22px,7vw,120px) 0; position:sticky;bottom:0;z-index:1;border-radius:0} .foot-top{display:grid;grid-template-columns:1fr 2fr;gap:clamp(32px,5vw,80px);padding-bottom:54px;border-bottom:1px solid rgba(219,202,191,.14)} .foot-brand img{height:66px;margin-bottom:18px} .foot-tag{font-family:var(--font-body);font-size:1.05rem;line-height:1.5;opacity:.82;max-width:34ch;margin:0 0 24px} .foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px} .foot-col h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--honey);margin:0 0 16px} .foot-col p,.foot-col a{font-family:var(--font-body);font-size:.98rem;line-height:1.7;color:var(--blush);text-decoration:none;opacity:.86;display:block} .foot-col a i{margin-right:.5em;vertical-align:-1px} .foot-col a:hover{color:var(--honey);opacity:1} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; padding:24px 0 30px;font-family:var(--font-body);font-size:.84rem;opacity:.66;letter-spacing:.02em} .foot-mid{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.22em;font-size:.7rem} /* WordPress sticky footer reveal */ .wp-site-blocks {position: relative;} main.page {position: relative; z-index: 2;} footer.wp-block-template-part {position: sticky;bottom: 0;z-index: 1;} footer.wp-block-template-part .footer {position: relative; bottom: auto;z-index: 1;} /* ---------------- JOURNEY (day → night) per-section palette ---------------- */ .marquee{--sbg:var(--paper)} .sec-experience{--sbg:var(--paper);--sink:var(--plum);--sacc:var(--gold)} .sec-menu{--sbg:var(--blush);--sink:var(--plum);--sacc:var(--gold)} .sec-gallery{--sbg:linear-gradient(180deg,#caa888 0%,#7c5350 55%,#543241 100%);--sink:var(--blush);--sacc:var(--honey)} .sec-location{--sbg:var(--plum);--sink:var(--blush);--sacc:var(--honey)} .sec-map{--sbg: var(--blush);--sink: var(--plum);--sacc: var(--gold);} .sec-news{--sbg:#240d13;--sink:var(--blush);--sacc:var(--honey)} .sec-insta{--sbg:var(--plum);--sink:var(--blush);--sacc:var(--honey)} /* subtle global dusk vignette that deepens as you scroll (journey only) */ .page-veil{position:fixed;inset:0;z-index:40;pointer-events:none; background:radial-gradient(120% 80% at 50% 30%, transparent 52%, rgba(28,8,12,.5) 100%); opacity:calc(var(--night,0) * .5);transition:opacity .2s linear} .mode-night .page-veil{display:none} /* ---------------- NIGHT MODE override ---------------- */ .mode-night{background:radial-gradient(130% 90% at 78% 0%, #3a1d25 0%, #2e1118 52%, #1c080c 100%) fixed} .mode-night .section{--sbg:transparent;--sink:var(--blush);--sacc:var(--honey)} .mode-night .marquee{--sbg:transparent;color:var(--blush);border-color:rgba(219,202,191,.16)} .mode-night .menu-row{border-color:rgba(219,202,191,.2)} .mode-night .menu-leader{border-color:rgba(219,202,191,.25)} .mode-night .btn-solid-dark{background:var(--honey);color:var(--plum)} .mode-night .btn-solid-dark:hover{background:#e6c8b0} .mode-night .marquee-dot{color:var(--honey)} /* ---------------- responsive ---------------- */ @media(max-width:980px){ .menu-wrap,.loc-wrap{grid-template-columns:1fr} .foot-top{grid-template-columns:1fr} .exp-grid{grid-template-columns:1fr;gap:34px} .exp-media{aspect-ratio:16/10} } @media(max-width:760px){ .nav-links{display:none} .nav-burger{display:block} .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px} .insta-row{grid-template-columns:repeat(3,1fr)} .foot-cols{grid-template-columns:repeat(2,1fr)} .hero-inner{padding-bottom:96px} .news-form{flex-direction:column} .foot-bottom{justify-content:center;text-align:center} } /* ---- Static-export replacements for AI/editor-only elements ---- */ .image-slot-static{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;box-sizing:border-box;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:rgba(46,17,24,.72);background:linear-gradient(135deg,rgba(213,176,150,.28),rgba(84,50,65,.18));border:1px dashed currentColor;overflow:hidden;} .sec-gallery .image-slot-static,.sec-location .image-slot-static,.sec-insta .image-slot-static{color:rgba(219,202,191,.78);background:linear-gradient(135deg,rgba(213,176,150,.14),rgba(20,34,59,.28));} .insta-cell.image-slot-static{position:relative;inset:auto;aspect-ratio:1;border-radius:0;} .exp-inner,.gal-inner{transition:transform .1s linear;} .news-form.is-submitted{display:none;}.news-thanks[hidden]{display:none;} /* ============================================================ WORDPRESS / GUTENBERG INTEGRATION ============================================================ */ body.admin-bar .hs-nav, body.admin-bar .nav { top: 32px; } @media (max-width: 782px){ body.admin-bar .hs-nav, body.admin-bar .nav { top: 46px; } } .wp-site-blocks{min-height:100vh; background:var(--plum);} .wp-block-post-content{margin-block-start:0;} .wp-block-group.alignfull{margin-block-start:0;} main.page, .wp-block-group.page {width: 100%;max-width: none;margin-left: 0;margin-right: 0;} .wp-block-group.page > .hero, .wp-block-group.page > .section, .wp-block-group.page > .pullquote-band, .wp-block-group.page > .cta-band {width: 100%;max-width: none;} .hs-policy-content { width: 100%; max-width: none; padding: clamp(56px, 8vw, 110px) clamp(22px, 6vw, 80px); background: var(--plum); color: var(--paper); } .hs-policy-content .wp-block-post-content { max-width: 820px; margin: 0 auto; } .hs-policy-content h2, .hs-policy-content h3, .hs-policy-content h4 { color: var(--paper); font-family: var(--font-display); line-height: 1.1; margin-top: 1.8em; margin-bottom: .55em; } .hs-policy-content p, .hs-policy-content li { color: var(--paper); font-size: 1.05rem; line-height: 1.72; } .hs-policy-content a { color: var(--honey); text-decoration: underline; text-underline-offset: .18em; } .hs-policy-page { min-height: 100vh; background: var(--plum); } .hs-policy-hero { position: relative; min-height: min(56svh, 560px); display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(90% 80% at 50% 8%, rgba(213,176,150,.14) 0%, rgba(103,85,45,.14) 36%, rgba(46,17,24,.62) 78%, rgba(46,17,24,.86) 100%), linear-gradient(180deg, rgba(20,34,59,.42) 0%, rgba(46,17,24,.7) 58%, var(--plum) 100%); } .hs-policy-hero__inner { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(34px, 7vw, 90px) clamp(22px, 6vw, 40px) clamp(46px, 8vw, 110px); } .hs-policy-logo { width: min(54vw, 250px); height: auto; display: block; margin: 0 auto clamp(18px, 3vw, 30px); filter: drop-shadow(0 8px 34px rgba(46,17,24,.45)); } .hs-policy-title { margin: 0; color: var(--paper); font-family: var(--font-display); font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; } .block-editor-rich-text__editable.block-editor-block-list__block.wp-block-paragraph.rich-text, .block-editor-rich-text__editable.wp-block-paragraph, .editor-styles-wrapper .block-editor-rich-text__editable.block-editor-block-list__block.wp-block-paragraph.rich-text, .editor-styles-wrapper .wp-block-paragraph.rich-text { color: var(--paper, #f2f2f2) !important; -webkit-text-fill-color: var(--paper, #f2f2f2) !important; caret-color: var(--paper, #f2f2f2); } .block-editor-rich-text__editable.block-editor-block-list__block.wp-block-heading.rich-text, .editor-styles-wrapper .wp-block-heading.rich-text, .editor-styles-wrapper .wp-block-list.rich-text, .editor-styles-wrapper .wp-block-list li { color: var(--paper, #f2f2f2) !important; -webkit-text-fill-color: var(--paper, #f2f2f2) !important; } .nav{z-index:999;} .nav-sheet,.nav-sheet-backdrop{z-index:1001;} .hero-slot,.fill{object-fit:cover;} .wp-block-image img{height:auto;} .hs-inner-hero{position:relative;min-height:66svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--plum);color:var(--paper);} .hs-inner-hero .hero-media{inset:0;} .hs-inner-hero .hero-inner{padding-top:160px;} .hs-inner-hero-gradient .hero-amb{background:radial-gradient(120% 80% at 72% 12%, rgba(255,228,178,.55) 0%, rgba(231,178,128,.32) 26%, rgba(132,74,72,0) 58%),linear-gradient(176deg,#caa06f 0%,#9a5f53 34%,#5a2f38 62%,#2e1118 100%);} .hs-inner-hero-image .hero-media img{width:100%;height:100%;object-fit:cover;} .hs-editor-note{font-size:.875rem;opacity:.72;} /* ============================================================ NON-CONFLICTING ADDITIONS FROM honeyshade-pages-v2(1).css ============================================================ */ .wp-site-blocks>*{ margin-block-start: 0 !important; margin-block-end: 0 !important; } .wp-block-template-part>*{ margin-block-start: 0 !important; margin-block-end: 0 !important; } .nav-burger-always,.nav-burger{ margin-left: auto; } .about-hero-title{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.4rem,3vw,2.4rem); color: rgba(245,235,225,.82); margin: .6em auto .9em; line-height: 1; font-weight: 400; } .eyebrow-label{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .32em; font-size: .66rem; color: var(--gold); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .eyebrow-label::after{ content: ""; flex: none; width: 28px; height: 1px; background: var(--gold); opacity: .38; } .eyebrow-label.light{ color: var(--honey); } .eyebrow-label.light::after{ background: var(--honey); } .pullquote-band,.cta-band{ position: relative; z-index: 1; } .origin-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px,7vw,110px); align-items: center; } .origin-heading{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.9rem,3.6vw,2.9rem); color: var(--plum); margin: 0 0 clamp(22px,3vw,32px); line-height: 1.04; } .origin-body{ font-family: var(--font-body); font-size: clamp(1rem,1.4vw,1.1rem); line-height: 1.72; color: var(--plum); margin: 0 0 18px; max-width: 52ch; text-wrap: pretty; } .origin-body:last-of-type{ margin-bottom: 0; } .origin-sig{ font-family: var(--font-body); font-style: italic; font-size: 1.05rem; color: var(--gold); display: block; margin-top: clamp(28px,3.5vw,38px); padding-top: 22px; border-top: 1px solid rgba(46,17,24,.12); } .origin-image{ position: relative; } .origin-img-wrap{ position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3/4; background: var(--blush); } .origin-img-wrap img{ width: 100%; height: 100%; object-fit: cover; display: block; } .origin-img-wrap image-slot{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .origin-caption{ font-family: var(--font-body); font-style: italic; font-size: .82rem; color: var(--gold); opacity: .72; margin-top: 14px; text-align: right; letter-spacing: .02em; } .origin-badge{ position: absolute; bottom: 22px; left: -20px; z-index: 2; background: var(--plum); color: var(--honey); border-radius: var(--r-sm); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .66rem; padding: .65em 1em; box-shadow: 0 6px 24px rgba(46,17,24,.35); display: flex; align-items: center; gap: .5em; white-space: nowrap; } .pullquote-band{ background: var(--plum); text-align: center; padding: clamp(64px,9vw,110px) clamp(22px,7vw,120px); overflow: hidden; } .pullquote-mark{ font-family: var(--font-display); font-size: clamp(5rem,10vw,9rem); line-height: .6; color: var(--honey); opacity: .22; display: block; margin-bottom: -10px; user-select: none; } .pullquote-text{ font-family: var(--font-body); font-style: italic; font-size: clamp(1.35rem,2.6vw,2.1rem); line-height: 1.48; color: var(--blush); max-width: 28ch; margin: 0 auto 24px; } .pullquote-attr{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .26em; font-size: .66rem; color: var(--honey); opacity: .72; display: block; } .pullquote-bee{ position: absolute; bottom: 0; left: clamp(22px,5vw,80px); height: clamp(90px,17vw,210px); opacity: .06; pointer-events: none; } .space-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px,7vw,100px); align-items: center; margin-bottom: clamp(52px,7vw,88px); } .space-heading{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.9rem,3.6vw,2.9rem); color: var(--plum); margin: 0 0 clamp(20px,3vw,30px); line-height: 1.04; } .space-body{ font-family: var(--font-body); font-size: clamp(1rem,1.4vw,1.1rem); line-height: 1.72; color: var(--plum); margin: 0 0 18px; max-width: 52ch; text-wrap: pretty; } .space-stats{ display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,24px); margin-top: clamp(32px,4vw,46px); padding-top: clamp(28px,3.5vw,36px); border-top: 1px solid rgba(46,17,24,.12); } .stat-num{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: clamp(1.8rem,3vw,2.6rem); color: var(--plum); display: block; margin-bottom: 5px; } .stat-label{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .2em; font-size: .62rem; color: var(--gold); display: block; line-height: 1.4; } .space-image-wrap{ position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/5; background: var(--mauve); } .space-image-wrap image-slot{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .space-wide{ position: relative; border-radius: var(--r-md); overflow: hidden; height: clamp(260px,36vw,520px); background: var(--mauve); } .space-wide img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .space-wide image-slot{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .space-wide-caption{ position: absolute; bottom: 22px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; } .space-wide-tag{ background: rgba(46,17,24,.72); backdrop-filter: blur(10px); color: var(--honey); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .18em; font-size: .66rem; padding: .65em 1.2em; border-radius: var(--r-pill); border: 1px solid rgba(213,176,150,.18); display: flex; align-items: center; gap: .5em; } .phil-head{ text-align: center; margin-bottom: clamp(44px,6vw,68px); } .phil-heading{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.7rem,3.2vw,2.5rem); color: var(--plum); margin: 0 0 14px; } .phil-sub{ font-family: var(--font-body); font-style: italic; font-size: clamp(.98rem,1.5vw,1.12rem); color: var(--plum); opacity: .7; max-width: 46ch; margin: 0 auto; line-height: 1.58; } .phil-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(28px,4vw,52px); } .phil-card{ display: flex; flex-direction: column; align-items: flex-start; padding-top: clamp(28px,3.5vw,38px); border-top: 1px solid rgba(46,17,24,.15); } .phil-icon{ font-size: 1.7rem; color: var(--gold); margin-bottom: 16px; display: block; } .phil-card-title{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: 1.05rem; color: var(--plum); margin: 0 0 12px; } .phil-card-body{ font-family: var(--font-body); font-size: .98rem; line-height: 1.66; color: var(--plum); opacity: .76; margin: 0; text-wrap: pretty; } .team-head{ text-align: center; margin-bottom: clamp(44px,6vw,68px); } .team-heading{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.7rem,3.2vw,2.5rem); color: var(--blush); margin: 0 0 14px; } .team-sub{ font-family: var(--font-body); font-style: italic; font-size: clamp(.98rem,1.5vw,1.12rem); color: var(--honey); opacity: .7; max-width: 44ch; margin: 0 auto; line-height: 1.58; } .team-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(28px,4vw,48px); } .team-portrait{ position: relative; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 3/4; background: rgba(219,202,191,.1); margin-bottom: 22px; } .team-portrait image-slot{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .team-name{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 1.1rem; color: var(--blush); margin: 0 0 5px; } .team-role{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .2em; font-size: .62rem; color: var(--honey); opacity: .72; display: block; margin-bottom: 14px; } .team-bio{ font-family: var(--font-body); font-size: .93rem; line-height: 1.66; color: var(--blush); opacity: .68; margin: 0; text-wrap: pretty; } .press-head{ text-align: center; margin-bottom: clamp(36px,5vw,52px); } .press-eyebrow{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .32em; font-size: .66rem; color: var(--gold); display: block; margin-bottom: 12px; opacity: .8; } .press-heading{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.5rem,2.8vw,2.1rem); color: var(--plum); margin: 0; } .press-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.5vw,32px); } .press-card{ border: 1px solid rgba(46,17,24,.12); border-radius: var(--r-md); padding: clamp(22px,3vw,34px); display: flex; flex-direction: column; gap: 14px; transition: border-color .25s,box-shadow .25s; } .press-card:hover{ border-color: rgba(103,85,45,.28); box-shadow: var(--shadow-md); } .press-pub{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .2em; font-size: .64rem; color: var(--gold); display: flex; align-items: center; gap: .5em; } .press-pub::before{ content: ""; display: block; width: 14px; height: 1px; background: var(--gold); opacity: .5; } .press-quote{ font-family: var(--font-body); font-style: italic; font-size: clamp(.95rem,1.3vw,1.05rem); line-height: 1.58; color: var(--plum); opacity: .82; margin: 0; text-wrap: pretty; } .press-stars{ color: var(--gold); font-size: .78rem; letter-spacing: .1em; } .cta-band{ background: var(--plum); text-align: center; padding: clamp(68px,10vw,110px) clamp(22px,7vw,120px); } .cta-eyebrow{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .34em; font-size: .66rem; color: var(--honey); display: block; margin-bottom: 18px; opacity: .82; } .cta-heading{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: clamp(1.8rem,3.5vw,2.8rem); margin: 0 0 14px; color: var(--blush); } .cta-sub{ font-family: var(--font-body); font-style: italic; font-size: clamp(.95rem,1.6vw,1.12rem); opacity: .62; max-width: 38ch; margin: 0 auto 34px; line-height: 1.55; color: var(--blush); } .cta-actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .banner{ background: var(--plum); color: var(--blush); text-align: center; padding: clamp(80px,12vw,130px) clamp(22px,7vw,120px) clamp(44px,6vw,70px); position: sticky; top: 0; z-index: 0; height: 67vh; min-height: 460px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; overflow: hidden; } .banner::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(80% 55% at 50% 0%,rgba(213,176,150,.18) 0%,transparent 62%); pointer-events: none; } .banner-eyebrow{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .36em; font-size: .68rem; color: var(--honey); display: block; margin-bottom: 22px; opacity: .82; } .banner-wordmark{ height: clamp(22px,3.2vw,38px); margin: 0 auto 24px; } .banner-ornament{ display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto 22px; } .banner-ornament span{ width: 52px; height: 1px; background: var(--honey); opacity: .38; display: block; } .banner-ornament .dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--honey); opacity: .6; flex-shrink: 0; } .banner-sub{ font-family: var(--font-body); font-style: italic; font-size: clamp(.95rem,1.8vw,1.2rem); color: var(--blush); opacity: .65; margin: 0 auto 32px; } .banner-actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; } .banner-note{ font-family: var(--font-body); font-size: .8rem; color: var(--blush); opacity: .38; letter-spacing: .02em; margin: 0 auto; } .banner-bg-bee{ position: absolute; bottom: 0; right: clamp(28px,7vw,100px); height: clamp(110px,22vw,260px); opacity: .07; pointer-events: none; z-index: 0; } .btn-honey{ background: var(--honey); color: var(--plum); border-color: var(--honey); } .btn-honey:hover{ background: #e4c4ac; border-color: #e4c4ac; } .btn-outline-honey{ background: transparent; border-color: rgba(213,176,150,.7); color: var(--honey); } .btn-outline-honey:hover{ background: rgba(213,176,150,.1); border-color: var(--honey); } .btn-outline-plum{ background: transparent; border-color: rgba(46,17,24,.35); color: var(--plum); } .btn-outline-plum:hover{ background: rgba(46,17,24,.05); border-color: var(--plum); } .btn-sm{ font-size: .7rem; padding: .8em 1.3em; } .careers-body{ position: relative; z-index: 1; } .sec{ padding: clamp(64px,9vw,108px) clamp(22px,7vw,120px); } .sec-paper{ background: var(--paper); color: var(--plum); } .sec-blush{ background: var(--blush); color: var(--plum); } .sec-plum{ background: var(--plum); color: var(--blush); } .menu-panel-section[hidden] { display: none !important; } .menu-panel-section.active > .panel { display: block; } .sec-eyebrow{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .32em; font-size: .66rem; margin-bottom: 16px; display: block; } .sec-paper .sec-eyebrow{ color: var(--gold); } .sec-blush .sec-eyebrow{ color: var(--gold); } .sec-plum .sec-eyebrow{ color: var(--honey); opacity: .82; } .sec-heading{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: clamp(1.7rem,3vw,2.5rem); margin: 0 0 16px; } .sec-paper .sec-heading,.sec-blush .sec-heading{ color: var(--plum); } .sec-plum .sec-heading{ color: var(--blush); } .sec-sub{ font-family: var(--font-body); font-style: italic; font-size: clamp(1rem,1.7vw,1.18rem); max-width: 48ch; line-height: 1.6; margin: 0; } .sec-paper .sec-sub,.sec-blush .sec-sub{ color: var(--mauve); opacity: .85; } .sec-plum .sec-sub{ color: var(--blush); opacity: .62; } .orn{ display: flex; align-items: center; gap: 18px; margin: clamp(36px,4vw,52px) 0; } .orn .oln{ flex: 1; height: 1px; opacity: .2; } .sec-paper .oln,.sec-blush .oln{ background: var(--plum); } .sec-plum .oln{ background: var(--blush); } .orn img{ height: 20px; opacity: .22; } .perks-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,3vw,40px); margin-top: clamp(44px,5.5vw,64px); } .perk{ border-top: 1px solid var(--line); padding-top: 24px; } .perk-icon{ font-size: 1.5rem; color: var(--gold); margin-bottom: 12px; line-height: 1; } .perk-title{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; color: var(--plum); margin: 0 0 8px; } .perk-desc{ font-family: var(--font-body); font-size: .95rem; line-height: 1.55; color: var(--mauve); margin: 0; max-width: none; } .life-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,7vw,100px); align-items: center; margin-top: clamp(40px,5vw,60px); } .life-text p{ font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--mauve); margin: 0 0 18px; max-width: 42ch; } .life-text p:last-child{ margin-bottom: 0; } .life-img{ position: relative; background: var(--paper); border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/5; } .life-img-placeholder{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: repeating-linear-gradient(135deg,rgba(46,17,24,.04) 0px,rgba(46,17,24,.04) 1px,transparent 1px,transparent 14px); border: 1px solid rgba(46,17,24,.1); } .life-img-placeholder span{ font-family: var(--font-body); font-style: italic; font-size: .82rem; color: var(--mauve); opacity: .5; text-align: center; padding: 0 16px; letter-spacing: .03em; } .positions-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px,4.5vw,52px); } .positions-list{ display: flex; flex-direction: column; gap: 0; } .role{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: clamp(18px,2.5vw,26px) 0; border-top: 1px solid rgba(219,202,191,.13); text-decoration: none; color: inherit; transition: background .2s; cursor: default; } .role:last-child{ border-bottom: 1px solid rgba(219,202,191,.13); } .role-left{ display: flex; flex-direction: column; gap: 7px; } .role-title{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1rem,1.8vw,1.22rem); color: var(--blush); line-height: 1.15; transition: color .2s; } .role-meta{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .role-dept{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .18em; font-size: .58rem; color: var(--honey); opacity: .7; padding: 3px 9px; border: 1px solid rgba(213,176,150,.25); border-radius: var(--r-xs); } .role-type{ font-family: var(--font-body); font-style: italic; font-size: .85rem; color: var(--blush); opacity: .44; letter-spacing: .02em; } .role-desc{ font-family: var(--font-body); font-size: .9rem; color: var(--blush); opacity: .5; line-height: 1.5; max-width: 52ch; margin: 4px 0 0; } .role-action{ display: flex; align-items: center; gap: 8px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .16em; font-size: .66rem; color: var(--honey); opacity: .6; white-space: nowrap; flex-shrink: 0; transition: opacity .2s,gap .2s; } .role-action i{ transition: transform .2s; } .role:hover .role-action{ opacity: 1; gap: 12px; } .role:hover .role-action i{ transform: translateX(3px); } .role:hover .role-title{ color: var(--honey); } a.role{ cursor: pointer; } .dept-filter{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0; } .df-btn{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .16em; font-size: .62rem; background: transparent; border: 1px solid rgba(219,202,191,.22); color: var(--blush); opacity: .52; padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer; transition: opacity .2s,border-color .2s,background .2s; } .df-btn.active{ opacity: 1; border-color: rgba(213,176,150,.65); background: rgba(213,176,150,.08); color: var(--honey); } .df-btn:hover:not(.active){ opacity: .8; } .eoo-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,88px); margin-top: clamp(36px,4.5vw,52px); align-items: start; } .eoo-block{ border-top: 1px solid var(--line); padding-top: 24px; } .eoo-icon{ font-size: 1.4rem; color: var(--gold); margin-bottom: 10px; } .eoo-title{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; color: var(--plum); margin: 0 0 10px; } .eoo-text{ font-family: var(--font-body); font-size: .95rem; line-height: 1.65; color: var(--mauve); margin: 0; max-width: none; } .apply-band{ background: var(--blush); padding: clamp(52px,7vw,80px) clamp(22px,7vw,120px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(24px,5vw,72px); } .apply-band-text .sec-eyebrow{ margin-bottom: 10px; } .apply-band-text .sec-heading{ font-size: clamp(1.4rem,2.5vw,2rem); margin-bottom: 10px; } .apply-band-text p{ font-family: var(--font-body); font-size: .98rem; color: var(--mauve); line-height: 1.6; margin: 0; max-width: 42ch; } .apply-band-actions{ display: flex; flex-direction: column; gap: 10px; align-items: flex-end; flex-shrink: 0; } .btn-honey{ background: var(--honey); color: var(--plum); border-color: var(--honey); } .btn-honey:hover{ background: #e4c4ac; border-color: #e4c4ac; } .btn-plum{ background: var(--plum); color: var(--honey); border-color: var(--plum); } .btn-plum:hover{ background: #3a1d25; border-color: #3a1d25; } .btn-outline-paper{ background: transparent; border-color: rgba(46,17,24,.28); color: var(--plum); } .btn-outline-paper:hover{ background: rgba(46,17,24,.05); } .btn-outline-honey{ background: transparent; border-color: rgba(213,176,150,.6); color: var(--honey); } .btn-outline-honey:hover{ background: rgba(213,176,150,.1); border-color: var(--honey); } .btn-sm{ font-size: .7rem; padding: .8em 1.3em; } .sec{ position: relative; z-index: 1; padding: clamp(72px,10vw,130px) clamp(22px,7vw,120px); } .sec-paper{ background: var(--paper); } .sec-blush{ background: var(--blush); } .sec-plum{ background: var(--plum); } .eyebrow-label{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .32em; font-size: .66rem; color: var(--gold); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .eyebrow-label::after{ content: ""; flex: none; width: 28px; height: 1px; background: var(--gold); opacity: .38; } .eyebrow-label.light{ color: var(--honey); } .eyebrow-label.light::after{ background: var(--honey); } .pullquote-band{ position: relative; z-index: 1; padding: clamp(64px,9vw,110px) clamp(22px,7vw,120px); background: var(--plum); text-align: center; overflow: hidden; } .pullquote-band::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 0%,rgba(213,176,150,.15) 0%,transparent 65%); pointer-events: none; } .pullquote-mark{ font-family: var(--font-display); font-size: clamp(5rem,10vw,9rem); line-height: .6; color: var(--honey); opacity: .22; display: block; margin-bottom: -10px; user-select: none; } .pullquote-text{ font-family: var(--font-body); font-style: italic; font-size: clamp(1.35rem,2.6vw,2.1rem); line-height: 1.48; color: var(--blush); max-width: 28ch; margin: 0 auto 24px; } .pullquote-attr{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .26em; font-size: .66rem; color: var(--honey); opacity: .72; margin: 0; } .pullquote-bee{ position: absolute; bottom: 0; left: clamp(22px,5vw,80px); height: clamp(90px,17vw,210px); opacity: .06; pointer-events: none; } .bio-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(52px,8vw,120px); align-items: start; } .bio-lede{ font-family: var(--font-body); font-style: italic; font-size: clamp(1.1rem,1.8vw,1.35rem); line-height: 1.58; color: var(--plum); margin: 0 0 clamp(22px,3vw,32px); max-width: 50ch; text-wrap: pretty; } .bio-body{ font-family: var(--font-body); font-size: clamp(1rem,1.35vw,1.08rem); line-height: 1.74; color: var(--plum); margin: 0 0 18px; max-width: 56ch; text-wrap: pretty; } .bio-body:last-of-type{ margin-bottom: 0; } .bio-aside{ display: flex; flex-direction: column; gap: clamp(24px,3vw,36px); padding-top: 4px; } .bio-fact{ border-top: 1px solid rgba(46,17,24,.14); padding-top: clamp(16px,2vw,22px); } .bio-fact-label{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .24em; font-size: .62rem; color: var(--gold); display: block; margin-bottom: 7px; } .bio-fact-value{ font-family: var(--font-body); font-size: clamp(.93rem,1.2vw,1rem); line-height: 1.58; color: var(--plum); margin: 0; } .bio-fact-value em{ font-style: italic; color: var(--mauve); } .journey-head{ max-width: 50ch; margin-bottom: clamp(48px,6vw,72px); } .journey-heading{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.8rem,3.2vw,2.5rem); color: var(--plum); margin: 0 0 14px; } .journey-sub{ font-family: var(--font-body); font-style: italic; font-size: clamp(.98rem,1.4vw,1.08rem); line-height: 1.6; color: var(--mauve); margin: 0; } .timeline{ display: flex; flex-direction: column; position: relative; padding-left: 28px; border-left: 1px solid rgba(103,85,45,.25); } .tl-entry{ position: relative; padding-bottom: clamp(32px,4.5vw,52px); } .tl-entry:last-child{ padding-bottom: 0; } .tl-dot{ position: absolute; left: -35px; top: 5px; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--gold); background: var(--blush); } .tl-entry.tl-now .tl-dot{ background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(103,85,45,.16); } .tl-year{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .22em; font-size: .64rem; color: var(--gold); display: block; margin-bottom: 6px; } .tl-role{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: 1.02rem; color: var(--plum); margin: 0 0 5px; } .tl-place{ font-family: var(--font-body); font-style: italic; font-size: .9rem; color: var(--mauve); display: block; margin-bottom: 10px; } .tl-desc{ font-family: var(--font-body); font-size: .93rem; line-height: 1.66; color: var(--plum); opacity: .74; margin: 0; max-width: 54ch; text-wrap: pretty; } .kitchen-head{ text-align: center; margin-bottom: clamp(44px,6vw,68px); } .kitchen-heading{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.7rem,3.2vw,2.5rem); color: var(--plum); margin: 0 0 14px; } .kitchen-sub{ font-family: var(--font-body); font-style: italic; font-size: clamp(.98rem,1.5vw,1.12rem); color: var(--mauve); opacity: .8; max-width: 46ch; margin: 0 auto; line-height: 1.58; } .kitchen-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(28px,3.5vw,48px); } .kitchen-card{ display: flex; flex-direction: column; } .kitchen-img{ position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/5; background: var(--blush); margin-bottom: clamp(20px,2.5vw,28px); } .kitchen-img image-slot{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .kitchen-card-eyebrow{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .28em; font-size: .6rem; color: var(--gold); display: block; margin-bottom: 8px; } .kitchen-card-title{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: 1.05rem; color: var(--plum); margin: 0 0 10px; } .kitchen-card-body{ font-family: var(--font-body); font-size: .93rem; line-height: 1.66; color: var(--plum); opacity: .74; margin: 0; text-wrap: pretty; } .press-head{ text-align: center; margin-bottom: clamp(36px,5vw,52px); } .press-heading{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.5rem,2.8vw,2.1rem); color: var(--blush); margin: 0; } .press-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.5vw,32px); } .press-card{ border: 1px solid rgba(219,202,191,.14); border-radius: var(--r-md); padding: clamp(22px,3vw,34px); display: flex; flex-direction: column; gap: 14px; transition: border-color .25s,box-shadow .25s; } .press-card:hover{ border-color: rgba(213,176,150,.32); box-shadow: 0 10px 36px -18px rgba(0,0,0,.5); } .press-pub{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .2em; font-size: .64rem; color: var(--honey); display: flex; align-items: center; gap: .5em; } .press-pub::before{ content: ""; display: block; width: 14px; height: 1px; background: var(--honey); opacity: .5; } .press-quote{ font-family: var(--font-body); font-style: italic; font-size: clamp(.95rem,1.3vw,1.05rem); line-height: 1.58; color: var(--blush); opacity: .82; margin: 0; text-wrap: pretty; } .press-stars{ color: var(--honey); font-size: .78rem; letter-spacing: .1em; } .cta-eyebrow{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .34em; font-size: .66rem; color: var(--gold); display: block; margin-bottom: 18px; opacity: .82; } .cta-heading{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: clamp(1.8rem,3.5vw,2.8rem); margin: 0 0 14px; color: var(--plum); } .cta-sub{ font-family: var(--font-body); font-style: italic; font-size: clamp(.95rem,1.6vw,1.12rem); opacity: .62; max-width: 38ch; margin: 0 auto 34px; line-height: 1.55; } .cta-actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,7vw,96px); align-items: start; } .contact-photo{ position: relative; height: clamp(200px,26vw,330px); overflow: hidden; border-radius: var(--r-md); margin-bottom: clamp(28px,4vw,40px); background: var(--blush); } .contact-photo image-slot{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .detail-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2.5vw,26px) clamp(22px,3vw,36px); } .detail-block-wide{ grid-column: 1 / -1; } .detail-label{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .24em; font-size: .62rem; color: var(--gold); display: flex; align-items: center; gap: 7px; margin-bottom: 9px; } .detail-label::after{ content: ""; flex: none; width: 26px; height: 1px; background: var(--gold); opacity: .3; } .detail-body{ font-family: var(--font-body); font-size: .97rem; line-height: 1.7; color: var(--plum); margin: 0; } .detail-body a{ color: var(--plum); text-decoration: none; transition: color .2s; } .detail-body a:hover{ color: var(--gold); } .hours-grid{ display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; } .hours-day{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; color: var(--gold); padding-top: 2px; } .hours-time{ font-family: var(--font-body); font-size: .93rem; color: var(--plum); opacity: .76; } .social-row{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; } .social-link{ display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: .64rem; color: var(--gold); text-decoration: none; border: 1px solid rgba(103,85,45,.28); padding: .5em .9em; border-radius: var(--r-pill); transition: color .2s, border-color .2s, background .2s; } .social-link:hover{ background: var(--gold); color: var(--paper); border-color: var(--gold); } .form-sub{ font-family: var(--font-body); font-style: italic; font-size: 1rem; color: var(--mauve); opacity: .8; margin: 6px 0 clamp(26px,4vw,38px); } .enquiry-form{ display: flex; flex-direction: column; } .form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px,3vw,36px); } .form-field{ display: flex; flex-direction: column; margin-bottom: clamp(22px,3vw,28px); } .field-label{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .2em; font-size: .6rem; color: var(--gold); margin-bottom: 9px; } .field-input, .field-select, .field-textarea{ font-family: var(--font-body); font-size: 1rem; color: var(--plum); background: transparent; border: 0; border-bottom: 1px solid rgba(46,17,24,.2); padding: 8px 0 10px; outline: none; width: 100%; transition: border-color .25s; } .field-input::placeholder, .field-textarea::placeholder{ color: var(--mauve); opacity: .42; font-style: italic; } .field-input:focus, .field-select:focus, .field-textarea:focus{ border-bottom-color: var(--gold); } .field-select{ cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 24px; } .field-select-wrap{ position: relative; } .field-select-wrap::after{ content: ""; pointer-events: none; position: absolute; right: 2px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 6px; height: 6px; margin-top: -2px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); } .field-textarea{ resize: none; min-height: 108px; line-height: 1.6; } .form-rule{ height: 1px; background: var(--line); border: 0; margin: 4px 0 clamp(20px,3vw,28px); } .form-footer{ display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .form-note{ font-family: var(--font-body); font-style: italic; font-size: .82rem; color: var(--mauve); opacity: .7; max-width: 26ch; line-height: 1.45; } .form-success{ display: none; text-align: center; padding: clamp(32px,5vw,56px) 0; } .success-icon{ font-size: 2.5rem; color: var(--gold); margin-bottom: 14px; display: block; } .success-heading{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 1.6rem; color: var(--plum); margin: 0 0 10px; } .success-sub{ font-family: var(--font-body); font-style: italic; font-size: 1rem; color: var(--mauve); margin: 0; opacity: .8; } .map-wrap { position: relative; overflow: hidden; min-height: 480px; border-radius: var(--r-md); margin-bottom: 56px; } .map-wrap iframe { width: 100% !important; height: 100% !important; min-height: 480px; border: 0; display: block; } .map-wrap > img, .map-wrap .fill { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 768px) { .map-wrap { min-height: 340px; } .map-wrap iframe { min-height: 340px; } } .transport-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,36px); } .transport-card{ background: rgba(219,202,191,.4); border-radius: var(--r-md); padding: clamp(20px,2.5vw,28px); border: 1px solid rgba(46,17,24,.1); } .transport-icon{ font-size: 1.4rem; color: var(--gold); margin-bottom: 10px; display: block; } .transport-label{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .22em; font-size: .62rem; color: var(--gold); display: block; margin-bottom: 7px; } .transport-head{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; color: var(--plum); margin: 0 0 7px; } .transport-body{ font-family: var(--font-body); font-size: .9rem; line-height: 1.55; color: var(--plum); opacity: .72; margin: 0; } .cta-actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } .foot-col p, .foot-col a{ font-family: var(--font-body); font-size: .98rem; line-height: 1.7; color: var(--blush); text-decoration: none; opacity: .86; display: block; } .btn-honey{ background: var(--honey); color: var(--plum); } .btn-honey:hover{ background: #e6c8b0; } .btn-plum,.btn-solid-dark{ background: var(--plum); color: var(--paper); } .btn-plum:hover,.btn-solid-dark:hover{ background: #43212b; } .btn-outline-plum{ background: transparent; border-color: var(--plum); color: var(--plum); } .btn-outline-plum:hover{ background: rgba(46,17,24,.08); } .btn-outline-paper{ background: transparent; border-color: var(--honey); color: var(--honey); } .btn-outline-paper:hover{ background: rgba(213,176,150,.14); } .cover{ width: 100%; height: 100%; object-fit: cover; } body:not(.home) .mode-journey .hero.hero-still, body:not(.home) .mode-journey .banner { height: 67vh; min-height: 460px; max-height: 760px; } body:not(.home) .mode-journey .hero.hero-still { position: sticky; top: 0; z-index: 0; display: flex; align-items: center; } body:not(.home) .mode-journey .hero.hero-still .hero-inner { position: absolute; inset: 0; width: auto; max-width: none; padding: clamp(80px, 10vw, 130px) clamp(22px, 7vw, 120px) clamp(44px, 6vw, 70px); display: flex; justify-content: center; align-items: center; } body:not(.home) .mode-journey .hero.hero-still .hero-copy { width: min(760px, 100%); max-width: 760px; margin: 0 auto; text-align: center; } body:not(.home) .mode-journey .hero.hero-still .hero-actions { justify-content: center; } .hero-logo-page { height: clamp(22px, 3.2vw, 60px); width: auto; margin: 10px auto 0; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .38)); } .hero-center .hero-logo-page, .hero-center .hero-logo { margin-left: auto; margin-right: auto; } @media (max-width:900px) { .foot-top{ grid-template-columns: 1fr; } .foot-cols{ grid-template-columns: repeat(2,1fr); } .origin-grid,.space-grid{ grid-template-columns: 1fr; } .space-image-wrap{ aspect-ratio: 16/10; } .origin-img-wrap{ aspect-ratio: 16/10; } .origin-badge{ left: 14px; } .team-grid{ grid-template-columns: 1fr 1fr; } .bio-intro-grid{ grid-template-columns: 1fr !important; } .bio-grid{ grid-template-columns: 1fr; } .bio-aside{ flex-direction: row; flex-wrap: wrap; } .bio-fact{ flex: 1; min-width: 180px; } .foot-top{ grid-template-columns: 1fr; } .foot-cols{ grid-template-columns: repeat(2,1fr); } } @media (max-width:760px) { .phil-grid{ grid-template-columns: 1fr; } .press-grid{ grid-template-columns: 1fr; } .press-grid{ grid-template-columns: 1fr; } } @media (max-width:560px) { .team-grid{ grid-template-columns: 1fr; } .foot-cols{ grid-template-columns: repeat(2,1fr); } .space-stats{ grid-template-columns: 1fr 1fr; } .foot-cols{ grid-template-columns: repeat(2,1fr); } .foot-bottom{ justify-content: center; text-align: center; } } @media (max-width:820px) { .perks-grid{ grid-template-columns: repeat(2,1fr); } .life-grid{ grid-template-columns: 1fr; } .life-img{ aspect-ratio: 16/9; } } @media (max-width:480px) { .perks-grid{ grid-template-columns: 1fr; } } @media (max-width:680px) { .eoo-grid{ grid-template-columns: 1fr; } } @media (max-width:700px) { .apply-band{ grid-template-columns: 1fr; } .apply-band-actions{ align-items: flex-start; flex-direction: row; flex-wrap: wrap; } } @media (max-width:860px) { .kitchen-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width:540px) { .kitchen-grid{ grid-template-columns: 1fr; } } @media (max-width: 980px) { .contact-grid{ grid-template-columns: 1fr; } .transport-grid{ grid-template-columns: 1fr 1fr; } .foot-top{ grid-template-columns: 1fr; } .foot-cols{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 760px) { .form-row{ grid-template-columns: 1fr; } .hero-lede{ max-width: none; } .foot-bottom{ justify-content: center; text-align: center; } } @media (max-width: 560px) { .detail-grid{ grid-template-columns: 1fr; } .detail-block-wide{ grid-column: 1; } .transport-grid{ grid-template-columns: 1fr; } }