/* ========================================================================== VEXA STUDIO — main.css 1. Tokeny 2. Font 3. Základ 4. Layout 5. Typografie 6. Komponenty 7. Hlavička 8. Boční ukazatel 9. Patička 10. Sekce 11. Podstránky 12. Animace hera 13. Animace formuláře 14. Pohyb a reveal 15. Tisk Třídy: BEM (blok__prvek--modifikátor) ========================================================================== */ /* 1. TOKENY =============================================================== */ :root { --ink: #0B1020; --ink-2: #161E33; --paper: #F3F4F7; --white: #FFFFFF; --blue: #1F4AFA; /* na bílé 6.1:1 */ --blue-hover: #1638C9; --blue-soft: #E4E9FF; --blue-on-dark: #8DA2FF; /* na ink 7.4:1 */ --muted: #4A5368; /* na paper 7.6:1 */ --muted-2: #5B6478; --muted-on-dark: #A9B1C6; --line: #E1E4EC; --line-2: #C9CFDC; --line-dark: rgba(255, 255, 255, .2); --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; --fs-xs: .75rem; --fs-sm: .9375rem; --fs-base: 1.0625rem; --fs-lg: clamp(1.1875rem, 1.05rem + .5vw, 1.5rem); --fs-h3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); --fs-h2: clamp(2.5rem, 1.6rem + 3.6vw, 5.5rem); --fs-h2-sm: clamp(2.25rem, 1.7rem + 2.2vw, 4rem); --fs-display: clamp(3.5rem, 1.2rem + 9.6vw, 11.25rem); --gutter: clamp(1.25rem, 4vw, 3.5rem); --container: 1440px; --section-y: clamp(6rem, 4rem + 6vw, 9.5rem); --header-h: 5rem; --ease: cubic-bezier(.2, .7, .2, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --dur: .45s; --grid-size: 96px; } /* 2. FONT ================================================================= */ @font-face { font-family: "Manrope"; src: url("../fonts/manrope-var.woff") format("woff"); font-weight: 200 800; font-style: normal; font-display: swap; } /* 3. ZÁKLAD =============================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: var(--font); font-size: var(--fs-base); font-weight: 500; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } img, video { height: auto; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-weight: 800; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; } p { text-wrap: pretty; } ul[class], ol[class] { list-style: none; padding: 0; } ::selection { background: var(--blue); color: var(--white); } :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } .section--ink :focus-visible, .site-footer :focus-visible { outline-color: var(--blue-on-dark); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: .75rem 1rem; background: var(--ink); color: var(--white); font-weight: 700; text-decoration: none; } .skip-link:focus { top: 1rem; } /* 4. LAYOUT =============================================================== */ .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); position: relative; } .section--white { background: var(--white); } .section--white:has(+ .section--white) { padding-bottom: calc(var(--section-y) * .55); } .section--white + .section--white { padding-top: 0; } .section--ink { background: var(--ink); color: var(--white); } .grid-bg { background-color: var(--paper); background-image: linear-gradient(rgba(11, 16, 32, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 16, 32, .06) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); } .section--line-top { border-top: 1px solid var(--line); } .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; margin-bottom: clamp(3rem, 5vw, 4.5rem); } .section-head__title { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.045em; } .section-head__title--sm { font-size: var(--fs-h2-sm); } .section-head__lead { font-size: 1.125rem; line-height: 1.55; color: var(--muted); max-width: 40ch; } .section--ink .section-head__lead { color: var(--muted-on-dark); } /* 5. TYPOGRAFIE =========================================================== */ .mono { font-family: var(--mono); } .eyebrow { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); } .section--ink .eyebrow { color: var(--blue-on-dark); } .lead { font-size: var(--fs-lg); line-height: 1.45; font-weight: 600; } .text-muted { color: var(--muted); } /* 6. KOMPONENTY =========================================================== */ /* --- Tlačítka. Seříznutý roh = SVG trojúhelník barvy pozadí (hladká hrana) */ .btn { --cut-bg: var(--paper); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 4rem; padding: 0 2.25rem 0 2.125rem; background: var(--blue); color: var(--white); font-weight: 800; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; border: 0; cursor: pointer; transition: background-color .3s var(--ease); } .btn:hover { background: var(--blue-hover); color: var(--white); } .btn__arrow { width: 1.125rem; height: 1.125rem; flex: none; transition: transform .3s var(--ease); } .btn:hover .btn__arrow { transform: translateX(4px); } .btn__cut { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 19px; color: var(--cut-bg); pointer-events: none; } .section--white .btn { --cut-bg: var(--white); } .section--ink .btn { --cut-bg: var(--ink); } .btn--dark { background: var(--ink); } .btn--dark:hover { background: var(--ink-2); } .btn--outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: 0 1.75rem; } .btn--outline:hover { background: var(--ink); color: var(--white); } .section--ink .btn--outline { color: var(--white); border-color: rgba(255,255,255,.6); } .section--ink .btn--outline:hover { background: var(--white); color: var(--ink); } .btn--sm { min-height: 3rem; padding: 0 1.5rem; font-size: .9375rem; } .btn-group { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } /* --- Podtržený odkaz se šipkou */ .link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 3px; transition: background-size .4s var(--ease), color .3s; } .link:hover { background-size: 100% 2px; } .link--solid { background-size: 100% 2px; } .link--solid:hover { color: var(--blue); } .link svg { width: .95rem; height: .95rem; transition: transform .3s var(--ease); } .link:hover svg { transform: translateX(3px); } /* --- DOPLNIT: viditelné označení chybějících dat */ .todo { display: inline; padding: .05em .35em; font-family: var(--mono); font-size: .82em; font-weight: 600; letter-spacing: 0; color: #5A3B00; background: #FFE8A3; outline: 1px dashed #B07800; outline-offset: -1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* --- Logo: znak + kreslený nápis + WEB STUDIO */ /* znak má těsný viewBox, takže jeho výška přesně odpovídá bloku textu vedle */ .logo { display: inline-flex; align-items: center; gap: .875rem; color: var(--ink); text-decoration: none; } .logo__mark { width: auto; height: 31px; margin-bottom: 1px; aspect-ratio: 119 / 87; shape-rendering: geometricPrecision; flex: none; color: var(--blue); } .logo__text { display: block; line-height: 0; } .logo__word { width: 6.5rem; height: auto; aspect-ratio: 318 / 50; overflow: visible; color: currentColor; } .site-footer .logo { color: var(--white); } /* --- Štítky */ .tags { display: flex; flex-wrap: wrap; gap: .375rem 1rem; } .tags li { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); } /* --- Okno prohlížeče pro reference (místo pro screenshot / video) */ .browser { background: var(--white); border: 1px solid #D5D9E3; box-shadow: 0 30px 60px -30px rgba(11, 16, 32, .25); } .browser__bar { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; border-bottom: 1px solid var(--line); } .browser__dots { display: flex; gap: 6px; } .browser__dots span { width: 9px; height: 9px; border-radius: 50%; background: #D5D9E3; } .browser__url { display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .625rem; background: var(--paper); font-family: var(--mono); font-size: .6875rem; color: var(--muted-2); } .browser__live { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); } .browser__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #EEF0F4; } .browser__view picture { display: block; width: 100%; height: 100%; } .browser__view img, .browser__view video { width: 100%; height: 100%; object-fit: cover; object-position: top; } /* Dlouhý screenshot celé stránky, který se pomalu posouvá (třída is-scroll na ) */ .browser__view .is-scroll { height: auto; object-fit: initial; } .browser__placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; text-align: center; } /* --- Místo pro fotku */ .photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #EEF0F4; } .photo img { width: 100%; height: 100%; object-fit: cover; } .photo .todo { position: absolute; left: 1rem; bottom: 1rem; } /* 7. HLAVIČKA ============================================================= */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(243, 244, 247, .82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .site-header.is-scrolled { border-bottom-color: var(--line); background: rgba(255, 255, 255, .9); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); } .site-header__actions { display: flex; align-items: center; gap: .75rem; } .nav__list { display: flex; flex-direction: column; } .nav__link { position: relative; display: block; font-weight: 700; text-decoration: none; color: var(--ink); } .nav__link[aria-current="page"] { color: var(--blue); } .lang-switch { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding-inline: .5rem; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; text-decoration: none; color: var(--ink); } .lang-switch__current { color: var(--muted-2); } .lang-switch__sep { width: 1px; height: 1em; background: var(--line-2); } .lang-switch:hover .lang-switch__other { color: var(--blue); } .nav-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; background: none; border: 0; cursor: pointer; } .nav-toggle__bars { position: relative; width: 22px; height: 14px; } .nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); } .nav-toggle__bars span:nth-child(1) { top: 0; } .nav-toggle__bars span:nth-child(2) { top: 6px; width: 70%; } .nav-toggle__bars span:nth-child(3) { top: 12px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1023.98px) { .site-header__cta { display: none; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; padding: 1rem var(--gutter) 2rem; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px -24px rgba(11, 16, 32, .25); } .js .nav:not(.is-open) { display: none; } .nav.is-open { animation: nav-in .3s var(--ease); } .nav__item { border-bottom: 1px solid var(--line); } .nav__link { padding: 1rem 0; font-size: 1.375rem; letter-spacing: -.02em; } .nav__cta { margin-top: 1.5rem; width: 100%; } .no-js .nav-toggle { display: none; } .no-js .nav { position: static; box-shadow: none; } } @keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (min-width: 1024px) { .nav-toggle, .nav__cta { display: none; } .nav__list { flex-direction: row; gap: 2rem; } .nav__link { padding: .5rem 0; font-size: var(--fs-sm); } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); } } /* 8. BOČNÍ UKAZATEL ======================================================= */ .side-nav { position: fixed; right: 1.125rem; top: 50%; z-index: 40; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 1.25rem; } .side-nav__row { display: flex; gap: .75rem; align-items: stretch; } .side-nav__list { display: grid; gap: .875rem; } .side-nav__link { position: relative; display: block; padding: .125rem 0; font-family: var(--mono); font-size: .6875rem; font-weight: 700; line-height: 1.2; color: var(--ink); text-decoration: none; opacity: .55; transition: opacity .3s var(--ease), color .3s var(--ease); } .side-nav__link:hover, .side-nav__link.is-active { opacity: 1; } .side-nav__link.is-active { color: var(--blue); } /* nad tmavou sekcí dá JS číslu třídu is-on-dark */ .side-nav__link.is-on-dark { color: var(--white); } .side-nav__link.is-on-dark.is-active { color: var(--blue-on-dark); } .side-nav__label { position: absolute; right: calc(100% + .625rem); top: 50%; transform: translate(6px, -50%); white-space: nowrap; opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease); } .side-nav__link:hover .side-nav__label, .side-nav__link:focus-visible .side-nav__label { opacity: 1; transform: translate(0, -50%); } .side-nav__track { position: relative; width: 2px; background: rgba(128, 136, 160, .5); } .side-nav__bar { position: absolute; inset: 0; background: var(--blue); transform-origin: top; transform: scaleY(var(--progress, 0)); } /* jediná sekce na stránce: místo dalšího čísla jen tečka zpět nahoru */ .side-nav__top { display: grid; place-items: center; width: 1.625rem; height: 1.625rem; flex: none; border: 1.5px solid rgba(128, 136, 160, .5); border-radius: 50%; color: var(--ink); text-decoration: none; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .side-nav__top.is-visible { opacity: .55; transform: none; pointer-events: auto; } .side-nav__top:hover, .side-nav__top:focus-visible { opacity: 1; border-color: var(--blue); color: var(--blue); } .side-nav__top.is-on-dark { color: var(--white); border-color: rgba(255, 255, 255, .4); } .side-nav__top.is-on-dark:hover, .side-nav__top.is-on-dark:focus-visible { color: var(--blue-on-dark); border-color: var(--blue-on-dark); } .side-nav__top svg { width: 12px; height: 12px; } .side-nav__top .side-nav__label { right: calc(100% + .625rem); } @media (max-width: 1279.98px) { .side-nav { display: none; } } /* 9. PATIČKA ============================================================== */ .site-footer { background: var(--ink); color: var(--muted-on-dark); font-size: var(--fs-sm); padding-block: 5rem 2rem; } .site-footer a { color: var(--white); text-decoration: none; } .site-footer a:hover { color: var(--blue-on-dark); } .site-footer__grid { display: grid; gap: 3rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1080px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } } .site-footer__claim { margin-top: 1.25rem; max-width: 32ch; text-wrap: balance; } .site-footer__title { margin-bottom: 1rem; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--white); } .site-footer__list { display: grid; gap: .5rem; } .site-footer address { font-style: normal; display: grid; gap: .5rem; } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); font-size: var(--fs-xs); } .site-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; } /* 10. SEKCE =============================================================== */ /* --- Hero */ .hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(7rem, 11vw, 10.5rem); } .hero__title { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.055em; } .hero__title em { font-style: normal; color: var(--blue); } .hero__grid { margin-top: clamp(3.5rem, 6vw, 6rem); display: grid; gap: 4.5rem; align-items: start; } @media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } } .hero__intro { padding-top: 2rem; border-top: 4px solid var(--ink); } .hero__lead { max-width: 26ch; } .hero__actions { margin-top: 2.25rem; } /* --- Služby (řádky) */ .svc-list { border-top: 1px solid var(--line-dark); } .svc-row { border-bottom: 1px solid var(--line-dark); transition: background-color .35s var(--ease); } .svc-row__link { display: grid; grid-template-columns: 2.5rem 3.5rem minmax(0, 1.3fr) minmax(0, 1fr) 3.5rem; gap: 1.5rem; align-items: center; padding: 2.125rem 1.25rem; color: var(--white); text-decoration: none; } .svc-row__num { font-family: var(--mono); font-size: .875rem; font-weight: 700; color: var(--blue-on-dark); } .svc-row__icon { width: 3.5rem; height: 3.5rem; color: var(--blue-on-dark); fill: none; stroke: currentColor; stroke-width: 2; } .svc-row__title { font-size: clamp(1.875rem, 1rem + 3vw, 3.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; } .svc-row__text { color: var(--muted-on-dark); line-height: 1.55; } .svc-row__arrow { justify-self: end; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 1px solid rgba(255,255,255,.4); transform: translateX(-8px); transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s; } .svc-row__arrow svg { width: 1.25rem; height: 1.25rem; } .svc-row:hover { background: var(--blue); } .svc-row:hover .svc-row__num, .svc-row:hover .svc-row__text, .svc-row:hover .svc-row__icon { color: var(--white); } .svc-row:hover .svc-row__arrow { background: var(--white); color: var(--blue); border-color: var(--white); transform: none; } .svc-row:hover .svc-row__icon .d { stroke-dasharray: 1; animation: draw .9s var(--ease-io) both; } @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @media (max-width: 819.98px) { .svc-row__link { grid-template-columns: 3rem minmax(0, 1fr); gap: .75rem 1rem; padding: 1.75rem .5rem; } .svc-row__num { display: none; } .svc-row__icon { width: 2.75rem; height: 2.75rem; grid-row: span 2; } .svc-row__arrow { display: none; } } /* --- Reference */ .work-feature { display: grid; gap: 2.5rem 3.5rem; align-items: center; padding-bottom: 4.5rem; border-bottom: 1px solid var(--line); } @media (min-width: 1000px) { .work-feature { grid-template-columns: 2fr 1fr; } .work-feature--flip { grid-template-columns: 1fr 2fr; } .work-feature--flip .browser { order: 2; } } .work-feature + .work-feature { padding-top: 4.5rem; } .work-feature:last-child { border-bottom: 0; padding-bottom: 0; } .work-grid { margin-top: 4.5rem; display: grid; gap: 3.5rem 2.5rem; } @media (min-width: 860px) { .work-grid { grid-template-columns: 1fr 1fr; } } .work-card { display: grid; gap: 1.5rem; align-content: start; } .work-card .browser, .work-feature .browser { transition: transform .5s var(--ease); } .work-card:hover .browser, .work-feature:hover .browser { transform: translateY(-6px); } .work-card__body { display: grid; gap: .625rem; } .work-card__title { font-size: 1.875rem; letter-spacing: -.035em; line-height: 1.15; } .work-card__title a { text-decoration: none; transition: color .3s; } .work-card:hover .work-card__title a, .work-feature:hover .work-card__title a { color: var(--blue); } .work-feature .work-card__title { font-size: clamp(2rem, 1.4rem + 1.5vw, 2.75rem); } .work-card__text { color: var(--muted); line-height: 1.6; max-width: 44ch; } /* --- Postup (časová osa) */ .steps { display: grid; gap: 3rem 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: step; } .step { position: relative; padding: 2.75rem 2rem 0 0; } .step::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--ink); } .step__fill { --sf-0: scaleX(0); position: absolute; top: 8px; left: 0; right: 0; height: 4px; background: var(--blue); transform: var(--sf-0); transform-origin: left; } .step__node { position: absolute; top: 2px; left: 0; width: 16px; height: 16px; border: 2px solid var(--ink); background: var(--white); } .step__head { display: flex; align-items: center; gap: .75rem; } .step__num { font-family: var(--mono); font-size: .8125rem; font-weight: 700; color: var(--blue); } .step__title { font-size: 1.375rem; letter-spacing: -.025em; } .step__text { margin-top: .75rem; font-size: var(--fs-sm); color: var(--muted); max-width: 30ch; } .step__out { margin-top: 1.125rem; display: flex; gap: .625rem; align-items: baseline; font-size: .875rem; font-weight: 700; line-height: 1.4; } .step__out svg { flex: none; width: 14px; height: 14px; transform: translateY(2px); color: var(--blue); } /* --- Lidé */ .people { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); } .person { display: grid; gap: 1.25rem; align-content: start; } .person__head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding-bottom: .875rem; border-bottom: 2px solid var(--ink); } .person__name { font-size: 1.625rem; letter-spacing: -.03em; } .person__role { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); text-align: right; } .person__text { color: var(--muted); } .contact-card { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; padding: 2.25rem; background: var(--ink); color: var(--white); } .contact-card__label { display: flex; align-items: center; gap: .625rem; } .contact-card__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-on-dark); } .contact-card__claim { margin-top: 1.25rem; font-size: 1.75rem; font-weight: 800; line-height: 1.2; letter-spacing: -.03em; } .contact-card__links { display: grid; gap: .375rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); } .contact-card__links a { justify-self: start; color: var(--white); } .contact-card__mail { font-size: 1.25rem; } .contact-card__tel { margin-top: .5rem; color: var(--muted-on-dark); font-size: var(--fs-sm); } /* --- CTA */ .cta__grid { display: grid; gap: 5rem; align-items: center; } @media (min-width: 1000px) { .cta__grid { grid-template-columns: 1fr 1fr; } } .cta__title { font-size: clamp(3.25rem, 1.6rem + 5vw, 6.75rem); line-height: 1.05; letter-spacing: -.05em; } .cta__title em { font-style: normal; color: var(--blue); } .cta__text { margin-top: 2rem; font-size: 1.25rem; line-height: 1.5; color: var(--muted); max-width: 36ch; } .cta__actions { margin-top: 2.25rem; gap: 1rem 1.75rem; } .cta__alt { color: var(--muted); } /* 11. PODSTRÁNKY ========================================================== */ .page-head { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4rem, 7vw, 6.5rem); } .page-head__title { margin-top: 1.25rem; font-size: clamp(3rem, 1.4rem + 6vw, 8rem); line-height: 1.04; letter-spacing: -.055em; } .page-head__title em { font-style: normal; color: var(--blue); } .page-head__lead { margin-top: 2rem; padding-top: 1.75rem; border-top: 4px solid var(--ink); max-width: 34ch; } /* --- Detail služby */ .svc-detail { display: grid; gap: 2.5rem 4rem; padding-block: clamp(3.5rem, 6vw, 5.5rem); border-top: 1px solid var(--line); } .svc-detail:first-child { border-top: 0; padding-top: 0; } @media (min-width: 960px) { .svc-detail { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1fr); } } .svc-detail__icon { width: 4.5rem; height: 4.5rem; color: var(--blue); fill: none; stroke: currentColor; stroke-width: 2; } .svc-detail__title { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); letter-spacing: -.045em; } .svc-detail__text { margin-top: 1.25rem; font-size: 1.125rem; color: var(--muted); max-width: 40ch; } .checklist { display: grid; gap: .875rem; } .checklist li { position: relative; padding-left: 2rem; line-height: 1.5; } .checklist li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 10px; background: var(--blue); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); } .svc-detail__aside { display: grid; gap: 1.5rem; align-content: start; } .svc-detail__label { margin-bottom: .875rem; } .note { padding: 1.25rem 1.375rem; background: var(--blue-soft); } .note p + p { margin-top: .375rem; } /* --- Detail reference */ .case { display: grid; gap: 3rem; padding-block: clamp(4rem, 7vw, 6rem); border-top: 1px solid var(--line); } .case:first-child { border-top: 0; padding-top: 0; } .case__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; } .case__title { margin-top: .75rem; font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); letter-spacing: -.05em; } .case__grid { display: grid; gap: 2.5rem 4rem; } @media (min-width: 960px) { .case__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .case__block h3 { margin-bottom: .75rem; } .case__block p, .case__block li { color: var(--muted); } /* --- Zásady práce (O nás) */ .values { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); } .value { padding: 2rem 1.75rem 2.25rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--white); } .value__num { font-family: var(--mono); font-size: .8125rem; font-weight: 700; color: var(--blue); } .value__title { margin-top: 2.5rem; font-size: 1.5rem; letter-spacing: -.03em; } .value__text { margin-top: .625rem; color: var(--muted); font-size: var(--fs-sm); } /* --- Kontaktní formulář */ .contact { display: grid; gap: 4rem; align-items: start; } @media (min-width: 1000px) { .contact { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } } .form { display: grid; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--white); border: 2px solid var(--ink); box-shadow: 16px 16px 0 var(--blue); } .form__row { display: grid; gap: 1.5rem; } @media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } } .field { display: grid; gap: .5rem; } .field__label { font-weight: 700; font-size: var(--fs-sm); } .field__label small { font-weight: 500; color: var(--muted-2); } .field__input { width: 100%; min-height: 3.25rem; padding: .75rem .875rem; background: var(--white); border: 2px solid var(--line-2); border-radius: 0; transition: border-color .25s var(--ease); } .field__input:hover { border-color: var(--muted-2); } .field__input:focus { outline: none; border-color: var(--blue); } textarea.field__input { min-height: 9rem; resize: vertical; } .field__error { font-size: .875rem; font-weight: 700; color: #B42318; } .choices { border: 0; padding: 0; display: grid; gap: .625rem; } .choices legend { margin-bottom: .5rem; font-weight: 700; font-size: var(--fs-sm); } .choices__list { display: flex; flex-wrap: wrap; gap: .5rem; } .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .choice span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 2px solid var(--line-2); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; transition: background-color .25s var(--ease), border-color .25s, color .25s; } .choice span:hover { border-color: var(--ink); } .choice input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); } .choice input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; } .form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__consent { font-size: .875rem; color: var(--muted); } .form .btn { --cut-bg: var(--white); justify-self: start; } .contact__aside { display: grid; gap: 2rem; } .contact__list { display: grid; gap: 1.5rem; } .contact__item { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line-2); } .contact__item .eyebrow { display: block; margin-bottom: .375rem; } .contact__big { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; } /* --- Text (zásady) */ .prose { max-width: 70ch; } .prose h2 { margin-top: 3rem; font-size: 1.75rem; } .prose h3 { margin-top: 2rem; font-size: 1.25rem; } .prose p, .prose ul { margin-top: 1rem; color: var(--muted); } .prose ul { padding-left: 1.25rem; } .prose li + li { margin-top: .375rem; } /* --- 404 / děkujeme */ .error-page { min-height: 62vh; display: grid; align-content: center; } .error-page__code { font-size: clamp(6rem, 3rem + 12vw, 13rem); font-weight: 800; line-height: .9; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--blue); } .error-page__title { margin-top: 1.5rem; font-size: var(--fs-h2-sm); } .error-page__text { margin-top: 1rem; max-width: 44ch; font-size: 1.125rem; color: var(--muted); } .error-page .btn-group { margin-top: 2rem; } /* 11b. PODSTRÁNKY v2 ====================================================== */ /* --- Hlavička podstránky s rozcestníkem */ .sub-head { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 7vw, 6rem); } .sub-head__grid { display: grid; gap: 3rem 4rem; align-items: end; } @media (min-width: 1000px) { .sub-head__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } } .sub-head__title { margin-top: 1.25rem; font-size: clamp(3rem, 1.4rem + 5.4vw, 7.5rem); line-height: 1.04; letter-spacing: -.055em; } .sub-head__title em { font-style: normal; color: var(--blue); } .sub-head__lead { margin-top: 2rem; max-width: 34ch; } /* dlaždice-odkazy na sekce (Služby): 2 × 2 a kruh uprostřed */ .jump { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); background: var(--white); } .jump__item { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-height: 11rem; padding: 1.25rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); text-decoration: none; transition: background-color .3s var(--ease), color .3s; } /* obsah vždy ve vnějším rohu, ať se nepotká s kruhem */ .jump__item--tr, .jump__item--br { align-items: flex-end; text-align: right; } .jump__item--tl, .jump__item--tr { flex-direction: column-reverse; } .jump__item:hover { background: var(--ink); color: var(--white); } .jump__icon { width: 2.5rem; height: 2.5rem; flex: none; color: var(--blue); fill: none; stroke: currentColor; stroke-width: 2; } .jump__item:hover .jump__icon, .jump__core:hover .jump__icon { color: var(--blue-on-dark); } .jump__item:hover .jump__icon .d, .jump__core:hover .jump__icon .d { stroke-dasharray: 1; animation: draw .9s var(--ease-io) both; } .jump__title { font-size: 1.25rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; max-width: 9ch; } .jump__core { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); display: grid; place-content: center; justify-items: center; gap: .5rem; width: 9.5rem; aspect-ratio: 1; padding: 1rem; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); text-align: center; text-decoration: none; transition: background-color .3s var(--ease), color .3s; } .jump__core:hover { background: var(--ink); color: var(--white); } .jump__core .jump__icon { width: 2.25rem; height: 2.25rem; } .jump__core-title { font-size: .9375rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; max-width: 8ch; } @media (max-width: 539.98px) { .jump__item { min-height: 10.75rem; padding: 1.125rem; } .jump__title { font-size: 1.1875rem; } .jump__item .jump__icon { width: 2.75rem; height: 2.75rem; } .jump__core { width: 8.25rem; } .jump__core .jump__icon { width: 2rem; height: 2rem; } .jump__core-title { font-size: .9rem; } } /* --- Služby: lepivý rejstřík + specifikace */ .svc-layout { display: grid; gap: 3rem; } @media (min-width: 1080px) { .svc-layout { grid-template-columns: 13rem minmax(0, 1fr); gap: 5rem; } } .svc-index { display: none; } @media (min-width: 1080px) { .svc-index { display: block; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } } .svc-index__list { display: grid; border-left: 2px solid var(--line); } .svc-index__link { display: flex; gap: .75rem; padding: .625rem 0 .625rem 1rem; margin-left: -2px; border-left: 2px solid transparent; font-weight: 700; font-size: var(--fs-sm); text-decoration: none; color: var(--muted-2); transition: color .3s, border-color .3s; } .svc-index__link span { font-family: var(--mono); color: var(--blue); } .svc-index__link:hover, .svc-index__link.is-active { color: var(--ink); border-left-color: var(--blue); } .spec { display: grid; gap: 2rem 5rem; align-items: start; padding-block: 0 clamp(3.5rem, 6vw, 5rem); } @media (min-width: 960px) { .spec { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } } .spec__list { padding-top: .75rem; } @media (min-width: 960px) { .spec__list { padding-top: .75rem; } } .deliver__title { margin-bottom: .875rem; font-size: 1rem; letter-spacing: -.01em; } .deliver { border-top: 2px solid var(--ink); counter-reset: none; } .deliver li { display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline; padding: .875rem 0; border-bottom: 1px solid var(--line-2); font-weight: 600; } .deliver__num { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; color: var(--blue); } .spec + .spec { padding-top: clamp(3.5rem, 6vw, 5rem); border-top: 1px solid var(--line); } .spec__head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; } .spec__icon { width: 3.5rem; height: 3.5rem; flex: none; color: var(--blue); fill: none; stroke: currentColor; stroke-width: 2; } .spec__title { font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem); letter-spacing: -.045em; } .spec__text { margin-top: 1.5rem; font-size: 1.1875rem; line-height: 1.55; color: var(--muted); max-width: 52ch; } .spec__grid { margin-top: 2.5rem; display: grid; gap: 2rem 3rem; } @media (min-width: 760px) { .spec__grid { grid-template-columns: 1fr 1fr; } } .spec__label { display: block; margin-bottom: 1rem; } .facts { display: grid; border-top: 2px solid var(--ink); } .facts div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--line-2); } .facts dt { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); padding-top: .2em; } .facts dd { margin: 0; font-weight: 600; } /* --- Srovnávací tabulka */ .table-wrap { overflow-x: auto; border: 2px solid var(--ink); background: var(--white); } .matrix { width: 100%; min-width: 44rem; border-collapse: collapse; } .matrix th, .matrix td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; } .matrix thead th { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-bottom: 2px solid var(--ink); } .matrix tbody th { font-weight: 700; } .matrix tr:last-child th, .matrix tr:last-child td { border-bottom: 0; } .matrix .is-us { background: var(--ink); color: var(--white); } .matrix thead .is-us { color: var(--blue-on-dark); border-bottom-color: var(--ink); } .matrix tbody tr:hover th, .matrix tbody tr:hover td:not(.is-us) { background: var(--paper); } .yes, .no { display: inline-block; width: 14px; height: 10px; vertical-align: middle; } .yes { background: var(--blue); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); } .no { height: 2px; background: var(--line-2); } /* --- FAQ */ .faq { border-top: 2px solid var(--ink); } .faq__item { border-bottom: 1px solid var(--line-2); } .faq__q { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; cursor: pointer; list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__q:hover { color: var(--blue); } .faq__plus { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border: 2px solid currentColor; } .faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s var(--ease); } .faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); } .faq__item[open] .faq__plus::after { transform: translate(-50%, -50%) rotate(0); } .faq__a { padding: 0 3rem 1.75rem 0; color: var(--muted); max-width: 70ch; } .faq__a p + p { margin-top: .5rem; } .faq-layout { display: grid; gap: 3rem 5rem; } @media (min-width: 1000px) { .faq-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } } /* --- Tmavý pruh s výzvou (podstránky) */ .cta-band { background: var(--ink); color: var(--white); } .cta-band__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem 3rem; padding-block: clamp(4rem, 7vw, 6rem); } .cta-band__title { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 4rem); line-height: 1.08; letter-spacing: -.045em; max-width: 18ch; } .cta-band__title em { font-style: normal; color: var(--blue-on-dark); } .cta-band .btn { --cut-bg: var(--ink); } /* --- Reference: rejstřík projektů */ .index-list { border-top: 2px solid var(--ink); } .index-list__row { border-bottom: 1px solid var(--line-2); transition: background-color .3s var(--ease), color .3s; } .index-list__link { display: grid; grid-template-columns: 3rem minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 2rem; gap: 1.5rem; align-items: center; padding: 1.25rem .75rem; text-decoration: none; } .index-list__num, .index-list__meta { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .index-list__num { color: var(--blue); } .index-list__meta { color: var(--muted-2); } .index-list__name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; } .index-list__arrow { width: 1.25rem; height: 1.25rem; transition: transform .3s var(--ease); } .index-list__row:hover { background: var(--ink); color: var(--white); } .index-list__row:hover .index-list__num { color: var(--blue-on-dark); } .index-list__row:hover .index-list__meta { color: var(--muted-on-dark); } .index-list__row:hover .index-list__arrow { transform: translate(3px, 3px) rotate(45deg); } @media (max-width: 759.98px) { .index-list__link { grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; } .index-list__meta { display: none; } } /* --- Reference: případová studie */ .study { padding-block: clamp(4.5rem, 8vw, 7rem); } .study + .study { border-top: 1px solid var(--line); } .study__top { display: grid; gap: 2.5rem 4rem; align-items: start; } @media (min-width: 1000px) { .study__top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .study--flip .study__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } .study--flip .study__media { order: 2; } } .study__aside { display: grid; gap: 2rem; } @media (min-width: 1000px) { .study__aside { position: sticky; top: calc(var(--header-h) + 2rem); } } .study__num { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; color: var(--blue); } .study__title { margin-top: .5rem; font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); letter-spacing: -.05em; } .study__steps { margin-top: clamp(3rem, 5vw, 4.5rem); display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); border-top: 2px solid var(--ink); } .study__step { padding: 1.75rem 2rem 0 0; } .study__step h3 { display: flex; align-items: baseline; gap: .75rem; font-size: 1.375rem; letter-spacing: -.025em; } .study__step h3 span { font-family: var(--mono); font-size: var(--fs-xs); color: var(--blue); } .study__step p { margin-top: .75rem; color: var(--muted); } .study__steps--single { grid-template-columns: 1fr; max-width: 42rem; } .study__steps--single .study__step h3 { font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); font-family: var(--mono); } .study__steps--single .study__step p { font-size: 1.125rem; color: var(--ink); } .quote { margin: clamp(3rem, 5vw, 4rem) 0 0; padding: 2rem 2.25rem; background: var(--blue-soft); display: grid; gap: 1rem; } .quote__mark { width: 2.25rem; height: auto; color: var(--blue); } .quote p { font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); font-weight: 700; line-height: 1.4; letter-spacing: -.015em; } .quote cite { font-style: normal; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; } /* --- O nás: profily */ .bio { display: grid; gap: 2.5rem 5rem; align-items: center; padding-block: clamp(3.5rem, 7vw, 6rem); } .bio + .bio { border-top: 1px solid var(--line); } @media (min-width: 900px) { .bio { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .bio--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .bio--flip .bio__photo { order: 2; justify-self: end; width: 100%; } } .bio__photo { width: 100%; max-width: 30rem; } .bio--flip .bio__photo { justify-self: end; } .bio__body { max-width: 34rem; } .bio__index { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; color: var(--muted-2); } .bio__index span { color: var(--blue); } .bio__meta { margin-top: 2rem; padding-top: 1.25rem; border-top: 2px solid var(--ink); } .bio__label { display: block; margin-bottom: .75rem; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); } .bio__meta .chips { margin-top: 0; } .bio__name { margin-top: .75rem; font-size: clamp(2.75rem, 1.6rem + 3.4vw, 5rem); line-height: 1.02; letter-spacing: -.05em; } .bio__role { margin-top: 1rem; } .bio__text { margin-top: 1.5rem; font-size: 1.1875rem; line-height: 1.55; color: var(--muted); max-width: 46ch; } .chips { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .5rem; } .chips li { padding: .375rem .75rem; border: 2px solid var(--ink); font-weight: 700; font-size: .875rem; } /* --- O nás: dvě profilové karty vedle sebe */ .bios { display: grid; gap: 2.5rem 2rem; } @media (min-width: 760px) { .bios { grid-template-columns: 1fr 1fr; } } .bio-card { display: grid; gap: 1.25rem; align-content: start; } .bio-card .photo { aspect-ratio: 5 / 4; } .bio-card__head { padding-bottom: 1rem; border-bottom: 2px solid var(--ink); } .bio-card__name { margin-top: .5rem; font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); letter-spacing: -.045em; } .bio-card__text { color: var(--muted); font-size: 1.0625rem; } .bio-card .chips { margin-top: 0; } /* --- O nás: nástroje */ .tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); } .tool { display: grid; gap: .5rem; padding: 1.5rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--white); } .tool__name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; } .tool__use { font-size: var(--fs-sm); color: var(--muted); } /* --- Kontakt: co se stane potom */ .next { display: grid; gap: 0; } .next__item { position: relative; padding: 0 0 1.75rem 2.5rem; } .next__item::before { content: ""; position: absolute; left: 7px; top: 1.25rem; bottom: 0; width: 2px; background: var(--ink); } .next__item:last-child::before { display: none; } .next__node { position: absolute; left: 0; top: .25rem; width: 16px; height: 16px; border: 2px solid var(--ink); background: var(--white); } .next__item:last-child .next__node { background: var(--blue); } .next__title { font-size: 1.0625rem; font-weight: 800; } .next__text { margin-top: .25rem; font-size: var(--fs-sm); color: var(--muted); } .contact-head { padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2.5rem, 4vw, 3.5rem); } .contact-head__title { margin-top: 1rem; font-size: clamp(2.75rem, 1.4rem + 4.4vw, 6rem); line-height: 1.04; letter-spacing: -.055em; } .contact-head__title em { font-style: normal; color: var(--blue); } .contact-head__lead { margin-top: 1.25rem; max-width: 34ch; font-size: var(--fs-lg, 1.1875rem); line-height: 1.5; color: var(--muted); } /* --- O nás: tři karty srovnání */ .trio { display: grid; gap: 1.5rem; align-items: center; } @media (min-width: 900px) { .trio { grid-template-columns: 1fr 1.15fr 1fr; gap: 0; } } .trio__card { padding: 2rem 2.25rem; } .trio__card--us { position: relative; z-index: 1; padding: 2.5rem 2.25rem; background: var(--white); color: var(--ink); border: 2px solid var(--white); box-shadow: 14px 14px 0 var(--blue); } @media (min-width: 900px) { .trio__card:not(.trio__card--us) { opacity: .8; } } .trio__badge { display: inline-block; margin-bottom: 1rem; padding: .25rem .5rem; background: var(--blue); color: var(--white); font-family: var(--mono); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .trio__name { font-size: 1.5rem; letter-spacing: -.03em; } .trio__card--us .trio__name { font-size: 1.875rem; } .trio__list { margin-top: 1.5rem; display: grid; } .trio__list div { padding: .875rem 0; border-top: 1px solid var(--line-dark); } .trio__card--us .trio__list div { border-top-color: var(--line-2); } .trio__list dt { font-family: var(--mono); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-on-dark); } .trio__card--us .trio__list dt { color: var(--blue); } .trio__list dd { margin: .25rem 0 0; font-weight: 700; } .trio__card:not(.trio__card--us) dd { color: var(--muted-on-dark); font-weight: 600; } /* --- O nás: zásady jako řádky */ .rules { border-top: 2px solid var(--ink); } .rules__item { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2rem; align-items: baseline; padding: 1.75rem 0; border-bottom: 1px solid var(--line-2); } .rules__num { font-family: var(--mono); font-size: .8125rem; font-weight: 700; color: var(--blue); } .rules__title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); letter-spacing: -.035em; } .rules__text { color: var(--muted); font-size: 1.0625rem; } /* --- O nás: nástroje jako velký pás */ .stack { display: grid; border-top: 2px solid var(--ink); } .stack__item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line-2); } .stack__name { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.1; transition: color .3s; } .stack__item:hover .stack__name { color: var(--blue); } .stack__use { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); } /* --- Kontakt v2 */ .contact-head__grid { display: grid; gap: 2rem 4rem; align-items: end; } @media (min-width: 1000px) { .contact-head__grid { grid-template-columns: 1.35fr 1fr; } } .contact-head__facts { display: grid; gap: .5rem; } .contact-head__facts li { display: flex; gap: 1rem; align-items: baseline; padding: .625rem 0; border-bottom: 1px solid var(--line-2); font-weight: 700; } .contact-head__facts span { font-family: var(--mono); font-size: var(--fs-xs); color: var(--blue); } .qform { background: var(--white); border: 2px solid var(--ink); box-shadow: 16px 16px 0 var(--blue); } .qform__bar { display: flex; align-items: center; gap: .875rem; padding: .625rem .875rem; border-bottom: 2px solid var(--ink); } .qform__body { display: grid; gap: 0; } .qform__step { margin: 0; padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem); border: 0; border-bottom: 1px solid var(--line); } .qform__legend { float: left; width: 100%; margin-bottom: 1.25rem; display: flex; gap: .75rem; align-items: baseline; padding: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; } .qform__legend + * { clear: both; } .qform__legend span { font-family: var(--mono); font-size: var(--fs-xs); color: var(--blue); } .qform .field__input { background: var(--paper); border-color: var(--paper); } .qform .field__input:hover { border-color: var(--line-2); } .qform .field__input:focus { background: var(--white); border-color: var(--blue); } .qform .field__label small { margin-left: .25rem; font-weight: 500; color: var(--muted-2); } .qform textarea.field__input { min-height: 10rem; } .qform__submit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem 2rem; padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem); } .qform__submit .form__consent { max-width: 34ch; } .qform .btn { --cut-bg: var(--white); } .qform .note { margin: 1.25rem clamp(1.25rem, 3vw, 2.25rem) 0; } .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; } .tile input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tile span { display: grid; justify-items: start; gap: .75rem; padding: 1rem; min-height: 6.25rem; align-content: space-between; border: 2px solid var(--line-2); font-weight: 800; cursor: pointer; transition: background-color .25s var(--ease), border-color .25s, color .25s; } .tile__icon { width: 1.75rem; height: 1.75rem; fill: none; stroke: var(--blue); stroke-width: 2.4; } .tile span:hover { border-color: var(--ink); } .tile input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); } .tile input:checked + span .tile__icon { stroke: var(--blue-on-dark); } .tile input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; } .contact__billing { padding-top: 1.25rem; border-top: 1px solid var(--line-2); font-size: var(--fs-sm); } .contact__billing .eyebrow { display: block; margin-bottom: .375rem; } @media (min-width: 1000px) { .contact__aside { position: sticky; top: calc(var(--header-h) + 2rem); } } /* --- Dekorativní vektory podstránek */ .deco-wrap { width: 100%; max-width: 26rem; justify-self: end; } .deco-wrap--stack { max-width: 31rem; } .deco { width: 100%; height: auto; overflow: visible; font-family: var(--mono); } .deco__ln { fill: none; stroke: var(--ink); stroke-width: 2; } .deco__ln--light { stroke: var(--blue-on-dark); } .deco__soft { fill: var(--blue-soft); } .deco__tick, .deco__dim { fill: none; stroke: var(--blue); stroke-width: 1.5; } .deco__lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; fill: var(--muted-2); } .deco__lbl--blue { fill: var(--blue); } .deco__brand { font-family: var(--font); font-size: 22px; font-weight: 800; letter-spacing: .1em; fill: var(--blue); } .deco__brand--on { fill: var(--white); } .deco__flap { fill: var(--blue-soft); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; } .deco__pocket { fill: var(--white); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; } .deco__box { fill: var(--white); } .deco__init.deco__init--ink { fill: var(--ink); } .deco__lbl--dark { fill: var(--muted-on-dark); } .deco__merge { fill: var(--blue-on-dark); } .deco__flapline { fill: none; stroke: var(--white); stroke-width: 2; } @media (prefers-reduced-motion: no-preference) { .js .deco__merge { animation: breathe 2.4s ease-in-out infinite; } } .deco__win { fill: var(--white); stroke: var(--ink); stroke-width: 2; } .deco__shadow { fill: var(--blue); } .deco__edge { stroke: var(--ink); stroke-width: 2; } .deco__dot { fill: none; stroke: var(--ink); stroke-width: 1.6; } .deco__chip { fill: none; stroke: var(--blue); stroke-width: 1.5; } .deco__urlbox { fill: var(--white); stroke: var(--line-2); stroke-width: 1.2; } .deco__url { font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .02em; fill: var(--muted-2); } .deco__chiptxt { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .05em; fill: var(--blue); } .deco__ink { fill: var(--ink); } .deco__gray { fill: var(--line-2); } .deco__blue { fill: var(--blue); } .deco__env { fill: var(--white); stroke: var(--ink); stroke-width: 2; } .deco__env--light { fill: none; stroke: var(--blue-on-dark); } .deco__badge { fill: var(--blue); } .deco__at { font-family: var(--font); font-size: 22px; font-weight: 800; fill: var(--white); } .deco__dash { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 4 5; } .deco__node { fill: none; stroke: var(--white); stroke-width: 2; } .deco__init { font-family: var(--font); font-size: 20px; font-weight: 800; fill: var(--white); } .deco__pulse { fill: none; stroke: var(--blue-on-dark); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; } @media (prefers-reduced-motion: no-preference) { .js .deco .deco__ln { stroke-dasharray: 1; animation: draw 1.8s var(--ease-io) .3s both; } .js .deco .deco__ln--2 { animation-delay: .7s; } .js .deco__float { animation: float 6s ease-in-out infinite; } .js .deco__float--2 { animation-delay: -2s; } .js .deco__float--3 { animation-delay: -4s; } .js .deco__letter { animation: letter 5s ease-in-out infinite; } .js .deco__pulse { animation: pulse 3s ease-out 1s infinite; } } @keyframes letter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes pulse { 0% { opacity: .8; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.35); } } /* --- Místo pro fotku: šrafa a silueta, dokud tam není skutečná fotka */ .photo { background-color: var(--blue-soft); background-image: repeating-linear-gradient(-56deg, transparent 0 14px, rgba(31, 74, 250, .1) 14px 15px); } .photo__ph { position: absolute; left: 50%; top: 46%; width: 26%; transform: translate(-50%, -50%); fill: none; stroke: var(--blue); stroke-width: 1.5; } .people .photo { aspect-ratio: 1 / 1; } /* --- Kontaktní karta na úvodu s diagramem */ .contact-card .deco--link { width: 100%; max-width: 17rem; margin: auto; } /* --- Proč malé studio: stejně vysoké karty, odrážky */ .trio { align-items: stretch; } @media (min-width: 900px) { .trio__card:not(.trio__card--us) { margin-block: 2rem; } .trio__card:not(.trio__card--us) { align-self: center; } } .trio__list dd { display: flex; gap: .625rem; align-items: baseline; } .trio__list dd::before { content: ""; flex: none; width: 10px; height: 2px; background: var(--muted-on-dark); transform: translateY(-.3em); } .trio__card--us .trio__list dd::before { width: 12px; height: 9px; background: var(--blue); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); transform: none; } /* --- Kontakt: pravý panel jako jedna karta */ .contact__aside { gap: 0; align-self: start; background: var(--white); border: 2px solid var(--ink); } .contact__aside > div:not(.mail-card) { padding: 1.75rem; } .contact__aside > .contact__billing { margin: 0; border-top: 1px solid var(--line); } /* 12. ANIMACE HERA ======================================================== */ /* Schéma webu: všechny prvky jsou absolutně v procentech, takže výběr a kurzor umí přejíždět mezi známými obdélníky. */ .art { position: relative; padding: 2.125rem 2.5rem 0 0; } .art__dim { position: absolute; top: 0; left: 0; right: 2.5rem; display: flex; align-items: center; gap: .625rem; font-family: var(--mono); font-size: .6875rem; font-weight: 700; color: var(--blue); } .art__dim i { display: block; background: currentColor; } .art__dim .tick { width: 1.5px; height: 12px; } .art__dim .line { flex: 1; height: 1.5px; } .art__win { position: relative; background: var(--white); border: 2px solid var(--ink); box-shadow: 16px 16px 0 var(--blue); } .art__bar { display: flex; align-items: center; gap: .875rem; padding: .625rem .875rem; border-bottom: 2px solid var(--ink); } .art__dots { display: flex; gap: 6px; } .art__dots i { width: 9px; height: 9px; border: 2px solid var(--ink); } .art__url { flex: 1; max-width: 16rem; padding: .25rem .625rem; border: 1.5px solid var(--line-2); font-family: var(--mono); font-size: .6875rem; font-weight: 700; color: var(--muted-2); } .art__body { position: relative; aspect-ratio: 16 / 11; overflow: hidden; } .art__cols { position: absolute; inset: 0 6%; background-image: repeating-linear-gradient(90deg, rgba(31,74,250,.06) 0 calc((100% - 11 * 2%) / 12), transparent calc((100% - 11 * 2%) / 12) calc((100% - 11 * 2%) / 12 + 2%)); } .a { position: absolute; display: block; } .a--ink { background: var(--ink); } .a--gray { background: var(--line-2); } .a--blue { background: var(--blue); } .a--box { border: 2px solid var(--ink); } .a--card { border: 2px solid var(--line-2); } .a--img { display: grid; place-items: center; background-color: var(--blue-soft); background-image: repeating-linear-gradient(-56deg, transparent 0 10px, rgba(31,74,250,.16) 10px 11px); } .a--img svg { width: 30%; fill: none; stroke: var(--blue); stroke-width: 2; } .a--card i { position: absolute; left: 9%; height: 7%; display: block; } .art__navline { position: absolute; top: 12.8%; left: 52%; width: 7%; height: .6%; min-height: 2px; background: var(--blue); } .art__btnfx { position: absolute; inset: 0; background: var(--ink); opacity: 0; } /* výběr jako v návrhovém nástroji */ .sel { position: absolute; left: 5%; top: 22.5%; width: 48%; height: 17.5%; outline: 1.5px solid var(--blue); pointer-events: none; } .sel i { position: absolute; width: 8px; height: 8px; background: var(--white); border: 1.5px solid var(--blue); } .sel i:nth-child(1) { top: -5px; left: -5px; } .sel i:nth-child(2) { top: -5px; right: -5px; } .sel i:nth-child(3) { bottom: -5px; left: -5px; } .sel i:nth-child(4) { bottom: -5px; right: -5px; } .sel__tag { position: absolute; left: -1.5px; bottom: calc(100% + 6px); display: grid; } .sel__tag b { grid-area: 1 / 1; padding: .125rem .375rem; background: var(--blue); color: var(--white); font-family: var(--mono); font-size: .625rem; font-weight: 700; white-space: nowrap; opacity: 0; } .sel__tag b:first-child { opacity: 1; } .cursor { position: absolute; left: 50%; top: 37%; width: 0; height: 0; z-index: 3; } .cursor svg, .fart__cursor svg { max-width: none; } .cursor svg { position: absolute; left: 0; top: 0; width: 13px; height: 21px; } .cursor__ping { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border: 2px solid var(--blue); border-radius: 50%; opacity: 0; } .art__phone { position: absolute; right: 0; bottom: -4rem; width: 7.375rem; } .art__phone-body { background: var(--white); border: 2px solid var(--ink); padding: 1rem .625rem .875rem; display: grid; gap: 7px; box-shadow: 8px 8px 0 var(--ink); } .art__phone-body i { display: block; } .art__phone-body { position: relative; } .art__tap { position: absolute; left: 30%; top: 47%; width: 20px; height: 20px; border: 2px solid var(--blue); border-radius: 50%; opacity: 0; } @media (prefers-reduced-motion: no-preference) { .js .art__tap { animation: ping 2.6s cubic-bezier(.2,.7,.2,1) 2.8s infinite; } } .art__phone-label { display: block; margin-top: .625rem; text-align: center; font-family: var(--mono); font-size: .6875rem; font-weight: 700; color: var(--blue); } .art__caption { margin-top: 2.5rem; padding-right: 8.75rem; font-family: var(--mono); font-size: .75rem; line-height: 1.6; color: var(--muted-2); } .art__caption b { color: var(--blue); } .art__cap-mob { display: none; } .only-mob { display: none; } @media (max-width: 639.98px) { .only-desk { display: none; } .only-mob { display: block; } } /* Na telefonu: místo zmenšeného okna jen velký mobil, formulářové schéma skryté */ @media (max-width: 639.98px) { .art { display: none; } .hero { padding-bottom: 4.5rem; } .hero__grid { gap: 0; } } @media (prefers-reduced-motion: no-preference) { /* Úvod: okno se poskládá */ .js .art__win { animation: win-in .8s var(--ease) both; } .js .art__dim .line { animation: grow-x .7s var(--ease-io) .5s both; } .js .art__dim span { animation: fade .8s var(--ease) .8s both; } .js .art__cols { animation: cols 1.8s var(--ease) .2s both; } .js .a { animation: build .6s var(--ease) calc(.15s + var(--d, 0) * 45ms) both; } .js .a--grow { transform-origin: left; animation-name: build-x; } .js .art__phone { animation: phone-in .9s var(--ease) .7s both; } .js .art__phone-body { animation: float 6s ease-in-out 1.6s infinite; } .js .art__caption { animation: fade .9s var(--ease) 1s both; } /* Smyčka: designér klikne na nadpis, obrázek, tlačítko */ .js .sel { animation: sel-in .5s var(--ease) 1.9s both, sel-move 12s var(--ease-io) 2.4s infinite; } .js .sel__tag b:nth-child(1) { animation: tag1 12s 2.4s infinite; } .js .sel__tag b:nth-child(2) { animation: tag2 12s 2.4s infinite; } .js .sel__tag b:nth-child(3) { animation: tag3 12s 2.4s infinite; } .js .cursor { animation: cur-in .9s var(--ease) 1.6s both, cur-move 12s var(--ease-io) 2.4s infinite; } .js .cursor__ping { animation: click 12s 2.4s infinite; } .js .art__btnfx { animation: btn-press 12s 2.4s infinite; } .js .art__navline { animation: navline 12s var(--ease-io) 2.4s infinite; } } @keyframes win-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes grow-x { from { transform: scaleX(0); } to { transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes cols { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: .55; } } @keyframes build { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes build-x { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } } @keyframes phone-in { from { opacity: 0; transform: translate(14px, 24px); } to { opacity: 1; transform: none; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes sel-in { from { opacity: 0; } to { opacity: 1; } } @keyframes sel-move { 0%, 26% { left: 5%; top: 22.5%; width: 48%; height: 17.5%; } 32%, 58% { left: 57%; top: 20.5%; width: 38%; height: 47%; } 64%, 92% { left: 5%; top: 54.5%; width: 24%; height: 11.5%; } 98%, 100% { left: 5%; top: 22.5%; width: 48%; height: 17.5%; } } @keyframes tag1 { 0%, 28% { opacity: 1; } 30%, 94% { opacity: 0; } 96%, 100% { opacity: 1; } } @keyframes tag2 { 0%, 30% { opacity: 0; } 32%, 60% { opacity: 1; } 62%, 100% { opacity: 0; } } @keyframes tag3 { 0%, 62% { opacity: 0; } 64%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } } @keyframes cur-in { from { opacity: 0; transform: translate(40px, 40px); } to { opacity: 1; transform: none; } } @keyframes cur-move { 0%, 24% { left: 50%; top: 37%; } 30%, 56% { left: 79%; top: 61%; } 62%, 90% { left: 19%; top: 61%; } 96%, 100% { left: 50%; top: 37%; } } @keyframes click { 0%, 70% { opacity: 0; transform: scale(.4); } 71% { opacity: .9; } 80%, 100% { opacity: 0; transform: scale(1.9); } } @keyframes btn-press { 0%, 70% { opacity: 0; } 72% { opacity: .35; } 78%, 100% { opacity: 0; } } @keyframes navline { 0%, 30% { left: 52%; } 34%, 64% { left: 60.5%; } 68%, 96% { left: 69%; } 100% { left: 52%; } } /* 13. ANIMACE FORMULÁŘE (CTA) ============================================= */ .fart { position: relative; padding: 0 1.5rem 1.5rem 0; } .fart__win { position: relative; background: var(--white); border: 2px solid var(--ink); box-shadow: 16px 16px 0 var(--blue); } .fart__body { position: relative; aspect-ratio: 10 / 11; overflow: hidden; } .f { position: absolute; display: block; } .f--label { height: 1.3%; background: var(--ink); } .f--input { border: 2px solid var(--line-2); } .f--focus { border-color: var(--blue); } .f--chip { border: 2px solid var(--line-2); } .f--chip i { position: absolute; left: 18%; right: 18%; top: 44%; height: 14%; background: var(--line-2); } .f--field { display: flex; align-items: center; gap: 2px; padding: 0 4%; } .f--area { display: flex; flex-direction: column; align-items: flex-start; gap: 9%; padding: 4%; } .f--text { display: block; flex: none; height: 18%; background: var(--ink); } .f--area .f--text { height: 7%; } .f--btn { display: flex; align-items: center; justify-content: center; gap: 8%; background: var(--blue); } .f--btn i { width: 46%; height: 12%; background: var(--white); } .f--btn svg { width: 12%; fill: none; stroke: var(--white); stroke-width: 2; } .f--caret { display: block; flex: none; width: 2px; height: 48%; background: var(--blue); opacity: 0; } .fart__done { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.25rem; background: var(--white); opacity: 0; pointer-events: none; } .fart__done svg { width: 5.5rem; height: 5.5rem; } .fart__done circle { fill: var(--blue); } .fart__done path { fill: none; stroke: var(--white); stroke-width: 4; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 0; } .fart__done i { display: block; height: 7px; background: var(--ink); } .fart__cursor { position: absolute; left: 72%; top: 96%; width: 0; height: 0; z-index: 3; } .fart__cursor svg { position: absolute; left: 0; top: 0; width: 13px; height: 21px; } .fart__cursor .cursor__ping { opacity: 0; } /* výchozí (bez pohybu): vyplněný formulář */ .f--t1 { width: 34%; } .f--t2 { width: 50%; } .f--t3 { width: 72%; } .f--t4 { width: 52%; } .f--chip.is-on { background: var(--ink); border-color: var(--ink); } .f--chip.is-on i { background: var(--white); } @media (prefers-reduced-motion: no-preference) { .js .f--t1 { animation: t1 11s steps(10) infinite; } .js .f--t2 { animation: t2 11s steps(14) infinite; } .js .f--t3 { animation: t3 11s var(--ease) infinite; } .js .f--t4 { animation: t4 11s var(--ease) infinite; } .js .f--c1 { animation: c1 11s infinite; } .js .f--c2 { animation: c2 11s infinite; } .js .f--in1 { animation: in1 11s infinite; } .js .f--in2 { animation: in2 11s infinite; } .js .f--in3 { animation: in3 11s infinite; } .js .f--chip.is-on { animation: chip 11s infinite; } .js .f--chip.is-on i { animation: chip-i 11s infinite; } .js .f--btn { animation: press 11s infinite; } .js .fart__cursor { animation: fcur 11s var(--ease-io) infinite; } .js .fart__cursor .cursor__ping { animation: fping 11s infinite; } .js .fart__done { animation: done 11s var(--ease) infinite; } .js .fart__done path { animation: check 11s var(--ease-io) infinite; } .js .fart__done i { animation: done-bar 11s var(--ease) infinite; } } @keyframes t1 { 0%, 4% { width: 0; } 16%, 92% { width: 34%; } 100% { width: 0; } } @keyframes t2 { 0%, 19% { width: 0; } 33%, 92% { width: 50%; } 100% { width: 0; } } @keyframes t3 { 0%, 50% { width: 0; } 56%, 92% { width: 72%; } 100% { width: 0; } } @keyframes t4 { 0%, 55% { width: 0; } 61%, 92% { width: 52%; } 100% { width: 0; } } @keyframes c1 { 0%, 3% { opacity: 0; } 4%, 17% { opacity: 1; } 18%, 100% { opacity: 0; } } @keyframes c2 { 0%, 18% { opacity: 0; } 19%, 35% { opacity: 1; } 36%, 100% { opacity: 0; } } @keyframes in1 { 0%, 3% { border-color: var(--line-2); } 4%, 17% { border-color: var(--blue); } 18%, 100% { border-color: var(--line-2); } } @keyframes in2 { 0%, 18% { border-color: var(--line-2); } 19%, 35% { border-color: var(--blue); } 36%, 100% { border-color: var(--line-2); } } @keyframes in3 { 0%, 49% { border-color: var(--line-2); } 50%, 62% { border-color: var(--blue); } 63%, 100% { border-color: var(--line-2); } } @keyframes chip { 0%, 44% { background: transparent; border-color: var(--line-2); } 45%, 92% { background: var(--ink); border-color: var(--ink); } 100% { background: transparent; border-color: var(--line-2); } } @keyframes chip-i { 0%, 44% { background: var(--line-2); } 45%, 92% { background: var(--white); } 100% { background: var(--line-2); } } @keyframes press { 0%, 70% { transform: none; filter: none; } 71.5% { transform: scale(.96); filter: brightness(.85); } 74%, 100% { transform: none; filter: none; } } @keyframes fcur { 0%, 34% { left: 72%; top: 96%; opacity: 0; } 37% { opacity: 1; } 42%, 46% { left: 16%; top: 47.5%; opacity: 1; } 64%, 72% { left: 22%; top: 89%; opacity: 1; } 78%, 100% { left: 30%; top: 100%; opacity: 0; } } @keyframes fping { 0%, 43% { opacity: 0; transform: scale(.4); } 44% { opacity: .9; } 49% { opacity: 0; transform: scale(1.8); } 50%, 70% { opacity: 0; transform: scale(.4); } 71% { opacity: .9; } 77%, 100% { opacity: 0; transform: scale(1.9); } } @keyframes done { 0%, 74% { opacity: 0; } 77%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } } @keyframes check { 0%, 76% { stroke-dashoffset: 1; } 82%, 100% { stroke-dashoffset: 0; } } @keyframes done-bar { 0%, 78% { transform: scaleX(0); } 84%, 100% { transform: none; } } /* 14. POHYB A REVEAL ====================================================== */ @media (prefers-reduced-motion: no-preference) { .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); } .js .reveal.is-visible { opacity: 1; transform: none; } .js .deco__bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); opacity: 0; } .js .reveal.is-visible .deco__bar { animation: bar-grow 1.1s cubic-bezier(.22, .8, .25, 1) both, var(--set) 40s cubic-bezier(.34, 1.45, .64, 1) 1.5s infinite; animation-delay: var(--bd, 0s), 1.5s; } /* nekonečná vlna: modrá projede krok za krokem a hned jede znovu od začátku */ .js .browser__live, .js .contact-card__dot { animation: breathe 2.4s ease-in-out infinite; } } @keyframes bar-grow { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } } /* graf jako živá data: první změna hned po narůstu, pak 11 dalších stavů */ @keyframes bar-set0 { 0%, 1% { transform: scaleY(1); } 3.50%, 9.80% { transform: scaleY(1.846); } 12.10%, 18.40% { transform: scaleY(2.692); } 20.70%, 27.00% { transform: scaleY(1.308); } 29.30%, 35.60% { transform: scaleY(2.231); } 37.90%, 44.20% { transform: scaleY(0.846); } 46.50%, 52.80% { transform: scaleY(2.385); } 55.10%, 61.40% { transform: scaleY(1.538); } 63.70%, 70.00% { transform: scaleY(2.846); } 72.30%, 78.60% { transform: scaleY(1.154); } 80.90%, 87.20% { transform: scaleY(2.077); } 89.50%, 95.80% { transform: scaleY(1.692); } 99%, 100% { transform: scaleY(1); } } @keyframes bar-set1 { 0%, 1% { transform: scaleY(1); } 3.50%, 9.80% { transform: scaleY(0.714); } 12.10%, 18.40% { transform: scaleY(1.333); } 20.70%, 27.00% { transform: scaleY(1.762); } 29.30%, 35.60% { transform: scaleY(0.905); } 37.90%, 44.20% { transform: scaleY(1.524); } 46.50%, 52.80% { transform: scaleY(0.619); } 55.10%, 61.40% { transform: scaleY(1.238); } 63.70%, 70.00% { transform: scaleY(1.048); } 72.30%, 78.60% { transform: scaleY(1.619); } 80.90%, 87.20% { transform: scaleY(0.857); } 89.50%, 95.80% { transform: scaleY(1.381); } 99%, 100% { transform: scaleY(1); } } @keyframes bar-set2 { 0%, 1% { transform: scaleY(1); } 3.50%, 9.80% { transform: scaleY(2.118); } 12.10%, 18.40% { transform: scaleY(0.706); } 20.70%, 27.00% { transform: scaleY(1.471); } 29.30%, 35.60% { transform: scaleY(1.941); } 37.90%, 44.20% { transform: scaleY(1.176); } 46.50%, 52.80% { transform: scaleY(1.647); } 55.10%, 61.40% { transform: scaleY(0.824); } 63.70%, 70.00% { transform: scaleY(1.765); } 72.30%, 78.60% { transform: scaleY(1.353); } 80.90%, 87.20% { transform: scaleY(2.176); } 89.50%, 95.80% { transform: scaleY(0.941); } 99%, 100% { transform: scaleY(1); } } @keyframes bar-set3 { 0%, 1% { transform: scaleY(1); } 3.50%, 9.80% { transform: scaleY(0.690); } 12.10%, 18.40% { transform: scaleY(0.793); } 20.70%, 27.00% { transform: scaleY(0.483); } 29.30%, 35.60% { transform: scaleY(1.276); } 37.90%, 44.20% { transform: scaleY(0.897); } 46.50%, 52.80% { transform: scaleY(0.586); } 55.10%, 61.40% { transform: scaleY(1.207); } 63.70%, 70.00% { transform: scaleY(0.379); } 72.30%, 78.60% { transform: scaleY(1.069); } 80.90%, 87.20% { transform: scaleY(0.759); } 89.50%, 95.80% { transform: scaleY(0.862); } 99%, 100% { transform: scaleY(1); } } @keyframes bar-set4 { 0%, 1% { transform: scaleY(1); } 3.50%, 9.80% { transform: scaleY(0.474); } 12.10%, 18.40% { transform: scaleY(0.816); } 20.70%, 27.00% { transform: scaleY(0.579); } 29.30%, 35.60% { transform: scaleY(0.395); } 37.90%, 44.20% { transform: scaleY(0.921); } 46.50%, 52.80% { transform: scaleY(0.632); } 55.10%, 61.40% { transform: scaleY(0.763); } 63.70%, 70.00% { transform: scaleY(0.500); } 72.30%, 78.60% { transform: scaleY(0.316); } 80.90%, 87.20% { transform: scaleY(0.868); } 89.50%, 95.80% { transform: scaleY(1.000); } 99%, 100% { transform: scaleY(1); } } } @keyframes step-wave { 0% { transform: var(--sf-0); opacity: 1; } 25%, 45% { transform: none; opacity: 1; } 65% { transform: none; opacity: 0; } 66%, 100% { transform: var(--sf-0); opacity: 0; } } @keyframes step-node { 0% { background: var(--white); } 3%, 45% { background: var(--blue); } 65%, 100% { background: var(--white); } } @keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .work-card:hover .browser, .work-feature:hover .browser { transform: none; } } /* 14b. MOBIL ============================================================= */ @media (max-width: 639.98px) { /* tlačítka přes celou šířku */ .hero__actions .btn, .cta__actions .btn, .cta-band .btn, .form .btn { width: 100%; } .cta__actions { flex-direction: column; align-items: stretch; text-align: center; } .section-head { margin-bottom: 2.5rem; } /* lidé vedle sebe, kontakt pod nimi */ .people { grid-template-columns: 1fr 1fr; gap: 1.25rem; } .people .contact-card { grid-column: 1 / -1; padding: 1.75rem; } .person { gap: .875rem; } .person__head { flex-direction: column; align-items: flex-start; gap: .25rem; } .person__name { font-size: 1.1875rem; } .person__role { text-align: left; } .person__text { font-size: .875rem; } .contact-card__claim { font-size: 1.375rem; } .photo .todo { left: .5rem; bottom: .5rem; font-size: .65em; } /* O nás */ .bio { padding-block: 2.5rem; gap: 1.5rem; } .bio__photo { max-width: 15rem; } .bio__text { font-size: 1.0625rem; } .values, .tools { grid-template-columns: 1fr 1fr; } .value { padding: 1.25rem 1rem 1.5rem; } .value__title { margin-top: 1.25rem; font-size: 1.125rem; } .tool { padding: 1.125rem 1rem; } .tool__name { font-size: 1.0625rem; } /* srovnávací tabulka jako karty */ .table-wrap { overflow: visible; border: 0; background: none; } .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; min-width: 0; } .matrix { min-width: 0; } .matrix thead { display: none; } .matrix tr { margin-bottom: 1rem; border: 2px solid var(--ink); background: var(--white); } .matrix tbody th { padding: .875rem 1rem; border-bottom: 2px solid var(--ink); font-size: 1.0625rem; } .matrix td { display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem; padding: .75rem 1rem; } .matrix td::before { content: attr(data-label); font-family: var(--mono); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); padding-top: .2em; } .matrix td.is-us::before { color: var(--blue-on-dark); } .matrix tbody tr:hover th, .matrix tbody tr:hover td:not(.is-us) { background: none; } /* reference */ .study { padding-block: 3.5rem; } .facts div { grid-template-columns: 7rem 1fr; } .quote { padding: 1.5rem; } /* kontakt */ .form { box-shadow: 8px 8px 0 var(--blue); padding: 1.25rem; } .choice span { min-height: 2.5rem; padding: 0 .875rem; } /* O nás v2 */ .bio__photo { max-width: none; width: 100%; aspect-ratio: 1 / 1; } .trio__card { padding: 1.5rem; } .trio__card--us { padding: 1.75rem 1.5rem; box-shadow: 8px 8px 0 var(--blue); } .trio__card--us .trio__name { font-size: 1.5rem; } .rules__item { grid-template-columns: 2.5rem 1fr; padding: 1.25rem 0; } .rules__text { grid-column: 2; font-size: var(--fs-sm); } .stack__item { flex-direction: column; gap: .25rem; } /* kontakt v2 */ .tiles { grid-template-columns: 1fr 1fr; } .tile span { min-height: 5rem; padding: .875rem; } .qform { box-shadow: 8px 8px 0 var(--blue); } .qform__submit .btn { width: 100%; } /* dekorace jen na počítači, na mobilu je nezobrazujeme (stejně jako hero a 404) */ .deco-wrap { display: none; } .contact-card .deco--link { display: none; } .trio__card { margin: 0; } /* patička: dva sloupce odkazů */ .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; } .site-footer__grid > :first-child, .site-footer__grid > :last-child { grid-column: 1 / -1; } .site-footer { padding-top: 3.5rem; } } /* 15. TISK ================================================================ */ @media print { .site-header, .side-nav, .art, .fart { display: none !important; } .section--ink { background: none; color: #000; } } /* 404: kurzor hledá ztracený prvek ve wireframu =========================== */ .error-page__grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } @media (min-width: 960px) { .error-page__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } } .lost { position: relative; margin: 0; padding: 0 1.25rem 1.25rem 0; } .lost .art__win { box-shadow: 14px 14px 0 var(--blue); } .lost__slot { position: absolute; left: 56%; top: 20%; width: 38%; height: 46%; display: grid; place-items: center; background-image: linear-gradient(90deg, var(--blue) 50%, transparent 0), linear-gradient(90deg, var(--blue) 50%, transparent 0), linear-gradient(0deg, var(--blue) 50%, transparent 0), linear-gradient(0deg, var(--blue) 50%, transparent 0); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 10px 1.5px, 10px 1.5px, 1.5px 10px, 1.5px 10px; background-position: 0 0, 0 100%, 0 0, 100% 0; } .lost__slot svg { width: 34%; overflow: visible; fill: none; stroke: var(--blue); stroke-width: 1.5; } .lost__q { font-family: var(--mono); font-weight: 700; fill: var(--blue); stroke: none; font-size: 15px; } .lost__sel { position: absolute; left: 5%; top: 73%; width: 29.4%; height: 20%; outline: 1.5px solid var(--blue); pointer-events: none; z-index: 2; } .lost__sel > i { position: absolute; width: 8px; height: 8px; background: var(--white); border: 1.5px solid var(--blue); } .lost__sel > i:nth-child(1) { top: -5px; left: -5px; } .lost__sel > i:nth-child(2) { top: -5px; right: -5px; } .lost__sel > i:nth-child(3) { bottom: -5px; left: -5px; } .lost__sel > i:nth-child(4) { bottom: -5px; right: -5px; } .lost__sel .sel__tag b:first-child { opacity: 1; } .lost__sel .sel__tag b.is-miss { background: var(--ink); } .lost .cursor { left: 22%; top: 85%; } .lost__cap { margin-top: 2rem; font-family: var(--mono); font-size: .75rem; color: var(--muted-2); } .lost__cap b { color: var(--blue); } @media (max-width: 959.98px) { .lost { max-width: 34rem; } } @media (max-width: 639.98px) { .lost { display: none; } } @media (prefers-reduced-motion: no-preference) { .js .lost .art__win { animation: win-in 1s var(--ease) both; } .js .lost__slot { animation: build .7s var(--ease) 1.1s both, ants 1.2s linear infinite; } .js .lost__slot svg { animation: lost-q 10s 2.2s infinite; } .js .lost__sel { animation: sel-in .5s var(--ease) 1.8s both, lost-sel 10s var(--ease-io) 2.2s infinite; } .js .lost__sel .sel__tag b:nth-child(1) { animation: ltag1 10s 2.2s infinite; } .js .lost__sel .sel__tag b:nth-child(2) { animation: ltag2 10s 2.2s infinite; } .js .lost__sel .sel__tag b:nth-child(3) { animation: ltag3 10s 2.2s infinite; } .js .lost .cursor { animation: cur-in .9s var(--ease) 1.5s both, lost-cur 10s var(--ease-io) 2.2s infinite; } .js .lost .cursor__ping { animation: lost-ping 10s 2.2s infinite; } } @keyframes ants { to { background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px; } } @keyframes lost-sel { 0%, 18% { left: 5%; top: 73%; width: 29.4%; height: 20%; } 25%, 42% { left: 50.5%; top: 6.3%; width: 27%; height: 8.6%; } 50%, 90% { left: 56%; top: 20%; width: 38%; height: 46%; } 97%, 100% { left: 5%; top: 73%; width: 29.4%; height: 20%; } } @keyframes lost-cur { 0%, 16% { left: 22%; top: 85%; } 23%, 40% { left: 66%; top: 12%; } 48%, 88% { left: 78%; top: 48%; } 95%, 100% { left: 22%; top: 85%; } } @keyframes ltag1 { 0%, 20% { opacity: 1; } 22%, 95% { opacity: 0; } 97%, 100% { opacity: 1; } } @keyframes ltag2 { 0%, 23% { opacity: 0; } 25%, 44% { opacity: 1; } 46%, 100% { opacity: 0; } } @keyframes ltag3 { 0%, 49% { opacity: 0; } 51%, 90% { opacity: 1; } 92%, 100% { opacity: 0; } } @keyframes lost-ping { 0%, 52% { opacity: 0; transform: scale(.4); } 53% { opacity: .9; } 62%, 100% { opacity: 0; transform: scale(1.9); } } @keyframes lost-q { 0%, 52% { transform: none; } 55% { transform: scale(1.12); } 60%, 100% { transform: none; } } /* O nás: dva kurzory na jednom webu ======================================== */ .deco-wrap--duo { max-width: 36rem; } .duo { margin: 0; padding: 0 1rem 1rem 0; } .duo .art__win { box-shadow: 14px 14px 0 var(--blue); } .duo__who { margin-left: auto; display: flex; } .duo__av { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; font-family: var(--mono); font-size: .625rem; font-weight: 700; color: var(--white); border: 2px solid var(--white); } .duo__av--j { background: var(--blue); } .duo__av--v { background: var(--ink); margin-left: -.375rem; } .duo__sel { position: absolute; pointer-events: none; outline: 1.5px solid var(--blue); left: 5%; top: 22.5%; width: 48%; height: 17.5%; } .duo__sel--v { outline-color: var(--ink); left: 5%; top: 54.5%; width: 25%; height: 11.5%; } .duo__cur--j { left: 46%; top: 36%; } .duo__cur--v { left: 23%; top: 62%; } .duo__cur--v .cursor__ping { border-color: var(--ink); } .duo__tag { position: absolute; left: 11px; top: 19px; padding: .125rem .375rem; white-space: nowrap; font-family: var(--mono); font-size: .625rem; font-weight: 700; color: var(--white); background: var(--blue); } .duo__cur--v .duo__tag { background: var(--ink); } .duo__cap { margin-top: 1.75rem; font-family: var(--mono); font-size: .75rem; color: var(--muted-2); } .duo__cap b { color: var(--blue); } @media (max-width: 999.98px) { .deco-wrap--duo { justify-self: start; max-width: 32rem; } } @media (max-width: 639.98px) { .deco-wrap--duo { max-width: 21rem; } .duo__tag { font-size: .5625rem; } .duo__cap { display: none; } } @media (prefers-reduced-motion: no-preference) { .js .duo__sel--j { animation: duo-sj 12s var(--ease-io) 1s infinite; } .js .duo__sel--v { animation: duo-sv 12s var(--ease-io) 1s infinite; } .js .duo__cur--j { animation: duo-cj 12s var(--ease-io) 1s infinite; } .js .duo__cur--v { animation: duo-cv 12s var(--ease-io) 1s infinite; } .js .duo__cur--j .cursor__ping { animation: duo-pj 12s 1s infinite; } .js .duo__cur--v .cursor__ping { animation: duo-pv 12s 1s infinite; } } @keyframes duo-sj { 0%, 40% { left: 5%; top: 22.5%; width: 48%; height: 17.5%; } 47%, 88% { left: 57%; top: 20.5%; width: 38%; height: 47%; } 95%, 100% { left: 5%; top: 22.5%; width: 48%; height: 17.5%; } } @keyframes duo-cj { 0%, 38% { left: 46%; top: 36%; } 45%, 86% { left: 80%; top: 58%; } 93%, 100% { left: 46%; top: 36%; } } @keyframes duo-sv { 0%, 26% { left: 5%; top: 54.5%; width: 25%; height: 11.5%; } 33%, 58% { left: 65.6%; top: 73%; width: 29.4%; height: 20%; } 65%, 90% { left: 5%; top: 73%; width: 29.4%; height: 20%; } 97%, 100% { left: 5%; top: 54.5%; width: 25%; height: 11.5%; } } @keyframes duo-cv { 0%, 24% { left: 23%; top: 62%; } 31%, 56% { left: 86%; top: 86%; } 63%, 88% { left: 24%; top: 87%; } 95%, 100% { left: 23%; top: 62%; } } @keyframes duo-pj { 0%, 47% { opacity: 0; transform: scale(.4); } 48% { opacity: .9; } 56%, 100% { opacity: 0; transform: scale(1.9); } } @keyframes duo-pv { 0%, 33% { opacity: 0; transform: scale(.4); } 34% { opacity: .9; } 42%, 64% { opacity: 0; transform: scale(1.9); } 65% { opacity: .9; transform: scale(.4); } 73%, 100% { opacity: 0; transform: scale(1.9); } } /* Kontakt pro oba: e-mail doputuje k oběma =============================== */ .lk__track { fill: none; stroke: rgba(141,162,255,.42); stroke-width: 2; } .lk__env { fill: var(--blue); } .lk__flap { fill: none; stroke: var(--white); stroke-width: 2; stroke-linejoin: miter; } .lk__node { fill: var(--blue-on-dark); } .lk__pk { fill: var(--blue-on-dark); opacity: 0; } .lk__box { fill: var(--ink); stroke: var(--white); stroke-width: 2; } .lk__init { font-family: var(--font); font-size: 20px; font-weight: 800; fill: var(--white); } .lk__lbl { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; fill: var(--muted-on-dark); } @media (prefers-reduced-motion: no-preference) { .js .lk__mail { animation: lk-mail 3.6s var(--ease-io) infinite; transform-box: fill-box; transform-origin: center; } } @media (prefers-reduced-motion: reduce) { .lk__pk { display: none; } .lk__box animate { display: none; } } @keyframes lk-mail { 0%, 100% { transform: translateY(-3px); } 10% { transform: translateY(2px); } 18% { transform: none; } } /* Postup na počítači: luxusní osa ========================================= Světelná hlava dojede ke každému kroku a zastaví se, uzel se rozsvítí i s číslem. Na konci se modrá „vypustí“ zleva doprava (konec dožene hlavu) a vše začne znovu. */ /* společné pro obě orientace: tenký uzel s rámečkem */ .steps { position: relative; } .step::before, .step__fill { display: none; } .step__node { width: 11px; height: 11px; border: 1.5px solid rgba(11,16,32,.55); background: var(--paper); } .step__node::before { content: ""; position: absolute; inset: -7px; border: 1px solid var(--blue); opacity: 0; transform: scale(.5); } @media (prefers-reduced-motion: no-preference) { .js .step__node, .js .step__node::before, .js .step__num { animation-delay: 0s; animation-duration: 13s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } .js .step:nth-child(1) .step__node { animation-name: ax-n0; } .js .step:nth-child(1) .step__node::before { animation-name: ax-r0; } .js .step:nth-child(1) .step__num { animation-name: ax-t0; } .js .step:nth-child(2) .step__node { animation-name: ax-n1; } .js .step:nth-child(2) .step__node::before { animation-name: ax-r1; } .js .step:nth-child(2) .step__num { animation-name: ax-t1; } .js .step:nth-child(3) .step__node { animation-name: ax-n2; } .js .step:nth-child(3) .step__node::before { animation-name: ax-r2; } .js .step:nth-child(3) .step__num { animation-name: ax-t2; } .js .step:nth-child(4) .step__node { animation-name: ax-n3; } .js .step:nth-child(4) .step__node::before { animation-name: ax-r3; } .js .step:nth-child(4) .step__num { animation-name: ax-t3; } } /* Postup pod 900 px: stejná osa, jen svisle (řádky mají stejnou výšku, uzly jsou na 0/25/50/75 %) */ @media (max-width: 899.98px) { .steps { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 0; } .steps::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 0; width: 1px; pointer-events: none; background: linear-gradient(180deg, rgba(11,16,32,.2) 0 76%, rgba(11,16,32,0) 96%); } .step { padding: 0 0 2.5rem 2.25rem; } .step__node { top: 9px; left: 0; } .step__title { font-size: 1.5rem; } .step__text { font-size: 1rem; max-width: 34ch; } .step__out { font-size: .9375rem; } } @media (max-width: 899.98px) and (prefers-reduced-motion: no-preference) { .js .steps::after { content: ""; position: absolute; left: 0; top: 9px; width: 11px; height: 11px; pointer-events: none; background: linear-gradient(var(--blue), var(--blue)) center bottom / 11px 11px no-repeat, linear-gradient(180deg, rgba(31,74,250,0), rgba(31,74,250,.55) 30%, var(--blue)) center top / 2px 100% no-repeat; filter: drop-shadow(0 0 5px rgba(31,74,250,.6)) drop-shadow(0 0 14px rgba(31,74,250,.25)); animation: axis-head-v 13s cubic-bezier(.65, 0, .35, 1) infinite; } } @keyframes axis-head-v { 0% { top: 9px; height: 11px; opacity: 0; } 3%, 5% { top: 9px; height: 11px; opacity: 1; } 17%, 26% { top: 9px; height: calc(25% + 11px); opacity: 1; } 38%, 47% { top: 9px; height: calc(50% + 11px); opacity: 1; } 59%, 66% { top: 9px; height: calc(75% + 11px); opacity: 1; } 84% { top: calc(75% + 9px); height: 11px; opacity: 1; } 89%, 100% { top: calc(75% + 9px); height: 11px; opacity: 0; } } @media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; } .steps::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(11,16,32,.2) 0 76%, rgba(11,16,32,0) 96%); } .step { padding-top: 3.25rem; } .step::before, .step__fill { display: none; } .step__node { top: 5px; left: 0; width: 11px; height: 11px; border: 1.5px solid rgba(11,16,32,.55); background: var(--paper); } .step__node::before { content: ""; position: absolute; inset: -7px; border: 1px solid var(--blue); opacity: 0; transform: scale(.5); } } @media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .js .steps::after { content: ""; position: absolute; left: 0; top: 5px; height: 11px; width: 11px; pointer-events: none; background: linear-gradient(var(--blue), var(--blue)) right center / 11px 11px no-repeat, linear-gradient(90deg, rgba(31,74,250,0), rgba(31,74,250,.55) 30%, var(--blue)) left center / 100% 2px no-repeat; filter: drop-shadow(0 0 5px rgba(31,74,250,.6)) drop-shadow(0 0 14px rgba(31,74,250,.25)); animation: axis-head 13s cubic-bezier(.65, 0, .35, 1) infinite; } .js .step__node, .js .step__node::before, .js .step__num { animation-delay: 0s; animation-duration: 13s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } .js .step:nth-child(1) .step__node { animation-name: ax-n0; } .js .step:nth-child(1) .step__node::before { animation-name: ax-r0; } .js .step:nth-child(1) .step__num { animation-name: ax-t0; } .js .step:nth-child(2) .step__node { animation-name: ax-n1; } .js .step:nth-child(2) .step__node::before { animation-name: ax-r1; } .js .step:nth-child(2) .step__num { animation-name: ax-t1; } .js .step:nth-child(3) .step__node { animation-name: ax-n2; } .js .step:nth-child(3) .step__node::before { animation-name: ax-r2; } .js .step:nth-child(3) .step__num { animation-name: ax-t2; } .js .step:nth-child(4) .step__node { animation-name: ax-n3; } .js .step:nth-child(4) .step__node::before { animation-name: ax-r3; } .js .step:nth-child(4) .step__num { animation-name: ax-t3; } } @keyframes axis-head { 0% { left: 0; width: 11px; opacity: 0; } 3% { left: 0; width: 11px; opacity: 1; } 5% { left: 0; width: 11px; opacity: 1; } 17%, 26% { left: 0; width: calc(25% + 11px); opacity: 1; } 38%, 47% { left: 0; width: calc(50% + 11px); opacity: 1; } 59%, 66% { left: 0; width: calc(75% + 11px); opacity: 1; } 84% { left: 75%; width: 11px; opacity: 1; } 89%, 100% { left: 75%; width: 11px; opacity: 0; } } @keyframes ax-n0 { 0%, 2% { background-color: var(--paper); border-color: rgba(11,16,32,.55); } 3%, 68% { background-color: var(--blue); border-color: var(--blue); } 71%, 100% { background-color: var(--paper); border-color: rgba(11,16,32,.55); } } @keyframes ax-r0 { 0%, 2% { opacity: 0; transform: scale(.5); } 5% { opacity: .55; transform: scale(1); } 11%, 68% { opacity: .22; transform: scale(1); } 71%, 100% { opacity: 0; transform: scale(.5); } } @keyframes ax-t0 { 0%, 2% { color: var(--muted-2); } 4%, 68% { color: var(--blue); } 71%, 100% { color: var(--muted-2); } } @keyframes ax-n1 { 0%, 16% { background-color: var(--paper); border-color: rgba(11,16,32,.55); } 17%, 74% { background-color: var(--blue); border-color: var(--blue); } 77%, 100% { background-color: var(--paper); border-color: rgba(11,16,32,.55); } } @keyframes ax-r1 { 0%, 16% { opacity: 0; transform: scale(.5); } 19% { opacity: .55; transform: scale(1); } 25%, 74% { opacity: .22; transform: scale(1); } 77%, 100% { opacity: 0; transform: scale(.5); } } @keyframes ax-t1 { 0%, 16% { color: var(--muted-2); } 18%, 74% { color: var(--blue); } 77%, 100% { color: var(--muted-2); } } @keyframes ax-n2 { 0%, 37% { background-color: var(--paper); border-color: rgba(11,16,32,.55); } 38%, 80% { background-color: var(--blue); border-color: var(--blue); } 83%, 100% { background-color: var(--paper); border-color: rgba(11,16,32,.55); } } @keyframes ax-r2 { 0%, 37% { opacity: 0; transform: scale(.5); } 40% { opacity: .55; transform: scale(1); } 46%, 80% { opacity: .22; transform: scale(1); } 83%, 100% { opacity: 0; transform: scale(.5); } } @keyframes ax-t2 { 0%, 37% { color: var(--muted-2); } 39%, 80% { color: var(--blue); } 83%, 100% { color: var(--muted-2); } } @keyframes ax-n3 { 0%, 58% { background-color: var(--paper); border-color: rgba(11,16,32,.55); } 59%, 90% { background-color: var(--blue); border-color: var(--blue); } 93%, 100% { background-color: var(--paper); border-color: rgba(11,16,32,.55); } } @keyframes ax-r3 { 0%, 58% { opacity: 0; transform: scale(.5); } 61% { opacity: .55; transform: scale(1); } 67%, 90% { opacity: .22; transform: scale(1); } 93%, 100% { opacity: 0; transform: scale(.5); } } @keyframes ax-t3 { 0%, 58% { color: var(--muted-2); } 60%, 90% { color: var(--blue); } 93%, 100% { color: var(--muted-2); } } @keyframes who-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } /* Kontakt – e-mailová karta ================================================ */ .mail-card { display: grid; gap: 1rem; padding: 1.75rem; border-bottom: 2px solid var(--ink); background: var(--white); } .mail-card__addr { justify-self: start; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; } .mail-card__addr:hover { color: var(--blue); } .mail-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; } .mail-card .btn { --cut-bg: var(--white); } .mail-card__text { font-size: var(--fs-sm); color: var(--muted); } .copy { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem 0; border: 0; background: none; cursor: pointer; font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--ink); border-bottom: 1.5px solid var(--line-2); } .copy:hover, .copy:focus-visible { color: var(--blue); border-color: var(--blue); } .copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; } .copy.is-done { color: var(--blue); border-color: var(--blue); } @media (prefers-reduced-motion: no-preference) { } /* O nás – varianta 2: počítač + mobil, stejný prvek současně ============== */ .duo2 { position: relative; margin: 0; padding: 0 0 0 0; } .duo2__win { width: 80%; box-shadow: 12px 12px 0 var(--blue); } .duo2__phone { position: absolute; right: 0; top: 18%; width: 26%; z-index: 2; } .duo2__pbody { position: relative; aspect-ratio: 9 / 17; background: var(--white); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); overflow: visible; } .duo2__notch { position: absolute; left: 50%; top: 3.5%; width: 26%; height: 1.5%; transform: translateX(-50%); background: var(--ink); } .duo2__plabel { display: block; margin-top: .75rem; text-align: center; font-family: var(--mono); font-size: .6875rem; font-weight: 700; color: var(--blue); } .duo2__sel { position: absolute; pointer-events: none; outline: 1.5px solid var(--blue); } .duo2__sel--d { left: 5%; top: 22.5%; width: 48%; height: 17.5%; } .duo2__sel--m { outline-color: var(--ink); outline-style: dashed; left: 5%; top: 7%; width: 90%; height: 17%; } .duo2__cur--d { left: 46%; top: 36%; } .duo2__cur--m { left: 72%; top: 20%; } .duo2__cur--m .duo__tag { background: var(--ink); left: auto; right: 2px; } .duo2__cur--m .cursor__ping { border-color: var(--ink); } .duo2 .duo__cap { margin-top: 1.75rem; } @media (max-width: 639.98px) { .duo2__phone { width: 30%; } } @media (prefers-reduced-motion: no-preference) { .js .duo2__sel--d { animation: d2-sd 12s var(--ease-io) 1s infinite; } .js .duo2__sel--m { animation: d2-sm 12s var(--ease-io) 1s infinite; } .js .duo2__cur--d { animation: d2-cd 12s var(--ease-io) 1s infinite; } .js .duo2__cur--m { animation: d2-cm 12s var(--ease-io) 1s infinite; } .js .duo2__cur--d .cursor__ping, .js .duo2__cur--m .cursor__ping { animation: d2-ping 4s 1s infinite; } .js .duo2__pbody { animation: float 6s ease-in-out 1.5s infinite; } } /* tři zastávky: nadpis → obrázek → tlačítko, na obou zařízeních zároveň */ @keyframes d2-sd { 0%, 27% { left: 5%; top: 22.5%; width: 48%; height: 17.5%; } 33%, 60% { left: 35.3%; top: 73%; width: 29.4%; height: 20%; } 66%, 94% { left: 5%; top: 54.5%; width: 25%; height: 11.5%; } 100% { left: 5%; top: 22.5%; width: 48%; height: 17.5%; } } @keyframes d2-cd { 0%, 25% { left: 46%; top: 36%; } 31%, 58% { left: 54%; top: 87%; } 64%, 92% { left: 22%; top: 62%; } 98%, 100% { left: 46%; top: 36%; } } @keyframes d2-sm { 0%, 27% { left: 5%; top: 7%; width: 90%; height: 17%; } 33%, 60% { left: 5%; top: 75%; width: 90%; height: 19%; } 66%, 94% { left: 5%; top: 35%; width: 62%; height: 11%; } 100% { left: 5%; top: 7%; width: 90%; height: 17%; } } @keyframes d2-cm { 0%, 25% { left: 72%; top: 20%; } 31%, 58% { left: 64%; top: 88%; } 64%, 92% { left: 48%; top: 42%; } 98%, 100% { left: 72%; top: 20%; } } @keyframes d2-ping { 0%, 6% { opacity: 0; transform: scale(.4); } 7% { opacity: .9; } 30%, 100% { opacity: 0; transform: scale(1.9); } } /* >>> KURZORY (generováno tools_anim.py) */ @media (prefers-reduced-motion: no-preference) { .js .art .sel { animation: sel-in .5s var(--ease) .9s both, hero-sel 25.6s var(--ease-io) -1.2s infinite; } .js .art .cursor { animation: cur-in .7s var(--ease) .7s both, hero-cur 25.6s var(--ease-io) -1.2s infinite; } .js .art .cursor__ping { animation: hero-ping 25.6s linear -1.2s infinite; } .js .art .art__btnfx { animation: hero-btn 25.6s -1.2s infinite; } .js .art .sel__tag { animation: hero-tagpos 25.6s steps(1) -1.2s infinite; } .js .art .sel__tag b:nth-child(1) { animation: hero-t0 25.6s -1.2s infinite; } .js .art .sel__tag b:nth-child(2) { animation: hero-t1 25.6s -1.2s infinite; } .js .art .sel__tag b:nth-child(3) { animation: hero-t2 25.6s -1.2s infinite; } .js .art .sel__tag b:nth-child(4) { animation: hero-t3 25.6s -1.2s infinite; } .js .art .sel__tag b:nth-child(5) { animation: hero-t4 25.6s -1.2s infinite; } .js .art .sel__tag b:nth-child(6) { animation: hero-t5 25.6s -1.2s infinite; } .js .art .sel__tag b:nth-child(7) { animation: hero-t6 25.6s -1.2s infinite; } .js .art .sel__tag b:nth-child(8) { animation: hero-t7 25.6s -1.2s infinite; } .js .art .x-h1 { animation: build-x .6s var(--ease) calc(.15s + var(--d, 0) * 45ms) both, hero-x-h1 25.6s var(--ease-io) -1.2s infinite; } .js .art .x-h2 { animation: build-x .6s var(--ease) calc(.15s + var(--d, 0) * 45ms) both, hero-x-h2 25.6s var(--ease-io) -1.2s infinite; } .js .art .x-img { animation: build .6s var(--ease) calc(.15s + var(--d, 0) * 45ms) both, hero-x-img 25.6s var(--ease-io) -1.2s infinite; } .js .art .x-p1 { animation: build-x .6s var(--ease) calc(.15s + var(--d, 0) * 45ms) both, hero-x-p1 25.6s var(--ease-io) -1.2s infinite; } .js .art .x-p2 { animation: build-x .6s var(--ease) calc(.15s + var(--d, 0) * 45ms) both, hero-x-p2 25.6s var(--ease-io) -1.2s infinite; } .js .art .x-btn { animation: build .6s var(--ease) calc(.15s + var(--d, 0) * 45ms) both, hero-x-btn 25.6s var(--ease-io) -1.2s infinite; } .js .art .x-c1 { animation: build .6s var(--ease) calc(.15s + var(--d, 0) * 45ms) both, hero-x-c1 25.6s var(--ease-io) -1.2s infinite; } .js .art .x-c2 { animation: build .6s var(--ease) calc(.15s + var(--d, 0) * 45ms) both, hero-x-c2 25.6s var(--ease-io) -1.2s infinite; } .js .duo__cur--j .duo__tag { animation: dj-tag 24s steps(1) -1.6s infinite; } .js .duo__sel--j { animation: dj-sel 24s var(--ease-io) -1.6s infinite; } .js .duo__cur--j { animation: dj-cur 24s var(--ease-io) -1.6s infinite; } .js .duo__cur--j .cursor__ping { animation: dj-ping 24s linear -1.6s infinite; } .js .duo .x-h1 { animation: build .6s var(--ease) .15s both, dj-x-h1 24s var(--ease-io) -1.6s infinite; } .js .duo .x-h2 { animation: build .6s var(--ease) .15s both, dj-x-h2 24s var(--ease-io) -1.6s infinite; } .js .duo .x-img { animation: build .6s var(--ease) .15s both, dj-x-img 24s var(--ease-io) -1.6s infinite; } .js .duo .x-c2 { animation: build .6s var(--ease) .15s both, dj-x-c2 24s var(--ease-io) -1.6s infinite; } .js .duo .x-p1 { animation: build .6s var(--ease) .15s both, dj-x-p1 24s var(--ease-io) -1.6s infinite; } .js .duo .x-p2 { animation: build .6s var(--ease) .15s both, dj-x-p2 24s var(--ease-io) -1.6s infinite; } .js .duo__cur--v .duo__tag { animation: dv-tag 24s steps(1) 0.4s infinite; } .js .duo__sel--v { animation: dv-sel 24s var(--ease-io) 0.4s infinite; } .js .duo__cur--v { animation: dv-cur 24s var(--ease-io) 0.4s infinite; } .js .duo__cur--v .cursor__ping { animation: dv-ping 24s linear 0.4s infinite; } .js .duo .x-btn { animation: build .6s var(--ease) .15s both, dv-x-btn 24s var(--ease-io) 0.4s infinite; } .js .duo .x-c3 { animation: build .6s var(--ease) .15s both, dv-x-c3 24s var(--ease-io) 0.4s infinite; } .js .duo .x-cta { animation: build .6s var(--ease) .15s both, dv-x-cta 24s var(--ease-io) 0.4s infinite; } } @keyframes hero-sel { 0% { left: 5%; top: 22.5%; width: 48%; height: 17.5%; } 2.93%, 5.04% { left: 5%; top: 22.5%; width: 48%; height: 17.5%; } 7.71%, 9.25% { left: 5%; top: 22.5%; width: 58%; height: 17.5%; } 11.93%, 12.42% { left: 5%; top: 22.5%; width: 48%; height: 17.5%; } 15.43%, 24.92% { left: 50.5%; top: 6.3%; width: 27%; height: 8.6%; } 27.93%, 30.04% { left: 57%; top: 20.5%; width: 38%; height: 47%; } 32.71%, 34.25% { left: 57%; top: 20.5%; width: 32%; height: 39%; } 36.93%, 37.42% { left: 57%; top: 20.5%; width: 38%; height: 47%; } 40.43%, 42.54% { left: 5%; top: 42.8%; width: 45%; height: 9.2%; } 45.21%, 46.75% { left: 5%; top: 42.8%; width: 33%; height: 9.2%; } 49.43%, 49.92% { left: 5%; top: 42.8%; width: 45%; height: 9.2%; } 52.93%, 55.04% { left: 5%; top: 54.5%; width: 24%; height: 11.5%; } 57.71%, 59.25% { left: 12%; top: 54.5%; width: 24%; height: 11.5%; } 61.93%, 62.42% { left: 5%; top: 54.5%; width: 24%; height: 11.5%; } 65.43%, 67.54% { left: 5%; top: 73%; width: 29.4%; height: 20%; } 70.21%, 71.75% { left: 5%; top: 68%; width: 29.4%; height: 25%; } 74.43%, 74.92% { left: 5%; top: 73%; width: 29.4%; height: 20%; } 77.93%, 80.04% { left: 35.3%; top: 73%; width: 29.4%; height: 20%; } 82.71%, 84.25% { left: 35.3%; top: 73%; width: 33.4%; height: 20%; } 86.93%, 87.42% { left: 35.3%; top: 73%; width: 29.4%; height: 20%; } 90.43%, 97.07% { left: 5%; top: 5.5%; width: 20%; height: 9.5%; } 100% { left: 5%; top: 22.5%; width: 48%; height: 17.5%; } } @keyframes hero-cur { 0% { left: 53%; top: 30%; } 2.62%, 5.04% { left: 53%; top: 30%; } 7.71%, 9.25% { left: 63%; top: 30%; } 11.93%, 12.42% { left: 53%; top: 30%; } 15.12%, 24.92% { left: 66%; top: 12%; } 27.62%, 30.04% { left: 95%; top: 67.5%; } 32.71%, 34.25% { left: 89%; top: 59.5%; } 36.93%, 37.42% { left: 95%; top: 67.5%; } 40.12%, 42.54% { left: 41%; top: 50%; } 45.21%, 46.75% { left: 29%; top: 50%; } 49.43%, 49.92% { left: 41%; top: 50%; } 52.62%, 55.04% { left: 19%; top: 61%; } 57.71%, 59.25% { left: 26%; top: 61%; } 61.93%, 62.42% { left: 19%; top: 61%; } 65.12%, 67.54% { left: 19%; top: 93%; } 70.21%, 71.75% { left: 19%; top: 88%; } 74.43%, 74.92% { left: 19%; top: 93%; } 77.62%, 80.04% { left: 64.5%; top: 82%; } 82.71%, 84.25% { left: 68.5%; top: 82%; } 86.93%, 87.42% { left: 64.5%; top: 82%; } 90.12%, 97.07% { left: 19%; top: 12%; } 100% { left: 53%; top: 30%; } } @keyframes hero-ping { 0% { opacity: 0; transform: scale(.4); } 2.92% { opacity: 0; transform: scale(.4); } 3.33% { opacity: .8; transform: scale(.5); } 6.13% { opacity: 0; transform: scale(1.8); } 15.42% { opacity: 0; transform: scale(.4); } 15.83% { opacity: .8; transform: scale(.5); } 18.63% { opacity: 0; transform: scale(1.8); } 27.92% { opacity: 0; transform: scale(.4); } 28.33% { opacity: .8; transform: scale(.5); } 31.13% { opacity: 0; transform: scale(1.8); } 40.42% { opacity: 0; transform: scale(.4); } 40.83% { opacity: .8; transform: scale(.5); } 43.63% { opacity: 0; transform: scale(1.8); } 52.92% { opacity: 0; transform: scale(.4); } 53.33% { opacity: .8; transform: scale(.5); } 56.13% { opacity: 0; transform: scale(1.8); } 65.42% { opacity: 0; transform: scale(.4); } 65.83% { opacity: .8; transform: scale(.5); } 68.63% { opacity: 0; transform: scale(1.8); } 77.92% { opacity: 0; transform: scale(.4); } 78.33% { opacity: .8; transform: scale(.5); } 81.13% { opacity: 0; transform: scale(1.8); } 90.42% { opacity: 0; transform: scale(.4); } 90.83% { opacity: .8; transform: scale(.5); } 93.63% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; transform: scale(.4); } } @keyframes hero-x-h1 { 5.04% { width: 46%; } 7.71%, 9.25% { width: 56%; } 11.93% { width: 46%; } } @keyframes hero-x-h2 { 5.04% { width: 32%; } 7.71%, 9.25% { width: 40%; } 11.93% { width: 32%; } } @keyframes hero-x-img { 30.04% { width: 36%; height: 44%; } 32.71%, 34.25% { width: 30%; height: 36%; } 36.93% { width: 36%; height: 44%; } } @keyframes hero-x-p1 { 42.54% { width: 42%; } 45.21%, 46.75% { width: 30%; } 49.43% { width: 42%; } } @keyframes hero-x-p2 { 42.54% { width: 34%; } 45.21%, 46.75% { width: 24%; } 49.43% { width: 34%; } } @keyframes hero-x-btn { 55.04% { left: 6%; } 57.71%, 59.25% { left: 13%; } 61.93% { left: 6%; } } @keyframes hero-x-c1 { 67.54% { top: 74%; height: 18%; } 70.21%, 71.75% { top: 69%; height: 23%; } 74.43% { top: 74%; height: 18%; } } @keyframes hero-x-c2 { 80.04% { width: 27.4%; } 82.71%, 84.25% { width: 31.4%; } 86.93% { width: 27.4%; } } @keyframes hero-t0 { 0%, 13.17% { opacity: 1; } 13.67%, 99.4% { opacity: 0; } 100% { opacity: 1; } } @keyframes hero-t1 { 0%, 14.26% { opacity: 0; } 14.76%, 25.67% { opacity: 1; } 26.17%, 100% { opacity: 0; } } @keyframes hero-t2 { 0%, 26.76% { opacity: 0; } 27.26%, 38.17% { opacity: 1; } 38.67%, 100% { opacity: 0; } } @keyframes hero-t3 { 0%, 39.26% { opacity: 0; } 39.76%, 50.67% { opacity: 1; } 51.17%, 100% { opacity: 0; } } @keyframes hero-t4 { 0%, 51.76% { opacity: 0; } 52.26%, 63.17% { opacity: 1; } 63.67%, 100% { opacity: 0; } } @keyframes hero-t5 { 0%, 64.26% { opacity: 0; } 64.76%, 75.67% { opacity: 1; } 76.17%, 100% { opacity: 0; } } @keyframes hero-t6 { 0%, 76.76% { opacity: 0; } 77.26%, 88.17% { opacity: 1; } 88.67%, 100% { opacity: 0; } } @keyframes hero-t7 { 0%, 89.26% { opacity: 0; } 89.76%, 98.9% { opacity: 1; } 99.4%, 100% { opacity: 0; } } @keyframes hero-btn { 0%, 52.93% { opacity: 0; } 53.73% { opacity: .35; } 55.93%, 100% { opacity: 0; } } @keyframes hero-tagpos { 0%, 13.66% { bottom: calc(100% + 6px); } 14.26%, 26.16% { bottom: -24px; } 26.76%, 38.66% { bottom: calc(100% + 6px); } 39.26%, 51.16% { bottom: calc(100% + 6px); } 51.76%, 63.66% { bottom: calc(100% + 6px); } 64.26%, 76.16% { bottom: calc(100% + 6px); } 76.76%, 88.66% { bottom: calc(100% + 6px); } 89.26%, 99.39% { bottom: -24px; } 99.4%, 100% { bottom: calc(100% + 6px); } } @keyframes dj-sel { 0% { left: 5%; top: 22.5%; width: 46%; height: 17.5%; } 4.38%, 7.08% { left: 5%; top: 22.5%; width: 46%; height: 17.5%; } 10.52%, 12.49% { left: 5%; top: 22.5%; width: 56%; height: 17.5%; } 15.93%, 16.58% { left: 5%; top: 22.5%; width: 46%; height: 17.5%; } 21.04%, 23.75% { left: 57%; top: 20.5%; width: 38%; height: 47%; } 27.19%, 29.15% { left: 57%; top: 20.5%; width: 32%; height: 39%; } 32.6%, 33.25% { left: 57%; top: 20.5%; width: 38%; height: 47%; } 37.71%, 49.92% { left: 50.5%; top: 6.3%; width: 27%; height: 8.6%; } 54.38%, 57.08% { left: 35.3%; top: 73%; width: 29.4%; height: 20%; } 60.52%, 62.49% { left: 35.3%; top: 68%; width: 29.4%; height: 20%; } 65.93%, 66.58% { left: 35.3%; top: 73%; width: 29.4%; height: 20%; } 71.04%, 83.25% { left: 5%; top: 5.5%; width: 20%; height: 9.5%; } 87.71%, 90.41% { left: 5%; top: 42.8%; width: 45%; height: 9.2%; } 93.85%, 95.82% { left: 5%; top: 42.8%; width: 33%; height: 9.2%; } 99.26%, 95.63% { left: 5%; top: 42.8%; width: 45%; height: 9.2%; } 100% { left: 5%; top: 22.5%; width: 46%; height: 17.5%; } } @keyframes dj-cur { 0% { left: 51%; top: 30%; } 4.04%, 7.08% { left: 51%; top: 30%; } 10.52%, 12.49% { left: 61%; top: 30%; } 15.93%, 16.58% { left: 51%; top: 30%; } 20.71%, 23.75% { left: 95%; top: 67.5%; } 27.19%, 29.15% { left: 89%; top: 59.5%; } 32.6%, 33.25% { left: 95%; top: 67.5%; } 37.38%, 49.92% { left: 66%; top: 12%; } 54.04%, 57.08% { left: 50%; top: 82%; } 60.52%, 62.49% { left: 50%; top: 77%; } 65.93%, 66.58% { left: 50%; top: 82%; } 70.71%, 83.25% { left: 20%; top: 12%; } 87.38%, 90.41% { left: 48%; top: 50%; } 93.85%, 95.82% { left: 36%; top: 50%; } 99.26%, 95.63% { left: 48%; top: 50%; } 100% { left: 51%; top: 30%; } } @keyframes dj-ping { 0% { opacity: 0; transform: scale(.4); } 4.37% { opacity: 0; transform: scale(.4); } 4.78% { opacity: .8; transform: scale(.5); } 7.58% { opacity: 0; transform: scale(1.8); } 21.03% { opacity: 0; transform: scale(.4); } 21.44% { opacity: .8; transform: scale(.5); } 24.24% { opacity: 0; transform: scale(1.8); } 37.7% { opacity: 0; transform: scale(.4); } 38.11% { opacity: .8; transform: scale(.5); } 40.91% { opacity: 0; transform: scale(1.8); } 54.37% { opacity: 0; transform: scale(.4); } 54.78% { opacity: .8; transform: scale(.5); } 57.58% { opacity: 0; transform: scale(1.8); } 71.03% { opacity: 0; transform: scale(.4); } 71.44% { opacity: .8; transform: scale(.5); } 74.24% { opacity: 0; transform: scale(1.8); } 87.7% { opacity: 0; transform: scale(.4); } 88.11% { opacity: .8; transform: scale(.5); } 90.91% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; transform: scale(.4); } } @keyframes dj-x-h1 { 7.08% { width: 44%; } 10.52%, 12.49% { width: 54%; } 15.93% { width: 44%; } } @keyframes dj-x-h2 { 7.08% { width: 30%; } 10.52%, 12.49% { width: 38%; } 15.93% { width: 30%; } } @keyframes dj-x-img { 23.75% { width: 36%; height: 44%; } 27.19%, 29.15% { width: 30%; height: 36%; } 32.6% { width: 36%; height: 44%; } } @keyframes dj-x-c2 { 57.08% { top: 74%; } 60.52%, 62.49% { top: 69%; } 65.93% { top: 74%; } } @keyframes dj-x-p1 { 90.41% { width: 42%; } 93.85%, 95.82% { width: 30%; } 99.26% { width: 42%; } } @keyframes dj-x-p2 { 90.41% { width: 34%; } 93.85%, 95.82% { width: 24%; } 99.26% { width: 34%; } } @keyframes dj-tag { 0%, 18.84% { left: 11px; right: auto; top: 19px; } 18.85%, 35.51% { left: auto; right: 6px; top: 19px; } 35.52%, 52.18% { left: 11px; right: auto; top: 19px; } 52.19%, 68.84% { left: 11px; right: auto; top: 19px; } 68.85%, 85.51% { left: 11px; right: auto; top: 19px; } 85.52%, 99.89% { left: 11px; right: auto; top: 19px; } 99.9%, 100% { left: 11px; right: auto; top: 19px; } } @keyframes dv-sel { 0% { left: 5%; top: 54.5%; width: 24%; height: 11.5%; } 4.38%, 7.08% { left: 5%; top: 54.5%; width: 24%; height: 11.5%; } 10.52%, 12.49% { left: 12%; top: 54.5%; width: 24%; height: 11.5%; } 15.93%, 16.58% { left: 5%; top: 54.5%; width: 24%; height: 11.5%; } 21.04%, 23.75% { left: 65.6%; top: 73%; width: 29.4%; height: 20%; } 27.19%, 29.15% { left: 65.6%; top: 68%; width: 29.4%; height: 25%; } 32.6%, 33.25% { left: 65.6%; top: 73%; width: 29.4%; height: 20%; } 37.71%, 40.41% { left: 79%; top: 5.5%; width: 16%; height: 8.5%; } 43.85%, 45.82% { left: 73%; top: 5.5%; width: 22%; height: 8.5%; } 49.26%, 49.92% { left: 79%; top: 5.5%; width: 16%; height: 8.5%; } 54.38%, 66.58% { left: 5%; top: 73%; width: 29.4%; height: 20%; } 71.04%, 83.25% { left: 57%; top: 20.5%; width: 38%; height: 47%; } 87.71%, 95.63% { left: 50.5%; top: 6.3%; width: 27%; height: 8.6%; } 100% { left: 5%; top: 54.5%; width: 24%; height: 11.5%; } } @keyframes dv-cur { 0% { left: 18%; top: 61%; } 4.04%, 7.08% { left: 18%; top: 61%; } 10.52%, 12.49% { left: 25%; top: 61%; } 15.93%, 16.58% { left: 18%; top: 61%; } 20.71%, 23.75% { left: 80%; top: 93%; } 27.19%, 29.15% { left: 80%; top: 88%; } 32.6%, 33.25% { left: 80%; top: 93%; } 37.38%, 40.41% { left: 79.5%; top: 10%; } 43.85%, 45.82% { left: 73.5%; top: 10%; } 49.26%, 49.92% { left: 79.5%; top: 10%; } 54.04%, 66.58% { left: 24%; top: 87%; } 70.71%, 83.25% { left: 70%; top: 40%; } 87.38%, 95.63% { left: 58%; top: 12%; } 100% { left: 18%; top: 61%; } } @keyframes dv-ping { 0% { opacity: 0; transform: scale(.4); } 4.37% { opacity: 0; transform: scale(.4); } 4.78% { opacity: .8; transform: scale(.5); } 7.58% { opacity: 0; transform: scale(1.8); } 21.03% { opacity: 0; transform: scale(.4); } 21.44% { opacity: .8; transform: scale(.5); } 24.24% { opacity: 0; transform: scale(1.8); } 37.7% { opacity: 0; transform: scale(.4); } 38.11% { opacity: .8; transform: scale(.5); } 40.91% { opacity: 0; transform: scale(1.8); } 54.37% { opacity: 0; transform: scale(.4); } 54.78% { opacity: .8; transform: scale(.5); } 57.58% { opacity: 0; transform: scale(1.8); } 71.03% { opacity: 0; transform: scale(.4); } 71.44% { opacity: .8; transform: scale(.5); } 74.24% { opacity: 0; transform: scale(1.8); } 87.7% { opacity: 0; transform: scale(.4); } 88.11% { opacity: .8; transform: scale(.5); } 90.91% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; transform: scale(.4); } } @keyframes dv-x-btn { 7.08% { left: 6%; } 10.52%, 12.49% { left: 13%; } 15.93% { left: 6%; } } @keyframes dv-x-c3 { 23.75% { top: 74%; height: 18%; } 27.19%, 29.15% { top: 69%; height: 23%; } 32.6% { top: 74%; height: 18%; } } @keyframes dv-x-cta { 40.41% { left: 80%; width: 14%; } 43.85%, 45.82% { left: 74%; width: 20%; } 49.26% { left: 80%; width: 14%; } } @keyframes dv-tag { 0%, 18.84% { left: 11px; right: auto; top: 19px; } 18.85%, 35.51% { left: 11px; right: auto; top: -22px; } 35.52%, 52.18% { left: 11px; right: auto; top: 19px; } 52.19%, 68.84% { left: 11px; right: auto; top: -22px; } 68.85%, 85.51% { left: 11px; right: auto; top: 19px; } 85.52%, 99.89% { left: 11px; right: auto; top: 19px; } 99.9%, 100% { left: 11px; right: auto; top: 19px; } } /* <<< KURZORY */ /* O nás: výběry s klasickými úchyty v rozích */ .duo__sel > i { position: absolute; width: 8px; height: 8px; background: var(--white); border: 1.5px solid var(--blue); } .duo__sel > i:nth-child(1) { top: -5px; left: -5px; } .duo__sel > i:nth-child(2) { top: -5px; right: -5px; } .duo__sel > i:nth-child(3) { bottom: -5px; left: -5px; } .duo__sel > i:nth-child(4) { bottom: -5px; right: -5px; } .duo__sel--v > i { border-color: var(--ink); } /* Kontakt: „Co se stane po odeslání“ jako svislá osa ======================= */ .next { position: relative; grid-auto-rows: 1fr; } .next::before { content: ""; position: absolute; left: 5px; top: .5rem; bottom: 0; width: 1px; pointer-events: none; background: linear-gradient(180deg, rgba(11,16,32,.2) 0 70%, rgba(11,16,32,0) 92%); } .next__item::before, .next__item::after { display: none !important; } .next__item { padding-left: 2.25rem; } .next__node { left: 0; top: .3rem; width: 11px; height: 11px; border: 1.5px solid rgba(11,16,32,.55); background: var(--white); } .next__node::before { content: ""; position: absolute; inset: -7px; border: 1px solid var(--blue); opacity: 0; transform: scale(.5); } .next__item:last-child .next__node { background: var(--white); } @media (prefers-reduced-motion: no-preference) { .js .next::after { content: ""; position: absolute; left: 0; top: .3rem; width: 11px; height: 11px; pointer-events: none; background: linear-gradient(var(--blue), var(--blue)) center bottom / 11px 11px no-repeat, linear-gradient(180deg, rgba(31,74,250,0), rgba(31,74,250,.55) 30%, var(--blue)) center top / 2px 100% no-repeat; filter: drop-shadow(0 0 5px rgba(31,74,250,.6)) drop-shadow(0 0 14px rgba(31,74,250,.25)); animation: next-head 11s cubic-bezier(.65, 0, .35, 1) infinite; } .js .next__node, .js .next__node::before, .js .next__title { animation-delay: 0s; animation-duration: 11s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } .js .next__item:nth-child(1) .next__node { animation-name: nx-n0; } .js .next__item:nth-child(1) .next__node::before { animation-name: nx-r0; } .js .next__item:nth-child(1) .next__title { animation-name: nx-t0; } .js .next__item:nth-child(2) .next__node { animation-name: nx-n1; } .js .next__item:nth-child(2) .next__node::before { animation-name: nx-r1; } .js .next__item:nth-child(2) .next__title { animation-name: nx-t1; } .js .next__item:nth-child(3) .next__node { animation-name: nx-n2; } .js .next__item:nth-child(3) .next__node::before { animation-name: nx-r2; } .js .next__item:nth-child(3) .next__title { animation-name: nx-t2; } } @media (prefers-reduced-motion: reduce) { .next__item:last-child .next__node { background: var(--blue); border-color: var(--blue); } } /* uzly jsou na 0, 1/3 a 2/3 výšky seznamu (řádky mají stejnou výšku) */ @keyframes next-head { 0% { top: .3rem; height: 11px; opacity: 0; } 4%, 7% { top: .3rem; height: 11px; opacity: 1; } 22%, 32% { top: .3rem; height: calc(33.333% + 11px); opacity: 1; } 47%, 60% { top: .3rem; height: calc(66.666% + 11px); opacity: 1; } 78% { top: calc(66.666% + .3rem); height: 11px; opacity: 1; } 86%, 100% { top: calc(66.666% + .3rem); height: 11px; opacity: 0; } } @keyframes nx-n0 { 0%, 3% { background-color: var(--white); border-color: rgba(11,16,32,.55); } 4%, 62% { background-color: var(--blue); border-color: var(--blue); } 65%, 100% { background-color: var(--white); border-color: rgba(11,16,32,.55); } } @keyframes nx-r0 { 0%, 3% { opacity: 0; transform: scale(.5); } 6% { opacity: .55; transform: scale(1); } 12%, 62% { opacity: .22; transform: scale(1); } 65%, 100% { opacity: 0; transform: scale(.5); } } @keyframes nx-t0 { 0%, 3% { color: var(--ink); } 5%, 62% { color: var(--blue); } 65%, 100% { color: var(--ink); } } @keyframes nx-n1 { 0%, 21% { background-color: var(--white); border-color: rgba(11,16,32,.55); } 22%, 70% { background-color: var(--blue); border-color: var(--blue); } 73%, 100% { background-color: var(--white); border-color: rgba(11,16,32,.55); } } @keyframes nx-r1 { 0%, 21% { opacity: 0; transform: scale(.5); } 24% { opacity: .55; transform: scale(1); } 30%, 70% { opacity: .22; transform: scale(1); } 73%, 100% { opacity: 0; transform: scale(.5); } } @keyframes nx-t1 { 0%, 21% { color: var(--ink); } 23%, 70% { color: var(--blue); } 73%, 100% { color: var(--ink); } } @keyframes nx-n2 { 0%, 46% { background-color: var(--white); border-color: rgba(11,16,32,.55); } 47%, 82% { background-color: var(--blue); border-color: var(--blue); } 85%, 100% { background-color: var(--white); border-color: rgba(11,16,32,.55); } } @keyframes nx-r2 { 0%, 46% { opacity: 0; transform: scale(.5); } 49% { opacity: .55; transform: scale(1); } 55%, 82% { opacity: .22; transform: scale(1); } 85%, 100% { opacity: 0; transform: scale(.5); } } @keyframes nx-t2 { 0%, 46% { color: var(--ink); } 48%, 82% { color: var(--blue); } 85%, 100% { color: var(--ink); } } /* Kontakt: obálka – dopis se napíše, zasune, obálka se zalepí, odešle, odjede a přijede nová */ .mx__body, .mx__pocket, .mx__paper { fill: var(--white); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; } .mx__flap { fill: var(--blue-soft); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; transform-box: view-box; transform-origin: 175px 110px; } .mx__flapf { transform: scaleY(0); } .mx__l1 { fill: var(--ink); } .mx__btn { fill: var(--blue); } .mx__ln { transform-box: fill-box; transform-origin: left center; } .mx__letter { transform: translateY(-34px); } .mx__ring { fill: none; stroke: var(--blue); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; } .mx__check { fill: none; stroke: var(--white); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; } .mx__badge, .mx__env { transform-box: fill-box; transform-origin: center; } @media (prefers-reduced-motion: no-preference) { .js .mx__env { animation: mx-env 9s cubic-bezier(.65,0,.35,1) infinite both; } .js .mx__letter { animation: mx-letter 9s cubic-bezier(.65,0,.35,1) infinite both; } .js .mx__flapb { animation: mx-flapb 9s cubic-bezier(.65,0,.35,1) infinite both; } .js .mx__flapf { animation: mx-flapf 9s cubic-bezier(.65,0,.35,1) infinite both; } .js .mx__l1 { animation: mx-l1 9s var(--ease) infinite both; } .js .mx__l2 { animation: mx-l2 9s var(--ease) infinite both; } .js .mx__l3 { animation: mx-l3 9s var(--ease) infinite both; } .js .mx__l4 { animation: mx-l4 9s var(--ease) infinite both; } .js .mx__btn { animation: mx-btn 9s var(--ease) infinite both; } .js .mx__badge { animation: mx-badge 9s var(--ease) infinite both; } .js .mx__ring { animation: mx-ring 9s ease-out infinite both; } .js .mx__at { animation: mx-at 9s var(--ease) infinite both; } .js .mx__check { animation: mx-check 9s var(--ease-io) infinite both; } } /* 0–6 % přijede · 8–30 % píše · 34–46 % dopis do obálky · 48–56 % zalepí · 58–62 % odesláno ✓ · 80–90 % odjede · 90–100 % neviditelný reset */ @keyframes mx-env { 0% { opacity: 0; transform: translateX(-28px); } 6%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translate(64px, -6px); } } @keyframes mx-letter { 0%, 34% { transform: translateY(-34px); } 46%, 92% { transform: translateY(78px); } 95%, 100% { transform: translateY(-34px); } } @keyframes mx-flapb { 0%, 48% { transform: scaleY(1); } 52%, 93% { transform: scaleY(0); } 96%, 100% { transform: scaleY(1); } } @keyframes mx-flapf { 0%, 51% { transform: scaleY(0); } 56%, 93% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } } @keyframes mx-l1 { 0%, 8% { transform: scaleX(0); } 13%, 92% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } } @keyframes mx-l2 { 0%, 13% { transform: scaleX(0); } 18%, 92% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } } @keyframes mx-l3 { 0%, 18% { transform: scaleX(0); } 23%, 92% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } } @keyframes mx-l4 { 0%, 23% { transform: scaleX(0); } 27%, 92% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } } @keyframes mx-btn { 0%, 27% { transform: scaleX(0); } 31%, 92% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } } @keyframes mx-badge { 0%, 57% { transform: none; } 59.5% { transform: scale(1.22); } 62%, 100% { transform: none; } } @keyframes mx-ring { 0%, 57.5% { opacity: 0; transform: scale(1); } 58.5% { opacity: .7; } 62%, 100% { opacity: 0; transform: scale(1.6); } } @keyframes mx-at { 0%, 57% { opacity: 1; } 58.5%, 94% { opacity: 0; } 96%, 100% { opacity: 1; } } @keyframes mx-check { 0%, 58% { opacity: 0; stroke-dashoffset: 1; } 59% { opacity: 1; stroke-dashoffset: 1; } 62%, 92% { opacity: 1; stroke-dashoffset: 0; } 94%, 100% { opacity: 0; stroke-dashoffset: 0; } } /* O nás – Proč malé studio: srovnávací tabulka, sloupec VEXA prochází celou výškou */ .vs { display: grid; } .vs__row { display: grid; grid-template-columns: minmax(11rem, .9fr) 1fr 1.2fr 1fr; align-items: stretch; } .vs__q, .vs__c { padding: 1.5rem 1.5rem; border-top: 1px solid var(--line-dark); } .vs__row--head .vs__q, .vs__row--head .vs__c { border-top: 0; } .vs__q { padding-left: 0; display: flex; align-items: baseline; gap: .875rem; font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-on-dark); } .vs__q i { font-style: normal; color: var(--blue-on-dark); } .vs__c { font-size: 1.0625rem; color: var(--muted-on-dark); } .vs__row--head .vs__c { display: flex; flex-direction: column; justify-content: flex-end; gap: .75rem; padding-top: 2rem; font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; color: var(--white); } .vs__row--head .vs__c--them { opacity: .75; } .vs__c--us { position: relative; background: var(--white); color: var(--ink); font-weight: 700; border-top-color: var(--line-2); display: flex; align-items: baseline; gap: .625rem; } .vs__row--head .vs__c--us { color: var(--ink); align-items: flex-start; font-size: 1.75rem; } .vs__row:last-child .vs__c--us { box-shadow: 12px 0 0 var(--blue), 12px 12px 0 var(--blue); } .vs__row:not(:last-child) .vs__c--us { box-shadow: 12px 0 0 var(--blue); } .vs__row--head .vs__c--us { box-shadow: 12px 0 0 var(--blue); } .vs__badge { display: inline-block; padding: .25rem .5rem; background: var(--blue); color: var(--white); font-family: var(--mono); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .vs__mark { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: square; transform: translateY(2px); } .vs__c--them::before { content: none; } @media (prefers-reduced-motion: no-preference) { .js .vs__mark path { stroke-dasharray: 20; stroke-dashoffset: 20; } .js .vs__row.is-visible .vs__mark path { animation: vs-tick .6s var(--ease) calc(.35s + var(--i, 0) * 120ms) forwards; } } @keyframes vs-tick { to { stroke-dashoffset: 0; } } /* Mobil: každá otázka jako blok, naše odpověď výrazně, ostatní menší pod ní */ @media (max-width: 759.98px) { .vs__row--head { display: none; } .vs__row { grid-template-columns: 1fr 1fr; gap: 0; padding: 1.5rem 0; border-top: 1px solid var(--line-dark); } .vs__q, .vs__c { border-top: 0; } .vs__q { grid-column: 1 / -1; padding: 0 0 .875rem; } .vs__c--us { grid-column: 1 / -1; order: 1; margin-right: 8px; padding: 1.125rem 1.25rem; font-size: 1.125rem; box-shadow: 8px 8px 0 var(--blue) !important; } .vs__c--us::before { content: attr(data-l); position: absolute; top: -.6rem; left: 1.25rem; padding: .125rem .375rem; background: var(--blue); color: var(--white); font-family: var(--mono); font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; } .vs__c--them { order: 2; padding: 1.25rem 1rem 0 0; font-size: .9375rem; } .vs__c--them::before { content: attr(data-l); display: block; margin-bottom: .25rem; font-family: var(--mono); font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-on-dark); opacity: .7; } .vs__row:last-child { border-bottom: 1px solid var(--line-dark); } } .nowrap { white-space: nowrap; } /* Proklikávací náhled webu v rámečku prohlížeče */ a.browser { display: block; color: inherit; text-decoration: none; } a.browser:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; } .browser__open { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .9rem; background: var(--blue); color: var(--white); font-size: .875rem; font-weight: 600; letter-spacing: .01em; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; } a.browser:hover .browser__open, a.browser:focus-visible .browser__open { opacity: 1; transform: none; } @media (hover: none) { .browser__open { opacity: 1; transform: none; } } /* Instagram: ikona + jméno, po najetí jen změna barvy jako u ostatních odkazů */ .social { --soc: var(--blue); display: inline-flex; align-items: center; gap: .625rem; margin-top: 1.25rem; color: inherit; text-decoration: none; font-weight: 500; transition: color .25s var(--ease); } .site-footer .social { --soc: var(--blue-on-dark, #8EA5FF); } .social__box { display: grid; place-items: center; flex: none; } .social__icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; } .social__dot { fill: currentColor; stroke: none; } .social:hover, .social:focus-visible { color: var(--soc); } .social:focus-visible { outline: 2px solid var(--soc); outline-offset: 4px; } .contact__social .social { margin-top: .5rem; } .contact__social p:not(.eyebrow) { color: var(--muted); } .contact__social { padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); } .contact__social .eyebrow { display: block; margin-bottom: .375rem; } /* Náhled webu na úvodní stránce: náš rámeček s modrým stínem (reference zůstávají beze stínu) */ .work-feature .browser--link { border: 2px solid var(--ink); box-shadow: 16px 16px 0 var(--blue); } .work-feature .browser--link .browser__bar { border-bottom: 2px solid var(--ink); } @media (max-width: 899.98px) { .work-feature .browser--link { box-shadow: 8px 8px 0 var(--blue); margin-right: 8px; } }