/* Whazzer Access — tokens del design system, concatenados para el sitio estático. Fuente: design-system/tokens/*.css (proyecto Claude Design c4e0d5eb). No editar aquí: cambiar en el design system y volver a sincronizar. Única diferencia con el kit: se eliminó el @import de Google Fonts de typography.css (al concatenar dejaría de ser válido). Las fuentes se cargan con desde el . */ /* Whazzer Access — Color tokens Derived from the source template, remapped per brand: orange (#ff3c00 / #f16722) -> brand green (#3aaa35 / #94c11f) navy (#050a1e / #161a2b) -> dark neutral grays */ :root { /* Brand green — primary */ --wz-green: #3aaa35; --wz-green-600: #329a2e; --wz-green-700: #2b8528; --wz-green-800: #226b20; --wz-green-050: #eef7ed; --wz-green-tint: rgba(58, 170, 53, 0.06); /* Brand lime — secondary accent */ --wz-lime: #94c11f; --wz-lime-600: #82ab19; --wz-lime-700: #6c8f15; --wz-lime-050: #f4f8e6; /* Neutral / ink (was navy) */ --wz-ink: #1b2124; /* headings (was #050a1e) */ --wz-ink-soft: #2b3236; --wz-graphite: #24282b; /* dark surface (was #161a2b) */ --wz-graphite-900: #14181a;/* darkest bg (was #05091d) */ --wz-slate: #40474b; /* muted dark accents (was #40465d) */ /* Text */ --wz-text: #7a7a7a; /* body copy */ --wz-text-strong: var(--wz-ink); --wz-text-muted: #9a9d9f; --wz-text-on-dark: #ffffff; --wz-text-on-dark-soft: rgba(255, 255, 255, 0.702); /* Surfaces */ --wz-surface: #ffffff; --wz-surface-alt: #f4f4f4; --wz-surface-dark: var(--wz-graphite); /* Lines & borders */ --wz-border: rgba(122, 122, 122, 0.15); --wz-border-dark: #40474b; /* Selection */ --wz-selection-bg: #d4ecd2; /* Semantic aliases */ --color-primary: var(--wz-green); --color-primary-hover: var(--wz-green-700); --color-secondary: var(--wz-lime); --text-body: var(--wz-text); --text-heading: var(--wz-ink); --surface-page: var(--wz-surface); --surface-card: var(--wz-surface); --surface-muted: var(--wz-surface-alt); --border-subtle: var(--wz-border); /* Brand gradients */ --wz-gradient-btn: linear-gradient(90deg, #3aaa35 0%, #94c11f 49%, #226b20 80%, #3aaa35 100%); /* @kind color */ --wz-gradient-line-l: linear-gradient(270deg, #ffffff 0%, #3aaa35 100%); /* @kind color */ --wz-gradient-line-r: linear-gradient(270deg, #3aaa35 0%, #ffffff 100%); /* @kind color */ --wz-gradient-dark: linear-gradient(to bottom, #2b3236, #20262a, #14181a); /* @kind color */ } /* Whazzer Access — Typography tokens Headings: Poppins (600/700). Body & UI: Fira Sans (400/500/600). */ :root { --font-display: "Poppins", system-ui, sans-serif; --font-body: "Fira Sans", system-ui, sans-serif; /* Weights */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-extrabold: 800; /* @kind font */ /* Type scale (px) — from source template */ --fs-display: 55px; /* hero H1 */ --fs-h1: 42px; --fs-h2: 35px; --fs-h3: 30px; --fs-h4: 24px; --fs-h5: 20px; --fs-h6: 18px; --fs-lead: 19px; --fs-body: 16px; --fs-sm: 15px; --fs-xs: 14px; --fs-eyebrow: 16px; /* section sub-title */ /* Line heights */ --lh-display: 70px; --lh-heading: 55px; --lh-body: 26px; --lh-tight: 1.2; /* @kind font */ /* Letter spacing */ --ls-eyebrow: 0.04em; /* @kind font */ } /* Whazzer Access — Spacing tokens The source uses a 5px step utility scale (pt-10 … pt-350). */ :root { --space-1: 5px; --space-2: 10px; --space-3: 15px; --space-4: 20px; --space-5: 25px; --space-6: 30px; --space-8: 40px; --space-10: 50px; --space-12: 60px; --space-15: 75px; --space-16: 80px; --space-20: 100px; --space-24: 120px; /* standard section padding */ /* Section rhythm */ --section-pad-y: 120px; --container-max: 1320px; --container-pad: 15px; --grid-gutter: 30px; } /* Whazzer Access — Effects: radii, shadows, transitions. The source template loves pill buttons (30px), soft cards (15px), and playful asymmetric "leaf" corners (e.g. 20px 0 20px 20px). */ :root { /* Radii */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 10px; --radius-lg: 15px; --radius-xl: 20px; --radius-2xl: 30px; --radius-pill: 30px; --radius-circle: 50%; /* Signature asymmetric "leaf" corner (top-right cut) */ --radius-leaf: 20px 0 20px 20px; --radius-leaf-sm: 10px 0 10px 10px; /* Shadows */ --shadow-header: 0 2px 5px -2px rgba(0, 0, 0, 0.1); --shadow-card: 0 10px 30px rgba(27, 33, 36, 0.08); --shadow-card-hover: 0 18px 40px rgba(27, 33, 36, 0.14); --shadow-focus: 0 0 4px rgba(58, 170, 53, 0.5); --shadow-btn: 0 8px 20px rgba(58, 170, 53, 0.28); /* Transitions — the template's signature is a slow 0.5s ease-out */ --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */ --transition-fast: all 0.3s ease-out 0s; /* @kind other */ --transition-base: all 0.5s ease 0s; /* @kind other */ } /* Whazzer Access — Motion library. Ported verbatim from the source template (solutek) so consuming designs keep the same lively, floating feel the brand liked. */ /* Entrance */ @keyframes wzFadeInUp { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes wzFadeInDown { 0% { opacity: 0; transform: translateY(-40px); } 100% { opacity: 1; transform: translateY(0); } } /* Gentle vertical float — used on hero art & floating shapes */ @keyframes wzMoveBounce { 0% { transform: translateY(0); } 50% { transform: translateY(20px); } 100% { transform: translateY(0); } } @keyframes wzMoveLeftBounce { 0% { transform: translateX(0); } 50% { transform: translateX(20px); } 100% { transform: translateX(0); } } /* Scale "dance" — breathing accents */ @keyframes wzDance { 0% { transform: scale(0.9); } 100% { transform: scale(1.15); } } /* Endless spin — dashed rings / badges */ @keyframes wzRotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* Ripple — video play buttons / live status dots */ @keyframes wzRipple { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } } /* Sliding gradient — animated CTA fill on hover */ @keyframes wzSlideBg { to { background-position: 20vw; } } /* Helper classes */ .wz-anim-float { animation: wzMoveBounce 4s ease-in-out infinite; } .wz-anim-float-x { animation: wzMoveLeftBounce 4s ease-in-out infinite; } .wz-anim-dance { animation: wzDance 3s alternate infinite; } .wz-anim-spin { animation: wzRotate 20s linear infinite; } .wz-anim-in-up { animation: wzFadeInUp 0.8s var(--ease-out, ease) both; } .wz-anim-in-down { animation: wzFadeInDown 0.8s var(--ease-out, ease) both; } @media (prefers-reduced-motion: reduce) { .wz-anim-float, .wz-anim-float-x, .wz-anim-dance, .wz-anim-spin, .wz-anim-in-up, .wz-anim-in-down { animation: none; } }