/* =================================================================
Stölben UI — Design System
Tema "Infra Premium": blocos escuros arredondados + acento azul,
tipografia Manrope/Inter, cards bento, glow e linhas de grade.
Framework-agnóstico (CSS puro). Prefixo de classes: .ds-
Importe em qualquer app web:
Fontes (no ):
================================================================= */
:root {
/* ---- Cores: superfícies ---- */
--ds-bg: #eef0f4; /* fundo da página */
--ds-panel: #f7f8fa; /* painel/shell */
--ds-surface: #ffffff; /* cards claros */
--ds-ink: #0f1115; /* blocos escuros (hero, painéis fortes) */
--ds-ink-soft: #20242d; /* dark suave p/ áreas interativas (dropzone, console) */
--ds-ink-deep: #050505; /* preto profundo */
/* ---- Cores: acento azul ---- */
--ds-blue: #2563eb;
--ds-blue-light: #3b82f6;
--ds-blue-dark: #1d4ed8;
--ds-blue-50: #eff4ff;
--ds-blue-100: #dbe6ff;
/* ---- Cores: estados ---- */
--ds-warn: #fbbf24; /* "em desenvolvimento" / atenção */
--ds-warn-soft: rgba(251, 191, 36, 0.1);
--ds-warn-strong: #8a5a0b; /* texto âmbar com contraste em fundo claro */
--ds-success: #2f8f57;
--ds-success-soft: #e8f4ec;
--ds-success-border: #c2e2cf;
--ds-danger: #c83d3d;
--ds-danger-soft: #fbeaea;
--ds-danger-border: #f1caca;
/* ---- Texto ---- */
--ds-text-900: #111827;
--ds-text-700: #374151;
--ds-text-500: #6b7280;
--ds-text-400: #9ca3af;
/* ---- Texto sobre fundo escuro ---- */
--ds-on-dark: #ffffff;
--ds-on-dark-soft: #9aa3b2;
--ds-on-dark-mute: #cbd2dc;
/* ---- Linhas e bordas ---- */
--ds-line: #e7e9ee;
--ds-line-dash: #cfd3da;
--ds-border-dark: rgba(255, 255, 255, 0.1);
/* ---- Tipografia ---- */
--ds-font-sans: "Inter", system-ui, -apple-system, sans-serif;
--ds-font-display: "Manrope", "Inter", sans-serif;
/* escala fluida para títulos */
--ds-fs-hero: clamp(2.6rem, 6vw, 4.5rem);
--ds-fs-h2: clamp(2rem, 4vw, 3rem);
--ds-fs-h3: 1.25rem;
--ds-tracking-tight: -0.035em;
--ds-tracking-tighter: -0.04em;
/* ---- Raios ---- */
--ds-radius-xl: 2.5rem; /* seções/hero */
--ds-radius-lg: 1.5rem; /* cards */
--ds-radius-md: 1rem; /* inputs/botões internos */
--ds-radius-pill: 999px;
/* ---- Espaçamento base (escala de 4px) ---- */
--ds-space-1: 0.25rem;
--ds-space-2: 0.5rem;
--ds-space-3: 0.75rem;
--ds-space-4: 1rem;
--ds-space-6: 1.5rem;
--ds-space-8: 2rem;
--ds-space-12: 3rem;
--ds-space-16: 4rem;
/* ---- Sombras ---- */
--ds-shadow-card: 0 20px 40px rgba(0, 0, 0, 0.05);
--ds-shadow-block: 0 30px 60px rgba(15, 17, 21, 0.18);
--ds-shadow-glow-blue: 0 0 22px rgba(37, 99, 235, 0.3);
/* elevação sutil para superfícies/cards de uso diário (mais leve que a card) */
--ds-shadow-soft: 0 1px 2px rgba(15, 17, 21, 0.04), 0 10px 24px rgba(15, 17, 21, 0.05);
/* ---- Foco (anel unificado em todo o sistema) ---- */
--ds-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.32);
/* ---- Efeitos ---- */
--ds-blur: blur(14px);
--ds-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ds-noise: 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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* =================================================================
BASE
================================================================= */
.ds-root { font-family: var(--ds-font-sans); color: var(--ds-text-900); background: var(--ds-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.ds-display { font-family: var(--ds-font-display); font-weight: 500; letter-spacing: var(--ds-tracking-tighter); }
.ds-h1 { font-family: var(--ds-font-display); font-weight: 500; font-size: var(--ds-fs-hero); line-height: 1.05; letter-spacing: var(--ds-tracking-tighter); }
.ds-h2 { font-family: var(--ds-font-display); font-weight: 500; font-size: var(--ds-fs-h2); line-height: 1.05; letter-spacing: var(--ds-tracking-tight); }
.ds-muted { color: var(--ds-text-400); } /* segunda linha de título em cinza */
.ds-eyebrow { font-size: 0.85rem; color: var(--ds-text-500); }
.ds-kicker { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ds-text-400); }
/* =================================================================
LAYOUT — shell com linhas de grade tracejadas
================================================================= */
.ds-shell {
position: relative; max-width: 80rem; margin: 0 auto; min-height: 100vh;
background: var(--ds-panel);
border-left: 1px dashed var(--ds-line-dash);
border-right: 1px dashed var(--ds-line-dash);
overflow: hidden;
}
.ds-lines { position: absolute; inset: 0; display: flex; justify-content: space-between; padding: 0 1rem; opacity: 0.2; pointer-events: none; z-index: 0; }
.ds-lines > span { width: 1px; background: #cbd0d8; }
.ds-stack { position: relative; z-index: 2; padding: var(--ds-space-6); display: flex; flex-direction: column; gap: var(--ds-space-6); }
/* =================================================================
SUPERFÍCIES
================================================================= */
.ds-panel-dark { position: relative; border-radius: var(--ds-radius-xl); overflow: hidden; background: var(--ds-ink); color: var(--ds-on-dark); box-shadow: var(--ds-shadow-block); }
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: var(--ds-space-8); transition: box-shadow 400ms ease; }
.ds-card:hover { box-shadow: var(--ds-shadow-card); }
.ds-card-dark { background: var(--ds-ink); color: var(--ds-on-dark); border-radius: var(--ds-radius-lg); padding: var(--ds-space-8); }
/* Utilitários de atmosfera (coloque dentro de um bloco position:relative) */
.ds-glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; background: rgba(37, 99, 235, 0.18); width: 30rem; height: 30rem; }
.ds-noise { position: absolute; inset: 0; background-image: var(--ds-noise); opacity: 0.15; mix-blend-mode: soft-light; pointer-events: none; }
/* Imagem de fundo para painel escuro. Prefira FOTO REAL (não render/IA),
sempre escurecida por um gradiente para manter o texto legível.
Estrutura:
*/
.ds-media { position: absolute; inset: 0; z-index: 0; background: var(--ds-ink); }
.ds-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.ds-media-grad { position: absolute; inset: 0; background: linear-gradient(to top, var(--ds-ink) 8%, rgba(15, 17, 21, 0.55) 46%, rgba(15, 17, 21, 0.82)); }
/* variante p/ texto à esquerda (ex.: seção de contato) */
.ds-media-grad--left { background: linear-gradient(to right, var(--ds-ink) 22%, rgba(15, 17, 21, 0.72) 58%, rgba(15, 17, 21, 0.5)); }
/* =================================================================
NAV — pílula flutuante (use sobre fundo escuro; .is-scrolled p/ fundo claro)
================================================================= */
.ds-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding: 1.25rem 1rem; pointer-events: none; }
.ds-nav-pill {
pointer-events: auto; display: flex; align-items: center; gap: 1.5rem;
background: rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: var(--ds-blur); backdrop-filter: var(--ds-blur);
border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--ds-radius-pill);
padding: 0.5rem 0.6rem 0.5rem 1.25rem; font-size: 0.9rem;
transition: background 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
.ds-nav.is-scrolled .ds-nav-pill { background: rgba(15, 17, 21, 0.82); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28); }
.ds-nav-brand { color: #fff; font-family: var(--ds-font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 0.95rem; }
.ds-nav-links { display: flex; align-items: center; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.ds-nav-links a { color: var(--ds-on-dark-mute); transition: color 160ms ease; }
.ds-nav-links a:hover, .ds-nav-links a[aria-current], .ds-nav-links a.is-active { color: #fff; }
/* =================================================================
BOTÕES
================================================================= */
.ds-btn { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 500; font-size: 1rem; border: 0; border-radius: var(--ds-radius-pill); cursor: pointer; transition: background 180ms ease, transform 180ms ease, filter 180ms ease; text-decoration: none; }
.ds-btn svg { width: 1.05rem; height: 1.05rem; }
/* branco sobre escuro, com ícone circular */
.ds-btn--primary { background: #fff; color: #000; padding: 0.5rem 0.5rem 0.5rem 1.25rem; }
.ds-btn--primary:hover { background: var(--ds-blue-50); }
.ds-btn--primary .ds-btn-ico { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--ds-radius-pill); background: #000; color: #fff; transition: transform 200ms ease; }
.ds-btn--primary:hover .ds-btn-ico { transform: scale(1.08); }
/* fantasma sobre escuro */
.ds-btn--ghost { background: rgba(255, 255, 255, 0.06); color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.75rem 1.5rem; }
.ds-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
/* sólido azul (CTA principal / submit) */
.ds-btn--solid { background: var(--ds-blue); color: #fff; padding: 0.85rem 1.25rem; border-radius: var(--ds-radius-md); font-size: 0.95rem; justify-content: center; box-shadow: var(--ds-shadow-glow-blue); }
.ds-btn--solid:hover { background: var(--ds-blue-dark); }
.ds-nav-cta { background: #fff; color: #000; padding: 0.45rem 1.1rem; border-radius: var(--ds-radius-pill); font-weight: 500; text-decoration: none; transition: background 160ms ease; }
.ds-nav-cta:hover { background: var(--ds-blue-50); }
/* =================================================================
BADGES, TAGS, CHIPS
================================================================= */
.ds-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; padding: 0.25rem 0.65rem; border-radius: var(--ds-radius-pill); }
.ds-badge .ds-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; }
.ds-badge--info { color: var(--ds-blue-dark); background: var(--ds-blue-50); border: 1px solid var(--ds-blue-100); }
.ds-badge--info-dark { color: #93c5fd; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.3); }
.ds-badge--info-dark .ds-dot { background: var(--ds-blue-light); }
.ds-badge--warn { color: #fcd34d; background: var(--ds-warn-soft); border: 1px solid rgba(251, 191, 36, 0.3); }
.ds-badge--warn .ds-dot { background: var(--ds-warn); }
.ds-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.ds-tags li { font-size: 0.72rem; padding: 0.25rem 0.7rem; border-radius: var(--ds-radius-pill); color: var(--ds-text-700); background: #f3f4f6; border: 1px solid var(--ds-line); }
.ds-tags--on-dark li { color: #d1d5db; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
.ds-chip { font-size: 0.9rem; color: var(--ds-text-700); background: #f3f4f6; border: 1px solid var(--ds-line); padding: 0.4rem 0.85rem; border-radius: 0.6rem; }
/* =================================================================
ÍCONE EM CAIXA (feature/pilar)
================================================================= */
.ds-icon-box { width: 3rem; height: 3rem; border-radius: var(--ds-radius-md); background: var(--ds-blue-50); border: 1px solid var(--ds-blue-100); display: flex; align-items: center; justify-content: center; color: var(--ds-blue); transition: transform 300ms ease; }
.ds-icon-box svg { width: 1.5rem; height: 1.5rem; }
.ds-icon-box--round { border-radius: var(--ds-radius-pill); width: 2.25rem; height: 2.25rem; }
.ds-icon-box--round svg { width: 1.1rem; height: 1.1rem; }
/* =================================================================
FORMULÁRIO (sobre fundo escuro)
================================================================= */
.ds-form { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--ds-radius-lg); padding: var(--ds-space-8); display: flex; flex-direction: column; gap: 1.25rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ds-field { display: block; font-size: 0.9rem; color: var(--ds-text-400); }
.ds-field > span { display: block; margin-bottom: 0.5rem; }
.ds-input, .ds-textarea { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--ds-radius-md); padding: 0.8rem 1rem; color: #fff; font-family: inherit; font-size: 0.95rem; transition: border-color 160ms ease; }
.ds-input::placeholder, .ds-textarea::placeholder { color: #6b7280; }
.ds-input:focus, .ds-textarea:focus { outline: none; border-color: rgba(59, 130, 246, 0.5); }
.ds-textarea { resize: vertical; min-height: 7rem; }
/* =================================================================
REVELAR AO ROLAR (adicione .ds-reveal; um observer alterna .is-visible)
================================================================= */
.ds-reveal { opacity: 0; transform: translateY(26px); transition: opacity 720ms var(--ds-ease), transform 720ms var(--ds-ease); will-change: opacity, transform; }
.ds-reveal.is-visible { opacity: 1; transform: none; }
/* =================================================================
CONSOLE ESCURO — painel para formulários/opções DENTRO de um
cartão claro. Cria o contraste claro↔escuro do tema sem empilhar
dois blocos escuros. Inputs reutilizam .ds-input/.ds-textarea.
================================================================= */
.ds-console { background: var(--ds-ink-soft); color: var(--ds-on-dark); border: 1px solid var(--ds-border-dark); border-radius: var(--ds-radius-md); padding: var(--ds-space-6); }
.ds-console .ds-label { display: flex; align-items: center; gap: 0.5rem; color: var(--ds-on-dark); font-weight: 600; font-size: 0.95rem; }
.ds-console .ds-label svg { width: 1.1rem; height: 1.1rem; color: var(--ds-blue-light); }
/* =================================================================
DROP ZONE — área de upload (arrastar/soltar), escura e tracejada.
Marque .is-drag durante o arraste.
================================================================= */
.ds-dropzone {
position: relative; display: block; width: 100%; text-align: center; cursor: pointer;
border: 1.5px dashed rgba(255, 255, 255, 0.18); border-radius: var(--ds-radius-md);
padding: var(--ds-space-12) var(--ds-space-8); color: var(--ds-on-dark);
background: radial-gradient(120% 90% at 50% -10%, rgba(37, 99, 235, 0.16), transparent 62%), var(--ds-ink-soft);
transition: border-color 200ms var(--ds-ease), background 200ms var(--ds-ease), box-shadow 200ms var(--ds-ease);
}
.ds-dropzone:hover, .ds-dropzone:focus-visible, .ds-dropzone.is-drag {
border-color: var(--ds-blue-light);
background: radial-gradient(120% 90% at 50% -10%, rgba(37, 99, 235, 0.26), transparent 62%), var(--ds-ink-soft);
}
.ds-dropzone.is-drag { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); }
.ds-dropzone-hint { color: var(--ds-on-dark-soft); font-size: 0.85rem; }
/* =================================================================
CHOICE — cartões selecionáveis (radio/checkbox estilizados),
variante escura. Marque .is-selected no item ativo.
================================================================= */
.ds-choice-grid { display: grid; gap: 0.65rem; }
.ds-choice {
position: relative; display: block; cursor: pointer; color: var(--ds-on-dark);
padding: var(--ds-space-4); padding-right: 2.25rem;
background: rgba(255, 255, 255, 0.04); border: 1.5px solid rgba(255, 255, 255, 0.1); border-radius: var(--ds-radius-md);
transition: border-color 200ms var(--ds-ease), background 200ms var(--ds-ease), box-shadow 200ms var(--ds-ease);
}
.ds-choice:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.2); }
.ds-choice.is-selected { background: rgba(59, 130, 246, 0.14); border-color: var(--ds-blue-light); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }
.ds-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ds-choice::after {
content: ""; position: absolute; top: var(--ds-space-4); right: var(--ds-space-4);
width: 1.1rem; height: 1.1rem; border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06);
transition: border-color 120ms ease, background 120ms ease;
}
.ds-choice.is-selected::after {
border-color: var(--ds-blue-light);
background: var(--ds-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}
.ds-choice-title { display: block; font-weight: 600; font-size: 0.9rem; }
.ds-choice-desc { display: block; color: var(--ds-on-dark-soft); font-size: 0.78rem; line-height: 1.35; }
/* =================================================================
SWITCH — alternador on/off.
================================================================= */
.ds-switch { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; color: var(--ds-on-dark); }
.ds-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ds-switch-track { position: relative; flex-shrink: 0; width: 44px; height: 24px; border-radius: var(--ds-radius-pill); background: rgba(255, 255, 255, 0.22); transition: background 200ms var(--ds-ease); }
.ds-switch-track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 200ms var(--ds-ease); }
.ds-switch input:checked + .ds-switch-track { background: var(--ds-blue); }
.ds-switch input:checked + .ds-switch-track::before { transform: translateX(20px); }
.ds-switch input:focus-visible + .ds-switch-track { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); }
/* =================================================================
PROGRESS — barra de progresso com brilho deslizante.
================================================================= */
.ds-progress { width: 100%; height: 10px; border-radius: var(--ds-radius-pill); background: rgba(255, 255, 255, 0.1); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); }
.ds-progress--on-light { background: #e8edf3; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06); }
.ds-progress-fill { position: relative; height: 100%; width: 0; border-radius: var(--ds-radius-pill); background: linear-gradient(90deg, var(--ds-blue-dark), var(--ds-blue-light)); box-shadow: 0 0 14px rgba(37, 99, 235, 0.45); transition: width 0.4s ease; overflow: hidden; }
.ds-progress-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: translateX(-100%); animation: ds-progress-shimmer 1.4s var(--ds-ease) infinite; }
@keyframes ds-progress-shimmer { to { transform: translateX(100%); } }
/* =================================================================
STAT STRIP — linha de métricas/destaques (ex.: sob um hero).
Use .ds-stat-strip--on-dark sobre fundo escuro.
================================================================= */
.ds-stat-strip { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ds-space-8); margin: 0; padding: 0; }
.ds-stat-strip li { display: flex; flex-direction: column; gap: 0.1rem; }
.ds-stat-strip strong { font-family: var(--ds-font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: var(--ds-tracking-tight); }
.ds-stat-strip span { font-size: 0.8rem; color: var(--ds-text-500); }
.ds-stat-strip--on-dark strong { color: var(--ds-on-dark); }
.ds-stat-strip--on-dark span { color: var(--ds-on-dark-soft); }
/* =================================================================
FOOTER — claro e enxuto, com borda superior (NÃO use bloco escuro:
o rodapé fecha a página de forma leve, como no site).
================================================================= */
.ds-footer { padding: var(--ds-space-8) var(--ds-space-2); border-top: 1px solid var(--ds-line); }
.ds-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-4); }
.ds-footer-brand { font-family: var(--ds-font-display); font-weight: 600; font-size: 1.1rem; color: var(--ds-text-900); letter-spacing: -0.02em; }
.ds-footer-copy { color: var(--ds-text-400); font-size: 0.85rem; margin-top: 0.15rem; }
.ds-footer a { color: var(--ds-blue-dark); text-decoration: none; }
.ds-footer a:hover { text-decoration: underline; }
/* =================================================================
ACESSIBILIDADE
================================================================= */
.ds-root :focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ds-blue-light); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.ds-reveal { opacity: 1; transform: none; transition: none; }
.ds-progress-fill::after { animation: none; }
* { scroll-behavior: auto; }
}