/* * 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. 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; } /* 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"] { --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); } /* ------------------------------------------------------------------ * * 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; } @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: 220px; 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); } .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: block; 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); } .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); } } .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); } /* ------------------------------------------------------------------ * * 15. 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; } .has-dropdown { display: grid; grid-template-columns: 1fr auto; } .sub-menu { position: static; grid-column: 1 / -1; display: none; border: 0; box-shadow: none; background: var(--surface-2); opacity: 1; visibility: visible; } .has-dropdown.is-open > .sub-menu { display: block; } .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; } }