/* ============================================================ STAR — Hvězdy z Podkrkonoší · sdílený stylesheet (rawstar.cz) Sekce: BASE (vše) · HOME (index) · ŘADY (produkty) · PŘÍBĚH · responsive Akcent řady: Homepage: ============================================================ */ /* ---- Fonty (Aeonik, s fallbackem) ---- */ @font-face{font-family:'Aeonik';src:url('fonts/Aeonik-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Aeonik';src:url('fonts/Aeonik-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Aeonik';src:url('fonts/Aeonik-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} /* ---- Proměnné + motivy řad ---- */ :root{ --bg:#0e1424; --bg-2:#141d33; --ink:#f3f5fb; --mut:#9aa6c4; --rasp:#e11d62; --blue:#2f7fc4; --blue-lt:#57a6e6; --amber:#d99524; --green:#6a8c3f; --gold:#c9a86a; --coco:#c0895a; --coco-dk:#a4703f; --line:rgba(255,255,255,.12); --maxw:1280px; /* akcent = výchozí RAW STAR (růžová); jednotlivé řady přepisují přes body.t-* */ --acc:var(--rasp); --acc-dk:#a3134a; --acc-rgb:225,29,98; } body.t-raw {--acc:var(--rasp); --acc-dk:#a3134a; --acc-rgb:225,29,98} body.t-protein{--acc:var(--blue-lt);--acc-dk:#2f7fc4; --acc-rgb:87,166,230} body.t-bio {--acc:var(--green); --acc-dk:#4e6a2c; --acc-rgb:106,140,63} body.t-coco {--acc:var(--coco); --acc-dk:var(--coco-dk); --acc-rgb:192,137,90} /* ---- Reset & základ ---- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:hidden} body{font-family:'Aeonik','Onest','Inter',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased} h1,h2,h3,.dpl{font-family:'Aeonik','Onest','Archivo',sans-serif;font-weight:900;line-height:1.08;letter-spacing:-.02em;text-transform:uppercase} .eyebrow{font-family:'Aeonik','Onest','Archivo';font-weight:800;text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;color:var(--acc)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px} a{color:inherit;text-decoration:none}img{max-width:100%;display:block} /* ---- Logo (patička) ---- */ .logo{display:flex;align-items:center;gap:12px} .logo .mark{display:flex;align-items:center;gap:6px} .logo .mark .ln{width:18px;height:3px;background:var(--gold);display:block} .logo .mark svg{width:26px;height:26px;fill:var(--gold)} .logo .txt{font-family:'Aeonik','Onest','Archivo';font-weight:900;text-transform:uppercase;line-height:.9} .logo .txt b{display:block;font-size:1.05rem;letter-spacing:.02em} .logo .txt span{display:block;font-weight:700;font-size:.62rem;letter-spacing:.26em;color:var(--gold);margin-top:2px} /* ---- Hlavička ---- */ .brand{display:flex;align-items:center;text-decoration:none} .brand-logo{height:96px;width:auto;display:block;transition:height .35s ease} header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.35s;border-bottom:1px solid transparent} header.scrolled{background:rgba(14,20,36,.9);backdrop-filter:blur(12px);border-color:var(--line)} header.scrolled .nav{height:100px} header.scrolled .brand-logo{height:77px} .nav{display:flex;align-items:center;justify-content:space-between;height:188px;transition:height .35s ease} .nav ul{display:flex;gap:28px;list-style:none} .nav ul a{font-family:'Aeonik','Onest','Archivo';font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--mut);transition:.25s} .nav ul a:hover{color:var(--ink)} .btn{display:inline-flex;align-items:center;gap:8px;font-family:'Aeonik','Onest','Archivo';font-weight:800;text-transform:uppercase; letter-spacing:.08em;font-size:.8rem;padding:13px 26px;border-radius:4px;cursor:pointer;border:0; background:var(--acc);color:#fff;transition:.25s} .btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 30px -12px var(--acc)} .btn.alt{background:var(--gold);color:#1a1306} .btn.alt:hover{box-shadow:0 14px 30px -12px var(--gold)} .btn.line{background:transparent;border:2px solid var(--line);color:var(--ink)} .btn.line:hover{border-color:var(--gold);box-shadow:none} .navtoggle{display:none;background:none;border:0;font-size:1.4rem;color:var(--ink);cursor:pointer} /* ---- Patička ---- */ footer{background:#0a0f1c;border-top:1px solid var(--line);padding:74px 0 32px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:38px;margin-bottom:44px} footer h4{font-family:'Aeonik','Onest','Archivo';font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:var(--gold);margin-bottom:15px} /* Barvu a velikost drží ul, ne jen a: v seznamu je i text mimo odkaz (u telefonu "/028"), který by jinak zdědil bílou --ink a plnou velikost z body a vyskočil by z řádku. */ footer ul{list-style:none;display:flex;flex-direction:column;gap:9px;color:var(--mut);font-size:.92rem} footer a{color:var(--mut);font-size:.92rem}footer a:hover{color:var(--ink)} .foot-logo{display:inline-block} .foot-logo img{height:44px;width:auto;display:block} .foot-brand p{color:var(--mut);font-size:.9rem;margin-top:16px;max-width:300px} .foot-brand .spruce{width:104px;margin-top:22px;opacity:.9} .foot-social{display:flex;gap:14px;margin-top:16px} .foot-social a{display:inline-flex;color:#fff} .foot-social svg{width:24px;height:24px;fill:currentColor;display:block;transition:opacity .15s} .foot-social a:hover svg{opacity:.65} .social-rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:6px} .social-rail a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--bg-2);color:#fff;border:1px solid var(--line);border-right:0;border-radius:12px 0 0 12px;box-shadow:0 10px 26px -14px rgba(0,0,0,.7);transform:translateX(8px);transition:transform .22s ease,background .22s ease} .social-rail a:hover{transform:translateX(0);background:var(--gold);color:#1a1306} .social-rail svg{width:28px;height:28px;fill:currentColor;display:block} @media(max-width:640px){.social-rail a{width:42px;height:42px}.social-rail svg{width:24px;height:24px}} .foot-bot{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px;color:var(--mut);font-size:.82rem;flex-wrap:wrap;gap:10px} /* ---- Reveal animace ---- */ .reveal{opacity:0;transform:translateY(34px);transition:.7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s} /* ---- Obecné sekce ---- */ .pad{padding:110px 0} .sec-head{max-width:760px;margin-bottom:48px} .sec-head h2{font-size:clamp(2.2rem,5vw,4rem);margin:14px 0 12px} .sec-head p{color:var(--mut);font-size:1.05rem} /* ---- Produktové řady „Najdi svou hvězdu" (inc/rady.php – HP i Příběh) ---- */ .families{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .fam{display:block;padding:30px 24px;border-radius:10px;background:var(--bg-2);position:relative;overflow:hidden;transition:.4s;border:1px solid var(--line)} .fam::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c)} .fam:hover{transform:translateY(-8px);background:#1a2540} .fam .k{font-family:'Aeonik','Onest','Archivo';font-weight:800;font-size:.66rem;letter-spacing:.22em;color:var(--c)} .fam h3{font-size:1.7rem;margin:10px 0 8px} .fam p{color:var(--mut);font-size:.9rem} /* ---- Karta produktu (carousel na HP i mřížka na řadách) ---- */ .card{background:var(--bg-2);border-radius:12px;overflow:hidden;transition:.4s;position:relative;border:1px solid var(--line)} .card .top{height:210px;display:flex;align-items:center;justify-content:center;position:relative; background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c, var(--acc)) 40%, transparent), transparent 70%)} .card .top img{max-height:188px;width:auto;transition:.5s;z-index:1} .card:hover{transform:translateY(-10px)} .card:hover .top img{transform:scale(1.1) rotate(-5deg)} .card .body{padding:20px 22px 22px} .card .k{font-family:'Aeonik','Onest','Archivo';font-weight:800;font-size:.64rem;letter-spacing:.18em;color:var(--c, var(--acc))} .card h3{font-size:1.4rem;margin:5px 0 14px} .card .pikrow{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);padding-top:14px} .card .pikrow img{width:28px;height:28px} .card .pikrow .more{margin-left:auto;font-family:'Aeonik','Onest','Archivo';font-weight:800;font-size:.7rem;color:var(--gold);text-transform:uppercase} /* ---- Marquee (základ = akcent řady) ---- */ .marquee{background:var(--acc);color:#fff;overflow:hidden;white-space:nowrap;padding:22px 0} .marquee .run{display:inline-block;animation:scrollx 38s linear infinite;will-change:transform} .marquee .mq{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;width:210px;gap:14px;margin:0 12px;vertical-align:top;white-space:normal} .marquee .mq img{width:118px;height:118px;display:block} .marquee .mq b{font-family:'Aeonik','Onest','Archivo';font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:.74rem;line-height:1.1} /* ---- Keyframes ---- */ @keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,40px)}} @keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-30px)}} @keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-22px) rotate(-4deg)}} @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============================================================ HOME (index.php) — ============================================================ */ body.home .eyebrow{color:var(--gold)} body.home .marquee,.marquee.gold{background:var(--gold);color:#171206;border-top:3px solid #171206;border-bottom:3px solid #171206} /* hero */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:200px} .hero .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:0;transition:background .9s ease,opacity .9s ease} .hero .b1{width:520px;height:520px;background:var(--rasp);top:-120px;right:-80px;animation:float1 14s ease-in-out infinite} .hero .b2{width:440px;height:440px;background:var(--blue);bottom:-140px;left:-100px;animation:float2 16s ease-in-out infinite} .hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;transition:background .9s ease; background:radial-gradient(120% 90% at 74% 42%,rgba(225,29,98,.12),transparent 58%)} .hero.is-protein::after{background:radial-gradient(120% 90% at 74% 42%,rgba(87,166,230,.16),transparent 58%)} .hero.is-bio::after{background:radial-gradient(120% 90% at 74% 42%,rgba(106,140,63,.18),transparent 58%)} .hero.is-coco::after{background:radial-gradient(120% 90% at 74% 42%,rgba(192,137,90,.18),transparent 58%)} .hero.is-protein .b1{background:var(--blue-lt)}.hero.is-protein .b2{background:#3f7fb5} .hero.is-bio .b1{background:var(--green)}.hero.is-bio .b2{background:#2f8f6a} .hero.is-coco .b1{background:var(--coco)}.hero.is-coco .b2{background:var(--coco-dk)} .hero .hero-stage::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:460px;height:460px;border-radius:50%;z-index:0;filter:blur(18px);pointer-events:none;transition:background .9s ease; background:radial-gradient(circle,rgba(225,29,98,.40),transparent 66%)} .hero.is-protein .hero-stage::before{background:radial-gradient(circle,rgba(87,166,230,.42),transparent 66%)} .hero.is-bio .hero-stage::before{background:radial-gradient(circle,rgba(106,140,63,.46),transparent 66%)} .hero.is-coco .hero-stage::before{background:radial-gradient(circle,rgba(192,137,90,.44),transparent 66%)} .hero .cta-row .btn:not(.line){transition:background .9s ease,transform .25s ease,box-shadow .25s ease} .hero.is-protein h1 .o{color:var(--blue-lt)} .hero.is-protein .cta-row .btn:not(.line){background:var(--blue-lt)} .hero.is-protein .cta-row .btn:not(.line):hover{box-shadow:0 14px 30px -12px var(--blue-lt)} .hero.is-bio h1 .o{color:var(--green)} .hero.is-bio .cta-row .btn:not(.line){background:var(--green)} .hero.is-bio .cta-row .btn:not(.line):hover{box-shadow:0 14px 30px -12px var(--green)} .hero.is-coco h1 .o{color:var(--coco)} .hero.is-coco .cta-row .btn:not(.line){background:var(--coco)} .hero.is-coco .cta-row .btn:not(.line):hover{box-shadow:0 14px 30px -12px var(--coco)} header .btn{transition:background .9s ease,transform .25s ease,box-shadow .25s ease} body.is-protein header .btn{background:var(--blue-lt)} body.is-protein header .btn:hover{box-shadow:0 14px 30px -12px var(--blue-lt)} body.is-bio header .btn{background:var(--green)} body.is-bio header .btn:hover{box-shadow:0 14px 30px -12px var(--green)} body.is-coco header .btn{background:var(--coco)} body.is-coco header .btn:hover{box-shadow:0 14px 30px -12px var(--coco)} .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;width:100%} .hero h1{font-size:clamp(3.2rem,9vw,7.4rem)} .hero h1 .o{color:var(--rasp);transition:color .9s ease}.hero h1 .l{-webkit-text-stroke:2px var(--gold);color:transparent} .hero p.lead{color:var(--mut);font-size:1.14rem;margin:24px 0 32px} .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap} .hero .heroimg{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px} .hero .hero-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:540px;isolation:isolate} .hero .heroimg img{position:relative;z-index:1;width:min(100%,460px);height:auto;filter:drop-shadow(0 40px 50px rgba(0,0,0,.6));animation:bob 5s ease-in-out infinite;opacity:1;transition:opacity .4s ease} .hero .heroimg img.swap{opacity:0} .hero.is-raw .heroimg img{width:min(100%,445px)} .hero .hero-lines{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:400px} .hero .hl{font-family:'Aeonik','Onest','Archivo';font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.74rem; padding:10px 18px;border-radius:30px;border:2px solid var(--line);color:var(--mut); display:flex;align-items:center;justify-content:center;gap:6px;transition:.45s} .hero .hl::after{content:'→';opacity:.4;transition:.25s} .hero .hl:hover{color:var(--ink);border-color:var(--gold);transform:translateY(-2px)} .hero .hl.active{border-color:var(--rasp);color:#fff;background:var(--rasp)} .hero.is-protein .hl.active{border-color:var(--blue-lt);background:var(--blue-lt)} .hero.is-bio .hl.active{border-color:var(--green);background:var(--green)} .hero.is-coco .hl.active{border-color:var(--coco);background:var(--coco)} .hero .hl.active::after{opacity:1} /* carousel */ .filterbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px} .chip{font-family:'Aeonik','Onest','Archivo';font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem; padding:12px 22px;border-radius:4px;border:2px solid var(--line);background:transparent;color:var(--mut);cursor:pointer;transition:.25s} .chip:hover{color:var(--ink);border-color:var(--gold)} .chip.active{background:var(--gold);color:#171206;border-color:var(--gold)} .carousel-shell{position:relative} .track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 26px;scrollbar-width:none} .track::-webkit-scrollbar{display:none} .track .card{flex:0 0 300px;scroll-snap-align:start} .car-nav{display:flex;gap:10px;justify-content:flex-end} .car-nav button{width:48px;height:48px;border-radius:6px;border:2px solid var(--line);background:transparent;color:var(--gold);cursor:pointer;font-size:1.1rem;transition:.25s} .car-nav button:hover{background:var(--gold);color:#171206;border-color:var(--gold)} /* diagonální předěl */ .divider{position:relative;min-height:74vh;display:flex;align-items:center;overflow:hidden; clip-path:polygon(0 4vw,100% 0,100% calc(100% - 4vw),0 100%)} .divider .bg{position:absolute;inset:-10% 0;background-size:cover;background-position:center;z-index:0;will-change:transform} .divider .ov{position:absolute;inset:0;z-index:1} .d-gold .bg{background-image:url('nature/snezka_hvezdy.webp');background-position:center 35%} .d-gold .ov{background:linear-gradient(90deg,rgba(14,20,36,.9),rgba(14,20,36,.4))} .d-forest .bg{background-image:url('nature/forest.webp')} .d-forest .ov{background:linear-gradient(270deg,rgba(14,20,36,.92),rgba(20,30,14,.4))} .divider .wrap{position:relative;z-index:2;padding-top:5vw;padding-bottom:5vw} .claim{max-width:600px} .claim h2{font-size:clamp(2.4rem,6vw,4.6rem);margin:16px 0 18px} .claim p{font-size:1.16rem;color:#dde3f2;margin-bottom:28px} .d-forest .claim{margin-left:auto;text-align:right} .d-forest .claim .cta-row{justify-content:flex-end;display:flex} /* pikto mřížka */ .pikto-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;text-align:center} .pikto-cell{padding:24px 8px;background:var(--bg-2);border-radius:10px;transition:.35s;border:1px solid var(--line)} .pikto-cell:hover{transform:translateY(-6px);border-color:var(--gold)} .pikto-cell .ico{height:62px;display:flex;align-items:center;justify-content:center;margin-bottom:12px} .pikto-cell .ico img{width:56px;height:56px} .pikto-cell .l{font-family:'Aeonik','Onest','Archivo';font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.74rem} /* naše hory */ .hory{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .hcard{position:relative;border-radius:12px;overflow:hidden;min-height:360px;display:flex;align-items:flex-end;border:1px solid var(--line)} .hcard .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s cubic-bezier(.2,.7,.2,1)} .hcard:hover .img{transform:scale(1.09)} .hcard::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(10,15,28,.9))} .hcard .cap{position:relative;z-index:2;padding:24px 22px;width:100%} .hcard .cap::before{content:'';display:block;width:46px;height:4px;background:var(--c);margin-bottom:14px;transition:width .4s} .hcard:hover .cap::before{width:80px} .hcard .cap .k{font-family:'Aeonik','Onest','Archivo';font-weight:800;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c)} .hcard .cap h3{font-size:1.8rem;margin:6px 0 4px} .hcard .cap p{font-size:.88rem;color:var(--mut)} /* story / statistiky */ .story{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center} .story .pic{border-radius:14px;overflow:hidden;min-height:440px;background:url('nature/snezka_hvezdy.webp') center/cover;background-repeat:no-repeat;position:relative} .story .pic::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(14,20,36,.6))} .story h2{font-size:clamp(2.2rem,4.6vw,3.6rem);margin:14px 0 18px} .story p{color:var(--mut);margin-bottom:16px} .story .stat{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap} .story .stat b{font-family:'Aeonik','Onest','Archivo';font-weight:900;font-size:2.8rem;color:var(--gold);display:block;line-height:1} .story .stat span{font-size:.78rem;color:var(--mut);text-transform:uppercase;letter-spacing:.08em} /* b2b pruh */ .b2b{background:linear-gradient(120deg,var(--rasp),#a3134a);border-radius:14px;padding:54px;display:flex;gap:36px; align-items:center;justify-content:space-between;flex-wrap:wrap} .b2b h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.8rem)} .b2b p{color:#ffd9e6;max-width:520px;margin-top:8px} .b2b .btn{background:#171206;color:var(--gold)} /* ============================================================ ŘADY (produktové stránky) — ============================================================ */ .rhero{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden;padding-top:196px} .rhero .blob{position:absolute;border-radius:50%;filter:blur(74px);opacity:.5;z-index:0} .rhero .b1{width:520px;height:520px;background:var(--acc);top:-120px;right:-80px;animation:float1 14s ease-in-out infinite} .rhero .b2{width:440px;height:440px;background:var(--acc-dk);bottom:-140px;left:-100px;animation:float2 16s ease-in-out infinite} .rhero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(120% 90% at 74% 42%,rgba(var(--acc-rgb),.18),transparent 58%)} .rhero .wrap{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;width:100%;padding-bottom:22px} /* marquee = spodní pruh hero: přišpendlený dole, kompaktní, aby se piktogramy i s texty vešly na obrazovku */ .rhero .marquee{margin-top:auto;padding:16px 0} .rhero .marquee .mq{width:150px;gap:8px;margin:0 8px} .rhero .marquee .mq img{width:74px;height:74px} .rhero .marquee .mq b{font-size:.66rem} .crumb{display:inline-flex;align-items:center;gap:8px;color:var(--mut);font-family:'Aeonik','Onest','Archivo';font-weight:700; text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;margin-bottom:18px;transition:.25s} .crumb:hover{color:var(--ink)}.crumb .ar{color:var(--acc)} .rhero h1{font-size:clamp(3rem,8vw,6.6rem)} .rhero h1 .o{color:var(--acc)} .rhero p.lead{color:var(--mut);font-size:1.14rem;margin:22px 0 30px} .rhero .cta-row{display:flex;gap:14px;flex-wrap:wrap} .rhero .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} .rhero .chips span{font-family:'Aeonik','Onest','Archivo';font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.7rem; padding:9px 15px;border-radius:30px;border:2px solid var(--line);color:var(--mut)} .rhero .shot{position:relative;display:flex;justify-content:center;align-items:center;min-height:460px;isolation:isolate} .rhero .shot::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:440px;height:440px;border-radius:50%;z-index:0;filter:blur(18px);pointer-events:none; background:radial-gradient(circle,rgba(var(--acc-rgb),.44),transparent 66%)} .rhero .shot img{position:relative;z-index:1;width:min(100%,440px);height:auto; filter:drop-shadow(0 40px 50px rgba(0,0,0,.6));animation:bob 5s ease-in-out infinite} .prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px} .benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .bcard{padding:30px 26px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);position:relative;overflow:hidden;transition:.4s} .bcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--acc)} .bcard:hover{transform:translateY(-6px);background:#1a2540} .bcard .ico{width:52px;height:52px;margin-bottom:14px} .bcard h3{font-size:1.25rem;margin-bottom:8px} .bcard p{color:var(--mut);font-size:.92rem} .shopcta{background:linear-gradient(120deg,var(--acc),var(--acc-dk));border-radius:16px;padding:54px;display:flex;gap:36px; align-items:center;justify-content:space-between;flex-wrap:wrap} .shopcta h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.8rem)} .shopcta p{color:rgba(255,255,255,.86);max-width:520px;margin-top:8px} .shopcta .btn{background:#171206;color:#fff} .shopcta .btn:hover{box-shadow:0 14px 30px -12px rgba(0,0,0,.6)} /* ============================================================ NÁŠ PŘÍBĚH (pribeh.php) ============================================================ */ .phero{position:relative;padding:190px 0 20px;overflow:hidden} .phero .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.42;z-index:0} .phero .b1{width:520px;height:520px;background:var(--acc);top:-160px;right:-90px} .phero .b2{width:420px;height:420px;background:var(--gold);bottom:-220px;left:-120px;opacity:.25} .phero .wrap{position:relative;z-index:2} .phero h1{font-size:clamp(2.8rem,7vw,5.6rem);margin-top:8px} .phero p.lead{color:var(--mut);font-size:1.16rem;margin-top:20px} .story-sec{padding:64px 0} .story-row{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center} .story-media{position:relative} .story-media img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);box-shadow:0 34px 64px -30px rgba(0,0,0,.72)} .story-media::before{content:'';position:absolute;inset:auto -18px -18px auto;width:120px;height:120px;border-radius:16px;background:var(--acc);opacity:.14;z-index:-1} .story-row.img-left .story-media{order:-1} .story-row.img-left .story-media::before{inset:-18px auto auto -18px} .story-text .eyebrow{margin-bottom:14px;display:block} .story-text h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:20px} .story-text p{color:var(--mut);font-size:1.03rem;margin-bottom:15px} .story-text p:last-child{margin-bottom:0} .story-text strong{color:var(--ink);font-weight:700} /* ============================================================ PRODUKTY (produkty.php) ============================================================ */ /* 4 velké bloky řad (s obrázkem produktu) */ .plines{display:grid;grid-template-columns:1fr 1fr;gap:20px} .pline{display:flex;gap:22px;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:22px;position:relative;overflow:hidden;transition:.4s} .pline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c)} .pline:hover{transform:translateY(-6px);background:#1a2540} .pline .pl-img{flex:0 0 44%;min-height:150px;display:flex;align-items:center;justify-content:center;border-radius:10px; background:radial-gradient(circle at 50% 45%, color-mix(in srgb,var(--c) 34%, transparent), transparent 70%)} .pline .pl-img img{width:100%;max-width:230px;height:auto;filter:drop-shadow(0 16px 24px rgba(0,0,0,.5))} .pline .pl-body{flex:1} .pline .pl-body .k{font-family:'Aeonik','Onest','Archivo';font-weight:800;font-size:.66rem;letter-spacing:.2em;color:var(--c);text-transform:uppercase} .pline .pl-body h3{font-size:1.7rem;margin:8px 0} .pline .pl-body p{color:var(--mut);font-size:.92rem;margin-bottom:14px} .pline .pl-more{font-family:'Aeonik','Onest','Archivo';font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;color:var(--gold)} /* filtry – checkboxy */ .filters{display:flex;flex-direction:column;gap:16px;margin-bottom:36px} .fgroup{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .fglabel{font-family:'Aeonik','Onest','Archivo';font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:var(--gold);min-width:92px} .fchk{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-family:'Aeonik','Onest','Archivo';font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.76rem;color:var(--mut); padding:9px 15px;border:2px solid var(--line);border-radius:6px;transition:.2s;user-select:none} .fchk:hover{color:var(--ink);border-color:var(--gold)} .fchk input{position:absolute;opacity:0;width:0;height:0} .fchk .box{width:18px;height:18px;border-radius:4px;border:2px solid var(--mut);display:inline-flex;align-items:center;justify-content:center;transition:.2s;flex:0 0 auto} .fchk .box::after{content:'';width:9px;height:5px;border-left:2.5px solid #0e1424;border-bottom:2.5px solid #0e1424;transform:rotate(-45deg) translateY(-1px);opacity:0;transition:.15s} .fchk input:checked + .box{background:var(--gold);border-color:var(--gold)} .fchk input:checked + .box::after{opacity:1} .fchk:has(input:checked){color:var(--ink);border-color:var(--gold);background:rgba(201,168,106,.08)} /* grid tyčinek – 4 sloupce */ .prodgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .prodgrid .card .top{height:180px} .prodgrid .empty{grid-column:1/-1;color:var(--mut);text-align:center;padding:44px 0} /* ============================================================ POPTÁVKOVÝ FORMULÁŘ (kontakt.php) + PRÁVNÍ TEXT (gdpr.php) ============================================================ */ .pform-h1{font-size:clamp(1.8rem,3.6vw,2.8rem);margin-bottom:14px;text-transform:none;line-height:1.14} .pform-h2{color:var(--mut);font-size:1.06rem;max-width:780px} .pform-ok{background:rgba(106,140,63,.16);border:1px solid var(--green);color:#d7e7bf;padding:15px 20px;border-radius:10px;margin-bottom:24px} .pform-err{background:rgba(225,29,98,.13);border:1px solid var(--rasp);color:#ffcfe0;padding:15px 20px;border-radius:10px;margin-bottom:24px} .pform-err a{color:#fff} .pform{display:flex;flex-direction:column;gap:18px;max-width:920px} .prow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px} .prow.two{grid-template-columns:1fr 1fr} .pform label{display:flex;flex-direction:column;gap:8px;font-family:'Aeonik','Onest','Archivo';font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;color:var(--mut)} .pform input,.pform select,.pform textarea{font-family:'Aeonik','Onest','Inter',sans-serif;font-size:.96rem;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink);background:var(--bg-2);border:2px solid var(--line);border-radius:8px;padding:12px 14px;width:100%;transition:.2s} .pform input:focus,.pform select:focus,.pform textarea:focus{outline:none;border-color:var(--gold)} .pform textarea{resize:vertical;min-height:120px} .pform select{cursor:pointer} .pform .pfull{width:100%} .pform-submit{align-self:flex-start;font-size:.9rem;padding:16px 42px;margin-top:6px} .pgdpr{flex-direction:row;align-items:flex-start;gap:11px;text-transform:none;letter-spacing:0;font-weight:400;font-size:.9rem;color:var(--mut);cursor:pointer} .pgdpr input{position:absolute;opacity:0;width:0;height:0} .pgdpr .box{width:20px;height:20px;flex:0 0 auto;margin-top:1px;border-radius:5px;border:2px solid var(--mut);display:inline-flex;align-items:center;justify-content:center;transition:.2s} .pgdpr .box::after{content:'';width:9px;height:5px;border-left:2.5px solid #0e1424;border-bottom:2.5px solid #0e1424;transform:rotate(-45deg) translateY(-1px);opacity:0} .pgdpr input:checked + .box{background:var(--gold);border-color:var(--gold)} .pgdpr input:checked + .box::after{opacity:1} .pgdpr a{color:var(--gold);text-decoration:underline} /* právní text */ .legal{max-width:840px} .legal h2{font-size:1.5rem;margin:34px 0 12px} .legal h3{font-size:1.1rem;margin:22px 0 8px;color:var(--gold)} .legal p{color:var(--mut);margin-bottom:12px} .legal ul{color:var(--mut);margin:0 0 14px 22px;display:flex;flex-direction:column;gap:5px} .legal strong{color:var(--ink)} .legal a{color:var(--gold)} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1100px){.prodgrid{grid-template-columns:repeat(3,1fr)}} @media(max-width:980px){ .hero .wrap{grid-template-columns:1fr}.hero .hero-stage{min-height:auto;margin-top:6px}.hero .heroimg img{width:min(100%,360px)} .hero.is-raw .heroimg img{width:min(100%,345px)} .families{grid-template-columns:repeat(2,1fr)}.pikto-grid{grid-template-columns:repeat(4,1fr)} .story{grid-template-columns:1fr}.hory{grid-template-columns:1fr} .rhero .wrap{grid-template-columns:1fr}.rhero .shot{min-height:auto;margin-top:10px}.rhero .shot img{width:min(100%,340px)} .benefits{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .plines{grid-template-columns:1fr} } @media(max-width:640px){.prodgrid{grid-template-columns:repeat(2,1fr)}.pline{flex-direction:column}.pline .pl-img{flex:0 0 auto;width:100%}} @media(max-width:420px){.prodgrid{grid-template-columns:1fr}} @media(max-width:860px){ .story-row{grid-template-columns:1fr;gap:26px} .story-row.img-left .story-media{order:0} .story-media::before{display:none} } /* nižší monitory/notebooky: zmenšit hero, aby se celá sekce vč. piktogramů s texty vešla na výšku obrazovky */ @media(max-height:860px) and (min-width:981px){ .rhero{padding-top:190px} .rhero .wrap{padding-bottom:12px} .rhero h1{font-size:clamp(2.4rem,5.5vw,4rem)} .rhero p.lead{margin:14px 0 20px;font-size:1.04rem} .rhero .chips{margin-top:16px} .rhero .shot{min-height:auto} .rhero .shot img{width:min(100%,300px)} .rhero .marquee{padding:12px 0} .rhero .marquee .mq img{width:60px;height:60px} } @media(max-width:760px){ .nav ul,.nav .btn{display:none}.navtoggle{display:block} .nav{height:86px}.brand-logo{height:60px} .prow,.prow.two{grid-template-columns:1fr} header{background:rgba(14,20,36,.95);backdrop-filter:blur(12px);border-bottom-color:var(--line)} header.scrolled .nav{height:86px}header.scrolled .brand-logo{height:60px} header.open .nav ul{display:flex;position:absolute;top:86px;left:0;right:0;flex-direction:column;background:rgba(14,20,36,.97);padding:22px 30px;gap:16px;border-bottom:1px solid var(--line)} .hero{padding-top:118px} .hero .cta-row .btn{font-size:.72rem;padding:12px 18px;white-space:nowrap} .hero .hero-lines{gap:8px;max-width:320px;margin:0 auto} .hero .hl{font-size:.66rem;padding:8px 12px;white-space:nowrap} .rhero{padding-top:118px} .phero{padding-top:118px}.story-sec{padding:44px 0} .pad{padding:74px 0}.pikto-grid{grid-template-columns:repeat(2,1fr)}.b2b{padding:36px}.shopcta{padding:36px} .d-forest .claim{text-align:left}.d-forest .claim .cta-row{justify-content:flex-start} .marquee{padding:16px 0} .marquee .mq{width:90px;margin:0 5px;gap:8px} .marquee .mq img{width:60px;height:60px} .marquee .mq b{font-size:.58rem;letter-spacing:.02em} } @media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}.hero .heroimg img{animation:none}} /* ===================== COOKIE CONSENT ===================== */ .cookie-banner{display:none;position:fixed;bottom:0;left:0;right:0;z-index:400;background:var(--bg-2);border-top:2px solid var(--rasp)} .cookie-banner.active{display:block} .cookie-banner__inner{max-width:1000px;margin:0 auto;padding:20px 32px;display:flex;align-items:center;gap:32px;flex-wrap:wrap} .cookie-banner__text{flex:1;font-size:.86rem;line-height:1.6;color:var(--mut);min-width:240px} .cookie-banner__text strong{color:var(--ink)} .cookie-banner__text a{color:var(--rasp);text-decoration:underline} .cookie-banner__text a:hover{color:var(--gold)} .cookie-banner__actions{display:flex;gap:12px;flex-shrink:0} .cookie-btn{font-family:'Aeonik','Onest',sans-serif;font-weight:800;text-transform:uppercase;font-size:.74rem;letter-spacing:.08em;padding:12px 26px;border:none;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .2s} .cookie-btn--accept{background:var(--rasp);color:#fff} .cookie-btn--accept:hover{box-shadow:0 12px 26px -12px var(--rasp)} .cookie-btn--reject{background:transparent;color:var(--mut);border:1px solid var(--line)} .cookie-btn--reject:hover{border-color:var(--ink);color:var(--ink)} .cookie-btn--settings{background:transparent;color:var(--mut);border:1px solid var(--line)} .cookie-btn--settings:hover{border-color:var(--gold);color:var(--ink)} .cookie-icon{display:none;position:fixed;bottom:20px;left:20px;z-index:400;width:44px;height:44px;background:var(--bg-2);border:1px solid var(--line);border-radius:50%;cursor:pointer;color:var(--rasp);align-items:center;justify-content:center;padding:0;transition:border-color .2s,color .2s} .cookie-icon.active{display:flex} .cookie-icon:hover{border-color:var(--rasp);color:var(--gold)} .cookie-settings-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(6,9,18,.8);align-items:center;justify-content:center;padding:20px} .cookie-settings-overlay.active{display:flex} .cookie-settings-box{background:var(--bg-2);width:100%;max-width:680px;max-height:85vh;display:flex;flex-direction:column;border-top:2px solid var(--rasp);border-radius:12px;overflow:hidden} .cookie-settings-header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line);flex-shrink:0} .cookie-settings-title{font-family:'Aeonik','Onest',sans-serif;font-weight:800;font-size:.8rem;letter-spacing:.18em;color:var(--ink);text-transform:uppercase;margin:0} .cookie-settings-close{background:none;border:none;color:var(--mut);font-size:1.5rem;cursor:pointer;line-height:1;padding:0;transition:color .2s} .cookie-settings-close:hover{color:var(--ink)} .cookie-settings-body{overflow-y:auto;flex:1;padding:0 24px} .cookie-cat{border-bottom:1px solid var(--line);padding:18px 0} .cookie-cat:last-child{border-bottom:none} .cookie-cat__header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px} .cookie-cat__name{display:block;font-size:.86rem;letter-spacing:.04em;color:var(--ink);margin-bottom:5px} .cookie-cat__desc{font-size:.78rem;color:var(--mut);line-height:1.55;margin:0} .cookie-cat__always{font-size:.72rem;color:var(--gold);letter-spacing:.06em;white-space:nowrap;padding-top:3px;flex-shrink:0} .cookie-cat__table-wrap{margin-top:14px} .cookie-table{width:100%;border-collapse:collapse;font-size:.76rem;color:var(--mut)} .cookie-table th{text-align:left;color:#7683a5;font-weight:600;letter-spacing:.04em;padding:5px 10px 5px 0;border-bottom:1px solid var(--line)} .cookie-table td{padding:7px 10px 7px 0;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top;line-height:1.4} .cookie-table tr:last-child td{border-bottom:none} .cookie-table td:first-child{color:var(--ink);font-family:'Courier New',monospace;font-size:.78rem} .cookie-toggle{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;margin-top:2px;cursor:pointer} .cookie-toggle input{opacity:0;width:0;height:0;position:absolute} .cookie-toggle__slider{position:absolute;inset:0;background:#2b3450;border-radius:24px;transition:background .2s} .cookie-toggle__slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s} .cookie-toggle input:checked + .cookie-toggle__slider{background:var(--rasp)} .cookie-toggle input:checked + .cookie-toggle__slider::before{transform:translateX(20px)} .cookie-settings-footer{padding:16px 24px;border-top:1px solid var(--line);text-align:right;flex-shrink:0} @media(max-width:560px){ .cookie-banner__inner{padding:16px 20px;gap:16px} .cookie-banner__actions{width:100%;flex-wrap:wrap} .cookie-btn{flex:1;text-align:center;min-width:120px} .cookie-settings-box{max-height:92vh} .cookie-table th:nth-child(3),.cookie-table td:nth-child(3){display:none} /* Kontakt: na mobilu DIČ na nový řádek (oddělovač · se skryje a zalomí) */ .ico-dic{display:block;font-size:0;line-height:0} }