/* ========================================================================== Occasion Manager - frontend styles -------------------------------------------------------------------------- Every rule is scoped to the plugin root .oca, so the plugin can never restyle the theme and the theme can never be blamed for the plugin. Root elements carry the class themselves (.oca.oca-archive), descendants are written as ".oca .oca-thing", and where a theme is likely to fight - links, buttons, form controls - specificity is raised honestly to ".oca.oca .thing" instead of reaching for !important, which is used nowhere in this file. Three selectors deliberately live outside .oca, each one prefixed: .oca-main the
landmark the plugin opens on classic themes; it wraps .oca, so it cannot be inside it .oca-block the block wrapper, which also wraps .oca .oca-lightbox a JS-created appended to (it carries the .oca class too, so the inline custom properties still reach it) plus the scroll lock Colours come from the inline block Renderer::css_variables() prints (.oca{--oca-primary:...}), which is why every colour is read through var() with a literal fallback instead of being declared a second time here. Breakpoints: base < 768px, tablet >= 768px, desktop >= 1025px. Contents 1. Tokens and scoped reset 2. Utilities 3. Buttons 4. Badges 5. Page shell, sections, breadcrumbs 6. Filters and the mobile toggle 7. Toolbar, sorting, view toggle, chips 8. Results: grid and card 9. Results: list and row 10. Pagination and empty state 11. Detail page: header and summary 12. Detail page: gallery 13. Lightbox 14. Detail page: description, specifications, equipment 15. Detail page: contact and test drive 16. Reduced motion 17. Print ========================================================================== */ /* ========================================================================== 1. Tokens and scoped reset ========================================================================== */ .oca { /* Layout tokens: not admin-configurable, so they are declared here. */ --oca-gap: 1rem; --oca-pad: 1rem; --oca-surface: #ffffff; --oca-muted: #f5f5f6; --oca-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .05); /* * Status colours are fixed rather than derived from the accent: they are * the only places where white text sits on a coloured surface, so their * contrast cannot be left to a colour picker. The configurable accent is * used for text on light backgrounds only. */ --oca-sold-bg: #a4161a; --oca-reserved-bg: #8a5300; --oca-featured-bg: #1b1b1b; --oca-whatsapp-bg: #075e54; line-height: 1.5; } .oca *, .oca *::before, .oca *::after { box-sizing: border-box; } /* Only the plugin's own lists lose their bullets and indentation. */ .oca .oca-grid, .oca .oca-list, .oca .oca-card__specs, .oca .oca-row__specs, .oca .oca-summary__facts, .oca .oca-chips__list, .oca .oca-pagination__list, .oca .oca-breadcrumbs__list, .oca .oca-equipment__list, .oca .oca-contact__hours-list, .oca .oca-testdrive__error-list { list-style: none; margin: 0; padding: 0; } .oca .oca-specs, .oca .oca-summary__rows { margin: 0; } /* ========================================================================== 2. Utilities ========================================================================== */ /* * clip-path rather than display:none: the text has to stay in the * accessibility tree for the live region and the "verwijderen" hints. */ .oca .oca-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; } /* A visible ring everywhere; no outline is ever removed without a * replacement. */ .oca :focus-visible { outline: 2px solid var(--oca-primary, #111111); outline-offset: 2px; } /* * Inside a container that clips its overflow, an outward focus ring is cropped * away and a keyboard visitor sees no focus at all. These controls sit in such * containers (the segmented view toggle, the gallery slide and thumb strip), so * their ring is drawn inward instead. */ .oca .oca-view-toggle__button:focus-visible, .oca .oca-gallery__zoom:focus-visible, .oca .oca-gallery__thumb:focus-visible, .oca .oca-card__link:focus-visible { outline-offset: -3px; } /* * Everything below holds dealer-entered text. A long unbroken token — a trim * level like "Sportback-40-TFSI-S-line-Black-Edition" or a pasted URL — would * otherwise force the grid column wider than the viewport and give the whole * page a horizontal scrollbar on a 320px phone. */ .oca .oca-card__title, .oca .oca-card__subtitle, .oca .oca-card__stock, .oca .oca-row__title, .oca .oca-row__subtitle, .oca .oca-single__title, .oca .oca-single__subtitle, .oca .oca-chip__value, .oca .oca-specs__value, .oca .oca-equipment__item { overflow-wrap: anywhere; } .oca .oca-image-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--oca-muted, #f5f5f6); color: var(--oca-secondary, #666666); } .oca .oca-image-placeholder svg { width: 45%; max-width: 88px; height: auto; } /* The one state class the script adds to the results region. */ .oca .oca-results--busy { opacity: .55; cursor: progress; transition: opacity .15s linear; } /* ========================================================================== 3. Buttons and links ========================================================================== */ .oca .oca-btn { transition: background-color .15s linear, color .15s linear, border-color .15s linear; } .oca.oca .oca-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .625rem 1.125rem; border: 1px solid var(--oca-primary, #111111); border-radius: var(--oca-radius, 8px); background: var(--oca-surface, #ffffff); color: var(--oca-primary, #111111); font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; } .oca.oca .oca-btn:hover { background: var(--oca-muted, #f5f5f6); } .oca.oca .oca-btn:active { transform: translateY(1px); } .oca.oca .oca-btn--primary { background: var(--oca-primary, #111111); color: #ffffff; } .oca.oca .oca-btn--primary:hover { border-color: var(--oca-secondary, #666666); background: var(--oca-secondary, #666666); } .oca.oca .oca-btn--whatsapp { /* * The dark WhatsApp green, not the bright one: white text on #25d366 * fails contrast, on #075e54 it passes comfortably. */ border-color: var(--oca-whatsapp-bg, #075e54); background: var(--oca-whatsapp-bg, #075e54); color: #ffffff; } .oca.oca .oca-btn--whatsapp:hover { border-color: #05463f; background: #05463f; } .oca.oca .oca-btn:disabled, .oca.oca .oca-btn[aria-disabled="true"] { opacity: .5; transform: none; cursor: not-allowed; } /* ========================================================================== 4. Badges ========================================================================== */ .oca .oca-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .55rem; border-radius: calc(var(--oca-radius, 8px) / 2); background: var(--oca-featured-bg, #1b1b1b); color: #ffffff; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; line-height: 1.1; text-transform: uppercase; } .oca .oca-badge--sold { background: var(--oca-sold-bg, #a4161a); } .oca .oca-badge--reserved { background: var(--oca-reserved-bg, #8a5300); } .oca .oca-badge__icon { font-size: .9em; } /* On a photo the badge becomes an overlay: status top left, featured top * right, so the two never collide. */ .oca .oca-card__media .oca-badge, .oca .oca-row__media .oca-badge { position: absolute; top: .5rem; left: .5rem; z-index: 2; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); } .oca .oca-card__media .oca-badge--featured, .oca .oca-row__media .oca-badge--featured { right: .5rem; left: auto; } /* ========================================================================== 5. Page shell, sections, breadcrumbs ========================================================================== */ /* Classic themes only: a block theme template brings its own container. */ .oca-main { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1rem 3rem; } /* The block wrapper sits outside the plugin root as well. */ .oca-block { margin-block: 1.5rem; } .oca.oca-archive, .oca.oca-single, .oca.oca-section, .oca.oca-featured { max-width: 100%; } .oca .oca-archive__header { margin-bottom: 1.25rem; } .oca .oca-archive__title { margin: 0 0 .25rem; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.2; } .oca .oca-section__title { margin: 0 0 1rem; font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.2; } .oca .oca-breadcrumbs { margin-bottom: .75rem; font-size: .875rem; } .oca .oca-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .35rem; } .oca .oca-breadcrumbs__item { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; } .oca.oca .oca-breadcrumbs__link { color: var(--oca-secondary, #666666); text-decoration: underline; } .oca.oca .oca-breadcrumbs__link:hover { color: var(--oca-primary, #111111); } .oca .oca-breadcrumbs__current { max-width: 22ch; overflow: hidden; color: var(--oca-secondary, #666666); text-overflow: ellipsis; white-space: nowrap; } .oca .oca-breadcrumbs__separator { color: var(--oca-border, #e5e5e5); } /* ========================================================================== 6. Filters and the mobile toggle ========================================================================== */ /* * The toggle stays hidden until the script claims it with * .oca-filters-toggle--ready, and even then only below the tablet breakpoint: * without JavaScript, or on a screen where the panel is never collapsed, it * would be a button that does nothing. */ .oca .oca-filters-toggle { display: none; } .oca.oca .oca-filters-toggle--ready { align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 44px; margin-bottom: .75rem; padding: .625rem 1rem; border: 1px solid var(--oca-border, #e5e5e5); border-radius: var(--oca-radius, 8px); background: var(--oca-surface, #ffffff); color: var(--oca-primary, #111111); font: inherit; font-weight: 600; cursor: pointer; } .oca.oca .oca-filters-toggle--ready::after { content: "\25BE"; font-size: .8em; } .oca.oca .oca-filters-toggle--ready[aria-expanded="true"]::after { content: "\25B4"; } .oca .oca-filters { display: grid; gap: var(--oca-gap, 1rem); margin-bottom: 1.25rem; padding: var(--oca-pad, 1rem); border: 1px solid var(--oca-border, #e5e5e5); border-radius: var(--oca-radius, 8px); background: var(--oca-surface, #ffffff); color: var(--oca-primary, #111111); } /* * The collapse contract. Two conditions must both hold before anything is * hidden: the panel is marked collapsible - only JavaScript ever does that - * and it is currently collapsed. A visitor without JavaScript therefore always * sees the full panel, and from tablet up it is never hidden at all. */ @media (max-width: 767px) { .oca.oca .oca-filters-toggle--ready { display: inline-flex; } .oca .oca-filters--collapsible[data-oca-collapsed="true"] { display: none; } } .oca .oca-filters__group { display: grid; gap: .625rem; margin: 0; padding: 0; border: 0; } .oca .oca-filters__legend { margin: 0 0 .25rem; padding: 0; color: var(--oca-secondary, #666666); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; /* * Firefox renders a legend outside the grid, Chromium treats it as the * first grid item; spanning every column makes both look the same. */ grid-column: 1 / -1; } .oca .oca-filters__field { display: grid; gap: .25rem; min-width: 0; margin: 0; } .oca .oca-filters__label { font-size: .875rem; font-weight: 600; } .oca.oca .oca-filters__input, .oca.oca .oca-filters__select, .oca.oca .oca-filters__number { width: 100%; max-width: 100%; min-height: 44px; padding: .5rem .625rem; border: 1px solid var(--oca-border, #e5e5e5); border-radius: var(--oca-radius, 8px); background: var(--oca-surface, #ffffff); color: var(--oca-primary, #111111); font: inherit; line-height: 1.3; } /* The model list is disabled while it is being reloaded for a new brand. */ .oca.oca .oca-filters__select[disabled] { background: var(--oca-muted, #f5f5f6); color: var(--oca-secondary, #666666); cursor: progress; } .oca .oca-filters__actions { display: flex; flex-wrap: wrap; gap: .5rem; grid-column: 1 / -1; } .oca.oca .oca-filters__submit, .oca.oca .oca-filters__reset { flex: 1 1 auto; } /* Two number fields sit side by side as soon as there is room for them. */ @media (min-width: 480px) { .oca .oca-filters__group--price, .oca .oca-filters__group--year, .oca .oca-filters__group--mileage { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .oca .oca-filters { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: start; } .oca .oca-filters__group--search { grid-column: 1 / -1; } .oca.oca .oca-filters__submit, .oca.oca .oca-filters__reset { flex: 0 0 auto; } } @media (min-width: 1025px) { .oca .oca-filters { gap: 1.25rem; padding: 1.25rem; } } /* -------------------------------------------------------------------------- 6a. Back link on the detail page -------------------------------------------------------------------------- */ .oca .oca-single__back { margin: 0 0 .5rem; } .oca.oca .oca-back { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .75rem .4rem .5rem; border: 1px solid var(--oca-border, #e5e5e5); border-radius: var(--oca-radius, 8px); background: var(--oca-surface, #ffffff); color: var(--oca-primary, #111111); font-size: .9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; } .oca.oca .oca-back:hover, .oca.oca .oca-back:focus-visible { border-color: var(--oca-primary, #111111); text-decoration: none; } .oca .oca-back__arrow { font-size: 1.1em; line-height: 1; } /* -------------------------------------------------------------------------- 6b. Archive layout: filter sidebar on the left -------------------------------------------------------------------------- Below the desktop breakpoint the sidebar is simply the first row, which is also the width where the collapse toggle takes over, so the same markup serves every screen without a second template. The two-column layout is limited to the --sidebar modifier, which only the occasion archive itself carries. A media query measures the viewport, not the element, so an overview embedded through a shortcode or block in a narrow content column would otherwise still surrender 300px to the sidebar and squeeze its cards down to a thumbnail. -------------------------------------------------------------------------- */ .oca .oca-archive__layout { display: grid; gap: var(--oca-gap, 1.5rem); } .oca .oca-archive__sidebar, .oca .oca-archive__main { min-width: 0; } @media (min-width: 1025px) { .oca .oca-archive__layout--sidebar { grid-template-columns: var(--oca-sidebar-width, 300px) minmax(0, 1fr); align-items: start; } /* * Inside the sidebar the filters stack one per row. The panel-wide * auto-fit grid is a full-width layout and would otherwise squeeze two * columns into 300px. */ .oca .oca-archive__layout--sidebar .oca-filters { grid-template-columns: 1fr; margin-bottom: 0; } /* A min/max pair stays on one row: it reads as a single filter. */ .oca .oca-archive__layout--sidebar .oca-filters__group--price, .oca .oca-archive__layout--sidebar .oca-filters__group--year, .oca .oca-archive__layout--sidebar .oca-filters__group--mileage { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* The search field spans the whole panel; in one column that is the row. */ .oca .oca-archive__layout--sidebar .oca-filters__group--search { grid-column: auto; } .oca .oca-archive__layout--sidebar .oca-filters__actions { flex-direction: column; } .oca.oca .oca-archive__layout--sidebar .oca-filters__submit, .oca.oca .oca-archive__layout--sidebar .oca-filters__reset { flex: 1 1 auto; justify-content: center; text-align: center; } } /* Wider screens can afford a roomier sidebar. */ @media (min-width: 1400px) { .oca .oca-archive__layout--sidebar { --oca-sidebar-width: 320px; } } /* ========================================================================== 7. Toolbar, sorting, view toggle, chips ========================================================================== */ .oca .oca-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .75rem; } .oca .oca-results-count { flex: 1 1 100%; margin: 0; font-weight: 600; } .oca .oca-sorting { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; margin: 0; } .oca .oca-sorting__label { font-size: .875rem; font-weight: 600; white-space: nowrap; } .oca.oca .oca-sorting__select { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: .5rem .625rem; border: 1px solid var(--oca-border, #e5e5e5); border-radius: var(--oca-radius, 8px); background: var(--oca-surface, #ffffff); color: var(--oca-primary, #111111); font: inherit; } .oca .oca-view-toggle { display: inline-flex; overflow: hidden; border: 1px solid var(--oca-border, #e5e5e5); border-radius: var(--oca-radius, 8px); } .oca.oca .oca-view-toggle__button { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; padding: .5rem .875rem; background: var(--oca-surface, #ffffff); color: var(--oca-primary, #111111); font-size: .875rem; font-weight: 600; text-decoration: none; cursor: pointer; } .oca.oca .oca-view-toggle__button + .oca-view-toggle__button { border-left: 1px solid var(--oca-border, #e5e5e5); } .oca.oca .oca-view-toggle__button:hover { background: var(--oca-muted, #f5f5f6); } .oca.oca .oca-view-toggle__button.is-active { background: var(--oca-primary, #111111); color: #ffffff; } /* * No padding, margin or background on the chips container: it is always in the * DOM and empty whenever nothing is filtered, so only its children carry * spacing and an empty panel collapses to zero height instead of leaving a * mysterious gap above the results. */ .oca .oca-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .oca .oca-chips__intro { margin: 0 0 .75rem; font-size: .875rem; font-weight: 600; } .oca .oca-chips__list { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; } .oca.oca .oca-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .25rem .625rem; border: 1px solid var(--oca-border, #e5e5e5); border-radius: 999px; background: var(--oca-muted, #f5f5f6); color: var(--oca-primary, #111111); font-size: .875rem; text-decoration: none; } .oca.oca .oca-chip:hover { border-color: var(--oca-primary, #111111); } .oca .oca-chip__label { color: var(--oca-secondary, #666666); } .oca .oca-chip__value { font-weight: 600; } .oca .oca-chip__remove { color: var(--oca-secondary, #666666); font-size: 1.1em; line-height: 1; } /* ========================================================================== 8. Results: grid and card ========================================================================== */ .oca .oca-grid { display: grid; gap: var(--oca-gap, 1rem); grid-template-columns: minmax(0, 1fr); } /* The column count is a variable so one media query serves every modifier. */ .oca .oca-grid--cols-2 { --oca-columns: 2; } .oca .oca-grid--cols-3 { --oca-columns: 3; } .oca .oca-grid--cols-4 { --oca-columns: 4; } @media (min-width: 768px) { .oca .oca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1025px) { .oca .oca-grid { gap: 1.5rem; grid-template-columns: repeat(var(--oca-columns, 3), minmax(0, 1fr)); } } /* * The filter sidebar takes 300px out of the row, so on a screen just wide * enough for the two-column layout the configured column count would squeeze * the cards. One column fewer keeps the photo and the price legible; the * administrator's setting applies again as soon as there is room for it. */ @media (min-width: 1025px) and (max-width: 1279px) { .oca .oca-archive__layout--sidebar .oca-grid--cols-3, .oca .oca-archive__layout--sidebar .oca-grid--cols-4 { --oca-columns: 2; } } @media (min-width: 1280px) and (max-width: 1499px) { .oca .oca-archive__layout--sidebar .oca-grid--cols-4 { --oca-columns: 3; } } .oca .oca-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--oca-border, #e5e5e5); border-radius: var(--oca-radius, 8px); background: var(--oca-surface, #ffffff); color: var(--oca-primary, #111111); transition: box-shadow .15s linear; } .oca .oca-card:hover { box-shadow: var(--oca-shadow); } /* * aspect-ratio plus object-fit: the box is reserved before the photo loads, so * a slow image never pushes the page around, and a portrait photo is cropped * instead of stretched. */ .oca .oca-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: var(--oca-card-ratio, 4 / 3); background: var(--oca-muted, #f5f5f6); } .oca .oca-card__image { display: block; width: 100%; height: 100%; object-fit: cover; } .oca .oca-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .5rem; padding: .875rem 1rem; } .oca .oca-card__title { margin: 0; font-size: 1.0625rem; line-height: 1.3; } .oca.oca .oca-card__link { color: var(--oca-primary, #111111); text-decoration: none; } .oca.oca .oca-card__link:hover { text-decoration: underline; } /* * The whole card is clickable through the title anchor, which stays the only * real link in the card - good for the keyboard and for a screen reader's * link list. The badges and the call to action keep a higher z-index so they * are not swallowed by the overlay. */ .oca .oca-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .oca .oca-card__subtitle { margin: 0; color: var(--oca-secondary, #666666); font-size: .9375rem; } .oca .oca-card__specs, .oca .oca-row__specs { display: flex; flex-wrap: wrap; gap: .25rem .5rem; color: var(--oca-secondary, #666666); font-size: .875rem; } .oca .oca-card__spec, .oca .oca-row__spec { display: inline-flex; align-items: center; gap: .5rem; } .oca .oca-card__spec-separator { color: var(--oca-border, #e5e5e5); } .oca .oca-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: auto 0 0; padding-top: .25rem; } .oca .oca-card__price-current { font-size: 1.25rem; font-weight: 700; } .oca .oca-card__price-original, .oca .oca-row__price-original { color: var(--oca-secondary, #666666); font-size: .9375rem; } .oca .oca-card__stock, .oca .oca-row__stock { margin: 0; color: var(--oca-secondary, #666666); font-size: .8125rem; } .oca .oca-card__footer { padding: 0 1rem 1rem; } .oca.oca .oca-card__cta { position: relative; z-index: 2; width: 100%; } /* ========================================================================== 9. Results: list and row ========================================================================== */ .oca .oca-list { display: grid; gap: var(--oca-gap, 1rem); } .oca .oca-row { position: relative; display: grid; gap: 0; min-width: 0; overflow: hidden; border: 1px solid var(--oca-border, #e5e5e5); border-radius: var(--oca-radius, 8px); background: var(--oca-surface, #ffffff); color: var(--oca-primary, #111111); grid-template-columns: minmax(0, 1fr); } .oca .oca-row__media { position: relative; overflow: hidden; aspect-ratio: var(--oca-card-ratio, 4 / 3); background: var(--oca-muted, #f5f5f6); } .oca .oca-row__image { display: block; width: 100%; height: 100%; object-fit: cover; } .oca .oca-row__content { display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding: .875rem 1rem; } .oca .oca-row__title { margin: 0; font-size: 1.125rem; line-height: 1.3; } .oca.oca .oca-row__link { color: var(--oca-primary, #111111); text-decoration: none; } .oca.oca .oca-row__link:hover { text-decoration: underline; } .oca .oca-row__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .oca .oca-row__subtitle { margin: 0; color: var(--oca-secondary, #666666); font-size: .9375rem; } .oca .oca-row__description { margin: 0; font-size: .9375rem; } .oca .oca-row__aside { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: 0 1rem 1rem; } .oca .oca-row__price { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0; } .oca .oca-row__price-current { font-size: 1.25rem; font-weight: 700; } .oca.oca .oca-row__cta { position: relative; z-index: 2; flex: 1 1 auto; } /* Two columns from tablet up: photo left, everything else right. */ @media (min-width: 768px) { .oca .oca-row { align-items: start; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); grid-template-areas: "media content" "media aside"; } .oca .oca-row__media { grid-area: media; height: 100%; min-height: 180px; aspect-ratio: auto; } .oca .oca-row__content { grid-area: content; padding: 1rem 1.25rem .5rem; } .oca .oca-row__aside { grid-area: aside; padding: 0 1.25rem 1rem; } .oca.oca .oca-row__cta { flex: 0 0 auto; } } @media (min-width: 1025px) { .oca .oca-row { grid-template-columns: minmax(0, 28%) minmax(0, 1fr) minmax(0, 210px); grid-template-areas: "media content aside"; } .oca .oca-row__content { padding: 1.25rem; } .oca .oca-row__aside { flex-direction: column; align-items: flex-end; justify-content: center; gap: .5rem; padding: 1.25rem 1.25rem 1.25rem 0; text-align: right; } .oca .oca-row__price { flex: 0 0 auto; justify-content: flex-end; } .oca.oca .oca-row__cta { width: 100%; } } /* ========================================================================== 10. Pagination and empty state ========================================================================== */ .oca .oca-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .375rem; margin-top: 1.5rem; } .oca.oca .oca-pagination__link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--oca-border, #e5e5e5); border-radius: var(--oca-radius, 8px); background: var(--oca-surface, #ffffff); color: var(--oca-primary, #111111); font-weight: 600; text-decoration: none; } .oca.oca .oca-pagination__link:hover { background: var(--oca-muted, #f5f5f6); } .oca.oca .oca-pagination__link.is-current { border-color: var(--oca-primary, #111111); background: var(--oca-primary, #111111); color: #ffffff; cursor: default; } .oca .oca-pagination__list { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; } .oca .oca-pagination__gap { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 44px; color: var(--oca-secondary, #666666); } /* At 320px the numbers matter more than the words, so they go first. */ @media (max-width: 419px) { .oca .oca-pagination__list { order: -1; flex: 1 1 100%; justify-content: center; } } .oca .oca-no-results { padding: 2rem 1rem; border: 1px dashed var(--oca-border, #e5e5e5); border-radius: var(--oca-radius, 8px); background: var(--oca-muted, #f5f5f6); color: var(--oca-primary, #111111); text-align: center; } .oca .oca-no-results__title { margin: 0 0 .5rem; font-size: 1.25rem; } .oca .oca-no-results__text { max-width: 46ch; margin: 0 auto; } .oca .oca-no-results__actions { margin: 1.25rem 0 0; } /* ========================================================================== 11. Detail page: header and summary ========================================================================== */ .oca.oca-single { display: flex; flex-direction: column; gap: 1.5rem; } .oca .oca-single__header { display: grid; gap: .25rem; } .oca .oca-single__title { margin: 0; font-size: clamp(1.5rem, 5vw, 2.25rem); line-height: 1.15; } .oca .oca-single__subtitle { margin: 0; color: var(--oca-secondary, #666666); font-size: 1.0625rem; } .oca .oca-summary { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--oca-border, #e5e5e5); border-radius: var(--oca-radius, 8px); background: var(--oca-surface, #ffffff); color: var(--oca-primary, #111111); } .oca .oca-summary__top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; } .oca .oca-summary__price { margin: 0; /* The accent as text on a light surface, where its contrast holds. */ color: var(--oca-accent, #cc0000); font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; line-height: 1.1; } .oca .oca-summary__price-original { margin: 0; color: var(--oca-secondary, #666666); } .oca .oca-summary__facts { display: flex; flex-wrap: wrap; gap: .5rem; } .oca .oca-summary__fact { padding: .3rem .6rem; border-radius: 999px; background: var(--oca-muted, #f5f5f6); font-size: .875rem; } .oca .oca-summary__rows { display: grid; gap: .25rem .75rem; } .oca .oca-summary__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; padding: .375rem 0; border-bottom: 1px solid var(--oca-border, #e5e5e5); } .oca .oca-summary__row-label { margin: 0; color: var(--oca-secondary, #666666); } .oca .oca-summary__row-value { margin: 0; font-weight: 600; } .oca .oca-summary__stock { margin: 0; color: var(--oca-secondary, #666666); font-size: .875rem; } @media (min-width: 768px) { .oca .oca-summary { padding: 1.25rem 1.5rem; } .oca .oca-summary__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== 12. Detail page: gallery ========================================================================== */ .oca .oca-gallery { position: relative; overflow: hidden; border-radius: var(--oca-radius, 8px); background: var(--oca-muted, #f5f5f6); } .oca .oca-gallery--empty { aspect-ratio: var(--oca-card-ratio, 4 / 3); } /* * A scroll-snapping flex row: a real, swipeable gallery without a single line * of JavaScript. position:relative also makes the track the offsetParent, * which is what lets the script scroll to a slide by its offsetLeft. */ .oca .oca-gallery__track { position: relative; display: flex; gap: .5rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; /* Hidden tastefully; wheel and keyboard scrolling are untouched. */ scrollbar-width: none; } .oca .oca-gallery__track::-webkit-scrollbar { display: none; } .oca .oca-gallery__slide { position: relative; flex: 0 0 100%; overflow: hidden; aspect-ratio: var(--oca-card-ratio, 4 / 3); background: var(--oca-muted, #f5f5f6); scroll-snap-align: start; } .oca.oca .oca-gallery__zoom { display: block; width: 100%; height: 100%; cursor: zoom-in; } .oca .oca-gallery__image { display: block; width: 100%; height: 100%; object-fit: cover; } .oca.oca .oca-gallery__nav { position: absolute; top: calc(50% - 22px); z-index: 2; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--oca-border, #e5e5e5); border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--oca-primary, #111111); font-size: 1.75rem; line-height: 1; cursor: pointer; } .oca.oca .oca-gallery__nav:hover { background: #ffffff; } .oca.oca .oca-gallery__nav--prev { left: .5rem; } .oca.oca .oca-gallery__nav--next { right: .5rem; } /* Arrows only where there is a real pointer; a touch device swipes instead. */ @media (hover: hover) { .oca.oca .oca-gallery__nav { display: inline-flex; } } .oca .oca-gallery__thumbs { display: flex; gap: .5rem; padding: .5rem; overflow-x: auto; scrollbar-width: thin; } .oca .oca-gallery__thumb { transition: opacity .15s linear, border-color .15s linear; } .oca.oca .oca-gallery__thumb { flex: 0 0 auto; width: 72px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: calc(var(--oca-radius, 8px) / 1.5); background: none; opacity: .7; cursor: pointer; } .oca.oca .oca-gallery__thumb:hover { opacity: 1; } .oca.oca .oca-gallery__thumb[aria-selected="true"] { border-color: var(--oca-primary, #111111); opacity: 1; } .oca .oca-gallery__thumb-image { display: block; width: 100%; height: 54px; object-fit: cover; } @media (min-width: 768px) { .oca.oca .oca-gallery__thumb { width: 96px; } .oca .oca-gallery__thumb-image { height: 68px; } } /* ========================================================================== 13. Lightbox -------------------------------------------------------------------------- A built by the script and appended to , which is why these selectors do not start with a ".oca " ancestor: the element carries the class itself. ========================================================================== */ .oca-lightbox { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; overflow: hidden; border: 0; background: rgba(15, 15, 15, .96); color: #ffffff; } .oca-lightbox::backdrop { background: rgba(15, 15, 15, .9); } /* The no- fallback is a plain div, so it paints its own layer. */ .oca-lightbox--fallback { z-index: 100000; } .oca-lightbox .oca-lightbox__frame { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 3.5rem .5rem 4.5rem; /* Horizontal swipes belong to the gallery, vertical ones to the browser. */ touch-action: pan-y; } .oca-lightbox .oca-lightbox__image { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; } .oca-lightbox .oca-lightbox__counter { position: absolute; top: 1rem; left: 1rem; margin: 0; font-size: .875rem; font-weight: 600; letter-spacing: .04em; } .oca-lightbox .oca-lightbox__close, .oca-lightbox .oca-lightbox__nav { position: absolute; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: rgba(0, 0, 0, .45); color: #ffffff; font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; } .oca-lightbox .oca-lightbox__close:hover, .oca-lightbox .oca-lightbox__nav:hover { background: rgba(0, 0, 0, .75); } .oca-lightbox .oca-lightbox__close { top: .75rem; right: .75rem; } .oca-lightbox .oca-lightbox__nav { bottom: 1rem; width: 25%; max-width: 96px; } .oca-lightbox .oca-lightbox__nav--prev { left: 1rem; } .oca-lightbox .oca-lightbox__nav--next { right: 1rem; } /* A white ring: the plugin's dark outline would vanish on this background. */ .oca-lightbox :focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } @media (min-width: 768px) { .oca-lightbox .oca-lightbox__frame { padding: 4rem 5rem; } .oca-lightbox .oca-lightbox__nav { top: calc(50% - 28px); bottom: auto; width: 56px; height: 56px; max-width: none; } } /* Scroll lock on while the modal is open. */ .oca-lightbox-open { overflow: hidden; } /* ========================================================================== 14. Detail page: description, specifications, equipment ========================================================================== */ .oca .oca-description__title, .oca .oca-specs-group__title, .oca .oca-equipment__title, .oca .oca-contact__title, .oca .oca-testdrive__title { margin: 0 0 .75rem; font-size: 1.25rem; line-height: 1.3; } .oca .oca-description__intro { margin: 0 0 .75rem; font-size: 1.0625rem; } /* The editor content keeps the theme's typography; only the edges are tidied. */ .oca .oca-description__body > :first-child { margin-top: 0; } .oca .oca-description__body > :last-child { margin-bottom: 0; } .oca .oca-specs-group { margin-bottom: 1.25rem; } .oca .oca-specs { display: grid; gap: 0; border-top: 1px solid var(--oca-border, #e5e5e5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .oca .oca-specs__label, .oca .oca-specs__value { min-width: 0; margin: 0; padding: .5rem .25rem; border-bottom: 1px solid var(--oca-border, #e5e5e5); font-size: .9375rem; overflow-wrap: break-word; } .oca .oca-specs__label { color: var(--oca-secondary, #666666); } .oca .oca-specs__value { font-weight: 600; text-align: right; } @media (min-width: 1025px) { .oca .oca-specs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } .oca .oca-specs__value { text-align: left; } } .oca .oca-equipment { display: grid; gap: 1.25rem; } .oca .oca-equipment__list { display: grid; gap: .25rem; } .oca .oca-equipment__item { display: flex; align-items: flex-start; gap: .5rem; font-size: .9375rem; } .oca .oca-equipment__check { color: var(--oca-accent, #cc0000); font-weight: 700; } .oca .oca-equipment__more { margin-top: .5rem; } .oca .oca-equipment__more-toggle { font-size: .9375rem; font-weight: 600; cursor: pointer; } .oca .oca-equipment__list--extra { margin-top: .5rem; } @media (min-width: 768px) { .oca .oca-equipment { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oca .oca-equipment__list { gap: .25rem .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1025px) { .oca .oca-equipment { grid-template-columns: repeat(3, minmax(0, 1fr)); } .oca .oca-equipment__list { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== 15. Detail page: contact and test drive ========================================================================== */ .oca .oca-contact, .oca .oca-testdrive { padding: 1rem; border: 1px solid var(--oca-border, #e5e5e5); border-radius: var(--oca-radius, 8px); background: var(--oca-surface, #ffffff); color: var(--oca-primary, #111111); } .oca .oca-contact__details { display: grid; gap: .75rem; margin-bottom: 1rem; } .oca .oca-contact__company { margin: 0; font-weight: 700; } .oca .oca-contact__address { margin: 0; color: var(--oca-secondary, #666666); font-style: normal; } .oca .oca-contact__hours-title { margin: 0 0 .25rem; font-size: 1rem; } .oca .oca-contact__hours-item { color: var(--oca-secondary, #666666); font-size: .9375rem; } .oca .oca-contact__actions { display: flex; flex-wrap: wrap; gap: .5rem; } .oca.oca .oca-contact__actions .oca-btn { flex: 1 1 12rem; } .oca .oca-testdrive__form { display: grid; gap: .875rem; } .oca .oca-testdrive__intro, .oca .oca-testdrive__hint { margin: 0 0 .75rem; color: var(--oca-secondary, #666666); font-size: .9375rem; } .oca .oca-testdrive__notice { margin: 0 0 1rem; padding: .75rem 1rem; border-left: 4px solid var(--oca-primary, #111111); border-radius: calc(var(--oca-radius, 8px) / 2); background: var(--oca-muted, #f5f5f6); } .oca .oca-testdrive__notice--success { border-left-color: #1d6f42; } .oca .oca-testdrive__notice--error { border-left-color: var(--oca-sold-bg, #a4161a); } .oca .oca-testdrive__notice-title { margin: 0 0 .5rem; font-weight: 700; } .oca .oca-testdrive__error-list { display: grid; gap: .25rem; padding-left: 1rem; list-style: disc; } .oca .oca-testdrive__field { display: grid; gap: .25rem; min-width: 0; } .oca .oca-testdrive__label { font-weight: 600; } .oca .oca-testdrive__required { color: var(--oca-accent, #cc0000); } .oca.oca .oca-testdrive__input { width: 100%; min-height: 44px; padding: .5rem .625rem; border: 1px solid var(--oca-border, #e5e5e5); border-radius: var(--oca-radius, 8px); background: var(--oca-surface, #ffffff); color: var(--oca-primary, #111111); font: inherit; } .oca.oca .oca-testdrive__textarea { min-height: 7rem; resize: vertical; } .oca.oca .oca-testdrive__input[aria-invalid="true"] { border-color: var(--oca-sold-bg, #a4161a); } .oca .oca-testdrive__error { color: var(--oca-sold-bg, #a4161a); font-size: .875rem; font-weight: 600; } .oca .oca-testdrive__privacy { margin: 0; color: var(--oca-secondary, #666666); font-size: .8125rem; } @media (min-width: 768px) { .oca .oca-contact, .oca .oca-testdrive { padding: 1.5rem; } .oca .oca-contact__details { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oca .oca-testdrive__form { gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } /* * Full-width rows in the two-column form: the hint, the message field * (third from the end, after the submit row and the privacy note), the * submit row itself and that note. */ .oca .oca-testdrive__hint, .oca .oca-testdrive__field:nth-last-child(3), .oca .oca-testdrive__submit, .oca .oca-testdrive__privacy { grid-column: 1 / -1; } } /* ========================================================================== 16. Reduced motion -------------------------------------------------------------------------- Every transition and the smooth scrolling are switched off by name at the same specificity they were set, so no !important is needed to win. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .oca .oca-btn, .oca .oca-card, .oca .oca-gallery__thumb, .oca .oca-results--busy { transition: none; } .oca .oca-gallery__track { scroll-behavior: auto; } .oca.oca .oca-btn:active { transform: none; } } /* ========================================================================== 17. Print ========================================================================== */ @media print { .oca .oca-breadcrumbs, .oca .oca-filters, .oca .oca-filters-toggle, .oca .oca-toolbar, .oca .oca-chips, .oca .oca-pagination, .oca .oca-card__footer, .oca .oca-testdrive, .oca .oca-contact__actions, .oca.oca .oca-gallery__nav, .oca .oca-gallery__thumbs { display: none; } .oca.oca-single { gap: 1rem; } .oca .oca-summary, .oca .oca-contact, .oca .oca-card, .oca .oca-row { border-color: #999999; box-shadow: none; } /* One photo, unclipped, instead of a scroll strip that prints blank. */ .oca .oca-gallery { overflow: visible; } .oca .oca-gallery__track { display: block; overflow: visible; } .oca .oca-gallery__slide { display: none; } .oca .oca-gallery__slide:first-child { display: block; width: 60%; aspect-ratio: auto; break-inside: avoid; } .oca .oca-specs-group, .oca .oca-equipment__group { break-inside: avoid; } .oca .oca-specs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }