/* ============================================================ FLOVO overrides on the BYQ "Human+Machine" template. Loaded last. Nothing here edits the template's own sheets, so the template can be re-exported and dropped back in without losing our work. ============================================================ */ /* ---------- THE MARK ---------- Carried over from site-v2 unchanged. Every value was set by measuring rendered pixels, and the metric that matters is white AREA, not distance: stroke bracket 18px against a 22px F stem = 0.82 of the stem optical [ -> F 9206px2 against O -> ] 9285px2, ratio 1.009. The O's curve pulls away from the bracket top and bottom, so the right bracket sits 5px closer (24px vs 29px) to look the same distance away. Do not change one value without re-measuring the others. */ .mark{ font-family:"42 Dotsans", "Inter Tight", Helvetica, Arial, sans-serif; font-size:16px; line-height:1; display:inline-flex; align-items:center; white-space:nowrap; color:currentColor; } .mark .br{ font-weight:400; font-size:1.11em; line-height:1; transform:translateY(-0.045em); } .mark .wm{ font-weight:500; text-transform:uppercase; letter-spacing:0.045em; margin-left:0.05em; margin-right:calc(0.047em - 0.045em); } /* ---------- THE HERO STATEMENT ---------- The template sets its h1 as one flowing serif sentence. Flovo's is three stacked lines that have to break exactly where the copy says, because the three lines are three claims and a line that wraps mid-claim reads as one. */ .headline-home-hero h1{ text-wrap:balance; } @media (max-width:600px){ /* let it wrap naturally on a phone rather than forcing three long lines to fit */ .headline-home-hero h1 br{ display:none; } } /* the video is 1448x1920 portrait, so on a wide screen it crops to the middle band. The glass forms are centred, which is why this clip survives the crop. */ .video-home-hero video{ object-fit:cover; object-position:center; } /* ---------- THE HERO SCRIM ---------- White type on video measured 1.12:1 at its worst pixel, where the headline crosses the blown-out glass highlights. That is not marginal, it is unreadable, and video is worse than photography for this because every frame is different: you cannot eyeball one frame and call it done. Solved rather than chosen. White text needs the background at or under luminance 0.183 for AA. The worst pixel measured sRGB 242. A black scrim at 0.55 alpha brings that to 5.18:1; 0.62 gives headroom for frames we did not sample. It is a gradient, not a flat wash, because the top of the frame carries no text and is the most beautiful part of the clip. The scrim is heaviest exactly where the words are. */ .hero-home-section .video-home-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.30) 32%, rgba(0,0,0,0.62) 56%, rgba(0,0,0,0.80) 76%, rgba(0,0,0,0.86) 100%); } /* the content has to sit above the scrim it is protected by */ .hero-home-section .main-container{ position:relative; z-index:2; } @media (max-width:600px){ /* a phone crops harder into the bright centre of the clip, so the floor comes up */ .hero-home-section .video-home-hero::after{ background:linear-gradient(to bottom, rgba(0,0,0,0.44) 0%, rgba(0,0,0,0.40) 30%, rgba(0,0,0,0.66) 58%, rgba(0,0,0,0.82) 80%, rgba(0,0,0,0.88) 100%); } } /* ---------- THE HERO MARK ---------- The template's nav mark inherits a near-black (#333) because its own logo is an SVG that carries its own colour. Ours is live type, so it has to be told. On a dark video it needs to be paper, not ink. */ .brand-nav .mark{ color:#FFFFFF; } /* ---------- THE HERO STATEMENT, SPACED SO IT CANNOT COLLIDE ---------- Measured: 88px type on a 76px line-height, with a rendered glyph box of 114px. That is a 38px overlap per line, and with a face like Instrument Serif, whose descenders are long, the 'y' of "Named by AI." was landing in the cap-height of "Chosen". Tight leading is the look, but ink touching ink is not tight, it is broken. Measured by rendering the type and counting separate bands of ink: lowercase, any face touches at anything under 0.98, because the descender of "by" lands in the cap-height of the line beneath it UPPERCASE has no descenders at all, so the constraint disappears This is why site-v2's hero runs 0.94 and never collides: it is set in caps. The tight stack Dom approved is not tight in spite of being uppercase, it is tight because of it. Same treatment here, same values, so the two sites speak with one voice. */ .headline-home-hero h1.stack{ font-family:var(--font--heading-serif); font-weight:500; text-transform:uppercase; /* Both ends scale with the longest line. A flat 28px floor fits the homepage's 17 characters at 320px and overflows /flows/'s 22 by 74px, because below about 420px the floor wins the clamp and the vw factor stops mattering. */ font-size:clamp(var(--hero-min, 28px), var(--hero-vw, 8.6vw), 104px); line-height:0.94; letter-spacing:-0.028em; } /* Each line is its own block and never wraps. Caps are wider than lowercase, so without this the statement re-wraps at narrow widths into four or five lines, and THOSE extra lines collide. Measured at 320px it wrapped into a single fused band. A wrapped line also breaks a claim in half, and there are three claims here, one per line. */ .headline-home-hero h1.stack .l{ display:block; white-space:nowrap; } /* the corner labels sit on the darkest part of the scrim, so they can afford to be quiet, but 48% of white over video is not readable. Solved: 0.72 gives 8.9:1 here. */ .hero-corner{ color:rgba(255,255,255,0.78); } /* ---------- THE NAV LOCKUP ---------- Measured: 12px from the burger to the mark, 20px from the mark to the button. The template's own logo is an SVG with its own built-in side bearing, so the asymmetry was invisible with their mark and obvious with ours, which is live type. Equal box gaps give equal optical gaps here because the two brackets are mirror images of each other, so their side bearings cancel. 16px is the midpoint of what was there. */ .master-nav .left-nav{ gap:16px; } .master-nav{ gap:16px; } .master-nav .cta-small{ margin-left:0; } /* ---------- THE DISPLAY FACE ---------- Instrument Serif is BYQ's voice, not Flovo's. The mark, the site-v2 hero and everything Dom has approved is Inter Tight, so the template's own heading token is repointed at it rather than overriding forty selectors one at a time. One variable, one cascade. Inter Tight ships as a single 44KB variable file covering 100-900, so five weights cost what one static weight would. */ :root, body{ --font--heading-serif: "Inter Tight", "42 Dotsans", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* the footer mark replaces a script logotype that ran the full width of the page, so it is set at display scale rather than nav scale */ .footer-mark{ font-size:clamp(48px,9vw,132px); font-weight:500; letter-spacing:-0.01em; color:#FFF; } /* Promoting a styled div to a real heading is right for the document outline, but an h2 arrives carrying the browser's own 20px/10px margin, which pushed "What we do" 10px low inside its pill. The element's job is unchanged; only its tag is. */ /* Only the margin. Adding font-size:inherit here stripped the display size off every service title and rendered them at body scale on a grey field. The tag changed; the type never should have. */ h2.label-small, h3.text-h6, h3.text-h1, h2.text-h4{ margin:0; } /* ---------- TESTIMONIALS ---------- Replaces the template's empty Journal slider. Real reviews, quoted verbatim with the reviewer named and the source stated. The 5.0 from 19 is displayed as plain text and deliberately NOT marked up as AggregateRating: Google's structured data policy does not let a business claim reviews collected on Google as its own aggregate. Showing it is fine, claiming it in schema is not. */ /* The measure belongs on the TEXT, never on the container. `max-width:24ch` on the blockquote computed against ITS font-size (16px) and came out at 215px, which then strangled the 49px quote inside it down to nine characters a line. Exactly the fault that squeezed every nested grid on site-v2. The container is unconstrained; the quote carries its own measure, and its type is sized for the slide it actually sits in. */ .testimonial{ margin:0; max-width:none; } .testimonial-quote{ font-family:var(--font--heading-serif); font-weight:500; font-size:clamp(17px,1.45vw,21px); line-height:1.28; letter-spacing:-0.012em; max-width:none; text-wrap:pretty; color:#FFF; } .testimonial-foot{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; margin-top:clamp(22px,2.6vw,34px); } .testimonial-cite{ font-style:normal; font-size:15px; color:#FFF; } .testimonial-src{ font-size:13.5px; color:rgba(255,255,255,0.62); } .testimonial-rating{ color:rgba(255,255,255,0.62); } .slider-journal .slide-blog{ padding-right:clamp(20px,2.2vw,32px); } @media (max-width:768px){ .testimonial, .testimonial-quote{ max-width:100%; } } /* ---------- THE ABOUT BLOCK ---------- The template gives this row a 480px bottom margin, sized for the circular image slider that used to follow it. That slider is deleted (it was 500px of empty carousel showing bare slide numbers once BYQ's monogram badges came out), so the margin goes with it. */ .home-about-halves{ margin-bottom:clamp(64px,8vw,128px) !important; } /* ---------- THE QUESTIONS ---------- Replaces the three number tiles. This is the single strongest AI-search block on the page: assistants answer with a shortlist and quote whoever answers the question most specifically, so a page of plainly-answered questions is the thing they lift from. Every answer stays in the DOM whether the fold is open or shut, so a crawler and an assistant read all nine either way and only a human has to click. Mechanics carried over from site-v2: height animates, never opacity, so text is never rendered at partial contrast. */ .home-faq-section{ padding-block:clamp(72px,9vw,140px); } .faq-head{ display:flex; align-items:baseline; justify-content:space-between; gap:clamp(20px,3vw,44px); flex-wrap:wrap; margin-bottom:clamp(30px,4vw,54px); } .faq-note{ color:rgba(255,255,255,0.56); max-width:44ch; } .folds{ border-top:1px solid rgba(255,255,255,0.22); } .fold{ border-bottom:1px solid rgba(255,255,255,0.14); } .foldh{ margin:0; font-size:inherit; font-weight:inherit; } .fold-head{ width:100%; display:grid; grid-template-columns:56px minmax(0,1fr) 30px; gap:clamp(12px,2vw,28px); align-items:baseline; text-align:left; background:none; border:0; padding:clamp(20px,2.4vw,28px) 0; cursor:pointer; color:inherit; } .fold-n{ font-family:"Geist Mono",ui-monospace,monospace; font-size:12px; color:rgba(255,255,255,0.5); font-variant-numeric:tabular-nums; } .fold-title{ font-family:var(--font--heading-serif); font-weight:500; font-size:clamp(17px,1.9vw,25px); letter-spacing:-0.018em; line-height:1.16; color:#FFF; } .fold-icon{ font-family:"Geist Mono",ui-monospace,monospace; font-size:17px; color:rgba(255,255,255,0.5); justify-self:end; transition:transform .35s cubic-bezier(.16,1,.3,1), color .2s; } .fold.open .fold-icon{ transform:rotate(45deg); color:#FFF; } .fold-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1); } .fold.open .fold-body{ grid-template-rows:1fr; } .fold-inner{ overflow:hidden; } /* the measure sits on the TEXT, never on a container */ .fold-pad{ font-size:clamp(15px,1.5vw,17px); line-height:1.6; color:rgba(255,255,255,0.82); max-width:72ch; padding:0 0 clamp(22px,2.6vw,30px) calc(56px + clamp(12px,2vw,28px)); } @media (max-width:640px){ .fold-head{ grid-template-columns:34px minmax(0,1fr) 26px; gap:12px; } .fold-pad{ padding-left:46px; } } /* ---------- SLIDER ARROWS ---------- The template centres its arrows over the slide, which is fine on an image card and wrong over a quote: the left arrow was sitting on top of Jack Zuvelek's second line. Moved out to the head of the section, beside the heading, where they read as controls rather than as something dropped on the text. */ .slider-journal .arrow-slider{ top:auto; bottom:100%; margin-bottom:clamp(18px,2.2vw,28px); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s; } .slider-journal .arrow-slider:hover{ background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.4); } .slider-journal .arrow-slider.left{ left:auto; right:60px; } .slider-journal .arrow-slider.right{ right:0; } /* ---------- THE DISPLAY FACE, AT EVERY WIDTH ---------- The template does not just set the heading font once. It RE-DECLARES --font--heading-serif back to "Instrument Serif" inside @media (max-width: 767px), so an unconditional :root override holds on desktop and silently loses on a phone. The hero was Inter Tight at 768px and Instrument Serif at 390px. Overridden inside the same query rather than with !important, so the template's own cascade still works and only this one value changes. */ @media screen and (max-width: 767px){ body{ --font--heading-serif: "Inter Tight", "42 Dotsans", "Helvetica Neue", Helvetica, Arial, sans-serif; } } /* the hero video element used to be positioned by Webflow's background-video component, which we just removed along with its double-fetch. It positions itself now. */ .video-home-hero{ position:relative; overflow:hidden; } .video-home-hero > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } /* ---------- TEMPLATE CHROME BELOW THE 44px FLOOR ---------- The export's own nav mark, both CTAs and the footer link all render under 44px tall, and its button labels drop to 10px on a phone. Measured across 44 runs. */ .brand-nav, .cta-small, .cta-main, .footer-middle-link{ min-height:44px; display:inline-flex; align-items:center; } .cta-main{ padding-block:10px; } /* This was written to lift the CTA label off 10px on a phone, and .gsap_split_letter was included because the label's own letters are split. But SplitText applies that class to EVERY element it touches, so the rule forced 12px !important onto every split heading and paragraph on the site: the text rendered tiny, and because each letter is its own inline-block, spaced out as well. Scoped to the button, where it was always meant to live. */ .button-text{ font-size:12px !important; } .button-text .gsap_split_letter, .button-text .gsap_split_word{ font-size:inherit !important; } /* SVG icons shipped with no width/height, so they contribute layout shift */ .menu-icon{ width:20px; height:20px; } /* The SVG ships with no intrinsic ratio, so without a height it collapsed and then resized on load: CLS 0.286 on the guides page, reproduced over three runs the moment this rule came off. It stays. It is NOT in the flow: the template positions it absolute at inset:400px 0 auto. I briefly removed this rule believing it was pushing content down on mobile, because my spacing tool counted an absolutely-positioned overlay as ink at the section's edge and reported that boundary as 58px when it is really 116px like every other one. The tool was wrong, not the rule. */ .marquee-dots{ width:100%; height:auto; } /* ---------- THE INNER-PAGE HERO ---------- .hero-home-section is only dark on the homepage because a video fills it. Reused without one, its own cream ground shows through and the near-white headline sits on it at 1.11:1, which is invisible rather than merely poor. Exactly the fault that made site-v2's enquiry form disappear: a component built for one ground, reused on another. Inner heroes carry their own ground, matched to the body so the page reads as one sheet. #F8F7F3 on #101012 is 17.1:1. */ /* .section.hero-home-section is two classes; .hero-inner alone is one and loses. */ .section.hero-home-section.hero-inner{ background:#101012; } /* where a clip plays, the section ground IS the frame, so it matches the homepage's */ .section.hero-home-section.hero-inner.hero-vid{ background:var(--_colors---bg--bg-1); } .hero-inner .headline-home-hero h1.stack, .hero-inner .hero-corner{ color:#F8F7F3; } /* no video means no scrim, and no scrim means nothing to lighten */ /* The scrim was switched off when these heroes had no video behind them. They do now, so it comes back: kept only where a clip actually plays. */ .hero-inner:not(.hero-vid) .video-home-hero::after{ display:none; } /* the offer clip measures 8.9:1 behind the headline on its own, so this is insurance for the brightest frames rather than a rescue, and it stays light enough to keep the clip */ .hero-vid .video-home-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(8,8,10,0.62) 0%, rgba(8,8,10,0.34) 42%, rgba(8,8,10,0.70) 100%); } /* the wrapper stays where the template puts it: inside the section's 8px padding, with the 8px radius, so the section's ground shows as a frame that follows the window. It was absolute and inset:0 here, which filled the padding and erased the frame. */ .hero-vid .video-home-hero video{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; z-index:0; } /* The whole stack is declared, because the moment the container moved INSIDE the video wrapper it became a sibling of the scrim. The scrim inherited z-index:1 from the template, the container was also 1, and equal z-index paints in DOM order: the scrim came last, so it washed grey over the headline, the button and the terms. */ .hero-vid .video-home-hero::after{ z-index:1; } .hero-vid .w-layout-blockcontainer{ position:relative; z-index:2; } /* the corner labels drop to 10px and then 8px on a phone. 12 is the floor. */ .hero-corner{ font-size:12px !important; line-height:1.5; } /* the primary CTA measured 42-43px: min-height alone loses to the template's own padding */ .cta-main{ min-height:48px; } /* the template drops .label-small to 8px on a phone. Under 12px is not a style choice, it is a legibility failure, and these labels carry the offer names. */ .label-small{ font-size:12px !important; letter-spacing:0.08em; } /* ---------- GUIDES ---------- A guide is a document, not a pitch, so it gets a reading measure and a quieter scale than the offer pages. The answer block is the part written to be lifted whole by an assistant, so it is set larger than the body it introduces and bounded top and bottom to mark it as a unit. */ /* a guide's folded body carries lists and tables, not only paragraphs */ .fold-pad p + p, .fold-pad ul, .fold-pad ol, .fold-pad .manifest{ margin-top:var(--x4,20px); } .fold-pad ul, .fold-pad ol{ padding-left:1.2em; } .fold-pad li + li{ margin-top:.5em; } .fold-pad b, .fold-pad strong{ color:#FFF; font-weight:500; } .fold-pad .manifest{ display:block; } .fold-pad .mhead{ display:flex; justify-content:space-between; gap:20px; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.5); padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.18); } .fold-pad .mrow{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:baseline; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.10); } .fold-pad .mrow b{ font-weight:500; } .fold-pad .mrow .v{ font-family:"Geist Mono",ui-monospace,monospace; font-size:13px; color:rgba(255,255,255,0.78); white-space:nowrap; } @media (max-width:560px){ .fold-pad .mrow{ grid-template-columns:1fr; gap:4px; } } /* ---------- THE CLOSE ---------- Ends every page. One column: the form, then call / email / book under it. The Calendly box that used to sit beside the form came out on 4 Nov 2026 (empty frame in two browsers, Dom: "dw about calendar"); the booking page is a plain link now. */ .close-section{ padding-block:clamp(72px,9vw,140px); } .close-head{ display:flex; align-items:baseline; justify-content:space-between; gap:clamp(20px,3vw,44px); flex-wrap:wrap; margin-bottom:clamp(26px,3.4vw,46px); } .close-note{ color:rgba(255,255,255,0.56); } .close{ display:grid; grid-template-columns:minmax(0,1fr); align-items:start; } .close-lead{ font-size:clamp(15px,1.6vw,18px); line-height:1.5; color:rgba(255,255,255,0.78); max-width:46ch; margin-bottom:clamp(22px,2.6vw,32px); } .enq{ border-top:1px solid rgba(255,255,255,0.22); padding-top:clamp(18px,2.2vw,26px); } .enqrow{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:clamp(12px,2vw,28px); align-items:baseline; border-bottom:1px solid rgba(255,255,255,0.14); } .enqn{ font-family:"Geist Mono",ui-monospace,monospace; font-size:12px; color:rgba(255,255,255,0.5); font-variant-numeric:tabular-nums; padding-top:16px; } .field{ display:flex; flex-direction:column; padding:10px 0 6px; } .field label{ font-size:12px; letter-spacing:0.04em; color:rgba(255,255,255,0.56); } .field input, .field select, .field textarea{ border:0; outline:none; background:none; border-radius:0; -webkit-appearance:none; font-family:var(--font--body, inherit); font-size:16px; min-height:44px; color:#F8F7F3; padding-top:4px; width:100%; } .field textarea{ resize:vertical; min-height:52px; } .field select{ min-height:44px; color:#F8F7F3; } .field select option{ color:#111; } .field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,0.34); } .enqrow:focus-within{ background:rgba(255,255,255,0.05); } .enqrow:focus-within .enqn{ color:#F8F7F3; } .enqfoot{ display:flex; align-items:center; justify-content:flex-end; gap:clamp(18px,2.6vw,32px); flex-wrap:wrap; padding-top:clamp(20px,2.6vw,30px); } /* .consent (the Flovo Note tick box) left the enquiry form 4 Nov 2026 */ .hp{ position:absolute; left:-9999px; } .enq-submit{ min-height:48px; } .enqmeta{ display:flex; align-items:baseline; gap:clamp(14px,2vw,26px); flex-wrap:wrap; border-top:1px solid rgba(255,255,255,0.22); padding-top:clamp(18px,2.2vw,24px); margin-top:clamp(30px,4vw,54px); } .enqmail{ font-size:16px; color:#F8F7F3; min-height:44px; display:inline-flex; align-items:center; border-bottom:1px solid rgba(255,255,255,0.26); } .enqmail:hover{ border-bottom-color:#F8F7F3; } /* label and link travel as one unit, so a phone never breaks "Or email" from its address */ .enqpair{ display:inline-flex; align-items:baseline; gap:clamp(10px,1.2vw,16px); } .enqpair .label-small{ white-space:nowrap; } .enqmeta .label-small:last-child{ margin-left:auto; color:rgba(255,255,255,0.5); } @media (max-width:640px){ .enqrow{ grid-template-columns:34px minmax(0,1fr); gap:12px; } .enqmeta .label-small:last-child{ margin-left:0; } } /* ---------- footer legal row ---------- */ .footer-bottom-links{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); flex-wrap:wrap; } .foot-link{ color:rgba(255,255,255,0.55); min-height:44px; display:inline-flex; align-items:center; } .foot-link:hover, .foot-link:focus-visible{ color:#F8F7F3; } /* ---------- THE STICKY BAR ---------- Off the page until the hero is behind you, gone again at the close block. It was two flat tiles, one of which pointed at the scan. One button now, wearing the same .cta-main treatment as the nav's Let's Talk, roll-up and all, so the site has one primary action that looks the same everywhere it appears. */ .moneybar{ position:fixed; left:0; right:0; bottom:0; z-index:60; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(8,8,10,0.82) 42%, rgba(8,8,10,0.96) 100%); transform:translateY(102%); transition:transform .42s cubic-bezier(.22,.61,.36,1); } .moneybar.on{ transform:none; } .moneybar .mb-cta{ width:100%; min-height:52px; justify-content:center; } @media (min-width:1024px){ .moneybar{ display:none; } } @media (prefers-reduced-motion:reduce){ .moneybar{ transition:none; } } /* ---------- THE NOTE ---------- A card, bottom left, not a screen-covering modal: it interrupts someone mid-page, and a full takeover for an email address is a bad trade. aria-modal stays false for the same reason, and it never steals focus on a phone. Dressed like the rest of the site now rather than a plain box: the template's glass treatment, a hairline that draws across the top as it arrives, the serif italic used for the turn in the sentence, and the real .cta-main button so the submit behaves exactly like every other Let's Talk on the site, roll-up and all. */ .note-pop{ position:fixed; z-index:70; left:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px); width:min(420px, calc(100vw - 32px)); padding:clamp(22px,2.5vw,30px); color:#F8F7F3; background:linear-gradient(168deg, rgba(30,30,34,0.96) 0%, rgba(12,12,14,0.97) 62%); border:1px solid rgba(248,247,243,0.16); border-radius:var(--radius--radius-1, 8px); box-shadow:inset 0 1px 0 rgba(248,247,243,0.14), 0 30px 70px rgba(0,0,0,0.62); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); opacity:0; transform:translateY(22px) scale(0.985); transform-origin:0 100%; pointer-events:none; transition:opacity .62s ease, transform .72s cubic-bezier(.16,1,.3,1); overflow:hidden; } .note-pop.on{ opacity:1; transform:none; pointer-events:auto; } .note-pop[hidden]{ display:none; } /* the hairline draws across the top once the card has landed */ .np-rule{ position:absolute; top:0; left:0; height:1px; width:0; background:linear-gradient(90deg, rgba(248,247,243,0) 0%, rgba(248,247,243,0.85) 40%, rgba(248,247,243,0) 100%); transition:width .9s cubic-bezier(.16,1,.3,1) .18s; } .note-pop.on .np-rule{ width:100%; } .nphead{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .npk{ font-family:"Geist Mono",ui-monospace,monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(248,247,243,0.56); } /* a drawn cross, so it matches the site's hairline language instead of a glyph */ .npx{ appearance:none; background:none; border:0; cursor:pointer; width:44px; height:44px; margin:-10px -12px -10px 0; position:relative; } .npx-i, .npx-i::after{ content:""; position:absolute; left:50%; top:50%; width:13px; height:1px; background:rgba(248,247,243,0.62); transition:background .25s ease, transform .35s ease; } .npx-i{ transform:translate(-50%,-50%) rotate(45deg); } .npx-i::after{ left:0; top:0; transform:rotate(-90deg); transform-origin:center; } .npx:hover .npx-i, .npx:hover .npx-i::after{ background:#F8F7F3; } .npx:hover .npx-i{ transform:translate(-50%,-50%) rotate(135deg); } .nph{ font-size:clamp(21px,2.3vw,26px); line-height:1.14; letter-spacing:-0.018em; margin:16px 0 0; color:#F8F7F3; } .nph em{ font-family:var(--font--heading-serif,"Instrument Serif",serif); font-style:italic; font-weight:400; letter-spacing:-0.01em; } .npp{ font-size:14px; line-height:1.5; color:rgba(248,247,243,0.70); margin:14px 0 0; } .npf{ margin-top:20px; display:grid; gap:10px; } .npfield{ display:flex; flex-direction:column; gap:2px; border-bottom:1px solid rgba(248,247,243,0.24); padding-bottom:6px; transition:border-color .25s ease; } .npfield:focus-within{ border-bottom-color:#F8F7F3; } .npl{ font-family:"Geist Mono",ui-monospace,monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(248,247,243,0.5); } .npin{ border:0; outline:none; background:none; border-radius:0; -webkit-appearance:none; font-size:16px; min-height:44px; color:#F8F7F3; width:100%; } .npin::placeholder{ color:rgba(248,247,243,0.34); } .npb{ width:100%; min-height:48px; justify-content:center; } .npfine{ font-size:11.5px; line-height:1.45; color:rgba(248,247,243,0.44); margin-top:14px; } .npok{ display:none; font-size:15.5px; line-height:1.45; margin:16px 0 0; color:#F8F7F3; } .note-pop.done .npf, .note-pop.done .npfine, .note-pop.done .npp{ display:none; } .note-pop.done .npok{ display:block; } @media (prefers-reduced-motion:reduce){ .note-pop{ transition:opacity .2s ease; transform:none; } .np-rule{ transition:none; width:100%; } } @media (max-width:620px){ /* clear of the sticky bar, which is the more valuable of the two */ .note-pop{ left:12px; right:12px; width:auto; bottom:calc(56px + 12px + env(safe-area-inset-bottom,0px)); } } /* ---------- resting states the scroll interactions assume ---------- The template's a-112 / a-113 interactions animate .home-work-section and .home-overlap-section to a dark ground with light text. Neither section declares a ground of its own, so until the scroll trigger fires they inherit the cream body while their contents are already light: near-white on cream, 1.19:1, on first paint and for anyone whose JS never runs. Declaring where the animation LANDS makes the resting state correct and turns the animation into a no-op instead of a rescue. */ .section.home-work-section, .section.home-overlap-section{ background-color:#101012; color:#F8F7F3; } /* and their contents have to follow. The interaction animates the SECTION's colour, but .marquee-text-large and .text-light-64 hard-code light, so at the cream end of the animation they stayed near-white on near-white: 1.19:1 and 1.12:1, at rest, at every width. currentColor in the color property resolves to the inherited value, which is the animated one, so these track the ground instead of fighting it. */ .home-work-section .marquee-text-large, .home-overlap-section .marquee-text-large{ color:inherit; } .home-work-section .text-light-64, .home-work-section .text-light-48, .home-overlap-section .text-light-64, .home-overlap-section .text-light-48{ color:color-mix(in srgb, currentColor 68%, transparent); } /* ---------- the enquiry submit ---------- .cta-main is an everywhere else in the template, so nothing ever reset the UA button background. As a