/* ========================================================================== Institute of Health Men's — Hims-derived brand layer Load AFTER ims-v2.css. Overrides the token layer only; every component in ims-v2.css re-themes through it. Palette read from live computed styles on hims.com (10 Aug 2026). Sibling system to the women's brand (Hers-derived): identical shape language (48px pills, 24px cards), opposite temperature. CONTRAST, computed, not eyeballed: amber #FFC671 on bark #453421 ........ 7.69:1 PASS AAA-large / AA bark #453421 on amber #FFC671 ....... 7.69:1 PASS <- the CTA, their own pairing white #FFFFFF on amber #FFC671 ........ 1.55:1 FAIL. Never do this. white #FFFFFF on bark #453421 ...... 11.90:1 PASS AAA sand #D9C3A5 on bark #453421 ....... 8.40:1 PASS AAA <- body copy on dark clay #B98267 on bark #453421 ....... 4.702:1 PASS AA (large + UI only) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..900&display=swap'); :root { /* ======================================================================= Re-sampled from hims.com by SCREEN AREA rather than element count (10 Aug 2026). The first pass counted elements, which over-weights small chips and produced a cool navy system. Weighted by area, Hims is a WARM, earthy palette and nothing else: dark brown, cream, amber and clay. The slate blue that showed up in the raw sample was image-overlay chrome, not a brand surface, and has been removed entirely. #453421 warm dark brown ..... 267% of viewport area #B98267 terracotta / clay ... 108% #FBF8F5 warm off-white ...... 76% #F5F0E8 cream ............... 32% Decisive detail: their amber CTA renders color: rgb(69,52,33), i.e. brown type on amber, not navy. That single fact sets the whole temperature. ======================================================================= */ /* ---------- signature ------------------------------------------------ */ --amber: #FFC671; /* Hims' warm signature, confirmed as CTA bg */ --amber-hover: #F0B25C; --on-amber: #453421; /* their own CTA foreground. 7.69:1 on amber */ /* ---------- warm darks ------------------------------------------------ */ --bark: #453421; /* the real base surface */ --bark-deep: #2E2316; /* deeper sections */ --clay: #B98267; /* terracotta accent */ --steel: var(--clay); /* alias: old refs resolve warm, no blue */ --sand: #D9C3A5; /* muted warm mid-tone, 8.4:1 on bark */ /* Back-compat aliases: the component layers were written against navy names. Re-pointing them here re-themes every page without touching six files, and keeps one source of truth for the palette. */ --navy: var(--bark); --navy-deep: var(--bark-deep); --steel-pale: var(--sand); /* body text on dark: 8.4:1 on bark */ --bronze: #8A5A2B; /* ---------- warm neutrals --------------------------------------------- */ --ink-solid: #2A2118; /* warm near-black, not grey */ --wash: #F5F0E8; /* their cream */ --wash-2: #FBF8F5; /* their warm off-white */ --hairline: rgba(69,52,33,.16); --hairline-soft: rgba(69,52,33,.08); /* ======================================================================= Remap the ims-v2 tokens. Everything downstream re-themes for free. ======================================================================= */ --brand: var(--amber); --brand-hover: var(--amber-hover); --brand-bright: var(--amber); --brand-deep: var(--navy); --brand-magenta: var(--navy); /* panel headers: white on navy 16.55:1 */ --ink: var(--navy-deep); --plum: var(--navy); --plum-2: var(--clay); --surface: #ffffff; --surface-2: var(--wash); --surface-3: var(--wash-2); --line: var(--hairline-soft); --text: var(--ink-solid); --text-muted: rgba(0,0,0,.64); --text-on-dark: #ffffff; --text-on-dark-2: var(--steel-pale); --ok: #2E6B4F; --warn: #8A5A12; --danger: #A33327; /* ---------- type ------------------------------------------------------ */ /* Hims ships a proprietary face (CareSans). Inter is the closest widely available grotesque: same neutral, slightly technical register. */ --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --f-display: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 28px; --t-2xl: 40px; --t-hero: clamp(34px, 5vw, 57px); /* ---------- shape — matched to the women's build ---------------------- */ --r-sm: 12px; --r-md: 24px; --r-lg: 24px; --r-full: 48px; --e-1: 0 1px 2px rgba(6,26,36,.05); --e-2: 0 2px 8px rgba(6,26,36,.07); --e-3: 0 12px 40px rgba(6,26,36,.12); /* Glass tokens live in ims-glass.css, which loads after this file and would override anything set here. Retuned for navy at source rather than duplicated. */ --glass-dark-edge: rgba(255,255,255,.18); } /* ========================================================================= Structural overrides — rules that assumed white-on-brand. ========================================================================= */ .btn { background: var(--amber); color: var(--on-amber); /* 10.14:1 */ font-weight: 700; border-radius: var(--r-full); box-shadow: none; border: 2px solid transparent; letter-spacing: .01em; } .btn:hover { background: var(--amber-hover); color: var(--on-amber); box-shadow: var(--e-2); } .btn small { color: var(--on-amber); opacity: .76; } /* a CTA is not a body link: this is the bug that cost a day on the women's build. Dark-context anchor rules outrank .btn at equal specificity, so the label renders amber-on-amber and only appears on hover. Fixed explicitly. */ a.btn, .sec-dark a.btn, .glass-dark a.btn, footer.site a.btn, .marquee-wrap a.btn, .conf-bar a.btn, .sticky-bar a.btn { color: var(--on-amber); } .btn-ghost { background: transparent; color: var(--ink-solid); border: 1px solid var(--hairline); font-weight: 600; } .btn-ghost:hover { background: var(--ink-solid); color: #fff; border-color: var(--ink-solid); } .sec-dark .btn-ghost, .glass-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.30); } .sec-dark a.btn-ghost, .glass-dark a.btn-ghost { color: #fff; } .sec-dark .btn-ghost:hover, .glass-dark .btn-ghost:hover { background: var(--amber); color: var(--on-amber); border-color: var(--amber); } .sec-dark a.btn-ghost:hover, .glass-dark a.btn-ghost:hover { color: var(--on-amber); } /* ========================================================================== SECTION BANDS hims.com is not one background with cards on it. It is a sequence of large full-bleed colour bands, sampled on the live site as roughly: white -> cream -> #453421 brown -> ... That alternation is what makes the page feel like it changes as you scroll. .sec-dark is the brown band; Every band here is warm: white, cream and brown. No blue anywhere. ========================================================================== */ /* dark sections — warm brown, with an amber wash */ .sec-dark { background: radial-gradient(900px 420px at 50% -10%, rgba(255,198,113,.18), transparent 62%), linear-gradient(180deg, #56422A 0%, var(--bark-deep) 100%); } .sec-dark .eyebrow, .glass-dark .eyebrow, .chrome .eyebrow { color: var(--amber); } .eyebrow { color: var(--navy); letter-spacing: .1em; font-weight: 700; text-transform: uppercase; } /* ========================================================================== DISPLAY TYPE — bold, direct response. The brief is a WarriorBabe-density sales page, so display type is heavy and underlined, not the light editorial weight hims.com runs. Hims supplies the PALETTE here, not the typographic voice. ========================================================================== */ .display { font-family: var(--f-display); font-style: normal; font-weight: 800; text-transform: none; letter-spacing: -.025em; line-height: 1.0; background: none; -webkit-background-clip: initial; background-clip: initial; } .display-bar { font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; } h1.hero { font-weight: 800; letter-spacing: -.03em; line-height: 1.04; } h1.hero em { color: var(--amber); font-style: normal; font-weight: 800; } h2.title { font-weight: 800; letter-spacing: -.025em; line-height: 1.08; } h3.sub { font-weight: 700; letter-spacing: -.01em; } h1,h2,h3,h4 { font-weight: 700; } /* the operative word carries the colour */ .tone { color: var(--bronze); font-weight: inherit; } .sec-dark .tone { color: var(--amber); } /* panel headers — white on navy (16.55:1) */ .panel .head, .card-head { background: var(--navy); color: #fff; } .panel .head h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.015em; } .card { border-radius: var(--r-card, 24px); border: 1px solid var(--hairline-soft); box-shadow: var(--e-1); } .offer { border: 1px solid var(--hairline); border-radius: 24px; box-shadow: var(--e-2); } .offer .price { font-family: var(--f-display); font-weight: 800; letter-spacing: -.03em; } .offer .save { background: var(--amber); color: var(--on-amber); font-weight: 700; } .step .n { background: var(--amber); color: var(--on-amber); font-family: var(--f-display); font-weight: 800; } .benefit .ic { background: var(--wash); color: var(--navy); } .appt .av { background: var(--amber); color: var(--on-amber); } .pf-problem { background: #FBF2F0; border-left-color: var(--danger); } .pf-fix { background: var(--wash); border-left-color: var(--ok); } .list-ok li .icon { color: var(--ok); } .sticky-bar { color: var(--ink-solid); border-top: 1px solid rgba(255,255,255,.85); } .sticky-bar .price { color: var(--ink-solid); } .countdown .n { font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; } .marquee-wrap { background: var(--navy); } .marquee .dot { color: var(--amber); } footer.site { background: var(--navy-deep); } .progress i.on { background: var(--amber); } /* body links: amber on white is 1.55:1, so generic anchors wear navy on light */ a { color: var(--navy); } .sec-dark a, .glass-dark a, footer.site a, .marquee-wrap a, .conf-bar a { color: var(--amber); } .field input, .field select { border-radius: var(--r-sm); border-color: var(--hairline); } .field input:focus-visible, .field select:focus-visible { border-color: var(--navy); } :focus-visible { outline-color: var(--navy); } /* ========================================================================= Men's-specific components ========================================================================= */ /* the logo lockup */ .ioh-logo { display:inline-flex; flex-direction:column; align-items:center; text-decoration:none; line-height:1.05; } .ioh-logo .mark { font-size:11px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:#fff; } .ioh-logo .mens { font-family:var(--f-display); font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--amber); } .ioh-logo.on-light .mark { color: var(--navy); } .ioh-logo.on-light .mens { color: var(--navy); } .ioh-logo .ph { font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); margin-top:2px; } /* highlight + underline, the direct-response marks */ .hl { background: var(--amber); color: var(--on-amber); padding: 0 .18em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .u { font-style: normal; text-decoration: underline; text-decoration-color: var(--steel); text-decoration-thickness: .13em; text-underline-offset: .14em; text-decoration-skip-ink: none; } /* the value-stack line item, MovesMethod pattern */ .stack-row { display:flex; gap:var(--s-4); align-items:flex-start; padding:var(--s-4) 0; border-bottom:1px solid var(--line); } .stack-row:last-child { border-bottom:0; } .stack-row .val { flex:none; font-weight:800; font-size:var(--t-sm); color:var(--navy); background:var(--wash); border-radius:var(--r-full); padding:4px 12px; white-space:nowrap; } .stack-row h4 { margin:0 0 4px; font-size:var(--t-md); font-weight:700; } .stack-row p { margin:0; font-size:var(--t-sm); color:var(--text-muted); } .stack-total { display:flex; justify-content:space-between; align-items:baseline; border-top:2px solid var(--navy); margin-top:var(--s-4); padding-top:var(--s-4); } .stack-total .was { font-size:var(--t-lg); color:var(--text-muted); text-decoration:line-through; text-decoration-thickness:2px; } .stack-total .now { font-family:var(--f-display); font-size:var(--t-2xl); font-weight:800; letter-spacing:-.03em; color:var(--navy); } /* the "what this is not" honesty block, which this market specifically checks for */ .plain { border:1px solid var(--hairline); border-left:4px solid var(--steel); border-radius:var(--r-sm); padding:var(--s-4) var(--s-5); background:var(--wash-2); } /* ---------------------------------------------------------- sticky bar --- Two failure modes, both fixed here rather than in a page's inline styles: 1. The cut-out thumbnail has no intrinsic size limit, so without an explicit height it renders at its natural 3200px width. 2. .inner is flex-wrap:wrap, so on a narrow viewport the four items wrap onto four rows and a *fixed* element grows to swallow the screen. A sticky bar must never be taller than its one row. */ .sticky-bar .bar-thumb { height: 52px; width: auto; flex: none; margin-right: calc(var(--s-3) * -1); } .sticky-bar.is-collapsed .bar-thumb { display: none; } .sticky-bar .inner { flex-wrap: nowrap; } .sticky-bar .price { white-space: nowrap; } .sticky-bar .btn { flex: none; white-space: nowrap; } /* hard ceiling: whatever happens to the content, the bar cannot take the page */ .sticky-bar { max-height: 22vh; overflow: hidden; } @media (max-width: 900px) { .sticky-bar .bar-thumb { display: none; } .sticky-bar .inner { gap: var(--s-3); } } @media (max-width: 560px) { /* drop the reassurance line before the price or the CTA, never after */ .sticky-bar .inner > .small { display: none; } .sticky-bar .price { font-size: var(--t-md); } } /* ========================================================================== MOBILE CRO Most of this traffic is a bloke on a phone. Everything below is about the two things that actually move mobile conversion: the CTA is always reachable and always tappable, and nothing overflows the viewport. ========================================================================== */ @media (max-width: 768px) { /* 1. Tap targets. Apple/Google both put the floor at 44px; CTAs get 56. The sticky-bar button is excluded from the full-width rule: making it 100% wide pushes the price onto a second row and doubles the bar height. */ .btn { min-height: 56px; font-size: var(--t-md); padding: var(--s-3) var(--s-5); width: 100%; } .sticky-bar .btn { width: auto; min-height: 48px; padding: var(--s-2) var(--s-4); font-size: var(--t-sm); } .btn small { font-size: 11px; } .qopt { min-height: 52px; } .faq summary { min-height: 44px; align-items: center; } /* 2. Headlines: tighter and smaller so the hero promise fits above the fold */ h1.hero { font-size: clamp(27px, 7.4vw, 36px); line-height: 1.14; letter-spacing: -.02em; } h2.title { font-size: clamp(22px, 5.6vw, 30px); } .lede { font-size: var(--t-md); } .story p { font-size: var(--t-md); line-height: 1.58; } /* 3. Kill horizontal overflow. Wide tables and charts scroll inside themselves rather than pushing the body sideways, which is the single most common mobile layout failure on a long sales page. */ body { overflow-x: hidden; } .fig-table, .ledger, .phase-table, .compare, .prep-table { display: block; overflow-x: auto; white-space: nowrap; } .chart { min-width: 520px; } .card:has(> .chart), .card:has(> svg.chart) { overflow-x: auto; } /* 4. Section rhythm: less vertical padding so the page is not endless thumb-work */ .sec { padding: var(--s-6) 0; } .card { padding: var(--s-4); } /* 5. The proof strip stacks instead of squeezing to one word per line */ .proof-strip { flex-direction: column; gap: var(--s-2); align-items: flex-start; } /* 6. Value stack rows go vertical so the price chip never crushes the copy */ .stack-row { flex-direction: column; gap: var(--s-2); } .stack-row .val { align-self: flex-start; } /* 7. Before/after: one card per row, and the diptych stays legible */ .ba-grid { grid-template-columns: 1fr; } /* 8. Body padding clears the sticky bar plus the iOS home indicator. !important because each page declares its own body padding in an inline