/* ========================================================================== Upside Health Research Network + Humanly AI Standalone stylesheet for the static site (GitHub + Vercel). Light theme only — deliberate single-theme commitment. Do not add dark mode. Two brand systems on one site, kept visually distinct: Upside pages (Home, Research, Training, About, Donate, Contact) -> magenta to purple #DD418F -> #522B8A Humanly AI pages (/humanly-ai/ and /humanly-ai/podcast/) -> Ember gradient #E87722 -> #C0392B A single class on ("brand-upside" or "brand-humanly") swaps the --brand-* slots, so every component below inherits the right brand. ========================================================================== */ /* ---- Tokens ---- */ :root { --warm-white:#FBF8F4; --pure-white:#FFFFFF; --near-black:#2A2A2A; --body-text:#3D3D3D; --muted-text:#6B6B6B; --hairline:#E8E2DA; --upside-magenta:#DD418F; --upside-purple:#522B8A; --ember-orange:#E87722; --ember-red:#C0392B; /* Default brand = Upside. Overridden by body.brand-humanly. */ --brand-start:var(--upside-magenta); --brand-end:var(--upside-purple); --brand-solid:var(--upside-purple); --brand-gradient:linear-gradient(135deg,var(--brand-start) 0%,var(--brand-end) 100%); --font-display:'Montserrat',system-ui,-apple-system,sans-serif; --font-body:'Open Sans',system-ui,-apple-system,sans-serif; --step--1:clamp(0.875rem,0.84rem + 0.18vw,0.95rem); --step-0:clamp(1rem,0.96rem + 0.22vw,1.125rem); --step-1:clamp(1.25rem,1.16rem + 0.45vw,1.5rem); --step-2:clamp(1.5rem,1.33rem + 0.85vw,2rem); --step-3:clamp(1.875rem,1.6rem + 1.4vw,2.75rem); --step-4:clamp(2.25rem,1.8rem + 2.2vw,3.75rem); --space-xs:0.5rem; --space-sm:1rem; --space-md:2rem; --space-lg:3.5rem; --space-xl:6rem; --radius:14px; --radius-sm:8px; --shadow:0 2px 4px rgba(42,42,42,0.04),0 12px 32px rgba(42,42,42,0.07); --measure:68ch; } body.brand-humanly { --brand-start:var(--ember-orange); --brand-end:var(--ember-red); --brand-solid:var(--ember-orange); } /* ---- Reset / base ---- */ *,*::before,*::after { box-sizing:border-box; } * { margin:0; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body { background:var(--warm-white); color:var(--body-text); font-family:var(--font-body); font-size:var(--step-0); line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img { max-width:100%; height:auto; display:block; } h1,h2,h3,h4 { font-family:var(--font-display); color:var(--near-black); line-height:1.15; letter-spacing:-0.015em; font-weight:700; } h1{ font-size:var(--step-4); } h2{ font-size:var(--step-3); } h3{ font-size:var(--step-2); } h4{ font-size:var(--step-1); } p,li{ max-width:var(--measure); } a{ color:var(--brand-solid); text-decoration-thickness:1px; text-underline-offset:2px; } a:hover{ color:var(--brand-end); } :where(a,button,input,textarea,select,summary):focus-visible{ outline:3px solid var(--brand-solid); outline-offset:2px; border-radius:3px; } /* ---- Header / nav ---- */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(251,248,244,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--hairline); } .nav{ width:min(1140px,100% - 2.5rem); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); min-height:72px; } .nav__logo{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--near-black); text-decoration:none; letter-spacing:-0.02em; display:inline-flex; align-items:center; } .nav__logo:hover{ color:var(--near-black); } .nav__logo img{ height:40px; width:auto; display:block; } /* Humanly AI primary logo (official SVG). Used in the hero of Humanly AI pages. */ .hai-logo{ width:min(340px,72%); height:auto; display:block; margin-bottom:var(--space-sm); } .nav__menu{ display:flex; align-items:center; gap:var(--space-md); list-style:none; } .nav__menu a{ font-family:var(--font-display); font-weight:600; font-size:var(--step-0); color:var(--near-black); text-decoration:none; } .nav__menu a:hover{ color:var(--brand-solid); } .nav__toggle{ display:none; background:none; border:0; cursor:pointer; font-size:1.5rem; color:var(--near-black); } @media (max-width:820px){ .nav__toggle{ display:block; } .nav__menu{ position:absolute; top:72px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background:var(--warm-white); border-bottom:1px solid var(--hairline); padding:var(--space-sm) 1.25rem; display:none; } .nav__menu.is-open{ display:flex; } .nav__menu li{ width:100%; } .nav__menu a{ display:block; padding:0.75rem 0; width:100%; } } /* ---- Footer ---- */ .site-footer{ background:var(--near-black); color:#D9D3CB; padding-block:var(--space-lg); margin-top:var(--space-xl); } .site-footer .u-shell{ display:grid; gap:var(--space-md); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } .site-footer a{ color:#F3EEE7; } .site-footer h4{ color:#fff; margin-bottom:var(--space-xs); } .site-footer p, .site-footer li{ font-size:var(--step--1); max-width:none; } .site-footer ul{ list-style:none; } .site-footer li{ margin-bottom:0.35rem; } .site-footer__legal{ grid-column:1/-1; border-top:1px solid #45403A; padding-top:var(--space-sm); font-size:var(--step--1); color:#A69F95; } /* ---- Layout utilities ---- */ .u-band{ padding-block:var(--space-xl); } .u-band--white{ background:var(--pure-white); } .u-band--warm{ background:var(--warm-white); } .u-shell{ width:min(1140px,100% - 2.5rem); margin-inline:auto; } .u-shell--narrow{ width:min(760px,100% - 2.5rem); margin-inline:auto; } .u-center{ text-align:center; } .u-center p{ margin-inline:auto; } .u-stack > * + *{ margin-top:var(--space-sm); } .u-cols{ display:grid; gap:var(--space-md); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } /* ---- Brand devices ---- */ .u-highlight{ background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; } @supports not (background-clip:text){ .u-highlight{ color:var(--brand-solid); background:none; } } .u-eyebrow{ font-family:var(--font-display); font-size:var(--step--1); font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--brand-solid); margin-bottom:var(--space-xs); } .u-lede{ font-size:var(--step-1); line-height:1.55; color:var(--near-black); } /* ---- Buttons ---- */ .u-btn{ display:inline-block; font-family:var(--font-display); font-weight:600; font-size:var(--step-0); padding:0.85em 1.9em; border-radius:var(--radius-sm); text-decoration:none; border:2px solid transparent; transition:transform 0.15s ease,box-shadow 0.15s ease; cursor:pointer; } .u-btn--primary{ background:var(--brand-gradient); color:#fff; } .u-btn--primary:hover{ color:#fff; transform:translateY(-1px); box-shadow:var(--shadow); } .u-btn--ghost{ background:transparent; color:var(--brand-solid); border-color:var(--brand-solid); } .u-btn--ghost:hover{ background:var(--brand-solid); color:#fff; } .u-btn + .u-btn{ margin-left:0.5rem; } @media (prefers-reduced-motion:reduce){ .u-btn{ transition:none; } .u-btn--primary:hover{ transform:none; } } /* ---- Components ---- */ .u-stat{ background:var(--pure-white); border:1px solid var(--hairline); border-radius:var(--radius); padding:var(--space-md); border-top:4px solid var(--brand-solid); } .u-stat__figure{ font-family:var(--font-display); font-size:var(--step-3); font-weight:800; line-height:1; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; } .u-stat__label{ font-size:var(--step-0); color:var(--near-black); margin-top:var(--space-xs); font-weight:600; } .u-stat__note{ font-size:var(--step--1); color:var(--muted-text); margin-top:var(--space-xs); } .u-stat__note a{ color:var(--muted-text); } .u-refs{ font-size:var(--step--1); color:var(--muted-text); padding-left:1.5rem; } .u-refs li{ margin-bottom:var(--space-sm); max-width:none; } .u-refs li:target{ background:#FFF6E8; outline:2px solid var(--ember-orange); outline-offset:4px; border-radius:3px; } .u-faq details{ border-bottom:1px solid var(--hairline); } .u-faq summary{ font-family:var(--font-display); font-weight:600; font-size:var(--step-1); color:var(--near-black); padding:var(--space-sm) 2.5rem var(--space-sm) 0; cursor:pointer; list-style:none; position:relative; } .u-faq summary::-webkit-details-marker{ display:none; } .u-faq summary::after{ content:'+'; position:absolute; right:0.5rem; top:50%; transform:translateY(-50%); font-size:1.5em; font-weight:400; color:var(--brand-solid); } .u-faq details[open] summary::after{ content:'\2013'; } .u-faq details > *:not(summary){ padding-bottom:var(--space-sm); max-width:var(--measure); } .u-notify{ background:var(--pure-white); border:1px solid var(--hairline); border-left:5px solid var(--brand-solid); border-radius:var(--radius); padding:var(--space-md); } .u-notify__disclosure{ font-size:var(--step--1); color:var(--muted-text); margin-top:var(--space-sm); } .u-cta{ background:var(--brand-gradient); color:#fff; border-radius:var(--radius); padding:var(--space-lg) var(--space-md); text-align:center; } .u-cta h2,.u-cta p{ color:#fff; } .u-cta p{ margin-inline:auto; } .u-cta .u-btn{ background:#fff; color:var(--brand-solid); } .u-cta .u-btn:hover{ background:var(--warm-white); color:var(--brand-end); } .u-quote{ font-family:var(--font-display); font-size:var(--step-2); line-height:1.3; color:var(--near-black); border-left:5px solid var(--brand-solid); padding-left:var(--space-md); margin-block:var(--space-lg); max-width:42ch; } /* ---- Forms ---- */ .u-form{ display:grid; gap:var(--space-sm); max-width:560px; } .u-form label{ font-family:var(--font-display); font-weight:600; font-size:var(--step--1); color:var(--near-black); display:block; margin-bottom:0.35rem; } .u-form input,.u-form select,.u-form textarea{ width:100%; font-family:var(--font-body); font-size:var(--step-0); padding:0.7em 0.9em; border:1px solid var(--hairline); border-radius:var(--radius-sm); background:var(--pure-white); color:var(--body-text); } .u-form textarea{ min-height:140px; resize:vertical; } /* Portrait / headshot */ .u-portrait{ max-width:280px; width:100%; border-radius:var(--radius); box-shadow:var(--shadow); border-bottom:4px solid var(--brand-solid); } .u-people{ display:grid; gap:var(--space-md); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .u-person{ text-align:center; } .u-person img{ max-width:180px; width:100%; border-radius:50%; aspect-ratio:1/1; object-fit:cover; box-shadow:var(--shadow); margin-inline:auto; } .u-person .u-person__name{ font-family:var(--font-display); font-weight:700; color:var(--near-black); margin-top:var(--space-sm); } .u-person .u-person__role{ font-size:var(--step--1); color:var(--muted-text); } /* ---- Motion ---- Scroll reveal is gated on .js (added by site.js) so no-JS users always see content, and fully disabled under prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference){ .js main > section{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; } .js main > section.is-visible{ opacity:1; transform:none; } } /* Subtle hover lift on cards */ .u-stat{ transition:transform .18s ease, box-shadow .18s ease; } .u-stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow); } .u-person img{ transition:transform .18s ease, box-shadow .18s ease; } .u-person img:hover{ transform:translateY(-3px); } @media (prefers-reduced-motion: reduce){ .u-stat:hover, .u-person img:hover{ transform:none; } } /* ---- Thematic light visuals ---- */ /* Vital-sign pulse line — echoes "Connection: the missing vital sign", drawn in the Upside kit rainbow (relationships turn life vivid + colorful). A pulse of light then travels the line on a loop. Rainbow = Upside pages; on Humanly AI pages use the ember variant instead when rolling out. */ .u-pulse{ width:min(460px,90%); margin-top:var(--space-md); } .u-pulse svg{ width:100%; height:auto; display:block; overflow:visible; } .u-pulse .pulse-base{ stroke-dasharray:1000; stroke-dashoffset:1000; } .u-pulse .pulse-travel{ stroke-dasharray:46 954; stroke-dashoffset:1000; opacity:0; filter:drop-shadow(0 0 3px rgba(221,65,143,0.85)); } @media (prefers-reduced-motion: no-preference){ .u-pulse .pulse-base{ animation:pulse-draw 2s ease .25s forwards; } .u-pulse .pulse-travel{ animation:pulse-travel 3s linear 2.1s infinite; } } @media (prefers-reduced-motion: reduce){ .u-pulse .pulse-base{ stroke-dasharray:none; stroke-dashoffset:0; } .u-pulse .pulse-travel{ display:none; } } @keyframes pulse-draw{ to{ stroke-dashoffset:0; } } @keyframes pulse-travel{ 0%{ opacity:0; stroke-dashoffset:1000; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ opacity:0; stroke-dashoffset:0; } } /* Soft brand glow behind a band — warmth + depth, decorative only. */ .u-glow{ position:relative; overflow:hidden; } .u-glow::before{ content:''; position:absolute; width:540px; height:540px; border-radius:50%; top:-210px; right:-170px; pointer-events:none; z-index:0; background:radial-gradient(circle, color-mix(in srgb, var(--brand-solid) 13%, transparent), transparent 72%); } .u-glow--left::before{ right:auto; left:-170px; top:auto; bottom:-210px; } .u-glow > *{ position:relative; z-index:1; } /* Slim rainbow divider — a delicate transition between sections. */ .u-divider{ display:flex; justify-content:center; padding-block:var(--space-md); } .u-divider span{ display:block; width:min(420px,72%); height:3px; border-radius:3px; opacity:.75; background:linear-gradient(90deg,#E6CC15,#EC7F1F,#DD418F,#2568AE,#522B8A); } /* Ember divider variant — for Humanly AI pages. */ .u-divider--ember span{ background:linear-gradient(90deg, var(--ember-orange), var(--ember-red)); } /* Hero with contrast: warm cream base + faint rainbow-tinted corner glows. */ .u-hero{ position:relative; overflow:hidden; background: radial-gradient(85% 70% at 12% 6%, color-mix(in srgb, var(--upside-yellow) 18%, transparent), transparent 60%), radial-gradient(90% 80% at 92% 92%, color-mix(in srgb, var(--upside-magenta) 15%, transparent), transparent 60%), radial-gradient(70% 60% at 62% 45%, color-mix(in srgb, var(--upside-blue) 9%, transparent), transparent 66%), linear-gradient(160deg, #FCEEDF 0%, var(--warm-white) 58%); } .u-hero > *{ position:relative; z-index:1; } /* Ember-tinted hero for Humanly AI pages. */ .brand-humanly .u-hero{ background: radial-gradient(85% 70% at 12% 6%, color-mix(in srgb, var(--ember-orange) 16%, transparent), transparent 60%), radial-gradient(90% 80% at 92% 92%, color-mix(in srgb, var(--ember-red) 14%, transparent), transparent 60%), linear-gradient(160deg, #FCEADF 0%, var(--warm-white) 58%); } /* Media row: a graphic beside text, stacks on mobile. */ .u-media{ display:grid; gap:var(--space-lg); align-items:center; } .u-media__img{ width:min(280px,66%); height:auto; margin-inline:auto; } @media (min-width:760px){ .u-media{ grid-template-columns:auto 1fr; } .u-media__img{ width:270px; margin:0; } } /* The tree gently sways, like it's alive. */ @media (prefers-reduced-motion: no-preference){ .u-media__img{ animation:tree-sway 6s ease-in-out infinite; } } @keyframes tree-sway{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } } .u-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }