is a component
with an undocumented requirement. */
list-style: none;
border-block-start: 1px solid var(--color-border);
}
.triad__item {
padding: var(--space-6) var(--space-5);
text-align: center;
border-block-end: 1px solid var(--color-border);
}
@media (min-width: 48rem) {
.triad {
grid-template-columns: repeat(3, 1fr);
border-block-end: 1px solid var(--color-border);
}
.triad__item {
border-block-end: 0;
border-inline-start: 1px solid var(--color-border);
}
.triad__item:first-child {
border-inline-start: 0;
}
}
.triad__glyph {
display: block;
margin-inline: auto;
font-size: var(--text-3xl);
/* The astrological glyphs are ordinary Unicode and inherit the body face,
which sets them at a weight the engraved look does not want. Nudged
rather than restyled: they are text, not an icon set. */
line-height: 1;
color: var(--color-gold-dim);
transition: color var(--transition), filter var(--transition);
}
.triad__item:hover .triad__glyph {
color: var(--color-gold);
filter: drop-shadow(0 0 14px rgb(216 179 107 / 45%));
}
.triad__name {
margin-block-start: var(--space-4);
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
}
.triad__note {
margin-block-start: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* =============================================================================
Price plates — the ceník (spec sec. 68).
A card that has to be scannable in a column of near-identical cards, so the
only things allowed to be loud are the name and the number. Everything else
is hairline and small-caps: the amount carries the gold, the card does not.
Markup:
============================================================================= */
.price-grid {
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
/* Column, so the call to action can be pushed to the bottom edge and every
plate in a row ends on the same line however long the copy above it is. */
.price-card {
display: flex;
flex-direction: column;
}
.price-card__name {
margin-block-start: var(--space-2);
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 600;
line-height: var(--leading-snug);
}
.price-card__amount {
margin-block-start: var(--space-4);
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 600;
line-height: var(--leading-tight);
color: var(--color-gold-bright);
letter-spacing: var(--tracking-tight);
}
.price-card__unit {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
.price-card__note {
margin-block-start: var(--space-3);
color: var(--color-text-secondary);
}
.price-card__credits {
margin-block-start: var(--space-3);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* margin-block-start: auto is what pins the button to the bottom of the plate. */
.price-card__cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
margin-block-start: auto;
padding-block-start: var(--space-5);
}
/* =============================================================================
Data table — the credit statement, and anything else that is genuinely
tabular. Ruled rather than striped: stripes on an ink background read as
noise, and a hairline is the same device the rest of the system uses.
Always wrapped in
so a narrow screen scrolls the
table and not the page.
============================================================================= */
.table-scroll {
overflow-x: auto;
}
.data-table {
inline-size: 100%;
font-size: var(--text-sm);
border-collapse: collapse;
}
.data-table th,
.data-table td {
padding: var(--space-3) var(--space-4);
text-align: start;
vertical-align: top;
border-block-end: 1px solid var(--color-border);
}
.data-table th {
font-size: var(--text-2xs);
font-weight: 600;
color: var(--color-gold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
white-space: nowrap;
border-block-end-color: var(--color-gold-line);
}
.data-table tbody tr:last-child td {
border-block-end: 0;
}
.data-table__num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
text-align: end;
white-space: nowrap;
}
/* Sign carries the meaning in a ledger, so it carries the colour too. */
.data-table__num--positive {
color: var(--color-success);
}
.data-table__num--negative {
color: var(--color-copper-hover);
}
.data-table__when {
color: var(--color-text-muted);
white-space: nowrap;
}
/* =============================================================================
Balance plate — one number, said once, at the top of /ucet/kredity.
============================================================================= */
.balance {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
align-items: baseline;
}
.balance__amount {
font-family: var(--font-display);
font-size: var(--text-4xl);
font-weight: 600;
line-height: var(--leading-tight);
color: var(--color-gold-bright);
letter-spacing: var(--tracking-tight);
}
.balance__unit {
font-size: var(--text-sm);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
/* =============================================================================
Notifications — the inbox at /ucet/oznameni (spec sec. 76).
One rule, and it only has to do one thing: say which plates are already
read. The unread ones are the default card, at full contrast; a read one
steps back. That way "new" needs no colour of its own — the badge says it in
words, and the contrast says it again for anyone skimming.
Markup:
…
============================================================================= */
.notification--read .card__title,
.notification--read .card__body {
color: var(--color-text-muted);
}
.notification--read .card__eyebrow {
color: var(--color-text-muted);
}
/* =============================================================================
The drawn cards — a row of engraved plates at the head of a reading
(spec sec. 112).
A card is typeset rather than illustrated: a tall plate, a hairline rule, the
position above and the name below, in the display face. That is a deliberate
choice and not a placeholder — an atlas of engraved plates is the aesthetic,
and a row of grey image boxes waiting for pictures would look unfinished in a
way that this does not.
Since P8 one deck does carry a picture, and it did not arrive as photography:
Tarot Čaroděje is *drawn*, in hairlines, in this same language, so `--drawn`
below adds an engraving to the plate rather than replacing the plate with an
image. Every other deck still typesets, and still should.
Reversed cards are marked in the copy, never by rotating the plate. Turning
the text upside down makes it unreadable to everybody and unreadable *twice*
to a screen reader.
-
…
…
…
============================================================================= */
.card-row {
display: grid;
gap: var(--space-4);
padding: 0;
margin: 0;
list-style: none;
grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.card-plate {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-2);
align-items: center;
justify-content: center;
min-height: 11rem;
padding: var(--space-4) var(--space-3);
text-align: center;
background-image:
radial-gradient(ellipse 80% 50% at 50% 0%, rgb(216 179 107 / 9%), transparent 70%),
linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
border: 1px solid var(--color-gold-line);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm), var(--glow-inset);
}
/* A copper hairline down the inner edge — the brass mount of a plate. */
.card-plate::before {
position: absolute;
inset: 5px;
border: 1px solid var(--color-border);
border-radius: var(--radius-xs);
content: '';
pointer-events: none;
}
.card-plate--reversed {
border-color: var(--color-copper-line);
}
/* -----------------------------------------------------------------------------
Tarot Čaroděje: the one deck that has a picture (P8).
The plate above is unchanged and still does all the work — ground, border,
brass mount, position above, name below. What `--drawn` adds is the engraving
between them, so a card with a face and a card without are the same object
with and without its picture rather than two different components.
The face is SVG drawn from the card's own data
(Divination\Service\Face\WizardTarotFace) and paints itself in `currentColor`,
which is why the colour is set here and not in the markup: the plate decides
what gold a card is struck in, and a reversed plate is struck in copper
without the SVG knowing anything about it.
-------------------------------------------------------------------------- */
.card-plate--drawn {
justify-content: flex-start;
}
.tarot-face {
display: block;
width: 100%;
/* The face keeps its own proportions rather than stretching into whatever
room the plate has left. Flexing it looked reasonable until two cards in a
row had names of different lengths — one wrapped, and the two engravings
came out visibly different sizes, which reads as two decks rather than
two cards. A fixed ratio makes the *plate* absorb the difference, which is
what the plate is for. The number is the inline face's viewBox. */
aspect-ratio: 200 / 212;
height: auto;
color: var(--color-gold);
}
.card-plate--reversed .tarot-face {
color: var(--color-copper);
}
/* Which deck the row was read from — a footnote under the cards, not a badge.
It is a fact about the reading, and the cards are the thing worth looking at. */
.card-row__deck {
margin: 0;
font-size: var(--text-xs);
color: var(--color-text-muted);
letter-spacing: 0.02em;
text-align: center;
}
.card-plate__position {
font-size: var(--text-2xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
.card-plate__name {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
line-height: var(--leading-tight);
color: var(--color-gold-bright);
}
.card-plate__orientation {
font-size: var(--text-2xs);
color: var(--color-copper-hover);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
/* The stave or the hexagram itself, above the name (spec sec. 49, 50).
A rune and an I-ťing hexagram are characters rather than pictures, so the
plate can carry the real mark instead of the grey image box a tarot plate is
still waiting for — which is why this exists here and there is no equivalent
for tarot or Lenormand.
One stack for both scripts, because a browser falls back per character: Noto
Sans Runic holds nothing but ᚠ–ᛟ, so a hexagram passes straight through it to
the family that has U+4DC0–4DFF. In order after it, the families that really
ship the hexagram block — Segoe UI Symbol on Windows, Apple Symbols on macOS
and iOS, Noto Sans Symbols 2 on Linux — and then `serif` rather than the
display face, which has neither block and would render a tofu box that looks
like a bug.
Noto Sans Runic is a webfont (see templates/base.html.twig for why that one
and not the other); everything after it is whatever the reader already has.
The line-height is 1 because these characters have no descenders and the
plate is already vertically centred.
`aria-hidden` in the markup, never here: hiding it in CSS would leave it in
the accessibility tree. See templates/reading/detail.html.twig. */
.card-plate__glyph {
font-family: 'Noto Sans Runic', 'Segoe UI Historic', 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', serif;
font-size: var(--text-3xl);
line-height: 1;
color: var(--color-gold);
}
/* The small line under the name where a plate has something to add: „12. karta"
for a Lenormand card, „Voda nad ohněm" for a hexagram. Muted rather than
copper, unlike the orientation above it — the orientation changes how the
reading is read, this only says which card it is. The two never appear on the
same plate. */
.card-plate__caption {
font-size: var(--text-2xs);
color: var(--color-text-muted);
letter-spacing: var(--tracking-wide);
}
/* =============================================================================
A reading's prose. One block per section, so the vertical rhythm of a
thousand words is set once rather than by whatever the model's paragraph
lengths happen to be.
============================================================================= */
.reading-section__title {
margin-block-end: var(--space-3);
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 600;
line-height: var(--leading-tight);
color: var(--color-text);
}
/* The short answer is the one paragraph everybody reads, and often the only
one somebody remembers a week later. Set larger, on gold, and given the
plate's own ground. */
.reading-section--summary {
padding: var(--space-5);
background-color: var(--color-gold-wash);
border: 1px solid var(--color-gold-line);
border-radius: var(--radius-sm);
}
.reading-section--summary .reading-section__body {
font-family: var(--font-display);
font-size: var(--text-xl);
line-height: var(--leading-relaxed);
color: var(--color-text);
}
.reading-section__body p {
margin-block-end: var(--space-4);
}
.reading-section__body p:last-child {
margin-block-end: 0;
}
/* The three lists. A marker per kind, because "co vám nahrává" and "na co si
dát pozor" are opposite advice and must not look identical at a glance. */
.reading-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: 0;
margin: 0;
list-style: none;
}
.reading-list > li {
position: relative;
padding-inline-start: var(--space-5);
}
.reading-list > li::before {
position: absolute;
inset-inline-start: 0;
color: var(--color-gold);
content: '◆';
font-size: var(--text-xs);
line-height: 1.6;
}
.reading-list--positive > li::before {
color: var(--color-success);
}
.reading-list--warning > li::before {
color: var(--color-warning);
}
/* Follow-up questions are buttons, not bullets: clicking one starts the next
reading with the question already written (spec sec. 113). */
.reading-followups {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
/* =============================================================================
The waiting plate — what somebody looks at while the reading is written.
============================================================================= */
.reading-wait {
display: flex;
flex-direction: column;
gap: var(--space-4);
align-items: center;
padding-block: var(--space-7);
text-align: center;
}
.reading-wait__title {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 600;
color: var(--color-gold-bright);
}
/* A slow pulse rather than a spinner. A spinner says "this is taking too long";
this says "something is happening", which is the truth about a job that
takes half a minute. */
.reading-wait__sigil {
color: var(--color-gold);
animation: reading-pulse 3.2s ease-in-out infinite;
}
@keyframes reading-pulse {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.reading-wait__sigil {
animation: none;
opacity: 0.8;
}
}
/* =============================================================================
The paywall (spec sec. 82).
Sits directly under the last free section of a reading and has one job: make
it obvious that the page stops rather than ends. The fade above it is what
does that — a plate that simply began would read as the end of the reading,
and somebody who thinks they have read it all does not pay.
The fade is drawn by the wrapper, over the section above it, so no section
template has to know it is the last free one.
…
============================================================================= */
.paywall-fade {
height: 5.5rem;
/* Pulled up over the section above, so the text really does dissolve
instead of a grey band appearing beneath it. The .stack gap is cancelled
by the same amount. */
margin-block: calc(var(--space-5) * -1 - 5.5rem) 0;
background-image: linear-gradient(180deg, transparent, var(--color-bg) 92%);
pointer-events: none;
}
.paywall {
text-align: center;
background-image:
radial-gradient(ellipse 70% 60% at 50% 0%, rgb(216 179 107 / 12%), transparent 72%),
linear-gradient(180deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1.2%));
border-color: var(--color-gold-line);
}
.paywall:hover {
box-shadow: var(--shadow-md);
}
.paywall__lock {
margin-inline: auto;
color: var(--color-gold);
}
.paywall__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 600;
line-height: var(--leading-snug);
}
.paywall__price {
font-family: var(--font-display);
font-size: var(--text-4xl);
font-weight: 600;
line-height: var(--leading-tight);
color: var(--color-gold-bright);
letter-spacing: var(--tracking-tight);
}
.paywall__note {
max-width: 44ch;
margin-inline: auto;
color: var(--color-text-secondary);
}
/* What is still behind it, as a list of headings without their text. Naming
the parts is the offer; showing a word of them would be giving it away. */
.paywall__contents {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
justify-content: center;
padding: 0;
margin: 0;
list-style: none;
}
.paywall__contents > li {
padding: 0.3em 0.8em;
font-size: var(--text-2xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-pill);
}
/* =============================================================================
The reading list at /vyklad/moje — a plate per reading, its status and the
first sentence of it.
============================================================================= */
.reading-row__head {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
align-items: baseline;
justify-content: space-between;
}
.reading-row__teaser {
display: -webkit-box;
overflow: hidden;
color: var(--color-text-secondary);
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* =============================================================================
The Grimoár at /grimoar — a year of somebody's life as a ruled thread
(spec sec. 64–65).
The visual idea is the margin of a bound ledger: a hairline down the left,
a brass stud per entry, months as engraved headings. It is the one screen in
the application that is meant to look *long* — the length is the point, and
an account with three years in it should feel like it has three years in it.
============================================================================= */
.timeline {
--timeline-gutter: var(--space-6);
}
/* The month heading. Small caps and a gold hairline running off to the right,
so the eye can find the year boundaries while scrolling past a decade. */
.timeline__month {
display: flex;
gap: var(--space-4);
align-items: center;
margin-bottom: var(--space-4);
font-family: var(--font-body);
font-size: var(--text-2xs);
font-weight: 600;
color: var(--color-gold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
}
.timeline__month::after {
flex: 1;
height: 1px;
background: linear-gradient(to right, var(--color-gold-line), transparent);
content: "";
}
/* The ruled margin. A pseudo-element rather than a border on the list so that
it stops at the last entry instead of running under the month gap below. */
.timeline__entries {
position: relative;
padding-left: var(--timeline-gutter);
margin: 0;
list-style: none;
}
.timeline__entries::before {
position: absolute;
top: 0.6em;
bottom: 0.6em;
left: 5px;
width: 1px;
background: var(--color-border);
content: "";
}
.timeline__entries > li + li {
margin-top: var(--space-5);
}
/* The stud. Hollow for an ordinary entry, filled for one the customer answered
— a Grimoár where the person wrote something back should show it at a
glance. */
.timeline-entry {
position: relative;
}
.timeline-entry::before {
position: absolute;
top: 0.55em;
left: calc(-1 * var(--timeline-gutter) + 1px);
width: 9px;
height: 9px;
border: 1px solid var(--color-gold-dim);
border-radius: var(--radius-pill);
background: var(--color-bg);
content: "";
}
.timeline-entry--answered::before {
border-color: var(--color-gold);
background: var(--color-gold);
}
.timeline-entry__head {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
align-items: baseline;
}
.timeline-entry__when {
font-size: var(--text-xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.timeline-entry__title {
margin: var(--space-1) 0 0;
font-family: var(--font-display);
font-size: var(--text-lg);
line-height: var(--leading-snug);
color: var(--color-text);
}
.timeline-entry__body {
display: -webkit-box;
overflow: hidden;
margin: var(--space-2) 0 0;
font-size: var(--text-sm);
color: var(--color-text-secondary);
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* =============================================================================
"Co si o vás Čaroděj pamatuje" (/grimoar/pamet). The rows reuse .export-list
for their layout — a list of stacked blocks with no markers is exactly what
that is — and add only the two things a memory needs that a GDPR request does
not: the sentence set at reading size, and a hairline between rows so that a
card of eight claims does not read as one paragraph.
============================================================================= */
.memory + .memory {
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
/* The claim itself. Larger than .field__help on purpose: this is the sentence
the whole page exists to show, and the badges above it are the metadata. */
.memory__text {
margin: 0;
color: var(--color-text);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
}
/* =============================================================================
The theme statistics block (spec sec. 65) — "za poslední rok jste 17× řešil
práci". A bar chart drawn in one gradient per row, because a chart library
for five numbers would be a dependency for five numbers.
============================================================================= */
.theme-list {
display: grid;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.theme-row {
display: grid;
grid-template-columns: minmax(6rem, 10rem) 1fr auto;
gap: var(--space-3);
align-items: center;
font-size: var(--text-sm);
}
.theme-row__name {
overflow: hidden;
color: var(--color-text-secondary);
text-overflow: ellipsis;
white-space: nowrap;
}
.theme-row__bar {
height: 6px;
border-radius: var(--radius-pill);
background: var(--color-surface-2);
}
.theme-row__fill {
display: block;
height: 100%;
border-radius: var(--radius-pill);
background: linear-gradient(to right, var(--color-gold-deep), var(--color-gold));
}
.theme-row__count {
color: var(--color-gold);
font-variant-numeric: tabular-nums;
}
/* The filter chips above the timeline. A link per option, the active one
inverted, and a "vše" that clears everything. */
.filter-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.filter-chip {
padding: var(--space-1) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
color: var(--color-text-secondary);
font-size: var(--text-xs);
text-decoration: none;
transition: border-color var(--transition-fast), color var(--transition-fast);
}
.filter-chip:hover {
border-color: var(--color-gold-line);
color: var(--color-text);
}
.filter-chip--active {
border-color: var(--color-gold);
background: var(--color-gold-wash);
color: var(--color-gold-bright);
}
/* =============================================================================
Chat — the AI Čaroděj (M11, spec sec. 58–60)
The one screen in the application that is a conversation rather than a
document, and the design has to say so without leaving the observatory: no
speech-bubble tails, no avatars, no colour-coded chat app. Two registers
instead — the person's words on a plain recessed plate, the Čaroděj's in the
display serif on the surface the rest of the site uses for what it has
written. The difference between "what you said" and "what was said to you" is
then the same difference the site already makes between a form and a reading.
============================================================================= */
.chat-thread {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.chat-turn {
display: flex;
flex-direction: column;
gap: var(--space-2);
max-width: 46ch;
}
/* Right for the person, left for the Čaroděj. margin-inline-start rather than
align-self, so the plate keeps its own width and only its position moves. */
.chat-turn--user {
margin-inline-start: auto;
align-items: flex-end;
}
.chat-turn--wizard {
margin-inline-end: auto;
}
.chat-turn__who {
color: var(--color-text-muted);
font-size: var(--text-2xs);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.chat-turn__body {
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
line-height: var(--leading-normal);
/* The person's own words survive their own line breaks. */
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.chat-turn--user .chat-turn__body {
background: var(--color-bg-deep);
color: var(--color-text-secondary);
}
.chat-turn--wizard .chat-turn__body {
border-color: var(--color-gold-line);
background: var(--color-surface);
box-shadow: var(--glow-inset);
color: var(--color-text);
font-family: var(--font-display);
font-size: var(--text-lg);
}
/* "Čaroděj listuje vaším Grimoárem…" — the record that a tool ran. A rule with
the sentence sitting on it: quieter than a message, and clearly not one. */
.chat-activity {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--color-text-muted);
font-size: var(--text-xs);
font-style: italic;
}
.chat-activity::before,
.chat-activity::after {
flex: 1;
height: 1px;
background: var(--color-gold-line);
content: '';
opacity: 0.5;
}
/* The compose box — the form itself, so the textarea, the counter and the
button share one plate and read as a single control. */
.chat-compose {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-md);
}
.chat-compose .textarea {
resize: vertical;
}
.chat-compose__actions {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
/* "Dnes máte ještě 3 zprávy zdarma." Small, factual and always visible: a price
somebody finds out about afterwards is a price they complain about. */
.chat-quota {
margin: 0;
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.chat-quota--paid {
color: var(--color-warning);
}
/* One row of the thread list. The whole row is the link, so the target is the
plate and not the four words on it. */
.conversation-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-border);
color: inherit;
text-decoration: none;
transition: border-color var(--transition-fast);
}
.conversation-row:hover {
border-color: var(--color-gold-line);
}
.conversation-row:hover .conversation-row__title {
color: var(--color-gold-bright);
}
.conversation-row__title {
font-family: var(--font-display);
font-size: var(--text-lg);
transition: color var(--transition-fast);
}
.conversation-row__when {
flex: none;
color: var(--color-text-muted);
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
}
/* Voice — dictation into the composer and reading the answers back
(spec sec. 61, F5c).
Every control here is a `.btn.btn--ghost.btn--sm` and nothing more, on
purpose. The primary gilding is already spent once per view on "Odeslat" —
the design system allows exactly that — and a second gold control beside it
would make the page look like it is asking for two things at once. Voice is an
alternative way to do what the page already does, and it should read as one.
The active state is a hairline in gold rather than a fill, which is the same
rule the rest of the observatory follows: gold as a line, never as a plane. It
is deliberately not red — a "recording" dot borrowed from a voice-memo app
would be the one piece of somebody else's visual language on the site. */
/* The transcript and its read-aloud controls, as one block. It carries no
layout of its own — the thread inside it already spaces its own turns — and
exists so that the controller has something to bind to that can see both. */
.chat-transcript {
display: block;
}
/* `:not([hidden])` because the read-aloud row on the thread ships with the
`hidden` attribute and an author `display` would beat the user agent's
`[hidden] { display: none }` — leaving two dead buttons on a page with
JavaScript off, which is the one thing the attribute is there to prevent. */
.chat-voice:not([hidden]) {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
/* On the thread, the read-aloud controls sit above the transcript as their own
quiet row rather than inline with anything. */
.chat-voice--thread {
margin-bottom: var(--space-3);
}
.chat-voice__button {
transition: border-color var(--transition-fast), color var(--transition-fast);
}
.chat-voice__button--active {
border-color: var(--color-gold-line);
color: var(--color-gold-bright);
}
/* The microphone glyph. `currentColor` so it follows the button through its
states, and `flex: none` so a long label cannot squash it. */
.chat-voice__icon {
flex: none;
color: currentcolor;
}
.chat-voice__note {
margin: 0;
}
/* The per-answer play button, tucked under the Čaroděj's words rather than
floated over them: the answers are long, and a control overlapping the last
line of a reading is a control in the way of the thing it is about. */
.chat-turn__play {
align-self: flex-start;
margin-top: var(--space-2);
}
@media (width <= 40rem) {
.chat-turn {
max-width: 100%;
}
}
/* Hands-free voice mode — voice v2 (spec sec. 61, P15).
A strip above the compose box: one ghost button, a moving indicator, a line
of status and, while somebody is talking, the live transcript under it. It is
its own row rather than another control in the button cluster because the
transcript needs the width, and a growing transcript in the same row as
"Odeslat" would push the send button around the page while somebody spoke.
The indicator is three gold bars, not a red dot. A recording light borrowed
from a voice-memo app would be the only piece of somebody else's visual
language on the site; gold moving on a hairline is this site's, and it is the
same restraint .reading-wait__sigil shows for the same kind of waiting. */
/* `:not([hidden])` and not a bare `display`, here and on the wave below, and it
is not a flourish: an author rule beats the user agent's `[hidden] { display:
none }`, so a plain `display: flex` would make the whole panel visible in a
browser with JavaScript off — the one case the `hidden` attribute in the
template exists for. */
.voice-mode:not([hidden]) {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.voice-mode__bar {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.voice-mode__button {
transition: border-color var(--transition-fast), color var(--transition-fast);
}
.voice-mode__button--active {
border-color: var(--color-gold-line);
color: var(--color-gold-bright);
}
/* `currentColor` so it follows the button through its states, `flex: none` so a
long label cannot squash it. */
.voice-mode__icon {
flex: none;
color: currentcolor;
}
.voice-mode__status {
margin: 0;
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.voice-mode--listening .voice-mode__status,
.voice-mode--speaking .voice-mode__status {
color: var(--color-gold-dim);
}
/* A refused microphone or a room with nobody in it. Warning rather than danger:
nothing was lost and nothing is broken, somebody just has to do something. */
.voice-mode--error .voice-mode__status {
color: var(--color-warning);
}
.voice-mode__wave:not([hidden]) {
display: inline-flex;
align-items: flex-end;
gap: 3px;
height: 0.875rem;
}
.voice-mode__wave > span {
width: 2px;
height: 100%;
border-radius: var(--radius-pill);
background: var(--color-gold);
transform: scaleY(0.25);
transform-origin: bottom;
}
/* Listening: quick and uneven, the way a level meter moves. */
.voice-mode--listening .voice-mode__wave > span {
animation: voice-wave 1.1s ease-in-out infinite;
}
.voice-mode--listening .voice-mode__wave > span:nth-child(2) {
animation-delay: 0.18s;
}
.voice-mode--listening .voice-mode__wave > span:nth-child(3) {
animation-delay: 0.36s;
}
/* Speaking: the same bars, half the speed. The difference is what tells
somebody across the room whose turn it is without reading the line. */
.voice-mode--speaking .voice-mode__wave > span {
animation: voice-wave 2.2s ease-in-out infinite;
}
.voice-mode--speaking .voice-mode__wave > span:nth-child(2) {
animation-delay: 0.3s;
}
.voice-mode--speaking .voice-mode__wave > span:nth-child(3) {
animation-delay: 0.6s;
}
/* Waiting on the model: no motion of its own, only the slow breath the reading
page uses — because nothing is happening in the room, it is happening on a
server, and a busy indicator would be claiming otherwise. */
.voice-mode--sending .voice-mode__wave > span {
transform: scaleY(0.6);
animation: reading-pulse 2.6s ease-in-out infinite;
}
@keyframes voice-wave {
0%, 100% { transform: scaleY(0.25); }
50% { transform: scaleY(1); }
}
/* The live transcript: a quiet italic behind a gold hairline, the same shape the
thread gives a quoted thing. It is a guess being revised, and it is set to
read as one — nobody should mistake it for what was sent. */
.voice-mode__heard {
margin: 0;
padding: var(--space-2) var(--space-3);
border-left: 1px solid var(--color-gold-line);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: var(--color-gold-wash);
color: var(--color-text-secondary);
font-size: var(--text-sm);
font-style: italic;
}
.voice-mode__note {
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.voice-mode--listening .voice-mode__wave > span,
.voice-mode--speaking .voice-mode__wave > span,
.voice-mode--sending .voice-mode__wave > span {
transform: scaleY(0.6);
animation: none;
}
}
/* =============================================================================
The public knowledge pages: /tarot/karty, /tarot/karty/{slug}, /snar and
/snar/{slug} (spec sec. 87–90).
These are the pages a stranger arrives on from a search result, and they are
judged in about a second against whatever else was on that result page. So
they are built out of the plates and rules the rest of the site already uses
rather than out of a "content" style of their own — five new blocks, and four
of them exist because a catalogue needs to be navigable in ways a reading
never did.
============================================================================= */
/* Breadcrumbs: Tarot → Karty → Věž.
Hairline-small and muted, because a breadcrumb is orientation and not
navigation — it answers "where am I" for somebody who arrived sideways, and
it is the trail a search engine prints under the result. The separator is the
system's diamond, drawn by CSS so it is never read aloud between every pair
of words.
*/
.breadcrumbs {
padding-block-start: var(--space-6);
}
.breadcrumbs__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
padding: 0;
margin: 0;
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
list-style: none;
}
.breadcrumbs__item {
display: flex;
gap: var(--space-3);
align-items: center;
color: var(--color-text-muted);
}
.breadcrumbs__item + .breadcrumbs__item::before {
color: var(--color-gold-dim);
content: '\25C6';
font-size: 0.5em;
}
.breadcrumbs__item a {
color: var(--color-text-secondary);
text-decoration: none;
transition: color var(--transition-fast);
}
.breadcrumbs__item a:hover {
color: var(--color-gold-bright);
}
/* A card plate that is a link — the index pages, where seventy-eight plates are
seventy-eight destinations.
The anchor *is* the plate rather than sitting inside it, so the whole
engraving is the target and not the two words on it. The hover is the one the
.card already uses (gold line, gold glow), so a plate and a card answer a
pointer the same way. */
.card-plate--link {
text-decoration: none;
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-fast);
}
.card-plate--link:hover,
.card-plate--link:focus-visible {
border-color: var(--color-gold-dim);
box-shadow: var(--shadow-sm), var(--glow-inset), var(--glow-gold);
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.card-plate--link:hover,
.card-plate--link:focus-visible {
transform: none;
}
}
/* An index of many short names wants narrower plates than a spread of three:
at 8.5rem a suit of fourteen wraps into rows of three on a laptop, which
reads as a list rather than as a deck laid out. */
.card-row--index {
gap: var(--space-3);
grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}
.card-row--index .card-plate {
min-height: 8.5rem;
}
.card-row--index .card-plate__name {
font-size: var(--text-lg);
}
/* The same auto-fit grid holding prose cards rather than plates: the four
thematic tarot pages on /tarot/karty and the cross-links between them. A
column has to fit two sentences instead of a card name, so the track is
twice as wide — below about 34rem it collapses to one column, which is what
a teaser wants anyway. */
.card-row--wide {
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
/* The head of an entry page: the plate on the left, the short reading beside
it. Deliberately the same two-column arrangement as .daily-card — one card
introduced by one paragraph is the same problem twice — and a separate rule
rather than a second selector on that one, because the karta dne is a lead
magnet and this is a catalogue entry, and the two will not always want the
same measurements. */
.entry-head {
display: grid;
gap: var(--space-6);
align-items: start;
}
@media (min-width: 40rem) {
.entry-head {
grid-template-columns: 12rem 1fr;
}
}
.entry-head__plate {
min-height: 15rem;
}
/* The facts strip under a heading: „Velká arkána · číslo 16 · živel oheň".
Runs inline, wraps on a phone, and is separated by the same diamond the
breadcrumbs use. */
.entry-facts {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
padding: 0;
margin: 0;
font-size: var(--text-xs);
color: var(--color-text-muted);
list-style: none;
}
.entry-facts__item {
display: flex;
gap: var(--space-3);
align-items: center;
}
.entry-facts__item + .entry-facts__item::before {
color: var(--color-gold-dim);
content: '\25C6';
font-size: 0.5em;
}
/* The six changing lines on a hexagram page (spec sec. 50).
A definition list in everything but the markup: a number, then a paragraph.
The counter is *not* CSS-generated, because the numbers are content — „pátá
čára" is what a reader arrives looking for, and a number that exists only in a
stylesheet cannot be copied, searched for or read aloud.
Two columns above a phone so the numbers form a rail the eye can jump down,
one column below it, where a 5rem gutter would leave the text at forty
characters. */
.hexagram-lines {
display: grid;
gap: var(--space-4);
padding: 0;
margin-block-start: var(--space-4);
list-style: none;
}
.hexagram-lines__item {
display: grid;
gap: var(--space-1) var(--space-4);
}
@media (min-width: 40rem) {
.hexagram-lines__item {
grid-template-columns: 6rem 1fr;
}
}
.hexagram-lines__number {
font-size: var(--text-2xs);
color: var(--color-gold-dim);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
.hexagram-lines__text {
color: var(--color-text);
}
/* =============================================================================
Legal pages — /obchodni-podminky, /ochrana-osobnich-udaju, /kontakt (M12).
Long documents nobody reads for pleasure and everybody reads under pressure:
somebody wants to know whether they can cancel, or what happens to their
data. So the type is set for scanning rather than for atmosphere — numbered
headings that can be cited, a measure short enough to track across, and
tables where the answer is genuinely tabular.
Built out of the tokens like everything else; the only new colour here is the
one on .todo-legal, which is deliberately loud.
============================================================================= */
.legal {
--stack-space: var(--space-5);
}
.legal__meta {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.legal__section {
max-inline-size: 62ch;
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-border);
}
.legal__section > * + * {
margin-block-start: var(--space-4);
}
.legal__section h2 {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 600;
line-height: var(--leading-snug);
color: var(--color-text);
}
.legal__section h3 {
font-size: var(--text-lg);
font-weight: 600;
color: var(--color-text-secondary);
}
.legal__section p,
.legal__section li {
line-height: var(--leading-relaxed);
color: var(--color-text-secondary);
}
.legal__section ul {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-inline-start: var(--space-5);
}
/* The operator's identity block and the like: a plate, so the details somebody
came for are findable without reading the paragraph around them. */
.legal__party {
padding: var(--space-5);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.legal__party > * + * {
margin-block-start: var(--space-3);
}
/* Wider than the prose it sits in — a three-column table squeezed to 62ch
wraps every cell to two lines and stops being a table. */
.legal__table {
inline-size: 100%;
max-inline-size: none;
font-size: var(--text-sm);
border-collapse: collapse;
}
.legal__table th,
.legal__table td {
padding: var(--space-3) var(--space-4);
text-align: start;
vertical-align: top;
border-block-end: 1px solid var(--color-border);
}
.legal__table th {
font-size: var(--text-2xs);
font-weight: 600;
color: var(--color-gold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
border-block-end-color: var(--color-gold-line);
}
.legal__table td {
color: var(--color-text-secondary);
}
.legal__table tbody tr:last-child td {
border-block-end: 0;
}
.legal__table code {
color: var(--color-text);
}
/* The two sections that must not be skimmed past: the withdrawal clause and
the entertainment disclaimer. Given the gilded ground the summary of a
reading uses, which is the strongest "read this" the system has. */
.legal__section--highlight,
.legal__section--disclaimer {
padding: var(--space-5);
background-color: var(--color-gold-wash);
border: 1px solid var(--color-gold-line);
border-block-start-color: var(--color-gold-line);
border-radius: var(--radius-sm);
}
/* The sentence spec sec. 130 fixes the wording of. Set in the display face at
reading size so it carries as a statement rather than as fine print. */
.legal__disclaimer {
font-family: var(--font-display);
font-size: var(--text-xl);
line-height: var(--leading-relaxed);
color: var(--color-text);
}
/* Unfilled legal detail. Loud on purpose — copper on ink, in the mono face,
with a rule under it — because the failure this guards against is somebody
skimming the page before launch and not noticing that the IČO is a bracket.
LegalPlaceholdersArePendingTest is the other half of the same guard. */
.todo-legal {
padding: 0.1em 0.4em;
font-family: var(--font-mono);
font-size: 0.9em;
color: var(--color-text-inverse);
background-color: var(--color-warning);
border-radius: var(--radius-xs);
}
/* =============================================================================
The § 1837 notice by a payment button, and the standing disclaimer in the
footer. Both are fine print in the literal sense: present, legible, and not
competing with the thing they qualify.
============================================================================= */
.digital-consent {
max-inline-size: 46ch;
margin-block-start: var(--space-3);
font-size: var(--text-xs);
line-height: var(--leading-normal);
color: var(--color-text-muted);
}
.site-footer__disclaimer {
margin-block-start: var(--space-5);
font-size: var(--text-xs);
line-height: var(--leading-normal);
color: var(--color-text-muted);
}
/* =============================================================================
Cookie notice — a statement, not a consent dialog. See
assets/controllers/cookie_notice_controller.js for why there is no choice to
offer.
Because it is not a dialog it does not behave like one: no overlay, no focus
trap, nothing blocked underneath. It sits at the bottom of the viewport,
sized by its one sentence, and goes away for good when dismissed.
============================================================================= */
.cookie-notice {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: 60;
padding-block: var(--space-3);
background-color: rgb(6 8 15 / 94%);
border-block-start: 1px solid var(--color-gold-line);
backdrop-filter: blur(14px) saturate(140%);
}
.cookie-notice__inner {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-5);
align-items: center;
justify-content: space-between;
}
.cookie-notice__text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.cookie-notice__button {
flex: none;
}
/* The bar is fixed, so at the very bottom of a page it would sit on top of the
footer — which is where the legal links and the disclaimer live, i.e. exactly
what somebody following „Co to znamená" is scrolling towards.
:has() rather than a class the controller toggles, so the reservation appears
and disappears with the bar itself and there is no state to keep in step. It
is also correctly absent for the visitor who has already dismissed it: the
controller leaves the element `hidden`, the selector does not match, and no
dead space is left behind. Browsers without :has() simply get the overlap
they would have got anyway. */
body:has(.cookie-notice:not([hidden])) {
padding-block-end: 5rem;
}
/* =============================================================================
Numerology (spec sec. 44, 89).
Four components, and all four exist because a number is not a word. The
engraving vocabulary the rest of the site is built from — plates, hairlines,
gold as a line — carries a card's *name* well and a single digit badly: set
at body size, „7" is a typo, and set at display size it needs the arithmetic
under it or it is an assertion.
That arithmetic is the whole point of the module (spec sec. 45: the values are
computed deterministically and the AI only interprets them), so .numeral and
.numeral__steps are one idea in two selectors — a number and the sum that
produced it — and neither should be used without the other.
============================================================================= */
.numeral-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: var(--space-4);
}
.numeral {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
background-image: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
/* ---------------------------------------------------------------------------
Birth-place picker (F2a, spec sec. 37)
The candidate list under the birth-place field. It is a plain
rather
than a