/* ============================================================ PROTOTYP A — sekcja "Dla rodziców" (#rodzice) na kremie. Dokladane TYLKO w index-cream.html, po css/style.css. Reszta strony zostaje granatowa. ============================================================ */ /* TESTY: glebsze akcenty pod kremowe tlo (wiecej "wow" na jasnym) */ :root { --cream-mag: #AC2F92; } #rodzice { --cream: #E7DFCF; /* tlo sekcji (stonowany krem, jak na korkach) */ --cream-panel: #F0EADC; /* panel gwarancji */ --cream-card: #FAF6EC; /* karty zaufania (jasniejsze niz panel) */ --cream-line: #D4C8B0; --cream-ink: #121316; /* naglowki - niemal czarne */ --cream-text: #1B1B1D; --cream-soft: #565040; --cyan-dark: #0B8C9C; /* cyjan glebszy - wybija sie na kremie */ background: var(--cream); color: var(--cream-text); position: relative; } /* ornament molekularny po bokach (jak na korkach) */ #rodzice::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("../img/molecules-cream.svg"); background-size: 100% auto; background-repeat: repeat-y; background-position: center top; opacity: .5; } #rodzice > .container { position: relative; z-index: 1; } /* naglowek + lead + portret (widoczne po launchu) */ #rodzice .parents-head .eyebrow { color: var(--cream-mag); } #rodzice .parents-head h2 { color: var(--cream-ink); } #rodzice .instructor-lead { color: var(--cream-soft); } #rodzice .portrait-light { background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(94,139,126,.14), transparent 70%), var(--cream-panel); } /* panel gwarancji */ #rodzice .guarantees { background: var(--cream-panel); border-color: var(--cream-line); } #rodzice .guarantees-title { color: var(--cream-ink); } #rodzice .guarantees-title em { color: var(--cream-mag); } #rodzice .guarantees-title::after { background: var(--cyan-dark); } /* kolumny zaufania */ #rodzice .trust-col { background: var(--cream-card); border-color: var(--cream-line); } #rodzice .trust-col-label { color: var(--cyan-dark); } #rodzice .trust-q { color: var(--cream-ink); } #rodzice .trust-list li { color: var(--cream-soft); } #rodzice .trust-list li b { color: var(--cream-ink); } #rodzice .trust-list li.star::before { color: var(--cyan-dark); } /* kotwica cenowa */ #rodzice .price-anchor { color: var(--cream-soft); border-top-color: var(--cream-line); } #rodzice .price-anchor .pa-price { color: var(--ember); } /* notka prelaunchowa nad gwarancjami (znika po zdjeciu .prelaunch z ) */ #rodzice .guard-note { display: none; } body.prelaunch #rodzice .guard-note { display: block; text-align: center; max-width: 36rem; margin: -0.4rem auto 1.8rem; font-size: var(--text-sm); color: var(--cream-soft); } #rodzice .guard-note a { color: var(--cream-mag); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ Lead magnet "Mapa maturalna" (#mapa) na kremie ============================================================ */ #mapa { --cream: #E7DFCF; --cream-panel: #F0EADC; --cream-bubble: #F5F0E5; --cream-line: #D4C8B0; --cream-ink: #121316; --cream-text: #1B1B1D; --cream-soft: #565040; background: radial-gradient(ellipse 55% 80% at 82% 18%, rgba(224,138,60,.10), transparent 70%), var(--cream); border-block-color: var(--cream-line); color: var(--cream-text); position: relative; } #mapa::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("../img/molecules-cream-2.svg"); background-size: 100% auto; background-repeat: repeat-y; background-position: center top; opacity: .5; } #mapa > .container { position: relative; z-index: 1; } #mapa .eyebrow { color: var(--cream-mag); } #mapa .lm-text h2 { color: var(--cream-ink); } #mapa .lm-text p { color: var(--cream-soft); } #mapa .lm-form { background: var(--cream-panel); border-color: var(--cream-line); } #mapa .lm-label { color: var(--cream-soft); } #mapa .lm-row input { background: var(--cream-bubble); border-color: var(--cream-line); color: var(--cream-ink); } #mapa .lm-row input::placeholder { color: var(--cream-soft); } #mapa .lm-note { color: var(--cream-soft); } #mapa .lm-tease { color: var(--ember); } /* pływająca karta mapy zaczepiona o prawy górny róg formularza */ #mapa .lm-form { position: relative; } #mapa .lm-visual { --card-w: clamp(10rem, 7rem + 6vw, 14rem); position: absolute; /* karta konczy sie ~45px pod gorna krawedzia formularza - zawsze nad przyciskiem */ top: calc(var(--card-w) * -1.07 + 45px); /* na szerokich ekranach wisi daleko w prawo; na weszych dosuwa sie do krawedzi okna (16px bufora: rotacja w animacji poszerza bounding box obrazka o ~13px) */ right: max(-9rem, (1140px - 100vw) / 2 + 16px); width: var(--card-w); pointer-events: none; z-index: 2; } #mapa .lm-visual img { width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(18, 19, 22, 0.30)) drop-shadow(0 3px 7px rgba(18, 19, 22, 0.18)); animation: lm-float 6.5s ease-in-out infinite alternate; will-change: transform; } @keyframes lm-float { from { transform: translateY(-6px) rotate(4deg); } to { transform: translateY(8px) rotate(1.5deg); } } @media (prefers-reduced-motion: reduce) { #mapa .lm-visual img { animation: none; transform: rotate(3deg); } } @media (max-width: 820px) { #mapa .lm-visual { --card-w: 7.5rem; right: -0.5rem; top: calc(var(--card-w) * -1.07 + 40px); } } /* ============================================================ Sekcja "Prowadzący" (#prowadzacy) na kremie (inline tlo zdjete w index-cream.html) ============================================================ */ #prowadzacy { --cream: #E7DFCF; --cream-panel: #F0EADC; --cream-line: #D4C8B0; --cream-ink: #121316; --cream-text: #1B1B1D; --cream-soft: #565040; background: var(--cream); color: var(--cream-text); position: relative; } #prowadzacy::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("../img/molecules-cream-3.svg"); background-size: 100% auto; background-repeat: repeat-y; background-position: center top; opacity: .5; } #prowadzacy > .container { position: relative; z-index: 1; } #prowadzacy .eyebrow { color: var(--cream-mag); } #prowadzacy h2 { color: var(--cream-ink); } #prowadzacy .instructor-lead { color: var(--cream-soft); } #prowadzacy .creds li { color: var(--cream-text); } #prowadzacy .cred-link { text-decoration-color: var(--cream-mag); } #prowadzacy .portrait { background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(196,101,184,.14), transparent 70%), var(--cream-panel); border-color: var(--cream-line); } #prowadzacy .instructor-more a { color: var(--cream-mag); border-bottom-color: var(--cream-mag); } /* ============================================================ Opinie — sekcja usunięta z HTML do czasu prawdziwych cytatów ============================================================ */ /* ============================================================ Pasek zaufania (statystyki 100+/40+/21000+) na kremie ============================================================ */ .trust { --cream: #E7DFCF; --cream-line: #D4C8B0; --cream-ink: #121316; --cream-soft: #565040; background: var(--cream); border-block-color: var(--cream-line); } .trust .trust-num { color: var(--cream-ink); } .trust .trust-num .unit { color: var(--cream-mag); } .trust .trust-item + .trust-item { border-left-color: var(--cream-line); } .trust .trust-label { color: var(--cream-soft); } /* ============================================================ Notka prelaunch pod CTA w hero (znika po zdjeciu .prelaunch z ) ============================================================ */ .hero-note { display: none; } body.prelaunch .hero-note { display: block; margin-top: 1.3rem; font-size: var(--text-sm); color: var(--slate); } .hero-note strong { color: var(--ivory); font-weight: 600; } .hero-note a { color: var(--slate); text-decoration: underline; text-underline-offset: 3px; } .hero-note a:hover { color: var(--ivory); } /* ============================================================ Beat bolu (#znasz-to) - KREM, przedluzenie paska zaufania. Jedyne miejsce bolu na stronie, wiec ma wlasna sygnature: cytat lekko przekrecony (odreczna notatka) + podkreslenie pedzlem w gradiencie progow (jak os na /o-mnie/). ============================================================ */ #znasz-to { --cream: #E7DFCF; --cream-line: #D4C8B0; --cream-ink: #121316; --cream-text: #1B1B1D; --cream-soft: #565040; background: var(--cream); color: var(--cream-text); text-align: center; padding-block: clamp(3.2rem, 2.6rem + 3vw, 5rem); position: relative; } #znasz-to::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("../img/molecules-cream-2.svg"); background-size: 100% auto; background-repeat: repeat-y; background-position: center top; opacity: .5; transform: scaleX(-1); } #znasz-to > .container { position: relative; z-index: 1; } /* zwarta scenka: dialog uczniow (gora-lewo), pod nim dymek Adriana dosuniety do plakatu (ogonek celuje w bok, w plakat), plakat po prawej rozpiety na oba rzedy - kotwiczy kompozycje */ #znasz-to .pain-dialog { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: clamp(1.5rem, 3vw, 2.75rem); row-gap: 1.4rem; align-items: center; max-width: none; margin-inline: auto; text-align: left; } #znasz-to .pain-quote { grid-column: 1; grid-row: 1; align-self: end; justify-self: end; width: fit-content; } #znasz-to .pain-photo { grid-column: 2; grid-row: 1 / 3; align-self: center; } #znasz-to .pain-quote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.6rem, 2.15rem + 2.1vw, 3.575rem); line-height: 1.3; color: var(--cream-ink); transform: rotate(-1.6deg); } #znasz-to .pain-quote em { color: var(--cream-mag); } #znasz-to .pain-line { display: block; white-space: nowrap; } #znasz-to .pain-line + .pain-line { margin-top: .4rem; padding-left: 1.1rem; } /* podkreslenie pedzlem: gradient progow 50->70->90 */ #znasz-to .pain-quote::after { content: ""; display: block; width: 100%; height: 5px; margin-top: .9rem; border-radius: 999px; background: linear-gradient(90deg, #E08A3C, #D9486B, #C465B8); transform: rotate(.8deg); } /* odpowiedz "ode mnie" - dymek wypowiedzi (Work Sans), ogonek w bok do plakatu */ #znasz-to .pain-reply { position: relative; grid-column: 1; grid-row: 2; align-self: start; justify-self: end; max-width: 42rem; margin: 0; padding: 1.05rem 1.35rem; background: #F0EADC; border: 1px solid #D4C8B0; border-radius: 14px; box-shadow: 0 14px 30px -18px rgba(20, 16, 12, 0.35); font-size: 1rem; line-height: 1.6; color: var(--cream-ink); } #znasz-to .pain-reply::before { content: ""; position: absolute; top: 38%; right: -8px; width: 15px; height: 15px; background: #F0EADC; border-right: 1px solid #D4C8B0; border-top: 1px solid #D4C8B0; transform: rotate(45deg); } #znasz-to .pain-reply strong { color: var(--cream-mag); font-weight: 600; } #znasz-to .pain-reply-author { display: block; margin-top: 0.55rem; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-mag); } /* plakat Adriana - rama jak frame-photo w gwarancjach */ #znasz-to .pain-photo { margin: 0; justify-self: end; width: clamp(240px, 24.5vw, 331px); border-radius: 14px; overflow: hidden; border: 5px solid #F0EADC; box-shadow: 0 24px 48px -20px rgba(20, 16, 12, 0.45); transform: rotate(3.5deg); will-change: transform; } #znasz-to .pain-photo img { display: block; width: 100%; height: auto; } /* wniosek: naglowek podkreslony "dlugopisem" + reszta pod spodem */ #znasz-to .pain-body-head { margin: 2.6rem auto 0; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); font-weight: 600; color: var(--cream-ink); } /* podkreslenie pociagnieciem pedzla (raster od Codexa, gradient progow) */ #znasz-to .pen-underline { display: inline-block; padding-bottom: 1.15rem; background-image: url("../img/brush-underline.png"); background-repeat: no-repeat; background-position: bottom center; background-size: 100% 22px; } #znasz-to .pain-body { max-width: none; margin: 0.8rem auto 0; font-size: var(--text-lg); color: var(--cream-soft); } @media (max-width: 980px) { #znasz-to .pain-line { white-space: normal; } } @media (max-width: 800px) { #znasz-to .pain-dialog { grid-template-columns: 1fr; grid-template-rows: none; gap: 1.5rem; } #znasz-to .pain-quote { grid-column: auto; grid-row: auto; } #znasz-to .pain-photo { grid-column: auto; grid-row: auto; order: 2; justify-self: center; width: 262px; margin: .4rem 0 0; } #znasz-to .pain-reply { grid-column: auto; grid-row: auto; order: 3; justify-self: center; margin: .9rem 0 0; } #znasz-to .pain-reply::before { right: 50%; top: -8px; margin-right: -8px; border: none; border-left: 1px solid #D4C8B0; border-top: 1px solid #D4C8B0; } #znasz-to .pain-body { text-align: left; } } @media (prefers-reduced-motion: reduce) { #znasz-to .pain-quote { transform: none; } #znasz-to .pain-quote::after { transform: none; } } /* ============================================================ Opinie z korepetycji na glownej (dowod spoleczny, #opinie) ============================================================ */ #opinie .kp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; max-width: 56rem; margin-inline: auto; } .kp-msg { margin: 0; background: var(--ink-panel); border: 1px solid var(--ink-line); border-radius: 16px; padding: 1.1rem 1.2rem 0.9rem; } .kp-bubble { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--ink-line); border-radius: 4px 14px 14px 14px; padding: 0.6rem 0.85rem; color: var(--ivory); width: fit-content; } .kp-bubble + .kp-bubble { margin-top: 0.5rem; } .kp-msg figcaption { margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--ink-line); color: var(--slate); font-size: var(--text-sm); } .kp-more { text-align: center; margin-top: 1.7rem; } .kp-more a { color: var(--slate); text-decoration: underline; text-underline-offset: 3px; } .kp-more a:hover { color: var(--ivory); } @media (max-width: 720px) { #opinie .kp-grid { grid-template-columns: 1fr; } } /* ============================================================ Tytul karty medialnej jako link (kanal YT) ============================================================ */ .media-card-title .media-card-link { color: inherit; text-decoration: none; } .media-card-title .media-card-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ Naglowek "Metody" rozciagniety na szerokosc kafelkow (klasa section-head-center tylko centruje; tu zdejmujemy limit 38rem) ============================================================ */ #metoda .section-head { max-width: none; } /* ============================================================ Kafelki progow: stala zacheta "zobacz zakres" w stopce karty (tag bez strzalki po lewej, strzalka wedruje do CTA po prawej) ============================================================ */ .prog-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .prog-cta { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); white-space: nowrap; transition: color 200ms var(--ease), transform 200ms var(--ease); } .prog:hover .prog-cta, .prog:focus-visible .prog-cta { color: var(--pc); transform: translateX(3px); } /* ============================================================ Zblizenie Metoda <-> "Zanim zaplacisz" + #sprawdz ciemniejszy (rozbicie ciemnego "bloba") ============================================================ */ #metoda { padding-bottom: 3rem; } #sprawdz { padding-top: 3rem; background: var(--ink-deep); } /* ============================================================ Jasne molekuly po bokach CIEMNYCH sekcji ============================================================ */ #metoda, #sprawdz, #cennik, #faq { position: relative; z-index: 0; } #metoda::before, #sprawdz::before, #cennik::before, #faq::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: 100% auto; background-repeat: repeat-y; background-position: center top; opacity: .5; } /* inny uklad czasteczek na kazdej ciemnej sekcji (lustro/offset dla wariacji) */ #metoda::before { background-image: url("../img/molecules-dark.svg"); } #sprawdz::before { background-image: url("../img/molecules-dark-2.svg"); } #cennik::before { background-image: url("../img/molecules-dark-3.svg"); } #faq::before { background-image: url("../img/molecules-dark-2.svg"); transform: scaleX(-1); background-position: center 70px; } /* ============================================================ TESTY: kadr zdjecia w "Prowadzacy" (pokaz gore/czolo) ============================================================ */ #prowadzacy .portrait img { object-position: center 22%; } /* ============================================================ TESTY: nowy uklad poczatku "Gwarancji" tekst na srodku -> ramka -> zdjecie (mniejsze, pod katem) wjezdzajace na ramke przy scrollu ============================================================ */ /* 50/70 w progi-sub - te same kolory co hero, 2pt wieksze */ .progi-sub .lvl { font-size: calc(1em + 2px); font-weight: 700; } .progi-sub .lvl-50 { color: var(--prog-50); } .progi-sub .lvl-70 { color: var(--prog-70); } .parents-intro { max-width: 40rem; margin: 0 auto; text-align: center; } .parents-intro h2 { margin-top: .3rem; } .parents-intro .instructor-lead { max-width: 34rem; margin-inline: auto; } /* panel gwarancji = "ramka"; zdjecie nachodzi na nia z prawej, PRZED nia (z-index), ruch sterowany scrollem w JS (transform inline) - patrz skrypt w index-cream-testy.html */ #rodzice .guarantees { position: relative; } #rodzice .frame-photo { position: absolute; z-index: 3; margin: 0; top: clamp(-188px, -13vw, -140px); right: clamp(-6px, 1vw, 18px); width: clamp(216px, 23vw, 277px); border-radius: 16px; overflow: hidden; border: 5px solid var(--cream-panel); box-shadow: 0 28px 58px -22px rgba(20,16,12,.5); transform: rotate(-3deg); will-change: transform; } #rodzice .frame-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5.52; object-fit: cover; object-position: center 18%; } #rodzice .frame-photo figcaption { position: absolute; left: .55rem; bottom: .5rem; font-family: var(--font-mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ivory); background: rgba(11,17,32,.62); backdrop-filter: blur(3px); padding: .2rem .45rem; border-radius: 6px; } /* mobile: zdjecie jako wysrodkowany blok nad gwarancjami (bez nachodzenia/scroll-scrub) */ @media (max-width: 760px) { #rodzice .frame-photo { position: relative; top: auto; right: auto; display: block; width: min(220px, 68%); margin: 0 auto 1.6rem; transform: rotate(-3deg) !important; } }