/* ============================================================ FORJA LENDÁR[IA] · identidade-lendaria.css (vive em css/) CSS por-página do Manifesto da Identidade Lendária. Linkado direto no , depois de forja.css (fora do @import). Namespace il- · só atua dentro de .il. Disciplina de cor (Lei 6): a página é bronze/bege sobre preto. Âmbar é reservado à tese luminosa; os nomes mortos da ciência e as Sombras (Ermitão, Carcereiro, Medíocre) recebem cinza/vermelho. ============================================================ */ /* ── índice de leitura · cinco movimentos ───────────────────── */ .il-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .il-map a { background: var(--preto-2); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; transition: background .3s; } .il-map a:hover { background: var(--preto-3); } .il-map .mn { font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.2em; color: var(--bronze); } .il-map .mt { font-family: var(--voz-sagrada); font-size: 18px; letter-spacing: 0.02em; color: var(--bege); line-height: 1.2; transition: color .3s; } .il-map a:hover .mt { color: var(--amarelo); } /* ── um movimento · cabeçalho fixo + coluna de leitura ──────── */ .il-mov { display: grid; grid-template-columns: 250px 1fr; gap: 60px; align-items: start; } .il-mov + .il-mov { margin-top: calc(var(--sec-pad-y) * 0.7); padding-top: calc(var(--sec-pad-y) * 0.7); border-top: 1px solid var(--linha-fraca); } .il-mov-head { position: sticky; top: 108px; } .il-mov-num { font-family: var(--voz-sagrada); font-size: 15px; letter-spacing: 0.3em; color: var(--bronze); display: block; margin-bottom: 16px; } .il-mov-num::before { content: ""; display: block; width: 38px; height: 1px; background: var(--linha-bronze); margin-bottom: 18px; } .il-mov-title { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.015em; font-size: clamp(26px, 3vw, 38px); line-height: 0.98; color: var(--bege); } .il-mov-kick { margin-top: 16px; font-family: var(--voz-operacional); font-style: italic; font-size: 16px; color: var(--bronze-claro); line-height: 1.5; } .il-mov .prosa { font-size: 19.5px; line-height: 1.74; max-width: 660px; } .il-mov .prosa p + p { margin-top: 20px; } .il .prosa .sombra { color: var(--vermelho-sinal); font-style: normal; } .il .prosa .nome { color: var(--bege); font-style: normal; } /* ── âncora: roster das tradições ───────────────────────────── */ .il-anchor { margin-top: 38px; border: 1px solid var(--linha-bronze); background: var(--preto-2); } .il-anchor .al { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze); padding: 18px 24px 0; } .il-roster { display: flex; flex-direction: column; } .il-roster .r { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; padding: 18px 24px; border-top: 1px solid var(--linha-fraca); align-items: baseline; } .il-roster .r:first-child { border-top: 0; } .il-roster .r .who { font-family: var(--voz-sagrada); font-size: 18px; letter-spacing: 0.02em; color: var(--bege); } .il-roster .r .era { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.12em; color: var(--bronze); white-space: nowrap; } .il-roster .r .what { grid-column: 1 / -1; font-size: 15px; color: var(--fg2); line-height: 1.5; } /* ── âncora: as cinco dimensões (Big Five) ──────────────────── */ .il-five { margin-top: 38px; display: grid; gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .il-five .d { background: var(--preto-2); padding: 16px 22px; display: flex; align-items: baseline; gap: 16px; } .il-five .d .n { font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.12em; color: var(--bronze); width: 22px; flex-shrink: 0; } .il-five .d .nm { font-family: var(--voz-sagrada); font-size: 18px; letter-spacing: 0.02em; color: var(--bege); } .il-five .d .gl { font-size: 14.5px; color: var(--fg2); font-style: italic; } /* ── âncora: as três camadas de McAdams ─────────────────────── */ .il-camadas { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; } .il-camadas .c { border: 1px solid var(--linha-fraca); border-left: 1px solid var(--bronze); background: var(--preto-2); padding: 14px 20px; } .il-camadas .c .ct { font-family: var(--voz-sagrada); font-size: 16px; letter-spacing: 0.03em; color: var(--bege); } .il-camadas .c .cd { font-size: 14px; color: var(--fg2); margin-top: 3px; } .il-camadas .c.deep { border-left-color: var(--amarelo); } .il-camadas .c.deep .ct { color: var(--amarelo); } /* ── âncora: os quatro nomes mortos (a ciência sem vida) ─────── */ .il-mortos { margin-top: 38px; } .il-mortos .ml { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze); margin-bottom: 16px; } .il-mortos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .il-mortos-grid .m { background: var(--preto-2); padding: 26px 18px; text-align: center; filter: saturate(0.2); } .il-mortos-grid .m .mname { font-family: var(--voz-sagrada); font-size: 19px; letter-spacing: 0.02em; color: var(--cinzas); } .il-mortos-grid .m .mtag { font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(74,69,62,0.9); margin-top: 8px; } /* ── âncora: duas verdades (a síntese) ──────────────────────── */ .il-verdades { margin-top: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .il-verdades .v { background: var(--preto-2); padding: 26px 26px; } .il-verdades .v .vk { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); margin-bottom: 14px; } .il-verdades .v .vt { font-family: var(--voz-sagrada); font-size: 19px; letter-spacing: 0.02em; color: var(--bege); line-height: 1.3; } .il-lente { margin-top: 30px; display: flex; align-items: center; gap: 18px; border: 1px solid var(--linha-bronze); background: linear-gradient(160deg, var(--amarelo-05), var(--preto-2)); padding: 22px 26px; } .il-lente svg { width: 40px; height: 40px; flex-shrink: 0; stroke: var(--amarelo); } .il-lente .lt { font-family: var(--voz-sagrada); font-size: 18px; letter-spacing: 0.02em; color: var(--bege); line-height: 1.35; } .il-lente .lt b { color: var(--amarelo); font-weight: 400; } /* ── âncora: destinos · Luz que pode cair em Sombra ─────────── */ .il-destinos { margin-top: 38px; display: grid; gap: 14px; } .il-dpair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; border: 1px solid var(--linha-bronze); background: var(--preto-2); padding: 20px 26px; } .il-dpair .luz { text-align: right; } .il-dpair .luz .dn { font-family: var(--voz-sagrada); font-size: 23px; letter-spacing: 0.02em; color: var(--amarelo); } .il-dpair .sombra .dn { font-family: var(--voz-sagrada); font-size: 23px; letter-spacing: 0.02em; color: var(--vermelho-sinal); } .il-dpair .dl { font-family: var(--voz-sagrada); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; margin-top: 5px; } .il-dpair .luz .dl { color: var(--bronze); } .il-dpair .sombra .dl { color: rgba(230,57,70,0.7); } .il-dpair .arw { color: var(--bronze); font-size: 18px; } /* ── credo · pull-quote monumental ──────────────────────────── */ .il-credo { text-align: center; max-width: 940px; margin: 0 auto; } .il-credo .mark { font-family: var(--voz-sagrada); font-size: 60px; color: var(--bronze); line-height: 0.4; margin-bottom: 30px; } .il-credo .line { font-family: var(--voz-operacional); font-style: italic; font-size: clamp(23px, 3.2vw, 36px); line-height: 1.4; color: var(--bege); text-wrap: pretty; } .il-credo .line .am { color: var(--amarelo); font-style: normal; } /* ── fundamentos · referências ──────────────────────────────── */ .il-fund { display: grid; gap: 1px; background: var(--linha-fraca); border: 1px solid var(--linha-fraca); } .il-fund .ref { background: var(--preto-2); padding: 20px 26px; display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: baseline; } .il-fund .ref .src { font-family: var(--voz-sagrada); font-size: 16px; letter-spacing: 0.02em; color: var(--bege); } .il-fund .ref .desc { font-size: 15.5px; color: var(--fg2); line-height: 1.55; } .il-fund-note { margin-top: 30px; max-width: 760px; font-family: var(--voz-operacional); font-style: italic; font-size: 17px; line-height: 1.65; color: var(--fg2); text-wrap: pretty; } .il-fund-note .am { color: var(--amarelo); font-style: normal; } /* ── responsivo ─────────────────────────────────────────────── */ @media (max-width: 900px) { .il-mov { grid-template-columns: 1fr; gap: 26px; } .il-mov-head { position: static; } .il-map, .il-verdades { grid-template-columns: 1fr; } .il-mortos-grid { grid-template-columns: 1fr 1fr; } .il-fund .ref { grid-template-columns: 1fr; gap: 6px; } .il-dpair { grid-template-columns: 1fr; text-align: center; gap: 8px; } .il-dpair .luz { text-align: center; } .il-dpair .arw { transform: rotate(90deg); } }