/* Schola Ludus – shared CSS
Fonts: Fraunces + IBM Plex Sans */
/* ---- Load fonts in (WPCode / Header) ----
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
-------------------------------------------------- */
:root{
--sl-bg: #ffffff;
--sl-alt: #f6f4f0;
--sl-text: #16181c;
--sl-muted: #4f5965;
--sl-line: rgba(22,24,28,.10);
--sl-accent: #F4DDBE; /* svetla měď */
--sl-accent-ink: #ffffff;
--sl-radius: 18px;
--sl-shadow: 0 16px 40px rgba(0,0,0,.08);
--sl-font-body: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
--sl-font-head: "Fraunces", ui-serif, Georgia, serif;
}
.sl-page{
font-family: var(--sl-font-body);
color: var(--sl-text);
background: var(--sl-bg);
line-height: 1.75;
}
.sl-page *{ box-sizing: border-box; }
.sl-page img{ max-width: 100%; height: auto; display: block; }
.sl-container{
max-width: 1380px;
margin: 0 auto;
padding: 0 8px;
}
.sl-section{ padding: 8px 0; }
.sl-section--tight{ padding: 16px 0 8px; }
.sl-section--alt{
background: var(--sl-alt);
border-top: 1px solid var(--sl-line);
border-bottom: 1px solid var(--sl-line);
.sl-topband {
width: 100%;
background: #fff;
border-bottom: 1px solid #eee;
}
.sl-topband img {
display: block;
width: 100%;
max-height: 180px;
object-fit: cover;
}
}
/* Typography */
/* WordPress Page Title uvnitř obsahu – sjednotit s Fraunces */
.wp-site-blocks .wp-block-post-title,
.wp-site-blocks h1.wp-block-post-title{
font-family: "Source Serif 4", serif;
font-weight: 300;
letter-spacing: -0.015em;
}
.sl-kicker{
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sl-muted);
}
.sl-h1{
font-size: clamp(36px, 5vw, 52px);
line-height: 1.15;
}
.sl-h2{
font-size: clamp(26px, 3vw, 34px);
line-height: 1.2;
}
.sl-h3{
font-size: 20px;
font-weight: 600;
}
.sl-lead{
font-size: clamp(16px, 1.7vw, 20px);
color: var(--sl-muted);
margin: 12px 0 0;
max-width: 72ch;
}
.sl-p{ margin: 0; color: var(--sl-muted); }
.sl-p + .sl-p{ margin-top: 12px; }
.sl-note{
margin: 16px 0 0;
color: rgba(22,24,28,.62);
max-width: 72ch;
font-size: 14px;
}
/* Links */
.sl-page a{ color: inherit; text-decoration: none; }
.sl-page a:hover{ text-decoration: none; }
/* Buttons */
.sl-actions{
display: flex;
gap: 12px;
flex-wrap: nowrap;
margin-top: 18px;
}
@media (max-width: 720px){
.sl-actions{
flex-wrap: wrap;
}
}
.sl-btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 6px;
border-radius: 14px;
border: 1px solid var(--sl-line);
font-weight: 600;
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
background: rgba(255,255,255,.70);
}
.sl-btn:hover{
transform: translateY(-1px);
box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.sl-btn--primary{
background: var(--sl-accent);
border-color: var(--sl-accent);
color: var(--sl-accent-ink);
}
.sl-btn--ghost{
background: rgba(255,255,255,.60);
color: var(--sl-text);
}
/* Hero */
.sl-hero{
position: relative;
padding: 10px 0 10px;
border-bottom: 1px solid var(--sl-line);
overflow: hidden;
}
.sl-hero::before{
content:"";
position:absolute;
inset:0;
background: none;
z-index: 0;
}
.sl-hero__inner{
position: relative;
z-index: 1;
}
.sl-hero__copy{ max-width: 88ch; }
/* Grid */
.sl-grid{
display: grid;
gap: 18px;
}
.sl-grid--2{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sl-gap-lg{ gap: 22px; }
@media (max-width: 920px){
.sl-grid--2{ grid-template-columns: 1fr; }
.sl-section{ padding: 14px 0; }
}
/* Banners */
.sl-banner{
position: relative;
min-height: 240px;
border-radius: 22px;
border: 1px solid var(--sl-line);
box-shadow: var(--sl-shadow);
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: translateY(0);
transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.sl-banner:hover{
transform: translateY(-2px);
box-shadow: 0 22px 50px rgba(0,0,0,.12);
filter: saturate(1.03) contrast(1.01);
}
.sl-banner__overlay{
position: absolute;
inset: 0;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 8px;
background: linear-gradient(180deg,
rgba(255,255,255,.04) 0%,
rgba(255,255,255,.76) 52%,
rgba(255,255,255,.90) 100%);
}
.sl-banner__title{
font-family: var(--sl-font-head);
font-size: 28px;
line-height: 1.1;
}
.sl-banner__desc{ color: var(--sl-muted); max-width: 52ch; }
.sl-banner__cta{ color: rgba(22,24,28,.68); font-weight: 600; }
/* banner backgrounds (two placeholders without text) */
.sl-banner--projekty{
background-image: url("/wp-content/uploads/scholaludus/projekty.webp");
}
.sl-banner--explorium{
background-image: url("/wp-content/uploads/scholaludus/explorium.webp");
}
/* Split sections */
.sl-split{
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 24px;
align-items: center;
}
.sl-split--reverse{
grid-template-columns: .95fr 1.05fr;
}
@media (max-width: 920px){
.sl-split, .sl-split--reverse{ grid-template-columns: 1fr; }
}
.sl-split__media{
margin: 0;
border-radius: 22px;
overflow: hidden;
border: 1px solid var(--sl-line);
box-shadow: var(--sl-shadow);
background: #fff;
}
/* Cards */
.sl-card{
background: rgba(255,255,255,.78);
border: 1px solid var(--sl-line);
border-radius: var(--sl-radius);
padding: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.sl-card--media{
padding: 14px;
}
.sl-caption{
color: rgba(22,24,28,.68);
font-size: 14px;
margin-top: 12px;
}
/* Lists */
.sl-list{
margin: 0;
padding-left: 18px;
color: var(--sl-muted);
}
.sl-list li + li{ margin-top: 8px; }
/* Callout */
.sl-callout{
margin-top: 20px;
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
padding: 18px;
border-radius: 20px;
border: 1px solid var(--sl-line);
background: rgba(255,255,255,.66);
box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
@media (max-width: 920px){
.sl-callout{ grid-template-columns: 1fr; }
}
.sl-steps{
margin: 0;
padding-left: 18px;
color: var(--sl-muted);
}
.sl-steps li + li{ margin-top: 8px; }
/* Tags */
.sl-mini{ margin-top: 12px; }
.sl-tags{
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 22px;
}
.sl-tag{
display: inline-flex;
padding: 7px 11px;
border-radius: 999px;
border: 1px solid var(--sl-line);
background: rgba(255,255,255,.70);
color: rgba(22,24,28,.72);
font-size: 14px;
}
/* Box */
.sl-box{
margin-top: 16px;
padding: 18px;
border-radius: 20px;
border: 1px solid var(--sl-line);
background: rgba(255,255,255,.72);
}
/* --- Banner grid: izolace od WP šablony --- */
.sl-banners,
.sl-banners *{
background: transparent;
}
.sl-banners{
position: relative;
overflow: hidden;
}
/* vypnout jakékoli pseudo-elementy (ty dělají ty svislé čáry) */
.sl-banners::before,
.sl-banners::after,
.sl-banners *::before,
.sl-banners *::after{
content: none !important;
display: none !important;
}
/* jistota layoutu */
.sl-banners .sl-grid{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
align-items: stretch;
}
/* aby linky vyplnily buňku a nelezly do pravého sloupce */
.sl-banners .sl-banner{
width: 100% !important;
min-height: 240px;
}
/* === FIX: bannery rozbité šablonou (Twenty Twenty-Five) === */
/* 1) vypnout veškeré pseudo-elementy (ty dělají svislé čárky / dekorace) */
.sl-banners::before,
.sl-banners::after,
.sl-banners *::before,
.sl-banners *::after{
content: none !important;
display: none !important;
}
/* 2) vynutit, že to je opravdu grid se dvěma sloupci */
.sl-banners .sl-grid{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
align-items: stretch !important;
}
/* 3) kdyby šablona něco udělala s width/max-width, tak to přebijeme */
.sl-banners{
width: 100% !important;
max-width: none !important;
}
/* 4) bannery musí vyplnit buňku */
.sl-banners .sl-banner{
width: 100% !important;
min-height: 240px;
}
/* 5) na mobilu jeden sloupec */
@media (max-width: 920px){
.sl-banners .sl-grid{
grid-template-columns: 1fr !important;
}
}
/* === Bannery: v gridu chci jen dva linky, všechno ostatní ignoruj === */
.sl-section--tight .sl-grid{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
}
/* cokoliv, co není banner, pryč (to jsou ty prázdné "karty") */
.sl-section--tight .sl-grid > :not(a.sl-banner){
display: none !important;
}
/* banner musí vyplnit buňku */
.sl-section--tight .sl-grid > a.sl-banner{
width: 100% !important;
min-height: 240px;
}
/* mobil */
@media (max-width: 920px){
.sl-section--tight .sl-grid{
grid-template-columns: 1fr !important;
}
}
/* === Bannery: background obrázky (vynutit) === */
.sl-banner{
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-color: #fff !important;
}
.sl-banner--projekty{
background-image: url("/wp-content/uploads/scholaludus/projekty.webp") !important;
}
.sl-banner--explorium{
background-image: url("/wp-content/uploads/scholaludus/explorium.webp") !important;
}
/* === ZMENŠENÍ PROSTORU NAD NÁZVEM STRÁNKY === */
/* wrapper obsahu stránky */
.wp-site-blocks main,
.wp-site-blocks .wp-block-post-content{
padding-top: 0 !important;
}
/* samotný název stránky (H1 z WP) */
.wp-block-post-title{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* někdy je tam ještě group kolem */
.wp-block-group{
padding-top: 0;
}
/* Header – zmenšit spodní padding */
.wp-site-blocks header,
.wp-block-template-part{
padding-bottom: 8px !important;
}
/* === zmenšit horní mezeru jen na homepage === */
body.home main#wp--skip-link-target.wp-block-group{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* někdy je ten padding v prvním group uvnitř mainu */
body.home main#wp--skip-link-target > .wp-block-group{
padding-top: 0 !important;
}
/* kdyby si WP držel spacing přes proměnnou */
body.home{
--wp--preset--spacing--60: 0px;
}
.projectgen-form label {
font-weight: 600;
}
.projectgen-form small.description {
font-weight: 400;
opacity: 0.85;
}