/* Theme Name: The Boss Love Theme Theme URI: https://bosslive.com Author: Mian Abbas Ali Author URI: https://wa.me/923406939023 Description: The Boss Love Theme — Developed For Perfection By Mian Abbas Ali. A fast, SEO-optimized fashion blog theme modeled on a clean editorial look: white background, Laila + Poppins locally hosted fonts, pink primary, horizontal post cards with zoom-out hover and title underline fade, blur-image hero banners, three homepage presets plus custom page, auto redirect on permalink change, 404-to-home option, breadcrumbs, TOC, share buttons, Pinterest Save, highlight boxes, Amazon product cards with labels, comparison tables, WebP, lazy images with branded placeholders, ad slots, footer customization with affiliate disclaimer and full customizer. Version: 2.8.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: Single site licensed License URI: https://bosslive.com/license Text Domain: boss_love Tags: blog, fashion, white, two-columns, custom-menu, custom-logo, sticky-header, webp, translation-ready */ /* ========================================================= THE BOSS LOVE THEME v1.1.0 — Developed For Perfection By Mian Abbas Ali Palette: #FFFFFF bg · #4B464C text · #FB2576 primary Fonts: Laila (headings) · Poppins (body) — local woff2 ========================================================= */ :root{ --bl-bg:#FFFFFF; --bl-surface:#FFFFFF; --bl-soft-bg:#F7F7F9; --bl-ink:#4B464C; --bl-dark:#1E1E1E; --bl-soft:#67626B; /* 5.94:1 on white — was #8A858D (3.61:1, failed WCAG AA) */ --bl-line:#EEEEF0; --bl-theme:#FB2576; --bl-theme-text:#D4145A; /* accessible pink for small text — 5.19:1 on white (brand pink is 3.73:1) */ --bl-accent:#FB2576; --bl-gold:#E8B54D; --bl-green:#1C7A4A; /* 4.79:1 on the pale green pill — was #2F9E63 (3.04:1) */ --bl-pinterest:#E60023; --bl-radius:10px; --bl-radius-sm:6px; --bl-font-display:"Laila","Laila Fallback",Georgia,"Times New Roman",serif; --bl-font-body:"Poppins","Poppins Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --bl-transition:all 0.5s ease-out 0s; /* Reference type scale */ --bl-fs-xs:clamp(0.7rem,0.17vw + 0.76rem,0.79rem); --bl-fs-sm:clamp(0.8rem,0.17vw + 0.76rem,0.89rem); --bl-fs-base:clamp(1rem,0.34vw + 0.91rem,1.19rem); --bl-fs-md:clamp(1.25rem,0.61vw + 1.1rem,1.58rem); --bl-fs-lg:clamp(1.56rem,1vw + 1.31rem,2.11rem); --bl-shadow-sm:0 2px 10px rgba(30,30,30,.06); --bl-shadow-md:0 10px 30px rgba(30,30,30,.12); --bl-glow:0 0 0 1px color-mix(in srgb, var(--bl-theme) 45%, transparent), 0 12px 34px color-mix(in srgb, var(--bl-theme) 28%, transparent); } /* ---------- Base ---------- */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--bl-bg); color:var(--bl-ink); font-family:var(--bl-font-body); font-size:clamp(1rem,0.34vw + 0.91rem,1.12rem); font-weight:400; line-height:1.7; -webkit-font-smoothing:antialiased; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3,h4,h5,h6{ font-family:var(--bl-font-display); font-weight:600; line-height:1.3; margin:0 0 .5em; color:var(--bl-dark); } p{ margin:0 0 1.15em; } ::selection{ background:var(--bl-theme); color:#fff; } .bl-container{ max-width:1200px; margin:0 auto; padding:0 20px; } .bl-skip{ position:absolute; left:-9999px; top:0; background:var(--bl-dark); color:#fff; padding:10px 16px; z-index:999; } /* Skip link is reachable for keyboard users */ .bl-skip:focus{ left:12px; top:12px; z-index:1000; } /* categories — pink uppercase with ∙ separators */ .bl-eyebrow-list{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; row-gap:5px; } .bl-eyebrow-list a{ color:var(--bl-theme-text,#D4145A); text-transform:uppercase; font-weight:700; font-size:0.72rem; letter-spacing:.8px; transition:var(--bl-transition); } .bl-eyebrow-list li:not(:last-child)::after{ content:"\2219"; color:currentColor; font-weight:700; padding:0 0 0 12px; } .bl-eyebrow-list a:hover{ color:var(--bl-dark); text-decoration:underline; text-underline-offset:3px; } .bl-eyebrow{ color:var(--bl-theme-text,#D4145A); text-transform:uppercase; font-weight:700; font-size:0.72rem; letter-spacing:.8px; display:inline-block; margin-bottom:8px; } .bl-meta{ font-size:0.78rem; color:var(--bl-soft); display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; } .bl-meta a{ transition:var(--bl-transition); } .bl-meta a:hover{ color:var(--bl-theme); text-decoration:underline; text-underline-offset:3px; } .bl-meta .sep::before{ content:"·"; margin-right:14px; color:var(--bl-line); } /* section header */ .bl-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:52px 0 30px; } .bl-section-head .sh-wrap{ position:relative; padding-bottom:14px; } .bl-section-head .sh-sub{ font-size:var(--bl-fs-section-sub,11px); font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--bl-theme-text,#D4145A); display:block; margin-bottom:2px; } .bl-section-head h2, .bl-section-head h1{ font-size:var(--bl-fs-section,30px); margin:0; line-height:1.3; } .bl-section-head .sh-wrap::after{ content:""; position:absolute; left:0; bottom:0; width:42px; height:3px; background:var(--bl-theme); border-radius:2px; transition:width .45s ease-out; } .bl-section-head:hover .sh-wrap::after{ width:70px; } .bl-section-head a{ font-size:0.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bl-dark); white-space:nowrap; display:inline-flex; align-items:center; gap:7px; transition:var(--bl-transition); } .bl-section-head a .arr{ transition:transform .35s ease-out; color:var(--bl-theme); } .bl-section-head a:hover{ color:var(--bl-theme); text-decoration:underline; text-underline-offset:4px; } .bl-section-head a:hover .arr{ transform:translateX(5px); } /* ---------- Buttons (text ALWAYS white) ---------- */ .bl-btn, .bl-btn:link, .bl-btn:visited, .bl-btn:hover, .bl-btn:focus, .bl-btn:active, .bl-btn *, .bl-cta-form button, .bl-cta-form button:hover, .bl-pin-btn, .bl-pin-btn:hover, a.bl-chip:hover, .bl-chip.is-active, .bl-cat-pill, .bl-cat-pill a, .bl-cat-pill a:hover, .bl-pc-badge, .bl-cmp-label, .bl-hl-cta, .bl-hl-cta:hover{ color:#fff !important; } .bl-socials a:hover, .bl-share a:hover, .bl-share button:hover, .bl-footer-social a:hover, .bl-tagcloud a:hover, .bl-tags a:hover, .bl-pagi .page-numbers:hover, .bl-pagi .page-numbers.current{ color:#fff !important; } .bl-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--bl-font-body); font-weight:700; font-size:var(--bl-fs-button,13px); letter-spacing:.08em; text-transform:uppercase; padding:13px 26px; border-radius:25px; border:1.5px solid var(--bl-dark); background:var(--bl-dark); color:#fff; cursor:pointer; transition:var(--bl-transition); } .bl-btn:hover{ background:var(--bl-theme); border-color:var(--bl-theme); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px color-mix(in srgb, var(--bl-theme) 30%, transparent); } .bl-btn-outline{ background:var(--bl-dark); border-color:var(--bl-dark); color:#fff; } .bl-btn-outline:hover{ background:var(--bl-theme); border-color:var(--bl-theme); color:#fff; } .bl-btn-pink, .bl-btn-accent, .bl-btn-theme{ background:var(--bl-theme); border-color:var(--bl-theme); color:#fff; } .bl-btn-pink:hover, .bl-btn-accent:hover, .bl-btn-theme:hover{ background:var(--bl-dark); border-color:var(--bl-dark); color:#fff; } .bl-btn-sm{ padding:10px 18px; font-size:0.72rem; } /* .bl-read-more is fully styled below in the post-card section (this earlier definition duplicated the selector and never matched any markup — the .arr child it targeted doesn't exist inside the actual "Read More" link). */ /* ---------- Header ---------- */ .bl-header{ background:var(--bl-surface); border-bottom:1px solid var(--bl-line); position:relative; z-index:60; } .bl-header.bl-sticky{ position:sticky; top:0; } .bl-header.is-stuck{ box-shadow:var(--bl-shadow-md); } .bl-mainbar{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:84px; } .bl-logo{ font-family:var(--bl-font-display); font-weight:700; font-size:var(--bl-fs-logo,28px); letter-spacing:.01em; color:var(--bl-dark); display:inline-block; transition:var(--bl-transition); } .bl-logo b{ color:var(--bl-theme); font-weight:700; } .bl-logo:hover{ color:var(--bl-theme); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; } .bl-logo:hover b{ color:var(--bl-dark); } .bl-nav-list{ display:flex; list-style:none; margin:0; padding:0; gap:4px; } .bl-nav-list a{ font-family:var(--bl-font-body); font-size:var(--bl-fs-menu,13px); font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:10px 14px; position:relative; color:var(--bl-ink); transition:var(--bl-transition); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:6px; text-decoration-thickness:2px; } .bl-nav-list a:hover, .bl-nav-list .current-menu-item > a{ color:var(--bl-theme); text-decoration-color:currentColor; } .bl-header-actions{ display:flex; align-items:center; gap:4px; } .bl-icon-btn{ background:none; border:0; cursor:pointer; padding:10px; border-radius:50%; display:grid; place-items:center; color:var(--bl-ink); transition:var(--bl-transition); } .bl-icon-btn:hover{ color:var(--bl-theme); transform:translateY(-1px); } .bl-burger{ display:none; } .bl-burger span{ display:block; width:20px; height:2px; background:var(--bl-dark); margin:2.5px 0; border-radius:2px; transition:transform .3s ease-out, opacity .3s; } .bl-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .bl-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .bl-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .bl-search-panel{ max-height:0; overflow:hidden; transition:max-height .45s ease-out; background:var(--bl-surface); } .bl-search-panel.is-open{ max-height:180px; border-top:1px solid var(--bl-line); } .bl-search-inner{ padding:18px 0; } .bl-mobile-menu{ display:none; background:var(--bl-surface); border-bottom:1px solid var(--bl-line); max-height:0; overflow:hidden; transition:max-height .45s ease-out; } .bl-mobile-menu.is-open{ max-height:420px; } .bl-mobile-menu ul{ list-style:none; margin:0; padding:8px 0; } .bl-mobile-menu a{ display:block; padding:12px 24px; font-size:0.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px dashed var(--bl-line); transition:color .3s, padding-left .3s ease-out; } .bl-mobile-menu a:hover{ color:var(--bl-theme); padding-left:34px; text-decoration:underline; } /* Search form */ .bl-search-form{ display:flex; align-items:center; gap:0; border-bottom:2px solid var(--bl-dark); max-width:520px; transition:var(--bl-transition); } .bl-search-form:focus-within{ border-color:var(--bl-theme); } .bl-search-form input[type="search"]{ flex:1; border:0; background:transparent; padding:12px 4px; font-size:0.95rem; font-family:var(--bl-font-body); color:var(--bl-dark); outline:none; min-width:0; } .bl-search-form input[type="search"]::placeholder{ color:var(--bl-soft); } .bl-search-form button{ background:none; border:0; cursor:pointer; color:var(--bl-dark); padding:8px; display:grid; place-items:center; transition:var(--bl-transition); } .bl-search-form button:hover{ color:var(--bl-theme); transform:translateX(3px); } .bl-search-form.bl-form-round{ border:1.5px solid var(--bl-line); border-radius:25px; background:var(--bl-surface); padding:4px 6px 4px 18px; margin:0; } .bl-search-form.bl-form-round:focus-within{ border-color:var(--bl-theme); } .bl-w .bl-search-form.bl-form-round{ max-width:100%; } /* ---------- Ad slots ---------- */ .bl-ad{ margin:28px 0; border:1.5px dashed var(--bl-line); border-radius:var(--bl-radius); background:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(30,30,30,.015) 12px,rgba(30,30,30,.03) 24px); padding:18px; text-align:center; } .bl-ad::before{ content:"ADVERTISEMENT"; display:block; font-size:0.62rem; font-weight:700; letter-spacing:.3em; color:var(--bl-soft); margin-bottom:10px; } .bl-ad:empty::after{ content:"Your ad code renders here"; font-style:italic; color:var(--bl-soft); padding:22px 0; } .bl-ad-top{ margin:0 auto; } /* ---------- Progress bar ---------- */ .bl-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--bl-theme); z-index:99; transition:width .1s linear; } /* ========================================================= POST CARD — exact reference spec Heading : Laila 700 · 25px · 38px Category : Poppins 700 · 13px · 13px Meta : Poppins 500 · 13px · 19px Excerpt : Poppins 400 · 14px · 21px · rgb(75,70,76) Read more: Poppins 600 · 13px · 19px Content column is vertically CENTRED against the image, so it never spills past the image top/bottom edge — it sits inside with a margin. ========================================================= */ .bl-list{ display:grid; grid-template-columns:1fr; gap:44px; } .bl-grid, .bl-grid-2, .bl-grid-3, .bl-grid-4{ display:grid; grid-template-columns:1fr; gap:44px; } .bl-card{ display:grid; grid-template-columns:390px minmax(0,1fr); gap:30px; align-items:stretch; position:relative; } .bl-card-media{ display:block; overflow:hidden; border-radius:15px; background:var(--bl-soft-bg); position:relative; aspect-ratio:4/2.8; align-self:start; box-shadow:0 2px 12px rgba(30,30,30,.07); } .bl-fig{ margin:0; position:relative; overflow:hidden; border-radius:inherit; height:100%; } .bl-fig .bl-img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s ease, transform 0.5s ease-in-out; position:relative; z-index:1; } .bl-fig.is-loaded .bl-img{ opacity:1; } /* LCP image paints instantly — no fade, no placeholder */ .bl-fig.is-lcp .bl-img{ opacity:1; transition:transform 0.5s ease-in-out; } .bl-fig.is-lcp .bl-ph{ display:none; } .bl-fig .bl-ph{ position:absolute; inset:0; z-index:0; display:grid; place-items:center; font-family:var(--bl-font-body); font-size:12px; font-weight:600; letter-spacing:.38em; text-transform:uppercase; color:#6E6976; background:linear-gradient(160deg,#F7F7F9,#EFEFF2); border-radius:inherit; transition:opacity .7s ease .15s; padding-left:.38em; } .bl-fig.is-loaded .bl-ph{ opacity:0; } .bl-card .bl-card-fig .bl-img{ transform:scale(1.07); } .bl-card:focus-within .bl-card-fig .bl-img, .bl-card:hover .bl-card-fig .bl-img{ transform:scale(1); } /* content column — centred inside the image height */ .bl-card-body{ display:flex; flex-direction:column; justify-content:center; min-width:0; padding-block:6px; } /* CATEGORY — Poppins 700 / 13 / 13 */ .bl-card-cat{ font-family:var(--bl-font-body); font-weight:700; font-size:var(--bl-fs-card-cat,13px); line-height:1; letter-spacing:.04em; text-transform:uppercase; color:var(--bl-theme-text,#D4145A); margin:0 0 12px; } .bl-card-cat a{ color:var(--bl-theme-text,#D4145A); } .bl-card-cat a:hover{ color:var(--bl-dark); } /* HEADING — Laila 700 / 25 / 38 */ .bl-card-title{ font-family:var(--bl-font-display); font-weight:700; font-size:var(--bl-fs-card-title,25px); line-height:1.52; margin:0 0 8px; letter-spacing:-.002em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .bl-card-title a{ color:var(--bl-card-title,#4B464C); display:inline; text-decoration-line:underline; text-decoration-color:transparent; text-underline-offset:5px; text-decoration-thickness:2px; transition:var(--bl-transition); } .bl-card:focus-within .bl-card-title a, .bl-card:hover .bl-card-title a{ text-decoration-color:currentColor; } .bl-card-title a:hover{ color:var(--bl-theme); text-decoration-color:currentColor; } /* META — Poppins 500 / 13 / 19 */ .bl-card-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; font-family:var(--bl-font-body); font-weight:500; font-size:var(--bl-fs-card-meta,13px); line-height:1.46; color:var(--bl-card-meta,#6E6976); margin:0 0 12px; } .bl-card-meta span{ display:inline-flex; align-items:center; gap:6px; } .bl-card-meta svg{ flex:none; opacity:.85; } .bl-card-meta a{ color:inherit; } .bl-card-meta a:hover{ color:var(--bl-theme); } /* EXCERPT — Poppins 400 / 14 / 21 / rgb(75,70,76) */ .bl-excerpt{ font-family:var(--bl-font-body); font-weight:400; font-size:var(--bl-fs-card-excerpt,14px); line-height:1.5; color:rgb(75,70,76); margin:0 0 16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* FOOTER — hairline above and below, like the reference */ .bl-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #E8E6EB; padding-top:12px; margin:0; } /* READ MORE / MIN READ — Poppins 600 / 13 / 19 */ .bl-read-more{ font-family:var(--bl-font-body); font-weight:600; font-size:var(--bl-fs-card-action,13px); line-height:1.46; letter-spacing:.05em; text-transform:uppercase; color:var(--bl-card-action,#4B464C); background:none !important; border:0; padding:0; border-radius:0; box-shadow:none !important; display:inline-flex; align-items:center; gap:7px; transition:var(--bl-transition); } .bl-read-more:hover, .bl-read-more:focus{ color:var(--bl-theme) !important; background:none !important; box-shadow:none !important; transform:none; text-shadow:0 0 14px color-mix(in srgb, var(--bl-theme) 50%, transparent); } .bl-read-time{ font-family:var(--bl-font-body); font-weight:600; font-size:var(--bl-fs-card-action,13px); line-height:1.46; letter-spacing:.05em; text-transform:uppercase; color:var(--bl-card-action,#4B464C); opacity:.75; } /* ============ Premium "orb" icon badge ============ Used by bl_quiz_icon() everywhere an icon appears — the Style Quiz options, its promo banner, the Style Tools cards, and their sidebar listing — for one consistent, glossy, on-brand icon treatment instead of platform emoji (renders differently per OS/browser) or flat outlines. */ .bl-orb-icon{ display:inline-grid; place-items:center; border-radius:50%; position:relative; flex:0 0 auto; background:radial-gradient(circle at 32% 28%, #ff6fa8, var(--bl-theme) 55%, #93003f 100%); box-shadow:0 5px 10px color-mix(in srgb, var(--bl-theme) 40%, transparent), inset 0 -4px 7px rgba(0,0,0,.22), inset 0 3px 4px rgba(255,255,255,.5); } .bl-orb-icon::after{ content:""; position:absolute; top:14%; left:20%; width:34%; height:20%; border-radius:50%; background:rgba(255,255,255,.55); filter:blur(2px); transform:rotate(-20deg); } .bl-orb-icon svg{ position:relative; z-index:2; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); display:block; } .bl-orb-icon.is-gold{ background:radial-gradient(circle at 30% 25%, #fff6df, var(--bl-gold,#E8B54D) 50%, #93702a 100%); box-shadow:0 5px 10px rgba(184,141,58,.4), inset 0 -4px 7px rgba(0,0,0,.22), inset 0 3px 4px rgba(255,255,255,.6); } /* Pinterest "Save" badge — restyled to match the same rounded, on-brand language as the share buttons (uniform corners, brand colour that fills with the site's theme colour on hover) instead of a one-off asymmetric corner-badge shape that looked out of place next to everything else. */ .bl-pin-wrap{ position:relative; z-index:3; } .bl-pin-btn{ position:absolute; top:10px; left:10px; z-index:4; background:var(--bl-pinterest); color:#fff !important; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:8px 14px; border-radius:20px; box-shadow:0 4px 14px rgba(0,0,0,.18); opacity:0; transform:translateY(-6px); transition:opacity .35s ease, transform .4s ease-out, background .25s, box-shadow .25s; } .bl-fig:hover .bl-pin-btn, .bl-pin-btn:focus-visible, .bl-card:hover .bl-pin-btn{ opacity:1; transform:translateY(0); } .bl-pin-btn:hover{ background:var(--bl-theme); box-shadow:0 6px 16px color-mix(in srgb, var(--bl-theme) 40%, transparent); } /* Responsive scaling of the exact type scale */ @media (max-width:1180px){ .bl-card{ grid-template-columns:330px minmax(0,1fr); gap:26px; } .bl-card-title{ font-size:22px; line-height:33px; }} @media (max-width:900px){ .bl-card{ grid-template-columns:270px minmax(0,1fr); gap:22px; } .bl-card-title{ font-size:20px; line-height:30px; -webkit-line-clamp:3; } .bl-excerpt{ -webkit-line-clamp:2; }} @media (max-width:640px){ .bl-card{ grid-template-columns:1fr; gap:16px; } .bl-card-body{ justify-content:flex-start; padding-block:0; } .bl-card-title{ font-size:20px; line-height:30px; } .bl-list, .bl-grid, .bl-grid-2, .bl-grid-3, .bl-grid-4{ gap:34px; }} /* ---------- Layout two column ---------- */ .bl-two{ display:grid; grid-template-columns:minmax(0,1fr) var(--bl-sidebar-w,340px); gap:50px; padding-top:36px; padding-bottom:70px; align-items:start; } .bl-two.bl-sidebar-left{ grid-template-columns:var(--bl-sidebar-w,340px) minmax(0,1fr); } .bl-two.bl-sidebar-left .bl-content{ order:2; } .bl-two.bl-sidebar-left .bl-sidebar{ order:1; } /* Full-width layout when the sidebar is switched off */ .bl-one{ display:block; padding-top:36px; padding-bottom:70px; } .bl-one .bl-content{ max-width:100%; } .bl-page-title{ font-size:clamp(1.8rem,2.6vw + 1rem,2.6rem); margin-bottom:10px; } .bl-archive-desc{ color:var(--bl-soft); max-width:640px; margin:0 0 30px; } /* ---------- Sidebar ---------- */ .bl-sidebar{ display:grid; gap:34px; align-content:start; min-width:0; } /* Sticky: JS sets --bl-sticky-top so a tall sidebar scrolls first and then pins its BOTTOM edge (instead of freezing at the top). */ .bl-sidebar.is-sticky{ position:sticky; top:var(--bl-sticky-top,104px); } /* Never let widget content escape the column. */ .bl-sidebar, .bl-sidebar *{ max-width:100%; } .bl-sidebar .bl-w{ overflow:hidden; } .bl-sidebar img, .bl-sidebar iframe, .bl-sidebar table, .bl-sidebar pre{ max-width:100% !important; height:auto; } .bl-sidebar a, .bl-sidebar p, .bl-sidebar h3, .bl-sidebar h4, .bl-sidebar li, .bl-sidebar span{ overflow-wrap:anywhere; word-break:break-word; } .bl-sidebar .bl-pin-embed{ overflow:hidden; } .bl-sidebar .bl-recent-item h4{ min-width:0; } .bl-w{ background:var(--bl-surface); border:1px solid var(--bl-line); border-radius:var(--bl-radius); padding:24px; } .bl-w-title{ font-family:var(--bl-font-display); font-size:var(--bl-fs-widget-title,17px); font-weight:600; color:var(--bl-dark); margin:0 0 18px; padding-bottom:12px; border-bottom:2px solid var(--bl-line); position:relative; } .bl-w-title::after{ content:""; position:absolute; left:0; bottom:-2px; width:36px; height:2px; background:var(--bl-theme); } .bl-author-box{ text-align:center; } .bl-author-box .bl-w-title{ margin-bottom:26px; } .bl-author-box .bl-avatar{ width:92px; height:92px; border-radius:50%; object-fit:cover; margin:8px auto 14px; display:block; transition:transform .4s ease-out; box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--bl-theme); } .bl-author-box a:hover .bl-avatar{ transform:scale(1.05); } .bl-author-box h3{ font-size:1.15rem; margin:0; } .bl-author-box .bl-author-role{ font-size:0.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bl-theme-text,#D4145A); font-weight:700; margin:4px 0 10px; } .bl-author-box p{ font-size:0.82rem; color:var(--bl-soft); margin:0 0 14px; line-height:1.65; } .bl-socials{ display:flex; justify-content:center; gap:9px; flex-wrap:wrap; } .bl-socials a{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; border:0; background:var(--bl-brand,#4B464C); color:#fff !important; transition:transform .3s ease-out, box-shadow .3s ease-out, filter .25s; } .bl-socials a svg{ width:18px; height:18px; } .bl-socials a:hover{ transform:translateY(-3px) scale(1.06); filter:brightness(1.08); box-shadow:0 8px 18px color-mix(in srgb, var(--bl-brand,#4B464C) 45%, transparent); } /* brand colours */ .bl-socials .bl-social-pinterest{ --bl-brand:#E60023; } .bl-socials .bl-social-instagram{ --bl-brand:#C13584; background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); } .bl-socials .bl-social-facebook{ --bl-brand:#1877F2; } .bl-socials .bl-social-youtube{ --bl-brand:#FF0000; } .bl-socials .bl-social-x{ --bl-brand:#000000; } .bl-socials .bl-social-whatsapp{ --bl-brand:#25D366; } .bl-author-link{ display:inline-block; margin-top:14px; font-size:0.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bl-dark); border-bottom:1.5px solid var(--bl-theme); padding-bottom:2px; transition:var(--bl-transition); } .bl-author-link:hover{ color:var(--bl-theme); } .bl-recent-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; } .bl-recent-item{ display:flex; gap:14px; align-items:center; } .bl-recent-item .bl-recent-thumb{ width:78px; height:60px; flex:0 0 78px; border-radius:10px; overflow:hidden; position:relative; background:var(--bl-soft-bg); } .bl-recent-item .bl-recent-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease-in-out; } .bl-recent-item:hover .bl-recent-thumb img{ transform:scale(1.08); } .bl-recent-item h4{ font-family:var(--bl-font-display); font-size:var(--bl-fs-widget-body,13px); font-weight:600; line-height:1.4; margin:0; color:var(--bl-dark); } .bl-recent-item h4 a{ transition:var(--bl-transition); text-decoration:underline; text-decoration-color:transparent; } .bl-recent-item:hover h4 a{ color:var(--bl-theme); text-decoration-color:currentColor; } .bl-recent-item time{ font-size:0.66rem; color:var(--bl-soft); letter-spacing:.05em; } /* Newsletter form — base rules (shared by the homepage CTA strip and the sidebar widget, so this must live in the always-loaded stylesheet, not in home.css which only loads on the front page/blog index). */ .bl-cta-form{ display:flex; gap:0; flex:0 0 auto; } .bl-cta-form input{ border:0; border-radius:25px 0 0 25px; padding:15px 24px; font-size:0.85rem; min-width:250px; font-family:var(--bl-font-body); outline:none; background:#fff; color:var(--bl-dark); } .bl-cta-form button{ border:0; border-radius:0 25px 25px 0; padding:15px 28px; font-weight:700; font-size:0.75rem; letter-spacing:.1em; text-transform:uppercase; background:var(--bl-theme); color:#fff; cursor:pointer; transition:var(--bl-transition); } .bl-cta-form button:hover{ background:#D61E63; color:#fff; } .bl-w-newsletter{ background:var(--bl-dark); border:0; color:#D8D3DA; } .bl-newsletter-msg{ margin:10px 0 0; font-size:0.78rem; min-height:1em; } .bl-newsletter-msg.is-success{ color:#4ADE80; } .bl-newsletter-msg.is-error{ color:#F87171; } .bl-w-newsletter .bl-w-title{ color:#fff; border-bottom-color:rgba(255,255,255,.15); } .bl-w-newsletter p{ font-size:0.8rem; opacity:.75; margin:0 0 16px; } .bl-w-newsletter .bl-cta-form{ width:100%; flex-direction:column; gap:9px; align-items:stretch; } .bl-w-newsletter .bl-cta-form input{ width:100%; border-radius:25px; min-width:0; } .bl-w-newsletter .bl-cta-form button{ border-radius:25px; } .bl-cat-list{ list-style:none; margin:0; padding:0; } .bl-cat-list li a{ display:flex; align-items:baseline; gap:10px; padding:10px 0; font-size:var(--bl-fs-widget-body,13px); font-weight:500; color:var(--bl-ink); border-bottom:1px solid var(--bl-line); transition:color .3s, padding-left .3s ease-out; } .bl-cat-list li:last-child a{ border-bottom:0; } .bl-cat-list li a::before{ content:"→"; color:var(--bl-theme); opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s ease-out; } .bl-cat-list li a:hover{ color:var(--bl-theme); padding-left:4px; text-decoration:underline; text-underline-offset:3px; } .bl-cat-list li a:hover::before{ opacity:1; transform:translateX(0); } .bl-cat-list .count{ margin-left:auto; font-size:0.66rem; font-weight:700; color:var(--bl-soft); background:var(--bl-soft-bg); border-radius:20px; padding:2px 10px; } .bl-tagcloud{ display:flex; flex-wrap:wrap; gap:8px; margin:0; } .bl-tagcloud a{ font-size:0.72rem; font-weight:500; padding:7px 14px; border-radius:20px; background:var(--bl-soft-bg); border:1px solid transparent; color:var(--bl-ink); transition:var(--bl-transition); } .bl-tagcloud a:hover{ background:var(--bl-theme); color:#fff; transform:translateY(-2px); } /* ---------- Breadcrumbs ---------- */ .bl-breadcrumbs{ font-size:var(--bl-fs-crumbs,12px); color:var(--bl-soft); margin:26px 0 16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .bl-breadcrumbs a{ transition:var(--bl-transition); text-decoration:underline; text-decoration-color:transparent; } .bl-crumb-home-link{ display:inline-flex; align-items:center; line-height:0; } .bl-crumb-home{ display:block; } .bl-crumb-home-link:hover .bl-crumb-home{ color:var(--bl-theme); } .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; } .bl-breadcrumbs a:hover{ color:var(--bl-theme); text-decoration-color:currentColor; } .bl-breadcrumbs .sep{ color:var(--bl-line); } .bl-breadcrumbs .current{ color:var(--bl-dark); font-weight:600; } /* Two different WP pagination helpers are used across the theme: the_posts_pagination() (category/tag/search archives) wraps links in a nested .nav-links div; bl_home_more()'s 'numbered pagination' mode (homepage) calls paginate_links() directly and puts the links straight inside