/* * the client — Design System * Colors & Type * * Source of truth: brand colors sampled from the official the client * 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: #7DBDF8; /* the client sky blue — sampled from the logo badge gradient (top). */ --color-brand-secondary: #0E1A25; /* 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: #031B30; /* Deepest brand blue — footer, mission bg, dark band end-stop */ --color-brand-primary-900: #042848; /* Deep brand blue — closing CTA bg, surface dark anchor */ --color-brand-primary-800: #063865; /* Dark brand blue — mid-stop in dark gradient */ --color-brand-primary-700: #085296; /* CTA fill / hover-press / text gradient end on light bg */ --color-brand-primary-500: #0C75D5; /* Mid brand blue — link hover, lifted gradient stop */ --color-brand-primary-400: #2A93F3; /* Lifted brand blue — soft hover, gradient transition */ --color-brand-primary-300: #7DBDF8; /* Logo sky — the brand color itself (gradient top). */ --color-brand-primary-200: #CFE7FC; /* Pale logo wash — pill bg, soft surface tint. */ --color-brand-primary-100: #F1F8FE; /* Lightest logo wash — gradient bottom, surface bg. */ --color-brand-secondary-900: #070D12; /* Deepest ink — pressed */ --color-brand-secondary-700: #0E1A25; /* Default ink (same as --color-brand-secondary). */ --color-brand-secondary-500: #182C3F; /* Lifted ink — hover */ --color-brand-secondary-100: #E5EEF5; /* Pale ink tint — chip background */ /* Logo gradient — roof cyan (#6CCEE1) → pale wash. The logo's own light blue, fading out. 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, #6CCEE1 0%, #F0FAFC 100%); /* Dark band variant — the brand's ONE dark gradient, for contrast sections/backgrounds. Runs the logo's own arc: near-black navy → the wordmark blue (#084F90) held to 55% → lifting through teal into the roof cyan (#6CCEE1) at the far corner. The long hold on the wordmark blue keeps white text sitting on a deep field; only the last sweep shows the cyan, echoing the roof over dark. */ --gradient-brand-dark: linear-gradient(135deg, #04263F 0%, #084F90 55%, #2E9FC0 85%, #6CCEE1 100%); /* Compact-element variant of the dark gradient — same navy start, but TRIMMED before the full cyan lift. 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 and read as turquoise. Large surfaces keep --gradient-brand-dark for the full roof-cyan sweep. */ --gradient-brand-deep: linear-gradient(135deg, #04263F 0%, #0A5A9E 60%, #1E8FB5 100%); /* Accent gradient — the bright direction, cyan easing through a pale leaf-green tint (the logo's leaf) into white. For TEXT GRADIENTS ON DARK BACKGROUNDS (e.g. inside the dark mission sections). */ --gradient-accent: linear-gradient(90deg, #6CCEE1 0%, #C9EDF5 55%, #EAF8F1 100%); /* Hero radial accents — roof cyan glow + a leaf-green whisper. */ --gradient-hero-accent: radial-gradient(circle at 80% 20%, rgba(108,206,225,0.24), transparent 42%); --gradient-hero-accent-2:radial-gradient(circle at 12% 90%, rgba(37,146,95,0.15), transparent 46%); /* ── 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: #25925F; /* 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; }