/* * The Venta: design tokens. * * Brand palette from the brand brief, arranged as Material 3 color roles. * Components reference role variables only; raw hex lives in this file. * Every text pairing below was contrast-checked (WCAG 2.x, AA or better). * * Dark mode follows the OS unless pins it. * Dark overrides are screen-only: print is always black on white. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2"); } :root { color-scheme: light dark; /* Venta terracotta ramp */ --venta-50: #FFF6F2; --venta-100: #FDE9E0; --venta-200: #F8CDBB; --venta-300: #F0A486; --venta-400: #E47550; --venta-500: #C94F2D; --venta-600: #B83F21; --venta-700: #96321D; --venta-800: #782C20; --venta-900: #63281F; --venta-950: #36120C; /* M3 color roles: light */ --md-sys-color-primary: var(--venta-600); --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: var(--venta-100); --md-sys-color-on-primary-container: var(--venta-800); --md-sys-color-secondary: #1D1D1F; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: var(--venta-100); --md-sys-color-on-secondary-container: var(--venta-800); --md-sys-color-tertiary: var(--md-sys-color-primary); --md-sys-color-on-tertiary: var(--md-sys-color-on-primary); --md-sys-color-surface: #FAFAF8; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #F5F4F1; --md-sys-color-surface-container: #F5F4F1; --md-sys-color-surface-container-high: #ECEAE6; --md-sys-color-surface-container-highest: #ECEAE6; --md-sys-color-on-surface: #1D1D1F; --md-sys-color-on-surface-variant: #6E6E73; --md-sys-color-outline: #85847F; /* fields, checkboxes, radios, switch */ --md-sys-color-outline-variant: #E5E5E2; /* cards, dividers */ --md-sys-color-inverse-surface: #1C1C1B; --md-sys-color-inverse-on-surface: #F5F5F2; --md-sys-color-inverse-primary: var(--venta-300); --md-sys-color-scrim: rgb(17 17 16 / .45); /* Text tiers from the brief (tertiary is decoration only: 3.12:1) */ --venta-text-tertiary: #8E8E93; --venta-text-disabled: #AEAEB2; --venta-border-strong: #D1D1CD; /* secondary + segmented buttons */ /* Filled (primary) buttons */ --venta-filled-bg: var(--venta-600); --venta-filled-bg-hover: var(--venta-700); --venta-filled-bg-pressed: var(--venta-800); --venta-filled-label: #FFFFFF; /* Status: base (icons, large text) / container / on-container (text) */ --venta-success: #248A3D; --venta-success-container: #EAF6ED; --venta-on-success-container: #1B6E30; --venta-warning: #C77C08; --venta-warning-container: #FFF6E1; --venta-on-warning-container: #8A5300; --venta-error: #D92D20; --venta-error-container: #FDECEC; --venta-on-error-container: #B42318; --venta-info: #3478F6; --venta-info-container: #EBF2FF; --venta-on-info-container: #1D5FD6; /* Auction tag: rare, .tag only (LOT / Bidder #). Not an M3 role. */ --venta-tag-bg: #F2C94C; --venta-tag-soft: #FFF7D6; --venta-tag-text: #5C4700; /* Typography */ --venta-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; --venta-tracking-tight: -0.02em; --md-sys-typescale-display-large: 600 3.5625rem/1.12 var(--venta-font); --md-sys-typescale-display-medium: 600 2.8125rem/1.16 var(--venta-font); --md-sys-typescale-headline-large: 600 2rem/1.25 var(--venta-font); --md-sys-typescale-headline-medium: 600 1.75rem/1.29 var(--venta-font); --md-sys-typescale-title-large: 600 1.375rem/1.27 var(--venta-font); --md-sys-typescale-title-medium: 600 1rem/1.5 var(--venta-font); --md-sys-typescale-body-large: 400 1.125rem/1.5 var(--venta-font); --md-sys-typescale-body-medium: 400 1rem/1.5 var(--venta-font); --md-sys-typescale-label-large: 500 1rem/1.25 var(--venta-font); --md-sys-typescale-label-medium: 500 .875rem/1.3 var(--venta-font); --md-sys-typescale-label-small: 500 .75rem/1.33 var(--venta-font); /* Shape: the brief's radii, not M3 defaults */ --venta-radius-sm: 8px; /* chips, icon buttons, tooltips */ --venta-radius-md: 12px; /* buttons, fields, segmented, menus, snackbars */ --venta-radius-lg: 16px; /* cards */ --venta-radius-xl: 20px; /* dialogs, sheets */ --venta-radius-full: 999px;/* pills, badges, nav indicator, switch */ /* Elevation: borders + tonal surfaces; one overlay shadow in light mode */ --venta-shadow-overlay: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .08); /* Sizing (older users): visible heights */ --venta-target: 48px; --venta-target-lg: 56px; --venta-chip-h: 40px; /* Motion: M3 baseline easing only */ --md-sys-motion-easing-standard: cubic-bezier(.2, 0, 0, 1); --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1); --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(.3, 0, .8, .15); --md-sys-motion-duration-short: 200ms; --md-sys-motion-duration-medium: 400ms; /* Focus: a real outline (5.33:1); the brief's halo is extra, fields only */ --venta-focus-outline: 2px solid var(--md-sys-color-primary); --venta-focus-halo: 0 0 0 3px rgb(184 63 33 / .22); /* Layout widths from the brief */ --venta-width-content: 1240px; --venta-width-reading: 720px; --venta-width-dashboard: 1440px; --venta-gutter: clamp(16px, 4vw, 32px); } /* Dark roles. Primary becomes venta-400 for text/icons/focus; filled buttons use venta-500 + white (4.53:1). Never white on venta-400. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --md-sys-color-primary: var(--venta-400); --md-sys-color-on-primary: #1D1D1F; --md-sys-color-primary-container: var(--venta-900); --md-sys-color-on-primary-container: var(--venta-100); --md-sys-color-secondary: #F5F5F2; --md-sys-color-on-secondary: #1D1D1F; --md-sys-color-secondary-container: var(--venta-900); --md-sys-color-on-secondary-container: var(--venta-100); --md-sys-color-surface: #111110; --md-sys-color-surface-container-lowest: #1C1C1B; --md-sys-color-surface-container-low: #242422; --md-sys-color-surface-container: #242422; --md-sys-color-surface-container-high: #2C2C29; --md-sys-color-surface-container-highest: #2C2C29; --md-sys-color-on-surface: #F5F5F2; --md-sys-color-on-surface-variant: #AFAFAC; --md-sys-color-outline: #7A7A76; --md-sys-color-outline-variant: #343431; --md-sys-color-inverse-surface: #F5F5F2; --md-sys-color-inverse-on-surface: #1D1D1F; --md-sys-color-inverse-primary: var(--venta-600); --venta-text-tertiary: #8C8C88; --venta-border-strong: #484844; --venta-filled-bg: var(--venta-500); --venta-filled-bg-hover: var(--venta-600); --venta-filled-bg-pressed: var(--venta-700); --venta-success-container: rgb(48 161 78 / .16); --venta-on-success-container: #5BCB77; --venta-warning-container: rgb(233 162 59 / .16); --venta-on-warning-container: #E9A23B; --venta-error-container: rgb(240 68 56 / .16); --venta-on-error-container: #FF7A70; --venta-info-container: rgb(94 155 255 / .16); --venta-on-info-container: #5E9BFF; --venta-tag-bg: #3E3823; --venta-tag-text: #F2C94C; --venta-shadow-overlay: none; } } @media screen { :root[data-theme="dark"] { --md-sys-color-primary: var(--venta-400); --md-sys-color-on-primary: #1D1D1F; --md-sys-color-primary-container: var(--venta-900); --md-sys-color-on-primary-container: var(--venta-100); --md-sys-color-secondary: #F5F5F2; --md-sys-color-on-secondary: #1D1D1F; --md-sys-color-secondary-container: var(--venta-900); --md-sys-color-on-secondary-container: var(--venta-100); --md-sys-color-surface: #111110; --md-sys-color-surface-container-lowest: #1C1C1B; --md-sys-color-surface-container-low: #242422; --md-sys-color-surface-container: #242422; --md-sys-color-surface-container-high: #2C2C29; --md-sys-color-surface-container-highest: #2C2C29; --md-sys-color-on-surface: #F5F5F2; --md-sys-color-on-surface-variant: #AFAFAC; --md-sys-color-outline: #7A7A76; --md-sys-color-outline-variant: #343431; --md-sys-color-inverse-surface: #F5F5F2; --md-sys-color-inverse-on-surface: #1D1D1F; --md-sys-color-inverse-primary: var(--venta-600); --venta-text-tertiary: #8C8C88; --venta-border-strong: #484844; --venta-filled-bg: var(--venta-500); --venta-filled-bg-hover: var(--venta-600); --venta-filled-bg-pressed: var(--venta-700); --venta-success-container: rgb(48 161 78 / .16); --venta-on-success-container: #5BCB77; --venta-warning-container: rgb(233 162 59 / .16); --venta-on-warning-container: #E9A23B; --venta-error-container: rgb(240 68 56 / .16); --venta-on-error-container: #FF7A70; --venta-info-container: rgb(94 155 255 / .16); --venta-on-info-container: #5E9BFF; --venta-tag-bg: #3E3823; --venta-tag-text: #F2C94C; --venta-shadow-overlay: none; } } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-medium); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { letter-spacing: var(--venta-tracking-tight); } a { color: var(--md-sys-color-primary); } p a, li a, .prose a { text-decoration: underline; text-underline-offset: .15em; } :focus-visible { outline: var(--venta-focus-outline); outline-offset: 2px; } img, svg { max-width: 100%; } .money, .paddle, .lot, .tabular { font-variant-numeric: tabular-nums; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Auction tag chip: the one place the tag yellow appears */ .tag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; border-radius: var(--venta-radius-sm); background: var(--venta-tag-bg); color: var(--venta-tag-text); font: var(--md-sys-typescale-label-medium); letter-spacing: .02em; font-variant-numeric: tabular-nums; } /* Status pill: container + on-container text + icon + a word, never color alone */ .status { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px 4px 8px; border-radius: var(--venta-radius-full); font: var(--md-sys-typescale-label-large); } .status svg { width: 20px; height: 20px; flex: none; fill: currentColor; } .status--success { background: var(--venta-success-container); color: var(--venta-on-success-container); } .status--warning { background: var(--venta-warning-container); color: var(--venta-on-warning-container); } .status--error { background: var(--venta-error-container); color: var(--venta-on-error-container); } .status--info { background: var(--venta-info-container); color: var(--venta-on-info-container); } /* Buttons (M3 filled / outlined, brief radii and colors) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--venta-target); padding: 0 24px; border-radius: var(--venta-radius-md); border: 1px solid transparent; font: var(--md-sys-typescale-label-large); text-decoration: none; cursor: pointer; transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard); } .btn svg { width: 20px; height: 20px; fill: currentColor; } .btn--filled { background: var(--venta-filled-bg); color: var(--venta-filled-label); } .btn--filled:hover { background: var(--venta-filled-bg-hover); } .btn--filled:active { background: var(--venta-filled-bg-pressed); } .btn--outlined { background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface); border-color: var(--venta-border-strong); } .btn--outlined:hover { background: var(--md-sys-color-surface-container-low); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } @media print { :root { color-scheme: light; } body { background: #FFFFFF; color: #000000; } a { color: #000000; } }