/* ========================================================================== NEXT LOOK STEP (16 Oct 2026, DECISIONS 16 Oct 03:35). Loaded by includes/header.cfm only when request.rsNext is true (?rsnext=on cookie, ?rsnext=1 for one request, or request.rsNextLive in inc_reskin.cfm), after every other reskin stylesheet. Every rule sits under body.ft-reskin.rs-next, so going live is only request.rsNextLive = true. Rhys: "the images are kinda low quality and this doesnt change much at all on phone and its still wordpress vibe and supplier page looked better before with more colours. two shades of green for everythig can dull things pretty quicky", then "ok coolio" to: 1. Phones: the hero photo sits clear across the top (no green wash) and the heading goes underneath on a solid dark green band. The homepage hero keeps its quote box over the cottage. 2. One warm colour beside the greens, a boiler-flame amber, for labels, step numbers, the figures in number strips, small highlights and a few warm sand sections. Never on buttons: buttons and links stay the one dark green #194F35; bright green #5DAC46 stays the good-news accent. 3. The suppliers page gets its old colours back (dark band, bright green figures, red crosses against green ticks, amber numbers). Never: a coloured bar down the left edge of anything, em or en dashes, anything that restyles the quote box (.quote-widget). Accent (17 Oct): Rhys picked our own brighter greens over amber, coral and sky blue on a swatch sheet ("green or blue better i reckon. the green keeps it within the logo"); amber had gone in without his look first ("we shouldve iterated on that first"). Tokens were renamed from --rs-amber / --rs-sand to --rs-accent / --rs-tint the same day. Contrast (WCAG, computed 17 Oct): --rs-accent #8FD27B 6.5:1 on the #183F2F band --rs-accent-ink #2F7A3D 5.0:1 on cream, 5.3:1 on white, 4.8:1 on the tint --rs-tint #EEF6EA dark green ink 10.6:1 ========================================================================== */ body.ft-reskin.rs-next { --rs-accent: #8FD27B; --rs-accent-ink: #2F7A3D; --rs-tint: #EEF6EA; --rs-tint-hair: #D6E7CF; --rs-band: #183F2F; } /* ---------- 1. The accent (brighter greens since 17 Oct) ---------- */ /* Small uppercase labels above headings */ body.ft-reskin.rs-next .rs-eyebrow, body.ft-reskin.rs-next .ft-about .ab-eyebrow, body.ft-reskin.rs-next .ft-prices .pt-eyebrow, body.ft-reskin.rs-next .nx-page .nx-main .nx-kicker, body.ft-reskin.rs-next .ft-home-mobile .hm-section-heading .hm-eyebrow, body.ft-reskin.rs-next .ft-home-desktop .hd-eyebrow:not(:where(.hero-home *)) { color: var(--rs-accent-ink); } /* ...and on the dark surfaces the bright amber: the phone band under the photo, and from 992px the left of the photo, where the shade is 0.8 or more (4.9:1 even over a white sky). Between 768 and 991px the words sit on the photo's top-down shade, so the label keeps its pale green. */ @media (max-width: 767.98px), (min-width: 992px) { body.ft-reskin.rs-next .rs-hero--photo .rs-eyebrow, body.ft-reskin.rs-next .ft-about .ab-hero .ab-eyebrow { color: var(--rs-accent); } } @media (min-width: 768px) and (max-width: 991.98px) { body.ft-reskin.rs-next .rs-hero--photo .rs-eyebrow, body.ft-reskin.rs-next .ft-about .ab-hero .ab-eyebrow { color: #CFE5C5; } } /* Step numbers 01 02 03 */ body.ft-reskin.rs-next .rs-num, body.ft-reskin.rs-next .ft-about .ab-num, body.ft-reskin.rs-next .ft-home-mobile .hm-step-number, body.ft-reskin.rs-next .ft-home-desktop .hd-steps li > span { color: var(--rs-accent-ink); } /* Steps laid across the page: their top rule is the amber, 2px (a top rule, never an edge bar) */ @media (min-width: 768px) { body.ft-reskin.rs-next .rs-steps--row li { border-top: 2px solid var(--rs-accent); } } /* Number strips: a short amber rule over each figure */ body.ft-reskin.rs-next .rs-fact strong::before, body.ft-reskin.rs-next .ft-about .ab-fact strong::before, body.ft-reskin.rs-next .hm-tick-cell::before { content: ""; display: block; width: 24px; height: 3px; border-radius: 2px; background: var(--rs-accent); margin: 0 0 9px; } /* Icons in feature cards: amber on a sand circle */ body.ft-reskin.rs-next .rs-page .rs-icon, body.ft-reskin.rs-next .ft-about .ab-value i { background: var(--rs-tint); color: var(--rs-accent-ink); } /* ---------- 2. Warm sand sections (one or two a page) ---------- In a sand section the small grey-green labels go a shade darker so they keep 4.5:1. */ body.ft-reskin.rs-next .rs-section.rs-rsn-sand, body.ft-reskin.rs-next .rs-place .rs-section--white:has(.rs-steps), body.ft-reskin.rs-next .rs-search-how, body.ft-reskin.rs-next .rs-sup .rs-section--wash:has(.rs-sup-steps), body.ft-reskin.rs-next .rs-testimonials > .rs-section, body.ft-reskin.rs-next .ft-about .ab-section:has(.ab-steps), body.ft-reskin.rs-next .ft-about .ab-section:has(.ab-quotes), body.ft-reskin.rs-next .ft-home-mobile .hm-how, body.ft-reskin.rs-next .rs-page .rs-hero:not(.rs-hero--photo) { background: var(--rs-tint); --rs-label: #566B47; --rs-hair: var(--rs-tint-hair); --rs-field: #E2D2B4; } @media (min-width: 992px) { body.ft-reskin.rs-next .ft-home-desktop .price-alerts-section { background: var(--rs-tint); } } /* The calm heroes of the tool, guide, FAQ and legal pages (no photo) are sand rather than the green wash, so those pages open warm. The news page's "Earlier briefs" band, the trends page's "What does a fill cost at your home?" card and the foot of its average card, and the contact page's "Ordering is easiest online" note are sand too. */ body.ft-reskin.rs-next .nx-page .nx-earlier { background: var(--rs-tint); border-top-color: var(--rs-tint-hair); } body.ft-reskin.rs-next .nx-page .nx-earlier .nx-list li { border-top-color: var(--rs-tint-hair); } body.ft-reskin.rs-next .nx-page .nx-earlier .nx-list time { color: #566B47; } body.ft-reskin.rs-next .ft-prices .pt-quote-next { background: var(--rs-tint); border-color: var(--rs-tint-hair); } body.ft-reskin.rs-next .ft-prices .pt-today-foot { background: var(--rs-tint); } body.ft-reskin.rs-next .rs-contact-note { background: var(--rs-tint); } /* ---------- 3. Phone photo heroes (under 768px) ---------- The photo is a clear strip across the top, 56vw tall (at 390px it is drawn at or below its own pixel size, so it stays sharp), cover with the page's own focal point. The words, buttons, breadcrumb and any quote box sit under it on the solid dark green band, so every white text style keeps working. The homepage hero is not a .rs-hero--photo and is not touched. */ @media (max-width: 767.98px) { body.ft-reskin.rs-next .rs-page .rs-hero--photo, body.ft-reskin.rs-next .ft-about .ab-hero, body.ft-reskin.rs-next .nx-page .nx-hero { background-image: none; background-color: var(--rs-band); padding-top: 0; } body.ft-reskin.rs-next .rs-page .rs-hero--photo::before, body.ft-reskin.rs-next .ft-about .ab-hero::before, body.ft-reskin.rs-next .nx-page .nx-hero::before { content: ""; position: static; display: block; height: 56vw; margin: 0 0 22px; background-color: #24372B; background-image: var(--rs-hero-photo, none); background-size: cover; background-repeat: no-repeat; background-position: inherit; } body.ft-reskin.rs-next .ft-about .ab-hero::before { background-image: var(--rs-photo-village); } body.ft-reskin.rs-next .nx-page .nx-hero::before { background-image: var(--rs-photo-hills); background-position: center 45%; } body.ft-reskin.rs-next .nx-page .nx-mast { padding-top: 0; } body.ft-reskin.rs-next .nx-page .nx-mast .nx-kicker, body.ft-reskin.rs-next .nx-page .nx-mast .nx-kicker a { color: var(--rs-accent); } } /* ---------- 4. Laptop photo heroes (992px and up) ---------- The shade runs left to right: dark under the words (the text column ends at about 58% of the width at every laptop size), then it lifts fast so the right of the photo shows clearly. White text needs a shade of 0.60 or more to keep 4.5:1 even over a white sky, and the amber label 0.79 or more: here it is 0.88 at the left edge, 0.80 at 30%, 0.62 at 58%. */ @media (min-width: 992px) { body.ft-reskin.rs-next .rs-page .rs-hero--photo::before, body.ft-reskin.rs-next .ft-about .ab-hero::before { background: linear-gradient(90deg, rgba(12,34,23,0.88) 0%, rgba(12,34,23,0.80) 30%, rgba(12,34,23,0.62) 58%, rgba(12,34,23,0.38) 66%, rgba(12,34,23,0.10) 80%, rgba(12,34,23,0.03) 100%); } } /* ---------- 5. The suppliers page: its old colours back ---------- The old page (suppliers.cfm's own branch, ?reskin=old) had: a bright green badge and accent line on the hero, a glass card of bright green figures, a dark charcoal "Ready to grow" band with a bright green Send button, red crosses against green ticks with a bright green Fueltool column, a dark VS disc, big green step discs and pale green icon tiles. Here, in the new palette: the hero accent line amber, the "Get listed" band dark again (the form stays a white card), red crosses against bright green ticks, the Fueltool column with the bright green header and edge, an amber VS disc, amber step numbers on sand and amber icons. Buttons stay the one dark green. */ body.ft-reskin.rs-next .rs-sup-hero h1 .rs-sup-accent { color: var(--rs-accent); } /* The old page's neutral charcoal (#2F3538, grey with a touch of blue), so the band reads as a deliberate second dark colour and not as an off-shade of the green hero band above it. */ body.ft-reskin.rs-next .rs-sup .rs-sup-start { background: #2F3538; color: #fff; } body.ft-reskin.rs-next .rs-sup .rs-sup-start h2 { color: #fff; } body.ft-reskin.rs-next .rs-sup .rs-sup-start .rs-sup-startside .rs-eyebrow { color: var(--rs-accent); } body.ft-reskin.rs-next .rs-sup .rs-sup-start .rs-sup-intro { color: rgba(255,255,255,0.86); } body.ft-reskin.rs-next .rs-sup .rs-sup-already { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); } body.ft-reskin.rs-next .rs-sup .rs-sup-already h3 { color: #fff; } body.ft-reskin.rs-next .rs-sup .rs-sup-already p { color: rgba(255,255,255,0.82); } body.ft-reskin.rs-next .rs-sup .rs-sup-already .rs-icon { background: rgba(240,177,58,0.16); color: var(--rs-accent); } body.ft-reskin.rs-next .rs-sup .rs-sup-already .rs-btn--ghost { border-color: #fff; } body.ft-reskin.rs-next .rs-sup .rs-sup-start :focus-visible:not(:where(.rs-sup-form *)) { outline-color: #fff; } /* Why independent matters: red crosses against bright green ticks */ body.ft-reskin.rs-next .rs-sup-col--them li .bi { color: #C9493A; } body.ft-reskin.rs-next .rs-page .rs-sup-col--them h3 .bi { color: #C9493A; } body.ft-reskin.rs-next .rs-sup-col--us { border: 2px solid #5DAC46; box-shadow: 0 6px 22px rgba(93,172,70,0.16); } body.ft-reskin.rs-next .rs-page .rs-sup-col--us h3 { background: #5DAC46; color: #0E2A1C; border-bottom-color: #5DAC46; } body.ft-reskin.rs-next .rs-sup-col--us li .bi { color: #5DAC46; } body.ft-reskin.rs-next .rs-sup-versus span { background: var(--rs-accent); color: var(--rs-band); } /* ========================================================================== 6. FINISHING PASS (16 Oct 2026, after the judge's review of the preview) ========================================================================== */ /* ---------- 6a. Phones: the quote box stays on the first screen ---------- Where the photo hero holds the quote box (town, county, region, search, about, testimonials) the strip is 34vw, not 56vw, and the gap under it is 14px. That gets back about 90px, and on a phone the box sat 220px lower than today, below the fold of an iPhone's first Safari screen. On the town, county, nation and region pages the one-line intro ("Enter your postcode to compare ...") also goes on phones: the quote box right under it says the same thing. Its words stay in the page (display none only); it is one rule to take back. */ @media (max-width: 767.98px) { body.ft-reskin.rs-next .rs-page .rs-hero--photo:has(.quote-widget)::before, body.ft-reskin.rs-next .ft-about .ab-hero:has(.quote-widget)::before { height: 34vw; margin-bottom: 14px; } body.ft-reskin.rs-next .rs-place .rs-hero--photo:has(.quote-widget) .rs-lead { display: none; } } /* ---------- 6b. The suppliers hero buttons ---------- The hero is dark at every width (the band on phones, the left of the photo's shade on a laptop), and the dark green "Get listed" button was 1.2:1 against it, so it read as an outline while the white "Learn more" looked like the main button. Now the main one is white with the one dark green text (the same as the "Join the list" button on the price-updates panel) and "Learn more" is the quiet one: clear with a white edge. */ body.ft-reskin.rs-next .rs-sup-hero .rs-btn:not(.rs-btn--ghost) { background: #fff; border-color: #fff; color: #194F35; } body.ft-reskin.rs-next .rs-sup-hero .rs-btn:not(.rs-btn--ghost):hover, body.ft-reskin.rs-next .rs-sup-hero .rs-btn:not(.rs-btn--ghost):focus { background: var(--rs-wash); border-color: var(--rs-wash); color: #194F35; } body.ft-reskin.rs-next .rs-sup-hero .rs-btn--ghost { background: transparent; border-color: #fff; color: #fff; } body.ft-reskin.rs-next .rs-sup-hero .rs-btn--ghost:hover, body.ft-reskin.rs-next .rs-sup-hero .rs-btn--ghost:focus { background: rgba(255,255,255,0.16); border-color: #fff; color: #fff; } /* ---------- 6c. Tints that sat against each other ---------- Sand next to the old sage looked like two near-matching washes. So the sage section straight after a sand "How it works" on the place pages (Nearby towns) goes plain cream, and so does the sage section just before it on the region pages and just after it on /search; the FAQ's open question header, which sat under the sand hero, goes sand; and the sage supplier boxes that end the home and about pages go sand. */ body.ft-reskin.rs-next .rs-place .rs-section--white:has(.rs-steps) + .rs-section--wash, body.ft-reskin.rs-next .rs-place .rs-section--wash:has(+ .rs-section--white .rs-steps), body.ft-reskin.rs-next .rs-search-how + .rs-section--wash { background: var(--rs-page); } body.ft-reskin.rs-next .rs-faq .accordion-button:not(.collapsed) { background: var(--rs-tint); } body.ft-reskin.rs-next .ft-about .ab-supplier { background: var(--rs-tint); } body.ft-reskin.rs-next .ft-home-mobile .hm-supplier-cta, body.ft-reskin.rs-next .ft-home-desktop .hm-supplier-cta { background: var(--rs-tint) !important; } /* On a laptop it sits right under the sand Price updates surround, so a hairline marks where it starts. */ @media (min-width: 992px) { body.ft-reskin.rs-next .ft-home-desktop .hm-supplier-cta { border-top: 1px solid var(--rs-tint-hair); } } /* ---------- 6d. The preview pill ---------- Small, in the bottom right, and clear of the iPhone's bottom edge, so it stops sitting over the Compare button and over the words on the left of every page. Preview only. */ body.ft-reskin.rs-next a.rs-preview-pill[href="?rsnext=off"] { left: auto; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 4px 10px; gap: 6px; font-size: 11px; opacity: 0.8; } /* ---------- 6e. Motion: scroll reveals ---------- The page markup gets data-aos="fade-up" (only when the preview is on; the AOS library already loads on every page and switches itself off for people who ask for reduced motion). A softer rise than the library's 100px: 26px. The :not(.aos-animate) keeps the settled state untouched. */ body.ft-reskin.rs-next :is(.rs-sup, .ft-about, .rs-testimonials) [data-aos="fade-up"]:not(.aos-animate) { transform: translate3d(0, 26px, 0); } /* Phones: the homepage numbers strip is centred (16 Oct), so its short accent rules centre too. Left-aligned they sat apart from the centred figures and looked glitched (Rhys, 17 Oct). */ @media (max-width: 991.98px) { body.ft-reskin.rs-next .hm-tick-cell::before { margin-left: auto; margin-right: auto; } }