/* The Service Edit — shared interior stylesheet. Generated by pages.py. */ /* ═══ BYQ font faces — verbatim ═══ */ @font-face { font-family: webflow-icons; src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format('truetype'); font-weight: 400; font-style: normal } @font-face { font-family: Raveo Display; src: url("https://byqsupply-components.netlify.app/Modulabs/fonts/Raveo-Display-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap } @font-face { font-family: Geist Variable; src: url("https://byqsupply-components.netlify.app/Modulabs/fonts/Geist-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap } @font-face { font-family: Geist Mono Variable; src: url("https://byqsupply-components.netlify.app/Modulabs/fonts/GeistMono-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap } /* ═══ BYQ brand tokens — verbatim ═══ */ /* ============================================================ BYQ Supply — Brand Tokens Lifted from the BYQ.supply Figma design system (byq.supply/app/globals.css + tailwind.config.cjs). Every gem references these `--byq-*` variables instead of hardcoding colors / fonts / radius, so the whole library feels like one cohesive, on-brand collection. Light is the default. Add `class="dark"` to (or any ancestor of the gem) to switch to the dark palette. ============================================================ */ :root { /* Surfaces */ --byq-bg: #f0eeed; /* Background / Base Light */ --byq-fg: #040404; /* Background / Contrast Light */ --byq-card: #ffffff; /* Background / Lift Light */ --byq-depth: #e2dfdc; /* Background / Depth Light — borders, subtle hover */ /* Accents — use sparingly as the "pop" */ --byq-accent-solar: #ffcd33; /* Accent / Solar Note (primary accent) */ --byq-accent-lime: #c5ef57; /* Accent / Lime Signal (secondary accent) */ --byq-error: #c9372d; /* Status / Error */ /* Foreground that sits on a solar/lime accent fill */ --byq-on-accent: #040404; /* Shape */ --byq-radius: 0.5rem; --byq-radius-lg: 1rem; /* Type — matches byq.supply: "Raveo Display" for headings, "Inter" for body copy. Both fall back gracefully when the font isn't self-hosted, so copied snippets never break. Put --byq-font-display on headings/large display type, --byq-font-sans on body text. */ --byq-font-display: "Raveo Display", "Raveo", Georgia, serif; --byq-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --byq-font-mono: "Saans Mono", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Opacity tokens */ --byq-lift-opacity: rgba(255, 255, 255, 0.8); --byq-tag-opacity: rgba(4, 4, 4, 0.08); } .dark { --byq-bg: #070708; /* Background / Base Dark */ --byq-fg: #f6f3ec; /* Background / Contrast Dark */ --byq-card: #18191a; /* Background / Lift Dark */ --byq-depth: #2a2b2c; /* Background / Depth Dark */ --byq-on-accent: #040404; /* accents stay bright; text on them stays dark */ --byq-lift-opacity: rgba(24, 25, 26, 0.8); --byq-tag-opacity: rgba(246, 243, 236, 0.08); } /* ═══ Homepage integration layer, hero rules removed ═══ */ /* ════════════════════════════════════════════════════════════════════════ TSE INTEGRATION LAYER — the ONLY CSS written for this page. Everything above this block is the three components verbatim. This does four things and nothing else: 1. puts the page on the BYQ dark palette (the Webflow reset above sets a white body, so it has to be re-stated after it) 2. stacks the three flip-word lines instead of one 100dvh screen 3. spaces the three components apart 4. adds the section labels above Work and Testimonials ════════════════════════════════════════════════════════════════════════ */ /* Geist Variable + Geist Mono are already @font-face'd by the Testimonial Slider component above. Pointing the two BYQ font tokens at them is a two-line change that gives the whole page one clean geometric sans — the gems' own default display face (Raveo) is a serif. Delete these two lines to put every component back on its shipped face. */ :root { --byq-font-display: "Geist Variable", "Geist", ui-sans-serif, system-ui, sans-serif; --byq-font-sans: "Geist Variable", "Geist", ui-sans-serif, system-ui, sans-serif; } body.dark { background: var(--byq-bg); color: var(--byq-fg); font-family: var(--byq-font-sans); font-size: 16px; line-height: 1.5; margin: 0; } .tse-wrap { width: 100%; max-width: 96rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3.5rem); } /* ── Hero component on the page's palette and type ────────────────────── The component ships its own near-black/near-white and a system font stack. Re-pointing its two colour tokens and its font is all it takes to sit it on the same ground as the rest of the page. */ :root { --color--dark: #070708; --color--light: #F6F3EC; } /* SERVICE leads; THE and EDIT land within 80ms. The whole wordmark is one gesture. Change these three numbers to retime it, nothing else. */ /* The hero is now one layered block: the photograph fills it, the type sits over it. Two scrims do the legibility work — a strong top-down one so the wordmark reads across her shoulder and the curtain, and a gentler left-to- right one for the eyebrow and the service line. The bottom fades back to the page ground so the band does not end on a hard edge. */ /* On a phone the box is portrait, so cover shows a narrow vertical slice of a landscape photo. Centred, that slice is carpet and boots. The laptop sits at roughly 32% across, so the crop is pulled left to hold it. The scrim is re-pooled to match, since the type now sits over the chair rather than the curtain. */ @media (max-width: 767px) { } /* The two services: same voice as the h1 (uppercase, weight 200), set well below it in size and tone so the name leads and the services follow. */ /* A plus, not a rule. The hairline read as "pick one"; the offer is the pair. */ @keyframes tse-rise { from { transform: translate3d(0, 200%, 0) skewY(20deg); opacity: 0; } to { transform: none; opacity: 1; } } @media (max-width: 991px) { } @media (max-width: 767px) { } .tse-eyebrow { display: flex; align-items: center; gap: .7rem; font-family: var(--byq-font-sans); font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; color: color-mix(in srgb, var(--byq-fg) 50%, transparent); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .tse-section { padding-block: clamp(3rem, 7vw, 5.5rem); } .tse-section__head { margin-bottom: clamp(.5rem, 1.2vw, 1rem); } /* the gem's stage reserves 75% extra height for reflections, so its own 3rem block padding doubles up with the section's — zero it here */ /* the Testimonial Slider brings its own section padding */ .tse-section--flush { padding-block: 0; } /* The component's label marker (.circle-label) is an 8px block with a 2px radius, so it reads as a square rather than a dot. Both section labels now stand on their own letterspacing. .master-label is flex with a gap, so display:none collapses the space cleanly. */ .circle-label { display: none; } /* ═══ V2 ═══════════════════════════════════════════════════════════════ 1. a header and a closing section, because the page had no contact route of any kind: no nav, no footer, no email, no form. 2. the testimonial block left-aligned to match every other section. 3. the card's dead zone closed: the component pushes quote and author to opposite ends of a fixed-height column, so a short quote leaves a hole. ═══════════════════════════════════════════════════════════════════════ */ .tse-head { position: fixed; inset: 0 0 auto; z-index: 60; background: linear-gradient(to bottom, rgba(7,7,8,.92), rgba(7,7,8,0)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .tse-head__in { max-width: 96rem; margin-inline: auto; padding: clamp(.9rem,1.8vw,1.3rem) clamp(1.25rem,4vw,3.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .tse-head__mark { font-size: .95rem; font-weight: 700; letter-spacing: -.02em; color: var(--color--light); } .tse-head__nav { display: flex; align-items: center; gap: clamp(1rem,2.4vw,2rem); } .tse-head__nav a { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 500; color: color-mix(in srgb, var(--color--light) 62%, transparent); transition: color .3s ease; } .tse-head__nav a:hover { color: var(--color--light); } @media (max-width: 560px) { .tse-head__nav .is-optional { display: none; } } .tse-contact { padding-block: clamp(4.5rem,11vw,9rem); } .tse-contact__in { max-width: 96rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,5rem); align-items: start; } @media (max-width: 900px) { .tse-contact__in { grid-template-columns: 1fr; } } /* Form. Bottom rules rather than boxes, to match the hairlines used elsewhere on the page; boxed inputs would be the only bordered objects on the site. */ .tse-form { display: flex; flex-direction: column; gap: clamp(1.15rem,2.2vw,1.6rem); } .tse-field { display: flex; flex-direction: column; gap: .5rem; } .tse-field label { font-size: .68rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 500; color: color-mix(in srgb, var(--color--light) 52%, transparent); } .tse-field input, .tse-field select, .tse-field textarea { font: inherit; font-size: 1rem; color: var(--color--light); background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--color--light) 26%, transparent); padding: .55rem 0; border-radius: 0; width: 100%; transition: border-color .3s ease; } .tse-field textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; } .tse-field select { appearance: none; cursor: pointer; } .tse-field select option { background: #141416; color: var(--color--light); } .tse-field input::placeholder, .tse-field textarea::placeholder { color: color-mix(in srgb, var(--color--light) 28%, transparent); } .tse-field :is(input,select,textarea):focus { outline: none; border-bottom-color: var(--color--light); } .tse-field :is(input,textarea):user-invalid { border-bottom-color: #c9645a; } .tse-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .tse-submit { align-self: flex-start; display: inline-flex; align-items: center; gap: .85rem; border: 1px solid color-mix(in srgb, var(--color--light) 40%, transparent); border-radius: 999px; padding: .8rem 1.1rem .8rem 1.5rem; color: var(--color--light); font-size: .95rem; transition: border-color .3s ease, background .3s ease; } .tse-submit:hover:not(:disabled) { border-color: var(--color--light); background: color-mix(in srgb, var(--color--light) 8%, transparent); } .tse-submit:disabled { opacity: .5; cursor: default; } .tse-submit__arrow { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--color--light); color: #070708; display: grid; place-items: center; transition: transform .4s cubic-bezier(.2,.8,.2,1); } .tse-submit:hover:not(:disabled) .tse-submit__arrow { transform: translateX(3px); } .tse-form__status { margin: 0; min-height: 1.25rem; font-size: .9rem; color: color-mix(in srgb, var(--color--light) 62%, transparent); } .tse-form__status[data-state="err"] { color: #d98279; } .tse-contact h2 { font-family: var(--byq-font-sans); font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem,7vw,5rem); line-height: 1.0; letter-spacing: -.028em; margin: 0; } .tse-contact p { margin: clamp(1.25rem,2.5vw,1.75rem) 0 0; max-width: 46ch; font-size: 1.02rem; line-height: 1.5; color: color-mix(in srgb, var(--color--light) 62%, transparent); } .tse-contact__mail { display: inline-block; margin-top: clamp(1.75rem,3.5vw,2.75rem); font-size: clamp(1.1rem,2.6vw,2rem); letter-spacing: -.02em; color: var(--color--light); border-bottom: 1px solid color-mix(in srgb, var(--color--light) 35%, transparent); padding-bottom: .12em; transition: border-color .3s ease; } .tse-contact__mail:hover { border-bottom-color: var(--color--light); } .tse-foot { border-top: 1px solid var(--byq-depth); padding-block: clamp(1.75rem,3.5vw,2.5rem); } .tse-foot__in { max-width: 96rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3.5rem); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: color-mix(in srgb, var(--color--light) 45%, transparent); } .tse-foot__in a { color: inherit; transition: color .3s ease; } .tse-foot__nav { display: flex; flex-wrap: wrap; gap: .6rem 1.15rem; max-width: 46rem; } .tse-foot__in a:hover { color: var(--color--light); } /* 2 — the slider component centres its own heading; the page does not */ .headline-testimonials, .heading-testimonials { text-align: left; align-items: flex-start; } .headline-testimonials { margin-left: 0; } /* 3 — quote and author as one group instead of pushed to opposite ends */ .content-case-long { justify-content: center; grid-row-gap: clamp(1.5rem, 3vw, 2.25rem); grid-column-gap: clamp(1.5rem, 3vw, 2.25rem); } /* ── Testimonial card image well ───────────────────────────────────────── The component fixes this box at 365px tall in a 1fr column, which works out near square — so object-fit:cover was slicing the sides off screenshots that are 1.28:1 and taking the nav and buttons with them. Giving the box the screenshots' own ratio means the whole frame shows and nothing is cut. align-self:start stops the grid stretching it back to the card's height. */ .image-wrap-case-long { height: auto; aspect-ratio: 1072 / 839; align-self: start; } .content-case-long { min-height: 0; } /* ── Testimonial accent ────────────────────────────────────────────────── The whole component runs off ONE token: stat numbers, the label dot, the slider arrows, the "→" and the big blurred glow behind the section. The shipped value is #e45a47 (red). Change the two lines below to restyle the entire section. #FFCD33 / #6B5310 are substituted at build time. */ :root { --_\U0001F3A8-color--base---accent--primary: #F6F3EC; } .bg-circle { background-color: #4A3F2A; opacity: .55; } /* The gem's card box is a square (--cf-w / --cf-h). Websites are 16:10, so the height token is re-stated — these two custom properties are the gem's own published knobs, so this is configuration, not an edit. */ .byq-gem--coverflow-3d-01__stage { --cf-w: min(38rem, 62vw); --cf-h: calc(var(--cf-w) * 0.625); } @media (max-width: 50rem) { .byq-gem--coverflow-3d-01__stage { --cf-w: min(22rem, 80vw); } } /* caption rail — reads the gem's own aria-selected state, touches nothing */ .tse-flowmeta { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: clamp(1.25rem, 3vw, 2rem); padding-top: 1.25rem; border-top: 1px solid var(--byq-depth); } .tse-flowmeta__name { display: block; font-family: var(--byq-font-display); font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.05; letter-spacing: -.02em; } .tse-flowmeta__sub { display: block; margin-top: .35rem; font-size: .9rem; color: color-mix(in srgb, var(--byq-fg) 55%, transparent); } /* Live client work, concept builds and work in progress are not the same claim, so the rail says which is which. */ .tse-status { display: inline-block; margin-left: .75rem; padding: .2em .6em; border: 1px solid color-mix(in srgb, var(--byq-fg) 24%, transparent); border-radius: 999px; font-size: .62rem; font-weight: 500; text-transform: uppercase; letter-spacing: .13em; vertical-align: .12em; color: color-mix(in srgb, var(--byq-fg) 62%, transparent); } .tse-status[data-s="Live"] { color: var(--byq-fg); border-color: color-mix(in srgb, var(--byq-fg) 55%, transparent); } .tse-flowmeta__link { display: inline-flex; align-items: center; gap: .6rem; flex: none; border: 1px solid var(--byq-depth); border-radius: 999px; padding: .7rem 1.15rem; color: var(--byq-fg); text-decoration: none; font-size: .85rem; transition: border-color .3s ease, background .3s ease; } .tse-flowmeta__link:hover { border-color: var(--byq-fg); background: color-mix(in srgb, var(--byq-fg) 6%, transparent); } .tse-section__head p { margin: .65rem 0 0; max-width: 46ch; font-size: .95rem; color: color-mix(in srgb, var(--byq-fg) 55%, transparent); } .tse-section__head h2 { font-family: var(--byq-font-display); font-weight: 400; margin: 0; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.02em; } /* ════════════════════════════════════════════════════════════════════════ INTERIOR PAGE PRIMITIVES The homepage is one long scroll of components. These pages are documents, so they need a reading measure, a heading scale and a handful of blocks. Nothing here restyles a component; it all sits alongside. ════════════════════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; } body.dark { -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } *, *::before, *::after { box-sizing: border-box; } /* ── Page opener ──────────────────────────────────────────────────────── */ .pg-open { padding-block: clamp(8rem, 17vh, 12rem) clamp(3rem, 7vw, 5rem); } .pg-open h1 { font-weight: 700; letter-spacing: -.035em; line-height: .95; font-size: clamp(2.9rem, 9vw, 7rem); text-transform: uppercase; margin: 0; max-width: 18ch; animation: tse-rise .6s cubic-bezier(.16,1,.3,1) both; } .pg-open h1 .mute { color: color-mix(in srgb, var(--color--light) 42%, transparent); } .pg-open .lede { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; max-width: 46ch; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: color-mix(in srgb, var(--color--light) 74%, transparent); animation: tse-rise .6s cubic-bezier(.16,1,.3,1) both; animation-delay: 90ms; } /* ── Generic section ──────────────────────────────────────────────────── */ .pg-sec { padding-block: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid var(--byq-depth); } .pg-sec--plain { border-top: 0; } .pg-sec h2 { font-weight: 700; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(1.9rem, 4.4vw, 3.2rem); margin: 0 0 clamp(1.5rem,3vw,2.25rem); text-transform: uppercase; max-width: 20ch; } .pg-sec h3 { font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.1rem,1.7vw,1.35rem); margin: 0 0 .6rem; } .pg-lab { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 500; color: color-mix(in srgb, var(--color--light) 45%, transparent); margin: 0 0 clamp(1rem,2vw,1.5rem); } /* ── Prose ────────────────────────────────────────────────────────────── */ .prose { max-width: 62ch; } .prose p { margin: 0 0 1.15em; font-size: clamp(1rem,1.35vw,1.1rem); line-height: 1.65; color: color-mix(in srgb, var(--color--light) 78%, transparent); } .prose p.lead { font-size: clamp(1.15rem,1.8vw,1.4rem); color: var(--color--light); line-height: 1.5; } .prose strong { color: var(--color--light); font-weight: 600; } /* ── Two column ───────────────────────────────────────────────────────── */ .pg-two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: clamp(2rem,5vw,4.5rem); align-items: start; } @media (max-width: 860px) { .pg-two { grid-template-columns: 1fr; } } /* ── The offer block ──────────────────────────────────────────────────── */ .offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem,1fr)); gap: clamp(1.25rem,2.5vw,2rem); } .offer__card { border: 1px solid var(--byq-depth); border-radius: var(--byq-radius-lg); padding: clamp(1.5rem,3vw,2.25rem); display: flex; flex-direction: column; gap: 1rem; background: color-mix(in srgb, var(--byq-card) 55%, transparent); } .offer__k { font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; color: color-mix(in srgb, var(--color--light) 48%, transparent); } .offer__p { font-weight: 700; letter-spacing: -.03em; font-size: clamp(2.4rem,5.5vw,3.4rem); line-height: 1; margin: 0; } .offer__p .unit { font-size: .32em; font-weight: 500; letter-spacing: .04em; color: color-mix(in srgb, var(--color--light) 55%, transparent); text-transform: uppercase; margin-left: .35em; } .offer__d { margin: 0; color: color-mix(in srgb, var(--color--light) 74%, transparent); line-height: 1.6; } .offer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .offer li { position: relative; padding-left: 1.35rem; line-height: 1.5; color: color-mix(in srgb, var(--color--light) 76%, transparent); font-size: .97rem; } .offer li::before { content: ""; position: absolute; left: 0; top: .62em; width: .5rem; height: 1px; background: color-mix(in srgb, var(--color--light) 45%, transparent); } /* ── Numbered steps ───────────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem,1fr)); gap: clamp(1.5rem,3vw,2.5rem); } .steps__n { font-size: .72rem; letter-spacing: .16em; font-weight: 500; color: color-mix(in srgb, var(--color--light) 40%, transparent); margin: 0 0 .9rem; } .steps p { margin: 0; color: color-mix(in srgb, var(--color--light) 72%, transparent); line-height: 1.6; } /* ── Typographic index ────────────────────────────────────────────────── */ .idx { border-top: 1px solid var(--byq-depth); } .idx__row { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) auto auto; gap: 1rem clamp(1rem,3vw,2.5rem); align-items: baseline; padding-block: clamp(1rem,2vw,1.5rem); border-bottom: 1px solid var(--byq-depth); transition: opacity .3s ease; } .idx__row:hover { opacity: .62; } .idx__n { font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.05rem,1.8vw,1.45rem); } .idx__m { color: color-mix(in srgb, var(--color--light) 55%, transparent); font-size: .92rem; } .idx__s { font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; border: 1px solid color-mix(in srgb, var(--color--light) 26%, transparent); border-radius: 999px; padding: .22rem .6rem; white-space: nowrap; color: color-mix(in srgb, var(--color--light) 62%, transparent); } .idx__go { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: color-mix(in srgb, var(--color--light) 55%, transparent); white-space: nowrap; } @media (max-width: 720px) { .idx__row { grid-template-columns: 1fr auto; } .idx__m { grid-column: 1 / -1; } .idx__go { display: none; } } /* ── Quotes ───────────────────────────────────────────────────────────── */ .qs { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem,1fr)); gap: clamp(1.5rem,3vw,2.5rem); } .q { display: flex; flex-direction: column; gap: 1rem; } .q__stat { font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.8rem,3.6vw,2.5rem); line-height: 1; margin: 0; } .q__sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: color-mix(in srgb, var(--color--light) 45%, transparent); margin: 0; } .q__t { margin: 0; line-height: 1.6; color: color-mix(in srgb, var(--color--light) 80%, transparent); } .q__a { margin: 0; font-size: .88rem; color: color-mix(in srgb, var(--color--light) 55%, transparent); } /* ── Accordion ────────────────────────────────────────────────────────── */ .acc { border-top: 1px solid var(--byq-depth); max-width: 62rem; } .acc details { border-bottom: 1px solid var(--byq-depth); } .acc summary { cursor: pointer; list-style: none; padding-block: clamp(1rem,2vw,1.4rem); font-weight: 600; letter-spacing: -.015em; font-size: clamp(1rem,1.5vw,1.15rem); display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; } .acc summary::-webkit-details-marker { display: none; } .acc summary::after { content: "+"; color: color-mix(in srgb, var(--color--light) 45%, transparent); font-weight: 400; } .acc details[open] summary::after { content: "\2013"; } .acc .acc__b { padding-bottom: clamp(1rem,2vw,1.5rem); max-width: 62ch; } .acc .acc__b p { margin: 0 0 .9em; line-height: 1.65; color: color-mix(in srgb, var(--color--light) 76%, transparent); } /* ── Buttons ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: .7rem; border: 1px solid color-mix(in srgb, var(--color--light) 40%, transparent); border-radius: 999px; padding: .8rem 1.5rem; font-size: .95rem; transition: border-color .3s ease, background .3s ease; } .btn:hover { border-color: var(--color--light); background: color-mix(in srgb, var(--color--light) 8%, transparent); } .btn--solid { background: var(--color--light); color: #070708; border-color: var(--color--light); font-weight: 600; } .btn--solid:hover { background: #fff; border-color: #fff; } .btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: clamp(1.5rem,3vw,2.25rem); } /* ── Closing band ─────────────────────────────────────────────────────── */ .pg-end { padding-block: clamp(4.5rem,10vw,8rem); border-top: 1px solid var(--byq-depth); } .pg-end h2 { font-size: clamp(2.2rem,6vw,4.4rem); text-transform: uppercase; letter-spacing: -.035em; line-height: .98; margin: 0; max-width: 16ch; } /* ── Journal cards ────────────────────────────────────────────────────── */ .jr { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem,1fr)); gap: clamp(1.5rem,3vw,2.5rem); } .jr__i { display: flex; flex-direction: column; gap: .7rem; padding-top: 1.25rem; border-top: 1px solid var(--byq-depth); transition: opacity .3s ease; } .jr__i:hover { opacity: .65; } .jr__i h3 { margin: 0; line-height: 1.25; } .jr__i p { margin: 0; color: color-mix(in srgb, var(--color--light) 62%, transparent); line-height: 1.55; font-size: .95rem; } @keyframes tse-rise { from { transform: translate3d(0, 40%, 0); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* The weekly price needs a companion line, set quiet so it reads as an aside rather than a second claim. */ .offer__note { margin: -.35rem 0 0; font-size: .9rem; line-height: 1.45; color: color-mix(in srgb, var(--color--light) 52%, transparent); } /* ═══ ENGINEERING FIXES (shared by every page but the homepage, which inlines its own copy). Behaviour only — no type, colour, imagery or layout changes. ═══════════════════════════════════════════════════════════════════════ */ :root { --tse-head-h: 52px; } /* Anchors, scrollIntoView() and the scroll reportValidity() does to reach an invalid field all landed under the fixed header. One property fixes all three. */ html { scroll-padding-top: calc(var(--tse-head-h) + 1.5rem); scroll-behavior: auto; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* .tse-field :is(input,select,textarea):focus sets outline:none and relies on a 1px underline shifting from 26% to 100% white. That is a fine mouse affordance and a poor keyboard one, so :focus-visible gets a real indicator back. It has to match that rule's specificity to win. */ .tse-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--byq-accent-lime, #c5ef57); outline-offset: 3px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--byq-accent-lime, #c5ef57); outline-offset: 3px; border-radius: 3px; } .tse-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; border-radius: var(--byq-radius, .5rem); background: var(--byq-accent-lime, #c5ef57); color: #070708; font-size: .78rem; font-weight: 600; letter-spacing: .04em; transition: top .2s ease; } .tse-skip:focus { top: 1rem; } [tabindex="-1"]:focus { outline: none; } .tse-head__toggle { display: none; } @media (max-width: 560px) { .tse-head__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; margin-right: -10px; background: none; border: 0; padding: 0 9px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tse-head__toggle span { display: block; height: 1.5px; width: 100%; border-radius: 2px; background: var(--color--light, #f6f3ec); transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease; } .tse-head__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .tse-head__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .tse-head__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .tse-head__toggle:focus-visible { outline: 2px solid var(--byq-accent-lime, #c5ef57); outline-offset: 2px; border-radius: 6px; } /* The panel is position:fixed and comes after the button in the DOM, so without this it paints over its own close control. */ .tse-head__toggle { position: relative; z-index: 2; } /* .tse-head carries backdrop-filter, and a backdrop-filter makes an element the containing block for its position:fixed descendants. So `inset: 0` on this panel resolved against the 52px header box, not the viewport: the panel was 52px tall, its background invisible and two of the five links stacked off-screen above. Dropping the header's blur while the menu is open hands the panel back to the viewport — and the blur is not visible anyway while a full-screen panel is covering everything. */ body.tse-menu-open .tse-head { backdrop-filter: none; -webkit-backdrop-filter: none; background: none; } .tse-head__nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(1.25rem, 5vh, 2.25rem); padding: 0 clamp(1.5rem, 8vw, 3rem); background: rgba(7,7,8,.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .28s ease, visibility 0s linear .28s; overscroll-behavior: contain; } body.tse-menu-open .tse-head__nav { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .28s ease, visibility 0s; } .tse-head__nav .is-optional { display: block; } .tse-head__nav a { font-size: 1.05rem; letter-spacing: .1em; color: var(--color--light, #f6f3ec); } .tse-head__nav a[aria-current="page"] { font-weight: 600; } .tse-head { z-index: 70; } .tse-head__in { position: relative; z-index: 2; } } .tse-head__nav a[aria-current="page"] { color: var(--color--light, #f6f3ec); }