/* ========================================================================== Mobile Floor Coverings — shared stylesheet Every page uses this file and only this file. No page-level stylesheet, no new custom properties outside :root. If a page needs something this file lacks, it goes in this file. ========================================================================== */ /* --- 1. Fonts. Self-hosted. No Google Fonts request, no CDN. -------------- */ @font-face{ font-family:'Archivo'; src:url('../fonts/archivo-wdth-wght.woff2') format('woff2-variations'), url('../fonts/archivo-wdth-wght.woff2') format('woff2'); font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap; } @font-face{ font-family:'Inter'; src:url('../fonts/inter-latin-var.woff2') format('woff2-variations'), url('../fonts/inter-latin-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } /* --- 2. Tokens. Every contrast ratio below was computed, not estimated. --- */ :root{ /* Ink — #184888 is 74.9% of every non-white pixel in the client's logo */ --blue:#184888; /* 8.47:1 on paper */ --blue-deep:#0F3163; /* 11.98:1 */ --blue-mid:#2F6199; /* 5.97:1 */ --blue-wash:#E8EDF5; /* Ground. This was a warm cream lifted off the sunlit side of the van; across whole pages it read as a yellow cast, so the site chrome is now white with cool neutral greys and the warmth stays in the photograph. Changed 2026-08-26. */ --paper:#FFFFFF; --sand:#F1F4F8; --hair:#DDE3EB; /* Accent — black. Buttons, rules, eyebrows, the seam motif. The build first used an amber lifted from the sunlit van; it read as brown and was replaced 2026-08-26. Blue stays the brand, black does the work. */ --accent:#111317; /* 18.59:1 on white, and white on it is 18.59:1 */ --accent-hover:#184888; /* a black button turns brand blue on hover */ --on-dark-accent:#FFFFFF; /* the same role on --blue-deep grounds */ --ink:#15181D; /* 17.79:1 on white */ --muted:#58616F; /* 6.26:1 */ --on-dark:#C9D5E6; /* 8.63:1 on --blue-deep */ --ease:cubic-bezier(.22,1,.36,1); --dur-micro:200ms; --dur-reveal:400ms; --dur-hero:800ms; --hdr-h:66px; /* fixed. the hero subtracts exactly this */ --gap:1.25rem; --pad:clamp(1.25rem,5vw,2.5rem); --max:1180px; --max-prose:66ch; --section:clamp(3.5rem,8vw,6.5rem); --fs-h1:clamp(2.35rem,6.6vw,4.3rem); --fs-h2:clamp(1.85rem,4.1vw,3.05rem); --fs-h3:clamp(1.05rem,1.6vw,1.22rem); /* Vault R8 — a phone invents a dark version of any page that has not declared one, at paint time, after computed style. `only` is the keyword that disables it; `light` alone does not. Also drives scrollbars, the list a underneath does the keyboard and screen-reader work, so this is operable with no pointer at all and degrades to two stacked photographs if the JS never runs. ------------------------------------------------------------------------ */ .ba{ position:relative; margin:2.5rem 0 0; border-radius:2px; overflow:hidden; touch-action:pan-y; user-select:none; -webkit-user-select:none; background:var(--sand, #f4f4f2); line-height:0; } .ba__img{ display:block; width:100%; height:auto; -webkit-user-drag:none; user-drag:none; pointer-events:none; } /* The clipped layer sits on top and is inset from the RIGHT, so it paints on the LEFT — which is why it holds the BEFORE, matching the Before label in that corner. Getting this pair the wrong way round shows the finished house under the word "Before", and it is not obvious from the code alone. clip-path is cheaper than animating width and it never reflows. */ .ba__clip{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--x,50%)) 0 0); } .ba__clip .ba__img{ height:100%; object-fit:cover } .ba__line{ position:absolute; top:0; bottom:0; left:var(--x,50%); width:2px; margin-left:-1px; background:#fff; z-index:3; pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.22); } .ba__grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:34px; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); } .ba__grip svg{ width:15px; height:15px } .ba__tag{ position:absolute; bottom:0; z-index:2; padding:.9rem 1.05rem; font-family:'Archivo',sans-serif; font-weight:800; font-stretch:92%; font-size:.95rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; line-height:1; text-shadow:0 1px 6px rgba(0,0,0,.6); pointer-events:none; } .ba__tag--before{ left:0 } .ba__tag--after{ right:0 } /* The operable control. Transparent, stretched over the whole component, with a thumb the width of a thumb. */ .ba__range{ position:absolute; inset:0; width:100%; height:100%; margin:0; z-index:4; -webkit-appearance:none; appearance:none; background:transparent; cursor:ew-resize; } .ba__range::-webkit-slider-thumb{ -webkit-appearance:none; width:44px; height:100vh; background:transparent; cursor:ew-resize; } .ba__range::-moz-range-thumb{ width:44px; height:100vh; border:0; background:transparent; cursor:ew-resize; } .ba__range::-moz-range-track{ background:transparent } .ba__range:focus-visible{ outline:3px solid var(--brand); outline-offset:3px } @media (max-width:560px){ .ba__tag{ font-size:.82rem; padding:.7rem .8rem } .ba__grip{ gap:26px } } @media (prefers-reduced-motion:reduce){ .ba{ scroll-behavior:auto } } /* =========================================================================== Recent-work gallery, 25 Sep 2026. The ten photographs are a mix of 4:3 and 3:4, so every cell is a square and the picture is cropped to it — a grid of one shape reads as a gallery, and a CSS grid avoids the iPhone column-gap bug that multi-column albums hit. =========================================================================== */ .work-grid{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:2.2rem; } .work-card{ margin:0 } .work-card img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:2px; background:var(--sand, #f1f0ec); } .work-card figcaption{ margin-top:.55rem; font-size:.86rem; line-height:1.45; color:var(--muted, #5a5f66); } @media (min-width:620px){ .work-grid{ grid-template-columns:repeat(2,1fr); gap:1.15rem } } @media (min-width:1000px){ .work-grid{ grid-template-columns:repeat(3,1fr); gap:1.25rem } } /* This pair already has BEFORE and AFTER written across the photographs, so the component's own corner labels are switched off. Remove the modifier once clean originals arrive and they come back. */ .ba--captioned .ba__tag{ display:none } /* =========================================================================== 25 Sep 2026, second round. =========================================================================== */ /* The hero headline is now the wordmark kodyn sent, knocked out white. It is 2.22:1 where the old mark was square, so every width here is set to land on the SAME height the square mark had at that tier — the two short-screen caps exist because the CTAs were measured landing behind the fixed call bar. */ .hero__h1--logo img{ width:min(420px, 78vw) } @media (max-height:430px) and (orientation:landscape){ .hero__h1--logo img{ width:min(165px, 32vw) } } @media (max-height:600px) and (orientation:portrait){ .hero__h1--logo img{ width:min(250px, 66vw) } } /* Rounded photographs, to match the newer builds (kodyn, 25 Sep). Those sites carry --radius:14px; this one had square corners everywhere. Anything that crops or overlays needs overflow:hidden as well, or the corner shows through at the child's square edge. */ :root{ --radius:14px } .work-card img, .shot img, .grid figure img, .ba, .rev, .card{ border-radius:var(--radius) } .tile, .tile a{ border-radius:var(--radius); overflow:hidden } /* =========================================================================== 1 Oct 2026 — John's email: the front page first. "I don't want it to be the full page", "I want the Whatcom and Skagit part below the business name and all the writing much larger", "I don't need the location added a second time on the front page", and "myself and my old customers need aggressively large font". kodyn: "dont make the wording to big just up it to where it still looks good" — so every size below is a step up, not a jump, and the page keeps its proportions. This block is last in the file on purpose; media queries carry no extra specificity, so it wins over every earlier hero tier it restates. =========================================================================== */ /* --- The hero: about three quarters of a screen, not all of it ----------- */ .hero{ min-height:clamp(500px, 74vh, 820px); min-height:clamp(500px, 74svh, 820px); } /* The photograph was oversized by 14% so the entrance and the scroll scrub could move it without showing an edge. Both are gone (25 Sep), so the crop was throwing away a seventh of the picture for nothing. */ .hero__img{ top:0; left:0; width:100%; height:100% } .hero__content{ padding-top:calc(var(--hdr-h) + clamp(1.5rem,4vw,2.75rem)); padding-bottom:clamp(2.75rem,6vw,4.25rem); } .hero__h1--logo{ margin:0 } .hero__h1--logo img{ width:min(500px, 82vw) } /* The county line, now under the name. Full white and a size up from the old eyebrow, which was 12px at 78% white over a busy photograph — the line John called hard to read. The shadow is tight, so it reads as the type being legible rather than as a glow. */ .hero__where{ max-width:none; margin:1rem auto 0; font-family:'Archivo',sans-serif; font-weight:700; font-stretch:100%; font-size:clamp(1.05rem, 1.7vw, 1.35rem); line-height:1.3; letter-spacing:.1em; text-transform:uppercase; color:#fff; text-shadow:0 1px 2px rgba(6,20,42,.55), 0 2px 14px rgba(6,20,42,.6); } .hero__dot{ margin-inline:.35em } .hero .btn-row{ margin-top:1.9rem; gap:.85rem } .hero .btn{ font-size:1.06rem; min-height:56px; padding:.9rem 1.7rem } /* Phones: the two halves of the county line on their own lines (a wrapped middle dot ends up orphaned at the start of the second), and the two buttons stacked at one width rather than ragged. Portrait only: a 568x320 landscape phone is under 600px wide too, and stacking there put the Call button under the fixed call bar. */ @media (max-width:600px) and (orientation:portrait){ .hero__where span{ display:block } .hero__where .hero__dot{ display:none } .hero__where{ font-size:clamp(1rem, 4.9vw, 1.2rem); letter-spacing:.08em } .hero .btn-row{ flex-direction:column; align-items:stretch; max-width:21rem; margin-inline:auto; margin-top:1.6rem; } } /* The short-screen tiers, restated for the new pieces. A landscape phone still needs the hero to be only as tall as its content, and the CTAs still have to clear the fixed call bar. */ @media (max-height:520px) and (orientation:landscape){ .hero{ min-height:auto } .hero__content{ padding-top:calc(var(--hdr-h) + .6rem); padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px) + 1rem); } .hero__where{ font-size:.98rem; margin-top:.55rem } .hero .btn-row{ margin-top:1rem } .hero .btn{ min-height:48px; padding:.65rem 1.25rem; font-size:.95rem } } @media (max-height:430px) and (orientation:landscape){ .hero__h1--logo img{ width:min(150px, 30vw) } .hero__where{ font-size:.9rem; margin-top:.45rem } .hero .btn-row{ margin-top:.8rem } } @media (max-height:600px) and (orientation:portrait){ .hero__h1--logo img{ width:min(250px, 66vw) } } /* --- Reading sizes, every page ------------------------------------------ */ body{ font-size:1.1875rem } /* 17px -> 19px */ :root{ --fs-h3:clamp(1.2rem, 1.8vw, 1.4rem) } .lede{ font-size:clamp(1.2rem, 2.1vw, 1.42rem) } .small{ font-size:.98rem } .eyebrow{ font-size:.9rem } .btn{ font-size:1.02rem } .nav > a{ font-size:.88rem } .mobmenu nav a{ font-size:1.12rem } /* One row only where one row fits. At this size the four labels and three dividers measure 1291px, so the two-up grid that used to start at 1180 now starts at 1380 (1291 plus the side padding). */ .trustbar__item{ font-size:.86rem } @media (max-width:1379px){ .trustbar__in{ display:grid; grid-template-columns:repeat(2,auto); justify-content:center; gap:.85rem 1.75rem; } .trustbar__div{ display:none } .trustbar__item{ white-space:normal } } /* ...and phones keep their own wrapping cluster, which the grid above would otherwise replace (it comes later in the file). */ @media (max-width:520px){ .trustbar__in{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.4rem 1rem; } .trustbar__item{ font-size:.84rem } } .quote p{ font-size:1.14rem } .quote footer{ font-size:.94rem } figcaption{ font-size:.95rem } .work-card figcaption{ font-size:1rem } .rev p{ font-size:1.08rem } .rev__src{ font-size:.76rem } .rev footer{ font-size:.92rem } .marquee__ctrl{ font-size:.82rem } .tile__label{ font-size:1.15rem } @media (max-width:560px){ .tile__label{ font-size:1.08rem } } .rates{ font-size:1.08rem } .rates caption{ font-size:.95rem } .rates thead th{ font-size:.88rem } .towns li{ font-size:1rem } .field label,legend{ font-size:1rem } .form-status{ font-size:1.05rem } .ftr h2,.ftr h3{ font-size:.88rem } .ftr li,.ftr__nap{ font-size:1.02rem } .ftr__base{ font-size:.92rem } .prose h3{ font-size:1.25rem } .prose .updated{ font-size:1rem } /* The header phone button is a .btn with its own compact size, set because the header row only just fits at 1041px. The .btn step-up above is later in the file and would otherwise win; this holds it to a small step instead. */ .hdr__tel{ font-size:.9rem } /* Inner-page title block on a short landscape phone. At 568x320 the bigger buttons (302 + 231px) no longer fit side by side in the 511px column, so the Call button wrapped onto a second row and landed under the fixed call bar. Compact buttons here, exactly as the home hero does at this height, keep them on one row (about 470px) and above the bar. */ @media (max-height:540px) and (orientation:landscape){ .pagehead .btn{ min-height:44px; padding:.6rem 1.1rem; font-size:.9rem } } /* =========================================================================== 13 Oct 2026 — John: "On the top row I want bigger clearer fonts. My customer base is over 60 and it needs to be really easy to see. The font size on the top row needs to be as big as the font lower. You can spread things out and make the page bigger and bigger fonts on the bottom row on the first page also. My number one priority is to be able to open the first page and see things without glasses." Measured before, on a 1366px laptop: the menu was 14px at 82% white straight on the photograph, the header phone button 14px, the strip under the hero 14px grey; the county line below was 22px and the hero buttons 17px. Last in the file on purpose: it restates sizes from every earlier layer. =========================================================================== */ /* --- The top row ---------------------------------------------------------- */ /* A solid navy bar from the first paint, not only once scrolled: thin white type on a busy photograph is what made it hard to read, and John has a new hero photo coming that may be lighter still. */ :root{ --hdr-h:84px } .hdr{ background:rgba(15,49,99,.97); border-bottom-color:rgba(255,255,255,.14) } .nav{ gap:.2rem } .nav > a{ font-size:1.25rem; font-weight:700; font-stretch:100%; /* 14px -> 20px */ letter-spacing:.035em; color:#fff; padding:.55rem .62rem; } .nav > a::after{ left:.62rem; right:.62rem; bottom:.15rem; height:3px } .hdr__logo{ gap:.7rem } .hdr__mark{ height:52px } .hdr__name b{ font-size:1.5rem } .hdr__name span{ font-size:.74rem; letter-spacing:.14em; color:#fff } .hdr .social{ width:44px; height:44px; color:#fff } .hdr .social svg{ width:22px; height:22px } .hdr__tel{ font-size:1.25rem; min-height:52px; padding:.7rem 1.15rem; gap:.55rem } .hdr__tel svg{ width:20px; height:20px } /* The menu that opens from the button */ .mobmenu nav a{ font-size:1.4rem; font-weight:700; font-stretch:100%; color:#fff; letter-spacing:.04em } .mobmenu__foot .btn{ font-size:1.2rem; min-height:56px } /* --- The hero: the "font lower" goes up a step too ----------------------- */ @media (min-width:701px){ .hero__where{ font-size:clamp(1.2rem, 1.9vw, 1.55rem) } /* 22px -> 25px */ .hero .btn-row{ margin-top:2.1rem; gap:1rem } .hero .btn{ font-size:1.25rem; min-height:64px; padding:1rem 2rem } /* 17 -> 20px */ } /* --- The bottom row: the strip under the hero ----------------------------- */ .trustbar{ padding:1.5rem 0 } .trustbar__item{ font-size:1.2rem; color:var(--ink); /* 14px grey -> 19px near-black */ letter-spacing:.035em; gap:.7rem; } .trustbar__icon{ width:28px; height:28px } .trustbar__div{ height:30px } /* The bigger menu needs 1223px (measured: 454 + logo 203 + 413 + gaps and side padding), and the header was capped at 1180px wide on every screen, so it could never fit. The cap goes to 1320px, and below 1260px the ☰ menu takes over (the five "phone menu" breakpoints above moved from 1060 to 1259px; the fixed call bar at the bottom of the screen still starts at 1060px). */ .hdr__in{ max-width:1320px } /* 1061-1259px: ☰ menu, but no bottom call bar at this width, so the phone number stays in the top row beside the menu button. */ @media (min-width:1061px) and (max-width:1259px){ .hdr__in{ grid-template-columns:1fr auto auto } .nav--right{ display:flex; justify-self:end; order:2 } .nav--right > a, .nav--right .hdr__socials{ display:none } .hdr__burger{ order:3; width:52px; height:52px } } /* Phones: a slightly shorter bar, still a bigger logo than before. */ @media (max-width:700px){ :root{ --hdr-h:74px } .hdr__mark{ height:46px } .hdr__name b{ font-size:1.32rem } .hdr__name span{ font-size:.68rem } .hdr__burger{ width:52px; height:52px } } /* The strip as a two-by-two block on screens that can hold it (one row at this size would need 1742px), one column below 900px, and phones keep their own cluster with only the free-measuring line. */ .trustbar__in{ display:grid; grid-template-columns:repeat(2, auto); justify-content:center; gap:1rem 3rem; } .trustbar__div{ display:none } .trustbar__item{ white-space:normal } @media (max-width:899px){ .trustbar__in{ grid-template-columns:auto; gap:.85rem } } @media (max-width:520px){ .trustbar{ padding:1.15rem 0 } .trustbar__in{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1rem } .trustbar__item{ font-size:1.08rem; text-align:left } /* text stays beside its icon when it wraps */ .trustbar__icon{ width:22px; height:22px } } /* Full menu: each side takes what it needs and the logo centres in what is left. Equal halves (1fr auto 1fr) pushed the wider right-hand group 9-29px into the side padding between 1260 and 1300px; the logo now sits at most ~20px off true centre, which nobody can see. */ @media (min-width:1260px){ .hdr__in{ grid-template-columns:auto 1fr auto } .hdr__logo{ justify-self:center } } /* =========================================================================== 13 Oct 2026, second pass — Kody: "please make the rest of the words on the main page larger as well. i think his concern is with the whole main page". Measured first (1366px laptop): section labels 14px, review names and places 15px, review source tags 12px, review quotes 17px, buttons 16px, photo captions 15px, fine print 16px, town list 16px, form labels 16px, footer 14-16px; paragraphs 19px. First scoped to the homepage; since 15 Oct 2026 it applies to every page, so the inner pages read at the same sizes as the first page. Each size is about a quarter up; nothing stays under 17px. (:root keeps the specificity the old .home selectors had.) =========================================================================== */ :root body{ font-size:1.3125rem } /* 19 -> 21px */ :root .lede{ font-size:clamp(1.3rem, 2.2vw, 1.6rem) } /* 22.7 -> 25.6 */ :root .small{ font-size:1.15rem } /* 15.7 -> 18.4 */ :root .eyebrow{ font-size:1.1rem } /* 14.4 -> 17.6 */ :root h2{ font-size:clamp(2.15rem, 4.6vw, 3.25rem) } /* phone 29.6 -> 34.4 */ :root h3{ font-size:clamp(1.4rem, 2vw, 1.7rem) } /* 22.4 -> 27 */ :root .section .btn{ font-size:1.2rem; min-height:58px; padding:.95rem 1.7rem } /* 16.3 -> 19.2 */ :root .tile__label{ font-size:1.45rem } /* 18.4 -> 23 */ @media (max-width:560px){ :root .tile__label{ font-size:1.25rem } } :root figcaption{ font-size:1.12rem } /* 15.2 -> 18 */ :root .num{ font-size:1.3rem } /* 17 -> 21 */ :root .rev p{ font-size:1.3rem } /* 17.3 -> 20.8 */ :root .rev footer, :root .rev cite{ font-size:1.12rem } /* 14.7 -> 18 */ :root .rev__src{ font-size:1.08rem } /* 12.2 -> 17.3 */ :root .marquee__ctrl{ font-size:1.08rem; min-height:48px } /* 13 -> 17.3 */ :root .towns li{ font-size:1.25rem } /* 16 -> 20 */ :root .field label, :root legend{ font-size:1.2rem } /* 16 -> 19.2 */ :root .field input, :root .field select, :root .field textarea{ font-size:1.2rem } :root .field input, :root .field select{ min-height:56px } :root .form-status{ font-size:1.2rem } /* Parts that only the inner pages have, brought to the same sizes */ :root .quote p{ font-size:1.3rem } /* 18.2 -> 20.8, as the home reviews */ :root .quote footer, :root .quote cite{ font-size:1.12rem } /* 15 -> 18 */ :root .prose .updated{ font-size:1.08rem } /* 16 -> 17.3 */ .pagehead .eyebrow{ margin-inline:auto } /* its capped box hugged the left, so the label sat off-centre over the title */ @media (min-width:701px) and (min-height:541px){ .pagehead .btn{ font-size:1.25rem; min-height:64px; padding:1rem 2rem } /* 16.3 -> 20, as the home hero */ } /* Short screens keep the compact title block (section 29). Measured at 320x568: the bigger label wrapped to three lines on /flooring and the lede alone was 144px, so the buttons sat up to 62px under the call bar (31px before the size change, too). The lede goes on short portrait screens, the same trade section 29 makes on landscape phones: the headline says it and the buttons are the point. */ /* Phones: the title block has to fit above the call bar on first paint. At 21px the lede wrapped one or two lines more and pushed the buttons under the bar at 375x667 and 360x640 (clear before), so inside the title block only it keeps its 19px and the label 16px; everything below stays at the new sizes. */ @media (max-width:700px){ :root .pagehead .lede{ font-size:1.2rem } :root .pagehead .eyebrow{ font-size:1rem } } @media (max-height:540px) and (orientation:landscape){ :root .pagehead .lede{ font-size:1rem } :root .pagehead .eyebrow{ font-size:1rem } } @media (max-height:600px) and (orientation:portrait){ :root .pagehead .lede{ display:none } :root .pagehead .eyebrow{ font-size:1rem } } /* Footer and phone call bar: every page */ .ftr h2,.ftr h3{ font-size:1.1rem } /* 14 -> 17.6 */ .ftr li,.ftr__nap,.ftr p, .ftr a:not(.ftr__phone):not(.social){ font-size:1.2rem } /* 16.3 -> 19.2 */ .ftr .small{ font-size:1.12rem } .ftr__base,.ftr__base p,.ftr__base a,.ftr__base span{ font-size:1.08rem } /* 14.7 -> 17.3 */ @media (max-width:1060px){ .callbar{ font-size:1.2rem } } /* 16.8 -> 19.2 */ /* 13-15 Oct 2026: the hero install animation (.hero__video, .hero__note) was retired; the hero is John's still photographs again. */ /* 15 Oct 2026. Narrow landscape phones (568x320): with Archivo loaded the two hero buttons measure 277 + 211px plus the gap, 9px wider than the 493px row, so they wrapped to two rows and the Call button sat under the call bar (it was like this before the 15 Oct changes too). Slightly less side padding keeps them on one row. */ @media (max-height:540px) and (orientation:landscape) and (max-width:640px){ .hero .btn{ padding-inline:.95rem } } /* Same defect one size up (also older than 15 Oct): the 13 Oct "font lower" rule gives the hero buttons 20px type and 2rem side padding on every screen over 700px wide, short landscape phones included. At 740x360 they wrapped to two rows, 82px under the call bar. Keep the 20px type and trim only the padding. */ @media (max-height:540px) and (orientation:landscape) and (min-width:701px){ .hero .btn{ padding-inline:1.1rem; min-height:56px } .hero .btn-row{ gap:.6rem } } /* 27 Oct 2026, John (email): "On the website where is says our services can you do 2x3, 2 across and 3 down, so that the pictures are larger." Two columns from 900px up (it was three), so six tiles sit 2 across and 3 down. Narrower screens already show two across, and phones one per row, which is larger still, so they are unchanged. */ @media (min-width:900px){ .tiles{ grid-template-columns:repeat(2,1fr); gap:1.25rem } } /* =========================================================================== 27 Oct 2026, John (email): "Also on the front page I don't like the dark blue band at the top. Maybe something softer/lighter. It looks cheap, it should feel warmer/softer." The band is the header, solid navy (#0F3163) since 13 Oct. Tried in turn: warm cream (kodyn: "i dont think he meant to change the color to white"), then a softer denim blue #3A6896, then kodyn: "maybe try a light grey". So: a light grey bar, #E4E7EB, with deep-navy type (10.3:1). The type keeps every 13 Oct size, because John still has to read it without glasses. The phone number becomes a solid brand-blue button, white type 9.05:1. Same header on every page; the phone menu that drops from it matches. =========================================================================== */ .hdr, .hdr.is-stuck, .hdr--solid{ background:#E4E7EB; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:#D3D8DF; box-shadow:0 2px 14px rgba(20,40,70,.10); } .hdr__name, .hdr__name span{ color:#0F3163 } .nav > a, .nav > a:hover, .nav > a[aria-current="page"]{ color:#0F3163 } .nav > a::after{ background:#184888 } .hdr .social{ color:#0F3163 } .hdr .social:hover{ color:#0F3163; background:rgba(15,49,99,.08) } .hdr__tel.btn--onDark{ background:#184888; color:#fff; border-color:#184888 } .hdr__tel.btn--onDark:hover{ background:#0F3163; border-color:#0F3163; color:#fff } .hdr__burger{ border-color:rgba(15,49,99,.35) } .hdr__burger span, .hdr__burger span::before, .hdr__burger span::after{ background:#0F3163 } .hdr__burger[aria-expanded="true"] span{ background:transparent } .hdr :focus-visible{ outline-color:#0F3163 } @media (max-width:1259px){ .mobmenu{ background:#E4E7EB; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:#D3D8DF; box-shadow:0 18px 30px -18px rgba(20,40,70,.35); } .mobmenu nav a{ color:#0F3163; border-bottom-color:rgba(15,49,99,.12) } .mobmenu nav a:hover{ color:#184888 } .mobmenu nav a[aria-current="page"]{ color:#0F3163; box-shadow:inset 3px 0 0 #184888 } .mobmenu .social{ color:#0F3163; border-color:rgba(15,49,99,.25) } .mobmenu__foot .btn--onDark{ background:#184888; color:#fff; border-color:#184888 } .mobmenu :focus-visible{ outline-color:#0F3163 } } /* =========================================================================== 27 Oct 2026, John (email), computer version: "The links at the top of the website I would like them stretched out and larger font, so it takes up the whole page horizontally." From 1260px (where the full menu shows; below it the ☰ menu is unchanged): the bar's 1320px cap is lifted so it runs the full width of the screen, each side's links spread evenly across its half, and the type grows with the screen: about 21px on a 1280 laptop, 22px at 1440, 25px at 1600, 28px on a 1920 monitor (it was 20px). The logo and phone button grow with it. Measured at 1260-2560px: no overlap, no wrapping. =========================================================================== */ @media (min-width:1260px){ .hdr__in{ max-width:none; grid-template-columns:minmax(max-content,1fr) max-content minmax(max-content,1fr); padding-inline:clamp(1.25rem, 2.6vw, 3.5rem); gap:clamp(1rem, 2.4vw, 3.25rem); } .nav--left, .nav--right{ justify-self:stretch; justify-content:space-evenly; gap:.4rem } .nav > a{ font-size:clamp(1.3rem, 1.46vw, 1.75rem); padding-inline:.4rem } .nav > a::after{ left:.4rem; right:.4rem } .hdr__mark{ height:clamp(52px, 3.6vw, 64px) } .hdr__name b{ font-size:clamp(1.5rem, 1.75vw, 1.95rem) } .hdr__name span{ font-size:clamp(.74rem, .85vw, .95rem) } .hdr__tel{ font-size:clamp(1.25rem, 1.4vw, 1.6rem); min-height:clamp(52px, 3.8vw, 62px) } .hdr__tel svg{ width:clamp(20px, 1.4vw, 24px); height:clamp(20px, 1.4vw, 24px) } .hdr .social{ width:clamp(44px, 3vw, 52px); height:clamp(44px, 3vw, 52px) } .hdr .social svg{ width:clamp(22px, 1.6vw, 26px); height:clamp(22px, 1.6vw, 26px) } .hdr__call{ margin-left:0 } } /* =========================================================================== 29 Oct 2026, John (email). 1-2. The strip under the hero: "Please put these 3 bullet points on the same line and the list of materials sold underneath." Free measuring · Whatcom & Skagit County · Family owned since 1986 in one row, and his materials list on its own line beneath. Phones (520px and under) keep showing only Free measuring from the row (the hero right above already says "Whatcom & Skagit County · Since 1986"), plus the materials line. =========================================================================== */ .trustbar__in{ display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; } .trustbar__row{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.75rem clamp(1.25rem, 3vw, 2.5rem); } @media (min-width:1000px){ .trustbar__row{ flex-wrap:nowrap } .trustbar__row .trustbar__div{ display:block; height:30px } .trustbar__row .trustbar__item{ white-space:nowrap } } .trustbar__materials{ display:flex; align-items:center; justify-content:center; gap:.7rem; margin:0; max-width:none; font-family:'Inter',sans-serif; font-weight:700; font-size:1.25rem; line-height:1.4; color:var(--ink); } .trustbar__materials .trustbar__icon{ width:28px; height:28px } @media (max-width:520px){ .trustbar__in{ gap:.7rem } .trustbar__materials{ font-size:1.08rem; align-items:flex-start; text-align:left } .trustbar__materials .trustbar__icon{ width:22px; height:22px; margin-top:.15rem } } /* =========================================================================== 3. "Tell us what you need": "please make it wider to fit the whole page (large font)". The form now uses the full width (up to 1400px) instead of a 640px column: name, phone and address side by side on a computer, bigger labels, boxes, tick boxes and button. Phones stack one field per row. =========================================================================== */ #book > .wrap{ max-width:1400px } #book .form{ max-width:none; gap:1.5rem } @media (min-width:900px){ #book .field-row--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.5rem } } #book .field label, #book legend{ font-size:1.45rem; font-weight:700 } #book .field input, #book .field textarea{ font-size:1.35rem; padding:.85rem 1rem } #book .field input{ min-height:64px } #book .field textarea{ min-height:170px } #book .checks{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:.9rem 2rem } #book .checks label{ font-size:1.35rem; font-weight:600 } #book .checks input{ width:28px; height:28px } #book .book__send{ font-size:1.35rem; min-height:68px; padding:1rem 2.2rem; white-space:normal; line-height:1.25; } #book .form > p.small{ font-size:1.1rem } @media (max-width:600px){ #book .field label, #book legend{ font-size:1.3rem } #book .book__send{ width:100%; font-size:1.2rem } } /* 3 Nov 2026, John (email): the homepage warehouse row is three photos across (carpet display, forklift, hardwood display). They are three different shapes, so all three are cut to the same 4:3 frame and line up. Three across from 900px, one under another below that (auto-fit gave an orphan at tablet widths). */ .warehouse__trio{ grid-template-columns:1fr } @media (min-width:900px){ .warehouse__trio{ grid-template-columns:repeat(3, minmax(0, 1fr)) } } .warehouse__trio figure{ margin:0 } .warehouse__trio img{ aspect-ratio:4/3; height:auto; object-fit:cover; display:block }