/* prototype-overrides.css
* Hand-added on top of the figma-to-web generated CSS (do not regenerate over this).
*
* Note: the subscription pricing card (.s38/.s39, g92-g106) is client-hydrated
* on the live page. Verified against the hydrated 1440px DOM: it renders between
* the badges row and the final hr (card 586x189.4). The empty SSR placeholder
* after the description stays empty even after hydration.
*/
/* ---------------------------------------------------------------------------
* Additions the Figma export was missing (requested): the site nav/menu and
* the selected product image, plus the EllieMD design-system fonts.
*
* Fonts: the generator substituted the design's canada-type-gibson for Inter.
* shared.css now points the sans stack at 'canada-type-gibson' and the serif
* stack at 'lora'; both are loaded from Ellie's Typekit kits in
* (per ellie-core/src/app/layout.tsx). Ellie brand tokens used below:
* body #333, primary #fa5b4c, primary-100 #ffe8e7, black-100 #eeeeee.
* ------------------------------------------------------------------------- */
/* EllieMD top nav — reproduces the live elliemd.com navbar (bg-white, logo
* left, right-aligned label buttons + SIGN IN / GET STARTED). Sits in the
* empty top band above section#product-info (which starts at y=136). */
.ellie-nav {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 136px; /* live --navbar-background-height:136px at lg; content stays centered */
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 0 96px; /* live: internalContainer padding-inline 96px at >=1440px */
background: #ffffff;
font-family: 'canada-type-gibson', system-ui, sans-serif;
}
.ellie-nav__logo { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: 36px; /* live: min-[1440px]:ml-9 */ }
.ellie-nav__logo img { display: block; height: 48.16px; width: auto; } /* live: logo 124x48.16 at >=64rem */
/* Everything except the logo is grouped and pushed right (navbar-right-container
* flex-1 justify-end on the live site). */
.ellie-nav__right { display: flex; align-items: center; gap: 28px; } /* live: 16px label padding + 12px container gap */
.ellie-nav__labels { display: flex; align-items: center; gap: 32px; } /* live: 16px padding-inline per label */
.ellie-nav__label {
position: relative;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: inherit;
font-size: 16px; /* live --text-sm: 16px */
font-weight: 600; /* font-semibold */
line-height: 1.42857; /* live: calc(1.25/.875) — keeps the -5px hover underline offset */
color: #333333; /* body */
text-transform: uppercase;
text-decoration: none;
}
/* Live hover: text stays #333; a 2px #079393 underline bar animates in below */
.ellie-nav__label::after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
height: 2px;
width: 0;
background-color: #079393; /* secondary */
transition: width .3s ease-in-out;
}
.ellie-nav__label:hover::after { width: 100%; }
.ellie-nav__actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; } /* live: xl:gap-6 */
.ellie-nav__btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
white-space: nowrap;
cursor: pointer;
font-family: inherit;
font-size: 16px; /* live --text-sm: 16px */
font-weight: 400;
text-transform: uppercase;
transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.ellie-nav__btn--outline { /* SIGN IN */
height: 50px;
padding: 0 20px;
background: transparent;
border: 1px solid #333333;
color: #333333;
letter-spacing: 3.2px; /* tracking-[3.20px] */
text-decoration: none;
}
/* Live SIGN IN has no hover rule — color/border stay #333 (locked via !important). */
.ellie-nav__btn--filled { /* GET STARTED */
height: 48px;
min-width: 120px;
padding: 0 20px;
background: #025b5b; /* secondary-dark */
border: 1px solid #025b5b;
color: #ffffff;
letter-spacing: 0.2em; /* tracking-ultra-wide */
}
.ellie-nav__btn--filled:hover { background: #fa5b4c; border-color: #fa5b4c; } /* primary */
/* Selected product image — the source hero frame (div.relative, 646x718.6) is
* empty in the export; fill it with the selected thumbnail (Thumbnail of 0,
* the Semax bottle) so the main product image shows, contained + centered. */
.s7 { padding-bottom: 0 !important; }
.g8 { position: relative; width: 550px; height: 518.6px; }
.hero-product-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
animation: fadeIn .4s ease-in-out forwards;
}
/* Hero image load animation (live: animate-fade-in) */
@keyframes fadeIn {
0% { opacity: .6; }
to { opacity: 1; }
}
/* ---------------------------------------------------------------------------
* Hover states / interactive semantics matching the live page (G16).
* ------------------------------------------------------------------------- */
/* Thumbnails: unselected thumbs get a grey border on hover, 200ms transition */
.s9, .s11 { transition: border-color .2s ease-in-out; cursor: pointer; }
.s11:hover { border-color: #d1d5dc; }
/* PURCHASE is a link on the live site: coral hover, no underline */
.s50 { text-decoration: none; cursor: pointer; }
.s50:hover { background-color: #fa5b4c; border-color: #fa5b4c; }
/* "Free Shipping" / "Medical Consultation Included" buttons: hover underline */
.s35 { cursor: pointer; }
.s35:hover span { text-decoration: underline; text-underline-offset: 2px; }
/* ---------------------------------------------------------------------------
* Benefit-row icons: the live page loads sanity CDN SVGs as ![]()
(downloaded into assets/). Make them block-level inside the
* 53x53 circle so they center exactly like the live flex container.
* ------------------------------------------------------------------------- */
.s24 img { display: block; width: 24px; height: 24px; }
/* ---------------------------------------------------------------------------
* Subscription pricing card — collapsible "How your subscription works"
* (live , collapsed by default).
* ------------------------------------------------------------------------- */
details.g104 { margin-top: 16px; padding-top: 4px; } /* live: mt-4 pt-1 */
.sub-chevron {
color: var(--color-cyan-18); /* live: summary text-secondary-dark, stroke=currentColor */
transition: transform .2s ease;
}
details[open] .sub-chevron { transform: rotate(180deg); }
/* Expanded body (hidden until the summary is clicked, as on the live page) */
.sub-details-body { margin-top: 12px; } /* live: mt-3 */
.sub-details-rows { display: flex; flex-direction: column; gap: 10px; } /* live: gap-2.5 */
.sub-details-row {
display: flex;
align-items: flex-start;
gap: 8px; /* live: gap-2 */
font-family: 'canada-type-gibson', system-ui, sans-serif;
font-size: 12px; /* live: text-xxs */
line-height: 1.375; /* live: leading-snug */
color: #333333; /* live: text-body */
}
.sub-details-row svg { flex: 0 0 auto; margin-top: 2px; color: #079393; } /* live: mt-0.5 text-secondary */
.sub-details-row .lbl { font-weight: 600; }
.sub-details-footer {
margin-top: 16px; /* live: mt-4 */
font-family: 'canada-type-gibson', system-ui, sans-serif;
font-size: 10px; /* live: text-[10px] */
line-height: 1.4286; /* live: inherited body calc(1.25/.875) */
font-style: italic;
color: #8d8d8e; /* live: text-black-300 */
}