/* ========================================================= SLCP Homepage — Stylesheet Sri Lanka College of Pulmonologists ========================================================= */ :root { /* Brand palette */ --navy: #2a3180; --navy-dark: #1c2160; --blue: #146dac; --blue-light: #eaf3fb; --accent: #f8ae42; --accent-dark: #e0932a; --ink: #1c2333; --slate: #57607a; --slate-light: #8791a8; --paper: #ffffff; --mist: #f5f7fb; --border: #e4e8f2; /* Status colors (air quality) */ --status-good: #1f9d55; --status-good-bg: #e8f8ee; --status-moderate: #b8860b; --status-moderate-bg: #fdf3dc; /* Type */ --font-display: "Plus Jakarta Sans", "Segoe UI", sans-serif; --font-body: "Inter", "Segoe UI", sans-serif; /* Shape / motion */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-sm: 0 2px 10px rgba(26, 33, 78, 0.06); --shadow-md: 0 12px 32px rgba(26, 33, 78, 0.12); --shadow-lg: 0 24px 60px rgba(26, 33, 78, 0.18); --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100vw; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--navy); font-weight: 700; line-height: 1.2; margin: 0; } p { margin: 0 0 1rem; } img { max-width: 100%; height: auto; display: block; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--navy); } .container-xl-custom { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 1.5rem; } /* Ultra-wide screens (1920px+): keep content from stretching too thin */ @media (min-width: 1920px) { .container-xl-custom { max-width: 1500px; } } /* Focus visibility (accessibility) */ a:focus-visible, button:focus-visible, .nav-link:focus-visible, .card-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 0.75rem 1.25rem; z-index: 2000; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Reveal-on-scroll (progressive enhancement only — content is visible by default; JS adds the "js" class on which switches on the hidden starting state, so users with JS disabled or slow always see full content immediately). */ .reveal { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .js .reveal.is-visible { opacity: 1; transform: translateY(0); } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; } /* ========================================================= Header / Navigation ========================================================= */ .site-header { position: sticky; top: 0; z-index: 1000; background: var(--paper); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.75rem; } .brand { display: flex; align-items: center; gap: 0.85rem; min-width: 0; } .brand img { height: 58px; width: 58px; object-fit: contain; flex-shrink: 0; } .brand-text { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; } .brand-text .brand-name { font-family: var(--font-display); font-weight: 800; color: var(--navy); font-size: clamp(0.95rem, 1.6vw, 1.2rem); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .brand-name-short { display: none; } /* Below ~480px there simply isn't room for the full institutional name next to the hamburger button — switch to the short mark instead of letting the full name truncate awkwardly. The full name stays in the link's aria-label for assistive tech and SEO. */ @media (max-width: 479.98px) { .brand-name-full { display: none; } .brand-name-short { display: block; font-size: 1.15rem; } } .brand-text .brand-tagline { font-size: 0.76rem; color: var(--blue); font-weight: 600; letter-spacing: 0.03em; margin-top: 2px; white-space: nowrap; } @media (max-width: 1199.98px) { .brand-text .brand-tagline { display: none; } } .main-nav { display: none; } @media (min-width: 1200px) { .main-nav { display: flex; align-items: center; gap: 0.35rem; } .main-nav .nav-link { position: relative; color: var(--ink); font-weight: 600; font-size: 0.9rem; white-space: nowrap; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); transition: color 0.2s var(--ease), background 0.2s var(--ease); } .main-nav .nav-link:hover, .main-nav .nav-link:focus-visible { color: var(--navy); background: var(--blue-light); } .main-nav .nav-link.active { color: var(--navy); } .main-nav .nav-link.active::after { content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.28rem; height: 3px; border-radius: 2px; background: var(--accent); } .main-nav .nav-cta { margin-left: 0.4rem; background: var(--navy); color: #fff; padding: 0.62rem 1.15rem; border-radius: 999px; font-weight: 700; font-size: 0.88rem; white-space: nowrap; transition: background 0.2s var(--ease), transform 0.2s var(--ease); } .main-nav .nav-cta:hover, .main-nav .nav-cta:focus-visible { background: var(--blue); color: #fff; transform: translateY(-1px); } } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--paper); color: var(--navy); font-size: 1.25rem; } @media (min-width: 1200px) { .nav-toggle { display: none; } } /* Mobile offcanvas */ .offcanvas.slcp-offcanvas { width: min(86vw, 360px); } .slcp-offcanvas .offcanvas-header { border-bottom: 1px solid var(--border); } .slcp-offcanvas .brand-text .brand-name { font-size: 1rem; } .slcp-offcanvas .nav-link { display: block; padding: 0.95rem 0.25rem; font-weight: 600; font-size: 1.05rem; color: var(--ink); border-bottom: 1px solid var(--border); } .slcp-offcanvas .nav-link:hover, .slcp-offcanvas .nav-link:focus-visible { color: var(--blue); } .slcp-offcanvas .nav-cta { display: block; text-align: center; margin-top: 1.25rem; background: var(--navy); color: #fff; padding: 0.85rem 1rem; border-radius: 999px; font-weight: 700; } /* ========================================================= Hero ========================================================= */ .hero { position: relative; overflow: hidden; background: var(--navy-dark); isolation: isolate; } .hero-slide { position: relative; min-height: 62vh; } .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 22, 60, 0.92) 0%, rgba(24, 34, 92, 0.72) 42%, rgba(20, 40, 90, 0.28) 75%, rgba(20, 40, 90, 0.15) 100%), linear-gradient(0deg, rgba(15, 18, 50, 0.55) 0%, rgba(15, 18, 50, 0) 40%); } .hero-content { position: relative; z-index: 2; min-height: 62vh; display: flex; align-items: center; padding-block: 3.5rem; } .hero-content .eyebrow { color: var(--accent); } .hero-content .eyebrow::before { background: var(--accent); } .hero-content h1 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.1rem); max-width: 15ch; margin-top: 0.6rem; } .hero-content .hero-lede { color: rgba(255, 255, 255, 0.88); font-size: 1.08rem; max-width: 46ch; margin-top: 1.1rem; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; } .btn-accent { background: var(--accent); color: var(--navy-dark); font-weight: 700; padding: 0.8rem 1.5rem; border-radius: 999px; border: 2px solid var(--accent); transition: background 0.2s var(--ease), transform 0.2s var(--ease); } .btn-accent:hover, .btn-accent:focus-visible { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--navy-dark); transform: translateY(-2px); } .btn-outline-light-custom { background: transparent; color: #fff; font-weight: 700; padding: 0.8rem 1.5rem; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.55); transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease); } .btn-outline-light-custom:hover, .btn-outline-light-custom:focus-visible { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; transform: translateY(-2px); } .hero .carousel-indicators { z-index: 3; bottom: 1.25rem; } .hero .carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); border: none; margin-inline: 5px; } .hero .carousel-indicators .active { background-color: var(--accent); } .hero .carousel-control-prev, .hero .carousel-control-next { width: 3.2rem; height: 3.2rem; top: 50%; transform: translateY(-50%); bottom: auto; background: rgba(255, 255, 255, 0.14); border-radius: 50%; opacity: 0; transition: opacity 0.25s var(--ease), background 0.25s var(--ease); } .hero:hover .carousel-control-prev, .hero:hover .carousel-control-next { opacity: 1; } .hero .carousel-control-prev { left: 1.25rem; } .hero .carousel-control-next { right: 1.25rem; } .hero .carousel-control-prev:hover, .hero .carousel-control-next:hover { background: rgba(255, 255, 255, 0.28); } .hero .carousel-control-prev-icon, .hero .carousel-control-next-icon { width: 1.1rem; height: 1.1rem; } @media (max-width: 767.98px) { .hero-slide, .hero-content { min-height: 74vh; } .hero-cta-row { flex-direction: column; } .hero-cta-row .btn-accent, .hero-cta-row .btn-outline-light-custom { text-align: center; } } /* ========================================================= Air Quality section ========================================================= */ .aqi-section { background: var(--mist); padding-block: 4.5rem; } .section-heading { max-width: 640px; } .section-heading h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-top: 0.5rem; } .section-heading p { color: var(--slate); margin-top: 0.75rem; } .aqi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; } @media (max-width: 991.98px) { .aqi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .aqi-grid { grid-template-columns: 1fr; } } .aqi-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.6rem 1.4rem; box-shadow: var(--shadow-sm); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } .aqi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .aqi-card-top { display: flex; align-items: center; justify-content: space-between; } .aqi-city { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1.05rem; } .aqi-icon { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-light); color: var(--blue); font-size: 1.25rem; flex-shrink: 0; } .aqi-value { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: var(--navy); margin-top: 0.9rem; line-height: 1; } .aqi-value span { font-size: 0.95rem; font-weight: 600; color: var(--slate); margin-left: 0.35rem; } .aqi-badge { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.85rem; padding: 0.32rem 0.75rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; } .aqi-badge.is-good { color: var(--status-good); background: var(--status-good-bg); } .aqi-badge.is-moderate { color: var(--status-moderate); background: var(--status-moderate-bg); } .aqi-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .aqi-note { margin-top: 2rem; font-size: 0.85rem; color: var(--slate-light); display: flex; align-items: center; gap: 0.5rem; } /* ========================================================= Mission / Introduction section ========================================================= */ .mission-section { position: relative; padding-block: 5.5rem; text-align: center; overflow: hidden; } .mission-section .lung-watermark { position: absolute; top: 50%; left: 50%; width: 640px; max-width: 140%; transform: translate(-50%, -50%); opacity: 0.05; pointer-events: none; } .mission-inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; } .mission-inner .eyebrow { justify-content: center; } .mission-inner .eyebrow::before { display: none; } .mission-inner h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-top: 0.75rem; line-height: 1.25; } .mission-divider { width: 64px; height: 3px; background: var(--accent); border-radius: 2px; margin: 1.5rem auto; } .mission-strapline { font-family: var(--font-display); font-weight: 700; color: var(--blue); font-size: 1.05rem; letter-spacing: 0.02em; } .mission-body { margin-top: 1.4rem; color: var(--slate); font-size: 1.08rem; line-height: 1.8; } /* ========================================================= Feature cards (six information cards) ========================================================= */ .cards-section { padding-block: 1rem 5.5rem; background: var(--paper); } .cards-section + .cards-section { padding-top: 0; } .info-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 2.5rem; } @media (max-width: 991.98px) { .info-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .info-card-grid { grid-template-columns: 1fr; } } .info-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); border-top: 3px solid var(--card-accent, var(--blue)); } .info-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .info-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .info-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); } .info-card:hover .info-card-media img { transform: scale(1.06); } .info-card-icon { position: absolute; left: 1.1rem; bottom: -22px; width: 52px; height: 52px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--card-accent, var(--blue)); } .info-card-body { padding: 2.1rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex-grow: 1; } .info-card-body h3 { font-size: 1.2rem; } .info-card-list { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; grid-template-columns: 1fr; gap: 0.55rem; } .info-card-list.two-col { grid-template-columns: 1fr 1fr; column-gap: 0.85rem; } .info-card-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.92rem; color: var(--slate); line-height: 1.4; } .info-card-list li i { color: var(--card-accent, var(--blue)); font-size: 0.85rem; margin-top: 0.32rem; flex-shrink: 0; } .info-card-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--card-accent, var(--blue)); margin-top: 1.1rem; } .card-cta { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.92rem; color: var(--navy); align-self: flex-start; padding-bottom: 2px; border-bottom: 2px solid var(--card-accent, var(--accent)); transition: gap 0.2s var(--ease), color 0.2s var(--ease); } .card-cta:hover, .card-cta:focus-visible { gap: 0.75rem; color: var(--blue); } /* Vision / Mission / Values card - structured sub-blocks instead of image */ .vmv-media { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); } .vmv-block + .vmv-block { margin-top: 1rem; } .vmv-block h4 { font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 0.45rem; } .vmv-block h4 i { color: var(--card-accent, var(--blue)); } .vmv-block p { font-size: 0.9rem; color: var(--slate); margin: 0.35rem 0 0; padding-left: 1.4rem; } /* Accent variants per card (subtle differentiation, not repetitive) */ .accent-navy { --card-accent: var(--navy); } .accent-blue { --card-accent: var(--blue); } .accent-gold { --card-accent: var(--accent-dark); } /* ========================================================= Highlight strip (secondary utility bar) ========================================================= */ .highlight-strip { background: var(--navy-dark); color: #fff; } .highlight-strip .strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); } @media (max-width: 991.98px) { .highlight-strip .strip-inner { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .highlight-strip .strip-inner { grid-template-columns: 1fr; } } .strip-item { display: flex; align-items: center; gap: 0.85rem; padding: 1.4rem 1.5rem; border-right: 1px solid rgba(255, 255, 255, 0.12); } .highlight-strip .strip-inner > .strip-item:last-child { border-right: none; } @media (max-width: 991.98px) { .strip-item:nth-child(2n) { border-right: none; } .strip-item { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } } @media (max-width: 575.98px) { .strip-item { border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-right: none; } } .strip-item .strip-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(248, 174, 66, 0.16); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .strip-item strong { display: block; font-size: 0.94rem; font-family: var(--font-display); } .strip-item span { display: block; font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); margin-top: 2px; } /* ========================================================= Footer ========================================================= */ .site-footer { background: var(--navy); color: rgba(255, 255, 255, 0.85); padding-block: 1.5rem; text-align: center; font-size: 0.88rem; } .site-footer a { color: rgba(255, 255, 255, 0.9); }