/*
* base.css — fundament, klasy pomocnicze, dostępność
*
* Część arkuszy theme'u rozbitych per feature. Kolejność ładowania i lista
* plików: functions.php → oliwa_enqueue_assets(). Wszystkie wartości pochodzą
* z assets/css/tokens.css.
*/
/* -------------------------------------------------------------------------
Fundament
Design system: dwa tła na layout (krem + oliwka), promienie near-square
(2px kontrolki, 4px karty i media, pill tylko dla badge), separacja
hairline'ami 1px, złota reguła 2px jako jedyny znacznik aktywności.
---------------------------------------------------------------------- */
:root {
/* Jedyna wartość spoza skali, jaka zostaje w arkuszach: glif Lucide
`shopping-bag` jako maska. Nie jest liczbą ani kolorem — to zasób,
współdzielony przez kafelki konta i przycisk „dodaj do koszyka”.
Reszta zmiennych mieszka w assets/css/tokens.css.
Druga taka maska to tarcza przy plakietce „zakup zweryfikowany" w opiniach —
WooCommerce wypisuje tam sam napis, bez ikony. */
--ico-shield-check: url("data:image/svg+xml,");
--ico-bag: url("data:image/svg+xml,");
}
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
.wp-block-post-title,
.wp-block-query-title {
text-wrap: balance;
}
p {
text-wrap: pretty;
}
/* Pasy pełnej szerokości stykają się bez szczeliny.
Rdzeń rozstawia dzieci układu przepływowego regułą
`:root :where(.is-layout-flow) > * { margin-block-start: }`,
czyli globalnym odstępem 24 px z theme.json. Dla akapitów w treści to
dobrze, ale sekcje najwyższego poziomu w to PASY — mają własne
tło i własny padding, więc odstęp między nimi pokazuje kolor strony
jako obcy prążek między kremem a oliwką.
Selektor celuje wyłącznie w bezpośrednie dzieci z klasą
`alignfull`: treść wpisu siedzi w bloku post-content, o poziom niżej,
więc pełnoszerokie obrazy w artykule zachowują swój odstęp.
Specyficzność (0,1,1) bije rdzeniowe (0,1,0) — `:where()` liczy się
jako zero, cała waga tamtej reguły siedzi w `:root`. */
main.wp-block-group>.alignfull {
margin-block-start: 0;
}
/* -------------------------------------------------------------------------
Klasy pomocnicze
Wpisywane w edytorze: blok > Zaawansowane > Dodatkowe klasy CSS.
---------------------------------------------------------------------- */
/* Nadtytuł — ALL CAPS z szerokim trackingiem. Nagłówki zostają sentence case. */
.oliwa-eyebrow {
font-family: var(--font-body);
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: var(--tracking-widest);
line-height: 1.2;
text-transform: uppercase;
}
/* Jedna krótka fraza ozdobnym krojem na layout — nigdy UI ani akapit. */
.oliwa-script {
font-family: var(--font-script);
font-size: var(--text-2xl);
font-weight: 400;
letter-spacing: 0;
line-height: 1.25;
text-transform: none;
}
/* Reguła 1px — separacja sekcji i wnętrza kart. */
.oliwa-rule {
border: 0;
border-top: 1px solid var(--hairline);
height: 0;
margin: 0;
opacity: 1;
}
.has-primary-background-color .oliwa-rule,
.has-primary-dark-background-color .oliwa-rule {
border-top-color: var(--hairline-on-dark);
}
/* Karta: krem, hairline, 4px. */
.oliwa-card {
background: var(--wp--preset--color--surface-card);
border: 1px solid var(--hairline);
border-radius: var(--radius-card);
}
.oliwa-card.is-interactive {
box-shadow: var(--shadow-card);
transition: box-shadow var(--duration-base) var(--easing-standard),
transform var(--duration-base) var(--easing-standard);
}
.oliwa-card.is-interactive:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-2px);
}
/* Wariant pull-out — karta oliwkowa wewnątrz kremowej sekcji. */
.oliwa-card.is-dark {
background: var(--wp--preset--color--primary);
border-color: transparent;
color: var(--text-on-dark-warm);
}
.oliwa-card.is-dark :where(h1, h2, h3, h4) {
color: var(--wp--preset--color--base-alt);
}
/* Media z zoomem do 1.04 na hover. */
.oliwa-media {
border-radius: var(--radius-card);
overflow: hidden;
}
.oliwa-media img {
display: block;
transition: transform var(--duration-slow) var(--easing-entrance);
width: 100%;
}
.oliwa-card.is-interactive:hover .oliwa-media img,
.oliwa-media:hover img {
transform: scale(1.04);
}
/* Hero na zdjęciu — tekst zawsze na gradiencie ochronnym. */
.oliwa-hero {
min-height: var(--hero-h);
}
.oliwa-hero.is-compact {
min-height: var(--hero-h-compact);
}
/* Siatka kart o równej wysokości — kolumny same się nie wyrównują. */
.oliwa-cards>.wp-block-column,
.oliwa-cards>.wp-block-group {
display: flex;
flex-direction: column;
}
.oliwa-cards>.wp-block-column>*:last-child,
.oliwa-cards>.wp-block-group>*:last-child {
margin-top: auto;
}
/* Wiersze klucz—wartość: parametry produktu, tabela żywieniowa. */
.oliwa-spec {
background: var(--wp--preset--color--base-alt);
border-radius: var(--radius-card);
padding: var(--space-8);
}
.oliwa-spec .wp-block-columns {
border-bottom: 1px solid var(--hairline);
margin-bottom: var(--space-2);
padding-bottom: var(--space-2);
}
.oliwa-spec .wp-block-columns:last-child {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
/* -------------------------------------------------------------------------
Dostępność i ruch
System dopuszcza wyłącznie fade i krótkie slide'y — bez parallaxu,
sprężyn i reveali na scroll. Nic tu nie startuje z opacity: 0, więc
nie ma potrzeby nadpisywania widoczności w edytorze.
---------------------------------------------------------------------- */
.skip-link:focus {
background: var(--wp--preset--color--primary);
box-shadow: var(--shadow-raised);
color: var(--wp--preset--color--base);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
left: 1rem;
padding: 0.75em 1.25em;
position: fixed;
text-decoration: none;
top: 1rem;
z-index: 100000;
}
:where(a, button, input, select, textarea, summary):focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
.oliwa-media img,
.wc-block-components-product-image img {
transform: none !important;
}
}
/* -------------------------------------------------------------------------
Pasek zalet pod hero (strona główna)
Projekt stawia w każdej kolumnie glif Lucide w złocie, a obok dwa wiersze
tekstu. Sam glif bierzemy z gotowych klas `.oliwa-ico--*` (account.css) —
to ten sam mechanizm maski, co w kokpicie konta, więc nie dokładamy
drugiego zestawu ikon.
Kolumna jest gridem 2×2: ikona zajmuje obie linie po lewej, akapity idą
jeden pod drugim po prawej. Dzięki temu w markupie nie trzeba kontenera
na sam tekst — kolumna bloku wystarcza.
---------------------------------------------------------------------- */
.oliwa-prop {
align-items: start;
column-gap: var(--space-4);
display: grid;
grid-template-columns: auto 1fr;
row-gap: var(--space-1);
}
.oliwa-prop::before {
/* Maska dziedziczy `currentColor` z reguły w account.css, więc kolor
ustawiamy przez `color`, nie przez `background`. */
color: var(--text-accent);
grid-row: 1 / 3;
height: var(--icon-lg);
/* Glif ma usiąść na linii pisma pierwszego wiersza, nie na jego górnej
krawędzi. */
margin-top: var(--space-1);
width: var(--icon-lg);
}
/* Bez tego akapity trafiłyby do pierwszej kolumny gridu, obok ikony. */
.oliwa-prop>* {
grid-column: 2;
margin: 0;
}
/* Opis w interlinii tekstu pomocniczego (1,5), nie w domyślnej 1,72 —
inaczej dwa wiersze pod tytułem rozjeżdżają się na wysokość akapitu. */
.oliwa-prop>p:last-child {
line-height: var(--leading-normal);
}