/* ========================================================= Rothschildova cukrárna — responzivní, věrně dle Figma 1:1 Mobile-first · breakpointy ≥768 (tablet) · ≥1024 (desktop) Desktop = půlené full-bleed sekce, na mobilu stack pod sebe. ========================================================= */ /* Font Cormorant Garamond se načítá přes + v každé stránky (rychlejší než render-blokující @import). */ :root{ --cream:#F7F4EB; --white:#FFFFFF; --blush:#EBB7A5; --blush-light:#EFBCAA; --rose:#EAB7A4; --cocoa:#562618; --ink:#040202; --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif; --maxw:1280px; --gutter:clamp(20px, 5vw, 64px); } *{box-sizing:border-box;margin:0;padding:0;} html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;overflow-x:clip;} body{background:var(--cream);font-family:var(--serif);color:var(--ink);line-height:1.5;overflow-x:clip;} img{max-width:100%;display:block;} a{color:inherit;} section[id]{scroll-margin-top:80px;} /* ---- společná typografie ---- */ .h-display{font-family:var(--serif);text-transform:uppercase;font-weight:400;line-height:1.12;} .body-text{font-size:clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);line-height:1.6;} .eyebrow{font-size:clamp(1.4rem, 1.1rem + 1.4vw, 2.0rem);letter-spacing:.14em;margin-bottom:.5em;} /* odkaz verzálkami; rule (pokud je) = podtržení POD textem */ .link-caps{ font-family:var(--serif);text-transform:uppercase;letter-spacing:.16em; font-weight:400;font-size:clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); color:var(--ink);text-decoration:none;display:inline-block;transition:opacity .2s ease; } .link-caps:hover{opacity:.6;} .link-caps .rule{display:block;height:2px;background:currentColor;width:100%;margin-top:10px;} /* nadpisy sekcí (nabídka) */ .section-head{text-align:center;max-width:760px;margin:0 auto clamp(40px,6vw,72px);padding:0 var(--gutter);} .section-title{font-size:clamp(2rem, 1.4rem + 3.2vw, 3rem);letter-spacing:.02em;} /* =================================================================== NAV — vycentrovaná, bez oddělovací čáry, přes celou šířku hero =================================================================== */ /* samostatný pruh nad hero — drží navigaci mimo hero, žádný překryv s obloukem */ .site-header{ position:sticky;top:0;z-index:50; background:var(--cream); border-bottom:1px solid rgba(86,38,24,.16); } .nav{ display:grid;grid-template-columns:1fr 1fr;align-items:center; column-gap:clamp(24px,3.4vw,53px); max-width:var(--maxw);margin:0 auto; padding:clamp(14px,1.8vw,22px) var(--gutter); } /* levá trojice hugne střed zprava, pravá zleva → dělení přesně uprostřed (jako hero) */ .nav-group{display:flex;align-items:center;gap:clamp(18px,2.4vw,46px);} .nav-group--left{justify-content:flex-end;} .nav-group--right{justify-content:flex-start;} .nav a{ font-family:var(--serif);text-transform:uppercase;letter-spacing:.05em; font-size:clamp(1.05rem,1.2vw,1.5rem);font-weight:400;color:var(--ink); text-decoration:none;white-space:nowrap; } .nav a:hover{opacity:.6;} /* hamburger jen na mobilu */ .nav-toggle{ display:none;position:absolute;top:18px;right:var(--gutter);z-index:40; width:46px;height:46px;border:none;background:transparent;cursor:pointer; flex-direction:column;justify-content:center;gap:6px;padding:0; } .nav-toggle span{display:block;height:2px;width:26px;margin:0 auto;background:var(--ink);transition:transform .25s ease, opacity .2s ease;} /* =================================================================== HERO — full-bleed půlka/půlka (vlevo foto+damašek, vpravo obsah) =================================================================== */ .s-hero{position:relative;} /* minmax(0,1fr): track se NESMÍ roztáhnout na min-content (jinak dlouhé slovo/foto roztáhne stránku přes okraj) */ .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);} .hero-left{ position:relative; display:flex;flex-direction:column;align-items:center; padding:clamp(48px,6vw,80px) clamp(24px,4vw,48px) clamp(48px,6vw,72px); background: linear-gradient(rgba(235,183,163,.82),rgba(235,183,163,.82)), url('assets/background1.avif') center/cover; } .hero-photo{ width:100%;max-width:560px;aspect-ratio:640/752;object-fit:cover; border-radius:50% 50% 0 0 / 43% 43% 0 0; } .hero-hours{ margin-top:clamp(22px,3vw,32px);text-align:center; font-size:clamp(1.05rem,0.8rem + 1.3vw,1.85rem);letter-spacing:.02em;line-height:1.55; } .hero-right{ position:relative;background:var(--cream); display:flex;align-items:center;justify-content:center; padding:clamp(56px,8vw,108px) clamp(16px,4vw,48px); } .hero-arch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(86%,549px);height:min(94%,779px);z-index:0;pointer-events:none;} /* min-width:0 + width:100% = flex-prvek se SMÍ zúžit pod min-content své nejdelší řádky, jinak by se roztáhl na šířku slova „ROTHSCHILDOVA" a přetekl přes okraj viewportu */ .hero-inner{position:relative;z-index:1;text-align:center;width:100%;max-width:480px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vw,30px);padding:clamp(14px,4vw,48px);} /* na mobilu schválně tak velké, že se „ROTHSCHILDOVA CUKRÁRNA" NEvejde na jeden řádek → zalomí se na dva (ROTHSCHILDOVA / CUKRÁRNA) a nepřetéká přes oblouk ani okraj. break-word + hyphens = pojistka pro nejužší displeje (~320px) */ .hero-title{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.4rem);letter-spacing:.02em;overflow-wrap:break-word;hyphens:auto;max-width:100%;} .hero-logo{width:clamp(140px,18vw,182px);height:auto;} .hero-sub{font-size:clamp(1.35rem,1rem + 1.8vw,2.2rem);font-weight:400;line-height:1.32;} /* CTA v hero = podtržené "tlačítko" */ .hero-cta{margin-top:clamp(6px,1vw,12px);} .hero-cta .rule{height:2px;margin-top:12px;} /* =================================================================== PŘÍBĚH — text dostává více prostoru, foto menší, bez prázdna =================================================================== */ .s-pribeh{position:relative;background:var(--white);padding:clamp(56px,7vw,96px) var(--gutter);overflow:hidden;} .pribeh-grid{ max-width:var(--maxw);margin:0 auto; display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,64px);align-items:center; } .pribeh-media{position:relative;width:100%;max-width:380px;margin:0 auto;} .pribeh-photo{position:relative;aspect-ratio:438/737;overflow:hidden;border-radius:50% 50% 0 0 / 30% 30% 0 0;} .pribeh-photo img{width:100%;height:100%;object-fit:cover;} .pribeh-arch{position:absolute;left:-2.5%;top:-1.6%;width:105%;height:103.5%;pointer-events:none;} .pribeh-text{max-width:620px;} .pribeh-title{font-size:clamp(2rem,1.4rem + 2.8vw,3rem);letter-spacing:.01em;margin-bottom:.5em;} .pribeh-text .body-text{margin-bottom:clamp(28px,3.5vw,40px);} .stats{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);margin-bottom:clamp(28px,3.5vw,40px);} .stat{display:flex;flex-direction:column;} .stat .num{font-size:clamp(2.4rem,1.7rem + 2.6vw,3.4rem);line-height:1;} .stat .lab{font-size:clamp(1.2rem,0.95rem + 0.9vw,1.55rem);margin-top:10px;} .pribeh-text .link-caps{font-size:clamp(1rem,0.95rem + 0.3vw,1.25rem);letter-spacing:.14em;} .pribeh-text .link-caps .rule{width:clamp(140px,16vw,201px);} /* =================================================================== NABÍDKA — flex wrap se středěním (poslední řádek 2 prvků centrovaný) =================================================================== */ .s-nabidka{padding:clamp(56px,8vw,100px) 0;} .menu-grid{ max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter); display:grid;grid-template-columns:1fr;justify-items:center; gap:clamp(40px,5vw,72px) clamp(36px,4vw,84px); } .cat{max-width:380px;display:flex;flex-direction:column;align-items:center;text-align:center;} /* poduška = background-image (SVG nese výplň; mask se v Chrome nevykresluje) */ .cat-media{position:relative;width:min(300px,82%);aspect-ratio:380/405;margin-bottom:26px;} .cat-photo{position:absolute;inset:0;background:url('assets/vector2.svg') center/contain no-repeat;} /* fotka zákusku (průhledný výřez) — vycentrovaná na podušce, ~90 % aby kolem lehce prosvítala poduška */ .cat-pic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;height:90%;object-fit:contain;z-index:1;} /* rohové ilustrace (line-art) — překrývají přes fotku, šířka v % PODUŠKY */ .cat-illo{position:absolute;bottom:-2%;z-index:2;} .cat-illo img{width:100%;height:auto;display:block;object-fit:contain;} /* první řádek (Dorty, Zákusky, Koláče) = ilustrace VLEVO od placeholderu, druhý řádek (Mini, Bezlepkové) = ilustrace VPRAVO */ /* Dorty: největší prvek posazený do levého dolního rohu (přes placeholder, NE přes fotku dortu) */ .illo-dorty {left:-9%;bottom:-5%;width:42%;} .illo-zakusky{left:-3%;width:40%;} .illo-kolace {left:-3%;width:40%;} .illo-mini {right:-3%;width:30%;} .illo-bezlep {right:-3%;width:35%;} .cat h3{text-transform:uppercase;letter-spacing:.06em;font-weight:400;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.25rem);} .cat .rule{width:90px;height:2px;background:var(--blush);margin:14px 0 18px;} .cat p{font-size:clamp(1.05rem,0.95rem + 0.4vw,1.25rem);line-height:1.55;max-width:360px;} /* =================================================================== SVATBA — prvky se zmenšují s aspektem (nemačkají se), mašle na hranici =================================================================== */ .s-svatba{ position:relative;overflow:visible; margin-top:clamp(44px,6vw,90px); /* prostor pro mašli nad sekcí */ padding:clamp(120px,15vw,205px) var(--gutter) clamp(80px,9vw,130px); /* nahoře pod mašli */ background: linear-gradient(rgba(247,244,235,.6),rgba(247,244,235,.6)), url('assets/background1.avif') center/cover no-repeat, var(--cream); } .sv-inner{ position:relative;z-index:3;max-width:680px;margin:0 auto;text-align:center; display:flex;flex-direction:column;align-items:center;gap:clamp(26px,4vw,40px); } .sv-title{font-size:clamp(2rem,1.4rem + 3vw,2.9rem);letter-spacing:.04em;} .sv-body{font-size:clamp(1.15rem,1rem + 0.7vw,1.4rem);line-height:1.55;max-width:620px;} .sv-rings{width:clamp(150px,20vw,200px);height:auto;} .sv-link{letter-spacing:.22em;} .sv-link .rule{width:clamp(220px,40vw,367px);margin:16px auto 0;} /* mašle straddluje horní hranici sekce — jen ~20 % přesahuje nahoru (dle Figmy) */ .sv-bow{position:absolute;left:50%;top:0;transform:translate(-50%,-22%);width:clamp(140px,14vw,210px);height:auto;z-index:6;pointer-events:none;} /* dekorace po stranách — VŽDY viditelné, kotvené k okraji (část přesahuje ven), škálují s vw; z-index pod textem, posazené do spodní části (úroveň prstýnků/CTA), kde je po stranách místo */ /* JEDEN konzistentní styl pro VŠECHNY šířky: rámují z levého/pravého okraje (část přesahuje ven), posazené k úrovni prstýnků, z-index pod textem. Škálují plynule s vw. */ .sv-cake,.sv-bouquet{position:absolute;display:block;height:auto;pointer-events:none;z-index:1;} .sv-cake{left:0;bottom:9%;transform:translateX(-40%);width:clamp(140px,19vw,340px);} .sv-bouquet{right:0;bottom:14%;transform:translateX(40%);width:clamp(155px,21vw,400px);} /* =================================================================== KONTAKT (úvod) — full-bleed půlka/půlka (vlevo text, vpravo mapa), jen vzdušnější: víc paddingu, klidnější rozestupy, adresa+telefon vedle sebe =================================================================== */ .s-kontakt{padding:0;} .kontakt-grid{display:grid;grid-template-columns:1fr;} .kontakt-left{ background:var(--blush); display:flex;align-items:center; padding:clamp(56px,8vw,120px) var(--gutter); } .kontakt-content{max-width:540px;margin:0 auto;width:100%;} .kontakt-title{font-size:clamp(2rem,1.4rem + 2.8vw,3rem);letter-spacing:.01em;margin-bottom:.5em;} .kontakt-content .body-text{margin-bottom:clamp(36px,5vw,56px);} .kontakt-details{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px);} .kontakt-item{min-width:0;} .kontakt-sub{font-size:clamp(1.4rem,1.05rem + 1.2vw,1.85rem);letter-spacing:.04em;margin-bottom:.35em;} .kontakt-addr{font-size:clamp(1.2rem,1.05rem + 0.6vw,1.5rem);line-height:1.6;} .kontakt-addr a{text-decoration:none;} .kontakt-addr a:hover{text-decoration:underline;} .kontakt-map{position:relative;min-height:360px;background:var(--cocoa);} .kontakt-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} /* =================================================================== PATIČKA — 3 sloupce: CTA objednat (vlevo), značka (střed), sítě (vpravo) =================================================================== */ .site-footer{background:var(--cocoa);color:var(--cream);padding:clamp(18px,2.4vw,28px) var(--gutter);} .footer-inner{ max-width:var(--maxw);margin:0 auto; display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:clamp(20px,3vw,44px); } .footer-col{display:flex;flex-direction:column;gap:clamp(7px,1vw,10px);} .footer-col--left{align-items:flex-start;text-align:left;} .footer-col--right{align-items:flex-end;text-align:right;} .footer-label{font-size:clamp(.95rem,0.9rem + 0.3vw,1.15rem);letter-spacing:.04em;color:var(--rose);} .footer-cta{ font-family:var(--serif);text-transform:uppercase;letter-spacing:.12em;font-weight:400; font-size:clamp(1rem,0.95rem + 0.3vw,1.15rem);color:var(--cream);text-decoration:none; border:1px solid rgba(247,244,235,.55);padding:9px clamp(18px,2.4vw,26px);border-radius:6px; transition:background .2s ease,color .2s ease;white-space:nowrap; } .footer-cta:hover{background:var(--cream);color:var(--cocoa);} .footer-center{text-align:center;} .footer-brand{text-transform:uppercase;letter-spacing:.18em;font-size:clamp(1.55rem,1.2rem + 1.7vw,2.1rem);} .footer-social{display:flex;gap:14px;} .footer-social a{ display:flex;width:40px;height:40px;align-items:center;justify-content:center; border:1px solid rgba(247,244,235,.55);border-radius:50%;color:var(--cream); transition:background .2s ease,color .2s ease; } .footer-social a:hover{background:var(--cream);color:var(--cocoa);} .footer-social svg{width:20px;height:20px;display:block;} @media (max-width:760px){ .footer-inner{grid-template-columns:1fr;justify-items:center;gap:clamp(26px,6vw,36px);} .footer-col{align-items:center;text-align:center;} .footer-col--right{align-items:center;text-align:center;} .footer-center{order:-1;} } /* =================================================================== ≥768px (tablet) — sekce do dvou půlek =================================================================== */ @media (min-width:768px){ .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .hero-left{align-items:center;justify-content:center;} .pribeh-grid{grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:center;} .pribeh-media{margin:0;} .kontakt-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .kontakt-map{min-height:460px;} .menu-grid{grid-template-columns:1fr 1fr;} } /* =================================================================== ≥1024px (desktop) =================================================================== */ @media (min-width:1024px){ .hero-left{min-height:760px;} .hero-right{min-height:760px;} /* nabídka: řada 1 = 3 dlaždice, řada 2 = 2 dlaždice vycentrované (scoped na .menu-grid, aby span-pravidla neovlivnila .cat v jiných mřížkách, např. svatební galerii) */ .menu-grid{grid-template-columns:repeat(6,1fr);} .menu-grid .cat{grid-column:span 2;max-width:340px;} .menu-grid .cat:nth-child(4){grid-column:2 / span 2;} .menu-grid .cat:nth-child(5){grid-column:4 / span 2;} } /* =================================================================== <768px — nav za hamburger =================================================================== */ @media (max-width:767px){ .site-header{display:flex;align-items:center;justify-content:flex-end;min-height:58px;padding:8px var(--gutter);} .nav-toggle{display:flex;position:static;width:42px;height:42px;} .nav-group{display:contents;} .nav{ position:absolute;top:100%;left:0;right:0;max-width:none;margin:0; display:flex;flex-direction:column;align-items:stretch;gap:0; background:var(--cream);border-top:1px solid rgba(86,38,24,.14); box-shadow:0 16px 30px rgba(86,38,24,.16); padding:6px var(--gutter) 14px; transform:translateY(-8px);opacity:0;visibility:hidden; transition:opacity .22s ease, transform .22s ease, visibility .22s; } body.nav-open .nav{transform:translateY(0);opacity:1;visibility:visible;} .nav a{padding:13px 0;width:100%;border-bottom:1px solid rgba(86,38,24,.10);font-size:1.15rem;} .nav a:last-child{border-bottom:none;} body.nav-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg);} body.nav-open .nav-toggle span:nth-child(2){opacity:0;} body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg);} } /* =================================================================== TELEFONY (<600px) — aby text NEzasahoval do obrysu/dekorací =================================================================== */ @media (max-width:600px){ /* HERO: obsah užší + oblouk větší → „ROTHSCHILDOVA CUKRÁRNA" se vejde dovnitř */ .hero-arch{width:min(97%,440px);height:min(98%,640px);} .hero-inner{width:82%;max-width:340px;padding:clamp(8px,2vw,16px) 0;gap:clamp(12px,3.4vw,22px);} /* slova celá (nikdy nelámat „cukrárna" uprostřed) → zalomí se jen mezi slovy */ .hero-title{font-size:clamp(1.25rem,5.2vw,1.9rem);hyphens:none;overflow-wrap:normal;word-break:keep-all;text-wrap:balance;} .hero-sub{font-size:clamp(1.05rem,4.2vw,1.4rem);} .hero-logo{width:clamp(120px,30vw,160px);} /* SVATEBNÍ NABÍDKA (sekce na úvodu): menší titul + dekorace víc k okraji, ať nezasahují do textu */ .sv-title{font-size:clamp(1.55rem,6.2vw,2.1rem);} .sv-cake{width:clamp(96px,25vw,150px);transform:translateX(-54%);} .sv-bouquet{width:clamp(104px,27vw,165px);transform:translateX(54%);} } /* =================================================================== BANNER S NÁZVEM STRÁNKY (obdélník s damaškem jako sekce svatba) — vždy na začátku podstránek (/kontakt, /svatebni-nabidka) =================================================================== */ .page-hero{ position:relative;overflow:hidden;text-align:center; padding:clamp(16px,2.4vw,32px) var(--gutter); background: linear-gradient(rgba(247,244,235,.6),rgba(247,244,235,.6)), url('assets/background1.avif') center/cover no-repeat, var(--cream); } .page-hero .eyebrow{margin-bottom:.3em;} .page-title{font-size:clamp(2.2rem,1.5rem + 3.4vw,3.6rem);letter-spacing:.05em;} /* prázdný obloukový placeholder (úvodní blok svatební nabídky — styl Náš příběh) */ .pribeh-photo--ph{background:var(--rose);} /* =================================================================== STRÁNKA SVATEBNÍ NABÍDKA — úvodní blok (styl příběhu) + galerie dortů (poduškové placeholdery jako nabídka). Záměrně JINÉ rozvržení než svatební sekce na úvodu (žádná mašle/kytice/prstýnky hero). =================================================================== */ .s-wed{padding:clamp(24px,3vw,44px) 0 clamp(56px,8vw,100px);} .s-wed .section-head .body-text{margin-top:.7em;} .wed-grid{ max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter); display:grid;grid-template-columns:1fr;justify-items:center; gap:clamp(40px,5vw,72px) clamp(36px,4vw,84px); } /* poduška PEVNÉ velikosti (nezávislá na délce názvu) → všechny placeholdery stejně velké. Bez tohohle dědí .cat-media width:82% z .cat, který se zužuje na obsah (delší název = větší poduška). */ .wed-grid .cat{width:100%;} .wed-grid .cat-media{width:clamp(190px,20vw,250px);} /* layout 3-2: první řádek 3 dlaždice, druhý řádek 2 vycentrované (repeat(6) + span 2; 4.+5. prvek do sloupců 2-3 a 4-5 = střed) */ @media (min-width:768px){ .wed-grid{grid-template-columns:repeat(6,1fr);} .wed-grid .cat{grid-column:span 2;max-width:340px;} .wed-grid .cat:nth-child(4){grid-column:2 / span 2;} .wed-grid .cat:nth-child(5){grid-column:4 / span 2;} } /* úvodní textový obdélník (karta) — prstýnky group3 + text „zavolejte nám" + tlačítko na telefon; vzdušné jako /kontakt, ale kompozičně jiné (vystředěná karta s rámečkem/stínem) */ .s-wedintro{background:var(--cream);padding:clamp(8px,1.5vw,20px) var(--gutter) clamp(56px,8vw,100px);} /* široký, nízký obdélník (na šířku): text vlevo, tlačítko vpravo; na mobilu stack */ .wedintro-box{ max-width:980px;margin:0 auto;text-align:left; background:var(--white); border:1px solid rgba(86,38,24,.14); border-radius:0; padding:clamp(26px,3.2vw,40px) clamp(28px,4.5vw,56px); box-shadow:0 18px 44px rgba(86,38,24,.10); display:flex;align-items:center;gap:clamp(22px,4vw,48px); } .wedintro-text{flex:1 1 auto;min-width:0;} .wedintro-box h2{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.2rem);text-transform:uppercase;font-weight:400;letter-spacing:.02em;margin-bottom:.4em;} .wedintro-text .body-text{margin:0;} .wedintro-box .btn{flex:0 0 auto;} @media (max-width:700px){ .wedintro-box{flex-direction:column;text-align:center;} } /* prstýnky (group3) jako dekorace nad nadpisem galerie „Ukázka naší práce" */ .head-deco{width:clamp(112px,14vw,168px);height:auto;margin:0 auto clamp(8px,1.4vw,16px);} /* plné tlačítko (CTA na telefon) — elegantní, cocoa výplň */ .btn{ display:inline-block;font-family:var(--serif);text-transform:uppercase; letter-spacing:.14em;font-weight:400; font-size:clamp(1rem,0.95rem + 0.3vw,1.18rem); color:var(--cream);background:var(--cocoa); padding:14px clamp(26px,4vw,42px);border-radius:6px; text-decoration:none;transition:opacity .2s ease; } .btn:hover{opacity:.85;} /* =================================================================== STRÁNKA KONTAKT — dlouhý e-mail se na úzkém mobilu smí zalomit (homepage sekce .s-kontakt) =================================================================== */ .kontakt-addr{overflow-wrap:anywhere;} /* =================================================================== SAMOSTATNÁ STRÁNKA /kontakt — vzdušná vycentrovaná kompozice (ne full-bleed half/half): krémové pozadí, úzký vystředěný úvod, 4 kompaktní info-bloky, menší zaoblená mapa s bílým prostorem kolem =================================================================== */ .s-contact{background:var(--cream);padding:clamp(28px,3.4vw,48px) var(--gutter) clamp(56px,8vw,104px);} .contact-wrap{max-width:1000px;margin:0 auto;} .contact-intro{text-align:center;max-width:600px;margin:0 auto clamp(38px,5vw,58px);} /* dekorace — šálek kávy (group1.svg, cocoa perokresba) jako drobný motiv nad nadpisem */ .contact-deco{width:clamp(66px,8vw,94px);height:auto;margin:0 auto clamp(12px,1.6vw,18px);} .contact-intro .eyebrow{font-size:clamp(1.1rem,0.95rem + 0.7vw,1.45rem);margin-bottom:.3em;} .contact-intro h2{font-size:clamp(1.8rem,1.35rem + 2vw,2.6rem);letter-spacing:.02em;text-transform:uppercase;font-weight:400;margin-bottom:.45em;} .contact-intro .body-text{font-size:clamp(1.12rem,1rem + 0.5vw,1.32rem);} .contact-info{ display:grid;grid-template-columns:1fr;gap:clamp(26px,3.2vw,38px); text-align:center;margin-bottom:clamp(40px,6vw,68px); } @media (min-width:560px){.contact-info{grid-template-columns:1fr 1fr;}} @media (min-width:900px){.contact-info{grid-template-columns:repeat(4,1fr);}} .contact-item{overflow-wrap:anywhere;} .contact-item h3{ text-transform:uppercase;letter-spacing:.1em;font-weight:400;color:var(--cocoa); font-size:clamp(1.2rem,1.05rem + 0.5vw,1.45rem);margin-bottom:.55em; } .contact-item p{font-size:clamp(1.15rem,1.02rem + 0.55vw,1.35rem);line-height:1.6;} .contact-item a{text-decoration:none;color:inherit;} .contact-item a:hover{text-decoration:underline;} .contact-map{ max-width:860px;margin:0 auto;border-radius:18px;overflow:hidden; aspect-ratio:12/5;background:var(--blush); box-shadow:0 18px 44px rgba(86,38,24,.13); } .contact-map iframe{width:100%;height:100%;border:0;display:block;} @media (max-width:560px){.contact-map{aspect-ratio:4/5;}} /* =================================================================== SAMOSTATNÁ STRÁNKA /nas-pribeh — vertikální časová osa (mobil: linka vlevo, obsah napravo; ≥768: střídavě L/R kolem středu) =================================================================== */ .s-story{background:var(--cream);padding:clamp(28px,3.4vw,52px) var(--gutter) clamp(64px,9vw,112px);} .story-intro{max-width:680px;margin:0 auto clamp(48px,7vw,86px);text-align:center;} .story-intro .eyebrow{font-size:clamp(1.1rem,0.95rem + 0.7vw,1.5rem);letter-spacing:.14em;margin-bottom:.3em;} .story-intro h2{font-size:clamp(1.9rem,1.4rem + 2.4vw,2.9rem);letter-spacing:.02em;text-transform:uppercase;font-weight:400;margin-bottom:.5em;} .story-intro .body-text{margin:0;} .timeline{position:relative;max-width:1040px;margin:0 auto;} /* svislá linka osy */ .timeline::before{ content:"";position:absolute;top:8px;bottom:8px;left:30px;width:2px; background:rgba(86,38,24,.22); } .tl-item{position:relative;margin-bottom:clamp(40px,6vw,78px);} .tl-item:last-child{margin-bottom:0;} /* puntík na lince */ .tl-dot{ position:absolute;left:30px;top:8px;width:16px;height:16px;border-radius:50%; background:var(--blush);transform:translateX(-50%); border:3px solid var(--cream);box-shadow:0 0 0 2px rgba(86,38,24,.22);z-index:2; } /* mobil: obsah odsazený napravo od linky */ .tl-inner{padding-left:64px;} .tl-year{font-size:clamp(1.9rem,1.5rem + 1.4vw,2.5rem);color:var(--cocoa);letter-spacing:.04em;line-height:1;margin-bottom:.18em;} .tl-title{font-size:clamp(1.3rem,1.05rem + 1vw,1.7rem);text-transform:uppercase;letter-spacing:.04em;font-weight:400;margin-bottom:.5em;} .tl-text .body-text{margin:0;} /* foto-placeholder */ .tl-photo{ position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden; background:var(--blush);box-shadow:0 14px 34px rgba(86,38,24,.12); margin-top:clamp(16px,2.2vw,22px); } .tl-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .tl-photo span{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--serif);text-transform:uppercase;letter-spacing:.12em; color:var(--cocoa);opacity:.5;font-size:clamp(.95rem,0.9rem + 0.3vw,1.15rem); } .story-cta{text-align:center;margin-top:clamp(48px,7vw,86px);} /* ≥768 — střídavé rozvržení kolem středové linky */ @media (min-width:768px){ .timeline::before{left:50%;} .tl-dot{left:50%;width:18px;height:18px;top:50%;transform:translate(-50%,-50%);} .tl-inner{ padding-left:0;display:grid;grid-template-columns:1fr 1fr; column-gap:clamp(48px,7vw,104px);align-items:center; } .tl-photo{margin-top:0;} /* liché: text vlevo (u středu), foto vpravo */ .tl-item:nth-child(odd) .tl-text{order:1;text-align:right;} .tl-item:nth-child(odd) .tl-media{order:2;} /* sudé: foto vlevo, text vpravo (u středu) */ .tl-item:nth-child(even) .tl-text{order:2;text-align:left;} .tl-item:nth-child(even) .tl-media{order:1;} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none!important;} } /* =================================================================== STRÁNKA NABÍDKA — rozklikávací kategorie + mřížka produktů =================================================================== */ .s-nabidka-page{padding:clamp(40px,6vw,80px) 0 clamp(56px,8vw,100px);} .nabidka-hint{text-align:center;font-size:clamp(1.1rem,1rem + 0.5vw,1.4rem);color:var(--cocoa);margin:0 auto clamp(28px,4vw,48px);padding:0 var(--gutter);max-width:640px;} /* karty kategorií = homepage .cat, ale jako tlačítka */ .nabidka-cats{scroll-margin-top:90px;} /* poduška PEVNÉ velikosti (nezávislá na délce názvu) → všechny karty stejně velké. Bez tohohle dědí .cat-media width:82% z .cat, který se zužuje na obsah (delší název = větší poduška). */ .nabidka-cats .cat{width:100%;} .nabidka-cats .cat-media{width:clamp(200px,22vw,260px);} .cat-btn{background:none;border:0;padding:0;font:inherit;color:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;transition:transform .2s ease;} .cat-btn:hover{transform:translateY(-5px);} .cat-btn .rule{transition:width .25s ease, background-color .2s ease;} .cat-btn[aria-expanded="true"] .rule{width:130px;background:var(--cocoa);} .cat-btn[aria-expanded="true"] h3{color:var(--cocoa);} /* panel s produkty */ .cat-panel{max-width:var(--maxw);margin:clamp(24px,3.5vw,44px) auto 0;padding:0 var(--gutter);scroll-margin-top:96px;} .cat-panel[hidden]{display:none;} .cat-panel-title{text-align:center;font-size:clamp(1.8rem,1.3rem + 2.4vw,2.6rem);letter-spacing:.03em;margin-bottom:clamp(28px,4vw,44px);} .prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:clamp(26px,3vw,44px) clamp(18px,2.4vw,30px);} @media (min-width:560px){.prod-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}} .prod{text-align:center;} .prod-photo{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--blush-light);box-shadow:0 12px 30px rgba(86,38,24,.12);} .prod-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .prod-photo--ph{background:url('assets/vector2.svg') center/72% no-repeat, var(--cream);box-shadow:none;} .prod-name{font-family:var(--serif);text-transform:uppercase;letter-spacing:.03em;font-weight:400;font-size:clamp(1.02rem,0.92rem + 0.4vw,1.25rem);line-height:1.22;margin-top:16px;} .prod-alg{font-size:.88rem;letter-spacing:.02em;color:rgba(4,2,2,.5);margin-top:6px;} .cat-empty{text-align:center;font-family:var(--serif);font-size:clamp(1.3rem,1.05rem + 1vw,1.7rem);color:var(--cocoa);padding:clamp(30px,5vw,64px) 0;} .allergen-legend{max-width:var(--maxw);margin:clamp(48px,7vw,80px) auto 0;padding:clamp(24px,3vw,32px) var(--gutter) 0;border-top:1px solid rgba(86,38,24,.16);text-align:center;color:rgba(4,2,2,.6);} .allergen-legend .alg-title{font-size:clamp(1.1rem,1rem + 0.5vw,1.4rem);letter-spacing:.1em;color:var(--cocoa);margin-bottom:.4em;} .allergen-legend p:last-child{font-size:.95rem;line-height:1.7;}