/* ========================================================================== Dueck Residential — styles.css A single shared stylesheet. No frameworks, no build step. -------------------------------------------------------------------------- TABLE OF CONTENTS 1. CSS Reset 2. Design Tokens (custom properties) 3. Typography 4. Base Elements 5. Accessibility Helpers 6. Layout Primitives 7. Header & Navigation 8. Buttons & Links 9. Hero Sections 10. Reusable Content Sections 11. Service Components 12. Process Components 13. Gallery & Image Treatment 14. Forms 15. FAQs 16. Footer 17. Page-Specific Components 18. Responsive Rules 19. Reduced-Motion Rules 20. Print Styles ========================================================================== */ /* ========================================================================== 1. CSS RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Clip horizontal overflow from the off-canvas mobile drawer (position:fixed, parked via translateX). Applied to the root so fixed descendants are clipped. overflow-x:hidden on keeps the page as the scroll container, so the sticky header continues to work. */ overflow-x: hidden; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } img, picture, svg { max-width: 100%; display: block; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; } :where(:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* ========================================================================== 2. DESIGN TOKENS ========================================================================== */ :root { /* Brand palette */ --navy-deep: #061A33; --navy: #0A2F57; --blue-strong: #1E5FAF; --blue-accent: #4B94E6; --blue-pale: #EAF3FC; --ice: #F7FAFD; --white: #FFFFFF; --text: #152235; --text-muted: #566579; --border: #D7E2EC; /* Semantic roles */ --bg: var(--white); --bg-alt: var(--ice); --bg-pale: var(--blue-pale); --surface: var(--white); --focus-ring: #1E5FAF; --shadow-color: 210deg 32% 40%; /* Elevation (restrained) */ --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.08); --shadow-md: 0 6px 20px -8px hsl(var(--shadow-color) / 0.22); --shadow-lg: 0 18px 48px -18px hsl(var(--shadow-color) / 0.30); /* Border radii — three values only */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 22px; /* Type scale (fluid) */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem); --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.12rem); --step-1: clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem); --step-2: clamp(1.45rem, 1.30rem + 0.75vw, 1.95rem); --step-3: clamp(1.75rem, 1.50rem + 1.25vw, 2.60rem); --step-4: clamp(2.10rem, 1.70rem + 2.00vw, 3.40rem); /* Spacing (fluid) */ --space-2xs: clamp(0.38rem, 0.35rem + 0.15vw, 0.45rem); --space-xs: clamp(0.62rem, 0.58rem + 0.25vw, 0.80rem); --space-sm: clamp(0.90rem, 0.82rem + 0.40vw, 1.20rem); --space-md: clamp(1.40rem, 1.20rem + 1.00vw, 2.10rem); --space-lg: clamp(2.20rem, 1.80rem + 2.00vw, 3.40rem); --space-xl: clamp(3.20rem, 2.50rem + 3.50vw, 5.40rem); /* Layout */ --container: 1180px; --container-narrow: 820px; --gutter: clamp(1.10rem, 0.70rem + 2vw, 2.20rem); /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --transition: 180ms var(--ease); } /* ========================================================================== 3. TYPOGRAPHY ========================================================================== */ body { font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { line-height: 1.15; color: var(--navy); font-weight: 750; letter-spacing: -0.015em; 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 { max-width: 68ch; } .lead { font-size: var(--step-1); color: var(--text-muted); font-weight: 400; line-height: 1.55; max-width: 60ch; } .eyebrow { display: inline-block; font-size: var(--step--1); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-strong); margin-bottom: var(--space-xs); } strong { font-weight: 700; } /* ========================================================================== 4. BASE ELEMENTS ========================================================================== */ a { text-decoration-thickness: 1px; text-underline-offset: 2px; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-md) 0; } :target { scroll-margin-top: 6rem; } /* ========================================================================== 5. ACCESSIBILITY HELPERS ========================================================================== */ .visually-hidden { position: absolute !important; /* documented: standard sr-only pattern */ width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-sm); top: -100%; z-index: 200; background: var(--navy); color: var(--white); padding: 0.7rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600; transition: top var(--transition); } .skip-link:focus { top: var(--space-sm); } /* ========================================================================== 6. LAYOUT PRIMITIVES ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container-narrow { max-width: var(--container-narrow); } .section { padding-block: var(--space-xl); } .section--tight { padding-block: var(--space-lg); } .section--alt { background: var(--bg-alt); } .section--pale { background: var(--bg-pale); } .section--navy { background: var(--navy); color: var(--blue-pale); } .section--navy h2, .section--navy h3 { color: var(--white); } .stack > * + * { margin-top: var(--space-sm); } .stack-lg > * + * { margin-top: var(--space-md); } .grid { display: grid; gap: var(--space-md); } .section-head { max-width: 62ch; margin-bottom: var(--space-lg); } .section-head p { color: var(--text-muted); } /* ========================================================================== 7. HEADER & NAVIGATION ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: hsl(0 0% 100% / 0.92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border); transition: box-shadow var(--transition); } .site-header.is-scrolled { box-shadow: var(--shadow-md); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; padding-block: 0.6rem; } .brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--navy); font-weight: 750; letter-spacing: -0.02em; font-size: 1.18rem; } .brand svg { width: 40px; height: 40px; flex: none; } .brand .brand-sub { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-top: 1px; } .primary-nav ul { display: flex; align-items: center; gap: clamp(0.4rem, 1.4vw, 1.4rem); } .primary-nav a { display: inline-block; text-decoration: none; font-weight: 600; color: var(--text); padding: 0.55rem 0.35rem; border-radius: var(--radius-sm); position: relative; } .primary-nav a::after { content: ""; position: absolute; left: 0.35rem; right: 0.35rem; bottom: 0.3rem; height: 2px; background: var(--blue-strong); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); } .primary-nav a[aria-current="page"] { color: var(--navy); } .header-actions { display: flex; align-items: center; gap: var(--space-sm); } .header-phone { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap; } .header-phone svg { width: 18px; height: 18px; } .header-phone:hover { color: var(--blue-strong); } /* Mobile toggle */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--navy); } .nav-toggle svg { width: 24px; height: 24px; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } /* ========================================================================== 8. BUTTONS & LINKS ========================================================================== */ .btn { --btn-bg: var(--blue-strong); --btn-fg: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.75rem 1.4rem; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; line-height: 1.2; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); box-shadow: var(--shadow-sm); } .btn:hover { background: var(--navy); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); } .btn--accent { --btn-bg: var(--blue-accent); } .btn--accent:hover { background: var(--blue-strong); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy); border-color: var(--border); box-shadow: none; } .btn--ghost:hover { --btn-fg: var(--navy); background: var(--blue-pale); border-color: var(--blue-accent); } .btn--light { --btn-bg: var(--white); --btn-fg: var(--navy); } .btn--light:hover { background: var(--blue-pale); } .btn svg { width: 18px; height: 18px; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; } .text-link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 650; color: var(--blue-strong); text-decoration: none; } .text-link svg { width: 16px; height: 16px; transition: transform var(--transition); } .text-link:hover { color: var(--navy); text-decoration: underline; } .text-link:hover svg { transform: translateX(3px); } /* ========================================================================== 9. HERO SECTIONS ========================================================================== */ .hero { position: relative; background: linear-gradient(180deg, var(--ice), var(--white)); border-bottom: 1px solid var(--border); overflow: hidden; } .hero::before { /* Subtle masking-tape inspired edge, restrained */ content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 85% 0%, hsl(212 70% 92% / 0.9), transparent 70%); pointer-events: none; } .hero-inner { position: relative; display: grid; gap: var(--space-lg); padding-block: var(--space-xl); align-items: center; } .hero-copy { max-width: 40rem; } .hero-copy h1 { margin-bottom: var(--space-sm); } .hero-copy .lead { margin-bottom: var(--space-md); } .hero-figure { position: relative; } .hero-figure img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .hero-badges { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 650; font-size: var(--step--1); color: var(--navy); } .hero-badge svg { width: 20px; height: 20px; color: var(--blue-strong); flex: none; } /* Compact page hero (interior pages) */ .page-hero { background: linear-gradient(180deg, var(--ice), var(--white)); border-bottom: 1px solid var(--border); } .page-hero .hero-inner { padding-block: var(--space-lg); } /* ========================================================================== 10. REUSABLE CONTENT SECTIONS ========================================================================== */ .prose > * + * { margin-top: var(--space-sm); } .prose h2 { margin-top: var(--space-md); } .prose h3 { margin-top: var(--space-md); } .prose ul:not([class]) { padding-left: 1.2rem; display: grid; gap: 0.4rem; } .prose ul:not([class]) li { max-width: 68ch; } .prose a { color: var(--blue-strong); font-weight: 600; } /* Two-column content + aside */ .split { display: grid; gap: var(--space-lg); } /* Credibility / standards strip */ .standards { display: grid; gap: var(--space-md); } .standard { display: flex; gap: var(--space-sm); align-items: flex-start; } .standard .ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--blue-pale); border-radius: var(--radius-sm); color: var(--blue-strong); } .standard .ic svg { width: 24px; height: 24px; } .standard h3 { font-size: var(--step-1); margin-bottom: 0.2rem; } .standard p { color: var(--text-muted); font-size: var(--step--1); margin: 0; } /* Checklist */ .checklist { display: grid; gap: 0.6rem; } .checklist li { display: flex; gap: 0.6rem; align-items: flex-start; } .checklist svg { flex: none; width: 22px; height: 22px; color: var(--blue-strong); margin-top: 2px; } /* Callout */ .callout { background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--blue-strong); border-radius: var(--radius-md); padding: var(--space-md); box-shadow: var(--shadow-sm); } .callout h3 { font-size: var(--step-1); margin-bottom: 0.35rem; } .callout p { margin: 0; color: var(--text-muted); } /* ========================================================================== 11. SERVICE COMPONENTS ========================================================================== */ .card-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .service-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: clip; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--blue-accent); } .service-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 1px solid var(--border); } .service-card .card-body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.55rem; flex: 1; } .service-card h3 { font-size: var(--step-1); } .service-card p { color: var(--text-muted); font-size: var(--step--1); margin: 0; flex: 1; } .service-card .text-link { margin-top: 0.4rem; } /* ========================================================================== 12. PROCESS COMPONENTS ========================================================================== */ .process { display: grid; gap: var(--space-md); counter-reset: step; } .process-step { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); padding-top: calc(var(--space-md) + 0.6rem); } .process-step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: calc(-1 * var(--space-xs)); left: var(--space-md); font-size: var(--step-1); font-weight: 800; color: var(--blue-accent); background: var(--white); padding-inline: 0.4rem; letter-spacing: -0.03em; } .process-step h3 { font-size: var(--step-1); margin-bottom: 0.3rem; } .process-step p { color: var(--text-muted); margin: 0; font-size: var(--step--1); } .section--navy .process-step { background: hsl(210 60% 14%); border-color: hsl(210 45% 26%); } .section--navy .process-step::before { background: var(--navy); color: var(--blue-accent); } .section--navy .process-step p { color: hsl(210 40% 82%); } /* ========================================================================== 13. GALLERY & IMAGE TREATMENT ========================================================================== */ .gallery { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .gallery figure { margin: 0; border-radius: var(--radius-md); overflow: clip; border: 1px solid var(--border); box-shadow: var(--shadow-sm); background: var(--white); } .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .gallery figcaption { padding: 0.7rem var(--space-sm); font-size: var(--step--1); color: var(--text-muted); border-top: 1px solid var(--border); } .media-figure img { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-md); } .media-figure figcaption { margin-top: 0.6rem; font-size: var(--step--1); color: var(--text-muted); } /* ========================================================================== 14. FORMS ========================================================================== */ .form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-md); } .field-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, 1fr); } .field { display: flex; flex-direction: column; gap: 0.35rem; } .field--full { grid-column: 1 / -1; } .field label { font-weight: 650; font-size: var(--step--1); color: var(--navy); } .field .req { color: var(--blue-strong); } .field .hint { font-size: 0.78rem; color: var(--text-muted); font-weight: 400; } .field input, .field select, .field textarea { width: 100%; padding: 0.7rem 0.85rem; background: var(--ice); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; background: var(--white); border-color: var(--blue-strong); box-shadow: 0 0 0 3px hsl(212 70% 55% / 0.18); } .field textarea { min-height: 8rem; resize: vertical; } .field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: #b42318; } .field .error-msg { font-size: 0.8rem; color: #b42318; font-weight: 600; min-height: 0; } .consent { display: flex; gap: 0.6rem; align-items: flex-start; } .consent input { width: 20px; height: 20px; margin-top: 3px; flex: none; } .consent label { font-weight: 400; font-size: var(--step--1); color: var(--text-muted); } .consent a { color: var(--blue-strong); font-weight: 600; } /* Honeypot — visually and functionally hidden from real users */ .hp-field { position: absolute !important; /* documented: spam honeypot must not be visible */ left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--space-sm); } /* No-JS / server error message region */ .form-alert { border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); font-weight: 600; border: 1px solid; } .form-alert--error { background: #fef3f2; border-color: #f2b8b1; color: #91231a; } /* Contact detail cards */ .contact-methods { display: grid; gap: var(--space-sm); } .contact-method { display: flex; gap: var(--space-sm); align-items: flex-start; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); } .contact-method .ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; background: var(--blue-pale); color: var(--blue-strong); border-radius: var(--radius-sm); } .contact-method .ic svg { width: 22px; height: 22px; } .contact-method h3 { font-size: var(--step-0); margin-bottom: 0.1rem; } .contact-method a { color: var(--navy); font-weight: 700; text-decoration: none; } .contact-method a:hover { color: var(--blue-strong); } .contact-method p { margin: 0; font-size: var(--step--1); color: var(--text-muted); } /* ========================================================================== 15. FAQs ========================================================================== */ .faq-list { display: grid; gap: var(--space-xs); max-width: 60rem; } .faq-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: clip; } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); font-weight: 700; color: var(--navy); cursor: pointer; list-style: none; min-height: 44px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .chev { flex: none; width: 22px; height: 22px; color: var(--blue-strong); transition: transform var(--transition); } .faq-item[open] summary .chev { transform: rotate(180deg); } .faq-item summary:hover { background: var(--ice); } .faq-answer { padding: 0 var(--space-md) var(--space-md); color: var(--text-muted); } .faq-answer > * + * { margin-top: var(--space-xs); } /* ========================================================================== 16. FOOTER ========================================================================== */ .site-footer { background: var(--navy-deep); color: hsl(210 40% 80%); padding-block: var(--space-xl) var(--space-lg); margin-top: var(--space-xl); } .footer-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1.4fr 1fr 1fr; } .footer-brand .brand { color: var(--white); } .footer-brand .brand svg { color: var(--blue-accent); } .footer-brand p { margin-top: var(--space-sm); color: hsl(210 35% 72%); font-size: var(--step--1); max-width: 34ch; } .footer-col h2 { font-size: var(--step-0); color: var(--white); margin-bottom: var(--space-sm); letter-spacing: 0; } .footer-col ul { display: grid; gap: 0.5rem; } .footer-col a { color: hsl(210 38% 80%); text-decoration: none; font-size: var(--step--1); } .footer-col a:hover { color: var(--white); text-decoration: underline; } .footer-contact a { color: var(--white); font-weight: 700; } .footer-bottom { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid hsl(210 40% 24%); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); justify-content: space-between; align-items: center; font-size: 0.82rem; color: hsl(210 30% 66%); } .footer-bottom a { color: hsl(210 38% 80%); } /* ========================================================================== 17. PAGE-SPECIFIC COMPONENTS ========================================================================== */ /* Breadcrumbs */ .breadcrumbs { padding-block: var(--space-sm); border-bottom: 1px solid var(--border); background: var(--white); } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: var(--step--1); color: var(--text-muted); } .breadcrumbs a { color: var(--blue-strong); text-decoration: none; font-weight: 600; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs li[aria-current="page"] { color: var(--text-muted); } .breadcrumbs .sep { color: var(--border); } /* Service-area chips */ .area-list { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: var(--space-md); } .area-list li { background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 0.9rem; font-weight: 600; font-size: var(--step--1); color: var(--navy); } /* Final CTA band */ .cta-band { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--blue-pale); border-radius: var(--radius-lg); padding: var(--space-lg); position: relative; overflow: hidden; } .cta-band::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; background: radial-gradient(circle, hsl(212 75% 55% / 0.35), transparent 70%); pointer-events: none; } .cta-band h2 { color: var(--white); margin-bottom: var(--space-xs); } .cta-band p { color: hsl(210 45% 84%); margin-bottom: var(--space-md); max-width: 52ch; } /* Mobile sticky contact bar */ .mobile-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px -12px hsl(var(--shadow-color) / 0.4); padding: 0.5rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); gap: 0.5rem; } .mobile-bar .btn { flex: 1; min-height: 46px; } /* About / values */ .value-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .value { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); } .value .ic { width: 42px; height: 42px; display: grid; place-items: center; background: var(--blue-pale); color: var(--blue-strong); border-radius: var(--radius-sm); margin-bottom: var(--space-sm); } .value .ic svg { width: 24px; height: 24px; } .value h3 { font-size: var(--step-1); margin-bottom: 0.3rem; } .value p { color: var(--text-muted); font-size: var(--step--1); margin: 0; } /* ========================================================================== 18. RESPONSIVE RULES ========================================================================== */ @media (min-width: 720px) { .split { grid-template-columns: 1.15fr 0.85fr; align-items: start; } .standards { grid-template-columns: repeat(2, 1fr); } .process { grid-template-columns: repeat(2, 1fr); } .field-grid .field--half { grid-column: span 1; } } @media (min-width: 940px) { .hero-inner { grid-template-columns: 1.05fr 0.95fr; } .hero--reverse .hero-figure { order: 2; } .standards { grid-template-columns: repeat(3, 1fr); } .process { grid-template-columns: repeat(4, 1fr); } .contact-layout { grid-template-columns: 1.1fr 0.9fr; align-items: start; } } .contact-layout { display: grid; gap: var(--space-lg); } /* Below desktop: switch to mobile nav */ @media (max-width: 899px) { .nav-toggle { display: inline-flex; } .primary-nav { position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px); background: var(--white); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: calc(72px + var(--space-md)) var(--space-md) var(--space-md); transform: translateX(100%); transition: transform 220ms var(--ease); overflow-y: auto; } .primary-nav.is-open { transform: translateX(0); } .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0.2rem; } .primary-nav a { padding: 0.85rem 0.6rem; border-radius: var(--radius-sm); border-bottom: 1px solid var(--border); } .primary-nav a::after { display: none; } .primary-nav a:hover, .primary-nav a[aria-current="page"] { background: var(--ice); } .nav-mobile-cta { margin-top: var(--space-md); display: grid; gap: var(--space-sm); } .nav-mobile-cta .btn { width: 100%; } /* Backdrop */ .nav-backdrop { position: fixed; inset: 0; background: hsl(210 40% 12% / 0.45); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); z-index: 95; } .nav-backdrop.is-open { opacity: 1; visibility: visible; } .primary-nav { z-index: 100; } .header-actions .btn, .header-actions .header-phone { display: none; } .mobile-bar { display: flex; } /* Keep footer & content clear of the fixed bar */ body.has-mobile-bar { padding-bottom: 72px; } } /* Desktop: hide mobile-only nav extras */ @media (min-width: 900px) { .nav-mobile-cta { display: none; } .nav-backdrop { display: none; } .nav-toggle { display: none; } } @media (max-width: 719px) { .field-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } .btn-row .btn { width: 100%; } } /* ========================================================================== 19. REDUCED-MOTION RULES ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; /* documented: honor reduced motion */ animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .btn:hover, .service-card:hover { transform: none; } } /* ========================================================================== 20. PRINT STYLES ========================================================================== */ @media print { .site-header, .mobile-bar, .nav-backdrop, .cta-band, .hero-figure, .btn, .skip-link { display: none !important; } body { color: #000; background: #fff; } a { color: #000; text-decoration: underline; } .section { padding-block: 1rem; } }