/* UkraineInfo skin — Layer 1 (Phase 4 redesign foundation). Re-colours palette + typography over Soledad/Penci/Elementor by OVERRIDING existing styles (no markup rebuild). Loaded after uki-tokens.css at priority 100. Selectors were verified against the live guest render (Step 0 recon): header/footer are a Penci BUILDER (not classic Soledad), so the spec's best-effort selector guesses were adapted or deferred — see notes inline. Reversible: delete this file + its enqueue in functions.php. */ /* ===== 4A · SAFE GLOBALS (low risk, shipped) ===== */ body{ background:var(--uki-paper); color:var(--uki-graphite); font-family:var(--uki-sans); } /* This install is a BOXED layout: the visible page canvas is the wrapper bg (theme: .wrapper-boxed{background:var(--pcbg-cl)} where --pcbg-cl:#f6f8fa), not . Cream the wrapper so the page reads as warm paper. We do NOT remap --pcbg-cl globally (it also backs post/card surfaces — leave those). */ .wrapper-boxed,.wrapper-boxed.enable-boxed{ background-color:var(--uki-paper) !important; } h1,h2,h3,h4,h5, .penci-title,.penci-post-title,.entry-title,.post-title,.cat-title, .widget-title,.item-related-title{ font-family:var(--uki-serif); } a{ color:var(--uki-ink); } a:hover{ color:var(--uki-gold); } /* category kickers (currently red #c20017) -> gold */ .cat > a,.post-cat a,.penci-cat-name,.penci-featured-cat a,.cat-labels a, .penci-standard-cat a,.cat-title a{ color:var(--uki-gold) !important; } /* primary accent (Soledad bright blue) -> gold buttons w/ dark ink text */ .penci-button,.btn,.button,.penci-readmore,input[type="submit"], .wpcf7-submit,.wpforms-submit{ background-color:var(--uki-gold) !important; border-color:var(--uki-gold) !important; color:#23201a !important; } .penci-pagination .current,.page-numbers.current{ background:var(--uki-ink) !important; border-color:var(--uki-ink) !important; color:#fff !important; } /* ===== 4B · SHELL RECOLOUR ===== */ /* Verified-selector, legibility-safe pieces are ACTIVE below. The dark-navy -> cream HEADER inversion + nav recolour is DEFERRED this round: the header is a Penci Header Builder whose colours come from generated inline CSS + per-element theme_mods; a partial external override risks illegible nav. Real selectors captured for the next round are listed in the commented block. */ /* -- top utility bar: tame the bright-blue "Популярні" pill (legible on dark hdr) -- */ .penci-topbar-trending .headline-title, .penci-topbar-trending .headline-title.nticker-style-2{ background:var(--uki-ink) !important; color:#fff !important; } /* trending nav item links -> soft gold on the dark bar */ .penci-topbar-trending .penci-trending-nav a{ color:var(--uki-gold-soft) !important; } /* -- "Підписуйся!" header button (button-2, bright blue/yellow) -> gold/ink -- */ .penci-builder-button.button-2 > a, .penci-builder-button.button-2 a{ background-color:var(--uki-gold) !important; border-color:var(--uki-gold) !important; color:#23201a !important; } .penci-builder-button.button-2 a:hover{ background-color:var(--uki-ink) !important; color:#fff !important; } /* -- footer accents: widget titles -> gold (footer bg is already dark) -- */ #footer-section-container .penci-widget-title, #footer-section-container .widget-title{ color:var(--uki-gold) !important; } /* drop boxy light-blue widget borders on cream */ .penci-wrapper-data,.item-related,.penci-widget,.widget{ border-color:var(--uki-line) !important; } /* neutralise a leftover Penci MOBILE-header HTML block that prints a stray "Copyright 2026 - All Right Reserved" placeholder (source: theme_mod penci_header_builder_pb_html_mobile_name; theme_mods untouched this round). Owner can instead clear that text in Customize > Header Builder > HTML(mobile). */ .penci-html-ads.penci-html-ads-mobile{ display:none !important; } /* ===== STEP C · Elementor block + card surface + link recolour (content) ===== */ /* 1) The two coloured homepage blocks: navy -> slate ink-2 (Elementor per-element generated CSS; overridden by targeting the real element ids w/ !important). */ .elementor-element-b6479a5, .elementor-element-ae938ee{ background-color:var(--uki-ink-2) !important; } /* 2a) Warm every Penci --pcbg-cl surface (#f6f8fa post/card backgrounds) to paper-2. The page canvas stays --uki-paper via the .wrapper-boxed rule. */ body{ --pcbg-cl:var(--uki-paper-2) !important; } /* 2b) The white Penci sidebar/news widget boxes (Elementor-styled #fff + light-blue #bad9f8 border) -> warm paper-2 + hairline. Scoped to the two Penci widget types that carry the box (small-list x5, popular-cat x1), so no over-reach. */ .elementor-widget-penci-small-list, .elementor-widget-penci-popular-cat{ background-color:var(--uki-paper-2) !important; border-color:var(--uki-line) !important; } /* Their inner containers + the main-column Penci block/slider inners + the single white Elementor column (29b88e4) also carry #fff — warm them to paper-2 too. */ .elementor-widget-penci-small-list > .elementor-widget-container, .elementor-widget-penci-popular-cat > .elementor-widget-container, .penci-bgitin,.pcsl-itemin, .elementor-element-29b88e4 > .elementor-widget-wrap{ background-color:var(--uki-paper-2) !important; } /* 3) Title / category / news-list LINKS: navy #003366 -> ink, hover -> gold. Scoped to content/widget link classes (never header nav or footer). The Elementor per-element `.elementor-element-XXX li a{#003366}` needs !important. */ .widget_categories a,.cat-item a,.penci-block-vc li a, .penci-small-list a,.penci-popular-cat a,.side-newsfeed a, .grid-title a,.penci-entry-title a,.side-title a,.item-content .grid-title a{ color:var(--uki-ink) !important; } .widget_categories a:hover,.cat-item a:hover,.penci-block-vc li a:hover, .penci-small-list a:hover,.penci-popular-cat a:hover,.side-newsfeed a:hover, .grid-title a:hover,.penci-entry-title a:hover,.side-title a:hover,.item-content .grid-title a:hover{ color:var(--uki-gold) !important; } /* 4) Sidebar search (ПОШУК) submit button: white -> gold with dark text. */ .searchsubmit,.search-submit,.widget_search button[type="submit"]{ background-color:var(--uki-gold) !important; border-color:var(--uki-gold) !important; color:#23201a !important; } /* ===== STEP F · HEADER = CREAM MASTHEAD (mockup) ===== The white-PNG blocker is gone: the Penci logo element is now in TEXT mode (settings_content on header post 1405), rendering a live two-tone wordmark UkraineInfo + tagline. So the masthead goes FULL CREAM per the mockup: bars -> --uki-paper, wordmark/nav -> ink, hover/accents -> gold, hairlines on --uki-line. Bar backgrounds are creamed both in settings_content (midbar) and here (belt+suspenders for the bars whose bg is builder-inline). Reversible: restore header-1405-settings_content.before.json + revert this block. */ /* -- all header bars (utility/mid/sticky) + search popup -> cream -- */ .penci-header-wrap .penci-desktop-topbar, .penci-header-wrap .penci-desktop-midbar, .penci-header-wrap .penci-desktop-bottombar, .penci-header-wrap .penci-desktop-sticky-mid, .penci-header-wrap .penci-sticky-mid, .penci-header-wrap .penci_builder_sticky_header_desktop, #pcbdhd_new-header .penci-desktop-midbar, .penci-header-wrap .show-search{ background-color:var(--uki-paper) !important; } /* hairline rules between the bands (mockup .util border-bottom / .masthead-rule) */ .penci-header-wrap .penci-desktop-topbar{ border-bottom:1px solid var(--uki-line) !important; } .penci-header-wrap .penci-desktop-midbar{ border-bottom:1px solid var(--uki-line) !important; } /* -- wordmark (text-logo): Lora ink + gold "Info", tagline muted, tryzub mark left -- */ .penci-header-wrap .penci-header-text-logo > a{ display:grid; grid-template-columns:auto auto; column-gap:13px; align-items:center; text-decoration:none; } .penci-header-wrap .penci-header-text-logo > a::before{ content:""; grid-row:1 / span 2; align-self:center; width:26px; height:34px; flex:0 0 auto; background:url(tryzub.svg) no-repeat center/contain; } .penci-header-wrap .penci-header-text-logo .site-name{ grid-column:2; grid-row:1; font-family:var(--uki-serif); font-weight:700; font-size:34px; line-height:1; color:var(--uki-ink); } .penci-header-wrap .penci-header-text-logo .site-name b{ color:var(--uki-gold); font-weight:700; } .penci-header-wrap .penci-header-text-logo .site-slogan{ grid-column:2; grid-row:2; margin-top:5px; font-family:var(--uki-sans); font-size:12px; letter-spacing:.02em; color:var(--uki-muted); } .penci-header-wrap .penci-header-text-logo .site-slogan span{ color:inherit; } /* -- nav links: ink, gold hover, ink underline on active -- */ .penci-header-wrap .menu-hgb-main a{ color:var(--uki-ink) !important; font-family:var(--uki-sans); font-weight:500; border-bottom:2px solid transparent; } .penci-header-wrap .menu-hgb-main a:hover{ color:var(--uki-gold) !important; border-color:var(--uki-gold); } .penci-header-wrap .menu-hgb-main .current-menu-item > a, .penci-header-wrap .menu-hgb-main .current-menu-parent > a{ color:var(--uki-ink) !important; border-color:var(--uki-ink); } /* Deepstate menu item as a PILL (added .uki-navpill class on menu item 1907) */ .penci-header-wrap .menu-hgb-main li.uki-navpill > a{ border:1px solid var(--uki-line) !important; border-radius:999px; padding:6px 14px !important; color:var(--uki-ink) !important; } .penci-header-wrap .menu-hgb-main li.uki-navpill > a:hover{ border-color:var(--uki-gold) !important; color:var(--uki-gold) !important; } .penci-header-wrap .menu-hgb-main li.uki-navpill > a::after{ content:" \2197"; } /* -- vytynanka ornament band under the masthead (mockup .vyt-band) -- Injected after the header wrap: a full-width hairline with the gold vytynanka medallion centered on a cream backing (baked into the SVG) that masks the line into a clean gap, so it reads line — ornament — line. */ .penci-header-wrap::after{ content:""; display:block; height:40px; background: url(vytynanka.svg?v=2) center/240px 40px no-repeat, linear-gradient(var(--uki-line),var(--uki-line)) center/100% 1px no-repeat; } /* submenu dropdown -> paper-2 surface, ink text, gold hover, hairline */ .penci-header-wrap ul.sub-menu, .penci-header-wrap .menu-hgb-main .sub-menu{ background-color:var(--uki-paper-2) !important; border:1px solid var(--uki-line) !important; } .penci-header-wrap .sub-menu a{ color:var(--uki-ink) !important; } .penci-header-wrap .sub-menu a:hover{ color:var(--uki-gold) !important; } /* header social + search icons: ink on cream, hover gold */ .penci-header-wrap .header-social a,.penci-header-wrap .inner-header-social a, .penci-header-wrap .pc-search a,.penci-header-wrap .pc-search i, .penci-header-wrap [class*="search"] > i{ color:var(--uki-ink) !important; } .penci-header-wrap .header-social a:hover,.penci-header-wrap .pc-search a:hover{ color:var(--uki-gold) !important; } /* utility-bar text (date) ink; trending ticker links ink -> gold hover */ .penci-header-wrap .penci-desktop-topbar, .penci-header-wrap .penci-desktop-bottombar{ color:var(--uki-graphite) !important; } .penci-header-wrap [class*="data-time"]{ color:var(--uki-graphite) !important; } .penci-header-wrap .penci-owl-carousel a, .penci-header-wrap .penci-headline-posts a, .penci-header-wrap .penci-trending-nav a{ color:var(--uki-ink) !important; } .penci-header-wrap .penci-owl-carousel a:hover, .penci-header-wrap .penci-trending-nav a:hover{ color:var(--uki-gold) !important; } /* "Популярні" pill + Підписуйся button -> gold, dark text (legible on cream) */ .penci-header-wrap .headline-title, .penci-header-wrap .penci-topbar-trending .headline-title{ background-color:var(--uki-ink) !important; color:#fff !important; } .penci-header-wrap .penci-builder-button.button-2, .penci-header-wrap .penci-builder-button.button-2 a{ background-color:var(--uki-gold) !important; color:#23201a !important; border-color:var(--uki-gold) !important; } .penci-header-wrap .penci-builder-button.button-2 a:hover{ background-color:var(--uki-ink) !important; color:#fff !important; } /* red LOGIN button (button-1) -> ink ghost on cream */ .penci-header-wrap .penci-builder-button.button-1 a{ background-color:transparent !important; color:var(--uki-ink) !important; border:1px solid var(--uki-ink) !important; } .penci-header-wrap .penci-builder-button.button-1 a:hover{ background-color:var(--uki-ink) !important; color:#fff !important; } /* -- MOBILE: masthead bar cream (text logo + ink hamburger); slide-in panel paper-2 with ink links, gold hover. -- */ .penci-mobile-midbar,.penci_mobile_midbar,.penci_navbar_mobile{ background-color:var(--uki-paper) !important; } .penci-builder-mobile-sidebar-nav,.penci-mobile-nav,#penci-mobile-nav, .penci-sidebar-mobile,.penci-wrap-mobile-nav{ background-color:var(--uki-paper-2) !important; } .penci-builder-mobile-sidebar-nav a,.penci-mobile-nav a,#penci-mobile-nav a, .penci-sidebar-mobile a,.penci_navbar_mobile a,.penci-wrap-mobile-nav a, .penci_navbar_mobile .penci-header-text-logo .site-name{ color:var(--uki-ink) !important; } .penci_navbar_mobile .penci-header-text-logo .site-name b{ color:var(--uki-gold) !important; } .penci-builder-mobile-sidebar-nav a:hover,.penci-builder-mobile-sidebar-nav .current-menu-item > a, .penci-mobile-nav a:hover,#penci-mobile-nav a:hover,.penci-sidebar-mobile a:hover{ color:var(--uki-gold) !important; } /* mobile hamburger / search icons -> ink (icon glyph colour only) */ .penci_navbar_mobile [class*="toggle"] i, .penci_navbar_mobile .pc-search i, .penci_navbar_mobile .pc-search a{ color:var(--uki-ink) !important; } /* ===== NEWS-POST layer step 4 · «Розсилка громади» newsletter box ===== Styled PLACEHOLDER (mockup .sub): slate card + gold button linking to /newsletter/. Markup lives in sidebar widget custom_html-2 (replaces the unstyled WPForms subscribe widget — instance kept inactive for rollback). Site-wide (not uki-single.css): the sidebar renders on archives too. */ .uki-sub{ background:var(--uki-ink-2);color:#e8e3d6;border-radius:5px;padding:20px; font-family:var(--uki-sans); } .uki-sub h4{ font-family:var(--uki-serif);color:#fff;font-size:18px; margin:0 0 6px;padding:0;border:0;text-transform:none;letter-spacing:0; } .uki-sub p{font-size:13px;color:#aaa496;margin:0 0 14px;line-height:1.5} .uki-sub__btn{ display:block;text-align:center; background:var(--uki-gold);color:#23201a !important; border-radius:4px;padding:11px; font-weight:600;font-size:14px;text-decoration:none; } .uki-sub__btn:hover{background:#d3a43a;color:#23201a !important} /* let the slate card sit directly on the page (no cream widget box around it) */ .widget:has(> .textwidget > .uki-sub),.widget:has(> .uki-sub){ background:transparent !important;border:0 !important;padding:0 !important; } /* Archive-only «Рубрики» widget (categories-2): it lives in the shared main-sidebar, so hide it everywhere and show it ONLY on category archives (site-wide rule so it also applies on single posts, where uki-archive.css does not load). */ #categories-2{display:none} body.category #categories-2{display:block}