/* * Pure Mold Masters — Design System * Colors & Type * * Source of truth: brand colors sampled from the official Pure Mold Masters * badge logo — a sky-blue → pale-blue gradient inside a black-outlined * hexagonal shield with script "Pure" / "Masters" and slab-serif "MOLD". * * Primary brand color (logo gradient top): #96C0E1 * Brand gradient terminus (logo bottom): #F3F8FC * * 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 = body / UI. * Fraunces = premium contemporary serif for display headings. * Chosen to read as a refined home-health brand * (editorial / wellness register), not industrial. * Variable font — uses optical-sizing (large opsz) and * a softer SOFT axis on display so the serifs feel * humanist rather than mechanical. * Allura = script accent (matches the "Pure" / "Masters" wordmarks). */ /* Fonts are loaded via + in each page (parallel, non-render-blocking-chain) rather than an @import here, which would serialize the request behind this stylesheet. */ :root { /* ── Brand color ───────────────────────────────────────────────── */ --color-brand-primary: #96C0E1; /* Pure Mold Masters sky blue — sampled from the logo badge gradient (top). */ --color-brand-secondary: #0E1726; /* Logo black-outline ink — the confident dark anchor that grounds the pale brand palette. Use for navbar bg, footer bg, primary CTA fills, gradient text endpoints on light surfaces. */ /* RGB triplets — for rgba() composites that need a channel list (used by lp.css for focus glows, dark hero overlays and CTA shadows). Each maps to a token above so opacity can be varied without hand-rolling hex. */ --rgb-sky: 150, 192, 225; /* = --color-brand-primary #96C0E1 (logo sky) */ --rgb-navy: 10, 37, 65; /* = --color-brand-primary-900 #0A2541 (deep brand blue) */ --rgb-navy-deep: 6, 26, 46; /* = --color-brand-primary-950 #061A2E (deepest brand blue) */ /* Tonal variants of the brand sky blue, derived for hover/press, overlays, tinted surfaces, and the deeper tones needed for accessible text/CTA contrast against white. */ /* Brand-blue scale — every deep tone derived from the logo sky #96C0E1's own hue (~205°), just at lower lightness. So the dark gradient reads as "the logo's blue, deepened" rather than a navy or royal blue pulled from a different palette. */ --color-brand-primary-950: #061A2E; /* Deepest brand blue — footer, mission bg, dark band end-stop */ --color-brand-primary-900: #0A2541; /* Deep brand blue — closing CTA bg, surface dark anchor */ --color-brand-primary-800: #103559; /* Dark brand blue — mid-stop in dark gradient */ --color-brand-primary-700: #1A5482; /* CTA fill / hover-press / text gradient end on light bg */ --color-brand-primary-500: #2E7AB3; /* Mid brand blue — link hover, lifted gradient stop */ --color-brand-primary-400: #5499CC; /* Lifted brand blue — soft hover, gradient transition */ --color-brand-primary-300: #96C0E1; /* Logo sky — the brand color itself (gradient top). */ --color-brand-primary-200: #D7E6F3; /* Pale logo wash — pill bg, soft surface tint. */ --color-brand-primary-100: #F3F8FC; /* Lightest logo wash — gradient bottom, surface bg. */ --color-brand-secondary-900: #050A14; /* Deepest ink — pressed */ --color-brand-secondary-700: #0E1726; /* Default ink (same as --color-brand-secondary). */ --color-brand-secondary-500: #1F2A3A; /* Lifted ink — hover */ --color-brand-secondary-100: #E8ECF2; /* Pale ink tint — chip background */ /* Logo gradient — the badge's actual sky → pale gradient. This is the brand's most recognisable visual stamp; reserve for soft surface bands, eyebrow washes, and TEXT GRADIENTS ON DARK BACKGROUNDS ONLY. Do not use for text on white (both stops are too pale to read). For text on light surfaces, use --gradient-brand-deep. */ --gradient-brand: linear-gradient(135deg, #96C0E1 0%, #F3F8FC 100%); /* Dark band variant — the brand's ONE dark gradient. Mirrors the logo gradient's logic in reverse: starts at a much darker shade of the logo blue (#061528) and lifts all the way back into the logo color itself (#96BFE1). The intermediate stop at 60% (#143F70 — a deep saturated pure-blue) forces the interpolation path to stay in the pure-blue family until the last 40% of the sweep, so neither buttons nor short text spans show the cyan/teal mid-tones that a naive 2-stop interpolation produces in sRGB. Same endpoints (the user's spec); cleaner path. */ --gradient-brand-dark: linear-gradient(135deg, #061528 0%, #143F70 60%, #96BFE1 100%); /* Compact-element variant of the dark gradient — same blue family, same start point, but TRIMMED before the cyan-leaning lift to #96BFE1. Use for buttons, text emphasis (.t-gradient), small numbered circles, bar fills, map pin icons — anywhere the rendered element is small enough that the lifted end would dominate the visible area and read as turquoise. Large surfaces keep --gradient-brand-dark so the full sweep still lands on the logo. */ --gradient-brand-deep: linear-gradient(135deg, #061528 0%, #0F3768 60%, #2A609A 100%); /* Accent gradient — logo gradient, the bright direction. For TEXT GRADIENTS ON DARK BACKGROUNDS (e.g. inside the dark "Home health specialists" or mission sections). Reads as the top-of-badge sweep, bright on dark, on-brand. */ --gradient-accent: linear-gradient(90deg, #96C0E1 0%, #D7E6F3 60%, #F3F8FC 100%); /* Hero radial accents — pure logo-hue family. */ --gradient-hero-accent: radial-gradient(circle at 80% 20%, rgba(150,192,225,0.22), transparent 40%); --gradient-hero-accent-2:radial-gradient(circle at 12% 90%, rgba(26,84,130,0.20), 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: #F3F8FC; /* Icon-chip backgrounds (brand-blue tint). */ --color-surface-subtle-2:#E8ECF2; /* Alternate icon-chip background (ink 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(10, 37, 65, 0.30); /* Card border on hover. */ --color-border-accent-30: rgba(31, 42, 58, 0.30); /* Alt accent border, used sparingly. */ /* ── Status / accent ───────────────────────────────────────────── */ --color-status-success: #16a34a; /* Independent success green (brand is blue-only, so success stays neutral). */ --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; --font-family-display: "Fraunces", "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif; /* Premium home-care serif — used for h1/h2 display headings. */ --font-family-script: "Allura", "Brush Script MT", cursive; /* Matches the "Pure" / "Masters" script wordmarks — use only for brand wordmark, eyebrow flourish, or signature accents. */ /* Legacy alias retained for any code still referencing --font-family-slab. */ --font-family-slab: var(--font-family-display); /* ── 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(10,37,65,0.40); --shadow-accent-button:0 15px 30px -5px rgba(31,42,58,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: #D7E6F3; /* pale brand blue */ color: #0A2541; /* deep brand blue */ } /* ── Semantic typography classes ───────────────────────────────── */ /* Use these for "set me a heading"-style needs without thinking about tracking/leading/weight every time. */ .t-h1, h1 { font-family: var(--font-family-display); font-size: clamp(2.25rem, 4.5vw + 0.5rem, var(--font-size-h1)); font-weight: 700; /* Fraunces reads as confidently premium at 700 — 900 feels brutal. */ font-variation-settings: "opsz" 144; /* Large optical size unlocks the display-cut serifs. */ line-height: 1.04; letter-spacing: -0.025em; /* Fraunces handles tighter tracking without crowding. */ color: var(--color-text-primary); margin: 0; } .t-h2, h2 { font-family: var(--font-family-display); font-size: clamp(2rem, 3.5vw + 0.5rem, var(--font-size-h2)); font-weight: 700; font-variation-settings: "opsz" 120; line-height: 1.08; letter-spacing: -0.022em; color: var(--color-text-primary); margin: 0; } .t-h3, h3 { font-family: var(--font-family-display); /* Fraunces — match h1/h2 so all headings share the display serif. */ font-size: clamp(1.5rem, 2vw + 0.5rem, var(--font-size-h3)); font-weight: 700; font-variation-settings: "opsz" 72; 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-deep); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* Use when you want the actual logo gradient (sky → pale) behind text. Only readable on DARK backgrounds. */ .t-gradient-soft { 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-700); } /* readable on white — use --color-brand-primary itself only on dark surfaces */ .text-accent { color: var(--color-brand-secondary); } .t-slab { font-family: var(--font-family-slab); font-weight: 900; letter-spacing: var(--tracking-tight); } .t-script { font-family: var(--font-family-script); font-weight: 400; letter-spacing: 0; } /* Brand wordmark — composes the badge typography into one inline lockup that can be used in headlines or footers. "Pure" + "Masters" render in Allura script; "MOLD" renders in Roboto Slab 900 to match the logo. */ .brand-wordmark { font-family: var(--font-family-slab); font-weight: 900; letter-spacing: 0; line-height: 1; color: var(--color-brand-secondary); } .brand-wordmark .script { font-family: var(--font-family-script); font-weight: 400; font-size: 0.78em; vertical-align: 0.05em; margin: 0 0.08em; } .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; }