/* ========================================================================== ARQUIVO: css/style.css ONDE ESTÁ INTERLIGADO: Carregado no da index.html (antes do responsive.css e do animations.css) DESCRIÇÃO: Estilo base do site inteiro — cores, tipografia, cada seção da página (hero, seções de conteúdo, footer) e as animações @keyframes. As regras de responsividade (telas menores) ficam em responsive.css; as animações de entrada/scroll ficam em animations.css. ========================================================================== */ /* Variáveis globais de cor, fonte e largura máxima, usadas em todo o site */ :root{--black:#090908;--black2:#11110f;--paper:#eee9df;--paper2:#e4ded2;--white:#f8f5ed;--ink:#161613;--muted:#858078;--line:rgba(255,255,255,.13);--darkline:rgba(15,15,13,.14);--gold:#c7a766;--serif:"Playfair Display",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;--max:1500px} /* Reset básico */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--black);color:var(--white);font-family:var(--sans);overflow-x:hidden} body.menu-open{overflow:hidden} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} ::selection{background:var(--gold);color:var(--black)} .section-dark{background:var(--black);color:var(--white)} .section-paper{background:var(--paper);color:var(--ink)} /* -------------------------------------------------------------------------- TELA DE CARREGAMENTO (splash screen ao abrir o site) Controlada via JS em main.js — recebe a classe "done" após 1.9s. -------------------------------------------------------------------------- */ .loading-screen{position:fixed;z-index:5000;inset:0;background:#050504;display:grid;place-items:center;overflow:hidden;transition:opacity 1s,visibility 1s} .loading-screen.done{opacity:0;visibility:hidden} .power-orb{position:absolute;width:90px;height:90px;border:1px solid rgba(199,167,102,.45);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 50px rgba(199,167,102,.18),inset 0 0 30px rgba(199,167,102,.12);animation:orbPulse 2s ease-in-out infinite} .power-orb span{color:var(--gold);font-size:25px;animation:orbSpin 5s linear infinite} .power-beam{position:absolute;width:1px;height:100vh;background:linear-gradient(transparent,rgba(199,167,102,.55),transparent);box-shadow:0 0 60px 25px rgba(199,167,102,.08);animation:beamGrow 1.7s ease-out forwards} .loading-word{position:absolute;bottom:29%;font-size:9px;letter-spacing:.45em;color:#77736b} .loading-progress{position:absolute;bottom:23%;width:150px;height:1px;background:#22221d;overflow:hidden} .loading-progress i{display:block;width:0;height:100%;background:var(--gold);animation:loadProgress 1.8s ease forwards} /* -------------------------------------------------------------------------- BARRA DE PROGRESSO DE LEITURA (linha fina no topo da página) Preenchida via JS em animations.js conforme o scroll da página. -------------------------------------------------------------------------- */ .scroll-progress{position:fixed;z-index:2500;top:0;left:0;width:100%;height:2px;background:transparent} .scroll-progress span{display:block;height:100%;width:0;background:var(--gold);box-shadow:0 0 12px rgba(199,167,102,.5)} /* -------------------------------------------------------------------------- CABEÇALHO (logo, menu, botão "comprar") Fica fixo no topo; ganha a classe .scrolled (via navigation.js) ao rolar. -------------------------------------------------------------------------- */ .site-header{position:fixed;z-index:2000;top:0;left:0;width:100%;height:88px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid transparent;transition:.45s} .site-header.scrolled{height:70px;background:rgba(9,9,8,.78);backdrop-filter:blur(18px);border-color:var(--line)} .brand{display:flex;align-items:center;gap:10px;font-size:10px;line-height:1.05;text-transform:uppercase;letter-spacing:.12em;font-weight:700} .brand b{font-size:19px;color:var(--gold)} .brand em{font-family:var(--serif);font-size:12px;text-transform:none;letter-spacing:0;font-weight:500} .main-nav{display:flex;align-items:center;gap:31px;font-size:10px;text-transform:uppercase;letter-spacing:.12em} .main-nav a{opacity:.68;transition:.3s} .main-nav a:hover{opacity:1} .nav-buy{opacity:1!important;border:1px solid var(--line);padding:12px 17px;border-radius:100px} .nav-buy i{font-style:normal;margin-left:13px} /* Botão hambúrguer — só aparece no mobile (ver responsive.css) */ .menu-toggle{display:none;background:none;border:0;width:42px;height:42px;padding:8px;z-index:2002} .menu-toggle span{display:block;height:1px;background:#fff;margin:8px 0} /* -------------------------------------------------------------------------- CONTROLE DE ÁUDIO DE FUNDO (botão flutuante no canto da tela) Ganha a classe .active via JS (main.js) quando o áudio está tocando. -------------------------------------------------------------------------- */ .audio-control{position:fixed;z-index:1900;right:24px;bottom:24px} .audio-control button{border:1px solid rgba(255,255,255,.16);background:rgba(9,9,8,.68);backdrop-filter:blur(14px);color:#fff;border-radius:100px;padding:9px 14px;display:flex;align-items:center;gap:10px;cursor:pointer} .audio-control strong,.audio-control small{font-size:8px;text-transform:uppercase;letter-spacing:.12em} .audio-control small{color:#817d73} .audio-control.active small{color:var(--gold)} .audio-icon{display:flex;align-items:center;gap:2px;height:14px} .audio-icon i{display:block;width:2px;background:var(--gold);height:4px} .audio-control.active .audio-icon i:nth-child(1){animation:sound .6s infinite} .audio-control.active .audio-icon i:nth-child(2){height:12px;animation:sound .7s infinite .1s} .audio-control.active .audio-icon i:nth-child(3){height:7px;animation:sound .5s infinite .2s} /* -------------------------------------------------------------------------- HERO (topo da página — título principal + livro 3D) Usa "100svh" (small viewport height) em vez de "100vh" de propósito: isso evita que a altura "pule" no mobile quando a barra de endereço do navegador aparece/some durante o scroll. -------------------------------------------------------------------------- */ .hero{min-height:100svh;position:relative;display:flex;align-items:center;overflow:hidden;padding:110px 7vw 70px} .hero-lines{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:100px 100px;mask-image:linear-gradient(to bottom,#000,transparent 88%)} .hero-light{position:absolute;width:65vw;height:65vw;border-radius:50%;right:-8vw;top:10%;background:radial-gradient(circle,rgba(199,167,102,.14),transparent 64%);filter:blur(35px);animation:heroAura 6s ease-in-out infinite} .hero-copy{position:relative;z-index:5;width:min(650px,52vw);margin-left:2vw} .eyebrow{display:flex;align-items:center;gap:11px;color:#88847b;font-size:9px;text-transform:uppercase;letter-spacing:.18em} .eyebrow span{display:inline-block;width:22px;height:1px;background:var(--gold)} .eyebrow.dark{color:#77736b} h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.045em} h1{font-size:clamp(48px,5.4vw,91px);line-height:.94;margin:28px 0} h1 em,h2 em{font-style:italic;color:#cfc7ba} .hero-text{max-width:550px;color:#a5a198;font-size:15px;line-height:1.8} .hero-actions{display:flex;align-items:center;gap:25px;margin-top:33px} .button{display:inline-flex;align-items:center;justify-content:center;gap:26px;border:0;border-radius:100px;padding:16px 21px;font-size:9px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;transition:.4s;cursor:pointer} .button:hover{transform:translateY(-4px)} .button-light{background:var(--white);color:var(--black)} .button-dark{background:var(--black);color:var(--white)} .sub-link{font-size:10px;border-bottom:1px solid #4b4944;padding-bottom:7px;color:#d4d0c7} .hero-tags{display:flex;gap:20px;margin-top:45px;font-size:8px;text-transform:uppercase;letter-spacing:.16em;color:#5f5d56} .hero-tags span+span:before{content:"•";margin-right:20px;color:var(--gold)} /* Área do livro 3D flutuante do Hero (efeito tilt controlado via main.js) */ .hero-book-area{position:absolute;z-index:4;right:4vw;top:50%;transform:translateY(-50%);width:min(49vw,720px);height:78vh;display:grid;place-items:center;perspective:1600px} .book-light{position:absolute;width:48%;height:50%;border-radius:50%;background:rgba(199,167,102,.23);filter:blur(90px);animation:bookGlow 5s ease-in-out infinite} .book-3d{position:relative;width:min(410px,38vw);transform-style:preserve-3d;transition:transform .18s ease;filter:drop-shadow(35px 45px 35px rgba(0,0,0,.65));animation:bookFloat 6s ease-in-out infinite} .book-3d img{width:100%;transform:translateZ(30px)} .book-shadow{position:absolute;inset:10% -8% -8%;background:#000;filter:blur(22px);transform:translateZ(-40px) rotateX(65deg);opacity:.55} .book-caption{position:absolute;bottom:5%;font-size:8px;text-transform:uppercase;letter-spacing:.18em;color:#6d6960} .hero-scroll{position:absolute;bottom:25px;left:7vw;display:flex;align-items:center;gap:13px;color:#68655e;font-size:8px;text-transform:uppercase;letter-spacing:.15em} .hero-scroll i{width:70px;height:1px;background:#484640;animation:scrollLine 2s infinite} /* Rótulo pequeno (ex: "O PROBLEMA", "OS PRINCÍPIOS") usado no topo de várias seções */ .section-kicker{font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:#77736b} /* -------------------------------------------------------------------------- SEÇÃO "STATEMENT" (declaração/afirmação logo após o Hero) -------------------------------------------------------------------------- */ .statement{min-height:78vh;padding:14vh 9vw;display:grid;grid-template-columns:.6fr 1.4fr;gap:7vw;align-items:center} .statement-copy{max-width:1000px} .statement h2,.video-copy h2,.principles-head h2,.legacy h2,.tasting h2,.audience-head h2,.author-copy h2,.buy-head h2,.seo-inner h2{font-size:clamp(48px,6vw,94px);line-height:.94;margin:25px 0} .statement h2 em,.video-copy h2 em,.principles-head h2 em,.audience-head h2 em,.buy-head h2 em,.seo-inner h2 em{color:#7a756c} .statement-copy>p:last-child,.video-copy>p:last-child,.principles-head>p:last-child,.audience-head>p:last-child,.buy-head>p:last-child{max-width:680px;color:#69655d;line-height:1.85;font-size:15px} /* -------------------------------------------------------------------------- SEÇÃO "O PROBLEMA" (foto + lista de pontos com efeito hover) -------------------------------------------------------------------------- */ .problem{padding:0 9vw 15vh;display:grid;grid-template-columns:1.08fr .92fr;gap:9vw;align-items:center} .problem-photo{position:relative;overflow:hidden} .problem-photo img{width:100%;aspect-ratio:1.08;object-fit:cover;filter:saturate(.72)} .problem-photo span{position:absolute;z-index:2;left:28px;bottom:28px;color:#fff;font:italic 16px var(--serif)} .problem-points{border-top:1px solid var(--darkline)} .animated-card{position:relative;padding:38px 20px 40px 0;border-bottom:1px solid var(--darkline);overflow:hidden} .animated-card:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);transition:width .7s} .animated-card:hover:after{width:100%} .animated-card>span{font-size:8px;text-transform:uppercase;letter-spacing:.16em;color:#8d887e} .animated-card h3{font-size:31px;margin:24px 0 12px} .animated-card p{margin:0;color:#6d6961;line-height:1.7} /* -------------------------------------------------------------------------- SEÇÃO "BÚSSOLA" (substituiu a antiga animação de virar página) 100% CSS — sem JavaScript, sem scroll, sem 3D. A agulha gira sozinha em loop (@keyframes compassSpin, lá embaixo no arquivo junto com as outras animações), parando de leve em cada um dos 4 conceitos (Serviço/N, Autoridade/E, Formação/S, Propósito/O), como se estivesse sempre "reencontrando o norte". Por depender só de "transform:rotate" — o recurso de animação mais simples e estável que existe em CSS — não tem os problemas de timing/renderização que a versão em 3D tinha. -------------------------------------------------------------------------- */ .compass-section{padding:15vh 9vw;display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;align-items:center} .compass-copy h2{margin:25px 0} .compass-copy>p:not(.eyebrow){max-width:650px;color:#a5a198;line-height:1.85;font-size:15px} /* Caixa quadrada que centraliza a bússola; o tamanho encolhe sozinho em telas pequenas graças ao min(320px,70vw) — não precisa de media query extra pra isso. */ .compass-wrap{position:relative;width:min(320px,70vw);aspect-ratio:1;margin:0 auto;display:grid;place-items:center} /* Brilho suave atrás do anel — mesma receita de "aura" já usada em .book-light (Hero) e .buy-aura (seção Comprar), por consistência visual */ .compass-glow{position:absolute;inset:-15%;border-radius:50%;background:radial-gradient(circle,rgba(199,167,102,.16),transparent 68%);filter:blur(30px)} /* O anel/círculo da bússola */ .compass-ring{position:relative;width:100%;height:100%;border-radius:50%;border:1px solid rgba(199,167,102,.35);background:radial-gradient(circle,rgba(238,233,223,.03),transparent 70%)} /* Os 4 rótulos (Serviço/Autoridade/Formação/Propósito) — cada um fica posicionado numa "direção" (N/E/S/O) ao redor do anel, controlado pela classe compass-n/e/s/w, não pela ordem no HTML */ .compass-label{position:absolute;font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:#c7bfae;white-space:nowrap} .compass-n{top:0;left:50%;transform:translate(-50%,-165%)} .compass-s{bottom:0;left:50%;transform:translate(-50%,165%)} /* FIX RESPONSIVIDADE (leste/oeste): antes "Autoridade" e "Propósito" ficavam FORA do anel, deslocados por uma % do PRÓPRIO TAMANHO DO TEXTO (transform:translate(150%)). Como são palavras compridas, em telas estreitas esse deslocamento empurrava o texto pra fora da tela — e como o site tem overflow-x:hidden (ver fix de overflow lá atrás), isso não virava barra de rolagem, só CORTAVA o texto (o "AUTO" e o "...SITO" cortados que apareceram no print). Fix: leste/oeste agora ficam DENTRO do anel, perto da borda, numa posição em % DO TAMANHO DO ANEL (que já é responsivo via .compass-wrap) — não mais em % do próprio texto. Como o anel nunca estoura a tela, nada posicionado dentro dele também nunca estoura. max-width + white-space:normal é uma rede de segurança extra: se um dia o texto for ainda maior, ele quebra em 2 linhas em vez de cortar. */ .compass-e{right:7%;top:50%;transform:translateY(-50%);text-align:right;max-width:36%;white-space:normal} .compass-w{left:7%;top:50%;transform:translateY(-50%);text-align:left;max-width:36%;white-space:normal} /* Pequenos traços marcando as mesmas 4 direções, bem em cima do anel */ .compass-tick{position:absolute;background:var(--gold)} .compass-tick-n,.compass-tick-s{left:50%;width:1px;height:10px;transform:translateX(-50%)} .compass-tick-e,.compass-tick-w{top:50%;width:10px;height:1px;transform:translateY(-50%)} .compass-tick-n{top:-1px} .compass-tick-s{bottom:-1px} .compass-tick-e{right:-1px} .compass-tick-w{left:-1px} /* A agulha: centralizada via top/left em % (não via transform, pra deixar o transform livre só pra rotação no @keyframes compassSpin) */ .compass-needle{position:absolute;top:13%;left:46%;width:8%;height:74%;transform-origin:50% 50%;animation:compassSpin 16s ease-in-out infinite} /* As 2 metades da agulha (losango): metade dourada em cima, escura embaixo — visual clássico de bússola */ .needle-half{position:absolute;left:0;width:100%;height:50%} .needle-gold{top:0;background:var(--gold);clip-path:polygon(50% 0%,100% 100%,0% 100%);-webkit-clip-path:polygon(50% 0%,100% 100%,0% 100%)} .needle-pale{bottom:0;background:#4a463d;clip-path:polygon(0% 0%,100% 0%,50% 100%);-webkit-clip-path:polygon(0% 0%,100% 0%,50% 100%)} /* Pino dourado no centro, por cima da agulha */ .compass-pivot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(199,167,102,.6)} /* -------------------------------------------------------------------------- SEÇÃO DE VÍDEO (mensagem do autor, embed do YouTube) -------------------------------------------------------------------------- */ .video-section{padding:14vh 9vw;display:grid;grid-template-columns:.45fr 1.55fr;gap:6vw;align-items:center} .video-section .section-kicker{align-self:start} .video-copy{grid-column:2;max-width:850px} .video-frame{grid-column:1/-1;width:100%;aspect-ratio:16/8.6;background:#111;box-shadow:0 35px 80px rgba(0,0,0,.18);overflow:hidden} .video-frame iframe{width:100%;height:100%;border:0} /* -------------------------------------------------------------------------- SEÇÃO "PRINCÍPIOS" (grade de cards) -------------------------------------------------------------------------- */ .principles{padding:15vh 9vw} .principles-head{max-width:900px;margin:0 0 8vh} .principles-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--darkline)} .principle{position:relative;padding:45px 45px 55px 0;border-bottom:1px solid var(--darkline);border-right:1px solid var(--darkline);min-height:330px;overflow:hidden} .principle:nth-child(even){padding-left:45px;border-right:0} .principle:before{content:"";position:absolute;width:0;height:0;right:-20px;top:-20px;border-radius:50%;background:rgba(199,167,102,.15);transition:width .7s,height .7s} .principle:hover:before{width:180px;height:180px} .principle span{font-size:8px;text-transform:uppercase;letter-spacing:.15em;color:#89847b} .principle h3{font-size:40px;margin:55px 0 15px;position:relative} .principle p{max-width:520px;color:#69655d;line-height:1.7;position:relative} .principle i{position:absolute;right:20px;bottom:25px;font:italic 28px var(--serif);color:#aaa399} /* -------------------------------------------------------------------------- SEÇÃO "LEGADO" (citação + foto grande) -------------------------------------------------------------------------- */ .legacy{display:grid;grid-template-columns:1fr 1fr;min-height:850px} .legacy-copy{padding:13vw 8vw;display:flex;flex-direction:column;justify-content:center} .legacy h2{margin-top:25px} .legacy-copy>p:not(.eyebrow){color:#8f8b83;line-height:1.85;max-width:650px} .legacy blockquote{border-left:1px solid var(--gold);padding-left:25px;margin:55px 0 0;font:italic 26px/1.3 var(--serif);color:#d7d1c6} .legacy blockquote strong{color:#fff} .prayer-photo{position:relative;min-height:850px;overflow:hidden;background:#161613} .prayer-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)} /* Aparece automaticamente se a falhar ao carregar (ver main.js) */ .photo-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(140deg,#1d1c18,#0b0b0a);color:#8b877f;text-align:center} .photo-placeholder span{font-size:8px;letter-spacing:.2em;color:var(--gold)} .photo-placeholder strong{font:30px var(--serif);color:#d9d3c7} .photo-placeholder small{font-size:9px} .photo-placeholder small b{color:var(--gold)} .prayer-photo img+.photo-placeholder{display:none} /* -------------------------------------------------------------------------- SEÇÃO "DEGUSTAÇÃO" (prévia do livro em PDF pra baixar) -------------------------------------------------------------------------- */ .tasting{padding:15vh 9vw;display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;align-items:center} .tasting-copy h2{margin:25px 0} .tasting-copy>p:not(.eyebrow){max-width:650px;color:#8f8b83;line-height:1.8} .pdf-card{width:min(350px,100%);aspect-ratio:.7;background:linear-gradient(145deg,#d8c9ab,#9e8351);color:#17140f;padding:28px;display:flex;flex-direction:column;justify-content:space-between;justify-self:center;box-shadow:25px 35px 70px rgba(0,0,0,.35);transform:rotate(4deg);transition:.6s} .pdf-card:hover{transform:rotate(0) translateY(-12px)} .pdf-card div,.pdf-card>span{display:flex;justify-content:space-between;text-transform:uppercase;font-size:8px;letter-spacing:.16em} .pdf-card strong{font:44px/.92 var(--serif)} .pdf-card strong em{font-style:italic} /* -------------------------------------------------------------------------- SEÇÃO "PARA QUEM É" (público-alvo em 3 colunas) -------------------------------------------------------------------------- */ .audience{padding:15vh 9vw} .audience-head{max-width:900px;margin:7vh 0} .audience-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--darkline)} .audience-card{padding:42px 35px 50px 0;border-bottom:1px solid var(--darkline);border-right:1px solid var(--darkline);min-height:320px} .audience-card:nth-child(2),.audience-card:last-child{padding-left:35px} .audience-card:last-child{border-right:0} .audience-card span{font:italic 15px var(--serif);color:#8e887e} .audience-card h3{font-size:34px;margin:65px 0 15px} .audience-card p{color:#6b675f;line-height:1.7} /* -------------------------------------------------------------------------- SEÇÃO "SOBRE O AUTOR" -------------------------------------------------------------------------- */ .author{padding:15vh 9vw;display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;position:relative} .author>.section-kicker{grid-column:1/-1} .author-photo{position:relative;overflow:hidden;min-height:700px;background:#161613} .author-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)} .author-photo img+.photo-placeholder{display:none} .author-caption{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:28px;background:linear-gradient(transparent,rgba(0,0,0,.9));display:flex;justify-content:space-between;align-items:end} .author-caption b{font:20px var(--serif)} .author-caption span{font-size:8px;text-transform:uppercase;letter-spacing:.14em;color:#aaa69e} .author-copy h2{margin:22px 0 50px} .author-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-bottom:40px} .author-stats div{display:flex;flex-direction:column;gap:6px} .author-stats b{font:30px var(--serif)} .author-stats span{font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:#77736c} .author-text{font-size:14px;color:#8f8b83;line-height:1.85} /* -------------------------------------------------------------------------- SEÇÃO "COMPRAR" (cards das lojas) -------------------------------------------------------------------------- */ .buy{padding:15vh 9vw;position:relative;overflow:hidden} .buy-aura{position:absolute;right:-20vw;top:-20vw;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,rgba(199,167,102,.14),transparent 66%);filter:blur(25px)} .buy-head{max-width:950px;margin:7vh 0} .buy-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px} .store-card{min-height:460px;padding:42px;display:flex;flex-direction:column;justify-content:space-between} .dark-card{background:#0b0b0a;color:#fff} .light-card{background:#d9d1c3;color:#171613} .store-mark{width:60px;height:60px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font:27px var(--serif)} .store-card small{font-size:8px;letter-spacing:.18em} .store-card h3{font-size:50px;margin:13px 0} .store-card p{max-width:430px;line-height:1.7;color:#87837b} /* -------------------------------------------------------------------------- SEÇÃO DE TEXTO SEO (parágrafo extra pro Google indexar) -------------------------------------------------------------------------- */ .seo-section{padding:13vh 9vw} .seo-inner{max-width:1050px} .seo-inner h2{font-size:clamp(40px,5vw,72px)} .seo-inner p{max-width:900px;color:#6b675f;line-height:1.85;font-size:15px} /* -------------------------------------------------------------------------- RODAPÉ -------------------------------------------------------------------------- */ .footer{padding:8vh 5vw 25px} .footer-top{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:6vw;padding-bottom:8vh} .footer-top>p{max-width:450px;color:#7c7870;line-height:1.75;font-size:13px} .footer-top nav{display:grid;gap:10px;justify-self:end;text-align:right;font-size:9px;text-transform:uppercase;letter-spacing:.14em} .footer-top nav a:hover,.footer-bottom a:hover{color:#fff} .footer-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#5e5b54;font-size:8px;text-transform:uppercase;letter-spacing:.1em} .footer-bottom a+a{margin-left:14px} /* Linha de crédito do desenvolvedor, embaixo de tudo — texto normal (não é uppercase/micro-caps como o resto do footer-bottom acima), nome em destaque na cor dourada padrão do site (var(--gold)) e linkado pro WhatsApp. */ .footer-credit{text-align:center;margin-top:22px;font-size:13px;color:#6d6960} .footer-credit a{color:var(--gold);font-weight:600;text-decoration:none} .footer-credit a:hover{text-decoration:underline} /* Brilho que segue o mouse (só desktop) — posicionado via main.js */ .cursor-glow{position:fixed;z-index:3000;pointer-events:none;width:260px;height:260px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(199,167,102,.09),transparent 68%);mix-blend-mode:screen} /* ========================================================================== ANIMAÇÕES (@keyframes) — usadas pelas regras acima via "animation:" ========================================================================== */ @keyframes orbPulse{0%,100%{transform:scale(.9);box-shadow:0 0 40px rgba(199,167,102,.12),inset 0 0 25px rgba(199,167,102,.1)} 50%{transform:scale(1.08);box-shadow:0 0 80px rgba(199,167,102,.32),inset 0 0 45px rgba(199,167,102,.2)} } @keyframes orbSpin{to{transform:rotate(360deg)} } @keyframes beamGrow{from{height:0;opacity:0} to{height:100vh;opacity:1} } @keyframes loadProgress{to{width:100%} } @keyframes heroAura{0%,100%{transform:scale(.9);opacity:.5} 50%{transform:scale(1.12);opacity:.9} } @keyframes bookGlow{0%,100%{transform:scale(.9);opacity:.5} 50%{transform:scale(1.12);opacity:.85} } @keyframes bookFloat{0%,100%{transform:translateY(0) rotateZ(0)} 50%{transform:translateY(-14px) rotateZ(.7deg)} } @keyframes scrollLine{0%,100%{transform:scaleX(.25);transform-origin:left} 50%{transform:scaleX(1);transform-origin:left} } @keyframes sound{0%,100%{transform:scaleY(.5)} 50%{transform:scaleY(1.5)} } /* Agulha da bússola: gira 360° em 16s, sentido horário, parando ~1.3s em cada uma das 4 direções (0deg=N/Serviço, 90deg=E/Autoridade, 180deg=S/Formação, 270deg=O/Propósito) antes de seguir pra próxima. */ @keyframes compassSpin{ 0%,8%{transform:rotate(0deg)} 25%,33%{transform:rotate(90deg)} 50%,58%{transform:rotate(180deg)} 75%,83%{transform:rotate(270deg)} 100%{transform:rotate(360deg)} } /* -------------------------------------------------------------------------- AJUSTES PARA DISPOSITIVOS SEM MOUSE (touch) E ACESSIBILIDADE -------------------------------------------------------------------------- */ /* Sem mouse (celular/tablet) não faz sentido ter o brilho que segue o cursor */ @media(hover:none){ .cursor-glow{display:none}} /* Pessoas que pediram "reduzir animações" no sistema operacional: quase remove todas as transições/animações */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} /* === CORREÇÃO RODAPÉ CENTRALIZADO === */ .footer-bottom { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 14px !important; } .footer-bottom span { display: flex; justify-content: center; gap: 16px; width: 100%; font-size: 14px !important; letter-spacing: 0.08em; } .footer-bottom span a { font-size: 14px !important; font-weight: 500; } .footer-credit { display: block !important; width: 100% !important; text-align: center !important; margin-top: 20px !important; font-size: 14px !important; } }