/* Color-only adaptation from template.html. Layout, spacing, sizing, and component structure remain from unoc-website_2-local.html. */
:root,
.dark {
--button-outline: rgba(26,25,26,0.14);
--badge-outline: rgba(26,25,26,0.10);
--opaque-button-border-intensity: -6;
--elevate-1: rgba(26,25,26,0.05);
--elevate-2: rgba(26,25,26,0.10);
/* template.html palette converted to HSL tokens used by the bundle */
--background: 0 0% 100%; /* #FFFFFF paper */
--foreground: 0 1% 10%; /* #1A191A ink */
--border: 0 1% 25% / .12; /* template line */
--card: 0 0% 100%; /* #FFFFFF paper-card */
--card-foreground: 0 1% 10%;
--card-border: 0 1% 25% / .12;
--sidebar: 0 0% 98%;
--sidebar-foreground: 0 1% 10%;
--sidebar-border: 0 1% 25% / .12;
--sidebar-primary: 349 100% 44%; /* #E10032 red */
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 0 0% 96%; /* #F6F6F6 paper-deep */
--sidebar-accent-foreground: 0 1% 10%;
--sidebar-ring: 349 100% 44%;
--popover: 0 0% 100%;
--popover-foreground: 0 1% 10%;
--popover-border: 0 1% 25% / .12;
--primary: 349 100% 44%; /* #E10032 */
--primary-foreground: 0 0% 100%;
--secondary: 45 100% 51%; /* #FFC808 yellow */
--secondary-foreground: 0 0% 0%;
--muted: 0 0% 96%; /* #F6F6F6 */
--muted-foreground: 0 1% 35%; /* #59585A ink-soft */
--accent: 45 100% 51%;
--accent-foreground: 0 1% 10%;
--destructive: 349 100% 44%;
--destructive-foreground: 0 0% 100%;
--input: 0 1% 25% / .14;
--ring: 349 100% 44%;
--chart-1: 349 100% 44%;
--chart-2: 45 100% 51%;
--chart-3: 0 1% 10%;
--chart-4: 0 0% 96%;
--chart-5: 0 1% 35%;
--radius: .25rem;
--shadow-sm: 0 1px 2px rgba(26,25,26,0.05), 0 8px 24px -18px rgba(26,25,26,0.14);
--shadow: 0 1px 2px rgba(26,25,26,0.05), 0 12px 32px -16px rgba(26,25,26,0.18);
--shadow-md: 0 1px 2px rgba(26,25,26,0.06), 0 18px 38px -18px rgba(26,25,26,0.22);
--shadow-lg: 0 1px 2px rgba(26,25,26,0.07), 0 28px 58px -22px rgba(26,25,26,0.26);
--shadow-xl: 0 1px 2px rgba(26,25,26,0.08), 0 34px 74px -24px rgba(26,25,26,0.30);
--shadow-2xl: 0 36px 90px -28px rgba(26,25,26,0.32);
}
body {
background: hsl(var(--background)) !important;
color: hsl(var(--foreground)) !important;
}
/* Hero is still the original layout and image; only the color grade follows template.html's dark hero treatment. */
.unoc-hero-enhanced {
color: #FFFFFF !important;
background-color: #1A191A !important;
}
.unoc-hero-enhanced h1,
.unoc-hero-enhanced h1 *,
.unoc-hero-enhanced p,
.unoc-hero-enhanced [class*="text-foreground"] {
color: #FFFFFF !important;
}
.unoc-hero-enhanced [class*="text-primary"],
.unoc-hero-enhanced h1 em,
.unoc-hero-enhanced h1 [class*="text-primary"] {
color: #FFC808 !important;
}
/* Header uses the template's parchment navigation surface without changing dimensions. */
header, nav, [class*="fixed"][class*="top-0"] {
background: rgba(255,255,255,.92) !important;
color: #1A191A !important;
border-color: rgba(65,64,66,.13) !important;
backdrop-filter: blur(14px) saturate(140%);
}
header a, header button, nav a, nav button, [class*="fixed"][class*="top-0"] a, [class*="fixed"][class*="top-0"] button {
color: #1A191A !important;
}
/* Keep footer as the dark bookend from the template color system. */
footer {
background: #1A191A !important;
color: #FFFFFF !important;
}
footer * { border-color: rgba(255,255,255,.14) !important; }
footer h1, footer h2, footer h3, footer h4, footer strong { color: #FFFFFF !important; }
footer p, footer li, footer span, footer a { color: rgba(255,255,255,.74) !important; }
:focus-visible {
outline: 2px solid #E10032 !important;
outline-offset: 3px;
}
/* Hero scrim correction: keep the same element, restore the template's dark photographic overlay. */
.unoc-hero-enhanced .bg-gradient-to-t {
background-image: linear-gradient(to top, rgba(26,25,26,.98), rgba(26,25,26,.66), rgba(26,25,26,.24)) !important;
}
.unoc-hero-enhanced h1,
.unoc-hero-enhanced h1 *,
.unoc-hero-enhanced h3[class*="text-foreground"],
.unoc-hero-enhanced p[class*="text-foreground"] {
color: #FFFFFF !important;
}
.unoc-hero-enhanced h1 > .text-primary,
.unoc-hero-enhanced p.text-primary,
.unoc-hero-enhanced [class~="text-primary"] {
color: #FFC808 !important;
}
.unoc-hero-enhanced button,
.unoc-hero-enhanced button * {
color: #FFFFFF !important;
}
.unoc-hero-enhanced button {
background-color: #e6b400 !important;
}
.unoc-hero-enhanced button:hover {
background-color: #FFC808 !important;
}
.unoc-hero-enhanced button[class*="text-primary"],
.unoc-hero-enhanced button[class*="text-primary"] *,
.unoc-hero-enhanced button svg,
.unoc-hero-enhanced button svg * {
color: #FFFFFF !important;
stroke: #FFFFFF !important;
}
/* Transparent hero nav, then parchment glass once scrolling starts. */
body:not(.unoc-scrolled) header,
body:not(.unoc-scrolled) nav,
body:not(.unoc-scrolled) [class*="fixed"][class*="top-0"] {
background: linear-gradient(to bottom, rgba(26,25,26,.34), rgba(26,25,26,.08)) !important;
color: #FFFFFF !important;
border-color: rgba(255,255,255,.12) !important;
box-shadow: none !important;
backdrop-filter: blur(10px) saturate(120%);
}
body:not(.unoc-scrolled) header a,
body:not(.unoc-scrolled) header button,
body:not(.unoc-scrolled) nav a,
body:not(.unoc-scrolled) nav button,
body:not(.unoc-scrolled) [class*="fixed"][class*="top-0"] a,
body:not(.unoc-scrolled) [class*="fixed"][class*="top-0"] button {
color: #FFFFFF !important;
}
body:not(.unoc-scrolled) header img,
body:not(.unoc-scrolled) nav img,
body:not(.unoc-scrolled) [class*="fixed"][class*="top-0"] img {
filter: drop-shadow(0 10px 24px rgba(0,0,0,.28));
}
body.unoc-scrolled header,
body.unoc-scrolled nav,
body.unoc-scrolled [class*="fixed"][class*="top-0"] {
background: rgba(255,255,255,.88) !important;
color: #1A191A !important;
border-color: rgba(65,64,66,.13) !important;
box-shadow: 0 14px 34px rgba(26,25,26,.10) !important;
backdrop-filter: blur(18px) saturate(150%);
}
body.unoc-scrolled header a,
body.unoc-scrolled header button,
body.unoc-scrolled nav a,
body.unoc-scrolled nav button,
body.unoc-scrolled [class*="fixed"][class*="top-0"] a,
body.unoc-scrolled [class*="fixed"][class*="top-0"] button {
color: #1A191A !important;
}