/* * TNT Trading Partners - Theme Stylesheet * * Extracted from base.html and restructured for theming. Appearance is driven * by two attributes on : * data-theme = "dark" | "light" (default: dark) * data-color = "tnt" | "ocean" | "emerald" | "violet" (default: tnt) * * The default (dark + tnt) is pixel-identical to the previous hardcoded look. * Rules consume semantic tokens (--bg/--fg/--surface/--brand/--gradient/...), * so flipping theme or color recolors the whole app. The raw --tnt-* brand * palette is kept intact for any template that references it directly. */ :root { /* --- Fixed TNT brand palette (kept for back-compat with inline styles) --- */ --tnt-red: #C92A2A; --tnt-orange: #E85D04; --tnt-yellow: #F59F00; --tnt-gold: #D4850D; --tnt-navy: #1A365D; --tnt-black: #0D0D0D; --tnt-charcoal: #1A1A1A; --tnt-dark: #141414; --tnt-gray: #2D2D2D; --tnt-gray-light: #9A9A9A; --tnt-white: #FFFFFF; --tnt-offwhite: #F5F5F5; --tnt-gradient: linear-gradient(135deg, var(--tnt-red), var(--tnt-orange), var(--tnt-yellow)); /* --- Semantic surface/text tokens: default to dark --- */ --bg: var(--tnt-black); --fg: var(--tnt-white); --surface: var(--tnt-charcoal); --surface-2: var(--tnt-gray); --border: var(--tnt-gray); --border-strong: var(--tnt-gray-light); --muted: #b0b0b0; /* light gray — meets 4.5:1 on --surface-2 (#2d2d2d); was #9a9a9a (3.5:1) */ --nav-bg: rgba(13, 13, 13, 0.95); --nav-bg-scrolled: rgba(13, 13, 13, 0.98); /* --- Semantic brand/accent tokens: default to TNT color theme --- */ --brand: var(--tnt-orange); --brand-strong: var(--tnt-red); --gradient: var(--tnt-gradient); --brand-glow: rgba(232, 93, 4, 0.4); --brand-glow-soft: rgba(232, 93, 4, 0.3); } /* ===================== THEME: light ===================== */ /* Softer light mode (after p54 / tv2gemini): a gray page with white cards that pop, a slightly darker "frame" for navbar/footer, and low-contrast borders — not an offensively bright pure-white surface everywhere. */ [data-theme="light"] { --bg: #f5f5f5; /* page background (soft gray) */ --fg: #1a1a1a; --surface: #ffffff; /* cards — white so they pop off the page */ --surface-2: #e2e6ea; /* frame: navbar / footer / secondary surfaces */ --border: rgba(0, 0, 0, 0.10); --border-strong: rgba(0, 0, 0, 0.18); --muted: #5f5f5f; /* slightly darker for 4.5:1 on the light --surface-2 frame */ --nav-bg: rgba(226, 230, 234, 0.95); --nav-bg-scrolled: rgba(226, 230, 234, 0.98); } /* ===================== COLOR THEMES ===================== */ /* TNT is the default (declared in :root); listed here for completeness. */ [data-color="tnt"] { --brand: var(--tnt-orange); --brand-strong: var(--tnt-red); --gradient: var(--tnt-gradient); --brand-glow: rgba(232, 93, 4, 0.4); --brand-glow-soft: rgba(232, 93, 4, 0.3); } [data-color="ocean"] { --brand: #0EA5E9; --brand-strong: #2563EB; --gradient: linear-gradient(135deg, #2563EB, #0EA5E9, #22D3EE); --brand-glow: rgba(14, 165, 233, 0.4); --brand-glow-soft: rgba(14, 165, 233, 0.3); } [data-color="emerald"] { --brand: #10B981; --brand-strong: #059669; --gradient: linear-gradient(135deg, #059669, #10B981, #34D399); --brand-glow: rgba(16, 185, 129, 0.4); --brand-glow-soft: rgba(16, 185, 129, 0.3); } [data-color="violet"] { --brand: #8B5CF6; --brand-strong: #7C3AED; --gradient: linear-gradient(135deg, #7C3AED, #8B5CF6, #A78BFA); --brand-glow: rgba(139, 92, 246, 0.4); --brand-glow-soft: rgba(139, 92, 246, 0.3); } /* ===================== A11Y CONTRAST OVERRIDES (axe-verified) ===================== Bootstrap's default semantic colors and brand-orange-as-text don't meet WCAG 4.5:1 on our themed surfaces, so tune them per theme. --brand-ink is a contrast-safe brand text color; --link-ink a safe plain-link blue. */ /* Contrast-safe brand text ink + Bootstrap's link-color token, per theme. Setting --bs-link-color (rather than a high-specificity `a` rule) fixes plain links without clobbering components that set their own link color. */ :root { --brand-ink: #fb8b3c; /* dark default */ --bs-link-color: #6ea8fe; --bs-link-color-rgb: 110, 168, 254; --bs-link-hover-color: #8bb9ff; --bs-link-hover-color-rgb: 139, 185, 255; } [data-theme="light"] { --brand-ink: #9a3d0a; --bs-link-color: #0a58ca; --bs-link-color-rgb: 10, 88, 202; --bs-link-hover-color: #084298; --bs-link-hover-color-rgb: 8, 66, 152; } .dropzone-link { color: var(--brand-ink); } /* Bootstrap semantic text/inline-code — brighten on dark, deepen on light. */ [data-theme="dark"] .text-danger, [data-theme="dark"] .btn-outline-danger { color: #f28b95 !important; } [data-theme="dark"] .text-success { color: #45d68a !important; } /* Badge utilities: darken so white text passes even on a dimmed/disabled card. */ .badge.bg-secondary { background-color: #4b5563 !important; } .badge.bg-danger { background-color: #b02a37 !important; } [data-theme="dark"] .text-secondary, [data-theme="dark"] .btn-outline-secondary { color: #adb5bd; border-color: #6c757d; } [data-theme="dark"] code { color: #f087c0; } [data-theme="light"] code { color: #a3195b; } /* ===================== BASE ===================== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--bg); color: var(--fg); line-height: 1.6; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; } /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--surface); } ::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 4px; } /* Skip link for accessibility */ .skip-link { position: absolute; top: -50px; left: 0; background: var(--brand); color: var(--tnt-white); padding: 12px 24px; z-index: 9999; text-decoration: none; font-weight: 600; border-radius: 0 0 8px 0; transition: top 0.3s; } .skip-link:focus { top: 0; } /* Navbar styling */ .navbar { background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-strong); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); transition: all 0.3s ease; } .navbar.scrolled { background: var(--nav-bg-scrolled); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); } /* 3-class selectors so they override Bootstrap's .navbar-dark .navbar-nav .nav-link (otherwise links are white and invisible in light mode). */ .navbar .navbar-nav .nav-link { color: var(--fg); font-weight: 500; padding: 0.5rem 1rem; transition: color 0.3s ease; position: relative; } /* Dropdown toggles are native