/* ───────────────────────────────────────────────────────── Valurio Design System — Colors & Type Source of truth for the Valurio marketing website. Distilled from the production site tvrdonj-pixel/Valurio-web. Usage: - Link this file in before Tailwind on any marketing page. - Reference --vl-* variables in custom style blocks. - Use the semantic helper classes (.vl-h1, .vl-tag, etc.) directly in HTML for consistent typography and component styling. - See design.md for full documentation and component specs. ─────────────────────────────────────────────────────────── */ /* Webfonts (Google Fonts) */ @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root { /* ── Brand color (terracotta) ─────────────────────────── */ --vl-primary: #9f402d; /* deep terracotta — headlines, CTAs, icons */ --vl-primary-container: #e2725b; /* soft terracotta — gradients, tints */ --vl-primary-tint: rgba(159, 64, 45, 0.08); /* tag-pill background */ --vl-primary-tint-12: rgba(159, 64, 45, 0.12); --vl-primary-glow: rgba(159, 64, 45, 0.10); /* hero blob glows */ /* The signature gradient — logos, CTAs, avatars, gradient text */ --vl-gradient-primary: linear-gradient(135deg, #9f402d 0%, #e2725b 100%); --vl-gradient-pricing: linear-gradient(150deg, #9f402d 0%, #c95c42 100%); --vl-gradient-deep: linear-gradient(135deg, #56423e 0%, #9f402d 100%); --vl-gradient-tip: linear-gradient(135deg, #F39271 0%, #D87654 100%); /* ── Surfaces (warm off-whites) ────────────────────────── */ --vl-surface: #fafaf9; /* page background — warm bone */ --vl-surface-low: #f3f4f3; /* subdued sections */ --vl-surface-card: #ffffff; /* cards and sheets */ --vl-surface-high: #e8e8e7; /* elevated dividers */ /* ── Text + Foreground ─────────────────────────────────── */ --vl-on-surface: #1a1c1c; /* near-black — headlines */ --vl-on-surface-variant: #56423e; /* warm brown — body text */ --vl-on-surface-muted: rgba(86, 66, 62, 0.70); /* fine print */ /* ── Borders + Outlines ────────────────────────────────── */ --vl-outline-variant: #ddc0ba; /* warm tan — hairline borders */ --vl-outline-soft: rgba(221, 192, 186, 0.30); /* ── Semantic / status colors ──────────────────────────── */ --vl-success: #10b981; /* emerald-500 — positive outcomes */ --vl-danger: #f43f5e; /* rose-500 — warnings (rare) */ /* ── Typography stacks ─────────────────────────────────── */ --vl-font-headline: "Public Sans", system-ui, -apple-system, sans-serif; --vl-font-body: "Inter", system-ui, -apple-system, sans-serif; --vl-font-icon: "Material Symbols Outlined"; /* ── Type scale (marketing) ────────────────────────────── */ --vl-text-display: clamp(2.8rem, 7vw, 4.5rem); /* H1 hero */ --vl-text-h1: clamp(2.5rem, 7vw, 4rem); /* CTA banners */ --vl-text-h2: clamp(2rem, 5vw, 3rem); /* section headers */ --vl-text-h3: clamp(1.75rem, 4vw, 2.5rem); /* feature subheads */ --vl-text-h4: 1.125rem; /* card titles */ --vl-text-lead: 1.25rem; /* hero supporting */ --vl-text-body: 1rem; --vl-text-small: 0.875rem; --vl-text-tag: 0.65rem; /* uppercase pills */ /* ── Tracking ──────────────────────────────────────────── */ --vl-tracking-tighter: -0.03em; /* huge display headlines */ --vl-tracking-tight: -0.02em; --vl-tracking-pill: 0.12em; /* uppercase tag pills */ --vl-tracking-overline: 0.18em; /* footer microcopy */ /* ── Radii (warm + generous) ───────────────────────────── */ --vl-radius-sm: 0.5rem; /* 8px — chips, small buttons */ --vl-radius-md: 0.75rem; /* 12px — primary buttons */ --vl-radius-lg: 1rem; /* 16px — fields, small cards */ --vl-radius-xl: 1.25rem; /* 20px — feature + pricing cards */ --vl-radius-2xl: 1.5rem; /* 24px — large content cards */ --vl-radius-3xl: 1.875rem; /* 30px — bento/dashboard cards */ --vl-radius-pill: 9999px; /* ── Shadows (soft, warm-tinted, never harsh) ──────────── */ --vl-shadow-card: 0 2px 14px rgba(86, 66, 62, 0.07); --vl-shadow-card-hover: 0 18px 48px rgba(86, 66, 62, 0.12); --vl-shadow-bento: 0 20px 40px -12px rgba(0, 0, 0, 0.05); --vl-shadow-bento-hover:0 20px 40px -5px rgba(0, 0, 0, 0.10); --vl-shadow-cta: 0 20px 60px rgba(159, 64, 45, 0.35); --vl-shadow-pro: 0 24px 64px rgba(159, 64, 45, 0.38); --vl-shadow-phone: 0 40px 90px rgba(86, 66, 62, 0.25), 0 6px 16px rgba(86, 66, 62, 0.12); --vl-shadow-nav-up: 0 -4px 20px -4px rgba(0, 0, 0, 0.08); --vl-shadow-soft: 0 2px 8px rgba(86, 66, 62, 0.04); /* ── Spacing (8pt grid) ────────────────────────────────── */ --vl-space-1: 0.25rem; /* 4px */ --vl-space-2: 0.5rem; /* 8px */ --vl-space-3: 0.75rem; /* 12px */ --vl-space-4: 1rem; /* 16px */ --vl-space-5: 1.25rem; /* 20px */ --vl-space-6: 1.5rem; /* 24px */ --vl-space-8: 2rem; /* 32px */ --vl-space-10: 2.5rem; /* 40px */ --vl-space-12: 3rem; /* 48px */ --vl-space-16: 4rem; /* 64px */ --vl-space-24: 6rem; /* 96px — section padding */ /* ── Motion ────────────────────────────────────────────── */ --vl-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); --vl-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --vl-dur-fast: 150ms; --vl-dur-base: 250ms; --vl-dur-slow: 500ms; } /* ───────────────────────────────────────────────────────── Material Symbols base rule ─────────────────────────────────────────────────────────── */ .material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; } /* ───────────────────────────────────────────────────────── Semantic helper classes Use these directly in HTML for consistent styling. ─────────────────────────────────────────────────────────── */ .vl-h1 { font-family: var(--vl-font-headline); font-weight: 900; font-size: var(--vl-text-display); letter-spacing: var(--vl-tracking-tighter); line-height: 1.04; color: var(--vl-on-surface); } .vl-h2 { font-family: var(--vl-font-headline); font-weight: 900; font-size: var(--vl-text-h2); letter-spacing: var(--vl-tracking-tighter); line-height: 1.1; color: var(--vl-on-surface); } .vl-h3 { font-family: var(--vl-font-headline); font-weight: 900; font-size: var(--vl-text-h3); letter-spacing: var(--vl-tracking-tight); line-height: 1.15; color: var(--vl-on-surface); } .vl-h4 { font-family: var(--vl-font-headline); font-weight: 700; font-size: var(--vl-text-h4); color: var(--vl-on-surface); } .vl-lead { font-family: var(--vl-font-body); font-size: var(--vl-text-lead); line-height: 1.55; color: var(--vl-on-surface-variant); } .vl-body { font-family: var(--vl-font-body); font-size: var(--vl-text-body); line-height: 1.6; color: var(--vl-on-surface-variant); } .vl-small { font-family: var(--vl-font-body); font-size: var(--vl-text-small); line-height: 1.5; color: var(--vl-on-surface-variant); } .vl-tag { display: inline-block; font-family: var(--vl-font-body); font-size: var(--vl-text-tag); font-weight: 700; letter-spacing: var(--vl-tracking-pill); text-transform: uppercase; color: var(--vl-primary); background: var(--vl-primary-tint); border-radius: var(--vl-radius-pill); padding: 0.25rem 0.9rem; } .vl-overline { font-family: var(--vl-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: var(--vl-tracking-overline); text-transform: uppercase; color: var(--vl-on-surface-muted); } /* Gradient text — used on hero accent words */ .vl-gradient-text { background: var(--vl-gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Paper grain — apply to or a wrapper on marketing pages */ .vl-grain::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E"); }