/* healthscreeningpod.com - the little that clinicsoncloud.com's own stylesheet does not already cover. Everything visible here that also exists on the main site is drawn by the main site's compiled CSS, fetched at build time: the background ramp, the type, the buttons, .section, .sec-head, the certification strip and the whole full-body-screening layout. What follows is only this page's own furniture - a header, a stat row, a checklist, a form - written against the same tokens so it cannot drift from the rest. */ /* The main site loads Poppins through next/font, which sets --font-poppins on a class this page does not have. Same family, from Google, bound to the same variable so every rule that reads it resolves. */ :root { --font-poppins: 'Poppins'; --ha-gap: 18px; } /* ---------- header ---------- The bar is the main site's, so there is nothing to style. The one thing it cannot know is that this page has no router: .nav-links a.on marks the current page there, and here every link is an anchor down this one page. */ .nav-links a[href^="http"] { color: var(--teal); } /* ---------- hero ---------- Measured off the live .hero rather than read from the source, because the source declares 168px of top padding and a later media query cuts it to 100. What clinicsoncloud.com actually draws at 1440 is 100px 40px 60px, 1400px wide, 1.05fr against 1fr with 20px between - and 104px of top padding once the bar loses its second row below 900. Those are the numbers used here. One thing is deliberately not copied: the main site holds min-height:100vh so its headline owns the first screen. A guide should be showing its first paragraph by then. */ .ha-hero { max-width: 1400px; margin: 0 auto; padding: 100px 40px 60px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: center; } /* The kiosk, its orbiting vitals and the watermark behind the copy are all the main site's: .stage-wrap, #stage, .scene, .kiosk-photo, .kp-glow, .node, .chip, .kp-ecg, .hint, .scanline and .hero-wm come from its stylesheet, and the chips are placed by the same arithmetic OrbitKiosk uses. */ .ha-hero-shot { position: relative; } .ha-hero .sec-eyebrow { display: block; margin-bottom: 14px; } .ha-hero h1 { font-family: var(--font-sora), sans-serif; font-weight: 600; letter-spacing: -.02em; line-height: 1.12; font-size: clamp(34px, 5vw, 58px); margin: 0 0 18px; } .ha-hero .hero-actions { margin-top: 28px; } @media (max-width: 980px) { .ha-hero { grid-template-columns: 1fr; padding: 104px 40px 40px; } .ha-hero-shot { order: -1; } } /* ---------- shared blocks ---------- One rhythm: 34px under a heading, 18px between anything that repeats. A section head carries a heading and one paragraph. Where it has two they need a gap - .sec-head p has none of its own, so a second paragraph ran straight on from the first and the pair read as one block of text. */ .sec-head p + p { margin-top: 14px; } .ha-stats, .ha-cards, .ha-steps, .ha-faq { margin-top: 34px; } /* The main site's comparison block always follows a .sec-head, which carries its own bottom margin, so .vs has none of its own. Here it follows the stats row, and the two boxes met with nothing between them. */ .ha-stats + .vs { margin-top: 34px; } .ha-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ha-gap); } .ha-stats > div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; text-align: center; } .ha-stats b { display: block; font-size: 32px; font-weight: 600; background: linear-gradient(100deg, var(--blue-light), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; } .ha-stats span { font-size: 13px; color: var(--muted); } @media (max-width: 760px) { .ha-stats { grid-template-columns: repeat(2, 1fr); } } .ha-cards { display: grid; gap: var(--ha-gap); } .ha-c4 { grid-template-columns: repeat(4, 1fr); } .ha-c2 { grid-template-columns: repeat(2, 1fr); } .ha-c3 { grid-template-columns: repeat(3, 1fr); } .ha-cards > div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; position: relative; overflow: hidden; } .ha-cards > div::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent-line), transparent); } .ha-cards h3, .ha-steps h3 { font-family: var(--font-sora), sans-serif; font-size: 18px; font-weight: 600; margin: 0 0 9px; } .ha-cards p, .ha-steps p { margin: 0; color: var(--muted); } @media (max-width: 900px) { .ha-c4, .ha-c3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .ha-c2 { grid-template-columns: 1fr; } } @media (max-width: 620px) { .ha-c4, .ha-c3 { grid-template-columns: 1fr; } } .ha-steps { counter-reset: s; display: grid; gap: 14px; } .ha-steps > div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px 20px 84px; position: relative; } .ha-steps > div::before { counter-increment: s; content: counter(s); position: absolute; left: 22px; top: 20px; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--teal), var(--teal-deep)); font-weight: 600; font-size: 17px; } @media (max-width: 620px) { .ha-steps > div { padding: 74px 20px 20px; } } .ha-check { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 14px; max-width: 860px; } .ha-check li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--muted); } .ha-check li::before { content: '✓'; color: var(--blue-light); font-weight: 700; } /* Two across, for a list long enough that one column runs past whatever sits beside it. The single-column .ha-check stays the default. */ .ha-check-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; max-width: none; } @media (max-width: 820px) { .ha-check-2 { grid-template-columns: 1fr; } } .ha-check b { color: #fff; font-weight: 600; } /* ---------- the parameter sheet ---------- .pm-backdrop, .pm-sheet, .pm-close, .pm-head, .pm-ico, .pm-count and .pm-list are all the main site's own rules. Two things it does in React that have to be said here: the backdrop is a flex centring box (framer-motion set that), and `hidden` has to beat that display. */ .pm-backdrop { display: flex; align-items: center; justify-content: center; } .pm-backdrop[hidden] { display: none; } #spec-data { display: none; } /* the small mark before each parameter, which the main site animates in */ .pm-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue-light); flex: none; } /* ---------- faq ---------- */ .ha-faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin-bottom: 12px; } .ha-faq summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 16px; } .ha-faq summary::-webkit-details-marker { display: none; } .ha-faq summary::after { content: '+'; color: var(--blue-light); font-size: 20px; line-height: 1; } .ha-faq details[open] summary::after { content: '−'; } .ha-faq p { margin: 14px 0 0; font-size: 15px; color: var(--muted); } /* ---------- contact ---------- .contact-wrap, .contact-methods, .contact-method, .cm-ico, .cm-label, .contact-form-card, .contact-form, .cf-intro, .cf-row, .cf-note and the select's .placeholder state are all the main site's own rules. Two things it does in React that have to be said here: the note is hidden until there is something to say, and the phone field is a plain input rather than its country-code component, which would be a whole library for one box. */ .cf-note[hidden] { display: none; } /* laid out off the side of the page rather than display:none - a script that skips what is not rendered walks around a hidden field, and this is bait */ .ha-bait { position: absolute; left: -5000px; } /* ---------- footer ---------- */ .ha-foot { background: var(--navy); border-top: 1px solid var(--line); padding: 40px 0; position: relative; z-index: 1; } .ha-foot-in { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; } .ha-foot p { margin: 0; font-size: 13px; color: var(--muted); } .ha-foot a { color: var(--blue-light); } @media (max-width: 900px) { .ha-foot-in { padding: 0 22px; } } /* ---------- the film player and the client cards ---------- .vidm, .vidm-frame, .vidm-tabs, .bro-x/.vidm-x, .mnav-veil, .cv-grid, .cv-card, .cv-thumb, .cv-play and .cv-body are all the main site's. Three things it does in React that have to be said here: the wrapper that holds the veil and the sheet together draws nothing itself, `hidden` has to beat that, and the thumbnail is a YouTube still rather than a poster from the portal. */ #vm { display: contents; } #vm[hidden] { display: none; } .vidm-tabs[hidden] { display: none; } .cv-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cv-more { margin-top: 28px; text-align: center; } /* ---------- reading weight ---------- The one place this page deliberately parts from the main site. Body copy there is Poppins 300, which is right for a marketing page read in glances - a headline, a caption, a stat. This page is a guide somebody reads end to end, and at 300 the paragraphs were reported as too faint to settle into. 400 is one step, the colour is untouched at var(--muted), and headings, labels and eyebrows keep their own weights. */ .ha-hero .lede, .sec-head p, .ha-cards p, .ha-steps p, .ha-check li, .ha-faq p, .cv-body p, .cf-intro { font-weight: 400; } /* ---------- the smart report ---------- Nothing of this section is written here. .report-grid, .report-stage, .report-glow, .rdevice-wrap, .rchip, .rdevice, .rd-scan, .rd-head, .rd-ava, .rd-pill, .rd-score, .rd-ring, .rd-vitals, .rd-vital, .rd-sent, .ow-card and .ow-row are all the main site's, and the ring's arc is drawn by its own rule. The first attempt at this section was a card of my own invention; it did not look like the site because it was not from it. */ /* ---------- reading weight ---------- The one place this page deliberately parts from the main site. Body copy there is Poppins 300, which is right for a marketing page read in glances - a headline, a caption, a stat. This page is a guide somebody reads end to end, and at 300 the paragraphs were reported as too faint to settle into. 400 is one step, the colour is untouched at var(--muted), and headings, labels and eyebrows keep their own weights. */ .ha-hero .lede, .sec-head p, .ha-cards p, .ha-steps p, .ha-check li, .ha-faq p, .cv-body p, .cf-intro { font-weight: 400; } /* ---------- the smart report ---------- The main site draws this with a device mock-up the client supplied; here the four points sit beside a small card standing in for the printed sheet. The rows and the card use .aiico and the shared card tokens, so nothing new is invented - only arranged. */ .ha-report { display: grid; grid-template-columns: 1fr 340px; gap: 34px; align-items: start; margin-top: 34px; } /* the four points are one column beside the card, not four cells inside the grid - left as direct children they filled the card's column too */ .ha-report-rows { display: grid; gap: 22px; } .ha-report-row { display: grid; grid-template-columns: 44px 1fr; gap: 16px; } .ha-report-row b { display: block; font-weight: 600; font-size: 16px; margin-bottom: 4px; } .ha-report-row p { margin: 0; color: var(--muted); font-weight: 400; } .ha-report-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: grid; gap: 4px; } .ha-report-card b { font-weight: 600; font-size: 17px; } .ha-report-card small { color: var(--muted); font-size: 12px; } .ha-score { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 12px; } .ha-score b { font-size: 44px; font-weight: 600; line-height: 1; background: linear-gradient(100deg, var(--blue-light), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; } .ha-score span { font-size: 12px; color: var(--muted); } .ha-chips { display: grid; gap: 8px; } .ha-chips span { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; } .ha-chips i { width: 7px; height: 7px; border-radius: 50%; flex: none; } @media (max-width: 860px) { .ha-report { grid-template-columns: 1fr; } } /* ---------- the brochure form ---------- .ha-form is this site's own class and had no rules at all: the labels stayed inline, the inputs fell back to the browser's, and the button floated over the last field. The main site styles .contact-form and nothing else, so the shape has to be said here. Matched to it deliberately - same radius, same border, same field background - so the sheet does not read as a second designer's work. */ .ha-form { display: grid; gap: 6px; } .ha-form label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); } .ha-form label + input { margin-bottom: 10px; } .ha-form input { width: 100%; padding: 13px 15px; border-radius: 11px; border: 1px solid var(--line); background: rgba(6, 32, 58, .6); color: var(--ink); font-family: inherit; font-size: 14px; outline: none; transition: border-color .2s; } .ha-form input:focus { border-color: var(--blue-light); } .ha-form input::placeholder { color: var(--muted); } .ha-form .btn-primary { margin-top: 8px; width: 100%; justify-content: center; } .ha-said { margin: 10px 0 0; font-size: 13px; color: var(--muted); min-height: 18px; } /* --------------------------------------------------------------------------- mobilemedicalunit.in only. Three classes the main site has no equivalent for - written here rather than left to inherit nothing, because a class of ours that nobody styled is how two of these sites shipped with a broken form. --------------------------------------------------------------------------- */ /* Three figures, not four. .ha-stats is a four-column grid on the sibling sites; three items in it leave a hole the width of a card. */ .ha-stats-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 760px) { .ha-stats-3 { grid-template-columns: 1fr; } } /* The caveat under a section - smaller than the prose, and deliberately not a card, because it qualifies what is above rather than adding to it. */ .ha-note { margin: 26px auto 0; max-width: 760px; text-align: center; font-size: 14px; line-height: 1.7; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; } /* A quotation from the client's own published answer. It is set apart because the whole point is that these are their words and not ours. */ .ha-quote { margin-top: 34px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--pink); border-radius: 16px; padding: 26px 30px; } .ha-quote p { margin: 0; font-size: 17px; line-height: 1.75; color: #fff; } .ha-quote span { display: block; margin-top: 12px; font-size: 13px; color: var(--muted); } @media (max-width: 700px) { .ha-quote { padding: 20px 22px; } .ha-quote p { font-size: 15.5px; } } /* --------------------------------------------------------------------------- The three pieces this page has that no other site of ours does. The main stylesheet drives everything else - these exist because the subject needed a shape the main site has never had to draw. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- The menu on a phone. clinicsoncloud.com's stylesheet hides .nav-links and the contact strip below 1100px - its own shell swaps in a hamburger there, and these static pages do not have that shell. So the header lost every link on the width most people read this at. The button and the panel below are ours; they appear at exactly the width the main stylesheet takes the links away. --------------------------------------------------------------------------- */ .kmenu-btn { display: none; margin-left: auto; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; } .kmenu-btn:hover { background: rgba(255, 255, 255, 0.12); } .kmenu { position: fixed; left: 0; right: 0; z-index: 60; display: none; flex-direction: column; gap: 2px; padding: 12px 16px 18px; background: #0d2b4a; border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); max-height: calc(100vh - 64px); overflow-y: auto; } .kmenu[hidden] { display: none; } .kmenu a { padding: 13px 8px; font-size: 15.5px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .kmenu a:last-child { border-bottom: 0; } .kmenu .kmenu-call { color: var(--blue-light); font-size: 14.5px; } .kmenu .kmenu-cta { margin-top: 12px; padding: 13px; text-align: center; border-radius: 999px; border-bottom: 0; background: linear-gradient(135deg, var(--pink), #d92f5c); font-weight: 600; } @media (max-width: 1100px) { .kmenu-btn { display: inline-flex; } .kmenu.on { display: flex; } } @keyframes hubflow { 0% { background-position: -22% 0; } 100% { background-position: 122% 0; } } /* Sized to the tile and fitted inside it. max-height alone lost to a `width:100%; height:auto` rule in the main stylesheet, and the pictures came back out at their natural height - the 1100px-tall kiosk overflowing its own card. Filling the box and letting object-fit do the fitting cannot lose. */ /* Placed rather than sized. The main stylesheet carries `img { height: auto } /* THE TRACK - the rollout, in order, with where each stage sits */ .rollout { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 20px; } .rollout-stop { position: relative; padding-top: 34px; } .rollout-stop::before { content: ''; position: absolute; top: 13px; left: 34px; right: -20px; height: 1px; background: linear-gradient(90deg, rgba(116, 194, 240, 0.5), rgba(116, 194, 240, 0.08)); } .rollout-stop:last-child::before, .rollout-stop:nth-child(4n)::before { display: none; } .rollout-n { position: absolute; top: 0; left: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--blue-light); color: var(--blue-light); font-size: 13px; font-weight: 600; } .rollout-stop h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 600; color: #fff; } .rollout-stop p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); } @media (max-width: 1000px) { .rollout { grid-template-columns: repeat(2, 1fr); } .rollout-stop:nth-child(2n)::before { display: none; } } @media (max-width: 620px) { .rollout { grid-template-columns: 1fr; } .rollout-stop::before { display: none; } } /* The hero buttons are ours - two of them open dialogs rather than navigating, so they are