/* Fonts are loaded via in for performance (see build_head()) rather than @import, which blocks parallel fetching. */ :root{ --ink:#0B1F3A; --ink-2:#122C52; --ink-3:#1B3E6E; --paper:#F5F7FA; --card:#FFFFFF; --slate:#3E5064; --slate-soft:#7C8BA3; --artery:#AE3529; --artery-dark:#8A2A20; --vessel:#0D7A82; --vessel-dark:#0A5F65; --vessel-bright:#14B8AE; --gold:#A9822C; --line:#E3E8EE; --radius:16px; --radius-sm:10px; --shadow:0 16px 40px -18px rgba(11,31,58,0.28); --shadow-sm:0 6px 18px -10px rgba(11,31,58,0.22); --container:1180px; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--slate); font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-size:17px; line-height:1.85; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} h1,h2,h3,h4{ font-family:'El Messiri',system-ui,sans-serif; color:var(--ink); margin:0 0 .5em; line-height:1.28; font-weight:700; } p{margin:0 0 1em;} .mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.02em;} .container{max-width:var(--container);margin:0 auto;padding:0 24px;} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} :focus-visible{outline:3px solid var(--vessel-bright);outline-offset:3px;} /* ---------- eyebrow / kicker ---------- */ .eyebrow{ display:inline-flex;align-items:center;gap:.55em; font-family:'IBM Plex Mono',monospace; font-size:.72rem;letter-spacing:.14em; color:var(--vessel); text-transform:uppercase; margin-bottom:1em; } .eyebrow::before{ content:"";width:22px;height:2px;background:var(--artery);display:inline-block; } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; padding:.95em 1.7em;border-radius:999px; font-weight:600;font-size:.98rem; border:1.5px solid transparent; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease; cursor:pointer;white-space:nowrap; } .btn-primary{background:var(--vessel);color:#fff;box-shadow:var(--shadow-sm);} .btn-primary:hover{background:var(--vessel-dark);transform:translateY(-2px);} .btn-outline{border-color:rgba(255,255,255,.55);color:#fff;} .btn-outline:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);} .btn-outline-dark{border-color:var(--line);color:var(--ink);background:#fff;} .btn-outline-dark:hover{border-color:var(--vessel);color:var(--vessel);} .btn-artery{background:var(--artery);color:#fff;box-shadow:var(--shadow-sm);} .btn-artery:hover{background:var(--artery-dark);transform:translateY(-2px);} .btn-sm{padding:.7em 1.35em;font-size:.88rem;} .btn svg{width:1.1em;height:1.1em;} /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(11,31,58,.97); backdrop-filter:blur(6px); border-bottom:1px solid rgba(255,255,255,.08); } .header-inner{ display:flex;align-items:center;justify-content:space-between; gap:24px;padding:14px 24px; } .brand{display:flex;flex-direction:column;line-height:1.25;} .brand-name{font-family:'El Messiri',sans-serif;font-weight:700;font-size:1.28rem;color:#fff;} .brand-title{font-size:.72rem;color:var(--vessel-bright);letter-spacing:.02em;} .main-nav{display:flex;align-items:center;} .nav-menu{display:flex;align-items:center;gap:6px;} .nav-menu a{ display:inline-block;padding:.6em 1em;border-radius:999px; color:rgba(255,255,255,.82);font-size:.94rem;font-weight:500; transition:background .18s ease,color .18s ease; } .nav-menu a:hover{background:rgba(255,255,255,.08);color:#fff;} .nav-menu a.active{background:var(--vessel);color:#fff;} .header-cta{margin-inline-start:8px;} .nav-toggle{ display:none;background:none;border:0;padding:10px;cursor:pointer; flex-direction:column;gap:5px; } .nav-toggle span{width:24px;height:2px;background:#fff;border-radius:2px;} /* ---------- hero ---------- */ .hero{ position:relative;overflow:hidden; background:radial-gradient(120% 140% at 15% 0%,var(--ink-3) 0%,var(--ink) 55%,#081527 100%); color:#fff;padding:96px 0 76px; } .vessel-art{position:absolute;inset:0;width:100%;height:100%;opacity:.16;pointer-events:none;} .hero-inner{position:relative;z-index:2;max-width:760px;} .hero h1{color:#fff;font-size:clamp(2.5rem,5vw,3.6rem);margin-bottom:.15em;} .hero .subtitle{ font-size:clamp(1.1rem,2vw,1.35rem);color:var(--vessel-bright); font-weight:600;margin-bottom:.9em; } .hero p.lead{color:rgba(255,255,255,.82);font-size:1.08rem;max-width:640px;} .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.8em;} .credential-strip{ position:relative;z-index:2;margin-top:52px;padding-top:28px; border-top:1px solid rgba(255,255,255,.14); display:flex;flex-wrap:wrap;gap:10px;align-items:center; } .credential-strip span.label{color:rgba(255,255,255,.55);font-size:.82rem;margin-inline-end:8px;} .chip{ font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.05em; color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); padding:.4em .9em;border-radius:999px; } /* ---------- pulse divider (signature element) ---------- */ .pulse-divider{width:100%;overflow:hidden;line-height:0;} .pulse-divider svg{width:100%;height:44px;display:block;} .pulse-line{stroke:var(--line);stroke-width:2;} .pulse-path{ fill:none;stroke:url(#pulseGrad);stroke-width:3; stroke-linecap:round;stroke-linejoin:round; } .pulse-divider.on-dark .pulse-line{stroke:rgba(255,255,255,.18);} /* ---------- section rhythm ---------- */ section{padding:84px 0;} .section-head{max-width:680px;margin-bottom:52px;} .section-head p{color:var(--slate-soft);font-size:1.05rem;} .bg-ink{background:var(--ink);color:#fff;} .bg-ink h2,.bg-ink h3,.bg-ink h4{color:#fff;} .bg-card{background:#fff;} /* ---------- grids / cards ---------- */ .grid{display:grid;gap:26px;} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-2{grid-template-columns:repeat(2,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} .card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:32px 28px;box-shadow:var(--shadow-sm); transition:transform .2s ease,box-shadow .2s ease; } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);} .card h3{font-size:1.18rem;margin-bottom:.4em;} .card p{color:var(--slate-soft);font-size:.98rem;margin-bottom:0;} .icon-badge{ width:52px;height:52px;border-radius:14px; background:linear-gradient(155deg,rgba(13,122,130,.12),rgba(174,53,41,.09)); display:flex;align-items:center;justify-content:center;margin-bottom:20px; color:var(--vessel); } .icon-badge svg{width:26px;height:26px;} /* credential dossier cards */ .cred-card{ display:flex;align-items:center;gap:16px; background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm); padding:18px 20px;box-shadow:var(--shadow-sm); } .cred-flag{font-size:1.6rem;line-height:1;} .cred-name{font-size:.98rem;color:var(--ink);font-weight:600;} .cred-code{ margin-inline-start:auto;font-family:'IBM Plex Mono',monospace; font-size:.78rem;color:var(--gold);border:1px solid rgba(169,130,44,.4); padding:.25em .7em;border-radius:999px;background:rgba(169,130,44,.07); white-space:nowrap; } .cred-group-title{ font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.1em; color:var(--slate-soft);text-transform:uppercase;margin-bottom:18px; } /* about photo layout */ .about-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:start;} .about-photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:sticky;top:110px;} .about-photo img{width:100%;height:auto;object-fit:cover;} .bio-text p{font-size:1.03rem;} /* clinic info strip */ .info-strip{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px; } .info-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm); padding:22px 24px; } .info-card .label{ font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--vessel); text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6em;display:block; } .info-card strong{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:.2em;} /* CTA band */ .cta-band{ background:linear-gradient(120deg,var(--ink) 0%,var(--ink-3) 100%); color:#fff;border-radius:var(--radius);padding:56px 48px; text-align:center;position:relative;overflow:hidden; } .cta-band h2{color:#fff;} .cta-band p{color:rgba(255,255,255,.78);max-width:560px;margin:0 auto 1.6em;} .cta-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;} /* services / conditions cards */ .service-card{position:relative;} .condition-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:30px 28px;box-shadow:var(--shadow-sm); display:flex;flex-direction:column;height:100%; } .condition-card h3{font-size:1.12rem;} .condition-card .tag{ align-self:flex-start; font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.06em; color:var(--artery);background:rgba(174,53,41,.08); padding:.3em .8em;border-radius:999px;margin-bottom:14px;text-transform:uppercase; } .condition-card .more{ margin-top:auto;padding-top:16px;font-size:.9rem;font-weight:600;color:var(--vessel); display:inline-flex;align-items:center;gap:.4em; } /* table */ .hours-table{width:100%;border-collapse:collapse;} .hours-table td{padding:14px 0;border-bottom:1px solid var(--line);} .hours-table td:first-child{color:var(--ink);font-weight:600;width:40%;} /* contact cards */ .contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;} .contact-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:30px;text-align:center; } .contact-card .icon-badge{margin:0 auto 18px;} .social-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px;} .social-pill{ border:1px solid var(--line);border-radius:999px;padding:.6em 1.3em; font-size:.9rem;font-weight:600;color:var(--ink); transition:border-color .18s ease,color .18s ease; } .social-pill:hover{border-color:var(--vessel);color:var(--vessel);} .map-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);} .map-wrap iframe{width:100%;height:380px;border:0;display:block;} /* footer */ .site-footer{background:var(--ink);color:rgba(255,255,255,.75);padding:64px 0 0;} .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;padding-bottom:44px;} .footer-col h3{color:#fff;font-size:1.2rem;} .footer-col h4{color:#fff;font-size:.92rem;text-transform:uppercase;letter-spacing:.08em;font-family:'IBM Plex Mono',monospace;font-weight:600;margin-bottom:1.1em;} .footer-col p{color:rgba(255,255,255,.62);font-size:.94rem;} .footer-col ul li{margin-bottom:.7em;} .footer-col ul a{color:rgba(255,255,255,.72);font-size:.94rem;} .footer-col ul a:hover{color:var(--vessel-bright);} .footer-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;} .footer-social a{ font-size:.8rem;border:1px solid rgba(255,255,255,.2);border-radius:999px; padding:.4em 1em;color:rgba(255,255,255,.75); } .footer-social a:hover{border-color:var(--vessel-bright);color:var(--vessel-bright);} .footer-bottom{ border-top:1px solid rgba(255,255,255,.1);padding:22px 24px; display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px; font-size:.84rem;color:rgba(255,255,255,.5); } .footer-bottom a{color:rgba(255,255,255,.6);} /* disclaimer */ .disclaimer{ margin-top:40px;padding:18px 22px;border-radius:var(--radius-sm); background:rgba(13,122,130,.06);border:1px dashed rgba(13,122,130,.35); font-size:.88rem;color:var(--vessel-dark); } /* motion */ @media (prefers-reduced-motion: no-preference){ .pulse-path{ stroke-dasharray:14 340;stroke-dashoffset:0; animation:pulseTravel 3.6s linear infinite; } .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;} .reveal.in{opacity:1;transform:none;} } @keyframes pulseTravel{ 0%{stroke-dashoffset:0;} 100%{stroke-dashoffset:-354;} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} } /* ---------- responsive ---------- */ @media (max-width:980px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} .about-grid{grid-template-columns:1fr;} .about-photo{position:static;max-width:420px;margin:0 auto 8px;} .footer-grid{grid-template-columns:1fr 1fr;} .contact-grid{grid-template-columns:1fr;} } @media (max-width:760px){ .nav-toggle{display:flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;} .main-nav{position:relative;} .nav-menu{ position:absolute;inset-inline-end:0;top:calc(100% + 14px); background:var(--ink);border:1px solid rgba(255,255,255,.12); border-radius:14px;flex-direction:column;align-items:stretch; min-width:220px;padding:10px;gap:2px; display:none;box-shadow:var(--shadow); } .nav-menu.open{display:flex;} .nav-menu a{width:100%;min-height:44px;display:flex;align-items:center;padding:0 1.1em;} .header-cta{display:none;} .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;} .info-strip{grid-template-columns:1fr;} section{padding:60px 0;} .cta-band{padding:40px 24px;} .footer-grid{grid-template-columns:1fr;gap:32px;} .hero{padding:70px 0 52px;} .btn{min-height:46px;} .social-pill{min-height:44px;display:inline-flex;align-items:center;} body{font-size:16px;} } /* ---------- floating WhatsApp button ---------- */ .floating-whatsapp{ position:fixed;bottom:22px;right:22px;z-index:200; width:58px;height:58px;border-radius:50%; background:#25D366;display:flex;align-items:center;justify-content:center; box-shadow:0 10px 28px -6px rgba(0,0,0,.4); transition:transform .2s ease,box-shadow .2s ease; } .floating-whatsapp::before{ content:"";position:absolute;inset:0;border-radius:50%; background:#25D366;z-index:-1; } .floating-whatsapp:hover{transform:scale(1.08);box-shadow:0 14px 32px -6px rgba(0,0,0,.45);} .floating-whatsapp svg{width:29px;height:29px;} @media (prefers-reduced-motion: no-preference){ .floating-whatsapp::before{animation:waPulse 2.2s ease-out infinite;} } @keyframes waPulse{ 0%{transform:scale(1);opacity:.55;} 100%{transform:scale(1.9);opacity:0;} } @media (max-width:760px){ .floating-whatsapp{width:52px;height:52px;bottom:16px;right:16px;} .floating-whatsapp svg{width:26px;height:26px;} } /* ---------- publications / research section ---------- */ .pub-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:26px 28px;box-shadow:var(--shadow-sm);margin-bottom:16px; } .pub-card .pub-meta{ font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--vessel); text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5em;display:block; } .pub-card h3{font-size:1.05rem;margin-bottom:.35em;} .pub-card p{color:var(--slate-soft);font-size:.94rem;margin-bottom:.7em;} .pub-card a.pub-link{ font-size:.9rem;font-weight:600;color:var(--vessel);display:inline-flex;align-items:center;gap:.4em; }