@import url('fonts/fonts.css'); /* ═══ TOKENY ═══════════════════════════════════════════════════════════════ Odvodené z loga „Štvorlístok, ktorý rastie". Každý pár text/pozadie, ktorý na stránke reálne existuje, je premeraný — čísla sú v brand boarde. */ :root{ --z900:#133E24; --z800:#17512C; --z700:#1F6B3B; --z600:#2E8253; --z500:#3C9459; --z400:#66B87E; --z300:#8ECCA1; --z200:#B9E0C4; --z100:#DCEFE1; --z50:#EFF7F1; --krem:#FBF7EF; --papier:#F3EDE1; --biela:#FFFFFF; --atrament:#1E2A1C; --tlm:#5A6B57; --linka:#E2DCCD; --linka-tm:#2C4C39; --jantar:#E9A020; --jantar-tm:#9A6205; --jantar-sv:#F0B33A; --ruzova:#E7A8B8; --ruzova-tm:#A8425F; --modra:#2F7FB2; --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif; --max:74rem; --gutter:clamp(1.15rem,4vw,2.5rem); --nav-h:4.5rem; --r:18px; --r-sm:12px; --tien:0 1px 2px rgba(19,62,36,.05), 0 8px 24px -12px rgba(19,62,36,.16); } *,*::before,*::after{box-sizing:border-box} html{ /* Plynulá veľkosť: obsah má na 1440px aj na 27" rovnakú vnímanú mierku. */ font-size:clamp(15px, 0.62rem + 0.42vw, 19px); scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--krem); color:var(--atrament); font-family:var(--sans); font-size:1rem; line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; } img{max-width:100%; height:auto; display:block} /* Bez tohto by .den{display:grid} prebilo [hidden] a všetky tri panely denného režimu by sa zobrazili naraz. Zobralo to jeden screenshot. */ [hidden]{display:none !important} a{color:var(--z700)} h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.12; letter-spacing:-.018em; margin:0; font-variation-settings:'SOFT' 40,'WONK' 1} p{margin:0 0 1em} :focus-visible{outline:3px solid var(--jantar); outline-offset:3px; border-radius:4px} .wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)} .wrap--uz{max-width:58rem} .skip{position:absolute; left:-9999px; top:0; background:var(--z800); color:#fff; padding:.7rem 1.1rem; z-index:200; border-radius:0 0 10px 0} .skip:focus{left:0} /* ═══ NAV ══════════════════════════════════════════════════════════════════ */ .nav{position:sticky; top:0; z-index:90; background:rgba(251,247,239,.93); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--linka); color:var(--atrament)} .nav__in{display:flex; align-items:center; gap:1rem; min-height:var(--nav-h)} .nav__logo{display:flex; align-items:center; margin-right:auto; padding:.6rem 0; line-height:0} .nav__logo img{height:clamp(2.1rem,3.2vw,2.5rem); width:auto} .nav__links{display:none; gap:clamp(.7rem,1.6vw,1.5rem); align-items:center} .nav__links a{color:var(--atrament); text-decoration:none; font-weight:520; font-size:.94rem; padding:.45rem .1rem; border-bottom:2px solid transparent; transition:color .18s,border-color .18s} .nav__links a:hover{color:var(--z700); border-bottom-color:var(--z400)} .nav__cta{display:none} .burger{margin-left:auto; display:grid; place-items:center; width:2.95rem; height:2.95rem; background:var(--biela); color:var(--z800); border:1px solid var(--linka); border-radius:12px; cursor:pointer} .burger svg{width:1.3rem;height:1.3rem} .burger[aria-expanded="true"] .i-open{display:none} .burger .i-close{display:none} .burger[aria-expanded="true"] .i-close{display:block} .menu{display:none; position:fixed; inset:var(--nav-h) 0 0; background:var(--krem); color:var(--atrament); z-index:89; padding:1.5rem var(--gutter) 2.5rem; overflow-y:auto; text-align:center} .menu.is-open{display:block} .menu a{display:block; padding:.95rem 0; font-size:1.18rem; font-weight:560; color:var(--atrament); text-decoration:none; border-bottom:1px solid var(--linka)} .menu .btn{margin-top:1.4rem; display:inline-flex; width:auto} @media (min-width:62rem){ .nav__links,.nav__cta{display:flex} .burger{display:none} .menu{display:none !important} } /* ═══ TLAČIDLÁ ═════════════════════════════════════════════════════════════ */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:3rem; padding:.78rem 1.45rem; border-radius:999px; font-weight:620; font-size:.98rem; text-decoration:none; cursor:pointer; border:2px solid transparent; background-origin:border-box; transition:transform .16s, background-color .2s, color .2s, border-color .2s} .btn--hl{background:var(--z700); color:#fff; border-color:var(--z700)} .btn--hl:hover{background:var(--z800); border-color:var(--z800); transform:translateY(-2px)} .btn--ram{background:transparent; color:var(--z800); border-color:var(--z400)} .btn--ram:hover{background:var(--z50); border-color:var(--z600); transform:translateY(-2px)} .btn--svet{background:var(--biela); color:var(--z800); border-color:var(--biela)} .btn--svet:hover{background:var(--z100); border-color:var(--z100); transform:translateY(-2px)} @media (prefers-reduced-motion:reduce){.btn:hover{transform:none}} /* ═══ SPOLOČNÉ ═════════════════════════════════════════════════════════════ */ .sec{padding-block:clamp(3.2rem,7vw,6rem)} .sec--papier{background:var(--papier); color:var(--atrament)} .sec--tmavy{background:var(--z900); color:var(--z100)} .sec--tmavy h2,.sec--tmavy h3{color:var(--biela)} .oko{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--sans); font-size:.76rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--z700); margin-bottom:.85rem} .sec--tmavy .oko{color:var(--jantar-sv)} .oko::before{content:""; width:1.4rem; height:2px; background:currentColor; border-radius:2px} h2{font-size:clamp(1.75rem,1.1rem + 2.4vw,3rem)} h3{font-size:clamp(1.2rem,.95rem + .9vw,1.6rem)} .lead{font-size:clamp(1.06rem,1rem + .35vw,1.28rem); color:var(--tlm); max-width:44rem; line-height:1.6} .sec--tmavy .lead{color:var(--z200)} .sec__hl{max-width:46rem; margin-bottom:clamp(1.8rem,4vw,3rem)} /* ═══ HERO ═════════════════════════════════════════════════════════════════ */ .hero{position:relative; background:var(--krem); overflow:hidden} .hero__in{min-height:calc(100svh - var(--nav-h)); display:grid; align-items:center; gap:clamp(.95rem,4vw,3.5rem); padding-block:clamp(1.05rem,5vw,3.5rem)} @media (min-width:60rem){.hero__in{grid-template-columns:1.02fr .98fr}} .hero__t h1{font-size:clamp(2.1rem,1.1rem + 4.1vw,4.05rem); margin-bottom:.7rem} .hero__t h1 em{font-style:normal; color:var(--z700)} .hero__t .lead{margin-bottom:1.6rem} .hero__akcie{display:flex; flex-wrap:wrap; gap:.7rem} .hero__pas{display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin-top:clamp(1rem,2.6vw,1.7rem); padding-top:clamp(.9rem,2.2vw,1.4rem); border-top:1px solid var(--linka)} .stitok{display:inline-flex; align-items:center; gap:.4rem; background:var(--biela); color:var(--z800); border:1px solid var(--linka); border-radius:999px; padding:.34rem .72rem; font-size:.82rem; font-weight:560} .stitok b{font-weight:700; color:var(--z700)} .hero__f{position:relative} .hero__f img{width:100%; border-radius:clamp(20px,3vw,32px); box-shadow:var(--tien); aspect-ratio:1.9/1; object-fit:cover} @media (min-width:36rem){.hero__f img{aspect-ratio:16/10}} @media (min-width:60rem){.hero__f img{aspect-ratio:4/3}} .hero__znak{position:absolute; left:-1.1rem; bottom:-1.1rem; width:clamp(4.2rem,9vw,6.4rem); background:var(--krem); border-radius:50%; padding:.7rem; box-shadow:var(--tien)} .hero__znak svg{width:100%; height:auto; display:block} /* ═══ CESTA — podpisový moment ═════════════════════════════════════════════ */ .cesta{position:relative} .cesta__in{display:grid; gap:clamp(2rem,4vw,3.5rem)} @media (min-width:64rem){.cesta__in{grid-template-columns:20rem 1fr; align-items:start}} .cesta__stvor{position:relative} @media (min-width:64rem){.cesta__stvor{position:sticky; top:calc(var(--nav-h) + 2.5rem)}} .cesta__stvor svg{width:min(15rem,60vw); height:auto; margin-inline:auto; display:block} .cesta__stvor .list{transition:fill .5s ease, opacity .5s ease} .cesta__popis{text-align:center; margin-top:1rem; font-size:.9rem; color:var(--tlm)} @media (min-width:64rem){.cesta__popis{margin-top:1.2rem}} .kroky{list-style:none; margin:0; padding:0; position:relative} .kroky::before{content:""; position:absolute; left:1.32rem; top:1.6rem; bottom:3rem; width:2px; background:var(--linka); border-radius:2px} .krok{position:relative; padding:0 0 clamp(1.8rem,3.5vw,2.6rem) 4.2rem} .krok:last-child{padding-bottom:0} .krok__b{position:absolute; left:0; top:.1rem; width:2.75rem; height:2.75rem; border-radius:50%; background:var(--biela); border:2px solid var(--linka); display:grid; place-items:center; color:var(--z700); transition:background-color .35s, border-color .35s, color .35s} .krok__b svg{width:1.35rem; height:1.35rem} .krok.je-tu .krok__b{background:var(--z700); border-color:var(--z700); color:#fff} .krok__vek{font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--jantar-tm); display:block; margin-bottom:.28rem} .krok h3{margin-bottom:.4rem} .krok p{color:var(--tlm); margin-bottom:.6rem} .krok__m{display:inline-flex; align-items:center; gap:.35rem; font-weight:600; font-size:.92rem; color:var(--z700); text-decoration:none; padding:.6rem 0; min-height:44px} .krok__m span{border-bottom:2px solid var(--z200); padding-bottom:1px} .krok__m:hover{border-bottom-color:var(--z600)} .cesta__pozn{margin-top:clamp(1.6rem,3vw,2.2rem); background:var(--z50); color:var(--atrament); border:1px solid var(--z100); border-left:4px solid var(--z400); border-radius:var(--r-sm); padding:1rem 1.15rem; font-size:.95rem} .cesta__pozn b{color:var(--z800)} .cesta__pozn a{display:inline-block; padding-block:.68rem; font-weight:620} /* ═══ HODNOTY — redakčný číslovaný zoznam ══════════════════════════════════ */ .hodnoty{list-style:none; margin:0; padding:0; border-top:1px solid var(--linka)} .hodnoty li{display:grid; gap:.2rem 1.4rem; padding:clamp(1rem,2.2vw,1.5rem) 0; border-bottom:1px solid var(--linka); align-items:baseline} @media (min-width:48rem){.hodnoty li{grid-template-columns:3.2rem 15rem 1fr}} .hodnoty .c{font-family:var(--serif); font-size:1.05rem; color:var(--z700); font-variant-numeric:tabular-nums} .hodnoty h3{font-size:clamp(1.08rem,1rem + .35vw,1.28rem)} .hodnoty p{margin:0; color:var(--tlm)} /* ═══ PÁS S FOTKOU ═════════════════════════════════════════════════════════ */ .pas{display:grid; gap:clamp(1.5rem,3.5vw,3rem); align-items:center} @media (min-width:58rem){.pas{grid-template-columns:1fr 1fr} .pas--obr-vlavo .pas__f{order:-1}} .pas__f img{width:100%; border-radius:clamp(16px,2.5vw,26px); aspect-ratio:5/4; object-fit:cover} .pas ul{margin:.6rem 0 0; padding-left:1.1rem} .pas li{margin-bottom:.4rem} /* ═══ DEŇ ══════════════════════════════════════════════════════════════════ */ .den{list-style:none; margin:0; padding:0; display:grid; gap:0} .den li{display:grid; gap:.15rem .1rem; padding:.95rem 0; border-bottom:1px solid var(--linka-tm)} @media (min-width:44rem){.den li{grid-template-columns:9.5rem 1fr; gap:1.5rem; align-items:baseline}} .den li:last-child{border-bottom:0} .den time{font-family:var(--serif); font-size:1.02rem; color:var(--jantar-sv); font-variant-numeric:tabular-nums; white-space:nowrap} .den b{display:block; color:var(--biela); font-weight:620; margin-bottom:.12rem} .den span{color:var(--z200); font-size:.94rem} .den__nadpis{font-size:1.15rem; color:var(--biela); margin:1.6rem 0 .6rem} .den__nadpis:first-of-type{margin-top:0} .js .den__nadpis{display:none} .den__prep[hidden]{display:none !important} .den__prep{display:inline-flex; gap:.3rem; background:rgba(255,255,255,.08); color:var(--z100); padding:.28rem; border-radius:999px; margin-bottom:1.6rem; flex-wrap:wrap} .den__prep button{appearance:none; border:0; background:transparent; color:var(--z100); font:inherit; font-size:.88rem; font-weight:600; padding:.45rem .95rem; border-radius:999px; cursor:pointer; min-height:44px} .den__prep button[aria-selected="true"]{background:var(--biela); color:var(--z900)} /* ═══ CENNÍK ═══════════════════════════════════════════════════════════════ */ .cen__pas{position:sticky; top:var(--nav-h); z-index:60; background:var(--krem); border-bottom:1px solid var(--linka); margin-bottom:clamp(1.6rem,3vw,2.4rem)} .cen__pas ul{display:flex; gap:.45rem; list-style:none; margin:0; padding:.7rem 0; overflow-x:auto; scrollbar-width:none} .cen__pas ul::-webkit-scrollbar{display:none} .cen__pas a{display:inline-flex; align-items:center; white-space:nowrap; text-decoration:none; background:var(--biela); color:var(--z800); border:1px solid var(--linka); border-radius:999px; padding:.5rem 1rem; font-size:.9rem; font-weight:600; min-height:44px} .cen__pas a.je-tu{background:var(--z700); border-color:var(--z700); color:#fff} .stupen{scroll-margin-top:calc(var(--nav-h) + 4.4rem); padding-block:clamp(1.6rem,3vw,2.4rem); border-bottom:1px solid var(--linka)} .stupen:last-of-type{border-bottom:0} .stupen__hl{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .9rem; margin-bottom:.4rem} .stupen__vek{font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--jantar-tm); background:#FDF3E0; border-radius:999px; padding:.22rem .7rem} .stupen__cas{display:inline-flex; align-items:center; gap:.4rem; color:var(--tlm); font-size:.92rem} .stupen__cas svg{width:1.05rem; height:1.05rem; flex:0 0 auto} .stupen > p{color:var(--tlm); max-width:46rem} .tab{width:100%; border-collapse:collapse; margin-top:1rem; background:var(--biela); color:var(--atrament); border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--tien)} .tab caption{text-align:left; font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tlm); padding:0 0 .5rem} .tab th,.tab td{text-align:left; padding:.78rem .95rem; border-bottom:1px solid var(--linka); vertical-align:top; font-size:.95rem} .tab tr:last-child th,.tab tr:last-child td{border-bottom:0} .tab th{font-weight:560} .tab th small{display:block; color:var(--tlm); font-weight:400; font-size:.85rem; margin-top:.15rem} .tab td{text-align:right; white-space:nowrap; font-weight:700; color:var(--z800); font-variant-numeric:tabular-nums} .stupen__f{margin-top:1.1rem} .stupen__f img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-sm)} .vcene{list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem} .vcene li{background:var(--z50); color:var(--z800); border:1px solid var(--z100); border-radius:999px; padding:.32rem .75rem; font-size:.85rem} /* ═══ GALÉRIA ══════════════════════════════════════════════════════════════ */ .gal{list-style:none; margin:0; padding:0; display:grid; gap:.7rem; grid-template-columns:1fr 1fr} @media (min-width:44rem){.gal{grid-template-columns:repeat(3,1fr); gap:.85rem}} @media (min-width:70rem){.gal{grid-template-columns:repeat(5,1fr)}} .gal li:nth-child(n+5){display:none} @media (min-width:44rem){.gal li:nth-child(n+5){display:block}} .gal button{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius:var(--r-sm)} .gal img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-sm); transition:transform .35s ease, filter .35s ease} .gal button:hover img{transform:scale(1.035); filter:saturate(1.08)} @media (prefers-reduced-motion:reduce){.gal button:hover img{transform:none}} .lb{position:fixed; inset:0; z-index:120; background:rgba(15,34,21,.93); display:none; place-items:center; padding:var(--gutter); color:#fff} .lb[open]{display:grid} .lb::backdrop{background:rgba(15,34,21,.93)} .lb img{max-width:min(94vw,64rem); max-height:82vh; width:auto; border-radius:var(--r-sm)} .lb figcaption{margin-top:.8rem; text-align:center; color:var(--z200); font-size:.9rem} .lb__x{position:absolute; top:1rem; right:1rem; width:2.9rem; height:2.9rem; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; border:0; cursor:pointer; font-size:1.3rem} /* ═══ REFERENCIE ═══════════════════════════════════════════════════════════ */ .ref{display:grid; gap:1rem} @media (min-width:56rem){.ref{grid-template-columns:repeat(3,1fr); align-items:start}} .ref blockquote{margin:0; background:var(--biela); color:var(--atrament); border:1px solid var(--linka); border-radius:var(--r); padding:1.35rem 1.4rem; box-shadow:var(--tien)} .ref p{font-size:.96rem; line-height:1.62} .ref .kto{display:flex; align-items:center; gap:.55rem; margin-top:.9rem; font-weight:620; color:var(--z800)} .ref .kto svg{width:1.1rem; height:1.1rem; flex:0 0 auto; color:var(--z500)} .ref__viac{appearance:none; border:0; background:none; color:var(--z700); font:inherit; font-weight:620; cursor:pointer; padding:.62rem 0; min-height:44px; text-decoration:underline} .ref__skryte{display:none} .ref blockquote.je-otv .ref__skryte{display:inline} /* ═══ DVE KARTY ════════════════════════════════════════════════════════════ */ .dve{display:grid; gap:1rem} @media (min-width:52rem){.dve{grid-template-columns:1fr 1fr}} .karta{background:var(--biela); color:var(--atrament); border:1px solid var(--linka); border-radius:var(--r); padding:clamp(1.3rem,2.6vw,2rem); box-shadow:var(--tien)} .karta h3{margin-bottom:.5rem} .karta ul{margin:.7rem 0 0; padding-left:1.1rem; color:var(--tlm)} .karta li{margin-bottom:.35rem} .karta__cena{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem} .karta__cena span{background:var(--z50); color:var(--z800); border:1px solid var(--z100); border-radius:999px; padding:.3rem .75rem; font-size:.86rem; font-weight:600} /* ═══ 2 % ══════════════════════════════════════════════════════════════════ */ .oz{background:var(--z800); color:var(--z100); border-radius:var(--r); padding:clamp(1.5rem,3.5vw,2.6rem); display:grid; gap:1.4rem} @media (min-width:54rem){.oz{grid-template-columns:1.25fr .75fr; align-items:center}} .oz .oko{color:var(--jantar-sv)} .oz h2{color:var(--biela); font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem)} .oz dl{margin:0; background:rgba(255,255,255,.07); border-radius:var(--r-sm); padding:1.1rem 1.2rem; font-size:.92rem; color:var(--z100)} .oz dt{font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; color:var(--z200); margin-top:.7rem} .oz dt:first-child{margin-top:0} .oz dd{margin:.1rem 0 0; font-weight:600; color:var(--biela); overflow-wrap:anywhere} /* ═══ KONTAKT ══════════════════════════════════════════════════════════════ */ .kon{display:grid; gap:clamp(1.6rem,3.5vw,3rem)} @media (min-width:58rem){.kon{grid-template-columns:1fr 1fr; align-items:start}} .kon__blok{margin-bottom:1.5rem} .kon__blok h3{font-size:1.1rem; margin-bottom:.35rem} .kon__blok a{display:inline-block; padding-block:.7rem; font-weight:620; color:var(--z700); text-decoration:none; box-shadow:inset 0 -2px 0 var(--z200)} .kon__blok a:hover{box-shadow:inset 0 -2px 0 var(--z600)} .kon__blok p{color:var(--tlm); margin-bottom:.1rem} .mapa{width:100%; aspect-ratio:4/3; border:0; border-radius:var(--r); background:var(--papier)} form{background:var(--biela); color:var(--atrament); border:1px solid var(--linka); border-radius:var(--r); padding:clamp(1.2rem,2.6vw,1.9rem); box-shadow:var(--tien)} .pole{margin-bottom:.95rem} .pole label{display:block; font-weight:620; font-size:.9rem; margin-bottom:.3rem} .pole input,.pole select,.pole textarea{width:100%; font:inherit; font-size:.97rem; color:var(--atrament); background:var(--krem); border:1px solid var(--linka); border-radius:10px; padding:.72rem .85rem; min-height:3rem} .pole textarea{min-height:7rem; resize:vertical} .pole input:focus,.pole select:focus,.pole textarea:focus{border-color:var(--z500); outline:0; box-shadow:0 0 0 3px var(--z100)} .suhlas{display:flex; gap:.65rem; align-items:flex-start; font-size:.88rem; color:var(--tlm); margin:1rem 0} .suhlas input{width:1.6rem; height:1.6rem; flex:0 0 auto; margin-top:.05rem; accent-color:var(--z700)} /* Dotykovým cieľom je celý