/*
* HLHEP Site - Local Overrides
*
* The site uses the standard SDSU Crimson theme colors (main.min.css).
* The earlier site-wide teal override was removed at UCSD's request.
*
* Teal is kept ONLY in these approved components:
* 1. Statistics & Stat 3up (image-blend backgrounds)
* 2. Vista Stats Bar
*
* Footer Nav band stays black, with the theme crimson (#a6192e) on hover.
*
* Accessibility verified:
* #FFFFFF on #008080 = 4.77:1 AA normal text (Vista Stats Bar)
* #FFFFFF on #00A39D = 3.12:1 AA large text / UI only (Stat 3up)
* #FFFFFF on #a6192e = 7.5:1 AAA (Footer Nav hover)
*/
/* =============================================================
0. TYPOGRAPHY - H1 weight; H2 / H3 spacing
============================================================= */
.main h1 {
font-weight: 700;
}
.main h2 {
line-height: 1.2;
margin-top: 2rem; /* 32px - replaces __spacing_32 before H2 */
margin-bottom: 1rem; /* 16px - replaces __spacing_16 after H2 */
}
.main h3 {
margin-top: 0.5rem; /* 8px - replaces __spacing_8 before H3 */
}
.wysiwyg {
padding-bottom: 1rem; /* 16px - replaces end-of-page __spacing_16 */
}
/* =============================================================
1. STATISTICS & STAT 3UP (image-blend backgrounds)
============================================================= */
.stat3up__holder {
background-color: #00A39D;
}
.stat3up__holder:before {
background-color: #00A39D;
}
.statistics h2 span {
color: #008080;
}
.student-quotes h2 span {
color: #008080;
}
.location-section h2 span {
color: #008080;
}
.research-section h2 span {
color: #008080;
}
/* =============================================================
2. VISTA STATS BAR
============================================================= */
.vista-stats {
background-color: #008080;
width: 100%;
}
.vista-stats__grid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.vista-stats__item {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 25%;
text-align: center;
padding: 40px 20px;
border-right: 1px solid rgba(255,255,255,0.2);
}
.vista-stats__item:last-child {
border-right: none;
}
.vista-stats__number {
font-family: brandon-grotesque, Helvetica, Arial, sans-serif;
font-size: 48px;
font-weight: 500;
color: #fff;
line-height: 1.1;
}
.vista-stats__label {
font-family: brandon-grotesque, Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-size: 20px;
font-weight: 400;
color: rgba(255,255,255,0.85);
line-height: 1.45;
margin-top: 10px;
}
@media (max-width: 1024px) {
.vista-stats__item {
width: 50%;
border-right: none;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.vista-stats__item:nth-child(odd) {
border-right: 1px solid rgba(255,255,255,0.2);
}
.vista-stats__item:nth-last-child(-n+2) {
border-bottom: none;
}
}
@media (max-width: 699px) {
.vista-stats__item {
width: 100%;
border-right: none;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.vista-stats__item:last-child {
border-bottom: none;
}
.vista-stats__number {
font-size: 40px;
}
}
/* ==========================================================================
3. HLHEP — Image Fade snippet
--------------------------------------------------------------------------
A "black & white fades to color" reveal that fires once, when the element
scrolls into view.
HOW IT WORKS
- You give a snippet ONE folder path via data-img. The script (local.js)
loads {folder}/color.jpg and {folder}/bw.jpg and builds the markup.
- The COLOR image sits underneath; the BW image fades out once on entry.
- Real ![]()
elements = fully responsive: they fill their container at
every breakpoint and keep their aspect ratio (no cropping, no fixed size).
SETUP (once, by a developer)
1. Paste this into _resources/css/crimson/local.css and publish.
2. Paste local.js into _resources/js/crimson/local.js and publish.
USE (per page)
...where my-folder/ contains color.jpg and bw.jpg.
========================================================================== */
.hlhep-fade {
/* ---- Per-instance tunables (override via inline style) ---- */
--hlhep-max-width: none; /* cap width, e.g. 1200px; "none" = fill container */
--hlhep-hold: 0.4s; /* pause after entering view before the fade */
--hlhep-fade: 1.5s; /* how long the fade takes */
/* ---------------------------------------------------------- */
position: relative;
display: block;
width: 100%; /* fills whatever container it's in (responsive) */
max-width: var(--hlhep-max-width);
margin-inline: auto; /* centers if max-width caps it; harmless otherwise */
line-height: 0; /* removes the stray inline-image gap */
overflow: hidden;
}
/* Color image — sets the box size, scales with the container. */
.hlhep-fade__color {
display: block;
width: 100%;
height: auto;
}
/* BW image — overlays the color image and fades out once. */
.hlhep-fade__bw {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
}
.hlhep-fade.is-visible .hlhep-fade__bw {
animation: hlhep-fade-out var(--hlhep-fade) ease-in-out var(--hlhep-hold) forwards;
}
@keyframes hlhep-fade-out {
to { opacity: 0; }
}
/* Accessibility: reduced-motion users skip straight to color. */
@media (prefers-reduced-motion: reduce) {
.hlhep-fade__bw {
animation: none;
opacity: 0;
}
}
/* =============================================================
4. FOOTER NAV - BLACK BAND
-------------------------------------------------------------
Standard Crimson "colleges-section" in every way EXCEPT color.
Inherits all native layout, spacing, gutters and tile height
from the theme; this block only recolors, scoped to
.footer-nav-band:
- full-width black row (section background)
- black tiles (theme default is crimson)
- crimson rollover (theme primary #a6192e)
White label text already comes from the theme.
Accessibility:
#FFFFFF on #a6192e = ~7.5:1 AAA
Override per-instance inline, e.g.