/* ============================================================ FORJA LENDÁR[IA] · a-taxonomia.css (vive em css/) CSS por-página de "A Taxonomia" · linkado direto no , depois de forja.css (não entra no @import do forja.css). Namespace tx- · só toca dentro da página da Taxonomia. Disciplina de cor (Lei 6): a página inteira é bronze/bege sobre preto. Os ÚNICOS eventos cromáticos fortes são Luz = âmbar e Sombra = vermelho/brasa. As Naturezas se distinguem por tipo e numeral, nunca por cor inventada. ============================================================ */ /* helpers de cor de span (reaproveita o vocabulário .a/.v do Códex) */ .tx .a { color: var(--amarelo); } .tx .br { color: var(--bronze-claro); } /* ── princípio-mãe · três perguntas → três réguas ───────────── */ .tx-perg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .tx-perg .q { background: var(--preto-2); padding: 34px 30px 30px; position: relative; } .tx-perg .q .pn { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze); margin-bottom: 18px; } .tx-perg .q .ask { font-family: var(--voz-sagrada); font-size: 19px; line-height: 1.32; color: var(--bege); margin-bottom: 16px; min-height: 74px; } .tx-perg .q .arw { color: var(--bronze); font-size: 15px; margin: 0 0 10px; } .tx-perg .q .axis { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: 0.01em; font-size: 22px; color: var(--amarelo); } .tx-perg .q .axis-sub { font-size: 14px; color: var(--fg3); margin-top: 8px; font-style: italic; } /* ── as três Naturezas ──────────────────────────────────────── */ .tx-nats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .tx-nat-card { border: 1px solid var(--linha-bronze); background: linear-gradient(165deg, var(--preto-2), var(--preto)); padding: 36px 30px; position: relative; } .tx-nat-card .centros { position: absolute; top: 26px; right: 28px; font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.16em; color: var(--bronze); } .tx-nat-card .nat-roman { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze); margin-bottom: 26px; } .tx-nat-card h3 { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.01em; font-size: 30px; color: var(--bege); line-height: 1; margin-bottom: 16px; } .tx-nat-card .proc { font-size: 16.5px; color: var(--fg2); font-style: italic; line-height: 1.55; margin-bottom: 24px; } .tx-nat-card .povos { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 20px; border-top: 1px solid var(--linha-fraca); } .tx-nat-card .povos span { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.12em; color: var(--bronze-claro); border: 1px solid var(--linha-fraca); padding: 5px 11px; } /* ── controle de destino (toggle Luz/Sombra/Ambos) ──────────── */ .tx-destino { display: flex; align-items: center; gap: 0; border: 1px solid var(--linha-bronze); width: fit-content; margin: 0 auto 6px; } .tx-destino button { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze-claro); background: transparent; border: 0; border-right: 1px solid var(--linha-fraca); padding: 12px 22px; cursor: pointer; transition: color .2s, background .2s; } .tx-destino button:last-child { border-right: 0; } .tx-destino button:hover { color: var(--bege); } .tx-destino button[aria-pressed="true"] { color: var(--preto); background: var(--bronze-claro); } .tx-destino .ctrl-note { text-align: center; } /* ── matriz dos nove Clãs ───────────────────────────────────── */ .tx-band { margin-top: 56px; } .tx-band:first-of-type { margin-top: 40px; } .tx-band-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--linha-bronze); } .tx-band-head .bn { font-family: var(--voz-monumental); text-transform: uppercase; font-size: 19px; letter-spacing: 0.01em; color: var(--bege); } .tx-band-head .bp { font-size: 15px; color: var(--fg3); font-style: italic; } .tx-band-head .bc { margin-left: auto; font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.16em; color: var(--bronze); } .tx-cla { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); margin-bottom: 14px; transition: opacity .3s; } .tx-clans.focus .tx-cla:not(.lit) { opacity: 0.4; } /* coluna do nome (neutro) · escudo + texto */ .tx-cla .cla-name { background: var(--preto-3); padding: 24px 26px; display: flex; flex-direction: row; align-items: center; gap: 18px; } .tx-cla .cla-name .cla-text { display: flex; flex-direction: column; gap: 9px; } .tx-cla .cla-name .neutro { font-family: var(--voz-sagrada); font-size: 28px; letter-spacing: 0.03em; color: var(--bege); line-height: 1; } .tx-cla .cla-name .nlabel { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bronze); } /* o ESCUDO de cada Clã · moldura heráldica recuada + emblema próprio. Disciplina de cor (Lei 6): neutro = bronze, nunca âmbar (reservado à Luz). */ .tx-cla .cla-crest { width: 64px; height: 64px; flex-shrink: 0; display: grid; place-items: center; } /* rebite/gema no topo do escudo + borda interna (ícones detalhados) */ .tx-cla .cla-crest .rivet { stroke: var(--bronze); fill: var(--bronze); opacity: 0.7; } .tx-clans.focus .tx-cla.lit .cla-crest .rivet { stroke: var(--bronze-claro); fill: var(--bronze-claro); opacity: 0.92; } .tx-state.luz .glyph .rays { opacity: 0.5; } .tx-state.sombra .glyph .sh2 { opacity: 0.5; } .tx-state.sombra .glyph .rivet { stroke: var(--vermelho-sinal); fill: var(--vermelho-sinal); opacity: 0.75; } .tx-cla .cla-crest svg { width: 54px; height: 54px; display: block; overflow: visible; } .tx-cla .cla-crest img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(19,17,9,0.62)); } .tx-cla .cla-crest .shield { stroke: var(--bronze); stroke-width: 1.3; fill: none; opacity: 0.5; } .tx-cla .cla-crest .charge { stroke: var(--bronze-claro); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; } /* acende o brasão da linha em foco, sem cromar (continua bronze/bege) */ .tx-clans.focus .tx-cla.lit .cla-crest .shield { opacity: 0.85; stroke: var(--bronze-claro); } .tx-clans.focus .tx-cla.lit .cla-crest .charge { stroke: var(--bege); } /* plates de estado */ .tx-state { padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; position: relative; transition: opacity .3s, filter .3s; } .tx-state .glyph { width: 48px; height: 48px; } .tx-state .glyph svg { width: 48px; height: 48px; display: block; overflow: visible; } /* os raios da Luz são o "forjado" irradiando: presentes sempre, acendem na view Luz */ .tx-clans[data-view="luz"] .tx-state.luz .glyph .rays { opacity: 0.78; } .tx-state .st-label { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; } .tx-state .st-name { font-family: var(--voz-sagrada); font-size: 22px; letter-spacing: 0.02em; line-height: 1.05; } /* LUZ · forjado · âmbar/bronze */ .tx-state.luz { background: linear-gradient(160deg, var(--amarelo-05), var(--preto-2)); } .tx-state.luz .glyph svg { stroke: var(--bronze-claro); } .tx-state.luz .st-label { color: var(--bronze); } .tx-state.luz .st-name { color: var(--bege); } .tx-clans[data-view="ambos"] .tx-state.luz:hover .st-name, .tx-clans[data-view="luz"] .tx-state.luz .st-name { color: var(--amarelo); } .tx-clans[data-view="luz"] .tx-state.luz { background: linear-gradient(160deg, var(--amarelo-10), var(--preto-2)); } .tx-clans[data-view="luz"] .tx-state.luz .glyph svg { stroke: var(--amarelo); } /* SOMBRA · caído · vermelho/brasa */ .tx-state.sombra { background: linear-gradient(160deg, var(--brasa-08), var(--preto)); } .tx-state.sombra .glyph svg { stroke: var(--vermelho-sinal); opacity: 0.8; } .tx-state.sombra .st-label { color: rgba(230,57,70,0.7); } .tx-state.sombra .st-name { color: rgba(232,220,196,0.62); } .tx-clans[data-view="sombra"] .tx-state.sombra { background: linear-gradient(160deg, var(--brasa-16), var(--preto)); } .tx-clans[data-view="sombra"] .tx-state.sombra .st-name { color: var(--vermelho-sinal); } .tx-clans[data-view="sombra"] .tx-state.sombra .glyph svg { opacity: 1; } /* view: esmaece o destino oposto */ .tx-clans[data-view="luz"] .tx-state.sombra, .tx-clans[data-view="sombra"] .tx-state.luz { opacity: 0.28; filter: saturate(0.4); } /* ── Energia · eixo celeste ─────────────────────────────────── */ .tx-energias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .tx-en-card { border: 1px solid var(--linha-bronze); background: var(--preto-2); padding: 32px 28px; } .tx-en-card .glyph { width: 34px; height: 34px; margin-bottom: 22px; } .tx-en-card .glyph svg { width: 34px; height: 34px; stroke: var(--bronze-claro); display: block; } .tx-en-card h3 { font-family: var(--voz-monumental); text-transform: uppercase; font-size: 26px; color: var(--bege); margin-bottom: 6px; } .tx-en-card .instinto { font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); margin-bottom: 18px; } .tx-en-card .dirige { font-size: 16px; color: var(--fg2); line-height: 1.55; } /* ── montador das 27 Identidades ────────────────────────────── */ .tx-forge { border: 1px solid var(--linha-bronze); background: linear-gradient(165deg, var(--preto-2), var(--preto)); margin-top: 44px; } .tx-forge-pick { padding: 30px 34px; border-bottom: 1px solid var(--linha-fraca); } .tx-pick-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .tx-pick-row + .tx-pick-row { margin-top: 18px; } .tx-pick-row .pl { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bronze); width: 78px; flex-shrink: 0; } .tx-chip { font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.08em; color: var(--bronze-claro); background: transparent; border: 1px solid var(--linha-fraca); padding: 8px 15px; cursor: pointer; transition: color .18s, background .18s, border-color .18s, fill .18s, stroke .18s, transform .18s, opacity .18s, filter .18s, box-shadow .18s; } .tx-chip:hover { border-color: var(--bronze); color: var(--bege); } .tx-chip[aria-pressed="true"] { background: var(--bronze-claro); border-color: var(--bronze-claro); color: var(--preto); } .tx-forge-out { padding: 38px 34px; text-align: center; } .tx-forge-out .ident { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(34px, 5vw, 56px); color: var(--amarelo); line-height: 0.96; margin-bottom: 18px; } .tx-forge-out .reading { max-width: 600px; margin: 0 auto 24px; font-size: 18px; color: var(--fg2); line-height: 1.6; font-style: italic; text-wrap: pretty; } .tx-forge-out .destinos { display: inline-flex; align-items: stretch; gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .tx-forge-out .destinos .d { background: var(--preto-2); padding: 14px 26px; min-width: 150px; } .tx-forge-out .destinos .dl { font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 6px; } .tx-forge-out .destinos .dn { font-family: var(--voz-sagrada); font-size: 19px; letter-spacing: 0.02em; } .tx-forge-out .destinos .d.l .dl { color: var(--bronze); } .tx-forge-out .destinos .d.l .dn { color: var(--amarelo); } .tx-forge-out .destinos .d.s .dl { color: rgba(230,57,70,0.7); } .tx-forge-out .destinos .d.s .dn { color: var(--vermelho-sinal); } .tx-forge-out .destinos .d { transition: opacity .25s, filter .25s; } .tx-forge-out .destinos .d.off { opacity: 0.3; filter: saturate(0.35); } .tx-forge-out .destinos .d.on { box-shadow: inset 0 0 0 1px var(--linha-bronze); } .tx-traj { margin-top: 24px; font-family: var(--voz-operacional); font-size: 17px; line-height: 1.6; color: var(--fg2); max-width: 620px; margin-inline: auto; } .tx-traj b { color: var(--bege); font-weight: 600; font-style: normal; } .tx-traj b.apex { font-family: var(--voz-sagrada); font-weight: 700; letter-spacing: 0.04em; color: var(--amarelo); } .tx-traj b.apex.vilao { color: var(--vermelho-sinal); } .tx-traj .q { color: var(--fg3); font-style: italic; } /* ── eixos transversais ─────────────────────────────────────── */ .tx-perp-note { font-family: var(--voz-sagrada); font-size: 14px; letter-spacing: 0.04em; color: var(--bronze-claro); font-style: italic; margin-bottom: 30px; } .tx-trans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .tx-tr-card { border: 1px solid var(--linha-bronze); background: var(--preto-2); padding: 32px 28px; display: flex; flex-direction: column; } .tx-tr-card .trn { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bronze); margin-bottom: 18px; } .tx-tr-card h3 { font-family: var(--voz-monumental); text-transform: uppercase; font-size: 22px; color: var(--bege); line-height: 1; margin-bottom: 16px; } .tx-tr-card .trd { font-size: 16px; color: var(--fg2); line-height: 1.58; margin-bottom: 22px; } .tx-tr-card .trpoles { margin-top: auto; display: flex; gap: 10px; } .tx-tr-card .trpoles .pole { flex: 1; border: 1px solid var(--linha-fraca); padding: 12px 14px; } .tx-tr-card .trpoles .pl { font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 5px; } .tx-tr-card .trpoles .pv { font-family: var(--voz-sagrada); font-size: 16px; letter-spacing: 0.02em; } .tx-tr-card .trpoles .pole.l .pv { color: var(--amarelo); } .tx-tr-card .trpoles .pole.s .pv { color: var(--vermelho-sinal); } .tx-tr-card .trtag { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linha-fraca); } /* ── glossário-fecho ────────────────────────────────────────── */ .tx-gloss { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .tx-gloss .row { background: var(--preto-2); padding: 22px 26px; } .tx-gloss .row .term { font-family: var(--voz-sagrada); font-size: 17px; letter-spacing: 0.03em; color: var(--bege); margin-bottom: 8px; } .tx-gloss .row .is { font-size: 14.5px; color: var(--fg2); line-height: 1.5; } .tx-gloss .row .isnot { font-size: 13px; color: rgba(230,57,70,0.66); font-style: italic; margin-top: 4px; } /* ── responsivo ─────────────────────────────────────────────── */ @media (max-width: 860px) { .tx-perg, .tx-nats, .tx-energias, .tx-trans { grid-template-columns: 1fr; } .tx-cla { grid-template-columns: 1fr; } .tx-gloss { grid-template-columns: 1fr; } .tx-perg .q .ask { min-height: 0; } }