/* ────────────────────────────────────────────────────────────── Cleveroo games — shared brand skin. Loaded LAST in each game's so it overrides per-page styles and remaps the old purple/blue Tailwind accents to the brand palette. Single source of truth for game theming — edit here. ────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Lexend:wght@400;500;600;700;800&display=swap'); :root { --cvr-navy: #C2185B; /* brand primary (pink) */ --cvr-navy-700: #8C0E40; --cvr-orange: #F58720; --cvr-green: #5DAA3A; --cvr-sky: #2DA4B5; --cvr-ink: #16213D; --cvr-cream: #FFF7E5; --cvr-paper: #FFFBF0; --cvr-soft-pink: #FCE6EE; --cvr-soft-peach: #FEEDD7; } /* Typography + page background */ body { font-family: 'Lexend', system-ui, sans-serif !important; background: linear-gradient(135deg, var(--cvr-soft-pink) 0%, var(--cvr-soft-peach) 100%) !important; color: var(--cvr-ink); } h1, h2, h3, h4, .font-baloo { font-family: 'Bricolage Grotesque', system-ui, sans-serif !important; letter-spacing: -.01em; } /* ── Accent remap: purple / indigo / violet / blue / sky → brand pink ── */ .text-purple-300,.text-purple-400,.text-purple-500,.text-purple-600,.text-purple-700,.text-purple-800, .text-indigo-400,.text-indigo-500,.text-indigo-600,.text-indigo-700, .text-violet-400,.text-violet-500,.text-violet-600,.text-violet-700, .text-blue-500,.text-blue-600,.text-blue-700,.text-blue-800, .text-sky-500,.text-sky-600,.text-sky-700 { color: var(--cvr-navy) !important; } .bg-purple-300,.bg-purple-400,.bg-purple-500,.bg-purple-600,.bg-purple-700,.bg-purple-800, .bg-indigo-400,.bg-indigo-500,.bg-indigo-600,.bg-indigo-700, .bg-violet-400,.bg-violet-500,.bg-violet-600,.bg-violet-700, .bg-blue-500,.bg-blue-600,.bg-blue-700,.bg-blue-800, .bg-sky-500,.bg-sky-600,.bg-sky-700 { background-color: var(--cvr-navy) !important; color: #fff !important; } .hover\:bg-purple-600:hover,.hover\:bg-purple-700:hover,.hover\:bg-purple-800:hover, .hover\:bg-indigo-700:hover,.hover\:bg-violet-700:hover, .hover\:bg-blue-700:hover,.hover\:bg-blue-800:hover, .hover\:bg-sky-700:hover { background-color: var(--cvr-navy-700) !important; } .hover\:text-purple-600:hover,.hover\:text-purple-700:hover, .hover\:text-blue-600:hover,.hover\:text-blue-700:hover, .hover\:text-indigo-600:hover { color: var(--cvr-navy-700) !important; } .border-purple-200,.border-purple-300,.border-purple-400,.border-purple-500,.border-purple-600, .border-indigo-300,.border-indigo-400,.border-indigo-500, .border-violet-300,.border-violet-400,.border-violet-500, .border-blue-300,.border-blue-400,.border-blue-500,.border-blue-600, .border-sky-300,.border-sky-400,.border-sky-500 { border-color: var(--cvr-navy) !important; } .ring-purple-400,.ring-purple-500,.ring-indigo-500,.ring-blue-500,.ring-violet-500 { --tw-ring-color: var(--cvr-navy) !important; } /* Soft tints (light backgrounds) → brand soft pink */ .bg-purple-50,.bg-purple-100,.bg-purple-200, .bg-indigo-50,.bg-indigo-100, .bg-violet-50,.bg-violet-100, .bg-blue-50,.bg-blue-100, .bg-sky-50,.bg-sky-100 { background-color: var(--cvr-soft-pink) !important; color: var(--cvr-ink) !important; } /* Gradient stops used on buttons / headers */ .from-purple-400,.from-purple-500,.from-purple-600,.from-purple-700, .from-indigo-500,.from-indigo-600,.from-violet-500,.from-violet-600, .from-blue-500,.from-blue-600,.from-sky-500 { --tw-gradient-from: var(--cvr-navy) !important; --tw-gradient-to: rgba(194,24,91,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } .to-purple-400,.to-purple-500,.to-purple-600,.to-purple-700, .to-indigo-500,.to-indigo-600,.to-violet-600, .to-blue-500,.to-blue-600,.to-sky-500,.to-pink-500,.to-pink-600 { --tw-gradient-to: var(--cvr-navy-700) !important; } /* pink-* already on-brand — nudge to the exact brand pink */ .text-pink-500,.text-pink-600,.text-pink-700 { color: var(--cvr-navy) !important; } .bg-pink-500,.bg-pink-600,.bg-pink-700 { background-color: var(--cvr-navy) !important; } /* Keep semantic colours intact: green=correct, red=wrong, amber=warn (untouched). */ /* Friendly default for the common "primary action" buttons that use inline purple gradients */ button { font-family: 'Lexend', system-ui, sans-serif; }