/* ================================================================
PAUER DESIGN SYSTEM — v2.0 — Single hosted CSS for ALL outputs
================================================================
CDN: https://pauer-dashboard.pages.dev/pauer-design-system.css
Usage:
Colors: ONLY #FF5A00 / #080808 / #FFFFFF (and rgba variants)
Fonts: Bebas Neue (display/titles), Barlow Condensed (headings/labels), Barlow (body)
Sections:
1. Design Tokens (CSS variables)
2. Reset + Base
3. Typography
4. Background System
5. Glassmorphism Cards
6. Navigation
7. Buttons
8. Components (badges, chips, dividers, tags, spinner)
9. Web Page Layout (sections, grids, stat cards)
10. Slide System (1080×1350 carousel slides)
11. Story System (1080×1920 stories)
12. Cursor Glow element
13. Utilities
14. Responsive breakpoints
15. Print
16. Logo Entrance Animation
17. Dashboard Navigation (top bar with tabs)
18. Sidebar Navigation (portal, Sistema de Marca)
19. Filter Chips
20. Tables
21. Toast Notifications
22. Modal
23. Empty State
24. Form Inputs
25. View Animation
This file is THE LAW. If an HTML output doesn't use it, it's wrong.
================================================================ */
/* ═══════════════════════════════════════════
1. DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
/* Brand Colors */
--orange: #FF5A00;
--black: #080808;
--white: #FFFFFF;
/* Orange tints */
--orange-dim: rgba(255, 90, 0, 0.12);
--orange-glow: rgba(255, 90, 0, 0.08);
--orange-soft: rgba(255, 90, 0, 0.06);
--orange-medium: rgba(255, 90, 0, 0.18);
--orange-strong: rgba(255, 90, 0, 0.30);
--orange-intense: rgba(255, 90, 0, 0.50);
/* Glassmorphism */
--card-bg: rgba(255, 255, 255, 0.03);
--card-bg-hover: rgba(255, 255, 255, 0.055);
--border: rgba(255, 255, 255, 0.07);
--border-hover: rgba(255, 255, 255, 0.14);
--glass-blur: 20px;
/* Text */
--text-primary: rgba(255, 255, 255, 1.0);
--text-secondary: rgba(255, 255, 255, 0.70);
--text-dim: rgba(255, 255, 255, 0.45);
--text-dim2: rgba(255, 255, 255, 0.22);
--text-dim3: rgba(255, 255, 255, 0.10);
/* Fonts */
--font-display: 'Bebas Neue', sans-serif;
--font-heading: 'Barlow Condensed', sans-serif;
--font-body: 'Barlow', -apple-system, sans-serif;
/* Spacing (8px base) */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
/* Border Radius */
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 9999px;
/* Navigation */
--nav-h: 60px;
/* Shadows */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20);
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.30);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.40);
--shadow-glow: 0 0 40px var(--orange-strong);
/* Transitions */
--transition: 0.2s ease;
--transition-slow: 0.4s ease;
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
}
/* ═══════════════════════════════════════════
2. RESET + BASE
═══════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
word-wrap: break-word;
overflow-wrap: break-word;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
background: var(--black);
color: var(--text-primary);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* Web page body — overrides overflow:hidden for multi-page documents */
body.pauer-web,
body.pauer-page {
overflow: auto;
width: auto;
height: auto;
min-height: 100vh;
line-height: 1.6;
}
a { color: var(--orange); text-decoration: none; }
a:hover { opacity: 0.85; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.15;
word-wrap: break-word;
}
/* ═══════════════════════════════════════════
3. TYPOGRAPHY
═══════════════════════════════════════════ */
/* Doble Color 2.0 — orange accent on headings */
/* Rule: 1 accent group per heading, 1-3 words, position flexible */
/* Skim test: orange words alone should tell coherent story across the page */
em, .accent {
color: var(--orange);
font-style: normal;
font-weight: 600;
}
/* Display — Bebas Neue, big impact */
.pauer-display,
.display {
font-family: var(--font-display);
line-height: 0.9;
letter-spacing: 1px;
color: var(--text-primary);
}
/* Heading — Barlow Condensed */
.pauer-heading,
.heading {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.15;
color: var(--text-primary);
}
/* Body text */
.pauer-body,
.body-text {
font-family: var(--font-body);
font-size: clamp(1rem, 1.8vw, 1.1rem);
line-height: 1.7;
color: var(--text-secondary);
max-width: 65ch;
}
/* Label — Barlow Condensed uppercase */
.pauer-label,
.label {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-dim);
}
/* Section tag (orange bar + uppercase label) */
.section-tag {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
}
.section-tag .tag-bar {
width: 40px;
height: 4px;
background: var(--orange);
border-radius: 2px;
flex-shrink: 0;
}
.section-tag .tag-label {
font-family: var(--font-heading);
font-weight: 600;
color: var(--orange);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 3px;
}
/* Web heading sizes — fluid scaling */
.web-h1 {
font-family: var(--font-heading);
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 700;
line-height: 1.1;
margin-bottom: var(--space-md);
}
.web-h2 {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 3.5vw, 2.2rem);
font-weight: 700;
line-height: 1.15;
margin-bottom: var(--space-sm);
}
.web-h3 {
font-family: var(--font-heading);
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
font-weight: 600;
margin-bottom: var(--space-sm);
}
.web-body {
font-family: var(--font-body);
font-size: clamp(1rem, 1.8vw, 1.1rem);
line-height: 1.7;
color: var(--text-secondary);
max-width: 65ch;
}
/* Color utilities */
.pauer-orange,
.text-orange { color: var(--orange); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-dim { color: var(--text-dim); }
.text-dim2 { color: var(--text-dim2); }
/* Slide typography (fixed px for Playwright rendering) */
.display-xl {
font-family: var(--font-display);
font-size: 200px;
line-height: 0.85;
letter-spacing: 2px;
color: var(--orange);
text-shadow: 0 0 80px var(--orange-intense);
}
.display-lg {
font-family: var(--font-display);
font-size: 120px;
line-height: 0.9;
letter-spacing: 2px;
}
.title-xl {
font-family: var(--font-display);
font-size: 96px;
line-height: 1.02;
letter-spacing: 1px;
max-width: 920px;
hyphens: auto;
}
.title-lg {
font-family: var(--font-display);
font-size: 80px;
line-height: 1.05;
letter-spacing: 1px;
max-width: 920px;
hyphens: auto;
}
.title-md {
font-family: var(--font-display);
font-size: 68px;
line-height: 1.08;
letter-spacing: 1px;
max-width: 920px;
hyphens: auto;
}
.title-sm {
font-family: var(--font-display);
font-size: 56px;
line-height: 1.1;
letter-spacing: 1px;
max-width: 920px;
hyphens: auto;
}
.slide-label {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 600;
letter-spacing: 6px;
text-transform: uppercase;
color: var(--text-dim);
}
.slide-body {
font-family: var(--font-body);
font-size: 28px;
line-height: 1.5;
color: var(--text-secondary);
max-width: 800px;
}
.slide-body--small {
font-size: 22px;
color: var(--text-dim);
}
/* ═══════════════════════════════════════════
4. BACKGROUND SYSTEM
═══════════════════════════════════════════ */
/* Standard dark page background with radial orange glow */
.pauer-bg {
background: var(--black);
position: relative;
}
.pauer-bg::before {
content: '';
position: fixed;
top: -40%; left: -20%;
width: 80%; height: 80%;
background: radial-gradient(ellipse, rgba(255, 90, 0, 0.05) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.pauer-bg::after {
content: '';
position: fixed;
bottom: -30%; right: -20%;
width: 60%; height: 60%;
background: radial-gradient(ellipse, rgba(255, 90, 0, 0.03) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* Orange variant (cover slides, CTAs) */
.pauer-bg-orange {
background: radial-gradient(ellipse at 50% 10%, #FF7A00 0%, #FF5A00 35%, #CC3D00 100%);
position: relative;
overflow: hidden;
}
/* Subtle grid overlay */
.pauer-bg-grid,
.bg-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 1;
}
/* On orange backgrounds, grid lines are dark */
.pauer-bg-orange .pauer-bg-grid,
.pauer-bg-orange .bg-grid {
background-image:
linear-gradient(rgba(0, 0, 0, 0.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.10) 1px, transparent 1px);
}
/* Vignette overlay */
.pauer-bg-vignette,
.bg-vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
pointer-events: none;
z-index: 2;
}
/* Subtle scanlines */
.pauer-bg-scanlines,
.bg-scanlines {
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255, 90, 0, 0.012) 2px,
rgba(255, 90, 0, 0.012) 4px
);
pointer-events: none;
z-index: 2;
}
.pauer-bg-orange .pauer-bg-scanlines,
.pauer-bg-orange .bg-scanlines {
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.04) 2px,
rgba(0, 0, 0, 0.04) 4px
);
}
/* Noise texture */
.bg-noise {
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 1;
}
/* Directional gradient helpers */
.bg-gradient { position: absolute; inset: 0; z-index: 0; }
.bg-gradient--top-left {
background: radial-gradient(ellipse at 25% 20%, var(--orange-dim) 0%, transparent 55%);
}
.bg-gradient--center {
background: radial-gradient(ellipse at 50% 40%, var(--orange-dim) 0%, transparent 55%);
}
.bg-gradient--bottom-right {
background: radial-gradient(ellipse at 70% 75%, var(--orange-soft) 0%, transparent 50%);
}
.bg-gradient--dual {
background:
radial-gradient(ellipse at 30% 25%, var(--orange-dim) 0%, transparent 55%),
radial-gradient(ellipse at 70% 75%, var(--orange-soft) 0%, transparent 50%);
}
/* ═══════════════════════════════════════════
5. GLASSMORPHISM CARDS
═══════════════════════════════════════════ */
/* Standard glass card */
.pauer-card,
.glass-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-2xl) var(--space-3xl);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.03);
transition: border-color var(--transition), background var(--transition);
}
.pauer-card:hover,
.glass-card:hover {
background: var(--card-bg-hover);
border-color: var(--border-hover);
}
/* Smaller padding variant */
.pauer-card.sm,
.glass-card--sm {
padding: var(--space-lg) var(--space-xl);
border-radius: var(--radius-lg);
}
/* With left orange accent border */
.pauer-card-accent,
.glass-card--accent {
background: var(--card-bg);
border: 1px solid var(--border);
border-left: 3px solid var(--orange);
border-radius: var(--radius);
padding: var(--space-lg) var(--space-xl);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}
/* Dark glass on orange backgrounds */
.pauer-card-orange,
.glass-card-dark {
background: rgba(0, 0, 0, 0.22);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-xl);
padding: var(--space-2xl) var(--space-3xl);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
}
/* CTA box — orange border on dark bg */
.cta-box {
background: rgba(255, 90, 0, 0.08);
border: 2px solid var(--orange);
border-radius: var(--radius-xl);
padding: var(--space-2xl) var(--space-3xl);
text-align: center;
}
/* Accent bar (left border only) */
.accent-bar {
border-left: 3px solid var(--orange);
padding-left: var(--space-lg);
}
/* Orange glow hover variant */
.pauer-card--glow:hover {
box-shadow: var(--shadow-glow);
border-color: rgba(255, 90, 0, 0.25);
}
/* ═══════════════════════════════════════════
6. NAVIGATION
═══════════════════════════════════════════ */
.pauer-nav,
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--nav-h);
background: transparent;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
border-bottom: 1px solid transparent;
z-index: 100;
/* Only animate specific props to avoid logo flash on load */
transition: background var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
}
.pauer-nav.scrolled,
.nav.scrolled {
background: rgba(8, 8, 8, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom-color: var(--border);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.pauer-nav .container,
.nav .container,
.nav .nav-inner,
.pauer-nav .nav-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-2xl);
height: 100%;
display: flex;
align-items: center;
gap: var(--space-2xl);
}
/* Logo — ALWAYS the image, NEVER text */
.pauer-nav-logo img,
.nav-logo img {
height: 40px;
width: auto;
aspect-ratio: 588 / 168;
display: block;
}
/* Nav links */
.pauer-nav-links,
.nav-links {
display: flex;
align-items: center;
gap: var(--space-2xl);
margin-left: auto;
}
.pauer-nav-links a,
.nav-links a {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--text-secondary);
transition: color var(--transition);
}
.pauer-nav-links a:hover,
.nav-links a:hover,
.pauer-nav-links a.active,
.nav-links a.active {
color: var(--text-primary);
}
/* Nav CTA */
.nav-cta {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--white) !important;
background: var(--orange);
padding: 8px 20px;
border-radius: var(--radius);
transition: opacity var(--transition), transform var(--transition);
white-space: nowrap;
}
.nav-cta:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* Page content top offset for fixed nav */
.nav-offset { padding-top: var(--nav-h); }
/* ═══════════════════════════════════════════
7. BUTTONS
═══════════════════════════════════════════ */
.pauer-btn,
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
font-family: var(--font-heading);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--white);
background: var(--orange);
border: none;
border-radius: var(--radius);
padding: 12px 28px;
cursor: pointer;
transition: opacity var(--transition), transform var(--transition);
text-decoration: none;
white-space: nowrap;
}
.pauer-btn:hover,
.btn:hover {
opacity: 0.88;
transform: translateY(-1px);
color: var(--white);
}
.pauer-btn:active,
.btn:active {
transform: translateY(0);
opacity: 1;
}
/* Ghost / outline button */
.pauer-btn-ghost,
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
font-family: var(--font-heading);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--text-primary);
background: transparent;
border: 1px solid var(--border-hover);
border-radius: var(--radius);
padding: 11px 28px;
cursor: pointer;
transition: border-color var(--transition), background var(--transition), transform var(--transition);
text-decoration: none;
white-space: nowrap;
}
.pauer-btn-ghost:hover,
.btn-ghost:hover {
border-color: var(--orange);
background: var(--orange-glow);
transform: translateY(-1px);
color: var(--text-primary);
}
/* Small button variant */
.pauer-btn.sm, .btn.sm,
.pauer-btn-ghost.sm, .btn-ghost.sm {
font-size: 13px;
padding: 8px 18px;
}
/* Large button variant */
.pauer-btn.lg, .btn.lg {
font-size: 17px;
padding: 16px 36px;
border-radius: var(--radius-lg);
}
/* ═══════════════════════════════════════════
8. COMPONENTS
═══════════════════════════════════════════ */
/* Chip / filter chip */
.pauer-chip,
.chip {
display: inline-flex;
align-items: center;
font-family: var(--font-heading);
font-size: 13px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-dim);
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-full);
padding: 6px 16px;
cursor: pointer;
transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.pauer-chip:hover,
.chip:hover,
.pauer-chip.active,
.chip.active {
border-color: var(--orange);
color: var(--orange);
background: var(--orange-glow);
}
/* Badge — status indicator */
.pauer-badge,
.badge {
display: inline-flex;
align-items: center;
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--orange);
background: var(--orange-glow);
border: 1px solid rgba(255, 90, 0, 0.20);
border-radius: var(--radius-sm);
padding: 4px 10px;
white-space: nowrap;
}
.pauer-badge.green { color: #00CC88; background: rgba(0, 204, 136, 0.08); border-color: rgba(0, 204, 136, 0.2); }
.pauer-badge.red { color: #FF3333; background: rgba(255, 51, 51, 0.08); border-color: rgba(255, 51, 51, 0.2); }
.pauer-badge.gray { color: var(--text-dim); background: var(--card-bg); border-color: var(--border); }
/* Pill (rounded badge) */
.pauer-pill,
.pill {
display: inline-flex;
align-items: center;
font-family: var(--font-heading);
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--orange);
background: var(--orange-glow);
border: 1px solid rgba(255, 90, 0, 0.20);
border-radius: var(--radius-full);
padding: 4px 14px;
}
/* Tag — small label */
.pauer-tag,
.tag {
display: inline-block;
font-family: var(--font-heading);
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-dim2);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 3px 8px;
}
/* Divider — orange accent line */
.pauer-divider,
.divider {
width: 72px;
height: 4px;
background: var(--orange);
box-shadow: 0 0 12px rgba(255, 90, 0, 0.4);
border-radius: 2px;
margin: var(--space-lg) 0;
}
.divider--subtle {
width: 60px;
height: 3px;
background: rgba(255, 255, 255, 0.10);
border-radius: 2px;
margin: var(--space-md) 0;
}
/* Progress bar */
.progress-bar {
width: 100%;
height: 8px;
background: rgba(255, 255, 255, 0.06);
border-radius: 4px;
overflow: hidden;
}
.progress-bar__fill {
height: 100%;
background: linear-gradient(90deg, var(--orange), rgba(255, 90, 0, 0.7));
border-radius: 4px;
box-shadow: 0 0 12px var(--orange-strong);
}
/* ── PAUER LOADING SPINNER — Canonical ── */
/* Container: use whenever a content area loads async data */
.pauer-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 320px;
gap: 20px;
}
/* Compact variant for smaller areas */
.pauer-loading.sm {
min-height: 120px;
gap: 12px;
}
.pauer-loading.sm .pauer-loading-spinner {
width: 32px;
height: 32px;
}
.pauer-loading.sm .pauer-loading-isotipo {
inset: 8px;
}
.pauer-loading.sm .pauer-loading-text {
font-size: 11px;
}
/* Spinner ring */
.pauer-loading-spinner {
position: relative;
width: 64px;
height: 64px;
flex-shrink: 0;
}
/* PAUER Isotipo centered inside ring */
.pauer-loading-isotipo {
position: absolute;
inset: 10px;
border-radius: 50%;
overflow: hidden;
background-image: url('https://oyldnumunlkmuzkqihdo.supabase.co/storage/v1/object/public/content/brand/logos/PAUER-Isotipo-profile.png');
background-size: cover;
background-position: center;
}
.pauer-loading-spinner::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--border);
}
.pauer-loading-spinner::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: var(--orange);
animation: pauer-spin 0.75s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* Spinner text */
.pauer-loading-text {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-dim);
}
@keyframes pauer-spin {
to { transform: rotate(360deg); }
}
/* Stat card (KPI) */
.stat-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: clamp(16px, 3vw, 28px);
text-align: center;
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
transition: border-color var(--transition);
}
.stat-card:hover { border-color: rgba(255, 90, 0, 0.20); }
.stat-card .stat-number {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
color: var(--orange);
line-height: 1;
}
.stat-card .stat-label {
font-family: var(--font-heading);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--text-dim);
margin-top: 6px;
}
/* Cursor glow element — JS-controlled position */
.pauer-glow {
position: fixed;
width: 500px;
height: 500px;
border-radius: 50%;
pointer-events: none;
z-index: 0;
background: radial-gradient(circle, rgba(255, 90, 0, 0.08) 0%, transparent 70%);
transform: translate(-50%, -50%);
will-change: left, top;
}
/* ═══════════════════════════════════════════
9. WEB PAGE LAYOUT
═══════════════════════════════════════════ */
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-2xl);
}
.container-sm { max-width: 900px; }
.container-xs { max-width: 720px; }
/* Full-screen section */
.pauer-section,
.section {
min-height: 100vh;
padding: clamp(80px, 8vw, 120px) clamp(24px, 6vw, 80px);
background: var(--black);
position: relative;
overflow: hidden;
}
/* Subtle dual-radial orange glow per section */
.pauer-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 20%, rgba(255, 90, 0, 0.06) 0%, transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(255, 90, 0, 0.04) 0%, transparent 45%);
pointer-events: none;
z-index: 0;
}
.pauer-section-inner {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
}
/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-xl); }
/* WhatsApp float button */
.wa-float {
position: fixed;
bottom: 24px;
right: 24px;
width: 56px;
height: 56px;
background: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
z-index: 999;
transition: transform var(--transition);
}
.wa-float:hover { transform: scale(1.1); }
/* Footer */
.pauer-footer,
.footer {
background: rgba(255, 255, 255, 0.015);
border-top: 1px solid var(--border);
padding: var(--space-2xl) var(--space-2xl);
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-lg);
}
.footer-logo img {
height: 24px;
width: auto;
aspect-ratio: 588 / 168;
}
.footer-nav {
display: flex;
gap: var(--space-xl);
}
.footer-nav a,
.footer a {
font-family: var(--font-heading);
font-size: 14px;
color: var(--text-dim);
transition: color var(--transition);
}
.footer-nav a:hover,
.footer a:hover {
color: var(--text-primary);
}
.footer-text {
font-size: 13px;
color: var(--text-dim2);
line-height: 1.6;
}
.footer-text a { color: var(--text-dim); }
.footer-text a:hover { color: var(--text-primary); }
/* ═══════════════════════════════════════════
10. SLIDE SYSTEM (Carousel 1080×1350)
═══════════════════════════════════════════ */
/* For Playwright rendering — fixed px, no viewport dependencies */
/* Body dimension shortcuts */
body.carousel { width: 1080px; height: 1350px; overflow: hidden; }
body.story { width: 1080px; height: 1920px; overflow: hidden; }
body.square { width: 1080px; height: 1080px; overflow: hidden; }
/* Slide container */
.pauer-slide,
.slide {
position: relative;
width: 1080px;
height: 1350px;
background: var(--black);
overflow: hidden;
font-family: var(--font-body);
}
/* Dark slide variant */
.pauer-slide-dark {
background: var(--black);
}
/* Orange slide variant */
.pauer-slide-orange {
background: radial-gradient(ellipse at 50% 10%, #FF7A00 0%, #FF5A00 35%, #CC3D00 100%);
}
/* Slide content area */
.slide-content {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 80px 70px;
text-align: center;
}
/* Slide number — top right */
.pauer-slide-number,
.slide-number {
position: absolute;
top: 40px;
right: 50px;
font-family: var(--font-heading);
font-size: 28px;
font-weight: 600;
color: var(--text-dim2);
z-index: 10;
}
/* Orange top accent line */
.pauer-slide-top-line,
.top-line {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--orange);
box-shadow: 0 0 20px rgba(255, 90, 0, 0.5);
z-index: 10;
}
/* Large decorative ghost text background */
.pauer-slide-ghost-text,
.ghost-text {
position: absolute;
font-family: var(--font-display);
font-size: 240px;
line-height: 1;
letter-spacing: -5px;
color: rgba(255, 255, 255, 0.025);
white-space: nowrap;
pointer-events: none;
z-index: 1;
user-select: none;
}
/* Bottom bar — logo + handle/swipe indicator */
.pauer-slide-bottom-bar,
.slide-bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 50px;
z-index: 10;
}
/* Logo watermark */
.logo-watermark {
height: 28px;
width: auto;
opacity: 0.25;
}
/* @pauer.marketing handle */
.handle,
.slide-handle {
font-family: var(--font-heading);
font-size: 18px;
letter-spacing: 2px;
color: var(--text-dim2);
}
/* DESLIZA indicator */
.swipe-indicator {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 600;
letter-spacing: 3px;
color: var(--orange);
}
/* Badge on slides */
.slide-badge {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--orange);
background: rgba(255, 90, 0, 0.08);
border: 1px solid rgba(255, 90, 0, 0.20);
border-radius: var(--radius-sm);
padding: 8px 20px;
display: inline-block;
}
/* Progress bar on slides */
.slide-progress {
width: 100%;
max-width: 700px;
height: 12px;
background: rgba(255, 255, 255, 0.06);
border-radius: 6px;
overflow: hidden;
}
.slide-progress__fill {
height: 100%;
background: linear-gradient(90deg, var(--orange), rgba(255, 90, 0, 0.7));
border-radius: 6px;
box-shadow: 0 0 20px var(--orange-strong);
}
/* ═══════════════════════════════════════════
11. STORY SYSTEM (1080×1920)
═══════════════════════════════════════════ */
/* Story container */
.pauer-story,
.story {
position: relative;
width: 1080px;
height: 1920px;
background: var(--black);
overflow: hidden;
font-family: var(--font-body);
}
/* Safe zone — respects UI overlays (top 250px, bottom 330px) */
.story-safe-zone {
position: absolute;
top: 250px;
left: 60px;
right: 60px;
bottom: 330px;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/* Progress bars (top) */
.pauer-story-bars,
.story-bars {
position: absolute;
top: 40px;
left: 40px;
right: 40px;
display: flex;
gap: 6px;
z-index: 10;
}
.story-bar-seg {
flex: 1;
height: 3px;
background: rgba(255, 255, 255, 0.30);
border-radius: 2px;
overflow: hidden;
}
.story-bar-seg-fill {
height: 100%;
background: var(--white);
border-radius: 2px;
}
/* Avatar area (top-left) */
.pauer-story-avatar,
.story-avatar {
position: absolute;
top: 70px;
left: 50px;
display: flex;
align-items: center;
gap: 16px;
z-index: 10;
}
.story-avatar-ring {
width: 72px;
height: 72px;
border-radius: 50%;
border: 2px solid var(--orange);
overflow: hidden;
background-image: url('https://oyldnumunlkmuzkqihdo.supabase.co/storage/v1/object/public/content/brand/logos/PAUER-Isotipo-profile.png');
background-size: cover;
background-position: center;
}
.story-avatar-name {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 700;
color: var(--white);
}
.story-avatar-handle {
font-family: var(--font-heading);
font-size: 20px;
color: rgba(255, 255, 255, 0.60);
letter-spacing: 1px;
}
/* Main glass card */
.pauer-story-card,
.story-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
padding: 60px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
width: 100%;
}
/* DM keyword box (Reveal sticker zone) */
.pauer-story-dm-box,
.story-dm-box {
margin-top: 48px;
width: 80%;
max-width: 760px;
border: 2px solid rgba(255, 90, 0, 0.30);
border-radius: 20px;
padding: 30px 40px;
text-align: center;
}
.story-dm-keyword {
font-family: var(--font-display);
font-size: 52px;
color: var(--orange);
letter-spacing: 3px;
}
.story-dm-hint {
font-family: var(--font-heading);
font-size: 22px;
color: rgba(255, 255, 255, 0.50);
letter-spacing: 2px;
margin-top: 8px;
}
/* Sticker zone (for interactive sticker placement guide) */
.sticker-zone {
margin-top: 40px;
width: 75%;
max-width: 680px;
border: 2px dashed rgba(255, 90, 0, 0.25);
border-radius: 16px;
padding: 28px;
text-align: center;
}
.sticker-zone__label {
font-family: var(--font-heading);
font-size: 18px;
letter-spacing: 3px;
color: var(--orange);
opacity: 0.4;
text-transform: uppercase;
}
/* ═══════════════════════════════════════════
12. CURSOR GLOW ELEMENT
═══════════════════════════════════════════ */
/* The #pauer-glow div is injected by pauer-canonical.js */
/* For pages that inline JS, use the snippet from pauer-canonical-head.html */
/* CSS here defines the element style; position is set by JS */
#pauer-glow {
position: fixed;
width: 500px;
height: 500px;
border-radius: 50%;
pointer-events: none;
z-index: 0;
background: radial-gradient(circle, rgba(255, 90, 0, 0.08) 0%, transparent 70%);
transform: translate(-50%, -50%);
will-change: left, top;
}
/* ═══════════════════════════════════════════
13. UTILITIES
═══════════════════════════════════════════ */
/* Text wrapping safety */
.text-safe {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
/* Flex */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col { display: flex; flex-direction: column; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
/* Gap */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
/* Margin top */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
/* Margin bottom */
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
/* Padding */
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
/* Text align */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
/* Transitions */
.transition { transition: all var(--transition); }
.transition-fast { transition: all 0.15s ease; }
/* ═══════════════════════════════════════════
14. RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════ */
@media screen and (max-width: 1024px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.container { padding: 0 var(--space-xl); }
}
@media screen and (max-width: 768px) {
.pauer-section, .section { padding: 60px 20px; }
.grid-4 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr !important; }
.grid-2 { grid-template-columns: 1fr !important; }
.stat-card .stat-number { font-size: 2rem; }
.container { padding: 0 var(--space-lg); }
.pauer-nav .nav-links,
.nav .nav-links {
display: none; /* mobile: hide links, show hamburger separately */
}
.footer-inner { flex-direction: column; gap: var(--space-md); }
/* Slide font reductions for browser preview */
.display-xl { font-size: 120px; }
.display-lg { font-size: 80px; }
.title-xl { font-size: 64px; }
.title-lg { font-size: 56px; }
.title-md { font-size: 48px; }
.title-sm { font-size: 40px; }
.slide-body { font-size: 22px; }
.glass-card, .pauer-card { padding: var(--space-lg) var(--space-xl); }
}
@media screen and (max-width: 480px) {
.pauer-section, .section { padding: 48px 16px; }
.container { padding: 0 var(--space-md); }
.display-xl { font-size: 80px; }
.display-lg { font-size: 56px; }
.title-xl { font-size: 48px; }
.slide-body { font-size: 18px; }
.glass-card, .pauer-card { padding: var(--space-md) var(--space-lg); }
.web-h1 { font-size: 1.8rem; }
.web-body { font-size: 1rem; }
}
/* Touch devices — disable cursor glow */
@media (hover: none) {
#pauer-glow, .pauer-glow { display: none !important; }
}
/* ═══════════════════════════════════════════
17. DASHBOARD NAVIGATION (top bar with tabs)
═══════════════════════════════════════════ */
.pauer-dash-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: 56px;
background: rgba(8,8,8,0.95);
backdrop-filter: blur(var(--glass-blur));
border-bottom: 1px solid var(--border);
display: flex; align-items: center; padding: 0 20px; gap: 0;
}
.pauer-dash-nav .pauer-logo { height: 36px; width: auto; flex-shrink: 0; }
.pauer-dash-nav-sep { width: 1px; height: 22px; background: var(--border); margin: 0 16px; }
.pauer-dash-nav-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.pauer-dash-nav-tabs::-webkit-scrollbar { display: none; }
.pauer-dash-tab {
color: var(--text-dim);
font-family: var(--font-heading);
font-size: 12px; font-weight: 600;
letter-spacing: 1.5px; text-transform: uppercase;
padding: 6px 14px; border-radius: var(--radius-sm);
cursor: pointer; white-space: nowrap;
border: none; background: none;
transition: color 0.2s, background 0.2s;
}
.pauer-dash-tab:hover { color: var(--text-primary); background: var(--card-bg); }
.pauer-dash-tab.active { color: var(--orange); background: var(--orange-dim); }
.pauer-dash-actions { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
/* ═══════════════════════════════════════════
18. SIDEBAR NAVIGATION (portal, Sistema de Marca)
═══════════════════════════════════════════ */
.pauer-sidebar {
position: fixed; top: 0; left: 0; bottom: 0; width: 220px;
background: rgba(8,8,8,0.98);
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
z-index: 100; padding: 20px 0;
transition: transform 0.3s ease;
}
.pauer-sidebar .pauer-logo { height: 28px; width: auto; padding: 0 20px; margin-bottom: 6px; }
.pauer-sidebar-subtitle {
font-family: var(--font-body);
font-size: 11px; color: var(--text-dim2);
padding: 0 20px; margin-bottom: 20px;
}
.pauer-sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0 8px; overflow-y: auto; }
.pauer-sidebar-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px; border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 14px; font-weight: 500; color: var(--text-dim);
cursor: pointer; border: none; background: none; width: 100%;
text-align: left;
transition: color 0.2s, background 0.2s;
border-left: 3px solid transparent;
}
.pauer-sidebar-item:hover { color: var(--text-primary); background: var(--card-bg); }
.pauer-sidebar-item.active {
color: var(--orange);
background: var(--orange-dim);
border-left-color: var(--orange);
}
.pauer-sidebar-item svg, .pauer-sidebar-item .icon { width: 18px; height: 18px; opacity: 0.6; }
.pauer-sidebar-item.active svg, .pauer-sidebar-item.active .icon { opacity: 1; }
.pauer-sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--border); margin-top: auto; }
.pauer-sidebar-footer img { height: 20px; }
/* Main content offset when sidebar is present */
.pauer-sidebar-content { margin-left: 220px; min-height: 100vh; padding: 24px; }
/* Mobile: sidebar as overlay */
@media (max-width: 768px) {
.pauer-sidebar { transform: translateX(-100%); }
.pauer-sidebar.open { transform: translateX(0); }
.pauer-sidebar-content { margin-left: 0; }
.pauer-sidebar-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.5);
z-index: 99; display: none;
}
.pauer-sidebar-overlay.open { display: block; }
}
/* ═══════════════════════════════════════════
19. FILTER CHIPS
═══════════════════════════════════════════ */
.pauer-chip {
background: var(--card-bg); border: 1px solid var(--border);
color: var(--text-dim);
font-family: var(--font-heading);
font-size: 11px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
padding: 5px 12px; border-radius: 20px;
cursor: pointer;
transition: all 0.18s;
}
.pauer-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
.pauer-chip.active { border-color: var(--orange); color: var(--orange); background: var(--orange-dim); }
/* ═══════════════════════════════════════════
20. TABLES
═══════════════════════════════════════════ */
.pauer-table { width: 100%; border-collapse: collapse; }
.pauer-table th {
font-family: var(--font-heading);
font-size: 11px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--text-dim); padding: 10px 12px;
border-bottom: 1px solid var(--border);
text-align: left; position: sticky; top: 0;
background: var(--black);
}
.pauer-table td {
padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.03);
font-size: 13px; color: var(--text-secondary);
}
.pauer-table tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
.pauer-table tr:hover td { background: rgba(255,90,0,0.03); }
.pauer-table th.sortable { cursor: pointer; }
.pauer-table th.sortable:hover { color: var(--orange); }
/* ═══════════════════════════════════════════
21. TOAST NOTIFICATIONS
═══════════════════════════════════════════ */
.pauer-toast {
position: fixed; bottom: 24px; right: 24px; z-index: 9999;
background: rgba(20,20,20,0.95); backdrop-filter: blur(12px);
border: 1px solid var(--border);
border-radius: var(--radius); padding: 12px 20px;
font-family: var(--font-body); font-size: 13px;
color: var(--text-primary);
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
transform: translateY(100px); opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.pauer-toast.show { transform: translateY(0); opacity: 1; }
.pauer-toast.ok { border-left: 3px solid #00CC88; }
.pauer-toast.err { border-left: 3px solid #FF3333; }
.pauer-toast.warn { border-left: 3px solid #FFB800; }
/* ═══════════════════════════════════════════
22. MODAL
═══════════════════════════════════════════ */
.pauer-modal-overlay {
position: fixed; inset: 0; z-index: 1000;
background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 0.25s ease;
}
.pauer-modal-overlay.open { opacity: 1; pointer-events: auto; }
.pauer-modal {
background: var(--black); border: 1px solid var(--border);
border-radius: var(--radius); padding: 28px;
max-width: 480px; width: 90%;
box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.pauer-modal h2 {
font-family: var(--font-display);
font-size: 22px; letter-spacing: 1px; margin-bottom: 16px;
}
.pauer-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
/* ═══════════════════════════════════════════
23. EMPTY STATE
═══════════════════════════════════════════ */
.pauer-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 48px 24px; text-align: center;
}
.pauer-empty-icon { font-size: 40px; margin-bottom: 16px; opacity: 0.3; }
.pauer-empty p {
font-size: 14px; color: var(--text-dim); max-width: 320px; line-height: 1.5;
}
/* ═══════════════════════════════════════════
24. FORM INPUTS
═══════════════════════════════════════════ */
.pauer-input, .pauer-select, .pauer-textarea {
background: #111; border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: var(--font-body); font-size: 14px;
padding: 10px 14px; width: 100%;
transition: border-color 0.2s;
}
.pauer-input:focus, .pauer-select:focus, .pauer-textarea:focus {
outline: none; border-color: var(--orange);
}
.pauer-textarea { min-height: 80px; resize: vertical; }
.pauer-label {
display: block; margin-bottom: 6px;
font-family: var(--font-heading);
font-size: 11px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase;
color: var(--text-dim);
}
/* ═══════════════════════════════════════════
25. VIEW ANIMATION
═══════════════════════════════════════════ */
.pauer-view { display: none; animation: pauer-fadeIn 0.25s ease; }
.pauer-view.active { display: block; }
@keyframes pauer-fadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ═══════════════════════════════════════════
15. PRINT
═══════════════════════════════════════════ */
@media print {
body { background: white; color: #080808; }
.pauer-nav, .nav, .wa-float, #pauer-glow { display: none; }
.bg-gradient, .bg-noise, .bg-vignette, .bg-scanlines,
.pauer-bg::before, .pauer-bg::after,
.pauer-section::before, .pauer-section::after { display: none; }
.glass-card, .pauer-card { border: 1px solid #ddd; background: white; backdrop-filter: none; }
.accent, em { color: #FF5A00; }
a { color: #FF5A00; }
}
/* ═══════════════════════════════════════════
16. LOGO ENTRANCE ANIMATION (CANONICAL) [was 16, kept for backward compat]
═══════════════════════════════════════════
Canonical PAUER logo animation. Applies to any interactive HTML
interface where the logo appears (nav hero, splash, headers).
Usage: add class .pauer-logo-animated to the