/* ========================================================================== As Crônicas de Órion — folha de tema Cada livro é um "ambiente": muda a paleta inteira do site. O tema é escolhido pelo atributo data-livro no . ========================================================================== */ /* ---------------------------------------------------------------- paletas */ :root, body[data-livro="portal"] { --acc: #BF971F; /* dourado — a cor comum à trilogia */ --acc2: #A68E46; --gold: #D9BB25; --deep: #0B0A08; --deep-2: #17150F; --bg: #100E0B; --ink: #F4EFE4; --muted: #B7AB92; --linha: rgba(191, 151, 31, .28); --card: rgba(255,255,255,.05); --card-ink: #FFFFFF; --card-texto: rgba(255,255,255,.68); --card-olho: var(--gold); --tinta-1: rgba(191,151,31,.16); --tinta-2: rgba(166,5,18,.14); --tinta-3: rgba(3,74,166,.14); --painel: rgba(255,255,255,.035); } /* Livro 1 — A Profecia: vermelho e ouro */ body[data-livro="1"] { --acc: #A60512; --acc2: #BF971F; --gold: #D9BB25; --deep: #400202; --deep-2: #6B0710; --bg: #FCF7F0; --ink: #2A0505; --muted: #6E4F4A; --linha: rgba(166, 5, 18, .16); --card: #FFFFFF; --card-ink: var(--ink); --card-texto: var(--muted); --card-olho: var(--acc); --tinta-1: rgba(166,5,18,.14); /* vermelho da capa */ --tinta-2: rgba(217,187,37,.20); /* o ouro do título */ --tinta-3: rgba(64,2,2,.12); /* o vinho profundo */ --painel: rgba(255,255,255,.62); } /* Livro 2 — A Resistência: azul e ouro */ body[data-livro="2"] { --acc: #034AA6; --acc2: #A68E46; --gold: #A68E46; --deep: #020E26; --deep-2: #023373; --bg: #F4F7FB; --ink: #020E26; --muted: #4C5A70; --linha: rgba(3, 74, 166, .16); --card: #FFFFFF; --card-ink: var(--ink); --card-texto: var(--muted); --card-olho: var(--acc); --tinta-1: rgba(4,85,191,.15); /* azul da capa */ --tinta-2: rgba(166,142,70,.20); /* o ouro do título */ --tinta-3: rgba(2,14,38,.12); /* o azul-noite */ --painel: rgba(255,255,255,.62); } /* Livro 3 — em revisão; herda o dourado */ body[data-livro="3"] { --acc: #BF971F; --acc2: #735A0E; --gold: #D9BB25; --deep: #17150F; --deep-2: #2B2413; --bg: #FAF7EF; --ink: #1C1A12; --muted: #6B6350; --linha: rgba(191, 151, 31, .22); --card: #FFFFFF; --card-ink: var(--ink); --card-texto: var(--muted); --card-olho: var(--acc); } /* ------------------------------------------------------------------ base */ html { scroll-behavior: smooth; } *:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; } body { /* nada de cor chapada: três clarões da paleta do volume, como na arte da capa */ background: radial-gradient(1100px 760px at 8% 4%, var(--tinta-1), transparent 58%), radial-gradient(1000px 720px at 96% 26%, var(--tinta-2), transparent 60%), radial-gradient(1200px 900px at 42% 92%, var(--tinta-3), transparent 62%), var(--bg); background-attachment: fixed; color: var(--muted); font-family: "Poppins", sans-serif; transition: background-color .5s ease, color .5s ease; } h1, h2, h3, h4, h5, h6 { font-family: "Cinzel", Georgia, serif; /* a mesma família das capas */ font-weight: 600; color: var(--ink); letter-spacing: .02em; } /* o nome da série e os títulos de abertura, na versão decorada */ .portal h1, .banner-livro h1, .topo .selo-serie, .capa-reserva .nome { font-family: "Cinzel Decorative", "Cinzel", Georgia, serif; font-weight: 700; } a { color: var(--acc); } a:hover { color: var(--acc2); } .secao { padding: 110px 0; } .secao-clara { background: var(--painel); backdrop-filter: blur(2px); } .secao-escura { background: var(--deep); color: rgba(255,255,255,.72); } .secao-escura h1, .secao-escura h2, .secao-escura h3, .secao-escura h4 { color: #fff; } .titulo-secao { margin-bottom: 14px; font-size: 32px; line-height: 1.25; } .subtitulo-secao { max-width: 620px; margin: 0 auto 56px; text-align: center; } .olho { display: block; margin-bottom: 12px; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--acc); } .btn-orion { display: inline-block; padding: 15px 38px; background: var(--acc); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--acc); border-radius: 2px; transition: all .3s ease; } .btn-orion:hover { background: transparent; color: var(--acc); } .secao-escura .btn-orion:hover { color: #fff; border-color: #fff; } .btn-vazado { display: inline-block; padding: 15px 38px; background: transparent; color: var(--acc); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--acc); border-radius: 2px; transition: all .3s ease; } .btn-vazado:hover { background: var(--acc); color: #fff; } /* -------------------------------------------------------- capa do livro */ .capa { position: relative; display: block; width: 100%; max-width: 330px; margin: 0 auto; aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.45); background: linear-gradient(160deg, var(--deep-2), var(--deep)); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; } .capa:hover { transform: translateY(-10px); box-shadow: 0 42px 90px rgba(0,0,0,.55); } .capa img { width: 100%; height: 100%; object-fit: cover; display: block; } /* lombada: dá volume só na capa desenhada; sobre a arte real ela seria uma faixa estranha na borda esquerda, então some (ver .capa.com-arte::before abaixo) */ .capa::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.06)); z-index: 2; } /* capa de reserva, desenhada em CSS, para quando a arte ainda não está na pasta */ .capa-reserva { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 26px; text-align: center; border: 1px solid rgba(255,255,255,.10); } .capa-reserva .marca { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin-bottom: 26px; } .capa-reserva .nome { font-size: 30px; line-height: 1.15; color: #fff; margin: 0 0 20px; } .capa-reserva .fio { width: 46px; height: 1px; background: var(--gold); margin-bottom: 20px; } .capa-reserva .autora { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.62); } .capa img + .capa-reserva { display: none; } /* com arte real, a capa segue a proporção da própria imagem (nada é cortado) e encolhe até o tamanho dela — senão sobra fundo à direita */ .capa.com-arte { aspect-ratio: auto; width: fit-content; max-width: 100%; } .capa.com-arte img { width: auto; height: auto; max-width: 100%; object-fit: contain; } .capa.com-arte::before { display: none; } .capa.com-arte { background: none; box-shadow: 0 26px 60px rgba(0,0,0,.5); } /* Cada capa carrega a paleta do seu livro, esteja em que página estiver. */ .capa--l1 { --deep: #400202; --deep-2: #8C0A16; --gold: #D9BB25; } .capa--l2 { --deep: #020E26; --deep-2: #034AA6; --gold: #A68E46; } .capa--l3 { --deep: #17150F; --deep-2: #4A3C12; --gold: #D9BB25; } /* ------------------------------------------------------------- o portal */ .portal { --mx: 50%; --my: 50%; /* posição do cursor, atualizada pelo JS */ min-height: 100vh; background: radial-gradient(1100px 620px at 50% -10%, rgba(191,151,31,.15), transparent 62%), linear-gradient(180deg, #0B0A08, #17150F); display: flex; flex-direction: column; justify-content: center; padding: 70px 0 60px; position: relative; overflow: hidden; } /* o dourado da paleta seguindo o cursor — bem discreto, por trás de tudo */ .portal::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(217,187,37,.16), rgba(191,151,31,.06) 42%, transparent 68%); opacity: 0; transition: opacity .6s ease; } .portal.com-cursor::before { opacity: 1; } /* o brilho do lado que está sob o cursor ganha a cor daquele livro */ .portal::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease, background .6s ease; } /* cada lado do portal já nasce com a cor do seu livro, bem de leve */ .portal .lado { position: absolute; top: 0; bottom: 0; width: 46%; pointer-events: none; z-index: 0; } .portal .lado-1 { left: 0; background: radial-gradient(60% 55% at 40% 52%, rgba(166,5,18,.20), transparent 70%); } .portal .lado-2 { right: 0; background: radial-gradient(60% 55% at 60% 52%, rgba(3,74,166,.22), transparent 70%); } .portal.hover-1::after { opacity: 1; background: radial-gradient(900px 700px at 28% 55%, rgba(166,5,18,.42), transparent 68%); } .portal.hover-2::after { opacity: 1; background: radial-gradient(900px 700px at 72% 55%, rgba(3,74,166,.44), transparent 68%); } .portal > .container { position: relative; z-index: 2; } .portal .marca-serie { font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .portal h1 { font-size: 46px; line-height: 1.06; color: #fff; margin-bottom: 20px; } .portal .promessa { max-width: 640px; margin: 0 auto 44px; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.72); } .portal .promessa em { color: var(--gold); font-style: normal; } .hero-descricao { max-width: 700px; margin: -24px auto 22px; font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.76); } .hero-orientacao { margin: 0 auto 8px; color: var(--gold); font-family: "Cinzel", Georgia, serif; font-size: 18px; font-weight: 600; } .hero-disponibilidade { margin: 0 auto 22px; font-size: 13px; color: rgba(255,255,255,.62); } .hero-ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 42px; } .porta { text-align: center; padding: 0 10px; } .porta .capa { max-width: 235px; } .porta-1 { transform: scale(1.04); } .porta-1 .rotulo { color: var(--gold); } .livro-hint { margin: -4px 0 14px; font-size: 12px; color: rgba(255,255,255,.58); } /* as duas capas "pousam no mesmo chão", mesmo com proporções diferentes */ .porta .capa.com-arte { max-height: 360px; } .porta .capa.com-arte img { max-height: 360px; width: auto; } .porta .rotulo { margin-top: 20px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.52); } .porta h3 { font-size: 23px; color: #fff; margin: 6px 0 14px; } .porta .btn-porta { display: inline-block; padding: 13px 34px; border-radius: 2px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; border: 1px solid; transition: all .35s ease; } .porta-1 .btn-porta { color: #E8927A; border-color: rgba(166,5,18,.75); } .porta-1 .btn-porta:hover { background: #A60512; border-color: #A60512; color: #fff; } .porta-2 .btn-porta { color: #7FB0F0; border-color: rgba(3,74,166,.8); } .porta-2 .btn-porta:hover { background: #034AA6; border-color: #034AA6; color: #fff; } .elementos-historia { padding: 24px 0; background: rgba(11,10,8,.82); border-top: 1px solid rgba(217,187,37,.22); border-bottom: 1px solid rgba(217,187,37,.22); } .elementos-historia p { margin: 0; text-align: center; color: rgba(255,255,255,.82); font-family: "Cinzel", Georgia, serif; font-size: 15px; line-height: 1.9; } .elementos-historia span { color: var(--gold); padding: 0 7px; } .prova-social { padding: 76px 0 70px; background: linear-gradient(135deg, var(--deep), var(--deep-2)); color: rgba(255,255,255,.74); } .prova-social .titulo-secao { margin-top: 8px; color: #fff; } .prova-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 38px 0 34px; } .prova-item { height: 100%; margin: 0; padding: 34px 30px; display: flex; flex-direction: column; align-items: flex-start; background: var(--card); border: 1px solid var(--linha); border-radius: 3px; color: var(--card-texto); transition: transform .35s ease, box-shadow .35s ease; } .prova-item:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(0,0,0,.09); } .prova-item .estrelas { margin: 0 0 14px; color: var(--gold); font-size: 15px; letter-spacing: .16em; line-height: 1.4; } .prova-item h3 { margin: 0 0 14px; color: var(--card-ink); font-family: "Cinzel", Georgia, serif; font-size: 19px; line-height: 1.3; } .prova-item blockquote { flex: 1; margin: 0; color: var(--card-texto); font-family: "Poppins", sans-serif; font-size: 15px; line-height: 1.8; text-align: left; } .prova-item cite { display: block; margin-top: 20px; color: var(--gold); font-family: "Poppins", sans-serif; font-size: 12px; font-style: normal; line-height: 1.5; } @media (min-width: 576px) and (max-width: 991px) { .prova-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prova-item:last-child { grid-column: 1 / -1; width: calc(50% - 12px); justify-self: center; } } /* --------------------------------------------------- barra do livro 3 */ .faixa-livro3 { background: linear-gradient(135deg, var(--deep), var(--deep-2)); color: rgba(255,255,255,.74); padding: 84px 0; } .faixa-livro3 h2 { color: #fff; } .faixa-livro3 .selo { display: inline-block; padding: 6px 16px; margin-bottom: 20px; border: 1px solid var(--gold); border-radius: 40px; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } .barra { height: 4px; border-radius: 4px; margin: 30px 0 12px; background: rgba(255,255,255,.14); overflow: hidden; } .barra span { display: block; height: 100%; background: var(--gold); border-radius: 4px; } .barra-legenda { font-size: 12px; letter-spacing: .06em; color: rgba(255,255,255,.55); } .livro3-frase { max-width: 560px; margin: 26px 0 20px; color: rgba(255,255,255,.9); font-family: "Cinzel", Georgia, serif; font-size: 19px; line-height: 1.65; } .livro3-cta { margin-top: 24px; color: var(--gold); border-color: rgba(217,187,37,.7); } .livro3-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--deep); } /* ------------------------------------------------------------- cartões */ .cartao { height: 100%; padding: 34px 30px; border-radius: 3px; background: var(--card); border: 1px solid var(--linha); transition: transform .35s ease, box-shadow .35s ease; } .cartao:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(0,0,0,.09); } .cartao h4 { font-size: 19px; line-height:1.3; margin-bottom: 6px; color: var(--card-ink); } .cartao .papel { display: block; margin-bottom: 14px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--card-olho); } .cartao p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--card-texto); } .secao-escura .cartao { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); } .secao-escura .cartao h4 { color: #fff; } .secao-escura .cartao p { color: rgba(255,255,255,.66); } .secao-escura .cartao .papel { color: var(--gold); } /* ------------------------------------------------------------- banner */ .banner-livro { position: relative; padding: 190px 0 120px; background: linear-gradient(135deg, var(--deep) 0%, var(--deep-2) 100%); color: rgba(255,255,255,.76); overflow: hidden; } .banner-livro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 520px at 78% 42%, rgba(255,255,255,.10), transparent 66%); } .banner-livro .container { position: relative; z-index: 2; } .banner-livro .volume { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .banner-livro h1 { font-size: 56px; line-height: 1.04; color: #fff; margin-bottom: 22px; } .banner-livro .linha-fina { font-size: 19px; line-height: 1.7; color: rgba(255,255,255,.74); margin-bottom: 34px; } .orientacao-livro { margin: -18px 0 22px; color: var(--gold); font-family: "Cinzel", Georgia, serif; font-size: 14px; line-height: 1.6; } .disponibilidade-livro { margin: 18px 0 0; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.6; } .disponibilidade-compra { margin: 20px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; } /* --------------------------------------------------------- cabeçalho */ .topo { position: fixed; top: 0; left: 0; right: 0; z-index: 900; padding: 20px 0; background: rgba(11,10,8,.0); transition: background .35s ease, padding .35s ease, box-shadow .35s ease; } .topo.preso { background: var(--deep); padding: 13px 0; box-shadow: 0 6px 26px rgba(0,0,0,.28); } .topo .selo-serie { font-size: 19px; color: #fff; text-decoration: none; } .topo .selo-serie span { color: var(--gold); } .topo nav a { margin-left: 26px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); text-decoration: none; } .topo nav a:hover, .topo nav a.ativo { color: var(--gold); } /* ------------------------------------------------------------- rodapé */ .rodape { background: var(--deep); color: rgba(255,255,255,.52); padding: 66px 0 34px; font-size: 14px; } .rodape h4 { color: #fff; font-size: 16px; margin-bottom: 14px; } .rodape a { color: rgba(255,255,255,.72); } .rodape a:hover { color: var(--gold); } .rodape .fina { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10); font-size: 12px; color: rgba(255,255,255,.38); } /* ------------------------------------------------------- sinopse/trecho */ .sinopse p { font-size: 17px; line-height: 1.9; } .sinopse p + p { margin-top: 18px; } .sinopse-completa { overflow: hidden; } .sinopse-toggle { display: block; margin: 28px auto 0; padding: 12px 22px; border: 1px solid var(--acc); border-radius: 2px; background: transparent; color: var(--acc); font: 600 11px "Poppins", sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } .sinopse-toggle:hover { background: var(--acc); color: #fff; } .trecho { padding: 46px 52px; border-left: 3px solid var(--acc); background: #fff; border-radius: 2px; font-family: "Cinzel", Georgia, serif; font-size: 21px; line-height: 1.75; color: var(--ink); } .secao-escura .trecho { background: rgba(255,255,255,.04); color: #fff; } .secao-escura .trecho .fonte { color: var(--gold); } .trecho .fonte { display: block; margin-top: 22px; font-family: "Poppins", sans-serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--acc); } /* --------------------------------------------------------------- mapa */ .mapa-quadro { border: 1px solid var(--linha); border-radius: 3px; overflow: hidden; background: #fff; } .mapa-quadro img { width: 100%; display: block; } .mapa-secao { width: 100%; overflow: hidden; background: #fff; } .mapa-secao .mapa-quadro { border: 0; border-radius: 0; } .mapa-secao .mapa-quadro img { width: 100%; height: auto; min-height: 0; object-fit: contain; } .mapa-ausente { padding: 90px 30px; text-align: center; color: var(--muted); background: repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 12px, transparent 12px 24px); } /* ------------------------------------------------------------ animação */ .surge { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; } .surge.visivel { opacity: 1; transform: none; } /* ---------------------------------------------------------- responsivo */ @media (max-width: 991px) { .portal h1 { font-size: 32px; } .banner-livro h1 { font-size: 34px; } .banner-livro { padding: 150px 0 90px; } .secao { padding: 76px 0; } .titulo-secao { font-size: 25px; } .trecho { padding: 32px 26px; font-size: 17px; } .porta { margin-bottom: 56px; } /* no celular o cabeçalho empilha: marca em cima, atalhos embaixo */ .topo { padding: 12px 0; } .topo .container { flex-direction: column; } .topo .selo-serie { font-size: 16px; } .topo nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 8px; } .topo nav a { margin-left: 0; font-size: 9px; letter-spacing: .12em; } /* o banner desce um pouco, para não ficar sob o cabeçalho de duas linhas */ .banner-livro { padding: 170px 0 80px; } /* o dourado que segue o cursor não existe no toque */ .portal::before { display: none; } } @media (max-width: 575px) { .portal { padding-bottom: 64px; } .portal .promessa { margin-bottom: 28px; font-size: 16px; } .hero-descricao { margin-top: -10px; font-size: 15px; line-height: 1.75; } .hero-orientacao { font-size: 16px; } .hero-ctas { flex-direction: column; align-items: stretch; margin-bottom: 34px; } .hero-ctas a { text-align: center; } .porta-1 { transform: none; } .elementos-historia { padding: 22px 14px; } .elementos-historia p { font-size: 14px; line-height: 2; } .elementos-historia span { padding: 0 3px; } .prova-social { padding: 60px 0 54px; } .prova-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; } .prova-item { padding: 30px 24px; } .porta .capa.com-arte, .porta .capa.com-arte img { max-height: none; } .banner-livro .linha-fina { font-size: 16px; } .btn-orion, .btn-vazado { padding: 13px 26px; font-size: 11px; } .btn-vazado { margin-left: 0 !important; margin-top: 10px; } .trecho { padding: 26px 20px; font-size: 16px; } .secao { padding: 60px 0; } .faixa-livro3 .col-lg-4 .capa { margin-top: 36px; } } /* ============================================ o mockup 3D em tela cheia */ .capa[data-mockup] { cursor: zoom-in; } /* selo discreto no canto da capa, avisando que dá para abrir */ .capa[data-mockup]::after { content: "ver o livro"; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%) translateY(8px); z-index: 3; padding: 7px 16px; border-radius: 40px; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.28); font-family: "Poppins", sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #fff; white-space: nowrap; opacity: 0; transition: opacity .3s ease, transform .3s ease; } .capa[data-mockup]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } .visor { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: rgba(6,5,4,.94); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; } .visor.aberto { opacity: 1; visibility: visible; } .visor img { max-width: min(1100px, 94vw); max-height: 86vh; width: auto; height: auto; display: block; border-radius: 3px; box-shadow: 0 40px 90px rgba(0,0,0,.6); transform: scale(.96); transition: transform .35s ease; } .visor.aberto img { transform: scale(1); } .visor .legenda { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.6); } .visor .fechar { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.10); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background .25s ease; } .visor .fechar:hover { background: rgba(255,255,255,.22); } /* ====================================================== avaliações */ .avaliacao { height: 100%; display: flex; flex-direction: column; padding: 34px 30px; border-radius: 3px; background: var(--card); border: 1px solid var(--linha); } .estrelas { color: var(--gold); font-size: 15px; letter-spacing: .16em; margin-bottom: 14px; } .avaliacao h4 { font-size: 16px; line-height: 1.35; margin-bottom: 14px; color: var(--card-ink); } .avaliacao p { flex: 1; margin: 0 0 20px; font-size: 15px; line-height: 1.8; color: var(--card-texto); font-style: italic; } .avaliacao .quem { font-family: "Poppins", sans-serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--acc); } .avaliacao .quem span { color: var(--muted); letter-spacing: .06em; text-transform: none; } .secao-escura .avaliacao { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); } .secao-escura .avaliacao h4 { color: #fff; } .secao-escura .avaliacao p { color: rgba(255,255,255,.68); } .secao-escura .avaliacao .quem { color: var(--gold); } .secao-escura .avaliacao .quem span { color: rgba(255,255,255,.45); } /* ============================================== o cursor, em ouro da paleta */ /* Com o Cursorly ligado, o cursor é desenhado num canvas: o do sistema some. A biblioteca põe cursor:pointer nos links por conta própria — o !important abaixo evita a seta do sistema aparecendo junto com o ícone desenhado. */ body.com-cursorly, body.com-cursorly a, body.com-cursorly button, body.com-cursorly .capa[data-mockup], body.com-cursorly input, body.com-cursorly label { cursor: none !important; } @media (hover: hover) and (pointer: fine) { body { cursor: url('data:image/svg+xml;utf8,') 3 2, auto; } a, button, summary, [role="button"], .capa[data-mockup], .visor .fechar, input[type="checkbox"], label { cursor: url('data:image/svg+xml;utf8,') 9 2, pointer; } } /* =============================================== seção do Órionverso */ .orionverso { position: relative; overflow: hidden; padding: 96px 0; background: radial-gradient(760px 460px at 18% 18%, rgba(217,187,37,.20), transparent 64%), radial-gradient(700px 460px at 86% 78%, rgba(191,151,31,.14), transparent 66%), linear-gradient(135deg, var(--deep), var(--deep-2)); color: rgba(255,255,255,.74); border-top: 1px solid rgba(217,187,37,.24); } .orionverso .container { position: relative; z-index: 2; } .orionverso .selo { display: inline-block; padding: 6px 16px; margin-bottom: 18px; border: 1px solid var(--gold); border-radius: 40px; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } .orionverso-status { display: block; margin: -4px 0 18px; color: rgba(255,255,255,.48); font-size: 10px; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; } .orionverso h2 { color: #fff; margin-bottom: 14px; } .orionverso .chamada { font-size: 17px; line-height: 1.8; margin-bottom: 30px; } .motivos { list-style: none; padding: 0; margin: 0 0 8px; } .motivos li { position: relative; padding: 0 0 16px 34px; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.72); } .motivos li strong { display: block; color: #fff; font-weight: 500; } .motivos li::before { content: "\2726"; /* a estrela de quatro pontas, como nas capas */ position: absolute; left: 0; top: 1px; font-size: 14px; line-height: 1.6; color: var(--gold); } /* ------------------------------------------------------------ o cartão */ .portao { padding: 38px 34px; border-radius: 4px; background: rgba(0,0,0,.34); border: 1px solid rgba(217,187,37,.30); backdrop-filter: blur(3px); } .portao h3 { color: #fff; font-size: 22px; margin-bottom: 8px; } .portao .nota { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.55); } .portao .confirmacao-optin { margin: 0 0 18px; color: rgba(255,255,255,.62); } .portao label { display: block; margin-bottom: 6px; font-family: "Poppins", sans-serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .portao input[type="text"], .portao input[type="email"] { width: 100%; margin-bottom: 18px; padding: 13px 15px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 2px; color: #fff; font-family: "Poppins", sans-serif; font-size: 15px; transition: border-color .25s ease, background .25s ease; } .portao input::placeholder { color: rgba(255,255,255,.35); } .portao input:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.10); } .portao button { width: 100%; padding: 15px 20px; background: var(--gold); color: #17150F; border: 1px solid var(--gold); border-radius: 2px; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; transition: background .3s ease, color .3s ease; } .portao button:hover { background: transparent; color: var(--gold); } .portao .aviso { margin-top: 16px; padding: 13px 15px; border-radius: 2px; font-size: 13px; line-height: 1.6; display: none; } .portao .aviso.ok { display: block; background: rgba(217,187,37,.14); border: 1px solid rgba(217,187,37,.4); color: #fff; } .portao .aviso.erro { display: block; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.8); } .orionverso-sucesso { padding: 24px 0 4px; color: rgba(255,255,255,.76); } .orionverso-sucesso h4 { margin: 0 0 14px; color: #fff; font-size: 22px; line-height: 1.3; } .orionverso-sucesso p { margin: 0; font-size: 14px; line-height: 1.75; } .orionverso-sucesso p + p { margin-top: 14px; color: rgba(255,255,255,.58); } @media (max-width: 991px) { .orionverso { padding: 66px 0; } .portao { margin-top: 40px; padding: 30px 24px; } }