/* Turistat — šablony frontendu ═════════════════════════════════════════════════════════════════════ Pět hotových vzhledů. Vybírají se v administraci, ukládají se do settings pod klíč `frontend_template` a na stránku se propíšou jako atribut data-template na . Šablona mění jen proměnné a rytmus, ne strukturu. Díky tomu se dá přepnout za běhu bez zásahu do HTML a nový vzhled je otázka jednoho bloku, ne nové stránky. Barvy značky (--brand-*) nastavuje administrace zvlášť a přebíjejí hodnoty šablony, takže se dá vzít hotový vzhled a jen ho přebarvit. plakat tištěný cestovní plakát, námořní modř, ostré hrany riviera prázdninová, teplý papír, měkké rohy nokturno tmavá, pro dlouhé sezení nad daty redakce novinová, patkové nadpisy, hodně bílé panel hustá datová deska ve stylu analytických nástrojů ══════════════════════════════════════════════════════════════════ */ /* ── PLAKÁT ─ výchozí ─────────────────────────────────────────────────── */ html[data-template="plakat"] { /* ── paleta znacky Hotel Radar ────────────────────────────────────── Odvozeno primo z loga (public/brand/). Sedm barev z kresby plus tinty smichane s bilou; nic se nevymyslelo navic, aby web a znacka drzely pohromade. #12325B tmava modr, prstenec a text #F4832A oranzova, bod na mape a akcent #2F6FB5 modra, vnitrni prstenec #F9B233 jantarova #3FB8AF tyrkys #6FA8DC svetla modra #6B7C93 seda POZOR na text na oranzove: bila ma proti #F4832A kontrast jen 2,6, tedy pod normou. Na akcentu se proto sazi tmava modr (4,98). */ --navy: #12325B; --navy-2: #1F4D83; --navy-deep: #0B203B; --stamp: #F4832A; --sea: #2F6FB5; --sun: #F9B233; --teal: #3FB8AF; --sky: #6FA8DC; --paper: #FFFFFF; --paper-2: #F0F6FB; --sand: #FEF7EA; --line: #DEE2E7; --text: #0F2C50; --text-soft: #5E6D81; --muted: #6B7C93; /* Co se pise na oranzovou plochu. */ --on-stamp: #12325B; --radius: 0px; --panel-shadow: none; --head-weight: 800; --head-tracking: -.025em; --font-head: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; --bg-1: rgba(249,178,51,.26); --bg-2: rgba(47,111,181,.18); --bg-3: rgba(244,131,42,.12); --page-bg: #F4F8FC; } /* ── RIVIÉRA ─ prázdninová ────────────────────────────────────────────── */ html[data-template="riviera"] { --navy: #12788a; --navy-2: #1b93a6; --navy-deep: #0d4f5c; --stamp: #d2622f; --sea: #2fa08a; --sun: #f0a92e; --paper: #fffdf8; --paper-2: #f9f1e4; --sand: #f6ead6; --line: #e2d4bd; --text: #2b2318; --text-soft: #5c4f3c; --muted: #8b7a63; --radius: 14px; --panel-shadow: 0 2px 10px rgba(120,90,40,.08); --head-weight: 700; --head-tracking: -.02em; --font-head: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; --bg-1: rgba(240,169,46,.34); --bg-2: rgba(47,160,138,.22); --bg-3: rgba(210,98,47,.16); --page-bg: #fbf5ea; } html[data-template="riviera"] .panel, html[data-template="riviera"] .dest-card, html[data-template="riviera"] .dstats { overflow: hidden; } html[data-template="riviera"] .nav-cta { border-radius: 999px; } html[data-template="riviera"] .searchbar { border-radius: 14px; overflow: hidden; } /* ── NOKTURNO ─ tmavá ─────────────────────────────────────────────────── */ html[data-template="nokturno"] { --navy: #0e1a24; --navy-2: #16283a; --navy-deep: #070f16; --stamp: #e0705f; --sea: #4fc4d4; --sun: #e8b544; --paper: #16232d; --paper-2: #1d2f3b; --sand: #1a2a35; --line: #2b4150; --text: #e4ebee; --text-soft: #a9bcc4; --muted: #7d919b; --radius: 4px; --panel-shadow: none; --head-weight: 700; --head-tracking: -.02em; --font-head: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; --bg-1: rgba(79,196,212,.12); --bg-2: rgba(232,181,68,.10); --bg-3: rgba(224,112,95,.10); --page-bg: #0b141c; } /* Tmavý podklad potřebuje jiné výplně grafů, jinak splynou. */ html[data-template="nokturno"] .months i, html[data-template="nokturno"] .bar .f, html[data-template="nokturno"] .sh-bar .f { background: var(--sea); } html[data-template="nokturno"] .bar .t, html[data-template="nokturno"] .spark i { background: #24384a; } html[data-template="nokturno"] .stars .star-bg { fill: #2b4150; } html[data-template="nokturno"] .dstat b, html[data-template="nokturno"] .counters b, html[data-template="nokturno"] .ph b { color: var(--sea); } html[data-template="nokturno"] .badge { background: #1d3b30; color: #6fd3a6; } /* ── REDAKCE ─ novinová ───────────────────────────────────────────────── */ html[data-template="redakce"] { --navy: #1b1b1b; --navy-2: #333; --navy-deep: #000; --stamp: #8c1c13; --sea: #2f5d50; --sun: #b8862b; --paper: #ffffff; --paper-2: #f4f2ee; --sand: #efece5; --line: #ddd8ce; --text: #17150f; --text-soft: #4a463c; --muted: #7b756a; --radius: 0px; --panel-shadow: none; --head-weight: 600; --head-tracking: -.012em; --font-head: "Newsreader", Georgia, serif; --font-body: "Archivo", system-ui, sans-serif; --bg-1: rgba(184,134,43,.12); --bg-2: rgba(47,93,80,.08); --bg-3: rgba(140,28,19,.06); --page-bg: #faf8f4; } html[data-template="redakce"] .hero h1, html[data-template="redakce"] .dhero h1, html[data-template="redakce"] .band-head h2, html[data-template="redakce"] .band-split h2, html[data-template="redakce"] .dark-head h2 { font-family: var(--font-head); font-style: normal; } html[data-template="redakce"] .panel { border-left: 3px solid var(--navy); } html[data-template="redakce"] .eyebrow { letter-spacing: .22em; } /* ── PANEL ─ hustá datová deska ───────────────────────────────────────── */ html[data-template="panel"] { --navy: #1a3a5c; --navy-2: #245080; --navy-deep: #10263d; --stamp: #d3402f; --sea: #2497a8; --sun: #e2a336; --paper: #ffffff; --paper-2: #f5f7f9; --sand: #eef2f5; --line: #dbe2e8; --text: #1b2733; --text-soft: #4c5c6b; --muted: #74838f; --radius: 3px; --panel-shadow: 0 1px 2px rgba(26,58,92,.08); --head-weight: 600; --head-tracking: -.01em; --font-head: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; --bg-1: rgba(36,151,168,.10); --bg-2: rgba(26,58,92,.07); --bg-3: rgba(211,64,47,.05); --page-bg: #f0f3f6; } /* Hustší sazba: víc dat na obrazovku, menší mezery, drobnější písmo. */ html[data-template="panel"] body { font-size: 14.5px; } html[data-template="panel"] .band { padding-block: clamp(1.4rem, 3vw, 2.4rem); } html[data-template="panel"] .p-box { padding: .85rem 1rem .95rem; } html[data-template="panel"] .hotel-list { gap: .9rem; } html[data-template="panel"] .hero-photo { min-height: clamp(260px, 34vh, 360px); } html[data-template="panel"] .p-head { padding: .8rem 1rem .7rem; } html[data-template="panel"] .conf { padding: .5rem 1rem; } /* ── společné napojení na proměnné šablony ────────────────────────────── */ html { --radius: 0px; --panel-shadow: none; --head-weight: 800; --head-tracking: -.025em; --font-head: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; --page-bg: #eef1f3; } body { font-family: var(--font-body); background-color: var(--page-bg); /* Přechody na pozadí míchá administrace; šablona dodá výchozí odstíny. */ background-image: radial-gradient(58rem 32rem at 12% -8%, var(--bg-1, transparent), transparent 62%), radial-gradient(46rem 30rem at 92% 4%, var(--bg-2, transparent), transparent 60%), radial-gradient(70rem 40rem at 50% 104%, var(--bg-3, transparent), transparent 64%); } h1, h2, h3 { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); } .panel, .dest-card, .hotel-card, .dstats, .searchbar, .qresults, .sheet-card { border-radius: var(--radius); box-shadow: var(--panel-shadow); } .gallery img, .p-photo { border-radius: calc(var(--radius) * .6); } /* ── EXPEDICE ─ redakční, celoplošná fotografie ─────────────────────────── Inspirace: weby luxusních expedičních cest. Přenositelné je rozvržení a rytmus, ne obsah: - hero přes celou výšku okna, nadpis uprostřed, lišta bez pozadí - obrovské klidné nadpisy, tlumený text, hodně prázdného místa - verzálkové proložené mikropopisky místo barevných štítků - tenké linky místo rámečků; panel není karta, ale odstavec - číslované sekce, odkaz s podtržením a šipkou Paleta je záměrně skoro bezbarvá. Jediná barva na stránce jsou data, takže koláče a grafy vystoupí samy od sebe. */ html[data-template="expedice"] { --navy: #14120e; --navy-2: #2a251d; --navy-deep: #0c0a07; --stamp: #7d6a4f; --sea: #3f5b53; --sun: #b8945c; --paper: #fbf8f3; --paper-2: #f4efe6; --sand: #efe9de; --line: #e0d8cb; --text: #14120e; --text-soft: #4a4438; --muted: #8a8274; --radius: 0px; --panel-shadow: none; --head-weight: 400; --head-tracking: -.02em; --font-head: "Newsreader", Georgia, serif; --font-body: "Archivo", system-ui, sans-serif; --bg-1: transparent; --bg-2: transparent; --bg-3: transparent; --page-bg: #fbf8f3; } /* lišta leží na fotce, ne nad ní */ html[data-template="expedice"] .nav { position: fixed; top: 0; left: 0; right: 0; background: transparent; padding-block: 1.5rem; transition: background .3s ease, padding .3s ease; } html[data-template="expedice"] .nav::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,10,7,.55), transparent); pointer-events: none; } html[data-template="expedice"] .nav-brand span { font-family: var(--font-head); font-weight: 400; letter-spacing: .01em; } html[data-template="expedice"] .nav-links { gap: 2.4rem; } html[data-template="expedice"] .nav-links a { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.82); } html[data-template="expedice"] .nav-cta { background: none; border: 1px solid rgba(255,255,255,.5); border-radius: 0; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; padding: .6rem 1.2rem; } html[data-template="expedice"] .nav-cta:hover { background: #fff; color: var(--navy-deep); } html[data-template="expedice"] .searchwrap { border-radius: 0; border-color: rgba(255,255,255,.35); } html[data-template="expedice"] .langswitch button { border-color: rgba(255,255,255,.3); } /* hero přes celou výšku, sazba uprostřed */ html[data-template="expedice"] .hero-photo { min-height: 100vh; } html[data-template="expedice"] .hero-photo::after { background: linear-gradient(180deg, rgba(12,10,7,.42) 0%, rgba(12,10,7,.20) 45%, rgba(12,10,7,.66) 100%); } html[data-template="expedice"] .hero-badge { display: none; } html[data-template="expedice"] .hero-kicker { font-size: .7rem; letter-spacing: .28em; color: rgba(255,255,255,.75); margin-bottom: 1.4rem; } html[data-template="expedice"] .hero h1 { font-family: var(--font-head); font-weight: 400; font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 1.02; letter-spacing: -.02em; text-shadow: 0 2px 26px rgba(0,0,0,.35); max-width: 18ch; } html[data-template="expedice"] .hero-lede { margin-top: 1.6rem; font-size: 1.02rem; color: rgba(255,255,255,.82); max-width: 46ch; } /* vyhledávací pruh nepřekrývá fotku, sedí pod ní na papíře */ html[data-template="expedice"] .searchbar { margin: 0; border: 0; border-bottom: 1px solid var(--line); box-shadow: none; background: var(--paper); } html[data-template="expedice"] .searchbar label { border-right: 1px solid var(--line); padding-block: 1.3rem; } html[data-template="expedice"] .searchbar span { letter-spacing: .16em; font-size: .66rem; } html[data-template="expedice"] .searchbar button { background: var(--navy); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; } /* čísla bez rámečků, jen tenké dělící linky */ html[data-template="expedice"] .counters { border: 0; border-bottom: 1px solid var(--line); background: transparent; } html[data-template="expedice"] .counters div { border-right: 1px solid var(--line); padding-block: 2.6rem; } html[data-template="expedice"] .counters b { font-family: var(--font-head); font-weight: 400; font-size: 2.6rem; color: var(--text); } html[data-template="expedice"] .counters span { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; } /* pásy: velký nadpis, úzký sloupec textu, hodně vzduchu */ html[data-template="expedice"] .band { padding-block: clamp(4rem, 9vw, 8rem); } html[data-template="expedice"] .eyebrow { font-size: .66rem; letter-spacing: .3em; color: var(--muted); font-weight: 500; } html[data-template="expedice"] .band-head h2, html[data-template="expedice"] .band-split h2 { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: 1.1; max-width: 22ch; } html[data-template="expedice"] .band-split { gap: clamp(2rem, 6vw, 6rem); } html[data-template="expedice"] .band-alt { background: var(--sand); } html[data-template="expedice"] .ticks li { font-weight: 400; } html[data-template="expedice"] .ticks .ic { color: var(--stamp); } /* karta destinace: fotka, tenká linka, verzálkový odkaz */ html[data-template="expedice"] .dest-card { border: 0; border-top: 1px solid var(--line); background: transparent; } html[data-template="expedice"] .dest-card:hover { transform: none; } html[data-template="expedice"] .dest-thumb { height: 220px; } html[data-template="expedice"] .dest-card h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.4rem; } html[data-template="expedice"] .dest-go { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text); border-bottom: 1px solid var(--text); padding-bottom: .18rem; align-self: start; } html[data-template="expedice"] .emb-badge { display: none; } /* panel hotelu není karta, ale kapitola oddělená linkou */ html[data-template="expedice"] .panel { border: 0; border-top: 1px solid var(--line); background: transparent; } html[data-template="expedice"] .panel:hover { box-shadow: none; } html[data-template="expedice"] .hotel-list { gap: 0; } html[data-template="expedice"] .p-head { padding: 2.2rem 0 1.2rem; border: 0; align-items: baseline; } html[data-template="expedice"] .p-title h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.85rem; } html[data-template="expedice"] .ph i { letter-spacing: .16em; } html[data-template="expedice"] .ph b { font-family: var(--font-head); font-weight: 400; font-size: 1.9rem; } html[data-template="expedice"] .conf { background: transparent; border: 0; padding: 0 0 1.4rem; } html[data-template="expedice"] .p-grid { gap: 0; } html[data-template="expedice"] .p-box { background: transparent; box-shadow: none; border-top: 1px solid var(--line); border-bottom: 0; padding: 1.6rem 1.6rem 2rem 0; } html[data-template="expedice"] .p-box h4 { border-bottom: 0; color: var(--muted); letter-spacing: .2em; font-weight: 500; font-size: .66rem; } html[data-template="expedice"] .p-box h4 .ic { color: var(--stamp); } html[data-template="expedice"] .p-photo { width: 150px; height: 100px; } /* tmavý pás jako celoplošná plocha bez rámečků */ html[data-template="expedice"] .dark { background: var(--navy-deep); padding-block: clamp(4rem, 9vw, 8rem); } html[data-template="expedice"] .dark-head h2 { font-family: var(--font-head); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.4rem); } html[data-template="expedice"] .dark .eyebrow { color: var(--sun); } html[data-template="expedice"] .frame { border: 0; border-top: 1px solid rgba(255,255,255,.22); background: none; padding: 2rem 1.2rem 1rem 0; } html[data-template="expedice"] .frame::before, html[data-template="expedice"] .frame::after { display: none; } html[data-template="expedice"] .frame-no { position: static; display: block; background: none; color: var(--sun); font-family: var(--font-head); font-size: 1.6rem; margin-bottom: .6rem; } html[data-template="expedice"] .frame h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.3rem; } html[data-template="expedice"] .frames { gap: 2.4rem; } /* výzva: velká sazba na tmavé ploše, ne barevný blok */ html[data-template="expedice"] .cta { background: var(--sand); color: var(--text); padding-block: clamp(3.4rem, 7vw, 6rem); } html[data-template="expedice"] .cta-copy h2 { font-family: var(--font-head); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.4rem); } html[data-template="expedice"] .cta-copy p { color: var(--text-soft); } html[data-template="expedice"] .cta-row { background: var(--line); } html[data-template="expedice"] .cta-row span { background: var(--sand); color: var(--text-soft); } html[data-template="expedice"] .cta-row b { color: var(--text); } html[data-template="expedice"] .cta-row .ic { color: var(--stamp); } html[data-template="expedice"] .foot { background: var(--navy-deep); } html[data-template="expedice"] .photostrip { background: var(--navy-deep); } html[data-template="expedice"] .photostrip img { min-height: 420px; } /* galerie fotek jako vodorovný pás, ne mřížka */ html[data-template="expedice"] .gallery { display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; } html[data-template="expedice"] .gallery figure { flex: 0 0 210px; scroll-snap-align: start; } html[data-template="expedice"] .gallery img { height: 150px; } @media (max-width: 900px) { html[data-template="expedice"] .hero-photo { min-height: 78vh; } html[data-template="expedice"] .nav { position: static; } html[data-template="expedice"] .nav::after { display: none; } html[data-template="expedice"] .nav-links a, html[data-template="expedice"] .nav-cta { color: var(--text); } html[data-template="expedice"] .nav { background: var(--paper); border-bottom: 1px solid var(--line); } html[data-template="expedice"] .searchwrap { border-color: var(--line); color: var(--text-soft); } html[data-template="expedice"] .langswitch button { border-color: var(--line); color: var(--text-soft); } html[data-template="expedice"] .p-box { padding-right: 0; } } /* Plná podoba lišty po odscrollování. Bez ní by text pod průhlednou lištou splýval, jakmile hero opustí obrazovku. */ html[data-template="expedice"] .nav--solid { background: var(--paper); border-bottom: 1px solid var(--line); padding-block: .8rem; } html[data-template="expedice"] .nav--solid::after { display: none; } html[data-template="expedice"] .nav--solid .nav-links a, html[data-template="expedice"] .nav--solid .account, html[data-template="expedice"] .nav--solid .nav-brand span { color: var(--text); } html[data-template="expedice"] .nav--solid .nav-cta { border-color: var(--text); color: var(--text); } html[data-template="expedice"] .nav--solid .nav-cta:hover { background: var(--navy); color: var(--paper); } html[data-template="expedice"] .nav--solid .searchwrap, html[data-template="expedice"] .nav--solid .langswitch button { border-color: var(--line); color: var(--text-soft); } html[data-template="expedice"] .nav--solid .langswitch button[aria-pressed="true"] { color: var(--navy-deep); } /* Obsah nesmí začínat pod pevnou lištou; hero ji nese sám, ostatní stránky potřebují odsazení. */ html[data-template="expedice"] #view-dest { padding-top: 74px; } /* Psané písmo se v redakční a datové šabloně nehodí; tam zůstává normální sazba, jen tlumenější. */ html[data-template="redakce"] .hero-lede, html[data-template="panel"] .hero-lede { font-family: var(--font-body); font-size: clamp(.98rem, 1.5vw, 1.12rem); } html[data-template="expedice"] .hero-lede { font-size: clamp(1.4rem, 2.6vw, 2rem); }