/* ========================================================================= * G4U — TOKENY DESIGNU * * JEDYNE źródło prawdy o kolorach, typografii, rytmie i wymiarach. * Każdy komponent motywu czyta wyłącznie te zmienne. Żaden plik CSS w tym * motywie nie ma prawa zawierać dosłownego HEX-a, rozmiaru w px ani nazwy * fontu — jeśli czegoś brakuje, dokładamy token tutaj. * * ŹRÓDŁO WARTOŚCI * Motyw ThemeREX Assembly, skórka `default`, schemat kolorów `indigo_dark` * (aktywny w `theme_mods_assembly-child`), plik * `assembly/skins/default/skin-setup.php` oraz wygenerowany * `assembly/skins/default/css/__custom.css`. * * CZEGO TU CELOWO NIE MA * Globalny kit Elementora (post 15) to nietknięte ustawienia fabryczne * (#6EC1E4, Roboto). Żaden widget na stronach oddziałów i wydarzeń się do * niego nie odwołuje. Oparcie motywu na kicie dałoby domyślny Elementor, * a nie tę stronę — dlatego jest pominięty. * ========================================================================= */ :root { /* --- KOLORY: powierzchnia ciemna (domyślna dla witryny) -------------- * Witryna jest ciemna. Strony oddziałów wstawiają na to jasne „wyspy" * (patrz .g4u-surface--light poniżej) — tak działa dzisiejszy układ. */ --g4u-bg: #08090C; --g4u-bg-alt: #0E0F13; /* bloki alternatywne, sidebar */ --g4u-bg-alt-hover: #22252F; --g4u-bg-extra: #1C1E26; /* submenu, dropdowny, bloki wyróżnione */ --g4u-bg-extra-hover: #303442; --g4u-border: #2B2F3E; --g4u-border-hover: #3B4051; --g4u-text: #C9CED3; --g4u-text-muted: #8E9399; --g4u-heading: #FFFFFF; /* Akcent główny — kolor odnośników i przycisków */ --g4u-accent: #505BF2; --g4u-accent-hover: #3742E0; /* Akcent 2 — czerwień (ostrzeżenia, wyprzedane bilety) */ --g4u-accent-2: #FF4220; --g4u-accent-2-hover: #FB2600; /* Akcent 3 — żółć (wyróżnienia, liczniki) */ --g4u-accent-3: #FFBE15; --g4u-accent-3-hover: #F5AC00; --g4u-on-accent: #FFFFFF; /* tekst na tle akcentu */ /* Pola formularzy. Motyw ma tu błąd (`#transparent`), więc poprawnie. */ --g4u-input-bg: transparent; --g4u-input-border: #2B2F3E; --g4u-input-border-hover: #3B4051; --g4u-input-text: #C9CED3; --g4u-input-text-focus:#FFFFFF; /* --- KOLORY: przezroczystości używane w cieniach i nakładkach ------- */ --g4u-accent-a20: rgba(80, 91, 242, 0.2); --g4u-bg-a70: rgba(8, 9, 12, 0.7); /* Przygaszenie zdjęcia pod białym tekstem (pas hero strony „Wydarzenia"). */ --g4u-scrim: rgba(8, 9, 12, 0.55); --g4u-heading-a05: rgba(255, 255, 255, 0.05); /* --- TYPOGRAFIA: rodziny ------------------------------------------- * Montserrat i DM Sans są na licencji OFL — można je hostować lokalnie. * * UWAGA LICENCYJNA: motyw Assembly używa do przycisków, menu i logo * fontu `halyard-display` z Adobe Typekit (projekt xog3vbp), związanego * licencją z konkretną domeną. Na ośmiu subdomenach wymagałby rozszerzenia * licencji. Dlatego interfejs jedzie na Montserracie — i jest to * jednocześnie WIERNIEJSZE obecnym podstronom: każdy przycisk na stronach * oddziałów i wydarzeń ma w Elementorze wymuszone * `font-family: Montserrat; font-weight: 600`. */ --g4u-font-body: "DM Sans", system-ui, -apple-system, sans-serif; --g4u-font-heading: "Montserrat", system-ui, sans-serif; --g4u-font-ui: "Montserrat", system-ui, sans-serif; /* --- TYPOGRAFIA: grubości ------------------------------------------ */ --g4u-weight-body: 400; --g4u-weight-medium: 500; --g4u-weight-strong: 600; /* h3–h6, przyciski */ --g4u-weight-bold: 700; /* h1, h2 */ /* --- TYPOGRAFIA: skala --------------------------------------------- * Desktop w `em` względem `--g4u-root-size`, dokładnie jak w motywie. * Progi responsywne niżej podmieniają je na piksele — też jak motyw. */ --g4u-root-size: 17px; --g4u-h1-size: 3.353em; --g4u-h1-lh: 1em; --g4u-h2-size: 2.765em; --g4u-h2-lh: 1.021em; --g4u-h3-size: 2.059em; --g4u-h3-lh: 1.029em; --g4u-h4-size: 1.647em; --g4u-h4-lh: 1.036em; --g4u-h5-size: 1.412em; --g4u-h5-lh: 1.083em; --g4u-h6-size: 1.118em; --g4u-h6-lh: 1.263em; --g4u-text-size: 1rem; --g4u-text-lh: 1.68em; --g4u-meta-size: 14px; --g4u-meta-lh: 1.5em; --g4u-tracking-heading: 0px; /* Marginesy nagłówków — motyw prowadzi rytm pionowy właśnie nimi */ --g4u-h1-mt: 1.04em; --g4u-h1-mb: 0.46em; --g4u-h2-mt: 0.67em; --g4u-h2-mb: 0.56em; --g4u-h3-mt: 0.94em; --g4u-h3-mb: 0.72em; --g4u-h4-mt: 1.15em; --g4u-h4-mb: 0.83em; --g4u-h5-mt: 1.30em; --g4u-h5-mb: 0.84em; --g4u-h6-mt: 1.75em; --g4u-h6-mb: 1.10em; --g4u-p-mb: 1.7em; /* --- UKŁAD ---------------------------------------------------------- */ --g4u-container: 1290px; /* = page_width motywu = container_width kitu */ --g4u-container-fullwide: 1920px; --g4u-container-pad: clamp(24px, 6vw, 100px); /* Kafelek wydarzenia w katalogu (strona „Wydarzenia"). Wartości zmierzone w skórce Assembly, blok `.sc_events_default`: dzień 1.944em/500, tytuł 1.333em/1.2, zdjęcie na 170 px, wiersze rozdzielone linią co 1.7em. */ --g4u-event-card-day: 1.944em; --g4u-event-card-title: 1.333em; --g4u-event-card-price: 1.333em; --g4u-event-card-thumb: 170px; --g4u-event-card-gap: 1.7em; --g4u-event-card-ratio: 890 / 664; /* = assembly-thumb-square */ /* Wysokość pasa hero na stronie „Wydarzenia" — plansza slidera na centrali ma proporcję 16:9, ale pas rośnie z treścią, więc to minimum, nie kadr. */ --g4u-page-hero-min-h: clamp(320px, 42vw, 520px); /* Wysokość pasa obrazu na stronie wydarzenia. Na centrali pas ma 400 px — tu jest to sufit, nie kadr: obraz mieści się w nim w całości. */ --g4u-event-hero-max-h: clamp(220px, 40vw, 560px); /* Gniazdo logotypu partnera w pasie „Zaufali nam". Logotypy przychodzą w każdych proporcjach — szeroki wordmark, kwadratowy sygnet, wysoki herb — więc pas trzyma STAŁE gniazdo, a `object-fit: contain` wpisuje w nie każdy plik. Ograniczanie samej wysokości dawało pas, w którym szeroki logotyp dominował, a wysoki zwężał się do kilkunastu pikseli. */ --g4u-partner-logo-w: 140px; --g4u-partner-logo-h: 40px; /* Kadr zdjęcia osoby. Te same proporcje, co rozmiar `assembly-thumb-rectangle` (570 x 696) generowany dla zdjęć zespołu na obecnych stronach — dzięki temu siatka wygląda tak samo niezależnie od tego, który kadr trafi w . */ --g4u-portrait-ratio: 570 / 696; /* JEDEN pionowy rytm sekcji, płynny zamiast drabinki progów: linia → sec-gap → nagłówek sekcji → treść → sec-pad → następna linia. Te dwa tokeny są całym schematem odstępów między sekcjami. */ --g4u-sec-gap: clamp(40px, 5vw, 64px); --g4u-sec-pad: clamp(72px, 9vw, 128px); --g4u-gap: 30px; --g4u-radius: 0; /* motyw ma rad = 0px, bez wyjątków */ /* --- RYTM PIONOWY --------------------------------------------------- * Odstęp sekcji odwzorowuje `.page_content_wrap` motywu, a drabina * odstępów — klasy `.sc_height_*` z ThemeREX (używane na stronach * oddziałów jako `alter_height: huge`). */ --g4u-section-pt: 8.5rem; --g4u-section-pb: 8.5rem; --g4u-space-tiny: 10px; --g4u-space-small: 20px; --g4u-space-medium: 30px; --g4u-space-large: 54px; --g4u-space-huge: 8.6667rem; /* --- PRZYCISKI ------------------------------------------------------ */ --g4u-button-bg: var(--g4u-accent); --g4u-button-bg-hover: var(--g4u-accent-hover); --g4u-button-text: var(--g4u-on-accent); --g4u-button-font: var(--g4u-font-ui); --g4u-button-size: 14px; --g4u-button-lh: 21px; --g4u-button-weight: var(--g4u-weight-strong); --g4u-button-tracking: 1.5px; --g4u-button-transform: uppercase; --g4u-button-padding: 18px 40px; --g4u-button-padding-sm: 13px 26px; --g4u-button-padding-lg: 19px 56px; --g4u-button-radius: var(--g4u-radius); --g4u-button-shadow: 0 7px 25px var(--g4u-accent-a20); /* --- NAGŁÓWEK, MENU I PANEL -------------------------------------------- * Wartości odwzorowują nagłówek PRODUKCYJNYCH stron oddziałowych (od 0.12.4): * logo po lewej, menu po prawej, koszyk na końcu. Zmierzone przeglądarką na * `/oddzial/gdansk/`: pas 96 px wysokości, logo 140 x 51. */ --g4u-header-pad-y: 23px; --g4u-header-pad-x: 55px; --g4u-logo-height: 51px; /* zmierzone na produkcyjnym nagłówku oddziału: 140 x 51 */ --g4u-logo-height-sm: 40px; --g4u-menu-size: 17px; --g4u-menu-weight: var(--g4u-weight-medium); --g4u-menu-item-pad: 0.7em; --g4u-menu-color: var(--g4u-heading); --g4u-menu-hover: var(--g4u-accent); --g4u-mobile-menu-size: 19px; --g4u-mobile-menu-tracking: 0.6px; --g4u-panel-width: 388px; --g4u-panel-pad: 55px 35px 40px; --g4u-overlay: rgba(0, 0, 0, .5); --g4u-footer-copy: #96999F; --g4u-footer-copy-size: 16px; /* --- RUCH ------------------------------------------------------------ * Jeden easing dla całego motywu: wykładnicze wyjście — pewne dojście * bez odbicia. Czasy nazwane rolami. Dwie reguły, które trzymają całość: * wyjście jest krótsze niż wejście (powrót nie każe na siebie czekać), * a dosiadanie treści jest wolniejsze niż mikro-feedback. */ --g4u-transition: 200ms ease; /* uniwersalne przejścia kolorów; feedback ma być natychmiastowy */ --g4u-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --g4u-ease-pulse: cubic-bezier(0.45, 0, 0.55, 1); --g4u-dur-hover: 180ms; /* mikro-feedback: podświetlenie wiersza, ramki */ --g4u-dur-icon: 200ms; /* strzałki i drobne ikony */ --g4u-dur-exit: 200ms; /* wyjście warstw (menu, overlay) */ --g4u-dur-enter: 280ms; /* wejście warstw i kropki hero */ --g4u-dur-panel-exit: 220ms; /* wyjście panelu kontaktowego */ --g4u-dur-panel-enter: 320ms; /* wejście panelu kontaktowego */ --g4u-dur-line: 500ms; /* rysowanie włosowej linii sekcji */ --g4u-dur-reveal: 450ms; /* dosiadanie treści sekcji */ --g4u-dur-settle: 700ms; /* osiadanie obrazu hero */ /* DOLICZANIE LICZB — czas rośnie z LICZBĄ CYFR, nie jest stały. Powód: te same cztery sekundy, które dobrze niosą „10 000", na „8" wyglądają jak zawieszony licznik — jest tylko dziewięć wartości do pokazania, więc każda stoi pół sekundy. Liczba cyfr jest naturalną miarą tego, ile jest do policzenia: każda kolejna cyfra dokłada jeden krok, z sufitem na górze. 1 cyfra → 2000 ms 3 cyfry → 3000 ms 2 cyfry → 2500 ms 5 cyfr → 4000 ms (sufit) Czyta je motion.js. */ --g4u-dur-count-min: 2000ms; /* liczba jednocyfrowa */ --g4u-dur-count-step: 500ms; /* za każdą kolejną cyfrę */ --g4u-dur-count-max: 4000ms; /* sufit — od pięciu cyfr w górę */ --g4u-dur-pulse: 2.4s; /* puls kropek stanu */ --g4u-dur-drift: 22s; /* pełny obieg pasa partnerów (~55 px/s) */ --g4u-hero-step: 120ms; /* takt wejścia hero: kolejne wersy co pół/1,5/2,5 taktu */ /* Kurtyna pierwszego wejścia (raz na sesję; bramka w inc/assets.php) */ --g4u-intro-hold: 1100ms; /* ile kurtyna stoi, zanim ruszy w górę */ --g4u-intro-exit: 450ms; /* uniesienie kurtyny */ --g4u-intro-rule-w: clamp(64px, 10vw, 96px); /* długość linii w sygnecie */ --g4u-reveal-delay: 30ms; /* oddech treści po wyzwoleniu odsłony */ --g4u-stagger-step: 55ms; /* krok kaskady elementów listy */ --g4u-rise: 10px; /* dystans uniesienia dosiadającej treści */ --g4u-rise-sm: 6px; /* mniejszy dystans dla wierszy tekstowych */ /* Sprężyny próbkowane do linear() — fizyka bez biblioteki. Silnik ruchu nie jest wąskim gardłem (pomiar: 0 klatek >33 ms), więc charakter robi krzywa: spring ζ=0.80 (przestrzał +1,5%, dosiadanie treści), pop ζ=0.55 (przestrzał +12%, kropka hero). Fallback: --g4u-ease-out pod @supports w motion.css. */ --g4u-ease-spring: linear(0.0000, 0.0328 3.0%, 0.1130 6.1%, 0.2188 9.1%, 0.3345 12.1%, 0.4497 15.2%, 0.5573 18.2%, 0.6537 21.2%, 0.7368 24.2%, 0.8063 27.3%, 0.8629 30.3%, 0.9076 33.3%, 0.9421 36.4%, 0.9678 39.4%, 0.9863 42.4%, 0.9990 45.5%, 1.0073 48.5%, 1.0121 51.5%, 1.0145 54.5%, 1.0152 57.6%, 1.0147 60.6%, 1.0134 63.6%, 1.0118 66.7%, 1.0101 69.7%, 1.0083 72.7%, 1.0067 75.8%, 1.0052 78.8%, 1.0040 81.8%, 1.0029 84.8%, 1.0021 87.9%, 1.0014 90.9%, 1.0009 93.9%, 1.0005 97.0%, 1.0000 100.0%); --g4u-ease-pop: linear(0.0000, 0.0335 3.0%, 0.1201 6.1%, 0.2404 9.1%, 0.3781 12.1%, 0.5197 15.2%, 0.6554 18.2%, 0.7779 21.2%, 0.8828 24.2%, 0.9680 27.3%, 1.0332 30.3%, 1.0794 33.3%, 1.1085 36.4%, 1.1231 39.4%, 1.1261 42.4%, 1.1203 45.5%, 1.1083 48.5%, 1.0925 51.5%, 1.0748 54.5%, 1.0570 57.6%, 1.0402 60.6%, 1.0251 63.6%, 1.0124 66.7%, 1.0021 69.7%, 0.9944 72.7%, 0.9890 75.8%, 0.9858 78.8%, 0.9843 81.8%, 0.9841 84.8%, 0.9851 87.9%, 0.9867 90.9%, 0.9888 93.9%, 0.9910 97.0%, 1.0000 100.0%); /* Szerokość wygaszenia krawędzi pasa partnerów (nakładki gradientowe — tańsze w kompozycji niż maska na animowanym pasie). */ --g4u-fade-w: clamp(32px, 6vw, 72px); } /* ========================================================================= * POWIERZCHNIA JASNA * * Strony oddziałów to jasne wyspy na ciemnej witrynie: sekcje mają tło * #FFFFFF, nagłówki i tekst #000000, podpisy #666666. Strony wydarzeń * zostają ciemne. Zamiast dublować komponenty dla obu wariantów, * przedefiniowujemy te same tokeny — komponent pozostaje jeden. * * Użycie:
* ========================================================================= */ .g4u-surface--light { --g4u-bg: #FFFFFF; --g4u-bg-alt: #F5F5F5; --g4u-bg-alt-hover: #EDEDED; --g4u-bg-extra: #FFFFFF; --g4u-bg-extra-hover: #F5F5F5; --g4u-border: #E1E1DB; --g4u-border-hover: #C9C9C2; --g4u-text: #000000; --g4u-text-muted: #666666; --g4u-heading: #000000; --g4u-input-border: #E1E1DB; --g4u-input-text: #000000; --g4u-input-text-focus: #000000; } /* Powierzchnia ciemna — do jawnego przywrócenia wewnątrz jasnej sekcji. */ .g4u-surface--dark { --g4u-bg: #08090C; --g4u-bg-alt: #0E0F13; --g4u-bg-alt-hover: #22252F; --g4u-bg-extra: #1C1E26; --g4u-bg-extra-hover: #303442; --g4u-border: #2B2F3E; --g4u-border-hover: #3B4051; --g4u-text: #C9CED3; --g4u-text-muted: #8E9399; --g4u-heading: #FFFFFF; --g4u-input-border: #2B2F3E; --g4u-input-text: #C9CED3; --g4u-input-text-focus: #FFFFFF; } .g4u-surface { background-color: var(--g4u-bg); color: var(--g4u-text); } /* ========================================================================= * PROGI RESPONSYWNOŚCI * * Wartości identyczne z motywem (`assembly/css/_theme-vars.scss`): * xxl 1679 · xl 1439 · lg 1279 · md 1023 · sm 767 · sm_wp 600 · xs 479 * CSS nie pozwala użyć zmiennej w media query, więc liczby są tu wpisane * wprost. Zmieniając próg, zmień go także w DESIGN.md. * ========================================================================= */ @media (max-width: 1439px) { :root { --g4u-section-pt: 118px; --g4u-section-pb: 118px; --g4u-space-huge: 100px; --g4u-space-large: 55px; } } @media (max-width: 1279px) { :root { --g4u-root-size: 16px; --g4u-h1-size: 44px; --g4u-h2-size: 36px; --g4u-h3-size: 28px; --g4u-h4-size: 23px; --g4u-h5-size: 19px; --g4u-h6-size: 17px; --g4u-section-pt: 104px; --g4u-section-pb: 104px; --g4u-space-huge: 90px; --g4u-space-large: 70px; } } @media (max-width: 1023px) { :root { --g4u-h1-size: 38px; --g4u-h1-lh: 42px; --g4u-h2-size: 30px; --g4u-h2-lh: 35px; --g4u-h3-size: 25px; --g4u-h3-lh: 29px; --g4u-h4-size: 22px; --g4u-h4-lh: 27px; --g4u-h5-size: 19px; --g4u-h5-lh: 25px; --g4u-h6-size: 17px; --g4u-h6-lh: 22px; --g4u-text-lh: 1.58em; --g4u-section-pt: 88px; --g4u-section-pb: 88px; --g4u-space-huge: 80px; --g4u-space-large: 75px; } } @media (max-width: 767px) { :root { --g4u-h1-size: 32px; --g4u-h1-lh: 36px; --g4u-h2-size: 27px; --g4u-h2-lh: 30px; --g4u-h3-size: 23px; --g4u-h3-lh: 28px; --g4u-h4-size: 21px; --g4u-h4-lh: 25px; --g4u-h5-size: 19px; --g4u-h5-lh: 22px; --g4u-h6-size: 17px; --g4u-h6-lh: 20px; --g4u-section-pt: 68px; --g4u-section-pb: 68px; --g4u-space-huge: 60px; --g4u-space-large: 80px; } } @media (max-width: 479px) { :root { --g4u-h1-size: 27px; --g4u-h1-lh: 32px; --g4u-h2-size: 25px; --g4u-h2-lh: 28px; --g4u-h3-size: 22px; --g4u-h3-lh: 26px; --g4u-h4-size: 20px; --g4u-h4-lh: 24px; --g4u-h5-size: 18px; --g4u-h5-lh: 22px; --g4u-h6-size: 17px; --g4u-h6-lh: 20px; --g4u-section-pt: 56px; --g4u-section-pb: 56px; --g4u-space-huge: 54px; --g4u-tracking-heading: 0px; } }