/* ========================================================================= Lupeiros — folha de estilo Temas (claro/escuro) e ajuste desktop/mobile via custom properties. - Tema: [data-theme="dark"] no elemento ========================================================================= */ /* ---------- Tokens: tema claro (padrão) ---------- */ :root { --font-title: 'Barlow Semi Condensed', system-ui, -apple-system, sans-serif; --font-body: 'Barlow', system-ui, -apple-system, sans-serif; --pad: 56px; --bg: #FFFBF2; --fg: #1A1A1A; --muted: #5A5648; --card-bg: #FFFFFF; --border: #E4DCC4; --header-bg: #C2CF3A; --header-fg: #000000; --accent: #DAEB05; --cta-bg: #1A1A1A; --cta-fg: #FFFFFF; --pill-active-bg: #1A1A1A; --pill-active-fg: #FFFFFF; --pill-fg: #1A1A1A; --cover-solid-bg: #1A1A1A; --hero-bg: #FFF6DE; --ef1-solid: #E8622C; --ef1-bg: #FFE4D2; --ef1-text: #7A2E0C; --ef1-band-bg: #E8622C; --ef1-band-ink: #FFFFFF; --ef2-solid: #2E9E5B; --ef2-bg: #DEF3E4; --ef2-text: #1B5C34; --ef2-band-bg: #2E9E5B; --ef2-band-ink: #FFFFFF; --em-solid: #3457D5; --em-bg: #E3E8FB; --em-text: #1E3080; --em-band-bg: #3457D5; --em-band-ink: #FFFFFF; } /* ---------- Tokens: tema escuro ---------- */ [data-theme="dark"] { --bg: #1E1E1C; --fg: #F2F0EA; --muted: #B4B0A6; --card-bg: #2A2A27; --border: #45443F; --header-bg: #26261F; --header-fg: #DAEB05; --accent: #DAEB05; --cta-bg: #DAEB05; --cta-fg: #1A1A1A; --pill-active-bg: #DAEB05; --pill-active-fg: #1A1A1A; --pill-fg: #F2F0EA; --cover-solid-bg: #33332E; --hero-bg: #262622; --ef1-solid: #F0855A; --ef1-bg: #3A2419; --ef1-text: #FFDCC8; --ef1-band-bg: #8F3A14; --ef1-band-ink: #FFFFFF; --ef2-solid: #5FC98A; --ef2-bg: #1B3327; --ef2-text: #C9EFD7; --ef2-band-bg: #1B5C34; --ef2-band-ink: #FFFFFF; --em-solid: #7B95F0; --em-bg: #22284A; --em-text: #D3DBFF; --em-band-bg: #2A3C8F; --em-band-ink: #FFFFFF; } /* ---------- Cores por trilha: expõe --track-* conforme [data-track] ---------- */ [data-track="ef1"] { --track-solid: var(--ef1-solid); --track-bg: var(--ef1-bg); --track-text: var(--ef1-text); --track-band-bg: var(--ef1-band-bg); --track-band-ink: var(--ef1-band-ink); } [data-track="ef2"] { --track-solid: var(--ef2-solid); --track-bg: var(--ef2-bg); --track-text: var(--ef2-text); --track-band-bg: var(--ef2-band-bg); --track-band-ink: var(--ef2-band-ink); } [data-track="em"] { --track-solid: var(--em-solid); --track-bg: var(--em-bg); --track-text: var(--em-text); --track-band-bg: var(--em-band-bg); --track-band-ink: var(--em-band-ink); } /* ---------- Base ---------- */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); } ::selection { background: #DAEB05; color: #000; } @keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } } /* ---------- Layout raiz ---------- */ #app { background: var(--bg); min-height: 100vh; width: 100%; display: flex; justify-content: center; } .frame { width: 100%; display: flex; justify-content: center; } .page { width: 100%; max-width: 1280px; background: var(--bg); } /* ---------- Troca de "páginas" ---------- */ .view { display: none; } .view.is-active { display: block; } /* ---------- Cabeçalho ---------- */ .site-header { background: var(--header-bg); color: var(--header-fg); padding: 20px var(--pad); } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; align-items: center; gap: 10px; cursor: pointer; } .logo { font-family: var(--font-title); font-weight: 800; font-size: 26px; color: var(--header-fg); } .nav-desktop { display: flex; align-items: center; gap: 28px; } .nav-link { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--header-fg); text-decoration: none; } .header-actions { display: flex; align-items: center; gap: 12px; } .theme-toggle { font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--header-fg); background: transparent; color: var(--header-fg); cursor: pointer; } .hamburger { display: none; font-family: var(--font-body); font-size: 20px; background: transparent; border: none; color: var(--header-fg); cursor: pointer; line-height: 1; } .nav-mobile { display: none; flex-direction: column; gap: 14px; margin-top: 18px; } .nav-mobile.is-open { display: flex; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 72px var(--pad) 56px; background: var(--hero-bg); overflow: hidden; } .shapes { position: absolute; inset: 0; pointer-events: none; } .shape { position: absolute; opacity: 0.5; animation: floaty 6s ease-in-out infinite; pointer-events: none; } [data-theme="dark"] .shape { opacity: 0.35; } .hero-content { position: relative; max-width: 760px; } .hero-title { font-family: var(--font-title); font-weight: 800; font-size: 48px; line-height: 1.1; color: var(--fg); margin: 0 0 20px; } .hero-para { font-family: var(--font-body); font-size: 18px; line-height: 1.5; color: var(--muted); margin: 0 0 32px; max-width: 600px; } .search-wrap { display: flex; gap: 10px; } .search-input { font-family: var(--font-body); font-size: 15px; padding: 14px 18px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--card-bg); color: var(--fg); flex: 1; } .search-btn { font-family: var(--font-body); font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 999px; border: none; background: var(--cta-bg); color: var(--cta-fg); cursor: pointer; } /* ---------- Títulos de seção ---------- */ .section-title { font-family: var(--font-title); font-weight: 700; font-size: 26px; color: var(--fg); margin: 0 0 20px; } /* ---------- Seção "Escolha uma trilha" ---------- */ .tracks-section { padding: 56px var(--pad) 16px; } .tracks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .track-card { background: var(--track-bg); border: 2px solid var(--track-solid); border-radius: 18px; padding: 30px; cursor: pointer; display: flex; flex-direction: column; gap: 12px; position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; } .track-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.14); box-shadow: 0 18px 30px color-mix(in srgb, var(--track-solid) 20%, transparent); } .track-card-topper { position: absolute; top: -46px; right: 20px; height: 80px; width: auto; pointer-events: none; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.14)); } .track-card .badge { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--track-solid); } .track-card .title { font-family: var(--font-title); font-weight: 800; font-size: 28px; color: var(--track-text); margin: 0; } .track-card .tagline { font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--track-text); margin: 0; opacity: 0.85; } .track-card .link { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--track-solid); margin-top: 6px; } /* ---------- Seção "Todos os materiais" (filtros) ---------- */ .filter-section { position: relative; overflow: hidden; padding: 56px var(--pad) 0; background: var(--hero-bg); } .filter-row { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; margin-bottom: 36px; } .pill { font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--border); background: transparent; color: var(--pill-fg); cursor: pointer; white-space: nowrap; } .pill.is-active { border-color: transparent; background: var(--pill-active-bg); color: var(--pill-active-fg); } /* ---------- Grade de materiais ---------- */ .grid-section { position: relative; overflow: hidden; padding: 0 var(--pad) 80px; background: var(--hero-bg); } .materials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .material-card { background: var(--track-bg); border: 2px solid var(--track-solid); border-radius: 18px; padding: 26px; cursor: pointer; display: flex; flex-direction: column; gap: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .material-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.14); box-shadow: 0 18px 30px color-mix(in srgb, var(--track-solid) 20%, transparent); } .material-card .badge { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--track-solid); } .material-card .title { font-family: var(--font-title); font-weight: 800; font-size: 20px; color: var(--track-text); margin: 0; line-height: 1.2; } .material-card .subject { font-family: var(--font-body); font-size: 13px; color: var(--track-text); opacity: 0.75; } .material-card .link { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--track-solid); margin-top: 6px; } /* ---------- Faixa de volume / nível ---------- */ .level-band { background: var(--track-band-bg); color: var(--track-band-ink); padding: 48px var(--pad) 40px; display: flex; flex-direction: column; gap: 10px; } /* Cabeçalho do nível: texto + ilustração lado a lado (mesma proporção do Hero) */ [data-view="level"] .level-band-grid { display: grid; grid-template-columns: 1.2fr minmax(0, 0.8fr); align-items: center; gap: 40px; position: relative; z-index: 1; } [data-view="level"] .level-band-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; } [data-view="level"] .level-band-media { display: flex; justify-content: center; min-width: 0; } [data-view="level"] .level-band-illustration { width: 100%; max-width: 420px; height: auto; --r: -3deg; animation: floaty 6s ease-in-out infinite; } .back-link-light { align-self: flex-start; font-family: var(--font-body); font-weight: 600; font-size: 14px; background: none; border: none; color: var(--track-band-ink); cursor: pointer; padding: 0; opacity: 0.85; margin-bottom: 6px; } .level-kicker { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; } .level-title { font-family: var(--font-title); font-weight: 800; font-size: 44px; margin: 0; } .level-intro { font-family: var(--font-body); font-size: 16px; line-height: 1.5; max-width: 680px; margin: 6px 0 0; opacity: 0.95; } /* ---------- Módulos (acordeão) ---------- */ .modules-section { padding: 40px var(--pad) 80px; } .module-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 16px; } .module-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px; cursor: pointer; } .module-number { font-family: var(--font-title); font-weight: 700; font-size: 13px; color: var(--track-solid); letter-spacing: 0.08em; } .module-title { font-family: var(--font-title); font-weight: 700; font-size: 24px; color: var(--fg); margin: 4px 0 6px; } .module-question { font-family: var(--font-body); font-size: 15px; color: var(--muted); margin: 0; } .module-chevron { font-family: var(--font-body); font-size: 22px; color: var(--track-solid); flex-shrink: 0; } .module-trails { padding: 0 28px 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } /* ---------- Bloco "em breve": vilão + frase ---------- */ .module-soon { padding: 0 28px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .module-soon-img { width: 160px; max-width: 60%; height: auto; } .module-soon-line { font-family: var(--font-body); font-size: 15px; color: var(--muted); max-width: 420px; margin: 0; } /* ---------- Card de trilha (dentro do módulo) ---------- */ .trail-card { background: var(--track-bg); border: 2px solid var(--track-solid); border-radius: 14px; padding: 20px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .trail-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 26px rgba(0, 0, 0, 0.14); box-shadow: 0 16px 26px color-mix(in srgb, var(--track-solid) 20%, transparent); } .trail-card .title { font-family: var(--font-title); font-weight: 800; font-size: 22px; color: var(--track-text); margin: 0; } .trail-card .desc { font-family: var(--font-body); font-size: 14px; line-height: 1.45; color: var(--track-text); opacity: 0.85; margin: 0; } .trail-card .link { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--track-solid); margin-top: 2px; } /* ---------- Página da trilha ---------- */ .trail-block { padding: 44px var(--pad); border-bottom: 1px solid var(--border); } .trail-block-alt { background: var(--hero-bg); } .trail-last-block { border-bottom: none; padding-bottom: 80px; } .trail-kicker { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--track-solid); } .trail-section-title { font-family: var(--font-title); font-weight: 800; font-size: 30px; color: var(--fg); margin: 8px 0 14px; } .trail-para { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 660px; } .trail-cta { margin-top: 22px; font-family: var(--font-body); font-weight: 700; font-size: 16px; padding: 16px 32px; border-radius: 999px; border: none; background: var(--cta-bg); color: var(--cta-fg); cursor: pointer; } .trail-cta:hover { box-shadow: inset 0 -4px 0 0 #DAEB05; } .trail-link-btn { margin-top: 22px; display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 16px; padding: 15px 30px; border-radius: 999px; border: 2px solid var(--track-solid); background: transparent; color: var(--track-solid); cursor: pointer; text-decoration: none; } .btn-soon { background: #DAEB05; color: #000; border-color: transparent; opacity: 0.55; pointer-events: none; cursor: not-allowed; box-shadow: none; } .trail-cta.btn-soon:hover, .trail-link-btn.btn-soon:hover { background: #DAEB05; color: #000; border-color: transparent; box-shadow: none; cursor: not-allowed; } .trail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .other-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-radius: 14px; background: var(--card-bg); border: 1px solid var(--border); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .other-item:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14); } .other-item.is-soon { background: transparent; opacity: 0.55; cursor: not-allowed; } .other-item.is-soon:hover { transform: none; box-shadow: none; } .other-item .label { font-family: var(--font-title); font-weight: 700; font-size: 18px; color: var(--fg); } .other-item .action { flex-shrink: 0; font-family: var(--font-body); font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 999px; border: none; background: var(--cta-bg); color: var(--cta-fg); cursor: pointer; } .other-item.is-soon .action { background: #DAEB05; color: #000; cursor: not-allowed; } /* ---------- Detalhe do material ---------- */ .detail-section { padding: 48px var(--pad) 80px; } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 24px; align-items: start; } .detail-cover { width: 100%; aspect-ratio: 3 / 4; background: var(--cover-solid-bg); display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border: 1px solid var(--border); border-radius: 10px; } .cover-kicker { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #C7C7C7; } .cover-line { width: 34px; height: 3px; background: #DAEB05; margin-bottom: 10px; } .cover-editoria { font-family: var(--font-title); font-weight: 700; font-size: 20px; color: #FFFFFF; margin: 0; } .tag { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; color: #000000; background: #DAEB05; border: none; border-radius: 999px; padding: 5px 12px; } .detail-title { font-family: var(--font-title); font-weight: 700; font-size: 38px; color: var(--fg); margin: 14px 0 10px; } .muted-small { font-family: var(--font-body); font-size: 13px; color: var(--muted); } .detail-para { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--muted); margin: 16px 0 28px; max-width: 560px; } .download-btn-large { font-family: var(--font-body); font-weight: 700; font-size: 16px; padding: 16px 32px; border-radius: 999px; border: none; background: var(--cta-bg); color: var(--cta-fg); cursor: pointer; } .download-btn-large:hover { box-shadow: inset 0 -4px 0 0 #DAEB05; } .back-link { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 14px; background: none; border: none; color: var(--muted); cursor: pointer; padding: 0; } /* ---------- Sobre ---------- */ .about-section { padding: 48px var(--pad) 80px; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .about-image { width: 100%; height: auto; filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.05)); } .about-title { font-family: var(--font-title); font-weight: 700; font-size: 42px; color: var(--fg); margin: 20px 0; } /* ---------- Personagens (Hero e Decorativos) ---------- */ /* Ajustes para a página inicial */ .hero-container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1rem; margin-bottom: 2rem; } .hero-logo { max-width: 100%; width: 550px; height: auto; margin-bottom: 1rem; animation: floatIn 0.8s ease-out forwards; } .hero-grid-layout { display: grid; grid-template-columns: 1.2fr minmax(0, 0.8fr); align-items: center; gap: 40px; position: relative; z-index: 2; } .hero-image-wrap { display: flex; justify-content: center; align-items: center; min-width: 0; } .hero-mascot-scene { display: flex; justify-content: center; width: 100%; max-width: 480px; } .hero-mascot-cluster { display: flex; align-items: flex-end; justify-content: center; gap: 12px; width: 100%; } .hero-mascot { height: 130px; /* Trava a altura para alinhá-los perfeitamente */ width: auto; opacity: 0; filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.08)); } .hero-mascot--l { --r: -3deg; animation: hero-entrance 0.6s ease-out 0s forwards, floaty 6s ease-in-out 0.6s infinite; } .hero-mascot--u { --r: 2deg; animation: hero-entrance 0.6s ease-out 0.12s forwards, floaty 6s ease-in-out 0.72s infinite; } .hero-mascot--p { --r: -2deg; animation: hero-entrance 0.6s ease-out 0.24s forwards, floaty 6s ease-in-out 0.84s infinite; } .hero-mascot--a { --r: 3deg; animation: hero-entrance 0.6s ease-out 0.36s forwards, floaty 6s ease-in-out 0.96s infinite; } .hero-mascot-wordmark { width: 340px; max-width: 90%; height: auto; margin: -10px auto 0; display: block; } @keyframes hero-entrance { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes floatIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Logo Lupeiros escrito no head e no footer */ .brand-logo-img { height: 60px; width: auto; display: block; } .footer-logo-img { height: 60px; width: auto; display: block; } /* ---------- Marcas d'água (Texturas de fundo) ---------- */ .watermark-bg { position: absolute; bottom: -5%; right: -5%; height: 480px; width: auto; opacity: 0.04; /* Transparência ultra leve */ pointer-events: none; /* Garante que não bloqueie cliques em botões */ z-index: 0; } [data-track="em"] .watermark-bg { right: -14%; bottom: -2%; height: 420px; } /* Mascote do nível: marca d'água abaixo do acordeão de trilhas. Aparece SEMPRE INTEIRA — offsets positivos (nada encostando/passando da borda) + max-height/max-width relativos à altura da própria página do volume, então nenhuma parte é cortada, seja qual for o tamanho da lista de módulos acima. Vale igual para EF1, EF2 e Ensino Médio. Escopo [data-view="level"] p/ vencer [data-track="em"] .watermark-bg. */ [data-view="level"] .watermark-bg--level { top: auto; bottom: 16px; left: auto; right: 16px; height: auto; width: auto; max-height: min(340px, calc(100% - 40px)); max-width: calc(100% - 32px); opacity: 0.05; } /* Marca d'água pequena da Seção 1 "Contexto" da trilha */ .trail-block .watermark-bg--small { top: 50%; right: 20px; bottom: auto; left: auto; transform: translateY(-50%); height: auto; width: auto; max-height: calc(100% - 32px); max-width: 38%; opacity: 0.08; } /* Marca d'água grande do rodapé da página de trilha (aparece sobre a Seção 4 "Outros materiais")*/ [data-view="trail"] [data-trail-watermark] { top: auto; bottom: 16px; left: auto; right: 16px; height: auto; width: auto; max-height: min(440px, calc(100% - 40px)); max-width: calc(100% - 32px); } /* Ajustes só das 10 trilhas do Ensino Médio · módulo "2: Fato, boato e negacionismo" (data-block="1") */ [data-view="trail"][data-track="em"][data-block="1"] .trail-block .watermark-bg--small { max-width: 18%; right: 6%; } /* No mobile essas 10 trilhas seguem o mesmo tamanho/posição padronizados acima — sem exceção — por isso as regras abaixo, mais específicas que as de desktop logo acima, replicam aqui os mesmos valores do modelo. */ [data-view="trail"][data-track="em"][data-block="1"] [data-trail-watermark] { max-height: min(520px, calc(100% - 32px)); right: -6%; bottom: 24px; } /* ---------- Rodapé ---------- */ .site-footer { padding: 40px var(--pad); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .watermark-bg--materials { height: 420px; right: -5%; bottom: -8%; /* Grupo LUPA de costas: nítido o bastante pra reconhecer os personagens, mas ainda atrás dos cards de material. */ opacity: 0.13; } /* Estado de busca sem resultado (vilão f_lupa ocupando a grade): esconde a marca d'água de fundo pra não sobrepor as duas imagens. Ligado/desligado via classList.toggle em renderMaterials(). */ .watermark-bg--materials.is-hidden { display: none; } /* Jornal no canto direito da seção "Todos os materiais", na altura da linha de filtros (Todos / Ensino Fundamental 1 / …) e alinhado na vertical com a coluna do bloco verde "Ensino Fundamental 2 · Checagem de fatos na sala de aula" */ .materials-corner-img { position: absolute; top: 88px; right: calc(var(--pad) + 40px); height: 104px; width: auto; pointer-events: none; z-index: 2; } /* ========================================================================== Responsividade Nativa (Mobile) ========================================================================== */ @media (max-width: 768px) { :root { --pad: 20px; } /* Remove a "moldura" do simulador e deixa 100% fluido */ .frame { padding: 0; } .page { width: 100%; max-width: 100%; border-radius: 0; box-shadow: none; } /* Menu e Cabeçalho */ .nav-desktop { display: none; } .hamburger { display: block; } .logo { font-size: 22px; } /* Hero */ .hero { padding: 36px var(--pad) 28px; } .hero-title { font-size: 32px; } .hero-para { font-size: 16px; } .search-wrap { flex-direction: column; } .hero-grid-layout { grid-template-columns: 1fr; gap: 24px; } .hero-logo { width: 320px; } .hero-mascot { height: 90px; } .hero-mascot-wordmark { width: 220px; } /* Estrutura Geral */ .section-title { font-size: 22px; } /* Trilhas Home */ .tracks-section { padding: 36px var(--pad) 8px; } .tracks-grid { grid-template-columns: 1fr; gap: 34px; } .track-card-topper { top: -26px; right: 14px; height: 56px; } .track-card { padding: 24px; } /* Filtros e Grade */ .filter-section { padding: 36px var(--pad) 0; } .filter-row { margin-bottom: 24px; } .grid-section { padding: 0 var(--pad) 48px; } .materials-grid { grid-template-columns: 1fr; gap: 20px; } .material-card { padding: 22px; } /* Níveis e Módulos */ .level-band { padding: 28px var(--pad); } [data-view="level"] .level-band-grid { grid-template-columns: 1fr; gap: 24px; } .level-title { font-size: 32px; } .modules-section { padding: 24px var(--pad) 80px; } .module-header { padding: 18px; } .module-title { font-size: 20px; } .module-trails { padding: 0 18px 18px; grid-template-columns: 1fr; } .module-soon { padding: 0 18px 22px; } /* Visualização da Trilha */ .trail-card { padding: 18px; } .trail-card .title { font-size: 20px; } .trail-block { padding: 28px var(--pad); } .trail-section-title { font-size: 24px; } .trail-grid { grid-template-columns: 1fr; gap: 18px; } /* Detalhes e Sobre */ .detail-section { padding: 28px var(--pad) 80px; } .detail-grid { grid-template-columns: 1fr; gap: 24px; } .detail-title { font-size: 28px; } .about-section { padding: 28px var(--pad) 80px; } .about-title { font-size: 30px; } .about-grid { grid-template-columns: 1fr; gap: 32px; } /* Marcas d'água e Imagens Absolutas */ .watermark-bg { height: 280px; bottom: -10%; right: -15%; } [data-view="level"] .watermark-bg--level { bottom: 12px; right: 12px; max-height: min(200px, calc(100% - 32px)); max-width: calc(100% - 24px); } .trail-block .watermark-bg--small { top: 50%; right: -5%; bottom: auto; transform: translateY(-50%); width: 260px; height: auto; max-height: none; max-width: none; } [data-view="trail"] [data-trail-watermark] { bottom: 12px; right: -5%; width: 330px; height: auto; max-height: none; max-width: none; } [data-view="trail"][data-track="em"] .trail-block .watermark-bg--small { width: 360px !important; right: -60px !important; height: auto !important; max-width: none !important; } [data-view="trail"][data-track="ef2"] .trail-block .watermark-bg--small { width: 340px !important; right: -15px !important; height: auto !important; max-width: none !important; } [data-view="trail"][data-track="ef2"] [data-trail-watermark] { width: 240px !important; height: auto !important; max-width: none !important; } [data-view="trail"][data-track="ef1"] .trail-block .watermark-bg--small { width: 200px; right: 12px; } .watermark-bg--materials { height: 220px; right: 12px; bottom: 12px; } .materials-corner-img { top: 26px; right: var(--pad); height: 46px; } /* Footer */ .site-footer { padding: 28px var(--pad); } }