1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>Philippine Cultural College</title> 7 <link rel="icon" type="image/png" href="https://philippineculturalcollege.edu.ph/images/logo/OGLogo.webp"> 8 <link rel="preconnect" href="https://fonts.googleapis.com"> 9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 10 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap" media="print" onload="this.media='all'"> 11 <noscript> 12 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap"> 13 </noscript> 14 <link rel="preload" as="style" href="https://philippineculturalcollege.edu.ph/build/assets/app-MzXIB0eo.css" /><link rel="preload" as="style" href="https://philippineculturalcollege.edu.ph/build/assets/welcome-D1kJcGuY.css" /><link rel="preload" as="style" href="https://philippineculturalcollege.edu.ph/build/assets/accessibility-widget-D9ZI6cOz.css" /><link rel="preload" as="style" href="https://philippineculturalcollege.edu.ph/build/assets/chat-widget-CMz2udrd.css" /><link rel="modulepreload" href="https://philippineculturalcollege.edu.ph/build/assets/app-Y6e3ScBj.js" /><link rel="stylesheet" href="https://philippineculturalcollege.edu.ph/build/assets/app-MzXIB0eo.css" data-navigate-track="reload" /><link rel="stylesheet" href="https://philippineculturalcollege.edu.ph/build/assets/welcome-D1kJcGuY.css" data-navigate-track="reload" /><link rel="stylesheet" href="https://philippineculturalcollege.edu.ph/build/assets/accessibility-widget-D9ZI6cOz.css" data-navigate-track="reload" /><link rel="stylesheet" href="https://philippineculturalcollege.edu.ph/build/assets/chat-widget-CMz2udrd.css" data-navigate-track="reload" />
14<script type="module" src="https://philippineculturalcollege.edu.ph/build/assets/app-Y6e3ScBj.js" data-navigate-track="reload"></script>
14 <style> 15 [data-floating-widget-stack] { 16 visibility: hidden; 17 opacity: 0; 18 animation: floating-widgets-fallback 0s linear 4s forwards; 19 } 20 21 [data-floating-widget-stack].is-ready { 22 visibility: visible; 23 opacity: 1; 24 animation: none; 25 transition: opacity 160ms ease-out; 26 } 27 28 @keyframes floating-widgets-fallback { 29 to { 30 visibility: visible; 31 opacity: 1; 32 } 33 } 34 35 @media (prefers-reduced-motion: reduce) { 36 [data-floating-widget-stack].is-ready { transition: none; } 37 } 38 </style> 39 <link 40 rel="preload" 41 as="image" 42 href="https://philippineculturalcollege.edu.ph/storage/homepage-slides/images/638860197-1344536744362999-7237562151850272285-n-K4E6wbgUvSLl.webp" 43 > 44 </head> 45<body class="welcome-page"> 46 <header class="site-header"> 47 <div class="brand-strip"> 48 <a class="brand-logo" href="https://philippineculturalcollege.edu.ph" aria-label="Philippine Cultural College - home"> 49 <img 50 class="brand-logo__image" 51 src="https://philippineculturalcollege.edu.ph/images/logo/OGLogo.webp" 52 alt="" 53 aria-hidden="true" 54 width="122" 55 height="122" 56 > 57 <div class="brand-logo__text"> 58 <div class="brand-logo__subtitle-wrap"> 59 <img 60 class="brand-logo__subtitle-image" 61 src="https://philippineculturalcollege.edu.ph/images/partial/chinese.webp" 62 alt="è²å¾æ¿±åä¸å¸é¢" 63 width="560" 64 height="60" 65 > 66 </div> 67 <div class="brand-logo__title-row"> 68 <span class="brand-logo__title">Philippine Cultural College</span> 69 </div> 70 </div> 71 </a> 72 </div> 73</header> 74 <nav class="pcc-navbar" id="pccNavbar"> 75 <div class="pcc-navbar__container"> 76 77 78 <ul class="pcc-navbar__nav"> 79 80 <li class="pcc-navbar__nav-item"> 81 <a 82 href="https://philippineculturalcollege.edu.ph/about" 83 class="pcc-navbar__nav-link pcc-navbar__nav-link--dropdown" 84 onclick="return false;" 85 > 86 About 87 </a> 88 <div class="pcc-navbar__dropdown"> 89 <a href="https://philippineculturalcollege.edu.ph/about/mission-vision" class="pcc-navbar__dropdown-link">Mission & Vision</a> 90 <a href="https://philippineculturalcollege.edu.ph/about/education-philosophy" class="pcc-navbar__dropdown-link">Education Philosophy</a> 91 <a href="https://philippineculturalcollege.edu.ph/about/core-values-philosophy" class="pcc-navbar__dropdown-link">Core Values</a> 92 <a href="https://philippineculturalcollege.edu.ph/about/history" class="pcc-navbar__dropdown-link">History</a> 93 <a href="https://philippineculturalcollege.edu.ph/about/school-objectives" class="pcc-navbar__dropdown-link">School Objectives</a> 94 <a href="https://philippineculturalcollege.edu.ph/about/school-song" class="pcc-navbar__dropdown-link">School Song</a> 95 </div> 96 </li> 97 98 99 <li class="pcc-navbar__nav-item"> 100 <a href="#" class="pcc-navbar__nav-link pcc-navbar__nav-link--dropdown"> 101 Campuses 102 </a> 103 <div class="pcc-navbar__dropdown pcc-navbar__dropdown--mega pcc-navbar__dropdown--campuses"> 104 <div class="pcc-navbar__dropdown-grid"> 105 <p class="pcc-navbar__dropdown-heading">Basic Education</p> 106 <a href="https://philippineculturalcollege.edu.ph/campuses/manila" class="pcc-navbar__dropdown-link">Manila Campus</a> 107 <a href="https://philippineculturalcollege.edu.ph/campu
107ses/caloocan" class="pcc-navbar__dropdown-link">Caloocan Campus</a> 108 </div> 109 <div class="pcc-navbar__dropdown-grid"> 110 <p class="pcc-navbar__dropdown-heading">College</p> 111 <a href="https://philippineculturalcollege.edu.ph/campuses/quezon-city" class="pcc-navbar__dropdown-link">Quezon City Campus</a> 112 </div> 113 </div> 114 </li> 115 116 117 118 <li class="pcc-navbar__nav-item"> 119 <a href="#" class="pcc-navbar__nav-link pcc-navbar__nav-link--dropdown"> 120 Admissions 121 </a> 122 <div class="pcc-navbar__dropdown"> 123 <a href="https://philippineculturalcollege.edu.ph/admissions/requirements" class="pcc-navbar__dropdown-link">Requirements</a> 124 <a href="https://philippineculturalcollege.edu.ph/admissions/apply" class="pcc-navbar__dropdown-link">Apply</a> 125 </div> 126 </li> 127 128 129 <li class="pcc-navbar__nav-item"> 130 <a href="https://philippineculturalcollege.edu.ph/academics/calendar" class="pcc-navbar__nav-link" >Calendar</a> 131 </li> 132 133 <li class="pcc-navbar__nav-item"> 134 <a href="https://philippineculturalcollege.edu.ph/events" class="pcc-navbar__nav-link">Events</a> 135 </li> 136 137 138 <li class="pcc-navbar__nav-item"> 139 <a href="https://philippineculturalcollege.edu.ph/news" class="pcc-navbar__nav-link">News</a> 140 </li> 141 142 143 <li class="pcc-navbar__nav-item"> 144 <a href="https://sites.google.com/philippineculturalcollege.edu.ph/golden-seagulls1923/home" target="_blank" rel="noopener" class="pcc-navbar__nav-link">Sports</a> 145 </li> 146 147 148 <li class="pcc-navbar__nav-item"> 149 <a href="https://philippineculturalcollege.edu.ph/portal" class="pcc-navbar__nav-link pcc-navbar__nav-link--dropdown"> 150 Portal 151 </a> 152 <div class="pcc-navbar__dropdown"> 153 <span class="pcc-navbar__dropdown-link pcc-navbar__dropdown-link--disabled" aria-disabled="true">Virtual Tour</span> 154 <a href="https://parents.philippineculturalcollege.edu.ph/index.php" target="_blank" rel="noopener" class="pcc-navbar__dropdown-link">Parents Portal</a> 155 </div> 156 </li> 157 158 159 <li class="pcc-navbar__nav-item"> 160 <a href="https://philippineculturalcollege.edu.ph/contact" class="pcc-navbar__nav-link">Contact Us</a> 161 </li> 162 </ul> 163 164 165 166 <button class="pcc-navbar__menu-btn" id="menuBtn" aria-label="Toggle menu"> 167 <div class="pcc-navbar__hamburger"> 168 <span></span> 169 <span></span> 170 <span></span> 171 </div> 172 </button> 173 </div> 174</nav> 175 176 177<div class="pcc-navbar__drawer" id="navDrawer"> 178 <div class="pcc-navbar__drawer-header"> 179 <div class="pcc-navbar__drawer-logo"> 180 <div style="font-weight: 700; font-size: 0.875rem;">Navigation</div> 181 </div> 182 <button class="pcc-navbar__drawer-close" id="closeBtn" aria-label="Close menu"> 183 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2"> 184 <path d="M5 5l10 10M15 5L5 15"/> 185 </svg> 186 </button> 187 </div> 188 189 <nav class="pcc-navbar__drawer-nav"> 190 <div class="pcc-navbar__drawer-section"> 191 <div class="pcc-navbar__drawer-title">About</div> 192 <ul class="pcc-navbar__drawer-list"> 193 <li><a href="https://philippineculturalcollege.edu.ph/about/mission-vision" class="pcc-navbar__drawer-link">Mission & Vision</a></li> 194 <li><a href="https://philippineculturalcollege.edu.ph/about/education-philosophy" class="pcc-navbar__drawer-link">Education Philosophy</a></li> 195 <li><a href="https://philippineculturalcollege.edu.ph/about/core-values-philosophy" class="pcc-navbar__drawer
195-link">Core Values</a></li> 196 <li><a href="https://philippineculturalcollege.edu.ph/about/history" class="pcc-navbar__drawer-link">History</a></li> 197 <li><a href="https://philippineculturalcollege.edu.ph/about/school-objectives" class="pcc-navbar__drawer-link">School Objectives</a></li> 198 <li><a href="https://philippineculturalcollege.edu.ph/about/school-song" class="pcc-navbar__drawer-link">School Song</a></li> 199 </ul> 200 </div> 201 202 <div class="pcc-navbar__drawer-section"> 203 <div class="pcc-navbar__drawer-title">Campuses</div> 204 <span class="pcc-navbar__drawer-heading">Basic Education</span> 205 <ul class="pcc-navbar__drawer-list"> 206 <li><a href="https://philippineculturalcollege.edu.ph/campuses/manila" class="pcc-navbar__drawer-link pcc-navbar__drawer-link--sub">Manila Campus</a></li> 207 <li><a href="https://philippineculturalcollege.edu.ph/campuses/caloocan" class="pcc-navbar__drawer-link pcc-navbar__drawer-link--sub">Caloocan Campus</a></li> 208 </ul> 209 <span class="pcc-navbar__drawer-heading">College</span> 210 <ul class="pcc-navbar__drawer-list"> 211 <li><a href="https://philippineculturalcollege.edu.ph/campuses/quezon-city" class="pcc-navbar__drawer-link pcc-navbar__drawer-link--sub">Quezon City Campus</a></li> 212 </ul> 213 </div> 214 215 216 <div class="pcc-navbar__drawer-section"> 217 <div class="pcc-navbar__drawer-title">Admissions</div> 218 <ul class="pcc-navbar__drawer-list"> 219 <li><a href="https://philippineculturalcollege.edu.ph/admissions/requirements" class="pcc-navbar__drawer-link">Requirements</a></li> 220 <li><a href="https://philippineculturalcollege.edu.ph/admissions/apply" class="pcc-navbar__drawer-link">Apply</a></li> 221 </ul> 222 </div> 223 224 <div class="pcc-navbar__drawer-quicklinks"> 225 <a href="https://philippineculturalcollege.edu.ph/academics/calendar" class="pcc-navbar__drawer-card" > 226 <span class="pcc-navbar__drawer-card-title">Calendar</span> 227 <span class="pcc-navbar__drawer-card-text">School year schedules and activities</span> 228 </a> 229 <a href="https://philippineculturalcollege.edu.ph/events" class="pcc-navbar__drawer-card"> 230 <span class="pcc-navbar__drawer-card-title">Events</span> 231 <span class="pcc-navbar__drawer-card-text">Campus updates and happenings</span> 232 </a> 233 <a href="https://philippineculturalcollege.edu.ph/news" class="pcc-navbar__drawer-card"> 234 <span class="pcc-navbar__drawer-card-title">News</span> 235 <span class="pcc-navbar__drawer-card-text">Latest stories and announcements</span> 236 </a> 237 <a href="https://sites.google.com/philippineculturalcollege.edu.ph/golden-seagulls1923/home" target="_blank" rel="noopener" class="pcc-navbar__drawer-card"> 238 <span class="pcc-navbar__drawer-card-title">Sports</span> 239 <span class="pcc-navbar__drawer-card-text">Golden Seagulls athletics</span> 240 </a> 241 <a href="https://parents.philippineculturalcollege.edu.ph/index.php" target="_blank" rel="noopener" class="pcc-navbar__drawer-card"> 242 <span class="pcc-navbar__drawer-card-title">Parents Portal</span> 243 <span class="pcc-navbar__drawer-card-text">Access school and student records</span> 244 </a> 245 <div class="pcc-navbar__drawer-card pcc-navbar__drawer-card--disabled" aria-disabled="true"> 246 <span class="pcc-navbar__drawer-card-title">Virtual Tour</span> 247 <span class="pcc-navbar__drawer-card-text">Coming soon</span> 248 </div> 249 </div> 250 251 <div class="pcc-navbar__drawer-section"> 252 <div class="pcc-navbar__drawer-title">Contact</div> 253 <ul class="pcc-navbar__drawer-list"> 254 <li><a href="https://philippineculturalcollege.edu.ph/contact" class="pcc-navbar__drawer
254-link">Contact Us</a></li> 255 </ul> 256 </div> 257 </nav> 258 259 </div> 260 261<div class="pcc-navbar__backdrop" id="navBackdrop"></div> 262 263 264<main class=""> 265 266 267 <section class="hero" id="about" aria-label="Philippine Cultural College highlights"> 268 <div class="hero-carousel" 269 data-hero-carousel data-hero-managed="welcome" data-hero-interval="10000" 270 role="region" aria-roledescription="carousel" aria-label="Philippine Cultural College highlights" tabindex="0"> 271 <div class="hero-carousel__slides"> 272 <div class="hero-carousel__slide is-active" 273 data-hero-slide data-label="manila" 274 role="group" aria-roledescription="slide" aria-label="1 of 4: manila" 275 aria-hidden="false" > 276 <img class="hero__asset hero__image" 277 alt="manila" decoding="async" 278 data-fallback-src="https://philippineculturalcollege.edu.ph/images/pcc/building/unified.webp" 279 src="https://philippineculturalcollege.edu.ph/storage/homepage-slides/images/638860197-1344536744362999-7237562151850272285-n-K4E6wbgUvSLl.webp" loading="eager" fetchpriority="high" 280 > 281 <span class="hero__status" data-hero-status role="status" aria-live="polite"></span> 282 </div> 283 <div class="hero-carousel__slide" 284 data-hero-slide data-label="caloocan" 285 role="group" aria-roledescription="slide" aria-label="2 of 4: caloocan" 286 aria-hidden="true" hidden > 287 <img class="hero__asset hero__image" 288 alt="caloocan" decoding="async" 289 data-fallback-src="https://philippineculturalcollege.edu.ph/images/pcc/building/unified.webp" 290 data-src="https://philippineculturalcollege.edu.ph/storage/homepage-slides/images/approved-1-j1FXWp2a5TrP.webp" 291 > 292 <span class="hero__status" data-hero-status role="status" aria-live="polite"></span> 293 </div> 294 <div class="hero-carousel__slide" 295 data-hero-slide data-label="qc" 296 role="group" aria-roledescription="slide" aria-label="3 of 4: qc" 297 aria-hidden="true" hidden > 298 <img class="hero__asset hero__image" 299 alt="qc" decoding="async" 300 data-fallback-src="https://philippineculturalcollege.edu.ph/images/pcc/building/unified.webp" 301 data-src="https://philippineculturalcollege.edu.ph/storage/homepage-slides/images/qc-qPQp3w7seeN9.webp" 302 > 303 <span class="hero__status" data-hero-status role="status" aria-live="polite"></span> 304 </div> 305 <div class="hero-carousel__slide" 306 data-hero-slide data-label="drone" 307 role="group" aria-roledescription="slide" aria-label="4 of 4: drone" 308 aria-hidden="true" hidden > 309 <img class="hero__asset hero__image hero__image--fallback" 310 alt="drone" decoding="async" 311 data-fallback-src="https://philippineculturalcollege.edu.ph/images/pcc/building/unified.webp" 312 data-src="https://philippineculturalcollege.edu.ph/images/pcc/building/unified.webp" 313 > 314 <video class="hero__asset hero__video" muted loop playsinline preload="none" aria-label="drone video"> 315 <source data-src="https://philippineculturalcollege.edu.ph/storage/homepage-slides/videos/drone-shots-pcc-0ZNnsFdCCNOk.mp4" type="video/mp4"> 316 </video> 317 <button class="hero__play" type="button" data-hero-play aria-label="Play drone video" hidden> 318 <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m9 5 11 7-11 7z"/></svg>
319 <span>Play video</span> 320 </button> 321 <span class="hero__status" data-hero-status role="status" aria-live="polite"></span> 322 </div> 323 </div> 324 <button class="hero-carousel__toggle" type="button" data-hero-toggle aria-label="Pause highlights" aria-pressed="false" hidden> 325 <svg class="hero-carousel__pause-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 5h3v14H7zm7 0h3v14h-3z"/></svg> 326 <svg class="hero-carousel__resume-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m8 5 11 7-11 7z"/></svg> 327 </button> 328 <button class="hero-carousel__arrow" type="button" data-hero-prev aria-label="Previous highlight" hidden>‹</button> 329 <button class="hero-carousel__arrow" type="button" data-hero-next aria-label="Next highlight" hidden>›</button> 330 <noscript><p class="hero-carousel__noscript">Enable JavaScript to explore all highlights and play videos.</p></noscript> 331 </div> 332 333 </section> 334 335 336 337 <section class="campus-events scroll-reveal" id="events"> 338 <div class="campus-events__inner"> 339 <header class="campus-events__header"> 340 <div class="campus-events__heading-group"> 341 <span class="campus-events__eyebrow">Events</span> 342 <h2 class="campus-events__title">Across Our<br><em>Campuses.</em></h2> 343 <p class="campus-events__subtext"> 344 Find the latest campus events and community highlights at a glance. 345 </p> 346 </div> 347 <a class="campus-events__link campus-events__link--header" href="https://philippineculturalcollege.edu.ph/events"> 348 View All Events <span aria-hidden="true">→</span> 349 </a> 350 </header> 351 352 <div class="campus-events__grid"> 353 354 <article class="campus-events__card"> 355 <a class="campus-events__card-link" href="https://philippineculturalcollege.edu.ph/events/44" tabindex="0"> 356 <div class="campus-events__media" aria-hidden="true"> 357 <img 358 src="https://philippineculturalcollege.edu.ph/storage/events/previews/gemini-generated-image-vd3315vd3315vd33-kG0ESkYleH1I.webp" 359 alt="Kumusta! ä½ å¥½! A Chinese Learning Experience: Day of Goodwill" 360 loading="lazy" 361 decoding="async" 362 > 363 </div> 364 365 <div class="campus-events__scrim" aria-hidden="true"></div> 366 367 <div class="campus-events__overlay"> 368 <span class="campus-events__date">Sep 11, 2026</span> 369 <h3 class="campus-events__card-title">Kumusta! ä½ å¥½! A Chinese Learning Experience: Day of Goodwill</h3> 370 <p class="campus-events__excerpt">On September 11, 2026, Philippine Cultural College Manila welcomed students from Jose Abad Santos High School for âKumus...</p> 371 <span class="campus-events__cta" aria-hidden="true"> 372 View event → 373 </span> 374 </div> 375 </a> 376 </article> 377 378 379 <article class="campus-events__card"> 380 <a class="campus-events__card-link" href="https://philippineculturalcollege.edu.ph/events/43" tabindex="0"> 381 <div class="campus-events__media" aria-hidden="true"> 382 <img 383 src="https://philippineculturalcollege.edu.ph/storage/events/previews/screenshot-3-fIawbElx8UGG.webp" 384 alt="Buwan ng Wikang Pambansa 2026" 385 loading="lazy" 386 decoding="async" 387 > 388 </div> 389 390 <div class="campus-events__scrim" aria-hidden="true"></div> 391 392 <div class="campus-events__overlay"> 393 <sp
393an class="campus-events__date">Sep 01, 2026</span> 394 <h3 class="campus-events__card-title">Buwan ng Wikang Pambansa 2026</h3> 395 <p class="campus-events__excerpt">Isang makabuluhan at makulay na pagdiriwang ang naganap bilang pagtatapos ng Buwan ng Wika na may temang âð¾ððððð ððððððð...</p> 396 <span class="campus-events__cta" aria-hidden="true"> 397 View event → 398 </span> 399 </div> 400 </a> 401 </article> 402 403 404 <article class="campus-events__card"> 405 <a class="campus-events__card-link" href="https://philippineculturalcollege.edu.ph/events/42" tabindex="0"> 406 <div class="campus-events__media" aria-hidden="true"> 407 <video preload="metadata" muted playsinline> 408 <source src="https://philippineculturalcollege.edu.ph/storage/events/video-project-2-1-OaZllQK5sVXU.mp4#t=4" type="video/mp4"> 409 </video> 410 </div> 411 412 <div class="campus-events__scrim" aria-hidden="true"></div> 413 414 <div class="campus-events__overlay"> 415 <span class="campus-events__date">Aug 29, 2026</span> 416 <h3 class="campus-events__card-title">Cinderellaâs Magic: A Learning Journey Beyond the Classroom</h3> 417 <p class="campus-events__excerpt">Learning beyond the classroom!PCC Manila pupils had a wonderful time watching Repertory Philippines' "Cinderella: The Ta...</p> 418 <span class="campus-events__cta" aria-hidden="true"> 419 View event → 420 </span> 421 </div> 422 </a> 423 </article> 424 425 426 </div> 427 428 <a class="campus-events__link campus-events__link--below" href="https://philippineculturalcollege.edu.ph/events"> 429 View All Events <span aria-hidden="true">→</span> 430 </a> 431 </div> 432 </section> 433 434 435 436 <section class="pcc-overview pcc-overview--professional scroll-reveal" id="about-pcc"> 437 <div class="pcc-overview__split-layout"> 438 439 <div class="pcc-overview__content-panel"> 440 <span class="pcc-overview__watermark" aria-hidden="true">PCC</span> 441 442 <div class="pcc-overview__content-wrapper"> 443 <div class="pcc-overview__header"> 444 <span class="pcc-overview__label"> 445 <span class="pcc-overview__label-dot"></span> 446 Who We Are 447 </span> 448 <h2 class="pcc-overview__title">Philippine<br><em>Cultural</em><br>College.</h2> 449 <div class="pcc-overview__accent-line"></div> 450 </div> 451 452 <p class="pcc-overview__description"> 453 Philippine Cultural College connects its Manila, Caloocan, and Quezon City campuses into one agile learning 454 ecosystem. Students flow through trilingual classrooms, maker studios, and cultural hubs that blend tradition 455 with future-ready innovation. 456 </p> 457 458 <div class="pcc-overview__stats-compact"> 459 <div class="pcc-overview__stat-item"> 460 <div class="pcc-overview__stat-number">3</div> 461 <div class="pcc-overview__stat-underline"></div> 462 <div class="pcc-overview__stat-text">
462campuses working as one PCC</div> 463 </div> 464 <div class="pcc-overview__stat-item"> 465 <div class="pcc-overview__stat-number">102</div> 466 <div class="pcc-overview__stat-underline"></div> 467 <div class="pcc-overview__stat-text">years of multilingual excellence</div> 468 </div> 469 </div> 470 471 <a class="pcc-overview__button" href="https://philippineculturalcollege.edu.ph/about/history"> 472 <span class="pcc-overview__button-text">Discover Our Story</span> 473 <span class="pcc-overview__button-arrow">â</span> 474 </a> 475 </div> 476 </div> 477 478 479 <div class="pcc-overview__campus-panel"> 480 <div class="pcc-overview__campus-header"> 481 <span class="pcc-overview__campus-header-eyebrow">Enrolment</span> 482 <h3>Where would you<br>like to <em>enroll?</em></h3> 483 <p>Choose a program level, then visit the campus page to begin your inquiry.</p> 484 </div> 485 <div class="pcc-overview__campus-list"> 486 <article class="pcc-overview__campus-item"> 487 <div class="pcc-overview__campus-content"> 488 <div class="pcc-overview__campus-visual"> 489 <div class="pcc-overview__media-carousel" data-inquiry-carousel> 490 <div class="pcc-overview__media-track" data-inquiry-track> 491 <div class="pcc-overview__media-slide is-active" data-inquiry-slide aria-hidden="false"> 492 <div class="pcc-overview__media-card"> 493 <img src="https://philippineculturalcollege.edu.ph/images/pcc/building/manila.webp" alt="Manila Campus building" loading="lazy"> 494 <div class="pcc-overview__media-overlay"> 495 <div class="pcc-overview__media-meta"> 496 <span class="pcc-overview__media-badge">Basic Education</span> 497 <strong>PCC Manila</strong> 498 <small>Basic Education Campus</small> 499 </div> 500 </div> 501 </div> 502 </div> 503 <div class="pcc-overview__media-slide" data-inquiry-slide aria-hidden="true"> 504 <div class="pcc-overview__media-card"> 505 <img src="https://philippineculturalcollege.edu.ph/images/pcc/building/caloocan.webp" alt="Caloocan Campus building" loading="lazy"> 506 <div class="pcc-overview__media-overlay"> 507 <div class="pcc-overview__media-meta"> 508 <span class="pcc-overview__media-badge">Basic Education</span> 509 <strong>PCC Caloocan</strong> 510 <small>Basic Education Campus</small> 511 </div> 512 </div> 513 </div> 514 </div> 515 </div> 516 517 <button class="pcc-overview__media-nav pcc-overview__media-nav--prev" t
517ype="button" data-inquiry-prev aria-label="Show previous campus image"> 518 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"> 519 <path d="M15 18l-6-6 6-6"/> 520 </svg> 521 </button> 522 <button class="pcc-overview__media-nav pcc-overview__media-nav--next" type="button" data-inquiry-next aria-label="Show next campus image"> 523 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"> 524 <path d="M9 18l6-6-6-6"/> 525 </svg> 526 </button> 527 <div class="pcc-overview__media-controls"> 528 <div class="pcc-overview__media-count"> 529 <span data-inquiry-current>01</span> 530 <span>/</span> 531 <span>02</span> 532 </div> 533 </div> 534 </div> 535 </div> 536 <div class="pcc-overview__campus-copy"> 537 <div> 538 <span class="pcc-overview__campus-eyebrow">Basic Education</span> 539 <h4>From early years to senior high school</h4> 540 <p>Explore foundational learning pathways for families in Manila and Caloocan, guiding students from kindergarten through senior high school.</p> 541 </div> 542 543 <div class="pcc-overview__campus-footer"> 544 <div class="pcc-overview__campus-accent" aria-hidden="true"></div> 545 <div class="pcc-overview__campus-links" aria-label="Basic Education campus links"> 546 <a class="pcc-overview__campus-link" href="https://philippineculturalcollege.edu.ph/campuses/caloocan"> 547 <span>Caloocan Campus</span> 548 <span class="pcc-overview__campus-link-icon" aria-hidden="true">›</span> 549 </a> 550 <a class="pcc-overview__campus-link" href="https://philippineculturalcollege.edu.ph/campuses/manila"> 551 <span>Manila Campus</span> 552 <span class="pcc-overview__campus-link-icon" aria-hidden="true">›</span> 553 </a> 554 </div> 555 </div> 556 </div> 557 </div> 558 </article> 559 <article class="pcc-overview__campus-item"> 560 <div class="pcc-overview__campus-content"> 561 <div class="pcc-overview__campus-visual"> 562 <div class="pcc-overview__media-carousel" data-inquiry-carousel> 563 <div class="pcc-overview__media-track" data-inquiry-track> 564 <div class="pcc-overview__media-slide is-active" data-inquiry-slide aria-hidden="false"> 565 <div class="pcc-overview__media-card"> 566 <img src="https://philippineculturalcollege.edu.ph/images/pcc/building/qc.webp" alt="Quezon City Campus building" loading="lazy"> 567 <div class="pcc-overview__media-overlay"> 568 <div class="pcc-overview__media-meta"> 569 <sp
569an class="pcc-overview__media-badge">College</span> 570 <strong>PCC Quezon City</strong> 571 <small>College Campus</small> 572 </div> 573 </div> 574 </div> 575 </div> 576 </div> 577 578 </div> 579 </div> 580 <div class="pcc-overview__campus-copy"> 581 <div> 582 <span class="pcc-overview__campus-eyebrow">College</span> 583 <h4>Degrees built for the future</h4> 584 <p>Browse undergraduate programs and academic details for students pursuing higher education at our Quezon City campus.</p> 585 </div> 586 587 <div class="pcc-overview__campus-footer"> 588 <div class="pcc-overview__campus-accent" aria-hidden="true"></div> 589 <div class="pcc-overview__campus-links" aria-label="College campus links"> 590 <a class="pcc-overview__campus-link" href="https://philippineculturalcollege.edu.ph/campuses/quezon-city"> 591 <span>Quezon City Campus</span> 592 <span class="pcc-overview__campus-link-icon" aria-hidden="true">›</span> 593 </a> 594 </div> 595 </div> 596 </div> 597 </div> 598 </article> 599 </div> 600 </div> 601 </div> 602 </section> 603 604 605 606 <section class="facilities-modern scroll-reveal" id="facilities"> 607 <div class="facilities-modern__container"> 608 <header class="facilities-modern__header"> 609 <div class="facilities-modern__header-content"> 610 <span class="facilities-modern__eyebrow">Campus Facilities</span> 611 <h2 class="facilities-modern__title">Featured <em>Facilities.</em></h2> 612 <p class="facilities-modern__subtitle">Explore our state-of-the-art learning spaces designed to inspire excellence and innovation across all campuses.</p> 613 </div> 614 </header> 615 616 <div class="facilities-modern__carousel-wrapper"> 617 <button class="facilities-modern__nav facilities-modern__nav--prev" data-facilities-scroll-prev aria-label="Scroll left"> 618 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> 619 <polyline points="15 18 9 12 15 6"></polyline> 620 </svg> 621 </button> 622 623 <div class="facilities-modern__scroll-container" data-facilities-scroll-container tabindex="0" role="region" aria-label="Featured facilities"> 624 <div class="facilities-modern__scroll-track" data-facilities-scroll-track> 625 <article class="facility-card" data-facility-index="0"> 626 <div 627 class="facility-card__image-wrapper" 628 data-facility-modal-trigger 629 data-modal-image="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/manila/images/classroom-Iq66FNoRtInK.webp" 630 data-modal-title="Classroom"
631 data-modal-campus="Manila Campus" 632 data-modal-description="" 633 role="button" 634 tabindex="0" 635 aria-label="View Classroom details" 636 > 637 <img 638 class="facility-card__image" 639 src="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/manila/images/classroom-Iq66FNoRtInK.webp" 640 alt="Classroom" 641 loading="lazy" 642 decoding="async" 643 fetchpriority="low" 644 srcset="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/manila/images/classroom-Iq66FNoRtInK-w768.webp 768w, https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/manila/images/classroom-Iq66FNoRtInK-w1280.webp 1280w" 645 sizes="(max-width: 640px) 84vw, (max-width: 1024px) 44vw, 360px" 646 > 647 <div class="facility-card__gradient"></div> 648 <div class="facility-card__badge"> 649 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 650 <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> 651 <polyline points="9 22 9 12 15 12 15 22"></polyline> 652 </svg> 653 <span>Manila Campus</span> 654 </div> 655 <div class="facility-card__zoom-hint"> 656 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 657 <circle cx="11" cy="11" r="8"></circle> 658 <path d="m21 21-4.35-4.35"></path> 659 <line x1="11" y1="8" x2="11" y2="14"></line> 660 <line x1="8" y1="11" x2="14" y2="11"></line> 661 </svg> 662 <span>Click to view</span> 663 </div> 664 </div> 665 <div class="facility-card__content"> 666 <h3 class="facility-card__title">Classroom</h3> 667 </div> 668 </article> 669 <article class="facility-card" data-facility-index="1"> 670 <div 671 class="facility-card__image-wrapper" 672 data-facility-modal-trigger 673 data-modal-image="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/manila/images/court-b-WJWxrjSrpZtL.webp" 674 data-modal-title="Gymnasium" 675 data-modal-campus="Manila Campus" 676 data-modal-description="" 677 role="button" 678 tabindex="0" 679 aria-label="View Gymnasium details" 680 > 681 <img 682 class="facility-card__image" 683 src="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/manila/images/court-b-WJWxrjSrpZtL.webp" 684 alt="Gymnasium" 685 loading="lazy" 686 decoding="async" 687 fetchpriority="low" 688 srcset="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/manila/images/court-b-WJWxrjSrpZtL-w768.webp 768w, https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/manila/images/court-b-WJWxrjSrpZtL-w1280.webp 1280w" 689 sizes="(max-width: 640px) 84vw, (max-width: 1024px) 44vw, 360px" 690 > 691 <div class="facility-card__gradient"></div> 692 <div class="facility-card__badge"> 693 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 694 <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> 695 <polyline points="9 22 9 12 15 12 15 22"></polyline> 696 </svg>
697 <span>Manila Campus</span> 698 </div> 699 <div class="facility-card__zoom-hint"> 700 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 701 <circle cx="11" cy="11" r="8"></circle> 702 <path d="m21 21-4.35-4.35"></path> 703 <line x1="11" y1="8" x2="11" y2="14"></line> 704 <line x1="8" y1="11" x2="14" y2="11"></line> 705 </svg> 706 <span>Click to view</span> 707 </div> 708 </div> 709 <div class="facility-card__content"> 710 <h3 class="facility-card__title">Gymnasium</h3> 711 </div> 712 </article> 713 <article class="facility-card" data-facility-index="2"> 714 <div 715 class="facility-card__image-wrapper" 716 data-facility-modal-trigger 717 data-modal-image="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/caloocan/images/kinder-outdoor-playground-1-cCcsqQ2MvyHO.webp" 718 data-modal-title="Outdoor Playground" 719 data-modal-campus="Caloocan Campus" 720 data-modal-description="" 721 role="button" 722 tabindex="0" 723 aria-label="View Outdoor Playground details" 724 > 725 <img 726 class="facility-card__image" 727 src="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/caloocan/images/kinder-outdoor-playground-1-cCcsqQ2MvyHO.webp" 728 alt="Outdoor Playground" 729 loading="lazy" 730 decoding="async" 731 fetchpriority="low" 732 srcset="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/caloocan/images/kinder-outdoor-playground-1-cCcsqQ2MvyHO-w768.webp 768w, https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/caloocan/images/kinder-outdoor-playground-1-cCcsqQ2MvyHO-w1280.webp 1280w" 733 sizes="(max-width: 640px) 84vw, (max-width: 1024px) 44vw, 360px" 734 > 735 <div class="facility-card__gradient"></div> 736 <div class="facility-card__badge"> 737 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 738 <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> 739 <polyline points="9 22 9 12 15 12 15 22"></polyline> 740 </svg> 741 <span>Caloocan Campus</span> 742 </div> 743 <div class="facility-card__zoom
743-hint"> 744 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 745 <circle cx="11" cy="11" r="8"></circle> 746 <path d="m21 21-4.35-4.35"></path> 747 <line x1="11" y1="8" x2="11" y2="14"></line> 748 <line x1="8" y1="11" x2="14" y2="11"></line> 749 </svg> 750 <span>Click to view</span> 751 </div> 752 </div> 753 <div class="facility-card__content"> 754 <h3 class="facility-card__title">Outdoor Playground</h3> 755 </div> 756 </article> 757 <article class="facility-card" data-facility-index="3"> 758 <div 759 class="facility-card__image-wrapper" 760 data-facility-modal-trigger 761 data-modal-image="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/quezon-city/images/classroom-eQdelZW58GiH.webp" 762 data-modal-title="Classroom (Theater)" 763 data-modal-campus="Quezon City Campus" 764 data-modal-description="" 765 role="button" 766 tabindex="0" 767 aria-label="View Classroom (Theater) details" 768 > 769 <img 770 class="facility-card__image" 771 src="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/quezon-city/images/classroom-eQdelZW58GiH.webp" 772 alt="Classroom (Theater)" 773 loading="lazy" 774 decoding="async" 775 fetchpriority="low" 776 srcset="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/quezon-city/images/classroom-eQdelZW58GiH-w768.webp 768w, https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/quezon-city/images/classroom-eQdelZW58GiH-w1280.webp 1280w, https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/quezon-city/images/classroom-eQdelZW58GiH-w1920.webp 1920w" 777 sizes="(max-width: 640px) 84vw, (max-width: 1024px) 44vw, 360px" 778 > 779 <div class="facility-card__gradient"></div> 780 <div class="facility-card__badge"> 781 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 782 <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> 783 <polyline points="9 22 9 12 15 12 15 22"></polyline> 784 </svg> 785 <span>Quezon City Campus</span> 786 </div> 787 <div class="facility-card__zoom-hint"> 788 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 789 <circle cx="11" cy="11" r="8"></circle> 790 <path d="m21 21-4.35-4.35"></path> 791 <line x1="11" y1="8" x2="11" y2="
79114"></line> 792 <line x1="8" y1="11" x2="14" y2="11"></line> 793 </svg> 794 <span>Click to view</span> 795 </div> 796 </div> 797 <div class="facility-card__content"> 798 <h3 class="facility-card__title">Classroom (Theater)</h3> 799 </div> 800 </article> 801 <article class="facility-card" data-facility-index="4"> 802 <div 803 class="facility-card__image-wrapper" 804 data-facility-modal-trigger 805 data-modal-image="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/quezon-city/images/kitchen-rIRICsjiaOzh.webp" 806 data-modal-title="Kitchen" 807 data-modal-campus="Quezon City Campus" 808 data-modal-description="" 809 role="button" 810 tabindex="0" 811 aria-label="View Kitchen details" 812 > 813 <img 814 class="facility-card__image" 815 src="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/quezon-city/images/kitchen-rIRICsjiaOzh.webp" 816 alt="Kitchen" 817 loading="lazy" 818 decoding="async" 819 fetchpriority="low" 820 srcset="https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/quezon-city/images/kitchen-rIRICsjiaOzh-w768.webp 768w, https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/quezon-city/images/kitchen-rIRICsjiaOzh-w1280.webp 1280w, https://philippineculturalcollege.edu.ph/storage/campus-facility-highlights/quezon-city/images/kitchen-rIRICsjiaOzh-w1920.webp 1920w" 821 sizes="(max-width: 640px) 84vw, (max-width: 1024px) 44vw, 360px" 822 > 823 <div class="facility-card__gradient"></div> 824 <div class="facility-card__badge"> 825 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 826 <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> 827 <polyline points="9 22 9 12 15 12 15 22"></polyline> 828 </svg> 829 <span>Quezon City Campus</span> 830 </div> 831 <div class="facility-card__zoom-hint"> 832 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 833 <circle cx="11" cy="11" r="8"></circle> 834 <path d="m21 21-4.35-4.35"></path> 835 <line x1="11" y1="8" x2="11" y2="14"></line> 836 <line x1="8" y1="11" x2="14" y2="11"></line> 837 </svg>
838 <span>Click to view</span> 839 </div> 840 </div> 841 <div class="facility-card__content"> 842 <h3 class="facility-card__title">Kitchen</h3> 843 </div> 844 </article> 845 </div> 846 </div> 847 848 <button class="facilities-modern__nav facilities-modern__nav--next" data-facilities-scroll-next aria-label="Scroll right"> 849 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> 850 <polyline points="9 18 15 12 9 6"></polyline> 851 </svg> 852 </button> 853 </div> 854 855 <div class="facilities-modern__scroll-indicator"> 856 <div class="facilities-modern__scroll-dots" data-facilities-dots></div> 857 </div> 858 </div> 859 </section> 860 861 862 <section class="video-showcase scroll-reveal" id="campus-video"> 863 <div class="video-showcase__container"> 864 <div class="video-showcase__media"> 865 <div class="video-showcase__shell"> 866 <div class="video-showcase__toolbar" aria-hidden="true"> 867 <span class="video-showcase__dot"></span> 868 <span class="video-showcase__dot"></span> 869 <span class="video-showcase__dot"></span> 870 </div> 871 <div class="video-showcase__viewport"> 872 <div class="video-showcase__screen"> 873 <div class="video-showcase__vignette" aria-hidden="true"></div> 874 <div class="video-showcase__sheen" aria-hidden="true"></div> 875 <iframe 876 class="video-showcase__iframe" 877 src="https://www.youtube-nocookie.com/embed/TaAxQRsjTqk" 878 title="PCC Centennial" 879 frameborder="0" 880 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 881 allowfullscreen 882 loading="lazy" 883 ></iframe> 884 </div> 885 </div> 886 <div class="video-showcase__base-glow" aria-hidden="true"></div> 887 </div> 888 </div> 889 </div> 890 </section> 891 892 <div class="facility-modal" data-facility-modal aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="facility-modal-title"> 893 <div class="facility-modal__backdrop" data-modal-close></div> 894 <div class="facility-modal__content"> 895 <button class="facility-modal__close" data-modal-close aria-label="Close modal"> 896 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 897 <line x1="18" y1="6" x2="6" y2="18"></line> 898 <line x1="6" y1="6" x2="18" y2="18"></line> 899 </svg> 900 </button> 901 <div class="facility-modal__media"> 902 <img data-modal-image-element src="" alt="" loading="eager" decoding="async" fetchpriority="high"> 903 </div> 904 <div class="facility-modal__info"> 905 <div class="facility-modal__campus" data-modal-campus-element></div> 906 <h3 class="facility-modal__title" id="facility-modal-title" data-modal-title-element></h3> 907 <p class="facility-modal__description" data-modal-description-element></p> 908 </div> 909 </div> 910 </div> 911 912 913 </main> 914 915 <style> 916 .pf { 917 background: 918 linear-gradient(168deg, rgba(20, 83, 58, 0.95) 0%, rgba(12, 53, 38, 0.97) 45%, rgba(6, 30, 22, 0.99) 100%), 919 url('https://philippineculturalcollege.edu.ph/images/pcc/building/unified.webp'); 920 background-size: cover; 921 background-position: left center; 922 color: rgba(255, 255, 255, 0.9); 923 font-family: 'DM Sans', sans-serif; 924 padding: clamp(48px, 6vw, 72px) clamp(24px, 6vw, 80px) clamp(24px, 4vw, 40px); 925 position: relative; 926 overflow: hidden; 927 } 928 929 .pf::before { 930 content: ''; 931 position: absolute; 932 top: -120px; 933 right: -120px; 934 width: 480px; 935 height: 480px; 936 border-radius: 50%; 937 background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%); 938 pointer-events: none; 939 } 940 941 .pf::after { 942 content: ''; 943 position: absolute; 944 bottom: -60px; 945 left: -60px; 946 width: 300px; 947 height: 300px; 948 border-radius: 50%; 949 background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%); 950 pointer-events: none; 951 } 952 953 .pf__inner { 954 max-width: 1100px; 955 margin: 0 auto; 956 position: relative; 957 z-index: 1; 958 display: flex; 959 flex-direction: column; 960 gap: clamp(32px, 4vw, 48px); 961 } 962 963 .pf__top { 964 display: flex; 965 justify-content: center; 966 } 967 968 .pf__hero { 969 max-width: 720px; 970 text-align: center; 971 } 972 973 .pf__brand-tagline { 974 font-family: 'Playfair Display', serif; 975 font-size: clamp(28px, 4vw, 40px); 976 font-weight: 700; 977 line-height: 1.2; 978 margin: 0 0 14px; 979 color: #fff; 980 letter-spacing: -0.5px; 981 } 982 983 .pf__brand-tagline em { 984 font-style: italic; 985 color: #d4af37; 986 } 987 988 .pf__brand-sub { 989 font-size: 15px; 990 color: rgba(255, 255, 255, 0.62); 991 margin: 0 0 28px; 992 line-height: 1.65; 993 max-width: 560px; 994 margin-inline: auto; 995 } 996 997 .pf__cta-group { 998 display: flex; 999 gap: 12px; 1000 flex-wrap: wrap; 1001 justify-content: center; 1002 } 1003 1004 .btn-enroll { 1005 display: inline-flex; 1006 align-items: center; 1007 gap: 8px; 1008 background: #d4af37; 1009 color: #0c3526; 1010 font-family: 'DM Sans', sans-serif; 1011 font-size: 14px; 1012 font-weight: 600; 1013 padding: 12px 26px; 1014 border-radius: 40px; 1015 text-decoration: none; 1016 letter-spacing: 0.3px; 1017 transition: background 0.2s ease, transform 0.15s ease; 1018 } 1019 1020 .btn-enroll:hover { 1021 background: #e8c84a; 1022 transform: translateY(-1px); 1023 } 1024 1025 .btn-enroll svg { 1026 width: 16px; 1027 height: 16px; 1028 } 1029 1030 .pf__mini-note { 1031 margin: 18px auto 0; 1032 max-width: 460px; 1033 font-size: 12px; 1034 letter-spacing: 0.12em; 1035 text-transform: uppercase; 1036 color: rgba(212, 175, 55, 0.72); 1037 } 1038 1039 .pf__divider { 1040 height: 1px; 1041 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 25%, rgba(212, 175, 55, 0.3) 50%, rgba(255, 255, 255, 0.1) 75%, transparent); 1042 } 1043 1044 .pf__campuses-label { 1045 text-align: center; 1046 font-size: 11px; 1047 text-transform: uppercase; 1048 letter-spacing: 2.5px; 1049 color: rgba(255, 255, 255, 0.38); 1050 margin: 0; 1051 } 1052 1053 .pf__campuses { 1054 display: grid; 1055 grid-template-columns: repeat(3, 1fr); 1056 gap: clamp(12px, 2vw, 20px); 1057 } 1058 1059 .campus-card { 1060 display: flex; 1061 flex-direction: column; 1062 align-items: center; 1063 gap: 14px; 1064 padding: 28px 16px 22px; 1065 background: rgba(255, 255, 255, 0.05); 1066 border: 1px solid rgba(255, 255, 255, 0.08); 1067 border-radius: 18px; 1068 text-decoration: none; 1069 color: rgba(255, 255, 255, 0.9); 1070 transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; 1071 text-align: center; 1072 } 1073 1074 .campus-card:hover { 1075 background: rgba(255, 255, 255, 0.09); 1076 border-color: rgba(212, 175, 55, 0.4); 1077 transform: translateY(-3px); 1078 } 1079 1080 .campus-card figure {
1081 width: 80px; 1082 height: 80px; 1083 border-radius: 50%; 1084 border: 2px solid rgba(212, 175, 55, 0.55); 1085 overflow: hidden; 1086 margin: 0; 1087 background: rgba(9, 43, 33, 0.4); 1088 flex-shrink: 0; 1089 } 1090 1091 .campus-card img { 1092 width: 100%; 1093 height: 100%; 1094 object-fit: cover; 1095 display: block; 1096 } 1097 1098 .campus-card__name { 1099 font-weight: 600; 1100 font-size: 15px; 1101 margin: 0 0 4px; 1102 color: #fff; 1103 } 1104 1105 .campus-card__cta { 1106 font-size: 12px; 1107 color: #d4af37; 1108 letter-spacing: 0.4px; 1109 margin: 0; 1110 } 1111 1112 .pf__contact { 1113 display: grid; 1114 grid-template-columns: repeat(3, 1fr); 1115 gap: clamp(20px, 3vw, 40px); 1116 padding-top: clamp(24px, 3vw, 32px); 1117 border-top: 1px solid rgba(255, 255, 255, 0.07); 1118 } 1119 1120 .pf-contact-card h4 { 1121 font-size: 11px; 1122 text-transform: uppercase; 1123 letter-spacing: 1.6px; 1124 color: #d4af37; 1125 margin: 0 0 12px; 1126 font-weight: 600; 1127 } 1128 1129 .contact-channel { 1130 display: flex; 1131 align-items: flex-start; 1132 gap: 10px; 1133 margin-bottom: 8px; 1134 font-size: 13px; 1135 color: rgba(255, 255, 255, 0.65); 1136 line-height: 1.45; 1137 } 1138 1139 .contact-channel svg { 1140 width: 15px; 1141 height: 15px; 1142 flex-shrink: 0;
1143 margin-top: 1px; 1144 color: rgba(212, 175, 55, 0.8); 1145 } 1146 1147 .contact-channel a { 1148 color: inherit; 1149 text-decoration: none; 1150 transition: color 0.2s ease; 1151 word-break: break-word; 1152 } 1153 1154 .contact-channel a:hover { 1155 color: #d4af37; 1156 } 1157 1158 .pf__foot { 1159 display: flex; 1160 align-items: center; 1161 justify-content: space-between; 1162 flex-wrap: wrap; 1163 gap: 8px; 1164 padding-top: clamp(16px, 2vw, 24px); 1165 border-top: 1px solid rgba(255, 255, 255, 0.06); 1166 } 1167 1168 .footer-note { 1169 font-size: 12px; 1170 color: rgba(255, 255, 255, 0.3); 1171 margin: 0; 1172 } 1173 1174 .footer-accreditation { 1175 display: flex; 1176 align-items: center; 1177 gap: 8px; 1178 font-size: 12px; 1179 color: rgba(255, 255, 255, 0.3); 1180 } 1181 1182 .accred-dot { 1183 width: 6px; 1184 height: 6px; 1185 border-radius: 50%; 1186 background: #d4af37; 1187 opacity: 0.5; 1188 flex-shrink: 0; 1189 } 1190 1191 .sr-only { 1192 position: absolute; 1193 width: 1px; 1194 height: 1px; 1195 padding: 0; 1196 margin: -1px; 1197 overflow: hidden; 1198 clip: rect(0, 0, 0, 0); 1199 white-space: nowrap; 1200 border: 0; 1201 } 1202 1203 @media (max-width: 900px) { 1204 .pf__brand-sub { 1205 max-width: 100%; 1206 } 1207 1208 .pf__contact { 1209 grid-template-columns: 1fr; 1210 gap: 20px; 1211 } 1212 1213 .pf__foot { 1214 flex-direction: column; 1215 align-items: flex-start; 1216 } 1217 } 1218 1219 @media (max-width: 600px) { 1220 .pf__campuses { 1221 grid-template-columns: 1fr; 1222 } 1223 1224 .campus-card { 1225 flex-direction: row; 1226 text-align: left; 1227 padding: 16px 18px; 1228 gap: 16px; 1229 } 1230 1231 .campus-card figure { 1232 width: 56px; 1233 height: 56px; 1234 } 1235 } 1236</style> 1237 1238<footer class="pf" id="pcc-footer"> 1239 <div class="pf__inner"> 1240 1241 <div class="pf__top"> 1242 <div class="pf__hero"> 1243 <h2 class="pf__brand-tagline">Your future starts<br><em>here.</em></h2> 1244 <p class="pf__brand-sub">Philippine Cultural College has shaped generations of leaders across three campuses. Join a community built on excellence, culture, and purpose.</p> 1245 <div class="pf__cta-group"> 1246 <a class="btn-enroll" href="https://philippineculturalcollege.edu.ph/admissions/apply"> 1247 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 1248 <path d="M5 12h14M12 5l7 7-7 7"/> 1249 </svg> 1250 Apply Now 1251 </a> 1252 </div> 1253 <p class="pf__mini-note">Apply online for Basic Education or College.</p> 1254 </div> 1255 </div> 1256 1257 <span class="pf__divider" aria-hidden="true"></span> 1258 1259 <p class="pf__campuses-label" aria-hidden="true">Our Campuses</p> 1260 <section class="pf__campuses" aria-labelledby="footer-campuses-heading"> 1261 <h2 class="sr-only" id="footer-campuses-heading">Philippine Cultural College campuses</h2> 1262 1263 <a class="campus-card" href="https://philippineculturalcollege.edu.ph/campuses/manila"> 1264 <figure> 1265 <img src="https://philippineculturalcollege.edu.ph/images/pcc/building/manila.webp" alt="Manila campus facade" loading="lazy"> 1266 </figure> 1267 <div> 1268 <h3 class="campus-card__name">Manila Campus</h3> 1269 <p class="campus-card__cta">Explore campus -></p> 1270 </div> 1271 </a> 1272 1273 <a class="campus-card" href="https://philippineculturalcollege.edu.ph/campuses/caloocan"> 1274 <figure> 1275 <img src="https://philippineculturalcollege.edu.ph/images/pcc/building/caloocan.webp" alt="Caloocan campus grounds" loading="lazy"> 1276 </figure> 1277 <div> 1278 <h3 class="campus-card__name">Caloocan Campus</h3> 1279 <p class="campus-card__cta">Explore campus -></p> 1280 </div> 1281 </a> 1282 1283 <a class="campus-card" href="https://philippineculturalcollege.edu.ph/campu
1283ses/quezon-city"> 1284 <figure> 1285 <img src="https://philippineculturalcollege.edu.ph/images/pcc/building/qc.webp" alt="Quezon City campus building" loading="lazy"> 1286 </figure> 1287 <div> 1288 <h3 class="campus-card__name">Quezon City Campus</h3> 1289 <p class="campus-card__cta">Explore campus -></p> 1290 </div> 1291 </a> 1292 </section> 1293 1294 <section class="pf__contact" aria-labelledby="footer-contact-heading"> 1295 <h2 class="sr-only" id="footer-contact-heading">Contact Philippine Cultural College</h2> 1296 1297 <article class="pf-contact-card"> 1298 <h4>Manila Campus</h4> 1299 <div class="contact-channel"> 1300 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 1301 <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.09 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.6 12.6 0 0 0 .7 2.76 2 2 0 0 1-.45 2.11l-1.27 1.27a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.6 12.6 0 0 0 2.76.7A2 2 0 0 1 22 16.92z"/> 1302 </svg> 1303 <a href="tel:+639453923680">(+63 945) 923680 / (+63 945) 923682</a> 1304 </div> 1305 <div class="contact-channel"> 1306 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 1307 <path d="M4 4h16v14H5.5L4 19.5z"/><path d="M6 6l6 5 6-5"/> 1308 </svg> 1309 <a href="mailto:[email protected]">[email protected]</a> 1310 </div> 1311 </article> 1312 1313 <article class="pf-contact-card"> 1314 <h4>Caloocan Campus</h4> 1315 <div class="contact-channel"> 1316 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 1317 <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.09 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.6 12.6 0 0 0 .7 2.76 2 2 0 0 1-.45 2.11l-1.27 1.27a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.6 12.6 0 0 0 2.76.7A2 2 0 0 1 22 16.92z"/> 1318 </svg> 1319 <a href="tel:+63283633529">(+63 2) 8363 3529 / 8334 1700 / 8334 1701 / 8363 8419</a> 1320 </div> 1321 <div class="contact-channel"> 1322 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 1323 <path d="M4 4h16v14H5.5L4 19.5z"/><path d="M6 6l6 5 6-5"/> 1324 </svg> 1325 <a href="mailto:[email protected]">[email protected]</a> 1326 </div> 1327 </article> 1328 1329 <article class="pf-contact-card"> 1330 <h4>Quezon City Campus</h4> 1331 <div class="contact-channel"> 1332 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 1333 <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.09 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.6 12.6 0 0 0 .7 2.76 2 2 0 0 1-.45 2.11l-1.27 1.27a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.6 12.6 0 0 0 2.76.7A2 2 0 0 1 22 16.92z"/> 1334 </svg> 1335 <a href="tel:+63282415522">(+63 2) 8241 5522</a> 1336 </div> 1337 <div class="contact-channel"> 1338 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 1339 <path d="M4 4h16v14H5.5L4 19.5z"/><path d="M6 6l6 5 6-5"/> 1340 </svg> 1341 <a href="mailto:[email protected]">[email protected]</a> 1342 </div> 1343 </article> 1344 </section> 1345 1346 <div class="pf__foot"> 1347 <p class="footer-note">© 2026 Philippine Cultural College. All rights reserved.</p> 1348 <div class="footer-accreditation">
1349 <span class="accred-dot" aria-hidden="true"></span> 1350 <span>DepEd & CHED Accredited Institution</span> 1351 </div> 1352 </div> 1353 1354 </div> 1355</footer> 1356 1357<section class="cookie-consent" data-cookie-consent aria-label="Cookie notice" hidden> 1358 <div 1359 class="cookie-consent__bar" 1360 role="dialog" 1361 aria-modal="false" 1362 aria-labelledby="cookie-consent-title" 1363 aria-describedby="cookie-consent-description" 1364 > 1365 <div class="cookie-consent__mark" aria-hidden="true"> 1366 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" focusable="false"> 1367 <path d="M6 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m4.5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m-.5 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/> 1368 <path d="M8 0a7.96 7.96 0 0 0-4.075 1.114q-.245.102-.437.28A8 8 0 1 0 8 0m3.25 14.201a1.5 1.5 0 0 0-2.13.71A7 7 0 0 1 8 15a6.97 6.97 0 0 1-3.845-1.15 1.5 1.5 0 1 0-2.005-2.005A6.97 6.97 0 0 1 1 8c0-1.953.8-3.719 2.09-4.989a1.5 1.5 0 1 0 2.469-1.574A7 7 0 0 1 8 1c1.42 0 2.742.423 3.845 1.15a1.5 1.5 0 1 0 2.005 2.005A6.97 6.97 0 0 1 15 8c0 .596-.074 1.174-.214 1.727a1.5 1.5 0 1 0-1.025 2.25 7 7 0 0 1-2.51 2.224Z"/> 1369 </svg> 1370 </div> 1371 1372 <div class="cookie-consent__copy"> 1373 <p class="cookie-consent__label">Cookie notice</p> 1374 <h2 class="cookie-consent__title" id="cookie-consent-title">We value your privacy</h2> 1375 <p class="cookie-consent__description" id="cookie-consent-description"> 1376 PCC uses cookies to keep this website reliable, understand visits, and improve admissions and campus information. 1377 </p> 1378 </div> 1379 1380 <div class="cookie-consent__actions" aria-label="Cookie consent actions"> 1381 <button class="cookie-consent__button cookie-consent__button--link" type="button" data-cookie-consent-manage> 1382 Preferences 1383 </button> 1384 <button class="cookie-consent__button cookie-consent__button--outline" type="button" data-cookie-consent-reject> 1385 Essential only 1386 </button> 1387 <button class="cookie-consent__button cookie-consent__button--primary" type="button" data-cookie-consent-accept-all> 1388 Accept all 1389 </button> 1390 </div> 1391 </div> 1392 1393 <div class="cookie-consent__modal" data-cookie-consent-modal hidden> 1394 <div class="cookie-consent__backdrop" data-cookie-consent-close aria-hidden="true"></div> 1395 <div 1396 class="cookie-consent__sheet" 1397 role="dialog" 1398 aria-modal="true" 1399 aria-labelledby="cookie-preferences-title" 1400 > 1401 <button class="cookie-consent__close" type="button" data-cookie-consent-close aria-label="Close preferences"> 1402 × 1403 </button> 1404 1405 <p class="cookie-consent__label">Privacy center</p> 1406 <h2 class="cookie-consent__title" id="cookie-preferences-title">Cookie preferences</h2> 1407 <p class="cookie-consent__description"> 1408 Choose which optional cookies PCC can use. Essential cookies are always active because the site needs them to function. 1409 </p> 1410 1411 <form class="cookie-consent__form" data-cookie-consent-form> 1412 <label class="cookie-consent__choice cookie-consent__choice--locked"> 1413 <input type="checkbox" checked disabled> 1414 <span class="cookie-consent__choice-text"> 1415 <strong>Essential cookies</strong> 1416 <small>Required for page navigation, forms, security, and core site features.</small> 1417 </span> 1418 <span class="cookie-consent__status">Always on</span> 1419 </label> 1420 1421 <label class="cookie-consent__choice"> 1422 <input type="checkbox" data-cookie-consent-field="analytics"> 1423 <span class="cookie-consent__choice-text"> 1424 <strong>Analytics cookies</strong> 1425 <small>Help us understand which pages are useful and where visitors need clearer information.</small> 1426 </span>
1427 <span class="cookie-consent__switch" aria-hidden="true"></span> 1428 </label> 1429 1430 <label class="cookie-consent__choice"> 1431 <input type="checkbox" data-cookie-consent-field="marketing"> 1432 <span class="cookie-consent__choice-text"> 1433 <strong>Marketing cookies</strong> 1434 <small>Support admissions outreach and campaign measurement across PCC channels.</small> 1435 </span> 1436 <span class="cookie-consent__switch" aria-hidden="true"></span> 1437 </label> 1438 1439 <div class="cookie-consent__sheet-actions"> 1440 <button class="cookie-consent__button cookie-consent__button--outline" type="button" data-cookie-consent-reject> 1441 Essential only 1442 </button> 1443 <button class="cookie-consent__button cookie-consent__button--primary" type="submit"> 1444 Save choices 1445 </button> 1446 </div> 1447 </form> 1448 </div> 1449 </div> 1450</section> 1451 <div class="floating-widget-stack" data-floating-widget-stack aria-hidden="true"> 1452 <div class="accessibility-widget" data-a11y-widget> 1453 <button 1454 class="accessibility-widget__button" 1455 type="button" 1456 aria-expanded="false" 1457 aria-controls="accessibility-panel" 1458 > 1459 <svg class="accessibility-widget__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"> 1460 <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9a4.5 4.5 0 0 1 0 9z"/> 1461 </svg> 1462 <span class="accessibility-widget__sr-only">Accessibility tools</span> 1463 </button> 1464 1465 <div class="accessibility-widget__panel" id="accessibility-panel" role="dialog" aria-label="Accessibility tools"> 1466 <div class="accessibility-widget__header"> 1467 <span>Accessibility</span> 1468 <button class="accessibility-widget__close" type="button" aria-label="Close accessibility tools">×</button> 1469 </div> 1470 1471 <div class="accessibility-widget__section"> 1472 <span class="accessibility-widget__label">Text size</span> 1473 <div class="accessibility-widget__controls" role="group" aria-label="Text size"> 1474 <button type="button" data-a11y-text="1" aria-pressed="false">A-</button> 1475 <button type="button" data-a11y-text="2" aria-pressed="false">A</button> 1476 <button type="button" data-a11y-text="3" aria-pressed="false">A+</button> 1477 </div> 1478 </div> 1479 1480 <div class="accessibility-widget__section"> 1481 <label class="accessibility-widget__toggle"> 1482 <input type="checkbox" data-a11y-contrast> 1483 <span class="accessibility-widget__toggle-label">High contrast</span> 1484 </label> 1485 </div> 1486 1487 <button class="accessibility-widget__reset" type="button">Reset</button> 1488 </div> 1489</div> 1490 <div class="chat-widget" role="complementary" aria-label="PCC quick answers"> 1491 <button class="chat-button" id="chatButton" type="button" aria-label="Open chat assistant"> 1492 <svg class="chat-icon" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 1493 <defs> 1494 <linearGradient id="chatBubbleGradient" x1="0%" y1="0%" x2="100%" y2="100%"> 1495 <stop offset="0%" stop-color="#fcd34d" /> 1496 <stop offset="50%" stop-color="#fbbf24" /> 1497 <stop offset="100%" stop-color="#f59e0b" /> 1498 </linearGradient> 1499 </defs> 1500 <path d="M4 8c0-2.21 1.79-4 4-4h16c2.21 0 4 1.79 4 4v8c0 2.21-1.79 4-4 4H12l-6 6v-6H8c-2.21 0-4-1.79-4-4V8Z" 1501 fill="url(#chatBubbleGradient)" stroke="#fcd34d" stroke-width="1" /> 1502 <circle cx="12" cy="12" r="1.5" fill="#1a472a" /> 1503 <circle cx="16" cy="12" r="1.5" fill="#15803d" /> 1504 <circle cx="20" cy="12" r="1.5" fill="#166534" /> 1505 </svg> 1506 </button> 1507 1508 <div class="chatbox" id="chatbox" aria-hidden="true" data-faqs='{"manila":[{"question":"What levels of basic education does PCC Main Campus offer? ","answer":"We offer a complete educational pathway -
1508Kindergarten Grade School to Junior High School (JHS) and \nSenior High School (SHS), ensuring continuous learning and development for students.","placement":"manila"},{"question":"What is the accreditation status of your basic education programs? ","answer":"Our Grade School and High School programs hold PAASCU Level III Re-accredited Status, while the Senior \nHigh School (SHS) passed the formal visitation, a testament to our high standards of quality education, \ncurriculum, instruction, and facilities.","placement":"manila"},{"question":" What languages are taught in the curriculum? ","answer":"We prioritize trilingual excellence by delivering instruction in English and Filipino, along with dedicated \nclasses in Chinese. This approach develops strong communication skills while nurturing a deep appreciation for cultural heritage. ","placement":"manila"},{"question":" Do you offer extracurricular activities?","answer":"Yes! Our school offers a diverse selection of clubs, sports teams, and cultural activities for students to \nexplore and enjoy. We also host exciting events such as Spring Festival, Nutrition Month, Academic Week, \nand United Nations Day\u2014designed to foster cultural awareness, encourage meaningful connections, and \nenrich the overall student experience. ","placement":"manila"},{"question":"What makes Philippine Cultural College (Main) different from other schools? ","answer":"What sets Philippine Cultural College (Main) apart is its strong balance of academic excellence and cultural \ngrounding. The school not only equips students with solid knowledge and skills for future success, but also instills values, discipline, and a deep appreciation of Filipino-Chinese heritage.","placement":"manila"}]}'> 1509 <div class="chatbox-header"> 1510 <div class="header-content"> 1511 <svg class="header-icon" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 1512 <path d="M4 8c0-2.21 1.79-4 4-4h16c2.21 0 4 1.79 4 4v8c0 2.21-1.79 4-4 4H12l-6 6v-6H8c-2.21 0-4-1.79-4-4V8Z" 1513 fill="#fbbf24" opacity="0.9" /> 1514 <circle cx="12" cy="12" r="1.5" fill="#1a472a" /> 1515 <circle cx="16" cy="12" r="1.5" fill="#15803d" /> 1516 <circle cx="20" cy="12" r="1.5" fill="#166534" /> 1517 </svg> 1518 <span class="header-title">PCC FAQ Assistant</span> 1519 </div> 1520 <button class="close-button" id="closeButton" type="button" aria-label="Close chat">×</button> 1521 </div> 1522 1523 <div class="chat-messages" id="chatMessages"> 1524 <div class="message bot welcome-message"> 1525 <div class="message-bubble"> 1526 <p>Welcome to Philippine Cultural College! What are you looking for today?</p> 1527 <div class="faq-buttons"> 1528 <button class="chat-option faq-button" data-action="track" data-value="basic">Basic Education</button> 1529 <button class="chat-option faq-button" data-action="track" data-value="college">College</button> 1530 </div> 1531 </div> 1532 </div> 1533 </div> 1534 </div> 1535</div> 1536 </div> 1537
1537<script> 1538 document.addEventListener('DOMContentLoaded', () => { 1539 document.querySelectorAll('[data-inquiry-carousel]').forEach((carousel) => { 1540 const slides = Array.from(carousel.querySelectorAll('[data-inquiry-slide]')); 1541 const prevButton = carousel.querySelector('[data-inquiry-prev]'); 1542 const nextButton = carousel.querySelector('[data-inquiry-next]'); 1543 const currentElement = carousel.querySelector('[data-inquiry-current]'); 1544 1545 if (slides.length <= 1) { 1546 return; 1547 } 1548 1549 let currentIndex = slides.findIndex((slide) => slide.classList.contains('is-active')); 1550 1551 if (currentIndex < 0) { 1552 currentIndex = 0; 1553 } 1554 1555 const render = (nextIndex) => { 1556 slides.forEach((slide, index) => { 1557 const isActive = index === nextIndex; 1558 slide.classList.toggle('is-active', isActive); 1559 slide.setAttribute('aria-hidden', isActive ? 'false' : 'true'); 1560 }); 1561 1562 if (currentElement) { 1563 currentElement.textContent = String(nextIndex + 1).padStart(2, '0'); 1564 } 1565 1566 currentIndex = nextIndex; 1567 }; 1568 1569 prevButton?.addEventListener('click', () => { 1570 render((currentIndex - 1 + slides.length) % slides.length); 1571 }); 1572 1573 nextButton?.addEventListener('click', () => { 1574 render((currentIndex + 1) % slides.length); 1575 }); 1576 }); 1577 1578 // ======================================== 1579 // FACILITIES HORIZONTAL SCROLL 1580 // ======================================== 1581 const facilitiesScrollContainer = document.querySelector('[data-facilities-scroll-container]'); 1582 const facilitiesScrollTrack = document.querySelector('[data-facilities-scroll-track]'); 1583 const prevButton = document.querySelector('[data-facilities-scroll-prev]'); 1584 const nextButton = document.querySelector('[data-facilities-scroll-next]'); 1585 const dotsContainer = document.querySelector('[data-facilities-dots]'); 1586 1587 if (facilitiesScrollContainer && facilitiesScrollTrack && prevButton && nextButton && dotsContainer) { 1588 const cards = Array.from(facilitiesScrollTrack.querySelectorAll('.facility-card')); 1589 const cardCount = cards.length; 1590 let currentIndex = 0; 1591 let visibleCount = 1; 1592 let dots = []; 1593 let scrollTimeout; 1594 let resizeFrame; 1595 const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); 1596 const maxIndex = () => Math.max(0, cardCount - visibleCount); 1597 const maxScroll = () => Math.max(0, facilitiesScrollContainer.scrollWidth - facilitiesScrollContainer.clientWidth); 1598 1599 // Calculate how many cards are visible at once 1600 const calculateVisibleCount = () => { 1601 if (cards.length === 0) return 1; 1602 1603 const containerStyle = getComputedStyle(facilitiesScrollContainer); 1604 const containerWidth = facilitiesScrollContainer.clientWidth 1605 - (parseFloat(containerStyle.paddingLeft) || 0) 1606 - (parseFloat(containerStyle.paddingRight) || 0); 1607 const cardWidth = cards[0].getBoundingClientRect().width; 1608 const gap = parseFloat(getComputedStyle(facilitiesScrollTrack).columnGap) || 0; 1609 1610 // Calculate how many full cards fit in the viewport 1611 visibleCount = Math.floor((containerWidth + gap) / Math.max(1, cardWidth + gap) + 0.001); 1612 1613 // Ensure at least 1 and not more than total cards 1614 visibleCount = Math.max(1, Math.min(visibleCount, cardCount)); 1615 }; 1616 1617 const rebuildDots = () => { 1618 const dotCount = cardCount ? maxIndex() + 1 : 0; 1619 if (dots.length === dotCount) return; 1620 const restoreDotFocus = dotsContainer.contains(document.activeElement); 1621 dots = Array.from({ length: dotCount }, (_, index) => { 1622 const dot = document.createElement('button'); 1623 dot.type = 'button'; 1624 dot.className = 'facilities-modern__scroll-dot'; 1625 dot.setAttribute('aria-label', `Go to position ${index + 1}`); 1626 dot.addEventListener('click', () => scrollToCard(index)); 1627 return dot; 1628 }); 1629 dotsContainer.replaceChildren(...dots); 1630 if (restoreDotFocus) dots[currentIndex]?.focus({ preventScroll: true }); 1631 }; 1632 1633 const updateDots = () => {
1634 dots.forEach((dot, index) => { 1635 dot.classList.toggle('is-active', index === currentIndex); 1636 dot.setAttribute('aria-current', String(index === currentIndex)); 1637 }); 1638 }; 1639 1640 const updateButtons = () => { 1641 prevButton.disabled = currentIndex === 0; 1642 nextButton.disabled = currentIndex >= maxIndex(); 1643 }; 1644 1645 const cardScrollPosition = (index) => index === maxIndex() 1646 ? maxScroll() 1647 : Math.min(maxScroll(), cards[index].offsetLeft - cards[0].offsetLeft); 1648 1649 const scrollToCard = (index, behavior = 'smooth') => { 1650 if (!cardCount) return; 1651 currentIndex = Math.max(0, Math.min(index, maxIndex())); 1652 1653 facilitiesScrollContainer.scrollTo({ 1654 left: cardScrollPosition(currentIndex), 1655 behavior: reducedMotion.matches ? 'instant' : behavior 1656 }); 1657 1658 updateDots(); 1659 updateButtons(); 1660 }; 1661 1662 // Navigation buttons 1663 prevButton.addEventListener('click', () => { 1664 if (currentIndex > 0) { 1665 scrollToCard(currentIndex - 1); 1666 } 1667 }); 1668 1669 nextButton.addEventListener('click', () => { 1670 if (currentIndex < maxIndex()) { 1671 scrollToCard(currentIndex + 1); 1672 } 1673 }); 1674 1675 // Keyboard navigation 1676 facilitiesScrollContainer.addEventListener('keydown', (e) => { 1677 if (e.key === 'ArrowLeft') { 1678 e.preventDefault(); 1679 if (currentIndex > 0) scrollToCard(currentIndex - 1); 1680 } else if (e.key === 'ArrowRight') { 1681 e.preventDefault(); 1682 if (currentIndex < maxIndex()) scrollToCard(currentIndex + 1); 1683 } 1684 }); 1685 1686 // Track scroll position to update current index 1687 facilitiesScrollContainer.addEventListener('scroll', () => { 1688 clearTimeout(scrollTimeout); 1689 scrollTimeout = setTimeout(() => { 1690 const scrollLeft = facilitiesScrollContainer.scrollLeft; 1691 const maxDotIndex = maxIndex(); 1692 let newIndex; 1693 1694 // Check if at the beginning 1695 if (scrollLeft <= 10) { 1696 newIndex = 0; 1697 } 1698 // Check if at the end 1699 else if (scrollLeft >= maxScroll() - 10) { 1700 newIndex = maxDotIndex; 1701 } 1702 // Otherwise, find closest card 1703 else { 1704 let closestIndex = 0; 1705 let closestDistance = Infinity; 1706 1707 dots.forEach((dot, index) => { 1708 const distance = Math.abs(scrollLeft - cardScrollPosition(index)); 1709 1710 if (distance < closestDistance) { 1711 closestDistance = distance; 1712 closestIndex = index; 1713 } 1714 }); 1715 1716 // Clamp the index to valid dot range 1717 newIndex = Math.min(closestIndex, maxDotIndex); 1718 } 1719 1720 if (currentIndex !== newIndex) { 1721 currentIndex = newIndex; 1722 updateDots(); 1723 updateButtons(); 1724 } 1725 }, 100); 1726 }); 1727 1728 const refreshLayout = () => { 1729 clearTimeout(scrollTimeout); 1730 const wasAtEnd = maxIndex() > 0 && currentIndex >= maxIndex(); 1731 calculateVisibleCount(); 1732 currentIndex = wasAtEnd ? maxIndex() : Math.min(currentIndex, maxIndex()); 1733 rebuildDots(); 1734 scrollToCard(currentIndex, 'instant'); 1735 updateButtons(); 1736 }; 1737 1738 refreshLayout(); 1739 const scheduleLayout = () => { 1740 cancelAnimationFrame(resizeFrame); 1741 resizeFrame = requestAnimationFrame(refreshLayout); 1742 }; 1743 if ('ResizeObserver' in window) { 1744 const resizeObserver = new ResizeObserver(scheduleLayout); 1745 resizeObserver.observe(facilitiesScrollContainer); 1746 if (cards[0]) resizeObserver.observe(cards[0]); 1747 } else { 1748 window.addEventListener('resize', scheduleLayout, { passive: true }); 1749 } 1750 } 1751 1752 // ======================================== 1753 // FACILITY MODAL - MODERN IMPLEMENTATION 1754 // ======================================== 1755 const facilityModal = document.querySelector('[data-facility-modal]'); 1756 const modalImageElement = document.querySelector('[data-modal-image-element]'); 1757 const modalTitleElement = document.querySelector('[data-modal-title-element]'); 1758 const modalCampusElement = document.querySelector('[data-modal-campu
1758s-element]'); 1759 const modalDescriptionElement = document.querySelector('[data-modal-description-element]'); 1760 1761 if (facilityModal && modalImageElement && modalTitleElement && modalCampusElement && modalDescriptionElement) { 1762 const preloadedModalImages = new Set(); 1763 const modalImagePromises = new Map(); 1764 let activeModalImageRequest = 0; 1765 let modalTrigger = null; 1766 let previousBodyOverflow = ''; 1767 facilityModal.inert = true; 1768 facilityModal.tabIndex = -1; 1769 1770 const modalFocusableElements = () => Array.from(facilityModal.querySelectorAll( 1771 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' 1772 )).filter((element) => element.getClientRects().length && getComputedStyle(element).visibility !== 'hidden'); 1773 1774 const focusModal = () => { 1775 const target = modalFocusableElements()[0] || facilityModal; 1776 target.focus({ preventScroll: true }); 1777 }; 1778 1779 const preloadModalImage = (src, fetchPriority = 'auto') => { 1780 if (!src) { 1781 return Promise.resolve(''); 1782 } 1783 1784 if (preloadedModalImages.has(src)) { 1785 return Promise.resolve(src); 1786 } 1787 1788 if (modalImagePromises.has(src)) { 1789 return modalImagePromises.get(src); 1790 } 1791 1792 const promise = new Promise((resolve) => { 1793 const image = new Image(); 1794 image.decoding = 'async'; 1795 image.fetchPriority = fetchPriority; 1796 1797 const finish = () => { 1798 preloadedModalImages.add(src); 1799 modalImagePromises.delete(src); 1800 resolve(src); 1801 }; 1802 1803 image.onload = finish; 1804 image.onerror = () => { 1805 modalImagePromises.delete(src); 1806 resolve(''); 1807 }; 1808 image.src = src; 1809 1810 if (image.complete) { 1811 finish(); 1812 return; 1813 } 1814 1815 if (typeof image.decode === 'function') { 1816 image.decode().then(finish).catch(() => {}); 1817 } 1818 }); 1819 1820 modalImagePromises.set(src, promise); 1821 return promise; 1822 }; 1823 1824 const setModalPreview = (src, requestId) => { 1825 modalImageElement.classList.add('is-loading'); 1826 1827 const reveal = () => { 1828 if (requestId === activeModalImageRequest) { 1829 modalImageElement.classList.remove('is-loading'); 1830 } 1831 }; 1832 1833 modalImageElement.onload = reveal; 1834 modalImageElement.onerror = reveal; 1835 modalImageElement.src = src || ''; 1836 1837 if (modalImageElement.complete && modalImageElement.naturalWidth) reveal(); 1838 }; 1839 1840 const openModal = ({ image, previewImage, title, campus, description, trigger }) => { 1841 if (facilityModal.getAttribute('aria-hidden') !== 'false') { 1842 modalTrigger = trigger || document.activeElement; 1843 previousBodyOverflow = document.body.style.overflow; 1844 } 1845 const requestId = ++activeModalImageRequest; 1846 setModalPreview(previewImage || image, requestId); 1847 1848 modalImageElement.alt = title || 'Facility image'; 1849 modalTitleElement.textContent = title || ''; 1850 modalCampusElement.textContent = campus || '';
1851 modalDescriptionElement.textContent = description || ''; 1852 1853 // Show/hide description based on content 1854 if (description) { 1855 modalDescriptionElement.style.display = 'block'; 1856 } else { 1857 modalDescriptionElement.style.display = 'none'; 1858 } 1859 1860 // Show/hide campus based on content 1861 if (campus) { 1862 modalCampusElement.style.display = 'inline-flex'; 1863 } else { 1864 modalCampusElement.style.display = 'none'; 1865 } 1866 1867 facilityModal.inert = false; 1868 facilityModal.setAttribute('aria-hidden', 'false'); 1869 document.body.style.overflow = 'hidden'; 1870 focusModal(); 1871 1872 preloadModalImage(image, 'high').then((resolvedSrc) => { 1873 if (!resolvedSrc || requestId !== activeModalImageRequest) { 1874 return; 1875 } 1876 1877 if (modalImageElement.src !== resolvedSrc) { 1878 modalImageElement.src = resolvedSrc; 1879 } 1880 }); 1881 1882 }; 1883 1884 const closeModal = () => { 1885 if (facilityModal.getAttribute('aria-hidden') !== 'false') return; 1886 activeModalImageRequest += 1; 1887 modalImageElement.classList.add('is-loading'); 1888 facilityModal.inert = true; 1889 facilityModal.setAttribute('aria-hidden', 'true'); 1890 document.body.style.overflow = previousBodyOverflow; 1891 if (modalTrigger?.isConnected) modalTrigger.focus({ preventScroll: true }); 1892 modalTrigger = null; 1893 }; 1894 1895 const warmModalImageFromTrigger = (trigger) => { 1896 if (!trigger?.dataset.modalImage) { 1897 return; 1898 } 1899 1900 preloadModalImage(trigger.dataset.modalImage); 1901 }; 1902 1903 const modalTriggers = Array.from(document.querySelectorAll('[data-facility-modal-trigger]')); 1904 1905 modalTriggers.forEach((trigger) => { 1906 trigger.addEventListener('pointerenter', () => warmModalImageFromTrigger(trigger), { passive: true }); 1907 trigger.addEventListener('focus', () => warmModalImageFromTrigger(trigger), { passive: true }); 1908 trigger.addEventListener('touchstart', () => warmModalImageFromTrigger(trigger), { passive: true, once: true }); 1909 }); 1910 1911 // Open modal on trigger click 1912 document.addEventListener('click', (e) => { 1913 const trigger = e.target.closest('[data-facility-modal-trigger]'); 1914 if (!trigger) return; 1915 1916 e.preventDefault(); 1917 const previewImage = trigger.querySelector('.facility-card__image')?.currentSrc 1918 || trigger.querySelector('.facility-card__image')?.src 1919 || trigger.dataset.modalImage; 1920 1921 openModal({ 1922 trigger, 1923 image: trigger.dataset.modalImage, 1924 previewImage, 1925 title: trigger.dataset.modalTitle, 1926 campus: trigger.dataset.modalCampus, 1927 description: trigger.dataset.modalDescription, 1928 }); 1929 }); 1930 1931 // Keyboard support for image triggers 1932 document.addEventListener('keydown', (e) => { 1933 if (e.key === 'Enter' || e.key === ' ') { 1934 const trigger = e.target.closest('[data-facility-modal-trigger]'); 1935 if (!trigger) return; 1936 1937 e.preventDefault(); 1938 const previewImage = trigger.querySelector('.facility-card__image')?.currentSrc 1939 || trigger.querySelector('.facility-card__image')?.src 1940 || trigger.dataset.modalImage; 1941 1942 openModal({ 1943 trigger, 1944 image: trigger.dataset.modalImage, 1945 previewImage, 1946 title: trigger.dataset.modalTitle, 1947 campus: trigger.dataset.modalCampus, 1948 description: trigger.dataset.modalDescription, 1949 }); 1950 } 1951 }); 1952 1953 // Close modal on close button or backdrop click 1954 facilityModal.querySelectorAll('[data-modal-close]').forEach(btn => { 1955 btn.addEventListener('click', closeModal); 1956 }); 1957 1958 document.addEventListener('focusin', (event) => { 1959 if (facilityModal.getAttribute('aria-hidden') === 'false' && !facilityModal.contains(event.target)) { 1960 focusModal(); 1961 } 1962 }); 1963 1964 document.addEventListener('keydown', (e) => { 1965 if (facilityModal.getAttribute('aria-hidden') !== 'false') return; 1966 if (e.key === 'Escape') { 1967 e.preventDefault(); 1968 closeModal(); 1969 } else if (e.key === 'Tab') { 1970 const focusable = modalFocusableElements(); 1971 const first = focusable[0] || facilityModal;
1972 const last = focusable[focusable.length - 1] || facilityModal; 1973 if (focusable.length < 2 || !facilityModal.contains(document.activeElement) 1974 || (e.shiftKey && document.activeElement === first) 1975 || (!e.shiftKey && document.activeElement === last)) { 1976 e.preventDefault(); 1977 (e.shiftKey ? last : first).focus({ preventScroll: true }); 1978 } 1979 } 1980 }); 1981 } 1982 }); 1983 </script>
1983 1984 </body> 1985</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.