/* * MoldCure — Design System * Colors & Type * * Source of truth: brand colors sampled from the official MoldCure * full-color horizontal logo (DC Mold Cure FC Horz r2.png). * Type, scale, radii, shadow and motion tokens are inherited from the * parent design system this brand was adapted from. * * Use: link this file from any HTML file in this project to inherit the brand. * * * Plus Jakarta Sans is loaded from Google Fonts here so HTML files don't need * to repeat the @import. Weights 300–900 are pulled; display headlines all * use 900. */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap'); :root { /* ── Brand color ───────────────────────────────────────────────── */ --color-brand-primary: #1f3b73; /* MoldCure navy. Primary brand color — headers, CTAs, icons, accents. */ --color-brand-secondary: #00a651; /* MoldCure green. Secondary brand color — gradient stop, success/positive accents, complementary surfaces. */ /* Tonal variants of the two brand colors, derived for hover/press, overlays and tinted surfaces. */ --color-brand-primary-900: #0a1530; /* Deepest navy — video tints, dark hero fallbacks, mission section */ --color-brand-primary-800: #050a18; /* Near-black navy — video background fallback before poster */ --color-brand-primary-700: #15294f; /* Darker navy — pressed / depth */ --color-brand-primary-500: #2a4f93; /* Mid navy — hover on body links */ --color-brand-primary-100: #e6ebf4; /* Pale navy tint — chip / wash */ --color-brand-secondary-700: #007a3c; /* Darker green — pressed / depth */ --color-brand-secondary-500: #14b965; /* Lighter green — hover lift */ --color-brand-secondary-100: #e3f5ec; /* Pale green tint — chip / wash */ /* Primary brand gradient — navy on navy. Two stops within the navy family, running deep → lifted across 90°. This is the brand's most recognisable visual stamp; reserve for primary CTAs, hero ribbons, gradient text on the differentiator phrase, and one closing CTA band per page. Never apply to body text, vertical orientations, or large surface fills. */ --gradient-brand: linear-gradient(90deg, #15294f 0%, #2a4f93 100%); /* Secondary brand gradient — green on green. Use sparingly for positive / "after" moments: success banners, completion CTAs, "Get Started" promos on healthcare-leaning pages. Never mix navy and green within a single gradient. */ --gradient-accent: linear-gradient(90deg, #007a3c 0%, #14b965 100%); /* Hero radial accents — one of each color, balanced corner-to-corner. */ --gradient-hero-accent: radial-gradient(circle at 80% 20%, rgba(31,59,115,0.12), transparent 40%); --gradient-hero-accent-2:radial-gradient(circle at 12% 90%, rgba(0,166,81,0.10), transparent 45%); /* ── Text ──────────────────────────────────────────────────────── */ --color-text-primary: #0f172a; /* All headings, primary body. color. */ --color-text-secondary: #64748b; /* Lead paragraphs, descriptions under headings. (slate-500) */ --color-text-tertiary: #94a3b8; /* Muted metadata, eyebrow micro-labels. (slate-400) */ --color-text-body: #475569; /* Secondary button text. (slate-600) */ --color-text-inverse: #ffffff; /* Text on gradient or dark backgrounds. */ /* ── Surface ───────────────────────────────────────────────────── */ --color-surface-app: #f7faf9; /* App background — pale neutral with the faintest green-cool warmth. + App root. */ --color-surface-section: #fcfdfd; /* Alternate section background. */ --color-surface-card: #ffffff; /* Card backgrounds, navbar fill (under glass). */ --color-surface-subtle: #e6ebf4; /* Icon-chip backgrounds (navy tint). */ --color-surface-subtle-2:#e3f5ec; /* Alternate icon-chip background (green tint), use sparingly. */ /* ── Border ────────────────────────────────────────────────────── */ --color-border-subtle: #f1f5f9; /* Default card and divider border. (slate-100) */ --color-border-default: #e2e8f0; /* Section dividers, secondary button border. (slate-200) */ --color-border-brand-30: rgba(31, 59, 115, 0.30); /* Card border on hover. */ --color-border-accent-30: rgba(0, 166, 81, 0.30); /* Alt accent border, used sparingly. */ /* ── Status / accent ───────────────────────────────────────────── */ --color-status-success: #00a651; /* MoldCure green doubles as success. */ --color-status-danger: #f43f5e; /* rose-500. Comparison-table X marks. */ --color-accent-gold: #fbbf24; /* Star ratings (filled). */ /* ── Glass / overlays ──────────────────────────────────────────── */ --color-glass-bg: rgba(255, 255, 255, 0.85); --color-glass-border: rgba(255, 255, 255, 0.50); --color-glass-bg-dark: rgba(255, 255, 255, 0.10); --color-glass-border-dark: rgba(255, 255, 255, 0.20); /* ── White-alpha scale (for use on dark sections) ────────────── One tier per role. If a new opacity is needed, add a token here rather than hand-rolling rgba(255,255,255,X) inline. */ --color-white-grid: rgba(255, 255, 255, 0.04); /* grid-pattern overlays */ --color-white-surface: rgba(255, 255, 255, 0.06); /* glass-card fill on dark */ --color-white-surface-hi: rgba(255, 255, 255, 0.10); /* hover state for above */ --color-white-border: rgba(255, 255, 255, 0.14); /* glass-card border */ --color-white-border-hi: rgba(255, 255, 255, 0.28); /* hover state border */ --color-white-divider: rgba(255, 255, 255, 0.18); /* hero-trust dividers */ --color-white-outline: rgba(255, 255, 255, 0.55); /* ghost-button outline */ --color-white-text-muted: rgba(255, 255, 255, 0.72); /* body text on dark */ --color-white-text-lead: rgba(255, 255, 255, 0.85); /* lead text on dark */ /* ── Typography: family ────────────────────────────────────────── */ --font-family-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; /* ── Typography: weight ────────────────────────────────────────── */ --font-weight-regular: 400; --font-weight-medium: 500; /* Body, descriptions */ --font-weight-bold: 700; /* Strong text, button text */ --font-weight-extrabold: 800; /* Emphasized labels, eyebrows */ --font-weight-black: 900; /* All headlines. **Default for display.** */ /* ── Typography: scale (desktop values) ────────────────────────── */ --font-size-h1: 4.2rem; /* 67.2px */ --font-size-h2: 3rem; /* 48px */ --font-size-h3: 2.25rem; /* 36px */ --font-size-lead: 1.25rem; /* 20px */ --font-size-body: 1.125rem; /* 18px */ --font-size-body-small: 0.9375rem; /* 15px */ --font-size-button: 1rem; /* 16px desktop / 11–13px nav buttons */ --font-size-eyebrow: 0.6875rem; /* 11px */ /* ── Typography: tracking ──────────────────────────────────────── */ --tracking-display: -0.05em; --tracking-tight: -0.025em; --tracking-body: -0.01em; --tracking-label: 0.10em; --tracking-eyebrow: 0.40em; /* ── Typography: leading ───────────────────────────────────────── */ --leading-display: 1.05; --leading-heading: 1.10; --leading-tight: 1.25; --leading-body: 1.625; /* ── Spacing & layout ──────────────────────────────────────────── */ --container-max: 1400px; --container-max-wide: 1440px; --container-pad-x-mob: 1rem; --container-pad-x-tab: 1.5rem; --container-pad-x-desk: 2rem; --section-py-compact: 5rem; --section-py-default: 7rem; --section-py-spacious: 8rem; /* ── Radii ─────────────────────────────────────────────────────── */ --radius-button: 1.8rem; --radius-card: 3rem; --radius-card-lg: 3.5rem; --radius-hero: 4.5rem; --radius-pill: 9999px; --radius-sm: 0.75rem; --radius-md: 1rem; /* ── Shadows ───────────────────────────────────────────────────── */ --shadow-subtle: 0 4px 20px rgba(15,23,42,0.02); --shadow-glass: 0 10px 30px -10px rgba(15,23,42,0.05); --shadow-card: 0 20px 50px -15px rgba(15,23,42,0.04); --shadow-menu: 0 30px 60px -15px rgba(15,23,42,0.10); --shadow-card-hover: 0 40px 80px -20px rgba(15,23,42,0.06); --shadow-image: 0 50px 100px -20px rgba(15,23,42,0.10); --shadow-image-large: 0 60px 120px -30px rgba(15,23,42,0.15); --shadow-brand-button: 0 15px 30px -5px rgba(31,59,115,0.40); --shadow-accent-button:0 15px 30px -5px rgba(0,166,81,0.35); /* ── Motion ────────────────────────────────────────────────────── */ --duration-standard: 300ms; --ease-out: ease-out; --ease-brand: cubic-bezier(0.16, 1, 0.3, 1); } /* ── Base ──────────────────────────────────────────────────────── */ html, body { margin: 0; padding: 0; } body { font-family: var(--font-family-sans); background-color: var(--color-surface-app); color: var(--color-text-primary); letter-spacing: var(--tracking-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: #d6e0f0; /* pale navy */ color: #15294f; /* deep navy */ } /* ── Semantic typography classes ───────────────────────────────── */ /* Use these for "set me a heading"-style needs without thinking about tracking/leading/weight every time. */ .t-h1, h1 { font-size: clamp(2.25rem, 4.5vw + 0.5rem, var(--font-size-h1)); font-weight: var(--font-weight-black); line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--color-text-primary); margin: 0; } .t-h2, h2 { font-size: clamp(2rem, 3.5vw + 0.5rem, var(--font-size-h2)); font-weight: var(--font-weight-black); line-height: var(--leading-heading); letter-spacing: var(--tracking-display); color: var(--color-text-primary); margin: 0; } .t-h3, h3 { font-size: clamp(1.5rem, 2vw + 0.5rem, var(--font-size-h3)); font-weight: var(--font-weight-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); margin: 0; } .t-lead { font-size: var(--font-size-lead); font-weight: var(--font-weight-medium); line-height: var(--leading-body); color: var(--color-text-secondary); margin: 0; } .t-body, p { font-size: var(--font-size-body); font-weight: var(--font-weight-medium); line-height: var(--leading-body); color: var(--color-text-body); margin: 0; } .t-eyebrow { font-size: var(--font-size-eyebrow); font-weight: var(--font-weight-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-secondary); } .t-button { font-size: var(--font-size-button); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); } .t-mono { /* not in the brand; exposed for code samples in tooling only */ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* The signature gradient text used on the differentiator phrase in display headlines. Reserve for the brand name or differentiator — never for a full sentence. Default uses the navy gradient; pair the `.t-gradient-accent` modifier when an explicitly positive phrase wants the green family instead. */ .t-gradient { background-image: var(--gradient-brand); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .t-gradient-accent { background-image: var(--gradient-accent); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ── Brand utilities ───────────────────────────────────────────── */ /* Button definitions (.btn-brand, .btn-accent, .btn-secondary) live in site.css. Don't redeclare them here — site.css loads second and the richer version wins anyway. */ .text-brand { color: var(--color-brand-primary); } .text-accent { color: var(--color-brand-secondary); } .glass-panel { background-color: var(--color-glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--color-glass-border); box-shadow: var(--shadow-glass); } @keyframes pm-marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } .animate-marquee { display: flex; width: max-content; animation: pm-marquee 80s linear infinite; } .animate-marquee:hover { animation-play-state: paused; } @keyframes pm-ping { 75%, 100% { transform: scale(2); opacity: 0; } } .animate-ping { animation: pm-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes pm-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-up { animation: pm-fade-up 700ms var(--ease-out) both; }