/*==================================================================== Custom CSS File for most of Desktop and Mobile look for Kipya Template Developed by Amazing LWEGATECH LTD team. ===================================================================**/ @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800&display=swap'); :root {--kpy-font: "Nunito Sans", "Avenir Next", "Gill Sans", "Trebuchet MS", sans-serif; --kpy-font-2: "Nunito Sans", "Avenir Next", sans-serif; --kpy-font-3: "Georgia", "Times New Roman", serif; --kpy-primary: #e63329; --kpy-primary-rgb: 230, 51, 41; --kpy-secondary: #333333; --kpy-secondary-2: #1a1a1a; --kpy-light: #f4f4f4; --kpy-secondary-rgb: 51, 51, 51; --kpy-base: #ffffff; --kpy-base-rgb: 255, 255, 255; --kpy-gold: #FFD700; --kpy-grey: #6b6b6b; --kpy-white: #ffffff; --kpy-white-rgb: 255, 255, 255; --kpy-black: #1a1a1a; --kpy-font-size: 16px;} html, body {font-family: var(--kpy-font) !important; color: var(--kpy-black); font-size: var(--kpy-font-size); font-weight: 400; line-height: 1.6; text-rendering: auto; margin: 0; font-optical-sizing: auto;} /* ========================================================== Global: Font Import + Headings ========================================================== */ h1, h2, h3, h4, h5, h6, .wp-block-heading {font-family: var(--kpy-font) !important; color: var(--kpy-black); font-weight: 700; line-height: 1.3;} h1 {font-size: 2.4rem;} h2 {font-size: 2rem;} h3 {font-size: 1.6rem;} h4 {font-size: 1.3rem;} h5 {font-size: 1.1rem;} h6 {font-size: 1rem;} .kpy-section-heading {text-align: center; margin-bottom: 40px; padding: 0 16px;} .kpy-section-eyebrow {display: inline-block; font-family: var(--kpy-font); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kpy-primary); margin-bottom: 10px;} .kpy-section-title {font-family: var(--kpy-font); font-size: 2rem; font-weight: 800; color: var(--kpy-black); line-height: 1.25; margin: 0 0 10px;} .kpy-section-title-sub {color: var(--kpy-primary); display: inline;} .kpy-section-desc {font-family: var(--kpy-font); font-size: 1rem; color: var(--kpy-grey); margin: 0 auto; max-width: 620px; line-height: 1.7;} /* ============================================================= UDN HOME, ABOUT, PROGRAMS, GET INVOLVED SHARED CSS ============================================================= */ /* ── 1. DESIGN TOKENS ──────────────────────────────────────── */ :root {--udn-red: #E8291C; --udn-red-dark: #c0221a; --udn-dark: #111111; --udn-grey: #2d2d2d; --udn-text: #444444; --udn-light: #f5f5f5; --udn-white: #ffffff; --udn-border: rgba(232, 41, 28, 0.22);} /* ── 2. STRIP CONFLICTING THEME WRAPPERS ───────────────────── */ .udn-gutenberg-shell, .udn-gutenberg-shell--about {background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important;} .udn-gutenberg-shell::before, .udn-gutenberg-shell--about::before {display: none !important;} .udn-gutenberg-shell__inner {display: block !important; gap: 0 !important; padding: 0 !important;} .udn-gutenberg-shell .wp-block-group, .udn-gutenberg-shell .wp-block-cover, .udn-gutenberg-shell .wp-block-columns, .udn-gutenberg-shell .wp-block-media-text, .udn-gutenberg-shell .wp-block-image {padding: 0 !important; border-radius: 0 !important; border: none !important; background: none !important; box-shadow: none !important;} .about-layout {display: block !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important;} .about-main {flex: none !important; width: 100% !important; max-width: 100% !important;} .fc-page-article {padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; max-width: 100% !important; width: 100% !important;} .fc-page-content {padding: 0 !important; max-width: 100% !important;} /* ── 3. SHARED: EYEBROWS ───────────────────────────────────── */ .udn-eyebrow-white {display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem;} .udn-eyebrow-dash {display: inline-block; width: 28px; height: 2px; background: #fff; flex-shrink: 0;} .udn-eyebrow-red {display: inline-flex; align-items: center; gap: 8px; color: var(--udn-red); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.8rem;} .udn-eyebrow-dash-red {display: inline-block; width: 28px; height: 2px; background: var(--udn-red); flex-shrink: 0;} /* ── 4. SHARED: BUTTONS ────────────────────────────────────── */ .udn-btn-red {display: inline-flex; align-items: center; gap: 8px; background: var(--udn-red); color: #fff !important; padding: 14px 28px; font-weight: 700; font-size: 0.9rem; text-decoration: none !important; border-radius: 3px; transition: background 0.2s; border: none;} .udn-btn-red:hover {background: var(--udn-red-dark); color: #fff !important;} .udn-btn-outline-white {display: inline-flex; align-items: center; gap: 8px; border: 2px solid rgba(255, 255, 255, 0.75); color: #fff !important; padding: 12px 26px; font-weight: 700; font-size: 0.9rem; text-decoration: none !important; border-radius: 3px; transition: background 0.2s, border-color 0.2s;} .udn-btn-outline-white:hover {background: rgba(255, 255, 255, 0.12); border-color: #fff;} .udn-btn-outline-dark {display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--udn-dark); color: var(--udn-dark) !important; padding: 12px 26px; font-weight: 700; font-size: 0.9rem; text-decoration: none !important; border-radius: 3px; transition: background 0.2s;} .udn-btn-outline-dark:hover {background: var(--udn-dark); color: #fff !important;} /* ── 5. KEN BURNS ANIMATION ────────────────────────────────── */ @keyframes fcKbZoomIn {0% {transform: scale(1);} 100% {transform: scale(1.08);} } @keyframes fcKbZoomOut {0% {transform: scale(1.08);} 100% {transform: scale(1);} } /* ============================================================= FC HERO — shared across ALL templates ============================================================= */ .fc-hero-wrap {width: 100%; position: relative;} .fc-hero-card {position: relative; width: 100%; min-height: 400px; display: flex; align-items: flex-end; overflow: hidden; background: var(--udn-dark);} .fc-hero-bg {position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; transform-origin: center center;} .fc-hero-scrim {position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.72) 100%); z-index: 1;} .fc-hero-body {position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 3rem 5% 5rem; display: flex; flex-direction: column; gap: 1rem;} .fc-hero-title {color: #fff !important; font-size: 3rem; font-weight: 900; line-height: 1.1; margin: 0; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;} .fc-hero-star {color: var(--udn-red); font-size: 1.2rem; opacity: 0.85;} .fc-hero-breadcrumb {display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7);} .fc-hero-breadcrumb a {color: rgba(255, 255, 255, 0.7) !important; text-decoration: none !important; transition: color 0.15s;} .fc-hero-breadcrumb a:hover {color: #fff !important;} .fc-hero-bc-sep {opacity: 0.45;} @media(max-width:768px) {.fc-hero-card {min-height: 260px;} .fc-hero-title {font-size: 2rem !important;} .fc-hero-body {padding: 2rem 5% 3.5rem;} } /* ============================================================= HOMEPAGE SECTION 1 — WHO WE ARE (v3 — cover+overlap cards) ============================================================= */ .udn-who {position: relative; width: 100%; box-sizing: border-box;} /* Cover image zone */ .udn-who-cover {position: relative; width: 100%; height: 520px; overflow: hidden;} .udn-who-cover-img {position: absolute; inset: 0; background-size: cover; background-position: center top; z-index: 0; transform-origin: center; animation: fcKbZoomIn 14s ease-in-out infinite alternate;} .udn-who-cover-scrim {position: absolute; inset: 0; background: linear-gradient(160deg, rgba(232, 41, 28, 0.75) 0%, rgba(20, 20, 20, 0.88) 100%); z-index: 1;} /* Text sits on the cover */ .udn-who-inner {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0 5% 200px; text-align: center;} .udn-who-text-wrap {max-width: 640px; display: flex; flex-direction: column; align-items: center;} .udn-who-heading {color: #fff !important; font-size: 3.2rem; font-weight: 900; margin: 0 0 1.2rem; line-height: 1.1; letter-spacing: -0.02em;} .udn-who-lead {color: rgba(255, 255, 255, 0.88) !important; font-size: 1rem; line-height: 1.85; margin: 0 0 2rem; max-width: 560px;} /* Overlapping cards row — pulled up into cover bottom */ .udn-who-cards-wrap {position: relative; z-index: 3; margin-top: -80px; padding: 0 5% 0; box-sizing: border-box;} .udn-who-cards {max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-bottom: 60px;} /* Individual card variants */ .udn-who-card {padding: 2rem 1.8rem; display: flex; flex-direction: column; gap: 0.8rem; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);} .udn-who-card--red {background: var(--udn-red);} .udn-who-card--dark {background: var(--udn-dark);} .udn-who-card--grey {background: #1e1e1e; justify-content: center;} .udn-who-card-icon {width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 0.4rem;} .udn-who-card--red .udn-who-card-icon {background: rgba(255, 255, 255, 0.18); color: #fff;} .udn-who-card--dark .udn-who-card-icon {background: rgba(232, 41, 28, 0.18); color: var(--udn-red);} .udn-who-card-title {color: #fff !important; font-size: 1.1rem; font-weight: 800; margin: 0; line-height: 1.3;} .udn-who-card-text {color: rgba(255, 255, 255, 0.82) !important; font-size: 0.9rem; line-height: 1.75; margin: 0;} /* Stats card interior */ .udn-who-stats {display: flex; align-items: center; gap: 1rem; justify-content: space-around; width: 100%;} .udn-who-stat {display: flex; flex-direction: column; align-items: center; gap: 0.25rem;} .udn-who-stat-num {color: #fff !important; font-size: 2.2rem; font-weight: 900; line-height: 1;} .udn-who-stat-num sup {font-size: 1.1rem;} .udn-who-stat-label {color: rgba(255, 255, 255, 0.65) !important; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-align: center;} .udn-who-stat-div {width: 1px; height: 50px; background: rgba(255, 255, 255, 0.2);} @media(max-width:860px) {.udn-who-cover {height: 420px;} .udn-who-heading {font-size: 2.2rem !important;} .udn-who-cards {grid-template-columns: 1fr;} .udn-who-cards-wrap {margin-top: 0;} .udn-who-inner {position: relative; height: auto; padding: 3rem 5% 2rem;} .udn-who {display: flex; flex-direction: column;} } /* ============================================================= HOMEPAGE SECTION 2 — OUR PROGRAMS (unchanged, kept) ============================================================= */ .udn-s2 {background: #fff; padding: 100px 5% 110px; position: relative; width: 100%; box-sizing: border-box;} .udn-s2-inner {max-width: 1200px; margin: 0 auto;} .udn-s2-header {display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 3.5rem;} .udn-s2-heading {font-size: 2.6rem; font-weight: 900; color: var(--udn-dark) !important; margin: 0.4rem 0 0.8rem; line-height: 1.15; letter-spacing: -0.01em;} .udn-s2-sub {font-size: 0.95rem; line-height: 1.8; color: var(--udn-text) !important; margin: 0; max-width: 520px;} .udn-s2-header-cta {flex-shrink: 0;} .udn-s2-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;} .udn-prog-card {border-top: 3px solid var(--udn-red); border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; padding: 2rem 1.6rem 1.8rem; display: flex; flex-direction: column; background: #fff; position: relative; transition: box-shadow 0.2s, transform 0.2s;} .udn-prog-card:hover {box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transform: translateY(-4px);} .udn-prog-num {position: absolute; top: 1.4rem; right: 1.6rem; font-size: 2.4rem; font-weight: 900; color: rgba(232, 41, 28, 0.08); line-height: 1; user-select: none;} .udn-prog-icon-wrap {width: 50px; height: 50px; background: rgba(232, 41, 28, 0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--udn-red); font-size: 1.4rem; margin-bottom: 1.2rem;} .udn-prog-title {font-size: 1rem; font-weight: 800; color: var(--udn-dark) !important; margin: 0 0 0.8rem; line-height: 1.4;} .udn-prog-text {font-size: 0.875rem; line-height: 1.75; color: var(--udn-text) !important; margin: 0 0 1rem; flex-grow: 1;} .udn-prog-list {list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem;} .udn-prog-list li {display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--udn-text);} .udn-prog-list li .bi {color: var(--udn-red); font-size: 0.55rem;} .udn-prog-link {display: inline-flex; align-items: center; gap: 7px; color: var(--udn-red) !important; font-weight: 700; font-size: 0.88rem; text-decoration: none !important; margin-top: auto; padding-top: 1rem; border-top: 1px solid #f0f0f0;} .udn-prog-link:hover {gap: 11px; color: var(--udn-red-dark) !important;} .udn-s2-chevron {position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 65px solid transparent; border-right: 65px solid transparent; border-top: 42px solid #fff; z-index: 20;} @media(max-width:960px) {.udn-s2-header {flex-direction: column; align-items: flex-start;} .udn-s2-cards {grid-template-columns: 1fr;} } @media(min-width:601px) and (max-width:960px) {.udn-s2-cards {grid-template-columns: repeat(2, 1fr);} } /* ============================================================= ABOUT PAGE — SECTION A: Intro ============================================================= */ .udn-about-intro {background: #fff; padding: 80px 5%; width: 100%; box-sizing: border-box;} .udn-about-intro-inner {max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;} .udn-about-imgcol {display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;} .udn-about-img-main {grid-column: 1/3;} .udn-about-img-large {width: 100%; height: 260px; object-fit: cover; border-radius: 4px; display: block;} .udn-about-img-secondary {grid-column: 2/3;} .udn-about-img-small {width: 100%; height: 180px; object-fit: cover; border-radius: 4px; display: block;} .udn-stat-badge {background: var(--udn-red); color: #fff; padding: 1.4rem 1.2rem; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; grid-column: 1/2;} .udn-stat-number {font-size: 2.4rem; font-weight: 900; line-height: 1; color: #fff !important;} .udn-stat-label {font-size: 0.78rem; font-weight: 600; text-align: center; margin-top: 0.4rem; line-height: 1.35; opacity: 0.9; color: #fff !important;} .udn-about-textcol {display: flex; flex-direction: column; align-items: flex-start;} .udn-about-heading {font-size: 2.3rem; font-weight: 900; color: var(--udn-dark) !important; margin: 0.4rem 0 1.2rem; line-height: 1.2; letter-spacing: -0.01em;} .udn-about-p {font-size: 0.95rem; line-height: 1.85; color: var(--udn-text) !important; margin: 0 0 1rem;} .udn-check-list {list-style: none; margin: 1rem 0 1.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem;} .udn-check-list li {display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 600; color: var(--udn-dark);} .udn-check-list li .bi {color: var(--udn-red); font-size: 1.05rem;} .udn-about-ctas {display: flex; gap: 1rem; flex-wrap: wrap;} @media(max-width:860px) {.udn-about-intro-inner {grid-template-columns: 1fr; gap: 2.5rem;} } /* ============================================================= ABOUT PAGE — SECTION B: Core Values ============================================================= */ .udn-values {background: var(--udn-light); padding: 80px 5% 90px; width: 100%; box-sizing: border-box;} .udn-values-inner {max-width: 1200px; margin: 0 auto;} .udn-values-header {margin-bottom: 3rem;} .udn-values-heading {font-size: 2.4rem; font-weight: 900; color: var(--udn-dark) !important; margin: 0.4rem 0 0.8rem; line-height: 1.15; letter-spacing: -0.01em;} .udn-values-sub {font-size: 0.95rem; line-height: 1.8; color: var(--udn-text) !important; max-width: 600px; margin: 0;} .udn-values-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;} .udn-val-card {background: #fff; padding: 2rem 1.6rem 1.4rem; position: relative; border-bottom: 3px solid transparent; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;} .udn-val-card:hover {border-bottom-color: var(--udn-red); box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08); transform: translateY(-3px);} .udn-val-card--wide {grid-column: 1/3;} .udn-val-num {position: absolute; top: 1.2rem; right: 1.4rem; font-size: 2.8rem; font-weight: 900; color: rgba(232, 41, 28, 0.07); line-height: 1; user-select: none;} .udn-val-icon {width: 46px; height: 46px; background: rgba(232, 41, 28, 0.09); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--udn-red); font-size: 1.25rem; margin-bottom: 1rem;} .udn-val-title {font-size: 1rem; font-weight: 800; color: var(--udn-dark) !important; margin: 0 0 0.7rem; line-height: 1.35;} .udn-val-text {font-size: 0.875rem; line-height: 1.75; color: var(--udn-text) !important; margin: 0;} @media(max-width:960px) {.udn-values-grid {grid-template-columns: repeat(2, 1fr);} .udn-val-card--wide {grid-column: 1/3;} } @media(max-width:600px) {.udn-values-grid {grid-template-columns: 1fr;} .udn-val-card--wide {grid-column: 1;} } /* ============================================================= ABOUT PAGE BOTTOM — cover image + overlapping info cards ============================================================= */ .udn-about-bottom {position: relative; width: 100%; box-sizing: border-box;} .udn-about-cover-wrap {position: relative; width: 100%; height: 340px; overflow: hidden;} .udn-about-cover-img {position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0;} .udn-about-cover-scrim {position: absolute; inset: 0; background: linear-gradient(135deg, rgba(232, 41, 28, 0.7) 0%, rgba(17, 17, 17, 0.88) 100%); z-index: 1;} .udn-about-cover-text {position: absolute; bottom: 80px; left: 5%; z-index: 2;} .udn-about-cover-tagline {color: #fff !important; font-size: 1.6rem; font-weight: 800; line-height: 1.3; margin: 0; max-width: 420px;} /* Overlapping cards */ .udn-about-info-cards {position: relative; z-index: 3; margin-top: -60px; padding: 0 5% 70px; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1300px; margin-left: auto; margin-right: auto;} /* Card base */ .udn-info-card {padding: 2rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);} .udn-info-card--red {background: var(--udn-red);} .udn-info-card--dark {background: var(--udn-dark);} .udn-info-card--white {background: #fff; border-top: 3px solid var(--udn-red);} .udn-info-card-icon {width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 0.3rem;} .udn-info-card--red .udn-info-card-icon {background: rgba(255, 255, 255, 0.18); color: #fff;} .udn-info-card--dark .udn-info-card-icon {background: rgba(232, 41, 28, 0.2); color: var(--udn-red);} .udn-info-card-icon--red {background: rgba(232, 41, 28, 0.1) !important; color: var(--udn-red) !important;} .udn-info-card-title {color: #fff !important; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin: 0;} .udn-info-card-title--dark {color: var(--udn-red) !important;} .udn-info-card-text {color: rgba(255, 255, 255, 0.83) !important; font-size: 0.93rem; line-height: 1.75; margin: 0;} /* Link list inside white card */ .udn-info-links {list-style: none !important; padding: 0.2rem 0 !important; margin: 0 !important;} .udn-info-links li {list-style: none !important; border-bottom: 1px solid #f0f0f0; margin: 0 !important;} .udn-info-links li:last-child {border-bottom: none;} .udn-info-links li a {display: flex; align-items: center; gap: 8px; padding: 0.72rem 0; font-size: 0.9rem; font-weight: 600; color: var(--udn-dark) !important; text-decoration: none !important; transition: color 0.15s, gap 0.15s;} .udn-info-links li a .bi {color: var(--udn-red); font-size: 0.8rem;} .udn-info-links li a:hover {color: var(--udn-red) !important; gap: 12px;} .udn-info-links li::before {display: none !important;} @media(max-width:860px) {.udn-about-info-cards {grid-template-columns: 1fr; margin-top: 0;} .udn-about-cover-text {bottom: 20px;} } /* ============================================================= SIDEBAR LAYOUT TEMPLATE (programs / resources / get involved) ============================================================= */ .udn-layout {padding: 60px 5%; display: flex; gap: 2.5rem; max-width: 1300px; margin: 0 auto; box-sizing: border-box; align-items: flex-start;} .udn-main {flex: 2.6; min-width: 0;} .udn-sidebar {flex: 0 0 300px; max-width: 300px;} @media(max-width:900px) {.udn-layout {flex-direction: column; padding: 40px 5%;} .udn-sidebar {flex: none; max-width: 100%; width: 100%;} } /* Sidebar cover image + overlap */ .udn-sidebar-cover-wrap {position: relative; width: 100%; height: 180px; overflow: hidden; margin-bottom: -40px;} .udn-sidebar-cover-img {position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0;} .udn-sidebar-cover-scrim {position: absolute; inset: 0; background: linear-gradient(160deg, rgba(232, 41, 28, 0.72) 0%, rgba(17, 17, 17, 0.88) 100%); z-index: 1;} .udn-sidebar-cover-label {position: absolute; bottom: 12px; left: 14px; z-index: 2; color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; opacity: 0.75;} /* Overlapping widget cards */ .udn-sidebar-cards {position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.2rem;} .udn-widget-card {background: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);} .udn-widget-card-head {display: flex; align-items: center; gap: 10px; background: var(--udn-red); color: #fff; padding: 0.9rem 1.2rem;} .udn-widget-card-head--dark {background: var(--udn-dark);} .udn-widget-card-head h3 {margin: 0 !important; font-size: 0.75rem !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #fff !important;} .udn-widget-card-head .bi {font-size: 1rem; color: #fff;} .udn-widget-card-body {padding: 1rem 1.2rem 1.2rem;} /* News items */ .udn-news-item {display: flex; gap: 10px; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #f0f0f0;} .udn-news-item:last-of-type {border-bottom: none; margin-bottom: 0;} .udn-news-thumb img {width: 58px; height: 58px; object-fit: cover; display: block; flex-shrink: 0;} .udn-news-text {display: flex; flex-direction: column; gap: 4px;} .udn-news-title {font-size: 0.85rem; font-weight: 600; color: var(--udn-dark) !important; text-decoration: none !important; line-height: 1.4; display: block;} .udn-news-title:hover {color: var(--udn-red) !important;} .udn-news-date {font-size: 0.75rem; color: #999;} /* Event items */ .udn-event-item {display: flex; align-items: center; gap: 12px; margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid #f0f0f0;} .udn-event-item:last-child {border-bottom: none; margin-bottom: 0;} .udn-event-date-badge {background: var(--udn-red); color: #fff; min-width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 3px;} .udn-event-day {font-size: 1.2rem; font-weight: 900; line-height: 1;} .udn-event-month {font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85;} .udn-event-title {font-size: 0.85rem; font-weight: 600; color: var(--udn-dark) !important; text-decoration: none !important; line-height: 1.4; display: block;} .udn-event-title:hover {color: var(--udn-red) !important;} /* Widget footer link */ .udn-widget-more {display: inline-flex; align-items: center; gap: 6px; margin-top: 0.8rem; font-size: 0.82rem; font-weight: 700; color: var(--udn-red) !important; text-decoration: none !important;} .udn-widget-more:hover {gap: 10px;} .udn-widget-empty {font-size: 0.85rem; color: #999; margin: 0;} /* ============================================================= APPROACHES PAGE ============================================================= */ /* Intro band */ .udn-ap-intro {background: #fff; padding: 70px 5% 0; width: 100%; box-sizing: border-box;} .udn-ap-intro-inner {max-width: 1200px; margin: 0 auto;} .udn-ap-intro-text {margin-bottom: 2.5rem;} .udn-ap-heading {font-size: 2.6rem; font-weight: 900; color: var(--udn-dark) !important; margin: 0.4rem 0 1rem; line-height: 1.15; letter-spacing: -0.01em;} .udn-ap-lead {font-size: 1rem; line-height: 1.85; color: var(--udn-text) !important; max-width: 620px; margin: 0;} /* Stat bar — Genical counter style */ .udn-ap-stat-row {display: flex; align-items: center; gap: 0; border: 1px solid #ebebeb; background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);} .udn-ap-stat {flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.8rem 1rem; gap: 0.3rem; text-align: center;} .udn-ap-stat-num {font-size: 2.8rem; font-weight: 900; color: var(--udn-red) !important; line-height: 1;} .udn-ap-stat-num sup {font-size: 1.4rem;} .udn-ap-stat-label {font-size: 0.75rem; font-weight: 600; color: var(--udn-text) !important; text-transform: uppercase; letter-spacing: 0.08em;} .udn-ap-stat-sep {width: 1px; height: 60px; background: #ebebeb; flex-shrink: 0;} @media(max-width:680px) {.udn-ap-stat-row {flex-wrap: wrap;} .udn-ap-stat {flex: 1 1 45%;} .udn-ap-stat-sep {display: none;} } /* Cards grid */ .udn-ap-grid-wrap {background: var(--udn-light); padding: 60px 5% 70px; width: 100%; box-sizing: border-box;} .udn-ap-grid-inner {max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;} .udn-ap-card {background: #fff; padding: 2rem 1.6rem 1.6rem; position: relative; border-top: 3px solid transparent; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; display: flex; flex-direction: column; gap: 0;} .udn-ap-card:hover {border-top-color: var(--udn-red); box-shadow: 0 10px 36px rgba(0, 0, 0, 0.1); transform: translateY(-4px);} .udn-ap-card--wide {grid-column: 1/3;} .udn-ap-card-num {position: absolute; top: 1rem; right: 1.2rem; font-size: 3rem; font-weight: 900; color: rgba(232, 41, 28, 0.06); line-height: 1; user-select: none;} .udn-ap-icon-wrap {width: 48px; height: 48px; background: rgba(232, 41, 28, 0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--udn-red); font-size: 1.3rem; margin-bottom: 1rem;} .udn-ap-card-title {font-size: 1rem; font-weight: 800; color: var(--udn-dark) !important; margin: 0 0 0.7rem; line-height: 1.35;} .udn-ap-card-text {font-size: 0.875rem; line-height: 1.8; color: var(--udn-text) !important; margin: 0; flex-grow: 1;} .udn-ap-card-bar {height: 2px; background: var(--udn-red); width: 0; margin-top: 1.2rem; transition: width 0.3s;} .udn-ap-card:hover .udn-ap-card-bar {width: 40px;} @media(max-width:900px) {.udn-ap-grid-inner {grid-template-columns: repeat(2, 1fr);} .udn-ap-card--wide {grid-column: 1/3;} } @media(max-width:580px) {.udn-ap-grid-inner {grid-template-columns: 1fr;} .udn-ap-card--wide {grid-column: 1;} } /* Full-bleed CTA band */ .udn-ap-cta-band {position: relative; width: 100%; min-height: 280px; display: flex; align-items: center; overflow: hidden;} .udn-ap-cta-band-bg {position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0;} .udn-ap-cta-band-scrim {position: absolute; inset: 0; background: linear-gradient(135deg, rgba(232, 41, 28, 0.82) 0%, rgba(17, 17, 17, 0.9) 100%); z-index: 1;} .udn-ap-cta-inner {position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 4rem 5%; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;} .udn-ap-cta-heading {color: #fff !important; font-size: 2.2rem; font-weight: 900; line-height: 1.2; margin: 0; max-width: 600px;} .udn-ap-cta-text {color: rgba(255, 255, 255, 0.82) !important; font-size: 1rem; line-height: 1.75; margin: 0;} .udn-ap-cta-btns {display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem;} @media(max-width:680px) {.udn-ap-cta-heading {font-size: 1.6rem !important;} } /* ============================================================= ARROW LIST — inner page content ============================================================= */ .kpy-arrow-list {list-style: none !important; padding-left: 0 !important; margin-left: 0 !important;} .kpy-arrow-list li, .kpy-arrow-list.wp-block-list li {position: relative; padding-left: 1.8rem !important; margin-bottom: 0.7rem; font-size: 0.96rem; line-height: 1.75; color: var(--udn-text) !important; list-style: none !important;} .kpy-arrow-list li::before, .kpy-arrow-list.wp-block-list li::before {content: "→"; position: absolute; left: 0; top: 0; color: var(--udn-red); font-weight: 700;} /* ============================================================= INNER PAGE SIDEBAR — kpy- classes ============================================================= */ .kpy-page-layout {gap: 2.5rem !important; align-items: flex-start !important;} .kpy-main-col {flex: 1 1 65% !important;} .kpy-sidebar-col {flex: 0 0 280px !important; max-width: 280px !important;} @media(max-width:781px) {.kpy-sidebar-col {flex: 1 1 100% !important; max-width: 100% !important;} } .kpy-sidebar-widget {border: none !important; overflow: hidden !important; border-radius: 0 !important; margin-bottom: 1.5rem !important; background: #fff !important; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;} .kpy-sidebar-title {background: var(--udn-red) !important; color: #fff !important; font-size: 0.72rem !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; padding: 0.85rem 1.2rem !important; margin: 0 !important; line-height: 1.3 !important;} .kpy-sidebar-links {list-style: none !important; padding: 0.3rem 0 !important; margin: 0 !important;} .kpy-sidebar-links li {list-style: none !important; border-bottom: 1px solid #f2f2f2; margin: 0 !important; padding: 0 !important;} .kpy-sidebar-links li:last-child {border-bottom: none;} .kpy-sidebar-links li a {display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.2rem; font-size: 0.9rem; font-weight: 600; color: var(--udn-dark) !important; text-decoration: none !important; transition: background 0.15s, color 0.15s;} .kpy-sidebar-links li a::after {content: '→'; color: var(--udn-red); font-size: 0.85rem; transition: transform 0.15s;} .kpy-sidebar-links li a:hover {background: var(--udn-light); color: var(--udn-red) !important;} .kpy-sidebar-links li a:hover::after {transform: translateX(3px);} .kpy-sidebar-links li::before {display: none !important; content: none !important;} .kpy-sidebar-body {background: var(--udn-light) !important; padding: 1.1rem 1.2rem !important;} .kpy-sidebar-body p {font-size: 0.88rem !important; color: var(--udn-text) !important; margin-bottom: 0.4rem !important; line-height: 1.6 !important;} .kpy-sidebar-body p strong {color: var(--udn-dark) !important; font-weight: 700 !important;} .kpy-sidebar-body a {color: var(--udn-red) !important; text-decoration: none !important;} .kpy-sidebar-body a:hover {text-decoration: underline !important;} /* ============================================================= UTILITY HELPERS ============================================================= */ .udn-red-bg {background-color: #E8291C; color: #fff;} .udn-grid-2col {display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;} .udn-grid-3col {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;} .udn-card {border: 1px solid #E8291C; border-radius: 4px; padding: 2rem;} .udn-divider {border-top: 1px solid rgba(255, 255, 255, 0.4); margin: 1rem 0;} .udn-label {color: #E8291C; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;} .udn-section {padding: 4rem 2rem; max-width: 1200px; margin: 0 auto;} .udn-dark-bg {background-color: #1e1e1e; color: #fff;} @media(max-width:768px) {.udn-grid-2col, .udn-grid-3col {grid-template-columns: 1fr;} } /** ========================================================== Menu ===========================================================**/ .site-header, .site-header * {box-sizing: border-box;} .site-header {position: relative; z-index: 1100;} .hdr-main {min-height: 82px; background: #fff; overflow: hidden;} .hdr-left {background: #fff; min-height: 82px; padding: 0 20px 0 24px; overflow: visible !important; min-width: 0;} .hdr-top-svg-bg {position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;} .hdr-top-svg-bg svg {width: 100%; height: 100%;} .hdr-logo img {height: 58px; width: auto; display: block;} .hdr-right {background: var(--kpy-primary, #E8241C); min-width: 130px; flex-shrink: 0; clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%); overflow: hidden;} .hdr-right-actions {gap: 4px;} .hdr-action-btn {background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; width: 40px; height: 40px; cursor: pointer; padding: 0; border-radius: 0; flex-shrink: 0; transition: background .2s; display: flex; align-items: center; justify-content: center;} .hdr-action-btn:hover {background: rgba(255, 255, 255, .18);} .hdr-grid-toggle {width: 40px; height: 40px; padding: 10px;} .hdr-grid-inner {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; width: 18px; height: 18px;} .hgt-dot {width: 7px; height: 7px; background: #fff; border-radius: 1px; display: block;} .hdr-sticky .hdr-main {position: fixed; top: 0; left: 0; right: 0; z-index: 1100; box-shadow: 0 4px 18px rgba(0, 0, 0, .15); animation: slideDown .3s ease;} @keyframes slideDown {from {transform: translateY(-100%);} to {transform: translateY(0);} } /* Search overlay */ .hdr-search-overlay {position: fixed; inset: 0; background: rgba(10, 10, 10, .85); z-index: 99999; display: flex; align-items: flex-start; justify-content: center; padding-top: 90px; opacity: 0; pointer-events: none; transition: opacity .3s ease; backdrop-filter: blur(5px);} .hdr-search-overlay.open {opacity: 1; pointer-events: auto;} .hdr-search-box {position: relative; width: 100%; max-width: 700px; padding: 0 24px;} .hdr-search-box::before {content: "What are you looking for?"; display: block; color: rgba(255, 255, 255, .5); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 10px; padding-left: 2px;} .hdr-search-box form {display: flex; background: #fff; overflow: hidden; border-radius: 0; box-shadow: 0 32px 80px rgba(0, 0, 0, .45);} .hdr-search-box input[type="search"] {flex: 1; border: none; outline: none; padding: 20px 22px; font-size: 1.15rem; font-family: inherit; color: #111; background: #fff;} .hdr-search-box input[type="search"]::placeholder {color: #bbb;} .hdr-search-box button[type="submit"] {background: var(--kpy-primary, #E8241C); border: none; color: #fff; padding: 0 28px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; transition: background .2s; flex-shrink: 0;} .hdr-search-box button[type="submit"]:hover {background: #c01a13;} .hdr-search-hint {display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-left: 2px;} .hdr-search-hint span {font-size: .72rem; color: rgba(255, 255, 255, .38); letter-spacing: .04em;} .hdr-search-hint kbd {display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .55); font-size: .65rem; font-family: inherit; padding: 2px 7px; border-radius: 3px; letter-spacing: .03em;} .search-overlay-close {position: absolute; top: -52px; right: 24px; background: transparent; border: 1.5px solid rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .7); width: 38px; height: 38px; font-size: 1rem; cursor: pointer; border-radius: 0; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s;} .search-overlay-close:hover {background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6);} /* Desktop Nav */ .udn-menu {display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; gap: 0;} .udn-menu li {list-style: none; position: relative;} .udn-menu li::before, .udn-menu li::after {display: none !important; content: none !important;} .hdr-nav-menu {min-width: 0; overflow: hidden;} .udn-nav-link {display: flex; align-items: center; gap: 5px; padding: 28px 10px; font-size: .79rem; font-weight: 700; text-transform: capitalize; color: #222; text-decoration: none; white-space: nowrap; letter-spacing: .01em; background: transparent; border: none; cursor: pointer; transition: color .2s; line-height: 1;} .udn-nav-link:hover, .udn-menu>li.current-menu-item>.udn-nav-link, .udn-menu>li.current-menu-ancestor>.udn-nav-link {color: var(--kpy-primary, #E8241C);} .udn-menu>li>a.udn-nav-link::after, .udn-menu>li>a.udn-nav-link::before, .udn-menu li.menu-item-has-children>a.udn-nav-link::after, .udn-menu li.menu-item-has-children>a.udn-nav-link::before {display: none !important; content: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important;} .udn-caret {display: inline-block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 4px; margin-bottom: 3px; transition: transform .25s ease; vertical-align: middle; flex-shrink: 0;} .udn-menu>li:hover>.udn-nav-link .udn-caret {transform: rotate(-135deg); margin-bottom: -1px;} /* Dropdown */ .udn-dropdown {list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0; min-width: 260px; background: #fff; border-top: 3px solid var(--kpy-primary, #E8241C); border-radius: 0 0 10px 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .22), 0 4px 14px rgba(0, 0, 0, .12); z-index: 999999; visibility: hidden; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;} .udn-menu>li:hover>.udn-dropdown {visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s;} .udn-dropdown li {border: none !important; margin: 0 !important;} .udn-dropdown li::before, .udn-dropdown li::after {display: none !important; content: none !important;} .udn-dropdown li+li>.udn-sub-link {border-top: 1px solid rgba(0, 0, 0, .05);} .udn-sub-link {display: flex !important; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 7px; text-decoration: none; color: #111; background: transparent; border: none; transition: background .18s;} .udn-sub-link:hover {background: rgba(232, 36, 28, .07);} .udn-sub-icon {width: 36px; height: 36px; border-radius: 7px; background: rgba(232, 36, 28, .1); color: var(--kpy-primary, #E8241C); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem; transition: background .18s, color .18s;} .udn-sub-link:hover .udn-sub-icon {background: var(--kpy-primary, #E8241C); color: #fff;} .udn-sub-label {font-size: .88rem; font-weight: 600; color: #222; line-height: 1.3; transition: color .18s;} .udn-sub-link:hover .udn-sub-label {color: var(--kpy-primary, #E8241C);} .udn-dropdown li.current-menu-item>.udn-sub-link .udn-sub-icon {background: var(--kpy-primary, #E8241C); color: #fff;} .udn-dropdown li.current-menu-item>.udn-sub-link .udn-sub-label {color: var(--kpy-primary, #E8241C);} /* Side panel */ .panel-overlay {display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .38); z-index: 19999;} .panel-overlay.open {display: block;} .udn-grid-panel {position: fixed; top: 0; right: -380px; width: 360px; height: 100vh; background: #fff; z-index: 20000; box-shadow: -4px 0 24px rgba(0, 0, 0, .14); transition: right .35s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column;} .udn-grid-panel.open {right: 0;} .panel-head {background: var(--kpy-primary, #E8241C); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;} .panel-head h3 {color: #fff; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0;} .panel-close {background: transparent; border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; width: 34px; height: 34px; cursor: pointer; font-size: 1.1rem; border-radius: 0; display: flex; align-items: center; justify-content: center;} .panel-body {padding: 28px 24px; flex: 1; overflow-y: auto;} .panel-section-title {font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--kpy-primary, #E8241C); margin-bottom: 14px; padding-bottom: 6px; border-bottom: 2px solid var(--kpy-primary, #E8241C);} .contact-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px;} .contact-card {background: #fafafa; border: 1px solid #eee; padding: 14px; display: flex; flex-direction: column; gap: 6px;} .contact-card .cc-icon {width: 32px; height: 32px; background: var(--kpy-primary, #E8241C); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem;} .contact-card .cc-label {font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #888; font-weight: 700;} .contact-card .cc-val {font-size: .83rem; color: #111; font-weight: 500; line-height: 1.4;} .social-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;} .social-btn {display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: #fafafa; border: 1px solid #eee; text-decoration: none; color: #111; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; transition: background .2s, color .2s;} .social-btn:hover {background: var(--kpy-primary, #E8241C); color: #fff;} .social-btn img {width: 22px; height: 22px; object-fit: contain;} .social-btn:hover img {filter: brightness(0) invert(1);} /* Mobile bar */ .udn-mobile-bar {background: #fff; border-bottom: 1px solid #eee;} .udn-mobile-logo img {height: 48px; width: auto;} .udn-offcanvas-toggle {display: flex; flex-direction: column; gap: 5px; padding: 4px; cursor: pointer; background: transparent; border: none;} .udn-hamburger {display: block; width: 26px; height: 3px; background: #111; border-radius: 2px;} .udn-offcanvas {width: 290px !important; border-radius: 0 !important;} .udn-offcanvas .offcanvas-header {border-bottom: 2px solid var(--kpy-primary, #E8241C); padding: 16px 20px;} .udn-mobile-menu {list-style: none; margin: 0; padding: 0;} .udn-mobile-menu li {list-style: none; border-bottom: 1px solid rgba(232, 36, 28, .2);} .udn-mobile-menu li::before, .udn-mobile-menu li::after {display: none !important; content: none !important;} .udn-mobile-menu>li>a {display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; font-size: .9rem; font-weight: 700; text-transform: capitalize; color: #111; text-decoration: none; transition: background .2s, color .2s;} .udn-mobile-menu>li>a:hover, .udn-mobile-menu>li.current-menu-item>a {background: var(--kpy-primary, #E8241C); color: #fff;} .udn-mobile-menu .menu-item-has-children>a::after {content: "▾"; font-size: .8rem; transition: transform .3s;} .udn-mobile-menu .menu-item-has-children.open>a::after {transform: rotate(180deg);} .udn-mobile-menu .sub-menu {list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height .35s ease; background: #fafafa;} .udn-mobile-menu .sub-menu li {border-bottom: 1px solid rgba(232, 36, 28, .15);} .udn-mobile-menu .sub-menu li a {display: block; padding: 11px 20px 11px 32px; font-size: .88rem; color: #333; text-decoration: none; font-weight: 500; transition: background .2s, color .2s;} .udn-mobile-menu .sub-menu li a:hover {background: var(--kpy-primary, #E8241C); color: #fff;} .udn-mobile-search {cursor: pointer;} /* Responsive nav squeeze */ @media (min-width: 992px) and (max-width: 1280px) {.udn-nav-link {padding: 28px 7px; font-size: .75rem; letter-spacing: 0;} } /** ========================================================== Footer ===========================================================**/ .kpy-footer {font-family: var(--kpy-font); background: #1f1f1f; color: rgba(255, 255, 255, 0.80); position: relative;} /** ── CTA Bar ── **/ .footer-cta-bar {background: #1a1a1a; padding: 0; overflow: hidden;} .footer-cta-inner {display: flex; align-items: stretch; width: 100%;} .footer-cta-text {background: #1a1a1a; flex: 1; padding: 38px 48px; display: flex; align-items: center; min-width: 0;} .footer-cta-text h2 {color: #fff; font-size: clamp(1rem, 2.5vw, 1.4rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; margin: 0; line-height: 1.3; word-break: break-word; white-space: normal;} .footer-cta-btn-wrap {background: var(--kpy-primary); width: 300px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 38px 32px;} .footer-cta-btn {display: inline-block; border: 2px solid #fff; color: #fff; padding: 13px 28px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; white-space: nowrap; transition: background 0.2s, color 0.2s;} .footer-cta-btn:hover {background: #fff; color: var(--kpy-primary);} /** ── Main Footer Body ── **/ .footer-main {background: #1f1f1f; position: relative; overflow: hidden;} .footer-main-inner {display: flex; align-items: stretch; width: 100%;} /** ── Left: 3 columns ── **/ .footer-cols {flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 52px 48px; min-width: 0;} /** ── Headings ── **/ .footer-heading {font-family: var(--kpy-font); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #fff; margin-bottom: 1.4rem; padding-bottom: 10px; border-bottom: 2px solid var(--kpy-primary); display: inline-block;} /** ── Links ── **/ .footer-links, .footer-contact {list-style: none; padding: 0; margin: 0;} .footer-links li {margin-bottom: 0.7rem;} .footer-links a {color: rgba(255, 255, 255, 0.65); text-decoration: none; font-size: 0.88rem; display: flex; align-items: center; gap: 8px; transition: color 0.2s, padding-left 0.2s;} .footer-links a::before {content: "›"; color: var(--kpy-primary); font-size: 1.2rem; font-weight: 700; line-height: 1; flex-shrink: 0;} .footer-links a:hover {color: #fff; padding-left: 4px;} /** ── Newsletter ── **/ .nl-desc {font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.9rem; line-height: 1.6;} .nl-field {display: flex; flex-direction: column; gap: 0.5rem;} .kpy-newsletter-form input[type="text"], .kpy-newsletter-form input[type="email"] {background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; padding: 10px 14px; font-family: var(--kpy-font); font-size: 0.86rem; border-radius: 0; outline: none; width: 100%; box-sizing: border-box; transition: border-color 0.2s;} .kpy-newsletter-form input::placeholder {color: rgba(255, 255, 255, 0.30);} .kpy-newsletter-form input:focus {border-color: var(--kpy-primary);} .nl-btn {background: var(--kpy-primary); color: #fff; border: none; padding: 11px 18px; font-family: var(--kpy-font); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; border-radius: 0; cursor: pointer; width: 100%; transition: background 0.2s; margin-top: 0.1rem;} .nl-btn:hover {background: #b31a13;} .nl-btn:disabled {opacity: 0.65; cursor: not-allowed;} .nl-message {margin-top: 0.6rem; font-size: 0.84rem; padding: 8px 12px; display: none; line-height: 1.5;} .nl-message.success {background: rgba(255, 255, 255, 0.07); color: #fff; border-left: 3px solid #4caf50; display: block;} .nl-message.error {background: rgba(230, 51, 41, 0.15); color: #ffaaaa; border-left: 3px solid var(--kpy-primary); display: block;} /** ── Right: Protruding contact panel ── **/ .footer-contact-panel {width: 300px; flex-shrink: 0;} .footer-contact-panel-inner {background: #141414; height: 100%; min-height: 100%; padding: 48px 36px; position: relative; overflow: hidden; box-sizing: border-box;} .footer-contact-panel-inner::before {content: ''; position: absolute; inset: 0; background-image: url("data: image/svg+xml,%3Csvg xmlns='http: //www.w3.org/2000/svg' width='400' height='400'%3E%3Ccircle cx='200' cy='200' r='160' fill='none' stroke='%23E8241C' stroke-width='0.6' opacity='0.08'/%3E%3Ccircle cx='200' cy='200' r='110' fill='none' stroke='%23E8241C' stroke-width='0.5' opacity='0.06'/%3E%3Ccircle cx='200' cy='200' r='60' fill='none' stroke='%23E8241C' stroke-width='0.4' opacity='0.05'/%3E%3C/svg%3E"); background-size: cover; background-position: center; pointer-events: none;} .footer-contact-logo {margin-bottom: 32px; position: relative; z-index: 1;} .footer-contact-logo img {height: 50px; width: auto; filter: brightness(0) invert(1); opacity: 0.85;} .footer-contact {position: relative; z-index: 1;} .footer-contact li {display: flex; align-items: flex-start; gap: 14px; margin-bottom: 1.15rem; color: rgba(255, 255, 255, 0.72); font-size: 0.88rem; line-height: 1.55;} .footer-contact i {color: var(--kpy-primary); font-size: 1rem; margin-top: 3px; flex-shrink: 0; width: 16px;} /** ── Bottom Bar ── **/ .footer-bottom {background: #0d0d0d; display: flex; justify-content: space-between; align-items: center; padding: 14px 48px; flex-wrap: wrap; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.04em;} .footer-bottom p {color: #666; margin: 0;} .footer-bottom a {color: #666; text-decoration: none; transition: color 0.2s;} .footer-bottom a:hover {color: #ccc; text-decoration: underline;} .footer-bottom-social {display: flex; align-items: center; gap: 1.2rem;} .footer-bottom-social a {color: #888; font-size: 1.2rem; text-decoration: none; transition: color 0.2s; line-height: 1;} .footer-bottom-social a:hover {color: #fff;} /** ── Responsive ── **/ @media(max-width:1100px) {.footer-contact-panel {width: 250px;} .footer-cols {padding: 40px 28px; gap: 24px;} .footer-cta-btn-wrap {width: 240px; padding: 30px 20px;} } @media(max-width:900px) {.footer-main-inner {flex-direction: column-reverse;} .footer-contact-panel {width: 100%;} .footer-contact-panel-inner {padding: 36px 28px;} .footer-cols {grid-template-columns: 1fr 1fr; padding: 36px 24px;} .footer-cta-text {padding: 28px 24px;} .footer-cta-btn-wrap {width: auto; min-width: 180px; padding: 28px 20px;} } @media(max-width:600px) {.footer-cols {grid-template-columns: 1fr; padding: 28px 20px; gap: 28px;} .footer-cta-inner {flex-direction: column;} .footer-cta-btn-wrap {width: 100%; padding: 20px 24px;} .footer-bottom {flex-direction: column; text-align: center; padding: 14px 20px;} .footer-bottom-social {justify-content: center;} } /** ── Sidebar / About / Partners ── **/ .about-layout {display: flex; gap: 40px; margin-top: 40px;} .about-main {flex: 2;} .about-sidebar {flex: 1;} .sidebar-box {margin-bottom: 25px; background: #f5f5f5; border: 1px solid #eee;} .sidebar-box.red h3 {background: var(--kpy-primary); color: #fff; padding: 12px 15px; margin: 0; font-size: 16px; font-weight: 600; text-transform: uppercase;} .sidebar-box p {padding: 5px 15px; margin: 0;} .sidebar-box ul {list-style: none; padding: 0; margin: 0;} .sidebar-box ul li {border-bottom: 1px solid #e0e0e0;} .sidebar-box ul li:last-child {border-bottom: none;} .sidebar-box ul li a {display: flex; align-items: center; padding: 18px 15px; color: #333; text-decoration: none; transition: all 0.3s ease;} .sidebar-box ul li a:hover {color: #fff; background: var(--kpy-primary);} .sidebar-box ul li.current-page a {background: var(--kpy-primary); color: #fff; font-weight: 500;} .about-main ul {list-style: none; padding-left: 0;} .about-main ul li {position: relative; padding-left: 22px; margin-bottom: 10px;} .about-main ul li::before {content: "➜"; position: absolute; left: 0; color: var(--kpy-primary); font-weight: bold;} .about-main p {padding-bottom: 15px; border-bottom: 1px solid #ddd; margin-bottom: 15px;} .about-main p:last-child {border-bottom: none;} .about-main h3 {font-size: 1.2rem;} @media(max-width:992px) {.about-layout {flex-direction: column;} .about-sidebar {width: 100%;} } .partners-grid {display: flex; flex-wrap: wrap; gap: 30px;} .partner-item {width: 23%; text-align: center;} .partner-image {position: relative; overflow: hidden;} .partner-image img {width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.3s ease;} .partner-name {font-size: 18px; font-weight: 600; margin-top: 15px; margin-bottom: 5px; color: #000;} .partner-role {font-size: 14px; color: #ff2d2d; font-style: italic; margin: 0;} .partner-overlay {position: absolute; left: 0; right: 0; bottom: -100%; background: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; padding: 15px; transition: bottom 0.3s ease; display: flex; align-items: center; justify-content: center;} .partner-image:hover .partner-overlay {bottom: 0;} .overlay-content p {font-size: 14px; line-height: 1.5;} .overlay-content a {color: #ff2d2d; font-weight: bold; text-decoration: none;} .partner-image:hover img {transform: scale(1.05);} @media(max-width:992px) {.partner-item {width: 48%;} } @media(max-width:576px) {.partner-item {width: 100%;} } /** ========================================================== Menu ===========================================================**/ .site-header, .site-header * {box-sizing: border-box;} .hdr-main {min-height: 82px; background: #fff; overflow: hidden;} .hdr-left {background: #fff; min-height: 82px; padding: 0 20px 0 24px; overflow: visible !important; min-width: 0;} .hdr-top-svg-bg {position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;} .hdr-top-svg-bg svg {width: 100%; height: 100%;} /* Logo — increased size, with responsive scaling */ .hdr-logo img {height: 72px; width: auto; display: block;} .hdr-right {background: var(--kpy-primary, #E8241C); min-width: 130px; flex-shrink: 0; clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%); overflow: hidden;} .hdr-right-actions {gap: 4px;} .hdr-action-btn {background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; width: 40px; height: 40px; cursor: pointer; padding: 0; border-radius: 0; flex-shrink: 0; transition: background .2s; display: flex; align-items: center; justify-content: center;} .hdr-action-btn:hover {background: rgba(255, 255, 255, .18);} .hdr-grid-toggle {width: 40px; height: 40px; padding: 10px;} .hdr-grid-inner {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; width: 18px; height: 18px;} .hgt-dot {width: 7px; height: 7px; background: #fff; border-radius: 1px; display: block;} .hdr-sticky .hdr-main {position: fixed; top: 0; left: 0; right: 0; z-index: 9999; box-shadow: 0 4px 18px rgba(0, 0, 0, .15); animation: slideDown .3s ease;} @keyframes slideDown {from {transform: translateY(-100%);} to {transform: translateY(0);} } /* Search overlay */ .hdr-search-overlay {position: fixed; inset: 0; background: rgba(10, 10, 10, .85); z-index: 99999; display: flex; align-items: flex-start; justify-content: center; padding-top: 90px; opacity: 0; pointer-events: none; transition: opacity .3s ease; backdrop-filter: blur(5px);} .hdr-search-overlay.open {opacity: 1; pointer-events: auto;} .hdr-search-box {position: relative; width: 100%; max-width: 700px; padding: 0 24px;} .hdr-search-box::before {content: "What are you looking for?"; display: block; color: rgba(255, 255, 255, .5); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 10px; padding-left: 2px;} .hdr-search-box form {display: flex; background: #fff; overflow: hidden; border-radius: 0; box-shadow: 0 32px 80px rgba(0, 0, 0, .45);} .hdr-search-box input[type="search"] {flex: 1; border: none; outline: none; padding: 20px 22px; font-size: 1.15rem; font-family: inherit; color: #111; background: #fff;} .hdr-search-box input[type="search"]::placeholder {color: #bbb;} .hdr-search-box button[type="submit"] {background: var(--kpy-primary, #E8241C); border: none; color: #fff; padding: 0 28px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; transition: background .2s; flex-shrink: 0;} .hdr-search-box button[type="submit"]:hover {background: #c01a13;} .hdr-search-hint {display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-left: 2px;} .hdr-search-hint span {font-size: .72rem; color: rgba(255, 255, 255, .38); letter-spacing: .04em;} .hdr-search-hint kbd {display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .55); font-size: .65rem; font-family: inherit; padding: 2px 7px; border-radius: 3px; letter-spacing: .03em;} .search-overlay-close {position: absolute; top: -52px; right: 24px; background: transparent; border: 1.5px solid rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .7); width: 38px; height: 38px; font-size: 1rem; cursor: pointer; border-radius: 0; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s;} .search-overlay-close:hover {background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6);} /* Desktop Nav */ .udn-menu {display: flex; align-items: stretch; justify-content: center; /* center the links within the nav's available space */ list-style: none; margin: 0; padding: 0; gap: 0; flex-wrap: nowrap;} .udn-menu li {list-style: none; position: relative;} .udn-menu li::before, .udn-menu li::after {display: none !important; content: none !important;} .hdr-nav-menu {min-width: 0; overflow: hidden; display: flex; /* lets the centered .udn-menu actually center in this flex child */ justify-content: center;} .udn-nav-link {display: flex; align-items: center; gap: 5px; padding: 28px 18px; /* increased horizontal spacing between links */ font-size: .9rem; font-weight: 700; text-transform: uppercase; /* nav links now uppercase */ letter-spacing: .04em; /* slightly wider tracking reads better in caps */ color: #222; text-decoration: none; white-space: nowrap; background: transparent; border: none; cursor: pointer; transition: color .2s; line-height: 1;} .udn-nav-link:hover, .udn-menu>li.current-menu-item>.udn-nav-link, .udn-menu>li.current-menu-ancestor>.udn-nav-link {color: var(--kpy-primary, #E8241C);} .udn-menu>li>a.udn-nav-link::after, .udn-menu>li>a.udn-nav-link::before, .udn-menu li.menu-item-has-children>a.udn-nav-link::after, .udn-menu li.menu-item-has-children>a.udn-nav-link::before {display: none !important; content: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important;} .udn-caret {display: inline-block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 4px; margin-bottom: 3px; transition: transform .25s ease; vertical-align: middle; flex-shrink: 0;} .udn-menu>li:hover>.udn-nav-link .udn-caret {transform: rotate(-135deg); margin-bottom: -1px;} /* Dropdown */ .udn-dropdown {list-style: none; margin: 0; padding: 8px; position: fixed; /* matches the JS-driven positioning below */ min-width: 260px; background: #fff; border-top: 3px solid var(--kpy-primary, #E8241C); border-radius: 0 0 10px 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .22), 0 4px 14px rgba(0, 0, 0, .12); z-index: 99999; visibility: hidden; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;} .udn-menu>li:hover>.udn-dropdown {visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s;} .udn-dropdown li {border: none !important; margin: 0 !important;} .udn-dropdown li::before, .udn-dropdown li::after {display: none !important; content: none !important;} .udn-dropdown li+li>.udn-sub-link {border-top: 1px solid rgba(0, 0, 0, .05);} .udn-sub-link {display: flex !important; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 7px; text-decoration: none; color: #111; background: transparent; border: none; transition: background .18s;} .udn-sub-link:hover {background: rgba(232, 36, 28, .07);} .udn-sub-icon {width: 36px; height: 36px; border-radius: 7px; background: rgba(232, 36, 28, .1); color: var(--kpy-primary, #E8241C); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem; transition: background .18s, color .18s;} .udn-sub-link:hover .udn-sub-icon {background: var(--kpy-primary, #E8241C); color: #fff;} .udn-sub-label {font-size: .88rem; font-weight: 600; color: #222; line-height: 1.3; transition: color .18s;} .udn-sub-link:hover .udn-sub-label {color: var(--kpy-primary, #E8241C);} .udn-dropdown li.current-menu-item>.udn-sub-link .udn-sub-icon {background: var(--kpy-primary, #E8241C); color: #fff;} .udn-dropdown li.current-menu-item>.udn-sub-link .udn-sub-label {color: var(--kpy-primary, #E8241C);} /* Side panel */ .panel-overlay {display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .38); z-index: 19999;} .panel-overlay.open {display: block;} .udn-grid-panel {position: fixed; top: 0; right: -380px; width: 360px; height: 100vh; background: #fff; z-index: 20000; box-shadow: -4px 0 24px rgba(0, 0, 0, .14); transition: right .35s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column;} .udn-grid-panel.open {right: 0;} .panel-head {background: var(--kpy-primary, #E8241C); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;} .panel-head h3 {color: #fff; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0;} .panel-close {background: transparent; border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; width: 34px; height: 34px; cursor: pointer; font-size: 1.1rem; border-radius: 0; display: flex; align-items: center; justify-content: center;} .panel-body {padding: 28px 24px; flex: 1; overflow-y: auto;} .panel-section-title {font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--kpy-primary, #E8241C); margin-bottom: 14px; padding-bottom: 6px; border-bottom: 2px solid var(--kpy-primary, #E8241C);} .contact-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px;} .contact-card {background: #fafafa; border: 1px solid #eee; padding: 14px; display: flex; flex-direction: column; gap: 6px;} .contact-card .cc-icon {width: 32px; height: 32px; background: var(--kpy-primary, #E8241C); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem;} .contact-card .cc-label {font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #888; font-weight: 700;} .contact-card .cc-val {font-size: .83rem; color: #111; font-weight: 500; line-height: 1.4;} .social-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;} .social-btn {display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: #fafafa; border: 1px solid #eee; text-decoration: none; color: #111; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; transition: background .2s, color .2s;} .social-btn:hover {background: var(--kpy-primary, #E8241C); color: #fff;} .social-btn img {width: 22px; height: 22px; object-fit: contain;} .social-btn:hover img {filter: brightness(0) invert(1);} /* Mobile bar */ .udn-mobile-bar {background: #fff; border-bottom: 1px solid #eee;} .udn-mobile-logo img {height: 48px; width: auto;} .udn-offcanvas-toggle {display: flex; flex-direction: column; gap: 5px; padding: 4px; cursor: pointer; background: transparent; border: none;} .udn-hamburger {display: block; width: 26px; height: 3px; background: #111; border-radius: 2px;} .udn-offcanvas {width: 290px !important; border-radius: 0 !important;} .udn-offcanvas .offcanvas-header {border-bottom: 2px solid var(--kpy-primary, #E8241C); padding: 16px 20px;} .udn-mobile-menu {list-style: none; margin: 0; padding: 0;} .udn-mobile-menu li {list-style: none; border-bottom: 1px solid rgba(232, 36, 28, .2);} .udn-mobile-menu li::before, .udn-mobile-menu li::after {display: none !important; content: none !important;} .udn-mobile-menu>li>a {display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; font-size: .9rem; font-weight: 700; text-transform: capitalize; color: #111; text-decoration: none; transition: background .2s, color .2s;} .udn-mobile-menu>li>a:hover, .udn-mobile-menu>li.current-menu-item>a {background: var(--kpy-primary, #E8241C); color: #fff;} .udn-mobile-menu .menu-item-has-children>a::after {content: "▾"; font-size: .8rem; transition: transform .3s;} .udn-mobile-menu .menu-item-has-children.open>a::after {transform: rotate(180deg);} .udn-mobile-menu .sub-menu {list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height .35s ease; background: #fafafa;} .udn-mobile-menu .sub-menu li {border-bottom: 1px solid rgba(232, 36, 28, .15);} .udn-mobile-menu .sub-menu li a {display: block; padding: 11px 20px 11px 32px; font-size: .88rem; color: #333; text-decoration: none; font-weight: 500; transition: background .2s, color .2s;} .udn-mobile-menu .sub-menu li a:hover {background: var(--kpy-primary, #E8241C); color: #fff;} .udn-mobile-search {cursor: pointer;} /* Responsive nav squeeze — kept proportionate to the new wider base padding */ @media (min-width: 992px) and (max-width: 1280px) {.udn-nav-link {padding: 28px 11px; font-size: .82rem; letter-spacing: .02em;} } /* Slightly smaller logo at the tighter desktop breakpoint so it doesn't crowd the nav */ @media (min-width: 992px) and (max-width: 1180px) {.hdr-logo img {height: 60px;} } .site-header {position: relative; z-index: 9999; isolation: isolate;} /** ========================================================== Main Slider ===========================================================**/ .main-slider {position: relative; background: #f2f2f2;} /*.slider-outer {position: relative;} */ /* ── Red accent column — right side, behind the frame ── */ /*.slider-red-accent {position: absolute; top: 0; right: 0; width: 8%; height: calc(100% - 60px); background: var(--kpy-primary, #E8241C); z-index: 0; pointer-events: none;} */ /* ── Social icons strip — left side ── */ .slider-social-strip {position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 10px; background: rgba(255, 255, 255, 0.92); box-shadow: 2px 0 12px rgba(0, 0, 0, .10); border-radius: 0 4px 4px 0;} .slider-social-link {display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #555; text-decoration: none; transition: color .2s, transform .2s; border-radius: 50%;} .slider-social-link:hover {color: var(--kpy-primary, #E8241C); transform: scale(1.2);} /* ── Image frame — centred, ~92% wide, border-radius, clips swiper ── */ /*.slider-frame {position: relative; z-index: 1; margin: 0 auto; max-width: 92%; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 60px rgba(0, 0, 0, .22);} */ /* ── Swiper slides ── */ /*.main-slider .swiper-slide {position: relative; min-height: 540px;} */ /* ── Ken Burns ── No transition/animation on the base state. JS adds .kb-active after a forced reflow → animation fires. JS strips it before each slide change → animation restarts. ── */ .image-layer {position: absolute; inset: 0; background-size: cover; background-position: center center; z-index: 1; transform: scale(1);} .image-layer.kb-active {animation: kenBurns 7s ease-in-out forwards;} @keyframes kenBurns {0% {transform: scale(1);} 100% {transform: scale(1.13);} } /* Vignette */ .slider-overlay {position: absolute; inset: 0; z-index: 2; background: linear-gradient(to right, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .15) 55%, rgba(0, 0, 0, 0) 80%);} /* Layout inside slide */ .slider-layout {position: relative; z-index: 5; display: flex; align-items: center; justify-content: flex-end; min-height: 540px; padding: 60px 6%;} /* White info card */ .slide-card {background: #fff; padding: 40px 44px; max-width: 400px; width: 100%; box-shadow: 0 20px 70px rgba(0, 0, 0, .22);} .slide-card-tagline {display: flex; align-items: center; gap: 10px; font-size: .7rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--kpy-primary, #E8241C); margin-bottom: 18px;} .tagline-bar {display: inline-block; width: 28px; height: 2px; background: var(--kpy-primary, #E8241C); flex-shrink: 0;} .slide-card-title {font-size: 1.95rem; font-weight: 900; line-height: 1.15; color: #111 !important; margin: 0 0 28px; font-family: var(--kpy-font-2, "Nunito Sans", sans-serif); text-transform: none;} .slide-card-actions {display: flex;} .slide-card-btn {display: inline-flex; align-items: center; gap: 10px; background: #111; color: #fff !important; padding: 13px 26px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; text-decoration: none !important; border: none; cursor: pointer; transition: background .25s, transform .25s; font-family: var(--kpy-font-2, "Nunito Sans", sans-serif);} .slide-card-btn:hover {background: var(--kpy-primary, #E8241C); transform: translateY(-2px); color: #fff !important;} .btn-dash {opacity: .6;} /* Pagination dots — vertical, right side inside frame */ #mainSliderPagination {position: absolute; right: 18px; top: 50%; transform: translateY(-50%); z-index: 15; display: flex; flex-direction: column; align-items: center; gap: 7px;} #mainSliderPagination .swiper-pagination-bullet {width: 7px; height: 7px; background: rgba(255, 255, 255, .45); opacity: 1; border-radius: 50%; transition: all .3s; display: block; margin: 0;} #mainSliderPagination .swiper-pagination-bullet-active {background: #fff; transform: scale(1.4);} /* ── Bottom bar — FULL WIDTH ── */ .slider-bottom-bar {position: relative; z-index: 2; display: flex; align-items: stretch; background: #fff; border-top: 3px solid var(--kpy-primary, #E8241C); width: 100%;} /* Stats — number + label (matches reference image: "545+ ... 90% ...") */ .slider-stats {display: flex; align-items: center; flex: 1; padding: 20px 40px; gap: 0;} .stat-item {display: flex; flex-direction: row; align-items: center; gap: 14px; flex: 1;} .stat-number {font-size: 2rem; font-weight: 900; color: var(--kpy-primary, #E8241C); line-height: 1; white-space: nowrap;} .stat-number sup {font-size: 1rem;} .stat-label {font-size: .78rem; color: #555; font-weight: 500; line-height: 1.4; max-width: 160px;} .stat-divider {width: 1px; background: #e0e0e0; align-self: stretch; margin: 0 28px; flex-shrink: 0;} /* Prev/Next — red background, right side */ .slider-nav-wrap {background: var(--kpy-primary, #E8241C); display: flex; align-items: center; padding: 0 36px; gap: 14px; flex-shrink: 0;} .slider-nav-btn {background: transparent; border: none; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 0; transition: opacity .2s;} .slider-nav-btn:hover {opacity: .7;} .slider-nav-sep {width: 1px; height: 20px; background: rgba(255, 255, 255, .35); flex-shrink: 0;} /* ── Scrolling ticker — FULL WIDTH ── */ .scrolling-words-banner {position: relative; z-index: 2; overflow: hidden; white-space: nowrap; background: var(--kpy-primary, #E8241C); padding: 12px 0; width: 100%;} .scrolling-words-wrapper {display: inline-block; animation: scrollWords 28s linear infinite;} .scrolling-word {display: inline-block; font-family: var(--kpy-font-2, "Nunito Sans", sans-serif); font-size: .82rem; letter-spacing: 3px; text-transform: uppercase; color: #fff; font-weight: 700; margin: 0 22px;} .scrolling-word .word-divider {display: inline-block; margin: 0 10px; opacity: .6; font-size: .68rem;} .scrolling-word.alt {color: rgba(255, 255, 255, .78); font-weight: 500; font-style: italic; font-size: .76rem;} .main-slider {position: relative; background: #f2f2f2; z-index: 0; isolation: auto;} .slider-outer {position: relative; z-index: 0;} .slider-frame {position: relative; z-index: 0; margin: 0 auto; max-width: 92%; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 60px rgba(0, 0, 0, .22);} .slider-red-accent {position: absolute; top: 0; right: 0; width: 8%; height: calc(100% - 60px); background: var(--kpy-primary, #E8241C); z-index: 0; pointer-events: none;} @keyframes scrollWords {0% {transform: translateX(0);} 100% {transform: translateX(-50%);} } /* ── Responsive ── */ @media (max-width: 1200px) {.slide-card-title {font-size: 1.7rem;} } @media (max-width: 991px) {.slider-layout {justify-content: center;} .slide-card {max-width: 480px;} .slider-stats {padding: 18px 24px;} } @media (max-width: 768px) {.slider-frame {max-width: 100%; border-radius: 0;} .slider-red-accent {display: none;} .slider-social-strip {display: none;} .slider-bottom-bar {flex-wrap: wrap;} .slider-stats {padding: 16px; flex-wrap: wrap;} .slider-nav-wrap {width: 100%; justify-content: center; padding: 14px 20px;} .main-slider .swiper-slide {min-height: 420px;} .slider-layout {min-height: 420px; justify-content: center;} .slide-card {padding: 26px 24px; max-width: 100%;} .slide-card-title {font-size: 1.4rem;} } @media (max-width: 576px) {.slide-card {padding: 22px 18px;} .slide-card-title {font-size: 1.2rem;} .slide-card-btn {padding: 11px 18px; font-size: .72rem;} .stat-divider {display: none;} .stat-item {flex: 1 1 45%;} } /*========================================================== Inner Page Hero Section ==========================================================*/ .fc-inner-main {background: #f0f0f2;} .fc-hero-wrap {padding: 40px 40px 0;} .fc-hero-card {position: relative; width: 100%; border-radius: 22px; overflow: hidden; min-height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; isolation: isolate;} .fc-hero-bg {position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; transform: scale(1);} @keyframes fcKbZoomIn {0% {transform: scale(1);} 100% {transform: scale(1.14);} } @keyframes fcKbZoomOut {0% {transform: scale(1.14);} 100% {transform: scale(1);} } /* ── Dark scrim over the image ── */ .fc-hero-scrim {position: absolute; inset: 0; background: rgba(10, 10, 18, .58); z-index: 1;} /* ── Centred content block ── */ .fc-hero-body {position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: 80px 5% 80px; max-width: 760px; width: 100%; margin: 0 auto;} /* Small label — like "Marketing Agency" in the reference */ .fc-hero-label {font-family: var(--kpy-font-2, "Montserrat", sans-serif); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: rgba(255, 255, 255, .75); margin: 0;} /* Page title */ .fc-hero-title {font-family: var(--kpy-font-2, "Montserrat", sans-serif); font-size: clamp(1.9rem, 4.5vw, 3.4rem); font-weight: 900; color: #fff !important; line-height: 1.12; margin: 0; text-transform: none; letter-spacing: -.01em;} .fc-hero-excerpt {font-size: clamp(.88rem, 1.5vw, 1rem); color: rgba(255, 255, 255, .82); line-height: 1.7; margin: 0; max-width: 540px; font-weight: 400;} .fc-hero-breadcrumb {display: inline-flex; align-items: center; gap: .6rem; background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .22); padding: .55rem 1.6rem; border-radius: 99px; font-family: var(--kpy-font-2, "Montserrat", sans-serif); font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .85);} .fc-hero-breadcrumb a {color: rgba(255, 255, 255, .85); text-decoration: none; transition: color .2s;} .fc-hero-breadcrumb a:hover {color: #fff;} .fc-hero-bc-sep {opacity: .5; font-weight: 300;} .fc-hero-breadcrumb span:last-child {color: #fff; font-weight: 700;} /* ── Responsive ── */ @media (max-width: 991px) {.fc-hero-wrap {padding: 28px 28px 0;} .fc-hero-card {min-height: 420px;} .fc-hero-body {padding: 60px 5%;} } @media (max-width: 768px) {.fc-hero-wrap {padding: 16px 16px 0;} .fc-hero-card {min-height: 360px; border-radius: 16px;} .fc-hero-body {padding: 50px 5%; gap: 1rem;} .fc-hero-title {font-size: clamp(1.5rem, 7vw, 2.2rem);} } @media (max-width: 480px) {.fc-hero-wrap {padding: 12px 12px 0;} .fc-hero-card {min-height: 300px; border-radius: 12px;} .fc-hero-body {padding: 40px 5%;} .fc-hero-breadcrumb {font-size: .72rem; padding: .45rem 1.2rem;} } .fc-page-hero {display: none !important;} .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;} /* ============== UDN Video Blog ============= */ /* ── Page wrapper ── */ .udn-video-blog-wrap {max-width: 1160px; margin: 0 auto; padding: 48px 24px 80px;} /* ── Section heading ── */ .udn-vb-heading {text-align: center; margin-bottom: 40px;} .udn-vb-eyebrow {display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kpy-primary); margin-bottom: 10px;} .udn-vb-heading h2 {font-family: var(--kpy-font); font-size: 2rem; font-weight: 800; color: var(--kpy-black); line-height: 1.25; margin: 0 0 10px;} .udn-vb-heading p {font-size: 1rem; color: var(--kpy-grey); margin: 0;} /* ── Pagination ── */ .udn-vb-pagination {display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 32px;} .udn-vb-page-info {font-size: 14px; font-family: var(--kpy-font); color: var(--kpy-grey); min-width: 70px; text-align: center;} .udn-vb-pager {background: var(--kpy-white); color: var(--kpy-black); border: 1.5px solid #ddd; padding: 8px 24px; border-radius: 8px; font-size: 14px; font-family: var(--kpy-font); font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; line-height: 1.5;} .udn-vb-pager:hover:not(:disabled) {background: var(--kpy-primary); border-color: var(--kpy-primary); color: var(--kpy-white);} .udn-vb-pager:disabled {opacity: 0.35; cursor: not-allowed;} /* ── Grid ── */ .udn-vb-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;} @media (max-width: 900px) {.udn-vb-grid {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 560px) {.udn-vb-grid {grid-template-columns: 1fr;} } /* ── Card ── */ .udn-vb-card {background: var(--kpy-white); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; user-select: none; display: flex; flex-direction: column;} .udn-vb-card:hover {transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.15);} .udn-vb-card:focus-visible {outline: 3px solid var(--kpy-primary); outline-offset: 3px;} /* ── Thumbnail ── */ .udn-vb-thumb-wrap {position: relative; width: 100%; padding-top: 56.25%; background: var(--kpy-black); overflow: hidden; flex-shrink: 0;} .udn-vb-thumb-wrap img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.25s, transform 0.35s;} .udn-vb-card:hover .udn-vb-thumb-wrap img {opacity: 0.78; transform: scale(1.04);} /* ── Play button overlay ── */ .udn-vb-play-btn {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;} .udn-vb-play-btn svg {width: 58px; height: 42px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55)); transition: transform 0.2s;} .udn-vb-card:hover .udn-vb-play-btn svg {transform: scale(1.16);} .udn-vb-play-btn .play-bg {fill: #ff0000; fill-opacity: 0.92;} .udn-vb-play-btn .play-arrow {fill: #fff;} /* ── Card info ── */ .udn-vb-info {padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1;} .udn-vb-title {font-family: var(--kpy-font); font-size: 14px; font-weight: 700; line-height: 1.45; margin: 0; color: var(--kpy-black); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .udn-vb-date {font-size: 12px; color: var(--kpy-grey); display: flex; align-items: center; gap: 5px; margin-top: auto;} .udn-vb-date::before {content: ""; display: inline-block; width: 12px; height: 12px; background-image: url("data: image/svg+xml,%3Csvg xmlns='http: //www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b6b6b'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5C3.9 4 3 4.9 3 6v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; flex-shrink: 0;} /* ── Loading spinner ── */ .udn-vb-loading {grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; min-height: 220px;} .udn-vb-spinner {width: 44px; height: 44px; border: 4px solid #e0e0e0; border-top-color: var(--kpy-primary); border-radius: 50%; animation: udnSpin 0.8s linear infinite;} @keyframes udnSpin {to {transform: rotate(360deg);} } /* ── Error / empty ── */ .udn-vb-error {grid-column: 1 / -1; text-align: center; padding: 48px 24px; background: var(--kpy-light); border-radius: 12px; color: var(--kpy-grey); font-family: var(--kpy-font);} /* ── Modal backdrop ── */ .udn-modal {position: fixed; inset: 0; z-index: 999999; align-items: center; justify-content: center; padding: 24px;} .udn-modal-backdrop {position: absolute; inset: 0; background: rgba(0, 0, 0, 0.90); cursor: pointer;} /* ── Modal box — fills width, true centred ── */ .udn-modal-box {position: relative; z-index: 1; width: 100%; max-width: 920px; background: #111; border-radius: 16px; overflow: hidden; box-shadow: 0 32px 96px rgba(0, 0, 0, 0.85); animation: udnModalIn 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);} @keyframes udnModalIn {from {opacity: 0; transform: scale(0.92) translateY(16px);} to {opacity: 1; transform: scale(1) translateY(0);} } /* ── Modal player — locked 16:9 ── */ .udn-modal-player {position: relative; width: 100%; padding-top: 56.25%; background: #000;} .udn-modal-player iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;} /* ── Modal footer ── */ .udn-modal-footer {background: #1a1a1a; padding: 14px 56px 14px 24px;} .udn-modal-title {font-family: var(--kpy-font); color: #e8e8e8; font-size: 13px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5;} /* ── Modal close button — floats above the box, always accessible ── */ .udn-modal-close {position: fixed; top: 16px; right: 16px; z-index: 1000001; background: rgba(20, 20, 20, 0.85); color: #fff; border: 2px solid rgba(255, 255, 255, 0.25); font-size: 18px; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s; line-height: 1; font-family: var(--kpy-font);} .udn-modal-close:hover {background: var(--kpy-primary); border-color: var(--kpy-primary);} /* ── Modal prev/next arrows — inside the box, flanking the player ── */ .udn-modal-nav {position: absolute; top: 0; bottom: 52px; width: 52px; z-index: 10; background: rgba(0, 0, 0, 0.35); color: #fff; border: none; font-size: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; padding: 0;} .udn-modal-nav:hover {background: rgba(230, 51, 41, 0.80);} .udn-modal-prev {left: 0; border-radius: 0;} .udn-modal-next {right: 0; border-radius: 0;} /* ── Responsive modal ── */ @media (max-width: 600px) {.udn-modal {padding: 0;} .udn-modal-box {border-radius: 0; max-width: 100%;} .udn-modal-nav {display: none;} .udn-modal-footer {padding: 12px 16px;} } /*========================================================== UDN LINKS ==========================================================*/ .udnl-wrap {font-family: var(--kpy-font); font-size: var(--kpy-font-size); color: var(--kpy-black); max-width: 1100px; margin: 56px auto 72px; padding: 0 20px;} .udnl-heading {text-align: center; margin-bottom: 48px;} .udnl-heading-eyebrow {display: inline-block; font-family: var(--kpy-font); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kpy-primary); margin-bottom: 10px;} .udnl-heading h2 {font-family: var(--kpy-font); font-size: 2rem; font-weight: 800; color: var(--kpy-black); line-height: 1.25; margin: 0;} .udnl-section {margin-bottom: 18px;} .udnl-year-toggle {display: flex; align-items: center; justify-content: space-between; background: var(--kpy-black); color: var(--kpy-white); padding: 16px 24px; font-family: var(--kpy-font); font-size: 1rem; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; border-radius: 8px; user-select: none; transition: background 0.18s; border: none; width: 100%;} .udnl-year-toggle:hover {background: #2a2a2a;} .udnl-year-toggle .udnl-toggle-icon {font-size: 18px; transition: transform 0.25s;} .udnl-year-toggle.open .udnl-toggle-icon {transform: rotate(180deg);} .udnl-body {display: none; padding: 28px 0 8px;} .udnl-body.open {display: block;} .udnl-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px;} @media (max-width: 767px) {.udnl-grid {grid-template-columns: 1fr;} } @media (min-width: 768px) and (max-width: 991px) {.udnl-grid {grid-template-columns: repeat(2, 1fr);} } .udnl-card {background: var(--kpy-white); border-radius: 14px; padding: 32px 24px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); transition: box-shadow 0.2s, transform 0.2s; min-height: 210px;} .udnl-card:hover {box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); transform: translateY(-3px);} .udnl-card-icon {width: 56px; height: 56px; background: var(--kpy-light); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; flex-shrink: 0;} .udnl-card-icon i {font-size: 26px; color: var(--kpy-primary);} .udnl-card-title {font-family: var(--kpy-font); font-size: 1rem; font-weight: 700; color: var(--kpy-black); line-height: 1.4; text-decoration: none; display: block; flex: 1; transition: color 0.15s;} .udnl-card-title:hover {color: var(--kpy-primary);} .udnl-card-footer {display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid #efefef;} .udnl-card-meta {display: flex; flex-direction: column; gap: 2px;} .udnl-card-source {font-size: 12px; font-weight: 600; color: var(--kpy-grey); display: flex; align-items: center; gap: 5px;} .udnl-card-source i {font-size: 13px;} .udnl-card-date {font-size: 11px; color: #aaa; display: flex; align-items: center; gap: 5px;} .udnl-card-date i {font-size: 12px;} .udnl-card-arrow {width: 34px; height: 34px; background: var(--kpy-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--kpy-black); font-size: 16px; text-decoration: none; flex-shrink: 0; transition: background 0.18s, color 0.18s;} .udnl-card-arrow:hover {background: var(--kpy-primary); color: var(--kpy-white);} /* ── Pagination ── */ .udnl-pag {display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; margin-bottom: 16px;} .udnl-pag button {background: var(--kpy-white); border: 1.5px solid #ddd; color: var(--kpy-secondary); width: 38px; height: 38px; font-size: 13px; font-family: var(--kpy-font); font-weight: 600; cursor: pointer; border-radius: 8px; transition: background 0.15s, color 0.15s, border-color 0.15s; line-height: 1;} .udnl-pag button:hover:not(:disabled) {background: var(--kpy-light); border-color: #bbb;} .udnl-pag button.active {background: var(--kpy-primary); border-color: var(--kpy-primary); color: var(--kpy-white);} .udnl-pag button:disabled {opacity: 0.3; cursor: default;} /* ── Empty state ── */ .udnl-empty {color: #aaa; text-align: center; padding: 40px; font-style: italic; font-size: 14px;} /** ========================================================== UDN Publications =========================================================== **/ .udn-pub-wrapper {max-width: 900px; margin: 0 auto; padding: 0 0 40px; font-family: inherit;} .udn-controls-bar {display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px;} .udn-controls-left {display: flex; gap: 10px; flex-wrap: wrap;} .udn-select {padding: 8px 14px; border: 1px solid var(--kpy-secondary, #1a2e4a); border-radius: 6px; font-size: 0.9rem; color: var(--kpy-secondary, #1a2e4a); background: var(--kpy-white, #fff); cursor: pointer; transition: border-color .2s;} .udn-select:focus {outline: none; border-color: var(--kpy-primary, #e53935);} .udn-search-wrap {position: relative; min-width: 220px;} .udn-search-icon {position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--kpy-grey, #888); pointer-events: none;} .udn-search-input {width: 100%; padding: 8px 14px 8px 36px; border: 1px solid var(--kpy-secondary, #1a2e4a); border-radius: 6px; font-size: 0.9rem; transition: border-color .2s; background: var(--kpy-white, #fff);} .udn-search-input:focus {outline: none; border-color: var(--kpy-primary, #e53935);} .udn-table-wrap {width: 100%; overflow-x: auto; border: 1px solid var(--kpy-border, #ddd); border-radius: 8px;} .udn-pub-table {width: 100%; border-collapse: collapse; background: var(--kpy-white, #fff);} .udn-pub-table thead tr {background: var(--kpy-white, #fff); border-bottom: 2px solid var(--kpy-border, #ddd);} .udn-pub-table thead th {padding: 14px 18px; text-align: left; font-size: 0.95rem; font-weight: 700; color: var(--kpy-secondary, #1a2e4a); letter-spacing: .3px; white-space: nowrap;} .udn-pub-table tbody tr.udn-pub-row {border-bottom: 1px solid var(--kpy-border, #ddd); transition: background .15s;} .udn-pub-table tbody tr.udn-pub-row:last-child {border-bottom: none;} .udn-pub-table tbody tr.udn-pub-row:hover {background: var(--kpy-bg-light, #f8f8f8);} .udn-col-title {width: 60%;} .udn-col-date {width: 22%; white-space: nowrap;} .udn-col-action {width: 18%; text-align: center;} td.udn-col-title {padding: 16px 18px; vertical-align: middle; font-size: 0.95rem; color: var(--kpy-secondary, #1a2e4a);} td.udn-col-date {padding: 16px 18px; vertical-align: middle; font-size: 0.95rem; color: var(--kpy-secondary, #1a2e4a); color: var(--kpy-grey, #888); font-size: 0.92rem;} td.udn-col-action {padding: 16px 18px; vertical-align: middle; font-size: 0.95rem; color: var(--kpy-secondary, #1a2e4a);} .udn-title-wrap {display: flex; align-items: center; gap: 14px;} .udn-pdf-icon {flex: 0 0 38px; width: 38px; height: 44px; display: block;} .udn-pdf-icon svg {width: 100%; height: 100%; display: block;} .udn-title-info {display: flex; flex-direction: column; gap: 4px;} .udn-title-text {font-weight: 600; line-height: 1.35; color: var(--kpy-secondary, #1a2e4a);} .udn-dl-count {display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--kpy-grey, #888);} .udn-dl-btn {display: inline-block; padding: 9px 22px; background: transparent; border: 2px solid var(--kpy-primary, #e53935); border-radius: 6px; color: var(--kpy-primary, #e53935); font-size: 0.88rem; font-weight: 300; letter-spacing: .4px; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap;} .udn-dl-btn:hover {background: var(--kpy-primary, #e53935); color: #fff;} .udn-dl-btn--disabled {opacity: .45; cursor: not-allowed; border-color: var(--kpy-grey, #888); color: var(--kpy-grey, #888);} .udn-no-results td {text-align: center; padding: 50px 20px; color: var(--kpy-grey, #888);} .udn-no-results .udn-empty-icon {font-size: 2.5rem; display: block; margin-bottom: 10px;} .udn-loading {text-align: center; padding: 40px; color: var(--kpy-grey, #888);} .udn-spinner {display: inline-block; width: 28px; height: 28px; border: 3px solid var(--kpy-border, #ddd); border-top-color: var(--kpy-primary, #e53935); border-radius: 50%; animation: udn-spin .7s linear infinite; vertical-align: middle; margin-right: 8px;} @keyframes udn-spin {to {transform: rotate(360deg);} } .udn-table-footer {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; font-size: 0.9rem; color: var(--kpy-grey, #888);} .udn-pagination {display: flex; gap: 6px; flex-wrap: wrap;} .udn-pagination a {display: inline-flex; align-items: center; padding: 6px 13px; border: 1px solid var(--kpy-border, #ddd); border-radius: 6px; font-size: 0.88rem; text-decoration: none; color: var(--kpy-secondary, #1a2e4a); background: var(--kpy-white, #fff); transition: all .2s;} .udn-pagination span {display: inline-flex; align-items: center; padding: 6px 13px; border: 1px solid var(--kpy-border, #ddd); border-radius: 6px; font-size: 0.88rem; text-decoration: none; color: var(--kpy-secondary, #1a2e4a); background: var(--kpy-white, #fff); transition: all .2s;} .udn-pagination a:hover {border-color: var(--kpy-primary, #e53935); color: var(--kpy-primary, #e53935);} .udn-pagination .current {background: var(--kpy-primary, #e53935); border-color: var(--kpy-primary, #e53935); color: #fff; pointer-events: none;} .udn-pagination .dots {border: none; background: transparent;} /** ========================================================== PDF VIEWER MODAL =========================================================== **/ .udn-modal {position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;} .udn-modal-backdrop {position: absolute; inset: 0; background: rgba(0, 0, 0, .65); backdrop-filter: blur(3px);} .udn-modal-box {position: relative; z-index: 1; background: #fff; border-radius: 10px; width: min(92vw, 1000px); height: min(90vh, 780px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, .35);} .udn-modal-header {display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--kpy-secondary, #1a2e4a); color: #fff; flex-shrink: 0; gap: 12px;} .udn-modal-doc-title {font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;} .udn-modal-actions {display: flex; align-items: center; gap: 10px; flex-shrink: 0;} .udn-modal-dl-btn {display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; background: var(--kpy-primary, #e53935); color: #fff !important; border-radius: 6px; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: opacity .2s;} .udn-modal-dl-btn:hover {opacity: .85;} .udn-modal-close {background: transparent; border: none; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; transition: opacity .2s;} .udn-modal-close:hover {opacity: .7;} .udn-modal-body {flex: 1; overflow: hidden;} #udn-pdf-iframe {width: 100%; height: 100%; border: none; display: block;} /** ========================================================== HOMEPAGE: Latest Publications Widget =========================================================== **/ .udn-latest-pubs {padding: 10px 0 20px;} .udn-latest-title {font-size: 1.6rem; font-weight: 700; color: var(--kpy-secondary, #1a2e4a); margin: 0 0 20px;} .udn-latest-list {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0;} .udn-latest-item {display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--kpy-border, #e0e0e0);} .udn-latest-item:first-child {border-top: 1px solid var(--kpy-border, #e0e0e0);} .udn-pdf-icon--sm {flex: 0 0 32px; width: 32px; height: 38px;} .udn-latest-item-title {flex: 1; font-weight: 600; font-size: 0.9rem; line-height: 1.35; color: var(--kpy-secondary, #1a2e4a); text-transform: uppercase; letter-spacing: .3px;} .udn-latest-dl-btn {flex-shrink: 0; padding: 8px 18px; background: transparent; border: 2px solid var(--kpy-primary, #e53935); border-radius: 5px; color: var(--kpy-primary, #e53935); font-size: 0.8rem; font-weight: 700; letter-spacing: .5px; cursor: pointer; transition: background .2s, color .2s;} .udn-latest-dl-btn:hover {background: var(--kpy-primary, #e53935); color: #fff;} .udn-see-all-btn {display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 12px 26px; background: var(--kpy-primary, #e53935); color: #fff !important; border-radius: 6px; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: opacity .2s;} .udn-see-all-btn:hover {opacity: .88;} .udn-see-all-btn svg {transition: transform .2s;} .udn-see-all-btn:hover svg {transform: translateX(3px);} @media (max-width: 640px) {.udn-controls-bar {flex-direction: column; align-items: stretch;} .udn-controls-left {flex-direction: row;} .udn-search-wrap {width: 100%;} .udn-table-footer {flex-direction: column; align-items: flex-start;} td.udn-col-date {display: none;} .udn-latest-item-title {font-size: 0.82rem;} .udn-modal-box {width: 98vw; height: 95vh; border-radius: 6px;} } /** ========================================================== Publications Page ===========================================================**/ .publications-wrapper {max-width: 1200px; margin: 0 auto; padding: 40px 20px;} .publications-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; flex-wrap: wrap; gap: 30px;} .header-left {flex: 1;} .publications-main-title {font-size: 2.5rem; font-weight: 700; color: var(--kpy-secondary); margin: 0 0 10px 0; line-height: 1.2;} .publications-subtitle {font-size: 1.1rem; color: var(--kpy-grey); margin: 0;} .header-controls {display: flex; gap: 15px; align-items: center; flex-wrap: wrap;} .filter-dropdown, .entries-dropdown {min-width: 160px;} .category-filter, .entries-select {width: 100%; padding: 10px 15px; border: 1px solid var(--kpy-secondary); border-radius: 8px; font-size: 0.95rem; color: var(--kpy-secondary); background: var(--kpy-white); cursor: pointer; transition: all 0.2s ease;} .category-filter:hover, .entries-select:hover {border-color: var(--kpy-primary);} .category-filter:focus, .entries-select:focus {outline: none; border-color: var(--kpy-primary); box-shadow: 0 0 0 3px var(--kpy-light);} .search-box {position: relative; min-width: 250px;} .search-input {width: 100%; padding: 10px 15px 10px 40px; border: 1px solid var(--kpy-secondary); border-radius: 8px; font-size: 0.95rem; transition: all 0.2s ease; background: var(--kpy-white);} .search-input:focus {outline: none; border-color: var(--kpy-primary); box-shadow: 0 0 0 3px var(--kpy-light);} .search-box i {position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--kpy-grey); font-size: 1rem;} .active-filters {margin-bottom: 30px; display: flex; align-items: center; gap: 15px;} .filter-label {font-weight: 600; color: var(--kpy-secondary);} .filter-tag {display: inline-flex; align-items: center; gap: 8px; background: var(--kpy-light); color: var(--kpy-primary); padding: 5px 15px; border-radius: 30px; font-size: 0.9rem;} .filter-tag a {color: var(--kpy-primary); text-decoration: none; display: flex; align-items: center;} .filter-tag a:hover {color: var(--kpy-secondary);} .publications-list {background: var(--kpy-white); border: 1px solid var(--kpy-border); border-radius: 12px; overflow: hidden; margin-bottom: 40px;} .publication-row {display: flex; padding: 25px; border-bottom: 1px solid var(--kpy-secondary); transition: background 0.2s ease;} .publication-row:last-child {border-bottom: none;} .publication-row:hover {background: var(--kpy-bg-light);} .row-image {flex: 0 0 80px; height: 80px; margin-right: 25px; overflow: hidden; border-radius: 8px; background: var(--kpy-bg-light);} .row-image img {width: 100%; height: 100%; object-fit: cover;} .row-content {flex: 1;} .row-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 10px;} .row-title {margin: 0; font-size: 1.2rem; font-weight: 600;} .row-title a {color: var(--kpy-secondary); text-decoration: none; transition: color 0.2s ease;} .row-title a:hover {color: var(--kpy-primary);} .row-category {font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--kpy-primary); background: var(--kpy-light); padding: 3px 10px; border-radius: 30px;} .row-excerpt {font-size: 0.95rem; color: var(--kpy-grey); line-height: 1.6; margin: 0 0 15px 0;} .row-meta {display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 0.85rem;} .row-meta span {display: flex; align-items: center; gap: 5px; color: var(--kpy-grey);} .row-meta i {color: var(--kpy-primary); font-size: 0.9rem;} .meta-read-link {color: var(--kpy-primary);} .meta-read {margin-left: auto; align-items: center; gap: 8px; padding: 8px 20px; background: transparent; color: var(--kpy-primary); font-weight: 600; font-size: 0.9rem; text-decoration: none; border: 2px solid var(--kpy-primary); border-radius: 40px 20px 40px 20px; transition: all 0.3s ease; cursor: pointer;} .meta-read i {transition: transform 0.2s ease;} .publication-row:hover .meta-read {gap: 10px;} .publication-row:hover .meta-read i {transform: translateX(3px);} .layout-compact .publication-row {padding: 15px 25px;} .layout-compact .row-image {flex: 0 0 50px; height: 50px; margin-right: 15px;} .layout-compact .row-title {font-size: 1rem;} .layout-compact .row-excerpt {font-size: 0.85rem; margin-bottom: 8px;} .layout-compact .row-meta {font-size: 0.75rem; gap: 12px;} .layout-detailed .publication-row {padding: 30px;} .layout-detailed .row-image {flex: 0 0 120px; height: 120px; margin-right: 30px;} .layout-detailed .row-title {font-size: 1.4rem;} .layout-detailed .row-excerpt {font-size: 1rem; margin-bottom: 20px;} .publications-pagination {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; padding: 20px 0;} .pagination-info {font-size: 0.95rem; color: var(--kpy-grey);} .pagination-links {display: flex; gap: 8px; flex-wrap: wrap;} .pagination-links a, .pagination-links span {display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border: 1px solid var(--kpy-border); border-radius: 8px; font-size: 0.95rem; text-decoration: none; color: var(--kpy-secondary); background: var(--kpy-white); transition: all 0.2s ease;} .pagination-links a:hover {background: var(--kpy-light); border-color: var(--kpy-primary); color: var(--kpy-primary);} .pagination-links .current {background: var(--kpy-primary); border-color: var(--kpy-primary); color: var(--kpy-white); pointer-events: none;} .pagination-links .dots {border: none; background: transparent;} .loading-spinner {text-align: center; padding: 60px;} .spinner {width: 40px; height: 40px; border: 3px solid var(--kpy-border); border-top-color: var(--kpy-primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 15px;} @keyframes spin {to {transform: rotate(360deg);} } .no-publications {text-align: center; padding: 60px; background: var(--kpy-white); border: 1px solid var(--kpy-border); border-radius: 12px; color: var(--kpy-grey);} .no-publications i {font-size: 3rem; color: var(--kpy-light); margin-bottom: 15px;} .no-publications p {font-size: 1.1rem; margin: 0;} @media (max-width: 992px) {.publications-header {flex-direction: column; align-items: flex-start;} .header-controls {width: 100%;} .search-box {flex: 1;} } @media(max-width:768px) {.publications-main-title {font-size: 2rem;} .publication-row {flex-direction: row; align-items: flex-start;} .row-image {margin-bottom: 0; margin-right: 15px;} .row-header {flex-direction: row; align-items: center;} .row-meta {flex-direction: row; align-items: center; flex-wrap: wrap;} .meta-read {margin-left: auto;} .publications-pagination {flex-direction: row; align-items: center;} .pagination-links {width: auto; justify-content: flex-start;} .header-controls {flex-direction: row; flex-wrap: wrap;} .filter-dropdown, .entries-dropdown, .search-box {width: auto;} } @media (max-width: 480px) {.publications-main-title {font-size: 1.6rem;} .layout-detailed .row-image {width: 100%; height: 160px;} } /*========================================================== News PAGE ==========================================================**/ /* ══ NEWS ARCHIVE (all_news) ══ */ .kpy-nf-wrap {display: flex; flex-direction: column; gap: 32px; max-width: 1200px; margin: 0 auto; padding: 0 40px;} .kpy-nf-badge {display: inline-block; padding: 4px 12px; background: var(--kpy-primary); color: #fff; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; border-radius: 2px;} .kpy-nf-featured {display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 40px rgba(0, 0, 0, .1);} .kpy-nf-featured__media {position: relative; overflow: hidden; min-height: 360px;} .kpy-nf-featured__media a {display: block; height: 100%;} .kpy-nf-featured__media img {width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease;} .kpy-nf-featured:hover .kpy-nf-featured__media img {transform: scale(1.04);} .kpy-nf-featured__body {background: #1a1a1a; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; gap: 18px;} .kpy-nf-featured__title {margin: 0;} .kpy-nf-featured__title a {color: #fff; text-decoration: none; font-size: 1.6rem; font-weight: 800; line-height: 1.22; transition: color .2s;} .kpy-nf-featured__title a:hover {color: var(--kpy-primary);} .kpy-nf-featured__excerpt {color: rgba(255, 255, 255, .7); font-size: .95rem; line-height: 1.7; margin: 0;} .kpy-nf-featured__meta {display: flex; align-items: center; flex-wrap: wrap; gap: 16px; font-size: .82rem; color: rgba(255, 255, 255, .5);} .kpy-nf-featured__meta i {color: var(--kpy-primary);} .kpy-nf-readmore {display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; background: var(--kpy-primary); color: #fff !important; font-size: .85rem; font-weight: 700; text-decoration: none; border-radius: 6px; transition: opacity .2s; margin-left: auto;} .kpy-nf-readmore:hover {opacity: .85;} .kpy-nf-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;} .kpy-nf-card {border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 24px rgba(0, 0, 0, .07); transition: box-shadow .25s, transform .25s; background: #fff;} .kpy-nf-card:hover {box-shadow: 0 12px 40px rgba(0, 0, 0, .13); transform: translateY(-5px);} .kpy-nf-card__top {padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 9px;} .kpy-nf-card:nth-child(5n+1) .kpy-nf-card__top {background: #b2ede0;} .kpy-nf-card:nth-child(5n+2) .kpy-nf-card__top {background: #fce4d4;} .kpy-nf-card:nth-child(5n+3) .kpy-nf-card__top {background: #dbeafe;} .kpy-nf-card:nth-child(5n+4) .kpy-nf-card__top {background: #fde8f4;} .kpy-nf-card:nth-child(5n+5) .kpy-nf-card__top {background: #fef3c7;} .kpy-nf-card__meta-row {display: flex; align-items: center; gap: 6px; flex-wrap: wrap;} .kpy-nf-card__pill {background: rgba(255, 255, 255, 0.65); border-radius: 20px; font-size: .68rem; font-weight: 700; padding: 3px 10px; color: #333; letter-spacing: .05em; backdrop-filter: blur(4px);} .kpy-nf-card__dot {width: 15px; height: 15px; border-radius: 50%; margin-left: auto; flex-shrink: 0;} .kpy-nf-card:nth-child(5n+1) .kpy-nf-card__dot {background: #0f6e56;} .kpy-nf-card:nth-child(5n+2) .kpy-nf-card__dot {background: #b84a1a;} .kpy-nf-card:nth-child(5n+3) .kpy-nf-card__dot {background: #1d4ed8;} .kpy-nf-card:nth-child(5n+4) .kpy-nf-card__dot {background: #9d174d;} .kpy-nf-card:nth-child(5n+5) .kpy-nf-card__dot {background: #92400e;} .kpy-nf-card__title {margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.25; color: #111;} .kpy-nf-card__excerpt {color: #555; font-size: .8rem; line-height: 1.6; margin: 0;} .kpy-nf-card__thumb {padding: 10px 10px 12px; flex: 1;} .kpy-nf-card__thumb-inner {position: relative; display: block; height: 200px; border-radius: 12px; overflow: hidden; text-decoration: none;} .kpy-nf-card__thumb-inner img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease;} .kpy-nf-card:hover .kpy-nf-card__thumb-inner img {transform: scale(1.06);} .kpy-nf-card__glass-btn {position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 22px; padding: 7px 16px; font-size: .75rem; font-weight: 700; color: #fff; text-decoration: none; letter-spacing: .05em; text-shadow: 0 1px 4px rgba(0, 0, 0, .35); white-space: nowrap; transition: background .2s;} .kpy-nf-card__glass-btn:hover {background: rgba(255, 255, 255, 0.38);} .kpy-nf-card__glass-arrow {width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); border: 1.5px solid rgba(255, 255, 255, 0.6); display: flex; align-items: center; justify-content: center; font-size: .75rem; line-height: 1;} .kpy-nf-badge--thumb {display: none;} .kpy-nf-empty {text-align: center; padding: 60px 20px; color: #aaa;} .kpy-nf-empty i {font-size: 3rem; display: block; margin-bottom: 16px; color: #ddd;} .kpy-nf-pagination {display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 32px;} .kpy-nf-pagination a, .kpy-nf-pagination span {display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border: 1.5px solid #ddd; font-size: .88rem; text-decoration: none; color: #333; background: #fff; border-radius: 6px; transition: all .2s;} .kpy-nf-pagination a:hover {border-color: var(--kpy-primary); color: var(--kpy-primary);} .kpy-nf-pagination .current {background: var(--kpy-primary); border-color: var(--kpy-primary); color: #fff; pointer-events: none;} /* ══ NEWS SLIDER (news_slider) ══ */ .kpy-ns-wrap {position: relative; padding: 0 52px; overflow: hidden; /* hides the cloned slides outside viewport */} .kpy-ns-track {display: flex; flex-wrap: nowrap; /* never wraps — slides stay in one row */ overflow: visible; /* transform-based; no scrollbar needed */ gap: 20px; will-change: transform; padding: 8px 2px 12px; /* scrollbar props removed — no longer scroll-based */} .kpy-ns-slide {flex: 0 0 280px; min-width: 280px;} .kpy-ns-card {border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; height: 100%; box-shadow: 0 4px 20px rgba(0, 0, 0, .08); transition: box-shadow .25s, transform .25s; background: #fff;} .kpy-ns-card:hover {box-shadow: 0 10px 36px rgba(0, 0, 0, .13); transform: translateY(-4px);} .kpy-ns-card__top {padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 8px;} .kpy-ns-slide:nth-child(5n+1) .kpy-ns-card__top {background: #b2ede0;} .kpy-ns-slide:nth-child(5n+2) .kpy-ns-card__top {background: #fce4d4;} .kpy-ns-slide:nth-child(5n+3) .kpy-ns-card__top {background: #dbeafe;} .kpy-ns-slide:nth-child(5n+4) .kpy-ns-card__top {background: #fde8f4;} .kpy-ns-slide:nth-child(5n+5) .kpy-ns-card__top {background: #fef3c7;} .kpy-ns-card__meta-row {display: flex; align-items: center; gap: 5px; flex-wrap: wrap;} .kpy-ns-card__pill {background: rgba(255, 255, 255, 0.65); border-radius: 20px; font-size: .65rem; font-weight: 700; padding: 2px 9px; color: #333; letter-spacing: .04em;} .kpy-ns-card__dot {width: 13px; height: 13px; border-radius: 50%; margin-left: auto; flex-shrink: 0;} .kpy-ns-slide:nth-child(5n+1) .kpy-ns-card__dot {background: #0f6e56;} .kpy-ns-slide:nth-child(5n+2) .kpy-ns-card__dot {background: #b84a1a;} .kpy-ns-slide:nth-child(5n+3) .kpy-ns-card__dot {background: #1d4ed8;} .kpy-ns-slide:nth-child(5n+4) .kpy-ns-card__dot {background: #9d174d;} .kpy-ns-slide:nth-child(5n+5) .kpy-ns-card__dot {background: #92400e;} .kpy-ns-card__title {margin: 0; font-size: .88rem; font-weight: 800; line-height: 1.3; color: #111;} .kpy-ns-card__excerpt {color: #555; font-size: .76rem; line-height: 1.55; margin: 0;} .kpy-ns-card__img {padding: 8px 8px 10px;} .kpy-ns-card__img-inner {position: relative; display: block; height: 160px; border-radius: 10px; overflow: hidden; text-decoration: none;} .kpy-ns-card__img-inner img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease;} .kpy-ns-card:hover .kpy-ns-card__img-inner img {transform: scale(1.06);} .kpy-ns-card__glass-btn {position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 20px; padding: 6px 13px; font-size: .7rem; font-weight: 700; color: #fff; text-decoration: none; letter-spacing: .05em; text-shadow: 0 1px 4px rgba(0, 0, 0, .35); white-space: nowrap; transition: background .2s;} .kpy-ns-card__glass-btn:hover {background: rgba(255, 255, 255, 0.38);} .kpy-ns-card__glass-arrow {width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); border: 1.5px solid rgba(255, 255, 255, 0.6); display: flex; align-items: center; justify-content: center; font-size: .7rem; line-height: 1;} .kpy-ns-btn {position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1.5px solid #e0e0e0; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: all .2s; box-shadow: 0 2px 8px rgba(0, 0, 0, .1);} .kpy-ns-btn:hover {background: var(--kpy-primary); border-color: var(--kpy-primary); color: #fff;} .kpy-ns-btn--prev {left: 0;} .kpy-ns-btn--next {right: 0;} @media(max-width:1024px) {.kpy-nf-grid {grid-template-columns: repeat(2, 1fr);} .kpy-nf-featured {grid-template-columns: 1fr;} .kpy-nf-featured__media {min-height: 240px;} .kpy-nf-wrap {padding: 0 28px;} } @media(max-width:768px) {.kpy-nf-grid {grid-template-columns: 1fr;} .kpy-nf-wrap {padding: 0 16px;} .kpy-ns-slide {flex: 0 0 240px; min-width: 240px;} .kpy-ns-wrap {padding: 0 40px;} } @media(max-width:480px) {.kpy-nf-card__thumb-inner {height: 180px;} .kpy-ns-slide {flex: 0 0 220px; min-width: 220px;} .kpy-ns-wrap {padding: 0 36px;} } /*========================================================== Contact Us ==========================================================**/ .kpy-contact-section {padding: 0; margin: 0; background: #fff;} .kpy-contact-grid {display: grid; grid-template-columns: 1fr 1fr; min-height: 680px;} .kpy-contact-left {display: flex; flex-direction: column; background: #111; color: #fff;} .kpy-contact-map {flex: 1; min-height: 280px; overflow: hidden;} .kpy-contact-map iframe {width: 100%; height: 100%; min-height: 280px; display: block; border: 0;} .kpy-contact-details {padding: 32px 36px 36px;} .kpy-contact-eyebrow {font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: #c00; font-weight: 700; display: block; margin-bottom: 12px;} .kpy-contact-eyebrow--dark {color: #c00;} .kpy-contact-divider {width: 36px; height: 3px; background: #c00; border-radius: 2px; margin-bottom: 22px;} .kpy-contact-item {display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px;} .kpy-contact-icon {width: 36px; height: 36px; background: rgba(200, 0, 0, 0.12); border: 1px solid rgba(200, 0, 0, 0.28); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;} .kpy-contact-icon svg {width: 16px; height: 16px; fill: #c00;} .kpy-ci-label {font-size: 0.65rem; color: rgba(255, 255, 255, 0.38); letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 3px;} .kpy-ci-val {font-size: 0.85rem; color: rgba(255, 255, 255, 0.82); line-height: 1.55; margin: 0;} .kpy-ci-val a {color: rgba(255, 255, 255, 0.82); text-decoration: none;} .kpy-ci-val a:hover {color: #fff;} .kpy-contact-right {background: #fff; padding: 52px 48px; display: flex; flex-direction: column; justify-content: center;} .kpy-form-heading {font-size: 1.9rem; font-weight: 800; color: #111; margin: 0 0 8px; line-height: 1.15;} .kpy-form-sub {font-size: 0.88rem; color: #777; line-height: 1.65; margin: 0 0 28px;} .kpy-form {display: flex; flex-direction: column; gap: 0;} .kpy-form-row {display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;} .kpy-form-field {display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px;} .kpy-form-field label {font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #444; font-weight: 700;} .kpy-form-field input, .kpy-form-field textarea, .kpy-form-field select {border: 1.5px solid #e8e8e8; border-radius: 6px; padding: 10px 14px; font-size: 0.88rem; color: #111; background: #fafafa; outline: none; width: 100%; transition: border-color 0.2s, background 0.2s; font-family: inherit;} .kpy-form-field input:focus, .kpy-form-field textarea:focus {border-color: #c00; background: #fff;} .kpy-form-field textarea {resize: vertical; min-height: 110px;} .kpy-form-btn {background: #c00; color: #fff; border: none; border-radius: 6px; padding: 13px 32px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; align-self: flex-start; transition: background 0.2s; font-family: inherit; margin-top: 6px;} .kpy-form-btn:hover {background: #a00;} @media(max-width:1024px) {.kpy-contact-right {padding: 40px 36px;} .kpy-contact-details {padding: 26px 28px 30px;} } @media(max-width:768px) {.kpy-contact-grid {grid-template-columns: 1fr;} .kpy-contact-map {min-height: 240px;} .kpy-contact-map iframe {min-height: 240px;} .kpy-contact-right {padding: 32px 24px;} .kpy-form-row {grid-template-columns: 1fr;} .kpy-form-heading {font-size: 1.5rem;} } @media(max-width:480px) {.kpy-contact-details {padding: 22px 20px 24px;} .kpy-contact-right {padding: 28px 18px;} } /*========================================================== Donate Page — Kipya Theme ==========================================================*/ .kpy-donation-section {padding: 0; margin: 0; background: #fff;} .kpy-donation-grid {display: grid; grid-template-columns: 1fr 1fr; min-height: 680px;} .kpy-donation-left {display: flex; flex-direction: column; background: #111; color: #fff; padding: 36px 32px 40px;} .kpy-donation-eyebrow {font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: #c00; font-weight: 700; display: block; margin-bottom: 12px;} .kpy-donation-divider {width: 36px; height: 3px; background: #c00; border-radius: 2px; margin-bottom: 24px;} .kpy-payment-block {margin-bottom: 28px;} .kpy-payment-title {font-size: 1.1rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px; margin-bottom: 12px;} .kpy-payment-title i {color: #c00;} .kpy-payment-details {background: rgba(255, 255, 255, 0.06); padding: 16px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.08);} .kpy-payment-item {display: flex; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04);} .kpy-payment-item:last-child {border-bottom: none;} .kpy-payment-label {color: rgba(255, 255, 255, 0.4); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; min-width: 100px;} .kpy-payment-value {color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; word-break: break-word;} .kpy-payment-note {color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; margin-top: 20px; line-height: 1.6; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 20px;} .kpy-donation-right {background: #fff; padding: 52px 48px; display: flex; flex-direction: column; justify-content: center;} .kpy-success-message {text-align: center; padding: 20px 0;} .kpy-success-icon {color: #c00; font-size: 3rem; margin-bottom: 15px;} .kpy-success-title {font-size: 1.6rem; font-weight: 800; color: #111; margin-bottom: 12px;} .kpy-success-text {color: #666; max-width: 500px; margin: 0 auto 25px; line-height: 1.6;} .kpy-back-btn {display: inline-block; background: #c00; color: #fff; padding: 12px 28px; border-radius: 6px; text-decoration: none; font-weight: 700; transition: background 0.2s;} .kpy-back-btn:hover {background: #a00;} /* Reuse existing contact form styles for .kpy-form, .kpy-form-row, .kpy-form-field, etc. – already defined in your contact CSS */ @media (max-width: 992px) {.kpy-donation-grid {grid-template-columns: 1fr;} .kpy-donation-right {padding: 32px 24px;} .kpy-donation-left {padding: 28px 24px;} } @media (max-width: 768px) {.kpy-donation-left {padding: 24px 18px;} .kpy-donation-right {padding: 28px 18px;} } /*========================================================== Editor Sec page ==========================================================**/ .yaf-container {max-width: 1200px; margin: 0 auto; padding: 0 20px; font-family: var(--kpy-font); color: var(--kpy-base);} .yaf-invite {display: flex; flex-wrap: wrap; gap: 80px; align-items: center;} .yaf-invite-content {flex: 1; min-width: 300px;} .yaf-invite-image {flex: 1; min-width: 300px; position: relative; margin-top: 50px;} .yaf-invite-image::before {content: ''; position: absolute; width: 100%; height: 100%; top: 20px; left: 20px; background: linear-gradient(45deg, var(--kpy-secondary), #bfa500); z-index: -1; border-radius: 12px; opacity: 0.2; transition: all 0.3s ease;} .yaf-invite-image:hover::before {top: 15px; left: 15px;} .yaf-invite-image img {width: 100%; height: auto; border-radius: 12px; box-shadow: 0 15px 40px rgba(var(--kpy-base-rgb), 0.1); border: 1px solid rgba(var(--kpy-primary-rgb), 0.1); transition: transform 0.3s ease;} .yaf-invite-image:hover img {transform: translate(-5px, -5px);} .yaf-title {font-family: var(--kpy-font-3); font-size: 3.5rem; margin-bottom: 1.5rem; position: relative; line-height: 1.2; padding-bottom: 20px; color: var(--kpy-secondary-2);} .yaf-title:after {content: ''; position: absolute; bottom: 0; left: 0; width: 80px; height: 5px; background: linear-gradient(90deg, var(--kpy-secondary), var(--kpy-primary)); border-radius: 3px;} .yaf-description {font-size: 1.15rem; line-height: 1.8; color: var(--kpy-base); margin-bottom: 2rem; max-width: 90%;} .yaf-features {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-top: 20px;} .yaf-feature-card {background: var(--kpy-white); padding: 40px 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(var(--kpy-base-rgb), 0.08); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border-left: 4px solid var(--kpy-primary); position: relative; overflow: hidden;} .yaf-feature-card::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(var(--kpy-primary-rgb), 0.03), rgba(var(--kpy-secondary-rgb), 0.03)); z-index: 0;} .yaf-feature-card:hover {transform: translateY(-10px) scale(1.02); box-shadow: 0 15px 40px rgba(var(--kpy-base-rgb), 0.15);} .yaf-feature-card:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--kpy-gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;} .yaf-feature-card:hover {transform: translateY(-10px); box-shadow: 0 15px 30px rgba(var(--kpy-base-rgb), 0.1);} .yaf-feature-title {font-family: var(--kpy-font-3); font-size: 2.5rem; margin-bottom: 1.2rem; position: relative; z-index: 1;} .yaf-feature-text {font-size: 1.05rem; line-height: 1.7; color: var(--kpy-grey); position: relative; z-index: 1;} .yaf-cta {display: inline-block; background: var(--kpy-primary); color: #fff; padding: 15px 35px; border-radius: 50px; text-decoration: none; font-weight: 600; margin-top: 20px; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(var(--kpy-primary-rgb), 0.2);} .yaf-cta:hover {background: var(--kpy-secondary); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(var(--kpy-secondary-rgb), 0.3);} @media (max-width:768px) {.yaf-invite {flex-direction: column-reverse; gap: 50px; margin-bottom: 60px;} .yaf-invite-content {padding: 0;} .yaf-description {max-width: 100%;} .yaf-features {grid-template-columns: 1fr; gap: 30px;} } @media (max-width:480px) {.yaf-container {padding: 40px 15px;} .yaf-feature-card {padding: 30px 20px;} } /** ========================================================== Services CSS ===========================================================**/ .kavod-programs-wrapper {position: relative; min-height: 500px;} .kavod-programs-container {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 60px;} @media(max-width:1024px) {.kavod-programs-container {grid-template-columns: repeat(2, 1fr)} } @media(max-width:768px) {.kavod-programs-container {grid-template-columns: 1fr} } .kavod-program-card {background: var(--kpy-white); border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(var(--kpy-base-rgb), 0.08); transition: all 0.3s ease; border-top: 5px solid var(--kpy-primary); cursor: pointer; height: 100%; display: flex; flex-direction: column;} .kavod-program-card:hover {transform: translateY(-10px); box-shadow: 0 15px 30px rgba(var(--kpy-base-rgb), 0.15);} .kavod-program-icon {background: linear-gradient(135deg, var(--kpy-primary) 0%, #4a9daa 100%); height: 120px; display: flex; align-items: center; justify-content: center; color: var(--kpy-white); font-size: 2.5rem;} .kavod-program-content {padding: 25px; flex-grow: 1; display: flex; flex-direction: column;} .kavod-program-content h3 {font-size: 1.5rem; color: var(--kpy-base); margin-bottom: 15px; font-family: 'Montserrat', sans-serif;} .kavod-program-content p {color: var(--kpy-grey); margin-bottom: 20px; flex-grow: 1;} .kavod-program-features {list-style-type: none; margin-bottom: 25px;} .kavod-program-features li {padding: 8px 0; border-bottom: 1px dashed #eee; display: flex; align-items: center;} .kavod-program-features li i {color: var(--kpy-secondary); margin-right: 10px;} .kavod-btn {display: inline-block; background: var(--kpy-primary); color: var(--kpy-white); padding: 12px 25px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer; text-align: center;} .kavod-btn:hover {background: var(--kpy-secondary); color: var(--kpy-base); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(var(--kpy-secondary-rgb), 0.3);} .kavod-program-popup {display: none; position: fixed; top: 0; left: 0; width: 450px; height: 100%; background-color: var(--kpy-white); z-index: 1000; overflow-y: auto; box-shadow: 5px 0 30px rgba(0, 0, 0, 0.15); transform: translateX(-100%); transition: transform 0.4s ease;} .kavod-program-popup.active {transform: translateX(0);} .kavod-popup-content {padding: 40px 30px; position: relative; height: 100%;} .kavod-popup-close {position: absolute; top: 20px; right: 20px; font-size: 24px; cursor: pointer; color: var(--kpy-grey); z-index: 10;} .kavod-popup-close:hover {color: var(--kpy-primary);} .kavod-popup-header {margin-bottom: 25px; padding-right: 40px;} .kavod-popup-header h2 {color: var(--kpy-primary); margin-bottom: 10px; font-size: 28px; font-family: var(--kpy-font-2);} .kavod-popup-duration {color: var(--kpy-grey); font-style: italic; margin-bottom: 15px;} .kavod-popup-body {margin-bottom: 30px;} .kavod-popup-features {margin: 25px 0;} .kavod-popup-features h3 {font-family: var(--kpy-font-2); margin-bottom: 15px; font-size: 22px;} .kavod-popup-features ul {list-style-type: none;} .kavod-popup-features li {padding: 10px 0; border-bottom: 1px dashed #eee; display: flex; align-items: center;} .kavod-popup-features li i {color: var(--kpy-secondary-2); margin-right: 10px;} .kavod-popup-footer {text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee;} .kavod-popup-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999;} @media(max-width:600px) {.kavod-program-popup {width: 85%} } /** ========================================================== Container CSS ===========================================================**/ @media (min-width: 1200px) {.container, .container-lg, .container-md, .container-sm, .container-xl {max-width: 1140px !important;} } /** ========================================================== Upcoming Events Page ===========================================================**/ .kpy-ev-home {max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px;} /* Section heading */ .kpy-ev-home-header {text-align: center; margin-bottom: 36px;} .kpy-ev-home-heading {font-size: 2.6rem; font-weight: 800; color: var(--kpy-secondary-2, #1a1a2e); margin: 0 0 6px; line-height: 1.15; display: block; text-align: center;} .kpy-ev-home-heading::after {display: none;} /* Two-column grid */ .kpy-ev-home-grid {display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: stretch;} .kpy-ev-home-eyebrow {display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--kpy-primary, #e85c26); margin-bottom: 10px;} .kpy-ev-home-eyebrow::before, .kpy-ev-home-eyebrow::after {content: '✦'; font-size: 0.65rem; opacity: 0.8;} .kpy-ev-home-subtitle {font-size: 2.4rem; font-weight: 800; color: var(--kpy-primary, #e85c26); margin: 0; line-height: 1.2;} /* ── Responsive heading ── */ @media (max-width: 768px) {.kpy-ev-home-heading {font-size: 1.8rem;} .kpy-ev-home-subtitle {font-size: 1.6rem;} } @media (max-width: 480px) {.kpy-ev-home-heading {font-size: 1.45rem;} .kpy-ev-home-subtitle {font-size: 1.3rem;} } /* ────────────────────────────────────────── Featured / Main card (left column) ────────────────────────────────────────── */ .kpy-ev-main-wrap {height: 100%;} .kpy-ev-main-card {display: block; position: relative; border-radius: 0 0 18px 0; overflow: hidden; text-decoration: none; height: 490px; min-height: 380px;} /* Background image */ .kpy-ev-main-bg {position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.55s ease;} .kpy-ev-main-card:hover .kpy-ev-main-bg {transform: scale(1.05);} /* Gradient overlay */ .kpy-ev-main-overlay {position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.78) 100%);} /* Bottom content area */ .kpy-ev-main-bottom {position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 26px 26px;} /* Category / label badge */ .kpy-ev-badge {display: inline-flex; align-items: center; gap: 4px; background: var(--kpy-primary, #e85c26); color: #fff; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 13px; border-radius: 20px; margin-bottom: 10px;} /* Event title on main card */ .kpy-ev-main-title {color: #fff; font-size: 1.6rem; font-weight: 700; margin: 0 0 14px; line-height: 1.3;} /* Date / time / location row */ .kpy-ev-main-meta {display: flex; flex-wrap: wrap; gap: 14px; color: rgba(255, 255, 255, 0.88); font-size: 0.84rem;} .kpy-ev-main-meta span {display: flex; align-items: center; gap: 5px;} /* Arrow button – top-right corner */ .kpy-ev-arrow-btn {position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; background: var(--kpy-primary, #e85c26); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; transition: transform 0.28s ease, background 0.28s ease, color 0.28s ease; z-index: 2;} .kpy-ev-main-card:hover .kpy-ev-arrow-btn {transform: rotate(45deg) scale(1.12); background: #fff; color: var(--kpy-primary, #e85c26);} /* ────────────────────────────────────────── Side cards (right column) ────────────────────────────────────────── */ .kpy-ev-side-wrap {display: flex; flex-direction: column; gap: 14px; height: 100%;} .kpy-ev-side-card {display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 0 0 18px 0; overflow: hidden; text-decoration: none; padding: 10px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; flex: 1; min-height: 100px;} .kpy-ev-side-card:hover {transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);} /* Side card thumbnail */ .kpy-ev-side-thumb {flex: 0 0 110px; height: 95px; border-radius: 0; overflow: hidden;} .kpy-ev-side-img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.38s ease;} .kpy-ev-side-card:hover .kpy-ev-side-img {transform: scale(1.07);} /* Side card text content */ .kpy-ev-side-content {flex: 1; min-width: 0; padding-right: 8px;} .kpy-ev-side-badge {display: inline-flex; align-items: center; gap: 3px; background: rgba(232, 92, 38, 0.1); color: var(--kpy-primary, #e85c26); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 9px; border-radius: 20px; margin-bottom: 5px;} .kpy-ev-side-title {font-size: 0.93rem; font-weight: 700; color: var(--kpy-secondary-2, #1a1a2e); margin: 0 0 5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .kpy-ev-side-meta {display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.76rem; color: rgba(30, 30, 30, 0.62);} .kpy-ev-side-meta span {display: flex; align-items: center; gap: 4px;} .kpy-ev-side-loc {font-size: 0.76rem; color: rgba(30, 30, 30, 0.58); margin-top: 4px; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} /* Side card arrow */ .kpy-ev-side-arrow {flex: 0 0 auto; width: 32px; height: 32px; background: var(--kpy-primary, #e85c26); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.88rem; transition: transform 0.25s ease; margin-left: 4px;} .kpy-ev-side-card:hover .kpy-ev-side-arrow {transform: rotate(45deg);} /* Empty state */ .kpy-ev-empty {text-align: center; padding: 50px 20px; color: rgba(0, 0, 0, 0.45); font-style: italic;} /* ── Homepage Responsive ── */ @media (max-width: 960px) {.kpy-ev-home-grid {grid-template-columns: 1fr;} .kpy-ev-main-card {height: 380px;} .kpy-ev-side-wrap {flex-direction: row; flex-wrap: wrap;} .kpy-ev-side-card {flex: 1 1 calc(50% - 7px); min-height: 90px;} } @media (max-width: 540px) {.kpy-ev-main-card {height: 310px;} .kpy-ev-main-title {font-size: 1.25rem;} .kpy-ev-side-wrap {flex-direction: column;} .kpy-ev-side-card {flex: 1 1 auto;} .kpy-ev-side-thumb {flex: 0 0 85px; height: 80px;} } /** ========================================================== * EVENTS — Listing Page [upcoming_events] * 3-column card grid with date badge * Matches Screenshot 2 design *===========================================================**/ .kpy-events-container {max-width: 1200px; margin: 0 auto; padding: 20px 16px 60px;} /* Section heading reuse */ .kpy-news-slider-header {margin-bottom: 10px;} .kpy-news-slider-title {font-size: 2rem; font-weight: 700; color: var(--kpy-secondary-2, #1a1a2e); margin: 0;} /* 3-column grid */ .kpy-events-list-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 28px;} /* ── Individual Listing Card ── */ .kpy-ev-lcard {border-radius: 0 0 18px 0; overflow: hidden; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); transition: transform 0.28s ease, box-shadow 0.28s ease;} .kpy-ev-lcard:hover {transform: translateY(-6px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.13);} .kpy-ev-lcard-link {display: block; text-decoration: none; color: inherit;} /* Image wrapper */ .kpy-ev-lcard-img-wrap {position: relative; width: 100%; height: 220px; overflow: hidden; border-radius: 0;} .kpy-ev-lcard-img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease;} .kpy-ev-lcard:hover .kpy-ev-lcard-img {transform: scale(1.06);} /* ── Date Badge (top-left of image) ── */ .kpy-ev-date-badge {position: absolute; top: 14px; left: 14px; background: var(--kpy-primary, #e85c26); color: #fff; border-radius: 8px; padding: 7px 11px; text-align: center; min-width: 50px; display: flex; flex-direction: column; align-items: center; line-height: 1; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); z-index: 2;} /* Day number – large */ .kpy-ev-badge-day {font-size: 1.6rem; font-weight: 800; line-height: 1; display: block;} /* Month abbreviation */ .kpy-ev-badge-month {font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-top: 3px;} /* Recurring variant – shows icon + "Weekly" */ .kpy-ev-date-badge--recurring {padding: 8px 11px; gap: 3px;} .kpy-ev-date-badge--recurring i {font-size: 1.15rem; display: block;} /* ── Card body (white area below image) ── */ .kpy-ev-lcard-body {padding: 20px 20px 22px; background: #fdf5f2;} .kpy-ev-lcard-title {font-size: 1.08rem; font-weight: 700; color: var(--kpy-secondary-2, #1a1a2e); margin: 0 0 14px; line-height: 1.4;} /* Meta rows */ .kpy-ev-lcard-meta {display: flex; flex-direction: column; gap: 0;} .kpy-ev-lcard-row {display: flex; align-items: flex-start; gap: 8px; font-size: 0.83rem; color: rgba(30, 30, 30, 0.68); padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06);} .kpy-ev-lcard-row:last-child {border-bottom: none; padding-bottom: 0;} .kpy-ev-lcard-row i {color: var(--kpy-primary, #e85c26); flex: 0 0 auto; margin-top: 1px; font-size: 0.92rem;} .kpy-ev-lcard-row strong {color: var(--kpy-secondary-2, #1a1a2e); font-weight: 600;} /* ── Pagination ── */ .kpy-ev-pagination {display: flex; justify-content: center; gap: 6px; margin-top: 44px; flex-wrap: wrap;} .kpy-ev-pagination .page-numbers {display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 8px; background: #fff; color: var(--kpy-secondary-2, #1a1a2e); text-decoration: none; font-size: 0.88rem; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: background 0.2s ease, color 0.2s ease;} .kpy-ev-pagination .page-numbers.current, .kpy-ev-pagination .page-numbers:hover {background: var(--kpy-primary, #e85c26); color: #fff;} /* ── Listing Responsive ── */ @media (max-width: 1024px) {.kpy-events-list-grid {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 600px) {.kpy-events-list-grid {grid-template-columns: 1fr; gap: 18px;} .kpy-ev-lcard-img-wrap {height: 190px;} } /** ========================================================= NEWS section ===============================================================**/ .kpy-news-container {max-width: 1280px; margin: 0 auto; padding: 40px 20px;} .kpy-news-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;} .kpy-horizontal-card {background: #ffffff; border: 1px solid #e8e8e8; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.3s ease;} .kpy-horizontal-card:hover {box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);} .kpy-card-image-wrapper {position: relative; width: 100%; height: 220px; overflow: hidden; flex-shrink: 0;} .kpy-card-image-wrapper a {display: block; width: 100%; height: 100%;} .kpy-card-image-wrapper img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease;} .kpy-horizontal-card:hover .kpy-card-image-wrapper img {transform: scale(1.04);} .kpy-card-badge {position: absolute; top: 12px; left: 12px; background: var(--kpy-primary); color: #fff; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 3px; font-family: var(--kpy-font);} .kpy-card-content-wrapper {padding: 22px 22px 20px; display: flex; flex-direction: column; flex: 1;} .kpy-card-title {font-family: var(--kpy-font); font-size: 1.15rem; font-weight: 700; line-height: 1.4; color: var(--kpy-black); margin: 0 0 12px 0;} .kpy-card-title a {color: var(--kpy-black); text-decoration: none; transition: color 0.2s;} .kpy-card-title a:hover {color: var(--kpy-primary);} .kpy-card-meta {display: flex; align-items: center; gap: 18px; margin-bottom: 12px; flex-wrap: wrap;} .kpy-card-author, .kpy-card-date {display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; color: #555555; font-family: var(--kpy-font);} .kpy-card-author i, .kpy-card-date i {font-size: 0.85rem; color: #555555;} .kpy-card-excerpt {font-family: var(--kpy-font); font-size: 0.93rem; color: #444444; line-height: 1.65; margin-bottom: 20px; flex: 1;} .kpy-card-footer {margin-top: auto;} .kpy-card-button {display: inline-block; background: var(--kpy-primary); color: #ffffff; font-family: var(--kpy-font); font-size: 0.88rem; font-weight: 600; padding: 10px 24px; border-radius: 3px; text-decoration: none; transition: background 0.2s ease; letter-spacing: 0.02em;} .kpy-card-button:hover {background: #c0281f; color: #ffffff;} .kpy-card-button i {display: none;} @media (max-width: 1024px) {.kpy-news-grid {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 600px) {.kpy-news-grid {grid-template-columns: 1fr;} .kpy-card-image-wrapper {height: 200px;} } /* ============================================================= UDN TEAM ============================================================= */ .udn-team-wrap {font-family: var(--kpy-font); padding: 40px 32px;} .udn-team-filters {display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px;} .udn-team-filter {background: #fff; border: 1px solid #dedede; color: #222; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 9px 16px; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;} .udn-team-filter:hover, .udn-team-filter.active {background: var(--udn-red, #E8291C); border-color: var(--udn-red, #E8291C); color: #fff; box-shadow: 0 8px 18px rgba(232, 41, 28, .18);} .udn-team-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; align-items: stretch; justify-content: center; max-width: 1280px; margin: 0 auto;} .udn-team-card {position: relative; background: #fff; border: none; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 34px rgba(15, 20, 30, .12); transition: transform .24s ease, box-shadow .24s ease;} .udn-team-card:hover {transform: translateY(-6px); box-shadow: 0 24px 52px rgba(15, 20, 30, .18);} .udn-team-card__photo {position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #e9e9e9; border-radius: 20px;} .udn-team-card__img {width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; filter: saturate(.98) contrast(1.02); transition: transform .45s ease, filter .45s ease;} .udn-team-card:hover .udn-team-card__img {transform: scale(1.045); filter: saturate(1.05) contrast(1.04);} /* Name + designation overlaid directly on the photo, like the reference */ .udn-team-card__info {position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px 18px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 35%, rgba(0, 0, 0, .85) 100%); display: flex; flex-direction: column; align-items: flex-start; z-index: 2;} .udn-team-card__name {font-size: 1.04rem; font-weight: 900; color: #fff !important; margin: 0 0 4px; line-height: 1.25;} .udn-team-card__designation {font-size: .82rem; color: rgba(255, 255, 255, .85); font-weight: 600; margin: 0; line-height: 1.35;} .udn-team-card__org {display: none;} /* org line not used in this layout; kept hidden rather than removed for easy revert */ .udn-team-card__cat-badge {display: none;} /* category badge removed per design */ /* Hover overlay (socials + view profile) — slides up over the photo on hover, stays above the gradient/name */ .udn-team-card__overlay {position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 22px; background: rgba(17, 17, 17, .72); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; z-index: 3;} .udn-team-card:hover .udn-team-card__overlay, .udn-team-card:focus-within .udn-team-card__overlay {opacity: 1; transform: translateY(0);} .udn-team-card__socials {display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;} .udn-team-social {display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .15); color: #fff !important; font-size: .95rem; text-decoration: none !important; transition: background .18s ease, color .18s ease, transform .18s ease;} .udn-team-social:hover {background: #fff; color: var(--udn-red, #E8291C) !important; transform: translateY(-2px);} .udn-team-social--dark {background: #fff; border-color: rgba(17, 17, 17, .12); color: #222 !important; box-shadow: 0 8px 18px rgba(15, 20, 30, .08);} .udn-team-social--dark:hover {background: var(--udn-red, #E8291C); border-color: var(--udn-red, #E8291C); color: #fff !important;} .udn-team-card__view-btn {background: var(--udn-red, #E8291C); border: 1px solid var(--udn-red, #E8291C); color: #fff; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 11px 18px; border-radius: 8px; cursor: pointer; min-width: 142px; transition: background .18s ease, color .18s ease, transform .18s ease;} .udn-team-card__view-btn:hover, .udn-team-card__view-btn:focus {background: #fff; color: var(--udn-red, #E8291C); transform: translateY(-2px); outline: none;} /* Modal (unchanged in spirit, corners rounded to match new card style) */ .teamPop .modal-dialog {padding: 0; background: transparent;} .udn-team-modal {border: 0; border-radius: 20px; max-height: none; overflow: hidden; box-shadow: 0 28px 80px rgba(0, 0, 0, .28);} .udn-team-modal__close {position: absolute; top: 18px; right: 18px; z-index: 3; width: 38px; height: 38px; background-color: #fff; opacity: 1; box-shadow: 0 10px 24px rgba(0, 0, 0, .14); border-radius: 50%;} .udn-team-modal__grid {display: grid; grid-template-columns: minmax(280px, .78fr) 1fr; min-height: 520px;} .udn-team-modal__media {background: #222; min-height: 520px;} .udn-team-modal__img {width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: top center; display: block;} .udn-team-modal__content {padding: 52px 54px 44px; overflow-y: auto; max-height: 82vh;} .udn-team-modal__eyebrow {color: var(--udn-red, #E8291C); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px;} .udn-team-modal__name {color: #151515 !important; font-size: clamp(1.7rem, 3vw, 2.55rem) !important; font-weight: 900 !important; line-height: 1.08 !important; margin: 0 46px 10px 0 !important;} .udn-team-modal__role {color: var(--udn-red, #E8291C); font-weight: 800; margin: 0 0 4px;} .udn-team-modal__org {color: #686868; font-size: .9rem; margin: 0 0 22px;} .udn-team-modal-body {color: #3f3f3f; font-size: .95rem; line-height: 1.85; margin: 20px 0 22px;} .udn-team-modal-body p:last-child {margin-bottom: 0;} .udn-team-modal__meta {display: grid; gap: 10px; margin: 0 0 20px; padding: 18px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee;} .udn-team-modal__meta div {display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline;} .udn-team-modal__meta dt {color: #222; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;} .udn-team-modal__meta dd {margin: 0; color: #555; font-size: .9rem;} .udn-team-modal__meta a {color: var(--udn-red, #E8291C); text-decoration: none; font-weight: 700;} .udn-team-modal-socials {display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px;} .udn-team-empty {text-align: center; padding: 54px 20px; color: #777; background: #f7f7f7; border: 1px solid #ededed; border-radius: 20px;} @media (max-width: 1100px) {.udn-team-grid {grid-template-columns: repeat(3, minmax(0, 1fr));} } @media (max-width: 820px) {.udn-team-wrap {padding: 28px 18px;} .udn-team-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;} .udn-team-modal__grid {grid-template-columns: 1fr;} .udn-team-modal__media, .udn-team-modal__img {min-height: 360px; max-height: 420px;} .udn-team-modal__content {padding: 36px 28px 32px; max-height: none;} } @media (max-width: 540px) {.udn-team-wrap {padding: 20px 14px;} .udn-team-grid {grid-template-columns: 1fr;} .udn-team-card__photo {aspect-ratio: 4 / 5;} .udn-team-modal__meta div {grid-template-columns: 1fr; gap: 2px;} } /** ========================================================= 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;} } /** ========================================================= 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;} /* ============================================ KPY PAGINATION ============================================ */ .kpy-pagination-wrapper {display: flex; justify-content: center; align-items: center; margin: 40px 0;} .kpy-pagination-wrapper .page-numbers {display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 4px; border-radius: 6px; font-size: 16px; font-weight: 600; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; /* Default (non-active) — red */ background-color: #e8302a; color: #ffffff;} .kpy-pagination-wrapper .page-numbers:hover {background-color: #c0201a; color: #ffffff;} /* Active / current page — black */ .kpy-pagination-wrapper .page-numbers.current {background-color: #1a1a1a; color: #ffffff; cursor: default; pointer-events: none;} /* Previous « and Next » links — match red style */ .kpy-pagination-wrapper .prev.page-numbers, .kpy-pagination-wrapper .next.page-numbers {background-color: #e8302a; color: #ffffff; width: auto; padding: 0 16px;} .kpy-pagination-wrapper .prev.page-numbers:hover, .kpy-pagination-wrapper .next.page-numbers:hover {background-color: #c0201a;} /* Dots (...) */ .kpy-pagination-wrapper .page-numbers.dots {background-color: transparent; color: #1a1a1a; cursor: default; pointer-events: none;} /** ============================================================ 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%;} /*------------------------------------*\ TYPOGRAPHY \*------------------------------------*/ /* ============================================================= SINGLE POST / EVENT — RED HERO BANNER WITH WAVE BOTTOM SHAPE ============================================================= */ /* Hero wrapper — solid red, contains bg image overlay + content + wave */ .kpy-red-hero {position: relative; background: var(--kpy-primary, #e63329); overflow: hidden; padding: 0; margin: 0;} /* Optional featured image as subtle darkened overlay behind the red */ .kpy-red-hero__bg {position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; opacity: 0.18;} /* Red tint scrim sits above the bg image */ .kpy-red-hero__scrim {position: absolute; inset: 0; background: linear-gradient(135deg, rgba(230, 51, 41, 0.96) 0%, rgba(140, 20, 14, 0.92) 100%); z-index: 1;} /* Content area — centred, enough bottom-padding so text clears the wave */ .kpy-red-hero__inner {position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 64px 5% 100px;} /* Badge / eyebrow label */ .kpy-red-hero__badge {display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.18); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 14px; border-radius: 40px; margin-bottom: 1.2rem;} /* Date line */ .kpy-red-hero__date {display: flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.72); font-size: 0.85rem; margin-bottom: 1rem;} /* Title */ .kpy-red-hero__title {color: #fff !important; font-size: 2.4rem; font-weight: 900; line-height: 1.18; margin: 0; letter-spacing: -0.01em; max-width: 860px;} /* Breadcrumb row */ .kpy-red-hero__breadcrumb {display: flex; align-items: center; gap: 8px; margin-top: 1.4rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.65);} .kpy-red-hero__breadcrumb a {color: rgba(255, 255, 255, 0.75) !important; text-decoration: none !important; transition: color 0.15s;} .kpy-red-hero__breadcrumb a:hover {color: #fff !important;} .kpy-red-hero__breadcrumb-sep {opacity: 0.45;} /* ── Unique wave / arch bottom shape ── An SVG wave sits at the bottom of the hero and is coloured #fff so it appears to bite into the red, creating a smooth curved edge. The negative margin pulls the content below it upward, eliminating gap. */ .kpy-red-hero__wave {position: absolute; bottom: -2px; left: 0; width: 100%; line-height: 0; z-index: 3;} .kpy-red-hero__wave svg {display: block; width: 100%; height: 70px;} /* ── Single-post / single-event content wrapper ── */ .kpy-sn-wrap {max-width: 1200px; margin: 0 auto; padding: 52px 5% 60px; display: flex; gap: 2.5rem; align-items: flex-start; box-sizing: border-box;} .kpy-sn-main {flex: 1 1 0; min-width: 0;} .kpy-sn-sidebar {flex: 0 0 300px; max-width: 300px; position: sticky; top: 90px;} /* Meta bar — badge, date, location chips */ .kpy-sn-meta-bar {display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 1.6rem;} .kpy-sn-badge {display: inline-block; background: var(--kpy-primary); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 12px; border-radius: 3px;} .kpy-sn-date {display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #666;} /* Featured image */ .kpy-sn-featured-img {margin-bottom: 1.8rem; border-radius: 4px; overflow: hidden;} .kpy-sn-featured-img img {width: 100%; height: auto; display: block; max-height: 480px; object-fit: cover;} /* Post body text */ .kpy-sn-content {font-size: 0.97rem; line-height: 1.85; color: #1a1a1a;} /* Social share bar */ .kpy-sn-share {margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid #ebebeb;} .kpy-sn-share-label {display: block; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #888; margin-bottom: 0.9rem;} .kpy-sn-share-buttons {display: flex; gap: 10px; flex-wrap: wrap;} .kpy-share-btn {display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 0.85rem; font-weight: 600; border-radius: 3px; text-decoration: none !important; transition: opacity 0.2s; color: #fff !important;} .kpy-share-btn:hover {opacity: 0.85;} .kpy-share-fb {background: #1877f2;} .kpy-share-tw {background: #000;} .kpy-share-wa {background: #25d366;} /* Sidebar cards */ .kpy-sn-info-card, .kpy-sn-latest {background: #fff; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.09); margin-bottom: 1.5rem; border-radius: 3px; overflow: hidden;} .kpy-sn-card-header {display: flex; align-items: center; gap: 10px; background: var(--kpy-primary); color: #fff; padding: 0.85rem 1.2rem;} .kpy-sn-card-header h3 {margin: 0 !important; font-size: 0.78rem !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #fff !important;} .kpy-sn-card-header .bi {font-size: 1rem;} .kpy-sn-card-body {padding: 1rem 1.2rem 1.2rem;} .kpy-sn-info-row {display: flex; align-items: flex-start; gap: 10px; padding: 0.7rem 0; border-bottom: 1px solid #f0f0f0; font-size: 0.88rem; color: #444;} .kpy-sn-info-row:last-child {border-bottom: none;} .kpy-sn-info-row .bi {color: var(--kpy-primary); margin-top: 2px; flex-shrink: 0;} .kpy-sn-info-row strong {color: #111;} /* Register button inside sidebar */ .kpy-sev-register-btn {display: inline-flex; align-items: center; gap: 6px; background: var(--kpy-primary); color: #fff !important; padding: 9px 16px; font-size: 0.82rem; font-weight: 700; text-decoration: none !important; border-radius: 3px; transition: opacity 0.2s;} .kpy-sev-register-btn:hover {opacity: 0.85;} /* Latest/other stories body */ .kpy-sn-stories-body {padding: 0.4rem 0;} @media(max-width:900px) {.kpy-sn-wrap {flex-direction: column; padding: 36px 5% 40px;} .kpy-sn-sidebar {flex: none; max-width: 100%; width: 100%; position: static;} } @media(max-width:600px) {.kpy-red-hero__title {font-size: 1.6rem !important;} .kpy-red-hero__inner {padding: 44px 5% 90px;} .kpy-red-hero__wave svg {height: 50px;} } /* ============================================================= CONTACT & DONATE — Section padding-top (applied inline but also available as a utility class) ============================================================= */ .kpy-section-padded {padding-top: 60px;} /* ============================================================= UDN RESOURCES — Engagement cards (Member / Volunteer pages) ============================================================= */ .udn-engagement-wrap {font-family: var(--kpy-font);} .udn-engagement-intro {margin-bottom: 2.5rem;} .udn-engagement-heading {font-size: 2.2rem; font-weight: 900; color: var(--udn-dark, #111) !important; margin: 0.4rem 0 1rem; line-height: 1.2; letter-spacing: -0.01em;} .udn-engagement-body {font-size: 0.97rem; line-height: 1.85; color: var(--udn-text, #444);} .udn-engagement-body p {margin-bottom: 1rem;} /* Two-column card pair */ .udn-engagement-cards {display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem;} @media (max-width: 640px) {.udn-engagement-cards {grid-template-columns: 1fr;} .udn-engagement-heading {font-size: 1.7rem !important;} } /* Base engage card */ .udn-engage-card {padding: 2.2rem 1.8rem; display: flex; flex-direction: column; gap: 1rem;} .udn-engage-card--red {background: var(--udn-red, #E8291C);} .udn-engage-card--dark {background: var(--udn-dark, #111);} .udn-engage-card-icon {width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem;} .udn-engage-card h3 {color: #fff !important; font-size: 1.1rem; font-weight: 800; margin: 0; line-height: 1.3;} .udn-engage-card ul, .udn-engage-card ol {margin: 0; padding: 0; list-style: none !important; display: flex; flex-direction: column; gap: 0.6rem;} .udn-engage-card ul li, .udn-engage-card ol li {display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.88) !important; list-style: none !important; counter-increment: engage-list;} .udn-engage-card ul li .bi, .udn-engage-card ol li .bi {color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; flex-shrink: 0; margin-top: 2px;} .udn-engage-card ol {counter-reset: engage-list;} .udn-engage-card ol li::before {content: counter(engage-list) "."; color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; font-weight: 700; flex-shrink: 0; min-width: 18px;} /* Resources default content styling */ .udn-resources-content {font-size: 0.96rem; line-height: 1.85; color: var(--udn-text, #444);} .udn-resources-content p {margin-bottom: 1rem;} .udn-resources-content h2, .udn-resources-content h3, .udn-resources-content h4 {color: var(--udn-dark, #111) !important; margin-top: 1.6rem; margin-bottom: 0.6rem;} .udn-resources-content ul {padding-left: 1.4rem; margin-bottom: 1rem;} .udn-resources-content ul li {margin-bottom: 0.5rem;} /* ============================================================ OUR ACHIEVEMENTS PAGE CSS ============================================================ */ /* ── Intro band ── */ .udn-ach-intro {background: #fff; padding: 70px 5% 0; width: 100%; box-sizing: border-box;} .udn-ach-intro-inner {max-width: 1200px; margin: 0 auto;} .udn-ach-intro-left {margin-bottom: 2.5rem;} .udn-ach-heading {font-size: 2.6rem; font-weight: 900; color: var(--udn-dark, #111) !important; margin: 0.4rem 0 1rem; line-height: 1.15; letter-spacing: -0.01em;} .udn-ach-lead {font-size: 1rem; line-height: 1.85; color: var(--udn-text, #444) !important; max-width: 680px; margin: 0;} /* Stat strip */ .udn-ach-stat-strip {display: flex; align-items: center; gap: 0; border: 1px solid #ebebeb; background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); margin-bottom: 0;} .udn-ach-stat {flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.8rem 1rem; gap: 0.3rem; text-align: center;} .udn-ach-stat-num {font-size: 2.8rem; font-weight: 900; color: var(--udn-red, #E8291C) !important; line-height: 1;} .udn-ach-stat-num sup {font-size: 1.4rem;} .udn-ach-stat-label {font-size: 0.75rem; font-weight: 600; color: var(--udn-text, #444) !important; text-transform: uppercase; letter-spacing: 0.08em;} .udn-ach-stat-sep {width: 1px; height: 60px; background: #ebebeb; flex-shrink: 0;} /* ── Achievement category sections ── */ .udn-ach-section {width: 100%; box-sizing: border-box; padding: 70px 5% 75px;} .udn-ach-section--white {background: #fff;} .udn-ach-section--grey {background: var(--udn-light, #f5f5f5);} .udn-ach-section-inner {max-width: 1200px; margin: 0 auto;} /* Section header: icon bubble + eyebrow + title */ .udn-ach-section-header {margin-bottom: 2.5rem;} .udn-ach-section-label {display: flex; align-items: flex-start; gap: 1.2rem;} .udn-ach-label-icon {width: 50px; height: 50px; background: var(--udn-red, #E8291C); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; flex-shrink: 0; margin-top: 0.25rem;} .udn-ach-cat-title {font-size: 1.8rem; font-weight: 900; color: var(--udn-dark, #111) !important; margin: 0.25rem 0 0; line-height: 1.2; letter-spacing: -0.01em;} /* Achievement items list */ .udn-ach-items {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;} .udn-ach-item {display: flex; gap: 1rem; align-items: flex-start; background: #fff; padding: 1.6rem; border-left: 3px solid var(--udn-red, #E8291C); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s, transform 0.2s;} .udn-ach-item:hover {box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10); transform: translateY(-2px);} .udn-ach-section--grey .udn-ach-item {background: #fff;} .udn-ach-item-dot {width: 10px; height: 10px; background: var(--udn-red, #E8291C); border-radius: 50%; flex-shrink: 0; margin-top: 0.45rem;} .udn-ach-item-content {display: flex; flex-direction: column; gap: 0.5rem;} .udn-ach-item-content strong {font-size: 0.95rem; font-weight: 800; color: var(--udn-dark, #111) !important; line-height: 1.35;} .udn-ach-item-content p {font-size: 0.875rem; line-height: 1.78; color: var(--udn-text, #444) !important; margin: 0;} /* ── Full-bleed highlight band (OBI) ── */ .udn-ach-highlight {position: relative; width: 100%; min-height: 340px; display: flex; align-items: center; overflow: hidden; box-sizing: border-box; background: #111; margin-bottom: 0; padding-bottom: 0;} .udn-ach-highlight-bg {position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0;} .udn-ach-highlight-scrim {position: absolute; inset: 0; background: linear-gradient(135deg, rgba(232, 41, 28, 0.82) 0%, rgba(17, 17, 17, 0.92) 100%); z-index: 1;} .udn-ach-highlight-inner {position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 4rem 5%; display: flex; flex-direction: column; gap: 1.2rem; width: 100%; box-sizing: border-box;} .udn-ach-highlight-heading {color: #fff !important; font-size: 2rem; font-weight: 900; line-height: 1.25; margin: 0; max-width: 680px;} .udn-ach-highlight-accent {color: #fff !important; border-bottom: 3px solid rgba(255, 255, 255, 0.6); padding-bottom: 2px;} /* OBI progress bars */ .udn-ach-obi-track {display: flex; flex-direction: column; gap: 0.9rem; max-width: 520px; margin-top: 0.5rem;} .udn-ach-obi-item {display: flex; align-items: center; gap: 1rem;} .udn-ach-obi-year {color: rgba(255, 255, 255, 0.7) !important; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; min-width: 36px;} .udn-ach-obi-bar-wrap {flex: 1; height: 8px; background: rgba(255, 255, 255, 0.15); border-radius: 4px; overflow: hidden;} .udn-ach-obi-bar {height: 100%; background: rgba(255, 255, 255, 0.55); border-radius: 4px; transition: width 1s ease;} .udn-ach-obi-bar--best {background: #fff;} .udn-ach-obi-score {color: #fff !important; font-size: 0.85rem; font-weight: 800; min-width: 36px; text-align: right;} /* ── CTA BAND ── */ .udn-ap-cta-band {background: #111; width: 100%; box-sizing: border-box; margin: 0; padding: 0;} .udn-ap-cta-band-bg {display: none;} .udn-ap-cta-band-scrim {display: none;} .udn-ap-cta-inner {max-width: 1200px; margin: 0; padding: 70px 5%; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;} .udn-ap-cta-heading {color: #fff !important; font-size: 2.2rem; font-weight: 900; line-height: 1.2; margin: 0; max-width: 680px;} .udn-ap-cta-text {color: rgba(255, 255, 255, 0.85) !important; font-size: 1rem; line-height: 1.7; max-width: 580px; margin: 0;} .udn-ap-cta-btns {display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem;} /* ── Responsive ── */ @media (max-width: 860px) {.udn-ach-items {grid-template-columns: 1fr;} .udn-ach-stat-strip {flex-wrap: wrap;} .udn-ach-stat {flex: 1 1 45%;} .udn-ach-stat-sep {display: none;} .udn-ach-heading {font-size: 2rem !important;} .udn-ach-highlight-heading {font-size: 1.6rem !important;} } @media (max-width: 580px) {.udn-ach-section {padding: 50px 5% 55px;} .udn-ach-stat {flex: 1 1 100%;} .udn-ach-cat-title {font-size: 1.4rem !important;} } /** ========================================================== MEGA PANEL (sidebar + accordion panes) + CTA BUTTONS ===========================================================**/ /* ── Header overflow fix ── */ .hdr-main {overflow: visible !important;} .hdr-left {overflow: visible !important;} /* ── Top nav link sizing ── */ .udn-nav-link {padding: 26px 26px; font-size: .88rem; font-weight: 700; letter-spacing: .01em;} @media(min-width:992px) and (max-width:1280px) {.udn-nav-link {padding: 26px 16px; font-size: .82rem;} } /* ── Hide carets everywhere ── */ .udn-caret, .udn-menu .udn-caret {display: none !important;} /* ═══════════════════════════════════════════════════ MEGA PANEL SHELL ═══════════════════════════════════════════════════ */ .udn-mega-panel {position: fixed; left: 0; right: 0; z-index: 99998; background: #fff; border-top: 3px solid var(--kpy-primary, #E8241C); box-shadow: 0 18px 50px rgba(0, 0, 0, .16); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;} .udn-mega-panel.mega-open {opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;} .udn-mega-body {display: flex; align-items: stretch; max-width: 1260px; margin: 0 auto; min-height: 220px;} /* ═══════════════════════════════════════════════════ LEFT: red parent sidebar ═══════════════════════════════════════════════════ */ .udn-mega-sidebar {flex: 0 0 210px; background: var(--kpy-primary, #E8241C); display: flex; flex-direction: column; padding: 8px 0;} /* Each sidebar row */ .udn-ms-item {display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: transparent; border: none; cursor: pointer; text-align: left; width: 100%; transition: background .15s;} .udn-ms-item:hover, .udn-ms-item--active {background: rgba(0, 0, 0, .18);} /* Icon circle */ .udn-ms-icon {width: 28px; height: 28px; border-radius: 6px; background: rgba(255, 255, 255, .15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-size: .82rem; transition: background .15s;} .udn-ms-item:hover .udn-ms-icon, .udn-ms-item--active .udn-ms-icon {background: rgba(255, 255, 255, .28);} /* Label */ .udn-ms-label {flex: 1; font-size: .78rem; font-weight: 700; color: #fff; letter-spacing: .02em; line-height: 1.3;} /* Chevron arrow */ .udn-ms-arrow {font-size: .7rem; color: rgba(255, 255, 255, .5); flex-shrink: 0; transition: color .15s, transform .15s;} .udn-ms-item:hover .udn-ms-arrow, .udn-ms-item--active .udn-ms-arrow {color: #fff; transform: translateX(2px);} /* ═══════════════════════════════════════════════════ RIGHT: sub-item panes ═══════════════════════════════════════════════════ */ .udn-mega-panes {flex: 1; min-width: 0; padding: 16px 24px;} /* Individual pane — hidden until active */ .udn-mp {display: none;} .udn-mp--active {display: block;} /* Pane heading — links to parent page */ .udn-mp-heading {display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--kpy-primary, #E8241C) !important; text-decoration: none !important; margin-bottom: 10px; transition: opacity .15s;} .udn-mp-heading:hover {opacity: .75;} /* 3-column sub-item grid */ .udn-mp-grid {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;} .udn-mp-grid li {list-style: none !important; margin: 0 !important;} .udn-mp-grid li::before, .udn-mp-grid li::after {display: none !important; content: none !important;} /* Sub-item */ .udn-mega-item {display: flex !important; align-items: center; gap: 8px; padding: 7px 10px; text-decoration: none !important; color: #222; background: transparent; border-radius: 6px; transition: background .15s;} .udn-mega-item:hover {background: rgba(232, 41, 28, .07);} .udn-mega-item-icon {width: 26px; height: 26px; border-radius: 5px; background: rgba(232, 41, 28, .09); color: var(--kpy-primary, #E8241C); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .75rem; transition: background .15s, color .15s;} .udn-mega-item:hover .udn-mega-item-icon {background: var(--kpy-primary, #E8241C); color: #fff;} .udn-mega-item-label {font-size: .79rem; font-weight: 500; color: #333; line-height: 1.3; transition: color .15s;} .udn-mega-item:hover .udn-mega-item-label {color: var(--kpy-primary, #E8241C);} /* Current page sub-item */ .udn-mp-grid li.current-menu-item>.udn-mega-item .udn-mega-item-icon {background: var(--kpy-primary, #E8241C); color: #fff;} .udn-mp-grid li.current-menu-item>.udn-mega-item .udn-mega-item-label {color: var(--kpy-primary, #E8241C); font-weight: 700;} /* Fewer columns on smaller desktops */ @media(min-width:992px) and (max-width:1200px) {.udn-mp-grid {grid-template-columns: repeat(2, 1fr);} } /* Hidden on mobile */ @media(max-width:991px) {.udn-mega-panel {display: none !important;} } /* ═══════════════════════════════════════════════════ CTA BUTTONS in red hdr-right ═══════════════════════════════════════════════════ */ .hdr-cta-btn {display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 4px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; line-height: 1;} .hdr-cta-btn--outline {border: 1.5px solid rgba(255, 255, 255, .65); color: #fff !important; background: transparent;} .hdr-cta-btn--outline:hover {background: rgba(255, 255, 255, .18); border-color: #fff;} .hdr-cta-btn--solid {background: #fff; color: var(--kpy-primary, #E8241C) !important; border: 1.5px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .1);} .hdr-cta-btn--solid:hover {background: var(--kpy-primary, #E8241C); color: #fff !important; border-color: var(--kpy-primary, #E8241C);} .hdr-cta-btn i {font-size: .82rem;} @media(min-width:992px) and (max-width:1120px) {.hdr-cta-btn span {display: none;} .hdr-cta-btn {padding: 7px 9px;} .hdr-cta-btn i {font-size: .9rem;} } /* Mobile CTA in offcanvas */ .mob-cta-btn {display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border-radius: 4px; font-size: .78rem; font-weight: 700; text-transform: uppercase; text-decoration: none !important; transition: background .2s, color .2s;} .mob-cta-btn--outline {border: 1.5px solid var(--kpy-primary, #E8241C); color: var(--kpy-primary, #E8241C) !important; background: transparent;} .mob-cta-btn--outline:hover {background: var(--kpy-primary, #E8241C); color: #fff !important;} .mob-cta-btn--solid {background: var(--kpy-primary, #E8241C); color: #fff !important; border: 1.5px solid var(--kpy-primary, #E8241C);} .mob-cta-btn--solid:hover {background: #c0201a; border-color: #c0201a;} /** ========================================================== TEAM MEMBER MODAL — z-index fix ===========================================================**/ /* Bootstrap modal backdrop and dialog must sit above everything including the hero */ .modal-backdrop {z-index: 100040 !important;} .modal {z-index: 100050 !important;} /* Force the close button to always be visible */ .udn-team-modal__close {z-index: 100060 !important; opacity: 1 !important;} /* Prevent hero / header / mega panel from bleeding over the modal */ .site-header, #siteHeader {isolation: auto;} .udn-mega-panel, #udnMegaPanel {z-index: 99998 !important;} .fc-hero-wrap, .kpy-red-hero, .udn-who, .udn-s2 {z-index: auto !important; isolation: auto !important;} /* Ensure body scroll lock works */ body.modal-open {overflow: hidden !important; padding-right: 0 !important;}