/* ============================================================================ * PHILOSOPHY STUDENT — Sistema de Design * Direção estética: * · TEMA CLARO (padrão): "manuscrito iluminado" — marfim e pergaminho, * tinta profunda, ouro em folha, um acento de lápis-lazúli, geometria * sagrada como ornamento. * · TEMA ESCURO: "observatório cósmico" — noite celeste, ouro vivo, * estrelas em deriva. * * Mecanismo: . As variáveis em :root definem * o claro; [data-tema="escuro"] as sobrescreve. Persistência via * localStorage('tema') no js/app.js. * * Tipografia: Cinzel (display lapidar) · Cormorant Garamond (corpo) * Frank Ruhl Libre (hebraico) * ========================================================================== */ :root { color-scheme: light; /* — fundo: marfim e osso — */ --fundo-0: #f3ecd8; --fundo-1: #f9f4e6; --fundo-2: #ece1c6; --veu: rgba(56, 44, 22, 0.42); /* — ouro em folha (escurecido para legibilidade sobre marfim) — */ --ouro: #a07c28; --ouro-claro: #7c5e1a; /* ouro para texto/títulos */ --ouro-vivo: #6b4e12; /* o mais intenso (hover, foco) */ --ouro-fosco: rgba(150, 116, 40, 0.45); --ouro-tenue: rgba(150, 116, 40, 0.14); /* — acento de joia: lápis-lazúli — */ --joia: #34598c; --joia-tenue: rgba(52, 89, 140, 0.12); /* — pergaminho (cartões de leitura) — */ --perg: #fbf5e4; --perg-2: #f1e6c9; --perg-borda: #cdb98a; --tinta: #2b2214; --tinta-suave: #5a4c32; /* — texto sobre o marfim — */ --texto: #2e2516; --texto-suave: #6d5b3c; --texto-apagado: #93835f; /* — superfícies — */ --superficie: rgba(255, 252, 242, 0.66); --superficie-firme: #fdf8ea; --topo-fundo: rgba(250, 245, 231, 0.88); /* — halo atrás de textos do SVG da Árvore — */ --halo: rgba(249, 244, 230, 0.9); /* — gradiente do título-herói — */ --titulo-a: #7c5e1a; --titulo-b: #a07c28; --titulo-c: #5a4310; /* — sombras — */ --sombra-1: 0 4px 18px rgba(90, 70, 30, 0.14); --sombra-2: 0 12px 34px rgba(90, 70, 30, 0.2); --sombra-gaveta: -24px 0 70px rgba(80, 62, 26, 0.25); /* — tipografia — */ --f-display: 'Cinzel', 'Times New Roman', serif; --f-corpo: 'Cormorant Garamond', Georgia, serif; --f-hebraico: 'Frank Ruhl Libre', 'Times New Roman', serif; /* — ritmo — */ --raio: 10px; --transicao: 280ms cubic-bezier(0.33, 1, 0.5, 1); } [data-tema="escuro"] { color-scheme: dark; --fundo-0: #060912; --fundo-1: #0b1022; --fundo-2: #121833; --veu: rgba(4, 6, 13, 0.6); --ouro: #c9a45c; --ouro-claro: #ecd29a; --ouro-vivo: #f5e3b8; --ouro-fosco: rgba(201, 164, 92, 0.38); --ouro-tenue: rgba(201, 164, 92, 0.16); --joia: #8fb0e0; --joia-tenue: rgba(110, 140, 200, 0.14); --perg: #f0e6cd; --perg-2: #e6d8b6; --perg-borda: #c9b88c; --tinta: #2b2214; --tinta-suave: #5a4c32; --texto: #ddd5c0; --texto-suave: #9d9683; --texto-apagado: #7b7567; --superficie: rgba(13, 18, 38, 0.55); --superficie-firme: #10162e; --topo-fundo: rgba(9, 13, 28, 0.86); --halo: rgba(6, 9, 18, 0.85); --titulo-a: #f5e3b8; --titulo-b: #c9a45c; --titulo-c: #8a6c33; --sombra-1: 0 4px 18px rgba(0, 0, 0, 0.45); --sombra-2: 0 12px 34px rgba(0, 0, 0, 0.55); --sombra-gaveta: -30px 0 80px rgba(0, 0, 0, 0.6); } /* ---------------------------------------------------------------------------- * Base * -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--f-corpo); font-size: 19px; line-height: 1.65; color: var(--texto); background-color: var(--fundo-0); background-image: radial-gradient(1100px 700px at 50% -120px, rgba(160, 124, 40, 0.10), transparent 65%), radial-gradient(900px 900px at 88% 38%, rgba(52, 89, 140, 0.05), transparent 60%), radial-gradient(800px 800px at 8% 72%, rgba(150, 116, 40, 0.06), transparent 60%), linear-gradient(180deg, var(--fundo-1) 0%, var(--fundo-0) 55%, var(--fundo-2) 100%); background-attachment: fixed; overflow-x: hidden; transition: background-color 450ms ease, color 450ms ease; } [data-tema="escuro"] body { background-image: radial-gradient(1100px 700px at 50% -120px, rgba(64, 78, 148, 0.32), transparent 65%), radial-gradient(900px 900px at 88% 38%, rgba(120, 84, 160, 0.10), transparent 60%), radial-gradient(800px 800px at 8% 72%, rgba(38, 86, 110, 0.12), transparent 60%), linear-gradient(180deg, var(--fundo-1) 0%, var(--fundo-0) 55%, #04060d 100%); } ::selection { background: var(--ouro); color: var(--fundo-1); } img { max-width: 100%; display: block; } a { color: var(--ouro-claro); text-decoration: none; transition: color var(--transicao); } a:hover { color: var(--ouro-vivo); } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; color: var(--ouro-claro); letter-spacing: 0.04em; line-height: 1.2; margin: 0 0 0.5em; } [lang="he"], .hebraico { font-family: var(--f-hebraico); direction: rtl; unicode-bidi: isolate; } :focus-visible { outline: 2px solid var(--ouro-vivo); outline-offset: 3px; border-radius: 4px; } button { font: inherit; } /* ---------------------------------------------------------------------------- * Atmosfera: céu estrelado (só no escuro) + grão de vellum (ambos) * -------------------------------------------------------------------------- */ .ceu { position: fixed; inset: 0; pointer-events: none; z-index: 0; display: none; } [data-tema="escuro"] .ceu { display: block; } .ceu::before, .ceu::after { content: ''; position: absolute; inset: -200px; background-repeat: repeat; } .ceu::before { background-image: radial-gradient(1.4px 1.4px at 22px 34px, rgba(236, 210, 154, 0.85), transparent 55%), radial-gradient(1px 1px at 118px 96px, rgba(220, 226, 255, 0.7), transparent 55%), radial-gradient(1.2px 1.2px at 196px 158px, rgba(236, 210, 154, 0.55), transparent 55%), radial-gradient(0.9px 0.9px at 64px 210px, rgba(220, 226, 255, 0.6), transparent 55%), radial-gradient(1.1px 1.1px at 250px 60px, rgba(236, 210, 154, 0.5), transparent 55%); background-size: 290px 290px; animation: deriva 240s linear infinite; opacity: 0.8; } .ceu::after { background-image: radial-gradient(2.2px 2.2px at 88px 44px, rgba(245, 227, 184, 0.9), transparent 60%), radial-gradient(1.8px 1.8px at 312px 220px, rgba(200, 212, 255, 0.8), transparent 60%), radial-gradient(2px 2px at 180px 330px, rgba(245, 227, 184, 0.65), transparent 60%); background-size: 420px 420px; animation: cintilar 7s ease-in-out infinite alternate, deriva 360s linear infinite reverse; } @keyframes deriva { to { transform: translate3d(140px, 90px, 0); } } @keyframes cintilar { from { opacity: 0.35; } to { opacity: 0.9; } } .grao { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.045; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } [data-tema="escuro"] .grao { opacity: 0.05; mix-blend-mode: overlay; } main, header.topo, footer.rodape { position: relative; z-index: 1; } /* ---------------------------------------------------------------------------- * Cabeçalho * -------------------------------------------------------------------------- */ header.topo { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem clamp(1rem, 4vw, 3rem); background: var(--topo-fundo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--ouro-tenue); transition: background-color 450ms ease; } .marca { display: flex; align-items: center; gap: 0.75rem; color: var(--ouro-claro); } .marca svg { display: block; } .marca svg .logo-traco { stroke: var(--ouro); } .marca svg .logo-no { fill: var(--ouro-claro); } .marca-nome { font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; } .marca-nome small { display: block; font-family: var(--f-corpo); font-size: 0.72rem; font-style: italic; letter-spacing: 0.1em; text-transform: none; color: var(--texto-suave); } .topo-direita { display: flex; align-items: center; gap: clamp(0.7rem, 2.5vw, 1.6rem); } nav.navega { display: flex; gap: clamp(0.8rem, 3vw, 2rem); } nav.navega a { font-family: var(--f-display); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto); padding: 0.35rem 0.1rem; border-bottom: 1px solid transparent; transition: color var(--transicao), border-color var(--transicao); } nav.navega a:hover, nav.navega a[aria-current="page"] { color: var(--ouro-vivo); border-bottom-color: var(--ouro); } /* — alternador de tema (sol / lua) — */ .alterna-tema { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ouro-fosco); background: transparent; color: var(--ouro-claro); cursor: pointer; flex-shrink: 0; transition: background var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao); } .alterna-tema:hover { background: var(--ouro-tenue); border-color: var(--ouro); transform: rotate(15deg); } .alterna-tema svg { display: block; } .alterna-tema .icone-sol { display: none; } .alterna-tema .icone-lua { display: block; } [data-tema="escuro"] .alterna-tema .icone-sol { display: block; } [data-tema="escuro"] .alterna-tema .icone-lua { display: none; } /* ---------------------------------------------------------------------------- * Herói * -------------------------------------------------------------------------- */ .heroi { text-align: center; padding: clamp(4rem, 10vh, 7rem) 1.25rem 3rem; position: relative; } .heroi .selo-logo { margin: 0 auto 1.6rem; filter: drop-shadow(0 0 28px var(--ouro-tenue)); } .heroi-he { font-family: var(--f-hebraico); font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--ouro); letter-spacing: 0.12em; opacity: 0.9; margin-bottom: 0.4rem; } .heroi h1 { font-size: clamp(2.2rem, 6.5vw, 4.2rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.35em; background: linear-gradient(165deg, var(--titulo-a) 20%, var(--titulo-b) 55%, var(--titulo-c) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .heroi-frase { font-size: clamp(1.1rem, 2.4vw, 1.45rem); font-style: italic; color: var(--texto); max-width: 42ch; margin: 0 auto; } .heroi-frase em { color: var(--ouro-claro); font-style: normal; } /* divisor ornamental ✦ */ .divisor { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2.4rem auto; max-width: 480px; color: var(--ouro); } .divisor::before, .divisor::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ouro-fosco)); } .divisor::after { background: linear-gradient(90deg, var(--ouro-fosco), transparent); } .divisor span { font-size: 0.9rem; letter-spacing: 0.5em; text-indent: 0.5em; } /* ---------------------------------------------------------------------------- * Blocos de conteúdo * -------------------------------------------------------------------------- */ .faixa { max-width: 1180px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem); } .faixa-titulo { text-align: center; font-size: clamp(1.4rem, 3.4vw, 2rem); margin-bottom: 0.3em; } .faixa-sub { text-align: center; font-style: italic; color: var(--texto-suave); max-width: 62ch; margin: 0 auto 2.2rem; } .intro { max-width: 68ch; margin: 0 auto; text-align: center; font-size: 1.12rem; } .intro .capitular::first-letter { font-family: var(--f-display); font-size: 3.2em; float: left; line-height: 0.82; padding: 0.06em 0.12em 0 0; color: var(--ouro); } .intro .capitular { text-align: left; } /* ---------------------------------------------------------------------------- * As duas faces — Vida ↔ Morte * -------------------------------------------------------------------------- */ .faces-arvore { display: flex; align-items: center; justify-content: center; gap: 0; width: max-content; max-width: 100%; margin: 0 auto 0.5rem; border: 1px solid var(--ouro-fosco); border-radius: 999px; padding: 4px; background: var(--superficie); box-shadow: var(--sombra-1); } .face-btn { font-family: var(--f-display); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-suave); background: transparent; border: none; border-radius: 999px; padding: 0.55rem 1.4rem; cursor: pointer; transition: background var(--transicao), color var(--transicao), box-shadow var(--transicao); } .face-btn:hover { color: var(--ouro-vivo); } .face-btn[aria-pressed="true"][data-modo="vida"] { background: linear-gradient(160deg, var(--ouro), var(--titulo-c)); color: #fdf8ec; box-shadow: 0 2px 12px var(--ouro-fosco); } .face-btn[aria-pressed="true"][data-modo="morte"] { background: linear-gradient(160deg, #2a1c26, #120d16); color: #cdb6c2; box-shadow: 0 2px 14px rgba(40, 18, 34, 0.55); } .faces-nota { text-align: center; font-style: italic; color: var(--texto-suave); font-size: 0.98rem; margin: 0.4rem 0 1rem; } /* introdução da Sitra Achra (aparece no modo Morte) */ .sitra-intro { max-width: 70ch; margin: 0 auto 1.6rem; padding: 1.1rem 1.5rem; font-size: 1.05rem; font-style: italic; line-height: 1.7; color: #c9bdd1; background: radial-gradient(120% 120% at 50% 0%, rgba(90, 47, 58, 0.25), transparent 70%), linear-gradient(170deg, #181221 0%, #0d0a12 100%); border: 1px solid rgba(122, 74, 85, 0.4); border-radius: var(--raio); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), var(--sombra-1); animation: surge 420ms ease both; } .sitra-intro::before { content: 'סִטְרָא אָחֳרָא · O OUTRO LADO'; display: block; font-family: var(--f-display); font-size: 0.68rem; font-style: normal; letter-spacing: 0.3em; color: #9a7484; margin-bottom: 0.5rem; } /* ---------------------------------------------------------------------------- * A Árvore — palco * -------------------------------------------------------------------------- */ .palco-arvore { display: grid; grid-template-columns: minmax(0, 640px); justify-content: center; position: relative; } .arvore-moldura { position: relative; padding: clamp(0.5rem, 2vw, 1.5rem); border-radius: calc(var(--raio) * 2); transition: background 600ms ease, box-shadow 600ms ease; } .arvore-moldura::before { content: ''; position: absolute; inset: 8%; background: radial-gradient(ellipse 60% 50% at 50% 42%, var(--ouro-tenue), transparent 70%); pointer-events: none; transition: opacity 600ms ease; } /* — modo Morte: o palco escurece, mesmo no tema claro — */ .palco-arvore.modo-morte .arvore-moldura { background: radial-gradient(ellipse 80% 60% at 50% 38%, rgba(74, 38, 52, 0.30), transparent 75%), linear-gradient(175deg, #171221 0%, #0b0810 100%); box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.65), var(--sombra-2); } .palco-arvore.modo-morte .arvore-moldura::before { opacity: 0; } .dica-arvore { text-align: center; font-style: italic; color: var(--texto-suave); font-size: 1rem; margin: 0 0 1rem; } .dica-arvore b { color: var(--ouro-claro); font-weight: 600; } svg.arvore { width: 100%; height: auto; display: block; overflow: visible; } /* — mundos (faixas de fundo) — */ .arvore .mundo-faixa { fill: var(--joia-tenue); opacity: 0.25; } .arvore .mundo-divisa { stroke: var(--ouro-fosco); stroke-width: 0.7; stroke-dasharray: 2 7; opacity: 0.55; } .arvore .mundo-rotulo { font-family: var(--f-display); font-size: 13px; letter-spacing: 0.28em; fill: var(--texto-apagado); text-transform: uppercase; } .arvore .mundo-rotulo tspan { fill: var(--ouro-fosco); font-size: 11px; letter-spacing: 0.1em; } /* — caminhos (22 netivot) — */ .arvore .caminho { stroke: var(--ouro); stroke-width: 1.6; stroke-linecap: round; opacity: 0.34; fill: none; transition: opacity 360ms ease, stroke 360ms ease, stroke-width 360ms ease; } .arvore .caminho-letra { font-family: var(--f-hebraico); font-size: 15px; fill: var(--ouro); opacity: 0.5; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--halo); stroke-width: 4px; transition: opacity 360ms ease, fill 360ms ease; pointer-events: none; } /* — nós (sefirot / qliphoth) — */ .arvore .no { cursor: pointer; transition: opacity 420ms ease, filter 420ms ease; } .arvore .no .aura { opacity: 0.16; animation: pulsoAura 5.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } .arvore .no:nth-child(odd) .aura { animation-delay: -2.6s; } @keyframes pulsoAura { 0%, 100% { opacity: 0.12; transform: scale(0.96); } 50% { opacity: 0.30; transform: scale(1.06); } } .arvore .no .disco { stroke: var(--ouro-fosco); stroke-width: 1.4; transition: stroke var(--transicao), stroke-width var(--transicao), filter var(--transicao); } .arvore .no .anel { fill: none; stroke: var(--ouro-fosco); stroke-width: 0.8; stroke-dasharray: 3 5; opacity: 0.7; } .arvore .no text { pointer-events: none; } .arvore .no .no-he { font-family: var(--f-hebraico); font-size: 23px; font-weight: 500; text-anchor: middle; } .arvore .no .no-num { font-family: var(--f-display); font-size: 12px; letter-spacing: 0.1em; text-anchor: middle; opacity: 0.75; } .arvore .no .no-legenda { font-family: var(--f-display); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; fill: var(--ouro-claro); text-anchor: middle; opacity: 0.9; paint-order: stroke; stroke: var(--halo); stroke-width: 4px; } .arvore .no .no-sub { font-family: var(--f-corpo); font-style: italic; font-size: 11.5px; letter-spacing: 0.06em; text-transform: none; } .arvore .no:hover .disco, .arvore .no:focus-visible .disco { stroke: var(--ouro-vivo); stroke-width: 2.4; filter: drop-shadow(0 0 14px var(--ouro-fosco)); } .arvore .no:hover .aura { opacity: 0.42; } /* — Daat: o nó oculto — */ .arvore .no.oculta .disco { fill-opacity: 0.12; stroke: var(--texto-suave); stroke-dasharray: 5 6; stroke-width: 1.2; } .arvore .no.oculta .no-he { fill: var(--texto-suave); font-size: 19px; } .arvore .no.oculta .no-legenda { fill: var(--texto-suave); opacity: 0.6; } .arvore .no.oculta .aura { opacity: 0.06; } .arvore .no.oculta:hover .disco { stroke: var(--ouro-claro); } /* — modo Morte dentro do SVG — */ .arvore.modo-morte .mundo-faixa { fill: rgba(150, 120, 200, 0.05); opacity: 0.3; } .arvore.modo-morte .mundo-divisa { stroke: rgba(150, 110, 130, 0.4); } .arvore.modo-morte .mundo-rotulo { fill: #5e5468; } .arvore.modo-morte .mundo-rotulo tspan { fill: #4d4356; } .arvore.modo-morte .caminho { stroke: #6e4250; opacity: 0.42; } .arvore.modo-morte .caminho-letra { fill: #8a5e6e; stroke: #0b0810; } .arvore.modo-morte .no .disco { stroke: rgba(150, 110, 130, 0.55); } .arvore.modo-morte .no .anel { stroke: rgba(150, 110, 130, 0.4); } .arvore.modo-morte .no .no-legenda { fill: #b9a3b3; stroke: #0b0810; } .arvore.modo-morte .no .no-sub { fill: #7d6a7c; } .arvore.modo-morte .no:hover .disco, .arvore.modo-morte .no:focus-visible .disco { stroke: #c98a9a; filter: drop-shadow(0 0 14px rgba(122, 42, 58, 0.6)); } .arvore.modo-morte .no.oculta .disco { stroke: #5e5468; } .arvore.modo-morte .no.oculta .no-he { fill: #8a7e94; } .arvore.modo-morte .no.oculta .no-legenda { fill: #8a7e94; } /* — estados de seleção — */ .arvore.tem-selecao .caminho { opacity: 0.07; } .arvore.tem-selecao .caminho.aceso { opacity: 0.95; stroke: var(--ouro-vivo); stroke-width: 2.6; filter: drop-shadow(0 0 6px var(--ouro-fosco)); } .arvore.modo-morte.tem-selecao .caminho.aceso { stroke: #b76a7e; filter: drop-shadow(0 0 6px rgba(183, 106, 126, 0.55)); } .arvore.tem-selecao .caminho-letra { opacity: 0.08; } .arvore.tem-selecao .caminho-letra.aceso { opacity: 1; fill: var(--ouro-vivo); } .arvore.modo-morte.tem-selecao .caminho-letra.aceso { fill: #c98a9a; } .arvore.tem-selecao .no { opacity: 0.26; } .arvore.tem-selecao .no.vizinho { opacity: 0.66; } .arvore.tem-selecao .no.ativo { opacity: 1; } .arvore.tem-selecao .no.ativo .disco { stroke: var(--ouro-vivo); stroke-width: 3; filter: drop-shadow(0 0 22px var(--ouro-fosco)); } .arvore.modo-morte.tem-selecao .no.ativo .disco { stroke: #c98a9a; filter: drop-shadow(0 0 22px rgba(122, 42, 58, 0.7)); } .arvore.tem-selecao .no.ativo .aura { opacity: 0.5; animation-duration: 2.8s; } /* — revelação orquestrada no carregamento — */ /* ATENÇÃO: o EXTERNO é posicionado pelo ATRIBUTO transform="translate(x,y)". Animar a PROPRIEDADE CSS transform nele sobrescreve o atributo e joga todos os nós para (0,0). NUNCA animar o .no. A revelação com escala acontece no INTERNO, que não carrega transform de posicionamento (transform-box: fill-box garante a origem no centro do próprio nó). */ .arvore .no { animation: none; } .arvore .no-vis { transform-box: fill-box; transform-origin: center; animation: nasceVis 900ms cubic-bezier(0.34, 1.3, 0.45, 1) backwards; animation-delay: var(--d, 0ms); transition: transform 320ms cubic-bezier(0.33, 1, 0.5, 1); } @keyframes nasceVis { from { opacity: 0; transform: scale(0.45); } to { opacity: 1; transform: scale(1); } } .arvore .no:hover .no-vis, .arvore .no:focus-visible .no-vis { transform: scale(1.05); } .arvore.tem-selecao .no.ativo .no-vis { transform: scale(1.07); } .arvore .caminho, .arvore .caminho-letra { animation: nasceCaminho 900ms ease both; animation-delay: var(--d, 0ms); } @keyframes nasceCaminho { from { opacity: 0; } } .arvore .fundo-mundos { animation: nasceCaminho 1400ms ease both; } /* ---------------------------------------------------------------------------- * Gaveta de detalhe (drawer) * -------------------------------------------------------------------------- */ .veu-gaveta { position: fixed; inset: 0; z-index: 70; background: var(--veu); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 320ms ease; } .veu-gaveta.aberto { opacity: 1; pointer-events: auto; } body.gaveta-aberta { overflow: hidden; } aside.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 80; background: linear-gradient(180deg, var(--ouro-tenue), transparent 240px), linear-gradient(165deg, var(--superficie-firme) 0%, var(--fundo-1) 60%, var(--fundo-2) 100%); border-left: 1px solid var(--ouro-fosco); box-shadow: var(--sombra-gaveta); transform: translateX(102%); transition: transform 420ms cubic-bezier(0.32, 0.9, 0.3, 1); overflow-y: auto; overscroll-behavior: contain; } [data-tema="escuro"] aside.gaveta { background: linear-gradient(180deg, rgba(201, 164, 92, 0.06), transparent 240px), linear-gradient(165deg, var(--fundo-2) 0%, var(--fundo-1) 60%, #0a0e1f 100%); } aside.gaveta.aberta { transform: translateX(0); } /* — modo Morte: a própria gaveta veste a sombra — */ aside.gaveta.morte, [data-tema="escuro"] aside.gaveta.morte { background: radial-gradient(120% 30% at 50% 0%, rgba(90, 47, 58, 0.22), transparent), linear-gradient(170deg, #1a1422 0%, #110d18 55%, #0a070e 100%); border-left-color: rgba(122, 74, 85, 0.5); } aside.gaveta.morte { color: #cdc2d2; } aside.gaveta.morte h2, aside.gaveta.morte h3 { color: #c0a3b1; } .gaveta-fechar { position: sticky; top: 0.9rem; margin: 0.9rem 0.9rem 0 auto; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; z-index: 5; font-family: var(--f-display); font-size: 1rem; color: var(--ouro-claro); background: var(--superficie); border: 1px solid var(--ouro-fosco); border-radius: 50%; cursor: pointer; transition: all var(--transicao); float: right; } .gaveta-fechar:hover { background: var(--ouro); color: var(--fundo-1); transform: rotate(90deg); } aside.gaveta.morte .gaveta-fechar { color: #c0a3b1; background: rgba(20, 14, 26, 0.85); border-color: rgba(122, 74, 85, 0.5); } aside.gaveta.morte .gaveta-fechar:hover { background: #5a2f3a; color: #f0e2e8; } .gaveta-corpo { padding: 0.5rem clamp(1.2rem, 4vw, 2rem) 3rem; clear: none; } /* — cabeçalho da sefirá / qlipá — */ .sefira-cabeca { text-align: center; padding-top: 0.6rem; } .sefira-cabeca .grande-he { font-family: var(--f-hebraico); font-size: clamp(3rem, 9vw, 4.2rem); line-height: 1.1; /* no claro usa a cor escurecida da sefirá; no escuro, o brilho original */ color: var(--cor-sefira-d, var(--ouro-claro)); text-shadow: 0 0 36px var(--brilho-sefira, var(--ouro-fosco)); margin-bottom: 0.1em; } [data-tema="escuro"] .sefira-cabeca .grande-he { color: var(--cor-sefira-l, var(--ouro-claro)); } aside.gaveta.morte .sefira-cabeca .grande-he { color: #c9aab8; text-shadow: 0 0 36px var(--brilho-sefira, rgba(122, 42, 58, 0.6)); } .sefira-cabeca h2 { font-size: 1.7rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.1em; } .sefira-cabeca .sefira-pt { font-style: italic; font-size: 1.2rem; color: var(--texto-suave); } aside.gaveta.morte .sefira-cabeca .sefira-pt { color: #8d7d92; } .sefira-cabeca .sefira-titulo { font-family: var(--f-display); font-size: 0.92rem; letter-spacing: 0.12em; color: var(--ouro); margin-top: 0.6rem; } aside.gaveta.morte .sefira-cabeca .sefira-titulo { color: #a07888; } /* selo "qlipá de…" no topo da face de morte */ .qlipa-selo { display: inline-block; margin: 0.8rem auto 0; font-family: var(--f-display); font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: #9a8499; border: 1px solid rgba(122, 74, 85, 0.45); border-radius: 999px; padding: 0.3rem 0.9rem; } .sefira-essencia { margin: 1.4rem 0; padding: 1.1rem 1.3rem; font-size: 1.08rem; font-style: italic; border-left: 2px solid var(--ouro); background: linear-gradient(90deg, var(--ouro-tenue), transparent 80%); border-radius: 0 var(--raio) var(--raio) 0; } aside.gaveta.morte .sefira-essencia { border-left-color: #7a4a55; background: linear-gradient(90deg, rgba(122, 74, 85, 0.18), transparent 80%); } /* — blocos do estudo — */ .bloco-titulo, .selo-bloco h3, .caminhos-bloco h3, .acervo-bloco h3, .descricao-bloco h3, .misticismo-bloco h3 { font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ouro); text-align: center; display: flex; align-items: center; gap: 0.9rem; } .bloco-titulo::before, .bloco-titulo::after, .selo-bloco h3::before, .selo-bloco h3::after, .caminhos-bloco h3::before, .caminhos-bloco h3::after, .acervo-bloco h3::before, .acervo-bloco h3::after, .descricao-bloco h3::before, .descricao-bloco h3::after, .misticismo-bloco h3::before, .misticismo-bloco h3::after { content: ''; flex: 1; height: 1px; background: var(--ouro-tenue); } aside.gaveta.morte .bloco-titulo, aside.gaveta.morte .selo-bloco h3, aside.gaveta.morte .caminhos-bloco h3, aside.gaveta.morte .descricao-bloco h3, aside.gaveta.morte .misticismo-bloco h3, aside.gaveta.morte .acervo-bloco h3 { color: #a07888; } .descricao-bloco { margin: 2rem 0 1.6rem; } .descricao-bloco p { font-size: 1.05rem; line-height: 1.7; margin: 0.9em 0; } .descricao-bloco p:first-of-type::first-letter { font-family: var(--f-display); font-size: 2.6em; float: left; line-height: 0.85; padding: 0.05em 0.14em 0 0; color: var(--ouro); } aside.gaveta.morte .descricao-bloco p:first-of-type::first-letter { color: #a07888; } /* — misticismo: a leitura contemplativa, destacada como iluminura — */ .misticismo-bloco { margin: 2rem 0; } .misticismo-corpo { position: relative; margin-top: 1rem; padding: 1.2rem 1.4rem 1.2rem 1.6rem; font-size: 1.05rem; line-height: 1.7; font-style: italic; color: var(--texto); background: linear-gradient(135deg, var(--joia-tenue), transparent 75%); border: 1px solid var(--joia-tenue); border-left: 3px solid var(--joia); border-radius: 0 var(--raio) var(--raio) 0; } .misticismo-corpo::before { content: '✦'; position: absolute; top: -0.65rem; left: 1rem; font-size: 0.8rem; font-style: normal; color: var(--joia); background: var(--superficie-firme); padding: 0 0.4rem; } aside.gaveta.morte .misticismo-corpo { color: #c2b5c8; background: linear-gradient(135deg, rgba(90, 60, 100, 0.18), transparent 75%); border-color: rgba(122, 90, 130, 0.3); border-left-color: #7a5a82; } aside.gaveta.morte .misticismo-corpo::before { color: #9a7aa4; background: #141019; } /* ---------------------------------------------------------------------------- * Selo de correspondências (o "diagrama" da sefirá) * -------------------------------------------------------------------------- */ .selo-bloco { margin: 2rem 0; } .selo-medalhao { display: flex; justify-content: center; margin: 1.2rem 0 0.4rem; } .selo-medalhao svg { width: 190px; height: 190px; filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.28)); } .selo-medalhao .med-anel { stroke: var(--ouro); } .selo-medalhao .med-divino { fill: var(--ouro-claro); } .selo-medalhao .med-gematria { fill: var(--texto-apagado); } .eixo { list-style: none; margin: 0.4rem 0 0; padding: 0.8rem 0 0.4rem; position: relative; } .eixo::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, var(--ouro), var(--ouro-tenue)); transform: translateX(-0.5px); } .eixo li { position: relative; width: 50%; padding: 0.45rem 1.5rem 0.55rem 0; text-align: right; } .eixo li:nth-child(even) { margin-left: 50%; padding: 0.45rem 0 0.55rem 1.5rem; text-align: left; } .eixo li::before { content: ''; position: absolute; top: 1.05rem; right: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--superficie-firme); border: 1.5px solid var(--ouro); box-shadow: 0 0 8px var(--ouro-fosco); } .eixo li:nth-child(even)::before { right: auto; left: -4.5px; } .eixo .rotulo { display: block; font-family: var(--f-display); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--texto-suave); } .eixo .valor { font-size: 1.02rem; color: var(--texto); line-height: 1.35; display: block; } .eixo .valor .hebraico { color: var(--ouro-claro); margin-inline-start: 0.4em; font-size: 1.05em; } aside.gaveta.morte .eixo::before { background: linear-gradient(180deg, #7a4a55, rgba(122, 74, 85, 0.15)); } aside.gaveta.morte .eixo li::before { background: #161019; border-color: #7a4a55; box-shadow: 0 0 8px rgba(122, 74, 85, 0.4); } aside.gaveta.morte .eixo .rotulo { color: #8d7d92; } aside.gaveta.morte .eixo .valor { color: #cdc2d2; } /* nota da gematria */ .gema-nota { margin: 0.8rem auto 0; max-width: 46ch; text-align: center; font-size: 0.95rem; font-style: italic; color: var(--texto-suave); } .gema-nota::before { content: '· '; color: var(--ouro); } .gema-nota::after { content: ' ·'; color: var(--ouro); } /* — caminhos conectados (fichas) — */ .caminhos-bloco { margin: 2rem 0; } .fichas { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; margin-top: 1.1rem; } .ficha { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.85rem 0.3rem 0.3rem; border: 1px solid var(--ouro-tenue); border-radius: 999px; background: var(--superficie); font-size: 0.92rem; transition: border-color var(--transicao), background var(--transicao); } .ficha:hover { border-color: var(--ouro); background: var(--ouro-tenue); } .ficha-letra { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-family: var(--f-hebraico); font-size: 1.05rem; font-weight: 500; color: #fdf8ec; background: radial-gradient(circle at 35% 30%, var(--ouro), var(--titulo-c) 75%); flex-shrink: 0; } [data-tema="escuro"] .ficha-letra { color: #1a1408; background: radial-gradient(circle at 35% 30%, var(--ouro-vivo), var(--ouro) 70%); } .ficha i { font-style: normal; color: var(--ouro-claro); } .ficha small { color: var(--texto-suave); font-size: 0.85em; } .ficha-vazia { text-align: center; font-style: italic; color: var(--texto-suave); } aside.gaveta.morte .ficha { background: rgba(40, 28, 44, 0.4); border-color: rgba(122, 74, 85, 0.35); } aside.gaveta.morte .ficha i { color: #c0a3b1; } aside.gaveta.morte .ficha small { color: #8d7d92; } aside.gaveta.morte .ficha-letra { color: #f0e2e8; background: radial-gradient(circle at 35% 30%, #6e4250, #2a1c26 80%); } aside.gaveta.morte .ficha-vazia { color: #8d7d92; } /* botão "ver a face de vida" na gaveta de morte */ .ver-vida { display: block; margin: 2rem auto 0; font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ouro-claro); background: transparent; border: 1px solid var(--ouro-fosco); border-radius: 999px; padding: 0.6rem 1.4rem; cursor: pointer; transition: all var(--transicao); } .ver-vida:hover { background: var(--ouro); color: #fdf8ec; } aside.gaveta.morte .ver-vida { color: #d9c9a8; border-color: rgba(201, 164, 92, 0.4); } aside.gaveta.morte .ver-vida:hover { background: #c9a45c; color: #1a1408; } /* ---------------------------------------------------------------------------- * Fontes do Acervo — cartões-pergaminho * -------------------------------------------------------------------------- */ .acervo-bloco { margin: 2.2rem 0 0; } .acervo-status, .busca-status { text-align: center; font-style: italic; color: var(--texto-suave); padding: 0.8rem 0; } .acervo-status.erro, .busca-status.erro { color: #b05c38; } [data-tema="escuro"] .acervo-status.erro, [data-tema="escuro"] .busca-status.erro { color: #d98f6a; } .acervo-status.conta, .busca-status.conta { font-family: var(--f-display); font-style: normal; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ouro); } .fontes { display: grid; gap: 0.8rem; margin-top: 0.8rem; } /* esqueleto de carregamento */ .esqueleto { height: 86px; border-radius: var(--raio); background: linear-gradient(100deg, var(--ouro-tenue) 30%, var(--joia-tenue) 50%, var(--ouro-tenue) 70%); background-size: 220% 100%; animation: brilhoEsq 1.4s ease infinite; border: 1px solid var(--ouro-tenue); } @keyframes brilhoEsq { to { background-position: -120% 0; } } /* o cartão-pergaminho */ article.fonte { position: relative; border-radius: var(--raio); background: radial-gradient(120% 90% at 12% 0%, rgba(255, 252, 240, 0.55), transparent 55%), linear-gradient(168deg, var(--perg) 0%, var(--perg-2) 100%); border: 1px solid var(--perg-borda); box-shadow: inset 0 0 0 1px rgba(255, 250, 235, 0.5), inset 0 0 50px rgba(160, 130, 70, 0.1), var(--sombra-1); color: var(--tinta); padding: 0.85rem 1.05rem; } article.fonte.clicavel { cursor: pointer; transition: transform var(--transicao), box-shadow var(--transicao); } article.fonte.clicavel:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 250, 235, 0.5), inset 0 0 50px rgba(160, 130, 70, 0.1), var(--sombra-2), 0 0 0 1px var(--ouro); } .fonte-cabeca { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .fonte-ref { font-family: var(--f-display); font-size: 0.88rem; font-weight: 700; letter-spacing: 0.05em; color: var(--tinta); } .fonte-heref { font-family: var(--f-hebraico); font-size: 0.92rem; color: var(--tinta-suave); } .selo-cat { font-family: var(--f-display); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff8ea; padding: 0.18rem 0.55rem; border-radius: 999px; background: var(--cor-cat, #6b6353); white-space: nowrap; } .fonte-nota { margin-top: 0.45rem; font-size: 1rem; font-style: italic; line-height: 1.5; color: var(--tinta-suave); } .fonte-trecho { margin-top: 0.45rem; font-size: 1.02rem; line-height: 1.5; color: var(--tinta-suave); } .fonte-trecho.rtl { font-family: var(--f-hebraico); direction: rtl; text-align: right; font-size: 1.1rem; line-height: 1.75; } .fonte-trecho mark, .fonte-trecho b { color: var(--tinta); background: rgba(201, 164, 92, 0.35); padding: 0 0.12em; border-radius: 3px; font-weight: 600; } /* versículos hebraico + tradução, lado a lado vertical */ .fonte-texto { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--perg-borda); } .rotulo-idioma { display: block; font-family: var(--f-display); font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: #8a6c33; margin: 0.7rem 0 0.25rem; } .verso-par { margin: 0 0 0.85rem; } .verso-par .v-he { font-family: var(--f-hebraico); direction: rtl; text-align: right; font-size: 1.2rem; line-height: 1.85; color: var(--tinta); } .verso-par .v-en { margin-top: 0.15rem; font-size: 0.98rem; font-style: italic; color: var(--tinta-suave); line-height: 1.55; } .verso-par .v-num { font-family: var(--f-display); font-size: 0.66rem; color: #a08446; vertical-align: super; margin-inline-end: 0.35em; } .fonte-mais { display: inline-block; margin-top: 0.4rem; font-family: var(--f-display); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: #7a5c1f; border: 1px solid #b59a60; border-radius: 999px; padding: 0.35rem 0.95rem; transition: all var(--transicao); } .fonte-mais:hover { background: var(--tinta); color: var(--perg); border-color: var(--tinta); } .mini-carregando { font-style: italic; color: var(--tinta-suave); } /* ---------------------------------------------------------------------------- * Manifesto — o conhecimento é o equilíbrio dos contrários * -------------------------------------------------------------------------- */ .manifesto { max-width: 800px; text-align: center; padding-top: 0.5rem; } .manifesto-orn { font-size: 1.4rem; letter-spacing: 0.5em; color: var(--ouro); opacity: 0.85; margin-bottom: 1.1rem; padding-left: 0.5em; } .manifesto-texto { position: relative; margin: 0; padding: 1.7rem clamp(1rem, 5vw, 2.6rem); border: 0; } .manifesto-texto::before, .manifesto-texto::after { content: ''; position: absolute; left: 50%; width: 130px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--ouro-fosco), transparent); } .manifesto-texto::before { top: 0; } .manifesto-texto::after { bottom: 0; } .manifesto-texto .lema { font-family: var(--f-display); font-size: clamp(1.3rem, 3vw, 1.85rem); font-weight: 600; letter-spacing: 0.03em; line-height: 1.3; color: var(--ouro-claro); margin: 0 0 1.1rem; } .manifesto-texto p { font-family: var(--f-corpo); font-size: clamp(1.12rem, 2.1vw, 1.3rem); line-height: 1.74; color: var(--texto-suave); margin: 0 0 0.9rem; } .manifesto-texto p:last-child { margin-bottom: 0; } .manifesto-texto strong { color: var(--ouro-vivo); font-weight: 600; } .manifesto-texto em { color: var(--joia); font-style: italic; } /* ---------------------------------------------------------------------------- * Página "Os Quatro Mundos" * -------------------------------------------------------------------------- */ .heroi-mundos { padding-top: clamp(3rem, 8vh, 5rem); } .mundos-intro { max-width: 820px; margin: 0 auto; } .mundos-intro p { font-size: 1.18rem; line-height: 1.8; color: var(--texto-suave); margin: 0 0 1.1rem; } .mundos-intro p.capitular::first-letter { font-family: var(--f-display); float: left; font-size: 3.4rem; line-height: 0.8; padding: 0.1em 0.12em 0 0; color: var(--ouro); } /* — Diagrama: a escada do Nome — */ .diagrama-escada { max-width: 480px; margin: 1.8rem auto 0; padding: 1.4rem clamp(0.8rem, 3vw, 1.6rem) 1rem; background: var(--superficie); border: 1px solid var(--ouro-tenue); border-radius: var(--raio); box-shadow: var(--sombra-1); } .diagrama-escada svg { width: 100%; height: auto; display: block; } .diag-ak { fill: var(--ouro-tenue); stroke: var(--ouro-fosco); stroke-width: 1; } .diag-ak-he { fill: var(--ouro-claro); font-family: var(--f-hebraico); font-size: 17px; font-weight: 700; } .diag-ak-sub { fill: var(--texto-suave); font-family: var(--f-display); font-size: 8.5px; letter-spacing: 0.08em; } .diag-seta { fill: var(--ouro-fosco); font-size: 13px; } .diag-banda { fill-opacity: 0.2; stroke: var(--ouro-fosco); stroke-width: 1; } .diag-letra { fill: var(--ouro-vivo); font-family: var(--f-hebraico); font-size: 46px; font-weight: 700; } .diag-sep { stroke: var(--ouro-fosco); stroke-width: 1; stroke-dasharray: 2 3; } .diag-nome { fill: var(--texto); font-family: var(--f-display); font-size: 17px; font-weight: 600; letter-spacing: 0.04em; } .diag-mean { fill: var(--ouro-claro); font-family: var(--f-corpo); font-style: italic; font-size: 13px; } .diag-attr { fill: var(--texto-suave); font-family: var(--f-corpo); font-size: 11px; } .diag-parsa { fill: var(--texto-apagado); font-family: var(--f-display); font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; } .diagrama-legenda { max-width: 480px; margin: 1.1rem auto 0; text-align: center; font-style: italic; font-size: 1rem; color: var(--texto-suave); } /* — blocos de cada Mundo (detalhe) — */ .mundos-lista { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 1.8rem; } .mundo-detalhe, .ak-bloco { position: relative; padding: 1.6rem clamp(1.1rem, 3.5vw, 2.2rem); background: var(--superficie); border: 1px solid var(--ouro-tenue); border-inline-start: 4px solid var(--cor-mundo, var(--ouro)); border-radius: var(--raio); box-shadow: var(--sombra-1); } .ak-bloco { --cor-mundo: var(--ouro); max-width: 920px; margin: 1.4rem auto 0; } .mundo-cab { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1rem; } .mundo-he { font-family: var(--f-hebraico); font-size: 2.2rem; line-height: 1; color: var(--cor-mundo, var(--ouro-claro)); flex-shrink: 0; } .mundo-nome { margin: 0; font-size: 1.5rem; } .mundo-trad { color: var(--ouro-claro); font-family: var(--f-corpo); font-style: italic; font-weight: 400; font-size: 1.1rem; letter-spacing: 0; text-transform: none; } .mundo-note { margin: 0.15rem 0 0; color: var(--texto-suave); font-style: italic; font-size: 1rem; } .mundo-letra { margin-inline-start: auto; font-family: var(--f-hebraico); font-size: 2.6rem; color: var(--ouro-fosco); align-self: flex-start; } .mundo-corresp { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.5rem 1.4rem; margin: 0 0 1.2rem; padding: 1rem 0; border-top: 1px solid var(--ouro-tenue); border-bottom: 1px solid var(--ouro-tenue); } .mundo-corresp > div { display: flex; flex-direction: column; gap: 0.1rem; } .mundo-corresp dt { font-family: var(--f-display); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ouro); } .mundo-corresp dd { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--texto); } .mundo-corresp dd i { color: var(--texto-suave); } .hebraico-inline { font-family: var(--f-hebraico); } .mundos-mais { text-align: center; margin-top: 1.8rem; } .link-aprofundar { display: inline-block; font-family: var(--f-display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ouro-vivo); border: 1px solid var(--ouro-fosco); border-radius: 999px; padding: 0.6rem 1.5rem; transition: background var(--transicao), color var(--transicao), border-color var(--transicao); } .link-aprofundar:hover { background: var(--ouro); color: var(--fundo-1); border-color: var(--ouro); } .mundo-fontes { margin-top: 1.4rem; } .fontes-titulo { font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ouro); margin: 0 0 0.8rem; padding-top: 0.9rem; border-top: 1px solid var(--ouro-tenue); } .fontes-lista { display: flex; flex-direction: column; gap: 0.9rem; } .fontes-aviso { font-style: italic; color: var(--texto-suave); font-size: 0.98rem; margin: 0; } /* — colunas dos Três Pilares — */ .pilares-colunas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 760px; margin: 1.8rem auto 0; } .pilar-coluna { text-align: center; padding: 1.1rem 0.7rem; border-radius: var(--raio); border-top: 4px solid var(--cor-mundo, var(--ouro)); background: var(--superficie); box-shadow: var(--sombra-1); } .pilar-coluna h4 { font-size: 0.95rem; margin: 0 0 0.7rem; letter-spacing: 0.08em; } .pilar-coluna .pcol-he { font-family: var(--f-hebraico); color: var(--cor-mundo, var(--ouro)); font-size: 1.15rem; margin-bottom: 0.5rem; } .pilar-coluna ul { list-style: none; margin: 0; padding: 0; } .pilar-coluna li { font-family: var(--f-corpo); color: var(--texto-suave); font-size: 1.02rem; padding: 0.3rem 0; border-top: 1px dotted var(--ouro-tenue); } .pilar-coluna li:first-child { border-top: none; } .morte-card .sombra-nota { font-style: italic; color: var(--texto-suave); margin-top: 0.6rem; padding-left: 0.8rem; border-left: 2px solid var(--cor-mundo, var(--ouro-fosco)); } /* — comparação trilíngue: hebraico · português · inglês — */ .verso-par.tri { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0.25rem 1.3rem; align-items: start; margin: 0 0 0.7rem; padding-bottom: 0.7rem; border-bottom: 1px dotted var(--perg-borda); } .verso-par.tri:last-child { border-bottom: none; } .verso-par.tri .v-en { margin-top: 0; } .v-pt { font-family: var(--f-corpo); font-size: 1.05rem; line-height: 1.55; color: var(--tinta); } .v-col-he { display: flex; flex-direction: column; gap: 0.2rem; } .verso-par.tri .v-tr { font-family: var(--f-corpo); font-style: italic; font-size: 0.92rem; line-height: 1.5; color: var(--joia); text-align: right; opacity: 0.95; } @media (max-width: 720px) { .verso-par.tri .v-tr { text-align: left; } } .intro-links { text-align: center; font-style: italic; color: var(--texto-suave); margin-top: 1.3rem; } .intro-links a { font-style: normal; } /* — bloco de fontes no rodapé da Biblioteca — */ .rodape-fontes { max-width: 760px; margin: 1.6rem auto 0.4rem; padding-top: 1.2rem; border-top: 1px solid var(--ouro-tenue); text-align: left; } .rodape-fontes h4 { font-family: var(--f-display); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; color: var(--ouro); margin: 0 0 0.9rem; } .rodape-fontes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .rodape-fontes li { font-size: 0.92rem; line-height: 1.55; color: var(--texto-suave); } .rodape-fontes strong { color: var(--texto); font-weight: 600; } .rodape-fontes em { color: var(--texto); } @media (max-width: 760px) { .verso-par.tri { grid-template-columns: 1fr; gap: 0.1rem; border-bottom: none; padding-bottom: 0.5rem; } .verso-par.tri .v-pt, .verso-par.tri .v-en { padding-inline-start: 0.6rem; border-inline-start: 2px solid var(--perg-borda); margin-top: 0.2rem; } } @media (max-width: 560px) { .pilares-colunas { grid-template-columns: 1fr; max-width: 360px; } } .mundo-texto p { font-size: 1.1rem; line-height: 1.75; color: var(--texto-suave); margin: 0 0 0.85rem; } .mundo-texto p:last-child { margin-bottom: 0; } @media (max-width: 600px) { .mundo-letra { display: none; } .mundo-he { font-size: 1.8rem; } } /* fonte ainda indisponível (corpus em preparação) */ article.fonte.indisponivel { background: var(--superficie); border: 1px dashed var(--ouro-fosco); box-shadow: none; color: var(--texto-suave); } article.fonte.indisponivel .fonte-ref { color: var(--texto-suave); } article.fonte.indisponivel .fonte-nota { color: var(--texto-apagado); } /* ---------------------------------------------------------------------------- * Busca no acervo (Biblioteca) * -------------------------------------------------------------------------- */ .busca-caixa { display: flex; align-items: center; gap: 0.8rem; max-width: 680px; margin: 0 auto; padding: 0.4rem 0.4rem 0.4rem 1.2rem; border: 1px solid var(--ouro-fosco); border-radius: 999px; background: var(--superficie); box-shadow: var(--sombra-1); transition: border-color var(--transicao), box-shadow var(--transicao); } .busca-caixa:focus-within { border-color: var(--ouro); box-shadow: var(--sombra-2); } .busca-caixa .lupa { color: var(--ouro); flex-shrink: 0; display: flex; } .busca-caixa input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font-family: var(--f-corpo); font-size: 1.15rem; color: var(--texto); padding: 0.55rem 0; } .busca-caixa input::placeholder { color: var(--texto-apagado); font-style: italic; } .busca-resultados { max-width: 760px; margin: 1.6rem auto 0; } .busca-resultados .fontes { gap: 0.9rem; } /* ---------------------------------------------------------------------------- * Legenda — Pilares e Mundos * -------------------------------------------------------------------------- */ .pilares-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin-top: 1.6rem; } .pilar-carta { position: relative; text-align: center; padding: 1.6rem 1.2rem 1.4rem; border: 1px solid var(--ouro-tenue); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra-1); overflow: hidden; } .pilar-carta::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, var(--ouro-fosco) 30%, var(--ouro-fosco) 70%, transparent); } .pilar-carta > * { position: relative; } .pilar-carta h4 { font-size: 1rem; letter-spacing: 0.16em; } .pilar-carta .pilar-he { font-style: italic; color: var(--ouro); font-size: 0.95rem; margin-bottom: 0.5rem; } .pilar-carta p { color: var(--texto-suave); font-size: 1rem; margin: 0; } .mundos-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; margin-top: 1.6rem; border: 1px solid var(--ouro-tenue); border-radius: var(--raio); overflow: hidden; background: var(--superficie); box-shadow: var(--sombra-1); } .mundo-carta { padding: 1.3rem 1.2rem; border-inline-end: 1px solid var(--ouro-tenue); background: linear-gradient(180deg, var(--joia-tenue), transparent); } .mundo-carta:last-child { border-inline-end: none; } .mundo-carta .mundo-num { font-family: var(--f-display); font-size: 0.7rem; letter-spacing: 0.3em; color: var(--ouro); } .mundo-carta h4 { font-size: 1.15rem; margin: 0.2rem 0 0; } .mundo-carta .mundo-sig { font-style: italic; color: var(--ouro-claro); font-size: 0.95rem; } .mundo-carta p { color: var(--texto-suave); font-size: 0.95rem; margin: 0.4rem 0 0; } /* ---------------------------------------------------------------------------- * Rodapé * -------------------------------------------------------------------------- */ footer.rodape { margin-top: 4rem; padding: 2.4rem 1.5rem 2.8rem; text-align: center; border-top: 1px solid var(--ouro-tenue); background: linear-gradient(180deg, transparent, var(--ouro-tenue)); } .rodape .rodape-he { font-family: var(--f-hebraico); color: var(--ouro); font-size: 1.1rem; opacity: 0.85; margin-bottom: 0.5rem; } .rodape p { margin: 0.25rem 0; color: var(--texto-suave); font-size: 0.98rem; } .rodape a { border-bottom: 1px solid var(--ouro-tenue); } /* ---------------------------------------------------------------------------- * Página da Biblioteca * -------------------------------------------------------------------------- */ .bib-heroi { text-align: center; padding: clamp(3rem, 8vh, 5rem) 1.25rem 1rem; } .bib-heroi h1 { font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: 0.12em; text-transform: uppercase; background: linear-gradient(165deg, var(--titulo-a) 20%, var(--titulo-b) 55%, var(--titulo-c) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .bib-heroi p { font-style: italic; color: var(--texto-suave); max-width: 56ch; margin: 0 auto; } /* as duas portas: Livros · Artigos */ .bib-portas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; max-width: 760px; margin: 2rem auto 0; } .porta { position: relative; text-align: center; padding: 1.9rem 1.4rem 1.6rem; border: 1px solid var(--ouro-fosco); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra-1); cursor: pointer; color: var(--texto); font-family: inherit; transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao), background var(--transicao); } .porta:hover { transform: translateY(-3px); border-color: var(--ouro); box-shadow: var(--sombra-2); } .porta[aria-pressed="true"] { border-color: var(--ouro); background: linear-gradient(170deg, var(--ouro-tenue), var(--superficie)); box-shadow: var(--sombra-2), inset 0 0 0 1px var(--ouro-tenue); } .porta::before, .porta::after { content: ''; position: absolute; width: 20px; height: 20px; border-color: var(--ouro); border-style: solid; opacity: 0.6; } .porta::before { top: 7px; left: 7px; border-width: 1px 0 0 1px; } .porta::after { bottom: 7px; right: 7px; border-width: 0 1px 1px 0; } .porta .porta-icone { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 0.8rem; border-radius: 50%; border: 1px solid var(--ouro-fosco); color: var(--ouro-claro); background: radial-gradient(circle at 35% 30%, var(--ouro-tenue), transparent 70%); } .porta h2 { font-size: 1.1rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.25em; } .porta p { font-size: 0.98rem; font-style: italic; color: var(--texto-suave); margin: 0; } /* aviso quando o acervo não pôde carregar (ex.: file://) */ .acervo-aviso { max-width: 64ch; margin: 1.6rem auto; padding: 1rem 1.3rem; text-align: center; font-style: italic; color: var(--texto-suave); border: 1px dashed var(--ouro-fosco); border-radius: var(--raio); background: var(--superficie); } /* — estantes: livros agrupados por categoria — */ .estante-cat { font-family: var(--f-display); font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ouro); display: flex; align-items: center; gap: 0.9rem; margin: 2.2rem 0 0.9rem; } .estante-cat::before, .estante-cat::after { content: ''; flex: 1; height: 1px; background: var(--ouro-tenue); } .estante { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.9rem; } .livro-carta { position: relative; text-align: left; padding: 1.1rem 1.2rem 1rem 1.4rem; font-family: inherit; color: var(--tinta); background: radial-gradient(120% 90% at 12% 0%, rgba(255, 252, 240, 0.55), transparent 55%), linear-gradient(168deg, var(--perg) 0%, var(--perg-2) 100%); border: 1px solid var(--perg-borda); border-radius: var(--raio); box-shadow: inset 0 0 0 1px rgba(255, 250, 235, 0.5), var(--sombra-1); cursor: pointer; transition: transform var(--transicao), box-shadow var(--transicao); } /* lombada dourada */ .livro-carta::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 7px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--ouro), #8a6c33); opacity: 0.7; } .livro-carta:hover { transform: translateY(-2px); box-shadow: var(--sombra-2), 0 0 0 1px var(--ouro); } .livro-carta .livro-titulo { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.05em; line-height: 1.25; color: var(--tinta); margin-bottom: 0.15em; } .livro-carta .livro-autor { font-size: 0.9rem; font-style: italic; color: var(--tinta-suave); display: block; } .livro-carta .livro-meta { display: block; margin-top: 0.45rem; font-family: var(--f-display); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8a6c33; } /* — leitor de livro (o manuscrito) — */ .leitor { max-width: 860px; margin: 1.5rem auto 0; animation: surge 420ms ease both; } @keyframes surge { from { opacity: 0; transform: translateY(8px); } } .leitor-voltar { font-family: var(--f-display); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--texto-suave); background: transparent; border: 1px solid var(--ouro-tenue); border-radius: 999px; padding: 0.45rem 1.1rem; cursor: pointer; transition: all var(--transicao); } .leitor-voltar:hover { color: var(--ouro-vivo); border-color: var(--ouro); } .leitor-cabeca { text-align: center; margin: 1.4rem 0 0.6rem; } .leitor-cabeca h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin-bottom: 0.1em; } .leitor-cabeca .leitor-autor { font-style: italic; color: var(--texto-suave); } .leitor-cabeca .leitor-cat { display: inline-block; margin-top: 0.5rem; font-family: var(--f-display); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ouro); border: 1px solid var(--ouro-fosco); border-radius: 999px; padding: 0.25rem 0.85rem; } .leitor-truncado { text-align: center; font-size: 0.9rem; font-style: italic; color: var(--texto-apagado); margin: 0.4rem 0 0; } .leitor-secoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 1.2rem 0; } .secao-chip { font-family: var(--f-display); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto); background: var(--superficie); border: 1px solid var(--ouro-tenue); border-radius: 999px; padding: 0.32rem 0.8rem; cursor: pointer; transition: all var(--transicao); } .secao-chip:hover { border-color: var(--ouro); color: var(--ouro-vivo); } .secao-chip.ativo { background: var(--ouro); border-color: var(--ouro); color: #fdf8ec; } [data-tema="escuro"] .secao-chip.ativo { color: #1a1408; } /* a página do manuscrito */ .manuscrito { position: relative; padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.2rem, 5vw, 3rem); background: radial-gradient(120% 90% at 12% 0%, rgba(255, 252, 240, 0.55), transparent 55%), linear-gradient(168deg, var(--perg) 0%, var(--perg-2) 100%); border: 1px solid var(--perg-borda); border-radius: var(--raio); box-shadow: inset 0 0 0 1px rgba(255, 250, 235, 0.5), inset 0 0 60px rgba(160, 130, 70, 0.12), var(--sombra-2); color: var(--tinta); } .manuscrito-ref { text-align: center; font-family: var(--f-display); font-size: 1rem; letter-spacing: 0.12em; color: var(--tinta); margin-bottom: 0.2rem; } .manuscrito-heref { text-align: center; font-family: var(--f-hebraico); font-size: 1.05rem; color: var(--tinta-suave); margin-bottom: 1.2rem; } .manuscrito .verso-par { padding-bottom: 0.6rem; border-bottom: 1px dotted rgba(160, 130, 70, 0.25); } .manuscrito .verso-par:last-child { border-bottom: none; } /* — artigos — */ .artigos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; max-width: 980px; margin: 1.6rem auto 0; } .artigo-carta { text-align: left; font-family: inherit; padding: 1.4rem 1.4rem 1.2rem; border: 1px solid var(--ouro-tenue); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra-1); color: var(--texto); cursor: pointer; transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao); } .artigo-carta:hover { transform: translateY(-3px); border-color: var(--ouro); box-shadow: var(--sombra-2); } .artigo-carta .artigo-data { font-family: var(--f-display); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ouro); } .artigo-carta .artigo-titulo { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; line-height: 1.25; color: var(--ouro-claro); margin: 0.3em 0; } .artigo-carta .artigo-resumo { display: block; font-size: 0.98rem; font-style: italic; color: var(--texto-suave); margin: 0; } .artigo-carta .artigo-autor { display: block; margin-top: 0.7rem; font-size: 0.88rem; color: var(--texto-apagado); } .artigo-leitura { max-width: 72ch; margin: 1.5rem auto 0; animation: surge 420ms ease both; } .artigo-leitura .artigo-cabeca { text-align: center; margin: 1.4rem 0 1.6rem; } .artigo-leitura .artigo-cabeca h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); } .artigo-leitura .artigo-cabeca .artigo-meta { font-style: italic; color: var(--texto-suave); font-size: 0.98rem; } .artigo-corpo { font-size: 1.12rem; line-height: 1.75; } .artigo-corpo p { margin: 1em 0; } .artigo-corpo p:first-of-type::first-letter { font-family: var(--f-display); font-size: 3em; float: left; line-height: 0.82; padding: 0.05em 0.12em 0 0; color: var(--ouro); } .artigo-corpo h3 { font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 1.8em; } .artigo-corpo blockquote { margin: 1.4em 0; padding: 0.8em 1.2em; font-style: italic; border-left: 2px solid var(--joia); background: var(--joia-tenue); border-radius: 0 var(--raio) var(--raio) 0; } .artigo-corpo em { color: var(--ouro-claro); } /* — barra de ações do leitor de artigo (voltar + baixar) — */ .artigo-acoes { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; } .artigo-baixar { font-family: var(--f-display); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fdf8ec; background: linear-gradient(160deg, var(--ouro), var(--titulo-c)); border: 1px solid var(--ouro-fosco); border-radius: 999px; padding: 0.45rem 1.15rem; cursor: pointer; transition: all var(--transicao); } .artigo-baixar:hover { filter: brightness(1.07); box-shadow: var(--sombra-1); transform: translateY(-1px); } .artigo-baixar:active { transform: translateY(0); } [data-tema="escuro"] .artigo-baixar { color: #1a1408; } .artigo-baixos { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; } /* variante "linha": contorno, para o botão secundário (HTML) */ .artigo-baixar.artigo-baixar--linha { color: var(--ouro-claro); background: transparent; } .artigo-baixar.artigo-baixar--linha:hover { background: var(--ouro-tenue); filter: none; box-shadow: none; } [data-tema="escuro"] .artigo-baixar.artigo-baixar--linha { color: var(--ouro-claro); } /* — artigo longo: elementos ricos dentro do leitor — */ .artigo-corpo strong { color: var(--ouro-vivo); font-weight: 600; } .artigo-corpo .art-rotulo { display: block; text-align: center; font-family: var(--f-display); font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ouro); margin: 2.2em 0 0.2em; } .artigo-corpo ul, .artigo-corpo ol { margin: 1.1em 0; padding: 0; list-style: none; } .artigo-corpo ul li, .artigo-corpo ol li { position: relative; padding: 0.35em 0 0.45em 1.7em; border-bottom: 1px solid var(--ouro-tenue); } .artigo-corpo ul li::before { content: '✦'; position: absolute; left: 0.1em; top: 0.55em; color: var(--ouro); font-size: 0.7em; } .artigo-corpo ol { counter-reset: it; } .artigo-corpo ol li::before { counter-increment: it; content: counter(it, upper-roman) '.'; position: absolute; left: 0; top: 0.35em; color: var(--ouro); font-family: var(--f-display); font-size: 0.8em; } .artigo-corpo .art-tabela { overflow-x: auto; margin: 1.4em 0; border: 1px solid var(--ouro-tenue); border-radius: var(--raio); } .artigo-corpo table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 420px; } .artigo-corpo thead th { font-family: var(--f-display); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: left; padding: 0.6rem 0.8rem; background: linear-gradient(160deg, var(--ouro), var(--titulo-c)); color: #1a1408; } .artigo-corpo tbody td { padding: 0.5rem 0.8rem; border-top: 1px solid var(--ouro-tenue); vertical-align: top; } .artigo-corpo tbody tr:nth-child(even) { background: var(--ouro-tenue); } .artigo-corpo .art-prancha { margin: 1.8em 0; padding: 1.5rem clamp(1rem, 4vw, 2rem); border: 1px solid var(--ouro-fosco); border-radius: var(--raio); background: linear-gradient(180deg, var(--ouro-tenue), transparent 220px), var(--superficie); } .artigo-corpo .art-prancha .art-abre, .artigo-corpo .art-prancha .art-fecho { text-align: center; font-family: var(--f-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ouro); font-size: 0.72rem; } .artigo-corpo .art-prancha .art-fecho { color: var(--ouro-claro); margin-top: 1rem; } .artigo-corpo .art-prancha p { font-size: 1.06rem; } /* bloco de texto-fonte (edição comentada) */ .artigo-corpo .art-fonte { margin: 1.4em 0; padding: 1rem 1.2rem; border: 1px solid var(--perg-borda); border-left: 3px solid var(--ouro); border-radius: 0 var(--raio) var(--raio) 0; background: linear-gradient(168deg, rgba(201, 164, 92, 0.08), transparent 70%); } .artigo-corpo .art-fonte .ref { display: block; font-family: var(--f-display); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ouro); margin-bottom: 0.5rem; } .artigo-corpo .art-fonte p { margin: 0 0 0.6em; font-style: italic; color: var(--texto-suave); font-size: 1rem; line-height: 1.6; } .artigo-corpo .art-fonte p:last-child { margin-bottom: 0; } .artigo-corpo .art-fonte b { color: var(--ouro-claro); font-style: normal; font-family: var(--f-display); font-size: 0.82em; letter-spacing: 0.04em; } /* ---------------------------------------------------------------------------- * Página do Fundador * -------------------------------------------------------------------------- */ .fundador-heroi { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: center; max-width: 980px; margin: 0 auto; padding: clamp(3rem, 8vh, 5.5rem) clamp(1.2rem, 4vw, 2.5rem) 1rem; } .retrato { position: relative; width: clamp(200px, 28vw, 280px); aspect-ratio: 1; justify-self: center; } .retrato img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid var(--ouro); box-shadow: 0 0 0 10px var(--ouro-tenue), var(--sombra-2); } .retrato::before { content: ''; position: absolute; inset: -16px; border: 1px dashed var(--ouro-fosco); border-radius: 50%; animation: orbita 60s linear infinite; } .retrato::after { content: '✦'; position: absolute; top: -27px; left: 50%; transform: translateX(-50%); color: var(--ouro); font-size: 1.1rem; text-shadow: 0 0 12px var(--ouro-fosco); } @keyframes orbita { to { transform: rotate(360deg); } } .fundador-texto .sobre-rotulo { font-family: var(--f-display); font-size: 0.78rem; letter-spacing: 0.36em; text-transform: uppercase; color: var(--ouro); margin-bottom: 0.5rem; } .fundador-texto h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: 0.06em; margin-bottom: 0.3em; } .fundador-texto .fundador-lema { font-size: 1.2rem; font-style: italic; color: var(--texto); max-width: 50ch; } .fundador-texto .fundador-lema em { color: var(--ouro-claro); font-style: normal; } .credenciais { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; max-width: 980px; margin: 2.4rem auto 0; } .credencial { position: relative; padding: 1.8rem 1.6rem 1.6rem; text-align: center; border: 1px solid var(--ouro-fosco); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra-1); transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao); } .credencial:hover { transform: translateY(-4px); border-color: var(--ouro); box-shadow: var(--sombra-2); } .credencial::before, .credencial::after { content: ''; position: absolute; width: 22px; height: 22px; border-color: var(--ouro); border-style: solid; } .credencial::before { top: 7px; left: 7px; border-width: 1px 0 0 1px; } .credencial::after { bottom: 7px; right: 7px; border-width: 0 1px 1px 0; } .credencial .emblema { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 0.9rem; border-radius: 50%; border: 1px solid var(--ouro-fosco); color: var(--ouro-claro); background: radial-gradient(circle at 35% 30%, var(--ouro-tenue), transparent 70%); } .credencial h3 { font-size: 1.02rem; letter-spacing: 0.1em; margin-bottom: 0.3em; } .credencial p { color: var(--texto-suave); font-size: 1rem; margin: 0; } .credencial p a { border-bottom: 1px solid var(--ouro-tenue); } .credencial .credencial-detalhe { display: block; margin-top: 0.35rem; font-family: var(--f-display); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ouro); } .fundador-citacao { max-width: 640px; margin: 3.2rem auto 0; text-align: center; font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-style: italic; color: var(--texto); } .fundador-citacao .hebraico { display: block; font-size: 1.15em; color: var(--ouro); margin-bottom: 0.4rem; font-style: normal; } .fundador-citacao cite { display: block; margin-top: 0.7rem; font-size: 0.8em; color: var(--texto-suave); font-style: normal; font-family: var(--f-display); letter-spacing: 0.18em; } .vinculo-discreto { text-align: center; margin-top: 2.2rem; } .vinculo-discreto a { font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--texto-suave); border-bottom: 1px solid transparent; } .vinculo-discreto a:hover { color: var(--ouro-claro); border-bottom-color: var(--ouro-fosco); } /* ---------------------------------------------------------------------------- * Página 404 * -------------------------------------------------------------------------- */ .pagina-404 { min-height: 60vh; display: grid; place-content: center; text-align: center; padding: 3rem 1.5rem; } .pagina-404 .he-404 { font-family: var(--f-hebraico); font-size: 2rem; color: var(--ouro); margin-bottom: 0.6rem; } .pagina-404 h1 { font-size: clamp(1.6rem, 5vw, 2.6rem); letter-spacing: 0.14em; } .pagina-404 p { font-style: italic; color: var(--texto-suave); max-width: 46ch; margin: 0.4rem auto 1.6rem; } .pagina-404 a.botao-404 { display: inline-block; font-family: var(--f-display); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--ouro); border-radius: 999px; padding: 0.6rem 1.5rem; transition: all var(--transicao); } .pagina-404 a.botao-404:hover { background: var(--ouro); color: #fdf8ec; } /* ---------------------------------------------------------------------------- * Responsivo * -------------------------------------------------------------------------- */ @media (max-width: 760px) { body { font-size: 17px; } header.topo { flex-wrap: wrap; } .marca-nome { font-size: 0.9rem; letter-spacing: 0.16em; } .marca-nome small { display: none; } /* a gaveta vira uma folha que sobe do rodapé (bottom sheet) */ aside.gaveta { top: auto; left: 0; right: 0; bottom: 0; width: 100vw; height: 94vh; height: 94dvh; border-left: none; border-top: 1px solid var(--ouro-fosco); border-radius: 18px 18px 0 0; box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.4); transform: translateY(103%); } aside.gaveta.aberta { transform: translateY(0); } aside.gaveta::before { content: ''; position: sticky; top: 0.55rem; display: block; width: 46px; height: 4px; margin: 0.55rem auto 0; border-radius: 999px; background: var(--ouro-fosco); z-index: 6; } .fundador-heroi { grid-template-columns: 1fr; text-align: center; } .fundador-texto .fundador-lema { margin: 0 auto; } .eixo li { padding-right: 1.1rem; } .eixo li:nth-child(even) { padding-left: 1.1rem; } .arvore .no .no-legenda { font-size: 16px; } .arvore .no .no-sub { font-size: 13px; } .arvore .caminho-letra { font-size: 17px; } .face-btn { padding: 0.5rem 0.9rem; font-size: 0.68rem; } } @media (max-width: 420px) { nav.navega { gap: 0.6rem; } nav.navega a { font-size: 0.68rem; letter-spacing: 0.1em; } .busca-caixa input { font-size: 1rem; } .alterna-tema { width: 36px; height: 36px; } } /* ---------------------------------------------------------------------------- * Movimento reduzido * -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .arvore .no, .arvore .no-vis, .arvore .caminho, .arvore .caminho-letra { animation: none; } .arvore .no:hover .no-vis, .arvore .no:focus-visible .no-vis, .arvore.tem-selecao .no.ativo .no-vis { transform: none; } .ceu::before, .ceu::after { animation: none; } .retrato::before { animation: none; } } /* ---------------------------------------------------------------------------- * Biblioteca — TreeView lateral do acervo (categoria › livro › capítulo) * -------------------------------------------------------------------------- */ .bib-corpo { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 1.4rem; } .bib-conteudo { flex: 1 1 0; min-width: 0; } .bib-conteudo .leitor { margin-top: 0.4rem; } .atree { flex: 0 0 auto; width: clamp(210px, 23vw, 320px); min-width: 170px; max-width: 60vw; resize: horizontal; /* ampliar / reduzir a largura */ overflow: auto; max-height: calc(100vh - 96px); position: sticky; top: 80px; padding: 0.55rem 0.45rem 0.8rem; background: linear-gradient(168deg, var(--perg) 0%, var(--perg-2) 100%); border: 1px solid var(--perg-borda); border-radius: 12px; box-shadow: 0 10px 26px rgba(60, 44, 18, 0.09); } .bib-corpo.atree-oculta .atree { display: none; } /* A árvore é um painel de pergaminho CLARO nos dois temas; no tema escuro reaponta-se a paleta interna para tinta/ouro escuro, senão o texto claro ficaria sobre pergaminho claro (sem contraste). */ [data-tema="escuro"] .atree { --texto: #2e2516; --texto-suave: #6d5b3c; --texto-apagado: #8a7649; --tinta: #2b2214; --ouro: #a07c28; --ouro-vivo: #6b4e12; --ouro-fosco: rgba(150, 116, 40, 0.45); --ouro-tenue: rgba(150, 116, 40, 0.14); --joia: #34598c; --superficie-firme: #fdf8ea; } .atree-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0.45rem 0.5rem; border-bottom: 1px solid var(--ouro-tenue); margin-bottom: 0.45rem; } .atree-titulo { font-family: var(--f-display); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ouro-vivo); font-weight: 700; } .atree-botoes { display: flex; gap: 0.3rem; } .atree-mini { width: 23px; height: 23px; line-height: 1; padding: 0; font-size: 0.8rem; color: var(--texto-suave); cursor: pointer; background: transparent; border: 1px solid var(--ouro-tenue); border-radius: 6px; } .atree-mini:hover { color: var(--ouro-vivo); border-color: var(--ouro); } /* nós (categoria e livro) */ .atree-no > .atree-linha { display: flex; align-items: center; gap: 0.35rem; width: 100%; text-align: left; cursor: pointer; color: var(--texto); background: transparent; border: 0; font-family: inherit; font-size: 0.9rem; padding: 0.3rem 0.4rem; border-radius: 7px; } .atree-no > .atree-linha:hover { background: var(--ouro-tenue); } .atree-chevron { flex: 0 0 0.85em; font-size: 0.62rem; color: var(--ouro); transition: transform 160ms ease; user-select: none; } .atree-no.aberto > .atree-linha > .atree-chevron { transform: rotate(90deg); } .atree-rotulo { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .atree-conta { flex: 0 0 auto; font-size: 0.68rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; } .atree-cat > .atree-linha > .atree-rotulo { font-family: var(--f-display); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ouro-vivo); font-weight: 700; } .atree-livro > .atree-linha > .atree-rotulo { font-weight: 600; color: var(--tinta); } .atree-filhos { margin-left: 0.7rem; padding-left: 0.35rem; border-left: 1px solid var(--ouro-tenue); display: none; } .atree-no.aberto > .atree-filhos { display: block; } /* capítulos (folhas) — grade compacta de números */ .atree-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.3em, 1fr)); gap: 3px; padding: 0.25rem 0.1rem 0.4rem; } .atree-cap { font-size: 0.82rem; font-weight: 600; text-align: center; cursor: pointer; color: var(--joia); background: var(--superficie-firme); border: 1px solid var(--ouro-fosco); border-radius: 5px; padding: 0.26rem 0.1rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .atree-cap:hover { color: #fdf8ec; background: var(--joia); border-color: var(--joia); } .atree-cap.ativo { background: var(--ouro); border-color: var(--ouro); color: #fdf8ec; } [data-tema="escuro"] .atree-cap.ativo { color: #1a1408; } .atree-vazio, .atree-carregando { padding: 0.3rem 0.5rem; font-size: 0.78rem; font-style: italic; color: var(--texto-apagado); } /* alça para ocultar / mostrar a árvore */ .atree-toggle { flex: 0 0 auto; align-self: stretch; width: 16px; padding: 0; margin-top: 0.1rem; cursor: pointer; color: var(--ouro-vivo); background: var(--ouro-tenue); border: 1px solid var(--ouro-tenue); border-radius: 6px; font-size: 0.8rem; } .atree-toggle:hover { background: var(--ouro-fosco); } @media (max-width: 760px) { .bib-corpo { flex-direction: column; } .atree { width: 100%; max-width: none; resize: vertical; position: static; max-height: 46vh; } .atree-toggle { width: 100%; height: 16px; align-self: auto; } }