/* ============================================================ CALCULATOR.CSS — Máy tính số lượng đèn (shortcode [ecolux_calculator]) Ecolux Lighting — v1.16.0 ------------------------------------------------------------ Dựa trên styles.css nguồn (bố cục + responsive GIỮ NGUYÊN) nhưng thay toàn bộ màu/spacing/radius/bóng/typography bằng SEMANTIC TOKEN Ecolux (tokens.css). Vì chỉ dùng semantic alias (--color-surface, --color-text, --color-primary…) nên DARK MODE tự động lan toả khi — KHÔNG cần khối override riêng, KHÔNG hardcode màu. Font: var(--font-sans) = Source Sans 3. Mọi selector NEO dưới .lighting-calculator để module cô lập, không rò rỉ ra template/khối nào khác đang chạy. README luật 6 CHO PHÉP đổi CSS (không đổi công thức trong calculator.js). ============================================================ */ .lighting-calculator { width: min(100%, 840px); margin-inline: auto; padding: var(--space-7) var(--space-6) var(--space-8); background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); color: var(--color-text); font-family: var(--font-sans); } .lighting-calculator *, .lighting-calculator *::before, .lighting-calculator *::after { box-sizing: border-box; } .lighting-calculator button, .lighting-calculator input, .lighting-calculator select { font: inherit; } /* ── Intro ─────────────────────────────────────────────── */ .lighting-calculator .calculator-intro { padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border-subtle); } .lighting-calculator .calculator-intro h2 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: clamp(1.25rem, 2.7vw, 1.75rem); font-weight: var(--font-bold); line-height: var(--leading-tight); color: var(--color-text-heading); } .lighting-calculator .calculator-intro p { margin: var(--space-1) 0; line-height: var(--leading-normal); } .lighting-calculator .loss-note { color: var(--color-text-muted); } .lighting-calculator .loss-note strong { color: var(--color-text); } /* ── Layout ────────────────────────────────────────────── */ .lighting-calculator .calculator-layout { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(255px, 1fr); gap: var(--space-6); margin-top: var(--space-6); align-items: start; } .lighting-calculator .calculator-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } .lighting-calculator .field { min-width: 0; } .lighting-calculator .field-full { grid-column: 1 / -1; } .lighting-calculator .field label, .lighting-calculator .label-row { display: block; margin-bottom: var(--space-2); font-weight: var(--font-semibold); } .lighting-calculator .label-row { display: flex; justify-content: space-between; gap: var(--space-3); } .lighting-calculator .label-row label { margin: 0; } .lighting-calculator .label-row output { color: var(--color-text-muted); } /* ── Controls ──────────────────────────────────────────── */ .lighting-calculator .field input[type="number"], .lighting-calculator .field select { width: 100%; height: 42px; padding: 0 var(--space-3); color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .lighting-calculator .field input:focus, .lighting-calculator .field select:focus, .lighting-calculator .calculate-button:focus-visible { border-color: var(--color-border-focus); box-shadow: 0 0 0 3px var(--color-primary-subtle); } .lighting-calculator .field input[type="range"] { width: 100%; accent-color: var(--color-primary); } .lighting-calculator .field small { display: block; margin-top: var(--space-2); color: var(--color-text-muted); line-height: var(--leading-snug); } /* ── CTA ───────────────────────────────────────────────── */ .lighting-calculator .calculate-button { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 42px; border: 0; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-primary-on); cursor: pointer; font-weight: var(--font-semibold); transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .lighting-calculator .calculate-button:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-amber); } .lighting-calculator .calculate-button:active { background: var(--color-primary-active); transform: translateY(1px); } .lighting-calculator .form-error { grid-column: 1 / -1; min-height: 1.25em; margin: calc(var(--space-2) * -1) 0 0; color: var(--color-danger); font-weight: var(--font-medium); } /* ── Results ───────────────────────────────────────────── */ .lighting-calculator .results { display: grid; gap: var(--space-3); } .lighting-calculator .result-card { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); } .lighting-calculator .result-card-primary { background: var(--color-primary-subtle); border-color: var(--color-primary); } .lighting-calculator .result-label { color: var(--color-text-muted); } .lighting-calculator .result-value { font-size: var(--text-2xl); font-weight: var(--font-bold); line-height: var(--leading-tight); color: var(--color-text-heading); } .lighting-calculator .result-card small { color: var(--color-text); } /* ── Responsive (GIỮ NGUYÊN ngưỡng của nguồn) ──────────── */ @media (max-width: 680px) { .lighting-calculator { padding-inline: var(--space-4); } .lighting-calculator .calculator-layout { grid-template-columns: 1fr; } .lighting-calculator .results { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lighting-calculator .result-card-primary { grid-column: 1 / -1; } } @media (max-width: 440px) { .lighting-calculator .calculator-form, .lighting-calculator .results { grid-template-columns: 1fr; } .lighting-calculator .field-full, .lighting-calculator .calculate-button, .lighting-calculator .form-error, .lighting-calculator .result-card-primary { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .lighting-calculator *, .lighting-calculator *::before, .lighting-calculator *::after { transition: none !important; scroll-behavior: auto !important; } }