@import 'tailwindcss';
/* Habilita la variant `dark:` basada en class="dark" del .
En Tailwind v4 necesitamos declararla explicitamente; sin esto
los modifiers dark:bg-foo no aplican. */
@custom-variant dark (&:where(.dark, .dark *));
/* color-scheme default — el browser asume dark salvo que el admin
explicite light (clase ausente). Esto es importante para inputs
nativos (date, file, color), autocomplete del browser y scrollbar
en el primer paint, ANTES de que React monte. */
:root {
color-scheme: light;
}
html.dark {
color-scheme: dark;
}
/* ============================================================
LANDING LIGHT MODE — overrides cuando NO tiene class="dark".
Invierte los tokens de la landing (carbon -> marfil, blanco -> carbon)
y atenua la lima neon para que no chille sobre fondos claros.
.dark queda para landing oscura (default historico) + admin oscuro.
============================================================ */
:root:not(.dark) {
/* Backgrounds: carbon -> marfil/blanco */
--color-bg: #fafaf7;
--color-surface: #ffffff;
--color-surface-2: #f4f4f5;
/* Borders: blanco translucido -> carbon translucido */
--color-border: rgba(10, 11, 10, 0.08);
--color-border-strong: rgba(10, 11, 10, 0.15);
/* Texto: invertido — blanco -> carbon, gris claro -> gris oscuro */
--color-text-primary: #0a0b0a;
--color-text-secondary: #52525b;
--color-text-tertiary: #71717a;
--color-text-on-light: #ffffff;
/* Acento lima ATENUADO. La lima neon #d4ff3c es demasiado vibrante
sobre claro — la bajamos a una version mas oliva, menos saturada,
que sigue siendo reconocible como SmartTrack pero no taladra los
ojos. */
--color-accent: #a8c635;
--color-accent-soft: #b8d44a;
--color-accent-dim: #84a31d;
--color-success: #16a34a;
}
/* ============================================================
ADMIN dark theme — overrides cuando .
Mismo carbon/lima que ya usa la landing, pero expuesto como
tokens shadcn (background/foreground/border/etc.) para que el
admin se pueda alternar light/dark con un toggle.
============================================================ */
.dark {
/* Hint nativo al browser: este arbol esta en dark — autocomplete
amarillo, scrollbar oscuro, inputs date/file, color picker, etc.
respetan el tema sin parchecitos por componente. */
color-scheme: dark;
/* Restaura los borders translucidos de la landing dark (sutiles
sobre fondo carbon). */
--color-border: rgba(255, 255, 255, 0.06);
--color-border-strong: rgba(255, 255, 255, 0.12);
/* Shadcn tokens — valores dark. */
--color-background: #0a0b0a;
--color-foreground: #fafafa;
--color-card: #0d0e0d;
--color-card-foreground: #fafafa;
--color-popover: #101110;
--color-popover-foreground: #fafafa;
--color-primary: #d4ff3c;
--color-primary-foreground: #0a0a0a;
--color-secondary: #1f1f23;
--color-secondary-foreground: #fafafa;
--color-muted: #18181b;
--color-muted-foreground: #a1a1aa;
--color-accent-bg: #1f1f23;
--color-accent-fg: #fafafa;
--color-destructive: #f87171;
--color-destructive-foreground: #0a0a0a;
--color-input: rgba(255, 255, 255, 0.15);
--color-ring: #d4ff3c;
--color-sidebar: #0d0e0d;
--color-sidebar-foreground: #fafafa;
--color-sidebar-border: rgba(255, 255, 255, 0.1);
}
/* ============================================================
SmartTrack — design tokens
============================================================ */
@theme {
/* ============================================================
LANDING tokens — siempre dark, usados por la landing publica.
============================================================ */
--color-bg: #0a0b0a;
--color-surface: #101110;
--color-surface-2: #161816;
/* --color-border / --color-border-strong: los DEFAULT son los valores
"light" del admin para que las clases shadcn (border-border)
funcionen en admin light. En .dark se sobreescriben con los valores
translucidos sutiles que usa la landing dark. */
--color-border: #e4e4e7;
--color-border-strong: #d4d4d8;
--color-text-primary: #ffffff;
--color-text-secondary: #9ca39b;
/* tertiary bumped from #5a615a (3.6:1 on bg) to #7a817a (4.93:1) for WCAG AA */
--color-text-tertiary: #7a817a;
--color-text-on-light: #0a0b0a;
--color-accent: #d4ff3c;
--color-accent-soft: #c5f84c;
--color-accent-dim: #8fb52a;
--color-success: #7dd86f;
/* ============================================================
ADMIN tokens (shadcn-style). Defaults aca son LIGHT — cuando el
tiene class="dark" se sobreescriben mas abajo. Usar siempre
bg-background / text-foreground / border-border etc. en el admin
en lugar de hex hardcoded.
============================================================ */
--color-background: #ffffff;
--color-foreground: #0a0a0a;
--color-card: #ffffff;
--color-card-foreground: #0a0a0a;
--color-popover: #ffffff;
--color-popover-foreground: #0a0a0a;
--color-primary: #84a319;
--color-primary-foreground: #ffffff;
--color-secondary: #f4f4f5;
--color-secondary-foreground: #18181b;
--color-muted: #f4f4f5;
--color-muted-foreground: #71717a;
--color-accent-bg: #f4f4f5;
--color-accent-fg: #18181b;
--color-destructive: #ef4444;
--color-destructive-foreground: #ffffff;
--color-input: #e4e4e7;
--color-ring: #d4ff3c;
--color-sidebar: #fafafa;
--color-sidebar-foreground: #0a0a0a;
--color-sidebar-border: #e4e4e7;
/* Typography */
--font-display: 'Geist', 'Inter Display', system-ui, sans-serif;
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* Radii */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-pill: 9999px;
/* Layout */
--container-max: 1280px;
/* Custom breakpoint for ultra-wide screens (1920+) */
--breakpoint-3xl: 1920px;
}
/* ============================================================
LANDING LIGHT — overrides agresivos para componentes con clases
literales hardcoded (text-white, bg-white/X, bg-[#0a0b0a], etc.)
que NO responden al swap de tokens. Se aplican solo cuando NO hay
.dark en .
Estos overrides son "the simple pass" — preservan funcionalidad
pero el resultado visual en algunas secciones es 70% no 100%. La
pasada completa requiere migrar cada componente a tokens
semanticos (1 semana, Fase 2 del plan).
============================================================ */
/* dot-pattern: dots blancos -> dots oscuros sobre claro */
:root:not(.dark) .dot-pattern {
filter: invert(1);
opacity: 0.35;
}
/* HexBackground y efectos lima neon: blend multiply + opacidad
reducida para que no chillen sobre claro. */
:root:not(.dark) [class*="HexBackground"],
:root:not(.dark) svg[class*="hex-pattern"] {
opacity: 0.45;
mix-blend-mode: multiply;
}
/* Atenuar box-shadows lima neon en light */
:root:not(.dark) {
--shadow-glow-attenuator: 0.4;
}
/* Texto blanco/translucido literal -> carbon en light */
:root:not(.dark) .text-white {
color: #0a0b0a;
}
:root:not(.dark) .text-white\/40,
:root:not(.dark) .text-white\/50 {
color: #71717a;
}
:root:not(.dark) .text-white\/60,
:root:not(.dark) .text-white\/70,
:root:not(.dark) .text-white\/80 {
color: #52525b;
}
/* Backgrounds white/X (cards translucidas) -> carbon translucido en light */
:root:not(.dark) .bg-white\/5,
:root:not(.dark) .bg-white\/\[0\.03\],
:root:not(.dark) .bg-white\/\[0\.05\] {
background-color: rgba(10, 11, 10, 0.04);
}
:root:not(.dark) .bg-white\/10 {
background-color: rgba(10, 11, 10, 0.08);
}
/* Borders blancos translucidos -> carbon translucido */
:root:not(.dark) [class*="border-white/"],
:root:not(.dark) .border-white\/10,
:root:not(.dark) .border-white\/15,
:root:not(.dark) .border-white\/20 {
border-color: rgba(10, 11, 10, 0.1);
}
/* Backgrounds carbon literales -> marfil en light */
:root:not(.dark) .bg-\[\#0a0b0a\] {
background-color: #fafaf7;
}
:root:not(.dark) .bg-\[\#101110\],
:root:not(.dark) .bg-\[\#0d0e0d\] {
background-color: #ffffff;
}
/* mix-blend-mode: screen rompe en light. Cambiarlo a multiply. */
:root:not(.dark) [style*="mix-blend-mode: screen"],
:root:not(.dark) [class*="mix-blend-screen"] {
mix-blend-mode: multiply !important;
}
/* ============================================================
Scrollbar — webkit + firefox. En dark queda carbon translucido
matcheando el shell de la landing; en light queda gris claro para
el admin. Sin esto, en macOS/Windows aparecia la scrollbar light
del OS encima del fondo carbon y se veia incoherente.
============================================================ */
.dark {
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.dark ::-webkit-scrollbar {
width: 12px;
height: 12px;
}
.dark ::-webkit-scrollbar-track {
background: transparent;
}
.dark ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 9999px;
border: 3px solid transparent;
background-clip: padding-box;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.18);
background-clip: padding-box;
border: 3px solid transparent;
}
/* ============================================================
Base
============================================================ */
@layer base {
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background: var(--color-bg);
color: var(--color-text-primary);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'ss01', 'cv11', 'kern';
font-optical-sizing: auto;
/* Lenis manages scroll; disable native smooth */
scroll-behavior: auto;
overflow-x: hidden;
}
/* Display headlines get tighter kerning + optical sizing for large size */
.font-display,
[class*="font-display"] {
font-feature-settings: 'ss01', 'ss02', 'kern', 'liga';
}
body {
min-height: 100dvh;
}
::selection {
background: var(--color-accent);
color: var(--color-text-on-light);
}
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: 4px;
}
}
/* ============================================================
Lenis required hooks
============================================================ */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
/* ============================================================
Signature effects (utilities)
============================================================ */
/* Grain overlay — apply as a class to a relatively positioned parent.
Use this for the default 35% / overlay-blend grain. When you need a custom
opacity or blend mode (e.g. Hero frame at 0.85), use the
component instead — it accepts props for both. */
.grain {
position: relative;
}
.grain::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url('/grain.svg');
background-size: 320px;
mix-blend-mode: overlay;
opacity: 0.35;
}
/* Glow frame — conic gradient border on a card.
Wrap your card with `.glow-frame` and keep the card transparent inside. */
.glow-frame {
position: relative;
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.glow-frame::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: conic-gradient(
from 135deg,
var(--color-accent) 0deg,
transparent 90deg,
transparent 270deg,
var(--color-accent-dim) 360deg
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.glow-frame::after {
content: '';
position: absolute;
inset: -32px;
border-radius: calc(var(--radius-lg) + 32px);
background: radial-gradient(
ellipse at center,
rgba(212, 255, 60, 0.16),
transparent 60%
);
filter: blur(24px);
z-index: -1;
pointer-events: none;
}
/* Atmospheric dot pattern — used in Web3 Features, Security, Pricing, Footer.
Matches the Keyframes design where these sections have a subtle dotted
texture behind the content. */
.dot-pattern {
position: relative;
}
.dot-pattern::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(
circle at 1px 1px,
rgba(255, 255, 255, 0.05) 1px,
transparent 0
);
background-size: 22px 22px;
opacity: 0.7;
z-index: 0;
}
/* Ensure dot-pattern children sit above the ::before layer */
.dot-pattern > * {
position: relative;
z-index: 1;
}
/* Radial lime glow utility (for hero, CTA, badges) */
.glow-lime {
background: radial-gradient(
ellipse at center,
rgba(212, 255, 60, 0.45),
transparent 70%
);
}
/* Spotlight beam (trapezoid) — used in CTA section */
.spotlight {
clip-path: polygon(30% 0, 70% 0, 90% 100%, 10% 100%);
background: linear-gradient(
180deg,
var(--color-accent-soft) 0%,
rgba(212, 255, 60, 0.4) 30%,
transparent 100%
);
filter: blur(2px);
}
/* ============================================================
Hero frame — symmetric conic-gradient border + corner glows
──
El borde ROTA continuamente alrededor del frame. Como CSS no
puede animar un gradient directamente, registramos el ángulo
inicial del cónico como un custom property tipado @property
— eso permite que el browser interpole entre 0deg y
360deg igual que con un transform: rotate. Los stops de color
se mantienen idénticos al diseño estático original; lo único
que cambia es el `from ` que va girando, así los dos
"picos brillantes" del cónico recorren todo el perímetro como
luces viajando por el borde.
============================================================ */
@property --hero-border-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.hero-frame {
--hero-border-angle: 0deg;
border-radius: 28px;
padding: 1.5px;
background: conic-gradient(
from calc(135deg + var(--hero-border-angle)) at 50% 50%,
rgba(212, 255, 60, 0.95) 0deg,
rgba(212, 255, 60, 0.3) 50deg,
rgba(212, 255, 60, 0.15) 130deg,
rgba(212, 255, 60, 0.3) 180deg,
rgba(212, 255, 60, 0.95) 200deg,
rgba(212, 255, 60, 0.3) 270deg,
rgba(212, 255, 60, 0.15) 320deg,
rgba(212, 255, 60, 0.95) 360deg
);
animation: hero-border-spin 8s linear infinite;
/* Box-shadow lime exterior removido — el frame queda definido solo por su
borde conic-gradient sin halo difuso que se proyecte hacia afuera. */
}
@keyframes hero-border-spin {
to { --hero-border-angle: 360deg; }
}
/* ============================================================
Animated lime border — versión REUSABLE (tabs, cards, etc.)
──
Mismo patrón que .hero-frame pero sin necesidad de un wrapper
interno con bg sólido. Usamos `mask-composite: exclude` para
que solo el ring del borde sea visible y el interior quede
completamente transparente — perfecto cuando se usa como
indicador absoluto sobre un button (Tabs) sin tapar su texto.
──
Cómo funciona el mask trick:
1. El gradiente cónico se pinta en TODA el área del elemento.
2. Dos masks blancos se aplican: uno cubre el content-box
(interior), otro cubre el border-box (todo).
3. `mask-composite: exclude` los resta → solo queda visible
el área del padding (el "borde").
============================================================ */
.animated-lime-border {
/* border-radius lo decide el consumer via Tailwind utility (ej.
`rounded-[var(--radius-md)]` para tabs, `rounded-[var(--radius-xl)]`
para cards). El mask sigue automáticamente el radius que tenga
el elemento, así que no se pierde el efecto al cambiarlo. */
padding: 2px;
background: conic-gradient(
from calc(135deg + var(--hero-border-angle)) at 50% 50%,
rgba(212, 255, 60, 0.95) 0deg,
rgba(212, 255, 60, 0.3) 50deg,
rgba(212, 255, 60, 0.15) 130deg,
rgba(212, 255, 60, 0.3) 180deg,
rgba(212, 255, 60, 0.95) 200deg,
rgba(212, 255, 60, 0.3) 270deg,
rgba(212, 255, 60, 0.15) 320deg,
rgba(212, 255, 60, 0.95) 360deg
);
-webkit-mask:
linear-gradient(#000, #000) content-box,
linear-gradient(#000, #000);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: hero-border-spin 8s linear infinite;
}
/* Accesibilidad: si el usuario prefiere menos animaciones, el borde
queda estático en su posición original. */
@media (prefers-reduced-motion: reduce) {
.hero-frame,
.animated-lime-border {
animation: none;
}
}
.hero-frame-inner {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
border-radius: 26.5px;
background:
radial-gradient(ellipse 60% 55% at 0% -10%, rgba(212, 255, 60, 0.6), transparent 55%),
radial-gradient(ellipse 60% 55% at 100% 110%, rgba(212, 255, 60, 0.6), transparent 55%),
radial-gradient(ellipse 25% 100% at 0% 50%, rgba(212, 255, 60, 0.12), transparent 70%),
radial-gradient(ellipse 25% 100% at 100% 50%, rgba(212, 255, 60, 0.12), transparent 70%),
radial-gradient(ellipse 100% 25% at 50% 0%, rgba(212, 255, 60, 0.08), transparent 70%),
radial-gradient(ellipse 100% 25% at 50% 100%, rgba(212, 255, 60, 0.08), transparent 70%),
radial-gradient(ellipse 40% 35% at 50% 70%, rgba(212, 255, 60, 0.06), transparent 70%),
radial-gradient(ellipse 110% 60% at 50% 100%, rgba(0, 0, 0, 0.4), transparent 70%),
var(--color-bg);
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.55);
}
/* ============================================================
Card con glow lime diagonal interno (esquinas top-left y
bottom-right) + zona oscura central. Reutilizable: Pricing Pro,
Security "Estado del Vehículo", etc.
Referencia: references/keyframes/06_pricing_peak.png
============================================================ */
.lime-diagonal-card {
position: relative;
overflow: hidden;
border-radius: var(--radius-xl);
/* Padding escalonado: cómodo en mobile, generoso en desktop. */
padding: 1.5rem;
/* Stack de gradientes: dos radiales en las esquinas (efecto "luz desde
adentro") + un gradiente vertical sutil + el surface base. */
background:
/* Lima en las esquinas top-left y bottom-right con CORTE LINEAL diagonal
en la mitad del card. Sin radial: el frente de la transición es una
línea recta perpendicular a la diagonal. */
linear-gradient(
135deg,
rgba(212, 255, 60, 0.40) 0%,
rgba(212, 255, 60, 0.32) 15%,
rgba(0, 0, 0, 1) 38%,
rgba(0, 0, 0, 1) 62%,
rgba(212, 255, 60, 0.26) 85%,
rgba(212, 255, 60, 0.34) 100%
),
linear-gradient(135deg, rgba(16, 17, 16, 0.95) 0%, rgba(16, 17, 16, 1) 50%, rgba(16, 17, 16, 0.95) 100%),
var(--color-surface);
border: 1px solid rgba(212, 255, 60, 0.35);
/* Glow INTERNO sutil en las esquinas, sin penetrar al centro. */
box-shadow:
inset 60px 60px 70px -40px rgba(212, 255, 60, 0.30),
inset -60px -60px 70px -40px rgba(212, 255, 60, 0.24);
}
@media (min-width: 640px) {
.lime-diagonal-card { padding: 2rem; }
}
@media (min-width: 1024px) {
.lime-diagonal-card { padding: 2.5rem; }
}
.pricing-pro-top-edge {
position: absolute;
inset-inline: 0;
top: 0;
height: 1px;
pointer-events: none;
background: linear-gradient(
90deg,
transparent,
rgba(212, 255, 60, 0.95),
transparent
);
}
/* Custom keyframes */
@keyframes navIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* SatelliteOrbits: rotación infinita Z para el spinner interno de cada
anillo orbital. Por el tilt 3D del wrapper padre, esta rotación Z se ve
como movimiento orbital tridimensional. */
@keyframes satellite-orbit {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
/* Reduced motion: pause infinite animations and short-circuit transitions */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* Skip-to-content link — visible only when focused via keyboard */
.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 100;
padding: 10px 16px;
border-radius: var(--radius-md);
background: var(--color-accent);
color: var(--color-text-on-light);
font-weight: 500;
font-size: 14px;
transform: translateY(-200%);
transition: transform 180ms ease-out;
}
.skip-link:focus-visible {
transform: translateY(0);
outline: 2px solid white;
outline-offset: 2px;
}