/* ReadyClean design system — tokens and reset. Direction: warm concierge (spec 2026-07-30). No photography. Contrast ratios are measured and enforced by tests/redesign-guards.test.mjs. */ :root { /* Surfaces */ --rc-surface: #ffffff; /* Brand — unchanged from the existing site */ --rc-forest: #0c251c; --rc-forest-deep: #071610; --rc-forest-soft: #123227; --rc-sage: #9cb1a0; --rc-oat: #d8cdb8; --rc-cream: #f6f3ec; /* Ink on cream */ --rc-ink: #0c251c; /* 14.61:1 */ --rc-ink-strong: #3f4a43; /* 8.34:1 */ --rc-ink-muted: #4a544c; /* 7.11:1 */ --rc-ink-subtle: #5b635d; /* 5.59:1 — lightest permitted on cream */ /* Ink on forest */ --rc-ink-inverse: #f6f3ec; /* 14.61:1 */ --rc-ink-inverse-muted: #a8bcae; /* 8.07:1 */ --rc-ink-inverse-subtle: #8ba193; /* 5.87:1 */ /* Lines */ --rc-line: #ded8ca; --rc-line-soft: #e6e1d5; --rc-line-inverse: rgba(216, 205, 184, 0.24); --rc-line-inverse-strong: rgba(216, 205, 184, 0.45); /* Type */ --rc-font-display: 'Fraunces', Georgia, serif; --rc-font-ui: 'Inter', system-ui, -apple-system, sans-serif; --rc-text-xs: 0.8125rem; /* 13px floor */ --rc-text-sm: 0.875rem; --rc-text-base: 1rem; --rc-text-lg: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem); --rc-text-xl: clamp(1.25rem, 1vw + 1rem, 1.5rem); --rc-text-2xl: clamp(1.5rem, 2vw + 1rem, 2rem); --rc-text-3xl: clamp(1.875rem, 3.5vw + 1rem, 2.9375rem); /* Spacing — 4px base */ --rc-space-1: 4px; --rc-space-2: 8px; --rc-space-3: 12px; --rc-space-4: 16px; --rc-space-5: 24px; --rc-space-6: 32px; --rc-space-7: 48px; --rc-space-8: 64px; --rc-space-9: 96px; --rc-space-10: 128px; --rc-section-y: var(--rc-space-7); --rc-gutter: var(--rc-space-5); --rc-measure: 68ch; --rc-container: 1180px; /* Radius — squarer, per the concierge direction */ --rc-radius-sm: 2px; --rc-radius-md: 4px; --rc-radius-pill: 999px; /* Elevation — overlays only */ --rc-shadow-overlay: 0 12px 32px -12px rgba(12, 37, 28, 0.38); --rc-shadow-sticky: 0 -2px 12px -4px rgba(12, 37, 28, 0.22); /* Motion */ --rc-dur-state: 160ms; --rc-dur-enter: 320ms; --rc-dur-large: 480ms; --rc-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --rc-tap: 44px; } @media (min-width: 640px) { :root { --rc-section-y: var(--rc-space-8); --rc-gutter: var(--rc-space-6); } } @media (min-width: 1024px) { :root { --rc-section-y: var(--rc-space-9); } } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } .rc-page { margin: 0; font-family: var(--rc-font-ui); font-size: var(--rc-text-base); line-height: 1.6; color: var(--rc-ink-strong); background: var(--rc-cream); -webkit-font-smoothing: antialiased; overflow-x: hidden; } .rc-container { width: 100%; max-width: var(--rc-container); margin-inline: auto; padding-inline: var(--rc-gutter); } .rc-section { padding-block: var(--rc-section-y); } .rc-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Focus is never removed, only restyled. Scoped to design-system components (any element carrying an rc- class) rather than to .rc-page, so keyboard focus is visible on location pages too — they load rc.css but keep the legacy stylesheet's (no .rc-page) until their visual sweep. */ [class*="rc-"]:focus-visible { outline: 2px solid var(--rc-sage); outline-offset: 2px; } /* Film grain for dark fields — inline SVG, zero network requests. */ .rc-grain { position: relative; overflow: hidden; } .rc-grain > * { position: relative; z-index: 1; } .rc-grain::after { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0.15; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } /* ---------- buttons ---------- */ .rc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--rc-space-2); min-height: var(--rc-tap); padding: 0 var(--rc-space-5); border: 1px solid transparent; border-radius: var(--rc-radius-sm); font-family: var(--rc-font-ui); font-size: var(--rc-text-sm); font-weight: 600; text-decoration: none; cursor: pointer; /* A wrapped button label is always a layout failure — never let one wrap. */ white-space: nowrap; } /* On a forest field: oat fill, forest text — 10.29:1 */ .rc-btn--primary { background: var(--rc-oat); color: var(--rc-forest); } .rc-btn--primary:hover { background: var(--rc-cream); } /* On cream: forest fill, cream text — 14.61:1 */ .rc-panel .rc-btn--primary, .rc-section .rc-btn--primary { background: var(--rc-forest); color: var(--rc-cream); } .rc-section .rc-btn--primary:hover { background: var(--rc-forest-soft); } .rc-btn--secondary { background: transparent; color: var(--rc-ink); border-color: var(--rc-line); } .rc-btn--secondary:hover { border-color: var(--rc-ink-muted); } .rc-btn--quiet { min-height: var(--rc-tap); padding: 0; background: none; border: 0; border-bottom: 1px solid var(--rc-line-inverse-strong); border-radius: 0; color: var(--rc-oat); font-weight: 500; } /* ---------- fields ---------- */ .rc-label { display: block; margin-bottom: var(--rc-space-2); font-size: var(--rc-text-sm); font-weight: 600; color: var(--rc-ink); } .rc-input { width: 100%; min-height: var(--rc-tap); padding: 0 var(--rc-space-4); border: 1px solid var(--rc-line); border-radius: var(--rc-radius-sm); background: var(--rc-surface); font-family: var(--rc-font-ui); font-size: var(--rc-text-base); /* 16px — prevents iOS zoom on focus */ color: var(--rc-ink); } .rc-input::placeholder { color: var(--rc-ink-subtle); } /* Postcode field: input + button as one unit on a dark field */ .rc-postcode { display: flex; max-width: 380px; border: 1px solid var(--rc-line-inverse-strong); border-radius: var(--rc-radius-sm); background: transparent; } .rc-postcode .rc-input { border: 0; border-radius: 0; background: transparent; color: var(--rc-ink-inverse); } .rc-postcode .rc-input::placeholder { color: var(--rc-ink-inverse-subtle); } .rc-postcode .rc-btn { border-radius: 0; flex-shrink: 0; } /* ---------- surfaces ---------- */ .rc-panel { background: var(--rc-cream); border: 1px solid var(--rc-line); border-radius: var(--rc-radius-md); } .rc-plate { background: var(--rc-cream); padding: var(--rc-space-5); } .rc-plate__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rc-space-4); padding: var(--rc-space-3) 0; border-bottom: 1px solid var(--rc-line-soft); } .rc-plate__row:last-child { border-bottom: 0; } /* ---------- typography helpers ---------- */ .rc-eyebrow { font-size: var(--rc-text-xs); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rc-ink-inverse-muted); } .rc-rule { height: 1px; background: var(--rc-line); border: 0; } .rc-quote { padding-left: var(--rc-space-4); border-left: 1px solid var(--rc-line-inverse-strong); max-width: 46ch; } .rc-quote p { margin: 0 0 var(--rc-space-2); font-family: var(--rc-font-display); font-style: italic; font-weight: 400; font-size: var(--rc-text-lg); line-height: 1.5; color: var(--rc-ink-inverse); } .rc-quote cite { font-family: var(--rc-font-ui); font-style: normal; font-size: var(--rc-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rc-ink-inverse-muted); } /* Hairline fact row — the hero's honest line */ .rc-facts { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rc-line-inverse); } .rc-fact { /* Two fixed rows, not free-flowing text: the value row is a constant 2.4em (exactly two lines at the 1.2 line-height set below) whether the value takes one line ("7 days") or two ("Invoiced after"), so every fact's sub-label starts at the same offset regardless of how many lines its neighbour's value wrapped to. This holds at every width — it isn't a breakpoint-specific fix. */ display: grid; grid-template-rows: 2.4em auto; padding: var(--rc-space-3) var(--rc-space-4) var(--rc-space-3) 0; border-bottom: 1px solid var(--rc-line-inverse); } .rc-fact strong { display: flex; align-items: flex-end; font-family: var(--rc-font-display); font-weight: 400; font-size: var(--rc-text-xl); line-height: 1.2; color: var(--rc-oat); } .rc-fact span { align-self: start; font-size: var(--rc-text-xs); color: var(--rc-ink-inverse-muted); } @media (min-width: 640px) { .rc-facts { grid-template-columns: repeat(4, 1fr); } } /* ---------- table, accordion, chip ---------- */ .rc-table { width: 100%; border-collapse: collapse; font-size: var(--rc-text-sm); } .rc-table th, .rc-table td { padding: var(--rc-space-3) var(--rc-space-4); text-align: left; border-bottom: 1px solid var(--rc-line-soft); } .rc-table th { font-weight: 600; color: var(--rc-ink); } .rc-accordion summary { display: flex; justify-content: space-between; align-items: center; gap: var(--rc-space-4); min-height: var(--rc-tap); padding: var(--rc-space-3) 0; cursor: pointer; font-weight: 600; color: var(--rc-ink); list-style: none; } .rc-accordion summary::-webkit-details-marker { display: none; } .rc-chip { display: inline-flex; align-items: center; gap: var(--rc-space-2); padding: var(--rc-space-1) var(--rc-space-3); border: 1px solid var(--rc-line); border-radius: var(--rc-radius-pill); font-size: var(--rc-text-xs); font-weight: 600; color: var(--rc-ink-muted); } /* ---------- motion (opt-in only) ---------- */ @media (prefers-reduced-motion: no-preference) { .rc-btn, .rc-input, .rc-accordion summary { transition: background-color var(--rc-dur-state) var(--rc-ease), border-color var(--rc-dur-state) var(--rc-ease), color var(--rc-dur-state) var(--rc-ease); } .rc-enter { opacity: 0; transform: translateY(8px); } .rc-enter.rc-entered { opacity: 1; transform: none; transition: opacity var(--rc-dur-enter) var(--rc-ease), transform var(--rc-dur-enter) var(--rc-ease); } } /* ---------- header ---------- */ .rc-header { position: sticky; top: 0; z-index: 50; background: var(--rc-forest); border-bottom: 1px solid var(--rc-line-inverse); } /* Toggled by initStickyHeader() past a 50px scroll offset — a hairline shift, not a shadow, in keeping with the rest of the system. */ .rc-header--scrolled { background: var(--rc-forest-deep); border-bottom-color: var(--rc-line-inverse-strong); } .rc-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--rc-space-4); min-height: 64px; } .rc-header__brand { display: flex; align-items: center; gap: var(--rc-space-2); font-family: var(--rc-font-display); font-size: var(--rc-text-lg); letter-spacing: 0.05em; color: var(--rc-ink-inverse); text-decoration: none; } .rc-header__mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--rc-ink-inverse-subtle); font-family: var(--rc-font-ui); font-size: var(--rc-text-xs); font-weight: 600; color: var(--rc-oat); } /* Below 640px there isn't room for brand + CTA + hamburger on one line without the CTA wrapping, so the wordmark is hidden accessibly (same technique as .rc-visually-hidden) rather than with display:none, which would drop the brand link's accessible name at small widths. Restored as normal, visible text at the existing 640px breakpoint. */ .rc-header__brand-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (min-width: 640px) { .rc-header__brand-name { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; } } /* Visible at every width — the old header had no mobile CTA at all. */ .rc-header__cta { margin-left: auto; } .rc-nav { display: none; } .rc-nav a { color: var(--rc-ink-inverse-muted); font-size: var(--rc-text-sm); font-weight: 500; text-decoration: none; } .rc-nav a:hover { color: var(--rc-ink-inverse); } /* Mobile nav drawer — toggled by initMobileMenu() via #rcMenuBtn below the 1024px breakpoint, where .rc-nav is display:none by default above. */ .rc-nav.rc-is-open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: var(--rc-space-4) var(--rc-gutter) var(--rc-space-5); gap: var(--rc-space-4); background: var(--rc-forest); border-bottom: 1px solid var(--rc-line-inverse); } .rc-nav.rc-is-open a { font-size: var(--rc-text-base); color: var(--rc-ink-inverse); padding: var(--rc-space-1) 0; } .rc-header__menu { display: inline-flex; align-items: center; justify-content: center; min-width: var(--rc-tap); min-height: var(--rc-tap); background: none; border: 0; color: var(--rc-ink-inverse); cursor: pointer; } @media (min-width: 1024px) { .rc-nav { display: flex; gap: var(--rc-space-5); margin-left: var(--rc-space-7); } .rc-header__cta { margin-left: 0; } .rc-header__menu { display: none; } /* The hamburger is gone at this width so rc-is-open can't be toggled here, but reset it defensively in case state survives a resize. */ .rc-nav.rc-is-open { position: static; flex-direction: row; margin: 0 0 0 var(--rc-space-7); padding: 0; background: none; border-bottom: 0; } } /* ---------- footer ---------- */ .rc-footer { background: var(--rc-forest); color: var(--rc-ink-inverse-muted); padding-block: var(--rc-space-7) var(--rc-space-5); } .rc-footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rc-space-6) var(--rc-space-4); } .rc-footer h2 { margin: 0 0 var(--rc-space-3); font-family: var(--rc-font-ui); font-size: var(--rc-text-sm); font-weight: 600; color: var(--rc-ink-inverse); } .rc-footer ul { list-style: none; margin: 0; padding: 0; } .rc-footer li { margin-bottom: var(--rc-space-2); } .rc-footer a { display: inline-flex; align-items: center; min-height: 32px; color: var(--rc-ink-inverse-muted); font-size: var(--rc-text-sm); text-decoration: none; } .rc-footer a:hover { color: var(--rc-ink-inverse); } .rc-footer__base { margin-top: var(--rc-space-6); padding-top: var(--rc-space-4); border-top: 1px solid var(--rc-line-inverse); font-size: var(--rc-text-xs); } @media (min-width: 640px) { .rc-footer__grid { grid-template-columns: repeat(4, 1fr); } } /* ---------- floating contact dock ---------- */ /* Consolidates the old bottom-left WhatsApp button and bottom-right chat bubble into one affordance. The bottom-left button used to cover the hero CTA on mobile. Docked bottom-right, stacked above the third-party VoiceGlow chat launcher (also bottom-right) so the two never overlap — the bottom offset below clears a typical chat launcher's own footprint. */ .rc-contact-dock { position: fixed; right: var(--rc-space-4); /* --rc-space-7 (48px) + --rc-space-6 (32px) = 80px: stacks this button above the VoiceGlow launcher instead of on top of it. */ bottom: calc(var(--rc-space-7) + var(--rc-space-6)); z-index: 40; } .rc-contact-dock__btn { display: grid; place-items: center; width: var(--rc-tap); height: var(--rc-tap); border-radius: var(--rc-radius-pill); background: var(--rc-forest); color: var(--rc-cream); box-shadow: var(--rc-shadow-overlay); } /* Yielded when a CTA or field is on screen, so it can never cover one. */ .rc-contact-dock.rc-is-yielded { opacity: 0; visibility: hidden; } @media (prefers-reduced-motion: no-preference) { .rc-contact-dock { transition: opacity var(--rc-dur-state) var(--rc-ease), visibility var(--rc-dur-state) var(--rc-ease); } }