/* Custom styles for ThailandTrips - Kitar Pa Tour site */ :root{ /* Light theme */ --bg: #ffffff; --surface: #ffffff; --text: #0b1220; /* stronger, darker text for readability */ --muted: #475569; /* slightly darker muted color */ --brand: #0d6efd; --accent: #0ea5bf; --nav-bg: #f8fafc; --footer-bg: #f1f5f9; /* light footer in light mode */ --card-shadow: 0 6px 18px rgba(15,23,36,0.06); } /* Dark theme (applied when [data-theme="dark"] on ) */ :root[data-theme="dark"]{ --bg: #0b1220; --surface: #071021; --text: #e6eef8; --muted: #9aa7b6; --brand: #3b82f6; --accent: #06b6d4; --nav-bg: #071126; --footer-bg: #020617; --card-shadow: 0 6px 18px rgba(2,6,23,0.6); } body{font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:var(--text);} .navbar, .bg-light{background:var(--nav-bg) !important} /* Ensure nav text/links follow theme colors and remain readable in dark mode */ .navbar, .navbar .nav-link, .navbar .navbar-brand { color: var(--text) !important; } .navbar .nav-link { color: var(--text) !important; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--brand) !important; } .navbar .navbar-brand { font-weight:600 } /* Improve contrast for elements that Bootstrap keeps dark by default */ .bg-light { color: var(--text) !important; } .footer, footer { background: var(--footer-bg) !important; color: var(--muted) !important; } /* Buttons: ensure outline buttons are visible in both themes */ .btn-outline-secondary, .btn-outline-primary { color: var(--text) !important; } .btn-outline-secondary { border-color: rgba(15,23,36,0.08); } .btn-outline-primary { border-color: rgba(13,110,253,0.14); } .btn-primary { color: #fff; } .hero{background: linear-gradient(180deg, rgba(13,110,253,0.06), rgba(13,110,253,0.01)); padding: 3rem 0} .hero .hero-overlay{padding: 3rem 0} .hero img{max-height:320px; object-fit:cover} .card{background:var(--surface); box-shadow:var(--card-shadow)} .card-body, .p-4{color:var(--text)} .card-img-top{height:200px; object-fit:cover} .btn-primary{background:var(--brand); border-color:var(--brand)} .theme-toggle{border:0; background:transparent; font-size:1.05rem} @media (max-width: 575px){ .card-img-top{height:160px} } /* Simple accessible focus style */ a:focus{outline:3px solid rgba(59,130,246,0.18); outline-offset:3px} /* Typography improvements for light mode (headings, muted text, leads) */ h1,h2,h3,h4,h5,h6{color:var(--text)} .lead{color:var(--muted)} .text-muted{color:var(--muted) !important} .small{color:var(--muted)} /* Make sure cards and card body inherit readable text */ .card, .card-body { color: var(--text); } /* Dark-mode specific helpers in case some elements still inherit Bootstrap defaults */ :root[data-theme="dark"] { /* ensure default link color is visible */ --link-color: var(--brand); } :root[data-theme="dark"] a, :root[data-theme="dark"] .nav-link, :root[data-theme="dark"] .card, :root[data-theme="dark"] .card-body { color: var(--text) !important; } :root[data-theme="dark"] .btn-outline-primary, :root[data-theme="dark"] .btn-outline-secondary { color: var(--text) !important; border-color: rgba(255,255,255,0.10) !important; } :root[data-theme="dark"] .navbar, :root[data-theme="dark"] .bg-light { background: var(--nav-bg) !important; color: var(--text) !important; } /* Utility for a visible dark-mode indicator */ .theme-indicator{display:inline-flex; align-items:center; gap:0.5rem}