/* ============================================================ NÃO TEM TRADUÇÃO · Design System v4 Produção. Importe e use as variáveis; não recopie hex. Web fonts no : ============================================================ */ :root{ /* ---------- COR · NEUTROS ---------- */ --paper: #F4F1EA; /* fundo */ --paper-2: #EAE6DC; /* superfície secundária, zebra */ --ink: #141311; /* texto */ --muted: #8A857C; /* texto secundário, metadado */ --line: #D8D3C8; /* traço fino sobre papel */ /* ---------- COR · ACENTOS ---------- */ --indigo: #22406A; /* primária · interativo, campos */ --indigo-deep: #14284A; /* campo primário escuro */ --vermillion: #D63A1F; /* sinal · uso raro, assinatura, alerta */ --gold: #ECC24A; /* marca-texto · destaque */ --green: #2E5142; /* secundária · campo alternativo */ /* aliases semânticos — use na peça */ --bg: var(--paper); --bg-2: var(--paper-2); --fg: var(--ink); --fg-muted: var(--muted); --hair: var(--line); --primary: var(--indigo); --signal: var(--vermillion); --mark: var(--gold); --field-2: var(--green); /* ---------- TIPOGRAFIA ---------- */ --f-display:"Archivo", system-ui, sans-serif; /* títulos e corpo latino */ --f-body: "Archivo", system-ui, sans-serif; --f-gothic: "Noto Sans JP", sans-serif; /* kanji de impacto */ --f-mincho: "Shippori Mincho", serif; /* kanji de leitura */ --f-mono: "IBM Plex Mono", ui-monospace, monospace; /* rótulo, dado */ --t-display: clamp(38px, 6.2vw, 92px); --t-h2: clamp(28px, 3.8vw, 52px); --t-sub: clamp(19px, 2.0vw, 26px); --t-lede: clamp(18px, 1.8vw, 23px); --t-body: clamp(16px, 1.25vw, 18px); --t-meta: 12px; --t-foot: 11px; --lh-tight:.92; --lh-snug:1.2; --lh-body:1.58; --tr-display:-.02em; --tr-meta:.12em; --stretch-alto:125%; --measure:62ch; /* ---------- ESPAÇO ---------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; --gutter:clamp(20px,4vw,44px); --maxw:1120px; --section-y:clamp(56px,8vw,104px); /* ---------- RAIO ---------- */ --r:8px; /* caixa: card, botão, input, tag, checkbox, imagem, campo */ --r-blob: 42% 58% 63% 37% / 45% 42% 58% 55%; /* mancha de atmosfera */ --r-blob-2:58% 42% 38% 62% / 52% 60% 40% 48%; /* ---------- LINHA ---------- */ --line-hair: 1px; /* moldura */ --line-block:2px; /* estrutura */ --line-stmt: 3px; /* separação de seção */ /* ---------- GRÃO ---------- */ --grain: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.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-op:.05; } /* ============================================================ CAMPOS · trocam o fundo, não a gramática. Um campo por peça. ============================================================ */ .field-ink{--bg:#141311;--bg-2:#1D1B18;--fg:#F4F1EA;--fg-muted:#9A958C; --signal:#E8503A;--mark:#ECC24A;--primary:#6E8CC4;--hair:rgba(244,241,234,.22); background:var(--bg);color:var(--fg)} .field-indigo{--bg:linear-gradient(158deg,var(--indigo),var(--indigo-deep)); --bg-2:rgba(255,255,255,.07);--fg:#F4F1EA;--fg-muted:#9DB2D6; --signal:#E8503A;--mark:#ECC24A;--hair:rgba(244,241,234,.24); background:var(--bg);color:var(--fg)} .field-green{--bg:linear-gradient(158deg,#37624F,#243E33); --bg-2:rgba(255,255,255,.07);--fg:#F4F1EA;--fg-muted:#A8C9BA; --signal:#E8503A;--mark:#ECC24A;--hair:rgba(244,241,234,.24); background:var(--bg);color:var(--fg)} .field-signal{--bg:linear-gradient(158deg,#E24A32,#B02613); --bg-2:rgba(255,255,255,.10);--fg:#F4F1EA;--fg-muted:rgba(244,241,234,.78); --mark:#F0D06A;--hair:rgba(244,241,234,.35); background:var(--bg);color:var(--fg)} /* ============================================================ TEMA · claro é o default (:root). Escuro flipa os mesmos tokens. .theme-dark serve página inteira ou qualquer container. Os campos coloridos são o tema escuro com um fundo de cor. ============================================================ */ .theme-dark{--bg:#141311;--bg-2:#1D1B18;--fg:#F4F1EA;--fg-muted:#9A958C; --hair:rgba(244,241,234,.22);--signal:#E8503A;--primary:#6E8CC4; background:var(--bg);color:var(--fg)} .theme-dark .wash{mix-blend-mode:screen;opacity:.26} .theme-dark.grain::after{mix-blend-mode:screen;opacity:.07} /* atmosfera opcional · fica atrás do conteúdo, nunca compete com ele */ .wash{position:absolute;pointer-events:none;z-index:0;border-radius:var(--r-blob); filter:blur(46px);opacity:.18;mix-blend-mode:multiply} .wash--indigo{background:radial-gradient(circle at 38% 38%,var(--indigo),transparent 70%)} .wash--green{background:radial-gradient(circle at 40% 40%,var(--green),transparent 70%)} .wash--gold{background:radial-gradient(circle at 42% 32%,var(--gold),transparent 72%);opacity:.24} .wash--b{border-radius:var(--r-blob-2)} .field-ink .wash,.field-indigo .wash,.field-green .wash,.field-signal .wash{mix-blend-mode:screen;opacity:.26} /* ============================================================ BASE ============================================================ */ .ntt{background:var(--bg);color:var(--fg);font-family:var(--f-body);position:relative} .ntt *{box-sizing:border-box} .ntt > *:not(.wash):not(.kanji-tex){position:relative;z-index:1} /* títulos */ .display{font-family:var(--f-display);font-weight:900;font-stretch:var(--stretch-alto); font-size:var(--t-display);line-height:var(--lh-tight);letter-spacing:var(--tr-display)} .h2{font-family:var(--f-display);font-weight:900;font-stretch:var(--stretch-alto); font-size:var(--t-h2);line-height:var(--lh-tight);letter-spacing:var(--tr-display)} .num-giant{font-family:var(--f-display);font-weight:900;font-stretch:var(--stretch-alto); font-size:clamp(80px,12vw,180px);line-height:.8;letter-spacing:-.04em} /* texto */ .sub{font-size:var(--t-sub);font-weight:600;line-height:1.25} .lede{font-size:var(--t-lede);line-height:1.35;font-weight:500;max-width:var(--measure)} .body{font-size:var(--t-body);line-height:var(--lh-body);max-width:var(--measure)} .meta{font-family:var(--f-mono);font-size:var(--t-meta);letter-spacing:var(--tr-meta); text-transform:uppercase;color:var(--fg-muted)} .meta b{color:var(--fg);font-weight:500} /* kanji · impacto (gothic) e leitura (mincho) */ .kanji-alto{font-family:var(--f-gothic);font-weight:900;line-height:1} .kanji-tex{font-family:var(--f-gothic);font-weight:900;line-height:1;position:absolute; pointer-events:none;user-select:none;opacity:.06;z-index:0} .kanji{font-family:var(--f-mincho);font-weight:800;line-height:1} .kanji-v{font-family:var(--f-mincho);font-weight:800;writing-mode:vertical-rl;line-height:1.1} .kanji-ghost{font-family:var(--f-mincho);font-weight:800;line-height:1;opacity:.14} .romaji{font-family:var(--f-mono);font-size:var(--t-meta);letter-spacing:.1em; text-transform:uppercase;color:var(--fg-muted)} /* marca-texto · chip cheio, texto em tinta, idêntico no claro e no escuro */ .mark{background:var(--mark);color:var(--ink);padding:.04em .2em;border-radius:var(--r); box-decoration-break:clone;-webkit-box-decoration-break:clone} .signal{color:var(--signal)} /* estrutura · raio 0 */ .topbar{display:flex;justify-content:space-between;align-items:baseline; padding-bottom:var(--sp-4);border-bottom:var(--line-hair) solid var(--hair);margin-bottom:var(--sp-6)} .foot{margin-top:auto;padding-top:var(--sp-4);border-top:var(--line-hair) solid var(--hair); display:flex;justify-content:space-between;gap:var(--sp-5)} .foot .meta{font-size:var(--t-foot);white-space:nowrap} .rule{border-top:var(--line-stmt) solid var(--fg)} .rule-thin{border-top:var(--line-hair) solid var(--hair)} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} .section{padding-block:var(--section-y)} .tag{display:inline-block;align-self:flex-start;font-family:var(--f-mono);font-size:11px; letter-spacing:var(--tr-meta);text-transform:uppercase;border:var(--line-block) solid var(--fg); padding:8px 14px;color:var(--fg);border-radius:var(--r)} .tag--signal{border-color:var(--signal);color:var(--signal)} .check{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--t-body); line-height:1.4;margin-block:var(--sp-3)} .check .box{width:22px;height:22px;border:2px solid var(--signal);flex:0 0 auto;margin-top:3px; border-radius:var(--r)} .ficha{display:grid;grid-template-columns:64px 74px 1fr;gap:var(--sp-5); border-top:var(--line-block) solid var(--fg);padding-top:var(--sp-4);margin-bottom:var(--sp-5)} .ficha .n{font-family:var(--f-display);font-weight:900;font-stretch:var(--stretch-alto); font-size:52px;line-height:.9;letter-spacing:-.04em} .ficha .kanji-v{justify-self:center;font-size:34px} .ficha h4{font-size:19px;font-weight:800;text-transform:uppercase;line-height:1.05} .ficha .romaji{margin:5px 0 7px} .ficha p{font-size:15px;line-height:1.45} /* superfície · raio 8 */ .card{background:var(--bg-2);border:var(--line-block) solid var(--fg); border-radius:var(--r);padding:var(--sp-5) var(--sp-6)} .campo{background:var(--field-2);color:var(--paper);padding:var(--sp-7);border-radius:var(--r)} .btn{font-family:var(--f-display);font-weight:800;font-stretch:110%;font-size:15px; text-transform:uppercase;letter-spacing:.06em;border-radius:var(--r);padding:15px 28px; display:inline-block;text-decoration:none;cursor:pointer;border:none; background:var(--primary);color:var(--paper);transition:.15s} .btn:hover{filter:brightness(1.08)} .btn:focus-visible{outline:2px solid var(--fg);outline-offset:3px} .btn--signal{background:var(--signal)} .btn--ghost{background:transparent;color:var(--fg);border:var(--line-block) solid var(--fg)} .input{width:100%;font-family:var(--f-body);font-size:var(--t-body);color:var(--fg); background:var(--bg);border:var(--line-block) solid var(--hair);border-radius:var(--r);padding:13px 16px} .input:focus-visible{outline:none;border-color:var(--primary)} .foto{border-radius:var(--r);overflow:hidden} .foto-blob{border-radius:var(--r-blob);overflow:hidden} /* imagem como atmosfera */ .grain{position:relative;isolation:isolate} .grain::after{content:"";position:absolute;inset:0;background-image:var(--grain); background-size:160px;opacity:var(--grain-op);mix-blend-mode:multiply;pointer-events:none;z-index:0} .field-ink.grain::after,.field-indigo.grain::after,.field-green.grain::after{mix-blend-mode:screen;opacity:.07} .hanko{height:76px;width:auto;display:inline-block} .hanko--sm{height:56px} .hanko--lg{height:110px} .foto-papel{filter:grayscale(1) contrast(1.06);mix-blend-mode:multiply} .foto-campo{filter:grayscale(1) contrast(1.12);mix-blend-mode:screen}