/*==================================================================== Custom CSS File for most of Desktop and Mobile look for Kipya Template Developed by Amazing LWEGATECH LTD team. ===================================================================**/ :root { --kpy-font: "Barlow", Verdana, Arial, Helvetica, sans-serif; --kpy-font-2: Barlow, Arial, Helvetica, sans-serif; --kpy-font-3: Barlow, serif; --kpy-primary: #35398e; --kpy-primary-rgb: 53, 57, 142; --kpy-secondary: #00aeef; --kpy-secondary-rgb: 0, 174, 239; --kpy-light: #f0f4fa; --kpy-gold: #00aeef; --kpy-grey: #5c6070; --kpy-base: #1a1d4e; --kpy-base-rgb: 26, 29, 78; --kpy-white: #ffffff; --kpy-white-rgb: 255, 255, 255; --kpy-black: #0d0f2b; --kpy-font-size: 16px; --kpy-orange: #e05a2b; --kpy-orange-rgb: 224, 90, 43; }
html, body { font-family: var(--kpy-font-2) !important; color: var(--kpy-base); font-size: var(--kpy-font-size); line-height: 1.8; margin: 0; padding: 0; background-color: var(--kpy-white); -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; }
h1, h2, h3, h4, h5, h6 { font-family: var(--kpy-font) !important; font-weight: 700; /* text-transform: uppercase; — removed: overridden by GLOBAL TYPOGRAPHY section */ /* letter-spacing: 2px; — removed: overridden by GLOBAL TYPOGRAPHY section */ margin-top: 0; }
p { font-family: var(--kpy-font-2); color: var(--kpy-grey); line-height: 1.7; }
.site-content, .entry-content, .wp-block-group, .wp-block-columns { max-width: 100% !important; width: 100% !important; }
.container, .fc-inner-main>.container, .fc-page-article .container, .entry-content .container { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
.hv-ministry-card { position: relative; border-radius: 0 0 20px 0; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; height: 380px; background: var(--kpy-base, #1f2a33); }
.hv-ministry-thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; border-radius: 0 0 20px 0; overflow: hidden; }
/* Gutenberg Block Custom Classes */ .hv-hero-section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--kpy-primary); color: var(--kpy-white); text-align: center; overflow: hidden; }
.hv-heading-main { font-size: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: 1rem; color: var(--kpy-secondary); }
.hv-sub-text { font-family: var(--kpy-font-2); font-size: 1.1rem; max-width: 700px; margin: 0 auto 2rem; opacity: 0.9; letter-spacing: 3px; text-transform: uppercase; }
.hv-btn-gold { background: var(--kpy-secondary); color: var(--kpy-primary); padding: 15px 35px; text-decoration: none; font-weight: bold; border-radius: 0; transition: 0.3s; display: inline-block; }
.hv-btn-gold:hover { background: var(--kpy-gold); color: var(--kpy-white); }
/*.hv-section-padding {padding: 80px 0; }
*/ .hv-about-image { border: 10px solid var(--kpy-light); box-shadow: 20px 20px 0px var(--kpy-secondary); }
/*========================================================== HOMEPAGE BLOCKS ==========================================================*/ .kpy-eyebrow { display: flex; align-items: center; gap: .45rem; font-family: var(--kpy-font-2); font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--kpy-orange, #c86f4a); margin-bottom: .6rem !important }
.kpy-eyebrow--light { color: var(--kpy-orange, #c86f4a) }
.kpy-about-title em, .kpy-mission-title em, .kpy-verse-title em, .kpy-newsletter-title em { font-style: normal; color: var(--kpy-orange, #c86f4a); display: block }
.kpy-btn-primary .wp-block-button__link { background: var(--kpy-orange, #c86f4a); color: #fff; border-radius: 50px; padding: .72rem 1.6rem .72rem 1.8rem; font-family: var(--kpy-font-2); font-weight: 700; font-size: .95rem; letter-spacing: .03em; border: none; display: inline-flex; align-items: center; gap: .9rem; transition: background .2s }
.kpy-btn-primary .wp-block-button__link::after { content: "?"; background: #fff; color: var(--kpy-orange, #c86f4a); border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0 }
.kpy-btn-primary .wp-block-button__link:hover { background: #b85a38 }
.kpy-btn-white .wp-block-button__link { background: #fff; color: var(--kpy-orange, #c86f4a); border-radius: 50px; padding: .72rem 1.6rem .72rem 1.8rem; font-family: var(--kpy-font-2); font-weight: 700; font-size: .95rem; border: none; display: inline-flex; align-items: center; gap: .9rem; transition: opacity .2s }
.kpy-btn-white .wp-block-button__link::after { content: "?"; background: var(--kpy-orange, #c86f4a); color: #fff; border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0 }
.kpy-about-section { padding: 80px 60px; background: var(--kpy-white); width: 100%; }
.kpy-about-cols { align-items: center !important; gap: 60px !important }
.kpy-about-images { position: relative; min-height: 560px }
.kpy-about-images .kpy-img-back img { width: 62%; border-radius: 0 0 120px 0; position: absolute; left: 0; top: 40px; z-index: 1; object-fit: cover; height: 500px; box-shadow: 0 8px 32px rgba(0, 0, 0, .12) }
.kpy-about-images .kpy-img-front img { width: 62%; border-radius: 0 0 100px 0; position: absolute; right: 0; top: 0; z-index: 2; object-fit: cover; height: 460px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18) }
.kpy-about-title { font-family: var(--kpy-font); font-size: clamp(2rem, 3.5vw, 2.8rem) !important; font-weight: 900 !important; line-height: 1.15 !important; color: var(--kpy-black) !important; text-transform: uppercase; margin-bottom: 1rem !important }
.kpy-features-grid { margin: 1.8rem 0 !important; gap: 1rem !important }
.kpy-feature-item { display: flex !important; align-items: center; gap: .9rem; padding: .5rem 0 }
.kpy-feature-item img { width: 44px !important; height: 44px !important; object-fit: contain }
.kpy-feature-item p { font-family: var(--kpy-font-2); font-weight: 700; font-size: .95rem; color: var(--kpy-base); margin: 0 !important }
.kpy-mission-section { padding: 80px 60px; background: var(--kpy-white); width: 100%; }
.kpy-mission-cols { align-items: center !important; gap: 60px !important }
.kpy-mission-title { font-family: var(--kpy-font); font-size: clamp(2rem, 3.5vw, 2.8rem) !important; font-weight: 900 !important; line-height: 1.15 !important; text-transform: uppercase; color: var(--kpy-black) !important; margin-bottom: 1.2rem !important }
.kpy-mission-lead { font-weight: 700 !important; font-size: 1.05rem !important; line-height: 1.65 !important; color: var(--kpy-base) !important; margin-bottom: 1rem !important }
.kpy-mission-quote { border-left: 4px solid var(--kpy-orange, #c86f4a) !important; padding-left: 1.2rem !important; color: var(--kpy-grey) !important; font-size: .97rem !important; line-height: 1.75 !important }
.kpy-mission-image-wrap { position: relative }
.kpy-mission-img img { border-radius: 0 0 120px 0; width: 100%; object-fit: contain; max-height: 700px; height: 700px; }
.kpy-rotating-badge { position: absolute; bottom: -30px; left: -30px; width: 140px; height: 140px; background: var(--kpy-orange, #c86f4a); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: kpy-spin 12s linear infinite; z-index: 3 }
.kpy-rotating-badge svg { position: absolute; width: 100%; height: 100% }
.kpy-badge-icon { font-size: 1.8rem; color: #fff; z-index: 1 }
@keyframes kpy-spin { to { transform: rotate(360deg) }
}
.kpy-verse-section { padding: 80px 60px; background: #fdf7f2; width: 100%; }
.kpy-verse-cols { align-items: center !important; gap: 0 !important }
.kpy-verse-content { padding-right: 3rem }
.kpy-verse-title { font-family: var(--kpy-font); font-size: clamp(1.9rem, 3.2vw, 2.7rem) !important; font-weight: 900 !important; text-transform: uppercase; line-height: 1.15 !important; color: var(--kpy-black) !important; margin-bottom: 1.2rem !important }
.kpy-verse-image img { border-radius: 0; width: 100%; height: 100%; object-fit: cover; max-height: 480px }
.kpy-cta-banner { background: var(--kpy-orange, #c86f4a) !important; padding: 44px 60px !important; width: 100%; }
.kpy-cta-banner-inner { align-items: center !important; gap: 2rem !important }
.kpy-cta-banner-title { font-family: var(--kpy-font); font-size: clamp(1.3rem, 2.4vw, 1.9rem) !important; font-weight: 900 !important; color: #fff !important; text-transform: uppercase; line-height: 1.25 !important; margin: 0 !important }
.kpy-newsletter-section { min-height: 480px !important; padding: 80px 40px !important; width: 100%; position: relative; background-size: cover; background-position: center; }
.kpy-newsletter-section::after { content: ''; position: absolute; inset: 0; background: rgba(10, 6, 2, .62); z-index: 0 }
.kpy-newsletter-inner { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto }
.kpy-newsletter-title { font-family: var(--kpy-font); font-size: clamp(2rem, 4vw, 3rem) !important; font-weight: 900 !important; text-transform: uppercase; color: #fff !important; line-height: 1.15 !important; margin-bottom: .8rem !important }
.kpy-newsletter-sub { color: rgba(255, 255, 255, .85) !important; font-size: 1rem !important; max-width: 600px; margin: 0 auto 2rem !important }
.kpy-donate-form-row { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); border-radius: 20px; padding: 2rem 2.4rem; backdrop-filter: blur(8px); max-width: 680px; margin: 0 auto }
.kpy-donate-amounts { display: flex; gap: .8rem; justify-content: center; margin-bottom: 1.2rem; flex-wrap: wrap }
.kpy-donate-amt { background: transparent; border: 2px solid rgba(255, 255, 255, .4); color: #fff; border-radius: 50px; padding: .5rem 1.4rem; font-family: var(--kpy-font-2); font-weight: 700; font-size: 1rem; cursor: pointer; transition: all .2s }
.kpy-donate-amt.active, .kpy-donate-amt:hover { background: var(--kpy-orange, #c86f4a); border-color: var(--kpy-orange, #c86f4a) }
.kpy-donate-input-row { display: flex; background: #fff; border-radius: 50px; overflow: hidden; padding: .3rem .3rem .3rem 1.4rem; gap: .4rem }
.kpy-donate-input { flex: 1; border: none; outline: none; font-family: var(--kpy-font-2); font-size: 1rem; color: var(--kpy-base); background: transparent }
.kpy-donate-input::placeholder { color: #aaa }
.kpy-donate-submit { background: var(--kpy-orange, #c86f4a); color: #fff; border: none; border-radius: 50px; padding: .65rem 1.8rem; font-family: var(--kpy-font-2); font-weight: 700; font-size: .95rem; cursor: pointer; white-space: nowrap; transition: background .2s }
.kpy-donate-submit:hover { background: #b85a38 }
.kpy-donate-note { color: rgba(255, 255, 255, .65); font-size: .82rem; margin-top: 1rem !important; text-align: center }
/*========================================================== WHO WE ARE + APOSTLE BIOGRAPHY ==========================================================*/ .kpy-tabs-section, .kpy-services-section, .kpy-faq-section, .kpy-pastor-section, .kpy-bio-section, .kpy-calling-banner-wrap { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 60px !important; padding-right: 60px !important; box-sizing: border-box; }
.kpy-tabs-section .wp-block-columns, .kpy-services-section .wp-block-columns, .kpy-faq-section .wp-block-columns, .kpy-pastor-section .wp-block-columns, .kpy-bio-section .wp-block-columns { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important }
.kpy-tabs-section { padding: 80px 60px; background: #fdf7f2; width: 100%; }
.kpy-services-section { padding: 80px 60px; background: #fff; width: 100%; }
.kpy-faq-section { padding: 80px 60px; background: #fdf7f2; width: 100%; }
.kpy-pastor-section { padding: 80px 60px; background: #fff; width: 100%; }
.kpy-bio-section { padding: 80px 60px; background: #fff; width: 100%; }
.kpy-tabs-cols, .kpy-faq-cols, .kpy-pastor-cols, .kpy-bio-cols { align-items: center !important; gap: 60px !important }
.kpy-faq-cols { align-items: start !important }
.kpy-tabs-img-side img, .kpy-tabs-img, .kpy-faq-img img, .kpy-pastor-img img, .kpy-bio-portrait img, .kpy-mission-img img { border-radius: 0 0 120px 0; width: 100%; object-fit: contain; max-height: 700px; height: 700px; }
.kpy-tabs-title { font-family: var(--kpy-font); font-size: clamp(1.8rem, 3vw, 2.6rem) !important; font-weight: 900 !important; text-transform: uppercase; color: var(--kpy-black) !important; max-width: 820px; margin: 0 auto 2rem !important; line-height: 1.2 !important; text-align: center }
.kpy-tabs-title em { font-style: normal; color: var(--kpy-orange, #c86f4a) }
.kpy-tab-bar { display: flex; justify-content: center; gap: .4rem; background: #fff; border: 1px solid #eee; border-radius: 50px; padding: .35rem; max-width: 460px; margin: 0 auto 2.5rem; box-shadow: 0 2px 12px rgba(0, 0, 0, .07) }
.kpy-tab-btn { background: transparent; border: none; border-radius: 50px; padding: .55rem 1.4rem; font-family: var(--kpy-font-2); font-weight: 600; font-size: .9rem; color: var(--kpy-grey); cursor: pointer; transition: all .2s; white-space: nowrap }
.kpy-tab-btn.kpy-tab-active { background: var(--kpy-orange, #c86f4a); color: #fff }
.kpy-tab-panel { text-align: left; width: 100% }
.kpy-tabs-cols-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-top: 1.5rem; width: 100% }
.kpy-tabs-text-side { padding-right: 1rem }
.kpy-tabs-sub-title { font-family: var(--kpy-font); font-size: clamp(1.7rem, 2.8vw, 2.4rem) !important; font-weight: 900 !important; text-transform: uppercase; color: var(--kpy-black) !important; line-height: 1.15 !important; margin-bottom: 1rem !important }
.kpy-tabs-sub-title em { font-style: normal; color: var(--kpy-orange, #c86f4a); display: block }
.kpy-stats-block { background: var(--kpy-orange, #c86f4a); border-radius: 0 80px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 2.4rem 1rem; width: calc(100% + 120px); margin-left: -60px; margin-right: -60px; }
.kpy-stat-item { text-align: center; padding: 1.2rem 1rem; border-right: 1px solid rgba(255, 255, 255, .2) }
.kpy-stat-item:last-child { border-right: none }
.kpy-stat-num { display: block; font-family: var(--kpy-font); font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 900; color: #fff; margin-bottom: .3rem }
.kpy-stat-label { display: block; font-family: var(--kpy-font-2); font-weight: 700; font-size: .9rem; color: #fff; margin-bottom: .5rem }
.kpy-stat-desc { font-family: var(--kpy-font-2); font-size: .8rem; color: rgba(255, 255, 255, .8); line-height: 1.5; margin: 0 !important; text-align: center }
.kpy-services-section { text-align: center }
.kpy-services-title { font-family: var(--kpy-font); font-size: clamp(1.8rem, 3vw, 2.4rem) !important; font-weight: 900 !important; text-transform: uppercase; color: var(--kpy-black) !important; margin-bottom: 3rem !important; text-align: center }
.kpy-services-title em { font-style: normal; color: var(--kpy-orange, #c86f4a) }
.kpy-services-grid { gap: 0 !important }
.kpy-service-card { padding: 2.5rem 2rem !important; text-align: center }
.kpy-service-card--mid { border-left: 1px solid #eee; border-right: 1px solid #eee }
.kpy-service-card img { width: 64px !important; height: 64px !important; object-fit: contain; margin: 0 auto 1.4rem; border-radius: 0 !important }
.kpy-service-card h4 { font-family: var(--kpy-font-2); font-weight: 700; font-size: 1.05rem; color: var(--kpy-base); margin-bottom: .7rem !important }
.kpy-service-card p { font-size: .93rem; color: var(--kpy-grey); line-height: 1.7; margin: 0 !important }
.kpy-faq-title { font-family: var(--kpy-font); font-size: clamp(1.8rem, 3vw, 2.4rem) !important; font-weight: 900 !important; text-transform: uppercase; text-align: center; color: var(--kpy-black) !important; margin-bottom: 3rem !important; line-height: 1.2 !important }
.kpy-faq-title em { font-style: normal; color: var(--kpy-orange, #c86f4a); display: block }
.kpy-accordion { width: 100% }
.kpy-acc-item { border-bottom: 1px solid #e8e0d8 }
.kpy-acc-trigger { width: 100%; background: transparent; border: none; display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 0; font-family: var(--kpy-font-2); font-weight: 600; font-size: 1rem; color: var(--kpy-base); cursor: pointer; text-align: left; gap: 1rem; transition: color .2s }
.kpy-acc-open .kpy-acc-trigger { color: var(--kpy-orange, #c86f4a) }
.kpy-acc-icon { font-size: 1.1rem; color: var(--kpy-orange, #c86f4a); flex-shrink: 0; width: 26px; height: 26px; background: #fff; border: 1.5px solid currentColor; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 400; line-height: 1 }
.kpy-acc-body { padding: 0 0 1.2rem }
.kpy-acc-body p { font-size: .95rem; color: var(--kpy-grey); line-height: 1.7; margin: 0 !important }
.kpy-pastor-title { font-family: var(--kpy-font); font-size: clamp(1.8rem, 3vw, 2.6rem) !important; font-weight: 900 !important; text-transform: uppercase; color: var(--kpy-black) !important; line-height: 1.15 !important; margin-bottom: 1.2rem !important }
.kpy-pastor-title em { font-style: normal; color: var(--kpy-orange, #c86f4a); display: block }
.kpy-pastor-sig-text { font-family: "Dancing Script", "Pacifico", cursive; font-size: 2.2rem; color: var(--kpy-base); margin: 1rem 0 .3rem !important }
.kpy-pastor-role { font-family: var(--kpy-font-2); font-size: .9rem; font-weight: 600; color: var(--kpy-grey); letter-spacing: .05em }
.kpy-bio-title { font-family: var(--kpy-font); font-size: clamp(1.8rem, 3vw, 2.4rem) !important; font-weight: 900 !important; text-transform: uppercase; color: var(--kpy-black) !important; line-height: 1.15 !important; margin-bottom: 1.2rem !important }
.kpy-bio-title em { font-style: normal; color: var(--kpy-orange, #c86f4a); display: block }
.kpy-bio-divider { border-top: 2px solid #eee !important; margin: 1.8rem 0 !important }
.kpy-bio-sub { font-family: var(--kpy-font-2); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--kpy-orange, #c86f4a); margin-bottom: .8rem !important }
.kpy-bio-list ul { padding-left: 1.2rem; margin: 0 !important }
.kpy-bio-list li { font-size: .95rem; color: var(--kpy-grey); line-height: 1.8; padding: .2rem 0 }
.kpy-bio-info-card { background: #fdf7f2; border-radius: 16px; padding: 1.6rem; border-left: 4px solid var(--kpy-orange, #c86f4a) }
.kpy-bio-info-card h5 { font-family: var(--kpy-font-2); font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--kpy-orange, #c86f4a); margin: 0 0 1rem !important }
.kpy-bio-info-card p { font-size: .88rem; color: var(--kpy-base); line-height: 1.6; margin: 0 0 .5rem !important; padding-bottom: .5rem; border-bottom: 1px solid #ede5d8 }
.kpy-bio-info-card p:last-child { border-bottom: none; margin: 0 !important }
.kpy-calling-banner { min-height: 380px !important; padding: 80px 40px !important; width: 100%; background-size: cover; background-position: center; position: relative; }
.kpy-calling-banner::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); z-index: 0 }
.kpy-calling-inner { text-align: center; max-width: 760px; margin: 0 auto; position: relative; z-index: 1 }
.kpy-calling-quote { font-family: var(--kpy-font); font-size: clamp(1.8rem, 4vw, 3rem) !important; font-weight: 900 !important; color: #fff !important; text-transform: uppercase; line-height: 1.2 !important; margin-bottom: .8rem !important }
.kpy-calling-quote em { font-style: normal; color: var(--kpy-orange, #c86f4a) }
.kpy-calling-attr { font-family: var(--kpy-font-2); font-size: .95rem; color: rgba(255, 255, 255, .7) !important; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2rem !important }
/*========================================================== RESPONSIVE ==========================================================*/ @media (max-width: 1024px) { .kpy-tabs-section, .kpy-services-section, .kpy-faq-section, .kpy-pastor-section, .kpy-bio-section { padding: 60px 32px !important; }
.kpy-stats-block { width: calc(100% + 64px); margin-left: -32px; margin-right: -32px; }
}
@media (max-width: 768px) { .kpy-about-section, .kpy-mission-section, .kpy-verse-section { padding: 48px 20px; }
.kpy-tabs-section, .kpy-services-section, .kpy-faq-section, .kpy-pastor-section, .kpy-bio-section { padding: 48px 20px !important; }
.kpy-stats-block { grid-template-columns: 1fr 1fr; width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; border-radius: 0; padding: 1.5rem .5rem; }
.kpy-stat-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.kpy-tab-bar { max-width: 100%; flex-wrap: wrap; border-radius: 16px; padding: .4rem; }
.kpy-service-card--mid { border-left: none; border-right: none; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.kpy-tabs-img-side img, .kpy-tabs-img, .kpy-faq-img img, .kpy-pastor-img img, .kpy-bio-portrait img { border-radius: 0 0 60px 0 !important; max-height: 300px; }
.kpy-about-images { min-height: 300px; }
.kpy-about-images .kpy-img-back img, .kpy-about-images .kpy-img-front img { position: static; width: 100%; height: 220px; }
.kpy-cta-banner { padding: 32px 20px !important; }
.kpy-rotating-badge { width: 100px; height: 100px; bottom: -20px; left: -10px; }
.kpy-donate-input-row { flex-direction: column; border-radius: 16px; padding: .8rem; }
.kpy-donate-submit { border-radius: 50px; padding: .7rem 1.4rem; }
.kpy-tabs-cols-inner { grid-template-columns: 1fr; gap: 2rem; }
.kpy-tabs-cols, .kpy-faq-cols, .kpy-pastor-cols, .kpy-bio-cols { gap: 2rem !important; flex-direction: column !important; }
}
/* Activity Cards Section */ .activity-cards-container { position: relative; margin-top: -80px; padding: 100px 20px 0px; z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; gap: 60px; max-width: 1400px; margin-left: auto; margin-right: auto; }
.activity-cards-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: radial-gradient(circle at center, rgba(var(--kpy-primary-rgb), 0.03) 0%, transparent 70%); z-index: -1; }
.activity-card { width: 340px; aspect-ratio: 1/1; background: var(--kpy-white); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(var(--kpy-base-rgb), 0.1); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; height: 450px; }
.activity-card:nth-child(1) { animation: genteel-float 6s ease-in-out infinite; }
.activity-card:nth-child(2) { animation: genteel-float 5s ease-in-out infinite 0.3s; transform: translateY(20px); }
.activity-card:nth-child(3) { animation: genteel-float 7s ease-in-out infinite 0.6s; }
.activity-card:hover { animation-play-state: paused; transform: translateY(-10px) scale(1.02); box-shadow: 0 30px 60px rgba(var(--kpy-primary-rgb), 0.2); }
.activity-card-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.activity-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.activity-card:hover .activity-card-image img { transform: scale(1.05); }
.activity-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px; background: linear-gradient(to top, rgba(var(--kpy-base-rgb), 0.8) 0%, rgba(var(--kpy-base-rgb), 0.4) 70%, transparent 100%); color: var(--kpy-white); transform: translateY(0); transition: all 0.4s ease; }
.activity-card:hover .activity-card-content { background: linear-gradient(to top, rgba(var(--kpy-base-rgb), 0.9) 0%, rgba(var(--kpy-base-rgb), 0.5) 70%, transparent 100%); }
.activity-card-badge { position: absolute; top: 20px; right: 20px; background: var(--kpy-secondary); color: var(--kpy-base); padding: 6px 15px; border-radius: 20px; font-family: var(--kpy-font); font-size: 12px; text-transform: uppercase; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.activity-card-title { margin: 0 0 10px; font-family: var(--kpy-font-2); font-size: 1.5rem; }
.activity-card-title a { color: inherit; text-decoration: none; position: relative; }
.activity-card-title a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--kpy-primary); transition: width 0.4s ease; }
.activity-card:hover .activity-card-title a::after { width: 100%; }
.activity-card-excerpt { font-family: var(--kpy-font); font-size: 0.95rem; line-height: 1.6; margin-bottom: 15px; opacity: 0.9; }
.activity-card-button { display: inline-block; padding: 8px 20px; background: var(--kpy-primary); color: var(--kpy-white); font-family: var(--kpy-font-2); font-weight: bold; text-decoration: none; border-radius: 20px; font-size: 0.9rem; transition: all 0.3s ease; }
.activity-card-button:hover { background: var(--kpy-blue); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(var(--kpy-primary-rgb), 0.3); }
@keyframes genteel-float { 0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
@media (max-width: 1024px) { .activity-cards-container { gap: 40px; }
.activity-card { width: 280px; }
}
@media (max-width: 768px) { .activity-cards-container { margin-top: -40px; padding-top: 60px; gap: 30px; }
.activity-card { width: 100%; max-width: 350px; transform: none; }
}
.program-cards-container { display: grid; gap: 2rem; margin: 3rem 0; font-family: var(--kpy-font); }
.program-cards-container.layout-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.program-cards-container.layout-list { grid-template-columns: 1fr; }
.program-cards-container.columns-2 { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
.program-cards-container.columns-3 { grid-template-columns: repeat(3, minmax(280px, 1fr)); }
.program-cards-container.columns-4 { grid-template-columns: repeat(4, minmax(240px, 1fr)); }
.program-card { background: var(--kpy-white); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 15px rgba(var(--kpy-base-rgb), 0.08); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); position: relative; border: 1px solid rgba(var(--kpy-primary-rgb), 0.1); animation: fadeInUp 0.6s ease forwards; opacity: 0; }
.program-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(var(--kpy-base-rgb), 0.12); border-color: rgba(var(--kpy-primary-rgb), 0.3); }
.program-card__media { position: relative; padding-bottom: 62.5%; overflow: hidden; }
.program-card__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.program-card:hover .program-card__image { transform: scale(1.08); }
.program-card__placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--kpy-light) 0%, rgba(var(--kpy-primary-rgb), 0.1) 100%); display: flex; align-items: center; justify-content: center; color: var(--kpy-primary); font-family: var(--kpy-font-2); font-size: 1.1rem; }
.program-card__content { padding: 1.75rem; position: relative; }
.program-card__title { margin: 0 0 1.25rem; font-size: 1.375rem; line-height: 1.3; font-family: var(--kpy-font); color: var(--kpy-base); position: relative; padding-bottom: 0.75rem; }
.program-card__title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px; background: var(--kpy-primary); transition: width 0.3s ease; }
.program-card:hover .program-card__title::after { width: 80px; }
.program-card__title a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
.program-card__title a:hover { color: var(--kpy-primary); }
.program-card__excerpt { margin-bottom: 1.75rem; color: rgba(var(--kpy-base-rgb), 0.7); font-size: 0.95rem; line-height: 1.6; }
.program-card__button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background-color: var(--kpy-primary); color: var(--kpy-white); text-decoration: none; border-radius: 50px; font-size: 0.95rem; font-weight: 500; transition: all 0.3s ease; border: 2px solid transparent; }
.program-card__button:hover { background-color: transparent; color: var(--kpy-primary); border-color: var(--kpy-primary); transform: translateX(5px); }
.program-card__button::after { content: '›'; transition: transform 0.3s ease; }
.program-card__button:hover::after { transform: translateX(3px); }
.program-cards__not-found { text-align: center; padding: 3rem; color: var(--kpy-primary); background: rgba(var(--kpy-primary-rgb), 0.05); border-radius: 12px; font-family: var(--kpy-font-2); font-size: 1.2rem; }
@media (max-width: 1200px) { .program-cards-container.columns-4 { grid-template-columns: repeat(3, minmax(280px, 1fr)); }
}
@media (max-width: 992px) { .program-cards-container.columns-3, .program-cards-container.columns-4 { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}
@media (max-width: 768px) { .program-cards-container { gap: 1.5rem; }
.program-cards-container.layout-grid, .program-cards-container.columns-2, .program-cards-container.columns-3, .program-cards-container.columns-4 { grid-template-columns: 1fr; }
.program-card__content { padding: 1.5rem; }
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.program-card:nth-child(1) { animation-delay: 0.1s; }
.program-card:nth-child(2) { animation-delay: 0.2s; }
.program-card:nth-child(3) { animation-delay: 0.3s; }
.program-card:nth-child(4) { animation-delay: 0.4s; }
.program-card:nth-child(5) { animation-delay: 0.5s; }
.program-card:nth-child(6) { animation-delay: 0.6s; }
.sunday-cta-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.sunday-cta-inner { border-radius: 60px 0 60px 0; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.sunday-cta-columns { display: flex; flex-wrap: wrap; align-items: center; padding: 40px; gap: 30px; }
.sunday-cta-content { flex: 1; min-width: 500px; }
.sunday-cta-buttons { flex: 0 0 auto; }
.sunday-cta-button-group { display: flex; gap: 15px; flex-wrap: wrap; }
.sunday-cta-heading { font-size: 3.5rem; margin-bottom: 15px; line-height: 1.3; }
.sunday-cta-text { font-size: 1.1rem; line-height: 1.6; max-width: 600px; }
.sunday-cta-button { display: inline-block; padding: 12px 24px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; text-align: center; min-width: 150px; }
.sunday-cta-button-primary:hover { background-color: var(--kpy-primary); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.sunday-cta-button-secondary:hover { background-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
@media (max-width:768px) { .sunday-cta-columns { padding: 30px; flex-direction: column; text-align: center; }
.sunday-cta-content { text-align: center; }
.sunday-cta-button-group { justify-content: center; }
.sunday-cta-heading { font-size: 1.8rem; }
}
@media (max-width:480px) { .sunday-cta-container { padding: 0 5px; max-width: 100%; }
}
/*========================================================== Group Page/ Single Page and Related ==========================================================**/ /*========================================================== Group Listing Page ==========================================================*/ .rohi-group-container { max-width: 1200px; margin: 60px auto; padding: 0 20px; }
.rohi-group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 70px; }
/* Cards: NO radius except bottom-right, matching screenshot 2 exactly */ .rohi-group-card { position: relative; border-radius: 0 0 50px 0; overflow: hidden; height: 460px; box-shadow: 0 8px 32px rgba(var(--kpy-base-rgb), 0.14); transition: transform 0.35s cubic-bezier(.25, .8, .25, 1), box-shadow 0.35s; }
.rohi-group-card:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(var(--kpy-base-rgb), 0.24); }
.rohi-group-card-link { display: block; height: 100%; text-decoration: none; color: inherit; }
.rohi-group-thumbnail { position: absolute; inset: 0; z-index: 1; }
.rohi-group-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.rohi-group-card:hover .rohi-group-thumbnail img { transform: scale(1.06); }
/* Overlay: strong at TOP for title legibility, lighter at bottom */ .rohi-thumbnail-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--kpy-base-rgb), 0.55) 0%, rgba(var(--kpy-base-rgb), 0.1) 50%, rgba(var(--kpy-base-rgb), 0.08) 100%); z-index: 2; }
/* Card info: title sits at TOP LEFT */ .rohi-card-info { position: relative; z-index: 3; padding: 22px 24px; color: var(--kpy-white); display: flex; flex-direction: column; height: 100%; justify-content: flex-start; }
.rohi-group-card h3 { margin: 0 0 8px 0; font-family: var(--kpy-font-2); font-size: 18px; font-weight: 700; text-shadow: 1px 1px 4px rgba(var(--kpy-base-rgb), 0.7); letter-spacing: 1px; text-transform: uppercase; }
.rohi-group-meta { margin: 4px 0 0; }
.rohi-meta-item { display: block; margin-bottom: 4px; font-family: var(--kpy-font-2); font-size: 13px; opacity: 0.93; }
.rohi-meta-item i { margin-right: 6px; color: var(--kpy-orange); }
.rohi-group-excerpt { display: none; }
/* Arrow button: bottom-right, inside the rounded corner */ .rohi-view-btn { position: absolute; bottom: 18px; right: 18px; width: 46px; height: 46px; background: var(--kpy-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--kpy-white); font-size: 17px; transition: background 0.3s, transform 0.3s; z-index: 4; box-shadow: 0 4px 12px rgba(var(--kpy-orange-rgb), 0.4); }
.rohi-group-card:hover .rohi-view-btn { background: var(--kpy-white); color: var(--kpy-orange); transform: scale(1.1); }
.rohi-no-groups { text-align: center; color: var(--kpy-grey); padding: 40px 0; font-family: var(--kpy-font-2); }
/* How to Join — appears ONCE at the bottom, full-width background */ .rohi-how-to-join { margin-top: 0; padding: 70px 40px 60px; background: var(--kpy-light); }
.rohi-how-to-join h2 { text-align: center; font-family: var(--kpy-font); font-size: 1.9rem; color: var(--kpy-primary); margin-bottom: 48px; letter-spacing: 3px; }
.rohi-join-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; }
.rohi-step { text-align: center; padding: 30px 22px; background: var(--kpy-white); border-radius: 0 0 30px 0; box-shadow: 0 4px 16px rgba(var(--kpy-base-rgb), 0.07); transition: transform 0.3s, box-shadow 0.3s; }
.rohi-step:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(var(--kpy-base-rgb), 0.12); }
.rohi-step-number { width: 44px; height: 44px; background: var(--kpy-orange); color: var(--kpy-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-weight: 700; font-size: 18px; font-family: var(--kpy-font-2); box-shadow: 0 4px 12px rgba(var(--kpy-orange-rgb), 0.35); }
.rohi-step h3 { font-family: var(--kpy-font); color: var(--kpy-primary); font-size: 13px; letter-spacing: 1.5px; margin-bottom: 10px; }
.rohi-step p { font-family: var(--kpy-font-2); color: var(--kpy-grey); font-size: 14px; line-height: 1.6; margin: 0; }
/* Admin table */ .rohi-requests-admin { margin-top: 20px; }
.rohi-status-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.rohi-status-badge.status-pending { background: #f0f0f1; color: #1d2327; }
.rohi-status-badge.status-contacted { background: #d5e6ff; color: #135e96; }
.rohi-status-badge.status-approved { background: #d1f0d1; color: #1a5e1a; }
.rohi-actions { display: flex; gap: 5px; }
.button-danger { background: #dc3232; color: #fff; border-color: #dc3232; }
.button-danger:hover { background: #a00; border-color: #a00; color: #fff; }
/*========================================================== Single Group Page ==========================================================*/ .rohi-sg-hero { position: relative; min-height: 280px; display: flex; align-items: flex-end; padding: 0; }
.rohi-sg-hero-inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 36px 20px; }
.rohi-sg-hero-inner h1 { font-family: var(--kpy-font); color: var(--kpy-white); font-size: 38px; margin: 0 0 10px; letter-spacing: 2px; text-shadow: 2px 2px 8px rgba(var(--kpy-base-rgb), 0.6); }
.rohi-sg-wrap { max-width: 1200px; margin: 44px auto 80px; padding: 0 20px; display: grid; grid-template-columns: 1fr 330px; gap: 48px; align-items: start; }
/* Main column — image height halved */ .rohi-sg-featured-img { border-radius: 0 0 40px 0; overflow: hidden; margin-bottom: 32px; box-shadow: 0 8px 30px rgba(var(--kpy-base-rgb), 0.12); }
.rohi-sg-featured-img img { width: 100%; height: 300px; object-fit: cover; display: block; }
.rohi-sg-description { font-family: var(--kpy-font-2); font-size: 16px; line-height: 1.8; color: var(--kpy-grey); }
.rohi-sg-description h1, .rohi-sg-description h2, .rohi-sg-description h3, .rohi-sg-description h4 { font-family: var(--kpy-font); color: var(--kpy-primary); letter-spacing: 1.5px; }
.rohi-sg-join-box { margin-top: 44px; padding: 36px; background: var(--kpy-light); border-radius: 0 0 30px 0; }
.rohi-sg-section-title { font-family: var(--kpy-font); font-size: 18px; color: var(--kpy-primary); letter-spacing: 2px; margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.rohi-sg-section-title span { position: relative; }
.rohi-sg-section-title span::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: var(--kpy-orange); border-radius: 2px; }
.rohi-sg-join-intro { font-family: var(--kpy-font-2); color: var(--kpy-grey); margin-bottom: 24px; font-size: 15px; }
.rohi-form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 8px; }
.rohi-form-group { margin-bottom: 12px; }
.rohi-form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-family: var(--kpy-font-2); font-size: 13px; color: var(--kpy-base); text-transform: uppercase; letter-spacing: 0.5px; }
.rohi-form-group label .req { color: var(--kpy-orange); }
.rohi-form-group input { width: 100%; padding: 12px 16px; border: 1.5px solid #dde3e8; border-radius: 0 0 8px 0; font-family: var(--kpy-font-2); font-size: 15px; color: var(--kpy-base); background: var(--kpy-white); transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.rohi-form-group input:focus { outline: none; border-color: var(--kpy-orange); box-shadow: 0 0 0 3px rgba(var(--kpy-orange-rgb), 0.12); }
.rohi-form-submit { margin-top: 20px; }
.rohi-submit-button { background: var(--kpy-orange); color: var(--kpy-white); border: none; padding: 14px 36px; border-radius: 0 0 10px 0; font-weight: 700; cursor: pointer; transition: background 0.3s, transform 0.2s; font-family: var(--kpy-font-2); font-size: 15px; display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 1px; }
.rohi-submit-button:hover { background: var(--kpy-primary); transform: translateY(-1px); }
.rohi-submit-button:disabled { opacity: 0.7; cursor: not-allowed; }
#rohi-form-message { margin-top: 18px; padding: 14px 18px; border-radius: 8px; display: none; font-family: var(--kpy-font-2); font-size: 15px; }
#rohi-form-message.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
#rohi-form-message.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
/* Sidebar */ .rohi-sg-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; }
.rohi-sg-info-card { background: rgba(var(--kpy-orange-rgb), 0.04); border: 1px solid rgba(var(--kpy-orange-rgb), 0.15); border-radius: 0 0 20px 0; overflow: hidden; }
.rohi-sg-card-header { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: var(--kpy-white); border-bottom: 1px solid rgba(var(--kpy-orange-rgb), 0.12); }
.rohi-sg-card-header i { color: var(--kpy-orange); font-size: 18px; }
.rohi-sg-card-header h3 { font-family: var(--kpy-font); font-size: 12px; color: var(--kpy-primary); letter-spacing: 1.5px; margin: 0; }
.rohi-sg-card-body { padding: 16px 20px; }
.rohi-sg-card-body p { font-family: var(--kpy-font-2); font-size: 14px; color: var(--kpy-grey); margin: 0; line-height: 1.7; }
/* Other Groups in sidebar */ .rohi-sg-other-groups { background: var(--kpy-white); border: 1px solid #e8edf1; border-radius: 0 0 20px 0; overflow: hidden; padding: 20px; }
.rohi-sg-other-title { font-family: var(--kpy-font); font-size: 12px; color: var(--kpy-primary); letter-spacing: 2px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--kpy-orange); display: inline-block; }
.rohi-og-item { margin-bottom: 12px; border: 1px solid #eef0f3; border-radius: 0 0 12px 0; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; }
.rohi-og-item:last-child { margin-bottom: 0; }
.rohi-og-item:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(var(--kpy-base-rgb), 0.1); }
.rohi-og-item a { display: flex; text-decoration: none; color: inherit; }
.rohi-og-thumb { width: 72px; flex-shrink: 0; }
.rohi-og-thumb img { width: 72px; height: 72px; object-fit: cover; display: block; }
.rohi-og-info { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.rohi-og-info h4 { margin: 0 0 5px; font-family: var(--kpy-font); font-size: 13px; color: var(--kpy-base); letter-spacing: 0.5px; }
.rohi-og-info span { font-family: var(--kpy-font-2); font-size: 12px; color: var(--kpy-grey); }
.rohi-og-info span i { color: var(--kpy-orange); margin-right: 4px; }
/* Responsive */ @media (max-width: 1024px) { .rohi-group-grid { grid-template-columns: repeat(2, 1fr); }
.rohi-join-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) { .rohi-sg-wrap { grid-template-columns: 1fr; }
.rohi-sg-sidebar { position: static; }
.rohi-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .rohi-group-grid { grid-template-columns: 1fr; }
.rohi-group-card { height: 380px; }
.rohi-join-steps { grid-template-columns: repeat(2, 1fr); }
.rohi-sg-hero-inner h1 { font-size: 26px; }
.rohi-how-to-join { padding: 50px 20px 40px; }
}
@media (max-width: 480px) { .rohi-join-steps { grid-template-columns: 1fr; }
.rohi-sg-featured-img img { height: 220px; }
}
/*========================================================== News PAGE ==========================================================**/ /*.kpy-news-slider-container {max-width: 1280px; margin: 0 auto; padding: 60px 20px; position: relative; }
*/ /*.kpy-news-slider-header {text-align: center; margin-bottom: 50px; padding: 0 20px; }
*/ /*.kpy-news-slider-title {font-family: var(--kpy-font-3); font-size: 3.5rem; color: var(--kpy-secondary-2); margin-bottom: 15px; font-weight: 700; position: relative; display: inline-block; }
*/ /*.kpy-news-slider-title:after {content: ''; position: absolute; width: 80px; height: 4px; background: linear-gradient(90deg, var(--kpy-primary), var(--kpy-secondary)); bottom: -12px; left: 50%; transform: translateX(-50%); border-radius: 2px; }
*/ /*.kpy-news-slider-subtitle {font-family: var(--kpy-font-2); font-size: 1.1rem; color: rgba(var(--kpy-base-rgb), 0.7); max-width: 700px; margin: 0 auto; line-height: 1.6; }
*/ /*.kpy-news-slider-wrapper {position: relative; padding: 0 40px; }
*/ /*.kpy-news-slider {display: flex; overflow-x: auto; scroll-behavior: smooth; padding: 20px 10px; gap: 30px; scrollbar-width: none; -ms-overflow-style: none; }
*/ /*.kpy-news-slider::-webkit-scrollbar {display: none; }
*/ /*.kpy-news-slide {flex: 0 0 360px; min-width: 360px; scroll-snap-align: start; }
*/ /*.kpy-news-card {border-radius: 12px; overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); height: 100%; display: flex; flex-direction: column; }
*/ /*.kpy-news-card-link {display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
*/ /*.kpy-news-card-thumbnail {height: 300px; overflow: hidden; position: relative; }
*/ /*.kpy-news-card-image {width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); border-radius:20px; }
*/ /*.kpy-news-card:hover .kpy-news-card-image {transform: scale(2.01); }
*/ /*.kpy-news-card-content {padding: 25px; flex: 1; display: flex; flex-direction: column; }
*/ /*.kpy-news-card-meta {display: flex; align-items: center; gap: 15px; margin-bottom: 15px; font-size: 0.85rem; color: rgba(var(--kpy-base-rgb), 0.6); font-family: var(--kpy-font-2); }
*/ /*.kpy-news-card-title {font-family: var(--kpy-font); font-size: 1.4rem; line-height: 1.4; margin-bottom: 15px; color: var(--kpy-black); transition: color 0.3s ease; font-weight:500; }
*/ /*.kpy-news-card:hover .kpy-news-card-title {color: var(--kpy-primary); }
*/ /*.kpy-news-card-excerpt {font-family: var(--kpy-font-2); font-size: 0.95rem; color: rgba(var(--kpy-base-rgb), 0.7); margin-bottom: 10px; line-height: 1.6; flex: 1; }
*/ /*.kpy-news-card-button {display: inline-flex; align-items: center; gap: 8px; font-family: var(--kpy-font); font-weight: 600; color: var(--kpy-base); transition: all 0.3s ease; margin-top: auto; align-self: flex-start; }
*/ /*.kpy-news-card:hover .kpy-news-card-button {color: var(--kpy-primary); transform: translateX(5px); }
*/ /*.kpy-news-slider-prev, .kpy-news-slider-next {position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: var(--kpy-white); border: none; box-shadow: 0 4px 15px rgba(var(--kpy-base-rgb), 0.1); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.3s ease; opacity: 0.9; }
*/ /*.kpy-news-slider-prev {left: -10px; }
*/ /*.kpy-news-slider-next {right: -10px; }
*/ /*.kpy-news-slider-prev:hover, .kpy-news-slider-next:hover {background: var(--kpy-primary); color: var(--kpy-white); opacity: 1; transform: translateY(-50%) scale(1.1); }
*/ /*.kpy-news-slider-empty {text-align: center; padding: 60px 20px; color: rgba(var(--kpy-base-rgb), 0.5); font-family: var(--kpy-font-2); width: 100%; }
*/ /*@media (max-width: 1024px) {.kpy-news-slide { flex: 0 0 320px; min-width: 320px; }
.kpy-news-card-thumbnail { height: 200px; }
}
*/ /*@media (max-width: 768px) {.kpy-news-slider-container { padding: 40px 15px; }
.kpy-news-slider-header { margin-bottom: 30px; }
.kpy-news-slider-title { font-size: 2rem; }
.kpy-news-slider-subtitle { font-size: 1rem; }
.kpy-news-slider-wrapper { padding: 0 20px; }
.kpy-news-slide { flex: 0 0 280px; min-width: 280px; }
.kpy-news-slider-prev { left: 0; }
.kpy-news-slider-next { right: 0; }
}
*/ /*@media (max-width: 480px) {.kpy-news-slider-title { font-size: 1.8rem; }
.kpy-news-slide { flex: 0 0 260px; min-width: 260px; }
.kpy-news-card-content { padding: 20px; }
.kpy-news-card-title { font-size: 1.2rem; }
}
*/ /*========================================================== Contact Us ==========================================================**/ .alt-contact-container { max-width: 1400px; margin: -90px auto 100px; padding: 0 20px; position: relative; z-index: 2; }
.alt-contact-layout { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 30px; margin-top: 50px; }
.alt-contact-info-col, .alt-contact-form-col, .alt-contact-map-col { display: flex; flex-direction: column; }
.alt-contact-info-card, .alt-contact-form-card, .alt-contact-map-card { background: var(--kpy-white); border-radius: 10px; box-shadow: 0 10px 30px rgba(var(--kpy-base-rgb), 0.05); padding: 30px; height: 100%; }
.alt-contact-info-title, .alt-form-title, .alt-map-title { font-family: var(--kpy-font-3); font-size: 2.5rem; margin-bottom: 20px; position: relative; padding-bottom: 15px; }
.alt-contact-info-title:after, .alt-form-title:after, .alt-map-title:after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px; background: var(--kpy-secondary); }
.alt-contact-info-item { display: flex; align-items: flex-start; margin-bottom: 25px; }
.alt-contact-icon { flex-shrink: 0; width: 50px; height: 50px; background: rgba(var(--kpy-primary-rgb), 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; }
.alt-contact-icon svg { width: 24px; height: 24px; }
.alt-contact-text h4 { font-size: 1.1rem; margin-bottom: 5px; color: var(--kpy-base); font-family: var(--kpy-font) }
.alt-contact-text p { margin: 0; color: var(--kpy-grey); line-height: 1.5; }
.alt-contact-hours { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(var(--kpy-base-rgb), 0.1); }
.alt-contact-hours h4 { font-size: 1.1rem; margin-bottom: 10px; color: var(--kpy-base); font-family: var(--kpy-font) }
.alt-contact-hours p { margin: 0; color: var(--kpy-grey); line-height: 1.6; }
.alt-contact-social { margin-top: auto; padding-top: 30px; }
.alt-contact-social h4 { font-size: 1.1rem; margin-bottom: 15px; color: var(--kpy-base); }
.alt-social-icons { display: flex; gap: 10px; }
.alt-social-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--kpy-primary-rgb), 0.1); color: var(--kpy-primary); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.alt-social-icon:hover { background: var(--kpy-primary); color: var(--kpy-white); }
.alt-form-subtitle { color: var(--kpy-grey); margin-bottom: 25px; }
.alt-form-group { margin-bottom: 20px; }
.alt-form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--kpy-base); }
.alt-form-group label span { color: var(--kpy-primary); }
.alt-form-group input, .alt-form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid rgba(var(--kpy-base-rgb), 0.1); border-radius: 5px; font-family: inherit; font-size: 1rem; transition: all 0.3s ease; }
.alt-form-group input:focus, .alt-form-group textarea:focus { outline: none; border-color: var(--kpy-primary); box-shadow: 0 0 0 3px rgba(var(--kpy-primary-rgb), 0.1); }
.alt-form-row { display: flex; gap: 20px; }
.alt-form-half { flex: 1; }
.alt-form-submit { margin-top: 30px; }
.alt-submit-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 25px; background: var(--kpy-primary); color: var(--kpy-white); border: none; border-radius: 5px; font-weight: 500; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; }
.alt-submit-btn svg { margin-left: 8px; transition: transform 0.3s ease; }
.alt-submit-btn:hover { background: #5ab4c6; }
.alt-submit-btn:hover svg { transform: translateX(3px); }
.alt-map-container { height: 300px; border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.alt-map-container iframe { width: 100%; height: 100%; border: none; }
.alt-directions-btn { display: inline-flex; align-items: center; padding: 8px 15px; background: rgba(var(--kpy-primary-rgb), 0.1); color: var(--kpy-primary); border-radius: 5px; font-weight: 500; transition: all 0.3s ease; }
.alt-directions-btn svg { margin-left: 5px; }
.alt-directions-btn:hover { background: var(--kpy-primary); color: var(--kpy-white); }
.alt-contact-success-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(var(--kpy-base-rgb), 0.7); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.alt-contact-success-popup.active { opacity: 1; visibility: visible; }
.alt-success-content { background: var(--kpy-white); padding: 40px; border-radius: 10px; text-align: center; max-width: 400px; position: relative; transform: translateY(20px); transition: all 0.3s ease; }
.alt-contact-success-popup.active .alt-success-content { transform: translateY(0); }
.alt-checkmark { width: 80px; height: 80px; margin: 0 auto 20px; }
.alt-checkmark svg { width: 100%; height: 100%; }
.alt-success-content h3 { font-size: 1.5rem; margin-bottom: 10px; color: var(--kpy-primary); }
.alt-success-content p { margin-bottom: 20px; color: var(--kpy-grey); }
.alt-close-popup { background: var(--kpy-primary); color: var(--kpy-white); border: none; padding: 8px 20px; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; }
.alt-close-popup:hover { background: #5ab4c6; }
@keyframes float { 0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@media (max-width:1200px) { .alt-contact-layout { grid-template-columns: 1fr 1fr; }
.alt-contact-map-col { grid-column: span 2; margin-top: 30px; }
}
@media (max-width:768px) { .alt-contact-layout { grid-template-columns: 1fr; }
.alt-contact-map-col { grid-column: span 1; }
.alt-contact-title { font-size: 2.5rem; }
}
@media (max-width:480px) { .alt-contact-hero { padding: 80px 0 120px; }
.alt-form-row { flex-direction: column; gap: 0; }
}
/*========================================================== Give page ==========================================================**/ /* Payment Options Section */ .modern-section-title { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; font-family: var(--kpy-font-2); }
.modern-payment-cards { display: flex; justify-content: center; gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 0 1rem; flex-wrap: wrap; }
.modern-payment-card { background: var(--kpy-white); border-radius: 12px; padding: 2.5rem; width: calc(50% - 1rem); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; border-top: 5px solid var(--kpy-primary); }
.modern-payment-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); }
.modern-card-title { font-size: 2.8rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; color: var(--kpy-secondary-2); }
.modern-card-icon { font-size: 2rem; color: var(--kpy-secondary); }
.modern-card-details { margin-top: 1.5rem; }
.modern-detail-item { display: flex; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed rgba(var(--kpy-primary-rgb), 0.2); }
.modern-detail-label { min-width: 120px; color: var(--kpy-primary); }
.modern-detail-value { color: var(--kpy-base); }
/* Donation Form Section */ .modern-donation-form-section { padding: 2rem 0; }
.modern-form-container { max-width: 900px; margin: 0 auto; padding: 0 1rem; background: var(--kpy-white); }
.modern-form-card { border-radius: 12px; padding: 3rem; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05); border-top: 5px solid var(--kpy-primary); }
.modern-form-title { font-size: 2.8rem; margin-bottom: 1.5rem; text-align: center; font-family: var(--kpy-font-3); color: var(--kpy-secondary-2); }
.modern-form-description { text-align: center; margin-bottom: 2.5rem; color: var(--kpy-base); max-width: 600px; margin-left: auto; margin-right: auto; }
.modern-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.modern-form-group { margin-bottom: 1.5rem; }
.modern-form-label { display: block; margin-bottom: 0.5rem; color: var(--kpy-base); }
.modern-form-input { width: 100%; padding: 0.8rem 1rem; border: 1px solid rgba(var(--kpy-primary-rgb), 0.5); border-radius: 6px; font-size: 1rem; transition: all 0.3s; background: white; }
.modern-form-input:focus { border-color: var(--kpy-primary); outline: none; box-shadow: 0 0 0 3px rgba(var(--kpy-primary-rgb), 0.1); }
.modern-form-select { width: 100%; padding: 0.8rem 1rem; border: 1px solid rgba(var(--kpy-primary-rgb), 0.2); border-radius: 6px; font-size: 1rem; background: white; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em; }
.modern-form-textarea { width: 100%; padding: 0.8rem 1rem; border: 1px solid rgba(var(--kpy-primary-rgb), 0.2); border-radius: 6px; font-size: 1rem; min-height: 120px; resize: vertical; }
.modern-form-file { width: 100%; padding: 0.5rem 0; }
.modern-form-help { display: block; margin-top: 0.5rem; color: var(--kpy-grey); font-size: 0.85rem; }
.modern-submit-btn { background: var(--kpy-secondary-2); color: var(--kpy-white); border: none; padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border-radius: 6px; cursor: pointer; width: 100%; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; margin-top: 1rem; grid-column: 1 / -1; }
.modern-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(var(--kpy-primary-rgb), 0.2); }
/* Success Message */ .modern-success-message { text-align: center; padding: 3rem; background: rgba(var(--kpy-primary-rgb), 0.05); border-radius: 12px; border-left: 5px solid var(--kpy-secondary); }
.modern-success-icon { font-size: 4rem; color: var(--kpy-secondary); margin-bottom: 1.5rem; }
.modern-success-title { font-size: 2rem; color: var(--kpy-primary); margin-bottom: 1rem; font-family: var(--kpy-font-3); }
.modern-success-text { color: var(--kpy-base); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.modern-back-btn { display: inline-block; padding: 0.8rem 2rem; background: var(--kpy-primary); color: white; text-decoration: none; border-radius: 6px; transition: all 0.3s; font-weight: 600; }
.modern-back-btn:hover { background: var(--kpy-secondary); color: var(--kpy-base); }
/* Responsive Design */ @media (max-width: 992px) { .modern-payment-card { width: 100%; }
.modern-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) { .modern-hero-title { font-size: 2.5rem; }
.modern-hero-subtitle { font-size: 1.2rem; }
.modern-section-title { font-size: 2rem; }
.modern-card-title { font-size: 1.5rem; }
.modern-form-card { padding: 2rem; }
}
/*========================================================== Single News Page — uw-single-* classes, matches screenshot ==========================================================*/ /* Two-column layout: content | sidebar */ .uw-single-wrap { max-width: 1100px; margin: 40px auto 80px; padding: 0 8%; display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
/* -- MAIN ARTICLE -- */ .uw-single-article { min-width: 0; }
/* Featured image — full width, no radius */ .uw-single-thumb { margin-bottom: 20px; overflow: hidden; border-radius: 4px; }
.uw-single-thumb__img { width: 100%; height: auto; display: block; max-height: 480px; object-fit: cover; }
/* Post title below the image */ .uw-single-title { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: clamp(1.2rem, 2.2vw, 1.6rem) !important; font-weight: 700 !important; color: var(--kpy-base, #1a1d4e) !important; margin: 0 0 10px !important; line-height: 1.3; text-transform: none !important; letter-spacing: 0 !important; }
/* Meta row: date | author | category */ .uw-single-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid #e8edf5; }
.uw-single-meta__date, .uw-single-meta__author { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .8rem; color: var(--kpy-grey, #5c6070); display: inline-flex; align-items: center; gap: 5px; }
.uw-single-meta__date svg, .uw-single-meta__author svg { color: var(--kpy-primary, #35398e); flex-shrink: 0; }
.uw-single-meta__cat { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .72rem; font-weight: 700; background: var(--kpy-primary, #35398e); color: #fff; padding: 2px 10px; border-radius: 2px; text-transform: uppercase; letter-spacing: .05em; }
/* Post body content */ .uw-single-content { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .95rem; line-height: 1.85; color: var(--kpy-grey, #5c6070); }
.uw-single-content h2, .uw-single-content h3, .uw-single-content h4 { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); color: var(--kpy-base, #1a1d4e) !important; margin-top: 1.8em; margin-bottom: .6em; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; }
.uw-single-content p { margin-bottom: 1.3em; }
.uw-single-content img { max-width: 100%; height: auto; display: block; margin: 20px 0; border-radius: 4px; }
.uw-single-content a { color: var(--kpy-secondary, #00aeef); text-decoration: underline; }
.uw-single-content a:hover { color: var(--kpy-primary, #35398e); }
/* Blockquote — orange left border matching screenshot */ .uw-single-content blockquote, .uw-single-content .wp-block-quote { border-left: 4px solid var(--kpy-orange, #e05a2b) !important; margin: 28px 0 !important; padding: 14px 24px !important; background: #fff8f5 !important; border-radius: 0 4px 4px 0 !important; }
.uw-single-content blockquote p, .uw-single-content .wp-block-quote p { color: var(--kpy-orange, #e05a2b) !important; font-style: italic; font-size: .95rem !important; margin: 0 !important; }
/* Social share strip */ .uw-single-share { display: flex; align-items: center; gap: 10px; margin-top: 36px; padding-top: 20px; border-top: 1px solid #e8edf5; }
.uw-single-share__label { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .8rem; font-weight: 700; color: var(--kpy-grey, #5c6070); text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0; }
.uw-single-share__btn { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: opacity .2s, transform .2s; flex-shrink: 0; }
.uw-single-share__btn:hover { opacity: .85; transform: translateY(-2px); }
.uw-single-share__btn--fb { background: #1877f2; }
.uw-single-share__btn--tw { background: #000; }
.uw-single-share__btn--wa { background: #25d366; }
/* -- SIDEBAR -- */ .uw-single-sidebar { position: sticky; top: 100px; min-width: 0; }
.uw-single-sidebar__box { background: #fff; border: 1px solid #e0e6f4; border-radius: 4px; overflow: hidden; }
/* "Latest News" heading bar */ .uw-single-sidebar__heading { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .9rem !important; font-weight: 700 !important; color: #fff !important; background: var(--kpy-primary, #35398e); margin: 0 !important; padding: 12px 16px; text-transform: none !important; letter-spacing: 0 !important; }
.uw-single-sidebar__list { list-style: none; margin: 0; padding: 0; }
.uw-single-sidebar__item { border-bottom: 1px solid #eef1f8; }
.uw-single-sidebar__item:last-child { border-bottom: none; }
.uw-single-sidebar__link { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; text-decoration: none; transition: background .15s; }
.uw-single-sidebar__link:hover { background: #f5f7fb; }
.uw-single-sidebar__thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 3px; flex-shrink: 0; display: block; }
.uw-single-sidebar__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.uw-single-sidebar__title { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .8rem; font-weight: 600; color: var(--kpy-base, #1a1d4e); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.uw-single-sidebar__link:hover .uw-single-sidebar__title { color: var(--kpy-primary, #35398e); }
.uw-single-sidebar__date { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .72rem; color: var(--kpy-orange, #e05a2b); font-weight: 600; }
/* Responsive */ @media (max-width: 900px) { .uw-single-wrap { grid-template-columns: 1fr; gap: 32px; padding: 0 5%; }
.uw-single-sidebar { position: static; }
}
@media (max-width: 560px) { .uw-single-wrap { margin: 24px auto 48px; }
}
/*========================================================== News Slider (existing homepage widget — kept, only updated border-radius to match design language) ==========================================================*/ .kpy-news-slider-container { max-width: 1280px; margin: 0 auto; padding: 60px 20px; position: relative; }
.kpy-news-slider-header { text-align: center; margin-bottom: 50px; padding: 0 20px; }
.kpy-news-slider-title { font-family: var(--kpy-font); font-size: 3rem; color: var(--kpy-primary); margin-bottom: 15px; font-weight: 700; position: relative; display: inline-block; }
.kpy-news-slider-title::after { content: ''; position: absolute; width: 70px; height: 3px; background: var(--kpy-orange); bottom: -12px; left: 50%; transform: translateX(-50%); border-radius: 0 0 3px 3px; }
.kpy-news-slider-subtitle { font-family: var(--kpy-font-2); font-size: 1.05rem; color: var(--kpy-grey); max-width: 700px; margin: 0 auto; line-height: 1.6; }
.kpy-news-slider-wrapper { position: relative; padding: 0 40px; }
.kpy-news-slider { display: flex; overflow-x: auto; scroll-behavior: smooth; padding: 20px 10px; gap: 28px; scrollbar-width: none; -ms-overflow-style: none; }
.kpy-news-slider::-webkit-scrollbar { display: none; }
.kpy-news-slide { flex: 0 0 360px; min-width: 360px; scroll-snap-align: start; }
.kpy-ns-card { border-radius: 0 0 40px 0; overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease; height: 100%; display: flex; flex-direction: column; box-shadow: 0 6px 24px rgba(var(--kpy-base-rgb), 0.1); }
.kpy-ns-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(var(--kpy-base-rgb), 0.18); }
.kpy-ns-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.kpy-ns-thumbnail { height: 240px; overflow: hidden; position: relative; }
.kpy-ns-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.kpy-ns-card:hover .kpy-ns-thumbnail img { transform: scale(1.06); }
.kpy-ns-content { padding: 24px; flex: 1; display: flex; flex-direction: column; background: var(--kpy-white); }
.kpy-ns-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 12px; color: var(--kpy-grey); font-family: var(--kpy-font-2); }
.kpy-ns-cat { background: var(--kpy-orange); color: var(--kpy-white); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 3px 10px; border-radius: 0 0 6px 0; }
.kpy-ns-title { font-family: var(--kpy-font); font-size: 1.15rem; line-height: 1.4; margin-bottom: 12px; color: var(--kpy-base); font-weight: 600; }
.kpy-ns-card:hover .kpy-ns-title { color: var(--kpy-orange); }
.kpy-ns-excerpt { font-family: var(--kpy-font-2); font-size: 0.9rem; color: var(--kpy-grey); line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kpy-ns-read-more { display: inline-flex; align-items: center; gap: 7px; font-family: var(--kpy-font-2); font-weight: 600; font-size: 13px; color: var(--kpy-orange); margin-top: 16px; transition: gap 0.3s; }
.kpy-ns-card:hover .kpy-ns-read-more { gap: 11px; }
.kpy-news-slider-prev, .kpy-news-slider-next { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--kpy-white); border: none; box-shadow: 0 4px 14px rgba(var(--kpy-base-rgb), 0.12); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.3s, transform 0.3s; }
.kpy-news-slider-prev { left: -8px; }
.kpy-news-slider-next { right: -8px; }
.kpy-news-slider-prev:hover, .kpy-news-slider-next:hover { background: var(--kpy-orange); color: var(--kpy-white); transform: translateY(-50%) scale(1.1); }
.kpy-news-slider-empty { text-align: center; padding: 60px 20px; color: var(--kpy-grey); font-family: var(--kpy-font-2); width: 100%; }
/*========================================================== Responsive ==========================================================*/ @media (max-width: 1024px) { .kpy-news-grid { grid-template-columns: repeat(2, 1fr); }
.kpy-news-slide { flex: 0 0 300px; min-width: 300px; }
}
@media (max-width: 900px) { .kpy-sn-wrap { grid-template-columns: 1fr; }
.kpy-sn-sidebar { position: static; }
}
@media (max-width: 768px) { .kpy-news-slider-container { padding: 40px 15px; }
.kpy-news-slider-title { font-size: 2rem; }
.kpy-news-slider-wrapper { padding: 0 20px; }
.kpy-news-slide { flex: 0 0 280px; min-width: 280px; }
.kpy-news-slider-prev { left: 0; }
.kpy-news-slider-next { right: 0; }
.kpy-sn-hero { min-height: 320px; padding-top: 70px; }
.kpy-sn-hero-inner { padding: 0 20px 36px; }
.kpy-sn-hero-inner h1 { font-size: 22px; }
.kpy-sn-featured-img img { height: 220px; }
.kpy-sn-share { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) { .kpy-news-grid { grid-template-columns: 1fr; }
.kpy-news-card { height: 380px; }
.kpy-news-slider-title { font-size: 1.7rem; }
.kpy-news-slide { flex: 0 0 260px; min-width: 260px; }
}
/*.kpy-news-container {font-family: var(--kpy-font); color: var(--kpy-base); padding: 3rem 1rem; max-width: 1400px; margin: 0 auto; }
*/ /*.kpy-news-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); gap: 2rem; }
*/ /*.kpy-horizontal-card {display: flex; background: var(--kpy-white); border-radius: 12px; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); box-shadow: 0 5px 15px rgba(var(--kpy-base-rgb), 0.08); height: 240px; position: relative; }
*/ /*.kpy-horizontal-card:hover {transform: translateY(-5px); box-shadow: 0 15px 30px rgba(var(--kpy-base-rgb), 0.15); }
*/ /*.kpy-card-image-wrapper {flex: 0 0 40%; min-width: 0; overflow: hidden; position: relative; }
*/ /*.kpy-card-image-wrapper::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(var(--kpy-primary-rgb), 0.1) 0%, transparent 100%); }
*/ /*.kpy-card-image-wrapper img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
*/ /*.kpy-horizontal-card:hover .kpy-card-image-wrapper img {transform: scale(1.05); }
*/ /*.kpy-card-badge {position: absolute; top: 15px; left: 15px; background: var(--kpy-secondary); color: (--kpy-base); padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
*/ /*.kpy-card-content-wrapper {flex: 1; padding: 1.8rem; display: flex; flex-direction: column; }
*/ /*.kpy-card-meta {display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; font-size: 0.9rem; }
*/ /*.kpy-card-date {display: flex; align-items: center; gap: 8px; color: var(--kpy-secondary-2); font-weight: 500; }
*/ /*.kpy-card-title {font-family: var(--kpy-font-2); font-size: 1.4rem; line-height: 1.4; margin-bottom: 1rem; color: var(--kpy-base); }
*/ /*.kpy-card-title a {color: inherit; text-decoration: none; background-image: linear-gradient(var(--kpy-secondary), var(--kpy-secondary)); background-size: 0% 2px; background-repeat: no-repeat; background-position: left 85%; transition: background-size 0.3s ease; }
*/ /*.kpy-card-title a:hover {background-size: 100% 2px; }
*/ /*.kpy-card-excerpt {color: rgba(var(--kpy-base-rgb), 0.8); margin-bottom: 1.5rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.95rem; }
*/ /*.kpy-card-footer {margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
*/ /*.kpy-card-button {display: inline-flex; align-items: center; gap: 8px; color: var(--kpy-primary); font-weight: 600; text-decoration: none; padding: 8px 16px; border-radius: 6px; transition: all 0.3s ease; background: rgba(var(--kpy-primary-rgb), 0.1); }
*/ /*.kpy-card-button:hover {background: rgba(var(--kpy-primary-rgb), 0.2); gap: 10px; }
*/ /*.kpy-card-button i {transition: transform 0.3s ease; }
*/ /*.kpy-card-button:hover i {transform: translateX(3px); }
*/ /*@media (max-width: 1300px) {.kpy-news-grid { grid-template-columns: 1fr; }
}
*/ /*@media (max-width: 768px) {.kpy-horizontal-card { flex-direction: column; height: auto; }
.kpy-card-image-wrapper { flex: 0 0 220px; }
.kpy-card-title { font-size: 1.2rem; }
.kpy-card-excerpt { -webkit-line-clamp: 2; margin-bottom: 1rem; }
.kpy-card-content-wrapper { padding: 1.5rem; }
}
*/ /** ========================================================= TEAM section ===============================================================**/ .team { padding-right: 15px; }
.team .card { min-height: 320px; margin-bottom: 2rem !important; }
.team .post-thumbnail img { height: 400px; width: 100%; object-fit: cover; object-position: top; }
.team .team-details { padding: 10px 10px 20px; margin: 0 auto; text-align: center; position: absolute; bottom: 0; background-image: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)); width: 100%; color: #fff; }
.team-details h4 { font-size: 26px; font-weight: 500; }
.team-details p { font-size: 15px; margin-bottom: 10px; }
.team .team-details .btn-outline-primary { color: #fff; font-size: 14px; padding: 5px 20px; border: solid 1px #fff; border-radius: 50px; }
.team .team-details .btn-outline-primary:hover { border: 1px solid var(--kpy-gold); color: var(--kpy-base); background-color: var(--kpy-gold); }
.member-details img { height: 400px; width: 100%; object-fit: cover; object-position: top; }
.member-details .btx { margin-left: 90%; margin-top: 10px; }
.member-details h4, .partner-details h4 { font-weight: 500; font-size: 25px !important; line-height: 1.5; }
.member-details .modal-body span::after, .partner-details .modal-body span::after { border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 10px; }
.member-details .modal-body p.title, .partner-details .modal-body p.title { border-bottom: dotted 2px #eee; color: #F72331; }
.modal.show .modal-dialog { padding: 20px; background: #fff; }
.modal-content { max-height: 400px; overflow-y: auto; }
/** ========================================================= Gallery page ===============================================================**/ .gallery-cards-container { margin: 0 auto; padding: 20px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; }
.gallery-card { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; aspect-ratio: 1/1; }
.gallery-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }
.gallery-thumbnail-wrapper { position: relative; width: 100%; height: 100%; }
.gallery-thumbnail { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.gallery-card:hover .gallery-thumbnail { transform: scale(1.05); }
.gallery-title-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); color: #fff; }
.gallery-title { margin: 0; font-size: 2.2rem; line-height: 1.2; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transform: translateY(10px); transition: transform 0.3s ease; opacity: 0.9; }
.gallery-card:hover .gallery-title { transform: translateY(0); opacity: 1; }
.gallery-card-link { display: block; height: 100%; text-decoration: none; color: inherit; }
.gallery-pagination { display: flex; justify-content: center; margin-top: 40px; }
.gallery-pagination .page-numbers { display: flex; list-style: none; padding: 0; margin: 0; gap: 8px; }
.gallery-pagination .page-numbers li a, .gallery-pagination .page-numbers li span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 6px; background: #f8f9fa; color: #495057; text-decoration: none; font-weight: 500; transition: all 0.3s ease; }
.gallery-pagination .page-numbers li a:hover { background: #228b22; color: #fff; }
.gallery-pagination .page-numbers li span.current { background: #228b22; color: #fff; }
.gallery-pagination .page-numbers li .pagination-arrow { margin: 0 5px; }
@media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
.gallery-title-overlay { padding: 15px; }
.gallery-title { font-size: 1rem; }
}
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.gallery-title-overlay { padding: 10px; }
}
/*========================================================== Video Gallery ==========================================================*/ /* Container & Grid */ .kpy-vg-container { max-width: 1200px; margin: 60px auto; padding: 0 20px; }
.kpy-vg-grid { display: grid; gap: 28px; margin-bottom: 50px; }
.kpy-vg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.kpy-vg-cols-2 { grid-template-columns: repeat(2, 1fr); }
.kpy-vg-cols-4 { grid-template-columns: repeat(4, 1fr); }
.kpy-vg-empty { text-align: center; color: var(--kpy-grey); font-family: var(--kpy-font-2); padding: 60px 0; }
/* Card shell — only bottom-right radius, same as groups */ .kpy-vg-card { position: relative; border-radius: 0 0 50px 0; overflow: hidden; height: 420px; cursor: pointer; box-shadow: 0 8px 32px rgba(var(--kpy-base-rgb), 0.14); transition: transform 0.35s cubic-bezier(.25, .8, .25, 1), box-shadow 0.35s; }
.kpy-vg-card:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(var(--kpy-base-rgb), 0.24); }
/* Background thumbnail */ .kpy-vg-thumb { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.55s ease; z-index: 1; }
.kpy-vg-card:hover .kpy-vg-thumb { transform: scale(1.06); }
/* Overlay — dark top for title readability, softens toward middle */ .kpy-vg-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--kpy-base-rgb), 0.72) 0%, rgba(var(--kpy-base-rgb), 0.15) 45%, rgba(var(--kpy-base-rgb), 0.55) 100%); z-index: 2; transition: background 0.35s; }
.kpy-vg-card:hover .kpy-vg-overlay { background: linear-gradient(to bottom, rgba(var(--kpy-base-rgb), 0.80) 0%, rgba(var(--kpy-base-rgb), 0.30) 45%, rgba(var(--kpy-base-rgb), 0.65) 100%); }
/* Top section: category badge, title, date */ .kpy-vg-card-top { position: relative; z-index: 3; padding: 22px 22px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.kpy-vg-badge { background: var(--kpy-orange); color: var(--kpy-white); font-family: var(--kpy-font-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px; border-radius: 0 0 8px 0; }
.kpy-vg-title { font-family: var(--kpy-font); font-size: 16px; font-weight: 700; color: var(--kpy-white); margin: 0; text-shadow: 1px 1px 4px rgba(var(--kpy-base-rgb), 0.7); letter-spacing: 0.5px; line-height: 1.4; text-transform: uppercase; }
.kpy-vg-date { font-family: var(--kpy-font-2); font-size: 12px; color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; gap: 5px; }
.kpy-vg-date i { color: var(--kpy-orange); }
/* Duration badge — top-right */ .kpy-vg-duration { position: absolute; top: 18px; right: 18px; z-index: 3; background: rgba(var(--kpy-base-rgb), 0.75); color: var(--kpy-white); font-family: var(--kpy-font-2); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 4px; display: flex; align-items: center; gap: 5px; }
.kpy-vg-duration i { color: var(--kpy-orange); font-size: 11px; }
/* Centre play button */ .kpy-vg-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); z-index: 4; width: 64px; height: 64px; background: rgba(var(--kpy-orange-rgb), 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--kpy-white); font-size: 22px; box-shadow: 0 6px 24px rgba(var(--kpy-orange-rgb), 0.55); transition: transform 0.3s, background 0.3s; }
.kpy-vg-card:hover .kpy-vg-play-btn { transform: translate(-50%, -50%) scale(1.15); background: var(--kpy-orange); }
.kpy-vg-play-btn i { margin-left: 4px; }
/* optical offset for play icon */ /* Source icon — bottom-right in the rounded corner */ .kpy-vg-source-icon { position: absolute; bottom: 18px; right: 18px; z-index: 4; width: 38px; height: 38px; background: rgba(var(--kpy-base-rgb), 0.65); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--kpy-white); font-size: 15px; transition: background 0.3s; }
.kpy-vg-card:hover .kpy-vg-source-icon { background: var(--kpy-primary); }
.kpy-vg-source-icon .fa-youtube { color: #ff4444; }
/* Pagination */ .kpy-vg-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.kpy-vg-page-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 0 0 12px 0; background: var(--kpy-light); color: var(--kpy-primary); font-family: var(--kpy-font-2); font-weight: 700; font-size: 14px; text-decoration: none; transition: background 0.25s, color 0.25s, transform 0.25s; }
.kpy-vg-page-btn:hover { background: var(--kpy-primary); color: var(--kpy-white); transform: translateY(-2px); }
.kpy-vg-page-btn.active { background: var(--kpy-orange); color: var(--kpy-white); cursor: default; pointer-events: none; }
/*========================================================== Video Modal — lightbox overlay ==========================================================*/ .kpy-vg-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; }
.kpy-vg-modal.is-open { visibility: visible; opacity: 1; }
/* Dark semi-transparent backdrop */ .kpy-vg-modal-backdrop { position: absolute; inset: 0; background: rgba(var(--kpy-base-rgb), 0.88); backdrop-filter: blur(4px); cursor: pointer; }
/* Modal panel */ .kpy-vg-modal-inner { position: relative; z-index: 2; width: 92%; max-width: 920px; background: var(--kpy-base); border-radius: 0 0 40px 0; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; animation: kpy-modal-in 0.35s cubic-bezier(.25, .8, .25, 1) both; }
.kpy-vg-modal.is-open .kpy-vg-modal-inner { animation: kpy-modal-in 0.35s cubic-bezier(.25, .8, .25, 1) both; }
@keyframes kpy-modal-in { from { opacity: 0; transform: translateY(30px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Header bar */ .kpy-vg-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; }
.kpy-vg-modal-title { font-family: var(--kpy-font); font-size: 14px; color: var(--kpy-white); letter-spacing: 2px; text-transform: uppercase; opacity: 0.9; flex: 1; margin-right: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Close button */ .kpy-vg-modal-close { width: 38px; height: 38px; border-radius: 50%; background: rgba(var(--kpy-orange-rgb), 0.85); border: none; color: var(--kpy-white); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.25s, transform 0.25s; }
.kpy-vg-modal-close:hover { background: var(--kpy-orange); transform: rotate(90deg) scale(1.1); }
/* 16:9 video container */ .kpy-vg-modal-body { padding: 0; flex: 1; overflow: hidden; }
.kpy-vg-video-wrap { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */ background: #000; }
.kpy-vg-video-wrap iframe, .kpy-vg-video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; }
/*========================================================== Responsive ==========================================================*/ @media (max-width: 1024px) { .kpy-vg-cols-3 { grid-template-columns: repeat(2, 1fr); }
.kpy-vg-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) { .kpy-vg-cols-2, .kpy-vg-cols-3, .kpy-vg-cols-4 { grid-template-columns: 1fr; }
.kpy-vg-card { height: 360px; }
.kpy-vg-modal-inner { width: 98%; border-radius: 0 0 24px 0; }
.kpy-vg-modal-title { font-size: 12px; }
}
@media (max-width: 480px) { .kpy-vg-container { padding: 0 12px; margin: 40px auto; }
.kpy-vg-play-btn { width: 52px; height: 52px; font-size: 18px; }
}
/** ========================================================= PARTNERS section ===============================================================**/ .partners { padding: 15px 10px; }
.partner { display: flex; overflow: hidden; position: relative; }
.partner .card { min-height: 100px; white-space: nowrap; animation: marquee-animation 10s linear infinite; }
.partner img { height: 100px; object-fit: contain; object-position: center; display: grid; gap: 10px; padding: 10px; width: 200px; }
@keyframes marquee-animation { 0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.marquee a { animation: marquee-animation 5s linear infinite; }
.partnerlist img { width: 100%; height: 100px; object-fit: contain; object-position: center; }
.urreno_assoc img { width: 100%; height: auto; }
.urreno_assoc h3 { font-size: 1rem; font-family: 'Roboto', sans-serif; letter-spacing: -.5px; }
.urreno_assoc .card { height: 200px; padding: 15px; margin-bottom: 20px; }
/** ============================================================ Publication Page CSS =============================================================**/ .downloads-category-menu { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
.category-menu-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 15px; }
.category-menu-list { list-style: none; padding: 0; margin: 0; }
.category-menu-item { margin-bottom: 8px; }
.category-menu-link { text-decoration: none; color: #333; display: flex; justify-content: space-between; padding: 10px; border-radius: 5px; transition: background 0.3s, color 0.3s; }
.category-menu-link:hover { background: #f0f0f0; color: #007bff; }
.category-count { background: #eee; padding: 2px 8px; border-radius: 10px; font-size: 0.85em; }
@media (max-width: 768px) { #downloads-table_wrapper { margin-left: 15px; margin-right: 15px; overflow-x: auto; }
.dataTables_length, .dataTables_filter { flex-direction: column; align-items: flex-start; gap: 5px; }
.dataTables_length label, .dataTables_filter label { font-size: 14px; flex-direction: column; align-items: flex-start; }
.dataTables_length select, .dataTables_filter input { width: 100%; font-size: 14px; }
#downloads-table th, #downloads-table td { padding: 10px; font-size: 14px; }
.pub-title { font-size: 18px; }
.pub-link p { font-size: 14px; }
.dataTables_paginate { flex-wrap: wrap; justify-content: center; }
.paginate_button { font-size: 13px; padding: 5px 8px; }
.downloads-category-menu { padding: 15px; }
.category-menu-title { font-size: 1rem; }
.category-menu-link { flex-direction: column; align-items: flex-start; gap: 4px; }
.category-count { font-size: 0.8em; align-self: flex-start; }
}
@media (max-width: 480px) { .pub-title { font-size: 16px; }
.dataTables_length, .dataTables_filter { font-size: 13px; }
.category-menu-title { font-size: 0.95rem; }
.category-menu-link { font-size: 14px; }
#downloads-table_wrapper { margin-left: 10px; margin-right: 10px; }
.dataTables_info { font-size: 12px; text-align: center; }
.category-menu-list { padding: 0; }
}
#downloads-table_wrapper { margin: 20px 0; margin-left: 50px; }
.dataTables_length, .dataTables_filter { margin-bottom: 15px; }
.dataTables_length label, .dataTables_filter label { display: flex; align-items: center; gap: 10px; }
.dataTables_length select, .dataTables_filter input { padding: 5px; border: 1px solid #ddd; border-radius: 4px; }
#downloads-table { width: 100%; border-collapse: collapse; }
#downloads-table th, #downloads-table td { padding: 12px 15px; border-bottom: 1px solid #e0e0e0; }
.pub-title { margin: 0; font-size: 20px; color: #1716a3; font-weight: 700; }
.dataTables_paginate { margin-top: 15px; display: flex; gap: 5px; }
.paginate_button { padding: 5px 10px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; }
.paginate_button.current { background: #f7a81b; color: white; border-color: #f7a81b; }
.paginate_button.disabled { opacity: 0.5; cursor: not-allowed; }
.pub-download a { color: #f7a81b; text-decoration: none; }
.pub-download a:hover { text-decoration: underline; }
/** ============================================================ Single Page Hero =============================================================**/ .header-wrap1 { min-height: 300px; padding-top: 150px; position: relative; }
.header-wrap1 h1 { font-weight: 700; text-shadow: 0 0 20px #000; width: 100%; color: var(--kpy-white); }
.header-wrap1 .breadcrumb { color: var(--kpy-white); position: relative; z-index: 10; display: block; top: -5px; font-size: 12px; font-weight: 400; }
.header-wrap1 .breadcrumb a { text-decoration: none; color: var(--kpy-white); }
.about-side { padding-left: 8%; border-left: 1px solid #ccc; position: sticky; top: 5%; }
/** ============================================================ Directory =============================================================**/ .publications { margin-bottom: 40px; }
#downloads-table { border-collapse: separate; border-spacing: 0 15px; margin-top: 20px; width: 100%; }
#downloads-table thead { display: none; }
#downloads-table tbody tr { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; background-color: #fff; border-radius: 8px; }
#downloads-table tbody tr:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); }
#downloads-table td { padding: 20px; vertical-align: top; border: none; }
.member-thumbnail { text-align: center; }
.member-thumbnail img { max-width: 100%; height: auto; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.member-title { font-size: 1.4rem; font-weight: 600; color: #333; margin-bottom: 10px; transition: color 0.3s ease; }
.member-title:hover { color: #0056b3; }
.pub-summ { font-size: 1rem; font-weight: 500; color: #555; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
.pub-desc { margin-bottom: 15px; color: #666; line-height: 1.6; }
.member-summ { background-color: #f9f9f9; padding: 12px !important; border-radius: 5px; margin-top: 10px; color: #555; line-height: 1.8; }
.member-summ small { display: block; margin-bottom: 3px; }
.member-summ strong { color: #444; }
.member-link { margin-top: 15px; }
.member-link a { display: inline-block; background-color: #0056b3; color: white; padding: 8px 20px; border-radius: 4px; text-decoration: none; font-weight: 500; transition: background-color 0.3s ease; }
.member-link a:hover { background-color: #003d82; text-decoration: none; }
.page-content2 { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.post-content { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 2rem; }
.pub-single { margin-bottom: 2rem; }
.post-thumbnail { overflow: hidden; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.post-thumbnail img { width: 100%; height: auto; transition: transform 0.3s ease; }
.post-thumbnail img:hover { transform: scale(1.02); }
/* Content styles */ .about-side-pub { padding-left: 1.5rem; }
h1.entry-title { font-size: 2.2rem; margin-bottom: 1rem; font-weight: 700; line-height: 1.2; }
h4.pub-summ { font-size: 1.25rem; margin-bottom: 0.75rem; color: #555; font-weight: 600; }
.pub-desc { margin-bottom: 1.5rem; color: #666; line-height: 1.6; }
hr { margin: 1.5rem 0; border-color: #eee; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 4px; transition: all 0.2s ease; }
.btn-facebook { background-color: #3b5998; color: white; }
.btn-facebook:hover { background-color: #2d4373; color: white; }
.btn-twitter { background-color: #1da1f2; color: white; }
.btn-twitter:hover { background-color: #0c85d0; color: white; }
.btn-whatsapp { background-color: #25D366; color: white; }
.btn-whatsapp:hover { background-color: #128C7E; color: white; }
.text-muted { color: #6c757d; }
/** ============================================================ Error 404 Page Not Found CSS =============================================================**/ .Error_404 { overflow: hidden; padding: 80px 0 120px; }
.Error_404 .error_pic { width: 35%; float: left; text-align: center; }
.Error_404 .error_pic i { color: #F72331; font-size: 250px; line-height: 250px; margin-right: .2em; text-align: center; font-variant: normal; text-transform: none; margin-left: .2em; }
.Error_404 .error_desk { width: 65%; float: left; padding-top: 40px; }
.Error_404 .error_desk h2 { font-size: 55px; line-height: 60px; color: #F72331; font-weight: 500; }
.Error_404 .error_desk h4 { font-size: 28px; line-height: 30px; }
.Error_404 .error_desk p .check { line-height: 45px; font-size: 16px; }
.Error_404 .error_desk p .button { padding: 13px 20px; margin: 0; border-radius: 5px; display: inline; margin-left: 10px; box-shadow: inset 0 0 0 0; }
.Error_404 .error_desk p .button:hover { color: #f9f9f9; text-decoration: none; background: #F72331; }
a.button, a.tp-button { transition: .2s all; background: transparent; color: #F72331; border: solid 2px; }
.wp-block-ub-tabbed-content-tab-title strong { font-weight: 500 !important; }
/*------------------------------------*\ RESPONSIVE \*------------------------------------*/ /* Mobile styles (up to 767px)@media only screen and (max-width: 768px */ @media only screen and (max-width: 600px) { .menu-section .logo { object-fit: contain !important; height: 70px; }
.menu-section .navbar-nav { height: 100%; display: flex; align-items: flex-start; gap: 5px; }
.menu-section .navbar-nav .nav-link { color: var(--kpy-black) !important; font-family: var(--kpy-font); font-weight: 400; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; height: 40px; display: flex; align-items: center; position: relative; transition: all 0.3s ease; padding: 0 0.5rem !important; }
.menu-section { height: 80px; position: relative; top: 0; z-index: 1000; background: #f7f7f7; height: 80px; display: flex; align-items: center; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 2px 10px rgba(0, 0, 0, 0); }
.intro-image-col { display: flex; flex-direction: column; align-items: center; padding-bottom: 20px; padding-top: 0; }
.message-heading { font-size: 25px; font-weight: 400; color: var(--kpy-primary); }
.president-img img { margin-bottom: 0; height: 250px; width: 100%; max-width: 100%; object-position: top; }
.president-message-text p { margin-top: 0; margin-bottom: 16px; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; }
.president-message-text { display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: calc(1.6em * 10); }
.message-button { display: block; padding-top: 10px; }
.rotary-content { padding: 15px; }
.rotary-header h1, .president-header h1 { font-size: 25px; }
.president-profile { flex-direction: column; justify-content: center; }
.president-photo { width: 200px; height: 200px; }
#downloads-table { border-spacing: 0; }
#downloads-table tr { display: flex; flex-direction: column; margin-bottom: 20px; }
#downloads-table td { width: 100% !important; display: block; padding: 15px; }
.member-thumbnail { margin-bottom: 15px; }
.project-image { height: 180px; }
.contact-page { margin: 20px 0; padding: 40px 0; }
.contact-form, .contact-info { padding: 25px; }
.contact-form { margin-bottom: 30px; }
.contact-info ul li strong { width: 70px; }
.map-container iframe { height: 250px; }
.footer-menus { gap: 5px; font-size: 12px; }
.footer-menus a { font-size: 12px; }
.footer-menus .social-links a { font-size: 18px; }
.donation-form-area { padding-left: 5%; padding-right: 5%; }
}
/* Tablet styles (768px to 1024px) */ @media only screen and (max-width: 1024px) and (min-width: 768px) {}
/* Large desktop styles (1140px and up) */ @media only screen and (min-width: 1140px) {}
/* Extra large desktop styles (1440px and up) */ @media only screen and (min-width: 1440px) {}
/* High DPI screens */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {}
/* Admin Styles */ .post-type-newsletter_sub .wp-list-table th.column-subscribed_date, .post-type-newsletter_sub .wp-list-table th.column-subscribed_ip { width: 15%; }
.post-type-newsletter_sub .wp-list-table .column-title { width: 40%; }
/*========================================================== NEWS & EVENTS SECTION (Homepage) ==========================================================*/ .uw-news-section { padding: 72px 5%; background: #fff; }
.uw-news-section-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 48px; }
.uw-news-heading { font-family: var(--kpy-font); font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 900; color: var(--kpy-primary); text-transform: uppercase; margin: 0 0 28px; letter-spacing: .04em; }
.uw-news-item { display: flex; gap: 16px; margin-bottom: 28px; align-items: flex-start; }
.uw-news-item__thumb { flex-shrink: 0; width: 90px; height: 72px; object-fit: cover; }
.uw-news-item__body {}
.uw-news-item__title { font-family: var(--kpy-font-2); font-size: .92rem; font-weight: 700; color: var(--kpy-base); margin: 0 0 4px; line-height: 1.4; }
.uw-news-item__title a { color: inherit; text-decoration: none; transition: color .2s; }
.uw-news-item__title a:hover { color: var(--kpy-secondary); }
.uw-news-item__date { font-family: var(--kpy-font-2); font-size: .78rem; color: var(--kpy-secondary); font-weight: 700; margin: 0 0 4px; }
.uw-news-item__excerpt { font-family: var(--kpy-font-2); font-size: .82rem; color: var(--kpy-grey); line-height: 1.55; margin: 0; }
.uw-news-readmore { font-family: var(--kpy-font-2); font-size: .82rem; font-weight: 700; color: var(--kpy-base); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.uw-news-readmore:hover { color: var(--kpy-secondary); }
.uw-stay-heading, .uw-events-heading { font-family: var(--kpy-font); font-size: 1.1rem; font-weight: 900; color: var(--kpy-primary); text-transform: uppercase; margin: 0 0 18px; letter-spacing: .04em; }
@media (max-width: 900px) { .uw-news-section-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .uw-news-section-inner { grid-template-columns: 1fr; }
}
/*========================================================== PARTNERS CAROUSEL (Homepage) ==========================================================*/ .uw-partners-section { padding: 52px 5%; background: #fff; border-top: 1px solid rgba(53, 57, 142, .08); }
.uw-partners-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.uw-partners-heading { font-family: var(--kpy-font); font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 900; color: var(--kpy-primary); text-transform: uppercase; margin: 0 0 32px; letter-spacing: .05em; }
.uw-partners-link { font-family: var(--kpy-font-2); font-size: .88rem; color: var(--kpy-base); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font-weight: 600; }
.uw-partners-link:hover { color: var(--kpy-secondary); }
/* .uw-partners-link::after removed — arrow already in HTML */ /*========================================================== WHO WE ARE SECTION — 50/50, centered text, side-margin dots ==========================================================*/ .uw-whoweare-section { background-color: #fff; padding: 76px 5%; width: 100%; position: relative; overflow: hidden; }
/* Left margin dot column */ .uw-whoweare-section::before { content: ''; position: absolute; top: 0; left: 0; width: 200px; height: 100%; background-image: radial-gradient(circle, #c5c9d4 2.5px, transparent 2.5px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, .45) 0%, transparent 100%); mask-image: linear-gradient(to right, rgba(0, 0, 0, .45) 0%, transparent 100%); pointer-events: none; z-index: 0; }
/* Right margin dot column */ .uw-whoweare-section::after { content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 100%; background-image: radial-gradient(circle, #c5c9d4 2.5px, transparent 2.5px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, .45) 0%, transparent 100%); mask-image: linear-gradient(to left, rgba(0, 0, 0, .45) 0%, transparent 100%); pointer-events: none; z-index: 0; }
.uw-whoweare-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 62px; align-items: center; position: relative; z-index: 1; }
/* Left column — everything center-aligned */ .uw-whoweare-text { display: flex; flex-direction: column; align-items: center; text-align: center; }
.uw-whoweare-heading { font-family: var(--kpy-font); font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 900; color: var(--kpy-primary, #35398e); text-transform: none; margin: 0 0 22px; letter-spacing: 0; text-align: center; line-height: 1.2; }
.uw-whoweare-lead { font-family: var(--kpy-font-2); font-size: .97rem; color: var(--kpy-grey, #5c6070); line-height: 1.8; margin-bottom: 24px; text-align: center; max-width: 440px; /* constrains text width — doesn't stretch full column */ }
/* Read More — centered, no underline */ .uw-readmore-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--kpy-font-2); font-size: .88rem; font-weight: 700; color: var(--kpy-primary, #35398e); text-decoration: none; border: none; padding: 0; transition: color .2s; }
.uw-readmore-btn:hover { color: var(--kpy-secondary, #00aeef); text-decoration: none; }
/* Right column — video embed, 16:9, subtle shadow */ .uw-video-embed-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 5px; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
.uw-video-embed-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
@media(max-width:768px) { .uw-whoweare-inner { grid-template-columns: 1fr; gap: 36px; }
.uw-whoweare-section { padding: 48px 5%; }
}
/*========================================================== PROGRAMMES SECTION ==========================================================*/ .uw-programmes-section { background: var(--kpy-primary); padding: 60px 5%; width: 100%; }
.uw-programmes-inner { max-width: 1200px; margin: 0 auto; }
.uw-programmes-heading { font-family: var(--kpy-font); font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 900; color: #fff; text-transform: uppercase; margin: 0 0 32px; letter-spacing: .05em; }
.uw-programmes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.uw-prog-card { position: relative; border-radius: 16px; overflow: hidden; height: 360px; display: block; text-decoration: none; }
.uw-prog-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.uw-prog-card:hover .uw-prog-card__img { transform: scale(1.06); }
.uw-prog-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 29, 78, .88) 0%, rgba(26, 29, 78, .18) 55%, transparent 100%); }
.uw-prog-card__label { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 18px; font-family: var(--kpy-font); font-size: .95rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; }
@media(max-width:900px) { .uw-programmes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:540px) { .uw-programmes-grid { grid-template-columns: 1fr; }
.uw-prog-card { height: 260px; }
}
/*========================================================== NEWS & EVENTS SECTION ==========================================================*/ .uw-newsevents-section { background: #fff; padding: 64px 5%; width: 100%; }
.uw-newsevents-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; align-items: start; }
.uw-newsevents-heading { font-family: var(--kpy-font); font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 900; color: var(--kpy-primary); text-transform: uppercase; margin: 0 0 28px; letter-spacing: .04em; }
.uw-newsevents-col-heading { font-family: var(--kpy-font); font-size: 1.1rem; font-weight: 900; color: var(--kpy-primary); text-transform: uppercase; margin: 0 0 18px; letter-spacing: .04em; }
/* News rows */ .uw-news-row { display: flex; gap: 16px; margin-bottom: 28px; align-items: flex-start; }
.uw-news-row__thumb { width: 90px; height: 72px; object-fit: cover; flex-shrink: 0; }
.uw-news-row__thumb-link { flex-shrink: 0; }
.uw-news-row__date { font-family: var(--kpy-font-2); font-size: .78rem; font-weight: 700; color: var(--kpy-secondary); display: block; margin-bottom: 4px; }
.uw-news-row__title { font-family: var(--kpy-font-2); font-size: .92rem; font-weight: 700; color: var(--kpy-base); margin: 0 0 6px; line-height: 1.4; }
.uw-news-row__title a { color: inherit; text-decoration: none; transition: color .2s; }
.uw-news-row__title a:hover { color: var(--kpy-secondary); }
.uw-news-row__excerpt { font-family: var(--kpy-font-2); font-size: .82rem; color: var(--kpy-grey); line-height: 1.55; margin: 0 0 6px; }
.uw-news-row__readmore { font-family: var(--kpy-font-2); font-size: .8rem; font-weight: 700; color: var(--kpy-base); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.uw-news-row__readmore:hover { color: var(--kpy-secondary); }
/* Stay connected */ .uw-twitter-link { font-family: var(--kpy-font-2); font-size: .88rem; color: var(--kpy-secondary); text-decoration: none; }
.uw-twitter-link:hover { text-decoration: underline; }
/* Event rows */ .uw-event-row { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(53, 57, 142, .08); }
.uw-event-row:last-child { border-bottom: none; }
.uw-event-row__date { font-family: var(--kpy-font-2); font-size: .78rem; font-weight: 700; color: var(--kpy-secondary); margin-bottom: 4px; }
.uw-event-row__title { font-family: var(--kpy-font-2); font-size: .9rem; font-weight: 700; color: var(--kpy-base); margin: 0 0 4px; line-height: 1.4; }
.uw-event-row__title a { color: inherit; text-decoration: none; transition: color .2s; }
.uw-event-row__title a:hover { color: var(--kpy-secondary); }
.uw-event-row__loc { font-family: var(--kpy-font-2); font-size: .78rem; color: var(--kpy-grey); display: flex; align-items: center; gap: 4px; }
@media(max-width:960px) { .uw-newsevents-inner { grid-template-columns: 1fr 1fr; }
.uw-newsevents-news { grid-column: 1/-1; }
}
@media(max-width:600px) { .uw-newsevents-inner { grid-template-columns: 1fr; gap: 32px; }
.uw-newsevents-section { padding: 48px 5%; }
}
/*========================================================== DEVELOPMENT PARTNERS SECTION ==========================================================*/ .uw-partners-section { background: #fff; padding: 52px 5%; border-top: 1px solid rgba(53, 57, 142, .08); width: 100%; }
.uw-partners-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.uw-partners-heading { font-family: var(--kpy-font); font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 900; color: var(--kpy-primary); text-transform: uppercase; margin: 0 0 32px; letter-spacing: .05em; }
.uw-partners-track-wrap { position: relative; overflow: hidden; }
.uw-partners-track { display: flex; align-items: center; gap: 40px; /* No CSS transition — JS requestAnimationFrame drives the scroll */ will-change: transform; }
.uw-partners-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.uw-partners-logo img { max-height: 60px; max-width: 160px; width: auto; object-fit: contain; filter: grayscale(40%); transition: filter .3s, transform .3s; }
.uw-partners-logo:hover img { filter: grayscale(0%); transform: scale(1.06); }
.uw-partners-prev, .uw-partners-next { position: absolute; top: 50%; transform: translateY(-50%); background: #fff; border: 1px solid rgba(53, 57, 142, .18); color: var(--kpy-primary); width: 36px; height: 36px; border-radius: 50%; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: background .2s, color .2s; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.uw-partners-prev { left: 0; }
.uw-partners-next { right: 0; }
.uw-partners-prev:hover, .uw-partners-next:hover { background: var(--kpy-primary); color: #fff; }
.uw-partners-cta { margin-top: 28px; }
.uw-partners-link { font-family: var(--kpy-font-2); font-size: .88rem; font-weight: 700; color: var(--kpy-base); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.uw-partners-link:hover { color: var(--kpy-secondary); }
/*========================================================== PUBLICATIONS LISTING PAGE ==========================================================*/ .uw-pub-wrap { max-width: 1160px; margin: 0 auto; padding: 40px 5% 72px; }
/*-- Category filter tabs --*/ .uw-pub-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; border-bottom: 1px solid rgba(53, 57, 142, .14); padding-bottom: 14px; }
.uw-pub-tab { font-family: var(--kpy-font-2); font-size: .8rem; font-weight: 700; color: var(--kpy-base); text-decoration: none; padding: 7px 14px; border: 1px solid rgba(53, 57, 142, .18); border-radius: 999px; transition: background .2s, color .2s, border-color .2s, transform .2s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.uw-pub-tab:hover { background: var(--kpy-primary); color: #fff; border-color: var(--kpy-primary); transform: translateY(-1px); }
.uw-pub-tab--active { background: var(--kpy-primary); color: #fff; border-color: var(--kpy-primary); }
.uw-pub-tab__count { background: rgba(255, 255, 255, .25); border-radius: 10px; padding: 1px 6px; font-size: .7rem; }
.uw-pub-tab--active .uw-pub-tab__count { background: rgba(255, 255, 255, .3); }
/*-- Publications grid — 3-column horizontal cards (matches screenshot) --*/ .uw-pub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Each card: horizontal flex — thumbnail left, text right */ .uw-pub-card { background: #fff; border: 1px solid #e4e8f0; border-radius: 6px; display: flex; flex-direction: row; align-items: flex-start; gap: 0; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.uw-pub-card:hover { box-shadow: 0 6px 20px rgba(53, 57, 142, .12); transform: translateY(-2px); }
/* Thumbnail — fixed width on the left */ .uw-pub-card__img-link { display: block; flex-shrink: 0; width: 110px; min-height: 120px; background: #f0f2f8; overflow: hidden; }
.uw-pub-card__img { width: 110px; height: 130px; object-fit: cover; display: block; transition: transform .3s; }
.uw-pub-card:hover .uw-pub-card__img { transform: scale(1.04); }
/* Body — text content to the right of thumbnail */ .uw-pub-card__body { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.uw-pub-card__cat { font-family: var(--kpy-font-2); font-size: .68rem; font-weight: 700; color: var(--kpy-secondary); text-transform: uppercase; letter-spacing: .06em; display: block; }
.uw-pub-card__title { font-family: var(--kpy-font-2); font-size: .86rem; font-weight: 700; color: var(--kpy-base); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-transform: none !important; letter-spacing: 0 !important; }
.uw-pub-card__title a { color: inherit; text-decoration: none; transition: color .2s; }
.uw-pub-card__title a:hover { color: var(--kpy-primary); }
/* Downloads count in orange — matches screenshot */ .uw-pub-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.uw-pub-card__downloads { font-family: var(--kpy-font-2); font-size: .78rem; color: var(--kpy-orange, #e05a2b); font-weight: 700; }
.uw-pub-card__size { font-family: var(--kpy-font-2); font-size: .75rem; color: var(--kpy-grey); font-weight: 600; }
/*-- Pagination --*/ .uw-pub-pagination { display: flex; gap: 4px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.uw-pub-page-btn { font-family: var(--kpy-font-2); font-size: .82rem; font-weight: 700; padding: 7px 13px; border: 1px solid rgba(53, 57, 142, .2); border-radius: 3px; color: var(--kpy-base); text-decoration: none; transition: background .2s, color .2s; }
.uw-pub-page-btn--active, .uw-pub-page-btn:hover { background: var(--kpy-primary); color: #fff; border-color: var(--kpy-primary); }
.uw-pub-empty { padding: 60px 0; text-align: center; color: var(--kpy-grey); font-family: var(--kpy-font-2); }
@media(max-width:900px) { .uw-pub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:768px) { .uw-pub-tabs { gap: 4px; }
}
@media(max-width:480px) { .uw-pub-grid { grid-template-columns: 1fr; }
}
/*========================================================== SINGLE PUBLICATION (single-downloads.php) ==========================================================*/ .uw-pub-single-wrap { padding: 44px 2% 60px; background: linear-gradient(180deg, #f7f9fe 0%, #ffffff 100%); }
.uw-pub-single-layout { max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(200px, 220px) minmax(0, 1fr) minmax(250px, 290px); gap: 28px; align-items: start; }
/*-- Cover image --*/ .uw-pub-single-cover { border: 1px solid rgba(53, 57, 142, .12); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 24px rgba(53, 57, 142, .08); background: #fff; }
.uw-pub-single-cover__img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 3 / 4; }
/*-- Summary --*/ .uw-pub-single-summary__heading { font-family: var(--kpy-font); font-size: 1.3rem; font-weight: 900; color: var(--kpy-primary); text-transform: none; letter-spacing: 0; margin: 0 0 14px; }
.uw-pub-single-summary__content p { font-family: var(--kpy-font-2); font-size: .95rem; color: var(--kpy-grey); line-height: 1.8; margin-bottom: 14px; }
/*-- Share buttons --*/ .uw-pub-single-share { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.uw-pub-single-share__label { font-family: var(--kpy-font-2); font-size: .8rem; font-weight: 700; color: var(--kpy-grey); }
.uw-pub-share-btn { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; color: #fff; text-decoration: none; transition: opacity .2s; }
.uw-pub-share-btn--fb { background: #1877f2; }
.uw-pub-share-btn--tw { background: #000; }
.uw-pub-share-btn--wa { background: #25d366; }
.uw-pub-share-btn:hover { opacity: .82; }
/*-- Stats sidebar --*/ .uw-pub-single-stats { border: 1px solid rgba(53, 57, 142, .12); border-radius: 18px; overflow: hidden; padding: 0; background: #fff; box-shadow: 0 10px 24px rgba(53, 57, 142, .08); }
.uw-pub-stats-table { width: 100%; border-collapse: collapse; }
.uw-pub-stats-table tr { border-bottom: 1px solid rgba(53, 57, 142, .1); }
.uw-pub-stats-table tr:last-child { border-bottom: none; }
.uw-pub-stats-table__label { font-family: var(--kpy-font-2); font-size: .82rem; color: var(--kpy-grey); padding: 12px 16px; width: 50%; }
.uw-pub-stats-table__val { font-family: var(--kpy-font-2); font-size: .82rem; font-weight: 700; padding: 12px 16px; text-align: right; }
.uw-pub-stats-table__val--dark { background: var(--kpy-primary); color: #fff; }
.uw-pub-stats-table__val--blue { background: var(--kpy-secondary); color: #fff; }
/*-- Download button --*/ .uw-pub-download-btn { display: block; background: var(--kpy-secondary); color: #fff; font-family: var(--kpy-font-2); font-size: .9rem; font-weight: 700; text-align: center; text-decoration: none; letter-spacing: .12em; padding: 14px 16px; margin: 16px; border-radius: 999px; transition: background .2s; }
.uw-pub-download-btn:hover { background: var(--kpy-primary); color: #fff; }
.uw-pub-wpdm-widget { padding: 12px 16px; }
/*-- Related Publications --*/ .uw-pub-related { background: #eef3fb; padding: 48px 2% 64px; }
.uw-pub-related-inner { max-width: 100%; margin: 0 auto; }
.uw-pub-related-heading { font-family: var(--kpy-font); font-size: 1.25rem; font-weight: 900; color: var(--kpy-primary); text-transform: uppercase; margin: 0 0 24px; letter-spacing: .04em; }
.uw-pub-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.uw-pub-rel-card { display: flex; gap: 14px; align-items: flex-start; background: #fff; padding: 14px; text-decoration: none; border: 1px solid rgba(53, 57, 142, .1); border-radius: 14px; transition: box-shadow .2s, transform .2s; }
.uw-pub-rel-card:hover { box-shadow: 0 6px 18px rgba(53, 57, 142, .12); transform: translateY(-2px); }
.uw-pub-rel-card__thumb { flex-shrink: 0; width: 80px; height: 80px; overflow: hidden; border-radius: 10px; }
.uw-pub-rel-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uw-pub-rel-card__title { font-family: var(--kpy-font-2); font-size: .85rem; font-weight: 700; color: var(--kpy-base); margin: 0 0 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.uw-pub-rel-card__downloads { font-family: var(--kpy-font-2); font-size: .75rem; color: var(--kpy-secondary); font-weight: 700; }
@media(max-width:900px) { .uw-pub-single-layout { grid-template-columns: 160px 1fr; }
.uw-pub-single-stats { grid-column: 1/-1; }
.uw-pub-related-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:600px) { .uw-pub-single-layout { grid-template-columns: 1fr; }
.uw-pub-single-wrap { padding: 32px 2% 40px; }
.uw-pub-related-grid { grid-template-columns: 1fr; }
}
/*========================================================== ANNOUNCEMENT POPUP ==========================================================*/ .kipya-announcement { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 99998; background: var(--kpy-secondary); align-items: center; justify-content: center; }
.kipya-announcement__inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 12px 5%; display: flex; align-items: center; gap: 16px; }
.kipya-announcement__text { font-family: var(--kpy-font-2); font-size: .88rem; color: #fff; margin: 0; flex: 1; line-height: 1.5; }
.kipya-announcement__text a { color: #fff; text-decoration: underline; }
.kipya-announcement__close { background: rgba(255, 255, 255, .2); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 1rem; flex-shrink: 0; transition: background .2s; }
.kipya-announcement__close:hover { background: rgba(255, 255, 255, .4); }
/*========================================================== LOGO ROW (logo showcase shortcode) ==========================================================*/ .kipya-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; justify-content: center; padding: 24px 0; }
.kipya-logo-item img { max-height: 60px; max-width: 160px; width: auto; object-fit: contain; filter: grayscale(40%); transition: filter .3s, transform .3s; }
.kipya-logo-item:hover img { filter: grayscale(0%); transform: scale(1.06); }
/*========================================================== GUTENBERG HOMEPAGE BLOCKS CONTAINER Removes default WP max-width constraints ==========================================================*/ .uw-homepage-blocks { width: 100%; overflow-x: hidden; }
.uw-homepage-blocks .wp-block-group { max-width: 100% !important; }
.uw-homepage-blocks .wp-block-columns { max-width: 100% !important; }
.uw-homepage-blocks .alignfull { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.uw-homepage-blocks .alignwide { max-width: 1200px; margin-left: auto !important; margin-right: auto !important; }
/*-- Block style overrides (is-style-* classes) --*/ .uw-homepage-blocks .is-style-uw-dark-section, .wp-block-group.is-style-uw-dark-section { background: var(--kpy-primary) !important; padding: 64px 5%; }
.uw-homepage-blocks .is-style-uw-dark-section h1, .uw-homepage-blocks .is-style-uw-dark-section h2, .uw-homepage-blocks .is-style-uw-dark-section h3, .uw-homepage-blocks .is-style-uw-dark-section p { color: #fff !important; }
.uw-homepage-blocks .is-style-uw-blue-section, .wp-block-group.is-style-uw-blue-section { background: var(--kpy-secondary) !important; padding: 64px 5%; }
.uw-homepage-blocks .is-style-uw-blue-section h1, .uw-homepage-blocks .is-style-uw-blue-section h2, .uw-homepage-blocks .is-style-uw-blue-section p { color: #fff !important; }
.uw-homepage-blocks .is-style-uw-light-section, .wp-block-group.is-style-uw-light-section { background: var(--kpy-light) !important; padding: 64px 5%; }
.uw-homepage-blocks .is-style-uw-who-we-are { padding: 72px 5%; background: #fff; }
.uw-homepage-blocks .is-style-uw-programmes { background: var(--kpy-primary) !important; padding: 60px 5%; }
.uw-homepage-blocks .is-style-uw-newsevents { background: #fff; padding: 64px 5%; }
/*-- Section headings via is-style --*/ .is-style-uw-section-heading { font-family: var(--kpy-font) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: .05em !important; color: var(--kpy-primary) !important; }
.is-style-uw-section-heading-white { font-family: var(--kpy-font) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: .05em !important; color: #fff !important; }
.is-style-uw-section-heading-blue { font-family: var(--kpy-font) !important; font-weight: 900 !important; text-transform: uppercase !important; color: var(--kpy-secondary) !important; }
.is-style-kpy-eyebrow { font-family: var(--kpy-font-2) !important; font-size: .8rem !important; font-weight: 700 !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--kpy-orange) !important; }
.is-style-uw-lead-text { font-size: 1.05rem !important; line-height: 1.8 !important; color: var(--kpy-base) !important; }
/*-- Button block styles --*/ .wp-block-button.is-style-uw-btn-primary .wp-block-button__link { background: var(--kpy-orange); color: #fff; border-radius: 0; padding: 13px 30px; font-family: var(--kpy-font-2); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border: none; transition: background .2s; }
.wp-block-button.is-style-uw-btn-primary .wp-block-button__link:hover { background: #b84a22; }
.wp-block-button.is-style-uw-btn-outline .wp-block-button__link { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .75); padding: 13px 30px; font-family: var(--kpy-font-2); font-weight: 700; text-transform: uppercase; transition: background .2s, color .2s; }
.wp-block-button.is-style-uw-btn-outline .wp-block-button__link:hover { background: #fff; color: var(--kpy-primary); }
.wp-block-button.is-style-uw-readmore-btn .wp-block-button__link { background: transparent; color: var(--kpy-primary); border: none; border-bottom: 2px solid var(--kpy-secondary); padding: 4px 0; font-family: var(--kpy-font-2); font-weight: 700; border-radius: 0; }
/*-- Image styles --*/ .wp-block-image.is-style-uw-rounded-br img { border-radius: 0 0 30px 0 !important; }
/*-- Programme card columns (4-up) --*/ .is-style-uw-prog-cols.wp-block-columns { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
.is-style-uw-prog-cols .wp-block-column { position: relative; overflow: hidden; border-radius: 16px; min-height: 360px; }
.is-style-uw-prog-cols .wp-block-column img { width: 100%; height: 360px; object-fit: cover; display: block; transition: transform .4s; }
.is-style-uw-prog-cols .wp-block-column:hover img { transform: scale(1.06); }
/*-- About 2-column --*/ .is-style-uw-about-cols.wp-block-columns { align-items: center !important; gap: 60px !important; max-width: 1200px; margin: 0 auto !important; padding: 0 5%; }
/*-- Video embed --*/ .uw-homepage-blocks .wp-block-embed__wrapper iframe, .uw-video-embed-wrap iframe { width: 100%; border-radius: 4px; }
.wp-block-embed.is-type-video .wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
@media(max-width:900px) { .is-style-uw-prog-cols.wp-block-columns { grid-template-columns: repeat(2, 1fr) !important; }
}
@media(max-width:540px) { .is-style-uw-prog-cols.wp-block-columns { grid-template-columns: 1fr !important; }
.is-style-uw-about-cols.wp-block-columns { flex-direction: column !important; gap: 32px !important; }
}
/* ================================================================ WHO WE ARE — dotted decorative background pattern Matches the reference image: light grey dots on white bg ================================================================ */ .uw-wwa-section, .wp-block-group.uw-wwa, section.uw-wwa { position: relative; }
/* Applied via Gutenberg additional CSS class "uw-wwa" on the Who We Are block group — dot pattern removed for clean white bg */ .uw-wwa::before, .uw-wwa-section::before { content: none; }
.uw-wwa>*, .uw-wwa-section>* { position: relative; z-index: 1; }
/* WHO WE ARE — Cards, labels and framed image to match screenshots */ .uw-wwa-values__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; max-width: 1200px; margin: 18px auto 0; }
.uw-wwa-value-card { background: #fafbff; border: 1px solid rgba(53, 57, 142, .06); padding: 28px 22px 30px; text-align: center; transition: box-shadow .25s, transform .25s; border-radius: 6px; box-shadow: 0 6px 18px rgba(53, 57, 142, .06); }
.uw-wwa-value-card__icon { width: 48px; height: 48px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; }
.uw-wwa-value-card__label { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); color: var(--kpy-secondary, #00aeef); font-weight: 800; font-size: 1.05rem; margin-top: 6px; }
.uw-wwa-value-card__rule { width: 46px; height: 3px; background: var(--kpy-primary, #35398e); margin: 10px auto; }
.uw-wwa-value-card__body { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .92rem; color: #444; line-height: 1.7; margin-top: 8px; }
/* Right-side framed image for 'What We Believe in' */ .uw-wwa-believe__aside { display: block; max-width: 220px; margin-left: auto; border: 6px solid var(--kpy-secondary, #00aeef); padding: 8px; background: #fff; }
.uw-wwa-believe__aside img { display: block; width: 100%; height: auto; box-shadow: 0 6px 18px rgba(53, 57, 142, .12); }
@media (max-width: 900px) { .uw-wwa-values__grid { grid-template-columns: repeat(2, 1fr); }
.uw-wwa-believe__aside { margin: 24px auto 0; max-width: 320px; }
}
@media (max-width: 540px) { .uw-wwa-values__grid { grid-template-columns: 1fr; }
.uw-wwa-believe__aside { margin: 18px auto 0; max-width: 260px; }
}
/* Wider dot-grid utility class usable on any block group */ .kpy-dot-bg { position: relative; overflow: hidden; }
.kpy-dot-bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle, rgba(53, 57, 142, .10) 2px, transparent 2px); background-size: 32px 32px; }
.kpy-dot-bg>* { position: relative; z-index: 1; }
/* ================================================================ PROGRAMMES CARDS — rounded corners + white border Matches the reference image: tall photo cards with label overlay, rounded on all corners, white border/outline, spaced evenly ================================================================ */ /* The programme photo cards built with core/cover or custom .hv-ministry-card — apply to both */ .hv-ministry-card, .uw-prog-card { border-radius: 14px !important; border: 3px solid #fff !important; box-shadow: 0 6px 24px rgba(0, 0, 0, .15) !important; overflow: hidden !important; }
/* Gutenberg core/cover blocks inside programmes sections */ .wp-block-cover.uw-prog-card, .uw-programmes-grid .wp-block-cover { border-radius: 14px !important; border: 3px solid #fff !important; box-shadow: 0 6px 24px rgba(0, 0, 0, .15) !important; overflow: hidden !important; }
/* Programmes section wrapper — ensure proper grid spacing */ .uw-programmes-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; padding: 0 5% !important; }
@media (max-width: 1024px) { .uw-programmes-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) { .uw-programmes-grid { grid-template-columns: 1fr !important; }
}
/* ================================================================ MENU — fine-tune logo card to exactly match reference image White badge hanging below nav with rounded bottom corners ================================================================ */ .hv-logo-card { padding: 8px 18px 18px !important; margin-bottom: -16px !important; border-radius: 0 0 14px 14px !important; box-shadow: 0 8px 28px rgba(53, 57, 142, .18) !important; min-width: 108px; }
.hv-logo-img { height: 58px !important; width: 58px !important; }
/* CONTACT button — cyan/teal, matches reference */ .hv-btn--contact { background: #00aeef !important; color: #fff !important; font-weight: 800 !important; letter-spacing: .8px !important; }
/* DONATE button — dark navy with person icon, matches reference */ .hv-btn--donate { background: #35398e !important; color: #fff !important; font-weight: 800 !important; letter-spacing: .8px !important; }
/* ================================================================ PROGRAMS PAGE — precise match to screenshot Hero: dark navy overlay, title bottom-left, breadcrumb bar below. Objective: left text col + right image (rounded bottom-right). Accordion: navy trigger bar, open = white panel with numbered list. Collapsed items: lighter navy (#4a4f9a), open stays #35398e/2a2e72. ================================================================ */ /* -- Hero -- */ .prog-hero { position: relative; min-height: 280px; background-size: cover; background-position: center top; display: flex; align-items: flex-end; overflow: hidden; }
.prog-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(26, 29, 78, .5) 0%, rgba(26, 29, 78, .85) 100%); display: flex; align-items: flex-end; width: 100%; z-index: 1; }
.prog-hero__content { position: relative; z-index: 2; max-width: 1400px; width: 100%; margin: 0 auto; padding: 36px clamp(24px, 4.5vw, 88px) 24px; }
.prog-hero__title { font-family: var(--kpy-font); font-size: clamp(1.2rem, 2.8vw, 1.85rem); font-weight: 800; color: #fff; margin: 0 0 14px; line-height: 1.25; max-width: 760px; text-transform: none; letter-spacing: .01em; }
/* Breadcrumb bar — solid navy strip immediately below hero */ .prog-breadbar { background: var(--kpy-primary, #35398e); width: 100%; }
.prog-breadbar__inner { max-width: 1200px; margin: 0 auto; padding: 10px 5%; font-family: var(--kpy-font-2); font-size: .82rem; color: rgba(255, 255, 255, .82); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.prog-breadbar__inner a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.prog-breadbar__inner a:hover { color: #fff; text-decoration: underline; }
.prog-breadbar__sep { color: rgba(255, 255, 255, .4); margin: 0 2px; }
.prog-breadbar__inner span:last-child { color: rgba(255, 255, 255, .65); }
/* -- Content wrap -- */ .prog-content-wrap { max-width: 1100px; margin: 0 auto; padding: 52px 5% 72px; }
.prog-article .entry-content { max-width: 100% !important; }
/* -- Strategic Objective section -- */ .prog-objective { padding: 0 0 44px; border-bottom: 1px solid rgba(53, 57, 142, .1); margin-bottom: 40px; }
.prog-objective .wp-block-columns { align-items: center !important; gap: 52px !important; }
.prog-objective .wp-block-column:first-child { flex-basis: 52% !important; }
.prog-objective .wp-block-column:last-child { flex-basis: 45% !important; }
/* Section heading with cyan underline */ .prog-section-title { font-family: var(--kpy-font) !important; font-size: clamp(1.3rem, 2.4vw, 1.9rem) !important; font-weight: 800 !important; color: var(--kpy-primary, #35398e) !important; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem !important; position: relative; padding-bottom: 0 !important; }
.prog-section-title::after { content: ''; display: block; width: 46px; height: 3px; background: var(--kpy-secondary, #00aeef); margin-top: 12px; border-radius: 2px; }
/* Section body text */ .prog-section-text { font-family: var(--kpy-font-2) !important; font-size: .97rem !important; color: #444 !important; line-height: 1.78 !important; margin-top: 18px !important; }
/* Side image — rounded bottom-right only */ .prog-section-img img, .prog-section-img figure img { border-radius: 0 0 40px 0 !important; width: 100% !important; height: auto !important; object-fit: cover !important; display: block !important; box-shadow: 0 8px 28px rgba(0, 0, 0, .12) !important; max-height: 380px !important; }
/* -- Accordion -- */ .prog-accordion { margin-top: 36px; }
.prog-accordion-item { border: 1px solid rgba(53, 57, 142, .15); margin-bottom: 10px; border-radius: 4px; overflow: hidden; }
/* Trigger heading (wraps the button, zero-size) */ .prog-accordion-trigger { margin: 0 !important; padding: 0 !important; font-size: 0 !important; }
/* The nav button — default: lighter blue-purple for collapsed */ .prog-accordion-btn { width: 100%; background: #4a4f9a; color: #fff; border: none; padding: 16px 20px 16px 22px; font-family: var(--kpy-font); font-size: clamp(.83rem, 1.8vw, .97rem); font-weight: 700; text-align: left; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; letter-spacing: .015em; transition: background .2s; line-height: 1.35; }
.prog-accordion-btn:hover { background: #35398e; }
/* Open state: full navy */ .prog-accordion-item--open .prog-accordion-btn { background: #35398e; }
/* Chevron icon */ .prog-accordion-icon { flex-shrink: 0; width: 22px; height: 22px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; transition: transform .25s; }
.prog-accordion-icon::after { content: '\2303'; color: #fff; font-size: .85rem; line-height: 1; transform: rotate(180deg); display: block; }
.prog-accordion-item--open .prog-accordion-icon { transform: rotate(180deg); }
/* Panel */ .prog-accordion-panel { padding: 22px 24px 26px; background: #fff; border-top: 1px solid rgba(53, 57, 142, .1); font-family: var(--kpy-font-2); font-size: .9rem; line-height: 1.78; color: #222; }
.prog-accordion-panel[hidden] { display: none; }
/* "Key Strategic Actions:" bold subtitle inside panel */ .prog-panel-subtitle { font-family: var(--kpy-font-2) !important; font-size: .9rem !important; font-weight: 700 !important; color: var(--kpy-base, #1a1d4e) !important; margin-bottom: 10px !important; }
/* Numbered list items in panel */ .prog-accordion-panel ol { padding-left: 0; list-style: none; margin: 0; counter-reset: prog-list; }
.prog-accordion-panel ol li { padding: 4px 0; counter-increment: prog-list; color: #333; font-size: .9rem; }
.prog-accordion-panel ol li::before { content: counter(prog-list)'. '; font-weight: 700; color: var(--kpy-base); }
.prog-accordion-panel p { margin-bottom: 8px; color: #444; }
.prog-accordion-panel ul li { list-style: disc; margin-left: 18px; }
/* -- Responsive -- */ @media(max-width:900px) { .prog-hero { min-height: 260px; }
.prog-content-wrap { padding: 36px 5% 52px; }
.prog-objective .wp-block-columns { flex-direction: column !important; }
.prog-objective .wp-block-column { flex-basis: 100% !important; }
}
@media(max-width:600px) { .prog-hero__title { font-size: 1.1rem; }
.prog-accordion-btn { font-size: .8rem; padding: 13px 14px; }
.prog-accordion-panel { padding: 16px 14px 20px; }
}
/* ================================================================ HOMEPAGE — news section using [all_news] output via PHP The kpy-news-card grid is already styled; add section wrapper. ================================================================ */ .uw-homepage-news { padding: 64px 5%; background: #fff; width: 100%; }
.uw-homepage-news-inner { max-width: 1200px; margin: 0 auto; }
.uw-homepage-news-heading { font-family: var(--kpy-font); font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 900; color: var(--kpy-primary); text-transform: uppercase; margin: 0 0 32px; letter-spacing: .05em; }
/* Limit grid to 3 cards on homepage */ .uw-homepage-news .kpy-news-grid { grid-template-columns: repeat(3, 1fr); }
.uw-homepage-news .kpy-news-card { height: 400px; }
@media(max-width:900px) { .uw-homepage-news .kpy-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:600px) { .uw-homepage-news .kpy-news-grid { grid-template-columns: 1fr; }
}
/* ================================================================ NEWS & UPDATES ARCHIVE PAGE — template-news.php 4-column card grid matching uwonet.or.ug/news-updates/ Classes: .uw-news-archive, .uw-news-grid4, .uw-news-card + modifiers ================================================================ */ .uw-news-archive { background: #fff; padding: 48px 5% 64px; width: 100%; }
.uw-news-archive__inner { max-width: 1200px; margin: 0 auto; }
/* 4-column grid */ .uw-news-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px; }
/* Card */ .uw-news-card { background: #fff; border: 1px solid #e8edf6; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.uw-news-card:hover { box-shadow: 0 8px 28px rgba(53, 57, 142, .13); transform: translateY(-3px); }
/* Thumbnail */ .uw-news-card__img-link { display: block; overflow: hidden; aspect-ratio: 16 / 10; flex-shrink: 0; }
.uw-news-card__img-link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.uw-news-card:hover .uw-news-card__img-link img { transform: scale(1.05); }
/* Body */ .uw-news-card__body { padding: 16px 16px 20px; display: flex; flex-direction: column; flex: 1; }
.uw-news-card__body h3 { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .92rem; font-weight: 700 !important; color: var(--kpy-base, #1a1d4e); margin: 0 0 8px; line-height: 1.4; text-transform: none !important; }
.uw-news-card__body h3 a { color: inherit; text-decoration: none; transition: color .18s; }
.uw-news-card__body h3 a:hover { color: var(--kpy-primary, #35398e); }
.uw-news-card__date { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .76rem !important; color: var(--kpy-secondary, #00aeef) !important; font-weight: 400 !important; margin: 0 0 8px; display: flex; align-items: center; gap: 5px; }
.uw-news-card__excerpt { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem !important; color: var(--kpy-grey, #5c6070) !important; line-height: 1.65 !important; margin: 0 0 12px; font-weight: 400 !important; flex: 1; }
.uw-news-card__readmore { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; font-weight: 700 !important; color: var(--kpy-primary, #35398e); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-top: auto; transition: color .18s; }
.uw-news-card__readmore:hover { color: var(--kpy-secondary, #00aeef); }
.uw-news-empty { text-align: center; padding: 60px 20px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); color: var(--kpy-grey, #5c6070); font-size: 1rem; }
/* Responsive */ @media (max-width: 1024px) { .uw-news-grid4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) { .uw-news-grid4 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.uw-news-archive { padding: 32px 4% 48px; }
}
@media (max-width: 480px) { .uw-news-grid4 { grid-template-columns: 1fr; }
}
/* ================================================================ WHO WE ARE PAGE — template-who-we-are.php Matches uwonet.or.ug/about/who-we-are exactly ================================================================ */ /* -- SECTION 1: About UWONET -- */ .uw-wwa-about { background: #fff; padding: 60px 5%; width: 100%; }
.uw-wwa-about__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.uw-wwa-about__heading { font-family: var(--kpy-font); font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 900; color: var(--kpy-primary, #35398e); text-transform: uppercase; margin: 0 0 20px; letter-spacing: .03em; }
.uw-wwa-about__text p { font-family: var(--kpy-font-2); font-size: .97rem; color: #333; line-height: 1.78; margin: 0 0 16px; }
.uw-wwa-about__text p:last-child { margin-bottom: 0; }
.uw-wwa-about__photo { display: flex; align-items: flex-start; }
.uw-wwa-about__img { width: 100%; height: auto; object-fit: cover; display: block; max-height: 380px; }
@media(max-width:768px) { .uw-wwa-about__inner { grid-template-columns: 1fr; gap: 32px; }
.uw-wwa-about { padding: 44px 5%; }
}
/* -- SECTION 2: Vision / Mission / Goal band -- */ .uw-wwa-vmg { background: var(--kpy-primary, #35398e); width: 100%; padding: 56px 5%; position: relative; overflow: hidden; }
/* subtle dot-grid overlay on navy bg */ .uw-wwa-vmg::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 2.5px, transparent 2.5px); background-size: 28px 28px; pointer-events: none; z-index: 0; }
.uw-wwa-vmg__inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.uw-wwa-vmg__col { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 32px; border-right: 1px solid rgba(255, 255, 255, .15); }
.uw-wwa-vmg__col:last-child { border-right: none; }
.uw-wwa-vmg__icon { width: 72px; height: 72px; margin-bottom: 18px; }
.uw-wwa-vmg__icon svg { width: 100%; height: 100%; }
.uw-wwa-vmg__label { font-family: var(--kpy-font); font-size: 1.25rem; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; }
.uw-wwa-vmg__text { font-family: var(--kpy-font-2); font-size: .95rem; color: rgba(255, 255, 255, .9); line-height: 1.65; margin: 0; }
@media(max-width:768px) { .uw-wwa-vmg__inner { grid-template-columns: 1fr; gap: 0; }
.uw-wwa-vmg__col { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .15); padding: 28px 5%; }
.uw-wwa-vmg__col:last-child { border-bottom: none; }
.uw-wwa-vmg { padding: 44px 5%; }
}
/* -- SECTION 3: Core Values -- */ .uw-wwa-values { background: #fff; padding: 64px 5%; width: 100%; }
.uw-wwa-values__inner { max-width: 1200px; margin: 0 auto; }
.uw-wwa-values__heading { font-family: var(--kpy-font); font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 900; color: var(--kpy-primary, #35398e); text-transform: uppercase; margin: 0 0 10px; }
.uw-wwa-values__intro { font-family: var(--kpy-font-2); font-size: .97rem; color: #444; line-height: 1.7; margin: 0 0 36px; max-width: 760px; }
.uw-wwa-values__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.uw-wwa-value-card { background: #fafbff; border: 1px solid rgba(53, 57, 142, .12); padding: 26px 18px 24px; text-align: center; transition: box-shadow .25s, transform .25s; }
.uw-wwa-value-card:hover { box-shadow: 0 8px 28px rgba(53, 57, 142, .14); transform: translateY(-4px); }
.uw-wwa-value-card__icon { width: 48px; height: 48px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
.uw-wwa-value-card__icon svg { width: 100%; height: 100%; }
.uw-wwa-value-card__title { font-family: var(--kpy-font-2); font-size: .92rem; font-weight: 700; color: var(--kpy-secondary, #00aeef); margin: 0 0 12px; letter-spacing: .01em; }
.uw-wwa-value-card__body { font-family: var(--kpy-font-2); font-size: .85rem; color: #555; line-height: 1.68; margin: 0; }
@media(max-width:1024px) { .uw-wwa-values__grid { grid-template-columns: repeat(3, 1fr); }
}
@media(max-width:640px) { .uw-wwa-values__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.uw-wwa-values { padding: 44px 5%; }
}
@media(max-width:420px) { .uw-wwa-values__grid { grid-template-columns: 1fr; }
}
/* -- SECTION 4: What We Believe In -- */ .uw-wwa-believe { background: #fff; padding: 60px 5% 72px; width: 100%; border-top: 1px solid rgba(53, 57, 142, .08); }
.uw-wwa-believe__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.uw-wwa-believe__heading { font-family: var(--kpy-font); font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 900; color: var(--kpy-primary, #35398e); text-transform: uppercase; margin: 0 0 22px; letter-spacing: .03em; }
.uw-wwa-believe__text p { font-family: var(--kpy-font-2); font-size: .97rem; color: #333; line-height: 1.78; margin: 0 0 18px; }
.uw-wwa-believe__text p:last-child { margin-bottom: 0; }
/* Cover image: cyan border frame, matches screenshot */ .uw-wwa-believe__cover { display: flex; align-items: flex-start; padding-top: 4px; }
.uw-wwa-believe__cover-frame { border: 4px solid var(--kpy-secondary, #00aeef); display: inline-block; line-height: 0; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
.uw-wwa-believe__cover-img { width: 100%; height: auto; object-fit: cover; display: block; max-width: 380px; max-height: 480px; }
@media(max-width:768px) { .uw-wwa-believe__inner { grid-template-columns: 1fr; gap: 32px; }
.uw-wwa-believe { padding: 44px 5% 52px; }
.uw-wwa-believe__cover { justify-content: center; }
.uw-wwa-believe__cover-img { max-width: 280px; }
}
/* ================================================================ UWONET MIGRATION — New Component Styles wpdmpro publications · vacancies · documentations · download boxes Added: June 2026 ================================================================ */ /* -- PAGE HERO (shared inner page banner) ------------------- */ .uw-page-hero { position: relative; height: clamp(180px, 20vw, 220px); min-height: 180px; background: var(--kpy-primary, #35398e) center/cover no-repeat; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.uw-page-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(9, 16, 53, .82) 0%, rgba(9, 16, 53, .58) 46%, rgba(9, 16, 53, .18) 100%), radial-gradient(circle at 20% 18%, rgba(255, 255, 255, .12) 0 14%, transparent 15%), radial-gradient(circle at 85% 18%, rgba(255, 255, 255, .10) 0 12%, transparent 13%); }
.uw-page-hero::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -4px; height: 54px; z-index: 1; background: linear-gradient(90deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .10) 100%); transform: skewY(-6deg); opacity: .85; }
.uw-page-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(15, 10, 40, .72) 0%, rgba(15, 10, 40, .08) 70%, rgba(15, 10, 40, .02) 100%); }
.uw-page-hero__content { position: relative; z-index: 2; width: min(1400px, 100%); margin: 0 auto; padding: 0 clamp(48px, 8vw, 140px) 20px; }
.uw-page-hero__title { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; color: #fff !important; text-transform: none; letter-spacing: .02em; margin: 0; line-height: 1.2; max-width: 760px; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
/* -- BREADCRUMB BAR ---------------------------------------- */ .uw-page-breadbar { background: var(--kpy-primary, #35398e); border-top: none; }
.uw-page-breadbar__inner { max-width: 1400px; margin: 0 auto; padding: 10px clamp(48px, 8vw, 140px); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .8rem; }
.uw-page-breadbar__inner a { color: rgba(255, 255, 255, .8); text-decoration: none; transition: color .2s; }
.uw-page-breadbar__inner a:hover { color: #fff; }
.uw-page-breadbar__inner span { color: rgba(255, 255, 255, .6); }
.uw-page-breadbar__sep { color: rgba(255, 255, 255, .4); margin: 0 2px; }
/* -- PUBLICATION CATEGORY TABS ----------------------------- */ .uw-pub-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 28px 5% 0; background: var(--kpy-light, #f0f4fa); border-bottom: 2px solid #dde4f0; max-width: 100%; }
.uw-pub-tab { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--kpy-grey, #5c6070); text-decoration: none; padding: 10px 16px; border-radius: 4px 4px 0 0; background: #fff; border: 1px solid #dde4f0; border-bottom: none; transition: all .2s; display: inline-flex; align-items: center; gap: 6px; }
.uw-pub-tab:hover { color: var(--kpy-primary, #35398e); background: #eef2fb; }
.uw-pub-tab--active { color: var(--kpy-primary, #35398e) !important; background: #fff !important; border-color: var(--kpy-primary, #35398e) !important; border-bottom-color: #fff !important; position: relative; z-index: 1; margin-bottom: -2px; }
.uw-pub-tab__count { background: var(--kpy-primary, #35398e); color: #fff; font-size: .68rem; padding: 1px 6px; border-radius: 10px; font-weight: 800; min-width: 22px; text-align: center; }
.uw-pub-tab--active .uw-pub-tab__count { background: var(--kpy-secondary, #00aeef); }
/* -- PUBLICATIONS GRID ------------------------------------- */ /* (uw-pub-wrap, uw-pub-grid and uw-pub-card styles defined in PUBLICATIONS LISTING PAGE section above) */ /* -- PUBLICATION PAGINATION -------------------------------- */ .uw-pub-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 32px 0 48px; }
.uw-pub-page-btn { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; font-weight: 700; color: var(--kpy-primary, #35398e); background: #fff; border: 1px solid #d0d8ee; padding: 8px 14px; text-decoration: none; border-radius: 3px; transition: all .2s; min-width: 38px; text-align: center; }
.uw-pub-page-btn:hover, .uw-pub-page-btn--active { background: var(--kpy-primary, #35398e); color: #fff; border-color: var(--kpy-primary, #35398e); }
.uw-pub-empty { text-align: center; padding: 60px 20px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); color: var(--kpy-grey, #5c6070); font-size: 1rem; }
/* -- SINGLE PUBLICATION DOWNLOAD BOX ---------------------- */ .uw-pub-dl-sidebar { background: var(--kpy-light, #f0f4fa); border: 1px solid #d8e2f0; border-top: 3px solid var(--kpy-primary, #35398e); padding: 24px; border-radius: 0 0 6px 6px; position: sticky; top: 100px; }
.uw-pub-dl-sidebar__heading { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1rem; font-weight: 800; color: var(--kpy-base, #1a1d4e); margin: 0 0 16px; text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 8px; }
.uw-pub-dl-sidebar__info { margin-bottom: 16px; }
.uw-pub-dl-sidebar__row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid #dde8f4; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; color: var(--kpy-grey, #5c6070); }
.uw-pub-dl-sidebar__row:last-child { border-bottom: none; }
.uw-pub-dl-sidebar__label { font-weight: 700; color: var(--kpy-base, #1a1d4e); }
.uw-pub-dl-sidebar__btn { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 20px; }
/* Related publications list */ .uw-pub-related__heading { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: .9rem; font-weight: 800; color: var(--kpy-base, #1a1d4e); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .4px; }
.uw-pub-related__item { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-bottom: 1px solid #e8edf6; text-decoration: none; color: var(--kpy-base, #1a1d4e); font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; line-height: 1.4; transition: color .2s; }
.uw-pub-related__item i { flex-shrink: 0; margin-top: 2px; color: var(--kpy-secondary, #00aeef); }
.uw-pub-related__item:hover { color: var(--kpy-secondary, #00aeef); }
/* Inline download box (from [wpdm_package] shortcode) */ .uw-pub-dl-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--kpy-light, #f0f4fa); border: 1px solid #d8e2f0; border-left: 4px solid var(--kpy-primary, #35398e); padding: 16px 20px; border-radius: 0 4px 4px 0; margin: 16px 0; flex-wrap: wrap; }
.uw-pub-dl-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
.uw-pub-dl-info i { font-size: 1.4rem; color: #e33; flex-shrink: 0; }
.uw-pub-dl-title { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; font-weight: 700; color: var(--kpy-base, #1a1d4e); }
.uw-pub-dl-meta { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .75rem; color: var(--kpy-grey, #5c6070); }
.uw-pub-dl-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--kpy-primary, #35398e); color: #fff; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 10px 20px; text-decoration: none; border-radius: 3px; white-space: nowrap; flex-shrink: 0; transition: background .2s; }
.uw-pub-dl-btn:hover { background: var(--kpy-secondary, #00aeef); color: #fff; }
/* -- VACANCIES PAGE ---------------------------------------- */ .uw-vac-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.uw-vac-tab { display: inline-flex; align-items: center; gap: 7px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--kpy-grey, #5c6070); background: #fff; border: 1px solid #d8e2f0; padding: 10px 18px; border-radius: 30px; text-decoration: none; transition: all .2s; }
.uw-vac-tab:hover { border-color: var(--kpy-primary, #35398e); color: var(--kpy-primary, #35398e); }
.uw-vac-tab--active { background: var(--kpy-primary, #35398e); color: #fff !important; border-color: var(--kpy-primary, #35398e); }
.uw-vac-list { display: flex; flex-direction: column; gap: 16px; }
.uw-vac-item { display: flex; align-items: flex-start; gap: 18px; background: #fff; border: 1px solid #e4eaf4; border-radius: 6px; padding: 20px 22px; transition: box-shadow .22s; }
.uw-vac-item:hover { box-shadow: 0 6px 20px rgba(53, 57, 142, .1); }
.uw-vac-item__icon { flex-shrink: 0; width: 48px; height: 48px; background: var(--kpy-light, #f0f4fa); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--kpy-primary, #35398e); }
.uw-vac-item__body { flex: 1; min-width: 0; }
.uw-vac-item__title { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: .95rem; font-weight: 700; color: var(--kpy-base, #1a1d4e); margin: 0 0 8px; letter-spacing: 0; text-transform: none; }
.uw-vac-item__title a { color: inherit; text-decoration: none; transition: color .2s; }
.uw-vac-item__title a:hover { color: var(--kpy-secondary, #00aeef); }
.uw-vac-item__meta { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .76rem; color: var(--kpy-grey, #5c6070); margin-bottom: 8px; }
.uw-vac-item__excerpt { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; color: var(--kpy-grey, #5c6070); margin: 0; line-height: 1.5; }
.uw-vac-item__actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex-shrink: 0; }
.uw-vac-empty { padding: 48px 0; }
/* -- DOCUMENTATIONS PAGE ----------------------------------- */ .uw-docs-search .input-group { max-width: 100%; }
.uw-docs-cat-nav__heading { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--kpy-base, #1a1d4e); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--kpy-primary, #35398e); }
.uw-docs-cat-list { margin: 0; padding: 0; }
.uw-docs-cat-list li { margin: 0; }
.uw-docs-cat-link { display: flex; justify-content: space-between; align-items: center; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; color: var(--kpy-grey, #5c6070); text-decoration: none; padding: 9px 10px; border-radius: 3px; transition: all .18s; }
.uw-docs-cat-link:hover { color: var(--kpy-primary, #35398e); background: rgba(53, 57, 142, .05); }
.uw-docs-cat-link--active { color: var(--kpy-primary, #35398e) !important; font-weight: 700; background: rgba(53, 57, 142, .07); }
.uw-docs-search-note { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: var(--kpy-grey, #5c6070); }
/* Docs list */ .uw-docs-list { display: flex; flex-direction: column; gap: 18px; }
.uw-docs-item { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid #e4eaf4; border-radius: 6px; padding: 16px 18px; transition: box-shadow .22s; }
.uw-docs-item:hover { box-shadow: 0 5px 18px rgba(53, 57, 142, .09); }
.uw-docs-item__thumb { flex-shrink: 0; width: 70px; height: 90px; overflow: hidden; border-radius: 3px; border: 1px solid #e0e8f4; }
.uw-docs-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.uw-docs-item__body { flex: 1; min-width: 0; }
.uw-docs-item__title { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: .9rem; font-weight: 700; color: var(--kpy-base, #1a1d4e); margin: 6px 0 8px; letter-spacing: 0; text-transform: none; }
.uw-docs-item__title a { color: inherit; text-decoration: none; transition: color .2s; }
.uw-docs-item__title a:hover { color: var(--kpy-secondary, #00aeef); }
.uw-docs-item__meta { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .73rem; color: var(--kpy-grey, #5c6070); margin-bottom: 6px; }
.uw-docs-item__excerpt { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .8rem; color: var(--kpy-grey, #5c6070); margin: 0; line-height: 1.45; }
.uw-docs-item__actions { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; flex-shrink: 0; }
.uw-docs-empty { padding: 48px 0; }
/* -- SINGLE PUBLICATION (wpdmpro single page) -------------- */ .uw-single-pub { padding: 0; }
.uw-single-pub__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.uw-single-pub__content { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .95rem; color: var(--kpy-base, #1a1d4e); line-height: 1.8; }
.uw-single-pub__content p { color: var(--kpy-grey, #5c6070); }
.uw-single-pub__content h2, .uw-single-pub__content h3, .uw-single-pub__content h4 { color: var(--kpy-base, #1a1d4e); margin-top: 1.6em; }
/* -- RESPONSIVE -------------------------------------------- */ @media (max-width: 900px) { .uw-pub-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 768px) { .uw-pub-tabs { padding: 16px 4% 0; gap: 4px; }
.uw-pub-tab { font-size: .72rem; padding: 8px 10px; }
.uw-pub-wrap { padding: 0 4%; }
.uw-vac-item { flex-wrap: wrap; }
.uw-vac-item__actions { flex-direction: row; width: 100%; justify-content: flex-start; }
.uw-docs-item { flex-wrap: wrap; }
.uw-docs-item__actions { flex-direction: row; width: 100%; justify-content: flex-start; }
.uw-docs-item__thumb { width: 55px; height: 70px; }
.uw-pub-dl-box { flex-direction: column; align-items: flex-start; }
.uw-pub-dl-sidebar { position: static; }
}
@media (max-width: 576px) { .uw-page-hero { min-height: 180px; }
.uw-page-hero__title { font-size: 1.4rem; }
.uw-pub-grid { grid-template-columns: 1fr; }
.uw-vac-item { flex-direction: column; }
.uw-vac-item__icon { margin: 0 auto; }
.uw-vac-item__actions { flex-direction: row; width: 100%; }
}
/* -- LOGO SHOWCASE ADMIN (logoshowcase CPT) ---------------- */ /* No frontend CSS needed — displayed via uwonet_section_partners() which already has styles. Admin-only visual aid: */ .post-type-logoshowcase .column-logo img { border-radius: 3px; border: 1px solid #e0e0e0; }
/* ================================================================ UWONET TIMELINE — [uwonet_timeline] shortcode Replaces Cool Timeline Pro plugin ================================================================ */ .uw-timeline { position: relative; max-width: 1100px; margin: 0 auto; padding: 48px 0 64px; }
/* Centre vertical spine */ .uw-timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: linear-gradient(to bottom, transparent 0%, var(--kpy-primary, #35398e) 8%, var(--kpy-primary, #35398e) 92%, transparent 100%); transform: translateX(-50%); }
/* Each row */ .uw-timeline__item { display: flex; width: 100%; margin-bottom: 56px; position: relative; align-items: flex-start; }
/* Left card: sits in left half */ .uw-timeline__item--left { flex-direction: row; justify-content: flex-start; padding-right: calc(50% + 40px); }
/* Right card: sits in right half */ .uw-timeline__item--right { flex-direction: row-reverse; justify-content: flex-start; padding-left: calc(50% + 40px); }
/* Year badge on the spine */ .uw-timeline__badge { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); width: 60px; height: 60px; border-radius: 50%; background: var(--kpy-secondary, #00aeef); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--kpy-primary, #35398e); display: flex; align-items: center; justify-content: center; z-index: 2; flex-shrink: 0; }
.uw-timeline__badge span { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: .68rem; font-weight: 900; color: #fff; text-align: center; line-height: 1.1; letter-spacing: .5px; }
/* Card */ .uw-timeline__card { background: #fff; border: 1px solid #e0e8f4; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 18px rgba(53, 57, 142, .09); width: 100%; transition: box-shadow .25s, transform .25s; }
.uw-timeline__card:hover { box-shadow: 0 8px 28px rgba(53, 57, 142, .14); transform: translateY(-2px); }
/* Arrow pointing toward the spine */ .uw-timeline__item--left .uw-timeline__card { border-right: 3px solid var(--kpy-secondary, #00aeef); }
.uw-timeline__item--right .uw-timeline__card { border-left: 3px solid var(--kpy-secondary, #00aeef); }
/* Image */ .uw-timeline__img-wrap { width: 100%; height: 200px; overflow: hidden; }
.uw-timeline__img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.uw-timeline__card:hover .uw-timeline__img { transform: scale(1.04); }
/* Body */ .uw-timeline__body { padding: 20px 22px 24px; }
.uw-timeline__date { display: inline-flex; align-items: center; gap: 6px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .75rem; font-weight: 700; color: var(--kpy-secondary, #00aeef); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.uw-timeline__title { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1rem; font-weight: 800; color: var(--kpy-base, #1a1d4e); margin: 0 0 12px; line-height: 1.3; letter-spacing: .2px; text-transform: none; }
.uw-timeline__excerpt p { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .84rem; color: var(--kpy-grey, #5c6070); line-height: 1.6; margin: 0 0 12px; }
.uw-timeline__readmore { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--kpy-primary, #35398e); color: var(--kpy-primary, #35398e); font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 7px 14px; border-radius: 3px; cursor: pointer; transition: all .2s; }
.uw-timeline__readmore:hover, .uw-timeline__readmore[aria-expanded="true"] { background: var(--kpy-primary, #35398e); color: #fff; }
.uw-timeline__readmore[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.uw-timeline__full-inner { padding: 18px 0 6px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .85rem; color: var(--kpy-grey, #5c6070); line-height: 1.7; border-top: 1px solid #e8eef6; margin-top: 14px; }
.uw-timeline__full-inner p { color: var(--kpy-grey, #5c6070); }
.uw-timeline__full-inner h3 { font-size: .95rem; color: var(--kpy-base, #1a1d4e); }
.uw-timeline-empty { text-align: center; padding: 40px 20px; color: var(--kpy-grey, #5c6070); font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); }
/* -- RESPONSIVE -- */ @media (max-width: 768px) { .uw-timeline::before { left: 24px; transform: none; }
.uw-timeline__item--left, .uw-timeline__item--right { flex-direction: column; padding-right: 0; padding-left: 70px; }
.uw-timeline__badge { left: 24px; transform: none; width: 48px; height: 48px; top: 0; }
.uw-timeline__badge span { font-size: .62rem; }
.uw-timeline__item--left .uw-timeline__card, .uw-timeline__item--right .uw-timeline__card { border-right: none; border-left: 3px solid var(--kpy-secondary, #00aeef); }
.uw-timeline__img-wrap { height: 160px; }
}
@media (max-width: 480px) { .uw-timeline__item--left, .uw-timeline__item--right { padding-left: 56px; }
.uw-timeline__badge { left: 14px; width: 40px; height: 40px; }
.uw-timeline::before { left: 18px; }
.uw-timeline__body { padding: 16px 16px 18px; }
}
/* ================================================================ CONTACT & DONATE FORMS — Native Theme (WPForms replacement) ================================================================ */ /* -- Shared form layout ------------------------------------ */ .uw-form-title { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1.2rem; font-weight: 800; color: var(--kpy-base, #1a1d4e); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 6px; }
.uw-form-subtitle { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: var(--kpy-grey, #5c6070); margin: 0 0 20px; line-height: 1.5; }
.uw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 0; }
.uw-form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.uw-form-group label { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; font-weight: 700; color: var(--kpy-base, #1a1d4e); text-transform: uppercase; letter-spacing: .3px; }
.uw-form-group input[type="text"], .uw-form-group input[type="email"], .uw-form-group input[type="tel"], .uw-form-group input[type="url"], .uw-form-group textarea, .uw-form-group select { width: 100%; padding: 11px 14px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: var(--kpy-base, #1a1d4e); background: #fff; border: 1px solid #d0d8ee; border-radius: 3px; outline: none; transition: border-color .2s, box-shadow .2s; box-sizing: border-box; appearance: none; -webkit-appearance: none; }
.uw-form-group input:focus, .uw-form-group textarea:focus, .uw-form-group select:focus { border-color: var(--kpy-secondary, #00aeef); box-shadow: 0 0 0 3px rgba(0, 174, 239, .12); }
.uw-form-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.uw-req { color: var(--kpy-orange, #e05a2b); margin-left: 2px; }
/* Submit button */ .uw-form-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--kpy-primary, #35398e); color: #fff; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; padding: 14px 32px; border: none; border-radius: 3px; cursor: pointer; transition: background .2s, transform .15s; min-width: 160px; }
.uw-form-submit:hover:not(:disabled) { background: var(--kpy-secondary, #00aeef); transform: translateY(-1px); }
.uw-form-submit:disabled { opacity: .65; cursor: not-allowed; }
.btn-spinner { display: inline-flex; align-items: center; gap: 6px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); }
}
.btn-spinner svg { animation: spin .8s linear infinite; }
/* Feedback messages */ .uw-form-feedback { padding: 13px 18px; border-radius: 3px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; font-weight: 600; margin-bottom: 18px; line-height: 1.5; }
.uw-form-feedback--success { background: #e8f5e9; border-left: 4px solid #4caf50; color: #2e7d32; }
.uw-form-feedback--error { background: #fde8e8; border-left: 4px solid #e53935; color: #c62828; }
/* -- CONTACT PAGE SPECIFIC --------------------------------- */ .contact-content-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 0; max-width: 100%; }
.contact-info { background: var(--kpy-primary, #35398e); color: rgba(255, 255, 255, .9); padding: 52px 44px; }
.contact-info__heading { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1.3rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 18px; }
.contact-info__address { font-style: normal; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .9rem; color: rgba(255, 255, 255, .85); line-height: 1.8; margin-bottom: 18px; }
.contact-info__label { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: rgba(255, 255, 255, .85); margin: 0 0 8px; }
.contact-info__label a { color: var(--kpy-secondary, #00aeef); text-decoration: none; }
.contact-info__label a:hover { text-decoration: underline; }
.contact-media-heading { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1rem; font-weight: 700; color: #fff; margin: 22px 0 8px; text-transform: uppercase; letter-spacing: .3px; }
.contact-media-text { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .85rem; color: rgba(255, 255, 255, .78); line-height: 1.6; margin: 0 0 20px; }
.contact-media-text a { color: var(--kpy-secondary, #00aeef); text-decoration: none; }
/* Contact social links */ .contact-social { display: flex; gap: 12px; margin-top: 10px; }
.contact-social a { width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .75); font-size: 1rem; text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.contact-social a:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .6); color: #fff; }
.contact-form-box { background: var(--kpy-light, #f0f4fa); padding: 48px 52px; }
/* Map */ .contact-map-wrap { width: 100%; height: 420px; overflow: hidden; }
.contact-map-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
/* -- DONATE PAGE SPECIFIC ---------------------------------- */ .donate-content-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0; max-width: 100%; }
.donate-info { background: var(--kpy-base, #1a1d4e); color: rgba(255, 255, 255, .88); padding: 52px 44px; }
.donate-info__heading { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1.3rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 20px; }
.donate-info__text { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: rgba(255, 255, 255, .8); line-height: 1.7; margin-bottom: 14px; }
.donate-info__text a { color: var(--kpy-secondary, #00aeef); text-decoration: none; }
/* Impact stats */ .donate-stats { display: flex; gap: 20px; margin: 24px 0; flex-wrap: wrap; }
.donate-stat { display: flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); border-radius: 6px; padding: 14px 18px; flex: 1; min-width: 80px; text-align: center; }
.donate-stat__num { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1.6rem; font-weight: 900; color: var(--kpy-secondary, #00aeef); display: block; line-height: 1; margin-bottom: 4px; }
.donate-stat__lbl { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: rgba(255, 255, 255, .7); display: block; line-height: 1.3; }
.donate-form-box { background: var(--kpy-light, #f0f4fa); padding: 48px 52px; }
/* Donation type tiles */ .uw-donate-type-row { display: flex; gap: 12px; flex-wrap: wrap; }
.uw-donate-type-tile { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid #d0d8ee; border-radius: 6px; padding: 14px 18px; cursor: pointer; transition: border-color .2s, background .2s; flex: 1; min-width: 130px; }
.uw-donate-type-tile input[type="radio"] { width: auto !important; margin: 0; accent-color: var(--kpy-primary, #35398e); flex-shrink: 0; }
.uw-donate-type-tile:has(input:checked) { border-color: var(--kpy-primary, #35398e); background: rgba(53, 57, 142, .05); }
.tile-icon { font-size: 1.6rem; line-height: 1; }
.tile-label { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .8rem; font-weight: 700; color: var(--kpy-base, #1a1d4e); line-height: 1.3; text-transform: uppercase; letter-spacing: .3px; }
/* Inline form wrap (from shortcode) */ .uw-inline-form-wrap { max-width: 680px; margin: 0 auto; }
/* -- RESPONSIVE -------------------------------------------- */ @media (max-width: 900px) { .contact-content-wrap, .donate-content-wrap { grid-template-columns: 1fr; }
.contact-info, .donate-info { padding: 36px 28px; }
.contact-form-box, .donate-form-box { padding: 36px 28px; }
.contact-map-wrap { height: 300px; }
}
@media (max-width: 600px) { .uw-form-row { grid-template-columns: 1fr; gap: 0; }
.contact-info, .donate-info { padding: 28px 20px; }
.contact-form-box, .donate-form-box { padding: 28px 20px; }
.donate-stats { gap: 10px; }
.donate-stat { padding: 10px 12px; }
.donate-stat__num { font-size: 1.3rem; }
}
/* ================================================================ PROGRAMME PAGES — template-programme.php ================================================================ */ /* -- Siblings nav ------------------------------------------ */ .uw-prog-nav { background: var(--kpy-light, #f0f4fa); border-bottom: 2px solid #dde4f0; position: sticky; top: 92px; /* matches body padding-top */ z-index: 90; }
.uw-prog-nav__inner { max-width: 1200px; margin: 0 auto; padding: 0 5%; display: flex; flex-wrap: wrap; gap: 0; overflow-x: auto; }
.uw-prog-nav__link { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--kpy-grey, #5c6070); text-decoration: none; padding: 14px 18px; white-space: nowrap; border-bottom: 3px solid transparent; transition: color .2s, border-color .2s; display: block; }
.uw-prog-nav__link:hover { color: var(--kpy-primary, #35398e); border-bottom-color: var(--kpy-secondary, #00aeef); }
.uw-prog-nav__link--active { color: var(--kpy-primary, #35398e) !important; border-bottom-color: var(--kpy-primary, #35398e) !important; font-weight: 800; }
/* -- Page body wrapper ------------------------------------- */ .uw-prog-page-body { max-width: 1200px; margin: 0 auto; padding: 52px 5% 64px; }
.uw-prog-article { width: 100%; }
/* -- Programme content: 2-col intro block layout ----------- */ /* The Gutenberg wp:columns block in programme pages */ .uw-prog-article .wp-block-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 48px; }
.uw-prog-article .wp-block-column { min-width: 0; }
.uw-prog-article h2.wp-block-heading { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1.6rem; font-weight: 800; color: var(--kpy-base, #1a1d4e); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 20px; }
.uw-prog-article p { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .95rem; color: var(--kpy-grey, #5c6070); line-height: 1.8; margin-bottom: 14px; }
/* Programme image — bottom-left rounded corner (matches UAGB style) */ .uw-prog-article .wp-block-image img, .uw-prog-article .wp-block-image figure, .prog-image { width: 100%; height: auto; border-radius: 0 0 0 80px; display: block; object-fit: cover; box-shadow: 0 12px 40px rgba(53, 57, 142, .12); transition: filter .3s; }
.uw-prog-article .wp-block-image:hover img { filter: grayscale(30%); }
/* -- CTA band ---------------------------------------------- */ .uw-prog-cta-band { background: var(--kpy-primary, #35398e); padding: 56px 5%; }
.uw-prog-cta-band__inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.uw-prog-cta-band__heading { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 28px; }
.uw-prog-cta-band__links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.uw-prog-cta-band__btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--kpy-primary, #35398e); background: #fff; padding: 12px 20px; border-radius: 3px; text-decoration: none; transition: background .2s, color .2s, transform .15s; }
.uw-prog-cta-band__btn:hover { background: var(--kpy-secondary, #00aeef); color: #fff; transform: translateY(-2px); }
/* -- Responsive -------------------------------------------- */ @media (max-width: 768px) { .uw-prog-nav { position: static; }
.uw-prog-nav__link { font-size: .72rem; padding: 11px 12px; }
.uw-prog-article .wp-block-columns { grid-template-columns: 1fr; gap: 24px; }
.uw-prog-page-body { padding: 32px 4% 48px; }
}
/* ================================================================ INLINE FAQ ACCORDION — [uwonet_faq][faq_item]… Replaces UAGB FAQ blocks on programme pages ================================================================ */ .uw-faq-wrap { margin: 0 0 8px; border: 1px solid #dde4f0; border-radius: 6px; overflow: hidden; }
.uw-faq-item { border-bottom: 1px solid #dde4f0; }
.uw-faq-item:last-child { border-bottom: none; }
/* Question button */ .uw-faq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: #eeeeee; border: none; cursor: pointer; text-align: left; font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1rem; font-weight: 600; color: var(--kpy-base, #202b5c); line-height: 1.4; transition: background .2s, color .2s; }
.uw-faq-btn:hover { background: #e0e5f0; color: var(--kpy-primary, #35398e); }
.uw-faq-btn--open { background: var(--kpy-primary, #35398e) !important; color: #fff !important; }
.uw-faq-btn__text { flex: 1; }
.uw-faq-btn__icon { flex-shrink: 0; transition: transform .25s; fill: currentColor; }
.uw-faq-btn--open .uw-faq-btn__icon { transform: rotate(180deg); }
/* Answer panel */ .uw-faq-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; background: #fff; }
.uw-faq-body--open { max-height: 1200px; }
.uw-faq-body__inner { padding: 20px 22px 22px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: var(--kpy-grey, #5c6070); line-height: 1.8; }
.uw-faq-body__inner p { margin-bottom: 10px; color: inherit; }
.uw-faq-body__inner strong { color: var(--kpy-base, #1a1d4e); }
.uw-faq-body__inner br+br { display: none; }
/* collapse double line-breaks */ @media (max-width: 600px) { .uw-faq-btn { font-size: .88rem; padding: 13px 14px; }
.uw-faq-body__inner { padding: 14px 16px 18px; }
}
/* ================================================================ HOME PAGE BLOCK CLASSES Replaces UAGB info-box, slider, and group CSS These class names are used in the existing wp:group blocks ================================================================ */ /* Vision / Mission / Core Values — 3-column info boxes */ .uwonet-intro { padding: 0; }
.intro-icon-box, .intro-icon-box2 { text-align: center; padding: 36px 24px; background: var(--kpy-primary, #35398e); border-radius: 6px; color: #fff; height: 100%; }
.intro-icon-box2 { background: var(--kpy-secondary, #00aeef); }
.uagb-ifb-icon-wrap, .uagb-ifb-icon-wrap svg { width: 48px; height: 48px; fill: rgba(255, 255, 255, .9); margin: 0 auto 16px; display: block; }
.uagb-ifb-title { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1.1rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.uagb-ifb-desc { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: rgba(255, 255, 255, .88); line-height: 1.6; }
/* Who We Are / intro-about section */ .intro-about { padding: 80px 5%; background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%); position: relative; overflow: hidden; }
.intro-about .big-title { font-size: .9rem; font-weight: 800; color: var(--kpy-secondary, #00aeef); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 8px; }
.intro-about h2.wp-block-heading { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; color: var(--kpy-base, #1a1d4e); margin-bottom: 20px; }
.intro-about p { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .95rem; color: var(--kpy-grey, #5c6070); line-height: 1.8; max-width: 540px; margin: 0 auto 20px; }
.intro-about-btn a { display: inline-block; background: var(--kpy-primary, #35398e); color: #fff !important; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; padding: 13px 28px; text-decoration: none; border-radius: 3px; transition: background .2s; }
.intro-about-btn a:hover { background: var(--kpy-secondary, #00aeef); }
/* Dotted background pattern */ .triangle-dotted.left, .triangle-dotted.right { position: absolute; width: 240px; height: 240px; background-image: radial-gradient(var(--kpy-primary, #35398e) 2.5px, transparent 2.5px); background-size: 18px 18px; opacity: .07; pointer-events: none; }
.triangle-dotted.left { top: -40px; left: -40px; }
.triangle-dotted.right { bottom: -40px; right: -40px; }
/* Our Programmes section header */ .uwonet-programs { background: var(--kpy-light, #f0f4fa); padding: 64px 5%; }
.uwonet-programs h2.wp-block-heading { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; color: var(--kpy-base, #1a1d4e); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 32px; }
/* ================================================================ GENERAL page.php CONTENT STYLES Applied inside .uw-page-body on pages using the default template ================================================================ */ .uw-page-body { max-width: 1160px; margin: 0 auto; padding: 52px 8% 72px; }
.uw-page-body .wp-block-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; align-items: start; margin-bottom: 40px; }
.uw-page-body h2.wp-block-heading { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1.5rem; font-weight: 800; color: var(--kpy-base, #1a1d4e); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 18px; }
.uw-page-body h3.wp-block-heading { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1.1rem; font-weight: 700; color: var(--kpy-base, #1a1d4e); margin-bottom: 12px; }
.uw-page-body p { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .92rem; color: var(--kpy-grey, #5c6070); line-height: 1.8; margin-bottom: 14px; }
.uw-page-body img { max-width: 100%; height: auto; }
.uw-page-body .wp-block-image img { border-radius: 0 0 0 60px; box-shadow: 0 8px 28px rgba(53, 57, 142, .1); }
/* -- UWONET dot-bg pattern — disabled, plain white background used instead */ .uw-dot-bg { background-image: none; background-color: transparent; background-attachment: scroll; }
/* ================================================================ GLOBAL FONT-WEIGHT REDUCTION Reduces the heavy uppercase/700 weight across the entire site to match the lighter look of the original plugin-built pages. ================================================================ */ /* Body text — already 400 by default, reinforce */ body, p, li, td, th, address, blockquote { font-weight: 400 !important; }
/* Headings — drop from 700/800/900 to 600 except hero titles */ h1, h2, h3, h4, h5, h6, .wp-block-heading { font-weight: 600 !important; letter-spacing: .02em !important; text-transform: none !important; /* remove site-wide UPPERCASE */ }
/* Keep hero/page title bold */ .uw-page-hero__title, .uw-page-hero__title, .uwonet-slide-title, .big-title h2, .uw-prog-cta-band__heading { font-weight: 700 !important; text-transform: none !important; letter-spacing: .02em !important; }
/* Section headings — medium weight */ .uw-whoweare-heading, .uw-programmes-heading, .uw-newsevents-heading, .uw-partners-heading, .uw-prog-nav__link, .donate-info__heading, .contact-info__heading { font-weight: 700 !important; letter-spacing: .03em !important; }
/* Nav links — keep at 600 for legibility */ .hv-menu>li>a, .hv-mobile-nav>li>a { font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .05em !important; }
/* Footer headings */ .uw-footer__col-title { font-weight: 700 !important; }
/* Buttons — keep uppercase+bold for CTAs */ .hv-btn, .uw-form-submit, .uw-pub-dl-btn, .uwonet-slide-btn, .uw-prog-cta-band__btn, .uw-readmore-btn { font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
/* Card/badge labels — lighten */ .uw-pub-card__cat, .kpy-ev-badge, .uw-vmg-card__label { font-weight: 600 !important; letter-spacing: .04em !important; }
/* Remove all-caps from page body text */ .uw-page-body p, .uw-prog-article p, .entry-content p, .uw-faq-body__inner, .uw-docs-item__excerpt, .uw-vac-item__excerpt { text-transform: none !important; font-weight: 400 !important; letter-spacing: normal !important; }
/* ================================================================ GOOGLE TRANSLATE — TOPBAR PLACEMENT ================================================================ */ .hv-topbar-inner { justify-content: space-between !important; /* push translate to right */ }
.hv-topbar-translate { flex-shrink: 0; display: flex; align-items: center; }
/* Style the GT gadget to match the dark topbar */ .hv-topbar-translate .goog-te-gadget-simple { background: transparent !important; border: 1px solid rgba(53, 57, 142, .3) !important; border-radius: 3px !important; padding: 3px 8px !important; font-size: .72rem !important; }
.hv-topbar-translate .goog-te-gadget-simple a span, .hv-topbar-translate .goog-te-gadget-simple .goog-te-menu-value span { color: var(--kpy-primary, #35398e) !important; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif) !important; font-size: .72rem !important; }
.hv-topbar-translate .goog-logo-link, .hv-topbar-translate .goog-te-gadget>span { display: none !important; }
/* Hide the Google translate top bar that pushes content down */ .goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0 !important; }
/* ================================================================ ALL PAGES ================================================================ */ /* page.php — .uw-page-body already has max-width + padding. These rules apply to the Gutenberg block content inside every inner page. */ /* Remove excessive container width overrides from old plugin CSS */ .uw-page-body .container, .uw-prog-page-body .container, .uw-page-article .container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Gutenberg columns inside inner pages — consistent 2-col grid */ .uw-page-body .wp-block-columns, .uw-prog-article .wp-block-columns { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; align-items: center; margin-bottom: 40px; }
/* Inner page headings */ .uw-page-body h2, .uw-page-body h2.wp-block-heading { font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important; color: var(--kpy-base, #1a1d4e) !important; margin-bottom: 16px !important; }
.uw-page-body h3, .uw-page-body h3.wp-block-heading { font-size: clamp(1rem, 2vw, 1.25rem) !important; color: var(--kpy-base, #1a1d4e) !important; margin-bottom: 12px !important; }
/* Paragraph text — consistent across all pages */ .uw-page-body p, .uw-prog-article p, .uw-page-article p { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif) !important; font-size: .93rem !important; color: var(--kpy-grey, #5c6070) !important; line-height: 1.8 !important; font-weight: 400 !important; }
/* Links inside page content */ .uw-page-body a, .uw-prog-article a:not(.uwonet-slide-btn):not(.uw-prog-nav__link):not(.uw-prog-cta-band__btn) { color: var(--kpy-secondary, #00aeef); text-decoration: none; transition: color .2s; }
.uw-page-body a:hover { color: var(--kpy-primary, #35398e); text-decoration: underline; }
/* Gutenberg image blocks — consistent radius + shadow */ .uw-page-body .wp-block-image img, .uw-prog-article .wp-block-image img { border-radius: 0 0 0 60px; box-shadow: 0 8px 28px rgba(53, 57, 142, .1); width: 100%; height: auto; display: block; }
/* Lists inside pages */ .uw-page-body ul, .uw-page-body ol, .uw-prog-article ul, .uw-prog-article ol { padding-left: 20px; margin-bottom: 16px; }
.uw-page-body li, .uw-prog-article li { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .93rem; color: var(--kpy-grey, #5c6070); line-height: 1.7; margin-bottom: 6px; }
/* Blockquotes */ .uw-page-body blockquote, .uw-prog-article blockquote { border-left: 4px solid var(--kpy-secondary, #00aeef); margin: 24px 0; padding: 16px 20px; background: var(--kpy-light, #f0f4fa); border-radius: 0 6px 6px 0; }
.uw-page-body blockquote p { color: var(--kpy-base, #1a1d4e) !important; font-style: italic; }
/* ================================================================ VIDEO GALLERY — EMPTY STATE GUIDANCE Shown when kpy_video CPT has no posts yet ================================================================ */ .kpy-vg-empty { text-align: center; padding: 60px 20px; background: var(--kpy-light, #f0f4fa); border-radius: 6px; margin: 32px 5%; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); color: var(--kpy-grey, #5c6070); }
.kpy-vg-empty::before { content: '›'; display: block; font-size: 3rem; color: var(--kpy-secondary, #00aeef); margin-bottom: 16px; }
/* ================================================================ TOPBAR LAYOUT FIX — allow social + translate on same row ================================================================ */ .hv-topbar { border-bottom: 1px solid #e8e8f0; }
.hv-topbar-inner { max-width: 1440px; margin: 0 auto; padding: 5px 3%; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
/* ================================================================ SINGLE POST / SINGLE NEWS — consistent styling ================================================================ */ .uw-inner-main .entry-content, .uw-inner-main .post-content, .single .entry-content { max-width: 860px; margin: 0 auto; padding: 48px 5% 72px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .95rem; color: var(--kpy-grey, #5c6070); line-height: 1.85; }
.uw-inner-main .entry-content h2, .uw-inner-main .entry-content h3 { color: var(--kpy-base, #1a1d4e); margin-top: 1.6em; }
.uw-inner-main .entry-content img { max-width: 100%; height: auto; border-radius: 4px; }
/* ================================================================ PHOTO GALLERY PAGE ================================================================ */ .gallery-cards-container { padding: 32px 5% 64px; max-width: 1200px; margin: 0 auto; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-bottom: 32px; }
.gallery-card { position: relative; overflow: hidden; border-radius: 6px; }
.gallery-card-link { display: block; }
.gallery-thumbnail-wrapper { position: relative; height: 200px; overflow: hidden; }
.gallery-thumbnail { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.gallery-card:hover .gallery-thumbnail { transform: scale(1.05); }
.gallery-title-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); padding: 24px 14px 12px; }
.gallery-title { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: .88rem; font-weight: 600 !important; color: #fff; margin: 0; text-transform: none !important; letter-spacing: 0 !important; }
/* ================================================================ ABOUT / WHO-WE-ARE PAGE — inner content consistency ================================================================ */ .uw-who-we-are-page .uw-page-body, .template-about .uw-page-body { padding: 48px 5% 72px; }
/* ================================================================ UPCOMING EVENTS PAGE — uses [upcoming_events] shortcode ================================================================ */ .kpy-events-container { max-width: 1200px; margin: 0 auto; padding: 32px 5% 64px; }
/* ================================================================ DOWNLOAD LINKS — consistent button style across all pages ================================================================ */ a[href*="?wpdmdl="], .wpdm-download-link { display: inline-flex; align-items: center; gap: 7px; background: var(--kpy-primary, #35398e); color: #fff !important; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 9px 18px; border-radius: 3px; text-decoration: none !important; transition: background .2s; }
a[href*="?wpdmdl="]:hover, .wpdm-download-link:hover { background: var(--kpy-secondary, #00aeef); }
/* ================================================================ RESPONSIVE FINAL PASS ================================================================ */ @media (max-width: 991px) { /* vmg handled in slider section */ }
@media (max-width: 768px) { .uw-page-body { padding: 28px 4% 48px; }
.uw-prog-page-body { padding: 24px 4% 40px; }
.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 480px) { .uwonet-slide-content { bottom: 60px; }
.uwonet-slide-title { font-size: 1.3rem; }
.hv-topbar-translate { display: none; }
}
/* ================================================================ UWONET SLIDER — FINAL CLEAN VERSION Exact match to screenshot: - Full viewport, no ticker, no scroll widget, no bullets - Title bottom-left, white, single cyan CTA - Simple ‹ › arrows on sides ================================================================ */ /* Remove ALL old slider chrome */ .scrolling-words-banner, .scroll-down-arrow, #main-slider-pagination, .main-slider .swiper-button-prev, .main-slider .swiper-button-next, .main-slider .swiper-pagination, .slide-tagline { display: none !important; }
/* -- Section wrapper -- */ .uw-hero-slider { position: relative; width: 100%; overflow: visible; /* height = viewport minus the fixed header (topbar 34 + navrow 52 = 86px) */ height: calc(100vh - 86px); min-height: 680px; max-height: 960px; background: var(--kpy-base, #1a1d4e); }
/* Clip only the slide imagery, not the VMG cards that overlap the bottom */ .uw-hero-slider .swiper-container, .uw-hero-slider .swiper-wrapper { overflow: hidden; }
/* Swiper fills the section */ .uw-hero-slider .swiper-container, .uw-hero-slider .swiper-wrapper, .uw-hero-slider .swiper-slide { width: 100%; height: 100%; }
/* -- Background image with Ken-Burns zoom -- */ .uw-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center top; transform: scale(1.06); animation: none; transition: transform 8s ease; }
.swiper-slide-active .uw-slide-bg { transform: scale(1); /* zoom out gently on active slide */ }
/* -- Gradient scrim — matches screenshot exactly -- */ .uw-slide-scrim { position: absolute; inset: 0; /* Dark on left/bottom, transparent upper-right — exactly like screenshot */ background: linear-gradient(135deg, rgba(10, 12, 50, 0.62) 0%, rgba(10, 12, 50, 0.35) 55%, rgba(10, 12, 50, 0.10) 100%); z-index: 2; }
/* -- Slide body — bottom-left, above the wave curve -- */ .uw-slide-body { position: absolute; bottom: 110px; left: 5%; z-index: 10; max-width: 500px; }
/* -- Wave curve at slider bottom -- */ .uw-hero-slider__wave { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 12; line-height: 0; pointer-events: none; }
.uw-hero-slider__wave svg { display: block; width: 100%; height: 60px; }
/* -- Title -- */ .uw-slide-title { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif) !important; font-size: clamp(1.35rem, 3vw, 2rem) !important; font-weight: 600 !important; color: #fff !important; line-height: 1.25 !important; margin: 0 0 18px !important; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); text-transform: none !important; letter-spacing: .01em !important; }
/* -- Optional description paragraph -- */ .uw-slide-desc { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .85rem; font-weight: 400; color: rgba(255, 255, 255, .88); line-height: 1.6; margin: 0 0 22px; text-shadow: 0 1px 4px rgba(0, 0, 0, .4); max-width: 420px; }
/* -- CTA button — solid cyan, all-caps, exactly like screenshot -- */ .uw-slide-cta { display: inline-block; background: var(--kpy-secondary, #00aeef); color: #fff !important; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 10px 22px; border-radius: 3px; text-decoration: none !important; border: 2px solid var(--kpy-secondary, #00aeef); transition: background .22s, border-color .22s, transform .15s; }
.uw-slide-cta:hover { background: #0099d6; border-color: #0099d6; color: #fff !important; transform: translateY(-2px); }
/* -- Nav arrows — thin white circles on sides -- */ .uw-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 2px solid rgba(255, 255, 255, .55); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; padding: 0; }
.uw-slider-arrow:hover { background: rgba(255, 255, 255, .28); }
.uw-slider-arrow--prev { left: 14px; }
.uw-slider-arrow--next { right: 14px; }
/* -- Empty state -- */ .uw-slider-empty { background: var(--kpy-primary, #35398e); color: rgba(255, 255, 255, .7); text-align: center; padding: 80px 5%; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .9rem; }
.uw-slider-empty strong { color: #fff; }
/* -- VMG cards overlap the slider bottom -- */ .uw-vmg-band { position: relative; z-index: 15; padding: 0 4% 40px; background: #fff; }
.uw-vmg-inner { pointer-events: all; display: flex; justify-content: center; gap: 24px; max-width: 960px; margin: -120px auto 0; }
/* All three cards share base styles */ .uw-vmg-card { flex: 1; min-width: 220px; max-width: 300px; border-radius: 14px; padding: 32px 24px 28px; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 16px 40px rgba(26, 29, 78, .30); border: 5px solid #fff; }
/* Vision — dark navy/purple */ .uw-vmg-vision { background: #35398e; }
/* Mission — bright cyan/blue (the centre card, raised) */ .uw-vmg-mission { background: #00aeef; margin-top: -22px; padding-top: 44px; }
/* Goal / Core Values — medium purple */ .uw-vmg-goal { background: #4a3fac; }
/* Icon */ .uw-vmg-icon { font-size: 2rem; line-height: 1; color: rgba(255, 255, 255, .85); margin-bottom: 4px; }
/* Heading */ .uw-vmg-card h3 { font-family: var(--kpy-font, Verdana, sans-serif); font-size: 1.1rem !important; font-weight: 700 !important; color: #fff !important; margin: 0 !important; text-transform: none !important; letter-spacing: .01em !important; }
/* Body text */ .uw-vmg-card p { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem !important; font-weight: 400 !important; color: rgba(255, 255, 255, .9) !important; line-height: 1.55 !important; margin: 0 !important; }
/* Responsive */ @media (max-width: 768px) { .uw-hero-slider { height: 72vh; min-height: 380px; max-height: 560px; }
.uw-slide-body { bottom: 50px; left: 4%; max-width: 90%; }
.uw-slide-title { font-size: 1.4rem !important; }
.uw-vmg-inner { gap: 14px; margin-top: -80px; }
.uw-vmg-mission { margin-top: -12px; padding-top: 38px; }
.uw-vmg-band { padding: 0 3% 28px; }
}
@media (max-width: 600px) { .uw-vmg-inner { flex-direction: column; align-items: center; margin-top: -60px; }
.uw-vmg-card { max-width: 92%; width: 92%; }
.uw-vmg-mission { margin-top: 0 !important; padding-top: 32px; }
.uw-vmg-band { padding: 0 4% 24px; }
}
@media (max-width: 480px) { .uw-hero-slider { height: 65vh; min-height: 320px; }
.uw-slide-body { bottom: 36px; }
.uw-slide-title { font-size: 1.2rem !important; }
.uw-slider-arrow { width: 32px; height: 32px; font-size: 1.1rem; }
}
/* ================================================================ GLOBAL TYPOGRAPHY — lighter, thinner, more readable Replaces previous heavy font-weight overrides. ================================================================ */ /* Root defaults */ body { font-size: 15px !important; font-weight: 400 !important; line-height: 1.75 !important; }
/* All headings — reduced weight, no uppercase by default */ h1, h2, h3, h4, h5, h6, .wp-block-heading { font-weight: 600 !important; text-transform: none !important; letter-spacing: .01em !important; line-height: 1.3 !important; }
/* Body paragraphs — thin, comfortable reading size */ p, li, td, th, address, figcaption, blockquote { font-size: .9rem !important; font-weight: 400 !important; line-height: 1.8 !important; letter-spacing: .01em !important; }
/* Paragraphs in main content areas */ .uw-page-body p, .uw-prog-article p, .entry-content p, .uw-faq-body__inner p, .uw-docs-item__excerpt, .uw-vac-item__excerpt, .uw-whoweare-lead, .uw-newsevents-news p { font-size: .88rem !important; font-weight: 400 !important; color: var(--kpy-grey, #5c6070) !important; line-height: 1.85 !important; letter-spacing: normal !important; text-transform: none !important; }
/* Section headings — medium weight */ .uw-whoweare-heading, .uw-programmes-heading, .uw-newsevents-heading, .uw-partners-heading, .donate-info__heading, .contact-info__heading, .uw-pub-dl-sidebar__heading, .uw-faq-btn { font-weight: 600 !important; letter-spacing: .02em !important; text-transform: none !important; }
/* Card titles */ .uw-pub-card__title, .uw-docs-item__title, .uw-vac-item__title, .kpy-ev-side-title, .kpy-ev-lcard-title, .kpy-ev-main-title, .kpy-news-card-title { font-weight: 600 !important; text-transform: none !important; letter-spacing: .01em !important; }
/* Footer content */ .uw-footer__list li, .uw-footer__address, .uw-footer__copy { font-size: .82rem !important; font-weight: 400 !important; }
/* ================================================================ MENU — LEFT-ALIGNED NAV AT SMALLER SCREEN WIDTHS Below 1200px the logo-card + nav + CTAs compress. Below 992px the hamburger shows — mobile drawer goes LEFT. ================================================================ */ /* Between 992px and 1200px — give nav more room by reducing padding */ @media (max-width: 1200px) and (min-width: 992px) { .hv-menu>li>a { padding: 0 8px !important; font-size: .78rem !important; letter-spacing: .03em !important; }
.hv-btn { padding: 12px 14px !important; font-size: .72rem !important; }
.hv-logo-card { margin-right: 10px !important; }
}
/* Mobile drawer — LEFT aligned, starts from left edge */ .hv-mobile-drawer { left: 0 !important; right: auto !important; width: min(320px, 88vw) !important; transform: translateX(-100%) !important; /* slides in from LEFT */ border-right: 1px solid #eee; }
.hv-mobile-drawer.open { transform: translateX(0) !important; }
.hv-mobile-nav>li>a { font-size: .88rem !important; font-weight: 600 !important; padding: 12px 4px !important; text-transform: none !important; letter-spacing: .01em !important; }
.hv-mobile-nav .sub-menu li a { font-size: .82rem !important; font-weight: 400 !important; }
/* Burger aligns to the right of the logo, NOT pushed far right */ @media (max-width: 991px) { .hv-nav-inner { padding: 0 3% !important; justify-content: space-between !important; }
.hv-burger { margin-left: auto !important; }
}
/* ================================================================ MISC WEIGHT FIXES — buttons, badges, labels ================================================================ */ /* Uppercase CTA buttons stay uppercase + bold — intentional */ .hv-btn, .uw-form-submit, .uw-pub-dl-btn, .uw-slide-cta, .uw-prog-cta-band__btn, .uw-readmore-btn, a.uw-pub-card__dl-btn { font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .07em !important; }
/* Badges / small labels — no uppercase, lighter */ .uw-pub-card__cat, .kpy-ev-badge, .uw-pub-tab, .uw-vac-tab { font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .04em !important; }
/* Meta info rows — very light */ .uw-pub-card__meta, .uw-docs-item__meta, .uw-vac-item__meta, .kpy-ev-lcard-meta, .uw-news-row__date { font-size: .75rem !important; font-weight: 400 !important; color: var(--kpy-grey, #5c6070) !important; }
/* ================================================================ VMG CARD TEXT — lighter weight, no uppercase ================================================================ */ .uw-vmg-card__label { font-size: 1rem !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: .01em !important; }
.uw-vmg-card__text { font-size: .8rem !important; font-weight: 400 !important; line-height: 1.55 !important; }
/* ================================================================ WHO WE ARE + PROGRAMMES SECTIONS — consistent light text ================================================================ */ .uw-whoweare-lead { font-size: .92rem !important; font-weight: 400 !important; line-height: 1.8 !important; }
.uw-prog-card__label { font-size: .82rem !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: .01em !important; line-height: 1.4 !important; }
.uw-programmes-heading { font-size: clamp(1.4rem, 2.5vw, 2rem) !important; font-weight: 600 !important; text-transform: none !important; }
.uw-whoweare-heading { font-size: clamp(1.4rem, 2.5vw, 2rem) !important; font-weight: 600 !important; text-transform: none !important; }
/* ================================================================ NEWS + EVENTS SECTION ================================================================ */ .uw-newsevents-heading { font-size: clamp(1.2rem, 2vw, 1.6rem) !important; font-weight: 600 !important; text-transform: none !important; }
.uw-news-row__title a, .uw-event-row__title a { font-size: .9rem !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: normal !important; }
/* ================================================================ PAGE HERO TITLE — keep strong but not heavy ================================================================ */ .uw-page-hero__title { font-size: clamp(1.1rem, 2vw, 1.5rem) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: .02em !important; }
/* ================================================================ CONTACT + DONATE PAGES ================================================================ */ .uw-contact-wrap { display: grid; grid-template-columns: 35fr 65fr; min-height: 520px; max-width: 1100px; margin: 0 auto; width: 100%; }
.uw-contact-info { padding: 52px 44px 52px 8%; background-color: #f8f9fc; }
.uw-cinfo-heading { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1.25rem; font-weight: 700 !important; color: var(--kpy-primary, #35398e) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 0 14px; }
.uw-cinfo-sub-heading { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1.05rem; font-weight: 700 !important; color: var(--kpy-primary, #35398e) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 24px 0 10px; }
.uw-cinfo-address { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; font-style: normal; color: #333; line-height: 1.7; margin-bottom: 14px; }
.uw-cinfo-row { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: #333; margin: 0 0 6px; font-weight: 400 !important; }
.uw-cinfo-row strong { font-weight: 600; color: #222; }
.uw-cinfo-row a { color: #333; text-decoration: none; }
.uw-cinfo-row a:hover { text-decoration: underline; }
.uw-cinfo-body { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: #444; line-height: 1.7; margin: 0 0 12px; font-weight: 400 !important; }
.uw-cinfo-body a { color: var(--kpy-secondary, #00aeef); text-decoration: none; }
.uw-cinfo-body a:hover { text-decoration: underline; }
.uw-contact-form-card { background: #fff; border: 1px solid #d8dff0; margin: 40px 8% 40px 28px; padding: 36px 40px; border-radius: 4px; }
.uw-wpf-label { display: block; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; font-weight: 700; color: #222; margin-bottom: 5px; text-transform: none !important; letter-spacing: normal !important; }
.uw-wpf-req { color: #e00; margin-left: 2px; }
.uw-wpf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; }
.uw-wpf-field-group { margin-bottom: 16px; }
.uw-wpf-col { display: flex; flex-direction: column; }
.uw-wpf-sublabel { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .72rem; color: #888; margin-top: 3px; }
.uw-contact-form-card input[type="text"], .uw-contact-form-card input[type="email"], .uw-contact-form-card input[type="tel"], .uw-contact-form-card textarea { width: 100%; padding: 8px 10px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: #222; background: #fff; border: 1px solid #c8d0e4; border-radius: 3px; outline: none; box-sizing: border-box; transition: border-color .18s, box-shadow .18s; -webkit-appearance: none; }
.uw-contact-form-card input:focus, .uw-contact-form-card textarea:focus { border-color: var(--kpy-secondary, #00aeef); box-shadow: 0 0 0 2px rgba(0, 174, 239, .15); }
.uw-contact-form-card textarea { resize: vertical; min-height: 130px; }
.uw-wpf-select-wrap { position: relative; display: block; }
.uw-wpf-select-wrap select { width: 100%; padding: 8px 32px 8px 10px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: #222; background: #fff; border: 1px solid #c8d0e4; border-radius: 3px; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; box-sizing: border-box; transition: border-color .18s; }
.uw-wpf-select-wrap select:focus { border-color: var(--kpy-secondary, #00aeef); }
.uw-wpf-select-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 1.1rem; color: #888; line-height: 1; }
.uw-wpf-dtype-row { display: flex; gap: 20px; flex-wrap: wrap; }
.uw-wpf-dtype-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background .18s; }
.uw-wpf-dtype-tile input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.uw-dtype-icon { width: 48px; height: 48px; display: block; }
.uw-dtype-label { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; color: #333; text-align: center; line-height: 1.3; font-weight: 400 !important; text-transform: none !important; }
.uw-wpf-dtype-tile:has(input:checked) .uw-dtype-icon path, .uw-wpf-dtype-tile:has(input:checked) .uw-dtype-icon circle { stroke: var(--kpy-primary, #35398e); fill: var(--kpy-primary, #35398e); }
.uw-wpf-dtype-tile:has(input:checked) .uw-dtype-label { color: var(--kpy-primary, #35398e); font-weight: 600 !important; }
.uw-wpf-captcha-row { display: flex; align-items: center; justify-content: space-between; border: 1px solid #d0d8ee; border-radius: 3px; padding: 10px 14px; margin: 16px 0; background: #fafbfe; gap: 12px; }
.uw-wpf-captcha-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: #333; font-weight: 400 !important; }
.uw-wpf-captcha-cb { width: 18px !important; height: 18px !important; border: 1px solid #aaa; border-radius: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--kpy-primary, #35398e); }
.uw-wpf-captcha-badge { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.uw-wpf-captcha-text { display: flex; flex-direction: column; line-height: 1.2; }
.uw-wpf-captcha-text span { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; font-weight: 700; color: #333; }
.uw-wpf-captcha-text small { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .65rem; color: #888; }
.uw-wpf-submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 20px; background: var(--kpy-primary, #35398e); color: #fff; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; font-weight: 700; text-transform: none !important; letter-spacing: .02em; border: none; border-radius: 3px; cursor: pointer; transition: background .2s; }
.uw-wpf-submit:hover:not(:disabled) { background: #2a2e72; }
.uw-wpf-submit:disabled { opacity: .6; cursor: not-allowed; }
.uw-form-feedback { padding: 10px 14px; border-radius: 3px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .85rem; margin-bottom: 14px; font-weight: 500; }
.uw-form-feedback--success { background: #e8f5e9; border-left: 3px solid #4caf50; color: #2e7d32; }
.uw-form-feedback--error { background: #fde8e8; border-left: 3px solid #e53935; color: #c62828; }
.uw-contact-map { width: 100%; height: 420px; overflow: hidden; }
.uw-contact-map iframe { width: 100%; height: 100%; border: none; display: block; }
@media (max-width: 900px) { .uw-contact-wrap { grid-template-columns: 1fr; }
.uw-contact-info { padding: 36px 5%; }
.uw-contact-form-card { margin: 0; border-radius: 0; border-left: none; border-right: none; padding: 32px 5%; }
.uw-contact-map { height: 300px; }
}
@media (max-width: 560px) { .uw-wpf-cols { grid-template-columns: 1fr; }
.uw-contact-form-card { padding: 24px 4%; }
}
/* ================================================================ ACCESSIBILITY TOOLBAR (replaces Ally plugin) ================================================================ */ /* Skip link */ .uw-a11y-skip { position: absolute; top: -100px; left: 8px; z-index: 99999; background: var(--kpy-primary, #35398e); color: #fff; padding: 8px 18px; border-radius: 0 0 4px 4px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; font-weight: 700; text-decoration: none; transition: top .15s; }
.uw-a11y-skip:focus { top: 0; }
/* Floating bar */ .uw-a11y-bar { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 9990; display: flex; flex-direction: column; align-items: flex-start; }
/* Toggle button — blue circle */ .uw-a11y-toggle { width: 44px; height: 44px; border-radius: 0 4px 4px 0; background: var(--kpy-primary, #35398e); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 8px rgba(0, 0, 0, .2); transition: background .2s; }
.uw-a11y-toggle:hover { background: #2a2e72; }
/* Panel */ .uw-a11y-panel { position: fixed; left: 0; top: 50%; transform: translateY(-50%); width: 260px; background: #fff; border: 1px solid #dde4f0; border-left: none; border-radius: 0 6px 6px 0; box-shadow: 4px 0 20px rgba(0, 0, 0, .12); z-index: 9989; overflow: hidden; }
.uw-a11y-panel__header { background: var(--kpy-primary, #35398e); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.uw-a11y-panel__title { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: .9rem; font-weight: 700 !important; color: #fff !important; margin: 0; text-transform: none !important; }
.uw-a11y-panel__close { background: none; border: none; color: #fff; font-size: 1rem; cursor: pointer; padding: 2px 6px; border-radius: 3px; transition: background .15s; }
.uw-a11y-panel__close:hover { background: rgba(255, 255, 255, .15); }
.uw-a11y-panel__body { padding: 12px; }
.uw-a11y-section { margin-bottom: 10px; }
.uw-a11y-section__label { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #888; display: block; margin-bottom: 6px; }
.uw-a11y-btn-group { display: flex; gap: 6px; }
.uw-a11y-btn { flex: 1; padding: 7px 6px; background: var(--kpy-light, #f0f4fa); border: 1px solid #d0d8ee; border-radius: 3px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; font-weight: 700; color: var(--kpy-base, #1a1d4e); cursor: pointer; text-align: center; transition: background .18s, border-color .18s; }
.uw-a11y-btn:hover { background: #e0e8f6; border-color: #aab8da; }
.uw-a11y-btn--reset { width: 100%; background: #fff3f3; border-color: #f7b5b5; color: #c62828; }
.uw-a11y-toggle-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--kpy-light, #f0f4fa); border: 1px solid #d0d8ee; border-radius: 3px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; font-weight: 600; color: var(--kpy-base, #1a1d4e); cursor: pointer; text-align: left; transition: all .18s; }
.uw-a11y-toggle-btn:hover, .uw-a11y-toggle-btn.is-active { background: var(--kpy-primary, #35398e); color: #fff; border-color: var(--kpy-primary, #35398e); }
.uw-a11y-toggle-btn__icon { width: 22px; text-align: center; flex-shrink: 0; }
/* -- Accessibility mode overrides -- */ html.uw-a11y-contrast, html.uw-a11y-contrast body { background: #000 !important; color: #fff !important; }
html.uw-a11y-contrast a { color: #ff0 !important; }
html.uw-a11y-contrast .uw-page-hero__scrim { background: rgba(0, 0, 0, .85) !important; }
html.uw-a11y-readable, html.uw-a11y-readable * { font-family: Verdana, Arial, Helvetica, sans-serif !important; }
html.uw-a11y-underline a { text-decoration: underline !important; }
html.uw-a11y-pause-anim *, html.uw-a11y-pause-anim *::before, html.uw-a11y-pause-anim *::after { animation: none !important; transition: none !important; }
/* ================================================================ COOKIE CONSENT BANNER + MODAL (replaces CookieYes plugin) ================================================================ */ /* Banner */ .uw-cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99990; background: #fff; border-top: 3px solid var(--kpy-primary, #35398e); box-shadow: 0 -4px 24px rgba(0, 0, 0, .12); padding: 16px 5%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; }
.uw-cookie-banner__inner { max-width: 1200px; width: 100%; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.uw-cookie-banner__text { flex: 1; min-width: 260px; }
.uw-cookie-banner__text p { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem !important; color: #333 !important; margin: 0; line-height: 1.5 !important; }
.uw-cookie-banner__text a { color: var(--kpy-secondary, #00aeef); text-decoration: underline; }
.uw-cookie-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
/* Cookie buttons */ .uw-cookie-btn { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; font-weight: 700; padding: 9px 18px; border-radius: 3px; border: none; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.uw-cookie-btn--accept { background: var(--kpy-primary, #35398e); color: #fff; }
.uw-cookie-btn--accept:hover { background: #2a2e72; }
.uw-cookie-btn--secondary { background: var(--kpy-light, #f0f4fa); color: var(--kpy-primary, #35398e); border: 1px solid #d0d8ee; }
.uw-cookie-btn--secondary:hover { background: #e0e8f6; }
.uw-cookie-btn--reject { background: transparent; color: #888; border: 1px solid #d0d8ee; }
.uw-cookie-btn--reject:hover { color: #555; border-color: #aaa; }
/* Modal overlay */ .uw-cookie-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.uw-cookie-modal__box { background: #fff; border-radius: 6px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .2); }
.uw-cookie-modal__header { background: var(--kpy-primary, #35398e); color: #fff; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; border-radius: 6px 6px 0 0; }
.uw-cookie-modal__title { font-family: var(--kpy-font, "Montserrat", Verdana, sans-serif); font-size: 1rem; font-weight: 700 !important; color: #fff !important; margin: 0; text-transform: none !important; }
.uw-cookie-modal__close { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; padding: 2px 8px; border-radius: 3px; }
.uw-cookie-modal__close:hover { background: rgba(255, 255, 255, .15); }
.uw-cookie-modal__body { padding: 20px 24px; }
.uw-cookie-modal__intro { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .84rem !important; color: #555 !important; margin-bottom: 18px; }
.uw-cookie-modal__footer { padding: 14px 24px 20px; display: flex; gap: 10px; border-top: 1px solid #e8edf6; }
/* Category rows */ .uw-cookie-cat { border: 1px solid #e8edf6; border-radius: 4px; padding: 14px 16px; margin-bottom: 10px; }
.uw-cookie-cat__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.uw-cookie-cat__label { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; font-weight: 700; color: #222; }
.uw-cookie-cat__always { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .72rem; font-weight: 600; color: #4caf50; background: #e8f5e9; padding: 2px 8px; border-radius: 10px; }
.uw-cookie-cat__desc { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem !important; color: #666 !important; margin: 0; line-height: 1.5 !important; }
/* Toggle switch */ .uw-cookie-toggle { display: flex; align-items: center; cursor: pointer; }
.uw-cookie-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.uw-cookie-toggle__slider { width: 40px; height: 22px; background: #ccc; border-radius: 11px; position: relative; transition: background .2s; flex-shrink: 0; }
.uw-cookie-toggle__slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .2s; }
.uw-cookie-toggle__input:checked+.uw-cookie-toggle__slider { background: var(--kpy-primary, #35398e); }
.uw-cookie-toggle__input:checked+.uw-cookie-toggle__slider::after { transform: translateX(18px); }
.uw-cookie-toggle__input:focus+.uw-cookie-toggle__slider { outline: 2px solid var(--kpy-secondary, #00aeef); outline-offset: 2px; }
@media (max-width: 600px) { .uw-cookie-banner__inner { flex-direction: column; align-items: flex-start; }
.uw-cookie-banner__actions { width: 100%; }
.uw-cookie-btn { flex: 1; text-align: center; }
}
/* ================================================================ UWONET HEADER Row 1: grey topbar (Jobs & Careers | Staff Webmail | Site Admin | Whistleblower ?? X FB YT LI) Row 2: white navrow [LOGO CARD abs] [nav links] [CONTACT] [DONATE] Logo card: white pill, spans both rows + 20px overhang, circular logo + tagline ================================================================ */ /* Kill old hv-* nav elements */ .hv-nav, .hv-topbar, .hv-navrow, .hv-topbar-inner, .hv-nav-inner, .hv-logo-card, .hv-menu, .hv-cta-group, .hv-burger, .hv-mobile-drawer, .uw-nav-social-strip { display: none !important; }
/* -- Header shell -- */ .uw-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; margin: 0; padding: 0; }
/* -- Topbar -- */ .uw-topbar { background: #fff; border-bottom: none; height: 34px; display: flex; align-items: center; }
.uw-topbar-inner { width: 100%; padding: 0; display: flex; align-items: center; justify-content: flex-end; height: 100%; }
.uw-topbar-utils { display: none; }
.uw-topbar-link { display: none; }
.uw-topbar-sep { display: none; }
.uw-topbar-right { display: flex; align-items: center; gap: 0; height: 100%; }
/* Hide search icon — not in target design */ .uw-topbar-search { display: none; }
/* Social icons — greyish background only behind icons */ .uw-topbar-social { display: flex; align-items: center; gap: 4px; background: #e8e8e8; height: 100%; padding: 0 14px; }
.uw-topbar-icon { color: #444; display: flex; align-items: center; text-decoration: none; padding: 0 5px; height: 100%; transition: color .18s; }
.uw-topbar-icon:hover { color: var(--kpy-primary, #35398e); }
/* -- Main nav row -- */ .uw-navrow { background: #fff; height: 52px; display: flex; align-items: stretch; position: relative; border-bottom: 2px solid #2c2c3a; }
.uw-navrow-inner { width: 100%; padding: 0 0 0 170px; display: flex; align-items: stretch; justify-content: flex-end; }
/* -- Logo card -- */ .uw-logo-card { position: absolute; top: 0; left: 20px; height: calc(34px + 52px + 18px); width: 140px; background: #fff; border: 1px solid #e0e4f0; border-top: none; border-radius: 0 0 14px 14px; box-shadow: 4px 6px 20px rgba(53, 57, 142, .10), -4px 6px 20px rgba(53, 57, 142, .06); display: flex; align-items: center; justify-content: center; z-index: 20; }
.uw-logo-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; padding: 10px 10px 14px; gap: 5px; }
.uw-logo-img { width: 76px; height: 76px; object-fit: contain; border-radius: 50%; display: block; }
.uw-logo-tagline { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .38rem; font-weight: 600 !important; color: var(--kpy-primary, #35398e); text-transform: uppercase !important; letter-spacing: .02em !important; text-align: center; line-height: 1.25; display: block; white-space: normal; max-width: 108px; overflow: hidden; }
.uw-logo-sitename { display: none; }
/* -- Primary menu -- */ .uw-nav-menu { display: flex; align-items: stretch; list-style: none; margin: 0 0 0 auto; padding: 0; flex: 0 0 auto; height: 100%; }
.uw-nav-menu>li { position: relative; display: flex; align-items: stretch; }
.uw-nav-menu>li>a { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .84rem; font-weight: 600 !important; color: var(--kpy-primary, #35398e); text-decoration: none; padding: 0 15px; display: flex; align-items: center; white-space: nowrap; text-transform: none !important; letter-spacing: .01em !important; border-bottom: none; transition: color .18s; }
.uw-nav-menu>li>a:hover, .uw-nav-menu>li.current-menu-item>a, .uw-nav-menu>li.current-menu-ancestor>a { color: var(--kpy-secondary, #00aeef); border-bottom-color: transparent; }
.uw-nav-menu>li.menu-item-has-children>a::after { content: ' ▼'; font-size: .58rem; margin-left: 3px; opacity: .65; }
/* Dropdown panel */ .uw-nav-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff; border: 1px solid #e0e6f4; box-shadow: 0 10px 32px rgba(26, 29, 78, .13); list-style: none; margin: 0; padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 900; }
.uw-nav-menu li:hover>.sub-menu, .uw-nav-menu li:focus-within>.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.uw-nav-menu .sub-menu li a { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; font-weight: 400 !important; color: #1a1d4e; text-decoration: none; padding: 11px 20px; display: flex; align-items: center; justify-content: space-between; white-space: normal; line-height: 1.4; text-transform: none !important; transition: color .15s; }
.uw-nav-menu .sub-menu li a:hover, .uw-nav-menu .sub-menu li.current-menu-item>a { color: var(--kpy-secondary, #00aeef); text-decoration: underline; }
.uw-nav-menu .sub-menu .menu-item-has-children>a::after { content: '›'; font-size: .7rem; margin-left: 10px; opacity: .7; flex-shrink: 0; }
/* Third-level fly-out */ .uw-nav-menu .sub-menu .sub-menu { position: absolute; top: 0; left: 100%; opacity: 0; visibility: hidden; transform: translateX(4px); transition: opacity .2s, transform .2s, visibility .2s; }
.uw-nav-menu .sub-menu li:hover>.sub-menu, .uw-nav-menu .sub-menu li:focus-within>.sub-menu { opacity: 1; visibility: visible; transform: translateX(0); }
/* Prevent overflow on last items */ .uw-nav-menu>li:last-child>.sub-menu, .uw-nav-menu>li:nth-last-child(2)>.sub-menu { left: auto; right: 0; }
/* -- CTA buttons -- */ /* -- CTA buttons -- */ .uw-nav-ctas { display: flex; align-self: stretch; flex-shrink: 0; align-items: stretch; }
.uw-nav-btn { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .8rem; font-weight: 700 !important; text-decoration: none; padding: 0 24px; display: inline-flex; align-items: center; align-self: stretch; gap: 6px; transition: background .22s, color .22s; text-transform: uppercase !important; letter-spacing: .08em !important; white-space: nowrap; border: none; border-radius: 0 !important; /* perfectly square — no rounded corners */ cursor: pointer; }
.uw-nav-btn--contact { background: var(--kpy-secondary, #00aeef); color: #fff; }
.uw-nav-btn--contact:hover { background: #0099d6; color: #fff; }
.uw-nav-btn--donate { background: var(--kpy-primary, #35398e); color: #fff; }
.uw-nav-btn--donate:hover { background: #2a2e72; color: #fff; }
.uw-nav-btn--donate svg { width: 16px !important; height: 16px !important; flex-shrink: 0; }
/* -- Hamburger -- */ .uw-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px 12px; margin-left: 8px; flex-shrink: 0; align-self: center; }
.uw-burger span { display: block; width: 24px; height: 2px; background: var(--kpy-primary, #35398e); border-radius: 2px; transition: .28s; }
.uw-burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.uw-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.uw-burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* Body offset: topbar 34px + navrow 52px = 86px */ body { padding-top: 86px !important; }
/* -- Mobile drawer -- */ .uw-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 85vw); background: #fff; z-index: 1200; transform: translateX(-100%); transition: transform .35s cubic-bezier(.4, 0, .2, 1); overflow-y: auto; padding: 0 0 40px; }
.uw-drawer.is-open { transform: translateX(0); }
.uw-drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .38); z-index: 1199; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.uw-drawer-overlay.is-visible { opacity: 1; visibility: visible; }
.uw-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #eee; background: var(--kpy-primary, #35398e); }
.uw-drawer-logo { height: 50px; width: 50px; border-radius: 50%; object-fit: contain; background: #fff; }
.uw-drawer-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: #fff; padding: 4px 8px; }
.uw-drawer-menu { list-style: none; margin: 0; padding: 0; }
.uw-drawer-menu>li>a { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .9rem; font-weight: 600 !important; color: #1a1d4e; text-decoration: none; padding: 13px 18px; display: block; border-bottom: 1px solid #f0f0f0; text-transform: none !important; }
.uw-drawer-menu>li>a:hover { color: var(--kpy-secondary, #00aeef); }
.uw-drawer-menu .sub-menu { list-style: none; margin: 0; padding: 0 0 0 16px; background: #f8f9fc; }
.uw-drawer-menu .sub-menu a { font-size: .84rem; font-weight: 400 !important; color: #444; padding: 9px 18px; display: block; border-bottom: 1px solid #eee; text-decoration: none; text-transform: none !important; }
.uw-drawer-menu .sub-menu a:hover { color: var(--kpy-primary, #35398e); }
.uw-drawer-ctas { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px; }
.uw-drawer-ctas .uw-nav-btn { height: 44px; justify-content: center; border-radius: 4px; }
/* -- Responsive -- */ @media (max-width: 991px) { .uw-nav-menu, .uw-nav-ctas { display: none !important; }
.uw-burger { display: flex !important; }
.uw-navrow-inner { padding-left: 160px; padding-right: 3%; justify-content: flex-end; }
}
@media (max-width: 600px) { .uw-topbar { display: none; }
body { padding-top: 52px !important; }
.uw-logo-card { height: calc(68px + 20px); }
.uw-logo-img { width: 60px; height: 60px; }
}
@media (max-width: 420px) { .uw-logo-card { left: 8px; width: 120px; }
.uw-navrow-inner { padding-left: 136px; }
}
@media (min-width: 992px) and (max-width: 1200px) { .uw-nav-menu>li>a { padding: 0 10px; font-size: .78rem; }
.uw-nav-btn { padding: 0 16px; font-size: .75rem; }
}
/* ================================================================ ORANGE TRANSLATE BUTTON — fixed bottom-right ================================================================ */ .uw-translate-widget { position: fixed; bottom: 0; right: 0; z-index: 9995; display: flex; flex-direction: column; align-items: flex-end; }
.uw-translate-trigger { background: #e05a00; color: #fff; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; font-weight: 700 !important; border: none; border-radius: 4px 4px 0 0; padding: 10px 18px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background .2s; white-space: nowrap; text-transform: none !important; letter-spacing: .01em !important; }
.uw-translate-trigger:hover { background: #c84e00; }
.uw-translate-arrow { transition: transform .22s; flex-shrink: 0; }
.uw-translate-trigger[aria-expanded="true"] .uw-translate-arrow { transform: rotate(180deg); }
.uw-translate-panel { background: #fff; border: 1px solid #e0e0e0; border-radius: 6px 6px 0 0; box-shadow: 0 -6px 28px rgba(0, 0, 0, .15); width: 320px; max-width: 95vw; overflow: hidden; animation: uwTransPanelIn .22s ease; }
@keyframes uwTransPanelIn { from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.uw-translate-panel__header { background: var(--kpy-primary, #35398e); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.uw-translate-panel__header span { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; font-weight: 700; color: #fff; }
.uw-translate-panel__close { background: none; border: none; color: #fff; font-size: 1rem; cursor: pointer; padding: 2px 6px; }
.uw-translate-panel__close:hover { background: rgba(255, 255, 255, .15); border-radius: 3px; }
.uw-translate-panel__flags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.uw-translate-flag-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 6px; background: none; border: none; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background .15s; }
.uw-translate-flag-btn:hover { background: #f5f5f5; }
.uw-translate-flag-btn .uw-flag-emoji { font-size: 1.4rem; }
.uw-translate-flag-name { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .62rem; color: #555; text-align: center; font-weight: 400 !important; text-transform: none !important; }
@media (max-width: 480px) { .uw-translate-widget { right: 0; }
.uw-translate-panel { width: 280px; }
.uw-translate-panel__flags { grid-template-columns: repeat(4, 1fr); }
}
/* ================================================================ FOOTER + NEWSLETTER BAND ================================================================ */ .uw-newsletter { background: var(--kpy-secondary, #00aeef); padding: 52px 24px; text-align: center; }
.uw-newsletter__inner { max-width: 720px; margin: 0 auto; }
.uw-newsletter__title { font-family: var(--kpy-font, Verdana, sans-serif); font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 700 !important; color: #fff; margin: 0 0 10px; text-transform: none !important; letter-spacing: .01em !important; }
.uw-newsletter__sub { font-family: var(--kpy-font-2, Verdana, sans-serif); font-size: .9rem; color: rgba(255, 255, 255, .88); margin: 0 0 24px; line-height: 1.6; }
.uw-newsletter__row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.uw-newsletter__input { flex: 1; min-width: 220px; max-width: 400px; padding: 12px 16px; border: none; border-radius: 3px; font-family: var(--kpy-font-2, Verdana, sans-serif); font-size: .9rem; outline: none; }
.uw-newsletter__btn { background: var(--kpy-primary, #35398e); color: #fff; border: none; padding: 12px 28px; border-radius: 3px; font-family: var(--kpy-font-2, Verdana, sans-serif); font-size: .9rem; font-weight: 700 !important; cursor: pointer; transition: background .2s; white-space: nowrap; }
.uw-newsletter__btn:hover { background: #2a2e72; }
.uw-footer { background: var(--kpy-primary, #35398e); color: rgba(255, 255, 255, .88); }
.uw-footer__inner { max-width: 1200px; margin: 0 auto; padding: 52px 5% 40px; }
.uw-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.uw-footer__col-title { font-family: var(--kpy-font, Verdana, sans-serif); font-size: .9rem; font-weight: 700 !important; color: #fff; text-transform: none !important; letter-spacing: .01em !important; margin: 0 0 8px; }
.uw-footer__col-rule { width: 32px; height: 3px; background: rgba(255, 255, 255, .4); margin-bottom: 16px; }
.uw-footer__address { font-family: var(--kpy-font-2, Verdana, sans-serif); font-size: .83rem !important; color: rgba(255, 255, 255, .8); line-height: 1.75; font-style: normal; font-weight: 400 !important; }
.uw-footer__list { list-style: none; margin: 0; padding: 0; }
.uw-footer__list li { font-family: var(--kpy-font-2, Verdana, sans-serif); font-size: .83rem !important; color: rgba(255, 255, 255, .8); line-height: 2; font-weight: 400 !important; }
.uw-footer__list a { color: rgba(255, 255, 255, .88); text-decoration: none; transition: color .18s; }
.uw-footer__list a:hover { color: #fff; }
.uw-footer__list strong { color: #fff; }
.uw-footer__social { display: flex; gap: 12px; align-items: center; }
.uw-footer__social-link { color: rgba(255, 255, 255, .75); width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; text-decoration: none; }
.uw-footer__social-link:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.uw-footer__bar { background: #2a2e72; border-top: 1px solid rgba(255, 255, 255, .1); }
.uw-footer__bar-inner { max-width: 1200px; margin: 0 auto; padding: 12px 5%; display: flex; align-items: center; justify-content: center; }
.uw-footer-copy { font-family: var(--kpy-font-2, Verdana, sans-serif); font-size: .78rem !important; color: rgba(255, 255, 255, .82); margin: 0; text-align: center; font-weight: 400 !important; }
.uw-footer-copy strong { color: #fff; }
.uw-cookie-float-btn { position: fixed; bottom: 80px; left: 16px; z-index: 900; width: 44px; height: 44px; border-radius: 50%; background: var(--kpy-primary, #35398e); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(53, 57, 142, .35); transition: background .2s, transform .2s; }
.uw-cookie-float-btn:hover { background: #2a2e72; transform: scale(1.08); }
@media (max-width: 900px) { .uw-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) { .uw-newsletter { padding: 36px 16px; }
.uw-newsletter__row { flex-direction: column; align-items: center; }
.uw-newsletter__input { min-width: 0; width: 100%; max-width: 100%; }
.uw-newsletter__btn { width: 100%; }
.uw-footer__inner { padding: 36px 5% 28px; }
.uw-footer__grid { grid-template-columns: 1fr; gap: 24px; }
.uw-footer__bar-inner { flex-direction: column; text-align: center; padding: 14px 5%; }
}
/* ================================================================ JOURNEY OF PASSION — template-journey.php Vertical alternating timeline with year badges ================================================================ */ .uw-journey-intro { background: #fff; padding: 48px 5% 36px; }
.uw-journey-intro__inner { max-width: 860px; margin: 0 auto; }
.uw-journey-intro__heading { font-family: var(--kpy-font, Verdana, sans-serif); font-size: 1.4rem; font-weight: 700 !important; color: var(--kpy-primary, #35398e); margin: 0 0 14px; text-transform: none !important; }
.uw-journey-intro__body { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .9rem !important; color: var(--kpy-grey, #5c6070) !important; line-height: 1.8 !important; margin: 0; }
.uw-journey-timeline-section { background: #f9fafb; padding: 40px 5% 72px; }
.uw-journey-timeline__inner { max-width: 900px; margin: 0 auto; }
.uw-journey-timeline__heading { font-family: var(--kpy-font, Verdana, sans-serif); font-size: 1.3rem; font-weight: 700 !important; color: #111; text-align: center; margin: 0 0 48px; text-transform: none !important; }
/* Timeline spine */ .uw-jt { position: relative; }
.uw-jt::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--kpy-secondary, #00aeef); transform: translateX(-50%); z-index: 0; }
/* Year badge row */ .uw-jt__year-row { display: flex; justify-content: center; position: relative; z-index: 2; margin: 32px 0 8px; }
.uw-jt__year-badge { background: var(--kpy-secondary, #00aeef); color: #fff; font-family: var(--kpy-font, Verdana, sans-serif); font-size: .88rem; font-weight: 700 !important; padding: 6px 22px; border-radius: 999px; letter-spacing: .05em; }
/* Story item — alternating left/right */ .uw-jt__item { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 0 16px; align-items: start; position: relative; margin-bottom: 32px; z-index: 1; }
.uw-jt__item--left .uw-jt__card { grid-column: 1; grid-row: 1; }
.uw-jt__item--left .uw-jt__spine-dot { grid-column: 2; grid-row: 1; }
.uw-jt__item--left .uw-jt__spine-label { grid-column: 3; grid-row: 1; align-self: center; font-size: .78rem; color: #888; }
.uw-jt__item--right .uw-jt__card { grid-column: 3; grid-row: 1; }
.uw-jt__item--right .uw-jt__spine-dot { grid-column: 2; grid-row: 1; }
.uw-jt__item--right .uw-jt__spine-label { grid-column: 1; grid-row: 1; text-align: right; align-self: center; font-size: .78rem; color: #888; }
/* Connector dot */ .uw-jt__spine-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--kpy-secondary, #00aeef); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--kpy-secondary, #00aeef); margin: 16px auto 0; justify-self: center; }
/* Card */ .uw-jt__card { background: #fff; border: 1px solid #e8edf6; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 12px rgba(53, 57, 142, .08); }
.uw-jt__card-header { padding: 10px 16px; background: var(--kpy-primary, #35398e); }
.uw-jt__card-title-bar { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; font-weight: 700 !important; color: #fff; text-transform: none !important; }
.uw-jt__img-wrap { overflow: hidden; }
.uw-jt__img { width: 100%; height: auto; display: block; transition: transform .35s ease; }
.uw-jt__card:hover .uw-jt__img { transform: scale(1.04); }
.uw-jt__body { padding: 14px 16px 18px; }
.uw-jt__excerpt { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem !important; color: var(--kpy-grey, #5c6070) !important; line-height: 1.65 !important; margin: 0 0 10px; }
.uw-jt__readmore { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; font-weight: 700; color: var(--kpy-secondary, #00aeef); text-decoration: none; }
.uw-jt__full-inner { padding: 10px 0 0; font-size: .82rem; line-height: 1.7; color: var(--kpy-grey, #5c6070); }
.uw-journey-empty { text-align: center; padding: 40px; color: #888; font-size: .9rem; }
@media (max-width: 640px) { .uw-jt::before { left: 20px; }
.uw-jt__item { grid-template-columns: 40px 1fr; }
.uw-jt__item--left .uw-jt__card, .uw-jt__item--right .uw-jt__card { grid-column: 2; grid-row: 1; }
.uw-jt__item--left .uw-jt__spine-dot, .uw-jt__item--right .uw-jt__spine-dot { grid-column: 1; grid-row: 1; }
.uw-jt__item--left .uw-jt__spine-label, .uw-jt__item--right .uw-jt__spine-label { display: none; }
}
/* ================================================================ BOARD OF DIRECTORS — template-board.php Circular photos, name below, role in cyan ================================================================ */ .uw-team-section { background: #fff; padding: 52px 5% 72px; }
.uw-team-inner { max-width: 1100px; margin: 0 auto; }
.uw-team-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 32px; margin-bottom: 48px; }
.uw-team-card { display: flex; flex-direction: column; align-items: center; text-align: center; width: 200px; }
.uw-team-img-wrap { width: 160px; height: 160px; border-radius: 50%; overflow: hidden; margin-bottom: 16px; background: var(--kpy-light, #f0f4fa); }
.uw-team-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.uw-team-card__name { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .9rem; font-weight: 700 !important; color: var(--kpy-base, #1a1d4e); margin: 0 0 4px; text-transform: none !important; }
.uw-team-card__role { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; color: var(--kpy-secondary, #00aeef); font-weight: 400 !important; }
@media (max-width: 600px) { .uw-team-card { width: 140px; }
.uw-team-img-wrap { width: 120px; height: 120px; }
}
/* ================================================================ EXECUTIVE DIRECTOR'S MESSAGE — template-exec-director.php Two-column: text left, photo right ================================================================ */ .uw-exec-section { background: #fff; padding: 52px 5% 72px; }
.uw-exec-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 340px; gap: 52px; align-items: start; }
.uw-exec-text h2 { font-family: var(--kpy-font, Verdana, sans-serif); font-size: 1.4rem; font-weight: 700 !important; color: var(--kpy-primary, #35398e); margin: 0 0 20px; text-transform: none !important; }
.uw-exec-text p { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .9rem !important; color: var(--kpy-grey, #5c6070) !important; line-height: 1.8 !important; margin-bottom: 14px; }
.uw-exec-photo img { width: 100%; height: auto; display: block; border-radius: 4px; }
.uw-exec-caption { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; color: #888; text-align: center; margin-top: 8px; }
@media (max-width: 768px) { .uw-exec-inner { grid-template-columns: 1fr; }
.uw-exec-photo { max-width: 300px; }
}
/* ================================================================ MEMBERSHIP PAGE — template-membership.php Tabs + logo grid + individual members list ================================================================ */ .uw-membership-section { background: #fff; padding: 48px 5% 72px; }
.uw-membership-inner { max-width: 1100px; margin: 0 auto; }
.uw-membership-heading { font-family: var(--kpy-font, Verdana, sans-serif); font-size: 1.4rem; font-weight: 700 !important; color: var(--kpy-primary, #35398e); margin: 0 0 6px; text-transform: none !important; }
.uw-membership-sub { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: var(--kpy-grey, #5c6070); margin: 0 0 28px; }
/* Tab nav */ .uw-tabs { margin-bottom: 0; }
.uw-tabs__nav { display: flex; gap: 0; flex-wrap: wrap; margin-bottom: 28px; }
.uw-tab { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .8rem; font-weight: 700 !important; padding: 10px 22px; background: var(--kpy-primary, #35398e); color: #fff; border: 2px solid var(--kpy-primary, #35398e); cursor: pointer; text-decoration: none; transition: background .2s, color .2s; white-space: nowrap; text-transform: none !important; }
.uw-tab:hover, .uw-tab.uw-tab--active, .uw-tab.active { background: var(--kpy-secondary, #00aeef); border-color: var(--kpy-secondary, #00aeef); color: #fff; }
.uw-tab-panel { display: none; }
.uw-tab-panel.uw-tab-panel--active, .uw-tab-panel.active { display: block; }
.uw-tab-intro { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: var(--kpy-grey, #5c6070); line-height: 1.7; margin-bottom: 20px; padding: 12px 16px; border: 1px solid #e8edf6; border-radius: 4px; }
/* Logo grid (shared with partners page) */ .uw-pg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.uw-pg-card { border: 1px solid #e8edf6; border-radius: 6px; padding: 20px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; background: #fff; transition: box-shadow .2s; }
.uw-pg-card:hover { box-shadow: 0 4px 18px rgba(53, 57, 142, .12); }
.uw-pg-logo { height: 70px; display: flex; align-items: center; justify-content: center; }
.uw-pg-logo img { max-height: 70px; max-width: 130px; width: auto; object-fit: contain; display: block; }
.uw-pg-card__name { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; font-weight: 700 !important; color: var(--kpy-primary, #35398e); line-height: 1.4; text-transform: none !important; }
.uw-pg-card a { text-decoration: none; }
/* Individual members list */ .uw-individual-list { list-style: none; padding: 0; margin: 0; border: 1px solid #e8edf6; border-radius: 4px; padding: 20px 24px; }
.uw-individual-list li { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .9rem; color: var(--kpy-base, #1a1d4e); padding: 6px 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f0f0f0; }
.uw-individual-list li:last-child { border-bottom: none; }
.uw-individual-list li::before { content: '›'; color: var(--kpy-secondary, #00aeef); font-weight: 700; flex-shrink: 0; }
@media (max-width: 900px) { .uw-pg-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) { .uw-pg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) { .uw-pg-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}
/* ================================================================ DEVELOPMENT PARTNERS PAGE — template-partners.php Logo grid (uses .uw-pg-grid / .uw-pg-card above) ================================================================ */ .uw-partners-page { background: #fff; padding: 48px 5% 72px; }
.uw-partners-page__inner { max-width: 1100px; margin: 0 auto; }
/* ================================================================ PHOTO GALLERY PAGE — template-photo-gallery.php ================================================================ */ .uw-pgallery { background: #f9fafb; padding: 48px 5% 72px; }
.uw-pgallery__inner { max-width: 1200px; margin: 0 auto; }
.uw-pgallery__heading { font-family: var(--kpy-font, Verdana, sans-serif); font-size: 1.3rem; font-weight: 700 !important; color: var(--kpy-primary, #35398e); margin: 0 0 28px; padding-bottom: 10px; border-bottom: 2px solid #e8edf6; text-transform: none !important; }
.uw-pgallery__content { min-height: 200px; }
/* ================================================================ STRATEGIC OBJECTIVES — template-strategic-objectives.php 3-col: image left | themes centre | objectives right ================================================================ */ .uw-so-section { background: #f7f8fb; padding: 56px 8% 72px; }
.uw-so-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 300px 260px 1fr; gap: 48px; align-items: start; }
/* COL 1 — image with cyan border */ .uw-so-image img { width: 100%; height: auto; border: 4px solid var(--kpy-secondary, #00aeef); border-radius: 4px; display: block; }
/* COL 2 — thematic focus areas */ .uw-so-themes { display: flex; flex-direction: column; gap: 28px; padding-top: 4px; }
.uw-so-theme { display: flex; align-items: flex-start; gap: 14px; }
.uw-so-theme__icon { width: 36px; height: 36px; flex-shrink: 0; color: var(--kpy-primary, #35398e); display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; }
.uw-so-theme__icon svg { width: 36px; height: 36px; }
.uw-so-theme__label { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; font-weight: 700; color: var(--kpy-base, #1a1d4e); line-height: 1.45; text-transform: none !important; letter-spacing: 0 !important; }
/* COL 3 — strategic objectives */ .uw-so-objectives { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.uw-so-obj p { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem !important; color: var(--kpy-grey, #5c6070) !important; line-height: 1.7 !important; margin: 0 !important; }
.uw-so-obj__title { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; font-weight: 700 !important; color: var(--kpy-primary, #35398e) !important; text-transform: none !important; }
/* Responsive */ @media (max-width: 1024px) { .uw-so-inner { grid-template-columns: 260px 220px 1fr; gap: 32px; }
}
@media (max-width: 860px) { .uw-so-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
.uw-so-image { grid-column: 1 / -1; max-width: 320px; }
}
@media (max-width: 560px) { .uw-so-inner { grid-template-columns: 1fr; }
.uw-so-image { max-width: 100%; }
.uw-so-section { padding: 40px 5% 56px; }
}
/* ================================================================ SINGLE DOWNLOAD PAGE — single-wpdmpro.php 3-col layout: cover | summary | meta card ================================================================ */ .uw-dl-wrap { display: grid; grid-template-columns: 200px 1fr 220px; gap: 36px; max-width: 1100px; margin: 48px auto; padding: 0 5%; align-items: start; }
.uw-dl-cover img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 4px 18px rgba(53, 57, 142, .12); }
.uw-dl-summary__title { font-family: var(--kpy-font, Verdana, sans-serif); font-size: 1.3rem; font-weight: 700 !important; color: var(--kpy-primary, #35398e); margin: 0 0 14px; text-transform: none !important; }
.uw-dl-summary__body p { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem !important; color: var(--kpy-grey, #5c6070) !important; line-height: 1.8 !important; margin-bottom: 12px; }
.uw-dl-meta__card { border: 1px solid #e0e6f4; border-radius: 4px; overflow: hidden; margin-bottom: 16px; }
.uw-dl-meta__row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #eef1f8; gap: 8px; }
.uw-dl-meta__row:last-child { border-bottom: none; }
.uw-dl-meta__label { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; color: #555; font-weight: 400 !important; }
.uw-dl-meta__badge { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .75rem; font-weight: 700 !important; padding: 3px 10px; border-radius: 3px; white-space: nowrap; }
.uw-dl-meta__badge--dark { background: var(--kpy-primary, #35398e); color: #fff; }
.uw-dl-meta__badge--date { background: var(--kpy-secondary, #00aeef); color: #fff; }
.uw-dl-btn { display: block; width: 100%; background: var(--kpy-secondary, #00aeef); color: #fff; text-align: center; padding: 14px 0; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; font-weight: 700 !important; text-decoration: none; text-transform: uppercase !important; letter-spacing: .08em !important; border-radius: 3px; transition: background .2s; }
.uw-dl-btn:hover { background: #0099d6; }
/* Related publications */ .uw-dl-related { background: #f9fafb; padding: 40px 5% 56px; border-top: 1px solid #e8edf6; }
.uw-dl-related__inner { max-width: 1100px; margin: 0 auto; }
.uw-dl-related__heading { font-family: var(--kpy-font, Verdana, sans-serif); font-size: 1.15rem; font-weight: 700 !important; color: var(--kpy-primary, #35398e); margin: 0 0 24px; text-transform: none !important; }
.uw-dl-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.uw-dl-rel-card { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; background: #fff; border: 1px solid #e8edf6; border-radius: 4px; padding: 14px; transition: box-shadow .2s; }
.uw-dl-rel-card:hover { box-shadow: 0 4px 16px rgba(53, 57, 142, .1); }
.uw-dl-rel-card__thumb { width: 80px; flex-shrink: 0; }
.uw-dl-rel-card__thumb img { width: 100%; height: auto; display: block; border-radius: 3px; }
.uw-dl-rel-card__body h4 { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; font-weight: 700 !important; color: var(--kpy-base, #1a1d4e); margin: 0 0 6px; line-height: 1.35; text-transform: none !important; }
.uw-dl-rel-card__body span { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .75rem; color: var(--kpy-orange, #e05a2b); font-weight: 600 !important; }
@media (max-width: 860px) { .uw-dl-wrap { grid-template-columns: 1fr; }
.uw-dl-cover { max-width: 240px; }
.uw-dl-related__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .uw-dl-related__grid { grid-template-columns: 1fr; }
}
/* ================================================================ STRATEGIC OBJECTIVES — typography overrides consolidated above ================================================================ */ /* ================================================================ BOARD TEMPLATE — team-card h3 / span alignment ================================================================ */ .uw-team-card h3 { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; font-weight: 700 !important; color: var(--kpy-base, #1a1d4e); margin: 0 0 4px; text-transform: none !important; text-align: center; }
.uw-team-card span { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; color: var(--kpy-secondary, #00aeef); font-weight: 400 !important; text-align: center; display: block; }
/* ================================================================ PARTNERS / MEMBERSHIP pg-card h4 ================================================================ */ .uw-pg-card h4 { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; font-weight: 700 !important; color: var(--kpy-primary, #35398e); text-align: center; margin: 0; line-height: 1.4; text-transform: none !important; }
/* ================================================================ SLIDER — exact screenshot match Cards overlap the white wave at slider bottom. Wave curve height: 80px. Cards sit at -80px negative margin. ================================================================ */ /* Wave: white curved shape at very bottom of slider */ .uw-hero-slider__wave { position: absolute; bottom: -1px; left: 0; width: 100%; z-index: 12; line-height: 0; pointer-events: none; }
.uw-hero-slider__wave svg { display: block; width: 100%; height: 110px; }
/* Slide body — sits above the wave curve, clear of the overlapping cards */ .uw-slide-body { bottom: 240px !important; }
/* VMG band: pulled up to overlap the slider bottom */ .uw-vmg-band { position: relative; z-index: 20; padding: 0 5% 48px; background: transparent; margin-top: -200px !important; }
.uw-vmg-inner { display: flex; justify-content: center; align-items: stretch; gap: 20px; max-width: 900px; margin: 0 auto !important; pointer-events: all; }
/* Cards: equal height, centred content */ .uw-vmg-card { flex: 1; min-width: 180px; max-width: 260px; min-height: 180px; /* shared minimum height */ border-radius: 14px; padding: 36px 20px 36px; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; /* vertically centre all content */ gap: 10px; box-shadow: 0 16px 48px rgba(26, 29, 78, .32); border: 6px solid #fff; }
.uw-vmg-vision { background: #35398e; }
.uw-vmg-mission { background: #00aeef; margin-top: 0; /* remove the stagger — same height row */ padding-top: 36px; }
.uw-vmg-goal { background: #4a3fac; }
.uw-vmg-icon { font-size: 2.2rem; line-height: 1; color: rgba(255, 255, 255, .88); margin-bottom: 2px; }
.uw-vmg-card h3 { font-family: var(--kpy-font, Verdana, sans-serif); font-size: 1.1rem !important; font-weight: 700 !important; color: #fff !important; margin: 0 !important; text-transform: none !important; letter-spacing: .01em !important; }
.uw-vmg-card p { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem !important; font-weight: 400 !important; color: rgba(255, 255, 255, .92) !important; line-height: 1.6 !important; margin: 0 !important; }
@media (max-width: 768px) { .uw-vmg-inner { gap: 12px; }
.uw-vmg-mission { margin-top: -12px; padding-top: 38px; }
.uw-vmg-band { padding: 0 3% 32px; margin-top: -120px !important; }
}
@media (max-width: 560px) { .uw-vmg-inner { flex-direction: column; align-items: center; }
.uw-vmg-mission { margin-top: 0 !important; padding-top: 32px; }
.uw-vmg-card { max-width: 88%; width: 88%; }
.uw-vmg-band { margin-top: -40px !important; }
}
/* ================================================================ VIDEO GALLERY PAGE (.uw-vgallery__) Large featured embed + pagination label + 4-thumb strip. Matches the screenshot layout. ================================================================ */ .uw-vgallery { background: #fff; padding: 40px 0 64px; }
.uw-vgallery__inner { max-width: 920px; margin: 0 auto; padding: 0 5%; }
/* -- Featured embed — 16:9 with a subtle purple-to-transparent glow -- */ .uw-vgallery__featured { margin-bottom: 16px; }
.uw-vgallery__embed { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */ border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 4px rgba(53, 57, 142, .18), -8px 8px 28px rgba(100, 60, 180, .22), 8px 8px 28px rgba(100, 60, 180, .15); }
.uw-vgallery__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; }
/* -- Pagination label row -- */ .uw-vgallery__pager { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .88rem; color: var(--kpy-base, #1a1d4e); margin: 12px 0; }
.uw-vgallery__pager-count { font-weight: 600; }
.uw-vgallery__pager-next, .uw-vgallery__pager-prev { color: var(--kpy-primary, #35398e); text-decoration: none; font-weight: 600; transition: color .2s; }
.uw-vgallery__pager-next:hover, .uw-vgallery__pager-prev:hover { color: var(--kpy-secondary, #00aeef); }
/* -- Thumbnail strip — 4 columns -- */ .uw-vgallery__strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 8px 0 16px; }
.uw-vgallery__thumb { text-decoration: none; color: var(--kpy-primary, #35398e); display: block; }
.uw-vgallery__thumb-img-wrap { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 4px; border: 3px solid transparent; transition: border-color .2s; background: #111; }
.uw-vgallery__thumb--active .uw-vgallery__thumb-img-wrap, .uw-vgallery__thumb:hover .uw-vgallery__thumb-img-wrap { border-color: var(--kpy-primary, #35398e); }
.uw-vgallery__thumb-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s; }
.uw-vgallery__thumb:hover .uw-vgallery__thumb-img-wrap img { opacity: .88; }
.uw-vgallery__thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: rgba(255, 255, 255, .0); transition: color .2s; pointer-events: none; }
.uw-vgallery__thumb:hover .uw-vgallery__thumb-play { color: rgba(255, 255, 255, .85); }
.uw-vgallery__thumb-title { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .78rem; line-height: 1.4; color: var(--kpy-primary, #35398e); text-align: center; margin: 6px 0 0; padding: 0 2px; }
/* Responsive */ @media (max-width: 640px) { .uw-vgallery__strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) { .uw-vgallery__strip { grid-template-columns: 1fr 1fr; }
}
/* ================================================================ PHOTO GALLERY PAGE (.uw-pgallery__) Heading bar + card grid with stacked cover images + count badge. Matches the screenshot layout. ================================================================ */ .uw-pgallery { background: #f5f6fa; padding: 40px 0 72px; min-height: 50vh; }
.uw-pgallery__inner { max-width: 1160px; margin: 0 auto; padding: 0 5%; }
/* Title bar — light grey pill/strip matching screenshot */ .uw-pgallery__title-bar { background: #e8eaf2; border-radius: 3px; padding: 10px 18px; margin-bottom: 32px; display: inline-block; width: 100%; box-sizing: border-box; }
.uw-pgallery__heading { font-family: var(--kpy-font, Verdana, Arial, sans-serif); font-size: 1.15rem; font-weight: 700; color: var(--kpy-primary, #35398e); margin: 0; }
/* Album grid */ .uw-pgallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px; }
/* Album card */ .uw-pgallery__card { background: #fff; border-radius: 6px; box-shadow: 0 2px 12px rgba(53, 57, 142, .10); overflow: visible; transition: transform .2s, box-shadow .2s; }
.uw-pgallery__card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(53, 57, 142, .18); }
.uw-pgallery__card-link { text-decoration: none; color: inherit; display: block; }
/* Stacked image effect — back card peeking behind front */ .uw-pgallery__card-stack { position: relative; margin: 10px 10px 0; height: 160px; }
.uw-pgallery__card-back { position: absolute; bottom: -6px; right: -6px; width: 92%; height: 92%; border-radius: 4px; overflow: hidden; box-shadow: 2px 2px 6px rgba(0, 0, 0, .12); z-index: 1; }
.uw-pgallery__card-back img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uw-pgallery__card-front { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); z-index: 2; }
.uw-pgallery__card-front img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.uw-pgallery__card:hover .uw-pgallery__card-front img { transform: scale(1.04); }
/* Card info area */ .uw-pgallery__card-info { padding: 12px 12px 14px; position: relative; margin-top: 4px; }
.uw-pgallery__card-title { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .8rem; font-weight: 700; color: var(--kpy-primary, #35398e); line-height: 1.4; margin: 0; text-align: center; }
/* Photo count badge — top-right of the card info */ .uw-pgallery__card-count { position: absolute; top: -18px; right: 10px; background: rgba(53, 57, 142, .10); color: var(--kpy-primary, #35398e); font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .72rem; font-weight: 700; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 3; }
.uw-pgallery__empty { color: var(--kpy-grey, #5c6070); font-size: .95rem; padding: 40px 0; text-align: center; }
/* Responsive */ @media (max-width: 640px) { .uw-pgallery__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.uw-pgallery__card-stack { height: 120px; }
}
/* ================================================================ MEMBERSHIP / PARTNERS — logo placeholder when image 404s ================================================================ */ .uw-pg-logo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #bbb; font-size: .65rem; font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); letter-spacing: .05em; text-transform: uppercase; height: 70px; }
/* ================================================================ GLOBAL CONTENT CENTERING + LEFT/RIGHT MARGINS All page body content is capped at 1160px and centred. ================================================================ */ .uw-pub-wrap, .uw-page-body, .uw-whoweare-inner, .uw-programmes-inner, .uw-newsevents-inner, .uw-partners-inner, .uw-footer__inner, .uw-dl-wrap, .uw-dl-related__inner, .uw-pub-related-inner, .uw-pub-single-layout { max-width: 1160px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 5% !important; padding-right: 5% !important; box-sizing: border-box; }
/* Sections that are already full-width with internal padding — just centre */ .uw-whoweare-section, .uw-programmes-section, .uw-newsevents-section, .uw-partners-section { padding-left: 5%; padding-right: 5%; }
/* Override uw-dl-wrap which already has padding set inline */ .uw-dl-wrap { padding: 48px 5% !important; }
/* Remove underline from all Read More links */ .uw-readmore-btn, .uw-news-row__readmore, a.uw-readmore-btn { text-decoration: none !important; border-bottom: none !important; }
/* ================================================================ BOARD OF DIRECTORS — circular photo, name + position centred Matches screenshot: round headshots, navy name, cyan role, no card box ================================================================ */ .uw-board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; margin: 40px auto; max-width: 960px; padding: 0 5%; }
.uw-board-cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
.uw-board-cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 960px; }
.uw-board-cols-4 { grid-template-columns: repeat(4, 1fr); max-width: 1160px; }
.uw-board-cols-5 { grid-template-columns: repeat(5, 1fr); max-width: 1160px; }
/* Each member: centred column, no box */ .uw-board-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: transparent; border: none; box-shadow: none; gap: 0; }
/* Circular photo */ .uw-board-card__photo-wrap { width: 180px; height: 180px; border-radius: 50%; overflow: hidden; background: #e8edf5; flex-shrink: 0; margin-bottom: 18px; box-shadow: 0 0 0 6px #f5f7fb, 0 4px 20px rgba(53, 57, 142, .12); }
.uw-board-card__photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .4s; }
.uw-board-card:hover .uw-board-card__photo { transform: scale(1.06); }
/* Text block below photo */ .uw-board-card__body { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; }
/* Name — navy/purple bold */ .uw-board-card__name { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: 1rem; font-weight: 700 !important; color: var(--kpy-primary, #35398e); margin: 0; line-height: 1.35; text-transform: none !important; letter-spacing: 0 !important; }
/* Position — cyan, smaller */ .uw-board-card__position { font-family: var(--kpy-font-2, Verdana, Arial, sans-serif); font-size: .82rem; font-weight: 400; color: var(--kpy-secondary, #00aeef); margin: 2px 0 0; text-transform: none; letter-spacing: 0; }
/* Bio hidden — not shown in screenshot style */ .uw-board-card__bio { display: none; }
/* Social links */ .uw-board-card__links { display: flex; gap: 6px; margin-top: 10px; justify-content: center; }
.uw-board-card__link { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: opacity .2s; flex-shrink: 0; }
.uw-board-card__link:hover { opacity: .82; }
.uw-board-card__link--li { background: #0a66c2; }
.uw-board-card__link--email { background: var(--kpy-primary, #35398e); }
@media (max-width: 900px) { .uw-board-grid, .uw-board-cols-4, .uw-board-cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) { .uw-board-grid, .uw-board-cols-3, .uw-board-cols-4, .uw-board-cols-5 { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
.uw-board-card__photo-wrap { width: 130px; height: 130px; }
}
@media (max-width: 400px) { .uw-board-grid { grid-template-columns: 1fr; }
.uw-board-card__photo-wrap { width: 160px; height: 160px; }
}
/* ================================================================ COOKIE BANNER — stays fixed, never pushes footer ================================================================ */ .uw-cookie-banner { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 99990 !important; }
body.uw-cookie-visible { padding-bottom: 0 !important; }