@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700&family=Manrope:wght@300;400;600;700&display=swap'); /* * Full-page backdrop must paint for the whole document, not only the first viewport. * Avoid html/body { height: 100% } — it clips background painting and causes a horizontal “seam” * when content is taller than one screen (common on catalog-results). */ html{ min-height: 100%; min-height: 100dvh; color-scheme: dark; background: var(--phl-page-bg); /* Solid underpaint for gradients + UA overscroll tint (Chrome/Edge/Safari). */ background-color: var(--bg0); /* * `overscroll-behavior-y: none` makes Chromium paint a bright “glow” line at scroll bounds. * `auto` keeps native elastic scroll; pair with dark bg + color-scheme so edges aren’t white. */ overscroll-behavior-y: auto; } body{ margin: 0; min-height: 100%; min-height: 100dvh; background: var(--phl-page-bg); background-color: var(--bg0); background-attachment: fixed; overscroll-behavior-y: auto; color: var(--text); font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; display: flex; flex-direction: column; } /* * Touch / Android: `body { display:flex; column }` + `main { flex:1 0 auto }` is a common cause of * “page won’t scroll” — the compositor picks the wrong scroll layer (body vs viewport) and pan * gestures do nothing. Fix: normal block flow on `body`, reset `main` as a flex item. For **Android** * Chromium, `html` is usually the vertical scroll layer (`overflow-y: auto`); **iOS** WebKit * (`html.phl-ios`) keeps `overflow-y: visible` so the viewport scrolls — mixing those two breaks one platform. * * Do NOT set `overflow-x: hidden` on `html` or `body` — it forces `overflow-y: auto` on that same * box and recreates the broken scrollport. * * Also match `(max-width: 1024px)`: some Android devices report `pointer: fine` / hover capability * incorrectly; narrow viewports still need this block. */ @media (max-width: 1024px), (max-device-width: 1024px), (hover: none), (pointer: coarse){ /* * Split by `html.phl-ios` (set in header.php): Android Chromium usually needs an explicit scroll * layer on `html` once `body` is `display:block`; iOS WebKit often scrolls the viewport and * misbehaves if `html` is the scrollport (rubber-band / snap) — keep `overflow-y: visible` there. */ html:not(.phl-ios){ height: auto; min-height: 100%; min-height: 100dvh; overflow-x: visible; overflow-y: auto; -webkit-overflow-scrolling: touch; background-attachment: scroll !important; } html.phl-ios{ height: auto; min-height: 100%; min-height: 100dvh; overflow-x: visible; overflow-y: visible; background-attachment: scroll !important; } body{ display: block !important; min-height: 100svh; overflow-x: visible; overflow-y: visible; background-attachment: scroll !important; } body.home, body.phl-services-page, body.phl-shop-page, body.phl-catalog-page{ background-attachment: scroll !important; } main.phl-main{ flex: none !important; max-width: 100%; box-sizing: border-box; min-height: 0; } } /* * Server-detected mobile UA (`phl-ua-mobile` on ) — same rules when media queries miss the device * (e.g. “Desktop site”, Samsung `pointer: fine`, very wide landscape). */ html.phl-ua-mobile:not(.phl-ios){ height: auto; min-height: 100%; min-height: 100dvh; overflow-x: visible; overflow-y: auto; -webkit-overflow-scrolling: touch; background-attachment: scroll !important; } html.phl-ua-mobile.phl-ios{ height: auto; min-height: 100%; min-height: 100dvh; overflow-x: visible; overflow-y: visible; background-attachment: scroll !important; } html.phl-ua-mobile body{ display: block !important; min-height: 100svh; overflow-x: visible; overflow-y: visible; background-attachment: scroll !important; } html.phl-ua-mobile body.home, html.phl-ua-mobile body.phl-services-page, html.phl-ua-mobile body.phl-shop-page, html.phl-ua-mobile body.phl-catalog-page{ background-attachment: scroll !important; } html.phl-ua-mobile main.phl-main{ flex: none !important; max-width: 100%; box-sizing: border-box; min-height: 0; } /* * iOS (Safari / Chrome): same WebKit engine; layered full-viewport gradients + large shadows + nested * `-webkit-overflow-scrolling: touch` cost more than Android Chromium. Samsung “fine” → iPhone not → * `phl-ios` is set in header.php from the User-Agent. */ html.phl-ios body, html.phl-ios body.home, html.phl-ios body.phl-services-page, html.phl-ios body.phl-shop-page, html.phl-ios body.phl-catalog-page{ background: radial-gradient(120% 70% at 50% 0%, rgba(var(--phl-red-rgb), 0.11), transparent 46%), radial-gradient(90% 45% at 96% 0%, rgba(var(--phl-yellow-rgb), 0.06), transparent 42%), linear-gradient(180deg, #0b0b12 0%, #070708 100%) !important; background-color: var(--bg0); background-attachment: scroll !important; } html.phl-ios{ background-color: var(--bg0); background-image: none; } html.phl-ios .phl-header{ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } html.phl-ios .phl-main{ transform: translateZ(0); } /* Catalog: GPU layer on main can interact badly with WebKit scroll bounds; keep flat. */ html.phl-ios body.phl-catalog-page .phl-main{ transform: none; } html.phl-ios .phl-catalogCarousel__viewport, html.phl-ios .phl-catalogBrandDock__modelViewport, html.phl-ios .phl-catalogBrandDock__variantList, html.phl-ios .phl-servicesCarousel__viewport, html.phl-ios .phl-catalogPowertrain__listScroll{ -webkit-overflow-scrolling: auto; } html.phl-ios .phl-catalogBrandDock__inner--shell, html.phl-ios .phl-quoteStrip__inner, html.phl-ios .phl-servicesWrap{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } @media (prefers-reduced-motion: reduce){ body, body.home, body.phl-catalog-page{ background-attachment: scroll !important; } .phl-header, .phl-catalogBrandDock__mast{ background-attachment: scroll !important; } } a{ color: inherit; text-decoration: none; } /* * Header logo: do NOT use brightness(0) invert(1) by default — it flattens artwork to one color and * wipes two-tone detail (e.g. small “V8” inside white cylinder shapes). Height-capped + auto width. * Optional silhouette mode (Customizer) re-applies the old white treatment for simple dark icons only. */ .phl-brand__logo{ width: auto; max-width: min(380px, calc(100vw - 220px)); height: 72px; display: flex; align-items: center; justify-content: flex-start; padding: 0; flex: 0 0 auto; } .phl-brand__logo img{ width: auto !important; height: 100% !important; max-width: min(380px, calc(100vw - 220px)) !important; max-height: 72px !important; object-fit: contain !important; } .phl-header .custom-logo{ width: auto !important; height: 72px !important; max-width: min(380px, calc(100vw - 220px)) !important; max-height: 72px !important; object-fit: contain !important; } /* Legacy “white silhouette” — opt-in via Customizer; square + monochrome filter */ body.phl-logo--silhouette .phl-brand__logo{ width: 72px; max-width: 72px; height: 72px; } body.phl-logo--silhouette .phl-brand__logo img{ width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; } body.phl-logo--silhouette .phl-header .custom-logo{ width: 70px !important; height: 70px !important; max-width: 70px !important; filter: brightness(0) invert(1) contrast(1.12) !important; } .phl-header .custom-logo-link{ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: none !important; } .phl-footer .custom-logo{ width: auto !important; max-width: min(160px, 42vw) !important; height: 28px !important; max-height: 28px !important; object-fit: contain !important; } body.phl-logo--silhouette .phl-footer .custom-logo{ width: 26px !important; height: 26px !important; max-width: 26px !important; filter: brightness(0) invert(1) contrast(1.12) !important; } .phl-container{ width: min(1140px, calc(100% - clamp(20px, 4vw, 40px))); margin: 0 auto; padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); box-sizing: border-box; } .phl-main{ position: relative; flex: 1 0 auto; } /* Home: one continuous palette (red / gold / deep violet-charcoal) — body + main + hero + CTA */ body.home{ background: radial-gradient(125% 92% at 50% -6%, rgba(var(--phl-red-rgb), 0.14), transparent 54%), radial-gradient(88% 58% at 0% 38%, rgba(var(--phl-red-rgb), 0.08), transparent 50%), radial-gradient(88% 52% at 100% 28%, rgba(var(--phl-yellow-rgb), 0.09), transparent 52%), var(--phl-page-bg); background-attachment: fixed; } body.home .phl-main--homeFold{ background: linear-gradient(180deg, rgba(var(--phl-red-rgb), 0.045) 0%, transparent 32%, transparent 68%, rgba(var(--phl-yellow-rgb), 0.04) 100%); } body.home .phl-hero__overlay{ background: radial-gradient(ellipse 100% 78% at 50% 100%, rgba(var(--phl-red-rgb), 0.14), transparent 58%), radial-gradient(ellipse 70% 55% at 85% 18%, rgba(var(--phl-yellow-rgb), 0.07), transparent 52%), var(--phl-hero-overlay); } body.home .phl-hero__overlay--cinematic{ background: radial-gradient(ellipse 120% 95% at 82% 12%, rgba(var(--phl-yellow-rgb), 0.1), transparent 46%), radial-gradient(ellipse 130% 100% at 16% 40%, rgba(var(--phl-red-rgb), 0.11), transparent 50%), radial-gradient(ellipse 130% 100% at 50% 42%, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.78) 70%, rgba(0, 0, 0, 0.92) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, transparent 38%, transparent 62%, rgba(0, 0, 0, 0.72) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.48)); } /* Cinematic layout: heading + CTA row uses page/footer gradient — not a flat strip */ body.home .phl-main--heroCinematic .phl-hero.phl-hero--cinematic .phl-hero__content.phl-hero__content--cinematic{ background: transparent; box-shadow: none; } /* Front page: hero + lead CTA fit in one screen (no scroll until footer). */ .phl-main--homeFold{ display: flex; flex-direction: column; min-height: calc(100svh - var(--phl-header-h)); box-sizing: border-box; position: relative; padding-bottom: 112px; } .phl-main--homeFold .phl-hero{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .phl-main--homeFold .phl-hero__content{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(16px, 3.2svh, 44px); padding-bottom: clamp(12px, 2.4svh, 32px); } .phl-main--homeFold .phl-quoteStrip{ position: absolute; left: 0; right: 0; bottom: 22px; padding: 0; margin: 0; z-index: 3; } .phl-main--homeFold .phl-quoteStrip__inner{ padding: 14px 0; } .phl-main--homeFold .phl-h1{ font-size: clamp(26px, 3.6vw, 50px); } /* Cinematic homepage (Customizer → Homepage hero layout) */ .phl-hero--cinematic .phl-hero__content--cinematic{ text-align: center; align-items: center; } .phl-hero--cinematic .phl-hero__subtitle{ margin-left: auto; margin-right: auto; } .phl-hero__ctaBlock{ margin-top: clamp(18px, 3.5svh, 36px); display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(640px, 100%); } .phl-hero__ctaTitle{ margin: 0; font-style: italic; letter-spacing: .03em; text-shadow: 0 14px 50px rgba(0,0,0,.6); } .phl-main--heroCinematic .phl-hero__content--cinematic{ justify-content: center; } .phl-hero--cinematic.phl-hero--letterbox{ min-height: min(78svh, calc(100svh - var(--phl-header-h))); } .phl-hero__overlay--cinematic{ background: radial-gradient(ellipse 130% 100% at 50% 42%, rgba(0,0,0,.22), rgba(0,0,0,.78) 70%, rgba(0,0,0,.92) 100%), linear-gradient(180deg, rgba(0,0,0,.62) 0%, transparent 38%, transparent 62%, rgba(0,0,0,.72) 100%), linear-gradient(90deg, rgba(0,0,0,.48), rgba(0,0,0,.12) 50%, rgba(0,0,0,.48)); } .phl-hero--videoSoft .phl-hero__video{ transform: scale(var(--phl-hero-video-scale, 1)); transform-origin: center center; } /* Feather hero photo/video into background (Customizer → Blend hero media edges) */ .phl-hero--edgeBlend-soft .phl-hero__bg, .phl-hero--edgeBlend-strong .phl-hero__bg{ background: var(--phl-surface-2); } .phl-hero--edgeBlend-soft .phl-hero__image, .phl-hero--edgeBlend-soft .phl-hero__video{ -webkit-mask-image: radial-gradient(ellipse 96% 90% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 96% 90% at 50% 50%, #000 58%, transparent 100%); mask-mode: alpha; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .phl-hero--edgeBlend-strong .phl-hero__image, .phl-hero--edgeBlend-strong .phl-hero__video{ -webkit-mask-image: radial-gradient(ellipse 108% 102% at 50% 50%, #000 42%, transparent 100%); mask-image: radial-gradient(ellipse 108% 102% at 50% 50%, #000 42%, transparent 100%); } /* Header — theme-tinted stack (see --phl-header-bg), blends into page */ .phl-header{ position: relative; top: auto; z-index: 20; overflow-x: visible; background: var(--phl-header-bg); background-attachment: fixed; border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(var(--phl-gold-rgb), 0.06), 0 12px 28px rgba(0, 0, 0, 0.35); } /* Optional sticky mode: add .phl-header--sticky on body */ body.phl-header--sticky .phl-header{ position: sticky; top: 0; } .phl-header__inner{ box-sizing: border-box; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "brand nav end"; align-items: center; min-height: 56px; padding-top: 8px; padding-bottom: 8px; gap: 16px; } .phl-brand{ display:flex; gap: 10px; align-items:center; justify-content: flex-start; justify-self: start; grid-area: brand; min-width: 0; z-index: 2; width: auto; } .phl-brand__logoFallback{ width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.05); font-weight: 800; letter-spacing: .04em; } .phl-brand__text{ display:flex; flex-direction: column; line-height: 1.05; gap: 2px; align-items: flex-start; } .phl-brand__name{ font-family: Oxanium, system-ui, sans-serif; letter-spacing: .045em; font-size: 20px; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,.98); text-shadow: 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.42); } .phl-brand__slogan{ font-size: clamp(11px, 2.4vw, 14px); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.9); position: relative; padding-left: 0; white-space: nowrap; } .phl-brand__slogan::before{ content: none; } .phl-nav{ display:flex; gap: 8px; align-items:center; justify-content: center; position: static; grid-area: nav; justify-self: center; max-width: 100%; min-width: 0; z-index: 1; } .phl-nav__link{ padding: 10px 14px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(255,255,255,.05); transition: transform .18s ease, border-color .18s ease, background .18s ease; font-size: 13px; font-weight: 700; } .phl-nav__link:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); } .phl-header__end{ min-width: 0; display: flex; align-items: center; justify-content: flex-end; grid-area: end; justify-self: end; margin-right: 8px; gap: 10px; z-index: 2; } .phl-header__langDesktop{ display: flex; align-items: center; } .phl-headerCart{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: var(--text); text-decoration: none; font-weight: 700; font-size: 12px; line-height: 1; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; } .phl-headerCart:hover{ border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.09); } .phl-headerCart__icon{ display: flex; align-items: center; justify-content: center; line-height: 0; color: rgba(255, 255, 255, 0.92); } .phl-headerCart__count{ min-width: 1em; text-align: center; font-variant-numeric: tabular-nums; } .phl-headerCart--empty, .phl-headerCart[hidden]{ display: none !important; } .phl-lang{ display:flex; gap: 8px; justify-content: flex-end; } .phl-lang__btn{ padding: 9px 11px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); font-weight: 700; font-size: 11px; letter-spacing: .02em; } .phl-lang__btn.is-active{ border-color: rgba(255,42,42,.55); background: rgba(255,42,42,.14); } .phl-nav__lang--inMenu{ display: none; } /* Hero */ .phl-hero{ position: relative; overflow: hidden; min-height: 50vh; } .phl-hero__bg{ position:absolute; inset:0; z-index: 0; } .phl-hero__video{ width: 100%; height: 100%; object-fit: cover; /* better for vertical videos in wide hero */ object-position: center center; transform: scale(1); transform-origin: center center; filter: saturate(1.02) contrast(1.02); } .phl-hero__image{ width: 100%; height: 100%; object-fit: cover; /* full-width cinematic hero, allows edge cropping */ object-position: center center; transform: translate3d(0, 0, 0) scale(1); transform-origin: center center; /* Make lower-res photos look a bit cleaner. */ filter: saturate(1.08) contrast(1.10) brightness(0.98); will-change: transform; } /* Header image fit (Customizer → Header image sizing) */ .phl-hero--imgFit-contain .phl-hero__bg{ background: var(--phl-surface-2); } .phl-hero--imgFit-contain .phl-hero__image{ object-fit: contain; } /* Fill + zoom out: scale < 1 shows more of photo (letterboxing on .phl-hero__bg). */ .phl-hero--imgFit-coverScaled .phl-hero__bg{ background: var(--phl-surface-2); } .phl-hero--imgFit-coverScaled .phl-hero__image{ object-fit: cover; transform: translate3d(0, 0, 0) scale(var(--phl-hero-img-scale, 1)); } .phl-hero__overlay{ position:absolute; inset:0; background: var(--phl-hero-overlay); } .phl-hero__content{ position: relative; z-index: 1; padding-top: 96px; padding-bottom: 110px; } .phl-hero__kicker{ font-family: Oxanium, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; color: rgba(255,255,255,.75); } .phl-h1, .phl-h2{ font-family: Oxanium, system-ui, sans-serif; margin: 12px 0; } .phl-h1{ font-size: clamp(34px, 4.2vw, 58px); line-height: 1.02; } .phl-h2{ font-size: clamp(22px, 2.6vw, 32px); } .phl-hero__title{ text-shadow: 0 20px 60px rgba(0,0,0,.55); } .phl-hero__subtitle{ max-width: 720px; font-size: 16px; color: var(--muted); } .phl-hero__actions{ display:flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; } .phl-hero__actions--spotlight .phl-btn{ position: relative; overflow: hidden; } .phl-btn--heroMain{ position: relative; overflow: hidden; isolation: isolate; font-size: 15px; padding: 15px 20px; border-width: 2px; border-color: rgba(255, 60, 60, 0.72); background: linear-gradient(135deg, rgba(255, 58, 58, 0.96), rgba(176, 16, 16, 0.92)); box-shadow: 0 12px 36px rgba(255,42,42,.30); animation: phlPulse 2.3s ease-in-out infinite; } .phl-btn--heroMain::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; animation: phlShine 2.4s ease-in-out infinite; } .phl-btn--heroAlt{ font-size: 14px; padding: 14px 18px; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.10); } .phl-hero__micro{ margin-top: 10px; color: rgba(255,255,255,.78); font-size: 12px; letter-spacing: .02em; } .phl-btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; border-radius: 16px; padding: 14px 16px; min-height: 44px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.12); transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; font-weight: 800; letter-spacing: .01em; } .phl-btn:hover{ transform: translateY(-2px); } .phl-btn:focus-visible{ outline: 2px solid rgba(var(--phl-gold-rgb), 0.65); outline-offset: 2px; } .phl-btn:active{ transform: translateY(0); } .phl-btn:disabled{ opacity: 0.45; cursor: not-allowed; transform: none; pointer-events: none; } @media (prefers-reduced-motion: reduce){ .phl-btn{ transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; } .phl-btn:hover{ transform: none; } } .phl-btn--primary{ background: linear-gradient(135deg, rgba(255,42,42,.95), rgba(255,42,42,.25)); border-color: rgba(255,42,42,.55); } .phl-btn--ghost{ background: rgba(255,255,255,.05); } .phl-btn--wide{ width: 100%; } @keyframes phlShine{ 0% { transform: translateX(-120%); } 45% { transform: translateX(120%); } 100% { transform: translateX(120%); } } @keyframes phlPulse{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } /* Hero cards */ .phl-hero__cards{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 34px; } .phl-card{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 16px 16px 14px; box-shadow: 0 18px 60px rgba(0,0,0,.25); transform: translateY(14px); opacity: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease; } .phl-card[data-reveal].is-visible{ transform: translateY(0); opacity: 1; } .phl-card__title{ font-family: Oxanium, system-ui, sans-serif; font-size: 16px; } .phl-card__body{ margin-top: 6px; font-size: 13px; color: var(--muted); } .phl-card__link{ display:inline-block; margin-top: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.16); font-weight: 800; font-size: 13px; } /* Lead */ .phl-p{ color: var(--muted); line-height: 1.6; } .phl-quoteStrip{ padding: 44px 0 78px; background: transparent !important; border: 0 !important; } .phl-quoteStrip__inner{ border-radius: 24px; border: 0; background: transparent; padding: 24px; display:flex; gap: 14px; align-items: center; justify-content: space-between; } /* Home quote strip: no card — heading + button sit on page background */ .phl-main--homeFold .phl-quoteStrip{ background: transparent !important; border: 0 !important; } .phl-main--homeFold .phl-quoteStrip__inner{ background: linear-gradient(135deg, rgba(16, 12, 18, 0.86), rgba(10, 10, 14, 0.92)), radial-gradient(120% 140% at 12% 100%, rgba(var(--phl-red-rgb), 0.22), transparent 62%); border: 1px solid rgba(255,255,255,.10) !important; border-radius: 18px !important; box-shadow: 0 12px 34px rgba(0,0,0,.35) !important; -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important; padding: 14px 16px; } body.home .phl-footer{ border-top: 0 !important; box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.36) !important; } /* Home hero -> CTA strip seam softener */ body.home .phl-quoteStrip{ position: absolute; z-index: 3; margin-top: 0; background: linear-gradient(180deg, rgba(8, 8, 10, 0.12) 0%, rgba(8, 8, 10, 0.86) 100%), radial-gradient(120% 95% at 12% 100%, rgba(var(--phl-red-rgb), 0.24), transparent 60%); } body.home .phl-main--homeFold .phl-quoteStrip__inner{ background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; } /* Keep non-catalog sections from reading as flat black. */ body:not(.phl-catalog-page) .phl-pageHero--results{ background: transparent; border-bottom: 0; } body:not(.phl-catalog-page) .phl-servicesGrid{ background: transparent; border-top: 0; } .phl-card__link--mainCta{ border-color: rgba(255,42,42,.55); background: linear-gradient(135deg, rgba(255,42,42,.95), rgba(255,42,42,.25)); } .phl-formRow{ display:flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .phl-leadForm{ display: flex; flex-direction: column; align-items: stretch; gap: 14px; } .phl-leadForm .phl-formRow{ margin-bottom: 0; } .phl-label{ font-weight: 800; font-size: 13px; color: rgba(255,255,255,.86); } .phl-input, .phl-textarea{ border-radius: 16px; padding: 12px 14px; min-height: 44px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); color: var(--text); outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .phl-textarea{ resize: vertical; min-height: 120px; } .phl-input:focus-visible, .phl-textarea:focus-visible{ border-color: rgba(var(--phl-gold-rgb), 0.42); box-shadow: 0 0 0 3px rgba(var(--phl-gold-rgb), 0.18); } .phl-input:disabled, .phl-textarea:disabled{ opacity: 0.5; cursor: not-allowed; } .phl-formHint{ margin-top: 10px; color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.5; } /* Page hero */ .phl-pageHero{ padding: 62px 0 24px; } /* Catalog wizard: less air between title and steps */ .phl-pageHero--catalogTight{ padding: 36px 0 16px; } .phl-pageHero--catalogTight .phl-h1{ margin: 0 0 10px; } .phl-pageHero--catalogTight .phl-p{ margin: 0; max-width: 62ch; } .phl-pageHero--results{ /* Let the global body backdrop show through — a second gradient here caused a visible “cut” at the next section (services grid + lead). */ background: transparent; border-bottom: 1px solid rgba(255,255,255,.06); } .phl-main--services{ background: transparent; } .phl-main--services .phl-pageHero--results{ border-bottom-color: rgba(255,255,255,.08); } .phl-main--services .phl-servicesGrid{ background: transparent; } /* Catalog results: long “Услуги — Make Model …” titles wrap on phones; global .phl-h1 uses line-height 1.02 which stacks lines on top of each other */ body.phl-catalog-page .phl-pageHero--results{ padding-top: clamp(18px, 4.5vw, 36px); padding-bottom: clamp(16px, 3vw, 28px); } body.phl-catalog-page .phl-pageHero--results .phl-h1{ margin: 0 0 12px; line-height: 1.22; font-size: clamp(22px, 5.4vw, 36px); overflow-wrap: anywhere; word-break: break-word; } body.phl-catalog-page .phl-pageHero--results .phl-p{ margin: 0 0 16px; line-height: 1.55; max-width: none; } body.phl-catalog-page .phl-pageHero--results .phl-resultsActions{ margin-top: 0; display: flex; justify-content: center; width: 100%; } body.phl-catalog-page .phl-pageHero--results .phl-container{ text-align: center; } body.phl-catalog-page .phl-pageHero--results .phl-h1, body.phl-catalog-page .phl-pageHero--results .phl-p{ text-align: center; } body.phl-catalog-page .phl-pageHero--results .phl-catalogNotice{ text-align: left; } .phl-catalogNotice{ margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,208,0,.35); background: rgba(255,208,0,.10); color: rgba(255,255,255,.95); font-size: 13px; line-height: 1.45; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .phl-catalogNotice[role="alert"]{ border-color: rgba(255, 90, 90, 0.42); background: rgba(255, 60, 60, 0.12); box-shadow: 0 0 0 1px rgba(255, 60, 60, 0.08); } .phl-catalogNotice[role="status"]{ border-color: rgba(120, 220, 140, 0.4); background: rgba(80, 180, 100, 0.12); } .phl-catalogNotice__range{ margin-top: 6px; font-weight: 700; } /* Catalog */ .phl-catalog{ padding: 28px 0 70px; } .phl-catalog__card{ max-width: 660px; margin: 0 auto; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: rgba(255,255,255,.05); padding: 18px; } /* Catalog browse (brand → model → trim → year) */ .phl-catalog--browse{ width: 100%; max-width: none; } .phl-catalogBreadcrumb{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.10); } .phl-catalogBreadcrumb__path{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; flex: 1 1 200px; font-size: 16px; font-weight: 800; color: rgba(255,255,255,.94); letter-spacing: 0.01em; } .phl-catalogBreadcrumb__item{ display: inline-flex; align-items: center; gap: 8px; line-height: 1.2; } .phl-catalogBreadcrumb__item:not(:last-child)::after{ content: "›"; margin-left: 8px; color: rgba(255,255,255,.72); font-weight: 900; font-size: 18px; line-height: 1; } .phl-catalogBreadcrumb__back, .phl-catalogBreadcrumb__reset{ flex: 0 0 auto; padding: 10px 14px; font-size: 13px; border-color: rgba(255,255,255,.24); color: rgba(255,255,255,.92); background: rgba(255,255,255,.06); } .phl-catalogBreadcrumb__back:hover, .phl-catalogBreadcrumb__reset:hover{ border-color: rgba(255,42,42,.5); color: #fff; background: rgba(255,255,255,.1); } .phl-catalogBreadcrumb--split{ justify-content: space-between; align-items: flex-start; gap: 12px 20px; } .phl-catalogBreadcrumb__slogan{ margin: 0; flex: 0 1 340px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: rgba(var(--phl-gold-rgb), 0.88); text-align: right; line-height: 1.35; } .phl-catalogBreadcrumb--split .phl-catalogBreadcrumb__path{ order: 0; } .phl-catalogBreadcrumb--split .phl-catalogBreadcrumb__slogan{ order: 1; } .phl-catalog__panels{ position: relative; min-height: 120px; } .phl-catalogStep{ display: none; animation: phlCatalogFade .35s ease; } .phl-catalogStep.is-active{ display: block; } @keyframes phlCatalogFade{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } } .phl-catalogStep__title{ font-family: Oxanium, system-ui, sans-serif; font-size: clamp(18px, 2.4vw, 22px); margin: 0 0 18px; font-weight: 800; color: rgba(255,255,255,.95); } .phl-catalogStep--powertrain{ position: relative; } .phl-catalogStep__title--sr{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Catalog: model → powertrain (engine) picker */ .phl-catalog--powertrainStep.phl-catalog--browse{ max-width: 1140px; margin-left: auto; margin-right: auto; padding-top: 12px; } .phl-catalog--powertrainStep .phl-catalogBreadcrumb{ margin-bottom: 14px; padding-bottom: 12px; align-items: center; } .phl-catalog--powertrainStep .phl-catalogBreadcrumb--split{ align-items: center; } .phl-catalog--powertrainStep .phl-catalogBreadcrumb__slogan{ font-size: 10px; letter-spacing: 0.12em; max-width: min(320px, 38vw); } .phl-catalogPowertrain{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr); gap: clamp(20px, 3vw, 32px); align-items: stretch; } .phl-catalog--powertrainStep .phl-catalogPowertrain{ padding: 22px 22px 24px; border-radius: 20px; border: 1px solid rgba(255,255,255,.1); background: var(--phl-panel-sheen); box-shadow: 0 24px 60px rgba(0,0,0,.35); } .phl-catalogPowertrain__showcase{ min-width: 0; display: flex; flex-direction: column; min-height: min(58vh, 540px); } .phl-catalog--powertrainStep .phl-catalogPowertrain__showcase{ border-right: 1px solid rgba(255,255,255,.08); padding-right: clamp(12px, 2vw, 22px); margin-right: -4px; } .phl-catalog--powertrainStep .phl-powertrainShowcase{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; } /* Apex-style hero: full-bleed image + bottom overlay */ .phl-catalog--powertrainStep .phl-powertrainShowcase--apex .phl-powertrainShowcase__hero{ position: relative; z-index: 1; flex: 1 1 auto; min-height: min(52vh, 500px); margin-bottom: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: var(--phl-surface); } .phl-catalog--powertrainStep .phl-powertrainShowcase__img{ position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center 42%; filter: grayscale(1) contrast(1.06); transform: scale(1.03); } .phl-powertrainShowcase__overlay{ position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 22px 24px; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.88) 100%); pointer-events: none; } .phl-powertrainShowcase__metaRow{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 14px; } .phl-powertrainShowcase__yearPill{ display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 4px; font-size: 11px; font-weight: 900; letter-spacing: 0.1em; color: #fff; background: #ff2a2a; box-shadow: 0 6px 20px rgba(255,42,42,.35); } .phl-powertrainShowcase__kicker{ font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.52); } .phl-powertrainShowcase__headline{ margin: 0; font-family: Oxanium, system-ui, sans-serif; font-size: clamp(24px, 3.6vw, 38px); font-weight: 900; letter-spacing: 0.04em; color: #fff; line-height: 1.05; text-shadow: 0 10px 40px rgba(0,0,0,.85); } .phl-catalog--powertrainStep .phl-powertrainShowcase--apex{ position: relative; } .phl-powertrainShowcase__watermark{ position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 0; font-family: Oxanium, system-ui, sans-serif; font-size: clamp(56px, 12vw, 104px); font-weight: 900; font-style: italic; letter-spacing: 0.04em; color: rgba(255,255,255,.045); pointer-events: none; white-space: nowrap; user-select: none; } .phl-powertrainShowcase__tagline{ margin: 14px 0 0; max-width: 52ch; font-size: 12px; line-height: 1.6; font-weight: 500; color: rgba(255,255,255,.66); letter-spacing: 0.03em; } .phl-powertrainShowcase__trimLine{ margin: 10px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,.9); } .phl-powertrainShowcase__tagline--muted{ opacity: 0.72; } .phl-powertrainShowcase__hero{ border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.35); margin-bottom: 18px; } .phl-powertrainShowcase__img{ display: block; width: 100%; height: auto; max-height: min(36vh, 320px); object-fit: contain; background: radial-gradient(120% 80% at 50% 30%, rgba(255,42,42,.12), transparent 55%); } .phl-powertrainShowcase__img--empty{ min-height: 220px; background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.2)); } .phl-catalog--powertrainStep .phl-powertrainShowcase__img--empty{ position: absolute; inset: 0; min-height: 100%; background: linear-gradient(160deg, #1c1c1c 0%, #080808 100%); } .phl-powertrainShowcase__titles{ display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .phl-powertrainShowcase__make{ font-family: Oxanium, system-ui, sans-serif; font-size: clamp(22px, 3.2vw, 34px); font-weight: 800; letter-spacing: 0.04em; color: rgba(255,255,255,.96); line-height: 1.05; } .phl-powertrainShowcase__model{ font-family: Oxanium, system-ui, sans-serif; font-size: clamp(26px, 4vw, 44px); font-weight: 900; letter-spacing: 0.02em; color: #ff2a2a; line-height: 1; } .phl-powertrainShowcase__intro{ margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.72); max-width: 42ch; } .phl-catalogPowertrain__sidebar{ min-width: 0; display: flex; flex-direction: column; gap: 12px; min-height: min(58vh, 540px); } .phl-catalog--powertrainStep .phl-catalogPowertrain__sidebar{ gap: 10px; } .phl-catalogPowertrain__sidebar--apex{ padding: 18px 16px 20px; border-radius: 14px; border: 1px solid rgba(255,255,255,.09); background: repeating-linear-gradient(-15deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px), linear-gradient(168deg, #181818 0%, #0a0a0a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .phl-catalogPowertrain__headKicker{ margin: 0 0 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--phl-gold-rgb), 0.9); } .phl-catalogPowertrain__activeSeries{ margin: 10px 0 6px; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.72); } .phl-catalogPowertrain__seriesKicker{ display: block; margin-bottom: 4px; font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--phl-gold-rgb), 0.88); } .phl-catalogPowertrain__seriesLine strong{ font-weight: 900; color: #fff; } .phl-catalogPowertrain__seriesYear{ font-weight: 800; color: rgba(var(--phl-gold-rgb), 0.95); } .phl-catalogPowertrain__head{ display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 12px; } .phl-catalog--powertrainStep .phl-catalogPowertrain__head{ flex-wrap: nowrap; align-items: flex-start; } .phl-catalog--powertrainStep .phl-catalogPowertrain__head--apex{ flex-direction: column; align-items: stretch; flex-wrap: wrap; gap: 0; } .phl-catalog--powertrainStep .phl-catalogPowertrain__sidebarTitle{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.14em; } .phl-catalog--powertrainStep .phl-catalogPowertrain__head--apex .phl-catalogPowertrain__sidebarTitle{ font-size: clamp(15px, 2.1vw, 21px); font-style: italic; font-weight: 900; letter-spacing: 0.02em; text-transform: none; color: rgba(255,255,255,.96); } .phl-catalogPowertrain__headAccent{ display: block; width: 32px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #ff2a2a, rgba(255,42,42,.35)); } .phl-catalogPowertrain__sidebarTitle{ margin: 0; font-family: Oxanium, system-ui, sans-serif; font-size: clamp(16px, 2vw, 18px); font-weight: 800; letter-spacing: 0.06em; color: rgba(255,255,255,.95); } .phl-catalogPowertrain__yearPill{ display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); } .phl-catalogPowertrain__listScroll{ flex: 1 1 auto; min-height: 0; max-height: min(52vh, 520px); overflow-y: auto; overflow-x: hidden; padding: 2px 6px 2px 2px; margin-right: -4px; scrollbar-gutter: stable; touch-action: pan-y; /* "contain" trapped momentum and felt like the page “pulled back” when chaining to window scroll */ overscroll-behavior: auto; -webkit-overflow-scrolling: touch; } .phl-catalog--powertrainStep .phl-catalogPowertrain__listScroll{ flex: 1 1 auto; min-height: 140px; max-height: none; } .phl-catalogPowertrain__listScroll::-webkit-scrollbar{ width: 8px; } .phl-catalogPowertrain__listScroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 8px; } .phl-catalogPowertrain__list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; align-items: stretch; } .phl-catalog--powertrainStep .phl-catalogPowertrain__list{ grid-template-columns: 1fr; gap: 10px; } .phl-powertrainCard{ position: relative; cursor: pointer; text-align: left; transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease, background .2s ease; } .phl-powertrainCard--apex{ display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; padding: 12px 14px 12px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: rgba(255,255,255,.95); text-align: left; } .phl-powertrainCard--spec{ position: relative; padding-left: 18px; } .phl-powertrainCard__accentBar{ position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--phl-accent-bar-gold); opacity: 0.85; } .phl-powertrainCard--top .phl-powertrainCard__accentBar{ background: linear-gradient(180deg, #ff3a3a, rgba(255,42,42,.45)); } .phl-powertrainCard--apex:hover{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.09); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.4); } .phl-powertrainCard--apex:focus-visible{ outline: 2px solid rgba(var(--phl-gold-rgb), 0.55); outline-offset: 2px; } .phl-powertrainCard--apex.phl-powertrainCard--top{ border-color: rgba(255,42,42,.4); background: linear-gradient(145deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.05) 100%); } .phl-powertrainCard__specTop{ display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; } .phl-powertrainCard__specTitles{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .phl-powertrainCard__lineBadge{ display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 9px; font-weight: 900; letter-spacing: 0.14em; color: #fff; background: rgba(255,42,42,.88); } .phl-powertrainCard--top .phl-powertrainCard__lineBadge{ box-shadow: 0 4px 12px rgba(255,42,42,.35); } .phl-powertrainCard__tier{ padding: 2px 7px; border-radius: 3px; font-size: 9px; font-weight: 900; letter-spacing: 0.12em; color: #fff; background: rgba(255,42,42,.92); } .phl-powertrainCard__years{ font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: rgba(255, 90, 90, 0.88); } .phl-powertrainCard__tierSub{ font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--phl-gold-rgb), 0.88); } .phl-powertrainCard__engine{ font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: rgba(255,255,255,.94); line-height: 1.25; } .phl-powertrainCard__modelName{ font-family: Oxanium, system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,.45); line-height: 1.2; } .phl-powertrainCard__corner{ flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color: rgba(255,255,255,.35); } .phl-powertrainCard--top .phl-powertrainCard__corner{ color: rgba(var(--phl-gold-rgb), 0.75); border-color: rgba(var(--phl-gold-rgb), 0.28); } .phl-powertrainCard__cornerIcon{ width: 18px; height: 18px; } .phl-powertrainCard__cta{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 2px; padding: 12px 14px; border-radius: 6px; font-size: 10px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: rgba(255,255,255,.92); pointer-events: none; text-align: center; line-height: 1.2; } .phl-powertrainCard__ctaIcon{ width: 16px; height: 16px; flex-shrink: 0; } .phl-powertrainCard__cta--trim{ margin-top: 0; } .phl-powertrainCard--top .phl-powertrainCard__cta{ border-color: transparent; background: linear-gradient(180deg, #ff3a3a, #c41818); color: #fff; } .phl-powertrainCard__lineBadge--muted{ background: rgba(255,255,255,.12); color: rgba(255,255,255,.75); box-shadow: none; } .phl-powertrainCard__specGrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 4px; } .phl-powertrainCard__specLab{ display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-bottom: 4px; } .phl-powertrainCard__specFig{ font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: 17px; font-weight: 800; color: rgba(255,255,255,.95); line-height: 1.1; } .phl-powertrainCard--apexUi:not(.phl-powertrainCard--top) .phl-powertrainCard__engine{ color: rgba(255,255,255,.78); } .phl-powertrainCard--apexUi:not(.phl-powertrainCard--top) .phl-powertrainCard__tierSub{ color: rgba(255,255,255,.42); } .phl-powertrainCard--apexUi:not(.phl-powertrainCard--top) .phl-powertrainCard__specLab{ color: rgba(255,255,255,.32); } .phl-powertrainCard--apexUi:not(.phl-powertrainCard--top) .phl-powertrainCard__specFig{ font-size: 15px; color: rgba(255,255,255,.55); } .phl-powertrainCard--apexUi:not(.phl-powertrainCard--top) .phl-powertrainCard__accentBar{ opacity: 0.35; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); } .phl-powertrainCard__cta--ghost{ background: transparent; border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.5); } @media (max-width: 620px){ .phl-powertrainCard__cta{ min-height: 44px; } .phl-powertrainCard__specGrid{ grid-template-columns: 1fr; } } .phl-catalog--powertrainStep .phl-catalogPowertrain__proTip{ flex: 0 0 auto; margin-top: auto; } .phl-catalogPowertrain__proTip{ margin-top: 6px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(var(--phl-gold-rgb), 0.22); box-shadow: inset 0 3px 0 0 rgba(var(--phl-yellow-rgb), 0.45); background: rgba(var(--phl-gold-rgb), 0.06); } .phl-catalogPowertrain__proTipLabel{ display: block; margin: 0 0 6px; font-size: 10px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--phl-gold-rgb), 0.92); } .phl-catalogPowertrain__proTipText{ margin: 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.68); } .phl-catalogGrid{ display: grid; width: 100%; gap: 16px; align-items: stretch; } .phl-catalogGrid--makes{ /* auto-fit collapses empty tracks and spreads cards across the row */ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .phl-catalogGrid--models, .phl-catalogGrid--variants{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* Engines page only: keep variant cards smaller and centered. */ .phl-catalog--engines .phl-catalogGrid--variants{ grid-template-columns: repeat(auto-fit, minmax(220px, 360px)); justify-content: center; } .phl-catalog--engines .phl-catalogGrid--variants .phl-variantCard{ width: 100%; max-width: 360px; justify-self: center; } /* Main catalog page: apply the same compact card sizing. */ .phl-catalog--compact .phl-catalogGrid--makes{ grid-template-columns: repeat(auto-fit, minmax(180px, 300px)); justify-content: center; } .phl-catalog--compact .phl-catalogGrid--models, .phl-catalog--compact .phl-catalogGrid--variants{ grid-template-columns: repeat(auto-fit, minmax(220px, 360px)); justify-content: center; } .phl-catalog--compact .phl-catalogGrid--makes .phl-makeCard{ width: 100%; max-width: 300px; justify-self: center; overflow: hidden; } .phl-catalog--compact [data-catalog-step="make"] .phl-catalogStep__title{ text-align: center; } .phl-catalog--compact .phl-catalogGrid--makes .phl-makeCard__photoWrap{ aspect-ratio: 16 / 9; max-height: none; overflow: hidden; } .phl-catalog--compact .phl-catalogGrid--makes .phl-makeCard--photo .phl-makeCard__photo{ display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } .phl-catalog--compact .phl-catalogGrid--makes .phl-makeCard[data-make="RAM"] .phl-makeCard__photo{ width: 92%; height: 92%; object-fit: contain; margin: 0 auto; } .phl-catalog--compact .phl-catalogGrid--models .phl-modelCard, .phl-catalog--compact .phl-catalogGrid--variants .phl-variantCard{ width: 100%; max-width: 360px; justify-self: center; } /* Model picker: larger cards on desktop only (catalog model step). */ @media (min-width: 981px){ .phl-catalog--compact .phl-catalogGrid--models{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .phl-catalog--compact .phl-catalogGrid--models .phl-modelCard{ max-width: 440px; padding: 16px 18px; } .phl-catalog--compact .phl-catalogGrid--models .phl-modelCard--photo .phl-modelCard__text{ padding: 16px 18px 18px; } .phl-catalog--compact .phl-catalogGrid--models .phl-modelCard__name{ font-size: 17px; } .phl-catalog--compact .phl-catalogGrid--models .phl-modelCard__icon{ width: 46px; height: 46px; } .phl-catalog--compact .phl-catalogGrid--models .phl-modelCard--photo .phl-modelCard__photoWrap{ aspect-ratio: 16 / 9; } } .phl-makeCard{ display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; min-height: 176px; width: 100%; padding: 20px 16px 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,.12); background: radial-gradient(120% 90% at 50% 0%, hsla(var(--phl-make-hue, 200), 85%, 52%, .22), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); color: rgba(255,255,255,.95); cursor: pointer; text-align: center; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .phl-makeCard--photo{ /* Keep the card height stable so the label never gets clipped. */ padding: 16px 16px 18px; overflow: visible; min-height: 176px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.15)); } .phl-makeCard__photoWrap{ width: 100%; aspect-ratio: 16 / 10; background: rgba(0,0,0,.35); max-height: 128px; overflow: hidden; } .phl-makeCard--photo .phl-makeCard__photo{ display: block; width: 100%; height: 100%; object-fit: contain; max-height: none; filter: none; } .phl-makeCard--photo .phl-makeCard__name{ padding: 8px 12px 6px; width: 100%; margin-top: 10px; border-radius: 14px; background: rgba(0,0,0,.40); backdrop-filter: blur(6px); } .phl-makeCard__visual{ flex: 1 1 auto; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 108px; } .phl-makeCard:hover{ border-color: hsla(var(--phl-make-hue, 200), 85%, 55%, .55); box-shadow: 0 12px 40px rgba(0,0,0,.25); transform: translateY(-2px); } .phl-makeCard:focus-visible{ outline: 2px solid rgba(255,208,0,.75); outline-offset: 3px; } .phl-makeCard__icon{ width: 80px; height: 80px; opacity: .98; color: rgba(255,255,255,.95); stroke-width: 1.75; } .phl-makeCard__name{ font-family: Oxanium, system-ui, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .02em; } /* Brand catalog grid: full-bleed photos from data/car-service-map.json (image_url + taglines) */ .phl-catalog--brandTiles .phl-catalogGrid--makes{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .phl-catalog--brandTiles.phl-catalog--compact .phl-catalogGrid--makes .phl-makeCard--brandTile{ max-width: none; } .phl-catalog--brandTiles .phl-makeCard--brandTile.phl-makeCard--photo{ position: relative; padding: 0; min-height: 0; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(165deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 45%), linear-gradient(180deg, rgba(20, 20, 20, 0.96), rgba(12, 12, 12, 0.96)); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 30px rgba(0,0,0,.34); } .phl-catalog--brandTiles .phl-makeCard--brandTile.phl-makeCard--photo::after{ content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(230,0,0,.9), rgba(255,80,80,.28), rgba(230,0,0,0)); transform: scaleX(.32); transform-origin: left center; opacity: .66; transition: transform .3s ease, opacity .3s ease; } .phl-catalog--brandTiles .phl-makeCard__media{ position: relative; display: block; width: 100%; min-height: 160px; aspect-ratio: 16 / 10; flex: 0 0 auto; background: #0a0a0a; isolation: isolate; border-radius: 22px 22px 0 0; overflow: hidden; } .phl-catalog--brandTiles .phl-makeCard__photo{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain; object-position: center center; filter: grayscale(0.12) contrast(1.04) brightness(1.02) saturate(1.05); transform: scale(1.03); transition: transform 0.4s ease, filter 0.4s ease; } .phl-catalog--brandTiles .phl-makeCard--brandTile:hover .phl-makeCard__photo{ transform: scale(1.08); filter: grayscale(0.06) contrast(1.05) brightness(1.04) saturate(1.08); } .phl-catalog--brandTiles .phl-makeCard__mediaShade{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, transparent 55%); pointer-events: none; z-index: 1; } .phl-catalog--brandTiles .phl-makeCard__mediaCaption{ position: relative; z-index: 2; padding: 10px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: linear-gradient(180deg, #101010 0%, #080808 100%); border-top: 1px solid rgba(255,255,255,.08); } .phl-catalog--brandTiles .phl-makeCard__footerTop{ display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; width: 100%; } .phl-catalog--brandTiles .phl-makeCard__mediaCaption .phl-makeCard__name{ font-size: clamp(14px, 2.8vw, 20px); letter-spacing: .06em; text-transform: uppercase; text-shadow: none; padding: 0; margin: 0; border-radius: 0; background: none; backdrop-filter: none; width: 100%; line-height: 1.15; color: rgba(255,255,255,.96); } .phl-catalog--brandTiles .phl-makeCard__mediaCaption .phl-makeCard__specBadge{ font-size: 9px; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; color: #ffb4a8; } .phl-catalog--brandTiles .phl-makeCard__mediaCaption .phl-makeCard__hoverLine{ margin-top: 6px; } .phl-catalog--brandTiles .phl-makeCard__tagline{ font-family: Manrope, system-ui, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.68); line-height: 1.4; max-width: 100%; padding-right: 28px; } .phl-catalog--brandTiles .phl-makeCard__chev{ flex-shrink: 0; font-size: 26px; font-weight: 300; line-height: 1; color: rgba(255,42,42,.95); text-shadow: 0 0 20px rgba(255,42,42,.35); } .phl-catalog--brandTiles .phl-makeCard--brandTile:hover{ border-color: rgba(255,42,42,.42); background: linear-gradient(165deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 45%), linear-gradient(180deg, rgba(26, 26, 26, 0.96), rgba(14, 14, 14, 0.96)); box-shadow: 0 22px 56px rgba(0,0,0,.42); transform: translateY(-3px); } .phl-catalog--brandTiles .phl-makeCard--brandTile:hover::after{ transform: scaleX(1); opacity: 1; } /* Brand carousel: horizontal scroll + hover isolates one tile */ .phl-catalogCarousel{ display: flex; flex-direction: row; align-items: stretch; gap: 10px; width: 100%; margin-top: 10px; } .phl-catalogCarousel__viewport{ flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-gutter: auto; padding: 6px 2px 18px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain; overscroll-behavior-y: auto; } .phl-catalogCarousel__viewport::-webkit-scrollbar{ display: none; height: 0; width: 0; } .phl-catalogCarousel__track.phl-catalogGrid--makes{ display: flex; flex-direction: row; flex-wrap: nowrap; gap: 18px; width: max-content; min-width: 100%; align-items: stretch; } .phl-catalogCarousel__track .phl-makeCard--brandTile{ flex: 0 0 min(300px, 85vw); max-width: 360px; scroll-snap-align: start; transition: filter 0.38s ease, opacity 0.38s ease, transform 0.38s ease, box-shadow 0.38s ease; } .phl-catalogCarousel__track--focus .phl-makeCard:not(.is-hovered){ filter: blur(2px) brightness(0.74); opacity: 0.78; transform: scale(0.98); } .phl-catalogCarousel__track--focus .phl-makeCard.is-hovered{ filter: none; opacity: 1; transform: scale(1.03); z-index: 4; box-shadow: 0 28px 64px rgba(0,0,0,.55); } /* Touch / no-hover: skip focus-hover dim (avoids stuck :hover + scroll issues). Dock-open: mild blur so the picked brand still pops. */ @media (max-width: 1024px), (max-device-width: 1024px), (hover: none), (pointer: coarse){ .phl-catalogCarousel__track--focus .phl-makeCard:not(.is-hovered){ filter: none !important; opacity: 1 !important; transform: none !important; } .phl-catalogCarousel__track--dockOpen .phl-makeCard:not(.is-selected){ filter: blur(1.2px) grayscale(0.22) brightness(0.84) !important; opacity: 0.82 !important; transform: scale(0.985) !important; } .phl-catalogCarousel__track .phl-makeCard--brandTile{ transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } } /* Brand sidebar open: blur & dim other manufacturers (red/black focus) */ .phl-catalogCarousel__track--dockOpen .phl-makeCard:not(.is-selected){ filter: blur(2.2px) grayscale(0.4) brightness(0.72); opacity: 0.72; transform: scale(0.97); } .phl-catalogCarousel__track--dockOpen .phl-makeCard.is-selected{ filter: none; opacity: 1; transform: scale(1.06); z-index: 6; box-shadow: 0 0 0 2px rgba(255, 42, 42, 0.55), 0 24px 56px rgba(0, 0, 0, 0.55); } /* Dock open: keep the active brand readable (matches Apex "SELECTED" mockup) */ .phl-catalogCarousel__track--focus .phl-makeCard.is-selected:not(.is-hovered){ filter: none; opacity: 1; transform: scale(1.02); z-index: 3; } .phl-catalogCarousel__track .phl-makeCard--brandTile.is-selected{ border-color: rgba(255,42,42,.72); box-shadow: 0 0 0 2px rgba(255,42,42,.45), 0 22px 48px rgba(0,0,0,.45); } .phl-catalogCarousel__track .phl-makeCard--brandTile.is-selected::before{ content: 'SELECTED'; position: absolute; top: 12px; left: 12px; z-index: 5; padding: 5px 11px; font-size: 9px; font-weight: 900; letter-spacing: 0.14em; color: #fff; background: linear-gradient(180deg, #ff3a3a, #c41818); border-radius: 3px; pointer-events: none; box-shadow: 0 6px 16px rgba(0,0,0,.35); } .phl-catalogCarousel__btn{ flex: 0 0 44px; align-self: center; width: 44px; height: 44px; margin-top: -8px; border-radius: 10px; border: 1px solid rgba(255, 42, 42, 0.45); background: linear-gradient(180deg, #1a0a0a 0%, #0a0a0a 100%); color: #ff3a3a; font-size: 26px; line-height: 1; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .phl-catalogCarousel__btn:hover{ background: linear-gradient(180deg, #ff3a3a 0%, #b01010 100%); border-color: #ff5a5a; color: #fff; } .phl-catalog--dockOpen .phl-catalogCarousel{ opacity: 1; } /* Dim main column when brand drawer open */ .phl-catalogShell--dockOpen .phl-catalog{ padding-right: 0; transition: none; } @media (max-width: 720px){ .phl-catalogShell--dockOpen .phl-catalog{ padding-right: 0; } } .phl-catalogShell__backdrop{ display: none !important; } @media (min-width: 721px){ .phl-catalogShell__backdrop{ display: none !important; } } .phl-catalogBrandSidebar{ position: relative; top: auto; right: auto; z-index: 2; width: min(1320px, calc(100% - 40px)); margin: 22px auto 24px; max-width: 100%; height: auto; max-height: none; display: flex; flex-direction: column; border: 0; border-radius: 16px; background: transparent; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; outline: 0; overflow: hidden; animation: phlDockRiseIn .32s ease; } /* [hidden] must win over display:flex (otherwise the dock stays on-screen). */ .phl-catalogBrandSidebar[hidden]{ display: none !important; } .phl-catalogShell__backdrop[hidden]{ display: none !important; } .phl-catalogBrandDock__inner--shell{ display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0; box-sizing: border-box; } .phl-catalogBrandDock__mast{ display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; padding: 24px 22px 22px; flex-shrink: 0; position: relative; z-index: 1; border-radius: 16px 16px 0 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: var(--phl-page-bg); background-attachment: fixed; } .phl-catalogBrandDock__mastBrand{ flex: 1 1 auto; min-width: 0; max-width: 100%; } .phl-catalogBrandDock__title{ margin: 0; font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: clamp(32px, 6vw, 42px); font-weight: 900; font-style: italic; letter-spacing: -0.02em; line-height: 0.95; text-transform: uppercase; color: #fff; text-shadow: 0 0 28px rgba(230, 0, 0, 0.25); overflow-wrap: anywhere; word-break: break-word; } .phl-catalogBrandDock__close{ flex-shrink: 0; padding: 12px 18px; border-radius: 2px; border: 1px solid rgba(230, 0, 0, 0.35); background: rgba(0, 0, 0, 0.35); color: #ffb4a8; font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .phl-catalogBrandDock__close:hover{ background: #e60000; border-color: #ff4a4a; color: #fff; } .phl-catalogBrandDock__pickStrip{ margin: 0; padding: 18px 22px; border-bottom: 0; background: transparent; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .phl-catalogBrandDock__pickStripTitle{ margin: 0; flex: 1 1 auto; min-width: 0; max-width: 100%; font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: 12px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; color: #e60000; overflow-wrap: anywhere; word-break: break-word; } .phl-catalogBrandDock__trimStrip{ margin: 0; padding: 16px 22px; border-bottom: 0; background: transparent; } .phl-catalogBrandDock__trimStripTitle{ margin: 0; font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: 12px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; color: #e60000; } .phl-catalogBrandDock__navBack{ display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0 0 0; padding: 12px 22px 16px; width: 100%; box-sizing: border-box; border: none; border-bottom: 0; background: transparent; color: #ffb4a8; font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; text-align: left; transition: color 0.2s ease, background 0.2s ease; } .phl-catalogBrandDock__navBack:hover{ color: #fff; background: rgba(230, 0, 0, 0.08); } .phl-catalogBrandDock__navBackIcon{ display: inline-block; transition: transform 0.2s ease; font-size: 14px; line-height: 1; } .phl-catalogBrandDock__navBack:hover .phl-catalogBrandDock__navBackIcon{ transform: translateX(-3px); } .phl-catalogBrandDock__empty{ margin: 0; padding: 20px 22px; font-size: 13px; color: rgba(255, 255, 255, 0.55); } .phl-catalogBrandDock__body--scroll{ flex: 0 0 auto; min-height: 0; overflow-y: visible; overflow-x: visible; padding: 12px 16px 44px; scrollbar-width: none; background: transparent; } .phl-catalogBrandDock__body--scroll::-webkit-scrollbar{ display: none; } .phl-catalogBrandDock__body--scroll::-webkit-scrollbar-track{ display: none; } .phl-catalogBrandDock__body--scroll::-webkit-scrollbar-thumb{ display: none; } .phl-catalogBrandDock__modelRow{ display: flex; flex-direction: row; flex-wrap: nowrap; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; } .phl-catalogBrandDock__modelRow::-webkit-scrollbar{ display:none; } /* Desktop / wide dock: wrap models & trims into 2–3 rows instead of horizontal scroll */ .phl-catalogBrandDock__modelRow--wrap{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; overflow: visible; scroll-snap-type: none; padding: 4px 2px 8px; } .phl-catalogBrandDock__modelRow--wrap .phl-catalogBrandDock__modelChip{ width: 100%; min-width: 0; max-width: none; scroll-snap-align: none; } @media (min-width: 981px){ .phl-catalogBrandDock__modelRow--wrap{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; } .phl-catalogBrandDock__modelRow--wrap .phl-catalogBrandDock__modelChip{ padding: 22px 20px; border-radius: 20px; } .phl-catalogBrandDock__modelRow--wrap .phl-catalogBrandDock__modelChip--photo{ padding: 14px; } .phl-catalogBrandDock__modelRow--wrap .phl-catalogBrandDock__modelChipPhotoWrap{ width: 134px; min-width: 134px; height: 78px; } .phl-catalogBrandDock__modelRow--wrap .phl-catalogBrandDock__modelChipName{ font-size: 19px; } } /* Model picker: two models per slide; horizontal snap (arrows scroll one slide) */ .phl-catalogBrandDock__modelCarousel{ width: 100%; margin-top: 8px; } .phl-catalogBrandDock__modelViewport{ overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: auto; -webkit-overflow-scrolling: touch; width: 100%; padding-bottom: 6px; scrollbar-width: thin; touch-action: pan-x pan-y; overscroll-behavior-x: auto; } .phl-catalogBrandDock__modelTrack{ display: flex; flex-direction: row; align-items: stretch; gap: 0; } .phl-catalogBrandDock__modelPair{ flex: 0 0 100%; width: 100%; min-width: 0; box-sizing: border-box; padding: 0 2px; display: flex; flex-direction: column; gap: 10px; scroll-snap-align: start; scroll-snap-stop: always; } .phl-catalogBrandDock__modelPair .phl-catalogBrandDock__modelChip{ width: 100%; min-width: 0; max-width: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 14px 12px; } .phl-catalogBrandDock__modelPair .phl-catalogBrandDock__modelChipName{ flex: none; width: 100%; font-size: clamp(14px, 3.6vw, 17px); } .phl-catalogBrandDock__modelPair .phl-catalogBrandDock__modelChipMeta{ white-space: normal; } /* Trim step (wizard): carousel with up to 4 trims stacked per slide */ .phl-catalogGrid--trims .phl-catalogBrandDock__modelCarousel{ width: 100%; margin-top: 0; } .phl-catalogBrandDock__modelPair--quad{ gap: 8px; } @media (max-width: 767px){ .phl-catalogGrid--trims .phl-catalogBrandDock__modelPair .phl-modelCard{ width: 100%; max-width: none; min-width: 0; } } .phl-catalogBrandDock__modelChip{ position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; width: min(340px, 82vw); min-width: min(340px, 82vw); padding: 18px 18px; box-sizing: border-box; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28); color: #fff; cursor: pointer; text-align: left; overflow: hidden; isolation: isolate; scroll-snap-align: start; transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease; } .phl-catalogBrandDock__modelChip:hover{ border-color: rgba(255,42,42,.45); background: rgba(255,255,255,.08); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.06), 0 16px 34px rgba(0, 0, 0, 0.46); transform: translateY(-2px); } .phl-catalogBrandDock__modelChip:active{ transform: translateY(0); } .phl-catalogBrandDock__modelChipName{ flex: 1 1 auto; min-width: 0; font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-weight: 900; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; font-style: italic; } .phl-catalogBrandDock__modelChipMeta{ flex-shrink: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: rgba(255, 180, 168, 0.95); white-space: nowrap; } .phl-catalogBrandDock__modelChip--photo{ align-items: stretch; gap: 12px; padding: 12px; } .phl-catalogBrandDock__modelChipPhotoWrap{ width: 108px; min-width: 108px; height: 64px; border-radius: 6px; background: radial-gradient(120% 100% at 50% 10%, rgba(230,0,0,.12), rgba(255,255,255,.02) 55%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; overflow: hidden; } .phl-catalogBrandDock__modelChipPhoto{ width: 100%; height: 100%; object-fit: contain; } .phl-catalogBrandDock__modelChipText{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } @media (max-width: 767px){ .phl-catalogBrandDock__modelPair .phl-catalogBrandDock__modelChip{ padding: 8px 8px 10px; gap: 6px; border-radius: 14px; } .phl-catalogBrandDock__modelPair .phl-catalogBrandDock__modelChip--photo{ padding: 8px 8px 10px; align-items: stretch; } .phl-catalogBrandDock__modelPair .phl-catalogBrandDock__modelChipPhotoWrap{ width: 100%; min-width: 0; height: clamp(112px, 28vw, 160px); border-radius: 8px; } .phl-catalogBrandDock__modelPair .phl-catalogBrandDock__modelChipPhoto{ transform: scale(1.12); } .phl-catalogBrandDock__modelPair .phl-catalogBrandDock__modelChipText{ width: 100%; align-items: center; text-align: center; gap: 4px; } .phl-catalogBrandDock__modelPair .phl-catalogBrandDock__modelChipName{ font-size: clamp(13px, 3.6vw, 16px); line-height: 1.1; } .phl-catalogBrandDock__modelPair .phl-catalogBrandDock__modelChipMeta{ font-size: 11px; letter-spacing: 0.1em; } } .phl-catalogBrandDock__variantList{ display: flex; flex-direction: row; gap: 14px; overflow-x: auto; /* Do not clip tall trim cards (horizontal strip + overflow-y:hidden was cutting the CTA/footer). */ overflow-y: visible; padding-bottom: 12px; scrollbar-width: none; touch-action: pan-x pan-y; overscroll-behavior-x: auto; -webkit-overflow-scrolling: touch; } .phl-catalogBrandDock__variantList::-webkit-scrollbar{ display:none; } .phl-catalogBrandDock__variantWrap{ width: min(430px, 90vw); min-width: min(430px, 90vw); } /* Dock trim / engine cards */ .phl-dockTrimCard{ position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 24px 20px 2px; box-sizing: border-box; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(17, 17, 17, 0.95); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28); color: #e5e2e1; cursor: pointer; text-align: left; overflow: hidden; isolation: isolate; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; } .phl-dockTrimCard:hover{ border-color: rgba(230, 0, 0, 0.45); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.5); transform: translateY(-2px); } .phl-dockTrimCard--top{ border-color: rgba(230, 0, 0, 0.22); } .phl-dockTrimCard__shine{ position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(230, 0, 0, 0.07) 0%, transparent 42%); opacity: 0.9; } .phl-dockTrimCard__top{ position: relative; z-index: 1; margin-bottom: 18px; } .phl-dockTrimCard__titles{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-right: 8px; } .phl-dockTrimCard__badge{ display: inline-block; padding: 4px 8px; border-radius: 2px; font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; background: #262626; color: rgba(180, 180, 180, 0.95); border: 1px solid rgba(255, 255, 255, 0.06); } .phl-dockTrimCard--top .phl-dockTrimCard__badge{ background: rgba(230, 0, 0, 0.2); color: #ffb4a8; border-color: rgba(230, 0, 0, 0.35); } .phl-dockTrimCard__engine{ font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: 20px; font-weight: 800; font-style: italic; letter-spacing: 0.02em; line-height: 1.2; color: #fff; } .phl-dockTrimCard__years{ font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; color: #ffb4a8; } .phl-dockTrimCard__tier{ font-family: Manrope, system-ui, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(163, 163, 163, 0.95); } .phl-dockTrimCard__specs{ position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; margin-bottom: 0; flex: 1 1 auto; } .phl-dockTrimCard__spec{ display: flex; flex-direction: column; gap: 6px; } .phl-dockTrimCard__specLab{ font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(115, 115, 115, 0.95); } .phl-dockTrimCard__specFig{ font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.08em; color: #fff; } .phl-dockTrimCard__bar{ height: 4px; width: 100%; border-radius: 999px; background: rgba(38, 38, 38, 0.95); overflow: hidden; } .phl-dockTrimCard__fill{ display: block; height: 100%; width: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(calc(var(--pct, 0) / 100)); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .phl-dockTrimCard__fill--hot{ background: linear-gradient(90deg, #c41818, #e60000); box-shadow: 0 0 12px rgba(230, 0, 0, 0.35); } .phl-dockTrimCard__fill--cool{ background: linear-gradient(90deg, #525252, #737373); } .phl-dockTrimCard__cta{ position: relative; z-index: 1; display: block; width: calc(100% + 2px); margin-left: -1px; margin-right: -1px; margin-bottom: 0; margin-top: 18px; padding: 14px 14px 18px; box-sizing: border-box; border-radius: 0 0 3px 3px; border: 1px solid rgba(255, 255, 255, 0.1); border-top-color: rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.32); background-clip: padding-box; font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: 11px; font-weight: 900; letter-spacing: 0.28em; text-transform: uppercase; text-align: center; color: rgba(180, 180, 180, 0.95); transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease; } .phl-dockTrimCard:hover .phl-dockTrimCard__cta{ border-top-color: rgba(230, 0, 0, 0.35); border-left-color: rgba(230, 0, 0, 0.45); border-right-color: rgba(230, 0, 0, 0.45); border-bottom-color: rgba(230, 0, 0, 0.45); color: #fff; background: rgba(230, 0, 0, 0.14); } .phl-dockTrimCard:focus-visible{ outline: 2px solid rgba(var(--phl-gold-rgb), 0.55); outline-offset: 2px; } .phl-modelCard, .phl-variantCard{ display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(255,255,255,.95); cursor: pointer; text-align: left; transition: border-color .2s ease, background .2s ease, transform .2s ease; } .phl-modelCard--photo{ flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; } .phl-modelCard__photoWrap{ width: 100%; aspect-ratio: 16 / 10; background: rgba(0,0,0,.35); } .phl-modelCard--photo .phl-modelCard__photo{ width: 100%; height: 100%; object-fit: cover; border-radius: 0; border: none; } .phl-modelCard--photo .phl-modelCard__text{ padding: 14px 16px 16px; } .phl-modelCard__visual, .phl-variantCard__visual{ flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .phl-modelCard__icon{ width: 42px; height: 42px; opacity: .92; color: rgba(255,255,255,.82); stroke-width: 1.75; } .phl-variantCard__icon{ width: 38px; height: 38px; opacity: .95; color: rgba(255,208,0,.72); stroke-width: 1.75; } .phl-variantCard--photo{ flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; } .phl-variantCard__photoWrap{ width: 100%; aspect-ratio: 500 / 439; background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; overflow: hidden; } .phl-variantCard__photo{ display: block; width: 100% !important; height: 100% !important; object-fit: contain !important; } .phl-variantCard--photo .phl-variantCard__text{ padding: 14px 16px; } .phl-modelCard__text, .phl-variantCard__text{ display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; } .phl-modelCard:hover, .phl-variantCard:hover{ border-color: rgba(255,42,42,.45); background: rgba(255,255,255,.08); transform: translateY(-2px); } .phl-modelCard:focus-visible, .phl-variantCard:focus-visible{ outline: 2px solid rgba(255,208,0,.75); outline-offset: 3px; } .phl-modelCard__name, .phl-variantCard__title{ font-family: Oxanium, system-ui, sans-serif; font-weight: 800; font-size: 16px; line-height: 1.25; } .phl-modelCard__meta, .phl-variantCard__meta{ font-size: 12px; font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: .03em; } .phl-catalogYearForm{ width: 100%; max-width: 520px; margin: 0 auto; padding: 18px; border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); } .phl-catalogYearForm__row{ margin-bottom: 16px; display: flex; flex-direction: column; gap: 7px; } .phl-catalogYearForm__select{ width: 100%; background: rgba(0,0,0,.35) !important; color: rgba(255,255,255,.95) !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 16px; padding: 12px 12px; outline: none; appearance: none; } .phl-catalogYearForm__select option{ background: #0b0b0b; color: rgba(255,255,255,.95); } /* Catalog year picker only — global rule leaked `overflow:hidden` onto Services/Shop if class stuck. */ body.phl-catalog-page.phl-hasYearModalOpen{ overflow: hidden !important; } @keyframes phlYearModalIn{ from{ opacity: 0; transform: translateY(14px) scale(0.98); } to{ opacity: 1; transform: translateY(0) scale(1); } } .phl-catalogYearModal{ position: fixed; inset: 0; z-index: 100200; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); box-sizing: border-box; } .phl-catalogYearModal[hidden]{ display: none !important; } .phl-catalogYearModal__backdrop{ position: absolute; inset: 0; background: radial-gradient(ellipse 120% 80% at 50% 40%, rgba(40, 0, 0, 0.45), rgba(0, 0, 0, 0.82)); backdrop-filter: blur(10px); } .phl-catalogYearModal__panel{ position: relative; z-index: 1; width: 100%; max-width: 400px; max-height: min(90vh, 560px); display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); background: radial-gradient(120% 80% at 50% 0%, rgba(230, 0, 0, 0.12), transparent 55%), linear-gradient(168deg, #1a1a1c 0%, #0a0a0c 48%, #050506 100%); box-shadow: 0 32px 90px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 1px 0 rgba(255, 255, 255, 0.07) inset; animation: phlYearModalIn 0.38s cubic-bezier(0.16, 1, 0.3, 1); } .phl-catalogYearModal__panel::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 24px 24px 0 0; background: linear-gradient(90deg, #5c0000, #e60000 40%, #ff6b4a 100%); opacity: 0.95; } .phl-catalogYearModal__panelHead{ padding: 26px 22px 16px; padding-right: 52px; flex-shrink: 0; } .phl-catalogYearModal__close{ position: absolute; top: 16px; right: 14px; width: 40px; height: 40px; padding: 0; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.88); font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; } .phl-catalogYearModal__close:hover{ background: rgba(230, 0, 0, 0.9); color: #fff; } .phl-catalogYearModal__close:focus-visible{ outline: 2px solid rgba(255, 100, 100, 0.85); outline-offset: 2px; } .phl-catalogYearModal__title{ margin: 0 0 10px; font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: clamp(18px, 4.2vw, 22px); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; font-style: italic; line-height: 1.15; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); } .phl-catalogYearModal__hint{ margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 200, 190, 0.55); max-width: 36ch; } .phl-catalogYearModal__grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding: 4px 18px 22px; overflow-x: hidden; overflow-y: auto; max-height: min(46vh, 340px); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(230, 0, 0, 0.45) rgba(255, 255, 255, 0.06); } .phl-catalogYearModal__grid::-webkit-scrollbar{ width: 6px; } .phl-catalogYearModal__grid::-webkit-scrollbar-thumb{ background: rgba(230, 0, 0, 0.45); border-radius: 99px; } .phl-catalogYearModal__yearBtn{ appearance: none; padding: 16px 10px; border-radius: 16px; border: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.025) 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 22px rgba(0, 0, 0, 0.28); color: #f4f4f5; font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-weight: 800; font-size: clamp(15px, 3.8vw, 17px); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; cursor: pointer; transition: background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, transform 0.15s ease; } .phl-catalogYearModal__yearBtn:hover{ background: linear-gradient(180deg, rgba(230, 0, 0, 0.35) 0%, rgba(100, 0, 0, 0.45) 100%); box-shadow: 0 1px 0 rgba(255, 160, 140, 0.2) inset, 0 12px 28px rgba(230, 0, 0, 0.22); color: #fff; transform: translateY(-2px); } .phl-catalogYearModal__yearBtn:focus-visible{ outline: 2px solid rgba(255, 120, 100, 0.9); outline-offset: 2px; } .phl-catalogYearModal__yearBtn:active{ transform: translateY(0); } @media (max-width: 360px){ .phl-catalogYearModal__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-left: 16px; padding-right: 16px; } } @media (prefers-reduced-motion: reduce){ .phl-catalogYearModal__panel{ animation: none; } } .phl-catalog__hint{ margin-top: 36px; text-align: center; } .phl-catalogBrandSidebar::after{ display: none; } @keyframes phlDockRiseIn{ from{ opacity: .2; transform: translateY(12px); } to{ opacity: 1; transform: translateY(0); } } .phl-resultsTrim{ display: inline-block; margin-left: 6px; font-weight: 700; color: rgba(255,255,255,.88); } .phl-resultsVariant{ display: inline-block; margin-left: 6px; font-weight: 800; color: rgba(255,208,0,.95); } /* Services grid */ .phl-servicesGrid{ padding: 44px 0 70px; } /* Catalog results: vertical rhythm between carousel and lead (layout / align) */ .phl-servicesGrid--resultsCarousel{ display: flex; flex-direction: column; align-items: stretch; gap: clamp(20px, 3.5vw, 32px); } .phl-servicesGrid__cards{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .phl-svc{ display: flex; flex-direction: column; align-items: stretch; min-height: 0; border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); padding: 16px; box-shadow: 0 14px 48px rgba(0,0,0,.2); box-sizing: border-box; min-width: 0; overflow: hidden; contain: layout; transform: translate3d(0, 12px, 0); opacity: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease; backface-visibility: hidden; } .phl-svc[data-reveal].is-visible{ transform: translate3d(0, 0, 0); opacity: 1; } .phl-svc__title{ margin: 0; flex: 0 0 auto; font-family: Oxanium, system-ui, sans-serif; font-size: 16px; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } .phl-svc__desc{ flex: 1 1 auto; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; min-height: 0; } .phl-svc__cta{ flex: 0 0 auto; margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .phl-servicesGrid__lead{ margin-top: 0; border-radius: 28px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); padding: clamp(18px, 3vw, 24px); display: flex; flex-direction: column; align-items: stretch; gap: 16px; max-width: min(640px, 100%); margin-left: auto; margin-right: auto; box-sizing: border-box; } .phl-servicesGrid__lead > .phl-h2{ margin: 0; text-align: left; } .phl-servicesGrid__lead > .phl-p{ margin: 0; text-align: left; max-width: 65ch; } .phl-servicesGrid__lead .phl-leadForm{ width: 100%; } /* Contact page: scroll target sits below fixed header */ #phl-lead-anchor.phl-contactCard{ scroll-margin-top: calc(var(--phl-header-h, 72px) + 16px); } .phl-resultsActions{ margin-top: 12px; } .phl-servicesPageContent{ margin-bottom: 20px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); } /* Services carousel: up to 3 services per slide (stacked on phone); swipe / arrows advance one slide — desktop = 3-col grid */ .phl-servicesCarousel{ position: relative; margin-top: 6px; width: 100%; } .phl-servicesCarousel__viewport{ position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-behavior: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; touch-action: pan-x pan-y; overscroll-behavior-x: auto; } .phl-servicesCarousel__track{ display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0; min-width: 0; align-items: flex-start; } .phl-servicesCarousel__slide{ flex: 0 0 100%; width: 100%; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 0 4px; scroll-snap-align: start; scroll-snap-stop: always; align-items: stretch; } .phl-servicesCarousel__slide--stack{ gap: 10px; } /* --phl-services-slide-w is set in main.js (padding-aware) so slides match the scrollport width */ .phl-servicesCarousel__btn{ display: none; align-items: center; justify-content: center; position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; background: rgba(10, 10, 10, 0.72); color: rgba(255, 255, 255, 0.95); cursor: pointer; transform: translateY(-50%); touch-action: manipulation; -webkit-tap-highlight-color: transparent; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); transition: background 0.18s ease, border-color 0.18s ease; } .phl-servicesCarousel__btn:hover{ background: rgba(255, 42, 42, 0.18); border-color: rgba(255, 42, 42, 0.45); } .phl-servicesCarousel__btn:focus-visible{ outline: 2px solid rgba(var(--phl-gold-rgb), 0.65); outline-offset: 2px; } .phl-servicesCarousel__btn--prev{ left: 0; } .phl-servicesCarousel__btn--next{ right: 0; } .phl-servicesCarousel__btnIcon{ font-size: 28px; font-weight: 700; line-height: 1; margin-top: -2px; } @media (max-width: 1024px){ /* Viewport row 1; prev/next centered as a pair (1fr auto auto 1fr) so arrows aren’t skewed right */ .phl-servicesCarousel{ display: grid; grid-template-columns: 1fr auto auto 1fr; grid-template-rows: auto auto; gap: 14px 8px; align-items: start; width: 100%; max-width: 100%; } .phl-servicesCarousel__viewport{ grid-column: 1 / -1; grid-row: 1; padding: 0 8px; box-sizing: border-box; scroll-snap-type: x mandatory; overscroll-behavior-x: auto; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scrollbar-width: none; } .phl-servicesCarousel__viewport::-webkit-scrollbar{ display: none; height: 0; width: 0; } .phl-servicesCarousel__btn{ display: inline-flex; position: relative; left: auto; right: auto; top: auto; transform: none; margin: 0; flex: 0 0 auto; } .phl-servicesCarousel__btn--prev{ grid-column: 2; grid-row: 2; justify-self: end; } .phl-servicesCarousel__btn--next{ grid-column: 3; grid-row: 2; justify-self: start; } .phl-servicesCarousel__slide{ flex: 0 0 var(--phl-services-slide-w, 100%); width: var(--phl-services-slide-w, 100%); min-width: var(--phl-services-slide-w, 100%); max-width: var(--phl-services-slide-w, 100%); min-height: 0; padding: 0 8px; box-sizing: border-box; align-self: stretch; } .phl-servicesCarousel__slide .phl-svc{ width: 100%; max-width: 100%; flex: 0 0 auto; margin: 0; padding: 18px 16px 20px; box-sizing: border-box; overflow: hidden; border-radius: 22px; transform: translate3d(0, 0, 0); backface-visibility: hidden; } .phl-servicesCarousel__slide--stack .phl-svc{ padding: 15px 14px 16px; } .phl-servicesCarousel__slide .phl-svc__title{ font-size: clamp(14px, 3.9vw, 17px); line-height: 1.35; } /* Catalog results: full-width card, no stray border pixels; comfortable tap targets */ body.phl-catalog-page .phl-servicesGrid--resultsCarousel .phl-servicesCarousel__slide{ align-items: stretch; justify-content: flex-start; } body.phl-catalog-page .phl-servicesGrid--resultsCarousel .phl-servicesCarousel__slide .phl-svc{ max-width: 100%; width: 100%; margin: 0; padding: 18px 16px 20px; box-sizing: border-box; overflow: hidden; border-radius: 22px; transform: translateZ(0); backface-visibility: hidden; } body.phl-catalog-page .phl-servicesGrid--resultsCarousel .phl-servicesCarousel__slide--stack .phl-svc{ padding: 15px 14px 16px; } body.phl-catalog-page .phl-servicesGrid--resultsCarousel .phl-servicesCarousel__slide .phl-svc__title{ font-size: clamp(14px, 3.9vw, 17px); line-height: 1.35; } } @media (min-width: 1025px){ .phl-servicesCarousel{ display: block; } .phl-servicesCarousel__btn{ display: none !important; } .phl-servicesCarousel__viewport{ overflow: visible; padding: 0; grid-column: auto; grid-row: auto; } .phl-servicesCarousel__track{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; align-items: stretch; justify-items: stretch; } .phl-servicesCarousel__slide{ display: contents; padding: 0 4px; } .phl-servicesCarousel__track .phl-svc{ min-width: 0; max-width: 100%; width: auto; height: 100%; } } .phl-shopWrap{ padding: 28px 0 80px; } .phl-contactWrap{ padding: 28px 0 80px; } .phl-contactCard{ max-width: 700px; margin: 0 auto; border-radius: 24px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); padding: 22px; display: flex; flex-direction: column; align-items: stretch; gap: 18px; box-sizing: border-box; } .phl-contactCard .phl-leadForm{ width: 100%; } /* Footer — theme blend (see --phl-footer-bg), pairs with header treatment */ .phl-footer{ border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 22px 0 30px; margin-top: auto; background: var(--phl-footer-bg); background-attachment: fixed; box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.38); } .phl-footer__inner{ display:grid; grid-template-columns: 1fr; justify-items: center; align-items: center; gap: 20px; } .phl-footer__contact{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; } .phl-footer__item{ border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 9px 11px; background: rgba(255,255,255,.03); display: inline-flex; flex-direction: column; gap: 2px; } .phl-footer__item:hover{ border-color: rgba(var(--phl-gold-rgb), 0.32); background: rgba(255,255,255,.07); } .phl-footer__contact a.phl-footer__item{ text-decoration: none; color: inherit; } .phl-footer__legal .phl-footer__note a{ color: rgba(255,255,255,.92); text-decoration: underline; text-underline-offset: 2px; } .phl-footer__legal--bottom{ margin-top: 8px; } .phl-footer__note--copyright{ margin: 0; } .phl-footer__label{ font-size: 11px; color: rgba(255,255,255,.65); } .phl-footer__value{ font-size: 13px; color: rgba(255,255,255,.92); font-weight: 700; } .phl-footer__legal{ margin-left: 0; text-align: center; } .phl-footer__copy{ color: rgba(255,255,255,.8); font-weight: 800; } .phl-footer__note{ color: rgba(255,255,255,.6); max-width: 520px; text-align: center; line-height: 1.5; font-size: 12px; } /* Responsive */ @media (max-width: 980px){ .phl-hero__cards{grid-template-columns: 1fr; } .phl-servicesGrid__cards{grid-template-columns: 1fr; } .phl-catalogGrid--makes{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .phl-catalogGrid--models, .phl-catalogGrid--variants{ grid-template-columns: 1fr; } .phl-catalog--engines .phl-catalogGrid--variants{ grid-template-columns: 1fr; } .phl-catalog--engines .phl-catalogGrid--variants .phl-variantCard{ max-width: 100%; } .phl-catalog--compact .phl-catalogGrid--makes, .phl-catalog--compact .phl-catalogGrid--models, .phl-catalog--compact .phl-catalogGrid--variants{ grid-template-columns: 1fr; } .phl-catalog--compact .phl-catalogGrid--makes .phl-makeCard, .phl-catalog--compact .phl-catalogGrid--models .phl-modelCard, .phl-catalog--compact .phl-catalogGrid--variants .phl-variantCard{ max-width: 100%; } .phl-catalogBreadcrumb{ flex-direction: column; align-items: stretch; } .phl-catalogBreadcrumb__path{ order: 2; } .phl-catalogBreadcrumb--split .phl-catalogBreadcrumb__path{ order: 0; } .phl-catalogBreadcrumb--split .phl-catalogBreadcrumb__slogan{ order: 1; text-align: left; flex: 1 1 auto; } .phl-catalogPowertrain{ grid-template-columns: 1fr; } .phl-catalog--powertrainStep .phl-catalogPowertrain__showcase{ border-right: none; padding-right: 0; margin-right: 0; min-height: 0; padding-bottom: 8px; } .phl-catalog--powertrainStep .phl-catalogPowertrain__sidebar{ min-height: 0; } .phl-catalog--powertrainStep .phl-catalogPowertrain__head{ flex-wrap: wrap; } .phl-catalog--powertrainStep .phl-catalogPowertrain__yearPill{ margin-left: 0; } .phl-catalog--powertrainStep .phl-catalogPowertrain__listScroll{ max-height: min(52vh, 460px); } .phl-quoteStrip__inner{ flex-direction: column; align-items: flex-start; } .phl-footer__inner{ align-items: center; } .phl-footer__legal{ text-align: center; } .phl-footer__note{ text-align: center; } } /* Keep catalog cards in columns on medium/smaller widths (e.g. WP Customizer preview). */ @media (max-width: 980px) and (min-width: 520px){ .phl-catalog--compact .phl-catalogGrid--makes{ grid-template-columns: repeat(2, minmax(170px, 1fr)); justify-content: center; } .phl-catalog--compact .phl-catalogGrid--models, .phl-catalog--compact .phl-catalogGrid--variants{ grid-template-columns: repeat(2, minmax(190px, 1fr)); justify-content: center; } .phl-catalog--engines .phl-catalogGrid--variants{ grid-template-columns: repeat(2, minmax(190px, 1fr)); justify-content: center; } } /* ——— Catalog page: brand grid (reference layout) ——— */ .phl-catalogSection{ padding-bottom: 48px; } .phl-catalogSection--fullBleed{ padding-bottom: 0; } /* Catalog/Services/Shop/Home visual cleanup: one unified surface/palette. */ body.phl-services-page, body.phl-shop-page, body.home{ background: radial-gradient(120% 90% at 50% -10%, rgba(var(--phl-red-rgb), 0.22), transparent 52%), radial-gradient(95% 70% at 88% 6%, rgba(var(--phl-yellow-rgb), 0.09), transparent 50%), var(--phl-page-bg) !important; /* Shorthand above resets attachment; keep fixed so backdrop matches the rest of the site. */ background-attachment: fixed !important; } /* * Touch devices: MUST win over the rule above. Coarse pointer is not `(pointer: fine)`, so the * next block does not run — and without `(max-width: 1023px)` (e.g. landscape / large phones) the * body keeps `fixed` + compositor bugs on Android (scroll appears “stuck”, esp. Services). */ @media (max-width: 1024px), (max-device-width: 1024px), (hover: none), (pointer: coarse){ body.phl-services-page, body.phl-shop-page, body.home{ background-attachment: scroll !important; } } /* Desktop: fixed backgrounds repaint every scroll frame (jank + bright seam at overscroll). Overrides rule above. */ @media (pointer: fine){ html{ background-attachment: scroll; } body, body.home, body.phl-services-page, body.phl-shop-page{ background-attachment: scroll !important; } } /* * Catalog: always scroll the backdrop (not fixed). Fixed attachment + long scroll causes repaint * jank and a “rubber band / snaps back” feel at the viewport edges (esp. desktop + touchpads). */ body.phl-catalog-page{ background: radial-gradient(120% 90% at 50% -10%, rgba(var(--phl-red-rgb), 0.22), transparent 52%), radial-gradient(95% 70% at 88% 6%, rgba(var(--phl-yellow-rgb), 0.09), transparent 50%), var(--phl-page-bg) !important; background-attachment: scroll !important; } /* Touch: mandatory scroll-snap on horizontal strips fights vertical page scroll — disable snap only. * `overscroll-behavior-x: contain` on the brand carousel traps chaining on iOS WebKit (draw-back feel). * Do NOT set touch-action: pan-x here: it blocks vertical scrolling when the gesture starts on a card/image. */ @media (max-width: 1024px), (max-device-width: 1024px), (hover: none), (pointer: coarse){ body.phl-catalog-page .phl-catalogCarousel__viewport, body.phl-catalog-page .phl-catalogBrandDock__modelViewport, body.phl-catalog-page .phl-catalogBrandDock__variantList, body.phl-catalog-page .phl-servicesCarousel__viewport{ scroll-snap-type: none; overscroll-behavior-x: auto; overscroll-behavior-y: auto; } body.phl-catalog-page .phl-catalogBrandDock__modelPair, body.phl-catalog-page .phl-servicesCarousel__slide{ scroll-snap-stop: normal; } /* * Same rubber-band tweak as above, but ONLY on real iOS WebKit (`phl-ios` on ). * Applying `overscroll-behavior: none` on both `html` and `body` breaks touch scrolling on * many Android Chrome / Firefox builds — do not use that combo for Android. */ html.phl-ios.phl-html--catalog, html.phl-ios body.phl-catalog-page{ overscroll-behavior: none; } } /* Catalog-only: limit scroll anchoring when layout shifts (footer, dock, images). */ html.phl-html--catalog, body.phl-catalog-page, body.phl-catalog-page .phl-main, body.phl-catalog-page .phl-catalogShell{ overflow-anchor: none; } body.phl-catalog-page .phl-main, body.phl-catalog-page .phl-catalogSection, body.phl-catalog-page .phl-catalogShell, body.phl-services-page .phl-main, body.phl-shop-page .phl-main, body.home .phl-main{ background: transparent !important; } /* Keep catalog background on body only to avoid seam lines. */ body.phl-catalog-page .phl-main{ /* `100dvh` reflows when iOS Chrome/Safari chrome shows/hides (jank). `100svh` is stable. */ min-height: 100vh; min-height: 100svh; background: transparent !important; } body.phl-services-page .phl-main, body.phl-shop-page .phl-main{ min-height: 100vh; } body.phl-catalog-page .phl-brandStage{ background: transparent !important; background-image: none !important; } body.phl-catalog-page .phl-catalogBrandSidebar, body.phl-catalog-page .phl-catalogBrandDock__inner--shell, body.phl-catalog-page .phl-catalogBrandDock__body--scroll{ background: transparent !important; background-image: none !important; } body.phl-catalog-page .phl-header, body.phl-services-page .phl-header, body.phl-shop-page .phl-header, body.home .phl-header{ background: transparent !important; border-bottom: 0 !important; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.16) !important; background-attachment: scroll !important; } body.phl-catalog-page .phl-footer, body.phl-services-page .phl-footer, body.phl-shop-page .phl-footer, body.home .phl-footer{ border-top: 0 !important; box-shadow: none !important; background: var(--phl-footer-bg) !important; } /* Do NOT set background-image: initial on .phl-footer — the footer palette is gradient-only; clearing background-image makes the footer transparent and shows white below on iOS. */ body.phl-catalog-page .phl-main::after{ content: none !important; } /* Narrow viewports / phones: fixed backgrounds repaint at scroll bounds (esp. iOS), causing a visible color jump near the footer. Scroll attachment keeps layers aligned with content. */ @media (max-width: 1023px){ body, body.home, body.phl-catalog-page, body.phl-services-page, body.phl-shop-page{ background-attachment: scroll !important; } .phl-header, body.phl-catalog-page .phl-header, body.phl-services-page .phl-header, body.phl-shop-page .phl-header, .phl-footer, .phl-catalogBrandDock__mast{ background-attachment: scroll !important; } /* Mobile catalog: keep header on the same palette as page body to avoid a hard color seam. */ body.phl-catalog-page .phl-header, body.phl-services-page .phl-header, body.phl-shop-page .phl-header, body.home .phl-header{ background: transparent !important; border-bottom: 0 !important; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.16) !important; } /* Reduce expensive paint/compositing work on mobile to keep scroll smooth. */ .phl-hero--videoSoft .phl-hero__video{ transform: none !important; } .phl-hero__overlay{ transform: none !important; } .phl-quoteStrip__inner, .phl-servicesWrap, .phl-catalogBrandDock__inner--shell{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* iOS home-indicator zone: extend footer paint + solid canvas fallback so no white band */ html{ background-color: var(--bg0); } body{ background-color: var(--bg0); } .phl-footer{ padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); } } .phl-catalogShell{ position: relative; } .phl-catalogSection .phl-catalogBreadcrumb{ margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } body.phl-catalog-page .phl-catalogSection .phl-catalogBreadcrumb{ margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .phl-catalogBreadcrumb__path:empty{ display: none; } .phl-carbonPattern{ background-color: var(--phl-carbon-base); background-image: linear-gradient(45deg, var(--phl-carbon-stripe) 25%, transparent 25%, transparent 75%, var(--phl-carbon-stripe) 75%, var(--phl-carbon-stripe)), linear-gradient(45deg, var(--phl-carbon-stripe) 25%, transparent 25%, transparent 75%, var(--phl-carbon-stripe) 75%, var(--phl-carbon-stripe)); background-size: 4px 4px; background-position: 0 0, 2px 2px; } /* Catalog page: use one background system only (no duplicate texture stack). */ body.phl-catalog-page .phl-carbonPattern{ background-color: transparent; background-image: none; } .phl-brandStage{ position: relative; padding: 32px 0 0; overflow: hidden; } body.phl-catalog-page .phl-brandStage{ background: transparent; padding-bottom: 34px; } body.phl-catalog-page .phl-brandStage__glows{ display: block; opacity: 0.72; } .phl-brandStage__glows{ position: absolute; inset: 0; pointer-events: none; z-index: 0; } .phl-brandStage__glows::before, .phl-brandStage__glows::after{ content: ''; position: absolute; width: min(500px, 55vw); height: min(500px, 55vw); border-radius: 50%; filter: blur(120px); opacity: 0.9; } .phl-brandStage__glows::before{ top: 10%; left: 15%; background: rgba(230, 0, 0, 0.12); } .phl-brandStage__glows::after{ bottom: 5%; right: 15%; background: rgba(var(--phl-yellow-rgb), 0.1); } .phl-brandStage__headerWrap{ position: relative; z-index: 1; } .phl-brandStage__header{ text-align: center; margin-bottom: clamp(32px, 6vw, 56px); padding: 0 8px; } .phl-brandStage__kickerRow{ display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; } .phl-brandStage__kickerLine{ width: 48px; height: 2px; background: #e60000; border-radius: 1px; } body.phl-catalog-page .phl-brandStage__kickerLine{ display: none; } body.phl-catalog-page .phl-brandStage__kickerRow{ gap: 0; } .phl-brandStage__kicker{ font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #ffb4a8; } .phl-brandStage__title{ margin: 0 0 20px; font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: clamp(36px, 8vw, 96px); font-weight: 900; line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; color: #fff; } body.phl-lang-bg .phl-brandStage__title{ text-transform: none; } .phl-brandStage__titleAccent{ display: inline; color: #ff3a3a; } .phl-brandStage__lead{ margin: 0 auto; max-width: 42rem; font-family: Manrope, system-ui, sans-serif; font-size: clamp(12px, 1.8vw, 15px); line-height: 1.65; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(233, 188, 181, 0.88); } body.phl-catalog-page .phl-brandGrid.phl-catalogGrid--makes{ position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; overflow: visible; padding: 8px 2px 12px; } @media (min-width: 768px){ body.phl-catalog-page .phl-brandGrid.phl-catalogGrid--makes{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } } @media (min-width: 1100px){ body.phl-catalog-page .phl-brandStage > .phl-container{ width: min(1360px, calc(100% - 56px)); } body.phl-catalog-page .phl-brandGrid.phl-catalogGrid--makes{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 10px 0 14px; } body.phl-catalog-page .phl-brandGrid .phl-makeCard__media{ aspect-ratio: 16 / 10.4; } } body.phl-catalog-page .phl-brandGrid .phl-makeCard--brandTile.phl-makeCard--photo{ position: relative; width: 100%; min-height: 0; border-radius: 18px !important; border: 1px solid rgba(255,255,255,.12) !important; background: rgba(255,255,255,.05) !important; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35) !important; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease, box-shadow 0.45s ease, border-color 0.3s ease; } body.phl-catalog-page .phl-brandGrid .phl-makeCard__media{ position: relative; width: 100%; min-height: 0; aspect-ratio: 16 / 11; flex: 0 0 auto; border-radius: 18px 18px 0 0 !important; overflow: hidden; background: radial-gradient(120% 90% at 50% 12%, rgba(255,48,48,.16), rgba(0,0,0,.24) 56%, rgba(0,0,0,.36) 100%), var(--phl-page-bg) !important; } body.phl-catalog-page .phl-brandGrid .phl-makeCard__photo{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; object-position: center center; filter: none; transform: scale(1); transition: transform 0.65s ease; padding: 0; box-sizing: border-box; } body.phl-catalog-page .phl-brandGrid .phl-makeCard--brandTile:hover .phl-makeCard__photo{ transform: scale(1.04); } body.phl-catalog-page .phl-brandGrid .phl-makeCard__mediaShade{ position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(40,0,0,.06) 0%, rgba(28,0,0,.14) 52%, rgba(12,0,0,.28) 78%, rgba(8,0,0,.42) 100% ) !important; opacity: 1 !important; } body.phl-catalog-page .phl-brandGrid .phl-makeCard__mediaCaption{ position: relative; z-index: 2; padding: 10px 12px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-top: 0 !important; background: rgba(255,255,255,.05) !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; border-left: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.phl-catalog-page .phl-brandGrid .phl-makeCard__specBadge{ font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffb4a8; } body.phl-catalog-page .phl-brandGrid .phl-makeCard__name{ font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: clamp(14px, 3.2vw, 22px); font-weight: 900; font-style: italic; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1.1; color: #fff; text-shadow: none; } .phl-inlineSweepers{ margin-top: 10px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; } .phl-catalogBrandDock__pickStrip .phl-inlineSweepers{ margin-top: 0; flex-shrink: 0; } .phl-revealPulse{ animation: phlRevealPulseDown .38s ease; } @keyframes phlRevealPulseDown{ from{ opacity: 0.35; transform: translateY(-10px); } to{ opacity: 1; transform: translateY(0); } } .phl-inlineSweepers__btn{ width: 34px; height: 34px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .phl-inlineSweepers__btn:hover{ background: rgba(230, 0, 0, 0.85); border-color: rgba(255, 80, 80, 0.9); transform: translateY(-1px); } body.phl-catalog-page .phl-brandGrid .phl-makeCard__hoverLine{ display: block; height: 4px; width: 100%; margin-top: 4px; margin-left: auto; margin-right: auto; background: #e60000; border-radius: 1px; transform: scaleX(0); transform-origin: center; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } body.phl-catalog-page .phl-brandGrid .phl-makeCard--brandTile:hover .phl-makeCard__hoverLine{ transform: scaleX(1); } /* Isolate hover: dim siblings — fine pointer only (touch scroll was sticking :hover and hiding brands) */ @media (hover: hover) and (pointer: fine) { body.phl-catalog-page .phl-brandGrid.phl-brandGroup:not(.phl-brandGrid--dockOpen):hover .phl-makeCard--brandTile:not(:hover){ filter: blur(2px) brightness(0.95); transform: scale(0.985); opacity: 0.9; } body.phl-catalog-page .phl-brandGrid.phl-brandGroup:not(.phl-brandGrid--dockOpen):hover .phl-makeCard--brandTile:hover{ transform: scale(1.05); z-index: 10; border-color: rgba(255,42,42,.45) !important; background: rgba(255,255,255,.08) !important; box-shadow: 0 32px 64px rgba(0, 0, 0, 0.55); } } /* Brand dock open */ body.phl-catalog-page .phl-brandGrid--dockOpen .phl-makeCard:not(.is-selected){ filter: blur(2px) brightness(0.9); opacity: 0.78; transform: scale(0.98); } body.phl-catalog-page .phl-brandGrid--dockOpen .phl-makeCard.is-selected{ filter: none; opacity: 1; transform: scale(1.03); z-index: 6; box-shadow: 0 0 0 2px rgba(255, 42, 42, 0.55), 0 24px 56px rgba(0, 0, 0, 0.55); } body.phl-catalog-page .phl-brandGrid .phl-makeCard--brandTile.is-selected::before{ content: 'SELECTED'; position: absolute; top: 14px; left: 14px; z-index: 8; padding: 5px 11px; font-size: 9px; font-weight: 900; letter-spacing: 0.14em; color: #fff; background: linear-gradient(180deg, #ff3a3a, #c41818); border-radius: 3px; pointer-events: none; font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; } body.phl-catalog-page #phl-step-model, body.phl-catalog-page #phl-step-variant, body.phl-catalog-page #phl-step-year{ max-width: 1140px; margin-left: auto; margin-right: auto; padding: 8px 20px 40px; box-sizing: border-box; } /* Trim step: single column — brand dock is the only sliding sidebar */ body.phl-catalog-page.phl-catalog--powertrainStep .phl-catalog{ width: 100%; max-width: none; } body.phl-catalog-page.phl-catalog--powertrainStep .phl-catalogPowertrain--apexStack{ display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px); max-width: none; margin: 0; padding: 22px 22px 24px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--phl-panel-sheen); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); } body.phl-catalog-page.phl-catalog--powertrainStep .phl-catalogPowertrain--apexStack .phl-catalogPowertrain__showcase{ margin-right: 0; padding-right: 0; border-right: none; min-height: min(44vh, 480px); width: 100%; } body.phl-catalog-page.phl-catalog--powertrainStep .phl-catalogPowertrain__sidebar--apexStack{ position: relative; top: auto; width: 100%; max-width: none; flex: none; min-height: 0; margin: 0; padding: 20px 18px 22px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); background-color: var(--phl-carbon-base); background-image: linear-gradient(165deg, rgba(var(--phl-red-rgb), 0.06) 0%, transparent 40%), linear-gradient(45deg, var(--phl-carbon-stripe) 25%, transparent 25%), linear-gradient(-45deg, var(--phl-carbon-stripe) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--phl-carbon-stripe) 75%), linear-gradient(-45deg, transparent 75%, var(--phl-carbon-stripe) 75%); background-size: auto, 4px 4px, 4px 4px, 4px 4px, 4px 4px; background-position: 0 0, 0 0, 0 2px, 2px 2px, 2px 0; display: flex; flex-direction: column; } body.phl-catalog-page.phl-catalog--powertrainStep .phl-catalogPowertrain__sidebar--apexStack .phl-catalogPowertrain__listScroll{ flex: 1 1 auto; min-height: 120px; max-height: min(52vh, 560px); } .phl-catalogPowertrain__compareWrap{ margin-top: 10px; flex-shrink: 0; } .phl-catalogPowertrain__compare{ width: 100%; padding: 14px 16px; border-radius: 4px; border: 1px solid rgba(var(--phl-yellow-rgb), 0.35); background: transparent; font-family: "Space Grotesk", Oxanium, system-ui, sans-serif; font-size: 11px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--phl-gold-rgb), 0.95); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .phl-catalogPowertrain__compare:hover{ background: rgba(var(--phl-yellow-rgb), 0.12); border-color: rgba(var(--phl-yellow-rgb), 0.55); color: #fff; } body.phl-catalog-page.phl-catalog--powertrainStep .phl-catalogPowertrain__sidebar--apexStack .phl-catalogPowertrain__head--apex{ padding-top: 0; } /* ========== Responsive: mobile / tablet / desktop ========== */ .phl-navToggle{ display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0; grid-column: auto; grid-row: auto; } .phl-navToggle:focus-visible{ outline: 2px solid rgba(var(--phl-gold-rgb), 0.65); outline-offset: 2px; } .phl-navToggle__bars{ display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 20px; } .phl-navToggle__bar{ display: block; height: 2px; width: 100%; border-radius: 1px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; } .phl-navToggle[aria-expanded='true'] .phl-navToggle__bar:nth-child(1){ transform: translateY(6px) rotate(45deg); } .phl-navToggle[aria-expanded='true'] .phl-navToggle__bar:nth-child(2){ opacity: 0; } .phl-navToggle[aria-expanded='true'] .phl-navToggle__bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); } @media (min-width: 1024px){ .phl-navToggle{ display: none !important; } .phl-nav{ display: flex !important; } } /* Tablet + phone: collapsed nav (hamburger), lang in drawer — aligns with common 1024px desktop split */ @media (max-width: 1023px){ body.phl-nav-open{ overflow: hidden !important; } .phl-header__inner{ display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: none; align-items: center; gap: 10px 12px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); min-height: auto; } .phl-brand{ grid-area: auto; grid-column: 1; grid-row: 1; min-width: 0; } .phl-brand__logo{ max-width: min(360px, calc(100vw - 140px)); height: 80px; } .phl-brand__logo img{ max-width: min(360px, calc(100vw - 140px)) !important; max-height: 80px !important; } .phl-header .custom-logo{ width: auto !important; height: 80px !important; max-width: min(360px, calc(100vw - 140px)) !important; max-height: 80px !important; } body.phl-logo--silhouette .phl-brand__logo{ width: 80px; max-width: 80px; height: 80px; } body.phl-logo--silhouette .phl-brand__logo img{ max-width: 100% !important; max-height: 100% !important; } body.phl-logo--silhouette .phl-header .custom-logo{ width: 80px !important; height: 80px !important; max-width: 80px !important; filter: brightness(0) invert(1) contrast(1.12) !important; } .phl-header__end{ grid-area: auto; grid-column: 2; grid-row: 1; justify-self: end; margin-right: 0; } .phl-header__langDesktop{ display: none !important; } .phl-navToggle{ display: inline-flex !important; } .phl-nav{ grid-area: auto; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; width: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0 6px; margin-top: 2px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .phl-nav:not(.is-open){ display: none !important; } .phl-nav.is-open{ display: flex !important; } .phl-nav__link{ min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; box-sizing: border-box; } .phl-nav__lang--inMenu{ display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; padding: 10px 0 4px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .phl-nav__lang--inMenu .phl-lang{ display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .phl-nav__lang--inMenu .phl-lang__btn{ min-width: 52px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Home: center hero copy + CTA on tablet/phone (classic layout; cinematic already centered) */ body.home .phl-main--homeFold .phl-hero__content:not(.phl-hero__content--cinematic){ text-align: center; align-items: center; } body.home .phl-main--homeFold .phl-hero__content:not(.phl-hero__content--cinematic) .phl-h1, body.home .phl-main--homeFold .phl-hero__content:not(.phl-hero__content--cinematic) .phl-hero__subtitle{ margin-left: auto; margin-right: auto; } body.home .phl-main--homeFold .phl-hero__content:not(.phl-hero__content--cinematic) .phl-hero__subtitle{ max-width: 38ch; } body.home .phl-main--homeFold .phl-hero__content:not(.phl-hero__content--cinematic) .phl-hero__title{ overflow-wrap: anywhere; } body.home .phl-main--homeFold .phl-hero__ctaBlock{ align-items: center; width: 100%; } body.home .phl-main--homeFold .phl-btn--heroMain{ margin-left: auto; margin-right: auto; } body.home .phl-main--homeFold .phl-quoteStrip .phl-quoteStrip__inner{ flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; } body.home .phl-main--homeFold .phl-hero__content--cinematic .phl-hero__subtitle{ margin-bottom: clamp(14px, 3svh, 24px); } body.home .phl-main--homeFold .phl-hero__content--cinematic .phl-hero__ctaBlock{ margin-top: clamp(22px, 5.5svh, 44px); } .phl-footer__contact{ justify-content: center; width: 100%; } .phl-brandStage__title{ word-break: break-word; overflow-wrap: anywhere; } .phl-catalog--compact .phl-catalogGrid--models{ grid-template-columns: 1fr; gap: 12px; width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; } [data-catalog-step='model'] .phl-catalogStep__title{ padding: 0 8px; margin-bottom: 14px; text-align: center; } .phl-catalogBrandDock__modelViewport{ max-height: none; } .phl-catalogBrandSidebar{ width: min(1320px, calc(100% - clamp(16px, 4vw, 28px))) !important; margin-left: auto !important; margin-right: auto !important; } body.phl-catalog-page .phl-brandStage__header{ margin-bottom: clamp(24px, 6vw, 40px); padding: 0 8px; } body.phl-catalog-page .phl-brandStage__title{ font-size: clamp(22px, 6vw, 40px); line-height: 1.08; margin-bottom: 12px; } body.phl-catalog-page .phl-brandStage__lead{ font-size: 12px; line-height: 1.55; letter-spacing: 0.05em; margin-top: 0; margin-left: auto; margin-right: auto; padding: 0 6px; max-width: 42rem; } body.phl-catalog-page .phl-brandGrid.phl-catalogGrid--makes{ position: relative; z-index: 2; margin-top: 4px; padding-top: 4px; } } @media (max-width: 639px){ /* Brand dock: stack title + “All brands” so long names never overlap the button on phones */ .phl-catalogBrandDock__mast{ flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 16px 16px; } .phl-catalogBrandDock__mastBrand{ flex: 0 0 auto; max-width: none; } .phl-catalogBrandDock__close{ align-self: flex-end; } .phl-catalogBrandDock__pickStrip{ flex-direction: column; align-items: stretch; gap: 10px; } .phl-catalogBrandDock__pickStrip .phl-inlineSweepers{ align-self: flex-end; } /* * Classic homepage: .phl-quoteStrip is position:absolute at the fold — on narrow phones it sat * on top of the hero subtitle + duplicated the CTA headline. Flow it below the hero like tablet. */ body.home .phl-main--homeFold:not(.phl-main--heroCinematic){ padding-bottom: 0; min-height: auto; } body.home .phl-main--homeFold:not(.phl-main--heroCinematic) .phl-hero{ min-height: min(68svh, 520px); } body.home .phl-main--homeFold:not(.phl-main--heroCinematic) .phl-hero__content{ padding-top: clamp(18px, 5svh, 36px); padding-bottom: clamp(24px, 7svh, 44px); } body.home .phl-main--homeFold:not(.phl-main--heroCinematic) .phl-quoteStrip{ position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; margin-top: 0; padding: 6px 0 22px; } /* Phone header: full-width brand + slogan as typographic quotes only; hamburger top-right */ .phl-header__inner{ position: relative; grid-template-columns: 1fr; grid-template-areas: none; } .phl-brand{ grid-column: 1 / -1; grid-row: 1; justify-self: stretch; width: 100%; max-width: 100%; box-sizing: border-box; padding-left: 52px; padding-right: 52px; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; } .phl-brand__logo{ justify-content: center; } .phl-header__end{ position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); transform: none; z-index: 6; grid-column: auto; grid-row: auto; } .phl-brand__text{ align-items: center; width: 100%; } .phl-brand__slogan{ display: block !important; margin: 0 auto; white-space: normal; font-size: clamp(9px, 2.85vw, 11px); line-height: 1.38; letter-spacing: 0.1em; max-width: min(36ch, 92vw); text-align: center; font-style: italic; font-weight: 700; text-transform: uppercase; padding: 4px 0; color: rgba(255, 255, 255, 0.95); } .phl-brand__slogan::before{ content: '\201C'; display: inline; margin-right: 0.15em; font-style: normal; font-weight: 700; color: inherit; opacity: 0.92; } .phl-brand__slogan::after{ content: '\201D'; display: inline; margin-left: 0.1em; font-style: normal; font-weight: 700; color: inherit; opacity: 0.92; } .phl-brand__logo{ max-width: min(320px, calc(100vw - 108px)); height: 88px; } .phl-brand__logo img{ max-width: min(320px, calc(100vw - 108px)) !important; max-height: 88px !important; } .phl-header .custom-logo{ width: auto !important; height: 88px !important; max-width: min(320px, calc(100vw - 108px)) !important; max-height: 88px !important; } body.phl-logo--silhouette .phl-brand__logo{ width: 92px; max-width: 92px; height: 92px; } body.phl-logo--silhouette .phl-brand__logo img{ max-width: 100% !important; max-height: 100% !important; } body.phl-logo--silhouette .phl-header .custom-logo{ width: 92px !important; height: 92px !important; max-width: 92px !important; filter: brightness(0) invert(1) contrast(1.12) !important; } /* Hero: lighter dim so the photo stays visible; was reading as “too dark too soon” on small screens */ .phl-hero__overlay{ background: linear-gradient(90deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.1)), radial-gradient(95vw 70vw at 50% 22%, rgba(var(--phl-red-rgb), 0.12), transparent 55%), radial-gradient(95vw 70vw at 85% 0%, rgba(var(--phl-yellow-rgb), 0.08), transparent 52%) !important; } .phl-hero__overlay--cinematic{ background: radial-gradient(ellipse 130% 100% at 50% 38%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.38) 65%, rgba(0, 0, 0, 0.72) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, transparent 40%, transparent 58%, rgba(0, 0, 0, 0.36) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.2)) !important; } /* Home cinematic: clear vertical rhythm + CTA question + button in one grouped block */ body.home .phl-main--homeFold .phl-hero__content--cinematic{ gap: clamp(16px, 4.5svh, 26px); padding-top: clamp(18px, 5svh, 32px); padding-bottom: clamp(24px, 7svh, 40px); } body.home .phl-main--homeFold .phl-hero__content--cinematic .phl-hero__kicker{ margin-bottom: 2px; } body.home .phl-main--homeFold .phl-hero__content--cinematic .phl-hero__title{ margin: 0 0 10px; line-height: 1.07; } body.home .phl-main--homeFold .phl-hero__content--cinematic .phl-hero__subtitle{ margin: 0 0 clamp(10px, 2.5svh, 18px); line-height: 1.55; padding: 0 8px; } body.home .phl-main--homeFold .phl-hero__content--cinematic .phl-hero__ctaBlock{ margin-top: clamp(6px, 2svh, 14px); gap: 14px; max-width: min(100%, 26rem); margin-left: auto; margin-right: auto; padding: 0; border-radius: 0; background: transparent; border: 0; box-shadow: none; box-sizing: border-box; } body.home .phl-main--homeFold .phl-hero__content--cinematic .phl-hero__ctaTitle{ margin: 0 0 4px; line-height: 1.32; font-size: clamp(17px, 4.6vw, 21px); } /* Cinematic full (phone): hero media in its own band; copy + CTA on solid strip — no stacked text on the image */ body.home .phl-main--heroCinematic .phl-hero.phl-hero--cinematic{ overflow: visible; } body.home .phl-main--heroCinematic .phl-hero.phl-hero--cinematic .phl-hero__bg{ position: relative; inset: auto; flex: 0 0 auto; width: 100%; height: clamp(168px, 34svh, 300px); min-height: 156px; z-index: 0; } body.home .phl-main--heroCinematic .phl-hero.phl-hero--cinematic .phl-hero__content.phl-hero__content--cinematic{ flex: 1 1 auto; justify-content: flex-start; width: 100%; gap: clamp(12px, 3.5svh, 20px); padding-top: clamp(12px, 2.5svh, 22px); padding-bottom: clamp(16px, 3svh, 28px); background: transparent; box-shadow: none; } body.home .phl-main--heroCinematic .phl-hero.phl-hero--cinematic .phl-hero__content--cinematic .phl-hero__ctaBlock{ margin-top: clamp(8px, 2svh, 14px); } .phl-servicesGrid:has([data-phl-services-carousel]){ padding-top: 52px; } [data-phl-services-carousel]{ margin-top: 10px; } .phl-hero__ctaBlock{ margin-top: clamp(22px, 5.5svh, 40px); gap: 18px; } .phl-hero__subtitle{ margin-bottom: 14px; } .phl-hero__title{ margin-bottom: 14px; } .phl-pageHero{ padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); } .phl-footer{ padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } .phl-dockTrimCard__cta{ min-height: 44px; display: flex; align-items: center; justify-content: center; } } /* Tablet: full-width centered brand + slogan; hamburger overlays; home hero media above CTA strip */ @media (min-width: 640px) and (max-width: 1023px){ .phl-catalogBrandSidebar{ width: min(1320px, calc(100% - clamp(24px, 4vw, 48px))); } .phl-header__inner{ position: relative; grid-template-columns: 1fr; grid-template-areas: none; } .phl-brand{ grid-column: 1 / -1; grid-row: 1; justify-self: stretch; width: 100%; max-width: 100%; box-sizing: border-box; padding-left: 52px; padding-right: 52px; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; } .phl-brand__logo{ justify-content: center; } .phl-header__end{ position: absolute; top: 50%; right: max(8px, env(safe-area-inset-right)); transform: translateY(-50%); z-index: 6; grid-column: auto; grid-row: auto; } .phl-brand__text{ align-items: center; width: 100%; } .phl-brand__slogan{ display: block; margin: 0 auto; white-space: normal; font-size: clamp(10px, 2.1vw, 13px); line-height: 1.3; letter-spacing: 0.07em; max-width: min(40ch, 92vw); text-align: center; } /* Cinematic home: hero image/video in its own band; copy + CTA on solid strip (no overlap) */ body.home .phl-main--heroCinematic .phl-hero.phl-hero--cinematic{ overflow: visible; } body.home .phl-main--heroCinematic .phl-hero.phl-hero--cinematic .phl-hero__bg{ position: relative; inset: auto; flex: 0 0 auto; width: 100%; height: clamp(220px, 40svh, 420px); min-height: 200px; z-index: 0; } body.home .phl-main--heroCinematic .phl-hero.phl-hero--cinematic .phl-hero__content.phl-hero__content--cinematic{ flex: 1 1 auto; justify-content: flex-start; width: 100%; padding-top: clamp(14px, 2.6svh, 26px); padding-bottom: clamp(18px, 3svh, 34px); background: transparent; box-shadow: none; } body.home .phl-main--heroCinematic .phl-hero.phl-hero--cinematic .phl-hero__content--cinematic .phl-hero__ctaBlock{ margin-top: clamp(12px, 2.5svh, 22px); } /* Tablet classic home: keep CTA card directly under hero media, not pinned at fold bottom. */ body.home .phl-main--homeFold:not(.phl-main--heroCinematic){ padding-bottom: 0; min-height: auto; } body.home .phl-main--homeFold:not(.phl-main--heroCinematic) .phl-hero{ min-height: clamp(500px, 70svh, 760px); } body.home .phl-main--homeFold:not(.phl-main--heroCinematic) .phl-hero__content{ padding-top: clamp(36px, 8svh, 72px); padding-bottom: clamp(36px, 8svh, 72px); } body.home .phl-main--homeFold:not(.phl-main--heroCinematic) .phl-quoteStrip{ position: relative; left: auto; right: auto; bottom: auto; margin-top: 0; padding: 12px 0 24px; } body.home .phl-main--homeFold .phl-hero__ctaBlock, body.home .phl-main--homeFold .phl-quoteStrip .phl-quoteStrip__inner{ margin-left: auto; margin-right: auto; max-width: min(680px, 96vw); width: 100%; padding: 10px 12px; box-sizing: border-box; border-radius: 16px !important; } body.home .phl-main--homeFold .phl-btn--heroMain{ width: 100%; max-width: none; min-height: 48px; padding: 14px 28px; box-sizing: border-box; } body.home .phl-main--homeFold .phl-hero__ctaTitle, body.home .phl-main--homeFold .phl-quoteStrip .phl-h2{ margin-top: 0; margin-bottom: 14px; } /* Tablet catalog dock: extra scroll padding so trim cards never clip. */ .phl-catalogBrandDock__body--scroll{ padding-bottom: 64px; } .phl-dockTrimCard__specs{ flex: 0 0 auto; } .phl-dockTrimCard__cta{ min-height: 50px; margin-top: 10px; padding-bottom: 12px; } } @media (min-width: 1400px){ .phl-container{ width: min(1200px, calc(100% - 80px)); } } /* ——— WooCommerce: form fields blend with dark theme (checkout, cart, account) ——— */ .woocommerce input.input-text, .woocommerce input[type="text"], .woocommerce input[type="tel"], .woocommerce input[type="email"], .woocommerce input[type="number"], .woocommerce input[type="password"], .woocommerce input[type="url"], .woocommerce textarea{ /* Match