/* ============================================================ WPRO LUX v3 — WIDŻETY UNOSZĄCE SIĘ NAD TŁEM Wiadomości PRO · 2026-07-13 Wpiąć JAKO OSTATNI arkusz w index.html: FIZYKA (dlaczego to wygląda na 5 metrów, a nie na naklejkę): 1. ZERO cienia kontaktowego. Cień 1-2 px tuż pod krawędzią mówi oku „ten obiekt DOTYKA ściany". Usunięty. 2. DRABINA cieni — 5 warstw o rosnącym rozmyciu i przesunięciu. Jedna warstwa zawsze wygląda płasko, choćby miała blur 100 px. 3. ODERWANA KAŁUŻA — ostatnia warstwa ma DUŻY offset i DUŻY ujemny spread, więc cień jest WĘŻSZY od karty i leży niżej. Tak wygląda cień obiektu wiszącego wysoko. Robione przez box-shadow, NIE przez pseudoelement — pseudo z z-index:-1 malowałby się NA karcie. 4. LUMINANCJA. Karta jaśniejsza od tapety. Żaden cień nie podniesie karty ciemniejszej od tła. Dlatego przyciemniamy .aurora. 5. POWIETRZE. Odstęp 30 px między kartami — cień musi mieć gdzie paść. UWAGA techniczna: NIE ruszamy overflow:hidden na .widget (klipuje zawartość do zaokrągleń) i NIE dodajemy isolation/transform:translateZ — obie rzeczy tworzą kontekst stackingu i psują cienie. ============================================================ */ :root{ /* ── złoto: 3 stopnie ── */ --au-1:#8a7534; --au-2:#d6bd60; --au-3:#f4e2a6; --au-line:linear-gradient(135deg,var(--au-3) 0%,var(--au-2) 22%,var(--au-1) 48%,rgba(214,189,96,.10) 72%,var(--au-2) 100%); --au-rest:.20; --au-hover:.55; /* ══════════ DRABINA CIENI — TU MIESZKA WYSOKOŚĆ ══════════ offsetY | blur | spread | krycie Ostatnie dwie warstwy = oderwana kałuża (duży offset, duży ujemny spread). */ --lift-3: 0 6px 12px -6px rgba(0,0,0,.22), 0 14px 28px -10px rgba(0,0,0,.28), 0 28px 56px -14px rgba(0,0,0,.34), 0 52px 96px -22px rgba(0,0,0,.46), 0 78px 120px -40px rgba(0,0,0,.62); --lift-4: 0 10px 18px -8px rgba(0,0,0,.24), 0 22px 40px -12px rgba(0,0,0,.30), 0 44px 80px -16px rgba(0,0,0,.38), 0 78px 140px -26px rgba(0,0,0,.52), 0 110px 170px -48px rgba(0,0,0,.70), 0 0 60px -12px rgba(214,189,96,.18); --lux-r:16px; --lux-ease:cubic-bezier(.2,.8,.25,1); } /* ═══════════ 0. TAPETA MUSI BYĆ CIEMNIEJSZA OD KART ═══════════ .aurora jest position:fixed, z-index:-2 i NIEPRZEZROCZYSTA — zasłania tło . Dlatego przyciemniamy JĄ, nie body. */ .aurora{background:#07080b !important} .aurora::before,.aurora::after{opacity:.38 !important} .aurora i{opacity:.24 !important} /* ═══════════ 1. SZERZEJ + POWIETRZE NA CIEŃ ═══════════ */ .page-wrap{max-width:1440px;grid-template-columns:1fr 372px;gap:32px} @media(max-width:1200px){.page-wrap{grid-template-columns:1fr 340px}} @media(max-width:900px){.page-wrap{grid-template-columns:1fr}} #wpro-widget-zone-grid,#wpro-biz-grid{ grid-template-columns:repeat(auto-fill,minmax(330px,1fr)) !important; gap:30px !important; } /* ═══════════ 2. KRÓCEJ — mniej powietrza W ŚRODKU karty ═══════════ */ .widget-head{padding:10px 15px !important} .widget-head h3{font-size:13.5px !important} .widget-body{padding:12px 15px !important} .widget-body > *:last-child{margin-bottom:0 !important} .weather-city,.curr-row,.crypto-row,.fuel-row,.stock-row{padding:7px 11px !important;margin-bottom:4px !important} .widget-body table td,.widget-body table th{padding-top:6px !important;padding-bottom:6px !important} /* ═══════════ 3. KARTA UNOSZĄCA SIĘ ═══════════ */ .widget{ position:relative; margin-bottom:30px !important; /* miejsce, żeby cień miał gdzie paść */ /* powierzchnia JAŚNIEJSZA od tapety — to podnosi kartę bardziej niż cień */ background: radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.07) 0%, transparent 60%), linear-gradient(180deg,#1c2029 0%,#161920 55%,#12141a 100%) !important; border:1px solid transparent !important; border-radius:var(--lux-r) !important; box-shadow:var(--lift-3) !important; transition:box-shadow .45s var(--lux-ease), transform .45s var(--lux-ease) !important; } /* ZŁOTA KRAWĘDŹ — gradient pod maską, nie border-color. Złoto obraca się po obwodzie i łapie światło. */ .widget::before{ content:"";position:absolute;inset:0;border-radius:inherit; padding:1px;background:var(--au-line); opacity:var(--au-rest); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; pointer-events:none;transition:opacity .45s var(--lux-ease); z-index:5; } /* HOVER: karta odrywa się jeszcze bardziej, cień rośnie i ciemnieje */ .widget:hover{ transform:translateY(-6px) !important; box-shadow:var(--lift-4) !important; } .widget:hover::before{opacity:var(--au-hover)} /* ═══════════ 4. ŚWIATŁO Z GÓRY ═══════════ */ .widget-head{ background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)) !important; border-bottom:1px solid rgba(255,255,255,.05) !important; position:relative; } /* refleks na górnej fasce — „szkło" */ .widget-head::before{ content:"";position:absolute;left:10%;right:10%;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),rgba(244,226,166,.6),transparent); opacity:.6;transition:opacity .45s var(--lux-ease);pointer-events:none; } .widget:hover .widget-head::before{opacity:1} /* złota linia pod nagłówkiem — zamiast grubej ramki */ .widget-head::after{ content:"";position:absolute;left:15px;right:15px;bottom:-1px;height:1px; background:linear-gradient(90deg,rgba(214,189,96,.5),rgba(214,189,96,.06) 60%,transparent); pointer-events:none; } .widget-head h3{color:#f2f4f8;font-weight:600;letter-spacing:.2px} .widget-head h3 i{ color:var(--au-2) !important; filter:drop-shadow(0 0 8px rgba(214,189,96,.45)); } /* ═══════════ 5. CZERWIEŃ TYLKO DLA ALERTÓW / LIVE ═══════════ */ .widget.is-alert .widget-head h3 i, .widget[data-live] .widget-head h3 i{color:var(--red) !important;filter:drop-shadow(0 0 8px rgba(204,0,0,.5))} .widget.is-alert::before{background:linear-gradient(135deg,#ff6b74,#cc0000 60%,rgba(204,0,0,.15));opacity:.6} .widget.is-alert:hover{box-shadow:var(--lift-4),0 0 70px -14px rgba(204,0,0,.30) !important} /* ═══════════ 6. PREMIUM = korona, nie krzyk ═══════════ */ .widget.is-premium::before{opacity:.34} .widget.is-premium:hover::before{opacity:.85} .widget.is-premium .widget-head h3::after{ content:"\f521";font-family:"Font Awesome 6 Free";font-weight:900; font-size:10px;color:var(--au-2);margin-left:6px; text-shadow:0 0 10px rgba(214,189,96,.6); } .widget .num,.widget-body .v,.mstat .v, .curr-val,.crypto-val,.stock-val,.fuel-val{font-variant-numeric:tabular-nums;letter-spacing:-.2px} /* ═══════════ 7. TRYB UKŁADANIA — karta idzie najwyżej ═══════════ */ body.wp-edit .widget::before{opacity:.6} body.wp-edit .widget.dragging{ transform:translateY(-14px) scale(1.02) rotate(-.4deg) !important; box-shadow:var(--lift-4),0 0 0 1px rgba(214,189,96,.5),0 0 80px -10px rgba(214,189,96,.35) !important; } body.wp-edit .widget.dragging::before{opacity:1} /* puste miejsce = WGŁĘBIENIE (przeciwieństwo uniesienia) */ body.wp-edit .wp-drop,body.wp-edit .wp-slot-empty{ border:1px dashed rgba(214,189,96,.45) !important;border-radius:var(--lux-r); background:radial-gradient(120% 80% at 50% 0,rgba(214,189,96,.07),transparent 70%) !important; box-shadow:inset 0 8px 30px -10px rgba(0,0,0,.7) !important; } /* uchwyt — min. 44×44 px (WCAG 2.2) */ body.wp-edit .wp-handle{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;color:var(--au-2)} /* ═══════════ 8. DOSTĘPNOŚĆ ═══════════ */ .widget :is(a,button,input,select,[tabindex]):focus-visible{ outline:2px solid var(--au-2);outline-offset:3px;border-radius:8px; } /* ═══════════ 9. MOTYW JASNY ═══════════ Na jasnym tle cień musi być CHŁODNY i słabszy, inaczej wygląda jak brud. */ [data-theme="light"]{ --au-1:#a8862a;--au-2:#b8912f;--au-3:#d9bd6a; --lift-3: 0 6px 12px -6px rgba(28,32,45,.06), 0 14px 28px -10px rgba(28,32,45,.08), 0 28px 56px -14px rgba(28,32,45,.10), 0 52px 96px -22px rgba(28,32,45,.16), 0 78px 120px -40px rgba(28,32,45,.22); --lift-4: 0 10px 18px -8px rgba(28,32,45,.08), 0 22px 40px -12px rgba(28,32,45,.10), 0 44px 80px -16px rgba(28,32,45,.14), 0 90px 150px -30px rgba(28,32,45,.22), 0 120px 180px -50px rgba(28,32,45,.28); } [data-theme="light"] body{background:#f1f3f6 !important} [data-theme="light"] .widget{ background:linear-gradient(180deg,#fff 0%,#fdfdfc 100%) !important; } [data-theme="light"] .widget-head::before{background:linear-gradient(90deg,transparent,rgba(184,145,47,.4),transparent)} [data-theme="light"] .widget-head h3{color:#15171a} /* ═══════════ 10. MOBILE — niższy lot, inaczej cienie zjadają ekran ═══════════ */ @media(max-width:600px){ :root{ --lift-3: 0 4px 10px -4px rgba(0,0,0,.30), 0 12px 24px -8px rgba(0,0,0,.38), 0 30px 52px -18px rgba(0,0,0,.50); } .widget{margin-bottom:22px !important} #wpro-widget-zone-grid,#wpro-biz-grid{gap:22px !important} .widget:hover{transform:none !important} /* na dotyku hover nie istnieje */ } /* ═══════════ 11. Szanuj ustawienia użytkownika ═══════════ */ @media (prefers-reduced-motion:reduce){ .widget,.widget::before{transition:none !important} .widget:hover{transform:none !important} }