/* ============================================================ MacWish Medical Centre — Website Brand tokens follow the MacWish Medical Centre institutional identity (documentation/MACWISH FINAL LOGO/LOGO IDENTITY): Blue Navy #282973 figure + wordmark Medical Blue #0057B8 institutional blue Deep Green #129146 the caring hand These replace the Afya Hub cyan tokens the site was built with: this is the hospital's site, so it carries the hospital's identity, while Afya Hub keeps its own where the app is credited. Backgrounds stay white / near-white by design — the palette is carried by accents, not by tinted surfaces. ============================================================ */ :root { /* Brand */ --primary: #0057B8; /* Medical Blue — links, buttons, accents */ --secondary: #282973; /* Blue Navy — headings, deep surfaces */ --tertiary: #129146; /* Deep Green — supporting accent */ --navy: #282973; --green: #129146; --deep-red: #d72601; --announce-yellow: #ffc72c; /* wide-hero accents: slogan bullets, pill dot */ --brand-gradient: linear-gradient(135deg, #282973 0%, #0057B8 100%); /* Neutrals */ --text: #14181b; --text-2: #57636c; --line: #e0e3e7; --bg: #f1f4f8; --surface: #ffffff; /* Semantic */ --success: #129146; /* aligned to Deep Green so status ticks match the brand */ /* Layout */ --content: 1180px; /* Height of the announcement strip above the header. 0 by default so the site lays out exactly as it did before the banner existed; the .has-banner class on raises it while the strip is showing. Every offset that used to hard-code the 72px header reads this. */ --banner-h: 0px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 9999px; --shadow-card: 0 8px 30px rgba(40, 41, 115, 0.10); --shadow-card-hover: 0 18px 50px rgba(40, 41, 115, 0.18); --shadow-button: 0 8px 22px rgba(0, 87, 184, 0.26); --ease: cubic-bezier(0.16, 1, 0.3, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(90px + var(--banner-h)); } html.has-banner { --banner-h: 46px; } body { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); line-height: 1.55; font-weight: 500; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } .container { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 24px; } .gradient-text { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); white-space: nowrap; } .btn-primary { background: var(--brand-gradient); color: #fff; border: none; box-shadow: var(--shadow-button); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,87,184,0.34); } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line); } .btn-ghost:hover { border-color: rgba(0,87,184,0.4); transform: translateY(-2px); } .btn-white { background: #fff; color: var(--primary); } .btn-white:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.15); } /* ---------- Announcement bar ---------- A slim strip that sits above the fixed header announcing the Centre's opening. It is deliberately part of the page flow, not fixed: it is read on arrival and then retracts as the visitor scrolls, while the header slides up to the top of the viewport. Every layout offset that used to be tied to the 72px header now reads --banner-h, so dismissing the strip restores the original spacing with no other rule changing. */ .announce { position: absolute; top: 0; left: 0; right: 0; z-index: 101; height: var(--banner-h); overflow: hidden; color: #fff; background: var(--secondary); animation: announceIn 0.62s var(--ease) both; } /* Aurora drift — three brand-coloured lobes on an oversized canvas, panned slowly behind the text. This is what stops the strip reading as a flat utility bar: the colour is never quite the same twice. */ .announce::before { content: ""; position: absolute; inset: -60% -25%; background: radial-gradient(42% 140% at 12% 50%, rgba(18,145,70,0.55), transparent 62%), radial-gradient(46% 150% at 48% 50%, rgba(0,87,184,0.85), transparent 64%), radial-gradient(40% 140% at 84% 50%, rgba(40,41,115,0.90), transparent 62%), var(--brand-gradient); animation: announceAurora 19s ease-in-out infinite alternate; } /* Specular sheen — a narrow highlight that sweeps the strip on a long cycle. */ .announce::after { content: ""; position: absolute; top: 0; bottom: 0; width: 42%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.16) 46%, rgba(255,255,255,0.30) 52%, transparent); transform: skewX(-18deg); animation: announceSheen 8.5s var(--ease) infinite; pointer-events: none; } .announce-inner { position: relative; z-index: 1; height: 100%; width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: center; gap: 14px; } .announce-badge { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 4px 12px 4px 10px; border-radius: var(--radius-pill); background: var(--deep-red); border: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; white-space: nowrap; } /* The dot takes the badge's text colour. */ .announce-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: announcePulse 2.4s var(--ease) infinite; } .announce-text { font-size: 13.5px; font-weight: 600; letter-spacing: 0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,0.94); } .announce-sep { opacity: 0.42; margin: 0 9px; } .announce-link { color: #fff; font-weight: 700; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,0.42); padding-bottom: 1px; transition: border-color 0.25s var(--ease); } .announce-link:hover { border-bottom-color: #fff; } .announce-link .arw { display: inline-block; transition: transform 0.25s var(--ease); } .announce-link:hover .arw { transform: translateX(3px); } .announce-close { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border: none; border-radius: 50%; background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.85); cursor: pointer; opacity: 0.8; transition: opacity 0.2s, background 0.2s, transform 0.2s var(--ease); } .announce-close:hover { opacity: 1; background: rgba(255,255,255,0.20); transform: translateY(-50%) rotate(90deg); } /* Collapse on dismiss — the strip closes its own height and the layout follows, because --banner-h is cleared at the same moment. */ .announce.is-closing { animation: none; height: 0; opacity: 0; transition: height 0.42s var(--ease), opacity 0.28s ease; } @keyframes announceIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes announceAurora { from { transform: translate3d(-6%, 0, 0) scale(1.05); } to { transform: translate3d(6%, 0, 0) scale(1.16); } } @keyframes announceSheen { 0% { transform: translateX(-140%) skewX(-18deg); } 58%, 100% { transform: translateX(340%) skewX(-18deg); } } @keyframes announcePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); opacity: 1; } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); opacity: 0.8; } } @media (prefers-reduced-motion: reduce) { .announce, .announce::before, .announce::after, .announce-dot { animation: none; } .announce::after { opacity: 0; } } /* ---------- Header ---------- */ .header { position: fixed; top: var(--banner-h); left: 0; right: 0; z-index: 100; background: #fff; border-bottom: 1px solid transparent; transition: border-color 0.3s, box-shadow 0.3s; } .header.scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 20px rgba(0,0,0,0.04); } .nav { height: 72px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand img { width: 40px; height: 40px; object-fit: contain; } /* The footer uses the brand's white-only logo variant, so it needs no plate. */ .brand-text strong { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; } .brand-text span { display: block; font-size: 11px; font-weight: 600; color: var(--text-2); letter-spacing: 1.5px; text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: 18px; } html[lang="sw"] .nav-links a { font-size: 13.5px; } .nav-links a { font-size: 14px; font-weight: 600; color: var(--text-2); transition: color 0.2s; white-space: nowrap; } .nav-links a:hover { color: var(--text); } .nav-cta { display: flex; align-items: center; gap: 12px; margin-left: 20px; } /* The portal button carries an icon, so it needs the row treatment the plain .btn does not give it. */ .nav-portal { display: inline-flex; align-items: center; gap: 8px; } .nav-portal svg { flex-shrink: 0; opacity: 0.9; } /* EN / SW switch — built by js/i18n.js, so it only appears when the script runs. */ .lang-switch { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--bg); border: 1px solid var(--line); } .lang-switch button { border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; color: var(--text-2); padding: 6px 9px; border-radius: var(--radius-pill); transition: background 0.2s, color 0.2s; } .lang-switch button:hover { color: var(--text); } .lang-switch button[aria-pressed="true"] { background: var(--secondary); color: #fff; } .lang-switch button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* Two copies: one beside the portal button, one inside the collapsed menu, because on a phone the header has no room for a third control. */ .lang-switch--menu { display: none; } .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.3s; } .menu-toggle span + span { margin-top: 5px; } /* ---------- Hero ---------- */ .hero { position: relative; padding: calc(150px + var(--banner-h)) 0 90px; overflow: hidden; } .hero::before { content: ""; position: absolute; top: -200px; right: -150px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(18,145,70,0.14), transparent 70%); border-radius: 50%; z-index: -1; } .hero::after { content: ""; position: absolute; bottom: -180px; left: -120px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(0,87,184,0.12), transparent 70%); border-radius: 50%; z-index: -1; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--radius-pill); background: rgba(0,87,184,0.08); color: var(--primary); font-size: 13px; font-weight: 700; margin-bottom: 22px; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(0,87,184,0.18); } /* The Centre's slogan, set as the hero headline — the logo's dot separators in Plus Jakarta Sans rather than the logo's script. The logo sets the words in #272974, which is --secondary to within one step, so no new colour enters the palette here. Sized to hold one line: 22 characters in a ~590px column. */ .hero h1.slogan { white-space: nowrap; font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: -1px; margin-bottom: 10px; color: var(--secondary); } .hero h1.slogan i { font-style: normal; font-size: 0.4em; vertical-align: 0.36em; padding: 0 0.28em; color: var(--primary); } .hero .hero-sub { font-size: clamp(19px, 2.1vw, 25px); font-weight: 700; letter-spacing: -0.5px; line-height: 1.25; margin-bottom: 20px; } .hero p.lead { font-size: 18px; color: var(--text-2); max-width: 520px; margin-bottom: 32px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 38px; } .hero-stats { display: flex; gap: 40px; flex-wrap: wrap; } .hero-stats .stat strong { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.5px; } .hero-stats .stat span { font-size: 13.5px; color: var(--text-2); font-weight: 600; } .float-card { position: absolute; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.6); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: 0 16px 40px rgba(0,0,0,0.12); display: flex; align-items: center; gap: 12px; } .float-card .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; } .float-card strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); } .float-card span { font-size: 12px; color: var(--text-2); font-weight: 600; } /* The same card, floated over the phone mock in the app section. It is offset from the centre rather than the edge because .phone-mock is a wide grid cell that centres the device — anchoring to the cell's left would strand it. */ .float-card.on-phone { position: absolute; bottom: 46px; left: 50%; transform: translateX(-188px); z-index: 4; } /* ═══════════ Full-bleed hero ═══════════ The reception photograph spans the whole viewport and the copy sits on it, rather than the photo living in a panel beside the copy. Two scrims carry the text: a vertical ramp that lands the hero on the page background, and a left-weighted wash, because the copy is left-aligned and the left of this frame (pale floor tiles, white wall) is its brightest region. */ .hero.hero-wide { padding: calc(190px + var(--banner-h)) 0 108px; margin-top: calc(-1 * var(--banner-h)); isolation: isolate; color: #fff; } .hero.hero-wide::before, .hero.hero-wide::after { content: none; } /* the soft brand blobs would fight the photo */ .hero-media { position: absolute; inset: 0; z-index: -1; } .hero-media picture { display: block; height: 100%; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; } .hero-media::after { content: ""; position: absolute; inset: 0; background: /* Vertical: light enough that the timber wall and counter read as a room, weighting down only near the bottom so the hero lands on the page. */ linear-gradient(180deg, rgba(18, 20, 58, 0.34) 0%, rgba(22, 26, 70, 0.26) 42%, rgba(26, 30, 78, 0.55) 82%, var(--bg) 100%), /* Horizontal: carries the text. Held at strength across the copy column, then released quickly so the right two-thirds of the frame stay open. */ linear-gradient(90deg, rgba(20, 22, 62, 0.80) 0%, rgba(24, 28, 74, 0.56) 38%, rgba(28, 32, 82, 0.14) 68%, transparent 88%); } .hero.hero-wide .hero-copy { max-width: 700px; } /* On the photograph the palette inverts: everything that was navy-on-white becomes white-on-navy, and the two gradient-text runs are dropped because a navy-to-blue gradient is invisible against a navy scrim. */ .hero.hero-wide .pill { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.28); color: #fff; backdrop-filter: blur(6px); } .hero.hero-wide .pill .dot { background: var(--announce-yellow); box-shadow: 0 0 0 4px rgba(255,199,44,0.22); } .hero.hero-wide h1.slogan { color: #fff; } .hero.hero-wide h1.slogan i { color: var(--announce-yellow); } .hero.hero-wide .hero-sub { color: rgba(255,255,255,0.94); } .hero.hero-wide p.lead { color: rgba(255,255,255,0.86); max-width: 560px; } .hero.hero-wide .btn-ghost { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.45); color: #fff; backdrop-filter: blur(6px); } .hero.hero-wide .btn-ghost:hover { background: rgba(255,255,255,0.20); } .hero-note { font-size: 13.5px; margin: -22px 0 38px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: rgba(255,255,255,0.82); } .hero-note a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .hero.hero-wide .hero-stats { gap: 46px; } .hero.hero-wide .hero-stats .stat strong { color: #fff; } .hero.hero-wide .hero-stats .stat span { color: rgba(255,255,255,0.78); } @media (max-width: 980px) { .hero.hero-wide { padding: calc(150px + var(--banner-h)) 0 84px; } .hero.hero-wide .hero-copy { max-width: none; } /* the frame is landscape, so on a tall phone viewport bias the crop toward the counter rather than letting cover centre on empty floor */ .hero-media img { object-position: 62% 54%; } .hero.hero-wide .hero-stats { gap: 28px 32px; } } /* ---------- Section heading ---------- */ .section { padding: 86px 0; } .section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; } .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; } .section-head h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; letter-spacing: -1px; line-height: 1.1; } .section-head p { margin-top: 16px; font-size: 17px; color: var(--text-2); } /* ---------- Services ---------- */ .services { background: var(--surface); } .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 22px; } .service-card { position: relative; border-radius: var(--radius-md); overflow: hidden; min-height: 280px; display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow-card); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .service-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .service-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,20,30,0.88) 0%, rgba(10,20,30,0.35) 55%, rgba(10,20,30,0.05) 100%); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); } .service-card:hover img { transform: scale(1.07); } .service-card .body { position: relative; z-index: 2; padding: 26px; } .service-card .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.18); backdrop-filter: blur(4px); margin-bottom: 12px; } /* Caps labels that carry the brand keep its casing — "MacWish", never "MACWISH". Tracking tightens because wide letter-spacing only suits capitals. */ .eyebrow.keep-case, .tag.keep-case { text-transform: none; letter-spacing: 0.2px; } .service-card h3 { font-size: 21px; font-weight: 700; margin-bottom: 7px; } .service-card p { font-size: 14px; color: rgba(255,255,255,0.86); font-weight: 500; } /* The Family Medicine CTA fills the gap left in the last row: with four photo cards in a 3-column grid the bottom-right would otherwise sit empty. It is the only card without a photo, so widening it distorts no imagery and gives the "Talk to us" button more presence. Guarded by a media query because .service-grid is auto-fit — at narrower widths the grid drops to 2 columns and then 1, where a 2-column span would either recreate the gap or overflow. */ /* This card's body is a flex column, which stretches the pill to the full card width at every size. Keep it hugging its text. */ /* Family Medicine CTA. Stacked by default (narrow cards, mobile); the pill needs align-self because .cta-copy is a flex column that would stretch it. */ .cta-body { display: flex; flex-direction: column; justify-content: center; height: 100%; gap: 20px; } .cta-copy { display: flex; flex-direction: column; } .cta-copy .tag { align-self: flex-start; } .cta-action { align-self: flex-start; white-space: nowrap; } @media (min-width: 1100px) { .service-card--wide { grid-column: span 2; } /* Once the card spans two columns, sit the button beside the copy rather than under it: a column-wide block of text would otherwise leave an obvious gap on the right, and capping the measure alone just moves it. */ .cta-body { flex-direction: row; align-items: center; gap: 40px; } .cta-copy { flex: 1; } .cta-action { align-self: center; flex-shrink: 0; } } /* ---------- Feature / About ---------- */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .about-img-wrap { position: relative; } .about-img-wrap img { border-radius: var(--radius-lg); width: 100%; height: 480px; object-fit: cover; box-shadow: var(--shadow-card); } .about-badge { position: absolute; bottom: -26px; right: -10px; background: var(--brand-gradient); color: #fff; padding: 22px 26px; border-radius: var(--radius-md); box-shadow: var(--shadow-button); } .about-badge strong { display: block; font-size: 30px; font-weight: 700; } .about-badge span { font-size: 13px; font-weight: 600; opacity: 0.92; } .about-text h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; letter-spacing: -1px; line-height: 1.12; margin-bottom: 20px; } .about-text > p { font-size: 16.5px; color: var(--text-2); margin-bottom: 28px; } .feature-list { display: grid; gap: 18px; } .feature-item { display: flex; gap: 15px; } .feature-item .check { width: 28px; height: 28px; border-radius: 9px; background: rgba(0,87,184,0.09); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; } .feature-item strong { font-size: 15.5px; font-weight: 700; display: block; margin-bottom: 2px; } .feature-item p { font-size: 14px; color: var(--text-2); } /* ---------- Afya Hub app section ---------- */ .app-section { position: relative; overflow: hidden; background: var(--bg); } .app-inner { position: relative; background: var(--brand-gradient); border-radius: 32px; padding: 64px; color: #fff; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; overflow: hidden; } .app-inner::before { content: ""; position: absolute; top: -120px; right: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%); border-radius: 50%; } .app-inner .pill { background: rgba(255,255,255,0.16); color: #fff; } .app-inner .pill .dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.25); } .app-content h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -1px; line-height: 1.12; margin-bottom: 18px; } .app-content > p { font-size: 16.5px; opacity: 0.92; margin-bottom: 26px; max-width: 480px; } .app-features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-bottom: 32px; } .app-feature { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; } .app-feature .fic { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.16); display: grid; place-items: center; flex-shrink: 0; } .badges { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .badges img { height: 52px; width: auto; transition: transform 0.25s var(--ease); } .badges a:hover img { transform: translateY(-3px); } .badge-soon { position: relative; } .badge-soon::after { content: "TestFlight Beta"; position: absolute; top: -9px; right: -6px; background: #fff; color: var(--primary); font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: var(--radius-pill); letter-spacing: 0.3px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); } .phone-mock { position: relative; display: grid; place-items: center; } .phone-mock .device { position: relative; width: 240px; height: 480px; background: #0b1620; border-radius: 38px; padding: 11px; box-shadow: 0 40px 80px rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.15); transform: rotate(3deg); } .phone-mock .screen { width: 100%; height: 100%; border-radius: 28px; object-fit: cover; } /* Notch lives inside the device so it inherits the device rotation and centres on the frame. 11px padding = top of screen. */ .phone-mock .notch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 92px; height: 22px; background: #0b1620; border-radius: 0 0 14px 14px; z-index: 3; } /* ---------- Stats band ---------- */ .stats-band { background: var(--surface); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .stats-grid .stat-box strong { display: block; font-size: 44px; font-weight: 700; letter-spacing: -1.5px; } .stats-grid .stat-box span { font-size: 14.5px; color: var(--text-2); font-weight: 600; } /* ---------- Contact / CTA ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; } .contact-info { display: grid; gap: 20px; align-content: start; } .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; display: flex; gap: 16px; align-items: flex-start; transition: box-shadow 0.3s; } .contact-card:hover { box-shadow: var(--shadow-card); } .contact-card .ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(0,87,184,0.09); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; } .contact-card strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 3px; } .contact-card p { font-size: 14.5px; color: var(--text-2); } .map-wrap { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); min-height: 360px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; } .map-wrap iframe { width: 100%; flex: 1; min-height: 360px; border: 0; display: block; } /* Directions bar under the map: the embed itself is not clickable through to Google Maps, so this carries the visitor to turn-by-turn navigation. */ .map-link { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; font-size: 13.5px; font-weight: 700; color: var(--primary); background: var(--surface); border-top: 1px solid var(--line); transition: background 0.2s var(--ease), color 0.2s var(--ease); } .map-link:hover { background: rgba(0,87,184,0.06); } /* ---------- Footer ---------- */ .footer { background: #0b1620; color: rgba(255,255,255,0.7); padding: 64px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 44px; } .footer .brand-text strong { color: #fff; } .footer .brand-text span { color: rgba(255,255,255,0.55); } .footer-col h4 { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 18px; letter-spacing: 0.3px; } .footer-col a, .footer-col p { display: block; font-size: 14px; margin-bottom: 11px; transition: color 0.2s; } .footer-col a:hover { color: var(--tertiary); } .footer-about { font-size: 14.5px; line-height: 1.7; margin: 18px 0 22px; max-width: 300px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; } /* Legal links in the bottom bar (/privacy, /terms, /support) — the store-declared URLs. */ .footer-bottom a { color: rgba(255,255,255,0.82); font-weight: 600; text-decoration: none; transition: color 0.2s; } .footer-bottom a:hover { color: var(--tertiary); text-decoration: underline; } /* ---------- Reveal animation ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .about-grid, .app-inner, .contact-grid { grid-template-columns: 1fr; } .app-inner { padding: 44px 32px; } .app-features { grid-template-columns: 1fr; } .phone-mock { display: none; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .nav-cta .btn-ghost { display: none; } .hero { padding: calc(120px + var(--banner-h)) 0 70px; } /* The slogan must hold one line down to 360px. */ .hero h1.slogan { font-size: 30px; letter-spacing: -1px; } .hero h1.slogan i { padding: 0 0.2em; } html[lang="sw"] .hero h1.slogan { font-size: 27px; } } @media (max-width: 480px) { /* Brand, portal button and menu toggle share 328px at the narrowest; the button gives way so the wordmark is never overlapped. */ .nav-cta { gap: 8px; } .nav-portal { padding: 10px 12px; font-size: 13px; } .nav-portal svg { display: none; } .brand { gap: 9px; } .brand img { width: 34px; height: 34px; } } @media (max-width: 380px) { .header .container { padding: 0 16px; } html.has-banner { --banner-h: 40px; } .announce-inner { padding: 0 44px 0 16px; gap: 10px; } .announce-text { font-size: 12.5px; } .announce-badge { font-size: 10.5px; padding: 3px 10px 3px 8px; letter-spacing: 0.4px; } .announce-sep { margin: 0 7px; } .announce-close { right: 10px; width: 24px; height: 24px; } .about-badge { right: 10px; } .footer-grid { grid-template-columns: 1fr; gap: 30px; } } /* ═══════════════════════════════════════════════════════════════════════════ MULTI-PAGE — shared components Added when the single-page site became seven pages: Home · About Us · Services · Our Team · Patient Information · Health Resources · Contact ═══════════════════════════════════════════════════════════════════════════ */ /* ---------- Navigation: seven items need a tighter measure ---------- */ .nav-links a[aria-current="page"] { color: var(--primary); font-weight: 700; } /* ---------- Inner-page banner ---------- Compact, gradient, no photograph: the hero photo belongs to Home alone, and repeating it on every page would flatten its impact. */ .page-hero { position: relative; padding: calc(126px + var(--banner-h)) 0 54px; background: var(--brand-gradient); color: #fff; overflow: hidden; } .page-hero::after { content: ""; position: absolute; right: -160px; top: -180px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%); pointer-events: none; } .page-hero .crumb { font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 14px; } .page-hero .crumb a { color: rgba(255,255,255,0.72); } .page-hero .crumb a:hover { color: #fff; } .page-hero h1 { font-size: clamp(30px, 4.2vw, 48px); font-weight: 700; letter-spacing: -1.4px; line-height: 1.08; max-width: 20ch; } .page-hero p { margin-top: 16px; font-size: 17.5px; color: rgba(255,255,255,0.88); max-width: 62ch; } /* ---------- Alternating image / text block ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .split + .split { margin-top: 82px; } .split.reverse .split-media { order: 2; } .split-media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .split-body h2 { font-size: clamp(25px, 3vw, 35px); font-weight: 700; letter-spacing: -1px; line-height: 1.12; } .split-body h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; } .split-body > p { margin-top: 16px; font-size: 16.5px; color: var(--text-2); } .split-body .tag { margin-bottom: 14px; } /* ---------- Generic card grid ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 26px; } .info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px 26px; transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease); } .info-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); } .info-card .ic-lg { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(0,87,184,0.10); color: var(--primary); margin-bottom: 16px; } .info-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; } .info-card p { font-size: 14.8px; color: var(--text-2); line-height: 1.6; } .info-card ul { margin: 12px 0 0; padding-left: 18px; } .info-card li { font-size: 14.8px; color: var(--text-2); line-height: 1.7; } /* ---------- Our Team ---------- */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .team-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px 24px; text-align: center; transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease); } .team-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); } .team-avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; background: var(--bg); border: 1px dashed var(--line-2, #c9d1dd); color: var(--primary); } .team-card h3 { font-size: 17px; font-weight: 700; } .team-card .role { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--primary); margin: 6px 0 12px; } .team-card p { font-size: 14.2px; color: var(--text-2); line-height: 1.6; } /* ---------- Numbered steps ---------- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; counter-reset: step; } .step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px 26px; counter-increment: step; } .step::before { content: counter(step); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand-gradient); color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 16px; } .step h3 { font-size: 17.5px; font-weight: 700; margin-bottom: 8px; } .step p { font-size: 14.8px; color: var(--text-2); line-height: 1.6; } /* ---------- Notice (disclaimers, to-be-confirmed content) ---------- A full-surface panel, not a stripe: the tint carries the meaning. */ .notice { display: flex; gap: 16px; align-items: flex-start; background: rgba(0,87,184,0.06); border: 1px solid rgba(0,87,184,0.22); border-radius: var(--radius-md); padding: 22px 24px; } .notice.warn { background: rgba(215,38,1,0.05); border-color: rgba(215,38,1,0.22); } .notice .n-ic { flex-shrink: 0; color: var(--primary); margin-top: 1px; } .notice.warn .n-ic { color: var(--deep-red); } .notice h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; } .notice p { font-size: 14.8px; color: var(--text-2); line-height: 1.62; } .notice p + p { margin-top: 8px; } /* ---------- Hours / definition table ---------- */ .hours { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); } .hours-row { display: flex; justify-content: space-between; gap: 20px; padding: 15px 22px; font-size: 15px; } .hours-row + .hours-row { border-top: 1px solid var(--line); } .hours-row dt { font-weight: 700; } .hours-row dd { margin: 0; color: var(--text-2); font-weight: 600; text-align: right; } .hours-row.is-emergency { background: rgba(18,145,70,0.07); } .hours-row.is-emergency dd { color: var(--tertiary); } /* ---------- FAQ ---------- */ .faq { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); } .faq details + details { border-top: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 19px 24px; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex-shrink: 0; width: 10px; height: 10px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg) translateY(-2px); transition: transform 0.25s var(--ease); } .faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); } .faq summary:hover { color: var(--primary); } .faq .faq-body { padding: 0 24px 22px; font-size: 15px; color: var(--text-2); line-height: 1.68; } .faq .faq-body p + p { margin-top: 10px; } /* ---------- Closing call-to-action band ---------- */ .cta-band { background: var(--brand-gradient); color: #fff; border-radius: 32px; padding: 54px 48px; text-align: center; } .cta-band h2 { font-size: clamp(25px, 3.2vw, 36px); font-weight: 700; letter-spacing: -1px; } .cta-band p { margin: 14px auto 28px; font-size: 16.5px; color: rgba(255,255,255,0.9); max-width: 56ch; } .cta-band .hero-actions { justify-content: center; margin-bottom: 0; } .cta-band .btn-ghost { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.45); color: #fff; } .cta-band .btn-ghost:hover { background: rgba(255,255,255,0.22); } /* ---------- Responsive ---------- */ @media (max-width: 1199px) { /* Home · About Us · Services · Our Team · Patient Information · Health Resources · Contact does not fit beside the brand, the language switch and the CTA — and the Kiswahili labels are longer still — so the menu collapses well above the old 720px phone breakpoint. */ .nav-links { display: none; } .nav-cta .lang-switch { display: none; } .nav-links.open .lang-switch--menu { display: inline-flex; align-self: flex-start; } .menu-toggle { display: block; } .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: #fff; padding: 22px 24px; gap: 18px; border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(0,0,0,0.08); } .nav-links.open a { font-size: 15.5px; } .nav-cta { margin-left: 0; } } @media (max-width: 900px) { .split, .split.reverse { grid-template-columns: 1fr; gap: 30px; } .split.reverse .split-media { order: 0; } .split + .split { margin-top: 56px; } .page-hero { padding: calc(108px + var(--banner-h)) 0 42px; } .cta-band { padding: 40px 26px; border-radius: 24px; } } /* ---------- Quick actions ---------- The four things a visitor most often arrives wanting to do. Sits directly under the hero, above everything explanatory, because someone in a hurry should not have to read the page to find the phone number. */ .quick-actions { position: relative; z-index: 2; margin-top: -46px; padding-bottom: 76px; } /* Contact → Important links: follows the contact section directly, so it drops its own top padding rather than doubling the gap. */ .important-links { padding-top: 0; } .important-links .section-head { margin-bottom: 32px; } .qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .qa-card { display: flex; align-items: center; gap: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px 22px; box-shadow: var(--shadow-card); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } .qa-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: rgba(0,87,184,0.35); } .qa-card .qa-ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(0,87,184,0.10); color: var(--primary); } .qa-card strong { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.25; } .qa-card span { display: block; font-size: 12.8px; font-weight: 600; color: var(--text-2); margin-top: 3px; } /* The emergency tile is the one that must be findable at a glance. */ .qa-card.is-urgent { border-color: rgba(215,38,1,0.28); background: rgba(215,38,1,0.035); } .qa-card.is-urgent .qa-ic { background: rgba(215,38,1,0.10); color: var(--deep-red); } .qa-card.is-urgent:hover { border-color: rgba(215,38,1,0.5); } @media (max-width: 1040px) { .qa-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .qa-grid { grid-template-columns: 1fr; } .quick-actions { margin-top: -30px; padding-bottom: 54px; } } /* ---------- Contact strip (foot of Home) ---------- */ .contact-strip { background: var(--surface); } .cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; } .cs-list { display: grid; gap: 18px; margin-top: 26px; } .cs-item { display: flex; gap: 14px; align-items: flex-start; } .cs-item .ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(0,87,184,0.10); color: var(--primary); } .cs-item strong { display: block; font-size: 15px; font-weight: 700; } .cs-item p { font-size: 14.5px; color: var(--text-2); margin-top: 2px; line-height: 1.55; } @media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr; gap: 30px; } }