is a dark gradient, #4B4B4B → #141313 * (custom.css:380-388). front.css:6 sets body{color:#212529}. v1 set no colours, so every * heading, label and paragraph inherited #212529 onto that gradient — 1.24:1, i.e. * invisible. TPMS-DESIGN.md §6 has the full token table with the measured ratios. * * Tokens live on .tpms-page, not :root: the scoping contract allows no unscoped selector, * and nothing outside /tpms should inherit them. Every rule that carries the readability * fix declares the literal AND THEN the var(), so a browser without custom properties * (IE11) still gets the corrected colour instead of falling back to the #212529 this * sheet exists to remove. * * Plain CSS, no build step (the rims.css convention). */ /* ------------------------------------------------------------------ tokens */ .tpms-page { --tpms-text: #fff; /* rims.css:13-19, custom.css:495 — 8.72:1 worst case */ --tpms-muted: #c9c9c9; /* lightest-passing grey: 5.27:1 at the top of the gradient */ --tpms-accent: #C90401; /* custom.css:73-75, :299-301, :366, :498 — edges and fills only */ --tpms-surface: rgba(0, 0, 0, .3); /* .result-box, custom.css:482-496 */ --tpms-surface-soft: rgba(255, 255, 255, .08); /* .rim-spec, rims.css:261 — INSIDE a panel only (4.23:1 on the bare page) */ --tpms-border: rgba(255, 255, 255, .18); /* rims.css:259, :302, :396 */ --tpms-border-strong: #707070; /* .side-bar-wrapper, custom.css:132 */ --tpms-danger: #ffb3b3; /* Bootstrap #dc3545 is 1.93:1 here; this is 5.13:1 */ --tpms-radius: 10px; /* custom.css:488 */ --tpms-shadow: 0 1px 7px 1px rgba(0, 0, 0, .5); /* custom.css:493 */ /* v1.2. An OPAQUE surface for the one thing that floats over the page (the combobox listbox): the gradient's own end colour, custom.css:380-388. #fff on it is 18.1:1. A translucent dropdown over a translucent panel would show the field through it. */ --tpms-overlay: #141313; /* v1.2. The accent as a WASH, never as text: a selected card's inner glow. #C90401 at 14% over the panel is a tint, not a colour anyone reads. */ --tpms-accent-wash: rgba(201, 4, 1, .14); /* v1.2 spacing scale — 8px based, so every gap on the page is one of these seven numbers and nothing is eyeballed. Panel padding stays 20px (s5), which is what .result-box already uses (custom.css:486). */ --tpms-s1: 4px; --tpms-s2: 8px; --tpms-s3: 12px; --tpms-s4: 16px; --tpms-s5: 20px; --tpms-s6: 24px; --tpms-s7: 32px; /* front.css:6 forces main.py-4 to padding:0 (it beats Bootstrap's own .py-4 utility with !important), so the page must bring its own — rims.css:13 does the same. */ padding-top: 18px; padding-bottom: 2.5rem; color: #fff; color: var(--tpms-text); } /* --------------------------------------------------------------- typography */ .tpms-page h1 { margin: 0 0 .5rem; font-size: 2rem; font-weight: 700; line-height: 1.2; color: #fff; color: var(--tpms-text); } .tpms-page h2 { color: #fff; color: var(--tpms-text); } .tpms-page .tpms-intro { max-width: 46rem; margin-bottom: 1.25rem; font-size: 1.05rem; color: #c9c9c9; color: var(--tpms-muted); } /* "Από X €" — the cheapest enabled package. v1 painted it #1a7f37 (1.72:1 and a green that appears nowhere else on the site); it is a secondary figure, so it is muted. */ .tpms-page .tpms-from { display: inline-block; margin-top: .4rem; font-size: 1.05rem; font-weight: 700; color: #c9c9c9; color: var(--tpms-muted); } .tpms-page .tpms-note { font-size: .95rem; color: #c9c9c9; color: var(--tpms-muted); } .tpms-page hr { margin: 1.5rem 0; border-top: 1px solid rgba(255, 255, 255, .18); border-top: 1px solid var(--tpms-border); } /* custom.css:299-301 is a{color:#C90401!important} — 1.45:1 on this page, and on the red .btn-primary (custom.css:73-75) it is red-on-red: the v1 CTA was an empty rectangle. rims.css answers the same rule seven times (:159, :168, :178, :228, :361, :460). */ .tpms-page a { color: #fff !important; color: var(--tpms-text) !important; text-decoration: underline; } .tpms-page a.btn { text-decoration: none; } /* ------------------------------------------------------------------ panels */ /* The site's panel recipe, not a white card: .result-box (custom.css:482-496) over the dark gradient, framed like .side-bar-wrapper (custom.css:129-135). */ .tpms-page .tpms-panel { margin-bottom: 20px; padding: 20px; background: rgba(0, 0, 0, .3); background: var(--tpms-surface); border: 1px solid #707070; border: 1px solid var(--tpms-border-strong); border-radius: 10px; border-radius: var(--tpms-radius); box-shadow: 0 1px 7px 1px rgba(0, 0, 0, .5); box-shadow: var(--tpms-shadow); color: #fff; color: var(--tpms-text); word-wrap: break-word; overflow-wrap: break-word; } /* A form laid out as a .row inside a 20px panel: the row's -15px margin plus the column's 15px padding puts the first control back on the panel's padding edge. */ .tpms-page .tpms-panel > .row { margin-bottom: 0; } .tpms-page .tpms-panel-title { margin-bottom: .85rem; color: #fff; color: var(--tpms-text); } /* The summary is the panel that matters, marked the way the site marks one: .widget{border-bottom:5px #c90101 solid} (custom.css:165-171) and .cart-footer{border-bottom:15px solid #C90401} (custom.css:408-417). A thin accent border was rejected — #C90401 against the panel is 2.08:1, under the 3:1 guideline. */ .tpms-page .tpms-summary { border-bottom: 5px solid #C90401; border-bottom: 5px solid var(--tpms-accent); /* v1.2: the card follows the selector down the page. 84px clears the .overheader.fixed-top, which is min-height:64px (custom.css:254-259), plus a 20px breath. Turned off below 992px in the media block at the foot of this sheet, where the two columns stack. */ position: -webkit-sticky; position: sticky; top: 84px; } /* --------------------------------------------------------------- form fields */ .tpms-page .tpms-field { margin-bottom: 1rem; } /* One rule for every group heading on the page: the enquiry form's field labels, the label above a fallback control, and the of the two radio groups. The legend selector is a DESCENDANT one on purpose — the fieldset sits inside .tpms-enhanced, not directly inside .tpms-block. */ .tpms-page .tpms-field label, .tpms-page .tpms-block > div > label, .tpms-page .tpms-block fieldset > legend { display: block; margin-bottom: .3rem; padding: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: #fff; color: var(--tpms-text); } .tpms-page .tpms-req { margin-left: 2px; color: #ffb3b3; color: var(--tpms-danger); } .tpms-page .tpms-required-note { margin: 0 0 1rem; font-size: .85rem; color: #c9c9c9; color: var(--tpms-muted); } .tpms-page .tpms-help { display: block; margin-top: .3rem; font-size: .85rem; color: #c9c9c9; color: var(--tpms-muted); } /* ------------------------------------------------- progressive layers (v1.2) */ /* * The selector panel is a price CALCULATOR: every amount comes from * POST /tpms/quote, so without JavaScript it cannot produce a number whatever it * looks like. v1.2 therefore ships both layers and lets the script pick one: * * .tpms-fallback the native, labelled controls — what a visitor without * JavaScript gets, and exactly what v1.1 shipped; * .tpms-enhanced the combobox, the cards and the segment bar — shown only * once public/js/tpms.js has put `tpms-js` on .tpms-page, * which it does at PARSE TIME (the script tag is the last * thing in ), so there is no flash of the fallback. * * The fallback controls never leave the DOM: with JavaScript they are the VALUE * HOLDERS the quote request reads (#tpms-brand, #tpms-category, #tpms-quantity). * That is why every existing `for="…"` assertion still points at a real control. */ .tpms-page .tpms-enhanced { display: none; } .tpms-page.tpms-js .tpms-enhanced { display: block; } .tpms-page.tpms-js .tpms-fallback { display: none; } /* One control group inside the selector panel. Deliberately NOT `.tpms-field`: that class is the enquiry form's grid cell and TpmsUiTest counts it. */ .tpms-page .tpms-block { margin-bottom: 20px; margin-bottom: var(--tpms-s5); } .tpms-page .tpms-block:last-child { margin-bottom: 0; } /* ------------------------------------------------------ brand combobox (v1.2) */ /* The listbox is absolutely positioned against this. */ .tpms-page .tpms-combo { position: relative; } .tpms-page .tpms-combo-list { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; max-height: 17rem; margin: 4px 0 0; margin: var(--tpms-s1) 0 0; padding: 4px; padding: var(--tpms-s1); overflow-y: auto; list-style: none; background: #141313; background: var(--tpms-overlay); border: 1px solid rgba(255, 255, 255, .18); border: 1px solid var(--tpms-border); border-radius: 8px; box-shadow: 0 1px 7px 1px rgba(0, 0, 0, .5); box-shadow: var(--tpms-shadow); } .tpms-page .tpms-combo-option { min-height: 44px; /* the touch-target floor, everywhere on this page */ padding: 11px 12px; border-radius: 6px; font-size: .95rem; line-height: 1.4; color: #fff; color: var(--tpms-text); cursor: pointer; } .tpms-page .tpms-combo-option + .tpms-combo-option { margin-top: 2px; } .tpms-page .tpms-combo-option:hover, .tpms-page .tpms-combo-active { background: rgba(255, 255, 255, .08); background: var(--tpms-surface-soft); } /* The active row is marked with the accent as an EDGE. As text the accent is 1.45:1 here, so it never paints a letter. */ .tpms-page .tpms-combo-active { box-shadow: inset 2px 0 0 0 #C90401; box-shadow: inset 2px 0 0 0 var(--tpms-accent); } /* is yellow-on-black by default, which would be the brightest thing on the page. The matched run is marked by WEIGHT instead. */ .tpms-page .tpms-combo-option mark { padding: 0; background: transparent; color: #fff; color: var(--tpms-text); font-weight: 700; } .tpms-page .tpms-combo-empty { margin: 8px 0 0; margin: var(--tpms-s2) 0 0; padding: 10px 12px; background: rgba(255, 255, 255, .08); background: var(--tpms-surface-soft); border: 1px solid rgba(255, 255, 255, .18); border: 1px solid var(--tpms-border); border-radius: 8px; font-size: .9rem; color: #c9c9c9; color: var(--tpms-muted); } /* A link that is a