/* ==================================================================== A. FONTS & TYPOGRAPHY ==================================================================== */ /* Teko display font — devanagari */ @font-face { font-family: 'Teko'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/teko/v23/LYjYdG7kmE0gV69VVPPdFl06VN8XG4S01zOmu1CET6g9Bw.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* Teko — latin-ext */ @font-face { font-family: 'Teko'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/teko/v23/LYjYdG7kmE0gV69VVPPdFl06VN8XG4S71zOmu1CET6g9Bw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Teko — latin */ @font-face { font-family: 'Teko'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/teko/v23/LYjYdG7kmE0gV69VVPPdFl06VN8XG4S11zOmu1CET6g.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Gradient gold (used in hero "WARFIGHTERS") → DU cyan gradient */ .gradient-text-gold { background: linear-gradient(135deg, #1FDFFF, #00c4e4, #00c4e4) !important; background-clip: text !important; } /* H1 containing a gradient-gold span (hero) */ h1:has(> .gradient-text-gold) { font-weight: 900 !important; font-family: "Teko" !important; font-size: clamp(4rem, 10vw, 8rem) !important; letter-spacing: 0.03em !important; } /* Other display H1s and H3s use Teko, uppercase */ h1.font-bold.tracking-tight.font-display { text-transform: uppercase !important; font-family: "Teko" !important; font-size: 6rem !important; letter-spacing: 0.02em !important; } h3.font-display { text-transform: uppercase !important; font-family: "Teko" !important; font-size: 2rem !important; } /* ==================================================================== B. DU BRAND POLISH ==================================================================== */ /* `button.from-amber-500` gradients ("Join Hackathon" and similar primary CTAs) → solid cyan pill with navy text, matching the other DU CTAs across the app. */ button.from-amber-500, button[class*="from-amber-500"] { background-image: none !important; background: #1FDFFF !important; background-color: #1FDFFF !important; color: rgb(0, 21, 63) !important; border: none !important; border-radius: 50px !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(31, 223, 255, 0.25), 0 0 0 1px rgba(31, 223, 255, 0.45) !important; } button.from-amber-500:hover, button[class*="from-amber-500"]:hover { background: #4be8ff !important; background-color: #4be8ff !important; box-shadow: 0 6px 20px rgba(31, 223, 255, 0.4), 0 0 0 1px rgba(31, 223, 255, 0.7) !important; } /* DU wordmark SVG replacing "Defense Unicorns Hackathons" text */ a[aria-label="Defense Unicorns Hackathons home"] > div { order: 0; } a[aria-label="Defense Unicorns Hackathons home"] > span { order: 2; display: none; } a[aria-label="Defense Unicorns Hackathons home"]::before { order: 1; content: ""; display: inline-block; height: 1.5rem; aspect-ratio: 757.01 / 103; flex-shrink: 0; background: url("https://gist.githubusercontent.com/wcrum/c2406d28d24a17ac8a64f87387a77ad0/raw/b43a23610979e2669db06dbe44080f634dcd4e5a/DU_Wordmark_Horizontal_Light.svg") center / contain no-repeat; } /* ==================================================================== C1. MAIN SITE HEADER (`

`) ==================================================================== */ header.sticky.top-0.z-50 { position: sticky !important; top: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; background: rgb(0, 21, 63) !important; background-color: rgb(0, 21, 63) !important; color: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; opacity: 1 !important; overflow: visible !important; } /* The /docs admin shell uses `

` for its in-page top bar. The main-site rule above only matches `.z-50`, so the docs bar stays literally white. Force the same dark treatment. */ header.bg-white { background-color: rgb(0, 21, 63) !important; background: rgb(0, 21, 63) !important; border-bottom-color: rgba(255, 255, 255, 0.10) !important; color: #ffffff !important; } header.bg-white a, header.bg-white button, header.bg-white span { color: inherit; } header.bg-white .hover\:bg-gray-100:hover { background-color: rgba(255, 255, 255, 0.06) !important; } /* Wordmark text fallback (in case the ::before SVG fails) */ header .text-\[var$--theme-text\2c \#1f2937$\], header a[aria-label="Defense Unicorns Hackathons home"] span { color: #ffffff !important; font-weight: 700 !important; } /* Primary nav links + `.btn-ghost` buttons (Sign In, etc.) → pill buttons with cyan hover */ header nav a.btn-ghost, header nav button.btn-ghost, header button.btn-ghost, a.btn-ghost, button.btn-ghost { color: #ffffff !important; background: transparent !important; padding: 8px 14px !important; border-radius: 9999px !important; font-size: 0.92rem !important; font-weight: 500 !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; transition: background-color .15s ease, color .15s ease, border-color .15s ease !important; } header nav a.btn-ghost:hover, header nav button.btn-ghost:hover, header button.btn-ghost:hover, a.btn-ghost:hover, button.btn-ghost:hover { background: rgba(31, 223, 255, 0.10) !important; color: #1FDFFF !important; border-color: rgba(31, 223, 255, 0.55) !important; } /* Notification bell + mobile hamburger */ header button[aria-label="Notifications"], header button[aria-label="Open menu"], header button[aria-label="Close menu"] { background: transparent !important; border-radius: 9999px !important; color: #1FDFFF !important; } header button[aria-label="Notifications"] svg, header button[aria-label="Open menu"] svg, header button[aria-label="Close menu"] svg { color: #1FDFFF !important; stroke: #1FDFFF !important; } header button[aria-label="Notifications"]:hover, header button[aria-label="Open menu"]:hover, header button[aria-label="Close menu"]:hover { background: rgba(31, 223, 255, 0.12) !important; } /* User chip (avatar + name + chevron) */ header button[aria-haspopup="true"]:not([aria-label="Notifications"]) { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 9999px !important; padding: 4px 10px 4px 4px !important; } header button[aria-haspopup="true"]:not([aria-label="Notifications"]):hover { background-color: rgba(255, 255, 255, 0.08) !important; border-color: rgba(31, 223, 255, 0.55) !important; opacity: 1 !important; } header button[aria-haspopup="true"] span, header button[aria-haspopup="true"] svg { color: #ffffff !important; } header button[aria-haspopup="true"] svg.lucide-chevron-down { color: #1FDFFF !important; stroke: #1FDFFF !important; } /* Catch Tailwind grays inside any sticky header */ header.sticky.top-0.z-50 .text-gray-500, header.sticky.top-0.z-50 .text-gray-600, header.sticky.top-0.z-50 .text-gray-700, header.sticky.top-0.z-50 .text-gray-800, header.sticky.top-0.z-50 .text-gray-900 { color: #ffffff !important; } header.sticky.top-0.z-50 .bg-gray-100, header.sticky.top-0.z-50 .bg-gray-200 { background-color: rgba(255, 255, 255, 0.12) !important; } header.sticky.top-0.z-50 [class*="hover:bg-gray-100"]:hover { background-color: rgba(31, 223, 255, 0.10) !important; } /* ==================================================================== C2. EVENT HEADER (`

`) ==================================================================== */ header.sticky.top-0.z-50:has(nav[aria-label="Event navigation"]) { background-color: rgb(0, 21, 63) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } /* Brand wordmark "Warhacker" */ nav[aria-label="Event navigation"] a[href^="/event/"] span { color: #ffffff !important; } /* "My Dashboard" CTA — cyan pill with navy text + soft glow */ nav[aria-label="Event navigation"] a[href$="/my-team"] { background-color: #1FDFFF !important; background-image: none !important; color: rgb(0, 21, 63) !important; border-radius: 50px !important; box-shadow: 0 0 0 1px rgba(31, 223, 255, 0.55), 0 0 18px -2px rgba(31, 223, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.25) !important; font-weight: 700 !important; } nav[aria-label="Event navigation"] a[href$="/my-team"]:hover { background-color: #4be8ff !important; box-shadow: 0 0 0 1px rgba(31, 223, 255, 0.8), 0 0 24px -2px rgba(31, 223, 255, 0.7) !important; } /* "Portal" link — pill on hover */ nav[aria-label="Event navigation"] a[href="/"] { color: #ffffff !important; border-radius: 50px !important; transition: background-color 0.15s ease, color 0.15s ease !important; } nav[aria-label="Event navigation"] a[href="/"]:hover { background-color: rgba(31, 223, 255, 0.10) !important; color: #1FDFFF !important; box-shadow: inset 0 0 0 1px rgba(31, 223, 255, 0.35) !important; } nav[aria-label="Event navigation"] a[href="/"] svg { color: #1FDFFF !important; stroke: #1FDFFF !important; } /* Event-header user chip */ nav[aria-label="Event navigation"] button[aria-haspopup="true"]:not([aria-label="Notifications"]) { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 9999px !important; } nav[aria-label="Event navigation"] button[aria-haspopup="true"]:not([aria-label="Notifications"]):hover { background-color: rgba(255, 255, 255, 0.08) !important; border-color: rgba(31, 223, 255, 0.55) !important; opacity: 1 !important; } nav[aria-label="Event navigation"] button[aria-haspopup="true"] span, nav[aria-label="Event navigation"] button[aria-haspopup="true"] svg { color: #ffffff !important; stroke: #ffffff !important; } /* Vertical dividers in event header */ nav[aria-label="Event navigation"] .bg-gray-200 { background-color: rgba(255, 255, 255, 0.15) !important; } /* Mobile hamburger */ nav[aria-label="Event navigation"] button[aria-label="Open menu"] svg { color: #ffffff !important; stroke: #ffffff !important; } /* ==================================================================== C3. EVENT PAGES SUB-NAV (`

`) ==================================================================== */ nav[aria-label="Event pages"] { /* Sit directly under the 64px event header (h-16). Earlier this was 3.5rem for a slim 56px header — but the standard event header is 64px, so the sub-nav was overlapping by 8px and clipping its active-tab indicator. */ top: 4rem !important; background-color: rgb(0, 21, 63) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Tab pill radius */ nav[aria-label="Event pages"] a { border-radius: 50px !important; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important; } /* Inactive tab hover */ nav[aria-label="Event pages"] a:not([aria-current="page"]):hover { background-color: rgb(0, 38, 102) !important; color: #1FDFFF !important; opacity: 1 !important; box-shadow: inset 0 0 0 1px rgba(31, 223, 255, 0.35) !important; } nav[aria-label="Event pages"] a:not([aria-current="page"]):hover span { opacity: 1 !important; } /* Active tab: cyan-bordered pill (replaces the absolute underline bar with a full inset cyan ring around the tab) */ nav[aria-label="Event pages"] a[aria-current="page"] { background-color: rgba(31, 223, 255, 0.12) !important; color: #1FDFFF !important; box-shadow: inset 0 0 0 1px #1FDFFF !important; } /* Hide the absolutely-positioned underline bar inside the active tab */ nav[aria-label="Event pages"] a[aria-current="page"] > span.absolute, nav[aria-label="Event pages"] a[aria-current="page"] span[class*="absolute"][class*="bottom-0"] { display: none !important; } /* Event-* CSS variables for inline color-mix patterns in the navs */ nav[aria-label="Event pages"], nav[aria-label="Event navigation"] { --event-bg-color: rgb(0, 21, 63); --event-primary-color: #1FDFFF; --event-text-color: rgba(255, 255, 255, 0.85); --event-accent-color: #1FDFFF; --event-text-on-accent: rgb(0, 21, 63); --event-text-on-primary: rgb(0, 21, 63); } /* ==================================================================== C4. DROPDOWN MENUS (`[role="menu"]`) Notifications panel + user profile menu. ==================================================================== */ [role="menu"] { background-color: rgb(0, 21, 63) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; } [role="menu"].bg-white, [role="menu"] .bg-white { background-color: rgb(0, 21, 63) !important; } [role="menu"] .border-gray-100, [role="menu"] .border-gray-200 { border-color: rgba(255, 255, 255, 0.10) !important; } [role="menu"] .text-gray-900, [role="menu"] .text-gray-800, [role="menu"] .text-gray-700, [role="menu"] .text-gray-600, [role="menu"] h3 { color: #ffffff !important; } [role="menu"] .text-gray-500, [role="menu"] .text-gray-400, [role="menu"] .text-gray-300 { color: rgba(255, 255, 255, 0.65) !important; } [role="menu"] a, [role="menu"] [role="menuitem"], [role="menu"] button { color: #ffffff !important; } [role="menu"] a:hover, [role="menu"] [role="menuitem"]:hover, [role="menu"] button:hover { background-color: rgba(31, 223, 255, 0.10) !important; color: #1FDFFF !important; } [role="menu"] a:hover svg, [role="menu"] [role="menuitem"]:hover svg, [role="menu"] button:hover svg { color: #1FDFFF !important; stroke: #1FDFFF !important; } [role="menu"] .text-primary-600, [role="menu"] .text-primary-500 { color: #1FDFFF !important; } [role="menu"] [class*="hover:bg-primary-50"]:hover, [role="menu"] [class*="hover:bg-gray-50"]:hover, [role="menu"] [class*="hover:bg-gray-100"]:hover { background-color: rgba(31, 223, 255, 0.10) !important; } [role="menu"] .text-red-600, [role="menu"] .text-red-500 { color: #ff6b6b !important; } [role="menu"] [class*="hover:bg-red-50"]:hover { background-color: rgba(255, 107, 107, 0.12) !important; color: #ff6b6b !important; } [role="menu"] [class*="hover:bg-red-50"]:hover svg { color: #ff6b6b !important; stroke: #ff6b6b !important; } [role="menu"] svg.text-gray-300 { color: rgba(255, 255, 255, 0.25) !important; stroke: rgba(255, 255, 255, 0.25) !important; } /* ==================================================================== C5. SIDEBARS (admin sidebar + event-manage sidebar) Catches any persistent `

` nav. ==================================================================== */ aside[class*="sticky"], aside[class*="fixed"], aside[class*="h-screen"], aside[data-testid="admin-sidebar"], aside[aria-label*="navigation"] { background-color: rgb(0, 21, 63) !important; border-color: rgba(255, 255, 255, 0.10) !important; } aside[class*="sticky"] .text-gray-900, aside[class*="sticky"] .text-gray-800, aside[class*="sticky"] .text-gray-700, aside[class*="sticky"] .text-gray-600, aside[class*="fixed"] .text-gray-900, aside[class*="fixed"] .text-gray-800, aside[class*="fixed"] .text-gray-700, aside[class*="fixed"] .text-gray-600, aside[class*="h-screen"] .text-gray-900, aside[class*="h-screen"] .text-gray-800, aside[class*="h-screen"] .text-gray-700, aside[class*="h-screen"] .text-gray-600, aside[data-testid="admin-sidebar"] .text-gray-900, aside[data-testid="admin-sidebar"] .text-gray-800, aside[data-testid="admin-sidebar"] .text-gray-700, aside[data-testid="admin-sidebar"] .text-gray-600 { color: #ffffff !important; } aside[class*="sticky"] .text-gray-500, aside[class*="sticky"] .text-gray-400, aside[class*="sticky"] .text-gray-300, aside[class*="fixed"] .text-gray-500, aside[class*="fixed"] .text-gray-400, aside[class*="fixed"] .text-gray-300, aside[class*="h-screen"] .text-gray-500, aside[class*="h-screen"] .text-gray-400, aside[class*="h-screen"] .text-gray-300, aside[data-testid="admin-sidebar"] .text-gray-500, aside[data-testid="admin-sidebar"] .text-gray-400, aside[data-testid="admin-sidebar"] .text-gray-300 { color: rgba(255, 255, 255, 0.65) !important; } aside[class*="sticky"] .border-gray-100, aside[class*="sticky"] .border-gray-200, aside[class*="fixed"] .border-gray-100, aside[class*="fixed"] .border-gray-200, aside[class*="h-screen"] .border-gray-100, aside[class*="h-screen"] .border-gray-200, aside[data-testid="admin-sidebar"] .border-gray-100, aside[data-testid="admin-sidebar"] .border-gray-200 { border-color: rgba(255, 255, 255, 0.10) !important; } aside[class*="sticky"] .bg-gray-50, aside[class*="sticky"] .bg-gray-100, aside[class*="fixed"] .bg-gray-50, aside[class*="fixed"] .bg-gray-100, aside[class*="h-screen"] .bg-gray-50, aside[class*="h-screen"] .bg-gray-100, aside[data-testid="admin-sidebar"] .bg-gray-50, aside[data-testid="admin-sidebar"] .bg-gray-100 { background-color: rgba(255, 255, 255, 0.05) !important; } /* Hover bg → cyan tint */ aside[class*="sticky"] [class*="hover:bg-gray-100"]:hover, aside[class*="sticky"] [class*="hover:bg-gray-200"]:hover, aside[class*="sticky"] [class*="hover:bg-purple-50"]:hover, aside[class*="fixed"] [class*="hover:bg-gray-100"]:hover, aside[class*="fixed"] [class*="hover:bg-gray-200"]:hover, aside[class*="fixed"] [class*="hover:bg-purple-50"]:hover, aside[class*="h-screen"] [class*="hover:bg-gray-100"]:hover, aside[class*="h-screen"] [class*="hover:bg-gray-200"]:hover, aside[class*="h-screen"] [class*="hover:bg-purple-50"]:hover, aside[data-testid="admin-sidebar"] [class*="hover:bg-gray-100"]:hover, aside[data-testid="admin-sidebar"] [class*="hover:bg-gray-200"]:hover, aside[data-testid="admin-sidebar"] [class*="hover:bg-purple-50"]:hover { background-color: rgba(31, 223, 255, 0.10) !important; } /* Hover text → cyan */ aside[class*="sticky"] [class*="hover:text-gray-700"]:hover, aside[class*="sticky"] [class*="hover:text-gray-900"]:hover, aside[class*="sticky"] [class*="hover:text-purple"]:hover, aside[class*="fixed"] [class*="hover:text-gray-700"]:hover, aside[class*="fixed"] [class*="hover:text-gray-900"]:hover, aside[class*="fixed"] [class*="hover:text-purple"]:hover, aside[class*="h-screen"] [class*="hover:text-gray-700"]:hover, aside[class*="h-screen"] [class*="hover:text-gray-900"]:hover, aside[class*="h-screen"] [class*="hover:text-purple"]:hover, aside[data-testid="admin-sidebar"] [class*="hover:text-gray-700"]:hover, aside[data-testid="admin-sidebar"] [class*="hover:text-gray-900"]:hover, aside[data-testid="admin-sidebar"] [class*="hover:text-purple"]:hover { color: #1FDFFF !important; } /* Active nav item (bg-purple-100 + text-purple-700) → cyan chip */ aside[class*="sticky"] .bg-purple-100, aside[class*="fixed"] .bg-purple-100, aside[class*="h-screen"] .bg-purple-100, aside[data-testid="admin-sidebar"] .bg-purple-100 { background-color: rgba(31, 223, 255, 0.18) !important; } aside[class*="sticky"] .text-purple-700, aside[class*="sticky"] .text-purple-600, aside[class*="fixed"] .text-purple-700, aside[class*="fixed"] .text-purple-600, aside[class*="h-screen"] .text-purple-700, aside[class*="h-screen"] .text-purple-600, aside[data-testid="admin-sidebar"] .text-purple-700, aside[data-testid="admin-sidebar"] .text-purple-600 { color: #1FDFFF !important; } /* Sidebar search bar `` chip */ aside[class*="sticky"] kbd, aside[class*="fixed"] kbd, aside[class*="h-screen"] kbd, aside[data-testid="admin-sidebar"] kbd { background-color: rgba(255, 255, 255, 0.06) !important; color: rgba(255, 255, 255, 0.65) !important; border-color: rgba(255, 255, 255, 0.15) !important; } /* ==================================================================== D. CONTENT CARDS (`.bg-white.rounded-*`) Scope: any `bg-white` element with `rounded-lg/xl/2xl/3xl`. Covers About / FAQ / Schedule / Judging Criteria / Event grid cards — they all share this exact Tailwind combo. Page bg and other Tailwind utilities outside this selector are left alone. ==================================================================== */ /* Card shell */ .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) { background-color: rgb(0, 21, 63) !important; border-color: rgba(255, 255, 255, 0.10) !important; } /* When the card element ALSO has text/border utility classes on itself (e.g. an `` styled as a button: bg-white + rounded-xl + text-gray-700 + border-gray-200), the descendant rules below don't catch them. Self-targeted variants: */ .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl).text-gray-900, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl).text-gray-800, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl).text-gray-700, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl).text-gray-600 { color: #ffffff !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl).text-gray-500, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl).text-gray-400 { color: rgba(255, 255, 255, 0.65) !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl).border-gray-100, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl).border-gray-200, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl).border-gray-300 { border-color: rgba(255, 255, 255, 0.10) !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl)[class*="hover:bg-gray-50"]:hover, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl)[class*="hover:bg-gray-100"]:hover { background-color: rgba(31, 223, 255, 0.10) !important; color: #1FDFFF !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl)[class*="hover:border-gray"]:hover, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl)[class*="hover:border-primary"]:hover { border-color: rgba(31, 223, 255, 0.55) !important; } /* Nested surfaces inside cards */ .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .bg-gray-50 { background-color: rgb(0, 30, 80) !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .bg-gray-100 { background-color: rgba(255, 255, 255, 0.06) !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .bg-gray-200 { background-color: rgba(255, 255, 255, 0.12) !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .bg-primary-50 { background-color: rgba(31, 223, 255, 0.10) !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .bg-primary-100 { background-color: rgba(31, 223, 255, 0.15) !important; } /* Nested text */ .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .text-gray-900, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .text-gray-800, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .text-gray-700, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .text-gray-600 { color: #ffffff !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .text-gray-500, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .text-gray-400, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .text-gray-300 { color: rgba(255, 255, 255, 0.65) !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .text-primary-400, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .text-primary-500, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .text-primary-600, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .text-primary-700, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .text-primary-800 { color: #1FDFFF !important; } /* Nested borders */ .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .border-gray-100, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .border-gray-200, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .border-gray-300 { border-color: rgba(255, 255, 255, 0.10) !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .border-primary-100, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .border-primary-200, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .border-primary-300, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .border-primary-500 { border-color: rgba(31, 223, 255, 0.5) !important; } /* Red destructive badge (e.g. "Required") tuned for dark surface */ .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .bg-red-100 { background-color: rgba(255, 107, 107, 0.15) !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .text-red-700, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .text-red-600 { color: #ff6b6b !important; } /* Prose typography inside cards (Tailwind typography plugin hardcodes dark colors on h1-h6/p/strong/li — override to white, links → cyan) */ .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .prose, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .prose h1, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .prose h2, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .prose h3, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .prose h4, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .prose p, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .prose li, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .prose strong, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .prose blockquote { color: #ffffff !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .prose a { color: #1FDFFF !important; } /* Tag/category chip buttons inside cards (`bg-white rounded-full text-gray-* border-gray-*`) → outlined cyan chips so they read on the navy card */ .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) button.bg-white.rounded-full, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .bg-white.rounded-full { background-color: rgba(31, 223, 255, 0.08) !important; color: #ffffff !important; border-color: rgba(31, 223, 255, 0.45) !important; } /* Non-pill `bg-white` nested inside a card (e.g. `` row inside a `` notification list, or any inner section that paints itself white). The outer card is already navy; let the inner bg-white go transparent so the navy shows through instead of stamping a literal white plate on top. */ .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .bg-white:not(.rounded-full):not([class*="rounded-full"]):not(textarea):not(input) { background-color: transparent !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) button.bg-white.rounded-full:hover, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .bg-white.rounded-full:hover { background-color: rgba(31, 223, 255, 0.18) !important; color: #1FDFFF !important; border-color: #1FDFFF !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) button.bg-white.rounded-full:active, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) button.bg-white.rounded-full:focus { background-color: rgba(31, 223, 255, 0.25) !important; color: #1FDFFF !important; border-color: #1FDFFF !important; outline: none !important; } /* Standalone `bg-white rounded-full` pill chips that live OUTSIDE any `.bg-white:is(.rounded-lg, ...)` card surface (e.g. the "5 Challenges" summary chip rendered above an event card, or any count-badge floating on the page background). The card-scoped chip rules above don't catch these, so the `bg-white` stays literal and the inner `.text-gray-600` label — promoted to white by section H — ends up white-on-white. Match the card-internal treatment: cyan-tinted bg, white text, cyan border. The card-scoped descendant rule still has higher specificity and continues to win inside cards. */ span.bg-white.rounded-full, span[class~="bg-white"][class~="rounded-full"], div.bg-white.rounded-full, div[class~="bg-white"][class~="rounded-full"] { background-color: rgba(31, 223, 255, 0.08) !important; background: rgba(31, 223, 255, 0.08) !important; color: #ffffff !important; } /* Inner `text-gray-*` labels inside the chip → white (already handled globally, but reasserted in case a more specific scoped rule muted it back to gray on a particular page). */ span.bg-white.rounded-full .text-gray-500, span.bg-white.rounded-full .text-gray-600, span.bg-white.rounded-full .text-gray-700, div.bg-white.rounded-full .text-gray-500, div.bg-white.rounded-full .text-gray-600, div.bg-white.rounded-full .text-gray-700 { color: #ffffff !important; } /* Image-overlay white gradient inside cards → off. Cards have an image with `bg-gradient-to-t from-white via-transparent` meant to fade into a white card body. On the navy card it just reads as a washed-out band. Kill it. */ .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .bg-gradient-to-t.from-white, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) [class~="bg-gradient-to-t"][class~="from-white"] { background-image: none !important; } /* Floating image-overlay chips (`bg-white/90` "6 days left", "In-person") → solid navy chip with white text + cyan border so they read on any image. */ .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) [class~="bg-white/90"], .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) [class~="bg-white/80"], .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) [class~="bg-white/70"] { background-color: rgb(0, 21, 63) !important; color: #ffffff !important; border-color: rgba(31, 223, 255, 0.45) !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) [class~="bg-white/90"] *, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) [class~="bg-white/80"] *, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) [class~="bg-white/70"] * { color: #ffffff !important; } /* Mobile bottom nav (``) — navy bg + light icons/labels + cyan focus ring. */ nav[data-testid="bottom-nav"], nav[class~="bg-white/95"], nav[class~="bg-white/100"] { background-color: rgb(0, 21, 63) !important; background: rgb(0, 21, 63) !important; border-color: rgba(255, 255, 255, 0.10) !important; } nav[data-testid="bottom-nav"] .text-gray-500, nav[data-testid="bottom-nav"] .text-gray-600, nav[data-testid="bottom-nav"] svg { color: rgba(255, 255, 255, 0.65) !important; stroke: currentColor !important; } nav[data-testid="bottom-nav"] a:hover .text-gray-500, nav[data-testid="bottom-nav"] a:hover .text-gray-600, nav[data-testid="bottom-nav"] a:hover svg, nav[data-testid="bottom-nav"] button:hover .text-gray-500, nav[data-testid="bottom-nav"] button:hover .text-gray-600, nav[data-testid="bottom-nav"] button:hover svg { color: #1FDFFF !important; } /* `--theme-primary` → navy, NOT cyan, because this var is used both for accent (focus rings) AND for the admin header banner bg. Cyan-bg headers were too bright; navy bg matches the app theme. Focus rings get their own cyan override below. */ :root, * { --theme-primary: rgb(0, 21, 63) !important; --theme-secondary: rgb(0, 21, 63) !important; } /* Admin Portal/Event header banner — uses inline `background-color: var(--theme-primary, ...)`. With the var now navy, this resolves correctly; double-force here for stragglers. */ [style*="background-color: var(--theme-primary"], [style*="background-color:var(--theme-primary"] { background-color: rgb(0, 21, 63) !important; } /* Header banner border-bottom (`border-bottom-color: var(--theme-primary)`) → subtle white border instead of a hard navy seam */ [style*="border-bottom-color: var(--theme-primary"], [style*="border-bottom-color:var(--theme-primary"] { border-bottom-color: rgba(255, 255, 255, 0.10) !important; } /* Focus rings using `--theme-primary` → cyan (so the ring is still visible since the var itself is now navy) */ [class*="ring-[color:var(--theme-primary"]:focus-visible, [class*="focus-visible:ring-[color:var(--theme-primary"]:focus-visible { --tw-ring-color: rgba(31, 223, 255, 0.55) !important; } /* Admin nav active state using `bg-purple-100 text-purple-700` (not the custom `nav-event-active` class, but the Tailwind purple combo) → cyan-tinted pill with cyan text, matching the `nav-event-active` treatment from above for consistency. */ a[class*="bg-purple-100"][class*="text-purple-700"], a[class*="bg-purple-100"][class*="text-purple-600"] { background-color: rgba(31, 223, 255, 0.15) !important; color: #1FDFFF !important; box-shadow: inset 0 0 0 1px rgba(31, 223, 255, 0.55) !important; } a[class*="bg-purple-100"][class*="text-purple-700"] svg, a[class*="bg-purple-100"][class*="text-purple-600"] svg { color: #1FDFFF !important; stroke: #1FDFFF !important; } /* Global `bg-purple-100` outside the sidebar → cyan tint */ .bg-purple-100 { background-color: rgba(31, 223, 255, 0.15) !important; } /* Indigo tokens (Event Team callout card, indigo focus rings, etc.) → DU Bright Blue accent */ .bg-indigo-50 { background-color: rgba(31, 223, 255, 0.10) !important; } .bg-indigo-100 { background-color: rgba(31, 223, 255, 0.15) !important; } .bg-indigo-500, .bg-indigo-600 { background-color: #1FDFFF !important; color: rgb(0, 21, 63) !important; } .text-indigo-400, .text-indigo-500, .text-indigo-600, .text-indigo-700, .text-indigo-800 { color: #1FDFFF !important; } .border-indigo-200, .border-indigo-300, .border-indigo-400, .border-indigo-500 { border-color: rgba(31, 223, 255, 0.45) !important; } [class*="ring-indigo-200"], [class*="ring-indigo-300"], [class*="ring-indigo-400"], [class*="ring-indigo-500"] { --tw-ring-color: rgba(31, 223, 255, 0.35) !important; } /* Solid purple buttons (`bg-purple-600` Send Announcement, etc.) → solid cyan CTA */ .bg-purple-600, .bg-purple-500, .bg-purple-700 { background-color: #1FDFFF !important; color: rgb(0, 21, 63) !important; } [class*="hover:bg-purple-600"]:hover, [class*="hover:bg-purple-700"]:hover, [class*="hover:bg-purple-800"]:hover { background-color: #4be8ff !important; color: rgb(0, 21, 63) !important; } /* Purple borders + rings (active target audience card, Write tab) */ .border-purple-500, .border-purple-400, .border-purple-600 { border-color: #1FDFFF !important; } .border-purple-200, .border-purple-300 { border-color: rgba(31, 223, 255, 0.45) !important; } [class*="ring-purple-200"], [class*="ring-purple-300"], [class*="ring-purple-400"], [class*="ring-purple-500"] { --tw-ring-color: rgba(31, 223, 255, 0.35) !important; } /* Checkbox/radio accent (Tailwind `text-purple-600` on form inputs sets the checked-state accent color) */ input[type="checkbox"].text-purple-600, input[type="radio"].text-purple-600, input[class*="text-purple-600"] { accent-color: #1FDFFF !important; } /* Border-left accent variants — `border-l-green-500` etc. (used by the "Public Visible to Participants" section as a 4px green left-bar). Keep the green semantic since it signals "approved". */ .border-l-green-500, [class*="border-l-green-500"] { border-left-color: #34d399 !important; } .border-l-emerald-500, [class*="border-l-emerald-500"] { border-left-color: #34d399 !important; } .border-l-blue-500, [class*="border-l-blue-500"] { border-left-color: #60a5fa !important; } .border-l-purple-500, [class*="border-l-purple-500"] { border-left-color: #1FDFFF !important; } .border-l-red-500, [class*="border-l-red-500"] { border-left-color: #E53600 !important; } .border-l-amber-500, [class*="border-l-amber-500"] { border-left-color: #fbbf24 !important; } /* Other green token coverage — `border-green-500`, `bg-green-500` */ .border-green-500, .border-emerald-500 { border-color: rgba(52, 211, 153, 0.55) !important; } .bg-green-500 { background-color: #34d399 !important; } /* Generic site footer — bring it in line with the event footer's cyan-accent treatment. Wrapped `:not(.svg)` style on the link selector keeps it from styling any link bg utility. */ footer a:not([class*="bg-"]) { color: #1FDFFF !important; transition: color 0.15s ease, opacity 0.15s ease !important; } footer a:not([class*="bg-"]):hover { color: #4be8ff !important; opacity: 1 !important; } /* Footer social icons (inline `color: rgb(156, 163, 175)` gray) → cyan */ footer a[style*="color: rgb(156, 163, 175)"], footer a[style*="color:rgb(156, 163, 175)"] { color: #1FDFFF !important; } footer a[style*="color: rgb(156, 163, 175)"] svg, footer a[style*="color:rgb(156, 163, 175)"] svg { color: #1FDFFF !important; fill: #1FDFFF !important; } /* Footer focus rings (purple → cyan) */ footer [class*="ring-purple"]:focus-visible { --tw-ring-color: #1FDFFF !important; } /* Footer dividing line / border between top + bottom rows */ footer [class*="border-white/10"], footer [class*="border-t"] { border-color: rgba(255, 255, 255, 0.10) !important; } /* Arrow-pop circle (`bg-primary-600`) and its SVG */ .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .bg-primary-600, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .bg-primary-500, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .bg-primary-700 { background-color: #1FDFFF !important; } .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .bg-primary-600 svg.text-white, .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) .rounded-full.bg-primary-600 svg { color: rgb(0, 21, 63) !important; stroke: rgb(0, 21, 63) !important; } /* ==================================================================== E. SEGMENTED TOGGLE BUTTONS (Cards / List / Grid view switchers) Inline-styled button groups where: - Container border uses color-mix(--event-primary-color ...) - Inactive buttons: inline `background-color: white` + slate text - Active button: inline `background-color: var(--event-primary-color)` ==================================================================== */ /* Container: cyan-tinted border */ div[style*="border-color: color-mix(in srgb, var(--event-primary-color"], div[style*="border-color:color-mix(in srgb, var(--event-primary-color"] { border-color: rgba(31, 223, 255, 0.45) !important; } /* Inactive segments */ button[style*="background-color: white"][style*="color: rgb(107, 114, 128)"], button[style*="background-color:white"][style*="color:rgb(107, 114, 128)"], button[style*="background-color: white"][style*="color: rgb(107,114,128)"] { background-color: transparent !important; color: rgba(255, 255, 255, 0.65) !important; } button[style*="background-color: white"][style*="color: rgb(107, 114, 128)"]:hover, button[style*="background-color:white"][style*="color:rgb(107, 114, 128)"]:hover, button[style*="background-color: white"][style*="color: rgb(107,114,128)"]:hover { background-color: rgba(31, 223, 255, 0.10) !important; color: #1FDFFF !important; } /* Active segment (primary bg + text-on-primary) */ button[style*="background-color: var(--event-primary-color"], button[style*="background-color:var(--event-primary-color"] { background-color: #1FDFFF !important; color: rgb(0, 21, 63) !important; } /* ==================================================================== F. EVENT-THEMED CARDS (`style="...var(--event-card-bg)..."`) Some cards (Description / Quick Facts / Themes) don't use `bg-white` — they use inline `style="background-color: var(--event-card-bg, #ffffff)"`. Resolve those vars at :root so navy/cyan/white propagate, then override prose typography inside them. ==================================================================== */ /* Global CSS variables for the event theme. !important so deeper scopes (e.g. theme wrappers) can't override them. */ :root, * { --event-bg-color: rgb(0, 21, 63) !important; --event-card-bg: rgb(0, 21, 63) !important; --event-surface-bg: rgb(0, 21, 63) !important; --event-primary-color: #1FDFFF !important; --event-secondary-color: #1FDFFF !important; --event-accent-color: #1FDFFF !important; --event-text-color: rgba(255, 255, 255, 0.85) !important; --event-text-muted: rgba(255, 255, 255, 0.65) !important; --event-text-on-accent: rgb(0, 21, 63) !important; --event-text-on-primary: rgb(0, 21, 63) !important; --event-text-on-hero: #ffffff !important; } /* Safety net: force any inline `color: var(--event-text-color)` to resolve to near-white, in case the variable cascade still loses */ [style*="color: var(--event-text-color"], [style*="color:var(--event-text-color"] { color: rgba(255, 255, 255, 0.92) !important; } /* Safety nets for the other --event-* inline references */ [style*="color: var(--event-primary-color"], [style*="color:var(--event-primary-color"], [style*="color: var(--event-accent-color"], [style*="color:var(--event-accent-color"], [style*="color: var(--event-secondary-color"], [style*="color:var(--event-secondary-color"] { color: #1FDFFF !important; } /* Buttons & links with `background-color: var(--event-primary-color)` → solid cyan CTA with navy text (clicks, primary actions) */ button[style*="background-color: var(--event-primary-color"], a[style*="background-color: var(--event-primary-color"], button[style*="background-color:var(--event-primary-color"], a[style*="background-color:var(--event-primary-color"], button[style*="background-color: var(--event-accent-color"], a[style*="background-color: var(--event-accent-color"], button[style*="background-color:var(--event-accent-color"], a[style*="background-color:var(--event-accent-color"] { background-color: #1FDFFF !important; color: rgb(0, 21, 63) !important; } /* Decorative divs/spans with the same inline primary bg (icon containers, accent circles) → cyan TINT so the cyan icon inside actually reads. Without this, a cyan icon would sit on solid cyan = invisible. */ div[style*="background-color: var(--event-primary-color"], div[style*="background-color:var(--event-primary-color"], span[style*="background-color: var(--event-primary-color"], span[style*="background-color:var(--event-primary-color"], div[style*="background-color: var(--event-accent-color"], span[style*="background-color: var(--event-accent-color"] { background-color: rgba(31, 223, 255, 0.15) !important; } /* Larger buttons/links with primary cyan bg + rounded-xl → 50px pill. Scoped to rounded-xl so it doesn't turn small 40×40 rounded-lg icon containers or rounded-lg `p-1.5` mini links into circles. Excludes: - schedule-day-tab (date tiles that should stay rounded-xl) - `flex-col` buttons (vertically stacked content = tile, not pill) */ button[style*="background-color: var(--event-primary-color"][class*="rounded-xl"]:not([data-testid="schedule-day-tab"]):not([class*="flex-col"]), a[style*="background-color: var(--event-primary-color"][class*="rounded-xl"]:not([class*="flex-col"]), button[style*="background-color: var(--event-accent-color"][class*="rounded-xl"]:not([data-testid="schedule-day-tab"]):not([class*="flex-col"]), a[style*="background-color: var(--event-accent-color"][class*="rounded-xl"]:not([class*="flex-col"]) { border-radius: 50px !important; box-shadow: 0 4px 14px rgba(31, 223, 255, 0.25), 0 0 0 1px rgba(31, 223, 255, 0.45) !important; } button[style*="background-color: var(--event-primary-color"][class*="rounded-xl"]:not([data-testid="schedule-day-tab"]):not([class*="flex-col"]):hover, a[style*="background-color: var(--event-primary-color"][class*="rounded-xl"]:not([class*="flex-col"]):hover { box-shadow: 0 6px 20px rgba(31, 223, 255, 0.4), 0 0 0 1px rgba(31, 223, 255, 0.7) !important; } /* Smaller `rounded-lg` cyan buttons (e.g. "Join" team buttons) → also 50px pill, so they match the larger rounded-xl pills. Excludes: - `w-10` / `w-12` fixed-size icon containers - `p-1.5` / `p-2` square icon-only links - `flex-col` stacked tiles (schedule day tabs etc.) */ button[style*="background-color: var(--event-primary-color"][class*="rounded-lg"]:not([class*="w-10"]):not([class*="w-12"]):not([class*="p-1.5"]):not([class*="flex-col"]):not([data-testid="schedule-day-tab"]), a[style*="background-color: var(--event-primary-color"][class*="rounded-lg"]:not([class*="w-10"]):not([class*="w-12"]):not([class*="p-1.5"]):not([class*="flex-col"]), button[style*="background-color: var(--event-accent-color"][class*="rounded-lg"]:not([class*="w-10"]):not([class*="w-12"]):not([class*="p-1.5"]):not([class*="flex-col"]), a[style*="background-color: var(--event-accent-color"][class*="rounded-lg"]:not([class*="w-10"]):not([class*="w-12"]):not([class*="p-1.5"]):not([class*="flex-col"]) { border-radius: 50px !important; } /* Schedule day tabs: kill the `scale-105` on the active state. The cyan bg already distinguishes it, and the 5% scale-up causes the tile to bleed past the parent's `overflow-x-auto` clipping. */ button[data-testid="schedule-day-tab"], button[data-testid="schedule-day-tab"][class*="scale-105"], button[data-testid="schedule-day-tab"][aria-pressed="true"] { transform: none !important; scale: 1 !important; } /* Still give the active day tab some visual weight without scaling */ button[data-testid="schedule-day-tab"][aria-pressed="true"] { box-shadow: 0 0 0 1px #1FDFFF, 0 4px 14px rgba(31, 223, 255, 0.25) !important; } /* Tab buttons (FAQs / Judging / etc. style): Active (`bg: color-mix(... primary 12%, transparent)` + cyan text) Inactive (`bg: transparent` + color-mix on text-on-hero) Both `rounded-lg` → bump to 50px pill so they read as tabs. */ button[class*="rounded-lg"][style*="background-color: color-mix"][style*="12%, transparent)"] { border-radius: 50px !important; background-color: rgba(31, 223, 255, 0.12) !important; color: #1FDFFF !important; box-shadow: inset 0 0 0 1px #1FDFFF !important; } /* Hide the absolute underline bar on the active tab (replaced by the inset border above) */ button[class*="rounded-lg"][style*="background-color: color-mix"][style*="12%, transparent)"] > span.absolute, button[class*="rounded-lg"][style*="background-color: color-mix"][style*="12%, transparent)"] span[class*="absolute"][class*="bottom-0"] { display: none !important; } button[class*="rounded-lg"][style*="color: color-mix"][style*="text-on-hero"] { border-radius: 50px !important; color: #ffffff !important; } button[class*="rounded-lg"][style*="color: color-mix"][style*="text-on-hero"]:hover { background-color: rgba(31, 223, 255, 0.10) !important; color: #1FDFFF !important; } button[class*="rounded-lg"][style*="color: color-mix"][style*="text-on-hero"] span { opacity: 1 !important; } /* Outlined hero CTAs ("Learn More" style — `` with rounded-lg border-2 and inline border-color/color = var(--event-text-on-hero)) → 50px pill to match other CTAs. */ a[class*="rounded-lg"][style*="border-color: var(--event-text-on-hero"], a[class*="rounded-lg"][style*="border-color:var(--event-text-on-hero"], button[class*="rounded-lg"][style*="border-color: var(--event-text-on-hero"], button[class*="rounded-lg"][style*="border-color:var(--event-text-on-hero"] { border-radius: 50px !important; } a[class*="rounded-lg"][style*="border-color: var(--event-text-on-hero"]:hover, button[class*="rounded-lg"][style*="border-color: var(--event-text-on-hero"]:hover { background-color: rgba(255, 255, 255, 0.08) !important; border-color: #1FDFFF !important; color: #1FDFFF !important; } /* Inner sub-cards using color-mix(primary X%, card-bg) — the var resolution should give mostly-navy, but force it explicitly so it never falls back to white */ [style*="color-mix"][style*="var(--event-primary-color"][style*="var(--event-card-bg"] { background-color: rgb(0, 30, 80) !important; } /* Profile-card hero gradient (`linear-gradient(135deg, color-mix(... --event-primary-color 60%, #1a1033), color-mix(... --event-secondary-color 40%, #2d1a4e))`) → sky-with-clouds image */ [style*="linear-gradient(135deg, color-mix(in srgb, var(--event-primary-color, #7c3aed) 60%, #1a1033)"] { background: url("https://raw.githubusercontent.com/wcrum/du-assets/main/Sky_with_clouds.png") center / cover no-repeat !important; } /* Borders using color-mix(primary X%, transparent) → cyan tint */ [style*="border-color: color-mix"][style*="var(--event-primary-color"], [style*="border: 1px solid color-mix"][style*="var(--event-primary-color"] { border-color: rgba(31, 223, 255, 0.30) !important; } /* Any element with `color-mix(... X%, white)` background (format-tag chips like "database"/"api", AND the larger "You're registered..." banner) → solid elevated navy bg so the cyan text reads. Works for both small chips and larger panels. */ [style*="background-color: color-mix"][style*=", white)"], [style*="background-color:color-mix"][style*=",white)"], [style*="background: color-mix"][style*=", white)"] { background-color: rgb(0, 30, 80) !important; border-color: rgba(31, 223, 255, 0.45) !important; } /* "+2more criteria →" → "More Criteria →" (CSS-only text rewrite). Hide original via font-size:0, inject replacement via ::before */ a[href$="/judging-criteria"].inline-flex { font-size: 0 !important; } a[href$="/judging-criteria"].inline-flex::before { content: "More Criteria →" !important; font-size: 0.875rem !important; color: inherit !important; } /* ==================================================================== G. INLINE RGB LITERAL OVERRIDES Some hero/landing elements use hardcoded inline `style="color: rgb(...)"` with dark-navy or slate values, rendering invisible on a dark page background. Catch them via attribute selectors and force to light colors. ==================================================================== */ /* Dark navy / slate text (links, headings, stats numbers) → white (includes rgba() variants for hero subtitles at 0.85 opacity) */ [style*="color: rgb(2, 31, 73)"], [style*="color:rgb(2, 31, 73)"], [style*="color: rgb(2,31,73)"], [style*="color: rgba(2, 31, 73"], [style*="color:rgba(2, 31, 73"], [style*="color: rgb(0, 21, 63)"], [style*="color:rgb(0, 21, 63)"], [style*="color: rgba(0, 21, 63"], [style*="color:rgba(0, 21, 63"], [style*="color: rgb(26, 31, 46)"], [style*="color: rgb(15, 23, 42)"], [style*="color: rgb(17, 24, 39)"], [style*="color: rgb(31, 41, 55)"], [style*="color: rgb(32, 54, 90)"], [style*="color: rgb(55, 65, 81)"], [style*="color: rgb(0, 0, 0)"], [style*="color: rgba(0, 0, 0"], [style*="color: black"], /* Hex-format variants (case-insensitive for hex digits) */ [style*="color:#021F49" i], [style*="color: #021F49" i], [style*="color:#00153F" i], [style*="color: #00153F" i], [style*="color:#20365A" i], [style*="color: #20365A" i], [style*="color:#000000" i], [style*="color: #000000" i], [style*="color:#000" i], [style*="color: #000" i] { color: #ffffff !important; } /* Muted slate values (stats labels) → muted white */ [style*="color: rgb(71, 85, 105)"], [style*="color: rgb(75, 85, 99)"], [style*="color: rgb(100, 116, 139)"], [style*="color: rgb(107, 114, 128)"], [style*="color: rgb(148, 163, 184)"], /* Hex-format slate variants */ [style*="color:#475569" i], [style*="color: #475569" i], [style*="color:#4B5563" i], [style*="color: #4B5563" i], [style*="color:#64748B" i], [style*="color: #64748B" i], [style*="color:#6B7280" i], [style*="color: #6B7280" i], [style*="color:#94A3B8" i], [style*="color: #94A3B8" i] { color: rgba(255, 255, 255, 0.65) !important; } /* CTA buttons / links with inline navy bg → cyan pill. Covers `` ("Participate in a Hackathon") AND `

GETTING SOFTWARE TO WARFIGHTERS

Active Events

Upcoming Hackathons

Completed Hackathons

Innovation on Demand