/* ========================================================================== Hospitek — ophthalmic equipment & corneal cross-linking Palette is drawn from the procedure: surgical-drape petrol teal as the primary, riboflavin amber as the single accent, on a teal-biased neutral. ========================================================================== */ /* --- Tokens: light only -------------------------------------------------- The site deliberately commits to a single light theme and does not follow the visitor's system dark setting. Every colour is painted explicitly from these tokens, so the page holds its look on any host background. The dark cross-linking band and footer are fixed design elements — they use the --uva-* tokens below and are not a dark theme. ------------------------------------------------------------------------ */ :root { color-scheme: light; --bg: #F4F6F5; --surface: #FFFFFF; --surface-sunk: #EBEFEE; --ink: #0C1F22; --ink-soft: #29403F; --muted: #56696B; --line: #D9E1E0; --line-strong: #BCCAC8; --primary: #0E4A4F; --primary-hi: #17787F; --primary-wash: #E4EEEE; --on-primary: #F2F7F6; --accent: #C97A16; --accent-hi: #E8A33D; --accent-wash: #FBF0DE; --ok: #2E6F4E; --focus: #17787F; /* The lead accent says which half of the business a page belongs to. Equipment & Service leads teal (the instrument); Cross-Linking Care leads amber (riboflavin under UVA). Defaults to teal. Set per page on . */ --lead: #0E4A4F; --lead-hi: #17787F; --lead-solid: #0E4A4F; --on-lead: #F2F7F6; --lead-wash: #E4EEEE; --shadow-lift: 0 1px 2px rgba(12, 31, 34, .05), 0 8px 24px -12px rgba(12, 31, 34, .18); /* Inverted band (the cross-linking section) keeps its own fixed set so it reads as the same "UVA room" in either theme. */ --uva-bg: #08262A; --uva-bg-2: #0C3338; --uva-ink: #E6F0EE; --uva-muted: #93B0B0; --uva-line: #17454A; --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Literata", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --step--2: 0.75rem; --step--1: 0.8125rem; --step-0: 1.0625rem; --step-1: 1.1875rem; --step-2: clamp(1.35rem, 1.15rem + 0.7vw, 1.6rem); --step-3: clamp(1.7rem, 1.35rem + 1.4vw, 2.25rem); --step-4: clamp(2.1rem, 1.5rem + 2.6vw, 3.1rem); --step-5: clamp(2.5rem, 1.6rem + 4vw, 4rem); --wrap: 1180px; --gutter: clamp(1.25rem, 4vw, 3rem); --rule: 1px solid var(--line); } /* --- Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--mast-h, 76px) + 14px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } img { height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.021em; line-height: 1.12; text-wrap: balance; margin: 0; color: var(--ink); } p { margin: 0; } a { color: var(--primary-hi); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--primary); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--primary); color: var(--on-primary); padding: .7rem 1.1rem; font-family: var(--font-display); font-size: var(--step--1); } .skip:focus { left: .5rem; top: .5rem; } /* --- Layout primitives --------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: var(--rule); } /* A band that already closes with a rule must not be followed by another one — two adjacent 1px borders paint as a single 2px line. */ .crossover + .creds, .crossover + .section, .creds + .section, .creds + .crossover { border-top: 0; } .section--flush { border-top: 0; } /* The spec-sheet margin column: a mono label in the gutter, content beside it */ .sheet { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.25rem); align-items: start; } @media (max-width: 860px) { .sheet { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } } .eyebrow { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0; display: block; padding-top: .45rem; } .eyebrow::before { content: ""; display: block; width: 1.75rem; height: 2px; background: var(--lead); margin-bottom: .7rem; } .lede { font-size: var(--step-1); line-height: 1.6; color: var(--ink-soft); max-width: 62ch; } .prose { max-width: 66ch; color: var(--ink-soft); } .prose + .prose { margin-top: 1rem; } /* --- Buttons ------------------------------------------------------------- */ .btn { font-family: var(--font-display); font-size: var(--step--1); font-weight: 600; letter-spacing: .01em; display: inline-flex; align-items: center; gap: .5rem; padding: .78rem 1.3rem; border-radius: 2px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; } .btn:active { transform: translateY(1px); } .btn--solid { background: var(--lead-solid); color: var(--on-lead); border-color: var(--lead-solid); } .btn--solid:hover { background: var(--lead-hi); border-color: var(--lead-hi); color: var(--on-lead); } .ctx-care .btn--solid:hover { color: #1B1005; } .btn--line { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn--line:hover { border-color: var(--lead); color: var(--lead); background: var(--lead-wash); } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; } /* --- Header -------------------------------------------------------------- */ .topbar { background: var(--primary); color: var(--on-primary); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .03em; } .topbar__in { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; justify-content: space-between; padding-block: .5rem; } .topbar a { color: var(--on-primary); text-decoration: none; border-bottom: 1px solid rgba(242,247,246,.35); } .topbar a:hover { color: #fff; border-bottom-color: currentColor; } .topbar__reg { display: inline-flex; align-items: center; gap: .45rem; } .topbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-hi); flex: none; } .masthead { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(150%) blur(10px); border-bottom: var(--rule); } .masthead__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .7rem; } .brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); } .brand__mark { flex: none; display: block; } .brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.24rem; letter-spacing: -.028em; line-height: 1; } .brand__sub { display: block; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .22rem; white-space: nowrap; } .nav { display: flex; align-items: center; gap: 1.6rem; } .nav__links { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; } .nav__links a { font-family: var(--font-display); font-size: var(--step--1); font-weight: 500; color: var(--ink-soft); text-decoration: none; padding-block: .35rem; border-bottom: 2px solid transparent; white-space: nowrap; } .nav__links a:hover { color: var(--primary); border-bottom-color: var(--accent); } .nav__toggle { display: none; background: none; border: 1px solid var(--line-strong); border-radius: 2px; padding: .5rem .7rem; cursor: pointer; color: var(--ink); font-family: var(--font-display); font-size: var(--step--1); align-items: center; gap: .5rem; } @media (max-width: 1180px) { .nav__toggle { display: inline-flex; } .nav { display: none; position: absolute; inset-inline: 0; top: 100%; background: var(--surface); border-bottom: var(--rule); flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.25rem; box-shadow: var(--shadow-lift); } .nav.is-open { display: flex; } .nav__links { flex-direction: column; gap: 0; } .nav__links a { display: block; padding: .8rem 0; border-bottom: var(--rule); } .nav .btn { margin-top: 1rem; justify-content: center; } } /* --- Hero ---------------------------------------------------------------- */ .hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (max-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } } .hero h1 { font-size: var(--step-5); } .hero h1 em { font-style: normal; color: var(--primary); border-bottom: 3px solid var(--accent); padding-bottom: .08em; } .hero__lede { margin-top: 1.35rem; } .hero__cta { margin-top: 1.9rem; } .hero__meta { margin-top: 2.25rem; padding-top: 1.25rem; border-top: var(--rule); display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; } .metric__k { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; } .metric__l { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-top: .3rem; } /* Blueprint panel: the KXL drawn as a side elevation, annotated like a datasheet */ .bp { margin: 0; background: var(--uva-bg); border: 1px solid var(--uva-line); border-radius: 3px; padding: 1.35rem; color: var(--uva-ink); position: relative; overflow: hidden; box-shadow: var(--shadow-lift); /* drawing inks — deliberately fixed, this panel is dark in every context */ --bp-ink: #C3D8D6; --bp-dim: #6F9293; --bp-faint: #1E4A4F; } .bp::after { content: ""; position: absolute; inset: -35% -12% auto auto; width: 24rem; height: 24rem; border-radius: 50%; background: radial-gradient(circle, rgba(232,163,61,.2) 0%, rgba(232,163,61,0) 68%); pointer-events: none; } .bp > * { position: relative; } .bp__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .09em; text-transform: uppercase; color: var(--uva-muted); padding-bottom: .9rem; border-bottom: 1px solid var(--uva-line); } .bp__live { display: inline-flex; align-items: center; gap: .45rem; color: var(--accent-hi); } .bp__live span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-hi); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } } .bp__dwg { display: block; width: 100%; height: auto; margin: .25rem 0 .5rem; } .bp__dwg text { font-family: var(--font-mono); } .bp-val { font-size: 17px; fill: var(--accent-hi); letter-spacing: .03em; } .bp-lbl { font-size: 13.5px; fill: var(--bp-dim); letter-spacing: .11em; } .bp-dim-t { font-size: 16px; fill: var(--accent-hi); letter-spacing: .04em; } .bp-beam { animation: beam 4.5s ease-in-out infinite; transform-origin: 190px 282px; } @keyframes beam { 0%, 100% { opacity: 1; } 50% { opacity: .62; } } .bp__specs { list-style: none; margin: 0; padding: .95rem 0 0; border-top: 1px solid var(--uva-line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; } .bp__specs li { display: flex; flex-direction: column; gap: .12rem; } .bp__specs li.is-compact { display: none; } .bp__k { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--uva-muted); } .bp__v { font-family: var(--font-mono); font-size: var(--step--1); color: var(--uva-ink); font-variant-numeric: tabular-nums; } .bp__ft { margin-top: 1.05rem; padding-top: .95rem; border-top: 1px solid var(--uva-line); font-family: var(--font-body); font-size: var(--step--1); color: var(--uva-muted); line-height: 1.55; } /* Below this width the drawing scales past the point where its annotations are legible, so the leaders come off and their values move into the spec list. */ @media (max-width: 620px) { .bp-callouts, .bp-dims { display: none; } .bp__specs li.is-compact { display: flex; } } /* --- Credential strip ---------------------------------------------------- */ .creds { background: var(--surface-sunk); border-top: var(--rule); border-bottom: var(--rule); } .creds__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-inline: 1px solid var(--line); } .creds__cell { background: var(--surface-sunk); padding: 1.5rem; display: flex; flex-direction: column; gap: .4rem; } .creds__cell strong { font-family: var(--font-display); font-size: var(--step--1); font-weight: 600; color: var(--ink); } .creds__cell span { font-size: var(--step--1); color: var(--muted); line-height: 1.5; } .creds__ico { color: var(--primary); } @media (max-width: 880px) { .creds__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .creds__in { grid-template-columns: minmax(0, 1fr); } } /* --- Equipment: a spec-sheet list, not a wall of cards -------------------- */ .cats { display: grid; gap: 1px; background: var(--line); border: var(--rule); border-radius: 3px; overflow: hidden; } .cat { background: var(--surface); display: grid; grid-template-columns: 2.75rem minmax(0, 15rem) minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem; align-items: start; transition: background-color .16s ease; } .cat:hover { background: var(--primary-wash); } .cat__ico { color: var(--primary); padding-top: .1rem; } .cat__t { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -.015em; } .cat__n { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-top: .4rem; display: block; } .cat__d { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.62; } .cat__d b { font-weight: 500; color: var(--ink); } @media (max-width: 760px) { .cat { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .9rem; } .cat__d { grid-column: 2; } } /* --- UVA band: cross-linking --------------------------------------------- */ .uva { background: radial-gradient(90rem 40rem at 78% -10%, rgba(232,163,61,.14) 0%, rgba(232,163,61,0) 60%), linear-gradient(180deg, var(--uva-bg) 0%, var(--uva-bg-2) 100%); color: var(--uva-ink); border-top: 0; } .uva h2, .uva h3 { color: var(--uva-ink); } .uva .eyebrow { color: var(--uva-muted); } .uva .lede, .uva .prose { color: var(--uva-muted); } .uva .prose b, .uva .lede b { color: var(--uva-ink); font-weight: 500; } .uva a { color: var(--accent-hi); } .uva a:hover { color: #fff; } .uva__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); margin-top: 2.5rem; } @media (max-width: 900px) { .uva__split { grid-template-columns: minmax(0, 1fr); } } .sys { border: 1px solid var(--uva-line); border-radius: 3px; padding: 1.5rem; background: rgba(255,255,255,.025); } .sys__tag { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-hi); } .sys h3 { font-size: var(--step-2); margin-top: .55rem; } .sys p { margin-top: .8rem; color: var(--uva-muted); font-size: var(--step--1); line-height: 1.62; } .sys ul { margin: 1.1rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; } .sys li { font-size: var(--step--1); color: var(--uva-muted); padding-left: 1.15rem; position: relative; line-height: 1.5; } .sys li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-hi); } .sys li b { color: var(--uva-ink); font-weight: 500; } /* Procedure timeline — numbered because this genuinely is a sequence */ .steps { list-style: none; margin: 2.75rem 0 0; padding: 0; counter-reset: step; } .steps li { counter-increment: step; display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: 1.25rem; padding: 1.15rem 0; border-top: 1px solid var(--uva-line); } .steps li:last-child { border-bottom: 1px solid var(--uva-line); } .steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent-hi); letter-spacing: .05em; padding-top: .15rem; } .steps h4 { font-size: var(--step-1); font-weight: 600; color: var(--uva-ink); } .steps p { margin-top: .35rem; color: var(--uva-muted); font-size: var(--step--1); line-height: 1.6; } .steps time { font-family: var(--font-mono); font-size: var(--step--2); color: var(--uva-muted); letter-spacing: .05em; display: block; margin-top: .45rem; } .note { margin-top: 2.25rem; padding: 1.1rem 1.25rem; border: 1px solid var(--uva-line); border-left: 3px solid var(--accent-hi); border-radius: 2px; background: rgba(0,0,0,.16); font-size: var(--step--1); color: var(--uva-muted); line-height: 1.6; } .note b { color: var(--uva-ink); font-weight: 500; } /* --- Services ------------------------------------------------------------ */ .svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: var(--rule); } @media (max-width: 880px) { .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .svcs { grid-template-columns: minmax(0, 1fr); } } .svc { background: var(--surface); padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; } .svc__n { font-family: var(--font-mono); font-size: var(--step--2); color: var(--accent); letter-spacing: .08em; } .svc h3 { font-size: var(--step-1); font-weight: 600; } .svc p { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; } /* --- Why / assurance ----------------------------------------------------- */ .why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; } @media (max-width: 760px) { .why { grid-template-columns: minmax(0, 1fr); } } .why__item { display: flex; gap: 1rem; } .why__ico { flex: none; color: var(--primary); padding-top: .2rem; } .why h3 { font-size: var(--step-1); font-weight: 600; } .why p { margin-top: .4rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.62; } /* --- FAQ ----------------------------------------------------------------- */ .faq { border-top: var(--rule); } .faq details { border-bottom: var(--rule); } .faq summary { list-style: none; cursor: pointer; padding: 1.2rem 2.5rem 1.2rem 0; position: relative; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -.012em; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: .5rem; top: 1.65rem; width: 11px; height: 11px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg); transition: transform .2s ease; } .faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; } .faq summary:hover { color: var(--primary); } .faq__a { padding: 0 2.5rem 1.5rem 0; color: var(--ink-soft); max-width: 70ch; } .faq__a p + p { margin-top: .8rem; } /* --- Contact ------------------------------------------------------------- */ .contact { background: var(--surface-sunk); border-top: var(--rule); } .contact__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); margin-top: 2.5rem; } @media (max-width: 1180px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } } .form { background: var(--surface); border: var(--rule); border-radius: 3px; padding: clamp(1.35rem, 3vw, 2rem); } .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); } } .field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; } .field label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .field label .req { color: var(--accent); } .field input, .field select, .field textarea { font-family: var(--font-body); font-size: var(--step-0); color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 2px; padding: .7rem .8rem; width: 100%; transition: border-color .16s ease, box-shadow .16s ease; } .field select { font-family: var(--font-display); font-size: var(--step--1); appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 1.32em, calc(100% - 13px) 1.32em; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.25rem; } .field textarea { resize: vertical; min-height: 7rem; line-height: 1.6; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-hi) 22%, transparent); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B4462F; } .field .err { font-family: var(--font-display); font-size: var(--step--2); color: #B4462F; min-height: 0; } .consent { display: flex; gap: .7rem; align-items: flex-start; margin: .4rem 0 1.25rem; } .consent input { width: 1.05rem; height: 1.05rem; margin-top: .3rem; flex: none; accent-color: var(--primary-hi); } .consent label { font-size: var(--step--1); color: var(--muted); line-height: 1.55; font-family: var(--font-body); } .form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; } .form__hint { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); letter-spacing: .03em; } .formstatus { margin-top: 1.1rem; padding: .85rem 1rem; border-radius: 2px; font-size: var(--step--1); line-height: 1.55; border: 1px solid transparent; } .formstatus[hidden] { display: none; } .formstatus--ok { background: var(--primary-wash); border-color: var(--primary-hi); color: var(--ink); } .formstatus--err { background: var(--accent-wash); border-color: var(--accent); color: var(--ink); } .formstatus a { font-weight: 600; } /* Direct lines — laid out as a datasheet, not as cards */ .lines { list-style: none; margin: 0; padding: 0; border-top: var(--rule); } .lines li { border-bottom: var(--rule); padding: 1.05rem 0; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; } .lines dt, .lines__k { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .lines__v { font-size: var(--step--1); color: var(--ink); line-height: 1.55; } .lines__v a { text-decoration: none; border-bottom: 1px solid var(--line-strong); color: var(--ink); } .lines__v a:hover { color: var(--primary); border-bottom-color: var(--primary); } .lines__v small { display: block; color: var(--muted); font-size: var(--step--2); margin-top: .2rem; font-family: var(--font-mono); } @media (max-width: 480px) { .lines li { grid-template-columns: minmax(0, 1fr); gap: .3rem; } } .hours { margin-top: 1.75rem; padding: 1.1rem 1.25rem; background: var(--surface); border: var(--rule); border-left: 3px solid var(--primary); border-radius: 2px; } .hours h3 { font-size: var(--step--1); font-family: var(--font-mono); font-weight: 400; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .hours p { margin-top: .55rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; } .hours b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } /* --- Footer -------------------------------------------------------------- */ .footer { background: var(--uva-bg); color: var(--uva-muted); padding-block: clamp(2.75rem, 5vw, 4rem) 2rem; } .footer a { color: var(--uva-ink); text-decoration: none; } .footer a:hover { color: var(--accent-hi); } .footer__top { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; } @media (max-width: 1040px) and (min-width: 781px) { .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 780px) { .footer__top { grid-template-columns: minmax(0, 1fr); gap: 2rem; } } .footer__about { font-size: var(--step--1); line-height: 1.65; max-width: 42ch; margin-top: 1rem; } .footer h4 { font-size: var(--step--2); font-family: var(--font-mono); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--uva-muted); } .footer ul { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; font-size: var(--step--1); } .footer .brand__name, .footer h3 { color: var(--uva-ink); } .footer__legal { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--uva-line); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: var(--step--2); line-height: 1.6; } .footer__legal p { max-width: 78ch; } .footer__legal .tm { color: #7E9A9A; } /* ========================================================================== TWO-BUSINESS STRUCTURE Hospitek sells and services equipment, and performs cross-linking. Those are different audiences arriving with different questions, so they get their own pages, their own section nav, and their own lead accent. ========================================================================== */ /* Cross-Linking Care runs amber-led and in a warmer register than the procurement-facing equipment page. */ body.ctx-care { --lead: #C97A16; --lead-hi: #E8A33D; --lead-solid: #E8A33D; --on-lead: #26170A; --lead-wash: #FBF0DE; --focus: #C97A16; } /* --- the audience switch, pinned in the sticky masthead ------------------ */ .ctxswitch { display: flex; border: 1px solid var(--line-strong); border-radius: 2px; overflow: hidden; flex: none; } .ctxswitch__a { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; font-family: var(--font-display); font-size: var(--step--1); font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; background: var(--surface); transition: background-color .16s ease, color .16s ease; } .ctxswitch__a + .ctxswitch__a { border-left: 1px solid var(--line-strong); } .ctxswitch__a:hover { color: var(--ink); background: var(--surface-sunk); } .ctxswitch__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .ctxswitch__a[data-side="equipment"] .ctxswitch__dot { background: #17787F; } .ctxswitch__a[data-side="care"] .ctxswitch__dot { background: #E8A33D; } .ctxswitch__a[aria-current="page"] { font-weight: 600; color: var(--on-lead); background: var(--lead-solid); } .ctxswitch__a[aria-current="page"]:hover { color: var(--on-lead); background: var(--lead-solid); } .ctxswitch__a[aria-current="page"] .ctxswitch__dot { background: var(--on-lead); } @media (max-width: 1180px) { .masthead__in { flex-wrap: wrap; } .ctxswitch { order: 3; width: 100%; margin: .2rem 0 .55rem; } .nav { order: 4; } .ctxswitch__a { flex: 1; justify-content: center; padding: .7rem .5rem; } } /* --- crossover band: the other half of the business, made unmissable ----- */ .crossover { border-top: var(--rule); border-bottom: var(--rule); background: var(--lead-wash); } .crossover--to-care { background: #FBF0DE; } .crossover--to-equipment { background: #E4EEEE; } .crossover__in { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; justify-content: space-between; padding-block: 1.4rem; } .crossover__txt { display: flex; align-items: flex-start; gap: .9rem; max-width: 62ch; } .crossover__ico { flex: none; margin-top: .15rem; } .crossover--to-care .crossover__ico { color: #A35F0E; } .crossover--to-equipment .crossover__ico { color: #0E4A4F; } .crossover h2 { font-size: var(--step-1); font-weight: 600; letter-spacing: -.012em; color: #241708; } .crossover--to-equipment h2 { color: #07262A; } .crossover p { margin-top: .3rem; font-size: var(--step--1); line-height: 1.6; color: #4A3313; } .crossover--to-equipment p { color: #244A4C; } .crossover .btn { flex: none; } .crossover--to-care .btn { background: #C97A16; border-color: #C97A16; color: #FFF8EE; } .crossover--to-care .btn:hover { background: #A35F0E; border-color: #A35F0E; color: #fff; } .crossover--to-equipment .btn { background: #0E4A4F; border-color: #0E4A4F; color: #F2F7F6; } .crossover--to-equipment .btn:hover { background: #17787F; border-color: #17787F; } /* --- tenders: what actually goes in the bid envelope --------------------- */ .tender { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: var(--rule); margin-top: 2.5rem; } @media (max-width: 700px) { .tender { grid-template-columns: minmax(0, 1fr); } } .tender__i { background: var(--surface); padding: 1.15rem 1.35rem; display: flex; gap: .85rem; } .tender__ck { flex: none; color: var(--lead); margin-top: .18rem; } .tender__i h3 { font-family: var(--font-display); font-size: var(--step-0); font-weight: 600; } .tender__i p { margin-top: .25rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.55; } /* --- care page: recovery, honestly -------------------------------------- */ .weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: var(--rule); margin-top: 2.5rem; } @media (max-width: 860px) { .weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 500px) { .weeks { grid-template-columns: minmax(0, 1fr); } } .week { background: var(--surface); padding: 1.35rem; display: flex; flex-direction: column; gap: .55rem; } .week__t { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--lead); } .week h3 { font-size: var(--step-0); font-weight: 600; } .week p { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; } /* --- care page: what a price actually covers ---------------------------- */ .costs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(1.75rem, 4vw, 3rem); margin-top: 2.25rem; align-items: start; } @media (max-width: 820px) { .costs { grid-template-columns: minmax(0, 1fr); } } .incl { list-style: none; margin: 0; padding: 0; border-top: var(--rule); } .incl li { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 0; border-bottom: var(--rule); font-size: var(--step--1); color: var(--ink-soft); line-height: 1.55; } .incl svg { flex: none; color: var(--lead); margin-top: .2rem; } .incl b { color: var(--ink); font-weight: 500; } /* --- care page: who performs the procedure ------------------------------ */ .surgeon { margin-top: 2.25rem; padding: 1.35rem 1.5rem; background: var(--surface); border: var(--rule); border-left: 3px solid var(--lead); border-radius: 2px; } .surgeon h3 { font-size: var(--step-1); font-weight: 600; } .surgeon p { margin-top: .55rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.62; max-width: 68ch; } .surgeon p + p { margin-top: .7rem; } /* --- care page: the cornea illustration, in the warmer register ---------- */ .cornea { margin: 0; background: var(--surface); border: var(--rule); border-radius: 3px; padding: 1.35rem; position: relative; overflow: hidden; box-shadow: var(--shadow-lift); } .cornea::after { content: ""; position: absolute; inset: -30% -15% auto auto; width: 22rem; height: 22rem; border-radius: 50%; background: radial-gradient(circle, rgba(232,163,61,.16) 0%, rgba(232,163,61,0) 70%); pointer-events: none; } .cornea > * { position: relative; } .cornea__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding-bottom: .9rem; border-bottom: var(--rule); } .cornea__dwg { display: block; width: 100%; height: auto; margin: .6rem 0 .2rem; } .cornea__dwg text { font-family: var(--font-body); } .cn-t { font-size: 15px; fill: var(--ink); font-weight: 500; } .cn-s { font-size: 13.5px; fill: var(--muted); } .cn-a { font-size: 12.5px; fill: var(--muted); font-style: italic; } .cornea__ft { margin-top: .9rem; padding-top: .9rem; border-top: var(--rule); font-size: var(--step--1); color: var(--ink-soft); line-height: 1.55; } .cn-bond { animation: bond 3.6s ease-in-out infinite; } @keyframes bond { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* --- care page reads warmer: more air, fewer hairlines ------------------- */ .ctx-care .lede { font-size: var(--step-2); line-height: 1.5; } .ctx-care .faq summary::after { border-color: var(--lead); } .ctx-care .hours { border-left-color: var(--lead); } .ctx-care .field label .req { color: var(--lead); } /* --- a consent note that needs to be read, not skimmed ------------------- */ .privnote { margin: 0 0 1.25rem; padding: .85rem 1rem; background: var(--lead-wash); border: 1px solid var(--lead); border-radius: 2px; font-size: var(--step--1); line-height: 1.55; color: var(--ink-soft); } .privnote b { color: var(--ink); font-weight: 500; } /* --- shared anatomy section: one diagram read two ways ------------------- */ .anatomy { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-top: 2.5rem; } @media (max-width: 900px) { .anatomy { grid-template-columns: minmax(0, 1fr); } } .anatomy__fig { margin: 0; background: var(--surface); border: var(--rule); border-radius: 3px; padding: 1.1rem; } .anatomy__dwg { display: block; width: 100%; height: auto; } .anatomy__mk circle { fill: var(--lead); } .anatomy__mk text { font-family: var(--font-display); font-size: 15px; font-weight: 700; fill: var(--on-lead); } .anatomy__key { list-style: none; margin: 0; padding: 0; border-top: var(--rule); counter-reset: none; } .anatomy__key li { display: grid; grid-template-columns: 1.85rem minmax(0, 1fr); gap: .95rem; padding: .95rem 0; border-bottom: var(--rule); } .anatomy__n { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--lead); color: var(--on-lead); font-family: var(--font-display); font-size: var(--step--2); font-weight: 700; margin-top: .1rem; } .anatomy__key h3 { font-size: var(--step-0); font-weight: 600; } .anatomy__c { margin-top: .22rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.5; } .anatomy__i { margin-top: .35rem; font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); line-height: 1.5; letter-spacing: .02em; } /* On a phone the masthead carries two rows (brand, then the audience switch), which left it eating a fifth of the screen. The switch earns its row; the brand descriptor does not, so it goes. */ @media (max-width: 560px) { .masthead__in { padding-block: .55rem; } .brand__sub { display: none; } .brand__mark { width: 30px; height: 30px; } .ctxswitch { margin: .15rem 0 .4rem; } .ctxswitch__a { padding: .58rem .5rem; } }