/** * BDV Brand Colors - CSS Variables * Định nghĩa các màu sắc thương hiệu BDV * File này được include trong layout chung để đảm bảo consistency */ :root { /* Primary Brand Colors. These are Tailwind's cyan-700/800/900, which is what the BDV views actually paint with — `cyan-700` appears 178 times across 15 of them, against 32 uses of the `bdv-primary` token themes/bdv/tailwind.config.js declares (#225776, the logo navy). The pages this refresh does NOT touch (search, checkout, car detail, contact) stay cyan, so the shared `.btn-primary` / `.btn-outline` primitives have to resolve to the same cyan or the refreshed homepage would no longer match the rest of the site. Moving the whole theme onto #225776 is a separate change. */ --bdv-primary: #0E7490; --bdv-dark: #155E75; --bdv-darker: #164E63; /* Light Variants — the two stops of `bg-home-about-gradient` in themes/bdv/tailwind.config.js, so --home-panel below restates the panel this theme already renders rather than inventing a new tint. */ --bdv-light: #E6F1F7; --bdv-lighter: #DCEAF2; /* Utility Colors */ --bdv-disabled: #a8c0cf; /* Legacy mapping - giữ để tương thích ngược */ --primary: var(--bdv-primary); --primary-dark: var(--bdv-dark); --primary-darker: var(--bdv-darker); } /* --------------------------------------------------------------------------- * BRAND SURFACE * * Lets a brand render its own surface — a dark page, a custom header — with no * per-page theme switch anywhere in the admin. Two halves: * * 1. The variables below DEFINE the surface. Every default reproduces exactly * what this theme renders today (white page, gray-900 headings, #4d565c * body copy, white header/footer, its own panel gradients), so overriding * nothing is visually unchanged. BDV is a live brand, so "unchanged" has * to be literal. * 2. The rules below re-point the hardcoded Tailwind utilities the views use * at those variables. * * Scope, deliberately split: * - the HEADER is styled on EVERY page, so a site's chrome stays consistent * as a visitor moves from the homepage to a car or checkout page; * - everything else is scoped to `body.home-surface`, a class only the home * views add (via their `body_class` section), so inner pages keep the * standard white treatment. * * BDV is the deliberate hand-maintained one-off — it has no manifest in * tools/tenant-onboard/tenants/ and is never re-scaffolded, so unlike the base * themes this file carries no generated override block. Edit it directly. * * The variable NAMES are the `brand.homepage_surface` schema shared with * public/assets/generic/css/generic-brand.css and akamai-brand.css. Keep them * in sync when that schema gains a key, or a manifest setting that works on * those themes silently does nothing here. * --------------------------------------------------------------------------- */ :root { /* Page + section backgrounds */ --home-bg: #ffffff; --home-surface: #ffffff; --home-surface-alt: #f9fafb; --home-border: #e5e7eb; /* Feature panels — the rounded "about" and "road trips" blocks. The defaults restate the theme's own tailwind gradients in terms of the palette vars (pale tint on desktop, deep brand on mobile), so overriding nothing changes nothing. A surface that sets --home-panel-bg gets a flat panel instead, and sets these to `none`. --home-panel is exactly `bg-home-about-gradient` from themes/bdv/tailwind.config.js. --home-panel-mobile is derived from the palette like every other theme rather than restating `bg-home-about-mobile` (#16425B -> #0E2A3A), which was authored against the #225776 logo navy this theme's markup never adopted. Deriving it keeps the mobile About panel in the same cyan family as the buttons above it, and keeps this file's surface contract identical to the base themes'. */ --home-panel: linear-gradient(184.5554072637447deg, var(--bdv-light), var(--bdv-lighter)); --home-panel-mobile: linear-gradient(184.5554072637447deg, var(--bdv-dark), var(--bdv-darker)); --home-panel-bg: transparent; /* Accent behind filled buttons and the full-width call-to-action band. Defaults to the brand primary; a brand whose primary is too light to carry white text points this at a deeper shade to keep the text legible. */ --home-accent: var(--bdv-primary); /* Type */ --home-text: #111827; --home-text-muted: #4d565c; /* Chrome */ --home-header-bg: #ffffff; --home-header-text: #111827; --home-footer-bg: #ffffff; --home-footer-text: #374151; } /* BEGIN homepage-surface — tenant overrides (generated; edits are overwritten on re-scaffold) */ /* END homepage-surface */ /* --- Header: EVERY page ---------------------------------------------------- * `:root` prefix only to out-specify the `bg-white` utility on the element * itself — a bare `header` selector is a single element and loses to any class. * Both rental headers (legacy + category) carry `bg-white`. */ :root header { background-color: var(--home-header-bg); color: var(--home-header-text); } header .text-gray-500, header .text-gray-700, header .text-gray-900 { color: var(--home-header-text); } header .border-gray-200 { border-color: var(--home-border); } /* Two selectors for one rule, deliberately. `bg-bdv-primary` is the token name the base themes use and the shared surface contract is written against it (tools/tenant-onboard/tests/test_base_theme_surface_contract.py); `bg-cyan-700` is what this theme's markup actually carries. Keeping both means a manifest `header_bg` works here exactly as it does on generic, whichever token a future edit reaches for. */ header .bg-bdv-primary { background-color: var(--home-accent); } header .bg-cyan-700 { background-color: var(--home-accent); } /* --- Homepage surface ------------------------------------------------------ */ body.home-surface { background-color: var(--home-bg); color: var(--home-text); } body.home-surface main .bg-white { background-color: var(--home-surface); } body.home-surface main .bg-gray-50, body.home-surface main .bg-gray-100 { background-color: var(--home-surface-alt); } body.home-surface main .border-gray-100, body.home-surface main .border-gray-200, body.home-surface main .border-gray-300, body.home-surface main .border-\[\#e5e7eb\] { border-color: var(--home-border); } /* `.heading-primary` bakes text-gray-900 into a component class (tailwind.css), so it needs naming here as well as the raw utility — without it, section headings keep the near-navy gray-900 against a dark page. */ body.home-surface main .heading-primary, body.home-surface main .text-black, body.home-surface main .text-gray-800, body.home-surface main .text-gray-900 { color: var(--home-text); } body.home-surface main .text-gray-400, body.home-surface main .text-gray-500, body.home-surface main .text-gray-600, body.home-surface main .text-gray-700, body.home-surface main .text-homepage-text-secondary, body.home-surface main .text-\[\#525b61\] { color: var(--home-text-muted); } /* Feature panels. Painted by the palette's light/lighter tint on desktop, which turns into a bright hole in a dark page and leaves the light type inside it unreadable. Each selector mirrors how Tailwind emits the class it overrides — the `lg:` variant inside the same breakpoint — so the desktop/mobile split is preserved rather than flattened. */ body.home-surface main .bg-home-about-mobile { background-image: var(--home-panel-mobile); background-color: var(--home-panel-bg); } body.home-surface main .bg-home-about-gradient { background-image: var(--home-panel); background-color: var(--home-panel-bg); } /* The about panel is the one block that already flips its own colours per * breakpoint — white type on the deep mobile gradient, dark type on the pale * desktop tint — so its desktop type lives behind `lg:` variants that the * unprefixed selectors above never match. These are the only colour-bearing * responsive variants in either home view (the rest are font sizes). */ @media (min-width: 1024px) { body.home-surface main .lg\:bg-home-about-gradient { background-image: var(--home-panel); background-color: var(--home-panel-bg); } body.home-surface main .lg\:text-gray-900 { color: var(--home-text); } body.home-surface main .lg\:text-homepage-text-secondary { color: var(--home-text-muted); } body.home-surface main .lg\:bg-bdv-primary { background-color: var(--home-accent); } body.home-surface main .lg\:bg-cyan-700 { background-color: var(--home-accent); } } /* Accent: keeps filled buttons and the CTA band legible when a brand primary is too light for white text. */ body.home-surface main .bg-bdv-primary { background-color: var(--home-accent); } body.home-surface main .bg-cyan-700 { background-color: var(--home-accent); } /* --- Footer: homepage only (matches the surface it sits on) ---------------- */ body.home-surface footer { background-color: var(--home-footer-bg); color: var(--home-footer-text); border-color: var(--home-border); } /* Every grey the footer actually uses. gray-800/900 were absent, so the nav links — which carry text-gray-900 — stayed near-black on a dark footer while the copyright line (text-gray-700) correctly turned white. Scoped to `body.home-surface`, so on inner pages the footer keeps its light treatment and the links stay gray-900 there. */ body.home-surface footer .text-gray-600, body.home-surface footer .text-gray-700, body.home-surface footer .text-gray-800, body.home-surface footer .text-gray-900 { color: var(--home-footer-text); } body.home-surface footer .border-gray-200 { border-color: var(--home-border); } /* --- Section fade ---------------------------------------------------------- * A block that scrolls under a soft edge must fade to the colour BEHIND it. * Hardcoding it (`from-gray-50` over a white section) left a visible grey band * on every light theme; deriving it from the surface is correct on both. */ .surface-fade-up { background-image: linear-gradient(to top, var(--home-surface), transparent); } /* --- Light control surfaces ------------------------------------------------ * The search panel is a WHITE control floating ON the surface, and * sticky-search.js clones it into the (now always-branded) header — so it keeps * the light treatment wherever it lives, on every page. This block must RESTORE * every utility the surface rules re-point, or a control paints its own text in * the page's colour: available calendar days carry `.text-black` and rendered * white-on-white inside the picker. `.date-picker` / `.time-picker-dropdown` * are matched by class because the sticky clone appends them outside the * original container. */ #searchFormContainer, #stickySearchClone, .date-picker, .time-picker-dropdown { color: #111827; } #searchFormContainer .bg-white, #stickySearchClone .bg-white, .date-picker, .time-picker-dropdown { background-color: #ffffff; } #searchFormContainer .text-black, #searchFormContainer .text-gray-800, #searchFormContainer .text-gray-900, #stickySearchClone .text-black, #stickySearchClone .text-gray-800, #stickySearchClone .text-gray-900, .date-picker .text-black, .date-picker .text-gray-800, .date-picker .text-gray-900, .time-picker-dropdown .text-black { color: #111827; } #searchFormContainer .text-gray-400, #searchFormContainer .text-gray-500, #searchFormContainer .text-gray-600, #searchFormContainer .text-gray-700, #stickySearchClone .text-gray-400, #stickySearchClone .text-gray-500, #stickySearchClone .text-gray-600, #stickySearchClone .text-gray-700, .date-picker .text-gray-500, .date-picker .text-gray-600 { color: #4b5563; } /* Past/blocked days keep their muted-but-visible grey on the white picker. */ .date-picker .text-gray-300 { color: #d1d5db; } /* The selected day/time pill carries white text on the brand fill, so it wants the same accent the buttons use. Identical to the primary unless a brand set `accent`, so this is a no-op for a theme that didn't. */ #searchFormContainer .bg-primary, #stickySearchClone .bg-primary, .date-picker .bg-primary, .time-picker-dropdown .time-option.selected { background-color: var(--home-accent); } #searchFormContainer .border-gray-200, #searchFormContainer .border-gray-300, #stickySearchClone .border-gray-200, #stickySearchClone .border-gray-300, .date-picker .border-\[\#e5e7eb\], .time-picker-dropdown .border-\[\#e5e7eb\] { border-color: #d1d5db; }