/* Large PHEV Comparator Design direction: automotive editorial. Light default with a warm amber accent; optional dark theme via [data-theme="dark"] on . */ :root { /* Light theme (default) — subtle cream */ --bg: #f5efe1; --surface: #fbf7ec; --elev: #efe8d7; --border: #e0d8c3; --border-strong: #c4b995; --text: #2a2620; --muted: #6b6252; --brass: #a8752a; /* deeper amber; AA on cream */ --brass-soft: #a8752a1a; --cyan: #1a7a95; --green: #147a48; --green-soft: #147a4814; --red: #b03a3a; --shadow: 0 8px 30px rgba(60, 45, 25, 0.08); --bg-gradient-a: #f0e4c8; --bg-gradient-b: #ece2ce; --radius: 14px; --radius-sm: 8px; --font-sans: 'Inter', system-ui, sans-serif; --font-display: 'Space Grotesk', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; color-scheme: light; } [data-theme="dark"] { --bg: #0b0f14; --surface: #131922; --elev: #1a222d; --border: #26313f; --border-strong: #38475a; --text: #e8ecf1; --muted: #93a0b0; --brass: #f2c14e; --brass-soft: #f2c14e22; --cyan: #7ad7f0; --green: #6ee7a3; --green-soft: #6ee7a322; --red: #ff8a8a; --shadow: 0 20px 60px rgba(0,0,0,0.45); --bg-gradient-a: #1b2a3d; --bg-gradient-b: #201a2a; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: radial-gradient(1200px 600px at 80% -10%, var(--bg-gradient-a) 0%, transparent 60%), radial-gradient(900px 500px at -10% 20%, var(--bg-gradient-b) 0%, transparent 55%), var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background-color .3s, color .3s; } a { color: var(--brass); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; } a:hover { border-bottom-color: var(--brass); } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; } h1 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.1; } h2 { font-size: 1.25rem; } p { margin: 0; } .muted { color: var(--muted); font-size: 0.9rem; } /* ---------- Header ---------- */ .top { display: flex; justify-content: space-between; align-items: center; padding: 20px 32px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: center; gap: 12px; color: var(--brass); } .brand-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text); letter-spacing: 0.02em; } .brand-sub { font-size: 0.78rem; color: var(--muted); } .topmeta { display: flex; gap: 8px; flex-wrap: wrap; } .pill { border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: 0.75rem; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.02em; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, color .15s, background .15s, transform .1s; padding: 0; } .theme-toggle:hover { border-color: var(--brass); color: var(--brass); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---------- Layout ---------- */ .wrap { max-width: 1240px; margin: 0 auto; padding: 40px 32px 80px; display: flex; flex-direction: column; gap: 32px; } /* ---------- Hero ---------- */ .hero { max-width: 780px; } .lede { color: var(--muted); font-size: 1.02rem; margin-top: 12px; } /* ---------- Panel ---------- */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); } .panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; } .panel-head h2 { margin-bottom: 4px; } .ghost { background: transparent; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; cursor: pointer; font-family: var(--font-sans); transition: all .15s; } .ghost:hover { color: var(--text); border-color: var(--brass); } /* ---------- Sliders ---------- */ .sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; margin-bottom: 24px; } .slider-row { display: flex; flex-direction: column; gap: 6px; } .slider-row label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; } .slider-row .lbl-name { color: var(--text); font-weight: 500; } .slider-row .lbl-value { font-family: var(--font-mono); color: var(--brass); font-size: 0.9rem; background: var(--brass-soft); border-radius: 4px; padding: 1px 8px; min-width: 32px; text-align: center; } .slider-row input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; background: linear-gradient(to right, var(--brass) var(--pct, 50%), var(--elev) var(--pct, 50%)); border-radius: 999px; outline: none; cursor: pointer; } .slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: var(--text); border: 2px solid var(--brass); border-radius: 50%; cursor: grab; transition: transform .1s; } .slider-row input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); } .slider-row input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--text); border: 2px solid var(--brass); border-radius: 50%; cursor: grab; } .slider-hint { font-size: 0.72rem; color: var(--muted); } /* ---------- Recommendation ---------- */ .recommendation { border-top: 1px dashed var(--border); padding-top: 22px; display: flex; flex-direction: column; gap: 16px; } .rec-headline { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .rec-label { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.15em; text-transform: uppercase; font-family: var(--font-mono); } .rec-car { font-family: var(--font-display); font-size: 1.6rem; color: var(--brass); font-weight: 600; } .rec-scores { display: grid; grid-template-columns: 1fr; gap: 10px; } .score-row { display: grid; grid-template-columns: 28px 180px 1fr 50px; align-items: center; gap: 10px; padding: 3px 0; } .score-row.top { padding: 6px 8px; margin: 2px -8px; border-radius: 8px; background: linear-gradient(90deg, var(--green-soft), transparent 60%); } .score-rank { font-family: var(--font-mono); color: var(--muted); font-size: 0.8rem; text-align: center; } .score-row.top .score-rank { color: var(--green); font-weight: 600; } .score-name { font-size: 0.88rem; } .score-track { background: var(--elev); border-radius: 999px; height: 7px; overflow: hidden; position: relative; } .score-fill { height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.2,.7,.2,1); background: var(--brass); } .score-fill.winner { background: linear-gradient(90deg, var(--green), var(--cyan)); } .score-value { font-family: var(--font-mono); text-align: right; color: var(--muted); font-size: 0.85rem; } @media (max-width: 620px) { .score-row { grid-template-columns: 22px 100px 1fr 42px; gap: 6px; } .score-name { font-size: 0.8rem; } } /* ---------- Cards ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .car-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; transition: opacity .3s, transform .15s; min-width: 0; } .car-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent-color, var(--brass)); } .car-card.dimmed { opacity: 0.35; } .car-card .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .card-title { min-width: 0; flex: 1; } .car-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.2; } .car-tag { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-mono); margin-top: 4px; } .car-trim { font-size: 0.72rem; color: var(--text); opacity: 0.7; margin-top: 3px; } .car-price { text-align: right; flex-shrink: 0; } .price-value { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--brass); white-space: nowrap; } .price-label { font-size: 0.7rem; color: var(--muted); font-family: var(--font-mono); } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; } .stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .stat-label { font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .stat-value { font-family: var(--font-mono); font-size: 0.88rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-value .u { color: var(--muted); font-size: 0.75em; margin-left: 2px; } .win-badge { display: inline-block; font-size: 0.55rem; color: var(--green); background: var(--green-soft); border-radius: 3px; padding: 0 4px; margin-left: 3px; font-family: var(--font-mono); vertical-align: middle; letter-spacing: 0.02em; } /* ---------- Filters ---------- */ .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; } .filter-row { display: flex; flex-direction: column; gap: 4px; } .filter-row label { display: flex; justify-content: space-between; font-size: 0.82rem; } .filter-row .fval { font-family: var(--font-mono); color: var(--cyan); font-size: 0.82rem; } .filter-row input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; background: linear-gradient(to right, var(--cyan) var(--pct, 0%), var(--elev) var(--pct, 0%)); border-radius: 999px; } .filter-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--text); border: 2px solid var(--cyan); border-radius: 50%; cursor: grab; } .filter-row input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: var(--text); border: 2px solid var(--cyan); border-radius: 50%; cursor: grab; } .filter-row.select-row select { background: var(--elev); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 6px 10px; font-family: var(--font-sans); font-size: 0.85rem; cursor: pointer; } /* ---------- Table ---------- */ .table-scroll { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border); } table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 900px; } th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-family: var(--font-display); font-weight: 500; color: var(--text); font-size: 0.82rem; cursor: pointer; user-select: none; background: var(--elev); white-space: nowrap; transition: background .15s; border-bottom: 1px solid var(--border-strong); } th.spec-col { cursor: default; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; } th:hover:not(.spec-col) { background: var(--surface); } .th-car { display: flex; align-items: center; gap: 6px; font-weight: 600; } .th-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .th-trim { font-size: 0.66rem; color: var(--muted); font-family: var(--font-mono); margin-top: 3px; font-weight: 400; letter-spacing: 0; text-transform: none; } tbody tr { transition: background .15s; } tbody tr:hover { background: var(--elev); } td.spec-name { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-display); background: var(--surface); position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--border); white-space: nowrap; } tbody tr:hover td.spec-name { background: var(--elev); } td.value { font-family: var(--font-mono); font-size: 0.88rem; white-space: nowrap; } td.value.best { color: var(--green); background: linear-gradient(90deg, var(--green-soft), transparent); font-weight: 600; } td.value .u { color: var(--muted); font-size: 0.78em; margin-left: 2px; } .fine { font-size: 0.75rem; color: var(--muted); margin-top: 12px; } .unit-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; } .unit-toggle button { background: transparent; color: var(--muted); border: none; padding: 6px 14px; font-family: var(--font-sans); font-size: 0.82rem; cursor: pointer; transition: all .15s; } .unit-toggle button.active { background: var(--brass); color: var(--surface); font-weight: 600; } /* ---------- Practical differences ---------- */ .practicals { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .practical-card { background: var(--elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; } .practical-card h3 { font-size: 0.95rem; margin-bottom: 8px; color: var(--brass); font-family: var(--font-display); } .practical-card p { font-size: 0.88rem; color: var(--text); line-height: 1.55; } /* ---------- Sources & foot ---------- */ .sources ul { padding-left: 20px; margin: 8px 0 0; } .sources li { color: var(--muted); font-size: 0.85rem; margin-bottom: 8px; line-height: 1.5; } .foot { border-top: 1px solid var(--border); padding-top: 20px; color: var(--muted); font-size: 0.8rem; } /* ---------- Responsive ---------- */ @media (max-width: 640px) { .top { padding: 14px 18px; flex-direction: column; align-items: flex-start; gap: 10px; } .wrap { padding: 24px 18px 60px; gap: 24px; } .panel { padding: 20px; } .panel-head { flex-direction: column; gap: 10px; } .stat-grid { grid-template-columns: 1fr 1fr; } }