/* WiemWiecej — Rozkłady Tarota: JASNY wariant landingu (v0.8.0, decyzja Magdy 2026-08-17: „strona po wejściu w stawianie rozkładu też ma być jasna, z tymi wariantami kolorystycznymi jak na kafelkach i interaktywnymi elementami"). Scope: .wwr-landing--light (klasę + zmienne --wwr-th/--wwr-thg nadaje WWR_Landing::render() z mapy wwr_visual_theme()). Widget osadzony shortcodem w artykule NIE dostaje tej klasy — zostaje ciemny. Strategia: (1) redefinicja tokenów kolorów na jasne odpowiedniki — większość komponentów przejeżdża sama; (2) punktowe nadpisania twardych granatów (tła sekcji, karta widgetu, pola, przyciski); (3) tint koloru rozkładu (--wwr-thg) w tle strony i karty; (4) latające symbole (.wwrl-fly). */ .wwr-landing--light { /* tokeny: ciemny → jasny */ --ww-cream: #1a2040; /* tekst „kremowy" → granatowy */ --ww-cream-70: rgba(26, 32, 64, .72); --ww-white: #0d1240; /* nagłówki — granat jak na hubie horoskopów */ --ww-gold-soft: #b3922e; /* akcenty złote — ciemniejsze pod jasne tło */ --ww-ink-2: #ffffff; /* tła paneli (awers karty wyniku) */ --ww-ink-3: #e6e3f0; /* obramowania */ /* --ww-ink i --ww-gold zostają: ink = tekst na złocie/kremie, działa też na jasnym */ color: #1a2040; background: #ffffff; /* identycznie jak pasek headera (korekta Magdy 2026-08-18) */ } /* ⚠️ Widget redefiniuje tokeny na .wwr-app (bliżej niż landing), więc jasne wartości muszą być powtórzone z wyższą specyficznością — bez tego wnętrze karty zostaje „ciemno-motywowe" (białe teksty na białej karcie). */ .wwr-landing--light .wwr-app { --ww-cream: #1a2040; --ww-cream-70: rgba(26, 32, 64, .72); --ww-white: #0d1240; --ww-gold-soft: #b3922e; --ww-ink-2: #ffffff; --ww-ink-3: #e6e3f0; } /* --- Tło strony: czysta biel #fff, ten sam odcień co pasek headera (korekta Magdy 2026-08-18). Kolor rozkładu niesie WYŁĄCZNIE moduł losowania. --- */ .wwr-landing--light .wwrl-bg { background: #ffffff; } .wwr-landing--light .wwrl-stars, .wwr-landing--light .wwrl-moon, .wwr-landing--light .wwrl-tw { display: none; } /* --- Latające EMOTKI tematyczne (2026-08-18: emoji systemowe zamiast SVG; przelatują ZA modułem losowania — z-index niżej niż .wwr-app) --- */ .wwrl-fly { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .wwrl-fly .wwrl-fp { position: absolute; bottom: -28px; left: var(--fx, 50%); line-height: 1; opacity: 0; animation: wwrl-fp-rise var(--fd, 9s) linear infinite; animation-delay: var(--fdl, 0s); } @keyframes wwrl-fp-rise { 0% { transform: translate(0, 0) rotate(-10deg) scale(.9); opacity: 0; } 10% { opacity: var(--fo, .5); } 80% { opacity: var(--fo, .5); } 100% { transform: translate(var(--sw, 10px), -420px) rotate(12deg) scale(1.05); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .wwrl-fly { display: none; } } .wwr-landing--light .wwrl-hero { position: relative; } .wwr-landing--light .wwrl-draw { position: relative; } .wwr-landing--light .wwrl-draw .wwr-app { position: relative; z-index: 1; } /* Emotki WEWNĄTRZ karty modułu: .wwr-card dostaje własny stacking context, a warstwa z-index:-1 maluje się NAD tłem karty, ale POD całą treścią (negatywne dzieci renderują się między tłem kontekstu a normal flow). */ .wwr-landing--light .wwr-card { position: relative; z-index: 0; } .wwr-landing--light .wwr-card > .wwrl-fly { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; } /* --- Hero / kroki --- */ .wwr-landing--light .wwrl-scroll { color: rgba(26, 32, 64, .5); } .wwr-landing--light .wwrl-scroll span { background: linear-gradient(var(--ww-gold), transparent); } /* --- HERO i KROKI wg projektu Magdy (2026-08-18) --- Hero: eyebrow, H1 w dwóch liniach (druga kursywą, złota), lead serif. Kroki: bez kafli, trzy kolumny na płaskim tle, nad nimi kreska z etykietą. */ .wwr-landing--light .wwrl-hero { padding: 64px 4px 34px; max-width: 780px; } .wwr-landing--light .wwrl-hero .wwrl-eyebrow { color: var(--ww-gold-soft); letter-spacing: .24em; margin-bottom: 26px; } .wwr-landing--light .wwrl-hero h1 { color: #0d1240; font-size: clamp(32px, 5vw, 46px); margin: 0 0 22px; font-weight: 700; letter-spacing: -.6px; line-height: 1.12; } .wwr-landing--light .wwrl-h1-sub { display: block; margin-top: 2px; font-style: italic; font-weight: 400; color: #a68a52; font-size: .84em; letter-spacing: 0; } .wwr-landing--light .wwrl-hero p { color: #5a5870; font-size: 16px; line-height: 1.75; max-width: 42em; } /* Kreska z etykietą sekcji: linia, napis kapitalikami, linia. */ .wwr-landing--light .wwrl-rule { display: flex; align-items: center; gap: 18px; margin: 0 0 38px; font-family: var(--wwr-font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #8a87a0; } .wwr-landing--light .wwrl-rule::before, .wwr-landing--light .wwrl-rule::after { content: ""; flex: 1; border-top: 1px solid #e7e5f0; } .wwr-landing--light .wwrl-rule span { white-space: nowrap; } /* Kroki bez kafli: numer złoty, tytuł kapitalikami, opis szeryfowy. */ .wwr-landing--light .wwrl-step { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; grid-template-columns: 1fr; gap: 0; } .wwr-landing--light .wwrl-step-num { font-size: 17px; font-weight: 600; letter-spacing: .06em; color: var(--ww-gold-soft); margin-bottom: 12px; min-width: 0; } .wwr-landing--light .wwrl-step h3 { font-size: 11px; letter-spacing: .16em; color: #101a3f; margin: 0 0 10px; } .wwr-landing--light .wwrl-step p { font-size: 14.5px; line-height: 1.7; color: #5a5870; } @media (min-width: 680px) { .wwr-landing--light .wwrl-steps-grid { gap: 44px; } .wwr-landing--light .wwrl-step { padding: 0; } .wwr-landing--light .wwrl-step-num { font-size: 17px; margin-bottom: 12px; } } /* --- Karta widgetu (wszystkie fazy): MODUŁ niesie kolor rozkładu --- Tint od góry na całą szerokość + delikatna kolorowa poświata w cieniu. */ .wwr-landing--light .wwr-card, .wwr-landing--light .wwrl-draw .wwr-card { background: radial-gradient(140% 60% at 50% -12%, var(--wwr-thg, rgba(201, 161, 74, .16)) 0%, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 70%, var(--wwr-thg, rgba(201, 161, 74, .10)) 160%), #fff; border: 1px solid #e8e6f0; box-shadow: 0 24px 60px -24px rgba(13, 18, 64, .18), 0 10px 46px -18px var(--wwr-thg, rgba(201, 161, 74, .2)); } .wwr-landing--light .wwr-starfield { display: none; } .wwr-landing--light .wwr-moon { display: none; } .wwr-landing--light .wwr-tw { display: none; } /* --- ZŁOTE rewersy kart (korekta Magdy): talia na formularzu, tasowanie, wachlarz wyboru ORAZ rewers przy odsłonięciu w wyniku — wszystko renderuje JS jedną klasą .wwr-cardback, więc jedno nadpisanie łapie każdy kontekst. Gradient jak złote mini-karty na kaflach; księżyc/gwiazdki → granatowe. --- */ .wwr-landing--light .wwr-cardback { background: linear-gradient(145deg, #e0d193 0%, #c8b97a 48%, #b09a54 100%); border: 1px solid #a8934f; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .28), 0 8px 20px rgba(13, 18, 64, .25); } .wwr-landing--light .wwr-cardback .ring { box-shadow: inset -14px 5px 0 0 rgba(16, 28, 63, .58); } .wwr-landing--light .wwr-cardback .cbs { background: rgba(16, 28, 63, .55); } /* Pola formularza. Korekta Magdy 2026-08-18: białe pole na jasnej karcie zlewało się z tłem, więc wnętrze jest ciemniejsze, obramowanie mocniejsze, a podpowiedź czytelniejsza. Fokus dokłada złotą poświatę. */ .wwr-landing--light .wwr-fld { background: #f1eff8; border: 1px solid #c5bfdc; color: #1a2040; } .wwr-landing--light .wwr-fld::placeholder { color: rgba(26, 32, 64, .62); } .wwr-landing--light .wwr-fld:hover { border-color: #ada6cb; } .wwr-landing--light .wwr-fld:focus { background: #fff; border-color: var(--ww-gold); box-shadow: 0 0 0 3px rgba(201, 161, 74, .16); } /* Główne CTA: kremowa pigułka → granatowa (na jasnej karcie krem znika) */ .wwr-landing--light .wwr-btn { background: #101c3f; color: #f4ecd8; } .wwr-landing--light .wwr-btn:hover { background: #1b2a55; } .wwr-landing--light .wwr-app a.wwr-btn:hover { color: #f4ecd8; background: #1b2a55; } /* Przetasuj / Postaw rozkład */ .wwr-landing--light .wwr-reshuffle { background: #fff; border-color: #d9d5e8; color: var(--ww-gold-soft); } .wwr-landing--light .wwr-reshuffle:hover { border-color: var(--ww-gold); color: #101c3f; background: #fff; } .wwr-landing--light .wwr-place { background: #fff; color: var(--ww-gold-soft); border-color: var(--ww-gold); } .wwr-landing--light .wwr-place:hover { background: #101c3f; color: #f4ecd8; border-color: #101c3f; } /* Drobiazgi na jasnym: błąd, chipy „wkrótce", social */ .wwr-landing--light .wwr-error { color: #b3512e; } .wwr-landing--light .wwr-soon-chip { color: #1a2040; border-color: #cfcadd; } .wwr-landing--light .wwr-social button { color: #1a2040; border-color: #d9d5e8; } .wwr-landing--light .wwr-social button:hover { border-color: var(--ww-gold); } /* Panel aspektów i „Przesłanie rozkładu" */ .wwr-landing--light .wwr-aspect-panel { background: #faf9fd; border-color: #e6e3f0; } .wwr-landing--light .wwr-summary { background: linear-gradient(180deg, #fbf6e8 0%, #f7f0dc 100%); border-color: rgba(201, 161, 74, .45); box-shadow: none; } /* Awers karty wyniku: --ww-ink-2 → #fff załatwia tło; ramka wewn. zostaje złota */ .wwr-landing--light .wwr-flip .face { box-shadow: 0 14px 34px -16px rgba(13, 18, 64, .25); } /* Wachlarz: cień kart pod jasne tło + jaśniejszy tor scrolla. Zaznaczenie/fokus: złota obwódka z ciemnego motywu znika na ZŁOTYCH kartach → granatowa. */ .wwr-landing--light .wwr-fan .wwr-fan-card .wwr-cardback { box-shadow: 0 10px 22px rgba(13, 18, 64, .28); } .wwr-landing--light .wwr-fan .wwr-fan-card:focus-visible .wwr-cardback { box-shadow: 0 0 0 2px #101c3f, 0 10px 22px rgba(13, 18, 64, .28); } .wwr-landing--light .wwr-fan .wwr-fan-card.sel .wwr-cardback { box-shadow: 0 0 0 2px #101c3f, 0 18px 40px rgba(13, 18, 64, .35); } .wwr-landing--light .wwr-fan--scroll { scrollbar-color: rgba(179, 146, 46, .5) transparent; } .wwr-landing--light .wwr-fan--scroll::-webkit-scrollbar-track { background: rgba(13, 18, 64, .06); } .wwr-landing--light .wwr-fan--scroll::-webkit-scrollbar-thumb { background: rgba(179, 146, 46, .5); } /* Slot „wybrane karty” — nieaktywny musi być widoczny na bieli */ .wwr-landing--light .wwr-slot { color: rgba(26, 32, 64, .42); } .wwr-landing--light .wwr-slot.filled { color: var(--ww-gold-soft); } /* Sekcja „Znaczenia kart" (.wwrl-mean) celowo ZOSTAJE granatowa (korekta Magdy 2026-08-17 — spójnie z kategorią Tarot). Style: inline w meanings.php. */ /* Ostatnia sekcja landingu (granatowe „O tym rozkładzie") ma stykać się z granatowym newsletterem — bez jasnego pasa z dolnego paddingu wrapa. */ .wwr-landing--light .wwrl-wrap { padding-bottom: 0; } /* --- Typografia jak na hubie horoskopów (korekta Magdy 2026-08-20: „czcionki i wielkości mniej więcej jak na /horoskop-dzienny/"). Wzorce z wiemwiecej-horoskopy/assets/hub.css: H1 46px/700/ls -.6px, H2 sekcji 27px/700/ls -.2px, lead 16px/1.75 #5a5870, proza kart 14.5px/1.7 #5a5870, dłuższa proza 15.5px/1.85 #4a4860, granat #0d1240. Nadpisuje też inline