/* ========================================================= Jan Kurdiovský — finanční poradce Design: warm cinematic editorial, "celá stránka je graf růstu" Palette derived from Jan's own portrait (lounge) + brand red arrow ========================================================= */ :root{ /* ---- struktura (nezávislá na motivu) ---- */ --maxw: 1180px; --rail: 104px; /* left growth-axis gutter (desktop) */ --r: 16px; /* radius */ --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --disp: "Bricolage Grotesque", "Inter", sans-serif; --mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace; --ease: cubic-bezier(.22,.61,.36,1); /* ---- brand signál (stejný ve všech motivech) ---- */ --red: #E8161B; /* the rising arrow */ --red-2: #FF4A3D; --red-deep: #9E0C10; --star: #E7B84B; /* recenzní hvězdy zůstávají zlaté */ --em: #EAC66B; /* zlatý důraz na klíčové slovo v heru (teplý pop na chladném pozadí) */ } /* ========================================================= BAREVNÉ MOTIVY — mění se jen neutrál + druhý akcent. grafit = výchozí. Přepíná se atributem data-theme na . ========================================================= */ :root, [data-theme="grafit"]{ --ink:#0F1113; --ink-2:#141719; --ink-3:#191D20; --ink-4:#222629; --bone:#ECEEF0; --bone-dim:#B9C0C6; --muted:#7E868D; --line:rgba(236,238,240,.12); --line-2:rgba(236,238,240,.20); --accent2:#8FB0C4; --accent2-hi:#B7D2E1; /* chladná ocel */ --glow-1:rgba(143,176,196,.10); --glow-2:rgba(70,92,110,.16); } [data-theme="pulnoc"]{ --ink:#0C0F16; --ink-2:#11151F; --ink-3:#161B28; --ink-4:#1F2739; --bone:#E9ECF3; --bone-dim:#B3BCD0; --muted:#7B849B; --line:rgba(233,236,243,.12); --line-2:rgba(233,236,243,.20); --accent2:#7E9CC9; --accent2-hi:#A9C1E6; /* tlumená modrošedá */ --glow-1:rgba(126,156,201,.12); --glow-2:rgba(52,80,132,.18); } [data-theme="les"]{ --ink:#0B120F; --ink-2:#0F1714; --ink-3:#132019; --ink-4:#1B2C23; --bone:#E9F0EA; --bone-dim:#B4C4B8; --muted:#7C8C80; --line:rgba(233,240,234,.12); --line-2:rgba(233,240,234,.20); --accent2:#C9A24B; --accent2-hi:#E2BE63; /* mosaz */ --glow-1:rgba(201,162,75,.10); --glow-2:rgba(34,84,62,.22); } /* ---------- reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; font-family:var(--sans); font-size:clamp(1rem,.97rem + .2vw,1.075rem); line-height:1.62; color:var(--bone); background:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,picture{ display:block; max-width:100%; } img{ height:auto; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; cursor:pointer; } h1,h2,h3,p,ul,ol,figure,blockquote{ margin:0; } ul,ol{ list-style:none; padding:0; } ::selection{ background:var(--red); color:#fff; } /* focus */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--accent2-hi); outline-offset:3px; border-radius:4px; } .skip{ position:fixed; left:12px; top:-60px; z-index:200; background:var(--red); color:#fff; padding:.7rem 1.1rem; border-radius:8px; transition:top .2s; } .skip:focus{ top:12px; } /* ---------- shared type ---------- */ .kicker{ font-family:var(--mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:1.1rem; display:flex; align-items:center; gap:.7em; } .kicker::before{ content:""; width:26px; height:1px; background:var(--red); } .kicker--red{ color:var(--red-2); } .kicker--red::before{ background:var(--red); width:26px; } .h2{ font-family:var(--disp); font-weight:600; font-size:clamp(1.95rem,1.3rem + 2.8vw,3.35rem); line-height:1.02; letter-spacing:-.022em; color:var(--bone); } .secsub{ color:var(--bone-dim); max-width:46ch; margin-top:1.1rem; font-size:1.06rem; } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); } .section{ padding-block:clamp(4.5rem,9vw,8rem); position:relative; } .sechead{ margin-bottom:clamp(2.2rem,4vw,3.4rem); } .sechead--row{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; } /* ---------- buttons ---------- */ .btn{ --bg:var(--red); display:inline-flex; align-items:center; gap:.6em; font-family:var(--disp); font-weight:600; font-size:1rem; letter-spacing:-.01em; padding:.92em 1.4em; border-radius:999px; border:1px solid transparent; background:var(--bg); color:#fff; line-height:1; transition:transform .25s var(--ease), background .25s, box-shadow .25s, border-color .25s; will-change:transform; } .btn--sm{ padding:.62em 1.05em; font-size:.92rem; } .btn--red{ background:var(--red); box-shadow:0 10px 30px -12px rgba(232,22,27,.75); } .btn--red:hover{ background:#ff2a24; transform:translateY(-2px); box-shadow:0 16px 40px -14px rgba(232,22,27,.9); } .btn--ghost{ background:transparent; color:var(--bone); border-color:var(--line-2); } .btn--ghost:hover{ border-color:var(--bone); transform:translateY(-2px); } .btn--back{ background:transparent; color:var(--bone-dim); padding-left:.4em; } .btn--back:hover{ color:var(--bone); } .btn__arw{ transition:transform .25s var(--ease); } .btn:hover .btn__arw{ transform:translate(2px,-2px); } .btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; transform:none; } /* ========================================================= HEADER ========================================================= */ .site{ position:fixed; inset:0 0 auto 0; z-index:90; padding-left:var(--rail); transition:background .3s, backdrop-filter .3s, border-color .3s; border-bottom:1px solid transparent; } .site.is-stuck{ background:color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--line); } .site__in{ max-width:var(--maxw); margin-inline:auto; padding:.85rem clamp(20px,5vw,40px); display:flex; align-items:center; gap:1.5rem; } .brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; } .brand__mark{ width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(232,22,27,.35)); } .brand__txt{ display:flex; flex-direction:column; line-height:1.1; } .brand__txt b{ font-family:var(--disp); font-weight:600; font-size:1.02rem; letter-spacing:-.02em; } .brand__txt i{ font-style:normal; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .nav{ display:flex; gap:1.5rem; } .nav a{ font-size:.94rem; color:var(--bone-dim); position:relative; padding:.2em 0; transition:color .2s; } .nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--red); transition:width .28s var(--ease); } .nav a:hover{ color:var(--bone); } .nav a:hover::after{ width:100%; } .site__cta{ display:flex; align-items:center; gap:1rem; } .tel{ font-family:var(--mono); font-size:.82rem; color:var(--bone-dim); white-space:nowrap; } .tel:hover{ color:var(--bone); } .burger{ display:none; width:44px; height:44px; background:transparent; border:1px solid var(--line-2); border-radius:10px; flex-direction:column; align-items:center; justify-content:center; gap:5px; } .burger span{ width:20px; height:2px; background:var(--bone); transition:transform .3s var(--ease), opacity .2s; } .burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); } /* ========================================================= GROWTH AXIS — jemná svislá lišta průběhu. Výplň i tečky sekcí sdílí JEDEN souřadný systém (výška tracku), takže se dot rozsvítí přesně tam, kam dosáhne výplň. ========================================================= */ .axis{ position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:80; display:flex; justify-content:center; padding-block:clamp(96px,13vh,130px) clamp(40px,8vh,64px); pointer-events:none; } .axis__track{ position:relative; width:2px; height:100%; background:var(--line); border-radius:2px; } .axis__fill{ position:absolute; left:0; top:0; width:100%; height:0%; background:linear-gradient(180deg,var(--accent2) 0%, var(--red) 100%); box-shadow:0 0 12px color-mix(in srgb, var(--red) 50%, transparent); border-radius:2px; transition:height .12s linear; } .axis__nodes{ position:absolute; inset:0; pointer-events:none; } .axis__nodes li{ position:absolute; left:50%; transform:translate(-50%,-50%); } .axis__nodes a{ display:block; position:relative; pointer-events:auto; } .axis__dot{ display:block; width:9px; height:9px; border-radius:50%; background:var(--ink-4); border:2px solid var(--muted); transition:background .3s, border-color .3s, transform .3s, box-shadow .3s; } .axis__lbl{ position:absolute; left:16px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; opacity:0; transition:opacity .3s, color .3s; } .axis__nodes li.is-on .axis__dot{ background:var(--red); border-color:var(--red); transform:scale(1.28); box-shadow:0 0 0 4px color-mix(in srgb, var(--red) 18%, transparent); } .axis__nodes li.is-on .axis__lbl, .axis__nodes li:hover .axis__lbl{ opacity:1; color:var(--bone-dim); } .axis__nodes li.is-on .axis__lbl{ color:var(--red-2); } /* mobile top progress */ .topbar{ position:fixed; inset:0 0 auto 0; height:3px; z-index:95; background:transparent; display:none; } .topbar__fill{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent2),var(--red)); } /* ========================================================= HERO ========================================================= */ .hero{ padding-left:var(--rail); min-height:100svh; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; background: radial-gradient(120% 80% at 85% 0%, var(--glow-1), transparent 55%), radial-gradient(90% 70% at 0% 100%, var(--glow-2), transparent 60%), var(--ink); } .hero__grid{ max-width:var(--maxw); margin-inline:auto; width:100%; padding:7rem clamp(20px,5vw,40px) 3rem; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem); align-items:center; } .hero__copy{ position:relative; z-index:3; max-width:32rem; } .hero__h1{ font-family:var(--disp); font-weight:700; font-size:clamp(2.9rem,1.4rem + 7.2vw,6rem); line-height:.96; letter-spacing:-.035em; color:var(--bone); margin:.2rem 0 1.6rem; } .hero__h1 span{ display:block; } .hero__h1 em{ font-style:normal; color:var(--em); } .hero__neg{ color:var(--red); width:max-content; max-width:none; white-space:nowrap; } .hero__h1 .hero__neg-t{ display:inline-block; position:relative; } .hero__neg-t::after{ content:""; position:absolute; left:-2%; right:-2%; top:52%; height:.09em; background:var(--red); transform:scaleX(0); transform-origin:left; border-radius:2px; animation:strike 1s var(--ease) 1.1s forwards; } @keyframes strike{ to{ transform:scaleX(1); } } .hero__lead{ color:var(--bone-dim); font-size:1.12rem; max-width:38ch; } .hero__act{ display:flex; gap:.9rem; margin:2rem 0 1.8rem; flex-wrap:wrap; } .hero__proof{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; } .rating{ display:inline-flex; align-items:center; gap:.55rem; } .rating__stars{ color:var(--star); letter-spacing:.05em; font-size:.95rem; } .rating__txt{ font-size:.85rem; color:var(--bone-dim); } .rating__txt b{ color:var(--bone); } .rating:hover .rating__txt{ color:var(--bone); } .certs{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--muted); padding-left:1.4rem; border-left:1px solid var(--line); } .hero__media{ position:relative; align-self:stretch; display:flex; align-items:center; min-height:60vh; } .hero__img{ width:100%; height:100%; max-height:82vh; object-fit:cover; object-position:50% 22%; border-radius:var(--r); -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent); mask-image:linear-gradient(180deg,#000 78%,transparent); box-shadow:0 40px 80px -40px rgba(0,0,0,.8); } .hero__arw{ position:absolute; right:6%; bottom:-4%; width:min(58%,320px); height:auto; z-index:2; overflow:visible; pointer-events:none; } #heroArw{ stroke-dasharray:900; stroke-dashoffset:900; animation:draw 1.6s var(--ease) .5s forwards; filter:drop-shadow(0 0 14px rgba(232,22,27,.4)); } #heroHead{ stroke-dasharray:120; stroke-dashoffset:120; animation:draw .5s var(--ease) 1.9s forwards; filter:drop-shadow(0 0 14px rgba(232,22,27,.4)); } @keyframes draw{ to{ stroke-dashoffset:0; } } .hero__chip{ position:absolute; left:-6%; bottom:8%; z-index:3; background:color-mix(in srgb, var(--ink) 72%, transparent); backdrop-filter:blur(10px); border:1px solid var(--line-2); border-radius:12px; padding:.7rem 1rem; display:flex; flex-direction:column; gap:.15rem; box-shadow:0 20px 50px -24px rgba(0,0,0,.9); } .hero__chip-k{ font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; color:var(--accent2-hi); } .hero__chip-v{ font-family:var(--disp); font-weight:600; font-size:1.05rem; } .hero__chip-v b{ color:var(--red-2); font-weight:600; } .scrollcue{ position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); padding-left:var(--rail); display:flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); z-index:4; } .scrollcue span{ width:1px; height:34px; background:linear-gradient(var(--red),transparent); position:relative; overflow:hidden; } .scrollcue span::after{ content:""; position:absolute; inset:0; background:var(--red); animation:cue 1.8s var(--ease) infinite; } @keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} } .scrollcue:hover{ color:var(--bone-dim); } /* ========================================================= PAGE PADDING for the rail (desktop content clears axis) ========================================================= */ .manifest,.about,.serv,.pfp,.revs,.app,.book,.foot{ padding-left:var(--rail); } /* ========================================================= MANIFEST / PRINCIP ========================================================= */ .manifest{ background:linear-gradient(180deg,var(--ink),var(--ink-2)); border-top:1px solid var(--line); overflow:hidden; } /* bg-blur.jpg — bílý cutout s roztřepenými okraji; multiply srazí bílou do tmavého podkladu, takže z něj zbyde jen tlumená lidská atmosféra vpravo. */ .manifest__ghost{ position:absolute; inset:0; z-index:0; pointer-events:none; } .manifest__ghost img{ position:absolute; right:-9%; top:52%; transform:translateY(-50%); width:min(50%,620px); height:auto; opacity:.42; mix-blend-mode:multiply; filter:contrast(1.05) brightness(.92); /* těsná elipsa kolem postavy — roztřepené okraje cutoutu se stihnou vytratit dřív */ -webkit-mask-image:radial-gradient(58% 62% at 66% 46%, #000 0%, #000 30%, transparent 60%); mask-image:radial-gradient(58% 62% at 66% 46%, #000 0%, #000 30%, transparent 60%); } .manifest__in{ position:relative; z-index:1; text-align:center; max-width:56ch; margin-inline:auto; } .manifest__h{ font-family:var(--disp); font-weight:700; font-size:clamp(2.6rem,1.4rem + 6vw,5.4rem); line-height:.98; letter-spacing:-.035em; color:var(--bone); margin:.4rem 0 1.4rem; } .manifest__h span{ color:var(--red); } .manifest__p{ color:var(--bone-dim); font-size:1.15rem; margin-inline:auto; } .manifest__pills{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; } .manifest__pills li{ font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; padding:.5em 1em; border:1px solid var(--line-2); border-radius:999px; color:var(--bone-dim); } /* ========================================================= O MNĚ ========================================================= */ .about{ background:var(--ink-2); } .about__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,5rem); align-items:center; } .about__media{ position:relative; } .about__img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:70% 30%; border-radius:var(--r); box-shadow:0 30px 70px -40px rgba(0,0,0,.85); } .about__tag{ position:absolute; right:-.6rem; bottom:1.2rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; background:var(--red); color:#fff; padding:.55em .9em; border-radius:8px; box-shadow:0 12px 30px -12px rgba(232,22,27,.7); } .about__copy p{ color:var(--bone-dim); margin-top:1.1rem; max-width:52ch; } .about__copy b{ color:var(--bone); font-weight:600; } .badges{ display:flex; flex-direction:column; gap:.7rem; margin-top:2rem; max-width:44ch; } .badges li{ display:flex; align-items:baseline; gap:1rem; font-family:var(--disp); font-weight:700; font-size:1.1rem; color:var(--bone); padding:.7rem 1rem; border:1px solid var(--line); border-radius:12px; background:linear-gradient(90deg,rgba(232,22,27,.06),transparent); } .badges li span{ font-family:var(--sans); font-weight:400; font-size:.86rem; color:var(--muted); } .badges--row{ flex-direction:row; gap:.6rem; flex-wrap:wrap; } .badges--row li{ font-size:1.2rem; padding:.6em 1.1em; letter-spacing:.02em; } /* ========================================================= SLUŽBY ========================================================= */ .serv{ background:var(--ink); } .serv__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,2vw,1.8rem); } .card{ position:relative; padding:clamp(1.8rem,3vw,2.6rem); background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:transform .35s var(--ease), border-color .35s, background .35s; } .card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--red),var(--accent2)); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease); } .card:hover{ transform:translateY(-5px); border-color:var(--line-2); background:var(--ink-4); } .card:hover::before{ transform:scaleY(1); } .card__no{ font-family:var(--mono); font-size:.9rem; color:var(--red-2); letter-spacing:.1em; } .card__h{ font-family:var(--disp); font-weight:600; font-size:clamp(1.35rem,1rem + 1.4vw,1.75rem); letter-spacing:-.02em; margin:.5rem 0 .9rem; color:var(--bone); } .card__p{ color:var(--bone-dim); max-width:44ch; } .ticks{ display:grid; gap:.55rem; margin:1.5rem 0; } .ticks--2{ grid-template-columns:1fr 1fr; } .ticks li{ position:relative; padding-left:1.7rem; color:var(--bone); font-size:.98rem; } .ticks li::before{ content:""; position:absolute; left:0; top:.5em; width:12px; height:8px; border-left:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(-45deg); border-radius:1px; } .card__link{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--disp); font-weight:600; color:var(--bone); margin-top:.4rem; transition:gap .25s var(--ease), color .25s; } .card__link span{ color:var(--red); transition:transform .25s var(--ease); } .card__link:hover{ color:var(--red-2); gap:.8rem; } .card__link:hover span{ transform:translateX(3px); } .serv__intro{ margin-top:clamp(1.2rem,2vw,1.8rem); padding:clamp(1.6rem,3vw,2.4rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--r); background: radial-gradient(120% 200% at 100% 0%, color-mix(in srgb, var(--red) 16%, transparent), transparent 60%), var(--ink-2); } .serv__intro-h{ font-family:var(--disp); font-weight:600; font-size:clamp(1.35rem,1rem + 1.4vw,1.9rem); letter-spacing:-.02em; margin:.3rem 0 .5rem; color:var(--bone); } .serv__intro-p{ color:var(--bone-dim); max-width:42ch; } /* ========================================================= CO JE PFP ========================================================= */ .pfp{ background:linear-gradient(180deg,var(--ink),var(--ink-2)); } .pfp__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:center; } .pfp__stat{ position:relative; } .pfp__num{ font-family:var(--disp); font-weight:800; display:block; font-size:clamp(4.5rem,3rem + 10vw,9.5rem); line-height:.86; letter-spacing:-.04em; color:var(--bone); background:linear-gradient(160deg,var(--bone) 40%, var(--accent2) 120%); -webkit-background-clip:text; background-clip:text; } .pfp__num em{ font-style:normal; color:var(--red); -webkit-text-fill-color:var(--red); } .pfp__num-lbl{ display:block; font-family:var(--mono); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); margin-top:1rem; } .pfp__copy p{ color:var(--bone-dim); margin-top:1.1rem; max-width:50ch; } .pfp__copy b{ color:var(--bone); } /* ========================================================= REFERENCE ========================================================= */ .revs{ background:var(--ink); } .revs__google{ display:flex; align-items:center; gap:.7rem; font-size:.9rem; color:var(--bone-dim); } .revs__google b{ color:var(--bone); } .revs__google i{ display:block; font-style:normal; font-family:var(--mono); font-size:.72rem; color:var(--red-2); margin-top:.2rem; } .revs__google:hover i{ text-decoration:underline; } .revs__masonry{ columns:3; column-gap:clamp(1rem,1.6vw,1.4rem); } .rev{ break-inside:avoid; margin-bottom:clamp(1rem,1.6vw,1.4rem); padding:1.5rem 1.6rem; background:var(--ink-3); border:1px solid var(--line); border-radius:14px; transition:transform .3s var(--ease), border-color .3s; } .rev:hover{ transform:translateY(-3px); border-color:var(--line-2); } .rev p{ color:var(--bone); font-size:.99rem; line-height:1.6; } .rev p::before{ content:"“"; color:var(--red); font-family:var(--disp); font-size:2.4rem; line-height:0; position:relative; top:.35em; margin-right:.05em; } .rev footer{ display:flex; align-items:center; gap:.7rem; margin-top:1.1rem; font-family:var(--disp); font-weight:600; font-size:.94rem; color:var(--bone-dim); } .rev__av{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--mono); font-size:.72rem; color:#fff; background:linear-gradient(140deg,var(--red),var(--red-deep)); } /* ========================================================= MYPLANN ========================================================= */ .app{ background:linear-gradient(180deg,var(--ink-2),var(--ink)); } .app__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center; } .app__copy p{ color:var(--bone-dim); margin-top:1.1rem; max-width:46ch; } .app__copy b{ color:var(--bone); } .app__stores{ display:flex; gap:.8rem; margin-top:1.8rem; flex-wrap:wrap; } .store{ display:inline-flex; align-items:center; gap:.7rem; padding:.7rem 1.1rem; border:1px solid var(--line-2); border-radius:12px; color:var(--bone); transition:border-color .25s, transform .25s var(--ease), background .25s; } .store:hover{ border-color:var(--bone); transform:translateY(-2px); background:var(--ink-3); } .store svg{ color:var(--bone); } .store span{ display:flex; flex-direction:column; font-size:.66rem; color:var(--muted); line-height:1.2; letter-spacing:.04em; } .store b{ font-family:var(--disp); font-weight:600; font-size:1rem; color:var(--bone); letter-spacing:-.01em; } /* phone mock (abstract, honest — not a fake screenshot) */ .app__mock{ display:flex; justify-content:center; } .phone{ width:min(300px,80vw); aspect-ratio:9/18.5; border-radius:38px; position:relative; background:linear-gradient(160deg, color-mix(in srgb, var(--ink) 62%, #000), var(--ink-3)); padding:12px; border:1px solid var(--line-2); box-shadow:0 50px 90px -40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.03); } .phone__notch{ position:absolute; top:16px; left:50%; transform:translateX(-50%); width:36%; height:6px; background:#000; border-radius:99px; z-index:2; } .phone__scr{ height:100%; border-radius:28px; background:radial-gradient(120% 60% at 50% 0%,var(--glow-1),transparent 60%),var(--ink); padding:2.2rem 1.2rem 1.2rem; overflow:hidden; } .phone__top{ display:flex; align-items:center; gap:.5rem; } .phone__top img{ width:20px; height:20px; } .phone__top span{ font-family:var(--disp); font-weight:600; font-size:.9rem; } .phone__k{ font-family:var(--mono); font-size:.56rem; letter-spacing:.2em; color:var(--muted); margin-top:1.3rem; } .phone__goal{ font-family:var(--disp); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; } .phone__bar{ height:8px; border-radius:99px; background:var(--ink-4); overflow:hidden; margin:.7rem 0 .5rem; } .phone__bar span{ display:block; height:100%; width:var(--v); background:linear-gradient(90deg,var(--red),var(--accent2)); border-radius:99px; } .phone__meta{ font-size:.72rem; color:var(--bone-dim); } .phone__chart{ position:relative; display:flex; align-items:flex-end; gap:6px; height:82px; margin:1.2rem 0 1rem; } .phone__chart i{ flex:1; height:var(--h); background:linear-gradient(180deg, color-mix(in srgb,var(--accent2) 88%, transparent), color-mix(in srgb,var(--accent2) 34%, transparent)); border-radius:4px 4px 0 0; } .phone__line{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .phone__line path{ filter:drop-shadow(0 0 6px rgba(232,22,27,.5)); } .phone__rows{ display:grid; gap:.45rem; } .phone__rows span{ display:flex; justify-content:space-between; font-size:.74rem; color:var(--bone-dim); padding:.5rem .7rem; background:var(--ink-3); border-radius:9px; } .phone__rows b{ color:var(--accent2-hi); font-weight:500; } /* ========================================================= REZERVACE / BOOKER ========================================================= */ .book{ background:var(--ink-2); border-top:1px solid var(--line); } .booker{ background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.4rem,3vw,2.6rem); max-width:820px; box-shadow:0 40px 100px -50px rgba(0,0,0,.9); } .steps{ display:flex; gap:.4rem; margin-bottom:2rem; flex-wrap:wrap; } .steps li{ display:flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted); flex:1; min-width:120px; } .steps li span{ width:24px; height:24px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; font-size:.72rem; flex:none; transition:.3s; } .steps li.is-on{ color:var(--bone); } .steps li.is-on span{ background:var(--red); border-color:var(--red); color:#fff; } .steps li.is-done span{ background:var(--accent2); border-color:var(--accent2); color:var(--ink); } .bform{ position:relative; } .pane{ border:0; padding:0; margin:0; min-width:0; display:none; animation:paneIn .4s var(--ease); } .pane.is-active{ display:block; } @keyframes paneIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } .pane__lg{ font-family:var(--disp); font-weight:600; font-size:1.3rem; letter-spacing:-.02em; color:var(--bone); padding:0; } .pane__sub{ color:var(--bone-dim); font-size:.92rem; margin-top:.4rem; } .pane__nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.8rem; flex-wrap:wrap; } .pane__hint{ font-size:.82rem; color:var(--muted); } /* type cards */ .types{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.8rem; margin-top:1.4rem; } .type{ position:relative; padding:1.2rem; border:1px solid var(--line-2); border-radius:14px; background:var(--ink-2); cursor:pointer; transition:border-color .25s, background .25s, transform .25s var(--ease); display:flex; flex-direction:column; gap:.4rem; height:100%; } .type:hover{ border-color:var(--bone-dim); transform:translateY(-3px); } .type.is-sel{ border-color:var(--red); background:linear-gradient(180deg,rgba(232,22,27,.12),transparent); box-shadow:0 0 0 1px var(--red) inset; } .type__tick{ position:absolute; top:.9rem; right:.9rem; width:20px; height:20px; border-radius:50%; border:1px solid var(--line-2); transition:.25s; } .type.is-sel .type__tick{ background:var(--red); border-color:var(--red); } .type.is-sel .type__tick::after{ content:""; position:absolute; left:6px; top:3px; width:5px; height:9px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(40deg); } .type__ic{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:var(--red-2); } .type__n{ font-family:var(--disp); font-weight:600; font-size:1.05rem; letter-spacing:-.01em; color:var(--bone); padding-right:1.5rem; } .type__d{ font-size:.82rem; color:var(--bone-dim); } .type__dur{ font-family:var(--mono); font-size:.7rem; color:var(--muted); margin-top:auto; padding-top:.4rem; } /* days + slots */ .days{ display:flex; gap:.5rem; overflow-x:auto; padding:.3rem .1rem 1rem; margin-top:1.2rem; scrollbar-width:thin; scroll-snap-type:x mandatory; } .day{ flex:none; min-width:78px; padding:.7rem .5rem; border:1px solid var(--line-2); border-radius:12px; background:var(--ink-2); cursor:pointer; text-align:center; scroll-snap-align:start; transition:border-color .2s, background .2s, transform .2s var(--ease); } .day:hover{ border-color:var(--bone-dim); } .day.is-sel{ border-color:var(--red); background:linear-gradient(180deg,rgba(232,22,27,.14),transparent); } .day__dow{ display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .day__d{ display:block; font-family:var(--disp); font-weight:700; font-size:1.35rem; color:var(--bone); line-height:1.1; } .day__mo{ display:block; font-size:.68rem; color:var(--bone-dim); } .day.is-sel .day__dow{ color:var(--red-2); } .slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:.5rem; margin-top:.4rem; } .slots:empty::before{ content:"Vyberte nejdřív den."; grid-column:1/-1; color:var(--muted); font-size:.88rem; padding:.4rem 0; } .slot{ padding:.7rem .4rem; border:1px solid var(--line-2); border-radius:10px; background:var(--ink-2); font-family:var(--mono); font-size:.88rem; color:var(--bone); cursor:pointer; transition:border-color .2s, background .2s, transform .18s var(--ease); } .slot:hover:not(:disabled){ border-color:var(--bone-dim); transform:translateY(-2px); } .slot.is-sel{ border-color:var(--red); background:var(--red); color:#fff; } .slot:disabled{ opacity:.28; cursor:not-allowed; text-decoration:line-through; } /* fields */ .fields{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.1rem; margin-top:1.4rem; } .fld{ display:flex; flex-direction:column; gap:.4rem; } .fld--full{ grid-column:1/-1; } .fld span{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim); } .fld span i{ font-style:normal; color:var(--muted); text-transform:none; letter-spacing:0; } .fld input,.fld textarea{ font-family:var(--sans); font-size:1rem; color:var(--bone); background:var(--ink-2); border:1px solid var(--line-2); border-radius:10px; padding:.8rem .9rem; transition:border-color .2s, background .2s; resize:vertical; } .fld input::placeholder,.fld textarea::placeholder{ color:var(--muted); } .fld input:focus,.fld textarea:focus{ border-color:var(--accent2); background:var(--ink); outline:none; } .fld.is-err input,.fld.is-err textarea{ border-color:var(--red); background:rgba(232,22,27,.06); } .err{ font-style:normal; font-size:.78rem; color:var(--red-2); min-height:1em; } .recap{ margin-top:1.4rem; padding:1rem 1.2rem; border:1px dashed var(--line-2); border-radius:12px; display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.9rem; color:var(--bone-dim); } .recap b{ color:var(--bone); font-family:var(--disp); } .recap span{ display:flex; flex-direction:column; gap:.15rem; } .recap i{ font-style:normal; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } /* confirmation */ .pane--done.is-active{ text-align:center; padding:1rem 0; } .done__mark{ width:66px; height:66px; margin:0 auto 1.2rem; border-radius:50%; background:linear-gradient(150deg,var(--red),var(--red-deep)); display:grid; place-items:center; box-shadow:0 16px 40px -14px rgba(232,22,27,.7); } .done__mark svg{ width:30px; height:30px; } .done__mark path{ stroke-dasharray:40; stroke-dashoffset:40; animation:draw .5s var(--ease) .15s forwards; } .done h3{ font-family:var(--disp); font-weight:700; font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem); letter-spacing:-.02em; color:var(--bone); } .done__p{ color:var(--bone-dim); margin:.6rem auto 1.6rem; max-width:44ch; } .done__card{ display:inline-flex; flex-direction:column; gap:.9rem; text-align:left; padding:1.4rem 1.6rem; border:1px solid var(--line-2); border-radius:14px; background:var(--ink-2); min-width:min(360px,90%); } .done__row{ display:flex; justify-content:space-between; gap:1.4rem; align-items:baseline; } .done__row i{ font-style:normal; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .done__row b{ font-family:var(--disp); font-weight:600; color:var(--bone); text-align:right; } .done__id{ font-family:var(--mono); font-size:.8rem; color:var(--accent2-hi); } .done__again{ margin-top:1.6rem; } .done__again button{ font-family:var(--disp); font-weight:600; color:var(--bone-dim); background:none; border:0; text-decoration:underline; text-underline-offset:3px; } .done__again button:hover{ color:var(--bone); } .form-flash{ margin-top:1rem; font-size:.86rem; color:var(--red-2); min-height:1em; } /* ========================================================= FOOTER ========================================================= */ .foot{ background:var(--ink); border-top:1px solid var(--line); padding-block:clamp(3.5rem,6vw,5.5rem) 0; } .foot__grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(2rem,4vw,3.5rem); padding-bottom:3rem; } .foot__brand img{ width:52px; height:52px; object-fit:contain; } .foot__claim{ font-family:var(--disp); font-weight:600; font-size:1.25rem; letter-spacing:-.02em; color:var(--bone); margin:1.1rem 0; max-width:22ch; } .certs--foot{ border:0; padding:0; } .foot__h{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:1.1rem; } .foot__big{ display:block; font-family:var(--disp); font-weight:600; font-size:1.2rem; letter-spacing:-.02em; color:var(--bone); margin-bottom:.5rem; transition:color .2s; } .foot__big:hover{ color:var(--red-2); } .foot__addr{ color:var(--bone-dim); font-size:.92rem; margin-top:1rem; } .foot__addr span{ color:var(--muted); font-size:.8rem; } .foot__nav{ display:flex; flex-direction:column; gap:.5rem; } .foot__nav a{ color:var(--bone-dim); font-size:.94rem; width:max-content; transition:color .2s; } .foot__nav a:hover{ color:var(--bone); } .social{ display:flex; gap:.6rem; margin-top:1.4rem; } .social a{ width:38px; height:38px; border:1px solid var(--line-2); border-radius:10px; display:grid; place-items:center; color:var(--bone-dim); transition:.25s var(--ease); } .social a:hover{ color:#fff; border-color:var(--red); background:var(--red); transform:translateY(-2px); } .foot__bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1.5rem; border-top:1px solid var(--line); font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--muted); } /* ========================================================= REVEAL animation ========================================================= */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* ========================================================= EFEKTY (awwwards, decentní) ========================================================= */ /* filmové zrno přes celý web — potlačí „placatý gradient" dojem */ .grain{ position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.055; mix-blend-mode:overlay; background: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") repeat; background-size:200px 200px; } /* hero nadpis — náběh po řádcích */ .hero__h1 span{ animation:heroRise .95s var(--ease) backwards; } .hero__h1 span:nth-child(1){ animation-delay:.12s; } .hero__h1 span:nth-child(2){ animation-delay:.26s; } .hero__h1 span:nth-child(3){ animation-delay:.40s; } @keyframes heroRise{ from{ opacity:0; transform:translateY(30px); filter:blur(7px); } to{ opacity:1; transform:none; filter:blur(0); } } /* portrét — clip reveal při scrollu */ .about__media.reveal .about__img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease); } .about__media.reveal.in .about__img{ clip-path:inset(0 0 0 0); } /* počítadlo */ .count{ font-variant-numeric:tabular-nums; } /* magnetická tlačítka — jemný posun k kurzoru (řídí JS) */ .btn.is-magnetic{ will-change:transform; } /* ========================================================= REZERVACE — dočasně zavřeno (cover) ========================================================= */ .bookwrap{ position:relative; } .bookwrap.is-closed .booker{ filter:blur(4px) saturate(.85); opacity:.42; pointer-events:none; user-select:none; } .book__cover{ position:absolute; inset:0; z-index:5; display:none; flex-direction:column; align-items:flex-start; justify-content:center; gap:.35rem; padding:clamp(1.6rem,4vw,3rem); border:1px solid var(--line-2); border-radius:var(--r); background:color-mix(in srgb, var(--ink) 55%, transparent); backdrop-filter:blur(3px); } .bookwrap.is-closed .book__cover{ display:flex; } .book__cover-h{ font-family:var(--disp); font-weight:700; font-size:clamp(1.45rem,1.1rem + 1.6vw,2.25rem); letter-spacing:-.02em; color:var(--bone); max-width:22ch; } .book__cover-p{ color:var(--bone-dim); max-width:42ch; margin-top:.3rem; } .book__cover-act{ display:flex; gap:.8rem; margin-top:1.4rem; flex-wrap:wrap; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1180px){ :root{ --rail:72px; } .axis__lbl{ display:none; } } @media (max-width:1024px){ .hero__grid{ grid-template-columns:1fr; } .hero__media{ min-height:auto; order:-1; max-width:520px; } .hero__img{ max-height:56vh; } .hero__chip{ left:0; } .about__grid,.pfp__grid,.app__grid{ grid-template-columns:1fr; gap:2.5rem; } .pfp__stat{ order:-1; } .app__mock{ order:-1; } .revs__masonry{ columns:2; } } @media (max-width:900px){ :root{ --rail:0px; } .axis{ display:none; } .topbar{ display:block; } .nav{ position:fixed; inset:0 0 0 auto; width:min(320px,84vw); flex-direction:column; gap:.4rem; justify-content:center; padding:2rem; background:var(--ink-2); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .4s var(--ease); z-index:100; } .nav.is-open{ transform:none; box-shadow:-30px 0 80px -30px rgba(0,0,0,.9); } .nav a{ font-size:1.3rem; font-family:var(--disp); font-weight:600; color:var(--bone); padding:.5rem 0; } .burger{ display:flex; } .tel{ display:none; } .scrollcue{ display:none; } .hero__grid{ padding-top:6rem; min-height:auto; } .hero{ min-height:auto; } } @media (max-width:680px){ .serv__grid{ grid-template-columns:1fr; } .types{ grid-template-columns:1fr; } .fields{ grid-template-columns:1fr; } .ticks--2{ grid-template-columns:1fr; } .revs__masonry{ columns:1; } .rev{ padding:1.1rem 1.2rem; margin-bottom:.9rem; } .rev p{ font-size:.9rem; line-height:1.55; } .rev p::before{ font-size:1.9rem; } .rev footer{ margin-top:.85rem; font-size:.86rem; } .rev__av{ width:30px; height:30px; } .revs__masonry .rev:nth-child(n+5){ display:none; } /* na mobilu jen 4 recenze */ .sechead--row{ align-items:flex-start; } .foot__grid{ grid-template-columns:1fr; } .hero__chip{ left:0; } .certs{ padding-left:0; border-left:0; } .manifest__ghost{ display:none; } .steps li{ min-width:0; } .steps li span{ width:22px; height:22px; } } @media (max-width:400px){ .steps li:not(.is-on){ display:none; } .steps li.is-on{ flex:1; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } #heroArw,#heroHead,.hero__neg-t::after,.done__mark path{ animation:none; stroke-dashoffset:0; transform:none; } .hero__neg-t::after{ transform:scaleX(1); } .scrollcue span::after{ display:none; } .hero__h1 span{ animation:none; opacity:1; transform:none; filter:none; } .about__media.reveal .about__img{ clip-path:none; transition:none; } }