/* ============================================================================= FAGERVIKA FISHING — TOKENY PROJEKTOWE ----------------------------------------------------------------------------- Paleta wyprowadzona WYŁĄCZNIE z logo i fotografii ośrodka. Turkus starego szablonu Joomla (#22A9E1) został świadomie odrzucony — decyzja z 2026-07-27. Źródła: 1. Logo (assets/logo/) — tło logo to głęboki morski teal #2E5E72 (pomiar ImageMagick: dominujący kolor 2423 px z 5000) 2. Zdjęcia ośrodka — analiza histogramów 5 kluczowych fotografii dała powtarzalny zakres #35556C – #377189 (fiord, morze, góry o zmierzchu). Mieści się w tej samej rodzinie co logo, więc cała warstwa chłodna to JEDNA skala: --fv-teal-*. 3. Drewno rorbu z rorbu_slider.jpg (#917F71) — jedyny ciepły akcent 4. Flaga norweska w logo — czerwień #BA0C2F 5. Zorza polarna ze slajdu hero — zieleń #3FBF9A (tylko dekoracja/status) Zasada kompozycji: jedna chłodna rodzina + jeden ciepły akcent + neutralny kamień. Bez drugiego koloru interaktywnego — dzięki temu paleta jest stonowana i nie konkuruje ze zdjęciami. Wartości surowe (--fv-*) i semantyczne (--color-*) są rozdzielone: surowych NIE używamy bezpośrednio w komponentach. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. PALETA SUROWA --------------------------------------------------------------------- */ /* Marka — morski teal z logo. Skala 50→900 */ --fv-teal-50: #EEF5F8; --fv-teal-100: #D6E6ED; --fv-teal-200: #ADCDDB; --fv-teal-300: #7FB0C4; --fv-teal-400: #548FA9; --fv-teal-500: #2E5E72; /* ← kolor logo, baza marki */ --fv-teal-600: #274F60; --fv-teal-700: #1F3F4D; --fv-teal-800: #16303B; --fv-teal-900: #0E2029; /* głęboki granat morski — tło dark mode */ --fv-teal-950: #081419; /* Fiord — odcień zmierzone bezpośrednio w fotografiach ośrodka. Ta sama rodzina co logo, tylko chłodniejszy i jaśniejszy. Używany do stanów hover, pierścienia focus i akcentów na ciemnym tle. */ --fv-fjord-400: #44809B; /* 4.14:1 na jasnym tle — pierścień focus */ --fv-fjord-500: #377189; /* ← pomiar z fotografii (fiord o zmierzchu) */ --fv-fjord-600: #2B5A6E; /* Szarość skandynawska — chłodny kamień, z fotografii wybrzeża */ --fv-stone-50: #F7F9FA; --fv-stone-100: #EDF1F3; --fv-stone-200: #DDE4E8; --fv-stone-300: #C2CDD4; --fv-stone-400: #A0B5BF; --fv-stone-500: #7E8F99; --fv-stone-600: #5F6E77; --fv-stone-700: #465158; --fv-stone-800: #2F373C; --fv-stone-900: #1A1F22; /* Ciepły akcent — drewno rorbu (pomiar z rorbu_slider.jpg: #917F71) */ --fv-amber-300: #E8C49A; --fv-amber-400: #D4A574; --fv-amber-500: #C08B4E; /* ← ciepły akcent: CTA, wyróżnienia */ --fv-amber-600: #966838; /* przyciemnione do 4.85:1 na białym (WCAG AA) */ --fv-amber-700: #7A542B; /* Zorza polarna — akcent dekoracyjny, sekcja „atrakcje” */ --fv-aurora-400: #5FD9B4; --fv-aurora-500: #3FBF9A; /* Czerwień flagi norweskiej — wyłącznie flaga / błędy */ --fv-flag-red: #BA0C2F; /* Statusy kalendarza dostępności. UWAGA: --fv-status-* to kolory TŁA kafelka. Na tle kładziemy --fv-status-*-ink (kontrast ≥4.9:1). Wariantów -text używamy, gdy status ma być samym tekstem/ikoną na białym tle (kontrast ≥4.9:1). Statusu nigdy nie komunikujemy wyłącznie kolorem — zawsze towarzyszy mu etykieta tekstowa i wzór (kreskowanie), zgodnie z WCAG 1.4.1. */ /* Kolory nazywają stan wprost — zielone znaczy wolne, czerwone zajęte, żółte wstępnie zarezerwowane, szare niedostępne. Wcześniej „wolne” było morską zielenią, a „opcja” tym samym brązem co przyciski CTA; jedno i drugie rozmywało odczyt siatki. */ --fv-status-free: #2E9E63; /* wolne — zieleń */ --fv-status-busy: #BA0C2F; /* zajęte — czerwień */ --fv-status-option: #8E5AA8; /* wstępna rezerwacja — śliwka; żółć poszła na Złoty Termin i nie może się dublować */ --fv-status-blocked: #8A99A3; /* niedostępne — szary */ /* Złoty Termin — oferta specjalna. Nie jest statusem blokującym: dzień zostaje wolny, złoto tylko go wyróżnia. */ --fv-status-golden: #E0A800; --fv-status-golden-strong: #B8860B; /* obwódka i gwiazdka */ --fv-status-free-ink: var(--fv-teal-900); /* 4.92:1 */ --fv-status-busy-ink: var(--fv-white); /* 6.60:1 */ --fv-status-option-ink: var(--fv-teal-900); /* 8.60:1 */ --fv-status-blocked-ink: var(--fv-teal-900); /* 5.70:1 */ --fv-status-golden-ink: var(--fv-teal-900); /* 7.77:1 na złocie */ --fv-status-free-text: #0F7A46; /* 5.39:1 na białym */ --fv-status-busy-text: #BA0C2F; /* 6.60:1 */ --fv-status-option-text: #7B4B94; /* 6.41:1 */ --fv-status-golden-text: #8A6508; /* 5.32:1 na białym */ --fv-status-blocked-text: #5F6E77; /* 5.27:1 */ --fv-white: #FFFFFF; --fv-black: #000000; /* --------------------------------------------------------------------- 2. TOKENY SEMANTYCZNE — JASNY MOTYW (domyślny) --------------------------------------------------------------------- */ --color-bg: var(--fv-stone-50); --color-bg-subtle: var(--fv-stone-100); --color-bg-inset: var(--fv-teal-50); --color-surface: var(--fv-white); --color-surface-raised: var(--fv-white); --color-text: var(--fv-teal-900); --color-text-muted: var(--fv-stone-600); --color-text-inverted: var(--fv-stone-50); --color-brand: var(--fv-teal-500); --color-brand-hover: var(--fv-teal-600); --color-brand-subtle: var(--fv-teal-100); --color-on-brand: var(--fv-white); /* CTA. Ciepły brąz drewna odstawał od reszty strony i kłócił się z żółtym „opcja” w kalendarzu — przyciski akcji są teraz głębokim granatem morskim z tej samej rodziny co marka. Ciemniejszy odcień niż --color-brand, więc „Zarezerwuj” dalej odróżnia się od zwykłych przycisków marki, ale nie wypada z palety. */ --color-accent: var(--fv-teal-800); /* 13.82:1 z białym tekstem */ --color-accent-hover: var(--fv-teal-900); --color-on-accent: var(--fv-white); --color-link: var(--fv-teal-600); --color-link-hover: var(--fv-fjord-600); --color-border: var(--fv-stone-200); --color-border-strong: var(--fv-stone-400); /* Pierścień :focus-visible. 4.14:1 wobec tła — z zapasem ponad próg WCAG 2.2 SC 1.4.11 (Non-text Contrast, 3:1). Rysujemy go jako outline 3px z offsetem, dodatkowo z białą/ciemną obwódką, żeby był widoczny także na zdjęciach. */ --color-focus: var(--fv-fjord-400); --focus-ring-width: 3px; --focus-ring-offset: 2px; /* Warstwa przyciemniająca pod tekstem na zdjęciach hero. Gwarantuje kontrast ≥4.5:1 dla białego tekstu (WCAG 2.2 AA). */ --color-scrim: color-mix(in oklab, var(--fv-teal-900) 62%, transparent); --color-scrim-strong: color-mix(in oklab, var(--fv-teal-950) 78%, transparent); /* Glassmorphism sticky nav */ --color-nav-glass: color-mix(in oklab, var(--fv-stone-50) 72%, transparent); --nav-blur: 14px; /* Wysokość przypiętego nagłówka. Po przewinięciu kurczy się do wersji kompaktowej. Trzymamy to w zmiennych, bo od tych wartości zależy też odstęp treści na podstronach bez hero i offset kotwic. */ --naglowek-h: 4.5rem; --naglowek-h-maly: 3.25rem; --logo-h: 2.25rem; --logo-h-maly: 1.75rem; /* --------------------------------------------------------------------- 3. TYPOGRAFIA --------------------------------------------------------------------- Stara strona: Open Sans + Raleway + Roboto (3 rodziny, wszystkie z CDN Google — blokujące renderowanie i problem RODO: transfer IP do Google). Nowa strona: 2 zmienne fonty hostowane lokalnie (assets/fonts/), woff2, preload, font-display: swap. --------------------------------------------------------------------- */ /* Nagłówki — ekspresyjny grotesk. Zmienny font, oś wght 300–900. */ --font-display: "Satoshi Variable", "Satoshi zastępczy", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; /* Tekst ciągły — Inter Variable (oś wght + opsz), świetna czytelność przy długich opisach kwater i regulaminie. */ --font-body: "Inter Variable", "Inter zastępczy", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; /* Skala płynna — clamp(min, preferowana, max). Zakres okna: 360px → 1600px. Baza 16 → 17px, iloraz 1.200 → 1.220. Wartości policzone wzorem, nie dobrane na oko. Skala jest celowo powściągliwa: na dużym ekranie nagłówek hero ma 68px, a nie 89px jak wcześniej. Duża typografia dobrze wygląda na zrzucie, ale przy realnym czytaniu męczy i wypycha treść poza pierwszy ekran. */ --step--2: clamp(0.6944rem, 0.6888rem + 0.0250vw, 0.7139rem); /* 11 → 11px */ --step--1: clamp(0.8333rem, 0.8224rem + 0.0485vw, 0.8709rem); /* 13 → 14px */ --step-0: clamp(1.0000rem, 0.9819rem + 0.0806vw, 1.0625rem); /* 16 → 17px */ --step-1: clamp(1.2000rem, 1.1721rem + 0.1242vw, 1.2962rem); /* 19 → 21px */ --step-2: clamp(1.4400rem, 1.3989rem + 0.1825vw, 1.5814rem); /* 23 → 25px */ --step-3: clamp(1.7280rem, 1.6695rem + 0.2598vw, 1.9293rem); /* 28 → 31px */ --step-4: clamp(2.0736rem, 1.9923rem + 0.3615vw, 2.3538rem); /* 33 → 38px */ --step-5: clamp(2.4883rem, 2.3770rem + 0.4946vw, 2.8716rem); /* 40 → 46px */ --step-6: clamp(2.9860rem, 2.8358rem + 0.6676vw, 3.5034rem); /* 48 → 56px */ --step-7: clamp(3.5832rem, 3.3826rem + 0.8915vw, 4.2741rem); /* 57 → 68px, hero */ --lh-tight: 1.05; /* wielkie nagłówki hero */ --lh-heading: 1.15; --lh-snug: 1.35; --lh-body: 1.65; /* długie akapity — opisy kwater */ --tracking-tight: -0.03em; /* duże nagłówki */ --tracking-normal: 0; --tracking-wide: 0.08em; /* eyebrow / nadtytuły wersalikami */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* hero */ /* Maksymalna szerokość kolumny tekstu — ~65 znaków */ --measure: 65ch; /* --------------------------------------------------------------------- 4. PRZESTRZEŃ — skala oparta na 4px, płynna dla dużych odstępów --------------------------------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2rem; --space-xl: 3rem; --space-2xl: clamp(2.5rem, 1.9rem + 2.6vw, 4rem); --space-3xl: clamp(3.5rem, 2.6rem + 3.8vw, 6rem); /* odstęp między sekcjami */ --space-4xl: clamp(5rem, 3.2rem + 7vw, 9rem); /* Siatka */ --container-max: 80rem; /* 1280px */ --container-wide: 96rem; /* 1536px — sekcje pełnoszerokościowe */ --container-text: 46rem; /* 736px — kolumna czytelnicza */ --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem); /* --------------------------------------------------------------------- 5. PROMIENIE, CIENIE, OBRAMOWANIA --------------------------------------------------------------------- */ --radius-xs: 0.25rem; --radius-s: 0.5rem; --radius-m: 0.875rem; --radius-l: 1.25rem; --radius-xl: 2rem; --radius-full: 9999px; /* Cienie tonowane na kolor marki, nie na czysty czarny */ --shadow-s: 0 1px 2px color-mix(in oklab, var(--fv-teal-900) 8%, transparent), 0 1px 3px color-mix(in oklab, var(--fv-teal-900) 6%, transparent); --shadow-m: 0 2px 6px color-mix(in oklab, var(--fv-teal-900) 8%, transparent), 0 8px 20px color-mix(in oklab, var(--fv-teal-900) 10%, transparent); --shadow-l: 0 4px 12px color-mix(in oklab, var(--fv-teal-900) 10%, transparent), 0 20px 48px color-mix(in oklab, var(--fv-teal-900) 14%, transparent); --border-hairline: 1px solid var(--color-border); /* --------------------------------------------------------------------- 6. RUCH — czasy i krzywe. Wszystkie animacje respektują prefers-reduced-motion (patrz blok na końcu pliku). --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 520ms; --dur-reveal: 700ms; /* wejścia sekcji przy scrollu */ /* --------------------------------------------------------------------- 7. WARSTWY --------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-lightbox: 400; --z-cookie: 500; } /* Strona ma wyłącznie motyw jasny — informujemy o tym przeglądarkę, żeby nie przyciemniała pól formularzy i pasków przewijania. */ :root { color-scheme: light; } /* ============================================================================= SZANUJ prefers-reduced-motion — zerujemy czasy trwania globalnie. Komponenty czytają --dur-*, więc nie muszą tego obsługiwać samodzielnie. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; } }