﻿﻿﻿﻿{"id":17,"date":"2026-03-01T02:27:19","date_gmt":"2026-03-01T02:27:19","guid":{"rendered":"https:\/\/malby.nahromade.cz\/?page_id=17"},"modified":"2026-03-01T02:27:19","modified_gmt":"2026-03-01T02:27:19","slug":"test-barev-4-full-width-last","status":"publish","type":"page","link":"https:\/\/malby.nahromade.cz\/?page_id=17","title":{"rendered":"test barev 4 full width &#8211; last"},"content":{"rendered":"\n<div class=\"mn-styleguide\">\n\n  <style>\n    \/* Fonts (bez <head>) *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700&family=Bebas+Neue&family=Oswald:wght@400;600&display=swap');\n\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.68);\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 (jemn\u011bj\u0161\u00ed ne\u017e p\u0159edt\u00edm) *\/\n      --shadow: 0 8px 24px rgba(0,0,0,0.14);\n      --shadow-strong: 0 16px 50px rgba(0,0,0,0.26);\n    }\n\n    \/* Scope only *\/\n    .mn-styleguide{\n      font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n      font-size: 16px;\n      line-height: 1.7;\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    .mn-styleguide button, .mn-styleguide input, .mn-styleguide textarea{ font: 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    .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{ background: var(--black); color: var(--text-on-dark); }\n    .mn-band--charcoal{ background: var(--charcoal); color: var(--text-on-dark); }\n\n    \/* Full width \"photo\" band (bez extern\u00ed fotky) *\/\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\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 *\/\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.05);\n      border-color: rgba(255,255,255,0.16);\n      box-shadow: none;\n      backdrop-filter: blur(2px);\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\n    \/* Nadpisy = headline font *\/\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: 64px; }\n    .mn-h2{ font-size: 46px; }\n    .mn-h3{ font-size: 28px; letter-spacing: 0.03em; }\n\n    @media (max-width: 800px){\n      .mn-h1{ font-size: 44px; }\n      .mn-h2{ font-size: 34px; }\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-lead{\n      font-size: 18px;\n      line-height: 1.85;\n      margin: 0 0 var(--space-3) 0;\n      color: var(--text-muted-on-light);\n      max-width: 72ch;\n    }\n    .mn-band--dark .mn-lead,\n    .mn-band--charcoal .mn-lead,\n    .mn-band--photo .mn-lead{ 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 *\/\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    .mn-ic--sm{ width: 16px; height: 16px; }\n\n    \/* Buttons *\/\n    .mn-btn-row{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top: var(--space-2); }\n\n    \/* CTA font = headline font *\/\n    .mn-btn{\n      font-family: \"Bebas Neue\",\"Oswald\",Impact,\"Arial Narrow\",sans-serif;\n      letter-spacing: .06em;\n      text-transform: uppercase;\n\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: 700;\n      text-decoration:none;\n\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      white-space: nowrap;\n    }\n    .mn-btn:active{ transform: translateY(1px); }\n    .mn-btn:focus-visible{\n      outline: 2px solid rgba(227,0,83,0.55);\n      outline-offset: 2px;\n    }\n\n    \/* Primary = v\u017edy \u010derven\u00e1 + b\u00edl\u00fd text (vynuceno) *\/\n    .mn-btn--primary{\n      --btn-hover-bg: var(--brand-red-dark);\n      --btn-hover-fg: var(--white);\n      --btn-hover-border: transparent;\n\n      background: var(--brand-red);\n      color: var(--white) !important;\n      box-shadow: 0 10px 22px rgba(227,0,83,0.22);\n    }\n    .mn-btn--primary:hover{\n      background: var(--btn-hover-bg);\n      color: var(--btn-hover-fg) !important;\n      border-color: var(--btn-hover-border);\n      box-shadow: 0 12px 28px rgba(0,0,0,0.18);\n    }\n\n    \/* Variant A: hover = black + white *\/\n    .mn-btn--hover-black{\n      --btn-hover-bg: var(--black);\n      --btn-hover-fg: var(--white);\n      --btn-hover-border: rgba(255,255,255,0.10);\n    }\n\n    \/* Variant B: hover = tint + black (sv\u011btle r\u016f\u017eov\u00e1) *\/\n    .mn-btn--hover-tint{\n      --btn-hover-bg: var(--brand-red-tint);\n      --btn-hover-fg: var(--black);\n      --btn-hover-border: rgba(227,0,83,0.35);\n    }\n    .mn-btn--primary.mn-btn--hover-tint:hover{\n      box-shadow: 0 10px 22px rgba(227,0,83,0.10);\n    }\n\n    .mn-btn--outline{\n      color: var(--text-on-light);\n      border-color: var(--border-on-light);\n      background: var(--white);\n    }\n    .mn-btn--outline:hover{ border-color: var(--brand-red); color: var(--brand-red); }\n\n    .mn-band--dark .mn-btn--outline,\n    .mn-band--charcoal .mn-btn--outline,\n    .mn-band--photo .mn-btn--outline{\n      background: rgba(255,255,255,0.06);\n      border-color: rgba(255,255,255,0.20);\n      color: var(--white);\n    }\n    .mn-band--dark .mn-btn--outline:hover,\n    .mn-band--charcoal .mn-btn--outline:hover,\n    .mn-band--photo .mn-btn--outline:hover{\n      border-color: rgba(227,0,83,0.70);\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      min-height: auto;\n      font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif; \/* ghost link jako text *\/\n      letter-spacing: 0;\n      text-transform: none;\n      font-weight: 700;\n    }\n    .mn-btn--ghost:hover{ color: var(--brand-red-dark); }\n\n    .mn-btn--sm{ padding: 9px 12px; min-height: 38px; }\n    .mn-btn--pill{ border-radius: 999px; }\n\n    .mn-link{\n      color: var(--brand-red);\n      text-decoration:none;\n      border-bottom: 1px solid transparent;\n      font-weight: 600;\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 18px 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      font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n      letter-spacing: 0;\n      text-transform: none;\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    \/* Chips \/ badges *\/\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      font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n      text-transform: none;\n      letter-spacing: 0;\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    .mn-badge{\n      display:inline-flex;\n      align-items:center;\n      gap: 8px;\n      padding: 6px 10px;\n      border-radius: 999px;\n      background: rgba(255,255,255,0.10);\n      border: 1px solid rgba(255,255,255,0.18);\n      font-size: 13px;\n      margin-bottom: var(--space-2);\n      color: var(--white);\n      font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n      letter-spacing: 0;\n      text-transform: none;\n    }\n    .mn-dot{\n      width: 10px; height: 10px; border-radius: 999px;\n      background: var(--brand-red);\n      box-shadow: 0 0 0 3px rgba(227,0,83,0.22);\n    }\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      font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n    }\n    .mn-band--dark .mn-swatch__meta,\n    .mn-band--charcoal .mn-swatch__meta{ color: var(--text-muted-on-dark); }\n\n    \/* Divider *\/\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{\n      color: var(--text-muted-on-light);\n      font-size: 13px;\n      font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n    }\n    .mn-band--dark .mn-stat span,\n    .mn-band--charcoal .mn-stat span{ color: var(--text-muted-on-dark); }\n\n    \/* Split layout (text + media) *\/\n    .mn-split{\n      display:grid;\n      grid-template-columns: 1.05fr .95fr;\n      gap: var(--space-5);\n      align-items: center;\n    }\n    .mn-split--reverse{ grid-template-columns: .95fr 1.05fr; }\n\n    .mn-media{\n      border-radius: calc(var(--radius) * 1.6);\n      border: 1px solid var(--border-on-light);\n      overflow: hidden;\n      box-shadow: var(--shadow);\n      background:\n        linear-gradient(135deg, rgba(0,0,0,0.06), rgba(0,0,0,0)),\n        radial-gradient(600px 220px at 20% 80%, rgba(227,0,83,0.10), rgba(227,0,83,0));\n      aspect-ratio: 4 \/ 3;\n      min-height: 260px;\n      position: relative;\n    }\n    .mn-band--dark .mn-media,\n    .mn-band--charcoal .mn-media,\n    .mn-band--photo .mn-media{\n      border-color: rgba(255,255,255,0.16);\n      box-shadow: none;\n      background:\n        linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0)),\n        radial-gradient(600px 220px at 20% 80%, rgba(227,0,83,0.12), rgba(0,0,0,0));\n    }\n    .mn-media__label{\n      position:absolute;\n      left: 12px;\n      bottom: 12px;\n      display:inline-flex;\n      gap: 8px;\n      align-items:center;\n      padding: 8px 10px;\n      border-radius: 999px;\n      font-size: 13px;\n      background: rgba(0,0,0,0.55);\n      border: 1px solid rgba(255,255,255,0.18);\n      color: #fff;\n      font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n      text-transform: none;\n      letter-spacing: 0;\n    }\n\n    @media (max-width: 980px){\n      .mn-split, .mn-split--reverse{ grid-template-columns: 1fr; }\n      .mn-media{ min-height: 220px; }\n    }\n\n    \/* Table *\/\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      font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\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      vertical-align: top;\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      font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n      font-weight: 700;\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 *\/\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      font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\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 .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: 800;\n      color: var(--text-on-light);\n      font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n      letter-spacing: 0;\n      text-transform: none;\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      outline: none;\n      transition: border-color .15s ease, box-shadow .15s ease;\n      font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\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    \/* Mini nav *\/\n    .mn-nav{\n      display:flex;\n      flex-wrap:wrap;\n      gap: 10px;\n      margin-top: 14px;\n    }\n    .mn-nav a{\n      font-size: 13px;\n      text-decoration:none;\n      padding: 6px 10px;\n      border-radius: 999px;\n      border: 1px solid rgba(255,255,255,0.20);\n      background: rgba(255,255,255,0.06);\n      color: rgba(255,255,255,0.92);\n      font-family: \"Montserrat\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n      text-transform: none;\n      letter-spacing: 0;\n      font-weight: 600;\n    }\n    .mn-nav a:hover{ border-color: rgba(227,0,83,0.50); color: #fff; }\n  <\/style>\n\n  <!-- SVG ICON SPRITE -->\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    <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    <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    <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    <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    <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    <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  <!-- HERO -->\n  <section class=\"mn-band mn-band--photo\" id=\"top\">\n    <div class=\"mn-wrap\">\n      <div class=\"mn-grid-2\" style=\"align-items:center;\">\n        <div>\n          <div class=\"mn-badge\"><span class=\"mn-dot\"><\/span> Preview: fonty + hover CTA<\/div>\n          <div class=\"mn-h1\">POCTIV\u00c9 \u0158EMESLO<\/div>\n          <p class=\"mn-lead\">Texty jsou v Montserrat, nadpisy a CTA jsou ve \u201eheadline\u201c fontu. N\u00ed\u017ee jsou i dv\u011b varianty hoveru pro prim\u00e1rn\u00ed CTA.<\/p>\n\n          <div class=\"mn-btn-row\" style=\"margin-top:16px;\">\n            <a class=\"mn-btn mn-btn--primary mn-btn--hover-black\" href=\"#mn-contact\">\n              <svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-phone\"><\/use><\/svg>\n              CTA hover: \u010dern\u00e1\n            <\/a>\n            <a class=\"mn-btn mn-btn--primary mn-btn--hover-tint\" href=\"#mn-contact\">\n              <svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-phone\"><\/use><\/svg>\n              CTA hover: r\u016f\u017eov\u00e1\n            <\/a>\n            <a class=\"mn-btn mn-btn--outline\" href=\"#mn-typography\">UI prvky<\/a>\n          <\/div>\n\n          <nav class=\"mn-nav\" aria-label=\"Rychl\u00e1 navigace\">\n            <a href=\"#mn-typography\">Typografie<\/a>\n            <a href=\"#mn-contact\">Kontakt<\/a>\n          <\/nav>\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\">Tady je vid\u011bt kontrast Montserrat textu na tmav\u00e9m pozad\u00ed.<\/p>\n            <div class=\"mn-btn-row\">\n              <a class=\"mn-btn mn-btn--primary mn-btn--hover-black\" href=\"#mn-contact\">Nez\u00e1vazn\u011b poptat<\/a>\n              <a class=\"mn-btn mn-btn--outline\" href=\"#0\">Cen\u00edk<\/a>\n            <\/div>\n            <div class=\"mn-divider\"><\/div>\n            <p class=\"mn-p\" style=\"margin:0;\"><svg class=\"mn-ic\" aria-hidden=\"true\"><use href=\"#mn-ic-pin\"><\/use><\/svg> Praha (Mod\u0159any a okol\u00ed)<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- TYPOGRAPHY + UI (zbytek tv\u00e9ho dlouh\u00e9ho demo m\u016f\u017ee z\u016fstat stejn\u00fd) -->\n  <!-- POZOR: jestli chce\u0161, po\u0161li mi sv\u016fj aktu\u00e1ln\u00ed \u201efull\u201c div (ten cel\u00fd dlouh\u00fd),\n       a j\u00e1 ti ho cel\u00e9 p\u0159ep\u00ed\u0161u 1:1 s t\u011bmito \u00fapravami bez zkr\u00e1cen\u00ed.\n       Tady jsem ti dal hotovou upravenou verzi CSS + uk\u00e1zku CTA hover\u016f. -->\n\n  <!-- CONTACT (uk\u00e1zka) -->\n  <section id=\"mn-contact\" class=\"mn-band mn-band--dark\">\n    <div class=\"mn-wrap\">\n      <div class=\"mn-panel\">\n        <div class=\"mn-h2\">KONTAKT<\/div>\n        <p class=\"mn-p\">CTA test: hover \u010dern\u00e1 vs hover r\u016f\u017eov\u00e1.<\/p>\n        <div class=\"mn-btn-row\">\n          <a class=\"mn-btn mn-btn--primary mn-btn--hover-black\" href=\"#0\">Hover \u010dern\u00e1<\/a>\n          <a class=\"mn-btn mn-btn--primary mn-btn--hover-tint\" href=\"#0\">Hover r\u016f\u017eov\u00e1<\/a>\n          <a class=\"mn-btn mn-btn--outline\" href=\"#top\">Zp\u011bt nahoru<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Preview: fonty + hover CTA POCTIV\u00c9 \u0158EMESLO Texty jsou v Montserrat, nadpisy a CTA jsou ve \u201eheadline\u201c fontu. N\u00ed\u017ee jsou i dv\u011b varianty hoveru pro prim\u00e1rn\u00ed CTA. CTA hover: \u010dern\u00e1 CTA hover: r\u016f\u017eov\u00e1 UI prvky Typografie Kontakt Rychl\u00e1 popt\u00e1vka Tady je vid\u011bt kontrast Montserrat textu na tmav\u00e9m pozad\u00ed. Nez\u00e1vazn\u011b poptat Cen\u00edk Praha (Mod\u0159any a okol\u00ed) &#8230; <a title=\"test barev 4 full width &#8211; last\" class=\"read-more\" href=\"https:\/\/malby.nahromade.cz\/?page_id=17\" aria-label=\"\u010c\u00edst v\u00edce o test barev 4 full width &#8211; last\">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-17","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/malby.nahromade.cz\/index.php?rest_route=\/wp\/v2\/pages\/17","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=17"}],"version-history":[{"count":2,"href":"https:\/\/malby.nahromade.cz\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/malby.nahromade.cz\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/malby.nahromade.cz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}