/* ========================================================================== BIA modern homepage and Destinations editorial stylesheet Business Intelligence Asia network Version 1.1 · desktop-first (1440 canvas), breakpoints at 1180 and 900 Classic PHP child theme on GeneratePress. Enqueue AFTER the GeneratePress parent and after the existing shared child styles — this sheet is meant to win. It does not modify GeneratePress; it overrides it. Every value here is lifted from the approved design. Do not round. ========================================================================== */ /* -------------------------------------------------------------------------- 0. FONTS — self-hosted, no third-party request Place the woff2 files in the child theme at assets/fonts/. Anton uses font-display:block, not swap: the masthead must never paint in a fallback face. Everything else swaps. Preload Anton in : -------------------------------------------------------------------------- */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/anton-400.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/oswald-400.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/oswald-500.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/oswald-600.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/oswald-700.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/playfair-700.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/playfair-900.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/playfair-400-italic.woff2') format('woff2'); } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/source-serif-4-400.woff2') format('woff2'); } /* -------------------------------------------------------------------------- 1. TOKENS Accent and accent-dark are the only values that change between the five verticals. Set the vertical class on ; everything downstream follows. -------------------------------------------------------------------------- */ :root { /* Neutrals — shared by every vertical */ --dia-cream: #FBF6EE; /* page ground, all plates */ --dia-ink: #14110F; /* nav, heavy rules, headlines */ --dia-body: #1B1815; /* article body copy only */ --dia-body-on-cream:#3D3831; /* briefing body set on a cream plate */ --dia-mute: #6B645C; /* dates, breadcrumb */ --dia-mute-2: #8A837B; /* input placeholder, archive notes */ --dia-mute-3: #9A938A; /* "Standfirst to come" fallback */ --dia-kicker: #E8631F; /* section kicker orange — NEVER the accent */ --dia-thumb-bg: #DCD6CA; /* image slot ground before load */ /* Rules — always rgba on ink, never a flat grey */ --dia-rule-heavy: 4px; --dia-rule-mid: rgba(20,17,15,0.25); --dia-rule-soft: rgba(20,17,15,0.20); --dia-rule-card: rgba(20,17,15,0.16); --dia-rule-hair: rgba(20,17,15,0.14); /* Geometry */ --dia-max: 1440px; --dia-gutter: 40px; --dia-gutter-m: 16px; /* Type stacks */ --dia-display: Anton, "Arial Narrow", sans-serif; --dia-headline: "Playfair Display", Georgia, serif; --dia-ui: Oswald, "Arial Narrow", sans-serif; --dia-copy: "Source Serif 4", Georgia, serif; /* Default vertical: Destinations (the body class repeats these explicitly). */ --dia-accent: #B3343A; --dia-accent-dark: #82262A; } .dia-template .site-header, .dia-template .main-navigation { display: none !important; } .dia-v--destinations { --dia-accent: #B3343A; --dia-accent-dark: #82262A; } .dia-v--construction { --dia-accent: #FF5A00; --dia-accent-dark: #B84000; } .dia-v--education { --dia-accent: #2F7D5C; --dia-accent-dark: #1F5A43; } .dia-v--healthcare { --dia-accent: #1F6FB2; --dia-accent-dark: #165083; } .dia-v--islamic-economy{ --dia-accent: #1B7A4A; --dia-accent-dark: #145A36; } /* -------------------------------------------------------------------------- 2. RESET & PAGE GeneratePress wraps everything in #page > .site-content > .container and applies its own max-width and padding. For modern homepages and DIA editorial templates, set the GP content layout to "Full Width / Unmodified" (or unhook the container) and let .dia-page own the measure. These three rules neutralise the common case without touching the parent theme. -------------------------------------------------------------------------- */ .dia-page .container, body.dia-template .site-content > .container, body.dia-template #primary { max-width: none; padding: 0; margin: 0; width: 100%; } body.dia-template .site-content { display: block; } body.dia-template #page { overflow-x: hidden; } body { margin: 0; background: var(--dia-cream); font-family: var(--dia-ui); -webkit-font-smoothing: antialiased; } a { color: var(--dia-accent); text-decoration: none; } a:hover { color: var(--dia-accent-dark); text-decoration: underline; } /* Structural links wrap whole blocks — they inherit colour and never underline. Headline links live inside these and DO underline on hover. */ .dia-monogram, .dia-puff, .dia-network__item, .dia-nav__item, .dia-footer-bar a { text-decoration: none; } .dia-monogram:hover, .dia-puff:hover, .dia-network__item:hover { text-decoration: none; } .dia-puff:hover .dia-puff__headline { color: var(--dia-accent); } .dia-footer-bar a:hover { color: var(--dia-cream); text-decoration: underline; } img { max-width: 100%; } .dia-page { max-width: var(--dia-max); margin: 0 auto; background: var(--dia-cream); } .dia-wrap { padding-left: var(--dia-gutter); padding-right: var(--dia-gutter); } /* Rules ------------------------------------------------------------------ */ .dia-rule { height: 2px; background: var(--dia-rule-mid); } .dia-rule--heavy { height: 4px; background: var(--dia-ink); } .dia-rule--heaviest { height: 6px; background: var(--dia-ink); } .dia-rule--cream { height: 3px; background: var(--dia-cream); opacity: 0.55; } /* Shared type ------------------------------------------------------------ */ .dia-kicker { font-family: var(--dia-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: var(--dia-kicker); text-transform: uppercase; } .dia-date { font-family: var(--dia-ui); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; color: var(--dia-mute); text-transform: uppercase; } .dia-deck { font-family: var(--dia-headline); font-style: italic; font-weight: 400; color: var(--dia-accent); text-wrap: pretty; } .dia-deck--empty { font-family: var(--dia-ui); font-weight: 400; font-style: normal; color: var(--dia-mute-3); } /* Line clamp helper — the design relies on these, keep them */ .dia-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; } .dia-clamp--1 { -webkit-line-clamp: 1; } .dia-clamp--2 { -webkit-line-clamp: 2; } .dia-clamp--4 { -webkit-line-clamp: 4; } /* -------------------------------------------------------------------------- 3. MASTHEAD Accent band · cream monogram plate · Anton wordmark · three puffs -------------------------------------------------------------------------- */ .dia-masthead { background: var(--dia-accent); } .dia-masthead__inner { padding: 34px var(--dia-gutter); } .dia-masthead__row { display: flex; gap: 34px; align-items: flex-start; } .dia-monogram { flex: 0 0 232px; height: 232px; background: var(--dia-cream); display: flex; align-items: center; justify-content: center; } .dia-monogram__mark { font-family: var(--dia-display); font-size: 116px; line-height: 0.78; padding-top: 8px; color: var(--dia-accent); } .dia-identity { flex: 0 0 348px; } .dia-wordmark { font-family: var(--dia-display); font-size: 64px; line-height: 0.86; color: var(--dia-cream); } .dia-masthead .dia-rule--cream { margin: 16px 0 10px; } .dia-strapline { font-family: var(--dia-ui); font-weight: 500; font-size: 14px; letter-spacing: 0.05em; line-height: 1.35; color: var(--dia-cream); opacity: 0.86; } .dia-puffs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .dia-puff { height: 232px; background: var(--dia-cream); display: flex; flex-direction: column; } .dia-puff__art { height: 144px; position: relative; overflow: hidden; background: var(--dia-thumb-bg); } .dia-puff__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .dia-puff__body { flex: 1; padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 5px; } .dia-puff__kicker { font-family: var(--dia-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.15em; color: var(--dia-ink); text-transform: uppercase; } .dia-puff__headline { font-family: var(--dia-display); font-size: 23px; line-height: 0.92; color: var(--dia-ink); } /* -------------------------------------------------------------------------- 4. NAVIGATION -------------------------------------------------------------------------- */ .dia-nav { display: flex; align-items: stretch; background: var(--dia-ink); height: 56px; font-family: var(--dia-ui); font-weight: 600; font-size: 16px; letter-spacing: 0.09em; color: var(--dia-cream); } .dia-nav__item { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--dia-cream); text-transform: uppercase; } .dia-nav__item:hover { background: rgba(251,246,238,0.1); color: var(--dia-cream); text-decoration: none; } .dia-nav__item--active { background: var(--dia-accent); } .dia-nav__item--active:hover { background: var(--dia-accent); } .dia-nav__search { flex: 0 0 210px; display: flex; align-items: center; padding: 8px; box-sizing: border-box; gap: 8px; } .dia-nav__search input { flex: 1; min-width: 0; border: 0; background: var(--dia-cream); font-family: var(--dia-ui); font-weight: 400; font-size: 14px; letter-spacing: 0.02em; padding: 6px 10px; color: var(--dia-ink); } .dia-nav__search input::placeholder { color: var(--dia-mute-2); } .dia-nav__search button { border: 0; background: none; color: var(--dia-cream); font-family: var(--dia-ui); font-weight: 600; font-size: 14px; cursor: pointer; } /* -------------------------------------------------------------------------- 5. TOP STORY -------------------------------------------------------------------------- */ .dia-lead { padding: 44px var(--dia-gutter) 40px; display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 44px; align-items: start; } .dia-lead__kicker { font-family: var(--dia-ui); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; color: var(--dia-kicker); text-transform: uppercase; } .dia-lead__headline { font-family: var(--dia-headline); font-weight: 700; font-size: 58px; line-height: 0.98; color: var(--dia-ink); margin: 14px 0 0; text-wrap: pretty; } .dia-lead__headline a { color: inherit; } .dia-lead__date { font-family: var(--dia-ui); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; color: var(--dia-ink); margin-top: 20px; text-transform: uppercase; } .dia-lead__deck { font-size: 22px; line-height: 1.42; margin-top: 18px; } .dia-splash { height: 512px; position: relative; overflow: hidden; background: var(--dia-thumb-bg); } .dia-splash > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* -------------------------------------------------------------------------- 6. FEATURED ROW — four across, thumb floated left -------------------------------------------------------------------------- */ .dia-featured { padding: 0 var(--dia-gutter) 42px; } .dia-featured__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 32px; } .dia-section-head + .dia-featured__grid { margin-top: 0; } .dia-featured__thumb { float: left; width: 92px; height: 122px; margin: 2px 13px 8px 0; position: relative; overflow: hidden; background: var(--dia-thumb-bg); } .dia-featured__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .dia-featured__headline { font-family: var(--dia-headline); font-weight: 700; font-size: 20px; line-height: 1.12; color: var(--dia-ink); margin: 7px 0 0; max-height: 48px; } .dia-featured__headline a { color: inherit; } .dia-featured__deck { font-size: 15px; line-height: 1.46; margin-top: 9px; max-height: 92px; } .dia-featured__deck.dia-deck--empty { font-size: 14px; line-height: 1.44; max-height: none; } .dia-featured .dia-date { margin-top: 12px; clear: both; padding-top: 2px; } /* -------------------------------------------------------------------------- 7. SECTION HEAD — Anton title, hairline fill, accent link -------------------------------------------------------------------------- */ .dia-section-head { display: flex; align-items: baseline; gap: 16px; padding: 26px 0 22px; } .dia-section-head__title { font-family: var(--dia-display); font-size: 34px; line-height: 1; color: var(--dia-ink); margin: 0; } .dia-section-head__fill { flex: 1; height: 1px; background: var(--dia-rule-soft); } .dia-section-head__link { font-family: var(--dia-ui); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; color: var(--dia-kicker); text-transform: uppercase; } /* -------------------------------------------------------------------------- 8. LATEST INTELLIGENCE — two-column digest Headline is a single clipped line. This is deliberate: it keeps the two columns in register. Do not let it wrap. -------------------------------------------------------------------------- */ .dia-digest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; } .dia-digest__item { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--dia-rule-hair); } .dia-digest__item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 4px; } .dia-digest__headline { font-family: var(--dia-headline); font-weight: 700; font-size: 22px; line-height: 1.18; color: var(--dia-ink); margin: 8px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dia-digest__headline a { color: inherit; } .dia-digest__deck { font-size: 16px; line-height: 1.42; margin-top: 9px; max-height: 47px; } .dia-digest .dia-date { margin-top: 10px; } /* -------------------------------------------------------------------------- 9. CATEGORY COLUMNS — four across, divided by hairlines -------------------------------------------------------------------------- */ .dia-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; padding: 30px 0 8px; } .dia-column { padding-right: 32px; border-right: 1px solid var(--dia-rule-card); } .dia-column:last-child { padding-right: 0; border-right: 0; } .dia-column__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .dia-column__title { font-family: var(--dia-display); font-size: 24px; color: var(--dia-ink); margin: 0; } .dia-column__link { font-family: var(--dia-ui); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; color: var(--dia-kicker); white-space: nowrap; } .dia-column__rule { height: 2px; background: var(--dia-ink); margin: 12px 0 18px; } .dia-column__list { display: flex; flex-direction: column; gap: 16px; } .dia-column__empty { margin-top: 20px; padding: 14px 0; border-top: 1px dashed var(--dia-rule-mid); font-family: var(--dia-ui); font-weight: 500; font-size: 13px; letter-spacing: 0.05em; color: var(--dia-mute-2); } /* Thumb + headline row, reused in columns and the article sidebar */ .dia-brief { display: flex; gap: 13px; align-items: flex-start; } .dia-brief + .dia-brief { border-top: 1px solid var(--dia-rule-hair); padding-top: 16px; } .dia-brief__thumb { flex: 0 0 92px; height: 70px; position: relative; overflow: hidden; background: var(--dia-thumb-bg); } .dia-brief__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .dia-brief__text { flex: 1; min-width: 0; } .dia-brief__headline { font-family: var(--dia-headline); font-weight: 700; font-size: 17px; line-height: 1.14; color: var(--dia-ink); margin: 0; text-wrap: pretty; } .dia-brief__headline a { color: inherit; } .dia-brief .dia-date { font-size: 12px; margin-top: 8px; } /* -------------------------------------------------------------------------- 10. ARTICLE Three-column frame: 150px marginal / 700px measure / 1fr sidebar. The 700px measure is the whole reason the body is readable. Hold it. -------------------------------------------------------------------------- */ .dia-breadcrumb { display: flex; align-items: center; gap: 14px; padding: 22px 0 26px; font-family: var(--dia-ui); font-weight: 500; font-size: 13px; letter-spacing: 0.1em; color: var(--dia-mute); text-transform: uppercase; } .dia-breadcrumb a { color: var(--dia-mute); } .dia-breadcrumb__current { color: var(--dia-ink); } .dia-article__grid { display: grid; grid-template-columns: 150px minmax(0, 700px) minmax(0, 1fr); gap: 0 70px; align-items: start; } .dia-article__head { padding-top: 30px; } .dia-article__head .dia-article__title-cell { grid-column: 2 / 4; } .dia-article__tab { display: inline-block; background: var(--dia-accent); color: var(--dia-cream); font-family: var(--dia-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; padding: 10px 14px; text-transform: uppercase; } .dia-article__title { font-family: var(--dia-headline); font-weight: 900; font-size: 74px; line-height: 0.96; letter-spacing: -0.015em; color: var(--dia-ink); margin: 0; text-wrap: pretty; } .dia-article__deck { font-size: 27px; line-height: 1.4; margin-top: 24px; max-width: 900px; } .dia-article__meta { display: flex; align-items: center; gap: 26px; padding: 16px 0; } .dia-article__byline { font-family: var(--dia-ui); font-weight: 600; font-size: 16px; letter-spacing: 0.04em; color: var(--dia-ink); } .dia-article__meta-sep { width: 1px; height: 20px; background: var(--dia-rule-mid); } .dia-article__meta .dia-date { font-size: 15px; letter-spacing: 0.09em; } .dia-article__actions { margin-left: auto; display: flex; gap: 10px; font-family: var(--dia-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; color: var(--dia-ink); } .dia-article__actions a { border: 2px solid var(--dia-ink); padding: 8px 16px; color: var(--dia-ink); } .dia-article__actions a:hover { background: var(--dia-ink); color: var(--dia-cream); text-decoration: none; } .dia-article__lead { height: 560px; position: relative; margin-top: 34px; overflow: hidden; background: var(--dia-thumb-bg); } .dia-article__lead img { width: 100%; height: 100%; object-fit: cover; display: block; } .dia-caption { display: flex; gap: 12px; align-items: baseline; padding: 12px 0 14px; border-bottom: 1px solid var(--dia-rule-soft); } .dia-caption__fig { flex: 0 0 auto; background: var(--dia-accent); color: var(--dia-cream); font-family: var(--dia-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; padding: 5px 9px; } .dia-caption__text { font-family: var(--dia-ui); font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--dia-mute-2); } /* -------------------------------------------------------------------------- Article body — the_content() output, one continuous column Numbered sections come from ordinary H2s written in the block editor. There is no repeater and no per-section number field: the numeral is a CSS counter, so it renumbers itself when an editor adds, deletes or reorders a section. Pull quotes are core blockquotes. Both survive a plugin being deactivated, which a repeater would not. -------------------------------------------------------------------------- */ .dia-article__body { font-family: var(--dia-copy); font-size: 20px; line-height: 1.62; color: var(--dia-body); counter-reset: dia-section; } .dia-article__body p { margin: 0 0 26px; } .dia-article__body a { text-decoration: underline; } .dia-article__body > *:first-child { margin-top: 0; } .dia-article__body h2 { font-family: var(--dia-headline); font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--dia-ink); margin: 46px 0 18px; position: relative; text-wrap: pretty; } /* The numeral hangs in the 150px marginal column: 150 + the 70px gap. */ .dia-article__body h2::before { counter-increment: dia-section; content: counter(dia-section, decimal-leading-zero); position: absolute; left: -220px; top: 4px; width: 150px; font-family: var(--dia-display); font-weight: 400; font-size: 44px; line-height: 0.9; color: var(--dia-accent); } .dia-article__body h3 { font-family: var(--dia-headline); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--dia-ink); margin: 34px 0 14px; text-wrap: pretty; } /* Core blockquote renders as the pull quote — accent rule, Playfair 40 */ .dia-article__body blockquote { margin: 42px 0; padding: 0; border: 0; } .dia-article__body blockquote::before { content: ""; display: block; height: 8px; width: 160px; background: var(--dia-accent); margin-bottom: 22px; } .dia-article__body blockquote p { font-family: var(--dia-headline); font-weight: 700; font-size: 40px; line-height: 1.12; color: var(--dia-ink); margin: 0; text-wrap: pretty; } .dia-article__body blockquote cite { display: block; margin-top: 16px; font-style: normal; font-family: var(--dia-ui); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; color: var(--dia-mute); text-transform: uppercase; } /* Core figure inside the body */ .dia-article__body figure { margin: 34px 0; } .dia-article__body figure img { width: 100%; height: auto; display: block; } .dia-article__body figcaption { font-family: var(--dia-ui); font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--dia-mute-2); margin-top: 10px; } .dia-article__body ul, .dia-article__body ol { margin: 0 0 26px; padding-left: 24px; } .dia-article__body li { margin-bottom: 10px; } .dia-article__sidebar { grid-row: span 10; align-self: stretch; } .dia-article__sidebar-inner { position: sticky; top: 24px; } .dia-sidebar__title { font-family: var(--dia-display); font-size: 24px; line-height: 1; color: var(--dia-ink); padding: 14px 0 18px; margin: 0; } .dia-article__sidebar .dia-brief__thumb { flex: 0 0 104px; height: 78px; } .dia-article__sidebar .dia-brief__headline { font-size: 19px; line-height: 1.12; margin-top: 7px; } .dia-article__sidebar .dia-kicker { font-size: 11px; } .dia-article__sidebar .dia-brief + .dia-brief { padding-top: 18px; border-top-color: var(--dia-rule-card); } .dia-author { display: flex; gap: 18px; align-items: flex-start; border-top: 4px solid var(--dia-ink); padding-top: 20px; margin-top: 38px; } .dia-author__portrait { flex: 0 0 72px; height: 72px; overflow: hidden; background: var(--dia-thumb-bg); } .dia-author__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .dia-author__name { font-family: var(--dia-display); font-size: 22px; line-height: 1; color: var(--dia-ink); margin: 0; } .dia-author__bio { font-family: var(--dia-ui); font-weight: 400; font-size: 15px; line-height: 1.45; color: var(--dia-mute-2); margin-top: 8px; } /* -------------------------------------------------------------------------- 11. CATEGORY / TAXONOMY -------------------------------------------------------------------------- */ .dia-cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 26px 0 30px; } .dia-cat-head__title { font-family: var(--dia-display); font-size: 82px; line-height: 0.86; color: var(--dia-ink); margin: 0; } .dia-cat-head__meta { display: flex; align-items: baseline; gap: 22px; padding-bottom: 8px; font-family: var(--dia-ui); font-weight: 600; font-size: 14px; letter-spacing: 0.09em; color: var(--dia-mute); text-transform: uppercase; } .dia-cat-head__meta .dia-rss { color: var(--dia-kicker); } .dia-cat-lead { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 44px; align-items: start; padding-bottom: 42px; } .dia-cat-lead__headline { font-family: var(--dia-headline); font-weight: 700; font-size: 52px; line-height: 1; color: var(--dia-ink); margin: 18px 0 0; text-wrap: pretty; } .dia-cat-lead__deck { font-size: 21px; line-height: 1.44; margin-top: 16px; } .dia-cat-lead__art { height: 452px; position: relative; overflow: hidden; background: var(--dia-thumb-bg); } .dia-cat-lead__art img { width: 100%; height: 100%; object-fit: cover; display: block; } .dia-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; padding: 32px 0 12px; } .dia-card__thumb { float: left; width: 104px; height: 138px; margin: 2px 15px 10px 0; overflow: hidden; background: var(--dia-thumb-bg); } .dia-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .dia-card__headline { font-family: var(--dia-headline); font-weight: 700; font-size: 23px; line-height: 1.1; color: var(--dia-ink); margin: 8px 0 0; max-height: 52px; } .dia-card__deck { font-size: 15px; line-height: 1.46; margin-top: 10px; max-height: 88px; } .dia-card .dia-date { margin-top: 12px; clear: both; padding-top: 2px; } .dia-end-rule { display: flex; align-items: center; gap: 14px; padding: 30px 0 46px; font-family: var(--dia-ui); font-weight: 500; font-size: 14px; letter-spacing: 0.09em; color: var(--dia-mute-2); text-transform: uppercase; } .dia-end-rule::before, .dia-end-rule::after { content: ""; flex: 1; height: 1px; background: var(--dia-rule-soft); } /* -------------------------------------------------------------------------- 12. ARCHIVE -------------------------------------------------------------------------- */ .dia-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 20px; } .dia-filter { font-family: var(--dia-ui); font-weight: 600; font-size: 13px; letter-spacing: 0.13em; color: var(--dia-ink); border: 2px solid var(--dia-rule-mid); padding: 8px 14px; text-transform: uppercase; } .dia-filter:hover { border-color: var(--dia-ink); text-decoration: none; color: var(--dia-ink); } .dia-filter--active { background: var(--dia-accent); color: var(--dia-cream); border-color: var(--dia-accent); font-weight: 700; padding: 10px 16px; } .dia-archive__search { margin-left: auto; display: flex; align-items: center; gap: 8px; } .dia-archive__search input { font-family: var(--dia-ui); font-weight: 400; font-size: 14px; border: 2px solid var(--dia-rule-mid); background: none; padding: 8px 14px; min-width: 200px; color: var(--dia-ink); } .dia-archive__search input::placeholder { color: var(--dia-mute-2); } .dia-archive__search button { background: var(--dia-ink); color: var(--dia-cream); border: 0; cursor: pointer; font-family: var(--dia-ui); font-weight: 600; font-size: 13px; letter-spacing: 0.13em; padding: 10px 16px; } .dia-archive__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 0 18px; font-family: var(--dia-ui); font-weight: 500; font-size: 14px; letter-spacing: 0.06em; color: var(--dia-mute); } .dia-sort { display: flex; align-items: center; gap: 12px; position: relative; } .dia-sort__label { font-family: var(--dia-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; color: var(--dia-mute); } .dia-sort select { appearance: none; background: none; cursor: pointer; border: 2px solid var(--dia-ink); padding: 9px 34px 9px 14px; min-width: 180px; font-family: var(--dia-ui); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; color: var(--dia-ink); border-radius: 0; } .dia-arch-group { padding: 26px 0 0; } .dia-arch-group__head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; } .dia-arch-group__label { font-family: var(--dia-display); font-size: 26px; line-height: 1; color: var(--dia-ink); margin: 0; } .dia-arch-group__fill { flex: 1; height: 1px; background: var(--dia-rule-soft); } .dia-arch-group__count { font-family: var(--dia-ui); font-weight: 500; font-size: 13px; letter-spacing: 0.09em; color: var(--dia-mute-2); } .dia-arch-row { display: grid; grid-template-columns: 96px 132px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--dia-rule-hair); } .dia-arch-row--nokicker { grid-template-columns: 96px minmax(0, 1fr); } .dia-arch-row__headline { font-family: var(--dia-headline); font-weight: 700; font-size: 23px; line-height: 1.14; color: var(--dia-ink); margin: 0; text-wrap: pretty; } .dia-arch-row__deck { font-size: 16px; line-height: 1.42; margin-top: 7px; max-height: 24px; } .dia-arch-row__deck.dia-deck--empty { font-size: 14px; max-height: none; } .dia-pagination { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0 46px; font-family: var(--dia-ui); font-weight: 500; font-size: 14px; letter-spacing: 0.06em; color: var(--dia-mute-2); } .dia-pagination__links { display: flex; gap: 8px; font-weight: 600; letter-spacing: 0.08em; } .dia-pagination a, .dia-pagination span { border: 2px solid var(--dia-rule-mid); color: var(--dia-mute-2); padding: 9px 16px; } .dia-pagination .current { background: var(--dia-accent); color: var(--dia-cream); border-color: var(--dia-accent); padding: 11px 18px; } /* -------------------------------------------------------------------------- 13. FOOTER — accent band, briefing plate, network strip, ink bar -------------------------------------------------------------------------- */ .dia-footer { background: var(--dia-accent); } .dia-footer__inner { padding: 36px var(--dia-gutter) 34px; } .dia-footer__row { display: flex; gap: 40px; align-items: flex-start; } .dia-footer .dia-monogram { flex: 0 0 160px; height: 160px; } .dia-footer .dia-monogram__mark { font-size: 80px; padding-top: 6px; } .dia-footer__wordmark { flex: 0 0 250px; font-family: var(--dia-display); font-size: 45px; line-height: 0.86; color: var(--dia-cream); } .dia-footer .dia-rule--cream { margin: 32px 0 22px; } .dia-brief-plate { flex: 1; background: var(--dia-cream); padding: 24px 28px 26px; display: flex; flex-direction: column; align-items: flex-start; } .dia-brief-plate__title { font-family: var(--dia-display); font-size: 26px; line-height: 1.04; color: var(--dia-ink); margin: 0; } .dia-brief-plate__blurb { font-family: var(--dia-ui); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--dia-body-on-cream); margin-top: 11px; max-width: 460px; } .dia-btn { display: inline-block; font-family: var(--dia-ui); font-weight: 600; font-size: 15px; letter-spacing: 0.12em; padding: 13px 26px; text-transform: uppercase; border: 0; cursor: pointer; } .dia-btn--cta { background: var(--dia-accent-dark); color: var(--dia-cream); margin-top: 18px; } .dia-btn--cta:hover { background: var(--dia-ink); color: var(--dia-cream); text-decoration: none; } .dia-btn--ink { background: var(--dia-ink); color: var(--dia-cream); } .dia-btn--cream { background: var(--dia-cream); color: var(--dia-accent); } .dia-network__label { font-family: var(--dia-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.15em; color: var(--dia-cream); opacity: 0.9; } .dia-network { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; } .dia-network__item { background: var(--dia-cream); padding: 7px; } .dia-network__inner { display: flex; align-items: center; gap: 13px; padding: 14px 16px; } .dia-network__mark { flex: 0 0 90px; height: 90px; box-sizing: border-box; background: var(--dia-cream); display: flex; align-items: center; justify-content: center; font-family: var(--dia-display); font-size: 42px; padding-top: 3px; } .dia-network__name { flex: 1; min-width: 0; font-family: var(--dia-display); font-size: 25px; line-height: 0.9; color: var(--dia-cream); } .dia-network--construction .dia-network__inner { background: #FF5A00; } .dia-network--construction .dia-network__mark { color: #FF5A00; } .dia-network--education .dia-network__inner { background: #2F7D5C; } .dia-network--education .dia-network__mark { color: #2F7D5C; } .dia-network--healthcare .dia-network__inner { background: #1F6FB2; } .dia-network--healthcare .dia-network__mark { color: #1F6FB2; } .dia-network--islamic-economy .dia-network__inner { background: #1B7A4A; } .dia-network--islamic-economy .dia-network__mark { color: #1B7A4A; } .dia-network--destinations .dia-network__inner { background: #B3343A; } .dia-network--destinations .dia-network__mark { color: #B3343A; } .dia-footer-bar { background: var(--dia-ink); display: flex; align-items: center; gap: 34px; padding: 22px var(--dia-gutter); font-family: var(--dia-ui); font-weight: 600; font-size: 14px; letter-spacing: 0.09em; color: var(--dia-cream); text-transform: uppercase; } .dia-footer-bar a { color: var(--dia-cream); } .dia-footer-bar__rss { margin-left: auto; font-family: var(--dia-display); font-size: 20px; letter-spacing: 0.02em; text-transform: none; } /* -------------------------------------------------------------------------- 14. SUBSCRIBE BLOCKS -------------------------------------------------------------------------- */ .dia-subscribe { background: var(--dia-accent); padding: 30px var(--dia-gutter) 32px; } .dia-subscribe__row { display: flex; gap: 34px; align-items: center; } .dia-subscribe__title { font-family: var(--dia-display); font-size: 38px; line-height: 1.02; color: var(--dia-cream); margin: 0; } .dia-subscribe__blurb { font-family: var(--dia-ui); font-weight: 400; font-size: 17px; line-height: 1.5; color: var(--dia-cream); opacity: 0.9; margin-top: 9px; max-width: 560px; } .dia-subscribe__form { flex: 0 0 440px; display: flex; gap: 10px; } .dia-subscribe__form input { flex: 1; min-width: 0; border: 0; background: var(--dia-cream); padding: 16px; font-family: var(--dia-ui); font-weight: 400; font-size: 16px; color: var(--dia-ink); } .dia-subscribe__form input::placeholder { color: var(--dia-mute-2); } .dia-subscribe__form button { background: var(--dia-ink); color: var(--dia-cream); padding: 16px 24px; } .dia-subscribe__small { font-family: var(--dia-ui); font-weight: 400; font-size: 13px; letter-spacing: 0.04em; color: var(--dia-cream); opacity: 0.75; margin-top: 12px; } /* Sidebar variant (used inside the article rail) */ .dia-subscribe--rail { padding: 26px 26px 28px; margin-top: 30px; } .dia-subscribe--rail .dia-subscribe__eyebrow { font-family: var(--dia-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; color: var(--dia-cream); opacity: 0.85; } .dia-subscribe--rail .dia-subscribe__title { font-size: 28px; margin-top: 10px; } .dia-subscribe--rail .dia-subscribe__blurb { font-size: 15px; margin-top: 12px; } .dia-subscribe--rail .dia-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; font-size: 14px; padding: 13px 24px; margin-top: 18px; background: var(--dia-cream); color: var(--dia-accent); } /* -------------------------------------------------------------------------- 15. LAPTOP — 901px to 1180px The masthead row consumes 648px in fixed columns (monogram 232 + wordmark 348 + two 34px gaps) before the puffs get anything. Below ~1180 that crushes them, so the puff row drops to its own full-width line and the monogram steps down. Four-across grids halve; the article loses its marginal column and its rail, because there is no honest way to fit a 700px measure plus a sidebar at these widths. -------------------------------------------------------------------------- */ @media (max-width: 1180px) { /* Masthead: monogram + wordmark on one line, puffs on the next */ .dia-masthead__row { flex-wrap: wrap; } .dia-monogram { flex: 0 0 180px; height: 180px; } .dia-monogram__mark { font-size: 90px; padding-top: 6px; } .dia-identity { flex: 1; min-width: 0; } .dia-wordmark { font-size: 52px; } .dia-puffs { flex: 0 0 100%; margin-top: 26px; } .dia-puff { height: 218px; } .dia-puff__art { height: 134px; } /* Top story: shorter splash so the 470px text column stays dominant */ .dia-lead { gap: 32px; } .dia-lead__headline { font-size: 46px; } .dia-lead__deck { font-size: 19px; } .dia-splash { height: 400px; } /* Four-across becomes two-across */ .dia-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; } .dia-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 32px; } .dia-column:nth-child(2) { padding-right: 0; border-right: 0; } /* Digest keeps two columns, but the headline goes to two lines. The desktop single-line rule only holds above 1180, where ~62 characters fit. At 1024 only 37 do, so every headline cut mid-phrase. A 2-line clamp holds the two columns in register just as well and keeps the words. */ .dia-digest { gap: 0 40px; } .dia-digest__headline { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.18; max-height: 52px; } /* Article: single column, rail below. The 700px measure survives; the 150px marginal column and the sticky rail do not. */ .dia-article__grid { grid-template-columns: minmax(0, 700px); gap: 0; } .dia-article__head .dia-article__title-cell { grid-column: auto; } .dia-article__title { font-size: 56px; } .dia-article__deck { font-size: 23px; } /* No marginal column here — the numeral sits above its subhead */ .dia-article__body h2::before { position: static; display: block; width: auto; margin-bottom: 6px; } .dia-article__body h2 { margin-top: 40px; } .dia-article__sidebar { grid-row: auto; margin-top: 40px; max-width: 700px; border-top: 6px solid var(--dia-ink); padding-top: 20px; } .dia-article__sidebar-inner { position: static; } .dia-article__lead { height: 420px; } /* Taxonomy */ .dia-cat-head__title { font-size: 64px; } .dia-cat-lead__headline { font-size: 42px; } .dia-cat-lead__art { height: 380px; } .dia-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } /* Footer network strip halves too */ .dia-network { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 16. MOBILE — 900px and below, matching the 390 design -------------------------------------------------------------------------- */ @media (max-width: 900px) { .dia-wrap, .dia-lead, .dia-featured, .dia-masthead__inner, .dia-footer__inner, .dia-footer-bar, .dia-subscribe { padding-left: var(--dia-gutter-m); padding-right: var(--dia-gutter-m); } /* Masthead: monogram + wordmark side by side, puffs move below the lead */ .dia-masthead__inner { padding-top: 20px; padding-bottom: 18px; } .dia-masthead__row { gap: 14px; flex-wrap: wrap; } .dia-monogram { flex: 0 0 114px; height: 114px; } .dia-monogram__mark { font-size: 58px; padding-top: 4px; } .dia-identity { flex: 1; min-width: 0; } .dia-wordmark { font-size: 42px; } .dia-masthead .dia-rule--cream { height: 2px; margin: 14px 0 8px; } .dia-strapline { font-size: 11px; letter-spacing: 0.06em; line-height: 1.4; } /* Puffs: horizontal scroller under the top story, bordered tiles */ .dia-puffs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 22px var(--dia-gutter-m) 26px; margin: 0 0 4px; border-top: 4px solid var(--dia-ink); order: 3; } .dia-puffs::-webkit-scrollbar { display: none; } .dia-puff { flex: 0 0 244px; height: auto; border: 1px solid var(--dia-rule-hair); } .dia-puff__art { height: 152px; } .dia-puff__body { padding: 10px 12px 13px; } .dia-puff__kicker { font-size: 10px; } .dia-puff__headline { font-size: 21px; line-height: 0.94; } /* Nav: horizontal scroller, no search */ .dia-nav { height: 46px; font-size: 14px; overflow-x: auto; scrollbar-width: none; } .dia-nav::-webkit-scrollbar { display: none; } .dia-nav__item { flex: 0 0 auto; padding: 0 16px; white-space: nowrap; } .dia-nav__search { display: none; } /* Top story stacks */ .dia-lead { grid-template-columns: 1fr; gap: 0; padding-top: 0; padding-bottom: 26px; } .dia-lead__art { order: -1; } .dia-splash { height: 201px; } .dia-lead__kicker { font-size: 12px; letter-spacing: 0.14em; margin-top: 16px; } .dia-lead__headline { font-size: 34px; line-height: 1.02; margin-top: 8px; } .dia-lead__date { font-size: 12px; margin-top: 12px; } .dia-lead__deck { font-size: 18px; line-height: 1.44; margin-top: 11px; } /* Featured: stacked list with hairline dividers */ .dia-featured__grid { grid-template-columns: 1fr; gap: 0; margin-top: 0; } .dia-featured__item { padding: 20px 0; border-bottom: 1px solid var(--dia-rule-hair); } .dia-featured__thumb { width: 88px; height: 116px; } .dia-featured__headline { font-size: 21px; line-height: 1.1; max-height: 50px; } .dia-featured__deck { font-size: 14px; max-height: 82px; } /* Digest: one column, two-line headline (NOT the desktop single line) */ .dia-section-head__title { font-size: 26px; } .dia-digest { grid-template-columns: 1fr; gap: 0; } .dia-digest__item { padding: 16px 0; margin: 0; border-bottom: 0; border-top: 1px solid var(--dia-rule-hair); } .dia-digest__headline { font-size: 21px; line-height: 1.14; max-height: 48px; } .dia-digest__deck { font-size: 15px; line-height: 1.44; max-height: 46px; } /* Columns: one at a time, thumbs shrink */ .dia-columns { grid-template-columns: 1fr; gap: 30px; } .dia-column { padding-right: 0; border-right: 0; } .dia-brief__thumb { flex: 0 0 88px; height: 66px; } /* Article */ .dia-article__grid { grid-template-columns: 1fr; gap: 0; } .dia-article__head .dia-article__title-cell { grid-column: auto; } .dia-article__title { font-size: 36px; line-height: 1.02; letter-spacing: -0.01em; margin-top: 16px; } .dia-article__deck { font-size: 19px; margin-top: 16px; } .dia-article__meta { flex-wrap: wrap; gap: 12px 18px; } .dia-article__actions { margin-left: 0; width: 100%; } .dia-article__lead { height: 240px; } .dia-article__body { font-size: 18px; line-height: 1.6; } .dia-article__body h2 { font-size: 26px; margin-top: 34px; } .dia-article__body h2::before { font-size: 34px; } .dia-article__body blockquote p { font-size: 28px; } .dia-article__sidebar { grid-row: auto; margin-top: 34px; } .dia-article__sidebar-inner { position: static; } /* Category + archive */ .dia-cat-head { flex-direction: column; align-items: flex-start; gap: 12px; } .dia-cat-head__title { font-size: 46px; } .dia-cat-lead { grid-template-columns: 1fr; gap: 18px; } .dia-cat-lead__art { height: 220px; order: -1; } .dia-cat-lead__headline { font-size: 32px; } .dia-cat-lead__deck { font-size: 17px; } .dia-cards { grid-template-columns: 1fr; gap: 0; } .dia-card { padding: 20px 0; border-bottom: 1px solid var(--dia-rule-hair); } .dia-card__thumb { width: 88px; height: 116px; margin-right: 13px; } .dia-card__headline { font-size: 21px; } .dia-archive__search { margin-left: 0; width: 100%; } .dia-archive__search input { flex: 1; min-width: 0; } .dia-archive__bar { flex-direction: column; align-items: flex-start; gap: 12px; } .dia-arch-row, .dia-arch-row--nokicker { grid-template-columns: 1fr; gap: 6px; } .dia-arch-row__headline { font-size: 20px; } .dia-pagination { flex-direction: column; align-items: flex-start; gap: 16px; } /* Footer */ .dia-footer__inner { padding-top: 24px; padding-bottom: 22px; } .dia-footer__row { flex-direction: column; gap: 20px; } .dia-footer .dia-monogram { flex: 0 0 92px; height: 92px; } .dia-footer .dia-monogram__mark { font-size: 46px; padding-top: 3px; } .dia-footer__wordmark { flex: none; font-size: 34px; } .dia-brief-plate { width: 100%; box-sizing: border-box; padding: 18px 18px 20px; } .dia-brief-plate__title { font-size: 22px; } .dia-brief-plate__blurb { font-size: 14px; } .dia-btn--cta { display: block; width: 100%; box-sizing: border-box; text-align: center; font-size: 14px; padding: 13px 22px; } .dia-footer .dia-rule--cream { height: 2px; margin: 22px 0 16px; } .dia-network__label { font-size: 11px; } .dia-network { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .dia-network__item { padding: 5px; } .dia-network__inner { gap: 9px; padding: 9px 10px; } .dia-network__mark { flex: 0 0 50px; height: 50px; font-size: 23px; padding-top: 2px; } .dia-network__name { font-size: 12px; line-height: 0.94; } .dia-footer-bar { flex-wrap: wrap; gap: 14px 22px; padding: 18px var(--dia-gutter-m); font-size: 12px; } .dia-footer-bar__rss { font-size: 17px; } /* Subscribe */ .dia-subscribe__row { flex-direction: column; align-items: stretch; gap: 18px; } .dia-subscribe__title { font-size: 27px; } .dia-subscribe__blurb { font-size: 15px; } .dia-subscribe__form { flex: none; flex-direction: column; } } /* -------------------------------------------------------------------------- 17. PRINT — article only -------------------------------------------------------------------------- */ @media print { .dia-nav, .dia-puffs, .dia-article__sidebar, .dia-footer, .dia-footer-bar, .dia-subscribe, .dia-article__actions { display: none !important; } .dia-page { max-width: none; } .dia-article__grid { grid-template-columns: 1fr; } .dia-article__title { font-size: 34pt; } .dia-article__body { font-size: 12pt; line-height: 1.5; } }