:root { --navy: #0A2540; --navy-soft: #123458; --gold: #C4A96D; --bg: #FFFFFF; --text: #1F2933; --muted: #6B7280; --card: #F5F7FA; } /* Reset básico */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } /* Layout base */ .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; } /* Header / Nav */ header { border-bottom: 1px solid #E5E7EB; background: #ffffffcc; backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 50; } .chip-icon { width: 28px; height: 28px; transition: transform 0.3s ease, filter 0.3s ease; } .nav { position: relative; /* novo */ display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; } /* Botão hambúrguer (mobile) */ .nav-toggle { display: none; /* continua escondido no desktop */ background: transparent; border: none; padding: 6px; border-radius: 999px; cursor: pointer; } .nav-toggle:hover .chip-icon.dd-icon { transform: scale(1.08); } .dd-icon { width: 48px; height: 48px; display: block; transition: transform 0.28s ease, filter 0.2s ease; } /* Hover (debug / desktop) */ .nav-toggle:hover .dd-icon { filter: brightness(1.08); } /* Quando o menu está aberto (classe no ) → gira */ body.nav-open .dd-icon { transform: rotate(90deg) scale(1.05); } /* Blocos de área de estudo na página de livros */ .books-area { margin-bottom: 40px; padding: 28px 24px; border-radius: 18px; border: 1px solid #e0e6f0; background: #f8fafc; } /* Alternar cor de fundo a cada área (2ª, 4ª, 6ª...) */ .books-area:nth-of-type(even) { background: #0A2540; border-color: #122b4f; } /* Título da área — faixa mais destacada */ .books-area .books-category-title { font-size: 1.4rem; margin-bottom: 18px; padding-bottom: 8px; border-bottom: 2px solid rgba(196, 169, 109, 0.7); /* dourado leve */ } .book-cover { width: 140px; /* tamanho ideal */ height: 200px; /* altura fixa para padronização */ object-fit: cover; /* mantém a aparência sem distorcer */ border-radius: 8px; /* cantos suaves */ margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; } /* Centralizar conteúdo do card */ .book-card { text-align: center; padding: 18px; } @media (max-width: 600px) { .book-cover { width: 110px; height: 155px; } } /* Quando o fundo for escuro, ajustar textos */ .books-area:nth-of-type(even) .books-category-title { color: #ffffff; border-bottom-color: rgba(255, 255, 255, 0.35); } .books-area:nth-of-type(even) .book-title { color: #f4f6fb; } .books-area:nth-of-type(even) .book-author { color: #d0dbf0; } .books-area:nth-of-type(even) .book-note { color: #c2cee7; } /* Opcional: dar um leve destaque nas bordas dos cards em fundo escuro */ .books-area:nth-of-type(even) .book-card { background: rgba(9, 22, 45, 0.9); border-color: rgba(255, 255, 255, 0.06); } body.nav-open .chip-icon.dd-icon { transform: rotate(90deg) scale(1.05); } .chip-icon.dd-icon { width: 26px; height: 26px; display: block; transition: transform 0.28s ease, opacity 0.2s ease; } .nav-toggle:hover .chip-icon { filter: brightness(1.1); } .nav-toggle span { display: block; width: 22px; height: 2px; border-radius: 999px; background: var(--navy); margin: 4px 0; transition: transform 0.2s ease, opacity 0.2s ease; } /* Animação simples quando o menu está aberto */ body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.nav-open .chip-icon { transform: rotate(90deg) scale(1.05); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav-left { display: flex; align-items: center; gap: 0.75rem; } /* Logo principal */ .brand-logo { height: 65px; width: auto; display: block; } .brand-text { display: flex; flex-direction: column; gap: 0; } .brand-text span:first-child { font-weight: 600; font-size: 1.05rem; color: var(--navy); letter-spacing: 0.03em; } .brand-text span:last-child { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--muted); } .nav-links { display: flex; gap: 1.5rem; font-size: 0.9rem; } .nav-links a { color: var(--muted); font-weight: 500; } .nav-links a:hover { color: var(--navy); } .nav-cta { padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; } .nav-cta:hover { background: var(--gold); color: #fff; } /* Hero (apresentação) */ .hero { padding-bottom: 4rem; border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; align-items: center; } .badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--navy); background: #EEF2FF; padding: 0.4rem 0.8rem; border-radius: 999px; margin-bottom: 1rem; } .badge-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--gold); } .hero h1 { font-size: clamp(2.1rem, 3vw, 2.7rem); margin-bottom: 1rem; color: var(--navy); } .hero-highlight { color: var(--gold); } .hero p { font-size: 0.98rem; color: var(--muted); margin-bottom: 1.8rem; max-width: 36rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; } /* Botões */ .btn-primary { background: var(--navy); color: #fff; padding: 0.8rem 1.4rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; } .btn-primary span { font-size: 1rem; } .btn-primary:hover { background: var(--navy-soft); } .btn-ghost { padding: 0.8rem 1.2rem; border-radius: 999px; font-size: 0.9rem; font-weight: 500; border: 1px solid #CBD5E1; color: var(--navy); display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; background: transparent; } .btn-ghost:hover { background: #F3F4F6; } .hero-meta { font-size: 0.8rem; color: var(--muted); } .hero-video { background: #000; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28); border: 1px solid #E5E7EB; } .hero-video iframe { width: 100%; height: 260px; border: none; display: block; } /* Seções gerais */ section { padding: 3rem 0; } .section-header { text-align: center; margin-bottom: 2.5rem; } .section-eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); margin-bottom: 0.4rem; } .section-title { font-size: 1.6rem; color: var(--navy); font-weight: 600; } .section-subtitle { font-size: 0.95rem; color: var(--muted); max-width: 28rem; margin: 0.3rem auto 0; text-align: center; } /* Catálogo de cursos */ .courses-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-auto-rows: 1fr; gap: 1.8rem; } .course-card-main { background: var(--card); border-radius: 18px; padding: 1.8rem 1.5rem; border: 1px solid #E5E7EB; } .course-pill { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; background: #FEF3C7; color: #92400E; margin-bottom: 0.7rem; } .course-main-title { font-size: 1.2rem; color: var(--navy); margin-bottom: 0.6rem; } .course-main-text { font-size: 0.92rem; color: var(--muted); margin-bottom: 1rem; } .course-main-link { font-size: 0.9rem; font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; } .course-card-simple { background: #FFFFFF; border-radius: 16px; padding: 1.2rem 1rem; border: 1px solid #E5E7EB; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.03); } .course-card-simple h3 { font-size: 1rem; color: var(--navy); margin-bottom: 0.4rem; } .course-card-simple p { font-size: 0.86rem; color: var(--muted); } .course-status { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); margin-bottom: 0.3rem; } /* Sobre o curso em destaque */ .features-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } .features-list { display: grid; gap: 1.3rem; } .feature-item h3 { font-size: 1rem; color: var(--navy); margin-bottom: 0.3rem; } .feature-item p { font-size: 0.9rem; color: var(--muted); } /* Card lateral do curso em destaque */ .course-card { background: var(--card); border-radius: 18px; padding: 1.8rem 1.5rem; border: 1px solid #E5E7EB; } .course-meta { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.8rem; } .course-price { font-size: 1.4rem; font-weight: 600; color: var(--navy); margin-bottom: 0.2rem; } .course-note { font-size: 0.8rem; color: var(--muted); margin-bottom: 1.3rem; } .btn-full { width: 100%; justify-content: center; margin-bottom: 0.9rem; } .course-payment-note { font-size: 0.78rem; color: var(--muted); } /* Depoimentos */ .testimonials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .testimonial-card { background: #FFFFFF; border-radius: 16px; padding: 1.4rem 1.2rem; border: 1px solid #E5E7EB; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); } .testimonial-text { font-size: 0.9rem; color: var(--text); margin-bottom: 0.9rem; } .testimonial-name { font-size: 0.85rem; font-weight: 600; color: var(--navy); } .testimonial-role { font-size: 0.78rem; color: var(--muted); } /* Rodapé */ footer { border-top: 1px solid #E5E7EB; padding: 2rem 0 2.5rem; font-size: 0.8rem; color: var(--muted); } .footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; } .footer-links { display: flex; gap: 1.25rem; } .footer-links a { color: var(--muted); } .footer-links a:hover { color: var(--navy); } /* Responsivo */ @media (max-width: 900px) { .hero { padding-top: 3rem; } .hero-grid, .features-grid { grid-template-columns: minmax(0, 1fr); } .courses-grid { grid-template-columns: minmax(0, 1fr); } .hero-video iframe { height: 220px; } /* Menu mobile drop-down bonitinho */ .nav-links { position: absolute; top: 100%; right: 1rem; width: 220px; display: flex; flex-direction: column; gap: 1rem; padding: 1.3rem 1.4rem; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 10px 40px rgba(0,0,0,0.10); transform: translateY(-20px); opacity: 0; pointer-events: none; transition: all 0.25s ease; } /* Quando o menu está aberto */ body.nav-open .nav-links { opacity: 1; pointer-events: auto; transform: translateY(0); } .nav-links a { color: var(--navy); font-size: 1rem; font-weight: 600; } .nav-links a:hover { color: var(--gold); } .nav-cta { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } } @media (max-width: 600px) { .hero { padding-top: 2.5rem; } .hero h1 { font-size: 2rem; } .testimonials-grid { grid-template-columns: minmax(0, 1fr); } .course-card, .course-card-main { padding: 1.4rem 1.2rem; } } /* Bloco de dificuldade do livro */ .book-difficulty { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.85rem; } .difficulty-label { font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; opacity: 0.8; } /* Container da “pilha” de nível */ .difficulty-pills { display: inline-flex; gap: 3px; } /* Cada “pilha”/barra */ .difficulty-pills .pill { width: 10px; height: 18px; border-radius: 4px; border: 1px solid rgba(10, 37, 64, 0.18); /* combina com seu tema azul */ background: rgba(10, 37, 64, 0.04); } /* Estilo base da legenda textual (Iniciante, Intermediário etc.) */ .difficulty-text { font-size: 0.8rem; opacity: 0.8; } /* ---- Cores por nível (quantas pilhas “acesas”) ---- */ /* Nível 1 */ .difficulty-1 .pill:nth-child(-n+1) { background: #50b35a; border-color: #50b35a; } /* Nível 2 */ .difficulty-2 .pill:nth-child(-n+2) { background: #74c365; border-color: #74c365; } /* Nível 3 */ .difficulty-3 .pill:nth-child(-n+3) { background: #c4a96d; border-color: #c4a96d; } /* Nível 4 */ .difficulty-4 .pill:nth-child(-n+4) { background: #e07a3f; border-color: #e07a3f; } /* Nível 5 */ .difficulty-5 .pill:nth-child(-n+5) { background: #cf3a3a; border-color: #cf3a3a; } /* ================================ LEGENDA DE DIFICULDADE (TOPO) ================================ */ .difficulty-legend { padding: 3rem 0; background: #f7f8fa; border-bottom: 2px solid rgba(10, 37, 64, 0.08); margin-bottom: 2rem; } .legend-title { text-align: center; font-size: 1.6rem; font-weight: 600; margin-bottom: 1.8rem; color: #0A2540; } .legend-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.4rem; } .legend-item { display: flex; align-items: center; gap: 0.7rem; flex: 1 1 220px; } .legend-text { font-size: 0.9rem; opacity: 0.85; } /* Estrutura das pílulas */ .legend-pills { display: inline-flex; gap: 3px; } .legend-pills .pill { width: 14px; height: 22px; border-radius: 4px; border: 1px solid rgba(10, 37, 64, 0.25); background: rgba(10, 37, 64, 0.06); } /* Padrão de cores conforme o nível */ .difficulty-1 .pill:nth-child(-n+1) { background: #71cc7a; border-color: #71cc7a; } .difficulty-2 .pill:nth-child(-n+2) { background: #25a53e; border-color: #25a53e; } .difficulty-3 .pill:nth-child(-n+3) { background: #c2a92a; border-color: #c2a92a; } .difficulty-4 .pill:nth-child(-n+4) { background: #e07a3f; border-color: #e07a3f; } .difficulty-5 .pill:nth-child(-n+5) { background: #db6767; border-color: #db6767; } /* Responsivo */ @media (max-width: 720px) { .legend-row { flex-direction: column; align-items: center; } .legend-item { justify-content: center; } } /* Se o card tem fundo escuro, mudar cores das pílulas, textos e bordas */ .book-card { position: relative; } /* Caso o card ou a área onde ele está tenha fundo escuro */ .books-area:nth-child(even) .book-card, .books-area.tema-escuro .book-card { color: #f0f0f0; /* texto mais claro */ } /* Ajustar a legenda de dificuldade */ .books-area:nth-child(4) .book-card .difficulty-label, .books-area:nth-child(4) .book-card .difficulty-text { color: #ffffff; opacity: 0.9; } /* Pílulas no modo escuro */ .books-area:nth-child(4) .book-card .pill { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.10); } /* As pílulas “acesas” mantêm as cores, mas com borda mais forte */ .books-area:nth-child(4) .difficulty-1 .pill:nth-child(-n+1), .books-area:nth-child(4) .difficulty-2 .pill:nth-child(-n+2), .books-area:nth-child(4) .difficulty-3 .pill:nth-child(-n+3), .books-area:nth-child(4) .difficulty-4 .pill:nth-child(-n+4), .books-area:nth-child(4) .difficulty-5 .pill:nth-child(-n+5) { border-color: #ffffff; } /* Ajuste de texto */ .books-area:nth-child(4) .book-card .difficulty-label, .books-area:nth-child(4) .book-card .difficulty-text { color: #ffffff; opacity: 0.9; } /* Pílulas APAGADAS no fundo escuro */ .books-area:nth-child(4) .book-card .pill { background: rgba(255, 255, 255, 0.07); /* fundo super leve */ border-color: rgba(255, 255, 255, 0.25); /* outline claro */ } /* Pílulas ACESAS — mantém as cores ORIGINAIS */ .books-area:nth-child(4) .difficulty-1 .pill:nth-child(-n+1), .books-area:nth-child(4) .difficulty-2 .pill:nth-child(-n+2), .books-area:nth-child(4) .difficulty-3 .pill:nth-child(-n+3), .books-area:nth-child(4) .difficulty-4 .pill:nth-child(-n+4), .books-area:nth-child(4) .difficulty-5 .pill:nth-child(-n+5) { background: currentColor; /* mantém a cor original definida antes */ border-color: #ffffff; /* contorno branco melhora o contraste */ } /* ======================================= LEGENDA DE DIFICULDADE - EMBEDDED STYLE ======================================= */ .difficulty-legend { padding: 2.5rem 0 2rem; } .legend-header { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-end; margin-bottom: 1.5rem; } .legend-eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; color: #C4A96D; margin-bottom: 0.3rem; } .legend-title { font-size: 1.6rem; font-weight: 600; color: #0A2540; } .legend-subtitle { max-width: 360px; font-size: 0.9rem; line-height: 1.5; color: rgba(10, 37, 64, 0.8); } /* Card tipo painel de sistema */ .legend-card { background: radial-gradient(circle at top left, rgba(196,169,109,0.22), transparent 55%), #0A2540; border-radius: 18px; border: 1px solid rgba(196,169,109,0.55); box-shadow: 0 14px 30px rgba(7, 17, 34, 0.45); padding: 1.6rem 1.8rem; color: #E5EDF7; } /* Grid para desktop, vira coluna no mobile */ .legend-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; } /* Cada linha da legenda */ .legend-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.4rem; border-bottom: 1px dashed rgba(229, 237, 247, 0.18); } .legend-item:last-child { border-bottom: none; } /* Bloco de texto do lado esquerdo */ .legend-info { display: flex; flex-direction: column; gap: 0.15rem; } .legend-text-main { font-size: 0.9rem; font-weight: 500; } .legend-text-code { font-family: "Fira Code", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(229, 237, 247, 0.75); } /* =============================== PILHA DE DIFICULDADE - BARGRAPH =============================== */ /* Container da "barra" de nível */ .legend-pills { display: inline-flex; align-items: flex-end; gap: 4px; padding: 4px 8px; border-radius: 999px; background: radial-gradient(circle at 10% 0, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.75)); border: 1px solid rgba(148, 163, 184, 0.7); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.9), 0 2px 6px rgba(0, 0, 0, 0.45); } /* Segmentos "apagados" – visual mais técnico */ .legend-pills .pill { width: 32px; height: 22px; border-radius: 2px; background: linear-gradient( to top, rgba(30, 41, 59, 1), rgba(15, 23, 42, 1) ); border: 1px solid rgba(51, 65, 85, 1); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(15, 23, 42, 0.9); opacity: 0.35; transform-origin: bottom; transition: opacity 0.18s ease-out, transform 0.18s ease-out, box-shadow 0.18s ease-out; } /* "Embutir" um leve notch nas pontas para parecer módulo físico */ .legend-pills .pill:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .legend-pills .pill:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } /* --------- CORES ATIVAS POR NÍVEL (LED BARGRAPH) --------- */ /* LVL 1 – mais "safe", verde forte */ .difficulty-1 .pill:nth-child(-n+1), .difficulty-2 .pill:nth-child(-n+2), .difficulty-3 .pill:nth-child(-n+3), .difficulty-4 .pill:nth-child(-n+4), .difficulty-5 .pill:nth-child(-n+5) { opacity: 1; box-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 8px currentColor; transform: translateY(-1px); } /* Cores específicas de cada nível */ .difficulty-1 .pill:nth-child(-n+1) { color: #4ade80; /* verde */ background: linear-gradient(to top, #166534, #4ade80); border-color: #22c55e; } .difficulty-2 .pill:nth-child(-n+2) { color: #86efac; background: linear-gradient(to top, #15803d, #86efac); border-color: #22c55e; } .difficulty-3 .pill:nth-child(-n+3) { color: #c4a96d; /* dourado */ background: linear-gradient(to top, #854d0e, #eab308); border-color: #facc15; } .difficulty-4 .pill:nth-child(-n+4) { color: #fb923c; /* laranja */ background: linear-gradient(to top, #9a3412, #fb923c); border-color: #f97316; } .difficulty-5 .pill:nth-child(-n+5) { color: #f97373; /* vermelho mais agressivo */ background: linear-gradient(to top, #7f1d1d, #ef4444); border-color: #ef4444; } /* Pequeno "feedback" ao passar o mouse no desktop */ @media (hover: hover) and (pointer: fine) { .legend-item:hover .legend-pills .pill { opacity: 0.45; } .legend-item:hover .difficulty-1 .pill:nth-child(-n+1), .legend-item:hover .difficulty-2 .pill:nth-child(-n+2), .legend-item:hover .difficulty-3 .pill:nth-child(-n+3), .legend-item:hover .difficulty-4 .pill:nth-child(-n+4), .legend-item:hover .difficulty-5 .pill:nth-child(-n+5) { opacity: 1; transform: translateY(-2px); } } /* ----------------------- RESPONSIVO / MOBILE ----------------------- */ @media (max-width: 900px) { .legend-header { flex-direction: column; align-items: flex-start; } .legend-subtitle { max-width: none; } .legend-row { grid-template-columns: 1fr; } .legend-card { padding: 1.3rem 1.4rem; } .legend-item { padding: 0.5rem 0; } } @media (max-width: 600px) { .legend-title { font-size: 1.35rem; } .legend-text-main { font-size: 0.88rem; } .legend-text-code { font-size: 0.72rem; } .legend-pills .pill { width: 22px; height: 12px; border-radius: 999px; } } .link-italic { font-style: italic; color: #0A2540; /* ou a cor padrão dos seus links */ text-decoration: none; } .link-italic:hover { text-decoration: underline; opacity: 0.85; } .hero-tip-card { margin: 2rem auto 0; padding: 1.2rem 1.5rem; background: #ffffff; border-left: 4px solid #C4A96D; border-radius: 10px; display: flex; align-items: flex-start; gap: 1.2rem; box-shadow: 0 4px 18px rgba(0,0,0,0.08); max-width: 780px; width: 100%; /* 👈 garante que não estoure no mobile */ box-sizing: border-box; /* 👈 evita estourar por causa do padding */ } .hero-tip-icon { width: 58px; height: auto; flex-shrink: 0; /* 👈 evita distorções */ transform: rotate(-8deg); filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.25)); opacity: 0.9; } .hero-tip-content { font-size: 0.95rem; line-height: 1.55; color: #0A2540; } /* ============== MOBILE FIX ============== */ @media (max-width: 600px) { .hero-tip-card { flex-direction: row; padding: 1rem 1rem; gap: 0.8rem; width: 100%; /* 👈 força ajustar dentro da tela */ } .hero-tip-icon { width: 40px; /* 👈 reduz imagem no mobile */ transform: rotate(-5deg); } .hero-tip-content { font-size: 0.88rem; line-height: 1.45; } } /* ====================================== Metodologia: Stack do Conhecimento ====================================== */ .method-text .section-title { margin-bottom: 0.8rem; } .method-text p { margin-bottom: 0.75rem; } /* Cartão lateral */ .method-card { background: #0A2540; color: #E5EDF7; border-radius: 16px; padding: 1.6rem 1.7rem; box-shadow: 0 16px 32px rgba(7, 17, 34, 0.45); position: relative; overflow: hidden; } .method-card::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 0 0, rgba(196,169,109,0.3), transparent 55%); opacity: 0.7; pointer-events: none; } .method-card h3 { position: relative; margin-top: 0.4rem; margin-bottom: 0.8rem; font-size: 1.1rem; } .method-card p, .method-card ul { position: relative; font-size: 0.92rem; line-height: 1.55; } .method-tag { position: relative; display: inline-block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.22rem 0.7rem; border-radius: 999px; border: 1px solid rgba(196,169,109,0.8); color: #C4A96D; background: rgba(10, 37, 64, 0.7); } .method-list { list-style: none; margin: 0.8rem 0 0.6rem; padding-left: 0; } .method-list li { position: relative; padding-left: 1.2rem; margin-bottom: 0.4rem; } .method-list li::before { content: "•"; position: absolute; left: 0; top: 0; color: #C4A96D; } .method-note { margin-top: 0.6rem; font-size: 0.85rem; opacity: 0.9; } /* Responsivo */ @media (max-width: 880px) { .method-grid { grid-template-columns: minmax(0, 1fr); } .method-card { margin-top: 0.8rem; } } /* Destaque do bloco "Como funciona na prática?" */ .method-highlight { font-size: 1.06rem !important; line-height: 1.62 !important; margin-top: 1.2rem !important; margin-bottom: 1.2rem !important; padding: 1rem 1.2rem; border: 1.5px solid rgba(196,169,109,0.45); /* dourado suave */ border-radius: 10px; background: rgba(196,169,109,0.08); /* leve fundo dourado translúcido */ } /* Título dourado dentro do destaque */ .method-title { font-size: 1.50rem !important; color: #C4A96D !important; font-weight: 600 !important; } /* GRID da seção (se ainda não tiver algo assim) */ .method-section { padding-top: 5rem; /* mantém o respiro em cima */ padding-bottom: 1.0rem; /* diminui o espaço embaixo */ background: #f9fafb; /* ajuda a separar visualmente do hero */ } .method-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr); gap: 3rem; align-items: center; } /* Bloco visual da stack */ /* Cartão visual da stack */ .method-visual { background: #020617; border-radius: 24px; padding: 1.8rem 1.8rem 1.6rem; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7); color: #e5e7eb; } .method-visual-title { margin-top: 0.6rem; margin-bottom: 0.4rem; font-size: 1.25rem; } .method-visual-text { font-size: 0.9rem; color: #9ca3af; margin-bottom: 1.5rem; } .method-visual-header h3 { font-size: 1.3rem; margin: 0.4rem 0 0.6rem; } .method-visual-header p { font-size: 0.9rem; color: #9ca3af; margin-bottom: 1.5rem; } /* Ilustração da stack */ .stack-illustration { position: relative; height: 220px; margin-bottom: 1.5rem; perspective: 800px; } .layer-base { bottom: 0; filter: blur(0.3px); } .layer-mid { bottom: 35px; } .layer-top { bottom: 70px; background: linear-gradient(135deg, #1f2937, #020617); border-color: #fbbf24; box-shadow: 0 20px 40px rgba(250, 204, 21, 0.37); } /* Texto sobre a stack */ .stack-label { position: absolute; left: 50%; bottom: 102px; transform: translateX(-50%); text-align: center; font-size: 0.9rem; font-weight: 500; color: #f9fafb; } .stack-label span { display: block; font-size: 0.75rem; color: #9ca3af; } /* Bolinhas de subtema */ .stack-bubble { position: absolute; width: 120px; min-height: 48px; border-radius: 999px; background: rgba(15, 23, 42, 0.94); border: 1px solid rgba(148, 163, 184, 0.7); padding: 0.4rem 0.7rem; font-size: 0.7rem; display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; } .stack-bubble span { font-size: 0.72rem; color: #e5e7eb; } /* Posição das bolhas */ .bubble-1 { top: 10px; left: -10px; } .bubble-2 { top: 20px; right: -5px; } .bubble-3 { bottom: 5px; right: 30px; } /* "subtema" rótulo */ .stack-bubble::before { content: "subtema"; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: #facc15; } /* Setinha ligando à stack */ .bubble-arrow { position: absolute; width: 40px; height: 1px; background: linear-gradient(to right, rgba(249, 250, 251, 0.1), rgba(249, 250, 251, 0.8)); } .bubble-1 .bubble-arrow { right: -40px; top: 50%; } .bubble-2 .bubble-arrow { left: -40px; top: 50%; } .bubble-3 .bubble-arrow { left: -38px; top: 15px; } /* Ajuste da lista embaixo da ilustração */ .method-visual .method-list { margin-top: 0.5rem; padding-left: 1.1rem; font-size: 0.85rem; color: #d1d5db; } .method-visual .method-list li + li { margin-top: 0.3rem; } /* Responsivo */ @media (max-width: 900px) { .method-grid { grid-template-columns: 1fr; } .method-visual { margin-top: 2rem; } .stack-illustration { height: 200px; } .stack-layer { width: 190px; height: 70px; } } .stack-diagram { display: flex; justify-content: center; align-items: center; gap: 1.4rem; /* MENOR para caber no cartão */ margin: 1.2rem 0; } /* LINHA única: subtema + seta */ .side-row { display: flex; align-items: center; gap: 0.45rem; } /* Coluna de subtemas + setas */ .stack-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; } /* Bolinha Subtema */ .side-item { background: #1e293b; color: #f1f5f9; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.72rem; border: 1px solid rgba(255,255,255,0.15); white-space: nowrap; /* impede quebrar linha */ } /* Setinha */ .side-arrow { font-size: 1.1rem; color: #facc15; font-weight: bold; } /* Stack central mais estreita */ .stack-column { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .stack-layer { width: 160px; /* REDUZIDO */ padding: 0.55rem 0.6rem; /* mais compacto */ background: #0f172a; border: 2px solid #334155; border-radius: 10px; color: #e2e8f0; font-size: 0.78rem; text-align: center; box-shadow: 0 3px 0 #1e293b; } .stack-layer small { font-size: 0.65rem; color: #cbd5e1; } .stack-layer.top { background: #1e3a8a; border-color: #3b82f6; color: #f8fafc; } .stack-layer:first-child { background: #1e3a8a; border-color: #3b82f6; color: #f8fafc; } .stack-layer:last-child { background: #1e293b; } /* Stack central (3 retângulos empilhados) */ .stack-core { display: flex; flex-direction: column; gap: 0.45rem; align-items: center; } .stack-box { width: 190px; padding: 0.55rem 0.9rem; border-radius: 0.9rem; text-align: center; font-size: 0.8rem; border: 1px solid rgba(148, 163, 184, 0.65); background: radial-gradient(circle at top left, #111827, #020617); } .box-top { border-color: #22c55e; } .box-mid { border-color: #facc15; } .box-bottom { border-color: #3b82f6; } /* Bolinhas de subtema */ .stack-bubble { position: absolute; display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgba(15, 23, 42, 0.96); border: 1px solid rgba(148, 163, 184, 0.7); font-size: 0.7rem; } .bubble-1 { top: 10px; left: -4px; } .bubble-2 { top: 50%; right: -10px; transform: translateY(-50%); } .bubble-3 { bottom: 6px; left: 8px; } .bubble-dot { width: 6px; height: 6px; border-radius: 999px; background: #facc15; opacity: 0.9; } .bubble-main { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.65rem; color: #facc15; } .bubble-sub { font-size: 0.7rem; color: #e5e7eb; } .bubble-arrow { margin-left: 0.1rem; font-size: 0.85rem; opacity: 0.6; /* seta discreta */ } /* Lista no rodapé do cartão */ .method-visual .method-list { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; color: #d1d5db; } .method-visual .method-list li + li { margin-top: 0.25rem; } /* Ajuste para telas menores */ @media (max-width: 900px) { .stack-diagram { gap: 1rem; } .stack-layer { width: 140px; } } /* imagem da stack dentro do cartão */ .method-stack-img { display: block; margin: 0 auto 1.2rem; width: 230px; /* aumenta o tamanho base no desktop */ max-width: 80%; /* garante que não estoure em telas menores */ } /* ========================================== ROADMAP SECTION — PREMIUM STYLE ========================================== */ .learning-roadmap { padding: 60px 0; } .roadmap-card { background: #F8FAFC; /* leve tom profissional */ border: 1px solid rgba(0,0,0,0.06); border-radius: 22px; padding: 40px 30px; box-shadow: 0 8px 20px rgba(0,0,0,0.03); max-width: 1000px; margin: 0 auto; /* centraliza o card */ } .roadmap-header { text-align: center; margin-bottom: 30px; } .roadmap-eyebrow { color: #C4A96D; /* mesma cor dourada do site */ font-size: 14px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 8px; text-transform: uppercase; } .roadmap-title-row { display: flex; justify-content: center; gap: 10px; align-items: center; } .roadmap-icon { font-size: 30px; } .roadmap-title { font-size: 28px; font-weight: 600; margin: 0; color: #0A2540; } .roadmap-subtitle { max-width: 650px; margin: 12px auto 0; color: #555; font-size: 16px; } .roadmap-image-wrapper { margin-top: 25px; text-align: center; } .roadmap-image { max-width: 100%; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); } /* IMAGEM DO ROADMAP (ajustada para ficar menor e elegante) */ .roadmap-image { max-width: 740px; /* <<--- TAMANHO IDEAL (ajustável) */ width: 100%; height: auto; border-radius: 12px; display: block; margin: 0 auto; background: #fff; /* sombra profissional (pode remover se quiser minimalista) */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10); } /* MOBILE (tela pequena) */ @media (max-width: 600px) { .roadmap-image { max-width: 95%; /* ocupa quase a tela, mas sem exagerar */ border-radius: 8px; } .learning-roadmap { padding: 20px 0; } } /* ============================ DIVISÃO ENTRE ROADMAP E BOOKLIST ============================ */ .books-divider { padding: 60px 0 30px; text-align: center; } .books-divider-inner { display: flex; align-items: center; justify-content: center; gap: 12px; } .chip-icon { font-size: 32px; } .books-main-title { font-size: 32px; font-weight: 600; margin: 0; color: #0A2540; /* mesmo tom do site */ } .books-main-subtitle { font-size: 16px; color: #555; margin-top: 8px; max-width: 700px; margin-left: auto; margin-right: auto; } /* Linha sutil opcional */ .books-divider::after { content: ""; display: block; width: 90%; max-width: 800px; height: 1px; background: rgba(0,0,0,0.08); margin: 25px auto 0; } /* ============================ provisorio index pagina misteriosa ============================ */ .mystery-section { position: relative; background: #0b0d11; color: #e4e4e4; text-align: center; font-family: 'Courier New', monospace; /* REMOVE qualquer height fixa */ min-height: auto; padding: 120px 20px 80px; display: flex; flex-direction: column; align-items: center; } .mystery-title { font-size: 2rem; max-width: 900px; margin-bottom: 20px; z-index: 2; } .mystery-sub { font-size: 1.1rem; opacity: 0.6; margin-bottom: 30px; z-index: 2; } /* link discreto */ .mystery-link { text-decoration: none; color: #00ffaa; font-size: 1.1rem; border-bottom: 1px solid #00ffaa; padding-bottom: 4px; opacity: 0.8; transition: 0.3s; z-index: 2; } .mystery-link:hover { opacity: 1; transform: scale(1.03); } /* animação sutil tipo bits */ .binary-animation { position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(0, 0, 0, 0) 2px 4px ); animation: scroll-bits 4s infinite linear alternate; opacity: 0.25; pointer-events: none; } @keyframes scroll-bits { 0% { transform: translateY(0); } 100% { transform: translateY(-25px); } } @media (max-width: 600px) { .mystery-section { padding: 90px 16px 60px; } .mystery-title { font-size: 1.55rem; } .mystery-sub { font-size: 1rem; } } /* CTA no final da página Books */ .books-newsletter-cta { text-align: center; margin: 60px 0 20px; font-family: "JetBrains Mono", monospace; } .cta-link { background: none; border: none; color: #42b36b; cursor: pointer; font-family: inherit; padding: 0; text-decoration: underline; } /* Modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(2,6,23,0.8); display: none; align-items: center; justify-content: center; z-index: 999; } .modal-overlay.open { display: flex; } .modal-box { background: #0e1117; border: 1px solid #334155; padding: 24px; max-width: 440px; width: 100%; position: relative; } .modal-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: #64748b; font-size: 18px; cursor: pointer; } /* ===== Newsletter Embedded Form ===== */ .embedded-form { max-width: 420px; padding: 20px; border: 1px solid #2a2a2a; background: #0e1117; color: #d1d5db; font-family: "JetBrains Mono", monospace; } .embedded-form h3 { color: #4ade80; font-size: 15px; margin-bottom: 12px; } .embedded-text { font-size: 13px; line-height: 1.5; margin-bottom: 16px; color: #cbd5f5; } .embedded-form label { display: block; font-size: 12px; margin-bottom: 4px; color: #94a3b8; } .embedded-form input { width: 100%; padding: 8px; background: #020617; border: 1px solid #334155; color: #e5e7eb; font-family: inherit; } .embedded-form input::placeholder { color: #64748b; } .embedded-form input:focus { outline: none; border-color: #4ade80; } .embedded-form button { margin-top: 14px; padding: 8px; width: 100%; background: #020617; border: 1px solid #4ade80; color: #4ade80; font-family: inherit; cursor: pointer; } .embedded-form button:hover { background: #022c22; } .embedded-footnote { margin-top: 10px; font-size: 11px; color: #64748b; } /* ===== melhor visualização ranking livros pagina books ===== */ @media (max-width: 600px) { .book-difficulty { flex-direction: column; align-items: center; /* centraliza tudo */ text-align: center; gap: 0.35rem; } .difficulty-label { margin-bottom: 0.1rem; } .difficulty-pills { margin-bottom: 0.2rem; } .difficulty-text { font-size: 0.78rem; line-height: 1.4; opacity: 0.85; max-width: 90%; /* evita texto muito largo */ } } .manifesto { margin-top: 2.5rem; max-width: 720px; opacity: 0.85; font-size: 0.95rem; line-height: 1.7; } .manifesto p { margin-bottom: 1rem; } .manifesto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1000px; margin: 3rem auto 2rem; } .manifesto-card { background: rgba(10, 37, 64, 0.04); border: 1px solid rgba(196, 169, 109, 0.25); border-radius: 16px; padding: 2rem 1.5rem; text-align: center; backdrop-filter: blur(4px); } .manifesto-card img { width: 56px; margin-bottom: 1rem; opacity: 0.9; } .manifesto-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; } .manifesto-card p { font-size: 0.85rem; line-height: 1.6; opacity: 0.85; } /* Mobile */ @media (max-width: 668px) { .manifesto-grid { grid-template-columns: 1fr; gap: 1.4rem; } } .manifesto-icon { display: flex; justify-content: center; align-items: center; height: 140px; /* controla o destaque */ margin-bottom: 1rem; } .manifesto-icon img { width: 256px; max-width: 256px; height: auto; } /* ===== footer mobile view ===== */ @media (max-width: 600px) { .footer-grid { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 0.75rem; } .footer-links { justify-content: center; } } /* =============================== DEEPNOTES – ESTRUTURA EDITORIAL ================================ */ .deepnotes-page { background: #f7f8fa; padding: 5rem 1rem 6rem; } /* Painel central visível */ .deepnotes-panel { max-width: 1100px; /* antes 900px */ margin: 0 auto; background: #ffffff; border-radius: 18px; padding: 3.5rem 4.5rem; box-shadow: 0 20px 40px rgba(0,0,0,0.06); } /* Cabeçalho */ .deepnotes-header h1 { font-size: 2.6rem; margin-bottom: 0.6rem; } .deepnotes-header p { max-width: 640px; color: var(--muted); line-height: 1.65; } /* Divisor */ .divider { border: none; border-top: 1px solid #e5e7eb; margin: 3rem 0; } /* Seção */ .deepnotes-section h2 { font-size: 1.4rem; margin-bottom: 1.8rem; } /* Lista de artigos */ .articles-list { display: flex; flex-direction: column; gap: 1.6rem; } /* Linha de artigo */ .article-row { background: linear-gradient( 135deg, rgba(10,37,64,0.04), rgba(196,169,109,0.06) ); border: 1px solid rgba(10,37,64,0.12); border-radius: 16px; padding: 2rem 2.4rem; transition: transform 0.15s ease, box-shadow 0.15s ease; } .article-row a { display: flex; justify-content: space-between; gap: 2rem; text-decoration: none; color: inherit; } .article-row:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.08); } .article-main h3 { font-size: 1.1rem; margin-bottom: 0.4rem; } .article-main p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; } /* Meta Container */ .article-meta { display: flex; /* Ativa o flexbox */ flex-wrap: wrap; /* Permite quebra de linha no mobile */ gap: 0.6rem; /* Espaçamento uniforme entre as tags */ align-items: center; /* Alinha verticalmente */ margin-bottom: 1.5rem; /* Espaço para o título abaixo */ } .article-meta span { background: rgba(10, 37, 64, 0.08); padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.85rem; /* Tamanho de fonte melhor para tags */ font-weight: 500; color: #0A2540; /* Cor do seu tema */ white-space: nowrap; /* Impede que o texto dentro da tag quebre */ } /* Estilo específico para o tempo de leitura */ .article-meta .read-time { background: none; color: #666; /* Cor muted */ padding-left: 0.5rem; font-weight: 400; } /* Mobile Adjustment */ @media (max-width: 700px) { .article-meta { gap: 0.5rem; /* Gap levemente menor no mobile */ } .article-meta span { font-size: 0.8rem; /* Fonte menor para telas pequenas */ padding: 0.3rem 0.6rem; } } /* Mobile */ @media (max-width: 700px) { .deepnotes-panel { padding: 2.5rem 2rem; } .article-row a { flex-direction: column; } } .deepnotes-divider-image.img { margin: 1.6rem 0 1.8rem; height: 120px; border-radius: 12px; background-image: linear-gradient( rgba(10,37,64,0.55), rgba(10,37,64,0.55) ), url("img/deepnotes.png"); background-size: cover; background-position: center; } .article-row a { display: flex; gap: 1.8rem; align-items: flex-start; } /* Thumbnail */ .article-thumb { width: 120px; height: 120px; flex-shrink: 0; border-radius: 12px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(196,169,109,0.35), 0 4px 10px rgba(0,0,0,0.12); } .deepnotes-hero-image { position: relative; height: 220px; /* faixa mais alta, proposital */ border-radius: 18px; overflow: hidden; background-image: url("img/deepnotes-notes.png"); background-size: cover; background-position: top center; background-repeat: no-repeat; box-shadow: 0 18px 36px rgba(0,0,0,0.18); margin-bottom: 3.5rem; position: relative; z-index: 1; /* 🔒 fica abaixo do menu */ } .deepnotes-hero-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 3rem 4rem; background: linear-gradient( to right, rgba(10,37,64,0.88), rgba(10,37,64,0.55), rgba(10,37,64,0.25) ); } .deepnotes-hero-overlay h1 { font-size: 2.8rem; margin-bottom: 0.6rem; color: #ffffff; } .deepnotes-hero-overlay p { max-width: 620px; font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,0.85); } @media (max-width: 700px) { .deepnotes-hero-image { height: 220px; } .deepnotes-hero-overlay { padding: 2rem; } .deepnotes-hero-overlay h1 { font-size: 2.1rem; } } @media (max-width: 600px) { .article-row a { flex-direction: column; /* empilha */ align-items: flex-start; /* texto continua alinhado à esquerda */ } .article-thumb { align-self: center; /* 🔑 centraliza só a imagem */ margin-bottom: 1rem; /* espaço entre imagem e título */ } } .section-subtitle { margin-top: 0.4rem; margin-bottom: 1.8rem; text-align: left; /* 🔑 força alinhamento */ margin-left: 0; font-size: 0.95rem; line-height: 1.6; color: var(--muted); max-width: 720px; } /* ================= ARTICLE PAGE ================= */ .article-container { max-width: 820px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; background: #fff; } .article-page { padding-top: 100px; /* 🔑 reserva espaço para o menu sticky */ } .article-cover { width: 100%; height: 260px; /* 🔑 isso resolve o problema */ border-radius: 14px; margin-bottom: 2.2rem; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 12px 30px rgba(0,0,0,0.12); } .article-header { margin-bottom: 2.5rem; } .article-tags { font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem; } .article-header h1 { font-size: 2rem; line-height: 1.25; margin-bottom: 0.6rem; } .article-subtitle { font-size: 1.05rem; margin-bottom: 1rem; } .article-info { font-size: 0.8rem; display: flex; gap: 0.4rem; } .article-content h2 { margin-top: 2.5rem; margin-bottom: 0.8rem; } .article-content p { line-height: 1.7; margin-bottom: 1rem; } .article-content ol { padding-left: 1.2rem; margin-bottom: 1.5rem; } .article-figure { margin: 2rem 0; text-align: center; /* garante alinhamento do caption também */ } .article-figure img { width: 70%; max-width: 640px; /* limite elegante no desktop */ display: block; margin: 0 auto; border-radius: 15px; } .article-figure figcaption { font-size: 0.8rem; color: var(--muted); margin-top: 0.4rem; text-align: center; /* 🔑 centraliza o texto */ } @media (max-width: 768px) { .article-figure img { width: 100%; /* ocupa a largura do container */ max-width: 100%; } } .article-references, .article-author { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e5e7eb; } .article-references ol { padding-left: 1.2rem; } .article-author p { max-width: 700px; } .article-header { margin-bottom: 2.5rem; } .article-tags { display: flex; gap: 0.6rem; font-size: 0.75rem; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; } .article-header h1 { font-size: 2rem; line-height: 1.25; margin-bottom: 0.6rem; } .article-subtitle { font-size: 1.05rem; color: var(--muted); margin-bottom: 1rem; } .article-info { font-size: 0.8rem; color: var(--muted); display: flex; gap: 0.4rem; } .article-author { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e5e7eb; } .author-box { display: flex; gap: 1.4rem; align-items: center; } .author-photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(10,37,64,0.25); } .author-bio h3 { font-size: 1rem; margin-bottom: 0.3rem; } .author-bio p { font-size: 0.9rem; line-height: 1.55; color: var(--text); max-width: 520px; } @media (max-width: 600px) { .author-box { flex-direction: column; text-align: center; } .author-photo { width: 76px; height: 76px; } } /* formato da enumeração de itens artigo */ .bold-numbers { list-style: none; counter-reset: item; padding-left: 0; margin-left: 0; } .bold-numbers li { counter-increment: item; margin-bottom: 1rem; /* 🔑 espaço entre os itens */ padding-left: 2rem; /* 🔑 espaço entre número e texto */ position: relative; line-height: 1.6; /* melhora leitura técnica */ } .bold-numbers li::before { content: counter(item) "."; font-weight: bold; position: absolute; left: 0; } /* ===== Author Notes ===== */ .author-note { position: relative; display: inline-block; cursor: pointer; color: var(--gold); font-weight: 600; } .author-note .note-content { position: absolute; left: 50%; transform: translateX(-50%); width: 260px; padding: 0.8rem 0.9rem; color: #fff; font-size: 0.78rem; line-height: 1.45; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.25); opacity: 0; visibility: hidden; z-index: 9999; background: linear-gradient(180deg, #0A2540, #071b2f); border: 1px solid rgba(196,169,109,0.25); } .note-header { display: block; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: #C4A96D; margin-bottom: 0.4rem; } .note-text { display: block; } .note-footer { display: block; text-align: right; margin-top: 0.5rem; margin-top: 0.4rem; } .note-footer::after { content: "DeepDive Embedded"; font-size: 0.6rem; letter-spacing: 0.04em; color: rgba(196, 169, 109, 0.55); /* gold suave */ } /* desktop position */ @media (min-width: 768px) { .author-note .note-content { bottom: 140%; } } /* desktop hover */ @media (hover: hover) and (pointer: fine) { .author-note:hover .note-content { opacity: 1; visibility: visible; } } /* mobile safe positioning */ @media (max-width: 767px) { .author-note .note-content { top: 130%; bottom: auto; left: 40vw; transform: translateX(-50%); max-width: calc(100vw - 2rem); } } .author-note.active .note-content { opacity: 1; visibility: visible; } .deepnotes-panel, .article-container, .article-content { overflow: visible !important; } /* ===== Code Blocks ===== */ .code-block { background: #0f172a; /* navy escuro */ color: #e5e7eb; padding: 1rem 1.2rem; border-radius: 10px; overflow-x: auto; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; line-height: 1.5; margin: 1.2rem 0; box-shadow: inset 0 0 0 1px rgba(196,169,109,0.15); } .code-block code { display: block; white-space: pre; } .code-caption { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.3rem; } /* ===== Light Syntax Highlight ===== */ .code-block .kw { color: #C4A96D; /* gold */ } .code-block .type { color: #7dd3fc; /* azul suave */ } .code-block .num { color: #fbbf24; /* âmbar */ } .code-block .comment { color: #94a3b8; font-style: italic; } /* ===== Code Explanation ===== */ .code-explain { font-size: 0.78rem; color: var(--text); margin: 0.8rem 0 1.5rem; padding-left: 1.2rem; } .code-explain li { margin-bottom: 0.4rem; } .code-explain code { font-family: "JetBrains Mono", monospace; font-size: 0.75rem; background: rgba(0,0,0,0.04); padding: 0.1rem 0.3rem; border-radius: 4px; } .flow-block { background: #f5f7fa; border-radius: 12px; padding: 0.9rem 1rem; margin: 1.2rem 0; border: 1px solid rgba(0,0,0,0.06); } .flow-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.4rem; } .flow-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.85rem; } .flow-line code { font-size: 0.75rem; } .arrow { opacity: 0.5; } .flow-caption { font-size: 0.72rem; color: var(--muted); margin-top: 0.4rem; } .article-figure.diagram img { max-width: 40%; height: auto; margin: 0 auto; display: block; } /* mobile */ @media (max-width: 768px) { .article-figure.diagram img { max-width: 95%; } } /* ===== Inline code (technical highlight) ===== */ .article-content code { background-color: #f3f4f6; /* cinza claro */ color: #374151; /* cinza escuro */ padding: 0.1em 0.35em; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 1em; /* 🔑 mantém o tamanho do texto */ line-height: 1.4; } .article-content pre code { background: none; padding: 0; font-size: 0.85rem; /* blocos podem ser menores */ } /* ===== Code block base ===== */ .code-block { background: #0b1f33; /* navy escuro */ border-radius: 14px; padding: 1rem 1.2rem; overflow-x: auto; } .code-block code { background: none; /* 🔑 remove o cinza */ color: #e5e7eb; /* texto base claro */ font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.6; } /* ===== Diagram / ASCII blocks ===== */ .diagram-block { white-space: pre-wrap; /* 🔑 permite quebra */ word-break: break-word; /* 🔑 quebra se necessário */ text-align: center; } /* mobile refinamento */ @media (max-width: 768px) { .diagram-block { font-size: 0.75rem; padding: 0.8rem; } } /* ===== Fragmentation diagram only ===== */ .article-figure.diagram-fragmentation img { width: 70%; /* 🔑 isso é o que faltava */ max-width: 900px; /* ajuste visual (800–1000px funciona bem) */ height: auto; margin: 0 auto; } @media (max-width: 768px) { .article-figure.diagram-fragmentation img { width: 100%; max-width: 100%; } } .article-code-link { margin-top: 30px; padding: 20px; background-color: #f8f9fa; border-left: 4px solid #0A2540; /* Cor navy do seu logo */ border-radius: 4px; } .github-card a { color: #0A2540; text-decoration: none; font-family: 'JetBrains Mono', monospace; display: inline-block; margin-top: 10px; } .github-card a:hover { text-decoration: underline; } .article-next-steps { margin: 4rem 0; padding: 2rem; background: #fdfaf3; border-left: 4px solid #C4A96D; border-radius: 6px; /* 🔒 isolamento */ box-sizing: border-box; max-width: 100%; } .article-next-steps h2 { margin-top: 0; } .article-cta-box { margin-top: 1.5rem; } .article-cta-link { font-weight: 600; text-decoration: none; color: var(--navy); } .article-cta-link:hover { text-decoration: underline; } .experiment-block ul { list-style: none; padding-left: 0; } .experiment-block li { position: relative; padding-left: 1.2rem; margin-bottom: 0.5rem; } .experiment-block li::before { content: "–"; position: absolute; left: 0; color: var(--gold); /* ou outra cor do seu tema */ font-weight: bold; } /* ===== Language Switch (DeepNotes) ===== */ .language-switch { display: flex; justify-content: flex-end; /* 🔑 alinha à direita */ margin: 0.5rem 0 1.5rem 0; } .lang-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); text-decoration: none; opacity: 0.85; } .lang-link:hover { opacity: 1; } .lang-link img { width: 35px; /* 🔑 controla tamanho da bandeira */ height: auto; border-radius: 3px; /* opcional, fica elegante */ } /* ===== Serial Demo ===== */ .serial-demo { margin: 2.5rem 0; display: grid; gap: 2rem; } .terminal-block { background: #0b0e14; border-radius: 12px; padding: 1rem; box-shadow: inset 0 0 0 1px #1f2933; } .terminal-title { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; margin-bottom: 0.6rem; letter-spacing: 0.3px; } .terminal-title.ok { color: #6ee7b7; /* verde */ } .terminal-title.warn { color: #fbbf24; /* amarelo */ } .terminal { font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; color: #e5e7eb; background: #020617; padding: 1rem; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; line-height: 1.4; } /* ============================== ABOUT PAGE — DeepDive Embedded Editorial / Engineering Style ============================== */ .about-page { max-width: 1180px; margin: 0 auto; padding: 5rem 2rem; font-family: "Poppins", system-ui, sans-serif; color: #1c1c1c; } /* Card principal */ .about-hero { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 4rem; align-items: center; background: #f6f7f9; padding: 4.5rem; border-radius: 26px; box-shadow: 0 35px 70px rgba(0, 0, 0, 0.06); } /* ============================== TEXTO ============================== */ .about-text h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.6px; margin-bottom: 2.2rem; } .about-text p { font-size: 1.05rem; line-height: 1.85; margin-bottom: 1.5rem; color: #2f2f2f; } .about-text strong { font-weight: 600; color: #000; } /* ============================== CONTATO ============================== */ .about-contact { margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(0, 0, 0, 0.12); font-size: 0.95rem; } .about-contact a { color: #0a4cff; text-decoration: none; font-weight: 500; } .about-contact a:hover { text-decoration: underline; } /* ============================== IMAGEM ============================== */ .about-image { display: flex; justify-content: center; align-items: center; } .about-image img { width: 100%; max-width: 380px; border-radius: 22px; object-fit: cover; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.18); } /* ============================== RESPONSIVO ============================== */ @media (max-width: 980px) { .about-hero { grid-template-columns: 1fr; padding: 3.2rem; } .about-image { margin-top: 3rem; } .about-image img { max-width: 320px; } } @media (max-width: 520px) { .about-page { padding: 3rem 1.4rem; } .about-hero { padding: 2.4rem 2rem; } .about-text h1 { font-size: 2rem; } .about-text p { font-size: 0.98rem; } }