/* Cildens — a layer over autosite's bundled stylesheet. * * Do NOT create style.css: that makes the engine drop the bundled base. * * A cultural programme, not an event platform: warm paper, black ink, the * logo's blue as the ONE brand colour, Cinzel (the logo's face, bound by the * engine from font.ttf) for display only. Colour on a page comes from the * event's own artwork, never from the chrome. No gradients, shadows, cards. */ :root { --bg: #f7f4ee; --ink: #151515; --muted: #5f5b54; --rule: #d9d3c7; --accent: #0077c8; /* the logo blue, darkened enough to read as text */ --accent-ink: #00508a; --brand: #00a3ff; /* the logo blue itself, for marks only */ --font-display: 'sole-site-font', serif; --font-body: Georgia, 'Times New Roman', serif; --font-chrome: var(--font-body); --measure: 40rem; color-scheme: light; /* posters are made for paper; this later :root also overrides the bundled dark palette */ } /* Cinzel has no Cyrillic; Russian pages set their display type in Cormorant SC, the same classical-capitals voice, raw-emitted from _fonts/. */ @font-face { font-family: 'cildens-cyrillic'; font-weight: 600; font-display: swap; src: url('/_fonts/cormorant-sc-semibold.ttf') format('truetype'); } html:lang(ru) { --font-display: 'cildens-cyrillic', serif; } /* Chinese: no classical face to match, so the reader's own CJK serif. */ html:lang(zh) { --font-display: serif; --font-body: serif; } /* --- chrome --------------------------------------------------------- */ /* The logo image is the name. The engine emits the linked wordmark and the as siblings, so the wordmark is laid invisibly over the logo to keep the logo clickable to home. */ body { position: relative; } header > .logo { display: block; width: min(20rem, 80%); height: auto; max-height: none; margin: 0 auto var(--space-2); } header > .site-title { position: absolute; top: var(--space-5); left: 50%; transform: translateX(-50%); width: min(20rem, 80%); aspect-ratio: 900 / 167; color: transparent; overflow: hidden; white-space: nowrap; } header > .custom-header { order: 106; } /* tagline right under the name */ .site-tagline { text-align: center; margin: 0 0 var(--space-3); font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } header > .language-switcher { order: 107; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); margin: 0 auto var(--space-3); max-width: 34rem; } header > .language-switcher .active { color: var(--ink); border-bottom: 1px solid var(--brand); } header > .navigation { font-size: var(--text-sm); text-align: center; margin-bottom: var(--space-4); } header > .navigation ul { justify-content: center; } /* The engine writes the parent link as the English word "Up"; show only the arrow. */ header .link.up { font-size: 0; } header .link.up::before { content: "\2191"; font-size: var(--text-base); } .page-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); text-align: center; letter-spacing: 0.04em; } .page-date { display: none; } /* file dates are not event dates */ footer > .recent { display: none; } /* same: would show file dates */ .custom-footer { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--ink); font-size: var(--text-sm); color: var(--muted); text-align: center; } .custom-footer p { margin: var(--space-1) 0; } .todo { color: #c00; font-weight: bold; } /* draft placeholders only */ /* --- homepage ------------------------------------------------------- */ /* The engine keeps no , so the homepage is recognised by its content. */ body:has(.next) .page-title, body:has(.next) .page-body > .contents { display: none; } .next { text-align: center; } .kicker { display: inline-block; margin: 0 0 var(--space-3); padding: 0.1em 0.8em; border: 1px solid var(--brand); color: var(--accent); font-size: var(--text-sm); letter-spacing: 0.2em; text-transform: uppercase; } /* Poster artwork comes on its own white sheet; frame it as one. */ .poster img, img.poster { display: block; width: 100%; height: auto; margin: 0 auto; background: #fff; padding: var(--space-3); border: 1px solid var(--rule); } .next h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); margin: var(--space-3) 0 var(--space-1); } .next h2 a { color: var(--ink); text-decoration: none; } .when { font-size: var(--text-lg); margin: 0; } .where { color: var(--muted); margin: 0; } /* --- event page ----------------------------------------------------- */ .facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); margin: var(--space-4) 0; padding: var(--space-3) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .facts dt { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--text-sm); padding-top: 0.2em; } .facts dd { margin: 0; }