/* ============================================================ _immov2-template — site/style.css Kitchen & bath remodeling skin, derived from immovable-masonry-kc. Palette: teal blend (Burbank cyan + A&J deep teal) with a warm taupe secondary; dark teal-charcoal contrast sections. Fonts: Barlow (headings) + Roboto (body), self-hosted. ============================================================ */ /* ---------- Design Tokens ---------- */ :root { --color-accent: #00B5D9; /* Burbank teal — brand fills (buttons, cards) + accents on dark */ --color-accent-dark: #0098BC; /* darker cyan — fill hover */ --color-accent-bright: #00B5D9; /* Burbank bright cyan-teal for dark backgrounds */ --color-on-accent: #06242c; /* dark ink for text/icons sitting ON the bright teal (AA ~7:1) */ --color-teal-ink: #0E7490; /* deep teal — teal TEXT on light backgrounds (AA on white) */ --color-secondary: #8E7861; /* warm taupe — sparing accents, badges */ --color-secondary-bright: #b39c84;/* lighter taupe for dark backgrounds */ --color-yellow: #FDDB17; /* Burbank yellow — alternate accent / CTAs */ --color-yellow-dark: #E4C40C; /* yellow hover */ --color-yellow-ink: #2f2600; /* dark ink for text on yellow */ --color-gold: #A1885D; /* A&J brownish-gold — highlights (brackets, emphasis) */ --color-gold-bright: #C6A86F; /* lighter gold for emphasis text on dark */ --color-header: #0E2229; /* dark teal — sticky header */ --color-link: #0E7490; --color-black: #08181e; /* top bar, form cards, header phone button (near-black teal) */ --color-charcoal: #0E2229; /* dark sections, footer (deep teal-charcoal) */ --color-charcoal-2: #13323B; /* cards inside dark sections */ --color-gray: #d7dee0; /* secondary button, light borders */ --color-text: #263238; --color-text-muted: #5c6b70; --color-heading: #14252b; --color-bg: #ffffff; --color-bg-alt: #F5EAE6; /* Burbank warm cream — alt section bg */ --color-border: #dbe4e6; --color-error: #b00020; --color-focus: #0E7490; --color-fg-on-dark: #ffffff; /* check-bullet images — tokenized so a palette can recolor them (CSS vars can't interpolate into a data-URI, so each palette supplies its own full url()). */ --bullet-light: url("data:image/svg+xml;utf8,"); --bullet-dark: url("data:image/svg+xml;utf8,"); --tick-light: url("data:image/svg+xml;utf8,"); --tick-dark: url("data:image/svg+xml;utf8,"); --shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --shadow-md: 0 10px 30px rgba(0,0,0,0.15); --shadow-lg: 0 18px 50px rgba(0,0,0,0.30); --max-w: 1200px; --header-h: 84px; --font-body: "Manjari", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-head: "Syne", "Barlow", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-display: "Syne", "Barlow", system-ui, sans-serif; /* alias — Syne is now the site heading font */ } /* ============================================================ ASSEMBLY-TIME PALETTE VARIANTS Default (no attribute) = the teal palette in :root above. To build a site in another palette, add the attribute to : Every rule reads role tokens. Alternate palettes override the FULL color-role set — every role gets a NEW value while keeping its FUNCTION (light bgs stay light, dark sections stay dark, inks stay readable, error stays red). Contrast rules are hard requirements: on-accent ink reads on accent ≥4.5:1; *-ink reads on white AND bg-alt ≥4.5:1; *-bright reads on charcoal ≥4.5:1; body text on bg aims ≥7:1. Add more palettes by cloning a block below. ============================================================ */ /* Slate — steel blue + warm sand. Cool paper-white page, slate-tinted inks/neutrals, leather-tan secondary, muted amber + bronze accents. */ [data-theme="slate"] { --color-accent: #3E6B8C; /* steel blue fill */ --color-accent-dark: #335A76; /* fill hover */ --color-accent-bright: #6BA6CC; /* steel blue on dark (≥4.5:1 on charcoal) */ --color-on-accent: #ffffff; /* white reads on the mid steel-blue */ --color-teal-ink: #2C567A; /* brand TEXT on light (white + sand) */ --color-secondary: #8A6F51; /* warm leather tan — badges, sparing accents */ --color-secondary-bright: #C2A985; /* lighter tan for dark backgrounds */ --color-yellow: #DCA83E; /* muted amber — alternate accent */ --color-yellow-dark: #C2912E; /* amber hover */ --color-yellow-ink: #2b2005; /* dark ink on the amber */ --color-gold: #9C7B4E; /* warm bronze — highlights on light */ --color-gold-bright: #C8A878; /* bronze emphasis on dark */ --color-header: #1B2A38; /* slate-navy sticky header */ --color-link: #2C567A; --color-black: #101b24; /* near-black slate (top bar, form cards) */ --color-charcoal: #1B2A38; /* dark sections, footer */ --color-charcoal-2: #24384A; /* cards inside dark sections */ --color-gray: #D3DAE1; /* cool slate secondary button / light borders */ --color-text: #2A3540; /* slate-cast body ink (~12:1 on bg) */ --color-text-muted: #5A6B7A; /* cool blue-gray muted ink */ --color-heading: #1C2B39; /* slate-navy headings */ --color-bg: #FAFBFC; /* cool paper-white page bg */ --color-bg-alt: #F0E9DC; /* warm sand content boxes */ --color-border: #D5DDE4; /* cool slate border */ --color-error: #B0243A; /* slightly cool red */ --color-focus: #2C567A; --color-fg-on-dark: #ffffff; --bullet-light: url("data:image/svg+xml;utf8,"); --bullet-dark: url("data:image/svg+xml;utf8,"); --tick-light: url("data:image/svg+xml;utf8,"); --tick-dark: url("data:image/svg+xml;utf8,"); } /* Forest — green + cream. Warm ivory page, gray-green inks, oak-tan secondary, harvest-gold + olive-gold accents, sage-tinted neutrals. */ [data-theme="forest"] { --color-accent: #2F7A55; /* forest green fill */ --color-accent-dark: #276847; /* fill hover */ --color-accent-bright: #63B98C; /* green on dark (≥4.5:1 on charcoal) */ --color-on-accent: #ffffff; /* white reads on the forest green */ --color-teal-ink: #1F6B47; /* brand TEXT on light (white + cream) */ --color-secondary: #8C6E4A; /* warm oak tan — badges, sparing accents */ --color-secondary-bright: #C0A47D; /* lighter oak for dark backgrounds */ --color-yellow: #D9A62E; /* harvest gold — alternate accent */ --color-yellow-dark: #BE8F22; /* harvest gold hover */ --color-yellow-ink: #2a2003; /* dark ink on the gold */ --color-gold: #8A7A3E; /* olive gold — highlights on light */ --color-gold-bright: #BCA95F; /* olive-gold emphasis on dark */ --color-header: #17281F; /* deep green-black sticky header */ --color-link: #1F6B47; --color-black: #0e1a13; /* near-black green (top bar, form cards) */ --color-charcoal: #17281F; /* dark sections, footer */ --color-charcoal-2: #203A2C; /* cards inside dark sections */ --color-gray: #D6DCD2; /* warm sage secondary button / light borders */ --color-text: #2B362E; /* gray-green body ink (~12:1 on bg) */ --color-text-muted: #5E6B60; /* warm gray-green muted ink */ --color-heading: #1E2C22; /* deep green headings */ --color-bg: #FBFAF6; /* warm ivory page bg */ --color-bg-alt: #F1ECDD; /* cream content boxes */ --color-border: #DAE0D4; /* warm sage border */ --color-error: #A93226; /* warm red */ --color-focus: #1F6B47; --color-fg-on-dark: #ffffff; --bullet-light: url("data:image/svg+xml;utf8,"); --bullet-dark: url("data:image/svg+xml;utf8,"); --tick-light: url("data:image/svg+xml;utf8,"); --tick-dark: url("data:image/svg+xml;utf8,"); } /* Onyx — striking black + vivid teal pop. True-black dark sections (charcoal/header = #000), cool light-gray page furniture, deep-teal brand text on light, brass alternate CTA. immov2's dark-on-bright-teal ink direction is preserved (white fails on #00acac, so ink stays dark). */ [data-theme="onyx"] { --color-accent: #00acac; /* vivid teal fill */ --color-accent-dark: #009c9c; /* fill hover — kept light enough that the dark on-accent ink still clears AA (4.81:1; #009292 was 4.26, Codex PR#5) */ --color-accent-bright: #00acac; /* teal on dark (7.5:1 on true-black) */ --color-on-accent: #06242c; /* DARK ink reads on the vivid teal (5.8:1); white fails (~2.8:1) */ --color-teal-ink: #0A5C72; /* deep teal — brand TEXT on light (white 7.5:1 + cool-gray 5.6:1) */ --color-secondary: #a6a7a2; /* sage-gray — badges, sparing accents */ --color-secondary-bright: #c4c5c0; /* lighter sage for dark backgrounds */ --color-yellow: #C79A3E; /* brass — alternate CTA (pops on black) */ --color-yellow-dark: #B0862E; /* brass hover */ --color-yellow-ink: #241a02; /* dark ink on the brass (6.6:1) */ --color-gold: #9A7C46; /* muted gold — highlights on light */ --color-gold-bright: #C6A86F; /* gold emphasis on dark */ --color-header: #000000; /* true-black sticky header (onyx signature) */ --color-link: #0A5C72; --color-black: #0d0d0d; /* near-black (top bar, form cards) */ --color-charcoal: #000000; /* true-black dark sections, footer */ --color-charcoal-2: #1c1c1c; /* cards inside dark sections */ --color-gray: #d5d6d2; /* cool gray secondary button / light borders */ --color-text: #232322; /* near-black body ink (~16:1 on white) */ --color-text-muted: #5c5c5a; /* neutral gray muted ink */ --color-heading: #171716; /* near-black headings */ --color-bg: #ffffff; /* white page bg */ --color-bg-alt: #dfdedc; /* cool light-gray content boxes */ --color-border: #cdccc9; /* cool gray border */ --color-error: #b00020; --color-focus: #0A5C72; --color-fg-on-dark: #ffffff; --bullet-light: url("data:image/svg+xml;utf8,"); --bullet-dark: url("data:image/svg+xml;utf8,"); --tick-light: url("data:image/svg+xml;utf8,"); --tick-dark: url("data:image/svg+xml;utf8,"); } /* Clay — warm clay + cool slate (two-temperature). Warm clay fills/CTAs, cool slate-blue brand text/links, deep-brown dark sections, coral pop on dark, warm-greige page furniture. Clay seed #bc7b6f is darkened to #A85B4D so WHITE ink clears AA on the fill (raw #bc7b6f + white ≈ 3:1 fails). */ [data-theme="clay"] { --color-accent: #A85B4D; /* clay fill (seed #bc7b6f darkened for white ink) */ --color-accent-dark: #8F4B3E; /* fill hover */ --color-accent-bright: #e4a499; /* light coral on dark (7:1 on deep brown) */ --color-on-accent: #ffffff; /* white ink reads on the clay fill (4.9:1) */ --color-teal-ink: #445E78; /* slate-blue — brand TEXT on light (seed #718a9e deepened; white 6.4:1 + greige 5.0:1) */ --color-secondary: #718a9e; /* slate blue — badges, sparing accents */ --color-secondary-bright: #9db0c0; /* lighter slate for dark backgrounds */ --color-yellow: #e4a499; /* light coral — alternate CTA (clay-family warm pop) */ --color-yellow-dark: #d68b7e; /* coral hover */ --color-yellow-ink: #3a1e18; /* deep-brown ink on the coral (7.3:1) */ --color-gold: #9C6E52; /* warm bronze — highlights on light */ --color-gold-bright: #C89A7A; /* bronze emphasis on dark */ --color-header: #3d221c; /* deep-brown sticky header */ --color-link: #445E78; --color-black: #2e1a15; /* near-black brown (top bar, form cards) */ --color-charcoal: #3d221c; /* deep-brown dark sections, footer */ --color-charcoal-2: #4d2c24; /* cards inside dark sections */ --color-gray: #d8d3ce; /* warm gray secondary button / light borders */ --color-text: #2b211d; /* warm near-black body ink (~15:1 on bg) */ --color-text-muted: #6a5852; /* warm taupe-gray muted ink */ --color-heading: #35211b; /* deep-brown headings */ --color-bg: #FCF9F6; /* warm paper page bg */ --color-bg-alt: #e6dbd2; /* warm-greige content boxes */ --color-border: #ddd2ca; /* warm greige border */ --color-error: #A93226; /* warm red */ --color-focus: #445E78; --color-fg-on-dark: #ffffff; --bullet-light: url("data:image/svg+xml;utf8,"); --bullet-dark: url("data:image/svg+xml;utf8,"); --tick-light: url("data:image/svg+xml;utf8,"); --tick-dark: url("data:image/svg+xml;utf8,"); } /* Brick — recreates the ORIGINAL immovable-masonry-kc look (immov2 was re-skinned from it): terracotta brick accent, neutral-charcoal dark sections, warm off-white page. NOTE the on-accent direction flips vs immov2's default: the original used WHITE ink on the brick fill (white on #B7410E ≈ 5.6:1 passes AA), so --color-on-accent = #fff here. accent-bright is lightened from the source #cf4d14 to #F07F40 to clear 4.5:1 on charcoal. */ [data-theme="brick"] { --color-accent: #B7410E; /* terracotta brick fill */ --color-accent-dark: #8A3209; /* fill hover */ --color-accent-bright: #F07F40; /* lightened terracotta on dark (5.3:1 on #2b2b2b, 4.7:1 on the steps mini-cta wash; source #cf4d14 = 3.2:1 fails) */ --color-on-accent: #ffffff; /* WHITE ink on brick fill (5.6:1) — direction flip vs default's dark ink */ --color-teal-ink: #B7410E; /* brick — brand TEXT/links on light (white 5.6:1 + off-white 5.0:1) */ --color-secondary: #9a8d7e; /* warm stone/taupe (derived from #d3d3d3/#e2ddd6) */ --color-secondary-bright: #c3b7a6; /* lighter stone for dark backgrounds */ --color-yellow: #E0A32E; /* warm amber — alternate CTA (complements terracotta) */ --color-yellow-dark: #C68C1E; /* amber hover */ --color-yellow-ink: #2a1c02; /* dark ink on the amber (7.5:1) */ --color-gold: #96794a; /* warm gold — highlights on light */ --color-gold-bright: #C4A76E; /* gold emphasis on dark */ --color-header: #2b2b2b; /* neutral-charcoal sticky header */ --color-link: #B7410E; --color-black: #000000; /* black (top bar, form cards) */ --color-charcoal: #2b2b2b; /* neutral-charcoal dark sections, footer */ --color-charcoal-2: #1f1f1f; /* cards inside dark sections */ --color-gray: #d3d3d3; /* neutral-gray secondary button / light borders */ --color-text: #2c2c2c; /* near-black body ink (~14:1 on white) */ --color-text-muted: #6b6b6b; /* neutral gray muted ink */ --color-heading: #222222; /* near-black headings */ --color-bg: #ffffff; /* white page bg */ --color-bg-alt: #f4f2ef; /* warm off-white content boxes */ --color-border: #e2ddd6; /* warm gray border */ --color-error: #b00020; --color-focus: #B7410E; --color-fg-on-dark: #ffffff; --bullet-light: url("data:image/svg+xml;utf8,"); --bullet-dark: url("data:image/svg+xml;utf8,"); --tick-light: url("data:image/svg+xml;utf8,"); --tick-dark: url("data:image/svg+xml;utf8,"); } /* ---------- Self-hosted fonts ---------- */ @font-face { font-family:"Roboto"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/roboto.woff2") format("woff2"); } @font-face { font-family:"Barlow"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/barlow-600.woff2") format("woff2"); } @font-face { font-family:"Barlow"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/barlow-700.woff2") format("woff2"); } @font-face { font-family:"Syne"; font-style:normal; font-weight:400 800; font-display:swap; src:url("/fonts/syne.woff2") format("woff2"); } @font-face { font-family:"Manjari"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/manjari-400.woff2") format("woff2"); } @font-face { font-family:"Manjari"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/manjari-700.woff2") format("woff2"); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { overflow-x: clip; } :target, section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } img, picture, svg { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.08; margin: 0 0 0.5em; color: var(--color-heading); text-transform: uppercase; letter-spacing: 0.005em; } h1 { font-size: clamp(1.85rem, 4.5vw, 3rem); } h2 { font-size: clamp(1.5rem, 3.3vw, 2.1rem); } h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); } h4 { font-size: 1.2rem; } p { margin: 0 0 1em; } a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } strong { color: inherit; font-weight: 700; } /* ---------- A11y ---------- */ :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } .skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; background: var(--color-black); color: #fff; padding: 0.75rem 1rem; z-index: 1000; } .skip-link:focus { left: 0; top: 0; width: auto; height: auto; } .hp-field { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; } main { display: block; } section { padding: clamp(2.75rem, 6vw, 4.5rem) 0; } .section-dark { background: var(--color-charcoal); color: var(--color-fg-on-dark); } .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; } .section-dark p { color: rgba(255,255,255,0.82); } .section-dark a:not(.btn) { color: var(--color-accent-bright); } .section-intro { max-width: 75ch; margin: 0 0 2rem; } .section-cta { display: flex; justify-content: center; margin-top: 2rem; } .accent { color: var(--color-teal-ink); } .section-dark .accent { color: var(--color-accent-bright); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font: inherit; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.8rem 1.6rem; border: 2px solid transparent; border-radius: 0; text-decoration: none; cursor: pointer; min-height: 48px; line-height: 1.1; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease; } .btn:active { transform: translateY(1px); } .btn-call { background: var(--color-accent); color: var(--color-on-accent); } .btn-call:hover { background: var(--color-accent-dark); color: var(--color-on-accent); } .btn-services { background: var(--color-gray); color: var(--color-heading); } .btn-services:hover { background: #fff; } .btn-accent { background: var(--color-yellow); color: var(--color-yellow-ink); } .btn-accent:hover { background: var(--color-yellow-dark); color: var(--color-yellow-ink); } .btn-light { background: var(--color-bg-alt); color: var(--color-teal-ink); } .btn-light:hover { background: #fff; color: var(--color-teal-ink); } .btn-outline-dark { background: transparent; color: var(--color-heading); border-color: var(--color-heading); } .btn-outline-dark:hover { background: var(--color-heading); color: #fff; } .btn-tel { background: var(--color-accent); color: var(--color-on-accent); border-radius: 999px; padding: 0.7rem 1.4rem; white-space: nowrap; flex-shrink: 0; } .btn-tel:hover { background: var(--color-accent-dark); color: var(--color-on-accent); } /* aliases so utility pages' existing button classes keep working */ .btn-primary { background: var(--color-accent); color: var(--color-on-accent); } .btn-primary:hover { background: var(--color-accent-dark); color: var(--color-on-accent); } .btn-outline-navy { background: transparent; color: var(--color-heading); border-color: var(--color-heading); } .btn-outline-navy:hover { background: var(--color-heading); color: #fff; } .btn-block { display: flex; width: 100%; } /* ============================================================ Header (dark teal, sticky) ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--color-header); box-shadow: 0 2px 10px rgba(0,0,0,0.28); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); } .brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; background: #fff; padding: 0.55rem 1rem; text-decoration: none; box-shadow: 0 6px 14px rgba(0,0,0,0.18); } .brand-text { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 1.6rem; line-height: 1; letter-spacing: 0.01em; color: var(--color-heading); } .brand-text b { color: var(--color-teal-ink); font-weight: 700; } .brand-locale { font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-muted); margin-left: 1px; } @media (max-width: 600px) { .brand-text { font-size: 1.3rem; } } .site-nav { display: flex; align-items: center; } .nav-list { display: flex; align-items: center; gap: 0.25rem 1.4rem; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; } .nav-item { position: relative; } .nav-item > a { display: inline-flex; align-items: center; gap: 0.3rem; color: #fff; text-decoration: none; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.92rem; padding: 1rem 0.1rem; } .nav-item > a:hover { color: var(--color-accent-bright); } .nav-caret { transition: transform .15s ease; flex-shrink: 0; } .has-dropdown:hover > a .nav-caret, .has-dropdown:focus-within > a .nav-caret { transform: rotate(180deg); } .dropdown { position: absolute; top: 100%; left: 0; min-width: 270px; background: #fff; box-shadow: 0 16px 36px rgba(0,0,0,0.22); list-style: none; margin: 0; padding: 0.5rem 0; z-index: 100; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, visibility .15s ease, transform .15s ease; border-top: 3px solid var(--color-black); } .has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown li { margin: 0; } .dropdown a { display: block; padding: 0.55rem 1.1rem; font-size: 0.92rem; font-weight: 500; color: var(--color-text); text-decoration: none; white-space: nowrap; } .dropdown a:hover, .dropdown a:focus-visible { background: var(--color-bg-alt); color: var(--color-teal-ink); } .dropdown-2col { display: grid; grid-template-columns: 1fr 1fr; min-width: 420px; gap: 0; } .dropdown-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; min-width: 560px; gap: 0; } @media (max-width: 1100px) { .dropdown-3col { grid-template-columns: 1fr 1fr; min-width: 400px; } } .nav-cta { margin-left: 0.5rem; } .menu-toggle { display: none; background: transparent; border: 0; padding: 0; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; } .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 24px; height: 2px; background: #fff; transition: transform .25s ease, top .25s ease; } .menu-toggle span { position: relative; } .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; } .menu-toggle span::before { top: -7px; } .menu-toggle span::after { top: 7px; } .menu-toggle.is-open span { background: transparent; } .menu-toggle.is-open span::before { top: 0; transform: rotate(45deg); } .menu-toggle.is-open span::after { top: 0; transform: rotate(-45deg); } @media (max-width: 940px) { .site-header .container { flex-wrap: wrap; align-content: center; row-gap: 0; } .site-header .brand { min-height: var(--header-h); justify-content: center; } .site-nav { display: none; } .menu-toggle { display: inline-flex; order: 3; } .nav-cta { order: 2; } .site-nav.is-open { display: block; order: 4; flex: 1 1 100%; margin: 0.5rem -1.25rem -0.5rem; padding: 0.25rem 1.25rem 1rem; background: var(--color-charcoal); } .site-nav.is-open .nav-list { flex-direction: column; align-items: stretch; gap: 0; } .site-nav.is-open .nav-item { width: 100%; position: static; } .site-nav.is-open .nav-item + .nav-item { border-top: 1px solid rgba(255,255,255,0.15); } .site-nav.is-open .nav-item > a { justify-content: space-between; padding: 0.85rem 0; font-size: 1.05rem; } .site-nav.is-open .dropdown { display: none; position: static; opacity: 1; visibility: visible; transform: none; background: transparent; box-shadow: none; border-top: 0; min-width: 0; padding: 0 0 0.5rem 1rem; } .site-nav.is-open .has-dropdown.expanded > .dropdown { display: block; } .site-nav.is-open .has-dropdown.expanded > a .nav-caret { transform: rotate(180deg); } .site-nav.is-open .dropdown-2col, .site-nav.is-open .dropdown-3col { grid-template-columns: 1fr; min-width: 0; } .site-nav.is-open .dropdown a { color: rgba(255,255,255,0.85); padding: 0.4rem 0; white-space: normal; } .site-nav.is-open .dropdown a:hover { background: transparent; color: #fff; } } /* Small mobile: phone button drops to its own centered row below logo + hamburger */ @media (max-width: 480px) { .menu-toggle { order: 1; } .nav-cta { order: 2; flex: 0 0 100%; max-width: max-content; margin: 0.15rem auto 0.6rem; } } /* ============================================================ Hero (split: heading + CTAs left, estimate form right) ============================================================ */ .hero { position: relative; background: linear-gradient(color-mix(in srgb, var(--color-charcoal) 72%, transparent), color-mix(in srgb, var(--color-charcoal) 86%, transparent)), url("/images/hardwood-floor-grain-texture-1600.webp") center / cover no-repeat, var(--color-charcoal); color: #fff; padding: clamp(3rem, 7vw, 6rem) 0; } /* fixed (parallax) background — dropped ≤900px, where iOS renders attachment:fixed badly */ @media (min-width: 901px) { .hero { background-attachment: fixed; } } /* wide screens get the full 2048px source instead of an upscaled 1600 (+31KB) */ @media (min-width: 1600px) { .hero { background-image: linear-gradient(color-mix(in srgb, var(--color-charcoal) 72%, transparent), color-mix(in srgb, var(--color-charcoal) 86%, transparent)), url("/images/hardwood-floor-grain-texture-2048.webp"); } } .hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.4fr 0.6fr; } } .hero-text h1 { color: #fff; margin: 0 0 1.75rem; max-width: 18ch; } .hero-text h1 .accent { color: var(--color-accent-bright); } /* .hero-headline — full-width headline for the ALT hero (spans above both columns) */ .hero-headline { color: #fff; max-width: 100%; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); } /* intro hero: tighter top padding (headline starts higher) */ .hero:has(.hero-intro) { padding-top: clamp(1.25rem, 3vw, 2.5rem); } .hero-headline .accent { color: var(--color-accent-bright); } /* with a headline on top, top-align the columns (alt hero only) */ .hero-headline + .hero-grid { align-items: start; } /* .hero-intro — lead paragraph for the ALT (intro) hero variant */ .hero-intro { color: rgba(255,255,255,0.92); font-weight: 700; line-height: 1.5; margin: 0 0 0.85rem; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; } /* ---------- Estimate form card (teal) ---------- */ .estimate-card { background: var(--color-accent); color: var(--color-on-accent); padding: clamp(1.5rem, 3vw, 2.25rem); } .estimate-title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; text-align: center; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.2; color: var(--color-on-accent); margin: 0 0 1.25rem; letter-spacing: 0.01em; } .estimate-form { display: grid; gap: 0.75rem; } .estimate-form input, .estimate-form select, .estimate-form textarea { font: inherit; width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; border: 0; border-radius: 0; background: #f3f4f6; color: var(--color-text); } .estimate-form select { color: #6b6b6b; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2.2rem; } .estimate-form textarea { min-height: 110px; resize: vertical; } /* Reserve the Turnstile widget's height so its async render doesn't shift the hero */ .cf-turnstile { min-height: 76px; } .estimate-form input:focus, .estimate-form select:focus, .estimate-form textarea:focus { outline: 3px solid var(--color-accent); outline-offset: 1px; } .estimate-form button[type="submit"] { background: var(--color-charcoal); color: #fff; font: inherit; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.95rem; border: 0; cursor: pointer; min-height: 52px; } .estimate-form button[type="submit"]:hover { background: var(--color-black); } /* ============================================================ Trust / About ============================================================ */ .trust-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; } /* Cream "content box" on the utility-page trust section */ .trust .container { background: var(--color-bg-alt); padding: clamp(1.75rem, 4vw, 3.25rem); box-shadow: var(--shadow-sm); } @media (min-width: 880px) { .trust-grid { grid-template-columns: 1.1fr 0.9fr; } } .trust h2 { color: var(--color-heading); } .trust-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; } .trust-media > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--shadow-md); } /* ============================================================ Feature lists (check-bullet lists — used by lf-banner + long blocks) ============================================================ */ .feature-list { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.95rem; } .feature-list li { position: relative; padding-left: 28px; margin-bottom: 0.7rem; line-height: 1.45; } .feature-list li strong { color: var(--color-heading); } .feature-list li::before { content: ""; position: absolute; left: 0; top: 0.18em; width: 16px; height: 16px; background-repeat: no-repeat; background-size: contain; background-image: var(--tick-light); } .section-dark .feature-list li { color: rgba(255,255,255,0.85); } .section-dark .feature-list li strong { color: #fff; } .section-dark .feature-list li::before { background-image: var(--tick-dark); } .feature-list-2col, .feature-list-3col { display: grid; gap: 0 1.75rem; grid-template-columns: 1fr; } @media (min-width: 600px) { .feature-list-2col, .feature-list-3col { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .feature-list-3col { grid-template-columns: 1fr 1fr 1fr; } } /* ============================================================ Services — full-bleed dark grid, teal hairline dividers. Alternating rows: 3-across (image over stacked title+text), then 2-across (image left, title+text right). Ported from the A&J Remodels services grid, retheme'd to the teal palette. ============================================================ */ .services h2 { text-align: center; color: #fff; font-family: var(--font-display); } .services .section-intro { text-align: center; margin-left: auto; margin-right: auto; } /* full-bleed wrapper: escape the page and any container gutters */ .services-grid { margin-top: 2.5rem; } .svc-row { display: grid; gap: 2px; background: var(--color-accent-bright); } .svc-row + .svc-row { border-top: 2px solid var(--color-accent-bright); } .svc-row-3 { grid-template-columns: repeat(3, 1fr); } .svc-row-2 { grid-template-columns: repeat(2, 1fr); } /* cells sit on the dark section colour so the teal gaps read as dividers */ .svc-cell { background: var(--color-charcoal); position: relative; } .svc-cell-link { color: inherit; text-decoration: none; display: block; height: 100%; } .svc-figure { margin: 0; overflow: hidden; background: var(--color-charcoal-2); } .svc-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .svc-cell:hover .svc-img { transform: scale(1.03); } .svc-title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; margin: 0; transition: color .15s ease; } .svc-cell:hover .svc-title { color: var(--color-accent-bright); } .svc-text { color: rgba(255,255,255,0.78); font-size: 0.95rem; margin: 0.6rem 0 0; } /* 3-across: inset image on top, centered title, then text below */ .svc-cell-3 { display: flex; flex-direction: column; text-align: center; padding: 2.5rem 2.5rem 0; } .svc-cell-3 .svc-figure { aspect-ratio: 4 / 3; } .svc-cell-3 .svc-body { padding: 1.25rem 0.25rem 1.75rem; } .svc-cell-3 .svc-title { font-size: 1.3rem; } /* 2-across: inset image left, title + text on the right */ .svc-cell-2 { padding: 1.5rem; } .svc-cell-2 .svc-cell-link { display: grid; grid-template-columns: minmax(0,42%) 1fr; align-items: center; gap: 1.75rem; } .svc-cell-2 .svc-figure { aspect-ratio: 4 / 3; } .svc-cell-2 .svc-body { padding: 0; } .svc-cell-2 .svc-title { font-size: 1.5rem; } @media (max-width: 900px) { .svc-row-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .svc-row-3, .svc-row-2 { grid-template-columns: 1fr; } .svc-cell-2 .svc-cell-link { grid-template-columns: 1fr; } .svc-cell-2 .svc-figure { aspect-ratio: 16 / 9; } .svc-cell-2 .svc-body { text-align: center; } } /* ---------- page-narrow (utility page content width) ---------- */ .page-narrow { max-width: 820px; margin: 0 auto; } /* ============================================================ FAQ ============================================================ */ .faq h2 { text-align: center; color: #fff; } .faq-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; max-width: 860px; margin-left: auto; margin-right: auto; } .faq-item { background: var(--color-bg-alt); border: 1px solid var(--color-border); } .faq-item > summary { list-style: none; cursor: pointer; padding: 1rem 1.25rem; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; color: var(--color-heading); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary::after { content: "+"; font-size: 1.5rem; color: var(--color-teal-ink); flex-shrink: 0; } .faq-item[open] > summary::after { content: "\2212"; } .faq-item[open] > summary { background: var(--color-accent); color: var(--color-on-accent); } .faq-item[open] > summary::after { color: var(--color-on-accent); } .faq-item > .faq-body { padding: 1rem 1.25rem; color: var(--color-text); } /* ============================================================ Contact band (Have questions + estimate) ============================================================ */ .contact-band { background: var(--color-charcoal); } .contact-band-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 880px) { .contact-band-grid { grid-template-columns: 1fr 1fr; } } .contact-band-info { text-align: center; } @media (min-width: 880px) { .contact-band-info { text-align: left; } } .contact-band-icon { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); margin-bottom: 1rem; } .contact-band-kicker { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; color: var(--color-accent-bright); margin: 0 0 0.25rem; letter-spacing: 0.02em; } .contact-band-phone { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; text-decoration: none; margin-bottom: 1rem; } .contact-band-phone:hover { color: var(--color-accent-bright); } /* "Get in touch" contact info list (light section) */ .get-in-touch h2 { color: var(--color-heading); } .contact-info { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; } .contact-info li { display: flex; align-items: flex-start; gap: 0.7rem; line-height: 1.4; } .contact-info svg { color: var(--color-teal-ink); flex-shrink: 0; margin-top: 0.12em; } .contact-info a { color: var(--color-text); text-decoration: none; } .contact-info a:hover { color: var(--color-teal-ink); } /* ============================================================ Footer ============================================================ */ .site-footer { background: var(--color-charcoal); color: #b9b9b9; padding: 3.5rem 0 1.5rem; border-top: 2px solid var(--color-accent-bright); } .footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 0.85fr 1.15fr 1.2fr; } } .footer-wordmark { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.05; color: var(--color-accent-bright); text-decoration: none; display: inline-block; } .footer-wordmark span { color: var(--color-accent-bright); } .footer-col h4 { color: #fff; margin: 0 0 1rem; padding-bottom: 0.5rem; position: relative; } .footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; background: var(--color-accent); } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 0.6rem; } .footer-contact-list li, .footer-links li { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.5; } .footer-contact-list a, .footer-links a, .footer-contact-list span { color: #c4c4c4; text-decoration: none; display: inline-flex; align-items: flex-start; gap: 0.6rem; } .footer-contact-list a:hover, .footer-links a:hover { color: #fff; } .footer-contact-list svg, .footer-links svg { color: var(--color-accent-bright); flex-shrink: 0; margin-top: 0.18em; } .footer-brand-contact { list-style: none; padding: 0; margin: 1.5rem 0 0; } .footer-list-plain { list-style: none; padding: 0; margin: 0; } .footer-areas { columns: 2; column-gap: 1.25rem; } .footer-areas li { color: #c4c4c4; font-size: 0.9rem; margin-bottom: 0.5rem; break-inside: avoid; } .legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; color: #8d8d8d; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; } .legal a { color: #b9b9b9; text-decoration: none; margin-right: 1rem; } .legal a:hover { color: #fff; } /* ============================================================ Contact / utility forms (contact.html etc.) ============================================================ */ .form-card { background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); padding: clamp(1.25rem, 3vw, 2rem); } .form-grid { display: grid; gap: 1rem; } .field { display: flex; flex-direction: column; gap: 0.4rem; } .field label { font-weight: 700; font-size: 0.95rem; } .field .req { color: var(--color-error); margin-left: 0.15rem; } .field input, .field select, .field textarea { font: inherit; padding: 0.75rem 0.9rem; border: 1px solid var(--color-border); border-radius: 0; background: #fff; color: var(--color-text); min-height: 48px; width: 100%; transition: border-color .12s ease, box-shadow .12s ease; } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 18%, transparent); outline: none; } .field .help { font-size: 0.85rem; color: var(--color-text-muted); } .field .error { font-size: 0.9rem; color: var(--color-error); display: none; } .field input[aria-invalid="true"] ~ .error, .field textarea[aria-invalid="true"] ~ .error { display: block; } .form-footnote { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.5rem; } .form-or { text-align: center; margin: 1.5rem 0; color: var(--color-text-muted); font-weight: 700; letter-spacing: 0.04em; } .nap address { font-style: normal; line-height: 1.7; } /* ---------- Utility page simple nav ---------- */ .site-nav.simple { gap: 1.5rem; } .site-nav.simple a { color: #fff; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; font-size: 1rem; } .site-nav.simple a:hover { color: var(--color-accent-bright); } @media (max-width: 940px) { .site-nav.simple { display: none; } } /* ============================================================ SHARED BLOCK VOCABULARY (immov2 skin) The global blocks the assembler fills, skinned in immov2's teal (#00B5D9) + dark-teal (#0E2229) + cream (#F5EAE6) tokens, Syne headings / Manjari body, flat square corners. Ported + re-tokenized from _easton-template. ============================================================ */ /* ---------- section-label (teal kicker above h2) ---------- */ .section-label { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-teal-ink); font-size: 1.05rem; margin: 0 0 0.4rem; } .section-dark .section-label { color: var(--color-accent-bright); } /* ---------- img-as-background helper (real + overlay) ---------- */ .bg-host { position: relative; isolation: isolate; } .bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .bg-host::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(color-mix(in srgb, var(--color-charcoal) 82%, transparent), color-mix(in srgb, var(--color-charcoal) 90%, transparent)); } .bg-host.bg-soft::before { background: linear-gradient(color-mix(in srgb, var(--color-charcoal) 55%, transparent), color-mix(in srgb, var(--color-charcoal) 72%, transparent)); } .bg-host > .container { position: relative; z-index: 2; } /* Fixed (parallax) backgrounds — disabled ≤900px (iOS renders them badly + double-download) */ .hero.bg-fixed .bg-img { display: none; } @media (max-width: 900px) { .bg-fixed { background-attachment: scroll !important; } .hero.bg-fixed .bg-img { display: block; } } /* ---------- btn-outline-light (for CTAs on dark/photo bg) ---------- */ .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); } .btn-outline-light:hover { background: #fff; color: var(--color-charcoal); } /* ---------- snow-list (teal check-bullet feature list) ---------- */ .snow-list { list-style: none; margin: 1.25rem 0 0; padding: 0; font-size: 0.97rem; } .snow-list li { position: relative; padding-left: 30px; margin-bottom: 0.7rem; line-height: 1.5; color: var(--color-text); } .snow-list li strong { color: var(--color-heading); } .snow-list li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 20px; height: 20px; background-repeat: no-repeat; background-size: contain; background-image: var(--bullet-light); } .snow-list--single { grid-template-columns: 1fr !important; } .section-dark .snow-list li, .spotlight .snow-list li { color: rgba(255,255,255,0.9); } .section-dark .snow-list li strong, .spotlight .snow-list li strong { color: #fff; } /* brighter check circle on dark backgrounds (parity with .feature-list) */ .section-dark .snow-list li::before, .spotlight .snow-list li::before { background-image: var(--bullet-dark); } /* ---------- subhead (h3 lead-in inside text blocks) ---------- */ .subhead { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-teal-ink); font-size: 1.2rem; margin: 1.5rem 0 0.5rem; } .section-dark .subhead, .feature-aside .subhead { color: var(--color-accent-bright); } /* ---------- Flex-media (workhorse: short text + image) ---------- */ .flex-media { background: var(--color-bg); } .flex-media h2, .flex-media--long h2, .flex-media--long-reverse h2 { color: var(--color-heading); } .flex-media-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 880px) { .flex-media-grid { grid-template-columns: 1.1fr 1fr; } } .flex-media-text > :first-child { margin-top: 0; } .flex-media-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-md); } .flex-media-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; align-items: center; } @media (min-width: 880px) { .flex-media--reverse .flex-media-figure { order: -1; } } .flex-media .snow-list { display: grid; grid-template-columns: 1fr; gap: 0.4rem 1.5rem; } @media (min-width: 560px) { .flex-media .snow-list { grid-template-columns: 1fr 1fr; } } /* immov2 identity: SHORT flex-media sits in a cream content box floating on white */ .flex-media:not(.flex-media--long):not(.flex-media--long-reverse) > .container { background: var(--color-bg-alt); padding: clamp(1.75rem, 4vw, 3.25rem); box-shadow: var(--shadow-sm); } /* immov2 identity: LONG blocks = dark-teal offset panel with overlapping image + teal bracket */ .flex-media--long, .flex-media--long-reverse { background: var(--color-bg); } .flex-media--long .flex-media-text, .flex-media--long-reverse .flex-media-text { background: var(--color-charcoal); color: #fff; padding: clamp(2rem, 4vw, 3.25rem); position: relative; z-index: 1; } .flex-media--long .flex-media-text h2, .flex-media--long-reverse .flex-media-text h2, .flex-media--long .flex-media-text h3, .flex-media--long-reverse .flex-media-text h3 { color: #fff; } .flex-media--long .flex-media-text h2, .flex-media--long-reverse .flex-media-text h2 { margin-top: 0; } .flex-media--long .flex-media-text h2::before, .flex-media--long-reverse .flex-media-text h2::before { content: ""; display: block; width: 56px; height: 22px; border-top: 3px solid var(--color-accent-bright); border-left: 3px solid var(--color-accent-bright); margin-bottom: 16px; } .flex-media--long .flex-media-text p, .flex-media--long-reverse .flex-media-text p { color: rgba(255,255,255,0.86); } .flex-media--long .flex-media-text strong, .flex-media--long-reverse .flex-media-text strong { color: var(--color-accent-bright); } .flex-media--long .flex-media-figure img, .flex-media--long-reverse .flex-media-figure img { box-shadow: var(--shadow-lg); } @media (min-width: 860px) { /* zero the grid gap so the negative margin genuinely overlaps the image onto the panel */ .flex-media--long .flex-media-grid, .flex-media--long-reverse .flex-media-grid { gap: 0; } .flex-media--long .flex-media-grid { grid-template-columns: 0.9fr 1.25fr; align-items: center; } .flex-media--long-reverse .flex-media-grid { grid-template-columns: 1.25fr 0.9fr; align-items: center; } .flex-media--long .flex-media-figure { margin-right: -3.5rem; position: relative; z-index: 2; } .flex-media--long .flex-media-text { padding-left: clamp(4.5rem, 6vw, 6.5rem); } .flex-media--long-reverse .flex-media-figure { order: 2; margin-left: -3.5rem; position: relative; z-index: 2; } .flex-media--long-reverse .flex-media-text { padding-right: clamp(4.5rem, 6vw, 6.5rem); } } /* stacked figure — two images stacked in the figure column (from findlay) */ .flex-media--stack .flex-media-figure { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); align-content: center; } /* sticky figure — pin the image to the top of its column so it tracks the reader. Opt in per block with --sticky; the skin centers by default, which is right for a short block but strands the image in a large void once the text column runs long. */ @media (min-width: 880px) { .flex-media--sticky.flex-media--long .flex-media-figure, .flex-media--sticky.flex-media--long-reverse .flex-media-figure { align-self: start; position: sticky; top: 7rem; } } /* full-width cream band variant (replaces the white section bg) */ .flex-media.flex-media--cream { background: var(--color-bg-alt); } /* teal frame around the figure images */ .flex-media--frame .flex-media-figure img { border: 2px solid var(--color-accent-bright); } /* services-head (centered kicker + h2 above the full-width grid) */ .services-head { text-align: center; max-width: 64ch; margin: 0 auto 2.25rem; } .services-head .section-label { color: var(--color-accent-bright); } .section-dark .services-head h2 { color: #fff; margin-bottom: 0.5rem; } /* ---------- Feature-aside (dark text column + nav aside boxes) ---------- */ .feature-aside-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 960px) { .feature-aside-grid { grid-template-columns: 1.5fr 1fr; } } .feature-aside-side { display: flex; flex-direction: column; gap: 1rem; justify-content: center; } .feature-aside-box { background: color-mix(in srgb, var(--color-accent-bright) 14%, transparent); border: 1px solid var(--color-accent-bright); padding: 1.75rem; text-align: center; } .feature-aside-box-title { color: #fff; margin: 0 0 1rem; font-family: var(--font-head); font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; text-transform: uppercase; line-height: 1.05; } .feature-aside-box .btn { width: 100%; background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); } .feature-aside-box .btn:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-on-accent); } /* ---------- Spotlight (service areas + city narrative over bg) ---------- */ .spotlight { color: #fff; } .spotlight .container { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } @media (min-width: 880px) { .spotlight .container { grid-template-columns: 1.3fr 1fr; } } .spotlight h2 { color: #fff; } .spotlight p { color: rgba(255,255,255,0.85); } .spotlight-side-title { font-family: var(--font-head); font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; text-transform: uppercase; line-height: 1.05; color: #fff; margin: 0 0 1rem; } .spotlight-areas { display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; margin-top: 0; } @media (min-width: 480px) { .spotlight-areas { grid-template-columns: 1fr 1fr; } } /* sub-labels above each area list ("Sioux Falls neighborhoods:", "Surrounding communities:") */ .spotlight-areas-label { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.9rem; color: #fff; margin: 1.5rem 0 0.5rem; } .spotlight-areas-label:first-of-type { margin-top: 1rem; } /* trailing CTA line under the FAQ accordion */ .faq-footnote { margin: 1.5rem 0 0; } .spotlight--light { color: var(--color-text); background: var(--color-bg); } .spotlight--light h2 { color: var(--color-heading); } .spotlight--light .spotlight-side-title { color: var(--color-teal-ink); } .spotlight--light p, .spotlight--light .snow-list li { color: var(--color-text); } .spotlight--light .snow-list li strong { color: var(--color-heading); } /* ---------- Steps (staggered timeline: one per row, circles inside) ---------- */ .steps h2 { color: #fff; } .process-intro { max-width: 70ch; margin: 0 auto 2.5rem; text-align: center; color: rgba(255,255,255,0.85); } .process-grid { display: flex; flex-direction: column; gap: clamp(1.75rem, 3.5vw, 3rem); max-width: 920px; margin: 0 auto; padding: 0; list-style: none; } .process-step { display: grid; align-items: center; gap: clamp(1.25rem, 3vw, 2.25rem); width: min(600px, 100%); } .process-step > img, .process-step > .process-step-icon { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .process-step > .process-step-icon { background: var(--color-accent); color: var(--color-on-accent); } .process-step-body > :first-child { margin-top: 0; } .process-step .step-num { display: block; font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--color-accent-bright); line-height: 1; margin-bottom: 0.25rem; } .process-step h3 { color: #fff; margin-bottom: 0.4rem; } .process-step p { color: rgba(255,255,255,0.80); font-size: 0.95rem; margin: 0; } .process-step:nth-child(odd) { grid-template-columns: 1fr auto; margin-right: auto; text-align: right; } .process-step:nth-child(odd) > .process-step-body { grid-column: 1; grid-row: 1; } .process-step:nth-child(odd) > img, .process-step:nth-child(odd) > .process-step-icon { grid-column: 2; grid-row: 1; } .process-step:nth-child(even) { grid-template-columns: auto 1fr; margin-left: auto; text-align: left; } @media (max-width: 640px) { .process-step:nth-child(odd), .process-step:nth-child(even) { grid-template-columns: 1fr; width: 100%; margin: 0; text-align: center; justify-items: center; } .process-step:nth-child(odd) > img, .process-step:nth-child(odd) > .process-step-icon, .process-step:nth-child(even) > img, .process-step:nth-child(even) > .process-step-icon { grid-column: 1; grid-row: 1; margin: 0 auto; } .process-step:nth-child(odd) > .process-step-body, .process-step:nth-child(even) > .process-step-body { grid-column: 1; grid-row: 2; } } .mini-cta { margin-top: 3rem; text-align: center; padding: 1.75rem; background: rgba(255,255,255,0.04); } .mini-cta p { color: var(--color-accent-bright); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; margin: 0 0 0.35rem; font-size: 1.15rem; } .mini-cta p + p { color: rgba(255,255,255,0.80); font-weight: 400; text-transform: none; margin-bottom: 1rem; font-family: var(--font-body); } .mini-cta .btn { margin-top: 0.5rem; } /* ---------- Banner (centered emphasis over image) ---------- */ .banner { color: #fff; display: flex; align-items: center; min-height: 420px; padding: clamp(3.5rem, 7vw, 6rem) 0; text-align: center; } .banner-inner { max-width: 760px; margin: 0 auto; } .banner h2 { color: #fff; } .banner p { color: rgba(255,255,255,0.9); } .banner-kicker { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 1.05rem; color: var(--color-accent-bright); margin: 0 0 0.5rem; } .banner-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: center; margin-top: 1.75rem; } /* ---------- Testimonials carousel (JS in /testimonials.js) ---------- */ .testimonials { background: var(--color-bg-alt); } .testi-carousel { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1rem); margin-top: 2rem; } .testi-viewport { overflow: hidden; flex: 1 1 auto; min-width: 0; } .testi-track { display: flex; margin: 0; padding: 0; list-style: none; will-change: transform; } .testi-slide { flex: 0 0 100%; width: 100%; padding: 0.5rem clamp(0.25rem, 2vw, 1.5rem); } .testi-quote { margin: 0 auto; max-width: 760px; background: #fff; border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); padding: clamp(1.5rem, 4vw, 2.75rem); text-align: center; box-shadow: var(--shadow-md); } .testi-quote > p { font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.6; font-style: italic; color: var(--color-text); margin: 0 0 1.5rem; } .testi-stars { color: #F5B301; font-size: 1.15rem; letter-spacing: 4px; line-height: 1; margin: 0 0 0.9rem; } .testi-quote > p::before { content: "\201C"; } .testi-quote > p::after { content: "\201D"; } .testi-cite { display: flex; flex-direction: column; gap: 0.1rem; } .testi-name { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-heading); font-size: 1.2rem; } .testi-meta { font-size: 0.9rem; color: var(--color-text-muted); } .testi-arrow { flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-charcoal); color: #fff; border: 0; border-radius: 50%; cursor: pointer; transition: background-color .15s ease, transform .08s ease; } .testi-arrow:hover { background: var(--color-accent); color: var(--color-on-accent); } .testi-arrow:active { transform: scale(0.94); } .testi-arrow svg { width: 24px; height: 24px; } .testi-prev svg { transform: scaleX(-1); } /* mirror the (always-present) chevron-right into a left arrow */ .testi-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; } .testi-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border); transition: background-color .15s ease; } .testi-dot.is-active { background: var(--color-accent); } @media (prefers-reduced-motion: reduce) { .testi-track { transition: none !important; } } /* ---------- CTA (closing call to action) ---------- */ .cta-split { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 880px) { .cta-split { grid-template-columns: 1fr 1fr; } } .cta-split .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .cta > .container > .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); } /* ---------- Feature-band (EXTRA: icon + heading + text triplets) ---------- */ .feature-band { background: var(--color-charcoal); color: #fff; padding: clamp(2.25rem, 4vw, 3rem) 0; } .feature-band.band-navy { background: var(--color-charcoal); } /* explicit variant (default) — parity with .band-teal */ .feature-band.band-teal { background: var(--color-teal-ink); } .feature-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; } @media (min-width: 760px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } } .feature-item { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: start; } .feature-item .feature-ico { grid-row: span 2; color: var(--color-accent-bright); } .feature-item h3 { color: #fff; margin: 0 0 0.35rem; font-size: 1.4rem; } .feature-item p { color: rgba(255,255,255,0.82); margin: 0; font-size: 0.95rem; line-height: 1.55; } /* ---------- lf-banner (EXTRA: colored service-intro band) ---------- */ .lf-banner { color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0; } .lf-banner.b-navy { background: var(--color-charcoal); } .lf-banner.b-teal { background: var(--color-teal-ink); } /* light cream band — dark text (palette-consistent alternative to the colored bands) */ .lf-banner.b-cream { background: var(--color-bg-alt); color: var(--color-text); } .lf-banner.b-cream h2 { color: var(--color-heading); } .lf-banner.b-cream p { color: var(--color-text); } .lf-banner.b-cream .section-label { color: var(--color-teal-ink); } .lf-banner-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; } @media (min-width: 900px) { .lf-banner-grid { grid-template-columns: 1.05fr 0.95fr; } } .lf-banner-grid.media-right .lf-media { order: -1; } @media (min-width: 900px) { .lf-banner-grid.media-right .lf-media { order: 2; } } .lf-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-lg); } .lf-banner h2 { color: #fff; } .lf-banner p { color: rgba(255,255,255,0.85); } .lf-banner .section-label { color: color-mix(in srgb, var(--color-accent-bright) 30%, white); } .lf-prose { max-width: 82ch; } .inline-cta { margin-top: 1.5rem; display: inline-flex; } /* ---------- Print ---------- */ @media print { .site-header, .site-footer, .nav-cta, .contact-band { display: none; } body { font-size: 12pt; color: #000; background: #fff; } } /* ============================================================ SITE-LOCAL OVERRIDES — sioux-falls-hardwood-flooring The block is the variable, never the copy. Rules here adapt immov2's blocks to this page's real content dimensions. ============================================================ */ /* This page's h1 is 24 words (the palette's was 7). At the global h1 clamp (up to 3rem) it ate ~330px of the hero on its own. Scale the headline to the copy it actually carries. */ .hero-headline { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; margin-bottom: 15px; } /* Two sidebar headings on the Areas section ("Sioux Falls Neighborhoods" + "Surrounding Communities"). The palette default is oversized (up to 2.2rem) because it expected a single big label; here they read cleaner at normal h3 size so the community lists read as list captions rather than section titles competing with the H2. */ .spotlight .spotlight-side-title { font-size: clamp(1.15rem, 2vw, 1.4rem); } /* The FAQ and Areas bands paint their dark background with .bg-host (an + ::before overlay) rather than .section-dark, so .section-label keeps its light-background slate-blue and nearly disappears. Use the same coral kicker the other dark bands carry. */ .faq .section-label, .spotlight .section-label { color: var(--color-accent-bright); } /* .section-cta ships centered but with no gap — it was written for a single button. The commercial band runs a Call + Free Quote pair. */ .section-cta { flex-wrap: wrap; gap: 0.85rem; } /* Fixed (parallax) background on the Areas band. The skin paints .bg-host photos with an , which CANNOT be attachment-fixed — so put a CSS background on the section and hide the so the fixed layer shows through. The ::before scrim still sits above it (z-index 1), and .container above that (z-index 2). Dropped below 901px, where iOS renders fixed attachment badly and the takes over again. */ @media (min-width: 901px) { .spotlight.bg-fixed { background-image: url("/images/sioux-falls-falls-park-downtown-2000.webp"); background-position: center; background-size: cover; background-attachment: fixed; } .spotlight.bg-fixed > .bg-img { display: none; } } /* Light services variant — the palette ships .services hardcoded dark (cells on --color-charcoal). This page runs the block right after the dark feature-aside, so a dark grid here would merge with the section above it. Flip cells to white on a cream band with dark text. */ .services--light { background: #E6DBD2; } .services--light .services-head h2 { color: var(--color-heading); } .services--light .services-head p { color: var(--color-text); } /* Widen the services-head above the grids and left-justify the body copy while the kicker + h2 stay centered. Applies to BOTH the light (installation) and dark (refinishing) services blocks. */ .services .services-head { max-width: 90ch; } .services .services-head p:not(.section-label) { text-align: left; } .services--light .svc-row { background: #E6DBD2; } .services--light .svc-row + .svc-row { border-top-color: #E6DBD2; } .services--light .svc-cell { background: var(--color-bg); } .services--light .svc-figure { background: var(--color-bg-alt); } .services--light .svc-title { color: var(--color-heading); } .services--light .svc-text { color: var(--color-text); } .services--light .svc-cell:hover .svc-title { color: var(--color-teal-ink); } /* svc-cell-2 image-left / content-right layout — the palette's rule targets .svc-cell-link (a wrapping ), which we don't want on these non-link cards. Apply the grid to the cell itself instead. */ @media (min-width: 720px) { .services .svc-cell-2 { display: grid; grid-template-columns: minmax(0, 42%) 1fr; align-items: center; gap: 1.75rem; } } /* svc-row-1 — full-width single card. Used when an odd item lands at the tail of an all-image-left layout so the last card still sits in the same rhythm as the pairs above it. */ .svc-row-1 { grid-template-columns: 1fr; } /* Split services variant — full-width dark brown header band ABOVE the grid, warm-paper grid BELOW with brown dividers between cells. Used on "Types of Hardwood Flooring" for a distinct visual treatment apart from the light (installation) and dark (refinishing) grids. */ .services--split { background: #FCF9F6; padding: 0; } .services--split .services-head { max-width: none; background: #3D221C; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem); margin: 0; } .services--split .services-head > * { max-width: 90ch; margin-left: auto; margin-right: auto; } .services--split .services-head .section-label { color: #e4a499; } .services--split .services-head h2 { color: #fff; } .services--split .services-head p { color: rgba(255,255,255,0.85); } .services--split .services-grid { margin-top: 0; } .services--split .svc-row { background: #3D221C; } .services--split .svc-row + .svc-row { border-top-color: #3D221C; } .services--split .svc-cell { background: #FCF9F6; } .services--split .svc-figure { background: #E6DBD2; } .services--split .svc-title { color: var(--color-heading); } .services--split .svc-text { color: var(--color-text); } .services--split .svc-cell:hover .svc-title { color: var(--color-teal-ink); } /* Dark all-brown services variant — the palette default (.services on .section-dark) puts CORAL dividers between charcoal cells. This variant keeps everything in the brown family: #3D221C section, same #3D221C between cells (invisible dividers), cells lifted to the palette's `--color-charcoal-2` (#4D2C24) so cards still separate visually against the section behind them. Used on the Grain/Grade block so it reads distinct from the refinishing block above it. */ .services--dark { background: #3D221C; } .services--dark .services-head h2 { color: #fff; } .services--dark .services-head p { color: rgba(255,255,255,0.85); } .services--dark .services-head .section-label { color: #e4a499; } .services--dark .svc-row { background: #3D221C; } .services--dark .svc-row + .svc-row { border-top-color: #3D221C; } .services--dark .svc-cell { background: var(--color-charcoal-2); } .services--dark .svc-figure { background: #3D221C; } /* ---------- pricing-band: side-by-side price cards on warm paper ---------- Two pricing cards, each with a brown filled title strip and a list of line items. A price-note callout sits below both cards on greige with a brown left rule. Stacks on narrow screens (cards, then note). */ .pricing-band { background: #FCF9F6; } .pricing-band .pricing-head { max-width: 90ch; margin: 0 auto 2.5rem; text-align: center; } .pricing-band .pricing-head h2 { color: var(--color-heading); margin-bottom: 0.5rem; } .pricing-band .pricing-head p:not(.section-label) { text-align: left; color: var(--color-text); } .pricing-band .pricing-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .pricing-band .pricing-grid { grid-template-columns: 1fr 1fr; } } .pricing-card { background: var(--color-bg); border: 1px solid #3D221C; } .pricing-card h3 { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; background: #3D221C; margin: 0; padding: 1rem clamp(1.25rem, 2.5vw, 1.75rem); font-size: 1.05rem; line-height: 1.25; } .pricing-card ul { list-style: none; margin: 0; padding: clamp(1.25rem, 2.5vw, 1.75rem); display: grid; gap: 0.85rem; } .pricing-card li { padding-bottom: 0.85rem; border-bottom: 1px solid #E6DBD2; color: var(--color-text); font-size: 0.95rem; line-height: 1.55; } .pricing-card li:last-child { border-bottom: 0; padding-bottom: 0; } .pricing-card li strong { font-family: var(--font-head); font-weight: 700; color: var(--color-heading); letter-spacing: 0.01em; } .pricing-band .price-note { max-width: 90ch; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: #E6DBD2; border-left: 4px solid #3D221C; color: var(--color-text); } .pricing-band .price-note p:last-child { margin-bottom: 0; } /* ---------- spec-band: two-column spec section ---------- Narrative column (H2 + subheads + prose) on the LEFT, a spec-table on the RIGHT. Stacks single-column on narrow screens, where the trailing narrative subhead flows below the table in natural reading order (source order is: H2, intro, table, follow-up). */ .spec-band { background: #FCF9F6; } .spec-band .spec-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; } @media (min-width: 900px) { .spec-band .spec-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 4rem); } .spec-band .spec-table-wrap { position: sticky; top: 7rem; } } .spec-band .spec-narrative > * + * { margin-top: 1rem; } .spec-band h2 { color: var(--color-heading); margin-bottom: 0.75rem; } .spec-band .subhead { margin-top: 1.25rem; } .spec-band p { color: var(--color-text); } /* ---------- spec-table: comparison table, brown-bordered spec card ---------- Real semantics for row/column comparison and rich-snippet candidacy. Header row filled #3D221C with white all-caps heads, #3D221C cell borders, subtle warm zebra on tbody rows. Wrap in .spec-table-wrap so the table can scroll horizontally on narrow screens without squeezing three columns to unreadability. */ .spec-table-wrap { overflow-x: auto; background: var(--color-bg); border: 1px solid #3D221C; } .spec-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 0.95rem; } .spec-table caption { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-heading); text-align: left; padding: 1rem 1.1rem 0.4rem; font-size: 0.85rem; caption-side: top; } .spec-table thead th { background: #3D221C; color: #fff; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid #3D221C; white-space: nowrap; } .spec-table tbody td { padding: 0.85rem 1rem; vertical-align: top; color: var(--color-text); border-top: 1px solid #3D221C; } .spec-table tbody tr:first-child td { border-top: 0; } .spec-table tbody tr:nth-child(even) td { background: #FBF6F0; } .spec-table tbody td:first-child { font-weight: 700; color: var(--color-heading); } /* ============================================================ Floor strip — full-bleed 4-up band of finished-floor photos. Sits between the dark "why choose" band and the cream services grid, so it reads as a divider rather than as its own section. Borrows the .svc-row treatment: the 2px accent gaps do the dividing, so no borders and no container gutters. It has to live OUTSIDE .container to go edge-to-edge, same as .services-grid. ============================================================ */ .floor-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--color-accent-bright); } .floor-strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; } @media (max-width: 900px) { .floor-strip { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ Logo lockup — opt-in variant of .brand (add .brand--logo). The artwork ships with its own deep-brown field and its own internal padding baked in, so this drops the white box, the padding and the drop shadow that the TEXT brand needed, and frames the image in the light coral used by .flex-media--frame. The plain .brand (text) rules are left intact for the utility pages that still use them. ============================================================ */ .brand--logo { background: none; padding: 0; box-shadow: none; border: 2px solid var(--color-accent-bright); } .brand-logo { display: block; height: clamp(48px, 5vw, 72px); width: auto; } /* ============================================================ Steps — 2-column, media-free variant (.steps--cols). The base block is a staggered timeline built around a 160px circular photo (or icon) per step. With the media dropped there is nothing left to stagger against, so this resets the nth-child zigzag — including its text-align:right on odd steps — and lays the steps out as a plain 2-up grid. The big accent .step-num carries the eye instead of the circle. The base .steps rules are untouched for pages still using them. ============================================================ */ .steps--cols .process-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 4rem); max-width: 1000px; } .steps--cols .process-step, .steps--cols .process-step:nth-child(odd), .steps--cols .process-step:nth-child(even) { display: block; width: 100%; margin: 0; text-align: left; } @media (max-width: 720px) { .steps--cols .process-grid { grid-template-columns: 1fr; } } /* Areas band body copy + area lists sit over a PHOTOGRAPH rather than a flat colour, so they take the same treatment .hero-intro takes over the hero image: weight 700 at 0.92 white. Scoped to .spotlight.bg-host so the flat-background .spotlight--light variant is untouched. */ .spotlight.bg-host p, .spotlight.bg-host .snow-list li { color: rgba(255,255,255,0.92); font-weight: 700; } /* Areas band scrim — .bg-soft (55%→72%) let too much of the night photo through for comfortable reading; the default .bg-host scrim (82%→90%) buries the landmark entirely. Split the difference, scoped to this band so .bg-soft keeps its shared value everywhere else. */ .spotlight.bg-host.bg-soft::before { background: linear-gradient(color-mix(in srgb, var(--color-charcoal) 74%, transparent), color-mix(in srgb, var(--color-charcoal) 86%, transparent)); } /* Footer logo lockup — replaces the text .footer-wordmark. Same reasoning as .brand--logo in the header: the artwork carries its own deep-brown field, and --color-charcoal behind the footer is that same brown, so it needs nothing but the light-coral frame. The .footer-wordmark text rules stay for the utility pages still using them. */ .footer-brand-logo { display: inline-block; border: 2px solid var(--color-accent-bright); text-decoration: none; max-width: 100%; } .footer-brand-logo img { display: block; height: clamp(54px, 7vw, 84px); width: auto; max-width: 100%; } /* Contact-page detail list. Deliberately NOT .footer-contact-list — that one is coloured #c4c4c4 for the dark footer, which is invisible on the light .flex-media background this list actually sits on. */ .contact-details { list-style: none; padding: 0; margin: 1.25rem 0 0; } .contact-details li { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.6; margin-bottom: 0.7rem; } .contact-details a, .contact-details span { color: var(--color-text); text-decoration: none; display: inline-flex; align-items: flex-start; gap: 0.6rem; } .contact-details a:hover { color: var(--color-teal-ink); text-decoration: underline; } .contact-details svg { color: var(--color-accent); flex-shrink: 0; margin-top: 0.22em; }