/* ───────────────────────────────────────────────────────────── Heavyweight Heroes — Production styles (refined design) Mobile-first base; desktop layered on at min-width: 760px. ───────────────────────────────────────────────────────────── */ html, body { overflow-x: clip; max-width: 100vw; } :root { --ink: #222422; --white: #FFFFFF; --font-display: 'Zilla Slab', Georgia, serif; --font-body: 'Barlow', system-ui, sans-serif; --bg: #141613; --bg-2: #0E0F0D; --bg-3: #08090A; --surface: #1D1F1C; --surface-2: #242622; --hairline: #353733; --hairline-2: #454741; --tx-hint: #6C6E68; --tx-secondary: #9A9C95; --tx-body: #D2D4CE; --tx-strong: #F6F7F3; --shade-rgb: 20, 22, 19; --accent: #E8A23F; } /* bridge selectors — production toggles data-theme on , prototype used a class on the site root */ html[data-theme="light"] .hh-site { --bg: #F6F7F3; --bg-2: #EDEEE9; --bg-3: #E4E5DF; --surface: #FFFFFF; --surface-2: #F0F1EC; --hairline: #D7D9D3; --hairline-2: #B5B7B0; --tx-hint: #9A9C95; --tx-secondary: #6C6E68; --tx-body: #353733; --tx-strong: #141613; --shade-rgb: 246, 247, 243; } .theme-light { --bg: #F6F7F3; --bg-2: #EDEEE9; --bg-3: #E4E5DF; --surface: #FFFFFF; --surface-2: #F0F1EC; --hairline: #D7D9D3; --hairline-2: #B5B7B0; --tx-hint: #9A9C95; --tx-secondary: #6C6E68; --tx-body: #353733; --tx-strong: #141613; --shade-rgb: 246, 247, 243; } /* theme button — show only the relevant icon */ .hh-site .nav .theme-btn .theme-icon { width: 14px; height: 14px; } .hh-site .nav .theme-btn .icon-sun { display: block; } .hh-site .nav .theme-btn .icon-moon { display: none; } html[data-theme="light"] .hh-site .nav .theme-btn .icon-sun { display: none; } html[data-theme="light"] .hh-site .nav .theme-btn .icon-moon { display: block; } /* body class theme support — match data-theme on html for backward-compat */ html[data-theme="light"] .hh-site, html[data-theme="light"] body.hh-site { /* alias */ } /* ─── Site root ─── */ .hh-site { background: var(--bg); color: var(--tx-body); font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; position: relative; -webkit-font-smoothing: antialiased; width: 100%; min-height: 100%; isolation: isolate; } .hh-site * { box-sizing: border-box; } .hh-site h1, .hh-site h2, .hh-site h3, .hh-site h4 { font-family: var(--font-display); color: var(--tx-strong); margin: 0; font-weight: 700; text-transform: uppercase; line-height: 1.0; } .hh-site p { margin: 0; } .hh-site a { color: inherit; text-decoration: none; } .hh-site button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* shared atoms */ .hh-site .wrap { padding: 0 24px; max-width: 1180px; margin: 0 auto; } .hh-site .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-secondary); } .hh-site .num { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--tx-hint); letter-spacing: 0.1em; } .hh-site .hazard { height: 6px; background: repeating-linear-gradient(135deg, var(--hairline-2) 0 14px, transparent 14px 28px); } /* ─── NAV (top bar) ─── */ .hh-site .nav { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; /* Background fills full viewport width; contents align with the body's 1180px wrap. Using 100% (not 100vw) so the calc accounts for scrollbar width. */ padding-top: 16px; padding-bottom: 16px; padding-left: max(24px, calc((100% - 1180px) / 2)); padding-right: max(24px, calc((100% - 1180px) / 2)); background: rgba(var(--shade-rgb), 0.62); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); font-size: 11px; color: var(--tx-secondary); } .hh-site .nav::after { /* hairline at the bottom of the nav — visible only when content is BEHIND the nav */ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hairline); opacity: 0.6; pointer-events: none; } .hh-site .nav.with-status-padding { /* used when mounted inside iOS frame — clears the status bar */ padding-top: 60px; } .hh-site .nav .logo { display: inline-flex; align-items: center; gap: 8px; color: var(--tx-strong); } .hh-site .nav .logo svg { width: 78px; height: auto; display: block; color: var(--tx-strong); } .hh-site .nav .navlinks { display: none; } .hh-site .nav .nav-cta-btn { display: none; } .hh-site .nav .menu { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; color: var(--tx-strong); transition: background .15s, border-color .15s; } .hh-site .nav .menu:active { background: var(--surface-2); } .hh-site .nav .menu-bars { display: flex; flex-direction: column; align-items: center; justify-content: center; } .hh-site .nav .menu-bars .bar { display: block; width: 16px; height: 1.5px; background: currentColor; margin: 2px 0; border-radius: 1px; } /* hide theme button in nav on mobile — the drawer has the toggle */ .hh-site .nav .theme-btn { display: none; } /* ─── Buttons ─── */ .hh-site .btn { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px; padding: 14px 22px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; width: 100%; } .hh-site .btn-primary { background: var(--tx-strong); color: var(--ink); } .hh-site.theme-light .btn-primary { background: var(--ink); color: var(--white); } .hh-site .btn-primary:hover { box-shadow: 0 6px 20px -8px rgba(0,0,0,0.45); } .hh-site .btn-primary:active { transform: translateY(1px); } .hh-site .btn-ghost { background: transparent; color: var(--tx-strong); border-color: var(--hairline-2); } .hh-site .btn-ghost:hover { background: var(--surface); border-color: var(--tx-secondary); } .hh-site .btn-ghost:active { background: var(--surface-2); } /* ─── HERO ─── */ .hh-site .hero { position: relative; min-height: 720px; margin-top: -82px; overflow: hidden; display: flex; flex-direction: column; isolation: isolate; } .hh-site .hero-img { position: absolute; inset: 0; z-index: 0; background-image: url('images/hero2.webp'); background-size: cover; background-position: 60% center; filter: grayscale(0.18) contrast(1.05) brightness(0.78); transform: scale(1.05); } .hh-site .hero-tint { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,12,9,0.85) 0%, rgba(10,12,9,0.55) 22%, rgba(10,12,9,0.55) 45%, rgba(10,12,9,0.82) 70%, rgba(10,12,9,0.97) 100%); } /* dedicated darker gradient at the bottom of the hero so headline/body stays readable over the lighter, sun-lit parts of the photo (esp. mobile) */ .hh-site .hero-tint-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 1; background: linear-gradient(180deg, transparent 0%, rgba(8,10,7,0.55) 35%, rgba(8,10,7,0.92) 80%, rgba(8,10,7,0.98) 100%); pointer-events: none; } /* LIGHT MODE: invert the overlays to white wash so the hero matches the page */ .hh-site.theme-light .hero-img { filter: grayscale(0.05) contrast(1.0) brightness(1.0); } .hh-site.theme-light .hero-tint { background: linear-gradient(180deg, rgba(246,247,243,0.70) 0%, rgba(246,247,243,0.30) 22%, rgba(246,247,243,0.25) 45%, rgba(246,247,243,0.65) 70%, rgba(246,247,243,0.92) 100%); } .hh-site.theme-light .hero-tint-bottom { background: linear-gradient(180deg, transparent 0%, rgba(246,247,243,0.55) 35%, rgba(246,247,243,0.90) 80%, rgba(246,247,243,0.98) 100%); } /* hero content text — stays LIGHT in both themes because the photo + tint behind it are always dark. Dark text on a dark photo would be unreadable; light text on dark photo works in both modes. */ html[data-theme="light"] .hh-site .hero-cta .btn-primary { background: var(--ink); color: var(--white); } .hh-site.theme-light .hero-cta .btn-ghost { color: var(--ink); border-color: rgba(20,22,19,0.30); } .hh-site.theme-light .hero-cta .btn-ghost:hover { background: rgba(20,22,19,0.06); border-color: rgba(20,22,19,0.50); } /* hero-shops in light mode — also invert */ .hh-site.theme-light .hero-shops-wrap { background: rgba(246,247,243,0.94); border-top-color: rgba(20,22,19,0.10); } .hh-site.theme-light .hero-shops a, .hh-site.theme-light .hero-shops .item-meta { color: var(--tx-strong); border-color: rgba(20,22,19,0.06) !important; } .hh-site.theme-light .hero-shops > :not(:first-child) { border-left-color: rgba(20,22,19,0.08); } .hh-site.theme-light .hero-shops > :nth-child(odd) { border-right-color: rgba(20,22,19,0.08); } .hh-site.theme-light .hero-shops .lbl { color: rgba(20,22,19,0.55); } .hh-site.theme-light .hero-shops .item-meta { color: rgba(20,22,19,0.75); } .hh-site.theme-light .hero-shops .item-meta b { color: var(--tx-strong); } .hh-site .hero-grain { position: absolute; inset: 0; z-index: 2; background-image: radial-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), radial-gradient(rgba(0,0,0,0.07) 1px, transparent 1px); background-size: 3px 3px, 5px 5px; background-position: 0 0, 1px 2px; pointer-events: none; mix-blend-mode: overlay; opacity: 0.45; } .hh-site .hero-content-wrap { position: relative; z-index: 3; padding: 130px 24px 64px; color: #F6F7F3; } .hh-site .hero-shops-wrap { margin-top: auto; /* pins to bottom of the hero flex column */ } .hh-site .hero-content { max-width: 1180px; margin: 0 auto; } .hh-site .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246,247,243,0.85); padding: 8px 13px; border: 1px solid rgba(246,247,243,0.18); border-radius: 999px; margin-bottom: 28px; background: rgba(10,12,9,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hh-site .hero-eyebrow .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } .hh-site .hero h1 { font-size: 44px; line-height: 1.0; letter-spacing: 0.005em; color: #F6F7F3; text-shadow: 0 2px 30px rgba(0,0,0,0.4); margin-bottom: 26px; } .hh-site .hero h1 em { font-style: normal; color: var(--accent); font-weight: 700; } .hh-site .hero-tag { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: rgba(246,247,243,0.95); margin-bottom: 18px; letter-spacing: 0.01em; text-shadow: 0 1px 12px rgba(0,0,0,0.5); } .hh-site .hero-sub { font-size: 14.5px; line-height: 1.6; color: rgba(246,247,243,0.88); margin-bottom: 32px; max-width: 36ch; text-shadow: 0 1px 12px rgba(0,0,0,0.5); } .hh-site .hero-cta { display: flex; flex-direction: column; gap: 10px; max-width: 360px; } .hh-site .hero-cta .btn-ghost { border-color: rgba(246,247,243,0.28); color: #F6F7F3; } .hh-site .hero-cta .btn-ghost:hover { background: rgba(246,247,243,0.06); border-color: rgba(246,247,243,0.45); } .hh-site .hero-cta .btn-ghost:active { background: rgba(246,247,243,0.10); } .hh-site .hero-cta .btn-primary { background: #F6F7F3; color: #141613; } /* ─── HERO IMAGE CARD ─────────────────────────────────────── Interactive, tilted, floating photo card. On mobile it sits below the CTA buttons; on desktop (see min-width:960px block) it moves opposite the text. Tilt + hover live on the ; the float bob lives on .hero-card-inner so the two transforms never fight each other. */ .hh-site .hero-card { display: block; position: relative; width: 100%; max-width: 280px; margin: 40px 0 0; transform: rotate(-3deg); transition: transform .55s cubic-bezier(.22,1,.36,1); -webkit-tap-highlight-color: transparent; } .hh-site .hero-card:hover { transform: rotate(0deg) scale(1.02); } /* soft accent halo behind the card */ .hh-site .hero-card-glow { position: absolute; inset: -10% -8% -14% -8%; z-index: 0; background: radial-gradient(60% 60% at 50% 40%, rgba(232,162,63,0.35), transparent 70%); filter: blur(28px); opacity: 0.6; transition: opacity .55s ease; pointer-events: none; } .hh-site .hero-card:hover .hero-card-glow { opacity: 0.95; } .hh-site .hero-card-inner { position: relative; z-index: 1; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; /* more squared than the source 16:9; crops the sides slightly */ border: 1px solid rgba(246,247,243,0.16); box-shadow: 0 28px 60px -24px rgba(0,0,0,0.75), 0 6px 18px -8px rgba(0,0,0,0.55); animation: heroCardFloat 6.5s ease-in-out infinite; will-change: transform; } .hh-site .hero-card-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% center; display: block; filter: saturate(1.02) contrast(1.02); } /* diagonal sheen that sweeps across on hover */ .hh-site .hero-card-shine { position: absolute; inset: 0; z-index: 2; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 46%, rgba(255,255,255,0.04) 52%, transparent 60%); transform: translateX(-120%); transition: transform .8s cubic-bezier(.22,1,.36,1); pointer-events: none; } .hh-site .hero-card:hover .hero-card-shine { transform: translateX(120%); } /* little "In the field" chip in the corner */ .hh-site .hero-card-tag { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font-weight: 600; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #F6F7F3; background: rgba(10,12,9,0.55); border: 1px solid rgba(246,247,243,0.16); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hh-site .hero-card-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } @keyframes heroCardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @media (prefers-reduced-motion: reduce) { .hh-site .hero-card-inner { animation: none; } .hh-site .hero-card { transition: none; } } /* Desktop: text and card sit side-by-side. Below 960px the card just stacks under the buttons (centered), so this only kicks in when there's real room. */ @media (min-width: 960px) { .hh-site .hero-content { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 56px; } .hh-site .hero-card { margin: 0; max-width: 380px; justify-self: end; transform: rotate(-4deg) translateY(8px); } .hh-site .hero-card:hover { transform: rotate(0deg) scale(1.02) translateY(0); } } @media (min-width: 1180px) { .hh-site .hero-card { max-width: 410px; } } /* hero shop strip */ .hh-site .hero-shops-wrap { position: relative; z-index: 3; background: rgba(14,15,13,0.92); border-top: 1px solid rgba(246,247,243,0.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-top: auto; } .hh-site .hero-shops { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1180px; margin: 0 auto; } .hh-site .hero-shops a, .hh-site .hero-shops .item-meta { padding: 16px 22px; display: flex; flex-direction: column; gap: 4px; text-align: left; color: #F6F7F3; min-height: 72px; justify-content: center; box-sizing: border-box; border-top: 1px solid rgba(246,247,243,0.06); transition: background .15s; } /* Phone-tile anchors: keep the N/S label inline with the number, not stacked above. Use center alignment (not baseline) so the row sits at the same vertical midpoint as the .item-meta cells next to it. */ .hh-site .hero-shops a { flex-direction: row; align-items: center; gap: 10px; } /* clear the unwanted border on row-1 cells */ .hh-site .hero-shops > :nth-child(1), .hh-site .hero-shops > :nth-child(2) { border-top: 0; } /* column divider lines */ .hh-site .hero-shops > :nth-child(odd) { border-right: 1px solid rgba(246,247,243,0.06); } .hh-site .hero-shops a:hover { background: rgba(246,247,243,0.04); } .hh-site .hero-shops a:active { background: rgba(246,247,243,0.06); } .hh-site .hero-shops .lbl { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246,247,243,0.55); font-weight: 600; } .hh-site .hero-shops .num-big { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: 0.01em; } /* shared style for the meta items (Red Seal, 1-year) — both mobile + desktop */ .hh-site .hero-shops .item-meta { flex-direction: row; align-items: center; justify-content: flex-start; /* match phone-tile left alignment (overrides shared rule's center) */ gap: 12px; color: rgba(246,247,243,0.86); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.35; } .hh-site .hero-shops .item-meta b { color: rgba(246,247,243,1); font-weight: 700; } /* ─── Section frame ─── */ .hh-site .sec { padding: 72px 0; border-bottom: 1px solid var(--hairline); position: relative; } .hh-site .sec-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .hh-site .sec-head { margin-bottom: 40px; } .hh-site .sec-head .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hh-site .sec-head h2 { font-size: 34px; letter-spacing: 0.01em; margin-bottom: 16px; line-height: 1.02; } .hh-site .sec-head p { color: var(--tx-secondary); font-size: 14.5px; line-height: 1.6; max-width: 60ch; margin-top: 4px; } /* ─── Services pillars ─── */ .hh-site .pillar-switch { display: flex; gap: 4px; margin-bottom: 20px; padding: 4px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); } .hh-site .pillar-switch button { flex: 1; padding: 12px 8px; border-radius: 9px; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; color: var(--tx-secondary); transition: background .15s, color .15s; } .hh-site .pillar-switch button.on { background: var(--bg-2); color: var(--tx-strong); box-shadow: inset 0 0 0 1px var(--hairline-2); } .hh-site .pillars { display: grid; grid-template-columns: 1fr; gap: 20px; } /* mobile: hide the inactive pillar */ .hh-site .pillar-slot[data-active="false"] { display: none; } .hh-site .pillar { position: relative; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--hairline); display: flex; flex-direction: column; height: 100%; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .hh-site .pillar:hover { border-color: var(--hairline-2); transform: translateY(-3px); box-shadow: 0 14px 36px -12px rgba(0,0,0,0.5); } .hh-site .pillar-photo { position: relative; height: 300px; overflow: hidden; isolation: isolate; /* new stacking context — keeps gradient+title+image in same compositor */ transform: translateZ(0); /* promote to its own compositor layer */ } .hh-site .pillar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Hover zoom removed — caused a bottom-edge flicker. Hover effect now lives on the pillar itself (lift + shadow + border-color), which is enough polish on its own. */ .hh-site .pillar-photo::after { content: ''; position: absolute; inset: 0; /* Solid by ~88% so the photo can't bleed through near the bottom edge. Bottom color matches .pillar-body bg exactly so the seam is invisible. */ background: linear-gradient(180deg, rgba(14,15,13,0.22) 0%, rgba(14,15,13,0.0) 28%, rgba(14,15,13,0.85) 78%, rgba(14,15,13,1) 92%, rgba(14,15,13,1) 100%); pointer-events: none; } /* light-mode: ramps to solid white at bottom */ html[data-theme="light"] .hh-site .pillar-photo::after { background: linear-gradient(180deg, rgba(20,22,19,0.20) 0%, rgba(20,22,19,0.0) 28%, rgba(255,255,255,0.75) 78%, rgba(255,255,255,1) 92%, rgba(255,255,255,1) 100%); } .hh-site .pillar-stamp { position: absolute; top: 18px; left: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #F6F7F3; background: rgba(8,9,10,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(246,247,243,0.18); border-radius: 999px; } .hh-site .pillar-stamp .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .hh-site .pillar-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 24px 22px; z-index: 2; color: #F6F7F3; } .hh-site .pillar-title h3 { font-size: 28px; letter-spacing: 0.005em; margin-bottom: 6px; color: #F6F7F3; } .hh-site .pillar-title .kic { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246,247,243,0.65); font-weight: 600; } /* Light-mode: gradient now fades to white at bottom of photo, so titles flip to dark for contrast. */ html[data-theme="light"] .hh-site .pillar-title { color: var(--ink); } html[data-theme="light"] .hh-site .pillar-title h3 { color: var(--ink); } html[data-theme="light"] .hh-site .pillar-title .kic { color: rgba(20,22,19,0.65); } .hh-site .pillar-body { padding: 26px 24px 28px; flex: 1; display: flex; flex-direction: column; margin-top: -1px; /* close the 1px sub-pixel seam between photo and body that flickers on hover */ background: rgb(14,15,13); /* matches the pillar-photo gradient's solid bottom — invisible seam */ transition: box-shadow .25s ease; } html[data-theme="light"] .hh-site .pillar-body { background: rgb(255,255,255); } /* Hover bg-feel — uses an inset box-shadow (subtle tint overlay) instead of changing background-color, so the photo→body seam color match isn't broken. In LIGHT mode we skip the inset overlay (would darken body to off-white, creating a visible seam with the pure-white gradient bottom). The drop shadow under the lifted card already provides hover feedback in light mode. */ .hh-site .pillar:hover .pillar-body { box-shadow: inset 0 0 0 100vh rgba(255,255,255,0.035); } html[data-theme="light"] .hh-site .pillar:hover .pillar-body { box-shadow: none; } .hh-site .pillar-body p { font-size: 14.5px; color: var(--tx-body); line-height: 1.65; margin-bottom: 36px; } .hh-site .pillar-taglist { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; /* pin tags to the bottom of the card */ } .hh-site .pillar-slot { display: flex; } .hh-site .pillar-slot > .pillar { flex: 1; } .hh-site .tag { font-size: 11.5px; font-weight: 500; color: var(--tx-body); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 7px; padding: 6px 11px; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; cursor: default; } .hh-site .tag:hover { background: var(--bg); border-color: var(--tx-secondary); color: var(--tx-strong); transform: translateY(-1px); } /* ─── Why us numbered grid ─── */ /* Mobile (< 760px): horizontal scroll-snap carousel. Cards take ~78% of the viewport so the next one peeks at the right edge as a visual cue that the row is swipeable. The container bleeds past the section's 24px padding so the strip feels edge-to-edge. */ .hh-site .caps { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 24px; scroll-padding-right: 24px; padding: 4px 24px 18px; margin: 0 -24px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .hh-site .caps::-webkit-scrollbar { display: none; } .hh-site .caps .cap { flex: 0 0 78%; scroll-snap-align: start; min-height: 100%; } /* Mobile-only prev/next controls for the .caps carousel. */ .hh-site .caps-nav { display: flex; gap: 10px; justify-content: flex-start; margin-top: 16px; } .hh-site .caps-nav-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--tx-secondary); cursor: pointer; transition: color .15s, background .15s, border-color .15s, opacity .15s; } .hh-site .caps-nav-btn:hover { color: var(--tx-strong); border-color: var(--hairline-2); } .hh-site .caps-nav-btn:active { background: var(--surface-2); } .hh-site .caps-nav-btn[disabled] { opacity: 0.3; cursor: default; } .hh-site .cap { padding: 22px 20px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); position: relative; overflow: hidden; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease; } .hh-site .cap:hover { border-color: var(--hairline-2); transform: translateY(-2px); background: var(--surface-2); box-shadow: 0 6px 18px -6px rgba(0,0,0,0.4); } .hh-site .cap .cnum { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--tx-hint); margin-bottom: 14px; display: block; } .hh-site .cap h4 { font-size: 15.5px; margin-bottom: 8px; line-height: 1.15; } .hh-site .cap p { font-size: 13px; color: var(--tx-secondary); line-height: 1.55; } /* ─── Diesel band ─── */ .hh-site .diesel { position: relative; padding: 72px 0; border-bottom: 1px solid var(--hairline); background: var(--bg-2); overflow: hidden; isolation: isolate; } .hh-site .diesel-photo { position: absolute; inset: 0; z-index: 0; background-image: url('images/heavy.jpg'); background-size: cover; background-position: 40% center; filter: grayscale(0.85) contrast(1.2) brightness(0.45); opacity: 0.55; } .hh-site .diesel-tint { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14,15,13,0.55), rgba(14,15,13,0.78)), radial-gradient(circle at 30% 30%, rgba(232,162,63,0.06), transparent 60%); } /* LIGHT MODE: keep the image visible, use a translucent white wash instead of black */ .hh-site.theme-light .diesel-photo { filter: grayscale(0.6) contrast(1.05) brightness(1.05); opacity: 0.55; } .hh-site.theme-light .diesel-tint { background: linear-gradient(180deg, rgba(246,247,243,0.55), rgba(246,247,243,0.72)), radial-gradient(circle at 30% 30%, rgba(232,162,63,0.06), transparent 60%); } .hh-site .diesel-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 32px; } .hh-site .diesel-text { flex: 1 1 auto; min-width: 0; } .hh-site .diesel h2 { font-size: 38px; line-height: 1.0; margin-bottom: 18px; } .hh-site .diesel p { color: var(--tx-body); font-size: 15px; line-height: 1.6; max-width: 32ch; } .hh-site .diesel-stamp { display: inline-flex; flex-direction: column; align-items: center; padding: 22px 28px; border: 2px solid var(--hairline-2); border-radius: 12px; text-align: center; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 17px; color: var(--tx-strong); letter-spacing: 0.02em; line-height: 1.15; background: rgba(14,15,13,0.4); animation: stamp-pulse 3.5s ease-in-out infinite; align-self: flex-start; } .hh-site.theme-light .diesel-stamp { background: rgba(246,247,243,0.4); } /* Abbreviation rows: keep each pair (DPF · DEF, EGR · SCR) intact on one line. */ .hh-site .diesel-stamp .stamp-line { display: block; white-space: nowrap; } .hh-site .diesel-stamp span:not(.stamp-line) { font-family: var(--font-body); font-weight: 600; font-size: 10.5px; letter-spacing: 0.18em; color: var(--tx-secondary); margin-top: 10px; white-space: normal; } @keyframes stamp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(246,247,243,0); border-color: var(--hairline-2); } 50% { box-shadow: 0 0 36px -2px rgba(246,247,243,0.28), inset 0 0 14px rgba(246,247,243,0.05); border-color: var(--tx-secondary); } } /* In light mode, glow uses dark rgba so it actually shows against the light bg */ html[data-theme="light"] .hh-site .diesel-stamp { animation-name: stamp-pulse-light; } @keyframes stamp-pulse-light { 0%, 100% { box-shadow: 0 0 0 0 rgba(20,22,19,0); border-color: var(--hairline-2); } 50% { box-shadow: 0 0 32px -2px rgba(20,22,19,0.22); border-color: var(--tx-secondary); } } @media (prefers-reduced-motion: reduce) { .hh-site .diesel-stamp { animation: none; } } /* ─── Systems specialty (Electrical + Hydraulic) ─── */ .hh-site .systems { padding: 56px 0; border-bottom: 1px solid var(--hairline); } .hh-site .systems-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .hh-site .systems-head { margin-bottom: 28px; } .hh-site .systems-head h2 { font-size: 34px; line-height: 1.05; margin-bottom: 10px; } .hh-site .systems-head p { color: var(--tx-secondary); font-size: 14px; line-height: 1.55; max-width: 44ch; } .hh-site .systems-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .hh-site .sys-card { position: relative; border: 1px solid var(--hairline); border-radius: 12px; background-color: var(--surface); background-size: cover; background-position: center; min-height: 240px; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .hh-site .sys-card::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(14,15,13,0.30) 0%, rgba(14,15,13,0.88) 78%); } .hh-site.theme-light .sys-card::before, html[data-theme="light"] .hh-site .sys-card::before { background: linear-gradient(180deg, rgba(246,247,243,0.30) 0%, rgba(246,247,243,0.86) 78%); } .hh-site .sys-card:hover { border-color: var(--hairline-2); transform: translateY(-2px); box-shadow: 0 10px 28px -6px rgba(0,0,0,0.45); } .hh-site .sys-card--electrical { background-image: url('images/electrical.webp'); } .hh-site .sys-card--hydraulic { background-image: url('images/hydraulic.webp'); } .hh-site .sys-card--airconditioning { background-image: url('images/airconditioning.webp'); } .hh-site .sys-card-content { position: relative; z-index: 1; padding: 24px 22px; } .hh-site .sys-tag { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.10em; color: var(--accent, #E8A23F); margin-bottom: 12px; } .hh-site .sys-card h3 { font-size: 18px; margin-bottom: 8px; line-height: 1.2; color: var(--tx-strong); } .hh-site .sys-card p { font-size: 13.5px; color: var(--tx-body); line-height: 1.55; } /* ─── Locations ─── */ .hh-site .locs { display: grid; grid-template-columns: 1fr; gap: 16px; } .hh-site .loc { border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; } .hh-site .loc:hover { border-color: var(--hairline-2); box-shadow: 0 10px 24px -10px rgba(0,0,0,0.5); } .hh-site .loc-head { position: relative; height: 140px; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--hairline); display: flex; align-items: flex-end; padding: 16px 20px; } .hh-site .loc-head .map-stripes { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, var(--hairline-2) 0 1px, transparent 1px 24px), repeating-linear-gradient(45deg, var(--hairline) 0 1px, transparent 1px 24px); opacity: 0.55; } .hh-site .loc-head .map-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(232,162,63,0.22), 0 0 0 12px rgba(232,162,63,0.10); } .hh-site .loc-head .map-dot.s { left: 44%; top: 40%; } .hh-site .loc-head .map-dot.n { left: 56%; top: 60%; } .hh-site .loc-head .badge { position: relative; z-index: 2; font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); background: var(--tx-strong); border-radius: 999px; padding: 5px 11px; } .hh-site.theme-light .loc-head .badge { color: var(--white); } /* Interactive variant — South card map is a link to Google Maps */ .hh-site .loc-head-link { text-decoration: none; cursor: pointer; transition: background .2s ease; } .hh-site .loc-head-link:hover { background: var(--surface); } .hh-site .loc-head-link:hover .map-dot { transform: scale(1.12); } .hh-site .loc-head .map-dot { transition: transform .2s ease; } .hh-site .loc-head .map-open-hint { position: absolute; top: 12px; right: 12px; z-index: 3; font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-strong); background: rgba(20,22,19,0.72); border: 1px solid var(--hairline); border-radius: 999px; padding: 5px 10px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .2s ease, border-color .2s ease; } .hh-site .loc-head-link:hover .map-open-hint, .hh-site .loc-head-link:focus-visible .map-open-hint { background: var(--accent); color: var(--ink); border-color: var(--accent); } html[data-theme="light"] .hh-site .loc-head .map-open-hint { color: var(--ink); background: rgba(255,255,255,0.85); border-color: rgba(20,22,19,0.18); } .hh-site .loc-body { padding: 24px 22px 26px; } .hh-site .loc h3 { font-size: 22px; margin-bottom: 16px; line-height: 1.1; } .hh-site .loc .row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--hairline); font-size: 13.5px; color: var(--tx-body); line-height: 1.55; } .hh-site .loc .row .ri { color: var(--tx-hint); flex-shrink: 0; font-size: 14px; width: 18px; display: inline-flex; justify-content: center; } .hh-site .loc .row .todo { color: var(--tx-hint); font-style: italic; } .hh-site .loc .ph { color: var(--tx-strong); font-weight: 500; font-family: var(--font-display); font-size: 17px; } .hh-site .loc .row.tap { cursor: pointer; transition: color .15s; } .hh-site .loc .row.tap:hover .ph { color: var(--accent); } /* Email rows: prevent the long address from wrapping mid-string. Allow the flex item to shrink and ellipsize when the card is narrow. */ .hh-site .loc .row.tap[href^="mailto:"] { min-width: 0; } .hh-site .loc .row.tap[href^="mailto:"] .ph { font-family: var(--font-body); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } /* ─── FAQ ─── */ .hh-site .faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 880px; } .hh-site .faq-item { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; transition: border-color .25s, background .25s; } .hh-site .faq-item:hover { border-color: var(--hairline-2); } .hh-site .faq-item.open { border-color: var(--hairline-2); } .hh-site .faq-summary { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 0.02em; color: var(--tx-strong); padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; text-align: left; line-height: 1.25; } /* CSS-drawn "+" icon — two bars that rotate to form "×" when open. Smooth, no content swap. */ .hh-site .faq-summary::after { content: ''; display: block; flex-shrink: 0; width: 16px; height: 16px; background: linear-gradient(currentColor, currentColor) center/16px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center/1.6px 16px no-repeat; color: var(--tx-secondary); transition: transform .35s cubic-bezier(.4, 0, .2, 1), color .2s ease; } .hh-site .faq-item.open .faq-summary::after { transform: rotate(135deg); /* + rotates to × */ color: var(--tx-strong); } /* Smooth height animation via max-height with ease-out timing. Generous 600px ceiling handles any answer length; ease-out hides the end "snap" so the reveal feels fluid rather than choppy. */ .hh-site .faq-detail { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.22, 1, .36, 1); } .hh-site .faq-item.open .faq-detail { max-height: 600px; } .hh-site .faq-detail-inner { opacity: 0; transform: translateY(-4px); transition: opacity .25s ease .05s, transform .3s cubic-bezier(.22, 1, .36, 1) .05s; } .hh-site .faq-item.open .faq-detail-inner { opacity: 1; transform: none; } .hh-site .faq-detail-inner { padding: 4px 22px 22px; color: var(--tx-body); font-size: 14px; line-height: 1.65; } /* ─── Contact ─── */ .hh-site .quote-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; } .hh-site .quote h2 { font-size: 34px; margin-bottom: 14px; line-height: 1.02; } .hh-site .quote .lead { color: var(--tx-body); margin: 0 0 12px; font-size: 14.5px; max-width: 40ch; line-height: 1.6; } /* The Get a Quote head sits directly above the .qlist contact rows, so the global 40/64px sec-head bottom gap is way too much here — tighten it. */ .hh-site .quote .sec-head { margin-bottom: 20px; } .hh-site .qlist { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } .hh-site .qlist .qrow { display: flex; gap: 14px; align-items: center; font-size: 14.5px; color: var(--tx-body); line-height: 1.5; } .hh-site .qlist .qrow .ri { color: var(--tx-hint); width: 18px; display: inline-flex; justify-content: center; } .hh-site .qlist .qrow a { border-bottom: 1px solid transparent; transition: border-color .15s, color .15s; } .hh-site .qlist .qrow a:hover { color: var(--tx-strong); border-bottom-color: var(--hairline-2); } /* Email rows in the contact list: keep the whole line on one row. The prefix + email shrink together; if it ever overflows, ellipsize. */ .hh-site .qlist .qrow:has(a[href^="mailto:"]) { min-width: 0; } .hh-site .qlist .qrow:has(a[href^="mailto:"]) > span:not(.ri) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } /* Shrink email rows on mobile so the full address fits without truncating. */ @media (max-width: 759px) { .hh-site .qlist .qrow:has(a[href^="mailto:"]) { font-size: 12.5px; } } /* On very narrow phones (<375px), shrink email text across the location cards, the contact list, and the mobile drawer so the long addresses don't get clipped. Footer emails are exempt — they sit in a stacked column at full viewport width, so they can match the phone size above them instead. */ @media (max-width: 374px) { .hh-site .loc .row.tap[href^="mailto:"] .ph, .hh-site .qlist .qrow:has(a[href^="mailto:"]), .hh-site .drawer-contact a[href^="mailto:"] { font-size: 11px; } .hh-site .foot-col a[href^="mailto:"] { font-size: 13.5px; letter-spacing: 0; } /* Hero-shops phone tiles: shrink the number so N/S + phone fit on one line. */ .hh-site .hero-shops .num-big { font-size: 14px; } .hh-site .hero-shops a { gap: 6px; padding-left: 14px; padding-right: 14px; } } /* Center all 4 hero-shops cells (phone tiles + meta items) below 760px so the grid feels uniform on mobile. */ @media (max-width: 759px) { .hh-site .hero-shops a, .hh-site .hero-shops .item-meta { justify-content: center; text-align: center; } } .hh-site .form { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 26px 22px; } .hh-site .form label { display: block; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-secondary); font-weight: 700; margin-bottom: 8px; } .hh-site .form .field { margin-bottom: 16px; } .hh-site .form .field.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 0; align-items: end; /* inputs align at bottom even when one label wraps to 2 lines */ } .hh-site .form .field.row > div { margin-bottom: 16px; position: relative; } /* In the side-by-side rows (name/phone, region/equipment) the error text is taken out of flow so it can't add height to one cell and knock the two inputs out of vertical alignment. It floats just below its own input. */ .hh-site .form .field.row .errtext { position: absolute; top: 100%; left: 0; margin-top: 4px; } /* Honeypot — hidden anti-bot field, never visible to humans */ .hh-site .form .hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } .hh-site .form input, .hh-site .form select, .hh-site .form textarea { width: 100%; background: var(--bg); border: 1px solid var(--hairline-2); border-radius: 9px; padding: 12px 14px; color: var(--tx-strong); font-family: var(--font-body); font-size: 14.5px; outline: none; transition: border-color .15s, background .15s; } .hh-site .form input::placeholder, .hh-site .form textarea::placeholder { color: var(--tx-hint); } .hh-site .form input:focus, .hh-site .form select:focus, .hh-site .form textarea:focus { border-color: var(--tx-secondary); } .hh-site .form input.err, .hh-site .form textarea.err { border-color: #C4633F; } .hh-site .form .errtext { display: block; margin-top: 5px; font-size: 11px; color: #D2876A; letter-spacing: 0.04em; } .hh-site .form textarea { resize: vertical; min-height: 104px; } .hh-site .form select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 13px center; background-size: 12px 8px; } .hh-site .form .btn-primary { width: 100%; margin-top: 10px; } .hh-site .form-success { padding: 36px 24px; border: 1px solid var(--hairline-2); border-radius: 16px; background: var(--surface); text-align: center; } .hh-site .form-success .ok { width: 56px; height: 56px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--tx-strong); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--tx-strong); } .hh-site .form-success h3 { font-size: 22px; margin-bottom: 10px; } .hh-site .form-success p { font-size: 14px; color: var(--tx-body); margin-bottom: 22px; line-height: 1.55; } /* ─── Footer ─── */ .hh-site footer { padding: 64px 24px 140px; } .hh-site .foot-inner { max-width: 1180px; margin: 0 auto; } .hh-site .foot-grid { display: grid; grid-template-columns: 1fr; gap: 32px; } .hh-site .foot-logo { width: 130px; color: var(--tx-strong); margin-bottom: 18px; display: block; } .hh-site .foot-tag { color: var(--tx-secondary); font-size: 13.5px; max-width: 30ch; line-height: 1.55; } .hh-site .foot-col h5 { font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-hint); margin-bottom: 14px; } .hh-site .foot-col a { display: block; font-size: 13.5px; color: var(--tx-body); padding: 7px 0; transition: color .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Email links in the footer Contact column run longer than the phone links — shrink the type so the full address fits on a single line. */ .hh-site .foot-col a[href^="mailto:"] { font-size: 11.5px; letter-spacing: -0.005em; } .hh-site .foot-col a:hover { color: var(--tx-strong); } .hh-site .quote-grid { container-type: inline-size; } .hh-site .quote .reveal { container-type: inline-size; } @media (max-width: 759px) { .hh-site .quote-grid > .reveal:first-child { display: contents; } .hh-site .quote-grid > .form { order: 1; } .hh-site .quote-grid .contact-review { order: 2; } } /* ─── CONTACT FORM STATUS CARD ────────────────────────────── Success / error message that drops in below the submit button. Themed via CSS vars so it reads correctly in both light and dark. Dismissible via the X. */ .hh-site .form-msg { display: flex; align-items: flex-start; gap: 11px; margin-top: 16px; padding: 14px 14px 14px 15px; border-radius: 12px; border: 1px solid rgba(63,166,106,0.40); background: rgba(63,166,106,0.12); color: var(--tx-strong); font-size: 14px; line-height: 1.5; animation: formMsgIn .3s cubic-bezier(.22,1,.36,1); } .hh-site .form-msg[hidden] { display: none; } .hh-site .form-msg.error { border-color: rgba(214,88,78,0.45); background: rgba(214,88,78,0.13); } .hh-site .form-msg-icon { flex: none; display: inline-flex; margin-top: 1px; color: #36A869; } .hh-site .form-msg.error .form-msg-icon { color: #D6584E; } .hh-site .form-msg-icon .ic-err { display: none; } .hh-site .form-msg.error .form-msg-icon .ic-ok { display: none; } .hh-site .form-msg.error .form-msg-icon .ic-err { display: inline; } .hh-site .form-msg-text { flex: 1 1 auto; align-self: center; } .hh-site .form-msg-close { flex: none; width: 26px; height: 26px; margin: -3px -3px -3px 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--tx-secondary); cursor: pointer; transition: background .15s, color .15s; } .hh-site .form-msg-close:hover { background: rgba(128,128,130,0.18); color: var(--tx-strong); } .hh-site .form-msg-close:active { background: rgba(128,128,130,0.28); } @keyframes formMsgIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .hh-site .contact-review { margin-top: 28px; padding: 20px 22px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 14px; align-items: stretch; } .hh-site .contact-review-copy { min-width: 0; } .hh-site .contact-review .btn { white-space: nowrap; justify-content: center; } @container (min-width: 540px) { .hh-site .contact-review { flex-direction: row; align-items: center; justify-content: space-between; gap: 22px; } .hh-site .contact-review-copy { flex: 1 1 auto; } } .hh-site .contact-review h5 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--tx-strong); margin: 0 0 4px; text-transform: none; letter-spacing: 0; } .hh-site .contact-review p { font-size: 13.5px; color: var(--tx-body); line-height: 1.55; } .hh-site .contact-review .btn { white-space: nowrap; } .hh-site .foot-bottom { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: 11px; color: var(--tx-hint); display: flex; flex-direction: column; gap: 8px; } .hh-site .foot-credit { margin-top: 14px; padding-bottom: 4px; font-size: 11px; color: var(--tx-hint); letter-spacing: 0.02em; } .hh-site .foot-credit a { color: var(--tx-secondary); border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; } .hh-site .foot-credit a:hover { color: var(--tx-strong); border-bottom-color: var(--hairline-2); } /* ─── Floating "Call now" pill (mobile-only chrome) ─── */ /* Uses position:sticky so it floats above content within any scrolling ancestor (iOS frame's overflow:auto), then "lands" at the bottom of the page when scrolled all the way down. */ .hh-site .float-cta { position: sticky; bottom: 20px; z-index: 40; margin: -64px auto 12px; width: calc(100% - 36px); max-width: 360px; background: rgba(20,22,19,0.94); border: 1px solid rgba(246,247,243,0.16); border-radius: 14px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px -6px rgba(0,0,0,0.6); overflow: hidden; transition: transform .25s ease, opacity .25s ease; } .hh-site.theme-light .float-cta { background: rgba(246,247,243,0.95); border-color: rgba(20,22,19,0.16); box-shadow: 0 10px 30px -6px rgba(0,0,0,0.18); } .hh-site .float-cta.hidden { transform: translateY(140%); opacity: 0; pointer-events: none; } .hh-site .float-toggle { display: flex; align-items: center; justify-content: center; width: 100%; padding: 13px 16px; color: var(--tx-strong); position: relative; } .hh-site .float-toggle .lbl { display: flex; align-items: center; gap: 20px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 0.06em; } .hh-site .float-toggle .lbl .ring { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--tx-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); } .hh-site .float-toggle .lbl .ring::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--tx-strong); animation: ring-ping 2.2s ease-out infinite; pointer-events: none; } @keyframes ring-ping { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } } .hh-site .float-toggle .chev { font-size: 18px; color: var(--tx-secondary); transition: transform .25s ease; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); } .hh-site .float-cta.open .float-toggle .chev { transform: translateY(-50%) rotate(180deg); } .hh-site .float-options { max-height: 0; overflow: hidden; transition: max-height .3s ease; border-top: 1px solid transparent; } .hh-site .float-cta.open .float-options { max-height: 200px; border-top-color: rgba(246,247,243,0.08); } .hh-site .float-option { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 16px; color: var(--tx-strong); border-top: 1px solid rgba(246,247,243,0.05); } .hh-site .float-option:first-child { border-top: 0; } .hh-site .float-option .l { display: flex; flex-direction: column; gap: 2px; text-align: left; } .hh-site .float-option .div { font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-secondary); } .hh-site .float-option .ph { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: 0.005em; } .hh-site .float-option .arr { width: 30px; height: 30px; border-radius: 50%; background: var(--tx-strong); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .hh-site.theme-light .float-option .arr { background: var(--ink); color: var(--white); } /* ─── Drawer (mobile menu) ─── */ /* Body scroll lock when drawer is open (toggled by JS) */ body.menu-open { overflow: hidden; touch-action: none; } html.menu-open { overflow: hidden; } .hh-site .drawer { position: fixed; inset: 0; /* fixed = viewport-anchored, always 100vh */ z-index: 60; pointer-events: none; } .hh-site .drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity .25s ease; } .hh-site .drawer.open { pointer-events: auto; } .hh-site .drawer.open .drawer-backdrop { opacity: 1; } .hh-site .drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; /* full viewport height (drawer is fixed) */ width: 88%; max-width: 420px; background: var(--bg-2); border-left: 1px solid var(--hairline); padding: 80px 26px 28px; transform: translateX(100%); transition: transform .3s cubic-bezier(.32,.72,0,1); display: flex; flex-direction: column; overflow: hidden; /* no internal scroll — content must fit */ overscroll-behavior: contain; /* prevent any rubber-band scroll chaining */ } .hh-site .drawer.open .drawer-panel { transform: none; } .hh-site .drawer-close { position: absolute; top: 18px; right: 22px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; color: var(--tx-strong); font-size: 18px; line-height: 1; } .hh-site .drawer.with-status-padding { padding-top: 0; } .hh-site .drawer.with-status-padding .drawer-panel { padding-top: 100px; } .hh-site .drawer.with-status-padding .drawer-close { top: 62px; } .hh-site .drawer-links { display: flex; flex-direction: column; margin-top: 10px; } .hh-site .drawer-links a { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 19px; color: var(--tx-strong); padding: 16px 0; border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; } .hh-site .drawer-links a .arr { color: var(--tx-hint); font-size: 18px; font-weight: 400; } .hh-site .drawer-contact { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); } .hh-site .drawer-contact a { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--tx-body); } .hh-site .drawer-contact .lbl { color: var(--tx-hint); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 10px; min-width: 14px; } /* Shrink email rows on mobile so the long address fits without getting cut off. */ @media (max-width: 759px) { .hh-site .drawer-contact a[href^="mailto:"] { font-size: 12.5px; } } .hh-site .drawer-theme { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); } .hh-site .drawer-theme .lbl { font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-secondary); } .hh-site .theme-toggle { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); } .hh-site .theme-toggle button { padding: 6px 10px; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-secondary); display: inline-flex; align-items: center; gap: 6px; } .hh-site .theme-toggle button.on { background: var(--bg-2); color: var(--tx-strong); box-shadow: inset 0 0 0 1px var(--hairline-2); } /* ============================================================ DESKTOP — container query @ 760px and above ============================================================ */ @media (min-width: 760px) { /* nav becomes a real horizontal menu, hamburger hides. Side padding aligns logo + CTA with the body's 1180px wrap on wide screens. Using 100% (not 100vw) so the calc accounts for scrollbar width. */ .hh-site .nav { padding-top: 22px; padding-bottom: 22px; padding-left: max(40px, calc((100% - 1180px) / 2)); padding-right: max(40px, calc((100% - 1180px) / 2)); } .hh-site .nav .logo svg { width: 110px; } .hh-site .nav .menu { display: none; } .hh-site .nav .navlinks { display: flex; gap: 32px; align-items: center; } .hh-site .nav .navlinks a { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-secondary); font-weight: 500; font-family: var(--font-body); transition: color .15s; white-space: nowrap; } .hh-site .nav .navlinks a:hover { color: var(--tx-strong); } .hh-site .nav .nav-right { display: flex; gap: 14px; align-items: center; } .hh-site .nav .nav-cta-btn { display: inline-flex; width: auto; padding: 12px 22px; font-size: 12.5px; } .hh-site .nav .theme-btn { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; align-items: center; justify-content: center; color: var(--tx-strong); border: 1px solid var(--hairline); background: var(--surface); transition: background .15s, border-color .15s; } .hh-site .nav .theme-btn:hover { background: var(--surface-2); border-color: var(--hairline-2); } /* hero */ .hh-site .hero { min-height: 820px; margin-top: -100px; } .hh-site .hero-content-wrap { padding: 200px 40px 96px; } .hh-site .hero-content { max-width: 1180px; } .hh-site .hero-eyebrow { margin-bottom: 36px; padding: 10px 16px; } .hh-site .hero h1 { font-size: 76px; line-height: 0.98; max-width: 14ch; margin-bottom: 36px; } .hh-site .hero-tag { font-size: 22px; max-width: 38ch; margin-bottom: 22px; } .hh-site .hero-sub { font-size: 16px; line-height: 1.6; max-width: 52ch; margin-bottom: 40px; } .hh-site .hero-cta { flex-direction: row; gap: 14px; max-width: none; } .hh-site .hero-cta .btn { width: auto; padding: 16px 28px; font-size: 13px; } .hh-site .hero-shops { grid-template-columns: 1fr 1fr 1fr 1fr; } .hh-site .hero-shops a, .hh-site .hero-shops .item-meta { padding: 22px 32px; min-height: 86px; border-top: 0; } .hh-site .hero-shops > :nth-child(odd) { border-right: 0; } .hh-site .hero-shops > :not(:first-child) { border-left: 1px solid rgba(246,247,243,0.08); } /* Outer rails on the strip so it reads as a fully ruled bar. */ .hh-site .hero-shops > :first-child { border-left: 1px solid rgba(246,247,243,0.08); } .hh-site .hero-shops > :last-child { border-right: 1px solid rgba(246,247,243,0.08); } .hh-site .hero-shops .item-meta { font-size: 12px; gap: 14px; } .hh-site .hero-shops .item-meta b { color: rgba(246,247,243,1); font-weight: 700; } /* sections */ .hh-site .sec { padding: 120px 0; } .hh-site .sec-inner { padding: 0 40px; } .hh-site .sec-head { margin-bottom: 64px; } .hh-site .sec-head h2 { font-size: 56px; letter-spacing: 0.005em; margin-bottom: 20px; line-height: 1.02; } .hh-site .sec-head p { font-size: 17px; margin-top: 18px; line-height: 1.6; } /* services: side-by-side, no tabs, all pillars visible */ .hh-site .pillar-switch { display: none; } .hh-site .pillars { grid-template-columns: 1fr 1fr; gap: 28px; } .hh-site .pillar-slot[data-active="false"] { display: block; } .hh-site .pillar-photo { height: 380px; } .hh-site .pillar-title { padding: 32px 32px 28px; } .hh-site .pillar-title h3 { font-size: 36px; margin-bottom: 8px; } .hh-site .pillar-body { padding: 32px 32px 36px; } .hh-site .pillar-body p { font-size: 16px; line-height: 1.65; margin-bottom: 36px; } /* why us: 2 cols on tablet, 3 cols at desktop ≥900px (see media query below). Reset all the mobile carousel scaffolding so we're back to a normal grid. */ .hh-site .caps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; overflow-x: visible; scroll-snap-type: none; padding: 0; margin: 0; } .hh-site .caps .cap { flex: initial; } .hh-site .caps-nav { display: none; } .hh-site .cap { padding: 32px 28px; } .hh-site .cap .cnum { margin-bottom: 18px; font-size: 14px; } .hh-site .cap h4 { font-size: 20px; margin-bottom: 10px; } .hh-site .cap p { font-size: 14px; line-height: 1.6; } /* diesel: side-by-side */ .hh-site .diesel { padding: 120px 0; } .hh-site .diesel-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 80px; padding: 0 40px; } /* Cap the text column tightly so the stamp keeps its natural size + room to breathe. Stamp stays at its intrinsic width and never shrinks. */ .hh-site .diesel-text { max-width: 46%; flex: 0 1 auto; } .hh-site .diesel-stamp { flex: 0 0 auto; } .hh-site .diesel h2 { font-size: 58px; line-height: 1.02; margin-bottom: 22px; } .hh-site .diesel p { font-size: 17px; line-height: 1.6; } .hh-site .diesel-stamp { font-size: 24px; padding: 30px 36px; align-self: center; flex-shrink: 0; } .hh-site .diesel-stamp span:not(.stamp-line) { font-size: 11px; margin-top: 12px; } /* systems: 2 photo cards side-by-side */ .hh-site .systems { padding: 84px 0; } .hh-site .systems-inner { padding: 0 40px; } .hh-site .systems-head { margin-bottom: 36px; } .hh-site .systems-head h2 { font-size: 56px; line-height: 1.02; } .hh-site .systems-head p { font-size: 16px; } .hh-site .systems-grid { grid-template-columns: 1fr 1fr 1fr; gap: 24px; } .hh-site .sys-card { min-height: 320px; } .hh-site .sys-card-content { padding: 32px 28px; } .hh-site .sys-card h3 { font-size: 22px; margin-bottom: 10px; } .hh-site .sys-card p { font-size: 14.5px; } /* locations: 2 cols */ .hh-site .locs { grid-template-columns: 1fr 1fr; gap: 28px; } .hh-site .loc-head { height: 200px; padding: 20px 24px; } .hh-site .loc-body { padding: 32px 32px 36px; } .hh-site .loc h3 { font-size: 28px; margin-bottom: 20px; } .hh-site .loc .row { font-size: 14.5px; padding: 13px 0; } /* FAQ */ .hh-site .faq-list { max-width: 880px; margin: 0; gap: 14px; } .hh-site .faq-summary { font-size: 16px; padding: 24px 30px; } .hh-site .faq-detail-inner { padding: 4px 30px 28px; font-size: 15px; line-height: 1.65; } /* contact: 2 col */ .hh-site .quote-grid { grid-template-columns: 0.95fr 1.05fr; gap: 72px; } .hh-site .quote h2 { font-size: 56px; margin-bottom: 20px; } .hh-site .quote .lead { font-size: 16px; margin-bottom: 14px; line-height: 1.6; } .hh-site .qlist { gap: 14px; margin-top: 4px; } .hh-site .qlist .qrow { font-size: 15px; } .hh-site .form { padding: 36px 32px; } .hh-site .form .field { margin-bottom: 18px; } .hh-site .form .field.row { gap: 14px; } .hh-site .form .field.row > div { margin-bottom: 18px; } .hh-site .form .btn-primary { margin-top: 14px; padding: 16px 22px; } /* footer: 4 cols */ .hh-site footer { padding: 100px 40px 60px; } .hh-site .foot-grid { /* Contact column gets extra share to fit the long email addresses; Services + Company shrink since their link text is short. */ grid-template-columns: 1.2fr 0.75fr 0.75fr 1.6fr; gap: 40px; } .hh-site .foot-logo { width: 150px; margin-bottom: 20px; } .hh-site .foot-tag { font-size: 14px; } .hh-site .contact-review { margin-top: 36px; padding: 24px 28px; } .hh-site .contact-review h5 { font-size: 20px; } .hh-site .contact-review p { font-size: 14px; } .hh-site .foot-bottom { margin-top: 40px; padding-top: 26px; flex-direction: row; justify-content: space-between; font-size: 12px; } .hh-site .foot-credit { margin-top: 12px; text-align: right; } /* hide mobile chrome */ .hh-site .float-cta { display: none; } .hh-site .drawer { display: none; } } /* between 760 and 1000 — a little tighter */ @media (min-width: 760px) and (max-width: 999px) { .hh-site .hero h1 { font-size: 64px; } .hh-site .hero-tag { font-size: 20px; } .hh-site .sec { padding: 88px 0; } .hh-site .sec-head h2 { font-size: 44px; } .hh-site .systems-head h2 { font-size: 44px; } .hh-site .diesel { padding: 88px 0; } .hh-site .diesel h2 { font-size: 48px; } .hh-site .quote h2 { font-size: 44px; } .hh-site .pillar-photo { height: 320px; } } /* Why-us grid expands to 4 cols only once there's real room for it. */ @media (min-width: 900px) { .hh-site .caps { grid-template-columns: 1fr 1fr 1fr; } } /* Tablet-only nav fix: at 760-880px the CTA button overflows alongside nav links + theme toggle. Tighten button padding/font + shrink nav gaps so everything fits on one line. */ @media (min-width: 760px) and (max-width: 880px) { .hh-site .nav { padding: 14px 20px; gap: 10px; } .hh-site .nav .navlinks { gap: 18px; } .hh-site .nav .navlinks a { font-size: 10.5px; letter-spacing: 0.10em; } .hh-site .nav .nav-right { gap: 8px; } .hh-site .nav .nav-cta-btn { padding: 10px 14px; font-size: 11.5px; letter-spacing: 0.04em; } .hh-site .nav .theme-btn { width: 34px; height: 34px; } .hh-site .nav .logo svg { width: 92px; } } /* light-theme aliases for production data-theme attribute. Hero echoes the theme: dark gradient in dark mode, light gradient in light mode. Text + buttons flip color to maintain contrast against the chosen overlay. */ html[data-theme="light"] .hh-site .btn-primary { background: var(--ink); color: var(--white); } /* Photo brightened slightly in light mode so it doesn't feel washed out */ html[data-theme="light"] .hh-site .hero-img { filter: grayscale(0.10) contrast(1.0) brightness(1.05); } /* Light overlay with stronger middle (matches the dark-mode opacity profile) */ html[data-theme="light"] .hh-site .hero-tint { background: linear-gradient(180deg, rgba(246,247,243,0.85) 0%, rgba(246,247,243,0.55) 22%, rgba(246,247,243,0.55) 45%, rgba(246,247,243,0.82) 70%, rgba(246,247,243,0.97) 100%); } html[data-theme="light"] .hh-site .hero-tint-bottom { background: linear-gradient(180deg, transparent 0%, rgba(246,247,243,0.55) 35%, rgba(246,247,243,0.90) 80%, rgba(246,247,243,0.98) 100%); } /* Hero text flips dark in light mode, with white text-shadow for legibility */ html[data-theme="light"] .hh-site .hero h1, html[data-theme="light"] .hh-site .hero-tag, html[data-theme="light"] .hh-site .hero-sub { color: var(--ink); text-shadow: 0 1px 14px rgba(255,255,255,0.65), 0 2px 4px rgba(255,255,255,0.4); } html[data-theme="light"] .hh-site .hero h1 em { color: #C77A1C; } html[data-theme="light"] .hh-site .hero-eyebrow { color: rgba(20,22,19,0.85); background: rgba(246,247,243,0.55); border-color: rgba(20,22,19,0.18); } /* Hero CTAs flip in light mode — dark primary, dark-bordered ghost */ html[data-theme="light"] .hh-site .hero-cta .btn-primary { background: var(--ink); color: var(--white); } html[data-theme="light"] .hh-site .hero-cta .btn-ghost { color: var(--ink); border-color: rgba(20,22,19,0.40); } html[data-theme="light"] .hh-site .hero-cta .btn-ghost:hover { background: rgba(20,22,19,0.06); border-color: rgba(20,22,19,0.60); } /* Hero-shops block (North/South phones + trust badges) inverts too */ html[data-theme="light"] .hh-site .hero-shops-wrap { background: rgba(246,247,243,0.94); border-top-color: rgba(20,22,19,0.10); } html[data-theme="light"] .hh-site .hero-shops a, html[data-theme="light"] .hh-site .hero-shops .item-meta { color: var(--ink); border-color: rgba(20,22,19,0.08) !important; } html[data-theme="light"] .hh-site .hero-shops > :not(:first-child) { border-left-color: rgba(20,22,19,0.08); } html[data-theme="light"] .hh-site .hero-shops > :nth-child(odd) { border-right-color: rgba(20,22,19,0.08); } html[data-theme="light"] .hh-site .hero-shops .lbl { color: rgba(20,22,19,0.55); } html[data-theme="light"] .hh-site .hero-shops .item-meta { color: rgba(20,22,19,0.75); } html[data-theme="light"] .hh-site .hero-shops .item-meta b { color: var(--ink); } html[data-theme="light"] .hh-site .diesel-photo { filter: grayscale(0.6) contrast(1.05) brightness(1.05); opacity: 0.55; } html[data-theme="light"] .hh-site .diesel-tint { background: linear-gradient(180deg, rgba(246,247,243,0.55), rgba(246,247,243,0.72)), radial-gradient(circle at 30% 30%, rgba(232,162,63,0.06), transparent 60%); } html[data-theme="light"] .hh-site .diesel-stamp { background: rgba(246,247,243,0.4); } html[data-theme="light"] .hh-site .loc-head .badge { color: var(--white); } html[data-theme="light"] .hh-site .float-cta { background: rgba(246,247,243,0.95); border-color: rgba(20,22,19,0.16); box-shadow: 0 10px 30px -6px rgba(0,0,0,0.18); } html[data-theme="light"] .hh-site .float-option .arr { background: var(--ink); color: var(--white); } /* Modal (Privacy / Cookies). Dark mode = primary black bg + white border/text. Light mode = white bg + dark text (override below). Browser-default so the sticker dials. All 4 PNGs are in the DOM; theme CSS shows the right pair. */ .hh-site .foot-stickers { display: flex; gap: 18px; align-items: center; justify-content: flex-start; padding: 14px 0 6px; flex-wrap: wrap; } .hh-site .sticker-link { display: inline-block; line-height: 0; transition: transform .25s ease; } .hh-site .sticker-link:first-child { transform: rotate(-6deg); } .hh-site .sticker-link:last-child { transform: rotate(5deg); } .hh-site .sticker-link:hover { transform: rotate(0) scale(1.06); } .hh-site .sticker { width: 72px; height: 72px; display: block; } /* Default (dark mode): white stickers visible, black ones hidden. */ .hh-site .sticker-light { display: none; } /* Light mode: invert the swap. */ html[data-theme="light"] .hh-site .sticker-dark { display: none; } html[data-theme="light"] .hh-site .sticker-light { display: block; } @media (min-width: 760px) { .hh-site .foot-stickers { gap: 22px; padding: 18px 0 8px; justify-content: center; } .hh-site .sticker { width: 84px; height: 84px; } } @media (prefers-reduced-motion: reduce) { .hh-site .sticker-link { transition: none; } .hh-site .sticker-link:hover { transform: inherit; } } /* "Texting is preferred" callout — accent color + soft glow. Used in each location card and as a lead line in the contact section. */ .hh-site .text-pref { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 13px; letter-spacing: 0.01em; text-shadow: 0 0 8px rgba(232, 162, 63, 0.45), 0 0 18px rgba(232, 162, 63, 0.22); animation: textPrefPulse 2.6s ease-in-out infinite; } .hh-site .text-pref-lead { font-size: 14px; margin: 10px 0 0; } @keyframes textPrefPulse { 0%, 100% { text-shadow: 0 0 8px rgba(232, 162, 63, 0.45), 0 0 18px rgba(232, 162, 63, 0.22); } 50% { text-shadow: 0 0 12px rgba(232, 162, 63, 0.7), 0 0 26px rgba(232, 162, 63, 0.35); } } @media (prefers-reduced-motion: reduce) { .hh-site .text-pref { animation: none; } } @media (min-width: 720px) { .hh-site .text-pref { font-size: 14px; } .hh-site .text-pref-lead { font-size: 15px; } }