/* ========================================================================== background-premium-mockup.css Mockup tła dla strony głównej Oksfordzik. Cel: - usunąć boczne kropki SVG, - zachować obecny układ index.html i komponenty, - dodać bardziej premium, spokojne tło sekcyjne, - wykorzystać istniejące tokeny kolorów: morski, koralowy, zielony. Podpięcie: 1) W dodaj klasę: bg-mockup-premium 2) Ten plik załaduj PO components.css ========================================================================== */ /* 1. Globalna powierzchnia strony — czysto, jasno, bez wzoru po bokach */ body.bg-mockup-premium { overflow-x: clip; background: linear-gradient(180deg, #ffffff 0%, #fbfefd 42%, #ffffff 100%); } /* 2. Nadpisanie obecnej warstwy .bg-layer. Zostawiamy istniejący HTML, ale zamiast bg_l.svg/bg_r.svg dajemy miękkie plamy. */ .bg-mockup-premium .bg-layer { position: absolute; inset: 0; z-index: -1; max-width: none; margin-inline: 0; pointer-events: none; overflow: hidden; background-image: radial-gradient(circle at 7% 7%, rgba(31, 166, 168, 0.12) 0 0, rgba(31, 166, 168, 0.06) 20rem, transparent 39rem), radial-gradient(circle at 94% 15%, rgba(246, 107, 91, 0.10) 0 0, rgba(246, 107, 91, 0.045) 18rem, transparent 36rem), radial-gradient(circle at 7% 47%, rgba(16, 52, 58, 0.055) 0 0, transparent 28rem), radial-gradient(circle at 92% 72%, rgba(31, 166, 168, 0.085) 0 0, transparent 34rem), radial-gradient(circle at 16% 91%, rgba(246, 107, 91, 0.075) 0 0, transparent 30rem); background-repeat: no-repeat; background-size: 100% 100%; } /* 3. Delikatna siatka punktów tylko jako tekstura, nie jako główny motyw. Działa jak subtelny papier/ziarno, nie jak dziecięcy wzorek. */ .bg-mockup-premium .bg-layer::after { content: ""; position: absolute; inset: 0; opacity: 0.32; background-image: radial-gradient(circle, rgba(16, 52, 58, 0.055) 1px, transparent 1.2px); background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%); } /* 4. Hero — dodatkowa głębia, bez zmiany HTML sekcji */ .bg-mockup-premium .hero { position: relative; isolation: isolate; overflow: clip; /* przycina rozmyte koła ::before/::after, by nie tworzyły poziomego scrolla */ } .bg-mockup-premium .hero::before { content: ""; position: absolute; z-index: -1; width: min(48rem, 86vw); aspect-ratio: 1; left: max(-22rem, -26vw); top: -10rem; border-radius: 9999px; background: radial-gradient(circle, rgba(31, 166, 168, 0.13), rgba(31, 166, 168, 0.035) 52%, transparent 74%); filter: blur(18px); } .bg-mockup-premium .hero::after { content: ""; position: absolute; z-index: -1; width: min(40rem, 76vw); aspect-ratio: 1; right: max(-18rem, -22vw); top: 5rem; border-radius: 9999px; background: radial-gradient(circle, rgba(246, 107, 91, 0.115), rgba(246, 107, 91, 0.035) 48%, transparent 72%); filter: blur(22px); } /* 5. Białe karty i sekcje nadal mają oddychać — sekcja zaufania bez tła. */ .bg-mockup-premium #zaufanie, .bg-mockup-premium #sciezki { position: relative; } /* 6. Sekcja „Dlaczego…” jako jasna wyspa. To zastępuje dekoracyjne tło globalne rytmem powierzchni. */ .bg-mockup-premium #dlaczego-oksfordzik { position: relative; padding-block: clamp(3.5rem, 7vw, 6.5rem); margin-top: clamp(3rem, 6vw, 5.5rem); background: linear-gradient(180deg, rgba(248, 253, 253, 0.96), rgba(243, 250, 250, 0.96)); border-block: 1px solid rgba(226, 232, 240, 0.72); overflow: clip; } .bg-mockup-premium #dlaczego-oksfordzik::before { content: ""; position: absolute; width: 34rem; aspect-ratio: 1; right: -16rem; top: -14rem; border-radius: 9999px; background: radial-gradient(circle, rgba(31, 166, 168, 0.12), transparent 70%); } .bg-mockup-premium #dlaczego-oksfordzik::after { content: ""; position: absolute; width: 26rem; aspect-ratio: 1; left: -13rem; bottom: -15rem; border-radius: 9999px; background: radial-gradient(circle, rgba(246, 107, 91, 0.09), transparent 72%); } .bg-mockup-premium #dlaczego-oksfordzik > * { position: relative; z-index: 1; } /* 7. Sekcje typu bleed — spokojniejsze tło, ale bez efektu „tapety”. */ .bg-mockup-premium .bleed-section { position: relative; } .bg-mockup-premium .bleed-section:nth-of-type(even) { background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0)); } /* 8. Opinie — podkreślenie social proof jako osobna, lekko morska strefa. */ .bg-mockup-premium #opinie, .bg-mockup-premium [aria-labelledby="opinie-title"] { position: relative; padding-block: clamp(3.25rem, 6vw, 5.75rem); background: radial-gradient(circle at 12% 18%, rgba(31, 166, 168, 0.08), transparent 26rem), linear-gradient(180deg, #ffffff 0%, #f8fcfc 100%); border-block: 1px solid rgba(226, 232, 240, 0.65); } /* 9. Film — neutralny, bardzo jasny krem. */ .bg-mockup-premium #film { position: relative; background: radial-gradient(circle at 88% 20%, rgba(246, 107, 91, 0.08), transparent 27rem), linear-gradient(180deg, #fffdfb, #ffffff); margin-top: 0; padding-top: clamp(4rem, 7vw, 6rem); border-block: 1px solid rgba(226, 232, 240, 0.65); } /* 10. Formularz / zapis — delikatny koral jako strefa decyzyjna. */ .bg-mockup-premium #zapis, .bg-mockup-premium .contact-form-section, .bg-mockup-premium .form-section { position: relative; background: radial-gradient(circle at 15% 10%, rgba(246, 107, 91, 0.10), transparent 28rem), radial-gradient(circle at 90% 80%, rgba(31, 166, 168, 0.08), transparent 32rem), linear-gradient(180deg, #fff8f6, #ffffff); } /* 11. Karty na jaśniejszych wyspach — bardzo subtelne podbicie jakości. */ /*.bg-mockup-premium .trust-card, .bg-mockup-premium .path-card, .bg-mockup-premium .bleed-card, .bg-mockup-premium .review-card__body { box-shadow: 0 1px 2px rgba(15, 52, 58, 0.04), 0 18px 45px -34px rgba(15, 52, 58, 0.28); }*/ /* 12. Mobile: mniej efektów, większa czytelność, niższy koszt renderowania. */ @media (max-width: 767px) { .bg-mockup-premium .bg-layer { background-image: radial-gradient(circle at 0% 4%, rgba(31, 166, 168, 0.11), transparent 24rem), radial-gradient(circle at 105% 14%, rgba(246, 107, 91, 0.09), transparent 22rem), radial-gradient(circle at 50% 75%, rgba(31, 166, 168, 0.055), transparent 28rem); } .bg-mockup-premium .bg-layer::after { opacity: 0.18; background-size: 34px 34px; } .bg-mockup-premium .hero::before, .bg-mockup-premium .hero::after { display: none; } .bg-mockup-premium #dlaczego-oksfordzik, .bg-mockup-premium #opinie, .bg-mockup-premium [aria-labelledby="opinie-title"] { padding-block: 3rem; } }