/* ========================================================================== Prestige Detailing — main navigation (pd-main-nav) Rendered right after , OUTSIDE #wrap_all, so every rule is paired with a "#top .pd-nav" twin to beat Enfold's "#top a / #top input" rules. No !important, no margin/padding shorthands. ========================================================================== */ @property --pd-fb { syntax: ""; inherits: true; initial-value: 0; } @property --pd-nav-tt { syntax: ""; inherits: false; initial-value: 0px; } @property --pd-nav-tb { syntax: ""; inherits: false; initial-value: 0px; } /* ---------- Tokens ---------- */ .pd-nav, .pd-nav-spacer, .pd-foot, .pd-sh, .pd-srch, .pd-btn, .pd-gal { --pd-nav-bg: #161414; --pd-nav-red: #d60c0c; --pd-nav-white: #fff; --pd-nav-dim: 0.56; --pd-nav-font: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Google Sans Flex metrics (measured) — feed the cap trim fallback */ --pd-cap: 0.71875; --pd-asc: 0.966; --pd-desc: 0.286; --pd-nav-top: 0px; /* admin bar offset */ --pd-nav-px: clamp(16px, 9.259vw, 160px); /* 160 @ 1728 */ --pd-nav-py: 32px; --pd-nav-logo-w: 280px; --pd-nav-logo-h: 32px; --pd-nav-h: calc(var(--pd-nav-py) * 2 + var(--pd-nav-logo-h)); --pd-nav-menu-fs: clamp(36px, 3.009vw, 52px); /* 52 @ 1728 */ --pd-nav-menu-gap: clamp(32px, 3.704vw, 64px); /* 64 @ 1728 */ --pd-nav-line-w: max(64px, calc(var(--pd-nav-px) - 20px)); } .admin-bar .pd-nav { --pd-nav-top: 32px; } @media (max-width: 782px) { .admin-bar .pd-nav { --pd-nav-top: 46px; } } /* ---------- Cap trim (text-box) with a metric fallback ---------- */ .pd-nav .pd-nav-t, .pd-foot .pd-nav-t, .pd-sh .pd-nav-t, .pd-srch .pd-nav-t, .pd-btn .pd-nav-t, .pd-gal .pd-nav-t, #top .pd-nav .pd-nav-t, #top #wrap_all .pd-foot .pd-nav-t, #top #wrap_all .pd-sh .pd-nav-t, #top #wrap_all .pd-srch .pd-nav-t, #top #wrap_all .pd-btn .pd-nav-t, #top #wrap_all .pd-gal .pd-nav-t { display: block; --pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs))); --pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs))); font-size: var(--fs); line-height: var(--lh); text-box-trim: trim-both; text-box-edge: cap alphabetic; text-box: trim-both cap alphabetic; margin-top: calc(-1 * var(--pd-nav-tt)); margin-bottom: calc(-1 * var(--pd-nav-tb)); } @supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) { .pd-nav, .pd-foot, .pd-sh, .pd-srch, .pd-btn, .pd-gal { --pd-fb: 1; } } /* ---------- Enfold's own header stands down ---------- */ body.pd-nav-on #header, #top.pd-nav-on #wrap_all #header { display: none; } body.pd-nav-on #main, #top.pd-nav-on #wrap_all #main { padding-top: 0; } html.pd-nav-lock, html.pd-nav-lock body { overflow: hidden; } /* ---------- Root ---------- */ .pd-nav, #top .pd-nav { font-family: var(--pd-nav-font); font-weight: 400; color: var(--pd-nav-white); -webkit-font-smoothing: antialiased; } .pd-nav *, #top .pd-nav * { box-sizing: border-box; } .pd-nav .pd-nav__sr, #top .pd-nav .pd-nav__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pd-nav a, #top .pd-nav a { color: var(--pd-nav-white); text-decoration: none; border-bottom-width: 0; } .pd-nav a:hover, .pd-nav a:focus, #top .pd-nav a:hover, #top .pd-nav a:focus { color: var(--pd-nav-white); text-decoration: none; } .pd-nav :focus-visible, #top .pd-nav :focus-visible { outline: 1px solid var(--pd-nav-white); outline-offset: 4px; } .pd-nav svg, #top .pd-nav svg { display: block; width: 100%; height: 100%; } /* ---------- Bar ---------- */ .pd-nav .pd-nav__bar, #top .pd-nav .pd-nav__bar { position: fixed; top: var(--pd-nav-top); left: 0; right: 0; z-index: 9990; display: flex; align-items: center; justify-content: space-between; column-gap: 24px; padding-top: var(--pd-nav-py); padding-bottom: var(--pd-nav-py); padding-left: var(--pd-nav-px); padding-right: var(--pd-nav-px); background-color: transparent; transition: background-color 0.3s ease; } .pd-nav.pd-nav--scrolled .pd-nav__bar, .pd-nav.pd-nav--solid .pd-nav__bar, .pd-nav.pd-nav--open .pd-nav__bar, #top .pd-nav.pd-nav--scrolled .pd-nav__bar, #top .pd-nav.pd-nav--solid .pd-nav__bar, #top .pd-nav.pd-nav--open .pd-nav__bar { background-color: var(--pd-nav-bg); } .pd-nav-spacer { height: var(--pd-nav-h); background-color: var(--pd-nav-bg); } .pd-nav .pd-nav__logo, #top .pd-nav .pd-nav__logo { display: block; flex: none; width: var(--pd-nav-logo-w); height: var(--pd-nav-logo-h); } .pd-nav .pd-nav__actions, #top .pd-nav .pd-nav__actions { display: flex; align-items: center; column-gap: 24px; } .pd-nav .pd-nav__icon, #top .pd-nav .pd-nav__icon { display: block; flex: none; width: 20px; height: 20px; } /* Buttons: zero the UA padding (1px 6px) and theme styling */ .pd-nav .pd-nav__btn, #top .pd-nav .pd-nav__btn { display: block; flex: none; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; border-width: 0; border-radius: 0; background-color: transparent; color: var(--pd-nav-white); cursor: pointer; line-height: 0; box-shadow: none; } /* Search — in the bar (desktop) */ .pd-nav .pd-nav__search, #top .pd-nav .pd-nav__search { display: flex; align-items: center; column-gap: 6px; margin-top: 0; margin-bottom: 0; } .pd-nav .pd-nav__search-input, #top .pd-nav .pd-nav__search-input { -webkit-appearance: none; appearance: none; width: 72px; height: 24px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; border-width: 0; border-radius: 0; background-color: transparent; box-shadow: none; color: var(--pd-nav-white); font-family: var(--pd-nav-font); font-size: 16px; line-height: 24px; transition: width 0.3s ease; } .pd-nav .pd-nav__search-input::placeholder, #top .pd-nav .pd-nav__search-input::placeholder { color: var(--pd-nav-white); opacity: var(--pd-nav-dim); } .pd-nav .pd-nav__search-input::-webkit-search-cancel-button, #top .pd-nav .pd-nav__search-input::-webkit-search-cancel-button { display: none; } .pd-nav .pd-nav__search--bar .pd-nav__search-input:focus, #top .pd-nav .pd-nav__search--bar .pd-nav__search-input:focus { width: 180px; outline-width: 0; } .pd-nav .pd-nav__search--bar:focus-within, #top .pd-nav .pd-nav__search--bar:focus-within { box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.4); } .pd-nav .pd-nav__search-btn, .pd-nav .pd-nav__search--panel, #top .pd-nav .pd-nav__search-btn, #top .pd-nav .pd-nav__search--panel { display: none; } .pd-nav .pd-nav__divider, #top .pd-nav .pd-nav__divider { display: block; flex: none; width: 1px; height: 12px; background-color: rgba(255, 255, 255, 0.2); } /* Cart */ .pd-nav .pd-nav__cart, #top .pd-nav .pd-nav__cart { display: flex; align-items: center; column-gap: 8px; } .pd-nav .pd-nav__cart-text, #top .pd-nav .pd-nav__cart-text { --fs: 16px; --lh: 24px; white-space: nowrap; } .pd-nav .pd-nav__cart-count, #top .pd-nav .pd-nav__cart-count { font-weight: 600; color: var(--pd-nav-white); } .pd-nav .pd-nav__cart-word, #top .pd-nav .pd-nav__cart-word { color: rgba(255, 255, 255, 0.56); } /* Menu toggle — grip ↔ close */ .pd-nav .pd-nav__toggle, #top .pd-nav .pd-nav__toggle { width: 32px; height: 32px; } .pd-nav .pd-nav__toggle .pd-nav__icon, #top .pd-nav .pd-nav__toggle .pd-nav__icon { width: 100%; height: 100%; } .pd-nav .pd-nav__icon--close, .pd-nav.pd-nav--open .pd-nav__icon--grip, #top .pd-nav .pd-nav__icon--close, #top .pd-nav.pd-nav--open .pd-nav__icon--grip { display: none; } .pd-nav.pd-nav--open .pd-nav__icon--close, #top .pd-nav.pd-nav--open .pd-nav__icon--close { display: block; } /* ---------- Panel ---------- */ .pd-nav .pd-nav__panel, #top .pd-nav .pd-nav__panel { position: fixed; top: var(--pd-nav-top); right: 0; bottom: 0; left: 0; z-index: 9989; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background-color: var(--pd-nav-bg); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; } .pd-nav.pd-nav--open .pd-nav__panel, #top .pd-nav.pd-nav--open .pd-nav__panel { opacity: 1; visibility: visible; transition: opacity 0.35s ease, visibility 0s linear 0s; } .pd-nav .pd-nav__panel-inner, #top .pd-nav .pd-nav__panel-inner { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100%; padding-top: var(--pd-nav-h); padding-bottom: var(--pd-nav-h); padding-left: 0; padding-right: var(--pd-nav-px); } /* Menu + contact: the contact column stretches to the menu's height */ .pd-nav .pd-nav__cols, #top .pd-nav .pd-nav__cols { display: flex; align-items: stretch; justify-content: space-between; column-gap: 40px; } /* Background mark — cropped by the viewport bottom, as in the design */ .pd-nav .pd-nav__mark, #top .pd-nav .pd-nav__mark { position: absolute; left: 50%; bottom: 0; width: min(462px, calc(100% - 32px)); aspect-ratio: 462 / 155; transform: translateX(-50%); color: var(--pd-nav-white); opacity: 0.08; pointer-events: none; } /* Menu list */ .pd-nav .pd-nav__menu, #top .pd-nav .pd-nav__menu { flex: 1 1 auto; min-width: 0; } .pd-nav .pd-nav__list, #top .pd-nav .pd-nav__list { display: flex; flex-direction: column; row-gap: var(--pd-nav-menu-gap); margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; list-style: none; } .pd-nav .pd-nav__item, #top .pd-nav .pd-nav__item { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; list-style: none; } .pd-nav .pd-nav__link, #top .pd-nav .pd-nav__link { display: flex; align-items: center; column-gap: 20px; } .pd-nav .pd-nav__line, #top .pd-nav .pd-nav__line { display: block; flex: none; width: var(--pd-nav-line-w); height: 1px; background-color: var(--pd-nav-white); opacity: 0.4; transition: opacity 0.25s ease, background-color 0.25s ease; } .pd-nav .pd-nav__text, #top .pd-nav .pd-nav__text { --fs: var(--pd-nav-menu-fs); --lh: var(--pd-nav-menu-fs); min-width: 0; letter-spacing: -0.03em; text-transform: uppercase; opacity: var(--pd-nav-dim); transition: opacity 0.25s ease; } .pd-nav .pd-nav__link:hover .pd-nav__text, .pd-nav .pd-nav__link:focus-visible .pd-nav__text, .pd-nav .pd-nav__item.is-current .pd-nav__text, #top .pd-nav .pd-nav__link:hover .pd-nav__text, #top .pd-nav .pd-nav__link:focus-visible .pd-nav__text, #top .pd-nav .pd-nav__item.is-current .pd-nav__text { opacity: 1; } .pd-nav .pd-nav__link:hover .pd-nav__line, .pd-nav .pd-nav__link:focus-visible .pd-nav__line, #top .pd-nav .pd-nav__link:hover .pd-nav__line, #top .pd-nav .pd-nav__link:focus-visible .pd-nav__line { opacity: 1; } .pd-nav .pd-nav__item.is-current .pd-nav__line, #top .pd-nav .pd-nav__item.is-current .pd-nav__line { background-color: var(--pd-nav-red); opacity: 1; } /* Contact column + quote button */ .pd-nav .pd-nav__aside, #top .pd-nav .pd-nav__aside { display: flex; flex: none; flex-direction: column; align-self: stretch; justify-content: space-between; align-items: flex-start; row-gap: 44px; width: max-content; min-width: 252px; } .pd-nav .pd-nav__contact, #top .pd-nav .pd-nav__contact { display: flex; flex-direction: column; row-gap: 44px; width: 100%; } .pd-nav .pd-nav__group, #top .pd-nav .pd-nav__group { display: flex; flex-direction: column; align-items: flex-start; row-gap: 12px; } .pd-nav .pd-nav__caption, #top .pd-nav .pd-nav__caption { --fs: 16px; --lh: 24px; opacity: var(--pd-nav-dim); } .pd-nav .pd-nav__value, #top .pd-nav .pd-nav__value { --fs: 18px; --lh: 28px; white-space: nowrap; transition: opacity 0.25s ease; } .pd-nav .pd-nav__value--address, #top .pd-nav .pd-nav__value--address { --lh: 24px; } .pd-nav a.pd-nav__value:hover, #top .pd-nav a.pd-nav__value:hover { opacity: 0.72; } .pd-nav .pd-nav__socials, #top .pd-nav .pd-nav__socials { display: flex; align-items: center; column-gap: 12px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; list-style: none; } .pd-nav .pd-nav__socials li, #top .pd-nav .pd-nav__socials li { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; list-style: none; } .pd-nav .pd-nav__social, #top .pd-nav .pd-nav__social { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; transition: opacity 0.25s ease; } .pd-nav .pd-nav__social:hover, #top .pd-nav .pd-nav__social:hover { opacity: 0.72; } .pd-nav .pd-nav__social--instagram svg, #top .pd-nav .pd-nav__social--instagram svg { width: 20px; height: 20px; } /* Bracket button — reusable: .pd-btn-bracket > .pd-btn-bracket__text */ .pd-btn-bracket, #top .pd-btn-bracket { display: inline-flex; align-items: center; justify-content: center; padding-top: 24px; padding-bottom: 24px; padding-left: 32px; padding-right: 32px; color: #fff; text-decoration: none; background-color: rgba(255, 255, 255, 0.08); background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px, 8px 2px, 2px 8px, 8px 2px, 2px 8px; background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom; background-repeat: no-repeat; transition: background-color 0.25s ease; } .pd-btn-bracket:hover, .pd-btn-bracket:focus-visible, #top .pd-btn-bracket:hover, #top .pd-btn-bracket:focus-visible { color: #fff; background-color: rgba(255, 255, 255, 0.16); } .pd-btn-bracket .pd-btn-bracket__text, #top .pd-btn-bracket .pd-btn-bracket__text { --fs: 16px; --lh: 24px; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; } /* ========================================================================== ≤ 989px — mobile bar + mobile panel ========================================================================== */ @media (max-width: 989px) { .pd-nav, .pd-nav-spacer { --pd-nav-px: 16px; --pd-nav-py: 16px; --pd-nav-logo-w: 175px; --pd-nav-logo-h: 20px; --pd-nav-menu-fs: 24px; --pd-nav-menu-gap: 32px; --pd-nav-line-w: 64px; } .pd-nav .pd-nav__actions, #top .pd-nav .pd-nav__actions { column-gap: 16px; } .pd-nav .pd-nav__search--bar, .pd-nav .pd-nav__divider, .pd-nav .pd-nav__cart-text, #top .pd-nav .pd-nav__search--bar, #top .pd-nav .pd-nav__divider, #top .pd-nav .pd-nav__cart-text { display: none; } .pd-nav .pd-nav__search-btn, #top .pd-nav .pd-nav__search-btn { display: block; } .pd-nav .pd-nav__toggle, #top .pd-nav .pd-nav__toggle { width: 20px; height: 20px; } .pd-nav.pd-nav--open .pd-nav__search-btn, .pd-nav.pd-nav--open .pd-nav__cart, #top .pd-nav.pd-nav--open .pd-nav__search-btn, #top .pd-nav.pd-nav--open .pd-nav__cart { display: none; } .pd-nav .pd-nav__cols, #top .pd-nav .pd-nav__cols { flex-direction: column; } .pd-nav .pd-nav__panel-inner, #top .pd-nav .pd-nav__panel-inner { justify-content: flex-start; padding-top: calc(var(--pd-nav-h) + 20px); padding-bottom: 160px; } /* Search box inside the panel */ .pd-nav .pd-nav__search--panel, #top .pd-nav .pd-nav__search--panel { display: flex; margin-left: 16px; margin-right: 16px; padding-top: 16px; padding-bottom: 16px; padding-left: 20px; padding-right: 20px; border: 1px solid rgba(255, 255, 255, 0.08); background-color: var(--pd-nav-white); } .pd-nav .pd-nav__search--panel .pd-nav__icon, #top .pd-nav .pd-nav__search--panel .pd-nav__icon { color: var(--pd-nav-red); } .pd-nav .pd-nav__search--panel .pd-nav__search-input, #top .pd-nav .pd-nav__search--panel .pd-nav__search-input { flex: 1 1 auto; width: auto; min-width: 0; height: 20px; line-height: 20px; color: var(--pd-nav-bg); } .pd-nav .pd-nav__search--panel .pd-nav__search-input::placeholder, #top .pd-nav .pd-nav__search--panel .pd-nav__search-input::placeholder { color: var(--pd-nav-bg); } .pd-nav .pd-nav__search--panel .pd-nav__search-input:focus, #top .pd-nav .pd-nav__search--panel .pd-nav__search-input:focus { outline-width: 0; } .pd-nav .pd-nav__search--panel:focus-within, #top .pd-nav .pd-nav__search--panel:focus-within { outline: 1px solid var(--pd-nav-red); outline-offset: -1px; } .pd-nav .pd-nav__menu, #top .pd-nav .pd-nav__menu { flex: none; margin-top: 48px; } .pd-nav .pd-nav__text, #top .pd-nav .pd-nav__text { letter-spacing: -0.02em; } .pd-nav .pd-nav__aside, #top .pd-nav .pd-nav__aside { align-self: stretch; width: auto; margin-top: 48px; margin-left: 16px; margin-right: 16px; } .pd-nav .pd-nav__contact, #top .pd-nav .pd-nav__contact { display: none; } .pd-nav .pd-nav__quote, #top .pd-nav .pd-nav__quote { display: flex; width: 100%; } } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { .pd-nav .pd-nav__bar, .pd-nav .pd-nav__panel, .pd-nav .pd-nav__search-input, .pd-nav .pd-nav__line, .pd-nav .pd-nav__text, #top .pd-nav .pd-nav__bar, #top .pd-nav .pd-nav__panel, #top .pd-nav .pd-nav__search-input, #top .pd-nav .pd-nav__line, #top .pd-nav .pd-nav__text { transition-duration: 0s; } }