/* LRARE Global Styles Palette: - Light: paper #EAEAEA, ink #000000 - Dark: paper #000000, ink #EAEAEA */ :root { --paper: #EAEAEA; --ink: #000000; /* neutrals derived from ink (light mode) */ --hairline: rgba(0, 0, 0, 0.14); --muted: rgba(0, 0, 0, 0.70); --muted2: rgba(0, 0, 0, 0.55); /* translucent surfaces */ --panel: rgba(255, 255, 255, 0.55); --panel2: rgba(255, 255, 255, 0.35); /* shadows */ --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.10); } @media (prefers-color-scheme: dark) { :root { --paper: #000000; --ink: #EAEAEA; --hairline: rgba(234, 234, 234, 0.16); --muted: rgba(234, 234, 234, 0.80); --muted2: rgba(234, 234, 234, 0.62); --panel: rgba(234, 234, 234, 0.06); --panel2: rgba(234, 234, 234, 0.04); --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.55); } html { color-scheme: dark; } } /* Base */ html, body { background: var(--paper); color: var(--ink); } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--ink) 18%, transparent); } /* Accessible focus */ :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 12px; } /* Links: understated by default */ a { color: inherit; text-decoration-color: var(--hairline); text-underline-offset: 0.2em; } a:hover { text-decoration-color: var(--ink); } /* Subtle background texture (optional). Add class="grain" to or a wrapper */ .grain { position: relative; isolation: isolate; } .grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.035; background-image: radial-gradient(circle at 20% 20%, rgba(0,0,0,0.55) 0, rgba(0,0,0,0) 55%), radial-gradient(circle at 80% 10%, rgba(0,0,0,0.35) 0, rgba(0,0,0,0) 45%), radial-gradient(circle at 40% 90%, rgba(0,0,0,0.25) 0, rgba(0,0,0,0) 55%); mix-blend-mode: multiply; z-index: -1; } @media (prefers-color-scheme: dark) { .grain::before { opacity: 0.06; background-image: radial-gradient(circle at 20% 20%, rgba(234,234,234,0.35) 0, rgba(234,234,234,0) 55%), radial-gradient(circle at 80% 10%, rgba(234,234,234,0.22) 0, rgba(234,234,234,0) 45%), radial-gradient(circle at 40% 90%, rgba(234,234,234,0.18) 0, rgba(234,234,234,0) 55%); mix-blend-mode: screen; } } /* --- Small, reusable tokens (use alongside Tailwind) --- */ /* Colors */ .bg-paper { background: var(--paper) !important; } .bg-ink { background: var(--ink) !important; } .bg-panel { background: var(--panel) !important; } .bg-panel2 { background: var(--panel2) !important; } .text-ink { color: var(--ink) !important; } .text-paper { color: var(--paper) !important; } .text-muted { color: var(--muted) !important; } .text-muted2 { color: var(--muted2) !important; } .border-hairline { border-color: var(--hairline) !important; } /* Shadows */ .shadow-soft { box-shadow: var(--shadow-soft) !important; } /* Dividers */ .hr-hairline { height: 1px; background: var(--hairline); } /* Glass header background (with fallback for older browsers) */ .bg-glass { background: rgba(234, 234, 234, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } @media (prefers-color-scheme: dark) { .bg-glass { background: rgba(0, 0, 0, 0.86); } } @supports (background: color-mix(in srgb, #000 86%, transparent)) { .bg-glass { background: color-mix(in srgb, var(--paper) 86%, transparent); } } /* Buttons (optional). Keep Tailwind if you prefer; these are here to reduce inline styles later. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; padding: 0.75rem 1.25rem; border: 1px solid var(--hairline); transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--ink); color: var(--paper); } .btn-secondary { background: var(--panel); color: var(--ink); } .btn-ghost { background: transparent; color: var(--ink); } /* Hover polish with safe fallbacks */ .btn-primary:hover, .btn-secondary:hover, .btn-ghost:hover { filter: brightness(1.03); } @supports (background: color-mix(in srgb, #000 90%, #fff)) { .btn-primary:hover { background: color-mix(in srgb, var(--ink) 92%, var(--paper)); } .btn-secondary:hover { background: color-mix(in srgb, var(--panel) 78%, var(--paper)); } } /* Underline link style used in a few places */ .link-underline { border-bottom: 1px solid var(--hairline); text-decoration: none; } .link-underline:hover { border-bottom-color: var(--ink); } /* ------------------------------------------------- Logo colour handling (light / dark mode) ------------------------------------------------- */ /* Default (light mode): show logos as-is */ .logo-auto-invert { filter: none; } /* Dark mode: ensure brand SVGs remain readable. - Use !important to prevent page-level styles or utility classes from overriding. - Also provide a filename fallback for the two known brand assets. */ @media (prefers-color-scheme: dark) { img.logo-auto-invert { filter: invert(1) brightness(1.08) !important; } /* Fallback if a logo is missing the class */ img[src$="lrare-logo.svg"], img[src$="lraretext.svg"] { filter: invert(1) brightness(1.08) !important; } } /* Page transitions */ .page-transition { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; background: #EAEAEA; transition: opacity 180ms ease; } @media (prefers-color-scheme: dark) { .page-transition { background: #000000; } } .page-transition.is-active { opacity: 1; } @media (prefers-reduced-motion: reduce) { .page-transition { transition: none; } } /* Respect motion preferences */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } }