/* ========================================================================== Dealerweb — Shared stylesheet for all header blocks -------------------------------------------------------------------------- THEMES: set one class on (or any wrapper): .theme-white -> white (light, default) .theme-platinum -> platinum grey (light; white panels, silver base) .theme-black -> pure black .theme-slate -> slate blue-grey (dark) .theme-midnight -> deep navy blue (dark) .theme-carbon -> carbon-fibre black (dark; woven texture) .theme-custom -> customisable (defaults to black; override --dw-custom-*) Primary colour is BLUE across every theme. Change the --primary tokens inside a theme to rebrand it. ========================================================================== */ /* ---- LIGHT THEME -------------------------------------------------------- */ /* Light theme — pure monochrome: white base, black text, neutral greys. Primary is black (Tailwind neutral scale is hueless). */ :root, .theme-white { --bg:#f7f6f5; /* neutral-100 */ --bg-elevated:#ffffff; /* white */ --bg-subtle:#f8f8f8; /* neutral-200 */ --text:#171717; /* neutral-900 */ --text-muted:#737373; /* neutral-500 */ --border:#e5e5e5; /* neutral-200 */ --primary:#000000; /* black */ --primary-hover:#404040; /* neutral-700 */ --primary-soft:#e5e5e5; /* neutral-200 */ --primary-contrast:#ffffff;/* white */ --topbar-bg:#171717; /* neutral-900 */ --topbar-text:#fafafa; /* neutral-50 */ --nav-highlight:rgba(0,0,0,.06); /* black @ 6% */ } /* ---- PLATINUM THEME ----------------------------------------------------- */ /* Platinum theme — light, same as white but with the base threshold dropped to a soft platinum grey (#e5e4e2). Panels stay near-white so content still reads like the white theme; only the body/background tone shifts. Primary is black. */ .theme-platinum { --bg:#e5e4e2; /* platinum */ --bg-elevated:#f4f3f2; /* near-white panel */ --bg-subtle:#dcdbd9; /* platinum-200 */ --text:#171717; /* neutral-900 */ --text-muted:#6e6e6e; /* neutral-500 */ --border:#cecdcb; /* platinum-300 */ --primary:#000000; /* black */ --primary-hover:#404040; /* neutral-700 */ --primary-soft:#d4d3d1; /* platinum-250 */ --primary-contrast:#ffffff;/* white */ --topbar-bg:#171717; /* neutral-900 */ --topbar-text:#fafafa; /* neutral-50 */ --nav-highlight:rgba(0,0,0,.06); /* black @ 6% */ } /* ---- DARK THEME --------------------------------------------------------- */ /* Dark theme — pure monochrome: black base, white text, neutral greys. Primary is white. */ .theme-black { --bg:#000000; /* black */ --bg-elevated:#171717; /* neutral-900 */ --bg-subtle:#0a0a0a; /* neutral-950 */ --text:#ffffff; /* white */ --text-muted:#a3a3a3; /* neutral-400 */ --border:#262626; /* neutral-800 */ --primary:#ffffff; /* white */ --primary-hover:#d4d4d4; /* neutral-300 */ --primary-soft:rgba(255,255,255,.12); /* white @ 12% */ --primary-contrast:#000000;/* black */ --topbar-bg:#0a0a0a; /* neutral-950 */ --topbar-text:#d4d4d4; /* neutral-300 */ --nav-highlight:rgba(255,255,255,.045); /* white @ 4.5% */ } .theme-black .dw-header, .theme-black .dw-services-why-choose-us, .theme-black .dw-services-centered, .theme-black .dw-cta-split, .theme-black .dw-cta-horizontal, .theme-black .dw-cta-centered { background:#111111; } /* ---- SLATE THEME -------------------------------------------------------- */ /* Slate theme — dark, blue-grey (Tailwind slate scale). Same structure as the black theme but with a slate hue instead of neutral. Primary is light slate. */ .theme-slate { --bg:#0f172a; /* slate-900 */ --bg-elevated:#1e293b; /* slate-800 */ --bg-subtle:#020617; /* slate-950 */ --text:#f8fafc; /* slate-50 */ --text-muted:#94a3b8; /* slate-400 */ --border:#334155; /* slate-700 */ --primary:#e2e8f0; /* slate-200 */ --primary-hover:#f8fafc; /* slate-50 */ --primary-soft:rgba(226,232,240,.12); /* slate-200 @ 12% */ --primary-contrast:#0f172a;/* slate-900 */ --topbar-bg:#020617; /* slate-950 */ --topbar-text:#cbd5e1; /* slate-300 */ --nav-highlight:rgba(255,255,255,.045); /* white @ 4.5% */ } .theme-slate .dw-header, .theme-slate .dw-services-why-choose-us, .theme-slate .dw-services-centered, .theme-slate .dw-cta-split, .theme-slate .dw-cta-horizontal, .theme-slate .dw-cta-centered { background:#172033; } /* ---- MIDNIGHT THEME ----------------------------------------------------- */ /* Midnight theme — dark, deep navy blue. Same structure as the black/slate themes but with a deeper midnight-navy base. Primary is light. */ .theme-midnight { --bg:#0a0f1f; /* midnight navy */ --bg-elevated:#111a2e; /* navy panel */ --bg-subtle:#05070f; /* near-black navy */ --text:#f8fafc; /* slate-50 */ --text-muted:#8b96ab; /* muted slate */ --border:#1c2740; /* navy border */ --primary:#e5eaf2; /* light slate */ --primary-hover:#ffffff; /* white */ --primary-soft:rgba(229,234,242,.12); /* light slate @ 12% */ --primary-contrast:#0a0f1f;/* midnight navy */ --topbar-bg:#05070f; /* near-black navy */ --topbar-text:#c7cfdd; /* light navy grey */ --nav-highlight:rgba(255,255,255,.045); /* white @ 4.5% */ } .theme-midnight .dw-header, .theme-midnight .dw-services-why-choose-us, .theme-midnight .dw-services-centered, .theme-midnight .dw-cta-split, .theme-midnight .dw-cta-horizontal, .theme-midnight .dw-cta-centered { background:#0f1729; } /* ---- CARBON THEME ------------------------------------------------------- */ /* Carbon theme — dark, near-black with a carbon-fibre woven texture on the body background (see the body.theme-carbon override below the Base section). The colour tokens mirror the black theme so panels/cards stay solid and readable; the weave only shows through the body/hero gaps. Primary is white. */ .theme-carbon { --bg:#131313; /* carbon base */ --bg-elevated:#1c1c1c; /* panel */ --bg-subtle:#0a0a0a; /* deep */ --text:#ffffff; /* white */ --text-muted:#a3a3a3; /* neutral-400 */ --border:#2a2a2a; /* neutral-800 */ --primary:#ffffff; /* white */ --primary-hover:#d4d4d4; /* neutral-300 */ --primary-soft:rgba(255,255,255,.12); /* white @ 12% */ --primary-contrast:#000000;/* black */ --topbar-bg:#0a0a0a; /* neutral-950 */ --topbar-text:#d4d4d4; /* neutral-300 */ --nav-highlight:rgba(255,255,255,.045); /* white @ 4.5% */ } .theme-carbon .dw-header, .theme-carbon .dw-services-why-choose-us, .theme-carbon .dw-services-centered, .theme-carbon .dw-cta-split, .theme-carbon .dw-cta-horizontal, .theme-carbon .dw-cta-centered { background:#141414; } /* ---- CUSTOM THEME ------------------------------------------------------- */ /* Custom theme — every token defaults to the black theme, but each one reads from an overridable --dw-custom-* variable first. Set those variables inline on (from the CRM) to recolour the site without touching this file; leave them unset and it's identical to the black theme. */ .theme-custom { --bg: var(--dw-custom-bg, #000000); --bg-elevated: var(--dw-custom-bg-elevated, #171717); --bg-subtle: var(--dw-custom-bg-subtle, #0a0a0a); --text: var(--dw-custom-text, #ffffff); --text-muted: var(--dw-custom-text-muted, #a3a3a3); --border: var(--dw-custom-border, #262626); --primary: var(--dw-custom-primary, #ffffff); --primary-hover: var(--dw-custom-primary-hover, #d4d4d4); --primary-soft: var(--dw-custom-primary-soft, rgba(255,255,255,.12)); --primary-contrast: var(--dw-custom-primary-contrast, #000000); --topbar-bg: var(--dw-custom-topbar-bg, #0a0a0a); --topbar-text: var(--dw-custom-topbar-text, #d4d4d4); --nav-highlight: var(--dw-custom-nav-highlight, rgba(255,255,255,.045)); } .theme-custom .dw-header, .theme-custom .dw-services-why-choose-us, .theme-custom .dw-services-centered, .theme-custom .dw-cta-split, .theme-custom .dw-cta-horizontal, .theme-custom .dw-cta-centered { background: var(--dw-custom-section, #111111); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-size: 95%; /* base body text reduced 5% */ /* Body font comes from the account ($font) via --dw-font-body, set inline on by includes/fonts.php. Unset = no web font = the system stack. */ font-family: var(--dw-font-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); /* Subtle vertical gradient (~3% spread) derived from the theme's --bg: ~1.5% lighter at the top, ~1.5% darker at the bottom. Solid --bg stays as the fallback for browsers without color-mix support. */ background-color: var(--bg); background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg) 98.5%, #fff), color-mix(in srgb, var(--bg) 98.5%, #000)); background-attachment: fixed; color: var(--text); -webkit-font-smoothing: antialiased; touch-action: manipulation; /* disable double-tap-to-zoom on touch devices */ } /* Carbon theme — replace the flat gradient with a woven carbon-fibre pattern. The theme class lives on , so body.theme-carbon overrides the rule above. Layered diagonal gradients form the twill weave; kept fixed so it stays put on scroll. */ body.theme-carbon { background-color: #0a0a0a; background-image: linear-gradient(27deg, #0d0d0d 5px, transparent 5px), linear-gradient(207deg, #0d0d0d 5px, transparent 5px), linear-gradient(27deg, #111111 5px, transparent 5px), linear-gradient(207deg, #111111 5px, transparent 5px), linear-gradient(90deg, #0e0e0e 10px, transparent 10px), linear-gradient(#0f0f0f 25%, #0d0d0d 25%, #0d0d0d 50%, transparent 50%, transparent 75%, #121212 75%, #121212); background-size: 20px 20px; background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0; background-attachment: fixed; } a { text-decoration: none; color: inherit; } /* Heading font comes from the account ($fontHead) via --dw-font-head, set inline on by includes/fonts.php. Unset = inherit the body font, so the historical default (one font for everything) is preserved. */ h1, h2, h3, h4 { font-family: var(--dw-font-head, inherit); } /* Menu font comes from the account ($fontMenu) via --dw-font-menu, set inline on by includes/fonts.php. Applied to nav elements and their links. Unset = inherit the body font, so the historical default (one font for everything) is preserved. */ nav, .dw-nav-link { font-family: var(--dw-font-menu, inherit); letter-spacing: var(--dw-font-menu-spacing, normal); } /* Helper tokens */ .dw-header { background: var(--bg-elevated); color: var(--text); } /* Subtle drop shadow on the whole header element (~1% opacity). */ header { box-shadow: 0 6px 20px rgba(0, 0, 0, .01); } /* When a hero (image/slider/video) sits directly below, let the header cast a soft drop shadow down onto it. */ body.dw-has-hero .dw-header { position: relative; z-index: 20; box-shadow: 0 14px 24px -8px rgba(0, 0, 0, .125); } /* Custom header background (config: $headerBackground). Overrides the header bg with --dw-header-bg and recolours the text/links with the auto-contrasted --dw-header-text (both set inline on ). The bottom border is dropped. Placed before the overlay-mode rules so a floating overlay header still wins. */ body.dw-header-custom .dw-header { background: var(--dw-header-bg); color: var(--dw-header-text); border-bottom: 0; } body.dw-header-custom .dw-header.dw-border-b { border-bottom: 0; } body.dw-header-custom .dw-desktop-nav { border-top-color: var(--dw-header-border) !important; } body.dw-header-custom .dw-header .dw-nav-link, body.dw-header-custom .dw-header .dw-nav-link:hover, body.dw-header-custom .dw-header .dw-logo-mark, body.dw-header-custom .dw-header .dw-social, body.dw-header-custom .dw-header .dw-cta-text, body.dw-header-custom .dw-header .dw-cta-sub, body.dw-header-custom .dw-header .dw-icon-cta, body.dw-header-custom .dw-header .dw-icon-whatsapp, body.dw-header-custom .dw-burger { color: var(--dw-header-text); } body.dw-header-custom .dw-burger-bar { background: var(--dw-header-text); } /* The sliding highlight is the only pill; the active item keeps its text colour with no background of its own (avoids a doubled pill under the highlight). */ body.dw-header-custom .dw-nav-highlight { background: var(--dw-header-highlight); } body.dw-header-custom .dw-header .dw-nav-link.is-active, body.dw-header-custom .dw-header .dw-nav-link.underline-hover.is-active { color: var(--dw-header-text); background: transparent; box-shadow: none; } /* Heritage phone pill is a transparent outline button — follows the contrasted header colour for its text and border. */ body.dw-header-custom .dw-header .dw-header-tel, body.dw-header-custom .dw-header .dw-header-tel:hover { color: var(--dw-header-text); border-color: var(--dw-header-text); } body.dw-header-custom .dw-header .dw-header-tel:hover { background: var(--dw-header-highlight); } /* Mobile menu on a custom header: item hover, row dividers and the makes-menu tiles use translucent tints of the contrasted header colour (the defaults use light --bg-subtle / dark rgba borders, which vanish on a dark header). */ body.dw-header-custom [data-menu] .dw-nav-link { border-bottom-color: var(--dw-header-border) !important; } body.dw-header-custom [data-menu] .dw-nav-link:hover { color: var(--dw-header-text); background: var(--dw-header-highlight); } body.dw-header-custom .dw-makes-mobile .dw-make:not(.dw-make--all) { background: transparent; border-color: var(--dw-header-border); } .dw-surface { background: var(--bg-elevated); } .dw-subtle { background: var(--bg-subtle); } .dw-border { border-color: var(--border); } .dw-border-b { border-bottom: 1px solid var(--border); } .dw-text { color: var(--text); } .dw-text-muted { color: var(--text-muted); } .dw-logo-mark { color: var(--primary); } /* Uploaded logo image ($templateLogoPath) — fit within the header height. */ /* Height comes from config.php ($logoHeight, applied inline on the img). */ .dw-logo-img { width: auto; max-width: 344px; margin: .4025rem 0; object-fit: contain; display: block; } @media (max-width: 767px) { .dw-logo-img { max-width: 200px; } } /* -------------------------------------------------------------------------- Homepage hero (templates/blocks/hero/: image | slider | video) -------------------------------------------------------------------------- */ .dw-hero { position: relative; width: 100%; min-height: 60vh; overflow: hidden; background: var(--bg-subtle); } @media (max-width: 767px) { .dw-hero { min-height: 50vh; } } /* Media (img / video) fills the hero, cropping to cover. */ .dw-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Dark overlay — opacity set inline from $homepageHeroOpacity. */ .dw-hero-overlay { position: absolute; inset: 0; background: #000; pointer-events: none; z-index: 1; } /* -------------------------------------------------------------------------- Optional hero bottom shape dividers (modifier classes on .dw-hero). A pseudo-element band at the hero's bottom edge, filled with the next section's background colour and clipped/masked into the chosen shape. The base (straight) hero has no ::after, so it's fully backwards compatible. The image keeps covering the hero (the divider only paints the bottom strip) and text/buttons/arrows sit above it (z-index 2/3 > 1). Override the colour to match the section that follows via --dw-hero-divider-color. -------------------------------------------------------------------------- */ /* Height token on the element. Angled uses a taller band for a steeper slope. */ .dw-hero--divider-angled, .dw-hero--divider-chevron, .dw-hero--divider-diamond, .dw-hero--divider-wave, .dw-hero--divider-eclipse { --dw-hero-divider-h: 64px; } .dw-hero--divider-angled { --dw-hero-divider-h: 120px; } @media (max-width: 767px) { .dw-hero--divider-angled, .dw-hero--divider-chevron, .dw-hero--divider-diamond, .dw-hero--divider-wave, .dw-hero--divider-eclipse { --dw-hero-divider-h: 38px; } .dw-hero--divider-angled { --dw-hero-divider-h: 60px; } } /* Divider fill — a band at the hero bottom in the next section's colour. */ .dw-hero--divider-angled::after, .dw-hero--divider-chevron::after, .dw-hero--divider-diamond::after, .dw-hero--divider-wave::after, .dw-hero--divider-eclipse::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: var(--dw-hero-divider-h); background: var(--dw-hero-divider-color, var(--bg)); z-index: 1; pointer-events: none; } /* Shapes (clip-path fill anchored to the bottom edge). */ .dw-hero--divider-angled::after { clip-path: polygon(0 100%, 100% 0, 100% 100%); } /* Diamond point — the hero image comes to a clean downward point at the centre (colour fills the two sides). */ .dw-hero--divider-diamond::after { clip-path: polygon(0 100%, 0 0, 50% 100%, 100% 0, 100% 100%); } .dw-hero--divider-chevron::after { clip-path: polygon(0 100%, 0 0, 50% 78%, 100% 0, 100% 100%); } /* Smooth wave — SVG mask keeps the colour driven by the CSS variable. */ .dw-hero--divider-wave::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C150,90 350,0 600,40 C850,80 1050,10 1200,40 L1200,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C150,90 350,0 600,40 C850,80 1050,10 1200,40 L1200,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Eclipse — a single smooth circular arc that dips to a concave curve at the centre (colour rises at the edges). */ .dw-hero--divider-eclipse::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,6 Q600,150 1200,6 L1200,100 Z' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,6 Q600,150 1200,6 L1200,100 Z' fill='%23000'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Slider: stack slides and cross-fade the active one. */ .dw-hero-slide { opacity: 0; transition: opacity .8s ease; z-index: 0; } .dw-hero-slide.is-active { opacity: 1; z-index: 1; } /* Slider next arrow — pinned to the bottom-right corner, square, hover uses the colour scheme. */ .dw-hero-nav { position: absolute; right: 0; bottom: 0; z-index: 3; display: flex; } .dw-hero-arrow { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; background: transparent; color: #fff; transition: opacity .2s ease; } .dw-hero-arrow:hover { opacity: .7; } .dw-hero-arrow svg { width: 20px; height: 20px; } /* Thin white divider between the pause and next controls. */ .dw-hero-nav .dw-hero-arrow + .dw-hero-arrow::before { content: ""; position: absolute; left: 0; top: 25%; height: 50%; width: 1px; background: rgba(255, 255, 255, .5); } .dw-hero-arrow .dw-hero-ico-play { display: none; } .dw-hero-arrow.is-paused .dw-hero-ico-pause { display: none; } .dw-hero-arrow.is-paused .dw-hero-ico-play { display: inline; } /* Mobile: smaller arrow (still bottom-right corner). */ @media (max-width: 767px) { .dw-hero-arrow { width: 36px; height: 36px; } .dw-hero-arrow svg { width: 16px; height: 16px; } } /* Hero text overlay. Sits above the media + dark overlay; position comes from $homepageHeroTextPosition (none = not rendered at all). The container ignores pointer events so only the inner block (and its buttons) are interactive. */ .dw-hero-text { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .4); } /* Independently-positioned layer. The text (eyebrow + title) and the links (filter / CTA buttons) each get their own __pos block so they can sit in different corners — see $homepageHeroTextPosition / $homepageHeroLinksPosition. */ .dw-hero-text__pos { position: absolute; inset: 0; display: flex; padding: clamp(1.5rem, 5vw, 4rem); pointer-events: none; } .dw-hero-text__inner { max-width: 42rem; pointer-events: auto; } /* Slider: one text overlay per slide, cross-fading in sync with the images. Only the active overlay is visible and interactive. */ .dw-hero--slider .dw-hero-text { opacity: 0; transition: opacity .8s ease; } .dw-hero--slider .dw-hero-text.is-active { opacity: 1; } .dw-hero--slider .dw-hero-text:not(.is-active), .dw-hero--slider .dw-hero-text:not(.is-active) .dw-hero-text__inner { pointer-events: none; } .dw-hero-text__eyebrow { margin: 0 0 .75rem; font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 600; letter-spacing: .02em; opacity: .9; } /* Short accent dash below the eyebrow. */ .dw-hero-text__eyebrow::after { content: ""; display: block; margin-top: .5rem; width: 2.5rem; height: 3px; border-radius: 2px; background: var(--primary); } .dw-hero-text--center-center .dw-hero-text__eyebrow::after { margin-left: auto; margin-right: auto; } .dw-hero-text__title { margin: 0 0 3rem; font-size: clamp(1.75rem, 5vw, 3.25rem); line-height: 1.1; font-weight: 800; text-shadow: 0 2px 6px rgba(0, 0, 0, .45); } /* Larger hero title on mobile; keep whole words intact (no mid-word breaks). */ @media (max-width: 767px) { .dw-hero-text__title { font-size: 2.126rem; overflow-wrap: normal; word-break: normal; hyphens: none; } } .dw-hero-text__cta { display: flex; flex-wrap: wrap; gap: .75rem; } /* Buttons shouldn't inherit the hero text-shadow. */ .dw-hero-text .dw-btn { text-shadow: none; } /* Taller hero CTAs: vertical padding bumped 20% (.625rem -> .75rem). */ .dw-hero-text .dw-btn-primary, .dw-hero-text .dw-btn-outline { padding-top: .75rem; padding-bottom: .75rem; } /* Arrow on the primary CTA, nudged right on hover. */ .dw-btn-arrow { width: 1.1em; height: 1.1em; flex: none; transition: transform .15s ease; } .dw-btn-primary:hover .dw-btn-arrow { transform: translateX(3px); } /* Outline button reads better as white over the image; on hover it fills white with dark text (a fixed dark so it stays readable on every theme). */ .dw-hero-text .dw-btn-outline { color: #fff; border-color: rgba(255, 255, 255, .7); background: transparent; } .dw-hero-text .dw-btn-outline:hover { background: #fff; color: #111827; border-color: #fff; } /* Combined layout — when the text and links share the same position ($homepageHeroTextPosition === $homepageHeroLinksPosition) they're emitted in a single stacked __pos block so they flow vertically instead of overlapping. The title's default 3rem bottom margin collapses into a controlled gap here. */ .dw-hero-text__pos--stacked .dw-hero-text__inner { display: flex; flex-direction: column; gap: 1.5rem; } .dw-hero-text__pos--stacked .dw-hero-text__title { margin-bottom: 0; } /* Position variants: vertical via align-items, horizontal via justify + text-align. */ .dw-hero-text--center-left { align-items: center; justify-content: flex-start; text-align: left; } .dw-hero-text--bottom-left { align-items: flex-end; justify-content: flex-start; text-align: left; } .dw-hero-text--bottom-right { align-items: flex-end; justify-content: flex-end; text-align: right; } .dw-hero-text--center-center { align-items: center; justify-content: center; text-align: center; } .dw-hero-text--center-center .dw-hero-text__cta { justify-content: center; } .dw-hero-text--bottom-right .dw-hero-text__cta { justify-content: flex-end; } /* Subtle staggered fade-up on page load. */ .dw-hero-text__eyebrow, .dw-hero-text__title, .dw-hero-text__cta { animation: dw-hero-fade .7s ease both; } .dw-hero-text__title { animation-delay: .12s; } .dw-hero-text__cta { animation-delay: .24s; } @keyframes dw-hero-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .dw-hero-text__eyebrow, .dw-hero-text__title, .dw-hero-text__cta, .dw-hero-filter { animation: none; } } /* Hero search bar ($homepageHeroCta = 'filter') — Make / Model / Budget selects in a --bg card that replaces the CTA buttons. Its own light surface, so text drops the hero's white colour + shadow. */ .dw-hero-filter { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; width: 100%; max-width: 46rem; padding: 1rem; background: color-mix(in srgb, var(--bg) 85%, transparent); color: var(--text); text-shadow: none; border: 1px solid var(--border); border-radius: var(--dw-btn-radius, .5rem); box-shadow: 0 18px 45px rgba(0, 0, 0, .28); animation: dw-hero-fade .7s ease both; animation-delay: .24s; } .dw-hero-filter__field { flex: 1 1 10rem; min-width: 0; display: flex; } .dw-hero-filter__select { width: 100%; padding: .75rem 2.25rem .75rem .9rem; font: inherit; font-size: .95rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--dw-btn-radius, .5rem); cursor: pointer; appearance: none; -webkit-appearance: none; /* Chevron drawn with the muted text colour. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; } .dw-hero-filter__select:focus-visible { outline: 2px solid var(--primary); outline-offset: -1px; } .dw-hero-filter__select:disabled { opacity: .55; cursor: not-allowed; } .dw-hero-filter__search { flex: 0 0 auto; padding: .75rem 1.75rem; font: inherit; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--primary-contrast, #fff); background: var(--primary); border: 1px solid var(--primary); border-radius: var(--dw-btn-radius, .5rem); cursor: pointer; transition: filter .15s ease; } .dw-hero-filter__search:hover { filter: brightness(1.05); } .dw-hero-filter__search:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Stack the fields on narrow screens (search goes full-width at the bottom). */ @media (max-width: 640px) { .dw-hero-filter { flex-direction: column; } .dw-hero-filter__field { flex: 1 1 auto; } .dw-hero-filter__search { width: 100%; } } /* Layout heights ($homepageHeroLayout) — fixed variants (+20%). */ .dw-hero.hero-min-fixed { min-height: 360px; height: 360px; } .dw-hero.hero-med-fixed { min-height: 552px; height: 552px; } .dw-hero.hero-max-fixed { min-height: 720px; height: 720px; } @media (max-width: 767px) { .dw-hero.hero-min-fixed { height: 288px; min-height: 288px; } .dw-hero.hero-med-fixed { height: 360px; min-height: 360px; } .dw-hero.hero-max-fixed { height: 504px; min-height: 504px; } } /* Hero search filter on mobile — fill the viewport so the Make / Model / Budget bar sits on a full-screen hero. Keyed off the filter being present (:has), so no PHP flag is needed; the fixed-height variants are listed to beat them on specificity. svh keeps it stable against the mobile address bar (vh fallback). */ @media (max-width: 767px) { .dw-hero:has(.dw-hero-filter), .dw-hero.hero-min-fixed:has(.dw-hero-filter), .dw-hero.hero-med-fixed:has(.dw-hero-filter), .dw-hero.hero-max-fixed:has(.dw-hero-filter) { height: 80vh; min-height: 80vh; height: 80svh; min-height: 80svh; } } /* Optional gap around fixed hero layouts (config.php $heroFixedGap = true). 1.5rem inset (matches the profile blocks); width:auto keeps the side margins from overflowing. */ .dw-hero--gap { width: auto; margin: 1.5rem; border-radius: 0.5rem; /* matches the 'smooth' button scheme */ } /* Services strip (templates/blocks/services/why-choose-us.php) — below the hero. Icon circles use the branding colour; section follows the theme background. */ /* Pulled up tight under the hero so the two read as one block. */ .dw-services-why-choose-us { background: var(--bg); padding: 1.5rem 1.5rem; } .dw-services-why-choose-us__heading { margin: 0 0 .5rem; text-align: center; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.1; color: color-mix(in srgb, var(--text) 90%, var(--bg)); } .dw-services-why-choose-us__subheading { margin: 0 0 2rem; text-align: center; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; } .dw-services-why-choose-us__grid { margin: 0 auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--dw-btn-radius, .5rem); padding: 2.5rem 2rem; display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* Icon centred above the title. */ .dw-services-why-choose-us__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; } .dw-services-why-choose-us__title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--text); } .dw-services-why-choose-us__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.5em; height: 3.5em; border-radius: .85em; background: var(--primary); color: var(--primary-contrast); } .dw-services-why-choose-us__icon svg { width: 2em; height: 2em; } .dw-services-why-choose-us__icon i { font-size: 2em; line-height: 1; } .dw-services-why-choose-us__desc { margin: 0; color: var(--text-muted); line-height: 1.5; text-wrap: pretty; } /* 4 services: same inline icon + title, text centred beneath. */ .dw-services-why-choose-us--4 .dw-services-why-choose-us__item { align-items: center; text-align: center; gap: .7rem; } @media (max-width: 767px) { .dw-services-why-choose-us { padding: 1.5rem 1.25rem; } } /* Services block (templates/blocks/services/centered.php) — centred title and description above a bordered box holding a row of selected services. */ .dw-services-centered { background: var(--bg); padding: 3rem 1.5rem; } .dw-services-centered__heading { margin: 0 0 .5rem; text-align: center; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.1; color: color-mix(in srgb, var(--text) 90%, var(--bg)); } .dw-services-centered__desc { margin: 0 auto 2rem; max-width: 60ch; text-align: center; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; } .dw-services-centered__grid { margin: 0 auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--dw-btn-radius, .5rem); padding: 2.5rem 2rem; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .dw-services-centered--no-border { border: 0; } .dw-services-centered__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; } .dw-services-centered__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.5em; height: 3.5em; border-radius: .85em; background: var(--primary); color: var(--primary-contrast); } .dw-services-centered__icon i { font-size: 2em; line-height: 1; } .dw-services-centered__name { font-weight: 600; color: var(--text); } @media (max-width: 767px) { .dw-services-centered { padding: 2.5rem 1.25rem; } } /* Call-to-action band (templates/blocks/cta/split.php) — below the hero. Left column = tag pill + heading; right column = description + button. */ .dw-cta-split { background: var(--bg); padding: 3rem 1.5rem; } .dw-cta-split__inner { margin: 0 auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--dw-btn-radius, .5rem); padding: 2.5rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: center; } .dw-cta-split__tag { display: inline-block; padding: .4rem 1rem; border-radius: 999px; border: 1px dashed var(--border); color: var(--text); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .dw-cta-split__heading { margin: 1.25rem 0 0; font-size: clamp(1.35rem, 2.7vw, 2.025rem); font-weight: 800; line-height: 1.1; /* ~10% lighter than body text (mixed toward the background). */ color: color-mix(in srgb, var(--text) 90%, var(--bg)); } .dw-cta-split__desc { margin: 0 0 1.75rem; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; } /* Vertical divider sitting in the gap between the two columns, with a soft shadow so it reads as a raised line. */ .dw-cta-split__body { position: relative; } .dw-cta-split__body::before { content: ""; position: absolute; top: .25rem; bottom: .25rem; left: -2rem; width: 1px; background: var(--border); } .dw-cta-split__chevrons { width: 1.1em; height: 1.1em; } @media (max-width: 767px) { .dw-cta-split { padding: 2.5rem 1.25rem; } .dw-cta-split__inner { grid-template-columns: 1fr; gap: 1.5rem; } .dw-cta-split__body::before { display: none; } } /* Call-to-action band (templates/blocks/cta/horizontal.php) — below the hero. Single row: left column = tag pill + heading + description stacked; right column = a single button, vertically centred against the text. */ .dw-cta-horizontal { background: var(--bg); padding: 3rem 1.5rem; } .dw-cta-horizontal__inner { margin: 0 auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--dw-btn-radius, .5rem); padding: 2.5rem 2rem; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; align-items: center; } .dw-cta-horizontal__tag { display: inline-block; padding: .4rem 1rem; border-radius: 999px; border: 1px dashed var(--border); color: var(--text); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .dw-cta-horizontal__heading { margin: 1.25rem 0 0; font-size: clamp(1.35rem, 2.7vw, 2.025rem); font-weight: 800; line-height: 1.1; /* ~10% lighter than body text (mixed toward the background). */ color: color-mix(in srgb, var(--text) 90%, var(--bg)); } .dw-cta-horizontal__desc { margin: .85rem 0 0; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; } .dw-cta-horizontal__btn { white-space: nowrap; } .dw-cta-horizontal__chevrons { width: 1.1em; height: 1.1em; } /* Vertical divider in the gap between the text and the button — spans the inner content height (the action cell stretches to match the text column). */ .dw-cta-horizontal__action { position: relative; align-self: stretch; display: flex; align-items: center; } .dw-cta-horizontal__action::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5rem; width: 1px; background: var(--border); } @media (max-width: 767px) { .dw-cta-horizontal { padding: 2.5rem 1.25rem; } .dw-cta-horizontal__inner { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } .dw-cta-horizontal__action::before { display: none; } } /* Call-to-action band (templates/blocks/cta/image.php) — below the hero. Two columns: left = tag pill + heading + description + button stacked; right = a single image. */ .dw-cta-image { background: var(--bg); padding: 3rem 1.5rem; } .dw-cta-image__inner { margin: 0 auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--dw-btn-radius, .5rem); padding: 2.5rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: center; } .dw-cta-image__tag { display: inline-block; padding: .4rem 1rem; border-radius: 999px; border: 1px dashed var(--border); color: var(--text); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .dw-cta-image__heading { margin: 1.25rem 0 0; font-size: clamp(1.35rem, 2.7vw, 2.025rem); font-weight: 800; line-height: 1.1; color: color-mix(in srgb, var(--text) 90%, var(--bg)); } /* Short divider below the heading (same border colour as the other CTAs). */ .dw-cta-image__divider { display: block; width: 3rem; height: 1px; margin: 1.25rem 0 0; background: var(--border); } .dw-cta-image__desc { margin: .85rem 0 1.75rem; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; } .dw-cta-image__chevrons { width: 1.1em; height: 1.1em; } .dw-cta-image__media { position: relative; align-self: stretch; } .dw-cta-image__img { display: block; width: 100%; height: 100%; min-height: 18rem; object-fit: cover; border-radius: var(--dw-btn-radius, .5rem); } /* Dark overlay over the image (strength from the hero opacity option). */ .dw-cta-image__overlay { position: absolute; inset: 0; background: #000; pointer-events: none; border-radius: var(--dw-btn-radius, .5rem); } @media (max-width: 767px) { .dw-cta-image { padding: 2.5rem 1.25rem; } .dw-cta-image__inner { grid-template-columns: 1fr; gap: 1.5rem; } .dw-cta-image__media { order: -1; } .dw-cta-image__img { min-height: 12rem; } } /* Full-bleed (hero gap off): drop the inner padding, image fills the height. */ .dw-cta-image--flush .dw-cta-image__inner { padding: 0; overflow: hidden; } .dw-cta-image--flush .dw-cta-image__content { padding: 2.5rem 2rem; } .dw-cta-image--flush .dw-cta-image__img { height: 100%; border-radius: 0; } /* Profile + opening hours (templates/blocks/profile/profile-opening-hours.php) — two-column card (mirrors cta/image.php): profile text left, opening hours right (styled like the classic footer). */ .dw-profile-hours { background: var(--bg); padding: 0 1.5rem 1.5rem; } .dw-profile-hours__inner { margin: 0 auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--dw-btn-radius, .5rem); padding: 2.5rem 2rem; display: grid; grid-template-columns: 2fr 1fr; gap: 2rem 3rem; align-items: center; } /* Single-column variant (profile.php — no opening hours): full-width, no grid. */ .dw-profile-hours--single .dw-profile-hours__inner { display: block; } /* Borderless variant ($homepageProfileBorder = false). */ .dw-profile-hours--no-border .dw-profile-hours__inner { border: 0; } /* Opening-hours column: centred and vertically aligned, divider on its left. */ .dw-profile-hours__aside { align-self: center; text-align: center; border-left: 1px solid var(--border); padding-left: 3rem; } .dw-profile-hours__hours { display: inline-block; text-align: left; } /* Profile text: standard body text, clean margins and word breaks. */ .dw-profile-hours__text { overflow-wrap: break-word; } .dw-profile-hours__text :where(p) { margin: 1rem 0; } .dw-profile-hours__text :where(p):first-child { margin-top: 0; } .dw-profile-hours__text :where(p):last-child { margin-bottom: 0; } .dw-profile-hours__btn { margin-top: 2.25rem; } .dw-profile-hours__heading { margin: 0; font-size: clamp(1.35rem, 2.7vw, 2.025rem); font-weight: 800; line-height: 1.1; color: color-mix(in srgb, var(--text) 90%, var(--bg)); } .dw-profile-hours__welcome { display: block; margin-bottom: .35rem; font-size: .5em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } .dw-profile-hours__divider { display: block; width: 3rem; height: 1px; margin: 1.25rem 0; background: var(--border); } .dw-profile-hours__hours-title { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 700; color: var(--text); } .dw-profile-hours__hours { list-style: none; margin: 0; padding: 0; } .dw-profile-hours__hours li { display: flex; gap: 2.5rem; padding: .15rem 0; color: var(--text-muted); } .dw-profile-hours__day { flex: none; min-width: 7rem; } .dw-profile-hours__time { flex: none; } .dw-profile-hours__hours li.is-today { color: var(--primary); font-weight: 700; } .dw-profile-hours__note { margin: 1.5rem 0 0; color: var(--text-muted); font-size: .9rem; } /* Image variant (profile-image.php): equal two-column split, image fills its column. Reuses the cta/image.php photo source. */ .dw-profile-hours--image .dw-profile-hours__inner { grid-template-columns: 1fr 1fr; } .dw-profile-hours__media { align-self: stretch; } .dw-profile-hours__img { display: block; width: 100%; height: 100%; min-height: 18rem; object-fit: cover; border-radius: var(--dw-btn-radius, .5rem); } @media (max-width: 767px) { .dw-profile-hours { padding: 2.5rem 1.25rem; } .dw-profile-hours__inner { grid-template-columns: 1fr; gap: 2rem; } /* Hide the opening-hours column on mobile. */ .dw-profile-hours__aside { display: none; } /* Image variant: keep the image, stacked below the text. */ .dw-profile-hours--image .dw-profile-hours__inner { grid-template-columns: 1fr; } .dw-profile-hours__img { min-height: 12rem; } } /* Call-to-action band (templates/blocks/cta/video.php) — below the hero. Two columns: left = tag pill + heading + description + button stacked; right = a single looping video with a play/pause control. */ .dw-cta-video { background: var(--bg); padding: 3rem 1.5rem; } .dw-cta-video__inner { margin: 0 auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--dw-btn-radius, .5rem); padding: 2.5rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: center; } .dw-cta-video__tag { display: inline-block; padding: .4rem 1rem; border-radius: 999px; border: 1px dashed var(--border); color: var(--text); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .dw-cta-video__heading { margin: 1.25rem 0 0; font-size: clamp(1.35rem, 2.7vw, 2.025rem); font-weight: 800; line-height: 1.1; color: color-mix(in srgb, var(--text) 90%, var(--bg)); } /* Short divider below the heading (same border colour as the other CTAs). */ .dw-cta-video__divider { display: block; width: 3rem; height: 1px; margin: 1.25rem 0 0; background: var(--border); } .dw-cta-video__desc { margin: .85rem 0 1.75rem; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; } .dw-cta-video__chevrons { width: 1.1em; height: 1.1em; } .dw-cta-video__media { position: relative; align-self: stretch; } .dw-cta-video__vid { display: block; width: 100%; height: 100%; min-height: 18rem; object-fit: cover; border-radius: var(--dw-btn-radius, .5rem); } /* Dark overlay over the video (strength from the hero opacity option). */ .dw-cta-video__overlay { position: absolute; inset: 0; background: #000; pointer-events: none; border-radius: var(--dw-btn-radius, .5rem); } /* Play/pause control, bottom-left of the video. */ .dw-cta-video__toggle { position: absolute; left: .75rem; bottom: .75rem; z-index: 1; width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, .5); border: 0; border-radius: 999px; cursor: pointer; transition: background .15s ease; } .dw-cta-video__toggle:hover { background: rgba(0, 0, 0, .7); } .dw-cta-video__toggle svg { width: 1.25rem; height: 1.25rem; } /* Show pause while playing, play while paused. */ .dw-cta-video__ico-play { display: none; } .dw-cta-video__media.is-paused .dw-cta-video__ico-play { display: block; } .dw-cta-video__media.is-paused .dw-cta-video__ico-pause { display: none; } @media (max-width: 767px) { .dw-cta-video { padding: 2.5rem 1.25rem; } .dw-cta-video__inner { grid-template-columns: 1fr; gap: 1.5rem; } .dw-cta-video__media { order: -1; } .dw-cta-video__vid { min-height: 12rem; } } /* Full-bleed (hero gap off): drop the inner padding, video fills the height. */ .dw-cta-video--flush .dw-cta-video__inner { padding: 0; overflow: hidden; } .dw-cta-video--flush .dw-cta-video__content { padding: 2.5rem 2rem; } .dw-cta-video--flush .dw-cta-video__vid { height: 100%; border-radius: 0; } /* Call-to-action band (templates/blocks/cta/background.php) — below the hero. Full-width background image with a dark overlay and centred light text. */ .dw-cta-background { background: var(--bg); padding: 3rem 1.5rem; } .dw-cta-background__inner { position: relative; isolation: isolate; overflow: hidden; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--dw-btn-radius, .5rem); padding: 5rem 2.5rem; min-height: 20rem; display: grid; grid-template-columns: 1fr; align-items: center; text-align: left; } .dw-cta-background__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* Darker on the left (behind the text), fading lighter to the right. The inline opacity from the hero option scales the whole gradient. */ .dw-cta-background__overlay { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .15) 100%); border-radius: inherit; } .dw-cta-background__content { max-width: 40rem; display: flex; flex-direction: column; align-items: flex-start; } .dw-cta-background__tag { display: inline-block; margin: 0 0 1.25rem; padding: .4rem 1rem; border-radius: 999px; color: #fff; font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; /* Default tint so the label is readable; overridden inline to 2x the overlay opacity when an overlay is set. */ background: rgba(0, 0, 0, .35); } .dw-cta-background__heading { margin: 0; color: #fff; font-size: clamp(1.35rem, 2.7vw, 2.025rem); font-weight: 800; line-height: 1.1; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); } /* Short divider below the heading — translucent white for contrast on the image. */ .dw-cta-background__divider { display: block; width: 3rem; height: 1px; margin: 1.25rem 0 0; background: rgba(255, 255, 255, .5); } .dw-cta-background__desc { margin: 1.25rem 0 0; max-width: 46ch; color: rgba(255, 255, 255, .9); font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); } .dw-cta-background__btn { margin-top: 2rem; white-space: nowrap; } .dw-cta-background__chevrons { width: 1.1em; height: 1.1em; } @media (max-width: 767px) { .dw-cta-background { padding: 2.5rem 1.25rem; } .dw-cta-background__inner { padding: 3rem 1.5rem; } } /* Call-to-action band (templates/blocks/cta/centered.php) — below the hero. One centred column: tag pill, heading, description and a single button, all centred. */ .dw-cta-centered { background: var(--bg); padding: 3rem 1.5rem; } .dw-cta-centered__inner { margin: 0 auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--dw-btn-radius, .5rem); padding: 2.5rem 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; } .dw-cta-centered__tag { display: inline-block; padding: .4rem 1rem; border-radius: 999px; border: 1px dashed var(--border); color: var(--text); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .dw-cta-centered__heading { margin: 1.25rem 0 0; font-size: clamp(1.35rem, 2.7vw, 2.025rem); font-weight: 800; line-height: 1.1; /* ~10% lighter than body text (mixed toward the background). */ color: color-mix(in srgb, var(--text) 90%, var(--bg)); } /* Short centred divider below the heading (same border colour as the other CTAs). */ .dw-cta-centered__divider { display: block; width: 3rem; height: 1px; margin: 1.25rem auto 0; background: var(--border); } .dw-cta-centered__desc { margin: .85rem auto 0; max-width: 60ch; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; } .dw-cta-centered__btn { margin-top: 1.75rem; white-space: nowrap; } .dw-cta-centered__chevrons { width: 1.1em; height: 1.1em; } @media (max-width: 767px) { .dw-cta-centered { padding: 2.5rem 1.25rem; } } /* Shared: drop the inner-card border when $dwCtaBorder is false. */ .dw-cta--no-border { border: 0; } /* Overlay variants — hero sits full-bleed behind a transparent header. */ .dw-hero.hero-med-overlay { height: 600px; min-height: 600px; } .dw-hero.hero-max-overlay { height: 700px; min-height: 700px; } .dw-hero.hero-full-overlay { height: 100vh; min-height: 100vh; } @supports (height: 100svh) { .dw-hero.hero-full-overlay { height: 100svh; min-height: 100svh; } } @media (max-width: 767px) { .dw-hero.hero-med-overlay { height: 456px; min-height: 456px; } .dw-hero.hero-max-overlay { height: 520px; min-height: 520px; } } /* Overlay mode: the header floats transparently over the hero and the top bar is hidden, so the hero image shows behind the navigation. Light text for contrast against the (overlaid) image. */ body.dw-overlay-mode .dw-topbar { display: none; } /* The whole header (normally sticky/in-flow) floats over the hero. Positioning the

element itself keeps every control clickable above the hero. */ body.dw-overlay-mode header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; } body.dw-overlay-mode .dw-header { background: rgba(0, 0, 0, .1); border-bottom: 0; box-shadow: none; color: #fff; } /* Keep the hero (and its media) below the floating header. */ body.dw-overlay-mode .dw-hero { position: relative; z-index: 1; } body.dw-overlay-mode .dw-desktop-nav { border-top-color: transparent !important; } body.dw-overlay-mode .dw-header .dw-nav-link, body.dw-overlay-mode .dw-header .dw-nav-link:hover, body.dw-overlay-mode .dw-burger, body.dw-overlay-mode .dw-burger:hover, body.dw-overlay-mode .dw-header .dw-social, body.dw-overlay-mode .dw-header .dw-icon-cta, body.dw-overlay-mode .dw-header .dw-icon-whatsapp, body.dw-overlay-mode .dw-header .dw-cta-text, body.dw-overlay-mode .dw-header .dw-cta-text:hover, body.dw-overlay-mode .dw-logo-mark { color: #fff; } /* Secondary line (email under the phone) — slightly dimmed white to keep the hierarchy that --text-muted gives outside overlay mode. */ body.dw-overlay-mode .dw-header .dw-cta-sub, body.dw-overlay-mode .dw-header .dw-cta-sub:hover { color: rgba(255, 255, 255, .85); } body.dw-overlay-mode .dw-nav-highlight { background: rgba(255, 255, 255, .079); } /* Active menu item over the hero: white text, no pill background. */ body.dw-overlay-mode .dw-header .dw-nav-link.is-active, body.dw-overlay-mode .dw-header .dw-nav-link.underline-hover.is-active { color: #fff; background: transparent; box-shadow: none; } /* Overlay mode: the header floats over the hero with plain white controls, so the icon CTA action buttons (phone / email / WhatsApp) drop their solid backgrounds and render as plain icons, matching the burger — on desktop as well as mobile. */ body.dw-overlay-mode .dw-header .dw-icon-cta, body.dw-overlay-mode .dw-header .dw-icon-cta:hover, body.dw-overlay-mode .dw-header .dw-icon-whatsapp, body.dw-overlay-mode .dw-header .dw-icon-whatsapp:hover { background: transparent; box-shadow: none; } /* With no button background the glyphs need to match the plain social icons (24px) so they look the same size — the 20px default only suits the filled button look used outside overlay mode. */ body.dw-overlay-mode .dw-icon-cta svg, body.dw-overlay-mode .dw-icon-whatsapp svg { width: 24px; height: 24px; } /* Mobile: the telephone / telephone-email text CTAs normally collapse to a filled primary icon button. Over the hero, drop the fill so they render as plain white icons like the burger and the other overlay CTAs. */ @media (max-width: 767px) { body.dw-overlay-mode .dw-header .dw-cta-text, body.dw-overlay-mode .dw-header .dw-cta-text:hover { background: transparent; color: #fff; box-shadow: none; } body.dw-overlay-mode .dw-header .dw-cta-text .dw-cta-tel-icon, body.dw-overlay-mode .dw-header .dw-cta-text .dw-cta-mail-icon { width: 24px; height: 24px; } } /* Heritage header phone pill: a filled primary button normally, but a transparent white ghost button over the hero in overlay mode. */ body.dw-overlay-mode .dw-header .dw-header-tel, body.dw-overlay-mode .dw-header .dw-header-tel:hover { background: transparent; color: #fff; box-shadow: none; } body.dw-overlay-mode .dw-header .dw-header-tel:hover { background: rgba(255, 255, 255, .12); } /* Mobile menu open in overlay mode: drop the transparent look and use the theme colour scheme so the menu is readable. Matched two ways: via the body `dw-menu-open` flag, and via the menu panel's own visible state (`[data-menu].flex`, added by app.js on open). The second selector means the solid theme background still applies even if the JS body-class toggle never runs. */ body.dw-overlay-mode.dw-menu-open .dw-header, body.dw-overlay-mode .dw-header:has([data-menu].flex) { background: var(--bg-elevated); color: var(--text); } body.dw-overlay-mode.dw-menu-open .dw-header .dw-nav-link, body.dw-overlay-mode.dw-menu-open .dw-burger, body.dw-overlay-mode.dw-menu-open .dw-burger:hover, body.dw-overlay-mode.dw-menu-open .dw-header .dw-social, body.dw-overlay-mode.dw-menu-open .dw-header .dw-icon-cta, body.dw-overlay-mode.dw-menu-open .dw-header .dw-icon-whatsapp, body.dw-overlay-mode.dw-menu-open .dw-header .dw-cta-text, body.dw-overlay-mode.dw-menu-open .dw-header .dw-cta-sub, body.dw-overlay-mode .dw-header:has([data-menu].flex) .dw-nav-link, body.dw-overlay-mode .dw-header:has([data-menu].flex) .dw-burger, body.dw-overlay-mode .dw-header:has([data-menu].flex) .dw-burger:hover, body.dw-overlay-mode .dw-header:has([data-menu].flex) .dw-social, body.dw-overlay-mode .dw-header:has([data-menu].flex) .dw-icon-cta, body.dw-overlay-mode .dw-header:has([data-menu].flex) .dw-cta-text, body.dw-overlay-mode .dw-header:has([data-menu].flex) .dw-cta-sub, body.dw-overlay-mode .dw-header:has([data-menu].flex) .dw-icon-whatsapp { color: var(--text); } body.dw-overlay-mode.dw-menu-open .dw-logo-mark, body.dw-overlay-mode .dw-header:has([data-menu].flex) .dw-logo-mark { color: var(--primary); } /* Desktop nav. NOTE: no overflow:auto here — a scroll container clips on BOTH axes, which would cut off the Servicing dropdown flyout. Overlap with the logo/CTA is handled by the flex layout + gaps in the header instead. */ .dw-desktop-nav { min-width: 0; position: relative; padding-inline: 8px; padding-block: 1rem; height: auto; } /* Sliding "magic" highlight that glides between nav items on hover (added by app.js). Links sit above it; per-item hover/active backgrounds are suppressed on desktop so this single pill is the only highlight. */ .dw-desktop-nav .dw-nav-link { position: relative; z-index: 1; } .dw-nav-highlight { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 0.2rem; background: var(--nav-highlight, rgba(127, 127, 127, .12)); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); opacity: 0; pointer-events: none; will-change: transform, width; transition: transform .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1), height .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; } .dw-desktop-nav .dw-nav-link:hover, .dw-desktop-nav .dw-nav-link.is-active, .dw-desktop-nav .dw-nav-link.underline-hover:hover, .dw-desktop-nav .dw-nav-link.underline-hover.is-active, .dw-desktop-nav .dw-dropdown:hover > .dw-nav-link, .dw-desktop-nav .dw-dropdown.is-open > .dw-nav-link { color: var(--text); background: transparent; box-shadow: none; } /* Classic header: nav sits centered in the space between logo and CTA. `safe center` keeps it centered when it fits but falls back to start-aligned when items overflow, so the first item stays visible. */ .dw-desktop-nav--center { flex: 1 1 0%; justify-content: safe center; } /* Legacy header: push the Contact item to the far right of the nav row. */ .dw-nav--spread .dw-nav-item-contact { margin-left: auto; } /* Nav links */ .dw-nav-link { position: relative; display: inline-flex; align-items: center; gap: .3rem; color: var(--text); font-weight: var(--dw-font-menu-weight, 500); white-space: nowrap; transition: color .15s ease; } /* Desktop nav: padding/radius live on the base state so rest, hover and active share the same padding (.25rem .65rem) — the active item never grows or shifts relative to its siblings. */ .dw-desktop-nav .dw-nav-link { padding: .25rem .65rem; border-radius: var(--dw-btn-radius, .5rem); } .dw-nav-link:hover { color: var(--primary); } /* Active link: no colour change — same raised background pill as the hover. */ .dw-nav-link.is-active { color: var(--text); background: var(--bg-subtle); } /* underline-hover variant: no colour change on hover/active — mark both with a subtle raised background pill. */ .dw-nav-link.underline-hover:hover { color: var(--text); background: var(--bg-subtle); box-shadow: 0 1px 2px rgba(0,0,0,.25); } .dw-nav-link.underline-hover.is-active { color: var(--text); background: var(--bg-subtle); } /* -------------------------------------------------------------------------- Dropdown menu (Servicing) -------------------------------------------------------------------------- */ .dw-dropdown { position: relative; display: inline-flex; align-items: center; } .dw-caret { transition: transform .15s ease; } .dw-dropdown:hover .dw-caret, .dw-dropdown.is-open .dw-caret { transform: rotate(180deg); } /* Dropdown parent link (e.g. Servicing): no colour change — same background pill as the other nav links on hover / while the menu is open. */ .dw-dropdown > .dw-nav-link { padding: .25rem .65rem; border-radius: var(--dw-btn-radius, .5rem); } .dw-dropdown > .dw-nav-link:hover, .dw-dropdown:hover > .dw-nav-link, .dw-dropdown.is-open > .dw-nav-link { color: var(--text); background: var(--bg-subtle); box-shadow: 0 1px 2px rgba(0,0,0,.25); } .dw-dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: .625rem; min-width: 230px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: .75rem; box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: 1rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 70; } /* Transparent bridge across the gap so moving the cursor from the nav item to the menu doesn't drop the :hover and close it. */ .dw-dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.625rem; height: .625rem; } /* Arrow pointing up to the parent nav item (speech-bubble style). */ .dw-dropdown-menu::after { content: ""; position: absolute; top: -6px; left: 24px; width: 11px; height: 11px; background: var(--bg-elevated); border-top: 1px solid var(--border); border-left: 1px solid var(--border); border-top-left-radius: 3px; transform: rotate(45deg); pointer-events: none; } .dw-dropdown:hover .dw-dropdown-menu, .dw-dropdown.is-open .dw-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dw-dropdown-menu a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; padding-left: .75rem; border-radius: .5rem; color: var(--text); font-weight: 500; font-size: .95rem; border: 1px solid transparent; } .dw-dropdown-menu a:hover { background: var(--bg-subtle); border-color: var(--border); } .dw-dropdown-menu a svg { flex: none; } /* Right-aligned variant (when item sits near the end of the bar) */ .dw-dropdown-menu.align-right { left: auto; right: 0; } .dw-dropdown-menu.align-right::after { left: auto; right: 24px; } /* Manufacturer (makes) dropdown — 2-column compact grid of makes, with an optional price column (divider) alongside. */ .dw-makes-menu { display: flex; gap: 1rem; min-width: 420px; } /* The price column needs extra room — only the priced variant stays wide. */ .dw-makes-menu--hasprice { min-width: 560px; } .dw-makes-menu__brands { flex: 1 1 auto; align-content: start; display: grid; grid-template-columns: repeat(2, minmax(115px, 1fr)); gap: .4rem; } .dw-makes-menu__prices { flex: 0 0 auto; width: 11rem; padding-left: 1rem; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: .1rem; } .dw-makes-menu__prices-title { margin: 0 0 .35rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .dw-makes-menu__prices-title--sub { margin-top: .6rem; } /* Scoped so it beats the generic .dw-dropdown-menu a rule. */ .dw-makes-menu__prices .dw-make-price { display: block; margin: 0; padding: .3rem .5rem; font-size: .9rem; line-height: 1.3; color: var(--text); text-decoration: none; border-radius: .4rem; white-space: nowrap; } .dw-makes-menu__prices .dw-make-price:hover { background: rgba(0, 0, 0, .04); color: var(--primary); } .dw-makes-menu .dw-make { padding: .2rem .5rem; gap: .4rem; font-size: .9rem; /* Faint tile behind each brand to outline them. */ background: rgba(0, 0, 0, .3); border: 1px solid rgba(0, 0, 0, .06); border-radius: .4rem; } /* White colour scheme: soften the brand tile background by 50% (the flat white header makes the .3 tint read too dark). Excludes the "View All" button. */ body.theme-white .dw-makes-menu .dw-make:not(.dw-make--all), body.theme-platinum .dw-makes-menu .dw-make:not(.dw-make--all) { background: rgba(0, 0, 0, 0.01); } /* Brand tiles in the makes dropdown get a slightly roomier hit area than the base .dw-make. Excludes .dw-make--all, which keeps its own button padding. */ .dw-makes-menu__brands .dw-make:not(.dw-make--all) { padding: .5rem; } .dw-makes-menu .dw-make__logo { width: 1.4rem; height: 1.4rem; } .dw-makes-mobile .dw-make { display: flex; align-items: center; gap: .5rem; padding: .25rem .6rem; /* Faint tile behind each brand to outline them (matches desktop). */ background: rgba(0, 0, 0, .02); border: 1px solid rgba(0, 0, 0, .06); border-radius: .4rem; } .dw-make__logo { width: 1.7rem; height: 1.7rem; object-fit: contain; flex: none; } .dw-make__name { text-decoration: underline; white-space: nowrap; } /* "View All" spans the full width below the makes, styled as a primary button (matches .dw-btn.dw-btn-primary). Menu-scoped so it beats .dw-dropdown-menu a. */ .dw-makes-menu__brands .dw-make--all, .dw-makes-mobile .dw-make--all { grid-column: 1 / -1; justify-content: center; margin-top: .75rem; padding: .625rem 1.25rem; font-weight: 600; color: var(--primary-contrast); background: var(--primary); background: linear-gradient(to bottom, color-mix(in srgb, var(--primary), white 2.5%), color-mix(in srgb, var(--primary), black 2.5%)); border: 1px solid var(--primary); border-radius: var(--dw-btn-radius, .5rem); } .dw-makes-menu__brands .dw-make--all:hover, .dw-makes-mobile .dw-make--all:hover { color: var(--primary-contrast); background: var(--primary-hover); background: linear-gradient(to bottom, color-mix(in srgb, var(--primary-hover), white 2.5%), color-mix(in srgb, var(--primary-hover), black 2.5%)); border-color: var(--primary-hover); } .dw-make--all .dw-make__name { font-weight: 700; text-decoration: none; color: inherit; } /* Mobile disclosure (Servicing inside the burger menu) */ .dw-mobile-sub { display: none; padding-left: .75rem; } [data-mobile-sub-toggle].is-open + .dw-mobile-sub { display: flex; flex-direction: column; } [data-mobile-sub-toggle] .dw-caret.is-open { transform: rotate(180deg); } /* Mobile menu items: each link gets a bottom border to separate the rows. var(--border) is theme-aware, so it reads on both light and dark. */ /* Remove the inter-item flex gap so the hover background fills each row fully (otherwise the gap leaves an unhighlighted strip above the hovered item). */ /* Cap the open mobile menu height and let it scroll on its own — otherwise a long expanded submenu (e.g. manufacturers) can't be reached inside a positioned/overlay header. -webkit-overflow-scrolling for iOS momentum. */ [data-menu] { gap: 0; max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Smooth open: the panel fades + slides in, its items gently stagger. Runs when app.js adds .flex (open); closing stays instant. */ [data-menu].flex { animation: dw-menu-in .28s ease both; } [data-menu].flex > * { animation: dw-menu-item-in .32s ease both; } [data-menu].flex > *:nth-child(1) { animation-delay: .04s; } [data-menu].flex > *:nth-child(2) { animation-delay: .08s; } [data-menu].flex > *:nth-child(3) { animation-delay: .12s; } [data-menu].flex > *:nth-child(4) { animation-delay: .16s; } [data-menu].flex > *:nth-child(5) { animation-delay: .20s; } [data-menu].flex > *:nth-child(6) { animation-delay: .24s; } [data-menu].flex > *:nth-child(n+7) { animation-delay: .28s; } @keyframes dw-menu-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: translateY(0); } } @keyframes dw-menu-item-in { from { opacity: 0; transform: translateY(-.4rem); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { [data-menu].flex, [data-menu].flex > * { animation: none; } } /* Manufacturer submenu: 2 columns on mobile. */ [data-mobile-sub-toggle].is-open + .dw-makes-mobile { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; padding: .5rem; } /* Dropdown parent toggle (mobile): styles moved off inline so the :hover background rule can take effect (inline styles would otherwise win). */ .dw-nav-sub-toggle { width: 100%; justify-content: space-between; background: none; border: 0; cursor: pointer; padding-right: 1rem; } /* Bigger dropdown caret in the mobile menu, rotating when expanded. */ .dw-nav-sub-toggle .dw-caret { width: 1.5rem; height: 1.5rem; transition: transform .3s ease; } .dw-nav-sub-toggle.is-open .dw-caret { transform: rotate(180deg); } [data-menu] .dw-nav-link { padding-left: .75rem; /* !important so it beats the inline `border:0` reset on the dropdown toggle