/* ============================================================ Pal’s Pharmacy / P-PAC style.css (no inline styling) Design goals: - Text-first, sales-letter feel (serious, “read before booking”) - Mobile-first, responsive, fast - Accessible: focus states, skip link - Minimal, premium, “systems & clarity” visual language ============================================================ */ /* ------------------------------- 1) CSS Reset (lightweight) --------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html:focus-within { scroll-behavior: smooth; } html, body { height: 100%; } body { margin: 0; } img, picture, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } a { color: inherit; } /* ------------------------------- 2) Theme tokens (defaults) --------------------------------- */ :root { --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bg: #0b0f14; --panel: #0f1622; --panel-2: #121c2b; --text: #eaf1ff; --muted: rgba(234, 241, 255, 0.72); --muted-2: rgba(234, 241, 255, 0.55); --border: rgba(234, 241, 255, 0.12); --brand: #7dd3fc; --brand-2: #a78bfa; --good: #34d399; --warn: #fbbf24; --bad: #fb7185; --shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.45); --shadow-hard: 0 18px 60px rgba(0, 0, 0, 0.55); --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --container: 1100px; --pad-x: 20px; --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 24px; --space-6: 32px; --space-7: 44px; --space-8: 64px; --t-fast: 120ms ease; --t: 200ms ease; } /* ------------------------------- 2B) Manual themes (BODY CLASSES) Usage in HTML: , theme-snow, theme-ocean, theme-forest, theme-saffron --------------------------------- */ body.theme-ink { color-scheme: dark; --bg: #0b0f14; --panel: #0f1622; --panel-2: #121c2b; --text: #eaf1ff; --muted: rgba(234, 241, 255, 0.72); --muted-2: rgba(234, 241, 255, 0.55); --border: rgba(234, 241, 255, 0.12); --brand: #7dd3fc; --brand-2: #a78bfa; --good: #34d399; --warn: #fbbf24; --bad: #fb7185; --shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.45); --shadow-hard: 0 18px 60px rgba(0, 0, 0, 0.55); } body.theme-snow { color-scheme: light; --bg: #f7fafc; --panel: #ffffff; --panel-2: #eef2ff; --text: #0b1220; --muted: rgba(11, 18, 32, 0.74); --muted-2: rgba(11, 18, 32, 0.58); --border: rgba(11, 18, 32, 0.12); --brand: #2563eb; --brand-2: #06b6d4; --good: #16a34a; --warn: #b45309; --bad: #dc2626; --shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.10); --shadow-hard: 0 22px 70px rgba(15, 23, 42, 0.12); } body.theme-ocean { color-scheme: light; --bg: #e9fbff; --panel: #ffffff; --panel-2: #dff6ff; --text: #062238; --muted: rgba(6, 34, 56, 0.76); --muted-2: rgba(6, 34, 56, 0.60); --border: rgba(6, 34, 56, 0.14); --brand: #0077b6; --brand-2: #00d4ff; --good: #0f766e; --warn: #b45309; --bad: #d62828; --shadow-soft: 0 10px 26px rgba(6, 34, 56, 0.10); --shadow-hard: 0 22px 70px rgba(6, 34, 56, 0.12); } body.theme-forest { color-scheme: light; --bg: #f0fff4; --panel: #ffffff; --panel-2: #e7f8ee; --text: #0b2b1d; --muted: rgba(11, 43, 29, 0.76); --muted-2: rgba(11, 43, 29, 0.60); --border: rgba(11, 43, 29, 0.14); --brand: #166534; --brand-2: #22c55e; --good: #16a34a; --warn: #b45309; --bad: #b91c1c; --shadow-soft: 0 10px 26px rgba(11, 43, 29, 0.10); --shadow-hard: 0 22px 70px rgba(11, 43, 29, 0.12); } body.theme-saffron { color-scheme: light; --bg: #fff7ed; --panel: #ffffff; --panel-2: #ffedd5; --text: #1f2937; --muted: rgba(31, 41, 55, 0.76); --muted-2: rgba(31, 41, 55, 0.60); --border: rgba(31, 41, 55, 0.14); --brand: #ea580c; --brand-2: #f59e0b; --good: #16a34a; --warn: #b45309; --bad: #dc2626; --shadow-soft: 0 10px 26px rgba(31, 41, 55, 0.10); --shadow-hard: 0 22px 70px rgba(31, 41, 55, 0.12); } /* ------------------------------- 3) Base typography --------------------------------- */ html { font-size: 16px; } body { font-family: var(--font-sans); line-height: 1.65; letter-spacing: 0.2px; color: var(--text); background: radial-gradient(1200px 900px at 10% 0%, rgba(125, 211, 252, 0.12), transparent 50%), radial-gradient(900px 700px at 90% 15%, rgba(167, 139, 250, 0.10), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg)); } p { margin: 0 0 var(--space-4); color: var(--muted); } h1, h2, h3, h4, h5 { margin: 0 0 var(--space-3); line-height: 1.2; color: var(--text); letter-spacing: -0.2px; } strong { color: var(--text); } small { color: var(--muted-2); } ::selection { background: rgba(125, 211, 252, 0.25); } /* ------------------------------- 4) Layout utilities --------------------------------- */ .container { width: min(var(--container), calc(100% - (var(--pad-x) * 2))); margin-inline: auto; } .section-title { font-size: clamp(1.25rem, 2.2vw, 1.65rem); } .section-subtitle { margin-top: -6px; color: var(--muted-2); } .subtle { color: var(--muted-2); } .label { color: var(--muted-2); font-weight: 600; } /* ------------------------------- 5) Skip link (accessible) --------------------------------- */ .skip-link { position: absolute; left: -9999px; top: 10px; z-index: 9999; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); color: var(--text); text-decoration: none; box-shadow: var(--shadow-soft); } .skip-link:focus { left: 12px; outline: 3px solid rgba(125, 211, 252, 0.65); outline-offset: 2px; } /* ------------------------------- 6) Header + nav --------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 65%, transparent); border-bottom: 1px solid var(--border); } .header-inner { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-4); align-items: center; padding: 14px 0; } .brand { display: flex; align-items: center; gap: var(--space-8); min-width: 0; } .brand-mark { width: 48px; height: 48px; display: flex; place-items: center; border-radius: 10%; background: linear-gradient(135deg, rgba(125, 211, 252, 0.25), rgba(167, 139, 250, 0.20)); border: 1px solid var(--border); box-shadow: var(--shadow-soft); font-weight: 800; letter-spacing: -0.4px; } .brand-text { min-width: 0; } .brand-title { font-size: 1.05rem; margin: 0; } .brand-tagline { margin: 0; font-size: 0.92rem; color: var(--muted-2); } .main-nav { display: none; flex-direction: column; gap: 12px; padding: 16px; } .nav-link { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.95rem; padding: 10px 10px; border-radius: 12px; transition: background var(--t), color var(--t), transform var(--t); } .nav-link:hover { color: var(--text); background: rgba(234, 241, 255, 0.06); } .nav-link:active { transform: translateY(1px); } .nav-link--vsl { position: relative; } .nav-link--vsl::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); opacity: 0.35; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: rgba(234, 241, 255, 0.04); color: var(--text); padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: background var(--t), transform var(--t), border var(--t); } .nav-toggle:hover { background: rgba(234, 241, 255, 0.07); } .nav-toggle:active { transform: translateY(1px); } .nav-toggle__label { font-weight: 700; font-size: 0.95rem; } @media (min-width: 980px) { .main-nav { display: inline-flex; } .nav-toggle { display: none; } } /* ------------------------------- 7) Mobile nav drawer --------------------------------- */ .mobile-nav { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); } .mobile-nav__inner { padding: 14px 0 18px; display: grid; gap: 8px; } .mobile-nav .nav-link { display: block; padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(234, 241, 255, 0.08); background: rgba(234, 241, 255, 0.03); } .mobile-nav__cta { display: grid; gap: 10px; margin-top: 10px; } /* ------------------------------- 8) Buttons --------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; border-radius: 14px; padding: 12px 16px; border: 1px solid transparent; cursor: pointer; font-weight: 800; letter-spacing: 0.2px; transition: transform var(--t), background var(--t), border var(--t), color var(--t), box-shadow var(--t); user-select: none; } .btn--block { width: 100%; } .btn--primary { color: #061018; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 12px 40px rgba(125, 211, 252, 0.18); } .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 18px 60px rgba(125, 211, 252, 0.23); } .btn--secondary { color: var(--text); background: rgba(234, 241, 255, 0.06); border-color: rgba(234, 241, 255, 0.14); } .btn--secondary:hover { background: rgba(234, 241, 255, 0.09); transform: translateY(-1px); } .btn--ghost { color: var(--text); background: transparent; border-color: rgba(234, 241, 255, 0.16); } .btn--ghost:hover { background: rgba(234, 241, 255, 0.06); } .btn:active { transform: translateY(1px); } :focus-visible { outline: 3px solid rgba(125, 211, 252, 0.65); outline-offset: 3px; } /* ------------------------------- 9) Hero --------------------------------- */ .hero { padding: var(--space-8) 0 var(--space-7); } .hero-inner { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; } .eyebrow { display: inline-block; margin-bottom: var(--space-3); font-weight: 800; font-size: 0.92rem; color: rgba(125, 211, 252, 0.92); background: rgba(125, 211, 252, 0.10); border: 1px solid rgba(125, 211, 252, 0.18); padding: 8px 12px; border-radius: 999px; } .hero-title { font-size: clamp(2rem, 4.8vw, 3.35rem); margin-bottom: var(--space-4); letter-spacing: -0.8px; } .hero-subtext { font-size: 1.05rem; color: var(--muted); max-width: 64ch; } .hero-note { margin-top: -8px; color: var(--muted-2); max-width: 70ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-4); } .trust-strip { margin-top: var(--space-5); padding: 16px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: rgba(234, 241, 255, 0.03); box-shadow: var(--shadow-soft); } .trust-strip__item { margin: 0 0 10px; color: var(--muted); } .trust-strip__item:last-child { margin-bottom: 0; } .hero-card .card { border-radius: var(--r-lg); border: 1px solid var(--border); background: linear-gradient(180deg, rgba(234, 241, 255, 0.04), rgba(234, 241, 255, 0.02)); box-shadow: var(--shadow-hard); padding: 18px; } .card-title { font-size: 1.25rem; } .card-text { color: var(--muted); margin-bottom: var(--space-4); } .card-actions { display: grid; gap: 12px; margin-bottom: var(--space-3); } .card-fineprint { margin: 0; color: var(--muted-2); font-size: 0.95rem; } @media (min-width: 980px) { .hero-inner { grid-template-columns: 1.25fr 0.75fr; gap: var(--space-7); } } /* ------------------------------- 10) Letter section --------------------------------- */ .letter { padding: 0 0 var(--space-8); } .letter-inner { border: 1px solid var(--border); background: rgba(234, 241, 255, 0.02); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 34px); box-shadow: var(--shadow-soft); } .letter-header { padding-bottom: var(--space-4); margin-bottom: var(--space-5); border-bottom: 1px solid rgba(234, 241, 255, 0.10); } .letter-h { font-size: clamp(1.2rem, 2.4vw, 1.55rem); margin-top: var(--space-6); } .letter-block:first-child .letter-h { margin-top: 0; } .letter-p { font-size: 1.02rem; max-width: 75ch; } /* ------------------------------- 11) Lists --------------------------------- */ .checklist, .bullets, .download-list { margin: 0 0 var(--space-5); padding-left: 18px; color: var(--muted); } .checklist li, .bullets li, .download-list li { margin: 0 0 10px; } .checklist li::marker { color: var(--good); } .bullets--tight li { margin-bottom: 8px; } .download-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; color: var(--text); padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(234, 241, 255, 0.12); background: rgba(234, 241, 255, 0.03); transition: transform var(--t), background var(--t), border var(--t); } .download-link:hover { background: rgba(234, 241, 255, 0.06); transform: translateY(-1px); } /* ------------------------------- 12) Case studies grid --------------------------------- */ .case-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: var(--space-4) 0 var(--space-5); } .case-card { border-radius: var(--r-md); border: 1px solid rgba(234, 241, 255, 0.12); background: rgba(234, 241, 255, 0.03); padding: 14px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); } .case-title { margin-bottom: 8px; font-size: 1.05rem; } .case-text { margin: 0; color: var(--muted); } @media (min-width: 720px) { .case-grid { grid-template-columns: 1fr 1fr; } } /* ------------------------------- 13) Intent gate styling --------------------------------- */ .intent-gate { border: 1px solid rgba(125, 211, 252, 0.22); background: radial-gradient(700px 220px at 10% 0%, rgba(125, 211, 252, 0.12), transparent 60%), radial-gradient(600px 220px at 90% 30%, rgba(167, 139, 250, 0.10), transparent 60%), rgba(234, 241, 255, 0.02); border-radius: var(--r-lg); padding: clamp(16px, 2.6vw, 26px); } .gate-check { border: 1px solid rgba(234, 241, 255, 0.12); background: rgba(234, 241, 255, 0.03); border-radius: var(--r-md); padding: 14px 14px; margin: var(--space-4) 0; } .gate-h { margin: 0 0 10px; font-size: 1.05rem; color: var(--text); } .gate-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; } /* ------------------------------- 14) Booking section --------------------------------- */ .booking .cta-row { display: grid; gap: 12px; margin: var(--space-4) 0 var(--space-5); } @media (min-width: 720px) { .booking .cta-row { grid-template-columns: 1fr 1fr; } } .info-grid { display: grid; gap: 12px; margin: var(--space-4) 0 var(--space-5); } @media (min-width: 900px) { .info-grid { grid-template-columns: 1fr 1fr 1fr; } } .info-box { border-radius: var(--r-md); border: 1px solid rgba(234, 241, 255, 0.12); background: rgba(234, 241, 255, 0.03); padding: 14px 14px; } .info-title { margin-bottom: 8px; font-size: 1.05rem; } .info-text { margin: 0; color: var(--muted); } .prep { border-radius: var(--r-md); border: 1px solid rgba(234, 241, 255, 0.12); background: rgba(234, 241, 255, 0.03); padding: 14px 14px; margin-bottom: var(--space-5); } .prep-title { margin-bottom: 10px; font-size: 1.05rem; } .legal-box { border-radius: var(--r-md); border: 1px solid rgba(251, 191, 36, 0.22); background: rgba(251, 191, 36, 0.08); padding: 14px 14px; } .legal-title { margin-bottom: 8px; font-size: 1.05rem; } .legal-text { margin: 0; color: rgba(234, 241, 255, 0.86); } /* ------------------------------- 15) FAQ (details/summary) --------------------------------- */ .faq-item { border-radius: var(--r-md); border: 1px solid rgba(234, 241, 255, 0.12); background: rgba(234, 241, 255, 0.03); padding: 12px 12px; margin: 0 0 12px; } .faq-q { cursor: pointer; font-weight: 900; color: var(--text); list-style: none; } .faq-q::-webkit-details-marker { display: none; } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .faq-item summary::after { content: "+"; font-family: var(--font-mono); font-weight: 900; opacity: 0.8; } .faq-item[open] summary::after { content: "–"; } .faq-a { padding-top: 10px; } .faq-a p { margin: 0; color: var(--muted); } /* ------------------------------- 16) Footer --------------------------------- */ .site-footer { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 70%, transparent); padding: var(--space-6) 0; } .footer-inner { display: grid; gap: var(--space-5); } .footer-title { margin: 0 0 6px; font-weight: 900; letter-spacing: -0.2px; color: var(--text); } .footer-text { margin: 0 0 8px; color: var(--muted); } .footer-links { display: flex; flex-wrap: wrap; gap: 12px; } .footer-link { text-decoration: none; color: var(--muted); font-weight: 800; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; transition: background var(--t), border var(--t), color var(--t); } .footer-link:hover { color: var(--text); background: rgba(234, 241, 255, 0.05); border-color: rgba(234, 241, 255, 0.10); } .footer-fineprint { margin: 0 0 8px; color: var(--muted-2); font-size: 0.95rem; } @media (min-width: 900px) { .footer-inner { grid-template-columns: 1.1fr 0.9fr 1fr; align-items: start; } } /* ------------------------------- 17) Motion preferences --------------------------------- */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* ------------------------------- 18) Print (optional) --------------------------------- */ @media print { .site-header, .mobile-nav, .hero-card, .btn, .nav-toggle { display: none !important; } body { background: #ffffff !important; color: #111 !important; } .letter-inner { box-shadow: none !important; border: 1px solid #ccc !important; } } .vsl-embed { margin-top: var(--space-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: rgba(234, 241, 255, 0.02); box-shadow: var(--shadow-soft); padding: 14px; } .vsl-embed wistia-player { display: block; width: 100%; border-radius: var(--r-md); overflow: hidden; } .vsl-embed-note { margin: var(--space-3) 0 0; color: var(--muted-2); font-size: 0.95rem; }