{"id":11,"date":"2026-03-01T02:00:06","date_gmt":"2026-03-01T02:00:06","guid":{"rendered":"https:\/\/malby.nahromade.cz\/?page_id=11"},"modified":"2026-03-01T02:00:08","modified_gmt":"2026-03-01T02:00:08","slug":"test-barev-2-full-width","status":"publish","type":"page","link":"https:\/\/malby.nahromade.cz\/?page_id=11","title":{"rendered":"test barev 2 full width"},"content":{"rendered":"\n<div class=\"mn-styleguide\">\n\n  <style>\n    :root{\n      \/* Brand *\/\n      --brand-red: #E30053;\n      --brand-red-dark: #B80043;\n      --brand-red-tint: #FFE3EE;\n\n      \/* Neutrals *\/\n      --black: #0A0A0A;\n      --charcoal: #171717;\n      --white: #FFFFFF;\n      --offwhite: #F5F5F5;\n      --warm-paper: #F6F2EE;\n\n      \/* Text *\/\n      --text-on-dark: #FFFFFF;\n      --text-muted-on-dark: #D0D0D0;\n      --text-on-light: #0A0A0A;\n      --text-muted-on-light: #555555;\n\n      \/* Borders \/ dividers *\/\n      --border-on-dark: #2A2A2A;\n      --border-on-light: #E6E6E6;\n\n      \/* Overlay *\/\n      --hero-overlay: rgba(0,0,0,0.62);\n\n      \/* Radius + spacing *\/\n      --radius: 10px;\n      --space-1: 8px;\n      --space-2: 16px;\n      --space-3: 24px;\n      --space-4: 32px;\n      --space-5: 48px;\n      --space-6: 64px;\n\n      \/* Shadow *\/\n      --shadow: 0 10px 30px rgba(0,0,0,0.18);\n      --shadow-strong: 0 16px 50px rgba(0,0,0,0.28);\n    }\n\n    \/* Scope only *\/\n    .mn-styleguide{\n      font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n      line-height: 1.65;\n      color: var(--text-on-light);\n      overflow-x: clip; \/* full-bleed safety *\/\n    }\n    .mn-styleguide *{ box-sizing:border-box; }\n    .mn-styleguide a{ color: inherit; }\n\n    \/* Container *\/\n    .mn-wrap{\n      max-width: 1180px;\n      margin: 0 auto;\n      padding: 0 var(--space-3);\n    }\n\n    \/* Full width band (background full width, content in container) *\/\n    .mn-band{\n      width: 100vw;\n      margin-left: calc(50% - 50vw);\n      margin-right: calc(50% - 50vw);\n      padding: var(--space-6) 0;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .mn-band--white{ background: var(--white); }\n    .mn-band--offwhite{ background: var(--offwhite); }\n    .mn-band--paper{ background: var(--warm-paper); }\n    .mn-band--tint{ background: var(--brand-red-tint); }\n    .mn-band--dark{\n      background: var(--black);\n      color: var(--text-on-dark);\n    }\n    .mn-band--charcoal{\n      background: var(--charcoal);\n      color: var(--text-on-dark);\n    }\n\n    \/* Optional \"photo\" band (no external image by default) *\/\n    .mn-band--photo{\n      color: var(--text-on-dark);\n      background:\n        linear-gradient(var(--hero-overlay), var(--hero-overlay)),\n        radial-gradient(1200px 500px at 70% 30%, rgba(255,255,255,0.10), rgba(255,255,255,0)),\n        radial-gradient(900px 420px at 20% 80%, rgba(227,0,83,0.10), rgba(0,0,0,0));\n    }\n    \/* Pokud chce\u0161 re\u00e1lnou fotku na full width, p\u0159idej sem URL:\n       .mn-band--photo{ background-image: linear-gradient(...), url('https:\/\/...'); background-size:cover; background-position:center; } *\/\n\n    @media (max-width: 800px){\n      .mn-band{ padding: var(--space-5) 0; }\n      .mn-wrap{ padding: 0 var(--space-2); }\n    }\n\n    \/* Panels (content cards inside bands) *\/\n    .mn-panel{\n      background: var(--white);\n      border: 1px solid var(--border-on-light);\n      border-radius: calc(var(--radius) * 1.6);\n      box-shadow: var(--shadow);\n      padding: var(--space-5);\n    }\n    .mn-band--dark .mn-panel,\n    .mn-band--charcoal .mn-panel,\n    .mn-band--photo .mn-panel{\n      background: rgba(255,255,255,0.04);\n      border-color: rgba(255,255,255,0.14);\n      box-shadow: none;\n      backdrop-filter: blur(2px);\n    }\n\n    @media (max-width: 800px){\n      .mn-panel{ padding: var(--space-3); }\n    }\n\n    \/* Typography *\/\n    .mn-kicker{\n      font-size: 12px;\n      letter-spacing: 0.14em;\n      text-transform: uppercase;\n      opacity: 0.85;\n      margin-bottom: var(--space-2);\n    }\n    .mn-h1,.mn-h2,.mn-h3{\n      margin: 0 0 var(--space-2) 0;\n      line-height: 1.05;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      font-weight: 700;\n      font-family: \"Bebas Neue\", \"Oswald\", Impact, \"Arial Narrow\", sans-serif;\n    }\n    .mn-h1{ font-size: 60px; }\n    .mn-h2{ font-size: 44px; }\n    .mn-h3{ font-size: 28px; letter-spacing: 0.03em; }\n\n    @media (max-width: 800px){\n      .mn-h1{ font-size: 42px; }\n      .mn-h2{ font-size: 32px; }\n      .mn-h3{ font-size: 24px; }\n    }\n\n    .mn-p{\n      margin: 0 0 var(--space-3) 0;\n      color: var(--text-muted-on-light);\n    }\n    .mn-band--dark .mn-p,\n    .mn-band--charcoal .mn-p,\n    .mn-band--photo .mn-p{ color: var(--text-muted-on-dark); }\n\n    .mn-note{\n      font-size: 14px;\n      margin-top: var(--space-2);\n      border-left: 3px solid var(--brand-red);\n      padding-left: var(--space-2);\n      color: var(--text-muted-on-light);\n    }\n    .mn-band--dark .mn-note,\n    .mn-band--charcoal .mn-note,\n    .mn-band--photo .mn-note{ color: var(--text-muted-on-dark); }\n\n    \/* Grid *\/\n    .mn-grid-2{ display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-4); }\n    .mn-grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }\n    .mn-grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }\n    .mn-grid-5{ display:grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }\n\n    @media (max-width: 980px){\n      .mn-grid-2{ grid-template-columns: 1fr; }\n      .mn-grid-3{ grid-template-columns: 1fr; }\n      .mn-grid-4{ grid-template-columns: 1fr 1fr; }\n      .mn-grid-5{ grid-template-columns: 1fr 1fr; }\n    }\n\n    \/* Icons (inline SVG) *\/\n    .mn-ic{\n      width: 20px; height: 20px;\n      display: inline-block;\n      vertical-align: middle;\n      color: currentColor;\n      flex: 0 0 auto;\n    }\n    .mn-ic--lg{ width: 28px; height: 28px; }\n\n    \/* Buttons *\/\n    .mn-btn-row{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top: var(--space-2); }\n    .mn-btn{\n      display:inline-flex;\n      align-items:center;\n      justify-content:center;\n      gap: 10px;\n      padding: 12px 18px;\n      border-radius: var(--radius);\n      font-weight: 800;\n      letter-spacing: .02em;\n      text-decoration:none;\n      border: 1px solid transparent;\n      cursor:pointer;\n      transition: transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;\n      min-height: 44px;\n      user-select:none;\n      background: transparent;\n    }\n    .mn-btn:active{ transform: translateY(1px); }\n\n    .mn-btn--primary{ background: var(--brand-red); color: var(--white); box-shadow: 0 10px 22px rgba(227,0,83,0.22); }\n    .mn-btn--primary:hover{ background: var(--brand-red-dark); box-shadow: 0 12px 28px rgba(184,0,67,0.26); }\n\n    .mn-btn--outline-dark{\n      color: var(--text-on-light);\n      border-color: var(--border-on-light);\n      background: var(--white);\n    }\n    .mn-btn--outline-dark:hover{ border-color: var(--brand-red); color: var(--brand-red); }\n\n    .mn-band--dark .mn-btn--outline-dark,\n    .mn-band--charcoal .mn-btn--outline-dark,\n    .mn-band--photo .mn-btn--outline-dark{\n      background: rgba(255,255,255,0.06);\n      border-color: rgba(255,255,255,0.20);\n      color: var(--white);\n    }\n\n    .mn-btn--ghost{\n      background: transparent;\n      border-color: transparent;\n      color: var(--brand-red);\n      padding-left: 0;\n      padding-right: 0;\n    }\n    .mn-btn--ghost:hover{ color: var(--brand-red-dark); }\n\n    .mn-link{\n      color: var(--brand-red);\n      text-decoration:none;\n      border-bottom: 1px solid transparent;\n    }\n    .mn-link:hover{\n      color: var(--brand-red-dark);\n      border-bottom-color: var(--brand-red-dark);\n    }\n\n    \/* Cards *\/\n    .mn-card{\n      background: var(--white);\n      border: 1px solid var(--border-on-light);\n      border-radius: calc(var(--radius) * 1.25);\n      padding: var(--space-3);\n      box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    }\n    .mn-band--dark .mn-card,\n    .mn-band--charcoal .mn-card,\n    .mn-band--photo .mn-card{\n      background: rgba(255,255,255,0.04);\n      border-color: rgba(255,255,255,0.14);\n      box-shadow: none;\n    }\n    .mn-card__title{\n      font-weight: 900;\n      margin: 0 0 6px 0;\n      color: var(--text-on-light);\n      display:flex;\n      align-items:center;\n      gap: 10px;\n    }\n    .mn-band--dark .mn-card__title,\n    .mn-band--charcoal .mn-card__title,\n    .mn-band--photo .mn-card__title{ color: var(--text-on-dark); }\n\n    .mn-card__text{\n      margin: 0;\n      font-size: 14px;\n      color: var(--text-muted-on-light);\n    }\n    .mn-band--dark .mn-card__text,\n    .mn-band--charcoal .mn-card__text,\n    .mn-band--photo .mn-card__text{ color: var(--text-muted-on-dark); }\n\n    .mn-chiprow{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: var(--space-2); }\n    .mn-chip{\n      display:inline-flex;\n      align-items:center;\n      gap: 8px;\n      padding: 6px 10px;\n      border-radius: 999px;\n      font-size: 13px;\n      border: 1px solid var(--border-on-light);\n      background: var(--white);\n      color: var(--text-muted-on-light);\n    }\n    .mn-band--dark .mn-chip,\n    .mn-band--charcoal .mn-chip,\n    .mn-band--photo .mn-chip{\n      border-color: rgba(255,255,255,0.16);\n      background: rgba(255,255,255,0.06);\n      color: var(--text-muted-on-dark);\n    }\n    .mn-chip b{ color: var(--text-on-light); }\n    .mn-band--dark .mn-chip b,\n    .mn-band--charcoal .mn-chip b,\n    .mn-band--photo .mn-chip b{ color: var(--white); }\n\n    \/* Palette swatches *\/\n    .mn-swatch{\n      border-radius: calc(var(--radius) * 1.25);\n      overflow:hidden;\n      border: 1px solid var(--border-on-light);\n      background: var(--white);\n    }\n    .mn-band--dark .mn-swatch,\n    .mn-band--charcoal .mn-swatch{\n      border-color: rgba(255,255,255,0.16);\n      background: rgba(255,255,255,0.04);\n    }\n    .mn-swatch__color{ height: 56px; }\n    .mn-swatch__meta{\n      padding: 10px 12px;\n      font-size: 13px;\n      display:flex;\n      justify-content: space-between;\n      gap: 10px;\n      color: var(--text-muted-on-light);\n    }\n    .mn-band--dark .mn-swatch__meta,\n    .mn-band--charcoal .mn-swatch__meta{ color: var(--text-muted-on-dark); }\n\n    \/* Dividers *\/\n    .mn-divider{\n      height: 1px;\n      background: var(--border-on-light);\n      margin: var(--space-4) 0;\n    }\n    .mn-band--dark .mn-divider,\n    .mn-band--charcoal .mn-divider,\n    .mn-band--photo .mn-divider{ background: rgba(255,255,255,0.14); }\n\n    \/* Stats *\/\n    .mn-stat{\n      padding: var(--space-3);\n      border-radius: calc(var(--radius) * 1.25);\n      border: 1px solid var(--border-on-light);\n      background: var(--white);\n      text-align: left;\n    }\n    .mn-band--dark .mn-stat,\n    .mn-band--charcoal .mn-stat{\n      border-color: rgba(255,255,255,0.16);\n      background: rgba(255,255,255,0.04);\n    }\n    .mn-stat strong{\n      display:block;\n      font-family: \"Bebas Neue\", \"Oswald\", Impact, \"Arial Narrow\", sans-serif;\n      font-size: 44px;\n      letter-spacing: 0.04em;\n      line-height: 1;\n      margin-bottom: 6px;\n    }\n    .mn-stat span{ color: var(--text-muted-on-light); font-size: 13px; }\n    .mn-band--dark .mn-stat span,\n    .mn-band--charcoal .mn-stat span{ color: var(--text-muted-on-dark); }\n\n    \/* Table (pricing \/ packages) *\/\n    .mn-table{\n      width:100%;\n      border-collapse: separate;\n      border-spacing: 0;\n      overflow:hidden;\n      border-radius: calc(var(--radius) * 1.25);\n      border: 1px solid var(--border-on-light);\n      background: var(--white);\n    }\n    .mn-table th, .mn-table td{\n      padding: 14px 14px;\n      border-bottom: 1px solid var(--border-on-light);\n      text-align:left;\n      font-size: 14px;\n    }\n    .mn-table th{\n      font-size: 13px;\n      letter-spacing: .10em;\n      text-transform: uppercase;\n      color: var(--text-muted-on-light);\n      background: var(--offwhite);\n    }\n    .mn-table tr:last-child td{ border-bottom:none; }\n    .mn-row--hl td{ background: rgba(227,0,83,0.06); }\n\n    \/* FAQ (no JS) *\/\n    .mn-faq{\n      border: 1px solid var(--border-on-light);\n      border-radius: calc(var(--radius) * 1.25);\n      background: var(--white);\n      padding: 0;\n      overflow:hidden;\n    }\n    .mn-faq + .mn-faq{ margin-top: var(--space-2); }\n    .mn-faq summary{\n      list-style: none;\n      cursor: pointer;\n      padding: 14px 14px;\n      font-weight: 800;\n      display:flex;\n      align-items:center;\n      justify-content: space-between;\n      gap: 12px;\n    }\n    .mn-faq summary::-webkit-details-marker{ display:none; }\n    .mn-faq summary span{ color: var(--text-on-light); }\n    .mn-faq .mn-faq__body{\n      padding: 0 14px 14px 14px;\n      color: var(--text-muted-on-light);\n      font-size: 14px;\n    }\n    .mn-faq summary .mn-faq__chev{\n      width: 18px; height: 18px; opacity: .8;\n      transition: transform .15s ease;\n    }\n    .mn-faq[open] summary .mn-faq__chev{ transform: rotate(180deg); }\n\n    \/* Form *\/\n    .mn-form{ display:grid; gap: var(--space-2); }\n    .mn-label{\n      font-size: 13px;\n      font-weight: 900;\n      color: var(--text-on-light);\n    }\n    .mn-band--dark .mn-label,\n    .mn-band--photo .mn-label{ color: var(--text-on-dark); }\n\n    .mn-input, .mn-textarea{\n      width: 100%;\n      padding: 12px 12px;\n      border-radius: var(--radius);\n      border: 1px solid var(--border-on-light);\n      background: var(--white);\n      font: inherit;\n      outline: none;\n      transition: border-color .15s ease, box-shadow .15s ease;\n    }\n    .mn-band--dark .mn-input, .mn-band--dark .mn-textarea,\n    .mn-band--photo .mn-input, .mn-band--photo .mn-textarea{\n      background: rgba(255,255,255,0.06);\n      border-color: rgba(255,255,255,0.18);\n      color: var(--white);\n    }\n    .mn-input:focus, .mn-textarea:focus{\n      border-color: var(--brand-red);\n      box-shadow: 0 0 0 3px rgba(227,0,83,0.18);\n    }\n    .mn-textarea{ min-height: 120px; resize: vertical; }\n\n    \/* Simple gallery placeholders *\/\n    .mn-thumb{\n      border-radius: calc(var(--radius) * 1.2);\n      border: 1px solid var(--border-on-light);\n      background:\n        linear-gradient(135deg, rgba(0,0,0,0.06), rgba(0,0,0,0)),\n        linear-gradient(0deg, rgba(227,0,83,0.06), rgba(227,0,83,0.00));\n      aspect-ratio: 4 \/ 3;\n    }\n    .mn-band--dark .mn-thumb,\n    .mn-band--charcoal .mn-thumb{\n      border-color: rgba(255,255,255,0.16);\n      background:\n        linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0)),\n        radial-gradient(400px 140px at 30% 70%, rgba(227,0,83,0.12), rgba(0,0,0,0));\n    }\n  <\/style>\n\n  <!-- SVG ICON SPRITE (free icons, inline) -->\n  <svg aria-hidden=\"true\" style=\"position:absolute; width:0; height:0; overflow:hidden;\">\n    <symbol id=\"mn-ic-phone\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" d=\"M6.6 10.8c1.5 3 3.6 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.8 21 3 13.2 3 3c0-.6.4-1 1-1h3.2c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1L6.6 10.8z\"\/>\n    <\/symbol>\n\n    <symbol id=\"mn-ic-pin\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" d=\"M12 22s7-4.4 7-12a7 7 0 1 0-14 0c0 7.6 7 12 7 12zm0-9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z\"\/>\n    <\/symbol>\n\n    <symbol id=\"mn-ic-check\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" d=\"M9.2 16.6 4.9 12.3l1.4-1.4 2.9 2.9 8.5-8.5 1.4 1.4-9.9 9.9z\"\/>\n    <\/symbol>\n\n    <symbol id=\"mn-ic-clock\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" d=\"M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm1-10.6V6h-2v6l5 3 1-1.7-4-2.3z\"\/>\n    <\/symbol>\n\n    <symbol id=\"mn-ic-roller\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" d=\"M4 6a2 2 0 0 1 2-2h8a2 2 0 0 1 0 4H6a2 2 0 0 1-2-2zm13 2h2a2 2 0 0 1 2 2v2h-4V8zM7 10h2v3.2c0 .5.2 1 .6 1.4l1.4 1.4V22H9v-4.2l-1-1c-.6-.6-1-1.4-1-2.2V10z\"\/>\n    <\/symbol>\n\n    <symbol id=\"mn-ic-shield\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" d=\"M12 2 4 5v6c0 5.3 3.4 10.2 8 11 4.6-.8 8-5.7 8-11V5l-8-3zm0 18c-3.1-.9-6-4.7-6-9.1V6.3L12 4l6 2.3v4.6c0 4.4-2.9 8.2-6 9.1z\"\/>\n    <\/symbol>\n\n    <symbol id=\"mn-ic-chevron\" viewBox=\"0 0 24 24\">\n      <path fill=\"currentColor\" d=\"M12 15.5 5.5 9l1.4-1.4L12 12.7l5.1-5.1L18.5 9 12 15.5z\"\/>\n    <\/symbol>\n  <\/svg>\n\n  <!-- 01 HERO \/ PHOTO BAND -->\n  <section class=\"mn-band mn-band--photo\">\n    <div class=\"mn-wrap\">\n      <div class=\"mn-grid-2\" style=\"align-items:center;\">\n        <div>\n          <div class=\"mn-kicker\">Full width background + container content<\/div>\n          <div class=\"mn-h1\">POCTIV\u00c9 \u0158EMESLO<\/div>\n          <p class=\"mn-p\">Varianta \u201ehero na celou \u0161\u00ed\u0159ku\u201c s overlay. Pod t\u00edm m\u016f\u017ee b\u00fdt seznam benefit\u016f, CTA, nebo rychl\u00fd kontakt.<\/p>\n\n          <div class=\"mn-chiprow\">\n            <div class=\"mn-chip\"><svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-check\"><\/use><\/svg> <b>\u010cist\u011b<\/b> a pe\u010dliv\u011b<\/div>\n            <div class=\"mn-chip\"><svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-clock\"><\/use><\/svg> <b>V\u010das<\/b> a domluven\u011b<\/div>\n            <div class=\"mn-chip\"><svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-shield\"><\/use><\/svg> <b>Jistota<\/b> v\u00fdsledku<\/div>\n          <\/div>\n\n          <div class=\"mn-btn-row\" style=\"margin-top:16px;\">\n            <a class=\"mn-btn mn-btn--primary\" href=\"#mn-contact\">\n              <svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-phone\"><\/use><\/svg>\n              Kontaktovat\n            <\/a>\n            <a class=\"mn-btn mn-btn--outline-dark\" href=\"#mn-palette\">Zobrazit paletu<\/a>\n            <a class=\"mn-btn mn-btn--ghost\" href=\"#mn-modules\">Dal\u0161\u00ed moduly \u2192<\/a>\n          <\/div>\n          <div class=\"mn-note\">Tip: Hero band m\u016f\u017ee b\u00fdt fotka (full width), ale obsah v\u017edy v containeru.<\/div>\n        <\/div>\n\n        <div>\n          <div class=\"mn-panel\">\n            <div class=\"mn-h3\">Rychl\u00e1 popt\u00e1vka<\/div>\n            <p class=\"mn-p\">Tahle karta je schv\u00e1ln\u011b \u201esklen\u011bn\u00e1\u201c na tmav\u00e9m pozad\u00ed \u2013 \u010dasto to vypad\u00e1 modern\u011b a \u010diteln\u011b.<\/p>\n            <div class=\"mn-btn-row\">\n              <a class=\"mn-btn mn-btn--primary\" href=\"#mn-contact\">Zavolat<\/a>\n              <a class=\"mn-btn mn-btn--outline-dark\" href=\"#0\">Napsat zpr\u00e1vu<\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 02 PALETTE (WHITE BAND) -->\n  <section id=\"mn-palette\" class=\"mn-band mn-band--white\">\n    <div class=\"mn-wrap\">\n      <div class=\"mn-panel\">\n        <div class=\"mn-kicker\">02 \/ Colors<\/div>\n        <div class=\"mn-h2\">BAREVN\u00c1 PALETA<\/div>\n        <p class=\"mn-p\">Z\u00e1klad: \u010dern\u00e1\/b\u00edl\u00e1, jemn\u00e9 \u0161ed\u00e9 + jedna \u010derven\u00e1 pro akcent. N\u00ed\u017ee jsou swatche s hex k\u00f3dy.<\/p>\n\n        <div class=\"mn-grid-5\">\n          <div class=\"mn-swatch\">\n            <div class=\"mn-swatch__color\" style=\"background: var(--brand-red)\"><\/div>\n            <div class=\"mn-swatch__meta\"><span>Brand Red<\/span><strong>#E30053<\/strong><\/div>\n          <\/div>\n          <div class=\"mn-swatch\">\n            <div class=\"mn-swatch__color\" style=\"background: var(--brand-red-dark)\"><\/div>\n            <div class=\"mn-swatch__meta\"><span>Red Dark<\/span><strong>#B80043<\/strong><\/div>\n          <\/div>\n          <div class=\"mn-swatch\">\n            <div class=\"mn-swatch__color\" style=\"background: var(--brand-red-tint)\"><\/div>\n            <div class=\"mn-swatch__meta\"><span>Red Tint<\/span><strong>#FFE3EE<\/strong><\/div>\n          <\/div>\n          <div class=\"mn-swatch\">\n            <div class=\"mn-swatch__color\" style=\"background: var(--warm-paper)\"><\/div>\n            <div class=\"mn-swatch__meta\"><span>Warm Paper<\/span><strong>#F6F2EE<\/strong><\/div>\n          <\/div>\n          <div class=\"mn-swatch\">\n            <div class=\"mn-swatch__color\" style=\"background: var(--offwhite)\"><\/div>\n            <div class=\"mn-swatch__meta\"><span>Off White<\/span><strong>#F5F5F5<\/strong><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"mn-divider\"><\/div>\n\n        <div class=\"mn-grid-4\">\n          <div class=\"mn-swatch\">\n            <div class=\"mn-swatch__color\" style=\"background: var(--black)\"><\/div>\n            <div class=\"mn-swatch__meta\"><span>Black<\/span><strong>#0A0A0A<\/strong><\/div>\n          <\/div>\n          <div class=\"mn-swatch\">\n            <div class=\"mn-swatch__color\" style=\"background: var(--charcoal)\"><\/div>\n            <div class=\"mn-swatch__meta\"><span>Charcoal<\/span><strong>#171717<\/strong><\/div>\n          <\/div>\n          <div class=\"mn-swatch\">\n            <div class=\"mn-swatch__color\" style=\"background: #D0D0D0\"><\/div>\n            <div class=\"mn-swatch__meta\"><span>Muted on dark<\/span><strong>#D0D0D0<\/strong><\/div>\n          <\/div>\n          <div class=\"mn-swatch\">\n            <div class=\"mn-swatch__color\" style=\"background: #555555\"><\/div>\n            <div class=\"mn-swatch__meta\"><span>Muted on light<\/span><strong>#555555<\/strong><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"mn-note\">Pravidlo: \u010derven\u00e1 jen jako akcent (CTA, linky, drobn\u00e9 zv\u00fdrazn\u011bn\u00ed).<\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 03 BACKGROUND COMBOS (OFFWHITE BAND) -->\n  <section id=\"mn-modules\" class=\"mn-band mn-band--offwhite\">\n    <div class=\"mn-wrap\">\n      <div class=\"mn-kicker\">03 \/ Background combos<\/div>\n      <div class=\"mn-h2\">KOMBINACE POZAD\u00cd<\/div>\n      <p class=\"mn-p\">Uk\u00e1zka r\u016fzn\u00fdch \u201eband\u201c pozad\u00ed. Obsah je v\u017edy v containeru \u2013 jen pozad\u00ed je full width.<\/p>\n\n      <div class=\"mn-grid-3\">\n        <div class=\"mn-card\">\n          <div class=\"mn-card__title\">\n            <svg class=\"mn-ic mn-ic--lg\" aria-hidden=\"true\"><use href=\"#mn-ic-roller\"><\/use><\/svg>\n            White band + panel\n          <\/div>\n          <p class=\"mn-card__text\">\u010cist\u00e9, pr\u00e9miov\u00e9. Hod\u00ed se na \u201eo n\u00e1s\u201c a kl\u00ed\u010dov\u00e9 bloky.<\/p>\n          <div class=\"mn-btn-row\">\n            <a class=\"mn-btn mn-btn--primary\" href=\"#0\">CTA<\/a>\n            <a class=\"mn-btn mn-btn--outline-dark\" href=\"#0\">Sekund\u00e1rn\u00ed<\/a>\n          <\/div>\n        <\/div>\n\n        <div class=\"mn-card\" style=\"background:var(--warm-paper);\">\n          <div class=\"mn-card__title\">\n            <svg class=\"mn-ic mn-ic--lg\" aria-hidden=\"true\"><use href=\"#mn-ic-shield\"><\/use><\/svg>\n            Warm paper (jemn\u00e9)\n          <\/div>\n          <p class=\"mn-card__text\">Teplej\u0161\u00ed dojem. Skv\u011bl\u00e9 na reference, postup spolupr\u00e1ce, texty.<\/p>\n          <a class=\"mn-link\" href=\"#0\">Textov\u00fd odkaz<\/a>\n        <\/div>\n\n        <div class=\"mn-card\" style=\"background:var(--brand-red-tint); border-color:rgba(227,0,83,0.20);\">\n          <div class=\"mn-card__title\">\n            <svg class=\"mn-ic mn-ic--lg\" aria-hidden=\"true\"><use href=\"#mn-ic-check\"><\/use><\/svg>\n            Red tint (jen ob\u010das)\n          <\/div>\n          <p class=\"mn-card__text\">Pro highlight \u201eAkce\u201c, \u201evoln\u00e9 term\u00edny\u201c, \u201erychl\u00e1 nab\u00eddka\u201c.<\/p>\n          <div class=\"mn-note\">Nepou\u017e\u00edvat moc \u010dasto, a\u0165 se neztrat\u00ed pr\u00e9miov\u00fd kontrast.<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 04 SERVICES (WHITE BAND) -->\n  <section class=\"mn-band mn-band--white\">\n    <div class=\"mn-wrap\">\n      <div class=\"mn-panel\">\n        <div class=\"mn-kicker\">04 \/ Services<\/div>\n        <div class=\"mn-h2\">SEKCE SLU\u017dEB (varianty)<\/div>\n        <p class=\"mn-p\">Karty s ikonou (SVG), title, kr\u00e1tk\u00fd text a link\/CTA. D\u00e1 se pou\u017e\u00edt na sv\u011btl\u00e9m i tmav\u00e9m bandu.<\/p>\n\n        <div class=\"mn-grid-3\">\n          <div class=\"mn-card\">\n            <div class=\"mn-card__title\"><svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-roller\"><\/use><\/svg> MAL\u00cd\u0158SK\u00c9 PR\u00c1CE<\/div>\n            <p class=\"mn-card__text\">V\u00fdmalba byt\u016f, dom\u016f, kancel\u00e1\u0159\u00ed. Zakryt\u00ed, \u010dist\u00e9 hrany, detail.<\/p>\n            <div class=\"mn-btn-row\"><a class=\"mn-btn mn-btn--ghost\" href=\"#0\">V\u00edce \u2192<\/a><\/div>\n          <\/div>\n          <div class=\"mn-card\">\n            <div class=\"mn-card__title\"><svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-check\"><\/use><\/svg> N\u00c1T\u011aRY A TAPETY<\/div>\n            <p class=\"mn-card__text\">Dve\u0159e, z\u00e1rubn\u011b, radi\u00e1tory, tapety. Precizn\u00ed proveden\u00ed.<\/p>\n            <div class=\"mn-btn-row\"><a class=\"mn-btn mn-btn--ghost\" href=\"#0\">Zjistit v\u00edce \u2192<\/a><\/div>\n          <\/div>\n          <div class=\"mn-card\">\n            <div class=\"mn-card__title\"><svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-clock\"><\/use><\/svg> FIN\u00c1LN\u00cd \u00daKLID<\/div>\n            <p class=\"mn-card__text\">Po pr\u00e1ci uklizeno a p\u0159ipraveno k u\u017e\u00edv\u00e1n\u00ed. Bez starost\u00ed.<\/p>\n            <div class=\"mn-btn-row\"><a class=\"mn-btn mn-btn--ghost\" href=\"#0\">Jak to prob\u00edh\u00e1 \u2192<\/a><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 05 STATS (DARK BAND) -->\n  <section class=\"mn-band mn-band--dark\">\n    <div class=\"mn-wrap\">\n      <div class=\"mn-kicker\">05 \/ Stats + trust<\/div>\n      <div class=\"mn-h2\">D\u016eV\u011aRA A \u010c\u00cdSLA<\/div>\n      <p class=\"mn-p\">Na tmav\u00e9m bandu dob\u0159e funguj\u00ed \u201estat\u201c dla\u017edice \u2013 p\u016fsob\u00ed profesion\u00e1ln\u011b.<\/p>\n\n      <div class=\"mn-grid-4\">\n        <div class=\"mn-stat\"><strong>50+<\/strong><span>let tradice (uk\u00e1zka textu)<\/span><\/div>\n        <div class=\"mn-stat\"><strong>300+<\/strong><span>realizac\u00ed (uk\u00e1zka)<\/span><\/div>\n        <div class=\"mn-stat\"><strong>4.9\/5<\/strong><span>hodnocen\u00ed (uk\u00e1zka)<\/span><\/div>\n        <div class=\"mn-stat\"><strong>Praha<\/strong><span>Mod\u0159any a okol\u00ed<\/span><\/div>\n      <\/div>\n\n      <div class=\"mn-btn-row\" style=\"margin-top:16px;\">\n        <a class=\"mn-btn mn-btn--primary\" href=\"#mn-contact\">Nez\u00e1vazn\u011b poptat<\/a>\n        <a class=\"mn-btn mn-btn--outline-dark\" href=\"#0\">\n          <svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-pin\"><\/use><\/svg>\n          Kde p\u016fsob\u00edme\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 06 PROCESS (PAPER BAND) -->\n  <section class=\"mn-band mn-band--paper\">\n    <div class=\"mn-wrap\">\n      <div class=\"mn-panel\">\n        <div class=\"mn-kicker\">06 \/ Process<\/div>\n        <div class=\"mn-h2\">POSTUP SPOLUPR\u00c1CE (modul)<\/div>\n\n        <div class=\"mn-grid-3\">\n          <div class=\"mn-card\">\n            <div class=\"mn-card__title\"><svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-phone\"><\/use><\/svg> 01 Konzultace<\/div>\n            <p class=\"mn-card__text\">Zavol\u00e1me si \/ nap\u00ed\u0161ete. Up\u0159esn\u00edme rozsah a term\u00edn.<\/p>\n          <\/div>\n          <div class=\"mn-card\">\n            <div class=\"mn-card__title\"><svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-roller\"><\/use><\/svg> 02 Realizace<\/div>\n            <p class=\"mn-card__text\">Zakryt\u00ed, pr\u00e1ce, kontrola detail\u016f. \u010cist\u00e9 proveden\u00ed.<\/p>\n          <\/div>\n          <div class=\"mn-card\">\n            <div class=\"mn-card__title\"><svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-check\"><\/use><\/svg> 03 \u00daklid a p\u0159ed\u00e1n\u00ed<\/div>\n            <p class=\"mn-card__text\">Uklizeno, p\u0159ed\u00e1no, hotovo. Bez zbyte\u010dn\u00fdch p\u0159ekvapen\u00ed.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"mn-note\">Tenhle modul m\u016f\u017ee b\u00fdt i na tmav\u00e9m bandu (vypad\u00e1 hodn\u011b \u201epremium\u201c).<\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 07 GALLERY (CHARCOAL BAND) -->\n  <section class=\"mn-band mn-band--charcoal\">\n    <div class=\"mn-wrap\">\n      <div class=\"mn-kicker\">07 \/ Gallery<\/div>\n      <div class=\"mn-h2\">GALERIE (placeholder)<\/div>\n      <p class=\"mn-p\">Tady jen \u201emock\u201c dla\u017edice. M\u00edsto toho d\u00e1\u0161 re\u00e1ln\u00e9 fotky. Pozad\u00ed full width, galerie v containeru.<\/p>\n\n      <div class=\"mn-grid-4\">\n        <div class=\"mn-thumb\"><\/div>\n        <div class=\"mn-thumb\"><\/div>\n        <div class=\"mn-thumb\"><\/div>\n        <div class=\"mn-thumb\"><\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 08 PACKAGES \/ TABLE (WHITE BAND) -->\n  <section class=\"mn-band mn-band--white\">\n    <div class=\"mn-wrap\">\n      <div class=\"mn-panel\">\n        <div class=\"mn-kicker\">08 \/ Packages<\/div>\n        <div class=\"mn-h2\">BAL\u00cd\u010cKY A CEN\u00cdK (uk\u00e1zka)<\/div>\n        <p class=\"mn-p\">Pro \u201erychl\u00e9 rozhodnut\u00ed\u201c se hod\u00ed bal\u00ed\u010dky. Tabulka je \u010diteln\u00e1 a jednoduch\u00e1.<\/p>\n\n        <table class=\"mn-table\" role=\"table\" aria-label=\"Uk\u00e1zkov\u00fd cen\u00edk\">\n          <thead>\n            <tr>\n              <th>Slu\u017eba<\/th>\n              <th>Co obsahuje<\/th>\n              <th>Pozn\u00e1mka<\/th>\n            <\/tr>\n          <\/thead>\n          <tbody>\n            <tr>\n              <td><strong>V\u00fdmalba byt\u016f<\/strong><\/td>\n              <td>zakryt\u00ed, malov\u00e1n\u00ed, z\u00e1kladn\u00ed \u00faklid<\/td>\n              <td>nej\u010dast\u011bj\u0161\u00ed volba<\/td>\n            <\/tr>\n            <tr class=\"mn-row--hl\">\n              <td><strong>Po st\u011bhov\u00e1n\u00ed<\/strong><\/td>\n              <td>opravy drobn\u00fdch vad + v\u00fdmalba<\/td>\n              <td>rychl\u00e9 p\u0159ed\u00e1n\u00ed bytu<\/td>\n            <\/tr>\n            <tr>\n              <td><strong>N\u00e1t\u011br z\u00e1rubn\u00ed<\/strong><\/td>\n              <td>p\u0159\u00edprava, n\u00e1t\u011br, kontrola detailu<\/td>\n              <td>ide\u00e1ln\u00ed s v\u00fdmalbou<\/td>\n            <\/tr>\n          <\/tbody>\n        <\/table>\n\n        <div class=\"mn-btn-row\" style=\"margin-top:16px;\">\n          <a class=\"mn-btn mn-btn--primary\" href=\"#mn-contact\">Chci nab\u00eddku<\/a>\n          <a class=\"mn-btn mn-btn--outline-dark\" href=\"#0\">St\u00e1hnout cen\u00edk<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- 09 FAQ (OFFWHITE BAND) -->\n  <section class=\"mn-band mn-band--offwhite\">\n    <div class=\"mn-wrap\">\n      <div class=\"mn-kicker\">09 \/ FAQ<\/div>\n      <div class=\"mn-h2\">FAQ (bez JS)<\/div>\n      <p class=\"mn-p\">Detaily\/summary funguj\u00ed i bez skript\u016f. Sta\u010d\u00ed doplnit re\u00e1ln\u00fd obsah.<\/p>\n\n      <details class=\"mn-faq\">\n        <summary>\n          <span>Jak rychle m\u016f\u017eete nastoupit?<\/span>\n          <svg class=\"mn-faq__chev\" aria-hidden=\"true\"><use href=\"#mn-ic-chevron\"><\/use><\/svg>\n        <\/summary>\n        <div class=\"mn-faq__body\">Podle vyt\u00ed\u017een\u00ed. Typicky domluva term\u00ednu do n\u011bkolika dn\u00ed (uk\u00e1zkov\u00fd text).<\/div>\n      <\/details>\n\n      <details class=\"mn-faq\">\n        <summary>\n          <span>D\u011bl\u00e1te i opravy prasklin a d\u011br?<\/span>\n          <svg class=\"mn-faq__chev\" aria-hidden=\"true\"><use href=\"#mn-ic-chevron\"><\/use><\/svg>\n        <\/summary>\n        <div class=\"mn-faq__body\">Ano, drobn\u00e9 opravy jsou sou\u010d\u00e1st\u00ed realizace nebo samostatn\u00e1 slu\u017eba (uk\u00e1zka).<\/div>\n      <\/details>\n\n      <details class=\"mn-faq\">\n        <summary>\n          <span>Co je v cen\u011b \u00faklid?<\/span>\n          <svg class=\"mn-faq__chev\" aria-hidden=\"true\"><use href=\"#mn-ic-chevron\"><\/use><\/svg>\n        <\/summary>\n        <div class=\"mn-faq__body\">Z\u00e1kladn\u00ed \u00faklid po pr\u00e1ci + odvoz drobn\u00e9ho odpadu dle domluvy (uk\u00e1zka).<\/div>\n      <\/details>\n    <\/div>\n  <\/section>\n\n  <!-- 10 CONTACT (DARK BAND) -->\n  <section id=\"mn-contact\" class=\"mn-band mn-band--dark\">\n    <div class=\"mn-wrap\">\n      <div class=\"mn-grid-2\">\n        <div>\n          <div class=\"mn-kicker\">10 \/ Contact<\/div>\n          <div class=\"mn-h2\">KONTAKT<\/div>\n          <p class=\"mn-p\">Tady dob\u0159e funguje velk\u00e9 \u010d\u00edslo + kr\u00e1tk\u00fd text + formul\u00e1\u0159 vedle. Pozad\u00ed full width, obsah v containeru.<\/p>\n\n          <div class=\"mn-panel\" style=\"padding:24px;\">\n            <div class=\"mn-h3\" style=\"margin-bottom:10px;\">774 244 705<\/div>\n            <p class=\"mn-p\" style=\"margin-bottom:0;\">\n              <svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-pin\"><\/use><\/svg>\n              Praha (Mod\u0159any a okol\u00ed) \u2022 Po\u2013P\u00e1 8:00\u201318:00\n            <\/p>\n          <\/div>\n        <\/div>\n\n        <div>\n          <div class=\"mn-panel\">\n            <div class=\"mn-h3\">Napi\u0161te n\u00e1m<\/div>\n            <form class=\"mn-form\">\n              <div>\n                <div class=\"mn-label\">Jm\u00e9no<\/div>\n                <input class=\"mn-input\" type=\"text\" placeholder=\"Nap\u0159. Jan Nov\u00e1k\">\n              <\/div>\n              <div>\n                <div class=\"mn-label\">Telefon<\/div>\n                <input class=\"mn-input\" type=\"tel\" placeholder=\"+420 777 000 000\">\n              <\/div>\n              <div>\n                <div class=\"mn-label\">Popis popt\u00e1vky<\/div>\n                <textarea class=\"mn-textarea\" placeholder=\"Kr\u00e1tce popi\u0161te, co pot\u0159ebujete\u2026\"><\/textarea>\n              <\/div>\n              <div class=\"mn-btn-row\">\n                <button class=\"mn-btn mn-btn--primary\" type=\"button\">\n                  <svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-check\"><\/use><\/svg>\n                  Odeslat\n                <\/button>\n                <button class=\"mn-btn mn-btn--outline-dark\" type=\"button\">Nez\u00e1vazn\u011b poptat<\/button>\n              <\/div>\n            <\/form>\n            <div class=\"mn-note\">Tohle je jen vizu\u00e1ln\u00ed uk\u00e1zka. Ve fin\u00e1le napoj\u00ed\u0161 na WP formul\u00e1\u0159 (CF7 \/ Fluent \/ GP).<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Full width background + container content POCTIV\u00c9 \u0158EMESLO Varianta \u201ehero na celou \u0161\u00ed\u0159ku\u201c s overlay. Pod t\u00edm m\u016f\u017ee b\u00fdt seznam benefit\u016f, CTA, nebo rychl\u00fd kontakt. \u010cist\u011b a pe\u010dliv\u011b V\u010das a domluven\u011b Jistota v\u00fdsledku Kontaktovat Zobrazit paletu Dal\u0161\u00ed moduly \u2192 Tip: Hero band m\u016f\u017ee b\u00fdt fotka (full width), ale obsah v\u017edy v containeru. Rychl\u00e1 popt\u00e1vka Tahle &#8230; <a title=\"test barev 2 full width\" class=\"read-more\" href=\"https:\/\/malby.nahromade.cz\/?page_id=11\" aria-label=\"\u010c\u00edst v\u00edce o test barev 2 full width\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/malby.nahromade.cz\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/malby.nahromade.cz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/malby.nahromade.cz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/malby.nahromade.cz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/malby.nahromade.cz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":2,"href":"https:\/\/malby.nahromade.cz\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/malby.nahromade.cz\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/malby.nahromade.cz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}