/* ════════════════════════════════════════════════════════ LightNews — Tema 2 · Redesign editorial (R1) Cores/fontes 100% via CSS vars injetadas por-site (tema2.php). Tokens neutros derivados via color-mix p/ não hardcodear marca. ════════════════════════════════════════════════════════ */ :root{ /* Tinta / superfícies derivadas dos neutros do tema */ --ink: var(--black); --ink-soft: color-mix(in srgb, var(--black) 64%, var(--bg-site, var(--white))); --ink-faint: color-mix(in srgb, var(--black) 42%, var(--bg-site, var(--white))); --surface: var(--white); --surface-2: color-mix(in srgb, var(--bg-site, var(--white)) 92%, var(--black) 8%); --hair: color-mix(in srgb, var(--black) 12%, var(--bg-site, var(--white))); --hair-soft: color-mix(in srgb, var(--black) 7%, var(--bg-site, var(--white))); /* Tinta do accent (chip/tag suaves) */ --accent-soft: color-mix(in srgb, var(--red) 12%, var(--bg-site, var(--white))); --accent-line: color-mix(in srgb, var(--red) 26%, var(--bg-site, var(--white))); --on-accent: #ffffff; /* Sombras */ --shadow-xs: 0 1px 2px rgba(15,18,28,.05); --shadow-sm: 0 2px 8px rgba(15,18,28,.07); --shadow-md: 0 10px 30px -12px rgba(15,18,28,.22); --shadow-lg: 0 24px 60px -22px rgba(15,18,28,.30); /* Escala tipográfica fluida */ --fs-display: clamp(2.1rem, 1.3rem + 3.4vw, 3.4rem); --fs-h1: clamp(1.7rem, 1.2rem + 2.1vw, 2.55rem); --fs-h2: clamp(1.35rem, 1.05rem + 1.2vw, 1.85rem); --fs-lead: clamp(1.02rem, .96rem + .3vw, 1.18rem); /* Ritmo de espaço */ --space-shell: clamp(20px, 4vw, 40px); --maxw: 1240px; --ease: cubic-bezier(.2,.7,.2,1); } body { margin: 0 !important; font-family: var(--font); background: var(--bg-site, var(--white)); color: var(--ink); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -.003em; } html { overflow-x: hidden; scroll-behavior: smooth; } a { text-decoration: none; color: inherit; } .dot{margin:0 5px;opacity:.5;} img { max-width: 100%; } ::selection{ background: color-mix(in srgb, var(--red) 24%, transparent); } /* ════════════════════════════════════════════════════════ TOP BAR ════════════════════════════════════════════════════════ */ .topbar { background: var(--topbar-bg); color: var(--topbar-txt); font-size: 12px; padding: 6px 0; letter-spacing: .01em; } .topbar-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-shell); display: flex; justify-content: space-between; align-items: center; } .topbar-left { font-size: 14px; color: var(--topbar-txt); font-weight: 600; } .topbar-right { display: flex; align-items: center; gap: 18px; font-size: 14px; } .topbar-right a { color: var(--topbar-txt); font-size: 14px; font-weight: 600; transition: color .2s var(--ease), opacity .2s; opacity: .92; } .topbar-right a:hover { color: var(--red); opacity: 1; } .topbar-divider { color: var(--topbar-txt); opacity: .35; } .topbar-socials { display: flex; gap: 14px; } .topbar-socials a { color: var(--topbar-txt); font-size: 16px !important; opacity: .85; transition: color .2s, opacity .2s, transform .2s var(--ease); } .topbar-socials a:hover { color: var(--red); opacity: 1; transform: translateY(-1px); } /* ════════════════════════════════════════════════════════ NAVBAR ════════════════════════════════════════════════════════ */ .navbar { background: var(--nav-bg); border-bottom: 1px solid var(--nav-bd, var(--hair)); padding: 16px 0; position: sticky; top: 0; z-index: 900; backdrop-filter: saturate(1.1); } .navbar-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-shell); display: flex; justify-content: space-between; align-items: center; gap: 24px; overflow: visible; position: relative; } .nav-links { margin: 0; display: flex; align-self: stretch; align-items: center; gap: 2px; list-style: none; flex-wrap: nowrap; overflow: visible; min-width: 0; } .nav-links li { position: relative; align-self: stretch; display: flex; } .nav-links li a { box-sizing: border-box; display: flex; align-items: center; height: 100%; gap: 5px; font-family: var(--font); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--nav-txt); padding: 9px 13px; border-radius: var(--radius-sm); transition: color .2s var(--ease), background .2s; white-space: nowrap; text-transform: uppercase; position: relative; } .nav-links li a::after{ content:''; position:absolute; left:13px; right:13px; bottom:-17px; height:2px; background: var(--nav-active, var(--red)); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); border-radius:2px; } .nav-links li a:hover { color: var(--nav-hover, var(--red)); } .nav-links li a:hover::after{ transform: scaleX(1); } .nav-links li a.active { color: var(--nav-active, var(--red)); font-weight: 800; } .nav-links li a.active::after{ transform: scaleX(1); } .nav-links li a .arrow { font-size: 9px; color: var(--ink-faint); margin-top: 1px; } .nav-links li.has-dropdown { position: relative; } .nav-links li.has-dropdown:hover > .nav-dropdown, .nav-links li.has-dropdown:focus-within > .nav-dropdown { display: block; } .nav-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--surface); min-width: 200px; box-shadow: var(--shadow-md); border: 1px solid var(--hair-soft); border-radius: var(--radius-md); padding: 7px; z-index: 999; list-style: none; margin: 0; } .nav-dropdown li a { padding: 9px 14px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ink); white-space: nowrap; display: block; border-radius: var(--radius-sm); text-transform: none; } .nav-dropdown li a:hover, .nav-dropdown li a.active { color: var(--red); background: var(--accent-soft); } .nav-links li a .caret { font-size: 9px; color: var(--ink-faint); margin-top: 1px; transition: transform .2s var(--ease); } .nav-links li.has-dropdown:hover .caret{ transform: rotate(180deg); } [data-theme="dark"] .nav-dropdown { background: #1c1c1c; border-color:#2c2c2c; } [data-theme="dark"] .nav-dropdown li a { color: #e0e0e0; } .t2-sb-sub { padding-left: 28px !important; font-size: 13px !important; opacity: .8; } .nav-search { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--nav-txt); padding: 9px 6px 9px 14px; transition: color .2s, transform .2s var(--ease); } .nav-search:hover { color: var(--red); transform: scale(1.08); } .nav-links li:hover .dropdown { display: block; } .dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--surface); min-width: 190px; border-top: 2px solid var(--red); box-shadow: var(--shadow-md); border-radius: 0 0 var(--radius-md) var(--radius-md); z-index: 100; } .dropdown a { display: block; padding: 10px 16px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--hair-soft); } .dropdown a:hover { background: var(--accent-soft); color: var(--red); } /* ════════════════════════════════════════════════════════ SEARCH MODAL ════════════════════════════════════════════════════════ */ .search-modal { display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--black) 55%, transparent); backdrop-filter: blur(6px); z-index: 9999; align-items: flex-start; justify-content: center; padding-top: 14vh; } .search-modal.open { display: flex; animation: t2fade .25s var(--ease); } @keyframes t2fade{ from{opacity:0} to{opacity:1} } .search-modal-box { background: var(--surface); padding: 34px; width: 92%; max-width: 580px; position: relative; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: t2pop .3s var(--ease); } @keyframes t2pop{ from{opacity:0; transform: translateY(14px) scale(.98)} to{opacity:1; transform:none} } .search-modal-close { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--ink-soft); line-height: 1; transition: color .2s; } .search-modal-close:hover{ color: var(--red); } .search-modal h3 { font-family: var(--font); font-size: 22px; font-weight: 800; margin-bottom: 18px; letter-spacing: -.02em; } .search-modal form { display: flex; } .search-modal input { flex: 1; padding: 14px 16px; border: 1.5px solid var(--hair); font-size: 15px; outline: none; font-family: var(--font); border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--surface); color: var(--ink); transition: border-color .2s; } .search-modal input:focus { border-color: var(--red); } .search-modal button[type="submit"] { background: var(--red); color: var(--on-accent); border: none; padding: 0 24px; font-family: var(--font); font-weight: 700; font-size: 14px; cursor: pointer; transition: filter .2s; border-radius: 0 var(--radius-md) var(--radius-md) 0; } .search-modal button[type="submit"]:hover { filter: brightness(.92); } /* ════════════════════════════════════════════════════════ SHARED COMPONENTS ════════════════════════════════════════════════════════ */ .cat-badge { display: inline-block; background: var(--red); color: var(--on-accent); font-family: var(--font); font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 4px 11px; margin-bottom: 12px; width: auto; align-self: flex-start; border-radius: 999px; box-shadow: var(--shadow-xs); } .cat-badge.dark { background: color-mix(in srgb, var(--black) 70%, var(--bg-site)); } .section-title { font-family: var(--font); font-size: var(--fs-h2); font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: -.01em; padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--hair); position: relative; display: flex; align-items: center; gap: 12px; } .section-title::before { content: ''; display: inline-block; width: 10px; height: 1.05em; background: var(--red); border-radius: 2px; flex-shrink: 0; } .section-title::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 64px; height: 3px; background: var(--red); border-radius: 3px; } .breadcrumb { max-width: var(--maxw); margin: 22px auto 0; padding: 0 var(--space-shell); font-size: 12.5px; font-weight: 500; display: flex; gap: 0; align-items: center; flex-wrap: wrap; color: var(--ink-soft); } .breadcrumb a { color: var(--red); font-weight: 700; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb li { display: inline-flex; align-items: center; } .breadcrumb li+li::before { content: '/'; margin: 0 7px; color: var(--ink-faint); speak: none; speak-as: spell-out; } .page-wrap { max-width: var(--maxw); margin: 44px auto 72px; padding: 0 var(--space-shell); box-sizing: border-box; } .post-layout > * { min-width: 0; } .rp-section > * { min-width: 0; } .main-sidebar-section > * { min-width: 0; } .inner-layout > * { min-width: 0; } .also-like-wrap { overflow: hidden; max-width: 100%; } .btn-red { display: inline-block; background: var(--red); color: var(--on-accent); font-family: var(--font); font-size: 14px; font-weight: 700; padding: 12px 30px; transition: filter .2s, transform .2s var(--ease), box-shadow .2s; border: none; cursor: pointer; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .btn-red:hover { filter: brightness(.93); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-outline { display: inline-block; border: 1.5px solid var(--red); color: var(--red); font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .03em; padding: 9px 22px; transition: background .2s, color .2s, transform .2s var(--ease); cursor: pointer; border-radius: var(--radius-md); } .btn-outline:hover { background: var(--red); color: var(--on-accent); transform: translateY(-1px); } .social-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: #fff; font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer; transition: filter .2s, transform .2s var(--ease); text-decoration: none; border-radius: var(--radius-md); } .social-row:hover { filter: brightness(1.1); transform: translateX(3px); } .social-row .soc-left { display: flex; align-items: center; gap: 11px; } .social-row .soc-action { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; opacity: .92; text-transform: uppercase; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .tag-pill { display: inline-block; border: 1px solid var(--hair); color: var(--ink-soft); font-size: 12px; font-weight: 600; padding: 6px 13px; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s var(--ease); border-radius: 999px; background: var(--surface); } .tag-pill:hover, .tag-pill.active { background: var(--red); color: var(--on-accent); border-color: var(--red); transform: translateY(-1px); } .newsletter-box { background: var(--surface-2); padding: 24px 22px; border: 1px solid var(--hair-soft); border-top: 3px solid var(--red); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); } .newsletter-box p { font-family: var(--font); font-size: 16px; font-weight: 800; line-height: 1.32; margin-bottom: 7px; letter-spacing: -.01em; } .newsletter-box small { font-size: 12.5px; display: block; margin-bottom: 16px; color: var(--ink-soft); line-height: 1.5; } .newsletter-form { display: flex; flex-direction: column; gap: 9px; } .newsletter-form input { padding: 11px 14px; border: 1px solid var(--hair); font-size: 13px; outline: none; font-family: var(--font); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); transition: border-color .2s; } .newsletter-form input:focus { border-color: var(--red); } .newsletter-form button { background: var(--red); color: var(--on-accent); border: none; padding: 11px; font-family: var(--font); font-size: 13px; font-weight: 800; letter-spacing: .04em; cursor: pointer; transition: filter .2s; border-radius: var(--radius-sm); text-transform: uppercase; } .newsletter-form button:hover { filter: brightness(.93); } .ad-banner { width: 100%; background: var(--red); display: flex; align-items: center; justify-content: center; min-height: 185px; cursor: pointer; position: relative; overflow: hidden; border-radius: var(--radius-md); } .ad-banner-inner { text-align: center; color: #fff; padding: 20px; z-index: 1; position: relative; } .ad-banner .ad-top { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 6px; } .ad-banner .ad-main { font-size: 40px; font-weight: 900; line-height: 1; color: #FFD700; text-shadow: 3px 3px 0 rgba(0,0,0,.3); text-transform: uppercase; letter-spacing: -1px; } .ad-banner .ad-sub { font-size: 13px; letter-spacing: 2px; color: rgba(255,255,255,.85); margin-top: 8px; text-transform: uppercase; } .ad-banner::before, .ad-banner::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.05); } .ad-banner::before { width: 200px; height: 200px; top: -60px; right: -40px; } .ad-banner::after { width: 140px; height: 140px; bottom: -50px; left: -30px; } .pagination { display: flex; gap: 7px; margin-top: 36px; flex-wrap: wrap; } .pagination a { min-width: 40px; height: 40px; padding: 0 6px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hair); font-size: 13px; font-weight: 700; transition: background .2s, color .2s, border-color .2s, transform .15s var(--ease); border-radius: var(--radius-md); background: var(--surface); } .pagination a.active, .pagination a:hover { background: var(--red); color: var(--on-accent); border-color: var(--red); transform: translateY(-1px); } /* ════════════════════════════════════════════════════════ HOME — TICKER ════════════════════════════════════════════════════════ */ .ticker-bar { padding: 18px 0 18px; border-bottom: none; } .ticker-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-shell); display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; } .ticker-item { display: flex; align-items: center; gap: 14px; cursor: pointer; position: relative; padding-left: 0; } .ticker-item:not(:first-child)::before{ content:''; position:absolute; left:-13px; top:6px; bottom:6px; width:1px; background: var(--hair-soft); } .ticker-item img { width: 96px; height: 72px; object-fit: cover; flex-shrink: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); } .ticker-meta { display: flex; flex-direction: column; gap: 4px; } .ticker-meta .byline { font-size: 11.5px; margin-top: 0; margin-bottom: 0; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; } .ticker-meta .byline span { color: var(--red); font-weight: 800; } .ticker-meta h4 { font-size: 16px; font-weight: 800; line-height: 1.3; transition: color .2s; margin-top: 0; margin-bottom: 0; letter-spacing: -.01em; } .ticker-item:hover h4 { color: var(--red); } /* ════════════════════════════════════════════════════════ HOME — HERO (assimétrico) ════════════════════════════════════════════════════════ */ .hero { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-shell); display: grid; grid-template-columns: 1.62fr 1fr; gap: 22px; align-items: stretch; } .hero-main { position: relative; overflow: hidden; cursor: pointer; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .hero-main img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; display: block; transition: transform .6s var(--ease); } .hero-main:hover img { transform: scale(1.045); } .hero-main-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.34) 60%,transparent 100%); padding: 56px 30px 30px; color: #fff; } .hero-main-overlay h2 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.12; margin-bottom: 14px; letter-spacing: -.02em; text-shadow: 0 1px 10px rgba(0,0,0,.45); } .hero-main-overlay .byline-hero { font-size: 13px; color: rgba(255,255,255,.85); font-weight: 500; } .hero-main-overlay .byline-hero span { color: #fff; font-weight: 700; } .hero-side { display: flex; flex-direction: column; gap: 22px; } .hero-side-card { position: relative; overflow: hidden; cursor: pointer; flex: 1; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .hero-side-card img { width: 100%; height: 100%; min-height: 219px; object-fit: cover; display: block; transition: transform .6s var(--ease); } .hero-side-card:hover img { transform: scale(1.05); } .hero-side-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.3) 68%,transparent 100%); padding: 36px 18px 18px; color: #fff; } .hero-side-overlay h3 { font-size: 20px; font-weight: 800; line-height: 1.22; margin-bottom: 8px; letter-spacing: -.01em; } .hero-side-overlay .byline-side { font-size: 12px; color: rgba(255,255,255,.85); font-weight: 500; } .hero-side-overlay .byline-side span { color: #fff; font-weight: 700; } /* ════════════════════════════════════════════════════════ HOME — GRID 4 ════════════════════════════════════════════════════════ */ .grid4-section { max-width: var(--maxw); margin: 40px auto 0; padding: 0 var(--space-shell); } .grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; } .grid4-card { cursor: pointer; display: block; } .grid4-card img { width: 100%; height: 190px; object-fit: cover; display: block; transition: transform .5s var(--ease); border-radius: var(--radius-md); } .grid4-card:hover img { transform: scale(1.03); } .grid4-card .g4-meta { margin-top: 12px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); } .grid4-card .g4-meta span { color: var(--red); font-weight: 800; } .grid4-card h3 { font-size: 18px; font-weight: 800; line-height: 1.3; margin-top: 7px; transition: color .2s; letter-spacing: -.01em; } .grid4-card:hover h3 { color: var(--red); } /* ════════════════════════════════════════════════════════ HOME — RECENT + POPULAR ════════════════════════════════════════════════════════ */ .rp-section { max-width: var(--maxw); margin: 44px auto 0; padding: 0 var(--space-shell); display: grid; grid-template-columns: 1fr 340px; gap: 48px; } .recent-large-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; margin-bottom: 18px; } .recent-large-card { position: relative; overflow: hidden; cursor: pointer; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .recent-large-card img { width: 100%; height: 250px; object-fit: cover; display: block; transition: transform .5s var(--ease); } .recent-large-card:hover img { transform: scale(1.05); } .recent-large-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 100%); padding: 40px 18px 16px; color: #fff; } .recent-large-overlay h3 { font-size: 21px; font-weight: 800; line-height: 1.22; margin: 9px 0 7px; letter-spacing: -.01em; } .recent-large-overlay .byline-r { font-size: 12px; color: rgba(255,255,255,.85); font-weight: 500; } .recent-large-overlay .byline-r strong { color: #fff; } .recent-small-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .recent-small-card { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; } .recent-small-card img { width: 104px; height: 78px; object-fit: cover; flex-shrink: 0; border-radius: var(--radius-md); } .recent-small-card .sc-meta { display: flex; flex-direction: column; gap: 5px; } .recent-small-card .sc-meta .byline-s { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); } .recent-small-card .sc-meta .byline-s span { color: var(--red); font-weight: 800; } .recent-small-card .sc-meta h4 { font-size: 16px; font-weight: 800; line-height: 1.3; transition: color .2s; letter-spacing: -.01em; } .recent-small-card:hover .sc-meta h4 { color: var(--red); } .popular-list { display: flex; flex-direction: column; } .popular-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; cursor: pointer; border-bottom: 1px solid var(--hair-soft); } .popular-item:last-child{ border-bottom: none; } .popular-num { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; font-style: italic; flex-shrink: 0; } .popular-content { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; } .popular-content h4 { font-size: 16px; font-weight: 800; line-height: 1.34; transition: color .2s; letter-spacing: -.01em; } .popular-item:hover .popular-content h4 { color: var(--red); } /* ════════════════════════════════════════════════════════ HOME — SPORTS CAROUSEL ════════════════════════════════════════════════════════ */ .sports-section { max-width: var(--maxw); margin: 48px auto 0; padding: 0 var(--space-shell); } .sports-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--hair); padding-bottom: 12px; margin-bottom: 26px; position: relative; } .sports-header::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 64px; height: 3px; background: var(--red); border-radius: 3px; } .sports-header h2 { font-size: var(--fs-h2); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; } .carousel-arrows { display: flex; gap: 6px; } .carousel-arrows button { width: 38px; height: 38px; background: var(--surface); border: 1px solid var(--hair); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, border-color .2s; border-radius: 50%; color: var(--ink-soft); } .carousel-arrows button:hover { background: var(--red); border-color: var(--red); color: var(--on-accent); } .sports-carousel-wrap { overflow: hidden; } .sports-carousel-track { display: flex; gap: 26px; transition: transform .5s var(--ease); } .sports-card { flex: 0 0 calc(25% - 19.5px); cursor: pointer; display: block; } .sports-card img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform .5s var(--ease); border-radius: var(--radius-md); } .sports-card:hover img { transform: scale(1.03); } .sports-card .sp-meta { margin-top: 11px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); } .sports-card .sp-meta span { color: var(--red); font-weight: 800; } .sports-card h3 { font-size: 18px; font-weight: 800; line-height: 1.3; margin-top: 6px; transition: color .2s; letter-spacing: -.01em; } .sports-card:hover h3 { color: var(--red); } /* ════════════════════════════════════════════════════════ HOME — MAIN+SIDEBAR (asimétrico, sidebar mais estreita) ════════════════════════════════════════════════════════ */ .main-sidebar-section { max-width: var(--maxw); margin: 52px auto 0; padding: 0 var(--space-shell); display: grid; grid-template-columns: 1fr 348px; gap: 52px; } .lifestyle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .lifestyle-card { cursor: pointer; display: block; background: var(--surface); border: 1px solid var(--hair-soft); border-radius: var(--radius-lg); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; box-shadow: var(--shadow-xs); } .lifestyle-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-line); } .lifestyle-card img { width: 100%; height: 210px; object-fit: cover; display: block; transition: transform .5s var(--ease); } .lifestyle-card:hover img { transform: scale(1.04); } .lifestyle-card .ls-meta { margin: 16px 18px 0; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); } .lifestyle-card .ls-meta span { color: var(--red); font-weight: 800; } .lifestyle-card h3 { font-size: 18px; font-weight: 800; line-height: 1.3; margin: 7px 18px 18px; transition: color .2s; letter-spacing: -.01em; } .lifestyle-card:hover h3 { color: var(--red); } .tech-list { display: flex; flex-direction: column; } .tech-item { display: flex; gap: 22px; align-items: flex-start; padding: 24px 0; cursor: pointer; border-bottom: 1px solid var(--hair-soft); } .tech-item img { width: 210px; max-width: 100%; height: 160px; object-fit: cover; flex-shrink: 0; transition: transform .5s var(--ease); border-radius: var(--radius-md); } .tech-item:hover img { transform: scale(1.03); } .tech-item-body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .tech-item-body .ti-meta { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); } .tech-item-body .ti-meta span { color: var(--red); font-weight: 800; } .tech-item-body h3 { font-size: 22px; font-weight: 800; line-height: 1.24; transition: color .2s; letter-spacing: -.015em; } .tech-item:hover .tech-item-body h3 { color: var(--red); } .tech-item-body p { font-size: 14px; line-height: 1.65; color: var(--ink-soft); } .sidebar-col { display: flex; flex-direction: column; gap: 0; } .latest-main-img { width: 100%; height: 210px; object-fit: cover; display: block; margin-bottom: 12px; border-radius: var(--radius-md); } .latest-main-title { font-size: 22px; font-weight: 800; line-height: 1.24; margin: 10px 0 12px; transition: color .2s; display: block; letter-spacing: -.01em; } .latest-main-title:hover { color: var(--red); } .latest-main-meta { font-size: 11.5px; font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); } .latest-main-meta span { color: var(--red); font-weight: 800; } .latest-main-excerpt { font-size: 14px; line-height: 1.65; margin-bottom: 18px; color: var(--ink-soft); } .latest-small-list { display: flex; flex-direction: column; } .latest-small-item { display: flex; gap: 13px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--hair-soft); cursor: pointer; } .latest-small-item img { width: 84px; height: 62px; object-fit: cover; flex-shrink: 0; border-radius: var(--radius-sm); } .latest-small-item .ls-sm-meta { font-size: 11px; font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); } .latest-small-item .ls-sm-meta span { color: var(--red); font-weight: 800; } .latest-small-item h4 { font-size: 15px; font-weight: 800; line-height: 1.3; transition: color .2s; letter-spacing: -.01em; } .latest-small-item:hover h4 { color: var(--red); } .stay-connected { margin-top: 32px; } .stay-connected .section-title { font-size: 17px; } .social-list { display: flex; flex-direction: column; gap: 9px; } .tags-section { margin-top: 32px; } .advertise-section { margin-top: 32px; } .newsletter-section { margin-top: 32px; } /* ════════════════════════════════════════════════════════ PÁGINAS INTERNAS — LAYOUT COM SIDEBAR ════════════════════════════════════════════════════════ */ .inner-layout { display: grid; grid-template-columns: 1fr 332px; gap: 52px; } .cats-list { display: flex; flex-direction: column; } .cat-link-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--hair-soft); font-size: 15px; font-weight: 700; transition: color .2s, padding-left .2s var(--ease); border-radius: var(--radius-sm); } .cat-link-item:hover { color: var(--red); padding-left: 10px; } .cat-link-item .cnt { background: var(--accent-soft); color: var(--red); font-size: 12px; font-weight: 800; padding: 2px 10px; border-radius: 999px; } .post-list { display: flex; flex-direction: column; gap: 26px; } .post-item { display: flex; gap: 20px; align-items: flex-start; cursor: pointer; padding-bottom: 26px; border-bottom: 1px solid var(--hair-soft); } .post-item:last-child{ border-bottom: none; } .post-item img { width: 180px; height: 124px; object-fit: cover; flex-shrink: 0; transition: transform .5s var(--ease); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); } .post-item:hover img { transform: scale(1.025); } .post-item-body .meta { font-size: 11px; font-weight: 600; margin-bottom: 7px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); } .post-item-body .meta span { color: var(--red); font-weight: 800; } .post-item-body h3 { font-size: 19px; font-weight: 800; line-height: 1.28; margin-bottom: 9px; transition: color .2s; letter-spacing: -.015em; } .post-item:hover .post-item-body h3 { color: var(--red); } .post-item-body p { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); } .cat-hero { position: relative; overflow: hidden; margin-bottom: 34px; cursor: pointer; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .cat-hero img { width: 100%; height: 400px; object-fit: cover; display: block; transition: transform .6s var(--ease); } .cat-hero:hover img { transform: scale(1.04); } .cat-hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top,rgba(0,0,0,.86) 0%,transparent 100%); padding: 48px 28px 26px; color: #fff; } .cat-hero-overlay h2 { font-size: 28px; font-weight: 800; line-height: 1.2; margin: 12px 0 9px; letter-spacing: -.02em; } .cat-hero-overlay .meta { font-size: 13px; color: rgba(255,255,255,.85); } .cat-hero-overlay .meta span { color: #fff; font-weight: 700; } /* ════════════════════════════════════════════════════════ PÁGINA SOBRE ════════════════════════════════════════════════════════ */ .about-hero-block { display: grid; grid-template-columns: 300px 1fr; gap: 44px; margin-bottom: 34px; align-items: flex-start; } .about-hero-block img { width: 100%; object-fit: cover; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .about-text p { font-size: var(--fs-lead); line-height: 1.85; margin-bottom: 16px; color: var(--ink-soft); } .team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; margin-top: 10px; } .team-card { text-align: center; border: 1px solid var(--hair-soft); overflow: hidden; transition: box-shadow .25s, transform .25s var(--ease); border-radius: var(--radius-lg); background: var(--surface); } .team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .team-card img { width: 100%; height: 280px; object-fit: cover; display: block; } .team-card-body { padding: 18px; } .team-card h4 { font-size: 17px; font-weight: 800; margin-bottom: 4px; letter-spacing: -.01em; } .team-card .cargo { font-size: 13px; color: var(--ink-faint); margin-bottom: 12px; } .team-socials { display: flex; justify-content: center; gap: 7px; } .team-socials a { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; border-radius: 50%; transition: transform .2s var(--ease), opacity .2s; } .team-socials a:hover{ transform: translateY(-2px); opacity: .9; } /* ════════════════════════════════════════════════════════ PÁGINA AUTORES ════════════════════════════════════════════════════════ */ .authors-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; } .author-card { border: 1px solid var(--hair-soft); overflow: hidden; transition: box-shadow .25s, transform .25s var(--ease); border-radius: var(--radius-lg); background: var(--surface); } .author-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .author-card img { width: 100%; height: 280px; object-fit: cover; display: block; transition: transform .5s var(--ease); } .author-card:hover img { transform: scale(1.03); } .author-card-body { padding: 20px; text-align: center; } .author-card-body h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; letter-spacing: -.01em; } .author-card-body .cargo { font-size: 13px; color: var(--ink-faint); margin-bottom: 10px; } .author-card-body .bio { font-size: 13px; line-height: 1.7; margin-bottom: 12px; color: var(--ink-soft); } .author-card-body .post-count { font-size: 13px; font-weight: 700; color: var(--red); margin-bottom: 12px; } .author-socials { display: flex; justify-content: center; gap: 7px; } .author-socials a { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; border-radius: 50%; transition: transform .2s var(--ease), opacity .2s; } .author-socials a:hover{ transform: translateY(-2px); opacity: .9; } /* ════════════════════════════════════════════════════════ PÁGINA AUTOR INDIVIDUAL ════════════════════════════════════════════════════════ */ .author-profile-layout { display: grid; grid-template-columns: 290px 1fr; gap: 48px; } .author-profile { position: sticky; top: 96px; align-self: start; } .author-profile img { width: 100%; height: 310px; object-fit: cover; display: block; margin-bottom: 18px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .author-profile h1, .author-profile h2 { font-size: 22px; font-weight: 800; margin-bottom: 4px; letter-spacing: -.01em; } .author-profile .cargo { font-size: 14px; color: var(--ink-faint); margin-bottom: 12px; } .author-profile .bio { font-size: 13.5px; line-height: 1.75; margin-bottom: 16px; color: var(--ink-soft); } .author-profile .stats { font-size: 13px; font-weight: 700; color: var(--red); margin-bottom: 16px; } .author-profile-socials { display: flex; gap: 7px; } .author-profile-socials a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; border-radius: 50%; transition: transform .2s var(--ease), opacity .2s; } .author-profile-socials a:hover{ transform: translateY(-2px); opacity: .9; } /* ════════════════════════════════════════════════════════ PÁGINA CONTATO ════════════════════════════════════════════════════════ */ .contact-layout { display: grid; grid-template-columns: 1fr 360px; gap: 64px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; } .form-group label { font-size: 13.5px; font-weight: 700; color: var(--ink); } .form-group input, .form-group textarea { padding: 12px 14px; border: 1px solid var(--hair); font-size: 14px; font-family: var(--font); outline: none; transition: border-color .2s, box-shadow .2s; border-radius: var(--radius-md); background: var(--surface); color: var(--ink); } .form-group input:focus, .form-group textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--accent-soft); } .form-group textarea { resize: vertical; min-height: 160px; } .btn-submit { display: block; margin-left: auto; background: var(--red); color: var(--on-accent); border: none; padding: 13px 38px; font-family: var(--font); font-size: 15px; font-weight: 700; cursor: pointer; transition: filter .2s, transform .2s var(--ease); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .btn-submit:hover { filter: brightness(.93); transform: translateY(-2px); } .info-list { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px; padding-inline-start: 0; } .info-list li { display: flex; align-items: center; gap: 14px; font-size: 15px; } .info-icon { width: 42px; height: 42px; border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; border-radius: 50%; color: var(--red); background: var(--accent-soft); border-color: transparent; } .find-us-socials { display: flex; gap: 9px; margin-top: 12px; } .find-us-socials a { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; transition: transform .2s var(--ease), opacity .2s; } .find-us-socials a:hover{ transform: translateY(-2px); opacity: .9; } /* ════════════════════════════════════════════════════════ PÁGINAS ESTÁTICAS ════════════════════════════════════════════════════════ */ .static-page { max-width: 760px; padding-bottom: 60px; } .static-page h1 { font-family: var(--font); font-size: var(--fs-h1); font-weight: 800; color: var(--ink); margin-bottom: 8px; line-height: 1.15; letter-spacing: -.02em; } .static-page h1+p:first-of-type,.static-page .updated { font-size: 13px; color: var(--ink-faint); margin-bottom: 28px; } .static-page h2 { font-size: var(--fs-h2); font-weight: 800; color: var(--ink); margin: 36px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--hair-soft); letter-spacing: -.01em; } .static-page h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 24px 0 8px; } .static-page p { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.85; margin-bottom: 16px; } .static-page ul,.static-page ol { padding-left: 24px; margin-bottom: 16px; } .static-page ul li,.static-page ol li { font-size: var(--fs-lead); line-height: 1.85; margin-bottom: 6px; color: var(--ink-soft); } .static-page strong { color: var(--ink); } .static-page a { color: var(--red); text-decoration: underline; } .static-page blockquote { border-left: 3px solid var(--red); margin: 24px 0; padding: 14px 22px; background: var(--surface-2); font-style: italic; color: var(--ink-soft); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .static-page hr { border: none; border-top: 1px solid var(--hair-soft); margin: 28px 0; } /* ════════════════════════════════════════════════════════ BUSCA ════════════════════════════════════════════════════════ */ .search-bar-wrap { background: var(--surface-2); padding: 36px 0; border-bottom: 1px solid var(--hair-soft); } .search-bar-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-shell); } .search-bar-inner h1, .search-bar-inner h2 { font-size: var(--fs-h2); font-weight: 800; margin-bottom: 16px; letter-spacing: -.01em; } .search-form { display: flex; max-width: 620px; } .search-form input { flex: 1; padding: 14px 18px; border: 1.5px solid var(--hair); font-size: 15px; outline: none; font-family: var(--font); border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--surface); color: var(--ink); transition: border-color .2s; } .search-form input:focus { border-color: var(--red); } .search-form button { background: var(--red); color: var(--on-accent); border: none; padding: 0 26px; font-family: var(--font); font-weight: 700; font-size: 14px; cursor: pointer; transition: filter .2s; border-radius: 0 var(--radius-md) var(--radius-md) 0; } .search-form button:hover { filter: brightness(.93); } .results-count { font-size: 15px; margin-bottom: 26px; color: var(--ink-soft); } .results-count strong { font-weight: 800; color: var(--ink); } .tag-highlight { background: var(--surface-2); border-left: 4px solid var(--red); padding: 18px 22px; margin-bottom: 30px; border-radius: 0 var(--radius-md) var(--radius-md) 0; } .tag-highlight h1, .tag-highlight h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; } .tag-highlight small { font-size: 13px; color: var(--ink-faint); } /* ════════════════════════════════════════════════════════ PÁGINA 404 ════════════════════════════════════════════════════════ */ .error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: 60px 20px; } .error-num { font-size: clamp(110px, 22vw, 180px); font-weight: 900; line-height: 1; background: linear-gradient(180deg, var(--red) 0%, color-mix(in srgb, var(--red) 30%, var(--bg-site)) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -.04em; } .error-title { font-size: 28px; font-weight: 800; margin: 10px 0 14px; letter-spacing: -.01em; } .error-desc { font-size: 15px; color: var(--ink-soft); margin-bottom: 32px; } /* ════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════ */ .footer { background: var(--footer-bg); color: var(--footer-txt); margin-top: 72px; } .footer-top { max-width: var(--maxw); margin: 0 auto; padding: 56px var(--space-shell) 44px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; } .footer-col h4 { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 22px; text-transform: uppercase; letter-spacing: .06em; position: relative; padding-bottom: 12px; } .footer-col h4::after{ content:''; position:absolute; left:0; bottom:0; width: 34px; height: 2px; background: var(--red); border-radius:2px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; padding-inline-start: 0px; } .footer-col ul li a { font-size: 14px; font-weight: 500; color: var(--footer-txt); opacity: .82; transition: color .2s, opacity .2s, padding-left .2s var(--ease); } .footer-col ul li a:hover { color: var(--red); opacity: 1; padding-left: 5px; } .footer-bottom { border-top: 1px solid var(--footer-bd, rgba(255,255,255,.1)); background: var(--footer-bottom-bg); color: var(--footer-bottom-txt); } .footer-bottom-inner { max-width: var(--maxw); margin: 0 auto; padding: 26px var(--space-shell); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-logo img { height: 44px; display: block; } .footer-socials { display: flex; gap: 9px; } .footer-socials a { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; transition: opacity .2s, transform .2s var(--ease); } .footer-socials a:hover { opacity: .85; transform: translateY(-2px); } .footer-copy { border-top: 1px solid var(--footer-bd, rgba(255,255,255,.08)); } .footer-copy-inner { max-width: var(--maxw); margin: 0 auto; padding: 18px var(--space-shell); display: flex; flex-direction: column; gap: 7px; } .footer-copy-links { display: flex; flex-wrap: wrap; gap: 4px 18px; } .footer-copy-links a { font-size: 12.5px; color: var(--footer-txt); opacity: .7; transition: color .2s, opacity .2s; } .footer-copy-links a:hover { color: var(--red); opacity: 1; } .footer-copy p { font-size: 12px; color: var(--footer-txt); opacity: .55; } /* ════════════════════════════════════════════════════════ PÁGINA DO POST (assimétrico: artigo largo + sidebar fina sticky) ════════════════════════════════════════════════════════ */ .post-layout { display: grid; grid-template-columns: minmax(0,1fr) 332px; gap: 56px; } .post-header { margin-bottom: 24px; } .post-header h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.12; margin-bottom: 12px; letter-spacing: -.025em; word-break: break-word; overflow-wrap: break-word; } .post-header .post-subtitle { font-size: var(--fs-lead); color: var(--ink-soft); margin-bottom: 18px; line-height: 1.55; font-weight: 500; } .post-header .post-meta { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 400; flex-wrap: wrap; color: var(--ink-soft); line-height: 1.5; padding-bottom: 4px; } .post-header .post-meta img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; margin-right: 4px; box-shadow: var(--shadow-xs); } .post-header .post-meta a { color: var(--red); font-weight: 700; text-decoration: none; } .post-header .post-meta .cat-link { color: var(--red); font-weight: 700; } .post-featured-img { width: 100% !important; height: auto !important; max-height: 600px; object-fit: cover; display: block; margin-bottom: 8px; aspect-ratio: auto !important; border-radius: var(--radius-lg); } .post-img-source{font-size: 12px; color: var(--ink-faint); margin-bottom: 24px; font-style: italic;} .post-share-bar { display: flex; align-items: center; gap: 12px; margin: 20px 0 28px; flex-wrap: wrap; } .post-views { font-size: 24px; font-weight: 800; line-height: 1; color: var(--ink); display: flex; flex-direction: column; gap: 0; flex-shrink: 0; } .post-views small { font-size: 12px; font-weight: 500; color: var(--ink-faint); } .share-btns { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; } .share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 17px; color: #fff; font-size: 12.5px; font-weight: 700; font-family: var(--font); border: none; cursor: pointer; transition: filter .2s, transform .2s var(--ease); white-space: nowrap; text-decoration: none; border-radius: var(--radius-md); } .share-btn:hover { filter: brightness(1.08); transform: translateY(-2px); } .post-main { min-width: 0; overflow-x: hidden; } .post-article { max-width: 100%; overflow-x: hidden; min-width: 0; } .share-fb { background: var(--soc-fb); } .share-tw { background: var(--soc-tw); } .share-wa { background: var(--soc-wa); } .share-tg { background: var(--soc-tg); } .share-li { background: var(--soc-li); } .post-body { font-size: 16px; line-height: 1.9; color: var(--ink); } .post-body p { margin-bottom: 20px; } .post-body h2, .post-body h3 { font-weight: 800; margin: 32px 0 14px; letter-spacing: -.015em; } .post-body h2 { font-size: 25px; } .post-body h3 { font-size: 20px; } .post-body img { max-width: 100%; height: auto; margin: 18px 0; border-radius: var(--radius-md); } .post-body blockquote { border-left: 4px solid var(--red); background: var(--surface-2); padding: 22px 28px; margin: 30px 0; font-style: italic; font-size: 17px; line-height: 1.7; border-radius: 0 var(--radius-md) var(--radius-md) 0; } .post-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 32px 0; padding: 18px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); } .post-tags i { color: var(--red); font-size: 14px; } .author-box { display: flex; gap: 22px; align-items: flex-start; border: 1px solid var(--hair-soft); padding: 28px; margin: 34px 0; border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: var(--shadow-xs); } .author-box-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-sm); } .author-box-info .author-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 5px; } .author-box-info h4 { font-size: 20px; font-weight: 800; margin-bottom: 8px; letter-spacing: -.01em; } .author-box-info p { font-size: 14px; line-height: 1.7; margin-bottom: 14px; color: var(--ink-soft); } .author-box-socials { display: flex; gap: 7px; } .author-box-socials a { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; transition: transform .2s var(--ease), opacity .2s; } .author-box-socials a:hover{ transform: translateY(-2px); opacity: .9; } .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin: 34px 0; } .post-nav-item { padding: 22px 0; transition: background .2s; } .post-nav-item:last-child { text-align: right; border-left: 1px solid var(--hair); padding-left: 26px; } .post-nav-item:first-child { padding-right: 26px; } .post-nav-item .nav-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px; } .post-nav-item h4 { font-size: 16px; font-weight: 800; line-height: 1.38; color: var(--ink); transition: color .2s; letter-spacing: -.01em; } .post-nav-item:hover h4 { color: var(--red); } .also-like { margin: 10px 0 44px; } .also-like-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .also-like-header h3 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.01em; } .also-like-arrows { display: flex; gap: 6px; } .also-like-arrows button { width: 36px; height: 36px; background: var(--surface); border: 1px solid var(--hair); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, border-color .2s; border-radius: 50%; color: var(--ink-soft); } .also-like-arrows button:hover { background: var(--red); border-color: var(--red); color: var(--on-accent); } .also-like-track { display: flex; gap: 22px; transition: transform .5s var(--ease); } .also-like-card { flex: 0 0 calc(33.333% - 15px); cursor: pointer; display: block; } .also-like-card img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform .5s var(--ease); margin-bottom: 13px; border-radius: var(--radius-md); } .also-like-card:hover img { transform: scale(1.03); } .also-like-card .al-meta { font-size: 11px; font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); } .also-like-card .al-meta span { color: var(--red); font-weight: 800; } .also-like-card h4 { font-size: 17px; font-weight: 800; line-height: 1.3; transition: color .2s; letter-spacing: -.01em; } .also-like-card:hover h4 { color: var(--red); } .comments-section { margin-top: 14px; } .comments-section h3 { font-size: var(--fs-h2); font-weight: 800; margin-bottom: 26px; letter-spacing: -.01em; } .comment-list { display: flex; flex-direction: column; gap: 0; } .comment-item { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--hair-soft); } .comment-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-xs); } .comment-body { flex: 1; } .comment-body .c-name { font-weight: 800; font-size: 15px; margin-bottom: 3px; letter-spacing: -.01em; } .comment-body .c-date { font-size: 11px; color: var(--ink-faint); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 10px; } .comment-body p { font-size: 14.5px; line-height: 1.7; margin-bottom: 12px; color: var(--ink-soft); } .btn-reply { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--red); font-size: 12px; font-weight: 700; padding: 7px 18px; border: none; cursor: pointer; font-family: var(--font); transition: background .2s, color .2s; border-radius: 999px; } .btn-reply:hover { background: var(--red); color: var(--on-accent); } .comment-replies2 { margin-left: 62px; border-left: 2px solid var(--accent-line); padding-left: 18px; } .comment-replies2 .comment-item { border-bottom: none; padding: 14px 0; } .comment-replies2 .comment-avatar { width: 36px; height: 36px; } .reply-badge2 { display:inline-flex;align-items:center;gap:3px;font-size:10px;background:var(--red);color:var(--on-accent);padding:2px 8px;border-radius:999px;margin-left:6px;font-weight:700;vertical-align:middle; } .comment-form { margin-top: 40px; background: var(--surface-2); border: 1px solid var(--hair-soft); border-radius: var(--radius-lg); padding: 30px; } .comment-form h3 { font-size: var(--fs-h2); font-weight: 800; margin-bottom: 6px; letter-spacing: -.01em; } .comment-form .form-note { font-size: 13px; color: var(--ink-faint); margin-bottom: 22px; } .comment-form .form-note span { color: var(--red); } .comment-form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px; } .comment-form .cf-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .comment-form .cf-group label { font-size: 13px; font-weight: 700; } .comment-form .cf-group label span { color: var(--red); } .comment-form input, .comment-form textarea { padding: 12px 14px; border: 1px solid var(--hair); font-size: 14px; font-family: var(--font); outline: none; transition: border-color .2s, box-shadow .2s; width: 100%; border-radius: var(--radius-md); background: var(--surface); color: var(--ink); box-sizing: border-box; } .comment-form input:focus, .comment-form textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--accent-soft); } .comment-form textarea { resize: vertical; min-height: 140px; } .comment-form .cf-check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 20px; font-size: 13px; } .comment-form .cf-check input { width: auto; margin-top: 2px; } .post-sidebar { align-self: start; position: sticky; top: 96px; } .post-sidebar-search { display: flex; margin-bottom: 30px; } .post-sidebar-search input { flex: 1; padding: 11px 14px; border: 1px solid var(--hair); font-size: 13px; outline: none; font-family: var(--font); border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--surface); color: var(--ink); transition: border-color .2s; } .post-sidebar-search input:focus { border-color: var(--red); } .post-sidebar-search button { background: var(--surface); border: 1px solid var(--hair); padding: 0 15px; cursor: pointer; font-size: 13px; color: var(--ink-soft); transition: color .2s, background .2s; border-radius: 0 var(--radius-md) var(--radius-md) 0; } .post-sidebar-search button:hover { color: var(--on-accent); background: var(--red); border-color: var(--red); } .sidebar-post-sm { display: flex; flex-direction: column; gap: 0; margin-bottom: 30px; } .sidebar-post-sm-item { display: flex; gap: 13px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--hair-soft); cursor: pointer; } .sidebar-post-sm-item img { width: 84px; height: 62px; object-fit: cover; flex-shrink: 0; border-radius: var(--radius-sm); } .sidebar-post-sm-item .meta { font-size: 10.5px; font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); } .sidebar-post-sm-item .meta span { color: var(--red); font-weight: 800; } .sidebar-post-sm-item h5 { font-size: 14px; font-weight: 800; line-height: 1.3; transition: color .2s; letter-spacing: -.01em; } .sidebar-post-sm-item:hover h5 { color: var(--red); } .sidebar-featured { position: relative; overflow: hidden; margin-bottom: 0; cursor: pointer; display: block; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-sm); } .sidebar-featured img { width: 100%; height: 230px; object-fit: cover; display: block; transition: transform .5s var(--ease); } .sidebar-featured:hover img { transform: scale(1.04); } .sidebar-featured-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%); padding: 36px 18px 16px; } .sidebar-featured-meta { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.85); margin: 6px 0 6px; } .sidebar-featured-meta span { color: #fff; font-weight: 700; } .sidebar-featured h4 { font-size: 18px; font-weight: 800; line-height: 1.25; color: #fff; transition: color .2s; letter-spacing: -.01em; } .sidebar-featured-body { padding: 18px; margin-bottom: 30px; background: var(--surface-2); border: 1px solid var(--hair-soft); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .sidebar-featured-body p { font-size: 13.5px; line-height: 1.7; margin-bottom: 14px; color: var(--ink-soft); } /* ════════════════════════════════════════════════════════ DARK MODE ════════════════════════════════════════════════════════ */ [data-theme="dark"] { --black: #f0f0f0; --white: #1a1a1a; --gray-light: #252525; --gray-mid: #767676; --gray-border: #333333; /* re-derivar tokens neutros para escuro */ --ink: #ececec; --ink-soft: #b9b9b9; --ink-faint: #8a8a8a; --surface: #1c1c1c; --surface-2: #202020; --hair: #353535; --hair-soft: #2a2a2a; --accent-soft: color-mix(in srgb, var(--red) 22%, #1c1c1c); --accent-line: color-mix(in srgb, var(--red) 40%, #1c1c1c); } [data-theme="dark"] body { background: #141414; color: var(--ink); } [data-theme="dark"] .topbar { background: #0a0a0a; } [data-theme="dark"] .navbar { background: #1a1a1a; border-bottom-color: #2c2c2c; } [data-theme="dark"] .nav-links li a:hover { color: var(--red); } [data-theme="dark"] .nav-links li a.active { color: var(--red); } [data-theme="dark"] .dropdown { background: #1e1e1e; } [data-theme="dark"] .dropdown a { border-bottom-color: #2a2a2a; color: #e0e0e0; } [data-theme="dark"] .dropdown a:hover{ background: #2a2a2a; } [data-theme="dark"] .search-modal-box{ background: #1c1c1c; color: #f0f0f0; } [data-theme="dark"] .search-modal input { background: #2a2a2a; border-color: #444; color: #f0f0f0; } [data-theme="dark"] #t2-logo-light { display: none !important; } [data-theme="dark"] #t2-logo-dark { display: block !important; } [data-theme="dark"] .nav-links li a { color: #e0e0e0; } [data-theme="dark"] .section-title { color: #f0f0f0; border-bottom-color: #333; } [data-theme="dark"] .grid4-card h3, [data-theme="dark"] .sports-card h3, [data-theme="dark"] .lifestyle-card h3, [data-theme="dark"] .ticker-meta h4, [data-theme="dark"] .popular-content h4, [data-theme="dark"] .recent-small-card .sc-meta h4, [data-theme="dark"] .latest-small-item h4, [data-theme="dark"] .tech-item-body h3, [data-theme="dark"] .post-header h1, [data-theme="dark"] .post-body, [data-theme="dark"] .author-box-info p, [data-theme="dark"] .comment-body p, [data-theme="dark"] .author-card-body .bio, [data-theme="dark"] .sidebar-featured-body p { color: #e0e0e0; } [data-theme="dark"] .lifestyle-card { background: #1c1c1c; border-color: #2a2a2a; } [data-theme="dark"] .newsletter-box { background: #202020; border-color:#2a2a2a; } [data-theme="dark"] .newsletter-form input { background: #1a1a1a; border-color: #444; color: #f0f0f0; } [data-theme="dark"] .tag-pill { border-color: #444; color: #ddd; background:#1c1c1c; } [data-theme="dark"] .tag-pill:hover, [data-theme="dark"] .tag-pill.active { background: var(--red); border-color: var(--red); color: #fff; } [data-theme="dark"] .breadcrumb { color: #8a8a8a; } [data-theme="dark"] .breadcrumb li+li::before { color: #555; } [data-theme="dark"] .post-body blockquote { background: #202020; } [data-theme="dark"] .author-box { border-color: #2a2a2a; background:#1c1c1c; } [data-theme="dark"] .cat-link-item { border-color: #2a2a2a; color: #ddd; } [data-theme="dark"] .popular-num { background: color-mix(in srgb, var(--red) 24%, #1c1c1c); color: #fff; } [data-theme="dark"] .pagination a { border-color: #444; color: #ddd; background: #1e1e1e; } [data-theme="dark"] .post-nav { border-color: #333; } [data-theme="dark"] .post-nav-item { border-color: #333; } [data-theme="dark"] .post-nav-item h4{ color: #e0e0e0; } [data-theme="dark"] .comment-item { border-color: #2a2a2a; } [data-theme="dark"] .comment-body .c-name { color: #f0f0f0; } [data-theme="dark"] .comment-body .c-date { color: #767676; } [data-theme="dark"] .comment-form { background:#1c1c1c; border-color:#2a2a2a; } [data-theme="dark"] .latest-small-item { border-color: #2a2a2a; } [data-theme="dark"] .static-page p, [data-theme="dark"] .static-page li { color: #ccc; } [data-theme="dark"] .static-page h1, [data-theme="dark"] .static-page h2, [data-theme="dark"] .static-page h3, [data-theme="dark"] .static-page strong { color: #e0e0e0; } [data-theme="dark"] .static-page h2 { border-color: #333; } [data-theme="dark"] .static-page blockquote { background: #1a1a1a; color: #aaa; } [data-theme="dark"] .about-text p { color: #ddd; } [data-theme="dark"] .info-list li { color: #ddd; } [data-theme="dark"] .info-icon { border-color: transparent; color: var(--red); background: color-mix(in srgb, var(--red) 22%, #1c1c1c); } [data-theme="dark"] .form-group label, [data-theme="dark"] .cf-group label { color: #ddd; } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group textarea, [data-theme="dark"] .comment-form input, [data-theme="dark"] .comment-form textarea { background: #161616; border-color: #444; color: #f0f0f0; } [data-theme="dark"] .results-count { color: #bbb; } [data-theme="dark"] .post-item-body p { color: #bbb; } [data-theme="dark"] .author-card { border-color: #2a2a2a; background: #1c1c1c; } [data-theme="dark"] .author-card-body h3 { color: #f0f0f0; } [data-theme="dark"] .team-card { border-color: #2a2a2a; background: #1c1c1c; } [data-theme="dark"] .team-card h4 { color: #f0f0f0; } [data-theme="dark"] .tag-highlight { background: #202020; border-color: var(--red); } [data-theme="dark"] .tag-highlight h1, [data-theme="dark"] .tag-highlight h2 { color: #f0f0f0; } [data-theme="dark"] .search-bar-wrap { background: #1c1c1c; } [data-theme="dark"] .search-bar-inner h1, [data-theme="dark"] .search-bar-inner h2 { color: #f0f0f0; } [data-theme="dark"] .search-form input { background: #2a2a2a; border-color: #444; color: #f0f0f0; } [data-theme="dark"] .post-sidebar-search input { background: #2a2a2a; border-color: #444; color: #f0f0f0; } [data-theme="dark"] .post-sidebar-search button { background: #2a2a2a; border-color: #444; color: #767676; } [data-theme="dark"] .sports-header { border-bottom-color: #333; } [data-theme="dark"] .carousel-arrows button { background: #222; border-color: #444; color: #ddd; } [data-theme="dark"] .also-like-arrows button { background: #222; border-color: #444; color: #ddd; } [data-theme="dark"] .comment-form .form-note { color: #767676; } [data-theme="dark"] .cf-check { color: #bbb; } [data-theme="dark"] .no-results__text { color: #767676; } [data-theme="dark"] .error-desc { color: #767676; } [data-theme="dark"] .post-views small { color: #767676; } [data-theme="dark"] .sidebar-post-sm-item { border-color: #2a2a2a; } [data-theme="dark"] .sidebar-post-sm-item h5 { color: #e0e0e0; } [data-theme="dark"] .sidebar-featured-body { background:#1c1c1c; border-color:#2a2a2a; } [data-theme="dark"] .post-item { border-color: #2a2a2a; } [data-theme="dark"] .tech-item { border-bottom-color: #2a2a2a; } [data-theme="dark"] .popular-item { border-bottom-color: #2a2a2a; } [data-theme="dark"] .ticker-bar { border-bottom-color: #2a2a2a; } [data-theme="dark"] .ticker-item:not(:first-child)::before { background:#2a2a2a; } [data-theme="dark"] .footer-col ul li a { color: #bbb; } /* ════════════════════════════════════════════════════════ THEME TOGGLE BUTTON ════════════════════════════════════════════════════════ */ .theme-toggle { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: var(--topbar-txt); font-family: var(--font); font-size: 13px; font-weight: 700; padding: 7px; margin: 3px; cursor: pointer; border-radius: var(--radius-sm); transition: background .2s, border-color .2s; white-space: nowrap; letter-spacing: .4px; } .theme-toggle:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.45); } .theme-toggle__icon { font-size: 14px; line-height: 1; } .theme-toggle__label { font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; } .theme-toggle__icon--dark, .theme-toggle__label--dark { display: none; } .theme-toggle__icon--light, .theme-toggle__label--light { display: inline; } [data-theme="dark"] .theme-toggle__icon--light, [data-theme="dark"] .theme-toggle__label--light { display: none; } [data-theme="dark"] .theme-toggle__icon--dark, [data-theme="dark"] .theme-toggle__label--dark { display: inline; } [data-theme="dark"] .theme-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); } /* SOC COLORS */ .soc-fb { background: var(--soc-fb); } .soc-tw { background: var(--soc-tw); } .soc-yt { background: var(--soc-yt); } .soc-ig { background: var(--soc-ig); } .soc-wa { background: var(--soc-wa); } .soc-tg { background: var(--soc-tg); } .soc-li { background: var(--soc-li); } .social-row--fb { background: var(--soc-fb); } .social-row--tw { background: var(--soc-tw); } .social-row--yt { background: var(--soc-yt); } /* SECTION TITLE MODIFIERS */ .section-title--plain { text-transform: none; } .section-title--mt { margin-top: 36px; } .section-title--mt-sm { margin-top: 28px; } .section-title--plain-mt { text-transform: none; margin-top: 28px; } /* NAVBAR LOGO */ .nav-logo { height: 46px; display: block; } /* UTILITY */ .mb-0 { margin-bottom: 0 !important; } .mb-20 { margin-bottom: 20px; } .mb-40 { margin-bottom: 40px; } .mt-10 { margin-top: 10px; } .mt-16 { margin-top: 16px; } .mt-28 { margin-top: 28px; } .link-red { color: var(--red); font-weight: 600; } .cf-group--no-mb { margin-bottom: 0 !important; } .cf-group--mt { margin-top: 16px; } .form-group--no-mb { margin-bottom: 0 !important; } .cat-link-active { color: var(--red); } /* EMPTY SEARCH / NO RESULTS */ .no-results { text-align: center; padding: 64px 0; } .no-results__icon { font-size: 62px; color: var(--hair); display: block; margin-bottom: 18px; } .no-results__title { font-size: 22px; font-weight: 800; margin-bottom: 8px; letter-spacing: -.01em; } .no-results__text { font-size: 15px; color: var(--ink-soft); } /* BACK TO TOP */ .back-top { position: fixed; bottom: 30px; right: 30px; width: 46px; height: 46px; background: var(--red); color: var(--on-accent); border: none; font-size: 18px; cursor: pointer; display: none; align-items: center; justify-content: center; transition: filter .2s, transform .2s var(--ease); z-index: 999; border-radius: 50%; box-shadow: var(--shadow-md); } .back-top:hover { filter: brightness(.93); transform: translateY(-3px); } /* ════════════════════════════════════════════════════════ HAMBURGER & MOBILE SIDEBAR — Tema 2 ════════════════════════════════════════════════════════ */ .t2-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px 4px; flex-shrink: 0; } .t2-hamburger span { display: block; width: 24px; height: 2px; background: var(--nav-txt); border-radius: 2px; transition: background .2s; } [data-theme="dark"] .t2-hamburger span { background: #e0e0e0; } .t2-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); z-index: 9990; } .t2-sidebar-overlay.active { display: block; } .t2-sidebar-menu { position: fixed; top: 0; left: -320px; width: 290px; height: 100%; background: var(--surface); z-index: 9999; overflow-y: auto; transition: left .32s var(--ease); box-shadow: 3px 0 30px rgba(0,0,0,.18); } .t2-sidebar-menu.active { left: 0; } [data-theme="dark"] .t2-sidebar-menu { background: #1a1a1a; } .t2-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--hair-soft); } .t2-sidebar-header .t2-sb-logo img { height: 36px; width: auto; } .t2-sidebar-close { background: none; border: none; font-size: 28px; cursor: pointer; color: var(--ink-soft); padding: 4px; line-height: 1; } [data-theme="dark"] .t2-sidebar-close { color: #ccc; } .t2-sidebar-close:hover { color: var(--red); } .t2-sidebar-search { padding: 16px 20px; border-bottom: 1px solid var(--hair-soft); } .t2-sidebar-search form { display: flex; border: 1px solid var(--hair); overflow: hidden; border-radius: var(--radius-md); } .t2-sidebar-search input { flex: 1; padding: 10px 13px; border: none; font-size: 13px; font-family: var(--font); outline: none; background: transparent; color: var(--ink); } .t2-sidebar-search button { background: var(--surface-2); border: none; padding: 10px 14px; font-size: 14px; color: var(--ink-soft); cursor: pointer; } .t2-sidebar-search button:hover { background: var(--red); color: var(--on-accent); } .t2-sidebar-nav { padding: 8px 0; } .t2-sidebar-nav a { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-size: 14px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--hair-soft); transition: background .15s, color .15s, padding-left .15s var(--ease); } .t2-sidebar-nav a:hover { background: var(--surface-2); color: var(--nav-hover, var(--red)); padding-left: 26px; } .t2-sidebar-nav a.active { color: var(--red); } [data-theme="dark"] .t2-sidebar-nav a { color: #e0e0e0; border-bottom-color: #2a2a2a; } /* ════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .main-sidebar-section { grid-template-columns: 1fr 312px; gap: 40px; } .inner-layout { grid-template-columns: 1fr 300px; gap: 40px; } .post-layout { grid-template-columns: minmax(0,1fr) 300px; gap: 40px; } .hero { grid-template-columns: 1.5fr 1fr; } } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero-main img { min-height: 340px; } .ticker-inner { grid-template-columns: 1fr 1fr; } .ticker-item:not(:first-child)::before{ display:none; } .nav-links li a { padding: 8px 9px; font-size: 12px; } .grid4 { grid-template-columns: repeat(2,1fr); } .rp-section, .main-sidebar-section, .inner-layout, .contact-layout, .author-profile-layout { grid-template-columns: 1fr; gap: 40px; } .author-profile { position: static; } .recent-large-grid, .recent-small-grid { grid-template-columns: 1fr; } .about-hero-block { grid-template-columns: 1fr; } .team-grid, .authors-grid { grid-template-columns: repeat(2,1fr); } .footer-top { grid-template-columns: repeat(2,1fr); } .sports-card { flex: 0 0 calc(50% - 13px); } .post-layout { grid-template-columns: 1fr; gap: 40px; } .post-sidebar { position: static; } } @media (max-width: 768px) { .topbar-inner { flex-wrap: wrap; gap: 6px; padding: 8px var(--space-shell); } .topbar-left { font-size: 11px; } .topbar-divider { display: none; } .topbar-right { gap: 12px; } .topbar-socials { gap: 10px; } .topbar-socials a { font-size: 14px; } .nav-links { display: none !important; } .t2-hamburger { display: flex; } .navbar { padding: 12px 0; } .navbar-inner { flex-wrap: nowrap; gap: 8px; } .hero { grid-template-columns: 1fr; } .hero-main img { min-height: 270px; } .hero-side { flex-direction: column; } .grid4 { grid-template-columns: repeat(2,1fr); gap: 16px; } .grid3 { grid-template-columns: repeat(2,1fr); gap: 16px; } .lifestyle-grid { grid-template-columns: 1fr; } .tech-item { flex-direction: column; } .tech-item img { width: 100%; max-width: 100%; height: 220px; } .post-layout { grid-template-columns: 1fr; } .post-header h1 { font-size: 26px; } .post-sidebar { display: none; } .post-nav { grid-template-columns: 1fr; } .post-nav-item:last-child { text-align: left; border-left: none; border-top: 1px solid var(--hair); padding-left: 0; } .post-nav-item:first-child { padding-right: 0; } .share-btn { white-space: normal; padding: 9px 13px; font-size: 12px; gap: 5px; } .share-btns { gap: 6px; } .comment-form { padding: 22px; } .comment-form .cf-row { grid-template-columns: 1fr; } .comment-replies2 { margin-left: 24px; } .form-row { grid-template-columns: 1fr; } .also-like-card { flex: 0 0 100%; } .ticker-inner { grid-template-columns: 1fr; } .footer-top { grid-template-columns: repeat(2,1fr); gap: 28px; } .footer-bottom-inner { flex-direction: column; gap: 12px; align-items: flex-start; } } @media (max-width: 560px) { .topbar { padding: 6px 0; } .topbar-left { font-size: 10px; } .topbar-right a:not(.topbar-socials a) { display: none; } .navbar-inner { padding: 0 14px; } .team-grid, .authors-grid { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; } .footer-bottom-inner { flex-direction: column; align-items: flex-start; } .sports-card { flex: 0 0 100%; } .form-row { grid-template-columns: 1fr; } .also-like-card { flex: 0 0 100%; } .ticker-inner { grid-template-columns: 1fr; } .grid4 { grid-template-columns: 1fr; } .grid3 { grid-template-columns: 1fr; } .grid2 { grid-template-columns: 1fr; } .hero { grid-template-columns: 1fr; } .hero-sidebar { display: none; } .post-header h1 { font-size: 22px; line-height: 1.2; } .post-header .post-meta { font-size: 12px; flex-wrap: wrap; gap: 8px; } .also-like-row { flex-direction: column; } .footer-top { grid-template-columns: 1fr; } .footer-bottom-inner { align-items: center; text-align: center; } .rp-section { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════ SEO: Table of Contents (ToC) — gerado automaticamente ══════════════════════════════════════════════════════ */ .toc { margin-top: 20px; background: var(--surface-2, #f4f4f4); border: 1px solid var(--hair, #ddd); border-left: 4px solid var(--red, #e63946); border-radius: var(--radius-md, 8px); padding: 18px 22px; margin-bottom: 0; font-size: 0.9rem; } [data-theme="dark"] .toc { background: #1c1c1c; border-color: #333; border-left-color: var(--red, #e63946); } .toc details{margin:0} .toc summary{cursor:pointer;list-style:none} .toc summary::-webkit-details-marker{display:none} .toc summary::after{content:'▾';float:right;font-size:1.1em;transition:transform .2s} .toc details:not([open]) summary::after{transform:rotate(-90deg)} .toc-title { font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; color: var(--red, #e63946); } .article-content figure:first-of-type{margin:0!important} .toc-list { margin: 0; padding-left: 20px; line-height: 1.8; } .toc-list li a { color: var(--ink, #111); text-decoration: none; transition: color .2s; } [data-theme="dark"] .toc-list li a { color: #ccc; } .toc-list li a:hover { color: var(--red, #e63946); text-decoration: underline; } .toc-list li.toc-sub { margin-left: 16px; font-size: 0.85rem; } /* CLS prevention: reservar espaço mínimo para anúncios */ .ad-wide-wrap{min-height:130px;background:transparent;text-align:center;width:100%} .ad-sq-wrap{min-height:250px;background:transparent;text-align:center} .ad-wide-wrap img,.ad-sq-wrap img{display:block;margin:0 auto} /* Cookie Consent Bar */ .cookie-box{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--surface,#fff);border-top:1px solid var(--hair,#ddd);padding:18px 0;z-index:9990;box-shadow:0 -2px 20px rgba(0,0,0,.1)} .cookie-box.active{display:block} .cookie-box .cb-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:24px} .cookie-box .cb-text{font-size:13.5px;color:var(--ink-soft,#444);line-height:1.55} .cookie-box .cb-text a{color:var(--ink,#333);text-decoration:underline;font-weight:600} .cookie-box .cb-btn{flex-shrink:0;background:var(--red);color:var(--on-accent,#fff);border:none;padding:11px 30px;font-size:13px;font-weight:700;border-radius:var(--radius-md,6px);cursor:pointer;white-space:nowrap;transition:filter .2s,transform .2s} .cookie-box .cb-btn:hover{filter:brightness(.93);transform:translateY(-1px)} @media(max-width:600px){.cookie-box .cb-inner{flex-direction:column;text-align:center;gap:12px}} /* Stories menu highlight */ .nav-links a[href="/stories"],nav a[href="/stories"],.topbar a[href="/stories"]{background:linear-gradient(90deg,#ec4899,#a855f7,#3b82f6,#06b6d4)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;font-weight:700!important} /* Article Content Styling */ .article-content{--tc:var(--ink);--c1:var(--red);--bg:#1a1a1a;--br:var(--radius-md);font-size:17px!important;display:flex;flex-direction:column;gap:20px;line-height:1.75} .article-content h1:first-child{display:none!important} .article-content h2,.article-content h3{color:var(--tc)!important;margin-top:15px!important;margin-bottom:0px!important;letter-spacing:-.015em!important} .article-content p{margin-bottom:0!important} .article-content ul,.article-content ol{padding-left:24px!important;display:flex!important;flex-direction:column!important;gap:10px!important} .article-content ul{list-style:disc!important} .article-content ol{list-style:decimal!important} .article-content li::marker{color:var(--c1,var(--c-accent,#1a73e8))!important;font-weight:700!important;font-size:1.1em!important} .article-content blockquote{border-left:4px solid var(--c1)!important;padding:18px 22px!important;color:#fff!important;background:var(--tc)!important;font-style:italic!important;border-radius:0 var(--br) var(--br) 0!important} .article-content blockquote p,.article-content blockquote span,.article-content blockquote cite{color:#fff!important} .article-content pre{background:var(--bg)!important;padding:20px!important;border:1px solid var(--tc)!important;border-radius:var(--br)!important;overflow-x:auto!important;color:#dcdcdc!important;font-family:monospace!important} .article-content a{color:var(--c1)!important;text-decoration:underline!important;font-weight:500!important} .article-content img{box-shadow:var(--shadow-sm)!important;width:100%!important;border-radius:var(--br)!important;border:none!important;margin:0!important;padding:0!important} .article-content figcaption{font-size:12px!important;text-align:left!important;margin-top:10px!important;color:var(--ink-faint)!important;word-wrap:break-word!important;overflow-wrap:break-word!important} .article-content figure{margin:0!important;max-width:100%!important;overflow:hidden!important} .article-content table{margin:0!important;border-collapse:unset!important;color:var(--tc)!important;width:100%!important;max-width:100%!important;table-layout:auto!important} .article-content .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;margin:16px 0!important;max-width:100%!important} .article-content th{border:none!important;color:var(--tc)!important;background-color:transparent!important;border-left:1px solid var(--c1)!important;border-bottom:1px solid var(--c1)!important;padding:5px 15px!important;font-size:11px!important;font-weight:700!important;text-transform:uppercase!important} .article-content td{border:none!important;color:var(--tc)!important;background-color:transparent!important;border-left:1px solid var(--c1)!important;border-bottom:1px solid var(--c1)!important;padding:5px 15px!important;font-size:15px!important} .article-content tr{border:none!important;color:var(--tc)!important;background:none!important} .article-content th:first-child,.article-content td:first-child{padding-left:0!important;border-left:none!important} .article-content tr:last-child td{border-bottom:none!important} .article-content code{color:var(--tc)!important;border:1px solid var(--hair)!important;padding:0 3px!important;font-size:15px!important;font-weight:600!important;border-radius:var(--br)!important} .article-content pre code{border:none!important} [data-theme="dark"] .article-content{--tc:#ddd;--bg:#111} [data-theme="dark"] .article-content code{border-color:#555!important} /* Table responsive fix */ @media (max-width: 768px){ .article-content table{display:block!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important} .article-content table tbody{display:table!important;width:100%!important;min-width:500px!important} } body.dark-mode .post-img-source{color:#777;} /* Capa com figcaption igual às inline */ .post-cover-figure{margin:0 0 24px;max-width:100%;overflow:hidden} .post-cover-figure img{width:100%;height:auto;max-height:600px;object-fit:cover;display:block;border-radius:var(--radius-lg)} .post-cover-figure figcaption{font-size:12px;text-align:left;margin-top:10px;color:var(--ink-faint);word-wrap:break-word;overflow-wrap:break-word;font-style:italic;line-height:1.4} /* Video Cover */ .post-cover-video-wrap{position:relative;width:100%;padding-bottom:56.25%;background:#000;overflow:hidden;border-radius:var(--radius-lg)} .post-cover-video{width:100%;max-height:600px;display:block;background:#000} .post-cover-figure video{width:100%} .card-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:46px;color:rgba(255,255,255,.92);pointer-events:none;text-shadow:0 2px 12px rgba(0,0,0,.5)} /* Card play icon positioning */ .ticker-item,.hero-main,.hero-side-card,.recent-large-card,.recent-small-card{position:relative} /* ════════════════════════════════════════════════════════ R2 — REFINAMENTO EDITORIAL "AWARD-WINNING" Só adiciona/ajusta. Sem hardcode de marca: tudo via vars + color-mix. Tokens novos rederivam sozinhos no dark (referenciam --ink/--hair/--red). ════════════════════════════════════════════════════════ */ :root{ /* Escala de espaço coerente (passo 1.5x ~ ritmo vertical de portal) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 88px; /* Ritmo entre blocos da home/colunas (fluido, casa com --space-shell) */ --rhythm: clamp(40px, 5.2vw, 64px); /* Tipografia: corpo de leitura e leadings de referência */ --fs-body: clamp(.97rem, .94rem + .16vw, 1.06rem); --lh-tight: 1.14; --lh-snug: 1.28; --lh-body: 1.78; /* Tracking padrão de eyebrow/kicker (caixa-alta pequena) */ --track-eyebrow: .11em; --track-nav: .045em; /* Tinta complementar derivada */ --ink-quiet: color-mix(in srgb, var(--ink) 30%, var(--bg-site, var(--white))); --hair-strong: color-mix(in srgb, var(--ink) 18%, var(--bg-site, var(--white))); --accent-ink: color-mix(in srgb, var(--red) 82%, var(--ink)); /* Sombra com leve tom de marca p/ elevação mais "premium" */ --shadow-brand: 0 18px 46px -20px color-mix(in srgb, var(--red) 26%, rgba(15,18,28,.42)); --ease-out: cubic-bezier(.16,.84,.30,1); } [data-theme="dark"]{ --ink-quiet: color-mix(in srgb, var(--ink) 42%, var(--surface)); --hair-strong: #404040; --shadow-brand: 0 18px 46px -20px color-mix(in srgb, var(--red) 30%, rgba(0,0,0,.7)); } /* ── Acessibilidade: foco visível coerente em toda a UI ───────────────── */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .nav-links li a:focus-visible, .tag-pill:focus-visible, .pagination a:focus-visible{ outline: 2px solid var(--red); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ── TIPOGRAFIA: hierarquia, leading e contraste de pesos ─────────────── */ .post-body{ font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: -.003em; } .post-body p{ margin-bottom: var(--space-5); } /* Lettrine sutil no 1º parágrafo do artigo — toque editorial */ .post-body > p:first-of-type::first-letter, .article-content > p:first-of-type::first-letter{ font-size: 3.1em; line-height: .82; font-weight: 800; float: left; margin: 6px 12px 0 0; color: var(--accent-ink); } .post-header h1{ line-height: var(--lh-tight); letter-spacing: -.026em; } .post-header .post-subtitle{ line-height: 1.5; letter-spacing: -.006em; max-width: 64ch; } .hero-main-overlay h2, .recent-large-overlay h3, .cat-hero-overlay h2{ letter-spacing: -.022em; } /* Eyebrows / kickers / metas — caixa-alta refinada e consistente */ .grid4-card .g4-meta, .sports-card .sp-meta, .lifestyle-card .ls-meta, .recent-small-card .sc-meta .byline-s, .latest-small-item .ls-sm-meta, .latest-main-meta, .ticker-meta .byline, .post-item-body .meta, .sidebar-post-sm-item .meta, .also-like-card .al-meta, .tech-item-body .ti-meta{ letter-spacing: var(--track-eyebrow); font-size: 11px; font-weight: 700; } /* Kicker accent: marcador de ponto antes da categoria, elegante e discreto */ .grid4-card .g4-meta span, .sports-card .sp-meta span, .lifestyle-card .ls-meta span, .recent-small-card .sc-meta .byline-s span, .latest-small-item .ls-sm-meta span, .latest-main-meta span, .post-item-body .meta span, .also-like-card .al-meta span, .tech-item-body .ti-meta span, .sidebar-post-sm-item .meta span{ font-weight: 800; letter-spacing: var(--track-eyebrow); } /* Títulos de card: leading mais firme e transição de cor suave */ .grid4-card h3, .sports-card h3, .lifestyle-card h3, .ticker-meta h4, .recent-small-card .sc-meta h4, .latest-small-item h4, .also-like-card h4, .popular-content h4, .sidebar-post-sm-item h5, .post-nav-item h4{ line-height: var(--lh-snug); transition: color .25s var(--ease-out); } /* ── SECTION TITLE: divisor mais editorial (degradê na hairline) ──────── */ .section-title{ border-bottom: 0; padding-bottom: var(--space-4); } .section-title::before{ width: 4px; height: .96em; border-radius: 99px; } .section-title::after{ height: 2px; width: 100%; left: 0; bottom: 0; background: linear-gradient(90deg, var(--red) 0, var(--red) 62px, var(--hair) 62px, var(--hair) 100%); } .sports-header{ border-bottom: 0; } .sports-header::after{ width: 100%; height: 2px; left: 0; bottom: 0; background: linear-gradient(90deg, var(--red) 0, var(--red) 62px, var(--hair) 62px, var(--hair) 100%); } /* ── RITMO VERTICAL: escala coerente nas seções da home ───────────────── */ .ticker-bar{ padding: var(--space-5) 0; } .hero{ margin: 0 auto; gap: var(--space-5); } .grid4-section{ margin-top: var(--rhythm); } .rp-section{ margin-top: var(--rhythm); gap: var(--space-7); } .sports-section{ margin-top: var(--rhythm); } .main-sidebar-section{ margin-top: var(--rhythm); gap: var(--space-7); } .page-wrap{ margin-top: var(--space-7); margin-bottom: var(--space-9); } /* ── CARDS: hover mais "premium" (eleva + acompanha kicker e imagem) ──── */ .lifestyle-card, .team-card, .author-card{ transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .32s var(--ease-out); } .lifestyle-card:hover, .team-card:hover, .author-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-brand); } .grid4-card, .sports-card{ display: block; } .grid4-card img, .sports-card img, .also-like-card img{ transition: transform .55s var(--ease-out), box-shadow .32s var(--ease-out); } /* Overlay cards: refino do degradê (mais contraste no rodapé, topo limpo) */ .hero-main-overlay{ background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.42) 44%, rgba(0,0,0,0) 78%); } .hero-side-overlay, .recent-large-overlay, .sidebar-featured-overlay{ background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.34) 52%, rgba(0,0,0,0) 84%); } .cat-hero-overlay{ background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.32) 56%, rgba(0,0,0,0) 86%); } /* Eyebrow flutuante nos overlays (categoria com pílula tênue) */ .hero-main:hover img, .hero-side-card:hover img, .recent-large-card:hover img, .cat-hero:hover img, .sidebar-featured:hover img{ transform: scale(1.05); } /* ── TICKER: divisor vertical mais fino e elegante ────────────────────── */ .ticker-meta h4{ font-weight: 800; } .ticker-item img{ transition: transform .5s var(--ease-out); } .ticker-item:hover img{ transform: scale(1.04); } /* ── POPULAR: numeral display com mais caráter editorial ──────────────── */ .popular-num{ background: transparent; width: auto; min-width: 42px; height: auto; font-size: 30px; font-weight: 900; font-style: italic; color: color-mix(in srgb, var(--red) 22%, var(--bg-site, var(--white))); -webkit-text-stroke: 1px var(--accent-line); justify-content: flex-start; letter-spacing: -.04em; line-height: 1; } .popular-item:hover .popular-num{ color: var(--red); -webkit-text-stroke-color: var(--red); } [data-theme="dark"] .popular-num{ background: transparent; color: color-mix(in srgb, var(--red) 30%, var(--surface)); -webkit-text-stroke-color: var(--accent-line); } /* ── TAG PILLS / BADGES: micro-polish ─────────────────────────────────── */ .cat-badge{ letter-spacing: .1em; } .tag-pill{ transition: background .22s var(--ease-out), color .22s, border-color .22s, transform .18s var(--ease-out); } .tag-pill:hover, .tag-pill.active{ transform: translateY(-2px); box-shadow: var(--shadow-xs); } /* ── BOTÕES: brilho + leve realce de borda no accent ──────────────────── */ .btn-red, .btn-submit{ letter-spacing: .01em; } .btn-red:hover, .btn-submit:hover{ box-shadow: var(--shadow-brand); } .btn-outline{ transition: background .25s var(--ease-out), color .25s, transform .2s var(--ease-out), box-shadow .25s; } .btn-outline:hover{ box-shadow: var(--shadow-sm); } /* ── NAVBAR: tracking e sublinhado mais refinados ─────────────────────── */ .nav-links li a{ letter-spacing: var(--track-nav); transition: color .22s var(--ease-out), background .22s; } .nav-links li a::after{ height: 2px; bottom: -17px; } /* ── POST SHARE BAR / META: separadores e respiro ────────────────────── */ .post-header .post-meta{ gap: var(--space-3); } .post-share-bar{ padding-top: var(--space-4); border-top: 1px solid var(--hair-soft); } .post-views{ letter-spacing: -.02em; } /* ── AUTHOR BOX: label com tracking premium ───────────────────────────── */ .author-box-info .author-label, .post-nav-item .nav-label{ letter-spacing: .15em; } /* ── DIVISORES de listas: hairline mais sutil + reforço no hover ──────── */ .post-item, .tech-item, .popular-item, .latest-small-item, .sidebar-post-sm-item, .comment-item, .cat-link-item{ border-color: var(--hair-soft); } /* ── BREADCRUMB: separador chevron em vez de barra (mais limpo) ───────── */ .breadcrumb li+li::before{ content: '›'; font-weight: 600; margin: 0 var(--space-2); } /* ── NEWSLETTER / SIDEBAR boxes: respiro coerente ─────────────────────── */ .stay-connected, .tags-section, .advertise-section, .newsletter-section{ margin-top: var(--space-6); } /* ── FOOTER: hairline do título mais delicada ─────────────────────────── */ .footer-col h4{ letter-spacing: .07em; } .footer-col ul li a{ transition: color .22s var(--ease-out), opacity .22s, padding-left .22s var(--ease-out); } /* ── COMMENT FORM / FORMS: foco com anel de marca consistente ─────────── */ .search-modal input:focus, .search-form input:focus, .newsletter-form input:focus, .post-sidebar-search input:focus{ box-shadow: 0 0 0 3px var(--accent-soft); } /* ── STORIES eyebrow já existe; aqui só o respiro do título estático ──── */ .static-page h1{ letter-spacing: -.026em; line-height: 1.12; } .static-page h2{ letter-spacing: -.012em; } /* ── ALSO-LIKE / carrosséis: gap coerente ─────────────────────────────── */ .also-like-track, .sports-carousel-track{ gap: var(--space-5); } /* ── Mobile: preservar legibilidade (lettrine fica grande demais) ─────── */ @media (max-width: 560px){ .post-body > p:first-of-type::first-letter, .article-content > p:first-of-type::first-letter{ font-size: 2.4em; margin: 4px 8px 0 0; } .hero{ gap: var(--space-4); } .popular-num{ font-size: 26px; min-width: 34px; } } /* ════════════════════════════════════════════════════════ R3 — POLISH FINAL · "impecável e coeso" Aditivo. Sem hardcode de marca: tudo via vars + color-mix. Foca: micro-tipografia (viúvas/órfãs, medida de leitura), feedback :active, ancoragem de heading, 480px, coerência de tokens. ════════════════════════════════════════════════════════ */ /* ── MICRO-TIPOGRAFIA: mata viúvas/órfãs em títulos ───────────────────── */ /* Títulos curtos = equilíbrio de linhas; corpo = melhor quebra da última linha */ .section-title, .sports-header h2, .also-like-header h3, .hero-main-overlay h2, .hero-side-overlay h3, .recent-large-overlay h3, .cat-hero-overlay h2, .post-header h1, .static-page h1, .static-page h2, .error-title, .no-results__title, .search-bar-inner h1, .search-bar-inner h2, .tag-highlight h1, .tag-highlight h2, .comments-section h3, .comment-form h3, .grid4-card h3, .sports-card h3, .lifestyle-card h3, .ticker-meta h4, .recent-small-card .sc-meta h4, .latest-small-item h4, .also-like-card h4, .popular-content h4, .sidebar-post-sm-item h5, .post-nav-item h4, .tech-item-body h3, .latest-main-title, .author-box-info h4, .post-body h2, .post-body h3, .article-content h2, .article-content h3{ text-wrap: balance; } .post-header .post-subtitle, .post-body p, .static-page p, .about-text p, .tech-item-body p, .post-item-body p, .author-box-info p, .latest-main-excerpt, .newsletter-box small, .results-count, .error-desc, .no-results__text{ text-wrap: pretty; } /* ── MEDIDA DE LEITURA: largura ótima (ch) sem afetar mídia/figuras ───── */ /* Texto fluido confortável (~68ch) no corpo do artigo; imagens/tabelas/ blockquotes seguem 100% pois têm largura própria definida acima. */ .post-body > p, .post-body > ul, .post-body > ol, .article-content > p, .article-content > ul, .article-content > ol, .static-page > p, .static-page > ul, .static-page > ol{ max-width: 70ch; } .about-text p{ max-width: 66ch; } /* ── ANCORAGEM: headings com âncora não somem sob a navbar sticky ─────── */ .post-body h2, .post-body h3, .article-content h2, .article-content h3, .static-page h2, .static-page h3{ scroll-margin-top: calc(var(--space-8) + var(--space-3)); } /* ── FEEDBACK :active — toque tátil consistente ao pressionar ─────────── */ .btn-red:active, .btn-submit:active, .btn-outline:active, .newsletter-form button:active, .search-form button:active, .search-modal button[type="submit"]:active, .cookie-box .cb-btn:active{ transform: translateY(0) scale(.985); box-shadow: var(--shadow-xs); } .tag-pill:active, .pagination a:active, .carousel-arrows button:active, .also-like-arrows button:active{ transform: translateY(0) scale(.96); } .share-btn:active, .social-row:active, .btn-reply:active{ transform: translateY(0) scale(.97); filter: brightness(.95); } .lifestyle-card:active, .team-card:active, .author-card:active{ transform: translateY(-2px); } .back-top:active{ transform: translateY(0) scale(.94); } /* ── ESTADOS REDONDOS: hover suave em links de lista/sidebar/dropdown ─── */ .footer-copy-links a:active, .topbar-right a:active{ opacity: .6; } .nav-dropdown li a:active, .dropdown a:active{ transform: translateX(2px); } /* ── COERÊNCIA DE TOKENS: raio do "anel de foco" suave em campos ──────── */ /* Já existe box-shadow 0 0 0 3px var(--accent-soft); garante cantos certos */ .search-modal input, .search-form input, .newsletter-form input, .post-sidebar-search input, .form-group input, .form-group textarea, .comment-form input, .comment-form textarea{ transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); } /* ── AD BANNER: realce derivado do accent (sem ouro hardcoded) ────────── */ /* Mantém legibilidade sobre fundo --red; mistura branco p/ um tom quente coerente com qualquer marca, em vez de #FFD700 fixo. */ .ad-banner .ad-main{ color: color-mix(in srgb, var(--on-accent) 88%, var(--red)); text-shadow: 0 2px 0 rgba(0,0,0,.28); } /* ── CARROSSÉIS: botões com disabled coerente (fim do trilho) ─────────── */ .carousel-arrows button:disabled, .also-like-arrows button:disabled{ opacity: .4; cursor: default; transform: none; background: var(--surface); border-color: var(--hair); color: var(--ink-faint); } /* ── EMPTY STATE: ícone com tom de marca discreto ─────────────────────── */ .no-results{ display: flex; flex-direction: column; align-items: center; } .no-results__icon{ color: color-mix(in srgb, var(--red) 30%, var(--hair)); } /* ── REFINO RESPONSIVO: 480px (phones pequenos) ───────────────────────── */ @media (max-width: 480px){ :root{ --space-shell: 16px; } .post-header h1{ font-size: 21px; line-height: 1.18; } .post-body{ font-size: 15.5px; } .post-body h2, .article-content h2{ font-size: 21px; } .post-body h3, .article-content h3{ font-size: 18px; } .section-title, .sports-header h2{ font-size: 19px; } .hero-main img{ min-height: 230px; } .hero-main-overlay{ padding: 40px 18px 18px; } .hero-main-overlay h2{ font-size: 21px; } .hero-side-overlay h3{ font-size: 17px; } .grid4{ grid-template-columns: 1fr; gap: 18px; } .grid4-card img{ height: 210px; } .post-share-bar{ gap: var(--space-2); } .post-views{ font-size: 20px; } .author-box{ flex-direction: column; gap: var(--space-4); padding: 22px; } .author-box-avatar{ width: 72px; height: 72px; } .comment-replies2{ margin-left: 16px; padding-left: 12px; } .comment-form, .newsletter-box{ padding: 20px; } .breadcrumb{ font-size: 11.5px; } .pagination a{ min-width: 36px; height: 36px; font-size: 12px; } .cat-hero img{ height: 280px; } .cat-hero-overlay h2{ font-size: 22px; } .back-top{ width: 42px; height: 42px; right: 18px; bottom: 18px; } } /* data: 1a letra maiuscula */ .topbar-left::first-letter{text-transform:uppercase} /* === ajustes tema2 2026-06-03 === */ .main-sidebar-section{align-items:start} .toggle-switch{width:44px;height:22px;background:rgba(255,255,255,.3);border-radius:11px;position:relative;cursor:pointer;border:none;transition:background .2s;flex-shrink:0} .toggle-switch::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s} .toggle-switch .toggle-icon{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:transform .2s;z-index:1} .toggle-switch .toggle-icon i{font-size:11px;color:#333;line-height:1} .toggle-switch.on{background:var(--red)} .toggle-switch.on::after{transform:translateX(22px)} .toggle-switch.on .toggle-icon{transform:translateX(22px)} /* nav: esconde ate jbOverflowNav estabilizar (evita salto na 1a carga); fallback revela em 2.2s */ @keyframes jbNavReveal{to{opacity:1}} .nav-links{opacity:0;animation:jbNavReveal .12s ease 2.2s forwards} .nav-links.jbof-ready{opacity:1!important;animation:none!important}