/* =========================================================================== Agnes Cleaning Services Written as one system, not patched. If you need a value, take it from the tokens below. If the token you want does not exist, think again before adding one: the previous stylesheet reached 34 spacing values, 34 font sizes, 6 shadows and 7 radii, and that is what made the site look thrown together. Palette: Slate & Terracotta. One dark slate, one warm accent, warm neutrals. The accent is for small marks only and must stay under about 5% of the painted area. If you can see two terracotta areas bigger than a stamp on one screen, something is wrong. Type: EB Garamond sets the body as well as the headings, which is what premium service sites do. Inter is for uppercase labels and buttons only. =========================================================================== */ @font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 700;font-display:swap; src:url('/assets/fonts/EBGaramond-var.woff2') format('woff2')} @font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 600;font-display:swap; src:url('/assets/fonts/EBGaramond-italic.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap; src:url('/assets/fonts/Inter-var.woff2') format('woff2')} :root{ /* ---- palette ------------------------------------------------------- Two separate faults were fixed here, because they are different things: EARTHY was hue. The neutrals carried a yellow cast (paper was H50, hairlines H44), which reads as beige however light you make it. They are now all in the same cool family as the brand, H195-199. DULL was saturation, not lightness. The footer at S20% was a grey that happened to lean blue. It is now S46%, so it reads as a colour. It is also lighter again, L26 -> L31. Steps: L100 > 96 > 88 > 77 > 37 > 31 > 12. Every pairing was computed before it was written; the lowest text ratio on the site is 4.79. */ --paper:#F2F5F6; /* page background, everywhere */ --surface:#FFFFFF; /* cards and inputs */ --tint:#D9E4E9; /* one quiet full-width band per page, never a card */ --brand:#2B5F75; /* footer, CTA band, filled buttons, focus rings */ --brand-hover:#1E4858; --text:#132129; --muted:#4F646E; /* the lightest text allowed on light surfaces */ --line:#B9C8CE; /* every hairline */ --accent:#A34226; /* small marks only: rules, ticks, numerals, underlines */ --accent-on-dark:#F8CCBD; --on-dark:#D2E0E6; /* the darkest text allowed on the slate */ /* ---- type ------------------------------------------------------------ */ --serif:'EB Garamond',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; /* EB Garamond has a small x-height: 41 against Inter's 55 at the same px. The scale is set ~30% larger than a sans scale so it reads the same size. Spaces around + and - inside clamp() are required, or the whole declaration is dropped and the element silently inherits. */ --t-xs:.75rem; /* 12px Inter, uppercase labels, the only label size */ --t-sm:.9375rem; /* 15px Inter, captions and meta */ --t-base:1.3125rem; /* 21px body */ --t-md:1.625rem; /* 26px card titles, sub-heads */ --t-lg:2.125rem; /* 34px section heads */ --t-xl:3rem; /* 48px page h1 */ --t-display:clamp(2.75rem, 2rem + 3.4vw, 4.5rem); /* home h1 only */ /* ---- space (8px scale) ----------------------------------------------- */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem; --measure:34em; /* reading width */ --radius:2px; /* buttons and inputs only; panels are square */ --wrap:1120px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important}} body{ font-family:var(--serif); font-size:var(--t-base); line-height:1.65; color:var(--text); background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block;height:auto} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.011em; color:var(--text);text-wrap:balance} h1{font-size:var(--t-xl)} h2{font-size:var(--t-lg)} h3{font-size:var(--t-md)} p,li{text-wrap:pretty} p+p{margin-top:var(--s4)} /* links: ink with an accent underline, not a coloured word */ a{color:inherit;text-decoration:underline;text-decoration-thickness:1px; text-decoration-color:var(--accent);text-underline-offset:.18em} a:hover{text-decoration-thickness:2px} :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:1px} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)} /* hello@agnescleaningservices.co.uk is 33 unbreakable characters and the only thing on the site long enough to push a 320px screen sideways */ a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere} @media (min-width:900px){.wrap{padding:0 var(--s7)}} /* ---- the one label treatment ------------------------------------------ */ .h-small,.chip,.tag,.band-tag,.inc-head,.tc-view,.county-link,.mini,.opt, .field label,.tick-label,.form-title,.pc-chip,.nav-toggle,footer h2{ font-family:var(--sans); font-size:var(--t-xs); font-weight:650; line-height:1.2; letter-spacing:.09em; text-transform:uppercase; font-feature-settings:'liga' 0; } .chip{display:inline-block;color:var(--accent);margin-bottom:var(--s4)} .chip--red,.band-tag{color:var(--accent)} .h-small{color:var(--muted);margin-bottom:var(--s3)} .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)} /* ---- buttons ----------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.4em; font-family:var(--sans);font-size:var(--t-sm);font-weight:600;letter-spacing:.01em; line-height:1;text-decoration:none;text-align:center; padding:1rem 1.75rem;min-height:52px; border:1px solid transparent;border-radius:var(--radius); background:none;cursor:pointer;transition:background-color .15s ease,color .15s ease; } .btn--red,.btn--blue{background:var(--brand);color:var(--paper);border-color:var(--brand)} .btn--red:hover,.btn--blue:hover{background:var(--brand-hover);border-color:var(--brand-hover)} .btn--yellow,.btn-outline-blue{background:transparent;color:var(--text);border-color:var(--line)} .btn--yellow:hover,.btn-outline-blue:hover{border-color:var(--text)} .btn:disabled{opacity:.45;cursor:not-allowed} .cta-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)} .cta-center{text-align:center;margin-top:var(--s7)} .skip-link{position:absolute;left:-9999px;top:0;z-index:99;background:var(--brand); color:var(--paper);padding:var(--s3) var(--s4);text-decoration:none} .skip-link:focus{left:var(--s2);top:var(--s2)} /* ---- header ------------------------------------------------------------ */ /* Slate, because the header is sticky and the page has three surfaces it can pass over: paper, white cards and one tinted band. Paper and tint both collided with it. Slate collides with none of them, and it bookends the page with the CTA band and the footer. Everything that sits on the header therefore has to be the reversed version of itself. */ header{background:var(--brand);position:sticky;top:0;z-index:50} header .wm-name{color:var(--paper)} header .wm-sub{color:var(--on-dark);opacity:.85} header :focus-visible{outline-color:var(--paper)} .nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s4); min-height:80px;position:relative} .brand{text-decoration:none;display:inline-flex;align-items:center;gap:var(--s3);min-height:52px} .brand-mark{display:block;flex:none;width:56px;height:56px} .brand-mark--foot{width:68px;height:68px} .foot-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)} .wordmark{display:flex;flex-direction:column;line-height:1} .wm-name{font-family:var(--serif);font-weight:600;font-size:var(--t-md);letter-spacing:-.015em;color:var(--text)} .wm-sub{font-family:var(--sans);font-weight:600;font-size:var(--t-xs);letter-spacing:.16em; text-transform:uppercase;color:var(--muted);margin-top:5px;white-space:nowrap} .nav nav{display:flex;align-items:center;gap:var(--s1)} .nav nav a{white-space:nowrap;font-family:var(--sans);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:550;letter-spacing:.02em; text-transform:none;text-decoration:none;padding:.6rem .7rem; border-radius:var(--radius);min-height:40px;display:inline-flex;align-items:center;color:var(--paper)} .nav nav a:hover{color:var(--accent-on-dark)} .nav nav a.active{box-shadow:inset 0 -2px 0 var(--accent-on-dark)} .nav nav a.nav-cta{background:var(--paper);color:var(--brand);padding:.7rem 1.1rem;margin-left:var(--s3)} .nav nav a.nav-cta:hover{background:#fff;color:var(--brand-hover)} .nav-toggle{display:none;background:none;border:1px solid var(--on-dark);border-radius:var(--radius); padding:0 var(--s4);min-height:44px;min-width:56px;cursor:pointer;color:var(--paper)} @media (max-width:1060px){ .nav-toggle{display:inline-flex;align-items:center;justify-content:center} .nav nav{display:none;position:absolute;top:80px;left:0;right:0;background:var(--brand); flex-direction:column;align-items:stretch;gap:0;padding:var(--s2) 0 var(--s4); padding-inline:inherit; border-bottom:1px solid var(--brand-hover)} .nav nav.open{display:flex} .nav nav a{padding:var(--s3) 0;min-height:48px;border-bottom:1px solid var(--brand-hover)} .nav nav a.nav-cta{margin:var(--s3) 0 0;justify-content:center} } /* Small phones. At 320 the brand and the Menu button together needed 344px of a 320px screen, so every page scrolled sideways by the width of the seal. The gutter, the seal and the letterspacing on the second line each give a little back. */ @media (max-width:400px){ .wrap{padding:0 var(--s4)} .brand{gap:var(--s2)} .brand-mark{width:44px;height:44px} .wm-name{font-size:var(--t-base)} .wm-sub{font-size:11px;letter-spacing:.1em} } /* ---- section rhythm ---------------------------------------------------- */ section{padding:var(--s9) 0} .hero{padding:var(--s9) 0 var(--s8)} .page-hero{padding:var(--s8) 0 var(--s7);border-bottom:1px solid var(--line)} /* Sections are paper by default. One tinted band per page, marked .band-tint. The old .halftone-* classes named a colour rather than a role and were also on