/* * Emaar Al Diyafa brand layer. * * WHY THIS FILE EXISTS * Skote ships Bootstrap 5.0.0-beta2, which declares --bs-primary in :root but never * reads it — var()-driven theming only arrived in 5.2. Setting --bs-primary to gold * changes nothing. The template's indigo #556ee6 is hardcoded ~35x in bootstrap.min.css * and ~80x in app.min.css (plus identical counts in their -dark twins), and there is no * SCSS source and no build step, so the brand colour cannot be recompiled. * * The override therefore re-declares the reachable selectors here. Loaded LAST in * _Head.cshtml and _AuthLayout.cshtml, so at equal specificity it wins on source order — * including over !important rules, which lose to a later !important. It also sits outside * the light/dark switcher, which only rewrites the href on #bootstrap-style / #app-style, * so one file covers both themes. Same strategy as sidebar-custom.css. * * Only selectors this app actually renders are restated. Most of app.min.css's indigo * belongs to unreachable Skote demo components (gmaps, wizards, product swatches, * ion-rangeslider, owl carousels) and is deliberately left alone. * * COLOUR SPLIT — this is a legibility rule, not a preference. * white on #B59349 (Gold) = 2.90:1 fails WCAG AA * white on #9A692B (Gold Copper) = 4.70:1 passes * #B59349 on #2a3042 (sidebar) = 4.53:1 passes * So anything carrying small text uses Copper; Gold carries the identity everywhere it is * decorative — borders, tints, focus rings, gradients, and the dark sidebar, where it passes. * * TYPOGRAPHY is intentionally untouched. Trajan Pro / DIN Next LT Arabic are licensed * faces with no webfont files in the repo. When they arrive: add @font-face here plus * :root{--bs-font-sans-serif:...} — that variable IS consumed by this Bootstrap build. */ :root { /* Raw palette — fixed values, never theme-dependent. */ --brand-gold: #B59349; /* Pantone 1245 C — identity */ --brand-gold-rgb: 181, 147, 73; --brand-copper: #9A692B; /* Pantone 724 C */ --brand-copper-rgb: 154, 105, 43; --brand-copper-dark: #8A5F26; /* hover */ --brand-copper-darker: #75501F; /* pressed */ --brand-light-grey: #F1F1F1; /* Pantone 538 C */ --brand-off-white: #E2DBCB; /* Pantone 454 C */ --brand-gradient: linear-gradient(90deg, #9A692B 0%, #B59349 55%, #D9B45F 100%); /* Semantic — INK is the brand colour for text on the page surface, FILL is the brand colour for solid blocks carrying white text. They diverge by theme; see below. */ --brand-ink: var(--brand-copper); --brand-ink-hover: var(--brand-copper-dark); --brand-fill: var(--brand-copper); /* Surfaces — consumed by task-cards.css, dashboard.css and the _CommentsChat panel, none of which the theme switcher touches. One set, four consumers. */ --surface-card: #fff; --surface-sunken: #f1f3f7; --surface-hover: #f8f9fa; --surface-line: #eff2f7; --surface-line-strong: #c9cfde; --surface-ring: #fff; --surface-text: #495057; --shadow-color: rgba(18, 38, 63, .18); /* card lift */ --shadow-color-soft: rgba(18, 38, 63, .10); /* chat bubbles, avatar rings */ } /* ── Dark theme ─────────────────────────────────────────────────────────────── * data-theme is stamped on by the inline script in _Head.cshtml / _AuthLayout.cshtml. * It exists because Skote's switcher rewrites only the #bootstrap-style / #app-style hrefs * and sets no class or attribute — without the stamp nothing here could react at all. * * THE PALETTE INVERTS, and this is the whole point of splitting ink from fill: * copper #9A692B on the dark card #2a3042 = 2.8:1 (fails) * gold #B59349 on the dark card #2a3042 = 5.1:1 (passes) * So INK becomes gold. FILL stays copper — white on copper is 4.70:1 regardless of what * is behind the block, so solid brand buttons and badges are correct in both themes. * * #32394e is the vendor's single hairline colour in dark (borders, tables, modals, * dropdowns). Matching it is what keeps our components looking native. */ html[data-theme="dark"] { /* Warm charcoal, replacing Skote's blue-navy (#222736 / #2a3042 / #32394e). The stock dark build is cool-toned and actively fights a warm gold identity — gold on navy reads as an accent bolted onto someone else's theme. These are neutral-warm greys drawn toward the brand, so gold sits inside the family instead of on top of it. It also measures better: gold on #24201B is 5.57:1 against 4.52:1 on the navy card. */ --dk-page: #1B1815; --dk-card: #24201B; --dk-raised: #2C2721; /* topbar, footer, inputs — one step above the card */ --dk-line: #3A342C; --dk-line-strong: #4A4238; --dk-text: #C9C2B6; /* 9.15:1 on the card */ --dk-muted: #9A9287; /* 5.26:1, and dimmer than body text */ --brand-ink: var(--brand-gold); --brand-ink-hover: #C9A961; --surface-card: var(--dk-card); --surface-sunken: var(--dk-raised); --surface-hover: var(--dk-raised); --surface-line: var(--dk-line); --surface-line-strong: var(--dk-line-strong); --surface-ring: var(--dk-card); --surface-text: var(--dk-text); --shadow-color: rgba(0, 0, 0, .45); --shadow-color-soft: rgba(0, 0, 0, .30); } /* ══ Bootstrap layer ═══════════════════════════════════════════════════════════ * Mirrors the shape of the rules in bootstrap.min.css, !important included where * the original carries it. */ /* ── Links ────────────────────────────────────────────────────────────────── * Text on the page surface, so these take INK — copper on light, gold on dark. */ a { color: var(--brand-ink); } a:hover { color: var(--brand-ink-hover); } .link-primary { color: var(--brand-ink); } .link-primary:focus, .link-primary:hover { color: var(--brand-ink-hover); } .btn-link { color: var(--brand-ink); } .btn-link:hover { color: var(--brand-ink-hover); } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .btn-primary { color: #fff; background-color: var(--brand-copper); border-color: var(--brand-copper); } .btn-primary:hover { color: #fff; background-color: var(--brand-copper-dark); border-color: var(--brand-copper-dark); } .btn-check:focus + .btn-primary, .btn-primary:focus { color: #fff; background-color: var(--brand-copper-dark); border-color: var(--brand-copper-dark); -webkit-box-shadow: 0 0 0 .15rem rgba(var(--brand-gold-rgb), .5); box-shadow: 0 0 0 .15rem rgba(var(--brand-gold-rgb), .5); } .btn-check:active + .btn-primary, .btn-check:checked + .btn-primary, .btn-primary.active, .btn-primary:active, .show > .btn-primary.dropdown-toggle { color: #fff; background-color: var(--brand-copper-darker); border-color: var(--brand-copper-darker); } .btn-primary.disabled, .btn-primary:disabled { color: #fff; background-color: var(--brand-copper); border-color: var(--brand-copper); } /* Resting outline is text-on-surface (INK); the hover state becomes a fill carrying white, so it reverts to copper. */ .btn-outline-primary { color: var(--brand-ink); border-color: var(--brand-ink); } .btn-outline-primary:hover { color: #fff; background-color: var(--brand-copper); border-color: var(--brand-copper); } .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus { -webkit-box-shadow: 0 0 0 .15rem rgba(var(--brand-gold-rgb), .5); box-shadow: 0 0 0 .15rem rgba(var(--brand-gold-rgb), .5); } .btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active { color: #fff; background-color: var(--brand-copper); border-color: var(--brand-copper); } .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--brand-ink); background-color: transparent; } /* ── Soft action buttons ────────────────────────────────────────────────────── * The row actions in every list page were three saturated blocks (blue view, green * edit, red delete) — loud on a long table, and the blue/green were stock Skote * semantics rather than anything meaningful. These are the quiet equivalents: a tinted * square with a coloured glyph, matching the .bg-soft-* badge language already used for * every status, role and priority chip, so the table reads as one system. * * The hierarchy is deliberate: view is neutral (passive), edit carries the single brand * accent in the row, delete stays red so the dangerous one still announces itself. * Hover deepens the tint rather than changing hue — the colour already said what it is. */ .btn-soft-secondary, .btn-soft-primary, .btn-soft-success, .btn-soft-warning, .btn-soft-danger { border: none; } .btn-soft-secondary { background-color: rgba(116, 120, 141, .15); color: #74788d; } .btn-soft-secondary:hover, .btn-soft-secondary:focus { background-color: rgba(116, 120, 141, .28); color: #5d6070; } .btn-soft-primary { background-color: rgba(var(--brand-gold-rgb), .18); color: var(--brand-ink); } .btn-soft-primary:hover, .btn-soft-primary:focus { background-color: rgba(var(--brand-gold-rgb), .32); color: var(--brand-ink-hover); } /* Success and warning exist for the controls whose colour carries real meaning — the schedule pause/resume pair and the user activate/deactivate toggle. They are softened to match the language, not recoloured, because the hue is the message there. */ .btn-soft-success { background-color: rgba(52, 195, 143, .15); color: #2a9c74; } .btn-soft-success:hover, .btn-soft-success:focus { background-color: rgba(52, 195, 143, .28); color: #218060; } .btn-soft-warning { background-color: rgba(241, 180, 76, .18); color: #b6812a; } .btn-soft-warning:hover, .btn-soft-warning:focus { background-color: rgba(241, 180, 76, .32); color: #96691f; } /* The glyph is a deepened red, not Skote's #f46a6a: that measures 2.95:1 on white, under even the 3:1 floor for non-text UI. The tint stays the lighter brand red. */ .btn-soft-danger { background-color: rgba(244, 106, 106, .15); color: #d64545; } .btn-soft-danger:hover, .btn-soft-danger:focus { background-color: rgba(244, 106, 106, .28); color: #bf3a3a; } /* On the warm dark ground the neutral tint disappears and the reds/greys need lifting. */ html[data-theme="dark"] .btn-soft-secondary { background-color: rgba(255, 255, 255, .10); color: var(--dk-muted); } html[data-theme="dark"] .btn-soft-secondary:hover, html[data-theme="dark"] .btn-soft-secondary:focus { background-color: rgba(255, 255, 255, .18); color: var(--dk-text); } html[data-theme="dark"] .btn-soft-success { background-color: rgba(52, 195, 143, .20); color: #5fd3ac; } html[data-theme="dark"] .btn-soft-warning { background-color: rgba(241, 180, 76, .20); color: #f0c274; } html[data-theme="dark"] .btn-soft-danger { background-color: rgba(244, 106, 106, .20); color: #f78b8b; } html[data-theme="dark"] .btn-soft-danger:hover, html[data-theme="dark"] .btn-soft-danger:focus { background-color: rgba(244, 106, 106, .32); color: #ffa5a5; } /* Generic focus ring — every button in the app, not just primary. */ .btn-check:focus + .btn, .btn:focus { -webkit-box-shadow: 0 0 0 .15rem rgba(var(--brand-gold-rgb), .25); box-shadow: 0 0 0 .15rem rgba(var(--brand-gold-rgb), .25); } /* app.min.css adds `label { margin-bottom: .5rem }` — stock Bootstrap 5 Reboot does not — and .btn never resets it. A btn-check segmented control is built from