/* SOLEVA — design tokens, reset, typography, controls. * Edit brand colors, fonts and spacing here; every page reads these values. */ :root { /* Brand palette */ --graphite: #111315; --cool-white: #F5F7F6; --silver: #C7CBCB; --volt: #C7FF2E; --gray: #747B7C; --surface: #E8EBEA; /* Derived roles */ --ink: var(--graphite); --ink-2: #2A2E30; --ink-3: var(--gray); --line: #DCE0DF; --line-strong: #C2C7C6; --page: #FFFFFF; --panel: var(--cool-white); --volt-ink: #0E1A00; --danger: #B3261E; --success: #16714B; /* Shape rule: panels 12, pills 999, inputs 8. Nothing else. */ --r-panel: 12px; --r-pill: 999px; --r-input: 8px; --shell: 1680px; --gutter: clamp(1rem, 4vw, 4rem); --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 260ms; --dur-slow: 700ms; --shadow-sm: 0 1px 2px rgba(17, 19, 21, 0.06); --shadow-md: 0 10px 30px -18px rgba(17, 19, 21, 0.45); --shadow-lg: 0 30px 70px -40px rgba(17, 19, 21, 0.55); --header-h: 72px; } *, *::before, *::after { box-sizing: border-box; } /* `clip` (not `hidden`) keeps the off-canvas drawers from widening the page * without turning into a scroll container, which would break the * sticky header and the sticky filter/summary columns. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } body.no-scroll { overflow: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.03; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.75rem, 6vw, 5.25rem); } h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); } h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -0.02em; } h4 { font-size: 1.0625rem; letter-spacing: -0.01em; } p { margin: 0; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } table { border-collapse: collapse; width: 100%; } /* ---------- Focus ---------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--graphite); outline-offset: 3px; border-radius: 4px; } .dark-block :focus-visible { outline-color: var(--volt); } .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%); z-index: 200; background: var(--graphite); color: var(--cool-white); padding: 12px 20px; border-radius: 0 0 var(--r-input) var(--r-input); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; transition: transform var(--dur) var(--ease); } .skip-link:focus-visible { transform: translate(-50%, 0); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- Layout helpers ---------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(3.5rem, 7vw, 7rem); } .section-tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: clamp(1.75rem, 3vw, 3rem); } .section-head p { color: var(--ink-3); max-width: 46ch; } .eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; display: flex; align-items: flex-start; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 2px; margin-top: 0.62em; background: var(--volt); flex: none; } .eyebrow-plain::before { display: none; } .micro { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .lede { font-size: clamp(1rem, 1.2vw, 1.125rem); color: var(--ink-3); max-width: 58ch; } .muted { color: var(--ink-3); } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); } .dark-block { background: var(--graphite); color: var(--cool-white); } .dark-block .muted, .dark-block .eyebrow { color: #9AA1A2; } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--graphite); --btn-fg: var(--cool-white); --btn-bd: var(--graphite); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); text-align: center; } .btn i { font-size: 1.1em; } .btn:hover { --btn-bg: #000; --btn-bd: #000; transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-volt { --btn-bg: var(--volt); --btn-fg: var(--volt-ink); --btn-bd: var(--volt); } .btn-volt:hover { --btn-bg: #D6FF5C; --btn-bd: #D6FF5C; } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); } .btn-ghost:hover { --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bd: var(--graphite); } .btn-light { --btn-bg: var(--cool-white); --btn-fg: var(--graphite); --btn-bd: var(--cool-white); } .btn-light:hover { --btn-bg: #fff; --btn-bd: #fff; } .btn-outline-light { --btn-bg: transparent; --btn-fg: var(--cool-white); --btn-bd: rgba(245, 247, 246, 0.4); } .btn-outline-light:hover { --btn-bg: rgba(245, 247, 246, 0.12); --btn-bd: var(--cool-white); } .btn-sm { min-height: 40px; padding: 0 18px; font-size: 0.875rem; } .btn-lg { min-height: 56px; padding: 0 34px; font-size: 1rem; } .btn-block { width: 100%; } .btn:disabled, .btn[aria-disabled="true"] { --btn-bg: var(--surface); --btn-fg: #9AA1A2; --btn-bd: var(--line); cursor: not-allowed; transform: none; } .btn.is-loading { pointer-events: none; position: relative; color: transparent; } .btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid var(--btn-fg); border-top-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .link-underline { position: relative; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px; } .link-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transform: scaleX(1); transition: transform var(--dur) var(--ease); } .link-underline:hover::after { transform-origin: left; transform: scaleX(0.3); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--r-pill); color: var(--ink); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .icon-btn:hover { background: var(--surface); } .icon-btn i { font-size: 1.3rem; } /* ---------- Forms ---------- */ .field { display: grid; gap: 7px; } .field > label, .field-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .input, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], input[type="number"], select, textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-input); background: #fff; color: var(--ink); font: inherit; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } textarea { min-height: 130px; resize: vertical; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111315' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } .input:focus, input:focus, select:focus, textarea:focus { border-color: var(--graphite); box-shadow: 0 0 0 3px rgba(199, 255, 46, 0.5); } input::placeholder, textarea::placeholder { color: #9AA1A2; } input:disabled, select:disabled, textarea:disabled { background: var(--surface); color: #9AA1A2; cursor: not-allowed; } .field-error { display: none; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--danger); } .field.has-error .field-error { display: flex; } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); } .form-note { font-size: 0.8125rem; color: var(--ink-3); } .form-success { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-panel); background: rgba(22, 113, 75, 0.08); border: 1px solid rgba(22, 113, 75, 0.25); color: var(--success); font-size: 0.9375rem; } .form-success i { font-size: 1.25rem; flex: none; } .checkbox-row { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; color: var(--ink-3); } .checkbox-row input[type="checkbox"], .checkbox-row input[type="radio"] { width: 18px; height: 18px; min-height: 0; margin-top: 3px; flex: none; accent-color: var(--graphite); } /* ---------- Badges & chips ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--graphite); color: var(--cool-white); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .badge-volt { background: var(--volt); color: var(--volt-ink); } .badge-quiet { background: var(--surface); color: var(--ink-3); } .badge-low { background: #FFF0EE; color: var(--danger); } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: #fff; font-size: 0.8125rem; font-weight: 500; } .chip button { display: inline-flex; color: var(--ink-3); } .chip button:hover { color: var(--ink); } /* ---------- Rating ---------- */ .rating { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--ink-3); } .stars { display: inline-flex; color: var(--graphite); font-size: 0.8125rem; } /* ---------- Breadcrumb ---------- */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ink-3); padding-block: 20px 4px; } .breadcrumb a:hover { color: var(--ink); text-decoration: underline; } .breadcrumb i { font-size: 0.75rem; } .breadcrumb [aria-current] { color: var(--ink); font-weight: 500; } /* ---------- Page head ---------- */ .page-head { padding-block: clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem); } .page-head h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); } .page-head p { margin-top: 14px; } /* ---------- Motion ---------- */ .reveal { opacity: 0; transform: translateY(18px); } .reveal.in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .reveal-d1.in { transition-delay: 80ms; } .reveal-d2.in { transition-delay: 160ms; } .reveal-d3.in { transition-delay: 240ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } } /* ---------- Toast ---------- */ .toast-stack { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 120; display: grid; gap: 10px; width: min(340px, calc(100vw - 2rem)); pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-panel); background: var(--graphite); color: var(--cool-white); box-shadow: var(--shadow-lg); font-size: 0.875rem; pointer-events: auto; animation: toast-in 320ms var(--ease); } .toast i { font-size: 1.2rem; color: var(--volt); flex: none; } .toast a, .toast button.toast-action { color: var(--volt); font-weight: 600; text-decoration: underline; } .toast.out { animation: toast-out 240ms var(--ease) forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(12px); } } @keyframes toast-out { to { opacity: 0; transform: translateY(8px); } } /* ---------- Modal shell ---------- */ .modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2.5rem); background: rgba(17, 19, 21, 0.55); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); } .modal.open { opacity: 1; visibility: visible; } .modal-panel { position: relative; width: min(900px, 100%); max-height: min(86vh, 800px); overflow: auto; background: #fff; border-radius: var(--r-panel); box-shadow: var(--shadow-lg); transform: translateY(14px); transition: transform var(--dur) var(--ease); } .modal.open .modal-panel { transform: none; } .modal-narrow .modal-panel { width: min(600px, 100%); } .modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line); } .modal-close:hover { background: var(--surface); } /* ---------- Empty state ---------- */ .empty-state { display: grid; justify-items: center; gap: 14px; text-align: center; padding: clamp(3rem, 7vw, 5.5rem) var(--s3); border: 1px dashed var(--line-strong); border-radius: var(--r-panel); background: var(--panel); } .empty-state i { font-size: 2.25rem; color: var(--ink-3); } .empty-state p { color: var(--ink-3); max-width: 44ch; } /* ---------- Skeletons ---------- */ .skeleton { background: linear-gradient(90deg, #E4E7E6 25%, #EFF2F1 37%, #E4E7E6 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-input); } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } .skeleton-card { border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; background: #fff; } .skeleton-card .sk-img { aspect-ratio: 3 / 2; border-radius: 0; } .skeleton-card .sk-body { display: grid; gap: 10px; padding: 18px; } .skeleton-card .sk-line { height: 12px; } .skeleton-card .w25 { width: 25%; } .skeleton-card .w40 { width: 40%; } .skeleton-card .w70 { width: 70%; }