/* RaidCall theme layer. Every visual token (color, radius, shadow, typeface) is a --raidcall-* custom property consumed by the Tailwind config in base.html, so the whole design switches by flipping data-theme on — no per-template logic. - :root / [data-theme="classic"] … the original light design (Tailwind v3 default palette values, so classic renders pixel-identical). - [data-theme="modern"] … dark operations-center design. Colors are stored as raw R G B channels ("22 27 34"), because Tailwind's opacity modifiers (bg-white/10, ring-black/10 …) need rgb(var(--x) / ) to keep working. */ :root, [data-theme="classic"] { color-scheme: light; /* base */ --raidcall-white: 255 255 255; --raidcall-black: 0 0 0; /* gray */ --raidcall-gray-50: 249 250 251; --raidcall-gray-100: 243 244 246; --raidcall-gray-200: 229 231 235; --raidcall-gray-300: 209 213 219; --raidcall-gray-400: 156 163 175; --raidcall-gray-500: 107 114 128; --raidcall-gray-600: 75 85 99; --raidcall-gray-700: 55 65 81; --raidcall-gray-800: 31 41 55; --raidcall-gray-900: 17 24 39; /* red */ --raidcall-red-50: 254 242 242; --raidcall-red-100: 254 226 226; --raidcall-red-200: 254 202 202; --raidcall-red-300: 252 165 165; --raidcall-red-400: 248 113 113; --raidcall-red-500: 239 68 68; --raidcall-red-600: 220 38 38; --raidcall-red-700: 185 28 28; --raidcall-red-800: 153 27 27; /* green */ --raidcall-green-50: 240 253 244; --raidcall-green-100: 220 252 231; --raidcall-green-200: 187 247 208; --raidcall-green-300: 134 239 172; --raidcall-green-400: 74 222 128; --raidcall-green-500: 34 197 94; --raidcall-green-600: 22 163 74; --raidcall-green-700: 21 128 61; --raidcall-green-800: 22 101 52; /* yellow (public map/brigades segmented control) */ --raidcall-yellow-200: 254 240 138; --raidcall-yellow-300: 253 224 71; --raidcall-yellow-400: 250 204 21; /* amber */ --raidcall-amber-50: 255 251 235; --raidcall-amber-100: 254 243 199; --raidcall-amber-200: 253 230 138; --raidcall-amber-300: 252 211 77; --raidcall-amber-400: 251 191 36; --raidcall-amber-500: 245 158 11; --raidcall-amber-600: 217 119 6; --raidcall-amber-700: 180 83 9; --raidcall-amber-800: 146 64 14; /* blue */ --raidcall-blue-50: 239 246 255; --raidcall-blue-100: 219 234 254; --raidcall-blue-600: 37 99 235; --raidcall-blue-700: 29 78 216; --raidcall-blue-800: 30 64 175; /* purple */ --raidcall-purple-50: 250 245 255; --raidcall-purple-600: 147 51 234; --raidcall-purple-700: 126 34 206; /* orange */ --raidcall-orange-50: 255 247 237; /* brand: classic fire red, the app's original primary accent */ --raidcall-fire: 211 47 47; --raidcall-fire-dark: 183 28 28; --raidcall-fire-light: 255 235 238; /* semantic tokens (chrome, sidebar, custom components) */ --raidcall-bg: 247 243 242; /* warm off-white ground (#F7F3F2), cards stay white */ --raidcall-surface: 255 255 255; --raidcall-surface-2: 249 250 251; --raidcall-border: 229 231 235; --raidcall-ink: 17 24 39; --raidcall-muted: 107 114 128; --raidcall-accent: 211 47 47; --raidcall-accent-ink: 255 255 255; --raidcall-field: 255 255 255; /* map */ --raidcall-map-marker-bg: 211 47 47; --raidcall-map-marker-ring: 255 255 255; /* radii (Tailwind v3 defaults) */ --raidcall-radius-sm: 0.125rem; --raidcall-radius: 0.25rem; --raidcall-radius-md: 0.375rem; --raidcall-radius-lg: 0.5rem; --raidcall-radius-xl: 0.75rem; --raidcall-radius-2xl: 1rem; --raidcall-radius-3xl: 1.5rem; /* shadows (Tailwind v3 defaults) */ --raidcall-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --raidcall-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --raidcall-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --raidcall-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --raidcall-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --raidcall-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* type */ --raidcall-font-sans: 'Inter', system-ui, sans-serif; --raidcall-font-display: 'Inter', system-ui, sans-serif; --raidcall-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* timestamps: classic renders them in the UI face, modern in mono */ --raidcall-font-ts: var(--raidcall-font-sans); } /* ========================================================================== MODERN — dark operations-center theme. Page #0D1117, surfaces #161B22/#1C2333, borders #30363D, text #E6EDF3, muted #8B949E, single fire-red accent #F85149. The gray/red/green/… scales are inverted (50↔900) so existing "light bg + dark text" utility pairs become "dark bg + light text" without touching templates. ========================================================================== */ [data-theme="modern"] { color-scheme: dark; --raidcall-white: 22 27 34; /* bg-white cards -> surface #161B22 */ --raidcall-black: 0 0 0; --raidcall-gray-50: 28 35 51; /* #1C2333 secondary surface */ --raidcall-gray-100: 48 54 61; /* #30363D chip bg / card borders */ --raidcall-gray-200: 61 68 77; /* #3D444D */ --raidcall-gray-300: 72 79 88; /* #484F58 input borders */ --raidcall-gray-400: 139 148 158; /* #8B949E muted labels */ --raidcall-gray-500: 145 152 161; --raidcall-gray-600: 176 186 195; --raidcall-gray-700: 201 209 217; --raidcall-gray-800: 220 227 233; --raidcall-gray-900: 230 237 243; /* #E6EDF3 primary text */ --raidcall-red-50: 45 17 20; --raidcall-red-100: 61 20 24; --raidcall-red-200: 92 26 31; --raidcall-red-300: 130 34 40; --raidcall-red-400: 218 54 51; --raidcall-red-500: 248 81 73; /* #F85149 */ --raidcall-red-600: 248 81 73; --raidcall-red-700: 255 123 114; --raidcall-red-800: 255 161 154; --raidcall-green-50: 15 36 25; --raidcall-green-100: 17 48 28; --raidcall-green-200: 24 66 38; --raidcall-green-300: 35 92 52; --raidcall-green-400: 46 160 67; --raidcall-green-500: 63 185 80; /* #3FB950 */ --raidcall-green-600: 63 185 80; --raidcall-green-700: 86 211 100; --raidcall-green-800: 126 231 135; --raidcall-yellow-200: 84 60 16; /* hover */ --raidcall-yellow-300: 59 45 15; /* #3B2D0F chip */ --raidcall-yellow-400: 84 60 16; /* active */ --raidcall-amber-50: 45 33 10; --raidcall-amber-100: 59 45 15; --raidcall-amber-200: 84 60 16; --raidcall-amber-300: 120 86 20; --raidcall-amber-400: 245 158 11; --raidcall-amber-500: 245 158 11; --raidcall-amber-600: 245 158 11; --raidcall-amber-700: 249 185 66; --raidcall-amber-800: 250 196 96; --raidcall-blue-50: 13 33 55; --raidcall-blue-100: 16 42 69; --raidcall-blue-600: 88 166 255; --raidcall-blue-700: 121 184 255; --raidcall-blue-800: 165 205 255; --raidcall-purple-50: 39 26 59; --raidcall-purple-600: 188 140 255; --raidcall-purple-700: 214 175 255; --raidcall-orange-50: 45 27 10; /* brand accent stays the fire red in the dark theme (GitHub-dark red); bg-fire elements get a forced white label below because text-white maps to the dark surface channel */ --raidcall-fire: 248 81 73; /* #F85149 */ --raidcall-fire-dark: 218 54 51; /* #DA3633 */ --raidcall-fire-light: 49 34 39; /* 12 % fire over the #161B22 surface */ --raidcall-bg: 13 17 23; /* #0D1117 page */ --raidcall-surface: 22 27 34; /* #161B22 */ --raidcall-surface-2: 28 35 51; /* #1C2333 */ --raidcall-border: 48 54 61; /* #30363D */ --raidcall-ink: 230 237 243; /* #E6EDF3 */ --raidcall-muted: 139 148 158; /* #8B949E */ --raidcall-accent: 248 81 73; --raidcall-accent-ink: 255 255 255; --raidcall-field: 13 17 23; --raidcall-map-marker-bg: 248 81 73; --raidcall-map-marker-ring: 13 17 23; /* tighter, more technical radii: buttons 6px, cards/panels 8px */ --raidcall-radius-sm: 3px; --raidcall-radius: 4px; --raidcall-radius-md: 6px; --raidcall-radius-lg: 6px; --raidcall-radius-xl: 8px; --raidcall-radius-2xl: 8px; --raidcall-radius-3xl: 12px; /* no drop shadows — border contrast instead (flat 1px ring) */ --raidcall-shadow-sm: 0 0 0 1px rgb(48 54 61 / 0.7); --raidcall-shadow: 0 0 0 1px rgb(48 54 61 / 0.8); --raidcall-shadow-md: 0 0 0 1px rgb(48 54 61); --raidcall-shadow-lg: 0 0 0 1px rgb(48 54 61); --raidcall-shadow-xl: 0 0 0 1px rgb(48 54 61); --raidcall-shadow-2xl: 0 0 0 1px rgb(61 68 77); --raidcall-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --raidcall-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --raidcall-font-ts: var(--raidcall-font-mono); } /* ========================================================================== Theme-independent structural rules — all values flow through the tokens, so these render identically to the pre-theme design under classic. ========================================================================== */ h1, h2, h3, h4 { font-family: var(--raidcall-font-display); } /* timestamps (dashboard feed, history, live console) */ .rc-ts { font-family: var(--raidcall-font-ts); } /* Red action surfaces keep a genuinely white label under the dark theme — text-white maps to the dark surface channel there, which would render a dark label on the red ground. */ [data-theme="modern"] .bg-fire { color: #fff; } /* active-alert pulse (was hardcoded rgba(211,47,47) in base.html) */ @keyframes pulse-fire { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--raidcall-fire) / 0.55); } 50% { box-shadow: 0 0 0 18px rgb(var(--raidcall-fire) / 0); } } .pulse-fire { animation: pulse-fire 1.6s ease-out infinite; } /* municipality badge on the public incident map */ .rc-map-marker { width: 30px; height: 30px; border-radius: 9999px; background: rgb(var(--raidcall-map-marker-bg)); color: rgb(var(--raidcall-map-marker-ring)); border: 3px solid rgb(var(--raidcall-map-marker-ring)); box-shadow: 0 2px 6px rgb(0 0 0 / 0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; } @keyframes rc-pin-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--raidcall-map-marker-bg) / 0.6); } 70% { box-shadow: 0 0 0 14px rgb(var(--raidcall-map-marker-bg) / 0); } } /* pulsing pins are part of the modern design only; classic keeps static pins */ [data-theme="modern"] .rc-map-marker--fresh { animation: rc-pin-pulse 1.8s ease-out infinite; } /* theme toggle (icon-only, top-right in the header) */ .rc-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--raidcall-radius-lg); border: 1px solid rgb(255 255 255 / 0.25); background: rgb(0 0 0 / 0.12); color: inherit; cursor: pointer; transition: background-color 0.15s; } .rc-theme-toggle:hover { background: rgb(0 0 0 / 0.25); } .rc-theme-toggle svg { width: 1.05rem; height: 1.05rem; } /* show the icon of the theme the click switches TO */ [data-theme="modern"] .rc-theme-toggle .rc-icon-moon { display: none; } [data-theme="classic"] .rc-theme-toggle .rc-icon-sun { display: none; } /* elements that exist only in the modern design (sidebar, taglines) */ [data-theme="classic"] .rc-modern-only { display: none !important; } /* Siren logo mark: red dot + expanding wave ring (the "circle and waves"). Used in the public marketing header + footer. */ .rc-siren { position: relative; display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 9999px; background: rgb(var(--raidcall-fire, 211 47 47)); background: #D32F2F; flex-shrink: 0; } [data-theme="modern"] .rc-siren { background: #F85149; } .rc-siren::after { content: ""; position: absolute; inset: -0.32rem; border-radius: 9999px; border: 2px solid #D32F2F; opacity: 0.5; animation: rc-siren-pulse 2s ease-out infinite; } [data-theme="modern"] .rc-siren::after { border-color: #F85149; } @keyframes rc-siren-pulse { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.45); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .rc-siren::after { animation: none; opacity: 0.35; } } /* Marketing pages (anonymous visitors, body.rc-mkt): the public web keeps the red brand accent, soft shadows and generous radii even under the dark theme — the amber ops accent belongs to the logged-in app only. */ [data-theme="modern"] .rc-mkt { --raidcall-fire: 248 81 73; /* #F85149 */ --raidcall-fire-dark: 218 54 51; /* #DA3633 */ --raidcall-fire-light: 49 34 39; /* 12 % fire over the #161B22 surface */ --raidcall-accent: 248 81 73; --raidcall-map-marker-bg: 248 81 73; --raidcall-radius-sm: 0.125rem; --raidcall-radius: 0.25rem; --raidcall-radius-md: 0.375rem; --raidcall-radius-lg: 0.5rem; --raidcall-radius-xl: 0.75rem; --raidcall-radius-2xl: 1rem; --raidcall-radius-3xl: 1.5rem; --raidcall-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --raidcall-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.3); --raidcall-shadow-md: 0 2px 4px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.32); --raidcall-shadow-lg: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 40px rgb(0 0 0 / 0.35); --raidcall-shadow-xl: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 40px rgb(0 0 0 / 0.35); --raidcall-shadow-2xl: 0 2px 4px rgb(0 0 0 / 0.45), 0 16px 48px rgb(0 0 0 / 0.4); } /* Page ground — everywhere, logged-in app included: never wall-to-wall white. A warm off-white ground with a fire glow at the top lets the white/surface cards actually read as surfaces; dark = #0D1117 under #161B22 (prototype). */ body { background-color: rgb(var(--raidcall-bg)); background-image: radial-gradient(56rem 26rem at 50% -8rem, rgb(211 47 47 / 0.08), transparent 70%); background-repeat: no-repeat; } [data-theme="modern"] body { background-image: radial-gradient(56rem 26rem at 50% -8rem, rgb(248 81 73 / 0.10), transparent 70%); } /* ---- Light theme only: the marketing chrome trades white for the brand red — red sticky header with white text/controls and an inverted (white) CTA. The dark theme keeps its surface header exactly as designed. ---- */ /* The marketing header is OPAQUE in both themes. A translucent bar shifts colour with whatever scrolls under it, while the browser chrome above it (theme-color) cannot follow — that mismatch reads as a stripe on iOS. */ :root[data-theme="modern"] .rc-mkt-header { background-color: rgb(var(--raidcall-surface)); backdrop-filter: none; } :root:not([data-theme="modern"]) .rc-mkt-header { background-color: rgb(211 47 47); border-color: rgb(183 28 28 / 0.45); backdrop-filter: none; } :root:not([data-theme="modern"]) .rc-mkt-header .rc-hdr-brand { color: #fff; } :root:not([data-theme="modern"]) .rc-mkt-header .rc-siren { background: #fff; } :root:not([data-theme="modern"]) .rc-mkt-header .rc-siren::after { border-color: #fff; } :root:not([data-theme="modern"]) .rc-mkt-header .rc-mkt-link { color: rgb(255 255 255 / 0.85); } :root:not([data-theme="modern"]) .rc-mkt-header .rc-mkt-link:hover { color: #fff; background: rgb(255 255 255 / 0.12); } :root:not([data-theme="modern"]) .rc-mkt-header .rc-mkt-link.rc-on { color: #fff; background: rgb(255 255 255 / 0.16); box-shadow: inset 0 -2px 0 #fff; } :root:not([data-theme="modern"]) .rc-mkt-header .rc-hdr-ghost { color: rgb(255 255 255 / 0.85); } :root:not([data-theme="modern"]) .rc-mkt-header .rc-hdr-ghost:hover { color: #fff; } :root:not([data-theme="modern"]) .rc-mkt-header .rc-hdr-chip, :root:not([data-theme="modern"]) .rc-mkt-header .rc-theme-toggle { background-color: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.28); color: #fff; } :root:not([data-theme="modern"]) .rc-mkt-header .rc-hdr-chip:hover, :root:not([data-theme="modern"]) .rc-mkt-header .rc-theme-toggle:hover { background-color: rgb(255 255 255 / 0.22); border-color: rgb(255 255 255 / 0.45); } :root:not([data-theme="modern"]) .rc-mkt-header .rc-hdr-cta { background-color: #fff; color: #D32F2F; } :root:not([data-theme="modern"]) .rc-mkt-header .rc-hdr-cta:hover { background-color: rgb(255 255 255 / 0.9); } /* Bottom tab bar (commander/member, MOBILE only — desktop uses the sidebar): reserve room so the content/footer never hide behind it; rc-bar-hidden slides it far enough down that the lifted centre button disappears too. */ @media (max-width: 767.98px) { body.rc-tabs { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); } } .rc-bottom-bar.rc-bar-hidden { transform: translateY(135%); } /* Marketing fullscreen menu (anonymous visitors, below lg). A full-bleed red panel with large links instead of a small white dropdown: the menu is part of the brand, not a system control. Links rise in one after another. */ .rc-mkt-menu { position: fixed; inset: 0; z-index: 60; /* classic = red brand panel; modern keeps the dark ground and uses red only as the accent, so the menu belongs to the theme instead of fighting it */ background: rgb(211 47 47); color: #fff; padding: 4.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; opacity: 0; transform: scale(1.03); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; overflow-y: auto; } .rc-mkt-menu.rc-open { opacity: 1; transform: scale(1); pointer-events: auto; } /* The cookie banner also sits at the bottom edge and would cover the menu's CTA. It steps aside while the menu is open and returns when it closes. */ body.rc-menu-open #cookie-banner { display: none; } .rc-mkt-menu-close { position: absolute; top: 0.85rem; right: 1.1rem; width: 2.4rem; height: 2.4rem; border-radius: 0.7rem; background: rgb(255 255 255 / 0.18); color: #fff; display: flex; align-items: center; justify-content: center; } .rc-mkt-menu-nav { display: flex; flex-direction: column; } .rc-mkt-menu-nav a { color: #fff; font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 800; letter-spacing: -0.03em; padding: 0.35rem 0; opacity: 0; transform: translateY(0.5rem); } .rc-mkt-menu-nav a[aria-current="page"] { opacity: 1; } .rc-mkt-menu-nav a[aria-current="page"]::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: #fff; vertical-align: 0.35em; margin-right: 0.55rem; } .rc-mkt-menu.rc-open .rc-mkt-menu-nav a { animation: rc-menu-rise 0.34s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; } .rc-mkt-menu.rc-open .rc-mkt-menu-nav a:nth-child(1) { animation-delay: 0.04s; } .rc-mkt-menu.rc-open .rc-mkt-menu-nav a:nth-child(2) { animation-delay: 0.08s; } .rc-mkt-menu.rc-open .rc-mkt-menu-nav a:nth-child(3) { animation-delay: 0.12s; } .rc-mkt-menu.rc-open .rc-mkt-menu-nav a:nth-child(4) { animation-delay: 0.16s; } .rc-mkt-menu.rc-open .rc-mkt-menu-nav a:nth-child(5) { animation-delay: 0.20s; } .rc-mkt-menu.rc-open .rc-mkt-menu-nav a:nth-child(6) { animation-delay: 0.24s; } .rc-mkt-menu.rc-open .rc-mkt-menu-nav a:nth-child(7) { animation-delay: 0.28s; } @keyframes rc-menu-rise { to { opacity: 1; transform: translateY(0); } } .rc-mkt-menu-foot { margin-top: auto; padding-top: 1.75rem; display: flex; flex-direction: column; gap: 0.55rem; } .rc-mkt-menu-cta { background: #fff; color: rgb(var(--raidcall-fire)); text-align: center; font-weight: 800; padding: 0.85rem; border-radius: 0.85rem; } .rc-mkt-menu-ghost { border: 1.5px solid rgb(255 255 255 / 0.55); color: #fff; text-align: center; font-weight: 700; padding: 0.75rem; border-radius: 0.85rem; } .rc-mkt-menu-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.35rem; font-size: 0.78rem; color: rgb(255 255 255 / 0.85); } .rc-mkt-menu-meta span { display: flex; gap: 0.15rem; } .rc-mkt-menu-meta a { color: inherit; padding: 0.25rem 0.4rem; border-radius: 0.4rem; } .rc-mkt-menu-meta a.rc-on { background: #fff; color: rgb(var(--raidcall-fire)); font-weight: 700; } @media (prefers-reduced-motion: reduce) { .rc-mkt-menu { transition: none; } .rc-mkt-menu.rc-open .rc-mkt-menu-nav a { animation: none; opacity: 1; transform: none; } } /* Dark theme: the panel is the page ground, not a red wall. Red survives as the CTA, the current-page dot and the active language. */ :root[data-theme="modern"] .rc-mkt-menu { background: rgb(var(--raidcall-bg)); color: rgb(var(--raidcall-ink)); } :root[data-theme="modern"] .rc-mkt-menu-close { background: rgb(var(--raidcall-surface)); border: 1px solid rgb(var(--raidcall-border)); color: rgb(var(--raidcall-ink)); } :root[data-theme="modern"] .rc-mkt-menu-nav a { color: rgb(var(--raidcall-ink)); } :root[data-theme="modern"] .rc-mkt-menu-nav a[aria-current="page"] { color: rgb(var(--raidcall-fire)); } :root[data-theme="modern"] .rc-mkt-menu-nav a[aria-current="page"]::before { background: rgb(var(--raidcall-fire)); } :root[data-theme="modern"] .rc-mkt-menu-cta { background: rgb(var(--raidcall-fire)); color: #fff; } :root[data-theme="modern"] .rc-mkt-menu-ghost { border-color: rgb(var(--raidcall-border)); color: rgb(var(--raidcall-ink)); } :root[data-theme="modern"] .rc-mkt-menu-meta { color: rgb(var(--raidcall-muted)); } :root[data-theme="modern"] .rc-mkt-menu-meta a.rc-on { background: rgb(var(--raidcall-fire)); color: #fff; } /* "Ostatné" bottom sheet (commander tab bar). A native-app sheet instead of a dropdown: dimmed backdrop + a panel that slides up from the bottom edge and can be swiped back down. Both parts live outside the tab bar so the bar's hide-on-scroll transform can't drag them along. */ .rc-sheet-backdrop { position: fixed; inset: 0; z-index: 45; background: rgb(9 11 15 / 0.55); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .rc-sheet-backdrop.rc-open { opacity: 1; pointer-events: auto; } .rc-sheet { position: fixed; inset: auto 0 0 0; z-index: 46; border-radius: 1.25rem 1.25rem 0 0; box-shadow: 0 -18px 40px -12px rgb(9 11 15 / 0.35); padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); transform: translateY(102%); transition: transform 0.26s cubic-bezier(0.22, 0.9, 0.3, 1); touch-action: none; } .rc-sheet.rc-open { transform: translateY(0); } /* while dragging, the finger drives the position - no easing fighting it */ .rc-sheet.rc-dragging { transition: none; } @media (prefers-reduced-motion: reduce) { .rc-sheet, .rc-sheet-backdrop { transition: none; } } /* Dropdown panels inside the app header: the .rc-header modern scope remaps white/fire for its own chrome, which turned the panels light-on-light in the dark theme. Re-scope the panel subtree back to page-level tokens. */ [data-theme="modern"] .rc-header .rc-hdr-menu > div { --raidcall-white: 22 27 34; --raidcall-fire: 248 81 73; --raidcall-fire-dark: 218 54 51; --raidcall-fire-light: 49 34 39; } /* Inverted CTA band: a full-red panel with a soft sheen. The button inside keeps a genuinely white ground in both themes (a bg-white utility would flip to the dark surface under the modern theme). */ .rc-fire-band { position: relative; overflow: hidden; color: #fff; } .rc-fire-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side at 78% -40%, rgb(255 255 255 / 0.22), transparent); pointer-events: none; } .rc-fire-band > * { position: relative; } .rc-band-btn { background: #fff; color: rgb(var(--raidcall-fire)); } .rc-band-btn:hover { background: rgb(255 255 255 / 0.9); } /* Red CTAs: really-white label (text-white maps to the surface channel in the dark theme, which would render dark-on-red) + the prototype's fire glow on buttons that carry a shadow class. */ .rc-mkt .bg-fire { color: #fff; } .rc-mkt .bg-fire.shadow, .rc-mkt .bg-fire.shadow-lg, .rc-mkt .bg-fire.shadow-xl { box-shadow: 0 6px 20px rgb(var(--raidcall-fire) / 0.35); } /* Marketing (anonymous) top nav: prototype decoration — pill background with a 2px fire baseline on the active item, nothing ever wraps. */ .rc-mkt-link { white-space: nowrap; } .rc-mkt-link:hover { background: rgb(var(--raidcall-gray-50, 249 250 251)); } .rc-mkt-link.rc-on { color: rgb(var(--raidcall-gray-900)); background: rgb(var(--raidcall-gray-50, 249 250 251)); box-shadow: inset 0 -2px 0 #D32F2F; } [data-theme="modern"] .rc-mkt-link.rc-on { box-shadow: inset 0 -2px 0 #F85149; } /* First-visit spotlight on the theme toggle: dim everything, lift the toggle above the veil and pulse it, with a small tooltip bubble underneath. */ .rc-theme-intro-overlay { position: fixed; inset: 0; background: rgb(0 0 0 / 0.55); z-index: 90; } .rc-theme-toggle.rc-theme-intro-hi { position: relative; z-index: 95; background: rgb(0 0 0 / 0.35); box-shadow: 0 0 0 4px rgb(255 255 255 / 0.9), 0 0 0 9px rgb(211 47 47 / 0.55); animation: rc-theme-intro-pulse 1.6s ease-in-out infinite; } @keyframes rc-theme-intro-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgb(255 255 255 / 0.9), 0 0 0 9px rgb(211 47 47 / 0.55); } 50% { box-shadow: 0 0 0 4px rgb(255 255 255 / 0.9), 0 0 0 14px rgb(211 47 47 / 0.25); } } .rc-theme-intro-tip { position: fixed; z-index: 95; max-width: 15rem; background: #ffffff; color: #111827; font-size: 0.8rem; font-weight: 600; line-height: 1.35; padding: 0.6rem 0.8rem; border-radius: 0.75rem; box-shadow: 0 8px 24px rgb(0 0 0 / 0.35); } /* ========================================================================== MODERN chrome — the few places where plain scale inversion is wrong. Header/footer are re-mapped by *scoping* different token values onto them, so even these exceptions stay inside the variable system. ========================================================================== */ [data-theme="modern"] body { background-color: rgb(var(--raidcall-bg)); } /* Header: classic is a solid red bar; modern is a flat dark bar with a 1px bottom border. bg-fire inside this scope = surface, hover = border. */ [data-theme="modern"] .rc-header { --raidcall-fire: 22 27 34; --raidcall-fire-dark: 48 54 61; --raidcall-white: 230 237 243; border-bottom: 1px solid rgb(var(--raidcall-border)); } /* primary CTA in the header (login) gets the red accent */ [data-theme="modern"] .rc-header .rc-cta { background-color: rgb(var(--raidcall-accent)); color: rgb(var(--raidcall-accent-ink)); } [data-theme="modern"] .rc-header .rc-cta:hover { background-color: rgb(218 54 51); } /* Footer: classic is already dark (bg-gray-900 + light grays); under the inverted scale that would flip light. Re-scope it back to a dark footer. */ [data-theme="modern"] .rc-footer { --raidcall-gray-900: 10 13 18; --raidcall-white: 230 237 243; --raidcall-gray-200: 201 209 217; --raidcall-gray-300: 139 148 158; --raidcall-gray-400: 110 118 129; border-top: 1px solid rgb(var(--raidcall-border)); } /* Form fields: native inputs have no bg utility on most pages */ [data-theme="modern"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="modern"] textarea, [data-theme="modern"] select { background-color: rgb(var(--raidcall-field)); color: rgb(var(--raidcall-ink)); } [data-theme="modern"] ::placeholder { color: rgb(var(--raidcall-muted) / 0.8); } /* the row being dragged in the alert-type list: lifted off the page (a touch bigger + a drop shadow) so the finger obviously "holds" it, while the rows it passes slide under it */ .rc-type-row { transition: transform 0.15s ease, box-shadow 0.15s ease; } .rc-type-row.rc-type-dragging { /* the lift itself is written inline by the drag script (it also carries the finger offset); no transform transition here or the row would lag behind */ transition: box-shadow 0.15s ease; box-shadow: 0 14px 28px -10px rgb(0 0 0 / 0.35); position: relative; z-index: 20; cursor: grabbing; user-select: none; } .rc-type-row.rc-type-dragging .rc-type-handle { color: rgb(var(--raidcall-fire)); cursor: grabbing; } @media (prefers-reduced-motion: reduce) { .rc-type-row { transition: none; } } /* alert-type tiles on the declare screen: each tile carries the type's own colour (set inline as --t-color / --t-tint), so the commander recognises "Požiar" by colour, not only by the emoji. Plain CSS - Tailwind cannot generate a utility per brigade-defined hex. */ .rc-type-tile { border-color: rgb(var(--raidcall-border, 229 231 235)); transition: border-color 0.15s, background-color 0.15s; } .rc-type-tile .rc-type-emoji { background-color: var(--t-tint, transparent); border-radius: 0.6rem; width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; } input:checked + .rc-type-tile { border-color: var(--t-color, rgb(var(--raidcall-fire))); background-color: var(--t-tint, transparent); } input:focus-visible + .rc-type-tile { outline: 2px solid var(--t-color, rgb(var(--raidcall-fire))); outline-offset: 2px; } /* status stripes: left color edge on cards, drawn as an inset shadow so the toggle causes zero layout shift */ [data-theme="modern"] .rc-stripe-danger { box-shadow: inset 3px 0 0 rgb(var(--raidcall-red-500)); } [data-theme="modern"] .rc-stripe-ok { box-shadow: inset 3px 0 0 rgb(var(--raidcall-green-500)); } [data-theme="modern"] .rc-stripe-warn { box-shadow: inset 3px 0 0 rgb(var(--raidcall-amber-500)); } /* the alert trigger button: subtle scale on hover (the only motion besides map-pin pulse) */ [data-theme="modern"] .rc-trigger:hover { transform: scale(1.015); } /* MapLibre chrome on the dark basemap */ [data-theme="modern"] .maplibregl-ctrl-group { background: rgb(var(--raidcall-surface)); box-shadow: 0 0 0 1px rgb(var(--raidcall-border)); } [data-theme="modern"] .maplibregl-ctrl-group button + button { border-top-color: rgb(var(--raidcall-border)); } [data-theme="modern"] .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(0.9); } [data-theme="modern"] .maplibregl-ctrl-attrib { background: rgb(var(--raidcall-surface) / 0.8); color: rgb(var(--raidcall-muted)); } [data-theme="modern"] .maplibregl-ctrl-attrib a { color: rgb(var(--raidcall-muted)); } [data-theme="modern"] .maplibregl-popup-content { background: rgb(var(--raidcall-surface)); color: rgb(var(--raidcall-ink)); box-shadow: 0 0 0 1px rgb(var(--raidcall-border)); } [data-theme="modern"] .maplibregl-popup-tip { border-top-color: rgb(var(--raidcall-surface)); } /* ========================================================================== App sidebar (commander + member, wide screens, BOTH themes): clear desktop navigation; the bottom tab bar serves mobile only. The body gets left padding so header/main/footer all clear the fixed rail. ========================================================================== */ #rc-sidebar { display: none; } @media (min-width: 1024px) { body.rc-has-sidebar { padding-left: 248px; } #rc-sidebar { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: 248px; z-index: 50; background: rgb(var(--raidcall-surface)); border-right: 1px solid rgb(var(--raidcall-border)); color: rgb(var(--raidcall-ink)); font-family: var(--raidcall-font-sans); overflow-y: auto; } } .rc-side-brand { display: flex; align-items: center; gap: 0.5rem; padding: 0.95rem 1rem; font-family: var(--raidcall-font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; border-bottom: 1px solid rgb(var(--raidcall-border)); color: rgb(var(--raidcall-ink)); } .rc-side-brand img { width: 1.75rem; height: 1.75rem; } .rc-side-brigade { padding: 0.85rem 1rem 0.35rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--raidcall-muted)); } .rc-side-brigade b { display: block; font-size: 0.9rem; letter-spacing: 0; text-transform: none; color: rgb(var(--raidcall-ink)); margin-top: 0.15rem; } .rc-side-stats { display: grid; gap: 0.45rem; padding: 0.6rem 0.75rem 0.9rem; border-bottom: 1px solid rgb(var(--raidcall-border)); } .rc-side-stat { background: rgb(var(--raidcall-surface-2)); border: 1px solid rgb(var(--raidcall-border)); border-radius: var(--raidcall-radius-xl); padding: 0.5rem 0.7rem; } .rc-side-stat .rc-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: rgb(var(--raidcall-muted)); } .rc-side-stat .rc-value { font-size: 1.15rem; font-weight: 700; font-family: var(--raidcall-font-display); color: rgb(var(--raidcall-ink)); } .rc-side-stat .rc-value.rc-ts { font-family: var(--raidcall-font-ts); font-size: 0.82rem; font-weight: 600; } .rc-side-nav { display: flex; flex-direction: column; padding: 0.6rem 0; flex: 1; } .rc-side-nav a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem; font-size: 0.875rem; font-weight: 600; color: rgb(var(--raidcall-gray-600)); border-left: 3px solid transparent; } .rc-side-nav a:hover { background: rgb(var(--raidcall-surface-2)); color: rgb(var(--raidcall-ink)); } .rc-side-nav a.rc-active { background: rgb(var(--raidcall-surface-2)); border-left-color: rgb(var(--raidcall-accent)); color: rgb(var(--raidcall-ink)); } .rc-side-nav a .rc-ico { width: 1.25rem; text-align: center; } .rc-side-foot { padding: 0.75rem 1rem; border-top: 1px solid rgb(var(--raidcall-border)); font-size: 0.8rem; } .rc-side-foot a { color: rgb(var(--raidcall-muted)); font-weight: 600; } .rc-side-foot a:hover { color: rgb(var(--raidcall-ink)); } /* --- phone mockup bezel (see templates/_phone_mockup.html) ------------------- A real phone has a dark bezel. Light (classic) theme: near-black frame that reads as a phone, not a grey box. Dark (modern) theme: a slightly lighter charcoal so the edge stays visible against the dark page background. The screen wrapper matches the bezel so rounded-corner clipping shows no sliver. */ .rc-phone-frame, .rc-phone-screen { background: #0f1115; } [data-theme="modern"] .rc-phone-frame, [data-theme="modern"] .rc-phone-screen { background: #262b33; } /* "How it works" sticky phone backdrop (mobile): a page-coloured translucent band so the step text scrolling behind the pinned phone is masked WITHOUT a visible lighter box. Matches the page background in both themes; the phone's own shadow provides the separation. Transparent from md up (side-pinned). */ .hiw-phone-sticky { background-color: rgb(var(--raidcall-bg) / 0.92); } @media (min-width: 768px) { .hiw-phone-sticky { background-color: transparent; } }