/* ========================================================================== Dark theme. All rules are scoped to html[data-theme="dark"], so this file is inert in light mode. The theme is chosen before paint by an inline script in (saved choice, else the visitor's system preference) and toggled from the footer (theme-toggle.js). The brand red (#891A1C) and dark red (#410708) are used as TEXT all over the light theme; on a dark background those are unreadable, so here they are remapped to lightened, accessible variants. Red BACKGROUNDS (header, footer, buttons) are left untouched — they work on any background. ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; --dk-bg: #16181d; /* page background */ --dk-surface: #1e2128; /* cards / raised surfaces */ --dk-text: #e8e8e8; /* default body text */ --dk-muted: #b6b6b6; /* secondary / muted text */ --dk-accent: #ef7d80; /* lightened brand red */ --dk-accent-2: #e0a9aa; /* lightened secondary red */ --dk-border: rgba(239, 125, 128, 0.35); background-color: var(--dk-bg); } html[data-theme="dark"] body { background-color: var(--dk-bg); color: var(--dk-text); } /* ---- Light surfaces -> dark ------------------------------------------------ */ html[data-theme="dark"] .program-area { background-color: var(--dk-bg); } html[data-theme="dark"] .spectacle-team .container { background-color: var(--dk-surface); } /* ---- Section titles -------------------------------------------------------- */ html[data-theme="dark"] .section-title h1, html[data-theme="dark"] .section-title h2 { color: var(--dk-accent); } html[data-theme="dark"] .section-title h2 span { color: var(--dk-muted); } /* ---- Elements whose text was the brand red -> accent ----------------------- */ html[data-theme="dark"] .news-item a, html[data-theme="dark"] .news-item .title, html[data-theme="dark"] .events-area .event .title, html[data-theme="dark"] .events-area .events-date, html[data-theme="dark"] .spectacles-area .spectacle-info .from, html[data-theme="dark"] .program-area .nav-tabs .nav-link, html[data-theme="dark"] .spectacles-area .nav-tabs .nav-link, html[data-theme="dark"] .theatre-page-nav .nav-tabs .nav-link, html[data-theme="dark"] .program-area .nav-tabs .nav-link.active, html[data-theme="dark"] .spectacles-area .nav-tabs .nav-link.active, html[data-theme="dark"] .theatre-page-nav .nav-tabs .nav-link.active { color: var(--dk-accent); } html[data-theme="dark"] .spectacles-area .nav-tabs .nav-link.active, html[data-theme="dark"] .program-area .nav-tabs .nav-link.active { border-bottom-color: var(--dk-accent); } /* ---- Elements whose text was the dark secondary red -> lightened ----------- */ html[data-theme="dark"] .news-item .date, html[data-theme="dark"] .news-item .text, html[data-theme="dark"] .events-area .event .scene, html[data-theme="dark"] .events-area .event .date, html[data-theme="dark"] .spectacles-area .spectacle-info .name, html[data-theme="dark"] .contacts p { color: var(--dk-accent-2); } /* The .color-primary / .color-secondary utility classes set their colour with !important in main.css, so the dark remap must use !important too or it loses. Used site-wide (contacts headings, etc.), so this covers all of them. */ html[data-theme="dark"] .color-secondary { color: var(--dk-accent-2) !important; } html[data-theme="dark"] .color-primary { color: var(--dk-accent) !important; } /* Contacts page: base text -> readable light, the big Font Awesome icons (house / phone / envelope) were the brand red -> lighten to the accent. */ html[data-theme="dark"] .contacts { color: var(--dk-text); } html[data-theme="dark"] .contacts i { color: var(--dk-accent); } /* ---- Borders that used the dark red --------------------------------------- */ html[data-theme="dark"] .events-area .events-date, html[data-theme="dark"] .events-area .events-day-row, html[data-theme="dark"] .events-area .event:not(:last-child), html[data-theme="dark"] .events-area .events-month { border-color: var(--dk-border) !important; } /* ---- Editable page content (history, scenes, concourse, footer pages…) ----- */ html[data-theme="dark"] .area, html[data-theme="dark"] .about-us-area, html[data-theme="dark"] .single-text, html[data-theme="dark"] .pages-area { color: var(--dk-text); } html[data-theme="dark"] .about-us-area a, html[data-theme="dark"] .single-text a, html[data-theme="dark"] .pages-area a { color: var(--dk-accent); } /* Pages sidebar links. The active/hover state used the dark secondary red (.pages-links li a.active), which out-specifies the rule above and went invisible on dark. Lighten the normal links and mark the current page gold (same "you are here" cue as the top nav). */ html[data-theme="dark"] .pages-area .pages-links li a { color: var(--dk-accent); } html[data-theme="dark"] .pages-area .pages-links li a:hover, html[data-theme="dark"] .pages-area .pages-links li a.active { color: var(--theatre-color-gold); } /* ---- Generic form controls ------------------------------------------------- */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-border); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--dk-muted); } /* ---- Tables in editable content ------------------------------------------- */ html[data-theme="dark"] table { color: var(--dk-text); } html[data-theme="dark"] table, html[data-theme="dark"] th, html[data-theme="dark"] td { border-color: var(--dk-border); } /* ---- Pagination (kept for any non-converted lists) ------------------------- */ html[data-theme="dark"] .pagination .page-link { background-color: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-accent); } html[data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--dk-accent); border-color: var(--dk-accent); color: #16181d; } /* ---- Gold call-to-action buttons (e.g. "See more") ------------------------- The gold background works on any theme, but the generic link rules above (.news-item a, .pages-area a, …) were repainting the button TEXT with the pink accent, which has poor contrast on gold. Keep the original dark-red text on the gold button, white on hover — same as the light theme. */ html[data-theme="dark"] .theatre-button, html[data-theme="dark"] .news-item a.theatre-button, html[data-theme="dark"] .about-us-area a.theatre-button, html[data-theme="dark"] .single-text a.theatre-button, html[data-theme="dark"] .pages-area a.theatre-button { color: var(--theatre-color-secondary); } /* The hover selectors must list the SAME containers as the rule above, each with :hover — otherwise a container rule like ".about-us-area a.theatre-button" (0,3,2) outranks a bare ".theatre-button:hover" (0,3,1) and the text stays dark red while the background flips to dark red → invisible label on hover. */ html[data-theme="dark"] .theatre-button:hover, html[data-theme="dark"] .news-item a.theatre-button:hover, html[data-theme="dark"] .about-us-area a.theatre-button:hover, html[data-theme="dark"] .single-text a.theatre-button:hover, html[data-theme="dark"] .pages-area a.theatre-button:hover { color: #fff; background: var(--theatre-color-secondary); } /* ---- Events list hover ---------------------------------------------------- Hovering a row (or the day box) turns its background gold. In dark mode the text is the light pink accents, which wash out on gold. Switch it back to the dark brand reds on hover — exactly how it reads in light mode. */ html[data-theme="dark"] .events-area .event-list-item:hover .title { color: var(--theatre-color-primary); } html[data-theme="dark"] .events-area .event-list-item:hover .scene, html[data-theme="dark"] .events-area .event-list-item:hover .date, html[data-theme="dark"] .events-area .events-day-row:hover .events-date { color: var(--theatre-color-secondary); } /* ---- Add-to-calendar dropdown -------------------------------------------- */ html[data-theme="dark"] .add-to-calendar .calendar-menu { background: var(--dk-surface); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55); } html[data-theme="dark"] .add-to-calendar .calendar-menu .dropdown-item { color: var(--dk-text); } html[data-theme="dark"] .add-to-calendar .calendar-menu .dropdown-item:hover { background: var(--theatre-color-gold); color: var(--theatre-color-secondary); } /* ---- Spectacle "team" block (translator / set designer / composer …) ------ On a play's details page the role labels (.group-name) were the dark secondary red and the people's names (.team) the brand red — both unreadable on the dark surface. Remap to the same lightened pair used elsewhere: muted labels, brighter names. This block repeats on every spectacle page. */ html[data-theme="dark"] .spectacle-team .group-name { color: var(--dk-accent-2); } html[data-theme="dark"] .spectacle-team .team { color: var(--dk-accent); } /* ---- Home upcoming-event cards -------------------------------------------- */ html[data-theme="dark"] .home-event-card { background: var(--dk-surface); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55); } html[data-theme="dark"] .home-event-title { color: var(--dk-accent); } html[data-theme="dark"] .home-event-when, html[data-theme="dark"] .home-event-scene { color: var(--dk-accent-2); }