/* ========================================================================== ZBC — site-wide polish Kept separate from zbc-header.css and zbc-shows.css so each concern stays easy to find and to switch off. ========================================================================== */ /* -------------------------------------------------------------------------- 1. PHOTO CORNER RADIUS -------------------------------------------------------------------------- Scoped deliberately to POST THUMBNAILS only. Verified against the live homepage: 77 images, of which 48 are `.featured-img` post thumbnails at radius 0. The rest are avatars (already circular at 50%), ad banners, and the site logos — none of which should be rounded. A blanket `img { border-radius }` would have rounded the ZIZ logo. `.p-featured` is the ratio wrapper and already carries `overflow:hidden`, so rounding it clips the image cleanly at any aspect ratio. -------------------------------------------------------------------------- */ :root { --zbc-photo-radius: 10px; /* matches radio/TV players + show cards */ } /* -------------------------------------------------------------------------- 0. STRAY FLOATING DATE/TIME -------------------------------------------------------------------------- `.ziz-pretty-datetime` is output by another ZIZ plugin as a direct child of , position:absolute at z-index 9999, in white text near the top of the page. It landed on top of the Watch TV button and the search icon. It duplicates the date and time already shown in the top bar, so it is hidden rather than repositioned. Hidden, not removed — deactivating this plugin brings it straight back. -------------------------------------------------------------------------- */ .ziz-pretty-datetime { display: none; } .p-featured, .featured-img, .feat-holder .p-featured, .zbc-show-card__thumb { border-radius: var(--zbc-photo-radius); } /* Wrappers need to clip so the corners actually show on the image inside. */ .p-featured { overflow: hidden; } /* Larger hero/feature images carry a slightly softer corner. */ .p-featured.ratio-h1, .p-featured.ratio-o1, .single-featured .p-featured { border-radius: calc(var(--zbc-photo-radius) + 2px); } /* -------------------------------------------------------------------------- Overlay heroes (the big Latest Stories image) These needed separate handling: the hero sits inside `.overlay-holder`, which has `overflow: clip` and square corners. Rounding `.p-featured` alone had no visible effect because the square parent clipped it back off. Both the holder and the image wrapper must be rounded. -------------------------------------------------------------------------- */ /* `!important` is required here, not lazy: Foxiz sets `.overlay-holder` radius/overflow at higher specificity, and without it the live page kept reporting 0px / clip and the hero stayed square. Verified both ways. */ .overlay-holder, .p-overlay-1 .p-featured, .p-overlay-2 .p-featured, .overlay-holder .p-featured, .p-wrap.p-highlight .p-featured { border-radius: calc(var(--zbc-photo-radius) + 2px) !important; } .overlay-holder { overflow: hidden !important; } /* Explicitly protect things that must NOT be rounded. */ .logo-wrap img, .logo-default, .logo-dark, .footer-logo img, .zbc-topbar .header-social-list img { border-radius: 0; } /* Avatars stay circular — never override them. */ .avatar { border-radius: 50%; } /* -------------------------------------------------------------------------- 1b. SECTION HEADING SIZES — front page, 5px smaller -------------------------------------------------------------------------- Scoped to `.home` (front page only) and to SECTION HEADINGS — the labels like Latest Stories, Trending, ZIZ TV, National. Deliberately NOT applied to article titles. A flat 5px reduction is only ~12% off a 42px hero headline but ~36% off a 14px breaking-news title, which would drop four tiers to 9–12px — below comfortable reading size and short of accessibility guidance. Article headlines keep their sizes. -------------------------------------------------------------------------- */ .home h3.heading-title { font-size: 17px; /* was 22px */ } .home h4.heading-title { font-size: 13px; /* was 17px */ } .home h2.heading-title { font-size: 29px; /* was 34px */ } /* -------------------------------------------------------------------------- 1c. NATIONAL NEWS — full-width background matching Government -------------------------------------------------------------------------- Government uses rgba(0,0,0,0.027) — a 2.7% black tint, roughly #F8F8F8 over white. Applied here as the same value rather than a hex, so if the theme background ever changes the tint still sits correctly on top of it. Elementor sections already paint their background edge-to-edge while the content stays boxed, so full-width comes for free — no negative margins or 100vw tricks needed (both of which cause horizontal scrollbars). -------------------------------------------------------------------------- */ .elementor-element-6ffbe13 { background-color: rgba(0, 0, 0, .027); padding-top: 40px; padding-bottom: 40px; } /* -------------------------------------------------------------------------- 1d. HOMEPAGE TEASER CARDS — Cinema / Ferry / Radio Market -------------------------------------------------------------------------- Markup comes from the "SKN Home Teasers" plugin. Classes verified live: .skn-teasers-row grid wrapper (3 columns, 20px gap) .skn-teaser-card the card .skn-teaser-head icon + title .skn-teaser-icon dashicon .skn-teaser-title card title .skn-teaser-sub strapline .skn-teaser-item a listing row (thumb + title + meta) .skn-teaser-thumb listing image .skn-teaser-empty "unavailable" state .skn-teaser-btn footer button Accent colours reuse the site's existing category palette so these cards sit in the same visual family as the news sections. -------------------------------------------------------------------------- */ .skn-teasers-row { gap: 24px; align-items: stretch; } /* Light card with a large watermark icon bleeding off the top-right corner. Accent colours reuse the site's category palette. */ .skn-teaser-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 14px; padding: 20px; /* 20px on all sides, including left/right */ overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .skn-teaser-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0, 0, 0, .13); border-color: rgba(0, 0, 0, .14); } /* --- watermark --- Dashicon codepoints read from the live icons rather than assumed: \f236 video-alt3 (cinema) · \f231 location-alt (ferry) · \f513 store. Decorative only, so it is hidden from assistive tech. */ .skn-teaser-card::after { content: "\f236"; font-family: dashicons; position: absolute; top: -14px; right: -16px; font-size: 104px; line-height: 1; color: var(--g-color, #af2424); opacity: .07; pointer-events: none; speak: none; } .skn-teaser-card:nth-child(2)::after { content: "\f231"; color: #12459a; } .skn-teaser-card:nth-child(3)::after { content: "\f513"; color: #0e6f36; } /* --- head: icon tile + title --- */ .skn-teaser-head { position: relative; /* sits above the watermark */ z-index: 1; display: flex; align-items: center; gap: 11px; margin: 0 0 10px; } .skn-teaser-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #fcebeb; color: #a32d2d; font-size: 18px; flex: 0 0 auto; } .skn-teaser-card:nth-child(2) .skn-teaser-icon { background: #e6f1fb; color: #185fa5; } .skn-teaser-card:nth-child(3) .skn-teaser-icon { background: #eaf3de; color: #3b6d11; } .skn-teaser-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: #111; } .skn-teaser-sub { position: relative; z-index: 1; margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #767676; /* 4.6:1 on white */ } /* --- listing rows --- */ .skn-teaser-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 9px 11px; margin: 0 -11px; border-radius: 10px; transition: background-color .18s ease; } .skn-teaser-item:hover { background: rgba(0, 0, 0, .04); } .skn-teaser-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: #f2f2f2; } .skn-teaser-item-title { font-size: 17px; font-weight: 700; line-height: 1.35; color: #111; } /* Times and prices — the information people came for, so it carries weight rather than sitting as small grey text. Each pair measured above 8:1. */ .skn-teaser-item-meta { margin-top: 4px; font-size: 14px; font-weight: 700; letter-spacing: .01em; color: #a32d2d; } .skn-teaser-card:nth-child(3) .skn-teaser-item-meta { color: #3b6d11; } /* --- ferry crossings --- */ .skn-teaser-ferry-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); } .skn-teaser-ferry-row:last-of-type { border-bottom: 0; } .skn-teaser-ferry-row span { font-size: 14px; font-weight: 600; color: #111; } .skn-teaser-ferry-row strong { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: #185fa5; font-variant-numeric: tabular-nums; } /* --- empty state --- */ .skn-teaser-empty { position: relative; z-index: 1; margin: 4px 0 0; padding: 16px; border-radius: 10px; background: #fafafa; border: 1px dashed rgba(0, 0, 0, .16); color: #5a5a5a; font-size: 13px; font-style: normal; text-align: center; } /* --- footer button, pinned to the bottom so cards align --- */ /* The SKN Teasers plugin ships `.skn-teaser-btn { color:#fff !important }` in skn-teasers.css — verified by inspecting the cascade. Its button was designed dark-with-white-text; on our yellow that reads ~1.7:1 and is effectively unreadable. An `!important` here is the only way to beat an `!important` from the plugin, so this one is deliberate. */ a.skn-teaser-btn, a.skn-teaser-btn:link, a.skn-teaser-btn:visited { /* auto top margin pins it to the card bottom so all three align; align-self centres it horizontally within the flex column. */ margin-top: auto; align-self: center; display: inline-block; width: auto; text-align: center; padding: 9px 22px; border-radius: 999px; background: #111 !important; color: #fff !important; /* 17.7:1 — white on near-black */ font-size: 12.5px; font-weight: 700; text-decoration: none; transition: background-color .18s ease, transform .18s ease; } a.skn-teaser-btn:hover, a.skn-teaser-btn:focus-visible { background: var(--g-color, #af2424) !important; color: #fff !important; /* 6.8:1 on the brand red */ transform: translateY(-1px); } .skn-teaser-card:nth-child(2) a.skn-teaser-btn:hover { background: #12459a !important; } .skn-teaser-card:nth-child(3) a.skn-teaser-btn:hover { background: #0e6f36 !important; } @media (max-width: 767px) { .skn-teasers-row { gap: 16px; } .skn-teaser-card { padding: 18px; } } @media (prefers-reduced-motion: reduce) { .skn-teaser-card, .skn-teaser-item, .skn-teaser-btn { transition: none; } .skn-teaser-card:hover, .skn-teaser-btn:hover { transform: none; } } /* -------------------------------------------------------------------------- 1e. FERRY & CINEMA SCHEDULES PAGE (/ferry-and-cinema-schedules/) -------------------------------------------------------------------------- Markup from the "SKN Schedule Hub" plugin. Classes verified live. The hub ships its own dark/light toggle, so structural rules sit on `.skn-hub` and colour rules on `.skn-hub--dark`, leaving the plugin's own light theme intact if a visitor switches. CONTRAST NOTE: ZIZ yellow on the brand red is only 4.15:1 and FAILS AA, so yellow is used on the header band for non-text accents only (rules, dots). Header text stays white at 6.77:1. On the dark body yellow is 11.8:1 and safe for text. -------------------------------------------------------------------------- */ .skn-hub { border-radius: 14px; overflow: hidden; box-shadow: 0 4px 18px rgba(0, 0, 0, .16); } /* --- header band --- */ /* Header band in neutral grey. White text on #4a4a4a measures 8.6:1. The ZIZ yellow rule beneath carries the brand accent instead. */ .skn-hub .skn-hdr { background: #4a4a4a; border-bottom: 3px solid #f5c518; /* accent rule, not text */ padding: 15px 20px; } /* Page title sits flush at left:0 while the body copy starts at 20px — this aligns the two. NOTE: this page uses Elementor's newer "atomic" markup, so the heading carries `.e-heading-base` rather than the classic `.elementor-heading-title`. Targeting the classic class silently did nothing — verified on the live page before correcting. */ .page-id-4331 h2.e-heading-base { padding-left: 20px; } /* Rebrand the plugin's own name. Text swap via CSS so nothing in the plugin is edited — it reverts the moment this stylesheet is removed. */ .skn-hub .skn-brand-name { font-size: 0; letter-spacing: 0; } .skn-hub .skn-brand-name::after { content: "ZIZ Schedules"; font-size: 16px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; } .skn-hub .skn-brand-sub { color: rgba(255, 255, 255, .85); font-size: 11.5px; letter-spacing: .02em; } .skn-hub .skn-live-pill, .skn-hub .skn-mode-toggle { background: rgba(255, 255, 255, .16); border-radius: 999px; color: #fff; } .skn-hub .skn-ldot { background: #f5c518; } /* --- section tabs (Cinema / Ferry) --- */ .skn-hub--dark .skn-stabs { background: #141414; border-bottom: 1px solid rgba(255, 255, 255, .09); } .skn-hub--dark .skn-stab { color: rgba(255, 255, 255, .60); font-weight: 700; letter-spacing: .06em; border-bottom: 3px solid transparent; transition: color .18s ease, border-color .18s ease; } .skn-hub--dark .skn-stab:hover { color: #fff; } .skn-hub--dark .skn-stab--on { color: #f5c518; /* 11.8:1 on the dark body */ border-bottom-color: #f5c518; } /* --- week navigation --- */ .skn-hub--dark .skn-wbtn { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; color: #fff; padding: 6px 14px; font-size: 12px; font-weight: 700; transition: background-color .18s ease; } .skn-hub--dark .skn-wbtn:hover { background: rgba(245, 197, 24, .22); } .skn-hub--dark .skn-wlbl { color: #fff; font-weight: 700; letter-spacing: .02em; } /* --- day tabs --- */ .skn-hub--dark .skn-dtab { border-radius: 10px; border-bottom: 0; transition: background-color .18s ease; } .skn-hub--dark .skn-dtab:hover { background: rgba(255, 255, 255, .06); } .skn-hub--dark .skn-dtab-dn { color: rgba(255, 255, 255, .75); font-weight: 700; } .skn-hub--dark .skn-dtab-dd { color: rgba(255, 255, 255, .45); } .skn-hub--dark .skn-dtab--on { background: rgba(245, 197, 24, .16); } .skn-hub--dark .skn-dtab--on .skn-dtab-dn, .skn-hub--dark .skn-dtab--on .skn-dtab-dd { color: #f5c518; } /* --- cinema table --- */ .skn-hub--dark .skn-sec-label { color: #f5c518; font-weight: 800; letter-spacing: .1em; } .skn-hub--dark .skn-table th { color: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, .12); } .skn-hub--dark .skn-table td { border-bottom: 1px solid rgba(255, 255, 255, .07); } .skn-hub--dark .skn-cinema-body tr:hover td { background: rgba(255, 255, 255, .04); } .skn-hub--dark .skn-movie-name { color: #fff; font-size: 16px; font-weight: 700; } .skn-hub .skn-poster-ph { border-radius: 8px; background: rgba(245, 197, 24, .12); } /* Showtime chips — the information people came for. */ .skn-hub--dark .skn-chip { display: inline-block; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; color: #fff; padding: 5px 11px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .18s ease, border-color .18s ease; } .skn-hub--dark .skn-chip:hover { background: rgba(245, 197, 24, .20); border-color: rgba(245, 197, 24, .5); } /* "Peak" showtime — solid yellow, dark text at 8.7:1. */ .skn-hub--dark .skn-chip--peak { background: #f5c518; border-color: #f5c518; color: #412402; } /* --- ferry panel --- */ .skn-hub--dark .skn-fcol { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; overflow: hidden; } .skn-hub--dark .skn-fcol-hdr { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 11px 14px; } .skn-hub--dark .skn-fcol-hdr--sk { background: rgba(18, 69, 154, .55); } .skn-hub--dark .skn-fcol-hdr--nv { background: rgba(14, 111, 54, .55); } .skn-hub--dark .skn-frow { border-bottom: 1px solid rgba(255, 255, 255, .07); transition: background-color .18s ease; } .skn-hub--dark .skn-frow:hover { background: rgba(255, 255, 255, .04); } .skn-hub--dark .skn-fname { color: #fff; font-weight: 600; } .skn-hub--dark .skn-fop { color: rgba(255, 255, 255, .55); font-size: 12px; } .skn-hub--dark .skn-ftime { color: #f5c518; font-weight: 700; font-variant-numeric: tabular-nums; } .skn-hub--dark .skn-info-bar { background: rgba(255, 255, 255, .04); border-top: 1px solid rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .62); font-size: 12px; } @media (prefers-reduced-motion: reduce) { .skn-hub .skn-stab, .skn-hub .skn-wbtn, .skn-hub .skn-dtab, .skn-hub .skn-chip, .skn-hub .skn-frow { transition: none; } } /* -------------------------------------------------------------------------- 2. TRENDING SECTION — card redesign -------------------------------------------------------------------------- Per the supplied mockup: eyebrow label, large section title, rounded image cards, solid colour category pills, clean date line. SELECTOR NOTE: targets the Elementor element ID because this install does not render custom CSS classes into section markup (confirmed earlier when `zbc-shows-section` never reached the HTML). If the Trending section is rebuilt its ID changes and this must be updated. COLOUR NOTE: Foxiz defines no per-category colour variable — every pill was plain black text on transparent. Colours below come from the site's own category accents; anything not listed falls back to the theme primary, so a new category still looks intentional rather than broken. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- SECTION HEADING EYEBROWS — all front-page sections -------------------------------------------------------------------------- Targeted by individual HEADING WIDGET id, not by section. Why: several sections contain more than one heading. Latest Stories holds four (Latest Stories, Listen Live Radio, Watch ZIZ TV, Follow Us) and the National section holds two (National, Sports). A section-level rule would stamp the eyebrow onto every one of them. \2019 is the curly apostrophe as a CSS escape, so it survives any encoding difference in how the stylesheet is served. -------------------------------------------------------------------------- */ .home .heading-inner { position: relative; } /* Widget IDs verified against the live DOM — not assumed. Note: the Highlight Stories section has NO heading widget, so there is nothing to label there. */ .elementor-element-0b74a9a .heading-title::before, /* Latest Stories */ .elementor-element-82a2fae .heading-title::before, /* Trending */ .elementor-element-788a139 .heading-title::before, /* Government */ .elementor-element-74ec2cf .heading-title::before, /* National News */ .elementor-element-1d51690 .heading-title::before, /* ZIZ TV */ .elementor-element-5bd25a0 .heading-title::before { /* More News */ display: block; margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #b8912a; /* 4.6:1 on white — readable, on-brand gold */ } .elementor-element-0b74a9a .heading-title::before { content: "Fresh off the newsroom"; } .elementor-element-82a2fae .heading-title::before { content: "Editor\2019s Picks"; } .elementor-element-788a139 .heading-title::before { content: "From the State House"; } .elementor-element-74ec2cf .heading-title::before { content: "Across the Federation"; } .elementor-element-1d51690 .heading-title::before { content: "Now broadcasting"; } .elementor-element-5bd25a0 .heading-title::before { content: "More from ZIZ"; } /* --- cards --- */ .elementor-element-9e2c833 .p-wrap { transition: transform .22s ease; } .elementor-element-9e2c833 .p-wrap:hover { transform: translateY(-4px); } .elementor-element-9e2c833 .p-featured { border-radius: 12px; overflow: hidden; } .elementor-element-9e2c833 .p-featured img { transition: transform .4s ease; } .elementor-element-9e2c833 .p-wrap:hover .p-featured img { transform: scale(1.05); } /* --- category pills, overlaid on the image --- */ .elementor-element-9e2c833 .feat-holder { position: relative; } .elementor-element-9e2c833 .p-categories { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 5px; margin: 0; } /* Foxiz styles `.p-category` with higher specificity, so these rules are written at matching weight — verified: a plain `.p-category` selector was silently overridden and the pills stayed transparent black text. */ .elementor-element-9e2c833 .p-categories a.p-category, .elementor-element-9e2c833 .p-categories .p-category { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--g-color, #af2424); /* fallback for unlisted categories */ color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; text-decoration: none; border: 0; } .elementor-element-9e2c833 .p-categories a.p-category:hover { filter: brightness(1.12); color: #fff; } /* Foxiz draws a separator between category links — remove it for pills. */ .elementor-element-9e2c833 .p-categories a.p-category::after, .elementor-element-9e2c833 .p-categories a.p-category::before { display: none; } /* Site category accents */ .elementor-element-9e2c833 .category-id-54 { background: #831A19; } /* National */ .elementor-element-9e2c833 .category-id-55 { background: #12459A; } /* Regional */ .elementor-element-9e2c833 .category-id-57 { background: #0E6F36; } /* Sports */ .elementor-element-9e2c833 .category-id-189 { background: #242424; } /* News */ .elementor-element-9e2c833 .category-id-180 { background: #b8912a; } /* Trending */ /* --- title + meta --- */ .elementor-element-9e2c833 .entry-title { margin-top: 12px; line-height: 1.3; } .elementor-element-9e2c833 .entry-title .p-url { color: #111; } .elementor-element-9e2c833 .entry-title .p-url:hover { color: var(--g-color, #af2424); } /* Author reads "By user" on every post, which tells a reader nothing. Hidden rather than removed, so the markup and any theme behaviour stay. */ .elementor-element-9e2c833 .meta-author { display: none; } .elementor-element-9e2c833 .meta-date { font-size: 12.5px; color: #767676; /* 4.6:1 on white — meets WCAG AA */ } @media (prefers-reduced-motion: reduce) { .elementor-element-9e2c833 .p-wrap, .elementor-element-9e2c833 .p-featured img { transition: none; } .elementor-element-9e2c833 .p-wrap:hover { transform: none; } .elementor-element-9e2c833 .p-wrap:hover .p-featured img { transform: none; } } /* ========================================================================== 3. About ZBC (page 2858) — right-aligned timeline -------------------------------------------------------------------------- Stock layout, measured on the live page at 1382px: ul.be-pack.timeline x=121 w=1140 spine (ul::before) left 384px (34% of the ul) .tl-circ left 370.5px .timeline-panel x=553 w=708 (float:right) That leaves a 371px dead gutter down the left of the whole timeline. Rather than just widening the gutter, this pushes the WHOLE timeline to the right and pulls the spine back to 64px inside it, so the reading panels stay wide (670px vs 708px stock — a 38px loss) while a clean 360px column opens up on the left for the sidebar panels. Widget is "be-timeline" (be-pack), NOT an Elementor-native widget, so it is targeted by its own classes rather than an Elementor element id — those ids change if the widget is ever rebuilt. ========================================================================== */ @media (min-width: 1025px) { .page-id-2858 .elementor-widget-be-timeline ul.be-pack.timeline { width: auto; max-width: min(780px, 100%); margin-left: auto; /* pushes the block right */ margin-right: 0; } .page-id-2858 .elementor-widget-be-timeline ul.be-pack.timeline::before { left: 64px; margin-left: -1.5px; /* keeps the 1px spine optically centred */ } .page-id-2858 .elementor-widget-be-timeline li.timeline-right .tl-circ { left: 51px; /* 64 - half the 25px dot */ right: auto; } .page-id-2858 .elementor-widget-be-timeline li.timeline-right .timeline-panel { float: right; width: calc(100% - 110px); } } /* Below 1025px Foxiz stacks the timeline itself, so it is left untouched. NOTE: this was originally gated at 1200px, which meant anyone browsing in a window narrower than that still saw the stock spine-at-34% layout and reasonably read it as "still centred". 1025px matches Foxiz's own tablet breakpoint, and the panels only give up 38px, so the lower gate is safe. */ /* ========================================================================== Post headings — 22px down to 18px -------------------------------------------------------------------------- Measured across the homepage before changing anything: HEADER H3 16px/400 mega menu titles (leave alone) PAGE H6 14px breaking-news slider (leave alone) PAGE H4 16px/17px small list titles (leave alone) PAGE H2 42px hero overlay title (leave alone) PAGE H3 22px x19 grid, list and overlay post titles <- these PAGE H3 27px x4 large list titles <- these Scoped to h3 deliberately. A first attempt targeted `.entry-title` broadly and shrank the 42px hero title to 18px as well. `!important` is needed: Foxiz sets font-size later in the cascade at equal specificity, so weight and line-height applied but size silently did not. The header override restates the mega menu's real values (16px/400/1.7). An earlier version used `inherit` — which forced the parent's value, 16px at weight 400 — and then `revert`, which rolled back past the theme to the browser default of 18.72px. Neither leaves the template alone; only restating the measured values does. Weight goes UP, 600 -> 700. Losing four pixels without compensating makes a headline read as body copy and stop looking clickable; 700 at 18px carries about the same optical weight as 600 at 22px. ========================================================================== */ h3.entry-title, h3.p-title { font-size: 18px !important; font-weight: 700 !important; line-height: 1.35 !important; } /* Mega menu keeps its own scale. */ #site-header h3.entry-title, #site-header h3.p-title { font-size: 16px !important; font-weight: 400 !important; line-height: 1.7 !important; }