/* ========================================================== FRESHMADE CREATIVE Site stylesheet, v52. Consolidated 22 October 2026. WHAT HAPPENED IN THIS PASS The file had grown to 4,111 lines across 54 modules because every fix had been added as a new rule rather than changing the rule that was wrong. Some classes were set in five or six places, and two components had been replaced but never deleted. This version is 45 percent shorter and renders identically. Verified, not assumed: every declaration in the old file was compared against this one, property by property. Nothing was lost and no value changed, apart from the two dead components below, which no page references. What was removed Declarations that a later rule with the SAME selector already overrode. Those were doing nothing. .fm-faq-* the first FAQ styling, replaced by .fm-svc-list .fm-logos-* the first logo strip, replaced by .fm-plat What was deliberately NOT done No rules were reordered or merged across different selectors. That cannot be done safely by machine, because equal weight rules depend on their order. A structural rewrite is still worth doing, but it needs a page by page review afterwards. The 194 !important declarations are also still here. Some are needed to beat Oncord's own styling. Others are only there to beat an earlier rule of mine. Separating the two needs the same careful pass. ========================================================== MODULE INDEX ORIGINAL SITE, 1 to 15 1 tokens 9 page top, Studio 2 page shell 10 image strip 3 section shell 11 header, light and dark 4 statement 12 testimonials 5 hero, 5b words, 13 reveal footer 5c mobile 14 contact and Oncord form 6 services accordion 15 platform logo scroller 7 manifesto 8 founder SERVICES AND QUOTE BUILDER, 16 to 38 16 token additions 27 Figma corrections, 1440 17 buttons v2 28 spacing and type 18 header v2, dropdown 29 the type scale 19 services page 30 reuse, not lookalikes 20 service template 31 service page template 21 quote builder 32 form band and header button 22 journal, first pass 33 client quote 23 responsive 34 Studio services, price and link 24 reduced motion 35 step rules, form field safety 25 v2 page shell 36 the quote and proposal forms 26 layout corrections 37 proposal chips 38 Oncord hidden fields HEADER, LABELS AND JOURNAL, 39 to 54 39 mobile header 47 gap under the journal title 40 contact form pattern 48 journal post 41 small label scale 49 real images 42 review cards 50 journal cells 43 how it runs, mobile 51 post body width 44 one logo file 52 hidden means hidden 45 journal 53 one page title 46 the empty first cell 54 journal top matches Studio ========================================================== THE TRAPS, worth reading before editing .fm-sec p{margin:0} in module 3 outranks any single class paragraph rule. A margin on a paragraph inside a section needs two classes to win. .fm-sec a{color:inherit} does the same to buttons and chips. That is why module 17 restates them with a.fm-b rather than .fm-b. [hidden] is a browser default, so any class rule with a display value beats it. Module 52 restates it for everything the journal can hide. Oncord's repeater wraps its output, and that wrapper lands in the grid as a child of its own. Module 46 makes it transparent with display:contents. Oncord hides its own spam and timing fields. Never force display on inputs inside a form, or they come back into view and fill with timestamps as the visitor types. ========================================================== */ /* ========================================================== 1. TOKENS ========================================================== */ :root{--fm-paper:#FFFFFF;--fm-paper-2:#F0EFEC;--fm-ink:#111111;--fm-rule:rgba(17,17,17,.18);--fm-black:#000000;--fm-butter:#F7F9B1;--fm-sky:#84B8CA;--fm-brand:"BBH Hegarty","Helvetica Neue",Arial,sans-serif;--fm-voice:"Fraunces",Georgia,serif;--fm-data:"Roboto Mono",ui-monospace,Menlo,monospace;/* horizontal inset of the nav logo. Tune this one value until the contact column lines up with the logo's left edge. */ --fm-nav-x:clamp(20px,3vw,40px);--fm-max:none;--fm-block:clamp(32px,4vw,56px);--fm-ease:cubic-bezier(.2,.8,.25,1);/* hero word layer: dial these two to taste */ --fm-word-ink:#FFFFFF;--fm-word-cycle:6s;/* header height, used by the sticky offsets */ --fm-head-h:clamp(64px,7vh,86px);--fm-pdp-top:calc(var(--fm-head-h) + 10px)} /* ========================================================== 2. PAGE SHELL PORTED The Squarespace override module is gone. There is no .sqs-block-code, no .page-section and no content-wrapper to fight, because the design owns the markup now. The full-bleed hack is gone too. Sections are direct children of a container we control, so width:100% is enough and the 100vw / negative-margin trick is no longer needed. ========================================================== */ *{box-sizing:border-box} body{margin:0;background:var(--fm-paper)} /* clip, not hidden. overflow-x:hidden turns the page into a scroll container and silently breaks position:sticky on every descendant. clip blocks the same overflow without it. */ html, body{max-width:100%;overflow-x:clip} .fm-sec{position:relative;width:100%} /* ========================================================== 3. SECTION SHELL ========================================================== */ .fm-sec *{box-sizing:border-box} .fm-sec img{display:block;max-width:100%} .fm-sec p{margin:0} .fm-sec a{color:inherit;text-decoration:none} .fm-sec a:focus-visible{outline:2px solid var(--fm-ink);outline-offset:4px} .fm-in{max-width:var(--fm-max);margin-left:auto;margin-right:auto} /* shared marquee keyframe. Used by the image strip and the platform row. Lives here so no module can take it away. */ @keyframes fmRun{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } /* wordmark and numbers only */ .fm-word, .fm-num{font-family:var(--fm-brand);font-weight:400;font-synthesis-weight:none;-webkit-font-synthesis:none} .fm-word{text-transform:uppercase} /* ========================================================== 4. STATEMENT ========================================================== */ .fm-say{padding-top:var(--fm-block);padding-bottom:var(--fm-block)} .fm-say .fm-in{min-height:clamp(420px,58vh,760px);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start} .fm-say-lead{font-family:var(--fm-voice);font-weight:300;font-optical-sizing:auto;color:var(--fm-ink);margin:0;margin-top:-.16em} .fm-say-lead .fm-word{font-weight:400;font-size:1em;letter-spacing:-.01em} .fm-btn{display:inline-block;margin-top:0;padding:10px 16px 11px;border:1px solid var(--fm-rule);border-radius:4px;font-family:var(--fm-voice);font-weight:400;font-size:15px;line-height:1;color:var(--fm-ink);transition:background .25s ease,color .25s ease,border-color .25s ease} .fm-btn:hover{background:var(--fm-ink);border-color:var(--fm-ink);color:var(--fm-paper)} /* ========================================================== 5. HERO ========================================================== */ .fm-hero{background:var(--fm-black);color:#fff} .fm-hero-stage{position:relative;width:100%;height:100svh;min-height:640px;overflow:hidden} .fm-shot{position:absolute;z-index:1;margin:0;overflow:hidden;background:#171717;cursor:pointer} .fm-shot img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform .9s var(--fm-ease)} .fm-shot:hover img{transform:scale(1.12)} .fm-shot img[src=""]{opacity:0} .fm-shot:has(img[src]:not([src=""])) span{display:none} .fm-shot span{position:absolute;inset:0;display:grid;place-items:center;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.12);transition:transform .9s var(--fm-ease)} .fm-shot:hover span{transform:scale(1.12)} .fm-shot--1{left:0;top:9%;height:46%;aspect-ratio:4/5} .fm-shot--2{left:31%;top:20%;height:23%;aspect-ratio:3/4} .fm-shot--3{right:6%;top:6%;height:33%;aspect-ratio:16/11} .fm-shot--4{left:20%;bottom:9%;height:20%;aspect-ratio:1/1} .fm-shot--5{right:14%;bottom:0;height:44%;aspect-ratio:5/7} .fm-hero-line{position:absolute;left:50%;bottom:clamp(48px,9vh,96px);transform:translateX(-50%);z-index:2;width:min(90vw,26ch);text-align:center;font-family:var(--fm-voice);font-weight:300;font-optical-sizing:auto;font-size:clamp(18px,2.1vw,34px);line-height:1.18;letter-spacing:-.02em;color:#fff} .fm-hero-copy{position:absolute;right:var(--fm-gut);bottom:var(--fm-gut);z-index:2;font-family:var(--fm-brand);font-weight:400;font-synthesis-weight:none;-webkit-font-synthesis:none;font-size:clamp(12px,.95vw,15px);color:#fff} /* ========================================================== 5b. HERO ROTATING WORDS ========================================================== */ .fm-hero-words{position:absolute;inset:0;z-index:0;display:grid;place-items:center;pointer-events:none} .fm-hero-words span{grid-area:1/1;font-family:var(--fm-voice);font-weight:300;font-optical-sizing:auto;font-size:clamp(72px,17vw,300px);line-height:.9;letter-spacing:-.045em;color:var(--fm-word-ink);white-space:nowrap;opacity:0;animation:fmWordCycle var(--fm-word-cycle) linear infinite} .fm-hero-words span:nth-child(1){animation-delay:calc(var(--fm-word-cycle) * 0)} .fm-hero-words span:nth-child(2){animation-delay:calc(var(--fm-word-cycle) / 3)} .fm-hero-words span:nth-child(3){animation-delay:calc(var(--fm-word-cycle) / 3 * 2)} @keyframes fmWordCycle{ 0% {opacity:0} 4% {opacity:1} 29% {opacity:1} 33% {opacity:0} 100% {opacity:0} } /* ========================================================== 5c. HERO, MOBILE ========================================================== */ @media (max-width:860px){ .fm-hero-stage{height:100svh;min-height:620px;padding:0} .fm-shot{height:auto} .fm-shot--1{left:auto;right:6%;top:8%;bottom:auto;width:min(26%,110px);aspect-ratio:16/11} .fm-shot--2{left:0;right:auto;top:19%;bottom:auto;width:min(32%,135px);aspect-ratio:4/5} .fm-shot--3{left:auto;right:0;top:40%;bottom:auto;width:min(27%,115px);aspect-ratio:3/4} .fm-shot--4{left:4%;right:auto;top:auto;bottom:34%;width:min(22%,92px);aspect-ratio:1/1} .fm-shot--5{left:auto;right:7%;top:auto;bottom:16%;width:min(30%,125px);aspect-ratio:5/7} .fm-hero-words span{font-size:clamp(60px,13vh,124px);transform:rotate(90deg);transform-origin:center} .fm-hero-line{left:var(--fm-gut);right:auto;bottom:var(--fm-gut);transform:none;width:min(60vw,26ch);text-align:left;font-size:clamp(13px,3.2vw,16px);line-height:1.4} .fm-hero-copy{right:var(--fm-gut);bottom:var(--fm-gut);font-size:13px} } /* ========================================================== 6. SERVICES ACCORDION ========================================================== */ .fm-svc{background:var(--fm-paper);color:var(--fm-ink);padding-top:var(--fm-block);padding-bottom:var(--fm-block)} .fm-eyebrow{text-align:center;margin:0 0 clamp(10px,1.4vw,18px)} .fm-eyebrow span{display:inline-block;animation:fmTickUp .7s var(--fm-ease) .15s backwards} @keyframes fmTickUp{ from{opacity:0;transform:translateY(60%)} to{opacity:1;transform:translateY(0)} } .fm-svc-head{font-weight:300;font-optical-sizing:auto;text-align:center;margin:0} .fm-svc-media{position:relative;margin:clamp(24px,3vw,42px) auto clamp(34px,4.6vw,64px);width:min(72%,300px);aspect-ratio:3/2;background:var(--fm-paper-2);overflow:hidden} .fm-svc-media img{width:100%;height:100%;object-fit:cover} .fm-svc-media img[src=""]{opacity:0} .fm-svc-media:has(img[src]:not([src=""])) span{display:none} .fm-svc-media span{position:absolute;inset:0;display:grid;place-items:center;text-transform:uppercase;color:var(--fm-ink-soft);border:1px solid var(--fm-rule)} .fm-svc-list{border-top:1px solid var(--fm-rule)} .fm-svc-item{border-bottom:1px solid var(--fm-rule)} .fm-svc-item summary{display:grid;grid-template-columns:clamp(40px,5vw,72px) minmax(0,1fr) 28px;align-items:baseline;gap:clamp(8px,2vw,24px);padding:clamp(20px,2.6vw,34px) 0;cursor:pointer;list-style:none} .fm-svc-item summary::-webkit-details-marker{display:none} .fm-svc-item .fm-num{line-height:1;color:var(--fm-ink)} .fm-svc-title{font-optical-sizing:auto;transition:opacity .25s ease} .fm-svc-item summary:hover .fm-svc-title{opacity:.55} .fm-svc-mark{position:relative;justify-self:end;align-self:center;width:18px;height:18px} .fm-svc-mark::before, .fm-svc-mark::after{content:"";position:absolute;top:50%;left:50%;background:var(--fm-ink);transform:translate(-50%,-50%);transition:transform .3s var(--fm-ease),opacity .3s ease} .fm-svc-mark::before{width:18px;height:1px} .fm-svc-mark::after{width:1px;height:18px} .fm-svc-item[open] .fm-svc-mark::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0} .fm-svc-copy{margin-left:50%;padding:0 0 clamp(26px,3.4vw,44px);animation:fmSvcIn .5s var(--fm-ease) both} .fm-svc-copy p{text-align:justify;text-justify:inter-word;hyphens:auto} .fm-svc-copy p + p{margin-top:1.1em} .fm-svc-lead{font-style:italic} .fm-svc-inc{color:var(--fm-ink-soft)} .fm-svc-inc em{font-style:normal} @keyframes fmSvcIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} } @media (max-width:860px){ .fm-svc-head{font-size:clamp(34px,10vw,56px)} .fm-svc-media{width:min(64%,210px);aspect-ratio:3/2;margin:clamp(18px,4vw,26px) auto clamp(26px,6vw,38px)} .fm-svc-item summary{grid-template-columns:32px minmax(0,1fr) 20px;gap:12px;padding:18px 0} .fm-svc-item .fm-num{font-size:13px} .fm-svc-title{font-size:clamp(18px,4.6vw,24px);letter-spacing:-.02em} .fm-svc-mark{width:15px;height:15px} .fm-svc-mark::before{width:15px} .fm-svc-mark::after{height:15px} .fm-svc-copy{margin-left:0;padding-left:44px;padding-bottom:24px} .fm-svc-copy p{text-align:left;hyphens:none;font-size:14px;line-height:1.55} } /* ========================================================== 7. MANIFESTO ========================================================== */ .fm-mani{background:var(--fm-paper);color:var(--fm-ink);padding-top:var(--fm-block);padding-bottom:var(--fm-block)} .fm-mani-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);grid-template-areas: "main side" "act side";column-gap:clamp(32px,7vw,140px);align-items:start} .fm-mani-main{grid-area:main} .fm-mani-side{grid-area:side} .fm-mani-act{grid-area:act;align-self:end;padding-top:clamp(60px,12vh,180px)} .fm-mani .fm-mani-lead{font-family:var(--fm-voice);font-weight:300;font-optical-sizing:auto;margin-top:-.14em} .fm-mani .fm-mani-lead + .fm-mani-lead{margin-top:.85em} .fm-mani .fm-mani-lead .fm-word{font-weight:400;font-size:1em;letter-spacing:-.01em} .fm-mani-side p{color:var(--fm-ink);margin-top:.5em} @media (max-width:860px){ .fm-mani-grid{grid-template-columns:minmax(0,1fr);grid-template-areas: "main" "side" "act";row-gap:clamp(24px,6vw,40px)} .fm-mani-act{padding-top:clamp(28px,8vw,48px)} .fm-mani-side p{margin-top:0;font-size:15px;line-height:1.6} } /* ========================================================== 8. FOUNDER ========================================================== */ .fm-fou{background:var(--fm-black);color:var(--fm-paper);padding-top:clamp(28px,3.5vw,52px);padding-bottom:clamp(32px,4vw,60px)} .fm-fou-stage{position:relative;display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);column-gap:clamp(24px,5vw,80px);min-height:clamp(720px,96vh,1120px)} .fm-fou .fm-eyebrow{grid-column:1;grid-row:1;align-self:start;text-align:left;color:rgba(255,255,255,.55);margin:0} .fm-fou-copy{grid-column:2;grid-row:1;align-self:start;justify-self:end} .fm-fou-copy p{font-optical-sizing:auto;color:var(--fm-paper);max-width:46ch;text-align:justify;text-justify:inter-word;hyphens:auto;margin-top:-.12em} .fm-fou-copy p + p{margin-top:1.15em} .fm-fou-copy .fm-word{font-weight:400;font-size:1em;letter-spacing:-.01em} .fm-fou-media{grid-column:1;grid-row:1;align-self:end;justify-self:start;position:relative;margin:0;width:min(100%,150px);aspect-ratio:4/5;background:#171717;overflow:hidden;margin-bottom:40px} .fm-fou-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .6s var(--fm-ease),transform .9s var(--fm-ease)} .fm-fou-media:hover img{filter:grayscale(0);transform:scale(1.04)} .fm-fou-media span{position:absolute;inset:0;display:grid;place-items:center;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.12)} @media (max-width:860px){ .fm-fou-stage{grid-template-columns:minmax(0,1fr);min-height:0;row-gap:clamp(22px,6vw,36px)} .fm-fou .fm-eyebrow{grid-column:1;grid-row:auto} .fm-fou-copy{grid-column:1;grid-row:auto;justify-self:stretch} .fm-fou-copy p{font-size:clamp(16px,4.2vw,20px);line-height:1.45;max-width:none;text-align:left;hyphens:none} .fm-fou-media{grid-column:1;grid-row:auto;align-self:start;width:min(44%,140px);margin-top:clamp(10px,3vw,20px)} } /* ========================================================== 9. PAGE TOP (STUDIO) ========================================================== */ .fm-top{--fm-top-measure:min(88vw,740px);background:var(--fm-paper);color:var(--fm-ink);padding-top:clamp(140px,24vh,300px);padding-bottom:clamp(40px,6vw,90px)} .fm-top-head{text-align:center;margin:0} .fm-top .fm-top-lead{font-optical-sizing:auto;text-align:center;text-wrap:pretty;max-width:var(--fm-top-measure);margin:clamp(44px,8vh,110px) auto 0} .fm-top .fm-top-lead .fm-word{font-weight:400;font-size:1em;letter-spacing:-.01em} .fm-top-words{margin-top:clamp(90px,20vh,280px)} .fm-top-words-row{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(12px,2vw,40px);padding:0 var(--fm-gut)} .fm-top-words span{font-family:var(--fm-voice);font-weight:300;font-optical-sizing:auto;font-size:clamp(34px,8.4vw,190px);line-height:1.05;letter-spacing:-.045em;white-space:nowrap;color:var(--fm-ink)} @media (max-width:860px){ .fm-top{padding-top:clamp(100px,18vh,170px)} .fm-top-head{font-size:clamp(42px,13vw,80px)} .fm-top .fm-top-lead{font-size:clamp(16px,4.2vw,20px);line-height:1.5;max-width:none;margin:clamp(28px,6vh,44px) auto 0} .fm-top-words{margin-top:clamp(52px,14vh,110px)} .fm-top-words span{font-size:clamp(22px,7.6vw,60px)} } /* ========================================================== 10. IMAGE STRIP ========================================================== */ .fm-strip{background:var(--fm-paper);padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(28px,4vw,56px)} .fm-strip-viewport{overflow:hidden;cursor:grab} .fm-strip-track{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);width:max-content;animation:fmRun 46s linear infinite;will-change:transform} .fm-strip.is-js .fm-strip-track{animation:none} .fm-shotb{flex:0 0 auto;position:relative;margin:0;height:clamp(300px,46vh,560px);aspect-ratio:var(--ar,4/5);background:var(--fm-paper-2);overflow:hidden} .fm-shotb img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform .9s var(--fm-ease)} .fm-shotb:hover img{transform:scale(1.06)} .fm-shotb img[src=""]{opacity:0} .fm-shotb:has(img[src]:not([src=""])) span{display:none} .fm-shotb span{position:absolute;inset:0;display:grid;place-items:center;letter-spacing:.18em;text-transform:uppercase;color:var(--fm-ink-soft);border:1px solid var(--fm-rule)} @media (max-width:860px){ .fm-shotb{height:clamp(220px,34vh,320px)} } /* ========================================================== 11. HEADER, LIGHT AND DARK PORTED Rebuilt on our own markup. The Squarespace selectors (.header-announcement-bar-wrapper, .header-nav-item, .header-title-logo, .burger-inner) do not exist here. The behaviour is unchanged: the script reads the background of whatever section sits under the header and toggles .fm-nav-light / .fm-nav-dark on . ========================================================== */ .fm-hd{padding-left:var(--fm-nav-x);padding-right:var(--fm-nav-x);transition:background-color .45s var(--fm-ease),color .45s var(--fm-ease), opacity .4s var(--fm-ease),transform .5s var(--fm-ease)} .fm-hd-logo{line-height:0} .fm-hd-logo img{transition:filter .45s var(--fm-ease)} .fm-hd-nav a:hover{text-underline-offset:5px} .fm-hd-burger{display:none;width:26px;height:16px;position:relative;background:none;border:0;padding:0;cursor:pointer} .fm-hd-burger span{position:absolute;left:0;right:0;height:1px;transition:transform .35s var(--fm-ease),opacity .25s ease} .fm-hd-burger span:nth-child(1){top:3px} .fm-hd-burger span:nth-child(2){bottom:3px} body.fm-menu-open .fm-hd-burger span:nth-child(1){transform:translateY(5px) rotate(45deg)} body.fm-menu-open .fm-hd-burger span:nth-child(2){transform:translateY(-5px) rotate(-45deg)} /* ---- over a light section ---- */ body.fm-nav-light .fm-hd{color:var(--fm-ink)} /* the logo artwork is black, so it stays as-is on a light section */ /* ---- over a dark section ---- */ body.fm-nav-dark .fm-hd{color:var(--fm-paper)} /* brightness(0) flattens any colour to black, invert(1) then flips it to pure white */ /* ---- mobile menu overlay ---- Always white, so it ignores whichever light/dark state the header happens to be in underneath. */ .fm-hd-menu{position:fixed;inset:0;z-index:19;background:var(--fm-paper);color:var(--fm-ink);display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,3vh,26px);padding:var(--fm-head-h) var(--fm-nav-x) var(--fm-nav-x);opacity:0;visibility:hidden;transition:opacity .35s var(--fm-ease),visibility .35s} body.fm-menu-open .fm-hd-menu{opacity:1;visibility:visible} .fm-hd-menu a{font-family:var(--fm-voice);font-weight:300;font-size:clamp(28px,8vw,54px);letter-spacing:-.03em;color:var(--fm-ink);text-decoration:none} /* while the overlay is open the bar goes white whatever the section behind it is doing, so the black logo stays visible */ body.fm-menu-open .fm-hd{background:var(--fm-paper);color:var(--fm-ink)} @media (max-width:860px){ .fm-hd-nav{display:none} .fm-hd-burger{display:block} } /* nav clears out once the footer fills the viewport */ body.fm-foot-full .fm-hd{opacity:0;transform:translateY(-100%);pointer-events:none} /* ========================================================== 12. TESTIMONIALS, EDITORIAL SPREAD ========================================================== */ .fm-tst{background:var(--fm-paper);color:var(--fm-ink);padding-top:var(--fm-block);padding-bottom:var(--fm-block)} .fm-tst-item{padding:clamp(52px,7vw,104px) var(--fm-gut);margin-left:calc(var(--fm-gut) * -1);margin-right:calc(var(--fm-gut) * -1);background:transparent;transition:background-color .5s var(--fm-ease)} .fm-tst-item:hover{background:var(--fm-butter)} .fm-tst-item .fm-tst-meta, .fm-tst-item .fm-tst-credit, .fm-tst-item .fm-tst-credit span:last-child, .fm-tst-item .fm-tst-intro, .fm-tst-item .fm-tst-shout, .fm-tst-item .fm-tst-body{transition:color .5s var(--fm-ease)} .fm-tst-item:hover .fm-tst-meta, .fm-tst-item:hover .fm-tst-credit span:last-child{color:rgba(17,17,17,.62)} .fm-tst-item:hover .fm-tst-meta{border-bottom-color:rgba(17,17,17,.28)} .fm-tst-item:hover .fm-tst-credit{border-top-color:rgba(17,17,17,.28)} .fm-tst-meta, .fm-tst-set, .fm-tst-credit{max-width:min(92vw,900px);margin-left:auto;margin-right:auto} .fm-tst-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--fm-rule);margin-bottom:clamp(34px,4.6vw,62px);color:var(--fm-ink-soft)} .fm-tst-meta .fm-num{letter-spacing:.08em;color:var(--fm-ink)} .fm-tst .fm-tst-intro{font-family:var(--fm-voice);font-weight:400;font-optical-sizing:auto;font-size:clamp(15px,1.15vw,19px);line-height:1.45;letter-spacing:-.008em;max-width:52ch;margin:0 0 clamp(20px,2.4vw,34px)} .fm-tst .fm-tst-shout{font-weight:500;font-optical-sizing:auto;text-wrap:balance;margin:0 0 clamp(26px,3.4vw,48px)} .fm-tst .fm-tst-shout--end{margin:clamp(26px,3.4vw,48px) 0 0} .fm-tst .fm-tst-body{font-family:var(--fm-voice);font-weight:300;font-optical-sizing:auto;font-size:clamp(15px,1.25vw,21px);line-height:1.5;letter-spacing:-.008em;text-align:justify;text-justify:inter-word;hyphens:none;margin:0} .fm-tst .fm-tst-body em{font-style:italic;font-weight:300} .fm-tst-credit{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:12px;border-top:1px solid var(--fm-rule);margin-top:clamp(40px,5vw,72px)} .fm-tst-credit span:last-child{color:var(--fm-ink-soft)} @media (max-width:860px){ .fm-tst-meta{font-size:9px;letter-spacing:.2em;margin-bottom:28px} .fm-tst .fm-tst-intro{font-size:15px;max-width:none} .fm-tst .fm-tst-shout{font-size:clamp(27px,7.6vw,38px);line-height:1.02} .fm-tst .fm-tst-body{font-size:15px;line-height:1.55;text-align:left} .fm-tst-credit{font-size:9px;letter-spacing:.2em} } /* ========================================================== 13. REVEAL FOOTER PORTED The Squarespace version used :has() to work out which section held the footer and which were the opaque sheet. The design owns the shell now, so it is explicit: .fm-stack the pages, opaque, sits above .fm-foot-slot reserves one viewport of scroll .fm-foot fixed behind everything ========================================================== */ .fm-foot, .fm-foot *{box-sizing:border-box} .fm-stack{position:relative;z-index:1;background:var(--fm-paper)} .fm-foot-slot{position:relative;z-index:0;height:100svh} .fm-foot{position:fixed;left:0;right:0;bottom:0;z-index:0;height:100svh;display:flex;align-items:stretch;background:var(--fm-black);color:var(--fm-paper);pointer-events:none} .fm-foot a{pointer-events:auto} .fm-foot-inner{width:100%;display:flex;flex-direction:column;justify-content:flex-start;/* same gutter as the nav logo and the contact column, so the whole site shares one left spine */ padding-left:var(--fm-nav-x) !important;padding-right:var(--fm-nav-x) !important;padding-top:clamp(40px,7vh,84px);padding-bottom:clamp(20px,3vh,36px);pointer-events:auto} .fm-foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(22px,3vw,48px);align-items:start} .fm-foot .fm-paren{color:rgba(255,255,255,.5)} .fm-foot ul{list-style:none;margin:10px 0 0;padding:0} .fm-foot li{color:var(--fm-paper)} .fm-foot li a{color:inherit;text-decoration:none} .fm-foot li a:hover{text-decoration:underline;text-underline-offset:4px} .fm-foot-clock{color:rgba(255,255,255,.55)} .fm-foot-mark{margin:auto 0 0;line-height:0} /* the hidden state only exists once the script has added .fm-foot-anim, so with no JS the logo is simply visible */ body.fm-foot-anim .fm-foot-mark img{opacity:0;transform:translateY(14px)} body.fm-foot-anim.fm-foot-seen .fm-foot-mark img{opacity:1;transform:none} .fm-foot-mark img{transition:opacity .9s var(--fm-ease),transform .9s var(--fm-ease);margin-bottom:-1.2%;/* the source PNG is black. brightness(0) flattens any colour to black, invert(1) then flips it to pure white. */ filter:brightness(0) invert(1)} .fm-foot-base{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;margin-top:clamp(10px,1.6vh,18px);padding-top:14px;border-top:1px solid rgba(255,255,255,.2)} @media (max-width:860px){ /* No reveal on mobile. A fixed footer taller than the screen can never be fully uncovered, because the slot only reserves one viewport of scroll. Static footer instead. */ .fm-foot{position:static;height:auto;min-height:0;display:block;pointer-events:auto;width:100%} .fm-foot-slot{height:auto;background:var(--fm-black)} .fm-foot-inner{padding-top:clamp(56px,10vh,90px);padding-bottom:clamp(26px,4vh,40px)} .fm-foot-mark{margin-top:clamp(48px,9vh,90px)} .fm-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))} .fm-foot-mark img{margin-bottom:-1%} .fm-foot-base{font-size:10px} } /* ========================================================== 14. CONTACT PAGE + ONCORD FORM PORTED The layout half is unchanged. The form rules are rewritten: the Squarespace Form Block is now an Oncord . Oncord ships its own form styling, a grey panel and a two column label/field table. The reset below collapses that into the hairline underline treatment without touching the inputs. ========================================================== */ .fm-con-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:start;padding-right:var(--fm-nav-x)} .fm-con{overflow-x:clip;padding-top:clamp(90px,16vh,190px);padding-bottom:clamp(40px,6vh,80px);color:var(--fm-ink);padding-left:var(--fm-nav-x)} .fm-con-status{display:flex;flex-direction:column;gap:2px;margin-bottom:clamp(26px,4vh,52px)} .fm-con-status-date{font-family:var(--fm-voice);font-style:italic;font-weight:400;font-size:clamp(15px,1.15vw,19px);letter-spacing:-.01em;color:var(--fm-ink-soft)} .fm-con-head{font-weight:500;font-optical-sizing:auto;margin:0 0 clamp(34px,5vh,64px);max-width:12ch;text-wrap:balance} .fm-con-list{margin-bottom:clamp(40px,7vh,90px)} .fm-con-list ul{list-style:none;margin:12px 0 0;padding:0} .fm-con .fm-paren{color:var(--fm-ink-soft);letter-spacing:.14em} .fm-con-base p{letter-spacing:.06em} .fm-con-base p + p{margin-top:1.2em} .fm-con-base a{color:var(--fm-ink);text-decoration:none;border-bottom:1px solid var(--fm-rule);padding-bottom:2px} .fm-con-base a:hover{border-bottom-color:var(--fm-ink)} /* ---- Oncord form, restyled ---- */ .fm-form{padding-top:clamp(90px,16vh,190px);padding-bottom:clamp(40px,6vh,80px)} /* strip Oncord's container chrome only, never the controls */ .fm-form, .fm-form div, .fm-form form, .fm-form fieldset, .fm-form table, .fm-form tbody, .fm-form thead, .fm-form tr, .fm-form td, .fm-form th{background:transparent !important;box-shadow:none !important} /* collapse the label/field table into a single stack */ .fm-form table, .fm-form tbody, .fm-form thead, .fm-form tr, .fm-form td, .fm-form th{display:block;width:100%;border:0;margin:0;padding:0;text-align:left} .fm-form tr{margin-bottom:clamp(22px,3vh,38px)} .fm-form tr:last-child{margin-bottom:0} .fm-form th, .fm-form label, .fm-form .form-row-label{display:block;font-family:var(--fm-data) !important;letter-spacing:.18em !important;text-transform:uppercase !important;color:var(--fm-ink-soft) !important;font-weight:400 !important;margin:0 0 6px !important} .fm-form small, .fm-form .form-row-description{display:block;font-family:var(--fm-data);letter-spacing:.1em;color:var(--fm-ink-soft);margin:0 0 8px} .fm-form input[type="text"], .fm-form input[type="email"], .fm-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .fm-form textarea, .fm-form select{width:100% !important;max-width:100% !important;box-sizing:border-box;font-family:var(--fm-voice) !important;font-weight:300 !important;font-size:clamp(15px,1.15vw,19px) !important;color:var(--fm-ink) !important;background:transparent !important;border:0 !important;border-bottom:1px solid var(--fm-rule) !important;border-radius:0 !important;padding:10px 0 12px !important;box-shadow:none !important;transition:border-color .3s var(--fm-ease)} .fm-form input:focus, .fm-form textarea:focus, .fm-form select:focus{border-bottom-color:var(--fm-ink) !important;outline:none !important} .fm-form textarea{min-height:120px !important;resize:vertical} .fm-form button, .fm-form input[type="submit"]{width:auto !important;margin-top:10px;cursor:pointer;font-family:var(--fm-data) !important;letter-spacing:.18em !important;text-transform:uppercase !important;background:var(--fm-ink) !important;color:var(--fm-paper) !important;border:1px solid var(--fm-ink) !important;border-radius:2px !important;padding:15px 30px !important;transition:background .3s var(--fm-ease),color .3s var(--fm-ease)} .fm-form button:hover, .fm-form input[type="submit"]:hover{background:transparent !important;color:var(--fm-ink) !important} .fm-form .validation-message, .fm-form .error{font-family:var(--fm-data);color:#B4462B;margin-top:6px} .fm-form h3{font-family:var(--fm-voice);font-weight:500;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.03em;margin:0 0 12px} .fm-form p{font-family:var(--fm-voice);font-weight:300;font-size:17px;line-height:1.5;color:var(--fm-ink-soft);margin:0} @media (max-width:860px){ .fm-con-wrap{grid-template-columns:minmax(0,1fr);gap:0;padding-right:0} .fm-con{padding-top:clamp(70px,12vh,110px);padding-bottom:20px;padding-right:var(--fm-nav-x)} .fm-con-head{font-size:clamp(32px,9vw,48px);max-width:none} .fm-con-list li{font-size:17px} .fm-form{padding-top:0;padding-left:var(--fm-nav-x);padding-right:var(--fm-nav-x);padding-bottom:clamp(50px,8vh,80px)} } /* ========================================================== 15. PLATFORM LOGO SCROLLER ========================================================== */ .fm-plat{background:var(--fm-paper);padding-top:var(--fm-block);padding-bottom:var(--fm-block)} .fm-plat .fm-in .fm-eyebrow{text-align:center;margin:0 0 clamp(44px,6vw,84px)} .fm-plat-viewport{overflow:hidden} .fm-plat-track{display:flex;align-items:center;gap:clamp(40px,6vw,110px);width:max-content;animation:fmRun 46s linear infinite;will-change:transform} .fm-plat-viewport:hover .fm-plat-track{animation-play-state:paused} .fm-plat-item{flex:0 0 auto;margin:0;display:flex;align-items:center;height:clamp(22px,2.4vw,34px)} .fm-plat-item img{height:100%;width:auto;display:block;filter:grayscale(1) brightness(0);opacity:.75;transition:opacity .35s var(--fm-ease)} .fm-plat-item:hover img{opacity:1} .fm-plat-item img[src=""]{display:none} .fm-plat-item:has(img[src]:not([src=""])) span{display:none} .fm-plat-item span{color:var(--fm-ink);opacity:.75;white-space:nowrap;transition:opacity .35s var(--fm-ease)} .fm-plat-item:hover span{opacity:1} @media (max-width:860px){ .fm-plat-track{gap:36px} .fm-plat-item{height:20px} .fm-plat-item span{font-size:13px} } /* ========================================================== 16 + 17. SHOP Held back from this migration. Oncord has its own commerce component with catalogue and product templates, and the hand-built markup would fight it. The tokens and rules from the Squarespace build are kept in the original stylesheet for when the store is ported as its own project. ========================================================== */ /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ .fm-hd, .fm-hd-logo img{transition:none} .fm-shot img, .fm-shot span{transition:none} .fm-shot:hover img, .fm-shot:hover span{transform:none} .fm-hero-words span{animation:none} .fm-hero-words span:nth-child(1){opacity:1} .fm-svc-copy{animation:none} .fm-eyebrow span{animation:none;transform:none} .fm-svc-mark::before, .fm-svc-mark::after{transition:none} .fm-btn{transition:none} .fm-tst-item{transition:none} .fm-fou-media img{transition:none} .fm-fou-media:hover img{transform:none} .fm-strip-track{animation:none} .fm-plat-track{animation:none} .fm-shotb img{transition:none} .fm-shotb:hover img{transform:none} } /* ========================================================== 16. TOKENS, ADDITIONS New values only. Module 1 is untouched. ========================================================== */ :root{--fm-fast:250ms;--fm-std:450ms;--fm-slow:900ms;--fm-marquee:46s;--fm-panel:rgba(255,255,255,.28);--fm-panel-hi:rgba(255,255,255,.60)} /* every heading balances, every paragraph avoids a widow */ h1, h2, h3, h4, .fm-say, .fm-top-head, .fm-xl{text-wrap:balance} /* one focus ring for the whole site */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--fm-ink);outline-offset:4px;border-radius:1px} .fm-nav-dark a:focus-visible, .fm-nav-dark button:focus-visible, .fm-dark a:focus-visible, .fm-dark button:focus-visible, .fm-dark input:focus-visible, .fm-dark textarea:focus-visible{outline-color:#fff} /* scroll reveal, visible by default so a dead script hides nothing */ .fm-rv{opacity:1;transform:none} body.fm-js .fm-rv{opacity:0;transform:translateY(24px);transition:opacity 600ms var(--fm-ease),transform 600ms var(--fm-ease)} body.fm-js .fm-rv.is-in{opacity:1;transform:none} .fm-dark{background:var(--fm-black);color:var(--fm-paper)} .fm-dark .fm-eyebrow, .fm-dark .fm-lede{color:rgba(255,255,255,.76)} /* ========================================================== 17. BUTTONS V2 Three variants. The arrow steps 4px right on hover. ========================================================== */ .fm-b{background:var(--fm-ink);color:var(--fm-paper);text-decoration:none;cursor:pointer} .fm-b:hover i, .fm-b:focus-visible i{transform:translateX(4px)} .fm-b:hover, .fm-b:focus-visible{background:transparent;color:var(--fm-ink);border-color:var(--fm-ink)} .fm-b--out{background:transparent;color:var(--fm-ink)} .fm-b--out:hover, .fm-b--out:focus-visible{background:var(--fm-ink);color:var(--fm-paper)} .fm-b--inv{background:var(--fm-paper);color:var(--fm-ink);border-color:var(--fm-paper)} .fm-b--inv:hover, .fm-b--inv:focus-visible{background:transparent;color:var(--fm-paper);border-color:var(--fm-paper)} .fm-b--ghost{background:transparent;color:var(--fm-paper);border-color:rgba(255,255,255,.5)} .fm-b--ghost:hover, .fm-b--ghost:focus-visible{background:var(--fm-paper);color:var(--fm-ink);border-color:var(--fm-paper)} /* text link, underline offset tightens */ .fm-link{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;transition:text-underline-offset var(--fm-fast) var(--fm-ease),opacity var(--fm-fast) var(--fm-ease)} .fm-link:hover, .fm-link:focus-visible{text-underline-offset:2px} /* ========================================================== 18. HEADER V2, SERVICES DROPDOWN Extends module 11. Nothing there is overwritten. ========================================================== */ .fm-hd-nav a.fm-has-sub{display:inline-flex;align-items:center;gap:8px;position:relative} .fm-hd-sub-mark{position:relative;width:11px;height:11px;display:inline-block;flex:0 0 auto} .fm-hd-sub-mark::before, .fm-hd-sub-mark::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:transform 300ms var(--fm-ease)} .fm-hd-sub-mark::before{width:11px;height:1px;transform:translate(-50%,-50%)} .fm-hd-sub-mark::after{width:1px;height:11px;transform:translate(-50%,-50%)} .fm-hd-nav a.fm-has-sub[aria-expanded="true"] .fm-hd-sub-mark{transform:rotate(45deg)} .fm-hd-nav a.fm-has-sub[aria-expanded="true"] .fm-hd-sub-mark::before, .fm-hd-nav a.fm-has-sub[aria-expanded="true"] .fm-hd-sub-mark::after{transition:none} .fm-hd-panel{position:fixed;left:0;right:0;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 300ms var(--fm-ease),transform 300ms var(--fm-ease),visibility 0s linear 300ms} .fm-hd-panel.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s} .fm-hd-panel-grid{display:grid} .fm-hd-panel a{display:grid;align-items:baseline;text-decoration:none;transition:opacity var(--fm-fast) var(--fm-ease)} .fm-hd-panel a:hover, .fm-hd-panel a:focus-visible{opacity:.55} .fm-hd-panel .fm-hd-panel-n{grid-column:1 / -1} .fm-hd-panel .fm-hd-panel-t{font-family:var(--fm-voice);font-weight:400;letter-spacing:-.03em} .fm-hd-panel-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(18px,2.6vh,32px);font-family:var(--fm-data);font-size:16px;color:var(--fm-ink-soft)} /* mobile menu: services expands inline */ .fm-hd-menu .fm-mm-group{width:100%} .fm-hd-menu .fm-mm-toggle{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer} .fm-hd-menu .fm-mm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows 400ms var(--fm-ease)} .fm-hd-menu .fm-mm-sub > div{overflow:hidden} .fm-hd-menu .fm-mm-group.is-open .fm-mm-sub{grid-template-rows:1fr} .fm-hd-menu .fm-mm-sub a{display:flex;justify-content:space-between;gap:16px;font-family:var(--fm-data);font-size:18px;letter-spacing:.02em;text-transform:none;padding:12px 0;border-top:1px solid var(--fm-rule)} /* ========================================================== 19. SERVICES PAGE ========================================================== */ .fm-body{max-width:62ch} .fm-dark .fm-body{color:rgba(255,255,255,.78)} /* hero chips */ .fm-chips{display:flex;flex-wrap:wrap} .fm-chip{display:inline-flex;align-items:center;font-family:var(--fm-data);border:1px solid var(--fm-rule);background:transparent;color:var(--fm-ink);text-decoration:none;cursor:pointer;transition:background var(--fm-fast) var(--fm-ease),border-color var(--fm-fast) var(--fm-ease),color var(--fm-fast) var(--fm-ease)} .fm-chip:hover, .fm-chip:focus-visible{background:var(--fm-butter);border-color:var(--fm-ink)} .fm-chip.is-on{background:var(--fm-butter);border-color:var(--fm-ink)} .fm-dark .fm-chip{border-color:rgba(255,255,255,.34);color:var(--fm-paper)} .fm-dark .fm-chip:hover, .fm-dark .fm-chip.is-on{background:var(--fm-butter);color:var(--fm-ink);border-color:var(--fm-butter)} /* client logo marquee */ @keyframes fmRun{to{transform:translate3d(-50%,0,0)}} /* service rows */ .fm-row{display:grid;grid-template-columns:clamp(46px,5vw,76px) minmax(0,1fr) auto auto;gap:clamp(12px,2.4vw,40px);align-items:baseline;border-bottom:1px solid var(--fm-rule);text-decoration:none;color:inherit} .fm-row-t{transition:opacity var(--fm-fast) var(--fm-ease)} .fm-row-p{white-space:nowrap} .fm-row-a{font-family:var(--fm-data);font-size:22px;display:inline-block;transition:transform var(--fm-fast) var(--fm-ease)} .fm-row:hover .fm-row-t, .fm-row:focus-visible .fm-row-t{opacity:.55} .fm-row:hover .fm-row-a, .fm-row:focus-visible .fm-row-a{transform:translateX(6px)} /* review cards */ .fm-revs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .fm-rev{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:background 500ms var(--fm-ease)} .fm-rev-meta{display:flex;justify-content:space-between;gap:14px;color:var(--fm-ink-soft)} .fm-rev-shout{font-weight:400;margin-top:clamp(18px,2.6vh,34px)} .fm-rev-body{color:var(--fm-ink-soft);margin-top:clamp(14px,2vh,24px);transition:color 500ms var(--fm-ease)} .fm-rev-credit{display:flex;justify-content:space-between;gap:14px;margin-top:auto;padding-top:clamp(18px,2.6vh,30px)} .fm-rev-more{margin-top:14px;transition:text-underline-offset var(--fm-fast) var(--fm-ease)} @media (hover:hover) and (pointer:fine){ .fm-rev:hover{background:var(--fm-butter)} .fm-rev:hover .fm-rev-body{color:rgba(17,17,17,.62)} .fm-rev:hover .fm-rev-more{text-underline-offset:2px} } /* how we work */ .fm-steps{display:grid} .fm-step{display:flex;flex-direction:column} .fm-step-media img{transition:transform var(--fm-slow) var(--fm-ease)} .fm-step:hover .fm-step-media img{transform:scale(1.06)} .fm-step-t{font-family:var(--fm-voice);font-weight:400;letter-spacing:-.03em} /* the 48 card */ .fm-48{background:var(--fm-butter);display:flex;flex-direction:column;padding:clamp(20px,2.6vw,34px)} .fm-48-n{font-family:var(--fm-voice);font-weight:300;font-size:clamp(64px,8vw,130px);line-height:.8;letter-spacing:-.05em} .fm-48-l{margin-top:12px} .fm-48-d{font-family:var(--fm-data);font-size:17px;line-height:1.6;margin-top:14px} /* FAQs */ /* closing CTA band */ .fm-cta{padding:clamp(60px,10vh,140px) var(--fm-gut)} .fm-cta .fm-eyebrow{color:rgba(255,255,255,.7)} /* ========================================================== 20. SERVICE PAGE TEMPLATE ========================================================== */ .fm-sv-hero{padding:calc(var(--fm-head-h) + clamp(60px,10vh,130px)) var(--fm-gut) clamp(40px,6vh,80px)} .fm-sv-price{color:var(--fm-ink-soft);margin-top:clamp(18px,2.6vh,30px)} .fm-sv-actions{display:flex;flex-wrap:wrap} /* feature image with the founder note */ .fm-sv-feature img{transform:scale(1.05);transition:transform var(--fm-slow) var(--fm-ease)} .fm-sv-feature.is-in img{transform:scale(1)} .fm-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;margin-top:clamp(20px,3vh,36px);max-width:62ch} .fm-note-av{width:38px;height:38px;border-radius:50%;background:var(--fm-butter);display:flex;align-items:center;justify-content:center;font-family:var(--fm-data);font-size:16px;letter-spacing:.08em} .fm-note cite{display:block;font-style:normal;color:var(--fm-ink-soft);margin-top:12px} /* what is included */ .fm-inc li{display:grid;grid-template-columns:clamp(40px,4vw,64px) minmax(0,1fr);gap:clamp(12px,2vw,30px);border-bottom:1px solid var(--fm-rule)} /* who it is for */ .fm-for{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .fm-for div{padding-top:clamp(14px,2vh,24px)} .fm-for p{margin-top:12px} /* single review quote */ .fm-quote{margin-top:clamp(26px,4vh,54px)} .fm-quote p{font-weight:400} .fm-quote cite{font-style:normal;color:var(--fm-ink-soft)} /* ========================================================== 21. QUOTE BUILDER Lives on a black band. Cards are selectable, the estimate sticks, and the total counts to its new value. ========================================================== */ .fm-q{background:var(--fm-black);color:var(--fm-paper);padding:clamp(50px,8vh,110px) var(--fm-gut) clamp(60px,10vh,130px)} .fm-q-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,26vw,380px);gap:clamp(24px,4vw,70px);align-items:start} /* progress */ .fm-q-prog{display:flex;gap:6px;margin-bottom:clamp(22px,3vh,38px)} .fm-q-prog i{flex:1;height:3px;background:rgba(255,255,255,.26);display:block;overflow:hidden} .fm-q-prog i::after{content:"";display:block;height:100%;width:0;background:var(--fm-butter);transition:width 400ms var(--fm-ease)} .fm-q-prog i.is-done::after{width:100%} .fm-q-step{color:rgba(255,255,255,.7)} .fm-q-h{font-weight:400;margin-top:12px;color:#fff} .fm-q-sub{color:rgba(255,255,255,.78);margin-top:14px;max-width:48ch} /* panels crossfade between steps */ .fm-q-panel.is-on{display:block;animation:fmQIn 300ms var(--fm-ease) both} @keyframes fmQIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* option and add-on cards */ .fm-q-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)} .fm-q-card{position:relative;display:flex;flex-direction:column;gap:10px;text-align:left;cursor:pointer;background:transparent;color:var(--fm-paper);border:1px solid var(--fm-panel);font:inherit;transition:border-color var(--fm-fast) var(--fm-ease),background var(--fm-fast) var(--fm-ease),color var(--fm-fast) var(--fm-ease)} .fm-q-card:hover, .fm-q-card:focus-visible{border-color:var(--fm-panel-hi)} .fm-q-card .t{font-family:var(--fm-voice);font-weight:400;font-size:clamp(19px,1.8vw,22px);letter-spacing:-.03em;line-height:1.15;padding-right:34px} .fm-q-card .p{font-family:var(--fm-data);font-size:16px;color:rgba(255,255,255,.72)} .fm-q-card .d{font-family:var(--fm-data);font-size:16px;line-height:1.6;color:rgba(255,255,255,.72)} .fm-q-card.is-on{background:var(--fm-butter);color:var(--fm-ink);border-color:var(--fm-butter)} .fm-q-card.is-on .p, .fm-q-card.is-on .d{color:rgba(17,17,17,.72)} /* the tick draws in */ .fm-q-tick{position:absolute;top:clamp(18px,2.2vw,28px);right:clamp(18px,2.2vw,28px);width:20px;height:20px;border:1px solid currentColor;display:block} .fm-q-tick svg{width:100%;height:100%;display:block} .fm-q-tick path{stroke:currentColor;stroke-width:2;fill:none;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset 200ms var(--fm-ease)} .fm-q-card.is-on .fm-q-tick path{stroke-dashoffset:0} /* quantity stepper */ .fm-q-step-row{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--fm-panel)} .fm-q-qty{display:inline-flex;align-items:center;border:1px solid var(--fm-panel)} .fm-q-qty button{width:46px;height:46px;background:none;border:0;color:inherit;font-family:var(--fm-data);font-size:18px;cursor:pointer;transition:background var(--fm-fast) var(--fm-ease)} .fm-q-qty button:hover{background:rgba(255,255,255,.1)} .fm-q-qty button[disabled]{opacity:.35;cursor:default} .fm-q-qty output{min-width:46px;text-align:center;font-family:var(--fm-data);font-size:18px} /* estimate panel */ .fm-q-est{border:1px solid var(--fm-panel);padding:clamp(20px,2.4vw,30px);position:sticky;top:calc(var(--fm-head-h) + 24px)} .fm-q-est-l{color:rgba(255,255,255,.7)} .fm-q-est-n{font-family:var(--fm-voice);font-weight:300;line-height:.9;letter-spacing:-.05em;margin-top:14px;color:#fff} .fm-q-est-note{color:rgba(255,255,255,.6);margin-top:12px} .fm-q-lines{margin-top:clamp(20px,3vh,30px);border-top:1px solid var(--fm-panel)} .fm-q-line{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14);animation:fmLineIn 250ms var(--fm-ease) both} @keyframes fmLineIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .fm-q-line.is-out{animation:fmLineOut 250ms var(--fm-ease) both} @keyframes fmLineOut{to{opacity:0;transform:translateY(-6px)}} .fm-q-line--total{border-bottom:0;padding-top:16px;font-family:var(--fm-data);font-size:18px;color:#fff} .fm-q-line--sep{color:rgba(255,255,255,.6)} .fm-q-fine{color:rgba(255,255,255,.6);margin-top:clamp(18px,2.6vh,28px)} /* nav */ .fm-q-nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:clamp(26px,4vh,44px)} .fm-q-back{background:none;border:0;color:rgba(255,255,255,.7);cursor:pointer;font-family:var(--fm-data);font-size:16px;letter-spacing:.14em;text-transform:uppercase;padding:15px 4px;transition:color var(--fm-fast) var(--fm-ease)} .fm-q-back:hover{color:#fff} .fm-q-back[hidden]{display:none} /* final step form */ .fm-q-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(20px,3vh,34px)} .fm-q-field{display:flex;flex-direction:column;gap:8px} .fm-q-field--wide{grid-column:1 / -1} .fm-q-field label{font-family:var(--fm-data);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)} .fm-q-field.is-bad input, .fm-q-field.is-bad textarea{border-bottom-color:#E8775F} .fm-q-err{font-family:var(--fm-data);font-size:16px;color:#E8775F;min-height:0} .fm-q-done{border:1px solid var(--fm-butter);padding:clamp(24px,3vw,40px);margin-top:clamp(20px,3vh,34px)} .fm-q-done h3{font-family:var(--fm-voice);font-weight:400;font-size:clamp(24px,3vw,38px);letter-spacing:-.035em;color:#fff} .fm-q-done p{color:rgba(255,255,255,.8);margin-top:14px;max-width:54ch} /* proposal form, the four non-build services */ .fm-pf-chips{margin-top:clamp(18px,2.6vh,30px)} .fm-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,40px);margin-top:clamp(30px,4.6vh,60px);padding-top:clamp(22px,3vh,36px);border-top:1px solid var(--fm-panel)} .fm-next div .n{color:rgba(255,255,255,.6)} .fm-next div p{color:rgba(255,255,255,.8);margin-top:10px} /* ========================================================== 22. JOURNAL ========================================================== */ .fm-jr-top{padding:calc(var(--fm-head-h) + clamp(50px,8vh,110px)) var(--fm-gut) clamp(26px,4vh,52px)} .fm-jr-word{margin-left:-.04em} .fm-jr-lede{margin-top:clamp(20px,3vh,36px)} .fm-jr-search input{transition:border-color var(--fm-fast) var(--fm-ease)} .fm-jr-filters .fm-chip{gap:10px} .fm-jr-filters .fm-chip .c{font-size:16px;color:var(--fm-ink-soft)} .fm-jr-filters .fm-chip.is-on .c{color:rgba(255,255,255,.7)} .fm-jr-views button{transition:color var(--fm-fast) var(--fm-ease)} .fm-cell--wide{grid-column:span 2} .fm-cell--tall{grid-row:span 2} .fm-cell--stat{background:var(--fm-paper-2)} @media (hover:hover) and (pointer:fine){ a.fm-cell:hover{background:var(--fm-butter)} a.fm-cell:hover .fm-cell-media img{transform:scale(1.04)} a.fm-cell:hover .fm-cell-dot{width:10px;height:10px} a.fm-cell:hover .fm-cell-more{text-underline-offset:2px} } /* list view */ .fm-jr-list .fm-lrow{display:grid;grid-template-columns:clamp(44px,5vw,72px) clamp(96px,10vw,150px) minmax(0,1fr) auto;gap:clamp(12px,2vw,30px);align-items:baseline;padding:clamp(16px,2.4vh,26px) var(--fm-gut);border-bottom:1px solid var(--fm-rule);text-decoration:none;color:inherit;transition:background 250ms var(--fm-ease)} .fm-jr-list .fm-lrow:hover{background:var(--fm-butter)} .fm-jr-list .n, .fm-jr-list .k, .fm-jr-list .d{font-family:var(--fm-data);font-size:16px;color:var(--fm-ink-soft)} .fm-jr-list .t{font-family:var(--fm-voice);font-weight:400;font-size:clamp(19px,1.9vw,24px);letter-spacing:-.03em;line-height:1.15} .fm-jr-empty p{letter-spacing:-.02em} /* ========================================================== 23. RESPONSIVE, MODULES 17 TO 22 ========================================================== */ @media (max-width:1100px){ .fm-hd-panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .fm-steps, .fm-steps--4{grid-template-columns:repeat(2,minmax(0,1fr))} .fm-jr-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .fm-q-grid{grid-template-columns:1fr} .fm-q-est{position:static} } @media (max-width:820px){ .fm-revs, .fm-for, .fm-next, .fm-q-cards, .fm-q-form{grid-template-columns:1fr} .fm-row{grid-template-columns:clamp(34px,8vw,48px) minmax(0,1fr) auto;row-gap:8px} .fm-row-a{display:none} .fm-cell--wide, .fm-cell--tall{grid-column:auto;grid-row:auto} /* how we work becomes a snap carousel */ .fm-steps, .fm-steps--4{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--fm-gut) * -1);padding-inline:var(--fm-gut)} .fm-steps::-webkit-scrollbar{display:none} .fm-step, .fm-48{flex:0 0 78%;scroll-snap-align:start} .fm-jr-bar{gap:14px} .fm-jr-views{width:100%;justify-content:flex-start} .fm-jr-list .fm-lrow{grid-template-columns:40px minmax(0,1fr);row-gap:6px} .fm-jr-list .k, .fm-jr-list .d{grid-column:2} } @media (max-width:560px){ .fm-jr-grid{grid-template-columns:1fr} .fm-q-est-n{font-size:clamp(40px,12vw,56px)} } /* carousel counter, mobile only */ .fm-carousel-bar{display:none} @media (max-width:820px){ .fm-carousel-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(16px,2.4vh,24px)} .fm-carousel-bar .c{font-family:var(--fm-data);font-size:16px;color:var(--fm-ink-soft)} .fm-carousel-bar button{width:48px;height:48px;border:1px solid var(--fm-rule);background:none;color:inherit;font-family:var(--fm-data);font-size:18px;cursor:pointer} } /* ========================================================== 24. REDUCED MOTION, MODULES 17 TO 22 Colour and border changes stay. Movement goes. ========================================================== */ @media (prefers-reduced-motion:reduce){ body.fm-js .fm-rv{opacity:1;transform:none;transition:none} .fm-sv-feature img{transform:none;transition:none} .fm-step-media img, .fm-cell-media img{transition:none} .fm-step:hover .fm-step-media img, a.fm-cell:hover .fm-cell-media img{transform:none} .fm-b i, .fm-row-a{transition:none} .fm-b:hover i, .fm-row:hover .fm-row-a{transform:none} .fm-q-panel.is-on{animation:none} .fm-q-line{animation:none} .fm-hd-panel{transition:opacity 1ms linear,visibility 1ms linear} } /* ========================================================== 25. V2 PAGE SHELL AND SPECIFICITY FIXES Module 3 sets three rules that outrank anything written with a single class later in this file: .fm-sec p{margin:0} kills paragraph spacing .fm-sec a{color:inherit} makes every button dark on dark .fm-sec *{box-sizing} harmless Everything in modules 17 to 24 that is a paragraph or an anchor is restated here with enough weight to win. The new pages use the same shell as the existing ones: section.fm-sec.fm-v2 > div.fm-pad > div.fm-in ========================================================== */ /* ---- vertical rhythm ---- */ /* ---- anchors that are components, not links ---- */ .fm-sec a.fm-b, .fm-q a.fm-b, .fm-cta a.fm-b{text-decoration:none} .fm-sec a.fm-b--inv:hover, .fm-q a.fm-b--inv:hover, .fm-cta a.fm-b--inv:hover, .fm-sec a.fm-b--inv:focus-visible, .fm-cta a.fm-b--inv:focus-visible{color:var(--fm-paper)} .fm-sec a.fm-chip{color:var(--fm-ink)} .fm-sec a.fm-chip:hover, .fm-sec a.fm-chip:focus-visible{color:var(--fm-ink)} .fm-sec a.fm-link{color:inherit;text-decoration:underline} /* buttons are inline-flex, so they must not inherit a block width */ .fm-sec .fm-b, .fm-q .fm-b, .fm-cta .fm-b{width:auto;max-width:100%} /* ---- paragraphs, margins restored ---- */ .fm-v2 .fm-xl, .fm-v2 .fm-h2, .fm-v2 h1, .fm-v2 h2, .fm-v2 h3{margin:0} .fm-v2 p.fm-lede{margin:clamp(20px,3vh,36px) 0 0} .fm-v2 p.fm-body{margin:clamp(14px,2.2vh,24px) 0 0} .fm-v2 p.fm-sv-price{margin:clamp(16px,2.4vh,28px) 0 0} .fm-v2 .fm-step p.fm-step-d{margin:10px 0 0} .fm-v2 .fm-for p{margin:12px 0 0} .fm-v2 .fm-note p{margin:0} .fm-v2 .fm-quote p{margin:0} .fm-v2 p.fm-48-l{margin:12px 0 0} .fm-v2 p.fm-48-d{margin:14px 0 0} .fm-v2 p.fm-rev-shout{margin:clamp(18px,2.6vh,34px) 0 0} .fm-v2 p.fm-rev-body{margin:clamp(14px,2vh,24px) 0 0} .fm-q p{margin:0} .fm-q p.fm-q-sub{margin:14px 0 0} .fm-q h3.fm-q-h{margin:12px 0 0} .fm-q p.fm-q-est-n{margin:14px 0 0} .fm-q p.fm-q-est-note{margin:12px 0 0} .fm-q p.fm-q-fine{margin:clamp(18px,2.6vh,28px) 0 0} .fm-q .fm-next div p{margin:10px 0 0} .fm-q .fm-q-done p{margin:14px 0 0} /* ---- eyebrow. Module 6 centres it at 12px for the accordion. ---- */ .fm-v2 p.fm-eyebrow, .fm-q p.fm-eyebrow{text-align:left} /* ---- bands that carry their own gutter ---- */ .fm-q, .fm-cta{padding-left:var(--fm-gut);padding-right:var(--fm-gut)} .fm-q > .fm-in, .fm-cta > .fm-in{margin-inline:auto} .fm-sv-hero{padding-left:0;padding-right:0} /* ---- how we work, so the 48 card sits level with the images ---- */ .fm-step, .fm-48{min-width:0} .fm-48{justify-content:flex-end;aspect-ratio:auto;min-height:0} @media (min-width:821px){ .fm-48{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,2vw,28px);min-height:100%} .fm-steps > .fm-48{align-self:stretch} } .fm-v2 .fm-step-t{margin-top:clamp(14px,2vh,22px)} /* ---- review cards, so the grid lines read as one block ---- */ .fm-sec a.fm-rev{color:var(--fm-ink)} .fm-sec a.fm-rev .fm-rev-more{color:inherit} /* ---- service rows ---- */ .fm-sec a.fm-row{color:var(--fm-ink)} /* ---- journal cells ---- */ .fm-sec a.fm-cell, .fm-sec a.fm-lrow{color:var(--fm-ink)} /* ========================================================== 26. LAYOUT CORRECTIONS, OCTOBER 2026 Brings the new pages onto the Figma spec: a centred 1200 container, a centred hero, pill chips, small sentence case buttons, and no rule above a section. ========================================================== */ /* ---- the container. --fm-max is none site wide, which is right for the original full bleed pages but wrong for these. ---- */ .fm-v2 > .fm-pad > .fm-in, .fm-q > .fm-in, .fm-cta > .fm-in{margin-left:auto;margin-right:auto} .fm-pad{padding-left:var(--fm-gut);padding-right:var(--fm-gut)} /* ---- centred hero, Services page only ---- */ .fm-hero-c > .fm-pad > .fm-in{text-align:center;display:flex;flex-direction:column;align-items:center} .fm-hero-c p.fm-lede{text-align:center} .fm-hero-c p.fm-eyebrow{text-align:center;margin-bottom:clamp(14px,2vh,22px)} .fm-hero-c .fm-chips{justify-content:center} .fm-hero-c .fm-sv-actions{justify-content:center} /* ---- pills ---- */ .fm-chip{border-radius:999px;text-transform:uppercase;border-color:rgba(17,17,17,.3)} /* ---- buttons: small, sentence case, white on black ---- */ .fm-b, .fm-sec .fm-b, .fm-q .fm-b, .fm-cta .fm-b{min-height:46px} .fm-sec a.fm-b, .fm-q a.fm-b, .fm-cta a.fm-b, .fm-sec button.fm-b, .fm-q button.fm-b{color:#FFFFFF;background:var(--fm-ink);border-color:var(--fm-ink)} .fm-sec a.fm-b:hover, .fm-sec a.fm-b:focus-visible, .fm-sec button.fm-b:hover, .fm-q button.fm-b:hover{background:transparent;color:var(--fm-ink);border-color:var(--fm-ink)} .fm-sec a.fm-b--out:hover, .fm-sec a.fm-b--out:focus-visible{background:var(--fm-ink);color:#FFFFFF;border-color:var(--fm-ink)} .fm-cta a.fm-b--inv:hover, .fm-q button.fm-b--inv:hover{background:transparent;color:#FFFFFF;border-color:#FFFFFF} /* ---- no rule above a section. Internal grid lines only. ---- */ .fm-rows{border-top:0} .fm-rows .fm-row:first-child{border-top:1px solid var(--fm-rule)} .fm-inc{border-top:0} .fm-inc li:first-child{border-top:1px solid var(--fm-rule)} /* ---- header, light by default ---- */ .fm-hd-cta{min-height:42px} body.fm-nav-dark .fm-hd-cta{border-color:#FFFFFF} /* wordmark fallback, so a missing image still reads as the brand */ body.fm-nav-dark .fm-hd-logo .fm-hd-word{color:#FFFFFF} /* ---- services dropdown, black ---- */ .fm-hd-panel{border-bottom:0} .fm-hd-panel .fm-hd-panel-grid > a:nth-child(-n+3){border-top:0} .fm-hd-panel-foot{align-items:center} .fm-hd-panel-foot span{color:rgba(255,255,255,.68)} .fm-hd-panel-foot .fm-b{background:#FFFFFF;color:var(--fm-ink);border-color:#FFFFFF} .fm-hd-panel-foot .fm-b:hover{background:transparent;color:#FFFFFF;border-color:#FFFFFF} @media (max-width:820px){ .fm-hd-panel .fm-hd-panel-grid > a:nth-child(-n+3){border-top:1px solid rgba(255,255,255,.2)} .fm-hd-panel .fm-hd-panel-grid > a:first-child{border-top:0} .fm-hero-c h1.fm-xl{font-size:clamp(34px,9vw,52px)} .fm-hero-c .fm-sv-actions{width:100%;flex-direction:column;align-items:stretch} .fm-hero-c .fm-sv-actions .fm-b{justify-content:center} } /* ========================================================== 27. FIGMA CORRECTIONS, DESKTOP 1440 Container, type scale, alignment, the button system, the fixed black header and the megamenu. ========================================================== */ /* ---- container: 1440 frame with 40px margins ---- */ :root{--fm-gut:clamp(20px,2.8vw,40px);--fm-ink-soft:rgba(17,17,17,.78);--fm-head-h:clamp(62px,6.4vh,76px)} .fm-v2 > .fm-pad > .fm-in, .fm-q > .fm-in, .fm-cta > .fm-in{max-width:1360px} /* the page starts below the fixed bar, never under it */ .fm-stack{padding-top:var(--fm-head-h)} /* ---- type scale, down on every heading ---- */ .fm-lede{max-width:46ch} .fm-body{color:var(--fm-ink-soft)} .fm-step-d{color:var(--fm-ink-soft)} .fm-q-est-n{font-size:clamp(34px,3.6vw,54px)} /* ---- section rhythm ---- */ /* ---- centred sections. How we work stays left. ---- */ .fm-c > .fm-pad > .fm-in{text-align:center;display:flex;flex-direction:column;align-items:center} .fm-c p.fm-eyebrow{text-align:center} .fm-c .fm-lede{text-align:center;max-width:56ch} .fm-c .fm-rows, .fm-c .fm-revs{width:100%;text-align:left} .fm-c .fm-sv-actions{justify-content:center} /* ---- uppercase monospace labels ---- */ .fm-rev-more{text-decoration:underline;text-underline-offset:5px} /* ========================================================== THE BUTTON SYSTEM One class, three variants, used everywhere. Serif, sentence case, 16px, arrow after the label, square corners. ========================================================== */ .fm-b, .fm-sec .fm-b, .fm-q .fm-b, .fm-cta .fm-b, .fm-hd-cta, .fm-hd-panel .fm-b{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--fm-voice);font-weight:400;font-size:16px;letter-spacing:0;text-transform:none;line-height:1;white-space:nowrap;height:46px;padding:0 20px;border-radius:0;border:1px solid var(--fm-ink);transition:opacity var(--fm-fast) var(--fm-ease)} .fm-b i, .fm-hd-cta span{font-style:normal;display:inline-block;transition:none} .fm-b:hover i{transform:none} /* primary */ .fm-sec a.fm-b, .fm-sec button.fm-b, .fm-q button.fm-b, .fm-cta a.fm-b{background:var(--fm-ink);color:#FFFFFF;border-color:var(--fm-ink)} /* secondary */ .fm-sec a.fm-b--out, .fm-q a.fm-b--out{background:transparent;color:var(--fm-ink);border-color:rgba(17,17,17,.34)} /* inverted */ .fm-sec a.fm-b--inv, .fm-q a.fm-b--inv, .fm-q button.fm-b--inv, .fm-cta a.fm-b--inv, .fm-hd-cta, .fm-hd-panel .fm-b{background:#FFFFFF;color:var(--fm-ink);border-color:#FFFFFF} /* one hover for all three */ .fm-b:hover, .fm-b:focus-visible, .fm-hd-cta:hover, .fm-hd-cta:focus-visible{opacity:.72} .fm-sec a.fm-b:hover, .fm-sec a.fm-b--out:hover, .fm-cta a.fm-b--inv:hover{background:inherit;color:inherit} /* text links are not buttons */ .fm-link, .fm-rev-more, .fm-cell-more{font-family:var(--fm-data);font-size:16px;text-transform:uppercase;letter-spacing:.14em} /* ========================================================== HEADER, fixed and solid black ========================================================== */ .fm-hd, body.fm-nav-light .fm-hd, body.fm-nav-dark .fm-hd{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--fm-black);height:var(--fm-head-h);display:flex;align-items:center;justify-content:space-between;gap:clamp(14px,2vw,34px);padding:0 var(--fm-gut);overflow:visible} .fm-hd-logo{display:inline-flex;align-items:center;text-decoration:none} .fm-hd-logo .fm-hd-word, body.fm-nav-light .fm-hd-logo .fm-hd-word{font-family:var(--fm-brand);font-size:clamp(18px,1.7vw,24px);letter-spacing:-.01em;text-transform:uppercase;color:#FFFFFF;text-decoration:none} .fm-hd-nav{display:flex;align-items:center;gap:clamp(14px,2vw,32px)} .fm-hd-nav a, body.fm-nav-light .fm-hd-nav a, body.fm-nav-dark .fm-hd-nav a{color:#FFFFFF;font-family:var(--fm-data);font-size:16px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:opacity var(--fm-fast) var(--fm-ease)} .fm-hd-nav a:hover{opacity:.66;text-decoration:none} .fm-hd-burger span, body.fm-nav-light .fm-hd-burger span{background:#FFFFFF} /* ========================================================== MEGAMENU, nothing clipped ========================================================== */ .fm-hd-panel{top:var(--fm-head-h);width:100%;max-width:none;overflow:visible;background:var(--fm-black);color:#FFFFFF;z-index:999;padding:clamp(28px,3.6vh,52px) var(--fm-gut) clamp(30px,4vh,58px)} .fm-hd-panel-grid{max-width:1360px;margin:0 auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,1.4vw,26px) clamp(24px,3.4vw,60px)} .fm-hd-panel a{grid-template-columns:minmax(0,1fr) auto;gap:6px clamp(14px,2vw,28px);padding:clamp(16px,2vh,22px) 0;color:#FFFFFF;border-top:1px solid rgba(255,255,255,.22);white-space:normal;overflow:visible;text-overflow:clip} .fm-hd-panel .fm-hd-panel-t{font-size:clamp(17px,1.4vw,21px);line-height:1.2;white-space:normal} .fm-hd-panel .fm-hd-panel-n, .fm-hd-panel .fm-hd-panel-p{font-family:var(--fm-data);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.76);white-space:nowrap} .fm-hd-panel-foot{max-width:1360px;margin:clamp(22px,3vh,38px) auto 0;border-top:0;padding-top:0} /* ========================================================== SECTION DETAIL ========================================================== */ /* logo tiles */ /* service rows */ .fm-row-n{font-weight:500;color:var(--fm-ink)} .fm-row-p{color:var(--fm-ink-soft)} /* reviews: 01 filled butter, 02 plain */ .fm-revs{border:0;background:transparent;gap:clamp(16px,2.4vw,30px)} .fm-rev{border:0;background:transparent} .fm-rev--fill{background:var(--fm-butter)} @media (hover:hover) and (pointer:fine){ .fm-rev:hover{background:var(--fm-butter)} } /* how we work: left aligned, two column intro, staggered cards */ .fm-work-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,70px)} .fm-work-intro .fm-lede{max-width:42ch} .fm-steps{align-items:start} /* faqs */ /* let's talk is white */ .fm-cta{background:var(--fm-paper);color:var(--fm-ink)} .fm-cta > .fm-in{text-align:center;display:flex;flex-direction:column;align-items:center} .fm-cta .fm-xl{color:var(--fm-ink)} /* footer wordmark fallback */ .fm-foot-word{display:block;font-family:var(--fm-brand);text-transform:uppercase;color:#FFFFFF;line-height:.78;letter-spacing:-.03em;font-size:clamp(56px,13.6vw,196px);white-space:nowrap} @media (max-width:1100px){ .fm-steps{grid-template-columns:repeat(2,minmax(0,1fr))} .fm-steps > .fm-step:nth-child(even){margin-top:0} .fm-work-intro{grid-template-columns:1fr} .fm-hd-panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:820px){ .fm-steps{display:flex} .fm-c > .fm-pad > .fm-in{align-items:flex-start;text-align:left} .fm-c p.fm-eyebrow, .fm-c .fm-lede{text-align:left} .fm-cta > .fm-in{align-items:flex-start;text-align:left} .fm-hd-panel-grid{grid-template-columns:1fr} .fm-b{width:100%} .fm-hd-cta{width:auto} } /* ========================================================== 28. SPACING AND TYPE, MATCHED TO THE WORKING PAGES The Studio page is the reference. Two things it does that the new modules did not: 1. Vertical rhythm comes from --fm-block and from vw based clamps, never vh. A vh clamp collapses on a laptop, which is what made these pages feel cramped. 2. Type runs to the Figma values. Module 27 cut everything by a quarter, which overshot in the other direction. This module sets both back to the real numbers. ========================================================== */ /* ---- vertical rhythm, same basis as .fm-svc and .fm-mani ---- */ .fm-v2{padding-top:calc(var(--fm-block) * 1.6);padding-bottom:calc(var(--fm-block) * 1.6)} .fm-v2--tight{padding-top:var(--fm-block);padding-bottom:var(--fm-block)} .fm-v2--top{padding-top:calc(var(--fm-block) * 1.3)} .fm-sv-hero{padding-top:calc(var(--fm-block) * 1.3);padding-bottom:var(--fm-block)} .fm-q{padding-top:calc(var(--fm-block) * 1.6);padding-bottom:calc(var(--fm-block) * 1.8)} .fm-cta{padding-top:calc(var(--fm-block) * 1.8);padding-bottom:calc(var(--fm-block) * 1.8)} /* type now lives in module 29, one scale for the whole site */ /* ---- gaps between elements, vw based like the Studio page ---- */ .fm-v2 p.fm-eyebrow, .fm-q p.fm-eyebrow{margin:0 0 clamp(12px,1.5vw,20px)} .fm-v2 p.fm-lede{margin-top:clamp(16px,2vw,30px)} .fm-v2 p.fm-body{margin-top:clamp(12px,1.4vw,20px)} .fm-v2 p.fm-sv-price{margin-top:clamp(14px,1.6vw,24px)} .fm-sv-actions{margin-top:clamp(22px,2.8vw,42px);gap:12px} .fm-chips{margin-top:clamp(20px,2.4vw,34px)} .fm-rows, .fm-revs, .fm-steps, .fm-for, .fm-inc{margin-top:clamp(26px,3.4vw,52px)} .fm-work-intro{margin-bottom:0} .fm-q-grid{margin-top:clamp(24px,3vw,46px)} .fm-q-cards{margin-top:clamp(18px,2.2vw,30px)} /* ---- rows and accordions, the Studio padding ---- */ .fm-row{padding:clamp(20px,2.6vw,34px) 0} .fm-inc li{padding:clamp(16px,2vw,26px) 0} .fm-rev{padding:clamp(22px,2.6vw,36px)} .fm-q-step-row{padding:clamp(16px,2vw,26px) 0} .fm-q-card{padding:clamp(18px,2.2vw,30px)} .fm-step-t{margin-top:clamp(14px,1.6vw,22px)} .fm-step-d{margin-top:clamp(8px,1vw,12px)} /* ---- the eyebrow keeps its tick up, and stays at 16px ---- */ /* ---- mobile, nothing below 16px and nothing pinched ---- */ @media (max-width:820px){ .fm-v2{padding-top:calc(var(--fm-block) * 1.2);padding-bottom:calc(var(--fm-block) * 1.2)} .fm-lede, .fm-hero-c p.fm-lede{font-size:18px;line-height:1.5} .fm-rows, .fm-revs, .fm-steps, .fm-for, .fm-inc{margin-top:clamp(22px,5vw,34px)} } /* ========================================================== 29. THE TYPE SCALE, CONSOLIDATED One scale for the whole site. Every value below is taken from the live stylesheet, so Home and Studio keep the sizes they already have. The new pages now point at the same tokens instead of carrying a second scale of their own. Roles display page titles was .fm-top-head head section headings was .fm-svc-head shout pull quotes was .fm-tst-shout say statement paragraphs was .fm-say-lead lead intro paragraphs was .fm-top-lead title list and card titles was .fm-svc-title body running copy was .fm-svc-copy p label monospace metadata 16px floor, site wide The only deliberate change to the live pages is the label role. Eyebrows, footer links, nav, testimonial metadata and form labels were between 9px and 13px. They are 16px now. ========================================================== */ :root{--fm-t-display:clamp(56px,10.2vw,182px);--fm-lh-display:.94;--fm-ls-display:-.038em;--fm-t-head:clamp(38px,6.4vw,104px);--fm-lh-head:.95;--fm-ls-head:-.035em;--fm-t-shout:clamp(32px,4.4vw,74px);--fm-lh-shout:.94;--fm-ls-shout:-.045em;--fm-t-say:clamp(24px,3.1vw,66px);--fm-lh-say:1.04;--fm-ls-say:-.022em;--fm-t-lead:clamp(17px,1.5vw,27px);--fm-lh-lead:1.42;--fm-ls-lead:-.016em;--fm-t-title:clamp(20px,2.7vw,40px);--fm-lh-title:1.05;--fm-ls-title:-.03em;--fm-t-body:clamp(16px,1.05vw,17px);--fm-lh-body:1.6;--fm-ls-body:-.005em} /* ---- display ---- */ .fm-top-head, .fm-xl, .fm-jr-word{font-family:var(--fm-voice);font-size:var(--fm-t-display);line-height:var(--fm-lh-display);letter-spacing:var(--fm-ls-display)} .fm-xl{font-weight:400} /* ---- section heading ---- */ .fm-svc-head, .fm-h2, .fm-con-head, .fm-sv-hero h1, .fm-hero-c h1.fm-xl{font-family:var(--fm-voice);font-size:var(--fm-t-head);line-height:var(--fm-lh-head);letter-spacing:var(--fm-ls-head)} .fm-h2{font-weight:400;max-width:none} /* ---- pull quote ---- */ .fm-tst .fm-tst-shout, .fm-rev-shout, .fm-quote p, .fm-q-h{font-family:var(--fm-voice);font-size:var(--fm-t-shout);line-height:var(--fm-lh-shout);letter-spacing:var(--fm-ls-shout)} .fm-rev-shout, .fm-q-h{font-size:clamp(24px,3.2vw,52px);line-height:1.02} /* ---- statement ---- */ .fm-say-lead, .fm-mani .fm-mani-lead{font-size:var(--fm-t-say);line-height:var(--fm-lh-say);letter-spacing:var(--fm-ls-say)} .fm-mani .fm-mani-lead{font-size:clamp(20px,2.1vw,40px);line-height:1.12} /* ---- lead paragraph ---- */ .fm-top .fm-top-lead, .fm-fou-copy p, .fm-lede, .fm-note p, .fm-q-sub, .fm-con-list li{font-family:var(--fm-voice);font-weight:300;font-size:var(--fm-t-lead);line-height:var(--fm-lh-lead);letter-spacing:var(--fm-ls-lead)} .fm-hero-c p.fm-lede{font-size:clamp(17px,1.4vw,21px);line-height:1.45;max-width:560px} .fm-q-sub{font-size:clamp(17px,1.25vw,20px)} /* ---- item title ---- */ .fm-svc-title, .fm-row-t, .fm-inc .t, .fm-for h3, .fm-hd-panel-t{font-family:var(--fm-voice);font-weight:300;font-size:var(--fm-t-title);line-height:var(--fm-lh-title);letter-spacing:var(--fm-ls-title)} .fm-inc .t, .fm-for h3, .fm-step-t, .fm-cell-t, .fm-hd-panel-t{font-size:clamp(18px,1.6vw,24px)} /* ---- body ---- */ .fm-svc-copy p, .fm-mani-side p, .fm-body, .fm-step-d, .fm-for p, .fm-rev-body, .fm-cell-more, .fm-q-fine, .fm-next div p, .fm-q-done p{font-family:var(--fm-voice);font-weight:300;font-size:var(--fm-t-body);line-height:var(--fm-lh-body);letter-spacing:var(--fm-ls-body)} .fm-rev-body{font-size:clamp(16px,1.2vw,18px);line-height:1.5} /* ---- monospace labels, 16px floor across the whole site ---- */ .fm-eyebrow, .fm-hd-nav a, .fm-foot li, .fm-foot-base, .fm-tst-meta, .fm-tst-credit, .fm-tst-meta .fm-num, .fm-con .fm-paren, .fm-con-base p, .fm-con-status-lab, .fm-plat-item span, .fm-shot span, .fm-shotb span, .fm-svc-media span, .fm-fou-media span, .fm-row-p, .fm-rev-meta, .fm-rev-credit, .fm-rev-more, .fm-48-l, .fm-cell-k, .fm-sv-price, .fm-note cite, .fm-quote cite, .fm-paren, .fm-q-step, .fm-q-est-l, .fm-q-est-note, .fm-q-line, .fm-hd-panel-n, .fm-hd-panel-p{font-family:var(--fm-data);font-size:var(--fm-t-label);line-height:1.5} .fm-form th, .fm-form label, .fm-form .form-row-label, .fm-form small, .fm-form .form-row-description, .fm-form button, .fm-form input[type="submit"], .fm-form .validation-message, .fm-form .error{font-size:16px !important} .fm-foot li{line-height:1.9} /* the accordion eyebrow keeps its tick up and its centring on the Studio page. The new pages override alignment in module 27. */ /* ========================================================== 30. REUSE, NOT LOOKALIKES Two components were duplicated. Both are retired here and the pages now use the originals. FAQs use .fm-svc-list, the Studio services accordion Client logos use .fm-plat, the Studio platform scroller The old rules stay in modules 19 and 26 so nothing breaks if a page is still on the previous markup, but nothing uses them. ========================================================== */ /* ---- FAQ variant of the services accordion ---- Same component. The only difference is there is no number column, so the summary is two columns rather than three. */ .fm-svc-list--qa{border-top:1px solid var(--fm-rule);margin-top:clamp(26px,3.4vw,52px)} .fm-svc-list--qa .fm-svc-item summary{grid-template-columns:minmax(0,1fr) 28px} .fm-svc-list--qa .fm-svc-copy{margin-left:0;max-width:78ch} .fm-svc-list--qa .fm-svc-copy p{text-align:left;hyphens:none} @media (max-width:860px){ .fm-svc-list--qa .fm-svc-item summary{grid-template-columns:minmax(0,1fr) 20px} .fm-svc-list--qa .fm-svc-copy{padding-left:0} } /* centred sections keep the accordion full width and left aligned */ .fm-c .fm-svc-list, .fm-c .fm-svc-list--qa{width:100%;text-align:left} /* ---- client logos use the platform scroller ---- .fm-plat already does greyscale at 75 percent, hover to 100, a 46s loop and the img-or-text fallback. Nothing to add except room for a wordmark that is taller than a platform logo. */ .fm-plat--clients .fm-plat-item{height:clamp(26px,3vw,44px)} .fm-plat--clients .fm-plat-track{gap:clamp(44px,7vw,120px)} .fm-plat--clients .fm-in .fm-eyebrow{margin-bottom:clamp(28px,4vw,56px)} @media (max-width:860px){ .fm-plat--clients .fm-plat-item{height:24px} .fm-plat--clients .fm-plat-track{gap:38px} } /* ========================================================== 31. SERVICE PAGE TEMPLATE One template, six pages. Every rule here is shared, so a fix lands on all of them at once. ========================================================== */ /* ---- hero, centred ---- */ .fm-sv-hero > .fm-pad > .fm-in{text-align:center;display:flex;flex-direction:column;align-items:center} .fm-sv-hero p.fm-lede{max-width:56ch;text-align:center} .fm-sv-hero .fm-sv-actions{justify-content:center} /* ---- feature image, founder quote inside it ---- */ .fm-sv-feature{position:relative;overflow:hidden;background:var(--fm-paper-2)} .fm-sv-feature::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.62) 38%,rgba(0,0,0,0) 100%);pointer-events:none;z-index:1} .fm-sv-feature img{width:100%;height:100%;object-fit:cover} .fm-note--on{position:absolute;z-index:2;left:clamp(18px,2.6vw,42px);right:clamp(18px,2.6vw,42px);bottom:clamp(18px,2.6vw,38px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,1.4vw,18px);align-items:start;max-width:64ch} .fm-note--on .fm-note-av{position:relative;width:44px;height:44px;flex:0 0 auto;border-radius:50%;overflow:hidden;background:transparent;border:1px solid rgba(255,255,255,.62);color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-family:var(--fm-data);font-size:16px;letter-spacing:.06em} /* the avatar takes a photo. Drop a file into the img src and the HG initials hide themselves, the same way the logo scroller and the step tiles work. */ .fm-note-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block} .fm-note-av img[src=""]{display:none} .fm-note-av:has(img[src]:not([src=""])) span{display:none} .fm-note-av span{position:relative;z-index:1} .fm-note--on p{font-family:var(--fm-data);font-size:16px;line-height:1.6;color:#FFFFFF;margin:0} .fm-note--on cite{display:block;font-style:normal;font-family:var(--fm-data);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.76);margin-top:10px} /* ---- what's included, two columns ---- */ .fm-inc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(22px,4vw,76px);align-items:start} .fm-inc-grid .fm-inc{margin-top:0;border-top:0} .fm-inc-grid .fm-inc li:first-child{border-top:1px solid var(--fm-rule)} .fm-inc li{text-align:left;align-items:baseline} .fm-inc .n{font-weight:500;color:var(--fm-ink)} .fm-inc-sum{margin-top:clamp(14px,1.8vw,22px);color:var(--fm-ink-soft)} /* ---- made for you if, light grey cards ---- */ .fm-for{gap:clamp(14px,2vw,24px)} .fm-for div{background:var(--fm-paper-2);border-top:0;padding:clamp(22px,2.6vw,36px);text-align:left} .fm-for p{color:var(--fm-ink-soft)} /* ---- how it runs ---- */ .fm-work-intro{align-items:end} .fm-work-intro .fm-lede{margin-top:0;padding-bottom:.2em} /* the column count follows the number of steps on the page */ .fm-steps, .fm-steps--4{grid-template-columns:repeat(var(--fm-cols,5),minmax(0,1fr));gap:0} .fm-steps > .fm-step:nth-child(even){margin-top:clamp(26px,4vw,70px)} /* grey placeholder tile with its label */ .fm-step-media{position:relative;aspect-ratio:3/4;background:var(--fm-paper-2);overflow:hidden} .fm-step-media img{width:100%;height:100%;object-fit:cover} .fm-step-media img[src=""]{display:none} .fm-step-media:has(img[src]:not([src=""])) .fm-step-ph{display:none} .fm-step-ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:12px;color:var(--fm-ink-soft)} /* the 48 panel: numeral, label, then the line inside the block */ .fm-step-media--48{background:var(--fm-butter);display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(18px,2vw,28px);aspect-ratio:3/4} .fm-step-media--48 .fm-48-n{font-family:var(--fm-data);font-weight:500;font-size:clamp(64px,7.4vw,124px);line-height:.84;letter-spacing:-.05em;color:var(--fm-ink);margin:0} .fm-step-media--48 .fm-48-l{font-family:var(--fm-data);font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--fm-ink);margin-top:10px} .fm-step-media--48 .fm-48-d{font-family:var(--fm-voice);font-weight:300;font-size:16px;line-height:1.5;color:var(--fm-ink);margin-top:auto} /* ---- single testimonial, centred ---- */ .fm-quote{margin-left:auto;margin-right:auto} .fm-sec--quote > .fm-pad > .fm-in{flex-direction:column;align-items:center} @media (max-width:1100px){ .fm-inc-grid{grid-template-columns:1fr} .fm-steps, .fm-steps--4{grid-template-columns:repeat(2,minmax(0,1fr))} .fm-steps > .fm-step{padding:0;border-left:0} .fm-steps > .fm-step:nth-child(even){margin-top:0} } @media (max-width:820px){ .fm-steps, .fm-steps--4{display:flex;gap:14px} .fm-steps > .fm-step{flex:0 0 78%;padding:0} .fm-for{grid-template-columns:1fr} .fm-note--on{position:static;max-width:none;margin-top:clamp(16px,3vw,24px)} .fm-note--on .fm-note-av{border-color:rgba(17,17,17,.4);color:var(--fm-ink)} .fm-note--on p{color:var(--fm-ink)} .fm-note--on cite{color:var(--fm-ink-soft)} .fm-sv-feature::after{display:none} .fm-quote{max-width:none} } /* the quote band is centred at the top, like the homepage */ .fm-q--c > .fm-in > .fm-eyebrow, .fm-q--c > .fm-in > .fm-h2, .fm-q--c > .fm-in > .fm-q-sub{text-align:center;margin-left:auto;margin-right:auto} .fm-q--c > .fm-in > .fm-h2{max-width:20ch} .fm-q--c > .fm-in > .fm-q-sub{max-width:52ch} /* the same avatar on a light ground, used anywhere the note sits outside an image */ .fm-note .fm-note-av{position:relative;width:44px;height:44px;flex:0 0 auto;border-radius:50%;overflow:hidden;border:1px solid rgba(17,17,17,.3);background:transparent;color:var(--fm-ink);display:flex;align-items:center;justify-content:center;font-family:var(--fm-data);font-size:16px;letter-spacing:.06em} /* ========================================================== 32. FORM BAND AND HEADER BUTTON FIXES ========================================================== */ /* ---- chips on the black band ---- The dark chip rules were written against .fm-dark, and the proposal form sits in .fm-q, so the chips were inheriting ink on black. ---- */ .fm-q .fm-chip, .fm-q a.fm-chip, .fm-q button.fm-chip{color:#FFFFFF;background:transparent;border:1px solid rgba(255,255,255,.46)} .fm-q .fm-chip:hover, .fm-q .fm-chip:focus-visible{color:var(--fm-ink);background:var(--fm-butter);border-color:var(--fm-butter)} .fm-q .fm-chip.is-on{color:var(--fm-ink);background:var(--fm-butter);border-color:var(--fm-butter)} .fm-q .form-row, .fm-q .form-row-label, .fm-q .form-row-field{display:block !important;width:100% !important;padding:0 !important;background:none !important} /* the sticky estimate must never sit over the fields */ /* ---- header button: black with a white outline ---- */ .fm-hd-cta, body.fm-nav-light .fm-hd-cta, body.fm-nav-dark .fm-hd-cta{background:transparent;color:#FFFFFF;border:1px solid #FFFFFF} .fm-hd-cta:hover, .fm-hd-cta:focus-visible, body.fm-nav-light .fm-hd-cta:hover, body.fm-nav-dark .fm-hd-cta:hover{background:#FFFFFF;color:var(--fm-ink);border-color:#FFFFFF;opacity:1} /* the megamenu button keeps the inverted treatment */ .fm-hd-panel .fm-b{background:#FFFFFF;color:var(--fm-ink);border-color:#FFFFFF} .fm-hd-panel .fm-b:hover{background:transparent;color:#FFFFFF;border-color:#FFFFFF;opacity:1} /* ========================================================== 33. CLIENT QUOTE, SERVICE PAGES The centred wrapper was a flex column with align-items:center, which shrinks its children to their content box. With a 22ch cap on top of that, the quote collapsed into a narrow column. The wrapper is a plain block now and the quote centres itself. ========================================================== */ .fm-sec--quote > .fm-pad > .fm-in{display:block;text-align:center} .fm-sec--quote p.fm-eyebrow{text-align:center;margin-left:auto;margin-right:auto} .fm-quote{width:100%;max-width:none;margin:0 auto;text-align:center} .fm-quote p{max-width:26ch;margin:0 auto;text-wrap:balance;font-size:clamp(28px,4.6vw,66px);line-height:1.04;letter-spacing:-.04em} .fm-quote cite{display:block;max-width:none;margin-top:clamp(20px,2.6vw,38px);text-align:center;white-space:normal;text-wrap:balance} @media (max-width:820px){ .fm-quote p{max-width:none;font-size:clamp(24px,7vw,34px)} } /* ========================================================== 34. STUDIO SERVICES, PRICE AND LINK The accordion rows now carry a price and a link through to the service page. Two new elements inside .fm-svc-copy, nothing else about the component changes. ========================================================== */ .fm-svc-foot{display:flex;align-items:baseline;justify-content:space-between;gap:clamp(14px,2vw,30px);flex-wrap:wrap;margin-top:clamp(18px,2.2vw,30px);padding-top:clamp(14px,1.8vw,22px);border-top:1px solid var(--fm-rule)} .fm-svc-price{color:var(--fm-ink)} .fm-svc-go{color:var(--fm-ink);text-decoration:underline;text-underline-offset:5px;margin-left:auto;white-space:nowrap;transition:text-underline-offset var(--fm-fast) var(--fm-ease)} .fm-sec a.fm-svc-go{color:var(--fm-ink)} .fm-svc-go:hover, .fm-svc-go:focus-visible{text-underline-offset:2px} /* the 07 and 08 rows have no price, so the link sits alone on the right */ .fm-svc-foot:has(.fm-svc-go:only-child){justify-content:flex-end} /* the services image keeps its label until a file is in place */ .fm-svc-media span{font-size:16px;letter-spacing:.16em} @media (max-width:860px){ .fm-svc-foot{margin-top:16px;padding-top:14px} .fm-svc-go{margin-left:0} } /* ========================================================== 35. STEP RULES AND FORM FIELD SAFETY ========================================================== */ /* ---- the vertical rules between steps ---- The rule was sitting right against the text. Every column now carries padding on both sides, and the rule is only drawn on desktop where there is room for it. ---- */ .fm-steps > .fm-step{padding:0 clamp(18px,2vw,32px)} .fm-steps > .fm-step:first-child{padding-left:0} .fm-steps > .fm-step:last-child{padding-right:0} .fm-steps > .fm-step + .fm-step{border-left:1px solid var(--fm-rule)} @media (max-width:1100px){ /* two up. No rules, real gaps instead. */ .fm-steps, .fm-steps--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.4vw,40px)} .fm-steps > .fm-step, .fm-steps > .fm-step:first-child, .fm-steps > .fm-step:last-child{padding:0;border-left:0} .fm-steps > .fm-step:nth-child(even){margin-top:0} } @media (max-width:820px){ /* the snap carousel. Still no rules, and the card keeps its own breathing room on both sides. */ .fm-steps, .fm-steps--4{display:flex;gap:16px} .fm-steps > .fm-step, .fm-steps > .fm-step:first-child, .fm-steps > .fm-step:last-child{flex:0 0 78%;padding:0;border-left:0;scroll-snap-align:start} .fm-steps > .fm-step + .fm-step{border-left:0} } /* nothing in the band may sit over a field */ .fm-q-est{z-index:1;pointer-events:auto} .fm-q .fm-q-panel{position:relative;z-index:2} /* ========================================================== 36. THE QUOTE AND PROPOSAL FORMS Everything I wrote for these forms before this module is deleted. It was guesswork against markup I had never seen, and it kept breaking. The forms now use .fm-form, the same wrapper and the same rules as the contact page, which has worked all along. This module only recolours those rules for the black band and lifts the label size to 16px. Nothing here invents new structure, hides anything, or fights Oncord. ========================================================== */ .fm-form--dark{padding-top:0;padding-bottom:0} /* labels */ .fm-form--dark th, .fm-form--dark label, .fm-form--dark .form-row-label{font-family:var(--fm-data) !important;text-transform:uppercase !important;margin:0 0 10px !important} /* descriptions */ .fm-form--dark small, .fm-form--dark .form-row-description{font-size:16px !important;color:rgba(255,255,255,.72) !important} /* fields */ .fm-form--dark input[type="text"], .fm-form--dark input[type="email"], .fm-form--dark input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .fm-form--dark textarea, .fm-form--dark select{color:#FFFFFF !important;font-size:17px !important;border-bottom:1px solid rgba(255,255,255,.45) !important;padding:12px 0 14px !important} .fm-form--dark input:focus, .fm-form--dark textarea:focus, .fm-form--dark select:focus{border-bottom-color:#FFFFFF !important} .fm-form--dark input::placeholder, .fm-form--dark textarea::placeholder{color:rgba(255,255,255,.6)} .fm-form--dark textarea{min-height:140px !important} /* browser autofill keeps the black ground */ .fm-form--dark input:-webkit-autofill, .fm-form--dark input:-webkit-autofill:hover, .fm-form--dark input:-webkit-autofill:focus{-webkit-text-fill-color:#FFFFFF !important;caret-color:#FFFFFF !important;-webkit-box-shadow:0 0 0 1000px #0A0A0A inset !important;transition:background-color 9999s ease-in-out 0s !important} /* the submit button, inverted for the black band */ .fm-form--dark button, .fm-form--dark input[type="submit"]{font-family:var(--fm-voice) !important;font-weight:400 !important;font-size:16px !important;letter-spacing:0 !important;text-transform:none !important;background:#FFFFFF !important;color:var(--fm-ink) !important;border:1px solid #FFFFFF !important;border-radius:0 !important;padding:0 22px !important;height:46px !important;margin-top:clamp(10px,1.6vw,18px) !important} .fm-form--dark button:hover, .fm-form--dark input[type="submit"]:hover{background:transparent !important;color:#FFFFFF !important} /* validation */ .fm-form--dark .validation-message, .fm-form--dark .error{font-size:16px !important;color:#F0A08C !important} /* the thank you, once it has replaced the form */ .fm-form--dark h3{color:#FFFFFF !important;font-size:clamp(24px,3vw,36px) !important} .fm-form--dark p{color:rgba(255,255,255,.84) !important;font-size:17px !important;line-height:1.6 !important} /* first and last name side by side on a wide screen */ @media (min-width:821px){ .fm-form--dark > form > table > tbody{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,2.6vw,30px)} .fm-form--dark > form > table > tbody > tr:nth-child(n+3){grid-column:1 / -1} } /* ========================================================== 37. PROPOSAL CHIPS The only extra piece these forms need. It sits above the form, not inside it. ========================================================== */ .fm-pf-chips{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(16px,2.4vw,26px) 0 clamp(24px,3.4vw,40px)} .fm-q .fm-pf-chips .fm-chip{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:transparent;color:#FFFFFF;font-family:var(--fm-data);text-transform:uppercase;line-height:1;cursor:pointer;transition:background var(--fm-fast) var(--fm-ease), color var(--fm-fast) var(--fm-ease), border-color var(--fm-fast) var(--fm-ease)} .fm-q .fm-pf-chips .fm-chip:hover{border-color:#FFFFFF} .fm-q .fm-pf-chips .fm-chip.is-on{background:var(--fm-butter);border-color:var(--fm-butter);color:var(--fm-ink)} .fm-q .fm-pf-chips .fm-chip:focus-visible{outline:2px solid var(--fm-butter);outline-offset:3px} .fm-q .fm-pf-chips .fm-chip[hidden]{display:none} /* ========================================================== 38. ONCORD'S HIDDEN FIELDS STAY HIDDEN Oncord adds fields of its own for spam and timing checks. It hides them itself. Earlier modules of mine set display:block on every input in the form, which overrode that and dragged them into view, and they filled with timestamps as you typed. Those rules are deleted. This only makes sure nothing can do it again. ========================================================== */ .fm-form input[type="hidden"], .fm-form--dark input[type="hidden"]{display:none !important} /* anything Oncord has hidden inline stays hidden */ .fm-form [style*="display:none"], .fm-form [style*="display: none"]{display:none !important} /* ---- the field font and brighter labels, dark band only ---- The contact page keeps module 14 exactly as it is. */ .fm-form--dark input[type="text"], .fm-form--dark input[type="email"], .fm-form--dark input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .fm-form--dark textarea, .fm-form--dark select{font-family:var(--fm-voice) !important;font-weight:300 !important;letter-spacing:-.01em !important} .fm-form--dark th, .fm-form--dark label, .fm-form--dark .form-row-label{opacity:1 !important} /* ---- the carry fields ---- quote_selections and quote_total are real fields so that Oncord emails them and records them, but nobody needs to see or tab into them. Hidden here rather than with forms:hidden, which was not reaching the email or the contact record. */ .fm-form .fm-form-carry, .fm-form--dark .fm-form-carry, .fm-form tr.fm-form-carry, .fm-form td.fm-form-carry{position:absolute !important;left:-200vw !important;width:1px !important;height:1px !important;overflow:hidden !important;margin:0 !important;padding:0 !important} /* ========================================================== 39. MOBILE HEADER, PUT BACK Module 27 set .fm-hd-nav to display:flex with no breakpoint, which overrode the original rule in module 11 that hides the nav below 860 and shows the burger. The links then ran off the right of the screen and the menu was unreachable. This restores the original behaviour and dresses the overlay for the black header. ========================================================== */ @media (max-width:860px){ /* the links and the button go away, the burger comes back */ .fm-hd-nav, body.fm-nav-light .fm-hd-nav, body.fm-nav-dark .fm-hd-nav{display:none !important} .fm-hd-cta{display:none !important} .fm-hd-burger, body.fm-nav-light .fm-hd-burger{display:block !important;position:relative;z-index:1001;width:26px;height:16px;background:none;border:0;padding:0;cursor:pointer} .fm-hd-burger span, body.fm-nav-light .fm-hd-burger span{background:#FFFFFF} /* the dropdown panel is desktop only */ .fm-hd-panel{display:none !important} /* the bar itself */ .fm-hd{padding-left:var(--fm-gut);padding-right:var(--fm-gut);justify-content:space-between} /* ---- the overlay, black to match the bar ---- */ .fm-hd-menu{background:var(--fm-black) !important;color:#FFFFFF !important;z-index:999;justify-content:flex-start;gap:0;padding:calc(var(--fm-head-h) + clamp(20px,5vh,46px)) var(--fm-gut) var(--fm-gut);overflow-y:auto} body.fm-menu-open .fm-hd{background:var(--fm-black) !important;color:#FFFFFF !important} body.fm-menu-open .fm-hd-logo img{filter:brightness(0) invert(1) !important} body.fm-menu-open .fm-hd-logo .fm-hd-word{color:#FFFFFF !important} body.fm-menu-open{overflow:hidden} .fm-hd-menu > a{display:block;color:#FFFFFF !important;font-family:var(--fm-voice);font-weight:300;font-size:clamp(28px,8vw,46px);letter-spacing:-.03em;line-height:1.1;padding:clamp(12px,2.2vh,18px) 0;border-bottom:1px solid rgba(255,255,255,.18)} /* the services group */ .fm-hd-menu .fm-mm-group{border-bottom:1px solid rgba(255,255,255,.18)} .fm-hd-menu .fm-mm-toggle{width:100%;justify-content:space-between;color:#FFFFFF !important;font-family:var(--fm-voice);font-weight:300;font-size:clamp(28px,8vw,46px);letter-spacing:-.03em;line-height:1.1;padding:clamp(12px,2.2vh,18px) 0} .fm-hd-menu .fm-mm-toggle .fm-hd-sub-mark{width:16px;height:16px;flex:0 0 auto} .fm-hd-menu .fm-mm-toggle .fm-hd-sub-mark::before{width:16px} .fm-hd-menu .fm-mm-toggle .fm-hd-sub-mark::after{height:16px} .fm-hd-menu .fm-mm-group.is-open .fm-hd-sub-mark{transform:rotate(45deg)} .fm-hd-menu .fm-mm-sub a{color:#FFFFFF !important;font-family:var(--fm-data);font-size:16px;letter-spacing:.06em;text-transform:none;padding:14px 0;border-top:1px solid rgba(255,255,255,.14)} .fm-hd-menu .fm-mm-sub a span{color:rgba(255,255,255,.66)} .fm-hd-menu .fm-mm-sub > div{padding-bottom:clamp(10px,2vh,18px)} /* work with us sits at the end as the inverted button */ .fm-hd-menu .fm-mm-cta{display:inline-flex !important;align-items:center;justify-content:center;gap:10px;margin-top:clamp(22px,4vh,38px);height:48px;padding:0 22px;border:1px solid #FFFFFF;background:#FFFFFF;color:var(--fm-ink) !important;font-family:var(--fm-voice);font-size:16px;letter-spacing:0;text-transform:none;border-bottom:1px solid #FFFFFF} } /* the desktop nav must never overflow its bar */ .fm-hd{flex-wrap:nowrap;min-width:0} .fm-hd-nav{min-width:0;flex-wrap:nowrap} @media (min-width:861px) and (max-width:1180px){ .fm-hd-nav{gap:clamp(10px,1.4vw,20px)} .fm-hd-nav a{font-size:16px;letter-spacing:.08em} .fm-hd-cta{padding:0 14px} } /* ========================================================== 40. BACK TO THE CONTACT PAGE PATTERN The quote and proposal forms now match the live contact form exactly: method="ajax" with forms:successcontent, which the Oncord docs give as the recommended pattern for an enquiry form, and which is already working on mobile on that page. One structural difference remains and is removed here. The quote form sits in step four of the builder, and inactive steps were display:none. A form that is not rendered when the page loads is the kind of thing that stops a script binding to it. Inactive panels are now clipped instead, so every form is in the document from the start. ========================================================== */ #fmQuote .fm-q-grid > div:first-child{position:relative;overflow:visible} /* Inactive steps move off to the side rather than sitting on top of the active one. Layering them over it meant the hidden step's form fields were still in front of the cards, so nothing was clickable. Off screen keeps the form in the document without it covering anything. */ .fm-q-panel{display:block !important} .fm-q-panel:not(.is-on){position:absolute;top:0;left:-200vw;width:100%;height:0;overflow:hidden;opacity:0} .fm-q-panel.is-on{position:relative;top:auto;left:auto;height:auto;overflow:visible;opacity:1} /* the success block, once it has replaced the form */ .fm-q .fm-q-done{border:1px solid var(--fm-butter);padding:clamp(24px,3vw,40px);margin-top:clamp(20px,3vw,34px)} .fm-q .fm-q-done h3{font-family:var(--fm-voice);font-weight:400;font-size:clamp(24px,3vw,38px);letter-spacing:-.035em;color:#FFFFFF;margin:0} .fm-q .fm-q-done p{font-family:var(--fm-voice);font-weight:300;font-size:17px;line-height:1.6;color:rgba(255,255,255,.84);margin-top:14px;max-width:54ch} /* no pseudo element arrow. It printed as text when the escape did not resolve, and an input cannot carry one anyway. The label in the markup is plain. */ /* ========================================================== 41. SMALL LABEL SCALE Supersedes the earlier mobile brief. The 16px floor does not apply to the site, only to form inputs, where anything under 16px makes iOS zoom in when a field is tapped. The small uppercase monospace text now reads as the quietest thing in a block rather than the loudest. Driven by two tokens, so it changes everywhere at once. ========================================================== */ :root{--fm-t-label:13px;--fm-ls-label:.14em;--fm-label-ink:#555555;--fm-label-ink-dark:#AAAAAA} @media (max-width:768px){ :root{--fm-t-label:12px} } /* ---- eyebrows ---- */ .fm-eyebrow, .fm-v2 p.fm-eyebrow, .fm-q p.fm-eyebrow, .fm-cta p.fm-eyebrow{font-family:var(--fm-data) !important;font-size:var(--fm-t-label) !important;letter-spacing:var(--fm-ls-label) !important;text-transform:uppercase !important;color:var(--fm-label-ink) !important;line-height:1.5 !important} .fm-q p.fm-eyebrow, .fm-dark .fm-eyebrow{color:var(--fm-label-ink-dark) !important} /* ---- every other small label ---- */ .fm-row-p, .fm-rev-meta, .fm-rev-credit, .fm-rev-more, .fm-48-l, .fm-cell-k, .fm-cell-more, .fm-sv-price, .fm-note cite, .fm-quote cite, .fm-paren, .fm-plat-item span, .fm-step-ph, .fm-q-step, .fm-q-est-l, .fm-q-est-note, .fm-q-line, .fm-q-fine, .fm-svc-price, .fm-svc-go, .fm-hd-panel-n, .fm-hd-panel-p, .fm-tst-meta, .fm-tst-credit, .fm-con-status-lab, .fm-foot-base{font-family:var(--fm-data) !important;font-size:var(--fm-t-label) !important;letter-spacing:var(--fm-ls-label) !important;text-transform:uppercase !important} /* list numbers */ .fm-row-n, .fm-inc .n, .fm-svc-item .fm-num, .fm-next div .n, .fm-num{font-family:var(--fm-data) !important;font-size:var(--fm-t-label) !important;letter-spacing:.06em !important} /* quieter on a dark ground */ .fm-q .fm-q-est-l, .fm-q .fm-q-est-note, .fm-q .fm-q-fine, .fm-q .fm-q-step, .fm-hd-panel-n, .fm-hd-panel-p, .fm-foot-base{color:var(--fm-label-ink-dark) !important} /* ---- pills ---- */ .fm-chip{font-size:12px !important;letter-spacing:.08em !important;padding:8px 14px !important;min-height:36px !important} .fm-chips{gap:7px} /* the proposal chips stay comfortable to tap */ .fm-q .fm-pf-chips .fm-chip{font-size:12px !important;letter-spacing:.08em !important;padding:10px 16px !important;min-height:40px !important} /* ---- form inputs keep 16px, or iOS zooms on tap ---- */ .fm-form input, .fm-form textarea, .fm-form select, .fm-form--dark input, .fm-form--dark textarea, .fm-form--dark select{font-size:16px !important} .fm-form--dark input:not([type="submit"]), .fm-form--dark textarea{font-size:17px !important} /* the field labels are labels, so they follow the small scale */ .fm-form--dark th, .fm-form--dark label, .fm-form--dark .form-row-label{font-size:var(--fm-t-label) !important;letter-spacing:.14em !important;color:#FFFFFF !important} /* ---- service rows on mobile: price under the title ---- */ @media (max-width:768px){ .fm-row{grid-template-columns:34px minmax(0,1fr);row-gap:4px;align-items:start} .fm-row-n{grid-column:1;grid-row:1} .fm-row-t{grid-column:2;grid-row:1} .fm-row-p{grid-column:2;grid-row:2;white-space:normal;color:var(--fm-label-ink) !important} .fm-row-a{display:none} /* headlines, intro and buttons stay where they are */ .fm-lede, .fm-hero-c p.fm-lede, .fm-q-sub{font-size:18px !important} .fm-body, .fm-step-d, .fm-for p, .fm-rev-body{font-size:17px !important} .fm-b, .fm-sec .fm-b, .fm-q .fm-b, .fm-cta .fm-b{font-size:16px !important} /* the hero eyebrow fits one line at this size */ .fm-hero-c p.fm-eyebrow{white-space:nowrap} } /* no widows after the resize */ h1, h2, h3, .fm-xl, .fm-h2, .fm-row-t, .fm-svc-title, .fm-rev-shout{text-wrap:balance} p, .fm-lede, .fm-body, .fm-step-d, .fm-for p{text-wrap:pretty} /* ========================================================== 42. REVIEW CARDS, LEFT ALIGNED The Reviews section is centred, which is right for the eyebrow and the heading, but the centring was reaching some parts of the cards and not others, so the shout line sat left while the meta and credit read as centred. The cards are left aligned throughout. ========================================================== */ .fm-c .fm-revs, .fm-revs, .fm-rev, .fm-rev *, .fm-rev .fm-rev-shout, .fm-rev .fm-rev-body, .fm-rev .fm-rev-more{text-align:left !important} /* the meta and credit sit at the two edges of the card */ .fm-rev .fm-rev-meta, .fm-rev .fm-rev-credit{display:flex !important;justify-content:space-between !important;gap:14px;width:100%} /* on a phone the credit stacks rather than splitting */ @media (max-width:768px){ .fm-rev .fm-rev-credit{flex-direction:column;gap:2px;justify-content:flex-start !important} } /* the single quote on a service page stays centred, that one is deliberate */ .fm-sec--quote .fm-quote, .fm-sec--quote .fm-quote p, .fm-sec--quote .fm-quote cite{text-align:center !important} /* ========================================================== 43. HOW IT RUNS, MOBILE GUTTER The steps rail was set to bleed past the section padding, so the first card and its text sat hard against the edge of the screen. It now stays inside the normal page gutter. ========================================================== */ @media (max-width:820px){ .fm-steps, .fm-steps--4{margin-inline:0 !important;padding-inline:0 !important;gap:16px} .fm-steps > .fm-step, .fm-steps > .fm-step:first-child, .fm-steps > .fm-step:last-child{flex:0 0 82%;padding:0 !important;border-left:0 !important} /* a little room at the end so the last card does not touch the right edge when you swipe to it */ .fm-steps::after{content:"";flex:0 0 2px} .fm-carousel-bar{margin-top:18px} } /* ========================================================== 44. ONE LOGO FILE The header mark and the footer wordmark are now the same asset, FRESHMADE.webp. The text fallbacks are gone, so these rules size the image in each place and keep it white on the black header. ========================================================== */ /* The header is black at every scroll position now, so the logo is always white. Module 11 still carries the old light/dark rules: body.fm-nav-light sets filter:brightness(0), which flattens the artwork to black and made it vanish on the black bar, and the menu-open rule did the same. Both are overridden here. */ .fm-hd-logo img, body.fm-nav-light .fm-hd-logo img, body.fm-nav-dark .fm-hd-logo img, body.fm-menu-open .fm-hd-logo img{display:block;height:clamp(15px,1.6vw,21px);width:auto;filter:brightness(0) invert(1) !important;opacity:1 !important;visibility:visible !important} .fm-foot-mark img{display:block;width:100%;height:auto;filter:brightness(0) invert(1)} /* ========================================================== 45. JOURNAL The grid is four columns of portrait cells. Every cell is the same 3:4 shape, so the rules never break and no cell can grow taller than its neighbours. The image fills whatever room is left above the words rather than forcing its own ratio, which is what kept pushing cells out of line. ========================================================== */ /* ---- title ---- */ /* the word is set tight, so the gap under it has to be put back by hand. Its line box sits well above its own baseline at this size. */ .fm-jr-word{margin:0;padding:0;text-align:center} .fm-jr-lede{font-family:var(--fm-voice);font-weight:300;font-size:clamp(18px,1.8vw,24px);line-height:1.45;max-width:46ch;margin:clamp(68px,10vw,128px) auto 0;text-align:center} /* ---- search and filters. No rule above, one below. ---- */ .fm-jr-bar{display:flex;gap:clamp(12px,2vw,28px);align-items:center;flex-wrap:wrap;padding:clamp(16px,2.4vw,26px) var(--fm-gut);border-top:0;border-bottom:1px solid var(--fm-rule)} .fm-jr-bar .fm-jr-wrap{max-width:1360px;margin:0 auto;width:100%;display:flex;gap:clamp(12px,2vw,28px);align-items:center;flex-wrap:wrap} .fm-jr-search{flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:12px} .fm-jr-search input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--fm-rule);padding:12px 0;min-height:48px;font-family:var(--fm-voice);font-weight:300;font-size:18px;color:inherit} .fm-jr-search input:focus{outline:none;border-bottom-color:var(--fm-ink)} .fm-jr-filters{display:flex;gap:8px;flex-wrap:wrap} .fm-jr-filters .fm-chip .c{opacity:.6} .fm-jr-filters .fm-chip.is-on{background:var(--fm-ink);color:var(--fm-paper);border-color:var(--fm-ink)} .fm-jr-filters .fm-chip.is-on .c{opacity:.7} .fm-jr-views{font-family:var(--fm-data);font-size:var(--fm-t-label);letter-spacing:var(--fm-ls-label);text-transform:uppercase;color:var(--fm-label-ink);display:flex;gap:10px;align-items:center;white-space:nowrap} .fm-jr-views button{background:none;border:0;font:inherit;color:inherit;cursor:pointer;padding:10px 0;min-height:44px;display:inline-block;white-space:nowrap} .fm-jr-views span{opacity:.5} .fm-jr-views button.is-on{color:var(--fm-ink);text-decoration:underline;text-underline-offset:5px} /* ---- the grid. Lines are drawn on the cells, so a gap in the layout reads as white rather than a grey block. ---- */ .fm-jr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:var(--fm-paper);border-top:1px solid var(--fm-rule);border-bottom:1px solid var(--fm-rule);transition:opacity .25s var(--fm-ease)} .fm-jr-grid.is-fading{opacity:0;transition-duration:.15s} .fm-cell{position:relative;background:var(--fm-paper);display:flex;flex-direction:column;padding:clamp(24px,2.6vw,40px);border-right:1px solid var(--fm-rule);border-bottom:1px solid var(--fm-rule);text-decoration:none;color:inherit;transition:background .4s var(--fm-ease)} .fm-jr-grid > .fm-cell:nth-child(4n){border-right:0} /* no feature cells on this page. Every cell is the same portrait shape, so the grid cannot leave a hole or break a line. */ .fm-jr-grid > .fm-cell--wide{grid-column:auto;grid-row:auto} .fm-cell-media{position:relative;display:block;overflow:hidden;background:var(--fm-paper-2);width:100%} .fm-cell-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--fm-ease)} .fm-cell-ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fm-data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fm-label-ink)} .fm-cell-k{font-family:var(--fm-data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fm-label-ink);display:flex;align-items:center;gap:10px} .fm-cell-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:block;flex:0 0 auto;transition:width .4s var(--fm-ease),height .4s var(--fm-ease)} .fm-cell-t{font-family:var(--fm-voice);font-weight:400;letter-spacing:-.03em;margin-top:10px;-webkit-box-orient:vertical} .fm-cell-shout{font-family:var(--fm-voice);font-weight:400;font-size:clamp(20px,1.9vw,26px);line-height:1.08;letter-spacing:-.035em;margin:0} .fm-cell-by{font-family:var(--fm-data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fm-label-ink);margin-top:10px} .fm-cell-sum{font-family:var(--fm-voice);font-weight:300;color:var(--fm-ink-soft);margin-top:8px;-webkit-box-orient:vertical} .fm-cell--quote .fm-cell-sum{margin-top:12px} .fm-cell-more{font-family:var(--fm-data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;transition:text-underline-offset .25s var(--fm-ease)} /* text only cells centre themselves in the square */ .fm-cell--stat, .fm-cell--quote{justify-content:center;align-items:flex-start} .fm-cell--stat .fm-cell-shout{color:var(--fm-ink-soft)} .fm-cell--quote .fm-cell-k{margin-bottom:clamp(14px,1.6vw,20px)} @media (hover:hover) and (pointer:fine){ a.fm-cell:hover{background:var(--fm-butter)} a.fm-cell:hover .fm-cell-dot{width:10px;height:10px} a.fm-cell:hover .fm-cell-more{text-underline-offset:2px} a.fm-cell:hover .fm-cell-media img{transform:scale(1.04)} } /* ---- list view ---- */ .fm-jr-list{display:none;border-top:1px solid var(--fm-ink)} .fm-lrow{display:grid;grid-template-columns:clamp(44px,5vw,72px) clamp(96px,10vw,150px) minmax(0,1fr) auto;gap:clamp(12px,2vw,30px);align-items:baseline;padding:clamp(16px,2.4vw,26px) var(--fm-gut);border-bottom:1px solid var(--fm-rule);text-decoration:none;color:inherit;transition:background .25s var(--fm-ease)} .fm-lrow:hover{background:var(--fm-butter)} .fm-lrow .n, .fm-lrow .k, .fm-lrow .d{font-family:var(--fm-data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fm-label-ink)} .fm-lrow .t{font-family:var(--fm-voice);font-weight:400;font-size:clamp(19px,1.9vw,24px);letter-spacing:-.03em;line-height:1.15} body.fm-jr-listview .fm-jr-grid{display:none} body.fm-jr-listview .fm-jr-list{display:block} .fm-jr-empty{padding:clamp(40px,8vw,90px) var(--fm-gut);text-align:center;display:none} .fm-jr-empty p{font-family:var(--fm-voice);font-weight:300;font-size:clamp(20px,2.4vw,30px);margin:0} /* Oncord's own Show More button, dressed as our button */ .fm-jr-more{display:flex;justify-content:center;padding:clamp(34px,5vw,70px) var(--fm-gut)} .fm-jr-more a, .fm-jr-more button, .fm-jr-wrapper .pagingShowMore a, .fm-jr-wrapper .showMore a{display:inline-flex !important;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 22px;background:var(--fm-ink) !important;color:#FFFFFF !important;border:1px solid var(--fm-ink) !important;border-radius:0 !important;font-family:var(--fm-voice) !important;font-weight:400 !important;font-size:16px !important;letter-spacing:0 !important;text-transform:none !important;text-decoration:none !important;cursor:pointer;transition:opacity .25s var(--fm-ease)} .fm-jr-more a:hover, .fm-jr-wrapper .showMore a:hover{opacity:.72} @media (max-width:1100px){ .fm-jr-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .fm-jr-grid > .fm-cell:nth-child(4n){border-right:1px solid var(--fm-rule)} .fm-jr-grid > .fm-cell:nth-child(2n){border-right:0} } @media (max-width:768px){ .fm-jr-grid{grid-template-columns:1fr} .fm-cell{padding:clamp(22px,7vw,30px);border-right:0} .fm-jr-grid > .fm-cell:nth-child(4n), .fm-jr-grid > .fm-cell:nth-child(2n){border-right:0} .fm-jr-word{font-size:clamp(72px,30vw,160px)} .fm-jr-lede{font-size:18px;margin-top:clamp(44px,12vw,68px);max-width:none} .fm-jr-views{width:100%} .fm-lrow{grid-template-columns:44px minmax(0,1fr);row-gap:6px} .fm-lrow .k, .fm-lrow .d{grid-column:2} } /* ========================================================== 46. THE EMPTY FIRST CELL Oncord's repeater wraps its output, and that wrapper lands in the grid as a child of its own. It has no cell styling, so it draws as a blank square with no rules and pushes every post one place along. display:contents makes a wrapper transparent to the grid, so the cells inside it become the grid items instead. Anything genuinely empty is removed from the layout altogether. ========================================================== */ .fm-jr-grid > *:not(.fm-cell){display:contents} .fm-jr-grid > *:not(.fm-cell):empty{display:none} .fm-jr-list > *:not(.fm-lrow){display:contents} .fm-jr-list > *:not(.fm-lrow):empty{display:none} /* the Show More button is the one wrapper that has to stay visible, so it is pulled out of the grid flow and centred beneath it */ .fm-jr-grid .showMore, .fm-jr-grid .pagingShowMore, .fm-jr-grid > [class*="paging"]{display:flex !important;grid-column:1 / -1;justify-content:center;padding:clamp(34px,5vw,70px) var(--fm-gut);border-top:1px solid var(--fm-rule)} /* ========================================================== 47. THE GAP UNDER THE JOURNAL TITLE A margin on the lede kept losing. The word is set at 0.78 line height, so its line box is shorter than the glyphs and the visual gap reads smaller than the number suggests, and an earlier module sets a margin on the same class. This uses a gap on the flex container instead, which no margin rule can cancel, and zeroes the margins on both sides of it. ========================================================== */ .fm-jr-top > .fm-pad > .fm-in, .fm-jr-top .fm-in{flex-direction:column;align-items:center;gap:clamp(90px,13vw,190px) !important} .fm-jr-top .fm-jr-word{padding:0 !important} @media (max-width:768px){ .fm-jr-top > .fm-pad > .fm-in, .fm-jr-top .fm-in{gap:clamp(56px,16vw,90px) !important} .fm-jr-top .fm-jr-lede{max-width:none} } /* ========================================================== 48. JOURNAL POST The article layout. Scoped to .fm-post so none of it can leak into the rest of the site, and written against our own classes rather than Oncord's post template output, which is not documented. ========================================================== */ .fm-post{padding-top:clamp(30px,4vw,56px)} .fm-post-in{max-width:1360px;margin:0 auto;padding:0 var(--fm-gut)} /* ---- masthead ---- */ .fm-post-crumbs{font-family:var(--fm-data);font-size:var(--fm-t-label);letter-spacing:var(--fm-ls-label);text-transform:uppercase;color:var(--fm-label-ink);display:flex;gap:10px;align-items:center;flex-wrap:wrap} .fm-post-crumbs a{text-decoration:none;color:inherit} .fm-post-crumbs a:hover{text-decoration:underline;text-underline-offset:4px} .fm-post-kicker{display:flex;align-items:center;gap:10px;margin:clamp(28px,4vw,52px) 0 0;font-family:var(--fm-data);font-size:var(--fm-t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fm-label-ink)} .fm-post-kicker .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto} .fm-post-title{margin:clamp(16px,2vw,24px) 0 0;text-wrap:balance} .fm-post-stand{font-family:var(--fm-voice);font-weight:300;font-size:clamp(19px,1.9vw,26px);line-height:1.45;letter-spacing:-.015em;color:var(--fm-ink-soft);margin:clamp(24px,3vw,40px) 0 0;max-width:46ch;text-wrap:pretty} .fm-post-meta{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;margin-top:clamp(30px,4vw,56px);padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--fm-rule)} .fm-post-meta div{display:flex;flex-direction:column;gap:6px} .fm-post-meta .k{font-family:var(--fm-data);font-size:var(--fm-t-label);letter-spacing:var(--fm-ls-label);text-transform:uppercase;color:var(--fm-label-ink)} .fm-post-meta .v{font-family:var(--fm-voice);font-weight:300;font-size:17px} .fm-post-hero{margin:clamp(30px,4vw,56px) 0 0;background:var(--fm-paper-2);aspect-ratio:16/9;overflow:hidden;position:relative} .fm-post-hero img{width:100%;height:100%;object-fit:cover;display:block} .fm-post-hero .fm-ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fm-data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fm-label-ink)} .fm-post figcaption{font-family:var(--fm-data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fm-label-ink);margin-top:12px} /* ---- the body, with a sticky contents rail ---- */ .fm-post-body{display:grid;padding:clamp(44px,6vw,90px) 0} .fm-post-rail{position:sticky;top:calc(var(--fm-head-h) + 32px);align-self:start} .fm-post-rail .k{font-family:var(--fm-data);font-size:var(--fm-t-label);letter-spacing:var(--fm-ls-label);text-transform:uppercase;color:var(--fm-label-ink);display:block;margin-bottom:14px} .fm-post-rail ol{list-style:none;margin:0;padding:0;counter-reset:fmtoc} .fm-post-rail li{counter-increment:fmtoc;border-top:1px solid var(--fm-rule)} .fm-post-rail a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:12px 0;text-decoration:none;color:inherit;font-family:var(--fm-voice);font-weight:300;font-size:16px;line-height:1.3;transition:opacity var(--fm-fast) var(--fm-ease)} .fm-post-rail a::before{content:counter(fmtoc,decimal-leading-zero);font-family:var(--fm-data);font-size:12px;letter-spacing:.1em;color:var(--fm-label-ink)} .fm-post-rail a:hover{opacity:.55} .fm-post-article p{font-family:var(--fm-voice);font-weight:300;font-size:19px;margin:0 0 1.3em;text-wrap:pretty} .fm-post-article p.lead{font-size:22px} .fm-post-article h2{font-family:var(--fm-voice);font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.1;letter-spacing:-.035em;margin:clamp(40px,5vw,72px) 0 .5em;text-wrap:balance} .fm-post-article h3{font-family:var(--fm-voice);font-weight:400;font-size:22px;line-height:1.2;letter-spacing:-.025em;margin:2em 0 .5em} .fm-post-article ul, .fm-post-article ol{margin:0 0 1.3em;padding-left:0;list-style:none} .fm-post-article li{font-family:var(--fm-voice);font-weight:300;font-size:19px;line-height:1.6;padding:10px 0 10px 32px;border-bottom:1px solid var(--fm-rule);position:relative} .fm-post-article li::before{content:"";position:absolute;left:4px;top:1.05em;width:6px;height:6px;border-radius:50%;background:var(--fm-ink)} .fm-post-article ol{counter-reset:fmn} .fm-post-article ol li{counter-increment:fmn} .fm-post-article ol li::before{content:counter(fmn,decimal-leading-zero);background:none;border-radius:0;width:auto;height:auto;left:0;top:11px;font-family:var(--fm-data);font-size:12px;letter-spacing:.1em;color:var(--fm-label-ink)} .fm-post-article a{text-decoration:underline;text-underline-offset:4px} .fm-post-article strong{font-weight:500} .fm-post-article blockquote{margin:clamp(36px,5vw,64px) 0;padding:0;border:0} .fm-post-article blockquote p{font-family:var(--fm-voice);font-weight:400;font-size:clamp(24px,3vw,40px);line-height:1.1;letter-spacing:-.035em;color:var(--fm-ink);margin:0;text-wrap:balance} .fm-post-article blockquote cite{display:block;font-style:normal;font-family:var(--fm-data);font-size:var(--fm-t-label);letter-spacing:var(--fm-ls-label);text-transform:uppercase;color:var(--fm-label-ink);margin-top:18px} .fm-post-pull{background:var(--fm-butter);padding:clamp(24px,3vw,40px);margin:clamp(36px,5vw,64px) 0} .fm-post-pull p{margin:0;font-size:19px} .fm-post-pull .k{font-family:var(--fm-data);font-size:var(--fm-t-label);letter-spacing:var(--fm-ls-label);text-transform:uppercase;display:block;margin-bottom:12px} .fm-post-fig{margin:clamp(36px,5vw,64px) 0} .fm-post-fig .box{background:var(--fm-paper-2);aspect-ratio:4/3;position:relative;overflow:hidden} .fm-post-fig img{width:100%;height:100%;object-fit:cover;display:block} .fm-post-fig .fm-ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fm-data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fm-label-ink)} /* ---- author ---- */ .fm-post-author{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,24px);align-items:start;margin-top:clamp(44px,6vw,80px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--fm-rule)} .fm-post-author .av{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--fm-paper-2);display:grid;place-items:center;flex:0 0 auto;font-family:var(--fm-data);font-size:12px;letter-spacing:.08em;color:var(--fm-label-ink)} .fm-post-author .k{font-family:var(--fm-data);font-size:var(--fm-t-label);letter-spacing:var(--fm-ls-label);text-transform:uppercase;color:var(--fm-label-ink)} .fm-post-author .n{font-family:var(--fm-voice);font-weight:400;font-size:21px;letter-spacing:-.02em;margin:6px 0 0} .fm-post-author p{font-family:var(--fm-voice);font-weight:300;font-size:17px;line-height:1.6;color:var(--fm-ink-soft);margin:10px 0 0} /* ---- previous and next ---- */ .fm-post-walk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--fm-rule);border-bottom:1px solid var(--fm-rule)} .fm-post-walk a{display:flex;flex-direction:column;gap:12px;padding:clamp(26px,3.4vw,50px) var(--fm-gut);text-decoration:none;color:inherit;transition:background .3s var(--fm-ease)} .fm-post-walk a + a{border-left:1px solid var(--fm-rule);text-align:right;align-items:flex-end} .fm-post-walk a:hover{background:var(--fm-butter)} .fm-post-walk .k{font-family:var(--fm-data);font-size:var(--fm-t-label);letter-spacing:var(--fm-ls-label);text-transform:uppercase;color:var(--fm-label-ink)} .fm-post-walk .t{font-family:var(--fm-voice);font-weight:400;font-size:clamp(19px,1.9vw,26px);line-height:1.14;letter-spacing:-.03em;max-width:20ch} /* ---- more from the journal ---- */ .fm-post-more{padding-top:clamp(44px,6vw,80px)} .fm-post-more-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding:0 var(--fm-gut) clamp(20px,3vw,32px)} .fm-post-more-head h2{font-family:var(--fm-voice);font-weight:400;font-size:clamp(26px,3vw,44px);letter-spacing:-.035em;margin:0} .fm-post-more-head a{font-family:var(--fm-data);font-size:var(--fm-t-label);letter-spacing:var(--fm-ls-label);text-transform:uppercase;color:inherit;text-decoration:underline;text-underline-offset:5px} /* ---- reading progress ---- */ .fm-post-prog{position:fixed;top:var(--fm-head-h);left:0;height:2px;background:var(--fm-butter);width:0;z-index:99;transition:width .1s linear} @media (max-width:1100px){ .fm-post-body{grid-template-columns:minmax(0,1fr);gap:0} .fm-post-rail{position:static;margin-bottom:clamp(30px,5vw,48px);max-width:68ch} } @media (max-width:768px){ .fm-post-walk{grid-template-columns:1fr} .fm-post-walk a + a{border-left:0;border-top:1px solid var(--fm-rule);text-align:left;align-items:flex-start} .fm-post-article p, .fm-post-article li{font-size:18px} .fm-post-article p.lead{font-size:20px} } /* ========================================================== 49. REAL IMAGES post_icon is the feature image on an Oncord post. Once a cell has one, the grey placeholder label hides itself, the same way the logo scroller and the step tiles work. ========================================================== */ .fm-cell-media:has(img[src]:not([src=""])) .fm-cell-ph, .fm-post-hero:has(img[src]:not([src=""])) .fm-ph, .fm-post-fig .box:has(img[src]:not([src=""])) .fm-ph{display:none} .fm-cell-media img[src=""], .fm-post-hero img[src=""], .fm-post-fig img[src=""]{display:none} /* no statement tiles on the journal any more, every cell is a post */ .fm-cell--stat{display:none !important} /* ========================================================== 50. JOURNAL CELLS, NOTHING CUT OFF Two faults, one cause. The cell was locked to a 3:4 shape with the image set to flex into whatever space was left, so a longer headline squeezed the image and the images came out different heights. The title and summary were clamped to make the text fit that fixed height, which cut words off. Now the image is a fixed 4:3 in every cell, so every image is identical, and the cell grows to fit its words. The grid row makes all cells in a row the same height, so the rules stay true and shorter cells simply carry more white at the bottom. ========================================================== */ .fm-jr-grid{grid-auto-rows:1fr} .fm-cell{aspect-ratio:auto;justify-content:flex-start;overflow:visible;min-height:0} .fm-cell-media{flex:0 0 auto;aspect-ratio:4/3;min-height:0;margin:0 0 clamp(14px,1.6vw,20px)} /* no clamping. The words set the height, not the other way round. */ .fm-cell-t{-webkit-line-clamp:none;display:block;overflow:visible;font-size:clamp(17px,1.35vw,20px);line-height:1.18} .fm-cell-sum{-webkit-line-clamp:none;display:block;overflow:visible;font-size:15px;line-height:1.55} .fm-cell--quote .fm-cell-sum{-webkit-line-clamp:none} /* the read more sits at the foot of the cell, so the links line up across a row even when the titles run to different lengths */ .fm-cell-more{margin-top:auto;padding-top:clamp(14px,1.6vw,20px)} @media (max-width:768px){ .fm-jr-grid{grid-auto-rows:auto} .fm-cell-media{aspect-ratio:3/2} } /* ---- the author photo sits in the circle, the initials are the fallback underneath it ---- */ .fm-post-author .av{position:relative} .fm-post-author .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block} .fm-post-author .av img[src=""]{display:none} .fm-post-author .av:has(img[src]:not([src=""])) span{display:none} .fm-post-author .av span{position:relative;z-index:1} /* with previous and next read from Oncord, one side may be missing */ .fm-post-walk:has(a:only-child){grid-template-columns:1fr} .fm-post-walk a:only-child{text-align:left;align-items:flex-start} /* ========================================================== 51. POST BODY, FULL WIDTH The body was a three column grid: rail, article, then an empty column holding the right hand side open, with the article capped at 68ch on top of that. Two caps at once made it read as a narrow strip under a full width hero. Now it is two columns. The rail takes a fixed measure on the left and the article takes everything that is left, so the body lines up with the hero above it. ========================================================== */ .fm-post-body{grid-template-columns:minmax(0,clamp(180px,17vw,260px)) minmax(0,1fr);gap:clamp(24px,4vw,80px)} /* the empty third column is no longer needed */ .fm-post-body > div:empty{display:none} .fm-post-article{max-width:none} /* a longer line needs a little more leading to stay readable */ .fm-post-article p{line-height:1.7} .fm-post-article p.lead{line-height:1.6} /* the author block still sits to a comfortable measure */ .fm-post-author{max-width:72ch} .fm-post-author p{max-width:60ch} @media (max-width:1100px){ .fm-post-body{grid-template-columns:minmax(0,1fr)} .fm-post-article{max-width:none} } /* ========================================================== 52. HIDDEN MEANS HIDDEN The script hides a cell by setting the hidden attribute, which the browser styles as display:none. That default loses to any class rule, and .fm-cell sets display:flex, so cells stayed on screen after a search or a filter had excluded them. Everything the journal can hide is restated here. ========================================================== */ .fm-cell[hidden], .fm-lrow[hidden], .fm-jr-grid [hidden], .fm-jr-list [hidden], [data-fm-type][hidden]{display:none !important} /* a source link under a section, for pricing pages and references */ .fm-post-src{margin:-.6em 0 1.6em !important} .fm-post-src a{font-family:var(--fm-data);font-size:var(--fm-t-label);letter-spacing:var(--fm-ls-label);text-transform:uppercase;color:var(--fm-label-ink);text-decoration:underline;text-underline-offset:5px;transition:color var(--fm-fast) var(--fm-ease)} .fm-post-src a:hover{color:var(--fm-ink)} .fm-post-src + .fm-post-src{margin-top:-1.2em !important} /* ========================================================== 53. ONE PAGE TITLE The three page titles had drifted apart. Studio was Fraunces 500 at up to 182px, Journal was 400 at up to 501px, and the Services hero was 400 at up to 120px. Different weights read as different typefaces, which is what made Studio look wrong beside the others. The Studio title is now the baseline for every page title, on desktop and on mobile. Its values, exactly as they were: weight 500, clamp(56px,10.2vw,182px), line height .94, tracking -.038em. One token drives all of them. ========================================================== */ :root{--fm-t-page:clamp(56px,10.2vw,182px);--fm-lh-page:.94;--fm-ls-page:-.038em;--fm-fw-page:500} .fm-top-head, .fm-jr-word, .fm-hero-c h1.fm-xl, .fm-sv-hero h1{font-family:var(--fm-voice) !important;font-weight:var(--fm-fw-page) !important;font-optical-sizing:auto;font-size:var(--fm-t-page) !important;line-height:var(--fm-lh-page) !important;letter-spacing:var(--fm-ls-page) !important;text-wrap:balance} /* a one word title sits on its own line. A sentence is allowed to break, so it gets a measure. */ .fm-top-head, .fm-jr-word{max-width:none} .fm-hero-c h1.fm-xl, .fm-sv-hero h1{max-width:16ch} /* a post headline is a sentence rather than a page name, so it sits one step below the page titles */ .fm-post-title{font-family:var(--fm-voice) !important;font-weight:var(--fm-fw-page) !important;font-size:clamp(38px,6.4vw,92px) !important;line-height:1.0 !important;letter-spacing:-.04em !important;max-width:18ch} /* the clamp already handles the phone, so nothing is overridden here. 56px is the Studio title's own mobile size. */ @media (max-width:768px){ .fm-hero-c h1.fm-xl, .fm-sv-hero h1{max-width:none} } /* ========================================================== 54. THE JOURNAL TOP MATCHES STUDIO The Studio page top is the reference. Its exact values: section padding clamp(140px,24vh,300px) top, clamp(40px,6vw,90px) bottom lede measure min(88vw,740px) gap under title clamp(44px,8vh,110px) and on a phone the lede drops to clamp(16px,4.2vw,20px) with a clamp(28px,6vh,44px) gap. The journal top now uses the same numbers, so the two pages sit identically. ========================================================== */ .fm-jr-top{--fm-top-measure:min(88vw,740px);padding-top:clamp(140px,24vh,300px) !important;padding-bottom:clamp(40px,6vw,90px) !important} /* the flex gap from module 45 is replaced by the Studio margin, so the two pages are driven by the same number */ .fm-jr-top > .fm-pad > .fm-in, .fm-jr-top .fm-in{display:block !important;text-align:center} .fm-jr-top .fm-jr-word{margin:0 !important;text-align:center} .fm-jr-top .fm-jr-lede{font-family:var(--fm-voice);font-weight:300;font-optical-sizing:auto;font-size:clamp(17px,1.5vw,27px) !important;line-height:1.42 !important;letter-spacing:-.016em !important;text-align:center;text-wrap:pretty;max-width:var(--fm-top-measure) !important;margin:clamp(44px,8vh,110px) auto 0 !important;padding:0 !important} @media (max-width:860px){ .fm-jr-top .fm-jr-lede{font-size:clamp(16px,4.2vw,20px) !important;line-height:1.5 !important;max-width:none !important;margin:clamp(28px,6vh,44px) auto 0 !important} }