/* The Happier Event Company — shared site styles */ @font-face{font-family:'Roman';src:url('../fonts/SLTFTheRomanEdition-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Roman';src:url('../fonts/SLTFTheRomanEdition-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap} :root{ --noir:#0B0B0C; --noir-2:#121114; --espresso:#17140F; --espresso-2:#211C15; --khaki:#B9A67D; --khaki-lt:#D8C6A2; --khaki-dim:#8f7f5c; --cream:#F4EEE2; --cream-2:#EAE1CF; --ink:#1A1712; --line:rgba(185,166,125,.24); --line-lt:rgba(26,23,18,.12); --shadow:0 30px 70px rgba(0,0,0,.28); --shadow-dk:0 40px 90px rgba(0,0,0,.55); --r:14px; --r-sm:10px; /* ONE vertical rhythm. Every banded section uses these — before this there were seven different values (52/64/72/86/90/92/96) so no two gaps matched. */ --sec-y:92px; --gap-cap:38px; /* one reading measure for every section's supporting copy (round 7 #3/#4) */ --measure:820px; --fd:'Roman', 'Times New Roman', serif; --fb:'Hanken Grotesk', system-ui, -apple-system, sans-serif; --wrap:1220px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--fb);color:var(--cream);background:var(--noir);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3,.serif{font-family:var(--fd);font-weight:400;line-height:1.16;letter-spacing:-.01em;text-wrap:balance} .prose p{text-wrap:pretty} .lead,.sec-head p,.page-hero .lead,.hero .lead,.cta-band p{text-wrap:balance} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ::selection{background:var(--khaki);color:#000} :focus-visible{outline:2px solid var(--khaki-lt);outline-offset:3px} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px} .eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--fb);font-weight:600;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--khaki);margin-bottom:18px} .eyebrow.on-cream{color:var(--khaki-dim)} /* At 390px, 10 of 13 page-hero eyebrows wrapped onto a second line, orphaning the star and "Singapore". Tightening the tracking on narrow screens keeps them on one line without touching the client's wording. */ @media(max-width:480px){.eyebrow{font-size:.72rem;letter-spacing:.16em;gap:9px}} /* Sharp 4-point diamond-star mark, taller than wide (matches the client's wordmark star) — mask-based so every context's font-size still scales it proportionally */ .star{display:inline-block;width:.7em;height:1em;color:transparent;background:var(--khaki);font-style:normal;vertical-align:-0.1em;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat} .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--fb);font-weight:600;font-size:.86rem;letter-spacing:.13em;text-transform:uppercase;padding:18px 36px;border-radius:100px;cursor:pointer;border:1px solid transparent;transition:background .3s,color .3s,border-color .3s,transform .3s} .btn-solid{background:var(--khaki);color:#1a140a;border-color:var(--khaki)} .btn-solid:hover{background:var(--khaki-lt);border-color:var(--khaki-lt);transform:translateY(-2px)} .btn-hollow{background:transparent;color:var(--cream);border-color:rgba(244,238,226,.5)} .btn-hollow:hover{background:var(--cream);color:var(--noir);border-color:var(--cream)} .btn-hollow.on-cream{color:var(--ink);border-color:rgba(26,23,18,.35)} .btn-hollow.on-cream:hover{background:var(--ink);color:var(--cream)} /* reveal (progressive enhancement — visible if JS is off) */ .reveal{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)} html.js .reveal{opacity:0;transform:translateY(26px)} html.js .reveal.in{opacity:1;transform:none} /* ---------- NAV ---------- */ header.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:border-color .4s,padding .4s;border-bottom:1px solid transparent} /* The scrolled blur lives on a pseudo-element, NEVER on header.nav itself. backdrop-filter on the header would make it the containing block for its own position:fixed children — which collapsed the mobile drawer to the header's height the moment the page was scrolled (client-reported, round 5 #7). */ header.nav::before{content:'';position:absolute;inset:0;background:rgba(11,11,12,.9);backdrop-filter:blur(16px);opacity:0;transition:opacity .4s;pointer-events:none} header.nav.scrolled::before{opacity:1} header.nav.scrolled{border-bottom-color:var(--line)} .nav-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:20px 30px;max-width:var(--wrap);margin:0 auto;transition:padding .4s} header.nav.scrolled .nav-inner{padding:13px 30px} .nav-logo img{height:52px;width:auto;transition:height .4s;display:block} header.nav.scrolled .nav-logo img{height:42px} .nav-links{display:flex;align-items:center;gap:32px;font-weight:500;font-size:1.04rem} .nav-links a:not(.btn){color:rgba(244,238,226,.86);letter-spacing:.02em;transition:color .2s} .nav-links a:not(.btn):hover,.nav-links a[aria-current="page"]{color:var(--khaki-lt)} .nav-links .btn{padding:15px 30px;font-size:.84rem} /* dropdown */ .has-drop{position:relative} .drop-toggle{display:inline-flex;align-items:center;gap:7px;background:none;border:none;font-family:var(--fb);font-weight:500;font-size:1.04rem;color:rgba(244,238,226,.86);cursor:pointer;letter-spacing:.02em;padding:0} .drop-toggle::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s} .has-drop:hover .drop-toggle,.drop-toggle:hover{color:var(--khaki-lt)} .nav-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);padding-top:16px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s} .has-drop:hover .nav-drop,.has-drop:focus-within .nav-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .has-drop:hover .drop-toggle::after{transform:translateY(-2px) rotate(-135deg)} .nav-drop-inner{background:var(--noir-2);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:310px;box-shadow:var(--shadow-dk);display:flex;flex-direction:column;gap:1px} /* Round 8 #37 — the hover panel outgrew short desktop windows and clipped its last items. Cap it to the space left under the fixed header (~92px tall, plus .nav-drop's 16px hover bridge) and let it scroll instead. flex-shrink:0 on the children stops the flex column squashing rows to fit rather than scrolling. DESKTOP ONLY: below 980px this same element sits inside the mobile drawer, which does its own scrolling — capping it there would nest a second scroll container and trap the drawer's scroll before it reaches the Enquire button. */ @media(min-width:981px){ .nav-drop-inner{max-height:calc(100vh - 128px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(185,166,125,.35) transparent} .nav-drop-inner>*{flex-shrink:0} .nav-drop-inner::-webkit-scrollbar{width:6px} .nav-drop-inner::-webkit-scrollbar-track{background:transparent} .nav-drop-inner::-webkit-scrollbar-thumb{background:rgba(185,166,125,.35);border-radius:3px} .nav-drop-inner::-webkit-scrollbar-thumb:hover{background:rgba(185,166,125,.55)} } .nav-drop-inner a{padding:12px 16px;border-radius:8px;font-size:1.02rem;color:rgba(244,238,226,.86);white-space:nowrap;transition:background .2s,color .2s} .nav-drop-inner a:hover,.nav-drop-inner a[aria-current="page"]{background:rgba(185,166,125,.12);color:var(--khaki-lt)} .nav-drop-cat{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--khaki-dim);padding:15px 16px 6px;pointer-events:none} /* Round 6 #25 — the Event Services group heading is now a real destination, so this one category has to take clicks; .nav-drop-inner a would otherwise style it like a menu item. */ .nav-drop-cat.linked{pointer-events:auto} .nav-drop-cat.linked a{display:inline;padding:0;font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;white-space:normal;transition:color .2s} .nav-drop-cat.linked a:hover{color:var(--khaki-lt)} .nav-drop-cat:first-child{padding-top:5px} .nav-drop-inner a.nav-drop-lead{font-family:var(--fd);font-size:1.2rem;color:var(--cream);padding:7px 16px 14px;margin-bottom:6px;border-bottom:1px solid var(--line);border-radius:0} .nav-drop-inner a.nav-drop-lead:hover{background:transparent;color:var(--khaki-lt)} .burger{display:none;background:none;border:none;color:var(--cream);cursor:pointer;padding:8px;flex-direction:column;gap:5px} .burger span{display:block;width:24px;height:1.5px;background:var(--cream);transition:.3s} @media(max-width:980px){ /* pinned to the top and scrollable inside itself — centring clipped the long menu at both ends */ /* visibility:hidden when closed — a drawer parked at translateX(100%) is still pannable-to on iOS Safari (body{overflow-x:hidden} does not clip it), which is the "black gap on the right" the client saw on every page. */ .nav-links{position:fixed;inset:0 0 0 auto;width:min(84vw,360px);background:var(--noir-2);flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:18px;padding:96px 40px 48px;transform:translateX(100%);visibility:hidden;transition:transform .4s,visibility 0s .4s;border-left:1px solid var(--line);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .nav-links.open{transform:none;visibility:visible;transition:transform .4s,visibility 0s} .nav-links>a:not(.btn){font-size:1.3rem;font-family:var(--fd)} .has-drop{width:100%} .drop-toggle{font-size:1.3rem;font-family:var(--fd)} .drop-toggle::after{display:none} .nav-drop-inner a.nav-drop-lead{font-size:1rem;border-bottom:none;padding:8px 0;margin-bottom:0} /* The hover/focus-within rules that centre the desktop panel (translateX(-50%)) are more specific than a bare `.nav-drop`, so resetting only `.nav-drop` left them live on touch devices: the first tap put the drawer in :focus-within and the whole submenu jumped half its own width to the left, where .nav-links' overflow-x:hidden clipped the start of every label. Reset all three together. */ .nav-drop, .has-drop:hover .nav-drop, .has-drop:focus-within .nav-drop{position:static;transform:none;opacity:1;visibility:visible;padding-top:10px} .nav-drop-inner{background:none;border:none;box-shadow:none;padding:0 0 0 16px;min-width:0;gap:0} /* the desktop rule sets white-space:nowrap; long items ("Event Management & Coordination") must wrap inside the 360px drawer, not run off the right edge */ .nav-drop-inner a{padding:8px 0;font-size:1rem;white-space:normal} .nav-drop-cat{padding:12px 0 3px} /* must sit above the fixed drawer, or it can't be tapped to close the menu */ .burger{display:flex;position:relative;z-index:2} } /* ---------- HERO (home, full) ---------- */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 7vh;overflow:hidden} /* Round 9 — Alicia: homepage and subpage heroes look different on mobile, subpages look better. Confirmed and measured: .page-hero already drops to content-height below 1200px (min-height:auto), but .hero always forced 100svh regardless of content, so the homepage hero filled the whole screen with empty space a short headline didn't need, while every subpage sized naturally. Matched .hero to .page-hero's existing mobile behaviour, same breakpoint. */ @media(max-width:1199px){.hero{min-height:auto}} .hero-media{position:absolute;inset:0} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 45%} /* Round 8 deepened this to fix a measured contrast failure (1.97:1 against a 4.5:1 floor) against brighter client photography. Round 9 — Alicia: "almost cannot see anything, can make more translucent". Measured the ACTUAL current rendering (screenshot + pixel sample under the H1, WCAG formula) before touching this: real contrast was 14.8:1 desktop / 9.7:1 mobile — 2-3x the 4.5 floor, with real margin to lighten. Lightened in two measured passes to 11.7:1 desktop / 7.1:1 mobile — the mobile figure barely moved on the second pass (7.1 either side of it), because the photo itself is dark at that point, not the scrim; pushing further there trades diminishing visual return for shrinking margin above the floor. Do not lighten further without re-measuring — the 4.5 floor is a hard requirement, not a suggestion. */ .hero-media::after{content:'';position:absolute;inset:0;background: linear-gradient(180deg,rgba(11,11,12,.30) 0%,rgba(11,11,12,.06) 16%,rgba(11,11,12,.32) 50%,rgba(11,11,12,.65) 100%), linear-gradient(90deg,rgba(11,11,12,.48) 0%,rgba(11,11,12,.18) 44%,transparent 72%)} @media(max-width:1199px){ .hero-media::after{background: linear-gradient(180deg,rgba(11,11,12,.45) 0%,rgba(11,11,12,.36) 20%,rgba(11,11,12,.54) 55%,rgba(11,11,12,.80) 100%), linear-gradient(90deg,rgba(11,11,12,.45) 0%,rgba(11,11,12,.40) 100%)}} .hero-inner{position:relative;z-index:2;width:100%;padding:0 30px;max-width:var(--wrap);margin:0 auto;text-shadow:0 1px 26px rgba(0,0,0,.5)} .hero .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap} .hero h1{font-size:clamp(2.4rem,4.6vw,4.6rem);max-width:18ch;margin-bottom:20px} .hero h1 em{font-style:italic;color:var(--khaki-lt)} .hero .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:rgba(244,238,226,.85);max-width:50ch;margin-bottom:36px;font-weight:300} .hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px} /* justify-content stays flex-end at EVERY size. It used to flip to flex-start on short or narrow viewports, which pinned the copy to the top of a 100svh box and left the rest as dead photograph — 297px of empty floor at 393x953, a third of the hero, and the gradient is darkest at the bottom, which is precisely where the text is designed to sit. min-height (not height) means a headline taller than the viewport still grows the box instead of overflowing it, so flex-end is safe here in a way it was not for .page-hero's aspect-ratio. */ @media(max-width:820px){ /* .hero-cta already carries margin-bottom:40px and .hero a 7vh pad; this third 40px existed to keep the top-pinned copy off the fold and is now just slack */ .hero-inner{padding-bottom:0} .hero-cta{flex-direction:column;align-items:stretch} .hero-cta .btn{justify-content:center} } /* ---------- PAGE HERO (interior, compact) ---------- */ /* Round 6 #32 — page heroes were sized by viewport (66vh) and fed photos ranging from 0.75 (portrait) to 1.79, so no two pages framed the same and portrait sources were cropped to a narrow band. Fixed at the time by locking the box to aspect- ratio:16/9 to match the now-uniformly-16:9 photo behind it, for zero crop. Round 9 #7 — "hero text block is too close to the fold compared to homepage." A true 16:9 box is usually SHORTER than the viewport on typical laptop/desktop sizes (it only fills the screen exactly on a 16:9 monitor), so the text sat higher than on the homepage, where .hero fills min-height:100svh always. Tried keeping aspect-ratio:16/9 alongside min-height:100svh as a floor — Chromium resolves that combination by GROWING WIDTH to preserve the ratio against the taller min-height (900px min-height -> 1600px width at a 1440px viewport), which overflows the page horizontally. Dropped aspect-ratio instead and matched .hero exactly: min- height:100svh only, same padding. The photo (already true 16:9, same as every hero) is cover-cropped into whatever height that produces, exactly like the homepage photo already is — this does change hero photo framing on desktop from exact-16:9/zero-crop to viewport-fill/cropped, flagged for Carol/Alicia rather than decided silently, since round 6 specifically built the zero-crop behaviour. The box CANNOT be 16:9 on a phone: 16:9 of 390px is 219px, and the h1, lead and two buttons need ~570px. aspect-ratio beats content on a block container, so the copy piles up on top of itself and spills out the TOP (justify-content:flex-end) — the one direction the gate never used to measure. Below 1200px the hero is content-height, exactly as it was, and identical page to page. */ .page-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 7vh;overflow:hidden} @media(max-width:1199px){.page-hero{aspect-ratio:auto;min-height:auto}} .page-hero-media{position:absolute;inset:0} .page-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%} /* Round 8 — the client's new hero photography is markedly brighter than the shots it replaced (snow scenes, white illustration, daylight ballrooms), and the old scrim no longer carried the headline: measured contrast fell to 1.97:1 against a 4.5:1 floor. Deepened here, and deepened further on narrow screens where the headline spans the full width and so sits over the brightest part of the frame rather than the darkened left edge. Round 9 — Alicia: "almost cannot see anything, can make more translucent". Same fix as .hero-media above: measured the real rendering first (14.9:1 desktop / 9.9:1 mobile, both far past the 4.5 floor), lightened in two measured passes to 10.3:1 desktop / 9.2:1 mobile — mobile barely moved on the second pass because the underlying photo is dark at that exact point, not the scrim; that is the floor for this photo without cropping/re-anchoring it, which nobody asked for. Re-measure before lightening further, the 4.5 floor is a hard requirement. */ .page-hero-media::after{content:'';position:absolute;inset:0;background: linear-gradient(180deg,rgba(11,11,12,.40) 0%,rgba(11,11,12,.28) 40%,rgba(11,11,12,.60) 100%), linear-gradient(90deg,rgba(11,11,12,.48) 0%,rgba(11,11,12,.26) 55%,rgba(11,11,12,.12) 100%)} @media(max-width:1199px){ .page-hero-media::after{background: linear-gradient(180deg,rgba(11,11,12,.42) 0%,rgba(11,11,12,.36) 45%,rgba(11,11,12,.62) 100%), linear-gradient(90deg,rgba(11,11,12,.36) 0%,rgba(11,11,12,.32) 100%)}} .page-hero-inner{position:relative;z-index:2;width:100%;padding:0 30px;max-width:var(--wrap);margin:0 auto;text-shadow:0 1px 24px rgba(0,0,0,.5)} /* Round 8 — sub-page hero eyebrows can now run long enough to wrap on mobile (e.g. "Corporate Christmas Party & Year-end Celebrations ✦ Singapore"). Base .eyebrow is inline-flex with no wrap, so the long text became one anonymous flex item that wrapped internally while the star and "Singapore" stayed pinned to a single flex line, stranding them mid-block. This is the same fix .hero .eyebrow already has. */ .page-hero-inner .eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .breadcrumb{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,238,226,.62);margin-bottom:22px;display:flex;gap:9px;flex-wrap:wrap} .breadcrumb a{color:rgba(244,238,226,.62);transition:color .2s} .breadcrumb a:hover{color:var(--khaki-lt)} .breadcrumb .sep{color:var(--khaki);opacity:.7} .breadcrumb [aria-current]{color:var(--khaki-lt)} .page-hero h1{font-size:clamp(2.3rem,4.6vw,4.1rem);max-width:19ch;margin-bottom:20px} .page-hero h1 em{font-style:italic;color:var(--khaki-lt)} .page-hero .lead{font-size:clamp(1.05rem,1.6vw,1.24rem);color:rgba(244,238,226,.86);max-width:56ch;margin-bottom:32px;font-weight:300} .page-hero .btn+.btn{margin-left:4px} @media(max-width:820px){.page-hero{padding-top:120px}.page-hero .hero-cta,.page-hero .btnrow{flex-direction:column;align-items:stretch}.page-hero .btnrow .btn{justify-content:center}} .btnrow{display:flex;gap:16px;flex-wrap:wrap} /* ---------- CLIENTS ---------- */ /* 8px bottom padding let the last logo row collide with the cream FAQ band below it (round 5 #4) — the logo wall closes with the same breathing room it opens with */ .clients{background:var(--noir);padding:var(--sec-y) 0} .clients .cap{text-align:center;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(244,238,226,.5);margin-bottom:var(--gap-cap)} /* minmax(0,1fr), not 1fr: a plain 1fr track has an automatic MINIMUM of min-content, so the widest wordmark (National University of Singapore) pushed its column past its share and ran the whole wall ~17px off the right edge between 901px and ~1150px. Pre-existing, and invisible for months because the gate measured 768 then jumped straight to 1440. */ .logo-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px} .logo-grid .cell{min-width:0} /* translucent cream tiles (softer than solid) at a neat 1:1 ratio */ .logo-grid .cell{aspect-ratio:1/1;display:grid;place-items:center;padding:16px;background:rgba(244,238,226,.8);border-radius:var(--r-sm);transition:background .25s,transform .25s} .logo-grid .cell:hover{background:rgba(244,238,226,.95);transform:translateY(-2px)} /* brightness(.78) keeps pale marks (MFA, Resorts World) legible on the softened tile */ .logo-grid img{max-height:74%;max-width:88%;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(.78);transition:filter .3s} .logo-grid .cell:hover img{filter:grayscale(1) brightness(.6)} /* 6 tiles stop fitting well before 760px — drop to 3 across from tablet down */ @media(max-width:900px){.logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:420px){.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ---------- STATEMENT ---------- */ .statement{padding:var(--sec-y) 0;text-align:center;background:var(--noir)} .statement .inner{max-width:940px;margin:0 auto;padding:0 30px} .statement .mark{width:1rem;height:1.43rem;margin:0 auto 20px;color:transparent;background:var(--khaki);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat} .statement p{font-family:var(--fd);font-size:clamp(1.6rem,3.3vw,2.7rem);line-height:1.3;color:var(--cream);letter-spacing:-.01em} .statement p em{font-style:italic;color:var(--khaki-lt)} .statement .attrib{margin-top:32px;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--khaki)} /* ---------- SECTION SHELL ---------- */ .section{padding:var(--sec-y) 0} /* .tight used to be 56px, which made its neighbours' gap 148px against 184px everywhere else. One rhythm means one value — kept as a class so existing markup and the consistency checker stay happy. */ .section.tight{padding:var(--sec-y) 0} .section.cream{background:var(--cream);color:var(--ink)} .section.espresso{background:var(--espresso)} /* Centred BY DEFAULT. The client has asked for section heads to be centred in four separate review rounds; each time it was applied only to the sections she had screenshotted. Making it the default means a new section cannot ship uncentred. */ /* Round 7 #4 — the head was capped at 680px inside a 1220px wrap, so every section heading sat squeezed in the middle of an empty row. The container is now full width; only the supporting paragraph keeps a reading measure, and it is the SAME measure in every section so none of them can drift again. */ .sec-head{max-width:none;margin:0 auto;text-align:center} .sec-head.center{margin:0 auto;text-align:center} /* legacy, now a no-op */ .sec-head .eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px} /* Round 7 #3 — ONE heading size for every section. Sections 4 and 5 were rendering 29px and 32px against 35px everywhere else on a phone; .split-copy h2 and .cta-band h2 now inherit this single scale rather than carrying their own. */ .sec-head h2,.split-copy h2,.cta-band h2{font-size:clamp(2.2rem,4.8vw,3.7rem)} .sec-head h2{margin-bottom:20px} .cream .sec-head h2{color:var(--ink)} .sec-head p,.cta-band p{font-size:1.26rem;color:rgba(244,238,226,.8);font-weight:400;max-width:var(--measure);margin-left:auto;margin-right:auto} .cream .sec-head p{color:#5c5344} /* ---------- PROSE (rich text) ---------- */ /* Round 7 #6 + #7 — body copy in the 2nd and 3rd sections is centred under its centred heading, instead of sitting left-aligned against it. */ .prose{max-width:var(--measure);margin:0 auto;text-align:center} .prose.center{margin:0 auto;text-align:center} .prose p{font-size:1.24rem;color:rgba(244,238,226,.86);margin-bottom:20px;font-weight:400} .cream .prose p{color:#4c4536} .prose p strong,.prose strong{color:var(--cream);font-weight:600} .cream .prose strong{color:var(--ink)} /* ---------- SPLIT (text + image) ---------- */ /* Round 8 item 4 tried align-items:stretch + a dropped 4:3 lock so the photo would match the copy column's height. The client corrected this in round 9 #5: the photo stays 4:3 and beside the text, even if that means it doesn't reach the same height as the copy. Never trade a client-specified aspect ratio for column symmetry. */ .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:20px} .split.rev .split-media{order:-1} .split-media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow)} /* Round 8 item 4 — body copy left-justified in this section only. This reverses round 7 items 6/7 for the split; the centred .sec-head sections are untouched. */ .split-copy .prose{max-width:none;margin:0;text-align:left} .split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s ease} .split-media:hover img{transform:scale(1.05)} .split-copy h2{margin:14px 0 18px} .cream .split-copy h2{color:var(--ink)} /* Stacked split: centred, and the photo sits ABOVE the button (round 5 #2 + #10). display:contents lifts .split-copy's children into the same flex flow as the figure, so the button can be ordered after the photo without touching markup on any of the 12 subpages — the fix cannot be applied to only some of them. */ @media(max-width:900px){ /* align-items:stretch is REQUIRED — the base .split sets center, and a figure whose only child is position:absolute collapses to 0x0 on the cross axis without it */ .split{display:flex;flex-direction:column;align-items:stretch;gap:34px;text-align:center} .split-copy{display:contents} .split-copy>*{order:1} .split-copy>.eyebrow{justify-content:center} /* Round 7 #5 — the stacked photo sat on the bare 34px flex gap while everything else in the section breathed at 52-66px, so it read as cramped against the button below it. 18px either side brings both of its gaps to 52px. */ /* desktop is 4:3 too (round 9 revert) — restated explicitly here rather than relied on by inheritance, so this rule stays correct even if desktop changes. */ .split-media{order:2;margin:18px 0;aspect-ratio:4/3;min-height:0} /* the stacked layout is centred by design (round 5 #2/#10) — item 4's left-justify applies to the two-column desktop view it was drawn against */ .split-copy .prose{text-align:center;margin:0 auto} .split-copy>.mt-28{order:3;margin-top:0} .split > .cta-row{order:3} .split .checklist li,.split .decor-list li{text-align:left} } /* ---------- CHECKLIST / INCLUDED ---------- */ /* margin-top is a fixed value, not inherited from whatever paragraph happens to sit above — the subpages were rendering an 8px body-text-to-bullets gap against the homepage's 30px+ (client-reported twice: round 4 #1, round 5 #3) */ /* Round 8 item 2 — three columns, matching the décor-list format Alicia sent as the reference. Two at tablet, one on a phone. */ .checklist{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 30px;margin-top:40px} .checklist.one{grid-template-columns:1fr} /* NOT display:flex — an inline inside the sentence becomes its own flex item and the bullet breaks into columns (round 5 #12). Block + absolute star keeps all inline content in one text flow, so any bullet can safely contain a link. */ .checklist li{display:block;position:relative;padding-left:24px;font-size:1.08rem;color:rgba(244,238,226,.86);padding-top:16px;border-top:1px solid var(--line)} .cream .checklist li{color:#4c4536;border-color:rgba(26,23,18,.12)} .checklist li .star{position:absolute;left:0;top:16px;margin-top:.2em;font-size:.85em} /* Round 8 — a lone last item left an empty cell beside it; span it instead. 'Alone on the last row' means 3n+1 at three columns and odd at two. */ .checklist > li:last-child:nth-child(3n+1){grid-column:1/-1} @media(max-width:900px){.checklist{grid-template-columns:repeat(2,1fr)} .checklist > li:last-child:nth-child(3n+1){grid-column:auto} .checklist > li:last-child:nth-child(odd){grid-column:1/-1}} @media(max-width:640px){.checklist{grid-template-columns:1fr} .checklist > li:last-child{grid-column:auto}} /* ---------- PILLARS / FEATURE CARDS ---------- */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px} .pillars.four{grid-template-columns:repeat(4,1fr)} /* Round 8 — same orphan problem as .svc-grid, but the column count changes per breakpoint, so "alone on the last row" has to be re-expressed at each one. 3-col: orphaned when the count is 3n+1. 4-col: when it is 4n+1. See the 900px and 560px blocks below for the 2-col and 1-col cases. */ .pillars:not(.four) > :last-child:nth-child(3n+1){grid-column:1/-1} .pillars.four > :last-child:nth-child(4n+1){grid-column:1/-1} .pillar{padding:32px 28px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02)} .cream .pillar{border-color:rgba(26,23,18,.12);background:rgba(255,255,255,.45)} .pillar .k{font-family:var(--fd);font-size:2rem;color:var(--khaki);line-height:1;margin-bottom:14px} .pillar h3{font-size:1.3rem;margin-bottom:10px;color:var(--cream)} /* Round 6 #18 — the diamond cards used a 2rem ✦ glyph on its own line, a rounder, fatter star than the client's wordmark mark. Every diamond is now the shared .star mask (sharp + taller than wide), sized down and set ON the subheader line. It lives on .pillar h3 so a new card cannot ship with the old treatment. */ .pillar h3 .star{width:.52em;height:.74em;margin-right:.42em;vertical-align:baseline;background:var(--khaki)} .cream .pillar h3 .star{background:var(--khaki-dim)} .cream .pillar h3{color:var(--ink)} .pillar p{font-size:1.1rem;color:rgba(244,238,226,.82);font-weight:400} .cream .pillar p{color:#5c5344} .services-feature{max-width:780px;margin:56px auto 50px;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow)} .services-feature img{width:100%;height:100%;object-fit:cover} /* linked service cards */ a.pillar{display:flex;flex-direction:column;transition:border-color .25s,background .25s,transform .25s} a.pillar:hover{border-color:var(--khaki);background:rgba(185,166,125,.07);transform:translateY(-3px)} .pillar .more{display:inline-block;margin-top:auto;padding-top:18px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--khaki-lt)} @media(max-width:900px){.pillars,.pillars.four{grid-template-columns:repeat(2,1fr)} /* 2-col: reset the 3n+1 / 4n+1 rules and re-test for "odd count" instead */ .pillars:not(.four) > :last-child:nth-child(3n+1),.pillars.four > :last-child:nth-child(4n+1){grid-column:auto} /* must match the reset's specificity (:not(.four) counts as a class) and come after it, or an item that is both 3n+1 and odd keeps the reset's value */ .pillars:not(.four) > :last-child:nth-child(odd),.pillars.four > :last-child:nth-child(odd){grid-column:1/-1}} @media(max-width:560px){.pillars,.pillars.four{grid-template-columns:1fr} /* 1-col: every item is already full width, so no spanning rule should survive */ .pillars > :last-child,.pillars.four > :last-child{grid-column:auto}} /* ---------- DECOR SIGNATURE ---------- */ .decor-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;margin-top:56px;align-items:stretch} /* align-self:start — round 9 #8 makes the two side thumbs true 16:9, which no longer reliably sums to this feature's 4:3 height; without this, decor-grid's default align-items:stretch would grow the feature past its own protected ratio to close the gap. A small mismatch in the two columns' bottoms is the accepted trade-off. */ .decor-feature{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;align-self:start} .decor-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s ease} .decor-feature:hover img{transform:scale(1.05)} .decor-feature::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,.72) 26%,rgba(11,11,12,.2) 62%,transparent 88%)} .decor-feature .cap{position:absolute;left:0;bottom:0;z-index:2;padding:30px;display:flex;flex-direction:column;gap:8px} .decor-feature .cap .t{font-family:var(--fd);font-size:1.7rem;color:var(--cream);display:block} .decor-feature .cap .s{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--khaki-lt);display:block} /* side column tracks the feature's height — no fixed ratio here, or the columns desync and overlap. This is the DEFAULT, still used by index.html's own decor-signature teaser (different photos, never raised by the client) — see .thumbs-16by9 below for event-decor-styling's. */ .decor-side{display:grid;grid-template-rows:1fr 1fr;gap:26px;min-height:0} .decor-thumb{position:relative;border-radius:var(--r);overflow:hidden;min-height:0} .decor-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s ease} .decor-thumb:hover img{transform:scale(1.06)} /* Round 9 #8 — event-decor-styling.html only ("ensure the placeholders are 16:9 too. Else we will get weird crop"). Scoped to .thumbs-16by9 rather than the bare class, since .decor-thumb is shared with index.html's teaser, which uses different photos the client never asked to change — an unscoped fix would have cropped those too. Rows are auto, not 1fr, so each thumb sizes from its own aspect-ratio instead of splitting whatever height decor-feature happens to stretch the column to. */ .thumbs-16by9 .decor-side{grid-template-rows:auto auto} .thumbs-16by9 .decor-thumb{aspect-ratio:16/9} /* 40px matches .checklist — one shared value so no page can drift (round 5 #3) */ .decor-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 24px;margin-top:40px} /* block, not flex — see .checklist li above (round 5 #12) */ .decor-list li{display:block;position:relative;padding-left:24px;font-size:1.06rem;color:rgba(244,238,226,.86);padding-top:16px;border-top:1px solid var(--line)} .decor-list li .star{position:absolute;left:0;top:16px;margin-top:.15em;font-size:.85em} @media(max-width:900px){.decor-grid{grid-template-columns:1fr}.decor-side{grid-template-rows:none;grid-template-columns:1fr 1fr}.decor-thumb{aspect-ratio:4/3}.thumbs-16by9 .decor-thumb{aspect-ratio:16/9}.decor-list{grid-template-columns:1fr}} /* ---------- SERVICES CARDS ---------- */ /* 2 per row so each tab is large and its caption stays legible */ .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:56px} .svc-grid.three{grid-template-columns:repeat(2,1fr)} /* Round 8 spanned a lone last card full-width at aspect-ratio:16/6 to avoid an empty cell beside it — the client corrected this in round 9 #4: new content follows the format of the section it is added to, aspect ratio included. A lone last card is now just another 4:3 card, same as every other one; the empty cell beside it is the accepted trade-off. */ /* Round 9 — mobile text was overflowing the 4:3 photo on longer descriptions. Markup now separates the photo+heading+explore overlay (.svc-media > .body) from the description (.svc-desc), as siblings, so the description can escape the fixed-ratio box at mobile instead of being clipped inside it. At DESKTOP, .svc-media and .body dissolve via display:contents, rejoining h3/.more directly into .svc's own flex flow alongside .svc-desc — `order` then reproduces the exact original stacking (heading, description, explore, all overlaid on the photo). Nothing here changes what desktop looks like. */ .svc{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate} .svc-media{display:contents} .svc .body{display:contents} .svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s ease} /* deeper scrim — the captions sit over photography and must stay readable */ .svc::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,11,12,.96) 0%,rgba(11,11,12,.86) 24%,rgba(11,11,12,.44) 58%,rgba(11,11,12,.12) 100%)} .svc:hover img{transform:scale(1.07)} .svc h3{order:1;padding:0 36px;font-size:1.95rem;line-height:1.14;color:var(--cream);margin-bottom:12px;text-wrap:balance} .svc-desc{order:2;padding:0 36px;font-size:1.12rem;line-height:1.55;color:rgba(244,238,226,.86);font-weight:400} .svc .more{order:3;padding:0 36px 38px;display:inline-block;margin-top:18px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--khaki-lt)} /* one card sitewide has no .more link — without it .svc-desc is the last item and needs the 38px bottom padding itself, or its text sits flush on the card edge */ .svc:not(:has(.more)) .svc-desc{padding-bottom:38px} @media(max-width:640px){ .svc-grid,.svc-grid.three{grid-template-columns:1fr} /* mobile: .svc grows to fit content instead of being locked to the photo's ratio; .svc-media becomes a real, separately-sized 4:3 box again (heading and explore still overlaid on it, unchanged) and .svc-desc drops into normal flow below it, so long copy can never be clipped. */ .svc{aspect-ratio:auto;display:block;overflow:visible} .svc::after{display:none} .svc-media{display:block;position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3} .svc-media::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,11,12,.96) 0%,rgba(11,11,12,.86) 24%,rgba(11,11,12,.44) 58%,rgba(11,11,12,.12) 100%)} .svc .body{display:flex;flex-direction:column;position:absolute;inset:0;justify-content:flex-end;padding:30px 26px} .svc h3{order:0;padding:0;font-size:1.6rem;margin-bottom:12px} .svc .more{order:0;padding:0;margin-top:18px} .svc-desc{order:0;padding:20px 26px 26px;margin:0} } /* ---------- PORTFOLIO ---------- */ .port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px} .port{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3} .port img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease} .port:hover img{transform:scale(1.07)} .port::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,.74) 26%,rgba(11,11,12,.2) 62%,transparent 88%);transition:opacity .3s} .port .cap{position:absolute;left:0;bottom:0;z-index:2;padding:24px 26px} .port .cap .s{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--khaki-lt);display:block;margin-bottom:5px} .port .cap .t{font-family:var(--fd);font-size:1.4rem;color:var(--cream)} /* 5 tiles read as a balanced 2-then-3 editorial block rather than an orphaned row */ .port-grid.five{grid-template-columns:repeat(6,1fr)} .port-grid.five .port:nth-child(-n+2){grid-column:span 3} .port-grid.five .port:nth-child(n+3){grid-column:span 2} @media(max-width:820px){.port-grid{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto} .port-grid.five{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto} .port-grid.five .port{grid-column:auto}} /* ---------- STATS ---------- */ .stats{background:var(--noir);padding:var(--sec-y) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center} .stat .n{font-family:var(--fd);font-size:clamp(2.6rem,5vw,3.6rem);color:var(--khaki-lt);line-height:1} .stat .l{color:rgba(244,238,226,.68);font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;margin-top:12px} @media(max-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:44px 20px}} /* ---------- TESTIMONIALS ---------- */ .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px} .testi{padding:32px 28px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02);display:flex;flex-direction:column} .testi blockquote{font-size:1.12rem;line-height:1.62;color:rgba(244,238,226,.88);font-weight:400} .testi figcaption{margin-top:22px;display:flex;align-items:center;gap:14px} .testi figcaption .avatar{width:42px;height:42px;border-radius:50%;background:var(--khaki);color:#1a140a;font-family:var(--fd);font-size:1.15rem;display:grid;place-items:center;flex:none} .testi figcaption .who{display:flex;flex-direction:column;gap:4px} .testi figcaption .n{font-family:var(--fd);font-size:1.05rem;color:var(--cream)} .testi figcaption .d{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--khaki-dim);display:inline-flex;align-items:center;gap:5px} .testi figcaption .d svg{width:13px;height:13px;flex:none} @media(max-width:900px){.testi-grid{grid-template-columns:1fr}} /* ---------- PROCESS ---------- */ .proc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:56px} .proc{padding:42px 38px;border:1px solid var(--line-lt);border-radius:var(--r);background:rgba(255,255,255,.4)} .cream .proc{border-color:rgba(26,23,18,.12)} .proc .num{font-family:var(--fd);font-size:3rem;color:var(--khaki);line-height:1} .proc h3{font-size:1.7rem;color:var(--ink);margin:16px 0 10px} .proc p{font-size:1.14rem;color:#5c5344;font-weight:400} @media(max-width:640px){.proc-grid{grid-template-columns:1fr}.proc{padding:32px 28px}} /* ---------- CTA BAND ---------- */ .cta-band{background:var(--espresso);text-align:center;padding:var(--sec-y) 0} .cta-band h2{color:var(--cream);margin:0 auto 18px;max-width:none} .cta-band p{color:rgba(244,238,226,.76);font-weight:300;margin:0 auto 32px} /* ---------- PRESS ---------- */ /* Full rhythm on every side. Halving the facing paddings here made the press->clients gap 92px while every other section gap on the page was 184px — the client spotted it immediately. Every section contributes the same padding; every gap is the same. */ .press{padding:var(--sec-y) 0;background:var(--noir)} .press .cap{text-align:center;font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(244,238,226,.5);margin-bottom:var(--gap-cap)} /* true greyscale on light tiles — the old silhouette filter flattened solid-background logos into blocks */ .press-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap} /* flex:0 0 158px, not min-width — min-width let the widest logo (Weekender) stretch its own tile to 208px while the rest sat at 158px, so the row had no rhythm */ .press-row .cell{height:80px;flex:0 0 158px;display:flex;align-items:center;justify-content:center;padding:14px 22px;overflow:hidden;background:rgba(244,238,226,.8);border-radius:var(--r-sm);transition:background .25s,transform .25s} /* The press row sits directly above the 6-across client wall. As a centred flex of fixed-width tiles it stopped ~128px short of the wall's edges and its tiles were uneven (158px vs 208px), so the two stacked walls read as misaligned. On desktop it is a 5-column grid on the same container: same outer edges, one tile rhythm. MUST come after the .cell rule above — it resets that min-width. */ @media(min-width:901px){ .press-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px} .press-row .cell{min-width:0} } .press-row .cell:hover{background:rgba(244,238,226,.95);transform:translateY(-2px)} /* explicit px cap — a percentage max-height doesn't resolve against the padded box here */ .press-row img{max-height:50px;max-width:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(.78);transition:filter .3s} .press-row .cell:hover img{filter:grayscale(1) brightness(.6)} @media(max-width:640px){.press-row{gap:12px}.press-row .cell{height:62px;flex:0 0 118px;padding:10px 14px}.press-row img{max-height:40px}} /* ---------- FAQ ---------- */ .faq{max-width:940px;margin:56px auto 0} details.qa{border-bottom:1px solid var(--line-lt);padding:4px 0} .cream details.qa{border-color:rgba(26,23,18,.14)} details.qa summary{list-style:none;cursor:pointer;font-family:var(--fd);font-size:1.85rem;color:var(--ink);padding:30px 48px 30px 0;position:relative} .section:not(.cream) details.qa summary{color:var(--cream)} details.qa summary::-webkit-details-marker{display:none} details.qa summary::after{content:'';position:absolute;right:8px;top:50%;width:12px;height:12px;border-right:1.5px solid var(--khaki-dim);border-bottom:1.5px solid var(--khaki-dim);transform:translateY(-70%) rotate(45deg);transition:transform .3s} details.qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)} details.qa .a{color:#5c5344;font-size:1.24rem;line-height:1.65;padding:0 48px 32px 0} .section:not(.cream) details.qa .a{color:rgba(244,238,226,.76)} /* Round 8 — several of Alicia's FAQ answers are short option lists, so answers now have to carry a