/* ========================================================================== Donaloop chrome restyle Overrides the legacy orange/violet/cyan selectors in jaidee-style.css / jaidee-responsive.css with the navy/orange Donaloop identity, using the tokens defined in donaloop-tokens.css (load this file after both). Selectors are copied 1:1 from jaidee-style.css so specificity matches and the cascade (later file wins) does the overriding — no !important needed except where the legacy rule itself used !important. Scope: shared chrome (header, nav, buttons, cards, footer, modal, accordion) plus the Home / How it Works / Our Cause page headings. ========================================================================== */ /* ---- Type: display headlines are black, not orange/violet/navy — per the brand readme ("headlines... are black — never navy or orange") and SectionHeading.jsx (heading color is always --text-strong unless a dark band forces white; there is no navy heading state). ---- */ .container .row h1 { color: var(--text-strong); font-weight: var(--fw-black); } .container .row h2 { color: var(--text-strong); font-weight: var(--fw-black); } .container .row h3 { color: var(--text-strong); font-weight: var(--fw-bold); } /* ---- Back-to-top button: brand accent orange, not the legacy #FF9800/#5c3586 pairing. ---- */ /* Minimal: small white circle, hairline border, soft shadow, thin navy chevron; accent only on hover. */ #top-button { width: 40px; height: 40px; border-radius: 50%; background-color: #fff; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); bottom: 24px; right: 24px; } #top-button::after { content: "\f106"; font-size: 22px; line-height: 38px; color: var(--brand-primary); transition: color .3s; } #top-button:hover { background-color: #fff; border-color: var(--brand-accent); } #top-button:hover::after { color: var(--brand-accent); } #top-button:active { background-color: var(--border-subtle); } /* ---- Shared "clear filters" link + category page

used by both the stores directory and the marketplace item list — replaces per-page inline style="color:#68696a"/"color:#5c3586" hex. ---- */ .dl-text-muted-link { color: var(--text-muted); } /* Exact spec from SectionHeading.jsx level=2: fw-black (not bold), font-display, lh-heading, ls-display tracking — not an approximation. Scoped as ".page-stores h1.dl-category-title" (specificity 0,2,1) to tie jaidee-style.css's ".container .row h1" (same 0,2,1) on font-size/margin — a bare ".dl-category-title" (0,1,0) loses that fight regardless of load order, since equal-or-higher specificity always wins before cascade order. */ .page-stores h1.dl-category-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-black); line-height: var(--lh-heading); letter-spacing: var(--ls-display); color: var(--text-strong); margin: 10px 0 18px; } /* Marketplace "Add Item" button — scoped override so the global Bootstrap .btn-success (used across admin too) is left untouched. */ /* ---- Stores directory + marketplace category browser (page-stores). The sidebar no longer has the old violet background image (sidebar-violet class removed from the blade views), so it needs its own light card surface instead of relying on that image for contrast against the white page background; sidebar text switches from white to the standard body token to stay readable on that surface. ---- */ /* Cancel jaidee-style.css's ".page-stores { border:1px solid #888888 }" — the store-list-screen.kit.js design has no wrapping border around the whole page content, only the sidebar "Refine results" card (.dl-refine-card) has its own border. A bare removal of an override here doesn't work — the legacy rule still applies unless explicitly cancelled. */ .page-stores { border: none; } .menu-category { background: var(--surface-muted); border-radius: var(--radius-md); } .menu-category p, .page-stores .menu-category a, .page-stores .menu-category strong, .page-stores .menu-category i, .page-stores .menu-category h3 { color: var(--text-body); } .page-stores .set-text-box-desc { background: var(--brand-accent); } .sidebar-title { border-bottom: 1px solid var(--border-subtle); } .sidebar-title:after, .refine_result:after { background: var(--border-subtle); } .page-stores .menu-category .detail_letter a.letter_active { background: var(--brand-accent); } .page-stores .menu-category .refine_result { border-bottom: 1px solid var(--border-subtle); } .page-stores .menu-category .detail > p > a.cat_active { color: var(--brand-primary); } .box-filter-country { border-bottom: 1px solid var(--border-subtle); } .box-filter-country:after { background: var(--border-subtle); } .page-stores .sidebar-search .btn { background: var(--brand-primary); border: 1px solid var(--brand-primary); } button#add-shortcut { background: var(--brand-accent); } /* ---- Member area: cashback/commission status summary cards + pagination. Fixed semantic mapping per the design system (pending=navy, cleared=orange, requested=amber, paid=green) — uses the --status-* aliases already defined in donaloop-tokens.css, never re-colored per screen. ---- */ .dl-status-card { color: var(--white); } .dl-status-card--pending { background-color: var(--status-pending-fg); } .dl-status-card--cleared { background-color: var(--status-cleared-fg); } .dl-status-card--requested { background-color: var(--status-requested-fg); } .dl-status-card--paid { background-color: var(--status-paid-fg); } /* ---- Header: one continuous navy bar — a slim utility strip (lang switch + login, NO logo) over the main row (logo once + nav), per NavBar.jsx. The old markup showed the logo twice (utility strip AND main row) and buried login/signup inside the nav list; layout.blade.php now renders login in the utility strip instead (main-menu.blade.php no longer has it). ---- */ #layout-top.bg-top-logo { background: var(--brand-primary); } /* jaidee-responsive.css widens .container to 1200px/1400px (nearly full viewport) at large screens site-wide — a long-standing, intentional choice for the rest of the site that we're not touching globally. But it means the header content padding, tied to .container's width, stretches edge-to-edge instead of staying centered at the design's 1140px. Cap just the header's own container for that (navy background still bleeds full width — that part is correct either way). */ #layout-top .container { max-width: var(--container-max) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* Same fix, extended to the redesigned page content below the header: the site-wide .container override (1200/1400px at XL/XXL) made the header line up at 1140px while the hero/section content beneath it stayed wider, visibly misaligned against it. Cap the containers inside the sections this pass touched (Home hero/bands + the shared category block) to match. */ .dl-hero .container, .dl-section .container, #layout-content-category .container, .dl-cause-strip .container, .dl-breadcrumb-bar .container, .page-stores { max-width: var(--container-max) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* Bootstrap's .container keeps its own 15px side padding even once it's hit the 1140px cap, so measured content width was 1110px, not 1140 — the design's own container has no such padding once centred (verified against the reference bundle: a two-column heading that fits on one line there at 1140px content width was wrapping here). Zero it only once the container is wide enough to actually be at the cap; below that it's still needed as the mobile/tablet edge gutter. */ @media (min-width: 1170px) { #layout-top .container, .dl-hero .container, .dl-section .container, #layout-content-category .container, .dl-cause-strip .container, .dl-breadcrumb-bar .container { padding-left: 0 !important; padding-right: 0 !important; } } /* .page-stores gets this unconditionally rather than gated at 1170px like the rules above — unlike those, its own max-width:1140px is set unconditionally too (not stepped up progressively with the viewport), so it sits "at the cap" as soon as the viewport can fit it at all, not just past 1170px. Kept separate to avoid re-litigating the other sections' already-verified behavior. Mobile still gets its edge gutter back below 768px. */ .page-stores { padding-left: 0 !important; padding-right: 0 !important; } @media (max-width: 767px) { .page-stores { padding-left: 15px !important; padding-right: 15px !important; } } /* The divider line itself is a DIFFERENT story: per NavBar.jsx the utility strip's border-bottom sits on a full-viewport-width outer wrapper, with only the content *inside* it centered at 1140px — i.e. the line spans edge-to-edge while the EN/TH/login sit in a narrower centered strip within it. Capping .container (above) would wrongly shrink the line too, so draw it as its own full-width layer instead of a plain border. */ .header-top-section { position: relative; border-bottom: 0; margin-bottom: 0 !important; } .header-top-section::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 100vw; transform: translateX(-50%); border-bottom: var(--border-width) solid var(--border-invert); } /* jaidee-style.css gives .header-nav-section a 30px bottom margin meant for the old design's looser rhythm — it now shows up as dead white space between the navy header and the page content below. NavBar has no such gap: the header ends where its own padding ends. */ .header-nav-section { margin-bottom: 0 !important; } .top-jaidee-logo, .mobile-logo { display: inline-block; } .top-jaidee-logo img, .mobile-logo img { height: 40px; width: auto; } /* NavBar.jsx renders the main-row logo at a fixed 56px height. */ .header-main-logo img { height: 56px; width: auto; } .charity-widget { background: rgba(255,255,255,.08); border-radius: var(--radius-md); } .charity-widget-box, .charity-widget-box p, .charity-widget-box span, .charity-widget-box strong { color: var(--white); } @media (min-width: 768px) { .top-jaidee-logo, .top-cashback-logo { display: none !important; } /* jaidee-responsive.css hides .header-main-logo between 768–1199px (it expected .top-jaidee-logo to carry the logo at that width instead) — force it visible everywhere now that .top-jaidee-logo is retired. */ .header-main-logo { display: block !important; } /* header-main-logo only carries a col-xl-2 class and header-main-menu only col-lg-12/col-xl-10 — below 992px neither Bootstrap grid class is active, so the two items fought over width and the nav block wrapped entirely below the logo instead of sharing the row. Force them into a fixed logo + flexible nav split at every desktop width, overriding whichever Bootstrap col-* class happens to apply above 992px too. */ .header-nav-section { display: flex !important; align-items: flex-start !important; flex-wrap: nowrap !important; padding: var(--space-3) 0 !important; } /* .header-main-logo still carries Bootstrap's col-xl-2 class, which adds its own 15px left/right column gutters — that leftover left padding was inset the logo further than the container edge, unlike the nav items next to it. Reset it and set only the intended right-side gap. */ .header-main-logo { flex: 0 0 auto !important; max-width: none !important; width: auto !important; padding: 0 var(--space-5) 0 0 !important; } .header-main-menu { flex: 1 1 auto !important; max-width: none !important; width: auto !important; min-width: 0; } /* NavBar.jsx's