/* Theme Name: Yamaguchi Prestige Theme URI: https://www.yamaguchimotorsltd.online/ Author: Yamaguchi Motors 合同会社 Description: Prestige Plus — the owner-approved 2026-10-30 design (Toyota-grade white/red tuning, official-logo header with premium WhatsApp/Messenger pills, redesigned pf- footer, HD hero, per-service AI imagery, rebuilt in-stock showcase) skinned onto the Bright Clean presentation layer. Presentation only: cars stay WooCommerce products, tours stay the tours plugin's posts, prices stay in post meta. No ratings, no testimonials, no text-substitution switches; the dealer licence number is a hardcoded constant (inc/helpers.php). css/premium.css is byte-identical to the Bright Clean build — the tour layer depends on it. Version: 1.0.0 Requires at least: 6.0 Tested up to: 7.1 Requires PHP: 7.4 Text Domain: yamaguchi-clean-showroom */ /* ============================================================ Design tokens — BRIGHT CLEAN (v2.0.1, approved redesign). White ground, light-grey bands, one red, charcoal text. There is NO navy in this design system. The legacy variable names --ymcs-navy / --ymcs-slate-on-navy are kept ONLY as aliases onto the new palette so not-yet-restyled inner-page rules (pass 2) degrade to charcoal instead of breaking; new CSS must use the semantic tokens, never the aliases. ============================================================ */ :root { --ymcs-red: #C1121F; --ymcs-red-hover: #9A0E19; --ymcs-red-soft: #FCEEEF; --ymcs-bg: #FFFFFF; --ymcs-bg-alt: #F4F5F7; --ymcs-ink: #1A1A1A; --ymcs-ink-2: #41464E; --ymcs-slate: #6B7078; --ymcs-line: #E4E6EA; /* Legacy aliases (pass-2 surfaces) — charcoal, never navy. */ --ymcs-navy: #1A1A1A; --ymcs-navy-deep: #101114; --ymcs-slate-on-navy: #C9CDD2; --ymcs-radius: 12px; --ymcs-card-radius: 10px; --ymcs-shadow: 0 1px 2px rgba(26, 26, 26, 0.06), 0 10px 30px rgba(26, 26, 26, 0.08); --ymcs-header-h: 72px; --ymcs-bar-h: 56px; --ymcs-font: "Manrope", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Sans", Meiryo, sans-serif; --ymcs-font-display: "Archivo", "Arial Narrow", "Noto Sans JP", sans-serif; --ymcs-font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; /* Legacy alias: condensed headings now resolve to Archivo. */ --ymcs-font-cond: "Archivo", "Arial Narrow", "Noto Sans JP", sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body.ymcs { margin: 0; font-family: var(--ymcs-font); font-size: 16px; line-height: 1.6; color: var(--ymcs-ink); background: var(--ymcs-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: var(--ymcs-ink); } :focus-visible { outline: 3px solid var(--ymcs-red); outline-offset: 2px; } .ymcs-jp { font-family: var(--ymcs-font-jp); } .ymcs-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; } @media (min-width: 768px) { .ymcs-wrap { padding: 0 32px; } } .ymcs-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Headings: Archivo, sentence case, red speed line ---------- */ .ymcs-h1 { font-family: var(--ymcs-font-display); font-stretch: 112%; font-weight: 800; letter-spacing: -0.01em; font-size: 32px; line-height: 1.12; margin: 0 0 12px; color: var(--ymcs-ink); text-wrap: balance; } @media (min-width: 768px) { .ymcs-h1 { font-size: 44px; } } .ymcs-h2 { font-family: var(--ymcs-font-display); font-stretch: 112%; font-weight: 800; letter-spacing: -0.01em; font-size: 24px; line-height: 1.15; margin: 0 0 20px; color: var(--ymcs-ink); text-wrap: balance; } /* The signature red speed line under section headings. */ .ymcs-h2::after { content: ""; display: block; width: 56px; height: 3px; background: var(--ymcs-red); border-radius: 2px; margin-top: 14px; } /* v1.0.29: a section heading that follows other content (e.g. Trade in under the steps cards on /sell-buy/) was jammed against the block above — .ymcs-h2 has no top margin. Give every non-leading h2 real clearance. */ .ymcs-h2:not(:first-child) { margin-top: 48px; } @media (min-width: 768px) { .ymcs-h2 { font-size: 30px; } } .ymcs-h2--light { color: #fff; } /* Eyebrow + standalone speed line (homepage section heads). */ .ymcs-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ymcs-red); margin: 0; } .ymcs-eyebrow .ymcs-jp { letter-spacing: 0.1em; color: var(--ymcs-slate); font-weight: 700; } .ymcs-speed { display: block; height: 4px; width: 140px; background: var(--ymcs-red); border-radius: 2px; transform-origin: left; } .ymcs-sec-head { margin-bottom: 28px; } .ymcs-sec-head .ymcs-h2 { margin: 10px 0 0; } .ymcs-sec-head .ymcs-h2::after { display: none; } .ymcs-sec-head .ymcs-speed { width: 56px; height: 3px; margin-top: 14px; } .ymcs-sec-head__sub { color: var(--ymcs-ink-2); margin-top: 12px; max-width: 46em; } .ymcs-sec-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; } /* ---------- Buttons & links ---------- */ .ymcs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.3; transition: background 0.2s, color 0.2s, border-color 0.2s; } .ymcs-btn svg { width: 18px; height: 18px; flex: none; } .ymcs-btn--primary { background: var(--ymcs-red); color: #fff; } .ymcs-btn--primary:hover { background: var(--ymcs-red-hover); } /* Bright Clean: Messenger buttons are red like every primary CTA (the owner's approved design); the class name is kept for the templates and hooks that already use it. */ .ymcs-btn--messenger { background: var(--ymcs-red); color: #fff; } .ymcs-btn--messenger:hover { background: var(--ymcs-red-hover); } .ymcs-btn--outline { background: transparent; color: var(--ymcs-ink); border-color: var(--ymcs-ink); } .ymcs-btn--outline:hover { background: var(--ymcs-ink); color: #fff; } .ymcs-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); } .ymcs-btn--outline-light:hover { background: #fff; color: var(--ymcs-red); } .ymcs-btn--white { background: #fff; color: var(--ymcs-red); } .ymcs-btn--white:hover { background: var(--ymcs-red-soft); } .ymcs-btn--large { min-height: 56px; padding: 12px 30px; font-size: 17px; } .ymcs-btn--block { display: flex; width: 100%; margin: 0 0 10px; } .ymcs-btn--small { min-height: 42px; padding: 6px 16px; font-size: 14px; border-radius: 8px; } .ymcs-link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--ymcs-ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--ymcs-ink); padding-bottom: 2px; } .ymcs-link-arrow:hover { color: var(--ymcs-red); border-color: var(--ymcs-red); } /* Round icon button (header WhatsApp, card actions). */ .ymcs-icon-btn { width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; border: 1px solid var(--ymcs-line); background: #fff; color: var(--ymcs-ink); text-decoration: none; cursor: pointer; } .ymcs-icon-btn svg { width: 22px; height: 22px; } .ymcs-icon-btn--wa { color: #25D366; } .ymcs-icon-btn:hover { border-color: var(--ymcs-red); } /* ---------- Photo badges ---------- */ .ymcs-tag { position: absolute; top: 12px; left: 12px; background: var(--ymcs-red); color: #fff; font-family: var(--ymcs-font-display); font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: 0.12em; padding: 5px 10px; border-radius: 6px; } .ymcs-tag--sold { background: var(--ymcs-ink); } .ymcs-tag--reduced { top: 44px; } /* ---------- Spec chips ---------- */ .ymcs-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .ymcs-chips li { background: var(--ymcs-bg-alt); color: var(--ymcs-ink-2); border-radius: 6px; font-size: 12.5px; font-weight: 700; padding: 4px 8px; line-height: 1.5; } /* ============================================================ Chrome — top bar + header (Bright Clean v2.0.1) Desktop: 6 nav items on ONE line + WhatsApp icon + red Messenger button, never cut off. Phone: logo + WhatsApp + menu button only (nav and Messenger button move to the drawer / bottom bar). ============================================================ */ .ymcs-topbar { background: var(--ymcs-bg-alt); border-bottom: 1px solid var(--ymcs-line); font-size: 12.5px; color: var(--ymcs-ink-2); } .ymcs-topbar__inner { max-width: 1240px; margin: 0 auto; padding: 7px 32px; display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; overflow: hidden; } .ymcs-topbar__phone { margin-left: auto; display: flex; align-items: center; gap: 22px; white-space: nowrap; } .ymcs-topbar a { color: var(--ymcs-ink-2); text-decoration: none; font-weight: 700; white-space: nowrap; } .ymcs-topbar a:hover { color: var(--ymcs-red); } .ymcs-topbar__lang a { letter-spacing: 0.04em; } .ymcs-topbar .ymcs-jp { color: var(--ymcs-slate); } @media (max-width: 1100px) { /* Phone: the top bar shows hours + phone only. */ .ymcs-topbar__facts, .ymcs-topbar__lang { display: none; } .ymcs-topbar__inner { padding: 7px 20px; } .ymcs-topbar__phone { margin-left: 0; width: 100%; justify-content: space-between; } } .ymcs-header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--ymcs-line); } .ymcs-header.is-scrolled { box-shadow: 0 4px 18px rgba(26, 26, 26, 0.12); } .ymcs-header__inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; min-height: var(--ymcs-header-h); display: flex; align-items: center; gap: 24px; } .ymcs-header__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 1 auto; min-width: 0; } .ymcs-header img.ymcs-header__logo { height: 52px; width: 52px; border-radius: 50%; object-fit: cover; } .ymcs-header__wordmark { /* v2.0.7: the wordmark is the FULL legal name, "Yamaguchi Motors Godo Kaisha", on ONE line at every width (the city tagline under it is gone). Archivo ships as a variable font with a width axis (the Google Fonts URL loads wdth 62..125), so a condensed font-stretch + zero tracking keep the 28-character name clear of the WhatsApp button and burger even at 360px; see the <=460px block for the phone sizes. */ display: block; white-space: nowrap; font-family: var(--ymcs-font-display); font-stretch: 82%; font-weight: 800; font-size: 17.5px; line-height: 1.1; text-transform: uppercase; color: var(--ymcs-ink); letter-spacing: 0; } .ymcs-nav { margin-left: auto; } .ymcs-nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; } .ymcs-nav__list > li { position: relative; } .ymcs-nav__list a { display: block; padding: 10px 10px; font-size: 15px; font-weight: 700; color: var(--ymcs-ink); text-decoration: none; border-radius: 8px; white-space: nowrap; } .ymcs-nav__list a:hover { background: var(--ymcs-bg-alt); color: var(--ymcs-red); } .ymcs-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid var(--ymcs-line); border-radius: 10px; box-shadow: var(--ymcs-shadow); list-style: none; margin: 0; padding: 8px; z-index: 70; } .ymcs-nav .sub-menu a { font-size: 15px; padding: 8px 10px; } .ymcs-nav li:hover > .sub-menu, .ymcs-nav li:focus-within > .sub-menu, .ymcs-nav li.is-open > .sub-menu { display: block; } .ymcs-header__actions { display: flex; align-items: center; gap: 12px; flex: none; } .ymcs-header__messenger { white-space: nowrap; } /* The retired MU Messenger stack (mu-plugins/ym-messenger-chat.php — it cannot be removed without server file access) is suppressed wholesale. Hiding only its buttons (the earlier Customizer-CSS stopgap) left its fixed #ymmc container sitting over the theme bubble and swallowing every click, which is why the contact panel never opened in the v1.0.6/v1.0.7 checks. */ #ymmc { display: none !important; } /* Logged-in viewing: keep the sticky header below the WP admin bar instead of sliding under it (the "clipped header" the owner saw). */ body.admin-bar .ymcs-header { top: 32px; } body.admin-bar .ymcs-drawer { top: calc(var(--ymcs-header-h) + 32px); } @media (max-width: 782px) { body.admin-bar .ymcs-header { top: 46px; } body.admin-bar .ymcs-drawer { top: calc(var(--ymcs-header-h) + 46px); } } .ymcs-header__burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px; } .ymcs-header__burger span { display: block; width: 24px; height: 2.5px; background: var(--ymcs-ink); margin: 5px 0; border-radius: 2px; } @media (max-width: 1260px) { .ymcs-nav__list a { padding: 10px 7px; font-size: 14.5px; } .ymcs-header__inner { gap: 14px; } } @media (max-width: 1100px) { .ymcs-nav, .ymcs-header__messenger { display: none; } .ymcs-header__burger { display: block; } .ymcs-header__actions { margin-left: auto; } } @media (max-width: 460px) { :root { --ymcs-header-h: 64px; } .ymcs-header__inner { padding: 0 12px; gap: 8px; } .ymcs-header__brand { gap: 7px; } .ymcs-header img.ymcs-header__logo { height: 38px; width: 38px; } .ymcs-header__wordmark { font-size: 13px; font-stretch: 72%; letter-spacing: -0.01em; } .ymcs-header__actions { gap: 6px; } } /* ---------- Drawer ---------- */ .ymcs-drawer { position: fixed; inset: var(--ymcs-header-h) 0 0 0; z-index: 59; background: #fff; border-bottom: 1px solid var(--ymcs-line); box-shadow: var(--ymcs-shadow); padding: 16px 20px 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* While the menu is open the page behind it must not scroll (the "slippery" menu the owner reported). main.js toggles the class. */ html.ymcs-menu-open, html.ymcs-menu-open body { overflow: hidden; } /* The drawer must clear the sticky mobile bottom bar: it stacks above the bar and its last items get breathing room (v1.0.13 — the verification pass found the Call link hidden behind the bar). */ @media (max-width: 860px) { .ymcs-drawer { z-index: 90; padding-bottom: calc(var(--ymcs-bar-h) + env(safe-area-inset-bottom) + 28px); } } .ymcs-drawer__list { list-style: none; margin: 0 0 16px; padding: 0; } .ymcs-drawer__list a { display: block; padding: 12px 4px; font-size: 18px; font-weight: 700; color: var(--ymcs-navy); text-decoration: none; border-bottom: 1px solid var(--ymcs-line); } .ymcs-drawer__cta { width: 100%; margin-bottom: 10px; } .ymcs-drawer__call { display: block; text-align: center; font-weight: 700; padding: 8px; } /* ============================================================ Sections, bands, hero (Bright Clean) ============================================================ */ .ymcs-section { padding: 56px 0; } @media (min-width: 768px) { .ymcs-section { padding: 84px 0; } } .ymcs-section--alt { background: var(--ymcs-bg-alt); } .ymcs-section__cta { margin-top: 28px; } /* Inner-page band: light grey now, not a dark slab (Bright Clean). */ .ymcs-band { background: var(--ymcs-bg-alt); color: var(--ymcs-ink); padding: 48px 0; border-bottom: 1px solid var(--ymcs-line); } .ymcs-band p { color: var(--ymcs-ink-2); max-width: 720px; } .ymcs-band--slim { padding: 36px 0; } .ymcs-band__sub { color: var(--ymcs-ink-2); font-size: 17px; margin: 0; } .ymcs-band__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .ymcs-band--contact { text-align: left; } /* Check list + check bullets (hero, fee box, customs band). */ .ymcs-checks, .ymcs-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ymcs-checks li, .ymcs-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; font-weight: 600; } .ymcs-checks svg, .ymcs-checklist svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--ymcs-red); } .ymcs-checks { display: flex; flex-wrap: wrap; gap: 8px 24px; } /* ---------- Hero: text + real-photo collage ---------- */ .ymcs-hero { background: var(--ymcs-bg); padding: 44px 0 56px; overflow: hidden; } .ymcs-hero__grid { display: grid; gap: 34px; align-items: center; } @media (min-width: 960px) { .ymcs-hero__grid { grid-template-columns: 1.02fr 1fr; } } .ymcs-hero__title { font-family: var(--ymcs-font-display); font-stretch: 112%; font-weight: 800; letter-spacing: -0.015em; font-size: clamp(34px, 5.4vw, 56px); line-height: 1.05; margin: 16px 0 18px; color: var(--ymcs-ink); text-wrap: balance; } .ymcs-hero__title em { font-style: normal; color: var(--ymcs-red); } .ymcs-hero .ymcs-speed { margin-bottom: 22px; } .ymcs-hero__lead { font-size: 17px; color: var(--ymcs-ink-2); margin: 0 0 26px; max-width: 34em; } .ymcs-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 26px; } .ymcs-hero__services { margin: 0 0 14px; font-weight: 600; } .ymcs-hero__services a { text-decoration: underline; text-decoration-color: var(--ymcs-red); text-underline-offset: 4px; } .ymcs-hero__facts { color: var(--ymcs-slate); font-size: 14px; margin: 0; } .ymcs-hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--ymcs-card-radius); display: block; } .ymcs-hero__collage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ymcs-ph { position: relative; display: block; overflow: hidden; border-radius: var(--ymcs-card-radius); background: #fff; text-decoration: none; } .ymcs-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.04) contrast(1.04); } .ymcs-ph--big { grid-column: 1 / -1; aspect-ratio: 16 / 10; } .ymcs-ph--small { aspect-ratio: 4 / 3; } .ymcs-ph--tall { aspect-ratio: 4 / 3.4; } .ymcs-ph__tag { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); background: rgba(255, 255, 255, 0.94); color: var(--ymcs-ink); font-size: 13px; font-weight: 800; padding: 8px 12px; border-radius: 8px; line-height: 1.35; } .ymcs-ph__tag small { display: block; font-weight: 600; color: var(--ymcs-slate); font-size: 11.5px; word-break: keep-all; overflow-wrap: break-word; } .ymcs-ph__tag .ymcs-jp { white-space: nowrap; word-break: keep-all; } .ymcs-ph--small .ymcs-ph__tag { left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 7px 10px; font-size: 12.5px; } .ymcs-ph--small .ymcs-ph__tag small { font-size: 11px; } .ymcs-instock { position: absolute; top: 12px; left: 12px; background: var(--ymcs-red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; } .ymcs-price-chip { /* v2.0.7: compact bottom-left card (was a tall right-side block covering the top of the hero car on phones). Name on ONE line (ellipsis), price + total label on ONE row. */ position: absolute; left: 12px; bottom: 12px; width: max-content; max-width: min(360px, calc(100% - 24px)); background: rgba(255, 255, 255, 0.96); border-radius: 10px; padding: 9px 12px; text-align: left; box-shadow: var(--ymcs-shadow); display: flex; flex-direction: column; gap: 3px; } .ymcs-price-chip__n { display: block; max-width: 100%; font-size: 13px; font-weight: 700; color: var(--ymcs-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ymcs-price-chip__row { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; } .ymcs-price-chip__p { font-family: var(--ymcs-font-display); font-weight: 800; font-size: 22px; color: var(--ymcs-red); line-height: 1.1; } .ymcs-price-chip__l { font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; color: var(--ymcs-slate); } @media (max-width: 640px) { /* Phone: full-width slim strip along the photo's bottom edge. 7+7 padding + 14px name line + 2px gap + 20px price line = ~50px tall, i.e. <= ~25% of the 16:10 hero photo (~200px at 360px wide, ~219px at 390px). */ .ymcs-price-chip { left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none; padding: 7px 10px; gap: 2px; } .ymcs-price-chip__n { font-size: 11.5px; line-height: 1.25; } .ymcs-price-chip__p { font-size: 19px; } .ymcs-price-chip__l { font-size: 9px; letter-spacing: 0.1em; } } @media (max-width: 959px) { /* Phone: photos first. */ .ymcs-hero__collage { order: -1; } .ymcs-hero { padding-top: 26px; } } /* ---------- Quick search card ---------- */ .ymcs-search { background: #fff; border: 1px solid var(--ymcs-line); border-radius: var(--ymcs-card-radius); box-shadow: var(--ymcs-shadow); padding: 20px; margin-top: -8px; } .ymcs-search__form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; } .ymcs-field label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ymcs-slate); margin-bottom: 6px; } .ymcs-field select, .ymcs-field input { width: 100%; min-height: 50px; border: 1px solid var(--ymcs-line); border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ymcs-ink); background: #fff; } .ymcs-field select:focus, .ymcs-field input:focus { border-color: var(--ymcs-red); outline: none; } .ymcs-search__go .ymcs-btn { width: 100%; min-height: 50px; } .ymcs-search__hint { grid-column: 1 / -1; margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.5px; color: var(--ymcs-slate); } .ymcs-search__hint a { font-weight: 700; text-decoration: none; } .ymcs-search__hint a:hover { color: var(--ymcs-red); } @media (max-width: 860px) { .ymcs-search__form { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .ymcs-search__form { grid-template-columns: 1fr; } } /* ---------- Number strip ---------- */ .ymcs-stats { border-top: 1px solid var(--ymcs-line); border-bottom: 1px solid var(--ymcs-line); margin-top: 56px; } .ymcs-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .ymcs-stat { padding: 26px 18px; border-left: 1px solid var(--ymcs-line); } .ymcs-stat:first-child { border-left: 0; } .ymcs-stat__n { font-family: var(--ymcs-font-display); font-stretch: 112%; font-weight: 800; font-size: 34px; line-height: 1; margin: 0; } .ymcs-stat__n i { font-style: normal; color: var(--ymcs-red); } .ymcs-stat__t { margin: 8px 0 0; color: var(--ymcs-slate); font-size: 13.5px; font-weight: 600; } @media (max-width: 760px) { .ymcs-stats__grid { grid-template-columns: 1fr 1fr; } .ymcs-stat:nth-child(3) { border-left: 0; } .ymcs-stat { border-top: 1px solid var(--ymcs-line); } .ymcs-stat:nth-child(-n+2) { border-top: 0; } } /* ---------- Services grid ---------- */ .ymcs-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .ymcs-svc { display: block; background: var(--ymcs-bg-alt); border: 1px solid transparent; border-radius: var(--ymcs-card-radius); padding: 22px 18px; text-decoration: none; color: var(--ymcs-ink); transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s; } .ymcs-svc:hover { background: #fff; border-color: var(--ymcs-line); transform: translateY(-3px); box-shadow: var(--ymcs-shadow); } .ymcs-svc__icon { width: 46px; height: 46px; border-radius: 10px; background: #fff; border: 1px solid var(--ymcs-line); display: grid; place-items: center; color: var(--ymcs-red); margin-bottom: 14px; } .ymcs-svc__icon svg { width: 24px; height: 24px; } .ymcs-svc strong { display: block; font-size: 16.5px; font-weight: 800; } .ymcs-svc strong .ymcs-jp { display: block; font-size: 11.5px; color: var(--ymcs-slate); letter-spacing: 0.08em; margin-top: 3px; font-weight: 700; } .ymcs-svc span { display: block; color: var(--ymcs-slate); font-size: 13.5px; margin-top: 6px; } @media (max-width: 1000px) { .ymcs-svc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .ymcs-svc-grid { grid-template-columns: 1fr; } } /* ---------- Homepage grids: fixed columns + phone swipe rail ---------- The --home-cars / --home-tours column rules that used to sit here are declared again in the "Cards & grids" section, AFTER the base .ymcs-grid rule — declared here, the later unmediated base rule (same specificity) silently overrode them at every width and the homepage grids rendered one card per row (Pass 1.1 fix). The phone swipe rail still lives here. */ @media (max-width: 640px) { .ymcs-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; -webkit-overflow-scrolling: touch; } .ymcs-rail > * { flex: 0 0 84%; scroll-snap-align: start; } } /* ---------- Homepage car slider (Pass 1.1) ---------- "Cars on our yard" is a horizontal scroll-snap slider: about three cards with arrow buttons on desktop, two on tablets, and one card + peek with swipe and dots on phones. The track is natively scrollable; assets/js/main.js wires the arrows/dots. */ .ymcs-slider { position: relative; } .ymcs-slider__track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ymcs-slider__track::-webkit-scrollbar { display: none; } .ymcs-slider__track > * { flex: 0 0 84%; scroll-snap-align: start; } @media (min-width: 640px) { .ymcs-slider__track > * { flex-basis: calc((100% - 22px) / 2); } } @media (min-width: 1000px) { .ymcs-slider__track > * { flex-basis: calc((100% - 44px) / 3); } } .ymcs-slider__btn { position: absolute; top: 36%; z-index: 2; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--ymcs-line); background: #fff; color: var(--ymcs-ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--ymcs-shadow); transition: color 0.2s, border-color 0.2s, opacity 0.2s; } .ymcs-slider__btn svg { width: 20px; height: 20px; display: block; } .ymcs-slider__btn:hover { color: var(--ymcs-red); border-color: var(--ymcs-red); } .ymcs-slider__btn:disabled { opacity: 0.35; cursor: default; } .ymcs-slider__btn:disabled:hover { color: var(--ymcs-ink); border-color: var(--ymcs-line); } .ymcs-slider__btn--prev { left: 6px; } .ymcs-slider__btn--next { right: 6px; } @media (max-width: 999px) { .ymcs-slider__btn { display: none; } } .ymcs-slider__dots { display: none; } @media (max-width: 999px) { .ymcs-slider__dots { display: flex; justify-content: center; gap: 7px; margin-top: 2px; } } .ymcs-slider__dot { /* v2.0.7 phone audit: the visible dot stays 8px, but the button itself is a 24px tap target (was an 8px button). */ width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; position: relative; } .ymcs-slider__dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--ymcs-line); } .ymcs-slider__dot.is-active { background: transparent; } .ymcs-slider__dot.is-active::after { background: var(--ymcs-red); } @media (prefers-reduced-motion: reduce) { .ymcs-slider__track { scroll-behavior: auto; } } /* ---------- Auction steps + fee box ---------- */ .ymcs-auc { display: grid; gap: 30px; align-items: start; } @media (min-width: 960px) { .ymcs-auc { grid-template-columns: 1.15fr 0.85fr; } } .ymcs-asteps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 22px; position: relative; } .ymcs-asteps li { display: flex; gap: 16px; } .ymcs-astep__num { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ymcs-red); color: var(--ymcs-red); background: #fff; display: grid; place-items: center; font-family: var(--ymcs-font-display); font-weight: 800; font-size: 17px; position: relative; z-index: 1; } .ymcs-asteps li strong { display: block; font-size: 17px; } .ymcs-asteps li p { margin: 4px 0 0; color: var(--ymcs-slate); font-size: 14.5px; } @media (min-width: 961px) { .ymcs-asteps { grid-template-columns: repeat(3, 1fr); gap: 20px; } .ymcs-asteps li { flex-direction: column; gap: 12px; } .ymcs-asteps::before { content: ""; position: absolute; top: 20px; left: 40px; right: 40px; height: 2px; background: var(--ymcs-line); } } .ymcs-feebox { background: var(--ymcs-bg-alt); border: 1px solid var(--ymcs-line); border-radius: var(--ymcs-card-radius); padding: 24px; } .ymcs-feebox__big { font-family: var(--ymcs-font-display); font-weight: 800; font-size: 40px; line-height: 1; margin: 8px 0 14px; } .ymcs-feebox__big small { font-size: 14px; color: var(--ymcs-slate); font-weight: 700; margin-left: 6px; } .ymcs-feebox .ymcs-checklist { margin-bottom: 20px; } .ymcs-feebox .ymcs-btn { width: 100%; } /* ---------- Workshop price table ---------- */ .ymcs-ws { display: grid; gap: 30px; align-items: center; } @media (min-width: 960px) { .ymcs-ws { grid-template-columns: 0.95fr 1.05fr; } } .ymcs-ws .ymcs-ph { aspect-ratio: 5 / 4; } .ymcs-ptable { width: 100%; border-collapse: collapse; margin: 20px 0 12px; font-size: 15px; } .ymcs-ptable td { padding: 11px 2px; border-bottom: 1px solid var(--ymcs-line); } .ymcs-ptable td:last-child { text-align: right; font-weight: 800; font-family: var(--ymcs-font-display); white-space: nowrap; padding-left: 16px; } .ymcs-fine { color: var(--ymcs-slate); font-size: 13px; } .ymcs-ws__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 18px; } .ymcs-ws__hours { font-size: 13.5px; color: var(--ymcs-slate); font-weight: 700; } /* ---------- Customs / custom trips band ---------- */ .ymcs-trip { display: grid; gap: 30px; align-items: center; } @media (min-width: 960px) { .ymcs-trip { grid-template-columns: 1fr 1fr; } } .ymcs-trip .ymcs-ph { aspect-ratio: 4 / 3; } .ymcs-zones { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; } .ymcs-zone { background: #fff; border: 1px solid var(--ymcs-line); border-radius: 8px; padding: 9px 13px; font-size: 13.5px; font-weight: 700; } .ymcs-zone b { color: var(--ymcs-red); font-family: var(--ymcs-font-display); } /* ---------- Recently delivered ---------- */ .ymcs-delivered__item { margin: 0; } .ymcs-delivered__ph { border-radius: var(--ymcs-card-radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--ymcs-bg-alt); } .ymcs-delivered__ph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.04) contrast(1.04); } .ymcs-delivered__item figcaption { font-weight: 800; font-size: 15px; margin-top: 10px; } .ymcs-delivered__item figcaption span { display: block; color: var(--ymcs-red); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; } /* ---------- Visit us ---------- */ .ymcs-visit { display: grid; gap: 30px; align-items: center; } @media (min-width: 960px) { .ymcs-visit { grid-template-columns: 1fr 1fr; } } .ymcs-visit .ymcs-ph { aspect-ratio: 4 / 3; } .ymcs-vlist { margin: 20px 0; display: grid; } .ymcs-vrow { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--ymcs-line); font-size: 15px; } .ymcs-vrow:first-child { border-top: 1px solid var(--ymcs-line); } .ymcs-vrow .k { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ymcs-slate); padding-top: 4px; } .ymcs-vrow a { font-weight: 700; text-decoration: none; } .ymcs-vrow a:hover { color: var(--ymcs-red); } .ymcs-copy { border: 1px solid var(--ymcs-line); background: #fff; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 700; padding: 3px 9px; margin-left: 8px; cursor: pointer; color: var(--ymcs-ink-2); } .ymcs-copy:hover { border-color: var(--ymcs-red); color: var(--ymcs-red); } .ymcs-visit__note { font-weight: 700; background: #fff; border: 1px solid var(--ymcs-line); border-left: 4px solid var(--ymcs-red); border-radius: 8px; padding: 12px 16px; margin: 0 0 20px; font-size: 14.5px; } /* ---------- Red CTA band ---------- */ .ymcs-cta { background: var(--ymcs-red); color: #fff; } .ymcs-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; padding: 44px 0; } .ymcs-cta h2 { font-family: var(--ymcs-font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(24px, 3.4vw, 34px); margin: 0; line-height: 1.15; color: #fff; } .ymcs-cta h2::after { content: none; } .ymcs-cta p { margin: 8px 0 0; color: #F6C9CD; font-weight: 600; } .ymcs-cta__btns { display: flex; gap: 10px; flex-wrap: wrap; } /* ---------- Trust strip ---------- */ .ymcs-trust { padding: 22px 0 6px; } .ymcs-trust__list { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 0; padding: 16px 0; border-top: 1px solid var(--ymcs-line); border-bottom: 1px solid var(--ymcs-line); } .ymcs-trust__list li { position: relative; padding-left: 18px; font-weight: 600; font-size: 15px; } .ymcs-trust__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; background: var(--ymcs-red); } .ymcs-trust--compact { padding: 0; } .ymcs-footer .ymcs-trust__list { border-color: var(--ymcs-line); color: var(--ymcs-ink-2); } /* ---------- Tiles, facts, needs, steps ---------- */ .ymcs-tiles { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 640px) { .ymcs-tiles { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .ymcs-tiles { grid-template-columns: repeat(3, 1fr); } } .ymcs-tile { display: block; background: #fff; border: 1px solid var(--ymcs-line); border-radius: var(--ymcs-card-radius); padding: 22px; text-decoration: none; box-shadow: 0 2px 10px rgba(26,26,26,0.05); } .ymcs-tile strong { display: block; font-family: var(--ymcs-font-cond); text-transform: uppercase; font-size: 19px; color: var(--ymcs-navy); margin-bottom: 6px; } .ymcs-tile span { color: var(--ymcs-slate); font-size: 15px; } .ymcs-tile--feature { border-top: 4px solid var(--ymcs-red); } .ymcs-facts { display: grid; gap: 24px; list-style: none; margin: 0; padding: 0; grid-template-columns: 1fr; } @media (min-width: 640px) { .ymcs-facts { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .ymcs-facts { grid-template-columns: repeat(4, 1fr); } } .ymcs-facts li { background: #fff; border: 1px solid var(--ymcs-line); border-radius: var(--ymcs-card-radius); padding: 20px; } .ymcs-section--alt .ymcs-facts li { background: #fff; } .ymcs-facts strong { display: block; font-size: 17px; color: var(--ymcs-navy); margin-bottom: 4px; } .ymcs-facts span { color: var(--ymcs-slate); font-size: 15px; } .ymcs-needs { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .ymcs-needs { grid-template-columns: repeat(5, 1fr); } } .ymcs-needs a { display: block; padding: 16px; background: var(--ymcs-bg-alt); border-radius: 12px; text-decoration: none; color: var(--ymcs-navy); } .ymcs-needs strong { display: block; font-size: 16px; } .ymcs-needs span { color: var(--ymcs-slate); font-size: 14px; } .ymcs-needs--shop { margin-bottom: 30px; } .ymcs-steps { display: grid; gap: 24px; list-style: none; counter-reset: ymcs-step; margin: 0; padding: 0; grid-template-columns: 1fr; } @media (min-width: 768px) { .ymcs-steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .ymcs-steps { grid-template-columns: repeat(4, 1fr); } .ymcs-steps--six { grid-template-columns: repeat(3, 1fr); } .ymcs-steps--three { grid-template-columns: repeat(3, 1fr); } } .ymcs-steps li { counter-increment: ymcs-step; background: #fff; border: 1px solid var(--ymcs-line); border-radius: var(--ymcs-card-radius); padding: 20px; } .ymcs-steps li::before { content: counter(ymcs-step); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ymcs-red); color: #fff; font-weight: 800; margin-bottom: 10px; } .ymcs-steps strong { display: block; color: var(--ymcs-navy); margin-bottom: 4px; } .ymcs-steps span { color: var(--ymcs-slate); font-size: 15px; } .ymcs-finder { display: flex; gap: 12px; flex-wrap: wrap; } .ymcs-finder input[type="search"] { flex: 1 1 260px; min-height: 52px; padding: 10px 16px; font-size: 16px; border: 2px solid var(--ymcs-line); border-radius: 10px; background: #fff; } .ymcs-fee-line { font-size: 18px; font-weight: 700; color: var(--ymcs-navy); margin-top: 26px; } .ymcs-fee-line .ymcs-link-arrow { margin-left: 14px; font-size: 16px; } /* ============================================================ Cards & grids (Bright Clean: white body, red price, light chips, whole car in a fixed 3:2 cover frame) ============================================================ */ .ymcs-grid { display: grid; gap: 22px; grid-template-columns: 1fr; } @media (min-width: 640px) { .ymcs-grid--cars, .ymcs-grid--tours { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .ymcs-grid--cars { grid-template-columns: repeat(3, 1fr); } .ymcs-grid--tours { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .ymcs-grid--cars { grid-template-columns: repeat(4, 1fr); } } /* Homepage grid columns (Pass 1.1 cascade fix): these modifiers were originally declared in the homepage section ABOVE this base rule, whose plain `grid-template-columns: 1fr` — same specificity, later in the file — overrode them at every width, so the homepage tours grid and delivered strip rendered one card per row. Re-declared here, after the base rule, the breakpoints win again. On phones the .ymcs-rail flex rule (homepage section) still takes over: display:flex makes these columns inert there. */ @media (min-width: 640px) { .ymcs-grid--home-cars, .ymcs-grid--home-tours { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .ymcs-grid--home-cars { grid-template-columns: repeat(3, 1fr); } .ymcs-grid--home-tours { grid-template-columns: repeat(4, 1fr); } } .ymcs-car-card, .ymcs-tour-card { background: #fff; border: 1px solid var(--ymcs-line); border-radius: var(--ymcs-card-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; } .ymcs-car-card:hover, .ymcs-tour-card:hover { transform: translateY(-3px); box-shadow: var(--ymcs-shadow); } .ymcs-car-card__media, .ymcs-tour-card__media { position: relative; display: block; background: var(--ymcs-bg-alt); aspect-ratio: 3 / 2; overflow: hidden; } .ymcs-car-card__img, .ymcs-tour-card__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.04) contrast(1.04); } .ymcs-car-card__badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--ymcs-red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; } .ymcs-car-card__badge--sold { background: var(--ymcs-ink); } .ymcs-car-card__badge--reduced { background: var(--ymcs-ink); top: 44px; } .ymcs-car-card__body, .ymcs-tour-card__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .ymcs-car-card__name, .ymcs-tour-card__name { margin: 0; font-family: var(--ymcs-font-display); font-weight: 700; font-size: 16.5px; line-height: 1.3; letter-spacing: -0.005em; } .ymcs-car-card__name a, .ymcs-tour-card__name a { color: var(--ymcs-ink); text-decoration: none; } .ymcs-car-card__name a:hover, .ymcs-tour-card__name a:hover { color: var(--ymcs-red); } .ymcs-car-card__price { margin: 2px 0 0; font-family: var(--ymcs-font-display); font-weight: 800; font-size: 26px; color: var(--ymcs-red); line-height: 1.1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .ymcs-car-card__total { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; color: var(--ymcs-slate); font-family: var(--ymcs-font); } .ymcs-car-card__deliv { margin: 0; color: var(--ymcs-slate); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; } .ymcs-car-card__deliv svg { width: 16px; height: 16px; color: var(--ymcs-red); flex: none; } .ymcs-car-card__foot { margin-top: auto; display: flex; align-items: center; gap: 8px; } .ymcs-car-card__foot .ymcs-btn { flex: 1; } .ymcs-car-card__foot .ymcs-icon-btn { width: 42px; height: 42px; } .ymcs-car-card__foot .ymcs-icon-btn svg { width: 20px; height: 20px; } .ymcs-car-card.is-sold .ymcs-car-card__img { filter: grayscale(0.35); } .ymcs-tour-card__price-block { margin-top: auto; } .ymcs-tour-card__price { font-family: var(--ymcs-font-display); font-weight: 800; font-size: 24px; color: var(--ymcs-red); line-height: 1.1; } .ymcs-tour-card__strike { color: var(--ymcs-slate); font-weight: 400; font-size: 15px; margin-left: 6px; text-decoration: line-through; } .ymcs-tour-card__per { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ymcs-slate); margin-top: 3px; } .ymcs-tour-card__pickup { margin: 0; color: var(--ymcs-slate); font-size: 14px; } .ymcs-tour-card__cta { margin-top: 12px; width: 100%; } /* ---------- Car of the Week (concept §5.2) ---------- */ .ymcs-cotw { display: grid; gap: 0; background: #fff; border: 1px solid var(--ymcs-line); border-radius: var(--ymcs-radius); overflow: hidden; box-shadow: var(--ymcs-shadow); margin-bottom: 30px; } @media (min-width: 900px) { .ymcs-cotw { grid-template-columns: 1.2fr 1fr; } } .ymcs-cotw__media { position: relative; display: block; background: var(--ymcs-bg-alt); min-height: 240px; } .ymcs-cotw__img { width: 100%; height: 100%; object-fit: cover; display: block; } .ymcs-cotw__body { padding: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .ymcs-cotw__name { margin: 0; font-family: var(--ymcs-font-cond); font-weight: 800; text-transform: uppercase; font-size: 24px; color: var(--ymcs-navy); } .ymcs-cotw__jp { margin: 0; color: var(--ymcs-slate); font-size: 14px; } .ymcs-cotw__price { margin: 6px 0; font-size: 34px; font-weight: 800; color: var(--ymcs-navy); line-height: 1.1; } .ymcs-cotw__price span { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--ymcs-slate); } .ymcs-cotw .ymcs-chips { margin: 4px 0 14px; } /* ============================================================ Single car — gallery + price box (concept §6.3) ============================================================ */ .ymcs-crumb { margin: 26px 0 8px; } .ymcs-crumb a { font-weight: 700; text-decoration: none; } .ymcs-car__grid { display: grid; gap: 28px; margin-bottom: 10px; } @media (min-width: 1000px) { .ymcs-car__grid { grid-template-columns: 1.5fr 1fr; align-items: start; } } .ymcs-gallery__main { position: relative; background: var(--ymcs-bg-alt); border-radius: var(--ymcs-radius); overflow: hidden; aspect-ratio: 3 / 2; } .ymcs-gallery__img { width: 100%; height: 100%; object-fit: contain; display: block; } .ymcs-gallery__thumbs { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin: 12px 0 0; padding: 0; } .ymcs-gallery__thumbs button { border: 2px solid transparent; border-radius: 10px; padding: 0; background: none; cursor: pointer; overflow: hidden; } .ymcs-gallery__thumbs button:hover, .ymcs-gallery__thumbs button:focus-visible { border-color: var(--ymcs-red); } .ymcs-gallery__thumbs img { width: 84px; height: 62px; object-fit: cover; display: block; } .ymcs-pricebox { background: #fff; border: 1px solid var(--ymcs-line); border-radius: var(--ymcs-radius); box-shadow: var(--ymcs-shadow); padding: 24px; } @media (min-width: 1000px) { .ymcs-pricebox { position: sticky; top: calc(var(--ymcs-header-h) + 16px); } } .ymcs-pricebox__stock { margin: 0 0 6px; font-weight: 700; color: var(--ymcs-slate); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; } .ymcs-pricebox__price { margin: 0; font-size: 40px; font-weight: 800; color: var(--ymcs-navy); line-height: 1.05; } .ymcs-pricebox__price s { font-size: 20px; color: var(--ymcs-slate); font-weight: 400; margin-left: 8px; } .ymcs-pricebox__fine { margin: 4px 0 18px; color: var(--ymcs-slate); font-size: 14px; } .ymcs-pricebox__row { margin: 14px 0 0; font-size: 15px; } .ymcs-car__section { padding: 30px 0 6px; } .ymcs-specs { margin: 0; display: grid; gap: 0; } @media (min-width: 768px) { .ymcs-specs { grid-template-columns: 1fr 1fr; column-gap: 40px; } } .ymcs-specs__row { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--ymcs-line); } .ymcs-specs dt { color: var(--ymcs-slate); } .ymcs-specs dd { margin: 0; font-weight: 600; color: var(--ymcs-navy); text-align: right; } .ymcs-prose { max-width: 78ch; } .ymcs-prose img { border-radius: 12px; } /* ============================================================ Single tour — booking card (audit §5 verified contents) ============================================================ */ .ymcs-tour__hero { border-radius: var(--ymcs-radius); overflow: hidden; background: var(--ymcs-bg-alt); margin-bottom: 28px; } .ymcs-tour__img { width: 100%; display: block; } .ymcs-tour__grid { display: grid; gap: 28px; } @media (min-width: 1000px) { .ymcs-tour__grid { grid-template-columns: 1.6fr 1fr; align-items: start; } } .ymcs-tour__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; } .ymcs-tour__gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; } .ymcs-bookcard { background: #fff; border: 1px solid var(--ymcs-line); border-radius: var(--ymcs-radius); box-shadow: var(--ymcs-shadow); padding: 24px; } @media (min-width: 1000px) { .ymcs-bookcard { position: sticky; top: calc(var(--ymcs-header-h) + 16px); } } .ymcs-bookcard__label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ymcs-slate); } .ymcs-bookcard__price { margin: 4px 0 0; font-size: 36px; font-weight: 800; color: var(--ymcs-navy); line-height: 1.1; } .ymcs-bookcard__price s { font-size: 19px; color: var(--ymcs-slate); font-weight: 400; } .ymcs-bookcard__tax { margin: 2px 0 14px; color: var(--ymcs-slate); font-size: 14px; } .ymcs-bookcard__points { list-style: none; margin: 0 0 18px; padding: 0; } .ymcs-bookcard__points li { position: relative; padding: 5px 0 5px 18px; font-size: 15px; } .ymcs-bookcard__points li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 9px; height: 9px; background: var(--ymcs-red); } .ymcs-bookcard__ask { display: block; text-align: center; margin: 12px 0 6px; font-weight: 700; } .ymcs-bookcard__note { color: var(--ymcs-slate); font-size: 13.5px; text-align: center; margin: 8px 0 14px; } .ymcs-gyg-badge { display: inline-block; } .ymcs-gyg-badge img { display: block; } .ymcs-bookcard .ymcs-gyg-badge { display: block; text-align: center; } .ymt-book-card .ymcs-gyg-badge { display: block; text-align: center; margin-top: 12px; } /* ============================================================ Filter bar, forms, tables ============================================================ */ .ymcs-filterbar { display: flex; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--ymcs-line); border-radius: var(--ymcs-card-radius); padding: 16px; margin-bottom: 22px; box-shadow: 0 2px 10px rgba(26,26,26,0.05); } .ymcs-filterbar input[type="search"] { flex: 1 1 260px; min-height: 50px; padding: 10px 16px; font-size: 16px; border: 2px solid var(--ymcs-line); border-radius: 10px; } .ymcs-loadmore { text-align: center; margin-top: 30px; } .ymcs-empty { font-size: 17px; color: var(--ymcs-slate); } .ymcs-tours-note { margin-top: 26px; color: var(--ymcs-slate); } .ymcs-form { max-width: 820px; } .ymcs-form__row { margin-bottom: 18px; } .ymcs-form label { display: block; font-weight: 700; margin-bottom: 6px; color: var(--ymcs-navy); } .ymcs-form input[type="text"], .ymcs-form input[type="email"], .ymcs-form input[type="tel"], .ymcs-form textarea { width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; font-family: inherit; border: 2px solid var(--ymcs-line); border-radius: 10px; background: #fff; } .ymcs-form__sent { margin-top: 14px; font-weight: 700; color: #14632D; } .ymcs-fee-table, .ymcs-price-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; } .ymcs-fee-table th, .ymcs-price-table th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--ymcs-line); font-weight: 600; color: var(--ymcs-slate); } .ymcs-fee-table td, .ymcs-price-table td { text-align: right; padding: 10px 8px; border-bottom: 1px solid var(--ymcs-line); font-weight: 700; color: var(--ymcs-navy); } .ymcs-fee-table__hero th { font-size: 17px; color: var(--ymcs-navy); font-weight: 700; } .ymcs-fee-table__hero td { font-size: 30px; font-weight: 800; } .ymcs-ledger { background: var(--ymcs-bg-alt); border-radius: var(--ymcs-card-radius); padding: 22px; margin: 26px 0; } .ymcs-ledger h3 { margin: 0 0 12px; font-family: var(--ymcs-font-cond); text-transform: uppercase; color: var(--ymcs-navy); } .ymcs-ledger ul { list-style: none; margin: 0 0 12px; padding: 0; } .ymcs-ledger li { position: relative; padding: 4px 0 4px 18px; } .ymcs-ledger li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 9px; height: 9px; background: var(--ymcs-red); } .ymcs-twocol { display: grid; gap: 34px; } @media (min-width: 1000px) { .ymcs-twocol { grid-template-columns: 1.5fr 1fr; align-items: start; } } .ymcs-sidecard { background: #fff; border: 1px solid var(--ymcs-line); border-radius: var(--ymcs-radius); box-shadow: var(--ymcs-shadow); padding: 24px; } .ymcs-sidecard h3 { margin: 0 0 14px; font-family: var(--ymcs-font-cond); text-transform: uppercase; color: var(--ymcs-navy); } .ymcs-sidecard__alt { margin-top: 16px; color: var(--ymcs-slate); } /* ---------- FAQ ---------- */ .ymcs-faq details { background: #fff; border: 1px solid var(--ymcs-line); border-radius: 12px; margin-bottom: 12px; padding: 6px 20px; } .ymcs-faq summary { font-weight: 700; font-size: 17px; color: var(--ymcs-navy); cursor: pointer; padding: 12px 0; min-height: 48px; } .ymcs-faq details p { margin: 0 0 16px; color: var(--ymcs-slate); } /* ---------- Services ---------- */ .ymcs-service { display: grid; gap: 26px; align-items: center; } @media (min-width: 860px) { .ymcs-service { grid-template-columns: 380px 1fr; } } .ymcs-service__media img { width: 100%; border-radius: var(--ymcs-radius); display: block; } .ymcs-service__panel { aspect-ratio: 1 / 1; border-radius: var(--ymcs-radius); background: var(--ymcs-navy); } .ymcs-service__jp { color: var(--ymcs-slate); margin: -12px 0 10px; font-size: 14.5px; } /* ---------- About / delivered / posts ---------- */ .ymcs-about__photo img { width: 100%; border-radius: var(--ymcs-radius); display: block; margin-bottom: 26px; } .ymcs-languages { font-weight: 700; font-size: 17px; color: var(--ymcs-navy); } .ymcs-address-tile { background: var(--ymcs-bg-alt); border-radius: 12px; padding: 18px 20px; margin: 20px 0; } .ymcs-address-tile strong { display: block; margin-bottom: 4px; } .ymcs-delivered .wp-block-gallery, .ymcs-delivered .gallery { margin-bottom: 10px; } .ymcs-cta-card { background: var(--ymcs-bg-alt); border-radius: var(--ymcs-radius); padding: 28px; margin-top: 30px; } .ymcs-cta-card p { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; } .ymcs-postlist { display: grid; gap: 22px; } .ymcs-postitem { border-bottom: 1px solid var(--ymcs-line); padding-bottom: 18px; } .ymcs-postitem__title { margin: 0 0 6px; font-size: 21px; } .ymcs-postitem__title a { text-decoration: none; color: var(--ymcs-navy); } /* ============================================================ Contact system — one bubble, one panel, one bar (concept §4.3) ============================================================ */ .ymcs-contact { position: fixed; right: 16px; bottom: 16px; z-index: 80; } @media (min-width: 861px) { .ymcs-contact { right: 24px; bottom: 24px; } } @media (max-width: 860px) { /* The bubble floats ABOVE the mobile bar, never over content. */ .ymcs-contact { bottom: calc(var(--ymcs-bar-h) + env(safe-area-inset-bottom) + 16px); } body.ymcs-has-mobile-bar, body.ymcs-has-booking-bar { padding-bottom: calc(var(--ymcs-bar-h) + env(safe-area-inset-bottom)); } } .ymcs-bubble { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ymcs-red); color: #fff; box-shadow: 0 8px 22px rgba(193, 18, 31, 0.40); text-decoration: none; } .ymcs-panel { position: absolute; right: 0; bottom: 72px; width: min(330px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--ymcs-line); border-radius: var(--ymcs-radius); box-shadow: var(--ymcs-shadow); padding: 14px; z-index: 81; } .ymcs-panel__title { margin: 4px 6px 10px; font-family: var(--ymcs-font-cond); font-weight: 800; text-transform: uppercase; color: var(--ymcs-navy); } .ymcs-panel__row { display: block; padding: 12px; border-radius: 10px; text-decoration: none; min-height: 52px; border-bottom: 1px solid var(--ymcs-line); } .ymcs-panel__row:last-of-type { border-bottom: 0; } .ymcs-panel__row--messenger { background: rgba(193, 18, 31, 0.10); } .ymcs-panel__label { display: block; font-weight: 700; color: var(--ymcs-navy); font-size: 16px; } .ymcs-panel__note { display: block; color: var(--ymcs-slate); font-size: 13.5px; } .ymcs-panel__foot { margin: 10px 6px 2px; font-size: 14px; } .ymcs-mobile-bar { display: none; } @media (max-width: 860px) { .ymcs-mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; height: calc(var(--ymcs-bar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--ymcs-line); box-shadow: 0 -4px 16px rgba(26, 26, 26, 0.08); } .ymcs-mobile-bar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 700; font-size: 11px; color: var(--ymcs-ink); text-decoration: none; min-height: var(--ymcs-bar-h); padding: 0; background: none; border: 0; font-family: inherit; cursor: pointer; } .ymcs-mobile-bar__item svg { width: 21px; height: 21px; } .ymcs-mobile-bar__item--messenger { background: var(--ymcs-red); color: #fff; } .ymcs-mobile-bar--booking { align-items: center; gap: 10px; padding-left: 16px; padding-right: 16px; } .ymcs-mobile-bar__price { font-weight: 800; font-size: 19px; color: var(--ymcs-navy); line-height: 1.15; } .ymcs-mobile-bar__price small { display: block; font-size: 11.5px; font-weight: 600; color: var(--ymcs-slate); } .ymcs-mobile-bar__book { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 46px; background: var(--ymcs-red); color: #fff; border-radius: 10px; font-weight: 700; text-decoration: none; } } /* ---------- Contact page ---------- */ .ymcs-contact-hero { display: block; background: rgba(193, 18, 31, 0.10); border: 2px solid var(--ymcs-red); border-radius: var(--ymcs-radius); padding: 22px; text-decoration: none; margin-bottom: 22px; } .ymcs-contact-hero strong { display: block; font-size: 22px; color: var(--ymcs-navy); } .ymcs-contact-hero span { color: var(--ymcs-slate); } .ymcs-contact-rows { display: grid; gap: 12px; margin-bottom: 34px; } .ymcs-contact-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--ymcs-line); border-radius: 12px; padding: 16px 20px; text-decoration: none; min-height: 52px; } .ymcs-contact-row strong { color: var(--ymcs-navy); font-size: 17px; } .ymcs-contact-row span { color: var(--ymcs-slate); text-align: right; } /* ============================================================ Footer (Bright Clean: light grey ground, dark text, thin red top line — navy is out) ============================================================ */ .ymcs-footer { background: var(--ymcs-bg-alt); color: var(--ymcs-ink-2); border-top: 3px solid var(--ymcs-red); margin-top: 0; } .ymcs-footer a { color: var(--ymcs-ink); text-decoration: none; } .ymcs-footer a:hover { color: var(--ymcs-red); text-decoration: underline; } .ymcs-footer__inner { max-width: 1240px; margin: 0 auto; padding: 52px 20px 10px; display: grid; gap: 34px; grid-template-columns: 1fr; } @media (min-width: 1100px) { .ymcs-footer__inner { grid-template-columns: 1.5fr 0.85fr 0.85fr 0.85fr 1.35fr; padding: 56px 32px 10px; } } @media (min-width: 640px) and (max-width: 1099px) { .ymcs-footer__inner { grid-template-columns: 1fr 1fr; } } .ymcs-footer__logo { border-radius: 50%; background: #fff; } .ymcs-footer__brandname { font-family: var(--ymcs-font-display); font-stretch: 85%; font-weight: 800; font-size: 16.5px; text-transform: uppercase; color: var(--ymcs-ink); letter-spacing: 0.01em; margin: 12px 0 0; } .ymcs-footer__blurb { margin: 12px 0; max-width: 36ch; font-size: 14.5px; } .ymcs-footer__licence { margin: 10px 0 0; font-weight: 700; font-size: 14px; color: var(--ymcs-ink); } .ymcs-footer__social { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; } .ymcs-footer__social a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--ymcs-line); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 700; color: var(--ymcs-ink); } .ymcs-footer__social a:hover { border-color: var(--ymcs-red); color: var(--ymcs-red); text-decoration: none; } .ymcs-footer__col h3 { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ymcs-slate); margin: 0 0 14px; } .ymcs-footer__col ul { list-style: none; margin: 0; padding: 0; } .ymcs-footer__col li { margin-bottom: 9px; font-size: 14.5px; } .ymcs-footer__col a { color: var(--ymcs-ink-2); } .ymcs-footer__contact { font-size: 14.5px; } .ymcs-footer__phone { font-family: var(--ymcs-font-display); font-weight: 800; font-size: 22px; color: var(--ymcs-ink); } .ymcs-footer__contact p { margin: 0 0 8px; } .ymcs-footer__lines { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--ymcs-line); } .ymcs-footer__lines li { margin-bottom: 8px; font-weight: 700; } .ymcs-footer__lines a { color: var(--ymcs-red); } .ymcs-cookie-settings { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ymcs-ink-2); font: inherit; text-align: left; } .ymcs-cookie-settings:hover { text-decoration: underline; color: var(--ymcs-red); } .ymcs-footer__badges { max-width: 1240px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } @media (min-width: 900px) { .ymcs-footer__badges { padding: 18px 32px; } } .ymcs-footer__gyg-link { font-weight: 700; } .ymcs-pill { display: inline-flex; align-items: center; height: 56px; padding: 0 22px; border-radius: 10px; color: #fff; font-weight: 800; font-size: 17px; letter-spacing: 0.01em; } .ymcs-pill--booking { background: #003580; } .ymcs-pill--viator { background: #008768; } .ymcs-footer .ymcs-trust { max-width: 1240px; margin: 0 auto; padding: 0 20px; } @media (min-width: 900px) { .ymcs-footer .ymcs-trust { padding: 0 32px; } } .ymcs-footer__legal { max-width: 1240px; margin: 0 auto; padding: 18px 20px 30px; border-top: 1px solid var(--ymcs-line); display: flex; flex-wrap: wrap; gap: 8px 30px; font-size: 13.5px; align-items: center; } @media (min-width: 900px) { .ymcs-footer__legal { padding: 18px 32px 34px; } } .ymcs-footer__legal p { margin: 0; } .ymcs-footer__legal nav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-left: auto; } .ymcs-footer__legal nav ul { display: contents; list-style: none; margin: 0; padding: 0; } .ymcs-footer__legal nav a { color: var(--ymcs-ink-2); font-weight: 600; } /* ============================================================ Ported plugin-surface tokens - Group 7 (rental .ymr equivalents): rental headings and text read in navy on the light Clean Showroom surfaces. - Groups 8/9 (YM Hero .ymh): colour tokens only, so plugin hero markup keeps the brand colours and finder contrast. ============================================================ */ .ymcs-rental .ymr h1, .ymcs-rental .ymr h2, .ymcs-rental .ymr h3, .ymcs-rental .ymr-title, .ymcs-rental .ymr-heading { color: var(--ymcs-navy); } .ymcs-rental .ymr { color: var(--ymcs-ink); } .ymh { --ymh-navy: var(--ymcs-navy); --ymh-red: var(--ymcs-red); } .ymh h1, .ymh h2, .ymh .ymh-title { color: var(--ymcs-navy); } .ymh .nl-finder, .ymh .ymh-finder { background: #fff; color: var(--ymcs-ink); border-radius: var(--ymcs-card-radius); } /* ---------- WooCommerce generic surfaces ---------- */ .ymcs .woocommerce form .form-row input.input-text, .ymcs .woocommerce form .form-row textarea, .ymcs .woocommerce form .form-row select { min-height: 48px; padding: 10px 12px; border: 2px solid var(--ymcs-line); border-radius: 10px; font-size: 16px; } .ymcs .woocommerce a.button, .ymcs .woocommerce button.button, .ymcs .woocommerce input.button { background: var(--ymcs-red); color: #fff; border-radius: 10px; min-height: 48px; font-weight: 700; } .ymcs .woocommerce a.button:hover, .ymcs .woocommerce button.button:hover { background: #9A0E19; color: #fff; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- Mobile first view (owner feedback, 2026-10-26) ---------- On phones the first screen showed Messenger three times (header button, floating bubble, bottom bar) and the homepage opened with a wall of text, the yard photo pushed below the fold. Now: the header keeps logo + menu only; the ONE Messenger entry is the bottom bar (its Messenger item opens the same contact panel); the floating bubble stands down wherever the standard bottom bar exists (it stays on tour pages, whose booking bar has no Messenger item); the hero leads with its photo banner. */ @media (max-width: 860px) { .ymcs-header__actions .ymcs-btn--messenger { display: none; } body.ymcs-has-mobile-bar .ymcs-bubble { display: none; } body.ymcs-has-mobile-bar .ymcs-panel { bottom: 8px; } .ymcs-hero { padding-top: 16px; } .ymcs-hero__grid { gap: 20px; } .ymcs-hero__media { order: -1; } .ymcs-hero__media img { height: 230px; } .ymcs-hero__title { font-size: 34px; } } /* v1.0.15 — Haider's phone check: visible menu close + button-type hero options. The burger morphs into an X while the menu is open, the drawer gains its own Close button, and the hero's secondary options become real buttons/chips instead of underlined text. */ .ymcs-header__burger span { transition: transform .18s ease, opacity .18s ease; } html.ymcs-menu-open .ymcs-header__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } html.ymcs-menu-open .ymcs-header__burger span:nth-child(2) { opacity: 0; } html.ymcs-menu-open .ymcs-header__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .ymcs-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 12px; } .ymcs-drawer__title { font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ymcs-muted); } .ymcs-drawer__close { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 16px; border: 1.5px solid #D5D9DE; border-radius: 999px; background: #fff; color: var(--ymcs-navy); font: inherit; font-weight: 700; cursor: pointer; } .ymcs-hero__services { display: flex; flex-wrap: wrap; gap: 10px; } .ymcs-hero__services a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1.5px solid #D5D9DE; border-radius: 999px; background: #fff; color: var(--ymcs-navy); font-weight: 600; text-decoration: none; } .ymcs-hero__services a:hover { border-color: var(--ymcs-navy); } @media (max-width: 560px) { .ymcs-hero__actions { flex-wrap: wrap; } .ymcs-hero__actions .ymcs-btn { flex: 1 1 150px; justify-content: center; padding-left: 10px; padding-right: 10px; } } /* v1.0.16 — page-end clearance + a close button inside the contact panel. The fixed mobile bottom bar could cover the footer's last line; pages carrying the bar now reserve exactly the bar's height at the end. The contact panel gains an explicit close (it previously closed only by re-tapping its opener). */ .ymcs-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ymcs-panel__close { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #D5D9DE; background: #fff; color: var(--ymcs-navy); font-size: 15px; line-height: 1; cursor: pointer; } @media (max-width: 860px) { body.ymcs-has-mobile-bar { padding-bottom: calc(var(--ymcs-bar-h) + env(safe-area-inset-bottom)); } } /* v1.0.17 — A-Z pass 1: the rental (.ymr) layer is remapped onto the Clean Showroom system by re-pointing its own variables (its stylesheet loads after the theme's, so these selectors outrank it), its sharp 3px corners become the site radius, form fields go white, and prose tables (e.g. the rental insurance coverage table) take the site table look. Rental content and logic are untouched. */ .ymr-page.ymr-v13 { --r: #C1121F; --rh: #9A0E19; --ink: #1A1A1A; --char: #1A1A1A; --warm: #F4F5F7; --bd: #D5D9DE; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif; } .ymr-page.ymr-v13 .ymr-btn { border-radius: 12px; } .ymr-page.ymr-v13 .ymr-est, .ymr-page.ymr-v13 .ymr-tile, .ymr-page.ymr-v13 .ymr-pick > div, .ymr-page.ymr-v13 .ymr-est-out, .ymr-page.ymr-v13 .ymr-step-estimate, .ymr-page.ymr-v13 .ymr-vehicle-banner { border-radius: 12px; } .ymr-page.ymr-v13 .ymr-card { border-radius: 12px; overflow: hidden; } .ymr-page.ymr-v13 .ymr-est :is(input, select, textarea), .ymr-page.ymr-v13 .ymr-req-form :is(input, select, textarea) { background: #fff; border-radius: 10px; border-color: #D5D9DE; } .ymcs-prose table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #E4E6EA; border-radius: 12px; overflow: hidden; } .ymcs-prose table th { background: #F4F5F7; color: #1A1A1A; text-align: left; padding: 12px 14px; border-bottom: 1px solid #E4E6EA; } .ymcs-prose table td { padding: 12px 14px; border-bottom: 1px solid #E4E6EA; } .ymcs-prose table tr:last-child th, .ymcs-prose table tr:last-child td { border-bottom: 0; } /* v1.0.18 — A-Z pass 2: prose components + the policy layer. Content-authored forms inside .ymcs-prose (e.g. the document checklist tool) take the site field/button system; the policy pages' self-styled .ym-policy-page layer (red #CC0000 headings, duplicated in-content title) is brought onto the system; the two long plain-prose pages (e.g. the reservation policy) get the white card treatment. */ .ymcs-prose fieldset { border: 1px solid #E4E6EA; border-radius: 12px; background: #fff; padding: 20px; margin: 0 0 20px; } .ymcs-prose legend { float: left; width: 100%; padding: 0; margin: 0 0 12px; font-weight: 700; color: #1A1A1A; font-size: 17px; } .ymcs-prose fieldset > :last-child { margin-bottom: 0; } .ymcs-prose :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea) { border: 1.5px solid #D5D9DE; border-radius: 10px; background: #fff; padding: 10px 12px; min-height: 46px; font: inherit; color: #1A1A1A; } .ymcs-prose :is(input[type="radio"], input[type="checkbox"]) { accent-color: #C1121F; width: 18px; height: 18px; } .ymcs-prose :is(button, input[type="submit"], input[type="button"]) { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; border: 0; border-radius: 12px; background: #C1121F; color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .ymcs-prose .ym-policy-page h2 { color: #1A1A1A; border-bottom: 0; font-size: 24px; margin-top: 0; } .ymcs-prose .ym-policy-page h3 { color: #1A1A1A; font-size: 18px; margin-top: 28px; margin-bottom: 8px; } .ymcs-prose .ym-policy-page p, .ymcs-prose .ym-policy-page li { color: #41464E; } .page-id-2801 .ym-policy-page > h2:first-of-type, .page-id-2803 .ym-policy-page > h2:first-of-type, .page-id-2805 .ym-policy-page > h2:first-of-type, .page-id-2807 .ym-policy-page > h2:first-of-type { display: none; } .page-id-3995 .ymcs-prose, .page-id-3998 .ymcs-prose { background: #fff; border: 1px solid #E4E6EA; border-radius: 16px; padding: 28px; } /* v1.0.19 — A-Z pass 3: policy duplicate head + WooCommerce layer. The policy pages wrap their content in .policy-modal-* blocks whose head repeats the page title under the banner — hidden on the four policy pages. WooCommerce account/basket/checkout take the site card, table and button system. */ .page-id-2801 .ym-policy-page .policy-modal-head, .page-id-2803 .ym-policy-page .policy-modal-head, .page-id-2805 .ym-policy-page .policy-modal-head, .page-id-2807 .ym-policy-page .policy-modal-head { display: none; } .woocommerce .button, .woocommerce-page .button { border-radius: 12px; } .woocommerce :is(a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, .add_to_cart_button, .single_add_to_cart_button, .checkout-button) { background: #C1121F; color: #fff; font-weight: 700; } .woocommerce :is(a.button.alt, button.button.alt, input.button.alt):hover { background: #9A0E19; color: #fff; } .woocommerce table.shop_table { background: #fff; border: 1px solid #E4E6EA; border-radius: 12px; overflow: hidden; } .woocommerce table.shop_table th { background: #F4F5F7; color: #1A1A1A; } .woocommerce :is(.woocommerce-message, .woocommerce-info) { border-top: 0; border-left: 4px solid #1A1A1A; background: #F4F5F7; color: #1A1A1A; border-radius: 10px; } .woocommerce .woocommerce-error { border-top: 0; border-left: 4px solid #C1121F; background: #FDF1F1; border-radius: 10px; } .woocommerce-account .woocommerce-MyAccount-navigation { background: #fff; border: 1px solid #E4E6EA; border-radius: 14px; padding: 10px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .woocommerce-account .woocommerce-MyAccount-navigation-link a { display: block; padding: 11px 14px; border-radius: 10px; color: #1A1A1A; text-decoration: none; font-weight: 600; } .woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a { background: #1A1A1A; color: #fff; } .woocommerce-account .woocommerce-MyAccount-content { background: #fff; border: 1px solid #E4E6EA; border-radius: 14px; padding: 24px; } .woocommerce-account fieldset { border: 1px solid #E4E6EA; border-radius: 12px; padding: 20px; margin-top: 20px; } .woocommerce-account legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-weight: 700; color: #1A1A1A; } .woocommerce form .form-row :is(input.input-text, textarea, select) { border: 1.5px solid #D5D9DE; border-radius: 10px; min-height: 46px; padding: 10px 12px; } /* v1.0.20 — WooCommerce BLOCKS layer: the basket page renders the Cart block, whose submit button is not a classic .button — the classic rules in v1.0.19 never reached it. Style the block buttons (cart submit + checkout block buttons) onto the system, plus an explicit classic proceed-to-checkout rule. */ .wc-block-cart__submit-button, .wc-block-components-checkout-button, .wc-block-cart .wc-block-components-button { background: #C1121F; color: #fff; border-radius: 12px; font-weight: 700; border: 0; } .wc-block-cart__submit-button:hover, .wc-block-components-checkout-button:hover { background: #9A0E19; color: #fff; } .woocommerce .wc-proceed-to-checkout a.checkout-button { background: #C1121F; color: #fff; border-radius: 12px; font-weight: 700; } /* v1.0.24 — A-Z minors: rental-emergency banner (was black) onto the navy system with the phone number kept on one line; the Offers page's first card duplicates the two cards after it (combined "Free delivery · Fresh 2-year shaken" vs the separate cards) and its button pointed back at /offers/ itself — hidden page-locally. */ body.page-id-3925 .ymr-emerg-big { background: #1A1A1A; } body.page-id-3925 .ymr-emerg-big a[href^="tel:"] { white-space: nowrap; } body.page-id-4879 .ymch-grid:first-of-type article.ymch-card:nth-of-type(2) { display: none; } /* v1.0.25 — injected plugin blocks re-skin. Two blocks are pasted onto pages (homepage, /services/, tour pages) by plugins with their own INLINE dark styling: the auction-order section (.ymcn-auction, full navy) and the services band (.ymo-band, near-black with gold). Both are brought onto the light system here with higher-specificity rules (their styles are inline in the body, so plain theme rules would lose on order alone). */ body .ymcn-auction { background: #F4F5F7; color: #1A1A1A; } body .ymcn-auction .ymcn-eyebrow { color: #C1121F; } body .ymcn-auction h2 { color: #1A1A1A; } body .ymcn-auction .ymcn-lead { color: #41464E; } body .ymcn-auction .ymcn-steps li { background: #fff; border-color: #E4E6EA; border-radius: 12px; } body .ymcn-auction .ymcn-steps li b { color: #1A1A1A; } body .ymcn-auction .ymcn-steps li span { color: #41464E; } body .ymcn-auction a.ymcn-btn { border-radius: 12px; } body .ymcn-auction .ymcn-fee { color: #6B7078; } body .ymo-band { background: #F4F5F7; color: #1A1A1A; border-bottom: 3px solid #C1121F; } body .ymo-band .ymo-band-k { color: #C1121F; } body .ymo-band .ymo-svc a { background: #fff; border-color: #E4E6EA; border-radius: 12px; color: #1A1A1A; } body .ymo-band .ymo-svc a:hover { border-color: #C1121F; background: #fff; } body .ymo-band .ymo-svc span { color: #6B7078; } body .ymo-band :is(p, li) { color: #41464E; } body .ymo-band a { color: #1A1A1A; } /* v1.0.26 — rental hero onto the light system (Haider's screenshot: the page body was converted in v1.0.17 but the hero stayed a dark photo banner from rental.css — full-bleed photo + black gradient + white text). The hero becomes the light band every other inner page uses; the estimator card in its grid is already a white system card. rental.css loads AFTER the theme, so these selectors carry the .ymr-page.ymr-v13 prefix for specificity. */ .ymr-page.ymr-v13 .ymr-hero { background: #F4F5F7; color: #1A1A1A; border-bottom: 1px solid #E4E6EA; } .ymr-page.ymr-v13 .ymr-hero::before { background: none; } .ymr-page.ymr-v13 .ymr-hero .ymr-lead { color: #41464E; } .ymr-page.ymr-v13 .ymr-hero .ymr-hero-cap { color: #6B7078; } .ymr-page.ymr-v13 .ymr-hero .ymr-hero-actions a:not(.ymr-btn) { color: #1A1A1A; } /* v1.0.27 — plugin-injected legacy sections onto the Clean Showroom system (Haider's phone screenshots, 2026-10-26: the Tyres block on /services/ and the Sell-through-us block on /sell-buy/ rendered flush to the screen edges with plain links — they are staged by the offers plugin in #ymo-stage with the OLD design's classes (.section/.container/.display-m/.btn), which this theme never styled. The home staged blocks (.ymcn-auction/.ymo-band) already carry their own re-skin above; these are the last two. Scoped to the two section classes so nothing else can be affected. The sections' alt-contact row also carries the owner's PERSONAL LINE chat link — never published, per the official-links rule — so it is hidden here (the plugin owns the markup). */ body .ym-svc-alt, body .ym-sell-section { padding: 48px 0; background: var(--ymcs-bg-alt); border-top: 1px solid var(--ymcs-line); } @media (min-width: 768px) { body .ym-svc-alt, body .ym-sell-section { padding: 72px 0; } } body .ym-svc-alt .container, body .ym-sell-section .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } @media (min-width: 768px) { body .ym-svc-alt .container, body .ym-sell-section .container { padding: 0 32px; } } body .ym-svc-alt .eyebrow, body .ym-sell-section .eyebrow { color: var(--ymcs-red); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 10px; } body .ym-svc-alt .display-m, body .ym-sell-section .display-m { font-family: var(--ymcs-font-cond); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: 24px; line-height: 1.2; margin: 0 0 16px; color: var(--ymcs-navy); border-left: 8px solid var(--ymcs-red); padding-left: 14px; transform: skewX(-6deg); } @media (min-width: 768px) { body .ym-svc-alt .display-m, body .ym-sell-section .display-m { font-size: 30px; } } body .ym-svc-alt p, body .ym-sell-section p { color: #41464E; line-height: 1.7; } body .ym-svc-alt .section-head p, body .ym-sell-section .section-head p { max-width: 760px; margin: 0 0 8px; } body .ym-svc-alt .section-head .right, body .ym-sell-section .section-head .right { margin-top: 18px; } body .ym-svc-alt a.btn-primary, body .ym-sell-section a.btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; border-radius: 10px; font-weight: 700; font-size: 16px; line-height: 1.3; background: var(--ymcs-red); color: #fff; text-decoration: none; border: 2px solid transparent; } body .ym-svc-alt a.btn-primary:hover, body .ym-sell-section a.btn-primary:hover { background: #9A0E19; } body .ym-svc-alt .services-grid, body .ym-sell-section .services-grid { display: grid; gap: 20px; margin-top: 30px; } @media (min-width: 768px) { body .ym-svc-alt .services-grid, body .ym-sell-section .services-grid { grid-template-columns: repeat(3, 1fr); } } body .ym-svc-alt .service-card, body .ym-sell-section .service-card { background: #fff; border: 1px solid var(--ymcs-line); border-radius: 14px; padding: 22px 20px; box-shadow: 0 2px 10px rgba(26, 26, 26, 0.05); } body .ym-svc-alt .service-card h4, body .ym-sell-section .service-card h4 { color: var(--ymcs-navy); font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0 0 8px; } body .ym-svc-alt .service-card p, body .ym-sell-section .service-card p { font-size: 15px; margin: 0; } body .ym-svc-alt form.ymo-form, body .ym-sell-section form.ymo-form { background: #fff; border: 1px solid var(--ymcs-line); border-radius: 16px; padding: 24px 20px; margin-top: 30px; box-shadow: 0 2px 10px rgba(26, 26, 26, 0.05); scroll-margin-top: 96px; } body .ym-svc-alt .ymo-form label, body .ym-sell-section .ymo-form label { display: block; font-size: 14px; font-weight: 700; color: var(--ymcs-navy); margin: 0 0 6px; } body .ym-svc-alt .ymo-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea), body .ym-sell-section .ymo-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) { width: 100%; padding: 11px 12px; margin: 0 0 14px; border: 1px solid #D5D9DE; border-radius: 10px; font-size: 16px; color: var(--ymcs-ink); background: #fff; } body .ym-svc-alt .ymo-form :is(input[type="radio"], input[type="checkbox"]), body .ym-sell-section .ymo-form :is(input[type="radio"], input[type="checkbox"]) { accent-color: var(--ymcs-red); width: 18px; height: 18px; } body .ym-svc-alt .ymo-grid, body .ym-sell-section .ymo-grid { display: grid; gap: 0 16px; } @media (min-width: 768px) { body .ym-svc-alt .ymo-grid, body .ym-sell-section .ymo-grid { grid-template-columns: 1fr 1fr; } } body .ym-svc-alt .ymo-form button, body .ym-sell-section .ymo-form button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 26px; border-radius: 10px; font-weight: 700; font-size: 16px; cursor: pointer; background: var(--ymcs-red); color: #fff; border: 0; } body .ym-svc-alt .ymo-form button:hover, body .ym-sell-section .ymo-form button:hover { background: #9A0E19; } @media (max-width: 767px) { body .ym-svc-alt .ymo-form button, body .ym-sell-section .ymo-form button { width: 100%; } } body .ym-svc-alt .ymo-consent, body .ym-sell-section .ymo-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 400; color: var(--ymcs-slate); margin: 4px 0 16px; } body .ym-svc-alt .ymo-status, body .ym-sell-section .ymo-status { margin-top: 14px; font-size: 14px; color: var(--ymcs-slate); } body .ym-svc-alt .ymo-hp, body .ym-sell-section .ymo-hp { display: none !important; } body .ym-svc-alt small, body .ym-sell-section small { color: var(--ymcs-slate); font-size: 13px; } body .ym-svc-alt .ymo-alt, body .ym-sell-section .ymo-alt { margin-top: 18px; font-size: 15px; } body .ym-svc-alt .ymo-alt a, body .ym-sell-section .ymo-alt a { color: var(--ymcs-navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--ymcs-red); text-underline-offset: 4px; } body .ym-svc-alt .ymo-alt a[href*="line.me/ti/p/"], body .ym-sell-section .ymo-alt a[href*="line.me/ti/p/"] { display: none; } /* v1.0.28 footer polish, carried into Bright Clean (v2.0.1): link columns are quiet white panels on the light-grey footer, links are arrow rows with a hover slide, social links are pill buttons, badges sit on uniform white cards. The designed-in dedup (one badge, one GYG link, one Cookie control) is unchanged. */ .ymcs-footer__col { background: #fff; border: 1px solid var(--ymcs-line); border-radius: 10px; padding: 20px; } .ymcs-footer__col h3 { margin: 0 0 14px; } .ymcs-footer__col h3::after { content: ""; display: block; width: 28px; height: 3px; background: var(--ymcs-red); border-radius: 2px; margin-top: 8px; } .ymcs-footer__col li { margin: 0; } .ymcs-footer__col a { display: flex; align-items: center; padding: 7px 6px; border-radius: 8px; transition: background 0.15s ease, transform 0.15s ease; } .ymcs-footer__col a::before { content: "›"; color: var(--ymcs-red); font-weight: 800; margin-right: 9px; font-size: 17px; line-height: 1; } .ymcs-footer__col a:hover { color: var(--ymcs-red); text-decoration: none; background: var(--ymcs-bg-alt); transform: translateX(3px); } .ymcs-cookie-settings { display: flex; align-items: center; padding: 7px 6px; border-radius: 8px; font-size: 14px; transition: background 0.15s ease, transform 0.15s ease; } .ymcs-cookie-settings::before { content: "›"; color: var(--ymcs-red); font-weight: 800; margin-right: 9px; font-size: 17px; line-height: 1; } .ymcs-cookie-settings:hover { text-decoration: none; color: var(--ymcs-red); background: var(--ymcs-bg-alt); transform: translateX(3px); } .ymcs-footer__social { gap: 8px; } .ymcs-footer__social li { margin: 0; } .ymcs-footer .ymcs-gyg-badge { background: #fff; border: 1px solid var(--ymcs-line); border-radius: 10px; height: 56px; padding: 0 16px; display: inline-flex; align-items: center; } .ymcs-footer .ymcs-gyg-badge img { max-height: 40px; width: auto; } .ymcs-pill { border-radius: 10px; } .ymcs-footer__gyg-link::after { content: " ›"; color: var(--ymcs-red); font-weight: 800; } .ymcs-footer .ymcs-trust__list { background: #fff; border: 1px solid var(--ymcs-line); border-radius: 10px; padding: 18px 20px; display: grid; gap: 10px 24px; } @media (min-width: 768px) { .ymcs-footer .ymcs-trust__list { grid-template-columns: 1fr 1fr; } } .ymcs-footer__legal { border-top: 1px solid var(--ymcs-line); margin-top: 18px; padding-top: 18px; } .ymcs-footer__legal p:last-child { color: var(--ymcs-ink); font-weight: 600; } /* ============================================================ PASS 2 (v2.0.3) — inner page templates on Bright Clean. New components for the restyled templates (auction, workshop, export, rental, about/contact, sell-buy, FAQ) plus the single-car card finish. Semantic tokens only — no navy. ============================================================ */ /* Homepage plugin-band suppression: the Yamaguchi Offers plugin injects its navy .ymo-band at the top of
on the homepage because it cannot find the old theme's anchor there. Hide the band on the FRONT PAGE ONLY (body.home is the class WordPress emits for the front page in this theme); the re-skin rules above keep governing the band wherever else it appears, and the plugin's other outputs (services tyres section, sell-buy consignment block, inbox forms) are untouched. */ body.home .ymo-band { display: none; } /* Stacked variant of the steps list (auction / export detail columns): one card per row at every width. Higher specificity than the base .ymcs-steps media rules, so no !important. */ .ymcs-steps.ymcs-steps--stack { grid-template-columns: 1fr; } /* Auction budget-mix examples: text cards, each carrying its "Auction example" badge — examples of cars at auction, never presented as owned stock. */ .ymcs-grid.ymcs-grid--examples { grid-template-columns: 1fr; } @media (min-width: 860px) { .ymcs-grid.ymcs-grid--examples { grid-template-columns: repeat(3, 1fr); } } .ymcs-example { background: #fff; border: 1px solid var(--ymcs-line); border-radius: var(--ymcs-card-radius); padding: 22px; } .ymcs-example h3 { margin: 12px 0 6px; font-size: 18px; } .ymcs-example p { margin: 0; color: var(--ymcs-slate); font-size: 15px; } .ymcs-example__badge { display: inline-block; background: var(--ymcs-red-soft); color: var(--ymcs-red); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; } /* Export lead sentence (the owner's exact wording leads the page): display type, full-strength ink. */ .ymcs-band__sub.ymcs-lead { font-family: var(--ymcs-font-display); font-weight: 700; font-size: 20px; line-height: 1.35; color: var(--ymcs-ink); max-width: 720px; } /* Rental policy cards reuse .ymcs-facts; the quote ledger gets breathing room above its buttons. */ .ymcs-ledger--quote p:last-child { margin-bottom: 0; } .ymcs-ledger--quote .ymcs-btn { margin: 6px 8px 0 0; } /* Services fallback panel (image not yet in the Media Library): light grey, never a dark slab. */ .ymcs-service__panel { background: var(--ymcs-bg-alt); border: 1px solid var(--ymcs-line); } /* About brand mark (official logo above the yard photo). */ .ymcs-about__brand { margin: 0 0 22px; } .ymcs-about__brand img { width: 96px; height: 96px; border-radius: 50%; background: #fff; display: block; } /* Single car: gallery + summary take the new card finish (10px card radius, hairline border, the one soft shadow); the price reads in the design's red; the payment line that replaced the old pay-monthly paragraph is quiet small print under the action row. */ .ymcs-gallery__main { border: 1px solid var(--ymcs-line); border-radius: var(--ymcs-card-radius); box-shadow: var(--ymcs-shadow); } .ymcs-pricebox { border-radius: var(--ymcs-card-radius); } .ymcs-pricebox__price { color: var(--ymcs-red); font-family: var(--ymcs-font-display); } .ymcs-pricebox__pay { margin: 14px 0 0; color: var(--ymcs-slate); font-size: 14px; } /* FAQ: red question on hover (the light Pass-2 touch — the details/summary card styling above already carries the rest). */ .ymcs-faq summary:hover { color: var(--ymcs-red); } /* ============================================================ PASS 4 (v2.0.5) — Tours catalogue hero: Bright Clean, on the selectors that actually render. /tours/ is served by the tours plugin's templates/catalog.php, whose hero is
styled by THIS THEME's css/premium.css: .yj-hero (navy radial gradient in the base layer, navy linear gradient in the later layer), .yj-k, .yj-foil, .yj-lede, .yj-btn-gold / .yj-btn-line and .yj-vert. The Pass 3 block in v2.0.4 targeted the plugin frontend.css classes (.ymt-catalog-hero, .ymt-hero-content, .ymt-catalog- proof …) — that markup never renders on the catalogue page, so the block was inert; it has been removed. premium.css itself stays byte-identical (single-tour pages depend on it), so the re-skin lives here and wins on specificity: every rule is prefixed body.ymcs (the class ymcs_body_classes() adds to every page this theme renders) and scoped to .yj-hero, a class only the catalogue hub's hero carries — single tours render .ymt-detail-hero markup and the custom-japan page is a WordPress page template, so neither can match these rules. ============================================================ */ /* The band itself: light grey ground, charcoal text. The background shorthand replaces both premium.css gradients. */ body.ymcs .yj-hero { background: var(--ymcs-bg-alt); border-bottom: 1px solid var(--ymcs-line); color: var(--ymcs-ink); } /* Kicker and headline on the light ground. */ body.ymcs .yj-hero .yj-k { color: var(--ymcs-red); } body.ymcs .yj-hero h1 { color: var(--ymcs-ink); } /* The foil span: premium.css clips a gold gradient into the text in its base layer (the later layer flattens it to a pale pink). Reset the clip machinery and use the design's one red. */ body.ymcs .yj-hero .yj-foil { animation: none; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: var(--ymcs-red); color: var(--ymcs-red); font-style: normal; } /* Lead paragraph: premium's pale slate (readable only on navy) becomes the design's second ink. */ body.ymcs .yj-hero .yj-lede { color: var(--ymcs-ink-2); } /* Actions: the gold button becomes the design's red solid; the line (outline) button — white border and white text in premium.css, invisible on a light ground — becomes a white card button with a hairline border. */ body.ymcs .yj-hero .yj-btn-gold { background: var(--ymcs-red); border-color: transparent; color: #fff; } body.ymcs .yj-hero .yj-btn-gold:hover { background: var(--ymcs-red-hover); } body.ymcs .yj-hero .yj-btn-line { background: var(--ymcs-bg); border-color: var(--ymcs-line); color: var(--ymcs-ink); } body.ymcs .yj-hero .yj-btn-line:hover { border-color: var(--ymcs-slate); } /* The vertical side label inside the hero grid: white text and a white hairline in premium.css — charcoal and the line colour here. */ body.ymcs .yj-hero .yj-vert { border-right-color: var(--ymcs-line); color: var(--ymcs-ink); } body.ymcs .yj-hero .yj-vert small { color: var(--ymcs-slate); } /* ============================================================ v2.0.7 — owner fix round (2026-10-30, from his phone check of the live homepage). The wordmark / price-chip / photo-card / dot changes live with their components above; this block carries the WhatsApp sizing and the remaining audit fix. ============================================================ */ /* WhatsApp must READ as WhatsApp: the canonical glyph (inc/ helpers.php, Simple Icons path) in brand green #25D366 — which .ymcs-icon-btn--wa now supplies — at a clear size. Header: 27px glyph inside the 44px circle button. */ .ymcs-header .ymcs-icon-btn--wa svg { width: 27px; height: 27px; } /* Phone bottom bar: 24px glyph, green icon only (the label keeps the bar's ink colour, like the Cars / Tours items). */ .ymcs-mobile-bar__item--whatsapp svg { width: 24px; height: 24px; color: #25D366; } /* Phone audit: the drawer Close pill was 40px tall — bring it to the 44px tap-target floor like every other control. */ .ymcs-drawer__close { min-height: 44px; } /* ============================================================ v2.0.9 — owner site-audit fix round (2026-10-30): sideways phone scroll, baked caption bands on the designed service images, the single-car gallery letterbox, the tours photo band, the tour-photo badge crop, and the custom-japan hero vs the fixed phone bar. (The card-chip fix F3 is PHP — inc/cards.php ymcs_car_fuel().) ============================================================ */ /* ---------- F1 · No sideways scroll on phones ---------- The safety net first: overflow-x: clip on the root boxes ends horizontal page scroll (and the unreachable left-edge clipping that comes with it) whatever element bleeds, and clip — unlike hidden — leaves position: sticky working, so the sticky header is unaffected. Browsers without clip support ignore the declaration and keep the old behaviour. The targeted fixes below remove the concrete min-content hazards found in the audit, so the net should never be the only thing holding a page together. */ html, body { overflow-x: clip; } /* Footer legal lines and the contact column carry the site's longest unbroken strings (the email address, the invoice issuer number). As flex items / panel text their min-content width could exceed a narrow phone's content box; let them shrink and break instead of pushing the page sideways. */ .ymcs-footer__legal p { min-width: 0; overflow-wrap: break-word; } .ymcs-footer__contact p { overflow-wrap: break-word; } .ymcs-footer__contact a[href^="mailto:"] { overflow-wrap: anywhere; } /* Tables (workshop price table, fee / price tables, prose tables): a cell holding one long unbroken string could force the whole table past its wrap. Cells may now break long words, and the tables themselves are capped at the wrap. */ .ymcs-ptable, .ymcs-fee-table, .ymcs-price-table, .ymcs-prose table { max-width: 100%; } .ymcs-ptable td, .ymcs-fee-table :is(td, th), .ymcs-price-table :is(td, th), .ymcs-prose :is(td, th) { overflow-wrap: break-word; } /* Single-car Key facts: the value cell is a flex item whose automatic minimum size is its content — a long value could widen the row past the wrap. It may shrink and break now. */ .ymcs-specs__row dt { min-width: 0; } .ymcs-specs__row dd { min-width: 0; overflow-wrap: anywhere; } /* Embedded media (map / video embeds inside page prose carry fixed pixel widths) joins the global img rule. */ body.ymcs iframe, body.ymcs embed, body.ymcs object, body.ymcs video { max-width: 100%; } /* Header wordmark insurance: at the narrowest widths the full legal name steps down one more size, so it keeps its one line even where the Archivo width axis does not apply (fallback fonts render wider than the condensed cut). */ @media (max-width: 380px) { .ymcs-header__wordmark { font-size: 12px; } } /* Tours-plugin bleeds that stop within a few px of the phone viewport edge (frontend.css): the idea-filter strip is a nowrap auto-scroller pulled 18px past its shell on both sides (the shell keeps only 20px), and compare-table photos are sized 100% + 34px with -17px side margins. One runtime nudge would push either past the edge; zero both at phone widths so the whole risk class is gone. */ @media (max-width: 767px) { body.ymcs .ymt-idea-filters { margin-inline: 0; } body.ymcs .ymt-compare-table img { width: 100%; margin-inline: 0; } } /* ---------- F2 · Baked navy caption bands, cropped out ---- The designed 1:1 service images carry a navy caption band baked along their bottom edge — measured on the live files (workshop-repairs-1x1, private-tours-1x1): the band occupies the bottom 17.2% of the image (rows 848–1024 of 1024), its caps label around rows 906–968. With the default centred object-position, a frame's cover crop splits evenly between top and bottom, so a 4:3 frame hid only 12.5% at the bottom and the band showed, cut mid-label. Anchoring these frames to the TOP takes the entire crop off the bottom instead: 4:3 frames crop 25% · the 5:4 workshop frame crops 20% — both clear the 17.2% band with margin, the photo's own top edge is never touched, and the frames using real photos (hero car, Visit-us yard photo) keep their centred crop. */ .ymcs-ws .ymcs-ph img, .ymcs-trip .ymcs-ph img, .ymcs-ph--small img { object-position: 50% 0; } /* The /services/ cards had no frame at all — the image printed at its natural 1:1, band and label fully visible. They get the same 4:3 frame (25% bottom crop, band gone) with the image anchored to the top; the fallback panel fills it. */ .ymcs-service__media { position: relative; overflow: hidden; border-radius: var(--ymcs-radius); aspect-ratio: 4 / 3; background: var(--ymcs-bg-alt); } .ymcs-service__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; } .ymcs-service__media .ymcs-service__panel { aspect-ratio: auto; height: 100%; } /* ---------- F4 · Single-car gallery letterbox stays light -- The frame's own background is the letterbox every non-3:2 photo shows at its sides; it is the design's light grey and is now restated at override strength so no stylesheet that loads on product pages (WooCommerce, PhotoSwipe skins) can repaint it dark, and the photo itself never paints a ground. (The navy INSIDE the ym-board-*.jpg images is picture content, not a background — see CHANGELOG-v2.0.9.) */ body.ymcs .ymcs-gallery__main { background: var(--ymcs-bg-alt); } body.ymcs .ymcs-gallery__img { background: transparent; } /* ---------- F5 · Tours photo band (.ym-svc-banner) --------- The services plugin injects this band under the hero on /tours/ and /tours/custom-japan/ with an inline