/** * FastDarkNews Pro — main stylesheet * RTL-first, mobile-first. Theming via [data-theme] on . * Target: < 80KB pre-minify. No frameworks. */ /* ------------------------------------------------------------------------- * 0. Optional self-hosted Arabic font. * The theme ships with NO font binary (best Core Web Vitals out of the box): * it uses a fast Arabic system stack by default. To switch to IBM Plex Sans * Arabic, drop the three .woff2 files into assets/fonts/ (see README) — these * @font-face rules then activate automatically. font-display:swap avoids any * invisible-text delay. * ---------------------------------------------------------------------- */ @font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-arabic-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------------- * 1. Design tokens * ---------------------------------------------------------------------- */ :root { --fdn-accent: #e11d48; /* overridden by inline dynamic CSS */ --fdn-accent-contrast: #ffffff; --fdn-font: "IBM Plex Sans Arabic", "Segoe UI", "Tahoma", "Noto Kufi Arabic", "Noto Sans Arabic", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --fdn-radius: 10px; --fdn-radius-sm: 6px; --fdn-maxw: 1200px; --fdn-gap: 16px; --fdn-fs-base: 17px; --fdn-lh: 1.85; /* Light palette (default — matches default_mode = light). */ --fdn-bg: #f4f4f5; --fdn-surface: #ffffff; --fdn-surface-2: #fafafa; --fdn-text: #18181b; --fdn-text-2: #52525b; --fdn-border: #e4e4e7; --fdn-header-bg: #ffffff; --fdn-shadow: 0 1px 3px rgba(0, 0, 0, .08); --fdn-ad-bg: #f1f1f3; } /* Explicit light (so JS-set attribute is authoritative). */ [data-theme="light"] { --fdn-bg: #f4f4f5; --fdn-surface: #ffffff; --fdn-surface-2: #fafafa; --fdn-text: #18181b; --fdn-text-2: #52525b; --fdn-border: #e4e4e7; --fdn-header-bg: #ffffff; --fdn-shadow: 0 1px 3px rgba(0, 0, 0, .08); --fdn-ad-bg: #f1f1f3; } /* Dark palette — softened (not pure black) for readability. */ [data-theme="dark"] { --fdn-bg: #0b0b0f; --fdn-surface: #15151c; --fdn-surface-2: #1c1c24; --fdn-text: #f4f4f5; --fdn-text-2: #a1a1aa; --fdn-border: #27272a; --fdn-header-bg: #101016; --fdn-shadow: 0 1px 3px rgba(0, 0, 0, .5); --fdn-ad-bg: #1c1c24; --fdn-accent-contrast: #ffffff; } /* ------------------------------------------------------------------------- * 2. Reset / base * ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--fdn-font); font-size: var(--fdn-fs-base); line-height: var(--fdn-lh); color: var(--fdn-text); background: var(--fdn-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: var(--fdn-accent); } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.35; font-weight: 700; } p { margin: 0 0 1em; } ul, ol { margin: 0; padding: 0; } button { font-family: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--fdn-accent); outline-offset: 2px; } .fdn-container { width: 100%; max-width: var(--fdn-maxw); margin-inline: auto; padding-inline: 16px; } .fdn-main { padding-block: 20px 40px; } .fdn-screen-reader-text, .fdn-searchform__label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .fdn-skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 1000; background: var(--fdn-accent); color: var(--fdn-accent-contrast); padding: 10px 16px; border-radius: 0 0 var(--fdn-radius-sm) 0; } .fdn-skip-link:focus { inset-inline-start: 0; color: var(--fdn-accent-contrast); } /* ------------------------------------------------------------------------- * 3. Header * ---------------------------------------------------------------------- */ .fdn-header { position: sticky; top: 0; z-index: 100; background: var(--fdn-header-bg); border-bottom: 1px solid var(--fdn-border); } .fdn-header__bar { border-bottom: 1px solid var(--fdn-border); } .fdn-header__inner { display: flex; align-items: center; gap: 12px; min-height: 58px; } .fdn-header__brand { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; } .fdn-brand { display: inline-flex; align-items: center; max-width: 100%; } .fdn-logo { max-height: 40px; width: auto; } .fdn-logo--dark { display: none; } [data-theme="dark"] .fdn-logo--light { display: none; } [data-theme="dark"] .fdn-logo--dark { display: block; } .fdn-logo--text { font-size: 1.4rem; font-weight: 800; color: var(--fdn-text); white-space: nowrap; } .fdn-header__actions { display: flex; align-items: center; gap: 4px; } .fdn-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: var(--fdn-radius-sm); background: transparent; color: var(--fdn-text); line-height: 0; } .fdn-iconbtn:hover { background: var(--fdn-surface-2); color: var(--fdn-accent); } /* Theme toggle: show the icon for the mode you'd switch TO. */ .fdn-theme-toggle__sun { display: none; } .fdn-theme-toggle__moon { display: inline-flex; } [data-theme="dark"] .fdn-theme-toggle__sun { display: inline-flex; } [data-theme="dark"] .fdn-theme-toggle__moon { display: none; } /* ------------------------------------------------------------------------- * 4. Navigation (mobile drawer → desktop bar) * ---------------------------------------------------------------------- */ .fdn-nav { display: none; border-top: 1px solid var(--fdn-border); } .fdn-nav.is-open { display: block; } .fdn-menu { list-style: none; display: flex; flex-direction: column; } .fdn-menu li { border-bottom: 1px solid var(--fdn-border); } .fdn-menu a { display: block; padding: 12px 4px; font-weight: 600; color: var(--fdn-text); } .fdn-menu a:hover { color: var(--fdn-accent); } .fdn-menu .sub-menu { list-style: none; padding-inline-start: 14px; } /* ------------------------------------------------------------------------- * 5. Breaking news strip * ---------------------------------------------------------------------- */ .fdn-breaking { background: var(--fdn-surface); border-bottom: 1px solid var(--fdn-border); } .fdn-breaking__inner { display: flex; align-items: center; gap: 12px; min-height: 44px; } .fdn-breaking__label { flex: 0 0 auto; background: var(--fdn-accent); color: var(--fdn-accent-contrast); font-weight: 700; font-size: .85rem; padding: 4px 12px; border-radius: var(--fdn-radius-sm); } .fdn-breaking__list { list-style: none; display: flex; gap: 22px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .fdn-breaking__list li { flex: 0 0 auto; } .fdn-breaking__list a { font-size: .92rem; color: var(--fdn-text-2); font-weight: 600; } .fdn-breaking__list a:hover { color: var(--fdn-accent); } /* ------------------------------------------------------------------------- * 6. Search panel + form * ---------------------------------------------------------------------- */ .fdn-search-panel { background: var(--fdn-surface); border-bottom: 1px solid var(--fdn-border); padding-block: 14px; } .fdn-search-panel[hidden] { display: none; } .fdn-searchform__row { display: flex; gap: 8px; } .fdn-searchform__field { flex: 1 1 auto; min-width: 0; padding: 11px 14px; font-size: 1rem; color: var(--fdn-text); background: var(--fdn-bg); border: 1px solid var(--fdn-border); border-radius: var(--fdn-radius-sm); } .fdn-searchform__submit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; border: 0; border-radius: var(--fdn-radius-sm); background: var(--fdn-accent); color: var(--fdn-accent-contrast); } /* ------------------------------------------------------------------------- * 7. Buttons * ---------------------------------------------------------------------- */ .fdn-btn { display: inline-block; padding: 11px 22px; font-weight: 700; border-radius: var(--fdn-radius-sm); background: var(--fdn-accent); color: var(--fdn-accent-contrast); border: 0; } .fdn-btn:hover { color: var(--fdn-accent-contrast); filter: brightness(1.08); } /* ------------------------------------------------------------------------- * 8. Section headings * ---------------------------------------------------------------------- */ .fdn-block { margin-block: 28px; } .fdn-section__title { font-size: 1.25rem; margin-bottom: 14px; padding-inline-start: 12px; border-inline-start: 4px solid var(--fdn-accent); } .fdn-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .fdn-section__head .fdn-section__title { margin-bottom: 0; } .fdn-section__more { flex: 0 0 auto; font-size: .9rem; font-weight: 700; color: var(--fdn-accent); } /* ------------------------------------------------------------------------- * 9. Lead (hero) story * ---------------------------------------------------------------------- */ .fdn-lead { margin-bottom: 26px; } .fdn-lead__card { background: var(--fdn-surface); border: 1px solid var(--fdn-border); border-radius: var(--fdn-radius); overflow: hidden; box-shadow: var(--fdn-shadow); } .fdn-lead__media { display: block; aspect-ratio: 16 / 9; background: var(--fdn-surface-2); } .fdn-lead__img { width: 100%; height: 100%; object-fit: cover; } .fdn-lead__body { padding: 18px; } .fdn-lead__title { font-size: 1.5rem; line-height: 1.3; margin-block: 8px; } .fdn-lead__excerpt { color: var(--fdn-text-2); font-size: 1rem; margin-bottom: 10px; } /* ------------------------------------------------------------------------- * 10. Cards + grid * ---------------------------------------------------------------------- */ .fdn-grid { display: grid; grid-template-columns: 1fr; gap: var(--fdn-gap); } .fdn-card { background: var(--fdn-surface); border: 1px solid var(--fdn-border); border-radius: var(--fdn-radius); overflow: hidden; box-shadow: var(--fdn-shadow); display: flex; flex-direction: column; } .fdn-card__media { display: block; aspect-ratio: 16 / 9; background: var(--fdn-surface-2); overflow: hidden; } .fdn-card__img { width: 100%; height: 100%; object-fit: cover; } .fdn-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--fdn-surface-2), var(--fdn-border)); } .fdn-card__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; } .fdn-card__cat { align-self: flex-start; font-size: .72rem; font-weight: 700; color: var(--fdn-accent); text-transform: uppercase; } .fdn-card__title { font-size: 1.05rem; line-height: 1.4; margin: 0; } .fdn-card__title a { color: var(--fdn-text); } .fdn-card__title a:hover { color: var(--fdn-accent); } .fdn-card__meta { margin-top: auto; font-size: .8rem; color: var(--fdn-text-2); } /* Row variant (thumb on the side) — used where size = thumb. */ .fdn-card--row { flex-direction: row; align-items: stretch; } .fdn-card--row .fdn-card__media { flex: 0 0 120px; aspect-ratio: auto; } .fdn-card--row .fdn-card__body { padding: 10px 12px; } .fdn-card--row .fdn-card__title { font-size: .95rem; } /* ------------------------------------------------------------------------- * 11. Two-column layout * ---------------------------------------------------------------------- */ .fdn-layout { display: grid; grid-template-columns: 1fr; gap: 28px; } .fdn-layout__sidebar { min-width: 0; } .fdn-layout__primary { min-width: 0; } /* ------------------------------------------------------------------------- * 12. Single article * ---------------------------------------------------------------------- */ .fdn-single { background: var(--fdn-surface); border: 1px solid var(--fdn-border); border-radius: var(--fdn-radius); padding: 18px; box-shadow: var(--fdn-shadow); } .fdn-single__cat { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--fdn-accent); margin-bottom: 6px; } .fdn-single__title { font-size: 1.7rem; line-height: 1.3; margin-block: 6px 14px; } .fdn-single__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: .85rem; color: var(--fdn-text-2); padding-bottom: 14px; border-bottom: 1px solid var(--fdn-border); } .fdn-single__meta a { color: var(--fdn-text-2); font-weight: 600; } .fdn-single__meta a:hover { color: var(--fdn-accent); } .fdn-single__meta span { display: inline-flex; align-items: center; gap: 5px; } .fdn-single__meta svg { opacity: .8; } .fdn-meta__updated { color: var(--fdn-accent); } .fdn-single__media { margin: 16px 0; } .fdn-single__img { width: 100%; border-radius: var(--fdn-radius-sm); aspect-ratio: 16 / 9; object-fit: cover; background: var(--fdn-surface-2); } .fdn-single__caption { font-size: .8rem; color: var(--fdn-text-2); text-align: center; margin-top: 6px; } /* Article body */ .fdn-single__content, .entry-content { font-size: 1.08rem; line-height: var(--fdn-lh); } .entry-content p { margin: 0 0 1.15em; } .entry-content h2 { font-size: 1.4rem; margin: 1.4em 0 .5em; } .entry-content h3 { font-size: 1.18rem; margin: 1.2em 0 .5em; } .entry-content a { color: var(--fdn-accent); text-decoration: underline; text-underline-offset: 3px; } .entry-content img { border-radius: var(--fdn-radius-sm); margin: 1em auto; } .entry-content figure { margin: 1.2em 0; } .entry-content figcaption { font-size: .82rem; color: var(--fdn-text-2); text-align: center; } .entry-content ul, .entry-content ol { margin: 0 0 1.15em; padding-inline-start: 1.4em; } .entry-content li { margin-bottom: .4em; } .entry-content blockquote { margin: 1.2em 0; padding: 12px 16px; border-inline-start: 4px solid var(--fdn-accent); background: var(--fdn-surface-2); border-radius: 0 var(--fdn-radius-sm) var(--fdn-radius-sm) 0; color: var(--fdn-text-2); } .entry-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .95rem; } .entry-content th, .entry-content td { border: 1px solid var(--fdn-border); padding: 8px 10px; text-align: start; } .entry-content th { background: var(--fdn-surface-2); font-weight: 700; } .fdn-single__source { margin-top: 16px; font-size: .9rem; color: var(--fdn-text-2); } .fdn-single__source a { color: var(--fdn-accent); } .fdn-single__tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .fdn-single__tags-label { font-weight: 700; color: var(--fdn-text-2); font-size: .9rem; } .fdn-single__tags a { font-size: .82rem; padding: 4px 10px; border: 1px solid var(--fdn-border); border-radius: 20px; color: var(--fdn-text-2); } .fdn-single__tags a:hover { border-color: var(--fdn-accent); color: var(--fdn-accent); } /* Page (static) */ .fdn-page { background: var(--fdn-surface); border: 1px solid var(--fdn-border); border-radius: var(--fdn-radius); padding: 20px; box-shadow: var(--fdn-shadow); } .fdn-page__title { font-size: 1.7rem; margin-bottom: 14px; } .fdn-page__media { margin: 14px 0; } .fdn-page__img { width: 100%; border-radius: var(--fdn-radius-sm); } /* ------------------------------------------------------------------------- * 13. Share row * ---------------------------------------------------------------------- */ .fdn-share { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 16px; border-top: 1px solid var(--fdn-border); } .fdn-share__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--fdn-text-2); font-size: .9rem; } .fdn-share__btn { font-size: .82rem; font-weight: 600; padding: 7px 14px; border-radius: var(--fdn-radius-sm); border: 1px solid var(--fdn-border); background: var(--fdn-surface-2); color: var(--fdn-text); } .fdn-share__btn:hover { border-color: var(--fdn-accent); color: var(--fdn-accent); } .fdn-share__btn--fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; } .fdn-share__btn--x:hover { background: #000; color: #fff; border-color: #000; } .fdn-share__btn--wa:hover { background: #25d366; color: #fff; border-color: #25d366; } .fdn-share__btn--tg:hover { background: #229ed9; color: #fff; border-color: #229ed9; } /* ------------------------------------------------------------------------- * 14. Author box + author page * ---------------------------------------------------------------------- */ .fdn-authorbox { margin-top: 24px; display: flex; gap: 14px; padding: 16px; background: var(--fdn-surface-2); border: 1px solid var(--fdn-border); border-radius: var(--fdn-radius); } .fdn-authorbox__avatar img { border-radius: 50%; } .fdn-authorbox__name { font-size: 1.05rem; margin-bottom: 4px; } .fdn-authorbox__bio { font-size: .9rem; color: var(--fdn-text-2); margin-bottom: 6px; } .fdn-authorbox__more { font-size: .85rem; font-weight: 700; color: var(--fdn-accent); } .fdn-author-head { display: flex; gap: 18px; align-items: flex-start; background: var(--fdn-surface); border: 1px solid var(--fdn-border); border-radius: var(--fdn-radius); padding: 20px; margin-bottom: 24px; box-shadow: var(--fdn-shadow); } .fdn-author-head__img { border-radius: 50%; } .fdn-author-head__name { font-size: 1.5rem; margin-bottom: 4px; } .fdn-author-head__count { font-size: .85rem; color: var(--fdn-text-2); margin-bottom: 8px; } .fdn-author-head__bio { color: var(--fdn-text-2); margin-bottom: 10px; } .fdn-author-head__social { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; } .fdn-author-head__social a { font-weight: 600; color: var(--fdn-accent); font-size: .9rem; } /* ------------------------------------------------------------------------- * 15. Breadcrumb * ---------------------------------------------------------------------- */ .fdn-breadcrumb { margin-bottom: 12px; font-size: .82rem; color: var(--fdn-text-2); } .fdn-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .fdn-breadcrumb li { display: inline-flex; align-items: center; } .fdn-breadcrumb li:not(:last-child)::after { content: "‹"; margin-inline-start: 6px; color: var(--fdn-border); } .fdn-breadcrumb a { color: var(--fdn-text-2); } .fdn-breadcrumb a:hover { color: var(--fdn-accent); } .fdn-breadcrumb [aria-current="page"] { color: var(--fdn-text); font-weight: 600; } /* ------------------------------------------------------------------------- * 16. Most read * ---------------------------------------------------------------------- */ .fdn-mostread { background: var(--fdn-surface); border: 1px solid var(--fdn-border); border-radius: var(--fdn-radius); padding: 16px; margin-bottom: 24px; } .fdn-mostread__list { list-style: none; counter-reset: fdn-mr; } .fdn-mostread__item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--fdn-border); } .fdn-mostread__item:last-child { border-bottom: 0; padding-bottom: 0; } .fdn-mostread__rank { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; color: var(--fdn-accent); border: 2px solid var(--fdn-accent); border-radius: 50%; } .fdn-mostread__link { font-size: .95rem; font-weight: 600; color: var(--fdn-text); line-height: 1.5; } .fdn-mostread__link:hover { color: var(--fdn-accent); } /* ------------------------------------------------------------------------- * 17. Related * ---------------------------------------------------------------------- */ .fdn-related { margin-top: 30px; } /* ------------------------------------------------------------------------- * 18. Category / archive heads + internal link lists * ---------------------------------------------------------------------- */ .fdn-archive__head { margin-bottom: 20px; } .fdn-archive__title { font-size: 1.7rem; } .fdn-search__term, .fdn-archive__title .fdn-search__term { color: var(--fdn-accent); } .fdn-archive__desc { color: var(--fdn-text-2); max-width: 70ch; } .fdn-cat-links { margin-top: 30px; } .fdn-cat-links__list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; } .fdn-cat-links__list a { display: inline-block; padding: 7px 16px; background: var(--fdn-surface); border: 1px solid var(--fdn-border); border-radius: 20px; font-size: .88rem; font-weight: 600; color: var(--fdn-text); } .fdn-cat-links__list a:hover { border-color: var(--fdn-accent); color: var(--fdn-accent); } .fdn-empty { background: var(--fdn-surface); border: 1px solid var(--fdn-border); border-radius: var(--fdn-radius); padding: 22px; color: var(--fdn-text-2); text-align: center; } /* ------------------------------------------------------------------------- * 19. Search results term highlight (server-safe; whole field) * ---------------------------------------------------------------------- */ .fdn-noresults { display: flex; flex-direction: column; gap: 18px; } .fdn-noresults .fdn-searchform { max-width: 520px; } /* ------------------------------------------------------------------------- * 20. 404 * ---------------------------------------------------------------------- */ .fdn-404 { text-align: center; } .fdn-404__code { font-size: 4.5rem; font-weight: 800; color: var(--fdn-accent); line-height: 1; margin-bottom: 8px; } .fdn-404__msg { font-size: 1.1rem; color: var(--fdn-text-2); } .fdn-404 .fdn-searchform { max-width: 480px; margin: 18px auto; } .fdn-404__home { margin: 16px 0 26px; } .fdn-404 .fdn-cat-links__list, .fdn-404 .fdn-grid { text-align: start; } .fdn-404 .fdn-cat-links__list { justify-content: center; } /* ------------------------------------------------------------------------- * 21. Comments * ---------------------------------------------------------------------- */ .fdn-comments { margin-top: 30px; background: var(--fdn-surface); border: 1px solid var(--fdn-border); border-radius: var(--fdn-radius); padding: 18px; } .fdn-comments__title { font-size: 1.25rem; margin-bottom: 16px; } .fdn-comments__list { list-style: none; } .fdn-comments__list ol { list-style: none; padding-inline-start: 20px; } .fdn-comments .comment-body { padding: 12px 0; border-bottom: 1px solid var(--fdn-border); } .fdn-comments .comment-author { font-weight: 700; font-size: .95rem; } .fdn-comments .comment-author img { border-radius: 50%; vertical-align: middle; margin-inline-end: 8px; } .fdn-comments .comment-meta { font-size: .78rem; color: var(--fdn-text-2); } .fdn-comments .comment-meta a { color: var(--fdn-text-2); } .fdn-comments__closed { color: var(--fdn-text-2); } .fdn-comments input[type="text"], .fdn-comments input[type="email"], .fdn-comments input[type="url"], .fdn-comments textarea { width: 100%; padding: 10px 12px; margin-bottom: 12px; background: var(--fdn-bg); border: 1px solid var(--fdn-border); border-radius: var(--fdn-radius-sm); color: var(--fdn-text); font-family: inherit; } .fdn-comments .comment-reply-link { color: var(--fdn-accent); font-weight: 600; font-size: .85rem; } /* ------------------------------------------------------------------------- * 22. Ads — reserved heights to guarantee zero CLS * ---------------------------------------------------------------------- */ .fdn-ad { margin: 18px 0; background: var(--fdn-ad-bg); border: 1px dashed var(--fdn-border); border-radius: var(--fdn-radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .fdn-ad__label { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fdn-text-2); padding-top: 4px; } .fdn-ad__inner { display: flex; align-items: center; justify-content: center; width: 100%; flex: 1 1 auto; } .fdn-ad__inner img { margin: 0 auto; } /* Reserved minimum heights per placement (mobile-first). */ .fdn-ad--leaderboard { min-height: 110px; } .fdn-ad--top { min-height: 110px; } .fdn-ad--in-content { min-height: 280px; } .fdn-ad--in-grid { min-height: 110px; grid-column: 1 / -1; } .fdn-ad--end { min-height: 280px; } .fdn-ad--sidebar { min-height: 250px; } /* ------------------------------------------------------------------------- * 23. Pagination * ---------------------------------------------------------------------- */ .fdn-pagination { margin-top: 28px; } .fdn-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .fdn-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--fdn-border); border-radius: var(--fdn-radius-sm); background: var(--fdn-surface); font-weight: 600; color: var(--fdn-text); } .fdn-pagination .page-numbers:hover { border-color: var(--fdn-accent); color: var(--fdn-accent); } .fdn-pagination .page-numbers.current { background: var(--fdn-accent); color: var(--fdn-accent-contrast); border-color: var(--fdn-accent); } /* ------------------------------------------------------------------------- * 24. Footer * ---------------------------------------------------------------------- */ .fdn-footer { margin-top: 40px; background: var(--fdn-header-bg); border-top: 1px solid var(--fdn-border); } .fdn-footer__grid { display: grid; grid-template-columns: 1fr; gap: 26px; padding-block: 32px; } .fdn-footer__brand .fdn-logo { max-height: 38px; } .fdn-footer__brand .fdn-logo--text { font-size: 1.2rem; } .fdn-footer__tagline { color: var(--fdn-text-2); font-size: .9rem; margin-top: 10px; } .fdn-footer__heading { font-size: 1.05rem; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--fdn-accent); display: inline-block; } .fdn-footer__social { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; } .fdn-footer__social a { font-size: .85rem; font-weight: 600; color: var(--fdn-text-2); } .fdn-footer__social a:hover { color: var(--fdn-accent); } .fdn-footer__menu, .fdn-footer__cats ul { list-style: none; } .fdn-footer__menu li, .fdn-footer__cats li { margin-bottom: 8px; } .fdn-footer__menu a, .fdn-footer__cats a { color: var(--fdn-text-2); font-size: .9rem; } .fdn-footer__menu a:hover, .fdn-footer__cats a:hover { color: var(--fdn-accent); } .fdn-footer__bottom { border-top: 1px solid var(--fdn-border); padding-block: 16px; text-align: center; } .fdn-footer__bottom p { margin: 0; font-size: .82rem; color: var(--fdn-text-2); } /* ------------------------------------------------------------------------- * 25. Responsive — tablet * ---------------------------------------------------------------------- */ @media (min-width: 600px) { .fdn-grid { grid-template-columns: repeat(2, 1fr); } .fdn-lead__media { aspect-ratio: 21 / 9; } .fdn-lead__title { font-size: 1.8rem; } .fdn-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } .fdn-ad--leaderboard { min-height: 90px; } } /* ------------------------------------------------------------------------- * 26. Responsive — desktop * ---------------------------------------------------------------------- */ @media (min-width: 960px) { :root { --fdn-fs-base: 17px; } /* Nav becomes a horizontal bar; the hamburger is hidden. */ .fdn-menu-toggle { display: none; } .fdn-nav { display: block; border-top: 1px solid var(--fdn-border); } .fdn-menu { flex-direction: row; flex-wrap: wrap; gap: 4px; } .fdn-menu li { border-bottom: 0; } .fdn-menu > li > a { padding: 12px 14px; } .fdn-menu .sub-menu { position: absolute; z-index: 90; min-width: 200px; background: var(--fdn-surface); border: 1px solid var(--fdn-border); border-radius: var(--fdn-radius-sm); box-shadow: var(--fdn-shadow); padding: 6px; display: none; } .fdn-menu li { position: relative; } .fdn-menu li:hover > .sub-menu, .fdn-menu li:focus-within > .sub-menu { display: block; } .fdn-grid { grid-template-columns: repeat(3, 1fr); } /* Article layout: content + sticky sidebar. */ .fdn-layout { grid-template-columns: minmax(0, 1fr) 320px; } .fdn-layout__sidebar { position: sticky; top: 120px; align-self: start; } .fdn-lead { display: block; } .fdn-lead__card { display: grid; grid-template-columns: 1.4fr 1fr; } .fdn-lead__media { aspect-ratio: auto; height: 100%; } .fdn-lead__title { font-size: 2rem; } .fdn-single { padding: 28px; } .fdn-single__title { font-size: 2.1rem; } .fdn-single__content, .entry-content { font-size: 1.12rem; } .fdn-ad--in-grid { min-height: 90px; } } @media (min-width: 1200px) { .fdn-grid { gap: 20px; } } /* ------------------------------------------------------------------------- * 27. Motion / print * ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } @media print { .fdn-header, .fdn-footer, .fdn-ad, .fdn-share, .fdn-related, .fdn-mostread, .fdn-layout__sidebar, .fdn-breaking { display: none !important; } body { background: #fff; color: #000; } .fdn-single { border: 0; box-shadow: none; padding: 0; } } /* ------------------------------------------------------------------------- * 28. Load more / infinite scroll (progressive enhancement) * ---------------------------------------------------------------------- */ .fdn-loadmore { text-align: center; margin: 28px 0; min-height: 52px; } .fdn-loadmore__btn { display: inline-block; padding: 12px 28px; font-weight: 700; border-radius: var(--fdn-radius-sm); background: var(--fdn-accent); color: var(--fdn-accent-contrast); border: 0; } .fdn-loadmore__btn:hover { filter: brightness(1.08); } .fdn-loadmore__spinner, .fdn-loadmore__end { display: inline-flex; align-items: center; gap: 10px; color: var(--fdn-text-2); font-weight: 600; } .fdn-loadmore__spinner::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--fdn-border); border-top-color: var(--fdn-accent); border-radius: 50%; animation: fdn-spin .7s linear infinite; } @keyframes fdn-spin { to { transform: rotate(360deg); } } /* When JS load-more is active the numbered pagination is hidden visually but kept in the DOM so Googlebot still follows the page links (SEO-safe). */ .fdn-pagination--enhanced { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }