/* ============================================================ theme-dark.css — Dark overrides for the Park Management System. Activated when is set (theme-toggle.js / inline no-flash head script). Keeps canopy green / sunset orange accents; swaps surfaces + text to a deep-forest dark palette. Loaded after site.css. ============================================================ */ html[data-theme="dark"] { --bg: #0C1B16; /* deep forest page */ --surface: #122B23; /* cards / panels */ --ink: #E9EFE9; /* primary text — soft off-white */ --muted: #9DB0A6; /* secondary text — muted sage */ --hairline: #234034; /* hairline rules */ --rule: #234034; /* accents stay bright for contrast on dark */ --primary: #34B574; --primary-dark: #1E8E5A; --accent: #FF9A56; --accent-dark: #FF8A3D; } html[data-theme="dark"] body { color: var(--ink); background: var(--bg); } html[data-theme="dark"] a { color: var(--ink); } html[data-theme="dark"] a:hover { color: var(--primary); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] .display-head { color: var(--ink); } html[data-theme="dark"] .lead-text { color: var(--ink); } html[data-theme="dark"] .body-text { color: var(--muted); } /* Surfaces */ html[data-theme="dark"] .card, html[data-theme="dark"] .attr-card, html[data-theme="dark"] .zone-card, html[data-theme="dark"] .pkg-card, html[data-theme="dark"] .event-card, html[data-theme="dark"] .facility-tile, html[data-theme="dark"] .testi-card, html[data-theme="dark"] .blog-card, html[data-theme="dark"] .faq-item, html[data-theme="dark"] .bg-white, html[data-theme="dark"] .surface, html[data-theme="dark"] .panel { background-color: var(--surface); color: var(--ink); border-color: var(--hairline); } html[data-theme="dark"] .section-tint { background: #102420; } /* Ticket-stub notches read against the dark page bg */ html[data-theme="dark"] .pkg-card::before, html[data-theme="dark"] .pkg-card::after { background: var(--bg); border-color: var(--hairline); } /* Header + footer */ html[data-theme="dark"] .site-header, html[data-theme="dark"] .site-header.scrolled { background: rgba(12, 27, 22, .92); border-bottom-color: var(--hairline); } html[data-theme="dark"] .navbar .nav-link { color: var(--ink); } html[data-theme="dark"] .navbar .nav-link:hover, html[data-theme="dark"] .navbar .nav-link.active { color: var(--primary); background: rgba(52,181,116,.12); } html[data-theme="dark"] .navbar-toggler { filter: invert(1) grayscale(1) brightness(1.6); } html[data-theme="dark"] .site-footer { background: #081410; color: var(--muted); } html[data-theme="dark"] .site-footer h5, html[data-theme="dark"] .site-footer a { color: var(--ink); } html[data-theme="dark"] .site-footer a:hover { color: var(--accent); } html[data-theme="dark"] .breadcrumbs { background: var(--surface); border-bottom-color: var(--hairline); } /* Form controls */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: #16332A; color: var(--ink); border-color: var(--hairline); } html[data-theme="dark"] .form-control::placeholder { color: var(--muted); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: #16332A; color: var(--ink); border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(52, 181, 116, .25); } /* Rules / muted surfaces */ html[data-theme="dark"] hr { border-color: var(--hairline); } html[data-theme="dark"] .bg-light { background-color: #102420 !important; color: var(--ink); } html[data-theme="dark"] .text-muted { color: var(--muted) !important; } html[data-theme="dark"] .border { border-color: var(--hairline) !important; } /* Header dark-mode toggle + icon links */ html[data-theme="dark"] .theme-toggle, html[data-theme="dark"] .header-icon-link { color: var(--ink); border-color: var(--hairline); } /* Search suggestions dropdown */ html[data-theme="dark"] .search-suggest__menu { background: var(--surface); border-color: var(--hairline); color: var(--ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); } html[data-theme="dark"] .search-suggest__item { border-bottom-color: var(--hairline); color: var(--ink); } html[data-theme="dark"] .search-suggest__item:hover, html[data-theme="dark"] .search-suggest__item.is-active { background: #1A382E; } html[data-theme="dark"] .search-suggest__type { color: var(--primary); } /* ===== Header dark-mode toggle button + search field (shared base) ===== */ .header-search { position: relative; display: flex; align-items: center; } .header-search .form-control { min-width: 160px; height: 40px; } .theme-toggle { background: transparent; border: 1px solid var(--hairline); color: var(--ink); width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .2s ease, border-color .2s ease; } .theme-toggle:hover { color: var(--primary); border-color: var(--primary); } /* Search-suggest dropdown (base / light) */ .search-suggest__menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1080; background: var(--surface, #fff); border: 1px solid var(--hairline, #E7EDE6); border-radius: 12px; box-shadow: 0 18px 40px rgba(14, 42, 34, .14); overflow: hidden; max-height: 70vh; overflow-y: auto; } .search-suggest__item { display: block; padding: .55rem .85rem; color: var(--ink, #15211C); border-bottom: 1px solid var(--hairline, #E7EDE6); cursor: pointer; } .search-suggest__item:last-child { border-bottom: 0; } .search-suggest__item:hover, .search-suggest__item.is-active { background: #F1F6EF; } .search-suggest__type { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--primary, #1E8E5A); margin-right: .5rem; } .search-suggest__label { color: inherit; } .search-suggest__empty { padding: .7rem .85rem; color: var(--muted, #6E7B73); font-size: .9rem; }