/* Theme Name: Itchen Glass & Glazing (v2) Theme URI: Description: Standalone theme for the Itchen Glass & Glazing plain-theme rebuild (no Elementor) -- scaffolded from Underscores. Holds the project's design-system CSS custom properties and component styling, ported unchanged from the Elementor-based dev site's itchenglass-child theme. Author: Hospitality Innovations Version: 0.1.0 Requires at least: 6.0 Requires PHP: 8.1 Text Domain: itchenglassns */ /* ---------- Underscores baseline resets (normally generated by _s) ---------- */ *, *::before, *::after { box-sizing: border-box; } html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } img { max-width: 100%; height: auto; border: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { background-color: transparent; } button, input, select, textarea { font-family: inherit; font-size: 100%; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #f1f1f1; clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } :root { /* Colour — anchored to the palette already live on the 4 SEO pages (double-glazing-southampton etc.), not reinvented for the rebuild. */ --color-navy: #1c3461; --color-navy-deep: #142645; --color-amber: #e8a020; --color-amber-deep: #c8881a; /* amber-deep is 3:1 on white -- fails WCAG AA (4.5:1) for normal-size text. Use this darker variant for amber TEXT on light backgrounds (eyebrow labels, card links); keep amber/amber-deep for buttons, borders and icons where the contrast is computed differently. */ --color-amber-text: #8c6210; --color-light: #f5f7fa; --color-white: #ffffff; --color-ink: #2d2d2d; /* Glass Teal -- the green-blue tint visible at the edge of float glass. Added so the identity isn't carried by navy+amber alone (see the frontend-design self-critique in handoff_v1.md). */ --color-glass: #2d5265; /* Type — Fraunces (display) + Public Sans (body/label/data), loaded via functions.php. "Trustworthy & established" personality. */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* Spacing — spacious/premium rhythm (matches the 1140px content width and 60-100px section padding already used on the SEO pages). */ --content-width: 1140px; --section-padding-y: 6rem; --section-padding-y-mobile: 2.5rem; /* design-v2 tokens (2026-08-27) -- see the "DESIGN V2" section below for what uses these. Declared in THIS :root block, not a second one: confirmed via live CSSOM inspection (sheet.cssRules) that a second top-level `:root { ... }` rule later in the same file gets silently dropped during parsing -- every var() referencing it then resolves to the empty string with no console warning, which is a much harder failure to spot than a normal cascade loss (getComputedStyle showed border-width:0/border-style:none on an element with a perfectly valid, matching, !important rule -- the defining :root rule itself was just gone from sheet.cssRules, not merely losing a specificity fight). One :root block per stylesheet file, always. */ --ink: #10181f; --ink-soft: #33424c; --slate: #5b6b74; --paper: #faf8f4; --panel: #f1ede4; --glass-100: #eef4f4; --glass-300: #cfe1e2; --bronze: #b5793a; --bronze-dark: #8f5f2a; --line: #dcd6c9; --v2-radius: 11px; --v2-radius-btn: 11px; --v2-max: 1240px; --shadow-sm: 0 1px 2px rgba(16, 24, 31, 0.05), 0 1px 1px rgba(16, 24, 31, 0.04); --shadow-md: 0 10px 24px -10px rgba(16, 24, 31, 0.20), 0 2px 8px -2px rgba(16, 24, 31, 0.08); --shadow-lg: 0 30px 60px -24px rgba(16, 24, 31, 0.32), 0 10px 20px -10px rgba(16, 24, 31, 0.14); --shadow-hover: 0 22px 40px -16px rgba(16, 24, 31, 0.26), 0 6px 14px -6px rgba(16, 24, 31, 0.12); } body { font-family: var(--font-body); color: var(--color-ink); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--color-navy); } /* Hello Elementor's base stylesheet (registered under the confusingly-named "hello-elementor" handle -- see wordpress-elementor-gotchas.md load-order section) resets outline to none on every element with no replacement, leaving no visible keyboard focus state anywhere on the site. Restore one, scoped to :focus-visible so it only shows for keyboard/assistive-tech navigation, not mouse clicks. !important guarantees this wins regardless of stylesheet load order, same defensive pattern already used elsewhere in this file. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-amber) !important; outline-offset: 2px !important; } /* ---------- Header ---------- */ .itchen-site-header { position: sticky; top: 0; z-index: 999; background: var(--color-white) !important; border-bottom: 1px solid #e5e5e5; } /* Elementor sets flex via a CSS custom property on a two-class selector (.e-con.e-flex) that beats a single-class override regardless of load order — see wordpress-elementor-gotchas.md gotcha #2. Matching the compound here, plus !important, is the documented fix. */ .itchen-site-header .itchen-header-row.e-con.e-flex { align-items: center !important; justify-content: space-between !important; } .itchen-header-logo-col { /* Same flex-basis:auto collapse as the nav column (see the nav-col rule below), but this column must NOT grow -- it should hug its content. Pinning width to max-content sidesteps the broken auto-basis resolution entirely instead of fighting it with flex-grow. */ flex: 0 0 auto !important; width: max-content !important; } /* Icon-above-wordmark lockup (2026-08-19, real client artwork). Two stacked lines need to be more compact than the old single-line 1.5rem text to avoid dominating the sticky header's height. */ /* Matches Elementor's own .e-con.e-flex compound-selector specificity (see wordpress-elementor-gotchas.md gotcha #2 -- a single-class !important isn't reliably enough against that default). */ .itchen-logo-stack.e-con.e-flex { flex-direction: column !important; align-items: flex-start !important; gap: 0.2rem !important; padding-block: 0.5rem !important; width: 168px !important; } .itchen-logo-stack .elementor-widget-image img { width: 100%; height: auto; display: block; } .itchen-header-logo-col .itchen-logo-text, .itchen-header-logo-col h4 { font-size: 0.8rem; font-weight: 600; margin: 0; white-space: nowrap; width: 100%; } .itchen-header-nav-col { /* flex-basis: auto (the default) sizes this item from its own content's intrinsic width before growth is applied -- but its content (the ekit-nav-menu widget) is itself a nested flex row with wrapping children, and that combination resolves to a near-zero intrinsic width in Chromium rather than "grow to fill". Using 0% forces sizing purely from flex-grow distribution, ignoring content-based intrinsic sizing entirely -- the reliable fix for a flex item that "should" grow but doesn't when its content is itself flex/wrap. */ flex: 1 1 0% !important; min-width: 0; } .itchen-header-nav-col .elementor-widget-ekit-nav-menu, .itchen-header-nav-col .elementor-widget-container, .itchen-header-nav-col .ekit-wid-con, .itchen-header-nav-col .elementskit-menu-container { width: 100% !important; } .elementskit-navbar-nav { flex-wrap: nowrap !important; } .itchen-header-cta-col { display: flex; align-items: center; gap: 1.25rem; flex: 0 0 auto !important; width: max-content !important; } a.itchen-header-phone { color: var(--color-navy) !important; font-weight: 600; text-decoration: none; white-space: nowrap; /* Text-only link was a ~19px-tall tap target on mobile -- pad it toward the ~44px touch-target guideline without changing its visual size. */ display: inline-flex; align-items: center; padding-block: 0.8rem; } /* ekit-nav-menu top-level links */ .elementskit-navbar-nav > li > a { color: var(--color-navy) !important; font-family: var(--font-body); font-weight: 500; } /* ---------- Buttons ---------- */ .itchen-btn-amber .elementor-button, .itchen-btn-amber a.elementor-button { background: var(--color-amber) !important; color: var(--color-navy) !important; font-weight: 600; /* elementor-size-sm's own padding renders at 39px tall -- below the ~44px minimum touch-target guideline. Neither button widget call sets an explicit size, so this fixes it sitewide. */ padding-block: 0.95rem !important; border-radius: 4px; white-space: nowrap; } .itchen-btn-amber .elementor-button:hover { background: var(--color-amber-deep) !important; } /* ---------- Footer ---------- */ .itchen-site-footer { background: var(--color-navy) !important; color: var(--color-white); padding-inline-start: 5vw !important; padding-inline-end: 5vw !important; } .itchen-site-footer h4, .itchen-site-footer .elementor-heading-title { /* !important needed: Elementor's own heading-widget default color rule (.elementor-widget-heading .elementor-heading-title, two classes) otherwise outranks this one-class-plus-element selector and renders navy-on-navy (invisible) using the Kit's primary colour. */ color: var(--color-white) !important; font-size: 1.1rem; margin-bottom: 1rem; } .itchen-site-footer p, .itchen-site-footer a { color: #d7deea; } .itchen-site-footer a:hover { color: var(--color-amber); } .itchen-footer-links { list-style: none; margin: 0; padding: 0; } .itchen-footer-links li { margin-bottom: 0.5rem; } .itchen-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 2rem; padding-top: 1.5rem; text-align: center; font-size: 0.85rem; } .itchen-footer-bottom p { color: #a9b4c6; } /* ---------- Layout ---------- */ .e-con.itchen-site-header, .e-con.itchen-site-footer { max-width: 100% !important; } /* ========================================================================== Homepage sections All row containers below use an explicit pixel flex-basis (never bare "auto") on their children, plus flex-wrap: wrap -- see gotcha #14 in wordpress-elementor-gotchas.md: flex-basis:auto on a programmatically built nested container can collapse to near-zero instead of sizing to content, and Elementor containers don't wrap by default without an explicit flex-wrap. ========================================================================== */ .itchen-section { max-width: var(--content-width); margin-inline: auto !important; padding-block: var(--section-padding-y) !important; padding-inline: 5vw !important; } .itchen-section-title { text-align: center; font-size: 2rem; margin-bottom: 2.5rem !important; } .itchen-final-cta-title { text-align: center; font-size: 2rem; margin-bottom: 0.5rem !important; } /* `color` set here does nothing on its own -- Elementor's own heading-widget default color rule targets .elementor-heading-title (the actual inner element) directly, which beats a rule that only reaches the outer .itchen-*-title wrapper div, same root cause as the footer h4 fix above. Every itchen_heading() color override needs this descendant form. */ .itchen-final-cta-title .elementor-heading-title { color: var(--color-white) !important; } /* ---------- Hero ---------- */ .itchen-hero { min-height: 560px; display: flex !important; align-items: center; padding-inline: 5vw !important; } .itchen-hero-inner { max-width: 720px; width: 100%; } .itchen-hero-title { font-size: 3rem; line-height: 1.15; margin-bottom: 1.25rem !important; } /* See the .itchen-final-cta-title comment above -- color must reach the actual .elementor-heading-title element, not just the outer wrapper. */ .itchen-hero-title .elementor-heading-title { color: var(--color-white) !important; /* Belt-and-suspenders on top of the overlay -- real installation photos vary a lot in brightness, and a fixed overlay opacity can't guarantee contrast against every one of them. */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 4px 18px rgba(0, 0, 0, 0.55); } .itchen-hero-sub p, .itchen-hero-sub { color: var(--color-white); font-size: 1.15rem; max-width: 560px; margin-bottom: 2rem !important; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); } .itchen-hero-ctas { flex-wrap: wrap !important; gap: 1rem; margin-bottom: 0.75rem !important; } .itchen-hero-ctas > .e-con { flex: 0 0 auto !important; width: max-content !important; } .itchen-btn-outline .elementor-button, .itchen-btn-outline a.elementor-button { background: transparent !important; color: var(--color-white) !important; padding-block: 0.95rem !important; border: 2px solid var(--color-white); font-weight: 600; border-radius: 4px; } .itchen-btn-outline .elementor-button:hover { background: rgba(255, 255, 255, 0.15) !important; } .itchen-hero-proof { color: var(--color-white); opacity: 0.9; font-size: 0.95rem; } /* ---------- Page hero (style sub-pages) ---------- Rebuilt 2026-08-19 from a flat text-on-dimmed-photo single container to a layered card composition (reference: orion-windows.co.uk's product pages) -- contrast now comes from the opaque card, not a dark overlay wash, so the real photo behind it stays fully bright. See design-review-discuss-first memory for why this took several passes. */ .itchen-page-hero { position: relative; min-height: 560px; display: flex !important; /* This is a COLUMN-direction flex container (Elementor sets that per element, not here) -- align-items therefore controls the HORIZONTAL cross-axis, not vertical as the original comment assumed. align-items:center was centering the card in the middle of the hero, hiding most of the photo either side. flex-start + justify-content (the real vertical control in column mode) is what "left-aligned, vertically centered" actually needs. Confirmed 2026-08-20 via computed styles: card was landing at x=482px in a 1425px-wide hero, not near the 72px left padding as intended. */ align-items: flex-start; justify-content: center; padding-inline: 5vw !important; padding-block: 4rem !important; } .itchen-page-hero-inner { max-width: 460px; width: 100%; } /* The card itself -- the signature move. An elliptical top border-radius (wide flat ellipse, not a corner radius) cuts the fanlight-arch curve already used as the section-divider motif into the card's top edge, so this reads as part of the Itchen system rather than a borrowed device. */ .itchen-hero-card { background: rgba(245, 247, 250, 0.97); /* Tightened 2026-08-20 (was 3.25rem 2.25rem 2.25rem) -- card was overflowing the viewport (698px tall at 1440x900) before the NAV rework that would let it fit properly; this and the margin cuts below recover ~120-150px without the NAV change. */ padding: 2.25rem 1.75rem 1.75rem; border-radius: 50% 50% 8px 8px / 42px 42px 8px 8px; box-shadow: 0 20px 50px rgba(20, 38, 69, 0.35); } .itchen-page-hero .itchen-hero-card .itchen-breadcrumb-back { color: var(--color-navy); opacity: 0.65; } .itchen-page-hero .itchen-hero-card .itchen-breadcrumb-back:hover { opacity: 1; color: var(--color-amber-deep); } .itchen-page-hero .itchen-hero-card .itchen-eyebrow { color: var(--color-amber-text); opacity: 1; text-align: left; position: relative; padding-bottom: 0.9rem; } .itchen-page-hero .itchen-hero-card .itchen-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; background: var(--color-amber); } .itchen-page-hero-title { font-size: 2.2rem; line-height: 1.15; margin-bottom: 0.5rem !important; } .itchen-page-hero-title .elementor-heading-title { color: var(--color-navy) !important; text-shadow: none; } .itchen-page-hero-sub p, .itchen-page-hero-sub { color: var(--color-ink); font-size: 1rem; margin-bottom: 0.85rem !important; text-shadow: none; } .itchen-hero-bullets { list-style: none; margin: 0 0 1rem !important; padding: 0; } .itchen-hero-bullets li { position: relative; padding-left: 1.6rem; line-height: 1.4; color: var(--color-ink); font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; } .itchen-hero-bullets li::before { content: '\2713'; position: absolute; left: 0; color: var(--color-amber-text); font-weight: 700; } /* Second plane -- a floating credibility badge, the honest equivalent of Orion's sale badge (we don't have a sale to advertise; Itchen's real equivalent is 30+ years of local trust). Gives the composition the same layered depth without inventing a promotion. */ .itchen-hero-badge { position: absolute; top: 2.5rem; right: 5vw; max-width: 190px; background: var(--color-navy); padding: 1rem 1.25rem; border-radius: 6px; box-shadow: 0 12px 30px rgba(20, 38, 69, 0.4); font-size: 0.82rem; font-weight: 600; line-height: 1.4; text-align: center; } /* Elementor's text-editor widget carries its own default text color with enough specificity to beat a plain `.itchen-hero-badge { color: ... }` rule on the outer wrapper -- same root cause as the heading-color fix elsewhere in this file (see the comment above .itchen-final-cta-title). Reach the actual text node directly, not just the wrapper. */ .itchen-hero-badge, .itchen-hero-badge .elementor-widget-text-editor, .itchen-hero-badge .elementor-widget-container { color: var(--color-white) !important; } @media (max-width: 900px) { .itchen-hero-badge { display: none; } } @media (max-width: 600px) { .itchen-hero-card { border-radius: 40% 40% 6px 6px / 28px 28px 6px 6px; padding: 2.5rem 1.5rem 1.75rem; } } /* ---------- Trust strip ---------- */ .itchen-trust-strip { background: var(--color-light); max-width: 100%; padding-block: 3rem !important; } .itchen-trust-row { flex-wrap: wrap !important; gap: 2rem; max-width: var(--content-width); margin-inline: auto !important; } .itchen-trust-item { flex: 1 1 220px !important; min-width: 0; text-align: center; } .itchen-trust-title { color: var(--color-amber-deep); font-size: 1.4rem; margin-bottom: 0.4rem !important; } .itchen-trust-item p { font-size: 0.95rem; color: var(--color-ink); } /* ---------- Category cards ---------- */ .itchen-category-row, .itchen-project-row, .itchen-benefit-row, .itchen-step-row { flex-wrap: wrap !important; gap: 1.75rem; } .itchen-card { flex: 1 1 220px !important; min-width: 0; background: var(--color-white); border-radius: 6px; overflow: hidden; box-shadow: 0 2px 12px rgba(28, 52, 97, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } .itchen-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(28, 52, 97, 0.14); } .itchen-card .elementor-widget-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .itchen-card-title { font-size: 1.2rem; padding-inline: 1.25rem; margin-top: 1rem !important; margin-bottom: 0.4rem !important; } .itchen-card-desc { padding-inline: 1.25rem; } .itchen-card-desc p { font-size: 0.92rem; color: var(--color-ink); } .itchen-card-link { display: block; padding: 0.5rem 1.25rem 1.25rem; color: var(--color-amber-text) !important; font-weight: 600; text-decoration: none; } .itchen-card-link:hover { color: var(--color-navy) !important; } /* ---------- Homeowner benefits ---------- */ .itchen-benefit-item { flex: 1 1 220px !important; min-width: 0; text-align: center; padding-inline: 1rem; } .itchen-benefit-title { font-size: 1.2rem; margin-bottom: 0.5rem !important; } /* ---------- Featured projects ---------- */ .itchen-project-card { flex: 1 1 280px !important; min-width: 0; border-radius: 6px; overflow: hidden; } .itchen-project-card .elementor-widget-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .itchen-project-caption { font-size: 0.9rem; color: var(--color-ink); margin-top: 0.6rem; text-align: center; } .itchen-projects-cta { text-align: center; margin-top: 2rem !important; } .itchen-projects-cta .itchen-card-link { display: inline; padding: 0; } /* ---------- How it works ---------- */ .itchen-how-it-works { background: var(--color-light); max-width: 100%; padding-block: var(--section-padding-y) !important; } .itchen-how-it-works .itchen-section-title { max-width: var(--content-width); margin-inline: auto !important; } .itchen-step-row { max-width: var(--content-width); margin-inline: auto !important; position: relative; } .itchen-step-item { flex: 1 1 220px !important; min-width: 0; text-align: center; position: relative; } /* The river-line motif from the logo: a thin connecting line threading through the process steps, echoing the brand mark instead of using bare numbered circles as unrelated decoration. */ .itchen-step-row::before { content: ''; position: absolute; top: 20px; left: 5%; right: 5%; height: 2px; background: var(--color-amber); opacity: 0.4; z-index: 0; } .itchen-step-num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-amber); color: var(--color-navy); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; } .itchen-step-title { font-size: 1.1rem; margin-bottom: 0.4rem !important; } /* ---------- Repairs callout ---------- */ .itchen-repairs-callout { background: var(--color-navy); max-width: 100%; padding-block: var(--section-padding-y) !important; } .itchen-repairs-callout-row { max-width: var(--content-width); margin-inline: auto !important; } .itchen-repairs-callout-text { flex: 1 1 100% !important; text-align: center; } .itchen-repairs-callout .itchen-section-title { color: var(--color-white); } .itchen-repairs-callout-text p { color: #d7deea; max-width: 640px; margin-inline: auto !important; margin-bottom: 1.5rem !important; } /* ---------- Service area ---------- */ .itchen-service-area { text-align: center; } .itchen-service-area p { max-width: 640px; margin-inline: auto !important; color: var(--color-ink); } /* ---------- Final CTA ---------- */ .itchen-final-cta { background: var(--color-navy); max-width: 100%; text-align: center; } .itchen-final-cta p { color: #d7deea; margin-bottom: 1.5rem !important; } .itchen-final-cta-row { justify-content: center !important; align-items: center; flex-wrap: wrap !important; gap: 1.5rem; } .itchen-final-cta-row > .e-con { flex: 0 0 auto !important; width: max-content !important; } .itchen-final-cta-phone { color: var(--color-white); font-weight: 600; text-decoration: none; } .itchen-final-cta-phone:hover { color: var(--color-amber); } /* ========================================================================== Signature: the fanlight motif The logo is a semi-circular fanlight window with radiating glazing bars, framing the river-and-hills illustration. Carried onto the site as a recurring arch shape at major section transitions -- one motif, applied consistently, rather than several competing decorative devices. ========================================================================== */ .itchen-arch-divider { position: relative; height: 48px; margin-top: -48px; /* Elementor applies its own default 20px bottom margin to every top-level widget/element, this divider included -- confirmed 2026-08-20 via computed styles (margin-bottom measured as 20px on the live page despite this rule, and a real 20px gap between the divider and the next section, not a sub-pixel rounding issue as first assumed). It's invisible when the gap happens to sit on a white background already (e.g. the bottom arch against the white FAQ section above it) and glaring everywhere else (e.g. the top arch against the hero photo) -- same bug, coincidentally hidden in one spot. !important is required to actually beat Elementor's rule; a plain override doesn't win. */ margin-bottom: -2px !important; pointer-events: none; z-index: 2; } .itchen-arch-divider svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Left-aligned sitewide as of 2026-08-20 (was centred) -- client direction: every section eyebrow reads as a left-aligned label, matching the hero card's own treatment, not a centred caption floating above centred copy. */ .itchen-eyebrow { display: block; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-amber-text); text-align: left; margin-bottom: 0.75rem; } .itchen-hero .itchen-eyebrow { color: var(--color-white); opacity: 0.85; text-align: left; } /* On a dark (navy) section, amber-text is too dark to read -- match the hero's white-eyebrow treatment (see .itchen-hero .itchen-eyebrow above). */ .itchen-benefits-dark .itchen-eyebrow { color: var(--color-white); opacity: 0.85; } /* Restrained, single page-load reveal -- respects reduced-motion. */ @media (prefers-reduced-motion: no-preference) { .itchen-hero-inner > .e-con { opacity: 0; transform: translateY(14px); animation: itchen-fade-up 0.7s ease-out forwards; } .itchen-hero-inner > .e-con:nth-child(1) { animation-delay: 0.05s; } .itchen-hero-inner > .e-con:nth-child(2) { animation-delay: 0.15s; } .itchen-hero-inner > .e-con:nth-child(3) { animation-delay: 0.28s; } .itchen-hero-inner > .e-con:nth-child(4) { animation-delay: 0.4s; } } @keyframes itchen-fade-up { to { opacity: 1; transform: translateY(0); } } @media (max-width: 767px) { .itchen-hero-title { font-size: 2rem; } .itchen-section-title { font-size: 1.5rem; } } /* ========================================================================== Contact page -- Fluent Forms embed reskinned to match the site's tokens ========================================================================== */ .itchen-contact-row { gap: 3rem; align-items: flex-start; flex-wrap: wrap; } .itchen-contact-form-col { flex: 1 1 55%; min-width: 320px; } .itchen-contact-info-col { flex: 1 1 30%; min-width: 260px; background: var(--color-light); border-left: 4px solid var(--color-amber); padding: 2rem; } .itchen-contact-info-title { color: var(--color-navy); margin-bottom: 1rem !important; } .itchen-contact-info-body p { margin-bottom: 1rem !important; line-height: 1.6; } .itchen-contact-info-body strong { color: var(--color-navy); display: block; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.2rem; } .itchen-contact-info-body a { color: var(--color-ink); text-decoration: none; } .itchen-contact-info-body a:hover { color: var(--color-amber-deep); } .fluentform-widget-wrapper .ff-el-input--label label, .fluentform-widget-wrapper label { color: var(--color-navy); font-family: var(--font-body); font-weight: 600; } .fluentform-widget-wrapper input:not([type="submit"]), .fluentform-widget-wrapper select, .fluentform-widget-wrapper textarea { border: 1px solid #d5dae2 !important; border-radius: 4px !important; font-family: var(--font-body); } .fluentform-widget-wrapper input:not([type="submit"]):focus, .fluentform-widget-wrapper select:focus, .fluentform-widget-wrapper textarea:focus { border-color: var(--color-amber) !important; box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.18) !important; } /* Elementor auto-generates a per-page, per-widget rule for this button (".elementor-{page} .elementor-element.elementor-element-{id} ... .ff-btn-submit { background-color: ... !important }") that is 6 class-selectors deep -- it varies by page/widget ID so it can't be targeted directly. The repeated class below is a deliberate, ID-independent specificity bump past it (7 class-selectors), not a typo -- see wordpress-elementor-gotchas.md before "simplifying" it. */ .fluentform-widget-wrapper .fluentform .frm-fluent-form .ff-el-group .ff-btn-submit.ff-btn-submit.ff-btn-submit { background-color: var(--color-amber) !important; border-color: var(--color-amber) !important; color: var(--color-navy-deep) !important; font-weight: 700 !important; border-radius: 4px !important; } .fluentform-widget-wrapper .fluentform .frm-fluent-form .ff-el-group .ff-btn-submit.ff-btn-submit.ff-btn-submit:hover { background-color: var(--color-amber-deep) !important; border-color: var(--color-amber-deep) !important; } @media (max-width: 767px) { .itchen-contact-row { flex-direction: column; } } /* ========================================================================== About page -- stats strip and story section ========================================================================== */ .itchen-stats-strip { background: var(--color-light); padding-block: 3rem !important; } .itchen-stats-row { flex-wrap: wrap; justify-content: space-around; gap: 2rem; text-align: center; } .itchen-stat-item { flex: 1 1 160px; } .itchen-stat-number { font-family: var(--font-display); font-size: 2.5rem; margin-bottom: 0.25rem !important; } /* color must reach .elementor-heading-title directly -- see the .itchen-final-cta-title comment further up for why the bare class alone doesn't work. */ .itchen-stat-number .elementor-heading-title { /* amber-deep is 2.8:1 on --color-light -- just under the 3:1 AA floor even for this large (2.5rem) text. amber-text has enough margin. */ color: var(--color-amber-text) !important; } .itchen-stat-label p { color: var(--color-ink); font-weight: 600; margin: 0 !important; } .itchen-story-row { gap: 3rem; align-items: center; flex-wrap: wrap; } .itchen-story-image-col, .itchen-story-text-col { flex: 1 1 45%; min-width: 300px; } .itchen-story-image-col img { border-radius: 6px; width: 100%; height: auto; display: block; } .itchen-story-text-col p { line-height: 1.7; margin-bottom: 1rem !important; } .itchen-benefits-dark { background: var(--color-navy); } .itchen-benefits-dark .itchen-section-title .elementor-heading-title, .itchen-benefits-dark .itchen-benefit-title .elementor-heading-title { color: var(--color-white) !important; } .itchen-benefits-dark .itchen-benefit-item p { color: #d7deea; } @media (max-width: 767px) { .itchen-story-row { flex-direction: column; } } /* ========================================================================== Projects / portfolio grid ========================================================================== */ .itchen-portfolio-row { flex-wrap: wrap; gap: 2rem; margin-bottom: 2rem; } .itchen-portfolio-card { flex: 1 1 calc(33.333% - 1.4rem); min-width: 280px; } .itchen-portfolio-card img { border-radius: 6px; width: 100%; height: 220px; object-fit: cover; display: block; margin-bottom: 1rem; } @media (max-width: 900px) { .itchen-portfolio-card { flex: 1 1 calc(50% - 1rem); } } @media (max-width: 600px) { .itchen-portfolio-card { flex: 1 1 100%; } } /* ========================================================================== Style sub-pages (Casement Windows, Composite Doors, etc.) ========================================================================== */ .itchen-breadcrumb-back { display: inline-block; color: var(--color-white); opacity: 0.8; font-size: 0.85rem; font-weight: 600; text-decoration: none; margin-bottom: 1rem; } .itchen-breadcrumb-back:hover { opacity: 1; color: var(--color-amber); } .itchen-style-intro { max-width: 760px; } .itchen-style-intro p { line-height: 1.8; font-size: 1.05rem; margin-bottom: 1.25rem !important; } /* Rebuilt 2026-08-19 as a full-width navy band -- was a plain light card with dot bullets, sitting flat between two other light/white sections with no visual rhythm. Echoes orion-windows.co.uk's navy icon-benefit strip, translated through Itchen's own navy/amber rather than copied. */ .itchen-supplier-section { max-width: 100%; background: var(--color-navy-deep); padding-block: 4.5rem !important; } .itchen-supplier-panel { max-width: var(--content-width); margin-inline: auto; padding-inline: 5vw; text-align: left; } /* Kept centred per client direction 2026-08-20 -- the rest of the panel (intro paragraph, facts list) stays left-aligned, only the eyebrow+heading pair here is the exception to the sitewide left-align pass. */ .itchen-supplier-section .itchen-eyebrow { color: var(--color-white); opacity: 0.85; text-align: center; } .itchen-supplier-title { margin-bottom: 0.75rem !important; } /* Same wrapper-vs-widget pattern as every other coloured heading on this site -- the class lands on the outer div, Elementor's own default wins on .elementor-heading-title unless reached directly. */ .itchen-supplier-title .elementor-heading-title { color: var(--color-white) !important; } .itchen-supplier-intro p { color: var(--color-white); opacity: 0.85; line-height: 1.7; margin: 0 auto 1.75rem !important; max-width: 640px; } .itchen-supplier-facts { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2.5rem; text-align: left; } .itchen-supplier-facts li { position: relative; padding-left: 1.75rem; line-height: 1.5; color: var(--color-white); } .itchen-supplier-facts li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--color-amber); font-weight: 700; } @media (max-width: 700px) { .itchen-supplier-facts { grid-template-columns: 1fr; } } /* ---------- Style-page image/content split sections ---------- Pairs a real installation photo with a text column -- the piece the original generic template was missing entirely (no image widgets were ever placed in any of the 21 style sub-pages' bodies). Reusable across any style page, in either column order. */ .itchen-split-section { max-width: 100%; } .itchen-split-tint { background: var(--color-light); } .itchen-split-row { max-width: var(--content-width); margin-inline: auto !important; padding-inline: 5vw !important; align-items: center; gap: 3rem; flex-wrap: wrap !important; } .itchen-split-col { flex: 1 1 320px !important; min-width: 0; } .itchen-split-col .elementor-widget-image img { width: 100%; border-radius: 6px; box-shadow: 0 8px 30px rgba(28, 52, 97, 0.15); display: block; } .itchen-split-title { margin-bottom: 0.75rem !important; } .itchen-split-col p { color: var(--color-ink); line-height: 1.7; } .itchen-feature-list, .itchen-finish-list { list-style: none; margin: 0.5rem 0 0; padding: 0; } .itchen-feature-list li { position: relative; padding-left: 1.5rem; line-height: 1.6; color: var(--color-ink); margin-bottom: 0.85rem; } .itchen-feature-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--color-glass); border-radius: 50%; } .itchen-finish-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1.5rem; } .itchen-finish-list li { position: relative; padding-left: 1.5rem; line-height: 1.5; color: var(--color-ink); } .itchen-finish-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--color-amber-text); font-weight: 700; } .itchen-finish-note { margin-top: 1.1rem !important; font-size: 0.85rem !important; color: var(--color-ink); opacity: 0.75; } .itchen-finish-note a { color: var(--color-amber-text); } .itchen-specs-section { background: var(--color-light); } /* Alternating-band modifier (2026-08-20) -- used on the second of two adjacent itchen_specs_section() calls (e.g. Configs directly after Specs) so they don't render as two identical grey bands in a row. */ .itchen-specs-alt { background: transparent; } .itchen-specs-inner { max-width: 900px; margin: 0 auto; text-align: left; } /* Section titles left-aligned to match the now-left eyebrow above them (2026-08-20) -- scoped to these specific containers rather than the shared .itchen-section-title class itself, which is also used by homepage sections (How It Works, Repairs Callout) not part of this change. Supplier/System-Partner heading deliberately excluded -- client wants that one kept centred, the rest of the panel stays left. */ .itchen-specs-inner .itchen-section-title, .itchen-faq-inner .itchen-section-title { text-align: left; } .itchen-supplier-title { text-align: center; } .itchen-spec-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 2.5rem; } .itchen-spec-list li { position: relative; padding-left: 1.5rem; line-height: 1.6; color: var(--color-ink); } .itchen-spec-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--color-amber-text); font-weight: 700; } @media (max-width: 700px) { .itchen-spec-list { grid-template-columns: 1fr; } } /* ---------- FAQ accordion (native
/, no JS) ---------- */ /* Alternating-band modifier (2026-08-20, same pattern as .itchen-specs-alt) -- used when FAQ needs to land on grey instead of its default transparent, so it doesn't repeat whatever band came right before it. Which one applies is computed per-page in the build loop, not fixed here. */ .itchen-faq-tint { background: var(--color-light); } .itchen-faq-inner { max-width: 900px; margin: 0 auto; text-align: left; } .itchen-faq-item { border-bottom: 1px solid rgba(20, 38, 69, 0.12); padding: 1rem 0; } .itchen-faq-item summary { cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; color: var(--color-navy); padding-right: 2rem; position: relative; } .itchen-faq-item summary::-webkit-details-marker { display: none; } .itchen-faq-item summary::after { content: '+'; position: absolute; right: 0; top: 0; color: var(--color-amber-text); font-weight: 700; font-size: 1.2rem; } .itchen-faq-item[open] summary::after { content: '\2212'; } .itchen-faq-item p { margin: 0.75rem 0 0; color: var(--color-ink); line-height: 1.6; } @media (max-width: 700px) { .itchen-split-row { gap: 1.75rem; } .itchen-finish-list { grid-template-columns: 1fr; } } /* ========================================================================== DESIGN V2 -- 2026-08-27 Ported from design-explorations/homepage-concept.html and casement-windows-concept.html (itchen-ns), approved by the client as a static localhost concept before this port. Ground rules that keep this additive rather than a breaking rewrite of the system above: - New tokens use fresh custom-property names (--ink, --bronze, --radius, --shadow-*, etc.) -- never reusing --color-*/--font-*/--content-width, so pages still on the v1 system (everything not yet migrated) are completely unaffected. - New component classes reuse the concept files' own names verbatim (.hero, .svc-card, .megamenu, ...) -- none of them collide with the "itchen-" prefixed v1 classes above, checked directly against this file before writing a line of this block. - The only v1 selectors edited in place are the header/footer ones (.itchen-site-header, .itchen-header-*, .itchen-site-footer, .itchen-footer-*) -- those are global chrome shared by every page, v1 or v2, so the client's "same look everywhere" request for nav/footer/WhatsApp tab means editing them in place rather than forking a parallel set. Every *body* section below is new/additive. - Headings and body text inside v2 markup are hand-authored raw HTML (via text-editor widgets, not the heading widget) -- see wordpress-elementor-gotchas.md gotcha #13 (wpautop) for why, and functions.php for the matching remove_filter. That also means the usual ".foo .elementor-heading-title" wrapper-vs-widget dance isn't needed for v2 headings -- plain "h1,h2,h3" tag selectors reach them directly, same as the static concept files. ========================================================================== */ .ic-page { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--paper); max-width: 100% !important; } .ic-page img { max-width: 100%; display: block; } /* :not(.btn) -- otherwise this beats .btn-primary/.btn-ghost/.btn-ghost-dark's own explicit color on specificity (class+element beats a single class), so every button silently inherited whatever dark text color cascaded down instead of its own intended color -- confirmed via document.styleSheets rule matching, not guessed: on a bronze or --ink background this made button text unreadable. Plain inline links still want the old inherit behaviour, so only buttons are excluded. */ .ic-page a:not(.btn) { color: inherit; } /* Same class of bug as the rule above, caught 2026-08-31 building the hub hero forms: a plugin's reset.css ships `[type="button"], [type="submit"], button { color: #cc3366; background: transparent; }` and theme.css ships `.page-content a { text-decoration: underline; }`, both loaded AFTER this stylesheet with specificity equal to (button) or higher than (link) a bare `.btn-primary`/`.btn-ghost-dark` single-class rule -- so any real