الصفحات صعب
Clinic — Specialist / Surgery Center Landing
Premium specialist and surgery center landing in a deep-blue, silver and restrained-gold palette with modern serif headings. Sticky nav with mobile menu, a gradient hero with a live consultation desk, a six-card specialties grid, an animated outcomes band, text-based accreditation seals, a featured-surgeon spotlight, and a validated consultation request form. Reveal-on-scroll, scroll-spy nav, counting stats, and toast feedback throughout.
فتح في المختبر
MCP
html css vanilla-js
الأهداف: JS HTML
الكود
:root {
--navy: #11284a;
--navy-d: #0a1a33;
--navy-700: #0e2240;
--steel: #5b7299;
--steel-soft: #eaeff7;
--silver: #dfe5ee;
--silver-2: #c7d1e1;
--gold: #c7a86a;
--gold-d: #a8884a;
--gold-soft: #f3ebd9;
--ink: #0d1b30;
--ink-2: #33425c;
--muted: #6c7993;
--bg: #f6f8fc;
--white: #ffffff;
--line: rgba(13, 27, 48, 0.1);
--line-2: rgba(13, 27, 48, 0.18);
--ok: #2f7a6b;
--warn: #b5852c;
--danger: #c2503e;
--font: "Inter", system-ui, -apple-system, sans-serif;
--serif: "Fraunces", Georgia, "Times New Roman", serif;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--shadow-1: 0 1px 2px rgba(13, 27, 48, 0.05), 0 6px 18px rgba(13, 27, 48, 0.07);
--shadow-2: 0 22px 52px rgba(10, 26, 51, 0.26);
--shadow-gold: 0 10px 26px rgba(199, 168, 106, 0.34);
--maxw: 1140px;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
line-height: 1.5;
}
.serif {
font-family: var(--serif);
font-weight: 500;
letter-spacing: -0.01em;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--navy);
color: #fff;
padding: 10px 16px;
border-radius: 0 0 var(--r-sm) 0;
font-weight: 600;
font-size: 0.9rem;
}
.skip-link:focus {
left: 0;
}
a {
color: inherit;
}
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
border-radius: 4px;
}
/* ── Buttons ── */
.btn {
--btn-pad: 11px 20px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: none;
border-radius: 999px;
padding: var(--btn-pad);
font: inherit;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: transform 0.12s ease, background 0.18s, border-color 0.18s, box-shadow 0.18s,
color 0.18s;
}
.btn:active {
transform: translateY(1px);
}
.btn-sm {
--btn-pad: 9px 16px;
font-size: 0.84rem;
}
.btn-lg {
--btn-pad: 14px 26px;
font-size: 0.96rem;
}
.btn-block {
width: 100%;
}
.btn-primary {
background: var(--navy);
color: #fff;
box-shadow: 0 8px 20px rgba(17, 40, 74, 0.22);
}
.btn-primary:hover {
background: var(--navy-d);
box-shadow: 0 12px 26px rgba(17, 40, 74, 0.3);
}
.btn-gold {
background: linear-gradient(135deg, var(--gold), var(--gold-d));
color: var(--navy-d);
box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
filter: brightness(1.04);
box-shadow: 0 14px 30px rgba(199, 168, 106, 0.42);
}
.btn-ghost {
background: transparent;
border: 1px solid var(--line-2);
color: var(--ink-2);
}
.btn-ghost:hover {
border-color: var(--navy);
background: var(--steel-soft);
color: var(--navy);
}
/* ── Nav ── */
.nav {
position: sticky;
top: 0;
z-index: 40;
background: rgba(246, 248, 252, 0.82);
backdrop-filter: saturate(140%) blur(12px);
border-bottom: 1px solid transparent;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.nav.is-stuck {
border-bottom-color: var(--line);
box-shadow: 0 6px 22px rgba(13, 27, 48, 0.07);
background: rgba(246, 248, 252, 0.94);
}
.nav-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 14px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 11px;
text-decoration: none;
color: var(--navy);
}
.brand-mark {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: linear-gradient(150deg, var(--navy), var(--navy-d));
color: var(--gold);
box-shadow: inset 0 0 0 1px rgba(199, 168, 106, 0.4);
}
.brand-name {
display: flex;
flex-direction: column;
font-family: var(--serif);
font-weight: 600;
font-size: 1.16rem;
line-height: 1.04;
letter-spacing: -0.01em;
color: var(--navy);
}
.brand-sub {
font-family: var(--font);
font-size: 0.64rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--steel);
margin-top: 3px;
}
.brand-name.big {
font-size: 1.42rem;
}
.nav-links {
display: flex;
align-items: center;
gap: 28px;
margin-left: auto;
margin-right: 6px;
}
.nav-links a {
text-decoration: none;
font-weight: 600;
font-size: 0.92rem;
color: var(--ink-2);
position: relative;
padding: 4px 0;
transition: color 0.15s;
}
.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
border-radius: 2px;
background: var(--gold);
transition: width 0.2s ease;
}
.nav-links a:hover,
.nav-links a.is-active {
color: var(--navy);
}
.nav-links a:hover::after,
.nav-links a.is-active::after {
width: 100%;
}
.nav-cta {
display: flex;
align-items: center;
gap: 12px;
}
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 42px;
height: 42px;
padding: 0 10px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 11px;
cursor: pointer;
}
.nav-toggle span {
height: 2px;
border-radius: 2px;
background: var(--navy);
transition: transform 0.22s ease, opacity 0.18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ── Hero ── */
.hero {
position: relative;
overflow: hidden;
background: radial-gradient(120% 130% at 15% 0%, #1b3a66 0%, var(--navy) 42%, var(--navy-d) 100%);
color: #eaf0fb;
isolation: isolate;
}
.hero-glow {
position: absolute;
top: -30%;
right: -10%;
width: 60%;
height: 130%;
background: radial-gradient(circle, rgba(199, 168, 106, 0.22), transparent 62%);
filter: blur(4px);
z-index: -1;
}
.hero-grid-lines {
position: absolute;
inset: 0;
z-index: -1;
background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 70%);
-webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 70%);
}
.hero-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 84px 22px 92px;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 52px;
align-items: center;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #d6c79a;
background: rgba(199, 168, 106, 0.12);
border: 1px solid rgba(199, 168, 106, 0.3);
padding: 7px 14px;
border-radius: 999px;
}
.eyebrow .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 4px rgba(199, 168, 106, 0.2);
}
.display {
margin-top: 22px;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(2.3rem, 5vw, 3.5rem);
line-height: 1.06;
letter-spacing: -0.02em;
color: #fff;
}
.display .hl {
color: var(--gold);
font-style: italic;
}
.lede {
margin-top: 20px;
max-width: 38ch;
font-size: 1.06rem;
color: #c4d0e6;
line-height: 1.62;
}
.hero-actions {
margin-top: 28px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero .btn-ghost {
border-color: rgba(255, 255, 255, 0.26);
color: #eaf0fb;
}
.hero .btn-ghost:hover {
border-color: var(--gold);
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
.hero-trust {
margin-top: 38px;
display: flex;
gap: 34px;
list-style: none;
flex-wrap: wrap;
}
.hero-trust li {
display: flex;
flex-direction: column;
}
.hero-trust strong {
font-family: var(--serif);
font-size: 1.7rem;
font-weight: 600;
color: #fff;
}
.hero-trust span {
font-size: 0.82rem;
color: #9fb0cd;
margin-top: 2px;
}
/* Hero card */
.hero-card {
background: rgba(255, 255, 255, 0.97);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: var(--r-lg);
padding: 24px;
color: var(--ink);
box-shadow: var(--shadow-2);
}
.hc-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.hc-tag {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--steel);
}
.hc-headline {
margin: 16px 0 4px;
display: flex;
align-items: baseline;
gap: 10px;
}
.hc-num {
font-family: var(--serif);
font-size: 2.6rem;
font-weight: 600;
line-height: 1;
color: var(--navy);
}
.hc-unit {
font-size: 0.88rem;
color: var(--muted);
max-width: 14ch;
line-height: 1.35;
}
.hc-list {
list-style: none;
margin: 18px 0;
border-top: 1px solid var(--line);
}
.hc-list li {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 0;
border-bottom: 1px solid var(--line);
font-size: 0.9rem;
color: var(--ink-2);
}
.hc-list li span:nth-child(2) {
flex: 1;
}
.hc-list strong {
font-weight: 600;
color: var(--navy);
font-size: 0.86rem;
}
.hc-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
}
.hc-foot {
margin-top: 16px;
font-size: 0.78rem;
color: var(--muted);
text-align: center;
}
/* ── Badges ── */
.badge {
font-size: 0.7rem;
font-weight: 700;
padding: 4px 11px;
border-radius: 999px;
white-space: nowrap;
}
.badge.ok {
background: rgba(47, 122, 107, 0.14);
color: var(--ok);
}
.badge.warn {
background: rgba(181, 133, 44, 0.16);
color: var(--warn);
}
/* ── Section scaffolding ── */
.section {
max-width: var(--maxw);
margin: 0 auto;
padding: 84px 22px;
}
.section-head {
max-width: 640px;
margin: 0 auto 44px;
text-align: center;
}
.kicker {
display: inline-block;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-d);
}
.kicker.light {
color: var(--gold);
}
.section-head h2 {
margin-top: 12px;
font-size: clamp(1.6rem, 3.4vw, 2.3rem);
color: var(--navy);
}
.section-sub {
margin-top: 14px;
font-size: 1.02rem;
color: var(--ink-2);
line-height: 1.6;
}
.grid {
display: grid;
gap: 18px;
}
/* ── Specialties grid ── */
.specialties-grid {
grid-template-columns: repeat(3, 1fr);
}
.spec {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 28px 24px;
box-shadow: var(--shadow-1);
position: relative;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.spec::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--navy), var(--gold));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.28s ease;
}
.spec:hover,
.spec:focus-visible {
transform: translateY(-4px);
box-shadow: var(--shadow-2);
border-color: transparent;
}
.spec:hover::before,
.spec:focus-visible::before {
transform: scaleX(1);
}
.spec-icon {
display: grid;
place-items: center;
width: 50px;
height: 50px;
border-radius: 14px;
background: var(--steel-soft);
color: var(--navy);
margin-bottom: 18px;
transition: background 0.2s, color 0.2s;
}
.spec:hover .spec-icon {
background: var(--navy);
color: var(--gold);
}
.spec h3 {
font-size: 1.08rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--navy);
}
.spec p {
margin-top: 9px;
font-size: 0.92rem;
color: var(--ink-2);
line-height: 1.56;
}
.spec-tag {
display: inline-block;
margin-top: 16px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gold-d);
background: var(--gold-soft);
padding: 4px 11px;
border-radius: 999px;
}
/* ── Outcomes band ── */
.band {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--navy-d), var(--navy) 55%, #173356);
color: #eaf0fb;
isolation: isolate;
}
.band-glow {
position: absolute;
bottom: -40%;
left: -10%;
width: 50%;
height: 140%;
background: radial-gradient(circle, rgba(199, 168, 106, 0.18), transparent 60%);
z-index: -1;
}
.band-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 76px 22px;
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 52px;
align-items: center;
}
.band-copy h2 {
margin-top: 12px;
font-size: clamp(1.7rem, 3.4vw, 2.4rem);
}
.serif.light,
.band-copy h2 {
color: #fff;
}
.band-copy p {
margin-top: 16px;
font-size: 1rem;
color: #c4d0e6;
line-height: 1.64;
max-width: 42ch;
}
.band-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.band-stat {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--r-md);
padding: 24px 22px;
transition: border-color 0.2s, background 0.2s;
}
.band-stat:hover {
border-color: rgba(199, 168, 106, 0.5);
background: rgba(255, 255, 255, 0.08);
}
.stat-num {
font-family: var(--serif);
font-size: clamp(2rem, 4vw, 2.7rem);
font-weight: 600;
line-height: 1;
color: var(--gold);
}
.band-stat dd {
margin-top: 8px;
font-size: 0.86rem;
color: #b3c1da;
}
/* ── Accreditation seals ── */
.seals {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.seal {
display: flex;
align-items: center;
gap: 14px;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 18px;
box-shadow: var(--shadow-1);
transition: transform 0.18s ease, border-color 0.18s;
}
.seal:hover {
transform: translateY(-3px);
border-color: var(--gold);
}
.seal-mark {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
flex-shrink: 0;
font-family: var(--serif);
font-weight: 600;
font-size: 0.92rem;
color: var(--navy);
background: radial-gradient(circle at 30% 25%, #fff, var(--silver));
border: 2px solid var(--silver-2);
box-shadow: inset 0 0 0 3px rgba(199, 168, 106, 0.35);
}
.seal div {
display: flex;
flex-direction: column;
}
.seal strong {
font-size: 0.9rem;
font-weight: 700;
color: var(--navy);
line-height: 1.25;
}
.seal span {
font-size: 0.78rem;
color: var(--muted);
margin-top: 4px;
}
/* ── Surgeon spotlight ── */
.spotlight {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 48px;
align-items: center;
background: linear-gradient(135deg, var(--white), var(--steel-soft));
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 44px;
box-shadow: var(--shadow-1);
}
.spot-portrait {
position: relative;
display: grid;
place-items: center;
min-height: 280px;
}
.spot-avatar {
width: 168px;
height: 168px;
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--serif);
font-weight: 600;
font-size: 3.4rem;
color: var(--gold);
background: linear-gradient(150deg, var(--navy), var(--navy-d));
box-shadow: inset 0 0 0 2px rgba(199, 168, 106, 0.45), var(--shadow-2);
z-index: 2;
}
.spot-ring {
position: absolute;
border-radius: 50%;
border: 1px solid var(--silver-2);
z-index: 1;
}
.spot-ring.r1 {
width: 210px;
height: 210px;
}
.spot-ring.r2 {
width: 250px;
height: 250px;
border-style: dashed;
border-color: rgba(199, 168, 106, 0.4);
}
.spot-badge {
position: absolute;
bottom: 18px;
z-index: 3;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--navy-d);
background: linear-gradient(135deg, var(--gold), var(--gold-d));
padding: 6px 14px;
border-radius: 999px;
box-shadow: var(--shadow-gold);
}
.spot-copy h2 {
margin-top: 12px;
font-size: clamp(1.5rem, 3vw, 2.05rem);
color: var(--navy);
}
.spot-role {
margin-top: 6px;
font-weight: 600;
color: var(--steel);
font-size: 0.95rem;
}
.spot-bio {
margin-top: 16px;
font-size: 1rem;
color: var(--ink-2);
line-height: 1.64;
max-width: 52ch;
}
.spot-stats {
list-style: none;
display: flex;
gap: 30px;
margin: 22px 0;
flex-wrap: wrap;
}
.spot-stats li {
display: flex;
flex-direction: column;
}
.spot-stats strong {
font-family: var(--serif);
font-size: 1.5rem;
font-weight: 600;
color: var(--navy);
}
.spot-stats span {
font-size: 0.8rem;
color: var(--muted);
margin-top: 2px;
}
.spot-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* ── Consult CTA ── */
.consult-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-2);
border: 1px solid var(--line);
}
.consult-copy {
background: linear-gradient(150deg, var(--navy), var(--navy-d));
color: #eaf0fb;
padding: 48px 40px;
}
.consult-copy h2 {
margin-top: 12px;
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: #fff;
}
.consult-copy p {
margin-top: 14px;
font-size: 1rem;
color: #c4d0e6;
line-height: 1.62;
}
.consult-points {
list-style: none;
margin: 22px 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.consult-points li {
display: flex;
align-items: center;
gap: 11px;
font-size: 0.94rem;
color: #dbe4f4;
}
.consult-points li span {
color: var(--gold);
font-size: 0.8rem;
}
.consult-meta {
margin-top: 20px;
font-size: 0.84rem;
color: #9fb0cd;
border-top: 1px solid rgba(255, 255, 255, 0.14);
padding-top: 16px;
}
.consult-form {
background: var(--white);
padding: 40px;
display: flex;
flex-direction: column;
gap: 16px;
}
.field {
display: flex;
flex-direction: column;
gap: 7px;
}
.field > span {
font-size: 0.82rem;
font-weight: 600;
color: var(--ink-2);
}
.field input,
.field select,
.field textarea {
font: inherit;
font-size: 0.94rem;
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
padding: 11px 13px;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.field textarea {
resize: vertical;
min-height: 76px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--navy);
background: var(--white);
box-shadow: 0 0 0 3px rgba(17, 40, 74, 0.12);
}
.field input.invalid,
.field select.invalid {
border-color: var(--danger);
box-shadow: 0 0 0 3px rgba(194, 80, 62, 0.12);
}
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.consult-fine {
font-size: 0.78rem;
color: var(--muted);
text-align: center;
}
/* ── Footer ── */
.footer {
background: var(--navy-d);
color: #c4d0e6;
margin-top: 40px;
}
.footer-grid {
max-width: var(--maxw);
margin: 0 auto;
padding: 56px 22px 36px;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
gap: 40px;
}
.footer .brand-name,
.footer .brand-name .brand-sub {
color: #fff;
}
.footer .brand-sub {
color: var(--steel);
}
.foot-brand p {
margin-top: 14px;
font-size: 0.92rem;
line-height: 1.6;
max-width: 38ch;
color: #9fb0cd;
}
.foot-col h4 {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.foot-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 0.9rem;
}
.foot-col a {
text-decoration: none;
transition: color 0.15s;
}
.foot-col a:hover {
color: #fff;
}
.foot-col span {
color: var(--steel);
display: inline-block;
min-width: 86px;
}
.footer-bar {
max-width: var(--maxw);
margin: 0 auto;
padding: 20px 22px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
font-size: 0.82rem;
color: #8294b3;
}
.footer-bar a {
text-decoration: none;
color: var(--gold);
}
/* ── Toast ── */
.toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translateX(-50%) translateY(12px);
background: var(--navy-d);
color: #fff;
padding: 13px 22px;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 500;
box-shadow: var(--shadow-2);
border: 1px solid rgba(199, 168, 106, 0.4);
z-index: 60;
max-width: 90vw;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ── Reveal on scroll ── */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in {
opacity: 1;
transform: none;
}
/* ── Responsive ── */
@media (max-width: 900px) {
.hero-inner,
.band-inner,
.spotlight,
.consult-card {
grid-template-columns: 1fr;
}
.hero-inner {
gap: 38px;
padding: 64px 22px 72px;
}
.spotlight {
text-align: center;
gap: 30px;
}
.spot-stats,
.spot-actions {
justify-content: center;
}
.specialties-grid {
grid-template-columns: repeat(2, 1fr);
}
.seals {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 520px) {
.nav-links {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--white);
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-1);
padding: 8px 16px 16px;
margin: 0;
transform: translateY(-8px);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-links.open {
transform: none;
opacity: 1;
pointer-events: auto;
}
.nav-links a {
padding: 12px 4px;
border-bottom: 1px solid var(--line);
}
.nav-links a::after {
display: none;
}
.nav-toggle {
display: flex;
}
.nav-cta .btn-primary {
display: none;
}
.section,
.band-inner {
padding-top: 56px;
padding-bottom: 56px;
}
.hero-trust {
gap: 24px;
}
.band-stats,
.specialties-grid,
.seals,
.field-row {
grid-template-columns: 1fr;
}
.spotlight,
.consult-copy,
.consult-form {
padding: 28px 22px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.footer-bar {
justify-content: center;
text-align: center;
}
}
@media (prefers-reduced-motion: reduce) {
* {
scroll-behavior: auto !important;
}
.reveal {
opacity: 1;
transform: none;
transition: none;
}
}(function () {
"use strict";
/* ── Toast helper ── */
const toastEl = document.getElementById("toast");
let toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.hidden = false;
// force reflow so the transition runs every time
void toastEl.offsetWidth;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(() => {
toastEl.classList.remove("show");
setTimeout(() => {
toastEl.hidden = true;
}, 280);
}, 2600);
}
/* ── Sticky nav shadow ── */
const nav = document.getElementById("nav");
const onScrollNav = () => {
if (!nav) return;
nav.classList.toggle("is-stuck", window.scrollY > 8);
};
onScrollNav();
window.addEventListener("scroll", onScrollNav, { passive: true });
/* ── Mobile nav toggle ── */
const navToggle = document.getElementById("navToggle");
const navLinks = document.getElementById("navLinks");
function closeMenu() {
if (!navToggle || !navLinks) return;
navToggle.setAttribute("aria-expanded", "false");
navToggle.setAttribute("aria-label", "Open menu");
navLinks.classList.remove("open");
}
if (navToggle && navLinks) {
navToggle.addEventListener("click", () => {
const open = navToggle.getAttribute("aria-expanded") === "true";
navToggle.setAttribute("aria-expanded", String(!open));
navToggle.setAttribute("aria-label", open ? "Open menu" : "Close menu");
navLinks.classList.toggle("open", !open);
});
}
/* ── Smooth in-page nav + close mobile menu ── */
document.querySelectorAll("[data-link]").forEach((link) => {
link.addEventListener("click", (e) => {
const href = link.getAttribute("href") || "";
if (href.startsWith("#")) {
const target = document.querySelector(href);
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: "smooth", block: "start" });
closeMenu();
}
}
});
});
/* ── Reveal on scroll ── */
const revealEls = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
const io = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("in");
io.unobserve(entry.target);
}
});
},
{ threshold: 0.14, rootMargin: "0px 0px -40px 0px" }
);
revealEls.forEach((el) => io.observe(el));
} else {
revealEls.forEach((el) => el.classList.add("in"));
}
/* ── Active nav link via section observer ── */
const links = Array.from(document.querySelectorAll(".nav-links a[href^='#']"));
const sections = links
.map((l) => document.querySelector(l.getAttribute("href")))
.filter(Boolean);
if ("IntersectionObserver" in window && sections.length) {
const spy = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const id = entry.target.id;
links.forEach((l) =>
l.classList.toggle("is-active", l.getAttribute("href") === "#" + id)
);
}
});
},
{ rootMargin: "-45% 0px -50% 0px" }
);
sections.forEach((s) => spy.observe(s));
}
/* ── Animated stat counters ── */
function animateCount(el) {
const target = parseFloat(el.dataset.count || "0");
const suffix = el.dataset.suffix || "";
const decimals = parseInt(el.dataset.decimals || "0", 10);
const duration = 1400;
const start = performance.now();
function frame(now) {
const p = Math.min((now - start) / duration, 1);
const eased = 1 - Math.pow(1 - p, 3); // easeOutCubic
const value = target * eased;
const shown =
decimals > 0
? value.toFixed(decimals)
: Math.round(value).toLocaleString("en-US");
el.textContent = shown + suffix;
if (p < 1) requestAnimationFrame(frame);
else
el.textContent =
(decimals > 0 ? target.toFixed(decimals) : target.toLocaleString("en-US")) +
suffix;
}
requestAnimationFrame(frame);
}
const statEls = document.querySelectorAll(".stat-num[data-count]");
if ("IntersectionObserver" in window) {
const statObs = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
animateCount(entry.target);
statObs.unobserve(entry.target);
}
});
},
{ threshold: 0.5 }
);
statEls.forEach((el) => statObs.observe(el));
} else {
statEls.forEach(animateCount);
}
/* ── Hero consult desk: reserve a slot (live count) ── */
const slotCountEl = document.getElementById("slotCount");
const reserveBtn = document.getElementById("reserveBtn");
const deskBadge = document.getElementById("deskBadge");
if (reserveBtn && slotCountEl) {
reserveBtn.addEventListener("click", () => {
let count = parseInt(slotCountEl.textContent, 10) || 0;
if (count <= 0) {
toast("This week is fully booked — we'll add you to the waitlist.");
return;
}
count -= 1;
slotCountEl.textContent = String(count);
if (count === 0) {
reserveBtn.textContent = "Join the waitlist";
if (deskBadge) {
deskBadge.textContent = "Waitlist only";
deskBadge.classList.remove("ok");
deskBadge.classList.add("warn");
}
toast("Last slot reserved — desk is now waitlist only.");
} else {
toast("Consult slot reserved · " + count + " remaining this week.");
}
});
}
/* ── Surgeon profile button ── */
const bioBtn = document.getElementById("bioBtn");
if (bioBtn) {
bioBtn.addEventListener("click", () => {
toast("Dr. Vasquez's full profile would open here.");
});
}
/* ── Consultation form ── */
const form = document.getElementById("consultForm");
if (form) {
form.addEventListener("submit", (e) => {
e.preventDefault();
const name = form.querySelector("[name='name']");
const email = form.querySelector("[name='email']");
let ok = true;
[name, email].forEach((f) => f && f.classList.remove("invalid"));
if (!name || !name.value.trim()) {
ok = false;
if (name) name.classList.add("invalid");
}
const emailVal = email ? email.value.trim() : "";
if (!emailVal || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailVal)) {
ok = false;
if (email) email.classList.add("invalid");
}
if (!ok) {
toast("Please add your name and a valid email so we can reply.");
const firstInvalid = form.querySelector(".invalid");
if (firstInvalid) firstInvalid.focus();
return;
}
const firstName = name.value.trim().split(/\s+/)[0];
const specialty = form.querySelector("[name='specialty']");
const spec = specialty ? specialty.value : "a specialist";
toast("Thank you, " + firstName + " — your " + spec + " request is in.");
form.reset();
});
form.querySelectorAll("input, select, textarea").forEach((el) => {
el.addEventListener("input", () => el.classList.remove("invalid"));
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,[email protected],400;9..144,500;9..144,600&display=swap"
/>
<link rel="stylesheet" href="style.css" />
<title>Specialty Care · Meridian Surgical Institute</title>
</head>
<body>
<a class="skip-link" href="#hero">Skip to content</a>
<!-- ── Sticky nav ── -->
<header class="nav" id="nav">
<div class="nav-inner">
<a class="brand" href="#hero" aria-label="Meridian Surgical Institute home">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none">
<path
d="M12 2 4 6v6c0 4.4 3.4 8.2 8 10 4.6-1.8 8-5.6 8-10V6l-8-4Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linejoin="round"
/>
<path d="M12 8v6M9 11h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
</span>
<span class="brand-name">Meridian<span class="brand-sub">Surgical Institute</span></span>
</a>
<nav class="nav-links" id="navLinks" aria-label="Primary">
<a href="#specialties" data-link>Specialties</a>
<a href="#outcomes" data-link>Outcomes</a>
<a href="#accreditation" data-link>Accreditation</a>
<a href="#surgeon" data-link>Our surgeons</a>
</nav>
<div class="nav-cta">
<a class="btn btn-primary btn-sm" href="#consult" data-link>Request a consult</a>
<button
class="nav-toggle"
id="navToggle"
aria-label="Open menu"
aria-expanded="false"
aria-controls="navLinks"
>
<span></span><span></span><span></span>
</button>
</div>
</div>
</header>
<main>
<!-- ── Hero ── -->
<section class="hero" id="hero">
<span class="hero-glow" aria-hidden="true"></span>
<span class="hero-grid-lines" aria-hidden="true"></span>
<div class="hero-inner">
<div class="hero-copy reveal">
<span class="eyebrow">
<span class="dot" aria-hidden="true"></span> Accredited Center of Surgical Excellence
</span>
<h1 class="display">
Advanced specialty care, <span class="hl">delivered with precision.</span>
</h1>
<p class="lede">
Meridian Surgical Institute brings together fellowship-trained specialists, modern
operating suites and evidence-led protocols — so complex procedures are handled with the
composure they deserve. Every case begins with an unhurried consultation.
</p>
<div class="hero-actions">
<a class="btn btn-primary btn-lg" href="#consult" data-link>Request a consultation</a>
<a class="btn btn-ghost btn-lg" href="#specialties" data-link>Explore specialties</a>
</div>
<ul class="hero-trust" aria-label="At a glance">
<li><strong>32</strong><span>fellowship-trained surgeons</span></li>
<li><strong>6</strong><span>specialty programs</span></li>
<li><strong>4</strong><span>state-of-the-art suites</span></li>
</ul>
</div>
<aside class="hero-card reveal" aria-label="Consultation availability">
<div class="hc-top">
<span class="hc-tag">Consultation desk</span>
<span class="badge ok" id="deskBadge">Accepting referrals</span>
</div>
<p class="hc-headline">
<span class="hc-num" id="slotCount">9</span>
<span class="hc-unit">consultation slots open this week</span>
</p>
<ul class="hc-list">
<li>
<span class="hc-dot" aria-hidden="true"></span>
<span>Cardiology review</span>
<strong>Tue · 10:15</strong>
</li>
<li>
<span class="hc-dot" aria-hidden="true"></span>
<span>Orthopedic eval</span>
<strong>Wed · 14:40</strong>
</li>
<li>
<span class="hc-dot" aria-hidden="true"></span>
<span>Neurosurgery panel</span>
<strong>Thu · 09:00</strong>
</li>
</ul>
<button class="btn btn-gold btn-block" id="reserveBtn" type="button">
Reserve a consult slot
</button>
<p class="hc-foot">Reviewed by Dr. Adrien Vasquez & the surgical board</p>
</aside>
</div>
</section>
<!-- ── Specialties grid ── -->
<section class="section" id="specialties">
<header class="section-head reveal">
<span class="kicker">Centers of excellence</span>
<h2 class="serif">Specialty programs built around the case</h2>
<p class="section-sub">
Multidisciplinary teams, dedicated nursing and the latest minimally invasive techniques —
organized by the condition, not the corridor.
</p>
</header>
<div class="grid specialties-grid">
<article class="spec reveal" tabindex="0">
<span class="spec-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none">
<path d="M12 20s-7-4.3-7-9.5A3.7 3.7 0 0 1 12 7a3.7 3.7 0 0 1 7 3.5C19 15.7 12 20 12 20Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
<path d="M6 12h3l1.5-3 2 5 1.5-2H18" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<h3>Cardiology & cardiac surgery</h3>
<p>Coronary intervention, valve repair and structural heart programs led by a dedicated cardiac team.</p>
<span class="spec-tag">Heart & vascular</span>
</article>
<article class="spec reveal" tabindex="0">
<span class="spec-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none">
<path d="M8 3v4M16 3v4M8 7c0 2-2 3-2 5s2 3 2 5v4M16 7c0 2 2 3 2 5s-2 3-2 5v4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<path d="M8 12h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
</svg>
</span>
<h3>Orthopedics & joint reconstruction</h3>
<p>Robotic-assisted joint replacement, sports medicine and complex spine — built for a faster return to motion.</p>
<span class="spec-tag">Bones & joints</span>
</article>
<article class="spec reveal" tabindex="0">
<span class="spec-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none">
<path d="M9 3a3 3 0 0 0-3 3 3 3 0 0 0-2 5 3 3 0 0 0 1 5 3 3 0 0 0 4 4V3Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
<path d="M9 8h2M9 13h3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<path d="M15 3a3 3 0 0 1 3 3 3 3 0 0 1 2 5 3 3 0 0 1-1 5 3 3 0 0 1-4 4V3Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
</svg>
</span>
<h3>Neurology & neurosurgery</h3>
<p>Cerebrovascular care, image-guided tumor resection and spine surgery within a single coordinated pathway.</p>
<span class="spec-tag">Brain & spine</span>
</article>
<article class="spec reveal" tabindex="0">
<span class="spec-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none">
<path d="M7 4h6l4 4v12H7Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
<path d="M13 4v4h4" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
<path d="M11 12v4M9 14h4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
</svg>
</span>
<h3>General & minimally invasive surgery</h3>
<p>Laparoscopic and same-day procedures with rapid-recovery protocols and clear, written pre-op guidance.</p>
<span class="spec-tag">Day surgery</span>
</article>
<article class="spec reveal" tabindex="0">
<span class="spec-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none">
<circle cx="12" cy="9" r="5" stroke="currentColor" stroke-width="1.6"/>
<path d="M12 14v6M9 17h6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<path d="M10 8.5l1.5 1.5L14 7.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<h3>Anesthesiology & pain</h3>
<p>Perioperative monitoring, regional anesthesia and interventional pain management for measured comfort.</p>
<span class="spec-tag">Comfort & safety</span>
</article>
<article class="spec reveal" tabindex="0">
<span class="spec-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none">
<path d="M5 12a7 7 0 0 1 14 0M5 12a7 7 0 0 0 14 0" stroke="currentColor" stroke-width="1.6"/>
<path d="M12 5v14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<circle cx="12" cy="12" r="1.6" fill="currentColor"/>
</svg>
</span>
<h3>Rehabilitation & recovery</h3>
<p>Structured post-surgical therapy and remote check-ins that keep your recovery on a confident track.</p>
<span class="spec-tag">After-care</span>
</article>
</div>
</section>
<!-- ── Outcomes / stats band ── -->
<section class="band" id="outcomes">
<span class="band-glow" aria-hidden="true"></span>
<div class="band-inner reveal">
<div class="band-copy">
<span class="kicker light">Measured by results</span>
<h2 class="serif light">Outcomes our patients can count on</h2>
<p>
Every program publishes its outcomes to an independent registry. These figures reflect a
fictional dataset for demonstration — but the discipline behind them is the standard we hold.
</p>
</div>
<dl class="band-stats" aria-label="Outcome highlights">
<div class="band-stat">
<dt class="stat-num" data-count="98.4" data-suffix="%" data-decimals="1">0</dt>
<dd>surgical success rate</dd>
</div>
<div class="band-stat">
<dt class="stat-num" data-count="24600" data-suffix="+">0</dt>
<dd>procedures performed</dd>
</div>
<div class="band-stat">
<dt class="stat-num" data-count="27" data-suffix=" yrs">0</dt>
<dd>of specialty practice</dd>
</div>
<div class="band-stat">
<dt class="stat-num" data-count="1.9" data-suffix=" days" data-decimals="1">0</dt>
<dd>average length of stay</dd>
</div>
</dl>
</div>
</section>
<!-- ── Accreditation row ── -->
<section class="section accred" id="accreditation">
<header class="section-head reveal">
<span class="kicker">Independently verified</span>
<h2 class="serif">Accreditation & standards</h2>
<p class="section-sub">
Held to national benchmarks for safety, sterility and surgical quality — and audited on a
regular cycle.
</p>
</header>
<ul class="seals reveal" aria-label="Accreditations">
<li class="seal">
<span class="seal-mark" aria-hidden="true">JC</span>
<div>
<strong>Joint Surgical Accreditation</strong>
<span>Gold seal of approval · 2023</span>
</div>
</li>
<li class="seal">
<span class="seal-mark" aria-hidden="true">ISO</span>
<div>
<strong>ISO 9001 Quality Management</strong>
<span>Certified facility processes</span>
</div>
</li>
<li class="seal">
<span class="seal-mark" aria-hidden="true">CoE</span>
<div>
<strong>Center of Excellence</strong>
<span>Cardiac & orthopedic programs</span>
</div>
</li>
<li class="seal">
<span class="seal-mark" aria-hidden="true">AS</span>
<div>
<strong>Ambulatory Surgery Accreditation</strong>
<span>Day-surgery safety standard</span>
</div>
</li>
</ul>
</section>
<!-- ── Surgeon spotlight ── -->
<section class="section" id="surgeon">
<div class="spotlight reveal">
<div class="spot-portrait" aria-hidden="true">
<span class="spot-avatar" data-initials="AV">AV</span>
<span class="spot-ring r1"></span>
<span class="spot-ring r2"></span>
<span class="spot-badge">Chief of Surgery</span>
</div>
<div class="spot-copy">
<span class="kicker">Featured surgeon</span>
<h2 class="serif">Dr. Adrien Vasquez, MD, FACS</h2>
<p class="spot-role">Chief of Surgery · Cardiothoracic & structural heart</p>
<p class="spot-bio">
With more than two decades in cardiothoracic surgery, Dr. Vasquez leads Meridian's structural
heart program and chairs the surgical quality board. He is known for an unhurried, plain-spoken
consultation style — and for treating every plan as a shared decision.
</p>
<ul class="spot-stats" aria-label="Surgeon highlights">
<li><strong>4,200+</strong><span>procedures led</span></li>
<li><strong>22 yrs</strong><span>cardiothoracic practice</span></li>
<li><strong>5</strong><span>fellowship trainees mentored</span></li>
</ul>
<div class="spot-actions">
<a class="btn btn-primary" href="#consult" data-link>Request a consultation</a>
<button class="btn btn-ghost" id="bioBtn" type="button">View full profile</button>
</div>
</div>
</div>
</section>
<!-- ── Consult CTA / form ── -->
<section class="section consult" id="consult">
<div class="consult-card reveal">
<div class="consult-copy">
<span class="kicker">Begin with a conversation</span>
<h2 class="serif">Request a consultation</h2>
<p>
Share a few details and our surgical coordination team will reach out — typically within one
business day — to confirm timing and gather any records.
</p>
<ul class="consult-points">
<li><span aria-hidden="true">◆</span> Reviewed by the relevant specialty team</li>
<li><span aria-hidden="true">◆</span> Second opinions welcome</li>
<li><span aria-hidden="true">◆</span> Referrals coordinated for you</li>
</ul>
<p class="consult-meta">
<span id="quoteEta">Current coordination response: within 1 business day</span>
</p>
</div>
<form class="consult-form" id="consultForm" novalidate>
<label class="field">
<span>Full name</span>
<input type="text" name="name" placeholder="Jordan Ellery" autocomplete="name" required />
</label>
<div class="field-row">
<label class="field">
<span>Email</span>
<input type="email" name="email" placeholder="[email protected]" autocomplete="email" required />
</label>
<label class="field">
<span>Phone</span>
<input type="tel" name="phone" placeholder="(555) 204-7781" autocomplete="tel" />
</label>
</div>
<label class="field">
<span>Specialty of interest</span>
<select name="specialty">
<option>Cardiology & cardiac surgery</option>
<option>Orthopedics & joint reconstruction</option>
<option>Neurology & neurosurgery</option>
<option>General & minimally invasive surgery</option>
<option>Anesthesiology & pain</option>
<option>Rehabilitation & recovery</option>
</select>
</label>
<label class="field">
<span>How can we help?</span>
<textarea name="notes" rows="3" placeholder="A brief description of your condition or referral."></textarea>
</label>
<button class="btn btn-gold btn-block btn-lg" type="submit">Submit consultation request</button>
<p class="consult-fine">Illustrative form — no data is sent anywhere.</p>
</form>
</div>
</section>
</main>
<!-- ── Footer ── -->
<footer class="footer" id="contact">
<div class="footer-grid">
<div class="foot-brand">
<span class="brand-name big">Meridian<span class="brand-sub">Surgical Institute</span></span>
<p>A specialist surgery center where complex care is delivered with precision, composure and clarity.</p>
</div>
<div class="foot-col">
<h4>Visit</h4>
<ul>
<li>1800 Summit Pavilion, Tower B</li>
<li>Northgate, WA 98011</li>
<li><span>Mon – Fri</span> 7:00 AM – 6:00 PM</li>
<li><span>Surgical desk</span> 24 / 7</li>
</ul>
</div>
<div class="foot-col">
<h4>Coordination</h4>
<ul>
<li><a href="tel:+15552047781">(555) 204-7781</a></li>
<li><a href="mailto:[email protected]">[email protected]</a></li>
<li>Physician referral line</li>
</ul>
</div>
</div>
<div class="footer-bar">
<span>© 2026 Meridian Surgical Institute — a fictional center for demonstration.</span>
<a href="#hero" data-link>Back to top ↑</a>
</div>
</footer>
<div class="toast" id="toast" hidden role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Specialist / Surgery Center Landing
An authoritative, premium landing page for Meridian Surgical Institute — a fictional specialist surgery center. The deep-blue gradient hero pairs a modern serif headline with a live consultation desk card: each reservation decrements the open-slot count, and the desk gracefully flips to a waitlist once the week fills. A sticky top nav collapses into an accessible mobile menu and highlights the current section as you scroll.
Below the fold, a six-card specialties grid (cardiology, orthopedics, neurology, general surgery, anesthesiology and rehabilitation) animates on hover with a navy-to-gold accent. An outcomes band counts up success rate, procedures, years of practice and length of stay as it enters the viewport, followed by a row of text-based accreditation seals and a featured-surgeon spotlight for the Chief of Surgery.
The closing call to action is a split consultation request form with inline validation — name and email are checked, friendly toasts confirm submission or flag what is missing, and focus moves to the first invalid field. Everything is vanilla JS with reveal-on-scroll, a reduced-motion fallback, and a small toast helper for action feedback.
Illustrative UI only — not intended for real medical use.