/* === tokens.css === */ /* ================================================================= DESIGN TOKENS — CloudBlogs Master Template Estes tokens sao o unico arquivo que muda entre nichos. Tudo e definido via CSS Custom Properties para tematizacao. Hierarquia: tokens.css > reset.css > layout.css > components.css > post.css > theme.css ================================================================= */ :root { /* -- Cores (override por nicho via theme.css) -------------------- */ --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-primary-light: #eff6ff; --color-primary-lighter: #f0f7ff; --color-bg: #ffffff; --color-bg-alt: #f8fafc; --color-surface: #ffffff; --color-text: #0f172a; --color-text-muted: #64748b; --color-text-inverse: #f8fafc; --color-border: #e2e8f0; --color-border-light: #f1f5f9; --color-success: #16a34a; --color-warning: #d97706; --color-error: #dc2626; --color-header-bg: #0f172a; --color-header-text: #f8fafc; --color-footer-bg: #0f172a; --color-footer-text: #cbd5e1; --color-code-bg: #f1f5f9; --color-code-text: #1e293b; --color-blockquote-border: var(--color-primary); --color-blockquote-bg: var(--color-primary-lighter); /* -- Tipografia -------------------------------------------------- */ --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --font-heading: var(--font-sans); --font-body: var(--font-sans); /* Escala tipografica (Major Third — 1.25) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --line-height-tight: 1.25; --line-height-normal: 1.6; --line-height-relaxed: 1.8; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* -- Espacamento (escala de 4px) --------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* -- Layout ------------------------------------------------------ */ --max-width-content: 720px; --max-width-wide: 1140px; --sidebar-width: 300px; /* -- Bordas e sombras -------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12); /* -- Transicoes -------------------------------------------------- */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; /* -- Breakpoints (referencia — CSS nao suporta var em @media) ----- */ /* sm: 480px | md: 640px | lg: 900px | xl: 1200px */ } /* ================================================================= DARK MODE Sobrescreve tokens de cor para modo escuro. Controlado via atributo data-dark-mode no : - "auto" — segue preferencia do sistema (prefers-color-scheme) - "dark" — sempre dark - "light" — sempre light (padrao, sem override) ================================================================= */ /* Dark mode — sistema operacional (auto) */ @media (prefers-color-scheme: dark) { :root[data-dark-mode="auto"] { --color-bg: #0f172a; --color-bg-alt: #1e293b; --color-bg-secondary: #1e293b; --color-surface: #1e293b; --color-surface-hover: #334155; --color-text: #f1f5f9; --color-text-secondary: #94a3b8; --color-text-muted: #64748b; --color-text-inverse: #0f172a; --color-border: #334155; --color-border-light: #1e293b; --color-header-bg: #020617; --color-header-text: #e2e8f0; --color-footer-bg: #020617; --color-footer-text: #64748b; --color-code-bg: #1e293b; --color-code-text: #e2e8f0; --color-blockquote-bg: #1e293b; --color-primary-light: #1e3a5f; --color-primary-lighter: #172554; --color-link: var(--color-primary-light, #93c5fd); --color-link-hover: var(--color-primary, #2563eb); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.5); } :root[data-dark-mode="auto"] img:not([src*=".svg"]) { filter: brightness(0.9); } :root[data-dark-mode="auto"] .category-badge, :root[data-dark-mode="auto"] .tag-badge, :root[data-dark-mode="auto"] .freshness-badge { filter: brightness(1.1); } } /* Dark mode — forcado pelo usuario */ :root[data-dark-mode="dark"] { --color-bg: #0f172a; --color-bg-alt: #1e293b; --color-bg-secondary: #1e293b; --color-surface: #1e293b; --color-surface-hover: #334155; --color-text: #f1f5f9; --color-text-secondary: #94a3b8; --color-text-muted: #64748b; --color-text-inverse: #0f172a; --color-border: #334155; --color-border-light: #1e293b; --color-header-bg: #020617; --color-header-text: #e2e8f0; --color-footer-bg: #020617; --color-footer-text: #64748b; --color-code-bg: #1e293b; --color-code-text: #e2e8f0; --color-blockquote-bg: #1e293b; --color-primary-light: #1e3a5f; --color-primary-lighter: #172554; --color-link: var(--color-primary-light, #93c5fd); --color-link-hover: var(--color-primary, #2563eb); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.5); } :root[data-dark-mode="dark"] img:not([src*=".svg"]) { filter: brightness(0.9); } :root[data-dark-mode="dark"] .category-badge, :root[data-dark-mode="dark"] .tag-badge, :root[data-dark-mode="dark"] .freshness-badge { filter: brightness(1.1); } /* === reset.css === */ /* ================================================================= RESET — CloudBlogs Master Template Reset minimo e defaults seguros. Mobile-first. Depende de: tokens.css ================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); line-height: var(--line-height-normal); min-height: 100vh; display: flex; flex-direction: column; } /* -- Links --------------------------------------------------------- */ a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* -- Media --------------------------------------------------------- */ img, video { max-width: 100%; height: auto; display: block; } /* -- Form elements inherit font ------------------------------------ */ button, input, select, textarea { font: inherit; } /* -- Lists --------------------------------------------------------- */ ul[role="list"], ol[role="list"] { list-style: none; } /* -- Tables -------------------------------------------------------- */ table { border-collapse: collapse; } /* -- Skip link (acessibilidade WCAG AA) ---------------------------- */ .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 10000; width: auto; height: auto; padding: var(--space-2) var(--space-4); margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--color-primary); color: var(--color-text-inverse); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); border-radius: var(--radius-md); outline: 2px solid var(--color-primary); outline-offset: 2px; } /* -- Visually hidden but accessible (screen readers) --------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* === layout.css === */ /* ================================================================= LAYOUT — CloudBlogs Master Template Grid system, containers, header, footer, breadcrumbs, responsivo. Mobile-first: estilos base = mobile, breakpoints adicionam. Depende de: tokens.css, reset.css ================================================================= */ /* -- Container ----------------------------------------------------- */ .container { max-width: var(--max-width-wide); margin: 0 auto; padding: 0 var(--space-4); } .container--narrow { max-width: var(--max-width-content); } /* -- Main content area --------------------------------------------- */ .site-main { flex: 1; padding: var(--space-6) 0; } /* -- Post layout (article + sidebar grid) -------------------------- */ .post-layout { display: flex; flex-direction: column; } /* -- Related posts span full width in post-layout grid ------------- */ .related-posts { grid-column: 1 / -1; } /* -- Post grid (cards) --------------------------------------------- */ .post-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); list-style: none; padding: 0; margin: 0; } /* ================================================================= SITE HEADER ================================================================= */ .site-header { background: var(--color-header-bg); color: var(--color-header-text); padding: var(--space-4) 0; } .header-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); } .site-brand { display: flex; align-items: center; gap: var(--space-2); color: var(--color-header-text); font-weight: var(--font-weight-bold); text-decoration: none; flex: 1; min-width: 0; } .site-brand:hover { text-decoration: none; opacity: 0.9; } .site-logo { height: 32px; width: auto; } .site-name { font-size: var(--text-base, 1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* === Menu hamburger toggle === */ .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; background: transparent; cursor: pointer; color: var(--color-header-text, #fff); } .nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.3s ease, opacity 0.3s ease; } .nav-toggle-icon { position: relative; } .nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; } .nav-toggle-icon::before { top: -7px; } .nav-toggle-icon::after { top: 7px; } /* Estado aberto — X */ .nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: rotate(45deg); top: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform: rotate(-45deg); top: 0; } /* Menu mobile: fullscreen overlay */ .main-nav { display: none; position: fixed; inset: 0; top: 60px; background: var(--color-header-bg, #1a1a2e); padding: var(--space-6, 1.5rem); z-index: 100; overflow-y: auto; -webkit-overflow-scrolling: touch; } .main-nav[data-open="true"] { display: block; } .main-nav .nav-list { display: flex; flex-direction: column; gap: 0; list-style: none; flex-wrap: wrap; } .main-nav .nav-list li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .main-nav .nav-list a { display: block; padding: var(--space-4, 1rem) 0; font-size: var(--text-lg, 1.125rem); color: var(--color-header-text, #fff); opacity: 1; } .main-nav a { color: var(--color-header-text); opacity: 0.85; font-size: var(--text-sm); transition: opacity var(--transition-fast); } .main-nav a:hover { opacity: 1; text-decoration: none; } /* ================================================================= SITE FOOTER ================================================================= */ .site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding: var(--space-8) 0; margin-top: auto; } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); } .footer-copy { font-size: var(--text-sm); } .footer-nav { display: flex; gap: var(--space-4); list-style: none; } .footer-nav a { color: var(--color-footer-text); opacity: 0.8; font-size: var(--text-sm); transition: opacity var(--transition-fast); } .footer-nav a:hover { opacity: 1; text-decoration: none; } /* ================================================================= BREADCRUMBS ================================================================= */ .breadcrumbs { background: var(--color-bg-alt); padding: var(--space-2) 0; font-size: var(--text-sm); } .breadcrumb-list { display: flex; list-style: none; gap: var(--space-2); flex-wrap: wrap; } .breadcrumb-list a { color: var(--color-text-muted); } .breadcrumb-list a:hover { color: var(--color-primary); } .breadcrumb-list li + li::before { content: "\203A"; margin-right: var(--space-2); color: var(--color-text-muted); } .breadcrumb-list [aria-current="page"] { color: var(--color-text); } /* ================================================================= READING PROGRESS BAR Uses scroll-driven animation (CSS only, no JS). Falls back gracefully in older browsers. ================================================================= */ progress.reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 9999; border: none; appearance: none; -webkit-appearance: none; background: transparent; animation: reading-progress-value linear; animation-timeline: scroll(); } progress.reading-progress::-webkit-progress-bar { background: transparent; } progress.reading-progress::-webkit-progress-value { background: var(--color-primary); transition: none; } progress.reading-progress::-moz-progress-bar { background: var(--color-primary); } @keyframes reading-progress-value { from { width: 0%; } to { width: 100%; } } /* Fallback: animar o próprio elemento se scroll-timeline é suportado */ @supports (animation-timeline: scroll()) { progress.reading-progress { overflow: hidden; } progress.reading-progress::after { content: ""; display: block; height: 100%; background: var(--color-primary); transform-origin: 0 0; transform: scaleX(0); animation: reading-progress-scale linear; animation-timeline: scroll(); } } @keyframes reading-progress-scale { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ================================================================= RESPONSIVE BREAKPOINTS (mobile-first) sm: 480px | md: 640px | lg: 900px | xl: 1200px ================================================================= */ /* -- Mobile: ordem correta no post layout (article → after_post → sidebar) */ @media (max-width: 899px) { .post-layout > article { order: 1; } .post-layout > .after-post-widgets { order: 2; } .post-layout > .post-sidebar { order: 3; } .post-layout > .footer-widgets { order: 4; } } /* -- sm: 480px ----------------------------------------------------- */ @media (min-width: 480px) { .post-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } } /* -- md: 640px ----------------------------------------------------- */ @media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } .site-main { padding: var(--space-8) 0; } } /* -- lg: 900px ----------------------------------------------------- */ @media (min-width: 900px) { .post-layout { display: grid; grid-template-columns: 1fr var(--sidebar-width); gap: var(--space-8); } .post-layout > .after-post-widgets { grid-column: 1; } .post-layout > .footer-widgets { grid-column: 1 / -1; } .post-grid { grid-template-columns: repeat(3, 1fr); } /* Desktop: menu inline, botão oculto */ .nav-toggle { display: none; } .main-nav { display: flex; position: static; background: transparent; padding: 0; overflow: visible; } .main-nav .nav-list { flex-direction: row; gap: var(--space-4, 1rem); } .main-nav .nav-list li { border-bottom: none; } .main-nav .nav-list a { display: inline; padding: 0; font-size: var(--text-sm, 0.875rem); opacity: 0.85; } .main-nav .nav-list a:hover { opacity: 1; } .site-logo { height: 40px; } .site-name { font-size: var(--text-xl, 1.25rem); } } /* -- xl: 1200px ---------------------------------------------------- */ @media (min-width: 1200px) { .container { padding: 0 var(--space-8); } .site-main { padding: var(--space-10) 0; } } /* === components.css === */ /* ================================================================= COMPONENTS — CloudBlogs Master Template Cards, badges, buttons, TOC, pagination, widgets, a11y. Depende de: tokens.css, reset.css, layout.css ================================================================= */ /* ================================================================= FOCUS VISIBLE (global a11y) ================================================================= */ *:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ================================================================= POST CARD ================================================================= */ .post-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition-normal), transform var(--transition-normal); } .post-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } .post-card a { text-decoration: none; } .post-card-image { overflow: hidden; position: relative; width: 100%; } .post-card-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; } .post-card-body { padding: var(--space-4); } .post-card-title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); line-height: var(--line-height-tight); } .post-card-title a { color: var(--color-text); } .post-card-title a:hover { color: var(--color-primary); } .post-card-meta { font-size: var(--text-sm); color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: var(--space-2); } .post-card-excerpt { color: var(--color-text-muted); margin-top: var(--space-2); font-size: var(--text-sm); line-height: var(--line-height-relaxed); } .read-more { color: var(--color-primary-hover, var(--color-primary)); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); } /* ================================================================= HERO POST (featured first post) ================================================================= */ .hero-post { margin-bottom: var(--space-8); } .hero-post .post-card-image { aspect-ratio: 21 / 9; } /* ================================================================= CATEGORY BADGE ================================================================= */ .category-badge { display: inline-block; padding: var(--space-1) var(--space-2); background: var(--color-primary); color: #fff; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-decoration: none; transition: opacity var(--transition-fast); } .category-badge:hover { opacity: 0.85; text-decoration: none; } /* ================================================================= TAG BADGE ================================================================= */ .tag-badge { display: inline-block; padding: var(--space-1) var(--space-2); background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-medium); text-decoration: none; transition: border-color var(--transition-fast), color var(--transition-fast); } .tag-badge:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; } /* ================================================================= FRESHNESS BADGE ================================================================= */ .freshness-badge { background: var(--color-primary-light); color: var(--color-primary); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-weight-medium); margin-bottom: var(--space-4); display: inline-block; } /* ================================================================= AUTHOR AVATAR & BOX ================================================================= */ .author-avatar { border-radius: var(--radius-full); aspect-ratio: 1; object-fit: cover; } .author-box { display: flex; gap: var(--space-4); padding: var(--space-6); background: var(--color-bg-alt); border-radius: var(--radius-lg); margin-top: var(--space-8); } .author-box-avatar { border-radius: var(--radius-full); aspect-ratio: 1; object-fit: cover; flex-shrink: 0; } .author-box-info { display: flex; flex-direction: column; gap: var(--space-1); } .author-title { font-size: var(--text-sm); color: var(--color-text-muted); } .author-bio { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--line-height-relaxed); } /* ================================================================= WIDGET AUTHOR BOX (post footer) ================================================================= */ .widget-author-box { display: flex; gap: var(--space-4); padding: var(--space-6); background: var(--color-bg-alt); border-radius: var(--radius-lg); border: 1px solid var(--color-border); margin-top: var(--space-6); } .widget-author-avatar { border-radius: var(--radius-full); aspect-ratio: 1; object-fit: cover; flex-shrink: 0; } .widget-author-info { display: flex; flex-direction: column; gap: var(--space-1); } .widget-author-info a { color: var(--color-primary); text-decoration: none; font-weight: var(--font-weight-semibold); } .widget-author-info a:hover { text-decoration: underline; } .widget-author-role { font-size: var(--text-sm); color: var(--color-text-muted); } .widget-author-bio { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--line-height-relaxed); margin: 0; } /* ================================================================= AUTHOR PAGE ================================================================= */ .author-page { max-width: 900px; margin: 0 auto; } .author-header { display: flex; gap: var(--space-6); align-items: flex-start; padding: var(--space-8) 0; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-8); } .author-header .author-avatar { width: 120px; height: 120px; flex-shrink: 0; } .author-header .author-info { display: flex; flex-direction: column; gap: var(--space-2); } .author-name { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); font-family: var(--font-heading); line-height: var(--line-height-tight); margin: 0; } .author-job-title { font-size: var(--text-base); color: var(--color-text-muted); margin: 0; } .author-header .author-bio { font-size: var(--text-base); line-height: var(--line-height-relaxed); margin: 0; } .author-works-for { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; } .author-works-for a { color: var(--color-primary); text-decoration: none; } .author-works-for a:hover { text-decoration: underline; } .author-expertise, .author-qualifications { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); } .expertise-list, .qualifications-list { list-style: none; padding: 0; margin: var(--space-1) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .expertise-list li { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); } .qualifications-list li { width: 100%; font-size: var(--text-sm); } .author-social { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .social-link { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); background: var(--color-primary); color: #fff; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-medium); text-decoration: none; transition: opacity 0.15s ease; } .social-link:hover { opacity: 0.85; } .author-posts h2 { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); font-family: var(--font-heading); margin-bottom: var(--space-6); } .no-posts { color: var(--color-text-muted); font-style: italic; } @media (max-width: 640px) { .author-header { flex-direction: column; align-items: center; text-align: center; } .author-social { justify-content: center; } .author-name { font-size: var(--text-2xl); } .widget-author-box { flex-direction: column; align-items: center; text-align: center; } } /* ================================================================= CATEGORIES INDEX PAGE ================================================================= */ .categories-index { max-width: 900px; margin: 0 auto; } .categories-index-header { margin-bottom: var(--space-8); } .categories-index-header h1 { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); font-family: var(--font-heading); margin: 0 0 var(--space-2); } .categories-index-desc { color: var(--color-text-muted); font-size: var(--text-base); margin: 0; } .categories-grid { display: flex; flex-direction: column; gap: var(--space-3); } .category-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .category-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .category-card-info { flex: 1; min-width: 0; } .category-card-name { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-1); } .category-card-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--line-height-relaxed); margin: 0 0 var(--space-2); } .category-card-count { font-size: var(--text-xs); color: var(--color-primary); font-weight: var(--font-weight-medium); } .category-card-arrow { font-size: var(--text-xl); color: var(--color-text-muted); flex-shrink: 0; transition: transform 0.15s ease, color 0.15s ease; } .category-card:hover .category-card-arrow { transform: translateX(4px); color: var(--color-primary); } /* ================================================================= AUTHORS INDEX PAGE ================================================================= */ .authors-index { max-width: 900px; margin: 0 auto; } .authors-index-header { margin-bottom: var(--space-8); } .authors-index-header h1 { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); font-family: var(--font-heading); margin: 0 0 var(--space-2); } .authors-index-desc { color: var(--color-text-muted); font-size: var(--text-base); margin: 0; } .authors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); } .author-card { display: flex; gap: var(--space-4); padding: var(--space-5); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .author-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .author-card-avatar { width: 96px; height: 96px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; } .author-card-avatar--placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; font-size: var(--text-2xl); font-weight: var(--font-weight-bold); } .author-card-info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .author-card-name { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin: 0; } .author-card-role { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; } .author-card-bio { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--line-height-relaxed); margin: 0; } .author-card-count { font-size: var(--text-xs); color: var(--color-primary); font-weight: var(--font-weight-medium); } @media (max-width: 480px) { .authors-grid { grid-template-columns: 1fr; } .author-card { flex-direction: column; align-items: center; text-align: center; } } /* ================================================================= WIDGET: RELATED POSTS ================================================================= */ .widget-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-4); } .widget-related-card { display: flex; flex-direction: column; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .widget-related-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .widget-related-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .widget-related-body { padding: var(--space-3) var(--space-4); } .widget-related-title { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); margin: 0; } /* ================================================================= WIDGET: RECENT POSTS (sidebar) ================================================================= */ .widget-recent-link { display: block; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); text-decoration: none; color: inherit; font-size: var(--text-sm); line-height: var(--line-height-normal); transition: color 0.15s ease; } .widget-recent-link:last-child { border-bottom: none; } .widget-recent-link:hover { color: var(--color-primary); } .widget-recent-title { font-weight: var(--font-weight-medium); margin: 0; } .widget-recent-date { font-size: var(--text-xs); color: var(--color-text-muted); } /* ================================================================= TABLE OF CONTENTS (TOC) ================================================================= */ .toc { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-6); } .toc-title { font-weight: var(--font-weight-semibold); cursor: pointer; list-style: none; margin-bottom: var(--space-3); } .toc-title::-webkit-details-marker { display: none; } .toc-title::before { content: "▸ "; font-size: 0.8em; transition: transform var(--transition-fast); display: inline-block; } .toc[open] > .toc-title::before { content: "▾ "; } .toc ol, .toc ul { padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); } .toc-level-3 { margin-left: var(--space-4); } .toc a { color: var(--color-text-muted); font-size: var(--text-sm); transition: color var(--transition-fast); } .toc a:hover { color: var(--color-primary); text-decoration: none; } /* ================================================================= PAGINATION ================================================================= */ .pagination { display: flex; justify-content: center; align-items: center; gap: var(--space-2); padding: var(--space-8) 0; flex-wrap: wrap; } .pagination a, .pagination span { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-weight-medium); transition: background var(--transition-fast), color var(--transition-fast); } .pagination a { color: var(--color-primary); border: 1px solid var(--color-border); } .pagination a:hover { background: var(--color-bg-alt); text-decoration: none; } .current-page { background: var(--color-primary); color: var(--color-text-inverse); border-radius: var(--radius-md); border: 1px solid var(--color-primary); } .pagination .disabled { opacity: 0.4; cursor: default; pointer-events: none; } /* ================================================================= SECTION TITLE ================================================================= */ .section-title { font-size: var(--text-2xl); margin-bottom: var(--space-4); font-weight: var(--font-weight-bold); font-family: var(--font-heading); } /* ================================================================= SIDEBAR ================================================================= */ .sidebar-widget { margin-bottom: var(--space-6); } .sidebar-title { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: var(--space-3); } .sidebar-cat-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); } .sidebar-cat-list a { display: flex; justify-content: space-between; padding: var(--space-1) 0; color: var(--color-text); font-size: var(--text-sm); transition: color var(--transition-fast); } .sidebar-cat-list a:hover { color: var(--color-primary); text-decoration: none; } .cat-count { color: var(--color-text-muted); font-size: var(--text-xs); } /* ================================================================= RELATED POSTS ================================================================= */ .related-posts { margin-top: var(--space-12); } .related-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-4); } /* ================================================================= SOURCES ================================================================= */ .post-sources { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); } .sources-list { padding-left: var(--space-4); } .sources-list li { margin-bottom: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); } /* ================================================================= SHARE BUTTONS ================================================================= */ .share-buttons { display: flex; gap: var(--space-2); margin-top: var(--space-4); } .share-buttons a { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--text-sm); transition: border-color var(--transition-fast), color var(--transition-fast); } .share-buttons a:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; } /* ================================================================= ARCHIVE HEADER (category, tag pages) ================================================================= */ .archive-header { margin-bottom: var(--space-8); } .archive-label { font-size: var(--text-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-1); } .archive-header h1 { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); font-family: var(--font-heading); } .archive-description { margin-top: var(--space-2); color: var(--color-text-muted); line-height: var(--line-height-relaxed); } /* ================================================================= EMPTY STATE ================================================================= */ .empty-state { color: var(--color-text-muted); text-align: center; padding: var(--space-12) 0; } /* ================================================================= SEARCH ================================================================= */ .search-form { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); } .search-input { flex: 1; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-base); background: var(--color-bg); color: var(--color-text); transition: border-color var(--transition-fast); } .search-input:focus { border-color: var(--color-primary); } .search-button { padding: var(--space-2) var(--space-4); background: var(--color-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius-md); font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--transition-fast); } .search-button:hover { background: var(--color-primary-hover); } .search-results { list-style: none; } .search-result-item { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); } .search-no-results { color: var(--color-text-muted); text-align: center; padding: var(--space-8) 0; } /* ================================================================= ERROR PAGE (404) ================================================================= */ .error-page { text-align: center; padding: var(--space-16) var(--space-4); } .error-page .error-code { font-size: 6rem; font-weight: var(--font-weight-bold); color: var(--color-border); line-height: 1; } .error-page h1 { font-size: var(--text-2xl); margin-bottom: var(--space-4); } .error-page p { color: var(--color-text-muted); margin-bottom: var(--space-6); } /* === post.css === */ /* ================================================================= POST — CloudBlogs Master Template Estilos do conteudo rich-text do artigo e header/footer do post. Depende de: tokens.css, reset.css, layout.css, components.css ================================================================= */ /* ================================================================= POST HEADER ================================================================= */ .post-header { margin-bottom: var(--space-8); } .post-title { font-size: var(--text-4xl); font-weight: var(--font-weight-bold); font-family: var(--font-heading); line-height: var(--line-height-tight); margin-bottom: var(--space-3); } .post-subtitle { font-size: var(--text-lg); color: var(--color-text-muted); line-height: var(--line-height-relaxed); margin-bottom: var(--space-4); } .post-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); align-items: center; margin-bottom: var(--space-4); } .post-author { font-style: normal; display: flex; align-items: center; gap: var(--space-2); width: 100%; } .post-author a { color: var(--color-text); font-weight: var(--font-weight-medium); } .post-author a:hover { color: var(--color-primary); } .reading-time::before { content: "\23F1\FE0E "; } .post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } /* ================================================================= POST HERO FIGURE ================================================================= */ .post-hero-figure { margin-bottom: var(--space-6); } .post-hero-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); } .post-hero-figure figcaption { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); } /* ================================================================= POST CONTENT (rich-text / user-generated) ================================================================= */ .post-content h2 { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); margin-top: var(--space-10); margin-bottom: var(--space-4); font-family: var(--font-heading); line-height: var(--line-height-tight); } .post-content h3 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); margin-top: var(--space-8); margin-bottom: var(--space-3); font-family: var(--font-heading); line-height: var(--line-height-tight); } .post-content h4 { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin-top: var(--space-6); margin-bottom: var(--space-2); font-family: var(--font-heading); } .post-content p { margin-bottom: var(--space-4); line-height: var(--line-height-relaxed); } .post-content ul, .post-content ol { margin-bottom: var(--space-4); padding-left: var(--space-6); } .post-content li { margin-bottom: var(--space-1); line-height: var(--line-height-relaxed); } .post-content li + li { margin-top: var(--space-1); } .post-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } .post-content a:hover { color: var(--color-primary-hover); } /* -- Blockquote ---------------------------------------------------- */ .post-content blockquote { border-left: 4px solid var(--color-blockquote-border); background: var(--color-blockquote-bg); padding: var(--space-4) var(--space-6); margin: var(--space-6) 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; } .post-content blockquote p { margin-bottom: 0; } /* -- Code ---------------------------------------------------------- */ .post-content code { background: var(--color-code-bg); color: var(--color-code-text); padding: 0.15em 0.4em; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.9em; } .post-content pre { background: var(--color-code-bg); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; margin-bottom: var(--space-4); } .post-content pre code { background: none; padding: 0; font-size: var(--text-sm); } /* -- Images & Figures ---------------------------------------------- */ .post-content img { border-radius: var(--radius-md); margin: var(--space-4) 0; } .post-content figure { margin: var(--space-6) 0; } .post-content figcaption { font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; margin-top: var(--space-2); } /* -- Tables -------------------------------------------------------- */ .post-content table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); } .post-content th, .post-content td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; } .post-content th { font-weight: var(--font-weight-semibold); background: var(--color-bg-alt); } /* -- Misc inline --------------------------------------------------- */ .post-content strong { font-weight: var(--font-weight-semibold); } .post-content hr { border: none; height: 1px; background: var(--color-border); margin: var(--space-8) 0; } /* ================================================================= POST FOOTER ================================================================= */ .post-footer { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); } /* ================================================================= RESPONSIVE ================================================================= */ @media (max-width: 640px) { .post-title { font-size: var(--text-3xl); } } @media (max-width: 480px) { .post-title { font-size: var(--text-2xl); } .post-meta { gap: var(--space-2); } }