/* ========================================================================== MAHL Blocksy – základ: Blocksy premenné → tokeny MAHL + typografia obsahu. Načítava sa na webe aj v editore (iframe). Farby a písma LEN cez var(--mahl-*) zo štýlu mahl-tokens (registruje MAHL Stats, ADR #46). ========================================================================== */ /* ---------- 1. Mapovanie Blocksy → tokeny ---------- Indexy palety majú význam, aký web používal pred redizajnom (odkazuje na ne obsah aj nastavenia Customizeru): 1 navy, 2 navy hover, 3 biela, 4 navy, 5 červená, 6 sivé pozadie, 7 a 8 biela. Hodnoty v Customizeri sú len pre jeho náhľad. */ :root, :root .editor-styles-wrapper { --theme-palette-color-1: var(--mahl-navy); --theme-palette-color-2: var(--mahl-navy-2); --theme-palette-color-3: var(--mahl-white); --theme-palette-color-4: var(--mahl-navy); --theme-palette-color-5: var(--mahl-red); --theme-palette-color-6: var(--mahl-bg); --theme-palette-color-7: var(--mahl-white); --theme-palette-color-8: var(--mahl-white); --theme-font-stack-default: var(--mahl-font-body); --theme-font-size: 17px; --theme-line-height: 1.6; --theme-text-color: var(--mahl-text-2); --theme-headings-color: var(--mahl-navy); --theme-link-initial-color: var(--mahl-navy); --theme-link-hover-color: var(--mahl-red); --theme-border-color: var(--mahl-line); /* tlačidlá = CTA červené (DESIGN.md), štýl „Navy" je variant bloku */ --theme-button-font-weight: var(--mahl-fw-strong); --theme-button-font-size: 20px; --theme-button-min-height: 50px; --theme-button-padding: 0 28px; --theme-button-border-radius: 0; --theme-button-text-initial-color: var(--mahl-white); --theme-button-text-hover-color: var(--mahl-white); --theme-button-background-initial-color: var(--mahl-red); --theme-button-background-hover-color: var(--mahl-red-dark); --theme-form-field-border-radius: 0; --theme-form-field-border-initial-color: var(--mahl-line); --theme-form-field-border-focus-color: var(--mahl-navy); } /* ---------- 2. Nadpisy: Barlow Condensed ExtraBold Italic, veľké písmená ---------- Mierka je menšia ako v predlohách – rovnaká ako stránky MAHL Stats (--mahl-v2-h1). */ h1, h2, h3, h4, h5, h6 { --theme-font-family: var(--mahl-font-display); --theme-font-style: italic; --theme-font-weight: var(--mahl-fw-display); --theme-text-transform: uppercase; --theme-line-height: .9; --theme-letter-spacing: 0; } h1 { --theme-font-size: clamp(38px, 6.2vw, 80px); } h2 { --theme-font-size: clamp(30px, 4vw, 48px); } h3 { --theme-font-size: clamp(24px, 2.6vw, 32px); } h4 { --theme-font-size: 24px; } h5 { --theme-font-size: 20px; } h6 { --theme-font-size: 18px; --theme-font-weight: var(--mahl-fw-strong); } /* ---------- 3. Obsah z editora (stránky, články) ---------- Neplatí vo vnútri blokov MAHL (.mahl-sec) – tie majú vlastnú typografiu v pluginu MAHL Bloky. */ :is(.entry-content, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6):not(.mahl-sec *) { margin-block: 1.4em .5em; } :is(.entry-content, .editor-styles-wrapper) .mahl-red:not(.mahl-sec *), :is(.entry-content, .editor-styles-wrapper) :is(h1, h2, h3) strong { color: var(--mahl-red); } /* odkazy v texte: navy s červenou linkou */ :is(.entry-content, .editor-styles-wrapper) :is(p, li, td, figcaption) a:not(.wp-block-button__link):not(.mahl-btn):not(.mahl-more):not(.mahl-sec *) { color: var(--mahl-navy); text-decoration: underline; text-decoration-color: var(--mahl-red); text-decoration-thickness: 2px; text-underline-offset: 3px; } :is(.entry-content, .editor-styles-wrapper) :is(p, li, td, figcaption) a:not(.wp-block-button__link):not(.mahl-btn):not(.mahl-more):not(.mahl-sec *):hover { color: var(--mahl-red); } :is(.entry-content, .editor-styles-wrapper) li:not(.mahl-sec *)::marker { color: var(--mahl-red); font-weight: var(--mahl-fw-strong); } /* citát */ :is(.entry-content, .editor-styles-wrapper) .wp-block-quote { margin-inline: 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--mahl-red); border-radius: 0; background: none; } :is(.entry-content, .editor-styles-wrapper) .wp-block-quote p { font-family: var(--mahl-font-display); font-style: italic; font-weight: var(--mahl-fw-strong); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; color: var(--mahl-navy); } :is(.entry-content, .editor-styles-wrapper) .wp-block-quote cite { font-family: var(--mahl-font-meta); font-style: italic; font-weight: var(--mahl-fw-meta); text-transform: uppercase; color: var(--mahl-muted); } /* tabuľky */ :is(.entry-content, .editor-styles-wrapper) .wp-block-table table { border-collapse: collapse; font-variant-numeric: tabular-nums; } :is(.entry-content, .editor-styles-wrapper) .wp-block-table :is(th, td) { border: 0; border-bottom: 1px solid var(--mahl-line); padding: 10px 12px; } :is(.entry-content, .editor-styles-wrapper) .wp-block-table thead th { background: var(--mahl-navy); color: var(--mahl-white); font-family: var(--mahl-font-meta); font-weight: var(--mahl-fw-strong); text-transform: uppercase; } /* tlačidlá: šikmý rez ako .mahl-btn */ .wp-block-button__link, .wp-element-button { display: inline-flex; align-items: center; border-radius: 0; font-family: var(--mahl-font-display); font-style: italic; text-transform: uppercase; clip-path: polygon(var(--mahl-skew-sm) 0, 100% 0, calc(100% - var(--mahl-skew-sm)) 100%, 0 100%); } .wp-block-button.is-style-mahl-navy .wp-block-button__link { background: var(--mahl-navy); color: var(--mahl-white); } .wp-block-button.is-style-mahl-navy .wp-block-button__link:hover { background: var(--mahl-navy-2); } /* oddeľovač = krátka červená linka (.mahl-rule), „široký" ostáva tenkou čiarou */ :is(.entry-content, .editor-styles-wrapper) .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 56px; height: 4px; margin-inline: 0; border: 0; background: var(--mahl-red); opacity: 1; } :is(.entry-content, .editor-styles-wrapper) .wp-block-separator.is-style-wide { border: 0; border-top: 1px solid var(--mahl-line); opacity: 1; } /* obrázky bez zaoblenia (DESIGN.md: border-radius 0) */ :is(.entry-content, .editor-styles-wrapper) :is(img, .wp-block-image img, .wp-block-cover) { border-radius: 0; }