/* ========================================================================== NewsLite — Editorial design system Loaded after style.css and before the Admin → Appearance overrides, so publisher colours, fonts and sizes always win. Organised as: 1. Tokens 7. Section headings 13. Static pages & forms 2. Base 8. Story cards 14. Contact 3. Layout 9. Home 15. Gallery & empty states 4. Soft UI 10. Category 16. Footer 5. Header & nav 11. Article 17. Utilities & motion 6. Ticker 12. Search ========================================================================== */ /* 1. Tokens ---------------------------------------------------------------- */ :root { --np-max: 1280px; --np-gutter: clamp(16px, 2.6vw, 32px); --np-gap: clamp(16px, 2vw, 24px); --np-radius: 8px; --np-radius-sm: 4px; --np-ink: var(--site-heading-color, #121417); --np-text: var(--site-body-color, #2a2e34); --np-muted: var(--site-muted-color, #6b7280); --np-line: var(--bs-border-color, #e4e6ea); --np-accent: var(--brand-accent, #c8102e); --np-surface: var(--site-surface-color, #ffffff); --np-soft: #f6f7f9; --np-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06); --np-shadow-md: 0 8px 24px -8px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06); --np-ease: cubic-bezier(.2, .7, .2, 1); } /* 2. Base ------------------------------------------------------------------ */ body.site-public { color: var(--np-text); } body.site-public ::selection { background: color-mix(in srgb, var(--np-accent) 18%, transparent); } body.site-public a { transition: color .15s var(--np-ease); } body.site-public img { max-width: 100%; } body.site-public hr { border-color: var(--np-line); opacity: 1; } body.site-public mark { background: color-mix(in srgb, var(--np-accent) 14%, #fff7cc); color: inherit; padding: 0 .1em; border-radius: 2px; } /* 3. Layout ---------------------------------------------------------------- */ body.site-public main.container, body.site-public .site-topbar > .container, body.site-public .site-mainnav > .container, body.site-public .site-footer > .container { max-width: var(--np-max); padding-left: var(--np-gutter); padding-right: var(--np-gutter); margin-left: auto; margin-right: auto; } body.site-public main.container { margin-top: clamp(16px, 2.5vw, 32px) !important; margin-bottom: clamp(32px, 5vw, 64px) !important; } body.site-public .home-section + .home-section, body.site-public .home-sections > * + * { margin-top: clamp(8px, 1.5vw, 16px); } /* 4. Soft UI: rounded media and controls (style.css forces square corners) */ body.site-public .card, body.site-public .article-sheet, body.site-public .dropdown-menu, body.site-public .modal-content, body.site-public .alert { border-radius: var(--np-radius) !important; } body.site-public .btn, body.site-public .form-control, body.site-public .form-select, body.site-public .input-group-text, body.site-public .pagination .page-link, body.site-public .badge { border-radius: var(--np-radius-sm) !important; } body.site-public .input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } body.site-public .input-group > :not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } body.site-public main img:not(.rounded-circle):not([style*="border-radius:999"]) { border-radius: var(--np-radius-sm); } body.site-public .form-control, body.site-public .form-select { min-height: 44px; border-color: #d5d9df; } body.site-public .form-control:focus, body.site-public .form-select:focus { border-color: var(--np-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--np-ink) 12%, transparent); } body.site-public .btn { font-weight: 600; padding-top: .55rem; padding-bottom: .55rem; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; } body.site-public .btn-primary { background: var(--np-accent); border-color: var(--np-accent); } body.site-public .btn-primary:hover, body.site-public .btn-primary:focus { background: color-mix(in srgb, var(--np-accent) 86%, #000); border-color: color-mix(in srgb, var(--np-accent) 86%, #000); } /* 5. Header & navigation ----------------------------------------------------- */ body.site-public .site-header { box-shadow: none; } body.site-public .site-topbar { height: 76px; border-bottom: 0 !important; } body.site-public .topbar-dateline { font-size: 13px; font-weight: 600; color: var(--np-muted); letter-spacing: .01em; white-space: nowrap; } body.site-public .site-topbar .social-circle { width: 32px; height: 32px; border-radius: 50%; transition: background-color .15s; } body.site-public .site-topbar .social-circle:hover { background: var(--np-soft); } body.site-public .site-mainnav { border-top: 1px solid var(--np-line) !important; border-bottom: 1px solid var(--np-line) !important; padding-top: 0; padding-bottom: 0; } body.site-public .site-mainnav .navbar-nav { gap: .1rem; flex-wrap: wrap; justify-content: center; } body.site-public .site-mainnav .nav-link { position: relative; padding: .9rem .7rem !important; } body.site-public .site-mainnav .nav-link::after { border: 0; } body.site-public .site-mainnav .nav-item > .nav-link::before { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -1px; height: 3px; background: var(--np-accent); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--np-ease); } body.site-public .site-mainnav .nav-item:hover > .nav-link::before, body.site-public .site-mainnav .nav-item > .nav-link:focus-visible::before, body.site-public .site-mainnav .nav-item > .nav-link.active::before { transform: scaleX(1); } body.site-public .site-mainnav .dropdown-menu, body.site-public .site-header .dropdown-menu { border: 1px solid var(--np-line); box-shadow: var(--np-shadow-md); padding: .4rem; min-width: 220px; margin-top: 0; } body.site-public .site-header .dropdown-item { border-radius: var(--np-radius-sm); padding: .5rem .75rem; font-weight: 500; } body.site-public .site-header .dropdown-item:hover, body.site-public .site-header .dropdown-item:focus { background: var(--np-soft); color: var(--np-ink); } body.site-public.header-scrolled .site-topbar { box-shadow: 0 2px 12px rgba(16, 24, 40, .08); } /* Off-canvas menu (mobile + desktop hamburger) */ body.site-public .offcanvas.offcanvas-start { width: min(360px, 88vw); } body.site-public .offcanvas-header { border-bottom: 1px solid var(--np-line); padding: 1rem 1.25rem; } body.site-public .offcanvas-title { font-weight: 800; letter-spacing: -.01em; } body.site-public .offcanvas-body { padding: 1.25rem; } body.site-public .offcanvas .navbar-nav .nav-link { font-size: 1.05rem !important; padding: .8rem .25rem !important; border-bottom: 1px solid var(--np-line); display: flex; justify-content: space-between; align-items: center; } body.site-public .offcanvas .navbar-nav .dropdown-menu { position: static !important; transform: none !important; box-shadow: none; border: 0; background: var(--np-soft); margin: 0 0 .5rem; padding: .25rem; } body.site-public .offcanvas .navbar-nav .dropdown-item { padding: .55rem .75rem; } /* 6. Latest-stories ticker --------------------------------------------------- */ body.site-public .latest-stories { border-bottom: 1px solid var(--np-line); } body.site-public .latest-stories { /* full-bleed band, content aligned with the page column */ padding-left: max(var(--np-gutter), calc((100% - var(--np-max)) / 2 + var(--np-gutter))); padding-right: max(var(--np-gutter), calc((100% - var(--np-max)) / 2 + var(--np-gutter))); } body.site-public .latest-stories__thumb, body.site-public .latest-stories img { border-radius: var(--np-radius-sm); } /* 7. Section headings -------------------------------------------------------- */ body.site-public .section-line-tag .tag, body.site-public .home-magazine-heading-text, body.site-public .category-section__title, body.site-public .rail-box__title { letter-spacing: -.005em; } body.site-public .home-heading-style-left_accent .section-line-tag .tag { font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); font-style: normal; padding-left: .85rem; } body.site-public .home-heading-style-left_accent .section-line-tag { border-bottom: 1px solid var(--np-line); padding-bottom: .65rem; } body.site-public .category-section__title { font-size: 1.2rem; font-weight: 800; color: var(--np-ink); text-transform: none; padding: .75rem 0 .6rem; border-top: 3px solid var(--np-ink); border-bottom: 0; margin-bottom: .75rem; } body.site-public .ent-more, body.site-public .home-section a[href*="/category/"].fw-bold:not(.d-block) { letter-spacing: .02em; } /* 8. Story cards (shared by home, category, article rails) ------------------- */ body.site-public .category-card__media, body.site-public .home-magazine-headline-media, body.site-public .home-magazine-grid-media, body.site-public .ent-hero-media, body.site-public .mini-thumb, body.site-public .mn-thumb, body.site-public .home-videos-thumb, body.site-public .story-row__media, body.site-public .category-list-item__media { display: block; overflow: hidden; border-radius: var(--np-radius-sm); background: #e9ecef; } body.site-public .category-card__media img, body.site-public .home-magazine-headline-media img, body.site-public .home-magazine-grid-media img, body.site-public .ent-hero-media img, body.site-public .story-row__media img, body.site-public .category-list-item__media img, body.site-public .card-img-top { transition: transform .5s var(--np-ease); } @media (hover: hover) { body.site-public .category-card:hover .category-card__media img, body.site-public .home-magazine-headline-card:hover img, body.site-public .home-magazine-grid-card:hover img, body.site-public .ent-hero:hover .ent-hero-media img, body.site-public .story-row:hover .story-row__media img, body.site-public .card:hover > .card-img-top { transform: scale(1.03); } } body.site-public .category-card__title a, body.site-public .story-row__title a, body.site-public .home-magazine-grid-title, body.site-public .home-magazine-headline-card h4 a, body.site-public .trending-text a, body.site-public .latest-list .title, body.site-public .category-rail-item a { color: var(--np-ink); text-decoration: none; } body.site-public .category-card__title a:hover, body.site-public .story-row__title a:hover, body.site-public .trending-text a:hover, body.site-public .latest-list .title:hover, body.site-public .category-rail-item a:hover, body.site-public main h2 a:hover, body.site-public main h3 a:hover, body.site-public main h4 a:hover { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; } body.site-public .meta, body.site-public .category-meta, body.site-public .story-meta { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--np-muted); } body.site-public .category-meta .text-uppercase, body.site-public .meta .text-uppercase, body.site-public .story-meta__section { color: var(--np-accent); text-transform: uppercase; text-decoration: none; } body.site-public .category-card__excerpt, body.site-public .story-row__excerpt { color: var(--np-muted); line-height: 1.5; font-size: 15px; } /* 9. Home --------------------------------------------------------------------- */ body.site-public .home-magazine-headline-media img { height: auto; aspect-ratio: 16 / 9; } body.site-public .home-magazine-grid-media img { height: auto; aspect-ratio: 16 / 10; } body.site-public .home-magazine-headline-card .card-body, body.site-public .home-magazine-grid-card .card-body { background: transparent; } body.site-public .home-magazine-headline-card h4 { margin-top: .6rem !important; } body.site-public .home-magazine-headline-card p { font-size: 1rem !important; line-height: 1.5; } body.site-public .home-magazine-badge-overlay { border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); } body.site-public .home-magazine .col-lg-6 { position: relative; } @media (min-width: 992px) { body.site-public .home-magazine .col-lg-6 { padding-right: calc(var(--np-gap) * .75); } body.site-public .home-magazine .col-lg-3 + .col-lg-3 { border-left: 1px solid var(--np-line); } } body.site-public .home-videos { border-radius: var(--np-radius); overflow: hidden; } body.site-public main.container .home-videos > .container { padding-left: clamp(16px, 2.4vw, 32px) !important; padding-right: clamp(16px, 2.4vw, 32px) !important; } /* Overlay headlines on image heroes: strong but proportionate */ body.site-public .ent-hero-title { font-size: clamp(1.5rem, 1rem + 1.7vw, 2.5rem) !important; line-height: 1.08 !important; letter-spacing: -.015em; font-weight: 800 !important; text-wrap: balance; } body.site-public .biz-hero-title { font-size: clamp(1.4rem, 1rem + 1.3vw, 2.1rem) !important; } body.site-public .ent-hero-overlay { background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, 0) 75%) !important; } body.site-public .home-faq { margin-bottom: 1rem; } body.site-public .home-faq__list { border-radius: var(--np-radius); overflow: hidden; border: 1px solid var(--np-line); } body.site-public .home-faq__item:last-child { border-bottom: 0; } /* 10. Category ---------------------------------------------------------------- */ body.site-public .category-header { text-align: left; padding: .5rem 0 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--np-line); } body.site-public .category-header__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 0; color: var(--np-ink); } body.site-public .category-header__lead { margin: .6rem 0 0; font-size: 1.1rem; color: var(--np-muted); max-width: 48rem; } body.site-public .category-header__subnav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } body.site-public .category-header__subnav a { display: inline-flex; align-items: center; padding: .35rem .85rem; border: 1px solid var(--np-line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--np-ink); text-decoration: none; background: var(--np-surface); transition: border-color .15s, background-color .15s; } body.site-public .category-header__subnav a:hover { border-color: var(--np-ink); background: var(--np-soft); } body.site-public .category-card__media img { width: 100%; aspect-ratio: 16 / 9; height: auto !important; object-fit: cover; } body.site-public .category-hero-card .category-card__title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.12; letter-spacing: -.015em; } body.site-public .category-headline { padding: .85rem 0; border-top: 1px solid var(--np-line); } body.site-public .category-headline .category-card__title { margin: .2rem 0 0; font-size: 1rem; line-height: 1.3; } body.site-public .category-rail { border-left: 1px solid var(--np-line); } body.site-public .category-rail-item { padding: .9rem 0; border-bottom: 1px solid var(--np-line); } body.site-public .category-rail-item:first-child { padding-top: 0; } body.site-public .category-rail-item a { display: block; margin-top: .2rem; line-height: 1.3; } body.site-public .category-divider { margin: 0; } @media (max-width: 991.98px) { body.site-public .category-rail { border-left: 0; border-top: 3px solid var(--np-ink); padding-top: 1rem; } } /* 11. Article ----------------------------------------------------------------- */ body.site-public .article-sheet { box-shadow: var(--np-shadow-sm) !important; border-color: var(--np-line) !important; padding: clamp(18px, 3vw, 40px) !important; } body.site-public .article-kicker span { border-radius: 3px; } body.site-public .article-headline { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.9rem) !important; font-weight: 800 !important; color: var(--np-ink); margin-bottom: .75rem !important; } body.site-public .article-dek { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); } body.site-public .article-byline { padding: .85rem 0; border-top: 1px solid var(--np-line); border-bottom: 1px solid var(--np-line); } body.site-public .article-byline__author { font-size: 14px; } body.site-public .article-hero { margin-left: 0; margin-right: 0; } body.site-public .article-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--np-radius-sm); } body.site-public .article-hero figcaption { position: static !important; display: block; max-width: none !important; margin: .5rem 0 0 !important; padding: 0 !important; background: none !important; color: var(--np-muted) !important; font-size: 13px; line-height: 1.45; border-radius: 0; } body.site-public .article-body { font-size: clamp(17px, 1rem + .2vw, 19px); color: var(--np-text); } body.site-public .article-body h2, body.site-public .article-body h3 { margin-top: 2rem; margin-bottom: .75rem; } body.site-public .article-body figure { margin: 1.75rem 0; } body.site-public .article-body figure figcaption { color: var(--np-muted); font-size: 13px; margin-top: .4rem; } body.site-public .article-share__btn { width: 40px; height: 40px; border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center; } body.site-public .article-side .nav-link, body.site-public .article-side .nav-tabs .nav-link { border-radius: 0 !important; } @media (max-width: 575.98px) { body.site-public .article-sheet { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; margin-left: calc(var(--np-gutter) * -1); margin-right: calc(var(--np-gutter) * -1); box-shadow: none !important; } } /* 12. Search & shared story lists -------------------------------------------- */ body.site-public .page-hero { text-align: center; padding: .5rem 0 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--np-line); } body.site-public .page-hero--left { text-align: left; } body.site-public .page-hero__kicker { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--np-accent); margin-bottom: .4rem; } body.site-public .page-hero__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; color: var(--np-ink); margin: 0; } body.site-public .page-hero__lead { font-size: 1.1rem; color: var(--np-muted); max-width: 44rem; margin: .75rem auto 0; line-height: 1.5; } body.site-public .page-hero--left .page-hero__lead { margin-left: 0; } body.site-public .search-page__form { position: relative; display: flex; gap: .5rem; max-width: 760px; margin-top: 1.1rem; } body.site-public .search-page__form > .bi { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--np-muted); pointer-events: none; } body.site-public .search-page__form .form-control { min-height: 52px; padding-left: 2.6rem; font-size: 1.05rem; border-radius: var(--np-radius-sm) !important; } body.site-public .search-page__form .btn { min-width: 110px; border-radius: var(--np-radius-sm) !important; } body.site-public .search-page__count { margin: .9rem 0 0; color: var(--np-muted); } body.site-public .story-list { border-top: 1px solid var(--np-line); } body.site-public .story-row { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.25rem 0; border-bottom: 1px solid var(--np-line); } body.site-public .story-row__body { flex: 1 1 auto; min-width: 0; } body.site-public .story-row__media { flex: 0 0 200px; } body.site-public .story-row__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } body.site-public .story-meta { display: flex; gap: .6rem; align-items: center; margin-bottom: .35rem; } body.site-public .story-row__title { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); line-height: 1.25; margin: 0 0 .4rem; font-weight: 700; } body.site-public .story-row__excerpt { margin: 0; } @media (max-width: 575.98px) { body.site-public .story-row__media { flex-basis: 108px; } body.site-public .story-row__excerpt { display: none; } body.site-public .search-page__form .btn { min-width: 0; } } body.site-public .rail-box { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: var(--np-radius); padding: 1.25rem 1.25rem .5rem; position: sticky; top: 96px; } body.site-public .rail-box__title { font-size: 1.1rem; font-weight: 800; color: var(--np-ink); margin: 0 0 .5rem; } body.site-public .rank-list { list-style: none; counter-reset: rank; margin: 0; padding: 0; } body.site-public .rank-list li { counter-increment: rank; display: flex; gap: .85rem; padding: .85rem 0; border-top: 1px solid var(--np-line); } body.site-public .rank-list li::before { content: counter(rank); font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--np-accent); min-width: 1.4rem; } body.site-public .rank-list a { color: var(--np-ink); font-weight: 600; line-height: 1.3; text-decoration: none; } body.site-public .rank-list a:hover { text-decoration: underline; } /* 13. Static pages ------------------------------------------------------------ */ body.site-public .crumbs { display: flex; gap: .5rem; font-size: 13px; color: var(--np-muted); margin-bottom: 1rem; } body.site-public .crumbs a { color: var(--np-muted); text-decoration: none; } body.site-public .crumbs a:hover { color: var(--np-ink); text-decoration: underline; } body.site-public .cms-page { max-width: 760px; margin: 0 auto; background: var(--np-surface); border: 1px solid var(--np-line); border-radius: var(--np-radius); padding: clamp(20px, 4vw, 56px); box-shadow: var(--np-shadow-sm); } body.site-public .cms-page__header { border-bottom: 1px solid var(--np-line); padding-bottom: 1.25rem; margin-bottom: 1.5rem; } body.site-public .cms-page__title { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0; color: var(--np-ink); } body.site-public .cms-page__updated { margin: .6rem 0 0; color: var(--np-muted); font-size: 14px; } body.site-public .cms-page__body h2 { font-size: 1.4rem; } @media (max-width: 575.98px) { body.site-public .cms-page { border-radius: 0; border-left: 0; border-right: 0; margin-left: calc(var(--np-gutter) * -1); margin-right: calc(var(--np-gutter) * -1); box-shadow: none; } } /* 14. Contact ----------------------------------------------------------------- */ body.site-public .contact-page { max-width: 1080px; margin: 0 auto; } body.site-public .contact-panel--form { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: var(--np-radius); box-shadow: var(--np-shadow-sm); } body.site-public .contact-panel__inner { padding: clamp(20px, 3vw, 36px); } body.site-public .contact-panel__title { font-size: 1.35rem; font-weight: 800; color: var(--np-ink); margin-bottom: 1.25rem; } body.site-public .contact-page .form-label { font-weight: 600; font-size: 14px; margin-bottom: .35rem; color: var(--np-ink); } body.site-public .contact-input { background: #fff; } body.site-public .contact-card { background: var(--np-ink); color: #fff; border-radius: var(--np-radius); padding: clamp(20px, 3vw, 32px); position: sticky; top: 96px; } body.site-public .contact-card__title { color: #fff !important; font-size: 1.25rem; font-weight: 800; margin-bottom: .5rem; } body.site-public .contact-card__desc { color: rgba(255, 255, 255, .75); margin-bottom: 1.25rem; } body.site-public .contact-card__list { list-style: none; margin: 0; padding: 0; } body.site-public .contact-card__list li { display: flex; gap: .85rem; padding: .9rem 0; border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 1.45; } body.site-public .contact-card__list i { font-size: 1.15rem; color: #fff; margin-top: .1rem; } body.site-public .contact-card__label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: .15rem; } body.site-public .contact-card__list a { color: #fff !important; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } @media (max-width: 991.98px) { body.site-public .contact-card { position: static; } } /* 15. Gallery & empty states -------------------------------------------------- */ body.site-public .gallery-grid { columns: 4 260px; column-gap: var(--np-gap); } body.site-public .gallery-grid__item { break-inside: avoid; margin: 0 0 var(--np-gap); background: var(--np-surface); border-radius: var(--np-radius); overflow: hidden; border: 1px solid var(--np-line); } body.site-public .gallery-grid__item img { width: 100%; height: auto; display: block; border-radius: 0; transition: transform .5s var(--np-ease); } body.site-public .gallery-grid__item a { display: block; overflow: hidden; } body.site-public .gallery-grid__item:hover img { transform: scale(1.03); } body.site-public .gallery-grid__item figcaption { padding: .65rem .85rem; font-size: 14px; font-weight: 600; color: var(--np-ink); } body.site-public .empty-state { text-align: center; padding: clamp(32px, 6vw, 72px) 1rem; color: var(--np-muted); border: 1px dashed #cfd4da; border-radius: var(--np-radius); background: var(--np-surface); } body.site-public .empty-state > .bi { font-size: 2.25rem; color: #b6bdc6; display: block; margin-bottom: .75rem; } body.site-public .empty-state p { max-width: 30rem; margin: 0 auto 1rem; } /* 16. Footer ------------------------------------------------------------------ */ body.site-public .site-footer { padding: clamp(36px, 5vw, 64px) 0 1.5rem; margin-top: clamp(24px, 4vw, 48px); font-size: 14px; } body.site-public .site-footer a { text-decoration: none; opacity: .86; transition: opacity .15s; } body.site-public .site-footer a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } body.site-public .site-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1.5rem 3rem; padding-bottom: 1.75rem; border-bottom: 1px solid rgba(255, 255, 255, .14); } body.site-public .site-footer__brandLockup { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; max-width: 40rem; min-width: 0; } body.site-public .site-footer__logo { opacity: 1 !important; display: inline-flex; line-height: 0; } body.site-public .site-footer__logoImg { width: 200px; height: 40px; margin: 0; background-position: left center; background-size: contain; } body.site-public .site-footer__logoImg.is-trimmed { height: auto; width: min(15rem, calc(2.5rem * var(--logo-ar, 5))); aspect-ratio: var(--logo-ar, 5); } body.site-public .site-footer__brand { font-size: 1.6rem; font-weight: 800; color: inherit; } body.site-public .site-footer__about { max-width: 62ch; margin: 0; font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .72); text-wrap: pretty; } body.site-public .site-footer__about p { margin: 0 0 .5rem; } body.site-public .site-footer__about p:last-child { margin-bottom: 0; } body.site-public .site-footer__follow { display: flex; flex-direction: column; gap: .7rem; align-items: flex-end; text-align: right; padding-top: .25rem; } body.site-public .site-footer__inlineTitle { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .6; } body.site-public .site-footer__socials { display: flex; flex-wrap: wrap; gap: .4rem; } body.site-public .site-footer__social { width: 38px; height: 38px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); opacity: 1 !important; } body.site-public .site-footer__social:hover { background: rgba(255, 255, 255, .1); text-decoration: none !important; } body.site-public .site-footer__directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.75rem 1.5rem; padding: 2rem 0; border-bottom: 1px solid rgba(255, 255, 255, .14); } body.site-public .site-footer__groupTitle { display: block; font-weight: 800; font-size: 15px; margin-bottom: .6rem; opacity: 1 !important; } body.site-public .site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } body.site-public .site-footer__list a { opacity: .7; } body.site-public .site-footer__engagement { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem 2rem; flex-wrap: wrap; padding: 1.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, .14); } body.site-public .site-footer__newsletterTitle { font-size: 1.15rem; font-weight: 800; } body.site-public .site-footer__newsletterText { opacity: .7; margin-top: .2rem; } body.site-public .site-footer__newsletter { flex: 1 1 340px; max-width: 520px; } body.site-public .site-footer__newsletterRow { display: flex; gap: .5rem; } body.site-public .site-footer__newsletterRow .form-control { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; } body.site-public .site-footer__newsletterRow .form-control::placeholder { color: rgba(255, 255, 255, .55); } body.site-public .site-footer__newsletterRow .btn { white-space: nowrap; color: #fff !important; } body.site-public .site-footer__newsletterMsg { margin-top: .5rem; font-size: 13px; } body.site-public .site-footer__bottom { display: flex; flex-direction: column; gap: .9rem; padding-top: 1.5rem; border: 0; } body.site-public .site-footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-weight: 600; } body.site-public .site-footer__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem; font-size: 13px; opacity: .75; } body.site-public .site-footer__backtotop { font-weight: 700; } @media (max-width: 575.98px) { body.site-public .site-footer__directory { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; } body.site-public .site-footer__directory .site-footer__list { display: none; } body.site-public .site-footer__groupTitle { margin: 0; font-weight: 700; } body.site-public .site-footer__newsletterRow { flex-direction: column; } } /* 17. Utilities & motion ------------------------------------------------------ */ body.site-public .pagination { gap: .35rem; } body.site-public .pagination .page-link { color: var(--np-ink); border-color: var(--np-line); padding: .5rem .95rem; font-weight: 600; } body.site-public .pagination .page-item:not(.disabled) .page-link:hover { background: var(--np-ink); border-color: var(--np-ink); color: #fff; } body.site-public .pagination .page-item.disabled .page-link { background: transparent; } @media (prefers-reduced-motion: reduce) { body.site-public *, body.site-public *::before, body.site-public *::after { transition: none !important; } } /* 18. Responsive refinements (tablet 576–991px, phone <576px) ----------------- */ @media (min-width: 576px) and (max-width: 991.98px) { /* Home top stories: lead full width, then Trending | Editor's Picks side by side */ body.site-public .home-magazine > .row > .col-lg-3 { flex: 0 0 50%; max-width: 50%; margin-top: 1.25rem; } body.site-public .home-magazine .home-magazine-vstack { gap: 1rem; } /* Category: lead + side stories in two columns, rail below */ body.site-public .category-top .col-lg-7, body.site-public .category-top .col-lg-5 { flex: 0 0 50%; max-width: 50%; } body.site-public .category-card--wide, body.site-public .category-section .col-md-6 { min-width: 0; } } @media (max-width: 767.98px) { /* "You may like": compact rows instead of three stacked full-width images */ body.site-public .you-may-like-section .row > .col { flex: 0 0 100%; max-width: 100%; } body.site-public .you-may-like-card { display: grid; grid-template-columns: 112px 1fr; gap: .85rem; align-items: start; border: 0 !important; border-bottom: 1px solid var(--np-line) !important; border-radius: 0 !important; padding: .75rem 0; background: transparent; } body.site-public .you-may-like-card .card-img-top { width: 112px; height: 76px; object-fit: cover; border-radius: var(--np-radius-sm) !important; } body.site-public .you-may-like-card .card-body { padding: 0 !important; } body.site-public .you-may-like-card .card-title { font-size: 15px; line-height: 1.3; } /* Category "More stories": readable headline next to a small thumbnail */ body.site-public .category-list-item { gap: .85rem !important; } body.site-public .category-list-item__media { width: 104px !important; height: 70px !important; flex: 0 0 104px; } body.site-public .category-list-item .category-card__excerpt { display: none; } body.site-public .category-list-item .category-card__title { font-size: 1rem; line-height: 1.3; } /* Category "More in …" grid: two columns of compact cards */ body.site-public .category-section > .row > .col-md-6.col-lg-4 { flex: 0 0 50%; max-width: 50%; } body.site-public .category-section > .row > .col-md-6.col-lg-4 .category-card__title { font-size: 14.5px; line-height: 1.3; } } @media (max-width: 575.98px) { body.site-public .topbar-dateline { display: none !important; } body.site-public .category-header__title, body.site-public .page-hero__title { font-size: 2rem; } body.site-public .category-hero-card .category-card__title { font-size: 1.45rem; } } /* Tablet: home section side columns (e.g. Africa mid cards | headlines list) sit side by side */ @media (min-width: 576px) and (max-width: 991.98px) { body.site-public .home-sections .row > .col-lg-3 { flex: 0 0 50%; max-width: 50%; } } body.site-public .dropdown-item--overview { font-weight: 700 !important; color: var(--np-ink) !important; } /* Home "More news" sidebar: tidy tab bar and readable mini headlines */ body.site-public .mn-tabs .nav { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0 !important; border: 1px solid var(--np-line); border-radius: var(--np-radius-sm); overflow: hidden; } body.site-public .mn-tabs .nav-link { border: 0 !important; border-radius: 0 !important; width: 100%; font-size: 12px !important; padding: .55rem .25rem !important; text-align: center; } body.site-public .mn-tabs .nav-item + .nav-item .nav-link { border-left: 1px solid var(--np-line) !important; } body.site-public .mn-mini { padding: .55rem 0; border-bottom: 1px solid var(--np-line); margin-bottom: 0 !important; gap: .75rem !important; } body.site-public .mn-mini a.fw-bold, body.site-public .mn-mini .fw-bold:not(.meta) { font-size: 14px; line-height: 1.3; } body.site-public .mn-mini-thumb { border-radius: var(--np-radius-sm); overflow: hidden; } /* Cards on a white surface must never let text touch the edge (home style partials use .card-body.px-0, written for borderless layouts). */ body.site-public main .card > .card-body.px-0 { padding-left: clamp(14px, 1.6vw, 20px) !important; padding-right: clamp(14px, 1.6vw, 20px) !important; padding-bottom: clamp(14px, 1.6vw, 20px) !important; } @media (max-width: 767.98px) { /* Phone list rows (thumbnail + headline) are transparent: keep them flush. */ body.site-public main .home-magazine .home-magazine-grid-card > .card-body.px-0 { padding: 0 !important; } } /* 19. Story streams: /latest, /trending, /videos ------------------------------ */ body.site-public .stream-switch { display: inline-flex; gap: .25rem; padding: .25rem; background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 999px; margin-bottom: 1rem; } body.site-public .stream-switch a { padding: .4rem 1rem; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--np-muted); text-decoration: none; } body.site-public .stream-switch a:hover { color: var(--np-ink); background: var(--np-soft); } body.site-public .stream-switch a.is-active { background: var(--np-ink); color: #fff; } body.site-public .stream-hero__icon { color: var(--np-accent); font-size: .8em; margin-right: .5rem; vertical-align: .05em; } body.site-public .stream-lead { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--np-gap); align-items: center; padding-bottom: 1.5rem; margin-bottom: .5rem; } body.site-public .stream-lead__media { display: block; overflow: hidden; border-radius: var(--np-radius-sm); background: #e9ecef; } body.site-public .stream-lead__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .5s var(--np-ease); } body.site-public .stream-lead:hover .stream-lead__media img { transform: scale(1.03); } body.site-public .stream-lead__title { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem); line-height: 1.12; letter-spacing: -.015em; font-weight: 800; margin: .3rem 0 .6rem; } body.site-public .stream-lead__title a { color: var(--np-ink); text-decoration: none; } body.site-public .stream-lead__title a:hover { text-decoration: underline; text-underline-offset: 3px; } body.site-public .stream-lead__excerpt { color: var(--np-muted); font-size: 1.05rem; line-height: 1.5; margin: 0; } body.site-public .stream-rank { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--np-accent); min-width: 2.2rem; flex: 0 0 auto; } body.site-public .stream-lead .stream-rank { font-size: 1.1rem; min-width: 0; } body.site-public .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.75rem var(--np-gap); } body.site-public .video-card__media { position: relative; display: block; overflow: hidden; border-radius: var(--np-radius-sm); background: #1b1e23; aspect-ratio: 16 / 9; margin-bottom: .65rem; } body.site-public .video-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--np-ease); } body.site-public .video-card:hover .video-card__media img { transform: scale(1.04); } body.site-public .video-card__play { position: absolute; left: .75rem; bottom: .75rem; width: 44px; height: 44px; border-radius: 50%; background: var(--np-accent); color: #fff; display: grid; place-items: center; font-size: 1.5rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); } body.site-public .video-card__title { font-size: 1.05rem; line-height: 1.3; font-weight: 700; margin: 0; } body.site-public .video-card__title a { color: var(--np-ink); text-decoration: none; } body.site-public .video-card__title a:hover { text-decoration: underline; } body.site-public .rail-box__more { display: inline-flex; gap: .35rem; align-items: center; margin: .5rem 0 .85rem; font-weight: 700; font-size: 14px; color: var(--np-ink); text-decoration: none; } body.site-public .rail-box__more:hover { text-decoration: underline; } @media (max-width: 767.98px) { body.site-public .stream-lead { grid-template-columns: 1fr; } body.site-public .stream-switch { display: flex; width: 100%; } body.site-public .stream-switch a { flex: 1; text-align: center; padding: .45rem .5rem; } } /* 20. Article page details ---------------------------------------------------- */ body.site-public .article-header .crumbs { margin-bottom: .75rem; } body.site-public .article-kicker { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } body.site-public .article-kicker__format { display: inline-flex; align-items: center; gap: .25rem; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--np-ink); background: var(--np-soft); border: 1px solid var(--np-line); border-radius: 3px; padding: .2rem .5rem; } body.site-public .article-byline { flex-wrap: wrap; } body.site-public .article-byline__read { font-size: 13px; font-weight: 600; color: var(--np-muted); white-space: nowrap; display: inline-flex; gap: .35rem; align-items: center; } body.site-public .article-hero--video .article-video { border-radius: var(--np-radius-sm); overflow: hidden; background: #000; } body.site-public .article-hero--video iframe { border: 0; } body.site-public .article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--np-line); } body.site-public .article-tags__label { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--np-muted); margin-right: .25rem; } body.site-public .article-tags__tag { padding: .3rem .8rem; border-radius: 999px; background: var(--np-soft); border: 1px solid var(--np-line); font-size: 14px; font-weight: 600; color: var(--np-ink) !important; text-decoration: none; } body.site-public .article-tags__tag:hover { border-color: var(--np-ink); } body.site-public .article-sharebar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 1rem 0; border-top: 1px solid var(--np-line); border-bottom: 1px solid var(--np-line); } body.site-public .article-tags + .article-sharebar { margin-top: 1rem; } body.site-public .article-sharebar__label { font-weight: 800; color: var(--np-ink); margin-right: .5rem; } body.site-public .article-sharebar__btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--np-line); background: var(--np-surface); color: var(--np-ink) !important; text-decoration: none; font-size: 1.05rem; transition: background-color .15s, color .15s, border-color .15s; } body.site-public .article-sharebar__btn:hover { background: var(--np-ink); border-color: var(--np-ink); color: #fff !important; } body.site-public .article-sharebar__btn.is-fb:hover { background: #1877f2; border-color: #1877f2; } body.site-public .article-sharebar__btn.is-wa:hover { background: #25d366; border-color: #25d366; } body.site-public .article-sharebar__btn.is-in:hover { background: #0a66c2; border-color: #0a66c2; } body.site-public .copy-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #111; color: #fff; padding: .6rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 2000; } body.site-public .copy-toast.is-show { opacity: 1; transform: translate(-50%, 0); } /* Post-format blocks (gallery, audio, list, contents, poll, quiz, recipe) */ body.site-public .format-block__title { font-size: 1.15rem; font-weight: 800; color: var(--np-ink); margin: 0 0 .85rem; padding-top: .65rem; border-top: 3px solid var(--np-ink); display: flex; align-items: center; gap: .5rem; } body.site-public .format-block .card { border: 1px solid var(--np-line); box-shadow: none; background: var(--np-soft) !important; } body.site-public .format-block .card-body { padding: clamp(16px, 2.4vw, 24px); } body.site-public .format-block .form-check { padding: .65rem .75rem .65rem 2.25rem; margin: 0 0 .5rem; background: var(--np-surface); border: 1px solid var(--np-line); border-radius: var(--np-radius-sm); transition: border-color .15s; } body.site-public .format-block .form-check:hover { border-color: var(--np-ink); } body.site-public .format-block .form-check-input:checked { background-color: var(--np-accent); border-color: var(--np-accent); } body.site-public .format-block .progress { height: 10px; border-radius: 999px; background: #e3e6ea; } body.site-public .format-block .progress-bar { background: var(--np-accent); border-radius: 999px; } body.site-public .article-sheet .list-group-numbered > .list-group-item { padding: 1rem 1.1rem; border-color: var(--np-line); } body.site-public .article-sheet .list-group-numbered > .list-group-item::before { font-weight: 800; color: var(--np-accent); margin-right: .5rem; } body.site-public .article-sheet .list-group-item-action:hover { background: var(--np-soft); } body.site-public .article-sheet audio { width: 100%; border-radius: 999px; } body.site-public .article-sheet .row.g-3 > [class*="col-"] img.img-fluid { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* Comments */ body.site-public .comment-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--np-line); } body.site-public .comment { display: flex; gap: .85rem; padding: 1rem 0; border-bottom: 1px solid var(--np-line); } body.site-public .comment__avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--np-ink); } body.site-public .comment__main { min-width: 0; flex: 1; } body.site-public .comment__head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .2rem; } body.site-public .comment__name { font-weight: 700; color: var(--np-ink); } body.site-public .comment__time { font-size: 13px; color: var(--np-muted); } body.site-public .comment__body { line-height: 1.55; overflow-wrap: anywhere; } body.site-public #comments .card { background: var(--np-soft) !important; border: 1px solid var(--np-line); box-shadow: none !important; } /* Sidebar rail */ @media (min-width: 992px) { body.site-public .article-rail { position: sticky; top: 96px; } } body.site-public .article-tabs { overflow: hidden; } body.site-public .article-tabs__more { display: flex; justify-content: center; align-items: center; gap: .35rem; padding: .8rem; font-weight: 700; font-size: 14px; color: var(--np-ink); text-decoration: none; border-top: 1px solid var(--np-line); } body.site-public .article-tabs__more:hover { background: var(--np-soft); } body.site-public .article-tabs .list-group-item { padding: .85rem 1rem; border-color: var(--np-line); } body.site-public .article-tabs .list-group-item:hover { background: var(--np-soft); } body.site-public .article-side-thumb { border-radius: var(--np-radius-sm); overflow: hidden; } /* 21. Latest-stories ticker ---------------------------------------------------- */ body.site-public .latest-stories__label { text-decoration: none; font-size: 1.05rem; white-space: nowrap; } body.site-public .latest-stories__label:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; } body.site-public .latest-stories__carousel { flex: 1 1 auto; min-width: 0; } body.site-public .latest-stories__link { min-width: 0; } body.site-public .latest-stories__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.site-public .latest-stories__link:hover .latest-stories__title { text-decoration: underline; text-underline-offset: 3px; } body.site-public .latest-stories__controls { flex: 0 0 auto; display: flex; gap: .25rem; margin-left: .75rem; } body.site-public .latest-stories__controls button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); background: rgba(255, 255, 255, .6); color: var(--latest-stories-text-color, #222); display: grid; place-items: center; transition: background-color .15s; } body.site-public .latest-stories__controls button:hover { background: #fff; } @media (max-width: 575.98px) { body.site-public .latest-stories__controls { display: none; } body.site-public .latest-stories__label { font-size: .95rem; padding-right: 1.4rem !important; } } /* Fixes: global appearance link colour must not override white-on-dark controls */ body.site-public .stream-switch a.is-active, body.site-public .stream-switch a.is-active:hover { color: #fff !important; background: var(--np-ink); } body.site-public .stream-switch a:not(.is-active) { color: var(--np-muted) !important; } body.site-public .format-block .form-check-input { border: 1.5px solid #8a929c; } @media (max-width: 575.98px) { body.site-public .story-row .stream-rank { font-size: 1.35rem; min-width: 1.5rem; } body.site-public .story-row { gap: .85rem; } body.site-public .article-sharebar { gap: .35rem; } body.site-public .article-sharebar__label { flex: 0 0 100%; margin-bottom: .25rem; } body.site-public .article-sharebar__btn { width: 38px; height: 38px; } } /* 22. Status card (newsletter confirm / unsubscribe and similar one-message pages) */ body.site-public .status-card { max-width: 560px; margin: clamp(16px, 5vw, 56px) auto; text-align: center; background: var(--np-surface); border: 1px solid var(--np-line); border-radius: var(--np-radius); box-shadow: var(--np-shadow-sm); padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px); } body.site-public .status-card__icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.75rem; } body.site-public .status-card.is-ok .status-card__icon { background: #e7f6ec; color: #1e7b3c; } body.site-public .status-card.is-bad .status-card__icon { background: #fdecec; color: #b42318; } body.site-public .status-card__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -.01em; color: var(--np-ink); margin: 0 0 .6rem; } body.site-public .status-card__text { color: var(--np-muted); line-height: 1.55; margin: 0 auto 1.5rem; max-width: 26rem; } /* Languages page */ body.site-public main .list-group-item-action { border-color: var(--np-line); padding: 1rem 1.25rem; } body.site-public main .list-group { border-radius: var(--np-radius); overflow: hidden; } /* 23. Reader account area ------------------------------------------------------ */ body.site-public .account-nav { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: var(--np-radius); padding: .5rem; position: sticky; top: 96px; } body.site-public .account-nav__title { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--np-muted); padding: .6rem .75rem .4rem; } body.site-public .account-nav__link { display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem; border-radius: var(--np-radius-sm); font-weight: 600; color: var(--np-ink) !important; text-decoration: none; } body.site-public .account-nav__link:hover { background: var(--np-soft); } body.site-public .account-nav__link.is-active { background: var(--np-ink); color: #fff !important; } body.site-public .account-nav__link.is-danger:not(.is-active) { color: #b42318 !important; } body.site-public .account-nav + * , body.site-public .col-md-8 > h1.h3 { letter-spacing: -.01em; } body.site-public .col-md-8.col-lg-9 > h1.h3 { font-weight: 800; color: var(--np-ink); } body.site-public .col-md-8.col-lg-9 > .card { border: 1px solid var(--np-line); box-shadow: var(--np-shadow-sm); } body.site-public .col-md-8.col-lg-9 > .card > .card-body { padding: clamp(18px, 3vw, 32px); } body.site-public main .form-label { font-weight: 600; font-size: 14px; color: var(--np-ink); } @media (max-width: 767.98px) { body.site-public .account-nav { position: static; display: flex; overflow-x: auto; gap: .25rem; padding: .35rem; } body.site-public .account-nav__title { display: none; } body.site-public .account-nav__link { white-space: nowrap; flex: 0 0 auto; } } /* 24. Lead-story carousel (Magazine home style) --------------------------------- */ body.site-public .home-magazine-lead { position: relative; } body.site-public .home-magazine-lead .carousel-item { transition-duration: 1.1s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } body.site-public .home-magazine-lead.carousel-fade .active.carousel-item-start, body.site-public .home-magazine-lead.carousel-fade .active.carousel-item-end { transition: opacity 0s 1.1s; } /* Gentle "Ken Burns" drift on the visible slide */ body.site-public .home-magazine-lead .home-magazine-headline-media img { transition: transform 7s linear; transform: scale(1); } body.site-public .home-magazine-lead .carousel-item.active .home-magazine-headline-media img { transform: scale(1.045); } /* Stable text block: every slide has the same shape, so nothing jumps while sliding */ body.site-public .home-magazine-lead .home-magazine-headline-card h4 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.15em); } body.site-public .home-magazine-lead .home-magazine-headline-card p { -webkit-line-clamp: 2 !important; min-height: calc(2 * 1.5em); } @media (max-width: 991.98px) { body.site-public .home-magazine-lead .home-magazine-headline-card h4 { -webkit-line-clamp: 3; min-height: calc(3 * 1.15em); } } /* 25. Equal-height section rows (desktop) ---------------------------------------- Columns stretch to the tallest column; lead images fill the remaining space and headlines are clamped, so long titles never push a frame below its neighbours. */ body.site-public .home-magazine-grid-title, body.site-public .ent-mid .card-body h6, body.site-public .ent-mid .card-body h5, body.site-public .ent-mid .card-body a.fw-bold, body.site-public .biz-left-card h6, body.site-public .tech-small-card h6, body.site-public .tech-small h6, body.site-public .category-card--compact .category-card__title, body.site-public .category-card--wide .category-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.site-public .ent-hero-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } body.site-public .ent-hero-excerpt, body.site-public .category-card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 992px) { /* Shared "fill" behaviour for media inside a stretched card */ body.site-public .np-fill-media { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* Magazine top: lead | trending | editor's picks */ body.site-public .home-magazine > .row { align-items: stretch !important; } body.site-public .home-magazine__lead, body.site-public .home-magazine__col { display: flex; flex-direction: column; } body.site-public .home-magazine__lead .home-magazine-carousel { flex: 1 1 auto; display: flex; flex-direction: column; } body.site-public .home-magazine-lead { flex: 1 1 auto; min-height: 420px; } body.site-public .home-magazine-lead .carousel-inner { position: absolute; inset: 0; height: 100%; } body.site-public .home-magazine-lead .carousel-item { height: 100%; } body.site-public .home-magazine-lead .home-magazine-headline-card { height: 100%; display: flex; flex-direction: column; } body.site-public .home-magazine-lead .home-magazine-headline-frame { position: relative; flex: 1 1 auto; min-height: 0; } body.site-public .home-magazine-lead .home-magazine-headline-media { position: absolute; inset: 0; overflow: hidden; border-radius: var(--np-radius-sm) var(--np-radius-sm) 0 0; } body.site-public .home-magazine-lead .home-magazine-headline-media img, body.site-public .home-magazine-lead .home-magazine-headline-placeholder { position: absolute; inset: 0; width: 100%; height: 100% !important; aspect-ratio: auto; object-fit: cover; border-radius: 0; } body.site-public .home-magazine-lead .home-magazine-headline-card .card-body { flex: 0 0 auto; } body.site-public .home-magazine__col .home-magazine-vstack { flex: 1 1 auto; display: grid; grid-template-rows: 1fr 1fr; gap: var(--np-gap); } body.site-public .home-magazine__col .home-magazine-grid-card { height: 100%; display: flex; flex-direction: column; } body.site-public .home-magazine__col .home-magazine-grid-media { position: relative; flex: 1 1 auto; min-height: 150px; overflow: hidden; } body.site-public .home-magazine__col .home-magazine-grid-media img, body.site-public .home-magazine__col .home-magazine-grid-placeholder { position: absolute; inset: 0; width: 100%; height: 100% !important; aspect-ratio: auto; object-fit: cover; } body.site-public .home-magazine__col .home-magazine-grid-card .card-body { flex: 0 0 auto; } body.site-public .home-magazine__col .home-magazine-grid-title { min-height: calc(2 * 1.3em); } /* Featured section (e.g. Africa): overlay hero | two cards | headline list */ body.site-public .ent-layout { align-items: stretch !important; } body.site-public .ent-layout > .col-lg-6 { display: flex; flex-direction: column; } body.site-public .ent-layout > .col-lg-6 > .ent-hero, body.site-public .biz-layout > .col-lg-6 > .ent-hero { flex: 1 1 auto; min-height: 400px; margin-bottom: 0 !important; } body.site-public .ent-layout .ent-hero-media, body.site-public .biz-layout .ent-hero-media { position: absolute; inset: 0; } body.site-public .ent-layout .ent-hero-media img, body.site-public .ent-layout .ent-hero-placeholder, body.site-public .biz-layout .ent-hero-media img, body.site-public .biz-layout .ent-hero-placeholder { height: 100% !important; } body.site-public .ent-layout > .col-lg-3:not(aside) { display: flex; flex-direction: column; gap: var(--np-gap); } body.site-public .ent-layout > .col-lg-3:not(aside) > .ent-mid { flex: 1 1 0; display: flex; flex-direction: column; margin-bottom: 0 !important; } body.site-public .ent-layout .ent-mid-media { position: relative; flex: 1 1 auto; min-height: 140px; overflow: hidden; display: block; } body.site-public .ent-layout .ent-mid-media img, body.site-public .ent-layout .ent-mid-placeholder { position: absolute; inset: 0; height: 100% !important; } body.site-public .ent-layout .ent-mid .card-body { flex: 0 0 auto; } /* Business section: two cards | overlay hero | headline list */ body.site-public .biz-layout { align-items: stretch !important; } body.site-public .biz-layout > .col-lg-6 { display: flex; flex-direction: column; } body.site-public .biz-layout > .col-lg-3:not(aside) { display: flex; flex-direction: column; gap: var(--np-gap); } body.site-public .biz-layout > .col-lg-3:not(aside) > .biz-left-card { flex: 1 1 0; display: flex; flex-direction: column; margin-bottom: 0 !important; } body.site-public .biz-layout .biz-left-media { position: relative; flex: 1 1 auto; min-height: 140px; overflow: hidden; } body.site-public .biz-layout .biz-left-media img, body.site-public .biz-layout .biz-left-placeholder { position: absolute; inset: 0; height: 100% !important; } body.site-public .biz-layout .biz-left-card .card-body { flex: 0 0 auto; } /* Category page top: lead story stretches to match the side stories */ body.site-public .category-top > .row > .col-lg-9 > .row:first-child { align-items: stretch; } body.site-public .category-top .col-lg-7 { display: flex; flex-direction: column; } body.site-public .category-top .category-hero-card { flex: 1 1 auto; display: flex; flex-direction: column; } body.site-public .category-top .category-hero-card .category-card__media { position: relative; flex: 1 1 auto; min-height: 280px; } body.site-public .category-top .category-hero-card .category-card__media img, body.site-public .category-top .category-hero-card .category-card__placeholder { position: absolute; inset: 0; width: 100%; height: 100% !important; aspect-ratio: auto; object-fit: cover; } body.site-public .category-top .category-hero-card .category-card__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } } /* Cards in a row share one height (titles above are clamped). */ body.site-public .tech-layout .card, body.site-public .category-section .category-card { height: 100%; } /* Lead carousel: dots on the bottom edge of the photo; drag with mouse, touch or pen */ body.site-public .home-magazine-headline-frame { position: relative; } body.site-public .home-magazine-lead__dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 0; background: none; } body.site-public .home-magazine-lead__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .35); cursor: pointer; transition: width .35s ease, background-color .35s ease; } body.site-public .home-magazine-lead__dots button:hover { background: rgba(255, 255, 255, .85); } body.site-public .home-magazine-lead__dots button.active { width: 22px; background: #fff; } body.site-public .home-magazine-lead.is-draggable .home-magazine-headline-frame { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } body.site-public .home-magazine-lead.is-dragging .home-magazine-headline-frame { cursor: grabbing; } body.site-public .home-magazine-lead .home-magazine-headline-frame img { -webkit-user-drag: none; user-select: none; pointer-events: none; } body.site-public .home-magazine-lead.is-dragging .carousel-item.active { transition: none !important; } /* 26. Header: account controls, one-line navigation, responsive topbar ---------- */ body.site-public .topbar-auth { gap: .35rem; margin-left: .35rem; } body.site-public .topbar-btn { display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .9rem; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none !important; transition: background-color .15s, color .15s, border-color .15s; } body.site-public .topbar-btn i { font-size: 1.05rem; } body.site-public .topbar-btn--ghost { color: var(--np-ink) !important; border: 1px solid transparent; } body.site-public .topbar-btn--ghost:hover { background: var(--np-soft); } body.site-public .topbar-btn--solid { color: #fff !important; background: var(--np-ink); border: 1px solid var(--np-ink); } body.site-public .topbar-btn--solid:hover { background: var(--np-accent); border-color: var(--np-accent); } body.site-public .topbar-btn__label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; } body.site-public .site-topbar .topbar-socials { gap: .1rem !important; } @media (min-width: 1280px) { body.site-public .site-topbar .topbar-socials + .topbar-auth { padding-left: .6rem; border-left: 1px solid var(--np-line); } } body.site-public .site-topbar .topbar-search, body.site-public .site-topbar .topbar-auth-icon, body.site-public .site-topbar .topbar-hamburger { width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; padding: 0; } @media (min-width: 992px) { body.site-public .site-topbar .topbar-search, body.site-public .site-topbar .topbar-hamburger { display: none !important; } } @media (max-width: 991.98px) { body.site-public .site-topbar .topbar-search, body.site-public .site-topbar .topbar-auth-icon, body.site-public .site-topbar .topbar-hamburger { display: inline-flex !important; } } body.site-public .site-topbar .topbar-search:hover, body.site-public .site-topbar .topbar-auth-icon:hover { background: var(--np-soft); } body.site-public .site-mainnav .site-navbar-hamburger, body.site-public .site-mainnav .site-search { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } body.site-public .site-mainnav .site-search:hover { background: var(--np-soft); } body.site-public .site-mainnav > .container { display: flex; align-items: center; flex-wrap: nowrap; } body.site-public .site-mainnav .navbar-nav { flex-wrap: nowrap !important; } /* Small laptops: keep every section on one line (no wrapping to a second row). */ @media (min-width: 992px) and (max-width: 1279.98px) { body.site-public .site-mainnav .navbar-nav .nav-link { font-size: clamp(13px, .45rem + .62vw, 15px) !important; padding-left: clamp(.35rem, .1rem + .45vw, .7rem) !important; padding-right: clamp(.35rem, .1rem + .45vw, .7rem) !important; } body.site-public .site-mainnav .nav-item > .nav-link::before { left: .35rem; right: .35rem; } body.site-public .site-mainnav .dropdown-toggle::after, body.site-public.nav-dropdown-icon-compact .site-mainnav .dropdown-toggle::after, body.site-public.nav-dropdown-icon-chevron .site-mainnav .dropdown-toggle::after, body.site-public.nav-dropdown-icon-triangle .site-mainnav .dropdown-toggle::after { display: none !important; } body.site-public .topbar-dateline { font-size: 12px; } body.site-public .site-topbar .topbar-socials { display: none !important; } } @media (max-width: 991.98px) { body.site-public .site-topbar { height: 64px; } body.site-public .site-topbar > .container { gap: .25rem; } } /* 27. Sign in / register / password pages ------------------------------------------ */ body.site-public.bg-light { background: var(--np-soft) !important; } body.site-public .auth-page { display: flex; justify-content: center; padding: clamp(0px, 3vw, 32px) 0 clamp(16px, 4vw, 48px); } body.site-public .auth-card { width: 100%; max-width: 980px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--np-surface); border: 1px solid var(--np-line); border-radius: 14px; overflow: hidden; box-shadow: var(--np-shadow-md); } body.site-public .auth-aside { position: relative; display: flex; flex-direction: column; gap: 2rem; padding: clamp(28px, 4vw, 48px); color: #fff; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--np-accent) 38%, #121417) 0%, #121417 62%); } body.site-public .auth-aside__brand img { height: 40px; width: auto; max-width: 220px; object-fit: contain; } body.site-public .auth-aside__brand span { font-size: 1.6rem; font-weight: 800; color: #fff; } body.site-public .auth-aside__brand { text-decoration: none; } body.site-public .auth-aside__body { flex: 1; } body.site-public .auth-aside__title { color: #fff !important; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; line-height: 1.15; margin: 0 0 1.25rem; } body.site-public .auth-aside__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; } body.site-public .auth-aside__list li { display: flex; gap: .8rem; align-items: flex-start; color: rgba(255, 255, 255, .86); line-height: 1.4; } body.site-public .auth-aside__list i { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1rem; } body.site-public .auth-aside__foot { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: 13px; } body.site-public .auth-aside__foot a { color: rgba(255, 255, 255, .7) !important; text-decoration: none; } body.site-public .auth-aside__foot a:hover { color: #fff !important; text-decoration: underline; } body.site-public .auth-main { padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 52px); display: flex; flex-direction: column; } body.site-public .auth-main__back { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--np-muted) !important; text-decoration: none; margin-bottom: 1.5rem; } body.site-public .auth-main__back:hover { color: var(--np-ink) !important; } body.site-public .auth-main__title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 800; letter-spacing: -.015em; color: var(--np-ink); margin: 0 0 .4rem; } body.site-public .auth-main__sub { color: var(--np-muted); margin: 0 0 1.5rem; } body.site-public .auth-main__sub a, body.site-public .auth-main__legal a, body.site-public .auth-form__aux { color: var(--np-ink) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } body.site-public .auth-form__aux { font-size: 13px; font-weight: 600; } body.site-public .auth-form .form-label { font-weight: 700; font-size: 14px; color: var(--np-ink); margin-bottom: .35rem; } body.site-public .auth-form .form-control { min-height: 48px; font-size: 1rem; background: #fff; } body.site-public .auth-password { position: relative; } body.site-public .auth-password .form-control { padding-right: 3rem; } body.site-public .auth-password__toggle { position: absolute; top: 50%; right: .4rem; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--np-muted); display: grid; place-items: center; font-size: 1.1rem; } body.site-public .auth-password__toggle:hover { background: var(--np-soft); color: var(--np-ink); } body.site-public .auth-form__help { display: flex; justify-content: space-between; gap: 1rem; margin-top: .4rem; font-size: 13px; color: var(--np-muted); } body.site-public .auth-strength { font-weight: 700; white-space: nowrap; } body.site-public .auth-strength[data-score="0"], body.site-public .auth-strength[data-score="1"] { color: #b42318; } body.site-public .auth-strength[data-score="2"] { color: #b54708; } body.site-public .auth-strength[data-score="3"], body.site-public .auth-strength[data-score="4"] { color: #1e7b3c; } body.site-public .auth-form__check { margin: 1rem 0 0; font-size: 14px; color: var(--np-muted); } body.site-public .auth-form__check .form-check-input { border: 1.5px solid #8a929c; } body.site-public .auth-form__check .form-check-input:checked { background-color: var(--np-ink); border-color: var(--np-ink); } body.site-public .auth-form__submit { width: 100%; min-height: 50px; margin-top: 1.25rem; border-radius: 999px !important; font-size: 1rem; } body.site-public .auth-form__submit:hover { background: var(--np-accent); border-color: var(--np-accent); } body.site-public .auth-main__legal { margin: 1.25rem 0 0; font-size: 13px; color: var(--np-muted); line-height: 1.5; } body.site-public .auth-sso { display: grid; gap: .6rem; } body.site-public .auth-sso__btn { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; border: 1px solid #c9ced5; border-radius: 999px !important; background: #fff; color: var(--np-ink) !important; font-weight: 700; } body.site-public .auth-sso__btn:hover { border-color: var(--np-ink); background: var(--np-soft); } body.site-public .auth-divider { display: flex; align-items: center; gap: .85rem; margin: 1.25rem 0; color: var(--np-muted); font-size: 13px; } body.site-public .auth-divider::before, body.site-public .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--np-line); } body.site-public .auth-sent { text-align: center; padding: 1rem 0; } body.site-public .auth-sent p { color: var(--np-muted); line-height: 1.55; } body.site-public .auth-sent__icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.75rem; background: #e7f6ec; color: #1e7b3c; } body.site-public .auth-sent.is-bad .auth-sent__icon { background: #fdecec; color: #b42318; } body.site-public .auth-sent__small { font-size: 13px; } @media (max-width: 767.98px) { body.site-public .auth-card { grid-template-columns: 1fr; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; } body.site-public .auth-aside { gap: 1rem; padding: 20px; } body.site-public .auth-aside__body, body.site-public .auth-aside__foot { display: none; } body.site-public .auth-page { margin: 0 calc(var(--np-gutter) * -1); padding-top: 0; } } /* 28. Footer refinements ------------------------------------------------------------ */ @media (min-width: 576px) { /* Balanced newspaper-style columns: groups flow top-to-bottom, no ragged empty rows */ body.site-public .site-footer__directory { display: block; columns: 160px 6; column-gap: 1.75rem; } body.site-public .site-footer__group { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 1.6rem; } } body.site-public .site-footer__groupTitle { color: inherit !important; } body.site-public .site-footer__list a { font-size: 14px; } body.site-public .site-footer__bottom { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .9rem 2rem; } body.site-public .site-footer__meta { flex: 1 1 auto; justify-content: flex-end; align-items: center; } body.site-public .site-footer__copyright { margin-right: auto; } @media (max-width: 767.98px) { body.site-public .site-footer__bottom { flex-direction: column; align-items: flex-start; } body.site-public .site-footer__meta { width: 100%; justify-content: space-between; } body.site-public .site-footer__top { grid-template-columns: 1fr; gap: 1.5rem; } body.site-public .site-footer__follow { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1rem; text-align: left; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .1); } } @media (max-width: 575.98px) { body.site-public .site-footer__group--more { grid-column: 1 / -1; padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .14); } body.site-public .site-footer__directory .site-footer__group--more .site-footer__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem; margin-top: .6rem; } body.site-public .site-footer__group--more .site-footer__groupTitle { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .6 !important; } } /* 29. Home page style components (views/partials/home_components.php) --------------- Shared by Classic, Grid Spotlight, Split (and Magazine's drag behaviour). */ body.site-public .np-home { margin-bottom: .5rem; } body.site-public .np-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--np-muted); margin-bottom: .3rem; } body.site-public .np-meta__section { color: var(--np-accent) !important; text-transform: uppercase; text-decoration: none; } body.site-public .np-meta__section::after { content: "·"; color: var(--np-muted); margin-left: .5rem; } body.site-public .np-meta time { white-space: nowrap; } body.site-public .np-badge { display: inline-block; padding: .22rem .55rem; border-radius: 3px; background: var(--np-accent); color: #fff !important; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; } body.site-public .np-more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .75rem; font-size: 14px; font-weight: 700; color: var(--np-ink) !important; text-decoration: none; } body.site-public .np-more:hover { text-decoration: underline; text-underline-offset: 3px; } body.site-public .np-play { position: absolute; left: 14px; top: 14px; width: 48px; height: 48px; border-radius: 50%; background: var(--np-accent); color: #fff; display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); z-index: 2; } body.site-public .np-play--sm { width: 38px; height: 38px; font-size: 1.25rem; left: 10px; top: 10px; } /* Shared headline styles: clamped so long titles never stretch a frame */ body.site-public .np-row__title, body.site-public .np-card__title, body.site-public .np-lead__title { color: var(--np-ink); font-weight: 700; margin: 0; letter-spacing: -.005em; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } body.site-public .np-row__title a, body.site-public .np-card__title a, body.site-public .np-lead__title a { color: inherit !important; text-decoration: none; } body.site-public .np-row__title a:hover, body.site-public .np-card__title a:hover, body.site-public .np-lead--card .np-lead__title a:hover { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* Rows (Latest / Headlines) */ body.site-public .np-list { display: flex; flex-direction: column; } body.site-public .np-row, body.site-public .np-rank { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: .85rem; align-items: start; padding: .85rem 0; border-bottom: 1px solid var(--np-line); } body.site-public .np-list > :last-child { border-bottom: 0; } body.site-public .np-row--text { grid-template-columns: minmax(0, 1fr); } body.site-public .np-row__media { display: block; border-radius: var(--np-radius-sm); overflow: hidden; background: #e9ecef; } body.site-public .np-row__media img { width: 112px; height: 74px; object-fit: cover; display: block; transition: transform .5s var(--np-ease); } body.site-public .np-row:hover .np-row__media img { transform: scale(1.05); } body.site-public .np-row__title { font-size: 15.5px; line-height: 1.3; -webkit-line-clamp: 3; } body.site-public .np-list--wide .np-row { grid-template-columns: 180px minmax(0, 1fr); gap: 1.1rem; } body.site-public .np-list--wide .np-row__media img { width: 180px; height: 112px; } body.site-public .np-list--wide .np-row__title { font-size: 1.15rem; line-height: 1.25; } /* Ranked rows (Trending) */ body.site-public .np-rank { grid-template-columns: 2.2rem minmax(0, 1fr); } body.site-public .np-rank__n { font-size: 2rem; font-weight: 800; line-height: .95; color: var(--np-accent); font-variant-numeric: tabular-nums; } /* Cards (secondary stories) */ body.site-public .np-card { display: flex; flex-direction: column; height: 100%; background: var(--np-surface); border: 1px solid var(--np-line); border-radius: var(--np-radius); overflow: hidden; transition: box-shadow .2s var(--np-ease); } body.site-public .np-card:hover { box-shadow: var(--np-shadow-md); } body.site-public .np-card__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #e9ecef; } body.site-public .np-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 !important; transition: transform .5s var(--np-ease); } body.site-public .np-card:hover .np-card__media img { transform: scale(1.04); } body.site-public .np-card__body { padding: .9rem 1rem 1.05rem; flex: 1 1 auto; } body.site-public .np-card__title { font-size: 16px; line-height: 1.3; -webkit-line-clamp: 3; } body.site-public .np-card__title--md { font-size: 1.1rem; line-height: 1.25; } body.site-public .np-card__title--lg { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.22; -webkit-line-clamp: 2; } body.site-public .np-col > .np-card { margin-bottom: .25rem; } /* Lead-story carousel */ body.site-public .np-lead { position: relative; } body.site-public .np-lead .carousel-item { transition-duration: 1.1s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } body.site-public .np-lead.carousel-fade .active.carousel-item-start, body.site-public .np-lead.carousel-fade .active.carousel-item-end { transition: opacity 0s 1.1s; } body.site-public .np-lead__card { background: var(--np-surface); border: 1px solid var(--np-line); border-radius: var(--np-radius); overflow: hidden; } body.site-public .np-lead__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1b1e23; } body.site-public .np-lead__media { position: absolute; inset: 0; display: block; } body.site-public .np-lead__media img, body.site-public .np-lead__placeholder { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 !important; background: #e9ecef; -webkit-user-drag: none; user-select: none; pointer-events: none; transition: transform 7s linear; } body.site-public .np-lead .carousel-item.active .np-lead__media img { transform: scale(1.045); } body.site-public .np-lead__body { padding: 1rem 1.25rem 1.25rem; } body.site-public .np-lead__kicker { display: flex; align-items: center; gap: .6rem; font-size: 13px; color: var(--np-muted); margin-bottom: .5rem; } body.site-public .np-lead--card .np-lead__title { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.14; letter-spacing: -.015em; font-weight: 800; -webkit-line-clamp: 2; min-height: calc(2 * 1.14em); } body.site-public .np-lead--card .np-lead__excerpt { color: var(--np-muted); font-size: 1rem; line-height: 1.5; margin: .55rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; } body.site-public .np-lead.is-draggable .np-lead__frame { cursor: grab; touch-action: pan-y; user-select: none; } body.site-public .np-lead.is-dragging .np-lead__frame { cursor: grabbing; } body.site-public .np-lead.is-dragging .carousel-item.active { transition: none !important; } body.site-public .np-dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 7px; } body.site-public .np-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .35); cursor: pointer; transition: width .35s ease, background-color .35s ease; } body.site-public .np-dots button:hover { background: rgba(255, 255, 255, .85); } body.site-public .np-dots button.active { width: 22px; background: #fff; } /* Overlay variant (Grid Spotlight): headline on the photo */ body.site-public .np-lead--overlay .np-lead__card { border: 0; } body.site-public .np-lead--overlay .np-lead__frame { aspect-ratio: auto; height: clamp(340px, 34vw, 500px); } body.site-public .np-lead__overlay { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(18px, 3vw, 40px); padding-right: clamp(18px, 12vw, 200px); color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, 0) 100%); } body.site-public .np-lead--overlay .np-lead__title { color: #fff !important; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; -webkit-line-clamp: 3; margin: .7rem 0 .5rem; max-width: 900px; text-wrap: balance; } body.site-public .np-lead--overlay .np-lead__title a:hover { text-decoration: underline !important; text-underline-offset: 4px; } body.site-public .np-lead__overlay .np-lead__excerpt { color: rgba(255, 255, 255, .88); margin: 0 0 .5rem; max-width: 760px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.site-public .np-lead__time { font-size: 13px; color: rgba(255, 255, 255, .7); font-weight: 600; } body.site-public .np-lead--overlay .np-dots { left: auto; right: clamp(18px, 3vw, 40px); transform: none; bottom: clamp(18px, 3vw, 40px); } /* Equal-height rows on desktop: columns stretch, lists spread to the bottom edge */ @media (min-width: 768px) { body.site-public .np-home--grid > .np-eq:first-of-type .np-col { display: flex; flex-direction: column; } } @media (min-width: 992px) { body.site-public .np-eq { align-items: stretch; } body.site-public .np-eq > .np-col { display: flex; flex-direction: column; } body.site-public .np-eq > .np-col > .np-fill { flex: 1 1 auto; justify-content: space-between; } body.site-public .np-home--classic .np-eq > .np-col + .np-col, body.site-public .np-home--grid .row.mt-1 > .np-col + .np-col, body.site-public .np-split-rail { position: relative; } body.site-public .np-home--classic .np-eq > .col-lg-3.order-3::before, body.site-public .np-home--classic .np-eq > .col-lg-3.order-2::after, body.site-public .np-split-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--np-line); } body.site-public .np-home--classic .np-eq > .col-lg-3.order-3::before, body.site-public .np-split-rail::before { left: 0; } body.site-public .np-home--classic .np-eq > .col-lg-3.order-2::after { right: 0; } } /* Phones */ @media (max-width: 575.98px) { body.site-public .np-lead__card { border-radius: 0; border-left: 0; border-right: 0; margin: 0 calc(var(--np-gutter) * -1); } body.site-public .np-lead--overlay .np-lead__frame { height: auto; aspect-ratio: 4 / 5; } body.site-public .np-lead--overlay .np-lead__overlay { padding-right: 18px; padding-bottom: 44px; } body.site-public .np-lead--overlay .np-dots { left: 50%; right: auto; transform: translateX(-50%); bottom: 14px; } body.site-public .np-lead--card .np-lead__title { -webkit-line-clamp: 3; min-height: calc(3 * 1.14em); } body.site-public .np-list--wide .np-row { grid-template-columns: 112px minmax(0, 1fr); gap: .85rem; } body.site-public .np-list--wide .np-row__media img { width: 112px; height: 74px; } body.site-public .np-list--wide .np-row__title { font-size: 15.5px; } } /* A card sharing its column with other blocks keeps its natural height; a card alone in a column fills it. */ body.site-public .np-col > .np-card:not(:only-child) { height: auto; flex: 0 0 auto; } /* 30. Cookie consent + alert prompt ------------------------------------------------ */ body.site-public .cookie-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1090; padding: 0 0 16px; transform: translateY(110%); transition: transform .25s ease; } body.site-public .cookie-consent.is-open { transform: none; } body.site-public .cookie-consent__box { background: #111418; color: #fff; border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; } body.site-public .cookie-consent__text { font-size: .95rem; line-height: 1.55; color: rgba(255, 255, 255, .88); } body.site-public .cookie-consent__text a { color: #fff; text-decoration: underline; } body.site-public .cookie-consent__prefs { grid-column: 1 / -1; display: grid; gap: 10px; padding: 12px 0 4px; border-top: 1px solid rgba(255, 255, 255, .14); } body.site-public .cookie-consent__opt { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .82); cursor: pointer; } body.site-public .cookie-consent__opt input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: #fff; flex: 0 0 auto; } body.site-public .cookie-consent__opt strong { color: #fff; } body.site-public .cookie-consent__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } body.site-public .cookie-consent__actions .btn { font-weight: 700; border-radius: 8px; padding: .5rem 1rem; white-space: nowrap; } body.site-public .cookie-consent__actions .btn-link { text-decoration: underline; text-underline-offset: 3px; opacity: .9; } body.site-public .cookie-consent__prefs:not([hidden]) ~ .cookie-consent__actions { grid-column: 1 / -1; } @media (max-width: 767.98px) { body.site-public .cookie-consent { padding: 0 0 10px; } body.site-public .cookie-consent__box { grid-template-columns: 1fr; padding: 16px; } body.site-public .cookie-consent__actions { justify-content: stretch; } body.site-public .cookie-consent__actions .btn:not(.btn-link) { flex: 1 1 auto; } } body.site-public .push-prompt { border-radius: 12px; padding: 16px; max-width: 340px; } body.site-public .push-prompt__btn { border-radius: 8px; } body.site-public .push-toast { position: fixed; left: 50%; bottom: 20px; z-index: 1095; transform: translate(-50%, 20px); opacity: 0; transition: opacity .25s, transform .25s; background: #111418; color: #fff; padding: 12px 18px; border-radius: 10px; font-size: .92rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); max-width: calc(100vw - 32px); } body.site-public .push-toast.is-show { opacity: 1; transform: translate(-50%, 0); }