/* martinavahalova.cz — sdílený styl všech stránek (homepage i podstránky). Vychází z vybraného konceptu 3 „ROZVAHA“: teplý červenohnědý podklad s living mesh gradientem, střídání tmavých a světlých (krémových) pásem, Sora / Inter / Instrument Serif. Tokeny jsou nahoře v :root; barvy pásem se přepínají na úrovni sekce přes [data-band]. */ /* ============ FONTS (self-hosted, subset latin + latin-ext) ============ Google Fonts jsme opustili kvůli CLS (fonty dorazily ~2 s po prvním vykreslení a hero se přeskládal) a kvůli třetí straně v GDPR textu. Soubory jsou subsetované na češtinu + běžnou typografii (Sora 32 kB, Inter 50 kB, Instrument Serif 25 kB), preloadují se z . Fallbacky mají metriky srovnané přes size-adjust / ascent-override, takže když se webfont načte později, text nezmění šířku ani výšku řádků (žádný layout shift). */ @font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap; src:url('../fonts/sora-var.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:400 500;font-display:swap; src:url('../fonts/inter-var.woff2') format('woff2');} @font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap; src:url('../fonts/instrumentserif-italic.woff2') format('woff2');} /* metricky sladěné fallbacky (Arial / Times New Roman; spočteno z fontů přes fontTools) */ @font-face{font-family:'Sora Fallback';src:local('Arial'),local('Liberation Sans');font-weight:400 600; size-adjust:113.2%;ascent-override:85.7%;descent-override:25.6%;line-gap-override:0%;} @font-face{font-family:'Sora Fallback';src:local('Arial Bold'),local('Liberation Sans Bold');font-weight:700 800; size-adjust:110.4%;ascent-override:87.9%;descent-override:26.3%;line-gap-override:0%;} @font-face{font-family:'Inter Fallback';src:local('Arial'),local('Liberation Sans');font-weight:400 500; size-adjust:107.2%;ascent-override:90.4%;descent-override:22.5%;line-gap-override:0%;} @font-face{font-family:'Instrument Serif Fallback';src:local('Times New Roman Italic'),local('Liberation Serif Italic');font-style:italic; size-adjust:87.4%;ascent-override:113.3%;descent-override:35.5%;line-gap-override:0%;} /* ============ RESET ============ */ *,*::before,*::after{box-sizing:border-box;} html,body{margin:0;padding:0;} img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;} h1,h2,h3,h4,h5,p,ul,figure{margin:0;} ul{padding:0;list-style:none;} input,textarea{font:inherit;} /* ============ TOKENS ============ */ :root{ /* Scrollbar a případné UA prvky kreslí každý systém podle svého schématu — tohle je sjednotí na tmavé, ať web nevypadá na Macu a na Linuxu jinak kvůli něčemu, co ani není součástí designu. */ color-scheme:dark; --font-display:'Sora','Sora Fallback',system-ui,sans-serif; --font-body:'Inter','Inter Fallback',system-ui,sans-serif; --font-accent:'Instrument Serif','Instrument Serif Fallback',Georgia,serif; /* Paleta je odpíchnutá přímo z portrétu, aby fotka a web nebyly dvě různé červené: šarlat jejího trička (#e25155 na slunci → sytěji #d92d20), terakota cihlové zdi (#bd7755 → světleji jako neutrální akcent) a tmavá červeň vlasů (#85262f) v podkladech. Předchozí granátová verze měla v podkladu švestku a čet se do růžova — proto je tu teď podklad výhradně teplý červenohnědý, bez špetky modré. */ /* dark band */ --bg-dark-0:#1c0a09; --bg-dark-1:#27100d; --bg-dark-2:#351712; --ink-on-dark:#f8ebe7; --ink-on-dark-soft:#dcbdb4; --accent-ondark-label:#e3b48c; /* terakota ze zdi — labely, eyebrow, čísla */ --accent-dark-large:#ef6353; /* jen velké/tučné nadpisy, >3:1 AA-large */ --line-dark:rgba(227,180,140,.18); /* light band */ --bg-light-0:#faf4ee; --bg-light-1:#f2e5d9; --ink-on-light:#241412; --ink-on-light-soft:#5e3f39; --accent-onlight:#ab1f18; --accent-onlight-btn:#b8231f; --line-light:rgba(184,35,31,.16); /* shared scarlet gradient (background mesh + gradient accents, never used as text colour directly) */ --flame-1:#d92d20; --flame-2:#e8724a; --flame-deep:#6b1310; --maxw:1180px; --radius:18px; --radius-sm:10px; } /* ============ BASE ============ */ html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} } body{ font-family:var(--font-body); background:var(--bg-dark-0); color:var(--ink-on-dark); line-height:1.6; -webkit-font-smoothing:antialiased; } .container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.2rem);} /* Fixed background mesh — sits under everything, only visible where sections deliberately leave it uncovered (hero + dividers). Content sections paint a fully opaque band colour on top so text contrast never depends on the canvas. */ #fx{position:fixed;inset:0;z-index:0;pointer-events:none;} .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============ SKIP LINK ============ */ .skip-link{position:absolute;left:1rem;top:-100px;z-index:200;background:var(--accent-onlight-btn);color:#fff; font-family:var(--font-display);font-weight:700;padding:.7rem 1.1rem;border-radius:999px;} .skip-link:focus{top:1rem;outline:none;box-shadow:0 0 0 3px var(--bg-dark-0),0 0 0 6px #fff;} main{display:block;} body.nav-open{overflow:hidden;} /* ============ NAV ============ */ .nav{ position:sticky;top:0;z-index:60; display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.9rem clamp(1.1rem,4vw,2.2rem); background:rgba(28,10,9,.86);backdrop-filter:blur(10px); border-bottom:1px solid var(--line-dark); } .logo{font-family:var(--font-accent);font-style:italic;font-size:1.3rem;color:var(--ink-on-dark);white-space:nowrap;} .nav-links{display:flex;gap:1.5rem;flex-wrap:wrap;} .nav-links a{font-family:var(--font-display);font-size:.88rem;font-weight:600;color:var(--ink-on-dark-soft);padding:.3rem 0;border-bottom:2px solid transparent;} .nav-links a:hover{color:var(--ink-on-dark);border-color:var(--accent-ondark-label);} .nav-links a.active{color:var(--ink-on-dark);border-color:var(--accent-ondark-label);} /* aktuální podstránka */ .nav-cta{display:flex;align-items:center;gap:1rem;} .nav-phone{position:relative;font-family:var(--font-display);font-weight:700;font-size:.86rem;color:var(--ink-on-dark);padding:.55rem 1rem;border:1px solid var(--line-dark);border-radius:999px;white-space:nowrap;flex-shrink:0;} .nav-phone::before{content:"";position:absolute;inset:-5px;border-radius:999px;border:2px solid var(--accent-onlight-btn);opacity:.55;animation:pulse 2.2s ease-out infinite;} @keyframes pulse{0%{transform:scale(.9);opacity:.55}70%{transform:scale(1.3);opacity:0}100%{opacity:0}} .burger{display:none;flex-direction:column;gap:5px;padding:.7rem .6rem;min-width:44px;min-height:44px;justify-content:center;align-items:center;} .burger span{width:22px;height:2px;background:var(--ink-on-dark);border-radius:2px;} /* ============ BUTTONS ============ */ .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.6rem;border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:.92rem;white-space:nowrap;transition:transform .2s ease, box-shadow .2s ease;} .btn.solid{background:var(--accent-onlight-btn);color:#fff;box-shadow:0 8px 22px -8px rgba(171,31,24,.45);} .btn.solid:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(171,31,24,.6);} .btn.ghost{border:1.5px solid currentColor;color:inherit;} .btn.ghost:hover{background:rgba(227,180,140,.10);} /* ============ SECTIONS / BANDS ============ */ section[data-band]{position:relative;z-index:2;padding:clamp(3.2rem,7vw,6rem) 0;} /* Tmavá pásma nechávají mesh gradient prosvítat — jinak by pohyblivé pozadí bylo vidět jen v hero a v tenkých švech a zbytek stránky by působil mrtvě. Krytí je kompromis: při 88 % prosvítá jen 12 % pohybu a pásmo působí zase staticky, při 72 % je drift patrný a text pořád drží ~15:1 (nejsvětlejší místo canvasu vytáhne pásmo na rgb(66,30,20), ink je téměř bílý). Světlá čtecí pásma zůstávají plná — tam se pozadí vědomě neukazuje. */ section[data-band="dark"]{background:rgba(28,10,9,.72);color:var(--ink-on-dark); --ink:var(--ink-on-dark);--ink-soft:var(--ink-on-dark-soft);--accent-text:var(--accent-ondark-label); --panel-bg:rgba(255,236,225,.045);--panel-border:var(--line-dark);--bg-2:var(--bg-dark-1); } /* Světlá pásma nesmí prosvítat na tmavý canvas — ten by krémovou jen zašedil do špinava. Místo toho dostávají vlastní světlo: teplý žhavý nádech u obou okrajů (aby pásmo navazovalo na vlnový šev místo tvrdého řezu) a nad ním vlastní pomalu putující gradientovou vrstvu v krémovo-meruňkových tónech. Barva zůstává světlá a vzdušná, plocha přestává být mrtvá. */ section[data-band="light"]{background: linear-gradient(to bottom, rgba(232,196,166,.55) 0, rgba(250,244,238,0) 200px), linear-gradient(to top, rgba(232,196,166,.45) 0, rgba(250,244,238,0) 170px), var(--bg-light-0); color:var(--ink-on-light); /* Wash se posouvá a zvětšuje nad rámec sekce — bez clipu by roztáhl stránku do šířky a naskočil vodorovný scrollbar. V těchhle pásmech nic sticky ani záměrně přetékajícího není, takže je clip bezpečný. */ overflow:hidden; --ink:var(--ink-on-light);--ink-soft:var(--ink-on-light-soft);--accent-text:var(--accent-onlight); --panel-bg:rgba(255,253,251,.82);--panel-border:rgba(26,16,15,.10);--bg-2:var(--bg-light-1); } /* Sekce má z-index:2, takže tvoří stacking context — potomek se záporným z-indexem se vykreslí nad její vlastní pozadí, ale pod obsah. */ section[data-band="light"]::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(42vmax 42vmax at 10% 14%, rgba(217,45,32,.10), transparent 62%), radial-gradient(38vmax 38vmax at 92% 34%, rgba(232,114,74,.13), transparent 60%), radial-gradient(34vmax 34vmax at 58% 96%, rgba(235,196,150,.34), transparent 62%); will-change:transform; animation:lightwash 9s ease-in-out infinite alternate; } @keyframes lightwash{ 0%{transform:translate3d(0,0,0) scale(1);} 100%{transform:translate3d(12%,-8%,0) scale(1.16);} } /* Papírové zrno — bez něj působí velká krémová plocha jako prázdný PDF list. */ section[data-band="light"]::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; opacity:.45;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion:reduce){ section[data-band="light"]::before{animation:none !important;} } /* section headers */ .chip{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px; background:linear-gradient(135deg,var(--flame-1),var(--flame-2));color:#2b0c08;font-family:var(--font-display); font-weight:800;font-size:.78rem;flex-shrink:0;} .shead{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;font-size:.82rem; letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);margin-bottom:.9rem;} .lead{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.15; color:var(--ink);margin-bottom:1rem;max-width:34ch;} .lead em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--accent-text);} .ptext{color:var(--ink-soft);max-width:62ch;font-size:1.02rem;} /* scroll reveal */ [data-anim]{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease;} [data-anim].in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){[data-anim]{opacity:1!important;transform:none!important;transition:none!important;}} /* ============ DIVIDERS (only place besides hero where canvas shows through) ============ */ .divider{position:relative;z-index:2;height:70px;background:transparent;overflow:hidden;} .divider svg{width:100%;height:100%;display:block;} .divider path{fill:none;stroke:url(#waveGrad);stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:1; transition:stroke-dashoffset 1.5s ease;} .divider.in path{stroke-dashoffset:0;} @media (prefers-reduced-motion:reduce){.divider path{stroke-dashoffset:0!important;transition:none!important;}} /* ============ HERO ============ */ .hero{position:relative;z-index:2;padding:clamp(3.4rem,9vw,6.5rem) 0 clamp(3.6rem,8vw,5.5rem);overflow:hidden; background:var(--bg-dark-0);color:var(--ink-on-dark); min-height:min(94vh,900px);display:flex;align-items:center;} /* Podstránky mají nižší hero bez portrétu — jen titulek, perex a tlačítka. */ .hero.subhero{min-height:0;padding:clamp(3rem,7vw,5rem) 0 clamp(2.6rem,5vw,3.6rem);} .hero.subhero .hero-inner{grid-template-columns:1fr;} .hero.subhero h1{max-width:20ch;font-size:clamp(2.2rem,5.2vw,3.7rem);} .hero.subhero .sub{max-width:62ch;} .heroscrim{position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(ellipse 70% 60% at 30% 30%,rgba(28,10,9,.78),rgba(28,10,9,.42) 55%,rgba(28,10,9,.18) 78%), linear-gradient(180deg,rgba(28,10,9,.15),rgba(28,10,9,.65) 92%);} .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;width:100%;} .ticker{font-family:var(--font-display);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ondark-label); margin-bottom:1.1rem;display:flex;align-items:center;gap:.5rem;} .ticker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-ondark-label);} .hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.5rem,6.2vw,4.4rem);line-height:1.03; letter-spacing:-.025em;color:var(--ink-on-dark);max-width:15ch;margin-bottom:1.2rem;} .hero h1 em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--accent-ondark-label);} .hero .sub{font-size:1.14rem;line-height:1.65;color:var(--ink-on-dark-soft);max-width:46ch;margin-bottom:1.9rem;} .hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.9rem;} .hero-ctas .btn.ghost{color:var(--ink-on-dark);} .badges{display:flex;gap:.6rem;flex-wrap:wrap;} .badge{font-family:var(--font-display);font-size:.76rem;font-weight:600;color:var(--ink-on-dark-soft); border:1px solid var(--line-dark);border-radius:999px;padding:.35rem .8rem;} .portrait-wrap{position:relative;} /* Rám nemůže být na .portrait — ta má overflow:hidden kvůli ořezu fotky, takže by se vysazená část ořízla. Proto obal navíc. */ .pframe{position:absolute;inset:46px -32px -32px 46px;border:2.5px solid var(--flame-1);border-radius:28px; pointer-events:none;box-shadow:0 0 60px -12px rgba(217,45,32,.65);} @media (max-width:900px){.pframe{display:none;}} .portrait{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;will-change:transform; background:linear-gradient(150deg,var(--bg-dark-2),var(--bg-dark-1) 60%,#3a1712); border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem; box-shadow:0 30px 60px -25px rgba(0,0,0,.6);} .portrait picture,.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;} /* Jen lehké sjednocení s paletou a měkký přechod do tmavého pásma u horní hrany. Silnější vrstva tu byla kvůli staré fotce s cizím roll-upem v pozadí; tenhle portrét nic skrývat nepotřebuje, takže by jen zamazal obličej. */ .portrait::after{content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(180deg, rgba(107,19,16,.20) 0%, rgba(107,19,16,.04) 30%, transparent 48%), linear-gradient(200deg, rgba(227,180,140,.10), transparent 62%); mix-blend-mode:multiply;} /* Nad duotone vrstvou — ::after je v DOM pořadí za ní a bez z-indexu by ji překryl. */ .portrait .tagline{position:absolute;bottom:0;left:0;right:0;padding:1.1rem 1.3rem;z-index:2; background:linear-gradient(0deg,rgba(28,10,9,.9),transparent);font-family:var(--font-accent);font-style:italic; font-size:1.05rem;color:var(--ink-on-dark);} /* ============ CARDS w/ conic-gradient border reveal ============ */ .card{position:relative;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius); padding:1.6rem;isolation:isolate;transition:border-color .25s ease, box-shadow .25s ease;} /* Rotovat musí ÚHEL gradientu, ne pseudoelement. Otočený obdélník rámečku vysune rohy daleko mimo kartu (maska je v jeho vlastních souřadnicích, takže se s ním otočí taky) a přes sousední karty přeteče kosočtverec. Animovaný --bangle nechá rámeček přesně na hraně karty a barvy jen obíhají dokola. Prohlížeč bez podpory @property animaci vynechá a zobrazí statický rámeček. */ @property --bangle{syntax:'';initial-value:0deg;inherits:false;} .card::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;z-index:-1; background:conic-gradient(from var(--bangle),var(--flame-1),var(--flame-2),var(--flame-deep),var(--flame-1)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s ease; animation:bspin 4s linear infinite;animation-play-state:paused;} .card:hover,.card:focus-within{box-shadow:0 18px 40px -22px rgba(171,31,24,.30);} .card:hover::before,.card:focus-within::before{opacity:1;animation-play-state:running;} @keyframes bspin{to{--bangle:360deg;}} @media (prefers-reduced-motion:reduce){.card::before{animation:none!important;}} /* ============ O MNĚ ============ */ .about-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(2rem,5vw,3.5rem);align-items:start;} .about-check{display:flex;flex-direction:column;gap:1rem;} .about-check li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-soft);font-size:.98rem;} .about-check li svg{flex-shrink:0;margin-top:.15rem;color:var(--accent-text);} blockquote{font-family:var(--font-accent);font-style:italic;font-size:1.55rem;line-height:1.4;color:var(--ink); border-top:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border);padding:1.6rem 0;margin:1.8rem 0;} blockquote cite{display:block;font-family:var(--font-body);font-style:normal;font-size:.85rem;color:var(--ink-soft);margin-top:.8rem;} /* ============ STEPPER ============ */ .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem;margin-top:1.5rem;} .step{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:1.2rem 1rem;position:relative;} .step .num{font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:var(--accent-text);margin-bottom:.5rem;} .step h3{font-family:var(--font-display);font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:.4rem;} .step p{font-size:.85rem;color:var(--ink-soft);} .step:not(:last-child)::after{content:"";position:absolute;top:1.6rem;right:-.75rem;width:.9rem;height:1px; background:var(--panel-border);display:none;} /* ============ SERVICES ============ */ .svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:1.1rem;margin-top:1.6rem;} .svc-grid .card{display:flex;flex-direction:column;gap:.8rem;} .svc-grid .icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,rgba(217,45,32,.13),rgba(227,180,140,.12));color:var(--accent-text);} .svc-grid h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--ink);} .svc-grid p{font-size:.9rem;color:var(--ink-soft);} /* ============ TRUST STATS ============ */ .stat-row{display:flex;gap:.9rem;flex-wrap:wrap;margin:1.6rem 0 2.6rem;} .stat-pill{font-family:var(--font-display);font-weight:700;font-size:.86rem;color:var(--ink); background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:999px;padding:.6rem 1.1rem; display:flex;align-items:center;gap:.5rem;} .stat-pill .dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--flame-1),var(--flame-2));} /* ============ CALCULATORS (kramolisova pattern, restyled) ============ */ .embed-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.6rem;} /* Karta kalkulačky nemá vlastní výplň — pod widgetem má být přímo podklad sekce (krémový živý gradient ve světlém pásmu, tmavé pásmo s prosvítajícím meshem), widget je průhledný (bg=transparent) a jeho panely sedí na tom podkladu jako lístky. */ details.embed-card{background:transparent;border:1px solid var(--panel-border);border-radius:var(--radius); overflow:hidden;position:relative;isolation:isolate;transition:border-color .25s ease;} details.embed-card::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;z-index:-1; background:conic-gradient(from var(--bangle),var(--flame-1),var(--flame-2),var(--flame-deep),var(--flame-1)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s ease; animation:bspin 4s linear infinite;animation-play-state:paused;} details.embed-card[open]::before{opacity:1;animation-play-state:running;} @media (prefers-reduced-motion:reduce){details.embed-card::before{animation:none!important;}} details.embed-card summary{list-style:none;cursor:pointer;padding:1.15rem 1.4rem;display:flex;align-items:center; justify-content:space-between;gap:1rem;} details.embed-card summary::-webkit-details-marker{display:none;} details.embed-card summary h3{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--ink);} details.embed-card .chev{width:20px;height:20px;flex-shrink:0;transition:transform .3s ease;color:var(--accent-text);} details.embed-card[open] .chev{transform:rotate(180deg);} details.embed-card summary:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--accent-onlight-btn);} details.embed-card .desc{padding:0 1.4rem 1rem;color:var(--ink-soft);font-size:.9rem;max-width:60ch;} /* Bez vlastní výplně — widget má bg=transparent a color-scheme sladěný s pásmem, takže pod ním prosvítá podklad karty a za ní živý gradient sekce. */ details.embed-card iframe{width:100%;border:0;display:block;opacity:0;transition:opacity .4s ease;background:transparent;} details.embed-card iframe.ready{opacity:1;} details.embed-card .embed-loading{padding:1rem 1.4rem;font-size:.85rem;color:var(--ink-soft);} details.embed-card .src{padding:.9rem 1.4rem 1.3rem;font-size:.78rem;color:var(--ink-soft);} details.embed-card .src a{color:var(--accent-text);border-bottom:1px solid currentColor;} .calc-more{margin-top:1.6rem;} /* ============ REFERENCE ============ */ .ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin-top:1.6rem;} .ref-card{position:relative;} .ref-card .stars{color:var(--accent-text);font-size:.9rem;margin-bottom:.7rem;letter-spacing:.15em;} .ref-card p{font-size:.92rem;color:var(--ink);margin-bottom:.9rem;} .ref-card .who{font-family:var(--font-display);font-size:.8rem;font-weight:700;color:var(--ink-soft);} .sample-tag{position:absolute;top:.9rem;right:.9rem;font-family:var(--font-display);font-size:.62rem;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);background:var(--bg-2);border:1px solid var(--panel-border); border-radius:999px;padding:.2rem .55rem;} /* ============ PARTNER ============ */ .partner-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem;} .partner-card{flex:1 1 220px;} .partner-card h3{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:.4rem;} .partner-card p{font-size:.85rem;color:var(--ink-soft);} /* ============ ARTICLES ============ */ .src-note{font-family:var(--font-display);font-size:.92rem;color:var(--ink-soft);max-width:60ch;margin:1rem 0 1.8rem;} .art-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;} .art-card{display:flex;flex-direction:column;overflow:hidden;padding:0;} .art-thumb{position:relative;aspect-ratio:16/10;overflow:hidden; background:linear-gradient(135deg,var(--flame-deep),var(--flame-1) 55%,var(--flame-2));} .art-thumb picture,.art-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} /* Náhledové fotky přicházejí z feedu, každá jiná — jemný červený závoj je sjednotí s paletou webu, aby grid nepůsobil jako koláž. */ .art-thumb::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(107,19,16,.34),rgba(107,19,16,.06) 45%,rgba(20,6,5,.42));} .art-thumb img{transition:transform .7s cubic-bezier(.2,.7,.3,1);} .art-card:hover .art-thumb img,.art-card:focus-within .art-thumb img{transform:scale(1.06);} @media (prefers-reduced-motion:reduce){.art-thumb img{transition:none;} .art-card:hover .art-thumb img,.art-card:focus-within .art-thumb img{transform:none;}} .art-thumb .cat{position:absolute;z-index:2;top:.7rem;left:.7rem;font-family:var(--font-display);font-size:.68rem;font-weight:700; text-transform:uppercase;letter-spacing:.05em;color:#fff;background:rgba(0,0,0,.28);border-radius:999px;padding:.25rem .65rem;} .art-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1;} .art-body .date{font-family:var(--font-display);font-size:.72rem;color:var(--ink-soft);letter-spacing:.03em;} .art-body h3{font-family:var(--font-display);font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.35;} .art-body p{font-size:.86rem;color:var(--ink-soft);flex:1;} .art-cta{font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--accent-text); display:flex;align-items:center;gap:.35rem;margin-top:.3rem;} .art-card a.wrap{position:absolute;inset:0;z-index:3;} .art-card{position:relative;} .art-more{text-align:center;margin-top:2.2rem;} /* ============ CONTACT ============ */ .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin-top:1.6rem;} .contact-grid .card h3{font-family:var(--font-display);font-size:.78rem;font-weight:700;text-transform:uppercase; letter-spacing:.05em;color:var(--accent-text);margin-bottom:.6rem;} .contact-grid .card .big{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--ink);} .contact-grid .card p{font-size:.9rem;color:var(--ink-soft);margin-top:.3rem;} .contact-grid .card a.linklike{color:var(--accent-text);border-bottom:1px solid currentColor;font-size:.85rem;} /* ============ FOOTER ============ */ footer{position:relative;z-index:2;background:#140605;color:var(--ink-on-dark-soft);padding:3.2rem 0 1.6rem; border-top:1px solid var(--line-dark);} .foot-inner{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:2.4rem;} .foot-inner .logo{margin-bottom:1rem;} .foot-inner .reg{font-size:.82rem;line-height:1.7;max-width:52ch;color:var(--ink-on-dark-soft);} .foot-col .foot-h{font-family:var(--font-display);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em; color:var(--accent-ondark-label);margin-bottom:.9rem;} .foot-col a,.foot-col p{display:block;font-size:.85rem;color:var(--ink-on-dark-soft);margin-bottom:.55rem;} .foot-col a:hover{color:var(--ink-on-dark);} .foot-bottom{max-width:var(--maxw);margin:2.6rem auto 0;padding:1.4rem clamp(1.1rem,4vw,2.2rem) 0; border-top:1px solid var(--line-dark);font-size:.78rem;color:var(--ink-on-dark-soft); display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;} /* ============ CLICKABLE CARDS (služby, články) ============ */ /* Celá karta je odkaz přes průhledný — text uvnitř zůstává normálně vybíratelný a odkaz má vlastní aria-label. */ .card a.wrap{position:absolute;inset:0;z-index:3;border-radius:inherit;} .card .more{font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--accent-text); display:inline-flex;align-items:center;gap:.35rem;margin-top:auto;} .svc-grid .card{min-height:100%;} /* Šest karet se lépe skládá po třech než 5+1 (výchozí minmax pustí na desktopu pět sloupců). */ .svc-grid.cols3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));} /* Čtyři odkazové karty kalkulaček na úvodu — po čtyřech vedle sebe, ne po pěti. */ .svc-grid.calc-links{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));} .svc-grid.calc-links .card .more{color:var(--accent-text);} /* ============ O MNĚ — karta faktů vedle textu ============ */ .about-side{display:flex;flex-direction:column;gap:1rem;} .fact-card{display:flex;flex-direction:column;padding:.4rem 1.6rem;} /* Řádek = číslo + název na jedné účaří, popis pod nimi přes celou šířku. Číslo má pevnou šířku a tabulkové číslice, takže 20+, 100 % i 1 sedí na stejné hraně a popisky začínají vždy na stejném místě. */ .fact{display:grid;grid-template-columns:4.9rem 1fr;column-gap:.6rem;align-items:baseline;padding:1.15rem 0;} .fact+.fact{border-top:1px solid var(--panel-border);} .fact .fv{grid-column:1;font-family:var(--font-display);font-weight:800;font-size:1.55rem;line-height:1; letter-spacing:-.02em;color:var(--accent-text);white-space:nowrap;font-variant-numeric:tabular-nums;} .fact .fk{grid-column:2;font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--ink);} .fact .fd{grid-column:1 / -1;font-size:.88rem;line-height:1.55;color:var(--ink-soft);margin-top:.45rem;} .about-side .card.quiet{font-size:.85rem;color:var(--ink-soft);} .about-side .card.quiet strong{color:var(--ink);font-weight:600;} /* ============ KARIÉRA ============ */ .career-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem;margin-top:1.6rem;} .career-grid .card h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:.8rem;} .career-grid .card .kicker{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--accent-text);margin-bottom:.4rem;} .check-list{display:flex;flex-direction:column;gap:.6rem;} .check-list li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-soft);font-size:.92rem;line-height:1.5;} .check-list li svg{flex-shrink:0;margin-top:.2rem;color:var(--accent-text);} .offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.6rem 1.4rem;margin-top:1.2rem;} .offer-grid li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink);font-size:.95rem;line-height:1.5;} .offer-grid li svg{flex-shrink:0;margin-top:.25rem;color:var(--accent-text);} .career-why{margin-top:2rem;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;} .career-why blockquote{margin:0;} .career-cta{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;} .career-cta p{color:var(--ink-soft);font-size:.95rem;} @media (max-width:760px){.career-why{grid-template-columns:1fr;}} /* ============ PARTNER — loga + právní rámec ============ */ .partner-card .plogo{height:44px;width:auto;max-width:170px;object-fit:contain;margin-bottom:.9rem;} /* Loga partnerů jsou v jejich firemní červené / šedé; na tmavém podkladu je drží světlá „cedulka“, aby šedé písmo SMS Reality nezaniklo. */ .partner-card .plogo-wrap{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:.55rem .8rem;margin-bottom:.9rem;} .partner-card .plogo-wrap .plogo{margin:0;} .legal-list{margin-top:1.4rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.6rem 1.4rem;} .legal-list li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-soft);font-size:.9rem;line-height:1.5;} .legal-list li svg{flex-shrink:0;margin-top:.25rem;color:var(--accent-text);} .partner-note{margin-top:1.2rem;font-size:.86rem;color:var(--ink-soft);max-width:70ch;} .partner-note a,.ptext a,.src-note a,.check-list a,.legal-list a{color:var(--accent-text);border-bottom:1px solid currentColor;} /* ============ FORMULÁŘE ============ */ .contact-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3rem);margin-top:1.8rem;align-items:start;} .form{display:flex;flex-direction:column;gap:1rem;} .form.card{padding:clamp(1.3rem,3vw,2rem);} .field label{display:block;font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--accent-text);margin-bottom:.45rem;} .field input,.field textarea,.field select{width:100%;background:var(--field-bg);border:1px solid var(--field-border); border-radius:var(--radius-sm);padding:.8em 1em;color:var(--ink);font-size:.96rem;line-height:1.4; transition:border-color .25s ease,box-shadow .25s ease;} .field textarea{min-height:120px;resize:vertical;} .field select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3b48c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center;background-size:18px;} section[data-band="light"] .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ab1f18' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");} .field select option{color:#241412;background:#fff;} .field input::placeholder,.field textarea::placeholder{color:var(--ink-soft);opacity:.7;} .field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--accent-text);box-shadow:0 0 0 2px var(--bg-2),0 0 0 4px var(--accent-text);} section[data-band="dark"]{--field-bg:rgba(255,236,225,.06);--field-border:rgba(227,180,140,.55);} section[data-band="light"]{--field-bg:#fff;--field-border:rgba(36,20,18,.42);} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;} .form .note{font-size:.78rem;color:var(--ink-soft);line-height:1.55;} .form .note a{color:var(--accent-text);border-bottom:1px solid currentColor;} .form-status{font-size:.95rem;color:var(--ink);margin:0;font-weight:500;} .form-status.err{color:#ff9a8a;} section[data-band="light"] .form-status.err{color:#b8231f;} .form .btn{align-self:flex-start;} /* honeypot — schovaný pro lidi, formulářoví roboti ho vyplní */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} /* zaškrtávací poptávky (pojištění, investice) */ .chk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.55rem 1rem;} .chk{display:flex;align-items:flex-start;gap:.6em;font-size:.92rem;line-height:1.4;color:var(--ink-soft);cursor:pointer;} .chk input{accent-color:var(--accent-onlight-btn);width:17px;height:17px;margin-top:.12em;flex:0 0 auto;} .chk:hover{color:var(--ink);} /* posuvník + živý popisek hodnoty v labelu */ input[type=range]{width:100%;accent-color:var(--accent-onlight-btn);} .field .rangeout{font-family:var(--font-display);font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums;} /* kontaktní sloupec vedle formuláře */ .contact-info{display:flex;flex-direction:column;gap:1rem;} .contact-info .card h3{font-family:var(--font-display);font-size:.74rem;font-weight:700;text-transform:uppercase; letter-spacing:.06em;color:var(--accent-text);margin-bottom:.5rem;} .contact-info .card .big{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--ink);} .contact-info .card p{font-size:.9rem;color:var(--ink-soft);} .contact-info .card p strong{color:var(--ink);font-weight:600;} .contact-info .card a.linklike{color:var(--accent-text);border-bottom:1px solid currentColor;font-size:.88rem;} .contact-info .card .hours{margin-top:.5rem;font-size:.82rem;} .contact-info .card p.office{margin-top:1.1rem;} /* ============ FAQ (u kontaktu) ============ */ .faq{margin-top:2.6rem;max-width:760px;} .faq-title{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--ink);margin-bottom:1rem;} .faq-title em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--accent-text);} .faq-item{border-top:1px solid var(--panel-border);} .faq-item:last-child{border-bottom:1px solid var(--panel-border);} .faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:1rem 0;font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--ink);} .faq-item summary::-webkit-details-marker{display:none;} .faq-item .chev{width:20px;height:20px;flex-shrink:0;color:var(--accent-text);transition:transform .3s ease;} .faq-item[open] .chev{transform:rotate(180deg);} .faq-item p{padding:0 0 1.1rem;color:var(--ink-soft);font-size:.95rem;max-width:62ch;} .faq-item summary:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--accent-onlight-btn);border-radius:6px;} /* ============ VLOŽENÁ MAPA (mapy.com) — načte se až po souhlasu ============ */ .map-wrap{margin-top:.9rem;position:relative;} .office-map{width:100%;height:220px;border:1px solid var(--panel-border);border-radius:var(--radius-sm);display:block;background:var(--bg-2);} .map-open{position:absolute;inset:0;z-index:2;border-radius:var(--radius-sm);} .map-open:hover,.map-open:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-text);} /* Vlastní pravidla výš nastavují display, které by přebilo UA [hidden] — proto se atribut ctí explicitně. */ .office-map[hidden],.map-open[hidden],.map-consent[hidden]{display:none;} .map-consent{border:1px dashed var(--panel-border);border-radius:var(--radius-sm);padding:1rem;background:var(--panel-bg); display:flex;flex-direction:column;gap:.7rem;align-items:flex-start;} .map-consent span{font-size:.82rem;color:var(--ink-soft);line-height:1.5;} .map-consent .btn{padding:.55em 1.1em;font-size:.82rem;} /* ============ COOKIE LIŠTA ============ */ .cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:0 max(14px,2vw) max(14px,2vw); transform:translateY(140%);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s;} .cookie-banner.show{transform:translateY(0);opacity:1;pointer-events:auto;} .cookie-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:1.6rem; background:rgba(28,10,9,.96);backdrop-filter:blur(16px);border:1px solid var(--line-dark);border-radius:14px; padding:1.1rem 1.4rem;box-shadow:0 24px 60px -24px #000;color:var(--ink-on-dark);} .cookie-text strong{display:block;font-family:var(--font-display);color:var(--ink-on-dark);font-weight:700;margin-bottom:.25rem;font-size:.96rem;} .cookie-text p{font-size:.84rem;color:var(--ink-on-dark-soft);line-height:1.55;max-width:70ch;} .cookie-text a{color:var(--accent-ondark-label);border-bottom:1px solid currentColor;} .cookie-actions{display:flex;gap:.6rem;flex-shrink:0;flex-wrap:wrap;} .cookie-actions .btn{padding:.6rem 1.1rem;font-size:.84rem;} .cookie-actions .btn.ghost{color:var(--ink-on-dark);} @media (max-width:760px){.cookie-inner{flex-direction:column;align-items:stretch;gap:1rem;}.cookie-actions .btn{flex:1;justify-content:center;}} @media (prefers-reduced-motion:reduce){.cookie-banner{transition:none;}} /* ============ HYPOTEČNÍ KALKULAČKY (vlastní, bez iframu) ============ */ .calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem;margin-top:1.6rem;align-items:start;} .calc{display:flex;flex-direction:column;gap:1rem;} .calc h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--ink);} .calc>p{font-size:.9rem;color:var(--ink-soft);} .calc .cfield label{display:flex;justify-content:space-between;gap:1rem;font-family:var(--font-display);font-size:.72rem; font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);margin-bottom:.45rem;} .calc .cfield label output{color:var(--ink);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums;} .calc .cfield input[type=text],.calc .cfield input[type=number],.calc .cfield input[type=month]{width:100%;background:var(--field-bg); border:1px solid var(--field-border);border-radius:var(--radius-sm);padding:.75em 1em;color:var(--ink);font-size:1rem; font-variant-numeric:tabular-nums;} .calc .cfield input:focus{outline:0;border-color:var(--accent-text);box-shadow:0 0 0 2px var(--bg-2),0 0 0 4px var(--accent-text);} .calc .result{border-top:1px solid var(--panel-border);padding-top:1rem;} .calc .result .rk{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);} .calc .result .rv{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;color:var(--ink); font-variant-numeric:tabular-nums;line-height:1.2;margin:.2rem 0;} .calc .result .rv em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--accent-text);} .calc .result .rn{font-size:.78rem;color:var(--ink-soft);} .calc .btn{align-self:flex-start;} /* ============ TEXTOVÉ STRÁNKY (ochrana osobních údajů) ============ */ .prose{max-width:72ch;} .prose h2{font-family:var(--font-display);font-size:1.35rem;font-weight:800;color:var(--ink);margin:2.4rem 0 .8rem;line-height:1.25;} .prose h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--ink);margin:1.8rem 0 .6rem;} .prose p{color:var(--ink-soft);margin-bottom:1rem;font-size:.98rem;} .prose ul,.prose ol{margin:0 0 1rem 1.3rem;color:var(--ink-soft);font-size:.96rem;display:flex;flex-direction:column;gap:.45rem;} .prose ul{list-style:disc;} .prose ol{list-style:decimal;} .prose li::marker{color:var(--accent-text);} .prose a{color:var(--accent-text);border-bottom:1px solid currentColor;} .prose strong{color:var(--ink);font-weight:600;} .prose .meta{font-family:var(--font-display);font-size:.8rem;color:var(--ink-soft);margin-bottom:2rem;} .prose table{border-collapse:collapse;width:100%;font-size:.9rem;margin-bottom:1.2rem;} .prose th,.prose td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--panel-border);color:var(--ink-soft);vertical-align:top;} .prose th{font-family:var(--font-display);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text);} /* ============ MAXIMALIZOVANÁ KALKULAČKA (paycalceu host režim, hlavně iPhone) ============ */ /* Widget umí nativní Fullscreen API; kde ho prohlížeč v iframu nemá, si o roztažení řekne přes postMessage a rám roztáhneme přes celé okno my. */ details.embed-card iframe.maxi{position:fixed;inset:0;z-index:100;height:100% !important;max-width:none;border-radius:0;background:var(--bg-dark-0);} /* Sekce má z-index:2 = vlastní stacking context; po dobu maximalizace ji zvedneme nad navigaci (60) i cookie lištu (70). */ section.maxi-vrstva{z-index:200;} body.maxi-open{overflow:hidden;} details.embed-card iframe{max-width:880px;margin-inline:auto;border-radius:var(--radius-sm);} /* Průhledné pozadí iframu (widget má bg=transparent) funguje jen když se color-scheme hostitele a vloženého dokumentu shodují — jinak prohlížeč rám podloží bílou. Web má globálně dark, světlé pásmo proto iframu nastaví light. */ section[data-band="light"] details.embed-card iframe{color-scheme:light;} section[data-band="dark"] details.embed-card iframe{color-scheme:dark;} /* ============ SPOLEČNÉ DROBNOSTI ============ */ .shead.subhead{margin-top:2.4rem;} .ptext.subhead{margin-top:1.8rem;} .ptext.small{font-size:.86rem;} .ptext+.ptext{margin-top:1rem;} .contact-info .card .big.mail{font-size:1.05rem;word-break:break-all;} a[href^="tel:"]{white-space:nowrap;} .form .note.spaced{margin-top:.9rem;} .section-cta{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center;} .section-cta .btn.ghost{color:var(--ink);} .eyebrow-link{color:var(--accent-text);border-bottom:1px solid currentColor;} .foot-bottom a{color:var(--ink-on-dark-soft);border-bottom:1px solid transparent;} .foot-bottom a:hover{color:var(--ink-on-dark);border-color:currentColor;} .foot-bottom .sep{opacity:.5;margin:0 .35rem;} @media (max-width:960px){.contact-wrap{grid-template-columns:1fr;}} @media (max-width:560px){.field-row{grid-template-columns:1fr;}} /* ============ FOCUS STATES ============ */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:none;box-shadow:0 0 0 3px var(--bg-light-0),0 0 0 6px var(--accent-onlight-btn);border-radius:6px;} section[data-band="dark"] a:focus-visible,section[data-band="dark"] button:focus-visible{ box-shadow:0 0 0 3px var(--bg-dark-0),0 0 0 6px var(--accent-onlight-btn);} /* ============ RESPONSIVE ============ */ @media (max-width:960px){ .hero-inner{grid-template-columns:1fr;} /* width:100% je nutná — samotné margin-inline:auto přepne grid položku na shrink-to-fit a obsah portrétu je celý absolutně pozicovaný, takže by se smrskl na nulu. */ .portrait-wrap{width:100%;max-width:360px;margin-inline:auto;} .about-grid{grid-template-columns:1fr;} .steps{grid-template-columns:repeat(2,1fr);} .foot-inner{grid-template-columns:1fr 1fr;} .foot-inner>div:first-child{grid-column:1/-1;} } @media (max-width:760px){ /* .nav má backdrop-filter, a ten z ní dělá containing block pro fixed potomky — bottom:0 by se tedy vztahoval k liště, ne k oknu. Výšku proto dáváme explicitně. */ .nav-links{position:fixed;top:var(--navh,64px);left:0;right:0;height:calc(100vh - var(--navh,64px));height:calc(100dvh - var(--navh,64px));overflow-y:auto;background:var(--bg-dark-0); border-bottom:1px solid var(--line-dark);flex-direction:column;flex-wrap:nowrap;gap:0;padding:.5rem 1.2rem 1rem; transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;} .nav-links.open{opacity:1;transform:none;pointer-events:auto;} .nav-links a{padding:.7rem 0;border-bottom:1px solid var(--line-dark);width:100%;} .burger{display:flex;} .nav-cta .nav-links-label{display:none;} .steps{grid-template-columns:1fr;} .foot-inner{grid-template-columns:1fr;} .hero h1{max-width:none;} } @media (max-width:480px){ .hero-ctas{flex-direction:column;align-items:stretch;} .hero-ctas .btn{justify-content:center;} .nav-phone{font-size:.74rem;padding:.5rem .75rem;} .nav{gap:.5rem;} }