/* * Prohori — core stylesheet. * * Editorial minimalism: ink on paper, one accent per edition, no decoration * that costs a frame. Every colour and size below is a custom property so the * Customizer can override it from a single inline block in . * * 1. Tokens * 2. Colour modes * 3. Reset * 4. Typography * 5. Layout primitives * 6. Header * 7. Navigation * 8. Ticker * 9. Cards * 10. Front-page sections * 11. Archives * 12. Forms and buttons * 13. Widgets * 14. Footer * 15. Core blocks and native controls * 16. Motion and print safeguards */ /* ------------------------------------------------------------------ * * 1. Tokens * ------------------------------------------------------------------ */ :root { /* Ink and surface */ --ink: #111418; --ink-muted: #52606d; --ink-faint: #7b8794; --surface: #ffffff; --surface-2: #f2f4f6; --bg: #f7f8f9; --border: #e3e6ea; --border-strong: #cbd2d9; /* Editions */ --accent-bn: #c8102e; --accent-en: #14284b; --accent: var(--accent-bn); --accent-ink: #ffffff; --breaking: #c8102e; /* Type */ --font-heading: Georgia, "Times New Roman", serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --fs-base: 1.0625rem; /* 17px */ --lh-base: 1.6; --lh-tight: 1.22; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 2.875rem; /* Space */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; /* Structure */ --wrap: 1200px; --gutter: 1.5rem; --radius: 4px; --measure: 68ch; /* Depth — used sparingly; this is a newspaper, not a dashboard */ --shadow: 0 1px 2px rgba(17, 20, 24, 0.06), 0 4px 12px rgba(17, 20, 24, 0.05); /* Z-scale */ --z-nav: 30; --z-header: 40; --z-overlay: 50; --speed: 200ms; /* Native widgets the theme cannot style — scrollbars, date pickers, checkboxes, the browser's own form chrome — follow this, not our CSS. */ color-scheme: light; } /* Per-edition accent and font metrics. Bengali needs more leading and a slightly larger base size to stay comfortable — matras sit above the line. */ .lang-en { --accent: var(--accent-en); } /* Bengali is a taller script with matras above and below the line, so it needs more leading than Latin and a higher floor on the small sizes — at 12px the diacritics collapse into the letterform and the text stops being legible. Every small step is raised, not just the body size. */ .lang-bn { --accent: var(--accent-bn); --fs-base: 1.125rem; --lh-base: 1.85; --lh-tight: 1.45; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-md: 1.0625rem; --fs-lg: 1.1875rem; --fs-xl: 1.4375rem; --fs-2xl: 1.8125rem; --fs-3xl: 2.3125rem; --fs-4xl: 2.9375rem; --font-heading: "Anek Bangla", "Noto Sans Bengali", "Hind Siliguri", system-ui, sans-serif; --font-body: "Noto Sans Bengali", "Hind Siliguri", system-ui, sans-serif; } /* Bengali headlines do not need the negative tracking that tightens Latin display type — it pulls the conjuncts into each other. */ .lang-bn h1, .lang-bn h2, .lang-bn h3, .lang-bn h4 { letter-spacing: 0; } .lang-en { --font-heading: "Newsreader", Georgia, "Times New Roman", serif; --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; } /* ------------------------------------------------------------------ * * 2. Colour modes * ------------------------------------------------------------------ */ [data-theme="dark"] { color-scheme: dark; --ink: #e9edf1; --ink-muted: #a3adb8; --ink-faint: #7d8894; --surface: #14171b; --surface-2: #1c2026; --bg: #0e1114; --border: #262b31; --border-strong: #3a4048; /* Lifted versions of the light-mode accents — a colour picked against white does not survive on near-black. These are the exact output of prohori_dark_variant() for the defaults above, so a customised accent and a default one are treated identically. */ --accent-bn: #f14c66; --accent-en: #668fd6; --breaking: #f14c66; --accent-ink: #0e1114; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3); } /* The page background is owned by --bg in both modes. This restates it at a specificity core's custom-background block cannot reach, so a leftover setting or a plugin that paints the body cannot strand light text on a light page. Light mode is left to the plain body rule so a deliberate background choice still works there. */ html[data-theme="dark"] body { background-color: var(--bg); } /* Per-category accents (--eyebrow, --item-accent) are written inline by PHP, and an inline custom property outranks every selector — so the property itself can never be corrected here. prohori_accent_vars() writes a lifted sibling alongside it and these rules read that instead. The fallback is the edition accent, which is already mode-aware. */ [data-theme="dark"] .c-eyebrow, [data-theme="dark"] .c-section-head__more { color: var(--eyebrow-dark, var(--accent)); } [data-theme="dark"] .c-section-head, [data-theme="dark"] .c-archive-head { border-bottom-color: var(--eyebrow-dark, var(--accent)); } [data-theme="dark"] .site-nav__list > li > .menu-link:hover, [data-theme="dark"] .site-nav__list > li.current-menu-item > .menu-link { color: var(--item-accent-dark, var(--accent)); border-bottom-color: var(--item-accent-dark, var(--accent)); } /* Rank numerals are drawn in the border colour so they read as furniture rather than text. On near-black that lands under 2:1 and disappears entirely — the faint ink tone is the same intent, one step brighter. */ [data-theme="dark"] .w-posts__rank { color: var(--ink-faint); } /* ------------------------------------------------------------------ * * 3. Reset * ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video, iframe { max-width: 100%; height: auto; display: block; } figure { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.01em; text-wrap: balance; } p, ul, ol { margin: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--accent); color: var(--accent-ink); } /* ------------------------------------------------------------------ * * 4. Typography scale * ------------------------------------------------------------------ */ .h1, h1 { font-size: var(--fs-3xl); } .h2, h2 { font-size: var(--fs-2xl); } .h3, h3 { font-size: var(--fs-xl); } @media (min-width: 64rem) { h1 { font-size: var(--fs-4xl); } } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; z-index: var(--z-overlay); padding: var(--s3) var(--s4); background: var(--accent); color: var(--accent-ink); font-weight: 600; } .skip-link:focus { left: var(--s4); top: var(--s4); } /* ------------------------------------------------------------------ * * 5. Layout primitives * ------------------------------------------------------------------ */ .site { display: flex; flex-direction: column; min-height: 100vh; } .site-main { flex: 1; padding-bottom: var(--s8); } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } /* ------------------------------------------------------------------ * * 6. Header * ------------------------------------------------------------------ */ .site-topbar { background: var(--surface); border-bottom: 1px solid var(--border); font-size: var(--fs-xs); color: var(--ink-muted); } .site-topbar__inner { display: flex; align-items: center; gap: var(--s4); min-height: 40px; } .site-topbar__date { flex: none; white-space: nowrap; } .site-topbar__socialwrap { margin-inline-start: auto; } /* The newest headline sits between the date and the social row and truncates rather than wrapping, so the bar is always exactly one line tall. */ .site-topbar__latest { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex: 1; padding-inline-start: var(--s4); border-inline-start: 1px solid var(--border); } .site-topbar__latest-label { flex: none; padding: 1px var(--s2); background: var(--accent); color: var(--accent-ink); border-radius: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.6; } .lang-bn .site-topbar__latest-label { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); } .site-topbar__latest-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 500; } .site-topbar__latest-link:hover { color: var(--accent); text-decoration: underline; } @media (max-width: 47.99rem) { .site-topbar__latest { padding-inline-start: var(--s3); } .site-topbar__socialwrap { display: none; } } @media (max-width: 30rem) { .site-topbar__date { display: none; } .site-topbar__latest { border-inline-start: 0; padding-inline-start: 0; } } .site-topbar__social, .site-footer__menu { display: flex; list-style: none; gap: var(--s4); margin: 0; padding: 0; } .site-header { background: var(--surface); border-bottom: 1px solid var(--border); z-index: var(--z-header); } .has-sticky-header .site-header { position: sticky; top: 0; } .site-header__inner { display: flex; align-items: center; gap: var(--s4); min-height: 68px; } .header-center .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; } .header-center .c-brand { justify-self: center; } .header-center .site-header__actions { justify-self: end; } .c-brand { display: inline-flex; align-items: center; margin-inline-end: auto; } .header-center .c-brand { margin-inline-end: 0; } .c-brand__logo { max-height: var(--logo-h, 46px); width: auto; object-fit: contain; } /* Both marks are in the markup only when a reversed logo is configured and the mode can flip in the browser; see prohori_branding(). */ .c-brand__logo--dark { display: none; } [data-theme="dark"] .c-brand__logo--light { display: none; } [data-theme="dark"] .c-brand__logo--dark { display: block; } @media (max-width: 47.99rem) { /* Never let a wide masthead squeeze the burger and the switcher off the row. Height comes down a step, width is capped hard. */ .c-brand__logo { max-height: calc(var(--logo-h, 46px) * 0.8); max-width: 46vw; } } .c-brand__text { font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--accent); } .site-header__actions { display: flex; align-items: center; gap: var(--s2); } .site-header__burger, .site-header__search, .site-header__mode { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius); color: var(--ink); transition: background var(--speed); } .site-header__burger:hover, .site-header__search:hover, .site-header__mode:hover { background: var(--surface-2); } .site-header__burger { display: none; } .site-header__mode .prohori-icon--moon { display: none; } [data-theme="dark"] .site-header__mode .prohori-icon--sun { display: none; } [data-theme="dark"] .site-header__mode .prohori-icon--moon { display: block; } .site-search { border-top: 1px solid var(--border); padding-block: var(--s4); background: var(--surface); } .site-search[hidden] { display: none; } /* Language switcher */ .c-langswitch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; } .c-langswitch__item { display: inline-flex; align-items: center; min-height: 34px; padding-inline: var(--s3); font-size: var(--fs-xs); font-weight: 600; font-family: var(--font-body); color: var(--ink-muted); transition: background var(--speed), color var(--speed); } .c-langswitch__item + .c-langswitch__item { border-inline-start: 1px solid var(--border-strong); } .c-langswitch__item:hover { background: var(--surface-2); color: var(--ink); } .c-langswitch__item.is-current { background: var(--accent); color: var(--accent-ink); } /* ------------------------------------------------------------------ * * 7. Navigation * ------------------------------------------------------------------ */ .site-nav { background: var(--surface); border-bottom: 2px solid var(--ink); z-index: var(--z-nav); } .site-nav__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .site-nav__list > li { position: relative; } .site-nav__list > li > .menu-link { display: inline-flex; align-items: center; min-height: 46px; padding-inline: var(--s3); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.01em; color: var(--ink); border-bottom: 3px solid transparent; transition: color var(--speed), border-color var(--speed); } .site-nav__list > li > .menu-link:hover, .site-nav__list > li.current-menu-item > .menu-link { color: var(--item-accent, var(--accent)); border-bottom-color: var(--item-accent, var(--accent)); } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 46px; color: var(--ink-muted); } .menu-toggle[aria-expanded="true"] .prohori-icon { transform: rotate(180deg); } .sub-menu { position: absolute; top: 100%; inset-inline-start: 0; min-width: 240px; list-style: none; margin: 0; padding: var(--s2) 0; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity 150ms ease; z-index: var(--z-nav); } .sub-menu > li { position: relative; } /* A submenu item with children is one compact row: the label remains a real link while the adjacent button opens its nested flyout. */ .sub-menu > .has-dropdown { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; } .sub-menu > .has-dropdown > .menu-link { min-width: 0; padding-inline-end: var(--s2); } .sub-menu > .has-dropdown > .menu-toggle { width: 40px; height: 40px; } /* Third-level menus open beside their parent instead of painting over the first dropdown. JavaScript flips the flyout inward near a viewport edge. */ .sub-menu .sub-menu { top: calc(-1 * var(--s2) - 1px); inset-inline-start: calc(100% - 1px); } .site-nav__list > .opens-inward > .sub-menu { inset-inline-start: auto; inset-inline-end: 0; } .sub-menu .opens-inward > .sub-menu { inset-inline-start: auto; inset-inline-end: calc(100% - 1px); } .has-dropdown:hover > .sub-menu, .has-dropdown:focus-within > .sub-menu, .menu-toggle[aria-expanded="true"] + .sub-menu, .has-dropdown.is-open > .sub-menu { opacity: 1; visibility: visible; } .sub-menu .menu-link { display: flex; align-items: center; padding: var(--s2) var(--s4); font-size: var(--fs-sm); min-height: 40px; } .sub-menu .menu-link:hover { background: var(--surface-2); color: var(--accent); } .sub-menu .menu-toggle .prohori-icon { transform: rotate(-90deg); } .sub-menu .opens-inward > .menu-toggle .prohori-icon { transform: rotate(90deg); } .site-nav__mobile-extras { display: none; padding: var(--s4) 0; } /* ------------------------------------------------------------------ * * 8. Ticker * ------------------------------------------------------------------ */ .c-ticker { background: var(--ink); color: var(--surface); overflow: hidden; } [data-theme="dark"] .c-ticker { background: var(--surface-2); color: var(--ink); } .c-ticker__inner { display: flex; align-items: center; gap: var(--s4); min-height: 44px; } .c-ticker__label { flex: none; padding: var(--s1) var(--s3); background: var(--breaking); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius); } .lang-bn .c-ticker__label { text-transform: none; letter-spacing: 0; } .c-ticker__viewport { flex: 1; display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); } /* Two identical tracks sit side by side; both translate by their own width, so the second one covers the gap the first leaves and the loop has no seam. The clone is added by app.js and hidden from assistive technology. */ .c-ticker__track { flex: none; display: flex; align-items: center; gap: var(--s7); padding-inline-end: var(--s7); list-style: none; margin: 0; white-space: nowrap; animation: prohori-ticker var(--ticker-duration, 40s) linear infinite; will-change: transform; } .c-ticker:hover .c-ticker__track, .c-ticker__track:focus-within { animation-play-state: paused; } .c-ticker__item a { font-size: var(--fs-sm); font-weight: 500; } .c-ticker__item a:hover { text-decoration: underline; } .c-ticker__close { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.7; } .c-ticker__close:hover { opacity: 1; } @keyframes prohori-ticker { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } } /* ------------------------------------------------------------------ * * 9. Cards * ------------------------------------------------------------------ */ .c-thumb { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); border-radius: var(--radius); } .c-thumb__img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--speed); } .c-card__media:hover .c-thumb__img { opacity: 0.92; } .c-thumb--empty::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--bg) 10px, var(--bg) 20px); } .c-card { display: flex; flex-direction: column; gap: var(--s3); } .c-card__body { display: flex; flex-direction: column; gap: var(--s2); } .c-eyebrow { align-self: flex-start; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--eyebrow, var(--accent)); } .lang-bn .c-eyebrow { text-transform: none; letter-spacing: 0.02em; } .c-eyebrow:hover { text-decoration: underline; } .c-card__title { font-size: var(--fs-lg); font-weight: 700; } .c-card__title a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--speed); } .c-card__title a:hover { background-size: 100% 1px; } .c-card__title--lead { font-size: var(--fs-2xl); } @media (min-width: 48rem) { .c-card__title--lead { font-size: var(--fs-3xl); } } .c-card__dek { color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.6; } .lang-bn .c-card__dek { line-height: 1.8; } .c-byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); font-size: var(--fs-xs); color: var(--ink-faint); } .c-byline__author { font-weight: 600; color: var(--ink-muted); } .c-byline__read { display: inline-flex; align-items: center; gap: var(--s1); } /* Compact row */ .c-row { display: flex; gap: var(--s3); align-items: flex-start; padding-block: var(--s3); border-bottom: 1px solid var(--border); } .c-row:last-child { border-bottom: 0; } .c-row__media { flex: none; width: 92px; } .c-row__title { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; } .lang-bn .c-row__title { line-height: 1.6; } .c-row__title a:hover { color: var(--accent); } .c-row__date { display: block; margin-top: var(--s1); font-size: var(--fs-xs); color: var(--ink-faint); } /* Section heading */ .c-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); padding-bottom: var(--s2); border-bottom: 2px solid var(--eyebrow, var(--accent)); } .c-section-head__title { font-size: var(--fs-xl); color: var(--ink); } .c-section-head__more { display: inline-flex; align-items: center; gap: var(--s1); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--eyebrow, var(--accent)); } .c-section-head__more:hover { text-decoration: underline; } /* ------------------------------------------------------------------ * * 10. Front-page sections * ------------------------------------------------------------------ */ .s-lead, .s-strip, .s-picks, .s-latest { padding-block: var(--s6); } .s-lead { padding-top: var(--s5); } .s-lead__grid { display: grid; gap: var(--s5); } .s-lead__secondary { display: grid; gap: var(--s5); } .s-lead__list { padding: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .s-lead__list-title { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: var(--s2); font-family: var(--font-body); } .lang-bn .s-lead__list-title { text-transform: none; letter-spacing: 0; } @media (min-width: 48rem) { .s-lead__secondary { grid-template-columns: 1fr 1fr; } } @media (min-width: 64rem) { .s-lead__grid { grid-template-columns: 2fr 1fr; grid-template-areas: "hero list" "secondary list"; } .s-lead__hero { grid-area: hero; } .s-lead__secondary { grid-area: secondary; } .s-lead__list { grid-area: list; align-self: start; position: sticky; top: 90px; } } .s-strip__grid, .s-picks__grid, .s-latest__grid { display: grid; gap: var(--s5); } @media (min-width: 48rem) { .s-strip__grid { grid-template-columns: 1.2fr 1fr; } .s-picks__grid { grid-template-columns: repeat(2, 1fr); } .s-latest__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .s-picks__grid { grid-template-columns: repeat(4, 1fr); } .s-latest__grid { grid-template-columns: repeat(3, 1fr); } } /* Grid shape: two lead stories, a row of smaller ones under them. */ .s-strip__lead, .s-strip__more { display: grid; gap: var(--s5); } .s-strip__lead { margin-bottom: var(--s5); } @media (min-width: 48rem) { .s-strip__lead { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-strip__more { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 64rem) { .s-strip__more { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Column shape: several categories abreast, the way a broadsheet fits four sections onto one screen. --cols carries how many were actually drawn, so a row of two never stretches to fill four tracks. */ .s-cols__grid { display: grid; gap: var(--s5); } .s-cols__rest { margin-top: var(--s3); } @media (min-width: 48rem) { .s-cols__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .s-cols__grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--s6); } /* Columns are narrow — a thumbnail beside the headline leaves nothing for the headline. */ .s-cols__col .c-row__media { width: 72px; } } .s-latest__layout { display: grid; gap: var(--s6); } @media (min-width: 64rem) { .s-latest.has-aside .s-latest__layout { grid-template-columns: minmax(0, 1fr) 320px; } .s-latest.has-aside .s-latest__grid { grid-template-columns: repeat(2, 1fr); } } .s-latest__more { margin-top: var(--s5); text-align: center; } /* ------------------------------------------------------------------ * * 11. Archives * ------------------------------------------------------------------ */ .l-archive, .l-single, .l-page, .l-404 { padding-block: var(--s5) var(--s7); } .l-archive { display: grid; gap: var(--s6); } @media (min-width: 64rem) { .l-archive.has-aside { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s7); } } /* The article always has a rail — it is built from content, not widgets, so it is never empty. Below 1024px it stacks under the story rather than squeezing the reading measure. */ .l-single { display: grid; gap: var(--s7); align-items: start; } @media (min-width: 64rem) { .l-single { grid-template-columns: minmax(0, 1fr) 336px; gap: var(--s8); } } @media (min-width: 90rem) { .l-single { grid-template-columns: minmax(0, 1fr) 360px; } } .l-front-note { padding-block: var(--s6); border-top: 1px solid var(--border); } .c-archive-head { margin-bottom: var(--s5); padding-bottom: var(--s4); border-bottom: 2px solid var(--eyebrow, var(--accent)); } .c-archive-head--author { display: flex; align-items: center; gap: var(--s4); } .c-archive-head__avatar { border-radius: 50%; } .c-archive-head__eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } .c-archive-head__desc, .c-archive-head__count { margin-top: var(--s2); color: var(--ink-muted); font-size: var(--fs-sm); max-width: var(--measure); } .l-archive__list { display: grid; gap: var(--s6); } @media (min-width: 40rem) { .l-archive__list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .l-archive__list { grid-template-columns: repeat(3, 1fr); } .l-archive.has-aside .l-archive__list { grid-template-columns: repeat(2, 1fr); } } /* List layout override */ .archive-list .l-archive__list, .l-archive__list--rows { display: block; } .archive-list .l-archive__list .c-card, .l-archive__list--rows .c-row { border-bottom: 1px solid var(--border); padding-bottom: var(--s4); margin-bottom: var(--s4); } @media (min-width: 40rem) { .archive-list .l-archive__list .c-card { flex-direction: row; align-items: flex-start; } .archive-list .l-archive__list .c-card__media { flex: none; width: 280px; } } /* Breadcrumbs */ .c-breadcrumbs { padding-top: var(--s4); font-size: var(--fs-xs); color: var(--ink-faint); } .c-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; } .c-breadcrumbs li + li::before { content: "/"; margin-inline-end: var(--s2); color: var(--border-strong); } .c-breadcrumbs a:hover { color: var(--accent); text-decoration: underline; } /* Pagination */ .c-pagination { margin-top: var(--s7); } .c-pagination ul { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; justify-content: center; } .c-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: var(--fs-sm); font-weight: 600; transition: background var(--speed), color var(--speed), border-color var(--speed); } .c-pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); } .c-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* Empty state and 404 */ .c-empty, .l-404 { max-width: 640px; margin-inline: auto; text-align: center; padding-block: var(--s7); } .c-empty__text, .l-404__text { margin: var(--s3) 0 var(--s5); color: var(--ink-muted); } .l-404__code { font-family: var(--font-heading); font-size: 5rem; font-weight: 700; line-height: 1; color: var(--accent); } .l-404__trending { margin-top: var(--s8); text-align: start; } .l-404__grid { display: grid; gap: var(--s5); } @media (min-width: 40rem) { .l-404__grid { grid-template-columns: repeat(2, 1fr); } } /* ------------------------------------------------------------------ * * 12. Forms and buttons * ------------------------------------------------------------------ */ .c-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: var(--s5); background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; transition: opacity var(--speed); } .c-btn:hover { opacity: 0.88; } .c-searchform { display: flex; gap: var(--s2); max-width: 520px; margin-inline: auto; } .c-searchform__input { flex: 1; min-height: 44px; padding: 0 var(--s4); font: inherit; font-size: var(--fs-md); color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); } .c-searchform__input::placeholder { color: var(--ink-faint); } .c-searchform__submit { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); } /* ------------------------------------------------------------------ * * 13. Widgets * ------------------------------------------------------------------ */ .l-aside__inner { position: sticky; top: 90px; display: flex; flex-direction: column; gap: var(--s5); } .widget { padding: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .widget-title, .widget .widgettitle { margin-bottom: var(--s3); padding-bottom: var(--s2); border-bottom: 2px solid var(--accent); font-size: var(--fs-md); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.02em; } .widget ul { list-style: none; margin: 0; padding: 0; } .widget li + li { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--border); } .widget a:hover { color: var(--accent); } .w-social { display: flex; flex-wrap: wrap; gap: var(--s2); } .w-social__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink-muted); transition: background var(--speed), color var(--speed); } .w-social__link:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .w-posts__item { display: flex; gap: var(--s3); align-items: flex-start; } .w-posts__media { flex: none; width: 76px; } .w-posts__title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; } .w-posts__rank { flex: none; width: 28px; font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 700; color: var(--border-strong); line-height: 1; } /* ------------------------------------------------------------------ * * 14. Footer * ------------------------------------------------------------------ */ /* The footer runs on its own dark palette in both colour modes — a masthead block should read the same at night as it does in the morning. */ .site-footer { --footer-bg: #14181d; --footer-ink: #e7ebef; --footer-muted: #99a3ad; --footer-rule: #2b3138; background: var(--footer-bg); color: var(--footer-ink); margin-top: var(--s8); } .site-footer a { color: inherit; } .site-footer__band + .site-footer__band { border-top: 1px solid var(--footer-rule); } .site-footer__band--widgets { padding-block: var(--s7); } .site-footer__widgets { display: grid; gap: var(--s6); } @media (min-width: 40rem) { .site-footer__widgets { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .site-footer__widgets { grid-template-columns: repeat(var(--footer-cols, 4), 1fr); } } .site-footer .widget { padding: 0; background: none; border: 0; color: var(--footer-muted); } .site-footer .widget-title { color: var(--footer-ink); border-bottom-color: var(--accent); } .site-footer .widget li + li { border-top-color: var(--footer-rule); } /* --- brand band ---------------------------------------------------- */ .site-footer__band--brand { padding-block: var(--s7); text-align: center; } /* The minimal footer is one quiet band, so it needs less air above and below than the layered version and no divider fighting the legal line. */ .site-footer--minimal { margin-top: var(--s7); } .site-footer--minimal .site-footer__band--brand { padding-block: var(--s6); } .site-footer--minimal .site-footer__band--legal { border-top-color: transparent; padding-top: 0; padding-bottom: var(--s6); } .site-footer--minimal .site-footer__legal { padding-top: var(--s5); border-top: 1px solid var(--footer-rule); } .site-footer__brand { display: flex; flex-direction: column; align-items: center; gap: var(--s2); } .site-footer__brand .c-brand__text { color: var(--footer-ink); } .site-footer__brand .c-brand__logo { max-height: calc(var(--logo-h, 46px) * 1.2); max-width: min(320px, 70vw); } .site-footer__tagline { max-width: 52ch; font-size: var(--fs-sm); color: var(--footer-muted); } .site-footer__sections { margin-top: var(--s5); } .site-footer__sections-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s2) 0; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); font-weight: 600; } .site-footer__sections-list li { display: flex; align-items: center; } .site-footer__sections-list li + li::before { content: ""; width: 1px; height: 14px; margin-inline: var(--s4); background: var(--footer-rule); } .site-footer__sections-list a { display: inline-flex; align-items: center; min-height: 34px; transition: color var(--speed); } .site-footer__sections-list a:hover { color: var(--accent-bn); } .lang-en .site-footer__sections-list a:hover { color: #7fa5e8; } /* --- masthead band -------------------------------------------------- */ .site-footer__band--masthead { padding-block: var(--s7); } .site-footer__masthead { display: grid; gap: var(--s6); } @media (min-width: 48rem) { .site-footer__masthead { grid-template-columns: repeat(2, 1fr); } .site-footer__block--editorial { grid-column: 1 / -1; order: 1; } } @media (min-width: 64rem) { .site-footer__masthead { grid-template-columns: repeat(3, 1fr); } .site-footer__block--editorial { grid-column: auto; order: 0; text-align: center; } .site-footer__masthead > :last-child { text-align: end; } .site-footer__masthead > :last-child .site-footer__block-title::after { margin-inline-start: auto; } .site-footer__block--editorial .site-footer__block-title::after { margin-inline: auto; } } .site-footer__block-title { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.02em; margin-bottom: var(--s4); } .site-footer__block-title::after { content: ""; display: block; width: 56px; height: 2px; margin-top: var(--s2); background: var(--accent-bn); } .site-footer__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--fs-sm); color: var(--footer-muted); line-height: 1.6; } .site-footer__lines a:hover { text-decoration: underline; } .site-footer__people { display: grid; gap: var(--s4); margin: 0; } .site-footer__person dt { font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--footer-muted); } .site-footer__person dd { margin: 2px 0 0; font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 600; color: var(--footer-ink); } .site-footer__social-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); list-style: none; margin: var(--s5) 0 0; padding: 0; font-size: var(--fs-sm); } .site-footer__social-list a { display: inline-flex; align-items: center; min-height: 34px; color: var(--footer-muted); } .site-footer__social-list a:hover { color: var(--footer-ink); text-decoration: underline; } /* --- legal band ----------------------------------------------------- */ .site-footer__band--legal { padding-block: var(--s5); } .site-footer__legal { display: grid; gap: var(--s3); align-items: center; font-size: var(--fs-xs); color: var(--footer-muted); text-align: center; } @media (min-width: 64rem) { .site-footer__legal { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s5); text-align: start; } .site-footer__note { text-align: center; } .site-footer__end { justify-self: end; } } .site-footer__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3); } .site-footer__credit { color: var(--footer-muted); } .site-footer .c-langswitch { border-color: var(--footer-rule); } .site-footer .c-langswitch__item { color: var(--footer-muted); } .site-footer .c-langswitch__item + .c-langswitch__item { border-inline-start-color: var(--footer-rule); } .site-footer .c-langswitch__item:hover { background: var(--footer-rule); color: var(--footer-ink); } /* The muted footer rule above is more specific than .is-current, so the selected edition was drawing muted grey on the accent chip in both modes. */ .site-footer .c-langswitch__item.is-current { background: var(--accent); color: var(--accent-ink); } /* ------------------------------------------------------------------ * * 15. Core blocks and native controls * * Everything below belongs to WordPress, not to the theme: block markup an * editor can drop into a post or a widget area, and the form controls the * browser draws. Core ships these with fixed light-mode colours — white * fields, #32373c buttons, hairlines in currentColor — which look correct on * paper and break on near-black. Restating them in tokens is the only fix * that holds everywhere at once; patching each widget area would not. * * Values are chosen to land where core already sits in light mode, so this * section changes almost nothing there. * ------------------------------------------------------------------ */ input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], select, textarea { color: var(--ink); background-color: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); } ::placeholder { color: var(--ink-faint); opacity: 1; } /* Some browsers do not inherit into the popup list. */ select option { color: var(--ink); background-color: var(--surface); } /* Core's button colour is a near-black slab, so --ink keeps the same weight in light mode and inverts correctly in dark. */ .wp-element-button, .wp-block-button__link, .wp-block-search__button, .wp-block-file__button { background-color: var(--ink); color: var(--surface); border: 0; border-radius: var(--radius); cursor: pointer; } .wp-element-button:hover, .wp-block-button__link:hover, .wp-block-search__button:hover, .wp-block-file__button:hover { opacity: 0.88; } .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent; color: var(--ink); border: 2px solid currentColor; } .wp-block-search__input { color: var(--ink); background-color: var(--surface); border: 1px solid var(--border-strong); } /* Captions and secondary metadata */ figcaption, .wp-element-caption, .wp-block-image figcaption, .wp-block-embed figcaption, .wp-block-table figcaption, .wp-block-latest-posts__post-date, .wp-block-latest-posts__post-author, .wp-block-latest-comments__comment-date, .wp-block-latest-comments__comment-meta, .wp-block-post-date, .wp-block-calendar caption { color: var(--ink-muted); } /* Rules and hairlines */ hr, .wp-block-separator { border: 0; border-top: 1px solid var(--border); background: none; } .wp-block-separator.is-style-dots { border-top: 0; color: var(--ink-faint); } /* Tables, in a post or in a widget */ .wp-block-table table, .wp-block-calendar table { width: 100%; border-collapse: collapse; } .wp-block-table td, .wp-block-table th, .wp-block-calendar td, .wp-block-calendar th { border: 1px solid var(--border); padding: var(--s2) var(--s3); } .wp-block-table th, .wp-block-calendar th { background: var(--surface-2); } .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--surface-2); } .wp-block-table.is-style-stripes { border-bottom-color: var(--border); } .wp-block-calendar #today { background: var(--accent); color: var(--accent-ink); font-weight: 700; } .wp-block-calendar .wp-calendar-nav { color: var(--ink-muted); } /* Quotes and long-form furniture */ .wp-block-quote { border-inline-start: 3px solid var(--accent); color: var(--ink); } .wp-block-pullquote { border-block-color: var(--border-strong); color: var(--ink); } .wp-block-quote cite, .wp-block-pullquote cite, .wp-block-quote footer { color: var(--ink-muted); } .wp-block-code, .wp-block-preformatted, .wp-block-verse { color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); overflow-x: auto; } code, kbd, samp { color: var(--ink); } /* List-shaped blocks used as widgets */ .wp-block-latest-comments__comment { border-bottom: 1px solid var(--border); } .wp-block-latest-comments__comment-excerpt p { color: var(--ink-muted); } .wp-block-tag-cloud a { display: inline-block; padding: 2px var(--s2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink-muted); transition: border-color var(--speed), color var(--speed); } .wp-block-tag-cloud a:hover { border-color: var(--accent); color: var(--accent); } /* An editor-picked background wins over the token, so pair it with the editor-picked text colour and let the theme ink apply otherwise. */ .wp-block-group.has-background, .wp-block-columns.has-background { border-radius: var(--radius); } /* ------------------------------------------------------------------ * * 16. Advertising slots * * Every slot reserves its space at a declared ratio before anything loads, * so a creative arriving late cannot push the page around. A slot that is * switched off in Prohori → Advertisements prints no markup at all, so none * of this applies to it. * ------------------------------------------------------------------ */ .c-promo { display: block; } .c-promo__inner { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: var(--promo-ratio, 300 / 250); overflow: hidden; } /* The link has to be a full-size flex box of its own, not just another image wrapper. A percentage max-height only resolves against a definite height, and an sized by its own content has none — so a linked creative ignored the slot's height entirely and got cropped by the overflow rule, while the same creative without a link letterboxed correctly. */ .c-promo__link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .c-promo__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin-inline: auto; object-fit: contain; } .c-promo__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: repeating-linear-gradient( -45deg, var(--surface-2), var(--surface-2) 12px, var(--bg) 12px, var(--bg) 24px ); border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .lang-bn .c-promo__placeholder { text-transform: none; letter-spacing: 0.02em; } /* A full-width band: header, homepage and footer placements sit in their own strip rather than inside a section, so they need the page gutter. */ .c-promo--band { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; margin-block: var(--s6); } .c-promo--band .c-promo__inner { max-height: 280px; } .c-promo--header { margin-top: var(--s5); } /* Inside a list of stories the ad takes the place of one card, so it inherits the grid's own spacing instead of adding its own. */ .c-promo--inlist { grid-column: 1 / -1; margin-block: var(--s2); } .c-promo--category_top { margin-bottom: var(--s5); } .c-promo--sidebar_top, .c-promo--sidebar_mid { margin-bottom: var(--s5); } /* ------------------------------------------------------------------ * * 17. Responsive navigation and motion safeguards * ------------------------------------------------------------------ */ @media (max-width: 63.99rem) { .site-header__burger { display: inline-flex; } .c-langswitch--header { display: none; } .site-nav { display: none; border-bottom: 1px solid var(--border); } .site-nav.is-open { display: block; } .site-nav__list { flex-direction: column; } .site-nav__list > li { border-bottom: 1px solid var(--border); } .site-nav__list > li > .menu-link { width: 100%; min-height: 48px; border-bottom: 0; } .menu-toggle, .sub-menu > .has-dropdown > .menu-toggle { width: 48px; height: 48px; } .has-dropdown { display: grid; grid-template-columns: 1fr auto; } .sub-menu { position: static; grid-column: 1 / -1; display: none; min-width: 0; border: 0; box-shadow: none; background: var(--surface-2); opacity: 1; visibility: visible; } .has-dropdown.is-open > .sub-menu { display: block; } .sub-menu > .has-dropdown { display: grid; } .sub-menu .sub-menu { margin: 0 var(--s3) var(--s2); border-inline-start: 2px solid var(--border-strong); background: var(--surface); } .sub-menu .sub-menu .menu-link { padding-inline-start: var(--s5); } .sub-menu .menu-toggle .prohori-icon, .sub-menu .opens-inward > .menu-toggle .prohori-icon { transform: none; } .sub-menu .menu-toggle[aria-expanded="true"] .prohori-icon { transform: rotate(180deg); } .site-nav__mobile-extras { display: block; } .s-lead__list { position: static; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* A ticker that cannot scroll becomes a plain scrollable list. */ .c-ticker__viewport { overflow-x: auto; mask-image: none; } .c-ticker__track { animation: none; } }