/* ====== WSPÓLNE ====== */ .baba-str__ph { display:block; width:100%; height:100%; background:linear-gradient(135deg,#efe7f3,#e7d9ef); } .baba-str__pill { display:inline-block; align-self:flex-start; padding:4px 11px; border-radius:12px; background:#2e17e6; color:#fff; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1.2; } .baba-str__meta { display:flex; flex-wrap:wrap; gap:14px; color:#8a8a9c; font-size:10px; } .baba-str__metaitem { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } .baba-str__metaitem svg, .baba-str__metaitem i { width:1em; height:1em; font-size:12px; } .baba-str__metalabel { font-weight:600; text-transform:uppercase; letter-spacing:.03em; } .baba-str__arrow { font-size:13px; line-height:1; } @media (max-width:767px) { .baba-str--hide-mobile { display:none !important; } } .baba-reads__all { display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border:1px solid #e0dbec; border-radius:30px; color:#5b5b70; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; white-space:nowrap; transition:background-color .2s ease; } .baba-reads__all:hover { background:#f4f1fb; } /* ====== TO SIĘ CZYTA ====== */ .baba-reads { width:100%; } .baba-reads__head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; } .baba-reads__title { position:relative; margin:0; padding-bottom:12px; color:#12121c; font-size:26px; font-weight:800; line-height:1.2; } .baba-reads__title::after { content:""; position:absolute; left:0; bottom:0; width:42px; height:4px; border-radius:4px; background:#2e17e6; } .baba-reads__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .baba-reads__card { display:flex; gap:16px; padding:var(--reads-pad-t,14px) var(--reads-pad-r,14px) var(--reads-pad-b,14px) var(--reads-pad-l,14px); border-radius:12px; background:#fff; border:1px solid #ece7f2; transition:transform .2s ease, box-shadow .2s ease; } .baba-reads__card--h { align-items:stretch; } .baba-reads__card--v { flex-direction:column; } .baba-reads__card:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(30,10,60,.08); } .baba-reads__thumb { flex:0 0 auto; border-radius:8px; overflow:hidden; background:#efe7f3; line-height:0; display:block; } .baba-reads__card--h .baba-reads__thumb { width:96px; align-self:stretch; min-height:132px; } .baba-reads__card--v .baba-reads__thumb { width:100%; height:170px; } /* okładka do krawędzi karty – wychodzi poza padding, róg przycina karta */ .baba-reads__card--bleed { overflow:hidden; } .baba-reads__card--h.baba-reads__card--bleed .baba-reads__thumb { margin:calc(var(--reads-pad-t,0px) * -1) 0 calc(var(--reads-pad-b,0px) * -1) calc(var(--reads-pad-l,0px) * -1); } .baba-reads__card--v.baba-reads__card--bleed .baba-reads__thumb { margin:calc(var(--reads-pad-t,0px) * -1) calc(var(--reads-pad-r,0px) * -1) 0 calc(var(--reads-pad-l,0px) * -1); } .baba-reads__thumb img { width:100%; height:100%; object-fit:cover; display:block; } .baba-reads__body { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; } .baba-reads__titlelink { text-decoration:none; } .baba-reads__ctitle { color:#12121c; font-size:14px; font-weight:700; line-height:1.3; transition:color .2s ease; display:block; } .baba-reads__subtitle { color:#6a6580; font-size:12px; font-weight:400; line-height:1.4; } .baba-reads__pill { display:inline-block; align-self:flex-start; padding:2px 9px; border-radius:10px; background:#efeafe; color:#5b3ee6; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.3; } /* Meta i lista sklepów: flex z zawijaniem, a NIE siatka o dwóch ścieżkach. Ścieżka siatki nie schodzi poniżej `min-content` zawartości, więc przy wąskiej karcie obie nie zwężały się, tylko WYSTAWAŁY poza kartę — a ta ma `overflow: hidden` od kadrowania miniatury i ucinała to, co wystaje („Bonito" kończyło się na „Bon"). Zmierzone przed poprawką: meta wystawała 6,3 px przy oknie 1280, 8,8 przy 900, 74,8 przy 768 i 80 w suwaku na telefonie. To nie była usterka telefonu, tylko każdej wąskiej karty. O liczbie kolumn decyduje teraz SZEROKOŚĆ KARTY, nie okna: podstawa `50%` trzyma najwyżej dwie w rzędzie, a `min-width` zwija je do jednej, gdy dwie przestają się mieścić. `min(…, 100%)` pilnuje, żeby sama podpora nie zaczęła wystawać w naprawdę wąskiej karcie. */ .baba-reads__meta { display:flex; flex-wrap:wrap; gap:6px 14px; } .baba-reads__meta > * { flex:1 1 calc(50% - 7px); min-width:min(96px, 100%); } .baba-reads__buy { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:4px; } .baba-reads__buy-label { color:#8a8a9c; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; } /* Lista sklepów zawija się jak zwykły tekst: każda nazwa zajmuje tyle, ile potrzebuje, i przechodzi do następnego wiersza, gdy się nie mieści. Sztywne pół szerokości na pozycję dawało w wąskiej karcie kolumny po 46 px i łamało nazwy w środku wyrazu („Empi/k", „Bonit/o"). */ .baba-reads__buy-list { display:flex; flex-wrap:wrap; gap:8px 12px; } .baba-reads__buy-list > * { flex:0 1 auto; min-width:0; } /* Pozycja meta ma `white-space: nowrap` — sensowne przy „8 lekcji" w szerokiej karcie, zabójcze przy „Czas czytania: 1 godz. 4 min." w stu pikselach. Zwolnienie z zakazu obowiązuje TYLKO wewnątrz tej karty; tam, gdzie miejsca starczy, napis i tak zostaje w jednej linii i nic się nie zmienia. */ .baba-reads__meta .baba-str__metaitem { min-width:0; white-space:normal; overflow-wrap:break-word; } /* `break-word`, a nie `anywhere`: łamiemy WYRAZ dopiero wtedy, gdy sam jeden nie mieści się w wierszu — inaczej przeglądarka tnie w dowolnym miejscu i wychodzi „Empi/k". */ .baba-reads__buy-link { min-width:0; overflow-wrap:break-word; } .baba-reads__buy-link { display:inline-flex; align-items:center; padding:0; background:transparent; color:#6a6580; font-size:11px; font-weight:600; text-decoration:none; transition:color .2s ease; } .baba-reads__buy-link:hover { color:#2e17e6; text-decoration:underline; } .baba-reads__buy-link--plain { color:#9a9aae; } .baba-reads__buy-us { display:inline-flex; align-items:center; padding:6px 14px; border-radius:8px; background:#12121c; color:#fff; font-size:11px; font-weight:700; text-decoration:none; transition:opacity .2s ease; } .baba-reads__buy-us:hover { opacity:.88; } .baba-reads__buy-us--disabled { opacity:.4; pointer-events:none; } /* ====== KARTY KURSÓW ====== */ .baba-cc { width:100%; } .baba-cc__head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; } .baba-cc__title { position:relative; margin:0; padding-bottom:12px; color:#12121c; font-size:26px; font-weight:800; line-height:1.2; } .baba-cc__title::after { content:""; position:absolute; left:0; bottom:0; width:42px; height:4px; border-radius:4px; background:#2e17e6; } .baba-cc__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } .baba-cc__card { display:flex; flex-direction:column; background:#fff; border-radius:18px; box-shadow:0 12px 40px rgba(30,10,60,.08); overflow:hidden; } .baba-cc__body { display:flex; flex-direction:column; align-items:flex-start; padding:24px 22px 0; } .baba-cc__ctitle { margin:0 0 8px; color:#12121c; font-size:20px; font-weight:800; line-height:1.2; } .baba-cc__desc { margin:0 0 16px; color:#5b5b70; font-size:13px; line-height:1.5; } .baba-cc__stats-intro { margin:0 0 10px; color:#8a8a9c; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; } .baba-cc__stats { display:flex; gap:14px; margin-bottom:18px; } .baba-cc__stat { display:flex; flex-direction:column; align-items:center; gap:6px; } .baba-cc__digits { display:flex; gap:4px; } .baba-cc__digit { display:flex; align-items:center; justify-content:center; width:26px; height:34px; border-radius:6px; background:#f2eefb; color:#2e17e6; font-size:20px; font-weight:800; } .baba-cc__stat-label { color:#8a8a9c; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; } .baba-cc__btns { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; } .baba-cc__btn { display:inline-flex; align-items:center; justify-content:center; padding:9px 16px; border-radius:20px; font-size:11px; font-weight:700; text-decoration:none; transition:opacity .2s ease; } .baba-cc__btn:hover { opacity:.9; } .baba-cc__btn--1 { background:#7c3aed; color:#fff; } .baba-cc__btn--2 { background:#2e17e6; color:#fff; } .baba-cc__media { width:100%; height:150px; background-size:cover; background-position:center; margin-top:auto; } .baba-cc--center .baba-cc__body { align-items:center; text-align:center; } .baba-cc--center .baba-cc__stats { justify-content:center; } .baba-cc--center .baba-cc__btns { justify-content:center; } /* Zapis na listę w karcie. Selektory z typem elementu (0,2,1+), bo reset Hello Elementora maluje każdy button/input na hover i focus. */ .baba-cc__su { width:100%; margin-bottom:20px; } .baba-cc__su-row { display:flex; gap:10px; } .baba-cc input.baba-cc__email { flex:1 1 0; min-width:0; height:auto; margin:0; padding:9px 14px; border:1px solid #e0dbec; border-radius:20px; background:#fff; color:#12121c; font-family:inherit; font-size:12px; line-height:1.3; box-shadow:none; } .baba-cc input.baba-cc__email:focus { outline:2px solid #2e17e6; outline-offset:1px; border-color:#2e17e6; } .baba-cc button.baba-cc__btn { flex:0 0 auto; margin:0; border:0; font-family:inherit; line-height:1.3; cursor:pointer; box-shadow:none; } .baba-cc button.baba-cc__btn:hover, .baba-cc button.baba-cc__btn:focus { background-color:#2e17e6; color:#fff; opacity:.9; } .baba-cc button.baba-cc__btn:focus-visible { outline:2px solid #12121c; outline-offset:2px; } .baba-cc button.baba-cc__btn:disabled { opacity:.6; cursor:wait; } .baba-cc label.baba-cc__consent { display:flex; align-items:flex-start; gap:8px; margin:10px 0 0; color:#5b5b70; font-size:11px; font-weight:400; line-height:1.4; text-align:left; cursor:pointer; } .baba-cc label.baba-cc__consent input { flex:0 0 14px; width:14px; height:14px; margin:1px 0 0; accent-color:#2e17e6; } .baba-cc__consent a { color:#2e17e6; text-decoration:underline; } .baba-cc__req { color:#b3261e; } .baba-cc__msg { margin:6px 0 0; font-size:12px; line-height:1.4; } .baba-cc__msg:empty { display:none; } .baba-cc__msg.is-ok { color:#1d7a4c; } .baba-cc__msg.is-err { color:#b3261e; } .baba-cc--center .baba-cc__su-row, .baba-cc--center label.baba-cc__consent { justify-content:center; } /* ====== DLACZEGO WARTO ====== */ .baba-why { display:flex; align-items:center; gap:48px; width:100%; } .baba-why--right { flex-direction:row-reverse; } .baba-why__media { flex:0 0 44%; } .baba-why__collage { position:relative; } .baba-why__img { display:block; width:100%; border-radius:16px; object-fit:cover; } .baba-why__img--main { aspect-ratio:4/3; } .baba-why__img--2, .baba-why__img--3 { position:absolute; width:42%; box-shadow:0 12px 30px rgba(0,0,0,.15); } .baba-why__img--2 { top:-18px; right:-14px; } .baba-why__img--3 { bottom:-18px; left:-14px; } .baba-why__badge { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; text-align:center; width:130px; height:130px; border-radius:50%; background:#c026a3; color:#fff; font-size:14px; font-weight:800; line-height:1.2; padding:10px; box-shadow:0 10px 26px rgba(150,20,120,.4); } .baba-why__body { flex:1 1 auto; min-width:0; } .baba-why__title { margin:0 0 14px; color:#12121c; font-size:28px; font-weight:800; line-height:1.2; } .baba-why__desc { margin:0 0 22px; color:#5b5b70; font-size:14px; line-height:1.6; } .baba-why__cols { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:26px; } .baba-why__coltitle { margin:0 0 12px; color:#12121c; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; } .baba-why__list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; } .baba-why__item { display:flex; align-items:flex-start; gap:8px; color:#5b5b70; font-size:13px; line-height:1.4; } .baba-why__item svg, .baba-why__item i { width:14px; height:14px; margin-top:2px; flex:0 0 auto; color:#7c3aed; } .baba-why__btn { display:inline-flex; align-items:center; gap:10px; padding:13px 26px; border-radius:30px; background:#12121c; color:#fff; font-size:12px; font-weight:700; letter-spacing:.05em; text-decoration:none; transition:opacity .2s ease; } .baba-why__btn:hover { opacity:.88; } .baba-why__btn svg { width:1em; height:1em; fill:#fff; } /* ====== SIĘGNIJ PO WIEDZĘ ====== */ .baba-su { position:relative; } .baba-su__banner { position:relative; border-radius:18px; background:#2e24d4; background-size:cover; background-position:center; overflow:visible; } .baba-su--clip .baba-su__banner { overflow:hidden; } .baba-su__banner::before { content:""; position:absolute; inset:0; background:transparent; } .baba-su__inner { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; padding:46px 46px; } .baba-su__body { width:100%; max-width:560px; } .baba-su__title { margin:0 0 12px; color:#fff; font-size:38px; font-weight:800; line-height:1.15; } .baba-su__desc { margin:0 0 20px; color:#fff; font-size:12px; font-weight:600; letter-spacing:.04em; line-height:1.6; text-transform:uppercase; } .baba-su__opts { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-bottom:20px; } .baba-su__opt { display:inline-flex; align-items:center; gap:8px; cursor:pointer; color:#fff; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.2; } .baba-su__opt input { position:absolute; width:1px; height:1px; opacity:0; } .baba-su__box { position:relative; flex:0 0 auto; display:inline-block; width:14px; height:14px; border-radius:3px; background:#fff; } .baba-su__opt input:checked + .baba-su__box::after { content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid #2e24d4; border-width:0 2px 2px 0; transform:rotate(45deg); } .baba-su__opt input:focus-visible + .baba-su__box { outline:2px solid #fff; outline-offset:2px; } .baba-su__form { display:flex; flex-direction:column; align-items:center; width:100%; } .baba-su__field { display:flex; align-items:stretch; width:100%; max-width:430px; border-radius:6px; background:#fff; overflow:hidden; } .baba-su__email { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; padding:13px 18px; font-size:12px; letter-spacing:.04em; color:#2b2b3a; } .baba-su__email::placeholder { text-transform:uppercase; } .baba-su__btn { flex:0 0 auto; border:0; cursor:pointer; padding:13px 22px; background:#ab23b1; color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; transition:background-color .2s ease; } .baba-su__btn:hover { background:#8e1a94; } .baba-su__consent { margin:12px 0 0; color:rgba(255,255,255,.75); font-size:11px; line-height:1.4; } .baba-su__person { position:absolute; right:0; bottom:-45px; z-index:3; line-height:0; pointer-events:none; } .baba-su__person img { display:block; width:auto; max-width:none; height:420px; } .elementor-widget-baba_signup, .elementor-widget-baba_signup .elementor-widget-container { overflow:visible; } .baba-su__deco { position:absolute; left:0; bottom:0; z-index:1; width:26%; line-height:0; pointer-events:none; } .baba-su__deco img { display:block; width:100%; height:auto; } .baba-su__cards { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:132%; z-index:4; line-height:0; pointer-events:none; } .baba-su__cards img { display:block; width:100%; height:auto; } .baba-su__media { flex:0 0 34%; align-self:flex-end; line-height:0; } .baba-su__media img { width:100%; height:auto; display:block; } /* ====== KIM JESTEM ====== */ .baba-ab { --baba-ab-col:34%; display:flex; align-items:flex-start; gap:50px; width:100%; } .baba-ab--left { flex-direction:row-reverse; } .baba-ab__body { flex:1 1 auto; min-width:0; } .baba-ab__col { flex:0 0 var(--baba-ab-col); min-width:0; } .baba-ab__title { position:relative; margin:0 0 18px; padding-bottom:12px; color:#12121c; font-size:26px; font-weight:800; line-height:1.2; } .baba-ab__title::after { content:""; position:absolute; left:0; bottom:0; width:120px; height:3px; border-radius:4px; background:#2e24d4; } .baba-ab__sign { display:block; width:260px; max-width:100%; height:auto; margin:0 0 18px; } .baba-ab__signtext { font-size:34px; font-weight:400; font-style:italic; color:#2e24d4; line-height:1.2; } /* Wyrównanie do lewej, nie justowanie. Akapit ma na pulpicie 1102 px, czyli ~110 znaków w wierszu — justowanie robiło z tego rzeki bieli między słowami, bo polskie słowa są długie, a przenoszenia nie ma. Ograniczenie długości wiersza dokłada drugą połowę: 70 znaków to górna granica, przy której oko trafia z końca wiersza na początek następnego. */ .baba-ab__bio { margin:0 0 14px; max-width:70ch; color:#6a6580; font-size:12px; line-height:1.75; text-align:left; } .baba-ab__bio p { margin:0 0 10px; } .baba-ab__bio p:last-child { margin-bottom:0; } .baba-ab__bio a { color:#2e24d4; text-decoration:none; } .baba-ab__bio a:hover { text-decoration:underline; } .baba-ab__more { display:inline-block; color:#12121c; font-size:12px; font-weight:700; text-decoration:none; } .baba-ab__more:hover { text-decoration:underline; } .baba-ab__postsbox { margin-top:28px; } .baba-ab__ptitle { margin:0 0 16px; color:#12121c; font-size:18px; font-weight:800; line-height:1.2; } .baba-ab__posts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .baba-ab__post { display:flex; align-items:center; gap:10px; padding:8px 10px 8px 8px; border-radius:8px; background:#fff; border:1px solid #ece7f2; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; } .baba-ab__post:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(30,10,60,.08); } .baba-ab__pthumb { flex:0 0 auto; display:block; width:48px; height:56px; border-radius:6px; overflow:hidden; background:#efe7f3; line-height:0; } .baba-ab__pthumb img { width:100%; height:100%; object-fit:cover; display:block; } .baba-ab__pbody { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; } .baba-ab__pname { color:#12121c; font-size:11px; font-weight:600; line-height:1.35; } .baba-ab__pcta { display:inline-block; padding:5px 10px; border-radius:4px; background:#ab23b1; color:#fff; font-size:9px; font-weight:700; letter-spacing:.04em; line-height:1.2; } .baba-ab__photo { --baba-ab-frame:18px; position:relative; line-height:0; } .baba-ab__photo img { position:relative; z-index:2; display:block; width:100%; height:auto; } .baba-ab__photo--frame::before { content:""; position:absolute; z-index:1; left:calc(var(--baba-ab-frame) * -1); top:calc(var(--baba-ab-frame) * -1); right:var(--baba-ab-frame); bottom:var(--baba-ab-frame); border:2px solid #2e24d4; } .baba-ab__photo--block::after { content:""; position:absolute; z-index:0; right:calc(var(--baba-ab-frame) * -1); bottom:calc(var(--baba-ab-frame) * -1); width:42%; height:30%; background:#ab23b1; } /* ====== RESPONSYWNOŚĆ ====== */ @media (max-width:1024px) { .baba-reads__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .baba-cc__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .baba-why { gap:28px; } .baba-why__title { font-size:23px; } .baba-su__title { font-size:24px; } } @media (max-width:767px) { .baba-reads__head, .baba-cc__head { flex-wrap:nowrap; margin-bottom:16px; } .baba-reads__title, .baba-cc__title { font-size:20px; } .baba-reads__all { flex:0 0 auto; padding:8px 12px; font-size:9px; letter-spacing:.05em; } .baba-reads__grid { grid-template-columns:1fr; gap:12px; } .baba-reads--m-carousel .baba-reads__grid { display:flex; flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; margin:0 -14px; padding:0 14px 4px; } .baba-reads--m-carousel .baba-reads__grid::-webkit-scrollbar { display:none; } .baba-reads--m-carousel .baba-reads__card { flex:0 0 82%; scroll-snap-align:start; } .baba-reads--m-left .baba-reads__card { flex-direction:row; align-items:stretch; } .baba-reads--m-left .baba-reads__thumb { width:96px; height:auto; align-self:stretch; min-height:132px; } .baba-reads--m-left .baba-reads__card--bleed .baba-reads__thumb { margin:calc(var(--reads-pad-t,0px) * -1) 0 calc(var(--reads-pad-b,0px) * -1) calc(var(--reads-pad-l,0px) * -1); } /* karty kursów – suwak */ .baba-cc--m-carousel .baba-cc__grid { display:flex; flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -14px; padding:0 14px 4px; } .baba-cc--m-carousel .baba-cc__grid::-webkit-scrollbar { display:none; } .baba-cc--m-carousel .baba-cc__card { flex:0 0 82%; scroll-snap-align:start; } .baba-cc__grid { grid-template-columns:1fr; } .baba-cc__ctitle { font-size:18px; } /* dlaczego warto – pion */ .baba-why, .baba-why--right { flex-direction:column; gap:34px; } .baba-why__media { flex-basis:auto; width:100%; } .baba-why__img--2, .baba-why__img--3 { position:static; width:100%; margin-top:12px; box-shadow:none; } .baba-why__badge { width:100px; height:100px; font-size:12px; } .baba-why__title { font-size:21px; } .baba-why__cols { grid-template-columns:1fr; gap:18px; } /* newsletter – pion */ .baba-su__inner { align-items:center; padding:28px 20px; } .baba-su__title { font-size:22px; } .baba-su__field { flex-wrap:wrap; max-width:none; border-radius:10px; } .baba-su__email { flex:1 1 100%; text-align:center; } .baba-su__btn { flex:1 1 100%; } .baba-su__person, .baba-su__deco, .baba-su__cards { display:none; } .baba-su__opts { gap:8px 14px; } .baba-su__media { flex-basis:auto; width:60%; align-self:center; } .baba-su__desc, .baba-su__consent { max-width:none; } .baba-ab { flex-direction:column; gap:26px; } .baba-ab--left { flex-direction:column; } .baba-ab__col { flex:1 1 auto; width:100%; } .baba-ab__title { font-size:22px; } .baba-ab__posts { grid-template-columns:1fr; } .baba-ab__photo { --baba-ab-frame:12px; } } /* ====== W MEDIACH ====== */ .baba-media { width:100%; } .baba-media__head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; } .baba-media__title { position:relative; margin:0; padding-bottom:12px; color:#12121c; font-size:26px; font-weight:800; line-height:1.2; } .baba-media__title::after { content:""; position:absolute; left:0; bottom:0; width:42px; height:4px; border-radius:4px; background:#2e17e6; } .baba-media__all { display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border:1px solid #e0dbec; border-radius:30px; color:#5b5b70; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; white-space:nowrap; transition:background-color .2s ease; } .baba-media__all:hover { background:#f4f1fb; } .baba-media__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .baba-media__card { display:flex; flex-direction:column; background:#fff; border:1px solid #ece7f6; border-radius:14px; overflow:hidden; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; } .baba-media__card:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(30,10,60,.12); } .baba-media__media { position:relative; display:block; height:180px; line-height:0; background:#efe7f3; overflow:hidden; } .baba-media__media img { width:100%; height:100%; object-fit:cover; display:block; } .baba-media__bar { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.3; } .baba-media__bar--overlay { position:absolute; left:0; right:0; padding:8px 14px; background:rgba(46,23,230,.92); color:#fff; } .baba-media__bar--bottom { bottom:0; } .baba-media__bar--top { top:0; } .baba-media__bar--above { align-self:flex-start; padding:6px 12px; border-radius:6px; background:rgba(46,23,230,.92); color:#fff; margin-bottom:10px; } .baba-media__body { display:flex; flex-direction:column; align-items:flex-start; padding:16px; } .baba-media__desc { color:#3a3a4a; font-size:13px; line-height:1.55; } .baba-media__desc p { margin:0 0 8px; } .baba-media__desc p:last-child { margin-bottom:0; } .baba-media__desc a { color:#2e17e6; text-decoration:underline; } @media (max-width:1024px) { .baba-media__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:767px) { .baba-media__head { flex-wrap:nowrap; margin-bottom:16px; } .baba-media__title { font-size:20px; } .baba-media__all { flex:0 0 auto; padding:8px 12px; font-size:9px; letter-spacing:.05em; } .baba-media--m-carousel .baba-media__grid { display:flex; flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -14px; padding:0 14px 4px; } .baba-media--m-carousel .baba-media__grid::-webkit-scrollbar { display:none; } .baba-media--m-carousel .baba-media__card { flex:0 0 78%; scroll-snap-align:start; } .baba-media__grid { grid-template-columns:1fr; } } /* „Czytaj dalej” jako przycisk (rozwijanie opisu w miejscu) */ button.baba-ab__more { border:0; background:none; padding:0; cursor:pointer; font:inherit; } /* Motyw Hello Elementor maluje KAŻDY