/* * balto-theme.css * --------------------------------------------------------------- * BALTO visual refresh — drop-in override layer * Sits after bootstrap.min.css and style.css in the * Remove this single file to revert everything instantly * * Scope: layouts.inner, layouts.large, layouts.main * Strategy: no structural changes, no class renames, no JS * --------------------------------------------------------------- */ /* ============================================================ DESIGN TOKENS ============================================================ */ :root { --bt-canvas: #EDEAE4; /* warm off-white page background */ --bt-surface: #F5F3EF; /* cards, panels, inputs */ --bt-border: #D4CFC6; /* subtle borders */ --bt-gold: #C8943A; /* primary accent (replaces red) */ --bt-gold-dark: #A67828; /* hover state for gold */ --bt-felt: #3D6B56; /* success / positive */ --bt-navy: #0b1f22; /* keep existing navbar dark */ --bt-text: #2A3040; /* body text (slightly softer) */ --bt-muted: #6B7280; /* secondary text */ --bt-danger: #C0392B; /* keep red for actual errors only */ } /* ============================================================ PAGE BACKGROUND — warm off-white instead of stark white ============================================================ */ body { background-color: var(--bt-canvas) !important; color: var(--bt-text); } /* ============================================================ NAVBAR — keep the existing dark #0b1f22 but swap red hover accent for gold ============================================================ */ .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { border-bottom: 5px solid var(--bt-gold) !important; color: #fff !important; } .navbar-default .navbar-nav > li.active > a, .navbar-default .navbar-nav > li.active > a:hover, .navbar-default .navbar-nav > li.active > a:focus { border-bottom: 5px solid var(--bt-gold) !important; background-color: transparent !important; color: #fff !important; } /* ============================================================ PANELS — Bootstrap 3 .panel-* Off-white background, softer borders, subtle shadow ============================================================ */ .panel { background-color: var(--bt-surface) !important; border-color: var(--bt-border) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07) !important; border-radius: 6px !important; } .panel-default > .panel-heading { background-color: #E8E4DC !important; border-color: var(--bt-border) !important; color: var(--bt-text) !important; border-radius: 6px 6px 0 0 !important; } /* Replace the red primary panel accent with gold */ .panel-primary > .panel-heading { background-color: var(--bt-gold) !important; border-color: var(--bt-gold-dark) !important; color: #fff !important; } .panel-primary { border-color: var(--bt-gold) !important; } /* Replace danger/red panel with a softer warm tone */ .panel-danger > .panel-heading { background-color: #C0392B !important; border-color: #A93226 !important; } /* Success panel — use felt green */ .panel-success > .panel-heading { background-color: var(--bt-felt) !important; border-color: #2E5240 !important; color: #fff !important; } .panel-success { border-color: var(--bt-felt) !important; } /* ============================================================ WELLS — used in some dashboard sections ============================================================ */ .well { background-color: var(--bt-surface) !important; border-color: var(--bt-border) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important; } /* ============================================================ TABLES — remove pure white, soften header ============================================================ */ .table > thead > tr > th { background-color: #E4E0D8 !important; border-color: var(--bt-border) !important; color: var(--bt-text) !important; font-weight: 600; } .table > tbody > tr > td, .table > tbody > tr > th { border-color: var(--bt-border) !important; background-color: var(--bt-surface) !important; } .table-striped > tbody > tr:nth-of-type(odd) > td, .table-striped > tbody > tr:nth-of-type(odd) > th { background-color: var(--bt-canvas) !important; } .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #E2DDD5 !important; } /* ============================================================ BUTTONS — swap red/danger default accents, keep Bootstrap danger button red (it's intentional there) ============================================================ */ .btn-primary { background-color: var(--bt-gold) !important; border-color: var(--bt-gold-dark) !important; color: #1A2030 !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--bt-gold-dark) !important; border-color: #8C6520 !important; color: #1A2030 !important; } .btn-default { background-color: var(--bt-surface) !important; border-color: var(--bt-border) !important; color: var(--bt-text) !important; } .btn-default:hover, .btn-default:focus { background-color: #E2DDD5 !important; border-color: #BDB8AF !important; color: var(--bt-text) !important; } .btn-success { background-color: var(--bt-felt) !important; border-color: #2E5240 !important; color: #fff !important; } .btn-success:hover, .btn-success:focus { background-color: #2E5240 !important; border-color: #1E3A2C !important; color: #fff !important; } /* ============================================================ FORMS — inputs on warm background ============================================================ */ .form-control { background-color: #FAF9F6 !important; border-color: var(--bt-border) !important; color: var(--bt-text) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important; } .form-control:focus { border-color: var(--bt-gold) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), 0 0 0 3px rgba(200,148,58,0.15) !important; } /* ============================================================ ALERTS — replace garish Bootstrap red with softer tones ============================================================ */ .alert-danger, .alert-error { background-color: #F9EDEB !important; border-color: #E8C4C0 !important; color: #7D2D26 !important; } .alert-success { background-color: #EAF3EE !important; border-color: #B8D8C4 !important; color: #2A5240 !important; } .alert-info { background-color: #EAF0F8 !important; border-color: #B8CCE4 !important; color: #284878 !important; } .alert-warning { background-color: #FBF4E6 !important; border-color: #F0D898 !important; color: #7A5A10 !important; } /* ============================================================ LABELS / BADGES — soften the red default ============================================================ */ .label-default { background-color: var(--bt-muted) !important; } .label-primary, .badge { background-color: var(--bt-gold) !important; color: #1A2030 !important; } .label-success { background-color: var(--bt-felt) !important; } /* ============================================================ TOURNAMENT BRACKET — preserve existing dark canvas, just soften any pure-white internal boxes ============================================================ */ [data-info="large"] .bracket-match, [data-info="large"] .match-box, [data-info="large"] .bracket-cell { background-color: var(--bt-surface) !important; border-color: var(--bt-border) !important; } /* ============================================================ LOGIN / AUTH PAGES (layouts.main) ============================================================ */ [data-info="inner"].main-page, body[data-info="inner"] .login-box, body[data-info="inner"] .auth-box { background-color: var(--bt-surface) !important; border-color: var(--bt-border) !important; } /* The inline border style on main.blade.php: background-color: #f3f2f2; border: 1px solid #5e7064 We can't override inline styles easily, but the surrounding page bg change will still improve the overall feel */ /* ============================================================ MISC — page content wrapper, score entry containers ============================================================ */ .container-fluid.home1 { background-color: var(--bt-canvas) !important; } /* Any remaining pure-white card-like divs inside the content area */ .content-wrapper, .page-wrapper, .inner-content { background-color: var(--bt-canvas) !important; } /* Score entry and match forms — lighten the background */ .match-entry, .score-entry, .schedule-form { background-color: var(--bt-surface) !important; } /* ============================================================ SCROLLBAR — subtle warm tint (Chrome/Edge) ============================================================ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bt-canvas); } ::-webkit-scrollbar-thumb { background: #C4BFB6; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #A8A39A; }