/*
Theme Name: Dětská univerzita
Theme URI: https://detskauniverzita.tul.cz/
Description: Veřejná prezentace Dětské univerzity TUL. Data o kurzech a přihlášky obstarává systém DUis přes API.
Author: Jan Ráček
Author URI: https://honzuvkod.dev/
Version: 2.3.0
Text Domain: duweb
*/
/* ─────────────────────────────────────────────────────────────────────────────
Fonts
───────────────────────────────────────────────────────────────────────────*/
/* Inter is enqueued from inc/include-css.php, not @import-ed here.
An @import inside a stylesheet is discovered only after this file has been
downloaded and parsed, so the font request is serialised behind it — two
round trips before any text can be painted in its real face. A and the ; let it absorb the
remaining height and push the footer to the bottom on short pages. */
#main-content {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
#main-content > main {
flex: 1 0 auto;
}
p { font-family: var(--font-body); color: var(--ink); }
h1, h2, h3, h4 {
font-family: var(--font-head);
color: var(--brand);
line-height: 1.15;
letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
a { color: var(--brand-600); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--brand-700); }
img { max-width: 100%; height: auto; }
::selection { background: var(--brand-300); color: #fff; }
:focus-visible {
outline: 3px solid var(--brand-300);
outline-offset: 2px;
border-radius: 4px;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 2000;
background: var(--brand);
color: #fff;
padding: .75rem 1.25rem;
border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }
/* ─────────────────────────────────────────────────────────────────────────────
Utilities
───────────────────────────────────────────────────────────────────────────*/
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.vertical-align { display: flex; flex-direction: column; justify-content: center; }
.darkener {
position: absolute;
inset: 0;
z-index: 10;
background: linear-gradient(180deg, rgba(29,26,46,.30) 0%, rgba(29,26,46,.62) 100%);
}
.button {
--btn-bg: var(--brand-gradient);
display: inline-flex;
align-items: center;
gap: .6rem;
background-image: var(--btn-bg);
color: #fff;
font-family: var(--font-body);
font-weight: 600;
padding: .95rem 2rem;
border: none;
border-radius: var(--pill);
text-decoration: none;
box-shadow: var(--shadow);
transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .2s var(--ease);
}
.button:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); filter: saturate(1.08); }
.button:active { transform: translateY(0); }
.button-ghost {
background: transparent;
background-image: none;
color: var(--brand);
border: 2px solid var(--brand);
box-shadow: none;
}
.button-ghost:hover { background: var(--brand); color: #fff; }
#filter {
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(circle, rgba(0,0,0,.55) 40%, rgba(0,0,0,0) 100%);
}
/* ─────────────────────────────────────────────────────────────────────────────
Header
───────────────────────────────────────────────────────────────────────────*/
header {
position: sticky;
top: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: .85rem clamp(1rem, 4vw, 3rem);
background: rgba(89, 72, 173, .92);
backdrop-filter: saturate(160%) blur(12px);
-webkit-backdrop-filter: saturate(160%) blur(12px);
box-shadow: 0 8px 30px -12px rgba(29,26,46,.55);
}
/* The logo file is 3075 x 266. `width: auto` with only `max-height` set leaves
the width to the aspect ratio, which at 56px tall is 648px — wider than any
phone, and as a flex item with `min-width: auto` it refused to shrink. That
was the horizontal scroll on the front page: `overflow-x: hidden` on
hid the scrollbar without removing the overflow. Constrain the width too. */
header .custom-logo-link {
display: flex;
align-items: center;
min-width: 0;
flex: 0 1 auto;
}
header .custom-logo,
header .custom-logo-link img {
display: block;
width: auto;
height: auto;
max-height: clamp(32px, 7vw, 56px);
max-width: min(58vw, 380px);
object-fit: contain;
padding-left: .25rem;
}
header nav ul {
display: flex;
align-items: center;
gap: .35rem;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
}
header nav ul li { font-family: var(--font-head); white-space: nowrap; }
header nav ul li a {
color: rgba(255,255,255,.92);
text-decoration: none;
padding: .5rem .95rem;
border-radius: var(--pill);
transition: background .2s var(--ease), color .2s var(--ease);
}
header nav ul li a:hover,
header nav ul li.current-menu-item a {
color: #fff;
background: rgba(255,255,255,.16);
}
/* Mobile nav toggle (progressive enhancement) */
.nav-toggle {
display: none;
background: rgba(255,255,255,.14);
color: #fff;
border: none;
border-radius: var(--r-sm);
padding: .55rem .7rem;
font-size: 1.25rem;
cursor: pointer;
}
/* ─────────────────────────────────────────────────────────────────────────────
Front page — hero
───────────────────────────────────────────────────────────────────────────*/
#welcome-banner {
position: relative;
width: 100%;
min-height: clamp(440px, 78vh, 760px);
display: grid;
place-items: center;
background-position: center;
background-size: cover;
isolation: isolate;
}
#welcome-banner::after {
content: "";
position: absolute;
inset: 0;
z-index: 9;
background: linear-gradient(180deg, rgba(29,26,46,.25), rgba(66,53,132,.65));
}
#welcome-banner .text {
position: relative;
z-index: 11;
text-align: center;
max-width: 760px;
padding: clamp(2rem, 5vw, 3.5rem);
margin: 1.5rem;
background: rgba(255,255,255,.86);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
animation: rise .8s var(--ease) both;
}
#welcome-banner .text h1 { color: var(--brand); margin: 0 0 1.75rem; }
#welcome-banner .text p { color: var(--muted); font-size: 1.1rem; margin: 0 0 1.75rem; }
@keyframes rise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* Text banners */
.text-banner {
text-align: center;
max-width: 820px;
margin-inline: auto;
padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
}
.text-banner h2 { margin: 0 0 1rem; }
.text-banner p { color: var(--muted); font-size: 1.12rem; margin: 0 auto 1.5rem; max-width: 64ch; }
/* Section eyebrow + heading accent */
.text-banner h2::after {
content: "";
display: block;
width: 64px;
height: 4px;
margin: 1rem auto 0;
border-radius: var(--pill);
background: var(--brand-gradient);
}
/* ─────────────────────────────────────────────────────────────────────────────
Front page — feature blocks ("tantalizers")
───────────────────────────────────────────────────────────────────────────*/
#tantalizers {
position: relative;
background-position: center;
background-size: cover;
padding: clamp(3rem, 7vw, 6rem) 0;
isolation: isolate;
}
#tantalizers::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(247,246,252,.86), rgba(247,246,252,.94));
}
.tantalizer {
display: flex;
width: min(100% - 2.5rem, 1040px);
margin: 2rem auto;
overflow: hidden;
background: var(--surface);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
position: relative;
z-index: 11;
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tantalizer:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tantalizer .wrapper {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
}
.tantalizer .wrapper .text { padding: clamp(1.5rem, 4vw, 3rem); width: 88%; margin: auto; }
.tantalizer .wrapper .text h2 { margin-top: 0; }
.tantalizer .wrapper .text p { color: var(--muted); margin-bottom: 0; }
.tantalizer .img {
width: 50%;
min-height: 340px;
background-position: center;
background-size: cover;
}
.tantalizer-left { background: var(--surface); }
.tantalizer-right { background: var(--brand-gradient); }
.tantalizer-right h2, .tantalizer-right p { color: #fff !important; }
/* ─────────────────────────────────────────────────────────────────────────────
Generic page
───────────────────────────────────────────────────────────────────────────*/
main { padding: clamp(2.5rem, 6vw, 5rem) 0; }
main.container { width: min(100% - 2.5rem, var(--container)); }
main h1 { color: var(--brand); }
.page-hero {
text-align: center;
padding: 2rem 0 1rem;
}
.page-hero hr,
main hr {
border: none;
height: 1px;
background: var(--line);
margin: 1.5rem 0 2.5rem;
}
/* ─────────────────────────────────────────────────────────────────────────────
Courses grid
───────────────────────────────────────────────────────────────────────────*/
#courses-view { margin: 2.5rem 0; }
/* ── Group heading ──────────────────────────────────────────────────────────
The category a set of variants share. Deriving it is in register-courses.php;
the rule here is only that it must read as a section, not as another card. */
.course-group { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.course-group-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .5rem .9rem;
margin: 0 0 1.5rem;
padding-bottom: .85rem;
border-bottom: 1px solid var(--line);
}
.course-group-head h2 {
margin: 0;
display: flex;
align-items: center;
gap: .85rem;
flex: 1 1 auto;
}
.course-group-head h2::before {
content: "";
flex: none;
width: 6px;
height: 1.15em;
border-radius: var(--pill);
background: var(--brand-gradient);
}
.course-group-count {
flex: none;
font-family: var(--font-head);
font-size: .85rem;
letter-spacing: .02em;
color: var(--muted);
background: var(--brand-050);
border: 1px solid var(--brand-100);
border-radius: var(--pill);
padding: .2rem .8rem;
}
/* ── The grid ───────────────────────────────────────────────────────────────*/
.courses-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: clamp(1rem, 2vw, 1.75rem);
align-items: start;
}
/* ── A course card ──────────────────────────────────────────────────────────
Was a photo with white text laid over it. Course names here run to seventy
characters of Czech, and set over a photograph at four lines they were hard
to read and impossible to keep contrast-safe across every uploaded image.
The photograph is now a header and the words sit on a solid panel, which also
leaves room to say the thing a parent actually wants to know: how many places
are left. */
.course {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
text-decoration: none;
color: inherit;
box-shadow: var(--shadow-sm);
transition: transform .35s var(--ease), box-shadow .35s var(--ease),
border-color .35s var(--ease);
isolation: isolate;
}
.course:hover,
.course:focus-visible {
transform: translateY(-6px);
border-color: var(--brand-100);
box-shadow: var(--shadow-lg);
}
.course:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.course-media {
position: relative;
aspect-ratio: 16 / 9;
background: var(--brand-100);
overflow: hidden;
}
/* No photograph of its own: a branded panel with the course code, never a
photograph of some other course. */
.course-media-blank {
display: grid;
place-items: center;
background: var(--brand-gradient);
}
.course-code {
font-family: var(--font-head);
font-size: clamp(1.6rem, 5vw, 2.4rem);
letter-spacing: .06em;
color: #fff;
opacity: .92;
text-align: center;
padding: 0 1rem;
}
/* The wash exists to even out photographs; over the flat panel it only muddies
the code. */
.course-media-blank::after { display: none; }
.course-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.1s var(--ease);
}
.course:hover .course-media img { transform: scale(1.06); }
/* A wash of brand colour over every photograph, so a grid of pictures taken by
different people on different days still reads as one page. */
.course-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(89,72,173,.10) 0%, rgba(29,26,46,.42) 100%);
}
.course-body {
display: flex;
flex-direction: column;
gap: .7rem;
padding: 1.15rem 1.25rem 1.25rem;
flex: 1 0 auto;
}
.course-name {
margin: 0;
font-size: 1.12rem;
line-height: 1.3;
color: var(--brand);
/* Three lines is enough to tell two variants apart; past that the card
stops being scannable. */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.course-excerpt {
margin: 0;
font-size: .9rem;
line-height: 1.55;
color: var(--muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.course-meta {
display: flex;
align-items: center;
gap: .55rem;
margin: 0;
font-size: .88rem;
color: var(--muted);
min-width: 0;
}
.course-meta i { color: var(--brand-300); width: 1rem; text-align: center; flex: none; }
.course-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Capacity ───────────────────────────────────────────────────────────────
A bar and the same number in words. "Poslední místa" alone never said whether
that meant one place or three. */
.course-capacity { display: flex; align-items: center; gap: .7rem; }
.capacity-bar {
flex: 1 1 auto;
height: 6px;
border-radius: var(--pill);
background: var(--brand-100);
overflow: hidden;
}
.capacity-bar > span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--ok);
transition: width .6s var(--ease);
}
.course-almost .capacity-bar > span { background: var(--warn); }
.course-full .capacity-bar > span { background: var(--danger); }
.capacity-text {
flex: none;
font-size: .8rem;
font-weight: 600;
color: var(--muted);
}
.course-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-top: auto;
padding-top: .85rem;
border-top: 1px solid var(--line);
}
.course-price {
font-family: var(--font-head);
font-size: 1.15rem;
color: var(--ink);
white-space: nowrap;
}
.course-more {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .88rem;
font-weight: 600;
color: var(--brand);
white-space: nowrap;
}
.course-more i { transition: transform .3s var(--ease); }
.course:hover .course-more i { transform: translateX(4px); }
/* A full course is still worth reading about — dimmed, not hidden. */
.course-full .course-media img { filter: grayscale(.55); }
/* ── Status badges ──────────────────────────────────────────────────────────*/
.badge,
.badge-free, .badge-almost, .badge-full, .badge-soon, .badge-followup {
display: inline-block;
padding: .3rem .85rem;
border-radius: var(--pill);
font-size: .78rem;
font-weight: 700;
letter-spacing: .01em;
color: #fff;
line-height: 1.5;
}
/* On a card the badge sits on the photo; elsewhere it is inline. */
.course-media .badge {
position: absolute;
z-index: 1;
top: .8rem;
right: .8rem;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 2px 10px rgba(20,16,40,.35);
max-width: calc(100% - 1.6rem);
}
.badge-free { background: var(--ok); }
.badge-almost { background: var(--warn); color: #3b2a00; }
.badge-full { background: var(--danger); }
.badge-soon { background: #b3261e; }
.badge-followup { background: var(--brand); }
/* ── "Enrolment is not open" banner ─────────────────────────────────────────
Lived as a