/* ============================================================ IRONRIDGE SERVICE & REPAIR - Foley Web Systems Template 3: "precision operations center" Trades / automotive / industrial / fleet repair. Plain CSS, no framework, mobile-first. Dark graphite base, steel + off-white text, signal orange. Brand palette + type live in :root. Change once. Deliberately NOT Luma House (warm serif editorial) or Market Hall (cream + bright retail). High-contrast, technical, grid-driven, mono data labels, numbered sections. ============================================================ */ /* ---- 1. Tokens --------------------------------------------- */ :root { /* Surfaces (deep graphite to near-black) */ --bg: #0e1113; --panel: #161b1f; --panel-2: #1c2329; --panel-3: #232b31; --steel: #2a343b; /* Text */ --ink: #eef1f2; /* off-white */ --muted: #9aa6ad; /* steel gray */ --faint: #66727a; /* Accents */ --signal: #ff6a1a; /* signal orange (primary) */ --signal-deep: #e2550c; --volt: #2e8bff; /* electric blue (sparing, "status") */ --hazard: #f5c518; /* safety yellow (rare, caution) */ --ok: #38c172; /* operational green dot */ /* Lines */ --line: rgba(238, 241, 242, 0.1); --line-2: rgba(238, 241, 242, 0.18); --line-3: rgba(238, 241, 242, 0.28); /* Type */ --display: "Oswald", "Arial Narrow", sans-serif; --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", "Courier New", monospace; /* Rhythm */ --wrap: 1300px; --gutter: clamp(1.1rem, 4vw, 3.5rem); --section: clamp(3.5rem, 8vw, 7rem); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --header-h: 72px; } /* ---- 2. Reset / base --------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x:clip on the actual scroll container (html) contains the transient horizontal reveal transforms (.slide-left/.slide-right start at translateX(±40px) before IntersectionObserver adds .is-in). A clip here — unlike overflow:hidden on body alone, which doesn't clip the html scroller — eliminates the ~22px of horizontal scroll without creating a scroll container, so the sticky header and off-canvas drawer still work. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; /* Pair the horizontal clip with 's so the off-canvas drawer (a fixed panel parked at translateX(100%), which extends past the right edge and is draggable on real touch devices even though desktop/narrow-desktop never scrolls to it) is fully contained: scrollWidth == clientWidth on mobile. `clip` (not `hidden`) avoids creating a scroll container, so the sticky header keeps working — body{overflow-x:hidden}+html{clip} broke it. */ overflow-x: clip; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 1.02rem; line-height: 1.65; -webkit-font-smoothing: antialiased; /* Horizontal clip lives on (the scroll container) instead of here. Keeping it on body too would make body a second, nested scroll container and break the sticky header. */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { margin: 0; } p { margin: 0 0 1em; } ::selection { background: var(--signal); color: #0b0d0e; } .display { font-family: var(--display); font-weight: 600; text-transform: uppercase; line-height: 0.98; letter-spacing: 0.005em; } /* ---- 3. Layout helpers ------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); position: relative; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--signal); color: #0b0d0e; padding: 0.7rem 1.2rem; font-weight: 700; } .skip-link:focus { left: 0; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } /* Hazard stripe accent (used sparingly as a thin rule) */ .hazard-bar { height: 6px; background: repeating-linear-gradient( -45deg, var(--signal) 0 14px, #0b0d0e 14px 28px ); } /* ---- 4. Mono data labels / kickers ------------------------- */ .kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); display: inline-flex; align-items: center; gap: 0.6rem; } .kicker::before { content: ""; width: 18px; height: 2px; background: var(--signal); } .kicker.is-muted { color: var(--muted); } .kicker.is-muted::before { background: var(--muted); } .data-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); } /* Status pill */ .status { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(56,193,114,0.5); } @media (prefers-reduced-motion: no-preference) { .status .dot { animation: pulse 2.4s var(--ease) infinite; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(56,193,114,0.5); } 70% { box-shadow: 0 0 0 7px rgba(56,193,114,0); } 100% { box-shadow: 0 0 0 0 rgba(56,193,114,0); } } /* ---- 5. Buttons -------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--body); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.9rem 1.45rem; background: var(--signal); color: #0b0d0e; border: 1px solid var(--signal); clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); } .btn .arr { transition: transform 0.25s var(--ease); } .btn:hover { background: var(--ink); border-color: var(--ink); } .btn:hover .arr { transform: translateX(4px); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-3); } .btn--ghost:hover { background: var(--panel-2); color: var(--ink); border-color: var(--signal); } .btn--volt { background: var(--volt); border-color: var(--volt); color: #061018; } .btn--volt:hover { background: var(--ink); border-color: var(--ink); } .btn--lg { padding: 1.05rem 1.7rem; font-size: 0.88rem; } .textlink { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); border-bottom: 1px solid var(--line-2); padding-bottom: 3px; transition: gap 0.25s var(--ease), border-color 0.25s var(--ease); } .textlink:hover { gap: 0.85rem; border-color: var(--signal); } /* ---- 6. Service strip (top) -------------------------------- */ .svc-strip { background: #0a0c0d; border-bottom: 1px solid var(--line); font-size: 0.78rem; } .svc-strip .wrap { display: flex; align-items: center; gap: 1.2rem; min-height: 44px; padding-block: 0.4rem; } .svc-strip .urgent { font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); font-size: 0.72rem; } .svc-strip .strip-phones { display: flex; gap: 1.4rem; align-items: center; } .svc-strip .ph { display: inline-flex; align-items: center; gap: 0.5rem; } .svc-strip .ph span { color: var(--faint); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; } .svc-strip .ph a { font-weight: 600; } .svc-strip .ph a:hover { color: var(--signal); } .svc-strip .strip-end { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; } .svc-strip .strip-cta { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); } .svc-strip .strip-cta:hover { color: var(--ink); } @media (max-width: 780px) { .svc-strip .urgent, .svc-strip .ph span, .svc-strip .status { display: none; } .svc-strip .wrap { gap: 1rem; justify-content: space-between; } .svc-strip .strip-end { margin-left: 0; } } /* ---- 7. Header / nav --------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 130; background: rgba(14, 17, 19, 0.98); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 72px; } .wordmark { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--ink); } .wordmark .mark { width: 34px; height: 34px; flex: none; background: var(--signal); clip-path: polygon(50% 0, 100% 28%, 100% 72%, 50% 100%, 0 72%, 0 28%); display: grid; place-items: center; font-family: var(--display); font-weight: 700; color: #0b0d0e; font-size: 1.1rem; } .wordmark .wm-text { line-height: 0.9; } .wordmark .wm-name { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; letter-spacing: 0.02em; color: var(--ink); } .wordmark .wm-sub { display: block; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--signal); margin-top: 0.25rem; } .nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); } .nav-list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); list-style: none; margin: 0; padding: 0; } .nav-list a { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 0.3rem 0; position: relative; transition: color 0.2s var(--ease); } .nav-list a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--ease); } .nav-list a:hover { color: var(--ink); } .nav-list a:hover::after, .nav-list a[aria-current="page"]::after { transform: scaleX(1); } .nav-list a[aria-current="page"] { color: var(--ink); } .nav-toggle { display: none; flex-direction: column; gap: 5px; width: 46px; height: 46px; justify-content: center; align-items: center; background: var(--panel-2); border: 1px solid var(--line-2); } .nav-toggle span { width: 22px; height: 2px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile close button (injected by script.js) */ .nav-close { display: none; background: none; border: 1px solid var(--line-2); color: var(--muted); cursor: pointer; padding: 0.55rem; align-self: flex-end; flex-shrink: 0; line-height: 0; } @media (max-width: 920px) { .nav-toggle { display: flex; } /* The header's backdrop-filter would otherwise become the containing block for the fixed drawer below, trapping it inside the header box. Drop the filter (and go fully opaque) at mobile so the drawer is a true viewport-level overlay. Desktop keeps its glassy header. */ .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); /* Lift the header (and the drawer it contains) above the scrim. Without this, .nav's z-index:200 is trapped inside the header's z-index:130 stacking context, so the body-level scrim (190) paints over the drawer and swallows its link clicks. */ z-index: 200; } /* Off-canvas drawer: fixed panel that slides in from the right, above the sticky header. body{overflow-x:hidden} keeps the parked panel from creating a horizontal scrollbar. */ .nav { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(86vw, 360px); height: 100%; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: calc(var(--header-h) + 1.25rem) var(--gutter) 2rem; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line-2); box-shadow: -24px 0 60px -30px rgba(0, 0, 0, 0.9); transform: translateX(100%); transition: transform 0.35s var(--ease); z-index: 200; } .nav.is-open { transform: translateX(0); } /* In-drawer close button (injected by script.js) */ .nav-close { display: grid; place-items: center; position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink); } .nav-close:hover { border-color: var(--signal); color: var(--signal); } .nav-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .nav-list li { width: 100%; border-bottom: 1px solid var(--line); } .nav-list a { display: block; padding: 1rem 0; font-family: var(--display); font-size: 1.6rem; color: var(--ink); } .nav-list a::after { display: none; } .nav-list a[aria-current="page"] { color: var(--signal); } .nav-cta { margin-top: 1.5rem; width: 100%; justify-content: center; } /* Scrim: dims the entire page beneath the drawer */ .nav-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease); z-index: 190; } .nav-scrim.is-open { opacity: 1; visibility: visible; } } /* ---- 8. Reveal / panel animations -------------------------- */ /* Initial-hidden states are gated behind html.js so the page is fully visible if JavaScript is disabled (progressive enhancement). */ .reveal[data-delay="1"] { transition-delay: 0.08s; } .reveal[data-delay="2"] { transition-delay: 0.16s; } .reveal[data-delay="3"] { transition-delay: 0.24s; } .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } .js .slide-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .js .slide-left.is-in { opacity: 1; transform: none; } .js .slide-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .js .slide-right.is-in { opacity: 1; transform: none; } .mask { position: relative; overflow: hidden; } .js .mask img { transform: scale(1.08); transition: transform 1.1s var(--ease); } .js .mask::after { content: ""; position: absolute; inset: 0; background: var(--bg); transform-origin: left; transition: transform 0.9s var(--ease); } .js .mask.is-in img { transform: scale(1); } .js .mask.is-in::after { transform: scaleX(0); transform-origin: right; } /* ---- 9. Tech frame (cornered image) ------------------------ */ .tech-frame { position: relative; } .tech-frame > .frame { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); border: 1px solid var(--line-2); } .tech-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .tech-frame .corner { position: absolute; width: 18px; height: 18px; border: 2px solid var(--signal); z-index: 2; } .tech-frame .corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; } .tech-frame .corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; } .tech-frame .corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; } .tech-frame .frame-tag { position: absolute; left: 12px; bottom: 12px; z-index: 3; background: rgba(11,13,14,0.85); border: 1px solid var(--line-2); padding: 0.5rem 0.8rem; display: flex; align-items: center; gap: 0.6rem; } /* ---- 10. Hero ---------------------------------------------- */ .hero { position: relative; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,106,26,0.05), transparent 40%), var(--bg); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 70% 30%, #000 0%, transparent 72%); opacity: 0.5; } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); } @media (min-width: 920px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } } .hero-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 0.95; letter-spacing: 0.004em; font-size: clamp(2.7rem, 6.4vw, 5.2rem); margin: 1.1rem 0 1.2rem; color: var(--ink); } .hero-title .hl { color: var(--signal); } .hero-lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 42ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; } .hero-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 2.4rem; background: var(--line); border: 1px solid var(--line); } @media (min-width: 560px) { .hero-metrics { grid-template-columns: repeat(4, 1fr); } } .metric { background: var(--bg); padding: 1rem 1.1rem; } .metric b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--ink); } .metric b .unit { color: var(--signal); } .metric > span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); } .hero-figure { aspect-ratio: 4 / 3.4; } @media (min-width: 920px) { .hero-figure { aspect-ratio: 4 / 4.4; } } /* ---- 11. Section heads ------------------------------------- */ .head { margin-bottom: clamp(2rem, 4vw, 3rem); } .head h2 { font-family: var(--display); font-weight: 600; text-transform: uppercase; line-height: 0.98; font-size: clamp(2rem, 4.6vw, 3.4rem); margin-top: 0.7rem; } .head p { color: var(--muted); margin: 0.8rem 0 0; max-width: 56ch; } @media (min-width: 860px) { .head.is-split { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; } .head.is-split .head-aside { text-align: right; max-width: 38ch; } .head.is-split p { margin-top: 0; } } .section-index { font-family: var(--mono); color: var(--faint); font-size: 0.72rem; letter-spacing: 0.16em; } /* ---- 12. Service command board ----------------------------- */ .svc-board { border-top: 1px solid var(--line-2); } .svc-row { display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center; gap: 1.4rem; padding: clamp(1.2rem, 2.6vw, 1.9rem) 0; border-bottom: 1px solid var(--line); position: relative; transition: padding-left 0.35s var(--ease), background 0.35s var(--ease); } .svc-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--signal); transform: scaleY(0); transform-origin: top; transition: transform 0.35s var(--ease); } .svc-row:hover { padding-left: 1.4rem; background: linear-gradient(90deg, rgba(255,106,26,0.06), transparent 60%); } .svc-row:hover::before { transform: scaleY(1); } .svc-row .svc-num { font-family: var(--mono); color: var(--signal); font-size: 0.92rem; letter-spacing: 0.08em; } .svc-row .svc-name { display: block; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1; color: var(--ink); transition: color 0.3s var(--ease); } .svc-row .svc-desc { display: block; color: var(--muted); margin: 0.35rem 0 0; font-size: 0.92rem; max-width: 60ch; } .svc-row .svc-go { width: 46px; height: 46px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--muted); transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); } .svc-row:hover .svc-go { background: var(--signal); color: #0b0d0e; border-color: var(--signal); transform: translateX(4px); } @media (max-width: 620px) { .svc-row { grid-template-columns: 3rem 1fr; } .svc-row .svc-go { display: none; } } /* ---- 13. Process flow -------------------------------------- */ .process { background: var(--panel); border-block: 1px solid var(--line); } .flow { display: grid; gap: 0; position: relative; counter-reset: step; } @media (min-width: 880px) { .flow { grid-template-columns: repeat(5, 1fr); } } .flow-step { padding: clamp(1.4rem,2.5vw,2rem) 1.3rem clamp(1.4rem,2.5vw,2rem) 0; border-bottom: 1px solid var(--line); position: relative; } @media (min-width: 880px) { .flow-step { border-bottom: none; border-left: 1px solid var(--line); padding-left: 1.3rem; } .flow-step:first-child { border-left: none; padding-left: 0; } } .flow-step .fs-num { font-family: var(--mono); color: var(--signal); font-size: 0.74rem; letter-spacing: 0.14em; display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; } .flow-step .fs-num::after { content: ""; flex: 1; height: 1px; background: var(--line-2); } .flow-step h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 1.35rem; margin-bottom: 0.5rem; } .flow-step p { color: var(--muted); font-size: 0.9rem; margin: 0; } /* ---- 14. Fleet accounts ------------------------------------ */ .fleet { background: var(--panel-2); border-block: 1px solid var(--line); } .fleet-grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; } @media (min-width: 880px) { .fleet-grid { grid-template-columns: 1.05fr 0.95fr; } } .fleet-figure { aspect-ratio: 4/3; } .fleet-benefits { list-style: none; margin: 1.4rem 0 1.8rem; padding: 0; display: grid; gap: 0; } .fleet-benefits li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; padding: 0.85rem 0; border-bottom: 1px solid var(--line); } .fleet-benefits li .bn { font-family: var(--mono); color: var(--signal); font-size: 0.72rem; padding-top: 0.2rem; } .fleet-benefits li b { font-weight: 600; } .fleet-benefits li span { display: block; color: var(--muted); font-size: 0.88rem; } /* ---- 15. Capability spotlight ------------------------------ */ .capability-grid { display: grid; gap: clamp(1.6rem,4vw,3rem); align-items: center; } @media (min-width: 880px) { .capability-grid { grid-template-columns: 1fr 1fr; } } .capability-figure { aspect-ratio: 3/4; } @media (min-width: 880px) { .capability-figure { aspect-ratio: 4/4.4; } } .spec-list { display: grid; gap: 0; margin: 1.4rem 0 1.8rem; border-top: 1px solid var(--line-2); } .spec-list div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); } .spec-list dt { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); padding-top: 0.2rem; } /* Let a long unbreakable value (e.g. the email address) wrap instead of forcing the 1fr value track wider than the mobile viewport. Without this its min-content blows out the area-grid column and overflows the page on mobile. */ .spec-list dd { margin: 0; font-size: 0.95rem; overflow-wrap: anywhere; } /* ---- 16. Service area -------------------------------------- */ .area-grid { display: grid; gap: clamp(1.6rem,4vw,3rem); } /* Grid items default to min-width:auto and won't shrink below their content's intrinsic width; min-width:0 lets the single mobile column fit the viewport. */ .area-grid > * { min-width: 0; } @media (min-width: 860px) { .area-grid { grid-template-columns: 1fr 1fr; } } .area-counties { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 1.6rem; } .county { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; padding: 0.45rem 0.8rem; border: 1px solid var(--line-2); color: var(--muted); transition: border-color 0.25s var(--ease), color 0.25s var(--ease); } .county:hover { border-color: var(--signal); color: var(--ink); } .county.is-base { background: var(--signal); color: #0b0d0e; border-color: var(--signal); } /* Styled map block */ .map-block { position: relative; aspect-ratio: 4/3; background: var(--panel); border: 1px solid var(--line-2); overflow: hidden; } .map-block svg { position: absolute; inset: 0; width: 100%; height: 100%; } .map-pin { position: absolute; top: 45%; left: 52%; transform: translate(-50%,-100%); text-align: center; } .map-pin .pin-dot { width: 16px; height: 16px; background: var(--signal); border: 3px solid var(--bg); border-radius: 50%; margin: 0 auto; box-shadow: 0 0 16px rgba(255,106,26,0.6); } .map-pin .pin-label { margin-top: 0.5rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--bg); border: 1px solid var(--line-2); color: var(--ink); padding: 0.3rem 0.6rem; display: inline-block; } .map-cap { position: absolute; left: 0.8rem; bottom: 0.8rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: rgba(11,13,14,0.8); border: 1px solid var(--line); padding: 0.35rem 0.6rem; } /* ---- 17. About / ownership --------------------------------- */ .about-grid { display: grid; gap: clamp(1.6rem,4vw,3rem); align-items: center; } @media (min-width: 880px) { .about-grid { grid-template-columns: 0.85fr 1.15fr; } } .about-figure { aspect-ratio: 4/5; max-width: 460px; } .values { display: grid; gap: 0; margin-top: 1.6rem; border-top: 1px solid var(--line-2); } @media (min-width: 680px) { .values { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } } .value { padding: 1.1rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; } .value .v-mark { color: var(--signal); font-family: var(--mono); font-size: 0.8rem; padding-top: 0.15rem; } .value h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 1.15rem; margin-bottom: 0.25rem; } .value p { margin: 0; color: var(--muted); font-size: 0.9rem; } /* ---- 18. Reviews ------------------------------------------- */ .reviews { background: var(--panel); border-block: 1px solid var(--line); } .review-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 820px) { .review-grid { grid-template-columns: repeat(3, 1fr); } } .review { background: var(--bg); padding: clamp(1.6rem,3vw,2.3rem); display: flex; flex-direction: column; } .review .r-mark { color: var(--signal); font-family: var(--display); font-size: 2.2rem; line-height: 0.5; height: 1.2rem; } .review blockquote { margin: 0 0 1.4rem; font-size: 1.05rem; color: var(--ink); } .review cite { font-style: normal; margin-top: auto; } .review cite b { display: block; font-weight: 600; } .review cite span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } /* ---- 19. Forms / service request --------------------------- */ .request-grid { display: grid; gap: clamp(1.6rem,4vw,3rem); } @media (min-width: 920px) { .request-grid { grid-template-columns: 0.85fr 1.15fr; } } .form { display: grid; gap: 1.1rem; } .field { display: grid; gap: 0.45rem; } .field label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .field label .req { color: var(--signal); } .field input, .field textarea, .field select { font-family: var(--body); font-size: 1rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line-2); padding: 0.75rem 0.85rem; } .field input::placeholder, .field textarea::placeholder { color: var(--faint); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--signal); } .field textarea { resize: vertical; min-height: 120px; } .field-row { display: grid; gap: 1.1rem; } @media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } } .field-row.is-3 { grid-template-columns: 1fr; } @media (min-width: 560px) { .field-row.is-3 { grid-template-columns: repeat(2, 1fr); } } .consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--muted); } .consent input { margin-top: 0.3rem; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note { font-size: 0.82rem; color: var(--faint); } .form-status { display: none; padding: 0.85rem 1rem; border: 1px solid var(--line-2); background: var(--panel-2); } .form-status.is-visible { display: block; } .form-status.is-ok { border-color: var(--ok); color: var(--ok); } .form-status.is-err { border-color: var(--signal); color: var(--signal); } /* urgent call panel */ .urgent-panel { border: 1px solid var(--line-2); background: var(--panel); padding: clamp(1.4rem,3vw,2rem); } .urgent-panel .up-num { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem,4vw,2.6rem); color: var(--ink); } .urgent-panel .up-num a:hover { color: var(--signal); } /* ---- 20. Page hero (inner) --------------------------------- */ .page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); padding-block: clamp(2.6rem, 6vw, 4.5rem); background: linear-gradient(180deg, rgba(255,106,26,0.06), transparent 60%), var(--bg); } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; opacity: 0.5; mask-image: linear-gradient(90deg, transparent, #000 80%); } .page-hero .wrap { position: relative; z-index: 1; } .page-hero h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 0.96; font-size: clamp(2.6rem, 7vw, 5rem); margin: 0.7rem 0 0.7rem; } .page-hero p { color: var(--muted); max-width: 56ch; margin: 0; } .breadcrumb { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } .breadcrumb a:hover { color: var(--signal); } /* ---- 21. Service detail (Services page) -------------------- */ .svc-detail { display: grid; gap: clamp(1.6rem,4vw,3rem); align-items: center; padding-block: clamp(2.4rem,5vw,4rem); border-bottom: 1px solid var(--line); } @media (min-width: 880px) { .svc-detail { grid-template-columns: 1fr 1fr; } .svc-detail.is-flip .svc-detail-figure { order: 2; } } .svc-detail-figure { aspect-ratio: 5/4; } .svc-detail h2 { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.8rem,3.6vw,2.7rem); margin: 0.6rem 0 0.8rem; } .checklist { list-style: none; margin: 1.2rem 0 1.6rem; padding: 0; display: grid; gap: 0; } .checklist li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); align-items: start; } .checklist li::before { content: ""; width: 9px; height: 9px; margin-top: 0.5rem; background: var(--signal); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .checklist li b { font-weight: 600; } .checklist li span { display: block; color: var(--muted); font-size: 0.88rem; } /* ---- 22. CTA band ------------------------------------------ */ .cta-band { background: var(--signal); color: #0b0d0e; border-block: 1px solid var(--signal); } .cta-band .wrap { display: grid; gap: 1.5rem; align-items: center; } @media (min-width: 820px) { .cta-band .wrap { grid-template-columns: 1fr auto; } } .cta-band h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 0.98; font-size: clamp(1.9rem,4.5vw,3.2rem); } .cta-band p { margin: 0.5rem 0 0; color: #2a1405; max-width: 50ch; font-weight: 500; } .cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; } .cta-band .btn { background: #0b0d0e; border-color: #0b0d0e; color: var(--ink); } .cta-band .btn:hover { background: var(--ink); color: #0b0d0e; border-color: var(--ink); } .cta-band .btn--ghost { background: transparent; color: #0b0d0e; border-color: rgba(11,13,14,0.4); } .cta-band .btn--ghost:hover { background: #0b0d0e; color: var(--ink); } /* ---- 23. Footer -------------------------------------------- */ .site-footer { background: #0a0c0d; color: var(--muted); border-top: 1px solid var(--line); } .footer-top { display: grid; gap: 2.4rem 3rem; padding-block: clamp(3rem,6vw,5rem) 2.4rem; } @media (min-width: 760px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } } .footer-brand .wordmark { margin-bottom: 1rem; } .footer-brand p { max-width: 34ch; font-size: 0.92rem; } .footer-col h4 { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; color: var(--signal); margin-bottom: 1rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.92rem; } .footer-col a:hover { color: var(--ink); } .footer-col address { font-style: normal; line-height: 1.8; font-size: 0.92rem; } .footer-col address a:hover { color: var(--signal); } .footer-hours li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); font-size: 0.84rem; } .footer-hours li.is-today { color: var(--ink); } .footer-hours li.is-today b { color: var(--signal); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; padding-block: 1.5rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--faint); } .footer-bottom a:hover { color: var(--ink); } .dev-note { color: var(--faint); } /* ---- 24. Utilities ----------------------------------------- */ .center { text-align: center; } .mt { margin-top: 1.4rem; } .measure { max-width: 62ch; } .flow-text > * + * { margin-top: 1rem; } .lede { font-size: clamp(1.05rem,1.6vw,1.22rem); color: var(--muted); } /* ---- 25. Reduced motion ------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal, .slide-left, .slide-right { opacity: 1; transform: none; } .mask img { transform: none; } .mask::after { transform: scaleX(0); } .status .dot { animation: none; } }