/* ========================================================================= Royal Seasonal Services Original stylesheet. Design system notes: The company does two completely different jobs on the same properties, six months apart. The whole interface is built around that: a season state on swaps the accent colour, the hero and the featured services, and a year-long calendar ruler shows when each service runs. Palette pine #0E2B22 · turf #6FA83C · frost #4A8DB7 · brass #C08A2E paper #F4F6F1 · ink #16211C Type Archivo (display, tight and wide) / Instrument Sans (body) Signature the season seam in the hero + the year ruler ========================================================================= */ /* ------------------------------------------------------------------------- 1. Tokens ------------------------------------------------------------------------- */ :root { --rss-pine: #0E2B22; --rss-turf: #6FA83C; --rss-frost: #4A8DB7; --rss-brass: #C08A2E; --rss-paper: #F4F6F1; --rss-ink: #16211C; --rss-radius: 4px; --rss-measure: 1240px; --pine-90: color-mix(in srgb, var(--rss-pine) 90%, black); --pine-70: color-mix(in srgb, var(--rss-pine) 70%, white); --rule: color-mix(in srgb, var(--rss-pine) 14%, transparent); --rule-strong: color-mix(in srgb, var(--rss-pine) 26%, transparent); --muted: color-mix(in srgb, var(--rss-ink) 62%, var(--rss-paper)); --surface: #FFFFFF; --surface-sunk: color-mix(in srgb, var(--rss-paper) 82%, var(--rss-pine) 4%); /* Season-dependent, overwritten below. */ --accent: var(--rss-turf); --accent-deep: color-mix(in srgb, var(--rss-turf) 72%, var(--rss-pine)); --accent-wash: color-mix(in srgb, var(--rss-turf) 10%, var(--rss-paper)); --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem); --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem); --step-2: clamp(1.45rem, 1.29rem + 0.78vw, 1.95rem); --step-3: clamp(1.75rem, 1.44rem + 1.55vw, 2.7rem); --step-4: clamp(2.1rem, 1.5rem + 3vw, 4rem); --step-5: clamp(2.5rem, 1.4rem + 5.4vw, 5.6rem); --space-1: 0.5rem; --space-2: 0.875rem; --space-3: 1.375rem; --space-4: 2.125rem; --space-5: 3.25rem; --space-6: 5rem; --space-7: 7.5rem; --shadow: 0 1px 2px rgba(14, 43, 34, 0.05), 0 12px 32px -18px rgba(14, 43, 34, 0.35); --shadow-lift: 0 2px 4px rgba(14, 43, 34, 0.06), 0 24px 48px -24px rgba(14, 43, 34, 0.42); --shadow-tint: 14, 43, 34; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ------------------------------------------------------------------------- 1b. Seasonal palettes Four phases, driven by the month schedule in the Customizer. These shift more than the accent: the page ground, the sunk surfaces, the rules and the shadow temperature all move, so summer and winter genuinely read as different rather than as the same page with a recoloured button. ------------------------------------------------------------------------- */ /* Spring — light, fresh, slightly cool green. Everything waking up. */ body.phase-spring { --season-hue: #A8C63C; --accent: var(--season-hue); --accent-deep: color-mix(in srgb, var(--season-hue) 50%, var(--rss-pine)); --accent-wash: color-mix(in srgb, var(--season-hue) 11%, #FFFFFF); --rss-paper: #F2F7EA; --surface-sunk: color-mix(in srgb, #F2F7EA 78%, var(--season-hue) 7%); --rule: color-mix(in srgb, var(--rss-pine) 13%, transparent); --shadow-tint: 22, 58, 30; } /* Summer — the deepest, most saturated green. Peak growing season. */ body.phase-summer { --season-hue: var(--rss-turf); --accent: var(--season-hue); --accent-deep: color-mix(in srgb, var(--season-hue) 64%, var(--rss-pine)); --accent-wash: color-mix(in srgb, var(--season-hue) 10%, var(--rss-paper)); --rss-paper: #F4F6F0; --surface-sunk: color-mix(in srgb, #F4F6F0 82%, var(--rss-pine) 5%); --shadow-tint: 14, 43, 34; } /* Autumn — brass and amber. Leaf season, and when winter gets booked. */ body.phase-autumn { --season-hue: var(--rss-brass); --accent: var(--season-hue); --accent-deep: color-mix(in srgb, var(--season-hue) 66%, var(--rss-pine)); --accent-wash: color-mix(in srgb, var(--season-hue) 12%, #FFFFFF); --rss-paper: #F7F2E8; --surface-sunk: color-mix(in srgb, #F7F2E8 80%, var(--season-hue) 9%); --rule: color-mix(in srgb, #5A4420 16%, transparent); --rule-strong: color-mix(in srgb, #5A4420 28%, transparent); --shadow-tint: 62, 44, 18; } /* Winter — cool, blue, low contrast ground. Snow season. */ body.phase-winter { --season-hue: var(--rss-frost); --accent: var(--season-hue); --accent-deep: color-mix(in srgb, var(--season-hue) 74%, var(--rss-pine)); --accent-wash: color-mix(in srgb, var(--season-hue) 9%, #FFFFFF); --rss-paper: #EEF3F7; --surface-sunk: color-mix(in srgb, #EEF3F7 80%, var(--season-hue) 8%); --rule: color-mix(in srgb, #1E3A4A 14%, transparent); --rule-strong: color-mix(in srgb, #1E3A4A 26%, transparent); --shadow-tint: 18, 46, 62; } /* Shadows pick up the season's temperature. */ body[class*="phase-"] { --shadow: 0 1px 2px rgba(var(--shadow-tint), 0.05), 0 12px 32px -18px rgba(var(--shadow-tint), 0.35); --shadow-lift: 0 2px 4px rgba(var(--shadow-tint), 0.06), 0 24px 48px -24px rgba(var(--shadow-tint), 0.42); } /* The visitor's manual season switch still wins over the calendar. */ body.season-white, [data-season="white"] { --accent: var(--rss-frost); --accent-deep: color-mix(in srgb, var(--rss-frost) 74%, var(--rss-pine)); --accent-wash: color-mix(in srgb, var(--rss-frost) 9%, #FFFFFF); } /* Ease between palettes rather than snapping, including on the season switch. */ body, .site-header, .section--sunk, .service-card, .panel, .quote, .year, .widget, .contact-card, .quote-form { transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease); } @media (prefers-reduced-motion: reduce) { body, .site-header, .section--sunk, .service-card, .panel, .quote, .year, .widget, .contact-card, .quote-form { transition: none; } } /* ------------------------------------------------------------------------- 2. Base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; } body { margin: 0; background: var(--rss-paper); color: var(--rss-ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color 0.5s var(--ease); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--rss-pine); line-height: 1.06; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p, ul, ol, blockquote, figure, table { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color 0.18s var(--ease); } a:hover { color: var(--rss-pine); } img, svg, video { max-width: 100%; height: auto; display: block; } hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-5) 0; } blockquote { margin-inline: 0; padding-left: var(--space-3); border-left: 3px solid var(--accent); font-size: var(--step-1); font-style: italic; color: var(--pine-70); } code, pre, kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; } pre { background: var(--rss-pine); color: #E7EFE9; padding: var(--space-3); border-radius: var(--rss-radius); overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--rule); } th { font-family: var(--font-display); font-weight: 600; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 3px solid var(--rss-brass); outline-offset: 3px; border-radius: 2px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 999; background: var(--rss-pine); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 var(--rss-radius) var(--rss-radius); text-decoration: none; font-weight: 600; } .skip-link:focus { top: 0; color: #fff; } /* ------------------------------------------------------------------------- 3. Layout primitives ------------------------------------------------------------------------- */ .wrap { width: min(100% - 2.5rem, var(--rss-measure)); margin-inline: auto; } .wrap--narrow { width: min(100% - 2.5rem, 760px); } .section { padding-block: var(--space-6); } .section--tight { padding-block: var(--space-5); } .section--sunk { background: var(--surface-sunk); } .section--pine { background: var(--rss-pine); color: #DCE6DF; } .section--pine h2, .section--pine h3 { color: #fff; } .section-head { max-width: 62ch; margin-bottom: var(--space-5); } .section-head--center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: var(--space-2); } .eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--rss-brass); } .section--pine .eyebrow { color: var(--rss-brass); } .section-head--center .eyebrow::before { display: none; } .lede { font-size: var(--step-1); color: var(--muted); line-height: 1.5; } .section--pine .lede { color: #A9BFB1; } /* ------------------------------------------------------------------------- 4. Buttons ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; padding: 0.85rem 1.4rem; border: 1.5px solid transparent; border-radius: var(--rss-radius); text-decoration: none; cursor: pointer; transition: transform 0.16s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--rss-pine); color: #fff; border-color: var(--rss-pine); } .btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; } .btn--primary .icon { transition: transform 0.2s var(--ease); } .btn--primary:hover .icon { transform: translateX(3px); } .btn--ghost { background: transparent; color: var(--rss-pine); border-color: var(--rule-strong); } .btn--ghost:hover { border-color: var(--rss-pine); background: rgba(255, 255, 255, 0.6); color: var(--rss-pine); } .btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; } .btn--accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; } .btn--light { background: #fff; border-color: #fff; color: var(--rss-pine); } .btn--light:hover { background: var(--rss-brass); border-color: var(--rss-brass); color: var(--rss-pine); } .btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #fff; } .btn--outline-light:hover { border-color: #fff; color: #fff; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .text-link { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; text-decoration: none; color: var(--rss-pine); border-bottom: 1.5px solid var(--accent); padding-bottom: 2px; } .text-link .icon { transition: transform 0.2s var(--ease); } .text-link:hover .icon { transform: translateX(4px); } /* ------------------------------------------------------------------------- 5. Header ------------------------------------------------------------------------- */ .topbar { background: var(--rss-pine); color: #B9CCBF; font-size: 0.8rem; } .topbar__inner { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; align-items: center; justify-content: space-between; padding-block: 0.5rem; } .topbar a { color: #E4EDE7; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; } .topbar a:hover { color: var(--rss-brass); } .topbar__list { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .topbar__season { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--rss-brass); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.7rem; } .site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--rss-paper) 88%, white); backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--rule); transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease); } .site-header.is-stuck { box-shadow: 0 8px 28px -20px rgba(14, 43, 34, 0.5); } .site-header__inner { display: flex; align-items: center; gap: var(--space-3); min-height: 74px; } .brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; flex-shrink: 0; } .brand__mark { color: var(--rss-pine); flex-shrink: 0; } .brand__mark .season-l { fill: var(--rss-turf); transition: fill 0.4s var(--ease); } .brand__mark .season-r { fill: var(--rss-frost); transition: fill 0.4s var(--ease); } .brand__mark .crown-band { fill: var(--rss-brass); } /* The mark follows the season switch, like everything else on the page. */ body[data-season="white"] .brand__mark .season-l { fill: color-mix(in srgb, var(--rss-frost) 55%, var(--rss-turf)); } body[data-season="green"] .brand__mark .season-r { fill: color-mix(in srgb, var(--rss-turf) 45%, var(--rss-frost)); } .brand__text { display: grid; line-height: 1.05; } .brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.015em; color: var(--rss-pine); text-transform: uppercase; } .brand__tag { font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .brand img { max-height: 52px; width: auto; } .primary-nav ul { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .primary-nav li { position: relative; } .primary-nav .menu-link { display: block; padding: 0.55rem 0.8rem; font-family: var(--font-display); font-weight: 500; font-size: 0.93rem; color: var(--rss-pine); text-decoration: none; border-radius: var(--rss-radius); } .primary-nav .menu-link span { display: inline-block; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: border-color 0.18s var(--ease); } .primary-nav .menu-link:hover span, .primary-nav .current-menu-item > .menu-link span, .primary-nav .current_page_item > .menu-link span, .primary-nav .current-menu-ancestor > .menu-link span { border-color: var(--accent); } .primary-nav .has-submenu > .menu-link { padding-right: 1.6rem; } .submenu-toggle { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--rss-pine); padding: 0.25rem; cursor: pointer; line-height: 0; } .submenu-toggle svg { transition: transform 0.2s var(--ease); } .submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .primary-nav .submenu { position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 230px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--rss-radius); box-shadow: var(--shadow-lift); padding: 0.4rem; display: none; flex-direction: column; gap: 0; z-index: 5; } .primary-nav li:hover > .submenu, .primary-nav .submenu-toggle[aria-expanded="true"] + .submenu, .primary-nav li:focus-within > .submenu { display: flex; } .primary-nav .submenu .menu-link { padding: 0.5rem 0.7rem; font-weight: 400; } .header__cta { display: flex; align-items: center; gap: 0.6rem; } .header__phone { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--rss-pine); text-decoration: none; white-space: nowrap; } .header__phone:hover { color: var(--accent-deep); } .nav-toggle { display: none; align-items: center; gap: 0.45rem; background: var(--rss-pine); color: #fff; border: 0; border-radius: var(--rss-radius); padding: 0.6rem 0.8rem; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; cursor: pointer; } /* Drawer furniture: only rendered on mobile, hidden on desktop. */ .nav-drawer__head, .nav-drawer__foot { display: none; } @media (max-width: 1000px) { .nav-toggle { display: inline-flex; } .header__cta .btn { display: none; } /* -------------------------------------------------------------- The drawer is a child of .site-header, and the header carries backdrop-filter. A filtered ancestor becomes the containing block for position:fixed descendants, which collapsed the drawer to the height of the header. Drop the blur at mobile widths so `inset: 0` resolves against the viewport again. -------------------------------------------------------------- */ .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--rss-paper); } /* The header also makes a stacking context (sticky + z-index), so the drawer's z-index is scoped inside it and the scrim painted over the top. Lift the whole header above the scrim while the drawer is open. */ body.nav-open .site-header { z-index: 90; } html.js .primary-nav { position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); display: flex; flex-direction: column; background: #FFFFFF; border-left: 1px solid var(--rule); padding: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateX(100%); /* visibility keeps the closed drawer out of the tab order */ visibility: hidden; transition: transform 0.32s var(--ease), visibility 0s linear 0.32s; z-index: 80; box-shadow: -20px 0 60px -30px rgba(14, 43, 34, 0.6); } html.js .primary-nav.is-open { transform: translateX(0); visibility: visible; transition: transform 0.32s var(--ease), visibility 0s; } /* No JavaScript: no drawer. Show the links stacked under the header. */ html:not(.js) .nav-toggle { display: none; } html:not(.js) .primary-nav { flex-basis: 100%; order: 3; border-top: 1px solid var(--rule); margin-top: 0.5rem; } html:not(.js) .primary-nav .menu { padding: 0.25rem 0 0.5rem; } .nav-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem 1rem 1.5rem; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--surface); z-index: 2; } .nav-drawer__title { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .nav-close { display: inline-grid; place-items: center; /* 44px minimum touch target */ width: 44px; height: 44px; margin-right: -0.4rem; background: none; border: 1px solid var(--rule); border-radius: var(--rss-radius); color: var(--rss-pine); cursor: pointer; } .nav-close:hover { background: var(--surface-sunk); border-color: var(--rule-strong); } .primary-nav .menu { flex: 1; padding: 0.4rem 1.5rem 1.25rem; } .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; } .primary-nav li { border-bottom: 1px solid var(--rule); } .primary-nav .menu > li:last-child { border-bottom: 0; } /* Full-width rows with a comfortable touch target. */ .primary-nav .menu-link { padding: 0.95rem 0; font-size: 1.05rem; min-height: 48px; display: flex; align-items: center; } .nav-drawer__foot { display: block; padding: 1.15rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--surface-sunk); } .nav-drawer__cta { display: flex; width: 100%; justify-content: center; min-height: 50px; align-items: center; } .nav-drawer__phone { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; margin-top: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--rss-pine); text-decoration: none; } .nav-drawer__phone .icon { color: var(--accent-deep); } .nav-drawer__note { margin: 0.5rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--muted); text-align: center; } .primary-nav .submenu { position: static; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 0.5rem 0.9rem; min-width: 0; } .primary-nav li:hover > .submenu { display: none; } .primary-nav .submenu-toggle[aria-expanded="true"] + .submenu { display: flex; } .submenu-toggle { right: 0; padding: 0.6rem; } .nav-scrim { position: fixed; inset: 0; background: rgba(14, 43, 34, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); z-index: 70; } .nav-scrim.is-visible { opacity: 1; pointer-events: auto; } } @media (max-width: 620px) { .header__phone span { display: none; } .topbar__list li:not(.topbar__list-phone) { display: none; } } /* ------------------------------------------------------------------------- 6. Hero — the season seam ------------------------------------------------------------------------- */ .hero { position: relative; background: var(--rss-paper); overflow: hidden; border-bottom: 1px solid var(--rule); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: var(--space-5); min-height: min(78vh, 700px); padding-block: var(--space-6); } .hero__content { max-width: 34ch; } .hero__content .lede { max-width: 46ch; } .hero__title { font-size: var(--step-5); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; margin-bottom: var(--space-3); } .hero__title .accent { color: var(--accent-deep); } .hero__panel { position: relative; align-self: stretch; min-height: 340px; margin-right: calc((100vw - min(100% - 2.5rem, var(--rss-measure))) / -2); } .hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* The seam: a diagonal cut that reads as a plough edge. */ clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); opacity: 0; transform: scale(1.04); transition: opacity 0.6s var(--ease), transform 0.9s var(--ease); } .hero__media.is-active { opacity: 1; transform: scale(1); } .hero__panel-fallback { position: absolute; inset: 0; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 14px), linear-gradient(150deg, var(--accent-deep), var(--rss-pine)); } .hero__seam { position: absolute; left: 0; top: 0; bottom: 0; width: 16%; pointer-events: none; background: linear-gradient(105deg, transparent 48%, var(--rss-brass) 48%, var(--rss-brass) 48.5%, transparent 48.5%); opacity: 0.75; } /* Season switch */ .season-switch { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: var(--space-4); padding: 0.28rem; background: color-mix(in srgb, var(--rss-pine) 6%, white); border: 1px solid var(--rule); border-radius: 999px; } .season-switch__label { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-inline: 0.7rem 0.35rem; } .season-switch__btn { display: inline-flex; align-items: center; gap: 0.4rem; border: 0; background: transparent; border-radius: 999px; padding: 0.45rem 0.95rem; font-family: var(--font-display); font-size: 0.83rem; font-weight: 600; color: var(--pine-70); cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); } .season-switch__btn[aria-pressed="true"] { background: var(--rss-pine); color: #fff; } .season-switch__btn:hover:not([aria-pressed="true"]) { color: var(--rss-pine); } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; min-height: 0; padding-block: var(--space-5); } .hero__content { max-width: none; } .hero__panel { min-height: 300px; margin-inline: calc((100vw - min(100% - 2.5rem, var(--rss-measure))) / -2); order: -1; } .hero__media, .hero__panel-fallback { clip-path: none; } .hero__seam { display: none; } } /* ------------------------------------------------------------------------- 7. Trust strip ------------------------------------------------------------------------- */ .trust { background: var(--rss-pine); color: #C6D6CB; overflow: hidden; border-bottom: 3px solid var(--rss-brass); } .trust__track { display: flex; gap: 3rem; padding-block: 0.85rem; white-space: nowrap; width: max-content; animation: rss-marquee 40s linear infinite; } .trust:hover .trust__track { animation-play-state: paused; } .trust__item { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; } .trust__item .icon { color: var(--rss-brass); } @keyframes rss-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ------------------------------------------------------------------------- 8. Service cards ------------------------------------------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 1.25rem; } .service-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--rss-radius); overflow: hidden; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--rule-strong); } .service-card__media { aspect-ratio: 4 / 3; background: var(--surface-sunk); overflow: hidden; } .service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .service-card:hover .service-card__media img { transform: scale(1.05); } .service-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 0.65rem; flex: 1; } .service-card__icon { color: var(--accent-deep); width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: var(--rss-radius); background: var(--accent-wash); } .service-card__title { font-size: var(--step-1); margin: 0; } .service-card__title a { color: inherit; text-decoration: none; } .service-card__title a::after { content: ""; position: absolute; inset: 0; } .service-card__text { color: var(--muted); font-size: 0.95rem; margin: 0; flex: 1; } .service-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.65rem; border-top: 1px solid var(--rule); font-size: 0.85rem; } .service-card__price { font-family: var(--font-display); font-weight: 600; color: var(--rss-pine); } .season-tag { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-display); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.22rem 0.55rem; border-radius: 999px; border: 1px solid currentColor; } .season-tag--green { color: color-mix(in srgb, var(--rss-turf) 78%, var(--rss-pine)); } .season-tag--white { color: color-mix(in srgb, var(--rss-frost) 78%, var(--rss-pine)); } .season-tag--both { color: var(--rss-brass); } /* Dim the out-of-season cards rather than hiding them, so the page still tells the full story to a crawler and to a visitor planning ahead. */ .service-card[data-season] { transition: opacity 0.4s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } .season-filtered .service-card.is-offseason { opacity: 0.48; } .season-filtered .service-card.is-offseason:hover { opacity: 1; } /* ------------------------------------------------------------------------- 9. Year ruler — the signature element ------------------------------------------------------------------------- */ .year { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--rss-radius); padding: var(--space-4) var(--space-3) var(--space-3); overflow-x: auto; } .year__table { width: 100%; min-width: 720px; border-collapse: collapse; } .year__table th, .year__table td { border: 0; padding: 0; } .year__head th { font-family: var(--font-display); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.6rem; text-align: center; width: calc((100% - 230px) / 12); } .year__head th:first-child { text-align: left; width: 230px; } .year__head th.is-now { color: var(--rss-brass); } .year__row + .year__row .year__label, .year__row + .year__row .year__cells { border-top: 1px solid var(--rule); } .year__label { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; padding: 0.7rem 1rem 0.7rem 0 !important; color: var(--rss-pine); vertical-align: middle; } .year__label a { color: inherit; text-decoration: none; } .year__label a:hover { color: var(--accent-deep); } .year__cells { padding: 0.55rem 0 !important; } .year__bar { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); height: 22px; background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px calc(100% / 12)); background-size: calc(100% / 12) 100%; border-radius: 2px; } .year__seg { border-radius: 2px; background: color-mix(in srgb, var(--accent) 26%, transparent); } .year__seg.is-on { background: var(--accent); } .year__seg.is-on.is-winter { background: var(--rss-frost); } .year__seg.is-on.is-summer { background: var(--rss-turf); } .year__seg.is-on.is-both { background: linear-gradient(160deg, var(--rss-turf), var(--rss-frost)); } .year__seg.is-off { background: transparent; } .year__now { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--space-3); font-size: 0.82rem; color: var(--muted); } .year__now::before { content: ""; width: 14px; height: 10px; background: var(--rss-brass); border-radius: 2px; } .year__seg.year__col-now.is-off { background: color-mix(in srgb, var(--rss-brass) 16%, transparent); } .year__seg.year__col-now.is-on { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rss-brass) 85%, transparent); } /* ------------------------------------------------------------------------- 10. Process ------------------------------------------------------------------------- */ .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; counter-reset: step; border-top: 1px solid var(--rule-strong); } .step { counter-increment: step; padding: var(--space-4) var(--space-3) var(--space-3) 0; border-right: 1px solid var(--rule); position: relative; } .step:last-child { border-right: 0; } .step::before { content: counter(step, decimal-leading-zero); position: absolute; top: calc(var(--space-4) * -0.5 - 0.5rem); left: 0; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: var(--rss-brass); background: var(--rss-paper); padding-right: 0.6rem; } .section--sunk .step::before { background: var(--surface-sunk); } .step__title { font-size: var(--step-1); margin-bottom: 0.4rem; } .step__text { color: var(--muted); font-size: 0.94rem; margin: 0; padding-right: var(--space-3); } @media (max-width: 760px) { .step { border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: var(--space-3); } .step:last-child { border-bottom: 0; } } /* ------------------------------------------------------------------------- 11. About + stats ------------------------------------------------------------------------- */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } } .split__media img { width: 100%; border-radius: var(--rss-radius); aspect-ratio: 5 / 4; object-fit: cover; } .split__media--placeholder { aspect-ratio: 5 / 4; border-radius: var(--rss-radius); background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 16px), linear-gradient(160deg, var(--accent-deep), var(--rss-pine)); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--rss-radius); overflow: hidden; margin-top: var(--space-4); } .stat { background: var(--surface); padding: var(--space-3); } .stat__value { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; letter-spacing: -0.03em; color: var(--rss-pine); line-height: 1; } .stat__label { display: block; margin-top: 0.35rem; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } /* ------------------------------------------------------------------------- 12. Areas ------------------------------------------------------------------------- */ .area-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .area-list li a, .area-list li span { display: inline-block; padding: 0.5rem 0.95rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; font-size: 0.9rem; text-decoration: none; color: var(--rss-pine); transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); } .area-list li a:hover { border-color: var(--accent); background: var(--accent-wash); } .section--pine .area-list li a, .section--pine .area-list li span { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); color: #E4EDE7; } .section--pine .area-list li a:hover { border-color: var(--rss-brass); background: rgba(255, 255, 255, 0.1); } /* ------------------------------------------------------------------------- 13. Testimonials ------------------------------------------------------------------------- */ .quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.25rem; } .quote { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--rss-radius); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .quote__mark { color: var(--rss-brass); } .quote__text { font-size: 1.02rem; color: var(--rss-ink); flex: 1; } .quote__stars { display: flex; gap: 2px; color: var(--rss-brass); } .quote__stars .icon { fill: currentColor; stroke: none; } .quote__meta { display: flex; align-items: center; gap: 0.7rem; border-top: 1px solid var(--rule); padding-top: var(--space-2); font-size: 0.87rem; } .quote__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .quote__name { font-family: var(--font-display); font-weight: 600; color: var(--rss-pine); } .quote__where { color: var(--muted); } /* ------------------------------------------------------------------------- 14. FAQ ------------------------------------------------------------------------- */ .faq { border-top: 1px solid var(--rule-strong); } .faq__item { border-bottom: 1px solid var(--rule); } .faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--rss-pine); list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ""; flex-shrink: 0; width: 14px; height: 14px; margin-top: 0.4rem; background: linear-gradient(var(--accent-deep), var(--accent-deep)) center / 100% 2px no-repeat, linear-gradient(var(--accent-deep), var(--accent-deep)) center / 2px 100% no-repeat; transition: transform 0.25s var(--ease); } .faq__item[open] .faq__q::after { transform: rotate(45deg); } .faq__a { padding-bottom: 1.15rem; color: var(--muted); max-width: 72ch; } /* ------------------------------------------------------------------------- 15. CTA band ------------------------------------------------------------------------- */ .cta-band { position: relative; background: var(--rss-pine); color: #D5E2D9; overflow: hidden; } .cta-band::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 22px); pointer-events: none; } .cta-band__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--space-4); align-items: center; padding-block: var(--space-5); } .cta-band h2 { color: #fff; margin-bottom: 0.5rem; } .cta-band p { color: #A9BFB1; max-width: 56ch; } @media (max-width: 800px) { .cta-band__inner { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- 16. Page shells, blog, comments ------------------------------------------------------------------------- */ .page-hero { background: var(--rss-pine); color: #C6D6CB; padding-block: var(--space-5) var(--space-5); border-bottom: 3px solid var(--rss-brass); } .page-hero h1 { color: #fff; max-width: 20ch; } .page-hero .lede { color: #A9BFB1; max-width: 60ch; } .breadcrumbs { font-size: 0.82rem; margin-bottom: var(--space-3); } .breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; color: var(--muted); } .breadcrumbs__item + .breadcrumbs__item::before { content: "/"; margin-right: 0.4rem; opacity: 0.5; } .page-hero .breadcrumbs__list { color: #90A899; } .page-hero .breadcrumbs a { color: #C6D6CB; } .page-hero .breadcrumbs a:hover { color: var(--rss-brass); } .layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-5); align-items: start; } .layout--full { grid-template-columns: minmax(0, 1fr); } @media (max-width: 960px) { .layout { grid-template-columns: 1fr; } } .entry-content { max-width: 72ch; } .entry-content > * + * { margin-top: 1.1em; } .entry-content h2 { margin-top: 1.8em; font-size: var(--step-2); } .entry-content h3 { margin-top: 1.5em; } .entry-content ul, .entry-content ol { padding-left: 1.3rem; } .entry-content li + li { margin-top: 0.35em; } .entry-content img { border-radius: var(--rss-radius); } .entry-content .alignwide { width: min(100%, 1080px); margin-inline: auto; } .entry-content .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: none; } .entry-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.83rem; color: var(--muted); margin-bottom: var(--space-3); } .entry-meta .sep { opacity: 0.4; } .post-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--rule); position: relative; } .post-card:first-child { padding-top: 0; } .post-card__media img { border-radius: var(--rss-radius); aspect-ratio: 4/3; object-fit: cover; width: 100%; } .post-card__title { font-size: var(--step-2); margin-bottom: 0.4rem; } .post-card__title a { color: inherit; text-decoration: none; } .post-card__title a:hover { color: var(--accent-deep); } .post-card__excerpt { color: var(--muted); margin-bottom: 0.6rem; } @media (max-width: 640px) { .post-card { grid-template-columns: 1fr; } } .widget { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--rss-radius); padding: var(--space-3); margin-bottom: var(--space-3); } .widget__title { font-size: 1rem; margin-bottom: 0.7rem; } .widget ul { list-style: none; padding: 0; margin: 0; } .widget li + li { margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid var(--rule); } .widget a { text-decoration: none; } .sidebar-cta { background: var(--rss-pine); color: #C6D6CB; border-radius: var(--rss-radius); padding: var(--space-3); } .sidebar-cta h2 { color: #fff; font-size: 1.15rem; } .sidebar-cta p { font-size: 0.92rem; margin-bottom: var(--space-2); } .pagination { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--rule); } .pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding-inline: 0.6rem; border: 1px solid var(--rule); border-radius: var(--rss-radius); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--rss-pine); } .pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--rss-pine); border-color: var(--rss-pine); color: #fff; } .search-form { display: flex; gap: 0.5rem; } .search-form input[type="search"], input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], select, textarea { width: 100%; font: inherit; font-size: 0.95rem; padding: 0.7rem 0.85rem; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--rss-radius); color: var(--rss-ink); } textarea { min-height: 140px; resize: vertical; } input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 1px; } .search-form button, input[type="submit"], button[type="submit"] { font-family: var(--font-display); font-weight: 600; background: var(--rss-pine); color: #fff; border: 0; border-radius: var(--rss-radius); padding: 0.7rem 1.2rem; cursor: pointer; white-space: nowrap; } .search-form button:hover, input[type="submit"]:hover { background: var(--accent-deep); } .comment-list { list-style: none; padding: 0; } .comment-list ol.children { list-style: none; padding-left: var(--space-3); } .comment-body { padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); } .comment-meta { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.5rem; font-size: 0.85rem; } .comment-author img { border-radius: 50%; } /* Service single page */ .service-hero__meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--space-3); } .checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; } .checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 0.6rem; align-items: start; } .checklist .icon { color: var(--accent-deep); margin-top: 0.2rem; } .panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--rss-radius); padding: var(--space-3); } .panel--pine { background: var(--rss-pine); color: #C6D6CB; border-color: var(--rss-pine); } .panel--pine h2, .panel--pine h3 { color: #fff; } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .contact-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--rss-radius); padding: var(--space-3); display: grid; gap: 0.5rem; } .contact-card .icon { color: var(--accent-deep); } .contact-card__label { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .contact-card a { font-family: var(--font-display); font-weight: 600; text-decoration: none; color: var(--rss-pine); } .contact-card a:hover { color: var(--accent-deep); } .hours-list { list-style: none; padding: 0; margin: 0; } .hours-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); font-size: 0.93rem; } .hours-list li:last-child { border-bottom: 0; } .hours-list dt, .hours-list .label { font-weight: 600; } .panel--pine .hours-list li { border-color: rgba(255, 255, 255, 0.12); } /* 404 */ .error-404 { text-align: center; padding-block: var(--space-7); } .error-404 .code { font-family: var(--font-display); font-size: clamp(5rem, 20vw, 12rem); font-weight: 800; line-height: 0.85; color: var(--rule-strong); letter-spacing: -0.05em; } /* ------------------------------------------------------------------------- 17. Footer ------------------------------------------------------------------------- */ .site-footer { background: var(--rss-pine); color: #A9BFB1; padding-top: var(--space-6); font-size: 0.93rem; } .site-footer a { color: #D5E2D9; text-decoration: none; } .site-footer a:hover { color: var(--rss-brass); } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding-bottom: var(--space-5); } @media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } } .footer__heading { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rss-brass); margin-bottom: var(--space-2); } .footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .footer__brand .brand__name { color: #fff; } .footer__brand .brand__tag { color: #7D9788; } .footer__brand .brand__mark { color: #fff; } .footer__blurb { margin: var(--space-2) 0 var(--space-3); max-width: 42ch; } .footer__social { display: flex; gap: 0.5rem; margin-top: var(--space-2); } .footer__social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--rss-radius); } .footer__social a:hover { border-color: var(--rss-brass); background: rgba(255, 255, 255, 0.06); } .footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-block: var(--space-3); display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center; justify-content: space-between; font-size: 0.82rem; color: #7D9788; } .footer__bar ul { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0; padding: 0; } /* ------------------------------------------------------------------------- 18. Motion ------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--reveal-delay, 0ms); } [data-reveal].is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-reveal] { opacity: 1; transform: none; } .trust__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; } } /* ------------------------------------------------------------------------- 19. Utilities ------------------------------------------------------------------------- */ .stack > * + * { margin-top: var(--space-3); } .stack-sm > * + * { margin-top: var(--space-2); } .text-center { text-align: center; } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mb-0 { margin-bottom: 0; } .muted { color: var(--muted); } .nowrap { white-space: nowrap; } @media print { .site-header, .topbar, .site-footer, .cta-band, .trust, .season-switch, .nav-toggle { display: none !important; } body { background: #fff; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; } } /* ------------------------------------------------------------------------- 21. Quote form ------------------------------------------------------------------------- */ .quote-form { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--rss-radius); padding: var(--space-4); margin-top: var(--space-4); display: grid; gap: var(--space-3); max-width: 100%; } .quote-form .field { margin: 0; display: grid; gap: 0.35rem; } .quote-form label, .quote-form legend { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--rss-pine); } .quote-form legend { padding: 0; margin-bottom: 0.55rem; } .quote-form fieldset { border: 0; padding: 0; margin: 0; } .quote-form .req { color: var(--accent-deep); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } @media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } } .field__hint { font-size: 0.82rem; color: var(--muted); line-height: 1.45; } .field__error { font-size: 0.84rem; font-weight: 600; color: #B3261E; } .quote-form [aria-invalid="true"] { border-color: #B3261E; } .choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.4rem 1rem; } .choice { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 400; font-size: 0.94rem; color: var(--rss-ink); cursor: pointer; padding: 0.35rem 0; } .choice input { width: auto; margin: 0; accent-color: var(--accent-deep); flex-shrink: 0; } .choice-row .choice { border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0.45rem 0.9rem; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); } .choice-row .choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); } /* Honeypot — hidden from people, visible to bots. */ .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form-note { border-radius: var(--rss-radius); padding: var(--space-3); margin-top: var(--space-3); border: 1px solid var(--rule); } .form-note p:last-child { margin-bottom: 0; } .form-note--ok { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .form-note--ok h2 { font-size: var(--step-1); margin-bottom: 0.4rem; color: var(--rss-pine); } .form-note--bad { background: color-mix(in srgb, #B3261E 7%, var(--rss-paper)); border-color: color-mix(in srgb, #B3261E 32%, transparent); color: #7A1B15; } /* Bundled illustration used when a service has no photograph. Sits flush like a photo would, but without the hover zoom, which looks wrong on flat art. */ .service-card__media--art { background: var(--surface-sunk); } .service-card__media--art img { width: 100%; height: 100%; object-fit: cover; display: block; } .service-card:hover .service-card__media--art img { transform: none; } .brand__svg { height: 38px; width: auto; display: block; } /* ------------------------------------------------------------------------- 22. Sticky mobile action bar Most traffic to a contractor site is a phone, often mid-task in a driveway. Two taps should always be reachable: call, or ask for a price. Hidden on desktop where the header CTA is already visible, and on the contact page where it would sit on top of the form. ------------------------------------------------------------------------- */ .action-bar { display: none; } @media (max-width: 1000px) { .action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; display: grid; grid-template-columns: auto 1fr; gap: 1px; background: var(--rule-strong); border-top: 1px solid var(--rule-strong); padding-bottom: env(safe-area-inset-bottom); transform: translateY(110%); transition: transform 0.3s var(--ease); box-shadow: 0 -12px 30px -20px rgba(var(--shadow-tint), 0.6); } /* Revealed once the hero is behind them — showing it immediately covers the hero CTA that is already on screen. */ .action-bar.is-visible { transform: translateY(0); } .action-bar__item { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 56px; padding: 0 1.1rem; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; text-decoration: none; } .action-bar__item--call { background: var(--surface); color: var(--rss-pine); } .action-bar__item--call span { display: none; } .action-bar__item--quote { background: var(--accent-deep); color: #fff; } .action-bar__item:active { filter: brightness(0.94); } /* Keep the bar clear of the footer's last elements. */ body.has-action-bar .site-footer { padding-bottom: 4.5rem; } } @media (min-width: 480px) and (max-width: 1000px) { .action-bar__item--call span { display: inline; } } /* The drawer sits above the bar, and the bar hides while it is open. */ body.nav-open .action-bar { transform: translateY(110%); } @media (prefers-reduced-motion: reduce) { .action-bar { transition: none; } } /* ------------------------------------------------------------------------- 23. Focus visibility ------------------------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; border-radius: 2px; } .btn:focus-visible, .action-bar__item:focus-visible { outline-offset: -4px; outline-color: #fff; }