/** * @file theme.css * Sinduri brand theme — dark mode only. * * Overrides Mercury's shadcn/ui-compatible CSS custom properties. * Placed in the web root so Mercury auto-detects it via hook_library_info_alter(). * * Brand palette: * Background #12181B Dark Teal Black * Text #F5F7FB Cloudy White * Accent #EDAB00 Golden Mustard */ /* ============================================================ All variables set on :root — always dark, no toggle. Mercury sets class="dark" on when scheme=dark (theme settings), which is consistent with these :root defaults. ============================================================ */ :root { /* --- Surfaces --- */ --background: #12181B; --foreground: #F5F7FB; --card: #1A2226; --card-foreground: #F5F7FB; /* --- Primary action (buttons, active states) --- */ --primary: #EDAB00; --primary-foreground: #12181B; /* --- Secondary surface --- */ --secondary: #243033; --secondary-foreground: #F5F7FB; /* --- Muted / subdued --- */ --muted: #1E2A2E; --muted-foreground: #8FA3A8; /* --- Accent (focus rings, form highlights) --- */ --accent: #EDAB00; --accent-foreground: #12181B; /* --- Destructive --- */ --destructive: #E05252; --destructive-foreground: #F5F7FB; /* --- Borders & inputs --- */ --border: rgba(237, 171, 0, 0.25); --input: rgba(237, 171, 0, 0.15); /* --- Typography --- */ --font-sans: "Lexend", "Helvetica Neue", Arial, Helvetica, sans-serif; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace; /* --- Shape --- */ --radius: 0.5rem; /* --- Shadows (deeper on dark backgrounds) --- */ --shadow-x: 0; --shadow-y: 2px; --shadow-blur: 8px; --shadow-spread: 0px; --shadow-opacity: 0.4; --shadow-color: oklch(0 0 0); --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.25); --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.25); --shadow-sm: 0 1px 4px 0px hsl(0 0% 0% / 0.4), 0 1px 2px -1px hsl(0 0% 0% / 0.4); --shadow: 0 1px 4px 0px hsl(0 0% 0% / 0.4), 0 2px 4px -1px hsl(0 0% 0% / 0.4); --shadow-md: 0 1px 4px 0px hsl(0 0% 0% / 0.4), 0 4px 8px -2px hsl(0 0% 0% / 0.4); --shadow-lg: 0 1px 4px 0px hsl(0 0% 0% / 0.4), 0 8px 12px -2px hsl(0 0% 0% / 0.4); --shadow-xl: 0 1px 4px 0px hsl(0 0% 0% / 0.4), 0 12px 16px -3px hsl(0 0% 0% / 0.4); --shadow-2xl: 0 1px 4px 0px hsl(0 0% 0% / 0.4), 0 16px 20px -3px hsl(0 0% 0% / 0.4); --tracking-normal: 0em; --spacing: 0.25rem; /* --- Link hover (lighter gold) --- */ --link-hover: #F5C53A; /* Navbar height for hero billboard overlay */ --navbar-height: calc(var(--spacing) * 15); @media (min-width: 768px) { --navbar-height: calc(var(--spacing) * 18); } } /* ============================================================ Links ============================================================ */ a { color: var(--accent); text-underline-offset: 0.2em; } a:hover, a:focus { color: var(--link-hover); } /* Restore button text colors overridden by the global `a` rule above */ a.bg-primary, a.bg-primary:hover, a.bg-primary:focus { color: var(--primary-foreground); } a.bg-accent, a.bg-accent:hover, a.bg-accent:focus { color: var(--accent-foreground); } /* ============================================================ Headings ============================================================ */ h1, h2, h3, h4, h5, h6 { color: var(--foreground); line-height: 1.2; } /* ============================================================ Dividers ============================================================ */ hr { border-color: var(--border); } /* ============================================================ Navbar ============================================================ */ /* Sticky header */ header[role="banner"] { position: sticky; top: 0; z-index: 500; background-color: var(--background); } /* Logo: hide Drupal's and render SVG as background */ .navbar--logo .branding, .navbar--modal-logo .branding { display: block; height: 5rem; width: 5rem; background-image: url('/favicon-circle.svg'); background-size: contain; background-repeat: no-repeat; background-position: center left; } .navbar--logo .branding img, .navbar--modal-logo .branding img { display: none; } /* Nav links: use foreground color, not the global link gold */ .navbar--dropdown-menu a { color: var(--foreground); } .navbar--dropdown-menu a:hover, .navbar--dropdown-menu a:focus { color: var(--primary-foreground); } /* Nav menu item spacing */ .navbar--dropdown-menu ul { gap: 0.75rem; } /* Active menu item — golden text, no background */ .navbar--dropdown-menu li.bg-muted\/50 { background-color: transparent; } .navbar--dropdown-menu li.bg-muted\/50 > a { color: var(--accent); } /* Active item hover — muted bg to distinguish from regular item hover */ .navbar--dropdown-menu li.bg-muted\/50 > a:hover, .navbar--dropdown-menu li.bg-muted\/50 > a:focus { background-color: var(--muted); color: var(--accent); } /* ============================================================ Focus rings — WCAG AA visible keyboard focus ============================================================ */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }