/* ==========================================================================
TOMOŃ – sztuka masażu
Design tokens, reset, bazowa typografia (mobile-first)
========================================================================== */
/* --------------------------------------------------------------------------
Fonty — self-hosted (Fraunces + Outfit)
Pliki źródłowe wgraj do /fonts. Format docelowy: WOFF2.
-------------------------------------------------------------------------- */
/* Fraunces występuje wyłącznie w wadze 600 (h1–h4 i wszystkie miejsca
z --font-heading ustawiają font-weight: 600), więc plik regular/400 nie ma
odbiorcy — nie deklarujemy go wcale. */
@font-face {
font-family: 'Fraunces';
src: url('/fonts/fraunces-semibold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Outfit';
src: url('/fonts/outfit-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Outfit';
src: url('/fonts/outfit-medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* --------------------------------------------------------------------------
Design tokens
-------------------------------------------------------------------------- */
:root {
/* Kolory */
--color-bg: #F7F3EC;
--color-green: #7C8B6F;
--color-terracotta: #C1704A;
--color-text: #26332A;
--color-bg-alt: #EFE9DD;
--color-white: #FFFFFF;
--color-terracotta-dark: #A85C3B;
--color-green-dark: #66735A;
--color-text-muted: #5B6B5C;
/* Terakota do TEKSTU (linki, ceny). Bazowa --color-terracotta daje na
jasnych tłach tylko 3.06–3.69:1, a --color-terracotta-dark 4.08–4.46:1 —
oba poniżej progu WCAG AA 4.5:1 dla tekstu poniżej 18.66px. Ten odcień
trzyma 5.46:1 na #FFFFFF, 4.94:1 na #F7F3EC i 4.52:1 na #EFE9DD, czyli
przechodzi na każdym tle występującym w serwisie. Tła przycisków zostają
na --color-terracotta — tam kolor niesie markę, nie treść. */
--color-terracotta-text: #99593B;
/* Fonty */
--font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Spacing scale */
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.5rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 9rem;
/* Border-radius scale */
--radius-sm: 0.5rem;
--radius-md: 1.25rem;
--radius-lg: 2.5rem;
--radius-full: 999px;
/* Layout */
--container-max: 72rem;
--transition-base: 0.3s ease;
}
/* --------------------------------------------------------------------------
Reset
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* UWAGA: musi być `clip`, nie `hidden`. Przy `overflow-x: hidden` druga oś
wylicza się na `overflow-y: auto`, co czyni z kontener przewijania —
ze wszystkimi tego skutkami dla pozycjonowania i płynności scrolla.
`clip` obcina tak samo, ale NIE tworzy kontenera przewijania. */
overflow-x: clip;
}
body {
min-height: 100vh;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
position: relative;
/* jw. — `clip` zamiast `hidden`, żeby też nie stał się kontenerem
przewijania. */
overflow-x: clip;
}
/* Uwaga na przyszłość: notch / Dynamic Island nie jest tu obsługiwany żadnym
CSS-em i tak ma zostać. celowo NIE ma `viewport-fit=cover`,
więc Safari na iOS sam trzyma treść w obszarze bezpiecznym, a pas przy wyspie
maluje tłem strony. Header nigdzie nie jest sticky ani fixed (poza stanem
z otwartym menu), więc nie ma czego kompensować — dodanie `viewport-fit=cover`
bez jednoczesnego paddingu wpuściłoby logo i hamburger pod wyspę. */
img,
picture,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
ul,
ol {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
color: inherit;
}
button {
background: none;
border: none;
cursor: pointer;
}
table {
border-collapse: collapse;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
Skip link — pierwszy fokusowalny element w na każdej podstronie.
Pozwala pominąć 9-pozycyjną nawigację i przejść wprost do treści.
Element jest wypchnięty ponad górną krawędź, a NIE ukryty przez
`display: none` / `visibility: hidden` — te wyjęłyby go z kolejności Tab,
czyli uniemożliwiły jakiekolwiek sfokusowanie. `position: absolute` sprawia,
że nieaktywny link nie zajmuje miejsca w layoucie (kotwicą jest ,
które ma `position: relative`).
z-index ponad .site-header (220), bo header jest sticky i przykryłby link
w widocznej pozycji. Kolory z tokenów: #F7F3EC na #26332A = 11.95:1,
czyli z zapasem ponad AA (4.5:1), a nawet ponad AAA (7:1).
-------------------------------------------------------------------------- */
.skip-link {
position: absolute;
top: var(--space-sm);
left: var(--space-sm);
z-index: 400;
transform: translateY(calc(-100% - var(--space-lg)));
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
background-color: var(--color-text);
color: var(--color-bg);
font-family: var(--font-body);
font-weight: 500;
font-size: 0.9375rem;
transition: transform var(--transition-base);
}
.skip-link:focus {
transform: translateY(0);
outline: 2px solid var(--color-terracotta-text);
outline-offset: 2px;
}
/* Cel skip-linka. `tabindex="-1"` w HTML sprawia, że po skoku focus faktycznie
ląduje na (bez tego przeglądarki przesuwają tylko scroll, a Tab wraca
na początek strony). Pierścienia focusu tu nie pokazujemy — sygnałem dla
użytkownika jest sam skok, a obrys całej sekcji byłby mylący.
Bez scroll-margin-top: header nie jest sticky, więc nie ma czego omijać —
skok ma wylądować na samej górze treści. */
#main-content:focus,
#main-content:focus-visible {
outline: none;
}
/* --------------------------------------------------------------------------
Grain texture overlay
Subtelny szum na tle całej strony, nie blokuje interakcji.
-------------------------------------------------------------------------- */
body::after {
content: '';
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
}
/* --------------------------------------------------------------------------
Typografia bazowa (mobile-first)
-------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
font-family: var(--font-heading);
font-weight: 600;
color: var(--color-text);
line-height: 1.15;
}
h1 {
font-size: clamp(2.25rem, 6vw, 3.5rem);
}
h2 {
font-size: clamp(1.75rem, 4.5vw, 2.5rem);
}
h3 {
font-size: clamp(1.375rem, 3vw, 1.75rem);
}
h4 {
font-size: 1.125rem;
}
p {
font-size: 1rem;
}
.lead {
font-size: 1.125rem;
color: var(--color-text-muted);
}
small {
font-size: 0.875rem;
}
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-md);
overflow-x: hidden;
}
/* --------------------------------------------------------------------------
Breakpoints — mobile-first (min-width)
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
.container {
padding-inline: var(--space-lg);
}
p {
font-size: 1.0625rem;
}
}
@media (min-width: 1024px) {
.container {
padding-inline: var(--space-xl);
}
}
@media (min-width: 1440px) {
.container {
padding-inline: 0;
}
}
/* ==========================================================================
CTA button (wariant terakota)
========================================================================== */
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2xs);
padding: var(--space-xs) var(--space-md);
background-color: var(--color-terracotta);
color: var(--color-white);
font-family: var(--font-body);
font-weight: 500;
font-size: 0.9375rem;
border-radius: var(--radius-full);
white-space: nowrap;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-button:hover,
.cta-button:focus-visible {
background-color: var(--color-terracotta-dark);
transform: translateY(-2px);
box-shadow: 0 0.75rem 1.5rem rgba(193, 112, 74, 0.35);
}
/* ==========================================================================
Site header
========================================================================== */
.site-header {
/* Header NIE jest przyklejany na żadnej z 12 stron: siedzi w normalnym
przepływie na górze dokumentu i przewija się razem z treścią. `relative`,
a nie `static`, wyłącznie po to, żeby działał z-index niżej — element
`static` go ignoruje. Bez `top`: żadnego offsetu.
Jedyny wyjątek to stan z otwartym menu (`body.nav-open .site-header`),
gdzie header musi być `fixed`, inaczej przycisk „X" uciekłby nad ekran. */
position: relative;
/* Wyżej niż #mobile-nav (200), bo header i menu są rodzeństwem (menu celowo
NIE jest w headerze — patrz komentarz przy #mobile-nav). Dzięki temu
przycisk zamykania (hamburger → X, z-index: 210 wewnątrz headera) zostaje
klikalny nad otwartym pełnoekranowym panelem. Sticky CTA (150)
i back-to-top (140) zostają pod panelem. Na index trzyma też logo
i nawigację nad .hero-bg-video, które hero podciąga pod header. */
z-index: 220;
background-color: rgba(247, 243, 236, 0);
/* Przezroczysty 1px — wchodzi w wysokość pudełka, na której opiera się
ujemny margin-top w .hero (73px / 99px). Nie usuwać bez korekty tam. */
border-bottom: 1px solid transparent;
}
/* Header nachodzi na hero (patrz ujemny margin-top niżej) tylko na
index.html — oznaczonej jawnie klasą .site-header--hero w HTML (zamiast
wykrywania sąsiedztwa #hero selektorem :has()). Dopóki nie doszło do
scrolla, tło jest przezroczyste i pokazuje ciemne wideo/zdjęcie hero,
więc tekst nawigacji musi przejść na biel z delikatnym cieniem dla
czytelności. Na pozostałych 11 stronach (bez klasy --hero) nic się tu nie
uruchamia — tam tekst zostaje w domyślnym ciemnym kolorze.
Biel obowiązuje bezwarunkowo: header jest w normalnym przepływie, więc przez
cały czas, gdy jest widoczny, leży na ciemnym kadrze.
Scoped do .nav (pozioma nawigacja desktopowa) — celowo NIE do
#mobile-nav, który jest osobnym pełnoekranowym panelem z własnym,
kryjącym tłem (--color-bg) i musi zachować normalny ciemny kolor tekstu
niezależnie od stanu headera. */
.site-header--hero .nav .nav-link {
color: var(--color-white);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 8px rgba(0, 0, 0, 0.25);
}
.site-header--hero .hamburger-line {
background-color: var(--color-white);
}
/* Na mobile index.html nav bar jest bez logo — hero ma być czystym kadrem
wideo z samym hasłem. Bez logo w rzędzie zostaje tylko hamburger (.nav
i CTA są już ukryte poniżej 1100px); margin-left: auto przesuwa go w
prawy róg, żeby "justify-content: space-between" na jednym elemencie
nie wypchnął go w lewo, zostawiając pusty header. Od 768px logo wraca
do nav bara bez zmian — reguła jest scoped do max-width: 767px. */
@media (max-width: 767px) {
.site-header--hero .site-logo {
display: none;
}
.site-header--hero .header-actions {
margin-left: auto;
}
}
/* Logo nad hero — WYŁĄCZNIE mobile na index.html. Nav bar zostaje bez logo
(sam hamburger, patrz reguła wyżej); to osobny element w lewym górnym rogu
kadru wideo, odwzorowanie pozycji, w której dawniej siedziało logo
z przezroczystego headera, zanim ukryto je na mobile. Od 768px logo wraca
do nav bara, więc tutaj znika. Używa wariantu z białym „SZTUKA MASAŻU"
(LogoNoBackground-index.png) dla czytelności na wideo. */
.hero-logo {
display: none;
}
@media (max-width: 767px) {
.hero-logo {
display: block;
position: absolute;
/* 16px — ta sama linia co padding-block headera, więc logo trafia dokładnie
w rząd z hamburgerem. Bez env(): hero zaczyna się już pod wyspą (padding
na plus ujemny margin-top hero), więc inset doliczyłby się drugi raz. */
top: var(--space-sm);
left: var(--space-md); /* 24px — jak padding-inline .container na mobile */
z-index: 2; /* nad .hero-overlay (1); sticky header (220) i tak jest po prawej */
}
.hero-logo img {
display: block;
height: 45px; /* jak logo w nav barze na mobile (pozostałe podstrony) */
width: auto;
}
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
/* Oddech nad/pod logo (16px). Wysokość nav bara = wysokość logo
(najwyższy element) + 2 × ten padding. Jednolity dla wszystkich stanów
headera i wszystkich breakpointów. */
padding-block: var(--space-sm);
}
.site-logo img {
display: block;
/* Plik logo jest przycięty do bboxu grafiki (1267×564) — brak przezroczystych
pasów, które wcześniej sztucznie podbijały wysokość headera. Poniższe
wartości = dotychczasowa WIDOCZNA wysokość logo (stary height × 564/1024),
więc logo wygląda identycznie, a nav bar jest o te wycięte pasy niższy. */
height: 45px;
width: auto;
transition: height 0.3s ease;
}
@media (min-width: 768px) {
.site-logo img {
height: 66px;
}
}
/* Nawigacja desktopowa — ukryta na mobile */
.nav {
display: none;
}
.nav-list {
display: flex;
align-items: center;
gap: var(--space-md);
}
.nav-link {
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-text);
position: relative;
padding-block: var(--space-3xs);
transition: color var(--transition-base);
}
.nav-link::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: var(--color-terracotta);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-base);
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
color: var(--color-terracotta-text);
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after {
transform: scaleX(1);
}
.header-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.header-actions .cta-button {
display: none;
}
/* Hamburger — widoczny tylko na mobile */
.hamburger {
position: relative;
z-index: 210;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.hamburger-box {
position: relative;
width: 1.5rem;
height: 1rem;
}
.hamburger-line {
position: absolute;
left: 0;
width: 100%;
height: 2px;
border-radius: var(--radius-full);
background-color: var(--color-text);
transition: transform var(--transition-base), opacity var(--transition-base), top var(--transition-base);
}
.hamburger-line:nth-child(1) {
top: 0;
}
.hamburger-line:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.hamburger-line:nth-child(3) {
top: 100%;
transform: translateY(-100%);
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
opacity: 0;
}
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
/* Otwarte menu: panel #mobile-nav ma jasne tło (--color-bg), więc biały X
z reguły .site-header--hero .hamburger-line (index.html) byłby na nim
niewidoczny. Terakota — ten sam kolor co przyciski CTA — daje
kontrast 3.36:1 na #F7F3EC (próg WCAG 1.4.11 dla elementów graficznych to
3:1) i spójność kolorystyczną. Selektor jest o jedną klasę bardziej
szczegółowy niż reguła z białym kolorem, więc wygrywa niezależnie od
kolejności w pliku. */
.site-header .hamburger[aria-expanded="true"] .hamburger-line {
background-color: var(--color-terracotta);
}
/* ==========================================================================
Mobile nav — pełnoekranowy overlay z animacją wysuwania
UWAGA: ten