/* LabApp Studio — build. Generated for deploy: tokens flattened into one file. */ /* ===== tokens/fonts.css ===== */ /* LabApp Studio — Webfonts NOTE: No brand font files were provided. These are the closest Google Fonts matches to the logo + product UI and are flagged as substitutions in readme.md: · Fredoka → rounded geometric wordmark ("Lab", "Credicuota$") · Poppins → clean geometric UI/body (app headings & controls) · Caveat → handwriting tagline ("Tu simulador de créditos universal") */ /* Webfonts are loaded PER PAGE via async tags, NOT @import here — a remote @import inside this render-blocking stylesheet stalls (and blanks the page) in sandboxed previews. Font families used (keep page links in sync): Fredoka, Poppins, Caveat — core UI + wordmarks Montserrat — Credicuotas brand voice Anton, Archivo — Motorcheck display fallbacks */ /* ---- Self-hosted brand fonts (uploaded .otf) ---- */ /* AntennaComp Display: single face = Black, for giant headlines at any weight */ @font-face{font-family:'AntennaComp Display';src:url('./fonts/AntennaComp-Black.otf') format('opentype');font-weight:100 900;font-display:swap} /* AntennaComp text family: Medium/Bold/Black */ @font-face{font-family:'AntennaComp';src:url('./fonts/AntennaComp-Medium.otf') format('opentype');font-weight:500;font-display:swap} @font-face{font-family:'AntennaComp';src:url('./fonts/AntennaComp-Bold.otf') format('opentype');font-weight:700;font-display:swap} @font-face{font-family:'AntennaComp';src:url('./fonts/AntennaComp-Black.otf') format('opentype');font-weight:900;font-display:swap} /* Lemon Milk — logo-asset family (use only in logo lockups) */ @font-face{font-family:'Lemon Milk';src:url('./fonts/LEMONMILK-Light.otf') format('opentype');font-weight:300;font-display:swap} @font-face{font-family:'Lemon Milk';src:url('./fonts/LEMONMILK-LightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:'Lemon Milk';src:url('./fonts/LEMONMILK-Regular.otf') format('opentype');font-weight:400;font-display:swap} @font-face{font-family:'Lemon Milk';src:url('./fonts/LEMONMILK-RegularItalic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Lemon Milk';src:url('./fonts/LEMONMILK-Medium.otf') format('opentype');font-weight:500;font-display:swap} @font-face{font-family:'Lemon Milk';src:url('./fonts/LEMONMILK-MediumItalic.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap} @font-face{font-family:'Lemon Milk';src:url('./fonts/LEMONMILK-Bold.otf') format('opentype');font-weight:700;font-display:swap} @font-face{font-family:'Lemon Milk';src:url('./fonts/LEMONMILK-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap} /* Fredoka — brand files (Expanded = display/wordmarks; Condensed available as its own family) */ @font-face{font-family:'Fredoka';src:url('./fonts/Fredoka_Expanded-Light.ttf') format('truetype');font-weight:300;font-display:swap} @font-face{font-family:'Fredoka';src:url('./fonts/Fredoka_Expanded-Regular.ttf') format('truetype');font-weight:400;font-display:swap} @font-face{font-family:'Fredoka';src:url('./fonts/Fredoka_Expanded-Medium.ttf') format('truetype');font-weight:500;font-display:swap} @font-face{font-family:'Fredoka';src:url('./fonts/Fredoka_Expanded-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap} @font-face{font-family:'Fredoka';src:url('./fonts/Fredoka_Expanded-Bold.ttf') format('truetype');font-weight:700;font-display:swap} @font-face{font-family:'Fredoka Condensed';src:url('./fonts/Fredoka_Condensed-Light.ttf') format('truetype');font-weight:300;font-display:swap} @font-face{font-family:'Fredoka Condensed';src:url('./fonts/Fredoka_Condensed-Regular.ttf') format('truetype');font-weight:400;font-display:swap} @font-face{font-family:'Fredoka Condensed';src:url('./fonts/Fredoka_Condensed-Medium.ttf') format('truetype');font-weight:500;font-display:swap} @font-face{font-family:'Fredoka Condensed';src:url('./fonts/Fredoka_Condensed-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap} @font-face{font-family:'Fredoka Condensed';src:url('./fonts/Fredoka_Condensed-Bold.ttf') format('truetype');font-weight:700;font-display:swap} /* Francy — uploaded; pending assignment to a token */ @font-face{font-family:'Francy';src:url('./fonts/Francy.otf') format('opentype');font-weight:400;font-display:swap} /* Montserrat — Credicuotas brand voice (self-hosted .ttf). NOTE: Regular/Medium/SemiBold weights not uploaded yet — 400 falls back to Light, 600 to Bold. */ @font-face{font-family:'Montserrat';src:url('./fonts/Montserrat-ExtraLight.ttf') format('truetype');font-weight:200;font-display:swap} @font-face{font-family:'Montserrat';src:url('./fonts/Montserrat-ExtraLightItalic.ttf') format('truetype');font-weight:200;font-style:italic;font-display:swap} @font-face{font-family:'Montserrat';src:url('./fonts/Montserrat-Light.ttf') format('truetype');font-weight:300;font-display:swap} @font-face{font-family:'Montserrat';src:url('./fonts/Montserrat-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Montserrat';src:url('./fonts/Montserrat-Bold.ttf') format('truetype');font-weight:700;font-display:swap} @font-face{font-family:'Montserrat';src:url('./fonts/Montserrat-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap} @font-face{font-family:'Montserrat';src:url('./fonts/Montserrat-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap} @font-face{font-family:'Montserrat';src:url('./fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype');font-weight:800;font-style:italic;font-display:swap} @font-face{font-family:'Montserrat';src:url('./fonts/Montserrat-Black.ttf') format('truetype');font-weight:900;font-display:swap} @font-face{font-family:'Montserrat';src:url('./fonts/Montserrat-BlackItalic.ttf') format('truetype');font-weight:900;font-style:italic;font-display:swap} /* ===== tokens/colors.css ===== */ /* LabApp Studio — Color tokens Base palette sampled from the logo, marketing site, and the two product apps (Credicuotas · navy fintech, Motorcheck · black automotive). */ :root { /* ---- Brand ---- */ --brand-cyan: #51C7E2; /* logo pill */ --brand-cyan-600: #2FAEC9; --brand-blue: #106DB6; /* "Lab" wordmark */ --brand-blue-700: #0B5794; --brand-navy: #0E2A5C; /* deep marketing navy */ /* ---- Product accents ---- */ --teal: #00B7BB; /* Credicuotas accent */ --teal-700: #068C90; --accent-blue: #3B82F6; /* Motorcheck primary */ --accent-blue-700: #2563EB; /* ---- Semantic ---- */ --green: #34C759; /* success / positive amounts */ --green-600: #22A745; --red: #EF4444; /* danger / alerts / interest */ --red-700: #B91C1C; --orange: #DB672F; /* warning / service */ --purple: #8C40E3; /* odometer / secondary category */ /* ---- Neutral ramp (dark-first) ---- */ --ink-950: #05070A; /* Motorcheck canvas */ --ink-900: #0B1A2A; /* Credicuotas canvas */ --ink-850: #101826; --ink-800: #14171F; /* base card */ --ink-750: #16202E; --ink-700: #1E2430; /* elevated card */ --ink-650: #242841; /* Credicuotas elevated card */ --ink-600: #2A313D; --gray-400: #9CA3AF; /* secondary text */ --gray-500: #6B7280; /* muted text */ --gray-300: #C4CAD4; --white: #FFFFFF; /* ---- Light neutrals (marketing / web surfaces) ---- */ --paper: #FFFFFF; --paper-soft: #F5F8FB; --paper-line: #E3E9F0; /* ---- Alpha helpers ---- */ --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.14); --scrim: rgba(5,7,10,0.55); /* ---- Semantic aliases ---- */ --bg-app: var(--ink-900); --bg-app-black: var(--ink-950); --surface-card: var(--ink-800); --surface-card-elevated: var(--ink-650); --surface-line: var(--line); --text-primary: var(--white); --text-secondary: var(--gray-400); --text-muted: var(--gray-500); --text-on-brand: var(--white); --interactive-primary: var(--accent-blue); --interactive-teal: var(--teal); --focus-ring: var(--brand-cyan); --status-success: var(--green); --status-danger: var(--red); --status-warning: var(--orange); /* Signature gradients */ --grad-brand: radial-gradient(120% 120% at 50% 30%, #00B7BB 0%, #0B2A4A 78%); /* @kind other */ --grad-tile-blue: linear-gradient(150deg, #4C8DFF, #3B6FE0); /* @kind other */ --grad-tile-orange: linear-gradient(150deg, #F0872E, #DB5A1F); /* @kind other */ --grad-tile-purple: linear-gradient(150deg, #A855F7, #8C40E3); /* @kind other */ --grad-alert: linear-gradient(160deg, #3A0F11, #7A1518); /* @kind other */ --grad-card-sheen: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0)); /* @kind other */ } /* ===== tokens/typography.css ===== */ /* LabApp Studio — Typography tokens */ :root { /* Families */ --font-display: 'Fredoka', system-ui, sans-serif; /* wordmarks, hero, big numbers */ --font-ui: 'Poppins', system-ui, sans-serif; /* headings, body, controls */ --font-script: 'Caveat', cursive; /* taglines, accents */ --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* Semantic aliases */ --font-body: var(--font-ui); --font-heading: var(--font-ui); /* Type scale (mobile-app first) */ --fs-display: 44px; /* hero amounts, "$482" */ --fs-h1: 30px; --fs-h2: 24px; --fs-h3: 20px; --fs-title: 17px; /* card titles, list titles */ --fs-body: 15px; --fs-label: 13px; /* stat labels, caps labels */ --fs-caption: 12px; --fs-micro: 11px; /* Weights */ --fw-light: 300; /* @kind other */ --fw-regular: 400; /* @kind other */ --fw-medium: 500; /* @kind other */ --fw-semibold: 600; /* @kind other */ --fw-bold: 700; /* @kind other */ /* Line heights */ --lh-tight: 1.08; /* @kind other */ --lh-snug: 1.25; /* @kind other */ --lh-normal: 1.5; /* @kind other */ /* Letter spacing — caps labels are widely tracked in both apps */ --ls-caps: 0.08em; /* @kind other */ --ls-tight: -0.01em; /* @kind other */ } /* ===== tokens/spacing.css ===== */ /* LabApp Studio — Spacing tokens (4px base grid) */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Layout */ --screen-pad: 20px; /* mobile screen side padding */ --card-pad: 16px; --gap-list: 12px; /* gap between stacked cards */ --max-app: 390px; /* iPhone design width */ } /* ===== tokens/effects.css ===== */ /* LabApp Studio — Radii, shadows, borders, motion The apps use generously rounded cards (~18–22px), pill controls, and soft dark elevation with a faint top sheen. Colored tiles glow with their own hue. */ :root { /* Radii */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; /* standard card */ --radius-xl: 26px; /* hero / vehicle card */ --radius-pill: 999px; --radius-tile: 22px; /* Borders */ --border-hairline: 1px solid var(--line); --border-strong: 1px solid var(--line-strong); /* Shadows — dark UI relies on glow + depth, not grey drop shadows */ --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45); --shadow-raised: 0 12px 32px rgba(0,0,0,0.55); --shadow-tile-blue: 0 10px 26px rgba(59,111,224,0.45); --shadow-tile-orange: 0 10px 26px rgba(219,90,31,0.40); --shadow-tile-purple: 0 10px 26px rgba(140,64,227,0.42); --glow-alert: 0 0 24px rgba(239,68,68,0.35); --glow-teal: 0 0 20px rgba(0,183,187,0.35); /* Focus */ --ring: 0 0 0 3px rgba(81,199,226,0.45); /* @kind shadow */ /* Motion — quick, gentle ease; no bounce in-product */ --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 320ms; /* @kind other */ --press-scale: 0.97; /* @kind other */ } /* ===== tokens/products.css ===== */ /* LabApp Studio — Product sub-brand palettes. Brand governance: Credicuotas and Motorcheck are independent systems and their colors, type and tone MUST NEVER be mixed. Sourced from the official brand-identity docs (v1.1 / v1.0, Julio 2026). */ :root { /* ---- Credicuotas · fintech (navy authority + teal action) ---- */ --cc-navy: #001C49; /* @kind color */ --cc-teal: #009D9F; /* @kind color */ --cc-white: #FFFFFF; /* @kind color */ --cc-font: 'Montserrat', system-ui, sans-serif; /* ---- Motorcheck · vehicular (orange on black, cream paper) ---- */ --mc-orange: #F05123; /* @kind color */ --mc-black: #0D0D0D; /* @kind color */ --mc-cream: #F5F0E8; /* @kind color */ /* AntennaComp is the brand voice for display (self-hosted .otf); body copy reads in Archivo — AntennaComp is too condensed for long-form text. */ --mc-font-display: 'AntennaComp Display', 'Anton', 'Archivo Black', sans-serif; --mc-font-body: 'Archivo', system-ui, sans-serif; }