(a sibling of its ![]()
, not a
child) mounts on click; without this, opening any image but the last would
insert a 5th direct child and shift every image after it into the wrong
grid-area. */
.w2-signpost-tile { width: 100%; height: 100%; }
/* The carousel's own wrapper for grid slot "e" — deliberately a different
class from .w2-signpost-tile (just below) so its image does NOT pick up
that class's object-fit:cover cropping rule; Web2Carousel scales its own
image to fit instead. */
.w2-signpost-carousel-slot { width: 100%; height: 100%; }
/* Direct-child combinators, not a plain descendant selector: the lightbox
![]()
that Web2ZoomImage mounts on click lives one
level deeper (inside its own .w2-lightbox div, a grandchild of the tile),
so it must NOT match here — otherwise this rule's object-fit:cover beats
.w2-lightbox-img's object-fit:contain (higher specificity: class+type vs
class alone) and the zoomed view shows the same crop as the thumbnail. */
.w2-signpost-media > img,
.w2-signpost-tile > img,
.w2-signpost-media .w2-tile-abstract { width: 100%; height: 100%; border-radius: 2px; object-fit: cover; }
.w2-tile-video { position: relative; width: 100%; height: 100%; border-radius: 2px; overflow: hidden; }
.w2-tile-video video {
position: absolute; top: 50%; left: 50%;
width: 100%; height: auto;
transform: translate(-50%, -50%);
}
.w2-tile-abstract {
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem; color: rgba(0,0,0,.35);
background: linear-gradient(155deg, #e3e5e6, #cfd3d5);
}
.w2-signpost-content { flex: 1 1 280px; max-width: 340px; }
.w2-signpost-content h2 {
font-family: var(--cr-font-body); color: #14181c; text-transform: uppercase;
font-weight: 800; letter-spacing: .5px; font-size: 1.6rem; margin-bottom: .6rem;
}
.w2-model-translation { font-size: .85rem; font-style: italic; color: #6b6f73; margin: -.4rem 0 .75rem; }
.w2-signpost-content p { color: #6b6f73; font-size: .95rem; margin-bottom: 1.5rem; }
.w2-signpost-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
/* Signposts are always light regardless of the active branding profile,
but .w2-btn-primary/.w2-btn-secondary normally read the theme-reactive
--w2-heading token (white under 5 of the 6 profiles) — force the fixed
dark styling here too, same reasoning as the hero's fixed-light override. */
.w2-signpost .w2-btn-secondary { color: #14181c; border-color: rgba(20,24,28,.3); }
.w2-signpost .w2-btn-secondary:hover { border-color: #14181c; background: rgba(20,24,28,.05); }
@media (max-width: 760px) {
/* Same content, much less air around it — the desktop values (7rem/
6.5rem section padding, 5rem gaps, 220px-min buttons) were designed
for a wide canvas and just read as empty space on a phone. */
.w2-section { padding: 3rem 0; }
.w2-container { padding: 0 1.25rem; }
.w2-pillars, .w2-grid, .w2-quote-grid { gap: 1.5rem; margin-top: 2rem; }
.w2-pillars-2col { grid-template-columns: 1fr; }
.w2-card { padding: 1.75rem 1.5rem; }
.w2-card-media { margin: -1.75rem -1.5rem 1.25rem; }
.w2-hero { min-height: 100svh; }
.w2-hero-content h1 { margin-bottom: .85rem; }
.w2-signpost { padding: 3rem 0; }
.w2-signpost-inner, .w2-signpost--reverse .w2-signpost-inner {
flex-direction: column; align-items: stretch; gap: 1rem;
}
.w2-signpost-media {
order: 2;
flex-basis: auto; /* desktop's 640px flex-basis means "height" once the
container above switches to flex-direction: column */
/* Columns/areas are intentionally NOT overridden here — the desktop
5-column fr-based grid already scales proportionally with width,
so keeping it preserves the same 2:3 / 1:4 tile-size ratios. Only
the row heights need scaling down, kept at the same 175:300 ratio. */
grid-template-rows: 95px 163px;
}
.w2-signpost-media.has-carousel { grid-template-rows: 95px 163px 163px; }
/* Title + description need to render above the images and the buttons
below them — display:contents lifts the wrapper out of the way so its
children become directly orderable alongside the media block. */
.w2-signpost-content { display: contents; max-width: none; }
.w2-signpost-content > h2,
.w2-signpost-content > .w2-model-translation,
.w2-signpost-content > p { order: 1; }
.w2-signpost-content > .w2-signpost-actions { order: 3; }
.w2-btn-primary, .w2-btn-secondary { min-width: 0; width: 100%; padding: .85rem 1.5rem; }
.w2-actions, .w2-signpost-actions { flex-direction: column; align-items: stretch; }
.w2-footer { padding: 2.5rem 0 1.25rem; }
}
/* ── Footer ── */
.w2-footer { background: var(--w2-footer-bg); border-top: 1px solid var(--w2-line); padding: 4rem 0 1.5rem; }
.w2-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; margin-bottom: 2.5rem; }
@media (max-width: 760px) { .w2-footer-grid { grid-template-columns: 1fr; } }
.w2-footer-brand p { max-width: 320px; margin-top: 1rem; }
.w2-footer-social { margin-top: 1.25rem; }
.w2-social-link {
display: inline-flex; align-items: center; gap: .65rem;
color: var(--w2-mute); font-size: .9rem;
transition: color .2s ease;
}
.w2-social-link:hover { color: var(--w2-accent); }
.w2-social-icon {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
border: 1px solid var(--w2-btn-outline); color: inherit;
transition: border-color .2s ease;
}
.w2-social-icon svg { width: 17px; height: 17px; }
.w2-social-link:hover .w2-social-icon { border-color: var(--w2-accent); }
.w2-footer-column h3 { color: var(--w2-heading); font-size: 1rem; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .5px; }
.w2-footer-column ul { list-style: none; margin: 0; padding: 0; }
.w2-footer-column ul li { margin-bottom: .6rem; }
.w2-footer-column a { color: var(--w2-mute); font-size: .9rem; }
.w2-footer-column a:hover { color: var(--w2-accent); }
.w2-footer-bottom { text-align: center; padding-top: 1.5rem; border-top: 1px solid var(--w2-line); font-size: .8rem; color: var(--w2-mute); }
/* ── Model-page image lightbox (Web2ZoomImage.razor) ── */
.w2-lightbox {
position: fixed; inset: 0; z-index: 2000;
background: rgba(10,12,14,.92);
display: flex; align-items: center; justify-content: center;
padding: 2rem;
cursor: zoom-out;
}
.w2-lightbox-img {
max-width: 90vw; max-height: 85vh; object-fit: contain;
cursor: zoom-in;
transition: transform .3s ease;
touch-action: pinch-zoom;
}
.w2-lightbox-img-zoomed { transform: scale(1.5); cursor: grab; touch-action: none; }
.w2-lightbox-img-zoomed:active { cursor: grabbing; }
.w2-lightbox-close {
position: absolute; top: 1.25rem; right: 1.5rem; z-index: 1;
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3);
color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s ease;
}
.w2-lightbox-close:hover { background: rgba(255,255,255,.18); }
.w2-lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
width: 48px; height: 48px; border-radius: 50%;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3);
color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s ease;
}
.w2-lightbox-nav:hover { background: rgba(255,255,255,.18); }
.w2-lightbox-nav-prev { left: 1.25rem; }
.w2-lightbox-nav-next { right: 1.25rem; }
/* ── Model-page image carousel (Web2Carousel.razor) — the gallery grid's
3rd, full-width row, so it spans exactly the gallery's width and fills
whatever height that grid cell gives it (height:100%), not a size of its
own. Three columns: a dimmed sliver of the previous slide, the current
slide, a dimmed sliver of the next — same .75rem gap as the gallery
tiles above, so it reads as part of the same collage. ── */
/* The single row is pinned to the container's height (minmax(0, 1fr)) and
every panel gets min-height:0 — an implicit auto row would instead grow
to each image's natural height, so the row (and with it the chevrons and
the counter pill) would jump up and down with every slide. */
.w2-carousel {
width: 100%; height: 100%;
display: grid; grid-template-columns: 1fr 4fr 1fr; grid-template-rows: minmax(0, 1fr); gap: .75rem;
}
.w2-carousel--single { grid-template-columns: 1fr; }
.w2-carousel-current { position: relative; min-width: 0; min-height: 0; height: 100%; overflow: hidden; border-radius: 2px; }
/* Direct-child selector on the image (not a plain descendant one), same
reason as the gallery fix: the lightbox's full-screen ![]()
that
Web2ZoomImage mounts on click lives one level deeper (inside its own
.w2-lightbox div), so it must NOT pick up this cover crop — otherwise the
"zoomed" view shows the same crop as the inline slide. */
.w2-carousel-current > img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; display: block; }
/* The slivers show the edge of the neighbouring slide that faces the
current one (the previous slide's right edge, the next slide's left
edge), so the row reads as one continuous strip. */
.w2-carousel-peek {
position: relative; min-width: 0; min-height: 0; height: 100%;
padding: 0; border: 0; background: none; cursor: pointer;
overflow: hidden; border-radius: 2px;
}
.w2-carousel-peek img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .45; transition: opacity .25s ease; }
.w2-carousel-peek-prev img { object-position: right center; }
.w2-carousel-peek-next img { object-position: left center; }
.w2-carousel-peek:hover img { opacity: .7; }
.w2-carousel-chevron {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
display: flex;
}
.w2-carousel-chevron svg { width: 14px; height: 24px; display: block; }
/* Crossfade: the outgoing slide is laid over the new one and fades out.
Rendered before the chevron/counter in the DOM, so those stay on top;
pointer-events off so clicks reach the new slide underneath. */
.w2-carousel-current > img.w2-carousel-fade,
.w2-carousel-peek img.w2-carousel-fade {
position: absolute; inset: 0;
pointer-events: none;
animation: w2-carousel-fade-out .5s ease forwards;
}
.w2-carousel-peek img.w2-carousel-fade { animation-name: w2-carousel-peek-fade-out; }
@keyframes w2-carousel-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes w2-carousel-peek-fade-out { from { opacity: .45; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.w2-carousel-current > img.w2-carousel-fade,
.w2-carousel-peek img.w2-carousel-fade { animation: none; opacity: 0; }
}
/* Counter pill on the current slide — translucent dark so it stays legible
over any photo, independent of the page's branding profile (same fixed
photo-overlay register as the lightbox chrome). */
.w2-carousel-counter {
position: absolute; left: 1.75rem; bottom: 1.5rem;
display: flex; align-items: center; gap: .35rem;
padding: .4rem .55rem; border-radius: 6px;
background: rgba(20,24,28,.45); color: #fff;
font-size: .85rem; font-weight: 600; letter-spacing: .04em;
backdrop-filter: blur(4px);
}
.w2-carousel-counter span { min-width: 2.75rem; text-align: center; font-variant-numeric: tabular-nums; }
.w2-carousel-counter button {
padding: .2rem .3rem; border: 0; background: none; color: inherit; cursor: pointer;
display: flex; opacity: .85;
}
.w2-carousel-counter button:hover { opacity: 1; }
.w2-carousel-counter svg { width: 8px; height: 13px; display: block; }
@media (max-width: 760px) {
.w2-carousel { grid-template-columns: 1fr 6fr 1fr; gap: .5rem; }
.w2-carousel-counter { left: .75rem; bottom: .75rem; font-size: .75rem; padding: .3rem .45rem; }
.w2-carousel-chevron svg { width: 10px; height: 18px; }
}
/* ── Vehicle Book (truck-logbook) — styled to match the Premium PDF
product sheet (ProductSheetPremiumPdfService.cs): dark cinematic ground,
cream serif display type, a thin gold rule, uppercase letter-spaced
labels. Fixed colors regardless of branding profile, same reasoning as
.w2-hero's fixed-light override — this is meant to feel like a printed
keepsake handed to the owner, not the site's everyday theme, so it
doesn't follow NewClearround (or any other profile) switching the rest
of the page to a light canvas. Exact hex values are copied from the PDF
service's own constants so the two stay pixel-matched. */
.vb-premium {
background: #24282C;
color: #F5EFE2;
}
.vb-premium .w2-eyebrow { color: #C9A66B; }
.vb-premium h1, .vb-premium h2 { color: #F5EFE2; }
.vb-premium .w2-lede { color: #A69C88; }
.vb-premium .w2-btn-primary { background: #C9A66B; border-color: #C9A66B; color: #24282C; }
.vb-premium .w2-btn-primary:hover { background: transparent; color: #C9A66B; }
.vb-premium .w2-btn-primary:disabled { opacity: .55; cursor: default; }
.vb-premium .alert-danger {
background: rgba(201,90,90,.14); border: 1px solid rgba(201,90,90,.4);
color: #F2C9C9; border-radius: 2px; font-size: .9rem;
}
.vb-divider { width: 42px; height: 1px; background: #C9A66B; margin: 1.1rem auto 1.75rem; }
.vb-card { background: #1c1f22; border: 1px solid #3A3F44; border-radius: 4px; padding: 1.75rem; }
@media (max-width: 560px) { .vb-card { padding: 1.25rem; } }
.vb-label {
display: block; font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase;
color: #A69C88; margin-bottom: .5rem;
}
.vb-input, .vb-textarea, .vb-file {
background: #16181b; border: 1px solid #3A3F44; color: #F5EFE2; border-radius: 2px;
padding: .7rem .9rem; width: 100%; font-family: var(--cr-font-body); font-size: .95rem;
}
.vb-input::placeholder, .vb-textarea::placeholder { color: #6E6656; }
.vb-input:focus, .vb-textarea:focus, .vb-file:focus {
outline: none; border-color: #C9A66B;
}
.vb-code-input {
font-family: monospace; font-size: 1.3rem; letter-spacing: .3em; text-align: center;
text-transform: uppercase;
}
.vb-section-label {
display: block; text-align: center; font-size: .72rem; letter-spacing: 2px;
text-transform: uppercase; color: #C9A66B; margin: 2.5rem 0 1.25rem;
}
.vb-muted { color: #A69C88; }
.vb-entry { padding: 1.5rem 0; border-bottom: 1px solid #3A3F44; }
.vb-entry:last-child { border-bottom: none; }
.vb-entry-date { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; color: #F5EFE2; }
.vb-entry-note { color: #A69C88; margin-top: .4rem; margin-bottom: 0; white-space: pre-wrap; line-height: 1.6; }
.vb-attachments { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.vb-attachment-image {
width: 72px; height: 72px; object-fit: cover; border-radius: 2px; border: 1px solid #3A3F44;
}
.vb-attachment-file {
display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: #A69C88;
border: 1px solid #3A3F44; border-radius: 2px; padding: .5rem .7rem; transition: all .2s ease;
}
.vb-attachment-file:hover { border-color: #C9A66B; color: #F5EFE2; }
.vb-badge {
display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem;
letter-spacing: .5px; color: #A69C88; border: 1px solid #3A3F44; border-radius: 2px;
padding: .3rem .6rem;
}