/* ========================================================= BLOG BASE CSS — estilos globais do blog (sem styles.css) Páginas-alvo: blog.html e blog-post.html Usa para alternar temas ========================================================= */ /* ===== Google Fonts (Poppins + Inter) ===== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;600;700&display=swap'); /* ========================================================= Design Tokens — Light (default), Dark e Blue ========================================================= */ /* ===== Light Mode (default) ===== */ :root, :root[data-theme="light"] { --nav-h: 64px; /* Cores */ --primary: #6366f1; /* indigo-500 */ --secondary: #d97706; /* amber-600 (mais contraste que #f59e0b) */ --bg: #ffffff; --text: #111827; /* quase preto */ --muted: #374151; /* cinza-700 */ --border: #d1d5db; /* cinza-300 */ --panel: #ffffff; /* Radius & Sombras */ --radius: 12px; --shadow: 0 8px 24px rgba(15,23,42,.08); --shadow-lg: 0 16px 40px rgba(15,23,42,.12); /* Animação */ --ease: cubic-bezier(.2,.7,.2,1); --t-base: .25s var(--ease); } /* ===== Dark Mode ===== */ :root[data-theme="dark"] { --bg: #0b1220; --text: #f9fafb; /* quase branco */ --muted: #cbd5e1; /* cinza-300 */ --border: #475569; /* cinza-600 */ --panel: #1e293b; /* slate-800 */ --primary: #818cf8; /* indigo-400 */ --secondary: #fbbf24; /* amber-400 */ --shadow: 0 8px 24px rgba(0,0,0,.5); --shadow-lg: 0 16px 40px rgba(0,0,0,.6); } /* ========================================================= Reset e Normalização ========================================================= */ *,*::before,*::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body{ margin:0; font-family:Poppins,Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Noto Sans',Arial,sans-serif; line-height:1.6; color:var(--text); background:var(--bg); text-rendering: optimizeLegibility; transition: background var(--t-base), color var(--t-base); } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } a:hover{ text-decoration:underline; } button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; } /* ========================================================= Utilitários ========================================================= */ .container{ max-width:1200px; margin:0 auto; padding:0 20px; } .hidden{ display:none !important; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } /* ========================================================= Navbar ========================================================= */ .navbar{ position: fixed; inset:0 0 auto 0; height: var(--nav-h); z-index: 1000; background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .navbar .container{ height: 100%; display:flex; align-items:center; justify-content:space-between; gap:16px; } .logo{ font-weight: 700; font-size: 1.45rem; letter-spacing: .2px; color: var(--primary); } .logo .highlight{ color: color-mix(in oklab, var(--primary) 70%, #7c3aed); } /* Menu desktop */ .nav-menu{ list-style:none; display:flex; align-items:center; gap: 1.5rem; } .nav-link{ text-decoration:none; color:inherit; font-weight:600; opacity:.9; } .nav-link:hover{ opacity: 1; text-decoration: none; } /* Botões de ícone (ex: dark mode) */ .btn-icon{ width: 40px; height: 40px; display:grid; place-items:center; border-radius: 999px; border:1px solid var(--border); background: var(--panel); box-shadow: var(--shadow); transition: transform .15s var(--ease), background .2s var(--ease); } .btn-icon:hover{ transform: translateY(-1px); } /* ========================================================= Hamburguer ========================================================= */ .hamburger{ display:none; width: 40px; height: 40px; border-radius: 12px; border:1px solid var(--border); background: var(--panel); position: relative; } .hamburger span{ position:absolute; left: 8px; right: 8px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s var(--ease), top .25s var(--ease), opacity .2s var(--ease); } .hamburger span:nth-child(1){ top: 12px; } .hamburger span:nth-child(2){ top: 19px; } .hamburger span:nth-child(3){ top: 26px; } .hamburger.is-active span:nth-child(1){ top: 19px; transform: rotate(45deg); } .hamburger.is-active span:nth-child(2){ opacity: 0; } .hamburger.is-active span:nth-child(3){ top: 19px; transform: rotate(-45deg); } /* Menu mobile */ @media (max-width: 768px){ .hamburger{ display: grid; place-items:center; } .nav-menu{ position: fixed; top: calc(var(--nav-h) + 12px); right: 12px; bottom: 12px; width: min(86vw, 320px); flex-direction: column; align-items: stretch; gap: .75rem; padding: 16px; background: var(--panel); border:1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); transform: translateX(120%); transition: transform .3s var(--ease); } .nav-menu.active{ transform: translateX(0); } .nav-link{ padding: .9rem 1rem; border-radius: 12px; border:1px solid var(--border); background: color-mix(in oklab, var(--panel) 96%, transparent); text-decoration: none; opacity: 1; } } /* ========================================================= Layout / Conteúdo ========================================================= */ main, .page-content{ padding-top: calc(var(--nav-h) + 24px); } /* Grid de posts */ .posts-grid{ display:grid; gap: 1.25rem; } @media (min-width: 640px){ .posts-grid{ grid-template-columns: repeat(2,1fr); } } @media (min-width: 1024px){ .posts-grid{ grid-template-columns: repeat(3,1fr); } } .post-card{ background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s var(--ease); display:flex; flex-direction:column; } .post-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); } .post-thumb{ aspect-ratio: 16/9; background:#0b1220; overflow:hidden; } .post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .post-body{ padding: 1rem; display:flex; flex-direction:column; gap:.5rem; } .post-title{ font-size: 1.05rem; font-weight: 700; line-height:1.3; } .post-excerpt{ color: var(--muted); font-size:.95rem; } .post-meta{ color: var(--muted); font-size:.85rem; } /* Banner de título/categoria */ .post-title-banner{ padding:.75rem 1.25rem; background: color-mix(in oklab, var(--panel) 92%, transparent); border-bottom:1px solid var(--border); } .post-title-banner h2{ margin:0; font-size:1.08rem; } .category-react { background:linear-gradient(90deg,#22d3ee22,#818cf822); } .category-ia { background:linear-gradient(90deg,#a78bfa22,#60a5fa22); } .category-pwa { background:linear-gradient(90deg,#34d39922,#60a5fa22); } .category-carreira{ background:linear-gradient(90deg,#f59e0b22,#f472b622); } /* ========================================================= Footer ========================================================= */ .footer { margin-top: 60px; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--bg) 96%, transparent); padding: 40px 20px 20px; color: var(--text); } .footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; } .footer-brand .logo { font-size: 1.5rem; display: inline-block; margin-bottom: .5rem; } .footer-tagline { font-size: .9rem; color: var(--muted); max-width: 280px; } .footer-links h3, .footer-contact h3 { font-size: 1rem; margin-bottom: .75rem; color: var(--primary); } .footer-links ul { list-style: none; margin: 0; padding: 0; } .footer-links li { margin-bottom: .5rem; } .footer-links a { color: inherit; opacity: .9; transition: color .2s; } .footer-links a:hover { color: var(--primary); opacity: 1; } .footer-contact a { color: inherit; font-weight: 500; transition: color .2s; } .footer-contact a:hover { color: var(--primary); } .social-links { display: flex; gap: .75rem; margin-top: .5rem; } .social-links a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); transition: background .2s, transform .2s, color .2s; } .social-links a:hover { background: var(--primary); color: #fff; transform: translateY(-2px); } .footer-bottom { text-align: center; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .85rem; color: var(--muted); } /* ========================================================= Skeleton Loading ========================================================= */ .skeleton{ --sk:#e5e7eb20; border-radius:12px; background: linear-gradient(90deg, var(--sk) 25%, #ffffff10 37%, var(--sk) 63%); background-size: 400% 100%; animation: sk 1.2s ease-in-out infinite; } @keyframes sk { 0%{background-position:100% 0} 100%{background-position:0 0} } .skel-cover{ aspect-ratio:16/9; } .skel-title{ height:28px; margin:18px auto 8px; max-width:90%; } .skel-meta{ height:16px; margin:0 auto 24px; max-width:60%; } /* ========================================================= Tags unificadas (blog + article) ========================================================= */ .tags { margin: 1rem 0; text-align: center; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .tags .tag { display: inline-block; padding: 0.4rem 0.9rem; font-size: 0.85rem; font-weight: 600; border-radius: 20px; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); transition: transform 0.2s ease, background 0.3s ease; } .tags .tag:hover { background: var(--secondary); transform: translateY(-2px); } /* ========================================================= Links e Botões — Padrão Global ========================================================= */ a { color: var(--primary); text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; } a:hover { color: var(--secondary); text-decoration: underline; } a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; } .btn, button, input[type="submit"], input[type="button"] { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 600; font-family: inherit; padding: 0.6rem 1.2rem; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.2s var(--ease); } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border: none; } .btn-primary:hover { opacity: 0.9; transform: translateY(-2px); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-secondary:hover { background: var(--primary); color: #fff; } .btn-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow); transition: background 0.3s ease, transform 0.2s ease; } .btn-icon:hover { transform: translateY(-2px); background: var(--primary); color: #fff; } /* ========================================================= Responsividade extra (≤480px) ========================================================= */ @media (max-width: 480px) { .logo { font-size: 1.2rem; } .nav-link { font-size: 1rem; padding: 0.8rem 1rem; } .posts-grid { grid-template-columns: 1fr !important; } .post-title { font-size: 1rem; } .post-excerpt { font-size: 0.85rem; } .footer { padding: 20px 15px; } .footer-grid { gap: 1rem; } .footer-tagline { font-size: 0.8rem; } .btn { font-size: 0.85rem; padding: 0.5rem 1rem; } .tags .tag { font-size: 0.75rem; padding: 0.3rem 0.7rem; } } /* ========================================================= Prism.js — Highlight de código integrado ao tema ========================================================= */ /* Bloco de código */ pre[class*="language-"], code[class*="language-"] { font-family: 'Fira Code', 'Consolas', 'Monaco', monospace; font-size: 0.9rem; background: var(--panel); color: var(--text); border-radius: 8px; border: 1px solid var(--border); text-shadow: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; } /* Pré-formatado */ pre[class*="language-"] { padding: 1rem; margin: 1.5rem 0; overflow-x: auto; box-shadow: var(--shadow); } /* Inline code */ :not(pre) > code[class*="language-"] { padding: 0.2rem 0.4rem; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); font-size: 0.85rem; } /* Tokens de sintaxe */ .token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--muted); font-style: italic; } .token.punctuation { color: var(--secondary); } .token.selector, .token.tag { color: #ec4899; } /* rosa */ .token.property, .token.boolean, .token.number, .token.constant { color: #f59e0b; } /* laranja */ .token.string, .token.char { color: #10b981; } /* verde */ .token.function, .token.class-name { color: #6366f1; } /* azul primário */ .token.keyword { color: #d946ef; } /* roxo */ .token.operator, .token.entity, .token.url { color: #06b6d4; } /* ciano */ /* Dark mode override */ :root[data-theme="dark"] pre[class*="language-"] { background: #1e293b; border-color: #334155; } :root[data-theme="dark"] :not(pre) > code[class*="language-"] { background: #0f172a; border-color: #334155; }