/* ============================================================================= hodak-ui.css — Typography + layout upgrade for hodak.nl (child theme) ----------------------------------------------------------------------------- Loaded LAST (enqueued at priority 1000, no deps) so it cascades AFTER: - Elementor kit (uploads/elementor/css/post-9.css) - page/header/footer CSS (post-1406 / post-6696 / post-7323 / post-340 ...) - slope theme (themes/slope/style.css) Font pair (self-hosted, see functions.php add_custom_fonts / add_preload_fonts): - Display / headings : Manrope (variable 400..700, latin + cyrillic) - Body / UI : Hanken Grotesk (variable 400..700, latin only) - ONE font pair on every language (owner requirement). Hanken has no basic cyrillic, so cyrillic BODY text falls through Hanken -> Manrope (which has full cyrillic self-hosted). Headings are Manrope everywhere. PT Sans has been dropped entirely (files deleted; still in git history if needed). IMPORTANT SIZING NOTE: slope sets html{font-size:62.5%} (and drops it further per breakpoint), so 1rem ≈ 10px on this site, NOT 16px. Every size below is therefore in px / clamp(px, vw, px) so it stays predictable across breakpoints. Sections: 1. Font stacks (custom props) 2. Global font-pair swap (Elementor kit vars + body baseline) 3. Kill hardcoded "PT Sans" first-choice (targeted, never a blanket *) 4. Modular type scale (content / element headings only) 5. Single-post meta block: date + reading time only (.blog-single-header--detail) 6. Blog listing cards (Premium Addons .premium-blog-*) 7. Mobile header fixes (HFE header template #6696) 8. Single-post mobile grid: align content gutter to the site grid (~12px) 9. Footer (#7323): mobile gutter + anchor colours (normal / visited / hover) 10. Single-post article body vertical rhythm (.blog-single-content-wrapper) ============================================================================= */ /* ---- 1. Font stacks -------------------------------------------------------- Single pair for all languages. Manrope carries latin + cyrillic, so it is the cyrillic bridge for the body stack too: Hanken (latin only) -> Manrope (latin + cyrillic) -> system fonts. No PT Sans anymore. */ :root{ --hodak-font-display:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --hodak-font-text:"Hanken Grotesk","Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } /* ---- 2. Global font-pair swap --------------------------------------------- Override the Elementor global typography vars on the kit body so every widget that references them (var(--e-global-typography-*)) switches automatically. The kit hardcodes .elementor-kit-9{font-family:"PT Sans"} directly on as well, so we also set the base family/size/line-height on body. */ body.elementor-kit-9{ --e-global-typography-primary-font-family:var(--hodak-font-display); --e-global-typography-primary-font-weight:600; --e-global-typography-secondary-font-family:var(--hodak-font-display); --e-global-typography-text-font-family:var(--hodak-font-text); /* body baseline (task 3/4): 17px / 1.6 for inherited content text */ font-family:var(--hodak-font-text); font-size:17px; line-height:1.6; } /* ---- 3. Remove hardcoded "PT Sans" as first choice ------------------------- Several widgets ship a literal font-family:"PT Sans" (no fallback) baked in per-widget at ~ (0,4,0)/(0,4,1) specificity, e.g.: .elementor-1406 .elementor-element.elementor-element-14c15aa .elementor-heading-title .elementor-6696 .elementor-element.elementor-element-590c3fc a.hfe-menu-item .elementor-7323 .elementor-element.elementor-element-db65759 .hfe-copyright-wrapper Instead of chasing every widget id, we match the shared trailing classes with `.elementor-widget.elementor-element ` — every Elementor widget carries BOTH classes, so this lands at (0,4,1)/(0,4,2) and reliably beats the per-widget rules while staying scoped to real text elements (icon fonts untouched — we never touch .elementor-icon / eicons / Font Awesome). NOTE: only font-family is changed here — per-widget size & weight are kept. */ /* headings inside Elementor heading widgets -> display font */ body.elementor-kit-9 .elementor-widget.elementor-element .elementor-heading-title{ font-family:var(--hodak-font-display) !important; /* slope forces h1..h6{font-family:inherit!important} — important needed to win */ } /* body-copy widgets (text-list, paragraph, footer copyright) -> text font */ body.elementor-kit-9 .elementor-widget.elementor-element .text-list li, body.elementor-kit-9 .elementor-widget.elementor-element .text-list a, body.elementor-kit-9 .elementor-widget.elementor-element .paragraph > *, body.elementor-kit-9 .elementor-widget.elementor-element .hfe-copyright-wrapper, body.elementor-kit-9 .elementor-widget.elementor-element .hfe-copyright-wrapper a{ font-family:var(--hodak-font-text); } /* nav menu items (desktop #590c3fc, tablet #edfa37f, flyout #b6f8c35) -> UI font */ body.elementor-kit-9 .elementor-widget.elementor-element a.hfe-menu-item, body.elementor-kit-9 .elementor-widget.elementor-element a.hfe-sub-menu-item{ font-family:var(--hodak-font-text); } /* ---- 4. Modular type scale ------------------------------------------------ Applies to ELEMENT-level headings (post/article content + any heading that falls back to the kit defaults kit sets h2=28px, h3=24px, h4=19px, h5=1px). `body.elementor-kit-9 h2` = (0,1,2) beats the kit's `.elementor-kit-9 h2`. Elementor heading WIDGETS that carry an explicit per-widget font-size (e.g. 50px hero) stay at (0,4,0) and are intentionally NOT resized here — only their family was swapped in section 3. The logo is an and the nav uses , so neither is affected. */ body.elementor-kit-9 h1{ font-family:var(--hodak-font-display) !important; /* slope forces h1..h6{font-family:inherit!important} — important needed to win */ font-weight:600; font-size:clamp(30px, 5vw, 46px); line-height:1.12; letter-spacing:-0.01em; } body.elementor-kit-9 h2{ font-family:var(--hodak-font-display) !important; /* slope forces h1..h6{font-family:inherit!important} — important needed to win */ font-weight:600; font-size:clamp(24px, 3.4vw, 34px); line-height:1.18; letter-spacing:-0.01em; } body.elementor-kit-9 h3{ font-family:var(--hodak-font-display) !important; /* slope forces h1..h6{font-family:inherit!important} — important needed to win */ font-weight:600; font-size:clamp(20px, 2.4vw, 26px); line-height:1.25; } body.elementor-kit-9 h4{ font-family:var(--hodak-font-display) !important; /* slope forces h1..h6{font-family:inherit!important} — important needed to win */ font-weight:600; font-size:clamp(18px, 1.6vw, 20px); line-height:1.3; } /* h5/h6 family only — sizes left to context (kit/slope) to avoid surprises */ body.elementor-kit-9 h5, body.elementor-kit-9 h6{ font-family:var(--hodak-font-display) !important; /* slope forces h1..h6{font-family:inherit!important} — important needed to win */ } /* Blog single post H1 (slope markup) — currently `.blog-single-header--heading h1` is font-size:6em / 5rem / 4rem (huge; fills mobile screens). Pin it to the scale explicitly. (0,2,1) unambiguously beats slope's (0,1,1) variants. */ .blog-single-header .blog-single-header--heading h1{ font-family:var(--hodak-font-display) !important; /* slope forces h1..h6{font-family:inherit!important} — important needed to win */ font-weight:600; font-size:clamp(30px, 5.2vw, 46px); line-height:1.14; letter-spacing:-0.01em; word-break:normal; } /* ---- 5. Single-post meta block: date + reading time only ------------------ Markup (slope theme, NOT Elementor): .blog-single-header--detail > .author ( .author-image + .author-name( h6=label, h5=value ) ) > .category( h6=label, h5=value(a) ) > .date ( h6=label, h5=value ) Owner decision: drop author + category; show ONLY the date, then the reading time (injected by functions.php -> .hodak-readtime, see wp_footer hook), as a single clean inline row with ONE centred "·" between them. The previous "> div + div::before" dot floated on the baseline and wrapped badly on mobile — replaced here by a flex row with align-items:center so the dot stays put. */ .blog-single-header .blog-single-header--detail{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:0 10px; margin:20px 0; } /* author + category gone entirely */ .blog-single-header .blog-single-header--detail .author, .blog-single-header .blog-single-header--detail .category{ display:none; } /* date: strip slope's column layout / big margins / transforms */ .blog-single-header .blog-single-header--detail .date{ display:inline-flex; align-items:center; width:auto; margin:0; transform:none; } /* hide the "DATE" / "ДАТА" label — leave only the value */ .blog-single-header .blog-single-header--detail .date h6{ display:none; } /* date value: muted grey, 14px / 500 */ .blog-single-header .blog-single-header--detail .date h5, .blog-single-header .blog-single-header--detail .date h5 span{ font-family:var(--hodak-font-text); font-size:14px; font-weight:500; line-height:1.4; letter-spacing:normal; color:#6b7280; margin:0; display:inline; } /* reading time (injected after .date by functions.php JS on is_singular('post')) */ .hodak-readtime{ display:inline-flex; align-items:center; gap:10px; /* space between the dot and the reading-time text */ font-family:var(--hodak-font-text); font-size:14px; font-weight:500; line-height:1.4; color:#6b7280; } /* the single separator: one centred "·" between date and reading time. align-items:center on both the row and .hodak-readtime keeps it vertically centred instead of floating on the text baseline like the old version. */ .hodak-readtime::before{ content:"·"; color:#9ca3af; font-weight:400; line-height:1; } /* ---- 6. Blog listing cards (Premium Addons blog widget) -------------------- Markup: .premium-blog-content-wrapper > .premium-blog-inner-container > h2.premium-blog-entry-title > a > .premium-blog-entry-meta > .premium-blog-post-time > span(date) Base (pafe-340.css): title 18px, meta 12px #adadad, wrapper padding 30px/15px. Accent (kit): #F9A51D. Title color (post-340): var(--e-global-color-secondary).*/ .premium-blog-entry-title{ font-family:var(--hodak-font-display) !important; /* slope forces h1..h6{font-family:inherit!important} — important needed to win */ font-size:clamp(18px, 2vw, 20px); font-weight:600; line-height:1.3; margin-bottom:8px; } .premium-blog-entry-title a{ font-family:var(--hodak-font-display) !important; /* slope forces h1..h6{font-family:inherit!important} — important needed to win */ color:var(--e-global-color-secondary, #111111); /* clamp long titles to 3 lines (single text link — safe to line-clamp) */ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* hover: subtle shift to the brand accent (override post-340 :hover a -> primary) */ .premium-blog-entry-title a:hover, .premium-blog-entry-title:hover a{ color:var(--e-global-color-accent, #F9A51D); } .premium-blog-entry-meta{ font-family:var(--hodak-font-text); font-size:13px; line-height:1.3; color:#6b7280; margin-top:4px; } .premium-blog-entry-meta .premium-blog-meta-data{ font-family:var(--hodak-font-text); } /* ---- 7. Mobile header fixes (HFE header template #6696) -------------------- Header rows: #a599762 desktop only (hidden tablet+mobile) — left untouched. #025d6f7 mobile+tablet row (hidden-desktop): child #477a93e (40%) = logo widget #2ce2e2d child #32b03cb (60%, row, justify-end) = flyout widget #b6f8c35 All targets below are mobile-only elements, so scoping to <=1024px keeps the desktop header layout completely unchanged. */ @media (max-width:1024px){ /* a. Logo/hamburger were flush to the screen edge: the mobile row has --padding-left/right:0. Parent #46e8304 already contributes 10px, so add 10px here for a comfortable ~20px inset that lines up with the grid. */ .elementor-6696 .elementor-element.elementor-element-025d6f7{ --padding-left:10px; --padding-right:10px; } /* b. Hamburger sat centre-ish because HFE centres the glyph inside the toggle with .hfe-nav-menu-icon{margin:0 auto}. Re-anchor it to the right edge. Same selector as the source rule (0,4,0) -> equal specificity, loaded later, so it wins. Flyout panel is a separate element and is unaffected. */ .elementor-6696 .elementor-element.elementor-element-b6f8c35 .hfe-nav-menu-icon{ margin:0 0 0 auto; } .elementor-6696 .elementor-element.elementor-element-b6f8c35 .hfe-nav-menu__toggle{ justify-content:flex-end; } } /* ---- 8. Single-post mobile grid alignment --------------------------------- On mobile the site grid gutter is the padding (~12px); homepage content sits at left:12px. But the blog-single templates wrap their content in slope's Bootstrap grid: .container{padding-left:25px} > .row{margin:0 -15px} > .col{padding:15px} The container's 25px padding pushes the post H1 / meta / content to left:37px — ~25px deeper than the site grid (the owner's "другая сетка"). Below the lg breakpoint (<992px, where the columns are already full-width and the offset is gone) we drop the container padding and neutralise the row/col gutters so the post lands on the same ~12px body gutter as the header + homepage sections. Scoped to body.single + the two blog-single containers only, so other slope templates and the desktop centred layout are untouched. */ @media (max-width:991px){ body.single .blog-single-header > .container, body.single .container.blog-single-page{ padding-left:0; padding-right:0; } body.single .blog-single-header > .container > .row, body.single .container.blog-single-page > .row{ margin-left:0; margin-right:0; } body.single .blog-single-header > .container > .row > [class*="col-"], body.single .container.blog-single-page > .row > [class*="col-"]{ padding-left:0; padding-right:0; } } /* ---- 9. Footer (HFE/Elementor template #7323) ----------------------------- Footer background is #141414 (near-black). */ /* 9a. Mobile gutter — the three top-level footer sections (direct children of .elementor-7323: #72abdbd / #5654ea9 / #1a4863a) each ship a 20px horizontal padding (Elementor setting), so footer content sits at left:32px while the site grid gutter is ~12px. Zero their horizontal padding on mobile so the logo / headings / text align to the same gutter as the header + homepage sections. (Small 4px inner column paddings are left as-is — headings then land ~16px, within a few px of the grid.) NOTE: the clean fix really belongs in Elementor (set those sections' mobile padding to 0 in the footer template) — this CSS keeps it reversible. The footer template CSS is printed INLINE later in the page, so an equal (0,3,0) selector would lose on source order; the leading `body` lifts this to (0,3,1) so it wins regardless. Direct-child `>` keeps it to the top sections only (nested containers untouched). */ @media (max-width:767px){ body .elementor-7323 > .elementor-element.e-con{ --padding-left:0px; --padding-right:0px; } } /* 9b. Anchor colours. slope sets a global `a{color:inherit}`, so footer links that live inside a heading/text widget (mailto:, tel:) inherit the light heading colour for :link but have NO explicit :visited rule — visited anchors then drift toward the UA visited colour and sink into the black ("проваливаются в чёрный, особенно посещённые"). Pin every footer anchor + its :visited to the footer's light text, and hover/focus to the accent. Kept low-specificity (0,2,1) so it fixes the inheriting links without clobbering the menu links' own designed #FCFCFC (those carry their own per-widget rule which already covers :visited). */ .elementor-7323 a, .elementor-7323 a:link, .elementor-7323 a:visited{ color:#F7F7F7; /* footer's existing light text colour */ } .elementor-7323 .text-list a:hover, .elementor-7323 .text-list a:focus, .elementor-7323 a:hover, .elementor-7323 a:focus{ color:var(--e-global-color-accent, #F9A51D); /* site accent */ } /* ---- 10. Single-post article body vertical rhythm ------------------------- slope drives inter-block spacing on the content wrapper with a rem-based sibling-margin scheme: .blog-single-content-wrapper > :nth-child(n+2){margin-top:1.5rem} .blog-single-content-wrapper > h2{margin-bottom:-1rem} (pulls text up) .blog-single-content-wrapper > h2:nth-child(n+2){margin-top:2rem} Because it is rem-based it scales DOWN on mobile (1rem≈8px here), so headings end up ~5px above their text while paragraphs are ~15px apart — the uneven rhythm the owner flagged. We neutralise it and impose an explicit px rhythm. Prefixing every selector with `body.single` + `>`/element gives (0,2,2), which beats slope's (0,2,0)/(0,2,1) rules (this file loads last). Applies at all widths so the rhythm is identical on mobile and desktop. */ body.single .blog-single-content-wrapper > p{margin:0 0 16px;} body.single .blog-single-content-wrapper > h2{margin:40px 0 14px;} body.single .blog-single-content-wrapper > h3{margin:32px 0 12px;} body.single .blog-single-content-wrapper > h4{margin:26px 0 10px;} body.single .blog-single-content-wrapper > ul, body.single .blog-single-content-wrapper > ol{margin:0 0 18px;padding-left:22px;} body.single .blog-single-content-wrapper li{margin:0 0 8px;line-height:1.55;} body.single .blog-single-content-wrapper li:last-child{margin-bottom:0;} /* nested lists: tighten to the parent item, no trailing gap */ body.single .blog-single-content-wrapper ul ul, body.single .blog-single-content-wrapper ul ol, body.single .blog-single-content-wrapper ol ul, body.single .blog-single-content-wrapper ol ol{margin-top:8px;margin-bottom:0;} /* blockquote (if present): breathing room + subtle accent rule */ body.single .blog-single-content-wrapper blockquote{ margin:24px 0; padding-left:16px; border-left:3px solid var(--e-global-color-accent, #F9A51D); } /* the first block never carries top space (image / heading / paragraph alike) */ body.single .blog-single-content-wrapper > :first-child{margin-top:0;}