/* ============================================================ cabadz-ui.css — Shared design system (Cabadz / Elcabadz) Canonical reference: index.php Cobalt + Pine: Newsreader (serif) + Hanken Grotesk (UI) Loaded LAST in via cz_theme_head() so it wins over Tailwind. ============================================================ */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* Neutral base — chalk white, minimal warm undertone */ --paper: #F2F2EF; --paper-2: #E6E6E2; --surface: #FAFAFA; --ink: #1A1D2E; --ink-2: #5A5F78; --ink-3: #8E93A8; --line: #DCDFE8; --line-2: rgba(26,29,46,0.06); /* Role A — voyageur / cobalt */ --travel: #1B4FD8; --travel-btn: #1644C4; --travel-d: #1139B0; --travel-soft: #E8EDFB; --travel-ink: #1444B8; /* Role B — acheteur / pine */ --buy: #1F655A; --buy-btn: #1A5A50; --buy-d: #134840; --buy-soft: #DCE7E1; --buy-ink: #1A5249; /* Semantic */ --info: #0284C7; --info-soft: #E0F2FE; --warn: #B7791F; --warn-soft: #F6ECD6; --danger: #B42318; --danger-soft: #F7E0DD; --success: var(--buy-ink); --success-soft: var(--buy-soft); /* Geometry */ --radius: 20px; --radius-sm: 13px; --radius-xs: 11px; --maxw: 1180px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --shadow-sm: 0 2px 14px rgba(26,29,46,0.06); --shadow-md: 0 6px 22px rgba(26,29,46,0.08); /* Fonts */ --cz-serif: 'Newsreader', Georgia, serif; --cz-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Legacy variable aliases (dashboard pages reference these directly) */ --primary: #1F655A; --primary-light: #2A8475; --primary-dark: #134840; } /* ============================================================ 2. BASE — wins over Tailwind's preflight + any inline config ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; } body { font-family: var(--cz-sans) !important; background: var(--paper) !important; color: var(--ink) !important; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Override Tailwind's font-sans JIT config that sets Inter / Plus Jakarta Sans */ .font-sans, [class*="font-"] { font-family: var(--cz-sans) !important; } ::selection { background: var(--ink); color: var(--paper); } a { color: inherit; } img { max-width: 100%; display: block; } a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; } /* ============================================================ 3. TAILWIND SECONDARY → INK / PAPER MAPPINGS Map every shade of the custom "secondary" (slate) color the dashboard pages use onto our warm ink / paper system. ============================================================ */ /* --- Backgrounds --- */ .bg-secondary-50 { background-color: var(--paper) !important; } .bg-secondary-100 { background-color: var(--paper-2) !important; } .bg-secondary-200 { background-color: var(--line) !important; } .bg-secondary-300 { background-color: var(--ink-3) !important; } .bg-secondary-400 { background-color: var(--ink-2) !important; } .bg-secondary-500 { background-color: var(--ink-2) !important; } .bg-secondary-600 { background-color: var(--ink-2) !important; } .bg-secondary-700 { background-color: var(--ink) !important; } .bg-secondary-800 { background-color: var(--ink) !important; } .bg-secondary-900 { background-color: var(--ink) !important; } /* --- Text --- */ .text-secondary-50 { color: var(--paper) !important; } .text-secondary-100 { color: var(--paper-2) !important; } .text-secondary-200 { color: var(--line) !important; } .text-secondary-300 { color: var(--ink-3) !important; } .text-secondary-400 { color: var(--ink-3) !important; } .text-secondary-500 { color: var(--ink-2) !important; } .text-secondary-600 { color: var(--ink-2) !important; } .text-secondary-700 { color: var(--ink) !important; } .text-secondary-800 { color: var(--ink) !important; } .text-secondary-900 { color: var(--ink) !important; } /* --- Borders --- */ .border-secondary-100 { border-color: var(--line) !important; } .border-secondary-200 { border-color: var(--line) !important; } .border-secondary-300 { border-color: var(--ink-3) !important; } .border-secondary-400 { border-color: var(--ink-3) !important; } .border-secondary-500 { border-color: var(--ink-2) !important; } /* --- Hover backgrounds --- */ .hover\:bg-secondary-50:hover { background-color: var(--paper) !important; } .hover\:bg-secondary-100:hover { background-color: var(--paper-2) !important; } /* --- Divide --- */ .divide-secondary-50 > * + * { border-color: var(--line) !important; } .divide-secondary-100 > * + * { border-color: var(--line) !important; } /* ============================================================ 4. TAILWIND PRIMARY → PINE MAPPINGS The dashboard Tailwind config sets primary as emerald/green. Map the full scale to our pine (buy) role colour. ============================================================ */ .bg-primary-50 { background-color: var(--buy-soft) !important; } .bg-primary-100 { background-color: var(--buy-soft) !important; } .bg-primary-200 { background-color: var(--buy-soft) !important; } .bg-primary-300 { background-color: rgba(31,101,90,.35) !important; } .bg-primary-400 { background-color: var(--buy) !important; } .bg-primary-500 { background-color: var(--buy-btn) !important; } .bg-primary-600 { background-color: var(--buy-btn) !important; } .bg-primary-700 { background-color: var(--buy-d) !important; } .bg-primary-800 { background-color: var(--buy-d) !important; } .bg-primary-900 { background-color: var(--buy-d) !important; } .text-primary-50 { color: var(--buy-soft) !important; } .text-primary-100 { color: var(--buy-soft) !important; } .text-primary-400 { color: var(--buy) !important; } .text-primary-500 { color: var(--buy-btn) !important; } .text-primary-600 { color: var(--buy-ink) !important; } .text-primary-700 { color: var(--buy-d) !important; } .border-primary-100 { border-color: var(--buy-soft) !important; } .border-primary-200 { border-color: #BcD3CB !important; } .border-primary-500 { border-color: var(--buy) !important; } .border-primary-600 { border-color: var(--buy-btn) !important; } .hover\:bg-primary-50:hover { background-color: var(--buy-soft) !important; } .hover\:bg-primary-600:hover { background-color: var(--buy-btn) !important; } .hover\:bg-primary-700:hover { background-color: var(--buy-d) !important; } .hover\:text-primary-600:hover { color: var(--buy-ink) !important; } .hover\:text-primary-700:hover { color: var(--buy-d) !important; } .focus\:ring-primary-500:focus { --tw-ring-color: rgba(31,101,90,.3) !important; } .focus\:ring-2:focus { box-shadow: 0 0 0 3px rgba(31,101,90,.2) !important; } /* Primary gradients → flatten to pine */ [class*="from-primary"], [class*="to-primary"], [class*="via-primary"] { background-image: none !important; background-color: var(--buy-btn) !important; } /* ============================================================ 5. TAILWIND NEUTRALS → PAPER SYSTEM ============================================================ */ /* Page canvas */ .bg-gray-50, .bg-slate-50, .bg-neutral-50, .bg-zinc-50, .bg-stone-50 { background-color: var(--paper) !important; } .bg-gray-100, .bg-slate-100 { background-color: var(--paper-2) !important; } .bg-gray-200, .bg-slate-200 { background-color: var(--line) !important; } .bg-white { background-color: var(--surface) !important; } /* Text neutrals */ .text-gray-400, .text-slate-400 { color: var(--ink-3) !important; } .text-gray-500, .text-slate-500 { color: var(--ink-2) !important; } .text-gray-600, .text-slate-600 { color: var(--ink-2) !important; } .text-gray-700, .text-slate-700 { color: var(--ink) !important; } .text-gray-800, .text-slate-800 { color: var(--ink) !important; } .text-gray-900, .text-slate-900 { color: var(--ink) !important; } /* Border neutrals */ .border-gray-100, .border-slate-100 { border-color: var(--line) !important; } .border-gray-200, .border-slate-200 { border-color: var(--line) !important; } .border-gray-300, .border-slate-300 { border-color: var(--ink-3) !important; } /* Hover backgrounds */ .hover\:bg-gray-50:hover, .hover\:bg-slate-50:hover { background-color: var(--paper) !important; } .hover\:bg-gray-100:hover, .hover\:bg-slate-100:hover { background-color: var(--paper-2) !important; } /* Divide lines */ .divide-gray-100 > * + *, .divide-slate-100 > * + *, .divide-gray-200 > * + *, .divide-slate-200 > * + * { border-color: var(--line) !important; } /* ============================================================ 6. TAILWIND EMERALD / GREEN / TEAL → PINE ============================================================ */ .bg-emerald-400, .bg-emerald-500, .bg-emerald-600, .bg-emerald-700, .bg-green-400, .bg-green-500, .bg-green-600, .bg-green-700, .bg-teal-400, .bg-teal-500, .bg-teal-600 { background-color: var(--buy-btn) !important; } .bg-emerald-50, .bg-emerald-100, .bg-emerald-200, .bg-green-50, .bg-green-100, .bg-green-200, .bg-teal-50, .bg-teal-100 { background-color: var(--buy-soft) !important; } .text-emerald-400, .text-emerald-500, .text-emerald-600, .text-emerald-700, .text-green-400, .text-green-500, .text-green-600, .text-green-700, .text-teal-500, .text-teal-600 { color: var(--buy-ink) !important; } .border-emerald-400, .border-emerald-500, .border-emerald-600, .border-green-400, .border-green-500, .border-green-600, .border-teal-500, .border-teal-600 { border-color: var(--buy) !important; } .ring-emerald-500, .ring-green-500, .ring-teal-500 { --tw-ring-color: var(--buy) !important; } .hover\:bg-emerald-600:hover, .hover\:bg-emerald-700:hover, .hover\:bg-green-600:hover, .hover\:bg-green-700:hover, .hover\:bg-teal-600:hover { background-color: var(--buy-d) !important; } .hover\:text-emerald-400:hover, .hover\:text-emerald-500:hover, .hover\:text-green-500:hover, .hover\:text-green-600:hover { color: var(--buy-ink) !important; } /* All emerald/green/teal gradients → pine solid */ [class*="from-emerald"], [class*="from-green"], [class*="from-teal"], [class*="via-emerald"], [class*="via-green"], [class*="to-emerald"], [class*="to-green"], [class*="to-teal"] { background-image: none !important; background-color: var(--buy-btn) !important; } /* ============================================================ 7. SHADOWS & RADII — enforce the diffuse paper aesthetic ============================================================ */ /* Flatten Tailwind's heavy shadows */ .shadow-sm { box-shadow: var(--shadow-sm) !important; } .shadow { box-shadow: var(--shadow-sm) !important; } .shadow-md { box-shadow: var(--shadow-sm) !important; } .shadow-lg { box-shadow: var(--shadow-md) !important; } .shadow-xl { box-shadow: var(--shadow-md) !important; } .shadow-2xl { box-shadow: var(--shadow-md) !important; } /* Kill colored shadow tints (e.g. shadow-primary-500/30) */ [class*="shadow-primary"], [class*="shadow-green"], [class*="shadow-emerald"], [class*="shadow-black"] { box-shadow: var(--shadow-sm) !important; } /* Normalise radius scale */ .rounded-lg { border-radius: var(--radius-xs) !important; } .rounded-xl { border-radius: var(--radius-xs) !important; } .rounded-2xl { border-radius: var(--radius-sm) !important; } .rounded-3xl { border-radius: var(--radius-sm) !important; } /* ============================================================ 8. DASHBOARD SHELL OVERRIDES Target the specific structural patterns the dashboard pages use. ============================================================ */ /* Nav chrome stays LTR in all languages — logo-left / actions-right never changes. The pill container itself has direction:ltr inline, but we reinforce here so RTL Tailwind overrides don't leak in. */ nav.fixed [style*="direction:ltr"] .flex-row, nav.fixed [style*="direction:ltr"] .flex { flex-direction: row !important; } nav.fixed [style*="direction:ltr"] .ml-auto { margin-left: auto !important; margin-right: 0 !important; } nav.fixed [style*="direction:ltr"] .mr-auto { margin-right: auto !important; margin-left: 0 !important; } /* Notification / message badge dots — always top-right of icon */ nav .relative .absolute.top-1.right-1 { right: 0.25rem !important; left: auto !important; } /* Outer nav wrapper on PILL pages — transparent so only the inner pill is visible. Only targets navs WITHOUT .glass class (pill pages inject glass on the inner div). Flat nav pages that use .glass keep their background via the .glass rule below. */ nav.fixed.top-0:not(.glass), nav.fixed.left-0:not(.glass) { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; box-shadow: none !important; } /* Glass helper used in dashboard nav */ .glass { background: rgba(242,242,239,0.92) !important; backdrop-filter: saturate(160%) blur(18px) !important; -webkit-backdrop-filter: saturate(160%) blur(18px) !important; border: 1px solid var(--line) !important; } /* Kill the glass-dark variant */ .glass-dark { background: rgba(24,33,28,0.92) !important; } /* Dashboard welcome hero — replace the green gradient with warm ink */ .bg-gradient-to-br.from-primary-600, .bg-gradient-to-br.from-primary-700, [class*="from-primary-6"], [class*="from-primary-7"], [class*="from-primary-8"] { background-image: none !important; background-color: var(--ink) !important; } /* Text inside the ink hero stays light */ .bg-gradient-to-br.from-primary-600 *, .bg-gradient-to-br.from-primary-700 * { --tw-text-opacity: 1; } /* Green gradient text (bg-clip-text trick) → pine ink */ .text-gradient { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: var(--buy-ink) !important; background-clip: unset !important; color: var(--buy-ink) !important; } /* Hover-lift cards — soften the heavy shadow */ .hover-lift:hover { transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important; } /* Scrollbar — warm it up */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: var(--paper-2); } ::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-2); } /* ============================================================ 9. HEADINGS — enforce Newsreader on h1/h2/h3 platform-wide ============================================================ */ h1, h2, h3 { font-family: var(--cz-serif) !important; letter-spacing: -0.015em; line-height: 1.12; text-wrap: balance; } h4, h5, h6 { font-family: var(--cz-sans); font-weight: 700; } /* Bold utility used in dashboard headings */ .font-bold { font-family: var(--cz-sans) !important; } .font-display { font-family: var(--cz-serif) !important; letter-spacing: -0.015em !important; } /* ============================================================ 10. FORM INPUTS — paper system everywhere ============================================================ */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-family: var(--cz-sans) !important; background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink) !important; } input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: var(--travel) !important; box-shadow: 0 0 0 3px rgba(27,79,216,0.13) !important; outline: none !important; } input::placeholder, textarea::placeholder { color: var(--ink-3) !important; } input[type="checkbox"], input[type="radio"] { accent-color: var(--buy-btn) !important; } /* Focus ring from Tailwind focus:ring-2 classes */ .focus\:ring-2:focus, .focus\:ring-green-500:focus, .focus\:ring-primary-500:focus { --tw-ring-color: rgba(27,79,216,0.2); box-shadow: 0 0 0 3px rgba(27,79,216,0.13) !important; } /* ============================================================ 11. DESIGN SYSTEM COMPONENTS ============================================================ */ /* -- Editorial helpers -- */ .cz-serif, .display { font-family: var(--cz-serif); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; } .cz-kicker, .kicker { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font-family: var(--cz-sans); } .cz-kicker::before, .kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.55; } .c-travel { color: var(--travel-ink) !important; } .c-buy { color: var(--buy-ink) !important; } /* -- Buttons -- */ .btn, .cz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--cz-sans) !important; font-weight: 600; font-size: 0.93rem; padding: 13px 22px; border-radius: var(--radius-xs); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .25s var(--ease), background .25s ease, border-color .25s ease, color .25s ease; } .btn:active, .cz-btn:active { transform: scale(0.97) !important; } .btn-ink, .cz-btn-dark { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; } .btn-ink:hover, .cz-btn-dark:hover { background: #000 !important; transform: translateY(-2px) !important; } .btn-travel, .cz-btn-accent { background: var(--travel-btn) !important; color: #fff !important; } .btn-travel:hover, .cz-btn-accent:hover { background: var(--travel-d) !important; transform: translateY(-2px) !important; } .btn-buy { background: var(--buy-btn) !important; color: #fff !important; } .btn-buy:hover { background: var(--buy-d) !important; transform: translateY(-2px) !important; } .btn-ghost { background: transparent !important; color: var(--ink) !important; border-color: var(--line) !important; } .btn-ghost:hover { border-color: var(--ink) !important; transform: translateY(-2px) !important; } .btn-block, .cz-btn-block { width: 100%; } .btn-sm { padding: 9px 15px; font-size: 0.85rem; } /* -- Cards -- */ .cz-card, .card { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-sm) !important; padding: 28px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .cz-card-hover:hover, .card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md) !important; } /* -- Tags / badges -- */ .cz-tag, .badge { display: inline-flex; align-items: center; gap: 7px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border-radius: 9999px; background: var(--travel-soft); color: var(--travel-ink); } .cz-tag-buy, .badge-buy { background: var(--buy-soft); color: var(--buy-ink); } .badge-info { background: var(--info-soft); color: var(--info); } .badge-warn { background: var(--warn-soft); color: var(--warn); } .badge-danger { background: var(--danger-soft); color: var(--danger); } /* -- Tables -- */ .cz-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .cz-table th { text-align: left; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--paper-2); } .cz-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 0.9rem; } .cz-table tr:last-child td { border-bottom: none; } .cz-table tbody tr:hover { background: var(--paper); } /* -- Alerts -- */ .cz-alert, .alert { border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 14px 16px; font-size: 0.9rem; display: flex; align-items: flex-start; gap: 10px; background: var(--surface); color: var(--ink); } .cz-alert-success, .alert-success { background: var(--buy-soft); border-color: #BcD3CB; color: var(--buy-ink); } .cz-alert-error, .alert-error, .cz-alert-danger, .alert-danger { background: var(--danger-soft); border-color: #E9C3BE; color: var(--danger); } .cz-alert-warn, .alert-warning { background: var(--warn-soft); border-color: #E6D2A8; color: var(--warn); } .cz-alert-info, .alert-info { background: var(--info-soft); border-color: #C3D2F4; color: var(--info); } /* -- Scroll reveal -- */ .cz-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .cz-reveal.in { opacity: 1; transform: none; } /* ============================================================ 12. ADMIN SHELL OVERRIDES ============================================================ */ /* Sidebar stays deep pine (harmonised in admin_header.php) */ .sidebar-gradient { background: linear-gradient(180deg, #18211C 0%, #243A33 100%) !important; } /* Admin top header */ header.h-16 { background: var(--surface) !important; border-bottom-color: var(--line) !important; } /* Admin active nav item */ .sidebar-gradient .bg-blue-600, .sidebar-gradient [class*="bg-blue-"] { background-color: var(--buy-btn) !important; } .sidebar-gradient .text-blue-400 { color: #6FBFAE !important; } .sidebar-gradient .bg-blue-500 { background-color: var(--buy-btn) !important; } /* Admin content area */ .flex-1.overflow-y-auto { background: var(--paper) !important; } .bg-slate-50.flex-1 { background: var(--paper) !important; } .bg-slate-50 { background-color: var(--paper) !important; } /* Admin search input */ .bg-slate-100 { background-color: var(--paper-2) !important; } /* ============================================================ 13. ARABIC / RTL OVERRIDES ============================================================ */ html[lang="ar"] body, html[dir="rtl"] body { font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif !important; } html[lang="ar"] h1, html[dir="rtl"] h1, html[lang="ar"] h2, html[dir="rtl"] h2, html[lang="ar"] h3, html[dir="rtl"] h3, html[lang="ar"] .cz-serif, html[dir="rtl"] .cz-serif, html[lang="ar"] .display, html[dir="rtl"] .display, html[lang="ar"] .brand, html[dir="rtl"] .brand { font-family: 'Amiri', 'Noto Naskh Arabic', Georgia, serif !important; } html[dir="rtl"] .cz-kicker, html[dir="rtl"] .kicker { flex-direction: row-reverse; } html[dir="rtl"] .cz-table th { text-align: right; } html[dir="rtl"] .cz-alert, html[dir="rtl"] .alert { flex-direction: row-reverse; text-align: right; } html[dir="rtl"] .cz-label, html[dir="rtl"] .form-label { text-align: right; } html[dir="rtl"] .kicker::before { content: none; } html[dir="rtl"] .kicker::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.55; } /* ============================================================ 14. PAGE ROLE SYSTEM — cobalt (travel) vs pine (buy) Add body.page-travel on voyageur pages, body.page-buy on acheteur pages. Shared/neutral pages carry neither class. ============================================================ */ /* Semantic accent tokens — neutral fallback */ :root { --accent: var(--ink); --accent-btn: var(--ink); --accent-d: #000; --accent-soft: var(--paper-2); --accent-ink: var(--ink); } /* Voyageur role → cobalt */ body.page-travel { --accent: var(--travel); --accent-btn: var(--travel-btn); --accent-d: var(--travel-d); --accent-soft: var(--travel-soft); --accent-ink: var(--travel-ink); } /* Acheteur role → pine */ body.page-buy { --accent: var(--buy); --accent-btn: var(--buy-btn); --accent-d: var(--buy-d); --accent-soft: var(--buy-soft); --accent-ink: var(--buy-ink); } /* Generic accent button — picks up page role automatically */ .btn-accent { background: var(--accent-btn) !important; color: #fff !important; border-color: var(--accent-btn) !important; } .btn-accent:hover { background: var(--accent-d) !important; transform: translateY(-2px) !important; } /* Generic accent badge */ .badge-accent { background: var(--accent-soft); color: var(--accent-ink); } /* c-accent utility */ .c-accent { color: var(--accent-ink) !important; } /* Kicker accent line */ body.page-travel .kicker, body.page-travel .cz-kicker { color: var(--travel-ink); } body.page-buy .kicker, body.page-buy .cz-kicker { color: var(--buy-ink); } /* Focus ring follows page role */ body.page-buy input:not([type="checkbox"]):not([type="radio"]):focus, body.page-buy select:focus, body.page-buy textarea:focus { border-color: var(--buy) !important; box-shadow: 0 0 0 3px rgba(31,101,90,0.13) !important; } /* Checkbox/radio accent per role */ body.page-travel input[type="checkbox"], body.page-travel input[type="radio"] { accent-color: var(--travel-btn) !important; } body.page-buy input[type="checkbox"], body.page-buy input[type="radio"] { accent-color: var(--buy-btn) !important; } /* Nav active indicator follows page role */ body.page-travel .nav-active, body.page-travel [aria-current="page"] { color: var(--travel-ink) !important; } body.page-buy .nav-active, body.page-buy [aria-current="page"] { color: var(--buy-ink) !important; }