/* ============================================================================ 4THub — Design System (zero-build) Fonte única de verdade visual do ecossistema (index, monitor, scale, labs, insights, sobre, termos, privacidade, aup). - Tokens via CSS custom properties: tema escuro (padrão) + claro. - Componentes nomeados + camada utilitária que espelha o subconjunto de classes Tailwind usado no markup (cores mapeadas para tokens de tema). - Animações respeitam prefers-reduced-motion. Tipografia (Inter + Instrument Serif) é carregada via no . ========================================================================== */ /* ---------- Tokens: tema escuro (padrão) ---------------------------------- */ :root, [data-theme="dark"] { --bg: #050505; --bg-alt: #070707; --bg-alt2: #090909; --surface: #0a0a0a; --surface-2: #101010; --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .16); --border-soft: rgba(255, 255, 255, .06); --text: #ffffff; /* text-white */ --text-body: #d4d4d8; /* corpo padrão */ --text-strong: #e5e7eb; /* zinc-300 / gray-300 */ --text-muted: #a1a1aa; /* zinc-400 / gray-400 */ --text-soft: #71717a; /* zinc-500 / gray-500 */ --text-faint: #52525b; /* zinc-600 / gray-600 */ --text-fainter: #3f3f46;/* zinc-700 */ --text-faintest: #27272a;/* zinc-800 */ --teal: #00ffcc; /* decorativo (dots/glow) */ --teal-ink: #00ffcc; /* texto/ícone legível */ --blue: #0066ff; --blue-ink: #3b82f6; --purple: #a855f7; --purple-ink: #a855f7; --purple-300: #d8b4fe; --teal-tint: rgba(0, 255, 204, .08); --teal-tint-2: rgba(0, 255, 204, .12); --teal-border: rgba(0, 255, 204, .18); --teal-border-strong: rgba(0, 255, 204, .55); --teal-glow: 0 0 40px rgba(0, 255, 204, .15); --teal-glow-strong: 0 0 40px rgba(0, 255, 204, .30); --blue-tint: rgba(0, 102, 255, .10); --blue-border: rgba(0, 102, 255, .20); --purple-tint: rgba(168, 85, 247, .10); --purple-border: rgba(168, 85, 247, .22); --warn: #facc15; /* yellow-400 */ --warn-300: #fde047; --warn-soft: rgba(234, 179, 8, .20); --danger: #f87171; /* red-400 */ --danger-tint: rgba(239, 68, 68, .10); --btn-primary-bg: #ffffff; --btn-primary-fg: #050505; --btn-primary-bg-hover: #ececec; --glow-a: rgba(0, 102, 255, .09); --glow-b: rgba(0, 255, 204, .06); --shadow-soft: 0 10px 30px rgba(0, 0, 0, .18); --glass-bg: rgba(10, 10, 10, .76); --transition: 180ms cubic-bezier(.16, 1, .3, 1); } /* ---------- Tokens: tema claro (AA-safe) --------------------------------- */ [data-theme="light"] { --bg: #ffffff; --bg-alt: #f6f8fb; --bg-alt2: #eef2f7; --surface: #ffffff; --surface-2: #f7f9fc; --border: rgba(15, 23, 42, .12); --border-strong: rgba(15, 23, 42, .22); --border-soft: rgba(15, 23, 42, .07); --text: #0b1220; --text-body: #283440; --text-strong: #1f2a37; --text-muted: #4b5563; --text-soft: #64707d; --text-faint: #8a95a3; --text-fainter: #a7b0bc; --text-faintest: #c4cad3; --teal: #00b894; --teal-ink: #047857; /* AA p/ texto pequeno em branco */ --blue: #0a58ca; --blue-ink: #0a58ca; --purple: #7c3aed; --purple-ink: #6d28d9; --purple-300: #7c3aed; --teal-tint: rgba(4, 120, 87, .08); --teal-tint-2: rgba(4, 120, 87, .12); --teal-border: rgba(4, 120, 87, .22); --teal-border-strong: rgba(4, 120, 87, .55); --teal-glow: 0 0 40px rgba(0, 184, 148, .14); --teal-glow-strong: 0 18px 50px rgba(4, 120, 87, .18); --blue-tint: rgba(10, 88, 202, .08); --blue-border: rgba(10, 88, 202, .20); --purple-tint: rgba(124, 58, 237, .08); --purple-border: rgba(124, 58, 237, .22); --warn: #b45309; --warn-300: #92400e; --warn-soft: rgba(180, 83, 9, .12); --danger: #dc2626; --danger-tint: rgba(220, 38, 38, .08); --btn-primary-bg: #0b1220; --btn-primary-fg: #ffffff; --btn-primary-bg-hover: #1f2a37; --glow-a: rgba(10, 88, 202, .10); --glow-b: rgba(0, 184, 148, .10); --shadow-soft: 0 10px 30px rgba(15, 23, 42, .08); --glass-bg: rgba(255, 255, 255, .82); } /* ---------- Reset / base ------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { margin: 0; background: var(--bg); color: var(--text-body); font-family: 'Inter', system-ui, sans-serif; text-rendering: optimizeLegibility; transition: background var(--transition), color var(--transition); } img { max-width: 100%; display: block; } a { color: inherit; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .no-underline { text-decoration: none; } .underline { text-decoration: underline; } .hover\:underline:hover { text-decoration: underline; } ::selection { background: color-mix(in srgb, var(--teal) 26%, transparent); color: var(--text); } .font-display { font-family: 'Instrument Serif', Georgia, serif; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; border-radius: 4px; } /* ---------- Header / nav / glass ----------------------------------------- */ .glass { background: var(--glass-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition); } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); } .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: inline-flex; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: inline-flex; } /* Mobile menu */ .nav-toggle { display: none; } .mobile-menu { display: none; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); background: var(--glass-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .mobile-menu.open { display: flex; } .mobile-menu a { padding: 14px 24px; text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 15px; transition: color var(--transition), background var(--transition); } .mobile-menu a:hover { color: var(--text); background: var(--surface-2); } @media (max-width: 767px) { .desktop-nav { display: none !important; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; } } /* ---------- Botões ------------------------------------------------------- */ .btn-primary, .btn-secondary { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; padding: 0 22px; text-decoration: none; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition); } .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border: 1px solid var(--btn-primary-bg); } .btn-primary:hover { transform: translateY(-1px); background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); } .btn-secondary { color: var(--text-strong); border: 1px solid var(--border-strong); background: transparent; } .btn-secondary:hover { transform: translateY(-1px); border-color: var(--text-muted); color: var(--text); } /* ---------- Cartões ------------------------------------------------------ */ .card, .product-card, .founder-card, .metric { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-soft); } .card, .product-card, .founder-card { transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .card:hover, .product-card:hover, .founder-card:hover { transform: translateY(-2px); border-color: var(--border-strong); } /* ---------- Tipografia de seção ------------------------------------------ */ .tag { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 999px; padding: 8px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--text-muted); } .section-kicker { color: var(--text-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .18em; font-weight: 800; margin-bottom: 16px; } .section-title { color: var(--text); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; font-weight: 900; letter-spacing: -.04em; margin: 0 0 18px; } .section-text { color: var(--text-muted); font-size: 16px; line-height: 1.75; max-width: 66ch; } .divider-line { width: 44px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--blue), transparent); margin-bottom: 20px; } /* ---------- Status "Em breve" -------------------------------------------- */ .badge-soon { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; } .badge-beta { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--teal-ink); background: var(--teal-tint); border: 1px solid var(--teal-border); border-radius: 999px; padding: 4px 12px; } .is-soon { opacity: .68; transition: opacity var(--transition); } .is-soon:hover { opacity: 1; } .btn-soon { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: .875rem; font-weight: 700; padding: .75rem 1rem; border-radius: .5rem; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); cursor: not-allowed; } /* ---------- Fundadores (swap-ready p/ foto) ------------------------------ */ .founder-avatar { width: 68px; height: 68px; border-radius: 999px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: 'Instrument Serif', Georgia, serif; font-size: 28px; color: #fff; border: 1px solid var(--border-strong); } .founder-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Gradiente de marca (palavra-chave do headline) --------------- */ .text-gradient { background: linear-gradient(90deg, var(--teal-ink), var(--blue-ink) 55%, var(--purple-ink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; background-size: 200% auto; animation: gradientShift 8s ease infinite; /* itálico serif extrapola a caixa de conteúdo; padding evita o corte do clip */ display: inline-block; line-height: 1.18; padding: .02em .12em .16em; } @keyframes gradientShift { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* ---------- Hero glows (animados) ---------------------------------------- */ .hero-glow-a, .hero-glow-b { position: absolute; border-radius: 999px; filter: blur(90px); pointer-events: none; z-index: -1; } .hero-glow-a { width: 540px; height: 540px; background: var(--glow-a); top: 40px; left: -80px; animation: floatA 16s ease-in-out infinite; } .hero-glow-b { width: 420px; height: 420px; background: var(--glow-b); right: 0; top: 120px; animation: floatB 19s ease-in-out infinite; } @keyframes floatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px, 30px); } } @keyframes floatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px, 40px); } } /* ---------- Scroll reveal ------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .reveal.is-visible { opacity: 1; transform: none; } /* ---------- FAQ ---------------------------------------------------------- */ details summary { cursor: pointer; list-style: none; } details summary::-webkit-details-marker { display: none; } details[open] summary .faq-icon { transform: rotate(45deg); } .faq-icon { transition: transform var(--transition); } /* ---------- Páginas legais (termos / privacidade / aup) ------------------ */ .legal-placeholder { background: var(--danger-tint); border: 1px dashed var(--danger); color: var(--danger); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8em; padding: .1em .4em; border-radius: .25rem; font-weight: 600; } .adjust-block { background: var(--warn-soft); border-left: 3px solid var(--warn); padding: .75rem 1rem; border-radius: .5rem; color: var(--warn-300); font-size: .85rem; margin: 1rem 0; } .legal-content h2 { color: var(--text); font-size: 1.5rem; font-weight: 800; margin-top: 2.5rem; margin-bottom: 1rem; } .legal-content h3 { color: var(--text); font-size: 1.125rem; font-weight: 700; margin-top: 1.75rem; margin-bottom: .5rem; } .legal-content p { margin: .85rem 0; line-height: 1.7; } .legal-content ul { margin: .85rem 0 .85rem 1.5rem; line-height: 1.7; } .legal-content ul li { list-style: disc; margin: .25rem 0; } .legal-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .875rem; display: block; overflow-x: auto; } @media (min-width: 768px) { .legal-content table { display: table; } } .legal-content th, .legal-content td { border: 1px solid var(--border); padding: .5rem .75rem; text-align: left; vertical-align: top; } .legal-content th { background: var(--surface); color: var(--text); font-weight: 700; } .legal-content strong { color: var(--text); } .legal-content code { background: var(--surface); color: var(--teal-ink); padding: .1em .4em; border-radius: .25rem; font-size: .85em; } .toc a { display: block; padding: .25rem 0; color: var(--text-soft); font-size: .8rem; transition: color .15s; } .toc a:hover { color: var(--text); } @media (min-width: 1024px) { .toc { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; } } /* ---------- Demo "Veja como funciona" (página 4T Monitor) --------------- */ /* "Mini-vídeo" sem vídeo: UI simulada que anima sozinha e é clicável. Progressive enhancement — sem JS (sem .demo-js) tudo já aparece estático; o JS arma o estado oculto das linhas e conduz a timeline. */ .demo { max-width: 56rem; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 1.25rem; overflow: hidden; box-shadow: var(--teal-glow); } /* chrome */ .demo-chrome { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); } .demo-dot-os { width: .65rem; height: .65rem; border-radius: 999px; background: var(--text-faintest); flex-shrink: 0; } .demo-url { display: inline-flex; align-items: center; gap: .4rem; margin-left: .5rem; padding: .25rem .7rem; border-radius: 999px; background: var(--bg-alt2); border: 1px solid var(--border-soft); color: var(--text-soft); font-size: .75rem; } .demo-url svg { width: .85rem; height: .85rem; color: var(--teal-ink); } /* abas */ .demo-tabs { display: flex; gap: .25rem; padding: .5rem .5rem 0; border-bottom: 1px solid var(--border); overflow-x: auto; } .demo-tab { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; padding: .6rem .9rem; border: 0; background: transparent; cursor: pointer; color: var(--text-soft); font-size: .82rem; font-weight: 700; font-family: inherit; border-bottom: 2px solid transparent; border-radius: .5rem .5rem 0 0; transition: color var(--transition), background var(--transition), border-color var(--transition); } .demo-tab:hover { color: var(--text); background: var(--surface-2); } .demo-tab.is-active { color: var(--teal-ink); border-bottom-color: var(--teal-ink); } .demo-tab svg { width: 1rem; height: 1rem; } /* palco / painéis */ .demo-stage { padding: 1.5rem; min-height: 340px; } .demo-panel { display: none; } .demo-panel.is-active { display: block; } .demo-label, .demo-result-label { color: var(--text-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; margin: 0 0 .75rem; } .demo-result-label { margin-top: 1.5rem; } /* campo + digitação */ .demo-field { margin-bottom: 1rem; } .demo-field-label { display: block; color: var(--text-muted); font-size: .8rem; margin-bottom: .4rem; } .demo-input, .demo-search { display: flex; align-items: center; min-height: 2.9rem; padding: .6rem .9rem; background: var(--bg-alt2); border: 1px solid var(--border); border-radius: .65rem; color: var(--text); font-size: .95rem; font-weight: 600; } .demo-search { gap: .5rem; margin-bottom: 1rem; } .demo-search svg { width: 1.05rem; height: 1.05rem; color: var(--text-soft); flex-shrink: 0; } .demo-caret { display: none; width: 2px; height: 1.1em; margin-left: 1px; background: var(--teal-ink); } .demo-js .demo-caret { display: inline-block; animation: demoBlink 1s steps(1) infinite; } @keyframes demoBlink { 50% { opacity: 0; } } /* chips de fonte */ .demo-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; } .demo-chip { padding: .25rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border); } .demo-chip.is-on { color: var(--teal-ink); background: var(--teal-tint); border-color: var(--teal-border); } /* CTA simulado */ .demo-cta { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: .6rem; border: 0; cursor: default; background: var(--teal); color: #04241d; font-weight: 800; font-size: .85rem; font-family: inherit; } .demo-cta svg { width: .95rem; height: .95rem; } [data-theme="light"] .demo-cta { color: #ffffff; } /* linhas (publicações / resultados) */ .demo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .demo-row { display: flex; gap: .65rem; align-items: flex-start; padding: .7rem .85rem; border-radius: .65rem; background: var(--surface-2); border: 1px solid var(--border-soft); } .demo-js .demo-row { opacity: 0; transform: translateY(8px); transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); } .demo-js .demo-row.is-in { opacity: 1; transform: none; } .demo-row-icon { flex-shrink: 0; width: 1.7rem; height: 1.7rem; border-radius: .45rem; display: inline-flex; align-items: center; justify-content: center; background: var(--teal-tint); color: var(--teal-ink); } .demo-row-icon svg { width: 1rem; height: 1rem; } .demo-row-body { min-width: 0; display: flex; flex-direction: column; gap: .15rem; } .demo-row-title { color: var(--text); font-size: .85rem; font-weight: 700; } .demo-row-meta { color: var(--text-soft); font-size: .72rem; line-height: 1.45; } .demo-tag-ok { margin-left: auto; flex-shrink: 0; align-self: center; font-size: .68rem; font-weight: 800; color: var(--teal-ink); background: var(--teal-tint); border: 1px solid var(--teal-border); border-radius: 999px; padding: .12rem .5rem; } mark.demo-hl { background: var(--teal-tint-2); color: var(--teal-ink); padding: 0 .15em; border-radius: .2rem; font-weight: 700; } /* chat */ .demo-doc { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem; border-radius: .65rem; background: var(--surface-2); border: 1px solid var(--border-soft); margin-bottom: 1rem; } .demo-doc svg { width: 1.1rem; height: 1.1rem; color: var(--teal-ink); flex-shrink: 0; margin-top: .1rem; } .demo-doc-title { color: var(--text); font-size: .82rem; font-weight: 700; } .demo-doc-meta { color: var(--text-soft); font-size: .72rem; } .demo-chat { display: flex; flex-direction: column; gap: .6rem; } .demo-bubble { display: block; max-width: 88%; padding: .6rem .85rem; border-radius: .9rem; font-size: .85rem; line-height: 1.5; } .demo-bubble-user { align-self: flex-end; background: var(--teal-tint); color: var(--text); border: 1px solid var(--teal-border); border-bottom-right-radius: .3rem; } .demo-bubble-ai { align-self: flex-start; background: var(--surface-2); color: var(--text-body); border: 1px solid var(--border); border-bottom-left-radius: .3rem; } .demo-ai-label { display: flex; align-items: center; gap: .35rem; color: var(--teal-ink); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .35rem; } .demo-ai-label svg { width: .8rem; height: .8rem; } .demo-ai-note { display: block; margin-top: .5rem; color: var(--text-faint); font-size: .68rem; font-style: italic; } /* indicador "digitando" */ .demo-typing { display: inline-flex; gap: .25rem; align-items: center; } .demo-typing > span { width: .4rem; height: .4rem; border-radius: 999px; background: var(--text-faint); animation: demoDots 1.2s infinite ease-in-out; } .demo-typing > span:nth-child(2) { animation-delay: .2s; } .demo-typing > span:nth-child(3) { animation-delay: .4s; } @keyframes demoDots { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } } /* rodapé / dots de progresso */ .demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; } .demo-dots { display: inline-flex; gap: .4rem; align-items: center; } .demo-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--text-faintest); transition: background var(--transition), width var(--transition); } .demo-dot.is-active { width: 1.4rem; background: var(--teal-ink); } .demo-hint { margin: 0; color: var(--text-soft); font-size: .75rem; } .demo-hide { display: none !important; } @media (max-width: 767px) { .demo-stage { padding: 1.1rem; min-height: 380px; } .demo-tab { padding: .55rem .6rem; font-size: .75rem; } .demo-bubble { max-width: 95%; } } /* ============================================================================ CAMADA UTILITÁRIA — espelha o subconjunto Tailwind usado no markup. Cores mapeadas para tokens de tema (claro/escuro automáticos). ========================================================================== */ /* Layout / display */ .relative { position: relative; } .absolute { position: absolute; } .sticky { position: sticky; } .top-0 { top: 0; } .-top-3 { top: -.75rem; } .left-1\/2 { left: 50%; } .z-50 { z-index: 50; } .-z-10 { z-index: -10; } .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .hidden { display: none; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-grow { flex-grow: 1; } .flex-shrink-0 { flex-shrink: 0; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .min-h-screen { min-height: 100vh; } .transform { transform: translateZ(0); } .-translate-x-1\/2 { transform: translateX(-50%); } .scroll-mt-20 { scroll-margin-top: 5rem; } /* Grid columns */ .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3, .lg\:grid-cols-4, .md\:grid-cols-2, .md\:grid-cols-3, .md\:grid-cols-4 { /* base = 1 col */ } .lg\:grid-cols-\[240px_1fr\], .lg\:grid-cols-\[0\.95fr_1\.05fr\], .lg\:grid-cols-\[1\.05fr_0\.95fr\] { } /* Spacing — margin */ .m-0 { margin: 0; } .mx-auto { margin-left: auto; margin-right: auto; } .my-4 { margin-top: 1rem; margin-bottom: 1rem; } .my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; } .mt-0\.5 { margin-top: .125rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-7 { margin-bottom: 1.75rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-12 { margin-bottom: 3rem; } .mb-14 { margin-bottom: 3.5rem; } /* Spacing — padding */ .p-0 { padding: 0; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-7 { padding: 1.75rem; } .p-8 { padding: 2rem; } .p-12 { padding: 3rem; } .px-2 { padding-left: .5rem; padding-right: .5rem; } .px-3 { padding-left: .75rem; padding-right: .75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } .py-1 { padding-top: .25rem; padding-bottom: .25rem; } .py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-2 { padding-top: .5rem; padding-bottom: .5rem; } .py-3 { padding-top: .75rem; padding-bottom: .75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-20 { padding-top: 5rem; padding-bottom: 5rem; } .py-24 { padding-top: 6rem; padding-bottom: 6rem; } .pt-4 { padding-top: 1rem; } .pt-6 { padding-top: 1.5rem; } .pt-12 { padding-top: 3rem; } .pt-16 { padding-top: 4rem; } .pt-24 { padding-top: 6rem; } .pb-5 { padding-bottom: 1.25rem; } .pb-8 { padding-bottom: 2rem; } .pb-16 { padding-bottom: 4rem; } .pb-20 { padding-bottom: 5rem; } .pr-4 { padding-right: 1rem; } /* space-y-* (vertical rhythm) */ .space-y-1 > * + * { margin-top: .25rem; } .space-y-1\.5 > * + * { margin-top: .375rem; } .space-y-2 > * + * { margin-top: .5rem; } .space-y-2\.5 > * + * { margin-top: .625rem; } .space-y-3 > * + * { margin-top: .75rem; } .space-y-4 > * + * { margin-top: 1rem; } /* Gap */ .gap-1 { gap: .25rem; } .gap-1\.5 { gap: .375rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-12 { gap: 3rem; } .gap-x-8 { column-gap: 2rem; } .gap-y-3 { row-gap: .75rem; } /* Sizing */ .w-2 { width: .5rem; } .w-4 { width: 1rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-8 { width: 2rem; } .w-10 { width: 2.5rem; } .w-full { width: 100%; } .h-2 { height: .5rem; } .h-4 { height: 1rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-8 { height: 2rem; } .h-10 { height: 2.5rem; } .h-\[700px\] { height: 700px; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; } .max-w-7xl { max-width: 80rem; } /* Tipografia */ .text-left { text-align: left; } .text-center { text-align: center; } .text-xs { font-size: .75rem; line-height: 1rem; } .text-sm { font-size: .875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-5xl { font-size: 3rem; line-height: 1; } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-\[clamp\(3rem\2c 7vw\2c 5\.5rem\)\] { font-size: clamp(3rem, 7vw, 5.5rem); } .text-\[clamp\(3rem\2c 7vw\2c 6\.2rem\)\] { font-size: clamp(3rem, 7vw, 6.2rem); } .font-light { font-weight: 300; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; } .font-black { font-weight: 900; } .italic { font-style: italic; } .not-italic { font-style: normal; } .uppercase { text-transform: uppercase; } .leading-relaxed { line-height: 1.625; } .leading-tight { line-height: 1.25; } .leading-\[\.98\], .leading-\[0\.98\] { line-height: .98; } .leading-\[1\.05\] { line-height: 1.05; } .tracking-tight { letter-spacing: -.025em; } .tracking-tighter { letter-spacing: -.05em; } .tracking-wider { letter-spacing: .05em; } .tracking-widest { letter-spacing: .1em; } .tracking-\[-\.05em\], .tracking-\[-0\.05em\] { letter-spacing: -.05em; } .tracking-\[\.14em\] { letter-spacing: .14em; } .list-none { list-style: none; } /* Bordas / raio */ .border { border: 1px solid var(--border); } .border-2 { border-width: 2px; border-style: solid; } .border-t { border-top: 1px solid var(--border); } .border-b { border-bottom: 1px solid var(--border); } .border-y { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .border-white\/6 { border-color: var(--border-soft); } .border-white\/10 { border-color: var(--border); } .border-gray-800 { border-color: var(--border); } .border-gray-900 { border-color: var(--border-soft); } .rounded { border-radius: .25rem; } .rounded-lg { border-radius: .5rem; } .rounded-xl { border-radius: .75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-3xl { border-radius: 1.5rem; } .rounded-full { border-radius: 9999px; } .border-\[\#00ffcc\]\/15 { border-color: var(--teal-border); } .border-\[\#00ffcc\]\/30 { border-color: var(--teal-border); } .border-\[\#00ffcc\]\/60 { border-color: var(--teal-border-strong); } .border-\[\#0066ff\]\/15 { border-color: var(--blue-border); } .border-purple-500\/15 { border-color: var(--purple-border); } .border-purple-500\/30 { border-color: var(--purple-border); } /* Cores de texto (tema-aware) */ .text-white { color: var(--text); } .text-black { color: var(--btn-primary-fg); } .text-zinc-300, .text-gray-300 { color: var(--text-strong); } .text-zinc-400, .text-gray-400 { color: var(--text-muted); } .text-zinc-500, .text-gray-500 { color: var(--text-soft); } .text-zinc-600, .text-gray-600 { color: var(--text-faint); } .text-zinc-700 { color: var(--text-fainter); } .text-zinc-800 { color: var(--text-faintest); } .text-\[\#00ffcc\] { color: var(--teal-ink); } .text-\[\#0066ff\] { color: var(--blue-ink); } .text-\[\#a855f7\], .text-purple-400 { color: var(--purple-ink); } .text-purple-300 { color: var(--purple-300); } .text-red-400 { color: var(--danger); } .text-yellow-200\/80 { color: color-mix(in srgb, var(--warn) 80%, transparent); } .text-yellow-300 { color: var(--warn-300); } .text-yellow-400, .text-yellow-500 { color: var(--warn); } /* Fundos (tema-aware) */ .bg-\[\#050505\] { background-color: var(--bg); } .bg-\[\#070707\], .bg-\[\#080808\] { background-color: var(--bg-alt); } .bg-\[\#090909\] { background-color: var(--bg-alt2); } .bg-\[\#0a0a0a\] { background-color: var(--surface); } .bg-white { background-color: var(--btn-primary-bg); } .bg-white\/5 { background-color: var(--surface-2); } .bg-gray-800 { background-color: var(--surface-2); } .bg-\[\#00ffcc\] { background-color: var(--teal); } .bg-\[\#00ffcc\]\/8 { background-color: var(--teal-tint); } .bg-\[\#00ffcc\]\/10 { background-color: var(--teal-tint-2); } .bg-\[\#0066ff\] { background-color: var(--blue); } .bg-\[\#0066ff\]\/8 { background-color: var(--blue-tint); } .bg-purple-400, .bg-purple-500 { background-color: var(--purple); } .bg-purple-500\/8 { background-color: var(--purple-tint); } .bg-yellow-500\/20 { background-color: var(--warn-soft); } /* Sombras (arbitrary) */ .shadow-\[0_0_40px_rgba\(0\2c 255\2c 204\2c 0\.15\)\] { box-shadow: var(--teal-glow); } .shadow-\[0_0_40px_rgba\(0\2c 255\2c 204\2c 0\.3\)\] { box-shadow: var(--teal-glow-strong); } /* Gradientes (mecânica Tailwind) */ .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); } .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); } [class*="from-"], [class*="via-"], [class*="to-"] { --tw-gradient-from: transparent; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-\[\#00ffcc\]\/5 { --tw-gradient-from: color-mix(in srgb, var(--teal) 5%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-\[\#00ffcc\]\/8 { --tw-gradient-from: var(--teal-tint); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-\[\#00ffcc\]\/10 { --tw-gradient-from: var(--teal-tint-2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-\[\#00ffcc\]\/15 { --tw-gradient-from: color-mix(in srgb, var(--teal) 15%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-purple-900\/20 { --tw-gradient-from: var(--purple-tint); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .via-\[\#0a0a0a\] { --tw-gradient-stops: var(--tw-gradient-from), var(--surface), var(--tw-gradient-to); } .to-\[\#0a0a0a\] { --tw-gradient-to: var(--surface); } .to-transparent { --tw-gradient-to: transparent; } /* Transições */ .transition-all { transition: all var(--transition); } .transition-colors { transition: color var(--transition), background-color var(--transition), border-color var(--transition); } .transition-transform { transition: transform var(--transition); } .transition-opacity { transition: opacity var(--transition); } /* Hover */ .hover\:text-white:hover { color: var(--text); } .hover\:text-\[\#00ffcc\]:hover { color: var(--teal-ink); } .hover\:text-\[\#0066ff\]:hover { color: var(--blue-ink); } .hover\:text-purple-400:hover { color: var(--purple-ink); } .hover\:bg-\[\#33ffdb\]:hover { background-color: color-mix(in srgb, var(--teal) 80%, #fff); } .hover\:bg-gray-200:hover { background-color: var(--btn-primary-bg-hover); } .hover\:bg-gray-700:hover { background-color: var(--surface-2); } .hover\:bg-purple-600:hover { background-color: var(--purple-ink); } .hover\:border-\[\#00ffcc\]\/40:hover { border-color: var(--teal-border-strong); } .hover\:opacity-80:hover { opacity: .8; } .hover\:gap-2:hover { gap: .5rem; } /* ---------- Responsivo: sm (>=640) -------------------------------------- */ @media (min-width: 640px) { .sm\:flex-row { flex-direction: row; } } /* ---------- Responsivo: md (>=768) -------------------------------------- */ @media (min-width: 768px) { .md\:flex { display: flex; } .md\:inline-flex { display: inline-flex; } .md\:flex-row { flex-direction: row; } .md\:col-span-2 { grid-column: span 2 / span 2; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:text-base { font-size: 1rem; line-height: 1.5rem; } .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; } .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .md\:text-5xl { font-size: 3rem; line-height: 1; } .md\:text-7xl { font-size: 4.5rem; line-height: 1; } .md\:pt-32 { padding-top: 8rem; } .md\:pb-28 { padding-bottom: 7rem; } .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; } .md\:py-32 { padding-top: 8rem; padding-bottom: 8rem; } } /* ---------- Responsivo: lg (>=1024) ------------------------------------- */ @media (min-width: 1024px) { .lg\:block { display: block; } .lg\:grid { display: grid; } .lg\:gap-12 { gap: 3rem; } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-\[240px_1fr\] { grid-template-columns: 240px 1fr; } .lg\:grid-cols-\[0\.95fr_1\.05fr\] { grid-template-columns: .95fr 1.05fr; } .lg\:grid-cols-\[1\.05fr_0\.95fr\] { grid-template-columns: 1.05fr .95fr; } } /* ---------- Movimento reduzido ------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .hero-glow-a, .hero-glow-b { animation: none; } .text-gradient { animation: none; } }