/* Theme Name: Health Portal Theme URI: https://example.com/health-portal Author: Public Health Update Description: A health information portal theme with Diseases, Exercises and a Hospital Directory (grouped by province), a featured homepage, blog and contact page. Includes a one-click demo content importer under Appearance → Health Portal Setup. Version: 2.4.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: health-portal Tags: health, medical, directory, blog, custom-menu, custom-logo, featured-images */ :root { --hp-primary: #d71920; --hp-primary-dark: #a50f15; --hp-accent: #ffffff; --hp-heading: #1d1d1f; --hp-navy: #8f0d12; --hp-text: #333333; --hp-muted: #6e6e73; --hp-bg-soft: #fff4f4; --hp-border: #f5dcdc; --hp-white: #ffffff; --hp-radius: 14px; --hp-shadow: 0 10px 30px rgba(143, 13, 18, 0.08); --hp-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--hp-font); font-size: 16px; line-height: 1.7; color: var(--hp-text); background: var(--hp-white); } img { max-width: 100%; height: auto; display: block; } a { color: var(--hp-primary); text-decoration: none; transition: color .2s; } a:hover { color: var(--hp-primary-dark); } h1, h2, h3, h4, h5 { color: var(--hp-heading); line-height: 1.3; margin: 0 0 .6em; font-weight: 600; } p { margin: 0 0 1em; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); } .skip-link:focus { position: fixed; top: 10px; left: 10px; z-index: 1000; background: #fff; padding: 10px 16px; clip: auto; width: auto; height: auto; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 40px; border: 2px solid var(--hp-primary); background: var(--hp-primary); color: #fff; font-weight: 500; font-size: 15px; cursor: pointer; transition: all .2s; font-family: inherit; } .btn:hover { background: var(--hp-primary-dark); border-color: var(--hp-primary-dark); color: #fff; } .btn-outline { background: transparent; color: var(--hp-primary); } .btn-outline:hover { background: var(--hp-primary); color: #fff; } .btn-accent { background: #fff; border-color: #fff; color: var(--hp-primary); } .btn-accent:hover { background: var(--hp-bg-soft); border-color: var(--hp-bg-soft); color: var(--hp-primary-dark); } .link-more { font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; } .link-more::after { content: "→"; transition: transform .2s; } .link-more:hover::after { transform: translateX(4px); } /* ---------- Top bar ---------- */ .topbar { background: var(--hp-navy); color: #ffe1e2; font-size: 13px; } .topbar .container { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 16px; flex-wrap: wrap; } .topbar a { color: #fff; } .topbar-info { display: flex; gap: 20px; flex-wrap: wrap; } .topbar-link { background: #fff; color: var(--hp-primary) !important; padding: 4px 14px; border-radius: 20px; font-weight: 500; } /* ---------- Header ---------- */ .site-header { background: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,.05); } .site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 80px; gap: 20px; } .site-branding { display: flex; align-items: center; gap: 12px; } .site-branding .custom-logo { max-height: 56px; width: auto; } .site-title { font-size: 20px; font-weight: 700; color: var(--hp-heading); margin: 0; line-height: 1.2; } .site-title a { color: inherit; } .site-title span { color: var(--hp-primary); } .site-description { font-size: 12px; color: var(--hp-muted); margin: 0; max-width: 240px; line-height: 1.4; } .logo-mark { width: 54px; height: 54px; display: grid; place-items: center; flex-shrink: 0; } .logo-mark svg { width: 100%; height: 100%; display: block; } .footer-logo { display: flex; align-items: center; gap: 12px; } .site-footer .footer-logo span { color: #fff; } .footer-logo .logo-mark { width: 46px; height: 46px; } .main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; } .main-navigation li { position: relative; } .main-navigation a { display: block; padding: 10px 12px; white-space: nowrap; color: var(--hp-heading); font-weight: 500; font-size: 15px; border-radius: 30px; } .main-navigation a:hover, .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a, .main-navigation .current-menu-ancestor > a { color: var(--hp-primary); background: var(--hp-bg-soft); } .main-navigation ul ul { display: none; position: absolute; top: 100%; left: 0; background: #fff; box-shadow: var(--hp-shadow); border-radius: 10px; min-width: 200px; padding: 8px; flex-direction: column; align-items: stretch; } .main-navigation li:hover > ul, .main-navigation li:focus-within > ul { display: flex; } .main-navigation .menu-item-has-children > a::after { content: "▾"; font-size: 11px; margin-left: 6px; opacity: .6; } .main-navigation ul ul .menu-item-has-children > a::after { content: "▸"; float: right; margin-top: 2px; } .main-navigation ul ul a { padding: 9px 14px; font-size: 14.5px; border-radius: 8px; white-space: nowrap; } .main-navigation ul ul ul { top: -8px; left: 100%; display: none; grid-template-columns: repeat(2, minmax(250px, 1fr)); gap: 0 6px; min-width: 530px; max-height: 80vh; overflow-y: auto; } .main-navigation ul ul ul a { white-space: normal; } .main-navigation ul ul li.flip > ul { left: auto; right: 100%; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li:focus-within > ul { display: grid; } .submenu-toggle { display: none; } .menu-toggle { display: none; background: none; border: 0; font-size: 28px; color: var(--hp-heading); cursor: pointer; padding: 6px; } /* ---------- Hero ---------- */ .hero { position: relative; color: #fff; padding: 44px 0 52px; background: linear-gradient(120deg, rgba(143,13,18,.93), rgba(215,25,32,.85)), var(--hero-bg, none) center/cover no-repeat; background-color: var(--hp-navy); } .hero-eyebrow { display: inline-block; margin: 0 0 12px; padding: 6px 16px; border-radius: 30px; background: rgba(255,255,255,.16); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; } .hero h1 { color: #fff; font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; margin-bottom: 10px; max-width: 900px; line-height: 1.2; } .hero h1 span { display: inline; color: #fff; text-decoration: none; } .hero p.lead { font-size: 17px; max-width: 620px; opacity: .92; margin-bottom: 20px; } .hero-search { display: flex; max-width: 800px; background: #fff; border-radius: 50px; padding: 6px; box-shadow: 0 15px 40px rgba(0,0,0,.2); } .hero-search select, .hero-search input { border: 0; outline: 0; font-family: inherit; font-size: 15px; background: transparent; color: var(--hp-text); } .hero-search select { padding: 0 10px 0 14px; border-right: 1px solid var(--hp-border); max-width: 210px; cursor: pointer; } .hero-search select option { color: var(--hp-text); } .hero-search input { flex: 1; padding: 12px 16px; min-width: 0; } .hero-features { margin-top: -80px; position: relative; z-index: 2; } .hero-features .grid-3 { gap: 24px; } .feature-box { background: #fff; border-radius: var(--hp-radius); padding: 30px; box-shadow: var(--hp-shadow); display: flex; gap: 18px; align-items: flex-start; transition: transform .25s; } .feature-box:hover { transform: translateY(-6px); } .feature-icon { width: 58px; height: 58px; flex-shrink: 0; border-radius: 14px; background: var(--hp-bg-soft); color: var(--hp-primary); display: grid; place-items: center; font-size: 28px; } .feature-box h3 { font-size: 17px; margin-bottom: 4px; } .feature-box p { margin: 0; font-size: 14px; color: var(--hp-muted); } /* ---------- Sections ---------- */ .section { padding: 90px 0; } .section-soft { background: var(--hp-bg-soft); } .section-head { text-align: center; max-width: 700px; margin: 0 auto 50px; } .section-head .eyebrow, .eyebrow { display: inline-block; color: var(--hp-primary); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; } .section-head h2 { font-size: clamp(26px, 3.5vw, 38px); } .section-head p { color: var(--hp-muted); } .section-foot { text-align: center; margin-top: 40px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; align-items: center; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* About */ .about-text h2 { font-size: clamp(26px, 3.5vw, 38px); } .about-text p { color: var(--hp-muted); } .about-points { list-style: none; padding: 0; margin: 20px 0 30px; } .about-points li { padding-left: 32px; position: relative; margin-bottom: 10px; font-weight: 500; } .about-points li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--hp-primary); color: #fff; font-size: 12px; display: grid; place-items: center; } .video-wrap { position: relative; padding-top: 56.25%; border-radius: var(--hp-radius); overflow: hidden; box-shadow: var(--hp-shadow); background: var(--hp-navy); } .video-wrap iframe, .video-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } .video-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-align: center; padding: 20px; background: linear-gradient(135deg, var(--hp-primary), var(--hp-navy)); } /* Category cards (Navigating your health) */ .cat-card { background: #fff; border-radius: var(--hp-radius); padding: 40px 30px; text-align: center; box-shadow: var(--hp-shadow); border-bottom: 4px solid transparent; transition: all .25s; display: block; color: var(--hp-text); } .cat-card:hover { transform: translateY(-6px); border-bottom-color: var(--hp-primary); color: var(--hp-text); } .cat-card .feature-icon { margin: 0 auto 20px; width: 80px; height: 80px; font-size: 38px; border-radius: 50%; } .cat-card h3 { font-size: 22px; margin-bottom: 4px; } .cat-card .count { color: var(--hp-primary); font-weight: 600; font-size: 15px; } .cat-card p { color: var(--hp-muted); font-size: 14px; margin: 10px 0 0; } /* Generic card */ .card { background: #fff; border-radius: var(--hp-radius); overflow: hidden; box-shadow: var(--hp-shadow); display: flex; flex-direction: column; transition: transform .25s; } .card:hover { transform: translateY(-5px); } .card-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--hp-bg-soft); } .card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .card:hover .card-thumb img { transform: scale(1.05); } .card-thumb-placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-size: 48px; background: linear-gradient(135deg, #ffe3e4, #fff6f6); color: var(--hp-primary); } .card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; } .card-body h3 { font-size: 19px; } .card-body h3 a { color: var(--hp-heading); } .card-body h3 a:hover { color: var(--hp-primary); } .card-body .link-more { margin-top: auto; } .card-meta { font-size: 13px; color: var(--hp-muted); margin-bottom: 8px; display: flex; gap: 14px; flex-wrap: wrap; } .card-excerpt { color: var(--hp-muted); font-size: 14px; } /* Disease card */ .disease-card .card-body h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--hp-primary); margin: 10px 0 6px; } .symptom-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px; } .symptom-list li { background: var(--hp-bg-soft); color: var(--hp-primary-dark); font-size: 12px; padding: 4px 10px; border-radius: 20px; } /* Provinces / hospitals */ .province-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; } .province-tabs a, .province-tabs button { padding: 9px 20px; border-radius: 30px; border: 1px solid var(--hp-border); background: #fff; color: var(--hp-heading); font-weight: 500; font-size: 14px; cursor: pointer; font-family: inherit; } .province-tabs a:hover, .province-tabs .active { background: var(--hp-primary); border-color: var(--hp-primary); color: #fff; } .hospital-card { background: #fff; border-radius: var(--hp-radius); padding: 24px; box-shadow: var(--hp-shadow); display: flex; gap: 16px; align-items: flex-start; border-left: 4px solid var(--hp-primary); } .hospital-card .feature-icon { width: 48px; height: 48px; font-size: 22px; } .hospital-card h3 { font-size: 17px; margin-bottom: 4px; } .hospital-card h3 a { color: var(--hp-heading); } .hospital-card .loc { font-size: 13px; color: var(--hp-muted); margin: 0; } .hospital-card .tag { display: inline-block; font-size: 11px; background: var(--hp-bg-soft); color: var(--hp-primary-dark); border: 1px solid var(--hp-border); padding: 2px 10px; border-radius: 20px; margin-top: 6px; } .province-group { margin-bottom: 50px; scroll-margin-top: 110px; } .province-group > h3 { font-size: 22px; border-bottom: 2px solid var(--hp-border); padding-bottom: 10px; margin-bottom: 20px; } .hidden { display: none !important; } /* Page header */ .page-hero { background: linear-gradient(120deg, var(--hp-navy), var(--hp-primary)); color: #fff; padding: 70px 0; text-align: center; } .page-hero h1 { color: #fff; font-size: clamp(28px, 4vw, 44px); margin-bottom: 8px; } .page-hero p { opacity: .9; margin: 0 auto; max-width: 640px; } .breadcrumbs { font-size: 14px; opacity: .85; margin-top: 10px; } .breadcrumbs a { color: #fff; } /* Content layout */ .content-area { padding: 70px 0; } .layout-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 50px; } .entry-content { font-size: 16.5px; } .entry-content h2 { margin-top: 1.6em; font-size: 26px; } .entry-content h3 { margin-top: 1.4em; font-size: 21px; } .entry-content ul, .entry-content ol { padding-left: 22px; } .entry-content blockquote { border-left: 4px solid var(--hp-primary); background: var(--hp-bg-soft); margin: 1.5em 0; padding: 18px 24px; border-radius: 0 10px 10px 0; } .entry-content img { border-radius: 10px; } .entry-thumb { border-radius: var(--hp-radius); overflow: hidden; margin-bottom: 30px; } .info-box { background: var(--hp-bg-soft); border-radius: var(--hp-radius); padding: 26px 28px; margin-bottom: 26px; } .info-box h3 { font-size: 18px; display: flex; align-items: center; gap: 10px; } .info-box ul { margin: 0; padding-left: 20px; } .disclaimer { font-size: 13px; color: var(--hp-muted); border-top: 1px solid var(--hp-border); padding-top: 16px; margin-top: 30px; } /* Sidebar / widgets */ .sidebar .widget { background: var(--hp-bg-soft); border-radius: var(--hp-radius); padding: 26px; margin-bottom: 26px; } .sidebar .widget-title { font-size: 18px; margin-bottom: 14px; } .sidebar ul { list-style: none; padding: 0; margin: 0; } .sidebar li { padding: 8px 0; border-bottom: 1px solid var(--hp-border); font-size: 15px; } .sidebar li:last-child { border-bottom: 0; } .search-form { display: flex; gap: 8px; } .search-form input[type="search"] { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--hp-border); border-radius: 30px; font-family: inherit; } .search-form button { padding: 10px 18px; } /* Pagination */ .pagination, .nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 50px; flex-wrap: wrap; } .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 30px; background: var(--hp-bg-soft); color: var(--hp-heading); font-weight: 500; } .page-numbers.current, .page-numbers:hover { background: var(--hp-primary); color: #fff; } /* Filter bar */ .filter-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; justify-content: space-between; align-items: center; } .alpha-filter { display: flex; flex-wrap: wrap; gap: 4px; } .alpha-filter a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: var(--hp-bg-soft); color: var(--hp-heading); font-size: 13px; font-weight: 600; } .alpha-filter a.active, .alpha-filter a:hover { background: var(--hp-primary); color: #fff; } /* Forms */ .hp-form { display: grid; gap: 16px; } .hp-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hp-form input, .hp-form textarea, .hp-form select { width: 100%; padding: 14px 18px; border: 1px solid var(--hp-border); border-radius: 10px; font-family: inherit; font-size: 15px; background: #fff; } .hp-form input:focus, .hp-form textarea:focus { outline: 2px solid var(--hp-primary); border-color: transparent; } .notice { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; } .notice-success { background: #e3f6ef; color: #0b6b4e; } .notice-error { background: #fdeaea; color: #a33; } .contact-cards { display: grid; gap: 18px; } .contact-card { display: flex; gap: 16px; align-items: center; background: var(--hp-bg-soft); padding: 22px; border-radius: var(--hp-radius); } .contact-card h4 { margin: 0; font-size: 16px; } .contact-card p { margin: 0; color: var(--hp-muted); font-size: 14px; } .map-wrap iframe { width: 100%; height: 380px; border: 0; border-radius: var(--hp-radius); } /* Newsletter band */ .cta-band { background: linear-gradient(120deg, var(--hp-primary), var(--hp-navy)); color: #fff; border-radius: 20px; padding: 50px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; } .cta-band h2 { color: #fff; margin-bottom: 6px; } .cta-band p { opacity: .9; margin: 0; } /* ---------- Explore tiles & condition list ---------- */ .explore-section { padding: 60px 0 20px; } .conditions-section { padding: 30px 0 80px; } .list-title { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 22px; } .explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .explore-tile { display: flex; flex-direction: column; gap: 4px; padding: 26px 28px; border-radius: 18px; color: var(--hp-heading); transition: transform .2s, box-shadow .2s; } .explore-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.08); color: var(--hp-heading); } .explore-tile .tile-icon { margin-bottom: 12px; display: inline-flex; } .explore-tile strong { font-size: 21px; font-weight: 600; } .explore-tile > span:last-child { font-size: 15px; color: var(--hp-muted); } .tile-blue { background: #e7f1fb; } .tile-blue .tile-icon, .condition-thumb.tile-blue { color: #1d6fb0; } .tile-green { background: #e5f5ea; } .tile-green .tile-icon, .condition-thumb.tile-green { color: #1f8a4c; } .tile-sand { background: #f9eedd; } .tile-sand .tile-icon, .condition-thumb.tile-sand { color: #9a640f; } .tile-purple { background: #f0e8fa; } .tile-purple .tile-icon, .condition-thumb.tile-purple { color: #7a3fb5; } .tile-rose { background: #fde8ee; } .tile-rose .tile-icon, .condition-thumb.tile-rose { color: #c02656; } .tile-teal { background: #e2f5f3; } .tile-teal .tile-icon, .condition-thumb.tile-teal { color: #11807a; } .tile-amber { background: #fff3d6; } .tile-amber .tile-icon, .condition-thumb.tile-amber { color: #a86b00; } .tile-indigo { background: #e8eafb; } .tile-indigo .tile-icon, .condition-thumb.tile-indigo { color: #3b46b0; } .involve-card { border-radius: 18px; padding: 34px 30px; display: flex; flex-direction: column; } .involve-card .tile-icon { margin-bottom: 16px; } .involve-card h3 { font-size: 21px; } .involve-card p { color: var(--hp-muted); flex: 1; } .condition-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 50px; } .condition-row { display: flex; align-items: center; gap: 18px; padding: 20px 4px; border-bottom: 1px solid #ececec; color: var(--hp-heading); } .condition-row:hover { color: var(--hp-primary); } .condition-row:hover .condition-chevron { transform: translateX(4px); color: var(--hp-primary); } .condition-thumb { width: 64px; height: 64px; flex-shrink: 0; border-radius: 14px; overflow: hidden; display: grid; place-items: center; border: 1px solid #eee; } .condition-thumb img { width: 100%; height: 100%; object-fit: cover; } .condition-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .condition-text strong { font-size: 18px; font-weight: 600; } .condition-text span { font-size: 14px; color: var(--hp-muted); } .condition-chevron { font-size: 30px; line-height: 1; color: #888; transition: transform .2s; } /* Medicines */ .medicine-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 50px; } .medicine-card { display: flex; align-items: center; gap: 18px; padding: 20px 4px; border-bottom: 1px solid #ececec; color: var(--hp-heading); } .medicine-card:hover { color: var(--hp-primary); } .medicine-uses { font-size: 13px !important; } .rx-tag { display: inline-block; align-self: flex-start; font-style: normal; font-size: 11px; padding: 2px 10px; border-radius: 20px; margin-top: 6px; background: #f0f0f2; color: #444; } .rx-prescription { background: #fde8ee; color: #a01e45; } .rx-free { background: #e5f5ea; color: #1f7a45; } .safety-strip { background: #e2f5f3; border-radius: 16px; padding: 20px 26px; margin-bottom: 34px; } .safety-strip strong { display: flex; align-items: center; gap: 8px; color: #11807a; margin-bottom: 8px; } .safety-strip ul { margin: 0; padding-left: 20px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; font-size: 15px; } .info-warn { background: #fde8ee !important; } .review-badge { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; background: #e5f5ea; color: #1f7a45; padding: 8px 16px; border-radius: 30px; margin-bottom: 24px; } .review-badge.pending { background: #f3f3f5; color: #666; } .review-badge a { color: inherit; text-decoration: underline; } /* Content helpers for About / programme pages */ .entry-content .hp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; padding: 0; list-style: none; margin: 1.2em 0 1.6em; } .entry-content .hp-cards > li, .entry-content .hp-cards > div { background: var(--hp-bg-soft); border-radius: 14px; padding: 20px 22px; margin: 0; } .entry-content .hp-cards strong { display: block; color: var(--hp-heading); margin-bottom: 4px; } .entry-content .hp-highlight { background: linear-gradient(120deg, var(--hp-navy), var(--hp-primary)); color: #fff; border-radius: 16px; padding: 26px 30px; margin: 1.4em 0; } .entry-content .hp-highlight h2, .entry-content .hp-highlight h3 { color: #fff; margin-top: 0; } .entry-content .hp-highlight p:last-child { margin-bottom: 0; } .entry-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 15px; } .entry-content th, .entry-content td { border: 1px solid var(--hp-border); padding: 10px 14px; text-align: left; vertical-align: top; } .entry-content th { background: var(--hp-bg-soft); color: var(--hp-heading); } .entry-content .hp-toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin: 0 0 2em; } .entry-content .hp-toc a { display: inline-block; padding: 6px 14px; border-radius: 20px; background: var(--hp-bg-soft); font-size: 14px; } .entry-content h2[id] { scroll-margin-top: 110px; } .hp-form-box { background: #fff !important; box-shadow: var(--hp-shadow); padding: 32px !important; margin: 2em 0; } .hp-field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--hp-heading); } .hp-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--hp-muted); } .hp-consent input { width: auto !important; margin-top: 5px; } /* Language switcher (English | नेपाली) */ .topbar-right { display: flex; align-items: center; gap: 14px; } .lang-switch { display: inline-flex; align-items: center; gap: 2px; background: rgba(255,255,255,.14); border-radius: 30px; padding: 3px; } .lang-switch .lang-icon { display: inline-flex; padding: 0 6px 0 8px; color: #fff; opacity: .85; } .lang-switch a { padding: 3px 14px; border-radius: 20px; color: #fff; font-size: 13px; font-weight: 500; line-height: 1.6; } .lang-switch a:hover { background: rgba(255,255,255,.18); color: #fff; } .lang-switch a.active { background: #fff; color: var(--hp-primary); } .lang-notice { display: flex; align-items: center; gap: 8px; background: #fff3d6; color: #6b4700; border-radius: 12px; padding: 12px 16px; font-size: 14px; } .lang-ne body, body.lang-ne { line-height: 1.8; } body.lang-ne h1, body.lang-ne h2, body.lang-ne h3 { line-height: 1.45; } /* Health topics */ .topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .topic-tile { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border-radius: 16px; color: var(--hp-heading); transition: transform .2s, box-shadow .2s; } .topic-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.07); color: var(--hp-heading); } .topic-tile .tile-icon { margin-bottom: 8px; display: inline-flex; } .topic-tile strong { font-size: 17px; font-weight: 600; } .topic-tile > span:last-child:not(.tile-icon) { font-size: 14px; color: var(--hp-muted); } .topic-grid.compact { grid-template-columns: repeat(4, 1fr); gap: 10px; } .topic-grid.compact .topic-tile { flex-direction: row; align-items: center; gap: 10px; padding: 14px 16px; } .topic-grid.compact .tile-icon { margin: 0; } .topic-grid.compact strong { font-size: 14px; } .advisory-quick { grid-template-columns: repeat(5, 1fr); } .topic-empty { text-align: center; padding: 50px 30px !important; display: flex; flex-direction: column; align-items: center; } .topic-empty .tile-icon { margin-bottom: 10px; } /* Symptoms index */ .symptom-index { columns: 3 260px; column-gap: 40px; } .symptom-item { break-inside: avoid; padding: 14px 0; border-bottom: 1px solid var(--hp-border); } .symptom-item h3 { font-size: 17px; margin: 0 0 6px; } .symptom-item .symptom-list { margin: 0; } .symptom-item .symptom-list a { color: inherit; } .symptom-filter { width: 100%; max-width: 480px; padding: 13px 18px; border: 1px solid var(--hp-border); border-radius: 30px; font-family: inherit; font-size: 15px; margin-bottom: 30px; } /* ---------- Healthcare directory ---------- */ .verify-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: 30px; line-height: 1.3; } .verify-small { font-size: 11px; padding: 2px 9px; gap: 4px; } .verify-verified { background: #e5f5ea; color: #1f7a45; } .verify-pending { background: #fff3d6; color: #8a5a00; } .verify-unverified { background: #f1f1f3; color: #5e5e66; } .page-hero .verify-badge { margin-bottom: 10px; } .page-hero .verify-unverified { background: rgba(255,255,255,.18); color: #fff; } .card-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; } .card-tags .tag { margin: 0; } .tag-emg { background: #fde8ee !important; color: #a01e45 !important; } .name-ne { font-size: 14px; opacity: .85; } .hospital-card .feature-icon img { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; } .doctor-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; } .doctor-card { display: flex; align-items: center; gap: 18px; padding: 18px 4px; border-bottom: 1px solid #ececec; color: var(--hp-heading); } .doctor-card:hover { color: var(--hp-primary); } .doctor-avatar { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #e5f5ea; color: #1f8a4c; font-weight: 600; font-size: 20px; } .doctor-avatar img { width: 100%; height: 100%; object-fit: cover; } .doctor-avatar.big { width: 110px; height: 110px; font-size: 36px; border: 4px solid rgba(255,255,255,.4); } .doc-work { display: flex !important; align-items: center; gap: 5px; font-size: 13px !important; } .dir-top { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; margin-bottom: 24px; } .dir-add { white-space: nowrap; } .btn-accent-solid { background: var(--hp-navy); border-color: var(--hp-navy); } .dir-filters { background: var(--hp-bg-soft); border-radius: 18px; padding: 22px 24px; display: grid; gap: 14px; } .dir-filters-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; } .dir-filters-foot { grid-template-columns: 1fr auto; align-items: center; } .dir-filters-foot > div:last-child { display: flex; align-items: center; gap: 14px; } .dir-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 14px; } .dir-checks label { display: inline-flex; align-items: center; gap: 6px; } .dir-own select { padding: 8px 12px !important; } .dir-reset { font-size: 14px; color: var(--hp-muted); } .dir-filters input[type=search], .dir-filters select, .geo-search input[type=search], .geo-search select, .hp-dir-form input, .hp-dir-form select, .hp-dir-form textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--hp-border); border-radius: 10px; font-family: inherit; font-size: 15px; background: #fff; } .hp-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; color: var(--hp-heading); } .hp-field small { font-weight: 400; color: var(--hp-muted); } .hp-geo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .hp-geo .hp-geo-other { grid-column: 1 / -1; } .hp-geo select:disabled { background: #f6f6f7; color: #999; } .dir-results-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .dir-results-head p { margin: 0; } .verify-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: var(--hp-muted); } .verify-legend li { display: flex; align-items: center; gap: 8px; } .hp-map { height: 380px; border-radius: 16px; overflow: hidden; margin-bottom: 30px; background: var(--hp-bg-soft); z-index: 1; } .profile-map { height: 320px; margin: 24px 0; } .profile-hero { text-align: left; padding: 50px 0; } .profile-head { display: flex; gap: 26px; align-items: center; } .profile-head h1 { margin-bottom: 4px; } .profile-head p { margin: 0 0 4px; max-width: none; } .profile-logo { width: 110px; height: 110px; flex-shrink: 0; border-radius: 22px; background: #fff; color: var(--hp-primary); display: grid; place-items: center; overflow: hidden; } .profile-logo img { width: 100%; height: 100%; object-fit: contain; } .profile-addr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; opacity: .95; } .profile-hero .breadcrumbs { text-align: left; margin-top: 18px; } .fact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 26px; } .fact-grid > div { background: var(--hp-bg-soft); border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; } .fact-grid span { font-size: 12px; color: var(--hp-muted); text-transform: uppercase; letter-spacing: .5px; } .fact-grid strong { color: var(--hp-heading); font-weight: 600; } .fact-grid strong.ok { color: #1f7a45; } .service-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 20px; } .service-list li { padding-left: 26px; position: relative; } .service-list li::before { content: "✓"; position: absolute; left: 0; color: #1f8a4c; font-weight: 700; } .contact-list li { display: flex; gap: 10px; align-items: flex-start; } .contact-list svg { flex-shrink: 0; margin-top: 4px; color: var(--hp-primary); } .verify-meta { font-size: 13px; color: var(--hp-muted); border-top: 1px solid var(--hp-border); padding-top: 16px; margin-top: 30px; } .hp-report { margin-top: 18px; border: 1px solid var(--hp-border); border-radius: 14px; padding: 4px 20px; } .hp-report summary { cursor: pointer; padding: 12px 0; font-weight: 500; color: var(--hp-heading); display: flex; align-items: center; gap: 8px; } .hp-report[open] { padding-bottom: 20px; } .hp-report .hp-form input, .hp-report .hp-form select, .hp-report .hp-form textarea { padding: 11px 14px; } .find-hc .section-head { margin-bottom: 30px; } .find-hc-cards { gap: 20px; align-items: stretch; } .find-card { position: relative; display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 18px; padding: 24px 26px; box-shadow: var(--hp-shadow); color: var(--hp-heading); transition: transform .2s; } .find-card:hover { transform: translateY(-4px); color: var(--hp-heading); } .find-card .condition-text strong { font-size: 21px; } .find-no { position: absolute; top: 14px; right: 22px; font-size: 13px; font-weight: 700; color: var(--hp-primary); letter-spacing: 1px; } .geo-search { margin-top: 24px; background: #fff; border-radius: 18px; padding: 24px 26px; box-shadow: var(--hp-shadow); display: grid; gap: 16px; } .geo-search-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .geo-search-head strong { display: flex; align-items: center; gap: 8px; color: var(--hp-heading); } .geo-switch { display: inline-flex; background: var(--hp-bg-soft); border-radius: 30px; padding: 4px; font-size: 14px; } .geo-switch label { padding: 6px 14px; border-radius: 30px; cursor: pointer; display: flex; gap: 6px; align-items: center; } .geo-switch label:has(input:checked) { background: var(--hp-primary); color: #fff; } .geo-switch input { accent-color: #fff; } .geo-search-foot { display: grid; grid-template-columns: 2fr 1.4fr auto; gap: 14px; align-items: end; } .contribute { margin-top: 60px; background: #fff; border: 1px solid var(--hp-border); border-radius: 22px; padding: 34px; } .contribute-head { text-align: center; margin-bottom: 24px; } .contribute-head h2 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 4px; } .contribute-head p { color: var(--hp-muted); margin: 0; } .contribute-card { display: flex; flex-direction: column; gap: 6px; border-radius: 18px; padding: 26px 28px; color: var(--hp-heading); transition: transform .2s; } .contribute-card:hover { transform: translateY(-4px); color: var(--hp-heading); } .contribute-card strong { font-size: 20px; } .contribute-card > span:last-child { color: var(--hp-muted); font-size: 15px; } .contribute-note { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 14px; color: var(--hp-muted); margin: 20px 0 0; } .hp-tabs { display: inline-flex; background: var(--hp-bg-soft); border-radius: 40px; padding: 5px; margin-bottom: 24px; } .hp-tabs button { border: 0; background: transparent; padding: 10px 22px; border-radius: 30px; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--hp-heading); } .hp-tabs button.active { background: var(--hp-primary); color: #fff; } .hp-dir-form { display: grid; gap: 18px; } .hp-dir-sec { border: 1px solid var(--hp-border); border-radius: 16px; padding: 18px 22px 22px; margin: 0; background: #fff; } .hp-dir-sec legend { font-weight: 600; color: var(--hp-heading); padding: 0 8px; display: flex; align-items: center; gap: 10px; font-size: 17px; } .sec-no { width: 28px; height: 28px; border-radius: 50%; background: var(--hp-primary); color: #fff; display: inline-grid; place-items: center; font-size: 13px; } .hp-dir-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; } .hp-dir-grid .hp-field-full { grid-column: 1 / -1; } .hp-field-label { font-size: 14px; font-weight: 500; color: var(--hp-heading); } .req { color: var(--hp-primary); } .hp-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 400; } .hp-checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; } .hp-checks input, .hp-dir-form .hp-consent input { width: auto !important; padding: 0 !important; } .hp-dir-form input[type=file] { padding: 9px; background: var(--hp-bg-soft); } .hp-reg-note, .hp-form-note { margin: 10px 0 0; color: var(--hp-muted); } .hp-dir-form .hp-consent { margin-bottom: 8px; } /* ---------- Footer ---------- */ .site-footer { background: var(--hp-navy); color: #ffdcdd; padding-top: 70px; font-size: 15px; } .site-footer h4 { color: #fff; font-size: 18px; margin-bottom: 18px; } .site-footer a { color: #ffdcdd; } .site-footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1.4fr; gap: 40px; padding-bottom: 50px; } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: 10px; } .footer-brand .site-title { color: #fff; margin-bottom: 14px; } .footer-contact li { display: flex; gap: 10px; } .newsletter-form { display: flex; background: rgba(255,255,255,.08); border-radius: 40px; padding: 5px; margin-top: 14px; } .newsletter-form input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; padding: 10px 16px; font-family: inherit; outline: 0; } .newsletter-form input::placeholder { color: #f3b3b5; } .newsletter-form button { padding: 10px 18px; } .social-links { display: flex; gap: 10px; margin-top: 18px; } .social-links a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; font-size: 14px; font-weight: 700; } .social-links a:hover { background: var(--hp-primary); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; font-size: 14px; } .footer-bottom .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .back-to-top { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; background: var(--hp-primary); color: #fff; display: grid; place-items: center; font-size: 20px; box-shadow: var(--hp-shadow); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 99; } .back-to-top.show { opacity: 1; pointer-events: auto; } .back-to-top:hover { color: #fff; background: var(--hp-primary-dark); } /* WP core */ .alignleft { float: left; margin: 0 1.5em 1em 0; } .alignright { float: right; margin: 0 0 1em 1.5em; } .aligncenter { margin-left: auto; margin-right: auto; } .wp-caption-text { font-size: 13px; color: var(--hp-muted); text-align: center; } .sticky, .bypostauthor, .gallery-caption { } /* ---------- Responsive ---------- */ @media (max-width: 1240px) { .menu-toggle { display: block; } .main-navigation { position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,.08); display: none; padding: 10px 20px 20px; } .main-navigation.toggled { display: block; } .main-navigation ul { flex-direction: column; align-items: stretch; } .main-navigation ul ul { position: static; display: none; box-shadow: none; padding: 0 0 6px 14px; min-width: 0; max-height: none; } .main-navigation ul ul ul { grid-template-columns: 1fr; min-width: 0; } .main-navigation li:hover > ul, .main-navigation li:focus-within > ul, .main-navigation ul ul li:hover > ul { display: none; } .main-navigation li.open > ul { display: flex !important; } .main-navigation ul ul a { white-space: normal; } .main-navigation .menu-item-has-children > a::after, .main-navigation ul ul .menu-item-has-children > a::after { content: none; } .main-navigation li { display: flex; flex-wrap: wrap; align-items: center; } .main-navigation li > a { flex: 1; } .main-navigation li > ul { flex-basis: 100%; } .submenu-toggle { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: var(--hp-bg-soft); color: var(--hp-heading); font-size: 16px; cursor: pointer; } .main-navigation li.open > .submenu-toggle { transform: rotate(180deg); } .main-navigation { max-height: calc(100vh - 120px); overflow-y: auto; } } @media (max-width: 1024px) { .grid-4, .explore-grid, .topic-grid, .topic-grid.compact, .advisory-quick { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .layout-sidebar { grid-template-columns: 1fr; } } @media (max-width: 860px) { .menu-toggle { display: block; } .main-navigation { position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,.08); display: none; padding: 10px 20px 20px; } .main-navigation.toggled { display: block; } .main-navigation ul { flex-direction: column; align-items: stretch; } .main-navigation ul ul { position: static; display: none; box-shadow: none; padding: 0 0 6px 14px; min-width: 0; max-height: none; } .main-navigation ul ul ul { grid-template-columns: 1fr; min-width: 0; } .main-navigation li:hover > ul, .main-navigation li:focus-within > ul, .main-navigation ul ul li:hover > ul { display: none; } .main-navigation li.open > ul { display: flex !important; } .main-navigation ul ul a { white-space: normal; } .main-navigation .menu-item-has-children > a::after, .main-navigation ul ul .menu-item-has-children > a::after { content: none; } .main-navigation li { display: flex; flex-wrap: wrap; align-items: center; } .main-navigation li > a { flex: 1; } .main-navigation li > ul { flex-basis: 100%; } .submenu-toggle { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: var(--hp-bg-soft); color: var(--hp-heading); font-size: 16px; cursor: pointer; } .main-navigation li.open > .submenu-toggle { transform: rotate(180deg); } .main-navigation { max-height: calc(100vh - 120px); overflow-y: auto; } .grid-2, .grid-3, .cta-band, .condition-list, .medicine-grid, .safety-strip ul, .doctor-grid, .dir-top, .dir-filters-row, .dir-filters-foot, .hp-geo, .geo-search-foot, .hp-dir-grid, .service-list { grid-template-columns: 1fr; } .profile-head { flex-direction: column; align-items: flex-start; } .contribute { padding: 24px 18px; } .hero { padding: 30px 0 36px; } .section { padding: 64px 0; } .cta-band { padding: 34px 26px; } .hp-form .row-2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .grid-4, .footer-grid { grid-template-columns: 1fr; } .topbar-info { display: none; } .explore-grid { gap: 12px; } .topic-grid { grid-template-columns: 1fr; } .explore-tile { padding: 18px; } .explore-tile strong { font-size: 17px; } .explore-tile > span:last-child { font-size: 13px; } .hero-search select { display: none; } } @media (max-width: 560px) { .hero h1 { font-size: 6vw; } } /* About section: logo instead of video placeholder */ .about-logo { background: #fff; border: 1px solid var(--hp-border); border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 40px; } .about-logo img { width: auto; max-width: 85%; max-height: 100%; object-fit: contain; } /* ---------- Membership Options ---------- */ .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; } .plan-card { position: relative; background: #fff; border: 1px solid var(--hp-border); border-radius: 18px; padding: 32px 30px; display: flex; flex-direction: column; box-shadow: 0 4px 18px rgba(0,0,0,.04); } .plan-card.is-featured { border: 2px solid var(--hp-primary); box-shadow: var(--hp-shadow); } .plan-badge { position: absolute; top: -13px; right: 22px; background: var(--hp-primary); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 14px; border-radius: 20px; } .plan-tag { align-self: flex-start; display: inline-block; background: var(--hp-bg-soft); color: var(--hp-primary-dark); font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; } .plan-card h3 { font-size: 22px; margin-bottom: 6px; } .plan-desc { color: var(--hp-muted); font-size: 14px; margin-bottom: 18px; min-height: 2.9em; } .plan-price { margin: 0 0 20px; } .plan-price strong { font-size: 32px; font-weight: 700; color: var(--hp-heading); line-height: 1; } .plan-price span { font-size: 13px; color: var(--hp-muted); } .plan-features { list-style: none; padding: 0; margin: 0 0 28px; } .plan-features li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 14.5px; } .plan-features li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--hp-primary); font-weight: 700; } .plan-btn { margin-top: auto; justify-content: center; width: 100%; border-radius: 12px; } /* Registration page */ .plan-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 36px; } .plan-switch a { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border: 1px solid var(--hp-border); border-radius: 14px; background: #fff; color: var(--hp-heading); transition: border-color .2s, box-shadow .2s; } .plan-switch a:hover { border-color: var(--hp-primary); color: var(--hp-heading); } .plan-switch a.active { border: 2px solid var(--hp-primary); box-shadow: var(--hp-shadow); } .plan-switch .plan-tag { margin-bottom: 8px; } .plan-switch strong { font-size: 17px; } .plan-switch-price { font-size: 13px; color: var(--hp-muted); } .register-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 36px; align-items: start; } .register-layout .hp-form-box { margin: 0; } .register-summary { position: sticky; top: 110px; } .register-layout .hp-form { grid-template-columns: 1fr 1fr; column-gap: 18px; align-items: end; } .register-layout .hp-form > :not(.hp-field), .register-layout .hp-form > .hp-field:has(textarea) { grid-column: 1 / -1; } .register-summary-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--hp-muted); margin-bottom: 10px; } .register-note { font-size: 13px; color: var(--hp-muted); margin: 0; } @media (max-width: 860px) { .plan-grid, .register-layout { grid-template-columns: 1fr; } .plan-switch { grid-template-columns: 1fr; } .register-summary { position: static; order: -1; } .register-layout .hp-form { grid-template-columns: 1fr; } .plan-desc { min-height: 0; } } /* ---------- Free Services & Discounts ---------- */ .free-filters { margin-bottom: 22px; } .free-filters-row2 { grid-template-columns: 1fr 1fr auto; align-items: end; } .free-filters-actions { display: flex; align-items: center; gap: 14px; } .free-type-tabs { justify-content: flex-start; margin-bottom: 14px; } .free-count { color: var(--hp-muted); font-size: 14px; margin: 0 0 18px; } .free-card { background: #fff; border: 1px solid var(--hp-border); border-top: 4px solid #1f8a4c; border-radius: var(--hp-radius); padding: 22px 24px; display: flex; flex-direction: column; box-shadow: 0 4px 18px rgba(0,0,0,.04); transition: transform .2s, box-shadow .2s; } .free-card:hover { transform: translateY(-4px); box-shadow: var(--hp-shadow); } .free-card.free-discount { border-top-color: #c27a12; } .free-card.free-money { border-top-color: #2c6db5; } .free-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; } .free-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; padding: 4px 12px; border-radius: 20px; background: #e5f5eb; color: #17693a; } .free-discount .free-badge { background: #fdf1de; color: #8a540a; } .free-money .free-badge { background: #e6f0fb; color: #1d5291; } .free-area { font-size: 12px; color: var(--hp-muted); display: inline-flex; align-items: center; gap: 4px; } .free-card h3 { font-size: 18px; margin-bottom: 6px; } .free-card h3 a { color: var(--hp-heading); } .free-card h3 a:hover { color: var(--hp-primary); } .free-value { font-weight: 700; color: var(--hp-primary-dark); margin: 0 0 8px; font-size: 15px; } .free-groups { margin: 4px 0 16px; } .free-card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-top: 1px solid var(--hp-border); padding-top: 14px; } .free-prov { font-size: 12px; color: var(--hp-muted); line-height: 1.4; } .free-card-foot .link-more { white-space: nowrap; } .free-help { margin-top: 50px; } @media (max-width: 860px) { .free-filters-row2 { grid-template-columns: 1fr; } .free-filters-actions { justify-content: flex-end; } } /* ---------- Related content (disease pages & blog posts) ---------- */ .related-block { margin-top: 50px; display: grid; gap: 44px; } .related-section h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--hp-border); } .related-section h2 svg { color: var(--hp-primary); flex-shrink: 0; } .related-posts { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; } .related-posts .card-body { padding: 18px; } .related-posts .card-body h3 { font-size: 16px; } .related-diseases { grid-template-columns: 1fr 1fr; } .related-on-post { margin: 40px 0 10px; } @media (max-width: 640px) { .related-diseases { grid-template-columns: 1fr; } } /* ---------- Contact Directory ---------- */ .quick-dial { background: linear-gradient(120deg, var(--hp-navy), var(--hp-primary)); color: #fff; border-radius: 20px; padding: 26px 28px; margin-bottom: 28px; } .quick-dial h2 { color: #fff; font-size: 20px; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .quick-dial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .quick-dial-btn { background: #fff; color: var(--hp-heading); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; transition: transform .15s; } .quick-dial-btn:hover { transform: translateY(-3px); color: var(--hp-heading); } .quick-dial-btn strong { font-size: 26px; line-height: 1.1; color: var(--hp-primary); letter-spacing: .5px; } .quick-dial-btn span { font-size: 13px; color: var(--hp-muted); line-height: 1.35; } .contact-filters { margin-bottom: 22px; } .contact-filters-row { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; } .contact-jump { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 40px; } .contact-jump .explore-tile { padding: 18px 20px; } .contact-jump .explore-tile strong { font-size: 17px; } .contact-jump .explore-tile.is-active { outline: 2px solid var(--hp-primary); } .contact-group { margin-bottom: 40px; scroll-margin-top: 110px; } .contact-group > h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; padding-bottom: 12px; border-bottom: 2px solid var(--hp-border); margin-bottom: 6px; } .contact-group > h2 svg { color: var(--hp-primary); } .contact-list { display: grid; } .contact-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 4px; border-bottom: 1px solid var(--hp-border); } .contact-row h3 { font-size: 17px; margin: 0 0 4px; } .contact-row h3 a { color: var(--hp-heading); } .contact-row h3 a:hover { color: var(--hp-primary); } .contact-note { margin: 0 0 6px; color: var(--hp-muted); font-size: 14px; } .contact-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--hp-muted); } .contact-meta span { display: inline-flex; align-items: center; gap: 4px; } .contact-hours.is-247 { color: #17693a; font-weight: 600; } .contact-free { background: #e5f5eb; color: #17693a; font-weight: 600; padding: 1px 10px; border-radius: 20px; } .contact-extra { margin: 8px 0 0; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px 18px; } .contact-call { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--hp-primary); color: #fff; font-weight: 700; font-size: 18px; letter-spacing: .3px; padding: 10px 20px; border-radius: 40px; min-width: 120px; justify-content: center; } .contact-call:hover { background: var(--hp-primary-dark); color: #fff; } .contact-in-grid { grid-column: 1 / -1; } @media (max-width: 1024px) { .contact-jump { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .contact-filters-row { grid-template-columns: 1fr; } } @media (max-width: 600px) { .contact-jump { grid-template-columns: 1fr 1fr; } .contact-row { flex-direction: column; align-items: stretch; } .contact-call { width: 100%; } } .quick-dial-btn strong.is-long { font-size: 19px; white-space: nowrap; padding-top: 5px; } @media (max-width: 600px) { .quick-dial { padding: 20px 16px; } .quick-dial-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .quick-dial-btn strong { font-size: 22px; } .quick-dial-btn strong.is-long { font-size: 16px; } } /* ================================================================= * Public Health Stories & News * ================================================================= */ .btn-sm { padding: 8px 16px; font-size: 14px; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); } .btn-outline-light:hover { background: #fff; color: var(--hp-primary); border-color: #fff; } .link-light { color: #fff; text-decoration: underline; font-size: 14px; } .link-light:hover { color: #ffe1e2; } .hp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; } .req { color: var(--hp-primary); } .hp-help { display: block; font-size: 13px; color: var(--hp-muted); margin-top: 4px; } /* Hub */ .story-hero { padding: 54px 0 60px; } .story-hero .hero-search { margin-bottom: 18px; } .story-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; } .story-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: -30px 0 30px; position: relative; z-index: 2; } .story-stat { background: #fff; border-radius: 16px; box-shadow: var(--hp-shadow); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 2px; } .story-stat .tile-icon { color: var(--hp-primary); } .story-stat strong { font-size: 30px; line-height: 1.1; color: var(--hp-heading); } .story-stat span:last-child { font-size: 13px; color: var(--hp-muted); line-height: 1.35; } .story-type-tabs { justify-content: flex-start; margin-bottom: 16px; } .story-filters { margin-bottom: 28px; } .story-filters summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--hp-heading); } .story-filters[open] summary { margin-bottom: 14px; } .story-filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 12px; } .story-filters .hp-geo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 12px; } .story-filter-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; } .story-block { margin-bottom: 50px; } .story-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 2px solid var(--hp-border); padding-bottom: 10px; margin-bottom: 22px; } .story-block-head h2 { font-size: 24px; margin: 0; } .story-card .card-thumb-placeholder { display: grid; place-items: center; } .story-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; padding: 3px 10px; border-radius: 20px; color: var(--hp-heading); } .story-where { font-size: 13px; color: var(--hp-muted); display: flex; gap: 6px; align-items: flex-start; margin: 0 0 12px; } .story-where svg { flex-shrink: 0; margin-top: 3px; color: var(--hp-primary); } .story-explore-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; } .story-explore-grid h3 { font-size: 18px; } .province-count-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; } .province-count { position: relative; overflow: hidden; border: 1px solid var(--hp-border); border-radius: 12px; padding: 12px 14px; color: var(--hp-heading); background: #fff; } .province-count::before { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: var(--fill, 0%); background: var(--hp-primary); } .province-count:hover { border-color: var(--hp-primary); color: var(--hp-heading); } .province-count strong { display: block; font-size: 15px; } .province-count span { font-size: 13px; color: var(--hp-muted); } .story-map { height: 320px; border-radius: 14px; background: var(--hp-bg-soft); border: 1px solid var(--hp-border); } .theme-bars { list-style: none; margin: 0; padding: 0; } .theme-bars a { display: grid; grid-template-columns: 1.4fr 1fr 30px; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hp-border); color: var(--hp-heading); font-size: 14px; } .theme-bars a:hover { color: var(--hp-primary); } .theme-bar { height: 10px; background: var(--hp-bg-soft); border-radius: 6px; overflow: hidden; } .theme-bar span { display: block; height: 100%; background: var(--hp-primary); border-radius: 6px; } .theme-bar-n { font-weight: 700; text-align: right; } .story-cta { margin-top: 20px; } .story-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: flex-end; } /* Homepage block */ .home-stories-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; } .home-stories-grid.has-news { grid-template-columns: 1fr 300px; } .home-stories-grid .grid-3 { gap: 22px; } .home-news { background: var(--hp-bg-soft); border-radius: var(--hp-radius); padding: 22px; } .home-news h3 { font-size: 18px; display: flex; gap: 8px; align-items: center; } .home-news h3 svg { color: var(--hp-primary); } .home-news ul { list-style: none; padding: 0; margin: 0 0 14px; } .home-news li { padding: 10px 0; border-bottom: 1px solid var(--hp-border); } .home-news li a { color: var(--hp-heading); font-weight: 600; font-size: 15px; display: block; } .home-news li small { color: var(--hp-muted); font-size: 12px; } .home-stories-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--hp-border); } .home-stories-foot > span:last-child { display: flex; gap: 10px; flex-wrap: wrap; } /* Form */ .story-form-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 36px; align-items: start; } .story-form-wrap > .notice, .story-form-wrap > .story-account, .story-form-wrap > .story-feedback { grid-column: 1; } .story-aside { grid-column: 2; grid-row: 1 / span 6; background: var(--hp-bg-soft); border-radius: var(--hp-radius); padding: 22px; position: sticky; top: 110px; } .story-aside h3 { font-size: 17px; } .story-aside ul { padding-left: 18px; font-size: 14px; } .story-account { background: #fff; border: 1px solid var(--hp-border); border-radius: var(--hp-radius); padding: 18px 20px; display: grid; gap: 12px; font-size: 14px; } .story-account-btns { display: flex; gap: 10px; flex-wrap: wrap; } .story-register { margin-top: 6px; } .story-form { background: #fff; border: 1px solid var(--hp-border); border-radius: 18px; padding: 28px; box-shadow: 0 4px 18px rgba(0,0,0,.04); } .story-steps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .story-steps li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 5px 10px 5px 6px; border-radius: 20px; background: var(--hp-bg-soft); color: var(--hp-muted); cursor: pointer; } .story-steps .n { width: 20px; height: 20px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11px; } .story-steps li.is-active { background: var(--hp-primary); color: #fff; } .story-steps li.is-active .n { color: var(--hp-primary); } .story-steps li.is-done { color: var(--hp-heading); } .story-steps li.is-done .n { background: #1f8a4c; color: #fff; } .story-progress { height: 4px; background: var(--hp-bg-soft); border-radius: 4px; overflow: hidden; margin-bottom: 26px; } .story-progress span { display: block; height: 100%; width: 0; background: var(--hp-primary); transition: width .3s; } .story-step { margin-bottom: 30px; } .story-form.is-js .story-step { display: none; margin-bottom: 0; } .story-form.is-js .story-step.is-active { display: block; } .story-form:not(.is-js) .story-steps, .story-form:not(.is-js) .story-progress, .story-form:not(.is-js) [data-next], .story-form:not(.is-js) [data-prev], .story-form:not(.is-js) [data-preview-btn] { display: none !important; } .story-form:not(.is-js) [data-submit] { display: inline-flex !important; } .story-step h2 { font-size: 24px; outline: none; } .story-step h3 { font-size: 18px; margin-top: 24px; } .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } .story-grid .hp-field-wide, .story-grid .hp-geo { grid-column: 1 / -1; } .story-form .hp-field > label > span, .story-form legend { font-weight: 600; font-size: 14px; color: var(--hp-heading); display: block; margin-bottom: 6px; } .story-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .story-form input[type=text], .story-form input[type=email], .story-form input[type=url], .story-form input[type=tel], .story-form input[type=number], .story-form input[type=password], .story-form select, .story-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #d9d2d2; border-radius: 10px; font: inherit; font-size: 15px; background: #fff; } .story-form textarea { resize: vertical; } .story-form .hp-geo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .hp-choices { display: flex; flex-wrap: wrap; gap: 8px 18px; } .hp-choice { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; cursor: pointer; } .hp-choice input { margin-top: 4px; accent-color: var(--hp-primary); } .is-invalid input, .is-invalid select, .is-invalid textarea { border-color: var(--hp-primary) !important; background: #fff7f7 !important; } fieldset.is-invalid legend, .is-invalid > label > span { color: var(--hp-primary) !important; } .story-type-card.is-invalid { outline: 2px solid var(--hp-primary); } .hp-wordcount { font-size: 12px; color: var(--hp-muted); } .hp-wordcount.is-over { color: var(--hp-primary); font-weight: 600; } .story-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .story-type-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 14px; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, transform .15s; } .story-type-card:hover { transform: translateY(-2px); } .story-type-card input { position: absolute; opacity: 0; pointer-events: none; } .story-type-card:has(input:checked) { border-color: var(--hp-primary); box-shadow: var(--hp-shadow); } .story-type-card:has(input:focus-visible) { outline: 3px solid var(--hp-heading); } .story-type-card strong { font-size: 16px; color: var(--hp-heading); } .story-type-card > span:last-child { font-size: 13px; color: var(--hp-muted); line-height: 1.4; } .story-themes-more summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--hp-primary); } .story-themes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; max-height: 360px; overflow: auto; padding: 12px; border: 1px solid var(--hp-border); border-radius: 10px; } .story-themes-grid strong { display: block; font-size: 13px; margin-bottom: 4px; } .story-themes-grid .hp-choice { font-size: 13px; } .hp-repeat { display: grid; gap: 8px; margin-bottom: 8px; } .hp-repeat-row, .hp-ind-row { display: flex; gap: 8px; align-items: center; } .hp-repeat-n { width: 24px; height: 24px; border-radius: 50%; background: var(--hp-bg-soft); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .hp-repeat-del { border: 0; background: var(--hp-bg-soft); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 18px; color: var(--hp-muted); flex-shrink: 0; } .hp-repeat-del:hover { color: var(--hp-primary); } .hp-indicators { display: grid; gap: 8px; margin-bottom: 8px; } .hp-ind-head { display: grid; grid-template-columns: 2fr 1fr 1fr 34px; gap: 8px; font-size: 12px; font-weight: 600; color: var(--hp-muted); } .hp-ind-row { display: grid; grid-template-columns: 2fr 1fr 1fr 34px; } .hp-ratings { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; } .hp-rating { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; padding: 6px 0; border-bottom: 1px dashed var(--hp-border); } .hp-rating-opts { display: flex; gap: 4px; } .hp-rating-opts label { cursor: pointer; } .hp-rating-opts input { position: absolute; opacity: 0; } .hp-rating-opts span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--hp-bg-soft); font-weight: 600; font-size: 13px; } .hp-rating-opts input:checked + span { background: var(--hp-primary); color: #fff; } .hp-rating-opts input:focus-visible + span { outline: 2px solid var(--hp-heading); } .story-photos { display: grid; gap: 10px; margin: 10px 0 20px; } .story-photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; } .story-file-note { color: var(--hp-primary); display: block; font-size: 13px; } .story-warn { background: #fff7e6; color: #7a4b00; padding: 10px 14px; border-radius: 10px; } .story-consent { display: grid; gap: 10px; background: var(--hp-bg-soft); border-radius: 12px; padding: 16px 18px !important; margin: 18px 0 !important; } .story-captcha { max-width: 320px; } .story-preview { display: none; } .story-preview.is-open { display: block; border: 1px solid var(--hp-border); border-radius: 12px; padding: 18px; margin-bottom: 18px; max-height: 520px; overflow: auto; } .story-preview-sec h3 { font-size: 16px; margin: 14px 0 6px; color: var(--hp-primary); } .story-preview dl { display: grid; grid-template-columns: 220px 1fr; gap: 4px 14px; margin: 0; font-size: 14px; } .story-preview dt { color: var(--hp-muted); } .story-preview dd { margin: 0; } .story-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hp-border); flex-wrap: wrap; } .story-nav-right { display: flex; gap: 10px; flex-wrap: wrap; } .story-form.is-sending [data-submit] { opacity: .6; pointer-events: none; } .story-done { text-align: center; background: #fff; border: 1px solid var(--hp-border); border-radius: 18px; padding: 44px 30px; box-shadow: var(--hp-shadow); } .story-done-icon { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #e5f5eb; color: #1f8a4c; margin-bottom: 14px; } .story-ref { font-size: 18px; } .story-ref strong { font-size: 22px; color: var(--hp-primary); letter-spacing: .5px; } .story-done p:last-child { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* My submissions */ .my-subs { display: grid; gap: 14px; } .my-sub { display: flex; justify-content: space-between; gap: 20px; border: 1px solid var(--hp-border); border-left: 4px solid var(--hp-muted); border-radius: 12px; padding: 18px 20px; background: #fff; } .my-sub h3 { font-size: 18px; margin: 4px 0; } .my-sub-type { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--hp-muted); font-weight: 600; } .my-sub-fb { background: #fff7e6; padding: 10px 12px; border-radius: 8px; font-size: 14px; margin: 8px 0 0; } .my-sub-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; } .stage-pill { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; background: var(--hp-bg-soft); } .my-sub.stage-published { border-left-color: #1f8a4c; } .my-sub.stage-revision { border-left-color: #c27a12; } .my-sub.stage-rejected { border-left-color: #888; } .my-sub.stage-draft { border-left-color: #2c6db5; } /* Single story */ .story-page-hero .story-badge { background: #fff; margin-bottom: 12px; } .story-tools { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; margin-bottom: 22px; } .story-tools a, .story-tools button { border: 1px solid var(--hp-border); background: #fff; color: var(--hp-heading); padding: 5px 12px; border-radius: 20px; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .story-tools a:hover, .story-tools button:hover { border-color: var(--hp-primary); color: var(--hp-primary); } .story-tools button.is-done { background: #e5f5eb; border-color: #1f8a4c; } .story-hero-img figcaption, .story-gallery figcaption { font-size: 13px; color: var(--hp-muted); padding: 8px 2px 0; } .story-summary { background: var(--hp-bg-soft); border-left: 4px solid var(--hp-primary); border-radius: 0 14px 14px 0; padding: 22px 26px; margin-bottom: 30px; } .story-summary h2 { font-size: 20px; } .story-summary p { margin: 0; font-size: 16.5px; } .story-lead { font-size: 18px; font-weight: 500; color: var(--hp-heading); } .why-matters { background: linear-gradient(135deg, #e5f5eb, #f4fbf6); border: 1px solid #bfe3cc; border-radius: 16px; padding: 24px 26px; margin-bottom: 34px; } .why-matters h2 { display: flex; gap: 10px; align-items: center; font-size: 22px; color: #17693a; } .why-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; } .why-pill { background: #fff; border: 1px solid #bfe3cc; border-radius: 20px; padding: 4px 12px; font-size: 13px; } .why-pill.is-no { border-color: #e7c0c0; } .why-ratings { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; } .why-rating { display: flex; justify-content: space-between; align-items: center; font-size: 14px; } .why-dots { display: inline-flex; gap: 4px; } .why-dots i { width: 12px; height: 12px; border-radius: 50%; background: #d5e9dc; } .why-dots i.on { background: #1f8a4c; } .why-ratings .hp-help { grid-column: 1 / -1; } .story-section { margin-bottom: 34px; } .story-section > h2 { font-size: 22px; padding-bottom: 10px; border-bottom: 2px solid var(--hp-border); } .story-q h3 { font-size: 16px; margin: 18px 0 6px; color: var(--hp-primary-dark); } .story-q p { margin: 0; } .story-lessons { counter-reset: l; list-style: none; padding: 0; } .story-lessons li { counter-increment: l; position: relative; padding: 10px 14px 10px 50px; background: var(--hp-bg-soft); border-radius: 10px; margin-bottom: 8px; } .story-lessons li::before { content: counter(l); position: absolute; left: 12px; top: 9px; width: 26px; height: 26px; border-radius: 50%; background: var(--hp-primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; } .table-wrap { overflow-x: auto; } .story-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .story-table th, .story-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hp-border); } .story-table th { background: var(--hp-bg-soft); font-size: 13px; } .story-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .story-gallery img { border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; width: 100%; } .story-gallery figure { margin: 0; } .story-downloads { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .story-downloads a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--hp-border); border-radius: 10px; color: var(--hp-heading); } .story-downloads a:hover { border-color: var(--hp-primary); } .dl-ext { background: var(--hp-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 5px; } .story-downloads small { color: var(--hp-muted); margin-left: auto; } .story-facts { list-style: none; margin: 0; padding: 0; } .story-facts li { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--hp-border); font-size: 14px; } .story-facts strong { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--hp-muted); } .facility-stories { margin-top: 40px; } /* Guidelines page */ .guide-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 18px; } .guide-type { border: 1px solid var(--hp-border); border-radius: 12px; padding: 14px; color: var(--hp-text); display: grid; gap: 4px; } .guide-type:hover { border-color: var(--hp-primary); color: var(--hp-text); } .guide-type strong { color: var(--hp-heading); } .guide-type span { font-size: 13px; color: var(--hp-muted); line-height: 1.45; } .guide-themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .guide-theme { background: var(--hp-bg-soft); border-radius: 12px; padding: 16px 18px; } .guide-theme h3 { font-size: 16px; margin: 0 0 6px !important; } .guide-theme ul { margin: 0; padding-left: 18px; font-size: 14px; } .guide-flow { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0 !important; counter-reset: f; } .guide-flow li { counter-increment: f; background: var(--hp-bg-soft); border-radius: 30px; padding: 6px 14px 6px 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; } .guide-flow li::before { content: counter(f); width: 22px; height: 22px; border-radius: 50%; background: var(--hp-primary); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; } .guide-cta { background: linear-gradient(135deg, var(--hp-navy), var(--hp-primary)) !important; color: #fff; } .guide-cta .widget-title, .guide-cta p { color: #fff; } .guide-cta .btn { background: #fff; color: var(--hp-primary); border-color: #fff; } .guide-cta .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); } @media (max-width: 1024px) { .story-stats { grid-template-columns: repeat(3, 1fr); } .story-filter-grid { grid-template-columns: repeat(2, 1fr); } .story-explore-grid, .home-stories-grid, .home-stories-grid.has-news, .story-form-wrap { grid-template-columns: 1fr; } .story-aside { grid-column: 1; grid-row: auto; position: static; } .province-count-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .story-stats { grid-template-columns: 1fr 1fr; margin-top: -20px; } .story-filter-grid, .story-filters .hp-geo, .story-grid, .story-form .hp-geo, .hp-ratings, .why-ratings, .story-photo-row { grid-template-columns: 1fr; } .story-types, .guide-types, .guide-themes, .story-themes-grid { grid-template-columns: 1fr; } .province-count-grid { grid-template-columns: 1fr 1fr; } .story-gallery { grid-template-columns: 1fr 1fr; } .story-form { padding: 18px; } .story-steps .t { display: none; } .story-steps li.is-active .t { display: inline; } .story-preview dl { grid-template-columns: 1fr; } .my-sub { flex-direction: column; } .my-sub-side { align-items: flex-start; flex-direction: row; } .story-nav, .story-nav-right { width: 100%; } .story-nav-right .btn { flex: 1; justify-content: center; } } /* Print-friendly story pages */ @media print { .topbar, .site-header, .site-footer, .story-tools, .story-side, .related-section, .back-to-top, .breadcrumbs, .lang-switch { display: none !important; } .page-hero { background: none !important; color: #000 !important; padding: 0 0 10px !important; } .page-hero h1, .page-hero p { color: #000 !important; } .layout-sidebar { display: block !important; } .content-area { padding: 0 !important; } .story-summary, .why-matters, .story-lessons li { break-inside: avoid; } a { color: #000 !important; text-decoration: none !important; } body { font-size: 12pt; } } /* Header: keep the site name on one or two lines with the longer main menu. */ .site-branding { flex-shrink: 0; } @media (min-width: 1241px) and (max-width: 1440px) { .main-navigation a { padding: 9px 9px; font-size: 14.5px; } .site-title { font-size: 18px; } .site-description { max-width: 210px; } } .story-form .hp-choice input, .story-form .story-type-card input, .story-form .hp-rating-opts input { width: auto !important; padding: 0 !important; flex-shrink: 0; border: 0; } .story-form .hp-choice { text-align: left; } /* ---------- Short submission form (Submit a Story or News) ---------- */ .story-simple-wrap { max-width: 860px; } .story-simple-wrap > .notice, .story-simple-wrap > .story-feedback { margin-bottom: 20px; } .story-simple .ss-q { border: 1px solid var(--hp-border, #e6e6e6); border-radius: 14px; padding: 22px 24px; margin: 0 0 18px; background: #fff; min-width: 0; } .story-simple .ss-q-title { display: flex; align-items: center; gap: 12px; float: left; width: 100%; font-size: 18px; font-weight: 700; color: var(--hp-heading); margin: 0 0 12px; padding: 0; } .story-simple .ss-q-title + * { clear: both; } .story-simple .ss-q-title .req { color: var(--hp-primary); margin-left: -6px; } .story-simple .ss-n { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--hp-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .story-simple .hp-help { margin: 0 0 10px; color: var(--hp-muted, #666); font-size: 14px; } .story-simple .hp-field { display: block; margin-bottom: 14px; } .story-simple .hp-field > span { display: block; font-weight: 600; margin-bottom: 6px; } .story-simple .hp-field small.hp-help { display: block; margin-top: 6px; } .story-simple .hp-geo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .story-simple .hp-geo .hp-geo-other { grid-column: 1 / -1; } .story-simple .ss-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; clear: both; } .story-simple .story-type-card:has(input:checked)::after { content: "✓"; position: absolute; top: 10px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--hp-primary); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; } .story-simple .hp-choice input, .story-simple input[type="checkbox"], .story-simple input[type="radio"] { width: auto !important; padding: 0 !important; } .story-simple .ss-declare { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; clear: both; } .story-simple .ss-declare input { margin-top: 4px; flex-shrink: 0; transform: scale(1.2); } .story-simple input[type="file"] { padding: 10px; border: 1px dashed var(--hp-border, #ccc); border-radius: 10px; background: #fafafa; } .story-simple .story-file-note { display: block; color: var(--hp-primary); margin-top: 6px; } .story-simple .ss-submit { text-align: center; padding: 10px 0 0; } .story-simple .ss-submit .btn { min-width: 240px; } .story-simple .ss-submit p { margin: 12px 0 0; color: var(--hp-muted, #666); } .story-simple .ss-submit .ss-thanks { color: var(--hp-primary); font-weight: 700; font-size: 17px; } @media (max-width: 720px) { .story-simple .ss-types, .story-simple .hp-geo { grid-template-columns: 1fr; } .story-simple .ss-q { padding: 18px 16px; } } .story-simple .ss-submit .btn { padding: 14px 32px; font-size: 17px; } /* ---------- Homepage: stories map ---------- */ .geo-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; } .geo-kpi { background: #fff; border: 1px solid var(--hp-border, #ececec); border-radius: 12px; padding: 16px 18px; } .geo-kpi strong { display: block; font-size: 28px; line-height: 1.1; color: var(--hp-heading); } .geo-kpi span { font-size: 13px; color: var(--hp-muted, #666); } .geo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: stretch; } .geo-map-wrap { position: relative; border: 1px solid var(--hp-border, #ececec); border-radius: 14px; overflow: hidden; background: #f6f7fa; min-height: 420px; } .geo-map { position: absolute; inset: 0; background: #f6f7fa; } .geo-map .leaflet-container, .geo-map.leaflet-container { background: #f6f7fa; font-family: inherit; } .geo-toggle { position: absolute; left: 12px; bottom: 12px; z-index: 500; background: #fff; border: 1px solid var(--hp-border, #ddd); border-radius: 6px; padding: 6px 10px; font-size: 14px; display: flex; gap: 6px; align-items: center; cursor: pointer; } .geo-toggle input { width: auto !important; margin: 0; } .geo-places { background: #fff; border: 1px solid var(--hp-border, #ececec); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; } .geo-places h3 { margin: 0 0 4px; font-size: 17px; } .geo-places .hp-help { font-size: 13px; margin: 0 0 12px; } .geo-places ul { list-style: none; margin: 0; padding: 0; flex: 1; } .geo-places li { display: grid; grid-template-columns: 110px 1fr 28px; gap: 10px; align-items: center; padding: 7px 4px; border-radius: 8px; font-size: 14px; } .geo-places li a { color: var(--hp-primary); text-decoration: underline; } .geo-places li strong { text-align: right; } .geo-places li.is-hover { background: #fdf0f0; } .geo-bar { height: 8px; border-radius: 6px; background: #f1f1f4; overflow: hidden; } .geo-bar i { display: block; height: 100%; min-width: 6px; border-radius: 6px; background: var(--hp-primary); } .geo-legend { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--hp-muted, #666); margin-top: 14px; } .geo-legend span:first-child { margin-right: 4px; } .geo-legend span:last-child { margin-left: 4px; } .geo-legend i { width: 18px; height: 10px; border-radius: 2px; } .geo-legend .s1 { background: #f9d4d4; } .geo-legend .s2 { background: #f1a3a3; } .geo-legend .s3 { background: #e46b6b; } .geo-legend .s4 { background: #c93535; } .geo-legend .s5 { background: #8f1414; } .geo-types { display: flex; gap: 8px; flex-wrap: wrap; } .geo-types a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hp-border, #e5e5e5); font-size: 14px; color: var(--hp-heading); } .geo-types a:hover { border-color: var(--hp-primary); color: var(--hp-primary); } .geo-tip { font-family: inherit; } .geo-tip strong { display: block; } @media (max-width: 1024px) { .geo-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .geo-grid { grid-template-columns: 1fr; } .geo-map-wrap { min-height: 340px; } } @media (max-width: 560px) { .geo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .geo-map-wrap { min-height: 260px; } } /* ========================================================================= * Blue accent: used alongside red & white in selected layouts * (top bar, footer, inner-page banners, call-to-action bands, * soft sections, section labels, map counters). * ========================================================================= */ :root { --hp-blue: #0b5cad; --hp-blue-dark: #084585; --hp-blue-deep: #0a2f5c; --hp-blue-soft: #eef5fc; --hp-blue-border: #d5e4f4; } .topbar { background: var(--hp-blue-deep); color: #d8e6f6; } .site-footer { background: var(--hp-blue-deep); color: #d8e6f6; } .site-footer a { color: #d8e6f6; } .site-footer a:hover { color: #fff; } .footer-bottom { border-top-color: rgba(255,255,255,.12); } .page-hero { background: linear-gradient(120deg, var(--hp-blue-deep), var(--hp-blue)); } .cta-band, .guide-cta { background: linear-gradient(120deg, var(--hp-blue), var(--hp-blue-deep)) !important; } .section-soft { background: var(--hp-blue-soft); } .section-head .eyebrow, .eyebrow { color: var(--hp-blue); } .link-light:hover { color: #cfe2f7; } /* Homepage stories map */ .geo-kpi { border-color: var(--hp-blue-border); border-top: 3px solid var(--hp-blue); } .geo-kpi strong { color: var(--hp-blue-deep); } .geo-map-wrap, .geo-places { border-color: var(--hp-blue-border); } .geo-map-wrap, .geo-map, .geo-map.leaflet-container { background: #f3f7fc; } .geo-places h3 { color: var(--hp-blue-deep); } .geo-places li a { color: var(--hp-blue); } .geo-places li.is-hover { background: var(--hp-blue-soft); } .geo-types a:hover { border-color: var(--hp-blue); color: var(--hp-blue); } .site-footer input::placeholder { color: #b9cde6; } .site-footer input { color: #fff; } .newsletter-form input::placeholder { color: #b9cde6; } /* Stories map in blue shades */ .geo-bar i { background: var(--hp-blue); } .geo-legend .s1 { background: #cfe1f5; } .geo-legend .s2 { background: #9cc3ea; } .geo-legend .s3 { background: #5d9bd8; } .geo-legend .s4 { background: #2a6fb8; } .geo-legend .s5 { background: #0a3f7d; } .geo-map .leaflet-control-zoom a { color: var(--hp-blue-deep); }