/* kancelaria-szczyrba.pl - tokeny. Jedyne miejsce z literałami: barwy, stopnie pisma, odstępy, czasy. Kontrasty w komentarzach przy barwach są zmierzone, nie deklarowane. */ /* ------------------------------------------------------------ KROJE --- */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/fonty/newsreader-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/fonty/newsreader-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonty/schibsted-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonty/schibsted-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; /* ---------------------------------------------------------- BARWY --- */ --papier: oklch(97.4% 0.008 80); /* #F9F6F1 tło strony */ --papier-2: oklch(94.6% 0.012 76); /* #F2ECE4 drugi plan, kadry */ --tusz: oklch(23% 0.020 252); /* #161E26 nagłówki 15,61:1 */ --tusz-2: oklch(42% 0.016 252); /* #474E56 tekst 7,82:1 */ --tusz-3: oklch(54% 0.014 252); /* #696F77 metadane 4,70:1 */ /* Noc - hero, płyta "krok po kroku", stopka. Kontrast wobec --noc. */ --noc: oklch(20% 0.028 254); /* #0D1723 */ --noc-2: oklch(26% 0.028 254); /* #1B2531 pola, powierzchnie */ --na-nocy: oklch(95% 0.006 80); /* #F1EEEA tekst 15,60:1 */ --na-nocy-2: oklch(76% 0.014 62); /* #B8AFA8 drugorzędny 8,36:1 */ /* Kreski. Włosowe są wyłącznie dekoracją i nigdy nie niosą informacji. */ --kreska: oklch(88% 0.010 78); /* #DBD7D0 na papierze 1,33:1 */ --kreska-mocna: oklch(62% 0.014 252); /* #80878F kontrolki 3,37:1 */ --kreska-noc: oklch(38% 0.022 254); /* #3A434E na nocy 1,80:1 */ /* Akcent ciepły. */ --akcent: oklch(50% 0.115 47); /* #974B21 miedź na papierze 5,83:1 */ --akcent-mocny: oklch(44% 0.115 45); /* #843910 hover 7,57:1 */ --piasek: oklch(72% 0.075 62); /* #C79A74 akcent na nocy 7,13:1 */ --piasek-2: oklch(80% 0.055 65); /* #D7B799 hover na nocy 9,56:1 */ /* Oznaczenia treści do podmiany. USUNĄĆ RAZEM Z KLASAMI .zaslepka/.notka w chwili wgrania prawdziwych tekstów. */ --zaslepka-tlo: oklch(50% 0.115 47 / 0.11); --zaslepka-kreska: oklch(50% 0.115 47 / 0.38); --zaslepka-tlo-noc: oklch(72% 0.075 62 / 0.15); --zaslepka-kreska-noc: oklch(72% 0.075 62 / 0.42); /* ----------------------------------------------------- TYPOGRAFIA --- */ --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif; --font-body: "Schibsted Grotesk", ui-sans-serif, "Segoe UI", system-ui, sans-serif; --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: 1rem; --t-md: 1.0625rem; --t-lg: 1.1875rem; --t-xl: clamp(1.375rem, 0.7vw + 1.2rem, 1.75rem); --t-2xl: clamp(1.625rem, 1.5vw + 1.25rem, 2.375rem); --t-3xl: clamp(2rem, 2.4vw + 1.35rem, 3.25rem); --t-teza: clamp(2.25rem, 1.1rem + 4.9vw, 5rem); /* 36px @320 -> 80px @1280 */ --t-woda: clamp(2.5rem, 1rem + 6vw, 6rem); /* zdanie w stopce */ --tr-etykieta: 0.18em; /* -------------------------------------------------------- ODSTĘPY --- */ --s-3xs: 0.25rem; --s-2xs: 0.5rem; --s-xs: 0.75rem; --s-sm: 1rem; --s-md: 1.5rem; --s-lg: 2rem; --s-xl: 3rem; --s-2xl: 4.5rem; --s-3xl: 7rem; --pas-duzy: clamp(4rem, 8vw, 8.5rem); --pas-sredni: clamp(2.75rem, 5vw, 5.5rem); --pas-maly: clamp(1.75rem, 3vw, 3rem); /* Na telefonie te same pasy zjadają pół ekranu i między sekcjami robi się pusto. */ /* Ile portret schodzi poniżej ciemnego pasa hero. */ --zejscie-portretu: clamp(1.5rem, 5vw, 5.5rem); /* Oddech nad i pod paskiem faktów. */ --oddech-faktow: clamp(2.5rem, 5vw, 4.5rem); /* Ile spis specjalizacji wchodzi w ciemny nagłówek podstrony. */ --zejscie-indeksu: clamp(1.5rem, 4vw, 3.5rem); /* ---------------------------------------------------- KONSTRUKCJA --- */ --os: clamp(1.25rem, 5.5vw, 6.5rem); --maks: 84rem; --miara: 62ch; /* Rynna układu dwuszpaltowego (nagłówek w węższej szpalcie po lewej, treść w szerszej po prawej). */ --szpara: clamp(1.5rem, 4vw, 4.5rem); /* Wysokość monogramu w belce. */ --marka-znak: clamp(1.375rem, 4.5vw, 2.125rem); /* Oddech nad i pod zawartością belki. */ --belka-odstep: 1.5rem; /* Stała wysokość winiety w belce i w panelu. */ --marka-wys: 2.375rem; /* Promienie w trzech stopniach, nie jeden preset na wszystkim. */ --r-xs: 4px; --r-sm: 12px; --r-md: 28px; --r-kadr: 0 var(--r-md) var(--r-md) var(--r-md); --wlos: 1px; /* ----------------------------------------------------------- RUCH --- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-fast: cubic-bezier(0.4, 0, 0.2, 1); --dur-micro: 90ms; --dur-short: 180ms; --dur-long: 440ms; /* Jedyny cień w całym systemie. Głębia bierze się z tonu, nie z rozmycia. */ --cien-belka: 0 12px 32px -24px oklch(20% 0.028 254 / 0.7); /* Druk: czysta biel i czerń, bo na papierze liczy się tusz, nie nastrój. */ --druk-tlo: #fff; --druk-tusz: #000; } @media (max-width: 40rem) { :root { --pas-duzy: 3.25rem; --pas-sredni: 2rem; --pas-maly: 1.5rem; } }