/* ========================================================= MotoMundo Child — main.css Design system escuro e esportivo sobre o GeneratePress. ========================================================= */ /* ---------- 0. Fontes self-hosted (v1.2) ---------- MotoGP Display (Bold) — usada nos destaques e no menu. MotoGP Text (Light/Regular/Bold + itálicos) — corpo de texto, com pesos e itálicos reais (sem negrito/itálico sintético do navegador). */ @font-face { font-family: "MotoGP Display"; src: url("../fonts/MotoGPDisplay-Bold.ttf") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: "MotoGP Text"; src: url("../fonts/MotoGPText-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "MotoGP Text"; src: url("../fonts/MotoGPText-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "MotoGP Text"; src: url("../fonts/MotoGPText-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "MotoGP Text"; src: url("../fonts/MotoGPText-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "MotoGP Text"; src: url("../fonts/MotoGPText-Bold.ttf") format("truetype"); font-weight: 600 700; font-style: normal; font-display: swap; } @font-face { font-family: "MotoGP Text"; src: url("../fonts/MotoGPText-BoldItalic.ttf") format("truetype"); font-weight: 600 700; font-style: italic; font-display: swap; } /* ---------- 1. Tokens ---------- */ :root { --mm-primary: #2ba8df; /* azul do globo da logo */ --mm-primary-dark: #0e5e86; --mm-secondary: #8cc63f; /* verde dos continentes */ --mm-secondary-dark: #5e8f22; --mm-background: #090e14; --mm-surface: #121923; --mm-surface-light: #1a2430; --mm-text: #f6f8fb; --mm-muted: #9ca8b7; --mm-border: rgba(255, 255, 255, 0.10); --mm-live: #e53935; --mm-highlight: #f4b942; --mm-radius: 8px; --mm-container: 1280px; --mm-font-display: "MotoGP Display", "Barlow Condensed", "Arial Narrow", sans-serif; --mm-font-body: "MotoGP Text", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; /* Fundo do header (com transparência) e do scrim do hero — precisam de uma variável própria (v1.2) porque eram valores fixos escuros que não mudavam no tema claro, deixando texto escuro sobre barra escura. */ --mm-header-bg: rgba(9, 14, 20, 0.92); --mm-scrim-start: rgba(9, 14, 20, 0.15); --mm-scrim-end: rgba(9, 14, 20, 0.92); } /* Tema claro opcional, ativado via botão (data-mm-theme="light" no ). Cores de marca (primary/secondary/live/highlight) permanecem iguais nos dois temas. */ :root[data-mm-theme="light"] { --mm-background: #f4f6f9; --mm-surface: #ffffff; --mm-surface-light: #eef1f5; --mm-text: #10151c; --mm-muted: #55606c; --mm-border: rgba(9, 14, 20, 0.12); --mm-header-bg: rgba(255, 255, 255, 0.92); --mm-scrim-start: rgba(244, 246, 249, 0.10); --mm-scrim-end: rgba(244, 246, 249, 0.94); } /* ---------- 2. Base sobre o GeneratePress ---------- */ body { background: var(--mm-background); color: var(--mm-text); font-family: var(--mm-font-body); font-size: 16px; line-height: 1.65; } /* Fundo com traçados de circuito, bem discreto */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 15% 0%, rgba(43, 168, 223, 0.06), transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(140, 198, 63, 0.05), transparent 55%); z-index: 0; } .site, .site-content, .container, .grid-container, .content-area, #primary, #main, .site-main, .inside-article, .entry-content, .entry-summary { background: transparent !important; } /* Corrige o bug de contraste (texto claro sobre fundo claro herdado do GP): força a cor do texto do conteúdo, já que o fundo acima virou transparente e o texto precisa continuar puxando a cor clara do tema, não a cor escura padrão que o GeneratePress usa para "Content Text Color". */ .entry-content, .entry-content p, .entry-content li, .entry-content span, .entry-content div, .entry-content dd, .entry-content dt, .entry-summary { color: var(--mm-text) !important; } #page { position: relative; z-index: 1; } .mm-container { max-width: var(--mm-container); margin: 0 auto; padding: 0 20px; } h1, h2, h3, h4, .entry-title { font-family: var(--mm-font-display); font-weight: 700; letter-spacing: 0.01em; color: var(--mm-text); text-transform: none; } a { color: var(--mm-primary); text-decoration: none; } a:hover, a:focus { color: var(--mm-secondary); } ::selection { background: var(--mm-primary); color: #fff; } :focus-visible { outline: 2px solid var(--mm-secondary); outline-offset: 2px; } /* ---------- 3. Assinatura: marca de grid ---------- */ /* Duas barras inclinadas azul/verde, eco do grid de largada */ .mm-gridmark { display: inline-block; width: 22px; height: 1em; margin-right: 10px; vertical-align: -0.12em; background: linear-gradient(105deg, var(--mm-primary) 0 42%, transparent 42%), linear-gradient(105deg, transparent 0 58%, var(--mm-secondary) 58%); } /* ---------- 4. Botões ---------- */ .mm-btn { display: inline-block; font-family: var(--mm-font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 22px; border-radius: var(--mm-radius); border: 1px solid transparent; line-height: 1.3; transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .mm-btn:hover { transform: translateY(-1px); } .mm-btn--primary { background: var(--mm-primary); color: #06121a; } .mm-btn--primary:hover, .mm-btn--primary:focus { background: #4dbdee; color: #06121a; } .mm-btn--secondary { background: var(--mm-secondary); color: #0d1607; } .mm-btn--secondary:hover, .mm-btn--secondary:focus { background: #a3d95f; color: #0d1607; } .mm-btn--ghost { background: transparent; color: var(--mm-text); border-color: var(--mm-border); } .mm-btn--ghost:hover, .mm-btn--ghost:focus { border-color: var(--mm-primary); color: var(--mm-primary); } /* ---------- 5. Status bar ---------- */ .mm-statusbar { background: var(--mm-surface); border-bottom: 1px solid var(--mm-border); font-size: 0.85rem; } .mm-statusbar__inner { display: flex; align-items: center; gap: 12px; min-height: 38px; flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; } .mm-statusbar__text { color: var(--mm-muted); font-family: var(--mm-font-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .mm-statusbar__link { margin-left: auto; font-weight: 600; } .mm-status { font-family: var(--mm-font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; } .mm-status--upcoming { background: var(--mm-surface-light); color: var(--mm-muted); } .mm-status--weekend { background: var(--mm-highlight); color: #201502; } .mm-status--completed { background: var(--mm-secondary); color: #0d1607; } .mm-status--live { background: var(--mm-live); color: #fff; animation: mm-pulse 1.6s ease-in-out infinite; } @keyframes mm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ---------- 6. Header ---------- */ .mm-header { background: var(--mm-header-bg); border-bottom: 1px solid var(--mm-border); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); } .mm-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); } .mm-header__inner { display: flex; align-items: center; gap: 16px; min-height: 84px; padding-top: 6px; padding-bottom: 6px; } /* Logo bem maior (v1.4) — antes travava em 52px de altura não importa o que fosse enviado no Customizer. Ajuste --mm-logo-max-height se quiser outro tamanho. */ .mm-header__brand { --mm-logo-max-height: 72px; flex-shrink: 0; } .mm-header__brand img.custom-logo, .mm-header__logo { max-height: var(--mm-logo-max-height); width: auto; display: block; } /* margin-left:auto fica só nas "tools" (busca/idioma/tema/MyGrid/Fantasy), assim o menu principal fica logo depois da logo em vez de ficar a distância no meio do header. */ .mm-nav { display: flex; align-items: center; gap: 20px; } .mm-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .mm-nav__list li { position: relative; } .mm-nav__list a { display: block; font-family: var(--mm-font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mm-text); padding: 10px 12px; border-radius: 6px; } .mm-nav__list a:hover, .mm-nav__list a:focus, .mm-nav__list .current-menu-item > a { color: var(--mm-primary); background: var(--mm-surface); } /* Submenu simples */ .mm-nav__list ul { list-style: none; margin: 0; padding: 6px; position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); display: none; z-index: 110; } .mm-nav__list li:hover > ul, .mm-nav__list li:focus-within > ul { display: block; } .mm-nav__list ul a { text-transform: none; letter-spacing: 0; font-family: var(--mm-font-body); font-size: 0.92rem; } .mm-nav__list ul .mm-menu-year > a { display: flex; align-items: center; } /* Submenu dentro de submenu (ex.: Seasons > 1990's > 1996): abre para o lado em vez de empilhar para baixo, senão fica atrás/colado nos outros itens da década (v1.4). */ .mm-nav__list ul ul { top: -6px; left: 100%; margin-left: 4px; } @media (max-width: 1200px) { .mm-nav__list ul ul { left: auto; right: 100%; margin-left: 0; margin-right: 4px; } } .mm-nav__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* Tradução (v1.4): EN/PT/ES no header, só reagem a clique — não é carregado nenhum script/widget/cookie no carregamento da página. PT/ES são links diretos para o proxy do Google Translate; EN é só um rótulo do estado atual (o site já é servido em inglês). Header/rodapé também têm notranslate/translate="no" (ver generatepress-hooks.php), então mesmo a versão traduzida (ou uma tradução via navegador/extensão) preserva essas áreas em inglês. */ .mm-translate { display: flex; align-items: center; gap: 2px; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); padding: 2px; } .mm-translate__btn { display: inline-block; background: transparent; border: none; color: var(--mm-muted); font-family: var(--mm-font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; padding: 6px 9px; border-radius: 5px; cursor: pointer; } a.mm-translate__btn:hover, a.mm-translate__btn:focus { color: var(--mm-text); background: var(--mm-surface); } .mm-translate__btn.is-active { color: var(--mm-primary); cursor: default; } /* Toggle de tema claro/escuro — ícone mostra o estado PARA ONDE vai ao clicar (sol = "mudar para claro" quando está escuro; lua = "mudar para escuro" quando está claro), padrão mais intuitivo que uma forma fixa. */ .mm-theme-toggle { background: transparent; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); color: var(--mm-text); cursor: pointer; padding: 8px 10px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .mm-theme-toggle:hover, .mm-theme-toggle:focus { border-color: var(--mm-secondary); color: var(--mm-secondary); } .mm-theme-toggle__icon circle, .mm-theme-toggle__icon path { fill: currentColor; } .mm-theme-toggle__icon--moon { display: none; } :root[data-mm-theme="light"] .mm-theme-toggle__icon--sun { display: none; } :root[data-mm-theme="light"] .mm-theme-toggle__icon--moon { display: block; } .mm-search-toggle, .mm-nav-toggle { background: transparent; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); color: var(--mm-text); cursor: pointer; padding: 8px 12px; font-size: 1.05rem; line-height: 1; } .mm-search-toggle:hover, .mm-nav-toggle:hover { border-color: var(--mm-primary); color: var(--mm-primary); } .mm-nav-toggle { display: none; } .mm-nav-toggle__bar, .mm-nav-toggle__bar::before, .mm-nav-toggle__bar::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform 0.2s ease; } .mm-nav-toggle__bar::before, .mm-nav-toggle__bar::after { content: ""; position: absolute; left: 0; } .mm-nav-toggle__bar::before { top: -6px; } .mm-nav-toggle__bar::after { top: 6px; } .mm-nav-toggle[aria-expanded="true"] .mm-nav-toggle__bar { background: transparent; } .mm-nav-toggle[aria-expanded="true"] .mm-nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); } .mm-nav-toggle[aria-expanded="true"] .mm-nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); } /* Busca expansível */ .mm-search { border-top: 1px solid var(--mm-border); background: var(--mm-surface); padding: 16px 0; } .mm-search__form { display: flex; gap: 10px; max-width: 640px; } .mm-search__form input[type="search"], .mm-filter-input { flex: 1; background: var(--mm-background); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); color: var(--mm-text); padding: 10px 14px; font-family: var(--mm-font-body); font-size: 1rem; } .mm-search__form input:focus, .mm-filter-input:focus { border-color: var(--mm-primary); outline: none; } /* ---------- 7. Seções ---------- */ .mm-section { padding: 44px 0; } .mm-section--hero { padding-top: 28px; } .mm-section--tools { background: var(--mm-surface); border-top: 1px solid var(--mm-border); border-bottom: 1px solid var(--mm-border); } .mm-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .mm-section__title { font-size: 1.9rem; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; margin: 0; } .mm-section__more { font-family: var(--mm-font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } /* Botão "+ MORE ..." abaixo de uma grade (ex.: Seasons na home) */ .mm-section__cta { display: flex; justify-content: center; margin-top: 26px; } .mm-more-btn { font-size: 0.95rem; padding: 12px 30px; } /* ---------- 8. Grids ---------- */ .mm-grid { display: grid; gap: 20px; } .mm-grid--2 { grid-template-columns: repeat(2, 1fr); } .mm-grid--3 { grid-template-columns: repeat(3, 1fr); } .mm-grid--4 { grid-template-columns: repeat(4, 1fr); } .mm-grid--6 { grid-template-columns: repeat(6, 1fr); } /* ---------- 9. Hero card ---------- */ .mm-hero-card { position: relative; min-height: 420px; border-radius: calc(var(--mm-radius) * 2); overflow: hidden; display: flex; align-items: flex-end; border: 1px solid var(--mm-border); } .mm-hero-card__media { position: absolute; inset: 0; background-size: cover; background-position: center; } .mm-hero-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, var(--mm-scrim-start) 0%, var(--mm-scrim-end) 82%); } .mm-hero-card__body { position: relative; padding: 36px; max-width: 720px; } .mm-hero-card__meta { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; } .mm-hero-card__round { font-family: var(--mm-font-display); font-style: italic; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mm-secondary); margin: 0 0 4px; } .mm-hero-card__title { font-size: clamp(2rem, 5vw, 3.4rem); font-style: italic; text-transform: uppercase; line-height: 1.02; margin: 0 0 10px; } .mm-hero-card__title a { color: var(--mm-text); } .mm-hero-card__title a:hover { color: var(--mm-primary); } .mm-hero-card__sub { font-family: var(--mm-font-display); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mm-muted); margin: 0 0 20px; } /* ---------- 10. Post card ---------- */ .mm-card { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.15s ease, border-color 0.15s ease; } .mm-card:hover { transform: translateY(-3px); border-color: var(--mm-primary); } .mm-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mm-surface-light); } .mm-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } .mm-card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; } .mm-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mm-card__date { color: var(--mm-muted); font-size: 0.82rem; } .mm-card__title { font-size: 1.2rem; line-height: 1.2; margin: 0; } .mm-card__title a { color: var(--mm-text); } .mm-card__title a:hover { color: var(--mm-primary); } .mm-badge { display: inline-block; font-family: var(--mm-font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mm-primary); border: 1px solid rgba(43, 168, 223, 0.4); border-radius: 4px; padding: 2px 8px; } .mm-badge:hover { color: #06121a; background: var(--mm-primary); } /* ---------- 11. Tool cards ---------- */ .mm-tool-card { position: relative; background: var(--mm-surface-light); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); padding: 28px; overflow: hidden; } .mm-tool-card::after { content: ""; position: absolute; top: 0; right: -30px; width: 120px; height: 100%; transform: skewX(-18deg); opacity: 0.12; } .mm-tool-card--primary::after { background: var(--mm-primary); } .mm-tool-card--secondary::after { background: var(--mm-secondary); } .mm-tool-card__kicker { font-family: var(--mm-font-display); font-style: italic; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.9rem; margin: 0 0 6px; } .mm-tool-card--primary .mm-tool-card__kicker { color: var(--mm-primary); } .mm-tool-card--secondary .mm-tool-card__kicker { color: var(--mm-secondary); } .mm-tool-card__title { font-size: 1.7rem; font-style: italic; text-transform: uppercase; margin: 0 0 8px; } .mm-tool-card__desc { color: var(--mm-muted); margin: 0 0 18px; max-width: 46ch; } /* ---------- 12. Season & circuit cards ---------- */ .mm-season-card { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); padding: 16px 14px; text-align: center; display: flex; flex-direction: column; gap: 2px; transition: transform 0.15s ease, border-color 0.15s ease; } .mm-season-card:hover { transform: translateY(-3px); border-color: var(--mm-secondary); } .mm-season-card__year { font-family: var(--mm-font-display); font-style: italic; font-weight: 700; font-size: 1.7rem; color: var(--mm-text); line-height: 1; } .mm-season-card__count { color: var(--mm-muted); font-size: 0.8rem; } .mm-circuit-card { background: var(--mm-surface); border: 1px solid var(--mm-border); border-left: 3px solid var(--mm-primary); border-radius: var(--mm-radius); padding: 14px 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; transition: transform 0.15s ease, border-color 0.15s ease; } .mm-circuit-card:hover { transform: translateX(3px); border-left-color: var(--mm-secondary); } .mm-circuit-card__name { color: var(--mm-text); font-weight: 600; } .mm-circuit-card__count { color: var(--mm-muted); font-size: 0.8rem; white-space: nowrap; } /* ---------- 13. Páginas especiais ---------- */ .mm-page-special { padding: 36px 0 60px; } .mm-page-head { margin-bottom: 26px; } .mm-page-head__title { font-size: clamp(2rem, 4vw, 2.8rem); font-style: italic; text-transform: uppercase; margin: 0 0 6px; } .mm-page-head__sub { color: var(--mm-muted); margin: 0; max-width: 64ch; } .mm-page-intro { margin-bottom: 26px; max-width: 72ch; } .mm-decade { margin-bottom: 36px; } .mm-decade__title { font-size: 1.5rem; font-style: italic; text-transform: uppercase; color: var(--mm-secondary); border-bottom: 1px solid var(--mm-border); padding-bottom: 8px; margin-bottom: 18px; } .mm-decade__title span { color: var(--mm-muted); font-weight: 600; } .mm-filterbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } .mm-chip { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 999px; color: var(--mm-muted); font-family: var(--mm-font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9rem; padding: 7px 18px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .mm-chip:hover { color: var(--mm-text); border-color: var(--mm-primary); } .mm-chip.is-active { background: var(--mm-primary); border-color: var(--mm-primary); color: #06121a; } /* ---------- 14. Conteúdo dos posts ---------- */ .mm-breadcrumb-wrap { padding-top: 20px; } .mm-breadcrumb { font-size: 0.85rem; color: var(--mm-muted); } .mm-breadcrumb a { color: var(--mm-muted); } .mm-breadcrumb a:hover { color: var(--mm-primary); } .mm-breadcrumb__sep { margin: 0 8px; opacity: 0.5; } .mm-breadcrumb__current { color: var(--mm-text); } .single .site-main, .page .site-main { max-width: 860px; margin: 0 auto; } .single .entry-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-style: italic; text-transform: uppercase; line-height: 1.05; } .entry-meta, .entry-meta a { color: var(--mm-muted); } /* Nome do autor removido dos metadados (fallback de CSS além do filtro PHP). */ .entry-meta .byline, .entry-meta .author, .posted-by { display: none !important; } .entry-content { font-size: 1.05rem; } .entry-content a { text-decoration: underline; text-decoration-color: rgba(43, 168, 223, 0.45); text-underline-offset: 3px; } .entry-content img { border-radius: var(--mm-radius); height: auto; } .entry-content blockquote { border-left: 3px solid var(--mm-primary); background: var(--mm-surface); padding: 14px 18px; border-radius: 0 var(--mm-radius) var(--mm-radius) 0; color: var(--mm-muted); } .entry-content table { width: 100%; border-collapse: collapse; background: var(--mm-surface); border-radius: var(--mm-radius); overflow: hidden; display: block; overflow-x: auto; } .entry-content th, .entry-content td { border: 1px solid var(--mm-border); padding: 8px 12px; } .entry-content th { background: var(--mm-surface-light); font-family: var(--mm-font-display); letter-spacing: 0.05em; text-transform: uppercase; } /* Embeds e players antigos (o JS envolve iframes soltos em .mm-embed) */ .entry-content iframe, .entry-content video, .entry-content embed, .entry-content object { max-width: 100%; } .mm-embed { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--mm-radius); overflow: hidden; margin: 1.5em 0; } .mm-embed > iframe, .mm-embed > embed, .mm-embed > object, .mm-embed > video { position: absolute; inset: 0; width: 100%; height: 100%; } /* Spoiler/detalhes recolhíveis do acervo antigo (plugins como Shortcodes Ultimate usam .su-spoiler; outros usam .spoiler/.spoiler-content; e o HTML nativo
/). Cor de fundo e texto sempre pareadas com as variáveis do tema, senão ficam ilegíveis ao trocar claro/escuro (v1.2). */ .entry-content .su-spoiler, .entry-content .spoiler, .entry-content .spoiler-content, .entry-content .wp-spoiler, .entry-content details { background: var(--mm-surface) !important; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); margin: 1.2em 0; overflow: hidden; } .entry-content .su-spoiler-content, .entry-content details > *:not(summary) { color: var(--mm-text) !important; padding: 14px 18px; } .entry-content .su-spoiler-title, .entry-content summary { background: var(--mm-surface-light) !important; color: var(--mm-text) !important; cursor: pointer; padding: 10px 18px; font-family: var(--mm-font-display); font-weight: 700; letter-spacing: 0.03em; } /* Card das tools no fim do post */ .mm-post-tools { max-width: 860px; margin: 36px auto 0; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .mm-post-tools__item { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); padding: 20px; } .mm-post-tools__item p { margin: 0 0 12px; color: var(--mm-muted); } .mm-post-tools__kicker { font-family: var(--mm-font-display); font-style: italic; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mm-text) !important; margin-bottom: 4px !important; } /* Comentários — cor de texto forçada (v1.2): o GeneratePress pode gerar CSS de Customizer com uma cor fixa para essa área, que não acompanha o toggle claro/escuro e fica ilegível num dos dois temas. */ .comments-area { background: var(--mm-surface) !important; color: var(--mm-text) !important; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); padding: 24px; } .comment-body, .comment-content, .comment-content p, .comment-content li, .comment-author, .comment-author .fn, .comment-reply-title, .comment-reply-title small, .comment-metadata, .comment-form label, .comment-form p, .comment-form-comment, .comment-notes, .logged-in-as { color: var(--mm-text); } .comment-metadata a { color: var(--mm-muted); } .comment-body { border-bottom: 1px solid var(--mm-border); padding: 14px 0; } .comments-area input, .comments-area textarea { background: var(--mm-background); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); color: var(--mm-text); padding: 10px 14px; width: 100%; max-width: 100%; } .comments-area input[type="submit"] { width: auto; background: var(--mm-primary); color: #06121a; border: none; font-family: var(--mm-font-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } /* Paginação */ .mm-pagination { margin-top: 32px; } .mm-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .mm-pagination .page-numbers { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); color: var(--mm-text); padding: 8px 14px; font-family: var(--mm-font-display); font-weight: 600; } .mm-pagination .page-numbers.current { background: var(--mm-primary); border-color: var(--mm-primary); color: #06121a; } .mm-pagination .page-numbers:hover { border-color: var(--mm-primary); } /* ---------- 15. Estados vazios e 404 ---------- */ .mm-empty { text-align: center; padding: 60px 0; } .mm-empty__title { font-family: var(--mm-font-display); font-style: italic; font-weight: 700; font-size: 1.6rem; text-transform: uppercase; margin: 0 0 8px; } .mm-empty__text { color: var(--mm-muted); margin: 0 0 20px; } .mm-empty .mm-search__form { margin: 0 auto; } .mm-404 { text-align: center; padding: 40px 20px 80px; } .mm-404__code { font-family: var(--mm-font-display); font-style: italic; font-weight: 700; font-size: clamp(6rem, 18vw, 11rem); line-height: 1; margin: 0; background: linear-gradient(105deg, var(--mm-primary), var(--mm-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .mm-404__title { font-size: 2rem; font-style: italic; text-transform: uppercase; margin: 0 0 8px; } .mm-404__text { color: var(--mm-muted); max-width: 46ch; margin: 0 auto 24px; } .mm-404 .mm-search__form { margin: 0 auto 20px; } /* ---------- 16. Footer ---------- */ .mm-footer { background: var(--mm-surface); border-top: 1px solid var(--mm-border); margin-top: 60px; } .mm-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding: 44px 20px; } .mm-footer__brand { font-family: var(--mm-font-display); font-style: italic; font-weight: 700; font-size: 1.5rem; margin: 0 0 8px; } .mm-footer__brand span { color: var(--mm-primary); } .mm-footer__tag { color: var(--mm-muted); margin: 0; max-width: 36ch; } .mm-footer__heading { font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mm-secondary); margin: 0 0 12px; } .mm-footer__menu { list-style: none; margin: 0; padding: 0; } .mm-footer__menu li { margin-bottom: 8px; } .mm-footer__menu a { color: var(--mm-muted); } .mm-footer__menu a:hover { color: var(--mm-primary); } .mm-footer__bar { border-top: 1px solid var(--mm-border); padding: 14px 0; color: var(--mm-muted); font-size: 0.85rem; } .mm-footer__bar p { margin: 0; } /* ---------- 17. Gutenberg no frontend ---------- */ .is-style-mm-card, .is-style-mm-info-box, .is-style-mm-alert-box { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: var(--mm-radius); padding: 20px !important; } .is-style-mm-info-box { border-left: 4px solid var(--mm-primary); } .is-style-mm-alert-box { border-left: 4px solid var(--mm-live); } .wp-block-button.is-style-mm-secondary .wp-block-button__link { background: var(--mm-secondary); color: #0d1607; } /* ---------- 18. Acessibilidade ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ---------- 19. Responsivo ---------- */ @media (max-width: 1080px) { .mm-grid--6 { grid-template-columns: repeat(4, 1fr); } .mm-grid--4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .mm-grid--3 { grid-template-columns: repeat(2, 1fr); } .mm-grid--2 { grid-template-columns: 1fr; } .mm-post-tools { grid-template-columns: 1fr; } .mm-footer__grid { grid-template-columns: 1fr; gap: 24px; } /* Navegação mobile */ .mm-nav-toggle { display: inline-flex; align-items: center; margin-left: auto; } .mm-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--mm-background); border-bottom: 1px solid var(--mm-border); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 20px; max-height: calc(100vh - 70px); overflow-y: auto; } .mm-nav.is-open { display: flex; } .mm-nav__list { flex-direction: column; align-items: stretch; } .mm-nav__list a { padding: 14px 10px; font-size: 1.15rem; } .mm-nav__list ul { position: static; display: block; border: none; background: transparent; padding-left: 16px; } .mm-nav__tools { margin-top: 14px; flex-wrap: wrap; } } @media (max-width: 560px) { .mm-grid--6 { grid-template-columns: repeat(3, 1fr); } .mm-grid--4, .mm-grid--3 { grid-template-columns: 1fr; } .mm-hero-card { min-height: 340px; } .mm-hero-card__body { padding: 22px; } .mm-section { padding: 32px 0; } .mm-statusbar__link { display: none; } }