/* ============================================================================
ATMOSPHERIC ELEVATION :: site-wide redesign (2026-07)
Promoted from redesign-proto.css (which was homepage-only) to the whole site.
Approved direction: a warm editorial SERIF display (Fraunces), atmospheric
deep-slate heroes with a topographic contour ridgeline, and a TEAL / pine-mint
accent (#13c2a8) used as the single SPARK. BLUE (#2986cc) stays the PRIMARY
brand colour — cards, structure and their icons keep blue ("kept correct");
teal only sparks eyebrows, one highlight word, section underlines, CTAs and
hovers. On-theme for Baguio, the City of Pines.
Loaded in all 3 shared headers AFTER elevate.css so its accents win.
url() note: this file lives in assets/css/, so `../img/...` resolves to
assets/img/ correctly on EVERY page regardless of the page's .
Fraunces is loaded via a non-blocking in the 3 headers (NOT @import
here, which would block this stylesheet). If the font is unavailable the
headings fall back to Georgia serif — the design still reads correctly.
============================================================================ */
:root {
--x-accent: #13c2a8; /* teal / pine-mint — the accent spark */
--x-accent-deep: #0c9d88;
--x-accent-light: #5fe6d0; /* lighter teal for legibility on dark grounds */
--x-accent-ink: #04231f;
--x-glow: rgba(19, 194, 168, .45);
--x-blue: #2986cc; /* primary brand blue — stays correct on cards */
--x-blue-deep: #1c4e78;
--x-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}
/* ============================================================================
UNIVERSAL :: applies to EVERY page (root, facilities/, blog/)
============================================================================ */
/* ---- Section titles : serif display heading + teal underline ---------------
NOTE: do NOT recolour `.description-title`. In this template it is NOT a small
eyebrow — it is a large (52px), absolutely-positioned, faint WATERMARK word
rendered BEHIND the h2 (styled by `.section-title span`). Giving it a solid
colour makes it collide with the heading on top. The teal spark lives on the
h2 underline + CTAs instead. */
.section-title h2 {
font-family: var(--x-display);
font-weight: 600;
letter-spacing: -.01em;
}
.section-title h2::after {
background: linear-gradient(90deg, var(--x-accent), var(--x-accent-deep)) !important;
height: 4px !important;
width: 72px !important;
border-radius: 4px;
}
/* ---- Interior heroes : atmospheric + editorial ------------------------------
.page-title.dark-background is every interior/blog hero. elevate.js already
injects the contour ridgeline here; we add the serif headline + teal eyebrow.
NOTE: many heroes own their own ::after tint, so we do NOT add a ::after here
(would collide) — we only restyle the text. */
.page-title.dark-background .section-title h2 {
font-family: var(--x-display);
font-weight: 600;
letter-spacing: -.01em;
text-shadow: 0 6px 30px rgba(0, 0, 0, .5);
}
/* (hero `.description-title` is the same faint watermark — left untouched too) */
/* ---- Primary CTA : the "Apply Now" spark, teal everywhere ------------------ */
.btn-apply {
background: linear-gradient(135deg, var(--x-accent), var(--x-accent-deep)) !important;
color: #fff !important;
font-weight: 800;
border-color: transparent !important;
}
.btn-apply:hover { filter: brightness(1.06); color: #fff !important; }
/* ---- Card polish : gentle radius + refined lift, blue kept correct ---------
Applies to the common card surfaces sitewide without recolouring them teal. */
.hub-card, .fac-card, .blog-card, .team-member {
transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.hub-card:hover, .fac-card:hover, .blog-card:hover {
border-color: #cfe0ee; /* blue-tinted, not teal */
}
/* ============================================================================
HOMEPAGE :: .index-page specifics (moved verbatim from redesign-proto.css)
============================================================================ */
/* ---- HERO : atmospheric + editorial --------------------------------------- */
.index-page .blog-hero .blog-hero-item::after {
background: linear-gradient(180deg,
rgba(10, 25, 36, .12) 0%,
rgba(10, 25, 36, .34) 45%,
rgba(10, 25, 36, .86) 100%) !important;
}
.index-page .blog-hero { position: relative; }
.index-page .blog-hero::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
background: url(../img/elevate-contour.svg) center bottom / 1500px auto no-repeat;
opacity: .55; mix-blend-mode: screen; pointer-events: none; z-index: 2;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
mask-image: linear-gradient(180deg, transparent, #000 70%);
}
/* Headline : serif display, larger, with a teal accent bar */
.index-page .blog-hero .blog-hero-content .hero-heading {
font-family: var(--x-display);
font-weight: 600;
letter-spacing: -.01em;
line-height: 1.06;
font-size: clamp(2.7rem, 6vw, 4.7rem) !important;
text-shadow: 0 6px 34px rgba(0, 0, 0, .45);
}
.index-page .blog-hero .blog-hero-content .hero-heading::after {
content: ""; display: block; width: 88px; height: 5px; margin: 1.15rem auto 0;
border-radius: 5px;
background: linear-gradient(90deg, var(--x-accent), var(--x-accent-deep));
box-shadow: 0 6px 18px var(--x-glow);
}
/* Category pill : teal spark */
.index-page .blog-hero .blog-hero-content .category {
background: linear-gradient(135deg, var(--x-accent), var(--x-accent-deep)) !important;
color: #fff !important;
font-weight: 800; letter-spacing: .14em;
box-shadow: 0 10px 26px var(--x-glow);
}
/* Watch-video : teal ring, teal fill on hover */
.index-page .btn-watch-video { border-color: var(--x-accent) !important; }
.index-page .btn-watch-video i { color: var(--x-accent); }
.index-page .btn-watch-video:hover {
background: linear-gradient(135deg, var(--x-accent), var(--x-accent-deep)) !important;
color: #fff !important;
border-color: transparent !important;
}
.index-page .btn-watch-video:hover i { color: #fff; }
/* ---- CARDS : premium v2 depth (soft LAYERED shadows + subtle rest depth, to
match the facility redesign). Brand-BLUE accents kept correct (NOT teal). ---- */
.index-page .featured-posts .blog-card,
.index-page .category-section .hero-post,
.index-page .category-section .sidebar-post {
border-radius: 18px !important;
box-shadow: 0 1px 2px rgba(20,40,60,.04), 0 6px 16px rgba(20,40,60,.05) !important;
transition: transform .4s cubic-bezier(.22,.61,.24,1), box-shadow .4s cubic-bezier(.22,.61,.24,1), border-color .4s !important;
}
.index-page .featured-posts .blog-card:hover,
.index-page .category-section .hero-post:hover,
.index-page .category-section .sidebar-post:hover {
transform: translateY(-6px);
box-shadow: 0 2px 4px rgba(20,40,60,.04), 0 12px 30px rgba(20,40,60,.07), 0 30px 60px rgba(20,40,60,.05) !important;
border-color: #d6e3ee !important; /* blue-tinted hairline */
}
.index-page .featured-posts .blog-card h3 a:hover { color: var(--x-blue) !important; }
.index-page .featured-posts .blog-card .btn-read-more,
.index-page .featured-posts .blog-card .category-badge { color: var(--x-blue) !important; }
/* ---- "WHY A&J" band : teal eyebrow + teal highlight word ------------------- */
.index-page .hp-why__eyebrow {
color: var(--x-accent) !important;
border-color: var(--x-glow) !important;
}
.index-page .hp-why__title { font-family: var(--x-display); }
.index-page .hp-why__title b { color: var(--x-accent) !important; }
/* ---- CTA buttons : teal spark --------------------------------------------- */
.index-page .cta-box .btn-apply {
background: linear-gradient(135deg, var(--x-accent), var(--x-accent-deep)) !important;
color: #fff !important;
font-weight: 800;
}
.index-page .cta-box .btn-apply:hover { filter: brightness(1.06); }
@media (prefers-reduced-motion: reduce) {
.index-page .featured-posts .blog-card:hover { transform: none; }
.hub-card:hover, .fac-card:hover, .blog-card:hover { transform: none; }
}