/* ======================================== Articles CSS - Otimiza Pro Blog CSS unificado para todos os artigos Usa data-category no para tematizar ======================================== */ /* === Sistema de Cores por Categoria === */ /* Padrao (gestao/navy) */ :root { --cat-primary: #1e3a5f; --cat-primary-dark: #0d1b2a; --cat-accent: #ff6b35; --cat-highlight-bg-start: #fff3e0; --cat-highlight-bg-end: #ffe0b2; --cat-highlight-border: #ff6b35; --cat-highlight-text: #1e3a5f; --cat-badge-bg: var(--primary-color); --cat-badge-text: #fff; } [data-category='gestao'] { --cat-primary: #1e3a5f; --cat-primary-dark: #0d1b2a; --cat-accent: #ff6b35; --cat-highlight-bg-start: #fff3e0; --cat-highlight-bg-end: #ffe0b2; --cat-highlight-border: #ff6b35; --cat-highlight-text: #1e3a5f; --cat-badge-bg: var(--primary-color); --cat-badge-text: #fff; } [data-category='compliance'] { --cat-primary: #6a1b9a; --cat-primary-dark: #4a148c; --cat-accent: #9c27b0; --cat-highlight-bg-start: #f3e5f5; --cat-highlight-bg-end: #e1bee7; --cat-highlight-border: #9c27b0; --cat-highlight-text: #4a148c; --cat-badge-bg: #ce93d8; --cat-badge-text: #4a148c; } [data-category='esg'] { --cat-primary: #2e7d32; --cat-primary-dark: #1b5e20; --cat-accent: #4caf50; --cat-highlight-bg-start: #e8f5e9; --cat-highlight-bg-end: #c8e6c9; --cat-highlight-border: #4caf50; --cat-highlight-text: #1b5e20; --cat-badge-bg: #81c784; --cat-badge-text: #2e7d32; } [data-category='tech'] { --cat-primary: #0277bd; --cat-primary-dark: #01579b; --cat-accent: #03a9f4; --cat-highlight-bg-start: #e1f5fe; --cat-highlight-bg-end: #b3e5fc; --cat-highlight-border: #03a9f4; --cat-highlight-text: #01579b; --cat-badge-bg: #4fc3f7; --cat-badge-text: #01579b; } [data-category='finance'] { --cat-primary: #e65100; --cat-primary-dark: #bf360c; --cat-accent: #ff9800; --cat-highlight-bg-start: #fff3e0; --cat-highlight-bg-end: #ffe0b2; --cat-highlight-border: #ff9800; --cat-highlight-text: #e65100; --cat-badge-bg: #ffcc80; --cat-badge-text: #e65100; } [data-category='urgente'] { --cat-primary: #c62828; --cat-primary-dark: #b71c1c; --cat-accent: #f44336; --cat-highlight-bg-start: #ffebee; --cat-highlight-bg-end: #ffcdd2; --cat-highlight-border: #f44336; --cat-highlight-text: #b71c1c; --cat-badge-bg: #ef9a9a; --cat-badge-text: #b71c1c; } /* === Reading Progress Bar === */ .reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--cat-accent), var(--cat-primary)); z-index: 1001; transition: width 0.1s linear; } /* === Article Breadcrumb === */ .article-breadcrumb { margin-bottom: 1.5rem; font-size: 0.85rem; } .article-breadcrumb a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.2s ease; } .article-breadcrumb a:hover { color: white; text-decoration: underline; } .article-breadcrumb span { color: rgba(255, 255, 255, 0.6); } /* === Article Header === */ .article-header { background: linear-gradient(135deg, var(--cat-primary) 0%, var(--cat-primary-dark) 100%); color: white; padding: 6rem 0 4rem; margin-top: 80px; position: relative; overflow: hidden; } .article-header::before { content: ''; position: absolute; top: -50%; right: -30%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%); pointer-events: none; } .article-header__content { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; } .article-header__badge { display: inline-block; background: var(--cat-badge-bg); color: var(--cat-badge-text); padding: 0.5rem 1rem; border-radius: 50px; font-size: 0.85rem; font-weight: 600; margin-bottom: 1.5rem; } .article-header__title { font-size: 2.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem; letter-spacing: -0.02em; } .article-header__meta { display: flex; flex-wrap: wrap; gap: 1.5rem; opacity: 0.9; font-size: 0.95rem; } /* === Article Hero Image === */ .article-hero { max-width: 800px; margin: -2rem auto 0; padding: 0 1rem; } .article-hero img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } .article-hero figcaption { text-align: center; font-size: 0.85rem; color: #666; margin-top: 0.75rem; } /* === Article Content === */ .article-content { max-width: 800px; margin: 0 auto; padding: 3rem 1rem; } .article-content p { font-size: 1.1rem; line-height: 1.8; color: #333; margin-bottom: 1.5rem; } .article-content .lead { font-size: 1.25rem; font-weight: 500; color: #1e3a5f; border-left: 3px solid var(--cat-accent); padding-left: 1.25rem; } .article-content h2 { font-size: 1.75rem; font-weight: 700; color: #1e3a5f; margin: 3rem 0 1.5rem; padding-top: 1rem; border-top: 3px solid var(--cat-accent); } .article-content h3 { font-size: 1.35rem; font-weight: 600; color: #1e3a5f; margin: 2rem 0 1rem; } .article-content ul, .article-content ol { margin: 1.5rem 0; padding-left: 1.5rem; } .article-content li { font-size: 1.05rem; line-height: 1.8; color: #444; margin-bottom: 0.75rem; } .article-content strong { color: #1a1a2e; } .article-content a { color: var(--cat-accent); text-decoration: underline; text-underline-offset: 2px; } .article-content a:hover { color: var(--cat-primary); } /* === Callout Boxes === */ .article-highlight { background: linear-gradient( 135deg, var(--cat-highlight-bg-start) 0%, var(--cat-highlight-bg-end) 100% ); border-left: 4px solid var(--cat-highlight-border); padding: 1.5rem 2rem; margin: 2rem 0; border-radius: 0 12px 12px 0; } .article-highlight p { margin: 0; font-weight: 600; color: var(--cat-highlight-text); } .article-success { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); border-left: 4px solid #43a047; padding: 1.5rem 2rem; margin: 2rem 0; border-radius: 0 12px 12px 0; } .article-success p { margin: 0; color: #1b5e20; } .article-warning { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); border-left: 4px solid #e65100; padding: 1.5rem 2rem; margin: 2rem 0; border-radius: 0 12px 12px 0; } .article-warning p { margin: 0; color: #e65100; } .article-example { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border-left: 4px solid #1976d2; padding: 1.5rem 2rem; margin: 2rem 0; border-radius: 0 12px 12px 0; } .article-example p { margin: 0; color: #0d47a1; } /* === Article CTA === */ .article-cta { background: linear-gradient(135deg, var(--cat-primary) 0%, var(--cat-primary-dark) 100%); color: white; padding: 3rem; border-radius: 16px; text-align: center; margin: 3rem 0; position: relative; overflow: hidden; } .article-cta::before { content: ''; position: absolute; top: -50%; right: -30%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%); pointer-events: none; } .article-cta h3 { color: white; font-size: 1.5rem; margin-bottom: 1rem; position: relative; } .article-cta p { color: rgba(255, 255, 255, 0.9); margin-bottom: 1.5rem; position: relative; } .article-cta ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2rem; position: relative; } .article-cta li { color: var(--cat-accent); font-weight: 600; } /* === Economy Box === */ .economy-box { background: linear-gradient(135deg, var(--cat-primary) 0%, var(--cat-primary-dark) 100%); color: white; padding: 2rem; border-radius: 16px; margin: 2rem 0; text-align: center; } .economy-box h4 { color: var(--cat-accent); font-size: 1.25rem; margin-bottom: 1rem; } .economy-box .values { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; } .economy-box .value-item { text-align: center; } .economy-box .value-number { font-size: 2rem; font-weight: 800; color: var(--cat-accent); } .economy-box .value-label { font-size: 0.9rem; opacity: 0.9; } /* === Pinheiro Badge === */ .pinheiro-badge { display: inline-flex; align-items: center; gap: 0.75rem; background: linear-gradient(135deg, #1a365d 0%, #2d4a7c 100%); color: white; padding: 1rem 1.5rem; border-radius: 12px; margin: 2rem 0; font-weight: 600; } .pinheiro-badge span { font-size: 1.5rem; } /* === Article Author === */ .article-author { display: flex; align-items: center; gap: 1.5rem; padding: 2rem; background: #f8f9fa; border-radius: 12px; margin: 3rem 0; } .article-author__avatar { width: 80px; height: 80px; background: var(--cat-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: white; flex-shrink: 0; } .article-author__info h4 { margin: 0 0 0.25rem; font-size: 1.1rem; } .article-author__info p { margin: 0; font-size: 0.95rem; color: #666; } /* === Share Buttons === */ .share-buttons { display: flex; gap: 1rem; margin: 2rem 0; flex-wrap: wrap; } .share-btn { padding: 0.75rem 1.25rem; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: var(--font-family); font-size: 0.9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .share-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .share-whatsapp { background: #25d366; color: white; } .share-linkedin { background: #0077b5; color: white; } .share-twitter { background: #1da1f2; color: white; } /* === Dark Mode === */ [data-theme='dark'] .reading-progress { background: linear-gradient(90deg, var(--primary-color), var(--primary-light)); } [data-theme='dark'] .article-content p, [data-theme='dark'] .article-content li { color: #cbd5e1; } [data-theme='dark'] .article-content h2, [data-theme='dark'] .article-content h3 { color: #f1f5f9; } [data-theme='dark'] .article-content .lead { color: #e2e8f0; } [data-theme='dark'] .article-content strong { color: #f1f5f9; } [data-theme='dark'] .article-author { background: #1e293b; } [data-theme='dark'] .article-author__info p { color: #94a3b8; } [data-theme='dark'] .article-hero figcaption { color: #94a3b8; } [data-theme='dark'] .article-highlight, [data-theme='dark'] .article-success, [data-theme='dark'] .article-warning, [data-theme='dark'] .article-example { filter: brightness(0.85) saturate(0.9); } [data-theme='dark'] .economy-box { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } [data-theme='dark'] .esg-card { background: #1e293b; } [data-theme='dark'] .esg-card h4 { color: #f1f5f9; } [data-theme='dark'] .esg-card p { color: #94a3b8; } /* === Content Card Grids (case, feature, esg) === */ .case-grid, .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .case-card, .feature-card { background: #f8f9fa; border-radius: 12px; padding: 1.5rem; border-left: 4px solid var(--cat-accent); transition: transform 0.3s ease; } .case-card:hover, .feature-card:hover { transform: translateY(-4px); } .case-card h4, .feature-card h4 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--cat-primary); } .case-card p, .feature-card p { margin: 0; font-size: 0.95rem; color: #555; line-height: 1.6; } .case-card .location { font-size: 0.8rem; font-weight: 600; color: var(--cat-accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } [data-theme='dark'] .case-card, [data-theme='dark'] .feature-card { background: #1e293b; } [data-theme='dark'] .case-card h4, [data-theme='dark'] .feature-card h4 { color: #f1f5f9; } [data-theme='dark'] .case-card p, [data-theme='dark'] .feature-card p { color: #94a3b8; } /* === ESG Cards === */ .esg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; } .esg-card { background: #f8f9fa; border-radius: 12px; padding: 1.5rem; text-align: center; border-top: 4px solid #ccc; transition: transform 0.3s ease; } .esg-card:hover { transform: translateY(-4px); } .esg-card.env { border-top-color: #4caf50; } .esg-card.social { border-top-color: #2196f3; } .esg-card.gov { border-top-color: #9c27b0; } .esg-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; color: white; margin: 0 auto 0.75rem; } .esg-card.env .esg-icon { background: #4caf50; } .esg-card.social .esg-icon { background: #2196f3; } .esg-card.gov .esg-icon { background: #9c27b0; } .esg-card h4 { margin: 0 0 0.5rem; font-size: 1rem; color: #1e3a5f; } .esg-card p { margin: 0; font-size: 0.9rem; color: #555; line-height: 1.5; } /* === Responsive === */ @media (max-width: 768px) { .article-header { padding: 5rem 0 3rem; } .article-header__title { font-size: 1.75rem; } .article-header__meta { flex-direction: column; gap: 0.5rem; } .article-content { padding: 2rem 1rem; } .article-content h2 { font-size: 1.5rem; } .article-author { flex-direction: column; text-align: center; } .share-buttons { justify-content: center; } .economy-box .values { flex-direction: column; gap: 1rem; } .article-cta { padding: 2rem 1.5rem; } .esg-grid { grid-template-columns: 1fr; } }