/* Wygląd własnych klas smyrcu.net. Kolory i typografia komponentów Bootstrapa siedzą w Theme/theme.scss — tutaj jest to, czego tokenami się nie da: układ stron, kamienne ramki i powierzchnie z tekstur. Tekstury (skóra, piasek, kamień) generuje js/h3-textures.js do zmiennych --h3-* na . Każde ich użycie ma kolor zastępczy, więc bez JS-a strona zostaje tym samym motywem, tylko na płaskich barwach. */ body { background: var(--h3-leather, none) 0 0 / 512px 512px, #4a3018; } /* Ani Cinzel, ani Figtree nie mają u Google subsetu cyrylickiego — wygenerowany arkusz ma wyłącznie `latin` i `latin-ext` — więc na /ru i /uk glify cyrylickie bierze dalsza pozycja stosu. Gdyby treść tych wersji szła rodziną marki, w jednym zdaniu stałyby obok siebie kapitaliki Cinzela na wtrąceniach łacińskich („HotA", „AI value") i szeryfowy zastępnik (Georgia albo to, co poda system) na cyrylicy — dwa różne rysunki pisma w jednej linii. Rodzina do czytania trzyma oba pisma bliżej siebie, więc treść tych dwóch języków zostaje przy niej — razem z wagą 400, bo 500 w bazie jest odpowiedzią na cienki rys Cinzela. Nagłówki biorą rodzinę z własnej reguły, nie z tej zmiennej — zostają w kroju marki tak samo jak wcześniej. Zapasowe `sans-serif` w var() jest na wypadek nieaktualnego theme.min.css (plik generowany, poza gitem): bez niego cała deklaracja byłaby nieważna i treść spadłaby do domyślnego szeryfowego kroju przeglądarki. */ :root:lang(ru), :root:lang(uk) { --bs-body-font-family: var(--h3-font-reading, sans-serif); --bs-body-font-weight: 400; } /* Gorset treści — ta sama szerokość dla paska nawigacji, stron i stopki. Wyłącznie longhandy: klasę noszą elementy z własnym paddingiem pionowym (stopka, pasek zgody), a skrót `padding` wyzerowałby im go, bo stoi w arkuszu niżej. */ .shell { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: 40px; padding-right: 40px; } .page { display: flex; flex-direction: column; min-height: 100vh; } .page__body { flex: 1 0 auto; padding-top: 24px; padding-bottom: 8px; } /* ── Kamień: wspólna ramka pergaminowych powierzchni ── Gdy tekstury nie ma, zostaje lita krawędź w kolorze z tokenów Bootstrapa. Krawędź zawsze longhandami: skrót `border` resetuje border-image do wartości początkowej, więc postawiony po tej regule zdjąłby kamień i zostawił gołą kreskę. */ .card, .modal-content, .hero--framed, .legal, .lightbox__content { border-image-source: var(--h3-frame, none); border-image-slice: 18; border-image-repeat: round; box-shadow: 0 0 0 1px #241f17, 0 6px 18px rgba(20, 8, 5, .45); } .card, .modal-content, .legal, .lightbox__content { background: var(--h3-sand, none) 0 0 / 340px 340px, #c9b789; } /* ── Nawigacja ── */ /* HxNavbar dostaje własną klasę gorsetu, więc reguła Bootstrapa dla .container-fluid go nie obejmuje. */ .navbar > .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } /* Nazwa serwisu, kody języków i nazwy systemów są zawsze łacińskie, więc trzymają rodzinę marki także tam, gdzie treść z niej rezygnuje (patrz wyjątek dla ru/uk wyżej). */ .brand, .lang__link, .platform__name { font-family: var(--h3-font-brand, serif); } .brand { font-weight: 700; font-size: 17px; color: #f7efdd; text-shadow: 0 1px 2px rgba(40, 26, 12, .6); } .brand__accent { color: #f2c25a; } .brand__muted { color: #dccfb6; font-weight: 500; } .lang { display: flex; flex-wrap: wrap; } .lang__link { padding: 5px 11px; border: 1px solid #8f7c5c; border-left-width: 0; font-size: 12.5px; font-weight: 600; color: #f7efdd; background: rgba(32, 21, 10, .45); text-shadow: 0 1px 2px rgba(40, 26, 12, .6); } .lang__link:first-child { border-left-width: 1px; border-radius: 8px 0 0 8px; } .lang__link:last-child { border-radius: 0 8px 8px 0; } .lang__link:hover, .lang__link:focus-visible { color: #ffffff; background: rgba(32, 21, 10, .7); } .lang__link[aria-current="page"] { background: #4a3009; color: #f7efdd; border-color: #4a3009; } /* ── Nagłówki stron ── */ .hero { position: relative; padding: 48px 0 40px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; } .hero--single { grid-template-columns: minmax(0, 1fr); padding: 56px 0 44px; } .hero__body { display: flex; flex-direction: column; gap: 18px; } .hero__kicker { font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #f2c25a; } .hero h1 { margin: 0; max-width: 20ch; color: #f7efdd; text-shadow: 0 2px 4px rgba(40, 26, 12, .6); } .hero__lead { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.65; color: #dccfb6; text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } /* $primary (#4a3009) w theme.scss jest dobrany pod kontrast na piasku kart (biel na nim 11,6:1), nie na skórze hero — ciemny brąz na ciemnej skórze (#4a3018) prawie znika. Ten sam przycisk (HxButton .btn-primary) na piasku karty zostaje bez zmian, nadpisujemy tylko zmienne Bootstrapa 5.3 w kontekście hero, wariantem złota z .hero__kicker/.brand__accent — przyciemnienie hover/active to mechaniczne -15%/-25% tego samego tokenu, nie nowy kolor. */ .hero__actions .btn-primary { --bs-btn-color: #211d17; --bs-btn-bg: #f2c25a; --bs-btn-border-color: #f2c25a; --bs-btn-hover-color: #211d17; --bs-btn-hover-bg: #ce9f45; --bs-btn-hover-border-color: #ce9f45; --bs-btn-active-color: #211d17; --bs-btn-active-bg: #b78b38; --bs-btn-active-border-color: #b78b38; --bs-btn-focus-shadow-rgb: 242, 194, 90; --bs-btn-disabled-color: #211d17; --bs-btn-disabled-bg: #f2c25a; --bs-btn-disabled-border-color: #f2c25a; } /* Metadane wydania stoją raz na karcie (piasek), a raz w nagłówku strony (skóra) — ten sam kolor nie zadziała na obu, więc na skórze bierzemy jasny wariant. */ .hero .meta { color: #dccfb6; text-shadow: 0 1px 2px rgba(40, 26, 12, .6); } /* Baner huba: pergaminowa tablica w kamiennej ramce. Przyciemnienie idzie przez całą wysokość, więc tablica czyta się jako skończony element także bez grafiki — a gdy owner ją poda, wystarczy podmienić .hero__art i podpis nadal będzie miał na czym leżeć. */ /* Wysokość jest minimalna, nie sztywna: przy wąskim ekranie albo powiększonej czcionce podpis ma urosnąć razem z banerem, a nie zostać przycięty przez overflow. */ .hero--framed { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative; min-height: 280px; padding: 0; margin-top: 10px; overflow: hidden; border-width: 8px; border-style: solid; border-color: #5c5448; border-radius: 2px; } .hero__art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--h3-sand, none) 0 0 / 340px 340px, #c9b789; } /* Dwa przyciemnienia: pierwsze stonowuje cały baner, drugie robi pas pod podpisem. Pas jedzie razem z tekstem, więc krem leży na ciemnym tle niezależnie od tego, na ile linii rozjedzie się nagłówek. */ .hero--framed::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 13, 6, .55), rgba(20, 13, 6, .3)); } /* Przejście zamknięte w górnym marginesie pasa: tekst zaczyna się dopiero tam, gdzie przyciemnienie jest już pełne, więc wtopienie nic nie kosztuje czytelności. */ .hero__caption { position: relative; padding: 36px 32px 28px; background: linear-gradient(to top, rgba(20, 13, 6, .86), rgba(20, 13, 6, .78) calc(100% - 32px), rgba(20, 13, 6, 0)); } .hero--framed h1 { margin: 0 0 6px; } .hero--framed .hero__lead { font-size: 16px; } /* ── Sekcje i karty ── */ .sections { display: flex; flex-direction: column; gap: 20px; } .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; } .card__kicker { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #4a3009; } /* Bez własnego rozmiaru i interlinii: to są „opisy" ze zgłoszenia, czyli dokładnie ten tekst, dla którego baza urosła do 16 px i 1,7 — sztywne 15 px trzymałoby je poza tą decyzją. */ .card-lead { margin: 0; color: #3a2f1e; text-wrap: pretty; } /* Karty polityki mają po kilka akapitów — bez tego zlewałyby się w jeden blok */ .card-lead + .card-lead { margin-top: 12px; } .card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; } /* 13,5 px, nie 12,5 px — i tak samo w każdym drobnym podpisie niżej (.sections th, .example__label, .platform__note/meta/badge, .shot figcaption, .cookie-table th): Cinzel ma niższą wysokość x, więc te same 12,5 px dawało realnie drobniejsze minuskuły niż w kroju, który zastępuje. Przełącznik języka zostaje przy 12,5 px — to dwuliterowe kody wersalikami, których wysokość x nie dotyczy. */ .meta { font-size: 13.5px; color: #403320; font-variant-numeric: tabular-nums; } .cta-primary { display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; border-radius: 8px; background: #4a3009; color: #f7efdd; font-size: 16px; font-weight: 600; text-decoration: none; } .cta-primary:hover, .cta-primary:focus-visible { background: #352206; color: #ffffff; text-decoration: none; } /* Wariant drugorzędny: ten sam kształt i wysokość co .cta-primary (obrys 1 px zjada po pikselu z paddingu), ale bez wypełnienia — obok głównego wezwania nie ma z nim konkurować. Ubiera zarówno (hub, hero), jak i