/* ========================================================================== TENANT: Van Bockxgrave Horses Site: https://www.vanbockxgravehorses.com Slug: van-bockxgrave-horses Market: NL (Hapert) — sport horse trading, training, stallion station Platform: Wix (Thunderbolt) — site language nl Generated: 2026-09-28 COLOR SOURCING - Brand values supplied by Paul, checked against the tenant's own Wix palette variables in the page head: --color_17: 196,182,156 = #C4B69C → --primary ✅ EXACT MATCH --color_15: 38, 42, 41 = #262A29 → nearest site dark #C4B69C is the tenant's sand palette anchor, verbatim. #303A35 (secondary, as given) is NOT in the site palette — the site's own dark green-grey is #262A29, a touch darker and flatter. Paul's value is used as authoritative; see note 1 if you want the site value. - Full tenant ramps lifted from the same palette (real values, not derived): sand : #E2D9CA #C4B69C #938975 #625B4E #312E27 (color_16–20) green : #CED4D2 #A2AAA6 #737F7A #4D5551 #262A29 (color_11–15) --secondary, --primary-text and --status-closed all come straight out of these, so nothing in this file fights the existing site. - Wix system defaults ignored per the sourcing hierarchy: #116dff (Wix UI blue), #e03939 / #ca4249 / #ff4040 (Wix error reds), color_3–color_5 (Wix stock red/blue/yellow). - Favicon is a photograph, not a logotype — no mark hue to weigh in. TYPOGRAPHY — two-font system, both Google Fonts Raleway : body copy (Body-L 24px, Body-M 17px) and the large page titles at semibold (font_0/2/3, 75/56/46px) Oswald : section headings at medium (font_4/5/6, 36/30/22px) Platform default Outfit is NOT used for this tenant. ⚠ CONTRAST — READ THIS #C4B69C is 2.00:1 against white. It cannot carry white text and cannot BE text on a light background. Stal Tops rule applied: the sand is kept exactly as given as --primary, and the foreground goes dark — #303A35 on #C4B69C is 5.90:1 ✓ AA. A sand topbar with dark green type is the brand's actual look, so this is not a workaround. For sand-coloured TEXT use --primary-text (#625B4E, 6.72:1), which is the tenant's own sand ramp step. ========================================================================== */ :root { /* --- Typography ------------------------------------------------------ */ --font-body: 'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Oswald', 'Raleway', system-ui, -apple-system, sans-serif; /* --- Brand colors ---------------------------------------------------- */ --primary: oklch(0.7811 0.0391 83.0); /* #C4B69C — CONFIRMED (Wix color_17) */ --primary-foreground: oklch(0.3375 0.0160 163.8); /* #303A35 — 5.90:1 ✓ AA (never white) */ --primary-hover: oklch(0.720 0.041 83.0); /* #b1a388 */ --primary-text: oklch(0.4739 0.0222 83.0); /* #625B4E — 6.72:1 on white ✓ AA, site ramp */ --accent: oklch(0.3375 0.0160 163.8); /* #303A35 — supplied secondary, full strength */ --accent-foreground: oklch(1.000 0.000 0.0); /* #ffffff — 11.78:1 ✓ AAA */ --accent-hover: oklch(0.280 0.014 163.8); /* #232b27 */ --secondary: oklch(0.8647 0.0071 174.3); /* #CED4D2 — site green ramp tint (color_11) */ --secondary-foreground: oklch(0.3375 0.0160 163.8); /* #303A35 — 7.84:1 ✓ AAA */ /* --- Surfaces (warm neutral, tuned to the sand hue) ------------------- */ --background: oklch(1.000 0.000 0.0); /* #ffffff */ --foreground: oklch(0.250 0.008 163.8); /* #1e2321 — 15.94:1 ✓ AAA */ --surface: oklch(0.982 0.004 83.0); /* #faf9f6 — warm card/panel */ --surface-foreground: oklch(0.250 0.008 163.8); /* #1e2321 — 15.14:1 ✓ AAA */ --muted: oklch(0.963 0.006 83.0); /* #f5f2ee */ --muted-foreground: oklch(0.500 0.012 83.0); /* #67635c — 5.97:1 on bg ✓ AA */ --border: oklch(0.888 0.010 83.0); /* #dddad3 */ --input: oklch(0.888 0.010 83.0); /* #dddad3 */ --ring: oklch(0.3375 0.0160 163.8); /* #303A35 — focus ring (sand is too faint) */ /* --- Functional feedback --------------------------------------------- */ --destructive: oklch(0.550 0.190 27.0); /* #c9302d — 5.32:1 on white ✓ AA */ --destructive-foreground: oklch(1.000 0.000 0.0); /* #ffffff */ /* Sand sits at hue 83 (a desaturated gold), so --warning is pushed down to true orange (hue 60) rather than the usual amber, which would read as brand chrome. */ --warning: oklch(0.760 0.155 60.0); /* #f79639 — 2.24:1 vs white ✗ */ --warning-foreground: oklch(0.250 0.008 163.8); /* #1e2321 — 7.12:1 ✓ AAA */ /* Brand green is near-achromatic charcoal (chroma 0.016), so a saturated green at hue 150 stays clearly separate from it. */ --success: oklch(0.545 0.135 150.0); /* #218543 — 4.67: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 --------------------------------------------------- */ /* Sand cannot carry a status pill at AA, so live uses the dark green. */ --status-live: oklch(0.3375 0.0160 163.8); /* #303A35 — 11.78:1 ✓ AAA */ --status-live-foreground: oklch(1.000 0.000 0.0); --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.4410 0.0120 164.4); /* #4D5551 — 7.68:1 ✓ AAA, site ramp color_14 */ --status-closed-foreground: oklch(1.000 0.000 0.0); --status-won: oklch(0.545 0.135 150.0); /* #218543 — 4.67:1 ✓ AA */ --status-won-foreground: oklch(1.000 0.000 0.0); /* --- Shape / radius --------------------------------------------------- */ /* Wix build is squared throughout — buttons, cards and image frames all render at 0. Kept minimal so the auction UI matches. */ --radius-sm: 0rem; --radius-md: 0.125rem; /* 2px */ --radius-lg: 0.25rem; /* 4px */ --radius-full: 9999px; } /* ========================================================================== NOTES 1. SECONDARY IS NOT AN EXACT SITE MATCH You gave #303A35; the live Wix palette uses #262A29 (color_15) as its dark green-grey. The difference is small but visible side by side — yours is lighter and greener. I used yours. If the brand guide actually says #262A29, the swap is: --accent / --primary-foreground / --secondary-foreground / --status-live ... oklch(0.2811 0.0060 179.2) #262A29 2. SAND CANNOT BE A CTA ON ITS OWN A sand button with dark green text passes (5.90:1), but it reads quietly next to the rest of the auction UI. For primary CTAs — Bid, Register — the dark green --accent on white is the stronger call, with sand reserved for the topbar, section bands and card headers. Say the word and I'll flip --primary / --accent so the platform's default CTA slot picks up the green automatically. 3. FONTS Raleway (400/600) and Oswald (500) both load from Google Fonts. Two families is one more than most tenants here — if you want to drop to one, Raleway alone holds up; Oswald is the condensed accent on section headings only. 4. DARK MODE Both site ramps are full five-step scales, so a prefers-color-scheme block is straightforward — #262A29 ground, #C4B69C accent, #E2D9CA body text. Ask and I'll add it. ========================================================================== */