.z-menu-open_0 { left: 12px; top: 4px; width: 30px; height: 48px; color: rgba(255,255,255,1); } .z-menu-open_1 { left: 1068px; top: 754px; width: 28px; height: 21px; color: rgba(255,255,255,1); } .z-menu-open_2 { left: 1136px; top: 754px; width: 28px; height: 21px; color: rgba(255,255,255,1); } .z-menu-open_3 { left: 1103px; top: 754px; width: 28px; height: 21px; color: rgba(255,255,255,1); } .z-menu-open_4 { left: 218px; top: 435px; width: 762px; height: 1px; background: currentColor; opacity:.5; transform: rotate(270deg); } .z-menu-open_6 { left: 471px; top: 243px; width: 256px; height: 322px; } .z-menu-open_7 { left: -15px; top: 54px; width: 1230px; height: 1px; background: currentColor; opacity:.5; } /* Round 3: the SHUTTER GOLD wordmark text became the client's ivory logo image ("can we just swap Shutter Gold and put our logo there?"). Sized/placed to hold the old text slot: 320px wide (10:3 file, 96px tall) centered on the right column at x~963, ending above the paragraph at y425. */ .z-menu-open_8 { left: 803px; top: 318px; width: 320px; height: auto; } .z-menu-open_9 { left: 795px; top: 425px; width: 327px; color: rgba(255,255,255,1); font-size: 17px; text-align: center; } .z-menu-open_10 { left: 868px; top: 592px; width: 182px; height: 49px; } .z-menu-open_11 { left: 6px; top: 211px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; } .z-menu-open_12 { left: 6px; top: 266px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; } .z-menu-open_13 { left: 6px; top: 321px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; } .z-menu-open_14 { left: 6px; top: 376px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; } .z-menu-open_15 { left: 6px; top: 431px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; } .z-menu-open_16 { left: 6px; top: 486px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; } .menu-overlay a.t-title { text-decoration: none; } .menu-overlay a.t-title:hover { opacity: .7; } .z-menu-open_19 { left: 122px; top: 640px; width: 219px; color: rgba(255,255,255,1); text-transform: uppercase; line-height: 1.6; letter-spacing: 0.1em; font-size: 13px; font-family: 'Red Hat Display'; font-weight: 500; font-style: normal; } .z-menu-open_20 { left: 100px; top: 606px; width: 263px; color: rgba(255,255,255,1); font-size: 13px; } .z-menu-open_21 { left: 100px; top: 674px; width: 263px; color: rgba(255,255,255,1); font-size: 13px; } /* the white menu bar that slides down past the hero, brought onto the home page 2026-09-13 (owner: "apply the same menu that's on every page except the home page onto the home page"). COPIED from css/social-events.css; keep in step with it and with css/services.css. It replaces the raw Showit sticky bar this file used to carry, whose .z-stick-top-menu-white_* children index.html has never rendered (dead rules, left below). position:fixed is load-bearing, not cosmetic: script.js only wires the scroll toggle when the bar computes to fixed, and sticky would park it over the hero from the top of the page instead of sliding in past it. */ .sec-stick-top-menu-white { --h: 53px; background: var(--white); position: fixed; top: 0; left: 0; right: 0; z-index: 40; transform: translateY(-100%); transition: transform .4s; border-bottom: 1px solid rgba(37,31,24,.28); } .stm-in { height: 53px; display: flex; align-items: center; justify-content: center; gap: 44px; } .stm-in a { font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--ink); } .stm-in a:hover { opacity: .6; } .stm-in a[aria-current] { border-bottom: 1px solid var(--ink); padding-bottom: 2px; } .stm-burger { position: absolute; left: 24px; top: 10px; width: 42px; height: 32px; background: none; border: 0; cursor: pointer; } .stm-burger svg { fill: rgba(89,87,84,1); } .stm-burger:hover { opacity: .55; } /* dead: the Showit bar's children, which index.html does not render */ .z-stick-top-menu-white_0 { left: calc(600px - 50vw); top: 54px; width: 100vw; height: 1px; background: currentColor; opacity:.5; } .z-stick-top-menu-white_1 { left: 23px; top: 5px; width: 80px; height: 44px; color: rgba(89,87,84,1); } .z-stick-top-menu-white_2 { left: 1014px; top: 17px; width: 186px; font-size: 12px; } .z-stick-top-menu-white_3 { left: 244px; top: 17px; width: 47px; color: rgba(37,31,24,1); font-size: 12px; } .z-stick-top-menu-white_4 { left: 347px; top: 17px; width: 55px; color: rgba(37,31,24,1); font-size: 12px; } .z-stick-top-menu-white_5 { left: 458px; top: 17px; width: 88px; color: rgba(37,31,24,1); font-size: 12px; } .z-stick-top-menu-white_6 { left: 602px; top: 17px; width: 77px; color: rgba(37,31,24,1); font-size: 12px; } .z-stick-top-menu-white_7 { left: 735px; top: 17px; width: 77px; color: rgba(37,31,24,1); font-size: 12px; } .z-stick-top-menu-white_8 { left: 868px; top: 17px; width: 89px; color: rgba(37,31,24,1); font-size: 12px; } /* letterbox hero (hero-variants round 1, 05 selected): giant SHUTTER / film band / GOLD. Scroll-linked in script.js: over the section's extra viewport of travel the band (a triptych of three vertical portfolio videos, each panel near its native 9:16 at fullscreen) grows from a 300px strip to the full window and darkens under .lbx-shade, the eyebrow/menu fade out, and the two words converge to a stacked lockup at the vertical center. The words and the foot (CHECK YOUR DATE) never fade and sit z-index above the band. Convergence completes at ~85% of the travel; the held beat lasts until the pin releases and the video scrolls away. Text offsets are measured from the band's fixed 300px rest slot around the vertical center, so gaps hold at any window height. */ .sec-letterbox-hero { --h: 200vh; background: var(--cream); } .lbx-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; } .lbx-pin > * { position: absolute; left: 0; right: 0; } .lbx-eyebrow { bottom: calc(50% + 322px); color: var(--teal); letter-spacing: .26em; font-size: 11px; } .lbx-word { bottom: calc(50% + 168px); overflow: hidden; text-align: center; font-family: 'PonteExtraLight', serif; font-weight: 400; font-size: 140px; line-height: .95; letter-spacing: .015em; color: var(--ink); z-index: 3; } .lbx-word span { display: inline-block; transform: translateY(110%); animation: lbx-lift 1s cubic-bezier(.2,.7,.2,1) forwards; } .lbx-top span { animation-delay: .15s; } .lbx-bottom { bottom: auto; top: calc(50% + 168px); } .lbx-bottom span { animation-delay: .35s; } @keyframes lbx-lift { to { transform: translateY(0); } } .lbx-band { top: 50%; height: 300px; transform: translateY(-50%); overflow: hidden; z-index: 2; animation: lbx-curtain 1.1s cubic-bezier(.6,.05,.2,1) .5s backwards; } @keyframes lbx-curtain { from { transform: translateY(-50%) scaleY(.02); } to { transform: translateY(-50%) scaleY(1); } } .lbx-tri { position: absolute; inset: 0; display: flex; } .lbx-tri video { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; transition: transform 3.5s ease; } .lbx-shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; } .lbx-band:hover video { transform: scale(1.05); } .lbx-cap { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-family: 'MrsSaintDelafield', cursive; font-size: 40px; line-height: 0.85; color: var(--cream); text-shadow: 0 2px 14px rgba(13,25,28,.6); opacity: 0; transform: translateY(12px); transition: all .6s ease; pointer-events: none; } .lbx-band:hover .lbx-cap { opacity: 1; transform: translateY(0); } .lbx-foot { top: calc(50% + 332px); display: flex; align-items: center; justify-content: center; gap: 30px; z-index: 3; } .lbx-rule { height: 1px; width: 130px; background: rgba(37,31,24,.3); } .lbx-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; padding: 15px 36px; font-family: 'RedHatDisplaySemiBold', sans-serif; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; transition: all .4s; } .lbx-btn:hover { background: var(--ink); color: var(--cream); } .lbx-menu { left: 36px; right: auto; top: 30px; width: 42px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 6; transition: opacity .3s; } .lbx-menu svg { fill: var(--cream); } .lbx-menu:hover { opacity: .55; } /* Brand logo (revision round 2 — "incorporate our logo within this top portion?"). Anchored to the EYEBROW, not the top edge: every other element here is placed off the vertical center, so the headroom above the eyebrow is not fixed, it is (50vh - 335px). At a 1440x900 window that is ~115px; on a 13" laptop (~800px viewport) it is ~65px. A fixed-size badge would sit on the eyebrow at those heights, so the height is clamped to whatever headroom actually exists. Background-image rather than so the short-viewport fallback below can swap the art without shipping two elements — the browser fetches only the one the media query selects. Carries .lbx-fade, so it fades with the eyebrow and menu as the film band expands (script.js queries .lbx-fade as a NodeList). */ /* pointer-events:none is load-bearing: .lbx-pin > * stretches this to the full width, so although the artwork is centred the BOX covers the hamburger at left:36px and, being later in the DOM at the same z-index, was swallowing every click on it. */ /* Revision round 3: the badge art gives way to the client's ivory wordmark ("just the ivory version of our name"). Every colorway paints this hero dark, so the light-background file is the wrong one and wordmark-light is right. A wordmark is type, so unlike the badge it stays legible at small heights and the short-viewport art swap below is no longer a different file, only a tighter clamp. 10:3 aspect: height 72px sets it ~240px wide. */ .lbx-mark { bottom: calc(50% + 347px); height: min(72px, calc(50vh - 361px)); background: center / contain no-repeat url(../assets/swaps/logos/wordmark-light.png); z-index: 6; pointer-events: none; } @media (max-height: 942px) { .lbx-mark { height: min(46px, calc(0.748 * (50vh - 355px))); } } .sec-brand-bio { --h: max(710px, 100vh); background: rgba(252,251,249,1); position: sticky; top: 0px; z-index: 0; } .sec-brand-bio .cv { height: 710px; top: 50%; transform: translateY(-50%); } .bbp-peek { position: absolute; top: 50%; width: 280px; height: 400px; object-fit: cover; box-shadow: 0 24px 60px rgba(37,31,24,.18); z-index: 1; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); } .bbp-l { left: 0; transform: translate(-62%,-50%) rotate(-6deg); } .bbp-r { right: 0; transform: translate(62%,-50%) rotate(5deg); } .bbp-l:hover { transform: translate(-18%,-50%) rotate(-2deg); } .bbp-r:hover { transform: translate(18%,-50%) rotate(1.5deg); } .bbp-kicker { left: 0; top: 92px; width: 1200px; text-align: center; color: rgba(37,31,24,.55); font-family: 'Red Hat Display'; font-weight: 500; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.6; } /* Round 3: "Curated to bring guests together" collapses to ONE line with a script Together, so the headline is 2 lines again. That second line sets ~730px wide at 44px, so the box widens 720 -> 820 (still clear of the edge peeks, whose visible slivers end at x~106 / start at x~1094). .bbp-br is the phone-only break: desktop shows the phrase on its one line. */ .bbp-h { left: 190px; top: 148px; width: 820px; color: rgba(37,31,24,1); text-align: center; font-family: 'PonteExtraLight'; font-weight: 400; font-size: 44px; line-height: 1.04; letter-spacing: -0.01em; } .bbp-br { display: none; } .bbp-h em { font-family: 'MrsSaintDelafield', cursive; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 0.82em; } .bbp-p { left: 330px; top: 404px; width: 540px; text-align: center; font-family: 'Albert Sans'; font-size: 17px; line-height: 1.75; } .bbp-sub { left: 180px; top: 548px; width: 840px; text-align: center; font-family: 'PonteLight'; font-weight: 400; font-size: 25px; } .bbp-foot { left: 130px; top: 610px; width: 940px; display: flex; align-items: center; justify-content: center; gap: 18px; color: rgba(134,157,159,1); font-family: 'Red Hat Display'; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.6; } .bbp-foot::before, .bbp-foot::after { content: ""; width: 90px; height: 1px; background: rgba(37,31,24,.25); } .bbp-btn { left: 50%; top: 600px; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; padding: 15px 42px; font-family: 'RedHatDisplaySemiBold', sans-serif; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; transition: all .4s; } .bbp-btn:hover { background: var(--ink); color: var(--cream); } .sec-floating-images { --h: 1054px; background: transparent; } /* photos fade in as they enter the viewport (script.js adds .is-in); opacity only, no transform, so the editor's inline translate nudges stay safe */ .sec-floating-images .ph { opacity: 0; transition: opacity .8s ease; } .sec-floating-images .ph.is-in { opacity: 1; } .sec-floating-images .ph:nth-of-type(2) { transition-delay: .15s; } .sec-floating-images .ph:nth-of-type(3) { transition-delay: .3s; } .sec-floating-images .ph:nth-of-type(4) { transition-delay: .1s; } .z-floating-images_0 { left: 274px; top: 7px; width: 652px; height: 875px; } .z-floating-images_1 { left: 1071px; top: -163px; width: 335px; height: 460px; } .z-floating-images_2 { left: 839px; top: 699px; width: 268px; height: 353px; } .z-floating-images_3 { left: -202px; top: 189px; width: 310px; height: 429px; } /* v2: printed photo strip, laid diagonally across the bottom-left corner of the big centre photo (which sits at x 274..926, y 7..882) so it reads as dropped on top of it rather than floating in a gutter. 132x396 keeps the strip's native 1:3 so nothing is cropped. Last in the DOM, so it paints over the centre photo without needing a z-index. */ .z-floating-images_4 { left: 285px; top: 537px; width: 132px; height: 396px; transform: rotate(-24deg); } /* three-options: gilt-mat wallpaper treatment (variant 03, 2026-07-25) — the damask runs full-bleed and viewport-fixed under a glaze of the colorway's --dark; the composition sits on a solid --dark panel with a gilt border. */ /* Service-area marquee (revision round 2), sitting directly above the booths. Borrows the mat's gold hairline so it reads as part of that panel's frame. The track holds two identical spans and travels -50%, so the loop is seamless. */ .twn-ticker { overflow: hidden; white-space: nowrap; background: var(--dark); border-top: 1px solid rgba(224,162,78,.42); border-bottom: 1px solid rgba(224,162,78,.42); padding: 17px 0; } .twn-track { display: inline-block; animation: twn-tick 52s linear infinite; } .twn-track span { font-family: 'Red Hat Display', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--teal); } @keyframes twn-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .twn-track { animation: none; } } .sec-three-options { --h: max(100vh, 740px); background: linear-gradient(color-mix(in srgb, var(--dark) 60%, transparent), color-mix(in srgb, var(--dark) 60%, transparent)), url('../assets/wallpaper-bg.webp'); background-size: auto, 520px auto; background-repeat: no-repeat, repeat; background-attachment: fixed; } .sec-three-options .cv { transform: scale(.85); } .tol-mat { left: -72px; right: -72px; top: 44px; bottom: 44px; background: var(--dark); border: 1px solid rgba(224,162,78,.42); outline: 1px solid rgba(224,162,78,.16); outline-offset: 6px; box-shadow: 0 40px 110px rgba(15,4,6,.65); } /* Round 3 ("the photos are cutting off"): the client's three photos are all 1080x1440, and a fixed 620px width against a viewport-driven height was cropping up to a quarter of each frame on shorter windows. The stage now holds their native 3:4 at every height, so cover fits exactly and nothing is cut. Width tops out at 600 (800 x .75), within the old 620 slot. */ .tol-stage { left: 0; top: 50%; transform: translateY(-50%); height: clamp(560px, 100vh - 188px, 800px); width: calc(clamp(560px, 100vh - 188px, 800px) * .75); overflow: hidden; } .tol-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s; } .tol-slide.is-on { opacity: 1; } /* The fourth slide is the Editorial Portrait Lounge, and since 2026-09-12 it is her real photo (portrait-lounge-western-rich.jpg). It is the only full-length shot in the set: the couple's faces run 13%-28% of a 1067x1600 frame, so a centred crop in this tall stage opens below their hairlines. The other three slides are framed close and stay centred. Slides are index-matched to .tol-item by script.js, so this is positional on purpose. */ .tol-stage .tol-slide:nth-of-type(4) { object-position: 50% 32%; } .tol-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,25,28,0) 62%, rgba(13,25,28,.7) 100%); } .tol-badge { position: absolute; left: 34px; bottom: 30px; color: #fff; z-index: 2; } .tol-b-num { font-family: 'MrsSaintDelafield', cursive; font-style: italic; font-size: 19px; opacity: .85; } .tol-b-ttl { font-family: 'Red Hat Display', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .24em; text-transform: uppercase; margin-top: 8px; } .tol-side { left: 704px; width: 440px; top: 50%; transform: translateY(-50%); } .tol-label { font-family: 'Red Hat Display', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .35em; text-transform: uppercase; color: var(--teal); } .tol-script { font-family: 'PonteLight', serif; font-size: 46px; line-height: 1; font-weight: 400; letter-spacing: -.01em; text-transform: uppercase; margin: 12px 0 34px; color: var(--cream); } .tol-item { display: block; padding: 24px 0; border-top: 1px solid rgba(252,251,249,.22); cursor: pointer; opacity: .45; transition: opacity .45s; text-decoration: none; color: var(--cream); } .tol-item:last-child { border-bottom: 1px solid rgba(252,251,249,.22); } .tol-item.is-on { opacity: 1; } .tol-no { display: block; font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; } .tol-head { display: flex; align-items: baseline; gap: 16px; } .tol-idx { font-family: 'MrsSaintDelafield', cursive; font-style: italic; font-size: 18px; color: var(--teal); } .tol-ttl { font-family: 'Red Hat Display', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; } .tol-arrow { margin-left: auto; font-size: 20px; opacity: 0; transform: translateX(-8px); transition: opacity .45s, transform .45s; } .tol-item.is-on .tol-arrow { opacity: 1; transform: none; } .tol-desc { display: block; font-size: 16px; line-height: 1.6; opacity: .85; max-height: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.22,.61,.21,1), margin .55s; } /* v2: the Classic Vintage Enclosed copy is ~3x the length of the other two and was being silently cut off by the old 130px cap (the box is overflow:hidden, so there was no visible sign of the clip). Raised to clear the longest of the three; the panel is centred, so the extra height grows both ways off centre. */ .tol-item.is-on .tol-desc { max-height: 250px; margin-top: 12px; } /* Four options since 2026-09-08 (Editorial Portrait Lounge). The list runs in a fixed-height canvas, so the fourth entry buys its room from the item padding rather than growing the section: at 24px the open Classic Vintage entry ran 8px past the mat on a 720px-tall window. The 250px description cap above stays; the 112px cap the live copy used would clip that paragraph. */ .tol-side .tol-item { padding: 18px 0; } /* what-we-do ledger (variant 01 "the ledger", 2026-07-25): left column stacks the four index rows as you scroll (sticky at increasing offsets; whole index visible at the end), right column photos cover each other (sticky top:0). Full-bleed section, no .cv canvas. Rows are spaced with margin-TOP on the following sibling: a large margin-bottom shrinks the sticky travel range and rows pin short of their top offset. Colors ride the colorway vars. */ .sec-wdl { position: relative; height: 460vh; display: flex; background: var(--paper); } .wdl-left { width: 45%; position: relative; padding-left: clamp(28px, 4.5vw, 72px); padding-right: clamp(20px, 3vw, 48px); } .wdl-right { width: 55%; position: relative; } .wdl-row { position: sticky; height: 21vh; padding-top: 2vh; border-top: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; } .wdl-row + .wdl-row { margin-top: 79vh; } .wdl-row.on { opacity: .42; transform: none; } .wdl-row.act { opacity: 1; } .wdl-r1 { top: 8vh; } .wdl-r2 { top: 29vh; } .wdl-r3 { top: 50vh; } .wdl-r4 { top: 71vh; } .wdl-no { font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--teal); margin-bottom: 1vh; line-height: 1.6; } .wdl-nm { font-family: 'PonteExtraLight'; font-weight: 400; font-size: clamp(30px, 3.2vw, 44px); line-height: .98; letter-spacing: -.01em; margin-bottom: 1.1vh; } .wdl-g { font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; color: color-mix(in srgb, var(--ink) 62%, transparent); max-width: 420px; } .wdl-lnk { display: inline-flex; align-items: center; gap: 10px; margin-top: 1.4vh; font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--ink); padding-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 50%, transparent); opacity: 0; transform: translateY(8px); transition: opacity .5s .15s, transform .5s .15s, color .3s; } .wdl-row.act .wdl-lnk { opacity: 1; transform: none; } .wdl-lnk:hover { color: var(--teal); border-color: var(--teal); } .wdl-pane { position: sticky; top: 0; height: 100vh; overflow: hidden; } .wdl-pane img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; } .wdl-pane::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 25%, transparent); } .wdl-cnt { position: fixed; right: 30px; bottom: 26px; z-index: 50; font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .3em; color: var(--cream); background: color-mix(in srgb, var(--dark) 55%, transparent); padding: 10px 16px; backdrop-filter: blur(4px); opacity: 0; transition: opacity .4s; pointer-events: none; } .wdl-cnt.show { opacity: 1; } /* about interwoven: window-height section, the whole composition anchored to the vertical center so it stays centered at any window size (min-height keeps it from cramping on short windows) */ .sec-about { --h: 100vh; min-height: 1020px; background: rgba(252,251,249,1); overflow: hidden; } /* Revision round 2 reflow. Two client asks forced this: the names must stop crossing the photo ("presented differently, not across the photo"), and the new about copy is roughly three times the old length, plus a pull quote. The old layout stacked everything down the centre with the names sitting on top of the portrait, which left the 1200px canvas half empty. Now: kicker and the two name lines run across the top clear of everything, then the portrait takes the left column and the quote/copy/CTA take the right. Nothing overlaps and the section still fits its original 1020px canvas. */ .abw-kicker { left: 0; top: calc(50% - 470px); width: 1200px; text-align: center; z-index: 4; font-family: 'Red Hat Display'; font-weight: 500; font-size: 15px; letter-spacing: .34em; text-transform: uppercase; color: rgba(37,31,24,.55); } .abw-photo { left: 60px; top: calc(50% - 140px); width: 380px; height: 520px; overflow: hidden; z-index: 2; } .abw-photo img { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.08); transition: transform 6s ease; } .sec-about:hover .abw-photo img { transform: scale(1); } /* 150px rather than 200px: two full-width lines have to clear the portrait below them, and at 200px the pair alone is 328px tall. */ .abw-word { left: 0; top: 0; width: 1200px; text-align: center; font-family: 'PonteExtraLight'; font-weight: 400; font-size: 150px; line-height: .82; letter-spacing: .04em; white-space: nowrap; color: rgba(37,31,24,1); user-select: none; } .abw-word-first { top: calc(50% - 430px); z-index: 1; } .abw-word-second { top: calc(50% - 307px); z-index: 3; } .abw-quote { left: 520px; top: calc(50% - 130px); width: 660px; z-index: 4; font-family: 'PonteLightItalic', 'PonteLight', serif; font-size: 25px; line-height: 1.45; color: rgba(37,31,24,.78); } .abw-quote-att { display: block; margin-top: 14px; font-family: 'Red Hat Display'; font-weight: 600; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: rgba(37,31,24,.5); } .abw-blurb { left: 520px; top: calc(50% + 18px); width: 660px; font-size: 16px; line-height: 1.7; z-index: 4; } .abw-blurb strong { display: block; font-family: 'Red Hat Display'; font-weight: 600; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 14px; color: rgba(37,31,24,.6); } .abw-cta { left: 520px; top: calc(50% + 330px); width: 190px; height: 58px; z-index: 4; border-color: rgba(37,31,24,1); color: rgba(37,31,24,1); } .abw-cta:hover { background: rgba(37,31,24,1); border-color: rgba(37,31,24,1); color: rgba(252,251,249,1); } /* portfolio: the reel (mechanic from sticky-text round 04) — the section pins while vertical scroll slides a horizontal reel of stories behind a fixed dark card */ .sec-portfolio-reel { --h: 260vh; background: var(--cream); } .pfr-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--cream); } .pfr-track { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 48px; /* start = card right edge (6vw + 470px) + the same 48px inter-photo gap */ padding-left: calc(6vw + 518px); will-change: transform; } .pfr-panel { flex: 0 0 auto; width: 45vh; } /* portrait: ~3:4 against the 62vh figure */ .pfr-panel figure { height: 62vh; overflow: hidden; } .pfr-panel img { width: 100%; height: 100%; object-fit: cover; display: block; } .pfr-cap { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; } .pfr-num { font-family: 'PonteExtraLight'; font-size: 30px; } .pfr-txt { font-family: 'Red Hat Display', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: rgba(37,31,24,.7); } .pfr-card { position: absolute; left: 6vw; top: 50%; transform: translateY(-50%); z-index: 5; width: 470px; background: var(--dark); color: var(--cream); padding: 58px 54px 62px; box-shadow: 30px 40px 80px rgba(13,25,28,.28); } .pfr-kicker { font-family: 'Red Hat Display'; font-weight: 600; font-size: 11px; letter-spacing: .32em; color: var(--teal); } .pfr-script { font-family: 'MrsSaintDelafield'; font-size: 56px; line-height: 1; margin: 24px 0 6px; } .pfr-h { font-family: 'PonteExtraLight'; font-weight: 400; font-size: 62px; line-height: 1; } .pfr-it { font-family: 'PonteExtraLightItalic'; } .pfr-para { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: rgba(252,251,249,.82); margin: 24px 0 32px; } .pfr-cta { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 44px; border: 1px solid var(--cream); text-decoration: none; color: var(--cream); font-family: 'Red Hat Display'; font-weight: 600; font-size: 12px; letter-spacing: .2em; transition: all .4s; } .pfr-cta:hover { background: var(--cream); color: var(--ink); } .pfr-prog { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 18px; font-family: 'Red Hat Display'; font-weight: 500; font-size: 10px; letter-spacing: .3em; color: rgba(37,31,24,.55); } .pfr-bar { width: 220px; height: 1px; background: rgba(37,31,24,.2); position: relative; } .pfr-fill { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--ink); display: block; } @media (prefers-reduced-motion: reduce) { .sec-portfolio-reel { --h: auto; } .pfr-stage { height: auto; position: static; } .pfr-track { position: static; transform: none; flex-direction: column; padding: 40px 0; gap: 40px; } .pfr-panel { width: 1200px; max-width: 90vw; } .pfr-card { position: relative; left: auto; top: auto; transform: none; margin: 60px auto; } .pfr-prog { display: none; } } /* featured: the flip (featured-variants round 6, 27 selected). The three-options ("Take your pick") language ported to the featured section: full-height photo stage down the right edge with a corner badge, script accent + hairline-ruled story list left; the active story expands its description, slides in its arrow, and crossfades the stage. Window height per the house pattern. */ /* featured/keepsakes: salon-alcove wallpaper treatment (featured-variants round 2, 06 selected 2026-07-25) — papered right wall glazed with the colorway's --dark, floor hairline, photos crossfading (opacity only) inside a cream gallery mat with gilt fillet + plate. */ .sec-featured { --h: max(900px, 100vh); background: rgba(37,31,24,1); color: rgba(252,251,249,1); } .sec-featured::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 50%; background: linear-gradient(color-mix(in srgb, var(--dark) 60%, transparent), color-mix(in srgb, var(--dark) 72%, transparent)), url('../assets/wallpaper-bg.webp'); background-size: auto, 520px auto; background-repeat: no-repeat, repeat; background-attachment: scroll, fixed; box-shadow: inset 0 0 110px rgba(26,7,9,.6); } .sec-featured::after { content: ''; position: absolute; right: 0; width: 50%; bottom: 96px; height: 1px; background: rgba(224,162,78,.4); } .sec-featured .cv { z-index: 1; } .arc-slot { left: 723px; top: 50%; transform: translateY(-50%); width: 474px; } .arc-frame { background: var(--cream); padding: 22px 22px 16px; box-shadow: 0 46px 100px rgba(15,4,6,.62), 0 10px 26px rgba(15,4,6,.5); } .arc-window { position: relative; height: 640px; overflow: hidden; border: 1px solid rgba(163,86,32,.55); outline: 1px solid rgba(163,86,32,.25); outline-offset: 3px; } .ftp-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s; } .ftp-slide.is-on { opacity: 1; } .ftp-slide .ph { width: 100%; height: 100%; object-fit: cover; } .arc-plate { text-align: center; padding-top: 13px; color: var(--ink); } .arc-plate .ftp-b-num { font-family: 'MrsSaintDelafield', cursive; font-style: italic; font-size: 17px; color: #a34c22; } .arc-plate .ftp-b-ttl { font-family: 'Red Hat Display'; font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; margin-top: 3px; } .ftp-side { left: -30px; top: 50%; transform: translateY(-50%); width: 560px; } .ftp-label { font-family: 'Red Hat Display'; font-weight: 600; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: rgba(252,251,249,.55); } .ftp-title { font-family: 'PonteLight', serif; font-weight: 400; font-size: 46px; line-height: 1.1; margin: 18px 0 36px; } .ftp-title em { font-family: 'MrsSaintDelafield', cursive; font-style: normal; font-size: .8em; text-transform: none; letter-spacing: 0; padding-right: 7px; } .ftp-item { display: block; padding: 22px 0; border-top: 1px solid rgba(252,251,249,.2); text-decoration: none; color: rgba(252,251,249,1); opacity: .6; cursor: pointer; transition: opacity .5s; position: relative; } .ftp-item:last-of-type { border-bottom: 1px solid rgba(252,251,249,.2); } .ftp-item.is-on { opacity: 1; } .ftp-no { display: block; font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; } .ftp-head { display: flex; align-items: baseline; gap: 16px; } .ftp-idx { font-family: 'MrsSaintDelafield', cursive; font-style: italic; font-size: 18px; color: var(--teal); } .ftp-ittl { font-family: 'Red Hat Display'; font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; } .ftp-arrow { margin-left: auto; font-size: 20px; opacity: 0; transform: translateX(-8px); transition: opacity .5s, transform .5s; } .ftp-item.is-on .ftp-arrow { opacity: 1; transform: none; } .ftp-desc { display: block; font-size: 15.5px; line-height: 1.6; color: rgba(252,251,249,.8); max-height: 0; overflow: hidden; transition: max-height .6s, margin-top .6s; max-width: 480px; } /* v2: same clipping trap as .tol-desc — the rewritten add-on copy (especially the Photo-Album Guestbook) runs well past the old 120px cap, and the box is overflow:hidden so the loss was invisible. */ .ftp-item.is-on .ftp-desc { max-height: 260px; margin-top: 10px; } /* experience: counterweight (experience-variants round 4, 23 selected). Copy column left; large landscape photo anchors the right with a small matted print overlapping its lower corner (crossfades to a second frame on hover) and an italic caption beneath. Window height kept from the earlier feedback: offsets hang off the vertical center (hero pattern), 900px floor so short windows never crush the composition. */ .sec-experience { --h: max(900px, 100vh); background: rgba(252,251,249,1); } .xpc-kicker { left: 90px; top: calc(50% - 297px); width: 400px; color: var(--teal); font-family: 'Red Hat Display'; font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; line-height: 1.6; } .xpc-title { left: 90px; top: calc(50% - 257px); width: 410px; text-align: left; font-family: 'PonteExtraLight'; font-weight: 400; font-size: 54px; line-height: 1.1; } /* Round 3: the client's two-paragraph Standard copy is ~3x the old length, so the column starts right under the (now 2-line) title and the type drops to 15.5px to land the button inside the 900px floor. ~18 lines at 25.6px ends near +343; button clears at +352..+411 against the +450 edge. */ .xpc-para { left: 90px; top: calc(50% - 118px); width: 360px; font-size: 15px; line-height: 1.6; } .xpc-btn { left: 90px; top: calc(50% + 330px); width: 247px; height: 59px; } .xpc-big { left: 500px; top: calc(50% - 363px); width: 620px; height: 520px; overflow: hidden; } .xpc-big img, .xpc-big video { width: 100%; height: 100%; object-fit: cover; transition: transform 3.5s ease; } .xpc-big:hover img, .xpc-big:hover video { transform: scale(1.05); } .xpc-print { left: 470px; top: calc(50% + 77px); width: 200px; height: 260px; z-index: 2; box-shadow: 0 20px 48px rgba(37,31,24,.28); overflow: hidden; } .xpc-print img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .9s ease; } .xpc-print .xpc-alt { opacity: 0; } .xpc-print:hover .xpc-alt { opacity: 1; } .xpc-cap { left: 660px; top: calc(50% + 185px); width: 460px; text-align: right; font-family: 'MrsSaintDelafield', cursive; font-style: italic; font-size: 17px; color: rgba(37,31,24,.55); } .sec-reviews { --h: 100vh; position: relative; overflow: hidden; color: var(--cream); background-image: url("../assets/portfolio/dscf0036.jpg"); background-size: cover; background-position: center; background-attachment: fixed; } .sec-reviews::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.66)); } .rvw { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 140px; } .rvw-eyebrow { font-family: var(--font-label); font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: rgba(252,251,249,.75); } .rvw-script { font-family: var(--font-script); font-size: 48px; line-height: 1; color: #fff; margin-top: 12px; } .rvw-rule { width: 420px; height: 1px; background: rgba(252,251,249,.45); } .rvw-r-top { margin: 32px 0 26px; } .rvw-r-bot { margin: 26px 0 24px; } .rvw-stage { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .rvw-slide { display: none; } .rvw-slide.on { display: block; } .rvw-q { font-family: var(--font-title); font-size: 40px; line-height: 1.18; text-transform: uppercase; max-width: 860px; } .rvw-q em { font-style: normal; } .rvw-att { font-family: var(--font-heading); font-style: italic; font-size: 19px; color: rgba(252,251,249,.85); margin-top: 24px; } .rvw-nav { display: flex; align-items: center; gap: 32px; } .rvw-aro { background: none; border: 0; cursor: pointer; padding: 12px 8px; opacity: .85; transition: opacity .3s, transform .3s; } .rvw-aro:hover { opacity: 1; } .rvw-prev:hover { transform: translateX(-5px); } .rvw-next:hover { transform: translateX(5px); } .rvw-aro svg { width: 54px; height: 10px; fill: var(--cream); display: block; filter: drop-shadow(0 1px 5px rgba(13,25,28,.5)); } .rvw-prev svg { transform: scaleX(-1); } .rvw-count { font-family: var(--font-heading); font-style: italic; font-size: 16px; color: rgba(252,251,249,.7); min-width: 58px; } /* Round 3: "can we add a button at the bottom that says see all of our reviews". Ghost button in the section's cream-on-photo language (same voice as .bdg-more-btn); the .rvw flex column centers it under the arrows. */ .rvw-more { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; border: 1px solid rgba(252,251,249,.55); color: var(--cream); text-decoration: none; padding: 15px 42px; font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; transition: background .4s ease, color .4s ease, border-color .4s ease; } .rvw-more:hover { background: var(--cream); color: var(--dark); border-color: var(--cream); } .sec-explore { --h: auto; min-height: 100vh; background: var(--dark); color: var(--cream); overflow: hidden; } /* backdrop collection: lookbook grid (replaced the hover accordion 2026-07-24) */ .bdg-wrap { height: 100%; display: flex; flex-direction: column; padding: 100px clamp(40px,5vw,90px) 28px; } .bdg-crest { text-align: center; flex: 0 0 auto; margin-bottom: 18px; } .bdg-eyebrow { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .3em; font-size: 12px; color: var(--teal); display: inline-flex; align-items: center; gap: 16px; } .bdg-eyebrow::before, .bdg-eyebrow::after { content: ""; width: 38px; height: 1px; background: rgba(252,251,249,.35); } .bdg-crest .bdg-script { font-family: 'PonteExtraLight', serif; color: var(--cream); font-size: 44px; line-height: 1; margin-top: 10px; font-weight: 400; letter-spacing: -.01em; text-transform: uppercase; } .bdg-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,3vw,44px); align-items: stretch; max-width: 1140px; width: 100%; margin: 0 auto; } .bdg-card { display: flex; flex-direction: column; border: 1px solid rgba(252,251,249,.16); background: rgba(252,251,249,.02); padding: 14px; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .5s ease; will-change: transform; } .bdg-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -24px rgba(0,0,0,.75); border-color: rgba(134,157,159,.55); } .bdg-frame { position: relative; overflow: hidden; aspect-ratio: 4/5; width: 100%; } .bdg-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); } .bdg-card:hover .bdg-frame img { transform: scale(1.06); } .bdg-body { padding: 14px 4px 4px; display: flex; flex-direction: column; flex: 1 1 auto; } .bdg-no-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; } .bdg-no { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .28em; font-size: 11px; color: var(--teal); } .bdg-script-word { font-family: var(--font-script); color: var(--teal); filter: brightness(1.35); font-size: 30px; line-height: .9; margin-left: auto; /* headroom so the brightness() raster layer doesn't clip tall script ascenders (the l in "Swirl"); margin compensates so layout is unchanged */ padding-top: .55em; margin-top: -.55em; } .bdg-title { font-family: var(--font-title); font-weight: 400; font-size: 23px; line-height: 1.1; letter-spacing: .01em; color: var(--cream); margin: 2px 0 8px; } .bdg-hairline { height: 1px; width: 100%; background: rgba(252,251,249,.2); margin: 0 0 10px; } .bdg-copy { font-family: var(--font-body); font-weight: 400; font-size: 12.5px; line-height: 1.5; color: rgba(252,251,249,.78); margin-bottom: 12px; } .bdg-cta { margin-top: auto; align-self: flex-start; font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .24em; font-size: 11px; color: var(--cream); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid rgba(252,251,249,.5); transition: color .3s ease, border-color .3s ease; } .bdg-cta:hover { color: var(--teal); border-color: var(--teal); } .bdg-more { flex: 0 0 auto; text-align: center; margin-top: 26px; } /* answers the client's "we have over 30 backdrops, I don't know how we can mention that" plus the note that these three are enclosed-booth only */ .bdg-more-note { max-width: 620px; margin: 0 auto 16px; font-size: 13px; line-height: 1.6; color: color-mix(in srgb, var(--cream) 62%, transparent); } .bdg-more-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(252,251,249,.5); color: var(--cream); text-decoration: none; padding: 15px 46px; font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; transition: background .4s ease, color .4s ease, border-color .4s ease; } .bdg-more-btn:hover { background: var(--cream); color: var(--dark); border-color: var(--cream); } @media (max-width:1000px){ .bdg-grid { grid-template-columns: 1fr; max-width: 460px; } } .sec-the-journal { --h: max(760px, 100vh); background: var(--dark); color: var(--cream); } .jnl-copy { left: 0; top: 50%; transform: translateY(-50%); width: 400px; } .jnl-copy > * { position: static; } .jnl-script { font-family: var(--font-script); font-size: 42px; line-height: 0.85; color: var(--teal); } .jnl-title { font-family: var(--font-title); font-weight: 400; font-size: 80px; line-height: .96; letter-spacing: -0.01em; padding: 8px 0 20px; } .jnl-title em { font-family: var(--font-heading); font-style: italic; font-size: .8em; } .jnl-lede { font-family: var(--font-body); font-size: 15.5px; line-height: 1.7; color: rgba(252,251,249,.7); padding-bottom: 30px; } .jnl-now { border-top: 1px solid rgba(252,251,249,.25); padding-top: 20px; min-height: 108px; } .jnl-cat { font-family: var(--font-label); font-weight: 500; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--teal); } .jnl-post { font-family: var(--font-title); font-weight: 400; font-size: 25px; line-height: 1.22; padding-top: 8px; } .jnl-br { display: none; } /* mobile-only line break, revealed in the 900px block */ .jnl-nav { display: flex; align-items: center; gap: 18px; padding: 20px 0 30px; } .jnl-dots { display: flex; gap: 10px; } .jnl-dots span { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(252,251,249,.6); transition: background .4s; } .jnl-dots span.on { background: var(--teal); border-color: var(--teal); } .jnl-arrow { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; color: rgba(252,251,249,.75); transition: color .4s; } .jnl-arrow svg { width: 30px; height: 6px; fill: currentColor; transition: transform .4s; } .jnl-prev svg { transform: rotate(180deg); } .jnl-arrow:hover { color: var(--cream); } .jnl-next:hover svg { transform: translateX(5px); } .jnl-prev:hover svg { transform: rotate(180deg) translateX(5px); } .jnl-btn { display: inline-flex; width: auto; padding: 0 32px; height: 52px; } .jnl-deck { left: 520px; top: 50%; width: 680px; height: 700px; transform: translateY(-50%); cursor: pointer; } .jnl-card { position: absolute; left: 90px; top: 50px; width: 470px; height: 600px; overflow: hidden; background: var(--white); padding: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.45); transition: transform .8s cubic-bezier(.22,.9,.3,1), opacity .8s; } .jnl-card::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(185,138,60,.4); pointer-events: none; } .jnl-card img, .jnl-card video { width: 100%; height: calc(100% - 44px); object-fit: cover; } .jnl-tag { position: absolute; left: 0; bottom: 0; right: 0; height: 52px; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-label); font-weight: 500; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--teal); } .jnl-tag::before, .jnl-tag::after { content: ''; width: 26px; height: 1px; background: rgba(185,138,60,.5); } .jnl-card.noanim { transition: none; } .jnl-card.p0 { transform: rotate(-2deg); z-index: 4; } .jnl-card.p1 { transform: rotate(3.5deg) translate(46px, -18px); z-index: 3; } .jnl-card.p2 { transform: rotate(-5deg) translate(-38px, 14px); z-index: 2; } .jnl-card.p3 { transform: rotate(1.5deg) translate(14px, 28px); z-index: 1; } .jnl-card.out { transform: rotate(9deg) translate(420px, -40px); opacity: 0; z-index: 5; } .jnl-hint { position: absolute; right: 6px; bottom: 6px; font-family: var(--font-heading); font-style: italic; font-size: 15px; color: rgba(252,251,249,.55); } .sec-drift { --h: 380vh; background: rgba(13,25,28,1); } .dft-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: rgba(13,25,28,1); color: rgba(255,255,255,1); } .dft-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; } .dft-wash { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(13,25,28,.25) 0%, rgba(13,25,28,.85) 100%); } .dft-center { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } .dft-center a { pointer-events: auto; } .dft-kicker { font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .34em; color: var(--teal); margin-bottom: 24px; } .dft-script { font-family: 'MrsSaintDelafield'; font-size: 66px; line-height: 1; } .dft-h { font-family: 'PonteExtraLight'; font-size: 108px; line-height: .98; letter-spacing: .02em; margin-top: 8px; } .dft-it { font-family: 'PonteExtraLightItalic'; } .dft-para { font-size: 16px; text-align: center; color: rgba(252,251,249,.85); max-width: 470px; margin: 30px 0 36px; } .dft-btn { width: 204px; height: 59px; } .dft-card { position: absolute; top: 0; z-index: 2; border: 1px solid rgba(252,251,249,.35); padding: 10px; background: rgba(13,25,28,.35); will-change: transform; transform: translateY(120vh); } .dft-card img { display: block; object-fit: cover; width: 100%; height: 100%; } .dft-tilt-l, .dft-tilt-r { display: block; height: 100%; } .dft-tilt-l { transform: rotate(-2deg); } .dft-tilt-r { transform: rotate(2.5deg); } .dft-c1 { left: 4vw; width: 17vw; height: 46vh; } .dft-c2 { left: 15vw; width: 13vw; height: 34vh; } .dft-c3 { right: 4vw; width: 17vw; height: 44vh; } .dft-c4 { right: 16vw; width: 12vw; height: 32vh; } .dft-c5 { left: 27vw; width: 10vw; height: 26vh; } /* Footer: "the salone" (footer variants round pick, 2026-07-18) */ .sal-footer { background: var(--teal); color: var(--white); position: relative; overflow: hidden; } .sal-grid { display: grid; grid-template-columns: 1fr 340px; width: min(1200px, calc(100% - 80px)); margin: 0 auto; padding: 78px 0 0; gap: 0 80px; } .sal-invite { padding-right: 40px; } .sal-logo { display: block; width: 240px; height: auto; margin-bottom: 26px; } .sal-script { font-family: var(--font-script); font-size: 72px; line-height: 0.85; margin-bottom: 6px; } .sal-h { font-family: var(--font-serif); font-weight: 400; font-size: 74px; line-height: 1.02; text-transform: uppercase; letter-spacing: .01em; } .sal-h em { font-family: 'MrsSaintDelafield', cursive; font-style: normal; text-transform: none; font-size: 96px; letter-spacing: 0; line-height: .9; } .sal-p { font-family: var(--font-body); font-size: 17px; line-height: 1.65; max-width: 440px; margin: 26px 0 38px; opacity: .9; } .sal-nl { display: flex; align-items: flex-end; max-width: 520px; } .sal-nl input { flex: 1; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.6); outline: none; color: var(--white); font-family: var(--font-label); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; height: 44px; } .sal-nl input::placeholder { color: rgba(255,255,255,.65); } .sal-nl button { background: transparent; border: 1px solid var(--white); color: var(--white); font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding: 14px 26px; margin-left: 18px; cursor: pointer; transition: all .4s; } .sal-nl button:hover { background: var(--white); color: var(--ink); } .sal-nl .sal-tel { flex: 1; border-bottom: 1px solid rgba(255,255,255,.6); color: var(--white); font-family: var(--font-label); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; height: 44px; display: flex; align-items: center; } .sal-nl .sal-go { background: transparent; border: 1px solid var(--white); color: var(--white); font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding: 14px 26px; margin-left: 18px; text-decoration: none; white-space: nowrap; transition: all .4s; } .sal-nl .sal-go:hover { background: var(--white); color: var(--ink); } .sal-rail { border-left: 1px solid rgba(255,255,255,.35); padding-left: 52px; display: flex; flex-direction: column; } .sal-rail a { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-label); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.3); text-decoration: none; } .sal-rail a:first-child { padding-top: 4px; } .sal-arw { opacity: 0; transform: translateX(-10px); transition: all .35s ease; font-family: var(--font-body); } .sal-rail a:hover .sal-arw { opacity: 1; transform: none; } .sal-rail-foot { margin-top: auto; padding: 22px 0 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-family: var(--font-label); font-weight: 600; opacity: .75; line-height: 2; } .sal-ticker { margin-top: 64px; border-top: 1px solid rgba(255,255,255,.35); overflow: hidden; white-space: nowrap; padding: 20px 0 24px; } .sal-ticker-track { display: inline-block; animation: sal-tick 38s linear infinite; } .sal-ticker span { font-family: var(--font-serif); font-size: 44px; letter-spacing: .06em; text-transform: uppercase; opacity: .55; padding-right: .6em; } @keyframes sal-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } } .sal-legal { display: flex; justify-content: space-between; align-items: center; width: min(1200px, calc(100% - 80px)); margin: 0 auto; padding: 16px 0 22px; font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .75; } .sal-legal a { text-decoration: none; } /* backdrop carousel arrows exist only for the mobile layer */ .bdg-nav { display: none; } /* ================= mobile layer (additive only; desktop unchanged) ======= */ @media (max-width: 900px) { /* --- white menu bar: its six links measure well past 390px, so the nav drops and the bar keeps its hamburger, which is the mobile way into the same links. Height is restored explicitly because the burger is absolute and .sec is height:auto here, which would collapse the bar to 0. Same call css/social-events.css makes. */ .sec-stick-top-menu-white { height: 53px; } .sec-stick-top-menu-white .stm-in { display: none; } .sec-stick-top-menu-white .stm-burger { left: 18px; } /* --- letterbox hero: keep the scroll-linked band mechanic, shrink type. Vertical offsets are measured from edges the JS never changes, so the 168px convergence still lands exactly. */ .sec-letterbox-hero { height: 200vh; } .lbx-eyebrow { bottom: auto; top: 64px; padding: 0 24px; font-size: 10px; letter-spacing: .18em; } .lbx-word { font-size: clamp(48px, 19vw, 90px); } .lbx-foot { top: auto; bottom: 26px; gap: 14px; padding: 0 16px; } .lbx-rule { width: 34px; flex: 0 0 34px; } .lbx-btn { padding: 14px 20px; font-size: 11px; letter-spacing: .14em; white-space: nowrap; } .lbx-menu { left: 20px; top: 20px; } /* the eyebrow is pinned near the top here rather than measured off the centre, so the logo anchors to the top edge too (same ivory wordmark as desktop; 40px tall sets ~133px wide, clear of the hamburger at left:20). top:64 not 12: the preview colorway pill spans y14-49 nearly full-width on phones and was covering the wordmark; the eyebrow (top 64 + its 60px vem nudge) starts at y121, so 64..104 is the clear band between them. */ .lbx-mark { top: 64px; bottom: auto; height: 40px; } /* short phones: the 168px word offsets are JS-coupled (convergence travel), so shrink the type instead of the offsets to keep GOLD off the foot */ @media (max-height: 640px) { .lbx-word { font-size: clamp(36px, 13vw, 52px); } .lbx-foot { bottom: 12px; } } /* --- brand bio: keep the pin (photos still scroll over it), reflow the canvas to a centered column; editor inline nudges neutralized */ /* stays sticky (desktop mechanic): the collage scrolls over the pinned bio */ .sec-brand-bio { height: auto; min-height: 100vh; } .sec-brand-bio .cv { top: auto; transform: none; height: auto; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px; } /* the two tilted photos peeking in from the edges, scaled down and pushed to the corners so they clear the centered copy (same ±62% off-edge transforms as desktop) */ .bbp-peek { width: 27vw; height: 38vw; } .bbp-l { top: 13%; } .bbp-r { top: 84%; } /* max-width keeps the kicker's lines clear of the left photo's sliver (owner, 2026-09-14: "the word based is covered by a photo"). Centred text at full width put BASED under the photo on a phone; the sliver reaches ~10vw plus its tilt, so lines starting 14vw in never meet it, whatever the phone's height. */ .sec-brand-bio .bbp-kicker { width: auto; max-width: 72vw; transform: none !important; font-size: 10.5px; letter-spacing: .16em; } /* phone sets the headline on four short nowrap lines: MADE FOR / the SPOTLIGHT. / CURATED TO BRING / GUESTS Together. The ::before break stays scoped off the script Together (.bbp-tog) or it would tear the client's one-line phrase a second time; .bbp-br supplies that pair's break. */ .sec-brand-bio .bbp-h { width: auto; margin-top: 18px; transform: none !important; font-size: clamp(24px, 8.2vw, 33px); white-space: nowrap; } .sec-brand-bio .bbp-h em { font-size: 1.2em !important; } .sec-brand-bio .bbp-h em:not(.bbp-tog)::before { content: '\A'; white-space: pre; } .sec-brand-bio .bbp-br { display: inline; } .sec-brand-bio .bbp-p { width: auto; max-width: 480px; margin-top: 22px; transform: none !important; font-size: 16px; line-height: 1.7; } .sec-brand-bio .bbp-foot { width: 100%; margin-top: 30px; transform: none !important; flex-wrap: wrap; gap: 8px 10px; justify-content: center; text-align: center; font-size: 10px; letter-spacing: .12em; } .sec-brand-bio .bbp-foot::before, .sec-brand-bio .bbp-foot::after { width: 22px; } .sec-brand-bio .bbp-btn { position: static; transform: none; margin-top: 30px; } /* --- floating images: same scattered composition as desktop, scaled to the viewport — dominant portrait center, small ones peeking off the edges, drifting over the pinned bio with the staggered fade-ins */ .sec-floating-images { height: auto; } .sec-floating-images .cv { position: relative; height: 150vw; } .sec-floating-images .cv .ph { position: absolute; object-fit: cover; height: auto; } .sec-floating-images .z-floating-images_0 { left: 13%; top: 6vw; width: 64%; aspect-ratio: 652 / 875; } .sec-floating-images .z-floating-images_1 { left: auto; right: -8%; top: -16vw; width: 36%; aspect-ratio: 335 / 460; } .sec-floating-images .z-floating-images_2 { left: auto; right: 5%; top: 100vw; width: 34%; aspect-ratio: 268 / 353; } .sec-floating-images .z-floating-images_3 { left: -14%; top: 40vw; width: 38%; aspect-ratio: 310 / 429; } /* same diagonal-on-the-corner treatment as desktop, measured off the centre photo's bottom-left (it starts at left:13% and is 64% wide) */ .sec-floating-images .z-floating-images_4 { left: 17%; right: auto; top: 55vw; width: 16%; aspect-ratio: 1 / 3; transform: rotate(-24deg); } /* --- three options: the gilt mat look moves onto the .cv panel; stage on top, list below with every description expanded (no hover on touch) */ /* wallpaper viewport-fixed like desktop. iOS Safari ignores background-attachment: fixed, so the background moves to a position:fixed layer clipped to the section (clip-path clips fixed descendants without re-anchoring them) — behaves identically on every mobile browser */ .sec-three-options { height: auto; min-height: 0; padding: 40px 18px 48px; background: none; clip-path: inset(0); } .sec-three-options::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(color-mix(in srgb, var(--dark) 60%, transparent), color-mix(in srgb, var(--dark) 60%, transparent)), url('../assets/wallpaper-bg.webp'); background-size: auto, 520px auto; background-repeat: no-repeat, repeat; } .sec-three-options .cv { position: relative; z-index: 1; } .sec-three-options .cv { transform: none; display: flex; flex-direction: column; background: var(--dark); border: 1px solid rgba(224,162,78,.42); outline: 1px solid rgba(224,162,78,.16); outline-offset: 6px; padding: 14px 14px 22px; } .sec-three-options .tol-mat { display: none; } /* 3/4 matches the photos (round 3), so the phone stage stops square-cropping */ .sec-three-options .tol-stage { position: relative; transform: none; width: 100%; height: auto; min-height: 0; aspect-ratio: 3 / 4; } .sec-three-options .tol-side { position: static; transform: none; width: auto; margin-top: 18px; padding: 0 6px; } .sec-three-options .tol-label { transform: none !important; } .sec-three-options .tol-script { font-size: 28px; margin: 8px 0 14px; } /* accordion + crossfade behave exactly as desktop; tapping an item activates it (mouseenter fires on touch tap) */ .sec-three-options .tol-item { padding: 13px 0; } .sec-three-options .tol-no { margin-bottom: 4px; } .sec-three-options .tol-desc { font-size: 14px; line-height: 1.5; } .sec-three-options .tol-item.is-on .tol-desc { margin-top: 8px; } /* --- what-we-do ledger: full desktop mechanic, compressed — the photos go full-bleed behind (sticky, covering each other, JS settle-scale intact) and the index rows stack over them on paper chips at the same vh offsets, fading in via the existing .on/.act choreography. Section keeps its 460vh height so the scroll math in script.js lands identically. */ .wdl-right { position: absolute; inset: 0; width: 100%; z-index: 0; } .wdl-left { width: 100%; z-index: 2; padding: 0 20px; } .sec-wdl .wdl-row { height: auto; padding: 12px 14px 16px; border-top: 0; background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,.18); } .wdl-nm { font-size: 24px; } .wdl-g { font-size: 11px; } /* chips sit over photos here (desktop has a solid paper column), so the dimmed state needs a higher floor to stay legible */ .sec-wdl .wdl-row.on { opacity: .8; } .sec-wdl .wdl-row.act { opacity: 1; } /* the chip links used to be placeholder anchors (#three-options / #what-we-do) and were made decoration-only here (pointer-events: none) so a stray tap could not yank the page. Since 2026-09-19 the first three go to the real pages (/weddings/, /corporate/, /social-events/), which the client asked for on launch day, so they stay tappable. */ /* --- about: the name lockup, scaled. v2 revision: the negative margins that used to interweave the words with the portrait are gone — the client asked for the names "not across the photo", which has to hold on phones too. */ .sec-about { height: auto; min-height: 0; padding: 68px 0 64px; } .sec-about .cv { display: flex; flex-direction: column; align-items: center; } .sec-about .abw-kicker { width: auto; padding: 0 24px; font-size: 12px; } .sec-about .abw-word { width: auto; transform: none !important; font-size: clamp(52px, 17vw, 84px); } .sec-about .abw-word-first { order: 2; margin: 30px 0 16px; z-index: 1; } .sec-about .abw-photo { order: 3; position: relative; transform: none !important; width: min(64vw, 300px); height: auto; aspect-ratio: 380 / 520; z-index: 2; } .sec-about .abw-word-second { order: 4; margin-top: 16px; z-index: 3; } /* the pull quote is new in v2 and has no order of its own, so it would default to 0 and land above the kicker in this flex column */ .sec-about .abw-quote { order: 5; width: auto; max-width: 480px; margin-top: 30px; padding: 0 24px; text-align: center; font-size: 21px; } .sec-about .abw-blurb { order: 6; width: auto; max-width: 480px; margin: 40px 24px 0; } .sec-about .abw-cta { order: 7; margin-top: 30px; width: 190px; height: 54px; } /* --- featured add-ons: wallpaper wall goes full-bleed behind a single column; frame between title and list via display:contents + order */ /* wallpaper wall goes full-bleed AND viewport-fixed (same clip-path + position:fixed emulation as three-options, since iOS ignores background-attachment: fixed) */ .sec-featured { height: auto; min-height: 0; padding: 60px 20px 68px; clip-path: inset(0); } .sec-featured::before { position: fixed; inset: 0; width: 100%; z-index: 0; background-attachment: scroll, scroll; pointer-events: none; } .sec-featured::after { width: 100%; bottom: 72px; } .sec-featured .cv { display: flex; flex-direction: column; } .sec-featured .ftp-side { display: contents; } .sec-featured .ftp-label { order: 1; } .sec-featured .ftp-title { order: 2; transform: none !important; font-size: clamp(30px, 8.8vw, 38px); margin: 12px 0 26px; } .sec-featured .ftp-title em { font-size: .8em !important; } .sec-featured .arc-slot { order: 3; transform: none; width: min(68%, 250px); align-self: center; margin-bottom: 26px; } .sec-featured .arc-frame { padding: 12px 12px 9px; box-shadow: none; } .sec-featured .arc-window { height: auto; aspect-ratio: 3 / 4; } .sec-featured .arc-plate { padding-top: 9px; } .sec-featured .ftp-item { order: 4; } /* --- experience: column with the matted print overlapping the big photo */ .sec-experience { height: auto; min-height: 0; } .sec-experience .cv { display: flex; flex-direction: column; padding: 64px 24px 60px; } .sec-experience .xpc-kicker { order: 1; width: auto; } .sec-experience .xpc-title { order: 2; width: auto; margin-top: 14px; font-size: clamp(34px, 9.8vw, 44px); } .sec-experience .xpc-para { order: 3; width: auto; margin-top: 18px; transform: none !important; font-size: 16px; } .sec-experience .xpc-big { order: 4; width: 100%; height: auto; aspect-ratio: 3 / 3.4; margin: 30px 0 0; overflow: hidden; align-self: flex-end; } .sec-experience .xpc-big img, .sec-experience .xpc-big video { width: 100%; height: 100%; object-fit: cover; } .sec-experience .xpc-print { order: 5; position: relative; width: 44%; height: auto; aspect-ratio: 200 / 260; margin: -34% 8% 0 auto; z-index: 2; box-shadow: 0 20px 48px rgba(37,31,24,.35); } .sec-experience .xpc-cap { order: 6; width: auto; margin-top: 12px; align-self: flex-end; text-align: right; transform: none !important; font-size: 30px !important; } .sec-experience .xpc-btn { order: 7; margin-top: 28px; transform: none !important; } /* --- reviews: photo viewport-fixed via the same clip-path + fixed-layer emulation (iOS ignores background-attachment: fixed). The photo rides a fixed ::after; the existing ::before overlay and the quotes stack above. */ .sec-reviews { height: auto; min-height: 100vh; background: none; clip-path: inset(0); } .sec-reviews::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url("../assets/portfolio/dscf0036.jpg") center / cover no-repeat; } .sec-reviews::before { z-index: 1; } .rvw { height: auto; min-height: 100vh; padding: 90px 24px; position: relative; z-index: 2; } .rvw-script { font-size: 40px !important; } /* editor inline 56px */ .rvw-rule { width: min(420px, 74vw); } .rvw-q { font-size: clamp(24px, 6.6vw, 32px); } .rvw-att { font-size: 24px !important; transform: none !important; } /* quotes cross-fade instead of hard-swapping: slides stack in one grid cell and transition opacity only (no visibility — WebKit is unreliable with it). The outgoing quote gets the higher z-index so its fade-out happens ON TOP and reads clearly. Desktop keeps its instant swap. */ .rvw-stage { min-height: 150px; display: grid; place-items: center; } .rvw-slide { display: block; grid-area: 1 / 1; opacity: 0; pointer-events: none; z-index: 2; transition: opacity .55s ease; } .rvw-slide.on { opacity: 1; pointer-events: auto; z-index: 1; } .rvw-nav { gap: 22px; } /* --- the journal deck */ .sec-the-journal { height: auto; min-height: 0; } .sec-the-journal .cv { display: flex; flex-direction: column; padding: 60px 24px 56px; } .sec-the-journal .jnl-copy { transform: none; width: auto; } .sec-the-journal .jnl-br { display: inline; } .sec-the-journal .jnl-title { font-size: clamp(48px, 15vw, 64px); } .sec-the-journal .jnl-deck { position: relative; transform: none; width: 100%; height: calc(min(260px, 100vw - 132px) * 1.47 + 90px); margin-top: 10px; } .sec-the-journal .jnl-card { left: calc(50% - min(130px, 50vw - 66px)); top: 24px; width: min(260px, calc(100vw - 132px)); height: auto; aspect-ratio: 260 / 380; box-shadow: none; } /* tighter fan on small screens so rotated cards stay inside the viewport */ .sec-the-journal .jnl-card.p1 { transform: rotate(3.5deg) translate(24px, -12px); } .sec-the-journal .jnl-card.p2 { transform: rotate(-5deg) translate(-20px, 10px); } .sec-the-journal .jnl-card.p3 { transform: rotate(1.5deg) translate(8px, 16px); } .sec-the-journal .jnl-card.out { transform: rotate(9deg) translate(150px, -30px); } /* dev-only colorway switcher pill: keep it inside narrow viewports */ .cw-switch { max-width: calc(100vw - 12px); } .cw-switch .cw-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sec-the-journal .jnl-hint { position: static; transform: none !important; align-self: flex-end; margin-top: -26px; margin-right: 18px; font-size: 26px !important; } /* --- backdrop collection: one card at a time, arrows + swipe (the long stacked column stays desktop/tablet-only) */ .sec-explore { min-height: 0; } .bdg-wrap { padding: 56px 20px 60px; } /* max-width caps the slide size (grid width = slide width, so the JS arrow/snap math stays exact) */ .bdg-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; max-width: 300px; scrollbar-width: none; } .bdg-grid::-webkit-scrollbar { display: none; } .bdg-card { flex: 0 0 100%; scroll-snap-align: start; } .bdg-title { font-size: 20px; } .bdg-copy { font-size: 12px; margin-bottom: 10px; } .bdg-nav { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 14px; } .bdg-aro { background: none; border: 0; cursor: pointer; padding: 10px 6px; opacity: .85; transition: opacity .3s; } .bdg-aro svg { width: 46px; height: 9px; fill: var(--cream); display: block; } .bdg-prev svg { transform: scaleX(-1); } .bdg-count { font-family: var(--font-heading); font-style: italic; font-size: 15px; color: rgba(252,251,249,.7); min-width: 52px; text-align: center; } .bdg-eyebrow { transform: none !important; } /* editor inline nudges */ .bdg-crest .bdg-script { transform: none !important; font-size: 30px; } .bdg-crest { margin-bottom: 12px; } /* --- footer */ .sal-grid { grid-template-columns: 1fr; width: calc(100% - 48px); padding-top: 60px; gap: 0; } .sal-invite { padding-right: 0; } .sal-script { font-size: 50px; } .sal-h { font-size: clamp(40px, 12vw, 54px); } .sal-h em { font-size: 1.25em; } .sal-p { font-size: 16px; } .sal-nl { flex-direction: column; align-items: stretch; max-width: none; } .sal-nl .sal-go { margin: 18px 0 0; justify-content: center; display: flex; } .sal-rail { border-left: 0; padding-left: 0; margin-top: 48px; } .sal-rail a:first-child { border-top: 1px solid rgba(255,255,255,.3); padding-top: 15px; } .sal-arw { opacity: 1; transform: none; } .sal-ticker { margin-top: 44px; } .sal-ticker span { font-size: 26px; } .sal-legal { width: calc(100% - 48px); } /* --- menu overlay: 1200px canvas becomes a scrollable teal column */ .menu-overlay .cv { width: auto; height: auto; min-height: 100%; display: flex; flex-direction: column; padding: 84px 28px 96px; } .menu-overlay .z-menu-open_0 { position: absolute; left: 16px; top: 12px; width: 30px; height: 48px; } .menu-overlay .z-menu-open_4, .menu-overlay .z-menu-open_6, .menu-overlay .z-menu-open_7 { display: none; } .menu-overlay .cv > .t-title { width: auto; text-align: left; font-size: 26px; margin: 9px 0; } .menu-overlay .z-menu-open_10 { order: 20; margin-top: 30px; width: 100%; max-width: 340px; height: 50px; } /* the wordmark image inherits the text slot's order so it still sits between the contact button and the blurb in the phone column */ .menu-overlay .cv > .z-menu-open_8 { order: 21; margin: 34px 0 0; width: 200px; height: auto; } .menu-overlay .z-menu-open_9 { order: 22; width: auto; text-align: left; font-size: 14px; margin-top: 10px; } .menu-overlay .z-menu-open_19 { order: 23; margin-top: 28px; width: auto; text-align: left; } .menu-overlay .z-menu-open_20, .menu-overlay .z-menu-open_21 { order: 24; width: auto; text-align: left; margin-top: 6px; } .menu-overlay .z-menu-open_1, .menu-overlay .z-menu-open_2, .menu-overlay .z-menu-open_3 { position: absolute; bottom: 30px; width: 26px; height: 20px; } .menu-overlay .z-menu-open_1 { left: 30px; } .menu-overlay .z-menu-open_3 { left: 68px; } .menu-overlay .z-menu-open_2 { left: 106px; } } /* ============ footer rides each palette's lightest color (2026-07-25) ====== Owner call: on every colorway, DESKTOP AND MOBILE, the footer background is the palette's lightest color — that is --white in all six generated palettes (lighter than --cream/--paper in each). Text/borders flip from on-teal white to ink. Scoped to [data-colorway] pages; placed after the mobile block so the color overrides win at every breakpoint. */ :root[data-colorway] .sal-footer { background: var(--cream); color: var(--ink); } :root[data-colorway] .sal-nl .sal-tel { color: var(--ink); border-bottom-color: color-mix(in srgb, var(--ink) 60%, transparent); } :root[data-colorway] .sal-nl .sal-go { border-color: var(--ink); color: var(--ink); } :root[data-colorway] .sal-nl .sal-go:hover { background: var(--ink); color: var(--cream); } :root[data-colorway] .sal-rail { border-left-color: color-mix(in srgb, var(--ink) 35%, transparent); } :root[data-colorway] .sal-rail a { border-bottom-color: color-mix(in srgb, var(--ink) 30%, transparent); } :root[data-colorway] .sal-rail a:first-child { border-top-color: color-mix(in srgb, var(--ink) 30%, transparent); } :root[data-colorway] .sal-ticker { border-top-color: color-mix(in srgb, var(--ink) 35%, transparent); } /* --- launch build: clip decorative overhang so the page cannot scroll sideways. `clip` not `hidden`: see _src/seo.py for the measurement. --- */ .sec-brand-bio, .sec-floating-images { overflow: clip; } /* --- launch build: the hero kicker and logo under 900px, PORTRAIT only. Desktop anchors every hero piece to the vertical centre. The 900px layer above pins the logo AND the kicker to top: 64px (its own comment says why: to clear the preview's colorway pill, retired 2026-09-13, not in this build). The kicker only ever cleared the logo on phones because the site editor stored a 60px move on it -- the inline