/* ============================================================ theme-dark.css — R170: etusivun "casino-night" värimaailma KAIKILLE muille sivuille. Sivujen RAKENNE pidetään ennallaan — vain värit muuttuvat. Otetaan käyttöön . Mekanismi: style.min.css käyttää paletti-muuttujia (body{color:var(--color-text);background:var(--color-light-bg)}), joten yliajamalla nuo muuttujat body.theme-darkilla koko leipä- teksti, sivutausta, pinnat ja reunat kääntyvät tummiksi AUTOMAATTISESTI. Header käyttää --color-dark (ei yliajeta) → pysyy vaaleana kuten etusivulla. Footer on jo valmiiksi tumma. Lopuksi tummennetaan erikseen komponentit, joiden tausta on var(--color-white) tai kovakoodattu vaalea (muuten vaalea pinta + vaalea teksti = näkymätön). Etusivu (index.html) EI käytä tätä — sillä on home-redesign.css. ============================================================ */ /* ---------- paletti tummaksi (kaskadoituu kaikkialle) ---------- */ body.theme-dark{ --color-light-bg:#0a1424; --color-surface:#0e1c34; --color-text:#e8eef6; --color-text-light:rgba(232,238,246,.74); --color-text-muted:rgba(232,238,246,.55); --color-border:rgba(245,200,66,.16); --color-border-light:rgba(255,255,255,.09); background-color:#0a1424 !important; background-image: radial-gradient(120% 80% at 50% -8%, rgba(22,44,78,.65) 0%, transparent 58%), linear-gradient(180deg,#0a1424 0%,#091020 100%) !important; background-attachment:fixed; } /* header pidetään vaaleana (etusivu-pariteetti): palautetaan vaaleat muuttujat header-puuhun, jottei mikään header-teksti muutu vaaleaksi */ body.theme-dark .site-header{ --color-text:#1e293b; --color-text-light:#475569; --color-text-muted:#64748b; --color-border:#e2e8f0; --color-border-light:#f1f5f9; --color-light-bg:#f8fafd; --color-surface:#eef2f7; } /* osiot läpinäkyviksi → navy-tausta näkyy läpi (kuten etusivulla) */ body.theme-dark .section, body.theme-dark .section-alt, body.theme-dark .section--alt, body.theme-dark .section--warm, body.theme-dark .aff-section, body.theme-dark .page-hero, body.theme-dark .page-header{ background:transparent !important; } body.theme-dark .section-title, body.theme-dark .page-hero h1, body.theme-dark .page-header h1, body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5, body.theme-dark h6{ color:var(--color-text); } body.theme-dark .section-subtitle, body.theme-dark .page-hero p, body.theme-dark .page-header p, body.theme-dark .lead{ color:var(--color-text-light); } /* ---------- panel/kortti-komponentit (tausta oli vaalea) → lasipinta ---------- VAIN aidot kortit/paneelit saavat lasitaustan+reunan+varjon. EI yleisiä layout-luokkia (.content-block=tekstisäiliö, .cta/.box/.info=geneerisiä) — ne saivat virheellisen "laatikko"-tyylin → koko sivu vinksallaan (R170b-fix). Geneeristen elementtien teksti vaalenee jo muuttuja-yliajolla. */ body.theme-dark .bonus-card, body.theme-dark .category-card, body.theme-dark .casino-card, body.theme-dark .fact-item, body.theme-dark .faq-item, body.theme-dark .guide-card, body.theme-dark .pros, body.theme-dark .cons, body.theme-dark .sidebar-widget, body.theme-dark .toc, body.theme-dark .review-header, body.theme-dark .review-header-info, body.theme-dark .review-header-cta, body.theme-dark .search-results, body.theme-dark .feature-box, body.theme-dark .info-card, body.theme-dark .bg-white, body.theme-dark .author-box{ background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important; border:1px solid var(--color-border); color:var(--color-text); box-shadow:0 12px 30px -20px rgba(0,0,0,.8); } body.theme-dark .bonus-card h2, body.theme-dark .bonus-card h3, body.theme-dark .category-card h3, body.theme-dark .guide-card h3, body.theme-dark .content-block h2, body.theme-dark .content-block h3, body.theme-dark .feature-box h3, body.theme-dark .info-card h3, body.theme-dark .cta h2, body.theme-dark .cta-box h2, body.theme-dark .cta h3, body.theme-dark .sidebar-widget h3, body.theme-dark .sidebar-widget h4, body.theme-dark .faq-item summary, body.theme-dark .faq-question, body.theme-dark .review-header h1, body.theme-dark .author-box__name{ color:#fff; } body.theme-dark .category-card p, body.theme-dark .guide-card p, body.theme-dark .content-block p, body.theme-dark .feature-box p, body.theme-dark .info-card p, body.theme-dark .faq-item p, body.theme-dark .faq-answer, body.theme-dark .author-box p, body.theme-dark .cta p, body.theme-dark .cta-box p{ color:var(--color-text-light); } /* pros/cons-laatikoiden listatekstit + erottimet tummalla luettaviksi (otsikot Edut/Haitat säilyttävät vihreä/punainen-aksentin) */ body.theme-dark .pros li, body.theme-dark .cons li{ color:var(--color-text-light) !important; border-color:rgba(255,255,255,.08) !important; } body.theme-dark .pros li:hover, body.theme-dark .cons li:hover{ background:rgba(255,255,255,.04) !important; } /* ---------- taulukot (vertailu / kasino / info) ---------- */ body.theme-dark .comparison-table, body.theme-dark .casino-table, body.theme-dark .info-table{ background:rgba(255,255,255,.035) !important; border:1px solid var(--color-border); border-radius:14px; overflow:hidden; color:var(--color-text); } body.theme-dark .comparison-table thead, body.theme-dark .casino-table thead, body.theme-dark .info-table thead{ background:linear-gradient(180deg, rgba(20,42,76,.9), rgba(12,26,46,.9)); } body.theme-dark .comparison-table th, body.theme-dark .casino-table th, body.theme-dark .info-table th{ color:#fff; border-color:rgba(255,255,255,.08); } body.theme-dark .comparison-table td, body.theme-dark .casino-table td, body.theme-dark .info-table td{ color:var(--color-text-light); border-color:rgba(255,255,255,.07); } body.theme-dark .comparison-table tbody tr:nth-child(even), body.theme-dark .casino-table tbody tr:nth-child(even), body.theme-dark .info-table tbody tr:nth-child(even){ background:rgba(255,255,255,.03); } body.theme-dark .comparison-table tbody tr:hover, body.theme-dark .casino-table tbody tr:hover, body.theme-dark .info-table tbody tr:hover{ background:rgba(245,200,66,.08); } body.theme-dark .table-responsive{ background:transparent !important; } /* ---------- maksutapakortit + logot ---------- */ body.theme-dark .payment-card{ background:rgba(255,255,255,.05) !important; border:1px solid var(--color-border); color:var(--color-text); } body.theme-dark .payment-card__logo{ filter:brightness(0) invert(1) opacity(.85); } /* ---------- breadcrumbs ---------- */ body.theme-dark .breadcrumbs, body.theme-dark .breadcrumbs a, body.theme-dark .breadcrumbs span{ color:var(--color-text-muted); } body.theme-dark .breadcrumbs a:hover{ color:var(--color-accent); } /* ---------- TOC (oppaat) ---------- */ /* TOC-sivupalsta (oppaat, näkyy ≥1500px) — oli vaalea lasipaneeli → tumma */ body.theme-dark .toc-sidebar{ background:linear-gradient(170deg, rgba(20,40,72,.97) 0, rgba(9,18,36,.97) 100%) !important; border-color:var(--color-border) !important; box-shadow:0 16px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important; } body.theme-dark .toc-header{ color:#fff !important; } body.theme-dark .toc a, body.theme-dark .toc-list a, body.theme-dark .toc-link{ color:var(--color-text-light) !important; } body.theme-dark .toc a:hover, body.theme-dark .toc-link:hover{ color:var(--color-accent-light) !important; } body.theme-dark .toc-link--active{ color:var(--color-accent) !important; font-weight:700; } body.theme-dark .toc-progress-track{ background:rgba(255,255,255,.12) !important; } /* ---------- lomakekentät (suodattimet, ei header-haku) ---------- */ body.theme-dark .filter-bar{ background:rgba(255,255,255,.04) !important; border:1px solid var(--color-border); } body.theme-dark .filter-btn, body.theme-dark .filter-select{ background:rgba(255,255,255,.07) !important; color:var(--color-text) !important; border:1px solid rgba(255,255,255,.16) !important; } body.theme-dark .filter-btn.active, body.theme-dark .filter-btn:hover{ background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark)) !important; color:#1a1200 !important; } body.theme-dark .pagination__link{ background:rgba(255,255,255,.06) !important; color:var(--color-text) !important; border:1px solid var(--color-border); } body.theme-dark .pagination__link.is-active{ background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark)) !important; color:#1a1200 !important; } /* ---------- linkit leipätekstissä ---------- */ body.theme-dark .content-block a, body.theme-dark .guide-content a, body.theme-dark .article-body a{ color:var(--color-accent-light); } /* ---------- yleiset tekstinpätkät, jotka olivat tummia vaalealla ---------- */ body.theme-dark .meta, body.theme-dark .muted, body.theme-dark small, body.theme-dark .date, body.theme-dark time, body.theme-dark figcaption{ color:var(--color-text-muted); } /* ============================================================ UUTISET (news.css) — komponentit tummiksi. news.css käyttää kovakoodattuja vaaleita värejä (ei muuttujia), joten yliajetaan eksplisiittisesti. Vaihe 2. ============================================================ */ /* uutisvirran jutut (hub) */ body.theme-dark .feed-story{ border-bottom-color:rgba(255,255,255,.1) !important; } body.theme-dark .feed-story__title, body.theme-dark .feed-story__title a{ color:#fff !important; } body.theme-dark .feed-story__excerpt{ color:var(--color-text-light) !important; } body.theme-dark .feed-story__meta, body.theme-dark .feed-story__caveat{ color:var(--color-text-muted) !important; } body.theme-dark .feed-story__media{ background:rgba(255,255,255,.05) !important; } /* artikkelin meta-palkki + leipäteksti */ body.theme-dark .news-meta-bar{ border-bottom-color:rgba(255,255,255,.1) !important; color:var(--color-text-muted) !important; } body.theme-dark .news-body, body.theme-dark .news-body p, body.theme-dark .news-body li, body.theme-dark .news-body td{ color:var(--color-text-light) !important; } body.theme-dark .news-body h1, body.theme-dark .news-body h2, body.theme-dark .news-body h3, body.theme-dark .news-body h4, body.theme-dark .news-body strong, body.theme-dark .news-body b{ color:#fff !important; } body.theme-dark .news-body a{ color:var(--color-accent-light) !important; } /* upotettu kasino-widget (cw-*) */ body.theme-dark .casino-widget{ background:rgba(255,255,255,.04) !important; border-color:var(--color-border) !important; } body.theme-dark .casino-widget__label, body.theme-dark .casino-widget__title, body.theme-dark .casino-widget__fineprint, body.theme-dark .cw-meta, body.theme-dark .cw-rating-val{ color:var(--color-text-light) !important; } body.theme-dark .cw-card{ background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.1) !important; } body.theme-dark .cw-name, body.theme-dark .cw-name a{ color:#fff !important; } /* uusimmat-sivupalsta */ body.theme-dark .latest-feed{ background:rgba(255,255,255,.04) !important; border-top-color:var(--color-accent) !important; } body.theme-dark .latest-feed__item{ border-top-color:rgba(255,255,255,.08) !important; } body.theme-dark .latest-feed__title, body.theme-dark .latest-feed__link{ color:var(--color-text-light) !important; } body.theme-dark .latest-feed__time{ color:var(--color-text-muted) !important; } /* liittyvät jutut */ body.theme-dark .related-card{ background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important; border:1px solid var(--color-border) !important; } body.theme-dark .related-card__title, body.theme-dark .related-card h3, body.theme-dark .related-card a{ color:#fff !important; } /* affiliate-osio (aff-cta on punainen → jätetään; aff-section vaalea → tumma) */ body.theme-dark .aff-section{ background:rgba(255,255,255,.03) !important; border-color:var(--color-border) !important; } body.theme-dark .aff-fineprint, body.theme-dark .aff-disclosure{ color:var(--color-text-muted) !important; } /* ---------- lomakekentät (esim. yhteydenottolomake) → tummat ---------- */ body.theme-dark input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]), body.theme-dark select, body.theme-dark textarea{ background:rgba(255,255,255,.06) !important; color:var(--color-text) !important; border:1px solid rgba(255,255,255,.16) !important; } body.theme-dark input::placeholder, body.theme-dark textarea::placeholder{ color:rgba(232,238,246,.5); } body.theme-dark input:focus, body.theme-dark select:focus, body.theme-dark textarea:focus{ outline:none; border-color:var(--color-accent) !important; } /* header-haku pidetään vaaleana (header on vaalea) */ body.theme-dark .site-header input{ background:#fff !important; color:#1e293b !important; border-color:#e2e8f0 !important; } /* ---------- inline-tyylillä kovakoodatut VAALEAT taustat (esim. lakisivujen callout-laatikot style="background:#f8f9fa…") → tummiksi, muuten vaalea pinta + vaalea teksti = näkymätön. Logo-boksit käyttävät inline-!important → ne voittavat tämän ja pysyvät vaaleina (logojen luettavuus). ---------- */ body.theme-dark [style*="background:#f8f9fa"], body.theme-dark [style*="background: #f8f9fa"], body.theme-dark [style*="background:#f9f9f9"], body.theme-dark [style*="background: #f9f9f9"], body.theme-dark [style*="background:#f0f0f0"], body.theme-dark [style*="background: #f0f0f0"], body.theme-dark [style*="background:#fff"], body.theme-dark [style*="background: #fff"]{ background:rgba(255,255,255,.05) !important; color:var(--color-text) !important; } /* turvaverkko: jätä logojen vaaleat taustat ennalleen (luettavuus) */ body.theme-dark .casino-logo-wrap--white{ background:#fff !important; } /* ============================================================ R170c: UI/UX-viimeistely — saavutettavuus + yhtenäisyys ============================================================ */ /* arvostelupisteen valkoinen "pilleri" → tumma lasi, teksti vaaleaksi */ body.theme-dark .casino-rating{ background:transparent !important; } body.theme-dark .rating-value{ color:var(--color-text-light) !important; } /* näppäimistöfokus näkyväksi (a11y) — kultainen rengas */ body.theme-dark a:focus-visible, body.theme-dark button:focus-visible, body.theme-dark .btn:focus-visible, body.theme-dark input:focus-visible, body.theme-dark select:focus-visible, body.theme-dark textarea:focus-visible, body.theme-dark summary:focus-visible, body.theme-dark [tabindex]:focus-visible{ outline:2px solid var(--color-accent-light) !important; outline-offset:2px !important; border-radius:4px; } /* tekstivalinnan väri */ body.theme-dark ::selection{ background:rgba(245,200,66,.85); color:#1a1200; } @media (prefers-reduced-motion: reduce){ body.theme-dark{ background-attachment:scroll; } }