/* ===================================================================== zf.css Filip Adámek design system, zeeframes 1:1 (spec: .ai/work/REFERENCE_SPEC-zeeframes.md) Values marked "zf" are measured on zeeframes.com (00-live-measurements.md). Components are documented in /partials/README.md. Page-specific CSS goes in /css/pages/.css, never in this file (several agents share it). Sections: 1 tokens · 2 base · 3 layout · 4 type · 5 buttons · 6 pills/tags · 7 header + menu 8 footer · 9 hero · 10 marquee · 11 reel · 12 service rows · 13 process · 14 showcase 15 hero phone · 16 CTA band · 17 FAQ · 18 note cards · 19 contact · 20 hairline grid 21 work cards · 22 numbered rows · 23 page hero · 24 reduced motion · 25 work slider · 26 glow ===================================================================== */ /* 1. TOKENS ------------------------------------------------------------ */ :root { --bg: #010102; /* page, cobalt black (zf #0B0B0B) */ --bg-2: #07070C; /* header, footer-top (zf #0D0D0D / #1A1A1A) */ --surface: #0C0B14; --card: #14121F; --line: #2A2738; /* hairlines only, never text */ --text: #FFFFFF; --text-2: #D6D3E2; /* body on dark (zf #D5D5D5) */ --muted: #9C98AE; /* meta, inactive (zf #8F8F8F) */ --accent: #58F6B1; /* tropical lime in every zf yellow #F3FE00 slot (spec 0.15) */ --accent-2: #58F6B1; /* lime (zf green #33DE1D / #8BFF4D) */ --accent-deep: #2FD08F; /* gradient end, zf yellow -> green #33DE1D */ --lav: #AD96F1; /* lavender, secondary: hero atmosphere, some backdrops */ --on-accent: #010102; --paper: #F5F3FA; /* light band (zf cream #FAF9F4) */ --paper-card: #FFFFFF; --paper-line: #DCD8E6; /* zf #D7D8D4 / #E4E4E7 */ --paper-hover: #EEEAF7; --ink: #0B0A12; --ink-2: #4A4658; /* zf #5B5252 */ --accent-ink: #0B6B47; /* lime as TEXT on paper (lime itself is 1.25:1 there); 5.95:1 on --paper */ --accent-2-ink: #0E7A52; --danger: #FF7A7A; --accent-wash: rgba(88, 246, 177, .10); --accent-2-wash: rgba(88, 246, 177, .12); --font: 'Inter Tight', 'Inter Tight Fallback', Arial, sans-serif; /* type (zf home values; phone values in the 575 block) */ --fs-hero: clamp(2.25rem, 0.9rem + 3.6vw, 3.75rem); /* split hero, spec 4 */ --fs-h1: 48px; --lh-h1: 60px; /* inner pages, zf /about 48/60 */ --fs-h2: 36px; --lh-h2: 40px; /* zf home 36/40 w500 */ --fs-h3: 18px; --lh-h3: 28px; --fs-lead: 16px; --lh-lead: 21px; /* zf section lead 16/21 */ --fs-body: 16px; --lh-body: 24px; --fs-small: 14px; --lh-small: 20px; /* zf card text 14/20 (bar conflict, see README) */ --fs-eyebrow: 14px; /* zf 14 uppercase */ --fs-nav: 14px; /* zf 14/24 */ --fs-btn: 14px; /* zf 14/20 */ /* layout */ --container: 1400px; --gutter: 80px; /* zf 80 / 60 <=1204 / 40 <=991 / 24 <=575 */ --section-y: 80px; /* zf py_80 / sm_py_32 */ --head-gap: 64px; /* zf mt_64 / sm_mt_32 */ --header-h: 84px; /* zf 22 0 + 40 row; 80 <=991 */ /* radii */ --r-pill: 99999px; --r-tag: 6px; --r-input: 8px; --r-panel: 12px; --r-grid: 14px; --r-media: 16px; --r-xl: 24px; /* shadows */ --shadow-menu: 0 16px 40px rgba(0, 0, 0, .45); --shadow-pop: 0 10px 25px rgba(0, 0, 0, .25); --glow-lav: 0 0 48px rgba(173, 150, 241, .35); /* lavender = secondary */ --glow-lime: 0 0 32px rgba(88, 246, 177, .45); /* motion */ --dur-1: 150ms; --dur-2: 200ms; --dur-3: 300ms; --dur-4: 500ms; --dur-5: 600ms; --dur-6: 1000ms; --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --ease-flex: cubic-bezier(.4, 0, .2, 1); } @font-face { font-family: 'Inter Tight Fallback'; src: local('Arial'); size-adjust: 107%; ascent-override: 90%; } @media (max-width: 1204px) { :root { --gutter: 60px; } } @media (max-width: 991px) { :root { --gutter: 40px; --header-h: 80px; } } @media (max-width: 575px) { :root { --gutter: 24px; /* zf live home = 24 */ --section-y: 32px; --head-gap: 32px; --fs-h1: 36px; --lh-h1: 44px; --fs-h2: 28px; --lh-h2: 40px; /* zf phone 28/40 */ } } /* 2. BASE -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--header-h); } body { font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } body.is-locked { overflow: hidden; } img, video, svg, canvas { display: block; max-width: 100%; } img { height: auto; } /* width/height attrs set the ratio; without this the height attr wins and aspect-ratio rules break (Služby grp images) */ a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; } button { cursor: pointer; } ul, ol { list-style: none; } h1, h2, h3, h4 { font-weight: 500; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .band--paper :focus-visible, .contact__card :focus-visible { outline-color: var(--accent-ink); } ::selection { background: var(--accent); color: var(--on-accent); } .sr-only { 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: fixed; left: 16px; top: -100px; z-index: 2000; background: var(--accent-2); color: var(--on-accent); padding: 12px 20px; border-radius: var(--r-pill); font-weight: 500; } .skip-link:focus { top: 16px; } /* 3. LAYOUT ------------------------------------------------------------ */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--section-y) 0; position: relative; } .section--60 { padding: 60px 0; } /* zf py_60 (contact, service pages) */ @media (max-width: 575px) { .section--60 { padding: 24px 0; } } .band--dark { background: var(--bg); color: var(--text); } .band--surface { background: #0B0B10; } .band--paper { background: var(--paper); color: var(--ink); } /* section head: eyebrow / H2 / lead (zf: centered, max 596, margins 16, phone 6) */ .sec-head { max-width: 596px; margin: 0 auto; text-align: center; } .sec-head--wide { max-width: 760px; } .sec-head__h { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 500; margin: 16px 0; text-wrap: balance; } .sec-head__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-2); } .band--paper .sec-head__lead { color: var(--ink-2); } .sec-body { margin-top: var(--head-gap); } /* row variant (zf insights): heading left, button right */ .sec-head--row { max-width: none; text-align: left; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; } .sec-head--row .sec-head__h { max-width: 755px; margin: 32px 0 0; } @media (max-width: 575px) { .sec-head__h { margin: 6px 0; } .sec-head--row { flex-direction: column; align-items: center; text-align: center; gap: 24px; } .sec-head--row .sec-head__h { margin-top: 16px; } } /* 4. TYPE helpers --------------------------------------------------------- */ .eyebrow { font-size: var(--fs-eyebrow); line-height: 20px; font-weight: 500; text-transform: uppercase; color: var(--accent); } .band--paper .eyebrow { color: var(--ink-2); } /* zf cream eyebrow #463F3F */ .eyebrow--accent-ink { color: var(--accent-ink) !important; } .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 500; letter-spacing: -0.02em; } .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 500; } .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-2); } .muted { color: var(--muted); } .accent { color: var(--accent); } /* 5. BUTTONS -------------------------------------------------------------- Markup: Label .btn__b is decorative; touch devices never see it (hover guard). */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 12px 24px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: var(--fs-btn); line-height: 20px; font-weight: 400; white-space: nowrap; overflow: hidden; transition: background-color var(--dur-5), border-color var(--dur-5), color var(--dur-5), transform 120ms; -webkit-tap-highlight-color: transparent; } .btn:active { transform: scale(.98); } .btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .btn__a { display: inline-flex; align-items: center; gap: 12px; transition: opacity var(--dur-3) ease-in-out, transform var(--dur-5); } .btn__b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; transition: opacity var(--dur-3) ease-in-out, left var(--dur-5), transform var(--dur-5); } @media (max-width: 575px) { .btn { padding: 10px 16px; } } /* primary = lime fill, hover label swap (zf btn-primary.btn-animate-swap) */ .btn--primary { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); font-weight: 500; } /* outline = label slides out, "Otevřít" slice slides in (zf btn-outlined.anim-translate) */ .btn--outline { border-color: rgba(255, 255, 255, .9); color: var(--text); } .btn--outline .btn__b { left: 150%; } /* light = white pill (zf btn-light.btn-slide-in; photo slot PLACEHOLDER until Filip sends a portrait) */ .btn--light { background: #fff; color: #010102; min-width: 180px; } .btn--light .btn__b { transform: translate(calc(-50% + 60px), -50%); } .btn--light .btn__photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } /* dark = for paper / lime bands (zf service-btn-dark) */ .btn--dark { background: #010102; color: #fff; border-color: #010102; } /* black = zf btn-black on cream (black + white 1px border) */ .btn--black { background: #010102; color: #fff; border-color: #fff; } /* compact secondary on gradient band (zf insight-btn.secondary-btn) */ .btn--soft { padding: 8px 16px; min-height: 36px; background: rgba(255, 255, 255, .7); border-color: rgba(1, 1, 2, .35); color: #010102; font-weight: 500; } @media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: transparent; color: var(--accent-2); } .btn--primary:hover .btn__a { opacity: 0; } .btn--primary:hover .btn__b { opacity: 1; } .btn--outline:hover { border-color: var(--accent); } .btn--outline:hover .btn__a { transform: translateX(-150%); } .btn--outline:hover .btn__b { left: 50%; opacity: 1; } .btn--light:hover { background: linear-gradient(106deg, #fff 38.84%, var(--accent) 229.18%); } .btn--light:hover .btn__a { opacity: 0; } .btn--light:hover .btn__b { opacity: 1; transform: translate(-50%, -50%); } .btn--dark:hover { background: var(--accent-2); color: #010102; } .btn--black:hover { background: #fff; color: #010102; border-color: #010102; } .btn--soft:hover { background: #010102; color: #fff; } } /* text link with arrow (zf explore-services) */ .link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; color: var(--text-2); transition: color var(--dur-2); } .link-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform var(--dur-2); } .band--paper .link-arrow { color: var(--ink); } @media (hover: hover) and (pointer: fine) { .link-arrow:hover { color: var(--text); } .band--paper .link-arrow:hover { color: var(--accent-ink); } .link-arrow:hover svg { transform: translateX(4px); } } /* 6. PILLS + TAGS ------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid rgba(88, 246, 177, .5); background: var(--accent-2-wash); color: var(--accent-2); font-size: 13px; line-height: 20px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; } .pill--soft { border-color: var(--paper-line); background: #fff; color: #3F3F46; text-transform: none; letter-spacing: 0; font-size: 12px; } /* zf insight category pill */ .tag { display: inline-flex; padding: 6px 10px; border-radius: var(--r-tag); background: var(--card); border: 1px solid var(--line); color: var(--text-2); font-size: 12px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } /* filter pill (Práce): */ .fpills { display: flex; gap: 8px; flex-wrap: wrap; } .fpill { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-weight: 500; cursor: pointer; transition: background-color var(--dur-2), color var(--dur-2); } .fpill:has(:checked) { background: var(--paper); color: #010102; } .fpill:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; } @media (max-width: 575px) { .fpills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; } } /* 7. HEADER + MOBILE MENU ------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 999; background: var(--bg-2); padding: 22px 0; } .site-header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 40px; } .brand { display: inline-flex; align-items: center; padding: 8px 0; margin: -8px 0; flex-shrink: 0; } /* 44 px tap target, header height unchanged */ .brand img { display: block; height: 28px; width: auto; } @media (max-width: 575px) { .brand { padding: 10px 0; margin: -10px 0; } .brand img { height: 24px; } } .nav__list { display: flex; gap: 12px; } .nav__link { position: relative; display: block; padding: 8px 16px; font-size: var(--fs-nav); line-height: 24px; color: var(--text); } .nav__link[aria-current="page"] { color: var(--accent); } .nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transform: translateX(-50%); } @media (hover: hover) and (pointer: fine) { .nav__link:hover { color: var(--accent); } } .site-header__end { display: flex; align-items: center; gap: 12px; } /* header CTA with the 12 s idle attention loop (zf headerBtnStyleCycle) */ .btn--header { padding: 8px 16px; min-height: 40px; border: .8px solid #fff; color: #fff; font-weight: 500; isolation: isolate; animation: zfHeaderCycle 12s ease-in-out infinite; transition: border-color var(--dur-3), color var(--dur-3); } .btn--header::before, .btn--header::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; } .btn--header::before { background: rgba(88, 246, 177, .10); animation: zfHeaderWash 12s ease-in-out infinite; } .btn--header::after { background: linear-gradient(90deg, transparent, rgba(88, 246, 177, .06) 35%, rgba(88, 246, 177, .24) 50%, rgba(88, 246, 177, .06) 65%, transparent); background-size: 220% 100%; background-position: 200% 0; animation: zfHeaderSweep 12s ease-in-out infinite; } .btn--header:hover, .btn--header:focus-visible { animation: none; border-color: var(--accent-2); color: var(--accent-2); } .btn--header:hover::before, .btn--header:hover::after, .btn--header:focus-visible::before, .btn--header:focus-visible::after { animation: none; opacity: 0; } @keyframes zfHeaderCycle { 0%, 41.67% { border-color: #fff; color: #fff; } 43%, 49% { border-color: var(--accent-2); color: var(--accent-2); } 52%, 100% { border-color: #fff; color: #fff; } } @keyframes zfHeaderWash { 0%, 43% { opacity: 0; } 51% { opacity: 1; } 55%, 100% { opacity: 0; } } @keyframes zfHeaderSweep { 0%, 41% { opacity: 0; background-position: 200% 0; } 42% { opacity: 1; background-position: 200% 0; } 50% { opacity: 1; background-position: -100% 0; } 54%, 100% { opacity: 0; background-position: -100% 0; } } .burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; } .burger__i { position: relative; width: 22px; height: 14px; } .burger__i i { position: absolute; left: 0; height: 2px; border-radius: 2px; background: #fff; transition: transform var(--dur-3) var(--ease-io), opacity var(--dur-2), width var(--dur-3); } .burger__i i:nth-child(1) { top: 0; width: 22px; } .burger__i i:nth-child(2) { top: 6px; width: 16px; left: 6px; } .burger__i i:nth-child(3) { top: 12px; width: 22px; } .burger[aria-expanded="true"] .burger__i i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] .burger__i i:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger__i i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .mmenu { position: fixed; z-index: 1000; left: 0; top: var(--header-h); width: 100%; height: calc(100dvh - var(--header-h)); background: var(--bg); padding: 48px var(--gutter) 32px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; transform: translateX(100%); visibility: hidden; transition: transform var(--dur-3) ease-in-out, visibility 0s linear var(--dur-3); } .mmenu.is-open { transform: none; visibility: visible; transition: transform var(--dur-3) ease-in-out, visibility 0s; } .mmenu__list { display: flex; flex-direction: column; gap: 16px; text-align: center; } .mmenu__link { display: flex; align-items: center; justify-content: center; min-height: 48px; font-size: 20px; line-height: 28px; font-weight: 500; } .mmenu__link[aria-current="page"] { color: var(--accent); } .mmenu__end { margin-top: auto; display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; padding-top: 32px; } .mmenu__mail { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--text-2); } /* services mega-dropdown (zf services-dropdown: full-width fixed panel, 280 px tabs + 2-col grid, .3s, hover-only; :focus-within added so it also opens from the keyboard) */ .nav__dd { position: relative; } .mega { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 1000; max-height: calc(100vh - var(--header-h)); overflow-y: auto; scrollbar-width: none; padding: 40px 0; border-radius: 16px; background: var(--bg); opacity: 0; visibility: hidden; transition: opacity var(--dur-3), visibility var(--dur-3); } .nav__dd--mega:hover .mega, .nav__dd--mega:focus-within .mega { opacity: 1; visibility: visible; } .mega__in { display: grid; grid-template-columns: 280px 1fr; gap: 24px; } .mega__tabs { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; height: fit-content; } .mega__tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border-radius: 8px; color: var(--muted); text-align: left; transition: background-color var(--dur-3); } .mega__tab span { font-size: 16px; line-height: 24px; font-weight: 600; color: #fff; } .mega__tab.is-active, .mega__tab:hover { background: rgba(88, 246, 177, .08); } /* zf accent at 8 % */ .mega svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .mega__panel { display: none; grid-template-columns: repeat(2, 1fr); gap: 24px; align-content: start; } .mega__panel.is-active { display: grid; } .mega__item { display: flex; gap: 12px; padding: 20px; border-radius: 6px; background: var(--bg-2); transition: background-color var(--dur-3), transform var(--dur-3); } .mega__item:hover, .mega__item[aria-current="page"] { background: #0C1A14; transform: translateY(-2px); } /* zf #1C1D08 = accent-tinted black */ .mega__t { display: block; font-size: 16px; line-height: 24px; font-weight: 600; color: #fff; } .mega__d { display: block; margin-top: 4px; font-size: 16px; line-height: 24px; color: #fff; } /* obory dropdown (zf industries-dropdown) */ .ddmenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 14px; min-width: 190px; z-index: 1000; padding: 8px; background: var(--bg); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; box-shadow: var(--shadow-menu); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } .ddmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .nav__dd--sm:hover .ddmenu, .nav__dd--sm:focus-within .ddmenu { opacity: 1; visibility: visible; } .ddmenu__a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 14px; line-height: 24px; font-weight: 500; white-space: nowrap; transition: background-color .2s, color .2s; } .ddmenu__a:hover, .ddmenu__a[aria-current="page"] { background: var(--bg-2); color: var(--accent); } /* inside the mobile menu: mega = accordion (zf max-height 0 -> 1970, padding 16 0, one column), obory = static list */ .mmenu__row { display: flex; align-items: center; justify-content: center; gap: 4px; } .mmenu__toggle { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-2); } .mmenu__toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-3); } .mmenu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .mmenu .mega { position: static; max-height: 0; overflow: hidden; padding: 0; border-radius: 0; text-align: left; transition: max-height var(--dur-3), padding var(--dur-3), opacity var(--dur-3), visibility var(--dur-3); } .mmenu .mega.is-open { max-height: 1970px; padding: 16px 0; opacity: 1; visibility: visible; } .mmenu .mega .container { padding: 0; } .mmenu .mega__in, .mmenu .mega__panel { grid-template-columns: 1fr; } .mmenu .mega__item { padding: 16px; } .mmenu .ddmenu { position: static; transform: none; margin-top: 8px; opacity: 1; visibility: visible; box-shadow: none; border: 0; background: transparent; padding: 0; min-width: 0; } .mmenu .ddmenu::before { display: none; } .mmenu .ddmenu__a { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 16px; color: var(--text-2); } @media (max-width: 991px) { .site-header { padding: 18px 0; } /* 18 + 44 burger = 80 (zf 20 + 40) */ .site-nav { display: none; } .burger { display: inline-flex; } } @media (max-width: 575px) { .btn--header { padding: 8px 14px; } /* zf hides it here; spec keeps a compact one */ .btn--header .btn__long { display: none; } } @media (min-width: 992px) { .mmenu { display: none; } } /* 8. FOOTER --------------------------------------------------------------- */ .footer-top { background: #12121A; padding: 24px 0; } /* zf #1A1A1A strip */ .footer-container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 24px; } .footer-top__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 16px; } /* zf address-card: 100 px region icon + name 20 w500 / address 14/22 / link 16/22 accent */ .footer-top__item { min-width: 0; padding: 20px; display: flex; align-items: center; gap: 12px; } .footer-top__icon { width: 100px; height: 100px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .footer-top__c { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .footer-top__k { font-size: 20px; line-height: normal; font-weight: 500; } .footer-top__v { font-size: 14px; line-height: 22px; color: var(--muted); } .footer-top__v a, a.footer-top__v { color: var(--accent-2); font-size: 16px; font-weight: 500; } .site-footer { background: var(--bg); border-top: 1px solid var(--line); padding: 64px 0 32px; } .footer__mark { display: block; } .footer__mark img { display: block; width: 100%; height: auto; } /* logo fills the container width like the zf wordmark image */ .footer__grid { display: grid; grid-template-columns: 1fr repeat(3, minmax(110px, 216px)); gap: 48px; margin: 72px 0; } .footer__blurb { font-size: 18px; line-height: 27px; color: var(--text-2); max-width: 393px; } .footer__h { font-size: 16px; line-height: 20px; font-weight: 600; } .footer__list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; } .footer__link { position: relative; display: inline-flex; align-items: center; gap: 4px; font-size: 15px; line-height: 20px; color: var(--muted); transition: color var(--dur-1); } .footer__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; opacity: 0; transition: opacity var(--dur-1); } .footer__link::after { content: ""; position: absolute; left: 0; top: 100%; width: calc(100% - 20px); height: 1px; background: #fff; opacity: 0; transition: opacity var(--dur-1); } @media (hover: hover) and (pointer: fine) { .footer__link:hover { color: #fff; } .footer__link:hover svg, .footer__link:hover::after { opacity: 1; } } .footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; font-size: 14px; line-height: 21px; color: var(--muted); } @media (max-width: 991px) { .footer-top__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer__grid > :first-child { grid-column: span 2; margin-bottom: 8px; } .footer__list { gap: 4px; } .footer__link { min-height: 40px; } } @media (max-width: 575px) { .footer-top__grid { grid-template-columns: 1fr; } .footer-top__item { padding: 0; } .footer-top__k { font-size: 18px; line-height: 28px; } .footer-container { padding: 0 16px; } .site-footer { padding: 32px 0 57px; } } /* 9. HERO (spec 4 + 0.25: split headline + violet atmosphere + fan of project devices) ---- */ .hero { /* one scale for the whole composition: everything below is a multiple of the fan height F (1440x900 design: F = 380). F grows with the width (26.4vw) until the height budget stops it: header + 32 + F + headline (2 x 1.04 x .16F) + text + CTA = header + 1.333F + 210 <= 100svh - 40, so the CTA ends >= 40 px above the fold. */ --fan-h: clamp(200px, min(26.4vw, .75 * (100svh - var(--header-h)) - 190px), 720px); --fan-w: clamp(var(--fan-h) * 2.9, 66vw, var(--fan-h) * 3.6); /* wide screens: the fan opens sideways instead of getting taller */ --e: calc((var(--fan-w) - var(--fan-h) * 2.9) / 2); /* extra half-width over the 1440 fan */ --mid: calc(var(--fan-h) * .69); --sky-h: calc(32px + var(--fan-h) * .74); --R: 4100px; /* horizon circle radius: 64 px curve depth at 1440 */ position: relative; overflow: hidden; isolation: isolate; padding: 32px 0 40px; } .hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero__sky { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--sky-h) + 80px); background: radial-gradient(20% 12% at 18% 58%, rgba(88, 246, 177, .35), transparent), radial-gradient(20% 12% at 82% 58%, rgba(88, 246, 177, .35), transparent), radial-gradient(35% 45% at 8% 70%, rgba(173, 150, 241, .55), transparent 70%), radial-gradient(35% 45% at 92% 70%, rgba(173, 150, 241, .55), transparent 70%), linear-gradient(180deg, #010102 0%, #1A1030 35%, #2B1A4F 70%, #3A2470 100%); } .hero__sky::after { content: ""; position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero__ground, .hero__rim { position: absolute; top: var(--sky-h); left: calc(50% - var(--R)); width: calc(var(--R) * 2); height: calc(var(--R) * 2); border-radius: 50%; } .hero__ground { background: var(--bg); } .hero__rim { transform: translateY(-1px); background: linear-gradient(90deg, transparent 41%, var(--lav) 46%, var(--accent) 50%, var(--lav) 54%, transparent 59%); } .hero__rim--blur { filter: blur(12px); opacity: .4; transform: translateY(-4px); } .hero__in { position: relative; text-align: center; } .hero__core { display: grid; grid-template-columns: 1fr var(--mid) 1fr; column-gap: calc(var(--fan-h) * .106); max-width: min(100%, calc(var(--fan-h) * 3.36)); margin: 0 auto; } /* fan of projects: photoreal PSD cutouts (assets/hero/v1). Positions are % of the fan box; zf.js writes --s (0 -> 1 scroll progress through the hero, desktop only) and each device spreads by its own --dx/--dy/--dr. */ .fan { --s: 0; grid-column: 1 / -1; position: relative; z-index: 1; height: var(--fan-h); width: var(--fan-w); margin: 0 calc(50% - var(--fan-w) / 2); perspective: 1800px; pointer-events: none; } .fan__item { position: absolute; margin: 0; left: var(--x); top: var(--y); width: var(--w); z-index: var(--z, 1); transform: translate3d(calc(var(--dx, 0px) * var(--s)), calc(var(--dy, 0px) * var(--s)), calc(var(--dz, 0px) * var(--s))) rotateY(calc(var(--ry, 0deg) * (1 - var(--s) * .5))) rotate(calc(var(--r, 0deg) + var(--dr, 0deg) * var(--s))); will-change: transform; } .fan__item img { display: block; width: 100%; height: auto; animation: zfFloat var(--fd, 6s) ease-in-out var(--fdl, 0s) infinite alternate; filter: drop-shadow(0 0 18px rgba(88, 246, 177, .16)) drop-shadow(0 28px 32px rgba(0, 0, 0, .55)); } /* desktop arrangement (box 2.9F x F at 1440, up to 3.6F wide): three MacBooks in an arc, two iPhones in front. Widths are in F (+ a share of the extra width --e) so the devices never outgrow the box height. */ .fan__item--joga { --x: 1%; --y: 9%; --w: calc(var(--fan-h) * 1.015 + var(--e) * .3); --z: 1; --ry: 16deg; --r: -4deg; --dx: calc(var(--fan-h) * -.6); --dy: calc(var(--fan-h) * -.13); --dr: -6deg; --fd: 6.6s; --fdl: -2s; } .fan__item--sirupy { --x: calc(99% - var(--w)); --y: 6%; --w: calc(var(--fan-h) * 1.015 + var(--e) * .3); --z: 1; --ry: -16deg; --r: 4deg; --dx: calc(var(--fan-h) * .6); --dy: calc(var(--fan-h) * -.15); --dr: 6deg; --fd: 7.2s; --fdl: -4s; } .fan__item--fiko { --x: calc(50% - var(--w) / 2); --y: 3%; --w: calc(var(--fan-h) * 1.305 + var(--e) * .15); --z: 2; --dy: calc(var(--fan-h) * -.105); --dz: 80px; --fd: 6s; } .fan__item--volum { --x: calc(1% + var(--fan-h) * .377 + var(--e) * .2); --y: 38%; --w: calc(var(--fan-h) * .5655 + var(--e) * .08); --z: 3; --r: -3deg; --dx: calc(var(--fan-h) * -.53); --dy: calc(var(--fan-h) * -.064); --dr: -8deg; --dz: 140px; --fd: 5.4s; --fdl: -1s; } /* front-centre iPhone stands in the reserved middle column between the headline halves (spec 4.3: object never overlaps text) */ .fan__item--servis { --x: calc(50% - var(--w) / 2); --y: 57%; --w: calc(var(--fan-h) * .3828 + var(--e) * .06); --z: 4; --dy: calc(var(--fan-h) * .095); --dz: 100px; --fd: 5.8s; --fdl: -3s; } .fan .glow--fan { --glow-a: .2; z-index: 0; width: 86%; height: 70%; aspect-ratio: auto; left: 7%; top: 18%; filter: blur(40px); } .hero__h { position: relative; z-index: 2; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; padding-top: 20px; font-size: calc(var(--fan-h) * .16); line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; } .hero__h-l { grid-column: 1; text-align: right; } .hero__h-r { grid-column: 3; text-align: left; } .hero__h em { font-style: normal; color: var(--accent); } .hero__rest { max-width: max(560px, calc(var(--fan-h) * 1.5)); margin: 32px auto 0; } .hero__p { font-size: clamp(18px, var(--fan-h) * .048, 26px); line-height: 1.55; color: var(--text-2); } .hero__btns { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 24px; flex-wrap: wrap; } /* feature row (spec 4.3; moved out of the hero into the proof band so the hero fits one screen) */ .proof__feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); text-align: left; } .proof__feat { display: flex; align-items: center; gap: 12px; color: var(--text-2); } .proof__feat svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 1100px) { /* stacked: fan, then the headline in two centred lines */ .hero { --fan-h: min(392px, calc((100vw - 2 * var(--gutter)) / 1.43)); --fan-w: min(100vw - 2 * var(--gutter), var(--fan-h) * 1.43); --R: 1800px; padding-top: 24px; } .hero__core { grid-template-columns: 1fr; max-width: none; } .fan { margin: 0 auto; } .hero__p { font-size: 18px; line-height: 28px; } .hero__rest { max-width: 560px; } .fan__item--joga { --x: -2%; --y: 2%; --w: 46%; --ry: 14deg; } .fan__item--sirupy { --x: 56%; --y: 0%; --w: 46%; --ry: -14deg; } .fan__item--fiko { --x: 18%; --y: 16%; --w: 64%; } .fan__item--volum { --x: 4%; --y: 47%; --w: 29%; } .fan__item--servis { --x: 76%; --y: 38%; --w: 17%; } .hero__h { grid-column: 1; display: block; padding-top: 24px; font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem); line-height: 1.08; } .hero__h-l, .hero__h-r { display: block; text-align: center; } .proof__feats { grid-template-columns: repeat(2, 1fr); gap: 16px 20px; } } @media (max-width: 575px) { .hero { --R: 700px; } .hero__h { padding-top: 16px; } .hero__p { font-size: 17px; line-height: 26px; } .hero__rest { margin-top: 16px; } .hero__btns { flex-direction: column; align-items: stretch; gap: 8px; } .hero__btns .btn { min-height: 52px; } .hero__btns .link-arrow { justify-content: center; } } /* intro once per session (html.zf-intro set in ; content is readable if JS fails) */ .zf-intro .hero__sky { animation: zfFade 600ms var(--ease-out) both; } .zf-intro .hero__rim { animation: zfRim 800ms var(--ease-out) 100ms both; } .zf-intro .fan { animation: zfRise40 900ms var(--ease-out) 200ms both; } .zf-intro .hero__h-l { animation: zfFromL 700ms var(--ease-out) 350ms both; } .zf-intro .hero__h-r { animation: zfFromR 700ms var(--ease-out) 350ms both; } .zf-intro .hero__p, .zf-intro .hero__btns { animation: zfRise12 500ms var(--ease-out) both; } .zf-intro .hero__p { animation-delay: 600ms; } .zf-intro .hero__btns { animation-delay: 660ms; } @keyframes zfFade { from { opacity: 0; } } @keyframes zfRim { from { opacity: 0; transform: translateY(-1px) scaleX(0); } } @keyframes zfRise40 { from { opacity: 0; transform: translateY(40px); } } @keyframes zfRise12 { from { opacity: 0; transform: translateY(12px); } } @keyframes zfFromL { from { opacity: 0; transform: translateX(-24px); } } @keyframes zfFromR { from { opacity: 0; transform: translateX(24px); } } @keyframes zfFloat { from { transform: translateY(-6px); } to { transform: translateY(6px); } } /* 10. PROOF MARQUEE (zf trusted-partners, inside hero bottom) ----------- */ .proof { padding: 8px 0 80px; overflow: hidden; } /* band right after the hero: feature row, then zf marquee */ .proof__label { margin-top: 64px; font-size: 14px; line-height: 20px; font-weight: 500; text-transform: uppercase; text-align: center; color: #fff; } .marquee { display: grid; padding: 20px 0; margin-top: 24px; overflow: hidden; } .marquee__track { display: flex; width: max-content; animation: zfMarquee 55s linear infinite; } /* zf speed 1150 px / 15 s = 77 px/s; stack group (28 logos) = ~4270 px -> 55 s */ .marquee__group { display: flex; align-items: center; gap: 48px; padding-right: 48px; } .marquee__item { display: inline-flex; align-items: center; gap: 6px; height: 32px; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; color: #fff; white-space: nowrap; } .marquee__item small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; } a.marquee__item { transition: color var(--dur-2); } @media (hover: hover) and (pointer: fine) { a.marquee__item:hover { color: var(--accent); } } .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; } @keyframes zfMarquee { to { transform: translateX(-50%); } } /* tech-stack variant (spec 0.14): original-colour logo + name, same track/gap as zf */ .marquee--stack .marquee__item { gap: 10px; font-size: 18px; font-weight: 500; letter-spacing: 0; } .marquee__logo { width: 32px; height: 32px; flex: none; } .marquee--stack .marquee__group > li { display: flex; } /* no inline baseline gap: the text-less GSAP item stays centred */ .marquee__logo--word { width: 72px; height: 72px; margin: -20px -8px; } /* GSAP wordmark sits in a square 128 viewBox (glyph 104x38): 72 px = ~59x21 glyph, optically level with 32 px logos + 18 px names */ @media (max-width: 768px) { .marquee__group { gap: 42px; padding-right: 42px; } } @media (max-width: 575px) { .proof { padding: 8px 0 32px; } .proof__label { margin-top: 32px; } } /* 11. REEL / VIDEO STRIP (zf videos-section) ------------------------------ */ .reel { position: relative; overflow: hidden; background: var(--card); } .reel__media { position: relative; aspect-ratio: 16 / 9; max-height: calc(100dvh - 88px); width: 100%; } /* zf 1920x1080 reel */ .reel__media img, .reel__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .reel__media video { opacity: 0; transition: opacity var(--dur-3); } .reel__media video.is-playing { opacity: 1; } .reel__pill { position: absolute; left: 24px; bottom: 24px; z-index: 1; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px; border-radius: var(--r-pill); background: #fff; color: #010102; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-pop); } .reel__pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; } @media (max-width: 575px) { .reel__pill { left: 12px; bottom: 12px; } } /* 12. SERVICES (owner rework 2026-11-04): numbered tile grid on the paper band, hairline cells */ .svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--paper-line); border-left: 1px solid var(--paper-line); } .svc-grid > li { display: flex; } .svc-tile { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 228px; padding: 28px 24px 24px; border-right: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); color: var(--ink); transition: background-color var(--dur-4), color var(--dur-4); } .svc-tile__n { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--accent-ink); font-variant-numeric: tabular-nums; transition: color var(--dur-4); } .svc-tile__t { margin-top: auto; padding-top: 32px; font-size: 26px; line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; } .svc-tile__k { margin-top: 8px; padding-right: 56px; font-size: 16px; line-height: 24px; color: var(--ink-2); transition: color var(--dur-4); } .svc-tile__arrow { position: absolute; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--paper-line); display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--dur-4), border-color var(--dur-4), transform var(--dur-4) var(--ease-out, ease-out); } .svc-tile__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .svc-tile--ask { background: var(--ink); color: #fff; } .svc-tile--ask .svc-tile__n { color: var(--accent-2); } .svc-tile--ask .svc-tile__k { color: #C9C5D6; } .svc-tile--ask .svc-tile__arrow { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); } @media (hover: hover) and (pointer: fine) { .svc-tile:hover { background: var(--ink); color: #fff; } .svc-tile:hover .svc-tile__n { color: var(--accent-2); } .svc-tile:hover .svc-tile__k { color: #C9C5D6; } .svc-tile:hover .svc-tile__arrow { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); transform: rotate(45deg); } } .band--paper .svc-tile:focus-visible { outline-offset: -4px; } @media (max-width: 991px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } .svc-tile { min-height: 200px; } } @media (max-width: 575px) { .svc-grid { grid-template-columns: 1fr; } .svc-tile { min-height: 0; padding: 20px 16px; display: grid; grid-template-columns: 32px 1fr; column-gap: 8px; } .svc-tile__n { grid-row: 1 / span 2; padding-top: 4px; } .svc-tile__t { margin-top: 0; padding-top: 0; font-size: 22px; padding-right: 52px; } .svc-tile__k { margin-top: 4px; } .svc-tile__arrow { top: 50%; bottom: auto; right: 16px; translate: 0 -50%; } } /* 13. PROCESS (zf "From idea to execution": scroll-spy rail + sticky screen) */ .process { display: flex; justify-content: space-between; gap: 80px; } .process__list { position: relative; flex: 1; max-width: 609px; padding-left: 50px; display: flex; flex-direction: column; gap: 100px; counter-reset: step; --p: 0px; } .process__list::before, .process__list::after { content: ""; position: absolute; left: 29px; top: 0; width: 3px; } .process__list::before { bottom: 0; background: linear-gradient(270deg, rgba(255, 255, 255, .2) 86.27%, transparent 88.15%); } .process__list::after { height: var(--p); max-height: 100%; background: var(--accent-2); } .process__step { position: relative; counter-increment: step; color: var(--muted); transition: color var(--dur-4) linear; } .process__step::before { content: counter(step, decimal-leading-zero); position: absolute; left: -51px; top: 10px; font-size: 16px; font-weight: 500; color: var(--accent); opacity: 0; transition: opacity var(--dur-4) linear; } .process__step.is-active { color: #fff; } .process__step.is-active::before { opacity: 1; } .process__t { font-size: 36px; line-height: normal; font-weight: 600; } .process__tag { margin: 6px 0 16px; font-size: 18px; line-height: normal; color: var(--muted); } .process__d { font-size: 16px; line-height: 24px; } /* step name: lime underline draws in when the step is reached; description words light up with scroll (owner 2026-11-04) */ .process__name { background: linear-gradient(var(--accent-2), var(--accent-2)) 0 100% / 0% 3px no-repeat; padding-bottom: 4px; transition: background-size 700ms cubic-bezier(.22, 1, .36, 1); } .process__step.is-active .process__name { background-size: 100% 3px; } .process__d .w { opacity: .22; transition: opacity 260ms ease-out; } .process__d .w.is-on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .process__name { transition: none; } .process__d .w { opacity: 1; transition: none; } } .process__inline, .process__n { display: none; } .process__aside { flex: 1; max-width: 527px; position: sticky; top: 20vh; height: fit-content; } .process__screens { position: relative; aspect-ratio: 527 / 506; border-radius: var(--r-media); } /* zf img: max-width 100%, radius 16, contain; corners baked into the alpha */ .process__screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-media); opacity: 0; transition: opacity var(--dur-3); } /* + 300 ms crossfade (spec; zf swaps instantly) */ .process__screens img.is-active { opacity: 1; } @media (max-width: 768px) { .process { display: block; } .process__list { padding-left: 0; max-width: none; gap: 32px; } .process__list::before, .process__list::after, .process__step::before { display: none; } .process__aside { display: none; } .process__step { color: #fff; } .process__inline { display: block; margin-top: 24px; width: 100%; height: auto; border-radius: var(--r-media); } /* full image, no crop */ .process__n { display: inline; } } @media (max-width: 575px) { .process__t { font-size: 20px; font-weight: 600; } /* zf 390: 20 w600 */ .process__n { font-size: 16px; margin-right: 6px; } .process__tag { font-size: 16px; margin: 2px 0 12px; } .process__d { font-size: 14px; line-height: 21px; } } /* 14. SHOWCASE (zf "Our Creative Showcase": staggered 2-col) ------------- */ .showcase { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 48px; } .showcase > :nth-child(even) { margin-top: 100px; } .show-card { display: block; color: #fff; } .show-card__body { margin-top: 24px; } .show-card__name { font-size: 14px; line-height: 20px; color: var(--muted); margin-bottom: 8px; } .show-card__t { font-size: 24px; line-height: 1.17; font-weight: 500; text-wrap: pretty; } /* zf thumb: 450 tall (414 phone), radius 24, img cover; one photoreal mockup per card (spec 0.10) */ .show-card__thumb { aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; background: var(--card); } .show-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .show-card__t { transition: color var(--dur-3); } @media (hover: hover) and (pointer: fine) { .show-card:hover .show-card__t { color: var(--accent); } } .discovery { margin-top: 60px; padding: 40px 32px; border-radius: var(--r-xl); border: 1px dashed #3A3650; text-align: center; } .discovery__in { max-width: 494px; margin: 0 auto; } .discovery__h { font-size: 24px; line-height: normal; font-weight: 600; } .discovery__p { margin: 16px 0 24px; font-size: 15px; line-height: 22px; color: var(--text-2); } .discovery__p a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 768px) { .showcase { grid-template-columns: 1fr; row-gap: 32px; } .showcase > :nth-child(even) { margin-top: 0; } } @media (max-width: 575px) { .show-card__thumb { aspect-ratio: 4 / 3; } .show-card__name { font-size: 16px; } .show-card__t { font-weight: 600; } .discovery { margin-top: 32px; padding: 24px 20px; } .discovery__p { font-size: 14px; } } /* 15. MEDIA FALLBACK: a failed hides itself so the card gradient shows (zf.js). No device frames anywhere (spec 0.10/0.16). */ .is-missing { visibility: hidden; } /* 16. CTA BAND (owner rework 2026-11-04): dark card, headline left, lead + button right, lime edge line */ .cta-band { padding: 72px 0; background: var(--bg); color: #fff; } .cta-band__txt { position: relative; padding: 56px; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(60% 120% at 100% 100%, rgba(173, 150, 241, .16), transparent 70%), var(--card); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 64px; row-gap: 24px; align-items: start; } .cta-band__txt::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--accent-2), rgba(88, 246, 177, 0) 70%); } .cta-band__h { grid-row: 1 / span 2; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; } .cta-band__p { font-size: 18px; line-height: 28px; color: var(--text-2); } .cta-band__txt > .btn { min-height: 44px; padding: 12px 24px; justify-self: start; background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); } @media (hover: hover) and (pointer: fine) { .cta-band__txt > .btn:hover { background: transparent; color: var(--accent-2); } } @media (max-width: 768px) { .cta-band__txt { grid-template-columns: 1fr; } .cta-band__h { grid-row: auto; } .cta-band__txt { padding: 40px 32px; } } @media (max-width: 575px) { .cta-band { padding: 40px 0; } .cta-band__txt { padding: 32px 20px; } .cta-band__h { font-size: 30px; line-height: 36px; } .cta-band__p { font-size: 16px; line-height: 24px; } .cta-band__txt > .btn { justify-self: stretch; justify-content: center; } } /* 17. FAQ (zf glass accordion) ----------------------------------------------- */ .faq { display: flex; flex-wrap: wrap; column-gap: 48px; row-gap: 32px; } .faq__side { max-width: 409px; flex: 1 1 300px; } .faq__h { margin: 32px 0 12px; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 500; } .faq__p { font-size: 16px; line-height: 21px; color: var(--text-2); } .faq__btns { display: flex; align-items: center; gap: 32px; margin-top: 32px; } .faq__list { flex: 1 1 480px; display: flex; flex-direction: column; gap: 16px; } .faq__item { border-radius: var(--r-panel); border: 1px solid #3C3C3C; background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: border-color var(--dur-3) ease-in-out; } .faq__item.is-open { border-color: var(--accent); } .faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px; text-align: left; font-size: 16px; line-height: normal; font-weight: 500; color: #fff; } .faq__icon { position: relative; flex: none; width: 24px; height: 24px; border-radius: var(--r-tag); border: 1px solid #373636; background: #2B2A2A; transition: background-color var(--dur-3), border-color var(--dur-3); } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: #fff; border-radius: 1px; transition: transform 250ms, opacity 250ms; } .faq__icon::after { transform: rotate(90deg); } .faq__item.is-open .faq__icon { background: var(--accent); border-color: var(--accent); } .faq__item.is-open .faq__icon::before { background: #010102; } .faq__item.is-open .faq__icon::after { transform: rotate(180deg); opacity: 0; } .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) ease-in-out; } .faq__item.is-open .faq__a { grid-template-rows: 1fr; } .faq__a > div { overflow: hidden; } .faq__a p { padding: 0 20px 20px; font-size: 16px; line-height: 24px; color: var(--text-2); } .faq__a p + p { padding-top: 0; margin-top: -8px; } @media (max-width: 575px) { .faq__h { margin-top: 16px; } } /* 18. NOTE CARDS (zf insight card; Z dílny teaser, paper band) --------------- */ .notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .note-card { display: flex; flex-direction: column; border: 1px solid var(--paper-line); border-radius: var(--r-panel); overflow: hidden; background: #fff; color: var(--ink); outline: 2px solid transparent; outline-offset: 1px; transition: outline-color var(--dur-3), box-shadow var(--dur-3); } .note-card__media { height: 196px; overflow: hidden; background: var(--card); } .note-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3); } .note-card__body { flex: 1; padding: 24px; background: #fff; transition: background-color var(--dur-3); } .note-card .pill--soft { margin-bottom: 20px; } .note-card__t { font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: -0.32px; color: #1B1818; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--dur-3); } .note-card__p { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (hover: hover) and (pointer: fine) { .note-card:hover { outline-color: var(--accent-ink); box-shadow: rgba(100, 100, 111, .2) 0 7px 29px; } .note-card:hover .note-card__media img { transform: scale(1.05); } .note-card:hover .note-card__body { background: var(--paper-hover); } .note-card:hover .note-card__t { color: var(--accent-ink); } } @media (max-width: 768px) { .notes { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .notes { grid-template-columns: 1fr; margin-top: 24px; } } /* 19. CONTACT (zf #contact; Filip's mailto flow) -------------------------- */ .contact { background: var(--paper); } .contact__card { display: flex; border-radius: var(--r-panel); overflow: hidden; } .contact__side { flex: 1 1 0; max-width: 542px; padding: 60px 40px; background: #fff; color: var(--ink); display: flex; flex-direction: column; } .contact__side-h { font-size: 24px; line-height: 32px; font-weight: 600; color: #27272A; } .contact__photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid #454545; background: var(--paper); } .contact__quote { margin-top: 32px; font-size: 16px; line-height: 28px; color: #27272A; } .contact__mail { display: inline-block; margin-top: 24px; font-size: 22px; line-height: 30px; font-weight: 600; color: var(--accent-ink); word-break: break-all; } .contact__checks { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; } .contact__checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 24px; color: var(--ink-2); } .contact__checks svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke: var(--accent-2-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .contact__who { margin-top: auto; padding-top: 32px; display: flex; align-items: center; gap: 12px; } .contact__who b { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: #27272A; } .contact__who span { font-size: 14px; line-height: 20px; color: var(--ink-2); } /* testimonial slider in the white half (zf cf-testimonial-slider: 3 s pill-progress dot, .5 s crossfade, pause on hover) */ .tslider { display: flex; flex-direction: column; flex: 1; } .tslider__h { font-size: 24px; line-height: 32px; font-weight: 600; color: #27272A; } .tslider__view { display: grid; grid-template-columns: 1fr; margin-top: 60px; flex-grow: 1; } .tslide { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility .5s ease; } .tslide.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .tslide__icon { width: 32px; height: 32px; fill: var(--accent-ink); } .tslide__q { margin-top: 16px; font-size: 16px; line-height: 28px; color: #27272A; } .tslide__foot { margin-top: 83px; display: flex; align-items: center; gap: 12px; } .tslide__name { display: block; font-size: 16px; line-height: 24px; font-weight: 600; color: #000; margin-bottom: 4px; } .tslide__role { display: block; font-size: 14px; line-height: 20px; color: #000; } .tslider__ctrl { margin-top: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .tslider__btns { display: flex; gap: 20px; } .tslider__nav { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #D0D0D0; color: #555; transition: border-color .2s, color .2s; } .tslider__nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tslider__nav:hover { border-color: #000; color: #000; } .tslider__dots { display: flex; align-items: center; gap: 5px; min-width: 112px; padding: 4px; border-radius: 100px; background: #F4F4F4; } .tslider__dot { position: relative; width: 6px; height: 6px; flex: none; border-radius: 50%; background: #D4D4D8; overflow: hidden; transition: width .2s, height .2s, border-radius .2s; } .tslider__dot.is-active { width: 60px; height: 10px; border-radius: 5px; cursor: default; } .tslider__dot i { position: absolute; inset: 0; border-radius: 5px; background: #0B0B0B; transform: scaleX(0); transform-origin: left center; animation: zfDot 3s linear forwards; } .tslider.is-paused .tslider__dot i { animation-play-state: paused; } @keyframes zfDot { to { transform: scaleX(1); } } .contact__main { flex: 1 1 0; padding: 60px; background: #000; color: #fff; } .contact__eyebrow { color: var(--accent-2); } .contact__h { margin: 24px 0 12px; max-width: 510px; font-size: 36px; line-height: 44px; font-weight: 400; letter-spacing: -0.72px; } .contact__lead { font-size: 16px; line-height: 24px; color: #E1E1E1; } .cf { margin-top: 60px; display: flex; flex-direction: column; gap: 24px; } .cf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; } .cf__f { display: flex; flex-direction: column; } .cf__f--wide { grid-column: 1 / -1; } .cf__l { display: block; margin-bottom: 6px; font-size: 16px; line-height: 24px; font-weight: 500; color: #D5D5D5; } .cf__l b { font-weight: 500; color: var(--muted); margin-right: 6px; font-variant-numeric: tabular-nums; } .cf__l em { font-style: normal; color: var(--muted); font-weight: 400; } .cf input, .cf textarea { width: 100%; min-height: 44px; padding: 8px 0 12px; border-radius: 0; border-bottom: 1px solid #8F8F8F; font-size: 14px; line-height: 20px; font-weight: 500; color: #fff; transition: border-color var(--dur-3) ease-in-out; } .cf textarea { height: 117px; resize: none; } .cf input::placeholder, .cf textarea::placeholder { color: #8F8F8F; } .cf input:focus, .cf textarea:focus { outline: none; border-bottom-color: var(--accent-2); } .cf input:focus-visible, .cf textarea:focus-visible { box-shadow: 0 1px 0 0 var(--accent-2); } .cf [aria-invalid="true"] { border-bottom-color: var(--danger); } .cf__need { border: 0; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .chip { min-height: 40px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid #8F8F8F; font-size: 14px; line-height: 20px; color: #fff; transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2); } .chip[aria-pressed="true"] { background: var(--accent-2); border-color: var(--accent-2); color: #010102; } @media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--accent-2); } } .cf__err { font-size: 14px; line-height: 20px; color: var(--danger); margin-top: 6px; } .cf__err:empty { display: none; } .cf__end { display: flex; flex-direction: column; gap: 12px; } .cf__prev { font-size: 14px; line-height: 20px; color: var(--muted); } .cf__prev b { font-weight: 500; color: #D5D5D5; } .cf__submit { width: 100%; min-height: 44px; background: #242323; border: 1.5px solid var(--accent-2); color: #fff; font-size: 14px; } @media (hover: hover) and (pointer: fine) { .cf__submit:hover { background: linear-gradient(90deg, var(--accent), var(--accent-deep)); color: #010102; } } .cf__done { padding: 16px; border-radius: var(--r-panel); background: var(--accent-2-wash); border: 1px solid rgba(88, 246, 177, .4); font-size: 16px; line-height: 24px; color: #fff; } .cf__done a { color: var(--accent-2); text-decoration: underline; } @media (max-width: 768px) { .contact { background: #000; } .contact__card { flex-direction: column-reverse; } .contact__side { display: none; } .contact__main { padding: 0; } } @media (max-width: 575px) { .cf__grid { grid-template-columns: 1fr; } .contact__h { font-size: 16px; line-height: 28px; } /* zf live 390: 16/28 w400 */ .cf input, .cf textarea { font-size: 16px; } /* < 16 px makes iOS zoom on focus */ .cf { margin-top: 32px; } } /* 20. HAIRLINE GRID (zf service template; gap-1px shell) --------------------- */ .hgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-grid); overflow: hidden; } .hcell { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--cell-gap, 80px); padding: 24px; background: var(--surface); transition: background-color var(--dur-3); } .hcell::before { content: ""; position: absolute; width: 500px; height: 500px; top: -300px; left: -250px; border-radius: 50%; filter: blur(50px); opacity: 0; pointer-events: none; transition: opacity var(--dur-3) ease; background: radial-gradient(circle, rgba(88, 246, 177, .22) 0, rgba(88, 246, 177, .10) 30%, rgba(88, 246, 177, .04) 60%, transparent 75%); } .hcell > * { position: relative; } .hcell__icon { width: 44px; height: 44px; border-radius: var(--r-grid); background: var(--accent-wash); border: .8px solid rgba(88, 246, 177, .20); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); } .hcell__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; } .hcell__t { font-size: 18px; line-height: 28px; font-weight: 500; margin-bottom: 8px; } .hcell__p { font-size: 14px; line-height: 21px; color: var(--text-2); } @media (hover: hover) and (pointer: fine) { .hcell:hover { background: var(--card); } .hcell:hover::before { opacity: 1; } } .hgrid--paper { background: var(--paper-line); border-color: var(--paper-line); } .hgrid--paper .hcell { background: var(--paper-card); color: var(--ink); } .hgrid--paper .hcell::before { display: none; } .hgrid--paper .hcell__p { color: var(--ink-2); } .hgrid--paper .hcell__icon { color: var(--accent-ink); background: rgba(11, 107, 71, .08); } @media (hover: hover) and (pointer: fine) { .hgrid--paper .hcell:hover { background: var(--paper-hover); } } .hcell--cta { background: var(--accent-2) !important; color: #010102; justify-content: center; align-items: flex-start; gap: 24px; } .hcell--cta .hcell__p { color: #010102; } .hcell--span2 { grid-column: span 2; } @media (max-width: 991px) { .hgrid { grid-template-columns: repeat(min(var(--cols, 3), 2), 1fr); } .hcell--span2 { grid-column: span 1; } } @media (max-width: 575px) { .hgrid { grid-template-columns: 1fr; } .hcell { padding: 20px; gap: var(--cell-gap-sm, 32px); } } /* 21. WORK CARDS (zf /work grid) -------------------------------------------- */ .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 24px; } .work-card { display: flex; flex-direction: column; gap: 16px; color: #fff; } .work-card__media { aspect-ratio: 4 / 3; border-radius: var(--r-media); overflow: hidden; background: var(--card); position: relative; } .work-card__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } /* photoreal mockup card 4:3 */ .work-card__meta { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); } .work-card__t { font-size: 18px; line-height: 26px; font-weight: 600; } /* zf /work 18/26 */ .work-card__p { font-size: 14px; line-height: 20px; color: var(--text-2); } .work-tile { display: flex; align-items: flex-end; padding: 32px; border-radius: var(--r-media); border: 1px solid var(--line); font-size: 22px; line-height: 1.4; font-weight: 500; } @media (hover: hover) and (pointer: fine) { .work-card:hover .work-card__media > img { transform: scale(1.04); } } @media (max-width: 991px) { .work-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .work-grid { grid-template-columns: 1fr; gap: 28px; } } /* 22. NUMBERED ROWS (zf "six reasons") -------------------------------------- */ .nrows { border-top: 1px solid var(--line); } .nrow { display: flex; align-items: center; column-gap: 100px; row-gap: 16px; padding: 28px 24px; border-bottom: 1px solid var(--line); transition: background-color var(--dur-2), color var(--dur-2); } .nrow__n { flex: none; width: 32px; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--muted); } .nrow__t { flex: none; width: 310px; font-size: 18px; line-height: 28px; font-weight: 500; } .nrow__p { max-width: 485px; font-size: 16px; line-height: 24px; color: var(--text-2); } @media (hover: hover) and (pointer: fine) { .nrow:hover { background: var(--accent-2); color: #010102; } .nrow:hover .nrow__n, .nrow:hover .nrow__p { color: #010102; } } @media (max-width: 768px) { .nrow { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 16px; } .nrow__t { width: auto; } } /* 23. PAGE HERO (inner pages, zf /work) ----------------------------------- */ .page-hero { padding: 80px 0; text-align: center; } .page-hero__h { max-width: 640px; margin: 0 auto; font-size: 44px; line-height: 1.18; font-weight: 500; text-wrap: balance; } .page-hero__p { max-width: 640px; margin: 16px auto 0; font-size: 16px; line-height: 24px; color: var(--text-2); } @media (max-width: 575px) { .page-hero { padding: 48px 0; } .page-hero__h { font-size: 30px; } } .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; line-height: 20px; color: var(--muted); } .crumbs a { color: var(--text-2); } .crumbs a:hover { color: var(--accent); } @media (max-width: 991px) { .crumbs { display: none; } } /* 24. REDUCED MOTION (global guard; zf guards only the header button) ----- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .btn--header, .btn--header::before, .btn--header::after, .fan__item img { animation: none !important; } .marquee__track { animation: none !important; } .marquee__group[aria-hidden="true"] { display: none; } .marquee__track { width: auto; } .marquee__group { flex-wrap: wrap; justify-content: center; row-gap: 16px; padding: 0 var(--gutter); } } /* 25. WORK SLIDER (zf industries / ai-solutions #work; header in the container, track bleeds right only) */ .ws { overflow-x: clip; } /* the bleed (incl. scrollbar width) never makes the page scroll sideways */ .shead__r { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; } .shead__r .shead__p { text-align: left; } @media (max-width: 991px) { .shead__r { align-items: flex-start; } } .sbtns { display: flex; gap: 12px; } .sbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: .6px solid #F5F5F4; color: #F5F5F4; transition: background-color var(--dur-2), opacity var(--dur-2); } .sbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) and (pointer: fine) { .sbtn:hover:not(:disabled) { background: rgba(255, 255, 255, .08); } } .sbtn:disabled { opacity: .5; cursor: default; } .ws__track { --bleed: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter)); display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-right: calc(-1 * var(--bleed)); border: .6px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px; } .ws__track::-webkit-scrollbar { display: none; } .ws__c { flex: 0 0 400px; display: flex; flex-direction: column; gap: 32px; padding: 16px; background: var(--card); border-right: .6px solid var(--line); scroll-snap-align: start; color: #fff; } .ws__m { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--bg-2); } .ws__m img { width: 100%; height: 100%; object-fit: cover; } /* 4:3 photoreal mockup in a 4:3 box = shown whole */ .ws__b { display: flex; flex-direction: column; gap: 4px; } .ws__b .work-card__meta { margin-bottom: 12px; } .ws__t { font-size: 18px; line-height: 28px; font-weight: 500; } .ws__p { font-size: 14px; line-height: 20px; color: var(--text-2); } .ws__a { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; min-height: 44px; font-size: 14px; line-height: 21px; color: var(--accent-2); } .ws__a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-2); } @media (hover: hover) and (pointer: fine) { .ws__c:hover .ws__a svg, a.hcell:hover .ws__a svg { transform: translateX(3px); } .ws__c:hover .ws__t { color: var(--accent); } } .ws__c:focus-visible, .ws__track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } @media (max-width: 575px) { .ws__c { flex-basis: 300px; } } /* 26. GLOW (signature lime accent):