/* ============================================================
UNSTOPP AUDIO VISUAL — tokens de marca (direcao ACID)
Stack: PHP puro + CSS puro, sem build.
Instalacao: subir este arquivo na raiz do site, ao lado de
ui_mobile.css, e incluir ANTES dele em toda pagina:
Ordem importa: os tokens vem primeiro (definem as variaveis e a
base), ui_mobile.css depois (mantem o layout atual vencendo).
A cada upload no HostGator, suba o ?v= (cache agressivo).
============================================================ */
:root {
/* --- Cor ---------------------------------------------------- */
--un-black: #0A0A0A; /* fundo principal, "Filme" */
--un-ink: #111110; /* superficie elevada (card sobre o preto) */
--un-graphite: #2A2A26; /* bordas, divisores, inputs */
--un-lime: #D8FF3E; /* ACENTO UNICO — no maximo 5% da area */
--un-lime-press: #C2E82F; /* :hover / :active do botao lima */
--un-paper: #F4F2ED; /* texto forte sobre escuro / fundo claro */
--un-white: #FFFFFF; /* reservado a fotografia e detalhe fino */
/* Texto sobre fundo escuro (nunca branco puro em corpo pequeno) */
--un-text: #F4F2ED;
--un-text-muted: #B8B6AE;
--un-text-dim: #8C8C84;
--un-text-faint: #6E6E66;
/* --- Tipografia -------------------------------------------- */
--un-font-display: 'Archivo Black', system-ui, sans-serif;
--un-font-label: 'Bebas Neue', system-ui, sans-serif;
--un-font-body: 'Archivo', system-ui, sans-serif;
--un-font-mono: 'SF Mono', ui-monospace, Menlo, monospace; /* mantido do site atual */
--un-tracking-display: -0.03em;
--un-tracking-label: 0.18em;
--un-tracking-brand: 0.62em;
/* --- Espaco e forma --------------------------------------- */
--un-space-1: 4px; --un-space-2: 8px; --un-space-3: 12px;
--un-space-4: 20px; --un-space-5: 34px; --un-space-6: 56px;
--un-radius: 0px; /* a marca e reta */
--un-border: 1px solid var(--un-graphite);
--un-rule-accent: 3px solid var(--un-lime);
--un-transition: 140ms ease;
/* Textura xadrez (referencia Vans) */
--un-checker: conic-gradient(var(--un-black) 90deg, var(--un-paper) 0 180deg,
var(--un-black) 0 270deg, var(--un-paper) 0);
--un-checker-size: 16px 16px;
}
/* ---------- BASE ------------------------------------------------
Seletores propositalmente fracos (elemento puro, sem !important)
para nao brigar com ui_mobile.css nem com os style="" inline.
---------------------------------------------------------------- */
body {
background: var(--un-black);
color: var(--un-text-muted);
font-family: var(--un-font-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3 {
font-family: var(--un-font-display);
letter-spacing: var(--un-tracking-display);
line-height: 0.95;
color: var(--un-text);
text-wrap: balance;
}
h4, h5, h6 {
font-family: var(--un-font-label);
letter-spacing: var(--un-tracking-label);
text-transform: uppercase;
color: var(--un-text);
}
p { line-height: 1.55; text-wrap: pretty; }
a { color: var(--un-lime); text-decoration: none; }
a:hover { color: var(--un-paper); text-decoration: underline; }
strong { color: var(--un-text); }
hr { border: none; border-top: var(--un-border); }
::selection { background: var(--un-lime); color: var(--un-black); }
img { max-width: 100%; height: auto; }
/* ---------- COMPONENTES ---------------------------------------- */
/* Botao primario: preto sobre lima. NUNCA texto branco sobre lima. */
.un-btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 48px; padding: 14px 26px; /* alvo de toque mobile */
border: none; border-radius: var(--un-radius); cursor: pointer;
background: var(--un-lime); color: var(--un-black);
font-family: var(--un-font-label); font-size: 16px; line-height: 1;
letter-spacing: var(--un-tracking-label); text-transform: uppercase;
transition: background var(--un-transition);
}
.un-btn:hover, .un-btn:focus-visible { background: var(--un-lime-press); color: var(--un-black); text-decoration: none; }
.un-btn-ghost {
background: transparent; color: var(--un-text);
border: 1px solid var(--un-graphite);
}
.un-btn-ghost:hover { border-color: var(--un-lime); color: var(--un-lime); }
/* Rotulo / eyebrow */
.un-label {
font-family: var(--un-font-label); font-size: 13px; line-height: 1;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--un-text-faint);
}
/* Wordmark textual: "UNSTOPP" + assinatura */
.un-wordmark { font-family: var(--un-font-display); letter-spacing: var(--un-tracking-display); color: var(--un-text); }
.un-signature { font-family: var(--un-font-body); font-weight: 600; font-size: 9px; letter-spacing: var(--un-tracking-brand); color: var(--un-text); }
/* Card sobre o preto */
.un-card { background: var(--un-ink); border: var(--un-border); border-radius: var(--un-radius); padding: var(--un-space-4); }
/* Unico jeito canonico de destacar um bloco (pacote, plano, aviso) */
.un-card-featured { border-left: var(--un-rule-accent); }
/* Formulario */
.un-input, .un-textarea, .un-select {
width: 100%; padding: 13px 14px; min-height: 48px;
background: var(--un-black); color: var(--un-text);
border: var(--un-border); border-radius: var(--un-radius);
font-family: var(--un-font-body); font-size: 15px;
transition: border-color var(--un-transition);
}
.un-input::placeholder, .un-textarea::placeholder { color: var(--un-text-faint); }
.un-input:focus, .un-textarea:focus, .un-select:focus { outline: none; border-color: var(--un-lime); }
.un-error { color: var(--un-lime); font-family: var(--un-font-label); letter-spacing: 0.14em; font-size: 13px; text-transform: uppercase; }
/* Metadado tecnico (data, ID de pedido, codigo) — usa a mono que ja existe */
.un-meta { font-family: var(--un-font-mono); font-size: 11px; color: var(--un-text-faint); letter-spacing: 0.04em; }
/* Faixa de textura xadrez — em filete ou bloco pequeno, nunca fundo de pagina */
.un-checker { background-image: var(--un-checker); background-size: var(--un-checker-size); }
.un-rule { height: 3px; background: var(--un-lime); border: none; }
/* Legibilidade de texto sobre foto */
.un-photo-scrim { background: linear-gradient(transparent, rgba(10,10,10,.92)); }