/* ============================================================================= Kouzelná Linka — Design System Tokens Colors + Type. Loaded globally from head.ejs. Source: design_handoff/colors_and_type.css (visual system locked). ============================================================================= */ :root { /* ---------- Brand colors ---------- */ --zs-red: #D42A2A; /* Santa Red — primary action, alerts */ --zs-red-dark: #b02020; /* Red hover/press */ --zs-red-cta: #C41E3A; /* CTA band (deeper, used in large CTA section) */ --zs-red-cta-dark: #8B1A2B; --zs-gold: #E8B931; /* Premium/highlight (CTAs on dark, premium accents) */ --zs-gold-hover: #d4a726; --zs-gold-soft: #f0d060; /* Gradient mid-stop on hero headline */ --zs-green: #2D7D46; /* Forest / holly / trust icons */ /* Surfaces */ --zs-cream: #F0F4F8; /* Snow — light sections */ --zs-cream-2: #e8edf3; /* Section-gray divider */ --zs-ivory: #fdfcf7; /* Testimonial card bg */ --zs-white: #ffffff; /* Text */ --zs-text: #2D2D2D; --zs-text-muted: #6c757d; --zs-text-light: #E8E8E8; /* For dark backgrounds */ --zs-border: #dee2e6; /* Semantic */ --zs-success: #10b981; /* green checkmark in pricing lists */ --zs-info: #3498db; --zs-warn: #D4A017; /* ASAP button amber */ /* ---------- Type ---------- */ --zs-font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --zs-font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Scale (px values derive from rem assuming 16px root) */ --zs-h1: clamp(2rem, 4.2vw, 3rem); /* Hero: 48px → responsive down to 32 */ --zs-h2: 2.25rem; /* Section title */ --zs-h3: 1.5rem; /* Card title */ --zs-h4: 1.125rem; /* Benefit title */ --zs-body: 1rem; /* 16px */ --zs-body-sm: 0.9375rem; /* 15px — FAQ, pricing list */ --zs-caption: 0.8125rem; /* 13px — hints, legal */ --zs-micro: 0.75rem; /* 12px — copyright, labels */ --zs-tracking-tight: -0.02em; /* H1 */ --zs-tracking-snug: -0.01em; /* H2 */ --zs-leading-tight: 1.15; /* Hero H1 */ --zs-leading-heading: 1.2; /* Other headings */ --zs-leading-body: 1.6; /* Body */ --zs-leading-relaxed: 1.7; /* Long-form, FAQ answers */ /* ---------- Spacing / radii / shadow ---------- */ --zs-radius-sm: 8px; /* small buttons, chips */ --zs-radius-md: 12px; /* inputs, calendar nav, trust badge */ --zs-radius-lg: 16px; /* cards, benefit cards */ --zs-radius-xl: 20px; /* pricing card */ --zs-radius-pill: 50px; /* All CTA buttons are pill */ --zs-shadow-card: 0 2px 16px rgba(0, 0, 0, 0.06); --zs-shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.10); --zs-shadow-premium: 0 12px 40px rgba(232, 185, 49, 0.20); --zs-shadow-cta: 0 6px 25px rgba(232, 185, 49, 0.50); --zs-shadow-form: 0 4px 24px rgba(0, 0, 0, 0.08); --zs-header-h: 72px; --zs-container: 1140px; --zs-ease: cubic-bezier(0.4, 0, 0.2, 1); --zs-transition: 0.3s ease; /* ========== Cosy Christmas palette (v4 redesign) ========== */ /* Hero — deep warm browns / burgundy */ --zs-cosy-1: #1a0f0a; /* deepest, edges */ --zs-cosy-2: #2d1810; /* base */ --zs-cosy-3: #3d2418; /* mid */ --zs-cosy-burgundy: #5a2a1f; /* accent */ /* Warm light sections (replace generic cream usage on light pages) */ --zs-warm-bg: #fdf6e8; /* main warm cream */ --zs-warm-bg-alt: #f7ead0; /* alt warm cream (alternating sections) */ --zs-warm-card: #fffbf2; /* card bg on warm sections */ --zs-warm-border: #e8c896; /* warm card border */ /* Trust strip */ --zs-trust-bg: #fbeed0; --zs-trust-border: #e8c896; /* Warm text */ --zs-warm-text: #2d1810; --zs-warm-text-muted: #6b4f3a; /* Hero text (on dark cosy bg) */ --zs-hero-text: #fef3e2; --zs-hero-text-muted: #d4b896; --zs-hero-accent: #f4a93c; /* the warm gold for accent words */ /* Shadows on warm bg */ --zs-shadow-warm-soft: 0 8px 24px rgba(45, 24, 16, 0.08); --zs-shadow-warm-strong: 0 16px 48px rgba(45, 24, 16, 0.16); } /* Smooth scroll for anchor links (#how, #price, #faq, TOC) — global, respects prefers-reduced-motion automatically. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ============================================================================= Semantic helpers — apply directly, or use vars above in custom styles ============================================================================= */ .zs-h1 { font-family: var(--zs-font-heading); font-weight: 700; font-size: var(--zs-h1); line-height: var(--zs-leading-tight); letter-spacing: var(--zs-tracking-tight); } .zs-h2 { font-family: var(--zs-font-heading); font-weight: 600; font-size: var(--zs-h2); line-height: var(--zs-leading-heading); letter-spacing: var(--zs-tracking-snug); } .zs-h3 { font-family: var(--zs-font-heading); font-weight: 600; font-size: var(--zs-h3); line-height: var(--zs-leading-heading); } .zs-h4 { font-family: var(--zs-font-heading); font-weight: 700; font-size: var(--zs-h4); line-height: var(--zs-leading-heading); } .zs-body { font-family: var(--zs-font-body); font-size: var(--zs-body); line-height: var(--zs-leading-body); } .zs-body-sm { font-family: var(--zs-font-body); font-size: var(--zs-body-sm); line-height: var(--zs-leading-body); } .zs-caption { font-family: var(--zs-font-body); font-size: var(--zs-caption); line-height: 1.5; color: var(--zs-text-muted); } .zs-micro { font-family: var(--zs-font-body); font-size: var(--zs-micro); letter-spacing: 0.5px; text-transform: uppercase; color: var(--zs-text-muted); } .zs-gradient-text { background: linear-gradient(135deg, var(--zs-gold) 0%, var(--zs-gold-soft) 40%, #ffffff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Gold decorative underline (section titles) */ .zs-gold-rule::after { content: ''; display: block; width: 120px; height: 3px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, #f4b942, transparent); border-radius: 2px; }