/** * We Love Corner — design tokens * Tema por defecto: claro (Figma header W---4.0). Oscuro vía data-theme="dark" en . */ /* Switzer se carga como webfont desde (Fontshare). */ :root { /* Light (default) — alinear con Figma cuando tengas medidas exactas */ --wlc-bg: #ffffff; --wlc-bg-elevated: #f5f5f5; --wlc-fg: #000000; --wlc-fg-muted: #9ca3af; --wlc-accent: #000000; --wlc-line: rgba(0, 0, 0, 0.08); /* Header sticky — #fff / #000 al 24% (con backdrop-filter) */ --wlc-header-bg-light: rgba(255, 255, 255, 0.24); --wlc-header-bg-dark: rgba(0, 0, 0, 0.24); --wlc-header-bg: var(--wlc-header-bg-light); /* Theme toggle — espacio etiqueta / On-Off (menor que un espacio tipográfico) */ --wlc-theme-toggle-label-gap: calc(var(--space-1) / 2); --wlc-status-dot: #e8ff00; --wlc-status-dot-offline: #9ca3af; --wlc-status-bullet-size: 6px; --wlc-hot: #ff4d00; --wlc-live: #16a34a; /* Figma projects 123:624 — text + superficies */ --wlc-text-secondary: #666666; --wlc-text-tertiary: #999999; --wlc-text-disabled: #cccccc; --wlc-border-default: #e5e5e5; --wlc-surface-subtle: #f7f7f7; /* Office / Figma 211:4128 */ --wlc-office-cta: #ffe800; --wlc-office-radius: 16px; --font-display: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-label-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --font-hero-display: "Switzer", ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Hero node 123:32 — py 160px, px 16px en frame; X alineado con --page-pad en implementación */ --wlc-hero-pad-y: 12rem; --wlc-hero-size: clamp(2.25rem, 6.5vw, 4rem); /* Hero reveal — alineado con motion tipo Framer (stagger + ease-out largo) */ --wlc-hero-line-duration: 0.9s; --wlc-hero-line-stagger: 0.14s; --text-xxs: 0.6875rem; /* 10px si root 16px */ --text-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem); --text-sm: clamp(0.8rem, 0.78rem + 0.25vw, 0.875rem); --text-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem); --text-lg: clamp(1.15rem, 1rem + 0.6vw, 1.35rem); --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --text-hero: clamp(2.25rem, 1.5rem + 3vw, 4.25rem); --text-label: 0.6875rem; --letter-tight: -0.03em; --letter-wide: 0.12em; /* Switzer — tracking suave (Figma vs navegador, texto corrido) */ --wlc-pp-tracking: 0.0125em; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --page-max: 120rem; --page-pad: clamp(var(--space-4), 4vw, var(--space-12)); /* Proyectos destacados — Figma 16px (= 1rem si html font-size: 100%) */ --wlc-card-featured-padding: 1rem; --wlc-card-featured-gap: 1rem; /* Work lista Figma 123:105 */ --wlc-work-row-pad-y: 0.25rem; --wlc-work-row-pad-x: 0.25rem; --wlc-work-row-gap: 2rem; --wlc-work-row-min-h: 2.5rem; /* Galería expandible Work — marco miniatura 3:4 (ancho tope; alto máx. si el viewport es bajo) */ --wlc-work-gallery-thumb-w: min(31.25rem, 75vw); --wlc-work-gallery-thumb-h: min(46rem, 78vh); /* Scroll automático: px por frame (~60fps). Menores a 1: el JS acumula (scrollLeft va en px enteros) */ --wlc-work-gallery-auto-scroll-speed: 0; /* Lightbox galería Work — laterales apenas visibles (casi negro sobre el escenario) */ --wlc-work-lightbox-z: 1000; --wlc-work-lightbox-side-opacity: 0.13; --wlc-work-lightbox-opacity-duration: 520ms; --wlc-work-lightbox-opacity-ease: cubic-bezier(0.45, 0, 0.55, 1); /* Fondo escenario lightbox (negro en tema claro = mismo valor que foreground) */ --wlc-work-lightbox-stage-bg: var(--wlc-fg); /* Lightbox: columna info (texto siempre blanco sobre escenario oscuro) */ --wlc-work-lightbox-info-text: #ffffff; /* Figma text/secondary (#666) — etiquetas SERVICES / TEAM */ --wlc-work-lightbox-info-muted: #666666; --wlc-work-lightbox-info-width: min(38vw, 26rem); /* Fila título: espacio título → contador (8px); contador → + INFO sigue en --space-4 */ --wlc-work-lightbox-info-head-gap-after-title: var(--space-2); --wlc-work-lightbox-info-head-gap-after-count: var(--space-4); --wlc-work-lightbox-info-pad: var(--space-8); --wlc-work-lightbox-info-hint-h: 1.25rem; /* 20px */ /* Atenuación del resto de la vista cuando el foco está en fila + panel abiertos */ --wlc-work-focus-dim-opacity: 0.1; /* Info — Figma 188:795 */ --wlc-info-pad-y: 6rem; /* 96px */ --wlc-info-mid-stack: 5rem; /* 80px entre fila servicios/plataformas y clientes (aprox.) */ --radius-sm: 4px; --radius-md: 8px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 160ms; --duration-mid: 280ms; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1440px; } html[data-theme="dark"] { --wlc-work-lightbox-stage-bg: #000000; --wlc-office-cta: #ffe800; --wlc-header-bg: var(--wlc-header-bg-dark); --wlc-bg: #0c0c0c; --wlc-bg-elevated: #141414; --wlc-fg: #f5f5f5; --wlc-fg-muted: #9a9a9a; --wlc-accent: #ffffff; --wlc-line: rgba(255, 255, 255, 0.1); --wlc-status-dot: #e8ff00; --wlc-status-dot-offline: #6b6b6b; --wlc-live: #3dff7a; --wlc-text-secondary: #a8a8a8; --wlc-text-tertiary: #777777; --wlc-text-disabled: #555555; --wlc-border-default: rgba(255, 255, 255, 0.12); --wlc-surface-subtle: #1f1f1f; }