/* ========================================================================== Imberdata — Design Tokens Tema padrão: IMBER (dark blue institucional) Temas alternativos: light, dark → -------------------------------------------------------------------------- Origem: sistema de tokens do funding.html, com a paleta imber promovida a :root para que o restante do site permaneça visualmente idêntico. ========================================================================== */ :root, [data-theme="imber"] { /* ---- Tipografia: escala fluida ---------------------------------------- */ --text-xs: clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.80rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1.00rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.20rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.50rem + 2.00vw, 3rem); --text-3xl: clamp(2.5rem, 1.80rem + 3.00vw, 4rem); --font-display: 'Plus Jakarta Sans', 'Boska', Georgia, sans-serif; --font-body: 'Montserrat', 'Satoshi', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --leading-tight: 1.15; --leading-base: 1.6; --leading-loose: 1.8; /* ---- Espaçamento ------------------------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* ---- Cores: superfícies ----------------------------------------------- */ --color-bg: #030816; --color-bg-deep: #01040a; /* rodapé / faixas mais escuras */ --color-bg-alt: #11142b; /* cor sólida antes da imagem carregar */ --color-surface: #0a1424; --color-surface-2: #0d1b30; --color-surface-offset: #0d1e3d; /* meio do gradiente institucional */ /* ---- Cores: bordas e divisores ---------------------------------------- */ --color-border: #1e3556; --color-divider: #15253f; --color-hairline: rgba(255, 255, 255, 0.05); /* ---- Cores: texto ------------------------------------------------------ */ --color-text: #e8f0fa; --color-text-strong: #ffffff; --color-text-muted: #8fa8c8; --color-text-subtle: #6b7280; --color-text-inverse: #ffffff; /* ---- Cores: marca ------------------------------------------------------ */ --color-primary: #2185D0; --color-primary-hover: #4DA8DA; --color-primary-highlight: #10315a; --color-primary-rgb: 33, 133, 208; /* ---- Cores: estado ----------------------------------------------------- */ --color-success: #4ade80; --color-warning: #fbbf24; --color-danger: #ef4444; --color-info: #4DA8DA; /* ---- Vidro (glassmorphism) --------------------------------------------- */ --glass-bg: rgba(255, 255, 255, 0.02); --glass-bg-2: rgba(255, 255, 255, 0.03); --glass-border: rgba(255, 255, 255, 0.04); --glass-blur: 16px; /* ---- Raios -------------------------------------------------------------- */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 2rem; --radius-full: 9999px; /* ---- Sombras ------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 40px rgba(2, 6, 19, 0.6); --shadow-glow: 0 0 20px rgba(var(--color-primary-rgb), 0.5); --shadow-glow-strong: 0 0 30px rgba(var(--color-primary-rgb), 0.8); /* ---- Fundo institucional ------------------------------------------------ Imagem única para o site inteiro. Para trocar o fundo, basta substituir assets/img/fundo.jpg — nenhuma página precisa ser editada. O gradiente CSS abaixo da imagem é o fallback enquanto ela carrega e para navegadores que bloqueiam imagens. */ --color-bg-mesh-1: #6C7DD9; /* roxo claro, canto superior esquerdo */ --color-bg-mesh-2: #3B3F8C; /* roxo médio */ --color-bg-mesh-3: #252C59; /* navy escuro, base */ --color-bg-mesh-4: #377D8C; /* teal */ --color-bg-mesh-5: #4EA696; /* verde, canto inferior direito */ --gradient-body-fallback: radial-gradient(ellipse 70% 65% at 6% 0%, var(--color-bg-mesh-1) 0%, rgba(108,125,217,0) 100%), radial-gradient(ellipse 55% 50% at 96% 88%, var(--color-bg-mesh-5) 0%, rgba(78,166,150,0) 100%), radial-gradient(ellipse 45% 45% at 82% 62%, var(--color-bg-mesh-4) 0%, rgba(55,125,140,0) 100%), radial-gradient(ellipse 60% 60% at 30% 15%, var(--color-bg-mesh-2) 0%, rgba(59,63,140,0) 100%), var(--color-bg-mesh-3); /* Escurecimento do fundo. 0 = imagem original, 1 = preto. Único lugar para ajustar o quão escuro o site fica. */ --bg-escurecer: 0.52; --gradient-body: linear-gradient(rgba(0, 0, 0, var(--bg-escurecer)), rgba(0, 0, 0, var(--bg-escurecer))), url("../img/fundo.jpg") center / cover no-repeat, var(--gradient-body-fallback); /* ---- Layout -------------------------------------------------------------- */ --container-sm: 720px; --container-md: 1100px; --container-lg: 1280px; /* ---- Movimento ----------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 500ms; /* ---- Camadas -------------------------------------------------------------- */ --z-header: 50; --z-overlay: 80; --z-fab: 90; --z-modal: 100; } /* ========================================================================== Tema CLARO — usado hoje pelo funding.html ========================================================================== */ [data-theme="light"] { --color-bg: #f7f6f2; --color-bg-deep: #edeae5; --color-bg-alt: #f7f6f2; --color-surface: #f9f8f5; --color-surface-2: #fbfbf9; --color-surface-offset: #edeae5; --color-border: #d4d1ca; --color-divider: #dcd9d5; --color-hairline: rgba(0, 0, 0, 0.06); --color-text: #28251d; --color-text-strong: #16140f; --color-text-muted: #7a7974; --color-text-subtle: #9b9a95; --color-text-inverse: #f9f8f4; --color-primary: #01696f; --color-primary-hover: #0c4e54; --color-primary-highlight: #cedcd8; --color-primary-rgb: 1, 105, 111; --color-success: #437a22; --color-warning: #964219; --glass-bg: rgba(255, 255, 255, 0.6); --glass-bg-2: rgba(255, 255, 255, 0.75); --glass-border: rgba(0, 0, 0, 0.06); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10); --font-display: 'Boska', Georgia, serif; --font-body: 'Satoshi', Arial, sans-serif; --gradient-body: linear-gradient(180deg, var(--color-bg), var(--color-surface-offset)); } /* ========================================================================== Tema ESCURO NEUTRO — alternativa quente ao imber ========================================================================== */ [data-theme="dark"] { --color-bg: #171614; --color-bg-deep: #100f0e; --color-bg-alt: #171614; --color-surface: #1c1b19; --color-surface-2: #201f1d; --color-surface-offset: #22211f; --color-border: #393836; --color-divider: #262523; --color-hairline: rgba(255, 255, 255, 0.06); --color-text: #cdccca; --color-text-strong: #f2f1ef; --color-text-muted: #979590; --color-text-subtle: #6f6d69; --color-text-inverse: #171614; --color-primary: #4f98a3; --color-primary-hover: #227f8b; --color-primary-highlight: #313b3b; --color-primary-rgb: 79, 152, 163; --color-success: #6daa45; --color-warning: #bb653b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); --font-display: 'Boska', Georgia, serif; --font-body: 'Satoshi', Arial, sans-serif; --gradient-body: linear-gradient(180deg, var(--color-bg), var(--color-surface-offset)); }