/* Everything in here ONLY affects pages with */ /* ========================================================= PAGE LAYOUT ========================================================= */ .page-il10 .il10-content { padding-left: 1.5rem; padding-right: 1.5rem; } /* ========================================================= HERO / HEADER ========================================================= */ .page-il10 .il10-hero { text-align: center; margin-bottom: 2rem; padding-top: 0; } /* Full-bleed hero image */ .page-il10 .hero-image-wrapper { position: relative; width: 100vw; max-width: 100vw; height: 360px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; } .page-il10 .hero-image-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; filter: grayscale(100%); } .page-il10 .hero-image-wrapper::after { content: ""; position: absolute; inset: 0; background: rgba(0, 102, 51, 0.55); pointer-events: none; z-index: 1; } .page-il10 .hero-text { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; } .page-il10 .hero-text h1 { margin: 0; color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; line-height: 1.15; text-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); } /* =========================== INFOGRAPHIC SECTION =========================== */ .page-il10 .il10-infographics { margin: 0 auto; padding: 1.5rem; } .page-il10 .infographic-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; } .page-il10 .infographic-card { position: relative; padding: 0 1.2rem; text-align: center; } .page-il10 .infographic-card:not(:last-child)::after { content: ""; position: absolute; right: -0.75rem; top: 15%; height: 80%; width: 2px; background: linear-gradient( to bottom, transparent, rgba(0,128,55,0.35), transparent ); } .page-il10 .infographic-card h3 { font-size: 1.5rem; font-weight: 800; color: var(--primary); margin: 0 0 0.5rem; } .page-il10 .infographic-card p { font-size: 1rem; color: var(--muted); margin: 0; } /* =========================== IL-10 DISTRICT MAP SECTION =========================== */ .page-il10 .leaflet-map { width: min(820px, 100%); height: 360px; margin: 1rem auto 0.5rem; border-radius: 16px; overflow: hidden; border: 1px solid #d6e7d6; box-shadow: var(--shadow); } .page-il10 .district-label { font-family: Lexend, system-ui, sans-serif; font-weight: 800; font-size: 0.82rem; line-height: 1; letter-spacing: 0.02rem; color: #111; background: rgba(255,255,255, 0.88); border: 1px solid #d6e7d6; border-radius: 10px; padding: 0.25rem 0.5rem; box-shadow: 0 6px 16px rgba(0,0,0,0.12); white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; } /* Selected district label */ .page-il10 .district-label.is-selected { background: rgba(0, 128, 55, 0.92); color: #fff; border-color: rgba(0, 90, 35, 1); } @media (max-width: 520px) { .page-il10 .district-label { font-size: 0.75rem; padding: 0.24rem 0.45rem; } } /* Highlight label for IL-10 */ .page-il10 .district-label.is-target { background: rgba(0, 128, 55, 0.92); color: #fff; border-color: rgba(0, 90, 35, 1); } /* =========================== IL-10 BODY + TYPOGRAPHY =========================== */ /* Background block for prose */ /* body.page-il10 .il10-prose{ background: #f7fbf7; border-radius: 14px; border: 1px solid #d6ead6; padding: 1rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; gap: 0.4rem; } */ .page-il10 .il10-body { margin: 0 auto; max-width: 1100px; padding: 1.5rem; } .page-il10 .il10-body-header { margin-bottom: 1rem; } .page-il10 .il10-body-header h2{ color: var(--primary); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; line-height: 1.15; margin: 0; text-align: center; } .page-il10 .il10-prose{ color: var(--text); margin-top: 1.25rem; } .page-il10 .il10-prose h2, .page-il10 .il10-prose h3, .page-il10 .il10-block > h3{ color: var(--primary); } .page-il10 .il10-block > h3{ font-size: 1.22rem; font-weight: 800; margin: 1.25rem 0 0.55rem; } .page-il10 .il10-prose p, .page-il10 .il10-prose li{ color: var(--muted); line-height: 1.75; font-size: 1rem; } .page-il10 .il10-prose p{ margin: 0 0 0.9rem; } .page-il10 .il10-prose ul{ margin: 0.25rem 0 1rem 1.25rem; } .page-il10 .il10-prose li{ margin: 0.3rem 0; } /* Last-resort lock if something else overrides h3 */ .page-il10 main.il10-content .il10-prose h3{ color: var(--primary) !important; } /* =========================== IL-10 FULL-BLEED CTA HERO =========================== */ .page-il10 .il10-cta{ position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: 240px; display: flex; align-items: center; justify-content: center; overflow: hidden; /* Background controls */ background-image: url("../assets/images/il10-community.jpeg"); background-repeat: no-repeat; /* “Zoom out / in”: lower % shows more of the image, higher % zooms in */ background-size: 100%; /* Slide visible area: X% Y% (Y controls up/down) */ background-position: 50% 20%; } /* Green overlay */ .page-il10 .il10-cta::after{ content:""; position:absolute; inset:0; background: rgba(0, 128, 55, 0.68); pointer-events:none; } /* Inner content (no card) */ .page-il10 .il10-cta-inner{ position: relative; z-index: 1; width: min(1100px, 100%); padding: 1.5rem; text-align: center; } /* Headline (no border/card) */ .page-il10 .il10-cta-inner h2{ margin: 0 0 0.9rem; color: #fff; font-weight: 800; font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.2; text-shadow: 0 10px 22px rgba(0,0,0,0.35); } /* Glass-like button only */ .page-il10 .il10-cta-btn{ display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.15rem; border-radius: 999px; color: #fff; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 24px rgba(0,0,0,0.22); transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .page-il10 .il10-cta-btn:hover{ transform: translateY(-2px); background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.55); } /* Mobile tweak */ @media (max-width: 600px){ .page-il10 .il10-cta{ min-height: 210px; background-size: 140%; background-position: 50% 40%; } } /* =========================== IL-10: MOBILE OVERRIDES =========================== */ @media (max-width: 600px) { /* Reduce hero image height */ .page-il10 .hero-image-wrapper { height: 220px; } /* Reduce map height */ .page-il10 .leaflet-map { height: 260px; } /* Hides the vertical divider lines between infographic cards — they don't make sense when cards stack vertically */ .page-il10 .infographic-card:not(:last-child)::after { display: none; } /* Tighten content padding */ .page-il10 .il10-content { padding-left: 1rem; padding-right: 1rem; } .page-il10 .il10-infographics { padding: 1rem; } body.page-il10 .il10-body { padding: 1rem; } }