/* Homoeoclinics landing page. * * Every value here is lifted from the design reference * (`Homoeoclinics Landing.dc.html`) and its handoff README. The reference * carries its styles inline because it runs on a component runtime; this file * is the same values as classes. If a number here disagrees with the README's * token/scale tables, the README wins — it is the spec. * * Depends on industry.css for tokens (--color-*, --font-*) and for the * .btn / .blueprint / .corner / .duotone component classes. * * ORDER OF SECTIONS * 1. page shell 5. how it works * 2. header 6. patient app / scholars * 3. hero + doors 7. pricing * 4. section furniture 8. footer * 9. motion 10. responsive (≤1024px, ≤700px) */ /* ── 1. page shell ─────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--color-bg); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-text) 18%, transparent); } a { color: var(--color-accent-700); text-decoration: none; } a:hover { color: var(--color-accent); } .page { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; /* `clip`, NOT `hidden`. The reference uses overflow-x:hidden here, but a non-visible overflow makes this element a scroll container, and a position:sticky descendant then sticks to THAT container instead of the viewport — .page is as tall as its content, so the sticky header would simply scroll away. `overflow: clip` does the same visual job without creating a scroll container, so the header keeps working. */ overflow-x: clip; } @supports not (overflow: clip) { /* Fallback: on the viewport-propagating root, not on .page, for the same reason. */ html { overflow-x: hidden; } } /* A sticky header would otherwise cover the top of whatever an in-page link jumps to. 84px clears it at every breakpoint. */ [id] { scroll-margin-top: 84px; } /* Utility tints. The design writes these as inline color-mix() at ~6 discrete strengths; naming them keeps the markup readable and the set closed. */ .t-50 { color: color-mix(in srgb, var(--color-text) 50%, transparent); } .t-55 { color: color-mix(in srgb, var(--color-text) 55%, transparent); } .t-60 { color: color-mix(in srgb, var(--color-text) 60%, transparent); } .t-70 { color: color-mix(in srgb, var(--color-text) 70%, transparent); } .t-72 { color: color-mix(in srgb, var(--color-text) 72%, transparent); } .t-78 { color: color-mix(in srgb, var(--color-text) 78%, transparent); } /* Eyebrows / section labels — type step −1. */ .eyebrow { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent-700); } .eyebrow--wide { letter-spacing: 0.22em; } .eyebrow--hero { letter-spacing: 0.24em; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; /* A long unbroken token (yourclinic.homoeoclinics.com) must wrap inside its card on narrow screens rather than overflow it. `anywhere` breaks only when nothing else fits, so short tokens like c/o are untouched. */ overflow-wrap: anywhere; } /* A deeper step of the site's own blue accent (--color-accent-800), used sparingly: the "manage" in the tagline and one phrase per feature headline. Same colour everywhere it appears — it reads as one accent, not several. Flat colour only, no gradient/shadow, to stay matte. Deeper than --color-accent-700 (used by links/eyebrows) so a highlighted word doesn't read as a clickable link. */ .hl { color: var(--color-accent-800); } /* Scroll-progress bar. Deliberately a direct child of , OUTSIDE .page: the text-size control sets `zoom` on .page, and a position:fixed element inside a zoomed ancestor is scaled along with it — a 2px rule would become 2.5px and stop reaching the viewport edges. */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: transparent; pointer-events: none; } .progress__bar { height: 100%; width: 0%; background: var(--color-accent); } /* Skip link — not in the reference. A sticky header plus ~11 screens of content makes keyboard arrival at the nav unavoidable otherwise. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 70; padding: 12px 18px; background: var(--color-accent); color: var(--color-bg); font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; } .skip-link:focus { left: 0; color: var(--color-bg); } /* ── 2. header ─────────────────────────────────────────────────────────── */ .header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--color-bg) 82%, transparent); border-bottom: 1px solid var(--color-divider); } /* No backdrop-filter (older Firefox/Safari): a translucent bar over moving text is unreadable without the blur, so go opaque instead. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .header { background: var(--color-bg); } } .nav-bar { max-width: 1220px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 32px; } .brand { font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: 0.01em; color: var(--color-text); display: flex; align-items: baseline; gap: 8px; } .brand:hover { color: var(--color-text); } .brand__tag { font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent-700); } .nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 14px; } .nav-links a { color: var(--color-text); } .nav-links a:hover { color: var(--color-accent); } .nav-actions { display: flex; align-items: center; gap: 10px; } /* Tab / segmented control. One shape serves the text-size group, the pricing audience tabs and the billing-period tabs; the design derives all three from a single `tab(active)` helper. */ .tab { font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; padding: 10px 20px; cursor: pointer; border: none; border-radius: 0; background: transparent; color: var(--color-text); transition: background 220ms ease, color 220ms ease; } .tab:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); } .tab:active { background: color-mix(in srgb, var(--color-accent) 20%, transparent); } .tab[aria-pressed="true"], .tab[aria-selected="true"] { background: var(--color-accent); color: var(--color-bg); } .tab[aria-pressed="true"]:hover, .tab[aria-selected="true"]:hover { background: var(--color-accent-600); } .tab-group { display: inline-flex; border: 1px solid var(--color-divider); } .size-group .tab { padding: 4px 10px; font-family: var(--font-body); } .size-group .tab[data-scale="1"] { font-size: 12px; } .size-group .tab[data-scale="1.12"] { font-size: 15px; } .size-group .tab[data-scale="1.26"] { font-size: 18px; } .btn-lang { font-size: 16px; letter-spacing: 0; padding: 6px 12px; } .btn-size-cycle { display: none; font-size: 15px; padding: 0; } .btn-signin { font-size: 13px; } .btn-signin:hover { color: var(--color-text); } .btn-offer { font-size: 13px; } .btn-offer:hover, .btn-offer:focus { color: var(--color-bg); } /* ── 3. hero + doors ───────────────────────────────────────────────────── */ .hero { max-width: 1220px; margin: 0 auto; padding: 118px 32px 0; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; position: relative; } .hero__eyebrow { margin-bottom: 34px; } .hero__title { font-size: clamp(48px, 8.4vw, 116.5px); line-height: 0.94; letter-spacing: -0.03em; margin: 0; max-width: 15ch; text-wrap: balance; } .hero__lede { font-size: clamp(19px, 2.2vw, 27.5px); line-height: 1.38; max-width: 46ch; margin: 34px 0 0; } .hero__logo { flex: none; width: clamp(200px, 24vw, 330px); aspect-ratio: 1; padding: 0; margin-right: clamp(8px, 4vw, 70px); } .hero__logo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The two doors share one bordered grid; the 1px gap over a divider-coloured background IS the rule between them, so there is no double hairline. */ .doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1px; margin-top: 96px; background: var(--color-divider); border: 1px solid var(--color-divider); } .door { background: var(--color-bg); padding: 44px 40px 40px; display: flex; flex-direction: column; min-height: 340px; } .door__title { font-size: 44.5px; line-height: 1.02; margin: 0; } .door__body { margin: 16px 0 0; max-width: 34ch; } .door__actions { margin-top: auto; padding-top: 34px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .door__actions .btn { font-size: 14px; padding: 11px 20px; } .door__actions .btn-primary:hover, .door__actions .btn-primary:focus { color: var(--color-bg); } .door__actions .btn-secondary:hover { color: var(--color-text); } .door__price { font-size: 13px; } /* Real product shots (SVG composites in /site/shots/). They replaced the .shot placeholder elements outright — frames, shadows and background live INSIDE each SVG, so the page adds nothing around them. width/height attributes on the reserve the box (no CLS); this only makes them fluid. */ .shot-img { display: block; width: 100%; height: auto; } .shot-img--hero { margin-top: 28px; } /* ── 4. section furniture ──────────────────────────────────────────────── */ .section { max-width: 1220px; margin: 0 auto; padding: 148px 32px 0; } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; flex-wrap: wrap; border-top: 1px solid var(--color-divider); padding-top: 26px; } .section__title { font-size: clamp(34px, 4.4vw, 44.5px); margin: 0; line-height: 1.04; max-width: 18ch; } .section__title--narrow { max-width: 16ch; } .section__title--full { max-width: none; } .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* grid children may not force tracks wider than their fair share */ gap: 40px 34px; margin-top: 68px; /* Every row the height of the tallest card, so the six feature boxes always read as one uniform set (maintainer, 2026-08-26). */ grid-auto-rows: 1fr; } .feature { padding: 30px 28px 32px; min-height: 250px; display: flex; flex-direction: column; } .feature__title { font-size: 27.5px; margin: 14px 0 12px; } .feature__body { margin: 0; } /* ── 5. how it works ───────────────────────────────────────────────────── */ .grid-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; margin-top: 68px; background: var(--color-divider); border: 1px solid var(--color-divider); } .step { background: var(--color-bg); padding: 40px 34px 44px; } .step__num { font-family: var(--font-heading); font-size: 72px; line-height: 1; color: var(--color-accent-300); } .step__title { font-size: 27.5px; margin: 22px 0 12px; } .step__body { margin: 0; } /* ── 6. patient app / scholars / quotes ────────────────────────────────── */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 64px; align-items: center; } .split__title { font-size: clamp(34px, 4.4vw, 44.5px); margin: 22px 0 20px; line-height: 1.04; max-width: 15ch; } .split__body { margin: 0 0 18px; max-width: 44ch; } .split__body:last-child { margin-bottom: 0; } .grid-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 34px; margin-top: 68px; } .column__title { font-size: 27.5px; margin: 0 0 12px; } .column__body { margin: 0; } .note-strip { margin-top: 54px; padding: 26px 28px; display: flex; gap: 24px; align-items: baseline; flex-wrap: wrap; } .note-strip__body { max-width: 70ch; } .grid-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 34px; margin-top: 68px; } .quote { padding: 32px 30px; margin: 0; } .quote blockquote { margin: 0; font-family: var(--font-heading); font-size: 27.5px; line-height: 1.18; } .quote figcaption { margin-top: 22px; font-size: 13px; } /* ── 7. pricing ────────────────────────────────────────────────────────── */ .pricing__controls { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; margin-top: 48px; } .pricing__billing { margin-left: auto; } .pricing__billing .tab { min-width: 164px; } .grid-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 34px; margin-top: 40px; align-items: stretch; } /* min-height + `margin-top:auto` on the CTA block is what makes both cards in an audience render the same height, per the README. */ .plan { padding: 34px 30px 36px; display: flex; flex-direction: column; min-height: 470px; } .plan__name { font-size: 27.5px; margin: 14px 0 4px; } .plan__seats { margin: 0; font-size: 14px; } .plan__price-row { margin-top: 30px; display: flex; align-items: baseline; gap: 8px; } .plan__price { font-family: var(--font-heading); font-size: 72px; line-height: 0.9; letter-spacing: -0.02em; } .plan__unit { font-size: 14px; } /* min-height reserves the line so the cards do not jump by 20px when the billing tab changes and the saving note appears or disappears. */ .plan__note { margin-top: 10px; font-size: 13px; color: var(--color-accent-700); min-height: 20px; } .plan__rule { height: 1px; background: var(--color-divider); margin: 26px 0; } .plan__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .plan__features li { display: flex; gap: 12px; font-size: 15px; } .plan__dash { color: var(--color-accent); flex: none; } .plan__cta-wrap { margin-top: auto; padding-top: 32px; } .plan__cta { font-size: 14px; padding: 12px 20px; width: 100%; } .plan__cta:hover, .plan__cta:focus { color: var(--color-bg); } .plan__offer { margin: 12px 0 0; font-size: 12px; } .pricing__footnote { margin: 26px 0 0; font-size: 13px; } /* ── 7b. FAQ ───────────────────────────────────────────────────────────── */ /* Same 1px-gap bordered grid as .grid-steps: the gap over a divider-coloured background IS the rule between cells, so there is no double hairline. Content is plain visible markup — no disclosure widget, nothing collapsed, per the standing rule (JS must never be the only reason text is on screen, and here it is not a reason at all). Exactly TWO columns, not auto-fit: eight entries fill 4×2 completely, whereas auto-fit reaches three columns at full width and the ninth cell of the last row would render as a bare divider-coloured rectangle. Keep the entry count even for the same reason. */ .grid-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 68px; background: var(--color-divider); border: 1px solid var(--color-divider); } .faq { background: var(--color-bg); padding: 32px 30px 36px; } .faq__q { font-size: 22px; margin: 0 0 12px; } .faq__a { margin: 0; font-size: 15px; } /* ── 8. footer ─────────────────────────────────────────────────────────── */ .footer { margin-top: 148px; border-top: 1px solid var(--color-divider); background: var(--color-bg); } .footer__inner { max-width: 1220px; margin: 0 auto; padding: 64px 32px 80px; } .footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px; } .footer__brand { font-family: var(--font-heading); font-weight: 600; font-size: 22px; } .footer__tagline { margin: 10px 0 0; font-size: 15px; } .footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 15px; } .footer__legal { margin-top: 56px; padding: 24px 26px; } .footer__legal .eyebrow { display: block; margin-bottom: 10px; } .footer__legal p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 92ch; } .footer__copyright { margin-top: 32px; font-size: 12.5px; } /* ── 9. motion ─────────────────────────────────────────────────────────── */ /* NOTHING is hidden here. `[data-reveal]` elements are fully visible in CSS; landing.js applies the hidden state at runtime and only when motion is allowed, so a JS failure (or a blocked script) leaves the page readable rather than blank. This is a requirement from the handoff README, not a preference. */ .is-revealing { opacity: 0; transform: translateY(26px); transition: opacity 900ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms), transform 900ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms); } .is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .is-revealing { opacity: 1; transform: none; transition: none; } * { animation: none !important; transition: none !important; } } /* ── Hindi ─────────────────────────────────────────────────────────────── */ /* Barlow / Barlow Condensed have no Devanagari coverage at all, so the fallback that would otherwise kick in is the platform's, at a mismatched size and with condensed headings overlapping. Switching the family and loosening heading leading is not cosmetic — it is what makes Hindi legible. */ [data-lang="hi"] { font-family: "Noto Sans Devanagari", var(--font-body); } [data-lang="hi"] h1, [data-lang="hi"] h2, [data-lang="hi"] h3, [data-lang="hi"] blockquote, [data-lang="hi"] .plan__price, [data-lang="hi"] .step__num, [data-lang="hi"] .brand, [data-lang="hi"] .footer__brand, [data-lang="hi"] .tab, [data-lang="hi"] .btn { font-family: "Noto Sans Devanagari", var(--font-heading); } [data-lang="hi"] h1, [data-lang="hi"] h2, [data-lang="hi"] h3, [data-lang="hi"] blockquote { line-height: 1.34; letter-spacing: 0; } [data-lang="hi"] .hero__title { font-size: clamp(38px, 6.2vw, 84px); max-width: 20ch; } [data-lang="hi"] .section__title, [data-lang="hi"] .split__title { font-size: clamp(28px, 3.6vw, 38px); } [data-lang="hi"] .door__title { font-size: clamp(28px, 3.6vw, 38px); } [data-lang="hi"] .feature__title, [data-lang="hi"] .step__title, [data-lang="hi"] .column__title, [data-lang="hi"] .plan__name { font-size: 24px; } [data-lang="hi"] .quote blockquote { font-size: 24px; } [data-lang="hi"] .faq__q { font-size: 20px; } [data-lang="hi"] div, [data-lang="hi"] span, [data-lang="hi"] a, [data-lang="hi"] button, [data-lang="hi"] p, [data-lang="hi"] li { letter-spacing: normal; } /* …except the eyebrows, whose whole shape is the tracking. */ [data-lang="hi"] .eyebrow { letter-spacing: 0.12em; } /* ── 10. responsive ────────────────────────────────────────────────────── */ /* ≤1024px — the header collapses to one ~56px row. "How it works", "For scholars", the 3-button size group and the trial CTA all go; the language and text-size controls become icon buttons. Everything left is >= 44px tall. */ @media (max-width: 1024px) { .size-group, .btn-offer, .nav-extra { display: none; } .btn-size-cycle { display: inline-flex; width: 38px; min-height: 44px; padding: 0; justify-content: center; font-size: 13px; } .btn-lang { display: inline-flex; min-height: 44px; width: auto; padding: 0 10px; justify-content: center; font-size: 14px; white-space: nowrap; } .nav-bar { flex-wrap: nowrap; gap: 10px; padding: 8px 20px; } .nav-links { margin-left: auto; gap: 18px; font-size: 13px; flex-wrap: nowrap; } .nav-links a, .btn-signin { min-height: 44px; display: inline-flex; align-items: center; } /* Must come AFTER the rule above: `.nav-links a` (0,1,1) outranks the bare `.nav-extra` (0,1,0) in the hide list at the top of this block and was re-showing "How it works" / "For scholars" on every phone. */ .nav-links a.nav-extra { display: none; } .btn-signin { font-size: 13px; padding: 0; border: 0; color: var(--color-accent-700); } .btn-signin:hover { background: transparent; color: var(--color-accent); } .brand { min-height: 44px; display: inline-flex; align-items: baseline; } .pricing__billing .tab, .pricing__audience .tab { min-height: 44px; } } /* ≤700px (phone). The hero logo goes and the tagline carries the hero on its own; feature cards go two-up to halve the page length. */ @media (max-width: 700px) { .nav-bar { gap: 8px; padding: 6px 12px; } .brand { font-size: 16px; min-height: 44px; align-items: center; } .brand__tag { display: none; } .nav-links { margin-left: auto; gap: 10px; font-size: 12px; flex-wrap: nowrap; } .btn-signin { font-size: 12px; } .hero { padding: 56px 20px 0; } .hero__logo { display: none; } .hero__eyebrow { margin-bottom: 22px; font-size: 10px; letter-spacing: 0.2em; } .hero__grid { grid-template-columns: 1fr; gap: 26px; } .hero__title { font-size: 64px; line-height: 0.9; letter-spacing: -0.035em; max-width: 11ch; } .hero__lede { font-size: 24.5px; line-height: 1.32; margin-top: 26px; max-width: none; } .section { padding: 84px 20px 0; } .footer__inner { padding: 48px 20px 56px; } .doors { grid-template-columns: 1fr; margin-top: 56px; } .door { padding: 30px 24px 32px; min-height: 0; } .door__title { font-size: 34px; } /* minmax(0,1fr), not bare 1fr: a bare 1fr track's MINIMUM is its content's min-content width, so the card carrying the c/o / agg / amel code spans forced its column wider than its neighbour (reported with screenshot, 2026-08-26). Zero-minimum tracks are always equal. */ .grid-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 18px; margin-top: 44px; } .grid-cards > * { min-width: 0; } .feature { padding: 20px 16px 22px; min-height: 0; } .feature__title { font-size: 20px; } .feature__body { font-size: 13.5px; } /* README: "nothing interactive below 44px height at phone width". The reference's own mobile sheet only enforces this on the header controls and the pricing tabs, which leaves the door CTAs at 41px, the plan CTAs at 43px and the footer links at 24px. These four rules close that. The footer's link gap drops to 2px so the taller rows do not stretch the column — revert both halves together if the reference spacing is preferred over the rule. */ .door__actions .btn { min-height: 44px; } .plan__cta { min-height: 44px; } .footer__links { gap: 2px; } .footer__links a { min-height: 44px; display: inline-flex; align-items: center; } /* One column on phones: FAQ answers are full paragraphs and do not read at half width the way the short feature-card copy does. */ .grid-faq { grid-template-columns: 1fr; } .faq { padding: 22px 18px 26px; } .faq__q { font-size: 19px; } .faq__a { font-size: 13.5px; } .pricing__billing { margin-left: 0; width: 100%; } .pricing__billing .tab { min-width: 0; flex: 1 1 0; padding: 10px 4px; font-size: 12px; min-height: 44px; } .pricing__audience .tab { min-height: 44px; } [data-lang="hi"] .hero__title { font-size: 40px; max-width: none; } }