/* ============================================================ HARCOVNÍK — vizuální směry (témata) Aktivuje se třídou na : theme-stopa | theme-cisty | theme-denik Setniny (červená/žlutá/zelená) zůstávají ve všech. ============================================================ */ /* ------------------------------------------------------------ 1) LESNÍ STOPA — outdoor, vrstevnicová mapa, kompas, robustní ------------------------------------------------------------ */ html.theme-stopa { --bg: #eef0e6; --surface: #ffffff; --surface-2: #f5f6ed; --ink: #1c2a1e; --muted: #5d6a57; --line: rgba(28,42,30,.14); --line-strong: rgba(28,42,30,.3); --accent: var(--zelena); --accent-ink: #ffffff; --display: "Bricolage Grotesque", system-ui, sans-serif; --body: "Hanken Grotesk", system-ui, sans-serif; } html.theme-stopa body { background-color: var(--bg); background-image: repeating-linear-gradient(115deg, transparent 0 38px, color-mix(in oklab, var(--ink) 4%, transparent) 38px 39px), radial-gradient(120% 80% at 80% -10%, color-mix(in oklab, var(--zelena) 9%, transparent), transparent 60%); } html.theme-stopa .hero { background-image: radial-gradient(closest-side, color-mix(in oklab, var(--ink) 5%, transparent) 0 1px, transparent 1px), radial-gradient(closest-side, color-mix(in oklab, var(--ink) 7%, transparent) 0 1px, transparent 1px); background-size: 26px 26px, 26px 26px; background-position: 0 0, 13px 13px; } html.theme-stopa .brand__mark { border-radius: 0; background: none; } html.theme-stopa .hero h1 .script { font-family: "Caveat", cursive; } html.theme-stopa .section-head h2, html.theme-stopa .hero h1 { text-transform: none; } /* trail-marker eyebrow */ html.theme-stopa .eyebrow::before { width: 14px; height: 14px; background: var(--accent); border-radius: 0; transform: rotate(45deg); } /* ------------------------------------------------------------ 2) ČISTÝ ODDÍL — vzdušný, moderní, důvěryhodný; setniny jako akcent ------------------------------------------------------------ */ html.theme-cisty { --bg: #fbfbfa; --surface: #ffffff; --surface-2: #f4f5f6; --ink: #16181c; --muted: #6c727b; --line: rgba(22,24,28,.1); --line-strong: rgba(22,24,28,.22); --accent: #1f6d3a; --accent-ink: #ffffff; --display: "Hanken Grotesk", system-ui, sans-serif; --body: "Hanken Grotesk", system-ui, sans-serif; --radius: 16px; --radius-lg: 28px; --shadow: 0 1px 2px rgba(16,18,22,.05), 0 10px 30px -20px rgba(16,18,22,.4); } html.theme-cisty h1, html.theme-cisty h2, html.theme-cisty h3, html.theme-cisty h4 { letter-spacing: -.03em; font-weight: 800; } html.theme-cisty .brand__mark { border-radius: 0; background: none; color: inherit; } html.theme-cisty .hero h1 .script { font-family: var(--display); transform: none; color: var(--accent); font-weight: 800; } html.theme-cisty .eyebrow::before { background: linear-gradient(90deg, var(--cervena), var(--zluta), var(--zelena)); width: 34px; } html.theme-cisty .btn { box-shadow: none; } html.theme-cisty .btn:hover { box-shadow: 0 12px 26px -14px var(--accent); } /* tri-colour top hairline on cards */ html.theme-cisty .news__card, html.theme-cisty .value { position: relative; } html.theme-cisty .tabor { background: linear-gradient(180deg, var(--surface), var(--surface)); } /* ------------------------------------------------------------ 3) TÁBOROVÝ DENÍK — papír, dřevo, razítka, ručně psané, řemeslné ------------------------------------------------------------ */ html.theme-denik { --bg: #efe6d2; --surface: #fbf5e7; --surface-2: #f4ead3; --ink: #2f2415; --muted: #7a6a4f; --line: rgba(47,36,21,.18); --line-strong: rgba(47,36,21,.34); --accent: #9a3b27; --accent-ink: #fbf5e7; --display: "Newsreader", Georgia, serif; --body: "Hanken Grotesk", system-ui, sans-serif; --radius: 8px; --radius-lg: 14px; } html.theme-denik h1, html.theme-denik h2, html.theme-denik h3 { font-weight: 600; letter-spacing: -.01em; } html.theme-denik body { background-color: var(--bg); background-image: radial-gradient(closest-side at 50% 50%, rgba(120,90,40,.05), transparent), url("data:image/svg+xml;utf8,"); } html.theme-denik .brand__mark { border-radius: 0; background: none; transform: rotate(-3deg); } html.theme-denik .pill, html.theme-denik .news__card, html.theme-denik .setnina, html.theme-denik .value, html.theme-denik .harc, html.theme-denik .tabor, html.theme-denik .cc, html.theme-denik .acc__item, html.theme-denik .form { box-shadow: 2px 3px 0 color-mix(in oklab, var(--ink) 12%, transparent); } html.theme-denik .hero h1 .script { font-family: "Caveat", cursive; transform: rotate(-4deg); } html.theme-denik .eyebrow { font-family: "Caveat", cursive; font-size: 21px; letter-spacing: 0; text-transform: none; color: var(--accent); } html.theme-denik .eyebrow::before { background: var(--accent); } html.theme-denik .btn { border-radius: 6px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); } html.theme-denik .btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); } html.theme-denik .btn--ghost { box-shadow: 3px 3px 0 color-mix(in oklab, var(--ink) 30%, transparent); } /* washi-tape accents on news cards */ html.theme-denik .news__card::after { content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 78px; height: 20px; background: color-mix(in oklab, var(--zluta) 60%, transparent); border-left: 1px dashed rgba(0,0,0,.12); border-right: 1px dashed rgba(0,0,0,.12); } html.theme-denik .news__card { position: relative; overflow: visible; } html.theme-denik .member__photo, html.theme-denik .hero__photo, html.theme-denik .about__photo { border: 6px solid #fff; box-shadow: 3px 5px 0 color-mix(in oklab, var(--ink) 18%, transparent); }