/* ========================================================================== Full-width page container override. This stylesheet is only enqueued on pages that actually render [tuneeuro_configurator] (see TEC_Configurator::render_shortcode()), so this rule safely can't affect any other page on the site without needing to target a specific page ID. Astra's own dynamic-CSS generator uses this exact selector — '.page .site-content > .ast-container' — for its equivalent per-page width override (see astra/inc/class-astra-dynamic-css.php); matched here with !important since the site-wide "boxed content" setting that's constraining it (~1140px) is itself emitted as dynamic CSS in , so this needs to reliably win regardless of stylesheet load order. This is what was cropping the manufacturer background images: even once the page container is widened, .tec-configurator's own former 1100px cap (below) would still have bottlenecked them, so both are addressed here. ========================================================================== */ .page .site-content > .ast-container { max-width: 100% !important; padding-left: 24px; padding-right: 24px; } @media (max-width: 600px) { .page .site-content > .ast-container { padding-left: 16px; padding-right: 16px; } } .tec-configurator { max-width: 100%; margin: 0 auto; } .tec-picker { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } .tec-field { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 180px; } .tec-field label { font-weight: 600; margin-bottom: 6px; } .tec-field select { padding: 10px 12px; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; background: #fff; } .tec-field select:disabled { background: #f2f2f2; color: #888; } .tec-results { min-height: 40px; } .tec-loading, .tec-error { color: #666; font-style: italic; } /* ========================================================================== Vehicle result panel — light, self-contained card (previously dark; see the color-flip note below). Scoped to this panel only; the Manufacturer/Model/Year picker above stays on the site's normal light styling, since the reference design only covers the resolved-vehicle view. ========================================================================== */ .tec-vehicle { --tec-accent: #2271b1; /* Gauge-only tokens (approved white/purple HUD design) — deliberately separate from --tec-accent above, which stays blue and keeps governing the unrelated Add to Cart button / stage-tab focus ring. Only the gauges themselves use these. Reused below for the rest of the panel's text too, now that the panel itself is also light — --tec-gauge-bright/--tec-gauge-muted are exactly the "dark ink on a light ground" pair this panel now needs as well, which is also what makes the white gauge faces blend into the panel instead of reading as separate white circles. */ --tec-gauge-bg: #ffffff; --tec-gauge-line: #d5d7db; --tec-gauge-bright: #17181b; --tec-gauge-muted: #6b7078; --tec-gauge-accent: #9d4edd; --tec-gauge-accent-dim: #4a2a72; --tec-gauge-track: #f1f2f4; position: relative; overflow: hidden; border-radius: 10px; background: #ffffff; padding: 28px 28px 32px; color: var(--tec-gauge-bright); } /* Decorative only (aria-hidden in the markup) — the resolved vehicle's own photo, heavily blurred and dimmed. Its own blur/opacity/positioning are unchanged by the panel's background flip (kept intact as instructed); it now renders over a white base instead of black, which is an accepted, understood consequence of that flip rather than something re-tuned here. Its background-image is set via JS (see configurator.js) rather than inline in the HTML string, so a URL containing a quote can't break the markup. */ .tec-vehicle-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(28px); /* 0.28 was tuned for the ORIGINAL black panel and never re-tuned when the panel became white — every manufacturer background image imported so far is a dark/moody product photo (measured average brightness ~4-21 out of 255 across all 8), so at 0.28 opacity any of them darkens the white base down to a visibly gray ~185-190/255, not specific to any one manufacturer (verified: BMW's image produces the same gray at 0.28 as Ferrari's does). 0.08 keeps the result reliably reading as white (~235+/255 even for the darkest current images) while still leaving a faint, intentional hint of texture — manufacturers with no image assigned are unaffected either way, since this only matters when background-image is set. */ opacity: 0.08; z-index: 0; } .tec-vehicle-content { position: relative; z-index: 1; } .tec-vehicle-name { font-family: 'Barlow Condensed', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 800; font-style: italic; font-size: 2rem; line-height: 1.1; margin: 0 0 20px; color: var(--tec-gauge-bright); } /* -- Top row: stage selector + gauges side by side ---------------------- Replaces the old stacked layout (stage selector, then full-width bars below) with a single row so the compact circular gauges sit beside the stage selector instead of taking their own full-width block underneath it — the point being to save the vertical space the old horizontal bars used. flex-wrap is what makes this "stack only when the width genuinely requires it": there's no hard breakpoint forcing a stack, the gauges row simply wraps onto its own line once it no longer fits beside the stage selector. */ .tec-stage-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; } /* -- Stage selector tabs ------------------------------------------------ */ .tec-stage-selector { display: flex; flex-wrap: wrap; gap: 14px; /* grow:0 — stays at its natural size rather than competing with .tec-gauges-row for the row's extra width, so the gauges get it. */ flex: 0 1 260px; } .tec-stage-tab { display: block; position: relative; min-width: 150px; border: 2px solid rgba(0, 0, 0, 0.35); border-radius: 4px; overflow: hidden; cursor: pointer; } /* Visually hidden but still keyboard-focusable and toggled by clicking anywhere on the label — the label itself carries all the visible "button" styling below. */ .tec-stage-tab input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .tec-stage-tab-name { display: block; padding: 10px 18px; font-family: 'Barlow Condensed', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 800; font-style: italic; font-size: 1.3rem; text-align: center; color: var(--tec-gauge-bright); background: transparent; } .tec-stage-tab-note { display: block; padding: 6px 18px; border-top: 2px solid rgba(0, 0, 0, 0.35); font-size: 0.75rem; color: #5a5f66; text-align: center; } /* Same high-contrast "inverted pill" selected state as before, polarity flipped to match the panel: was a white pill with near-black text on a black panel, now a near-black pill with white text on a white panel. */ .tec-stage-tab:has(input:checked) .tec-stage-tab-name { background: var(--tec-gauge-bright); color: #ffffff; } .tec-stage-tab:has(input:focus-visible) { outline: 2px solid var(--tec-accent); outline-offset: 2px; } /* -- Performance metric blocks ------------------------------------------ */ /* Each gauge takes an equal share of .tec-gauges-row's width, growing with it, so the two gauges genuinely fill the available area rather than sitting at a small fixed size within it. min-width:0 is the standard flexbox fix that lets a flex item shrink below its content's natural size, needed here so the row can still wrap/compress cleanly on narrow viewports instead of overflowing. */ .tec-metric { margin-bottom: 0; flex: 1 1 200px; min-width: 0; } .tec-metric-title { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.15); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--tec-gauge-muted); } /* -- Circular HP/Torque gauges (approved white/purple HUD design) ------ Each gauge is its own white instrument face; now that the panel itself is also white (see .tec-vehicle), the two blend into one continuous light surface instead of reading as white circles on a black panel. Positioned side by side, to the right of the stage selector (see .tec-stage-row / .tec-gauges-row below), instead of stacked full-width the way the old horizontal bars were. */ /* Holds both gauges side by side, to the right of .tec-stage-selector within .tec-stage-row. flex:1 (grow) is what makes this claim the rest of the row's width instead of shrink-wrapping its own content — .tec-stage-selector is grow:0 (see above) specifically so it doesn't compete for that space. flex-wrap: if the two gauges genuinely don't fit the remaining row width even at their smallest, the second wraps below the first rather than overflowing. */ .tec-gauges-row { display: flex; flex-wrap: wrap; gap: 16px; flex: 1 1 420px; } .tec-gauge { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; } /* Fills its share of .tec-gauges-row (see .tec-metric's flex-basis above) rather than sitting at a small fixed size within it — width:100% of the flex item's own (now large, growing) box, capped so it doesn't become excessive on very wide rows. The SVG's own viewBox scales every tick/arc/label proportionally with this wrapper, so resizing it only changes display size, never the gauge's internal geometry. Deliberately no background, no border, no border-radius, no shadow — this div is a pure layout/sizing box, invisible on its own. Only the SVG's own graphics (arcs, ticks, text, marker) are visible; the panel underneath (white, with the manufacturer background image blurred into it) shows through everywhere else, so nothing here should read as a distinct circular "face" shape. --tec-gauge-bg still exists and is still used by .tec-gauge-marker's small hollow-dot fill below — just no longer applied to this element. */ .tec-gauge-dial-wrap { position: relative; width: 100%; max-width: 360px; margin: 0 auto; padding: 12px; } .tec-gauge-dial-wrap svg { display: block; width: 100%; height: auto; overflow: visible; } .tec-gauge-tick { stroke: var(--tec-gauge-line); stroke-width: 1; } .tec-gauge-tick--major { stroke: var(--tec-gauge-muted); stroke-width: 1.5; } .tec-gauge-track { fill: none; stroke: var(--tec-gauge-track); stroke-linecap: round; } .tec-gauge-arc { fill: none; stroke-linecap: round; } .tec-gauge-arc--factory { stroke: var(--tec-gauge-muted); } .tec-gauge-arc--base { stroke: var(--tec-gauge-accent-dim); } .tec-gauge-arc--gain { stroke: var(--tec-gauge-accent); filter: drop-shadow(0 0 6px rgba(157, 78, 221, 0.55)); } /* Reveal timing (approved): a two-phase motion, not a single ease. Phase 1 (0%–92% of 1100ms, dashoffset 100→8) is Material's "accelerate" curve — near-zero velocity at the start, gradually and deliberately building speed, fastest right at the phase boundary. Phase 2 (the final ~8%, ~90ms, dashoffset 8→0) is a soft "decelerate" curve for a short, gentle settle into the final value. Applied only to --base/--gain (not --factory, whose dashoffset is set once at construction and never changes) so freshly-inserted elements play it automatically — no JS trigger needed. */ .tec-gauge-arc--base, .tec-gauge-arc--gain { animation: tec-gauge-arc-reveal 1100ms both; } @keyframes tec-gauge-arc-reveal { 0% { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); } 92% { stroke-dashoffset: 8; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } 100% { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .tec-gauge-arc--base, .tec-gauge-arc--gain { animation: none; stroke-dashoffset: 0; } } .tec-gauge-marker { fill: var(--tec-gauge-bg); stroke: var(--tec-gauge-accent); stroke-width: 2.5; transform-origin: 140px 140px; animation: tec-gauge-marker-reveal 1100ms both; } /* Same two-phase shape as the arc reveal above, so the marker grows in lockstep with the arc it sits at the tip of. */ @keyframes tec-gauge-marker-reveal { 0% { transform: scale(0.4); animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); } 92% { transform: scale(0.96); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .tec-gauge-marker { animation: none; transform: scale(1); } } .tec-gauge-center { text-anchor: middle; font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace; fill: var(--tec-gauge-bright); } .tec-gauge-value { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; } .tec-gauge-unit { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; fill: var(--tec-gauge-muted); } .tec-gauge-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; fill: var(--tec-gauge-muted); } .tec-gauge-crosshair { stroke: var(--tec-gauge-line); stroke-width: 1; } /* Factory/Tuned/Gain readouts sit on the panel's background (same as the title above them), outside the white gauge face — now that the panel is also white, they use the same dark-ink tokens the gauge face's own text uses, for one consistent palette across the whole panel. Max-width matches the dial's own (360px) so the readout row doesn't look disproportionately narrow under the now much larger gauge. */ .tec-gauge-readouts { display: flex; align-items: stretch; gap: 0; width: 100%; max-width: 360px; margin: 0 auto; font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace; } .tec-gauge-readout { flex: 1 1 0; text-align: center; padding: 0 6px; } .tec-gauge-readout + .tec-gauge-readout { border-left: 1px solid rgba(0, 0, 0, 0.1); } .tec-gauge-readout-label { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tec-gauge-muted); margin-bottom: 4px; } .tec-gauge-readout-value { display: block; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tec-gauge-bright); } .tec-gauge-readout--gain .tec-gauge-readout-value { color: var(--tec-gauge-accent); } /* -- Secondary info: de-emphasized, well below the performance section -- */ .tec-secondary-info { margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .tec-secondary-price { margin: 0 0 10px; font-size: 1rem; font-weight: 600; color: var(--tec-gauge-bright); } .tec-secondary-specs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; } .tec-secondary-specs li { display: flex; justify-content: space-between; font-size: 0.8rem; color: #6b7078; } .tec-secondary-specs strong { color: #33363c; font-weight: 600; } .tec-secondary-notes { font-size: 0.8rem; font-style: italic; color: #6b7078; margin: 6px 0 0; } .tec-secondary-notes span { font-style: normal; font-weight: 600; color: #33363c; } /* Was a light salmon (#ff8f8f) tuned for a black background — too low contrast to read on white, so this is a necessary adjustment (same role: a clearly-legible warning red), not a color-scheme change. */ .tec-stage-oos { color: #c0392b; font-weight: 600; font-size: 0.85rem; margin: 10px 0 0; } /* -- Vehicle photo: sharp and visible, distinct from the blurred/dimmed .tec-vehicle-bg layer behind the whole panel. Deliberately its own class rather than reusing .tec-vehicle-image (used only by the server-rendered SEO/no-JS fallback template) so the two stay decoupled — a future change to one can't silently affect the other. */ .tec-vehicle-photo { margin: 20px 0 0; } .tec-vehicle-photo img { display: block; max-width: 220px; max-height: 160px; width: 100%; height: auto; object-fit: cover; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.15); } .tec-vehicle-description { margin: 20px 0 0; max-width: 640px; font-size: 0.95rem; line-height: 1.5; color: #4a4f56; } .tec-vehicle-description p { margin: 0 0 12px; } .tec-vehicle-description p:last-child { margin-bottom: 0; } /* -- Checkout: persistent, never rebuilt on a stage switch -------------- */ .tec-checkout { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, 0.15); max-width: 360px; } .tec-vin-field { display: flex; flex-direction: column; font-weight: 600; margin-bottom: 8px; color: var(--tec-gauge-bright); } .tec-vin-field input { margin-top: 6px; padding: 10px 12px; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; text-transform: uppercase; } .tec-field-error { color: #c0392b; font-size: 0.9rem; margin: 0 0 12px; } .tec-button { display: inline-block; background: #2271b1; color: #fff; border: none; padding: 12px 24px; font-size: 1rem; font-weight: 600; border-radius: 4px; cursor: pointer; text-decoration: none; text-align: center; } .tec-button:hover { background: #135e96; color: #fff; } .tec-no-tune { background: #f8f8f8; border: 1px dashed #ccc; border-radius: 8px; padding: 24px; text-align: center; } /* ========================================================================== Used only by the server-rendered SEO/no-JS fallback in templates/configurator-shortcode.php (a deliberately simpler, separate markup, not touched by this redesign) — kept exactly as before. ========================================================================== */ .tec-vehicle-image { max-width: 220px; max-height: 160px; object-fit: cover; border-radius: 6px; } .tec-vehicle-summary ul.tec-stage-summary { list-style: none; padding: 0; } .tec-vehicle-summary-description { margin: 12px 0; max-width: 640px; line-height: 1.5; } .tec-vehicle-summary-description p { margin: 0 0 12px; } .tec-vehicle-summary-description p:last-child { margin-bottom: 0; } @media (max-width: 600px) { .tec-picker { flex-direction: column; /* Tighter than the desktop 16px (that value is a horizontal gap between side-by-side fields there; here it's the vertical gap between three stacked label+dropdown groups, which reads as excessive at the same value). */ gap: 10px; } /* .tec-field's base flex-basis (200px) means "at least 200px wide" in the desktop row layout, but flex-basis always tracks the MAIN axis — once .tec-picker switches to flex-direction:column above, that same 200px is reinterpreted as a minimum HEIGHT, forcing every field to be ~200px tall (with flex-grow:1 even stretching further) when its actual content (a label + one dropdown) only needs ~70px. That mismatch is what was showing up as the large empty gaps between Manufacturer/Model/Year — not the 10px gap above. Resetting grow/basis here lets each field size to its own content, which is what the compact stacked form needs. */ .tec-field { flex: 0 1 auto; } .tec-vehicle-name { font-size: 1.6rem; } /* Stage tabs: equal-width split of the full row instead of a fixed min-width, so two (or more) tabs always share the available width and stay side by side rather than risking a wrap to a vertical stack on narrow phones — robust regardless of exact viewport width or tab count, unlike a fixed px minimum. .tec-stage-selector's own desktop cap (flex: 0 1 260px, set so it doesn't crowd the gauges row) is lifted here too, since below this breakpoint the gauges row has already wrapped onto its own line (see .tec-stage-row), so the stage selector can safely use the full row width. */ .tec-stage-tab { flex: 1 1 0; min-width: 0; } /* justify-content: safety net only, not the primary fix above — if enough stage tabs exist that even an equal split can't keep them on one row, a wrapped tab centers under the others instead of sitting flush-left and lopsided. No visible effect in the normal 2-tab case, since flex-grow already has them filling the full row width with no space left to justify. */ .tec-stage-selector { flex: 1 1 auto; justify-content: center; } /* Same reasoning as above: the two-column Fuel Type/Transmission grid is fine for the current catalog's short values, but a longer free-text value (this field is unbounded) could crowd a ~159px column on the narrowest phones. Single column at this breakpoint only. */ .tec-secondary-specs { grid-template-columns: 1fr; } }