/* ========================================================================= Registro do Dia — Design System Classic WordPress theme ------------------------------------------------------------------------- */ /* ----------------------------------------------------------------- 1. DESIGN TOKENS — light (paper/cream) é o padrão. Tema escuro (navy) ativa via [data-theme="dark"] no . ----------------------------------------------------------------- */ :root { /* Fontes */ --rdd-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --rdd-font-display: 'Cormorant Garamond', Georgia, serif; --rdd-font-body: 'Lora', Georgia, serif; /* Escala tipográfica (modular, base 16) */ --rdd-fs-12: 0.75rem; --rdd-fs-14: 0.875rem; --rdd-fs-16: 1rem; --rdd-fs-18: 1.125rem; --rdd-fs-20: 1.25rem; --rdd-fs-24: 1.5rem; --rdd-fs-30: 1.875rem; --rdd-fs-36: 2.25rem; --rdd-fs-48: 3rem; --rdd-fs-60: 3.75rem; /* Espaçamento (escala 4px) */ --rdd-space-1: 0.25rem; --rdd-space-2: 0.5rem; --rdd-space-3: 0.75rem; --rdd-space-4: 1rem; --rdd-space-5: 1.25rem; --rdd-space-6: 1.5rem; --rdd-space-8: 2rem; --rdd-space-10: 2.5rem; --rdd-space-12: 3rem; --rdd-space-16: 4rem; --rdd-space-20: 5rem; /* Layout */ --rdd-container: 1100px; --rdd-container-narrow: 760px; --rdd-radius-sm: 6px; --rdd-radius: 10px; --rdd-radius-lg: 14px; /* Transições */ --rdd-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --rdd-transition: 220ms var(--rdd-ease); /* === Paleta LIGHT (paper/cream — default) === */ --rdd-bg: #2a2620; /* fundo externo (warm charcoal) */ --rdd-surface: #f4f0e8; /* superfície (cream) */ --rdd-surface-elev: #ffffff; /* card sobre cream */ --rdd-text: #1a1a1a; /* texto principal */ --rdd-text-muted: rgba(26, 26, 26, 0.62); --rdd-text-subtle: rgba(26, 26, 26, 0.4); --rdd-border: rgba(26, 26, 26, 0.12); --rdd-accent: #a01818; /* burgundy/crimson */ --rdd-accent-contrast: #f4f0e8; --rdd-link: #a01818; --rdd-link-hover: #7a1010; --rdd-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.08); --rdd-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08); } /* === Paleta DARK (navy) === */ [data-theme="dark"] { --rdd-bg: #05090f; --rdd-surface: #0b1020; --rdd-surface-elev: #121a33; --rdd-text: #f4f6ff; --rdd-text-muted: rgba(244, 246, 255, 0.7); --rdd-text-subtle: rgba(244, 246, 255, 0.45); --rdd-border: #2a355f; --rdd-accent: #4f79ff; --rdd-accent-contrast: #ffffff; --rdd-link: #4f79ff; --rdd-link-hover: #7a98ff; --rdd-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3); --rdd-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4); } /* ----------------------------------------------------------------- 2. RESET LEVE ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { margin: 0; font-family: var(--rdd-font-body); font-size: var(--rdd-fs-18); line-height: 1.65; color: var(--rdd-text); background: var(--rdd-bg); transition: background var(--rdd-transition), color var(--rdd-transition); } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--rdd-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--rdd-transition); } a:hover, a:focus { color: var(--rdd-link-hover); } /* Acessibilidade */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--rdd-accent); color: var(--rdd-accent-contrast); padding: var(--rdd-space-3) var(--rdd-space-4); z-index: 9999; } .skip-link:focus { left: var(--rdd-space-4); top: var(--rdd-space-4); } /* ----------------------------------------------------------------- 3. TIPOGRAFIA ----------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--rdd-font-serif); font-weight: 700; line-height: 1.18; margin: 0 0 var(--rdd-space-4); color: var(--rdd-text); letter-spacing: -0.01em; } h1 { font-size: clamp(var(--rdd-fs-36), 5vw, var(--rdd-fs-60)); font-weight: 900; } h2 { font-size: clamp(var(--rdd-fs-30), 3.5vw, var(--rdd-fs-48)); } h3 { font-size: var(--rdd-fs-24); } h4 { font-size: var(--rdd-fs-20); } h5 { font-size: var(--rdd-fs-18); } h6 { font-size: var(--rdd-fs-16); text-transform: uppercase; letter-spacing: 0.12em; } p, ul, ol, blockquote, table, pre { margin: 0 0 var(--rdd-space-5); } blockquote { border-left: 3px solid var(--rdd-accent); padding: var(--rdd-space-2) var(--rdd-space-6); font-family: var(--rdd-font-display); font-style: italic; font-size: var(--rdd-fs-24); color: var(--rdd-text); } code, pre { font-family: 'Menlo', 'Consolas', 'Courier New', monospace; font-size: 0.92em; } pre { background: var(--rdd-surface-elev); padding: var(--rdd-space-4); border-radius: var(--rdd-radius); overflow-x: auto; } hr { border: 0; border-top: 1px solid var(--rdd-border); margin: var(--rdd-space-10) 0; } .muted { color: var(--rdd-text-muted); } .eyebrow, .entry-eyebrow, .card__eyebrow, .hero__eyebrow { font-family: var(--rdd-font-body); font-size: var(--rdd-fs-12); text-transform: uppercase; letter-spacing: 0.18em; color: var(--rdd-accent); margin: 0 0 var(--rdd-space-3); font-weight: 600; } /* ----------------------------------------------------------------- 4. LAYOUT BASE ----------------------------------------------------------------- */ .container { width: 100%; max-width: var(--rdd-container); margin-inline: auto; padding-inline: var(--rdd-space-6); } .site-main { background: var(--rdd-surface); color: var(--rdd-text); padding-block: var(--rdd-space-10) var(--rdd-space-16); min-height: 60vh; } .layout { display: block; } .layout--with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rdd-space-10); } @media (min-width: 960px) { .layout--with-sidebar { grid-template-columns: minmax(0, 1fr) 280px; } } /* ----------------------------------------------------------------- 5. HEADER ----------------------------------------------------------------- */ .site-header { background: var(--rdd-surface); border-bottom: 1px solid var(--rdd-border); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); } .site-header__inner { display: flex; align-items: center; gap: var(--rdd-space-6); padding-block: var(--rdd-space-4); } .site-branding { display: flex; flex-direction: column; min-width: 0; } .site-title { font-family: var(--rdd-font-serif); font-size: var(--rdd-fs-24); font-weight: 900; margin: 0; letter-spacing: -0.015em; } .site-title a { color: var(--rdd-text); text-decoration: none; } .site-description { margin: 0; font-size: var(--rdd-fs-12); text-transform: uppercase; letter-spacing: 0.18em; color: var(--rdd-text-muted); } .site-nav { margin-inline-start: auto; } .site-nav__menu { display: none; list-style: none; margin: 0; padding: 0; gap: var(--rdd-space-6); } @media (min-width: 768px) { .site-nav__menu { display: flex; } } .site-nav__menu a { color: var(--rdd-text); text-decoration: none; font-size: var(--rdd-fs-14); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; } .site-nav__menu a:hover { color: var(--rdd-accent); } .site-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--rdd-border); background: transparent; border-radius: var(--rdd-radius); cursor: pointer; color: var(--rdd-text); } @media (min-width: 768px) { .site-nav__toggle { display: none; } } .site-header__actions { display: flex; align-items: center; gap: var(--rdd-space-3); } /* ----------------------------------------------------------------- 6. THEME TOGGLE ----------------------------------------------------------------- */ .rdd-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--rdd-border); background: transparent; border-radius: 999px; cursor: pointer; color: var(--rdd-text); position: relative; transition: background var(--rdd-transition), color var(--rdd-transition), border-color var(--rdd-transition); } .rdd-theme-toggle:hover { background: var(--rdd-accent); color: var(--rdd-accent-contrast); border-color: var(--rdd-accent); } .rdd-theme-toggle__icon { font-size: 18px; line-height: 1; } [data-theme="light"] .rdd-theme-toggle__icon--dark, [data-theme="dark"] .rdd-theme-toggle__icon--light { display: none; } /* ----------------------------------------------------------------- 7. HERO (front-page) ----------------------------------------------------------------- */ .hero { background: var(--rdd-bg); color: #f4f0e8; padding-block: var(--rdd-space-20) var(--rdd-space-16); border-bottom: 1px solid rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top left, rgba(160, 24, 24, 0.15), transparent 50%), radial-gradient(ellipse at bottom right, rgba(244, 240, 232, 0.05), transparent 50%); pointer-events: none; } .hero__inner { position: relative; max-width: 760px; text-align: center; } .hero__eyebrow { color: #d4a8a8; } .hero__title { font-size: clamp(var(--rdd-fs-48), 7vw, var(--rdd-fs-60)); color: #f4f0e8; margin-bottom: var(--rdd-space-5); } .hero__lead { font-family: var(--rdd-font-display); font-size: var(--rdd-fs-24); font-style: italic; color: rgba(244, 240, 232, 0.85); margin-bottom: var(--rdd-space-8); } /* ----------------------------------------------------------------- 8. BUTTONS ----------------------------------------------------------------- */ .btn, button.search-submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--rdd-space-2); padding: var(--rdd-space-3) var(--rdd-space-6); font-family: var(--rdd-font-body); font-weight: 700; font-size: var(--rdd-fs-14); letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--rdd-radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform var(--rdd-transition), background var(--rdd-transition), color var(--rdd-transition), border-color var(--rdd-transition); } .btn--primary, button.search-submit { background: var(--rdd-accent); color: var(--rdd-accent-contrast); } .btn--primary:hover, button.search-submit:hover { background: var(--rdd-link-hover); color: var(--rdd-accent-contrast); transform: translateY(-1px); } .btn--ghost { background: transparent; border-color: var(--rdd-border); color: var(--rdd-text); } .btn--ghost:hover { border-color: var(--rdd-accent); color: var(--rdd-accent); } /* ----------------------------------------------------------------- 9. CARDS / GRID ----------------------------------------------------------------- */ .section { padding-block: var(--rdd-space-12); } .section__header { margin-bottom: var(--rdd-space-8); } .section__title { font-size: var(--rdd-fs-30); margin: 0; } .card-grid { display: grid; gap: var(--rdd-space-8); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .card { background: var(--rdd-surface-elev); border: 1px solid var(--rdd-border); border-radius: var(--rdd-radius-lg); overflow: hidden; transition: transform var(--rdd-transition), box-shadow var(--rdd-transition); } .card:hover { transform: translateY(-3px); box-shadow: var(--rdd-shadow); } .card__link { display: block; color: inherit; text-decoration: none; } .card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--rdd-border); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--rdd-ease); } .card:hover .card__media img { transform: scale(1.04); } .card__body { padding: var(--rdd-space-6); } .card__title { font-size: var(--rdd-fs-20); margin: 0 0 var(--rdd-space-3); } .card__excerpt { color: var(--rdd-text-muted); font-size: var(--rdd-fs-16); margin: 0 0 var(--rdd-space-4); } .card__meta { font-size: var(--rdd-fs-12); color: var(--rdd-text-subtle); text-transform: uppercase; letter-spacing: 0.12em; margin: 0; } /* ----------------------------------------------------------------- 10. POST LIST / SINGLE ----------------------------------------------------------------- */ .post-list { display: flex; flex-direction: column; gap: var(--rdd-space-12); } .entry--list { display: grid; gap: var(--rdd-space-6); grid-template-columns: 1fr; padding-bottom: var(--rdd-space-10); border-bottom: 1px solid var(--rdd-border); } @media (min-width: 720px) { .entry--list { grid-template-columns: 280px 1fr; } } .entry__media img { border-radius: var(--rdd-radius-lg); width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; } .entry-title { font-family: var(--rdd-font-serif); margin: 0 0 var(--rdd-space-3); } .entry--list .entry-title { font-size: var(--rdd-fs-24); } .entry--list .entry-title a { color: var(--rdd-text); text-decoration: none; } .entry--list .entry-title a:hover { color: var(--rdd-accent); } .entry-meta { font-size: var(--rdd-fs-12); color: var(--rdd-text-subtle); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--rdd-space-4); } .entry-meta a { color: inherit; text-decoration: none; } .entry-summary { color: var(--rdd-text-muted); } .entry__read-more { display: inline-block; margin-top: var(--rdd-space-3); font-size: var(--rdd-fs-14); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none; color: var(--rdd-accent); } /* Single post */ .entry--single { max-width: var(--rdd-container-narrow); margin-inline: auto; } .entry--single .entry-title { font-size: clamp(var(--rdd-fs-36), 4.5vw, var(--rdd-fs-48)); margin-bottom: var(--rdd-space-3); } .entry-subtitle { font-family: var(--rdd-font-display, var(--rdd-font-serif)); font-weight: 400; color: var(--rdd-text-muted); line-height: 1.4; margin: 0 0 var(--rdd-space-4); } .entry--single .entry-subtitle { font-size: clamp(var(--rdd-fs-18), 2.2vw, var(--rdd-fs-24)); } .entry-subtitle--list { font-size: var(--rdd-fs-16); margin-bottom: var(--rdd-space-3); } .entry--single .entry-content { font-size: var(--rdd-fs-18); line-height: 1.75; } .entry-thumbnail { margin: 0 0 var(--rdd-space-8); } .entry-thumbnail img { width: 100%; border-radius: var(--rdd-radius-lg); } .entry-thumbnail figcaption { font-size: var(--rdd-fs-12); color: var(--rdd-text-muted); margin-top: var(--rdd-space-2); font-style: italic; text-align: center; } .entry-footer { margin-top: var(--rdd-space-8); padding-top: var(--rdd-space-6); border-top: 1px solid var(--rdd-border); font-size: var(--rdd-fs-14); color: var(--rdd-text-muted); display: flex; flex-wrap: wrap; gap: var(--rdd-space-6); } .post-navigation { max-width: var(--rdd-container-narrow); margin: var(--rdd-space-12) auto 0; } .post-navigation .nav-links { display: grid; gap: var(--rdd-space-6); grid-template-columns: 1fr 1fr; } .post-navigation a { text-decoration: none; color: var(--rdd-text); } /* ----------------------------------------------------------------- 11. PAGINAÇÃO ----------------------------------------------------------------- */ .pagination { margin-top: var(--rdd-space-12); display: flex; gap: var(--rdd-space-2); justify-content: center; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--rdd-space-3); border: 1px solid var(--rdd-border); border-radius: var(--rdd-radius); text-decoration: none; color: var(--rdd-text); font-size: var(--rdd-fs-14); } .pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--rdd-accent); color: var(--rdd-accent-contrast); border-color: var(--rdd-accent); } /* ----------------------------------------------------------------- 12. SIDEBAR / WIDGETS ----------------------------------------------------------------- */ .site-sidebar .widget { margin-bottom: var(--rdd-space-8); padding-bottom: var(--rdd-space-8); border-bottom: 1px solid var(--rdd-border); } .site-sidebar .widget:last-child { border-bottom: none; } .widget-title { font-family: var(--rdd-font-serif); font-size: var(--rdd-fs-18); margin: 0 0 var(--rdd-space-4); text-transform: uppercase; letter-spacing: 0.1em; } .widget ul { list-style: none; padding: 0; margin: 0; } .widget li { padding: var(--rdd-space-2) 0; border-bottom: 1px dashed var(--rdd-border); } .widget li:last-child { border-bottom: none; } .widget a { color: var(--rdd-text); text-decoration: none; } .widget a:hover { color: var(--rdd-accent); } /* ----------------------------------------------------------------- 13. SEARCH FORM ----------------------------------------------------------------- */ .search-form { display: flex; gap: var(--rdd-space-2); max-width: 480px; margin-block: var(--rdd-space-4); } .search-field { flex: 1; padding: var(--rdd-space-3) var(--rdd-space-4); border: 1px solid var(--rdd-border); border-radius: var(--rdd-radius); background: var(--rdd-surface-elev); color: var(--rdd-text); font-family: inherit; font-size: var(--rdd-fs-16); } .search-field:focus { outline: none; border-color: var(--rdd-accent); box-shadow: 0 0 0 3px rgba(160, 24, 24, 0.15); } [data-theme="dark"] .search-field:focus { box-shadow: 0 0 0 3px rgba(79, 121, 255, 0.2); } /* ----------------------------------------------------------------- 14. 404 ----------------------------------------------------------------- */ .error-404 { max-width: var(--rdd-container-narrow); margin-inline: auto; text-align: center; padding-block: var(--rdd-space-16); } .error-404__eyebrow { color: var(--rdd-accent); font-size: var(--rdd-fs-14); text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; margin: 0 0 var(--rdd-space-3); } .error-404__title { font-size: clamp(var(--rdd-fs-36), 5vw, var(--rdd-fs-48)); } .error-404__lead { color: var(--rdd-text-muted); font-family: var(--rdd-font-display); font-style: italic; font-size: var(--rdd-fs-20); margin-bottom: var(--rdd-space-8); } .error-404 .search-form { margin-inline: auto; } /* ----------------------------------------------------------------- 15. FOOTER ----------------------------------------------------------------- */ .site-footer { background: var(--rdd-bg); color: rgba(244, 240, 232, 0.85); padding-block: var(--rdd-space-12); border-top: 1px solid rgba(255, 255, 255, 0.04); } .site-footer a { color: rgba(244, 240, 232, 0.85); text-decoration: none; } .site-footer a:hover { color: #f4f0e8; } .site-footer__inner { display: flex; flex-direction: column; gap: var(--rdd-space-6); text-align: center; } .site-footer__menu { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--rdd-space-6); justify-content: center; font-size: var(--rdd-fs-12); text-transform: uppercase; letter-spacing: 0.18em; } .site-footer__copy { margin: 0; font-size: var(--rdd-fs-14); color: rgba(244, 240, 232, 0.6); } /* ----------------------------------------------------------------- 16. UTILITÁRIOS WORDPRESS ----------------------------------------------------------------- */ .alignwide { max-width: calc(var(--rdd-container) - var(--rdd-space-6) * 2); margin-inline: auto; } .alignfull { max-width: 100%; width: 100vw; margin-left: calc(50% - 50vw); } .alignleft { float: left; margin-right: var(--rdd-space-6); } .alignright { float: right; margin-left: var(--rdd-space-6); } .aligncenter { display: block; margin-inline: auto; } .wp-caption, .wp-caption-text, .gallery-caption, .bypostauthor { display: block; } .wp-caption-text { font-size: var(--rdd-fs-12); color: var(--rdd-text-muted); text-align: center; font-style: italic; margin-top: var(--rdd-space-2); } .sticky::before { content: '★ ' attr(data-sticky-label, 'Em destaque'); } /* ----------------------------------------------------------------- 17. MOBILE NAV (toggle) ----------------------------------------------------------------- */ @media (max-width: 767px) { .site-nav__menu[data-open="true"] { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--rdd-surface); border-top: 1px solid var(--rdd-border); padding: var(--rdd-space-6); gap: var(--rdd-space-4); } } /* ----------------------------------------------------------------- 18. LOGO - SVG inline usa currentColor → adapta automaticamente ao tema - PNG via custom-logo usa filter para inversão no tema escuro - Para usar os PNGs reais: Aparência → Personalizar → Identidade do site Arquivos esperados em assets/img/: logo-light.png → versão escura/preta, para fundo cream (#f4f0e8) logo-dark.png → versão branca/clara, para fundo navy (#0b1020) ----------------------------------------------------------------- */ .site-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; } /* SVG inline — usa currentColor do contexto */ .rdd-logo-svg { display: block; height: 44px; width: auto; color: var(--rdd-text); transition: color var(--rdd-transition); } .site-logo:hover .rdd-logo-svg { color: var(--rdd-accent); } /* PNG via WordPress custom-logo */ .custom-logo { display: block; height: 44px; width: auto; object-fit: contain; } /* Tema dark: inverte logo escuro para branco */ [data-theme="dark"] .custom-logo { filter: brightness(0) invert(1); } /* Variante: se você nomear os arquivos logo-light.png / logo-dark.png e usar no header, este bloco controla qual aparece */ .site-logo__img { display: none; } [data-theme="light"] .site-logo__img--light, [data-theme="dark"] .site-logo__img--dark { display: block; height: 44px; width: auto; } /* Footer — logo forçado branco independente de tema */ .site-footer .custom-logo, .site-footer .rdd-logo-svg { filter: brightness(0) invert(1); color: #f4f0e8; } /* ─────────── Breadcrumb ─────────── */ .rdd-breadcrumb { margin: 0 0 1.25rem; font-family: 'Lora', Georgia, serif; font-size: 0.85rem; color: var(--rdd-color-muted, #6b6358); } .rdd-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; list-style: none; margin: 0; padding: 0; } .rdd-breadcrumb li { display: inline-flex; align-items: center; } .rdd-breadcrumb li + li::before { content: "›"; margin-right: 0.5rem; opacity: 0.55; } .rdd-breadcrumb a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; } .rdd-breadcrumb a:hover { border-bottom-color: currentColor; } .rdd-breadcrumb [aria-current="page"] { color: var(--rdd-color-text, #1f1a13); font-weight: 500; } /* ----------------------------------------------------------------- 11. ARCHIVE DE EDITORIA — capa colorida + hero split 60/40 ----------------------------------------------------------------- */ .editoria-archive { --editoria-color: var(--rdd-accent); } .editoria-header { background: var(--editoria-color); color: #fff; padding: var(--rdd-space-10) var(--rdd-space-8); border-radius: var(--rdd-radius-lg); margin-bottom: var(--rdd-space-10); } .editoria-header__eyebrow { font-size: var(--rdd-fs-12); text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.78; margin: 0 0 var(--rdd-space-2); } .editoria-header__title { font-family: var(--rdd-font-serif); font-size: var(--rdd-fs-48); line-height: 1.05; margin: 0; color: #fff; } .editoria-header__description { margin: var(--rdd-space-4) 0 0; font-size: var(--rdd-fs-18); opacity: 0.92; max-width: 60ch; } .editoria-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--rdd-space-8); align-items: start; margin-bottom: var(--rdd-space-12); padding-bottom: var(--rdd-space-10); border-bottom: 1px solid var(--rdd-border); } .editoria-hero__media { display: block; overflow: hidden; border-radius: var(--rdd-radius-lg); aspect-ratio: 16 / 10; background: var(--rdd-border); } .editoria-hero__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--rdd-ease); } .editoria-hero__media:hover img { transform: scale(1.03); } .editoria-hero__media-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--editoria-color), color-mix(in srgb, var(--editoria-color) 50%, #000)); opacity: 0.85; } .editoria-hero__body { display: flex; flex-direction: column; justify-content: center; gap: var(--rdd-space-3); } .editoria-hero__eyebrow { color: var(--editoria-color); font-size: var(--rdd-fs-12); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; margin: 0; } .editoria-hero__title { font-family: var(--rdd-font-serif); font-size: var(--rdd-fs-36); line-height: 1.12; margin: 0; } .editoria-hero__title a { color: inherit; text-decoration: none; } .editoria-hero__title a:hover { color: var(--editoria-color); } .editoria-hero__subtitle { font-family: var(--rdd-font-display); font-size: var(--rdd-fs-20); color: var(--rdd-text-muted); font-style: italic; margin: 0; } .editoria-hero__excerpt { color: var(--rdd-text-muted); font-size: var(--rdd-fs-16); margin: 0; } .editoria-hero__meta { font-size: var(--rdd-fs-12); color: var(--rdd-text-subtle); text-transform: uppercase; letter-spacing: 0.12em; margin: 0; } .editoria-archive .card__eyebrow { color: var(--editoria-color); } @media (max-width: 720px) { .editoria-header { padding: var(--rdd-space-8) var(--rdd-space-6); } .editoria-header__title { font-size: var(--rdd-fs-36); } .editoria-hero { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------- 12. CHROME EDITORIAL — Fase 1 do redesign (2026-05-21) Tokens novos do design + top-bar, dateline, masthead, nav-editorias, footer. Convive com os tokens --rdd-* legados. ----------------------------------------------------------------- */ :root { --paper: #F4F0E8; --paper-aged: #E8DFD0; --paper-deep: #EDE6D6; --ink: #1A1A1A; --ink-black: #080808; --ink-mute: #4A453E; --gray-news: #6B665E; --gray-light: #B5AE9F; --red: #A01818; --red-bright: #C41E1E; --red-deep: #7A1212; --rule: rgba(26, 26, 26, 0.18); --rule-strong: rgba(26, 26, 26, 0.42); --rule-soft: rgba(26, 26, 26, 0.10); --rule-paper: rgba(244, 240, 232, 0.18); --dark-bg: #2A2620; --dark-deep: #1C1914; --dark-text: #E8DFD0; --f-display: 'Playfair Display', 'Times New Roman', Georgia, serif; --f-headline: 'Playfair Display', 'Times New Roman', Georgia, serif; --f-body: 'Lora', Georgia, 'Times New Roman', serif; --f-italic: 'Cormorant Garamond', Georgia, serif; --f-meta: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --t-masthead-xl: 88px; --t-masthead: 64px; --t-h1: 52px; --t-h2: 36px; --t-h3: 26px; --t-h4: 21px; --t-card: 20px; --t-card-sm: 17px; --t-lead: 20px; --t-body: 17px; --t-body-sm: 15px; --t-meta: 12px; --t-meta-sm: 11px; --t-caption: 13px; --chrome-max: 1280px; --chrome-gutter: 28px; } [data-theme="dark"] { --paper: #2A2620; --paper-aged: #1C1914; --paper-deep: #221E18; --ink: #E8DFD0; --ink-black: #F4ECDC; --ink-mute: #C9C0AF; --gray-news: #A8A092; --gray-light: #6B665E; --rule: rgba(232, 223, 208, 0.22); --rule-strong: rgba(232, 223, 208, 0.45); --rule-soft: rgba(232, 223, 208, 0.12); } /* ===== Top bar (ticker) ===== */ .rdd-top-bar { background: var(--ink-black); color: var(--paper); font-family: var(--f-meta); font-size: var(--t-meta-sm); letter-spacing: 0.14em; text-transform: uppercase; height: 32px; display: flex; align-items: center; overflow: hidden; } .rdd-top-bar__inner { max-width: var(--chrome-max); margin: 0 auto; padding: 0 var(--chrome-gutter); width: 100%; display: flex; align-items: center; gap: 18px; height: 100%; } .rdd-top-bar__breaking { background: var(--red-bright); color: #fff; padding: 4px 10px; font-weight: 600; letter-spacing: 0.16em; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .rdd-top-bar__breaking::before { content: ""; width: 6px; height: 6px; background: #fff; border-radius: 50%; display: inline-block; animation: rdd-pulse 1.4s ease-in-out infinite; } @keyframes rdd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .rdd-ticker { display: flex; align-items: center; gap: 22px; overflow: hidden; flex: 1; color: color-mix(in srgb, var(--paper) 78%, transparent); } .rdd-ticker__item { white-space: nowrap; color: inherit; text-decoration: none; display: inline-flex; gap: 6px; align-items: baseline; } .rdd-ticker__item:hover { color: var(--paper); } .rdd-ticker__tag { color: var(--red-bright); font-weight: 600; } .rdd-ticker__sep { color: color-mix(in srgb, var(--paper) 30%, transparent); } /* ===== Dateline bar ===== */ .rdd-dateline-bar { background: var(--paper); border-bottom: 1px solid var(--rule); } .rdd-dateline-bar__inner { max-width: var(--chrome-max); margin: 0 auto; padding: 10px var(--chrome-gutter) 8px; display: flex; align-items: center; justify-content: space-between; font-family: var(--f-meta); font-size: var(--t-meta-sm); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-news); } .rdd-dateline-bar__left, .rdd-dateline-bar__right { display: flex; align-items: center; gap: 18px; } /* ===== Masthead ===== */ .rdd-masthead-wrap { background: var(--paper); } .rdd-masthead { max-width: var(--chrome-max); margin: 0 auto; padding: 28px var(--chrome-gutter) 18px; text-align: center; } .rdd-masthead__vol { font-family: var(--f-meta); font-size: var(--t-meta-sm); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray-news); margin-bottom: 8px; } .rdd-masthead__title { font-family: var(--f-display); font-weight: 900; font-size: var(--t-masthead); line-height: 0.98; letter-spacing: -0.02em; color: var(--ink-black); margin: 0; } .rdd-masthead__title a { color: inherit; text-decoration: none; } .rdd-masthead__tagline { font-family: var(--f-italic); font-style: italic; font-weight: 400; font-size: 17px; color: var(--ink-mute); margin-top: 6px; letter-spacing: 0.02em; } /* ===== Nav editorias ===== */ .rdd-nav-editorias { background: var(--paper); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .rdd-nav-editorias__inner { max-width: var(--chrome-max); margin: 0 auto; padding: 0 var(--chrome-gutter); display: flex; align-items: center; justify-content: center; } .rdd-nav-editorias a { font-family: var(--f-meta); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; padding: 11px 18px; color: var(--ink); font-weight: 500; border-right: 1px solid var(--rule); text-decoration: none; transition: background 120ms; } .rdd-nav-editorias a:first-child { border-left: 1px solid var(--rule); } .rdd-nav-editorias a:hover { background: var(--paper-aged); color: var(--ink-black); } .rdd-nav-editorias a.is-active { color: var(--red); } .rdd-nav-editorias__search { margin-left: auto; border-right: 0 !important; display: flex !important; align-items: center; gap: 8px; } /* ===== Footer ===== */ .rdd-footer { background: var(--ink-black); color: var(--dark-text); margin-top: var(--rdd-space-16); font-family: var(--f-body); } .rdd-footer__inner { max-width: var(--chrome-max); margin: 0 auto; padding: 48px var(--chrome-gutter) 32px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .rdd-footer__title { font-family: var(--f-display); font-weight: 900; font-size: 28px; color: var(--paper); display: block; text-decoration: none; } .rdd-footer__logo { text-decoration: none; } .rdd-footer__tagline { font-family: var(--f-italic); font-style: italic; color: var(--dark-text); opacity: 0.85; font-size: var(--t-body-sm); margin: 8px 0 0; } .rdd-footer__col h4 { font-family: var(--f-meta); font-size: var(--t-meta); letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); font-weight: 600; margin: 0 0 14px; } .rdd-footer__col ul { list-style: none; padding: 0; margin: 0; } .rdd-footer__col li { margin-bottom: 8px; font-size: var(--t-body-sm); } .rdd-footer__col a { color: var(--dark-text); text-decoration: none; } .rdd-footer__col a:hover { color: var(--red-bright); } .rdd-footer__colophon { max-width: var(--chrome-max); margin: 0 auto; padding: 18px var(--chrome-gutter); border-top: 1px solid var(--rule-paper); font-family: var(--f-meta); font-size: var(--t-meta-sm); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232, 223, 208, 0.6); } .rdd-footer__colophon p { margin: 0; } /* ===== Responsivo ===== */ @media (max-width: 900px) { .rdd-footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .rdd-top-bar { height: auto; padding: 6px 0; } .rdd-top-bar__inner { gap: 10px; flex-wrap: wrap; } .rdd-ticker { gap: 12px; font-size: 10px; } .rdd-dateline-bar__inner { flex-direction: column; gap: 6px; align-items: flex-start; letter-spacing: 0.14em; } .rdd-masthead { padding: 18px var(--chrome-gutter) 12px; } .rdd-masthead__title { font-size: 42px; } .rdd-masthead__tagline { font-size: 14px; } .rdd-nav-editorias__inner { overflow-x: auto; justify-content: flex-start; } .rdd-nav-editorias a { padding: 9px 12px; font-size: 11px; white-space: nowrap; } .rdd-nav-editorias__search { margin-left: 0; } .rdd-footer__inner { grid-template-columns: 1fr; gap: 28px; padding: 32px var(--chrome-gutter) 24px; } } /* ===== Lead story (homepage hero) ===== */ .rdd-lead-story { background-color: var(--ink-black); background-size: cover; background-position: center; color: var(--paper); min-height: 540px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--rule); } .rdd-lead-story:not(.has-thumb) { background-image: linear-gradient(135deg, var(--ink-black) 0%, #1f1c18 100%); } .rdd-lead-story__inner { max-width: var(--chrome-max); margin: 0 auto; padding: 64px var(--chrome-gutter) 56px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .rdd-lead-story__editoria { display: inline-block; padding: 5px 12px; font-family: var(--f-meta); font-size: var(--t-meta-sm); letter-spacing: 0.18em; font-weight: 600; color: #fff; text-decoration: none; text-transform: uppercase; } .rdd-lead-story__editoria:hover { opacity: 0.92; } .rdd-lead-story__title { font-family: var(--f-display); font-weight: 900; font-size: var(--t-masthead); line-height: 1.02; letter-spacing: -0.02em; color: #fff; margin: 0; max-width: 960px; } .rdd-lead-story__title a { color: inherit; text-decoration: none; } .rdd-lead-story__title a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .rdd-lead-story__lead { font-family: var(--f-italic); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.45; color: rgba(244, 240, 232, 0.92); margin: 0; max-width: 780px; } .rdd-lead-story__meta { font-family: var(--f-meta); font-size: var(--t-meta-sm); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 240, 232, 0.72); display: flex; gap: 10px; align-items: center; margin-top: 4px; } @media (max-width: 760px) { .rdd-lead-story { min-height: 420px; } .rdd-lead-story__inner { padding: 40px var(--chrome-gutter) 32px; gap: 10px; } .rdd-lead-story__title { font-size: 38px; } .rdd-lead-story__lead { font-size: 17px; } } /* ===== Editoria archive (taxonomy editoria) ===== */ .rdd-editoria-hero { background-color: var(--ink-black); background-size: cover; background-position: center; color: var(--paper); border-bottom: 4px solid var(--editoria-color, var(--red)); min-height: 360px; display: flex; align-items: flex-end; } .rdd-editoria-hero:not(.has-cover) { background-image: linear-gradient(135deg, var(--editoria-color, var(--red)) 0%, var(--ink-black) 100%); } .rdd-editoria-hero__inner { max-width: var(--chrome-max); margin: 0 auto; padding: 56px var(--chrome-gutter) 44px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .rdd-editoria-hero__eyebrow { font-family: var(--f-meta); font-size: var(--t-meta-sm); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 240, 232, 0.72); margin: 0; } .rdd-editoria-hero__title { font-family: var(--f-display); font-weight: 900; font-size: 64px; line-height: 1; letter-spacing: -0.02em; color: #fff; margin: 0; } .rdd-editoria-hero__description { font-family: var(--f-italic); font-style: italic; font-size: 18px; color: rgba(244, 240, 232, 0.85); margin: 6px 0 0; max-width: 720px; } .rdd-editoria-archive { max-width: var(--chrome-max); margin: 0 auto; padding: 48px var(--chrome-gutter); } .rdd-editoria-lead { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; margin-bottom: 56px; padding-bottom: 48px; border-bottom: 1px solid var(--rule); } .rdd-editoria-lead__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-aged); } .rdd-editoria-lead__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 220ms ease; } .rdd-editoria-lead__media:hover img { transform: scale(1.02); } .rdd-editoria-lead__media-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--paper-aged), var(--paper-deep)); } .rdd-editoria-lead__body { display: flex; flex-direction: column; justify-content: center; gap: 12px; } .rdd-editoria-lead__eyebrow { font-family: var(--f-meta); font-size: var(--t-meta-sm); letter-spacing: 0.22em; text-transform: uppercase; color: var(--editoria-color, var(--red)); font-weight: 600; margin: 0; } .rdd-editoria-lead__title { font-family: var(--f-display); font-weight: 900; font-size: 38px; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink-black); margin: 0; } .rdd-editoria-lead__title a { color: inherit; text-decoration: none; } .rdd-editoria-lead__title a:hover { text-decoration: underline; text-underline-offset: 4px; } .rdd-editoria-lead__subtitle { font-family: var(--f-italic); font-style: italic; font-size: 19px; color: var(--ink-mute); margin: 0; } .rdd-editoria-lead__excerpt { font-family: var(--f-body); font-size: var(--t-body); line-height: 1.55; color: var(--ink); margin: 0; } .rdd-editoria-lead__meta { font-family: var(--f-meta); font-size: var(--t-meta-sm); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-news); margin: 4px 0 0; } .rdd-editoria-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 36px 28px !important; } @media (max-width: 900px) { .rdd-editoria-hero__title { font-size: 48px; } .rdd-editoria-lead { grid-template-columns: 1fr; gap: 22px; } .rdd-editoria-lead__title { font-size: 30px; } .rdd-editoria-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .rdd-editoria-hero { min-height: 280px; } .rdd-editoria-hero__inner { padding: 36px var(--chrome-gutter) 28px; } .rdd-editoria-hero__title { font-size: 36px; } .rdd-editoria-grid { grid-template-columns: 1fr !important; } } /* ===== EDITORIA - CAPA CINEMATOGRAFICA (v2 redesign) ===== */ /* ============================================================ EDITORIA — capa cinematográfica + grid editorial ============================================================ */ /* =========================================================== BANNER DA EDITORIA =========================================================== */ .rdd-ed-banner { position: relative; width: 100%; height: 360px; overflow: hidden; background: #080808; border-bottom: 3px solid #080808; } /* Banner sempre tem fundo escuro (foto + veil) — força paleta clara mesmo no dark mode */ [data-theme="dark"] .rdd-ed-banner { --paper: #F4F0E8; --paper-aged: #E8DFD0; --paper-deep: #EDE6D6; --ink-black: #080808; } .rdd-ed-banner .bg { position: absolute; inset: 0; background-position: right center; background-size: cover; background-repeat: no-repeat; } /* Gradiente escuro à esquerda — para garantir contraste com o texto */ .rdd-ed-banner .veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.65) 32%, rgba(8,8,8,0.18) 58%, rgba(8,8,8,0) 80%), linear-gradient(180deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0) 28%, rgba(8,8,8,0) 70%, rgba(8,8,8,0.45) 100%); } .rdd-ed-banner .grain { position: absolute; inset: 0; background: radial-gradient(ellipse at 12% 18%, rgba(160,24,24,0.10) 0%, transparent 40%), radial-gradient(ellipse at 88% 92%, rgba(160,140,100,0.12) 0%, transparent 60%); mix-blend-mode: screen; pointer-events: none; } .rdd-ed-banner .inner { position: relative; z-index: 2; max-width: var(--chrome-max); margin: 0 auto; padding: 22px var(--chrome-gutter) 20px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; color: var(--paper); } /* Top row do banner — breadcrumb + número da editoria */ .rdd-ed-banner .top { display: flex; align-items: center; justify-content: space-between; font-family: var(--f-meta); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244,240,232,0.7); } .rdd-ed-banner .top .crumbs { display: flex; align-items: center; gap: 10px; } .rdd-ed-banner .top .crumbs a { color: rgba(244,240,232,0.85); border-bottom: 1px dotted rgba(244,240,232,0.3); } .rdd-ed-banner .top .crumbs a:hover { color: var(--paper); border-bottom-color: var(--paper); } .rdd-ed-banner .top .crumbs .sep { color: rgba(244,240,232,0.35); } .rdd-ed-banner .top .num { font-family: var(--f-mono); color: var(--red-bright); letter-spacing: 0.16em; } .rdd-ed-banner .top .num strong { color: var(--paper); font-weight: 500; } /* Centro: chapéu + título + manifesto */ .rdd-ed-banner .center { display: flex; flex-direction: column; gap: 12px; max-width: 700px; } .rdd-ed-banner .chapeu { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-meta); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--red-bright); font-weight: 600; } .rdd-ed-banner .chapeu::before { content: ""; width: 40px; height: 2px; background: var(--red-bright); display: inline-block; } .rdd-ed-banner h1 { font-family: var(--f-display); font-weight: 900; font-size: clamp(56px, 7vw, 104px); line-height: 0.92; letter-spacing: -0.035em; margin: 0; color: var(--paper); text-wrap: balance; } .rdd-ed-banner .manifesto { font-family: var(--f-italic); font-style: italic; font-weight: 400; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.42; color: rgba(244,240,232,0.88); max-width: 540px; margin: 0; text-wrap: pretty; } /* Rodapé do banner: stats + sub-navegação */ .rdd-ed-banner .bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 16px; border-top: 1px solid rgba(244,240,232,0.22); } .rdd-ed-banner .stats { display: flex; gap: 36px; font-family: var(--f-meta); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } .rdd-ed-banner .stats .stat { display: flex; flex-direction: column; gap: 4px; min-width: 80px; } .rdd-ed-banner .stats .stat .lbl { color: rgba(244,240,232,0.55); font-weight: 400; font-size: 10px; letter-spacing: 0.22em; } .rdd-ed-banner .stats .stat .val { font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; text-transform: none; color: var(--paper); line-height: 1; } .rdd-ed-banner .stats .stat .val .red { color: var(--red-bright); } .rdd-ed-banner .edition-mark { font-family: var(--f-italic); font-style: italic; font-size: 13px; color: rgba(244,240,232,0.55); text-align: right; max-width: 220px; line-height: 1.4; } /* =========================================================== SUB-NAV DA EDITORIA =========================================================== */ .rdd-ed-subnav { background: var(--paper); border-bottom: 1px solid var(--rule-strong); } .rdd-ed-subnav .inner { max-width: var(--chrome-max); margin: 0 auto; padding: 0 var(--chrome-gutter); display: flex; align-items: stretch; gap: 0; overflow-x: auto; } .rdd-ed-subnav a { padding: 14px 22px 12px; font-family: var(--f-meta); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 120ms; } .rdd-ed-subnav a.active { color: var(--red); border-bottom-color: var(--red); font-weight: 600; } .rdd-ed-subnav a:hover { color: var(--ink-black); } .rdd-ed-subnav .count { font-family: var(--f-mono); font-size: 10.5px; color: var(--gray-light); margin-left: 6px; letter-spacing: 0.04em; } .rdd-ed-subnav .right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-family: var(--f-meta); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-news); padding: 0 4px; } .rdd-ed-subnav .right .live { color: var(--red); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .rdd-ed-subnav .right .live::before { content: ""; width: 7px; height: 7px; background: var(--red-bright); border-radius: 50%; animation: pulse 1.4s ease-in-out infinite; } /* =========================================================== CAPA EDITORIAL: lead + sidebar =========================================================== */ .rdd-ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; padding: 40px 0 48px; } /* Lead — matéria destaque + 2 chamadas em quadro */ .rdd-ed-lead-feat { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--rule-strong); } .rdd-ed-lead-feat .img { aspect-ratio: 5 / 4; overflow: hidden; background: var(--paper-aged); position: relative; } .rdd-ed-lead-feat .img img { width: 100%; height: 100%; object-fit: cover; } .rdd-ed-lead-feat .img .tag { position: absolute; top: 0; left: 0; background: var(--red); color: var(--paper); font-family: var(--f-meta); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 12px; font-weight: 600; } .rdd-ed-lead-feat .text .chapeu { font-size: 12.5px; margin-bottom: 14px; } .rdd-ed-lead-feat .text h2 { font-family: var(--f-headline); font-weight: 800; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -0.022em; color: var(--ink-black); margin: 0 0 14px; text-wrap: balance; } .rdd-ed-lead-feat .text .deck { font-family: var(--f-italic); font-style: italic; font-size: 18px; line-height: 1.42; color: var(--ink-mute); margin: 0 0 16px; } .rdd-ed-lead-feat .text .meta-row { font-family: var(--f-meta); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-news); padding-top: 14px; border-top: 1px solid var(--rule); } .rdd-ed-lead-feat .text .meta-row strong { color: var(--ink-black); font-weight: 600; } .rdd-ed-lead-feat .text .meta-row .red { color: var(--red); } .rdd-ed-lead-feat .text .read-link { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 16px; font-family: var(--f-meta); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--ink-black); border-bottom: 1px solid var(--ink-black); padding-bottom: 3px; } .rdd-ed-lead-feat .text .read-link:hover { color: var(--red); border-bottom-color: var(--red); } /* =========================================================== LEAD SPREAD — manchete + 3 chamadas + linha rápida =========================================================== */ .rdd-ed-lead { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--rule-strong); } /* Manchete principal da editoria */ .rdd-ed-lead .lead-main { display: flex; flex-direction: column; } .rdd-ed-lead .lead-main .img { aspect-ratio: 16/10; overflow: hidden; background: var(--paper-aged); position: relative; margin-bottom: 16px; } .rdd-ed-lead .lead-main .img img { width: 100%; height: 100%; object-fit: cover; } .rdd-ed-lead .lead-main .img .tag { position: absolute; top: 0; left: 0; background: var(--red); color: var(--paper); font-family: var(--f-meta); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 12px; font-weight: 600; } .rdd-ed-lead .lead-main .chapeu { font-size: 12.5px; margin-bottom: 10px; } .rdd-ed-lead .lead-main h2 { font-family: var(--f-headline); font-weight: 800; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.04; letter-spacing: -0.022em; color: var(--ink-black); margin: 0 0 12px; text-wrap: balance; } .rdd-ed-lead .lead-main h2 a { color: inherit; } .rdd-ed-lead .lead-main h2 a:hover { color: var(--red); } .rdd-ed-lead .lead-main .deck { font-family: var(--f-italic); font-style: italic; font-size: 17px; line-height: 1.42; color: var(--ink-mute); margin: 0 0 14px; } .rdd-ed-lead .lead-main .meta { font-family: var(--f-meta); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-news); padding-top: 12px; border-top: 1px solid var(--rule); } .rdd-ed-lead .lead-main .meta strong { color: var(--ink-black); } .rdd-ed-lead .lead-main .meta .red { color: var(--red); } /* Coluna secundária com chamadas em pilha */ .rdd-ed-lead .lead-side { display: flex; flex-direction: column; border-left: 1px solid var(--rule-strong); padding-left: 28px; } .rdd-ed-lead .lead-side .side-item { padding: 18px 0; border-bottom: 1px solid var(--rule); } .rdd-ed-lead .lead-side .side-item:first-child { padding-top: 0; } .rdd-ed-lead .lead-side .side-item:last-child { border-bottom: 0; padding-bottom: 0; } .rdd-ed-lead .lead-side .side-item .chapeu { font-size: 11px; margin-bottom: 6px; } .rdd-ed-lead .lead-side .side-item .headline { font-family: var(--f-headline); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-black); margin: 0 0 6px; text-wrap: balance; } .rdd-ed-lead .lead-side .side-item .headline a { color: inherit; } .rdd-ed-lead .lead-side .side-item .headline a:hover { color: var(--red); } .rdd-ed-lead .lead-side .side-item .meta { font-family: var(--f-meta); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-news); } .rdd-ed-lead .lead-side .side-item.with-img { display: grid; grid-template-columns: 1fr 96px; gap: 14px; align-items: start; } .rdd-ed-lead .lead-side .side-item.with-img .thumb { width: 96px; height: 96px; background: var(--paper-aged); overflow: hidden; } .rdd-ed-lead .lead-side .side-item.with-img .thumb img { width: 100%; height: 100%; object-fit: cover; } /* Linha rápida abaixo do lead-spread — 4 cards menores */ .rdd-ed-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-bottom: 32px; margin-bottom: 36px; border-bottom: 1px solid var(--rule-strong); } .rdd-ed-quick .qcard { display: flex; flex-direction: column; gap: 8px; } .rdd-ed-quick .qcard .img-wrap { aspect-ratio: 4/3; overflow: hidden; background: var(--paper-aged); position: relative; } .rdd-ed-quick .qcard .img-wrap img { width: 100%; height: 100%; object-fit: cover; } .rdd-ed-quick .qcard .img-wrap .editoria-tag { position: absolute; top: 0; left: 0; background: var(--red); color: var(--paper); font-family: var(--f-meta); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 8px; font-weight: 600; } .rdd-ed-quick .qcard .chapeu { font-size: 10.5px; margin-top: 4px; } .rdd-ed-quick .qcard .headline { font-family: var(--f-headline); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -0.005em; color: var(--ink-black); margin: 0; text-wrap: balance; } .rdd-ed-quick .qcard .headline a { color: inherit; } .rdd-ed-quick .qcard .headline a:hover { color: var(--red); } .rdd-ed-quick .qcard .meta { font-family: var(--f-meta); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-news); margin-top: 2px; } /* =========================================================== AD SLOTS — espaços de patrocínio editoriais =========================================================== */ .rdd-ed-ad { border-top: 1px dashed var(--rule-strong); border-bottom: 1px dashed var(--rule-strong); background: repeating-linear-gradient( 135deg, var(--paper-aged) 0, var(--paper-aged) 14px, var(--paper-deep) 14px, var(--paper-deep) 15px ); padding: 18px 24px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; position: relative; } .rdd-ed-ad::before { content: "§ Apoio editorial"; position: absolute; top: -1px; left: 16px; background: var(--paper); padding: 0 8px; transform: translateY(-50%); font-family: var(--f-meta); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gray-news); font-weight: 500; } .rdd-ed-ad .ad-inner { background: var(--paper); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; min-height: 76px; } .rdd-ed-ad .ad-brand { display: flex; align-items: center; gap: 14px; } .rdd-ed-ad .ad-brand .logo { font-family: var(--f-display); font-weight: 900; font-size: 20px; letter-spacing: -0.01em; color: var(--ink-black); padding: 6px 12px; border: 1.5px solid var(--ink-black); background: var(--paper); white-space: nowrap; line-height: 1; } .rdd-ed-ad .ad-brand .copy { font-family: var(--f-italic); font-style: italic; font-size: 16px; line-height: 1.35; color: var(--ink-mute); max-width: 540px; } .rdd-ed-ad .ad-cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-meta); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; padding: 9px 14px; border: 1px solid var(--ink-black); color: var(--ink-black); white-space: nowrap; } .rdd-ed-ad .ad-cta:hover { background: var(--ink-black); color: var(--paper); } .rdd-ed-ad .ad-foot { font-family: var(--f-meta); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-news); display: flex; justify-content: space-between; padding: 0 4px; } .rdd-ed-ad .ad-foot a { color: var(--gray-news); border-bottom: 1px dotted var(--rule-strong); } /* Slot in-feed compacto (mid-page banner) */ .rdd-ed-ad.mid { padding: 14px 18px; } .rdd-ed-ad.mid .ad-inner { padding: 14px 18px; min-height: 60px; } .rdd-ed-ad.mid .ad-brand .logo { font-size: 17px; padding: 5px 10px; } .rdd-ed-ad.mid .ad-brand .copy { font-size: 14.5px; max-width: 480px; } /* Slot sidebar tile */ .rdd-ed-ad.tile { padding: 14px 14px; } .rdd-ed-ad.tile .ad-inner { flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; padding: 22px 18px; min-height: 220px; justify-content: space-between; } .rdd-ed-ad.tile .ad-brand { flex-direction: column; align-items: flex-start; gap: 10px; } .rdd-ed-ad.tile .ad-brand .logo { font-size: 22px; padding: 7px 14px; } .rdd-ed-ad.tile .ad-brand .copy { font-family: var(--f-headline); font-style: normal; font-weight: 700; font-size: 18px; line-height: 1.22; color: var(--ink-black); letter-spacing: -0.005em; } .rdd-ed-ad.tile .ad-cta { align-self: stretch; justify-content: center; } /* Native card (sponsored card dentro do grid) */ .card.sponsored-native { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px dashed var(--rule-strong); background: var(--paper-aged); position: relative; } .card.sponsored-native::before { content: "§ Conteúdo patrocinado"; position: absolute; top: -1px; left: 12px; background: var(--paper-aged); padding: 0 8px; transform: translateY(-50%); font-family: var(--f-meta); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray-news); font-weight: 500; } .card.sponsored-native .img-wrap { aspect-ratio: 4/3; overflow: hidden; } .card.sponsored-native .img-wrap img { width: 100%; height: 100%; object-fit: cover; } .card.sponsored-native .sponsor { font-family: var(--f-meta); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; font-weight: 600; } .card.sponsored-native .headline { font-family: var(--f-headline); font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--ink-black); margin: 0; } .card.sponsored-native .lede { font-family: var(--f-italic); font-style: italic; font-size: 13.5px; line-height: 1.4; color: var(--ink-mute); margin: 0; } .card.sponsored-native .disclosure { font-family: var(--f-meta); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-news); margin-top: 4px; padding-top: 8px; border-top: 1px dotted var(--rule-strong); } /* Section header reaproveitável */ .rdd-ed-secthead { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--ink); padding-bottom: 8px; margin-bottom: 22px; } .rdd-ed-secthead .title { font-family: var(--f-display); font-weight: 800; font-size: 28px; letter-spacing: -0.015em; color: var(--ink-black); } .rdd-ed-secthead .title .sub { font-family: var(--f-italic); font-style: italic; color: var(--ink-mute); font-size: 18px; margin-left: 10px; font-weight: 400; letter-spacing: 0; } .rdd-ed-secthead .more { font-family: var(--f-meta); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-news); } .rdd-ed-secthead .more:hover { color: var(--red); } /* Grid de matérias */ .rdd-ed-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; margin-bottom: 48px; } .rdd-ed-stories .card .img-wrap { aspect-ratio: 4/3; margin-bottom: 12px; } .rdd-ed-stories .card .headline { font-size: 19px; line-height: 1.18; } .rdd-ed-stories .card .lede { font-size: 14px; } /* Análises (linha intermediária com layout diferente) */ .rdd-ed-analyses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; padding: 0 0 36px; margin-bottom: 36px; border-bottom: 1px solid var(--rule-strong); } .rdd-ed-analysis { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: flex-start; } .rdd-ed-analysis .author-photo { width: 110px; height: 110px; background: var(--paper-aged); overflow: hidden; } .rdd-ed-analysis .author-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2); } .rdd-ed-analysis .body .label { font-family: var(--f-meta); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 4px; } .rdd-ed-analysis .body .author { font-family: var(--f-headline); font-weight: 700; font-size: 17px; color: var(--ink-black); margin-bottom: 6px; letter-spacing: -0.005em; } .rdd-ed-analysis .body .author .pos { font-family: var(--f-italic); font-style: italic; font-size: 13px; color: var(--gray-news); font-weight: 400; margin-left: 6px; } .rdd-ed-analysis .body .title-link { font-family: var(--f-italic); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--ink-black); display: block; } .rdd-ed-analysis .body .title-link:hover { color: var(--red); } .rdd-ed-analysis .body .meta { font-family: var(--f-meta); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-news); margin-top: 8px; } /* Cobertura local (lista mais densa) */ .rdd-ed-locallist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; } .rdd-ed-localitem { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: center; } .rdd-ed-localitem:nth-last-child(-n+2) { border-bottom: 0; } .rdd-ed-localitem .num { font-family: var(--f-display); font-weight: 900; font-size: 38px; line-height: 1; letter-spacing: -0.02em; color: var(--red); text-align: right; padding-right: 6px; border-right: 1px solid var(--rule); } .rdd-ed-localitem .body .chapeu { font-size: 10px; margin-bottom: 3px; } .rdd-ed-localitem .body .headline { font-family: var(--f-headline); font-size: 15.5px; line-height: 1.22; font-weight: 600; color: var(--ink-black); } .rdd-ed-localitem .body .meta { font-family: var(--f-meta); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-news); margin-top: 4px; } /* =========================================================== SIDEBAR =========================================================== */ .rdd-ed-aside { display: flex; flex-direction: column; gap: 32px; } .rdd-ed-block .head { font-family: var(--f-meta); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); font-weight: 600; padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; } .rdd-ed-block .head .sub { color: var(--gray-news); font-weight: 400; } /* Editores da editoria */ .rdd-ed-editors { display: flex; flex-direction: column; } .rdd-ed-editor { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px dotted var(--rule); align-items: center; } .rdd-ed-editor:last-child { border-bottom: 0; } .rdd-ed-editor .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--paper-aged); overflow: hidden; } .rdd-ed-editor .avatar img { width: 100%; height: 100%; object-fit: cover; } .rdd-ed-editor .name { font-family: var(--f-headline); font-weight: 700; font-size: 15px; color: var(--ink-black); letter-spacing: -0.005em; } .rdd-ed-editor .role { font-family: var(--f-italic); font-style: italic; font-size: 12.5px; color: var(--gray-news); } /* Cobertura especial — destaque */ .rdd-ed-coverage { background: var(--ink-black); color: var(--paper); padding: 22px 20px; } .rdd-ed-coverage .label { font-family: var(--f-meta); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red-bright); font-weight: 600; margin-bottom: 8px; } .rdd-ed-coverage h3 { font-family: var(--f-display); font-weight: 700; font-size: 23px; line-height: 1.12; margin: 0 0 8px; color: var(--paper); } .rdd-ed-coverage .blurb { font-family: var(--f-italic); font-style: italic; font-size: 13.5px; line-height: 1.45; color: rgba(244,240,232,0.78); margin: 0 0 16px; } .rdd-ed-coverage .meta { display: flex; justify-content: space-between; font-family: var(--f-meta); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244,240,232,0.55); padding-top: 12px; border-top: 1px solid rgba(244,240,232,0.18); } .rdd-ed-coverage .meta .red { color: var(--red-bright); } .rdd-ed-coverage a.go { display: inline-flex; margin-top: 8px; font-family: var(--f-meta); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); font-weight: 600; border-bottom: 1px solid var(--paper); padding-bottom: 3px; } .rdd-ed-coverage a.go:hover { color: var(--red-bright); border-bottom-color: var(--red-bright); } /* Calendário/agenda da editoria */ .rdd-ed-agenda { display: flex; flex-direction: column; } .rdd-ed-agendarow { display: grid; grid-template-columns: 58px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: start; } .rdd-ed-agendarow:last-child { border-bottom: 0; } .rdd-ed-agendarow.live { background: var(--paper-aged); padding-left: 8px; padding-right: 8px; margin: 4px -8px; border: 0; } .rdd-ed-agendarow .date { text-align: center; font-family: var(--f-display); font-weight: 700; line-height: 1; padding-top: 2px; } .rdd-ed-agendarow .date .d { font-size: 26px; color: var(--ink-black); letter-spacing: -0.02em; } .rdd-ed-agendarow .date .m { font-family: var(--f-meta); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-top: 4px; } .rdd-ed-agendarow .what { font-family: var(--f-headline); font-weight: 600; font-size: 14.5px; line-height: 1.25; color: var(--ink-black); } .rdd-ed-agendarow .when { font-family: var(--f-italic); font-style: italic; font-size: 12.5px; color: var(--ink-mute); margin-top: 3px; } .rdd-ed-agendarow .meta { font-family: var(--f-meta); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-news); margin-top: 4px; } /* Mais lidas */ .rdd-ed-readlist { display: flex; flex-direction: column; } .rdd-ed-readlist .rdd-ed-readitem { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .rdd-ed-readlist .rdd-ed-readitem:last-child { border-bottom: 0; } .rdd-ed-readlist .num { font-family: var(--f-display); font-weight: 900; font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--red); } .rdd-ed-readlist .text .chapeu { font-size: 10px; margin-bottom: 3px; } .rdd-ed-readlist .text .headline { font-family: var(--f-headline); font-size: 14.5px; line-height: 1.22; font-weight: 600; } /* Newsletter compacta da editoria */ .rdd-ed-news { background: var(--paper-aged); padding: 22px 20px; border-top: 3px solid var(--red); } .rdd-ed-news .label { font-family: var(--f-meta); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 8px; } .rdd-ed-news h3 { font-family: var(--f-display); font-weight: 700; font-size: 21px; line-height: 1.15; margin: 0 0 8px; color: var(--ink-black); } .rdd-ed-news .blurb { font-family: var(--f-italic); font-style: italic; font-size: 13.5px; color: var(--ink-mute); margin: 0 0 14px; line-height: 1.45; } .rdd-ed-news form { display: flex; border: 1px solid var(--ink); background: var(--paper); } .rdd-ed-news input { flex: 1; border: 0; padding: 10px 12px; background: transparent; font-family: var(--f-body); font-size: 13.5px; outline: none; } .rdd-ed-news button { background: var(--paper); color: var(--paper); border: 0; padding: 10px 16px; font-family: var(--f-meta); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; cursor: pointer; } .rdd-ed-news button:hover { background: var(--red); } /* =========================================================== RESPONSIVE =========================================================== */ @media (max-width: 1100px) { .rdd-ed-grid { grid-template-columns: 1fr; gap: 36px; } .rdd-ed-lead-feat { grid-template-columns: 1fr; gap: 18px; } .rdd-ed-lead { grid-template-columns: 1fr; gap: 24px; } .rdd-ed-lead .lead-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-strong); padding-top: 20px; } .rdd-ed-quick { grid-template-columns: repeat(2, 1fr); gap: 20px; } .rdd-ed-stories { grid-template-columns: repeat(2, 1fr); } .rdd-ed-analyses { grid-template-columns: 1fr; } .rdd-ed-locallist { grid-template-columns: 1fr; } .rdd-ed-localitem:nth-last-child(2) { border-bottom: 1px solid var(--rule); } .rdd-ed-banner { height: 320px; } .rdd-ed-banner h1 { font-size: 80px; } .rdd-ed-ad .ad-inner { flex-direction: column; align-items: flex-start; padding: 16px 18px; } .rdd-ed-ad .ad-brand { flex-direction: column; align-items: flex-start; gap: 10px; } .rdd-ed-ad .ad-cta { align-self: flex-start; } } @media (max-width: 900px) { :root { --chrome-gutter: 16px; } .rdd-ed-banner { height: 280px; } .rdd-ed-banner .inner { padding: 18px var(--chrome-gutter) 16px; } .rdd-ed-banner h1 { font-size: 58px; } .rdd-ed-banner .manifesto { font-size: 15px; } .rdd-ed-banner .stats { gap: 18px; flex-wrap: wrap; } .rdd-ed-banner .stats .stat .val { font-size: 18px; } .rdd-ed-banner .edition-mark { display: none; } .rdd-ed-banner .veil { background: linear-gradient(180deg, rgba(8,8,8,0.88) 0%, rgba(8,8,8,0.5) 55%, rgba(8,8,8,0.3) 100%); } .rdd-ed-lead-feat .text h2 { font-size: 28px; } .rdd-ed-quick { grid-template-columns: 1fr 1fr; } .rdd-ed-stories { grid-template-columns: 1fr; } .rdd-ed-analysis { grid-template-columns: 80px 1fr; } .rdd-ed-analysis .author-photo { width: 80px; height: 80px; } }