/* ========================================================================== TENANT: Elite Dressage Pony Sales Site: https://www.elitedressageponysales.nl Slug: elite-dressage-pony-sales Market: NL — dressage / sport pony auctions (NRPS, NWPCS, Welsh, Duitse rijpony), stallions, FEI children's ponies Platform: JouwWeb (jwwb.nl) — site language nl Generated: 2026-09-28 COLOR SOURCING - Brand values supplied by Paul and CONFIRMED against the live theme stylesheet (primary.jwwb.nl/.../style.css): --jw-background-color : #333333 → --primary --jw-accent-container-background-color : #EB8113 → --accent Both appear verbatim in the tenant's own JouwWeb theme, not as builder defaults — 76 occurrences of #eb8113, confirmed as the accent system. - Supporting ramp lifted from the same stylesheet (tenant's real tints, not derived): #ee8e2a, #bc670f, #8d4d0b, #f9d9b7, #424242, #f9f9f9, #c8322c (theme error red). - No logo mark: the site header uses a photograph plus a text title, so there is no logotype hue to weigh against the above. - No theme-color meta tag. TYPOGRAPHY - Single typeface across body, headings and menu: Source Sans Pro. Platform default Outfit is NOT used for this tenant. ⚠ CONTRAST — READ THIS #EB8113 is 2.73:1 against white. White text on the brand orange FAILS WCAG AA at any size. Stal Tops rule applied: the brand orange is kept exactly as given and the foreground goes dark (#333333 → 4.62:1 ✓ AA). For orange TEXT on a light background use --accent-text (#8d4d0b, 6.56:1), which is the tenant's own link colour in the theme. ========================================================================== */ :root { /* --- Typography ------------------------------------------------------ */ --font-body: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* --- Brand colors ---------------------------------------------------- */ --primary: oklch(0.321 0.000 0.0); /* #333333 — CONFIRMED */ --primary-foreground: oklch(1.000 0.000 0.0); /* #ffffff — 12.63:1 ✓ AAA */ --primary-hover: oklch(0.250 0.000 0.0); /* #222222 */ --accent: oklch(0.7067 0.1658 57.4); /* #EB8113 — CONFIRMED */ --accent-foreground: oklch(0.321 0.000 0.0); /* #333333 — 4.62:1 ✓ AA (never white) */ --accent-hover: oklch(0.650 0.152 57.8); /* #d2730f */ --accent-text: oklch(0.4874 0.1114 58.4); /* #8d4d0b — 6.56:1 on white ✓ AA, theme link colour */ --secondary: oklch(0.955 0.030 57.4); /* #ffecdd — light orange tint surface */ --secondary-foreground: oklch(0.400 0.090 57.4);/* #6b390a — 8.26:1 on secondary ✓ AAA */ /* --- Surfaces (neutral — primary carries no chroma) ------------------- */ --background: oklch(1.000 0.000 0.0); /* #ffffff */ --foreground: oklch(0.240 0.000 0.0); /* #1f1f1f — 16.48:1 ✓ AAA */ --surface: oklch(0.982 0.000 0.0); /* #f9f9f9 — theme default section bg */ --surface-foreground: oklch(0.240 0.000 0.0); /* #1f1f1f — 15.66:1 ✓ AAA */ --muted: oklch(0.965 0.000 0.0); /* #f3f3f3 */ --muted-foreground: oklch(0.500 0.000 0.0); /* #636363 — 6.01:1 on bg ✓ AA */ --border: oklch(0.900 0.000 0.0); /* #dedede */ --input: oklch(0.900 0.000 0.0); /* #dedede */ --ring: oklch(0.7067 0.1658 57.4); /* #EB8113 — focus ring */ /* --- Functional feedback --------------------------------------------- */ /* Destructive taken from the tenant theme's own error red (#c8322c) — hue 27.6 sits clear of the brand orange at hue 57. */ --destructive: oklch(0.551 0.188 27.6); /* #c8322c — 5.32:1 on white ✓ AA */ --destructive-foreground: oklch(1.000 0.000 0.0); /* #ffffff */ /* Orange accent occupies hue 57, so --warning is pushed to yellow-amber (hue 95) instead of the usual 55–60 to stay distinct from the brand. */ --warning: oklch(0.800 0.150 95.0); /* #dcbc33 — 1.86:1 vs white ✗ */ --warning-foreground: oklch(0.240 0.000 0.0); /* #1f1f1f — 8.86:1 ✓ AAA */ --success: oklch(0.545 0.130 150.0); /* #278445 — 4.70:1 on white ✓ AA */ --success-foreground: oklch(1.000 0.000 0.0); /* #ffffff */ --info: oklch(0.560 0.130 245.0); /* #1c7abb — 4.61:1 on white ✓ AA */ --info-foreground: oklch(1.000 0.000 0.0); /* #ffffff */ /* --- Auction status --------------------------------------------------- */ --status-live: oklch(0.7067 0.1658 57.4); /* #EB8113 — brand orange, bidding open */ --status-live-foreground: oklch(0.321 0.000 0.0); /* #333333 — 4.62:1 ✓ AA */ --status-upcoming: oklch(0.560 0.130 245.0); /* #1c7abb — 4.61:1 ✓ AA */ --status-upcoming-foreground: oklch(1.000 0.000 0.0); --status-closed: oklch(0.560 0.000 0.0); /* #747474 — 4.67:1 ✓ AA */ --status-closed-foreground: oklch(1.000 0.000 0.0); --status-won: oklch(0.545 0.130 150.0); /* #278445 — 4.70:1 ✓ AA */ --status-won-foreground: oklch(1.000 0.000 0.0); /* --- Shape / radius --------------------------------------------------- */ /* Tenant theme buttons render at 2px — a sharp, squared look. Scale kept tight to match rather than using the platform's softer default. */ --radius-sm: 0.125rem; /* 2px — matches tenant buttons */ --radius-md: 0.25rem; /* 4px */ --radius-lg: 0.5rem; /* 8px */ --radius-full: 9999px; } /* ========================================================================== NOTES 1. WHITE-ON-ORANGE IS THE ONE THING TO WATCH Any component that assumes white text on --accent will fail AA. Buttons, badges and the live-auction pill all use --accent-foreground (#333333). If a dark-on-orange button reads as too low-contrast in the UI, the alternative is --accent-text (#8d4d0b) as the fill with white text (6.56:1) — a darker, more conservative orange the tenant already uses. 2. SECONDARY MAPPING Per convention, the named secondary (#EB8113) maps to --accent at full strength; --secondary is the light tint surface (#ffecdd) derived from the same hue. 3. TYPOGRAPHY Source Sans Pro is not bundled with the platform. Either self-host the weights (400/600/700) or load from Google Fonts before this file. 4. DARK MODE The tenant theme also ships an inverse scheme (#323232 background, #0d0d0d tint, #f9d9b7 accent-on-dark). Say the word and I'll add a matching prefers-color-scheme block using those values. ========================================================================== */