/* ============================================================================================== VISUVATE, rebuilt from MEASURED values, not from a screenshot. Source: the template remixed into Matthew's Framer account, read through the Framer agent (project GFVGV7OhB9sYnvVS4LuW). Every number below came out of the canvas via framer.agent.serialize + getColorStyles + getTextStyles. The raw dump is in _content/framer-spec.json. COLOUR TOKENS, exactly as the project names them Charcoal rgb(23, 22, 20) Warm Charcoal rgb(28, 26, 23) Amber rgb(247, 183, 74) Amber Soft rgb(240, 206, 150) Concrete rgb(245, 243, 238) Ink rgb(23, 22, 20) Warm Grey rgb(84, 80, 74) Stone rgb(168, 162, 152) Dust rgb(216, 210, 202) White rgb(255, 255, 255) TEXT STYLES, exactly as the project defines them Display Cabinet Grotesk 72px / 120% / -0.02em Charcoal h1 Heading 1 Cabinet Grotesk 54px / 120% / -0.02em Ink h1 Heading 2 Cabinet Grotesk 36px / 130% / -0.04em Ink h2 Heading 3 Cabinet Grotesk 24px / 150% / 0 Ink h3 Heading 4 Cabinet Grotesk 20px / 150% / 0 Ink h4 Heading 5 Cabinet Grotesk 16px / 150% / 0 Ink h5 Heading 6 Cabinet Grotesk 14px / 150% / 0 Ink h6 Body 1 Geist 16px / 150% Warm Grey p Body 2 Geist 24px / 140% / -0.01em Ink p Body 3 Geist 18px / 150% Warm Grey p Body 4 Geist 14px / 150% Warm Grey p Body 5 Geist 12px / 150% Warm Grey p Lead Geist 40px / 140% / -0.02em Ink p LAYOUT, measured off the Desktop breakpoint container max-width 1600px, padding-inline 50px (content column 1100px at 1200px wide) breakpoints Desktop >=1200 · Tablet 810-1199.98 · Phone <=809.98 hero 800px tall radius 4px. Not 8, not 12. The template is nearly square-cornered throughout. grid lines 1px verticals in Dust, ruled down the full page height section padding-block / gap, per section: About 80 / 80 gap 20 Services 80 / 160 gap 48 Process 120 / 160 gap 56 Our Team 80 / 80 gap 80 fill Concrete Testimonial 160 / 160 gap 56 Blog 160 / 160 gap 56 sub-page content 120 / 120 gap 72 sub-page hero fill Concrete inner gaps section header 20 · blog row 32 · process steps 56 · team grid 20 cards team placeholder aspect-ratio 0.75, padding 32, radius 4, fill Amber process image 340px wide, aspect-ratio 1.16, radius 4 WHAT IS DELIBERATELY NOT CARRIED OVER, and why: the $180M+ / 450+ / 98% / 25+ stat band. Matthew: "theres parts we cant use like the stats where we go projects compelted etc so that will be removed". Every number on this site has to be checkable, and the only ones that are come off the Google profile. Also dropped: the twelve-person team grid (Ashwood is a sole trader) and the newsletter. ============================================================================================== */ :root{ --charcoal:rgb(23, 22, 20); --warm-charcoal:rgb(28, 26, 23); --amber:rgb(247, 183, 74); --amber-soft:rgb(240, 206, 150); --concrete:rgb(245, 243, 238); --ink:rgb(23, 22, 20); --warm-grey:rgb(84, 80, 74); --stone:rgb(168, 162, 152); --dust:rgb(216, 210, 202); --white:rgb(255, 255, 255); --display:'Cabinet Grotesk','Geist',system-ui,sans-serif; --text:'Geist',system-ui,-apple-system,sans-serif; --r:4px; /* the template's one radius */ --gutter:50px; --maxw:1600px; } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{margin:0;background:var(--white);color:var(--ink);font-family:var(--text); font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;} img{display:block;max-width:100%;} /* An HTML height attribute is a presentational hint that beats aspect-ratio, so any image we give a ratio must also be free to size itself. :where() keeps this at ZERO specificity. Written as a plain `img[width][height]` it outranked `.hero>img{height:100%}`, so on a phone the hero photograph collapsed to its natural ratio: 390x293 inside a 390x584 hero, leaving the overlay gradients painting over nothing underneath. */ :where(img[width][height]){height:auto;} a{color:inherit;} ::selection{background:var(--amber);color:var(--ink);} :focus-visible{outline:2px solid var(--amber);outline-offset:3px;} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);} @media(max-width:809.98px){ :root{ --gutter:20px; } } @media(min-width:810px) and (max-width:1199.98px){ :root{ --gutter:32px; } } /* section rhythm, taken from the canvas rather than invented as a fluid clamp */ .sec{padding-block:80px;} .sec-services{padding-block:80px 160px;} .sec-process{padding-block:120px 160px;} .sec-tall{padding-block:160px;} /* A section that holds the dark band sits straight after one with a 160px bottom pad, so the two stacked to 240px of empty white before a hard black edge. The band supplies its own internal padding, so this section does not need its own on top. */ .sec-band{padding-block:0 80px;} @media(max-width:1199.98px){ .sec-band{padding-block:0 56px;} } .sec-page{padding-block:120px;} .sec-concrete{background:var(--concrete);} @media(max-width:1199.98px){ .sec{padding-block:56px;} .sec-services{padding-block:56px 88px;} .sec-process{padding-block:72px 88px;} .sec-tall{padding-block:88px;} .sec-page{padding-block:72px;} } @media(max-width:809.98px){ .sec{padding-block:44px;} .sec-services,.sec-process,.sec-tall,.sec-page{padding-block:56px;} } /* the 1px verticals ruled down the light sections, in Dust */ .ruled{position:relative;} .ruled::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:repeating-linear-gradient(to right,var(--dust) 0 1px,transparent 1px 25%); opacity:.55;} .ruled>*{position:relative;z-index:1;} h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--display);color:var(--ink);} .t-display{font-size:72px;line-height:120%;letter-spacing:-0.02em;font-weight:800;text-transform:uppercase;} .t-h1{font-size:54px;line-height:120%;letter-spacing:-0.02em;font-weight:700;text-transform:uppercase;} .t-h2{font-size:36px;line-height:130%;letter-spacing:-0.04em;font-weight:700;text-transform:uppercase;} .t-h3{font-size:24px;line-height:150%;letter-spacing:0;font-weight:700;} .t-h4{font-size:20px;line-height:150%;letter-spacing:0;font-weight:700;} .t-h5{font-size:16px;line-height:150%;letter-spacing:0;font-weight:700;} .t-h6{font-size:14px;line-height:150%;letter-spacing:0;font-weight:700;} @media(max-width:1199.98px){ .t-display{font-size:54px;} .t-h1{font-size:40px;} .t-h2{font-size:30px;} } @media(max-width:809.98px){ .t-display{font-size:42px;} .t-h1{font-size:30px;} .t-h2{font-size:26px;} .t-h3{font-size:20px;} } .t-lead{font-family:var(--text);font-size:40px;line-height:140%;letter-spacing:-0.02em;color:var(--ink);margin:0;} .t-body1{font-family:var(--text);font-size:16px;line-height:150%;color:var(--warm-grey);margin:0;} .t-body2{font-family:var(--text);font-size:24px;line-height:140%;letter-spacing:-0.01em;color:var(--ink);margin:0;} .t-body3{font-family:var(--text);font-size:18px;line-height:150%;color:var(--warm-grey);margin:0;} .t-body4{font-family:var(--text);font-size:14px;line-height:150%;color:var(--warm-grey);margin:0;} .t-body5{font-family:var(--text);font-size:12px;line-height:150%;color:var(--warm-grey);margin:0;} @media(max-width:1199.98px){ .t-lead{font-size:28px;} .t-body2{font-size:20px;} } @media(max-width:809.98px){ .t-lead{font-size:22px;} .t-body2{font-size:18px;} .t-body3{font-size:16px;} } .lede{font-family:var(--text);font-size:16px;line-height:150%;color:var(--warm-grey);margin:0;} .on-dark,.on-dark h1,.on-dark h2,.on-dark h3{color:var(--white);} .on-dark .lede,.on-dark p{color:var(--dust);} /* the amber pill with a dot that introduces every section. padding and radius measured. */ .pill{display:inline-flex;align-items:center;gap:7px;background:var(--amber);color:var(--ink); border-radius:var(--r);padding:2px 8px 4px;font-family:var(--text);font-size:12px; line-height:150%;font-weight:500;letter-spacing:.04em;text-transform:uppercase;} .pill::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--ink);} .pill-dark{background:var(--warm-charcoal);color:var(--white);} .pill-dark::before{background:var(--amber);} .btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;text-decoration:none; border-radius:var(--r);padding:13px 18px;font-family:var(--text);font-size:14px;font-weight:500; line-height:150%;transition:background-color .18s,color .18s;} .btn i{font-style:normal;font-size:12px;} .btn-amber{background:var(--amber);color:var(--ink);} .btn-amber:hover{background:var(--amber-soft);} .btn-ink{background:var(--charcoal);color:var(--white);} .btn-ink:hover{background:var(--warm-charcoal);} .btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--dust);} .btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink);} .btn-ghost{background:rgba(20,18,16,.52);color:var(--white); box-shadow:inset 0 0 0 1px rgba(255,255,255,.58);backdrop-filter:blur(2px);} .btn-ghost:hover{background:rgba(20,18,16,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);} /* ---- nav ------------------------------------------------------------------------------------- Photographed at both scroll positions rather than read off the DOM: over the hero no bar at all. Transparent, sitting ON the photograph, items spread across the full content width (logo at the 50px gutter), and the CTA is WHITE. scrolled condenses to a black bar inset ~125px each side (1190 wide at 1440), and the CTA turns AMBER. It is fixed, not sticky, so the hero photograph starts at y=0 underneath it. Pages without a hero carry the solid state from the start, otherwise white type would land on the Concrete page hero and vanish. ---------------------------------------------------------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:14px 0;} /* the bar sits inside .nav > .wrap > .navbar, so ONLY the .wrap sets the horizontal inset, otherwise both add a gutter and the bar ends up inset twice (34px on a phone, not 14px) */ .nav>.wrap{padding-inline:var(--gutter);transition:padding .24s ease;} .navbar{display:flex;align-items:center;gap:22px;background:transparent;color:var(--white); border-radius:var(--r);padding:10px 10px 10px 20px;max-width:var(--maxw);margin-inline:auto; transition:background-color .24s ease;} body:not(.has-hero) .nav>.wrap,.nav[data-stuck]>.wrap{padding-inline:120px;} body:not(.has-hero) .navbar,.nav[data-stuck] .navbar{background:var(--warm-charcoal);padding-block:6px;} /* No body padding: that left a white strip above the Concrete hero. The hero starts at y=0 with the bar floating on it, exactly as the template does, and .phero's own top padding clears it. */ /* Measured on the template at 390, 900, 1024, 1150, 1280, 1366, 1440, 1512, 1728 and 1920: >=1200 over the hero no bar at all >=1200 scrolled Warm Charcoal, inset 120, capped 1360 wide, 57 tall <=1199 over the hero DUST rgb(224,214,199), inset 30 (15 on a phone), 56 tall <=1199 scrolled Warm Charcoal, same inset The transparent state only exists from 1200 up. Below that the bar is always solid, which is what a laptop window between 810 and 1199 was getting wrong. */ @media(max-width:1199.98px){ .nav>.wrap,body:not(.has-hero) .nav>.wrap,.nav[data-stuck]>.wrap{padding-inline:30px;} .navbar,body.has-hero .nav:not([data-stuck]) .navbar{background:var(--charcoal);padding-block:6px;} body:not(.has-hero) .navbar,.nav[data-stuck] .navbar{background:var(--warm-charcoal);} /* the bar is black at every state below 1200, so the type stays white and the CTA amber */ body.has-hero .nav:not([data-stuck]) .menu>a, body.has-hero .nav:not([data-stuck]) .menu .dd>button{color:var(--dust);} body.has-hero .nav:not([data-stuck]) .navbar .btn-amber{background:var(--amber);color:var(--ink);} } @media(max-width:809.98px){ .nav>.wrap,body:not(.has-hero) .nav>.wrap,.nav[data-stuck]>.wrap{padding-inline:15px;} .nav{padding-block:12px;} } /* The template puts an amber burger on its light bar. This bar is black at Matthew's request, so the burger is plain white lines, which reads cleaner on the dark fill. */ @media(max-width:400px){ .navbar .btn{display:none;} } .logo{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none;} /* a 5:1 wordmark needs far less height than the old stacked lockup, or it runs the bar too wide */ .logo img{height:30px;width:auto;display:block;} @media(max-width:1199.98px){ .logo img{height:27px;} } @media(max-width:809.98px){ .logo img{height:24px;} } .menu{display:none;gap:24px;margin-inline:auto;} @media(min-width:1060px){.menu{display:flex;align-items:center;}} .menu>a,.menu .dd>button{font:inherit;font-family:var(--text);font-size:14px;font-weight:400; line-height:150%;color:var(--dust);text-decoration:none;background:none;border:0;padding:0; cursor:pointer;display:inline-flex;align-items:center;gap:6px;} .menu>a:hover,.menu .dd>button:hover{color:var(--white);} .menu>a[aria-current]{color:var(--white);border-bottom:1.5px solid var(--amber);padding-bottom:2px;} .dd{position:relative;} .dd-menu{position:absolute;top:calc(100% + 18px);left:-16px;display:none;background:var(--white); color:var(--ink);border-radius:var(--r);padding:12px;min-width:540px; grid-template-columns:repeat(2,1fr);gap:1px 16px;box-shadow:0 24px 60px rgba(23,22,20,.3);} .dd:hover .dd-menu,.dd:focus-within .dd-menu{display:grid;} .dd-menu a{font-size:14px;line-height:150%;color:var(--warm-grey);text-decoration:none; padding:9px 12px;border-radius:var(--r);} .dd-menu a:hover{background:var(--concrete);color:var(--ink);} .burger{display:inline-flex;flex-direction:column;gap:4px;background:none;border:0;padding:10px; cursor:pointer;margin-left:auto;} @media(min-width:1060px){.burger{display:none;}} .burger i{width:19px;height:1.5px;background:var(--white);display:block;} .navbar .btn{flex:0 0 auto;} /* the template keeps the amber CTA in the bar at every width down to a phone */ .sheet{position:fixed;inset:0;z-index:70;background:var(--charcoal);color:var(--white);padding:20px; overflow:auto;display:none;} .sheet[data-on]{display:block;} .sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;} .sheet a{display:block;text-decoration:none;color:var(--white);padding:13px 0; border-bottom:1px solid rgba(255,255,255,.16);font-family:var(--display);font-weight:700;font-size:16px;} .sheet a.sub{font-family:var(--text);font-weight:400;font-size:14px;color:var(--dust);padding-left:14px;} .sheet .x{background:none;border:0;color:var(--white);font-size:26px;cursor:pointer;padding:4px 10px;line-height:1;} /* ---- hero: measured 1440x900 at top 0. Full bleed, 100vh, square corners. The text column starts exactly 50px from the viewport edge and is 550px wide. ---------------------------------- */ .hero{position:relative;width:100%;height:100vh;min-height:760px;overflow:clip;} @media(max-width:809.98px){.hero{height:93vh;min-height:560px;}} .hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} /* the canvas gradient: linear-gradient(90deg, rgb(0,0,0) 4%, rgba(255,255,255,.4) 60%), blend overlay at 0.5, plus a plain scrim so white type stays legible on any photograph */ .hero::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg, rgb(0,0,0) 4%, rgba(255,255,255,.4) 60%); mix-blend-mode:overlay;opacity:.5;} .hero::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.08) 100%);} @media(max-width:809.98px){ /* The copy sits between roughly 48% and 84% of the hero height, so the wash is weighted to be at its strongest there. Measured target: backdrop luminance around 45 behind the subtext, which was reading 71 on the right before this. */ .hero::after{background:linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.40) 30%, rgba(0,0,0,.68) 55%, rgba(0,0,0,.88) 100%);} } .hero-max{position:absolute;inset:0;z-index:2;max-width:var(--maxw);margin-inline:auto; display:flex;align-items:center;padding-top:95px;} @media(max-width:1199.98px){ .hero-max{padding-top:87px;} } @media(max-width:809.98px){ .hero-max{padding-top:72px;} } /* The template gives its headline a 550px text column and gets three lines. Mine was 600px wide with the 50px gutters INSIDE it, so the text only had 500px and "ROOMS PUT BACK." split onto a fourth line: four lines of 72px caps in a narrow column, which read as cramped. 720px here leaves ~620px of text, which holds the headline on three lines. */ .hero-in{width:720px;max-width:100%;padding-left:var(--gutter);padding-right:var(--gutter); display:flex;flex-direction:column;gap:32px;} .hero-title{display:flex;flex-direction:column;gap:20px;} .hero-copy{display:flex;flex-direction:column;gap:16px;} .hero h1{color:var(--white);margin:0;} .hero p{margin:0;color:var(--dust);} .hero .btns{display:flex;flex-wrap:wrap;gap:10px;} .strip{display:none;position:absolute;right:50px;bottom:50px;z-index:3;gap:8px;} @media(min-width:1200px){.strip{display:flex;}} .strip a{width:92px;border-radius:var(--r);overflow:clip;border:2px solid rgba(255,255,255,.3);} .strip img{width:100%;height:62px;object-fit:cover;display:block;} .strip a:hover{border-color:var(--amber);} /* the wide photograph under the intro: measured 1340x603, ratio 2.22, square corners */ .feature-shot{width:100%;height:auto;aspect-ratio:2.22;object-fit:cover;border-radius:0;margin-top:48px;} /* ---- intro row: section gap 20 ------------------------------------------------------------------ */ .intro{display:grid;gap:20px;} @media(min-width:1000px){.intro{grid-template-columns:1.25fr .75fr;gap:60px;}} /* four columns, row gap 32, each a number beside its text with gap 6. Number is Heading 4 (20), title Heading 3 (24), description Body 3 (18). */ .feat{display:grid;gap:32px;margin-top:48px;} @media(min-width:620px){.feat{grid-template-columns:repeat(2,1fr);}} @media(min-width:1000px){.feat{grid-template-columns:repeat(4,1fr);}} .feat>div{display:flex;gap:6px;align-items:flex-start;} .feat .n{font-family:var(--display);font-size:20px;line-height:150%;font-weight:700;color:var(--ink);flex:0 0 auto;} .feat .tx{display:flex;flex-direction:column;gap:6px;} .feat h3{font-size:24px;line-height:150%;margin:0;} .feat p{margin:0;font-family:var(--text);font-size:18px;line-height:150%;color:var(--warm-grey);} @media(max-width:1199.98px){.feat h3{font-size:20px;}.feat p{font-size:16px;}} /* ---- section head: gap 20 ------------------------------------------------------------------------ */ .shead{text-align:center;max-width:770px;margin-inline:auto;display:grid;gap:20px;justify-items:center;} .shead p{max-width:58ch;} .shead.left{text-align:left;margin-inline:0;max-width:none;justify-items:start;} .srow{display:flex;flex-wrap:wrap;gap:20px 60px;align-items:flex-end;justify-content:space-between;} .srow .shead{flex:1 1 585px;} /* ---- card: photo, then title and a line under it. radius 4, gap 10 ------------------------------- */ .cards{display:grid;gap:20px;margin-top:48px;} @media(min-width:680px){.cards{grid-template-columns:repeat(2,1fr);}} @media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr);}} .card{text-decoration:none;display:grid;gap:10px;align-content:start;} /* height:auto is load bearing: the HTML height attribute is a presentational hint that wins over aspect-ratio, which is why these rendered 433x440 (ratio 0.98) instead of the template's 436x327 (ratio 1.33). Measured radius on these is 0, not 4. */ .card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0;} .card h3{font-size:20px;line-height:150%;margin:6px 0 0;} .card p{margin:0;font-family:var(--text);font-size:14px;line-height:150%;color:var(--warm-grey);} .card:hover h3{color:var(--warm-grey);} .card .n{font-family:var(--text);font-size:12px;line-height:150%;letter-spacing:.04em; text-transform:uppercase;color:var(--warm-grey);} /* ---- dark band ------------------------------------------------------------------------------------ */ .band{background:var(--charcoal);border-radius:var(--r);overflow:hidden;} .band .in{display:grid;gap:40px;padding:50px;} @media(min-width:1000px){.band .in{grid-template-columns:1fr 1fr;gap:56px;align-items:center;}} @media(max-width:809.98px){.band .in{padding:28px;}} .band img{width:100%;height:auto;aspect-ratio:1.33;object-fit:cover;border-radius:var(--r);} .rows{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.16);} .rows li b{color:#fff;font-weight:600;} .rows li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.16); font-family:var(--text);font-size:14px;line-height:150%;color:var(--dust);} .rows i{flex:0 0 14px;height:1px;margin-top:11px;background:var(--amber);} /* the full-bleed photo CTA band the template ends every page with */ /* measured 1440x585 at 1440: full bleed, edge to edge, square corners */ .photoband{position:relative;width:100%;overflow:clip;} .photoband img{width:100%;height:auto;aspect-ratio:2.46;min-height:320px;object-fit:cover;border-radius:0;} @media(max-width:809.98px){.photoband img{height:320px;}} .photoband::after{content:"";position:absolute;inset:0; background:linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%);} .photoband .in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column; justify-content:center;gap:20px;align-items:flex-start; width:100%;max-width:var(--maxw);margin-inline:auto;padding:50px var(--gutter);} @media(max-width:809.98px){.photoband .in{padding:24px;}} .photoband h2{max-width:17ch;color:var(--white);} .photoband p{max-width:48ch;margin:0;color:var(--dust);} .photoband .btns{display:flex;flex-wrap:wrap;gap:10px;} /* ---- proof: the only numbers on the site. columns padded 0 20, gap 6 ------------------------------ */ .proof{display:grid;margin-top:40px;border-top:1px solid var(--dust);border-bottom:1px solid var(--dust);} @media(min-width:720px){.proof{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}} .proof div{display:grid;gap:6px;padding:24px 20px;} @media(min-width:720px){.proof div+div{border-left:1px solid var(--dust);}} .proof b{font-family:var(--display);font-size:36px;line-height:130%;letter-spacing:-0.04em;font-weight:700;} .proof span{font-family:var(--text);font-size:14px;line-height:150%;color:var(--warm-grey);} /* ---- steps: row gap 56 ----------------------------------------------------------------------------- */ .steps{display:grid;gap:56px;margin-top:56px;} @media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr);}} .steps div{display:grid;gap:6px;align-content:start;} .steps .n{font-family:var(--text);font-size:14px;line-height:150%;color:var(--warm-grey);} .steps h3{font-size:20px;line-height:150%;margin:6px 0 0;} .steps p{margin:0;font-family:var(--text);font-size:14px;line-height:150%;color:var(--warm-grey);} /* ---- reviews: placeholder card is radius 4, padding 32 ---------------------------------------------- */ .revs{display:grid;gap:20px;margin-top:56px;} @media(min-width:760px){.revs{grid-template-columns:repeat(2,1fr);}} @media(min-width:1080px){.revs{grid-template-columns:repeat(3,1fr);}} .rv{background:var(--concrete);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;gap:12px;} .rv .stars{color:var(--amber);font-size:13px;letter-spacing:.18em;} .rv p{margin:0;font-family:var(--text);font-size:16px;line-height:150%;color:var(--warm-grey);} .rv .who{margin-top:auto;padding-top:12px;font-family:var(--display);font-weight:700;font-size:16px;line-height:150%;} .rv .who span{display:block;font-family:var(--text);font-weight:400;font-size:14px;color:var(--stone);} .pull{text-align:center;max-width:770px;margin-inline:auto;display:grid;gap:20px;justify-items:center;} .pull blockquote{margin:0;font-family:var(--text);font-size:24px;line-height:140%;letter-spacing:-0.01em;color:var(--ink);} @media(min-width:1200px){.pull blockquote{font-size:40px;line-height:140%;letter-spacing:-0.02em;}} .pull .who{font-family:var(--display);font-weight:700;font-size:16px;} .pull .who span{display:block;font-family:var(--text);font-weight:400;font-size:14px;color:var(--stone);} /* ---- page hero: Concrete fill, like every sub page in the template ---------------------------------- */ /* The template's page-hero texture, measured off the live /our-team band rather than guessed: a 72px repeating vertical band that ramps from a soft dark edge out to nothing, reading 220–246 on the red channel against Concrete (245). It is very subtle on purpose — at a glance it looks like paper rather than stripes, which is the whole effect. The second gradient is the 1px Dust rule the rest of the site already uses, kept so the page hero lines up with the sections under it. */ .phero{background-color:var(--concrete);padding-block:150px 120px;} /* Matthew, 16-Oct: the individual service pages stay plain. The texture earns its place on the top-level pages where the hero is the whole section; across eighteen service pages it is noise. */ .phero.textured{ background-image: repeating-linear-gradient(90deg, rgba(23,22,20,.10) 0px, rgba(23,22,20,.045) 24px, rgba(23,22,20,.012) 52px, rgba(23,22,20,0) 72px); } @media(max-width:1199.98px){.phero{padding-block:124px 72px;}} /* On a phone the textured band ran 56px past the bottom of the photograph, which read as a slab of pattern hanging below it. 22px leaves a slight edge instead. */ @media(max-width:809.98px){.phero{padding-block:104px 22px;}} /* Matthew, 15-Oct: "bunch it all on the left then the image on the right for desktop and tablet". So the sub-page hero is a split: heading, label, copy and CTA in one column, the photograph beside it, rather than heading-left / copy-right with the photo in a band underneath. */ .phero .in{display:grid;gap:24px;align-items:center;} @media(min-width:810px){.phero .in{grid-template-columns:1.05fr .95fr;gap:48px;}} .phero .tx{display:flex;flex-direction:column;gap:16px;align-items:flex-start;} .phero .shot{width:100%;height:auto;aspect-ratio:1.33;object-fit:cover;border-radius:var(--r);} @media(max-width:809.98px){.phero .shot{aspect-ratio:1.6;}} .phero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;} .crumbs{font-family:var(--text);font-size:14px;line-height:150%;color:var(--warm-grey);margin:0 0 16px;} .crumbs a{text-decoration:none;} .crumbs i{font-style:normal;padding:0 7px;color:var(--stone);} /* ---- body + rail ------------------------------------------------------------------------------------- */ .bgrid{display:grid;gap:40px;align-items:start;} @media(min-width:1040px){.bgrid{grid-template-columns:1fr 340px;gap:56px;}} .prose{max-width:68ch;} .prose h2,.prose h3{font-family:var(--display);font-size:24px;line-height:150%;font-weight:700;margin:36px 0 12px;} .prose h2:first-child,.prose h3:first-child{margin-top:0;} .prose p{margin:0 0 16px;font-family:var(--text);font-size:18px;line-height:150%;color:var(--warm-grey);} .prose ul,.prose ol{margin:0 0 20px;padding-left:0;list-style:none;} .prose li{position:relative;padding-left:26px;margin-bottom:10px;font-size:16px;line-height:150%;color:var(--warm-grey);} .prose ul li::before{content:"";position:absolute;left:0;top:11px;width:13px;height:2px;background:var(--amber);} .prose ol{counter-reset:p;} .prose ol li{counter-increment:p;} .prose ol li::before{content:counter(p);position:absolute;left:0;top:0;font-weight:700;font-size:12px;color:var(--warm-grey);} .prose a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--amber);} .prose strong{color:var(--ink);} .rail{background:var(--concrete);border-radius:var(--r);padding:32px;display:grid;gap:12px;align-content:start;} @media(min-width:1040px){.rail{position:sticky;top:92px;}} .rail h3{font-family:var(--display);font-size:20px;line-height:150%;font-weight:700;} .rail p{margin:0 0 6px;font-family:var(--text);font-size:14px;line-height:150%;color:var(--warm-grey);} .rail .btn{width:100%;justify-content:center;} .rail ul{list-style:none;margin:10px 0 0;padding:20px 0 0;border-top:1px solid var(--dust);} .rail li{margin-bottom:8px;font-size:14px;line-height:150%;} .rail li a{color:var(--warm-grey);text-decoration:none;} .rail li a:hover{color:var(--ink);} /* ---- gallery ------------------------------------------------------------------------------------------- */ .gal{display:grid;gap:20px;margin-top:40px;} @media(min-width:680px){.gal{grid-template-columns:repeat(2,1fr);}} @media(min-width:1040px){.gal{grid-template-columns:repeat(3,1fr);}} .gal img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);} /* ---- faq --------------------------------------------------------------------------------------------- */ .faq{margin-top:32px;border-top:1px solid var(--dust);} .faq details{border-bottom:1px solid var(--dust);} .faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative; font-family:var(--display);font-weight:700;font-size:20px;line-height:150%;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%); color:var(--warm-grey);font-size:21px;font-weight:400;} .faq details[open] summary::after{content:"\2212";} .faq .a{padding:0 44px 22px 0;font-family:var(--text);font-size:16px;line-height:150%;color:var(--warm-grey);} /* ---- enquiry bar ---------------------------------------------------------------------------------------- */ .ebar{background:var(--concrete);border-radius:var(--r);padding:32px;display:grid;gap:8px;} @media(min-width:768px){.ebar{padding:50px;}} .ebar h2{font-family:var(--display);font-size:24px;line-height:150%;font-weight:700;} .ebar p{margin:0;font-family:var(--text);font-size:14px;line-height:150%;color:var(--warm-grey);} .frow{display:grid;gap:10px;margin-top:12px;} @media(min-width:1000px){.frow{grid-template-columns:repeat(4,1fr) auto;align-items:center;}} .frow input,.frow select{font:inherit;font-family:var(--text);font-size:16px;padding:13px 16px; border-radius:var(--r);border:1px solid var(--dust);background:var(--white);color:var(--ink);width:100%;} .frow select{appearance:none;} .frow input::placeholder{color:var(--stone);} /* ---- footer ---------------------------------------------------------------------------------------------- */ footer{background:var(--charcoal);color:var(--white);margin-top:56px;} footer .wrap{padding-block:80px 32px;} @media(max-width:809.98px){footer .wrap{padding-block:48px 28px;}} .fgrid{display:grid;gap:40px;} @media(min-width:860px){.fgrid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;}} .fgrid h4{font-family:var(--display);font-size:16px;line-height:150%;font-weight:700;margin:0 0 16px;color:var(--white);} .fgrid ul{list-style:none;margin:0;padding:0;} .fgrid li{margin-bottom:8px;} .fgrid a{font-family:var(--text);font-size:14px;line-height:150%;color:var(--dust);text-decoration:none;} .fgrid a:hover{color:var(--white);} .fgrid p{font-family:var(--text);font-size:14px;line-height:150%;color:var(--dust);margin:16px 0 0;max-width:36ch;} .fbot{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);display:flex; flex-wrap:wrap;gap:12px 24px;align-items:center;font-family:var(--text);font-size:12px; line-height:150%;color:var(--stone);} .fbot a{text-decoration:none;} .fbot .sp{flex:1 1 auto;} @media(max-width:859px){.fbot{justify-content:center;text-align:center;}.fbot .sp{display:none;}} /* ---- card CTA: the template's cards are bare, but a bare card does not read as pressable ------- */ .card .go{display:inline-flex;align-items:center;gap:7px;margin-top:10px; font-family:var(--text);font-size:14px;font-weight:500;line-height:150%;color:var(--ink);} .card .go i{font-style:normal;font-size:12px;transition:transform .18s ease;} .card .go::before{content:"";position:absolute;} .card:hover .go{color:var(--amberd);} .card:hover .go i{transform:translateX(3px);} /* ---- the sticky bar a phone gets, and the popup it opens --------------------------------------- */ .sticky-cta{display:none;} @media(max-width:809.98px){ .sticky-cta{display:grid;grid-template-columns:auto 1fr;gap:10px;position:fixed; left:0;right:0;bottom:0;z-index:55;padding:10px 15px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--dust);} .sticky-cta .btn{justify-content:center;padding:14px 18px;} /* clear the bar so the footer and the last section are never trapped underneath it */ footer{padding-bottom:72px;} } .modal{display:none;position:fixed;inset:0;z-index:80;background:rgba(23,22,20,.55); align-items:flex-end;justify-content:center;padding:0;} .modal[data-on]{display:flex;} @media(min-width:600px){.modal{align-items:center;padding:24px;}} .modal-card{background:var(--white);border-radius:12px 12px 0 0;padding:26px 20px calc(26px + env(safe-area-inset-bottom)); width:100%;max-width:520px;max-height:92vh;overflow:auto;position:relative;} @media(min-width:600px){.modal-card{border-radius:var(--r);padding:32px;}} .modal-card h2{margin:0 0 6px;} .modal-card>p{margin:0 0 18px;} .modal-x{position:absolute;top:12px;right:12px;background:none;border:0;font-size:28px; line-height:1;cursor:pointer;color:var(--warm-grey);padding:4px 10px;} .modal-card label{display:block;font-family:var(--text);font-size:13px;line-height:150%; color:var(--warm-grey);margin-bottom:12px;} .modal-card input,.modal-card select,.modal-card textarea{display:block;width:100%;margin-top:5px; font:inherit;font-family:var(--text);font-size:16px;padding:12px 14px;border-radius:var(--r); border:1px solid var(--dust);background:var(--white);color:var(--ink);} .modal-card textarea{resize:vertical;} .modal-actions{display:grid;gap:9px;margin-top:6px;} .modal-actions .btn{justify-content:center;} /* ---- the BetterWays credit --------------------------------------------------------------------- The same lockup the live Ashwood site carries, extracted from its own Framer custom code rather than redrawn. On a phone the whole bottom row centres, so the credit centres with it. */ .bw{display:inline-flex;align-items:center;gap:10px;text-decoration:none;} .bw img{height:22px;width:auto;opacity:.9;} .bw span{font-family:var(--text);font-size:12px;line-height:150%;color:var(--stone);} .bw:hover img{opacity:1;} .bw:hover span{color:var(--white);} @media(max-width:859px){ .fbot{flex-direction:column;gap:14px;} .bw{flex-direction:column;gap:8px;} .bw img{height:26px;} } /* ---- the About Statement Band ------------------------------------------------------------------ Read straight off the Framer canvas (node "About Statement Band" on /about): a full-bleed photograph with a three-stop vertical wash over it, linear-gradient(180deg, rgba(20,18,16,.6) 0%, rgba(20,18,16,.45) 45%, rgba(20,18,16,.78) 100%) Bottom-heavy on purpose, which is what seats the type and gives it the depth. Confirmed the same on the published site, so canvas and live agree. */ .statement{position:relative;width:100%;overflow:clip;isolation:isolate;} .statement>img{width:100%;height:clamp(420px,46vw,620px);object-fit:cover;display:block;} .statement::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg, rgba(20,18,16,.6) 0%, rgba(20,18,16,.45) 45%, rgba(20,18,16,.78) 100%);} .statement .in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column; justify-content:flex-end;align-items:flex-start;gap:20px;width:100%;max-width:var(--maxw); margin-inline:auto;padding:clamp(28px,4vw,56px) var(--gutter);} .statement h2{color:var(--white);max-width:20ch;} .statement p{color:var(--dust);max-width:56ch;margin:0;} .statement .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;} /* The display line carries the punch; this second line inside the same H1 carries the trade and the towns. One H1 element, so the structure stays correct, but the strongest signal on the page finally contains the words people search. */ .hero h1 .h1-line{display:block;margin-top:14px;font-family:var(--text);font-weight:500; font-size:19px;line-height:140%;letter-spacing:0;text-transform:none;color:var(--dust);} @media(max-width:1199.98px){ .hero h1 .h1-line{font-size:17px;margin-top:12px;} } @media(max-width:809.98px){ .hero h1 .h1-line{font-size:16px;margin-top:10px;} }