/* * AI Listovač — wireframe layout CSS pro VOIX (v2 — defensive specificity) * ======================================================================== * Upload do Shoptet → Soubory → Externí soubory; reference v Záhlaví : * * * v2 zmena: kazda declaration ma `!important` flag. Duvod: VOIX Shoptet * sablona pouziva v `.basic-description` / `.tab-pane` hluboke selectory * (specificity ≥ 0,2,1 + tu a tam !important), ktere v cascade prebijely * nase base rules ``.vlst-listovac .feature-card { ... }`` (specificity * 0,2,0). Vsechny selectory zustavaji prefixovane `.vlst-listovac` — * neovlivni produkty, ktere wrapper nemaji. * * Source of truth: /tools/listovac_styles.py (LISTOVAC_CSS_TEMPLATE). * Regenerace: python3 -c "from tools.listovac_styles import get_listovac_css; * print(get_listovac_css('.vlst-listovac', force_important=True))" */ .vlst-listovac { font-size: 15px !important; color: #1f2937 !important; } .vlst-listovac h2, .vlst-listovac h3 { margin-top: 1.5em !important; } .vlst-listovac p { margin: 0.75em 0 !important; } .vlst-listovac ul, .vlst-listovac ol { padding-left: 1.5em !important; } /* Sekční oddělovač — tenká světle šedá linka před každou novou logickou sekcí v dlouhém popisu. */ .vlst-listovac > h2, .vlst-listovac > .feature-card, .vlst-listovac > .section-twocol-imageright, .vlst-listovac > .section-twocol-imageleft, .vlst-listovac > .who-fits, .vlst-listovac > .outro-services { border-top: 1px solid #e5e7eb !important; padding-top: 32px !important; margin-top: 32px !important; } /* Image vložené po substituci placeholderů v _embed_images_in_long_desc */ .vlst-listovac .embedded-image { display: block !important; background: #e5e7eb !important; border-radius: 8px !important; overflow: hidden !important; } .vlst-listovac .embedded-image img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; } /* Pokud zbude nesubstituovaný placeholder (= došel pool obrázků) */ .vlst-listovac .image-placeholder, .vlst-listovac .feature-card-image:empty { display: block !important; background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #e5e7eb 10px, #e5e7eb 20px) !important; border-radius: 8px !important; padding: 24px !important; font-size: 12px !important; color: #6b7280 !important; text-align: center !important; font-family: SFMono-Regular, Menlo, monospace !important; min-height: 120px !important; } /* section-with-image-below: H2 + p (mimo wrapper), pak full-width obrázek 16:9 */ .vlst-listovac .section-with-image-below { margin: 24px 0 !important; } .vlst-listovac .section-with-image-below .embedded-image, .vlst-listovac .section-with-image-below .image-placeholder { aspect-ratio: 16 / 9 !important; } /* feature-card: tinted pozadí, 1:1 obrázek vlevo + text vpravo */ .vlst-listovac .feature-card { display: grid !important; grid-template-columns: 1fr 1.2fr !important; gap: 24px !important; background: #f3f4f6 !important; border-radius: 12px !important; padding: 24px !important; margin: 28px 0 !important; align-items: center !important; } .vlst-listovac .feature-card .feature-card-image, .vlst-listovac .feature-card > .embedded-image { aspect-ratio: 1 / 1 !important; } .vlst-listovac .feature-card-content { padding: 4px 0 !important; } .vlst-listovac .feature-card-content h3 { text-transform: uppercase !important; font-size: 13px !important; letter-spacing: 0.5px !important; margin: 0 0 10px !important; color: #4b5563 !important; } .vlst-listovac .feature-card-content p { margin: 0 !important; } /* section-twocol-imageright: text vlevo, obrázek vpravo (4:3) */ .vlst-listovac .section-twocol-imageright, .vlst-listovac .section-twocol-imageleft { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; margin: 28px 0 !important; align-items: center !important; } .vlst-listovac .section-twocol-imageright .embedded-image, .vlst-listovac .section-twocol-imageright .image-placeholder, .vlst-listovac .section-twocol-imageleft .embedded-image, .vlst-listovac .section-twocol-imageleft .image-placeholder { aspect-ratio: 4 / 3 !important; } .vlst-listovac .section-twocol-imageleft .embedded-image, .vlst-listovac .section-twocol-imageleft .image-placeholder { order: -1 !important; } .vlst-listovac .section-twocol-content h2, .vlst-listovac .section-twocol-content h3 { margin-top: 0 !important; } .vlst-listovac .section-twocol-content > :first-child { margin-top: 0 !important; } .vlst-listovac .section-twocol-content > :last-child { margin-bottom: 0 !important; } /* who-fits: 2 sloupce sedne / nesedne pod společným nadpisem */ .vlst-listovac .who-fits { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; margin: 32px 0 !important; background: #f9fafb !important; padding: 24px 28px !important; border-radius: 12px !important; } .vlst-listovac .who-fits > h2 { grid-column: 1 / -1 !important; margin: 0 0 4px !important; font-size: 22px !important; color: #111827 !important; } .vlst-listovac .fits-yes, .vlst-listovac .fits-no { padding: 0 !important; } .vlst-listovac .fits-yes h4, .vlst-listovac .fits-no h4 { margin: 0 0 8px !important; font-size: 14px !important; font-weight: 700 !important; } .vlst-listovac .fits-yes h4 { color: #166534 !important; } .vlst-listovac .fits-no h4 { color: #991b1b !important; } .vlst-listovac .fits-yes ul, .vlst-listovac .fits-no ul { margin: 0 !important; padding-left: 18px !important; color: #1f2937 !important; } .vlst-listovac .fits-yes li, .vlst-listovac .fits-no li { margin: 6px 0 !important; } /* outro-services: 3 oddělené odstavce s vlastními H2 */ .vlst-listovac .outro-services { margin: 32px 0 0 !important; padding: 28px !important; background: #fafafa !important; border-radius: 12px !important; } .vlst-listovac .outro-services h2 { margin: 24px 0 8px !important; font-size: 18px !important; color: #1f2937 !important; } .vlst-listovac .outro-services h2:first-child { margin-top: 0 !important; } .vlst-listovac .outro-services p { margin: 0 0 16px !important; } .vlst-listovac .outro-services p:last-child { margin-bottom: 0 !important; } /* Mobile fallback */ @media (max-width: 700px) { .vlst-listovac .feature-card, .vlst-listovac .section-twocol-imageright, .vlst-listovac .section-twocol-imageleft, .vlst-listovac .who-fits { grid-template-columns: 1fr !important; } .vlst-listovac .section-twocol-imageleft .embedded-image, .vlst-listovac .section-twocol-imageleft .image-placeholder { order: 0 !important; } }