/* =========================== TAKTAK custom CSS (SAFE) =========================== */ /* * ══════════════════════════════════════════════════════════════════ * DESIGN SYSTEM — TAKTAK IMMO * Version: 2.0 — Light / Dark — Production Ready * ══════════════════════════════════════════════════════════════════ * * STRATÉGIE COULEUR : * • Brand → Bleu navale profond (#1E3A8A) : confiance, stabilité * • Interactive→ Bleu actif (#2563EB) : liens, états hover, icônes * • Accent CTA → Ambre chaud (#F59E0B) : conversion, CTA primaires * • Neutres → Slate légèrement froid : hiérarchie texte propre * • Surfaces → Blanc différencié en light, bleu profond en dark * • Dark mode → Profondeur bleue (pas noir pur), accents lumineux * * TOKENS SÉMANTIQUES : --tk-* (nouveau système unifié) * TOKENS LEGACY : --taktak-* (maintenu pour rétrocompatibilité) * ══════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── LIGHT MODE — :root ───────────────────────────────────────────────────────────────── */ :root { /* ══ BRAND — Bleu marine premium ══════════════════════════════ */ --tk-brand: #1E3A8A; /* couleur de marque principale */ --tk-brand-hover: #162E6E; /* bouton brand au hover */ --tk-brand-active: #0F2350; /* bouton brand au clic */ --tk-brand-soft: rgba(30, 58, 138, 0.08); --tk-brand-ring: rgba(30, 58, 138, 0.20); --tk-brand-rgb: 30, 58, 138; --tk-brand-contrast: #ffffff; /* ══ INTERACTIVE BLUE — liens, icônes, états ═════════════════ */ --tk-blue: #2563EB; --tk-blue-hover: #1D4ED8; --tk-blue-soft: rgba(37, 99, 235, 0.10); --tk-blue-border: rgba(37, 99, 235, 0.28); /* ══ ACCENT CTA — ambre chaud (conversion/action) ════════════ */ --tk-accent: #F59E0B; /* CTA primaires, bouton "Poster l'annonce" */ --tk-accent-hover: #D97706; --tk-accent-active: #B45309; --tk-accent-soft: rgba(245, 158, 11, 0.10); --tk-accent-border: rgba(245, 158, 11, 0.30); --tk-accent-contrast: #ffffff; /* ══ BACKGROUNDS ════════════════════════════════════════════ */ --tk-bg: #F6F8FB; /* fond page principal */ --tk-bg-alt: #EDF1F8; /* fond sections alternées */ --tk-bg-hero: #0F1E3C; /* fond hero sombre (overlay) */ /* ══ SURFACES ════════════════════════════════════════════════ */ --tk-surface: #FFFFFF; /* carte, modal, input */ --tk-surface-raised: #FFFFFF; /* dropdown, tooltip */ --tk-surface-subtle: #F0F4FA; /* section, encart */ --tk-surface-overlay: rgba(255,255,255,0.96); /* glassmorphism */ /* ══ BORDERS ═════════════════════════════════════════════════ */ --tk-border: #DDE3EE; --tk-border-strong: #B0BDD4; --tk-border-focus: #2563EB; /* ══ TEXT ════════════════════════════════════════════════════ */ --tk-text: #0F1E3C; /* titres, texte principal */ --tk-text-secondary: #3D5278; /* sous-titres, labels */ --tk-text-muted: #7A8DAB; /* placeholders, infos secondaires */ --tk-text-disabled: #B0BDD4; --tk-text-on-brand: #ffffff; --tk-text-on-accent: #ffffff; /* ══ STATUS — sémantique claire ══════════════════════════════ */ --tk-success: #16A34A; --tk-success-bg: #F0FDF4; --tk-success-border: #BBF7D0; --tk-success-text: #15803D; --tk-warning: #D97706; /* corrigé — était #bc0bcc (magenta) */ --tk-warning-bg: #FFFBEB; --tk-warning-border: #FDE68A; --tk-warning-text: #92400E; --tk-error: #DC2626; --tk-error-bg: #FEF2F2; --tk-error-border: #FECACA; --tk-error-text: #991B1B; --tk-info: #0EA5E9; --tk-info-bg: #F0F9FF; --tk-info-border: #BAE6FD; --tk-info-text: #0369A1; /* ══ STATUTS MÉTIER ══════════════════════════════════════════ */ --tk-sale: #2563EB; /* À vendre */ --tk-sale-bg: #EFF6FF; --tk-sale-border: #BFDBFE; --tk-sale-text: #1D4ED8; --tk-rent: #10B981; /* À louer */ --tk-rent-bg: #ECFDF5; --tk-rent-border: #A7F3D0; --tk-rent-text: #065F46; --tk-new: #7C3AED; /* Neuf */ --tk-new-bg: #F5F3FF; --tk-new-border: #DDD6FE; --tk-new-text: #5B21B6; --tk-vacation: #F59E0B; /* Vacances */ --tk-vacation-bg: #FFFBEB; --tk-vacation-border:#FDE68A; --tk-vacation-text: #92400E; /* ══ OVERLAYS ════════════════════════════════════════════════ */ --tk-overlay-soft: rgba(15, 30, 60, 0.05); --tk-overlay-medium: rgba(15, 30, 60, 0.12); --tk-overlay-strong: rgba(15, 30, 60, 0.40); --tk-backdrop: rgba(10, 20, 50, 0.60); /* ══ SHADOWS ═════════════════════════════════════════════════ */ --tk-shadow-sm: 0 1px 3px rgba(15, 30, 60, 0.08), 0 1px 2px rgba(15, 30, 60, 0.04); --tk-shadow-md: 0 4px 16px rgba(15, 30, 60, 0.10), 0 2px 6px rgba(15, 30, 60, 0.06); --tk-shadow-lg: 0 10px 32px rgba(15, 30, 60, 0.13), 0 4px 12px rgba(15, 30, 60, 0.07); --tk-shadow-xl: 0 20px 56px rgba(15, 30, 60, 0.18), 0 8px 20px rgba(15, 30, 60, 0.10); --tk-shadow-card: 0 2px 8px rgba(15, 30, 60, 0.08), 0 1px 3px rgba(15, 30, 60, 0.05); /* ══ RADII ═══════════════════════════════════════════════════ */ --tk-radius-xs: 4px; --tk-radius-sm: 8px; --tk-radius-md: 12px; --tk-radius-lg: 16px; --tk-radius-xl: 24px; --tk-radius-full: 9999px; /* ══ LEGACY ALIASES — rétrocompatibilité ════════════════════ */ /* Ces variables mappent les anciens noms vers la nouvelle palette */ --taktak-primary: var(--tk-brand); --taktak-primary-rgb: var(--tk-brand-rgb); --taktak-secondary: var(--tk-blue); --taktak-secondary-rgb: 37, 99, 235; --taktak-primary-contrast: var(--tk-brand-contrast); --taktak-primary-hover: var(--tk-brand-hover); --taktak-primary-border: var(--tk-brand); --taktak-primary-soft: var(--tk-brand-soft); --taktak-primary-ring: var(--tk-brand-ring); --taktak-surface: var(--tk-surface); --taktak-surface-soft: var(--tk-bg); --taktak-surface-muted: var(--tk-bg-alt); --taktak-border: var(--tk-border); --taktak-border-strong: var(--tk-border-strong); --taktak-text: var(--tk-text); /* fix: était brand bleu */ --taktak-text-muted: var(--tk-text-secondary); --taktak-text-soft: var(--tk-text-muted); --taktak-danger: var(--tk-error); --taktak-danger-hover: #b91c1c; --taktak-danger-soft: var(--tk-error-bg); --taktak-danger-border: var(--tk-error-border); --taktak-danger-border-strong: #fca5a5; --taktak-warning: var(--tk-warning); /* fix: était #bc0bcc */ --taktak-warning-soft: var(--tk-warning-bg); --taktak-warning-border: var(--tk-warning-border); --taktak-warning-strong: #f59e0b; --taktak-success: var(--tk-success); --taktak-success-soft: var(--tk-success-bg); --taktak-success-border: var(--tk-success-border); --taktak-purple: #d4a017; /* renommé logiquement: super-boost / gold */ --taktak-purple-soft: #fff7db; --taktak-purple-border: #e0b84f; --super-boost-bg: #d4a017; --super-boost-text: #fff8e1; --super-boost-hover: #b8860b; --taktak-dark-surface: #081225; /* bleu nuit profond */ --taktak-dark-surface-soft: #0F1B33; /* FIX CRITIQUE: était #1E3A8A */ --taktak-dark-surface-muted: #152347; /* FIX: était #221733 (violet) */ --taktak-dark-border: rgba(34, 52, 90, 0.80); --taktak-dark-border-strong: #2E4A7A; --taktak-dark-text: #E8EFFC; --taktak-dark-text-muted: #A4BCDE; --taktak-dark-text-soft: #627899; --taktak-dark-primary-soft: rgba(91, 140, 255, 0.14); --taktak-dark-primary-border:rgba(91, 140, 255, 0.28); --taktak-dark-warning-soft: rgba(245, 158, 11, 0.10); --taktak-dark-warning-border:rgba(245, 158, 11, 0.22); --taktak-dark-warning-text: #FCD34D; --taktak-dark-danger-soft: rgba(239, 68, 68, 0.10); --taktak-dark-danger-border: rgba(239, 68, 68, 0.22); --taktak-dark-danger-border-strong: rgba(239, 68, 68, 0.40); --taktak-dark-danger-text: #FCA5A5; --taktak-dark-danger-text-strong: #FECACA; --taktak-neutral-border-soft: #E2E8F0; --taktak-danger-soft-hover: #fee2e2; --taktak-overlay-soft: var(--tk-overlay-soft); --taktak-overlay-medium: var(--tk-overlay-medium); --taktak-overlay-strong: var(--tk-overlay-strong); --taktak-dark-overlay-soft: rgba(2, 8, 22, 0.20); --taktak-dark-overlay-medium:rgba(2, 8, 22, 0.40); --taktak-dark-overlay-strong:rgba(2, 8, 22, 0.60); --taktak-shadow-soft: var(--tk-shadow-sm); --taktak-shadow-md: var(--tk-shadow-md); --taktak-shadow-lg: var(--tk-shadow-lg); --taktak-shadow-xl: var(--tk-shadow-xl); --taktak-dark-shadow-soft: 0 1px 3px rgba(2, 8, 22, 0.35); --taktak-dark-shadow-md: 0 8px 24px rgba(2, 8, 22, 0.45); --taktak-dark-shadow-lg: 0 10px 32px rgba(2, 8, 22, 0.55); --taktak-dark-shadow-xl: 0 25px 60px rgba(2, 8, 22, 0.65); --taktak-glass-surface: rgba(255, 255, 255, 0.97); --taktak-glass-dark-surface: rgba(11, 21, 38, 0.96); --taktak-backdrop: var(--tk-backdrop); } /* ───────────────────────────────────────────────────────────────── DARK MODE — surcharge sémantique Logique : bleu profond non-noir, accents lumineux, lisibilité max ───────────────────────────────────────────────────────────────── */ .dark { /* ══ BRAND ════════════════════════════════════════════════════ */ --tk-brand: #5B8CFF; /* plus lumineux sur fond sombre */ --tk-brand-hover: #7FB0FF; --tk-brand-active: #99C4FF; --tk-brand-soft: rgba(91, 140, 255, 0.15); --tk-brand-ring: rgba(91, 140, 255, 0.30); --tk-brand-rgb: 91, 140, 255; --tk-brand-contrast: #ffffff; /* ══ INTERACTIVE BLUE ═════════════════════════════════════════ */ --tk-blue: #7FB0FF; --tk-blue-hover: #99C4FF; --tk-blue-soft: rgba(127, 176, 255, 0.14); --tk-blue-border: rgba(127, 176, 255, 0.25); /* ══ ACCENT CTA ════════════════════════════════════════════════ */ --tk-accent: #F59E0B; /* plus lumineux en dark */ --tk-accent-hover: #FBBF24; --tk-accent-active: #FCD34D; --tk-accent-soft: rgba(245, 158, 11, 0.14); --tk-accent-border: rgba(245, 158, 11, 0.28); --tk-accent-contrast: #1A1200; /* texte sombre sur fond ambre */ /* ══ BACKGROUNDS ══════════════════════════════════════════════ */ --tk-bg: #081225; /* fond page — bleu nuit profond */ --tk-bg-alt: #0B1730; /* sections alternées */ --tk-bg-hero: #050D1B; /* hero encore plus profond */ /* ══ SURFACES ══════════════════════════════════════════════════ */ --tk-surface: #0F1B33; /* cartes, modals */ --tk-surface-raised: #152347; /* dropdown, tooltip */ --tk-surface-subtle: #0A1528; /* encarts, sections */ --tk-surface-overlay: rgba(15, 27, 51, 0.97); /* ══ BORDERS ══════════════════════════════════════════════════ */ --tk-border: #22345A; --tk-border-strong: #2E4A7A; --tk-border-focus: #7FB0FF; /* ══ TEXT ══════════════════════════════════════════════════════ */ --tk-text: #E8EFFC; /* très lisible, pas blanc pur */ --tk-text-secondary: #A4BCDE; --tk-text-muted: #627899; --tk-text-disabled: #3A5070; --tk-text-on-brand: #ffffff; --tk-text-on-accent: #1A1200; /* ══ STATUS ════════════════════════════════════════════════════ */ --tk-success: #22C55E; --tk-success-bg: rgba(34, 197, 94, 0.11); --tk-success-border: rgba(34, 197, 94, 0.24); --tk-success-text: #86EFAC; --tk-warning: #F59E0B; --tk-warning-bg: rgba(245, 158, 11, 0.11); --tk-warning-border: rgba(245, 158, 11, 0.24); --tk-warning-text: #FCD34D; --tk-error: #EF4444; --tk-error-bg: rgba(239, 68, 68, 0.11); --tk-error-border: rgba(239, 68, 68, 0.24); --tk-error-text: #FCA5A5; --tk-info: #38BDF8; --tk-info-bg: rgba(56, 189, 248, 0.11); --tk-info-border: rgba(56, 189, 248, 0.24); --tk-info-text: #7DD3FC; /* ══ STATUTS MÉTIER ════════════════════════════════════════════ */ --tk-sale: #93C5FD; --tk-sale-bg: rgba(147, 197, 253, 0.12); --tk-sale-border: rgba(147, 197, 253, 0.24); --tk-sale-text: #BFDBFE; --tk-rent: #34D399; --tk-rent-bg: rgba(52, 211, 153, 0.12); --tk-rent-border: rgba(52, 211, 153, 0.24); --tk-rent-text: #6EE7B7; --tk-new: #A78BFA; --tk-new-bg: rgba(167, 139, 250, 0.14); --tk-new-border: rgba(167, 139, 250, 0.24); --tk-new-text: #C4B5FD; --tk-vacation: #F59E0B; --tk-vacation-bg: rgba(245, 158, 11, 0.12); --tk-vacation-border:rgba(245, 158, 11, 0.24); --tk-vacation-text: #FCD34D; /* ══ OVERLAYS ══════════════════════════════════════════════════ */ --tk-overlay-soft: rgba(2, 8, 22, 0.20); --tk-overlay-medium: rgba(2, 8, 22, 0.45); --tk-overlay-strong: rgba(2, 8, 22, 0.65); --tk-backdrop: rgba(1, 5, 15, 0.72); /* ══ SHADOWS ═══════════════════════════════════════════════════ */ --tk-shadow-sm: 0 1px 3px rgba(2, 8, 22, 0.35); --tk-shadow-md: 0 4px 16px rgba(2, 8, 22, 0.45); --tk-shadow-lg: 0 10px 32px rgba(2, 8, 22, 0.55); --tk-shadow-xl: 0 20px 56px rgba(2, 8, 22, 0.65); --tk-shadow-card: 0 2px 8px rgba(2, 8, 22, 0.40); /* ══ SEARCH CTA — perle froide premium (dark only) ═══════════ */ --dark-search-cta-bg: #F3F6FC; --dark-search-cta-bg-hover: #E9EEF8; --dark-search-cta-bg-active: #DDE6F4; --dark-search-cta-text: #2E4675; --dark-search-cta-border: #C7D2E3; --dark-search-cta-shadow: 0 10px 24px rgba(8, 18, 37, 0.22); --dark-search-cta-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.65); --dark-search-cta-ring: rgba(199, 210, 227, 0.55); /* ══ LEGACY ALIASES — dark mode corrigé ════════════════════════ */ --taktak-primary: var(--tk-brand); --taktak-primary-rgb: var(--tk-brand-rgb); --taktak-secondary: var(--tk-blue); --taktak-primary-contrast: var(--tk-brand-contrast); --taktak-primary-hover: var(--tk-brand-hover); --taktak-primary-soft: var(--tk-brand-soft); --taktak-primary-ring: var(--tk-brand-ring); --taktak-surface: var(--tk-surface); --taktak-surface-soft: var(--tk-surface-subtle); --taktak-surface-muted: var(--tk-bg-alt); --taktak-border: var(--tk-border); --taktak-border-strong: var(--tk-border-strong); --taktak-text: var(--tk-text); --taktak-text-muted: var(--tk-text-secondary); --taktak-text-soft: var(--tk-text-muted); --taktak-danger: var(--tk-error); --taktak-danger-soft: var(--tk-error-bg); --taktak-danger-border: var(--tk-error-border); --taktak-dark-danger-text: var(--tk-error-text); --taktak-warning: var(--tk-warning); --taktak-warning-soft: var(--tk-warning-bg); --taktak-warning-border: var(--tk-warning-border); --taktak-dark-warning-text: var(--tk-warning-text); --taktak-success: var(--tk-success); --taktak-success-soft: var(--tk-success-bg); --taktak-success-border: var(--tk-success-border); --taktak-dark-surface: var(--tk-bg); --taktak-dark-surface-soft: var(--tk-surface); --taktak-dark-surface-muted: var(--tk-surface-subtle); --taktak-dark-border: var(--tk-border); --taktak-dark-border-strong: var(--tk-border-strong); --taktak-dark-text: var(--tk-text); --taktak-dark-text-muted: var(--tk-text-secondary); --taktak-dark-text-soft: var(--tk-text-muted); --taktak-dark-primary-soft: var(--tk-brand-soft); --taktak-dark-primary-border:var(--tk-brand-ring); --taktak-overlay-soft: var(--tk-overlay-soft); --taktak-overlay-medium: var(--tk-overlay-medium); --taktak-overlay-strong: var(--tk-overlay-strong); --taktak-backdrop: var(--tk-backdrop); --taktak-shadow-soft: var(--tk-shadow-sm); --taktak-shadow-md: var(--tk-shadow-md); --taktak-shadow-lg: var(--tk-shadow-lg); --taktak-shadow-xl: var(--tk-shadow-xl); --taktak-glass-surface: rgba(21, 32, 64, 0.97); --taktak-glass-dark-surface: rgba(11, 21, 38, 0.97); } html, body { max-width: 100%; overflow-x: hidden; } /* ✅ Text selection color */ ::selection { background: var(--tk-brand-soft); color: var(--tk-text); } ::-moz-selection { background: var(--tk-brand-soft); color: var(--tk-text); } .taktak-org-logo { --logo-size: 3.5rem; width: var(--logo-size); height: var(--logo-size); flex: 0 0 var(--logo-size); display: inline-flex; align-items: center; justify-content: center; border-radius: 1rem; overflow: hidden; background: var(--tk-surface); border: 1px solid var(--tk-border); box-shadow: var(--tk-shadow-sm); } .taktak-org-logo--with-badge { position: relative; overflow: visible; } .taktak-org-logo__img { width: 100%; height: 100%; display: block; object-fit: contain; padding: 0; } .taktak-org-logo__fallback { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; color: var(--taktak-primary); background: rgba(var(--taktak-primary-rgb), 0.08); } .taktak-org-logo__verified { position: absolute; right: -0.22rem; bottom: -0.22rem; width: 1rem; height: 1rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: #2563eb; color: #ffffff; font-size: 0.72rem; box-shadow: 0 0 0 2px #ffffff; z-index: 2; pointer-events: none; } .dark .taktak-org-logo__verified { background: #3b82f6; box-shadow: 0 0 0 2px var(--tk-surface); } .taktak-org-logo--xs { --logo-size: 2.5rem; border-radius: 0.85rem; } .taktak-org-logo--sm { --logo-size: 3rem; border-radius: 0.9rem; } .taktak-org-logo--md { --logo-size: 3.5rem; } .taktak-org-logo--lg { --logo-size: 4rem; } .taktak-org-logo--xl { --logo-size: 5.5rem; border-radius: 1.25rem; } .taktak-org-logo--2xl { --logo-size: 6.5rem; border-radius: 1.35rem; } .taktak-org-logo--hero { --logo-size: 6rem; border-radius: 1.35rem; } .taktak-org-logo--xs .taktak-org-logo__img, .taktak-org-logo--sm .taktak-org-logo__img, .taktak-org-logo--md .taktak-org-logo__img, .taktak-org-logo--lg .taktak-org-logo__img { padding: 0.5%; } .taktak-org-logo--xl .taktak-org-logo__img { padding: 0.25%; } .taktak-org-logo--2xl .taktak-org-logo__img, .taktak-org-logo--hero .taktak-org-logo__img { padding: 0; } .dark .taktak-org-logo { background: var(--tk-surface); border-color: var(--tk-border); box-shadow: var(--tk-shadow-md); } .taktak-pagination { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .taktak-pagination-link, .taktak-pagination-current { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; font-weight: 600; transition: all 0.2s ease; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08); } .taktak-pagination-link { background: var(--tk-surface); color: var(--tk-text-muted); border: 1px solid var(--tk-border); } .taktak-pagination-link:hover { background: var(--tk-brand); border-color: var(--tk-brand); color: var(--tk-brand-contrast); transform: translateY(-1px); } .taktak-pagination-current { background: var(--tk-brand); color: var(--tk-brand-contrast); border: 1px solid var(--tk-brand); } .dark .taktak-pagination-link { background: var(--tk-surface); color: var(--tk-text-muted); border-color: var(--tk-border); box-shadow: var(--tk-shadow-md); } .dark .taktak-pagination-link:hover { background: var(--tk-brand); border-color: var(--tk-brand); color: var(--tk-brand-contrast); } .dark .taktak-pagination-current { background: var(--tk-brand); border-color: var(--taktak-primary); color: var(--taktak-primary-contrast); box-shadow: 0 10px 24px rgba(var(--taktak-primary-rgb), 0.25); } @media (max-width: 640px) { .taktak-pagination { gap: 0.4rem; } .taktak-pagination-link, .taktak-pagination-current { width: 2.45rem; height: 2.45rem; font-size: 0.95rem; } } /* ───────────────────────────────────────────────────────────────── CTA ACCENT BUTTON — .tk-btn-accent Utilisé pour le bouton principal de conversion (poster une annonce, contact, etc.). Couleur ambre sur les deux modes. ───────────────────────────────────────────────────────────────── */ .tk-btn-accent { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; background: var(--tk-accent); color: var(--tk-text-on-accent); border: none; font-weight: 600; border-radius: var(--tk-radius-sm); box-shadow: 0 4px 14px var(--tk-accent-soft); transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; cursor: pointer; text-decoration: none; } .tk-btn-accent:hover { background: var(--tk-accent-hover); box-shadow: 0 6px 18px var(--tk-accent-soft); transform: translateY(-1px); color: var(--tk-text-on-accent); } .tk-btn-accent:active { background: var(--tk-accent-active); transform: translateY(0); box-shadow: none; } .tk-btn-accent:focus-visible { outline: 3px solid var(--tk-accent-border); outline-offset: 2px; } .tk-btn-accent:disabled, .tk-btn-accent[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* Primary brand button (semantic utility, complements Tailwind) */ .tk-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; background: var(--tk-brand); color: var(--tk-brand-contrast); border: none; font-weight: 600; border-radius: var(--tk-radius-sm); box-shadow: 0 4px 14px var(--tk-brand-soft); transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; cursor: pointer; text-decoration: none; } .tk-btn-primary:hover { background: var(--tk-brand-hover); box-shadow: 0 6px 18px var(--tk-brand-soft); transform: translateY(-1px); color: var(--tk-brand-contrast); } .tk-btn-primary:active { background: var(--tk-brand-active); transform: translateY(0); box-shadow: none; } .tk-btn-primary:focus-visible { outline: 3px solid var(--tk-brand-ring); outline-offset: 2px; } .tk-btn-primary:disabled, .tk-btn-primary[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ───────────────────────────────────────────────────────────────── BADGE SYSTÈME — .tk-badge-* 4 types de transaction immo. Fonctionne light et dark. ───────────────────────────────────────────────────────────────── */ .tk-badge { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.2em 0.65em; border-radius: var(--tk-radius-xs); font-size: 0.75rem; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; } .tk-badge-sale { background: var(--tk-sale-bg); color: var(--tk-sale-text); border-color: var(--tk-sale-border); } .tk-badge-rent { background: var(--tk-rent-bg); color: var(--tk-rent-text); border-color: var(--tk-rent-border); } .tk-badge-new { background: var(--tk-new-bg); color: var(--tk-new-text); border-color: var(--tk-new-border); } .tk-badge-vacation { background: var(--tk-vacation-bg); color: var(--tk-vacation-text); border-color: var(--tk-vacation-border); } /* ───────────────────────────────────────────────────────────────── THEME TOGGLE — .tk-theme-toggle Bouton bascule clair/sombre dans la navbar. ───────────────────────────────────────────────────────────────── */ .tk-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--tk-radius-full); background: var(--tk-surface); border: 1px solid var(--tk-border); color: var(--tk-text-secondary); cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; box-shadow: var(--tk-shadow-sm); } .tk-theme-toggle:hover { background: var(--tk-surface-subtle); border-color: var(--tk-border-strong); color: var(--tk-text); box-shadow: var(--tk-shadow-md); } .tk-theme-toggle:focus-visible { outline: 2px solid var(--tk-brand-ring); outline-offset: 2px; } .dark .tk-theme-toggle { background: var(--tk-surface); border-color: var(--tk-border); color: var(--tk-text-secondary); box-shadow: var(--tk-shadow-md); } .dark .tk-theme-toggle:hover { background: var(--tk-surface-raised); border-color: var(--tk-border-strong); color: var(--tk-text); } /* Icon swap helpers */ .tk-theme-toggle .icon-sun { display: none; } .tk-theme-toggle .icon-moon { display: block; } .dark .tk-theme-toggle .icon-sun { display: block; } .dark .tk-theme-toggle .icon-moon { display: none; } /* ───────────────────────────────────────────────────────────────── INTERACTIVE STATES — focus, hover, active, disabled Règles globales légères pour accessibilité WCAG 2.1 AA ───────────────────────────────────────────────────────────────── */ /* Focus visible global (anneaux de focus accessibles) */ :focus-visible { outline: 2px solid var(--tk-border-focus); outline-offset: 2px; } /* Liens standard */ a:not([class]) { color: var(--tk-blue); transition: color 0.15s ease; } a:not([class]):hover { color: var(--tk-blue-hover); text-decoration: underline; } /* Inputs et selects */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { transition: border-color 0.18s ease, box-shadow 0.18s ease; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, textarea:focus, select:focus { border-color: var(--tk-border-focus) !important; box-shadow: 0 0 0 3px rgba(var(--tk-brand-rgb), 0.12) !important; outline: none; } /* Disabled state */ [disabled], [aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ✅ align navbar (uniquement menu) */ #topnav { z-index: 10050 !important; } /* Empêche les tuiles/overlays Leaflet de passer au-dessus de la navbar */ .leaflet-container, .leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 1; } #topnav .navigation-menu.justify-end { justify-content: flex-end !important; } #topnav .navigation-menu.justify-start { justify-content: flex-start !important; } #topnav .taktak-navbar-shell { justify-content: space-between !important; gap: 28px; } #topnav .logo { margin-right: 0 !important; } #topnav .taktak-navbar-center { flex: 1 1 auto; display: flex; justify-content: center; } #topnav .taktak-navbar-menu { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; flex-wrap: nowrap !important; } #topnav .taktak-navbar-menu > li > a { padding-left: 26px !important; padding-right: 26px !important; white-space: nowrap !important; } #topnav.taktak-navbar-auth-on .taktak-navbar-menu { gap: 14px; } #topnav.taktak-navbar-auth-on .taktak-navbar-menu > li > a { padding-left: 18px !important; padding-right: 18px !important; } #topnav .taktak-brand-logo--nav { max-width: 220px !important; height: 56px !important; } #topnav .taktak-navbar-auth { margin-left: auto !important; flex: 0 0 auto; padding-right: 6px; } /* ✅ Force readable links on TAKTAK light navbar before sticky state */ #topnav.taktak-navbar-light .navigation-menu.nav-light > li > a { color: #1e293b !important; } #topnav.taktak-navbar-light .navigation-menu.nav-light > li:hover > a, #topnav.taktak-navbar-light .navigation-menu.nav-light > li.active > a { color: var(--taktak-primary) !important; } /* ✅ Dark navbar over hero: white before sticky, dark after sticky */ #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu > li > a.taktak-public-nav-link, #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu.nav-light > li > a, #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu.nav-light > li > a.taktak-public-nav-link { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35) !important; } #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu > li:hover > a.taktak-public-nav-link, #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu > li.active > a.taktak-public-nav-link, #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu.nav-light > li:hover > a, #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu.nav-light > li.active > a, #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu.nav-light > li:hover > a.taktak-public-nav-link, #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu.nav-light > li.active > a.taktak-public-nav-link { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #topnav.taktak-navbar-dark.nav-sticky .navigation-menu > li > a.taktak-public-nav-link, #topnav.taktak-navbar-dark.nav-sticky .navigation-menu.nav-light > li > a, #topnav.taktak-navbar-dark.nav-sticky .navigation-menu.nav-light > li > a.taktak-public-nav-link { color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; text-shadow: none !important; opacity: 1 !important; } #topnav.taktak-navbar-dark.nav-sticky .navigation-menu > li:hover > a.taktak-public-nav-link, #topnav.taktak-navbar-dark.nav-sticky .navigation-menu > li.active > a.taktak-public-nav-link, #topnav.taktak-navbar-dark.nav-sticky .navigation-menu.nav-light > li:hover > a, #topnav.taktak-navbar-dark.nav-sticky .navigation-menu.nav-light > li.active > a, #topnav.taktak-navbar-dark.nav-sticky .navigation-menu.nav-light > li:hover > a.taktak-public-nav-link, #topnav.taktak-navbar-dark.nav-sticky .navigation-menu.nav-light > li.active > a.taktak-public-nav-link { color: var(--taktak-primary) !important; -webkit-text-fill-color: var(--taktak-primary) !important; } /* ✅ Keep public navbar links white even when sticky in dark mode (specific pages) */ .dark #topnav.taktak-navbar-keep-white.nav-sticky .navigation-menu > li > a.taktak-public-nav-link, .dark #topnav.taktak-navbar-keep-white.nav-sticky .navigation-menu.nav-light > li > a, .dark #topnav.taktak-navbar-keep-white.nav-sticky .navigation-menu.nav-light > li > a.taktak-public-nav-link, .dark #topnav.taktak-navbar-keep-white.nav-sticky .navigation-menu > li > a { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35) !important; opacity: 1 !important; } .dark #topnav.taktak-navbar-keep-white.nav-sticky .navigation-menu > li:hover > a.taktak-public-nav-link, .dark #topnav.taktak-navbar-keep-white.nav-sticky .navigation-menu > li.active > a.taktak-public-nav-link, .dark #topnav.taktak-navbar-keep-white.nav-sticky .navigation-menu.nav-light > li:hover > a, .dark #topnav.taktak-navbar-keep-white.nav-sticky .navigation-menu.nav-light > li.active > a, .dark #topnav.taktak-navbar-keep-white.nav-sticky .navigation-menu.nav-light > li:hover > a.taktak-public-nav-link, .dark #topnav.taktak-navbar-keep-white.nav-sticky .navigation-menu.nav-light > li.active > a.taktak-public-nav-link, .dark #topnav.taktak-navbar-keep-white.nav-sticky .navigation-menu > li:hover > a, .dark #topnav.taktak-navbar-keep-white.nav-sticky .navigation-menu > li.active > a { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ✅ Fix Choices uniquement dans hero search */ .hero-search .choices { width: 100% !important; } .hero-search .choices__inner { background: transparent !important; border: 0 !important; min-height: 48px !important; padding: 10px 12px 10px 36px !important; display: flex !important; align-items: center !important; } .hero-search .choices__list--single { padding: 0 !important; } .hero-search .choices__placeholder { opacity: 1 !important; } .hero-search .choices[data-type*="select-one"]::after { right: 12px !important; margin-top: -2px !important; } /* ============================================= LAPTOP RESPONSIVE (768px – 1279px) Réduit les paddings/gaps de la navbar pour les petits écrans (ex. HP EliteBook 1280p) sans toucher au mobile (≤767px) ni au grand bureau. ============================================= */ @media (min-width: 768px) and (max-width: 1279px) { #topnav .taktak-navbar-shell { gap: 12px; } #topnav .taktak-navbar-menu { gap: 4px !important; } #topnav .taktak-navbar-menu > li > a { padding-left: 10px !important; padding-right: 10px !important; font-size: 0.875rem !important; } #topnav.taktak-navbar-auth-on .taktak-navbar-menu > li > a { padding-left: 8px !important; padding-right: 8px !important; } #topnav .taktak-brand-logo--nav { max-width: 160px !important; height: 46px !important; } #topnav .buy-button .taktak-nav-cta { padding: 0 12px !important; min-height: 38px !important; font-size: 0.85rem !important; } #topnav .buy-button .taktak-nav-icon { min-height: 38px !important; height: 38px !important; width: 38px !important; } } /* ============================================= NOTEBOOK RESPONSIVE (1024px – 1439px) Réduit légèrement l'échelle visuelle sur les écrans portables 13"/14" pour éviter l'effet "trop grand" sans impacter mobile ni desktop large. ============================================= */ @media (min-width: 1024px) and (max-width: 1439px) { html { font-size: 15px; } #topnav .taktak-navbar-shell { gap: 14px; } #topnav .taktak-navbar-menu { gap: 6px !important; } #topnav .taktak-navbar-menu > li > a { padding-left: 12px !important; padding-right: 12px !important; font-size: 0.92rem !important; } #topnav.taktak-navbar-auth-on .taktak-navbar-menu > li > a { padding-left: 10px !important; padding-right: 10px !important; } #topnav .taktak-brand-logo--nav { max-width: 180px !important; height: 48px !important; } #topnav .buy-button .taktak-nav-cta { padding: 0 13px !important; min-height: 40px !important; font-size: 0.85rem !important; } #topnav .buy-button .taktak-nav-icon { min-height: 40px !important; height: 40px !important; width: 40px !important; } } /* ============================================= LAPTOP COMPACT (1024px – 1600px) Rend le site moins "gonflé" sur les écrans portables 15.6" type 1366x768 / 1536x864. ============================================= */ @media (min-width: 1024px) and (max-width: 1600px) { html { font-size: 14.5px; } body { line-height: 1.5; } #topnav .taktak-navbar-shell { gap: 10px; } #topnav .taktak-navbar-menu { gap: 2px !important; } #topnav .taktak-navbar-menu > li > a { padding-left: 9px !important; padding-right: 9px !important; font-size: 0.86rem !important; } #topnav.taktak-navbar-auth-on .taktak-navbar-menu > li > a { padding-left: 8px !important; padding-right: 8px !important; } #topnav .taktak-brand-logo--nav { max-width: 168px !important; height: 42px !important; } #topnav .buy-button .taktak-nav-cta { min-height: 37px !important; padding: 0 11px !important; font-size: 0.82rem !important; } #topnav .buy-button .taktak-nav-icon { min-height: 37px !important; height: 37px !important; width: 37px !important; } .taktak-org-logo--xl { --logo-size: 4.75rem; } .taktak-org-logo--2xl { --logo-size: 5.5rem; } .taktak-org-logo--hero { --logo-size: 5.25rem; } .container-fluid { padding-left: 0.875rem !important; padding-right: 0.875rem !important; } .layout-specing { gap: 1rem !important; } } @media (min-width: 1024px) and (max-width: 1600px) and (max-height: 900px) { html { font-size: 14px; } #topnav .taktak-navbar-shell { gap: 8px; } #topnav .taktak-brand-logo--nav { max-width: 156px !important; height: 40px !important; } .layout-specing { gap: 0.9rem !important; } } /* ✅ Brand logo sizing, only on explicit UI logos */ .taktak-brand-logo { max-width: 430px !important; height: 96px !important; width: auto !important; object-fit: contain !important; } .top-header .taktak-brand-logo, .top-header .taktak-mobile-brand-logo { max-width: 150px !important; height: 30px !important; width: auto !important; object-fit: contain !important; } .taktak-footer-logo { max-width: 210px !important; height: 42px !important; width: auto !important; object-fit: contain !important; } .taktak-sidebar-logo { max-width: 120px !important; height: 40px !important; width: auto !important; object-fit: contain !important; } @media (max-width: 767px) { .top-header .taktak-brand-logo, .top-header .taktak-mobile-brand-logo { max-width: 110px !important; height: 22px !important; } .taktak-sidebar-logo { max-width: 70px !important; height: 28px !important; } } /* Split-screen / narrow desktop: force mobile-like nav behavior */ @media (min-width: 768px) and (max-width: 1279px) { #topnav .menu-extras { display: block !important; margin-left: 12px !important; flex: 0 0 auto !important; } #topnav .menu-extras .menu-item { display: flex; align-items: center; justify-content: center; } #topnav .navbar-toggle { width: 40px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); } #topnav .navbar-toggle .lines { margin: 0 !important; width: 20px; height: 16px; display: flex; flex-direction: column; justify-content: space-between; } #topnav .navbar-toggle span { margin-bottom: 0 !important; } .dark #topnav .navbar-toggle { background: rgba(15, 23, 42, 0.94); border-color: rgba(71, 85, 105, 0.8); box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28); } #topnav #navigation { display: none !important; position: absolute; top: calc(100% + 8px); left: 14px; right: 14px; width: auto; padding: 12px; border-radius: 18px; border: 1px solid #e2e8f0; background: rgba(255, 255, 255, 0.98); box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 40; } #topnav #navigation.is-open { display: block !important; } .dark #topnav #navigation { background: rgba(15, 23, 42, 0.97); border-color: #334155; box-shadow: 0 24px 48px rgba(2, 6, 23, 0.45); } #topnav #navigation .taktak-navbar-menu { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 6px !important; width: 100%; } #topnav #navigation .taktak-navbar-menu > li { width: 100%; margin: 0 !important; } #topnav #navigation .taktak-navbar-menu > li > a { display: block !important; width: 100%; padding: 12px 14px !important; border-radius: 12px; background: #f8fafc; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; text-shadow: none !important; opacity: 1 !important; font-size: 0.95rem !important; line-height: 1.35 !important; text-align: left; } .dark #topnav #navigation .taktak-navbar-menu > li > a { background: rgba(30, 41, 59, 0.88); color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; } } .sidebar-wrapper .sidebar-brand { display: flex; align-items: center; justify-content: center; padding: 12px 10px; } .sidebar-wrapper .sidebar-brand a { display: flex; align-items: center; justify-content: center; width: 100%; } .sidebar-wrapper .sidebar-content { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .sidebar-wrapper .sidebar-menu-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } .sidebar-wrapper .sidebar-menu-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; } .sidebar-wrapper .taktak-sidebar-scroll, .sidebar-wrapper .taktak-sidebar-scroll .simplebar-mask, .sidebar-wrapper .taktak-sidebar-scroll .simplebar-offset, .sidebar-wrapper .taktak-sidebar-scroll .simplebar-content-wrapper { max-height: 100%; } .sidebar-wrapper .taktak-sidebar-scroll .simplebar-content-wrapper { overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .sidebar-wrapper .taktak-sidebar-scroll .simplebar-content-wrapper::-webkit-scrollbar { width: 0; height: 0; display: none; } .sidebar-wrapper .sidebar-footer { padding: 6px 10px 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 23, 42, 0.35); } .page-wrapper .sidebar-wrapper .sidebar-menu { padding-top: 0.5rem; padding-bottom: 0.5rem; } .page-wrapper .sidebar-wrapper .sidebar-menu li a { padding-top: 0.6rem; padding-bottom: 0.6rem; text-decoration: none !important; } .page-wrapper .sidebar-wrapper .sidebar-menu li a:hover, .page-wrapper .sidebar-wrapper .sidebar-menu li a:focus, .page-wrapper .sidebar-wrapper .sidebar-menu li a:active, .page-wrapper .sidebar-wrapper .sidebar-menu li.active > a, .page-wrapper .sidebar-wrapper .sidebar-menu li a i, .page-wrapper .sidebar-wrapper .sidebar-menu li a:hover i, .page-wrapper .sidebar-wrapper .sidebar-menu li a:focus i, .page-wrapper .sidebar-wrapper .sidebar-menu li a:active i, .page-wrapper .sidebar-wrapper .sidebar-menu li.active > a i { text-decoration: none !important; } .dashboard-logout-btn { color: rgba(255, 255, 255, 0.5); } .dashboard-logout-btn:hover { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.08); } .dashboard-logout-btn i { color: inherit; } .taktak-auth-logo { max-width: 520px !important; height: 140px !important; width: auto !important; object-fit: contain !important; } /* ✅ Global accent override: replace template green with TAKTAK blue */ .text-green-600, .hover\:text-green-600:hover, .hover\:text-green-700:hover, .dark\:text-green-600:is(.dark *), .sidebar-nav > .navbar-item:hover .navbar-link, .sidebar-nav > .navbar-item.active .navbar-link, .sidebar-nav li.active a, #topnav .navigation-menu > li > a:hover, #topnav .navigation-menu > li > a:active, #topnav .navigation-menu > li:hover > a, #topnav .navigation-menu > li.active > a, #topnav.nav-sticky .navigation-menu.nav-light > li.active > a, #topnav.nav-sticky .navigation-menu.nav-light > li:hover > a { color: #1E3A8A !important; } .bg-green-600, .hover\:bg-green-600:hover, .hover\:bg-green-700:hover, .dark\:hover\:bg-green-600:hover:is(.dark *), .sidebar-nav li.account-menu.active .navbar-link, .sidebar-nav li.account-menu:hover .navbar-link, .tns-nav button.tns-nav-active, .tns-controls button[data-controls="prev"]:hover, .tns-controls button[data-controls="next"]:hover { background-color: #1E3A8A !important; } .border-green-600, .hover\:border-green-600:hover, .hover\:border-green-700:hover, .dark\:border-green-600:is(.dark *), .dark\:hover\:border-green-600:hover:is(.dark *), #topnav .navigation-menu > li:hover > .menu-arrow, #topnav .navigation-menu > li.active > .menu-arrow, #topnav.nav-sticky .navigation-menu.nav-light > li:hover > .menu-arrow, #topnav.nav-sticky .navigation-menu.nav-light > li.active > .menu-arrow, .tns-nav button.tns-nav-active, .tns-controls button[data-controls="prev"]:hover, .tns-controls button[data-controls="next"]:hover { border-color: #1E3A8A !important; } .tns-controls button[data-controls="prev"], .tns-controls button[data-controls="next"] { color: #1E3A8A !important; } .bg-green-600\/5, .bg-green-600\/10, .dark\:bg-green-600\/20:is(.dark *) { background-color: rgba(0, 0, 128, 0.1) !important; } .fill-green-600\/5 { fill: rgba(0, 0, 128, 0.08) !important; } .focus\:border-green-300:focus, .form-input:focus { border-color: #1E3A8A !important; } #success_page { background-color: rgba(0, 0, 128, 0.08) !important; color: #1E3A8A !important; } #preloader #status .spinner .double-bounce1, #preloader #status .spinner .double-bounce2 { background-color: rgba(0, 0, 128, 0.6) !important; } .filter-search-form .icons { color: #1E3A8A !important; } /* ✅ Navbar CTA buttons: force the public blue style */ #topnav .buy-button .taktak-nav-icon, #topnav .buy-button .taktak-nav-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #1E3A8A !important; border: 1px solid #1E3A8A !important; color: #ffffff !important; box-shadow: 0 8px 20px rgba(0, 0, 128, 0.22) !important; } #topnav .buy-button .taktak-nav-icon { width: 42px !important; height: 42px !important; border-radius: 9999px !important; } #topnav .buy-button .taktak-nav-cta { min-height: 42px !important; padding: 0 20px !important; border-radius: 9999px !important; font-weight: 700 !important; appearance: none !important; -webkit-appearance: none !important; border-style: solid !important; cursor: pointer !important; } #topnav .buy-button .taktak-nav-icon:hover, #topnav .buy-button .taktak-nav-cta:hover { background: #1E3A8A !important; border-color: #1E3A8A !important; color: #ffffff !important; } #topnav .buy-button .taktak-nav-logout { background: #64748b !important; border-color: #64748b !important; box-shadow: 0 8px 20px rgba(100, 116, 139, 0.22) !important; } #topnav .buy-button .taktak-nav-logout:hover { background: #475569 !important; border-color: #475569 !important; color: #ffffff !important; } .taktak-logout-label-mobile { display: none; } /* Final navbar override: dark variant must stay white on hero and dark after sticky */ #topnav.taktak-navbar-dark:not(.nav-sticky) { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #topnav.taktak-navbar-dark:not(.nav-sticky) .taktak-public-nav-link, #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu > li > a, #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu.nav-light > li > a { color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; opacity: 1 !important; text-shadow: none !important; } #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu > li:hover > a, #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu > li.active > a, #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu.nav-light > li:hover > a, #topnav.taktak-navbar-dark:not(.nav-sticky) .navigation-menu.nav-light > li.active > a { color: #1E3A8A !important; -webkit-text-fill-color: #1E3A8A !important; } #topnav.taktak-navbar-dark.nav-sticky .taktak-public-nav-link, #topnav.taktak-navbar-dark.nav-sticky .navigation-menu > li > a, #topnav.taktak-navbar-dark.nav-sticky .navigation-menu.nav-light > li > a { color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; opacity: 1 !important; } #topnav.taktak-navbar-dark.nav-sticky .navigation-menu > li:hover > a, #topnav.taktak-navbar-dark.nav-sticky .navigation-menu > li.active > a, #topnav.taktak-navbar-dark.nav-sticky .navigation-menu.nav-light > li:hover > a, #topnav.taktak-navbar-dark.nav-sticky .navigation-menu.nav-light > li.active > a { color: #1E3A8A !important; -webkit-text-fill-color: #1E3A8A !important; } @media (max-width: 767px) { html { font-size: 14px; } body { overflow-x: hidden; } main { overflow-x: clip; } .container, .container-fluid { width: 100%; padding-left: 14px !important; padding-right: 14px !important; } img, video, canvas, svg { max-width: 100%; } #topnav .taktak-navbar-shell { gap: 8px !important; min-height: 70px; } #topnav .logo { flex: 0 1 auto !important; min-width: 0 !important; } #topnav .taktak-brand-logo--nav { max-width: 132px !important; height: 34px !important; } #topnav .menu-extras { margin-left: 0 !important; flex: 0 0 auto !important; } #topnav .menu-extras .menu-item { display: flex; align-items: center; justify-content: center; } #topnav .navbar-toggle { width: 40px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); } #topnav .navbar-toggle .lines { margin: 0 !important; width: 20px; height: 16px; display: flex; flex-direction: column; justify-content: space-between; } #topnav .navbar-toggle span { margin-bottom: 0; } .dark #topnav .navbar-toggle { background: rgba(15, 23, 42, 0.94); border-color: rgba(71, 85, 105, 0.8); box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28); } #topnav .taktak-navbar-center { flex: 0 1 auto; } #topnav #navigation { display: none !important; position: absolute; top: calc(100% + 8px); left: 14px; right: 14px; width: auto; padding: 12px; border-radius: 18px; border: 1px solid #e2e8f0; background: rgba(255, 255, 255, 0.98); box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 40; } #topnav #navigation.is-open { display: block !important; } .dark #topnav #navigation { background: rgba(15, 23, 42, 0.97); border-color: #334155; box-shadow: 0 24px 48px rgba(2, 6, 23, 0.45); } #topnav #navigation .taktak-navbar-menu { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 6px !important; width: 100%; } #topnav #navigation .taktak-navbar-menu > li { width: 100%; margin: 0 !important; } #topnav #navigation .taktak-navbar-menu > li > a { display: block !important; width: 100%; padding: 12px 14px !important; border-radius: 12px; background: #f8fafc; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; text-shadow: none !important; opacity: 1 !important; font-size: 0.95rem !important; line-height: 1.35 !important; white-space: normal !important; text-align: left; } .dark #topnav #navigation .taktak-navbar-menu > li > a { background: rgba(30, 41, 59, 0.88); color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; text-shadow: none !important; } #topnav #navigation .taktak-navbar-menu > li > a:hover, #topnav #navigation .taktak-navbar-menu > li.active > a { background: rgba(var(--taktak-primary-rgb), 0.08); color: var(--taktak-primary) !important; -webkit-text-fill-color: var(--taktak-primary) !important; } .dark #topnav #navigation .taktak-navbar-menu > li > a:hover, .dark #topnav #navigation .taktak-navbar-menu > li.active > a { background: rgba(var(--taktak-primary-rgb), 0.18); color: #bfdbfe !important; -webkit-text-fill-color: #bfdbfe !important; } #topnav .taktak-navbar-auth { margin-left: auto !important; display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: nowrap !important; min-width: 0 !important; } #topnav .buy-button > li { padding-left: 0 !important; flex: 0 0 auto !important; } #topnav .buy-button .taktak-nav-icon { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; } #topnav .buy-button .taktak-nav-cta { min-height: 36px !important; height: 36px !important; padding: 0 10px !important; font-size: 0.78rem !important; max-width: 104px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #topnav .buy-button .taktak-nav-logout { padding: 0 10px !important; max-width: 96px !important; } .taktak-logout-label-full { display: none !important; } .taktak-logout-label-mobile { display: inline !important; } .hero-search { padding: 1rem !important; border-radius: 1rem !important; } .hero-search .choices__inner { min-height: 44px !important; padding-top: 8px !important; padding-bottom: 8px !important; } .about-section, .section, .md\:py-24, .lg\:py-24, .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; } } /* ========================================= HERO SEARCH - Choices dark mode fix ========================================= */ .dark .hero-search .choices, .dark .hero-search .choices__inner, .dark .hero-search .choices__list--single, .dark .hero-search .choices__input, .dark .hero-search .choices__item { color: #e2e8f0 !important; } .dark .hero-search .choices__inner { background: #0f172a !important; border: 1px solid #334155 !important; border-radius: 14px !important; min-height: 48px !important; box-shadow: none !important; } .dark .hero-search .choices__list--single { padding: 0 !important; } .dark .hero-search .choices__placeholder { color: #94a3b8 !important; opacity: 1 !important; } .dark .hero-search .choices[data-type*="select-one"]::after { border-color: #94a3b8 transparent transparent transparent !important; } .dark .hero-search .choices.is-open[data-type*="select-one"]::after { border-color: transparent transparent #94a3b8 transparent !important; } .dark .hero-search .choices__list--dropdown, .dark .hero-search .choices__list[aria-expanded] { background: #0f172a !important; border: 1px solid #334155 !important; border-radius: 14px !important; box-shadow: 0 10px 30px rgba(2, 6, 23, 0.45) !important; overflow: hidden !important; margin-top: 8px !important; } .dark .hero-search .choices__list--dropdown .choices__item, .dark .hero-search .choices__list[aria-expanded] .choices__item { color: #e2e8f0 !important; background: transparent !important; } .dark .hero-search .choices__list--dropdown .choices__item--selectable, .dark .hero-search .choices__list[aria-expanded] .choices__item--selectable { padding: 12px 14px !important; } .dark .hero-search .choices__list--dropdown .choices__item--selectable.is-highlighted, .dark .hero-search .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background: #172033 !important; color: #ffffff !important; } .dark .hero-search .choices__list--dropdown .choices__item--disabled, .dark .hero-search .choices__list[aria-expanded] .choices__item--disabled { color: #64748b !important; opacity: 1 !important; } .dark .hero-search .choices__input { background: #0f172a !important; } .dark .hero-search .choices.is-focused .choices__inner, .dark .hero-search .choices.is-open .choices__inner { border-color: #1E3A8A !important; box-shadow: 0 0 0 3px rgba(0, 0, 128, 0.12) !important; } .dark .bg-white:has(.taktak-auth-logo) a[role="button"]:not([class*="bg-blue"]):not([class*="text-white"]) { background: transparent !important; border: 1px solid #475569 !important; color: #cbd5e1 !important; } .dark .bg-white:has(.taktak-auth-logo) button:not([type="submit"]):not([class*="bg-blue"]):not([class*="text-white"]):hover, .dark .bg-white:has(.taktak-auth-logo) a[role="button"]:not([class*="bg-blue"]):not([class*="text-white"]):hover { background: #172033 !important; border-color: #64748b !important; color: #ffffff !important; } .dark .bg-white:has(.taktak-auth-logo) a:not([class*="bg-blue"]):not(.btn), .dark .bg-white:has(.taktak-auth-logo) .text-blue-900, .dark .bg-white:has(.taktak-auth-logo) .text-blue-600 { color: #cbd5e1 !important; } .dark .bg-white:has(.taktak-auth-logo) a:not([class*="bg-blue"]):not(.btn):hover, .dark .bg-white:has(.taktak-auth-logo) .text-blue-900:hover, .dark .bg-white:has(.taktak-auth-logo) .text-blue-600:hover { color: #ffffff !important; } .dark .bg-white:has(.taktak-auth-logo) hr, .dark .bg-white:has(.taktak-auth-logo) .border-t, .dark .bg-white:has(.taktak-auth-logo) .border-b, .dark .bg-white:has(.taktak-auth-logo) .border-slate-200, .dark .bg-white:has(.taktak-auth-logo) .border-gray-200 { border-color: #334155 !important; } .dark .bg-white:has(.taktak-auth-logo) .bg-slate-50, .dark .bg-white:has(.taktak-auth-logo) .bg-gray-50, .dark .bg-white:has(.taktak-auth-logo) .bg-white { background: transparent !important; } .dark .bg-white:has(.taktak-auth-logo) .shadow, .dark .bg-white:has(.taktak-auth-logo) .shadow-md, .dark .bg-white:has(.taktak-auth-logo) .shadow-lg { box-shadow: none !important; } /* ========================================= AUTH PAGES - dark mode + autofill fix Scoped to auth cards containing TAKTAK auth logo ========================================= */ .dark .bg-white:has(.taktak-auth-logo), .dark .rounded-md:has(.taktak-auth-logo), .dark .rounded-lg:has(.taktak-auth-logo), .dark .rounded-xl:has(.taktak-auth-logo) { background: rgba(15, 23, 42, 0.96) !important; border: 1px solid #334155 !important; box-shadow: 0 14px 34px rgba(2, 6, 23, 0.42) !important; } .dark .bg-white:has(.taktak-auth-logo) h1, .dark .bg-white:has(.taktak-auth-logo) h2, .dark .bg-white:has(.taktak-auth-logo) h3, .dark .bg-white:has(.taktak-auth-logo) h4, .dark .bg-white:has(.taktak-auth-logo) h5, .dark .bg-white:has(.taktak-auth-logo) h6, .dark .bg-white:has(.taktak-auth-logo) label, .dark .bg-white:has(.taktak-auth-logo) .form-label, .dark .bg-white:has(.taktak-auth-logo) .text-slate-900, .dark .bg-white:has(.taktak-auth-logo) .text-slate-800, .dark .bg-white:has(.taktak-auth-logo) .text-slate-700 { color: #f8fafc !important; } .dark .bg-white:has(.taktak-auth-logo) .text-slate-600, .dark .bg-white:has(.taktak-auth-logo) .text-slate-500, .dark .bg-white:has(.taktak-auth-logo) .text-slate-400, .dark .bg-white:has(.taktak-auth-logo) p, .dark .bg-white:has(.taktak-auth-logo) small { color: #94a3b8 !important; } .dark .bg-white:has(.taktak-auth-logo) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .dark .bg-white:has(.taktak-auth-logo) select, .dark .bg-white:has(.taktak-auth-logo) textarea, .dark .bg-white:has(.taktak-auth-logo) .form-input, .dark .bg-white:has(.taktak-auth-logo) .form-select { background: #0b1224 !important; border: 1px solid #334155 !important; color: #e2e8f0 !important; box-shadow: none !important; -webkit-text-fill-color: #e2e8f0 !important; caret-color: #e2e8f0 !important; } .dark .bg-white:has(.taktak-auth-logo) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"])::placeholder, .dark .bg-white:has(.taktak-auth-logo) textarea::placeholder, .dark .bg-white:has(.taktak-auth-logo) .form-input::placeholder { color: #94a3b8 !important; opacity: 1 !important; } .dark .bg-white:has(.taktak-auth-logo) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus, .dark .bg-white:has(.taktak-auth-logo) select:focus, .dark .bg-white:has(.taktak-auth-logo) textarea:focus, .dark .bg-white:has(.taktak-auth-logo) .form-input:focus, .dark .bg-white:has(.taktak-auth-logo) .form-select:focus { border-color: #1E3A8A !important; box-shadow: 0 0 0 3px rgba(0, 0, 128, 0.12) !important; outline: none !important; } /* ✅ Chrome autofill fix (the real issue) */ .dark .bg-white:has(.taktak-auth-logo) input:-webkit-autofill, .dark .bg-white:has(.taktak-auth-logo) input:-webkit-autofill:hover, .dark .bg-white:has(.taktak-auth-logo) input:-webkit-autofill:focus, .dark .bg-white:has(.taktak-auth-logo) textarea:-webkit-autofill, .dark .bg-white:has(.taktak-auth-logo) select:-webkit-autofill { -webkit-text-fill-color: #e2e8f0 !important; caret-color: #e2e8f0 !important; -webkit-box-shadow: 0 0 0px 1000px #0b1224 inset !important; box-shadow: 0 0 0px 1000px #0b1224 inset !important; border: 1px solid #334155 !important; transition: background-color 9999s ease-in-out 0s !important; } /* ✅ Inputs with browser-generated background */ .dark .bg-white:has(.taktak-auth-logo) input[name="username"], .dark .bg-white:has(.taktak-auth-logo) input[name="email"], .dark .bg-white:has(.taktak-auth-logo) input[name="password"], .dark .bg-white:has(.taktak-auth-logo) input[name="password1"], .dark .bg-white:has(.taktak-auth-logo) input[name="password2"] { background: #0b1224 !important; color: #e2e8f0 !important; -webkit-text-fill-color: #e2e8f0 !important; } .dark .bg-white:has(.taktak-auth-logo) input[type="checkbox"], .dark .bg-white:has(.taktak-auth-logo) input[type="radio"] { accent-color: #1E3A8A !important; } .dark .bg-white:has(.taktak-auth-logo) button[type="submit"], .dark .bg-white:has(.taktak-auth-logo) input[type="submit"], .dark .bg-white:has(.taktak-auth-logo) .btn.bg-blue-900, .dark .bg-white:has(.taktak-auth-logo) .btn.bg-blue-600, .dark .bg-white:has(.taktak-auth-logo) .bg-blue-900, .dark .bg-white:has(.taktak-auth-logo) .bg-blue-600 { background: #1E3A8A !important; border-color: #1E3A8A !important; color: #ffffff !important; } .dark .bg-white:has(.taktak-auth-logo) button[type="submit"]:hover, .dark .bg-white:has(.taktak-auth-logo) input[type="submit"]:hover, .dark .bg-white:has(.taktak-auth-logo) .btn.bg-blue-900:hover, .dark .bg-white:has(.taktak-auth-logo) .btn.bg-blue-600:hover, .dark .bg-white:has(.taktak-auth-logo) .bg-blue-900:hover, .dark .bg-white:has(.taktak-auth-logo) .bg-blue-600:hover { background: #1E3A8A !important; border-color: #1E3A8A !important; color: #ffffff !important; } .dark .bg-white:has(.taktak-auth-logo) .shadow, .dark .bg-white:has(.taktak-auth-logo) .shadow-md, .dark .bg-white:has(.taktak-auth-logo) .shadow-lg { box-shadow: none !important; } .dark .bg-white:has(.taktak-auth-logo) button:not([type="submit"]):not([class*="bg-blue"]):not([class*="text-white"]), .dark .bg-white:has(.taktak-auth-logo) a[role="button"]:not([class*="bg-blue"]):not([class*="text-white"]) { background: transparent !important; border: 1px solid #475569 !important; color: #cbd5e1 !important; } .dark .bg-white:has(.taktak-auth-logo) button:not([type="submit"]):not([class*="bg-blue"]):not([class*="text-white"]):hover, .dark .bg-white:has(.taktak-auth-logo) a[role="button"]:not([class*="bg-blue"]):not([class*="text-white"]):hover { background: #172033 !important; border-color: #64748b !important; color: #ffffff !important; } .dark .bg-white:has(.taktak-auth-logo) a:not([class*="bg-blue"]):not(.btn), .dark .bg-white:has(.taktak-auth-logo) .text-blue-900, .dark .bg-white:has(.taktak-auth-logo) .text-blue-600 { color: #cbd5e1 !important; } .dark .bg-white:has(.taktak-auth-logo) a:not([class*="bg-blue"]):not(.btn):hover, .dark .bg-white:has(.taktak-auth-logo) .text-blue-900:hover, .dark .bg-white:has(.taktak-auth-logo) .text-blue-600:hover { color: #ffffff !important; } .dark .bg-white:has(.taktak-auth-logo) hr, .dark .bg-white:has(.taktak-auth-logo) .border-t, .dark .bg-white:has(.taktak-auth-logo) .border-b, .dark .bg-white:has(.taktak-auth-logo) .border-slate-200, .dark .bg-white:has(.taktak-auth-logo) .border-gray-200 { border-color: #334155 !important; } .dark .bg-white:has(.taktak-auth-logo) .bg-slate-50, .dark .bg-white:has(.taktak-auth-logo) .bg-gray-50, .dark .bg-white:has(.taktak-auth-logo) .bg-white { background: transparent !important; } .dark .bg-white:has(.taktak-auth-logo) .shadow, .dark .bg-white:has(.taktak-auth-logo) .shadow-md, .dark .bg-white:has(.taktak-auth-logo) .shadow-lg { box-shadow: none !important; } /* ========================================= AUTH ROLE BUTTONS - final fix Agence / Promoteur / Particulier ========================================= */ .dark .bg-white:has(.taktak-auth-logo) button:not([type="submit"]), .dark .bg-white:has(.taktak-auth-logo) a[role="button"], .dark .bg-white:has(.taktak-auth-logo) .role-switch button, .dark .bg-white:has(.taktak-auth-logo) .role-switch a, .dark .bg-white:has(.taktak-auth-logo) .register-role button, .dark .bg-white:has(.taktak-auth-logo) .register-role a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; padding: 0 14px !important; border-radius: 10px !important; border: 1px solid #334155 !important; background: #0b1224 !important; color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; box-shadow: none !important; text-decoration: none !important; transition: all 0.2s ease !important; } .dark .bg-white:has(.taktak-auth-logo) button:not([type="submit"]):hover, .dark .bg-white:has(.taktak-auth-logo) a[role="button"]:hover, .dark .bg-white:has(.taktak-auth-logo) .role-switch button:hover, .dark .bg-white:has(.taktak-auth-logo) .role-switch a:hover, .dark .bg-white:has(.taktak-auth-logo) .register-role button:hover, .dark .bg-white:has(.taktak-auth-logo) .register-role a:hover { background: #172033 !important; border-color: #475569 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* état actif */ .dark .bg-white:has(.taktak-auth-logo) button.active:not([type="submit"]), .dark .bg-white:has(.taktak-auth-logo) button.is-active:not([type="submit"]), .dark .bg-white:has(.taktak-auth-logo) button[aria-selected="true"]:not([type="submit"]), .dark .bg-white:has(.taktak-auth-logo) button[aria-pressed="true"]:not([type="submit"]), .dark .bg-white:has(.taktak-auth-logo) button[data-active="true"]:not([type="submit"]), .dark .bg-white:has(.taktak-auth-logo) a.active[role="button"], .dark .bg-white:has(.taktak-auth-logo) a.is-active[role="button"], .dark .bg-white:has(.taktak-auth-logo) a[aria-selected="true"][role="button"], .dark .bg-white:has(.taktak-auth-logo) a[aria-pressed="true"][role="button"], .dark .bg-white:has(.taktak-auth-logo) a[data-active="true"][role="button"], .dark .bg-white:has(.taktak-auth-logo) .text-blue-900:not([type="submit"]), .dark .bg-white:has(.taktak-auth-logo) .text-blue-600:not([type="submit"]), .dark .bg-white:has(.taktak-auth-logo) .border-blue-900:not([type="submit"]), .dark .bg-white:has(.taktak-auth-logo) .border-blue-600:not([type="submit"]), .dark .bg-white:has(.taktak-auth-logo) .bg-blue-900:not([type="submit"]), .dark .bg-white:has(.taktak-auth-logo) .bg-blue-600:not([type="submit"]) { background: #1E3A8A !important; border-color: #1E3A8A !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .dark .bg-white:has(.taktak-auth-logo) button.active:not([type="submit"]):hover, .dark .bg-white:has(.taktak-auth-logo) button.is-active:not([type="submit"]):hover, .dark .bg-white:has(.taktak-auth-logo) button[aria-selected="true"]:not([type="submit"]):hover, .dark .bg-white:has(.taktak-auth-logo) button[aria-pressed="true"]:not([type="submit"]):hover, .dark .bg-white:has(.taktak-auth-logo) button[data-active="true"]:not([type="submit"]):hover, .dark .bg-white:has(.taktak-auth-logo) a.active[role="button"]:hover, .dark .bg-white:has(.taktak-auth-logo) a.is-active[role="button"]:hover, .dark .bg-white:has(.taktak-auth-logo) a[aria-selected="true"][role="button"]:hover, .dark .bg-white:has(.taktak-auth-logo) a[aria-pressed="true"][role="button"]:hover, .dark .bg-white:has(.taktak-auth-logo) a[data-active="true"][role="button"]:hover, .dark .bg-white:has(.taktak-auth-logo) .bg-blue-900:not([type="submit"]):hover, .dark .bg-white:has(.taktak-auth-logo) .bg-blue-600:not([type="submit"]):hover { background: #1E3A8A !important; border-color: #1E3A8A !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* on reforce le bouton submit pour éviter tout conflit */ .dark .bg-white:has(.taktak-auth-logo) button[type="submit"], .dark .bg-white:has(.taktak-auth-logo) input[type="submit"] { background: #1E3A8A !important; border: 1px solid #1E3A8A !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .dark .bg-white:has(.taktak-auth-logo) button[type="submit"]:hover, .dark .bg-white:has(.taktak-auth-logo) input[type="submit"]:hover { background: #1E3A8A !important; border-color: #1E3A8A !important; color: #ffffff !important; } /* Footer social buttons – brand hover colour */ .footer-social-btn:hover { background-color: #1E3A8A !important; border-color: #1E3A8A !important; } /* ============================================================= MISSING TAILWIND UTILITIES bg-blue-*, border-blue-*, text-blue-*, hover variants These are not in the custom Tailwind builds; defined here so buttons, badges and decorative elements render correctly on every page (public + dashboard + backoffice). Colors match standard Tailwind v3 / Hously brand palette. ============================================================= */ /* background-color */ .bg-blue-600 { background-color: var(--taktak-primary) !important; } .bg-blue-700 { background-color: var(--taktak-primary) !important; } .bg-blue-800 { background-color: var(--taktak-primary) !important; } .bg-blue-900 { background-color: var(--taktak-primary) !important; } .bg-slate-600 { background-color: #475569 !important; } .bg-red-600 { background-color: #dc2626 !important; } /* hover background-color */ .hover\:bg-blue-600:hover { background-color: var(--taktak-primary) !important; } .hover\:bg-blue-700:hover { background-color: var(--taktak-primary) !important; } .hover\:bg-blue-800:hover { background-color: var(--taktak-primary) !important; } .hover\:bg-blue-900:hover { background-color: var(--taktak-primary) !important; } /* border-color */ .border-blue-600 { border-color: var(--taktak-primary) !important; } .border-blue-700 { border-color: var(--taktak-primary) !important; } .border-blue-800 { border-color: var(--taktak-primary) !important; } .border-blue-900 { border-color: var(--taktak-primary) !important; } /* hover border-color */ .hover\:border-blue-600:hover { border-color: var(--taktak-primary) !important; } .hover\:border-blue-700:hover { border-color: var(--taktak-primary) !important; } .hover\:border-blue-800:hover { border-color: var(--taktak-primary) !important; } .hover\:border-blue-900:hover { border-color: var(--taktak-primary) !important; } /* text-color */ .text-blue-600 { color: var(--taktak-primary) !important; } .text-blue-700 { color: var(--taktak-primary) !important; } .text-blue-800 { color: var(--taktak-primary) !important; } .text-blue-900 { color: var(--taktak-primary) !important; } .text-red-600 { color: #dc2626 !important; } /* hover text-color */ .hover\:text-blue-900:hover { color: var(--taktak-primary) !important; } .hover\:text-white:hover { color: #ffffff !important; } /* ============================================================= BACK-TO-TOP BUTTON — explicit visibility insurance The uses `bg-blue-900 text-white`. With the utilities above those classes now work, but the explicit rule below guarantees visibility even if the `flex` class toggled by JS doesn't apply in time. ============================================================= */ #back-to-top { background-color: #1E3A8A !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(0, 0, 128, 0.45) !important; } #back-to-top:hover { background-color: #1E3A8A !important; box-shadow: 0 6px 18px rgba(0, 0, 128, 0.5) !important; } /* Dark mode – lighter blue so it pops on dark backgrounds */ .dark #back-to-top { background-color: #1E3A8A !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(0, 0, 128, 0.4) !important; } .dark #back-to-top:hover { background-color: #1E3A8A !important; } /* ============================================================= NAVBAR — dark mode sticky readability fix The base app.css forces `color: #1e293b` (dark) on sticky links for all screens. In dark mode the sticky navbar has a dark background (rgb 15 23 42 / 0.8 from base tailwind), so dark text becomes invisible. The rules below restore light text for dark mode without touching light-mode logic. ============================================================= */ .dark #topnav.taktak-navbar-dark.nav-sticky .taktak-public-nav-link, .dark #topnav.taktak-navbar-dark.nav-sticky .navigation-menu > li > a, .dark #topnav.taktak-navbar-dark.nav-sticky .navigation-menu.nav-light > li > a { color: #e2e8f0 !important; -webkit-text-fill-color: #e2e8f0 !important; text-shadow: none !important; } .dark #topnav.taktak-navbar-dark.nav-sticky .navigation-menu > li:hover > a, .dark #topnav.taktak-navbar-dark.nav-sticky .navigation-menu > li.active > a, .dark #topnav.taktak-navbar-dark.nav-sticky .navigation-menu.nav-light > li:hover > a, .dark #topnav.taktak-navbar-dark.nav-sticky .navigation-menu.nav-light > li.active > a { color: #1E3A8A !important; -webkit-text-fill-color: #1E3A8A !important; } /* Auth icon / logout buttons in dark sticky */ .dark #topnav.taktak-navbar-dark.nav-sticky .taktak-nav-icon, .dark #topnav.taktak-navbar-dark.nav-sticky .taktak-nav-cta { background: #1E3A8A !important; border-color: #1E3A8A !important; color: #ffffff !important; } /* ============================================================= DASHBOARD & BACKOFFICE — primary action buttons btn.bg-blue-900 is the standard primary button pattern used in agent profile, account page, pack requests, etc. Force the full visual treatment here so it works even when the Tailwind builds don't include blue-* utilities. ============================================================= */ .btn.bg-blue-900, button.bg-blue-900:not(.deal-tab), input[type="submit"].bg-blue-900 { background-color: #1E3A8A !important; border-color: #1E3A8A !important; color: #ffffff !important; } .btn.bg-blue-900:hover, button.bg-blue-900:hover:not(.deal-tab), input[type="submit"].bg-blue-900:hover { background-color: #1E3A8A !important; border-color: #1E3A8A !important; color: #ffffff !important; } /* Danger buttons (red) */ .btn.bg-red-600, button.bg-red-600 { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; } .btn.bg-red-600:hover, button.bg-red-600:hover { background-color: #b91c1c !important; border-color: #b91c1c !important; color: #ffffff !important; } /* Slate/gray secondary buttons (e.g. Détail in pack_requests) */ .btn.bg-slate-600, button.bg-slate-600, a.bg-slate-600 { background-color: #475569 !important; border-color: #475569 !important; color: #ffffff !important; } .btn.bg-slate-600:hover, button.bg-slate-600:hover, a.bg-slate-600:hover { background-color: #334155 !important; border-color: #334155 !important; color: #ffffff !important; } /* Small utility buttons (px-3 py-1 without .btn class, used in table rows) */ a[class*="bg-slate-600"], a[class*="bg-blue-900"] { display: inline-block; } /* ============================================================= DARK MODE — GLOBAL HARMONISATION (Phase 2) Site-wide audit corrections. All rules use .dark prefix only. Palette: deep bg: #020617 (slate-950) base bg: #0f172a (slate-900) surface/card: #1e293b (slate-800) border: #334155 (slate-700) text primary: #f8fafc (slate-50) text secondary:#e2e8f0 (slate-200) text muted: #94a3b8 (slate-400) accent: #1E3A8A (blue-600) ============================================================= */ /* ── 1. REGISTER-CHOICE PAGE ─────────────────────────────── Classes used in auth/register-choice.html — no CSS was previously defined for these, causing invisible/unstyled elements in both light AND dark mode. ─────────────────────────────────────────────────────────── */ .register-choice-shell { background: rgba(255, 255, 255, 0.90); border: 1px solid #e2e8f0; box-shadow: 0 10px 32px rgba(15, 23, 42, 0.12); backdrop-filter: blur(8px); } .register-choice-card { display: flex; flex-direction: column; padding: 1.5rem; border-radius: 1rem; border: 1px solid #e2e8f0; background: #ffffff; text-decoration: none !important; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); color: inherit; } .register-choice-card:hover { border-color: #1E3A8A; box-shadow: 0 8px 24px rgba(0, 0, 128, 0.12); transform: translateY(-2px); color: inherit; } .register-choice-card-title { font-size: 1.125rem; font-weight: 700; color: #0f172a; margin: 0 0 0.45rem; } .register-choice-card-text { font-size: 0.875rem; color: #64748b; margin: 0; line-height: 1.5; } .register-choice-login-link { color: #1E3A8A; font-weight: 700; text-decoration: none !important; } .register-choice-login-link:hover { color: #1E3A8A; text-decoration: underline !important; } /* Dark overrides */ .dark .register-choice-shell { background: rgba(15, 23, 42, 0.92) !important; border-color: #334155 !important; box-shadow: 0 14px 34px rgba(2, 6, 23, 0.45) !important; } .dark .register-choice-card { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 2px 8px rgba(2, 6, 23, 0.3) !important; } .dark .register-choice-card:hover { border-color: #1E3A8A !important; box-shadow: 0 8px 24px rgba(0, 0, 128, 0.15) !important; } .dark .register-choice-card-title { color: #f8fafc !important; } .dark .register-choice-card-text { color: #94a3b8 !important; } .dark .register-choice-login-link { color: #1E3A8A !important; } .dark .register-choice-login-link:hover { color: #1E3A8A !important; } /* ── 2. GLOBAL FORM INPUTS (public pages) ─────────────────── The dashboard tailwind.css handles .form-input:is(.dark *) for dashboard pages. Public tailwind.css has no dark mode for forms, so we add it here for all public forms. ─────────────────────────────────────────────────────────── */ .dark .form-input, .dark textarea.form-input, .dark input.form-input { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; -webkit-text-fill-color: #e2e8f0 !important; caret-color: #e2e8f0 !important; } .dark .form-input::placeholder, .dark textarea.form-input::placeholder { color: #94a3b8 !important; opacity: 1 !important; } .dark .form-input:focus, .dark textarea.form-input:focus { border-color: #1E3A8A !important; box-shadow: 0 0 0 3px rgba(0, 0, 128, 0.12) !important; } .dark .form-select { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } .dark .form-select:focus { border-color: #1E3A8A !important; } /* Autofill fix for public forms */ .dark .form-input:-webkit-autofill, .dark .form-input:-webkit-autofill:hover, .dark .form-input:-webkit-autofill:focus { -webkit-text-fill-color: #e2e8f0 !important; caret-color: #e2e8f0 !important; -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important; box-shadow: 0 0 0 1000px #0f172a inset !important; border: 1px solid #334155 !important; transition: background-color 9999s ease-in-out 0s !important; } /* ── 3. BLOG CARDS AND SECTION CONTENT ───────────────────── Covers blog list cards (.blog-card-content) and blog detail contact/comment section. Applied via CSS so we don't have to touch every single template. ─────────────────────────────────────────────────────────── */ /* Blog list content area (the text box below the image) */ .dark .blog-card-content { background: #1e293b !important; border-color: #334155 !important; } /* Blog detail: contact form section card */ .dark .blog-detail-form-card { background: #1e293b !important; border-color: #334155 !important; } /* Blog detail sidebar */ .dark .blog-sidebar-sticky { background: transparent; } /* ── 4. PUBLIC GENERAL SECTION BACKGROUNDS ────────────────── Sections using raw bg-white / bg-gray-50 without dark: variants. Only apply to actual
or outer wrappers. ─────────────────────────────────────────────────────────── */ .dark section.bg-white { background-color: #0f172a !important; } .dark section.bg-gray-50 { background-color: rgba(15, 23, 42, 0.75) !important; } .dark section.bg-slate-50 { background-color: rgba(15, 23, 42, 0.55) !important; } /* "get-in-touch" section heading (no bg-white, just dark text heading) */ .dark .get-in-touch-heading { color: #f8fafc !important; } /* ── 4b. DASHBOARD DARK ALIGNMENT ──────────────────────────── Fixes dashboard pages that still render light surfaces/text when dark mode is active. Scoped to dashboard page-content to avoid impacting public pages. ─────────────────────────────────────────────────────────── */ .dark .page-content .bg-white, .dark .page-content .bg-gray-50, .dark .page-content .bg-slate-50 { background-color: #0f172a !important; border-color: #334155 !important; } .dark .page-content .border-slate-200, .dark .page-content .border-gray-100, .dark .page-content .border-gray-200, .dark .page-content .border-slate-100 { border-color: #334155 !important; } .dark .page-content .text-slate-900, .dark .page-content .text-slate-800, .dark .page-content .text-slate-700, .dark .page-content .text-gray-900, .dark .page-content .text-gray-800 { color: #f8fafc !important; } .dark .page-content .text-slate-600, .dark .page-content .text-slate-500, .dark .page-content .text-gray-700, .dark .page-content .text-gray-600 { color: #cbd5f5 !important; } .dark .page-content .text-slate-400, .dark .page-content .text-gray-500 { color: #94a3b8 !important; } .dark .page-content .shadow, .dark .page-content .shadow-sm, .dark .page-content .shadow-md, .dark .page-content .shadow-lg { box-shadow: 0 10px 30px rgba(2, 6, 23, 0.45) !important; } /* ── 5. FLATPICKR CALENDAR DARK MODE ─────────────────────── Used in vacation calendar, search datepickers, etc. ─────────────────────────────────────────────────────────── */ .dark .flatpickr-calendar { background: #0f172a !important; border: 1px solid #334155 !important; box-shadow: 0 8px 30px rgba(2, 6, 23, 0.5) !important; } .dark .flatpickr-calendar::before, .dark .flatpickr-calendar::after { border-bottom-color: #0f172a !important; border-top-color: #0f172a !important; } .dark .flatpickr-months, .dark .flatpickr-months .flatpickr-month { background: #0f172a !important; color: #e2e8f0 !important; fill: #e2e8f0 !important; } .dark .flatpickr-current-month, .dark .flatpickr-current-month .flatpickr-monthDropdown-months, .dark .flatpickr-current-month input.cur-year { color: #e2e8f0 !important; background: transparent !important; } .dark .flatpickr-weekdays, .dark span.flatpickr-weekday { background: #0f172a !important; color: #94a3b8 !important; } .dark .flatpickr-days { border-color: #334155 !important; } .dark .flatpickr-day { color: #e2e8f0 !important; border-color: transparent !important; } .dark .flatpickr-day:hover, .dark .flatpickr-day:focus { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; } .dark .flatpickr-day.selected, .dark .flatpickr-day.startRange, .dark .flatpickr-day.endRange, .dark .flatpickr-day.selected:hover, .dark .flatpickr-day.startRange:hover, .dark .flatpickr-day.endRange:hover { background: #1E3A8A !important; border-color: #1E3A8A !important; color: #ffffff !important; } .dark .flatpickr-day.inRange { background: rgba(0, 0, 128, 0.20) !important; border-color: rgba(0, 0, 128, 0.15) !important; box-shadow: -5px 0 0 rgba(0, 0, 128, 0.20), 5px 0 0 rgba(0, 0, 128, 0.20) !important; color: #1E3A8A !important; } .dark .flatpickr-day.today:not(.selected) { border-color: #1E3A8A !important; color: #1E3A8A !important; } .dark .flatpickr-day.today:not(.selected):hover { background: rgba(0, 0, 128, 0.12) !important; color: #1E3A8A !important; } .dark .flatpickr-day.flatpickr-disabled, .dark .flatpickr-day.prevMonthDay, .dark .flatpickr-day.nextMonthDay { color: #475569 !important; } .dark .flatpickr-day.flatpickr-disabled { background: rgba(71, 85, 105, 0.08) !important; } .dark .flatpickr-prev-month, .dark .flatpickr-next-month { color: #94a3b8 !important; fill: #94a3b8 !important; } .dark .flatpickr-prev-month:hover i, .dark .flatpickr-prev-month:hover svg, .dark .flatpickr-next-month:hover i, .dark .flatpickr-next-month:hover svg { fill: #e2e8f0 !important; } .dark .numInputWrapper span.arrowUp::after { border-bottom-color: #94a3b8 !important; } .dark .numInputWrapper span.arrowDown::after { border-top-color: #94a3b8 !important; } /* ── 6. CHOICES.JS — GENERAL CONTEXT (non-hero) ──────────── The hero-search choices are already handled. This covers Choices.js dropdowns used in dashboards/public forms. ─────────────────────────────────────────────────────────── */ .dark .choices__inner { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } .dark .choices__input { background: #0f172a !important; color: #e2e8f0 !important; } .dark .choices__list--dropdown, .dark .choices__list[aria-expanded] { background: #0f172a !important; border-color: #334155 !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(2, 6, 23, 0.5) !important; } .dark .choices__list--dropdown .choices__item, .dark .choices__list[aria-expanded] .choices__item { color: #e2e8f0 !important; background: transparent !important; } .dark .choices__list--dropdown .choices__item--selectable.is-highlighted, .dark .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background: #1e293b !important; color: #ffffff !important; } .dark .choices__list--dropdown .choices__item--disabled, .dark .choices__list[aria-expanded] .choices__item--disabled { color: #64748b !important; opacity: 1 !important; } .dark .choices[data-type*="select-one"] .choices__inner { background: #0f172a !important; } .dark .choices[data-type*="select-one"].is-open .choices__inner { border-color: #1E3A8A !important; } /* ── 7. HOME & PUBLIC PAGES — CARD / HEADING PATTERNS ────── Some home components use text classes without dark variants. Body is dark:text-white, so most inherit correctly. These rules cover edge cases. ─────────────────────────────────────────────────────────── */ /* Category cards (categories.html component) */ .dark .categorie-features, .dark .features-absolute { background: #1e293b !important; border-color: #334155 !important; } /* "get-in-touch" CTA heading inside light section */ .dark .get-in-touch h3 { color: #f8fafc !important; } /* Profile/agent cards (pages/agents.html, agent-profile.html) */ .dark .team-card, .dark .agent-card { background: #1e293b !important; border-color: #334155 !important; } /* About roles cards (aboutus.html) */ .dark .about-role-card { background: rgba(15, 23, 42, 0.85) !important; border-color: #334155 !important; } /* ── 8. AGENCIES / PROMOTERS LIST ────────────────────────── Cards in agencies_list.html and promoters_list.html ─────────────────────────────────────────────────────────── */ .dark .agency-card, .dark .promoter-card { background: #1e293b !important; border-color: #334155 !important; } /* ── 9. COMPLAINTS — DASHBOARD ───────────────────────────── Complaint threads, create form, listing views ─────────────────────────────────────────────────────────── */ .dark .complaint-card, .dark .thread-card { background: #1e293b !important; border-color: #334155 !important; } .dark .complaint-message-bubble { background: #0f172a !important; border-color: #334155 !important; } .dark .complaint-message-bubble.own { background: rgba(0, 0, 128, 0.15) !important; border-color: rgba(0, 0, 128, 0.25) !important; } /* ── 10. BACKOFFICE STUBS (empty page list pages) ─────────── Stub pages like backoffice/leads.html, listings.html inherit base_backoffice.html → already has dark:bg-slate-900 on body and dark:bg-slate-800 on main. No extra needs. ─────────────────────────────────────────────────────────── */ /* ── 11. GENERIC TABLE DARK HARMONISATION ────────────────── For tables that don't have explicit dark: Tailwind classes. Scoped to common container patterns to avoid collisions. ─────────────────────────────────────────────────────────── */ .dark .overflow-x-auto > table, .dark .table-responsive > table { color: #e2e8f0; } .dark .overflow-x-auto > table thead tr, .dark .table-responsive > table thead tr { background-color: rgba(30, 41, 59, 0.8); color: #94a3b8; } .dark .overflow-x-auto > table thead th, .dark .table-responsive > table thead th { color: #94a3b8; border-bottom-color: #334155; } .dark .overflow-x-auto > table tbody tr, .dark .table-responsive > table tbody tr { border-bottom-color: #1e293b; } .dark .overflow-x-auto > table tbody td, .dark .table-responsive > table tbody td { color: #e2e8f0; } .dark .overflow-x-auto > table tbody tr:hover, .dark .table-responsive > table tbody tr:hover { background-color: rgba(30, 41, 59, 0.5); } /* ── 12. SEARCH PAGE — FILTER SIDEBAR (desktop) ──────────── The search.css has some dark mode but the filter sidebar shown at desktop breakpoint may need extra coverage. ─────────────────────────────────────────────────────────── */ .dark .search-filter-sidebar, .dark .search-filter-panel { background: #0f172a !important; border-color: #334155 !important; } /* ── 13. PRICE RANGE / SLIDER INPUTS ─────────────────────── Range sliders and number inputs in filter forms ─────────────────────────────────────────────────────────── */ .dark input[type="range"] { accent-color: #1E3A8A; } /* ── 14. TOAST / ALERT MESSAGES ──────────────────────────── Django messages framework rendered in base templates ─────────────────────────────────────────────────────────── */ .dark .alert, .dark [role="alert"] { border-color: #334155; } /* ── 15. PAGINATION MISSING DARK STATES ──────────────────── Pagination already has some .dark rules in app.css. This fills in any gaps. ─────────────────────────────────────────────────────────── */ .dark .taktak-pagination li > a:not(.taktak-pagination-current):not(.taktak-pagination-link) { color: #94a3b8; } /* ── 16. MODAL OVERLAYS — PUBLIC ──────────────────────────── Modals opened from public pages (login prompt, contact, listing favorite action, etc.) ─────────────────────────────────────────────────────────── */ .dark .modal-backdrop, .dark [data-modal-backdrop] { background: rgba(2, 6, 23, 0.75) !important; } .dark .modal-content, .dark [data-modal-body], .dark .popup-body { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } .dark .modal-header, .dark [data-modal-header] { border-bottom-color: #334155 !important; background: #0f172a !important; } .dark .modal-footer, .dark [data-modal-footer] { border-top-color: #334155 !important; background: #0f172a !important; } /* ── 17. DROPDOWN MENUS (generic) ─────────────────────────── Generic dropdown menus not already covered ─────────────────────────────────────────────────────────── */ .dark .dropdown-menu:not([class*="dark:bg"]), .dark [data-dropdown-menu]:not([class*="dark:bg"]) { background: #0f172a !important; border: 1px solid #334155 !important; box-shadow: 0 10px 30px rgba(2, 6, 23, 0.45) !important; } .dark .dropdown-menu a:not([class*="dark:"]):hover, .dark [data-dropdown-menu] a:not([class*="dark:"]):hover { background: #1e293b !important; color: #f8fafc !important; } /* ── 18. LEAFLET MAP TILES — SEARCH MAP ───────────────────── The map tiles themselves stay the same but the UI controls benefit from dark mode. ─────────────────────────────────────────────────────────── */ .dark .leaflet-control-zoom a { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } .dark .leaflet-control-zoom a:hover { background: #334155 !important; color: #ffffff !important; } .dark .leaflet-popup-content-wrapper { background: #0f172a !important; border: 1px solid #334155 !important; color: #e2e8f0 !important; box-shadow: 0 10px 25px rgba(2, 6, 23, 0.4) !important; } .dark .leaflet-popup-tip { background: #0f172a !important; } .dark .leaflet-popup-close-button { color: #94a3b8 !important; } .dark .leaflet-popup-close-button:hover { color: #f8fafc !important; } /* ── 19. LEGAL PAGES (privacy.html, terms.html) ───────────── Legal page content areas ─────────────────────────────────────────────────────────── */ .dark .legal-page section, .dark .legal-page .prose { color: #cbd5e1; } .dark .legal-page h1, .dark .legal-page h2, .dark .legal-page h3, .dark .legal-page h4 { color: #f8fafc !important; } /* ── 20. DASHBOARD HOME — TASK STATUS BADGES ──────────────── Badges on KPI cards and status indicators ─────────────────────────────────────────────────────────── */ .dark .status-badge-pending { background: rgba(245, 158, 11, 0.15) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.25) !important; } .dark .status-badge-active { background: rgba(34, 197, 94, 0.12) !important; color: #86efac !important; border-color: rgba(34, 197, 94, 0.2) !important; } .dark .status-badge-inactive { background: rgba(100, 116, 139, 0.15) !important; color: #94a3b8 !important; border-color: rgba(100, 116, 139, 0.25) !important; } /* ── 21. LEAFLET MAP CONTAINER BORDERS (dashboard profile pages) ───────────── .taktak-map-container replaces inline border:1px solid #e2e8f0 ─────────────────────────────────────────────────────────────────────────── */ .taktak-map-container { border: 1px solid #e2e8f0; } .dark .taktak-map-container { border: 1px solid #334155 !important; } /* ── 22. INLINE CODE ELEMENTS (dashboard pages) ───────────────────────────── tags in import JSON, new_thread, etc. ─────────────────────────────────────────────────────────────────────────── */ code.taktak-code { display: inline; padding: 0.1em 0.35em; border-radius: 0.25rem; background: #f1f5f9; color: #334155; font-family: ui-monospace, monospace; font-size: 0.8em; } .dark code.taktak-code { background: #1e293b !important; color: #1E3A8A !important; border: 1px solid #334155 !important; } /* ── 23. DASHBOARD ERROR / WARNING BOXES ──────────────────────────────────── Error boxes inside dark:bg-slate-900 cards should look correct in dark mode ─────────────────────────────────────────────────────────────────────────── */ .dark .p-3.rounded.bg-red-50, .dark .p-3.rounded-xl.bg-red-50 { background: rgba(220, 38, 38, 0.1) !important; border: 1px solid rgba(220, 38, 38, 0.25) !important; color: #fca5a5 !important; } .dark .p-3.rounded.bg-red-50 p, .dark .p-3.rounded-xl.bg-red-50 p, .dark .p-3.rounded.bg-red-50 li, .dark .p-3.rounded-xl.bg-red-50 li { color: #fca5a5 !important; } /* ── 24. SECONDARY GRAY BUTTONS (dashboard pages) ─────────────────────────── btn bg-gray-100 pattern used in import/preview back buttons (also handled per-template but CSS fallback ensures coverage) ─────────────────────────────────────────────────────────────────────────── */ .dark .btn.bg-gray-100, .dark a.btn.bg-gray-100 { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } .dark .btn.bg-gray-100:hover, .dark a.btn.bg-gray-100:hover { background: #334155 !important; color: #f8fafc !important; } /* ── 25. GLOBAL PRIMARY BUTTON SYSTEM ────────────────────────────────────── Change the whole primary button color family from this single block. Keep danger/gray buttons outside of this selector group on purpose. ───────────────────────────────────────────────────────────────────────── */ :where( .btn.bg-blue-600, .btn.bg-blue-700, .btn.bg-blue-800, .btn.bg-blue-900, a.btn.bg-blue-600, a.btn.bg-blue-700, a.btn.bg-blue-800, a.btn.bg-blue-900, button.bg-blue-600, button.bg-blue-700, button.bg-blue-800, button.bg-blue-900, input[type="submit"].bg-blue-600, input[type="submit"].bg-blue-700, input[type="submit"].bg-blue-800, input[type="submit"].bg-blue-900, .searchbtn, .submit-btn, .home-search-submit, .contact-submit-btn, .notif-primary-btn, .lead-primary-btn, .lead-primary-btn-sm, .agent-primary-btn, .submit-primary-btn, .otp-auth-btn-primary, .otp-verify-btn-primary, .login-submit-btn ) { background: var(--taktak-primary) !important; border-color: var(--taktak-primary-border) !important; color: var(--taktak-primary-contrast) !important; } :where( .btn.bg-blue-600, .btn.bg-blue-700, .btn.bg-blue-800, .btn.bg-blue-900, a.btn.bg-blue-600, a.btn.bg-blue-700, a.btn.bg-blue-800, a.btn.bg-blue-900, button.bg-blue-600, button.bg-blue-700, button.bg-blue-800, button.bg-blue-900, input[type="submit"].bg-blue-600, input[type="submit"].bg-blue-700, input[type="submit"].bg-blue-800, input[type="submit"].bg-blue-900, .searchbtn, .submit-btn, .home-search-submit, .contact-submit-btn, .notif-primary-btn, .lead-primary-btn, .lead-primary-btn-sm, .agent-primary-btn, .submit-primary-btn, .otp-auth-btn-primary, .otp-verify-btn-primary, .login-submit-btn ):hover, :where( .btn.bg-blue-600, .btn.bg-blue-700, .btn.bg-blue-800, .btn.bg-blue-900, a.btn.bg-blue-600, a.btn.bg-blue-700, a.btn.bg-blue-800, a.btn.bg-blue-900, button.bg-blue-600, button.bg-blue-700, button.bg-blue-800, button.bg-blue-900, input[type="submit"].bg-blue-600, input[type="submit"].bg-blue-700, input[type="submit"].bg-blue-800, input[type="submit"].bg-blue-900, .searchbtn, .submit-btn, .home-search-submit, .contact-submit-btn, .notif-primary-btn, .lead-primary-btn, .lead-primary-btn-sm, .agent-primary-btn, .submit-primary-btn, .otp-auth-btn-primary, .otp-verify-btn-primary, .login-submit-btn ):focus-visible { background: var(--taktak-primary-hover) !important; border-color: var(--taktak-primary-hover) !important; color: var(--taktak-primary-contrast) !important; box-shadow: 0 0 0 3px var(--taktak-primary-ring) !important; } :where( .btn.text-blue-600, .btn.text-blue-700, .btn.text-blue-800, .btn.text-blue-900, a.btn.text-blue-600, a.btn.text-blue-700, a.btn.text-blue-800, a.btn.text-blue-900 ) { color: var(--taktak-primary) !important; border-color: var(--taktak-primary-border) !important; } /* ── 26. GLOBAL NAVBAR + DASHBOARD PRIMARY ACCENTS ───────────────────────── Extends the same central color system to navbars, dashboard links, badges, chips and common "blue" accents. ───────────────────────────────────────────────────────────────────────── */ /* ── Super Boost badge (utilisé sur toutes les cartes d'annonces/projets) ── */ .badge-super-boost { background-color: var(--super-boost-bg); color: var(--super-boost-text); border: 1px solid var(--taktak-purple-border); font-size: 12px; font-weight: 700; padding: 0.2rem 0.625rem; border-radius: 0.375rem; display: inline-block; transition: background-color 0.2s ease; } .badge-super-boost:hover { background-color: var(--super-boost-hover); } :where( .text-blue-600, .text-blue-500, .text-blue-700, .text-blue-800, .text-blue-900, .dark\:text-blue-300, .dark\:text-blue-400, .dark\:text-blue-500, .hover\:text-blue-600:hover, .hover\:text-blue-700:hover, .hover\:text-blue-900:hover, .hover\:text-blue-800:hover, .dark\:hover\:text-blue-300:hover, .dark\:hover\:text-blue-400:hover ) { color: var(--taktak-primary) !important; } :where( .bg-blue-50, .bg-blue-100, .bg-blue-500\/10, .bg-blue-500\/20, .bg-blue-900\/10, .bg-blue-900\/30 ) { background: var(--taktak-primary-soft) !important; } :where( .border-blue-100, .border-blue-200, .border-blue-300, .border-blue-400, .border-blue-500, .dark\:border-blue-800, .border-blue-800, .border-blue-900, .hover\:border-blue-500:hover, .hover\:border-blue-700:hover, .hover\:border-blue-900:hover, .dark\:hover\:border-blue-400:hover, .dark\:border-blue-500\/60, .border-blue-400\/70, .border-blue-900\/30 ) { border-color: var(--taktak-primary-border) !important; } :where( #topnav .navigation-menu > li:hover > a, #topnav .navigation-menu > li.active > a, .taktak-topbar-icon:hover, .taktak-dropdown-footer-btn:hover, .taktak-profile-link:hover ) { color: var(--taktak-primary) !important; } :where( .taktak-topbar-icon:hover, .taktak-dropdown-footer-btn:hover ) { background: var(--taktak-primary-soft) !important; border-color: var(--taktak-primary-border) !important; } :where( .taktak-notif-icon-box, .home-shortcut-card:hover .home-shortcut-icon, .dashboard-stat-icon, .status-badge-blue, .promo-chip-boost, .promo-chip-boost-active, .pager-btn-active ) { border-color: var(--taktak-primary-border) !important; } :where( .taktak-notif-icon-box, .dashboard-stat-icon, .status-badge-blue, .promo-chip-boost ) { background: var(--taktak-primary-soft) !important; color: var(--taktak-primary) !important; } :where( .promo-chip-boost-active, .pager-btn-active, .bg-blue-900, .bg-blue-600, .bg-blue-500, .dark .bg-blue-500\/20 ) { background: var(--taktak-primary) !important; color: var(--taktak-primary-contrast) !important; } :where( .bg-blue-100, .bg-blue-50, .hover\:bg-blue-50:hover, .hover\:bg-blue-100:hover, .dark\:hover\:bg-blue-900\/10:hover, .dark\:hover\:bg-blue-500\/10:hover, .dark\:bg-blue-900\/20, .dark\:bg-blue-900\/30 ) { background: var(--taktak-primary-soft) !important; } :where( input[type="checkbox"], input[type="radio"] ) { accent-color: var(--taktak-primary); } :where( .bg-blue-800, .hover\:bg-blue-700:hover, .hover\:bg-blue-800:hover, .hover\:bg-blue-900:hover, .dark\:hover\:bg-blue-800:hover, .dark\:hover\:bg-blue-900:hover ) { background: var(--taktak-primary-hover) !important; color: var(--taktak-primary-contrast) !important; } :where( .hover\:text-blue-500:hover, .hover\:text-blue-700:hover, .hover\:text-blue-800:hover, .hover\:text-blue-900:hover, .dark\:hover\:text-blue-300:hover, .dark\:hover\:text-blue-400:hover ) { color: var(--taktak-primary-hover) !important; } :where( .focus\:border-blue-700:focus, .focus\:border-blue-800:focus, .focus\:border-blue-900:focus, .dark\:focus\:border-blue-900:focus, .focus\:ring-blue-200:focus, .focus\:ring-blue-300:focus, .focus\:ring-blue-500:focus ) { border-color: var(--taktak-secondary) !important; box-shadow: 0 0 0 3px rgba(var(--taktak-secondary-rgb), 0.14) !important; } :where( .newsletter-form button, .subscribe-form button, footer .btn.bg-blue-900, footer .btn.hover\:bg-blue-800 ) { background: var(--taktak-primary) !important; border-color: var(--taktak-primary-border) !important; color: var(--taktak-primary-contrast) !important; } :where( .newsletter-form button:hover, .subscribe-form button:hover, footer .btn.bg-blue-900:hover, footer .btn.hover\:bg-blue-800:hover ) { background: var(--taktak-primary-hover) !important; border-color: var(--taktak-primary-hover) !important; } .search-view-toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem; border-radius: 1rem; background: #f8fafc; border: 1px solid #e2e8f0; } .dark .search-view-toggle { background: rgba(15, 23, 42, 0.92); border-color: rgba(51, 65, 85, 0.8); } .search-view-button--active { background: var(--taktak-primary) !important; border-color: var(--taktak-primary) !important; color: var(--taktak-primary-contrast) !important; box-shadow: 0 10px 24px rgba(var(--taktak-primary-rgb), 0.18); } .search-view-button--inactive { background: #ffffff !important; border-color: rgba(var(--taktak-secondary-rgb), 0.34) !important; color: var(--taktak-primary) !important; } .search-view-button--inactive:hover { background: rgba(var(--taktak-secondary-rgb), 0.12) !important; border-color: var(--taktak-secondary) !important; color: var(--taktak-primary-hover) !important; } .dark .search-view-button--inactive { background: rgba(15, 23, 42, 0.96) !important; border-color: rgba(var(--taktak-secondary-rgb), 0.28) !important; color: #dbeafe !important; } .dark .search-view-button--inactive:hover { background: rgba(var(--taktak-secondary-rgb), 0.18) !important; border-color: var(--taktak-secondary) !important; color: #ffffff !important; } /* ───────────────────────────────────────────────────────────────── DARK MODE — SEARCH CTA BUTTON (perle froide premium) Override ciblé du bouton "Rechercher" en dark mode uniquement. Contraste fort avec le panneau bleu nuit, rendu haut de gamme. ───────────────────────────────────────────────────────────────── */ .dark .searchbtn, .dark input[type="submit"].searchbtn, .dark .home-search-submit, .dark input[type="submit"].home-search-submit, .dark .action-search { background: var(--dark-search-cta-bg) !important; border-color: var(--dark-search-cta-border) !important; color: var(--dark-search-cta-text) !important; box-shadow: var(--dark-search-cta-shadow), var(--dark-search-cta-highlight) !important; font-weight: 700; transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; } .dark .searchbtn:hover, .dark input[type="submit"].searchbtn:hover, .dark .home-search-submit:hover, .dark input[type="submit"].home-search-submit:hover, .dark .action-search:hover { background: var(--dark-search-cta-bg-hover) !important; border-color: var(--dark-search-cta-border) !important; color: var(--dark-search-cta-text) !important; box-shadow: 0 14px 30px rgba(8, 18, 37, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important; transform: translateY(-1px); } .dark .searchbtn:active, .dark .home-search-submit:active, .dark .action-search:active { background: var(--dark-search-cta-bg-active) !important; border-color: var(--dark-search-cta-border) !important; color: var(--dark-search-cta-text) !important; box-shadow: 0 4px 10px rgba(8, 18, 37, 0.18) !important; transform: translateY(0); } .dark .searchbtn:focus-visible, .dark .home-search-submit:focus-visible, .dark .action-search:focus-visible { outline: 2px solid var(--dark-search-cta-ring) !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px var(--dark-search-cta-ring), var(--dark-search-cta-shadow) !important; } .dark .searchbtn:disabled, .dark .home-search-submit:disabled, .dark .action-search:disabled { background: rgba(243, 246, 252, 0.35) !important; color: rgba(46, 70, 117, 0.45) !important; border-color: rgba(199, 210, 227, 0.30) !important; box-shadow: none !important; cursor: not-allowed !important; } /* Public agencies page: registration CTA and stable agency logo sizing. */ .taktak-agencies-registration-cta { display: inline-flex !important; align-items: center; justify-content: center; gap: 0.5rem; min-width: 14.375rem; min-height: 3rem; padding: 0.75rem 1.75rem; line-height: 1.25; } @media (max-width: 639px) { .taktak-agencies-registration-cta { width: 100%; min-width: 0; } } .taktak-agency-card__logo-frame { aspect-ratio: 1 / 1; } .taktak-agency-card__logo { width: 72%; height: 72%; object-fit: contain; } /* Public blog cards: enforce a stable landscape cover regardless of source ratio. */ .taktak-blog-card__cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* ═══════════════════════════════════════════════════════════════════ MODERN SCROLLBAR — Global Custom Style ═══════════════════════════════════════════════════════════════════ */ /* Chrome, Edge, Safari */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--tk-brand) 0%, var(--tk-blue) 100%); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; transition: all 0.3s ease; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--tk-brand-hover) 0%, var(--tk-blue-hover) 100%); box-shadow: 0 0 10px rgba(30, 58, 138, 0.3); background-clip: padding-box; } ::-webkit-scrollbar-thumb:active { background: var(--tk-brand-active); background-clip: padding-box; } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--tk-brand) transparent; } *:hover { scrollbar-color: var(--tk-brand-hover) transparent; } /* ═══════════════════════════════════════════════════════════════════ DOUBLE SCROLL FIX — Dashboard Layout ONLY ═══════════════════════════════════════════════════════════════════ Problem: .page-wrapper has height: 100vh, and .layout-specing has min-height: calc(100vh - 71px), causing double scrollbar Solution: Only scroll within .page-content in dashboard, not body. ⚠️ IMPORTANT: Only apply to pages with .page-wrapper! ═══════════════════════════════════════════════════════════════════ */ /* Dashboard layout: page-wrapper takes full viewport */ .page-wrapper { height: 100vh; overflow: hidden !important; display: flex; flex-direction: row; } /* Only page-content scrolls, not the body */ .page-wrapper .page-content { flex: 1; width: 100%; height: 100vh; overflow-y: auto; overflow-x: hidden; padding-inline-start: 0; transition-duration: 500ms; } /* Sidebar scrolls independently */ .page-wrapper .sidebar-wrapper .sidebar-content { position: relative; height: 100%; max-height: 100%; overflow-y: auto; } /* Remove min-height that was forcing extra scroll space */ .page-wrapper .page-content .layout-specing { min-height: unset !important; position: relative !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; padding-top: 94px !important; padding-bottom: 1.5rem !important; } /* Responsive adjustments */ @media (max-width: 425px) { .page-wrapper .page-content .layout-specing { padding-left: 0 !important; padding-right: 0 !important; } }