/* ========================================================================== 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 --- */ .skn-hub .skn-hdr { background: var(--g-color, #af2424); border-bottom: 3px solid #f5c518; /* accent rule, not text */ padding: 15px 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; } }