/* * Easy Living Cleaners — brand tokens + small overrides. * * Palette pulled from the live Squarespace site.css (the theme's real * HSL custom properties), Sep 2026: * --accent-hsl: 267, 39%, 48% -> #764BAA (brand purple) * --darkAccent-hsl: 30, 5%, 38% -> #665F5C (warm taupe grey) * --lightAccent-hsl: 300, 2.4%, 92% -> #EBEAEB (pale lilac grey bg) * --black / --white: 0% / 100% * Fonts on the current site: Oswald (display) + Epilogue (body). * * Most visual styling is set in Kadence -> Customize -> Global Styles and * documented in content/runbook.md. This file holds the CSS custom * properties (single source of truth for the hexes) + a few overrides * easier to keep in git than in the Customizer. */ :root { /* Brand purple — headings, links, primary emphasis */ --elc-primary: #764baa; --elc-primary-dark: #5c3a87; /* hover / pressed */ --elc-primary-tint: #f3eefa; /* light section backgrounds */ --elc-primary-2: #6a3fa9; /* the logo's richer purple, for accents */ /* Primary CTA ("Request a Free Estimate"). A punchier, more saturated violet than the muted brand purple so it stands out against it while staying on-brand. Swap to amber (#f59e0b) or green (#16a34a) if more contrast is wanted after the Home page review. */ --elc-accent: #7c3aed; --elc-accent-dark: #6d28d9; --elc-ink: #1e1b26; /* body text — near-black, faint warm-violet */ --elc-ink-soft: #58525f; /* secondary text */ --elc-paper: #ffffff; --elc-paper-alt: #f7f5fb; /* alternating section background */ --elc-line: #e7e2f0; /* borders / dividers */ --elc-font-display: 'Oswald', system-ui, -apple-system, 'Segoe UI', sans-serif; --elc-font-body: 'Epilogue', system-ui, -apple-system, 'Segoe UI', sans-serif; --elc-radius: 10px; --elc-shadow: 0 6px 24px rgba(30, 27, 38, 0.10); } /* ---- Kadence integration ---- Map Kadence's own global palette + type to the ELC brand so the site is on-brand immediately, without the owner setting anything in Customize -> Global. If they DO set the palette per the runbook, these values match, so nothing fights. Kadence puts --global-paletteN on . */ :root, body { --global-palette1: #764baa; /* brand purple */ --global-palette2: #7c3aed; /* CTA violet */ --global-palette3: #1e1b26; /* near-black — headings/text */ --global-palette4: #58525f; /* muted text */ --global-palette5: #665f5c; /* warm taupe */ --global-palette6: #e7e2f0; /* borders */ --global-palette7: #f3eefa; /* pale purple tint */ --global-palette8: #f7f5fb; /* off-white alt sections */ --global-palette9: #ffffff; /* white */ --global-palette-highlight: #764baa; --global-palette-highlight-alt: #5c3a87; --global-content-width: 1140px; --global-content-narrow-width: 750px; } body, button, input, select, optgroup, textarea, .wp-block-button__link { font-family: var(--elc-font-body); } h1, h2, h3, h4, h5, h6, .wp-block-heading, .entry-title, .site-title { font-family: var(--elc-font-display); font-weight: 600; letter-spacing: 0; } body { color: var(--elc-ink); background: var(--elc-paper); } a { color: var(--elc-primary); } a:hover { color: var(--elc-primary-dark); } /* Every button (Kadence header CTA, block buttons, form submits) gets the brand CTA treatment by default. The is-style-elc-cta class is still there for when an editor wants to be explicit. */ .wp-block-button__link, .kb-button, .button, button.wp-element-button, input[type="submit"] { background-color: var(--elc-accent); color: #fff; border: 0; border-radius: var(--elc-radius); font-family: var(--elc-font-display); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .wp-block-button__link:hover, .kb-button:hover, .button:hover, button.wp-element-button:hover, input[type="submit"]:hover { background-color: var(--elc-accent-dark); color: #fff; } /* The one CTA style, reused by the elc-cta-band pattern and any "Request a Free Estimate" button. Kadence buttons render as .kb-button / .wp-block-button__link. */ .elc-cta .wp-block-button__link, .wp-block-button.is-style-elc-cta .wp-block-button__link { background: var(--elc-accent); color: #fff; border-radius: var(--elc-radius); font-family: var(--elc-font-display); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; padding: 0.9em 1.9em; transition: background-color 0.15s ease, transform 0.15s ease; } .elc-cta .wp-block-button__link:hover, .wp-block-button.is-style-elc-cta .wp-block-button__link:hover { background: var(--elc-accent-dark); transform: translateY(-1px); } /* ---- Pattern sections (theme/easyliving/patterns/*.php) ---- Kadence handles the base layout; these are only the brand touches that are easier to keep in git than re-created in the Customizer. */ /* CTA band — tinted full-width panel. */ .elc-cta-band { background: var(--elc-primary-tint); padding: clamp(2.5rem, 6vw, 4rem) 1.25rem; border-block: 1px solid var(--elc-line); } .elc-cta-band h2 { margin-top: 0; } .elc-cta-phone { margin-top: 1rem; color: var(--elc-ink-soft); font-size: 0.95rem; } /* Services grid — cards. */ .elc-services-grid { padding-block: clamp(2rem, 5vw, 3.5rem); } .elc-services-row { margin-block: 0; } .elc-service-card { height: 100%; background: var(--elc-paper); border: 1px solid var(--elc-line); border-radius: var(--elc-radius); padding: 1.5rem; transition: box-shadow 0.15s ease, transform 0.15s ease; } .elc-service-card:hover { box-shadow: var(--elc-shadow); transform: translateY(-2px); } .elc-service-card h3 { margin-top: 0; } .elc-service-card h3 a { text-decoration: none; } .elc-card-link { margin-bottom: 0; font-weight: 600; } .elc-card-link a { text-decoration: none; } /* Trust strip. */ .elc-trust { padding-block: clamp(2rem, 5vw, 3.5rem); } .elc-trust-item h3 { margin-top: 0; text-transform: uppercase; letter-spacing: 0.03em; } /* Service areas. */ .elc-service-areas { padding-block: clamp(2rem, 5vw, 3.5rem); } .elc-service-areas h3 a { text-decoration: none; } .elc-area-list { list-style: none; margin: 0; padding: 0; line-height: 1.9; } .elc-area-list a { text-decoration: none; } .elc-area-list a:hover { text-decoration: underline; } /* Reviews section + the Trustindex mount (min-height stops layout shift). */ .elc-reviews { padding-block: clamp(2rem, 5vw, 3.5rem); } .elc-reviews-mount { min-height: 220px; } /* Accessibility: a clearly visible focus ring (Kadence's default is faint). */ a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible { outline: 3px solid var(--elc-primary); outline-offset: 2px; }