/* ========================================================= Sable Signal — dark luxury editorial ========================================================= */ :root { --ink: #0b0b0c; --surface: #141414; --surface-2: #1b1b1d; --ivory: #f4efe6; --muted: #8a8578; --gold: #d7c69d; --gold-bright: #eadfc0; --gold-deep: #c6a15b; --hairline: rgba(215, 198, 157, 0.22); --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Hanken Grotesk', -apple-system, sans-serif; --label: 'Marcellus', serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); --pad: clamp(1.25rem, 4vw, 4rem); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Lenis smooth scroll */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--ink); color: var(--ivory); font-family: var(--sans); font-size: 1rem; font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.05; margin: 0 0 0.5em; } p { margin: 0 0 1em; } .screen-reader-text, .skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .skip-link:focus { width: auto; height: auto; clip: auto; z-index: 200; top: 8px; left: 8px; background: var(--gold); color: var(--ink); padding: 0.5rem 1rem; } ::selection { background: var(--gold); color: var(--ink); } a:focus-visible, button:focus-visible, .chip:focus-visible, .talent-card:focus-visible, summary:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 3px; } /* film grain */ .grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); animation: grain 8s steps(10) infinite; } @keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 3%); } } /* page-load veil */ .veil { position: fixed; inset: 0; z-index: 150; background: var(--ink); display: grid; place-items: center; transition: opacity 0.7s var(--ease), visibility 0.7s; /* CSS-only failsafe: if main.js never runs (404, CSP, an exception before its own 1.5s fallback), this animation lifts the veil anyway — the site must never be a blank dark screen because one script failed. main.js cancels it by putting is-loaded on . */ animation: veilout 0.7s var(--ease) 1.8s forwards; } .veil__mark { width: 84px; opacity: 0; animation: veilmark 0.9s var(--ease) forwards; } @keyframes veilmark { to { opacity: 1; } } @keyframes veilout { to { opacity: 0; visibility: hidden; } } body.is-loaded .veil, body.is-leaving .veil { animation: none; } body.is-loaded .veil { opacity: 0; visibility: hidden; } body.is-leaving .veil { opacity: 1; visibility: visible; transition-duration: 0.35s; } /* custom cursor */ .cursor { position: fixed; z-index: 160; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); pointer-events: none; transform: translate(-50%, -50%); mix-blend-mode: difference; transition: width 0.25s var(--ease), height 0.25s var(--ease), background 0.25s; display: grid; place-items: center; } .cursor__label { font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink); opacity: 0; text-transform: uppercase; white-space: nowrap; } .cursor.is-big { width: 72px; height: 72px; mix-blend-mode: normal; background: var(--gold-bright); } .cursor.is-big .cursor__label { opacity: 1; } @media (hover: none) { .cursor { display: none; } } /* buttons */ .btn { display: inline-block; padding: 0.85rem 1.9rem; font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid var(--gold); color: var(--gold); background: transparent; cursor: pointer; position: relative; overflow: hidden; z-index: 1; transition: color 0.35s var(--ease); } .btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--gold); transform: translateY(101%); transition: transform 0.35s var(--ease); } .btn:hover { color: var(--ink); } .btn:hover::after { transform: translateY(0); } .btn--gold { background: var(--gold); color: var(--ink); } .btn--gold::after { background: var(--gold-bright); transform: translateY(101%); } .btn--ghost { border-color: var(--hairline); color: var(--ivory); } .btn--ghost::after { background: var(--ivory); } .btn--ghost:hover { color: var(--ink); } .eyebrow { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; } /* =============================================== header */ .site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem var(--pad); transition: background 0.4s, -webkit-backdrop-filter 0.4s, backdrop-filter 0.4s, padding 0.4s, transform 0.45s var(--ease); } .site-head.is-solid { background: rgba(11, 11, 12, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding-block: 0.7rem; border-bottom: 1px solid rgba(215, 198, 157, 0.12); } .site-head.is-hidden { transform: translateY(-110%); } .site-head__brand { display: flex; align-items: center; gap: 0.7rem; } .ss-monogram { display: block; mix-blend-mode: screen; } .site-head__mark { width: 40px; height: 40px; } .site-head__wordmark { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ivory); white-space: nowrap; } .site-head__nav { display: flex; gap: 2rem; } .site-head__nav a { font-family: var(--label); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory); position: relative; padding-block: 0.3rem; } .site-head__nav a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease); } .site-head__nav a:hover::after { transform: scaleX(1); transform-origin: left; } .site-head__actions { display: flex; align-items: center; gap: 1.1rem; } .site-head__book { padding: 0.6rem 1.3rem; } .menu-toggle { width: 40px; height: 40px; background: none; border: 0; cursor: pointer; display: grid; place-items: center; gap: 0; position: relative; } .menu-toggle span { display: block; width: 26px; height: 1.5px; background: var(--ivory); transition: transform 0.35s var(--ease); position: absolute; } .menu-toggle span:first-child { transform: translateY(-4px); } .menu-toggle span:last-child { transform: translateY(4px); } body.menu-open .menu-toggle span:first-child { transform: rotate(45deg); } body.menu-open .menu-toggle span:last-child { transform: rotate(-45deg); } @media (max-width: 900px) { .site-head__nav, .site-head__book { display: none; } .site-head__wordmark { font-size: 1.05rem; } } /* ========================================= full menu */ .fullmenu { position: fixed; inset: 0; z-index: 95; background: var(--ink); display: flex; flex-direction: column; padding: 7rem var(--pad) 2rem; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.6s var(--ease), visibility 0s 0.6s; /* Ten items — the two-line Studio entry pushes the stack past 100vh on every phone size, and link size scales with vh so a taller device never rescues it. The panel must be able to scroll or the last item is unreachable. */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } body.menu-open .fullmenu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.6s var(--ease), visibility 0s 0s; } .fullmenu__inner { display: flex; flex: 1; align-items: center; gap: 4rem; } .fullmenu__links { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; } .fullmenu__links a { font-family: var(--serif); font-size: clamp(2rem, 6vh, 3.6rem); line-height: 1.25; color: var(--ivory); display: flex; align-items: baseline; gap: 1.2rem; opacity: 0; transform: translateY(24px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s; } body.menu-open .fullmenu__links a { opacity: 1; transform: none; } .fullmenu__links a:hover { color: var(--gold); font-style: italic; } .fullmenu__num { font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--muted); } .fullmenu__media { position: relative; width: min(30vw, 420px); aspect-ratio: 3/4; display: none; } .fullmenu__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.45s var(--ease), transform 0.6s var(--ease); } .fullmenu__media img.is-active { opacity: 1; transform: scale(1); } @media (min-width: 1000px) { .fullmenu__media { display: block; } } .fullmenu__foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .fullmenu__foot a { color: var(--gold); } /* Phone-height viewports: tighten so ten items + the footer actually fit. Link size is vh-based, so a taller device never rescues the overflow on its own — the query has to cover tall phones (Pixel 7 is 915) as well as short. Must stay AFTER the base rules above: media queries add no specificity. */ @media (max-height: 940px) and (max-width: 999px) { .fullmenu { padding: 4.6rem var(--pad) 1.2rem; } .fullmenu__inner { align-items: flex-start; } .fullmenu__links { gap: 0; } .fullmenu__links a { font-size: clamp(1.6rem, 5vh, 2.9rem); line-height: 1.2; } .fullmenu__note { font-size: 0.55rem; letter-spacing: 0.18em; } .fullmenu__foot { font-size: 0.66rem; } } /* Shortest phones: the menu foot only repeats the markets line and a Book talent link that is already item 09 — drop it rather than push the list off-screen. */ @media (max-height: 830px) and (max-width: 999px) { .fullmenu { padding-top: 3.6rem; } .fullmenu__foot { display: none; } .fullmenu__links a { line-height: 1.14; } } /* ================================================ hero */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: 8rem var(--pad) 6rem; isolation: isolate; overflow: hidden; } .hero__media { position: absolute; inset: -8% 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 22%; } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(11,11,12,0.94) 0%, rgba(11,11,12,0.25) 45%, rgba(11,11,12,0.35) 100%), linear-gradient(100deg, rgba(11,11,12,0.85) 0%, rgba(11,11,12,0.1) 60%); } .hero__content { max-width: 880px; } .hero__eyebrow { margin-bottom: 1.4rem; } .hero__title { font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 400; letter-spacing: -0.01em; margin-bottom: 1.4rem; } .hero__sub { max-width: 560px; color: rgba(244, 239, 230, 0.85); font-size: 1.05rem; margin-bottom: 2.2rem; } .hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; } .hero__scroll { position: absolute; right: var(--pad); bottom: 2rem; font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 0.8rem; } .hero__scroll span { display: block; width: 1px; height: 48px; background: var(--hairline); position: relative; overflow: hidden; } .hero__scroll span::after { content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--gold); animation: scrollcue 1.8s var(--ease) infinite; } @keyframes scrollcue { to { top: 110%; } } /* split-text animation. .word is the reveal mask, so its box is what clips the glyphs. Headings run line-height 1.05, which is shorter than Cormorant Garamond's descender — so the mask sliced the tail off every g/y/p/q/j ("The signal above the noise."). padding-bottom opens the mask; the equal negative margin keeps the line box, and therefore the layout, exactly where it was. The inner translate has to clear the now-taller mask — at 115% the top of the glyph peeked before the reveal, hence 135%. */ [data-split] .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.22em; margin-bottom: -0.22em; } [data-split] .word > span { display: inline-block; transform: translateY(135%); transition: transform 0.9s var(--ease); } [data-split].is-split-in .word > span { transform: translateY(0); } [data-split] .word:nth-child(2) > span { transition-delay: 0.07s; } [data-split] .word:nth-child(3) > span { transition-delay: 0.14s; } [data-split] .word:nth-child(4) > span { transition-delay: 0.21s; } [data-split] .word:nth-child(5) > span { transition-delay: 0.28s; } [data-split] .word:nth-child(6) > span { transition-delay: 0.35s; } [data-split] .word:nth-child(7) > span { transition-delay: 0.42s; } /* ============================================ marquee */ .marquee { overflow: hidden; border-block: 1px solid var(--hairline); padding: 1.1rem 0; background: var(--ink); } .marquee__track { display: flex; width: max-content; animation: marquee 36s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__track span { font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding-right: 1rem; } @keyframes marquee { to { transform: translateX(-50%); } } /* =========================================== sections */ .section { padding: clamp(4rem, 10vw, 8rem) var(--pad); } .section__head { max-width: 880px; margin-bottom: clamp(2rem, 5vw, 4rem); } .section__head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; max-width: none; flex-wrap: wrap; } .section__title { font-size: clamp(2.2rem, 5vw, 4rem); } .statement { text-align: center; max-width: 1100px; margin-inline: auto; } .statement__line { font-size: clamp(2rem, 5vw, 4.2rem); margin-bottom: 1.6rem; } .statement__line em { color: var(--gold); } .statement__copy { max-width: 640px; margin-inline: auto; color: rgba(244, 239, 230, 0.75); } /* reveal on scroll */ /* Content is visible BY DEFAULT; the hidden pre-reveal state only exists once main.js has run and stamped .js on . If the script 404s or throws, the observer that would un-hide everything never runs — so the hiding must be conditional on the same script that undoes it.

(book-talent's "Live entertainment — dancers, DJ or specialty act") sets the select's min-content width and inflates the whole 1fr track past the viewport. These two rules are what keep the forms inside 375px — don't drop them. */ .form__grid > * { min-width: 0; } .form label { display: flex; flex-direction: column; gap: 0.45rem; font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .form input, .form select, .form textarea { background: var(--surface); border: 1px solid var(--hairline); color: var(--ivory); padding: 0.85rem 1rem; font-family: var(--sans); font-size: 0.95rem; letter-spacing: normal; width: 100%; max-width: 100%; transition: border-color 0.3s; } .form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: none; border-color: var(--gold); } .form__full { margin-bottom: 1.1rem; } .form__interests { border: 1px solid var(--hairline); padding: 1.2rem 1.4rem; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; } .form__interests legend { padding: 0 0.6rem; } .form__interests label { flex-direction: row; align-items: center; gap: 0.5rem; letter-spacing: 0.1em; } .form__consent { flex-direction: row !important; align-items: flex-start !important; gap: 0.7rem !important; letter-spacing: 0.06em !important; line-height: 1.5; margin-bottom: 1.8rem; padding-block: 0.5rem; } /* Was 13x13 — required server-side, so a mis-tap costs the user the whole submit. */ .form__consent input { accent-color: var(--gold); margin-top: 0.15rem; width: 22px; height: 22px; flex: 0 0 22px; } .form__interests label { padding-block: 0.45rem; } .form__interests input[type="checkbox"] { accent-color: var(--gold); width: 20px; height: 20px; flex: 0 0 20px; } .form__submit { font-size: 0.82rem; padding: 1rem 2.6rem; } .form__file input[type="file"] { padding: 0.7rem 1rem; cursor: pointer; } .form__file input[type="file"]::file-selector-button { background: transparent; border: 1px solid var(--gold); color: var(--gold-bright); font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.5rem 1.1rem; margin-right: 1rem; cursor: pointer; transition: background 0.3s, color 0.3s; } .form__file input[type="file"]::file-selector-button:hover { background: var(--gold); color: var(--ink); } .form__filehint { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: none; color: var(--muted); } .form__filehint + .form__filehint { margin-top: 0.5rem; } .form__filehint code { font-size: 0.95em; letter-spacing: 0.04em; color: var(--ivory); } .form__fileerr { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: none; color: #d99a86; } /* Conversion status. Gold, not red — "we are fixing this for you" is not an error. */ .form__filenote { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: none; color: var(--gold-bright); } .form__file input[type="file"].is-working { opacity: 0.6; } .form__turnstile { margin-bottom: 1.6rem; min-height: 65px; } /* ============================================ footer */ .site-foot { border-top: 1px solid var(--hairline); position: relative; overflow: hidden; } .site-foot__cta { padding: clamp(3.5rem, 8vw, 6rem) var(--pad) clamp(2rem, 5vw, 3.5rem); } .site-foot__title { font-size: clamp(2.6rem, 7vw, 5.5rem); margin: 0; line-height: 1.15; } .site-foot__title--alt { color: var(--muted); } .site-foot__link { transition: color 0.3s; } .site-foot__link:hover { color: var(--gold); font-style: italic; } .site-foot__arrow { display: inline-block; transition: transform 0.35s var(--ease); } .site-foot__link:hover .site-foot__arrow { transform: translateX(12px); } .site-foot__grid { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr 1.1fr; gap: 2.5rem; padding: 2.5rem var(--pad); border-top: 1px solid var(--hairline); } @media (max-width: 980px) { .site-foot__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .site-foot__grid { grid-template-columns: 1fr; } } .site-foot__col { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; font-size: 0.92rem; color: rgba(244,239,230,0.75); } .site-foot__col a { padding-block: 0.15rem; transition: color 0.3s; } .site-foot__col a:hover { color: var(--gold); } .site-foot__mark { width: 44px; margin-bottom: 0.8rem; } .site-foot__trust { font-size: 0.8rem; color: var(--muted); } .site-foot__news { font-size: 0.88rem; color: var(--muted); } .newsletter { display: flex; border-bottom: 1px solid var(--hairline); width: 100%; max-width: 300px; } .newsletter input { flex: 1; background: none; border: 0; color: var(--ivory); padding: 0.6rem 0; font-family: var(--sans); } .newsletter input:focus-visible { outline: none; } .newsletter button { background: none; border: 0; color: var(--gold); font-size: 1.2rem; cursor: pointer; padding: 0 0.4rem; transition: transform 0.3s var(--ease); } .newsletter button:hover { transform: translateX(6px); } .newsletter.is-done::after { content: 'You are on the list.'; font-size: 0.8rem; color: var(--gold); padding: 0.6rem 0; } .newsletter.is-done input, .newsletter.is-done button { display: none; } .newsletter.is-sending button { opacity: 0.45; pointer-events: none; } .newsletter__note { font-size: 0.78rem; color: var(--gold); margin-top: 0.6rem; line-height: 1.5; } .newsletter__fine { font-size: 0.72rem; color: var(--muted); margin-top: 0.6rem; line-height: 1.5; } .newsletter__fine a { color: var(--gold); border-bottom: 1px solid var(--hairline); } .newsletter button { min-width: 44px; min-height: 44px; } .newsletter input { min-height: 44px; } .site-foot__markets { font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 1rem; } .site-foot__base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.4rem var(--pad) 1.6rem; border-top: 1px solid var(--hairline); font-size: 0.78rem; color: var(--muted); } /* Own line rather than a third column: it is a multi-line block, and squeezing it between the copyright and the strapline would ragged all three. */ .site-foot__postal { flex: 0 0 100%; order: 3; font-style: normal; line-height: 1.55; } .site-foot__watermark { font-family: var(--serif); font-size: clamp(4rem, 13vw, 12rem); letter-spacing: 0.16em; text-align: center; line-height: 0.9; color: rgba(215,198,157,0.05); white-space: nowrap; pointer-events: none; user-select: none; padding-bottom: 1rem; position: relative; left: 50%; transform: translateX(-50%); width: max-content; } .post-teaser { padding: 1.5rem 0; border-bottom: 1px solid var(--hairline); } /* ================================ pass 3: trust / faq / work */ .trust { padding: clamp(2rem, 5vw, 3.5rem) var(--pad); border-block: 1px solid var(--hairline); text-align: center; } .trust__label { font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.2rem; } .trust__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem 2.8rem; } .trust__list li { font-family: var(--serif); font-size: clamp(1.05rem, 1.8vw, 1.4rem); font-style: italic; color: rgba(244, 239, 230, 0.55); white-space: nowrap; } .trust__note { font-size: 0.72rem; color: var(--muted); margin: 1.2rem 0 0; opacity: 0.8; } .faq__list { max-width: 860px; border-top: 1px solid var(--hairline); } .faq__item { border-bottom: 1px solid var(--hairline); } .faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--ivory); padding: 1.3rem 0.3rem; transition: color 0.3s; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:hover { color: var(--gold); } .faq__marker { position: relative; width: 14px; height: 14px; flex: 0 0 auto; } .faq__marker::before, .faq__marker::after { content: ''; position: absolute; background: var(--gold); transition: transform 0.35s var(--ease); top: 50%; left: 0; width: 100%; height: 1px; } .faq__marker::after { transform: rotate(90deg); } .faq__item[open] .faq__marker::after { transform: rotate(0deg); } .faq__item[open] summary { color: var(--gold); } .faq__body { padding: 0 2.5rem 1.4rem 0.3rem; color: rgba(244, 239, 230, 0.78); max-width: 720px; } .faq__body p { margin: 0; } .work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; padding: 1rem var(--pad) clamp(4rem, 8vw, 7rem); } @media (max-width: 860px) { .work-grid { grid-template-columns: 1fr; } } .work-card { display: block; } .work-card__media { display: block; overflow: hidden; aspect-ratio: 16/10; background: var(--surface); } .work-card__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4); transform: scale(1.01); transition: filter 0.5s var(--ease), transform 0.7s var(--ease); } .work-card:hover .work-card__img { filter: grayscale(0); transform: scale(1.045); } .work-card__meta { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 1rem; } .work-card__client { font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .work-card__title { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; } .work-card__scope { color: var(--muted); font-size: 0.9rem; } .credits { padding-block: 0 !important; } .credits__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border-block: 1px solid var(--hairline); margin: 0; } .credits__item { padding: 1.2rem 1.4rem 1.2rem 0; border-right: 1px solid rgba(215, 198, 157, 0.1); padding-left: 1.4rem; } .credits__item:first-child { padding-left: 0.3rem; } .credits__item:last-child { border-right: 0; } .credits__item dt { font-family: var(--label); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .credits__item dd { margin: 0.2rem 0 0; font-family: var(--serif); font-size: 1.15rem; color: var(--ivory); } /* ================================ motion upgrades (pass 2) */ /* cross-document view transitions — progressive enhancement */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: ss-vt-out 0.3s ease both; } ::view-transition-new(root) { animation: ss-vt-in 0.45s ease both; } @keyframes ss-vt-out { to { opacity: 0; } } @keyframes ss-vt-in { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* magnetic buttons */ .btn { transition: color 0.35s var(--ease), transform 0.3s var(--ease); will-change: transform; } /* Ken Burns hero */ .hero__media { animation: ss-kenburns 14s var(--ease) both; } @keyframes ss-kenburns { from { transform: scale(1.07); } to { transform: scale(1); } } /* roster filter in/out */ .roster .talent-card { transition: opacity 0.4s var(--ease), transform 0.45s var(--ease); } .roster .talent-card.is-out { opacity: 0; transform: translateY(16px) scale(0.985); } /* sticky horizontal board (desktop) */ .faces-pin { position: relative; } .faces-pin .faces { position: sticky; top: 0; overflow: hidden; } .faces-pin .faces__rail { overflow: visible; cursor: default; will-change: transform; } /* footer wordmark skew */ .site-foot__watermark { will-change: transform; } /* lightbox */ .profile__shot { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; z-index: 170; background: rgba(11, 11, 12, 0.96); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0s 0.35s; } .lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.35s var(--ease), visibility 0s 0s; } .lightbox__img { max-width: min(86vw, 1100px); max-height: 86vh; width: auto; height: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transition: opacity 0.25s var(--ease), transform 0.3s var(--ease); } .lightbox.is-switching .lightbox__img { opacity: 0; transform: scale(0.985); } .lightbox__btn { position: absolute; background: none; border: 1px solid var(--hairline); color: var(--gold); width: 52px; height: 52px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 1.15rem; line-height: 1; transition: border-color 0.3s, background 0.3s, color 0.3s; } .lightbox__btn:hover { border-color: var(--gold); background: var(--gold); color: var(--ink); } .lightbox__close { top: 1.4rem; right: 1.4rem; } .lightbox__prev { left: 1.2rem; top: 50%; transform: translateY(-50%); } .lightbox__next { right: 1.2rem; top: 50%; transform: translateY(-50%); } .lightbox__count { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.24em; color: var(--muted); } @media (max-width: 700px) { .lightbox__prev { left: 0.4rem; } .lightbox__next { right: 0.4rem; } .lightbox__btn { width: 44px; height: 44px; } } /* ========================================================= SABLE SIGNAL STUDIO — the beauty & wellness marketing arm --------------------------------------------------------- A separate lane, not an eleventh division. Same dark shell, but a blush accent and a persistent sub-nav so nobody confuses marketing pricing with agency pricing. Blush on ink measures 11.6:1 — safe for small label text. ========================================================= */ :root { --blush: #e8b4a0; /* .site-head is fixed and transparent until .is-solid; the Studio sub-nav has to clear it, so both heights live here as one place to tune. */ --head-h: 4.9rem; --head-h-solid: 4.1rem; } body.studio .site-main .eyebrow { color: var(--blush); } /* push the sub-nav out from under the fixed header, then let the hero sit tighter since the sub-nav already provides the visual clearance */ body.studio .site-main { padding-top: var(--head-h); } body.studio .page-hero { padding-top: 3.2rem; } /* shared section helpers (first used by the Studio) */ .section--tight { padding-block: clamp(2.6rem, 6vw, 5rem); } .section__lede { color: var(--muted); max-width: 620px; margin-top: 0.9rem; font-size: 1rem; line-height: 1.7; } /* ---------------------------------------------------- sub-nav */ .studio-nav { /* sticks just under the solid header; main.js lifts it to 0 when the header hides on scroll-down so the two never separate */ position: sticky; top: var(--head-h-solid); z-index: 40; /* BLOCK, not flex. The flex row moved down to .studio-nav__row in 2.0.0 so a second (jump) row could nest here. Left as a row-flex parent, the single .studio-nav__row child sized to max-content and pushed every Studio page to a 714px scrollWidth at 375px — caught by overflow.mjs, invisible otherwise because the culprit it names is the header being dragged along. */ display: block; padding: 0 var(--pad); background: rgba(11,11,12,0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); transition: top 0.45s var(--ease); } .studio-nav.is-lifted { top: 0; } .studio-nav__brand { display: flex; flex-direction: column; line-height: 1.15; flex-shrink: 0; } .studio-nav__mark { font-family: var(--label); font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory); } .studio-nav__sub { font-family: var(--label); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blush); } .studio-nav__links { display: flex; gap: clamp(0.9rem, 2vw, 1.9rem); flex: 1; overflow-x: auto; scrollbar-width: none; /* Scrollbar is hidden, so fade the trailing edge — otherwise the overflow is undiscoverable on touch. main.js also scrolls the current link into view. */ -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.2rem), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.2rem), transparent 100%); scroll-behavior: smooth; } @media (min-width: 861px) { .studio-nav__links { -webkit-mask-image: none; mask-image: none; } } .studio-nav__links::-webkit-scrollbar { display: none; } .studio-nav__link { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,239,230,0.72); white-space: nowrap; padding-block: 0.3rem; border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; } .studio-nav__link:hover { color: var(--ivory); border-color: var(--blush); } .studio-nav__link.is-current { color: var(--blush); border-color: var(--blush); } .studio-nav__cta { flex-shrink: 0; font-size: 0.68rem; padding: 0.6rem 1.4rem; } @media (max-width: 860px) { .studio-nav__cta { display: none; } } @media (max-width: 560px) { .studio-nav__brand .studio-nav__sub { display: none; } } body.ss-static .studio-nav { position: static; } /* --- second row: in-page jump links (packages page only). Nested inside .studio-nav rather than being its own sticky bar — one element means one lift state and no height-tracking between two bars. */ .studio-nav__row { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); padding-block: 0.85rem; min-width: 0; } .studio-nav--stacked .studio-nav__row { padding-block: 0.7rem; } .studio-nav__jump { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.6rem); border-top: 1px solid var(--hairline); padding-block: 0.5rem; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%); } .studio-nav__jump::-webkit-scrollbar { display: none; } @media (min-width: 861px) { .studio-nav__jump { -webkit-mask-image: none; mask-image: none; } } .studio-nav__jump-label { font-family: var(--label); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; flex-shrink: 0; } .studio-nav__jump-link { font-size: 0.76rem; color: rgba(244,239,230,0.75); white-space: nowrap; border-bottom: 1px solid transparent; padding-block: 0.15rem; transition: color 0.3s, border-color 0.3s; } .studio-nav__jump-link:hover { color: var(--blush); border-color: var(--blush); } /* Anchor targets must clear the fixed header AND both sub-nav rows, or a jump lands with the heading hidden behind the chrome. Scoped to the sections that are actually anchor targets — not every [id] on the page. */ body.studio .section[id] { scroll-margin-top: 11.5rem; } /* header + full menu markers */ .site-head__studio.is-current { color: var(--blush); } .fullmenu__note { display: block; font-family: var(--label); font-style: normal; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blush); } /* -------------------------------------------------- pricing tiers */ .tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; align-items: stretch; } @media (max-width: 1180px) { .tiers { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .tiers { grid-template-columns: 1fr; } } .tier { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid rgba(215,198,157,0.12); padding: 2rem 1.6rem 1.8rem; transition: border-color 0.35s, transform 0.45s var(--ease), background 0.35s; } .tier:hover { border-color: var(--gold); transform: translateY(-4px); background: var(--surface-2); } .tier--featured { border-color: var(--blush); background: var(--surface-2); } .tier--featured:hover { border-color: var(--blush); } .tier-flag { position: absolute; top: -0.7rem; left: 1.6rem; background: var(--blush); color: var(--ink); font-family: var(--label); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.32rem 0.8rem; } .tier-name { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; margin: 0 0 0.35rem; color: var(--ivory); } .tier-tag { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin: 0 0 1.1rem; min-height: 2.6em; } .tier-price { font-family: var(--serif); font-size: 2.5rem; line-height: 1; color: var(--gold); margin: 0; } .tier-price .per { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); letter-spacing: 0.04em; } /* always rendered, even when empty, so the cards align across the row */ .tier-meta { font-size: 0.76rem; color: var(--blush); margin: 0.4rem 0 0; min-height: 1.3em; letter-spacing: 0.04em; } .tier hr { border: 0; border-top: 1px solid var(--hairline); margin: 1.3rem 0; } .tier-feats { list-style: none; padding: 0; margin: 0 0 1.6rem; flex: 1; } .tier-feats li { position: relative; padding: 0.38rem 0 0.38rem 1.35rem; font-size: 0.88rem; line-height: 1.5; color: rgba(244,239,230,0.82); } .tier-feats li::before { content: '—'; position: absolute; left: 0; color: var(--gold); } .tier-feats .plus { color: var(--blush); font-style: italic; } .tier-feats .plus::before { content: '+'; color: var(--blush); } .tier .btn { align-self: flex-start; font-size: 0.68rem; padding: 0.75rem 1.7rem; } .tiers-note { color: var(--muted); font-size: 0.83rem; line-height: 1.7; margin-top: 1.6rem; max-width: 900px; } .tiers-note a { color: var(--gold); border-bottom: 1px solid var(--hairline); } /* ------------------------------------------- comparison table */ .table-scroll { overflow-x: auto; margin-top: 2.6rem; border: 1px solid var(--hairline); } .table-scroll:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; } table.pricing { width: 100%; border-collapse: collapse; min-width: 620px; } table.pricing th, table.pricing td { padding: 0.9rem 1.2rem; text-align: left; border-bottom: 1px solid rgba(215,198,157,0.1); font-size: 0.9rem; } table.pricing thead th { font-family: var(--label); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); background: var(--surface); } table.pricing tbody tr:last-child td { border-bottom: 0; } table.pricing td.hl { color: var(--gold); } .table-hint { color: var(--muted); font-size: 0.75rem; margin-top: 0.7rem; } @media (min-width: 760px) { .table-hint { display: none; } } /* -------------------------------------------------- add-ons */ .addons { border-top: 1px solid var(--hairline); } .addon { display: grid; grid-template-columns: 1.1fr 2fr auto; gap: 1.5rem; align-items: baseline; padding: 1.05rem 0; border-bottom: 1px solid rgba(215,198,157,0.1); } @media (max-width: 700px) { .addon { grid-template-columns: 1fr; gap: 0.3rem; } } .addon__name { font-family: var(--label); font-size: 0.85rem; letter-spacing: 0.1em; color: var(--ivory); } .addon__desc { color: var(--muted); font-size: 0.88rem; line-height: 1.5; } .addon__price { font-family: var(--serif); font-size: 1.15rem; color: var(--gold); white-space: nowrap; } /* --------------------------------------------- process steps */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; counter-reset: step; } @media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .step { counter-increment: step; border-top: 1px solid var(--hairline); padding-top: 1.2rem; } .step::before { content: "0" counter(step); display: block; font-family: var(--serif); font-size: 2rem; color: var(--blush); line-height: 1; margin-bottom: 0.7rem; } .step h3 { font-size: 1.15rem; margin: 0 0 0.5rem; color: var(--ivory); } .step p { color: var(--muted); font-size: 0.9rem; line-height: 1.65; margin: 0; } /* ------------------------------------------------- promises */ .promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } @media (max-width: 980px) { .promises { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .promises { grid-template-columns: 1fr; } } .promise { border-left: 1px solid var(--hairline); padding-left: 1.2rem; } .promise h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; margin: 0 0 0.5rem; color: var(--gold); } .promise p { color: var(--muted); font-size: 0.9rem; line-height: 1.65; margin: 0; } /* ------------------------------------------------ who we build for */ .who-list { list-style: none; padding: 0 !important; margin: 1.8rem 0; display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: none !important; } .who-list li { border: 1px solid var(--hairline); padding: 0.5rem 1.05rem; margin: 0 !important; font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(244,239,230,0.8); } /* ---------------------------------------------------- closing band */ .studio-cta { background: var(--surface); border-top: 1px solid var(--hairline); } .studio-cta__inner { max-width: 720px; } .studio-cta__title { font-family: var(--serif); font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 400; margin: 0 0 1rem; } .studio-cta__lede { color: rgba(244,239,230,0.8); font-size: 1.02rem; line-height: 1.7; margin: 0 0 1.5rem; } /* .studio-cta__actions is gone as of 2.0.0 — the footer's Studio CTA sits immediately below this band and carried the identical button pair. */ .studio-cta__fine { color: var(--muted); font-size: 0.78rem; line-height: 1.6; margin: 0; } /* ========================================================= THE HALO — the Studio's signature moment (2.0.0) --------------------------------------------------------- The halo-lit round mirror is in every Studio photograph. Here it is the interface: one tick on the ring per post in the month, so the gap between 8 and 30 is a picture, not a table row. Four native radios switch the tier — no JS. All four panels share ONE grid cell (grid-area: 1/1), so a switch cannot resize the container. That is deliberate: /studio/ is CLS 0 and this keeps it there. ========================================================= */ .halo-sec { background: var(--surface); border-block: 1px solid var(--hairline); } .halo-dial__radio { position: absolute; opacity: 0; pointer-events: none; } .halo-dial__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); } .halo-chip { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,239,230,0.72); border: 1px solid var(--hairline); padding: 0.62rem 1.25rem; cursor: pointer; white-space: nowrap; transition: color 0.3s, border-color 0.3s, background 0.3s; } .halo-chip:hover { color: var(--ivory); border-color: var(--blush); } /* stage: every panel stacked in one cell, only the checked one visible */ .halo-dial__stage { display: grid; max-width: 1080px; } .halo-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.8rem, 5vw, 4.5rem); align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0.5s; } @media (max-width: 860px) { .halo-panel { grid-template-columns: 1fr; gap: 2rem; justify-items: center; } } /* The four selectors that do all the work. Radios are emitted before both the chips and the stage, so a plain sibling combinator reaches each. */ .halo-dial__radio:nth-of-type(1):checked ~ .halo-dial__chips .halo-chip:nth-of-type(1), .halo-dial__radio:nth-of-type(2):checked ~ .halo-dial__chips .halo-chip:nth-of-type(2), .halo-dial__radio:nth-of-type(3):checked ~ .halo-dial__chips .halo-chip:nth-of-type(3), .halo-dial__radio:nth-of-type(4):checked ~ .halo-dial__chips .halo-chip:nth-of-type(4) { color: var(--ink); background: var(--blush); border-color: var(--blush); } .halo-dial__radio:nth-of-type(1):checked ~ .halo-dial__stage .halo-panel[data-i="0"], .halo-dial__radio:nth-of-type(2):checked ~ .halo-dial__stage .halo-panel[data-i="1"], .halo-dial__radio:nth-of-type(3):checked ~ .halo-dial__stage .halo-panel[data-i="2"], .halo-dial__radio:nth-of-type(4):checked ~ .halo-dial__stage .halo-panel[data-i="3"] { opacity: 1; visibility: visible; } /* keyboard: the radio is visually hidden, so ring the chip it drives */ .halo-dial__radio:nth-of-type(1):focus-visible ~ .halo-dial__chips .halo-chip:nth-of-type(1), .halo-dial__radio:nth-of-type(2):focus-visible ~ .halo-dial__chips .halo-chip:nth-of-type(2), .halo-dial__radio:nth-of-type(3):focus-visible ~ .halo-dial__chips .halo-chip:nth-of-type(3), .halo-dial__radio:nth-of-type(4):focus-visible ~ .halo-dial__chips .halo-chip:nth-of-type(4) { outline: 1.5px solid var(--gold); outline-offset: 3px; } /* ---- the mirror itself */ .halo { /* one place to tune the diameter — the tick transform reads it back, and a second literal here would silently throw the ticks off the rim */ --halo-d: min(27rem, 74vw); --halo-tick: 13px; position: relative; width: var(--halo-d); aspect-ratio: 1; display: grid; place-items: center; flex-shrink: 0; } /* the glass: darker in the middle, so the rim reads as the light source */ .halo::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(232,180,160,0.09), rgba(11,11,12,0.9) 68%); border: 1px solid rgba(232,180,160,0.16); } /* the halo: the lit rim the whole motif is named for */ .halo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(232,180,160,0.34); box-shadow: 0 0 44px 2px rgba(232,180,160,0.13), inset 0 0 44px 2px rgba(232,180,160,0.07); } .halo__ring { position: absolute; inset: 0; } /* one tick per post — rotated to --a, pushed out to the rim */ .halo__tick { position: absolute; top: 50%; left: 50%; width: 1.5px; height: var(--halo-tick); margin: calc(var(--halo-tick) / -2) 0 0 -0.75px; background: var(--blush); transform: rotate(var(--a)) translateY(calc(var(--halo-d) / -2 + var(--halo-tick) / 2)); transform-origin: 50% 50%; opacity: 0.85; } .halo__core { position: relative; display: grid; justify-items: center; text-align: center; padding: 0 18%; } .halo__tier { font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blush); } /* line-height 1 on Cormorant lets the glyphs spill past the line box and land on the row below — "a month" printed straight through the "395". Leave the extra. */ .halo__price { font-family: var(--serif); font-size: clamp(3rem, 9vw, 4.6rem); line-height: 1.12; color: var(--gold); margin-top: 0.5rem; } .halo__per { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--muted); margin-top: 0.15rem; } .halo__posts { margin-top: 0.9rem; font-size: 0.78rem; color: rgba(244,239,230,0.72); border-top: 1px solid var(--hairline); padding-top: 0.7rem; } /* ---- the month, itemized */ .halo-facts { min-width: 0; width: 100%; max-width: 30rem; } .halo-facts__tag { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.3; color: var(--ivory); margin: 0 0 1.4rem; } .halo-facts__list { margin: 0 0 1.8rem; border-top: 1px solid var(--hairline); } .halo-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; border-bottom: 1px solid var(--hairline); padding: 0.72rem 0; } .halo-fact dt { font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .halo-fact dd { margin: 0; font-size: 1rem; color: var(--ivory); text-align: right; } .halo-facts__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; } .halo-facts__actions .btn { font-size: 0.66rem; padding: 0.72rem 1.4rem; } @media (prefers-reduced-motion: reduce) { .halo-panel { transition: none; } } /* screenshots resolve .reveal but must not un-hide the three unchecked panels */ body.ss-static .halo-panel { transition: none; } /* ========================================================= THE PRICE INDEX (2.0.0) --------------------------------------------------------- Twenty tiers and twenty prices in one screen, at the top of an 11,000px page. Five columns on desktop; on a phone it stacks into five short blocks you can still thumb through in a few seconds. Every figure comes from the same array the cards below render from, so it cannot disagree. ========================================================= */ .pkg-index { background: var(--surface); border-block: 1px solid var(--hairline); } .pkg-index__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); } @media (max-width: 1100px) { .pkg-index__grid { grid-template-columns: repeat(2, 1fr); } } /* One column below 560px rather than two: at 375px a two-up puts ~140px of label and price into a 142px cell and the tier names wrap. A taller index is better than a ragged one — it is still a quarter of the page it summarises. */ @media (max-width: 560px) { .pkg-index__grid { grid-template-columns: 1fr; } .pkg-index__col { padding: 1.1rem 1.1rem 0.9rem; } .pkg-index__tiers li { padding: 0.42rem 0; } } .pkg-index__col { background: var(--ink); padding: 1.3rem 1.2rem 1.1rem; display: flex; flex-direction: column; } .pkg-index__head { display: block; margin-bottom: 1rem; } .pkg-index__label { display: block; font-family: var(--label); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--ivory); transition: color 0.3s; line-height: 1.35; } .pkg-index__head:hover .pkg-index__label { color: var(--blush); } .pkg-index__from { display: block; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--gold); margin-top: 0.25rem; } .pkg-index__tiers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); } .pkg-index__tiers li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(215,198,157,0.09); } .pkg-index__tiers li:last-child { border-bottom: 0; } .pkg-index__tiers li.is-featured .pkg-index__tier { color: var(--blush); } .pkg-index__tier { font-size: 0.83rem; color: rgba(244,239,230,0.78); } .pkg-index__price { font-family: var(--serif); font-size: 1.05rem; color: var(--gold); white-space: nowrap; } .pkg-index__price .per { font-family: var(--sans); font-size: 0.66rem; color: var(--muted); } /* ========================================================= THE FOUR SERVICE SHAPES (2.0.0) — see inc/studio-shapes.php --------------------------------------------------------- Each Studio service page gets one section the other three do not have, in a shape the other three do not use. They share a background so they read as the same *kind* of moment across the lane, and share nothing else. ========================================================= */ .shape { background: var(--surface); border-block: 1px solid var(--hairline); } /* ---- social: the cadence (a week) */ .cadence { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); } .cadence__day { display: grid; grid-template-columns: 4.5rem 5.5rem 1fr; gap: 1.4rem; align-items: center; border-bottom: 1px solid var(--hairline); padding: 1rem 0; transition: background 0.3s, padding-left 0.3s var(--ease); } .cadence__day:hover { background: rgba(232,180,160,0.035); padding-left: 0.8rem; } .cadence__name { font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blush); } .cadence__marks { display: flex; gap: 0.4rem; align-items: center; } .cadence__what { color: rgba(244,239,230,0.82); font-size: 0.92rem; line-height: 1.55; } .cadence__mark { width: 11px; height: 11px; flex-shrink: 0; } .cadence__mark--p { background: var(--gold); } /* feed post */ .cadence__mark--v { background: var(--blush); border-radius: 50%; } /* video */ .cadence__mark--s { border: 1px solid var(--muted); } /* stories */ .cadence__legend { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.4rem; font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .cadence__key { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 700px) { .cadence__day { grid-template-columns: 3.4rem 1fr; gap: 0.5rem 1rem; padding: 0.95rem 0; } .cadence__marks { grid-column: 2; } .cadence__what { grid-column: 2; } } /* ---- content days: the call sheet (a sequence) */ .daysheet { list-style: none; margin: 0; padding: 0; } .daysheet__row { display: grid; grid-template-columns: 6.5rem 1fr; gap: clamp(1rem, 3vw, 2.4rem); padding: 0 0 1.9rem; position: relative; } /* the spine — a content day is a line in time, so draw the line */ .daysheet__row::before { content: ''; position: absolute; left: calc(6.5rem / 2); top: 0.75rem; bottom: 0; width: 1px; background: var(--hairline); } .daysheet__row:last-child::before { display: none; } .daysheet__time { position: relative; font-family: var(--label); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--blush); text-align: center; padding-top: 0.15rem; } /* the dot on the spine */ .daysheet__time::after { content: ''; position: absolute; left: 50%; top: 2.1rem; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--blush); } .daysheet__body { display: block; padding-bottom: 0.2rem; } .daysheet__what { display: block; font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.7rem); color: var(--ivory); line-height: 1.25; } .daysheet__why { display: block; color: var(--muted); font-size: 0.92rem; line-height: 1.65; margin-top: 0.5rem; max-width: 46rem; } .daysheet__row--end .daysheet__time { color: var(--gold); } .daysheet__row--end .daysheet__time::after { background: var(--gold); } .daysheet__row--end .daysheet__what { color: var(--gold); font-style: italic; } @media (max-width: 620px) { .daysheet__row { grid-template-columns: 4.4rem 1fr; gap: 1rem; } .daysheet__row::before { left: calc(4.4rem / 2); } .daysheet__time { font-size: 0.74rem; } } /* ---- websites: the comparison (two states) */ .compare { display: grid; grid-template-columns: 9rem 1fr 1fr; gap: 0 clamp(1rem, 3vw, 2.4rem); border-top: 1px solid var(--hairline); } .compare__head { padding: 0 0 0.9rem; align-self: end; } .compare__head--a { grid-column: 2; } .compare__head--b { grid-column: 3; } .compare__tag { display: inline-block; font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--hairline); padding: 0.4rem 0.9rem; } .compare__tag--on { color: var(--ink); background: var(--blush); border-color: var(--blush); } /* display:contents rather than subgrid — subgrid is Safari 16+, and this buyer is on whatever iPhone she has. The three spans become direct grid items, so the columns line up across every row; the rule lives on the cells. */ .compare__row { display: contents; } .compare__label, .compare__a, .compare__b { border-top: 1px solid var(--hairline); padding: 1.1rem 0; } .compare__label { font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blush); } .compare__a { color: var(--muted); font-size: 0.94rem; line-height: 1.6; } .compare__b { color: var(--ivory); font-size: 0.94rem; line-height: 1.6; } @media (max-width: 780px) { /* stack: label, then the two states as a marked pair */ .compare { grid-template-columns: 1fr; row-gap: 0; } .compare__label { padding-bottom: 0.45rem; } .compare__a, .compare__b { border-top: 0; padding: 0 0 0.35rem; } .compare__b { padding-bottom: 1.1rem; } .compare__head { display: none; } .compare__row { grid-template-columns: 1fr; gap: 0.45rem; padding: 1.15rem 0; } .compare__a, .compare__b { position: relative; padding-left: 1.6rem; } .compare__a::before, .compare__b::before { position: absolute; left: 0; top: 0; font-family: var(--label); font-size: 0.85rem; line-height: 1.7; } .compare__a::before { content: '\00d7'; color: var(--muted); } .compare__b::before { content: '\2192'; color: var(--blush); } } /* ---- local listings: the map-pack anatomy (a diagram) */ .mappack { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.8rem, 5vw, 4rem); align-items: start; } @media (max-width: 860px) { .mappack { grid-template-columns: 1fr; } } .mappack__slots { border: 1px solid var(--hairline); background: var(--ink); padding: 1.2rem; position: sticky; top: 9rem; } @media (max-width: 860px) { .mappack__slots { position: static; } } .mappack__slot { display: flex; align-items: center; gap: 1rem; border: 1px solid rgba(232,180,160,0.28); padding: 0.95rem 1rem; margin-bottom: 0.6rem; } .mappack__rank { font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--blush); width: 1.6rem; flex-shrink: 0; } .mappack__bars { display: grid; gap: 0.42rem; flex: 1; } .mappack__bars i { display: block; height: 6px; width: var(--w); background: rgba(244,239,230,0.16); } .mappack__bars i:first-child { background: rgba(244,239,230,0.3); } .mappack__cut { border-top: 1px dashed var(--hairline); margin-top: 1rem; padding-top: 0.8rem; font-family: var(--label); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-align: center; } .mappack__parts { margin: 0; border-top: 1px solid var(--hairline); } .mappack__part { border-bottom: 1px solid var(--hairline); padding: 1.05rem 0; } .mappack__part dt { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: var(--serif); font-size: 1.2rem; color: var(--ivory); } .mappack__who { font-family: var(--label); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blush); border: 1px solid var(--hairline); padding: 0.24rem 0.6rem; flex-shrink: 0; } .mappack__part dd { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.65; } /* ========================================================= STUDIO MARKET PAGES (2.0.0) — templates/studio-market.php --------------------------------------------------------- These were the thinnest pages in the Studio and carry its best commercial argument. Three sections were added: the neighbourhoods (local proof), what we run here (priced, from the SSOT) and the other four markets (these pages had no links between them at all). ========================================================= */ .mkt-area { background: var(--surface); border-block: 1px solid var(--hairline); } .mkt-hoods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); } @media (max-width: 860px) { .mkt-hoods { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .mkt-hoods { grid-template-columns: 1fr; } } .mkt-hoods li { background: var(--surface); padding: 1.15rem 1.2rem; margin: 0; font-family: var(--serif); font-size: clamp(1.1rem, 2.2vw, 1.45rem); color: var(--ivory); line-height: 1.3; transition: background 0.35s, color 0.35s; } .mkt-hoods li:hover { background: var(--surface-2); color: var(--blush); } /* what we run here — name / lede / price, the .addon shape at section scale */ .mkt-svc { border-top: 1px solid var(--hairline); } .mkt-svc__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 1.4rem; align-items: baseline; border-bottom: 1px solid var(--hairline); padding: 1.3rem 0; transition: background 0.3s, padding-left 0.35s var(--ease); } .mkt-svc__row:hover { background: rgba(232,180,160,0.04); padding-left: 1.1rem; } .mkt-svc__name { font-family: var(--serif); font-size: clamp(1.35rem, 2.8vw, 2rem); color: var(--ivory); line-height: 1.2; transition: color 0.3s; } .mkt-svc__row:hover .mkt-svc__name { color: var(--blush); } .mkt-svc__lede { color: var(--muted); font-size: 0.92rem; line-height: 1.6; } .mkt-svc__price { font-family: var(--label); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--gold); white-space: nowrap; text-align: right; } @media (max-width: 780px) { .mkt-svc__row { grid-template-columns: 1fr auto; gap: 0.4rem 1rem; } .mkt-svc__lede { grid-column: 1 / -1; } .mkt-svc__price { text-align: right; align-self: start; } } /* --------------------------------------- front-page Studio band */ .studio-band { background: var(--surface); border-block: 1px solid var(--hairline); } .studio-band .eyebrow { color: var(--blush); } .studio-band__head { max-width: 880px; margin-bottom: clamp(2rem, 4vw, 3rem); } .studio-band__head .section__title em { color: var(--blush); } .studio-band__lede { color: var(--muted); font-size: 1.02rem; line-height: 1.7; margin-top: 1.1rem; } .studio-band__lede em { color: var(--ivory); font-style: normal; } .studio-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.2rem; } @media (max-width: 860px) { .studio-band__grid { grid-template-columns: repeat(2, 1fr); } } .studio-band__card { display: flex; flex-direction: column; gap: 0.4rem; border: 1px solid rgba(215,198,157,0.14); padding: 1.4rem 1.3rem; transition: border-color 0.3s, transform 0.4s var(--ease); } .studio-band__card:hover { border-color: var(--blush); transform: translateY(-4px); } .studio-band__card-name { font-family: var(--label); font-size: 0.9rem; letter-spacing: 0.1em; color: var(--ivory); } .studio-band__card-price { font-family: var(--serif); font-size: 1.3rem; color: var(--gold); } .studio-band__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; } /* --------------------------------------------------- misc */ .studio-svc-grid { padding: 0 var(--pad); } /* .page-body carries its own --pad; nested in a .section that would double it */ .section > .page-body { padding-inline: 0; padding-top: 0; } .form__fine { color: var(--muted); font-size: 0.8rem; line-height: 1.65; margin-top: 1.2rem; } .form__fine a { color: var(--gold); border-bottom: 1px solid var(--hairline); } /* ------------------------------------ design pass 1.9.0 Shared primitives reused across the agency lane. The point of the pass was to stop `.svc-card` doing every job, so these are modifiers on components that already exist rather than new boxes. */ /* .steps numbers are blush because .steps was built for the Studio. The agency lane keeps gold, so the two arms stay legible as two arms. */ .steps--gold .step::before { color: var(--gold); } /* .stat__num::after appends a '+' — correct for "10+ divisions", wrong for a response time, where "24+ hours to a quote" promises the opposite of the intent. This variant drops it. */ .stats--plain .stat__num::after { content: none; } .stats__note { max-width: 720px; margin: 2rem auto 0; text-align: center; color: var(--muted); font-size: 0.85rem; line-height: 1.7; } /* .form-wrap carries its own page padding; nested inside a .section that doubles it — same trap as .page-body above. */ .section > .form-wrap--flush { padding-inline: 0; padding-top: 0; margin-inline: 0; } /* .page-body was written for pages that END with the copy, so it carries a big bottom padding. Now that /contact/, /markets/ and /services/ continue into full sections, that padding stacks on top of the next section's own padding and leaves ~300px of dead space mid-page — which reads as "the page ended". Only collapse it when something actually follows. :has() is progressive: a browser without it keeps the old, larger gap, which is the current behaviour rather than a break. */ .page-body:has(+ .section, + .trust, + .stats) { padding-bottom: clamp(1.5rem, 3vw, 2.6rem); } /* Grouped division rows on /services/. The lane heading is the whole point of the treatment — it lets a buyer find themselves by what they are making before they have to parse ten division names — so it must stay legible at the top of each group and never collapse into the rows. */ .lanes { max-width: none !important; margin: clamp(2rem, 4vw, 3rem) 0 0; } .lane + .lane { margin-top: clamp(2.8rem, 5vw, 4.4rem); } .lane__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem 2rem; flex-wrap: wrap; margin-bottom: 0.9rem; } /* .lane .lane__title, not .lane__title: `.page-body h2` is element+class and would otherwise win on font-size and margin-top, blowing the label up to 2.7rem and pushing it 2.5em off the rows it belongs to. (The title is an h2 rather than an h3 so the heading order under the page h1 stays sequential.) */ .lane .lane__title { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin: 0; font-weight: 400; } .lane__for { color: var(--muted); font-size: 0.88rem; margin: 0; } .lane .division-list { border-top: 1px solid var(--hairline); } /* Full-width lead case study — see ss_work_lead_count(). Promoting the first card when the count is odd is what stops a three-item set stranding the third on its own row, and it gives /work/ the hierarchy it had none of. */ .work-card--lead { grid-column: 1 / -1; } .work-card--lead .work-card__media { aspect-ratio: 21 / 9; } .work-card--lead .work-card__title { font-size: clamp(1.9rem, 4vw, 3.1rem); } .work-card--lead .work-card__meta { padding-top: 1.3rem; } @media (max-width: 860px) { /* single column below here, so the lead has nothing to lead — put its crop back to the standard card ratio rather than a letterbox sliver */ .work-card--lead .work-card__media { aspect-ratio: 16 / 10; } } /* footer gained a fifth column when the Studio moved out of Divisions */ .site-foot__grid { grid-template-columns: 1.3fr 0.75fr 1fr 1fr 1.05fr; gap: 2rem; } @media (max-width: 1240px) { .site-foot__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 980px) { .site-foot__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .site-foot__grid { grid-template-columns: 1fr; } } /* static QA mode — no animation */ body.ss-static *, body.ss-static *::before, body.ss-static *::after { transition: none !important; animation: none !important; } /* Reveals and the intro veil are undone by JS. Without it the whole site renders as a blank dark screen — the text is all in the HTML, so this costs nothing. */ body.ss-static .veil { display: none; } body.ss-static .reveal { opacity: 1; transform: none; } body.ss-static [data-split] .word > span { transform: none; } body.ss-static .hero { min-height: 900px; } body.ss-static .page-hero--media { min-height: 700px; } /* ====================================== print: comp card */ @media print { body { background: #fff; color: #000; } .site-head, .site-foot, .grain, .cursor, .veil, .fullmenu, .profile__actions, .profile__back, .profile__pager, .hero__scroll { display: none !important; } .profile { padding: 0; } .profile__top { grid-template-columns: 1fr 1fr; } .talent-card__img, .profile__img { filter: none; } .profile__name, .profile__stat dd, .profile__bio, .profile__facts p { color: #000 !important; } .profile__stat dt, .profile__facts span { color: #555; } .profile__tags, .page-body a, .profile__facts a { color: #6b5836; } .reveal { opacity: 1 !important; transform: none !important; } }