/* ============================================================ ai.myhealthnwellness.com — Portal design system Direction: "Clinical clarity" — trustworthy lab/pharmacy meets a warm human guide. Ink navy + clean paper + one confident teal, with coral reserved exclusively for Elaine's presence. ============================================================ */ /* ---- Fonts (Google Fonts, loaded in with preconnect) ---- */ /* Display: "Fraunces" optical serif is the wellness cliche — avoided. Instead: Space Grotesk (characterful grotesk) for display, Inter for body/UI, IBM Plex Mono for lab-style data labels. */ :root{ /* palette */ --ink: #0d1b2a; /* deep ink navy — primary text & dark sections */ --ink-soft: #33475b; /* secondary text */ --paper: #f7f8f6; /* warm paper background */ --paper-pure: #ffffff; --line: #e2e6e1; /* hairline rules */ --teal: #0f8a7e; /* confident health teal — primary action */ --teal-deep: #0a6b61; --teal-wash: #e7f3f1; --coral: #ff6f5e; /* Elaine ONLY — her voice, her avatar ring */ --coral-deep: #e8543f; --amber: #f2b705; /* trust badges / highlights, used sparingly */ /* type scale */ --f-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --f-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem); --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem); --step-3: clamp(2rem, 1.6rem + 2vw, 3.1rem); --step-4: clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem); --maxw: 1140px; --radius: 14px; --radius-lg: 22px; --shadow: 0 1px 2px rgba(13,27,42,.05), 0 8px 30px rgba(13,27,42,.07); --shadow-lg: 0 20px 60px rgba(13,27,42,.14); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:var(--step-0); line-height:1.62; font-feature-settings:"cv02","cv03","cv04","ss01"; -webkit-font-smoothing:antialiased; } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } h1,h2,h3{ font-family:var(--f-display); font-weight:600; line-height:1.08; letter-spacing:-0.02em; margin:0 0 .4em; } h1{ font-size:var(--step-4); } h2{ font-size:var(--step-3); } h3{ font-size:var(--step-1); letter-spacing:-0.01em; } p{ margin:0 0 1rem; } a{ color:var(--teal-deep); text-underline-offset:3px; } a:hover{ color:var(--teal); } .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,4vw,32px); } .eyebrow{ font-family:var(--f-mono); font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep); margin:0 0 1rem; display:inline-flex; align-items:center; gap:.6rem; } .eyebrow::before{ content:""; width:26px; height:1px; background:var(--teal); display:inline-block; } .muted{ color:var(--ink-soft); } .center{ text-align:center; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:var(--f-body); font-weight:600; font-size:var(--step-0); padding:.85rem 1.5rem; border-radius:999px; border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; line-height:1; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--teal); color:#fff; box-shadow:0 6px 18px rgba(15,138,126,.28); } .btn-primary:hover{ background:var(--teal-deep); color:#fff; box-shadow:0 10px 26px rgba(15,138,126,.34); } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--ink); color:var(--ink); } .btn-coral{ background:var(--coral); color:#fff; box-shadow:0 6px 18px rgba(255,111,94,.32); } .btn-coral:hover{ background:var(--coral-deep); color:#fff; } .btn-lg{ padding:1.05rem 1.9rem; font-size:var(--step-1); } /* ---------- Header ---------- */ .site-header{ position:sticky; top:0; z-index:60; background:rgba(247,248,246,.82); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line); } .site-header .wrap{ display:flex; align-items:center; gap:1.2rem; height:66px; } .brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--f-display); font-weight:600; font-size:1.06rem; color:var(--ink); text-decoration:none; letter-spacing:-.01em; } .brand .dot{ width:12px; height:12px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px var(--teal-wash); } .brand small{ display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:400; } .nav{ margin-left:auto; display:flex; align-items:center; gap:1.4rem; } .nav a{ color:var(--ink-soft); text-decoration:none; font-size:var(--step--1); font-weight:500; } .nav a:hover{ color:var(--ink); } .nav .btn{ padding:.6rem 1.1rem; } .nav-toggle{ display:none; } @media (max-width:860px){ .nav a:not(.btn){ display:none; } } /* ---------- Disclosure ribbon (compliance, always visible) ---------- */ .disclosure{ background:var(--ink); color:#cdd6df; font-size:.74rem; font-family:var(--f-mono); letter-spacing:.02em; text-align:center; padding:.4rem 1rem; line-height:1.4; } .disclosure strong{ color:#fff; } /* ---------- Hero ---------- */ .hero{ position:relative; overflow:hidden; padding:clamp(2.4rem,5vw,4.5rem) 0 clamp(2rem,4vw,3rem); } .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.2rem); align-items:center; } @media (max-width:940px){ .hero-grid{ grid-template-columns:1fr; } } .hero h1 .accent{ color:var(--teal); } .hero .lede{ font-size:var(--step-1); color:var(--ink-soft); max-width:34ch; } .hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem; } .hero-proof{ display:flex; gap:1.5rem; margin-top:2rem; flex-wrap:wrap; } .hero-proof div{ font-family:var(--f-mono); font-size:.76rem; color:var(--ink-soft); letter-spacing:.02em; } .hero-proof b{ display:block; font-family:var(--f-display); font-size:1.5rem; color:var(--ink); letter-spacing:-.02em; } /* ---------- Elaine live panel (the signature element) ---------- */ .elaine-panel{ background:var(--paper-pure); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; display:flex; flex-direction:column; max-height:560px; } .elaine-head{ display:flex; align-items:center; gap:.75rem; padding:1rem 1.2rem; border-bottom:1px solid var(--line); } .elaine-ava{ width:44px; height:44px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px var(--coral); background:var(--coral); } .elaine-head .who{ font-family:var(--f-display); font-weight:600; font-size:1rem; } .elaine-head .status{ font-size:.72rem; color:var(--teal-deep); font-family:var(--f-mono); display:flex; align-items:center; gap:.35rem; } .elaine-head .status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px var(--teal-wash); } .elaine-msgs{ padding:1.1rem 1.2rem; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:.7rem; min-height:220px; } .bi-row{ display:flex; gap:.6rem; align-items:flex-end; } .bi-row.bi-user{ flex-direction:row-reverse; } .bi-mav img{ width:30px; height:30px; border-radius:50%; box-shadow:0 0 0 2px var(--coral); } .bi-bubble{ max-width:78%; padding:.7rem .95rem; border-radius:16px; font-size:.95rem; line-height:1.5; background:var(--teal-wash); color:var(--ink); border-bottom-left-radius:4px; } .bi-user .bi-bubble{ background:var(--ink); color:#f2f5f4; border-bottom-left-radius:16px; border-bottom-right-radius:4px; } .bi-bubble p{ margin:0 0 .5rem; } .bi-bubble p:last-child{ margin:0; } .bi-bubble a{ color:var(--teal-deep); font-weight:600; } .bi-cursor{ color:var(--coral); animation:blink 1s steps(2) infinite; } @keyframes blink{ 50%{ opacity:0; } } .bi-typing{ display:inline-flex; gap:4px; padding:.2rem 0; } .bi-typing span{ width:7px; height:7px; border-radius:50%; background:var(--coral); animation:bounce 1.2s infinite; } .bi-typing span:nth-child(2){ animation-delay:.15s; } .bi-typing span:nth-child(3){ animation-delay:.3s; } @keyframes bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } } .elaine-chips{ display:flex; flex-wrap:wrap; gap:.5rem; padding:0 1.2rem .6rem; } .chip{ background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:.5rem .9rem; font-size:.82rem; cursor:pointer; color:var(--ink); font-weight:500; transition:border-color .12s, background .12s; font-family:var(--f-body); } .chip:hover{ border-color:var(--teal); background:var(--teal-wash); } .elaine-input{ display:flex; gap:.5rem; padding:.9rem 1.2rem; border-top:1px solid var(--line); } .elaine-input input{ flex:1; border:1px solid var(--line); border-radius:999px; padding:.75rem 1.1rem; font-family:var(--f-body); font-size:.95rem; background:var(--paper); color:var(--ink); } .elaine-input input:focus{ outline:2px solid var(--teal); outline-offset:1px; border-color:transparent; } .elaine-send{ border:none; background:var(--teal); color:#fff; border-radius:50%; width:44px; height:44px; cursor:pointer; font-size:1.1rem; display:grid; place-items:center; flex:0 0 auto; } .elaine-send:hover{ background:var(--teal-deep); } /* inline lead form inside chat */ .lead-form{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:1rem; margin:.4rem 0; } .lead-form label{ display:block; font-size:.78rem; font-weight:600; margin:.5rem 0 .2rem; color:var(--ink-soft); } .lead-form input, .lead-form select{ width:100%; padding:.6rem .8rem; border:1px solid var(--line); border-radius:10px; font-family:var(--f-body); font-size:.9rem; } .lead-form .btn{ width:100%; margin-top:.8rem; } /* product card rendered from [PRODUCT: ...] */ .pcard{ display:flex; gap:.7rem; align-items:center; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--coral); border-radius:12px; padding:.7rem .9rem; margin:.5rem 0; } .pcard .emoji{ font-size:1.4rem; } .pcard .pc-body{ font-size:.86rem; } .pcard .pc-body b{ display:block; } /* ---------- Sections ---------- */ section{ padding:clamp(3rem,7vw,5.5rem) 0; } .section-dark{ background:var(--ink); color:#e7edf2; } .section-dark h2{ color:#fff; } .section-dark .muted{ color:#9fb0bf; } .section-head{ max-width:60ch; margin-bottom:2.6rem; } /* steps */ .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; } @media (max-width:820px){ .steps{ grid-template-columns:1fr; } } .step{ background:var(--paper-pure); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow); position:relative; } .step .num{ font-family:var(--f-mono); font-size:.8rem; color:var(--teal-deep); letter-spacing:.1em; } .step h3{ margin-top:.5rem; } /* trust grid */ .trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.08); border-radius:var(--radius); overflow:hidden; } @media (max-width:820px){ .trust{ grid-template-columns:1fr; } } .trust .cell{ background:var(--ink); padding:1.6rem; } .trust .cell b{ font-family:var(--f-display); color:#fff; font-size:1.15rem; display:block; margin-bottom:.3rem; } .trust .cell .k{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); } /* value cards */ .values{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; } @media (max-width:720px){ .values{ grid-template-columns:1fr; } } .value{ display:flex; gap:.9rem; padding:1.2rem 1.3rem; background:var(--paper-pure); border:1px solid var(--line); border-radius:var(--radius); } .value .ic{ flex:0 0 auto; width:40px; height:40px; border-radius:10px; background:var(--teal-wash); color:var(--teal-deep); display:grid; place-items:center; font-size:1.2rem; } .value h3{ font-size:1.02rem; margin-bottom:.25rem; } .value p{ font-size:.9rem; color:var(--ink-soft); margin:0; } /* CTA band */ .cta-band{ background:linear-gradient(135deg,var(--teal-deep),var(--teal)); color:#fff; border-radius:var(--radius-lg); padding:clamp(2rem,5vw,3.4rem); text-align:center; box-shadow:var(--shadow-lg); } .cta-band h2{ color:#fff; } .cta-band .btn-coral{ background:#fff; color:var(--teal-deep); } .cta-band .btn-coral:hover{ background:#fff; color:var(--teal); box-shadow:0 12px 30px rgba(0,0,0,.2); } .cta-band .fine{ font-size:.76rem; opacity:.85; margin-top:1rem; font-family:var(--f-mono); } /* FAQ */ .faq details{ border-bottom:1px solid var(--line); padding:1.1rem 0; } .faq summary{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; color:var(--teal); font-size:1.4rem; font-weight:400; transition:transform .2s; } .faq details[open] summary::after{ transform:rotate(45deg); } .faq details p{ margin:.8rem 0 0; color:var(--ink-soft); font-size:.95rem; } /* region selector */ .region-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; margin-top:1.4rem; } .region-grid a{ display:block; padding:.9rem 1rem; background:var(--paper-pure); border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); font-weight:600; font-size:.92rem; transition:border-color .12s, transform .12s; } .region-grid a:hover{ border-color:var(--teal); transform:translateY(-2px); } .region-grid a span{ display:block; font-family:var(--f-mono); font-size:.68rem; color:var(--ink-soft); font-weight:400; letter-spacing:.04em; margin-top:.15rem; } /* ---------- Footer ---------- */ .site-footer{ background:var(--ink); color:#9fb0bf; padding:3rem 0 2rem; font-size:.88rem; } .site-footer a{ color:#cdd6df; text-decoration:none; } .site-footer a:hover{ color:#fff; } .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; margin-bottom:2rem; } @media (max-width:720px){ .footer-grid{ grid-template-columns:1fr; } } .footer-grid h4{ color:#fff; font-family:var(--f-display); font-size:.95rem; margin:0 0 .8rem; } .footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; } .footer-legal{ border-top:1px solid rgba(255,255,255,.1); padding-top:1.4rem; font-size:.76rem; line-height:1.6; color:#7f92a3; } /* ---------- Sticky mobile CTA ---------- */ .sticky-cta{ position:fixed; bottom:0; left:0; right:0; z-index:70; background:var(--paper-pure); border-top:1px solid var(--line); padding:.7rem 1rem; display:none; gap:.6rem; box-shadow:0 -6px 20px rgba(13,27,42,.08); } .sticky-cta .btn{ flex:1; } @media (max-width:860px){ .sticky-cta{ display:flex; } body{ padding-bottom:74px; } } /* utility reveal on scroll — safe by default. Only hidden once JS marks the document ready for animation (.js-anim), so content is never invisible if JS fails to load. */ .js-anim .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; } .js-anim .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .js-anim .reveal{ opacity:1; transform:none; } }