/*
* atvesmir — design system / tokens (block 01)
* Single source of truth for colors, typography, motion. Values are 1:1 with the
* design prototype (tests/design/Astronomický tábor.dc.html :root / [data-theme=dark]).
* Dark mode is driven by [data-theme="dark"] on (set early by the no-flash
* inline script; toggled by assets/js/theme-toggle.js). No-JS users get OS preference.
*/
/* ---------------------------------------------------------------- *
* 1. Tokens — light (default)
* ---------------------------------------------------------------- */
:root {
--bg: #F2EDE3; --bg2: #FBF8F1; --bg3: #EBE4D6;
--ink: #211F1A; --ink2: #5C574C; --ink3: #8B8473;
--line: #DCD4C4; --line2: #C9C0AD;
--accent: #A84A28; --accent2: #8E3D1F; --accentSoft: #E7D3C6;
--night: #15192E; --night2: #1E2440; --nightInk: #ECE6D6; --nightInk2: #A7A8C0;
--field: #FBF8F1;
/* Text colour for use on top of --accent fills (buttons, badges).
* White passes AA on the dark light-mode accent; in dark mode the accent is a
* light terracotta, so we flip to dark ink to keep AA (see [data-theme=dark]). */
--at-on-accent: #ffffff;
/* Font stacks (families loaded via assets/css/fonts.css) */
--font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
--font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* Layout */
--at-content: 1180px;
--at-gutter: clamp(18px, 5vw, 48px);
--at-radius: 16px;
--at-radius-pill: 999px;
/* Map WordPress preset vars onto the live tokens so any block using
* --wp--preset--color--* also follows the light/dark theme switch. */
--wp--preset--color--bg: var(--bg);
--wp--preset--color--bg-2: var(--bg2);
--wp--preset--color--bg-3: var(--bg3);
--wp--preset--color--ink: var(--ink);
--wp--preset--color--ink-2: var(--ink2);
--wp--preset--color--ink-3: var(--ink3);
--wp--preset--color--line: var(--line);
--wp--preset--color--line-2: var(--line2);
--wp--preset--color--accent: var(--accent);
--wp--preset--color--accent-2: var(--accent2);
--wp--preset--color--accent-soft: var(--accentSoft);
--wp--preset--color--night: var(--night);
--wp--preset--color--night-2: var(--night2);
--wp--preset--color--night-ink: var(--nightInk);
--wp--preset--color--night-ink-2: var(--nightInk2);
--wp--preset--color--field: var(--field);
}
/* ---------------------------------------------------------------- *
* 2. Tokens — dark (explicit user choice via [data-theme=dark])
* ---------------------------------------------------------------- */
[data-theme="dark"] {
--bg: #131418; --bg2: #1C1E25; --bg3: #23262E;
--ink: #ECE7DB; --ink2: #ABA596; --ink3: #7C7768;
--line: #2C2F38; --line2: #3A3E48;
--accent: #DB8A63; --accent2: #E29B78; --accentSoft: #33291F;
--night: #0C0E1C; --night2: #161A30; --nightInk: #ECE6D6; --nightInk2: #9D9EB8;
--field: #1C1E25;
/* Dark accent is light → dark ink on it keeps AA (6.1:1) instead of white (2.7:1). */
--at-on-accent: #211F1A;
}
/* No-JS / pre-hydration: honour the operating-system preference when the user
* has not made an explicit choice. The inline no-flash script normally sets an
* explicit data-theme, so this only applies if JS is disabled. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--bg: #131418; --bg2: #1C1E25; --bg3: #23262E;
--ink: #ECE7DB; --ink2: #ABA596; --ink3: #7C7768;
--line: #2C2F38; --line2: #3A3E48;
--accent: #DB8A63; --accent2: #E29B78; --accentSoft: #33291F;
--night: #0C0E1C; --night2: #161A30; --nightInk: #ECE6D6; --nightInk2: #9D9EB8;
--field: #1C1E25;
}
}
/* ---------------------------------------------------------------- *
* 3. Base elements
* ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-serif);
font-size: 18px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; }
/* The block-15 media pipeline wraps every uploads ![]()
in a (AVIF ->
* WebP -> original). `display: contents` removes the wrapper box from layout so
* every `.container img` cover rule and the `.at-imgzoom img` effect keep
* working exactly as if the ![]()
were still a direct child. */
picture { display: contents; }
/* Links — every state pinned so the legacy refur `a:visited` (#75A3D1) and
* `a:focus`/`a:active` (#2E4051) recolours can't leak in (their (0,1,1)
* specificity otherwise beats the plain `a` rule and every component link
* class). The prototype has NO visited/focus/active colour change anywhere;
* only :hover shifts (to --accent2) and keyboard focus shows the
* :focus-visible outline below. Components re-pin their own link colours for
* these states at class+pseudo (0,2,0) specificity. */
a { color: var(--accent); }
a:visited,
a:focus,
a:active { color: var(--accent); }
a:hover { color: var(--accent2); }
::selection { background: var(--accentSoft); color: var(--ink); }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--ink);
}
code, kbd, samp, pre { font-family: var(--font-mono); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ---------------------------------------------------------------- *
* 4. Motion
* ---------------------------------------------------------------- */
@keyframes atTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes atRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* ---------------------------------------------------------------- *
* 5. Reusable design-system helpers (1:1 with prototype .at-* classes)
* ---------------------------------------------------------------- */
.at-link,
.at-link:visited,
.at-link:focus,
.at-link:active { color: inherit; text-decoration: none; }
.at-navlink {
position: relative;
color: var(--ink2);
text-decoration: none;
transition: color .18s ease;
}
.at-navlink:visited,
.at-navlink:focus,
.at-navlink:active { color: var(--ink2); }
.at-navlink:hover { color: var(--ink); }
.at-drop {
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}
.at-haschild:hover .at-drop,
.at-haschild:focus-within .at-drop {
opacity: 1;
visibility: visible;
transform: none;
}
.at-card {
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.at-card:hover { transform: translateY(-4px); }
.at-btn {
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: .01em;
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
text-decoration: none;
}
.at-btn:active { transform: translateY(1px); }
.at-yr { cursor: pointer; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.at-imgzoom { overflow: hidden; }
.at-imgzoom img { transition: transform .5s ease; }
.at-imgzoom:hover img { transform: scale(1.05); }
/* Layout container */
.at-container {
max-width: var(--at-content);
margin-inline: auto;
padding-inline: var(--at-gutter);
}
/* Accessible skip link */
.at-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
padding: 10px 16px;
background: var(--accent);
color: var(--at-on-accent);
border-radius: 0 0 8px 0;
font-family: var(--font-sans);
font-weight: 600;
}
.at-skip-link:focus {
left: 0;
color: var(--at-on-accent);
}
/* ---------------------------------------------------------------- *
* 6. Reduced motion
* ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.at-card:hover { transform: none; }
.at-imgzoom:hover img { transform: none; }
}
/* ---------------------------------------------------------------- *
* 7. Legacy dark-mode safety
* Interim guards so un-reskinned legacy surfaces stay legible in dark mode
* until their owning block restyles them. The footer widget area hard-codes a
* light #fafafa background (refur style.css); with themed text that fails
* contrast in dark mode. Block 03 (footer) replaces this wholesale.
* ---------------------------------------------------------------- */
[data-theme="dark"] .widget-area.footer-widget-area {
background: var(--bg2);
}
/* ---------------------------------------------------------------- *
* 8. WP native [gallery] shortcode — global responsive grid + gaps
* The theme had no .gallery styling, so shortcode galleries (the-best-of,
* archiv year pages, posts) rendered with items butted together (no gaps).
* Lay them out as a uniform grid with gaps everywhere. Lightbox (block 08)
* still binds the item links for full-res viewing.
* ---------------------------------------------------------------- */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: clamp(12px, 1.6vw, 20px) !important;
margin: 28px 0;
}
/* Force the whole item chain block + full-width; WordPress' inline width/float
and the inline would otherwise collapse the image to its intrinsic size. */
.gallery .gallery-item,
.gallery .gallery-item .gallery-icon,
.gallery .gallery-item .gallery-icon a {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.gallery .gallery-item img,
.gallery .gallery-icon img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border: 0 !important;
border-radius: 12px;
}
.gallery br { display: none; }
.gallery .gallery-caption { margin: 6px 0 0; font-size: .85rem; color: var(--ink2); }