/* ===================================================================== ACADEMIA APLOUS, TEMA CLARO Linguagem visual B da marca: luz natural de manhã, papel, mel, âmbar. Aplicado por . Carregar DEPOIS de aplous.css. Princípio: a página é a parede clara de uma sala de leitura. As artes escuras dos cursos ficam emolduradas como quadros nessa parede, em vez de virarem buracos pretos no meio do papel. ===================================================================== */ .tema-claro { --bg: #f8f2e7; --bg-2: #f1e8d9; --bg-3: #e9dcc7; --ink: #241d15; --ink-soft: #4f4436; --ink-mute: #8b7d69; --gold: #a5711c; --gold-soft: #8f6017; --gold-deep: #7a5111; --amber: #e8a547; --hair: rgba(122, 81, 17, .16); --hair-soft: rgba(122, 81, 17, .09); --plate: #12100c; --plate-2: #1b1710; color: var(--ink-soft); background: radial-gradient(1200px 700px at 78% -6%, rgba(255, 240, 208, .95), transparent 62%), radial-gradient(900px 620px at 8% 12%, rgba(255, 249, 238, .8), transparent 60%), var(--bg); background-attachment: fixed; } /* Grão quase imperceptível: no claro ele suja em vez de dar textura */ .tema-claro::before { opacity: .012; } .tema-claro h1, .tema-claro h2, .tema-claro h3, .tema-claro h4, .tema-claro h5 { color: var(--ink); } .tema-claro .gold, .tema-claro .eyebrow, .tema-claro .link-gold { color: var(--gold); } .tema-claro .link-gold { border-bottom-color: rgba(122, 81, 17, .35); } .tema-claro .link-gold:hover { border-bottom-color: var(--gold); } /* ---------------------------------------------------------- BOTÕES */ .tema-claro .btn-gold { background: linear-gradient(180deg, #e0a33f 0%, #cf8c2b 58%, #bd7a1e 100%); color: #1c1409; box-shadow: 0 1px 0 rgba(255, 255, 255, .34) inset, 0 10px 22px -14px rgba(122, 81, 17, .75); } .tema-claro .btn-gold:hover { background: linear-gradient(180deg, #e9b053 0%, #d9973a 58%, #c78427 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 14px 28px -14px rgba(122, 81, 17, .85); } .tema-claro .btn-ghost { color: var(--ink); border-color: rgba(122, 81, 17, .3); } .tema-claro .btn-ghost:hover { border-color: var(--gold); color: var(--gold); } .tema-claro .btn-whatsapp { color: var(--gold); border-color: rgba(122, 81, 17, .34); } .tema-claro .btn-whatsapp:hover { background: rgba(165, 113, 28, .08); border-color: var(--gold); } /* ---------------------------------------------------------- HEADER */ .tema-claro .header.scrolled { background: rgba(248, 242, 231, .9); border-bottom-color: var(--hair); } .tema-claro .nav a { color: var(--ink-soft); } .tema-claro .nav a:hover { color: var(--gold); } .tema-claro .menu-toggle span { background: var(--ink); } .tema-claro .mobile-menu { background: rgba(248, 242, 231, .98); } .tema-claro .mobile-menu a { color: var(--ink); } .tema-claro .mobile-menu a:hover { color: var(--gold); } .tema-claro .brand-mark { filter: none; } .tema-claro .hero-brand .brand-mark { filter: drop-shadow(0 6px 18px rgba(122, 81, 17, .18)); } /* ------------------------------------------------------------ HERO */ /* Luz entrando pela janela, no canto superior direito */ .tema-claro .hero::before { top: -6%; right: -140px; width: 720px; height: 720px; background: radial-gradient(circle, rgba(255, 226, 168, .55), transparent 68%); } .tema-claro .hero-brand .presents { color: var(--ink-mute); } .tema-claro .hero-text h1 .italic { color: var(--gold); } .tema-claro .hero-text .lede { color: var(--ink-soft); } /* A foto do professor vira um quadro na parede clara */ .tema-claro .hero-image-wrap, .tema-claro .professor-img-wrap, .tema-claro .cta-img-wrap { border: 1px solid rgba(122, 81, 17, .2); box-shadow: 0 34px 70px -40px rgba(58, 38, 12, .55); } .tema-claro .professor-img-wrap::before { border-color: var(--gold); opacity: .5; } .tema-claro .hero-badge { background: rgba(255, 252, 245, .95); border: 1px solid var(--hair); box-shadow: 0 18px 40px -28px rgba(58, 38, 12, .5); } .tema-claro .hero-badge .label { color: var(--gold); } .tema-claro .hero-badge .value { color: var(--ink); } /* ------------------------------------------------- BLOCOS DE TEXTO */ .tema-claro .divider-section { background: var(--bg-2); } .tema-claro .divider-section::before, .tema-claro .divider-section::after { background: linear-gradient(180deg, var(--gold), transparent); opacity: .5; } .tema-claro .divider-text p { color: var(--ink-soft); } .tema-claro .divider-rule { background: var(--gold); opacity: .6; } .tema-claro .section-head p { color: var(--ink-soft); } .tema-claro .section-head::after { opacity: 1; background: linear-gradient(90deg, transparent, #b98229 22%, transparent 46%) center 4px / 100% 1px no-repeat, radial-gradient(circle, #a8741f 38%, transparent 42%) center / 5px 5px no-repeat, linear-gradient(90deg, transparent 54%, #b98229 78%, transparent) center 4px / 100% 1px no-repeat; } /* ------------------------------------------------------- ESTRUTURA */ .tema-claro .encontra { background: radial-gradient(circle at 50% 40%, rgba(255, 238, 205, .7) 0%, var(--bg) 72%); } .tema-claro .encontra-card { background: linear-gradient(180deg, #fffaf0 0%, #f7efe0 100%); border-color: var(--hair); box-shadow: 0 20px 44px -34px rgba(58, 38, 12, .4); } .tema-claro .encontra-card p { color: var(--ink-soft); } .tema-claro .encontra-card::before { background: var(--gold); } .tema-claro .professor { background: var(--bg-2); } .tema-claro .professor-text p { color: var(--ink-soft); } .tema-claro .cred { border-color: rgba(122, 81, 17, .28); color: var(--ink-soft); } /* ---------------------------------------------------------- CURSOS */ .tema-claro .cursos { background: linear-gradient(180deg, var(--bg) 0%, #f4ecdd 48%, var(--bg) 100%); } .tema-claro .acervo-strip { border-color: var(--hair); } .tema-claro .acervo-item .n { color: var(--gold); } .tema-claro .acervo-item .l { color: var(--ink-mute); } /* O card do curso é a moldura escura do quadro */ .tema-claro .curso-yt { background: var(--plate); border: 1px solid rgba(58, 38, 12, .22); box-shadow: 0 22px 48px -34px rgba(58, 38, 12, .55); } .tema-claro .curso-yt:hover { border-color: rgba(165, 113, 28, .5); box-shadow: 0 28px 56px -32px rgba(58, 38, 12, .62); } .tema-claro .curso-yt.is-open { background: var(--plate); border-color: rgba(165, 113, 28, .55); } /* Dentro do quadro tudo permanece na leitura noturna original */ .tema-claro .curso-yt-body { border-top-color: rgba(232, 165, 71, .1); } .tema-claro .curso-yt-body .eyebrow { color: var(--amber); } .tema-claro .curso-toggle { color: var(--amber); border-color: rgba(232, 165, 71, .34); } .tema-claro .curso-toggle:hover { background: rgba(232, 165, 71, .1); } .tema-claro .curso-lead { color: #cdc2ab; } .tema-claro .curso-detail { border-top-color: rgba(232, 165, 71, .14); } .tema-claro .curso-detail-title { color: var(--amber); } .tema-claro .modulo-nome { color: var(--amber); border-bottom-color: rgba(232, 165, 71, .14); } .tema-claro .modulo-nome span { color: #8a7d68; } .tema-claro .aulas li, .tema-claro .temas li { color: #cdc2ab; } .tema-claro .aulas li::before { color: #a87420; } .tema-claro .temas li::before { border-color: #a87420; } .tema-claro .curso-bonus { background: rgba(232, 165, 71, .07); border-left-color: #a87420; } .tema-claro .curso-bonus p { color: #cdc2ab; } .tema-claro .curso-acoes { border-top-color: rgba(232, 165, 71, .12); } .tema-claro .curso-incluso { color: #b8ac95; } .tema-claro .curso-incluso a { color: var(--amber); border-bottom-color: rgba(232, 165, 71, .4); } .tema-claro .curso-pagina { color: var(--amber); border-color: rgba(232, 165, 71, .45); } .tema-claro .curso-pagina:hover { background: rgba(232, 165, 71, .12); border-color: var(--amber); } .tema-claro .acervo-nota { color: var(--ink-mute); } /* --------------------------------------- INVERSÃO: A FAIXA ESCURA */ /* No tema claro, "para quem" vira o respiro escuro da página */ .tema-claro .light-band { background: linear-gradient(180deg, #17130d 0%, #100d09 100%); color: #c9beaa; } .tema-claro .light-band::before { background: linear-gradient(180deg, rgba(58, 38, 12, .16), transparent); } .tema-claro .light-band::after { background: linear-gradient(0deg, rgba(58, 38, 12, .16), transparent); } .tema-claro .light-band .eyebrow { color: var(--amber); } .tema-claro .light-band h2 { color: #f0e9d8; } .tema-claro .light-band h2 .gold { color: var(--amber); } .tema-claro .light-band .section-head p { color: #b8ac95; } .tema-claro .light-band .section-head::after { background: linear-gradient(90deg, transparent, #a87420 22%, transparent 46%) center 4px / 100% 1px no-repeat, radial-gradient(circle, var(--amber) 38%, transparent 42%) center / 5px 5px no-repeat, linear-gradient(90deg, transparent 54%, #a87420 78%, transparent) center 4px / 100% 1px no-repeat; } .tema-claro .pq-card { background: rgba(255, 255, 255, .035); border-color: rgba(232, 165, 71, .16); } .tema-claro .pq-card h4 { color: #f0e9d8; border-bottom-color: rgba(232, 165, 71, .18); } .tema-claro .pq-card p { color: #c1b5a0; } .tema-claro .aprender-list li { color: #c1b5a0; } .tema-claro .aprender-list li::before { border-color: var(--amber); } /* ----------------------------------------------------- DEPOIMENTOS */ .tema-claro .depoimentos { background-image: linear-gradient(rgba(244, 236, 222, .93), rgba(240, 231, 216, .93)), url('../images/img_1.webp'); background-size: cover; background-position: center top; } .tema-claro .depo-card { background: rgba(255, 253, 248, .82); border-color: var(--hair); box-shadow: 0 18px 40px -32px rgba(58, 38, 12, .45); } .tema-claro .depo-card p { color: var(--ink-soft); } .tema-claro .depo-card .author { color: var(--gold); } .tema-claro .depo-card::before { color: rgba(165, 113, 28, .2); } .tema-claro .depo-grid::-webkit-scrollbar-track { background: rgba(122, 81, 17, .12); } .tema-claro .depo-grid::-webkit-scrollbar-thumb { background: var(--gold); } .tema-claro .carousel-btn { border-color: rgba(122, 81, 17, .3); color: var(--gold); } .tema-claro .carousel-drag-label { color: var(--ink-mute); } /* ----------------------------------------------------------- PLANOS */ .tema-claro .planos { background: var(--bg-2); } .tema-claro .plano-card { background: linear-gradient(180deg, #fffaf0 0%, #f8f1e3 100%); border-color: var(--hair); box-shadow: 0 22px 50px -38px rgba(58, 38, 12, .42); } .tema-claro .plano-card.featured { border-color: var(--gold); background: linear-gradient(180deg, #fffdf7 0%, #f9f2e4 100%); box-shadow: 0 26px 60px -34px rgba(122, 81, 17, .38); } .tema-claro .plano-card.featured::before { background: var(--gold); color: #fff9ec; } .tema-claro .plano-card .pitch { color: var(--ink-soft); } .tema-claro .plano-price .value { color: var(--gold); } .tema-claro .plano-price .per { color: var(--ink-mute); } .tema-claro .plano-annual { color: var(--ink-mute); border-bottom-color: var(--hair); } .tema-claro .plano-annual strong { color: var(--ink-soft); } .tema-claro .plano-annual .save { color: #7a5111; background: rgba(165, 113, 28, .14); } .tema-claro .plano-features li { color: var(--ink-soft); } .tema-claro .plano-features li::before { color: var(--gold); } .tema-claro .combo-box { background: rgba(165, 113, 28, .06); border-color: rgba(122, 81, 17, .32); } .tema-claro .combo-title { color: var(--gold); } .tema-claro .combo-list li { color: var(--ink-soft); border-bottom-color: rgba(122, 81, 17, .1); } .tema-claro .combo-list li .price del { color: var(--ink-mute); } .tema-claro .combo-list li .price strong { color: var(--gold); } .tema-claro .combo-total { color: #3a2f22; background: rgba(165, 113, 28, .16); } .tema-claro .combo-total strong { color: #7a5111; } .tema-claro .planos-whatsapp p { color: var(--ink-soft); } /* -------------------------------------------------------------- FAQ */ .tema-claro .faq { background: var(--bg); } .tema-claro .faq-item { border-bottom-color: var(--hair); } .tema-claro .faq-item summary { color: var(--ink); } .tema-claro .faq-item summary:hover { color: var(--gold); } .tema-claro .faq-item summary::after { color: var(--gold); } .tema-claro .faq-answer { color: var(--ink-soft); } /* --------------------------------------------------- CTA E RODAPÉ */ .tema-claro .cta-final { background: radial-gradient(760px 420px at 76% 10%, rgba(255, 233, 190, .8), transparent 66%), var(--bg-2); } .tema-claro .cta-final::before { background: radial-gradient(circle, rgba(255, 226, 168, .5), transparent 70%); } .tema-claro .cta-text p { color: var(--ink-soft); } .tema-claro .cta-img-wrap img { filter: none; } .tema-claro footer { background: #efe4d1; border-top-color: var(--hair); } .tema-claro .footer-col h5 { color: var(--gold); } .tema-claro .footer-col a { color: var(--ink-soft); } .tema-claro .footer-col a:hover { color: var(--gold); } .tema-claro .footer-bottom { border-top-color: var(--hair); color: var(--ink-mute); } .tema-claro .sticky-cta { background: rgba(250, 245, 236, .97); border-top-color: var(--hair); box-shadow: 0 -10px 30px -22px rgba(58, 38, 12, .5); } .tema-claro .sticky-cta-text strong { color: var(--ink); } .tema-claro .sticky-cta-text span { color: var(--ink-mute); } /* -------------------------------------------- PÁGINAS DE CURSO */ .tema-claro .curso-hero-cover { border-color: rgba(58, 38, 12, .22); box-shadow: 0 30px 70px -42px rgba(58, 38, 12, .6); } .tema-claro .curso-hero-sub { color: var(--ink); } .tema-claro .selo-incluso { color: var(--gold); border-color: rgba(122, 81, 17, .32); background: rgba(165, 113, 28, .07); } .tema-claro .voltar { color: var(--ink-mute); } .tema-claro .voltar:hover { color: var(--gold); } .tema-claro .curso-abertura { background: var(--bg-2); } .tema-claro .curso-prosa h2 { color: var(--gold); } .tema-claro .curso-prosa p { color: var(--ink-soft); } .tema-claro .curso-prosa p:first-of-type::first-letter { color: var(--gold); } .tema-claro .curso-grade { background: var(--bg); } .tema-claro .curso-grade .modulo-nome { color: var(--gold); border-bottom-color: var(--hair); } .tema-claro .curso-grade .modulo-nome span { color: var(--ink-mute); } .tema-claro .curso-grade .aulas li { color: var(--ink-soft); } .tema-claro .curso-grade .aulas li::before { color: var(--gold); } .tema-claro .curso-grade .curso-bonus { background: rgba(165, 113, 28, .07); border-left-color: var(--gold); } .tema-claro .curso-grade .curso-bonus p { color: var(--ink-soft); } .tema-claro .curso-grade .curso-bonus .modulo-nome { border-bottom: none; } .tema-claro .curso-paraquem { background: var(--bg-2); } .tema-claro .curso-paraquem .temas li { color: var(--ink-soft); } .tema-claro .curso-paraquem .temas li::before { border-color: var(--gold); } .tema-claro .curso-fechamento { background: radial-gradient(760px 400px at 50% 0%, rgba(255, 233, 190, .85), transparent 68%), var(--bg); } .tema-claro .fechamento-box { background: linear-gradient(180deg, #fffaf0 0%, #f8f1e3 100%); border-color: rgba(122, 81, 17, .22); box-shadow: 0 26px 60px -38px rgba(58, 38, 12, .45); } .tema-claro .fechamento-box > p { color: var(--ink-soft); } .tema-claro .fechamento-preco .valor { color: var(--gold); } .tema-claro .fechamento-preco .por { color: var(--ink-mute); } .tema-claro .fechamento-preco .alt { color: var(--ink-mute); } .tema-claro .fechamento-nota { color: var(--ink-mute); } /* ===================================================================== RITMO CLARO E ESCURO A página deixa de ser toda clara e passa a alternar bandas. A luz continua sendo o fundo dominante, mas os momentos de peso (o manifesto, o professor, o convite final) voltam para a linguagem noturna original da marca. ===================================================================== */ .tema-claro { /* creme um pouco mais fechado, menos papel branco */ --bg: #f4ecdd; --bg-2: #ece1cd; --bg-3: #e2d4bb; --ink: #1f1913; --ink-soft: #4a4033; --ink-mute: #857761; --escuro: #14110c; --escuro-2: #1c1811; } .tema-claro { background: radial-gradient(1200px 700px at 78% -6%, rgba(255, 238, 202, .9), transparent 62%), radial-gradient(900px 620px at 8% 12%, rgba(255, 247, 232, .7), transparent 60%), var(--bg); } /* ---- Bandas escuras: manifesto, professor, convite final, rodapé ---- */ .tema-claro .divider-section, .tema-claro .professor, .tema-claro .cta-final, .tema-claro .curso-abertura, .tema-claro .curso-fechamento { background: linear-gradient(180deg, var(--escuro-2) 0%, var(--escuro) 100%); position: relative; } .tema-claro .divider-section::after, .tema-claro .professor::after, .tema-claro .cta-final::after, .tema-claro .curso-abertura::after, .tema-claro .curso-fechamento::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(58, 38, 12, .2), transparent 90px), linear-gradient(0deg, rgba(58, 38, 12, .2), transparent 90px); } .tema-claro .divider-section > *, .tema-claro .professor > *, .tema-claro .cta-final > *, .tema-claro .curso-abertura > *, .tema-claro .curso-fechamento > * { position: relative; z-index: 1; } /* Tipografia dentro das bandas escuras volta ao âmbar original */ .tema-claro .divider-section h2, .tema-claro .professor h2, .tema-claro .cta-final h2, .tema-claro .curso-abertura h2, .tema-claro .curso-fechamento h2 { color: #f0e9d8; } .tema-claro .divider-section .gold, .tema-claro .professor .gold, .tema-claro .cta-final .gold, .tema-claro .curso-fechamento .gold, .tema-claro .divider-section .eyebrow, .tema-claro .professor .eyebrow, .tema-claro .cta-final .eyebrow, .tema-claro .curso-fechamento .eyebrow { color: var(--amber); } .tema-claro .divider-text p, .tema-claro .professor-text p, .tema-claro .cta-text p, .tema-claro .curso-prosa p, .tema-claro .curso-fechamento > .container p { color: #c1b5a0; } .tema-claro .divider-rule { background: var(--amber); opacity: .8; } .tema-claro .divider-section::before { background: linear-gradient(180deg, var(--amber), transparent); opacity: .45; } .tema-claro .professor .cred { border-color: rgba(232, 165, 71, .28); color: #c1b5a0; } .tema-claro .professor .professor-img-wrap { border-color: rgba(232, 165, 71, .2); box-shadow: 0 34px 70px -40px rgba(0, 0, 0, .85); } .tema-claro .professor .professor-img-wrap::before { border-color: var(--amber); opacity: .55; } /* Convite final */ .tema-claro .cta-final::before { background: radial-gradient(circle, rgba(232, 165, 71, .16), transparent 70%); } .tema-claro .cta-final .btn-gold, .tema-claro .divider-section .btn-gold, .tema-claro .curso-fechamento .btn-gold { background: linear-gradient(180deg, #f0b45c 0%, var(--amber) 55%, #dc9a3c 100%); color: #1c1409; } .tema-claro .cta-final .btn-ghost { color: #f0e9d8; border-color: rgba(232, 165, 71, .35); } .tema-claro .cta-final .btn-ghost:hover { color: var(--amber); border-color: var(--amber); } .tema-claro .cta-img-wrap { border-color: rgba(232, 165, 71, .18); } /* Página de curso: abertura e fechamento escuros */ .tema-claro .curso-prosa h2 { color: var(--amber); } .tema-claro .curso-prosa p:first-of-type::first-letter { color: var(--amber); } .tema-claro .fechamento-box { background: linear-gradient(180deg, rgba(38, 32, 22, .9), rgba(20, 17, 12, .9)); border-color: rgba(232, 165, 71, .22); box-shadow: 0 30px 70px -44px rgba(0, 0, 0, .9); } .tema-claro .fechamento-box > p { color: #c1b5a0; } .tema-claro .fechamento-preco .valor { color: var(--amber); } .tema-claro .fechamento-preco .por, .tema-claro .fechamento-preco .alt, .tema-claro .fechamento-nota { color: #8a7d68; } /* Ornamento dos títulos dentro das bandas escuras */ .tema-claro .divider-section .section-head::after, .tema-claro .professor .section-head::after, .tema-claro .cta-final .section-head::after, .tema-claro .curso-fechamento .section-head::after { background: linear-gradient(90deg, transparent, #a87420 22%, transparent 46%) center 4px / 100% 1px no-repeat, radial-gradient(circle, var(--amber) 38%, transparent 42%) center / 5px 5px no-repeat, linear-gradient(90deg, transparent 54%, #a87420 78%, transparent) center 4px / 100% 1px no-repeat; } /* ---- Rodapé escuro, para a página assentar ---- */ .tema-claro footer { background: #0e0c08; border-top-color: rgba(232, 165, 71, .16); } .tema-claro .footer-col h5 { color: var(--amber); } .tema-claro .footer-col a { color: #a99c86; } .tema-claro .footer-col a:hover { color: var(--amber); } .tema-claro .footer-bottom { border-top-color: rgba(232, 165, 71, .1); color: #7d715e; } .tema-claro footer .brand-mark { filter: drop-shadow(0 2px 14px rgba(232, 165, 71, .16)); } /* ---- Seções claras: um pouco mais de contraste com as escuras ---- */ .tema-claro .encontra { background: radial-gradient(circle at 50% 40%, rgba(255, 240, 210, .8) 0%, var(--bg) 74%); } .tema-claro .encontra-card { background: linear-gradient(180deg, #fdf7ea 0%, #f4ebd9 100%); border-color: rgba(122, 81, 17, .18); } .tema-claro .planos { background: var(--bg-2); } .tema-claro .plano-card { background: linear-gradient(180deg, #fdf8ec 0%, #f5eddd 100%); } .tema-claro .plano-card.featured { background: linear-gradient(180deg, #fffbf2 0%, #f7efe0 100%); } .tema-claro .depoimentos { background-image: linear-gradient(rgba(240, 231, 216, .93), rgba(236, 225, 205, .93)), url('../images/img_1.webp'); } .tema-claro .depo-card { background: rgba(255, 252, 245, .85); }