/* ========================================================= DYSKOGRAFIA — ciemna strona z siatką okładek Ładowane tylko tam, gdzie ma klasę .msm-dyskografia-strona. ========================================================= */ /* Wartości domyślne pasują do JASNEJ strony — tego samego skrótu używa strona główna w sekcji „Najnowsze Albumy". Ciemna Dyskografia nadpisuje je niżej. */ .msm-dyskografia { --d-tlo: transparent; --d-kreska: #e3e3e0; --d-tekst: #111111; --d-cichy: #6b6b72; --d-cichszy: #90909a; --d-cien: rgba(0,0,0,.16); --d-cien-mocny: rgba(0,0,0,.24); --d-akcent: var(--gcid-primary-color, #94c444); --d-display: "Salo-Aldo", Oswald, Helvetica, Arial, sans-serif; --d-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } body.msm-dyskografia-strona .msm-dyskografia { --d-kreska: #1c1c20; --d-tekst: #f4f4f2; --d-cichy: #8e8e96; --d-cichszy: #63636b; --d-cien: rgba(0,0,0,.5); --d-cien-mocny: rgba(0,0,0,.62); } body.msm-dyskografia-strona { background: #0b0b0d !important; color: #f4f4f2; } /* Kolor wprost, nie przez zmienną: zmienne siatki są zadeklarowane na .msm-dyskografia, więc tutaj byłyby nieznane i tło zostawało białe. WAŻNE: sekcje i wiersze zaciemniamy TYLKO wewnątrz #et-main-area. Nagłówek witryny też jest zbudowany z sekcji i wiersza Divi — bez tego zawężenia dostawał czarne tło i kładł się ciemnym pasem na zdjęciu zespołu. */ body.msm-dyskografia-strona #page-container, body.msm-dyskografia-strona #et-main-area, body.msm-dyskografia-strona #main-content { background-color: #0b0b0d; } body.msm-dyskografia-strona #et-main-area .et_pb_section, body.msm-dyskografia-strona #et-main-area .et_pb_row { background-color: #0b0b0d; } /* Nagłówek i stopka zawsze przezroczyste. Nagłówek ma przepuszczać zdjęcie, a w stopce siedzi menu pełnoekranowe — zaciemnianie jego wiersza kładło na czarnej zapadni prostokąt w innym odcieniu. */ body.msm-dyskografia-strona .et-l--header .et_pb_section, body.msm-dyskografia-strona .et-l--header .et_pb_row, body.msm-dyskografia-strona .et-l--header .et_builder_inner_content, body.msm-dyskografia-strona .et-l--footer .et_pb_row, body.msm-dyskografia-strona .et-l--footer .et_builder_inner_content { background-color: transparent !important; } /* ---------- ciemny nagłówek witryny ---------- Strona dyskografii dzieli szablon ze stroną główną, więc nie można przepiąć nagłówka w Kreatorze — odtwarzamy ciemny wariant tutaj. */ body.msm-dyskografia-strona #page-container #smart-header { background-color: transparent !important; box-shadow: none !important; } body.msm-dyskografia-strona #page-container #smart-header.header-filled { background-color: #000 !important; box-shadow: 0 4px 20px rgba(255,255,255,.15) !important; } /* Podtytuł logo ma w treści , więc samo pokolorowanie nagłówka h2 nie wystarcza — trzeba sięgnąć do spanów w środku. */ /* Selektory muszą być dłuższe niż reguła z CSS menu, która na jasnych stronach ustawia logo na ciemne przez ".et_pb_text_inner .ms-logo-line span" — inaczej sam div robi się biały, a tekst w środku zostaje czarny. */ body.msm-dyskografia-strona #page-container #smart-header .et_pb_text_0_tb_header, body.msm-dyskografia-strona #page-container #smart-header .et_pb_text_0_tb_header .et_pb_text_inner .ms-logo-line, body.msm-dyskografia-strona #page-container #smart-header .et_pb_text_0_tb_header .et_pb_text_inner .ms-logo-line span, body.msm-dyskografia-strona #page-container #smart-header .et_pb_text_0_tb_header .et_pb_text_inner h2, body.msm-dyskografia-strona #page-container #smart-header .et_pb_text_0_tb_header .et_pb_text_inner h2 span, body.msm-dyskografia-strona #page-container #smart-header .et_pb_text_0_tb_header .et_pb_text_inner span { color: #ffffff !important; } body.msm-dyskografia-strona #page-container #smart-header #open-fullscreen-menu .et_pb_text_inner { color: #ffffff; } /* ---------- nagłówki sekcji (moduły Divi) ---------- Mają w ustawieniach ciemny kolor tekstu, niewidoczny na czerni, i domyślne 30px, przy których podział strony był ledwo czytelny. Nadajemy im skalę i krój z karty albumu, żeby sekcje czytały się jako wyraźne rozdziały. */ body.msm-dyskografia-strona .et_pb_heading .et_pb_module_header, body.msm-dyskografia-strona .et_pb_heading h1, body.msm-dyskografia-strona .et_pb_heading h2, body.msm-dyskografia-strona .et_pb_heading h3 { font-family: "Salo-Aldo", Oswald, Helvetica, Arial, sans-serif !important; font-weight: 600 !important; text-transform: uppercase !important; font-size: clamp(27px, 3.6vw, 44px) !important; line-height: 1.02 !important; letter-spacing: .01em !important; color: #f4f4f2 !important; margin: 0 !important; padding-bottom: 6px !important; } /* Tylko treść strony. Bez zawężenia reguła łapała także moduł tekstowy przycisku "///" w nagłówku, przez co środkowa kreska (rysowana tłem akapitu) miała inny odcień niż dwie boczne. */ body.msm-dyskografia-strona #et-main-area .et_pb_text, body.msm-dyskografia-strona #et-main-area .et_pb_text p { color: #8e8e96; } /* ---------- siatka ---------- */ .msm-dyskografia { margin: 0 0 6px; } .msm-dysk-licznik { font-family: var(--d-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--d-cichszy); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--d-kreska); font-variant-numeric: tabular-nums; } .msm-dysk-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: clamp(18px, 2.4vw, 30px) clamp(14px, 1.8vw, 22px); } @media (max-width: 480px) { .msm-dysk-siatka { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); } } .msm-dysk-kafel { display: block; text-decoration: none; color: inherit; } .msm-dysk-art { position: relative; aspect-ratio: 1; border-radius: 3px; overflow: hidden; background: rgba(127,127,135,.12); box-shadow: 0 10px 26px var(--d-cien); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; } .msm-dysk-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .msm-dysk-kafel:hover .msm-dysk-art, .msm-dysk-kafel:focus-visible .msm-dysk-art { transform: translateY(-6px); box-shadow: 0 18px 38px var(--d-cien-mocny); } /* Rok na okładce — pojawia się dopiero przy najechaniu, żeby siatka pozostała spokojna, a informacja była pod ręką. */ .msm-dysk-rok { position: absolute; left: 8px; bottom: 8px; font-family: var(--d-mono); font-size: 11px; letter-spacing: .06em; color: #fff; background: rgba(10,10,12,.72); padding: 3px 7px; border-radius: 3px; opacity: 0; transform: translateY(4px); transition: opacity .22s ease, transform .22s ease; font-variant-numeric: tabular-nums; } .msm-dysk-kafel:hover .msm-dysk-rok, .msm-dysk-kafel:focus-visible .msm-dysk-rok { opacity: 1; transform: none; } .msm-dysk-tyt { font-family: var(--d-display); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: 14.5px; line-height: 1.22; margin: 12px 0 3px; color: var(--d-tekst); transition: color .2s; } .msm-dysk-kafel:hover .msm-dysk-tyt, .msm-dysk-kafel:focus-visible .msm-dysk-tyt { color: var(--d-akcent); } .msm-dysk-wyk { font-size: 12.5px; line-height: 1.35; color: var(--d-cichy); } .msm-dysk-wyd { font-size: 11.5px; line-height: 1.35; color: var(--d-cichszy); margin-top: 2px; } body.msm-dyskografia-strona :focus-visible { outline: 2px solid var(--d-akcent); outline-offset: 3px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { .msm-dysk-art, .msm-dysk-rok, .msm-dysk-tyt { transition-duration: .01ms !important; } } /* ---------- przyciski skrótu do sekcji ---------- */ .msm-dysk-nawigacja { display: flex; flex-wrap: wrap; gap: 9px; max-width: 1120px; margin: 0 auto; padding: clamp(120px, 13vw, 160px) 20px clamp(22px, 3vw, 34px); } .msm-dysk-guzik { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1px solid #26262b; background: rgba(255,255,255,.035); font-family: "Salo-Aldo", Oswald, Helvetica, Arial, sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #8e8e96; text-decoration: none; transition: color .18s, border-color .18s, background-color .18s; } .msm-dysk-guzik:hover, .msm-dysk-guzik:focus-visible { color: #f4f4f2; border-color: #3a3a42; background: rgba(255,255,255,.08); } .msm-dysk-guzik.msm-biezacy { color: #0b0b0d; background: var(--gcid-primary-color, #94c444); border-color: var(--gcid-primary-color, #94c444); } /* Nagłówek witryny jest przyklejony, więc skok do sekcji musi zostawić mu miejsce. */ body.msm-dyskografia-strona .et_pb_section[id^="sekcja-"] { scroll-margin-top: 130px; } body.msm-dyskografia-strona { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { body.msm-dyskografia-strona { scroll-behavior: auto; } } /* Nawigacja przejmuje górny odstęp, więc pierwsza sekcja go już nie potrzebuje. */ body.msm-dyskografia-strona .msm-dysk-nawigacja + .et_pb_section { padding-top: 0 !important; } /* ---------- zajawka na stronie głównej: jeden rząd okładek ---------- */ /* Pierwszy wiersz zachowuje naturalną wysokość, kolejne mają zero i są przycięte. "grid-template-rows: auto" jest tu konieczne — bez niego "grid-auto-rows: 0" zeruje także pierwszy wiersz i znika cała siatka. */ .msm-dysk-jeden-rzad .msm-dysk-siatka { grid-template-rows: auto; grid-auto-rows: 0; overflow: hidden; row-gap: 0; } /* ---------- strona zespołu ---------- */ /* Wariant bez zdjęcia: spokojny tytuł, tak jak sekcje Dyskografii. */ .msm-zespol-naglowek { position: relative; max-width: 1120px; margin: 0 auto; padding: clamp(140px, 15vw, 190px) 20px clamp(24px, 3.2vw, 40px); } .msm-powrot-dysk { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; font-size: 12.5px; letter-spacing: .04em; text-decoration: none; color: #63636b; transition: color .18s; } .msm-powrot-dysk:hover, .msm-powrot-dysk:focus-visible { color: #f4f4f2; } .msm-powrot-dysk span { transition: transform .2s ease; } .msm-powrot-dysk:hover span { transform: translateX(-3px); } /* Ta sama skala dla nazw zespołów i dla tytułu na banerze Dyskografii — baner stoi poza .msm-zespol, więc trzeba wymienić go osobno. */ .msm-zespol h1.msm-zespol-nazwa, body.msm-dyskografia-strona .msm-dysk-baner h1.msm-zespol-nazwa { font-family: "Salo-Aldo", Oswald, Helvetica, Arial, sans-serif; font-weight: 600; text-transform: uppercase; font-size: clamp(34px, 6.4vw, 78px); line-height: .95; letter-spacing: .005em; color: #f4f4f2; margin: 0; padding: 0; text-wrap: balance; } /* ---------- wariant ze zdjęciem: baner na pełną szerokość ---------- Fotografia sięga krawędzi ekranu i pod nagłówek witryny, a nazwa zespołu leży na niej, u dołu. Przyciemnienie od dołu zapewnia czytelność tekstu niezależnie od tego, jak jasne jest zdjęcie. */ .msm-zespol-z-banerem .msm-zespol-naglowek { max-width: none; padding: 0; min-height: clamp(340px, 52vh, 560px); display: flex; align-items: flex-end; } /* Zdjęcie ma sięgać samej góry i wchodzić pod przezroczysty nagłówek witryny — inaczej zostaje nad nim pasek pustego tła i baner przestaje być pełnoekranowy. */ body.msm-strona-zespolu #page-container #et-main-area { padding-top: 0 !important; } body.msm-strona-zespolu .msm-zespol-z-banerem .msm-zespol-naglowek { padding-top: clamp(120px, 13vw, 150px); min-height: clamp(420px, 60vh, 640px); } .msm-zespol-foto { position: absolute; inset: 0; overflow: hidden; } .msm-zespol-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; } /* Dwie warstwy: pionowe przejście do tła strony oraz lekkie przyciemnienie lewej krawędzi, żeby tekst trzymał kontrast także na jasnych zdjęciach. */ .msm-zespol-zaslona { position: absolute; inset: 0; background: linear-gradient(to top, #0b0b0d 0%, rgba(11,11,13,.82) 22%, rgba(11,11,13,.25) 55%, rgba(11,11,13,.35) 100%), linear-gradient(to right, rgba(11,11,13,.55) 0%, transparent 55%); } .msm-zespol-z-banerem .msm-zespol-tresc { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px clamp(26px, 3.6vw, 46px); } .msm-zespol-z-banerem .msm-powrot-dysk { color: rgba(255,255,255,.72); } .msm-zespol-z-banerem .msm-powrot-dysk:hover, .msm-zespol-z-banerem .msm-powrot-dysk:focus-visible { color: #fff; } .msm-zespol-z-banerem h1.msm-zespol-nazwa { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.45); } /* ---------- treść pod nagłówkiem ---------- */ .msm-zespol-plyty { max-width: 1120px; margin: 0 auto; padding: clamp(22px, 3vw, 38px) 20px clamp(40px, 6vw, 80px); } .msm-zespol-opis p { max-width: 60ch; font-size: 15.5px; line-height: 1.7; color: #c9c9c5; margin: 0 0 1.05em; } .msm-zespol-opis p:last-child { margin-bottom: 0; } .msm-zespol-opis + .msm-dyskografia { margin-top: clamp(24px, 3vw, 40px); } /* ---------- baner na stronie Dyskografii ---------- Korzysta z tych samych reguł co baner zespołu; różni się tym, że stoi w treści strony, a nie w osobnym szablonie. */ body.msm-dyskografia-strona .msm-dysk-baner { position: relative; max-width: none; padding: 0; padding-top: clamp(120px, 13vw, 150px); min-height: clamp(400px, 54vh, 580px); display: flex; align-items: flex-end; margin-bottom: clamp(8px, 1.5vw, 18px); } /* Zdjęcie ma sięgać samej góry, więc znosimy górny odstęp obszaru treści. */ body.msm-dysk-z-banerem #page-container #et-main-area { padding-top: 0 !important; } body.msm-dyskografia-strona .msm-dysk-baner .msm-zespol-tresc { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px clamp(26px, 3.6vw, 46px); } body.msm-dyskografia-strona .msm-dysk-baner h1.msm-zespol-nazwa { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.45); } /* Przy banerze przyciski sekcji nie potrzebują już własnego górnego odstępu. */ body.msm-dyskografia-strona .msm-dysk-baner + .msm-dysk-nawigacja, body.msm-dyskografia-strona .msm-dysk-baner ~ .msm-dysk-nawigacja { padding-top: clamp(18px, 2.4vw, 28px); }