/* ================================================================= uniform-ui.css Shared UI upgrades — applies to index.html, about.html, awareness.html to match the Programs & Get-Involved look. INSTALLATION: Add ONE line to the of each of those pages, immediately after your existing style.css link: ================================================================= */ /* ----------------------------------------------------------------- PAGE HERO BANNER Replaces the old .page-intro section on about.html / awareness.html and the old .hero section on index.html. ----------------------------------------------------------------- */ .page-hero { background: #8b1c3a; color: #fff; padding: 70px 0 60px; text-align: center; position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.04) 0px, rgba(255, 255, 255, 0.04) 10px, transparent 10px, transparent 20px ); pointer-events: none; } .page-hero h2 { font-size: 2.6rem; margin-bottom: 14px; position: relative; } .page-hero p { font-size: 1.1rem; opacity: 0.88; max-width: 640px; margin: 0 auto; line-height: 1.7; position: relative; } /* ----------------------------------------------------------------- HERO ACTION BUTTONS (index.html only) ----------------------------------------------------------------- */ .page-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; margin-top: 28px; } .page-hero-actions .btn-white { background: #fff; color: #8b1c3a; font-weight: 700; padding: 14px 32px; border-radius: 8px; text-decoration: none; transition: background 0.25s, transform 0.25s; display: inline-block; } .page-hero-actions .btn-white:hover { background: #fce8ee; transform: translateY(-2px); } .page-hero-actions .btn-outline { background: transparent; border: 2px solid rgba(255, 255, 255, 0.7); color: #fff; font-weight: 700; padding: 14px 32px; border-radius: 8px; cursor: pointer; transition: background 0.25s, transform 0.25s; } .page-hero-actions .btn-outline:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } /* ----------------------------------------------------------------- HERO IMAGE SLIDER STRIP (index.html) ----------------------------------------------------------------- */ .hero-slider-strip { position: relative; height: 400px; overflow: hidden; background: #1a1a1a; display: block; } .hero-slider-strip .hero-slide { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out; pointer-events: none; z-index: 1; } .hero-slider-strip .hero-slide.active { opacity: 1; pointer-events: auto; z-index: 2; } .hero-slider-strip .slider-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; } .hero-slider-strip .slider-dots button { width: 11px; height: 11px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.45); cursor: pointer; padding: 0; transition: background 0.2s; } .hero-slider-strip .slider-dots button.active { background: #fff; } /* ----------------------------------------------------------------- SECTION BADGE PILL ----------------------------------------------------------------- */ .section-badge { display: inline-block; background: #fce8ee; color: #8b1c3a; font-size: 0.78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 16px; border-radius: 20px; margin-bottom: 14px; } /* ----------------------------------------------------------------- CENTRED SECTION HEADER (badge + heading + optional subtext) ----------------------------------------------------------------- */ .section-header { text-align: center; margin-bottom: 46px; } .section-header h2, .section-header h3 { font-size: 2rem; color: #1a1a1a; margin-bottom: 12px; } .section-header p { color: #666; max-width: 620px; margin: 0 auto; line-height: 1.7; font-size: 0.97rem; } /* ----------------------------------------------------------------- HIDE OLD FLAT ELEMENTS REPLACED BY NEW ONES ----------------------------------------------------------------- */ /* old pink page-intro banner (about + awareness) */ .page-intro { display: none; } /* old flat crimson CTA section (index + awareness) */ .cta { display: none; } /* ----------------------------------------------------------------- ABOUT-SECTION — more breathing room ----------------------------------------------------------------- */ .about-section { padding: 70px 0; } .about-section.light-bg { background: #f8f0f3; } /* ----------------------------------------------------------------- IMPACT CARDS (index.html — "Our Impact" row) ----------------------------------------------------------------- */ .impact { padding: 80px 0; background: #fff; } .impact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .impact-card { background: #fff; border-radius: 14px; padding: 30px 26px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); border-top: 4px solid #8b1c3a; transition: transform 0.3s ease, box-shadow 0.3s ease; } .impact-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(139, 28, 58, 0.12); } .impact-card h4 { color: #1a1a1a; margin-bottom: 10px; } /* ----------------------------------------------------------------- VIDEO SECTION (index.html) ----------------------------------------------------------------- */ .video-section { padding: 80px 0; background: #f8f8f8; } .video-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .video-wrapper iframe { width: 100%; height: 300px; border-radius: 12px; border: none; } /* ----------------------------------------------------------------- CORE VALUES CARDS (about.html) ----------------------------------------------------------------- */ .value-icon { font-size: 1.8rem; display: block; margin-bottom: 10px; } /* ----------------------------------------------------------------- FOUNDER SECTION (about.html) ----------------------------------------------------------------- */ .founder-message { background: #fff; border-radius: 14px; padding: 36px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border-left: 5px solid #8b1c3a; } .founder-image img { border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15); } /* ----------------------------------------------------------------- TEAM CARDS (about.html) ----------------------------------------------------------------- */ .team-card { border-radius: 14px; overflow: hidden; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); transition: transform 0.3s, box-shadow 0.3s; background: #fff; } .team-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(139, 28, 58, 0.12); } /* ----------------------------------------------------------------- CANCER TYPE CARDS (awareness.html) ----------------------------------------------------------------- */ .cancer-types-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .cancer-type-card { background: #fff; border-radius: 14px; padding: 26px 22px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07); border-left: 4px solid #8b1c3a; transition: transform 0.3s, box-shadow 0.3s; } .cancer-type-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(139, 28, 58, 0.11); } .cancer-icon { font-size: 2rem; margin-bottom: 12px; } .cancer-type-card h4 { color: #1a1a1a; margin-bottom: 10px; font-size: 1rem; } /* ----------------------------------------------------------------- PREVENTION CARDS (awareness.html) ----------------------------------------------------------------- */ .prevention-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .prevention-card { background: #fff; border-radius: 14px; padding: 26px 20px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07); text-align: center; border-top: 4px solid #8b1c3a; transition: transform 0.3s, box-shadow 0.3s; } .prevention-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(139, 28, 58, 0.11); } .prevention-icon { font-size: 2rem; display: block; margin-bottom: 10px; } .prevention-card h4 { color: #1a1a1a; margin-bottom: 8px; } /* ----------------------------------------------------------------- EARLY DETECTION BOXES (awareness.html) ----------------------------------------------------------------- */ .detection-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 30px; } .detection-stat { background: #fff; border-radius: 14px; padding: 28px 24px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07); border-top: 4px solid #8b1c3a; } .detection-stat h4 { color: #1a1a1a; margin-bottom: 10px; } /* ----------------------------------------------------------------- WARNING SIGNS BOX (awareness.html) ----------------------------------------------------------------- */ .warning-signs-box { background: #fce8ee; border-radius: 14px; padding: 30px; border-left: 5px solid #8b1c3a; } .warning-signs-box h4 { color: #8b1c3a; margin-bottom: 16px; } /* ----------------------------------------------------------------- RESOURCE LINKS (awareness.html) ----------------------------------------------------------------- */ .resource-link { display: inline-block; margin-top: 12px; color: #8b1c3a; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: color 0.2s; } .resource-link:hover { color: #74162f; text-decoration: underline; } /* ----------------------------------------------------------------- CLOSING CTA BANNER (all three pages, replaces old .cta) ----------------------------------------------------------------- */ .page-closing-cta { background: linear-gradient(135deg, #8b1c3a 0%, #5c1027 100%); color: #fff; padding: 70px 0; text-align: center; position: relative; overflow: hidden; } .page-closing-cta::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.04) 0px, rgba(255, 255, 255, 0.04) 10px, transparent 10px, transparent 20px ); pointer-events: none; } .page-closing-cta > .container { position: relative; } .page-closing-cta h2 { font-size: 2rem; margin-bottom: 14px; } .page-closing-cta p { opacity: 0.85; margin-bottom: 30px; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.7; } .cta-btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .cta-btn-row a, .cta-btn-row button { padding: 14px 32px; border-radius: 8px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background 0.25s, transform 0.25s; text-decoration: none; display: inline-block; } .btn-cta-white { background: #fff; color: #8b1c3a; border: none; } .btn-cta-white:hover { background: #fce8ee; transform: translateY(-2px); } .btn-cta-outline { background: transparent; border: 2px solid rgba(255, 255, 255, 0.65); color: #fff; } .btn-cta-outline:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } /* ----------------------------------------------------------------- RESPONSIVE BREAKPOINTS ----------------------------------------------------------------- */ @media (max-width: 1100px) { .prevention-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .impact-cards { grid-template-columns: 1fr 1fr; } .cancer-types-grid { grid-template-columns: 1fr 1fr; } .detection-info { grid-template-columns: 1fr; } .video-wrapper { grid-template-columns: 1fr; } } @media (max-width: 600px) { .page-hero h2 { font-size: 1.9rem; } .hero-slider-strip { height: 260px; } .impact-cards { grid-template-columns: 1fr; } .cancer-types-grid { grid-template-columns: 1fr; } .prevention-grid { grid-template-columns: 1fr 1fr; } } /* ================================================================= ADDITIONS — appended for fixes ================================================================= */ /* ── Hero slider prev/next arrow buttons ── */ .hero-slider-prev, .hero-slider-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; background: rgba(0, 0, 0, 0.45); color: #fff; border: none; width: 48px; height: 48px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; line-height: 1; } .hero-slider-prev { left: 16px; } .hero-slider-next { right: 16px; } .hero-slider-prev:hover, .hero-slider-next:hover { background: rgba(139, 28, 58, 0.85); transform: translateY(-50%) scale(1.08); } /* ── Team slider carousel nav buttons ── */ .team-slider { position: relative; overflow: hidden; } .team-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; background: #8b1c3a; color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .team-prev { left: -20px; } .team-next { right: -20px; } .team-nav:hover { background: #5c1027; transform: translateY(-50%) scale(1.1); } .team-nav:disabled { background: #ccc; cursor: default; transform: translateY(-50%); } /* ── Inline form validation errors ── */ .input-error { border: 2px solid #c0392b !important; background: #fff6f5 !important; } .field-error-msg { color: #c0392b; font-size: 0.82rem; margin-top: 4px; margin-bottom: 0; font-weight: 600; } /* ================================================================= AWARENESS PAGE INFOGRAPHICS ================================================================= */ /* ── Risk Factors two-panel grid ── */ .infographic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 10px; } .infographic-panel { border-radius: 16px; padding: 30px 28px; box-shadow: 0 4px 20px rgba(0,0,0,.07); } .infographic-controllable { background: linear-gradient(145deg, #fff8f0 0%, #fff 100%); border-top: 4px solid #e67e22; } .infographic-fixed { background: linear-gradient(145deg, #f0f4ff 0%, #fff 100%); border-top: 4px solid #2c3e7a; } .infographic-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,.08); } .infographic-panel-head h4 { margin: 0; font-size: 1.05rem; color: #1a1a1a; } .infographic-icon { font-size: 1.8rem; } .infographic-items { display: flex; flex-direction: column; gap: 14px; } .infographic-item { display: flex; align-items: flex-start; gap: 12px; background: rgba(255,255,255,.7); border-radius: 10px; padding: 10px 14px; } .item-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; } .infographic-item div strong { display: block; font-size: .92rem; color: #1a1a1a; margin-bottom: 2px; } .infographic-item div p { margin: 0; font-size: .84rem; color: #555; line-height: 1.4; } .infographic-note { margin-top: 18px; background: #e8eeff; border-left: 4px solid #2c3e7a; border-radius: 8px; padding: 12px 16px; font-size: .88rem; color: #333; line-height: 1.5; } /* ── Early Detection 3-step path ── */ .detection-path { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; flex-wrap: wrap; } .detection-step { flex: 1; min-width: 180px; background: #fff; border-radius: 14px; padding: 26px 22px; text-align: center; box-shadow: 0 4px 18px rgba(0,0,0,.07); border-top: 4px solid #8b1c3a; } .detection-step-icon { font-size: 2rem; margin-bottom: 8px; } .detection-step-num { display: inline-block; background: #fce8ee; color: #8b1c3a; font-size: .75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 12px; border-radius: 20px; margin-bottom: 10px; } .detection-step h4 { color: #1a1a1a; margin-bottom: 8px; font-size: .97rem; } .detection-step p { font-size: .87rem; color: #555; line-height: 1.55; margin: 0; } .detection-arrow { font-size: 1.8rem; color: #8b1c3a; font-weight: 700; flex-shrink: 0; } /* ── Warning Signs visual badge grid ── */ .warning-signs-infographic { background: #fce8ee; border-radius: 16px; padding: 28px 30px; border-left: 5px solid #8b1c3a; } .warning-signs-infographic h4 { color: #8b1c3a; margin-bottom: 18px; font-size: 1rem; } .warning-signs-visual { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; } .warning-badge { background: #fff; border-radius: 10px; padding: 12px 14px; font-size: .88rem; color: #333; font-weight: 600; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.06); line-height: 1.3; } .warning-badge span { font-size: 1.2rem; flex-shrink: 0; } .warning-note { font-size: .86rem; color: #555; line-height: 1.55; margin: 0; border-top: 1px solid rgba(139,28,58,.15); padding-top: 14px; } /* ── Responsive ── */ @media (max-width: 900px) { .infographic-grid { grid-template-columns: 1fr; } .warning-signs-visual { grid-template-columns: repeat(2, 1fr); } .detection-arrow { transform: rotate(90deg); flex-basis: 100%; text-align: center; } .detection-path { flex-direction: column; } .detection-step { width: 100%; } } @media (max-width: 500px) { .warning-signs-visual { grid-template-columns: 1fr 1fr; } }