/* =================== Fonts =================== */ @font-face { font-family: "Open Sans Regular"; src: url("../fonts/OpenSans-Regular.ttf") format("truetype"); } @font-face { font-family: "Fira Code"; src: url("../fonts/FiraCodeNerdFontMono-Light.ttf") format("truetype"); } @font-face { font-family: "Black Ops One"; src: url("../fonts/BlackOpsOne-Regular.ttf") format("truetype"); } /* =================== Root Variables =================== */ :root { /* Colors */ --color-black: #000000; --color-white: #ffffff; --color-gray: #6c757d; /* Fonts */ --font-body: "Open Sans Regular", sans-serif; --font-display: "Black Ops One", sans-serif; --font-code: "Fira Code", monospace; /* Sizes */ --fs-base: 1rem; /* 16px */ --fs-small: 0.875rem; /* 14px */ --fs-large: 1.25rem; /* 20px */ } /* =================== Base =================== */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-size: var(--fs-base); line-height: 1.6; color: var(--color-black); font-family: var(--font-body); background: var(--color-white); } p, li { font-family: var(--font-body); } /* =================== Navbar =================== */ .navbar { display: flex; align-items: center; } .navbar-brand, .navbar-brand:hover { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; color: var(--color-black); padding-left: 20px; } .navbar-brand img { height: 30px; width: auto; } .navbar-nav { display: flex; gap: 5px; } .nav-link { font-family: var(--font-display); color: var(--color-black); font-size: 15px; transition: color 0.3s ease, transform 0.2s; text-decoration: none !important; } .nav-link:hover { transform: scale(1.05); } .nav-link.active { color: var(--color-black) !important; } /* =================== Sections =================== */ .title-section { font-family: var(--font-display); text-transform: uppercase; text-align: center; font-size: 1.75rem; } .paragraph-section { font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.6em; } /* =================== Cards =================== */ .card { display: flex; flex-direction: column; height: 100%; } .post-date { margin-bottom: 4px; /* diminui o espaço abaixo da data */ font-size: 0.875rem; /* mantém pequeno */ line-height: 1.2; margin-bottom: 2px; } .card-title { margin-top: 0; /* remove espaço extra acima do título */ margin-bottom: 8px; /* opcional, diminui espaçamento interno */ } .card-body { flex: 1; display: flex; flex-direction: column; } .card-img-top { width: 100%; height: 180px; object-fit: cover; border-radius: 0.5rem 0.5rem 0 0; } /* melhora o rendering das fontes */ .card-text { font-family: var(--font-body); font-size: var(--fs-base); color: var(--color-black); /* JUSTIFY melhor distribuído */ text-align: justify; text-justify: inter-word; /* habilita hifenização automática (precisa de ) */ -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; /* evita "estourar" palavras longas */ overflow-wrap: break-word; word-wrap: break-word; /* ajuste fino dos espaçamentos */ word-spacing: -1.2px; /* experimente -0.6 / -1.2 / -1.8 */ letter-spacing: -0.18px; /* aproxima levemente letras */ line-height: 1.45; /* suaviza o render da fonte (opcional) */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .post-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-display); font-size: var(--fs-large); text-transform: uppercase; margin: 10px 0; color: var(--color-black); min-height: unset; /* REMOVE altura fixa */ text-decoration: none; letter-spacing: normal; /* ou 0 */ line-height: 1.3; /* melhora a leitura */ word-spacing: 0; /* garante que não abre espaçamento entre palavras */ } .post-excerpt, .post-text { flex: 1; /* força o resumo a expandir igualmente */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* =================== Footer =================== */ footer { font-family: var(--font-body); font-size: var(--fs-small); } footer a { color: var(--color-black); text-decoration: none; } .footer_menu { list-style: none; padding-left: 0; /* remove o recuo padrão */ margin: 0; /* remove margem extra */ } .footer_menu li { margin-bottom: 0.1rem; /* espaçamento entre links */ } .footer_menu a { text-decoration: none; } .footer_menu a:hover { text-decoration: underline; } footer .widget-title, footer h5 { font-family: var(--font-display); } .social a { width: 30px; /* largura fixa */ height: 30px; /* altura fixa */ display: inline-flex; align-items: center; justify-content: center; font-size: 18px; /* tamanho do ícone */ margin-right: 8px; } .social a i { line-height: 1; } /* ===== single ===== */ /* imagem da single */ .single-post-content img { max-width: 100%; height: auto; display: block; margin: 1.5em auto; border-radius: 6px; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; margin-right: 1.5em; } .alignright { float: right; margin-left: 1.5em; } /* título principal */ h1.single-title { font-family: var(--font-display); font-size: 2.25rem; /* 36px */ text-transform: uppercase; color: var(--color-black); text-align: center; } .single-meta { font-family: var(--font-body); font-size: 12px; color: var(--color-black); text-align: center; } /* Estilo geral dos títulos */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); text-transform: uppercase; color: var(--color-black); margin: 1em 0 0.5em; } .single-post-content p { font-family: var(--font-body); font-size: 1rem; /* 16px para melhor leitura */ line-height: 1.8em; /* Maior espaçamento entre linhas */ text-align: justify; color: var(--color-black); margin-bottom: 1.2em; /* Melhor espaçamento entre parágrafos */ } .single-post-content ul { padding-left: 20px; margin-bottom: 1em; line-height: 1.8em; } .single-post-content ul li { margin-bottom: 0.6em; font-family: var(--font-body); font-size: 1rem; color: var(--color-black); text-align: justify; } /* =================== Code Blocks =================== */ pre, code, .hljs { font-family: var(--font-code) !important; font-size: var(--fs-base); line-height: 1.8em; } .copy-button { font-family: var(--font-body); font-size: var(--fs-small); color: var(--color-white); transition: color 0.3s ease; } /* botão copiar codigo fonte */ .code-container { position: relative; } .copy-button { position: absolute; top: 15px; right: 10px; padding: 5px 10px; border: none; background: none; cursor: pointer; font-family: var(--font-body); font-size: 14px; color: var(--color-white); /* Ícone branco */ display: flex; align-items: center; gap: 5px; /* Espaço entre ícone e texto */ transition: color 0.3s ease; } .copy-button i { font-size: 18px; color: var(--color-white); /* Garante que o ícone também fique branco */ } .copy-button i:hover { color: var(--color-white); /* Um branco levemente mais escuro no hover */ } .single-tags-title { font-family: var(--font-code); font-size: var(--fs-small); color: var(--color-black); } .single-tags { margin-top: 20px; font-family: var(--font-code); font-size: var(--fs-base); } .single-tags .tag-label { margin-right: 5px; } .single-tags a { text-decoration: none; margin-right: 8px; } .single-tags a:hover { text-decoration: underline; } /* =================== Pagination =================== */ .pagination a, .pagination span { background: var(--color-black); color: var(--color-white); border-radius: 4px; padding: 8px 12px; } .pagination .active a { background: var(--color-gray); } /* =================== Error Page =================== */ .error-code { font-family: var(--font-display); font-style: italic; font-size: 8rem; color: var(--color-black); }