/* ───────────────────────────────────────────── MeterSahi? — METER SKIN Loaded only on pages whose city carries skin:'meter' (currently Ahmedabad). Every rule is scoped to [data-skin="meter"], so a city without the flag cannot be affected by anything in this file. The idea: the product is named after the fare meter, so it looks like one. Amber-on-black LCD readout, monospace figures, hardware edges and recessed slots rather than soft cards. MOBILE FIRST. The base rules here are the phone layout; the two min-width steps below add the roomier layouts. The old sheet patched downward through eight max-width breakpoints, which is what made the phone the afterthought. ───────────────────────────────────────────── */ [data-skin="meter"] { --m-bg: #0e0e0d; /* housing */ --m-panel: #141412; /* recessed face */ --m-slot: #171715; /* input slot */ --m-line: #2f2e2a; /* engraved edge */ --m-line-soft: #262522; --m-amber: #ffb020; /* the readout */ --m-amber-dk: #a86f08; /* pressed edge */ --m-text: #e8e6e0; --m-dim: #a5a29b; /* 7.0:1 on --m-bg */ --m-red: #ff4d4a; --m-red-bg: #2a1110; --m-red-line: #7f2422; --m-green: #4ade80; --m-bar: 88px; /* sticky action bar, phone */ /* ── Remap the BASE tokens ── The whole of style.css is built on these, so redefining them here re-grounds every rule in it at once — including the ones this file never names. Overriding rule by rule instead left pale backgrounds behind wherever one was missed: the tariff table kept `background: var(--surface)` (white) under light text, and a hovered FAQ row flashed `--surface-2` the same way. They are declared on the skinned element only, so a city without the flag still gets the original light palette. */ --surface: #141412; --surface-2: #171715; --surface-3: #1d1c1a; --border: #262522; --border-md: #2f2e2a; --black: #0e0e0d; --off-black: #1d1c1a; --text-primary: #e8e6e0; --text-secondary: #a5a29b; --text-hint: #86837d; --text: #e8e6e0; --text-muted: #a5a29b; --accent: #ffb020; --saffron: #ffb020; --saffron-dk: #ffb020; /* The "-lt" tints are backgrounds for tinted states. Pale ones are unreadable here, so they become dark tints of the same hue, and the "-dk" text colours that sit on them flip to light. */ --saffron-lt: #2a2113; --green-lt: #12301f; --green-dk: #4ade80; --green: #4ade80; --red-lt: #2a1110; --red-dk: #ff8c8a; --red: #ff4d4a; --shadow-sm: none; --shadow-md: 0 8px 24px rgba(0,0,0,0.6); } /* Selected text was white-on-white wherever the selection colour came from the browser default. */ [data-skin="meter"] ::selection { background: var(--m-amber); color: #0e0e0d; } [data-skin="meter"] ::-moz-selection { background: var(--m-amber); color: #0e0e0d; } /* ── Ground ── */ [data-skin="meter"] body { background: var(--m-bg); color: var(--m-text); } [data-skin="meter"] .container { padding-left: 16px; padding-right: 16px; } [data-skin="meter"] a { color: var(--m-amber); } [data-skin="meter"] a:hover { color: #ffc75a; } /* The banner button is an on a blue fill; the generic link colour above turned its label amber, at 2.8:1. */ [data-skin="meter"] .app-banner-btn, [data-skin="meter"] .app-banner-btn:hover { color: #ffffff; } /* Tabler icons never carry meaning alone here; keep them quiet. */ [data-skin="meter"] .ti { color: inherit; } /* ── Header: an engraved plate, 56px ── */ [data-skin="meter"] .site-header { background: var(--m-bg); border-bottom: 1px solid var(--m-line-soft); } [data-skin="meter"] .header-inner { min-height: 56px; gap: 10px; } [data-skin="meter"] .brand-name { font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.1em; color: var(--m-text); text-transform: uppercase; } [data-skin="meter"] .brand-sub { display: none; } [data-skin="meter"] .tariff-badge { display: none; } [data-skin="meter"] .city-dropdown-trigger { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-dim); background: var(--m-slot); border: 1px solid var(--m-line); border-radius: 3px; min-height: 44px; padding: 0 11px; } [data-skin="meter"] .acc-header-btn { min-height: 44px; min-width: 44px; justify-content: center; background: var(--m-slot); border: 1px solid var(--m-line); border-radius: 3px; color: var(--m-text); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; } [data-skin="meter"] .acc-header-btn.is-signed-in { background: var(--m-amber); border-color: var(--m-amber); color: #0e0e0d; } [data-skin="meter"] .acc-header-btn.is-signed-in:hover { background: #ffc75a; } /* ── Hero collapses to a masthead + spec strip ── */ [data-skin="meter"] .hero { background: transparent; padding: 14px 0 0; } [data-skin="meter"] .hero-heading { font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--m-text); line-height: 1.35; margin-bottom: 6px; max-width: none; } [data-skin="meter"] .hero-heading::after { display: none; } [data-skin="meter"] .hero-sub { display: none; } [data-skin="meter"] .hero-chips { display: none; } /* The spec strip replaces the chips: the three numbers that matter. */ [data-skin="meter"] .meter-spec { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--m-dim); text-transform: uppercase; } [data-skin="meter"] .meter-spec b { color: var(--m-amber); font-weight: 500; } /* ── Main: one column on a phone, and room for the sticky bar ── */ [data-skin="meter"] .main-grid { display: block; padding: 14px 0 0; } [data-skin="meter"] .panel { background: transparent; border: none; border-radius: 0; box-shadow: none; } [data-skin="meter"] .input-panel { padding: 0 0 calc(var(--m-bar) + 14px); } /* Step headers: the numbered circles go, mono labels arrive */ [data-skin="meter"] .panel-header { padding: 0; margin-bottom: 8px; border: none; background: transparent; min-height: 0; } [data-skin="meter"] .panel-step { display: none; } [data-skin="meter"] .panel-header h2 { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-dim); } [data-skin="meter"] .panel-divider { display: none; } /* ── Vehicle toggle: a hardware rocker ── */ [data-skin="meter"] .vehicle-toggle { margin: 0 0 13px; padding: 0; gap: 0; background: transparent; border: 1px solid var(--m-line); border-radius: 4px; overflow: hidden; } [data-skin="meter"] .vt-btn { min-height: 46px; border-radius: 0; background: var(--m-slot); color: var(--m-dim); font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } [data-skin="meter"] .vt-btn + .vt-btn { border-left: 1px solid var(--m-line); } [data-skin="meter"] .vt-btn.active { background: var(--m-amber); color: #0e0e0d; box-shadow: none; } /* ── Fields: recessed slots ── */ [data-skin="meter"] .field-stack { gap: 18px; padding: 0; } [data-skin="meter"] .collapsible-content { padding-left: 0; padding-right: 0; } [data-skin="meter"] .field label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-dim); margin-bottom: 6px; } [data-skin="meter"] .field label .ti { display: none; } [data-skin="meter"] .field input, [data-skin="meter"] .field select { /* 16px is the floor: iOS Safari auto-zooms anything smaller on focus. */ min-height: 54px; font-size: 16px; background: var(--m-slot); color: var(--m-text); border: 1px solid var(--m-line); border-top-color: #0a0a09; border-radius: 4px; padding: 0 13px; } [data-skin="meter"] .field input::placeholder { color: #86837d; } [data-skin="meter"] .field input:focus, [data-skin="meter"] .field select:focus { border-color: var(--m-amber); box-shadow: 0 0 0 2px rgba(255,176,32,0.22); background: var(--m-slot); } [data-skin="meter"] .input-with-action { position: relative; } [data-skin="meter"] .input-with-action input { padding-right: 52px; } [data-skin="meter"] .locate-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: none; background: transparent; color: var(--m-amber); } [data-skin="meter"] .locate-status { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--m-dim); } [data-skin="meter"] .locate-status--success { color: var(--m-green); } [data-skin="meter"] .route-connector { display: none; } /* ── Saved places: stamped tags ── */ [data-skin="meter"] .saved-places-row { gap: 6px; margin-top: 8px; } [data-skin="meter"] .sp-chip { min-height: 44px; border-radius: 3px; background: transparent; border: 1px solid var(--m-line); color: var(--m-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } [data-skin="meter"] .sp-chip i { color: var(--m-amber); } [data-skin="meter"] .sp-chip:hover { border-color: var(--m-amber); background: transparent; color: var(--m-amber); } [data-skin="meter"] .sp-chip--save { border-style: dashed; } [data-skin="meter"] .sp-popover { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 4px; box-shadow: none; } [data-skin="meter"] .sp-pop-title, [data-skin="meter"] .sp-pop-address { color: var(--m-text); } [data-skin="meter"] .sp-pop-address { color: var(--m-dim); } [data-skin="meter"] .sp-pop-kind { min-height: 44px; background: var(--m-slot); border: 1px solid var(--m-line); color: var(--m-text); border-radius: 3px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; } [data-skin="meter"] .sp-pop-custom input { min-height: 44px; font-size: 16px; background: var(--m-slot); border: 1px solid var(--m-line); color: var(--m-text); border-radius: 3px; } [data-skin="meter"] .sp-pop-save { min-height: 44px; background: var(--m-amber); color: #0e0e0d; border-radius: 3px; font-family: var(--font-mono); letter-spacing: 0.08em; } [data-skin="meter"] .sp-pop-msg { color: var(--m-dim); } /* ── The optional sections become one quiet strip ── */ [data-skin="meter"] .panel-header--collapsible { min-height: 46px; padding: 0 13px; margin: 13px 0 0; border: 1px solid var(--m-line); border-radius: 4px; background: transparent; } [data-skin="meter"] .panel-header--tint-amber, [data-skin="meter"] .panel-header--tint-gray { background: transparent; } [data-skin="meter"] .optional-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; background: transparent; border: 1px solid var(--m-line); color: var(--m-dim); border-radius: 2px; } [data-skin="meter"] .panel-chevron { color: var(--m-amber); } [data-skin="meter"] .collapsible-content.expanded { padding-top: 13px; } [data-skin="meter"] .options-grid { gap: 12px; } [data-skin="meter"] .rupee-input, [data-skin="meter"] .wait-time-input-group { background: var(--m-slot); border: 1px solid var(--m-line); border-radius: 4px; } [data-skin="meter"] .rupee-input input, [data-skin="meter"] .wait-time-input-group input { font-size: 16px; min-height: 52px; color: var(--m-text); background: transparent; } [data-skin="meter"] .rupee-symbol, [data-skin="meter"] .wait-time-unit { color: var(--m-dim); font-family: var(--font-mono); } [data-skin="meter"] .label-hint { color: var(--m-dim); } /* ── Sticky action bar: the button you press on a meter ── Fixed, so it is reachable whatever the content does. The inset keeps it clear of the iPhone home indicator; it needs viewport-fit=cover on the viewport meta to resolve to anything. */ [data-skin="meter"] .btn-calculate { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; width: auto; margin: 0; border-radius: 0; min-height: calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--m-amber); color: #0e0e0d; font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; border-top: 2px solid var(--m-amber-dk); } [data-skin="meter"] .btn-calculate:hover:not(:disabled) { background: #ffc75a; } [data-skin="meter"] .btn-calculate:disabled { background: #6b4a0d; color: #2a2621; } [data-skin="meter"] .btn-calculate .ti { color: #0e0e0d; } [data-skin="meter"] .spinner { position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 41; justify-content: center; background: var(--m-panel); border-top: 1px solid var(--m-line); padding: 9px 0; color: var(--m-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; } [data-skin="meter"] .spinner-ring { border-color: var(--m-line); border-top-color: var(--m-amber); } /* ── Results ── */ [data-skin="meter"] .results-panel { min-height: 0; } [data-skin="meter"] .empty-state { background: transparent; border: none; padding: 0; display: block; } [data-skin="meter"] .empty-icon, [data-skin="meter"] .empty-title, [data-skin="meter"] .empty-body { display: none; } /* Tariff preview card = the idle readout */ [data-skin="meter"] .fare-card-preview { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 5px; padding: 14px; margin: 0; } [data-skin="meter"] .fare-card-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-dim); margin-bottom: 10px; } [data-skin="meter"] .fc-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-dim); } [data-skin="meter"] .fc-value { font-family: var(--font-mono); font-size: 17px; color: var(--m-text); } /* The result context bar: back, route, share. Phone only. */ [data-skin="meter"] .result-bar { display: none; } /* THE READOUT — its own panel, because .verdict-title carries prose ("Possible meter tampering") as often as it carries a figure. The ghost 8888 behind the live digits is what a real LCD does with its unlit segments. */ [data-skin="meter"] .fare-readout { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 5px; padding: 16px 16px 13px; margin-bottom: 11px; } [data-skin="meter"] .fr-head, [data-skin="meter"] .fr-foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-dim); } [data-skin="meter"] .fr-foot { border-top: 1px solid var(--m-line-soft); padding-top: 9px; margin-top: 4px; } [data-skin="meter"] .fr-foot span:last-child { font-size: 13px; letter-spacing: 0.04em; color: var(--m-text); } [data-skin="meter"] .fr-digits { position: relative; height: 66px; margin: 5px 0 2px; } [data-skin="meter"] .fr-ghost, [data-skin="meter"] .fr-value { position: absolute; inset: 0; text-align: right; line-height: 66px; font-family: var(--font-mono); font-size: 58px; font-weight: 500; letter-spacing: 0.02em; } [data-skin="meter"] .fr-ghost { color: #2a2621; } [data-skin="meter"] .fr-value { color: var(--m-amber); text-shadow: 0 0 22px rgba(255,176,32,0.45); } /* The verdict stays a label, at a size prose can actually live at. */ [data-skin="meter"] .verdict-box > div { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 5px; padding: 14px; text-align: left; } [data-skin="meter"] .verdict-emoji { display: none; } [data-skin="meter"] .verdict-title { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-amber); line-height: 1.35; margin-bottom: 5px; } [data-skin="meter"] .verdict-body { font-size: 13px; color: var(--m-dim); line-height: 1.55; } [data-skin="meter"] .verdict-body strong { color: var(--m-text); font-family: var(--font-mono); } [data-skin="meter"] .verdict--tampered { background: var(--m-red-bg) !important; border-color: var(--m-red-line) !important; } [data-skin="meter"] .verdict--tampered .verdict-title { color: var(--m-red); } [data-skin="meter"] .verdict--tampered .verdict-body { color: #c98b89; } [data-skin="meter"] .verdict--tampered .verdict-body strong, [data-skin="meter"] .overcharge-amount { color: #ff8c8a; } [data-skin="meter"] .verdict--ok .verdict-title { color: var(--m-green); } /* Gauges */ [data-skin="meter"] .metrics-row { gap: 8px; } [data-skin="meter"] .metric-card { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 4px; padding: 11px 8px; text-align: center; } [data-skin="meter"] .metric-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-dim); justify-content: center; } [data-skin="meter"] .metric-label .ti { display: none; } [data-skin="meter"] .metric-value { font-family: var(--font-mono); font-size: 19px; color: var(--m-text); } [data-skin="meter"] .metric-unit { font-family: var(--font-mono); font-size: 10px; color: var(--m-dim); } [data-skin="meter"] .metric-unit.overridden { color: var(--m-amber); } /* Tape */ [data-skin="meter"] .breakdown-box { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 4px; padding: 12px 14px; } [data-skin="meter"] .breakdown-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-dim); margin-bottom: 8px; } [data-skin="meter"] .breakdown-row { font-family: var(--font-mono); font-size: 12.5px; color: var(--m-dim); border: none; padding: 4px 0; } [data-skin="meter"] .breakdown-row .amount { color: var(--m-text); } [data-skin="meter"] .total-row { border-top: 1px solid var(--m-line-soft); margin-top: 6px; padding-top: 8px; color: var(--m-amber); letter-spacing: 0.06em; } [data-skin="meter"] .total-row .amount { color: var(--m-amber); } [data-skin="meter"] .fare-band-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--m-dim); border-top: 1px dashed var(--m-line); margin-top: 9px; padding-top: 8px; } /* Reading order on the answer screen. The DOM puts the map straight after the readout, which pushed the overcharge warning below the fold — the second most important thing on the page. .result-content is a flex column, so order fixes it without touching the markup (and therefore without touching the other 28 cities). */ [data-skin="meter"] .result-content { display: flex; flex-direction: column; } [data-skin="meter"] .result-bar { order: 0; } [data-skin="meter"] .fare-readout { order: 1; } [data-skin="meter"] #verdict-box { order: 2; } [data-skin="meter"] .metrics-row { order: 3; } [data-skin="meter"] .breakdown-box { order: 4; } [data-skin="meter"] .map-box { order: 5; } [data-skin="meter"] .share-feedback-link { order: 6; } [data-skin="meter"] #feedback-section { order: 7; } [data-skin="meter"] #ride-compare-section { order: 8; } [data-skin="meter"] #manual-fallback { order: 9; } /* Map: evidence, not furniture */ [data-skin="meter"] .map-box { border: 1px solid var(--m-line); border-radius: 4px; height: 180px; } [data-skin="meter"] .share-feedback-link { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--m-dim); } /* Report + feedback */ [data-skin="meter"] .feedback-section, [data-skin="meter"] .report-vehicle-section, [data-skin="meter"] .ride-compare-section, [data-skin="meter"] .manual-fallback { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 4px; } [data-skin="meter"] .feedback-question, [data-skin="meter"] .report-subtext, [data-skin="meter"] .manual-body { color: var(--m-dim); } [data-skin="meter"] .feedback-btn, [data-skin="meter"] .btn-report, [data-skin="meter"] .btn-manual { min-height: 48px; border-radius: 3px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; } [data-skin="meter"] .feedback-btn { background: var(--m-slot); border: 1px solid var(--m-line); color: var(--m-text); } [data-skin="meter"] .feedback-btn--no { border-color: var(--m-red-line); color: #ff8c8a; } [data-skin="meter"] .btn-report { background: #d8332f; color: #fff; border: none; box-shadow: 0 3px 0 #8f1f1c; } [data-skin="meter"] .vn-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-dim); } [data-skin="meter"] .ss-input, [data-skin="meter"] .vn-price-input, [data-skin="meter"] .manual-inputs input { font-size: 16px; min-height: 46px; background: var(--m-slot); border: 1px solid var(--m-line); color: var(--m-text); border-radius: 3px; } [data-skin="meter"] .vn-price-wrap { background: var(--m-slot); border: 1px solid var(--m-line); border-radius: 3px; } [data-skin="meter"] .vn-price-currency { color: var(--m-dim); } [data-skin="meter"] .ss-dropdown { background: var(--m-panel); border: 1px solid var(--m-line); } [data-skin="meter"] .ss-option { color: var(--m-text); } [data-skin="meter"] .ss-option:hover { background: var(--m-slot); } [data-skin="meter"] .ss-search { font-size: 16px; background: var(--m-slot); border: 1px solid var(--m-line); color: var(--m-text); } /* ── Everything below the tool: the reference material ── */ [data-skin="meter"] .cross-promo-section, [data-skin="meter"] .how-it-works, [data-skin="meter"] .tariff-section, [data-skin="meter"] .faq-section, [data-skin="meter"] .complaint-section { background: var(--m-bg); border-top: 1px solid var(--m-line-soft); } [data-skin="meter"] .section-heading { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-text); } [data-skin="meter"] .section-sub { color: var(--m-dim); font-size: 12.5px; } [data-skin="meter"] .how-card, [data-skin="meter"] .promo-card, [data-skin="meter"] .complaint-card, [data-skin="meter"] .faq-item { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 4px; } [data-skin="meter"] .how-card h3 { color: var(--m-text); font-size: 14px; } [data-skin="meter"] .how-card p, [data-skin="meter"] .promo-sub, [data-skin="meter"] .faq-a { color: var(--m-dim); } [data-skin="meter"] .how-icon { color: var(--m-amber); } [data-skin="meter"] .promo-title { color: var(--m-text); } [data-skin="meter"] .faq-q { color: var(--m-text); font-size: 14px; min-height: 48px; display: flex; align-items: center; } [data-skin="meter"] .tariff-table { font-family: var(--font-mono); font-size: 12.5px; } [data-skin="meter"] .tariff-table th { background: var(--m-slot); color: var(--m-dim); font-size: 10px; letter-spacing: 0.12em; border-color: var(--m-line); } [data-skin="meter"] .tariff-table td { color: var(--m-text); border-color: var(--m-line-soft); } [data-skin="meter"] .tariff-table-wrap { border: 1px solid var(--m-line); border-radius: 4px; overflow-x: auto; } [data-skin="meter"] .cc-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-dim); } [data-skin="meter"] .cc-value { color: var(--m-text); font-family: var(--font-mono); } [data-skin="meter"] .cc-hint { color: var(--m-dim); } [data-skin="meter"] .complaint-text h2 { color: var(--m-text); } [data-skin="meter"] .complaint-text p { color: var(--m-dim); } [data-skin="meter"] .site-footer { background: var(--m-bg); border-top: 1px solid var(--m-line-soft); color: var(--m-dim); } [data-skin="meter"] .footer-links a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; } [data-skin="meter"] .site-footer p { color: var(--m-dim); font-size: 12px; } [data-skin="meter"] .site-footer-credit a { min-height: 44px; display: inline-flex; align-items: center; } /* Feedback dialog */ [data-skin="meter"] .feedback-dialog { background: var(--m-panel); border: 1px solid var(--m-line); } [data-skin="meter"] .feedback-dialog h3 { color: var(--m-text); font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.06em; } [data-skin="meter"] .feedback-dialog-sub { color: var(--m-dim); } [data-skin="meter"] .feedback-text-input { font-size: 16px; background: var(--m-slot); border: 1px solid var(--m-line); color: var(--m-text); } [data-skin="meter"] .feedback-dialog-submit { background: var(--m-amber); color: #0e0e0d; min-height: 48px; font-family: var(--font-mono); letter-spacing: 0.1em; } [data-skin="meter"] .feedback-star { min-width: 44px; min-height: 44px; } [data-skin="meter"] .feedback-dialog-close { min-width: 44px; min-height: 44px; color: var(--m-dim); } /* ───────────────────────────────────────────── THE VIEW SWAP (phone only, below 760px) The answer replaces the form instead of being appended under it. app.js sets body.has-result; nothing scrolls, so scrollIntoView has nothing left to compensate for. ───────────────────────────────────────────── */ @media (max-width: 759.98px) { [data-skin="meter"] .result-bar { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 30; margin: 0 0 12px; padding: 0 10px 0 2px; min-height: 56px; background: var(--m-bg); border-bottom: 1px solid var(--m-line-soft); } [data-skin="meter"] .rb-back, [data-skin="meter"] .rb-share { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--m-text); cursor: pointer; font-size: 19px; } [data-skin="meter"] .rb-share { border: 1px solid var(--m-line); border-radius: 3px; width: 40px; height: 40px; color: var(--m-amber); } [data-skin="meter"] .rb-text { flex: 1; min-width: 0; } [data-skin="meter"] .rb-route { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--m-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; } [data-skin="meter"] .rb-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--m-dim); margin-top: 2px; text-transform: uppercase; } /* Form out, answer in. */ [data-skin="meter"] body.has-result .hero, [data-skin="meter"] body.has-result .input-panel { display: none; } [data-skin="meter"] body.has-result .results-panel { padding-bottom: calc(var(--m-bar) + 14px); } /* Calculate is only the action while there is no answer on screen. */ [data-skin="meter"] body.has-result .btn-calculate { display: none; } /* With an answer up, the action becomes the next useful thing. */ [data-skin="meter"] .result-action { display: none; } [data-skin="meter"] body.has-result .result-action { display: flex; align-items: center; justify-content: center; gap: 9px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; min-height: calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); border: none; border-top: 2px solid #8f1f1c; background: #d8332f; color: #fff; font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } } /* ───────────────────────────────────────────── Wider than a phone. Two min-width steps, not eight max-width patches. ───────────────────────────────────────────── */ @media (min-width: 760px) { [data-skin="meter"] { --m-bar: 0px; } [data-skin="meter"] .main-grid { display: grid; grid-template-columns: 400px 1fr; gap: 20px; padding: 20px 0 24px; align-items: start; } [data-skin="meter"] .input-panel { padding-bottom: 0; } [data-skin="meter"] .hero { padding: 24px 0 0; } [data-skin="meter"] .hero-heading { font-size: 19px; } /* Off the bottom edge, back into the form where it belongs. */ [data-skin="meter"] .btn-calculate { position: static; border-radius: 4px; margin-top: 16px; width: 100%; min-height: 54px; padding-bottom: 0; border-top: none; box-shadow: 0 3px 0 var(--m-amber-dk); } [data-skin="meter"] .spinner { position: static; background: transparent; border: none; padding: 10px 0 0; justify-content: flex-start; } [data-skin="meter"] .map-box { height: 260px; } [data-skin="meter"] .fr-digits { height: 78px; } [data-skin="meter"] .fr-ghost, [data-skin="meter"] .fr-value { font-size: 70px; line-height: 78px; } } @media (min-width: 1024px) { [data-skin="meter"] .main-grid { grid-template-columns: 440px 1fr; gap: 26px; } [data-skin="meter"] .hero { padding: 30px 0 0; } [data-skin="meter"] .hero-heading { font-size: 21px; } } /* Honour a reduced-motion preference: the glow is decorative. */ @media (prefers-reduced-motion: reduce) { [data-skin="meter"] .fr-value { text-shadow: none; } } /* ───────────────────────────────────────────── INSTRUMENT ICONS Tabler is a soft, rounded set — it reads as a web app on a page built to look like hardware. These override the glyph with a masked SVG of the same symbol drawn on a 24px grid at 2px with square caps and mitred joins. Done as a mask on the existing .ti-* class so the markup is untouched, which is what keeps this off the other 28 cities. Any icon not listed keeps its Tabler glyph rather than disappearing. ───────────────────────────────────────────── */ [data-skin="meter"] .ti-home, [data-skin="meter"] .ti-briefcase, [data-skin="meter"] .ti-star, [data-skin="meter"] .ti-bookmark, [data-skin="meter"] .ti-bookmark-plus, [data-skin="meter"] .ti-current-location, [data-skin="meter"] .ti-scooter, [data-skin="meter"] .ti-car, [data-skin="meter"] .ti-route, [data-skin="meter"] .ti-chevron-left, [data-skin="meter"] .ti-chevron-down, [data-skin="meter"] .ti-share, [data-skin="meter"] .ti-flag, [data-skin="meter"] .ti-x, [data-skin="meter"] .ti-user, [data-skin="meter"] .ti-user-circle, [data-skin="meter"] .ti-user-check, [data-skin="meter"] .ti-check, [data-skin="meter"] .ti-circle-check, [data-skin="meter"] .ti-alert-triangle, [data-skin="meter"] .ti-alert-circle, [data-skin="meter"] .ti-trash, [data-skin="meter"] .ti-logout, [data-skin="meter"] .ti-history, [data-skin="meter"] .ti-wallet, [data-skin="meter"] .ti-send, [data-skin="meter"] .ti-refresh, [data-skin="meter"] .ti-file-text, [data-skin="meter"] .ti-printer, [data-skin="meter"] .ti-mail, [data-skin="meter"] .ti-copy, [data-skin="meter"] .ti-arrow-left, [data-skin="meter"] .ti-map-pin, [data-skin="meter"] .ti-phone, [data-skin="meter"] .ti-building-bank, [data-skin="meter"] .ti-device-laptop, [data-skin="meter"] .ti-lock, [data-skin="meter"] .ti-file-off { display: inline-block; width: 1em; height: 1em; background-color: currentColor; vertical-align: -0.125em; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } [data-skin="meter"] .ti-home::before, [data-skin="meter"] .ti-briefcase::before, [data-skin="meter"] .ti-star::before, [data-skin="meter"] .ti-bookmark::before, [data-skin="meter"] .ti-bookmark-plus::before, [data-skin="meter"] .ti-current-location::before, [data-skin="meter"] .ti-scooter::before, [data-skin="meter"] .ti-car::before, [data-skin="meter"] .ti-route::before, [data-skin="meter"] .ti-chevron-left::before, [data-skin="meter"] .ti-chevron-down::before, [data-skin="meter"] .ti-share::before, [data-skin="meter"] .ti-flag::before, [data-skin="meter"] .ti-x::before, [data-skin="meter"] .ti-user::before, [data-skin="meter"] .ti-user-circle::before, [data-skin="meter"] .ti-user-check::before, [data-skin="meter"] .ti-check::before, [data-skin="meter"] .ti-circle-check::before, [data-skin="meter"] .ti-alert-triangle::before, [data-skin="meter"] .ti-alert-circle::before, [data-skin="meter"] .ti-trash::before, [data-skin="meter"] .ti-logout::before, [data-skin="meter"] .ti-history::before, [data-skin="meter"] .ti-wallet::before, [data-skin="meter"] .ti-send::before, [data-skin="meter"] .ti-refresh::before, [data-skin="meter"] .ti-file-text::before, [data-skin="meter"] .ti-printer::before, [data-skin="meter"] .ti-mail::before, [data-skin="meter"] .ti-copy::before, [data-skin="meter"] .ti-arrow-left::before, [data-skin="meter"] .ti-map-pin::before, [data-skin="meter"] .ti-phone::before, [data-skin="meter"] .ti-building-bank::before, [data-skin="meter"] .ti-device-laptop::before, [data-skin="meter"] .ti-lock::before, [data-skin="meter"] .ti-file-off::before { content: '' !important; } [data-skin="meter"] .ti-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 11 12 4l8 7v9h-6v-6h-4v6H4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 11 12 4l8 7v9h-6v-6h-4v6H4z'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-briefcase { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3 7h18v13H3zM9 7V4h6v3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3 7h18v13H3zM9 7V4h6v3'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-star { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='miter'%3E%3Cpath d='M12 4l2.5 5.2 5.5.8-4 3.9 1 5.6-5-2.7-5 2.7 1-5.6-4-3.9 5.5-.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='miter'%3E%3Cpath d='M12 4l2.5 5.2 5.5.8-4 3.9 1 5.6-5-2.7-5 2.7 1-5.6-4-3.9 5.5-.8z'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-bookmark { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='miter'%3E%3Cpath d='M6 3h12v18l-6-5-6 5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='miter'%3E%3Cpath d='M6 3h12v18l-6-5-6 5z'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-bookmark-plus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 3h9v18l-4.5-4L5 21zM17 3v7M13.5 6.5h7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 3h9v18l-4.5-4L5 21zM17 3v7M13.5 6.5h7'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-current-location { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 1.5v2.5M12 20v2.5M22.5 12H20M4 12H1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 1.5v2.5M12 20v2.5M22.5 12H20M4 12H1.5'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-scooter { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 18v-6a6 6 0 0 1 6-6h2a6 6 0 0 1 6 6v6M3 18h18M11 6v12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 18v-6a6 6 0 0 1 6-6h2a6 6 0 0 1 6 6v6M3 18h18M11 6v12'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-car { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 18v-5l2-5h12l2 5v5M2 18h20M7 13h10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 18v-5l2-5h12l2 5v5M2 18h20M7 13h10'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-route { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 17l6-6 4 4 8-8M14 7h7v7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 17l6-6 4 4 8-8M14 7h7v7'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-chevron-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-chevron-down { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-arrow-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M20 12H4M10 6l-6 6 6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M20 12H4M10 6l-6 6 6 6'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-share { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 12v8h16v-8M12 16V3M7 8l5-5 5 5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 12v8h16v-8M12 16V3M7 8l5-5 5 5'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-flag { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 21V4h13l-2.5 4.5L18 13H5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 21V4h13l-2.5 4.5L18 13H5'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-x { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-user, [data-skin="meter"] .ti-user-circle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-user-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='10' cy='8' r='3.5'/%3E%3Cpath d='M3 20a7 7 0 0 1 12-4.9M15 19l2.5 2.5L22 17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='10' cy='8' r='3.5'/%3E%3Cpath d='M3 20a7 7 0 0 1 12-4.9M15 19l2.5 2.5L22 17'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 12l5 5 9-9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 12l5 5 9-9'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-circle-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-5'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-alert-triangle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M12 3L2 20h20zM12 10v4M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M12 3L2 20h20zM12 10v4M12 17h.01'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-alert-circle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16h.01'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-trash { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7v14h12V7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7v14h12V7'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-logout { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M14 8V4H4v16h10v-4M10 12h11M17 8l4 4-4 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M14 8V4H4v16h10v-4M10 12h11M17 8l4 4-4 4'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-history { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6v6l4 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6v6l4 3'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-wallet { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 7h18v13H3zM3 7l12-3v3M16 13h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 7h18v13H3zM3 7l12-3v3M16 13h3'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-send { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 12l18-8-6 18-3.5-7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 12l18-8-6 18-3.5-7z'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-refresh { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M20 11A8 8 0 0 0 6 7L4 9M4 13a8 8 0 0 0 14 4l2-2M4 4v5h5M20 20v-5h-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M20 11A8 8 0 0 0 6 7L4 9M4 13a8 8 0 0 0 14 4l2-2M4 4v5h5M20 20v-5h-5'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-file-text { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 3h9l5 5v13H5zM14 3v5h5M8 13h8M8 17h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 3h9l5 5v13H5zM14 3v5h5M8 13h8M8 17h5'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-file-off { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 3h9l5 5v13H5zM4 4l16 16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 3h9l5 5v13H5zM4 4l16 16'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-printer { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M7 9V3h10v6M4 9h16v8h-3M7 17H4V9M7 14h10v7H7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M7 9V3h10v6M4 9h16v8h-3M7 17H4V9M7 14h10v7H7z'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-mail { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 5h18v14H3zM3 6l9 7 9-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 5h18v14H3zM3 6l9 7 9-7'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-copy { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M9 9h11v11H9zM4 15V4h11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M9 9h11v11H9zM4 15V4h11'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-map-pin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 1 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 1 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-phone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 4h5l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v5h-2A16 16 0 0 1 4 6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 4h5l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v5h-2A16 16 0 0 1 4 6z'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-building-bank { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 10l9-6 9 6M5 10v9M19 10v9M9 10v9M15 10v9M3 21h18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 10l9-6 9 6M5 10v9M19 10v9M9 10v9M15 10v9M3 21h18'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-device-laptop { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 5h14v11H5zM2 19h20'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 5h14v11H5zM2 19h20'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-lock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); } /* ───────────────────────────────────────────── ACCOUNT (/account/) and COMPLAINT (/complaint/) These pages are not per-city, so they cannot read a city's skin flag. app.js records the skin of the last city page visited and those two pages apply it, which keeps a Mumbai visitor on the original look end to end and moves everyone over automatically as the flag rolls out. Until then the attribute is simply absent and none of this applies. ───────────────────────────────────────────── */ [data-skin="meter"] .acc-main { padding-bottom: 28px; } [data-skin="meter"] .acc-back-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-dim); min-height: 44px; display: inline-flex; align-items: center; gap: 7px; } [data-skin="meter"] .acc-back-link:hover { color: var(--m-amber); } /* Signed-out card */ [data-skin="meter"] .acc-state { color: var(--m-text); } [data-skin="meter"] .acc-signin-card { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 5px; } [data-skin="meter"] .acc-signin-icon { color: var(--m-amber); } [data-skin="meter"] .acc-signin-card h1 { font-family: var(--font-mono); font-size: 17px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-text); } [data-skin="meter"] .acc-sub { color: var(--m-dim); } [data-skin="meter"] .acc-oauth-btn { min-height: 48px; border-radius: 3px; background: var(--m-slot); border: 1px solid var(--m-line); color: var(--m-text); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; } [data-skin="meter"] .acc-oauth-btn:hover { border-color: var(--m-amber); color: var(--m-amber); } [data-skin="meter"] .acc-divider { color: var(--m-dim); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; } [data-skin="meter"] .acc-divider span { background: var(--m-bg); } [data-skin="meter"] .acc-field label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-dim); } [data-skin="meter"] .acc-field input { min-height: 50px; font-size: 16px; border-radius: 4px; background: var(--m-slot); border: 1px solid var(--m-line); border-top-color: #0a0a09; color: var(--m-text); } [data-skin="meter"] .acc-field input:focus { border-color: var(--m-amber); box-shadow: 0 0 0 2px rgba(255,176,32,0.22); } [data-skin="meter"] .acc-submit { min-height: 52px; border-radius: 4px; background: var(--m-amber); color: #0e0e0d; font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 3px 0 var(--m-amber-dk); } [data-skin="meter"] .acc-link { color: var(--m-amber); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; min-height: 44px; } [data-skin="meter"] .acc-msg { color: var(--m-dim); font-family: var(--font-mono); font-size: 11.5px; } [data-skin="meter"] .acc-msg--error { color: #ff8c8a; } [data-skin="meter"] .acc-msg--ok { color: var(--m-green); } /* Profile strip */ [data-skin="meter"] .acc-profile { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 5px; } [data-skin="meter"] .acc-profile h1 { font-family: var(--font-mono); font-size: 16px; font-weight: 500; letter-spacing: 0.05em; color: var(--m-text); } [data-skin="meter"] .acc-email-display, [data-skin="meter"] .acc-member-since { color: var(--m-dim); font-family: var(--font-mono); font-size: 11.5px; } [data-skin="meter"] .acc-avatar--fallback { background: var(--m-slot); border: 1px solid var(--m-line); color: var(--m-amber); } [data-skin="meter"] .acc-signout-btn { min-height: 44px; border-radius: 3px; background: transparent; border: 1px solid var(--m-line); color: var(--m-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } [data-skin="meter"] .acc-signout-btn:hover { border-color: var(--m-amber); color: var(--m-amber); } /* The ledger: the one big readout on this page */ [data-skin="meter"] .acc-ledger-card { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 5px; } [data-skin="meter"] .acc-ledger-card--hero { background: var(--m-red-bg); border-color: var(--m-red-line); } [data-skin="meter"] .acc-ledger-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-dim); } [data-skin="meter"] .acc-ledger-card--hero .acc-ledger-label { color: #c98b89; } [data-skin="meter"] .acc-ledger-value { font-family: var(--font-mono); color: var(--m-text); } [data-skin="meter"] .acc-ledger-card--hero .acc-ledger-value { color: var(--m-red); text-shadow: 0 0 18px rgba(255,77,74,0.3); } [data-skin="meter"] .acc-ledger-sub { font-family: var(--font-mono); font-size: 11px; color: var(--m-dim); } [data-skin="meter"] .acc-ledger-card--hero .acc-ledger-sub { color: #c98b89; } /* Tiles, panels, tables */ [data-skin="meter"] .acc-tile { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 4px; } [data-skin="meter"] .acc-tile-icon { color: var(--m-amber); } [data-skin="meter"] .acc-tile-value { font-family: var(--font-mono); color: var(--m-text); } [data-skin="meter"] .acc-tile-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-dim); } [data-skin="meter"] .acc-panel { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 5px; } [data-skin="meter"] .acc-panel-header { border-bottom: 1px solid var(--m-line-soft); } [data-skin="meter"] .acc-panel-header h2 { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-text); } [data-skin="meter"] .acc-panel-header h2 .ti { color: var(--m-amber); } [data-skin="meter"] .acc-panel-hint { color: var(--m-dim); font-size: 11.5px; } [data-skin="meter"] .acc-empty { color: var(--m-dim); } [data-skin="meter"] .acc-table { font-family: var(--font-mono); font-size: 12px; } [data-skin="meter"] .acc-table th { color: var(--m-dim); border-bottom-color: var(--m-line); font-size: 10px; letter-spacing: 0.1em; } [data-skin="meter"] .acc-table td { color: var(--m-text); border-bottom-color: var(--m-line-soft); } [data-skin="meter"] .acc-route { color: var(--m-dim); } [data-skin="meter"] .acc-chip { background: var(--m-slot); border: 1px solid var(--m-line); color: var(--m-dim); border-radius: 2px; font-family: var(--font-mono); font-size: 10px; } [data-skin="meter"] .acc-chip--night { background: var(--m-slot); color: var(--m-amber); border-color: var(--m-amber); } [data-skin="meter"] .acc-plate { color: var(--m-amber); } [data-skin="meter"] .acc-over { color: var(--m-red); } [data-skin="meter"] .acc-ok { color: var(--m-green); } [data-skin="meter"] .acc-row-btn { min-height: 36px; border-radius: 3px; border: 1px solid var(--m-line); color: var(--m-dim); background: transparent; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; } [data-skin="meter"] .acc-row-btn:hover { border-color: var(--m-amber); color: var(--m-amber); } /* Saved places */ [data-skin="meter"] .acc-place { background: var(--m-slot); border: 1px solid var(--m-line); border-radius: 4px; } [data-skin="meter"] .acc-place-icon.is-home, [data-skin="meter"] .acc-place-icon.is-work, [data-skin="meter"] .acc-place-icon.is-other { color: var(--m-amber); } [data-skin="meter"] .acc-place-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-text); } [data-skin="meter"] .acc-place-address, [data-skin="meter"] .acc-place-city { color: var(--m-dim); } [data-skin="meter"] .acc-place-del { min-width: 44px; min-height: 44px; color: var(--m-dim); } [data-skin="meter"] .acc-place-del:hover { color: var(--m-red); } /* Danger zone */ [data-skin="meter"] .acc-panel--danger { border-color: var(--m-red-line); } [data-skin="meter"] .acc-danger-body p { color: var(--m-dim); } [data-skin="meter"] .acc-danger-btn { min-height: 46px; border-radius: 3px; border: 1px solid var(--m-red-line); color: var(--m-red); background: transparent; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } [data-skin="meter"] .acc-danger-btn:hover:not(:disabled) { background: var(--m-red); color: #0e0e0d; } [data-skin="meter"] .acc-confirm input { min-height: 46px; font-size: 16px; background: var(--m-slot); border: 1px solid var(--m-line); color: var(--m-text); border-radius: 3px; } /* ── The complaint letter ── The letter itself stays on paper. It is a document meant to be printed and handed to an RTO office; a black sheet with amber type would be both unreadable in print and far less credible across a counter. Only the page around it changes. */ [data-skin="meter"] .cmp-fields { padding: 16px; } [data-skin="meter"] .cmp-action { min-height: 50px; border-radius: 3px; background: var(--m-slot); border: 1px solid var(--m-line); color: var(--m-text); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } [data-skin="meter"] .cmp-action:hover { border-color: var(--m-amber); background: var(--m-slot); color: var(--m-amber); } [data-skin="meter"] .cmp-action--primary { background: var(--m-amber); border-color: var(--m-amber); color: #0e0e0d; box-shadow: 0 3px 0 var(--m-amber-dk); } [data-skin="meter"] .cmp-action--primary:hover { background: #ffc75a; border-color: #ffc75a; color: #0e0e0d; } [data-skin="meter"] .cmp-action-msg { color: var(--m-dim); font-family: var(--font-mono); font-size: 11px; } [data-skin="meter"] .cmp-letter { border-color: var(--m-line); border-radius: 5px; } [data-skin="meter"] .cmp-contacts { padding: 16px; } @media (min-width: 760px) { [data-skin="meter"] .acc-ledger-value { font-size: 2.1rem; } } /* The tariff table and the FAQ, explicitly — the two the screenshot caught. The token remap already fixes them; these set the striping and the hover state the skin actually wants. */ [data-skin="meter"] .tariff-table { background: transparent; } [data-skin="meter"] .tariff-table thead tr { background: var(--m-slot); } [data-skin="meter"] .tariff-table tbody tr { background: transparent; } [data-skin="meter"] .tariff-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.018); } [data-skin="meter"] .tariff-table tbody tr:hover { background: rgba(255,176,32,0.09); } [data-skin="meter"] .tariff-table td:nth-child(2) { color: var(--m-amber); } [data-skin="meter"] .faq-item { background: var(--m-panel); } [data-skin="meter"] .faq-q:hover { background: var(--m-slot); } [data-skin="meter"] .faq-item[open] { border-color: var(--m-amber); } [data-skin="meter"] .faq-q::after { color: var(--m-dim); } [data-skin="meter"] .faq-item[open] .faq-q::after { color: var(--m-amber); } [data-skin="meter"] .faq-a { border-top-color: var(--m-line-soft); } [data-skin="meter"] .faq-a strong { color: var(--m-text); } /* The city dropdown and the plate selects use the same tinted-state pattern, so they were pale for the same reason. */ [data-skin="meter"] .city-dropdown-panel { background: var(--m-panel); border-color: var(--m-line); } [data-skin="meter"] .cd-city-btn { color: var(--m-text); } [data-skin="meter"] .cd-city-btn:hover, [data-skin="meter"] .cd-city-btn.active { background: var(--m-slot); } [data-skin="meter"] .cd-city-name { color: var(--m-text); } [data-skin="meter"] .cd-city-state, [data-skin="meter"] .cd-panel-label, [data-skin="meter"] .cd-no-results { color: var(--m-dim); } [data-skin="meter"] .ss-input.has-value { background: var(--m-slot); border-color: var(--m-amber); color: var(--m-amber); } [data-skin="meter"] .ss-option:hover, [data-skin="meter"] .ss-option.selected { background: rgba(255,176,32,0.12); color: var(--m-amber); } [data-skin="meter"] .locate-btn:hover { background: rgba(255,176,32,0.12); } /* Verdict and confirmation states, now that the tints are dark. */ [data-skin="meter"] .verdict--ok { background: var(--m-panel); border-color: #1f5133; } [data-skin="meter"] .verdict--neutral { background: var(--m-panel); border-color: var(--m-line); } [data-skin="meter"] .feedback-thanks, [data-skin="meter"] .report-confirmation { background: #12301f; border-color: #1f5133; color: var(--m-green); } [data-skin="meter"] .feedback-btn--yes.selected { background: #12301f; color: var(--m-green); border-color: #1f5133; } /* The map tile canvas is the one surface that must stay light: Google renders its own imagery into it. */ [data-skin="meter"] .map-box { background: #1d1c1a; } /* ── Ride comparison (ride-compare.js) ── Its cards inherit --surface-2 and --green-lt, so the remap already re-grounds them; these fix the text that was set against the old pale tints, and the brand badges, whose white-on-brand sat at 3.4:1 even before this skin. */ [data-skin="meter"] .ride-compare-section { padding: 0; } [data-skin="meter"] .rc-card { background: var(--m-panel); border-color: var(--m-line); } [data-skin="meter"] .rc-card--winner { background: #12301f; border-color: #2f7d4f; } [data-skin="meter"] .rc-type { color: var(--m-dim); } [data-skin="meter"] .rc-card--winner .rc-type, [data-skin="meter"] .rc-card--winner .rc-surge-note { color: #a7dcbd; } [data-skin="meter"] .rc-surge-note { color: var(--m-dim); } [data-skin="meter"] .rc-cheapest-tag { background: var(--m-green); color: #06240f; } [data-skin="meter"] .rc-badge, [data-skin="meter"] .rc-open-btn { color: #11100e; font-weight: 700; } [data-skin="meter"] .rc-badge--meter { background: var(--m-slot); color: var(--m-text); border-color: var(--m-line); } /* ── Cross-promo cards ── The icons bring their own colour, so the card stays dark and lets them carry it. The CTA takes the amber of every other primary action on the page, so it reads as pressable in this skin too. */ [data-skin="meter"] .cross-promo-section { background: var(--m-bg); } [data-skin="meter"] .cross-promo-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--m-dim); } [data-skin="meter"] .promo-card { background: var(--m-panel); border-color: var(--m-line); border-radius: 5px; } [data-skin="meter"] .promo-card:hover { border-color: var(--m-amber); box-shadow: none; } [data-skin="meter"] .promo-title { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-text); } [data-skin="meter"] .promo-sub { color: var(--m-dim); } [data-skin="meter"] .promo-cta { border-radius: 3px; background: var(--m-amber); color: #0e0e0d; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } [data-skin="meter"] .promo-card:hover .promo-cta { background: #ffc75a; } /* The chevron the CTA uses. */ [data-skin="meter"] .ti-chevron-right { display: inline-block; width: 1em; height: 1em; background-color: currentColor; vertical-align: -0.125em; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); } [data-skin="meter"] .ti-chevron-right::before { content: '' !important; }