/* ── 01-tokens ── */ /* ═══════════════════════════════════════════════════════════════════════ TROGDEN PLUMBING — Design tokens Brand sampled from the company truck: royal blue + charcoal. Copper accent added for warmth (copper pipe — the plumber's material). ═══════════════════════════════════════════════════════════════════════ */ :root{ /* Brand */ --brand: #1E7BE0; --brand-600: #1567C6; --brand-700: #0B4FA8; --brand-800: #08397C; --brand-300: #6FB3F5; --brand-200: #A9D1FA; --brand-050: #EAF3FE; --copper: #D2833F; --copper-600: #A85A1E; --copper-300: #EBAE73; --copper-050: #FCF3EA; /* Neutrals — cool navy-leaning greys */ --ink: #0A101B; --ink-800: #0F1826; --ink-700: #172236; --ink-600: #22314A; --slate: #47597A; --slate-400: #67748C; /* 4.6:1 on white — was #7A8AA5 at 3.3:1 */ --slate-300: #A6B2C6; --line: #E2E8F1; --paper: #F5F8FC; --paper-2: #EDF2F9; --white: #FFFFFF; /* Semantic */ --bg: var(--white); --fg: var(--ink-700); --fg-strong: var(--ink); --fg-muted: var(--slate); /* Type */ --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif; --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-eyebrow: clamp(.72rem, .68rem + .18vw, .84rem); --fs-small: clamp(.86rem, .83rem + .16vw, .95rem); --fs-body: clamp(1rem, .96rem + .22vw, 1.125rem); --fs-lead: clamp(1.12rem, 1.02rem + .5vw, 1.4rem); --fs-h4: clamp(1.18rem, 1.05rem + .6vw, 1.5rem); --fs-h3: clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem); --fs-h2: clamp(2rem, 1.5rem + 2.3vw, 3.5rem); --fs-h1: clamp(2.6rem, 1.7rem + 4.2vw, 5.75rem); --fs-mega: clamp(3.2rem, 1.9rem + 5.8vw, 8rem); /* Layout */ --container: 1240px; --gutter: clamp(1.15rem, .8rem + 1.6vw, 2.5rem); --section-y: clamp(4rem, 2.5rem + 6vw, 8.5rem); --radius: 14px; --radius-lg: 22px; --radius-xl: 30px; /* Elevation — cool-tinted, never pure black */ --sh-sm: 0 1px 2px rgba(10,16,27,.06), 0 2px 6px rgba(10,16,27,.05); --sh-md: 0 4px 12px rgba(10,16,27,.07), 0 12px 28px rgba(10,16,27,.07); --sh-lg: 0 10px 24px rgba(10,16,27,.09), 0 28px 60px rgba(10,16,27,.11); --sh-xl: 0 20px 44px rgba(10,16,27,.12), 0 48px 100px rgba(10,16,27,.16); --sh-brand: 0 10px 24px rgba(30,123,224,.22), 0 22px 48px rgba(11,79,168,.20); /* Semantic extras that were previously written as one-off literals */ --ok: #2FB36A; --star: #F5A623; --focus: 0 0 0 4px rgba(30,123,224,.32); --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --t-fast: .18s var(--ease); --t: .34s var(--ease); --t-slow: .7s var(--ease-out); --header-h: 84px; } @media (max-width:900px){ :root{ --header-h:68px; } } /* Wide-screen scale-up lives in 10-wide.css, which loads last. */ /* ── 02-base ── */ /* ═══════════════ Base & primitives ═══════════════ */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 18px); } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} } body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:var(--fs-body); line-height:1.68; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg,video{ max-width:100%; height:auto; display:block; } /* …but never into WordPress's own chrome. The global `height:auto` beats an presentational attribute, so a 20px admin-bar icon renders at its intrinsic size — ours came out 122x154 over the toolbar. */ #wpadminbar img,#wpadminbar svg{ max-width:none; height:auto; display:inline-block; } a{ color:var(--brand-700); text-decoration-thickness:1px; text-underline-offset:3px; } a:hover{ color:var(--brand-600); } h1,h2,h3,h4,h5{ font-family:var(--font-display); color:var(--fg-strong); font-weight:700; line-height:.98; letter-spacing:-.012em; margin:0 0 .5em; text-wrap:balance; } h1{ font-size:var(--fs-h1); letter-spacing:-.022em; } h2{ font-size:var(--fs-h2); letter-spacing:-.018em; } h3{ font-size:var(--fs-h3); line-height:1.06; } h4{ font-size:var(--fs-h4); line-height:1.14; } p{ margin:0 0 1.1em; text-wrap:pretty; } p:last-child{ margin-bottom:0; } strong,b{ font-weight:700; color:var(--fg-strong); } ::selection{ background:var(--brand); color:#fff; } /* One focus language everywhere. On dark ground the brand blue is blue-on-blue at 1.8:1, so those surfaces get a light ring instead. */ :focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:4px; } .on-dark :focus-visible, .hero :focus-visible, .pagehead :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible, .topbar :focus-visible, .drawer :focus-visible{ outline-color:#9AD6FF; } /* ── Layout ── */ .container{ width:min(100% - (var(--gutter)*2), var(--container)); margin-inline:auto; } .container-wide{ width:min(100% - (var(--gutter)*2), 1600px); margin-inline:auto; } .section{ padding-block:var(--section-y); position:relative; } .section-sm{ padding-block:calc(var(--section-y) * .62); } /* ── Eyebrow ── */ .eyebrow{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-display); font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--brand-700); margin:0 0 1.1rem; } .eyebrow:not(.elementor-widget)::before{ content:""; width:28px; height:2px; flex:none; background:linear-gradient(90deg,var(--brand),var(--copper)); } .eyebrow-c{ justify-content:center; } .on-dark .eyebrow, .eyebrow.is-light{ color:var(--brand-300); } /* ── Lead paragraph ── */ .lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--fg-muted); font-weight:400; } .on-dark .lead{ color:var(--slate-300); } /* ── Section heading block ── */ .sec-head{ max-width:62ch; margin-bottom:clamp(2.2rem,1.5rem + 2vw,3.8rem); } .sec-head.center{ margin-inline:auto; text-align:center; } .sec-head h2{ margin-bottom:.42em; } /* ── Buttons ── */ .btn{ --btn-bg:var(--brand); --btn-fg:#fff; --btn-bd:transparent; display:inline-flex; align-items:center; justify-content:center; gap:.6em; font-family:var(--font-display); font-size:1.02rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1; padding:1.12em 1.9em; border-radius:9px; border:2px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg); text-decoration:none; cursor:pointer; position:relative; overflow:hidden; isolation:isolate; transition:transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t); box-shadow:var(--sh-sm); } .btn::after{ /* sheen */ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.26) 50%,transparent 70%); transform:translateX(-120%); transition:transform .7s var(--ease-out); } .btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-brand); color:var(--btn-fg); } .btn:hover::after{ transform:translateX(120%); } .btn:active{ transform:translateY(0); } .btn-primary{ --btn-bg:linear-gradient(135deg,var(--brand) 0%,var(--brand-700) 100%); } /* White on this copper is 2.98:1 — below AA for the button's own label. Ink on copper clears it comfortably and reads as deliberate. */ .btn-copper{ --btn-bg:linear-gradient(135deg,var(--copper) 0%,var(--copper-600) 100%); --btn-fg:#14100B; } .btn-copper:hover{ --btn-fg:#14100B; } .btn-copper:hover{ box-shadow:0 10px 24px rgba(210,131,63,.3), 0 22px 48px rgba(185,106,42,.22); } .btn-ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line); box-shadow:none; } .btn-ghost:hover{ --btn-bd:var(--brand); --btn-fg:var(--brand-700); background:var(--brand-050); box-shadow:var(--sh-sm); } .btn-light{ --btn-bg:#fff; --btn-fg:var(--ink); } .btn-light:hover{ --btn-fg:var(--brand-700); } .btn-outline-light{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.42); box-shadow:none; } .btn-outline-light:hover{ --btn-bd:#fff; background:rgba(255,255,255,.1); --btn-fg:#fff; } .btn-lg{ font-size:1.12rem; padding:1.25em 2.3em; } .btn-sm{ font-size:.9rem; padding:.9em 1.4em; } .btn-block{ width:100%; } .btn .ico{ width:1.15em; height:1.15em; flex:none; } /* Button rows never break a label mid-word on a phone */ .btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; } .btn-row.center{ justify-content:center; } @media (max-width:420px){ .btn-row > .btn{ width:100%; } } /* ── Link with arrow ── */ .arrow-link{ display:inline-flex; align-items:center; gap:.5em; text-decoration:none; font-family:var(--font-display); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.95rem; color:var(--brand-700); } .arrow-link .ico{ width:1.05em; height:1.05em; transition:transform var(--t); } .arrow-link:hover .ico{ transform:translateX(5px); } .on-dark .arrow-link{ color:var(--brand-300); } /* ── Surfaces ── */ .on-dark{ background:var(--ink); color:var(--slate-300); } .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:#fff; } .on-dark strong{ color:#fff; } .bg-paper{ background:var(--paper); } .bg-paper-2{ background:var(--paper-2); } /* ── Utility ── */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--brand); color:#fff; padding:.9rem 1.4rem; font-weight:700; } .skip-link:focus{ left:0; } .text-center{ text-align:center; } .nowrap{ white-space:nowrap; } /* ── 03-chrome ── */ /* ═══════════════ Site chrome: topbar, header, nav, footer ═══════════════ */ /* ── Announcement / topbar ── */ .topbar{ background:linear-gradient(90deg,var(--ink) 0%,var(--brand-800) 55%,var(--brand-700) 100%); color:rgba(255,255,255,.88); font-size:.82rem; position:relative; z-index:60; } .topbar-in{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; min-height:40px; padding-block:.4rem; } .topbar-l,.topbar-r{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; } .topbar b{ color:#fff; } .topbar a{ color:#fff; text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:.45em; } .topbar a:hover{ color:var(--brand-200); } .topbar .ico{ width:1em; height:1em; opacity:.85; } .topbar .dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(47,179,106,.7); animation:pulse 2.4s infinite; flex:none; } @keyframes pulse{ 70%{box-shadow:0 0 0 9px rgba(47,179,106,0);} 100%{box-shadow:0 0 0 0 rgba(47,179,106,0);} } .topbar .topbar-call{ display:none; align-items:center; gap:.4em; font-weight:700; } .topbar-call .ico{ width:1em; height:1em; } @media (max-width:860px){ .topbar-l .hide-sm{ display:none; } } @media (max-width:620px){ /* On a phone the licence line is noise and the number is the point. */ .topbar-r{ display:none; } .topbar .topbar-call{ display:inline-flex; } .topbar-in{ justify-content:space-between; gap:.8rem; } .topbar{ font-size:.78rem; } } /* ── Header ── */ .site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid rgba(226,232,241,.9); transition:box-shadow var(--t), background var(--t); } .site-header.is-stuck{ box-shadow:0 6px 24px rgba(10,16,27,.09); background:rgba(255,255,255,.95); } .header-in{ display:flex; align-items:center; gap:1.5rem; min-height:var(--header-h); } /* Logo */ .logo{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; flex:none; } .logo svg{ height:clamp(38px,3.2vw,50px); width:auto; } .logo:hover{ opacity:.88; } /* Primary nav. Two DOM shapes must both work: the theme's fallback emits `nav.nav > a`, while wp_nav_menu emits `nav.nav > ul > li > a`. Styling only the first leaves a real install showing a bulleted vertical list — and provisioning assigns a menu, so every install hits that path. */ .nav{ display:flex; align-items:center; gap:.18rem; margin-left:auto; } .nav > ul,.nav .nav-list{ display:flex; align-items:center; gap:.18rem; list-style:none; margin:0; padding:0; } .nav li{ position:relative; list-style:none; } .nav a{ font-family:var(--font-display); font-size:1.01rem; font-weight:600; letter-spacing:.055em; text-transform:uppercase; color:var(--ink-600); text-decoration:none; padding:.62rem .85rem; border-radius:7px; position:relative; transition:color var(--t-fast), background var(--t-fast); white-space:nowrap; } .nav a::after{ content:""; position:absolute; left:.85rem; right:.85rem; bottom:.34rem; height:2px; background:linear-gradient(90deg,var(--brand),var(--copper)); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform var(--t); } .nav a:hover{ color:var(--brand-700); background:var(--brand-050); } .nav a:hover::after,.nav a.current::after,.nav li.current-menu-item > a::after{ transform:scaleX(1); } .nav a.current,.nav li.current-menu-item > a{ color:var(--brand-700); } /* Header actions */ .header-cta{ display:flex; align-items:center; gap:.7rem; flex:none; } .header-phone{ display:inline-flex; flex-direction:column; line-height:1.1; text-decoration:none; padding-right:.2rem; } .header-phone .lbl{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--slate-400); font-weight:700; font-family:var(--font-display); } .header-phone .num{ font-family:var(--font-display); font-size:1.28rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; } .header-phone:hover .num{ color:var(--brand); } @media (max-width:1180px){ .header-phone{ display:none; } } @media (max-width:1100px){ .nav{ display:none; } } /* One-tap call, phones only — the burger alone buries the phone number two taps deep on the page that matters most. */ .icon-call{ display:none; width:46px; height:46px; border-radius:10px; flex:none; place-items:center; text-decoration:none; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-700)); box-shadow:0 6px 16px rgba(30,123,224,.36); } .icon-call .ico{ width:20px; height:20px; } .icon-call:hover{ color:#fff; transform:translateY(-1px); } @media (max-width:620px){ .icon-call{ display:grid; } } /* Burger */ .burger{ display:none; width:46px; height:46px; border:1px solid var(--line); background:#fff; border-radius:10px; cursor:pointer; padding:0; place-items:center; flex:none; } .burger span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform var(--t), opacity var(--t-fast); } .burger span + span{ margin-top:5px; } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } @media (max-width:1100px){ .burger{ display:grid; } /* Push the whole action group to the container's right edge; a stray margin-left:0 here left the burger floating mid-header. */ .header-cta{ margin-left:auto; } } @media (max-width:620px){ .header-cta .btn{ display:none; } } /* Mobile drawer */ .drawer{ position:fixed; inset:0; z-index:90; color:#fff; background: radial-gradient(90% 60% at 50% 0%, rgba(30,123,224,.26), transparent 66%), linear-gradient(180deg, var(--ink-800) 0%, var(--ink) 58%, #071019 100%); display:flex; flex-direction:column; padding:1rem var(--gutter) 0; /* dvh, not vh: on iOS the address bar otherwise steals the last 60px and takes the call button with it. */ height:100dvh; max-height:100dvh; transform:translateY(-100%); visibility:hidden; transition:transform .45s var(--ease-out), visibility .45s; overflow:hidden; overscroll-behavior:contain; } .drawer.open{ transform:translateY(0); visibility:visible; } .drawer-top{ display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h); } .drawer-close{ width:46px; height:46px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(255,255,255,.22); background:transparent; color:#fff; cursor:pointer; } .drawer-close svg{ width:20px; height:20px; } /* The nav scrolls if it must; the phone block below never does. */ .drawer nav{ display:flex; flex-direction:column; margin-top:.6rem; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:.4rem; } .drawer nav > ul,.drawer .drawer-list{ display:flex; flex-direction:column; list-style:none; margin:0; padding:0; } .drawer nav li{ list-style:none; } .drawer nav a{ font-family:var(--font-display); font-size:clamp(2rem,9vw,2.9rem); font-weight:700; text-transform:uppercase; letter-spacing:-.01em; color:#fff; text-decoration:none; padding:.4em 0; border-bottom:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:space-between; opacity:0; transform:translateY(16px); } .drawer.open nav a{ animation:drawerIn .5s var(--ease-out) forwards; } .drawer.open nav > a:nth-child(1),.drawer.open nav li:nth-child(1) a{animation-delay:.06s} .drawer.open nav > a:nth-child(2),.drawer.open nav li:nth-child(2) a{animation-delay:.11s} .drawer.open nav > a:nth-child(3),.drawer.open nav li:nth-child(3) a{animation-delay:.16s} .drawer.open nav > a:nth-child(4),.drawer.open nav li:nth-child(4) a{animation-delay:.21s} .drawer.open nav > a:nth-child(5),.drawer.open nav li:nth-child(5) a{animation-delay:.26s} .drawer.open nav > a:nth-child(6),.drawer.open nav li:nth-child(6) a{animation-delay:.31s} @keyframes drawerIn{ to{opacity:1;transform:none;} } .drawer nav a .n{ font-size:.8rem; letter-spacing:.2em; color:var(--brand-300); opacity:.7; } .drawer nav a:hover{ color:var(--brand-300); } .drawer-foot{ flex:none; position:relative; z-index:2; margin-inline:calc(var(--gutter) * -1); /* The crest lives INSIDE this padding. Hanging it over the nav with a negative offset covered whichever menu item happened to be at the boundary — it read as a rendering fault, not as decoration. */ padding:52px var(--gutter) calc(1rem + env(safe-area-inset-bottom)); display:grid; gap:.7rem; } /* Water gathering at the foot of the drawer. */ .drawer-foot::before{ content:""; position:absolute; top:0; left:0; right:0; height:48px; z-index:-1; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2056%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0.0%2026.0L10.7%2027.2L21.4%2028.4L32.1%2029.6L42.9%2030.8L53.6%2031.9L64.3%2032.9L75.0%2033.8L85.7%2034.6L96.4%2035.3L107.1%2035.9L117.9%2036.4L128.6%2036.7L139.3%2036.9L150.0%2037.0L160.7%2036.9L171.4%2036.7L182.1%2036.4L192.9%2035.9L203.6%2035.3L214.3%2034.6L225.0%2033.8L235.7%2032.9L246.4%2031.9L257.1%2030.8L267.9%2029.6L278.6%2028.4L289.3%2027.2L300.0%2026.0L310.7%2024.8L321.4%2023.6L332.1%2022.4L342.9%2021.2L353.6%2020.1L364.3%2019.1L375.0%2018.2L385.7%2017.4L396.4%2016.7L407.1%2016.1L417.9%2015.6L428.6%2015.3L439.3%2015.1L450.0%2015.0L460.7%2015.1L471.4%2015.3L482.1%2015.6L492.9%2016.1L503.6%2016.7L514.3%2017.4L525.0%2018.2L535.7%2019.1L546.4%2020.1L557.1%2021.2L567.9%2022.4L578.6%2023.6L589.3%2024.8L600.0%2026.0L610.7%2027.2L621.4%2028.4L632.1%2029.6L642.9%2030.8L653.6%2031.9L664.3%2032.9L675.0%2033.8L685.7%2034.6L696.4%2035.3L707.1%2035.9L717.9%2036.4L728.6%2036.7L739.3%2036.9L750.0%2037.0L760.7%2036.9L771.4%2036.7L782.1%2036.4L792.9%2035.9L803.6%2035.3L814.3%2034.6L825.0%2033.8L835.7%2032.9L846.4%2031.9L857.1%2030.8L867.9%2029.6L878.6%2028.4L889.3%2027.2L900.0%2026.0L910.7%2024.8L921.4%2023.6L932.1%2022.4L942.9%2021.2L953.6%2020.1L964.3%2019.1L975.0%2018.2L985.7%2017.4L996.4%2016.7L1007.1%2016.1L1017.9%2015.6L1028.6%2015.3L1039.3%2015.1L1050.0%2015.0L1060.7%2015.1L1071.4%2015.3L1082.1%2015.6L1092.9%2016.1L1103.6%2016.7L1114.3%2017.4L1125.0%2018.2L1135.7%2019.1L1146.4%2020.1L1157.1%2021.2L1167.9%2022.4L1178.6%2023.6L1189.3%2024.8L1200.0%2026.0L1200%2056L0%2056Z%27%20fill%3D%27rgba%2821%2C103%2C198%2C.85%29%27%2F%3E%3C%2Fsvg%3E"); background-repeat:repeat-x; background-position:0 bottom; background-size:1200px 48px; animation:tp-drawer-wave 17s linear infinite; } .drawer-foot::after{ content:""; position:absolute; inset:0 0 -40px; z-index:-2; background:linear-gradient(180deg, rgba(11,79,168,.55), rgba(8,42,88,.92)); } @keyframes tp-drawer-wave{ to{ background-position:1200px bottom; } } .drawer-phone{ display:flex; align-items:center; gap:.85rem; text-decoration:none; color:#fff; padding:.2rem 0 .1rem; } .drawer-phone .ring{ width:48px; height:48px; flex:none; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); } .drawer-phone .ring .ico{ width:22px; height:22px; } .drawer-phone .l{ display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); font-family:var(--font-display); font-weight:700; } .drawer-phone .n{ display:block; font-family:var(--font-display); font-size:1.75rem; font-weight:800; line-height:1.05; letter-spacing:-.01em; } .drawer-phone:hover{ color:#fff; } .drawer-btns{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; } .drawer-btns .btn{ width:100%; padding:1em .7em; font-size:.92rem; } .drawer-meta{ font-size:.78rem; color:rgba(255,255,255,.6); text-align:center; margin:0; } /* Short phones in landscape: shrink the nav, keep the phone block. */ @media (max-height:560px){ .drawer nav a{ font-size:1.15rem; padding:.3em 0; min-height:40px; } .drawer-phone .n{ font-size:1.35rem; } .drawer-foot::before{ display:none; } } @media (prefers-reduced-motion:reduce){ .drawer-foot::before{ animation:none; } } body.nav-open{ overflow:hidden; } /* ── Mobile sticky CTA bar ── */ .mobile-cta{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; background:rgba(10,16,27,.96); backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,.1); padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom)); transform:translateY(110%); transition:transform .4s var(--ease-out); box-shadow:0 -8px 28px rgba(0,0,0,.3); } .mobile-cta.show{ transform:translateY(0); } .mobile-cta-in{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; } .mobile-cta .btn{ padding:1em .8em; font-size:.95rem; } @media (max-width:900px){ .mobile-cta{ display:block; } body{ padding-bottom:0; } } /* ── Footer ── */ .site-footer{ background:var(--ink); color:var(--slate-300); position:relative; overflow:hidden; } .site-footer::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 12% 0%, rgba(30,123,224,.22), transparent 62%), radial-gradient(60% 100% at 92% 10%, rgba(210,131,63,.13), transparent 60%); pointer-events:none; } .footer-main{ position:relative; padding-block:clamp(3.2rem,2rem + 4vw,5.5rem) 2.6rem; display:grid; gap:clamp(2rem,1rem + 3vw,3.6rem); grid-template-columns:minmax(260px,1.55fr) repeat(3,minmax(0,1fr)); } @media (max-width:1200px){ .footer-main{ grid-template-columns:1fr 1fr; } } @media (max-width:620px){ .footer-main{ grid-template-columns:1fr; gap:2.2rem; } } .footer-brand .logo svg{ height:54px; } .footer-blurb{ margin-top:1.2rem; max-width:40ch; font-size:.97rem; line-height:1.65; } .footer-scripture{ margin-top:1.4rem; padding-left:1rem; border-left:2px solid var(--copper); font-style:italic; color:var(--slate-300); font-size:.95rem; line-height:1.5; } .footer-scripture cite{ display:block; font-style:normal; font-family:var(--font-display); letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; color:var(--copper-300); margin-top:.5rem; } .footer-col h5,.footer-col .footer-head{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem; font-weight:700; } .footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.62rem; } .footer-col a{ color:var(--slate-300); text-decoration:none; font-size:.96rem; transition:color var(--t-fast), transform var(--t-fast); display:inline-block; } .footer-col a:hover{ color:#fff; transform:translateX(3px); } .footer-contact{ display:grid; grid-template-columns:minmax(0,1fr); gap:.9rem; font-size:.96rem; } .footer-contact .row > span{ min-width:0; overflow-wrap:anywhere; } .footer-contact a{ color:#fff; text-decoration:none; font-weight:600; } .footer-contact a:hover{ color:var(--brand-300); } .footer-contact .row{ display:flex; gap:.7rem; align-items:flex-start; } .footer-contact .ico{ width:1.1em; height:1.1em; color:var(--brand-300); flex:none; margin-top:.28em; } .footer-badge{ display:inline-flex; align-items:center; gap:.6rem; margin-top:1.4rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:.7rem .95rem; font-size:.84rem; line-height:1.3; } .footer-badge .ico{ width:1.4em; height:1.4em; color:var(--brand-300); flex:none; } .footer-badge b{ color:#fff; display:block; font-family:var(--font-display); letter-spacing:.04em; } .footer-bottom{ position:relative; border-top:1px solid rgba(255,255,255,.1); padding-block:1.5rem; display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; align-items:center; justify-content:space-between; font-size:.86rem; color:var(--slate-400); } .footer-bottom a{ color:var(--slate-400); text-decoration:none; } .footer-bottom a:hover{ color:#fff; } .footer-legal{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; } .ssq-credit{ display:inline-flex; align-items:center; gap:.35em; } .ssq-credit:hover{ color:#fff !important; } @media (max-width:620px){ .footer-bottom{ justify-content:center; text-align:center; } .footer-legal{ justify-content:center; } } /* ── 04-hero ── */ /* ═══════════════ Hero & page banners ═══════════════ */ .hero{ position:relative; overflow:hidden; background:var(--ink); color:#fff; isolation:isolate; padding-block:clamp(3.5rem,2rem + 7vw,7.5rem) clamp(3rem,2rem + 5vw,6rem); } .hero-bg{ position:absolute; inset:0; z-index:-3; } .hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:58% 50%; } /* Scrim + glow are PSEUDO-ELEMENTS, not divs. As markup they existed only in the static HTML, so the Elementor hero — whose photo comes from the section's background_image control — rendered as a bare sunlit photo with white text on it. Drawn here they apply to both, and Elementor never shows an empty widget placeholder for them. */ /* Scrim AND glow live together here so that ::after is free for the animated bubble field — which must be a pseudo-element, because the Elementor hero is section markup we do not control and a zero-height decoration widget would render as an empty placeholder that blocks editing. */ .hero::before{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(48% 62% at 8% 22%, rgba(56,142,232,.30), transparent 66%), radial-gradient(40% 55% at 78% 88%, rgba(210,131,63,.16), transparent 64%), linear-gradient(104deg, rgba(10,16,27,.95) 0%, rgba(10,16,27,.87) 34%, rgba(10,16,27,.55) 62%, rgba(10,16,27,.38) 100%), linear-gradient(to top, rgba(10,16,27,.9) 0%, transparent 42%); } @media (max-width:820px){ .hero-bg img{ object-position:64% 50%; } .hero::before{ background: radial-gradient(70% 40% at 20% 10%, rgba(56,142,232,.26), transparent 70%), linear-gradient(180deg, rgba(10,16,27,.93) 0%, rgba(10,16,27,.86) 45%, rgba(10,16,27,.96) 100%); } } /* Elementor paints the section background first, then the negative-z pseudo-elements, then content — same stacking as the static markup. */ body .elementor .elementor-section.hero{ isolation:isolate; } .hero-grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(2rem,1rem + 4vw,5rem); align-items:center; } @media (max-width:1040px){ .hero-grid{ grid-template-columns:1fr; } } .hero-badge{ display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.5rem; /* Dark glass, not light: the badge sits over sky in the photograph, where a white-on-white-tint pill all but disappears. */ background:rgba(8,14,24,.58); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%); border-radius:100px; padding:.5rem 1rem .5rem .6rem; font-size:.82rem; font-weight:600; color:#fff; letter-spacing:.01em; box-shadow:0 6px 18px rgba(0,0,0,.28); } .hero-badge b,.hero-badge strong{ color:#fff; } .hero-badge .stars{ display:inline-flex; gap:1px; color:var(--star); } .hero-badge .stars svg{ width:14px; height:14px; } .hero-badge .sep{ width:1px; height:14px; background:rgba(255,255,255,.25); } .hero h1{ color:#fff; font-size:var(--fs-h1); margin-bottom:.4em; letter-spacing:-.026em; line-height:.92; text-wrap:balance; } .hero h1 .accent{ background:linear-gradient(100deg,#9AD6FF 0%,#4E9BF0 48%,#7FC2FA 100%); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; /* background-clip:text paints into the inline box, and line-height:.92 crops that box above the descenders of p, g and y. Pad the box down and pull the same amount back off the layout. */ padding-bottom:.14em; margin-bottom:-.14em; } .hero h1 .line{ display:block; } .hero-lede{ font-size:var(--fs-lead); color:rgba(255,255,255,.82); max-width:52ch; margin-bottom:2rem; line-height:1.55; } .hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; margin-bottom:2.4rem; } @media (max-width:460px){ .hero-actions > .btn{ width:100%; } } .hero-chips{ display:flex; flex-wrap:wrap; gap:.55rem; } .chip{ display:inline-flex; align-items:center; gap:.45em; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:100px; padding:.48rem .95rem; font-size:.84rem; font-weight:600; color:rgba(255,255,255,.9); backdrop-filter:blur(8px); } .chip .ico{ width:1em; height:1em; color:var(--brand-300); } /* Hero card — the "call now" panel */ .hero-card{ background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); border-radius:var(--radius-xl); padding:clamp(1.5rem,1rem + 2vw,2.4rem); box-shadow:0 30px 70px rgba(0,0,0,.4); position:relative; overflow:hidden; } .hero-card::before{ content:""; position:absolute; top:0; left:12%; right:12%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); } .hero-card h3{ color:#fff; font-size:1.55rem; margin-bottom:.3em; } .hero-card .sub{ color:rgba(255,255,255,.65); font-size:.95rem; margin-bottom:1.5rem; } .hero-card .big-phone{ display:flex; align-items:center; gap:.75rem; text-decoration:none; font-family:var(--font-display); font-size:clamp(1.9rem,1.3rem + 2.4vw,2.7rem); font-weight:800; color:#fff; letter-spacing:-.02em; line-height:1; margin-bottom:1.1rem; transition:color var(--t); } .hero-card .big-phone:hover{ color:var(--brand-300); } .hero-card .big-phone .ring{ width:clamp(44px,3.4vw,54px); height:clamp(44px,3.4vw,54px); flex:none; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-700)); display:grid; place-items:center; box-shadow:0 8px 20px rgba(30,123,224,.45); } .hero-card .big-phone .ring svg{ width:45%; height:45%; color:#fff; } .hero-card-list{ list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:.6rem; } .hero-card-list li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.94rem; color:rgba(255,255,255,.82); } .hero-card-list .ico{ width:1.05em; height:1.05em; color:var(--ok); flex:none; margin-top:.35em; } .hero-card .fine{ font-size:.78rem; color:rgba(255,255,255,.5); text-align:center; margin-top:.9rem; } /* Hero stat strip */ .hero-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.13); border-radius:var(--radius-lg); overflow:hidden; margin-top:clamp(2.5rem,1.5rem + 3vw,4rem); backdrop-filter:blur(10px); } .hero-stats .st{ background:rgba(10,16,27,.55); padding:clamp(1.1rem,.8rem + 1vw,1.7rem); text-align:center; } .hero-stats .v{ font-family:var(--font-display); font-size:clamp(1.7rem,1.1rem + 2vw,2.5rem); font-weight:800; color:#fff; line-height:1; letter-spacing:-.02em; } .hero-stats .v .u{ color:var(--brand-300); } .hero-stats .l{ font-size:.8rem; font-weight:600; color:rgba(255,255,255,.88); margin-top:.5rem; } .hero-stats .n{ font-size:.72rem; color:rgba(255,255,255,.5); margin-top:.15rem; } @media (max-width:760px){ .hero-stats{ grid-template-columns:repeat(2,1fr); } } /* Stats band: its own section in Elementor, so it carries the hero's dark ground rather than inheriting it. */ .hero-stats-band{ background:var(--ink); padding-block:0 clamp(2rem,1.2rem + 2vw,3.2rem); } .hero-stats-band > .elementor-container, .hero-stats-band > .container{ max-width:var(--container); } .hero-stats-band .hero-stats{ margin-top:0; } body .elementor .elementor-section.hero-stats-band{ background-color:var(--ink); } /* Short viewports — don't let the hero clip its CTA */ @media (max-height:600px) and (min-width:1040px){ .hero{ padding-block:3rem; } } /* ── Inner page banner ── */ .pagehead{ position:relative; overflow:hidden; background:var(--ink); color:#fff; isolation:isolate; padding-block:clamp(3rem,2rem + 5vw,5.5rem) clamp(2.6rem,1.8rem + 4vw,4.5rem); } .pagehead-bg{ position:absolute; inset:0; z-index:-3; } .pagehead-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; } .pagehead::before{ content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(100deg, rgba(10,16,27,.95) 0%, rgba(10,16,27,.84) 45%, rgba(10,16,27,.66) 100%); } .pagehead::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(52% 70% at 6% 24%, rgba(30,123,224,.3), transparent 68%); mix-blend-mode:screen; } .pagehead h1{ color:#fff; max-width:18ch; margin-bottom:.34em; } .pagehead .lead{ color:rgba(255,255,255,.78); max-width:58ch; } .crumbs{ display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; font-size:.83rem; color:rgba(255,255,255,.6); margin-bottom:1.4rem; } .crumbs a{ color:rgba(255,255,255,.82); text-decoration:none; } .crumbs a:hover{ color:#fff; text-decoration:underline; } .crumbs .sep{ opacity:.45; } /* ── 05-components ── */ /* ═══════════════ Components ═══════════════ */ /* ── Trust bar ── */ .trustbar{ background:var(--ink-800); color:#fff; padding-block:1.4rem; position:relative; overflow:hidden; } .trust-inner{ position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.9rem clamp(1.2rem,3vw,3rem); } .trust-item{ display:inline-flex; align-items:center; gap:.6rem; font-size:.92rem; font-weight:600; color:rgba(255,255,255,.9); } .trust-item .ico{ width:1.25em; height:1.25em; color:var(--brand-300); flex:none; } .trust-sep{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.28); } @media (max-width:760px){ .trust-sep{ display:none; } .trust-inner{ justify-content:flex-start; } } /* ── Pillar cards (services) ── */ .pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,.6rem + 1.2vw,1.7rem); } @media (max-width:1150px){ .pillars{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .pillars{ grid-template-columns:1fr; } } .pillar{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--ink); min-height:clamp(380px,38vw,460px); display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; isolation:isolate; box-shadow:var(--sh-md); transition:transform var(--t), box-shadow var(--t); } .pillar:hover{ transform:translateY(-7px); box-shadow:var(--sh-xl); } .pillar-img{ display:block; position:absolute; inset:0; z-index:-2; } .pillar-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); } .pillar:hover .pillar-img img{ transform:scale(1.07); } .pillar::before{ content:""; position:absolute; inset:0; z-index:-1; /* Heavy enough for legible text at the bottom, light enough that the photograph is still the reason you look at the card. */ background:linear-gradient(to top, rgba(10,16,27,.97) 0%, rgba(10,16,27,.9) 24%, rgba(10,16,27,.45) 56%, rgba(10,16,27,.08) 100%); transition:opacity var(--t); } .pillar-body{ display:block; padding:clamp(1.3rem,1rem + 1vw,1.9rem); color:#fff; position:relative; } .pillar-icon{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:1rem; background:linear-gradient(135deg,rgba(30,123,224,.95),rgba(11,79,168,.95)); box-shadow:0 8px 18px rgba(11,79,168,.4); border:1px solid rgba(255,255,255,.18); } .pillar-icon svg{ width:22px; height:22px; color:#fff; } .pillar h3{ color:#fff; font-size:1.42rem; margin-bottom:.4em; line-height:1.05; } .pillar p{ font-size:.94rem; color:rgba(255,255,255,.76); margin-bottom:1rem; line-height:1.55; } .pillar-points{ list-style:none; margin:0 0 1.1rem; padding:0; display:grid; gap:.42rem; max-height:0; opacity:0; overflow:hidden; transition:max-height .45s var(--ease-out), opacity .3s, margin .45s; } .pillar:hover .pillar-points,.pillar:focus-within .pillar-points{ max-height:220px; opacity:1; } .pillar-points li{ font-size:.86rem; color:rgba(255,255,255,.8); display:flex; gap:.5rem; align-items:flex-start; } .pillar-points .ico{ width:.95em; height:.95em; color:var(--brand-300); flex:none; margin-top:.35em; } .pillar .more{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--font-display); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.84rem; color:var(--brand-300); } .pillar .more svg{ width:1em; height:1em; transition:transform var(--t); } .pillar:hover .more svg{ transform:translateX(5px); } /* Hover-reveal is a pointer affordance. Anything without hover — every touch device, not just phones — must simply see the list. */ @media (hover:none), (max-width:1150px){ .pillar-points{ max-height:220px; opacity:1; } } /* ── Split section (image + copy) ── */ .split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,1rem + 4vw,5rem); align-items:center; } .split.wide-text{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); } @media (max-width:980px){ .split,.split.wide-text{ grid-template-columns:1fr; } .split .media{ order:-1; } } .media-frame{ position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--sh-lg); } .media-frame img{ width:100%; aspect-ratio:4/3; object-fit:cover; } .media-frame.tall img{ aspect-ratio:3/4; } .media-stack{ display:grid; grid-template-columns:1.15fr .85fr; gap:1rem; align-items:end; } .media-stack .media-frame:first-child img{ aspect-ratio:3/4; } .media-stack .media-frame:last-child img{ aspect-ratio:1/1; } @media (max-width:520px){ .media-stack{ grid-template-columns:1fr; } .media-stack .media-frame:last-child{ display:none; } } /* Floating credential badge on media */ .media-tag{ position:absolute; z-index:2; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-radius:14px; padding:.95rem 1.2rem; box-shadow:var(--sh-lg); display:flex; align-items:center; gap:.8rem; border:1px solid rgba(255,255,255,.8); } .media-tag.bl{ left:clamp(.8rem,2vw,1.4rem); bottom:clamp(.8rem,2vw,1.4rem); } .media-tag.tr{ right:clamp(.8rem,2vw,1.4rem); top:clamp(.8rem,2vw,1.4rem); } .media-tag .ico{ width:2rem; height:2rem; color:var(--brand); flex:none; } .media-tag > span{ display:block; } .media-tag .v{ display:block; font-family:var(--font-display); font-size:1.3rem; font-weight:800; color:var(--ink); line-height:1; } .media-tag .l{ display:block; font-size:.74rem; color:var(--slate); letter-spacing:.06em; text-transform:uppercase; font-weight:600; margin-top:.2rem; } @media (max-width:520px){ .media-tag{ padding:.7rem .9rem; } .media-tag .ico{ width:1.5rem; height:1.5rem; } .media-tag .v{ font-size:1.05rem; } } /* ── Feature list with icons ── */ .feat-list{ list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:1.1rem; } .feat-list li{ display:flex; gap:1rem; align-items:flex-start; } .feat-list .bullet{ width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--brand-050); color:var(--brand-700); border:1px solid var(--brand-200); margin-top:.1em; } .on-dark .feat-list .bullet{ background:rgba(30,123,224,.16); border-color:rgba(111,179,245,.3); color:var(--brand-300); } .feat-list .bullet svg{ width:15px; height:15px; } .feat-list b{ display:block; font-family:var(--font-display); font-size:1.12rem; letter-spacing:.005em; margin-bottom:.15em; color:var(--fg-strong); } .feat-list span{ font-size:.96rem; color:var(--fg-muted); line-height:1.55; } .on-dark .feat-list span{ color:var(--slate-300); } /* ── Checklist ── */ .checklist{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.7rem; } .checklist li{ display:flex; gap:.7rem; align-items:flex-start; font-size:1rem; } .checklist .ico{ width:1.15em; height:1.15em; color:var(--brand); flex:none; margin-top:.3em; } .on-dark .checklist .ico{ color:var(--ok); } .checklist.cols{ grid-template-columns:repeat(2,1fr); } @media (max-width:640px){ .checklist.cols{ grid-template-columns:1fr; } } /* ── Process timeline ── */ .process{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,.5rem + 1.6vw,2.2rem); position:relative; } @media (max-width:1000px){ .process{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .process{ grid-template-columns:1fr; } } .step{ position:relative; padding-top:2.6rem; } .step::before{ content:""; position:absolute; top:1.05rem; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--brand-200),rgba(169,209,250,.12)); } .step:last-child::before{ background:linear-gradient(90deg,var(--brand-200),transparent); } .on-dark .step::before{ background:linear-gradient(90deg,rgba(111,179,245,.45),rgba(111,179,245,.08)); } .step .n{ position:absolute; top:0; left:0; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:.9rem; background:linear-gradient(135deg,var(--brand),var(--brand-700)); color:#fff; box-shadow:0 6px 16px rgba(30,123,224,.35); letter-spacing:.02em; } .step h4{ margin-bottom:.4em; font-size:1.25rem; } .step p{ font-size:.95rem; color:var(--fg-muted); line-height:1.6; } .on-dark .step p{ color:var(--slate-300); } @media (max-width:560px){ .step::before{ display:none; } .step{ padding-top:0; padding-left:3.2rem; } .step .n{ top:.1rem; } } /* ── Review cards ── */ .reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,.6rem + 1.2vw,1.6rem); align-items:start; } @media (max-width:1050px){ .reviews-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:680px){ .reviews-grid{ grid-template-columns:1fr; } } .review{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.3rem,1rem + .9vw,1.9rem); box-shadow:var(--sh-sm); position:relative; transition:transform var(--t), box-shadow var(--t), border-color var(--t); } .review:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--brand-200); } .review.featured{ background:linear-gradient(160deg,var(--ink) 0%,var(--brand-800) 120%); border-color:transparent; color:rgba(255,255,255,.86); } .review.featured .rv-name,.review.featured .rv-text{ color:#fff; } .review.featured .rv-text{ color:rgba(255,255,255,.9); } .review.featured .rv-meta{ color:rgba(255,255,255,.55); } .rv-stars{ display:flex; gap:2px; color:var(--star); margin-bottom:.9rem; } .rv-stars svg{ width:17px; height:17px; } .rv-quote{ font-family:var(--font-display); font-size:1.22rem; font-weight:700; line-height:1.24; color:var(--ink); margin-bottom:.7rem; letter-spacing:-.005em; } .review.featured .rv-quote{ color:#fff; font-size:1.42rem; } .rv-text{ font-size:.95rem; line-height:1.62; color:var(--fg-muted); margin-bottom:1.2rem; } .rv-foot{ display:flex; align-items:center; gap:.7rem; padding-top:1rem; border-top:1px solid var(--line); } .review.featured .rv-foot{ border-top-color:rgba(255,255,255,.16); } .rv-avatar{ width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:.98rem; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-700)); letter-spacing:.02em; } .review.featured .rv-avatar{ background:linear-gradient(135deg,var(--copper),var(--copper-600)); } .rv-foot > .rv-who{ display:block; min-width:0; } .rv-name{ display:block; font-weight:700; font-size:.96rem; color:var(--ink); line-height:1.2; } .rv-meta{ font-size:.79rem; color:var(--slate-400); display:flex; align-items:center; gap:.35em; } .rv-meta .g{ width:.95em; height:.95em; } /* ── Project cards ── */ .proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,.6rem + 1.4vw,1.8rem); } @media (max-width:1050px){ .proj-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .proj-grid{ grid-template-columns:1fr; } } .proj-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; box-shadow:var(--sh-sm); transition:transform var(--t), box-shadow var(--t), border-color var(--t); height:100%; } .proj-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-xl); border-color:transparent; } .proj-thumb{ display:block; position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--paper-2); } .proj-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .85s var(--ease-out); } .proj-card:hover .proj-thumb img{ transform:scale(1.06); } .proj-thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(10,16,27,.55),transparent 55%); } .proj-tags{ position:absolute; left:.85rem; top:.85rem; z-index:2; display:flex; flex-wrap:wrap; gap:.35rem; } .tag{ font-family:var(--font-display); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.36rem .7rem; border-radius:6px; background:rgba(255,255,255,.94); color:var(--ink); backdrop-filter:blur(8px); } .tag.brand{ background:linear-gradient(135deg,var(--brand),var(--brand-700)); color:#fff; } .tag.copper{ background:linear-gradient(135deg,var(--copper),var(--copper-600)); color:#fff; } .proj-meta-float{ position:absolute; left:.95rem; bottom:.85rem; z-index:2; color:#fff; font-size:.82rem; display:flex; align-items:center; gap:.4em; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.5); } .proj-meta-float .ico{ width:1em; height:1em; } .proj-body{ padding:clamp(1.1rem,.9rem + .7vw,1.5rem); display:flex; flex-direction:column; flex:1; } .proj-body h3{ font-size:1.3rem; margin-bottom:.4em; line-height:1.1; color:var(--ink); } .proj-card:hover h3{ color:var(--brand-700); } .proj-body p{ font-size:.93rem; color:var(--fg-muted); line-height:1.58; margin-bottom:1.1rem; } .proj-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1rem; border-top:1px solid var(--line); } .proj-spec{ font-size:.8rem; color:var(--slate-400); display:flex; align-items:center; gap:.4em; } .proj-spec .ico{ width:1em; height:1em; color:var(--brand); } .proj-card .more{ font-family:var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-700); display:inline-flex; align-items:center; gap:.4em; } .proj-card .more svg{ width:1em; height:1em; transition:transform var(--t); } .proj-card:hover .more svg{ transform:translateX(4px); } /* ── Filter pills ── */ .filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; } .filter{ font-family:var(--font-display); font-size:.88rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.62rem 1.15rem; border-radius:100px; cursor:pointer; border:1.5px solid var(--line); background:#fff; color:var(--slate); transition:all var(--t-fast); } .filter:hover{ border-color:var(--brand-300); color:var(--brand-700); } .filter.active{ background:var(--ink); border-color:var(--ink); color:#fff; } /* ── Service chip grid ── */ .svc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.7rem; } .svc-chip{ display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--line); border-radius:11px; padding:.9rem 1.1rem; font-size:.95rem; font-weight:500; color:var(--ink-600); transition:all var(--t-fast); } .svc-chip:hover{ border-color:var(--brand-300); background:var(--brand-050); transform:translateX(3px); } .svc-chip .ico{ width:1.05em; height:1.05em; color:var(--brand); flex:none; } /* ── County / service-area cards ── */ .counties{ display:grid; grid-template-columns:repeat(6,1fr); gap:.8rem; } @media (max-width:980px){ .counties{ grid-template-columns:repeat(3,1fr); } } @media (max-width:520px){ .counties{ grid-template-columns:repeat(2,1fr); } } .county{ text-align:center; padding:1.4rem .7rem; border-radius:var(--radius); background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); transition:all var(--t); backdrop-filter:blur(8px); } .county:hover{ background:rgba(30,123,224,.16); border-color:rgba(111,179,245,.4); transform:translateY(-3px); } .county .ico{ width:1.6rem; height:1.6rem; color:var(--brand-300); margin:0 auto .6rem; } .county b{ display:block; font-family:var(--font-display); font-size:1.18rem; color:#fff; letter-spacing:.01em; } .county span{ font-size:.74rem; color:var(--slate-400); letter-spacing:.1em; text-transform:uppercase; } /* ── CTA band ── */ .cta-band{ position:relative; overflow:hidden; isolation:isolate; color:#fff; background:linear-gradient(120deg,var(--ink) 0%,var(--brand-800) 52%,var(--brand-700) 100%); } .cta-band::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.22; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23fff' stroke-width='.5' fill='none' opacity='.35'/%3E%3C/svg%3E"); } .cta-band::after{ content:""; position:absolute; width:52vw; height:52vw; right:-14vw; top:-18vw; z-index:-1; background:radial-gradient(circle, rgba(210,131,63,.3), transparent 66%); border-radius:50%; } .cta-inner{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(1.8rem,1rem + 3vw,4rem); align-items:center; position:relative; } @media (max-width:900px){ .cta-inner{ grid-template-columns:1fr; text-align:center; } .cta-inner .btn-row{ justify-content:center; } } .cta-inner h2{ color:#fff; margin-bottom:.35em; } .cta-inner .lead{ color:rgba(255,255,255,.84); } .cta-phone{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff; font-family:var(--font-display); font-size:clamp(1.8rem,1.2rem + 2.2vw,2.6rem); font-weight:800; letter-spacing:-.02em; } .cta-phone:hover{ color:var(--brand-200); } .cta-phone .ring{ width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; flex:none; } .cta-phone .ring svg{ width:24px; height:24px; } /* ── FAQ accordion ── */ .faq-group + .faq-group{ margin-top:clamp(2rem,1.2rem + 2vw,3.2rem); } .faq-group h2{ font-size:1.5rem; margin-bottom:1.1rem; padding-bottom:.6rem; border-bottom:2px solid var(--line); display:flex; align-items:center; gap:.6rem; } .faq-group h3 .ico{ width:1.15em; height:1.15em; color:var(--brand); } .faq-list{ display:grid; gap:.7rem; } .faq-item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color var(--t), box-shadow var(--t); } .faq-item[open]{ border-color:var(--brand-200); box-shadow:var(--sh-md); } .faq-item summary{ list-style:none; cursor:pointer; padding:1.15rem 3.2rem 1.15rem 1.3rem; position:relative; font-family:var(--font-display); font-size:1.16rem; font-weight:700; color:var(--ink); line-height:1.25; transition:color var(--t-fast); } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary:hover{ color:var(--brand-700); } .faq-item summary::after{ content:""; position:absolute; right:1.25rem; top:50%; width:11px; height:11px; margin-top:-7px; border-right:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand); transform:rotate(45deg); transition:transform var(--t); transform-origin:center; } .faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; } .faq-item .a{ padding:0 1.3rem 1.3rem; color:var(--fg-muted); font-size:.98rem; line-height:1.7; } .faq-item .a p:first-child{ margin-top:0; } /* ── Stat row (light) ── */ .statrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; } @media (max-width:760px){ .statrow{ grid-template-columns:repeat(2,1fr); } } .statrow .st{ background:#fff; padding:clamp(1.3rem,1rem + 1vw,2rem); text-align:center; } .statrow .v{ font-family:var(--font-display); font-size:clamp(2rem,1.4rem + 2vw,2.9rem); font-weight:800; line-height:1; letter-spacing:-.025em; background:linear-gradient(135deg,var(--brand-700),var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent; } .statrow .l{ font-weight:700; font-size:.92rem; color:var(--ink); margin-top:.6rem; } .statrow .n{ font-size:.79rem; color:var(--slate-400); margin-top:.2rem; } /* ── Pull quote ── */ .pullquote{ position:relative; padding-left:clamp(1.5rem,1rem + 2vw,3rem); } .pullquote::before{ content:"“"; position:absolute; left:-.05em; top:-.35em; font-family:var(--font-display); font-size:clamp(5rem,3rem + 7vw,9rem); line-height:1; color:var(--brand-200); opacity:.55; } .on-dark .pullquote::before{ color:rgba(111,179,245,.28); } .pullquote blockquote{ margin:0; font-family:var(--font-display); font-size:clamp(1.4rem,1rem + 1.8vw,2.2rem); font-weight:700; line-height:1.22; color:var(--ink); letter-spacing:-.012em; } .on-dark .pullquote blockquote{ color:#fff; } .pullquote cite{ display:block; margin-top:1.1rem; font-style:normal; font-size:.92rem; color:var(--fg-muted); } .on-dark .pullquote cite{ color:var(--slate-400); } .pullquote cite b{ color:var(--ink); } .on-dark .pullquote cite b{ color:#fff; } /* ── Gallery ── */ .gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.8rem; } .gallery a{ display:block; border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1; background:var(--paper-2); position:relative; } .gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); } .gallery a:hover img{ transform:scale(1.08); } .gallery a::after{ content:""; position:absolute; inset:0; background:rgba(30,123,224,0); transition:background var(--t); } .gallery a:hover::after{ background:rgba(30,123,224,.14); } /* ── 06-forms ── */ /* ═══════════════ Forms — native fallback + PlugMatrix host styling ═══════════════ */ .form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); padding:clamp(1.4rem,1rem + 1.8vw,2.6rem); box-shadow:var(--sh-lg); position:relative; overflow:hidden; } .form-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--brand),var(--copper)); } .form-card h3{ font-size:1.7rem; margin-bottom:.3em; } .form-card .sub{ color:var(--fg-muted); font-size:.98rem; margin-bottom:1.8rem; } .field-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; } @media (max-width:620px){ .field-grid{ grid-template-columns:1fr; } } .field{ display:flex; flex-direction:column; gap:.4rem; } .field.full{ grid-column:1 / -1; } .field label{ font-family:var(--font-display); font-size:.86rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-600); } .field label .req{ color:var(--copper-600); } .field input,.field select,.field textarea{ font-family:var(--font-body); font-size:1rem; color:var(--ink); padding:.92rem 1.05rem; border:1.5px solid var(--line); border-radius:10px; background:var(--paper); transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); width:100%; } .field textarea{ min-height:140px; resize:vertical; line-height:1.6; } .field select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2347597A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1.05rem center; padding-right:2.6rem; } /* Keep the global focus outline — the tinted halo alone was barely visible and left keyboard users without an indicator. */ .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ border-color:var(--brand); background:#fff; box-shadow:var(--focus); } .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--brand); background:#fff; } .field input::placeholder,.field textarea::placeholder{ color:var(--slate-400); } .field .hint{ font-size:.8rem; color:var(--slate-400); } .form-consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.86rem; color:var(--fg-muted); margin-top:1.2rem; line-height:1.5; } .form-consent input{ width:18px; height:18px; margin-top:.2em; flex:none; accent-color:var(--brand); } .form-actions{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; } .form-note{ font-size:.82rem; color:var(--slate-400); display:flex; align-items:center; gap:.4em; } .form-note .ico{ width:1em; height:1em; color:var(--brand); } .form-alert{ padding:1rem 1.2rem; border-radius:10px; margin-bottom:1.4rem; font-size:.95rem; display:flex; gap:.7rem; align-items:flex-start; } .form-alert .ico{ width:1.2em; height:1.2em; flex:none; margin-top:.2em; } .form-alert.ok{ background:#E8F8EF; border:1px solid #9FDCBB; color:#14603C; } .form-alert.err{ background:#FDECEC; border:1px solid #F3BDBD; color:#8A2020; } .hp-field{ position:absolute!important; left:-9999px!important; opacity:0; height:0; overflow:hidden; } /* ── Contact method cards ── */ .contact-methods{ display:grid; gap:1rem; } .cm{ /* Explicit colour: on a dark section this anchor would otherwise inherit the light-background link colour (--brand-700) at 2.2:1. */ color:var(--slate-300); display:flex; gap:1.1rem; align-items:flex-start; padding:1.3rem; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13); border-radius:var(--radius); text-decoration:none; transition:all var(--t); backdrop-filter:blur(8px); } .cm:hover{ background:rgba(30,123,224,.14); border-color:rgba(111,179,245,.36); transform:translateX(4px); } .cm-icon{ width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand),var(--brand-700)); box-shadow:0 6px 16px rgba(11,79,168,.36); } .cm-icon svg{ width:20px; height:20px; color:#fff; } .cm > span:last-child{ display:block; min-width:0; } .cm .l{ display:block; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brand-300); font-weight:700; font-family:var(--font-display); } .cm .v{ display:block; font-family:var(--font-display); font-size:1.35rem; font-weight:700; color:#fff; line-height:1.15; margin-top:.15rem; word-break:break-word; } .cm .n{ display:block; font-size:.85rem; color:var(--slate-400); margin-top:.25rem; } /* ── Hours table ── */ .hours{ list-style:none; margin:0; padding:0; } .hours li{ display:flex; justify-content:space-between; gap:1rem; padding:.72rem 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:.95rem; } .hours li:last-child{ border-bottom:0; } .hours .d{ color:var(--slate-300); } .hours .t{ color:#fff; font-weight:600; } .hours li.accent .t{ color:var(--copper-300); } /* ── PlugMatrix embed host: inherit our design language ── */ .pm-form-host{ } .pm-form-host input:not([type=submit]):not([type=checkbox]):not([type=radio]), .pm-form-host select, .pm-form-host textarea{ font-family:var(--font-body)!important; font-size:1rem!important; color:var(--ink)!important; padding:.92rem 1.05rem!important; border:1.5px solid var(--line)!important; border-radius:10px!important; background:var(--paper)!important; width:100%!important; box-shadow:none!important; } .pm-form-host input:focus,.pm-form-host select:focus,.pm-form-host textarea:focus{ border-color:var(--brand)!important; background:#fff!important; box-shadow:var(--focus)!important; } .pm-form-host label{ font-family:var(--font-display)!important; font-size:.86rem!important; font-weight:700!important; letter-spacing:.09em!important; text-transform:uppercase!important; color:var(--ink-600)!important; } .pm-form-host button[type=submit], .pm-form-host input[type=submit]{ font-family:var(--font-display)!important; font-size:1.02rem!important; font-weight:700!important; letter-spacing:.08em!important; text-transform:uppercase!important; padding:1.12em 1.9em!important; border-radius:9px!important; border:0!important; cursor:pointer!important; background:linear-gradient(135deg,var(--brand),var(--brand-700))!important; color:#fff!important; box-shadow:var(--sh-sm)!important; transition:transform var(--t-fast), box-shadow var(--t)!important; } .pm-form-host button[type=submit]:hover, .pm-form-host input[type=submit]:hover{ transform:translateY(-2px)!important; box-shadow:var(--sh-brand)!important; } /* Placeholder shown to admins when no form is configured yet */ .pm-placeholder{ border:2px dashed var(--brand-200); background:var(--brand-050); border-radius:var(--radius); padding:1.6rem; text-align:center; color:var(--brand-800); } .pm-placeholder b{ display:block; font-family:var(--font-display); font-size:1.15rem; margin-bottom:.3rem; } .pm-placeholder code{ font-family:var(--font-mono); font-size:.85rem; background:#fff; padding:.15rem .45rem; border-radius:4px; } /* ── 07-motion ── */ /* ═══════════════ Motion — FAIL OPEN ═══════════════ Content is visible by default. Only once JS is confirmed live (html.js) do we hide it for the scroll reveal. The Elementor editor never runs our observer, so we force everything visible there. */ .reveal{ opacity:1; transform:none; } html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease-out), transform .75s var(--ease-out); } html.js .reveal.in{ opacity:1; transform:none; } html.js .reveal.d1{ transition-delay:.08s } html.js .reveal.d2{ transition-delay:.16s } html.js .reveal.d3{ transition-delay:.24s } html.js .reveal.d4{ transition-delay:.32s } html.js .reveal.d5{ transition-delay:.40s } html.js .reveal.d6{ transition-delay:.48s } body.elementor-editor-active .reveal, body.elementor-editor-active .reveal.in{ opacity:1 !important; transform:none !important; } @media (prefers-reduced-motion:reduce){ html.js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* Count-up numbers must read correctly before JS runs */ .countup{ font-variant-numeric:tabular-nums; } /* Subtle floating accent */ @keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} } html.js .floaty{ animation:floaty 6s ease-in-out infinite; } /* ── 08-prose ── */ /* ═══════════════ Long-form / editor content ═══════════════ */ .prose{ max-width:72ch; } .prose > * + *{ margin-top:1.15em; } .prose h2{ font-size:var(--fs-h3); margin-top:2em; margin-bottom:.5em; } .prose h3{ font-size:var(--fs-h4); margin-top:1.7em; margin-bottom:.45em; } .prose ul,.prose ol{ padding-left:1.35em; display:grid; gap:.5em; } .prose li::marker{ color:var(--brand); } .prose blockquote{ margin:1.8em 0; padding:1.2rem 1.5rem; border-left:3px solid var(--brand); background:var(--paper); border-radius:0 var(--radius) var(--radius) 0; font-size:1.08rem; color:var(--ink-600); font-style:italic; } .prose img{ border-radius:var(--radius); box-shadow:var(--sh-md); margin-block:1.6em; } .prose a{ color:var(--brand-700); text-decoration:underline; } .prose hr{ border:0; border-top:1px solid var(--line); margin-block:2.4em; } .prose table{ width:100%; border-collapse:collapse; font-size:.95rem; } .prose th,.prose td{ text-align:left; padding:.75rem 1rem; border-bottom:1px solid var(--line); } .prose th{ font-family:var(--font-display); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); } /* Spec table used on project detail pages */ .spec-table{ width:100%; border-collapse:collapse; font-size:.95rem; } .spec-table th,.spec-table td{ text-align:left; padding:.85rem 0; border-bottom:1px solid var(--line); vertical-align:top; } .spec-table th{ font-family:var(--font-display); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); font-weight:700; width:42%; } .spec-table td{ color:var(--ink); font-weight:600; } .spec-table tr:last-child th,.spec-table tr:last-child td{ border-bottom:0; } /* Sticky sidebar for detail pages */ .sticky-side{ position:sticky; top:calc(var(--header-h) + 22px); } @media (max-width:980px){ .sticky-side{ position:static; } } /* Pagination */ .pagination{ display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; margin-top:3rem; } .pagination .page-numbers{ min-width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 .9rem; border-radius:10px; border:1px solid var(--line); background:#fff; font-family:var(--font-display); font-weight:700; color:var(--ink-600); text-decoration:none; transition:all var(--t-fast); } .pagination .page-numbers:hover{ border-color:var(--brand); color:var(--brand-700); } .pagination .page-numbers.current{ background:var(--ink); border-color:var(--ink); color:#fff; } /* 404 / search */ .big-404{ font-family:var(--font-display); font-size:var(--fs-mega); font-weight:800; line-height:.82; background:linear-gradient(135deg,var(--brand-300),var(--brand),var(--copper)); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.04em; } .search-form{ display:flex; gap:.6rem; max-width:480px; } .search-form input{ flex:1; padding:.9rem 1.1rem; border:1.5px solid var(--line); border-radius:10px; font-size:1rem; font-family:var(--font-body); } .search-form input:focus{ border-color:var(--brand); box-shadow:var(--focus); } /* ── 09-elementor ── */ /* ═══════════════════════════════════════════════════════════════════════ ELEMENTOR COMPATIBILITY LAYER Elementor's DOM is not our DOM, and in the EDITOR its kit stylesheet loads *after* the theme — so equal-specificity rules lose there while winning on the frontend. Every rule that has to beat the kit is prefixed `body .elementor` → (0,3,1). That clears the kit's (0,3,0) but stays below a client's own per-widget setting at (0,4,0), so the style controls in the editor panel keep working. NEVER use !important here — it would silently break those controls. ═══════════════════════════════════════════════════════════════════════ */ /* ── Container width parity ── */ body .elementor-section.elementor-section-boxed > .elementor-container{ max-width:var(--container); } body .elementor-section-full_width > .elementor-container{ max-width:none; } /* ── Typography: beat the kit, lose to the client ── */ body .elementor .elementor-widget-heading .elementor-heading-title{ font-family:var(--font-display); color:var(--fg-strong); font-weight:700; line-height:.98; letter-spacing:-.012em; } body .elementor .elementor-widget-text-editor{ font-family:var(--font-body); color:var(--fg); line-height:1.68; } body .elementor .elementor-widget-text-editor p{ margin:0 0 1.1em; } body .elementor .elementor-widget-text-editor p:last-child{ margin-bottom:0; } /* Heading sizes mirror the theme scale */ body .elementor h1.elementor-heading-title{ font-size:var(--fs-h1); letter-spacing:-.022em; } body .elementor h2.elementor-heading-title{ font-size:var(--fs-h2); letter-spacing:-.018em; } body .elementor h3.elementor-heading-title{ font-size:var(--fs-h3); line-height:1.06; } body .elementor h4.elementor-heading-title{ font-size:var(--fs-h4); line-height:1.14; } body .elementor h5.elementor-heading-title{ font-size:1.1rem; } /* Dark sections: headings go white */ body .elementor .on-dark .elementor-heading-title, body .elementor .hero .elementor-heading-title, body .elementor .pagehead .elementor-heading-title, body .elementor .cta-band .elementor-heading-title{ color:#fff; } body .elementor .on-dark .elementor-widget-text-editor, body .elementor .pagehead .elementor-widget-text-editor, body .elementor .hero .elementor-widget-text-editor, body .elementor .cta-band .elementor-widget-text-editor{ color:var(--slate-300); } body .elementor .cta-band .elementor-widget-text-editor, body .elementor .pagehead .elementor-widget-text-editor, body .elementor .hero .elementor-widget-text-editor{ color:rgba(255,255,255,.84); } /* …and anything else inside a dark banner: links, bold, list text. */ body .elementor .pagehead .elementor-widget-text-editor strong, body .elementor .pagehead .elementor-widget-text-editor b{ color:#fff; } /* Utility classes still work when placed on a widget */ body .elementor .elementor-widget.eyebrow .elementor-heading-title{ font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--brand-700); line-height:1.4; } body .elementor .on-dark .elementor-widget.eyebrow .elementor-heading-title, body .elementor .hero .elementor-widget.eyebrow .elementor-heading-title, body .elementor .cta-band .elementor-widget.eyebrow .elementor-heading-title{ color:var(--brand-300); } body .elementor .elementor-widget.lead .elementor-widget-container{ font-size:var(--fs-lead); line-height:1.55; color:var(--fg-muted); } body .elementor .on-dark .elementor-widget.lead .elementor-widget-container, body .elementor .hero .elementor-widget.lead .elementor-widget-container, body .elementor .cta-band .elementor-widget.lead .elementor-widget-container{ color:rgba(255,255,255,.84); } /* A design class that happens to carry a max-width (.hero-lede, .footer-blurb) lands on the WIDGET WRAPPER, which is a flex item of .elementor-widget-wrap. Narrowing it lets the NEXT widget float up beside it — which is how the hero buttons ended up level with the lede paragraph. Neutralise on the wrapper, re-apply on the container. */ body .elementor .elementor-widget.hero-lede, body .elementor .elementor-widget.footer-blurb, body .elementor .elementor-widget.lead{ max-width:none; width:100%; } body .elementor .elementor-widget.hero-lede > .elementor-widget-container{ max-width:52ch; } body .elementor .elementor-widget.footer-blurb > .elementor-widget-container{ max-width:40ch; } /* Constrain measure on the CONTAINER, never the widget wrapper: widgets are flex items — narrowing the wrapper lets the next widget float up beside it. */ body .elementor .elementor-widget.measure > .elementor-widget-container{ max-width:62ch; } body .elementor .elementor-widget.measure-sm > .elementor-widget-container{ max-width:48ch; } body .elementor .center-text .elementor-widget-container{ text-align:center; } body .elementor .elementor-widget.measure.center-text > .elementor-widget-container{ margin-inline:auto; } /* ── Buttons ── */ body .elementor .elementor-button{ font-family:var(--font-display); font-size:1.02rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1; padding:1.12em 1.9em; border-radius:9px; border:2px solid transparent; background:linear-gradient(135deg,var(--brand) 0%,var(--brand-700) 100%); color:#fff; box-shadow:var(--sh-sm); transition:transform var(--t-fast), box-shadow var(--t); } body .elementor .elementor-button:hover{ transform:translateY(-2px); box-shadow:var(--sh-brand); color:#fff; } body .elementor .elementor-button .elementor-button-content-wrapper{ gap:.6em; } body .elementor .btn-copper .elementor-button{ background:linear-gradient(135deg,var(--copper),var(--copper-600)); } body .elementor .btn-light .elementor-button{ background:#fff; color:var(--ink); } body .elementor .btn-light .elementor-button:hover{ color:var(--brand-700); } body .elementor .btn-outline-light .elementor-button{ background:transparent; border-color:rgba(255,255,255,.42); color:#fff; box-shadow:none; } body .elementor .btn-outline-light .elementor-button:hover{ border-color:#fff; background:rgba(255,255,255,.1); } body .elementor .btn-ghost .elementor-button{ background:transparent; border-color:var(--line); color:var(--ink); box-shadow:none; } body .elementor .btn-ghost .elementor-button:hover{ border-color:var(--brand); color:var(--brand-700); background:var(--brand-050); } /* ── Icon lists ── The kit colours the DIRECTLY, so colouring the parent span leaves the icon untouched. Target the icon element itself. */ body .elementor .elementor-widget-icon-list .elementor-icon-list-item{ font-size:1rem; line-height:1.55; } body .elementor .elementor-widget-icon-list .elementor-icon-list-icon i, body .elementor .elementor-widget-icon-list .elementor-icon-list-icon svg{ color:var(--brand); fill:var(--brand); } body .elementor .elementor-widget-icon-list .elementor-icon-list-text{ color:var(--fg); } body .elementor .on-dark .elementor-widget-icon-list .elementor-icon-list-icon i, body .elementor .on-dark .elementor-widget-icon-list .elementor-icon-list-icon svg, body .elementor .cta-band .elementor-widget-icon-list .elementor-icon-list-icon i, body .elementor .cta-band .elementor-widget-icon-list .elementor-icon-list-icon svg{ color:var(--ok); fill:var(--ok); } body .elementor .on-dark .elementor-widget-icon-list .elementor-icon-list-text, body .elementor .cta-band .elementor-widget-icon-list .elementor-icon-list-text{ color:var(--slate-300); } /* ── Toggle / accordion (FAQ) ── */ body .elementor .elementor-toggle .elementor-tab-title{ font-family:var(--font-display); font-size:1.16rem; font-weight:700; color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:1.15rem 1.3rem; margin-bottom:.7rem; line-height:1.25; transition:color var(--t-fast), border-color var(--t); } body .elementor .elementor-toggle .elementor-tab-title:hover{ color:var(--brand-700); } body .elementor .elementor-toggle .elementor-tab-title.elementor-active{ border-color:var(--brand-200); border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0; } body .elementor .elementor-toggle .elementor-tab-title .elementor-toggle-icon{ color:var(--brand); } body .elementor .elementor-toggle .elementor-tab-content{ border:1px solid var(--brand-200); border-top:0; border-radius:0 0 var(--radius) var(--radius); background:#fff; padding:0 1.3rem 1.3rem; margin-bottom:.7rem; color:var(--fg-muted); font-size:.98rem; line-height:1.7; } /* ── Images ── */ body .elementor .elementor-widget-image img{ border-radius:var(--radius); } body .elementor .media-frame .elementor-widget-image img, body .elementor .elementor-widget-image.rounded-xl img{ border-radius:var(--radius-xl); box-shadow:var(--sh-lg); } body .elementor .elementor-widget-image.no-round img{ border-radius:0; } /* ═══════════════════════════════════════════════════════════════════════ EDITOR-ONLY DOM SURVIVAL ═══════════════════════════════════════════════════════════════════════ */ /* 1. Sections/columns MUST keep position:relative. In the editor every section carries an absolutely-positioned .elementor-background-overlay contained by that positioning. Forcing `position:static` releases dozens of invisible full-page sheets onto the .elementor wrapper, which then swallow every click — the page looks fine and nothing can be selected. So we explicitly re-assert relative rather than let a design class strip it. */ body .elementor .elementor-section, body .elementor .elementor-column, body .elementor .e-con{ position:relative; } /* 2. NEVER `width:auto` a column. Columns are flex items sized by .elementor-col-N { width:N% }. Re-apply any design-class layout on the inner .elementor-widget-wrap instead, leaving the column width alone. */ body .elementor .elementor-column > .elementor-widget-wrap{ align-content:flex-start; } /* 3. Our section design classes, when Elementor owns the wrapper. Elementor replaces our .container with .elementor-container, so padding that lived on .section goes onto the Elementor section itself. */ body .elementor .section > .elementor-container{ padding-block:0; } body .elementor .elementor-section.section{ padding-block:var(--section-y); } body .elementor .elementor-section.section-sm{ padding-block:calc(var(--section-y) * .62); } body .elementor .elementor-section.on-dark{ background-color:var(--ink); } body .elementor .elementor-section.bg-paper{ background-color:var(--paper); } body .elementor .elementor-section.bg-paper-2{ background-color:var(--paper-2); } /* Dark section backgrounds set via Elementor still get our overlay art */ body .elementor .elementor-section.cta-band{ background:linear-gradient(120deg,var(--ink) 0%,var(--brand-800) 52%,var(--brand-700) 100%); } /* 4. `.elementor-text-editor` exists ONLY in the editor. On the live page a text widget's HTML is the widget's direct child; in the editor it sits inside an extra div.elementor-text-editor. So a design class on the widget wrapper that sets `display:grid` gives one grid cell in the editor but shreds the live page into cells. Reset display on the wrapper and put the layout on the CONTENT element instead. */ body .elementor .elementor-widget.svc-rows, body .elementor .elementor-widget.proj-rows, body .elementor .elementor-widget.review-rows{ display:block; } body .elementor .svc-rows .svc-grid, body .elementor .svc-rows ul:not([class]){ /* scoped: never the editor toolbar