in isolation), * matching the four families classic|grid|sidebar|showcase. * - Responsive (mobile-first-adjacent, base-then-media), no build step. * * This file is the single source of truth for the block CSS. It is ed by * the WT head (wtRenderHead.php) alongside templates-web.css / wt-families.css / * wt-blocks-home.css, so the block partials never inline CSS themselves. */ /* ── Shared block heading (fleet / coverage / blog / contact) ───────────── */ .wt-bhead { max-width: 640px; margin: 0 auto 34px; text-align: center; } .wt-bhead__title { margin: 4px 0 0; } .wt-bhead__intro { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--wt-mute-text); } /* Grid & sidebar families read left-aligned; classic & showcase stay centred. */ [data-family="grid"] .wt-bhead, [data-wt-family="grid"] .wt-bhead, [data-family="sidebar"] .wt-bhead, [data-wt-family="sidebar"] .wt-bhead { margin-left: 0; text-align: left; } /* ── Shared alternating band (showcase block + fleet/showcase-family fold) ─ */ .wt-band { display: flex; gap: 44px; align-items: center; padding: 30px 0; } .wt-band + .wt-band { border-top: 1px solid var(--wt-rule); } .wt-band--rev { flex-direction: row-reverse; } .wt-band__media, .wt-band__text { flex: 1 1 0; min-width: 0; } .wt-band__img { width: 100%; border-radius: var(--wt-radius-lg); box-shadow: var(--wt-card-shadow); object-fit: cover; aspect-ratio: 16 / 10; } .wt-band__ph { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--wt-radius-lg); background: var(--wt-primary-tint); border: 1px dashed var(--wt-rule); display: flex; align-items: center; justify-content: center; color: var(--wt-primary); font: 800 40px/1 var(--wt-font-head); } /* ── Banner — inner-page hero (title + intro + eyebrow), family-aware ────── */ .wt-block-banner { padding: 0; } .wt-banner { position: relative; overflow: hidden; background: var(--wt-hero-bg); color: var(--wt-hero-text); border-bottom: var(--wt-hero-border); padding: 64px 26px; } .wt-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .wt-banner__scrim { position: absolute; inset: 0; z-index: 1; background: var(--wt-hero-scrim); pointer-events: none; } .wt-banner__inner { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; } .wt-banner__eyebrow { color: var(--wt-hero-eyebrow); } .wt-banner__title { font-weight: var(--wt-heading-weight, 700); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: var(--wt-heading-tracking, 0); margin: 0; } .wt-banner__intro { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: var(--wt-hero-sub-text); max-width: 620px; } /* Photo banners (design uplift 2026-07): skin tokens can't guarantee contrast over a photograph, so force white text and an always-dark scrim — several skins were putting dark ink straight onto the image. */ .wt-banner--photo { color: #fff; } .wt-banner--photo .wt-banner__title { color: #fff; } .wt-banner--photo .wt-banner__intro { color: rgba(255, 255, 255, .88); } .wt-banner--photo .wt-banner__eyebrow { color: rgba(255, 255, 255, .82); } .wt-banner--photo .wt-banner__scrim { background: linear-gradient(180deg, rgba(10, 12, 16, .38), rgba(10, 12, 16, .62)); } /* classic → centred; sidebar → left; grid → split; showcase → centred wide. */ .wt-banner--center { text-align: center; } .wt-banner--center .wt-banner__intro { margin-left: auto; margin-right: auto; } .wt-banner--left { text-align: left; } .wt-banner--wide .wt-banner__inner { max-width: 1180px; text-align: center; } .wt-banner--wide .wt-banner__intro { margin-left: auto; margin-right: auto; max-width: 720px; } .wt-banner--split .wt-banner__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: end; } .wt-banner--split .wt-banner__intro { max-width: none; } /* ── Fleet — vehicle cards (grid) / rows (classic·sidebar) / bands (showcase) */ .wt-fleet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } [data-family="grid"] .wt-fleet__grid, [data-wt-family="grid"] .wt-fleet__grid { grid-template-columns: repeat(var(--wt-grid-cols, 3), 1fr); } .wt-fleet__list { display: flex; flex-direction: column; gap: 18px; } .wt-fleet-card { background: var(--wt-surface); border-radius: var(--wt-radius-lg); box-shadow: var(--wt-card-shadow); border: var(--wt-card-border); overflow: hidden; display: flex; flex-direction: column; } .wt-fleet-card__media { position: relative; background: var(--wt-primary-tint); } .wt-fleet-card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .wt-fleet-card__ph { width: 100%; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; color: var(--wt-primary); font: 800 15px/1.2 var(--wt-font-head); letter-spacing: .04em; } .wt-fleet-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .wt-fleet-card__name { font: 800 18px/1.15 var(--wt-font-head); color: var(--wt-ink); } .wt-fleet-card__meta { font-size: 13px; color: var(--wt-mute-text); } .wt-fleet-card__meta strong { color: var(--wt-ink); } .wt-fleet-card__price { font: 800 15px/1 var(--wt-font-head); color: var(--wt-primary); } .wt-fleet-card__desc { font-size: 13.5px; line-height: 1.6; color: var(--wt-body-text); } .wt-fleet-card__feat { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 0; } .wt-fleet-card__feat li { font-size: 13px; color: var(--wt-body-text); padding-left: 20px; position: relative; } .wt-fleet-card__feat li::before { content: "\2713"; position: absolute; left: 0; color: var(--wt-accent); font-weight: 800; } .wt-fleet-card__cta { align-self: flex-start; margin-top: 6px; } /* List (classic / sidebar): media beside body. */ .wt-fleet__list .wt-fleet-card { flex-direction: row; } .wt-fleet__list .wt-fleet-card__media { flex: 0 0 40%; max-width: 320px; } .wt-fleet__list .wt-fleet-card__img, .wt-fleet__list .wt-fleet-card__ph { height: 100%; aspect-ratio: auto; min-height: 180px; } /* ── Coverage — service-area chips + Mapbox map (graceful placeholder) ───── */ .wt-coverage__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 34px; align-items: start; } .wt-coverage__areas { display: flex; flex-wrap: wrap; gap: 9px; align-content: flex-start; } .wt-coverage__areas .wt-chip { font-size: 12px; padding: 8px 13px; } .wt-coverage__lead { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: var(--wt-mute-text); } .wt-coverage__map { min-height: 320px; } .wt-coverage-map { width: 100%; height: 100%; min-height: 320px; border-radius: var(--wt-radius-lg); overflow: hidden; box-shadow: var(--wt-card-shadow); border: var(--wt-card-border); } .wt-coverage-map--ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 28px; background: var(--wt-primary-tint); border: 1px dashed var(--wt-rule); color: var(--wt-mute-text); font-size: 13.5px; } .wt-coverage-map--ph strong { color: var(--wt-ink); font-family: var(--wt-font-head); } /* Sidebar family: map becomes the sticky aside. */ [data-family="sidebar"] .wt-coverage__grid, [data-wt-family="sidebar"] .wt-coverage__grid { grid-template-columns: 1fr 340px; } /* ── Blog — teaser (home, 3 cards) + listing (inner) post cards ──────────── */ .wt-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } [data-family="grid"] .wt-blog__grid, [data-wt-family="grid"] .wt-blog__grid { grid-template-columns: repeat(var(--wt-grid-cols, 3), 1fr); } .wt-blog__list { display: flex; flex-direction: column; gap: 18px; } .wt-blog-card { background: var(--wt-surface); border-radius: var(--wt-radius-lg); box-shadow: var(--wt-card-shadow); border: var(--wt-card-border); overflow: hidden; display: flex; flex-direction: column; } .wt-blog-card__media { background: var(--wt-primary-tint); } .wt-blog-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .wt-blog-card__ph { width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; color: var(--wt-primary); font: 800 34px/1 var(--wt-font-head); } .wt-blog-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .wt-blog-card__cat { align-self: flex-start; } .wt-blog-card__title { font: 800 17px/1.25 var(--wt-font-head); color: var(--wt-ink); } .wt-blog-card__title a { text-decoration: none; } .wt-blog-card__date { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--wt-mute-text); } .wt-blog-card__excerpt { font-size: 13.5px; line-height: 1.6; color: var(--wt-body-text); } .wt-blog-card__more { align-self: flex-start; margin-top: 2px; font: 700 13px/1 var(--wt-font-body); color: var(--wt-primary); text-decoration: none; } .wt-blog-card__more:hover { text-decoration: underline; } /* Listing (classic / sidebar): media beside body. */ .wt-blog__list .wt-blog-card { flex-direction: row; } .wt-blog__list .wt-blog-card__media { flex: 0 0 38%; max-width: 300px; } .wt-blog__list .wt-blog-card__img, .wt-blog__list .wt-blog-card__ph { height: 100%; aspect-ratio: auto; min-height: 170px; } /* ── Contact — form card + info + hours + map ───────────────────────────── */ .wt-contact__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: start; } [data-family="sidebar"] .wt-contact__grid, [data-wt-family="sidebar"] .wt-contact__grid { grid-template-columns: 1fr 340px; } /* Sidebar family routes contact into the narrow aside rail → stack, don't grid. */ .wt-contact__stack { display: flex; flex-direction: column; gap: 22px; } .wt-contact__form { background: var(--wt-surface); border-radius: var(--wt-radius-lg); box-shadow: var(--wt-card-shadow); border: var(--wt-card-border); padding: 24px; } .wt-contact-fieldset { border: 0; margin: 0 0 6px; padding: 0; } .wt-contact-fieldset__legend { font: 700 12px/1 var(--wt-font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--wt-mute-text); margin: 4px 0 12px; padding: 0; } .wt-contact-field { margin-bottom: 14px; } .wt-contact-field__label { display: block; font: 600 12.5px/1 var(--wt-font-body); color: var(--wt-ink); margin-bottom: 6px; } .wt-contact-input, .wt-contact-textarea { width: 100%; font: 400 14px/1.4 var(--wt-font-body); color: var(--wt-body-text); background: var(--wt-page-bg); border: 1px solid var(--wt-rule); border-radius: var(--wt-radius); padding: 11px 13px; } .wt-contact-input:focus, .wt-contact-textarea:focus { outline: 2px solid var(--wt-primary); outline-offset: 1px; } .wt-contact-textarea { min-height: 96px; resize: vertical; } .wt-contact-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .wt-contact__submit { width: 100%; margin-top: 4px; } .wt-contact__aside { display: flex; flex-direction: column; gap: 22px; } .wt-contact__info-row { display: flex; flex-direction: column; gap: 8px; } .wt-contact__info-row a, .wt-contact__info-row span { font-size: 14px; color: var(--wt-body-text); text-decoration: none; } .wt-contact__info-row a:hover { color: var(--wt-primary); } .wt-contact__hours { display: flex; flex-direction: column; gap: 6px; } .wt-contact-hours-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--wt-rule); } .wt-contact-hours-row:last-child { border-bottom: 0; } .wt-contact-hours-row .wt-d { color: var(--wt-mute-text); } .wt-contact-hours-row .wt-t { color: var(--wt-ink); font-weight: 600; } .wt-contact__map { min-height: 220px; } .wt-contact__subhead { font: 700 12px/1 var(--wt-font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--wt-mute-text); margin: 0 0 10px; } /* ── Showcase — alternating zig-zag bands ───────────────────────────────── */ .wt-showcase__tag { margin-bottom: 12px; } .wt-showcase__h { font: 800 24px/1.15 var(--wt-font-head); color: var(--wt-ink); letter-spacing: var(--wt-heading-tracking, 0); margin: 0; } .wt-showcase__body { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--wt-body-text); } .wt-showcase__cta { margin-top: 18px; } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .wt-coverage__grid, [data-family="sidebar"] .wt-coverage__grid, [data-wt-family="sidebar"] .wt-coverage__grid, .wt-contact__grid, [data-family="sidebar"] .wt-contact__grid, [data-wt-family="sidebar"] .wt-contact__grid { grid-template-columns: 1fr; } .wt-banner--split .wt-banner__inner { grid-template-columns: 1fr; gap: 14px; align-items: start; } } @media (max-width: 720px) { .wt-fleet__grid, .wt-blog__grid { grid-template-columns: 1fr; } .wt-fleet__list .wt-fleet-card, .wt-blog__list .wt-blog-card { flex-direction: column; } .wt-fleet__list .wt-fleet-card__media, .wt-blog__list .wt-blog-card__media { flex: none; max-width: none; } .wt-fleet__list .wt-fleet-card__img, .wt-fleet__list .wt-fleet-card__ph, .wt-blog__list .wt-blog-card__img, .wt-blog__list .wt-blog-card__ph { aspect-ratio: 16 / 10; min-height: 0; } .wt-band, .wt-band--rev { flex-direction: column; gap: 20px; padding: 22px 0; } .wt-contact-grid-2 { grid-template-columns: 1fr; } }