/* ============================================================ michalovytrubky-shop.cz — mt-b2b-1.css (v1, 2026-06-26) B2B / Velkoobchod landing — SS-derived (ss-b2b-6.css reskin). ZERO JS. HTML lives in Shoptet page body (Stránky -> Velkoobchod -> Zdrojový kód). DETECTION: body.in-velkoobchod (page slug MUST = "velkoobchod"). Brand: Helvetica + MT modrá #0052DA. Em dash NIKDY. ============================================================ */ body.in-velkoobchod{ --ss-canvas:#F5F7FB; /* page bg (mt-bg-soft) */ --ss-sage:#0052DA; /* PRIMARY accent (mt-primary) */ --ss-sage-deep:#003BA8; /* primary hover (mt-primary-deep) */ --ss-terracotta:#0052DA; /* form band -> primary */ --ss-cream:#DBEAFE; /* pale strip / hover (mt-primary-bg) */ --ss-black:#253041; /* headings (mt-accent) */ --ss-text:#253041; /* body text (mt-text) */ --ss-muted:rgba(37,48,65,.64); --ss-border-soft:rgba(37,48,65,.08); --ss-border-mid:rgba(37,48,65,.16); --ss-body-serif:'Helvetica','Helvetica Neue',Arial,sans-serif; --mt-display:'Helvetica','Helvetica Neue',Arial,sans-serif; } /* ============================================================ michalovytrubky-shop.cz — mt-b2b-4.css — v3 PRODUCTION CSS for /b2b/ page (Shoptet Stránka) HYBRID PATTERN — ZERO JS. HTML lives in Shoptet page body (Vzhled a Obsah → Stránky → /b2b/ → Zdrojový kód). DETECTION: body.in-velkoobchod (page slug "velkoobchod" → Shoptet generuje body.in-velkoobchod + type-page) KOLIZE: MT nemá v živém žádný generic page stylesheet (mt-static/ mt-docs NENÍ nasazený), takže B2B stránka renderuje čistě bez override-war. Pokud se v budoucnu nasadí generic body.type-page CSS, vyluč z něj B2B přes :not(.in-velkoobchod). ARCHITEKTURA: - .mt-b2b breaks out of Shoptet's narrow page column to full 100vw - Each section: colored bg full-width, content constrained via .mt-b2b__inner - Pale base + modré full-bleed bandy = homepage-like rhythm - HERO = brand gradient band (žádná foto závislost), viz spodek souboru - FAQ = native
/ (zero JS) - Barvy/fonty řízené var blokem nahoře (MT modrá #0052DA, Helvetica). ============================================================ */ /* ============================================================ 0) NEUTRALIZE Shoptet page chrome — full-width breakout base Live DOM (2026-05-28): .container.content-wrapper > .content-wrapper-in > aside.sidebar.sidebar-left (HIDE) > main#content.content.narrow > .content-inner > article.pageArticleDetail > header[itemprop=headline] > h1 (HIDE — native page title) > [itemprop=about] > .mt-b2b (OUR CONTENT) ============================================================ */ /* Hide sidebar (categories + payment box) — B2B single column */ body.in-velkoobchod aside.sidebar, body.in-velkoobchod .sidebar-left, body.in-velkoobchod .sidebar-right, body.in-velkoobchod .sidebar { display: none !important; } /* Collapse column layout + force full width through whole wrapper chain. display:block on .content-wrapper-in removes the flex column grid so main spans full width. Full width + centered container = clean 100vw breakout. */ body.in-velkoobchod .container.content-wrapper, body.in-velkoobchod .content-wrapper-in, body.in-velkoobchod main#content, body.in-velkoobchod main#content.narrow, body.in-velkoobchod main#content .content-inner, body.in-velkoobchod .pageArticleDetail, body.in-velkoobchod .pageArticleDetail > [itemprop="about"] { display: block !important; background: transparent !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; border: none !important; } body.in-velkoobchod { background: var(--mt-bg-soft, #F5F7FB); } body.in-velkoobchod .breadcrumbs-wrapper { display: none !important; } /* Hide native Shoptet page title (article header h1) — our hero h1 stays */ body.in-velkoobchod .pageArticleDetail > header, body.in-velkoobchod .pageArticleDetail > header[itemprop="headline"], body.in-velkoobchod article.pageArticleDetail > header { display: none !important; } /* ============================================================ 1) ROOT — break out to full viewport width ============================================================ */ body.in-velkoobchod .mt-b2b { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--mt-bg-soft, #F5F7FB); font-family: var(--mt-display, sans-serif); color: var(--ss-text, #253041); overflow: hidden; } /* Inner wrapper — matches homepage section width (max-width 1440, same padding) */ body.in-velkoobchod .mt-b2b__inner { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 2vw, 32px); } body.in-velkoobchod .mt-b2b__inner--narrow { max-width: 760px; } /* Section vertical rhythm */ body.in-velkoobchod .mt-b2b__sec { padding: clamp(56px, 7vw, 112px) 0; } /* ============================================================ 2) SHARED — eyebrow / heading / lead ============================================================ */ body.in-velkoobchod .mt-b2b__eyebrow { display: block; font-family: var(--mt-display, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mt-primary, #0052DA); margin: 0 0 16px; } body.in-velkoobchod .mt-b2b__h2 { font-family: var(--mt-display, serif); font-size: clamp(32px, 4.5vw, 56px); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; color: var(--mt-accent, #253041); margin: 0 0 20px; } body.in-velkoobchod .mt-b2b__h2 em { font-style: italic; color: var(--mt-primary, #0052DA); } body.in-velkoobchod .mt-b2b__lead { font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--mt-text-2, rgba(15, 15, 15, .62)); margin: 0; max-width: 540px; } /* ── CENTERED HEADS — match homepage (760 centered) + bulletproof. B2B page lives in article.pageArticleDetail; Shoptet sets .h2/h2 styles. Direct text-align on children (specificity 0,3,1) beats any inheritance loss and Shoptet's element rules. Heads get max-width + margin auto like homepage. ── */ body.in-velkoobchod .mt-b2b__brands-head, body.in-velkoobchod .mt-b2b__audience-head, body.in-velkoobchod .mt-b2b__how-head, body.in-velkoobchod .mt-b2b__form-head, body.in-velkoobchod .mt-b2b__faq-head { max-width: 820px; margin-left: auto !important; margin-right: auto !important; text-align: center; } body.in-velkoobchod .mt-b2b__brands-head .mt-b2b__h2, body.in-velkoobchod .mt-b2b__brands-head .mt-b2b__lead, body.in-velkoobchod .mt-b2b__brands-head .mt-b2b__eyebrow, body.in-velkoobchod .mt-b2b__audience-head .mt-b2b__h2, body.in-velkoobchod .mt-b2b__audience-head .mt-b2b__lead, body.in-velkoobchod .mt-b2b__audience-head .mt-b2b__eyebrow, body.in-velkoobchod .mt-b2b__how-head .mt-b2b__h2, body.in-velkoobchod .mt-b2b__how-head .mt-b2b__lead, body.in-velkoobchod .mt-b2b__how-head .mt-b2b__eyebrow, body.in-velkoobchod .mt-b2b__form-head .mt-b2b__h2, body.in-velkoobchod .mt-b2b__form-head .mt-b2b__lead, body.in-velkoobchod .mt-b2b__form-head .mt-b2b__eyebrow, body.in-velkoobchod .mt-b2b__faq-head .mt-b2b__h2, body.in-velkoobchod .mt-b2b__faq-head .mt-b2b__lead, body.in-velkoobchod .mt-b2b__faq-head .mt-b2b__eyebrow { text-align: center !important; } /* h2 font-size/family wins over Shoptet .h2/h2 + h1-h4 rules (belt+suspenders) */ body.in-velkoobchod .mt-b2b .mt-b2b__h2 { font-family: var(--mt-display, serif) !important; font-size: clamp(40px, 5vw, 64px) !important; font-weight: 300 !important; line-height: 1.05 !important; } /* ============================================================ 1b) HERO BANNER — full-width image slot (Michal vloží vlastní banner) Žádný text overlay. .mt-b2b je už 100vw, banner img bere plnou šířku. ============================================================ */ body.in-velkoobchod .mt-b2b__banner { display: block; width: 100%; line-height: 0; } body.in-velkoobchod .mt-b2b__banner img { width: 100%; height: auto; display: block; } /* ============================================================ 3) BUTTONS ============================================================ */ body.in-velkoobchod .mt-b2b__btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 28px; font-family: var(--mt-display, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-radius: 6px; cursor: pointer; border: none; transition: background .25s cubic-bezier(.4,0,.2,1), gap .25s cubic-bezier(.4,0,.2,1), color .25s cubic-bezier(.4,0,.2,1), border-color .25s cubic-bezier(.4,0,.2,1); } body.in-velkoobchod .mt-b2b__btn--primary { background: var(--mt-primary, #0052DA); color: #fff; } body.in-velkoobchod .mt-b2b__btn--primary:hover { background: #fff; color: var(--mt-accent, #253041); gap: 12px; } body.in-velkoobchod .mt-b2b__btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); } body.in-velkoobchod .mt-b2b__btn--ghost:hover { border-color: #fff; gap: 12px; } body.in-velkoobchod .mt-b2b__btn--dark { background: var(--mt-accent, #253041); color: #fff; } body.in-velkoobchod .mt-b2b__btn--dark:hover { background: var(--mt-primary, #0052DA); gap: 12px; } body.in-velkoobchod .mt-b2b__btn--white { background: #fff; color: var(--mt-accent, #253041); } body.in-velkoobchod .mt-b2b__btn--white:hover { background: var(--mt-primary-bg, #DBEAFE); color: var(--mt-accent, #253041); gap: 12px; } body.in-velkoobchod .mt-b2b__btn--outline-w { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); } body.in-velkoobchod .mt-b2b__btn--outline-w:hover { border-color: #fff; gap: 12px; } /* ============================================================ 4) HERO — STEJNÁ pravidla jako homepage carousel (style.css #carousel .item img): celý obrázek (height:auto), strop max-height 78vh + object-fit cover. BEZ overlaye. ============================================================ */ body.in-velkoobchod .mt-b2b__hero { position: relative; display: block; width: 100%; overflow: hidden; line-height: 0; } body.in-velkoobchod .mt-b2b__hero-bg { position: static; } body.in-velkoobchod .mt-b2b__hero-bg img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: cover; object-position: right center; } /* HERO OVERLAY ODSTRANEN (mt-b2b-4): banner nema zadny text, tak tmavy scrim jen ztmavoval fotku a nehodil se k svetlemu editorial brandu. Ponechano bez prekryvu. */ body.in-velkoobchod .mt-b2b__hero-bg::after { content: none; } body.in-velkoobchod .mt-b2b__hero-inner { position: relative; z-index: 1; width: 100%; } body.in-velkoobchod .mt-b2b__hero-eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.8); margin: 0 0 18px; } body.in-velkoobchod .mt-b2b__hero-h1 { font-family: var(--mt-display, serif); font-size: clamp(44px, 7vw, 88px); font-weight: 300; line-height: .98; letter-spacing: -0.04em; color: #fff; margin: 0 0 24px; max-width: 760px; } body.in-velkoobchod .mt-b2b__hero-h1 em { font-style: italic; } body.in-velkoobchod .mt-b2b__hero-lead { font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; color: rgba(255,255,255,.88); margin: 0 0 36px; max-width: 520px; } body.in-velkoobchod .mt-b2b__hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } /* ============================================================ 5) TRUST BAR — cream strip ============================================================ */ body.in-velkoobchod .mt-b2b__trust { background: var(--mt-primary-bg, #DBEAFE); } body.in-velkoobchod .mt-b2b__trust-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; padding: clamp(18px, 2.4vw, 36px) 0; } body.in-velkoobchod .mt-b2b__trust-lead { font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif); font-style: italic; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.4; color: var(--mt-accent, #253041); margin: 0; } body.in-velkoobchod .mt-b2b__stat-num { display: block; font-family: var(--mt-display, serif); font-size: clamp(32px, 3.5vw, 48px); font-weight: 300; line-height: 1; color: var(--mt-primary, #0052DA); margin: 0 0 6px; } body.in-velkoobchod .mt-b2b__stat-label { font-family: var(--mt-display, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mt-text-2, rgba(15, 15, 15, .62)); } /* ============================================================ 5b) BRANDS — full-bleed light band, logo grid (B2B catalog breadth) ============================================================ */ body.in-velkoobchod .mt-b2b__brands { background: #FFFFFF; } body.in-velkoobchod .mt-b2b__brands-head { text-align: center; margin: 0 0 clamp(32px, 3.5vw, 56px); } body.in-velkoobchod .mt-b2b__brands-head .mt-b2b__lead { margin: 0 auto; } body.in-velkoobchod .mt-b2b__brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 280px)); gap: clamp(24px, 3vw, 64px); align-items: center; justify-content: center; } body.in-velkoobchod .mt-b2b__brand-logo { display: flex; align-items: center; justify-content: center; padding: clamp(12px, 1.6vw, 22px); aspect-ratio: 3 / 2; } body.in-velkoobchod .mt-b2b__brand-logo img { max-width: 100%; max-height: 88px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .3s cubic-bezier(.4,0,.2,1), opacity .3s cubic-bezier(.4,0,.2,1); } body.in-velkoobchod .mt-b2b__brand-logo:hover img { filter: grayscale(0); opacity: 1; } /* ============================================================ 6) BENEFITS — cream, 4 cards ============================================================ */ body.in-velkoobchod .mt-b2b__benefits-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin: 0 0 clamp(40px, 4vw, 64px); } body.in-velkoobchod .mt-b2b__benefits-intro-lead { font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif); font-size: 15px; line-height: 1.6; color: var(--mt-text-2, rgba(15, 15, 15, .62)); margin: 0; } body.in-velkoobchod .mt-b2b__benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.6vw, 24px); } body.in-velkoobchod .mt-b2b__bcard { padding: clamp(24px, 2.4vw, 32px); background: #FFFFFF; border: 1px solid var(--mt-border-subtle-soft, rgba(15, 15, 15, .08)); border-radius: 10px; } body.in-velkoobchod .mt-b2b__bcard-num { display: block; font-family: var(--mt-display, serif); font-size: 14px; color: var(--mt-primary, #0052DA); margin: 0 0 16px; letter-spacing: .1em; } body.in-velkoobchod .mt-b2b__bcard-title { font-family: var(--mt-display, serif); font-size: clamp(18px, 1.6vw, 22px); font-weight: 400; line-height: 1.2; color: var(--mt-accent, #253041); margin: 0 0 10px; } body.in-velkoobchod .mt-b2b__bcard-copy { font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif); font-size: 14px; line-height: 1.55; color: var(--mt-text-2, rgba(15, 15, 15, .62)); margin: 0; } /* ============================================================ 7) AUDIENCE — FULL-BLEED SAGE ============================================================ */ body.in-velkoobchod .mt-b2b__audience { background: var(--mt-primary, #0052DA); color: #fff; } body.in-velkoobchod .mt-b2b__audience .mt-b2b__eyebrow { color: rgba(255,255,255,.7); } body.in-velkoobchod .mt-b2b__audience .mt-b2b__h2 { color: #fff; } body.in-velkoobchod .mt-b2b__audience .mt-b2b__h2 em { color: rgba(255,255,255,.65); } body.in-velkoobchod .mt-b2b__audience-head { text-align: center; margin: 0 0 clamp(40px, 4vw, 64px); } body.in-velkoobchod .mt-b2b__audience-head .mt-b2b__lead { margin: 0 auto; color: rgba(255,255,255,.85); } body.in-velkoobchod .mt-b2b__audience-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.4vw, 20px); } body.in-velkoobchod .mt-b2b__acard { padding: clamp(20px, 2vw, 28px) clamp(16px, 1.6vw, 22px); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; text-align: center; } body.in-velkoobchod .mt-b2b__acard-num { display: block; font-family: var(--mt-display, serif); font-size: 13px; color: rgba(255,255,255,.6); margin: 0 0 14px; } body.in-velkoobchod .mt-b2b__acard-title { font-family: var(--mt-display, serif); font-size: clamp(16px, 1.4vw, 19px); font-weight: 400; line-height: 1.2; color: #fff; margin: 0; } /* ============================================================ 8) HOW IT WORKS — cream, 3 steps ============================================================ */ body.in-velkoobchod .mt-b2b__how-head { text-align: center; margin: 0 0 clamp(40px, 4vw, 64px); } body.in-velkoobchod .mt-b2b__how-head .mt-b2b__lead { margin: 0 auto; } body.in-velkoobchod .mt-b2b__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); } body.in-velkoobchod .mt-b2b__step { text-align: center; } body.in-velkoobchod .mt-b2b__step-num { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--mt-primary, #0052DA); font-family: var(--mt-display, serif); font-size: 26px; font-weight: 300; color: var(--mt-primary, #0052DA); margin: 0 0 20px; } body.in-velkoobchod .mt-b2b__step-title { font-family: var(--mt-display, serif); font-size: clamp(19px, 1.7vw, 24px); font-weight: 400; color: var(--mt-accent, #253041); margin: 0 0 10px; } body.in-velkoobchod .mt-b2b__step-copy { font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif); font-size: 15px; line-height: 1.55; color: var(--mt-text-2, rgba(15, 15, 15, .62)); margin: 0 auto; max-width: 280px; } /* ============================================================ 9) TAMARA — cream, 2-col with image ============================================================ */ body.in-velkoobchod .mt-b2b__michal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; } body.in-velkoobchod .mt-b2b__michal-copy p { font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65; color: var(--ss-text, #253041); margin: 0 0 18px; } body.in-velkoobchod .mt-b2b__michal-sign { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--mt-border-subtle-soft, rgba(15, 15, 15, .08)); } body.in-velkoobchod .mt-b2b__michal-sign img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } body.in-velkoobchod .mt-b2b__michal-sign-name { display: block; font-family: var(--mt-display, serif); font-size: 18px; color: var(--mt-accent, #253041); } body.in-velkoobchod .mt-b2b__michal-sign-role { font-family: var(--mt-display, sans-serif); font-size: 12px; color: var(--mt-text-2, rgba(15, 15, 15, .62)); } body.in-velkoobchod .mt-b2b__michal-photo { aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; background: var(--mt-primary-bg, #DBEAFE); } body.in-velkoobchod .mt-b2b__michal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ 10) FORM — FULL-BLEED terracotta, white form card ============================================================ */ body.in-velkoobchod .mt-b2b__formsec { background: linear-gradient(135deg, var(--mt-primary, #0052DA) 0%, #8a6d54 100%); color: #fff; } body.in-velkoobchod .mt-b2b__form-head { text-align: center; margin: 0 0 clamp(36px, 4vw, 56px); } body.in-velkoobchod .mt-b2b__form-head .mt-b2b__eyebrow { color: rgba(255,255,255,.7); } body.in-velkoobchod .mt-b2b__form-head .mt-b2b__h2 { color: #fff; } body.in-velkoobchod .mt-b2b__form-head .mt-b2b__h2 em { color: rgba(255,255,255,.7); } body.in-velkoobchod .mt-b2b__form-head .mt-b2b__lead { margin: 0 auto; color: rgba(255,255,255,.85); } body.in-velkoobchod .mt-b2b__form-card { max-width: 720px; margin: 0 auto; background: #fff; border-radius: 14px; padding: clamp(28px, 4vw, 48px); } /* Style both custom markup AND Shoptet native form fields */ body.in-velkoobchod .mt-b2b__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } body.in-velkoobchod .mt-b2b__field { display: flex; flex-direction: column; } body.in-velkoobchod .mt-b2b__field--full { grid-column: 1 / -1; } body.in-velkoobchod .mt-b2b__label { font-family: var(--mt-display, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mt-text-2, rgba(15, 15, 15, .62)); margin: 0 0 8px; } body.in-velkoobchod .mt-b2b__input, body.in-velkoobchod .mt-b2b__select, body.in-velkoobchod .mt-b2b__textarea, body.in-velkoobchod .mt-b2b__form-card input[type="text"], body.in-velkoobchod .mt-b2b__form-card input[type="email"], body.in-velkoobchod .mt-b2b__form-card input[type="tel"], body.in-velkoobchod .mt-b2b__form-card select, body.in-velkoobchod .mt-b2b__form-card textarea { font-family: var(--mt-display, sans-serif); font-size: 15px; padding: 13px 16px; border: 1px solid var(--mt-border, rgba(15, 15, 15, .16)); border-radius: 4px; background: #fff; color: var(--mt-accent, #253041); width: 100%; transition: border-color .2s cubic-bezier(.4,0,.2,1); } body.in-velkoobchod .mt-b2b__input:focus, body.in-velkoobchod .mt-b2b__select:focus, body.in-velkoobchod .mt-b2b__textarea:focus, body.in-velkoobchod .mt-b2b__form-card input:focus, body.in-velkoobchod .mt-b2b__form-card select:focus, body.in-velkoobchod .mt-b2b__form-card textarea:focus { outline: none; border-color: var(--mt-primary, #0052DA); } body.in-velkoobchod .mt-b2b__textarea { resize: vertical; min-height: 96px; } body.in-velkoobchod .mt-b2b__gdpr { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 0; font-family: var(--mt-display, sans-serif); font-size: 12.5px; line-height: 1.5; color: var(--mt-text-2, rgba(15, 15, 15, .62)); } body.in-velkoobchod .mt-b2b__form-foot { display: block; margin-top: 20px; } /* Submit — brand sage, full-width, 4px radius (match form fields) */ body.in-velkoobchod .mt-b2b__form-foot .mt-b2b__btn { width: 100%; justify-content: center; background: var(--mt-primary, #0052DA); border-radius: 4px; } body.in-velkoobchod .mt-b2b__form-foot .mt-b2b__btn:hover { background: var(--mt-primary-light, #2873E8); color: #fff; } /* Note skryt — info "do 48 hodin" je už v leadu nad formulářem */ body.in-velkoobchod .mt-b2b__form-note { display: none; } /* ============================================================ 11) FAQ — cream, native details accordion (ZERO JS) ============================================================ */ body.in-velkoobchod .mt-b2b__faq-head { text-align: center; margin: 0 0 clamp(36px, 4vw, 56px); } body.in-velkoobchod .mt-b2b__faq-head .mt-b2b__lead { margin: 0 auto; } body.in-velkoobchod .mt-b2b__faq-list { max-width: 760px; margin: 0 auto; } body.in-velkoobchod .mt-b2b__faq-item { border-bottom: 1px solid var(--mt-border-subtle-soft, rgba(15, 15, 15, .08)); } body.in-velkoobchod .mt-b2b__faq-item summary { list-style: none; cursor: pointer; padding: clamp(18px, 2vw, 24px) 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--mt-display, serif); font-size: clamp(17px, 1.5vw, 21px); font-weight: 400; color: var(--mt-accent, #253041); transition: color .2s cubic-bezier(.4,0,.2,1); } body.in-velkoobchod .mt-b2b__faq-item summary::-webkit-details-marker { display: none; } body.in-velkoobchod .mt-b2b__faq-item summary:hover { color: var(--mt-primary, #0052DA); } body.in-velkoobchod .mt-b2b__faq-item summary::after { content: '+'; font-family: var(--mt-display, sans-serif); font-size: 24px; font-weight: 300; color: var(--mt-primary, #0052DA); flex-shrink: 0; transition: transform .25s cubic-bezier(.4,0,.2,1); } body.in-velkoobchod .mt-b2b__faq-item[open] summary::after { transform: rotate(45deg); } body.in-velkoobchod .mt-b2b__faq-answer { font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif); font-size: 15.5px; line-height: 1.65; color: var(--mt-text-2, rgba(15, 15, 15, .62)); margin: 0; padding: 0 40px clamp(20px, 2.2vw, 28px) 0; } /* ============================================================ 12) FINAL CTA — FULL-BLEED SAGE ============================================================ */ body.in-velkoobchod .mt-b2b__close { background: var(--mt-primary, #0052DA); color: #fff; text-align: center; } body.in-velkoobchod .mt-b2b__close .mt-b2b__eyebrow { color: rgba(255,255,255,.7); } body.in-velkoobchod .mt-b2b__close .mt-b2b__h2 { color: #fff; } body.in-velkoobchod .mt-b2b__close .mt-b2b__h2 em { color: rgba(255,255,255,.7); } body.in-velkoobchod .mt-b2b__close-lead { font-family: var(--ss-body-serif, 'Source Serif 4', Georgia, serif); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: rgba(255,255,255,.85); margin: 0 auto 32px; max-width: 480px; } body.in-velkoobchod .mt-b2b__close-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ============================================================ 13) RESPONSIVE ============================================================ */ @media (max-width: 1024px) { body.in-velkoobchod .mt-b2b__benefits-grid { grid-template-columns: repeat(2, 1fr); } body.in-velkoobchod .mt-b2b__audience-grid { grid-template-columns: repeat(3, 1fr); } body.in-velkoobchod .mt-b2b__trust-grid { grid-template-columns: 1fr 1fr 1fr; } body.in-velkoobchod .mt-b2b__trust-lead { grid-column: 1 / -1; } body.in-velkoobchod .mt-b2b__brands-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 250px)); } } @media (max-width: 768px) { body.in-velkoobchod .mt-b2b__benefits-head, body.in-velkoobchod .mt-b2b__michal-grid { grid-template-columns: 1fr; } body.in-velkoobchod .mt-b2b__steps { grid-template-columns: 1fr; gap: 32px; } body.in-velkoobchod .mt-b2b__michal-photo { order: -1; } body.in-velkoobchod .mt-b2b__brands-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 230px)); } } @media (max-width: 640px) { body.in-velkoobchod .mt-b2b__benefits-grid, body.in-velkoobchod .mt-b2b__audience-grid { grid-template-columns: 1fr; } body.in-velkoobchod .mt-b2b__trust-grid { grid-template-columns: 1fr 1fr; } body.in-velkoobchod .mt-b2b__brands-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 200px)); } body.in-velkoobchod .mt-b2b__form-grid { grid-template-columns: 1fr; } body.in-velkoobchod .mt-b2b__form-foot { flex-direction: column; align-items: stretch; } } /* ============================================================ v5 (2026-06-01) :: FIX statistická trojka (trust bar) na telefonu. ≤640 padala mřížka na 2 sloupce => 3 staty = 2+1 (osamocený 3.). Necháme je v jedné řadě (3 sloupce jako na tabletu), centrované, utažená mezera + lehce menší číslo, ať se vejdou i na 320px. ============================================================ */ @media (max-width: 640px){ body.in-velkoobchod .mt-b2b__trust-grid{ grid-template-columns: 1fr 1fr 1fr; gap: 12px; } body.in-velkoobchod .mt-b2b__trust-grid > div{ text-align: center; } body.in-velkoobchod .mt-b2b__stat-num{ font-size: 30px; } } /* ============================================================ v6 (2026-06-01) :: Staty (trust bar) - jednotné zalomení labelů na mobilu. V realitě se zalamoval jen nejdelší label ("prémiových značek"), ostatní zůstaly na 1 řádku => nevyvážené. width:min-content zúží label na nejdelší slovo => KAŽDÉ slovo na vlastní řádek, vždy 2 řádky, nezávisle na fontu. ============================================================ */ @media (max-width: 640px){ body.in-velkoobchod .mt-b2b__stat-label{ display: block; width: min-content; max-width: 100%; margin-left: auto; margin-right: auto; } } /* ============================================================ MT HERO BAND — brand gradient, no photo dependency (MT addition) Reuses .mt-b2b__hero-eyebrow / -h1 / -lead / -ctas (already white). ============================================================ */ body.in-velkoobchod .mt-b2b__hero{ background:linear-gradient(135deg,#0052DA 0%,#003BA8 58%,#001F70 100%); padding:clamp(64px,9vw,132px) 0; position:relative; overflow:hidden; line-height:normal; /* reset SS image-hero line-height:0 */ } body.in-velkoobchod .mt-b2b__hero .mt-b2b__inner{position:relative;z-index:1;} body.in-velkoobchod .mt-b2b__hero-h1{max-width:900px;} body.in-velkoobchod .mt-b2b__hero-lead{max-width:580px;} /* faint blueprint grid, masked top-right — subtle trade/technical cue */ body.in-velkoobchod .mt-b2b__hero::after{ content:'';position:absolute;inset:0;opacity:.10;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(circle at 78% 28%,#000,transparent 72%); mask-image:radial-gradient(circle at 78% 28%,#000,transparent 72%); } @media (max-width:640px){ body.in-velkoobchod .mt-b2b__hero{padding:clamp(48px,12vw,72px) 0;} } /* ============================================================ v2 (09. 07. 2026) :: FLUSH FOOTER — velkoobchod končí full-bleed modrým CTA bandem, globální .mt-footer{margin-top:64px} nechával pruh pozadí. Stejný vzor jako homepage (type-index) a kontakt (v2). ============================================================ */ body.in-velkoobchod .mt-footer { margin-top: 0 !important; }