/* * Colour scheme tokens. The media query provides a no-JavaScript fallback; * data-theme is set in before first paint when JavaScript is available. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --tpg-color-page-canvas: #12161d; --tpg-color-background: #12161d; --tpg-color-primary-soft: #17243a; --tpg-color-surface: #1a202b; --tpg-color-surface-raised: #111827; --tpg-color-text: #f5f7fb; --tpg-color-text-muted: #b7c3d8; --tpg-color-border: #344158; --tpg-color-link: #9dbdff; --tpg-color-link-hover: #c6d9ff; --tpg-color-accent: #335da8; --tpg-color-on-accent: #ffffff; --tpg-color-focus: #94b8ff; --tpg-shadow-raised: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.4); --tpg-shadow-sm: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3); } } :root[data-theme="dark"] { color-scheme: dark; --tpg-color-page-canvas: #12161d; --tpg-color-background: #12161d; --tpg-color-primary-soft: #17243a; --tpg-color-surface: #1a202b; --tpg-color-surface-raised: #111827; --tpg-color-text: #f5f7fb; --tpg-color-text-muted: #b7c3d8; --tpg-color-border: #344158; --tpg-color-link: #9dbdff; --tpg-color-link-hover: #c6d9ff; --tpg-color-accent: #335da8; --tpg-color-on-accent: #ffffff; --tpg-color-focus: #94b8ff; --tpg-shadow-raised: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.4); --tpg-shadow-sm: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3); } /* The live dark theme uses one continuous page canvas around the boxed site. */ :root[data-theme="dark"] body.boxed { background: var(--tpg-color-page-canvas); } :root[data-theme="dark"] .site { -webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.45); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.45); } :root[data-theme="dark"] .block, :root[data-theme="dark"] .sidebar, :root[data-theme="dark"] .views-row, :root[data-theme="dark"] .widget, :root[data-theme="dark"] .post-block { border-color: var(--tpg-color-border); color: var(--tpg-color-text); } :root[data-theme="dark"] .snip1518, :root[data-theme="dark"] .staff-card, :root[data-theme="dark"] .queue-card, :root[data-theme="dark"] .tech-container, :root[data-theme="dark"] .tech-data, :root[data-theme="dark"] .tech-row-full { background-color: var(--tpg-color-surface-raised); border-color: var(--tpg-color-border); color: var(--tpg-color-text); } :root[data-theme="dark"] .adsense, :root[data-theme="dark"] ins.adsbygoogle, :root[data-theme="dark"] #block-managedad, :root[data-theme="dark"] #block-managedad .block-content { background-color: transparent !important; } :root[data-theme="dark"] .TPGMenu, :root[data-theme="dark"] .TPGNavigation, :root[data-theme="dark"] .submenus, :root[data-theme="dark"] .submenu, :root[data-theme="dark"] .TPGNavigation .block-content, :root[data-theme="dark"] .TPGNavigation .view-content, :root[data-theme="dark"] .TPGNavigation .view-content-wrap, :root[data-theme="dark"] .TPGNavigation .menu-footer { background-color: var(--tpg-color-surface) !important; border-color: var(--tpg-color-border) !important; color: var(--tpg-color-text) !important; } :root[data-theme="dark"] .TPGMenu a, :root[data-theme="dark"] .TPGNavigation a, :root[data-theme="dark"] tpgmenutopitem, :root[data-theme="dark"] tpgmenuseconditem, :root[data-theme="dark"] tpgmenulink { color: var(--tpg-color-text) !important; } :root[data-theme="dark"] .NewsInfoCard, :root[data-theme="dark"] .MainNewsLayout, :root[data-theme="dark"] #NewsContentShown, :root[data-theme="dark"] #NewsTextShown, :root[data-theme="dark"] #NewsLayoutLink, :root[data-theme="dark"] .FlexNavigation2, :root[data-theme="dark"] .FlexNavigation3, :root[data-theme="dark"] .FlexNavigation4, :root[data-theme="dark"] .ride-type-tab, :root[data-theme="dark"] .park-info-ride-types__link, :root[data-theme="dark"] .construction-update-date-link { background-color: var(--tpg-color-surface-raised) !important; border-color: var(--tpg-color-border) !important; color: var(--tpg-color-text) !important; } :root[data-theme="dark"] .NewsInfoCard *, :root[data-theme="dark"] .MainNewsLayout *, :root[data-theme="dark"] .FlexNavigation2 a, :root[data-theme="dark"] .FlexNavigation3 a, :root[data-theme="dark"] .FlexNavigation4 a, :root[data-theme="dark"] .queue-card *, :root[data-theme="dark"] .tech-container *, :root[data-theme="dark"] .DrupalBreadcrumbs, :root[data-theme="dark"] .DrupalBreadcrumbs a { color: var(--tpg-color-text) !important; } :root[data-theme="dark"] .newspagelink, :root[data-theme="dark"] li.selectatype, :root[data-theme="dark"] .tpg-ticket-card__type { background: #2a3548 !important; border-color: var(--tpg-color-border) !important; color: var(--tpg-color-text) !important; } :root[data-theme="dark"] li.selectatype.selected1, :root[data-theme="dark"] .ride-type-tab.is-active { background: #183569 !important; color: var(--tpg-color-on-accent) !important; } :root[data-theme="dark"] .InformationCounter, :root[data-theme="dark"] .CounterContainer, :root[data-theme="dark"] .counter, :root[data-theme="dark"] .subtext, :root[data-theme="dark"] newsblocktitle, :root[data-theme="dark"] newsblocktext, :root[data-theme="dark"] newsblockcontent, :root[data-theme="dark"] .newspagemajortitle, :root[data-theme="dark"] newspagemajortitle, :root[data-theme="dark"] #newsicon { color: var(--tpg-color-text) !important; } :root[data-theme="dark"] .queue-card-container, :root[data-theme="dark"] .queue-card-content, :root[data-theme="dark"] .manufacturer-item, :root[data-theme="dark"] .manufacturers-container { border-color: var(--tpg-color-border); color: var(--tpg-color-text); } :root[data-theme="dark"] .queue-card-image.no-ride-image { background: var(--tpg-color-border); } :root[data-theme="dark"] .queue-time.open, :root[data-theme="dark"] .queue-time.closed, :root[data-theme="dark"] .minutes { color: #000 !important; } :root[data-theme="dark"] .manufacturer-item, :root[data-theme="dark"] .manufacturer-item .img, :root[data-theme="dark"] .manufacturer-item.FlexNavigation4 { background: transparent !important; } :root[data-theme="dark"] .manufacturer-item .count-bubble, :root[data-theme="dark"] .park-info-ride-types__count { background: #244274; border-color: var(--tpg-color-text); color: var(--tpg-color-on-accent); } :root[data-theme="dark"] .tech-header, :root[data-theme="dark"] .tech-label, :root[data-theme="dark"] .tech-value, :root[data-theme="dark"] .tech-value a, :root[data-theme="dark"] .park-info-ride-types h3, :root[data-theme="dark"] .park-info-ride-types__label, :root[data-theme="dark"] .tpg-ticket-card__linked-content, :root[data-theme="dark"] .tpg-ticket-card__linked-content strong { color: var(--tpg-color-text) !important; } :root[data-theme="dark"] .construction-update-date-link:hover, :root[data-theme="dark"] .construction-update-date-link:focus, :root[data-theme="dark"] .ride-type-tab:hover, :root[data-theme="dark"] .ride-type-tab:focus, :root[data-theme="dark"] .park-info-ride-types__link:hover, :root[data-theme="dark"] .park-info-ride-types__link:focus { background: #20365a !important; border-color: #7ea2e6 !important; color: #fff !important; } :root[data-theme="dark"] .construction-update-focus { border-radius: 0.5rem; box-shadow: 0 0 0 0.1875rem rgba(148, 184, 255, 0.28) !important; outline: 0.125rem solid var(--tpg-color-focus) !important; } :root[data-theme="dark"] #LinkTree { display: flex; flex-wrap: wrap; } :root[data-theme="dark"] #LinkTree #LinkItem { background: #102440; border-color: var(--tpg-color-background); color: var(--tpg-color-text); } :root[data-theme="dark"] #LinkTree #LinkItem a, :root[data-theme="dark"] #LinkTree #LinkItem i, :root[data-theme="dark"] #LinkTree #LinkItem linklink { color: var(--tpg-color-text) !important; } :root[data-theme="dark"] .map-library-row, :root[data-theme="dark"] .map-file-cell, :root[data-theme="dark"] .map-meta-cell { background: var(--tpg-color-surface-raised) !important; border-color: var(--tpg-color-border) !important; color: var(--tpg-color-text) !important; } :root[data-theme="dark"] .map-file-fallback, :root[data-theme="dark"] .map-badge-year, :root[data-theme="dark"] .map-badge-type { background: #2a3548 !important; color: var(--tpg-color-text) !important; } :root[data-theme="dark"] .map-subtitle { color: var(--tpg-color-text-muted) !important; } :root[data-theme="dark"] .map-action-btn, :root[data-theme="dark"] .gclose.gbtn, :root[data-theme="dark"] .button--primary { background: linear-gradient(135deg, #335da8 0%, #183569 100%) !important; border-color: #4c70b1 !important; color: #fff !important; } :root[data-theme="dark"] .gclose.gbtn svg, :root[data-theme="dark"] .gclose.gbtn svg path { fill: currentColor; stroke: currentColor; } /* Match the old footer's dark-mode surface instead of retaining brand blue. */ :root[data-theme="dark"] .site-footer, :root[data-theme="dark"] .copyright { background: #1a202b; color: #f5f5f5; } :root[data-theme="dark"] .copyright .layout-container, :root[data-theme="dark"] .copyright .block, :root[data-theme="dark"] .copyright .block-content, :root[data-theme="dark"] .tpg-footer { background-color: transparent !important; } :root[data-theme="dark"] .copyright .block, :root[data-theme="dark"] .tpg-footer__bottom { border-color: rgba(255, 255, 255, 0.15); } /* The old desktop header uses the standard dark surface, not a raised card. */ :root[data-theme="dark"] .site-header { background: #1a202b; border-color: #2f3d55; } :root[data-theme="dark"] .mobile-navigation__title { color: var(--tpg-color-text); } .color-scheme-toggle { align-items: center; background: var(--tpg-color-surface-raised); border: 0.0625rem solid var(--tpg-color-border); border-radius: 50%; bottom: 1.125rem; box-shadow: var(--tpg-shadow-raised); color: var(--tpg-color-text); cursor: pointer; display: inline-flex; height: 2.875rem; justify-content: center; padding: 0; position: fixed; right: 1.125rem; transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; width: 2.875rem; z-index: 1000; } .color-scheme-toggle:hover { background: var(--tpg-color-accent); color: var(--tpg-color-on-accent); transform: translateY(-0.125rem); } .color-scheme-toggle__icon { font-size: 1.25rem; line-height: 1; } .color-scheme-toggle .color-scheme-toggle__icon--sun, :root[data-theme="dark"] .color-scheme-toggle .color-scheme-toggle__icon--moon { display: none !important; } :root[data-theme="dark"] .color-scheme-toggle .color-scheme-toggle__icon--sun { display: inline-block !important; } @media (prefers-reduced-motion: reduce) { .color-scheme-toggle { transition: none; } }