/* ================================================================ style-presets.css Loaded after core.css and custom.css. Zero !important. Two-tier CSS variable strategy: Tier 1 — :root-level vars (--bs-border-radius etc.): set on [data-style] on , cascades to all children. Tier 2 — .card-level vars (--bs-card-*): set directly on [data-style] .card to override the local declaration. All rules are inert until a data-style value is set on . Classic preset has no rules — core.css appearance preserved. ================================================================ */ /* ── Universal tokens on :root (safe defaults, no visual change) ── */ :root { --style-font-family: 'Public Sans', system-ui, 'Noto Sans Thai', sans-serif; --style-heading-weight: 600; --style-heading-tracking: normal; --style-btn-hover-lift: translateY(-1px); --style-card-blur: 0px; } /* ── Component rules — scoped under [data-style], inert otherwise ── */ [data-style] body, [data-style] .font-body { font-family: var(--style-font-family); } [data-style] h1, [data-style] h2, [data-style] h3, [data-style] h4, [data-style] h5, [data-style] h6 { font-family: var(--style-font-family); font-weight: var(--style-heading-weight); letter-spacing: var(--style-heading-tracking); } [data-style] .btn { transition: transform 0.15s ease, box-shadow 0.15s ease; } [data-style] .btn:hover { transform: var(--style-btn-hover-lift); } [data-style="glass"] .card { backdrop-filter: blur(var(--style-card-blur)); -webkit-backdrop-filter: blur(var(--style-card-blur)); } /* ── CLASSIC — no rules needed, core.css appearance preserved exactly ── */ /* ── LUXE ── */ /* Tier 1: override :root-level vars on html */ [data-style="luxe"] { --style-font-family: 'Playfair Display', 'Manrope', 'Noto Sans Thai', system-ui, serif; --style-heading-weight: 600; --style-heading-tracking: 0.03em; --style-btn-hover-lift: translateY(-2px); --bs-border-radius: 0.5rem; } /* Tier 2: override .card-level vars directly on .card */ [data-style="luxe"] .card { --bs-card-border-radius: 0.75rem; --bs-card-box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), .15), 0 4px 24px rgba(0, 0, 0, .35), 0 0 20px rgba(var(--bs-primary-rgb), .08); } [data-style="luxe"] .btn-primary:hover { box-shadow: 0 0 14px rgba(var(--bs-primary-rgb), .4); } /* ── GLASS ── */ [data-style="glass"] { --style-font-family: 'Space Grotesk', 'Noto Sans Thai', system-ui, sans-serif; --style-btn-hover-lift: translateY(-2px); --style-card-blur: 16px; --bs-border-radius: 0.75rem; } [data-style="glass"] .card { --bs-card-border-color: rgba(255, 255, 255, 0.12); --bs-card-border-radius: 1rem; } [data-style="glass"][data-bs-theme="dark"] .card { --bs-card-bg: rgba(255, 255, 255, 0.05); } [data-style="glass"][data-bs-theme="light"] .card { --bs-card-bg: rgba(255, 255, 255, 0.55); } /* ── BRUTAL ── */ [data-style="brutal"] { --style-font-family: 'Barlow Condensed', 'Space Grotesk', 'Noto Sans Thai', system-ui, sans-serif; --style-heading-weight: 800; --style-heading-tracking: -0.01em; --style-btn-hover-lift: translate(2px, 2px); --bs-border-radius: 0.1rem; --bs-border-radius-sm: 0.1rem; --bs-border-radius-lg: 0.2rem; } [data-style="brutal"] .card { --bs-card-border-radius: 0.2rem; --bs-card-border-color: var(--bs-border-color); --bs-card-border-width: 2px; --bs-card-box-shadow: 4px 4px 0 var(--bs-border-color); } [data-style="brutal"] .btn:hover { box-shadow: none; } /* ── CLAY ── */ [data-style="clay"] { --style-font-family: 'Plus Jakarta Sans', 'Noto Sans Thai', system-ui, sans-serif; --bs-border-radius: 1rem; --bs-border-radius-sm: 0.75rem; --bs-border-radius-lg: 1.5rem; } [data-style="clay"] .card { --bs-card-border-radius: 1.5rem; --bs-card-border-width: 0; } /* Double-shadow assigned as single comma-separated value — no !important needed */ [data-style="clay"][data-bs-theme="dark"] .card { --bs-card-box-shadow: 6px 6px 12px rgba(0, 0, 0, .4), -3px -3px 8px rgba(255, 255, 255, .04); } [data-style="clay"][data-bs-theme="light"] .card { --bs-card-box-shadow: 6px 6px 12px rgba(0, 0, 0, .15), -3px -3px 8px rgba(255, 255, 255, .7); } [data-style="clay"] .btn:active { transform: scale(0.97); } /* ── Scrollbars (WebKit) — scoped so Classic is unchanged ── */ [data-style]::-webkit-scrollbar { width: 6px; height: 6px; } [data-style]::-webkit-scrollbar-track { background: transparent; } [data-style]::-webkit-scrollbar-thumb { background: rgba(var(--bs-primary-rgb), .3); border-radius: 3px; } [data-style="brutal"] ::-webkit-scrollbar-thumb { border-radius: 0; } [data-style="clay"] ::-webkit-scrollbar-thumb { border-radius: 1rem; } /* ── FLEXBOX-CATELOG — game featured grid (gridBox2B4S) ── */ /* custom.css sets border-radius: 0.75rem (specificity 0,0,1,0); we win at 0,1,1,0 */ [data-style="brutal"] .flexbox-catelog { border-radius: 0.2rem; } [data-style="clay"] .flexbox-catelog { border-radius: 1.5rem; } [data-style="glass"] .flexbox-catelog { border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, .2); } [data-style="luxe"] .flexbox-catelog { border: 1px solid rgba(var(--bs-primary-rgb), .2); box-shadow: 0 4px 20px rgba(0, 0, 0, .35); } /* ── MODAL — Tier 2 overrides on .modal-content (same strategy as .card) ── */ [data-style="luxe"] .modal-content { --bs-modal-border-radius: 0.75rem; --bs-modal-border-color: rgba(var(--bs-primary-rgb), .2); --bs-modal-box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), .1), 0 8px 32px rgba(0, 0, 0, .5); } [data-style="glass"] .modal-content { --bs-modal-border-radius: 1rem; --bs-modal-border-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-style="glass"][data-bs-theme="dark"] .modal-content { --bs-modal-bg: rgba(20, 20, 40, 0.75); } [data-style="glass"][data-bs-theme="light"] .modal-content { --bs-modal-bg: rgba(255, 255, 255, 0.75); } [data-style="brutal"] .modal-content { --bs-modal-border-radius: 0.2rem; --bs-modal-border-color: var(--bs-border-color); --bs-modal-box-shadow: 6px 6px 0 var(--bs-border-color); } [data-style="brutal"] .modal-header { border-bottom-width: 2px; } [data-style="clay"] .modal-content { --bs-modal-border-radius: 1.5rem; --bs-modal-border-color: transparent; } [data-style="clay"][data-bs-theme="dark"] .modal-content { --bs-modal-box-shadow: 8px 8px 16px rgba(0, 0, 0, .5), -4px -4px 10px rgba(255, 255, 255, .04); } [data-style="clay"][data-bs-theme="light"] .modal-content { --bs-modal-box-shadow: 8px 8px 16px rgba(0, 0, 0, .2), -4px -4px 10px rgba(255, 255, 255, .7); } /* ── SWEETALERT2 — direct property override (no Bootstrap vars in swal2) ── */ /* [data-style="x"] .swal2-popup = specificity (0,1,1,0) beats swal2's (0,0,1,0) */ [data-style="luxe"] .swal2-popup { border-radius: 0.75rem; border: 1px solid rgba(var(--bs-primary-rgb), .2); box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), .1), 0 8px 32px rgba(0, 0, 0, .5); } [data-style="glass"] .swal2-popup { border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-style="glass"][data-bs-theme="dark"] .swal2-popup { background: rgba(20, 20, 40, 0.85); } [data-style="glass"][data-bs-theme="light"] .swal2-popup { background: rgba(255, 255, 255, 0.85); } [data-style="brutal"] .swal2-popup { border-radius: 0.2rem; border: 2px solid var(--bs-border-color); box-shadow: 6px 6px 0 var(--bs-border-color); } [data-style="clay"] .swal2-popup { border-radius: 1.5rem; border: none; } [data-style="clay"][data-bs-theme="dark"] .swal2-popup { box-shadow: 8px 8px 16px rgba(0, 0, 0, .5), -4px -4px 10px rgba(255, 255, 255, .04); } [data-style="clay"][data-bs-theme="light"] .swal2-popup { box-shadow: 8px 8px 16px rgba(0, 0, 0, .2), -4px -4px 10px rgba(255, 255, 255, .7); } /* ── NAVBAR ── */ /* Specificity notes: Core rule: .layout-navbar.navbar-detached.bg-navbar-theme = (0,0,3,0) = 30 Our Glass rule: [data-style="glass"] .layout-navbar.bg-navbar-theme = (0,1,2,0) = 30 → tie, wins by load order Other presets target .layout-navbar alone (0,1,1,0 = 20) — sufficient for shadow/border overrides */ [data-style="luxe"] .layout-navbar { box-shadow: 0 1px 20px rgba(var(--bs-primary-rgb), .12), 0 0.125rem 0.5rem rgba(0, 0, 0, .25); border-bottom: 1px solid rgba(var(--bs-primary-rgb), .15); } [data-style="glass"] .layout-navbar.bg-navbar-theme { background-color: rgba(var(--bs-body-bg-rgb), 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } [data-style="brutal"] .layout-navbar { box-shadow: none; border-bottom: 2px solid var(--bs-border-color); } [data-style="clay"] .layout-navbar { box-shadow: 0 4px 12px rgba(0, 0, 0, .12), 0 -2px 4px rgba(255, 255, 255, .04); border-bottom: none; } /* ── SIDEBAR (LAYOUT MENU) ── */ /* Core rule: .menu { background-color: var(--bs-menu-bg); } = (0,0,1,0) = 10 Glass override: [data-style="glass"] .layout-menu = (0,1,1,0) = 20 — wins cleanly */ [data-style="luxe"] .layout-menu { border-right: 1px solid rgba(var(--bs-primary-rgb), .12); box-shadow: 2px 0 20px rgba(var(--bs-primary-rgb), .06); } [data-style="glass"] .layout-menu { background-color: rgba(var(--bs-body-bg-rgb), 0.45); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; } [data-style="brutal"] .layout-menu { box-shadow: none; border-right: 2px solid var(--bs-border-color); } [data-style="clay"] .layout-menu { box-shadow: 4px 0 12px rgba(0, 0, 0, .12), -2px 0 6px rgba(255, 255, 255, .04); border-right: none; } /* ── TYPOGRAPHY — FONT COLOR IMPROVEMENTS ── */ /* Problem: --bs-secondary-color is too grey (dark: #76778e, light: #acaab1 — both fail contrast). --bs-body-color dark (#acabc1) is also undersaturated. Core.css sets these on html[data-bs-theme] at specificity (1,1,0,0). Global fix uses same selector + later load order to win. Per-style rules use html[data-style][data-bs-theme] at (1,2,0,0) to always beat core. */ /* ── Global base fix — applies to Classic and as fallback for all styles ── */ html[data-bs-theme="dark"] { --bs-body-color: #bdb9d5; /* was #acabc1 — brighter violet-white */ --bs-secondary-color: #9290aa; /* was #76778e — 20% brighter muted text */ --bs-primary-text: color-mix(in sRGB, var(--bs-primary) 40%, #fff); /* lighten for dark bg — 60% white */ --bs-link-color: var(--bs-primary-text); --bs-link-hover-color: color-mix(in sRGB, var(--bs-primary-text) 80%, #fff); } html[data-bs-theme="light"] { --bs-secondary-color: #6e6c80; /* was #acaab1 — fails 3:1 contrast; this passes 4.5:1 */ --bs-primary-text: color-mix(in sRGB, var(--bs-primary) 65%, #000); /* darken for light bg */ --bs-link-color: var(--bs-primary-text); --bs-link-hover-color: color-mix(in sRGB, var(--bs-primary-text) 80%, #000); } /* Redirect .text-primary and .link-primary to the accessible variant. Both Bootstrap rules use !important; ours loads after core.css so source order wins. */ .text-primary { color: var(--bs-primary-text) !important; } .link-primary { color: var(--bs-primary-text) !important; } .link-primary:hover { color: var(--bs-link-hover-color) !important; } /* ── LUXE — warm luminous editorial feel ── */ html[data-style="luxe"][data-bs-theme="dark"] { --bs-body-color: #cbc7e5; --bs-heading-color: #ece8ff; --bs-secondary-color: #a09dbc; } html[data-style="luxe"][data-bs-theme="light"] { --bs-body-color: #3d3a52; --bs-heading-color: #1e1b30; --bs-secondary-color: #605d78; } /* ── GLASS — crisp high-contrast (blur backgrounds reduce apparent contrast) ── */ html[data-style="glass"][data-bs-theme="dark"] { --bs-body-color: #d8d5f0; --bs-heading-color: #f2f0ff; --bs-secondary-color: #aba9c8; } html[data-style="glass"][data-bs-theme="light"] { --bs-body-color: #2e2c44; --bs-heading-color: #12102a; --bs-secondary-color: #5a5870; } /* ── BRUTAL — maximum contrast, near pure white / black ── */ html[data-style="brutal"][data-bs-theme="dark"] { --bs-body-color: #e0e0e0; --bs-heading-color: #ffffff; --bs-secondary-color: #aaaaaa; } html[data-style="brutal"][data-bs-theme="light"] { --bs-body-color: #1a1a1a; --bs-heading-color: #000000; --bs-secondary-color: #555555; } /* ── CLAY — warm soft palette ── */ html[data-style="clay"][data-bs-theme="dark"] { --bs-body-color: #c8c3e0; --bs-heading-color: #e6e0f8; --bs-secondary-color: #9e99ba; } html[data-style="clay"][data-bs-theme="light"] { --bs-body-color: #3a3650; --bs-heading-color: #1e1a38; --bs-secondary-color: #5e5a76; } /* ── DROPDOWN MENUS — Tier 2 vars inside .dropdown-menu ── */ [data-style="luxe"] .dropdown-menu { --bs-dropdown-border-color: rgba(var(--bs-primary-rgb), .2); --bs-dropdown-border-radius: 0.75rem; --bs-dropdown-box-shadow: 0 4px 24px rgba(0, 0, 0, .4), 0 0 0 1px rgba(var(--bs-primary-rgb), .1); } [data-style="glass"] .dropdown-menu { --bs-dropdown-bg: rgba(var(--bs-body-bg-rgb), 0.7); --bs-dropdown-border-color: rgba(255, 255, 255, 0.12); --bs-dropdown-border-radius: 1rem; --bs-dropdown-box-shadow: 0 8px 32px rgba(0, 0, 0, .3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-style="brutal"] .dropdown-menu { --bs-dropdown-border-radius: 0.2rem; --bs-dropdown-border-color: var(--bs-border-color); --bs-dropdown-box-shadow: 4px 4px 0 var(--bs-border-color); } [data-style="clay"] .dropdown-menu { --bs-dropdown-border-radius: 1.5rem; --bs-dropdown-border-color: transparent; } [data-style="clay"][data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-box-shadow: 6px 6px 12px rgba(0, 0, 0, .4), -3px -3px 8px rgba(255, 255, 255, .04); } [data-style="clay"][data-bs-theme="light"] .dropdown-menu { --bs-dropdown-box-shadow: 6px 6px 12px rgba(0, 0, 0, .15), -3px -3px 8px rgba(255, 255, 255, .7); } /* ── FORM CONTROLS — no CSS vars; direct property overrides ── */ /* border-radius already inherited via --bs-border-radius (Tier 1) */ [data-style="glass"] .form-control, [data-style="glass"] .form-select { background-color: rgba(var(--bs-body-bg-rgb), 0.35); border-color: rgba(255, 255, 255, 0.15); } [data-style="glass"] .input-group-text { background-color: rgba(var(--bs-body-bg-rgb), 0.5); border-color: rgba(255, 255, 255, 0.15); } [data-style="brutal"] .form-control, [data-style="brutal"] .form-select, [data-style="brutal"] .input-group-text { border-width: 2px; } [data-style="luxe"] .form-control:focus, [data-style="luxe"] .form-select:focus { border-color: rgba(var(--bs-primary-rgb), .5); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .15); } /* ── TABLES — Tier 2 vars inside .table ── */ [data-style="luxe"] .table { --bs-table-border-color: rgba(var(--bs-primary-rgb), .12); } [data-style="glass"] .table { --bs-table-border-color: rgba(255, 255, 255, 0.1); --bs-table-striped-bg: rgba(255, 255, 255, 0.04); } [data-style="brutal"] .table { --bs-table-border-color: var(--bs-border-color); } [data-style="clay"] .table { --bs-table-border-color: rgba(var(--bs-primary-rgb), .1); }