/* Pozor: fonty sa načítavajú cez v PRED týmto súborom. @import sa tu zámerne nepoužíva, reťazil by požiadavky sériovo (HTML -> style.css -> fonts.css -> woff2) a zdržoval render. */ /* ========================================================================== ELISI, dizajnový systém Motív: jedna neprerušená línia (z loga). Editoriálne, vzdušné, asymetrické. ========================================================================== */ :root{ /* paleta (nemení sa, prevzatá zo schválenej ukážky) */ --paper:#FBF6F4; --paper2:#F6ECE7; --card:#FFFFFF; --fuchsia:#E48AB4; --peach:#F6D9C9; --rose:#CE6089; /* 3,19:1 na tónovanom podklade, pôvodných #D46A93 malo 2,88 */ /* #B84E78 malo na papieri 4,45:1, teda tesne pod hranicou pre bežný text. Tento odtieň dáva 4,92:1 na papieri a 5,27:1 na bielej karte. Rozdiel voči pôvodnej ružovej je okom sotva postrehnuteľný, kontrast prejde. */ --rose-deep:#B04771; --ink:#3A2A31; --muted:#7C646C; --sage:#8C9C7E; --sage-deep:#5C6A50; /* 5,78:1 na bielej, pôvodných #6E7E60 malo 4,36 */ /* Tmavá kapitola. Krémová a svetloružová sa od seba líšia o tri percentá jasu, takže striedanie sekcií nikto nevidel. Toto je jediná farba na stránke, ktorá vie urobiť skutočný rez. Je to slivkovo-čierna, nie neutrálna čierna, aby ostala v rodine značky. */ --ink-deep:#291C21; --ink-deep2:#33232A; --line:rgba(58,42,49,.14); --line-soft:rgba(58,42,49,.08); --grad:linear-gradient(135deg,#E48AB4 0%,#EEB0A9 55%,#F6D9C9 100%); --shadow-sm:0 2px 10px -4px rgba(120,60,85,.18); --shadow:0 26px 60px -34px rgba(120,60,85,.5); --shadow-lg:0 40px 90px -46px rgba(120,60,85,.55); --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --ico-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E"); --ico-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.44 6.19 20.5 7.3 14.03 2.6 9.45l6.5-.95z'/%3E%3C/svg%3E"); --ico-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5.2v13.6L19 12z'/%3E%3C/svg%3E"); --ico-pause:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 5h3.4v14H7zM13.6 5H17v14h-3.4z'/%3E%3C/svg%3E"); --ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E"); --gut:clamp(20px,4vw,40px); /* Rytmus. Pôvodných 132 px na každej sekcii bez rozdielu robilo z celej stránky rovnomerný bubon. Základ je teraz tesnejší a na výnimočné sekcie je .sec--air, aby sa priestor dal minúť tam, kde má význam. */ --sec-y:clamp(62px,7.4vw,108px); --spread-gap:clamp(28px,4vw,64px); --r:20px; --r-lg:28px; } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:clamp(15.5px,.5vw + 14.3px,17px); font-weight:400; line-height:1.75; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0} ul,ol{margin:0;padding:0;list-style:none} img,svg,video{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--rose-deep);outline-offset:3px;border-radius:4px} /* Papierové zrno. Krémový podklad s ním pôsobí tlačovo, nie ploche. Len na väčších obrazovkách s myšou, na mobile by to bola daň za nič, tam je plocha malá a zrno aj tak nevidno. */ @media(min-width:1024px) and (hover:hover){ body::after{ content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } } ::selection{background:var(--peach);color:var(--ink)} /* ---------- layout ---------- */ .container{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gut)} .container--narrow{max-width:840px} .container--mid{max-width:1040px} .sec{padding-block:var(--sec-y);position:relative} .sec--tint{background:var(--paper2)} .sec--white{background:#fff} .sec--tight{padding-block:clamp(42px,5vw,72px)} /* Priestor sa má minúť tam, kde niečo znamená, nie rovnomerne všade. */ .sec--air{padding-block:clamp(92px,11vw,168px)} /* Sekcia, ktorá nadväzuje na predchádzajúcu ako jej pokračovanie, nie ako nová kapitola. */ .sec--attached{padding-top:0} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 10px 0} .skip:focus{left:0} /* ---------- typografia ---------- */ .display{ font-family:var(--serif);font-weight:400; font-size:clamp(2.35rem,6.1vw,4.5rem); line-height:1.06;letter-spacing:-.022em;text-wrap:balance; } .h2{ font-family:var(--serif);font-weight:400; font-size:clamp(1.75rem,3.7vw,2.85rem); line-height:1.12;letter-spacing:-.018em;text-wrap:balance; } .h3{ font-family:var(--serif);font-weight:600; font-size:clamp(1.2rem,1.7vw,1.48rem); line-height:1.25;letter-spacing:-.012em; } .h4{font-family:var(--sans);font-weight:500;font-size:1.05rem;line-height:1.4;letter-spacing:.005em} em,.it{font-style:italic} .display em,.h2 em{color:var(--rose)} .script{font-family:var(--serif);font-style:italic;font-weight:400;line-height:1.15;letter-spacing:-.01em} .lead{font-size:clamp(1.075rem,1.1vw + .85rem,1.3rem);line-height:1.68;color:var(--muted);max-width:62ch} .body-lg{font-size:1.075rem;line-height:1.8} .small{font-size:.875rem;line-height:1.6} .muted{color:var(--muted)} .prose p + p{margin-top:1.1em} .prose p{color:var(--muted);max-width:68ch} .prose strong{color:var(--ink);font-weight:500} .eyebrow{ display:inline-flex;align-items:center;gap:.7em; font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase; color:var(--rose-deep); } .eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55} .eyebrow--plain::before{display:none} .marker{ font-family:var(--serif);font-size:1rem;font-weight:600;font-style:italic; color:var(--rose-deep);letter-spacing:.02em; } /* odkaz v texte */ .prose a:not(.btn),.link{ color:var(--rose-deep);font-weight:500; border-bottom:1px solid rgba(184,78,120,.35); transition:border-color .2s,color .2s; } .prose a:not(.btn):hover,.link:hover{border-bottom-color:var(--rose-deep)} /* ---------- hlavička sekcie (zarovnaná doľava, s číslom a linkou) ---------- */ .sechead{display:grid;gap:16px;margin-bottom:clamp(30px,3.4vw,50px);max-width:74ch} .sechead__top{display:flex;align-items:center;gap:18px} .sechead__rule{flex:1;height:1px;background:var(--line);min-width:30px} .sechead__num{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--rose-deep)} .sechead .lead{margin-top:2px} .sechead--center{margin-inline:auto;text-align:center;justify-items:center} .sechead--center .sechead__top{justify-content:center} .sechead--center .sechead__rule{display:none} .sechead--center .lead{margin-inline:auto} /* Tri hlasitosti hlavičky. Pôvodne mala každá sekcia plnú výbavu (číslo, obočie, linka, serifový nadpis, lead), deväťkrát za sebou. Keď kričí všetko, nekričí nič. Pravidlo: jeden --display na stránku, najviac dva plné, zvyšok --minor. */ /* Šírku si drží nadpis, nie celý blok. Keď bola na bloku, zdedil ju aj lead a rozsypal sa na štyri krátke riadky. */ .sechead--display{ max-width:none;margin-inline:auto;text-align:center;justify-items:center; margin-bottom:clamp(40px,4.6vw,68px);gap:20px; } .sechead--display .sechead__top{justify-content:center} .sechead--display .sechead__rule{display:none} .sechead--display .h2{font-size:clamp(2.15rem,5.2vw,3.9rem);line-height:1.05;max-width:17ch} .sechead--display .lead{margin-inline:auto;max-width:50ch} .sechead--minor{gap:9px;margin-bottom:clamp(22px,2.6vw,34px);max-width:62ch} .sechead--minor .h2{font-size:clamp(1.45rem,2.5vw,1.95rem)} .sechead--minor .sechead__rule{display:none} /* Folio: číslo sekcie ako typografický prvok na okraji, nie ako drobček v riadku. Nesie funkciu čísla aj funkciu ozdoby, takže sekcia nepotrebuje obočie. */ .folio{ display:block;font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:.9;color:var(--rose); opacity:.26;margin-bottom:.12em;letter-spacing:-.02em; } .folio--sage{color:var(--sage-deep)} .chapter .folio{color:var(--fuchsia);opacity:.42} /* ---------- tlačidlá ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6em; font-family:var(--sans);font-weight:500;font-size:.95rem;letter-spacing:.015em; padding:.92em 1.9em;border-radius:999px;cursor:pointer;text-align:center; transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background .22s,color .22s,border-color .22s; will-change:transform; } .btn svg{width:1.05em;height:1.05em;flex:0 0 auto} .btn--primary{background:var(--grad);color:#fff;box-shadow:0 12px 26px -12px rgba(212,106,147,.75)} .btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(212,106,147,.85)} .btn--ghost{border:1px solid var(--line);color:var(--ink);background:transparent} .btn--ghost:hover{border-color:var(--rose);color:var(--rose-deep);transform:translateY(-2px)} .btn--light{background:#fff;color:var(--rose-deep);box-shadow:var(--shadow-sm)} .btn--light:hover{transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(0,0,0,.35)} .btn--onbrand{border:1px solid rgba(255,255,255,.55);color:#fff} .btn--onbrand:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)} .btn--lg{padding:1.08em 2.3em;font-size:1rem} .btn--sm{padding:.7em 1.35em;font-size:.875rem} .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} /* textový odkaz so šípkou. Šípka je maskované SVG, nie znak. Nie je v použitom reze a padala by na systémový font. */ .arrow{ display:inline-flex;align-items:center;gap:.5em; font-weight:500;font-size:.95rem;color:var(--rose-deep); } .arrow::after{ content:"";flex:0 0 auto;width:1.05em;height:1.05em;background:currentColor; -webkit-mask:var(--ico-arrow) no-repeat center/contain; mask:var(--ico-arrow) no-repeat center/contain; transition:transform .22s; } .arrow:hover::after{transform:translateX(4px)} /* hviezdičky hodnotenia, tiež SVG (★ nie je v použitých rezoch) */ .stars{display:inline-flex;gap:3px;color:var(--rose);vertical-align:-.1em} .stars i{ width:.92em;height:.92em;background:currentColor;display:block; -webkit-mask:var(--ico-star) no-repeat center/contain; mask:var(--ico-star) no-repeat center/contain; } /* ========================================================================== HLAVIČKA ========================================================================== */ .hdr{ position:sticky;top:0;z-index:100; background:rgba(251,246,244,0); transition:background .35s,box-shadow .35s,border-color .35s; border-bottom:1px solid transparent; } .hdr.is-stuck{ background:rgba(251,246,244,.9); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom-color:var(--line-soft); box-shadow:0 10px 30px -26px rgba(120,60,85,.6); } .nav{display:flex;align-items:center;gap:clamp(16px,3vw,40px);min-height:76px} .nav__logo{display:flex;align-items:center;flex:0 0 auto} .nav__logo img{height:62px;width:auto} @media(max-width:520px){.nav__logo img{height:52px}} .nav__links{display:flex;align-items:center;gap:clamp(14px,1.9vw,28px);margin-left:auto;font-size:.94rem} /* položky menu sa nesmú zmrštiť ani zalomiť, inak „O nás" spadne na dva riadky a šípka pri „Službách" pod text */ .nav__links > li{flex:0 0 auto} .nav__links > li > a,.nav__links > li > button{ display:inline-flex;align-items:center;gap:.35em;white-space:nowrap; padding:.45em 0;color:var(--ink);opacity:.86;position:relative;transition:opacity .2s,color .2s; } .has-sub > button::after{flex:0 0 auto} .nav__links a:hover,.nav__links button:hover,.nav__links [aria-current="page"]{opacity:1;color:var(--rose-deep)} /* Podčiarknutie aktívnej položky používa ::before zámerne. Na ::after visí šípka rozbaľovacieho menu a na stránkach služieb sú obe pravidlá na tom istom prvku, takže by sa prepísali. */ .nav__links [aria-current="page"]::before{ content:"";position:absolute;left:0;right:0;bottom:.1em;height:1px;background:var(--rose) } .nav__cta{flex:0 0 auto} /* rozbaľovacie podmenu */ .has-sub{position:relative} .has-sub > button::after{content:"";width:5px;height:5px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .2s} .has-sub[data-open="true"] > button::after{transform:rotate(-135deg) translateY(-1px)} .sub{ position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px); min-width:262px;background:#fff;border:1px solid var(--line-soft);border-radius:16px; box-shadow:var(--shadow);padding:10px;display:grid;gap:2px; opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s; } .has-sub[data-open="true"] .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .sub a{display:block;padding:10px 14px;border-radius:10px;font-size:.92rem;line-height:1.4;transition:background .18s,color .18s} .sub a:hover{background:var(--paper2);color:var(--rose-deep)} .sub small{display:block;font-size:.78rem;color:var(--muted);margin-top:1px} /* burger + mobilné menu */ .burger{display:none;width:44px;height:44px;margin-left:auto;align-items:center;justify-content:center;flex:0 0 auto} .burger span{display:block;width:22px;height:1.4px;background:var(--ink);position:relative;transition:background .2s} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:1.4px;background:var(--ink);transition:transform .25s,top .25s} .burger span::before{top:-7px} .burger span::after{top:7px} body.menu-open .burger span{background:transparent} body.menu-open .burger span::before{top:0;transform:rotate(45deg)} body.menu-open .burger span::after{top:0;transform:rotate(-45deg)} @media(max-width:1000px){ .burger{display:flex} .nav__cta{display:none} .nav__links{ position:fixed;inset:76px 0 0;margin:0; background:var(--paper); flex-direction:column;align-items:stretch;justify-content:flex-start; gap:0;padding:22px var(--gut) 48px;overflow-y:auto; font-size:1.05rem; transform:translateY(-8px);opacity:0;visibility:hidden; transition:opacity .28s,transform .28s,visibility .28s; } body.menu-open{overflow:hidden} body.menu-open .nav__links{opacity:1;visibility:visible;transform:none} /* Kým je menu otvorené, hlavička nesmie mať backdrop-filter. Ten z nej robí kotvu pre position:fixed potomkov, takže by sa menu prestalo vzťahovať na okno a zmestilo by sa do 76px vysokej hlavičky. Prejavovalo sa to len po zoscrollovaní, keď hlavička dostane .is-stuck. Rozmazanie tu aj tak netreba, menu prekrýva celú stránku. */ body.menu-open .hdr, body.menu-open .hdr.is-stuck{ backdrop-filter:none;-webkit-backdrop-filter:none; background:var(--paper); } /* scrollovanie v menu sa nemá prenášať na stránku pod ním */ .nav__links{overscroll-behavior:contain} .nav__links > li{border-bottom:1px solid var(--line-soft)} .nav__links > li > a,.nav__links > li > button{width:100%;padding:16px 0;justify-content:space-between;font-size:1.05rem} .nav__links [aria-current="page"]::after{display:none} .sub{ position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0; background:transparent;min-width:0;padding:0 0 14px;display:none; } .has-sub[data-open="true"] .sub{display:grid;transform:none} .sub a{padding:9px 0 9px 16px;border-left:1px solid var(--line);border-radius:0} .sub a:hover{background:transparent} .nav__mobile-cta{display:block;margin-top:26px} .nav__mobile-cta .btn{width:100%} } @media(min-width:1001px){.nav__mobile-cta{display:none}} /* ========================================================================== HERO (domovská stránka) ========================================================================== */ /* Hero je obálka časopisu, nie dva stĺpce vedľa seba. Médium vyteká k pravému okraju okna a má riadenú výšku, aby obálka sadla do jednej obrazovky aj na širokom monitore. */ .hero{position:relative;padding-top:clamp(14px,2.2vw,34px);padding-bottom:clamp(30px,4vw,56px);overflow:clip} .hero__kicker{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep);font-weight:500;margin-bottom:22px;line-height:1.9} .hero__kicker span{white-space:nowrap} .hero__kicker .dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6;vertical-align:.22em;margin-left:.5em} .hero .display{font-size:clamp(2.6rem,6.7vw,5.1rem);margin-bottom:22px} .hero .display .script{display:block;font-size:.92em;color:var(--rose);margin-bottom:-.06em} .hero__sub{font-size:clamp(1.075rem,1vw + .88rem,1.24rem);color:var(--muted);max-width:44ch;line-height:1.7;margin-bottom:32px} /* Video je zvislé 4:5, čiže platí to isté ako pri zvislých fotkách na obálkach podstránok: do vytekajúceho pásu nepatrí. Zostáva v kontajneri, zaoblené z oboch strán a zarovnané na pravý okraj kontajnera. */ .hero__media.spread__media{position:relative;grid-column:mid-b/main-end} .hero__media img{ width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-lg); aspect-ratio:4/5;object-fit:cover;object-position:center 38%; } .hero__media .vid--hero{ border-radius:var(--r-lg);box-shadow:var(--shadow-lg); width:100%;height:auto;max-width:none; /* .vid má margin-inline:auto pre samostatné video v texte. Tu by pohltil voľné miesto a video by sa vycentrovalo namiesto zarovnania na okraj. */ margin-inline:0; } .hero__media .vid--hero .vid__el{height:auto;aspect-ratio:4/5;object-fit:cover} /* Ťah z loga ako vodoznak. Je zámerne ZA videom, nie nad ním: na tmavej fotke by ružová linka zmizla a polovica kresby by pôsobila ako chyba. Takto sa spoza obálky vynára len jej krémová polovica a je to podpis, nie nálepka. Kotví sa od pravého okraja, aby držala pri videu aj keď je pás širší než ono. */ .hero__line{ position:absolute;top:-52px;left:-96px; width:210px;color:var(--fuchsia);opacity:.55;pointer-events:none;z-index:0; } .hero__media .vid--hero,.hero__media img{position:relative;z-index:1} @media(max-width:900px){ .hero{padding-bottom:clamp(20px,4vw,34px)} .hero__media{max-width:none;width:auto;grid-column:auto} .hero__media img,.hero__media .vid--hero{border-radius:0} .hero__media .vid--hero{height:auto;max-width:none;width:100%} .hero__media .vid--hero .vid__el{height:auto;aspect-ratio:4/5} .hero__line{width:104px;top:-10px;left:auto;right:16px} } @media(max-width:620px){ .hero__kicker{font-size:.74rem;letter-spacing:.13em;margin-bottom:18px} .hero .btn-row{display:grid;gap:12px} .hero .btn-row .btn{width:100%} } /* ========================================================================== SPREAD, mriežka na celú šírku okna Zdedená mriežka mala jediný stĺpec s max-width 1240 px, takže každá fotka musela ostať vnútri a všetko vyzeralo ako ten istý blok. Spread pridáva pomenované linky až po okraj okna, takže médium môže vytiecť z kontajnera a kompozícia dostane smer. Text ostáva na rovnakej osi ako v .container, aby sa merítko stránky nerozpadlo. ========================================================================== */ .spread{ --half:calc((min(1240px,100%) - 2*var(--gut) - var(--spread-gap))/2); display:grid; grid-template-columns: [full-start] minmax(var(--gut),1fr) [main-start] minmax(0,var(--half)) [mid-a] var(--spread-gap) [mid-b] minmax(0,var(--half)) [main-end] minmax(var(--gut),1fr) [full-end]; align-items:center; } .spread > *{grid-column:main-start/main-end;min-width:0} /* Riadok sa priraďuje natvrdo. Automatické umiestňovanie ide zľava doprava a keď má text stĺpce 5 až 6 a médium 1 až 3, kurzor je už za médiom a to spadne o riadok nižšie. V zrkadlovom variante sa tak fotka ocitla pod textom namiesto vedľa neho. */ .spread__text,.spread__media{grid-row:1} .spread__text{grid-column:main-start/mid-a} .spread__media{grid-column:mid-b/full-end} /* zrkadlový variant: médium vyteká doľava */ .spread--l .spread__text{grid-column:mid-b/main-end} .spread--l .spread__media{grid-column:full-start/mid-a} .spread__full{grid-column:full-start/full-end} .spread--top{align-items:start} /* Pás s pevnou šírkou média. Pri pomere pol na pol rastie vytekajúci pás so šírkou okna donekonečna: pri 1990 px má 963 px. Zvislá fotka ani zvislé video sa doň nezmestia bez toho, aby boli 1200 px vysoké, takže dostali strop šírky, odplávali k okraju a vedľa nich ostala krémová diera 300 až 470 px. Tu je to naopak: médium má pevnú šírku, vyplní svoj stĺpec celé a všetko, čo zvýši, dostane text. Fotka tak sedí pri texte na každej šírke okna a nič sa z nej neoreže. */ .spread--fixmedia{ --side:max(var(--gut),calc((100% - 1240px)/2)); --media-w:clamp(340px,40vw,600px); grid-template-columns: [full-start] var(--side) [main-start] minmax(0,1fr) [mid-a] var(--spread-gap) [mid-b] var(--media-w) [main-end full-end]; } .spread--fixmedia .spread__media img, .spread--fixmedia .spread__media video{ width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:auto; } /* vlásočnica pod obálkou sa vracia na pravý okraj kontajnera, nie okna */ .spread--fixmedia .pagehead__rule{margin-right:var(--side)} /* Dvojstrana nesie výšku už tým, že fotka ide cez okraj. Toľko vzduchu ako bežná sekcia nepotrebuje. */ .sec.spread{padding-block:clamp(46px,5.6vw,84px)} /* Fotka, ktorá vyteká, má rovný okraj na tej strane, kde odchádza z okna. Zaoblenie na obidvoch stranách by ju zase spravilo dlaždicou. */ .spread__media img,.spread__media video{ width:100%;height:100%;object-fit:cover;display:block; border-radius:var(--r-lg) 0 0 var(--r-lg);box-shadow:var(--shadow); } .spread--l .spread__media img,.spread--l .spread__media video{border-radius:0 var(--r-lg) var(--r-lg) 0} /* Zvislá fotka sa do širokého vytekajúceho pásu nedá dať tak, aby prežila. Pás je pri 1600 px široký cez 760 px, zvislý zdroj by musel byť 950 px vysoký a rám ho oreže o štvrtinu až polovicu, väčšinou práve o hlavu. Preto dostane užší rám pritlačený k tomu okraju, cez ktorý vyteká. Bleed ostáva, orez zmizne. */ .spread__media--tall{display:flex;justify-content:flex-end} .spread--l .spread__media--tall{justify-content:flex-start} .spread__media--tall img{aspect-ratio:4/5;width:min(100%,460px);height:auto;max-height:none} .spread__media--wide img{aspect-ratio:3/2} .spread__media--sq img{aspect-ratio:1/1} @media(max-width:900px){ .spread{display:block;padding-inline:var(--gut)} .spread > *{grid-column:auto} .spread__media{margin-inline:calc(-1*var(--gut));margin-top:clamp(26px,5vw,40px)} .spread__media img,.spread--l .spread__media img, .spread__media video,.spread--l .spread__media video{border-radius:0} .spread__media--tall img{aspect-ratio:5/4} } /* ---------- hlavička podstránky: obálka ---------- */ .pagehead{padding-top:clamp(22px,3vw,40px);padding-bottom:0} .pagehead .display{font-size:clamp(2.15rem,4.9vw,3.9rem);margin-bottom:20px} .pagehead .lead{max-width:52ch} /* Strop výšky obálky. Bez neho vytiahol portrét stĺpec na 860 px, kým nadpis s podnadpisom mal 240, a vedľa textu ostalo 600 px prázdna. Orezanie cez object-fit je tu lacnejšia daň než diera v kompozícii. */ /* Obálka nevnucuje fotke pomer. Napevno nastavené 5/4 sploštilo zdroje, ktoré sú bližšie k štvorcu: peeler na /pristrojove-osetrenia/ (1,25) sa na širokom monitore orezával o 30 %. Takto sa fotka vykreslí vo svojom pomere a strop výšky zasiahne až vtedy, keď by inak prerástla obrazovku. */ .pagehead__media img{height:auto;aspect-ratio:auto;max-height:min(70vh,660px);object-fit:cover} /* Portrét v obálke: rovnaké pravidlo ako pri .spread__media--tall. Strop výšky z neho robil vodorovný pás a odrezával mu polovicu, na /hlbkove-cistenie/ dokonca 53 %. Užší rám pri okraji ukáže celú fotku a nadpisu vedľa neho nechá rozumný pomer. */ .pagehead__media--tall{display:flex;justify-content:flex-end} .pagehead__media--tall img{aspect-ratio:4/5;width:min(100%,440px);height:auto;max-height:none} /* Obálka so zvislou fotkou dostáva iný pomer stĺpcov. Pás pre médium je pri pol na pol na portrét priširoký: buď sa fotka oreže o polovicu, alebo v páse ostane diera. Text preto berie viac, médium menej a fotka pás vyplní celý vo svojom prirodzenom pomere, takže sa z nej nestratí nič. */ /* Zvislá fotka do vytekajúceho pásu nepatrí a nedá sa to obísť. Pás rastie so šírkou okna (pri 1990 px má cez 900), portrét ho nikdy nevyplní, takže buď sa oreže o polovicu, alebo vedľa neho ostane krémová diera 300 až 470 px. Portrétová obálka preto ostáva v kontajneri: rovnaké dva stĺpce ako inde, fotka zaoblená z oboch strán, zarovnaná na pravý okraj kontajnera a v prirodzenom pomere, takže sa z nej nestratí nič. Bleed si nechávajú vodorovné fotky, tie pás vyplnia. */ .pagehead--portrait .pagehead__media{grid-column:mid-b/main-end} .pagehead--portrait .pagehead__media--tall{display:block} /* Zrkadlová obálka: fotka vľavo, text vpravo. Stĺpce prepína .spread--l, tu sa dorovnáva len to, čo je na obálku naviazané. Vytekať musí k ľavému okraju okna, inak by zostal pás krému tam, kde predtým fotka končila. */ .pagehead--flip .pagehead__media--tall{justify-content:flex-start} .pagehead--flip.pagehead--portrait .pagehead__media{grid-column:main-start/mid-a} .pagehead--flip .pagehead__rule{margin-left:0} .pagehead--portrait .pagehead__media img{ width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:auto; border-radius:var(--r-lg); } @media(max-width:900px){ .pagehead--portrait .pagehead__media img{max-height:min(64vh,520px);object-fit:cover} } @media(max-width:900px){ .pagehead__media img{max-height:min(52vh,420px)} .pagehead__media--tall{justify-content:center} .pagehead__media--tall img{width:100%;max-height:min(58vh,460px);aspect-ratio:4/5} } /* Vlásočnica pod obálkou oddelí hlavičku od tela stránky bez toho, aby sme museli minúť ďalších sto pixelov prázdna. */ .pagehead__rule{ grid-column:main-start/main-end;grid-row:2;height:1px;background:var(--line); margin-top:clamp(34px,4.2vw,60px); } @media(max-width:900px){ .pagehead__rule{margin-top:clamp(28px,5vw,40px)} .pagehead__media--tall img{aspect-ratio:4/5} .pagehead__media{max-width:none} } /* omrvinky */ .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;font-size:.82rem;color:var(--muted);margin-bottom:22px} .crumbs li{display:flex;align-items:center;gap:.5em} .crumbs li + li::before{content:"/";opacity:.4} .crumbs a:hover{color:var(--rose-deep)} /* ========================================================================== OBSAHOVÉ KOMPONENTY ========================================================================== */ /* odpoveďový blok pre AI aj pre človeka */ .answer{ border-left:2px solid var(--rose); padding:2px 0 2px 22px; font-size:clamp(1.08rem,1.1vw + .86rem,1.28rem); line-height:1.62;color:var(--ink);max-width:64ch; } .answer strong{font-weight:500} /* rýchle fakty */ .facts{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;background:var(--line-soft);border:1px solid var(--line-soft); border-radius:var(--r);overflow:hidden; } .facts div{background:var(--card);padding:20px 22px} .facts dt{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:7px} .facts dd{margin:0;font-size:1rem;line-height:1.45;color:var(--ink);font-weight:500} .facts dd small{display:block;font-weight:400;color:var(--muted);font-size:.85rem;margin-top:2px} /* Druhá prevádzka sa hlási v tom istom políčku ako adresa, ale iným tónom, aby si ju nikto neprečítal ako druhý riadok tej terajšej. */ .facts dd .facts__soon{color:var(--rose-deep);margin-top:8px;font-size:.8rem;line-height:1.4} /* Fakty cez celú šírku pod odpoveďou, nie v bočnom stĺpci vedľa nej. Sekcia sa tým prestane čítať ako ďalší dvojstĺpec a fakty dostanú váhu, akú si ako hlavný ťahák pre AI vyhľadávanie zaslúžia. */ .facts--row{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:760px){.facts--row{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:400px){.facts--row{grid-template-columns:1fr}} /* asymetrický dvojstĺpec */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,74px);align-items:center} .split--55{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)} .split--45{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)} .split--top{align-items:start} /* .split--flip prehadzuje stĺpce. Doteraz bolo pravidlo len v mobilnom bloku, takže na desktope nerobilo nič a štyri sekcie, ktoré ho používajú, vyzerali presne ako všetky ostatné (text vľavo, fotka vpravo). Práve to bol jeden z dôvodov, prečo sa stránka čítala ako jedna šablóna. */ .split--flip > *:first-child{order:2} @media(max-width:900px){ .split,.split--55,.split--45{grid-template-columns:1fr;gap:34px} } /* obrázok s popiskom */ .figure img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow);object-fit:cover} @media(hover:hover){ .figure img{transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s} .figure:hover img{transform:translateY(-4px);box-shadow:0 42px 70px -38px rgba(120,60,85,.55)} } .figure figcaption{ display:flex;align-items:flex-start;gap:.7em;margin-top:14px; font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--muted);line-height:1.45; } .figure figcaption::before{content:"";flex:0 0 auto;width:22px;height:1px;background:var(--rose);margin-top:.72em;opacity:.7} .figure--tall img{aspect-ratio:4/5} .figure--wide img{aspect-ratio:3/2} .figure--square img{aspect-ratio:1/1} /* samostatne stojaci obrázok v úzkej sekcii, napr. poukaz alebo porovnanie */ .figure--narrow{max-width:520px;margin-inline:auto} .figure--narrow figcaption{justify-content:center;text-align:center} /* rad rovnocenných fotiek vedľa seba, napr. tri techniky Body & Mind */ .figrow{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .figrow figcaption{font-size:.92rem} /* tiché video v slučke */ .vidfig{margin:0} .vidfig figcaption{ display:flex;align-items:flex-start;gap:.7em;margin-top:14px; font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--muted);line-height:1.45; max-width:380px;margin-inline:auto; } .vidfig figcaption::before{content:"";flex:0 0 auto;width:22px;height:1px;background:var(--rose);margin-top:.72em;opacity:.7} .vid{ position:relative;max-width:380px;margin-inline:auto; border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--shadow);background:var(--paper2); } /* Video je kódované rovno v 4:5, takže sa nikde neoreže cez CSS. aspect-ratio drží miesto ešte pred načítaním postera, inak by stránka poskočila. */ .vid__el{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--paper2)} /* Video v hero má rovnaký rám aj proporciu, akú tam predtým mala fotka. */ .vid--hero{max-width:none;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)} @media(max-width:900px){.vid--hero{max-width:460px}} .vid__btn{ position:absolute;right:12px;bottom:12px;width:42px;height:42px; display:none;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.86);color:var(--ink); box-shadow:var(--shadow-sm); transition:transform .2s ease,background .2s ease; } /* tlačidlo dávame až vtedy, keď ho JS vie obslúžiť. Dovtedy sú natívne ovládanie */ .vid.is-ready .vid__btn{display:grid} .vid__btn:hover{background:#fff;transform:scale(1.07)} .vid__ico{ width:15px;height:15px;background:currentColor; -webkit-mask:var(--ico-play) center/contain no-repeat; mask:var(--ico-play) center/contain no-repeat; } .vid.is-playing .vid__ico{-webkit-mask-image:var(--ico-pause);mask-image:var(--ico-pause)} @media(prefers-reduced-motion:reduce){.vid__btn{transition:none}} /* celoplošný pás s fotkou */ .band{position:relative;overflow:clip;isolation:isolate} .band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(58,42,49,.82) 0%,rgba(58,42,49,.58) 46%,rgba(58,42,49,.24) 100%)} .band{padding-block:clamp(80px,10vw,150px);color:#fff} .band .h2,.band p{color:#fff} .band p{opacity:.92;max-width:52ch} .band .eyebrow{color:var(--peach)} /* Pás s textom v strede potrebuje iné stmavenie než pás s textom vľavo. Pôvodný prechod išiel zľava doprava a v strede už bol taký svetlý, že ružová kurzíva v nadpise na kvetinovej lúke prakticky zmizla. */ /* Krytie hore bolo .52 a nadpis sedel práve tam. Kde pod ním padol biely uterák alebo kvet, kontrast klesol na 3,6:1. Fotka je stále čitateľná, len už nikde nepretlačí text. */ .band--center::after{ background:linear-gradient(180deg,rgba(41,28,33,.74) 0%,rgba(41,28,33,.84) 46%,rgba(41,28,33,.76) 100%); } .band .statement__t{color:#fff;text-shadow:0 1px 28px rgba(41,28,33,.5)} .band .statement__t em{color:var(--peach)} .band .statement__by{color:rgba(255,255,255,.82)} .band .statement::before{background:var(--peach)} /* karty služieb */ .cards{display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:repeat(auto-fit,minmax(272px,1fr))} /* Štyri karty pri auto-fit vychádzali na 270,5 px, teda o pol pixela pod hranicou 272, a posledná karta padala sama do druhého riadka. Tam, kde sú presne štyri, sa počet stĺpcov určuje natvrdo. */ .cards--4{grid-template-columns:repeat(2,minmax(0,1fr))} @media(min-width:1080px){.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:560px){.cards--4{grid-template-columns:1fr}} .card{ background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg); padding:clamp(26px,2.6vw,36px);display:flex;flex-direction:column; box-shadow:0 20px 46px -42px rgba(120,60,85,.7); transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s; } a.card:hover,.card:hover{transform:translateY(-5px);box-shadow:0 34px 62px -40px rgba(120,60,85,.6);border-color:rgba(212,106,147,.3)} .card__num{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--rose-deep);margin-bottom:14px;display:block} .card .h3{margin-bottom:10px} .card p{color:var(--muted);font-size:.98rem;line-height:1.68;margin-bottom:18px} .card ul{display:grid;gap:8px;margin-bottom:24px} .card li{position:relative;padding-left:19px;font-size:.94rem;line-height:1.55;color:var(--ink);opacity:.88} .card li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--fuchsia)} .card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .card__price{font-family:var(--serif);font-size:1.06rem;color:var(--ink);font-weight:600} .card__price small{font-family:var(--sans);font-size:.8rem;font-weight:400;color:var(--muted);margin-right:.35em} .card--sage li::before{background:var(--sage)} .card--sage .card__num,.card--sage .arrow{color:var(--sage-deep)} .card--media{padding:0;overflow:hidden} .card--media img{width:100%;aspect-ratio:3/2;object-fit:cover} .card--media .card__body{padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;flex:1} /* postup ošetrenia ako číslovaný zoznam. Tá istá informácia bola predtým jedna dlhá veta oddelená čiarkami. Ako zoznam sa dá prebehnúť očami a hlavne z nej vidno, že ošetrenie má kroky. */ .proclist{counter-reset:p;display:grid;gap:9px;margin-top:8px;max-width:44ch} .proclist li{ counter-increment:p;position:relative;padding-left:32px; font-size:.98rem;line-height:1.5;color:var(--ink); } .proclist li::before{ content:counter(p,decimal-leading-zero);position:absolute;left:0;top:.08em; font-family:var(--serif);font-style:italic;font-size:.9rem;color:var(--rose); } /* zoznam s číslami (prečo Elisi, postup) */ .steps{display:grid;gap:clamp(22px,2.6vw,34px);grid-template-columns:repeat(auto-fit,minmax(228px,1fr))} .step{padding-top:22px;border-top:1px solid var(--line)} .step__n{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--rose-deep);display:block;margin-bottom:12px} .step h3{font-family:var(--sans);font-weight:500;font-size:1.06rem;margin-bottom:8px;line-height:1.35} .step p{font-size:.94rem;color:var(--muted);line-height:1.68} /* ---------- darčekový poukaz ---------- Kreslený v HTML, nie fotka. Dôvody: ostrý v každej veľkosti, váži nula bajtov, je v písme webu a nenesie mŕtvu adresu info@elisi.sk z tlačenej verzie. Ľavý okraj má perforáciu ako skutočný poukaz, to je to, čo dá vec dokopy. */ .voucher{ position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center; gap:clamp(16px,2.2vw,26px); background:linear-gradient(140deg,#fff 0%,#FFFCFB 55%,#FDF4F1 100%); border:1px solid rgba(58,42,49,.1);border-radius:var(--r); padding:clamp(26px,3.4vw,40px) clamp(22px,3vw,38px); box-shadow:0 30px 60px -34px rgba(120,60,85,.4); overflow:hidden; } /* perforácia vľavo */ .voucher__perf{ align-self:stretch;width:1px;margin-right:clamp(4px,1vw,12px); background-image:linear-gradient(var(--line) 52%,transparent 0); background-size:1px 9px; } .voucher__kicker{ font-family:var(--sans);font-weight:500;font-size:clamp(.76rem,1.5vw,.9rem); letter-spacing:.26em;text-transform:uppercase;color:var(--ink);margin:0 0 12px; } .voucher__value{ font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.35rem);line-height:1.1; color:var(--muted);margin:0;font-weight:400; } .voucher__value b{font-style:italic;font-weight:600;color:var(--rose-deep)} .voucher__note{ font-size:.92rem;color:var(--muted);line-height:1.6;margin:14px 0 0;max-width:34ch; } .voucher__logo{width:clamp(64px,9vw,96px);height:auto;opacity:.9;flex:none} /* dekoratívny nádych v rohu, rovnaký princíp ako pri .benefitbox */ .voucher::after{ content:"";position:absolute;bottom:-90px;right:-60px;width:230px;height:230px; border-radius:50%;background:radial-gradient(circle,rgba(212,106,147,.14),transparent 70%); pointer-events:none; } @media(max-width:620px){ .voucher{grid-template-columns:auto 1fr;row-gap:20px} .voucher__logo{grid-column:2;justify-self:start;width:64px} } /* ---------- zoznam prínosov: "čo môžete očakávať" ---------- */ .benefits{display:grid;gap:12px;list-style:none;margin:0;padding:0} .benefits li{display:flex;gap:13px;align-items:flex-start;font-size:1.02rem;line-height:1.55;color:var(--ink)} .benefits li::before{ content:"";flex:none;width:21px;height:21px;margin-top:.2em;border-radius:50%; background-color:rgba(212,106,147,.15); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B84E78' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center;background-size:11px; } .benefitbox{ position:relative;overflow:hidden; background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r); padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-sm); } /* jemný ružový nádych v rohu, aby box nebol len biely obdĺžnik */ .benefitbox::before{ content:"";position:absolute;top:-70px;right:-70px;width:190px;height:190px;border-radius:50%; background:radial-gradient(circle,rgba(212,106,147,.16),transparent 68%);pointer-events:none; } .benefitbox h3{ font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:.14em; text-transform:uppercase;color:var(--rose-deep);margin-bottom:18px; } /* ---------- cenník: menu karta s bodkovanými vodičmi ---------- */ /* Obálka cenníka bez fotky. Pravý stĺpec nesie obsah cenníka: osem skupín s najnižšou cenou, každá je kotva. Fotka tu bola len dekorácia, toto sa dá použiť, a človek vidí rozsah služieb skôr, než začne scrollovať. */ .pagehead--aside .pagehead__aside{grid-row:1;grid-column:mid-b/main-end;align-self:center} .priceindex{ background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg); padding:clamp(16px,1.8vw,24px) clamp(18px,2vw,26px); box-shadow:0 20px 46px -42px rgba(120,60,85,.7); } .priceindex__row{ display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline;gap:12px;padding:.62em 0; border-bottom:1px solid var(--line-soft);transition:color .2s; } .priceindex__row:last-of-type{border-bottom:0} .priceindex__n{ font-family:var(--serif);font-style:italic;font-size:.86rem; color:var(--rose);min-width:1.6em; } .priceindex__t{font-size:.94rem;color:var(--ink);transition:color .2s} .priceindex__c{font-family:var(--serif);font-size:.98rem;font-weight:600;color:var(--rose-deep)} .priceindex__row:hover .priceindex__t{color:var(--rose-deep)} .priceindex__note{font-size:.8rem;color:var(--muted);margin-top:14px} @media(max-width:900px){ .pagehead--aside .pagehead__aside{grid-column:auto;margin-top:clamp(26px,5vw,38px)} } .pricenav{ display:flex;gap:8px;flex-wrap:wrap;padding-block:14px; position:sticky;top:76px;z-index:40; background:rgba(251,246,244,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft);margin-bottom:clamp(38px,5vw,60px); } .pricenav a{ padding:.5em 1.05em;border-radius:999px;border:1px solid var(--line); font-size:.86rem;color:var(--muted);transition:all .2s;white-space:nowrap; } .pricenav a:hover,.pricenav a.is-active{background:var(--ink);border-color:var(--ink);color:#fff} /* Osem skupín sa na mobile zalomí na tri riadky a zjedia pol obrazovky. Radšej jeden riadok, ktorý sa posúva do strany. */ @media(max-width:760px){ .pricenav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .pricenav::-webkit-scrollbar{display:none} } /* lepiaca hlavička by inak prekryla vrch sekcie, na ktorú kotva skočí */ #objednat{scroll-margin-top:96px} .pricegroup{margin-bottom:clamp(32px,3.6vw,50px);scroll-margin-top:150px} /* vlások medzi skupinami, aby sa dlhý cenník čítal ako kapitoly */ .pricegroup + .pricegroup{border-top:1px solid var(--line-soft);padding-top:clamp(28px,3.2vw,44px)} /* Hlavička skupiny je jediné miesto, kde má dlhý zoznam šancu chytiť oko. Nesie ju samotný názov, preto je tu väčší než bežné h2 na stránke. Číslo stojí pred ním a vlások ho dotiahne k pravému okraju, takže kapitola drží celú šírku aj bez popisu a bez fotky. */ .pricegroup__head{ display:flex;align-items:baseline;flex-wrap:wrap; gap:clamp(10px,1.6vw,22px);margin-bottom:clamp(20px,2.4vw,34px); } .pricegroup__head .h2{ font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.01em;flex:0 1 auto; } /* Folio je tu menšie než v sekciách. Osemkrát za sebou v plnej veľkosti by z čísel urobilo hlavný obsah stránky. */ .pricegroup__head .folio{ font-size:clamp(1.05rem,1.5vw,1.4rem);margin-bottom:0;flex:0 0 auto; } .pricegroup__rule{ flex:1 1 60px;height:1px;background:var(--line); position:relative;top:-.4em;min-width:40px; } .pricegroup__note{ font-size:.95rem;color:var(--muted);line-height:1.6;max-width:52ch;margin-top:8px; } @media(max-width:600px){ .pricegroup__rule{display:none} } .pricelist{display:grid;border-bottom:1px solid var(--line-soft)} /* Dvojstĺpec od 1100 px. 44 služieb pod sebou je 3 700 px jedného rytmu. V dvoch stĺpcoch je z toho jedálny lístok, ktorý sa dá prebehnúť očami. Multicol drží poradie zhora nadol a až potom vedľa, čo je pri cenníku správne poradie čítania. */ @media(min-width:1100px){ .pricelist--two{display:block;columns:2;column-gap:clamp(38px,4vw,64px)} .pricelist--two .pricerow{break-inside:avoid} } .pricerow{ display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:12px; padding:13px 0;border-top:1px solid var(--line-soft); } /* Cenník má 43 položiek. Zvýraznenie riadka pod myšou pomáha očiam držať sa na jednom riadku od názvu až po cenu. Rovnaký princíp ako pri .artlist. */ @media(hover:hover){ .pricerow{border-radius:10px;transition:background .22s,padding .22s} .pricerow:hover{background:var(--card);padding-inline:14px} .pricerow:hover .pricerow__name::after{background-image:radial-gradient(circle,var(--rose) 1px,transparent 1.2px);opacity:.55} } .pricerow__name{ display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; font-size:1.02rem;font-weight:500;color:var(--ink);line-height:1.4; } .pricerow__dur{ font-size:.82rem;font-weight:400;color:var(--muted); border:1px solid var(--line);border-radius:999px;padding:.1em .7em;white-space:nowrap; } .pricerow__desc{grid-column:1/2;font-size:.9rem;color:var(--muted);line-height:1.6;margin-top:4px;max-width:62ch} .pricerow__price{ font-family:var(--serif);font-size:1.18rem;font-weight:600;color:var(--rose-deep); white-space:nowrap;grid-row:1;grid-column:2; } .pricerow__price small{font-family:var(--sans);font-size:.78rem;font-weight:400;color:var(--muted);margin-right:.3em} /* cena, ktorú klientka ešte nepotvrdila: nesmie kričať vedľa skutočných cien */ .pricerow__price--soft{font-family:var(--sans);font-size:.85rem;font-weight:400;font-style:italic;color:var(--muted)} /* medzinadpis vnútri jedného cenníkového zoznamu (doplnky k ošetreniu) */ .pricelist__sub{padding:34px 0 6px} .pricelist__sub h3{font-family:var(--sans);font-weight:500;font-size:1rem;letter-spacing:.01em;color:var(--ink)} .pricelist__sub p{font-size:.9rem;color:var(--muted);line-height:1.6;margin-top:5px;max-width:56ch} /* bodkovaný vodič medzi názvom a cenou */ .pricerow__name::after{ content:"";flex:1 1 40px;min-width:24px;height:1px;align-self:center;margin-top:.35em; background-image:radial-gradient(circle,var(--line) 1px,transparent 1.2px); background-size:6px 2px;background-repeat:repeat-x;background-position:0 center; } @media(max-width:560px){ .pricerow__name::after{display:none} .pricerow{grid-template-columns:1fr auto} } .pricefoot{ margin-top:34px;padding:26px 28px;background:var(--card);border-radius:var(--r); border:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:18px; align-items:center;justify-content:space-between; } .pricefoot p{font-size:.96rem;color:var(--muted);max-width:52ch} /* ---------- najžiadanejšie: vstupný bod do cenníka ---------- Kto príde na cenník, väčšinou nevie, čo chce. Pôvodne dostal rovno 44 riadkov a odišiel. Toto sú tri dvere dnu, s fotkou a cenou. */ .pricehero{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .pickcard{ display:flex;flex-direction:column;background:var(--card); border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden; box-shadow:0 20px 46px -42px rgba(120,60,85,.7); transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s; } a.pickcard:hover{transform:translateY(-5px);box-shadow:0 34px 62px -40px rgba(120,60,85,.6);border-color:rgba(212,106,147,.32)} /* Karta bez fotky. Štítok, ktorý predtým sedel na obrázku, je teraz kicker nad nadpisom, inak by po fotke ostal visieť v prázdne. */ .pickcard__kicker{ display:block;margin-bottom:10px;color:var(--rose-deep); font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase; } .pickcard__body{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;flex:1} .pickcard h3{font-family:var(--serif);font-weight:600;font-size:1.16rem;line-height:1.25;margin-bottom:6px} .pickcard p{font-size:.92rem;color:var(--muted);line-height:1.6;margin-bottom:18px} .pickcard__foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:12px} .pickcard__price{font-family:var(--serif);font-size:1.32rem;font-weight:600;color:var(--rose-deep)} .pickcard__dur{font-size:.82rem;color:var(--muted)} /* ---------- recenzie ---------- */ .reviews{display:grid;gap:clamp(18px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .review{ background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg); padding:clamp(26px,2.6vw,34px);display:flex;flex-direction:column; } .review__stars{margin-bottom:16px;font-size:1rem} .review blockquote{ font-family:var(--serif);font-size:1.06rem;line-height:1.58;color:var(--ink); margin-bottom:20px;flex:1; } .review figcaption{font-size:.92rem;font-weight:500;color:var(--ink);margin-top:auto} .review figcaption span{display:block;font-weight:400;font-size:.82rem;color:var(--muted);margin-top:2px} .rating{ display:inline-flex;align-items:center;gap:12px;padding:11px 20px; background:var(--card);border:1px solid var(--line-soft);border-radius:999px; box-shadow:var(--shadow-sm);font-size:.92rem; } .rating b{font-family:var(--serif);font-size:1.2rem;color:var(--rose-deep);line-height:1} /* ---------- FAQ ---------- */ /* Hlavička sa veze popri otázkach, nie nad nimi. Ušetrí to výšku a hlavne to rozbije vzorec „nadpis, potom obsah", ktorý mala každá sekcia na webe. */ .faqside{align-self:start} @media(min-width:901px){.faqside{position:sticky;top:112px}} .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ display:flex;align-items:flex-start;justify-content:space-between;gap:20px; padding:22px 0;cursor:pointer;list-style:none; font-family:var(--sans);font-weight:500;font-size:clamp(1rem,1.1vw,1.1rem); line-height:1.45;color:var(--ink);transition:color .2s; } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--rose-deep)} .faq summary::after{ content:"";flex:0 0 auto;width:12px;height:12px;margin-top:.42em; border-right:1.4px solid var(--rose);border-bottom:1.4px solid var(--rose); transform:rotate(45deg);transition:transform .25s; } .faq details[open] summary::after{transform:rotate(-135deg);margin-top:.6em} .faq details > div{padding-bottom:24px;max-width:72ch} .faq details p{color:var(--muted);line-height:1.75} .faq details p + p{margin-top:.9em} /* ---------- kontakt ---------- */ .infolist{display:grid} .infolist li{display:flex;gap:16px;padding:19px 0;border-bottom:1px solid var(--line-soft)} .infolist li:first-child{border-top:1px solid var(--line-soft)} .infolist svg{flex:0 0 auto;width:20px;height:20px;color:var(--rose);margin-top:3px} .infolist b{display:block;font-weight:500;font-size:.98rem;margin-bottom:2px} .infolist span,.infolist a{color:var(--muted);font-size:.98rem;line-height:1.55} .infolist a:hover{color:var(--rose-deep)} .hours{display:grid;gap:0} .hours li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:.96rem} .hours li:last-child{border-bottom:0} .hours span:first-child{color:var(--muted)} .hours span:last-child{font-weight:500} .hours li.is-today span{color:var(--rose-deep)} /* mapa až po kliknutí */ .mapbox{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--paper2)} .mapbox img,.mapbox iframe{display:block;width:100%;height:100%;border:0;aspect-ratio:16/11;object-fit:cover} .mapbox__veil{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;text-align:center;padding:24px;background:linear-gradient(180deg,rgba(58,42,49,.28),rgba(58,42,49,.5)); color:#fff; } .mapbox__veil p{font-size:.9rem;max-width:34ch;opacity:.94} /* ---------- rezervačný kalendár Bookio ---------- POZOR: .bookio__frame nesmie nikdy dostať výšku cez CSS. Widget hlási výšku obsahu správou a app.js ju zapisuje do atribútu height, ktorý je len prezentačný, takže ho akékoľvek CSS pravidlo prebije. Keď sa to stane, kalendár ostane orezaný na pevnej výške. Stálo to jeden zbytočný test na telefóne. Jediná výnimka je .is-fallback nižšie. */ .bookio{ background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg); overflow:hidden;box-shadow:0 20px 46px -42px rgba(120,60,85,.7); } .bookio__intro{padding:clamp(28px,4vw,52px) clamp(20px,3vw,40px);text-align:center} .bookio__intro .eyebrow{justify-content:center} .bookio__intro .h3{max-width:22ch;margin-inline:auto} .bookio.is-loading .bookio__intro{opacity:.45;transition:opacity .2s} .bookio.is-on{border-color:var(--line-soft)} .bookio__frame{display:block;width:100%;border:0;background:#fff} /* poistka, keď správa o výške nepríde: aspoň sa v kalendári dá scrollovať */ .bookio.is-fallback .bookio__frame{height:min(80vh,760px)} /* ---------- formulár ---------- */ .form{display:grid;gap:18px} .form__row{display:grid;gap:18px;grid-template-columns:1fr 1fr} @media(max-width:640px){.form__row{grid-template-columns:1fr}} .field{display:grid;gap:7px} .field label{font-size:.84rem;font-weight:500;letter-spacing:.02em;color:var(--ink)} .field label .req{color:var(--rose-deep)} .field input,.field select,.field textarea{ width:100%;font:inherit;font-size:.98rem;color:var(--ink); background:var(--card);border:1px solid var(--line);border-radius:12px; padding:.82em 1em;transition:border-color .2s,box-shadow .2s; } .field textarea{min-height:118px;resize:vertical} .field select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237C646C' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1em center;padding-right:2.6em} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(212,106,147,.14) } .field input::placeholder,.field textarea::placeholder{color:#B7A3A9} .consent{display:flex;gap:11px;align-items:flex-start;font-size:.86rem;color:var(--muted);line-height:1.6} .consent input{width:17px;height:17px;margin-top:3px;flex:0 0 auto;accent-color:var(--rose)} .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden} .formnote{font-size:.84rem;color:var(--muted);line-height:1.6} .formmsg{display:none;padding:15px 18px;border-radius:12px;font-size:.94rem;line-height:1.6} .formmsg.is-on{display:block} .formmsg--ok{background:#EFF4EA;color:#4C6038;border:1px solid #D3E0C5} .formmsg--err{background:#FBEDF1;color:#96355C;border:1px solid #F0D2DC} /* ---------- záverečné CTA ---------- */ .closing{position:relative;overflow:clip} .closing__inner{ background:var(--grad);border-radius:var(--r-lg);color:#fff;position:relative;overflow:hidden; padding:clamp(44px,6vw,84px) clamp(26px,5vw,72px);box-shadow:var(--shadow-lg); } .closing__inner .h2{color:#fff;margin-bottom:16px;max-width:20ch} .closing__inner p{opacity:.95;max-width:48ch;margin-bottom:30px;font-size:1.06rem} .closing__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:38px;align-items:center;position:relative;z-index:1} .closing__alt{font-size:.95rem;opacity:.95;margin-top:22px} .closing__alt a{border-bottom:1px solid rgba(255,255,255,.5)} .closing__alt a:hover{border-bottom-color:#fff} .closing__mark{position:absolute;opacity:.16;color:#fff;pointer-events:none} .closing__mark--a{top:-52px;left:-40px;width:210px} .closing__mark--b{bottom:-64px;right:-34px;width:240px;transform:scaleX(-1)} @media(max-width:860px){.closing__grid{grid-template-columns:1fr;gap:26px}} /* ---------- pätička ---------- */ .foot{background:var(--ink);color:#F1E4E9;padding-block:clamp(52px,6vw,76px) 28px;margin-top:0} .foot__top{ display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(28px,3.4vw,44px);padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.13); } .foot__brand img{height:96px;width:auto;margin-bottom:16px} .foot__brand p{font-size:.93rem;line-height:1.75;color:rgba(241,228,233,.68);max-width:34ch} .foot h2,.foot h3{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fuchsia);margin-bottom:16px;font-weight:500;font-family:var(--sans)} .foot ul{display:grid;gap:10px;font-size:.93rem} .foot ul a{color:rgba(241,228,233,.76);transition:color .2s} .foot ul a:hover{color:#fff} .foot address{font-style:normal;font-size:.93rem;line-height:1.8;color:rgba(241,228,233,.76)} .foot address a:hover{color:#fff} /* Telefón v pätičke mal ako dotykový cieľ 18 px na výšku, hoci na mobile je klik naň hlavná akcia. Vlastný riadok s výplňou z neho robí cieľ, ktorý sa dá trafiť palcom. */ .foot address a[href^="tel:"],.foot address a[href^="mailto:"]{ display:inline-block;padding-block:.62em; } .foot__social{display:flex;gap:12px;margin-top:20px} .foot__social a{ width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22); display:flex;align-items:center;justify-content:center;color:#F1E4E9;transition:all .22s; } .foot__social a:hover{background:var(--rose);border-color:var(--rose);transform:translateY(-2px)} .foot__social svg{width:17px;height:17px} .foot__bottom{ display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between; padding-top:24px;font-size:.82rem;color:rgba(241,228,233,.5); } .foot__bottom a{color:rgba(241,228,233,.72);border-bottom:1px solid rgba(228,138,180,.4)} .foot__bottom a:hover{color:#fff;border-bottom-color:var(--fuchsia)} @media(max-width:880px){.foot__top{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}} @media(max-width:520px){.foot__top{grid-template-columns:1fr}} /* ---------- deliaca línia (motív z loga) ---------- */ .rule{display:flex;align-items:center;gap:20px;color:var(--fuchsia)} .rule::before,.rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))} .rule::after{background:linear-gradient(270deg,transparent,var(--line))} .rule svg{width:34px;height:auto;flex:0 0 auto;opacity:.75} /* ---------- článok v poradni ---------- */ .artmeta{ display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center; font-size:.85rem;color:var(--muted);margin-top:18px; } .artmeta span{display:inline-flex;align-items:center;gap:.45em} .artmeta span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--rose);opacity:.65} .article{max-width:none} .article h2{ font-family:var(--serif);font-weight:400; font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.18;letter-spacing:-.016em; margin:clamp(38px,4vw,56px) 0 16px;text-wrap:balance; } .article h2 em{color:var(--rose)} .article h2:first-child{margin-top:0} .article h3{ font-family:var(--sans);font-weight:500;font-size:1.12rem; margin:30px 0 10px;color:var(--ink); } .article p{color:var(--muted);line-height:1.8;max-width:68ch} .article p + p{margin-top:1.05em} .article strong{color:var(--ink);font-weight:500} .article ul{display:grid;gap:11px;margin:18px 0;max-width:68ch} .article ul li{position:relative;padding-left:22px;color:var(--muted);line-height:1.7} .article ul li::before{content:"";position:absolute;left:2px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--fuchsia)} .article ol{counter-reset:s;display:grid;gap:13px;margin:18px 0;max-width:68ch} .article ol li{counter-increment:s;position:relative;padding-left:34px;color:var(--muted);line-height:1.7} .article ol li::before{ content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.05em; font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--rose); } .article .note{ margin:26px 0;padding:20px 24px;background:var(--paper2);border-radius:var(--r); font-size:.97rem;line-height:1.75;color:var(--ink); } .article .note b{font-weight:500} /* porovnávacia tabuľka */ /* Tabuľka je na mobile širšia než obrazovka a scrolluje sa vo vlastnom rámci. Bez náznaku to čitateľ nevie, tak pravý okraj zosvetlíme do stratena a tieň zmizne, len čo je tabuľka doscrollovaná na koniec. */ .ctable-wrap{ overflow-x:auto;margin:26px 0;-webkit-overflow-scrolling:touch; background: linear-gradient(90deg,var(--paper) 30%,rgba(251,246,244,0)) left/28px 100% no-repeat, linear-gradient(270deg,var(--paper) 30%,rgba(251,246,244,0)) right/28px 100% no-repeat, radial-gradient(farthest-side at 0 50%,rgba(58,42,49,.14),transparent) left/12px 100% no-repeat, radial-gradient(farthest-side at 100% 50%,rgba(58,42,49,.14),transparent) right/12px 100% no-repeat; background-attachment:local,local,scroll,scroll; } .ctable{width:100%;min-width:520px;border-collapse:collapse;font-size:.96rem} .ctable th,.ctable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top} .ctable thead th{ font-family:var(--sans);font-weight:500;font-size:.75rem;letter-spacing:.14em; text-transform:uppercase;color:var(--rose-deep);border-bottom-color:var(--line); } .ctable tbody th{font-weight:500;color:var(--ink);width:30%} .ctable td{color:var(--muted);line-height:1.65} .ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0} /* odkaz na súvisiacu službu */ .servicebox{ display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;justify-content:space-between; margin:clamp(34px,4vw,50px) 0 0;padding:26px 28px; background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg); box-shadow:0 20px 46px -42px rgba(120,60,85,.7); } .servicebox__t{font-family:var(--serif);font-size:1.14rem;font-weight:600;color:var(--ink);margin-bottom:4px} .servicebox p{font-size:.93rem;color:var(--muted);margin:0;max-width:44ch;line-height:1.6} /* zoznam článkov */ .artlist{display:grid;gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft)} .artlist a{ display:grid;grid-template-columns:auto 1fr auto;gap:6px 22px;align-items:baseline; background:var(--paper);padding:26px 4px;transition:background .2s,padding .2s; } .artlist a:hover{background:var(--card);padding-inline:18px} .artlist .n{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--rose-deep)} .artlist .t{font-family:var(--serif);font-size:clamp(1.1rem,1.7vw,1.36rem);font-weight:600;line-height:1.25;color:var(--ink)} .artlist .d{grid-column:2/-1;font-size:.95rem;color:var(--muted);line-height:1.65;max-width:64ch} .artlist .go{color:var(--rose-deep);font-size:.88rem;white-space:nowrap;align-self:center} @media(max-width:640px){ .artlist a{grid-template-columns:auto 1fr} .artlist .go{display:none} } /* ========================================================================== EDITORIÁLNA VRSTVA Cieľ: každá sekcia iná kompozícia. Pôvodne bol na všetko jeden .split s textom vľavo a zaoblenou fotkou vpravo, šesťkrát na stránku, a stránka sa preto čítala ako nekonečný formulár. Nižšie sú kompozičné nástroje, z ktorých sa stránka skladá tak, aby dve susedné sekcie neboli rovnaké. ========================================================================== */ /* ---------- prekryv ---------- Karta preložená cez spodok fotky. Jediný prvok, ktorý na stránke poruší mriežku, a práve preto funguje. Na mobile sa prekryv zmenšuje, tam by veľký posun ukrojil z fotky priveľa. */ .overlap{position:relative;z-index:2;margin-top:clamp(-96px,-7vw,-44px)} .overlap__card{ background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r); padding:clamp(24px,3vw,38px);box-shadow:var(--shadow); } @media(max-width:900px){.overlap{margin-top:-32px;margin-inline:var(--gut)}} /* ---------- dvojica fotiek v rôznej mierke ---------- Dve rovnako veľké fotky vedľa seba sú katalóg. Rozdielna mierka a vertikálny posun z toho robí dvojstranu. */ .duo{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);gap:clamp(14px,2vw,26px);align-items:start} .duo > :last-child{margin-top:clamp(36px,6.5vw,104px)} .duo--rev{grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr)} .duo--rev > :last-child{margin-top:0} .duo--rev > :first-child{margin-top:clamp(36px,6.5vw,104px)} .duo img{border-radius:var(--r);box-shadow:var(--shadow)} .duo .figure--tall img{aspect-ratio:4/5} .duo .figure--sq img{aspect-ratio:1/1} @media(max-width:640px){ .duo,.duo--rev{grid-template-columns:1fr 1fr;gap:12px} .duo > :last-child,.duo--rev > :first-child{margin-top:34px} } /* ---------- výrok cez celú šírku ---------- Miesto, kde stránka na chvíľu prestane vysvetľovať a len povie jednu vec. Vizuálne je to oddych medzi dvoma hustými sekciami. */ .statement{text-align:center;max-width:22ch;margin-inline:auto} .statement--wide{max-width:30ch} .statement__t{ font-family:var(--serif);font-weight:400; font-size:clamp(1.65rem,4.4vw,3.1rem);line-height:1.14;letter-spacing:-.02em; text-wrap:balance;color:var(--ink); } .statement__t em{color:var(--rose)} .statement::before{ content:"";display:block;width:40px;height:1px;background:var(--rose); margin:0 auto clamp(26px,3.4vw,42px);opacity:.8; } .statement__by{ display:block;margin-top:clamp(20px,2.6vw,30px); font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); } .chapter .statement__t{color:#fff} .chapter .statement__t em{color:var(--fuchsia)} .chapter .statement__by{color:rgba(243,231,236,.6)} /* ---------- tmavá kapitola ---------- Presne jedna na dlhú stránku. Je to rez, nie tapeta: keď sú dve, prestane fungovať aj tá prvá. */ .chapter{background:var(--ink-deep);color:#F3E7EC;position:relative;overflow:clip;isolation:isolate} .chapter::before{ content:"";position:absolute;z-index:-1;top:-30%;right:-10%;width:70%;height:150%; background:radial-gradient(ellipse at center,rgba(212,106,147,.2),transparent 62%); pointer-events:none; } .chapter .h2,.chapter .h3,.chapter .display,.chapter h2,.chapter h3{color:#fff} .chapter .h2 em,.chapter .display em{color:var(--fuchsia)} .chapter p,.chapter .lead,.chapter .muted{color:rgba(243,231,236,.74)} .chapter .eyebrow{color:var(--fuchsia)} .chapter .sechead__rule{background:rgba(255,255,255,.16)} .chapter .sechead__num{color:var(--fuchsia)} .chapter .arrow{color:var(--peach)} .chapter .btn--ghost{border-color:rgba(255,255,255,.4);color:#fff} .chapter .btn--ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)} .chapter .step{border-top-color:rgba(255,255,255,.18)} .chapter .step h3{color:#fff} .chapter .step p{color:rgba(243,231,236,.7)} .chapter .step__n{color:var(--fuchsia)} /* Svetlé karty vnútri tmavej kapitoly si musia vypýtať farby späť. Bez toho zdedia svetlý text z .chapter a na bielom podklade zmiznú. */ .chapter .voucher,.chapter .card,.chapter .pickcard,.chapter .review{color:var(--ink)} .chapter .voucher p,.chapter .card p,.chapter .pickcard p,.chapter .review p, .chapter .voucher__note{color:var(--muted)} .chapter .voucher__kicker,.chapter .card h3,.chapter .pickcard h3, .chapter .review figcaption{color:var(--ink)} .chapter .voucher__value{color:var(--muted)} .chapter .voucher__value b{color:var(--rose-deep)} .chapter .review blockquote{color:var(--ink)} .chapter .facts{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)} .chapter .facts div{background:var(--ink-deep2)} .chapter .facts dt{color:var(--fuchsia)} .chapter .facts dd{color:#fff} .chapter .facts dd small{color:rgba(243,231,236,.62)} .chapter .benefits li{color:#F3E7EC} .chapter .benefits li::before{background-color:rgba(228,138,180,.22)} .chapter .figure figcaption{color:rgba(243,231,236,.66)} .chapter .rule{color:rgba(255,255,255,.3)} /* Cenník na tmavom. Ceny na krémovej sú informácia, ceny na tmavej sú ponuka. */ .chapter .pricelist{border-bottom-color:rgba(255,255,255,.16)} .chapter .pricerow{border-top-color:rgba(255,255,255,.16)} .chapter .pricerow__name{color:#fff} .chapter .pricerow__dur{border-color:rgba(255,255,255,.3);color:rgba(243,231,236,.74)} .chapter .pricerow__desc{color:rgba(243,231,236,.62)} .chapter .pricerow__price{color:var(--peach)} .chapter .pricerow__price--soft{color:rgba(243,231,236,.6)} .chapter .pricerow__name::after{background-image:radial-gradient(circle,rgba(255,255,255,.3) 1px,transparent 1.2px)} .chapter .pricegroup__note{color:rgba(243,231,236,.7)} .chapter .pricelist__sub h3{color:#fff} .chapter .pricelist__sub p{color:rgba(243,231,236,.62)} .chapter .small.muted{color:rgba(243,231,236,.62)} @media(hover:hover){ .chapter .pricerow:hover{background:rgba(255,255,255,.055)} .chapter .pricerow:hover .pricerow__name::after{background-image:radial-gradient(circle,var(--fuchsia) 1px,transparent 1.2px)} } /* ---------- pás slov pod hero ---------- Jediná vec na stránke, ktorá sa hýbe sama. Nesie zoznam toho, čo salón robí, takže to nie je ozdoba, ale obsah v pohybe. Rýchlosť je zámerne nízka. */ .marquee{ overflow:hidden;border-block:1px solid var(--line-soft); padding-block:clamp(11px,1.4vw,16px);background:var(--paper); -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } .marquee__track{display:flex;width:max-content;animation:mq 58s linear infinite} .marquee__track span{ display:inline-flex;align-items:center;white-space:nowrap; font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(1.05rem,2vw,1.55rem);color:var(--muted); padding-inline:clamp(16px,2.4vw,30px); } .marquee__track span::after{ content:"";width:5px;height:5px;border-radius:50%;background:var(--fuchsia); margin-left:clamp(16px,2.4vw,30px);opacity:.75;flex:none; } @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.marquee__track{animation:none}} /* ---------- veľká citácia klientky ---------- Recenzie v troch rovnakých kartách sa dali prehliadnuť. Jedna vytiahnutá nahlas urobí to, čo tri potichu nie. */ .bigquote{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:auto minmax(0,1fr);align-items:start} .bigquote__mark{ font-family:var(--serif);font-size:clamp(4rem,9vw,7.5rem);line-height:.72; color:var(--rose);opacity:.28;user-select:none; } .bigquote blockquote{ font-family:var(--serif);font-size:clamp(1.3rem,2.8vw,2.05rem);line-height:1.32; letter-spacing:-.012em;color:var(--ink);text-wrap:balance; } .bigquote figcaption{ margin-top:clamp(18px,2.2vw,28px);font-size:.9rem;color:var(--muted); display:flex;align-items:center;gap:12px;flex-wrap:wrap; } .bigquote figcaption b{color:var(--ink);font-weight:500} .chapter .bigquote blockquote{color:#fff} .chapter .bigquote__mark{color:var(--fuchsia);opacity:.4} @media(max-width:560px){ .bigquote{grid-template-columns:1fr;gap:0} .bigquote__mark{margin-bottom:-.25em} } /* ---------- pásik s údajmi pod obálkou ---------- */ .metabar{ display:flex;flex-wrap:wrap;gap:10px clamp(20px,3vw,42px);align-items:center; padding-block:clamp(14px,1.8vw,20px);border-block:1px solid var(--line-soft); font-size:.9rem;color:var(--muted); } .metabar b{color:var(--ink);font-weight:500} .metabar > span{display:inline-flex;align-items:center;gap:.5em} /* ---------- mriežka „čo dostanete" so štítkami ---------- Náhrada za ďalší odsek šedého textu. Rovnaká informácia, tretinový čas. */ .tiles{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .tile{background:var(--card);padding:clamp(20px,2.4vw,28px)} .tile__n{font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--rose-deep);display:block;margin-bottom:10px} .tile h3{font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.35;margin-bottom:7px} .tile p{font-size:.92rem;line-height:1.6;color:var(--muted)} .chapter .tiles{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.13)} .chapter .tile{background:var(--ink-deep2)} /* ---------- pomocné ---------- */ .stack-sm > * + *{margin-top:14px} .stack > * + *{margin-top:24px} .stack-lg > * + *{margin-top:38px} .mt-s{margin-top:18px}.mt-m{margin-top:30px}.mt-l{margin-top:46px} .tag{ display:inline-flex;align-items:center;gap:.45em;font-size:.78rem;letter-spacing:.02em; padding:.32em .85em;border-radius:999px;background:var(--paper2);color:var(--muted); } .tag--sage{background:#EDF1E8;color:var(--sage-deep)} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- animácie ---------- Skrývame len keď beží JS (trieda .js na ). Bez JS je obsah vždy viditeľný. */ .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)} .js .reveal.is-in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} .draw path{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 1.9s cubic-bezier(.3,.7,.3,1)} .draw.is-in path{stroke-dashoffset:0} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} .js .reveal{opacity:1;transform:none} .draw path{stroke-dashoffset:0} } /* ---------- mobil: čitateľnosť a klikacie plochy ---------- Klientky salónu sú z veľkej časti ženy po tridsiatke a vyššie, telefón držia ďalej od očí. Popisky pod 12 px sú tam už na hrane, tak ich na malých displejoch púšťame väčšie. Veľkosti tela sa nemenia. */ @media(max-width:700px){ .eyebrow{font-size:.78rem;letter-spacing:.16em} .facts dt{font-size:.78rem} .foot h2,.foot h3{font-size:.8rem;letter-spacing:.14em} /* šípkové odkazy sú plnohodnotné CTA, nie ozdoba: dotyková plocha 44 px */ .arrow{min-height:44px} .pricenav a{padding-block:.68em} /* Telefón a e-mail v kontaktoch sú na mobile hlavná akcia (ťuknem a volám), nie riadok textu. Musia sa dať trafiť palcom. */ .infolist a{display:inline-flex;align-items:center;min-height:44px} } @media print{ .hdr,.closing,.foot__social,.pricenav,.btn,.marquee,.hero__line,.metabar{display:none} body{background:#fff;font-size:11pt} /* Tmavá kapitola je na obrazovke rez, na papieri by to bola plná strana tonera. Cenník sa z webu reálne tlačí, tak nech vyjde čitateľne a nasvetlo. */ .chapter{background:#fff!important} .chapter::before{display:none} .chapter *{color:#000!important} .band::after{display:none} .band img{display:none} .spread{display:block} .spread__media{display:none} }