/* ─────────────────────────────────────────────────────────────── base.css — Design tokens ─────────────────────────────────────────────────────────────── The **colors** are defined in `theme.json` under `settings.color.palette` — that's the single source of truth. WordPress turns each palette entry into a CSS variable named `--wp--preset--color--` and uses those everywhere (inline styles in the editor, the Styles panel, the front-end…). Here we re-export them under shorter `--blik-color-*` names so our component CSS stays readable. Change a color in theme.json and EVERYTHING updates — both the front-end and the Site Editor. The non-color tokens (gutter, max-width, meta-text size) only live here because they're CSS-only concerns. ─────────────────────────────────────────────────────────────── */ :root { /* ─── LAYOUT ─── */ --blik-gutter: clamp(28px, 5.5vw, 80px); --blik-max: 1280px; /* ─── SPACING SCALE ─── */ --blik-spacing-xs: 10px; --blik-spacing-sm: 12px; --blik-spacing-md: 14px; --blik-spacing-lg: 18px; --blik-spacing-xl: 22px; --blik-spacing-2xl: 32px; /* ─── MEDIA QUERY BREAKPOINTS ─── */ --blik-bp-sm: 600px; --blik-bp-md: 700px; --blik-bp-lg: 768px; --blik-bp-xl: 782px; /* ─── TRANSITIONS ─── */ --blik-transition-fast: 0.15s ease; --blik-transition-normal: 0.2s ease; --blik-transition-slow: 0.4s ease; --blik-transition-slowest: 0.9s ease; /* ─── COMPONENT DIMENSIONS ─── */ /* Icons (header, pagination buttons) */ --blik-icon-size: 32px; --blik-icon-size-mobile: 30px; --blik-icon-border-width: 1.5px; /* Pagination buttons */ --blik-pagination-size: 34px; --blik-pagination-size-mobile: 32px; /* Archive thumbnails */ --blik-archive-thumb-width: 160px; --blik-archive-thumb-height: 107px; --blik-archive-thumb-width-sm: 100px; --blik-archive-thumb-height-sm: 67px; /* Gallery/slideshow navigation */ --blik-galerij-nav-width: 56px; --blik-galerij-nav-width-fs: 88px; --blik-galerij-nav-icon-size: 28px; --blik-galerij-nav-icon-size-fs: 44px; /* ─── ASPECT RATIOS ─── */ --blik-aspect-hero-slide: 3 / 4; --blik-aspect-article-row: 3 / 2; --blik-aspect-gallery: 16 / 10; --blik-aspect-card: 4 / 3; /* ─── COLUMN WIDTHS ─── */ --blik-column-width-narrow: 640px; /* article text column */ --blik-column-width-wide: 920px; /* wide content areas */ --blik-column-width-full: var(--blik-max); /* ─── BORDERS ─── */ --blik-border-thin: 1px solid var(--blik-color-line); --blik-border-thick: 3px solid var(--blik-color-red); /* ─── BRAND COLORS (re-exported from theme.json palette) ─── */ --blik-color-paper: var(--wp--preset--color--accent-5); --blik-color-panel: var(--wp--preset--color--accent-2); --blik-color-ink: var(--wp--preset--color--contrast); --blik-color-muted: var(--wp--preset--color--accent-4); --blik-color-line: var(--wp--preset--color--accent-6); --blik-color-purple: var(--wp--preset--color--accent-1); --blik-color-red: var(--wp--preset--color--accent-3); --blik-color-white: var(--wp--preset--color--base); /* ─── COLOR UTILITIES (for hover states) ─── */ --blik-color-ink-transparent: color-mix(in srgb, var(--blik-color-ink) 20%, transparent); --blik-color-ink-hover: color-mix(in srgb, var(--blik-color-ink) 45%, transparent); } /* `` gets the footer color and `` keeps the paper color. On short pages the body is shorter than the viewport — html shows underneath it, which means the area directly under the footer is already purple. No white line under the footer, ever. */ html { /* The root background propagates to the overscroll/rubber-band area, so it must be the footer purple (never white). Literal fallback in case the preset var isn't resolved on . */ background-color: #210e6f; background-color: var(--wp--preset--color--accent-1, #210e6f); } body { background: var(--blik-color-paper); color: var(--blik-color-ink); overflow-x: hidden; } /* Remove default block-gap between query loop items */ .wp-block-post-template > .wp-block-post { margin-block-start: 0; } /* 404 — centred crashing-car icon + message. */ .blik-404 { max-width: 600px; margin: 0 auto; align-items: center; text-align: center; } .blik-404-icon { line-height: 0; } .blik-404-icon svg { max-width: 100%; height: auto; }