/* ============================================================================= Medical Rhapsody — Design Token System Source of truth for all visual decisions. Brand direction: Swiss medical precision · clinical authority · human warmth ============================================================================= CHANGELOG vs. previous inline :root ───────────────────────────────────────────────────────────────────────────── REMOVED --navy #012E64 → replaced by --color-primary REMOVED --accent #3E6CFF → electric blue CTA color retired REMOVED --accent-h #2A54E0 → replaced by --color-accent-hover REMOVED --teal #00B5CC → replaced by --color-accent (#00A8A8) REMOVED --warm-bg #f4f2ee → replaced by --color-bg-soft (#F5F7FA) REMOVED --white #ffffff → replaced by --color-bg-white REMOVED --text #333333 → replaced by --color-text-dark (#1F2937) REMOVED --muted #6b7280 → replaced by --color-text-muted (#5B6573) REMOVED --soft-grey #DDDDDD → replaced by --color-border-soft (#D9E1EA) ADDED --color-primary-strong new deep navy for gradients & overlays ADDED --color-secondary steel blue for secondary UI accents ADDED --color-gold-subtle prestige gold for credentials / badges ADDED full typography, spacing, radius, shadow, z-index, transition tokens ============================================================================= */ :root { /* ── COLOR ──────────────────────────────────────────────────────────────── */ /* Primaries — dark navy surfaces (nav, hero, dark sections, footer) */ --color-primary: #0B2A4A; --color-primary-strong: #081F38; /* deeper tone for gradients & inset shadows */ /* Secondary — logo azure: section labels, icons, numbers, dividers, brand emphasis */ --color-secondary: #25A4DA; --color-secondary-soft: #EAF7FD; /* Accent — primary interactive color: CTAs, focus rings, active states, bullets */ --color-accent: #25A4DA; --color-accent-hover: #008F8F; --color-accent-subtle: rgba(0, 168, 168, 0.08); /* tinted card backgrounds */ --color-accent-border: rgba(0, 168, 168, 0.20); /* card borders, dividers */ --color-accent-border-h:rgba(0, 168, 168, 0.40); /* hover state borders */ --color-accent-glow: rgba(0, 168, 168, 0.10); /* hero glow overlay */ /* Gold — prestige highlight: credential badges, section anchors, subtle rules */ --color-gold-subtle: #C8A96A; --color-gold-subtle-bg: rgba(200, 169, 106, 0.08); /* Background surfaces */ --color-bg-white: #FFFFFF; --color-bg-soft: #F4F6F9; /* alternating section backgrounds */ /* Text */ --color-text-dark: #1F2937; /* primary body text on light */ --color-text-muted: #5B6573; /* secondary text, captions, form helpers */ --color-text-inverse: #FFFFFF; /* text on dark backgrounds */ --color-text-inverse-72:rgba(255, 255, 255, 0.72); /* hero subheadline */ --color-text-inverse-65:rgba(255, 255, 255, 0.65); /* mobile sub-links */ --color-text-inverse-60:rgba(255, 255, 255, 0.60); /* footer links, stat labels */ --color-text-inverse-52:rgba(255, 255, 255, 0.52); /* footer body copy */ /* Borders */ --color-border-soft: #D9E1EA; /* form inputs, light section dividers */ --color-border-inverse: rgba(255, 255, 255, 0.10); /* dividers on dark bg */ --color-border-nav: rgba(255, 255, 255, 0.05); /* mobile sub-link separators */ /* Semantic */ --color-error: #DC2626; --color-whatsapp: #25D366; /* ── TYPOGRAPHY ─────────────────────────────────────────────────────────── */ --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Source Sans 3', system-ui, sans-serif; /* Scale (rem — base 16px) */ --text-2xs: 0.75rem; /* 12px — labels, legal */ --text-xs: 0.8125rem; /* 13px — error messages, footnotes */ --text-sm: 0.875rem; /* 14px — form labels */ --text-base: 0.9375rem; /* 15px — nav links, button text, UI */ --text-body: 1.0625rem; /* 17px — body paragraphs */ --text-lg: 1.125rem; /* 18px — lead text */ --text-xl: 1.375rem; /* 22px — card subheadings */ --text-2xl: 1.5rem; /* 24px — H3 */ --text-3xl: 1.875rem; /* 30px — section headings mobile */ --text-4xl: 2.25rem; /* 36px — section headings */ --text-5xl: 2.625rem; /* 42px — hero mobile */ --text-6xl: 3.25rem; /* 52px — hero desktop */ --text-stat: 3rem; /* 48px — stat numbers */ --text-label: 0.8125rem; /* 13px — section labels (uppercase) */ /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights */ --leading-hero: 1.1; /* H1 hero — very tight */ --leading-heading:1.15; /* H2/H3 sections */ --leading-snug: 1.25; /* card headings */ --leading-ui: 1.5; /* nav links, button labels */ --leading-body: 1.65; /* body paragraphs */ --leading-stat: 1.0; /* stat numbers */ /* Letter spacing */ --tracking-hero: -0.025em; /* large display headings */ --tracking-heading:-0.020em; /* section headings */ --tracking-serif: -0.015em; /* card headings */ --tracking-label: 0.120em; /* uppercase section labels */ --tracking-stat: 0.010em; /* stat text labels */ /* ── SPACING SCALE ──────────────────────────────────────────────────────── */ /* 4px base unit — 4/8/12/16/20/24/28/32/40/48/56/64/80/96/112 */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ /* Semantic spacing */ --section-py: var(--space-20); /* 80px — mobile section padding */ --section-py-lg: var(--space-28); /* 112px — desktop section padding */ --container-px: 1.25rem; /* 20px — mobile gutter */ --container-px-lg: 2rem; /* 32px — desktop gutter */ --container-max: 80rem; /* 1280px — max-w-7xl */ --nav-height: 4rem; /* 64px — sticky nav */ /* ── BORDER RADIUS ──────────────────────────────────────────────────────── */ --radius-sm: 4px; /* small UI chips */ --radius-md: 7px; /* buttons, text inputs */ --radius-lg: 10px; /* dropdown menus */ --radius-xl: 12px; /* testimonial cards, referral cards */ --radius-2xl: 14px; /* product cards, authority photo, hero placeholder */ --radius-full: 9999px; /* pills, avatar rings, WhatsApp FAB */ /* ── SHADOWS (layered, tinted) ──────────────────────────────────────────── */ /* Elevation system: base → elevated → floating */ --shadow-base: 0 1px 4px rgba(0,0,0,0.04), 0 2px 12px rgba(11,42,74,0.06); --shadow-elevated: 0 4px 20px rgba(11,42,74,0.10), 0 2px 8px rgba(0,0,0,0.05); --shadow-floating: 0 8px 40px rgba(11,42,74,0.18), 0 2px 8px rgba(0,0,0,0.08); --shadow-deep: 0 20px 60px rgba(0,0,0,0.40); /* authority photo */ /* Accent-tinted shadows (CTAs, interactive cards) */ --shadow-cta: 0 2px 12px rgba(0,168,168,0.28); --shadow-cta-hover: 0 4px 22px rgba(0,168,168,0.50); /* Structural shadows */ --shadow-nav: 0 2px 24px rgba(0,0,0,0.30); --shadow-image: 0 10px 40px rgba(11,42,74,0.15); --shadow-product-hover: 0 16px 48px rgba(0,0,0,0.30), 0 0 24px rgba(0,168,168,0.10); /* WhatsApp FAB */ --shadow-whatsapp: 0 4px 18px rgba(37,211,102,0.45); --shadow-whatsapp-hover: 0 6px 28px rgba(37,211,102,0.60); /* Hero placeholder */ --shadow-hero-placeholder: 0 0 50px rgba(0,168,168,0.10), inset 0 0 50px rgba(0,168,168,0.04); /* ── BORDERS ────────────────────────────────────────────────────────────── */ --border: 1.5px; --border-soft-rule: 1px solid var(--color-border-soft); --border-inverse-rule: 1px solid var(--color-border-inverse); --border-accent-rule: 1px solid var(--color-accent-border); /* ── GRADIENTS ──────────────────────────────────────────────────────────── */ /* Subtle gradient for all dark-primary sections — barely perceptible depth */ --gradient-dark-section: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%); --gradient-hero: radial-gradient(ellipse 65% 65% at 85% 50%, rgba(0,168,168,0.09) 0%, transparent 60%), radial-gradient(ellipse 45% 55% at 15% 85%, rgba(107,143,181,0.07) 0%, transparent 55%); --gradient-hero-placeholder: linear-gradient(135deg, rgba(0,168,168,0.25) 0%, transparent 50%, rgba(107,143,181,0.15) 100%); /* ── Z-INDEX SCALE ──────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown:100; --z-fixed: 900; /* WhatsApp FAB */ --z-nav: 1000; /* sticky nav */ --z-overlay: 1050; /* mobile backdrop */ --z-drawer: 1100; /* mobile menu */ --z-skip: 9999; /* skip link */ /* ── TRANSITIONS ────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* spring-style enter */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* swift exit */ --ease-drawer: cubic-bezier(0.4, 0, 0.2, 1); /* drawer slide */ --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; }