html, body {
margin: 0; padding: 0;
width: 100%; height: 100%;
overflow: hidden;
background: #0e0508;
}
/* ═══════════════════════════════════════════════════════════
MATIES-OS — CS DEPT — Cloudflare Pages
SU Brand Manual v3 (Sept 2025) compliant
═══════════════════════════════════════════════════════════ */
/* Cloudflare Pages — no Drupal escape needed */
* { box-sizing: border-box; }
/* ── GOOGLE FONTS ── */
/* ══════════════════════════════════════════════════
SU BRAND COLOURS (Brand Manual v3, Sept 2025)
Primary: Confident Maroon #61223b | 70% ratio
Brilliant Gold #caa258 | 20% ratio
Secondary: Seabreeze Green #82CCAE | 10% ratio
Fiery Orange #dc4405
Wine Red #A60A3D
Soil #643335
Text: Steel Grey #4d5356
Near-black #2C2A29
══════════════════════════════════════════════════ */
#MATIES-root {
/* ── Official SU palette ── */
--su-maroon: #61223b;
--su-maroon-d: #420f27;
--su-maroon-l: #7a2d4a;
--su-gold: #caa258;
--su-gold-d: #a07a30;
--su-gold-l: #dfc07e;
--su-green: #82CCAE;
--su-orange: #dc4405;
--su-wine: #A60A3D;
--su-soil: #643335;
--su-grey: #4d5356;
--su-dark: #2C2A29;
--su-white: #ffffff;
--su-offwhite: #faf7f2;
--su-cream: #f5ede0;
/* ── Terminal palette (dark bg) ── */
--term-bg: #0e0508;
--term-bg2: #180b10;
--term-gold: #caa258;
--term-green: #82CCAE;
--term-red: #dc4405;
--term-cyan: #64c8d4;
--term-dim: rgba(202,162,88,0.45);
--glow: 0 0 10px rgba(202,162,88,0.5);
--glow-strong: 0 0 24px rgba(202,162,88,0.7), 0 0 48px rgba(97,34,59,0.4);
/* ── Page view palette (light) ── */
--page-bg: #faf7f2;
--page-bg2: #f0e8de;
--page-text: #2C2A29;
--page-text2: #4d5356;
--page-card: #ffffff;
--page-border: rgba(97,34,59,0.12);
--page-maroon: #61223b;
--page-gold: #a07a30;
font-family: 'Raleway', 'Trebuchet MS', sans-serif;
position: relative;
width: 100%;
height: 100dvh;
min-height: 500px;
overflow: hidden;
background: var(--term-bg);
color: var(--term-gold);
}
/* ── LIGHT MODE OVERRIDES ── */
#MATIES-root.light-mode {
/* Terminal CRT vars — warm parchment palette */
--term-bg: #f0e8d8;
--term-bg2: #e8dcc8;
--term-gold: #7a3a1a;
--term-green: #1a5a38;
--term-red: #c0392b;
--term-cyan: #1a5a70;
--term-dim: rgba(90,42,26,0.5);
/* Page-view vars — light cream */
--page-bg: #ffffff;
--page-bg2: #f5ede0;
--page-card: #faf7f2;
--page-border: rgba(97,34,59,0.10);
}
/* ── Light mode terminal: warm parchment CRT aesthetic ── */
#MATIES-root.light-mode #m-terminal,
#MATIES-root.light-mode #m-boot {
background: #f0e8d8;
box-shadow: inset 0 0 80px rgba(139,80,40,0.08), 0 0 0 1px rgba(139,80,40,0.12);
}
#MATIES-root.light-mode #m-crest-bg {
background: transparent;
mix-blend-mode: multiply;
opacity: 0.15;
filter: sepia(0.6) saturate(0.5);
}
/* Override terminal CSS vars for light/parchment mode — set in root block above */
/* Light mode: subtle warm scanlines */
#MATIES-root.light-mode #m-scanlines {
display: block;
background: repeating-linear-gradient(
0deg, transparent, transparent 3px,
rgba(139,80,40,0.04) 3px, rgba(139,80,40,0.04) 4px
);
}
/* Input line & cursor */
#MATIES-root.light-mode #m-input-line { color: var(--term-gold); }
#MATIES-root.light-mode #m-cursor { background: #7a3a1a; }
#MATIES-root.light-mode #m-user-input { color: #7a3a1a; caret-color: #7a3a1a; }
#MATIES-root.light-mode #m-kbd { color: rgba(97,34,59,0.4); }
/* ════════════════════════════════════════════════════════════════
DARK MODE — CRT TERMINAL PAGE VIEW
All page-view elements stay true to the phosphor/amber terminal
aesthetic when not in light-mode. No cream/white anywhere.
════════════════════════════════════════════════════════════════ */
/* ── Dark page root variables (defaults — no .light-mode class) ── */
#MATIES-root:not(.light-mode) {
--page-bg: #0e0508;
--page-bg2: #130b0e;
--page-card: #1a0d12;
--page-border: rgba(202,162,88,0.14);
--page-text: #d4aa72;
--page-text2: rgba(202,162,88,0.68);
--page-maroon: #caa258;
--page-gold: #caa258;
}
/* ── Content area bg ── */
#MATIES-root:not(.light-mode) #m-content {
background: #0e0508;
scrollbar-color: rgba(202,162,88,0.3) transparent;
}
/* CRT phosphor scanlines overlay on the page content area */
#MATIES-root:not(.light-mode) #m-content::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 999;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,0.13) 2px,
rgba(0,0,0,0.13) 4px
);
}
/* ── Page headings ── */
#MATIES-root:not(.light-mode) .m-h1 {
color: var(--su-gold);
text-shadow: 0 0 18px rgba(202,162,88,0.35);
}
#MATIES-root:not(.light-mode) .m-h1::after {
background: linear-gradient(90deg, var(--su-gold), rgba(202,162,88,0.15), transparent);
}
#MATIES-root:not(.light-mode) .m-h2 {
color: var(--su-gold-l);
text-shadow: 0 0 10px rgba(202,162,88,0.2);
}
#MATIES-root:not(.light-mode) .m-h2::after {
background: linear-gradient(90deg, rgba(202,162,88,0.2), transparent);
}
#MATIES-root:not(.light-mode) .m-h3 { color: var(--su-gold); }
/* ── Body text ── */
#MATIES-root:not(.light-mode) .m-p {
color: rgba(202,162,88,0.72);
}
#MATIES-root:not(.light-mode) .m-link {
color: var(--su-gold);
border-bottom-color: rgba(202,162,88,0.35);
}
#MATIES-root:not(.light-mode) .m-link:hover {
color: var(--su-white);
border-color: var(--su-gold);
}
/* ── Cards ── */
#MATIES-root:not(.light-mode) .m-card {
background: #160a0f;
border-left-color: var(--su-maroon);
box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 0 1px rgba(202,162,88,0.06), inset 0 0 30px rgba(97,34,59,0.04);
}
#MATIES-root:not(.light-mode) .m-card:hover {
border-left-color: var(--su-gold-d);
box-shadow: 0 3px 16px rgba(0,0,0,0.6), 0 0 18px rgba(97,34,59,0.2), 0 0 0 1px rgba(202,162,88,0.12);
background: #1c0d14;
}
#MATIES-root:not(.light-mode) .m-card h3 { color: var(--su-gold); }
#MATIES-root:not(.light-mode) .m-card p { color: rgba(202,162,88,0.65); }
#MATIES-root:not(.light-mode) .m-card .meta {
color: rgba(202,162,88,0.45);
border-top-color: rgba(202,162,88,0.1);
}
/* ── Stat blocks ── */
#MATIES-root:not(.light-mode) .m-stat {
background: linear-gradient(155deg, #1f0e17 0%, #130a0e 100%);
border: 1px solid rgba(202,162,88,0.12);
box-shadow: 0 4px 20px rgba(0,0,0,0.55), inset 0 0 20px rgba(97,34,59,0.1);
}
#MATIES-root:not(.light-mode) .m-stat .num {
color: var(--su-gold);
text-shadow: 0 0 20px rgba(202,162,88,0.55);
}
#MATIES-root:not(.light-mode) .m-stat .lbl { color: rgba(202,162,88,0.5); }
/* ── Info boxes ── */
#MATIES-root:not(.light-mode) .m-infobox {
background: #130b0e;
border-color: rgba(202,162,88,0.1);
border-left-color: var(--su-gold-d);
color: rgba(202,162,88,0.75);
}
#MATIES-root:not(.light-mode) .m-infobox.success { background: rgba(26,96,64,0.08); border-left-color: var(--su-green); }
#MATIES-root:not(.light-mode) .m-infobox.alert { background: rgba(220,68,5,0.06); border-left-color: var(--su-orange); }
/* ── Tables ── */
#MATIES-root:not(.light-mode) table.m-table th {
background: #420f27;
color: var(--su-gold);
letter-spacing: 1.5px;
}
#MATIES-root:not(.light-mode) table.m-table td {
color: rgba(202,162,88,0.7);
border-bottom-color: rgba(202,162,88,0.08);
}
#MATIES-root:not(.light-mode) table.m-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
#MATIES-root:not(.light-mode) table.m-table tr:hover td { background: rgba(202,162,88,0.05); }
#MATIES-root:not(.light-mode) .trend-up { color: var(--su-green); text-shadow: 0 0 8px rgba(130,204,174,0.4); }
/* ── Profile cards ── */
#MATIES-root:not(.light-mode) .m-profile {
background: #160a0f;
border-top-color: var(--su-maroon);
box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
#MATIES-root:not(.light-mode) .m-profile:hover {
box-shadow: 0 8px 28px rgba(0,0,0,0.6), 0 0 24px rgba(97,34,59,0.2);
}
#MATIES-root:not(.light-mode) .m-profile h3 { color: var(--su-gold); }
#MATIES-root:not(.light-mode) .m-profile .role { color: rgba(202,162,88,0.5); }
#MATIES-root:not(.light-mode) .m-profile p,
#MATIES-root:not(.light-mode) .m-profile div:not(.m-avatar):not(.role) { color: rgba(202,162,88,0.55); }
/* ── Events ── */
#MATIES-root:not(.light-mode) .m-event {
background: #160a0f;
box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
#MATIES-root:not(.light-mode) .m-event:hover {
box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 0 18px rgba(97,34,59,0.15);
}
#MATIES-root:not(.light-mode) .m-edate { background: linear-gradient(180deg, #420f27, #1f0e17); }
#MATIES-root:not(.light-mode) .m-ebody { border-left-color: rgba(202,162,88,0.15); }
#MATIES-root:not(.light-mode) .m-ebody h4 { color: var(--su-gold); }
#MATIES-root:not(.light-mode) .m-ebody p { color: rgba(202,162,88,0.6); }
#MATIES-root:not(.light-mode) .m-ebody .emeta { color: rgba(202,162,88,0.45); }
#MATIES-root:not(.light-mode) .m-rsvp-btn {
border-color: rgba(202,162,88,0.2);
color: var(--su-gold-d);
}
#MATIES-root:not(.light-mode) .m-rsvp-btn:hover { background: var(--su-maroon); color: var(--su-gold); }
#MATIES-root:not(.light-mode) .m-rsvp-btn.rsvpd { background: #0d3022; color: var(--su-green); border-color: rgba(130,204,174,0.3); }
/* ── Publications ── */
#MATIES-root:not(.light-mode) .m-pub {
background: #160a0f;
border-left-color: rgba(202,162,88,0.4);
box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
#MATIES-root:not(.light-mode) .m-pub:hover {
border-left-color: var(--su-gold);
box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 12px rgba(202,162,88,0.08);
background: #1c0d14;
}
#MATIES-root:not(.light-mode) .m-pub h4 { color: rgba(202,162,88,0.88); }
#MATIES-root:not(.light-mode) .m-pub .authors { color: rgba(202,162,88,0.55); }
#MATIES-root:not(.light-mode) .m-pub .venue { color: rgba(202,162,88,0.4); }
#MATIES-root:not(.light-mode) .m-pub a { color: var(--su-gold); border-bottom-color: rgba(202,162,88,0.25); }
#MATIES-root:not(.light-mode) .m-pub a:hover { color: var(--su-white); }
/* ── Accordion (FAQ / modules) ── */
#MATIES-root:not(.light-mode) .m-acc-item { border-bottom-color: rgba(202,162,88,0.1); }
#MATIES-root:not(.light-mode) .m-acc-btn { color: var(--su-gold); }
#MATIES-root:not(.light-mode) .m-acc-btn:hover { color: var(--su-gold-l); }
#MATIES-root:not(.light-mode) .m-acc-arrow { color: rgba(202,162,88,0.5); }
#MATIES-root:not(.light-mode) .m-acc-inner { color: rgba(202,162,88,0.65); }
/* ── Module rows ── */
#MATIES-root:not(.light-mode) .m-mod-row {
border-bottom-color: rgba(202,162,88,0.08);
color: rgba(202,162,88,0.72);
}
#MATIES-root:not(.light-mode) .m-mod-row:nth-child(even) { background: rgba(255,255,255,0.015); }
#MATIES-root:not(.light-mode) .m-mod-row:hover { background: rgba(202,162,88,0.05); }
#MATIES-root:not(.light-mode) .m-mod-row .code { color: var(--su-gold); }
#MATIES-root:not(.light-mode) .m-mod-row .sem { color: rgba(202,162,88,0.38); }
#MATIES-root:not(.light-mode) .m-mod-row .cred { color: var(--su-gold-d); }
/* ── Programme / curriculum rows ── */
#MATIES-root:not(.light-mode) .curr-hdr {
background: #130b0e;
color: var(--su-gold);
border-left-color: var(--su-maroon);
}
#MATIES-root:not(.light-mode) .curr-hdr:hover { background: #1a0d13; }
#MATIES-root:not(.light-mode) .curr-body { background: #0f090c; }
#MATIES-root:not(.light-mode) .curr-row {
border-bottom-color: rgba(202,162,88,0.07);
color: rgba(202,162,88,0.72);
}
#MATIES-root:not(.light-mode) .curr-row:nth-child(even) { background: rgba(255,255,255,0.015); }
#MATIES-root:not(.light-mode) .curr-row:hover { background: rgba(202,162,88,0.05); }
#MATIES-root:not(.light-mode) .curr-code { color: var(--su-gold); }
#MATIES-root:not(.light-mode) .curr-sem { color: rgba(202,162,88,0.38); }
#MATIES-root:not(.light-mode) .curr-cr { color: var(--su-gold-d); }
#MATIES-root:not(.light-mode) .curr-yr-hdr { color: rgba(202,162,88,0.45); }
/* ── Programme info boxes ── */
#MATIES-root:not(.light-mode) .prog-info-grid .prog-info-box {
background: #130b0e;
border-top-color: var(--su-maroon);
}
#MATIES-root:not(.light-mode) .prog-info-box.gold { border-top-color: var(--su-gold-d); }
#MATIES-root:not(.light-mode) .prog-info-box.green { border-top-color: var(--su-green); }
#MATIES-root:not(.light-mode) .prog-info-box.blue { border-top-color: #3a6ab4; }
#MATIES-root:not(.light-mode) .prog-info-box.orange { border-top-color: var(--su-orange); }
#MATIES-root:not(.light-mode) .prog-info-hdr { color: rgba(202,162,88,0.5); }
#MATIES-root:not(.light-mode) .prog-info-body { color: rgba(202,162,88,0.7); }
/* ── Curr section wrapper ── */
#MATIES-root:not(.light-mode) .curr-section {
border-color: rgba(202,162,88,0.1 );
}
/* ── Progress bars ── */
#MATIES-root:not(.light-mode) .m-prog-bar { background: rgba(202,162,88,0.08); }
#MATIES-root:not(.light-mode) .m-prog-fill { background: linear-gradient(90deg, var(--su-maroon), var(--su-gold-d)); }
/* ── Sliders ── */
#MATIES-root:not(.light-mode) .m-slider-label { color: rgba(202,162,88,0.5); }
#MATIES-root:not(.light-mode) .m-slider-val { color: var(--su-gold); }
#MATIES-root:not(.light-mode) input[type=range] { background: rgba(202,162,88,0.1); }
/* ── API / loading ── */
#MATIES-root:not(.light-mode) .m-loading { color: rgba(202,162,88,0.5); }
#MATIES-root:not(.light-mode) .m-spinner { border-color: rgba(202,162,88,0.1); border-top-color: var(--su-gold-d); }
#MATIES-root:not(.light-mode) .m-api-badge {
background: rgba(202,162,88,0.07);
border-color: rgba(202,162,88,0.2);
color: rgba(202,162,88,0.5);
}
#MATIES-root:not(.light-mode) .m-api-err { background: rgba(220,68,5,0.05); border-left-color: var(--su-orange); color: #f07040; }
/* ── Tags ── */
#MATIES-root:not(.light-mode) .m-tag { background: rgba(97,34,59,0.4); color: var(--su-gold-l); border: 1px solid rgba(202,162,88,0.15); }
#MATIES-root:not(.light-mode) .m-tag.gold { background: rgba(202,162,88,0.15); color: var(--su-gold); }
#MATIES-root:not(.light-mode) .m-tag.green { background: rgba(26,96,64,0.25); color: var(--su-green); }
#MATIES-root:not(.light-mode) .m-tag.new { background: rgba(220,68,5,0.2); color: #f07040; }
#MATIES-root:not(.light-mode) .m-badge { background: rgba(202,162,88,0.15); color: var(--su-gold); border: 1px solid rgba(202,162,88,0.2); }
#MATIES-root:not(.light-mode) .m-badge.green { background: rgba(26,96,64,0.25); color: var(--su-green); }
#MATIES-root:not(.light-mode) .m-badge.blue { background: rgba(26,58,112,0.25); color: #6ab4ff; }
/* ── Divider ── */
#MATIES-root:not(.light-mode) .m-divider { border-top-color: rgba(202,162,88,0.1); }
/* ── Modal ── */
#MATIES-root:not(.light-mode) #m-modal-box {
background: #130b0e;
border-top-color: var(--su-maroon);
box-shadow: 0 28px 70px rgba(0,0,0,0.8), 0 0 0 1px rgba(202,162,88,0.12);
}
/* ── Search highlight ── */
#MATIES-root:not(.light-mode) .m-search-hl {
background: rgba(202,162,88,0.22);
color: var(--su-white);
}
/* ── Chart background canvases ── */
#MATIES-root:not(.light-mode) canvas { background: transparent; }
/* ── Print btn / topbar btns already OK (on maroon) ── */
/* ── CRT ambient vignette on page content ── */
#MATIES-root:not(.light-mode) #m-page {
background: #0e0508;
}
#MATIES-root:not(.light-mode) #m-page::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,0.45) 100%);
}
/* Ensure content sits above the vignette */
#MATIES-root:not(.light-mode) #m-topbar,
#MATIES-root:not(.light-mode) #m-nav-bar,
#MATIES-root:not(.light-mode) #m-content { position: relative; z-index: 1; }
#MATIES-root * { box-sizing: border-box; margin: 0; padding: 0; }
/* ── BACKGROUNDS ── */
#m-crest-bg {
position: absolute; inset: 0; display: flex;
align-items: center; justify-content: center;
pointer-events: none; z-index: 0; opacity: 0.55;
mix-blend-mode: screen;
}
#m-crest-bg svg { width: min(52vw,52vh); height: min(52vw,52vh); }
#m-crest-bg img {
width: min(62vw,62vh);
height: auto;
max-height: min(62vw,62vh);
object-fit: contain;
}
#m-scanlines {
position: absolute; inset: 0; z-index: 100; pointer-events: none;
background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.1) 2px,rgba(0,0,0,0.1) 4px);
}
/* ── ENHANCED CRT CONCURRENT SCAN LINE — continuous, never pauses ── */
#m-crt-beam {
position: fixed;
left: 0; right: 0;
height: 3px;
z-index: 9999;
pointer-events: none;
background: linear-gradient(180deg,
transparent 0%,
rgba(202,162,88,0.0) 0%,
rgba(202,162,88,0.08) 30%,
rgba(202,162,88,0.18) 50%,
rgba(202,162,88,0.08) 70%,
rgba(202,162,88,0.0) 100%
);
box-shadow:
0 0 6px 1px rgba(202,162,88,0.10),
0 0 16px 3px rgba(202,162,88,0.05);
animation: crtBeamSweep 6s linear infinite;
animation-play-state: paused;
animation-fill-mode: none;
will-change: transform;
top: 0;
transform: translateY(-100vh);
opacity: 0;
transition: opacity 1.2s ease;
}
#m-crt-beam.crt-ready {
opacity: 1;
animation-play-state: running;
}
@keyframes crtBeamSweep {
0% { transform: translateY(-100vh); }
100% { transform: translateY(100vh); }
}
/* Secondary subtle trailing glow band */
#m-crt-beam::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 60px;
top: -28px;
background: linear-gradient(180deg,
transparent 0%,
rgba(202,162,88,0.006) 40%,
rgba(202,162,88,0.014) 60%,
rgba(202,162,88,0.006) 80%,
transparent 100%
);
pointer-events: none;
}
/* CRT phosphor persistence overlay on page content area */
#m-crt-page-beam {
position: fixed;
left: 0; right: 0;
height: 2px;
z-index: 998;
pointer-events: none;
background: linear-gradient(180deg,
transparent 0%,
rgba(202,162,88,0.07) 50%,
transparent 100%
);
box-shadow: 0 0 8px 2px rgba(202,162,88,0.06);
animation: crtBeamSweep 6s linear infinite;
animation-play-state: paused;
animation-delay: 0s;
top: 0;
transform: translateY(-100vh);
will-change: transform;
opacity: 0;
transition: opacity 1.2s ease;
}
#m-crt-page-beam.crt-ready {
opacity: 1;
animation-play-state: running;
}
/* Light mode scan beam variant */
#MATIES-root.light-mode #m-crt-beam {
background: linear-gradient(180deg,
transparent 0%,
rgba(100,50,20,0.0) 0%,
rgba(100,50,20,0.05) 30%,
rgba(100,50,20,0.12) 50%,
rgba(100,50,20,0.05) 70%,
transparent 100%
);
box-shadow: 0 0 5px 1px rgba(100,50,20,0.07), 0 0 12px 2px rgba(100,50,20,0.03);
}
#MATIES-root.light-mode #m-crt-page-beam {
background: linear-gradient(180deg, transparent, rgba(100,50,20,0.05) 50%, transparent);
box-shadow: 0 0 6px 1px rgba(100,50,20,0.05);
}
/* scanlines in light mode handled in light-mode block above */
#m-glitch {
position: absolute; inset: 0; z-index: 200; pointer-events: none;
opacity: 0; mix-blend-mode: screen;
background: rgba(202,162,88,0.03);
}
#m-glitch.active { animation: mGlitch 0.12s steps(1) forwards; }
@keyframes mGlitch {
0% { opacity: 0; }
20% { opacity: 0.6; clip-path: inset(30% 0 58% 0); transform: translateX(3px); }
40% { opacity: 0.4; clip-path: inset(62% 0 12% 0); transform: translateX(-2px); }
60% { opacity: 0.5; clip-path: inset(15% 0 72% 0); transform: translateX(2px); }
80% { opacity: 0.2; clip-path: inset(48% 0 38% 0); }
100%{ opacity: 0; transform: translateX(0); }
}
#m-noise {
position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.025;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 120px 120px;
}
#m-kbd {
position: absolute; bottom: 10px; right: 14px; z-index: 90;
font-family: 'Share Tech Mono', monospace; font-size: 0.62rem;
color: var(--term-dim); letter-spacing: 0.5px; pointer-events: none;
}
/* ── BOOT SCREEN ── */
#m-boot {
position: absolute; inset: 0; z-index: 999;
background: var(--term-bg);
display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 10px; transition: opacity 0.8s;
}
#m-boot.fade-out { opacity: 0; pointer-events: none; }
.m-boot-logo {
font-family: 'Raleway', sans-serif;
font-size: clamp(1rem, 3vw, 1.9rem);
font-weight: 800;
color: var(--su-white);
text-align: center;
letter-spacing: 4px;
text-transform: uppercase;
text-shadow: var(--glow-strong);
margin-bottom: 20px;
opacity: 0;
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.m-boot-logo span {
display: block;
font-size: 0.52em;
font-weight: 400;
color: var(--su-gold);
letter-spacing: 6px;
margin-top: 6px;
}
.m-boot-bar-wrap {
width: min(460px, 86vw); height: 3px;
background: rgba(202,162,88,0.15);
margin-top: 14px; opacity: 0;
}
.m-boot-bar-fill {
height: 100%; background: var(--su-gold);
width: 0%; transition: width 1.5s linear;
box-shadow: 0 0 10px var(--su-gold);
}
.m-boot-line {
font-family: 'Share Tech Mono', monospace;
font-size: 0.86rem; color: var(--term-gold);
width: min(540px, 90vw); opacity: 0;
}
.m-boot-line .ok { color: var(--term-green); }
.m-boot-line.show { animation: mBootFade 0.2s forwards; }
@keyframes mBootFade { to { opacity: 1; } }
/* ══════════════════════════════════════════════════
TERMINAL VIEW
══════════════════════════════════════════════════ */
#m-terminal {
position: absolute; inset: 0; z-index: 10;
display: flex; flex-direction: column;
transition: opacity 0.3s, transform 0.3s;
}
#m-terminal.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); }
/* ── Terminal title bar ── */
#m-term-bar {
background: linear-gradient(90deg, var(--su-maroon-d) 0%, var(--su-maroon) 50%, var(--su-maroon-d) 100%);
padding: 0 16px;
display: flex; align-items: center; gap: 12px;
border-bottom: 2px solid var(--su-gold);
flex-shrink: 0; height: 42px;
position: relative; overflow: hidden;
}
#m-term-bar::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(202,162,88,0.7), transparent);
}
.m-dots { display: flex; gap: 6px; }
.m-dot { width: 12px; height: 12px; border-radius: 50%; }
.m-dot:nth-child(1){ background: #dc4405; }
.m-dot:nth-child(2){ background: var(--su-gold); }
.m-dot:nth-child(3){ background: var(--su-green); }
#m-term-title {
font-family: 'Raleway', sans-serif;
font-size: 0.78rem; font-weight: 700;
color: var(--su-white);
letter-spacing: 2px; text-transform: uppercase;
flex: 1; text-align: center; opacity: 0.9;
}
#m-term-bar-right {
display: flex; align-items: center; gap: 10px; margin-left: auto;
}
#m-term-clock {
font-family: 'Share Tech Mono', monospace;
font-size: 0.75rem; color: var(--su-gold);
letter-spacing: 0.5px; opacity: 0.8; white-space: nowrap;
}
#m-term-theme-btn {
background: rgba(202,162,88,0.12);
border: 1px solid rgba(202,162,88,0.35);
color: var(--su-gold);
font-family: 'Share Tech Mono', monospace;
font-size: 0.65rem; padding: 3px 11px;
cursor: pointer; letter-spacing: 1.2px;
border-radius: 2px; transition: all 0.2s;
white-space: nowrap; text-transform: uppercase;
}
#m-term-theme-btn:hover {
background: rgba(202,162,88,0.25);
border-color: var(--su-gold); color: var(--su-white);
}
/* ── Terminal body ── */
#m-term-body {
flex: 1; overflow-y: auto;
padding: 18px 24px; display: flex; flex-direction: column; gap: 2px;
scrollbar-width: thin; scrollbar-color: var(--su-maroon) transparent;
}
#m-term-body::-webkit-scrollbar { width: 4px; }
#m-term-body::-webkit-scrollbar-thumb { background: var(--su-maroon); border-radius: 2px; }
.m-line {
font-family: 'Share Tech Mono', monospace;
font-size: 0.95rem; line-height: 1.65;
white-space: pre-wrap; color: var(--term-gold);
opacity: 0; animation: mFadeIn 0.04s forwards;
}
@keyframes mFadeIn { to { opacity: 1; } }
.m-line.dim { color: var(--term-dim); }
.m-line.bright { color: var(--su-white); }
.m-line.green { color: var(--term-green); }
.m-line.red { color: var(--term-red); }
.m-line.cyan { color: var(--term-cyan); }
.m-line.maroon { color: var(--su-gold-l); }
.m-line.header { color: var(--su-white); font-family: 'Raleway',sans-serif; font-size: 0.98rem; font-weight: 700; letter-spacing: 2px; }
.m-line.selectable {
cursor: default;
border-left: 2px solid transparent;
padding-left: 5px;
transition: border-color 0.12s, color 0.12s;
}
.m-line.selectable .menu-link {
cursor: pointer;
text-decoration: underline;
text-decoration-color: rgba(202,162,88,0.3);
text-underline-offset: 3px;
transition: color 0.12s, text-decoration-color 0.12s;
}
.m-line.selectable:hover { border-left-color: var(--su-gold); }
.m-line.selectable .menu-link:hover { color: var(--su-white); text-decoration-color: var(--su-gold); }
.m-line.selected {
border-left-color: var(--term-green) !important;
color: var(--term-green) !important;
animation: mBlink 0.4s step-end 3;
}
@keyframes mBlink { 0%,100%{opacity:1;}50%{opacity:0.3;} }
/* ── Prompt ── */
#m-prompt-area {
padding: 8px 24px 14px;
display: flex; align-items: center;
border-top: 1px solid rgba(202,162,88,0.18);
flex-shrink: 0;
}
#m-prompt-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.95rem; color: var(--su-gold-l);
text-shadow: var(--glow); white-space: nowrap;
}
#m-prompt-input {
background: transparent; border: none; outline: none;
color: var(--su-white);
font-family: 'Share Tech Mono', monospace;
font-size: 0.95rem; flex: 1;
caret-color: var(--su-gold);
}
#m-autocomplete {
font-family: 'Share Tech Mono', monospace;
font-size: 0.95rem;
color: rgba(202,162,88,0.3);
pointer-events: none; white-space: nowrap;
}
/* ══════════════════════════════════════════════════
PAGE VIEW
══════════════════════════════════════════════════ */
#m-page {
position: absolute; inset: 0; z-index: 50;
background: var(--page-bg);
display: flex; flex-direction: column;
opacity: 0; pointer-events: none;
transition: opacity 0.35s;
overflow: hidden;
}
#m-page.visible { opacity: 1; pointer-events: all; }
/* ── Topbar ── */
#m-topbar {
background: linear-gradient(135deg, var(--su-maroon-d) 0%, var(--su-maroon) 55%, var(--su-maroon-l) 100%);
color: var(--su-white);
display: flex; align-items: stretch;
justify-content: space-between;
border-bottom: 3px solid var(--su-gold);
flex-shrink: 0; min-height: 58px;
position: relative; overflow: hidden;
}
/* S-graphic accent behind topbar */
#m-topbar::before {
content: '';
position: absolute; top: -20px; right: -10px;
width: 120px; height: 120px;
border-radius: 50%;
border: 28px solid rgba(202,162,88,0.1);
pointer-events: none;
}
#m-topbar::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(202,162,88,0.7), transparent);
}
.m-logo-area {
display: flex; align-items: center;
gap: 14px; min-width: 0;
padding: 10px 22px;
border-right: 1px solid rgba(202,162,88,0.2);
}
.m-mini-crest { width: 36px; height: 36px; flex-shrink: 0; }
/* SU S-stream wordmark area */
.m-uni-name {
font-family: 'Raleway', sans-serif;
font-size: 1.05rem;
font-weight: 800;
color: var(--su-white);
letter-spacing: 0.2px;
line-height: 1.15;
text-transform: uppercase;
}
.m-uni-dept {
font-family: 'Raleway', sans-serif;
font-size: 0.6rem; font-weight: 600;
color: var(--su-gold);
letter-spacing: 2.5px;
text-transform: uppercase;
margin-top: 3px; opacity: 0.9;
}
.m-breadcrumb {
font-family: 'Share Tech Mono', monospace;
font-size: 0.63rem;
color: rgba(202,162,88,0.45);
display: flex; align-items: center; gap: 4px;
margin-top: 2px;
}
.m-breadcrumb span { color: var(--su-gold); }
/* ── Topbar right ── */
#m-topbar-right {
display: flex; align-items: center;
gap: 0; flex-shrink: 0; padding: 0 8px;
border-left: 1px solid rgba(202,162,88,0.18);
}
#m-search {
background: rgba(0,0,0,0.25);
border: 1px solid rgba(202,162,88,0.28);
border-radius: 2px;
color: var(--su-white);
font-family: 'Share Tech Mono', monospace;
font-size: 0.68rem;
padding: 5px 10px; outline: none;
width: 130px; margin: 0 5px;
transition: all 0.22s;
}
#m-search::placeholder { color: rgba(202,162,88,0.35); }
#m-search:focus { width: 175px; border-color: var(--su-gold); background: rgba(0,0,0,0.4); }
.m-topbar-btn {
background: transparent; border: none;
border-left: 1px solid rgba(202,162,88,0.18);
color: rgba(202,162,88,0.6);
font-family: 'Share Tech Mono', monospace;
font-size: 0.66rem; padding: 0 14px;
cursor: pointer; letter-spacing: 1.2px;
transition: all 0.18s; white-space: nowrap;
height: 100%; text-transform: uppercase;
}
.m-topbar-btn:hover { color: var(--su-white); background: rgba(202,162,88,0.1); }
#m-back-btn {
background: rgba(202,162,88,0.12);
border-left: 1px solid rgba(202,162,88,0.25);
color: var(--su-gold);
font-family: 'Raleway', sans-serif;
font-weight: 700; font-size: 0.66rem;
padding: 0 18px; cursor: pointer;
letter-spacing: 1.5px; white-space: nowrap;
height: 100%; transition: all 0.18s;
text-transform: uppercase; border-right: none;
border-top: none; border-bottom: none;
}
#m-back-btn:hover { background: rgba(202,162,88,0.22); color: var(--su-white); }
/* ── Nav bar ── */
#m-nav-bar {
background: var(--su-maroon-d);
padding: 0 16px;
display: flex; align-items: stretch; gap: 4px;
border-bottom: 2px solid rgba(202,162,88,0.28);
flex-shrink: 0; overflow-x: auto;
scrollbar-width: none; height: 72px;
}
#m-nav-bar::-webkit-scrollbar { display: none; }
.m-nav-btn {
background: transparent; border: none;
border-bottom: 3px solid transparent;
color: rgba(202,162,88,0.48);
font-family: 'Raleway', sans-serif;
font-size: 0.7rem; font-weight: 600;
padding: 0 18px; cursor: pointer;
letter-spacing: 0.8px; transition: all 0.18s;
white-space: nowrap; height: 100%;
text-transform: uppercase;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 5px;
min-width: 72px; flex-shrink: 0;
}
.m-nav-icon { font-size: 1rem; line-height: 1; }
.m-nav-label { font-size: 0.6rem; letter-spacing: 0.8px; }
.m-nav-btn:hover {
color: var(--su-gold);
background: rgba(202,162,88,0.08);
border-bottom-color: rgba(202,162,88,0.4);
}
.m-nav-btn.active {
color: var(--su-gold);
background: rgba(202,162,88,0.13);
border-bottom-color: var(--su-gold);
font-weight: 800;
box-shadow: inset 0 -1px 0 rgba(202,162,88,0.12);
}
/* ── Content area ── */
#m-content {
flex: 1; overflow-y: auto;
padding: 0;
background: var(--page-bg);
scrollbar-width: thin;
scrollbar-color: rgba(97,34,59,0.3) transparent;
}
/* Page inner wrapper */
.pg-inner { padding: 52px 80px 100px; max-width: 1400px; }
.pg-inner-wide { padding: 0 0 100px; }
#m-content::-webkit-scrollbar { width: 5px; }
#m-content::-webkit-scrollbar-thumb { background: rgba(97,34,59,0.25); border-radius: 3px; }
/* ══════════════════════════════════════════════
NEW LAYOUT SYSTEM — full-bleed, spacious
══════════════════════════════════════════════ */
/* HERO BANNER — used across pages */
.pg-hero {
background: linear-gradient(135deg, var(--su-maroon-d) 0%, var(--su-maroon) 55%, #7a2d4a 100%);
padding: 64px 80px 72px;
position: relative; overflow: hidden;
border-bottom: 4px solid var(--su-gold);
}
.pg-hero::before {
content: ''; position: absolute; top: -60px; right: -60px;
width: 340px; height: 340px; border-radius: 50%;
border: 60px solid rgba(202,162,88,0.07); pointer-events: none;
}
.pg-hero::after {
content: ''; position: absolute; bottom: -40px; left: 20%;
width: 220px; height: 220px; border-radius: 50%;
border: 40px solid rgba(202,162,88,0.04); pointer-events: none;
}
.pg-hero-eyebrow {
font-family: 'Share Tech Mono', monospace;
font-size: 1.15rem; letter-spacing: 3px; text-transform: uppercase;
color: rgba(202,162,88,0.6); margin-bottom: 18px;
}
.pg-hero h1 {
font-family: 'Raleway', sans-serif; font-weight: 900;
font-size: clamp(2.2rem, 4vw, 3.4rem); color: #fff;
margin: 0 0 20px; line-height: 1.08; letter-spacing: -1px;
}
.pg-hero-sub {
font-family: 'Raleway', sans-serif; font-size: 1.15rem;
color: rgba(255,255,255,0.72); max-width: 65ch; line-height: 1.8;
margin-bottom: 0;
}
.pg-hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.pg-hero-badge {
background: rgba(202,162,88,0.15); border: 1px solid rgba(202,162,88,0.3);
color: var(--su-gold); font-family: 'Share Tech Mono', monospace;
font-size: 1.09rem; padding: 6px 14px; letter-spacing: 1px;
border-radius: 20px; text-transform: uppercase;
}
/* BENTO GRID */
.pg-bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 18px;
padding: 40px 80px;
}
.pg-bento-cell {
background: var(--page-card);
border: 1px solid var(--page-border);
border-radius: 10px; padding: 32px 28px;
position: relative; overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.pg-bento-cell:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(97,34,59,0.12); }
#MATIES-root:not(.light-mode) .pg-bento-cell { background: #160a0f; border-color: rgba(202,162,88,0.1); }
#MATIES-root:not(.light-mode) .pg-bento-cell:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 24px rgba(97,34,59,0.15); }
.pg-bento-cell.col2 { grid-column: span 2; }
.pg-bento-cell.col3 { grid-column: span 3; }
.pg-bento-cell.col4 { grid-column: span 4; }
.pg-bento-cell.col6 { grid-column: span 6; }
.pg-bento-cell.maroon { background: linear-gradient(135deg, var(--su-maroon), var(--su-maroon-d)); border-color: rgba(202,162,88,0.2); }
.pg-bento-cell.gold { background: linear-gradient(135deg, var(--su-gold-d), #7a5820); border-color: rgba(202,162,88,0.3); }
.pg-bento-num {
font-family: 'Raleway', sans-serif; font-weight: 900;
font-size: 3.8rem; line-height: 1; color: var(--su-gold);
text-shadow: 0 0 24px rgba(202,162,88,0.4); display: block;
}
.pg-bento-num.white { color: #fff; }
.pg-bento-lbl {
font-family: 'Raleway', sans-serif; font-weight: 600;
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px;
color: rgba(202,162,88,0.6); margin-top: 10px;
}
.pg-bento-lbl.white { color: rgba(255,255,255,0.65); }
.pg-bento-accent {
position: absolute; bottom: -15px; right: -15px;
width: 80px; height: 80px; border-radius: 50%;
border: 20px solid rgba(202,162,88,0.08);
}
/* FEATURE STRIP */
.pg-feature-strip { padding: 0 80px 48px; display: flex; flex-direction: column; gap: 0; }
.pg-feature-row {
display: grid; grid-template-columns: 80px 1fr 1fr;
gap: 0; align-items: stretch;
border-bottom: 1px solid var(--page-border);
padding: 36px 0; transition: background 0.18s;
}
.pg-feature-row:hover { background: rgba(97,34,59,0.03); margin: 0 -20px; padding: 36px 20px; }
#MATIES-root:not(.light-mode) .pg-feature-row:hover { background: rgba(202,162,88,0.03); }
.pg-feature-num {
font-family: 'VT323', monospace; font-size: 3rem;
color: rgba(97,34,59,0.18); line-height: 1; padding-top: 4px;
font-weight: 400;
}
#MATIES-root:not(.light-mode) .pg-feature-num { color: rgba(202,162,88,0.12); }
.pg-feature-title {
font-family: 'Raleway', sans-serif; font-weight: 800;
font-size: 1.35rem; color: var(--page-maroon);
padding-right: 40px; align-self: center;
}
#MATIES-root:not(.light-mode) .pg-feature-title { color: var(--su-gold); }
.pg-feature-body {
font-family: 'Raleway', sans-serif; font-size: 0.97rem;
color: var(--page-text2); line-height: 1.85; align-self: center;
}
/* SECTION LABEL */
.pg-section-label {
font-family: 'Share Tech Mono', monospace;
font-size: 1.04rem; letter-spacing: 3px; text-transform: uppercase;
color: var(--su-gold-d); padding: 0 80px;
margin-bottom: 24px; margin-top: 52px;
display: flex; align-items: center; gap: 16px;
}
.pg-section-label::after { content: ''; flex: 1; height: 1px; background: var(--page-border); }
/* MAGAZINE GRID — staff */
.pg-mag-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 0;
padding: 0 80px 48px;
border-top: 1px solid var(--page-border);
}
.pg-mag-card {
padding: 36px 32px;
border-right: 1px solid var(--page-border);
border-bottom: 1px solid var(--page-border);
border-top: 3px solid transparent;
transition: background 0.2s, border-top-color 0.2s;
cursor: pointer;
}
.pg-mag-card:hover { background: rgba(97,34,59,0.04); border-top-color: var(--su-maroon); }
#MATIES-root:not(.light-mode) .pg-mag-card:hover { background: rgba(202,162,88,0.03); border-top-color: var(--su-gold); }
.pg-mag-avatar {
width: 64px; height: 64px; border-radius: 4px;
background: var(--su-maroon);
display: flex; align-items: center; justify-content: center;
font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.5rem;
font-style: italic; color: var(--su-gold); margin-bottom: 20px;
border: 1px solid rgba(202,162,88,0.2);
}
#MATIES-root:not(.light-mode) .pg-mag-avatar { background: #2a1020; border-color: rgba(202,162,88,0.25); }
.pg-mag-name {
font-family: 'Raleway', sans-serif; font-weight: 800;
font-size: 1.15rem; color: var(--page-maroon); margin-bottom: 4px;
}
#MATIES-root:not(.light-mode) .pg-mag-name { color: var(--su-gold); }
.pg-mag-role {
font-family: 'Share Tech Mono', monospace; font-size: 0.62rem;
color: var(--su-gold-d); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px;
}
.pg-mag-areas { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 18px; }
.pg-mag-info {
font-family: 'Raleway', sans-serif; font-size: 0.88rem;
color: var(--page-text2); line-height: 1.7;
}
/* Dark mode for sidebar metric blocks */
#MATIES-root:not(.light-mode) [style*="border-left:2px solid var(--su-maroon)"] {
background: rgba(97,34,59,0.08) !important;
}
#MATIES-root:not(.light-mode) [style*="border-left:2px solid var(--su-gold-d)"] {
background: rgba(202,162,88,0.06) !important;
}
/* ── EDITORIAL ENHANCEMENTS v5 ─────────────────────────────────────────── */
/* Staff card top accent reveal on hover */
.pg-mag-card:first-child { border-top-color: var(--su-maroon); }
/* Stat counter in bento — bigger, more editorial */
.pg-bento-num {
font-family: 'Playfair Display', serif !important;
font-style: italic;
}
/* Section label — bolder rule */
.pg-section-label {
position: relative;
}
.pg-section-label::after {
content: '';
display: block;
height: 1px;
background: linear-gradient(90deg, var(--su-maroon), transparent);
margin-top: 10px;
opacity: 0.4;
}
#MATIES-root:not(.light-mode) .pg-section-label::after {
background: linear-gradient(90deg, var(--su-gold), transparent);
opacity: 0.2;
}
/* Feature row number — more editorial */
.pg-feature-num {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 1.8rem !important;
line-height: 1;
min-width: 52px;
}
/* Spotlight icon — more restrained */
.pg-spotlight-icon {
display: block;
font-size: 1.6rem;
margin-bottom: 14px;
opacity: 0.9;
}
/* Hero rule — thicker left-edge feel */
.pg-hero-rule {
width: 48px;
height: 4px;
background: linear-gradient(90deg, var(--su-maroon), var(--su-gold));
border-radius: 2px;
margin-bottom: 20px;
}
#MATIES-root:not(.light-mode) .pg-hero-rule {
background: linear-gradient(90deg, var(--su-gold), rgba(202,162,88,0.3));
}
/* Timeline year label — add a dot connector */
.pg-tl-year {
border-right: 1px dashed var(--page-border);
padding-right: 20px;
}
#MATIES-root:not(.light-mode) .pg-tl-year { border-right-color: rgba(202,162,88,0.12); }
/* Kanban card hover */
.pg-kanban-card {
transition: background 0.15s, transform 0.15s;
}
.pg-kanban-card:hover {
background: rgba(97,34,59,0.05);
transform: translateX(2px);
}
#MATIES-root:not(.light-mode) .pg-kanban-card:hover {
background: rgba(202,162,88,0.04);
}
/* Kanban code — more prominent */
.pg-kanban-code {
font-weight: 800;
letter-spacing: 0.5px;
}
/* m-tag gold — more distinct */
.m-tag.gold {
background: rgba(202,162,88,0.15);
color: var(--su-gold-d);
border: 1px solid rgba(202,162,88,0.3);
}
/* Research spotlight card — add bottom border accent on hover */
.pg-spotlight-card {
transition: background 0.2s, border-top-color 0.2s, box-shadow 0.2s;
}
/* Publication split sidebar sticky fix */
.pg-split-sidebar {
max-height: calc(100vh - 120px);
overflow-y: auto;
}
/* ── MODULES PAGE ─────────────────────────────────────────────────────── */
.mod-toolbar {
display: flex; align-items: center; gap: 24px;
padding: 28px 24px; border-bottom: 1px solid var(--page-border);
flex-wrap: wrap;
}
.mod-filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.mod-tab {
font-family: 'Share Tech Mono', monospace; font-size: 0.92rem;
letter-spacing: 2px; text-transform: uppercase;
padding: 13px 28px; border: 1px solid var(--page-border);
background: transparent; color: var(--page-text2);
cursor: pointer; transition: all 0.15s; border-radius: 2px;
}
.mod-tab:hover { background: rgba(97,34,59,0.08); color: var(--page-maroon); }
.mod-tab.active { background: var(--su-maroon); border-color: var(--su-maroon); color: var(--su-gold); font-weight: 700; }
#MATIES-root:not(.light-mode) .mod-tab { color: rgba(202,162,88,0.45); border-color: rgba(202,162,88,0.12); }
#MATIES-root:not(.light-mode) .mod-tab:hover { background: rgba(202,162,88,0.07); color: var(--su-gold); }
#MATIES-root:not(.light-mode) .mod-tab.active { background: var(--su-maroon); border-color: var(--su-gold-d); color: var(--su-gold); }
.mod-search-wrap { position: relative; margin-left: auto; }
.mod-search {
font-family: 'Share Tech Mono', monospace; font-size: 0.95rem;
padding: 13px 44px 13px 18px; border: 1px solid var(--page-border);
background: var(--page-bg); color: var(--page-text);
outline: none; width: 340px; border-radius: 2px;
transition: border-color 0.15s;
}
.mod-search:focus { border-color: var(--su-maroon); box-shadow: 0 0 0 3px rgba(97,34,59,0.08); }
#MATIES-root:not(.light-mode) .mod-search { background: #160a0f; border-color: rgba(202,162,88,0.15); color: var(--su-gold-l); }
#MATIES-root:not(.light-mode) .mod-search:focus { border-color: var(--su-gold-d); box-shadow: 0 0 0 3px rgba(202,162,88,0.06); }
.mod-search-clear {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
font-size: 0.95rem; color: var(--page-text2); cursor: pointer; line-height: 1;
transition: color 0.15s;
}
.mod-search-clear:hover { color: var(--su-maroon); }
.mod-track-row {
display: flex; align-items: center; gap: 12px; padding: 16px 24px;
border-bottom: 1px solid var(--page-border); flex-wrap: wrap;
background: var(--page-bg2);
}
#MATIES-root:not(.light-mode) .mod-track-row { background: rgba(202,162,88,0.025); }
.mod-track-label {
font-family: 'Share Tech Mono', monospace; font-size: 0.82rem;
letter-spacing: 2.5px; text-transform: uppercase; color: var(--page-text2);
margin-right: 4px;
}
.mod-track-btn {
font-family: 'Share Tech Mono', monospace; font-size: 0.88rem;
letter-spacing: 1px; padding: 9px 18px; border: 1px solid var(--page-border);
background: transparent; cursor: pointer; transition: all 0.15s;
border-radius: 2px; color: var(--page-text2);
}
.mod-track-btn:hover { background: rgba(97,34,59,0.06); color: var(--page-maroon); }
.mod-track-btn.active { background: var(--su-maroon); border-color: var(--su-maroon); color: var(--su-gold); font-weight: 700; }
#MATIES-root:not(.light-mode) .mod-track-btn { border-color: rgba(202,162,88,0.15); color: rgba(202,162,88,0.55); }
#MATIES-root:not(.light-mode) .mod-track-btn:hover { background: rgba(202,162,88,0.07); color: var(--su-gold); }
#MATIES-root:not(.light-mode) .mod-track-btn.active { background: var(--su-maroon); border-color: var(--su-gold-d); color: var(--su-gold); }
.mod-result-meta {
font-family: 'Share Tech Mono', monospace; font-size: 0.85rem;
letter-spacing: 2px; color: var(--page-text2); text-transform: uppercase;
padding: 14px 24px; border-bottom: 1px solid var(--page-border);
}
.mod-list { padding: 0 24px; }
.mod-year-group { margin-top: 44px; }
.mod-year-header {
display: flex; justify-content: space-between; align-items: center;
padding: 18px 20px; margin-bottom: 0;
background: var(--page-bg2); border-bottom: 2px solid var(--page-border);
border-left: 4px solid var(--page-border);
}
#MATIES-root:not(.light-mode) .mod-year-header { background: rgba(202,162,88,0.04); border-bottom-color: rgba(202,162,88,0.1); }
.mod-year-label {
font-family: 'Playfair Display', serif; font-size: 1.5rem;
font-weight: 700; font-style: italic; color: var(--page-maroon);
letter-spacing: 0.3px;
}
#MATIES-root:not(.light-mode) .mod-year-label { color: var(--su-gold); text-shadow: 0 0 14px rgba(202,162,88,0.3); }
.mod-year-count {
font-family: 'Share Tech Mono', monospace; font-size: 0.85rem;
letter-spacing: 1.5px; color: var(--su-gold-d); text-transform: uppercase;
}
.mod-row {
display: flex; flex-direction: column; border-bottom: 1px solid var(--page-border);
cursor: pointer; transition: background 0.15s;
}
.mod-row:hover { background: rgba(97,34,59,0.05); }
#MATIES-root:not(.light-mode) .mod-row:hover { background: rgba(202,162,88,0.04); }
.mod-row-open { background: rgba(97,34,59,0.04); }
#MATIES-root:not(.light-mode) .mod-row-open { background: rgba(97,34,59,0.08); }
.mod-row-main {
display: grid; grid-template-columns: 150px 1fr auto 44px;
align-items: center; gap: 28px; padding: 26px 20px;
}
.mod-row-code {
font-family: 'Share Tech Mono', monospace; font-size: 1.25rem;
font-weight: 700; letter-spacing: 2px; color: var(--page-maroon);
padding-left: 14px; line-height: 1.2;
}
#MATIES-root:not(.light-mode) .mod-row-code { color: var(--su-gold); text-shadow: 0 0 10px rgba(202,162,88,0.25); }
.mod-row-name {
font-family: 'Raleway', sans-serif; font-size: 1.35rem;
font-weight: 700; color: var(--page-text); line-height: 1.3;
}
#MATIES-root:not(.light-mode) .mod-row-name { color: var(--su-gold-l); }
.mod-row-meta {
display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end;
}
.mod-sem, .mod-cr {
font-family: 'Share Tech Mono', monospace; font-size: 0.9rem;
color: var(--page-text2); white-space: nowrap; letter-spacing: 0.5px;
}
.mod-cr { color: var(--su-gold-d); font-weight: 700; font-size: 0.95rem; }
.mod-track-pill {
font-family: 'Share Tech Mono', monospace; font-size: 0.78rem;
padding: 5px 13px; letter-spacing: 1px; text-transform: uppercase;
border-radius: 2px; white-space: nowrap; font-weight: 600;
}
.mod-critical-badge {
display: inline-block; font-family: 'Share Tech Mono', monospace;
font-size: 0.78rem; padding: 5px 13px; margin-left: 10px;
background: rgba(220,68,5,0.12); color: #dc4405;
border: 1px solid rgba(220,68,5,0.3); border-radius: 2px; letter-spacing: 0.5px;
}
.mod-row-toggle {
font-family: 'Share Tech Mono', monospace; font-size: 1.6rem;
color: var(--su-gold-d); width: 36px; text-align: center;
transition: color 0.15s, transform 0.2s;
}
.mod-row-open .mod-row-toggle { transform: rotate(0deg); }
.mod-row:hover .mod-row-toggle { color: var(--su-maroon); }
#MATIES-root:not(.light-mode) .mod-row:hover .mod-row-toggle { color: var(--su-gold); }
.mod-row-detail {
border-top: 1px solid var(--page-border);
background: var(--page-bg2); padding: 36px 28px 36px 32px;
animation: modOpen 0.2s ease;
}
#MATIES-root:not(.light-mode) .mod-row-detail { background: #130810; border-color: rgba(202,162,88,0.08); }
@keyframes modOpen { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform: none; } }
.mod-detail-grid {
display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px;
}
.mod-detail-label {
font-family: 'Share Tech Mono', monospace; font-size: 0.85rem;
letter-spacing: 2.5px; text-transform: uppercase; color: var(--su-gold-d);
margin-bottom: 12px;
}
.mod-detail-body {
font-family: 'Raleway', sans-serif; font-size: 1.1rem;
color: var(--page-text2); line-height: 1.85;
}
#MATIES-root:not(.light-mode) .mod-detail-body { color: rgba(202,162,88,0.65); }
@media (max-width: 800px) {
.mod-toolbar, .mod-track-row, .mod-result-meta, .mod-list { padding-left: 16px; padding-right: 16px; }
.mod-row-main { grid-template-columns: 100px 1fr 32px; }
.mod-row-meta { display: none; }
.mod-detail-grid { grid-template-columns: 1fr; }
.mod-search { width: 180px; }
}
/* ── ADVISOR PAGE ─────────────────────────────────────────────────────── */
.adv-card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 0 0 20px;
padding: 0 24px;
}
.adv-card {
background: var(--page-bg2);
border: 1px solid var(--page-border);
border-top: 3px solid var(--page-border);
padding: 36px 40px 32px;
transition: background 0.15s, border-top-color 0.2s, box-shadow 0.2s;
position: relative;
border-radius: 2px;
}
.adv-card:hover { box-shadow: 0 4px 20px rgba(97,34,59,0.07); border-top-color: var(--su-maroon); }
#MATIES-root:not(.light-mode) .adv-card { background: #0f060a; border-color: rgba(202,162,88,0.1); border-top-color: rgba(202,162,88,0.12); }
#MATIES-root:not(.light-mode) .adv-card:hover { border-top-color: var(--su-gold-d); box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
.adv-card-wide { grid-column: 1 / -1; }
.adv-card-done {
border-top-color: #3a9a5a !important;
background: var(--page-bg);
}
.adv-card-done::after {
content: '✓ Done';
position: absolute; top: 14px; right: 18px;
font-family: 'Share Tech Mono', monospace; font-size: 0.68rem;
letter-spacing: 1.5px; text-transform: uppercase;
color: #3a9a5a; opacity: 0.85;
}
#MATIES-root:not(.light-mode) .adv-card-done { background: #0b0408; }
.adv-card-num {
font-family: 'Playfair Display', serif; font-style: italic;
font-size: 3rem; font-weight: 700; line-height: 1;
color: var(--su-maroon);
margin-bottom: 12px; user-select: none;
letter-spacing: -1px;
}
#MATIES-root:not(.light-mode) .adv-card-num {
color: rgba(202,162,88,0.92);
text-shadow:
0 0 6px rgba(202,162,88,0.95),
0 0 18px rgba(202,162,88,0.6),
0 0 40px rgba(202,162,88,0.3),
0 0 80px rgba(202,162,88,0.12);
animation: crtNumFlicker 8s ease-in-out infinite;
}
.adv-card-done .adv-card-num { color: rgba(58,154,90,0.2); text-shadow: none; }
.adv-card-title {
font-family: 'Raleway', sans-serif; font-weight: 800;
font-size: 1.15rem; color: var(--page-text); margin-bottom: 8px;
display: flex; align-items: center; gap: 12px; line-height: 1.2;
}
#MATIES-root:not(.light-mode) .adv-card-title { color: var(--su-gold-l); }
.adv-req {
font-family: 'Share Tech Mono', monospace; font-size: 0.62rem;
letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 9px;
background: rgba(220,68,5,0.1); color: #dc4405;
border: 1px solid rgba(220,68,5,0.3); border-radius: 2px;
white-space: nowrap;
}
.adv-card-hint {
font-family: 'Share Tech Mono', monospace; font-size: 0.72rem;
letter-spacing: 0.8px; color: var(--page-text2); margin-bottom: 20px;
line-height: 1.5;
}
.adv-chips {
display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
}
.adv-cta-row-v5 {
display: flex; justify-content: space-between; align-items: center;
padding: 28px 24px; border: 1px solid var(--page-border);
border-top: 3px solid var(--su-maroon);
margin: 0 24px 48px; flex-wrap: wrap; gap: 16px;
background: var(--page-bg2); border-radius: 2px;
}
#MATIES-root:not(.light-mode) .adv-cta-row-v5 { background: #0f060a; border-color: rgba(202,162,88,0.12); border-top-color: var(--su-gold-d); }
.adv-status-msg {
font-family: 'Share Tech Mono', monospace; font-size: 0.8rem;
letter-spacing: 1px; color: var(--page-text2); line-height: 1.6;
}
.adv-reset-btn {
font-family: 'Share Tech Mono', monospace; font-size: 0.78rem;
letter-spacing: 1.5px; padding: 13px 24px; background: transparent;
border: 1px solid var(--page-border); color: var(--page-text2);
cursor: pointer; border-radius: 2px; transition: all 0.2s;
text-transform: uppercase;
}
.adv-reset-btn:hover { border-color: var(--su-maroon); color: var(--page-maroon); }
#MATIES-root:not(.light-mode) .adv-reset-btn { border-color: rgba(202,162,88,0.18); color: rgba(202,162,88,0.5); }
#MATIES-root:not(.light-mode) .adv-reset-btn:hover { border-color: var(--su-gold-d); color: var(--su-gold); }
/* ── ADVISOR RESULT CTA ROW ── */
.adv-cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 28px 0 8px;
padding-top: 24px;
border-top: 1px solid var(--page-border);
}
.adv-cta-btn {
position: relative;
overflow: hidden;
font-family: 'Share Tech Mono', monospace;
font-size: 0.78rem;
letter-spacing: 2px;
text-transform: uppercase;
padding: 13px 22px;
border: 1px solid var(--su-maroon);
background: var(--su-maroon);
color: var(--su-gold);
cursor: pointer;
border-radius: 2px;
transition: color 0.25s, box-shadow 0.25s, border-color 0.25s;
white-space: nowrap;
}
.adv-cta-btn::after {
content: '';
position: absolute;
inset: 0;
background: var(--su-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
z-index: 0;
}
.adv-cta-btn > * { position: relative; z-index: 1; }
.adv-cta-btn:hover { color: var(--su-maroon); border-color: var(--su-gold); }
.adv-cta-btn:hover::after { transform: scaleX(1); }
/* Ghost variant — outlined only */
.adv-cta-btn.ghost {
background: transparent;
border-color: var(--page-border);
color: var(--page-text2);
}
.adv-cta-btn.ghost::after { background: var(--su-maroon); }
.adv-cta-btn.ghost:hover { color: var(--su-gold); border-color: var(--su-maroon); }
/* Dark mode overrides */
#MATIES-root:not(.light-mode) .adv-cta-row {
border-top-color: rgba(202,162,88,0.12);
}
#MATIES-root:not(.light-mode) .adv-cta-btn {
background: rgba(97,34,59,0.6);
border-color: var(--su-gold-d);
color: var(--su-gold);
box-shadow: 0 0 12px rgba(202,162,88,0.08), inset 0 1px 0 rgba(202,162,88,0.06);
}
#MATIES-root:not(.light-mode) .adv-cta-btn::after { background: var(--su-gold-d); }
#MATIES-root:not(.light-mode) .adv-cta-btn:hover {
color: var(--su-dark);
border-color: var(--su-gold);
box-shadow: 0 0 20px rgba(202,162,88,0.3), 0 0 40px rgba(202,162,88,0.1);
}
#MATIES-root:not(.light-mode) .adv-cta-btn.ghost {
background: transparent;
border-color: rgba(202,162,88,0.2);
color: rgba(202,162,88,0.55);
}
#MATIES-root:not(.light-mode) .adv-cta-btn.ghost::after { background: rgba(97,34,59,0.7); }
#MATIES-root:not(.light-mode) .adv-cta-btn.ghost:hover {
color: var(--su-gold);
border-color: var(--su-gold-d);
box-shadow: 0 0 14px rgba(202,162,88,0.15);
}
/* Override button size inside compact CTA row */
.adv-cta-row-v5 .a5-gen-btn { padding: 14px 44px; font-size: 0.88rem; letter-spacing: 2px; }
/* Advisor responsive handled in main responsive block below */
/* SPLIT PANE — publications */
.pg-split {
display: grid; grid-template-columns: 240px 1fr;
gap: 0; min-height: 100%;
}
.pg-split-sidebar {
background: var(--page-bg2); border-right: 1px solid var(--page-border);
padding: 36px 24px; position: sticky; top: 0; align-self: start;
}
#MATIES-root:not(.light-mode) .pg-split-sidebar { background: #130b0e; border-color: rgba(202,162,88,0.1); }
.pg-split-main { padding: 40px 56px 80px; }
.pg-sidebar-label {
font-family: 'Share Tech Mono', monospace; font-size: 0.6rem;
color: var(--su-gold-d); letter-spacing: 2px; text-transform: uppercase;
margin-bottom: 14px; margin-top: 28px;
border-bottom: 1px solid var(--page-border); padding-bottom: 8px;
}
.pg-sidebar-link {
display: block; font-family: 'Raleway', sans-serif; font-size: 0.9rem;
color: var(--page-text2); padding: 9px 12px; border-radius: 4px;
cursor: pointer; transition: all 0.15s; font-weight: 600; margin-bottom: 4px;
border-left: 2px solid transparent;
}
.pg-sidebar-link:hover, .pg-sidebar-link.active {
background: rgba(97,34,59,0.07); border-left-color: var(--su-maroon); color: var(--page-maroon);
}
#MATIES-root:not(.light-mode) .pg-sidebar-link:hover,
#MATIES-root:not(.light-mode) .pg-sidebar-link.active { background: rgba(202,162,88,0.06); border-left-color: var(--su-gold); color: var(--su-gold); }
/* TIMELINE — programmes */
.pg-timeline { padding: 40px 80px 80px; }
.pg-timeline-item {
display: grid; grid-template-columns: 190px 4px 1fr;
gap: 0 32px; margin-bottom: 0; min-height: 0;
}
.pg-tl-year {
text-align: right; padding-top: 8px;
font-family: 'Share Tech Mono', monospace; font-size: 0.91rem;
color: var(--su-gold-d); letter-spacing: 1px; text-transform: uppercase;
line-height: 1.5; word-break: normal; overflow-wrap: normal; white-space: nowrap;
}
.pg-tl-line {
position: relative; background: var(--page-border);
width: 2px; margin: 0 auto;
}
.pg-tl-line::before {
content: ''; position: absolute; top: 8px; left: 50%;
transform: translateX(-50%);
width: 14px; height: 14px; border-radius: 50%;
background: var(--su-maroon); border: 3px solid var(--su-gold);
box-shadow: 0 0 0 4px var(--page-bg);
}
#MATIES-root:not(.light-mode) .pg-tl-line::before { box-shadow: 0 0 0 4px var(--page-bg); }
.pg-tl-content {
padding: 0 0 52px 0;
}
.pg-tl-card {
background: var(--page-card);
border: 1px solid var(--page-border);
border-top: 4px solid var(--su-maroon);
border-radius: 2px; padding: 32px 36px;
transition: box-shadow 0.2s, border-top-color 0.2s;
}
.pg-tl-card:hover { box-shadow: 0 4px 24px rgba(97,34,59,0.1); }
#MATIES-root:not(.light-mode) .pg-tl-card { background: #160a0f; border-color: rgba(202,162,88,0.1); border-top-color: var(--su-gold); }
#MATIES-root:not(.light-mode) .pg-tl-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
.pg-tl-title {
font-family: 'Raleway', sans-serif; font-weight: 900; font-size: 1.4rem;
color: var(--page-maroon); margin-bottom: 6px;
}
#MATIES-root:not(.light-mode) .pg-tl-title { color: var(--su-gold); }
.pg-tl-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pg-tl-desc {
font-family: 'Raleway', sans-serif; font-size: 1.02rem;
color: var(--page-text2); line-height: 1.85; margin-bottom: 24px; max-width: 72ch;
}
.pg-tl-info-row {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 18px; margin-top: 24px;
}
.pg-tl-info-box {
background: var(--page-bg2); border-radius: 2px; padding: 20px 22px;
border-left: 2px solid var(--page-border);
}
#MATIES-root:not(.light-mode) .pg-tl-info-box { background: #130b0e; border-left-color: rgba(202,162,88,0.15); }
.pg-tl-info-label {
font-family: 'Share Tech Mono', monospace; font-size: 0.68rem;
color: var(--su-gold-d); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px;
}
.pg-tl-info-body {
font-family: 'Raleway', sans-serif; font-size: 0.97rem;
color: var(--page-text2); line-height: 1.85;
}
/* KANBAN — courses */
.pg-kanban {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0;
padding: 0;
overflow-x: auto;
min-width: 0;
}
.pg-kanban-col {
border-right: 1px solid var(--page-border);
min-height: calc(100vh - 200px);
}
.pg-kanban-col:last-child { border-right: none; }
.pg-kanban-header {
padding: 20px 24px 18px;
border-bottom: 3px solid var(--su-maroon);
background: linear-gradient(180deg, var(--su-maroon-d), var(--su-maroon));
position: sticky; top: 0; z-index: 10;
}
#MATIES-root:not(.light-mode) .pg-kanban-header { background: linear-gradient(180deg, #420f27, #61223b); }
.pg-kanban-col-title {
font-family: 'Raleway', sans-serif; font-weight: 900; font-size: 0.85rem;
color: #fff; letter-spacing: 0.5px; text-transform: uppercase;
}
.pg-kanban-col-sub {
font-family: 'Share Tech Mono', monospace; font-size: 0.58rem;
color: rgba(202,162,88,0.7); margin-top: 4px; letter-spacing: 1px;
}
.pg-kanban-body { padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.pg-kanban-card {
background: var(--page-card); border: 1px solid var(--page-border);
border-radius: 7px; padding: 16px 18px;
border-left: 4px solid var(--su-maroon);
transition: transform 0.15s, box-shadow 0.15s;
cursor: pointer;
}
.pg-kanban-card:hover { transform: translateX(4px); box-shadow: 0 4px 16px rgba(97,34,59,0.12); }
#MATIES-root:not(.light-mode) .pg-kanban-card { background: #160a0f; border-color: rgba(202,162,88,0.1); border-left-color: var(--su-maroon); }
#MATIES-root:not(.light-mode) .pg-kanban-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.pg-kanban-code {
font-family: 'Share Tech Mono', monospace; font-size: 0.7rem;
color: var(--su-gold-d); letter-spacing: 1px; margin-bottom: 5px;
}
.pg-kanban-name {
font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 0.9rem;
color: var(--page-maroon); line-height: 1.3; margin-bottom: 8px;
}
#MATIES-root:not(.light-mode) .pg-kanban-name { color: var(--su-gold-l); }
.pg-kanban-meta {
display: flex; justify-content: space-between;
font-family: 'Share Tech Mono', monospace; font-size: 0.6rem;
color: rgba(97,34,59,0.45);
}
#MATIES-root:not(.light-mode) .pg-kanban-meta { color: rgba(202,162,88,0.35); }
/* RESEARCH SPOTLIGHT */
.pg-spotlight-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 0; padding: 0 80px 48px;
}
.pg-spotlight-card {
padding: 40px 36px; border: 1px solid var(--page-border);
border-top: 5px solid var(--su-maroon);
margin: -1px 0 0 -1px;
transition: background 0.2s;
}
.pg-spotlight-card:hover { background: rgba(97,34,59,0.02); }
#MATIES-root:not(.light-mode) .pg-spotlight-card { border-color: rgba(202,162,88,0.1); }
#MATIES-root:not(.light-mode) .pg-spotlight-card:hover { background: rgba(202,162,88,0.02); }
.pg-spotlight-card.accent { border-top-color: var(--su-green); }
.pg-spotlight-card.accent2 { border-top-color: var(--su-gold-d); }
.pg-spotlight-card.accent3 { border-top-color: #3a6ab4; }
.pg-spotlight-card.accent4 { border-top-color: var(--su-orange); }
.pg-spotlight-icon { font-size: 2.8rem; margin-bottom: 20px; display: block; }
.pg-spotlight-title {
font-family: 'Raleway', sans-serif; font-weight: 900; font-size: 1.5rem;
color: var(--page-maroon); margin-bottom: 14px; line-height: 1.25;
}
#MATIES-root:not(.light-mode) .pg-spotlight-title { color: var(--su-gold); }
.pg-spotlight-body {
font-family: 'Raleway', sans-serif; font-size: 0.95rem;
color: var(--page-text2); line-height: 1.85; margin-bottom: 20px;
}
.pg-spotlight-meta {
font-family: 'Share Tech Mono', monospace; font-size: 0.62rem;
color: var(--su-gold-d); letter-spacing: 0.5px; border-top: 1px solid var(--page-border);
padding-top: 14px; margin-top: 14px;
}
/* NEWS EDITORIAL */
.pg-editorial {
display: grid; grid-template-columns: 1fr 1fr 320px;
gap: 0; padding: 0;
}
.pg-editorial-main { padding: 40px 40px 60px; border-right: 1px solid var(--page-border); }
.pg-editorial-col2 { padding: 40px 32px 60px; border-right: 1px solid var(--page-border); }
.pg-editorial-aside { padding: 32px 24px 60px; background: var(--page-bg2); }
#MATIES-root:not(.light-mode) .pg-editorial-aside { background: #130b0e; }
/* EVENTS CALENDAR LAYOUT */
.pg-events-layout {
display: grid; grid-template-columns: 1fr 1fr;
gap: 0;
}
.pg-events-col { padding: 40px 52px 60px; }
.pg-events-col:first-child { border-right: 1px solid var(--page-border); }
.pg-event-card-new {
display: grid; grid-template-columns: 88px 1fr;
gap: 0; border-bottom: 1px solid var(--page-border);
padding: 28px 0; transition: background 0.15s;
}
.pg-event-card-new:hover { background: rgba(97,34,59,0.03); margin: 0 -20px; padding: 28px 20px; }
#MATIES-root:not(.light-mode) .pg-event-card-new:hover { background: rgba(202,162,88,0.03); }
.pg-event-date-block {
display: flex; flex-direction: column; align-items: center;
justify-content: flex-start; padding-top: 4px;
}
.pg-event-day {
font-family: 'Raleway', sans-serif; font-weight: 900; font-size: 2.6rem;
line-height: 1; color: var(--su-maroon);
}
#MATIES-root:not(.light-mode) .pg-event-day { color: var(--su-gold); }
.pg-event-month {
font-family: 'Share Tech Mono', monospace; font-size: 0.62rem;
letter-spacing: 2px; text-transform: uppercase; color: var(--su-gold-d);
margin-top: 2px;
}
.pg-event-body { padding-left: 20px; }
.pg-event-title {
font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 1.05rem;
color: var(--page-maroon); margin-bottom: 6px; line-height: 1.3;
}
#MATIES-root:not(.light-mode) .pg-event-title { color: var(--su-gold-l); }
.pg-event-meta {
font-family: 'Share Tech Mono', monospace; font-size: 0.62rem;
color: var(--su-gold-d); margin-bottom: 8px;
}
.pg-event-desc {
font-family: 'Raleway', sans-serif; font-size: 0.88rem;
color: var(--page-text2); line-height: 1.7;
}
/* STUDENTS DASHBOARD */
.pg-dash-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
.pg-dash-nav {
background: var(--page-bg2); border-right: 1px solid var(--page-border);
padding: 36px 20px; position: sticky; top: 0; align-self: start;
}
#MATIES-root:not(.light-mode) .pg-dash-nav { background: #130b0e; border-color: rgba(202,162,88,0.1); }
.pg-dash-nav-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; border-radius: 8px; cursor: pointer;
font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 0.88rem;
color: var(--page-text2); transition: all 0.15s; margin-bottom: 4px;
text-decoration: none; border: none; background: none; width: 100%; text-align: left;
}
.pg-dash-nav-item:hover, .pg-dash-nav-item.active {
background: rgba(97,34,59,0.08); color: var(--page-maroon);
}
#MATIES-root:not(.light-mode) .pg-dash-nav-item:hover,
#MATIES-root:not(.light-mode) .pg-dash-nav-item.active {
background: rgba(202,162,88,0.08); color: var(--su-gold);
}
.pg-dash-nav-icon { font-size: 1.1rem; flex-shrink: 0; }
.pg-dash-main { padding: 40px 56px 80px; }
.pg-dash-section { margin-bottom: 56px; }
.pg-dash-section-title {
font-family: 'Raleway', sans-serif; font-weight: 900; font-size: 1.4rem;
color: var(--page-maroon); margin-bottom: 6px;
}
#MATIES-root:not(.light-mode) .pg-dash-section-title { color: var(--su-gold); }
.pg-dash-section-sub {
font-family: 'Raleway', sans-serif; font-size: 0.95rem;
color: var(--page-text2); margin-bottom: 24px; line-height: 1.7;
}
/* CONTACT LAYOUT */
.pg-contact-layout { display: flex; flex-direction: column; }
.pg-contact-map-hero { height: 340px; position: relative; }
.pg-contact-map-hero iframe { width: 100%; height: 100%; display: block; border: 0; }
.pg-contact-info-strip {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0; border-top: 4px solid var(--su-gold);
border-bottom: 1px solid var(--page-border);
}
.pg-contact-info-cell {
padding: 36px 32px;
border-right: 1px solid var(--page-border);
}
.pg-contact-info-cell:last-child { border-right: none; }
#MATIES-root:not(.light-mode) .pg-contact-info-cell { border-color: rgba(202,162,88,0.1); }
.pg-contact-cell-label {
font-family: 'Share Tech Mono', monospace; font-size: 0.6rem;
color: var(--su-gold-d); letter-spacing: 2px; text-transform: uppercase;
margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.pg-contact-cell-content {
font-family: 'Raleway', sans-serif; font-size: 0.97rem;
color: var(--page-text); line-height: 1.9;
}
.pg-contact-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.pg-contact-lower-col { padding: 48px 56px; border-right: 1px solid var(--page-border); }
.pg-contact-lower-col:last-child { border-right: none; }
/* Responsive adjustments */
@media (max-width: 1100px) {
.pg-bento { grid-template-columns: repeat(3, 1fr); padding: 28px 36px; }
.pg-bento-cell.col4 { grid-column: span 3; }
.pg-contact-info-strip { grid-template-columns: 1fr 1fr; }
.pg-contact-lower { grid-template-columns: 1fr; }
.pg-contact-lower-col { border-right: none; border-bottom: 1px solid var(--page-border); }
}
/* ══════════════════════════════════════════════════
PAGE TYPOGRAPHY — SU brand: Raleway
══════════════════════════════════════════════════ */
.m-h1 {
font-family: 'Raleway', sans-serif;
font-size: 3rem; font-weight: 800;
color: var(--su-maroon);
padding-bottom: 22px; margin-bottom: 44px;
letter-spacing: -0.5px; line-height: 1.1;
position: relative; text-transform: none;
}
.m-h1::after {
content: '';
position: absolute; bottom: 0; left: 0;
width: 80px; height: 4px;
background: linear-gradient(90deg, var(--su-gold), rgba(202,162,88,0.2), transparent);
}
.m-h2 {
font-family: 'Raleway', sans-serif;
font-size: 1.6rem; font-weight: 700;
color: var(--su-maroon);
margin: 60px 0 24px;
display: flex; align-items: center; gap: 14px;
}
.m-h2::after {
content: ''; flex: 1; height: 1px;
background: linear-gradient(90deg, rgba(97,34,59,0.25), transparent);
}
.m-h3 {
font-family: 'Raleway', sans-serif;
font-size: 1.22rem; font-weight: 700;
color: var(--su-maroon); margin: 28px 0 14px;
}
.m-p {
font-family: 'Raleway', sans-serif;
font-size: 1.12rem; font-weight: 400;
line-height: 1.95; color: var(--page-text2);
margin-bottom: 24px; max-width: 76ch;
}
.m-link {
color: var(--su-maroon); text-decoration: none;
border-bottom: 1px solid rgba(97,34,59,0.3);
transition: border-color 0.15s, color 0.15s;
}
.m-link:hover { color: var(--su-gold-d); border-color: var(--su-gold); }
/* ── Tags / badges ── */
.m-tag {
display: inline-block;
background: var(--su-maroon); color: var(--su-white);
font-family: 'Raleway', sans-serif; font-weight: 700;
font-size: 0.85rem; padding: 3px 9px;
border-radius: 2px; margin: 2px;
letter-spacing: 0.8px; text-transform: uppercase;
}
.m-tag.gold { background: var(--su-gold); color: var(--su-dark); }
.m-tag.green { background: var(--su-green); color: var(--su-dark); }
.m-tag.new {
background: var(--su-orange); color: #fff;
animation: mNewPulse 2s ease-in-out infinite;
}
@keyframes mNewPulse { 0%,100%{opacity:1;}50%{opacity:0.72;} }
.m-badge {
display: inline-block;
background: var(--su-gold); color: var(--su-dark);
font-family: 'Raleway', sans-serif; font-weight: 700;
font-size: 0.6rem; padding: 3px 9px;
border-radius: 20px; letter-spacing: 0.8px;
margin-left: 8px; vertical-align: middle;
text-transform: uppercase;
}
.m-badge.green { background: #1a6040; color: #fff; }
.m-badge.blue { background: #1a3a70; color: #fff; }
/* ── Divider ── */
.m-divider { border: none; border-top: 1px solid var(--page-border); margin: 28px 0; }
/* ── Cards ── */
.m-card {
background: var(--page-card);
border-left: 5px solid var(--su-maroon);
padding: 32px 38px; margin-bottom: 22px;
box-shadow: 0 1px 4px rgba(97,34,59,0.06), 0 5px 18px rgba(0,0,0,0.04);
transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
border-radius: 0 6px 6px 0; position: relative;
}
.m-card:hover {
transform: translateX(6px);
box-shadow: 0 3px 12px rgba(97,34,59,0.12), 0 10px 28px rgba(0,0,0,0.06);
border-left-color: var(--su-gold-d);
}
.m-card h3 {
font-family: 'Raleway', sans-serif; font-weight: 700;
color: var(--su-maroon); font-size: 1.18rem; margin-bottom: 10px;
}
.m-card p {
font-family: 'Raleway', sans-serif; font-size: 1.1rem;
color: var(--page-text2); line-height: 1.85;
}
.m-card .meta {
font-family: 'Share Tech Mono', monospace;
font-size: 0.75rem; color: var(--su-gold-d);
margin-top: 14px; letter-spacing: 0.3px;
border-top: 1px solid var(--page-border); padding-top: 12px;
}
/* ── Grids ── */
.m-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 20px; margin: 20px 0; }
.m-grid3 { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 16px; margin: 20px 0; }
/* ── Stat cards — Confident Maroon dominant, Gold accent ── */
.m-stat {
background: linear-gradient(155deg, var(--su-maroon) 0%, var(--su-maroon-d) 100%);
color: var(--su-white);
padding: 32px 22px 28px;
text-align: center; border-radius: 6px;
box-shadow: 0 4px 16px rgba(97,34,59,0.28);
position: relative; overflow: hidden;
transition: transform 0.22s, box-shadow 0.22s;
}
.m-stat:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(97,34,59,0.38); }
.m-stat::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, transparent, var(--su-gold), transparent);
}
.m-stat::after {
content: '';
position: absolute; top: -30px; right: -20px;
width: 80px; height: 80px; border-radius: 50%;
border: 18px solid rgba(202,162,88,0.08);
}
.m-stat .num {
font-family: 'Raleway', sans-serif; font-weight: 800;
font-size: 3.2rem; color: var(--su-gold);
display: block; line-height: 1;
text-shadow: 0 0 16px rgba(202,162,88,0.4);
}
.m-stat .lbl {
font-family: 'Raleway', sans-serif; font-weight: 600;
font-size: 0.7rem; letter-spacing: 1.2px;
text-transform: uppercase; opacity: 0.72; margin-top: 10px;
}
/* ── Infobox ── */
.m-infobox {
background: var(--page-bg2);
border: 1px solid var(--page-border);
border-left: 5px solid var(--su-gold-d);
padding: 20px 28px; margin: 22px 0;
font-family: 'Raleway', sans-serif;
font-size: 1.05rem; line-height: 1.82;
color: var(--page-text); border-radius: 0 6px 6px 0;
}
.m-infobox.alert { background: rgba(202,162,88,0.08); border-left-color: var(--su-gold-d); }
.m-infobox.success { background: rgba(130,204,174,0.1); border-left-color: var(--su-green); }
/* ── Table ── */
table.m-table {
width: 100%; border-collapse: collapse;
font-family: 'Raleway', sans-serif;
font-size: 1.02rem; margin: 20px 0;
}
table.m-table th {
background: var(--su-maroon); color: var(--su-white);
padding: 14px 20px; text-align: left;
font-weight: 700; font-size: 0.72rem;
letter-spacing: 1.2px; text-transform: uppercase;
}
table.m-table td {
padding: 14px 20px;
border-bottom: 1px solid var(--page-border);
color: var(--page-text); vertical-align: middle;
font-size: 1rem;
}
table.m-table tr:last-child td { border-bottom: none; }
table.m-table tr:nth-child(even) td { background: var(--page-bg2); }
table.m-table tr:hover td { background: rgba(202,162,88,0.06); }
.trend-up { color: #1a6040; font-weight: 700; font-family: 'Share Tech Mono', monospace; font-size: 0.85rem; }
/* ── Profiles ── */
.m-profile-grid {
display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
gap: 18px; margin: 16px 0;
}
.m-profile {
background: var(--page-card);
border-top: 3px solid var(--su-maroon);
padding: 24px 18px 20px;
text-align: center;
box-shadow: 0 2px 10px rgba(97,34,59,0.09);
transition: transform 0.2s, box-shadow 0.2s;
cursor: pointer; border-radius: 0 0 4px 4px;
position: relative; overflow: hidden;
}
.m-profile::after {
content: 'View profile →';
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(135deg, var(--su-maroon), var(--su-maroon-d));
color: var(--su-gold); font-family: 'Raleway', sans-serif;
font-size: 0.62rem; font-weight: 700;
letter-spacing: 1px; padding: 7px; text-transform: uppercase;
transform: translateY(100%); transition: transform 0.2s;
}
.m-profile:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(97,34,59,0.2); }
.m-profile:hover::after { transform: translateY(0); }
.m-avatar {
width: 68px; height: 68px; border-radius: 50%;
background: linear-gradient(135deg, var(--su-maroon), var(--su-maroon-d));
margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
font-family: 'Raleway', sans-serif; font-weight: 800;
font-size: 1.4rem; color: var(--su-gold);
border: 2px solid rgba(202,162,88,0.45);
box-shadow: 0 0 0 5px rgba(97,34,59,0.1);
}
.m-profile h3 {
font-family: 'Raleway', sans-serif; font-weight: 700;
color: var(--su-maroon); font-size: 0.95rem;
margin-bottom: 5px; line-height: 1.3;
}
.m-profile .role {
font-family: 'Raleway', sans-serif; font-weight: 600;
font-size: 0.6rem; color: var(--su-gold-d);
letter-spacing: 1px; margin-bottom: 10px;
text-transform: uppercase;
}
/* ── Events ── */
.m-event {
background: var(--page-card);
display: flex; gap: 0;
margin-bottom: 12px; border-radius: 4px;
box-shadow: 0 2px 10px rgba(97,34,59,0.08);
overflow: hidden;
transition: box-shadow 0.2s, transform 0.2s;
}
.m-event:hover { box-shadow: 0 6px 22px rgba(97,34,59,0.14); transform: translateY(-2px); }
.m-edate {
background: linear-gradient(180deg, var(--su-maroon), var(--su-maroon-d));
color: var(--su-white); padding: 14px 16px;
text-align: center; min-width: 62px; flex-shrink: 0;
display: flex; flex-direction: column; justify-content: center;
}
.m-edate .day { font-family: 'Raleway',sans-serif; font-weight: 800; font-size: 2rem; color: var(--su-gold); line-height: 1; }
.m-edate .mon { font-family: 'Raleway',sans-serif; font-weight: 600; font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase; opacity: 0.8; }
.m-ebody { padding: 14px 18px; flex: 1; border-left: 3px solid rgba(202,162,88,0.2); }
.m-ebody h4 { font-family: 'Raleway',sans-serif; font-weight: 700; color: var(--su-maroon); font-size: 1.02rem; margin-bottom: 5px; }
.m-ebody p { font-family: 'Raleway',sans-serif; font-size: 0.93rem; color: var(--page-text2); line-height: 1.55; }
.m-ebody .emeta { font-family: 'Share Tech Mono',monospace; font-size: 0.68rem; color: var(--su-gold-d); margin-top: 8px; }
.m-rsvp-btn:hover { background: var(--su-maroon); color: var(--su-white); }
.m-rsvp-btn.rsvpd { background: #1a6040; color: #fff; border-color: #1a6040; }
/* ── Publications ── */
.m-pub {
background: var(--page-card);
border-left: 4px solid var(--su-gold-d);
padding: 20px 26px; margin-bottom: 20px;
box-shadow: 0 1px 5px rgba(97,34,59,0.06);
transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
border-radius: 0 4px 4px 0;
}
.m-pub:hover { box-shadow: 0 5px 20px rgba(97,34,59,0.12); transform: translateX(3px); border-left-color: var(--su-maroon); }
.m-pub h4 { font-family: 'Raleway',sans-serif; font-weight: 700; color: var(--page-text); font-size: 1.08rem; margin-bottom: 7px; line-height: 1.5; }
.m-pub .authors { font-family: 'Raleway',sans-serif; font-size: 0.98rem; color: var(--page-text2); font-style: italic; margin-bottom: 6px; }
.m-pub .venue { font-family: 'Share Tech Mono',monospace; font-size: 0.76rem; color: var(--su-maroon); margin-bottom: 2px; }
.m-pub a { color: var(--su-maroon); text-decoration: none; font-size: 0.74rem; font-family: 'Share Tech Mono',monospace; border-bottom: 1px solid rgba(97,34,59,0.3); }
.m-pub a:hover { color: var(--su-gold-d); border-color: var(--su-gold); }
/* ── Misc ── */
.m-prog-bar { height: 6px; background: var(--page-bg2); border-radius: 3px; overflow: hidden; margin: 6px 0 12px; }
.m-prog-fill { height: 100%; background: linear-gradient(90deg, var(--su-maroon), var(--su-gold)); border-radius: 3px; }
.m-acc-item { border-bottom: 1px solid var(--page-border); }
.m-acc-btn {
width: 100%; background: none; border: none;
padding: 15px 0; display: flex; justify-content: space-between;
align-items: center; cursor: pointer;
font-family: 'Raleway',sans-serif; font-size: 1.02rem; font-weight: 600;
color: var(--su-maroon); text-align: left; transition: color 0.15s;
}
.m-acc-btn:hover { color: var(--su-gold-d); }
.m-acc-arrow { font-size: 0.72rem; transition: transform 0.25s; color: var(--su-gold-d); font-family: 'Share Tech Mono',monospace; }
.m-acc-body { overflow: hidden; max-height: 0; transition: max-height 0.4s ease; }
.m-acc-body.open { max-height: 1000px; }
.m-acc-inner { padding: 0 0 16px; font-family: 'Raleway',sans-serif; font-size: 0.97rem; line-height: 1.76; color: var(--page-text); }
.m-mod-row {
display: grid; grid-template-columns: 96px 1fr 60px 56px;
gap: 8px; padding: 9px 12px;
border-bottom: 1px solid var(--page-border);
font-family: 'Raleway',sans-serif; font-size: 0.95rem;
align-items: center; transition: background 0.1s;
}
.m-mod-row:nth-child(even){ background: var(--page-bg2); }
.m-mod-row:hover{ background: rgba(202,162,88,0.07); }
.m-mod-row .code { font-family: 'Share Tech Mono',monospace; font-size: 0.72rem; color: var(--su-maroon); font-weight: bold; }
.m-mod-row .sem { font-family: 'Share Tech Mono',monospace; font-size: 0.7rem; color: var(--page-text2); text-align: center; opacity: 0.6; }
.m-mod-row .cred { font-family: 'Share Tech Mono',monospace; font-size: 0.7rem; color: var(--su-gold-d); text-align: right; font-weight: bold; }
.m-loading {
display: flex; align-items: center; gap: 12px;
padding: 28px; font-family: 'Share Tech Mono',monospace;
font-size: 0.8rem; color: var(--su-maroon);
}
.m-spinner {
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid rgba(97,34,59,0.2);
border-top-color: var(--su-maroon);
animation: mSpin 0.8s linear infinite; flex-shrink: 0;
}
@keyframes mSpin { to{ transform: rotate(360deg); } }
.m-api-badge {
display: inline-block;
background: rgba(202,162,88,0.12);
border: 1px solid rgba(202,162,88,0.3);
color: var(--su-gold-d);
font-family: 'Share Tech Mono',monospace; font-size: 0.64rem;
padding: 3px 10px; border-radius: 2px; letter-spacing: 0.5px;
margin-bottom: 10px;
}
.m-api-err {
padding: 14px 16px; font-family: 'Raleway',sans-serif;
font-size: 0.88rem; color: var(--su-orange);
background: rgba(220,68,5,0.07); border-left: 3px solid var(--su-orange);
margin-bottom: 8px; border-radius: 0 3px 3px 0;
}
.m-search-hl { background: rgba(202,162,88,0.35); border-radius: 2px; padding: 0 2px; }
.m-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
/* ── Modal ── */
#m-modal {
position: absolute; inset: 0; z-index: 300;
background: rgba(14,5,8,0.6);
display: none; align-items: center;
justify-content: center; padding: 24px;
backdrop-filter: blur(5px);
}
#m-modal.open { display: flex; }
#m-modal-box {
background: var(--page-bg);
max-width: 660px; width: 100%; max-height: 86vh;
overflow-y: auto;
border-top: 4px solid var(--su-maroon);
border-radius: 0 0 4px 4px;
box-shadow: 0 28px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(202,162,88,0.18);
position: relative; animation: mModalIn 0.24s cubic-bezier(0.4,0,0.2,1);
}
@keyframes mModalIn { from{ opacity:0; transform:translateY(-16px) scale(0.97); } to{ opacity:1; transform:none; } }
#m-modal-close {
position: sticky; top: 0; float: right;
background: var(--su-maroon); border: none;
color: var(--su-white);
font-family: 'Raleway',sans-serif; font-weight: 700;
font-size: 0.7rem; padding: 9px 18px;
cursor: pointer; letter-spacing: 1.5px;
z-index: 1; transition: background 0.15s;
text-transform: uppercase;
}
#m-modal-close:hover { background: var(--su-gold-d); color: var(--su-dark); }
#m-modal-content { padding: 28px 32px 34px; clear: both; }
/* ── Responsive ── */
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE SYSTEM — Mobile-first, 4-tier breakpoints
xs < 480px — phone portrait
sm 480–767px — phone landscape / small tablet
md 768–1023px — tablet
lg 1024px+ — desktop (base styles)
═══════════════════════════════════════════════════════════════ */
/* ── Fluid type scale via clamp ── */
.pg-hero h1 {
font-size: clamp(1.8rem, 5vw, 4.2rem) !important;
}
.pg-hero-eyebrow {
font-size: clamp(0.72rem, 1.8vw, 1.15rem) !important;
}
.pg-hero-sub {
font-size: clamp(0.9rem, 2vw, 1.1rem) !important;
}
.m-h1 { font-size: clamp(1.6rem, 4vw, 3rem); }
.m-h2 { font-size: clamp(1.1rem, 2.5vw, 1.6rem); }
/* ── Fluid inner padding ── */
.pg-inner {
padding: clamp(20px, 5vw, 80px) clamp(16px, 6vw, 80px) clamp(48px, 8vw, 100px);
}
.pg-hero {
padding: clamp(32px, 6vw, 72px) clamp(20px, 6vw, 80px) clamp(36px, 6vw, 80px);
}
/* ─────────────────────────────────────────
MD — Tablet 768–1023px
───────────────────────────────────────── */
@media (max-width: 1023px) {
/* Nav */
#m-nav-bar { height: 62px; padding: 0 8px; }
.m-nav-btn { padding: 0 12px; min-width: 60px; }
/* Advisor grid: 2→1 col on tablet */
.adv-card-grid { grid-template-columns: 1fr 1fr; padding: 0 16px; gap: 16px; }
/* Bento */
.pg-bento { padding: 28px 24px !important; gap: 16px !important; }
/* Feature strip */
.pg-feature-strip, .pg-section-label,
.pg-mag-grid, .pg-spotlight-grid, .pg-timeline {
padding-left: 24px; padding-right: 24px;
}
/* Content */
.pg-inner { padding: 32px 24px 72px; }
/* Timeline */
.pg-timeline { padding: 32px 24px 60px; }
.pg-timeline-item { grid-template-columns: 130px 4px 1fr; gap: 0 18px; }
/* Result sections */
.adv-section { padding: 20px 18px; }
.adv-result-header { padding: 20px 18px; }
.adv-year-grid { grid-template-columns: 1fr 1fr; }
.adv-outcome-grid { grid-template-columns: 1fr 1fr; }
/* CTA buttons wrap cleanly */
.adv-cta-row { gap: 10px; }
}
/* ─────────────────────────────────────────
SM — Phone landscape / small tablet 480–767px
───────────────────────────────────────── */
@media (max-width: 767px) {
/* Shell */
#MATIES-root { height: 100dvh; }
/* Topbar: compress */
#m-topbar { min-height: 50px; }
.m-logo-area { padding: 8px 12px; gap: 10px; }
.m-mini-crest { width: 30px; height: 30px; }
.m-uni-name { font-size: 0.9rem; }
.m-uni-dept { font-size: 0.52rem; letter-spacing: 2px; }
.m-breadcrumb { display: none; }
#m-search { display: none; }
#m-term-clock { display: none; }
#m-kbd { display: none; }
#m-back-btn { font-size: 0.6rem; padding: 0 10px; letter-spacing: 1px; }
#m-term-theme-btn { font-size: 0.58rem; padding: 3px 8px; }
/* Terminal */
#m-term-body { padding: 12px 14px; }
.m-boot-line { font-size: 0.78rem; }
#m-prompt-label, #m-prompt-input, #m-autocomplete { font-size: 0.85rem; }
/* Nav: icon + micro label, scrollable */
#m-nav-bar { height: 56px; padding: 0 4px; gap: 2px; }
.m-nav-btn { padding: 0 8px; min-width: 52px; gap: 3px; }
.m-nav-icon { font-size: 1rem; }
.m-nav-label { font-size: 0.48rem; letter-spacing: 0.5px; }
/* Page inner */
.pg-inner { padding: 24px 16px 56px; }
.pg-inner-wide { padding: 0 0 64px; }
/* Hero */
.pg-hero { padding: 28px 18px 36px; }
.pg-hero-badges { gap: 7px; margin-top: 18px; }
.pg-hero-badge { font-size: 0.8rem !important; padding: 5px 10px !important; }
/* Feature strip */
.pg-feature-strip, .pg-section-label,
.pg-mag-grid, .pg-spotlight-grid, .pg-timeline {
padding-left: 16px; padding-right: 16px;
}
.pg-feature-row { grid-template-columns: 1fr; gap: 6px; }
.pg-feature-num { display: none; }
/* Bento: 2→1 */
.pg-bento { grid-template-columns: 1fr !important; padding: 16px !important; gap: 12px !important; }
.pg-bento-cell.col3,.pg-bento-cell.col4,
.pg-bento-cell.col6,.pg-bento-cell.col2 { grid-column: 1 !important; }
/* Grids collapse */
.m-grid, .m-grid3 { grid-template-columns: 1fr; }
.m-profile-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pg-split, .pg-editorial, .pg-events-layout,
.pg-dash-layout, .pg-contact-lower { grid-template-columns: 1fr; }
.pg-split-sidebar, .pg-dash-nav { position: static; }
.pg-editorial-aside { display: none; }
.pg-contact-info-strip { grid-template-columns: 1fr; }
.pg-contact-lower-col { border-right: none; border-bottom: 1px solid var(--page-border); }
.pg-kanban { grid-template-columns: minmax(240px, 1fr); }
.prog-info-grid { grid-template-columns: 1fr !important; }
.chart-wrap-2col { grid-template-columns: 1fr !important; }
/* Timeline: simplify */
.pg-timeline { padding: 20px 16px 48px; }
.pg-timeline-item { grid-template-columns: 80px 4px 1fr; gap: 0 12px; }
.pg-tl-year { font-size: 0.72rem; }
/* Module rows */
.m-event { flex-direction: column; }
.m-ebody { border-left: none; border-top: 3px solid rgba(202,162,88,0.25); }
.m-mod-row { grid-template-columns: 84px 1fr; }
.m-mod-row .cred { display: none; }
.mod-row-main { grid-template-columns: 90px 1fr 32px; }
.mod-row-meta { display: none; }
/* Typography */
.m-p { font-size: 1rem; }
/* Stats row */
.m-stat { padding: 16px 14px; }
/* Advisor: full stack on mobile */
.adv-card-grid { grid-template-columns: 1fr; padding: 0 12px; gap: 12px; }
.adv-card-wide { grid-column: 1; }
.adv-card { padding: 24px 20px 20px; }
.adv-card-num { font-size: 2.4rem; }
.adv-chips { gap: 7px; }
.a5-chip { padding: 8px 12px; font-size: 0.82rem; }
.adv-cta-row-v5 { margin: 0 12px 32px; padding: 18px 16px; flex-direction: column; gap: 12px; }
.adv-cta-row-v5 .a5-gen-btn { width: 100%; text-align: center; }
.adv-reset-btn { width: 100%; text-align: center; }
/* Advisor result */
#advisor-result { padding: 0 12px 56px !important; }
.adv-result-header { padding: 18px 16px; }
.adv-result-title { font-size: 1.35rem; }
.adv-result-sub { font-size: 0.72rem; }
.adv-section { padding: 18px 16px; }
.adv-section-label { font-size: 0.72rem; }
.adv-year-grid { grid-template-columns: 1fr; gap: 10px; }
.adv-outcome-grid { grid-template-columns: 1fr; }
.adv-cta-row { flex-direction: column; gap: 8px; }
.adv-cta-btn { width: 100%; text-align: center; justify-content: center; }
.adv-mod-name { font-size: 0.9rem; }
.adv-mod-code { font-size: 0.82rem; }
.adv-mod-cr { font-size: 0.72rem; }
/* Graph page */
.graph-stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
.graph-toolbar { gap: 4px; }
.graph-filter-btn { font-size: 0.78rem; padding: 5px 8px; }
/* Modal */
.m-modal-box { padding: 20px 16px 24px; margin: 12px; max-height: 90svh; }
/* Kanban cards */
.pg-kanban-body { padding: 12px 10px; }
}
/* ─────────────────────────────────────────
XS — Phone portrait < 480px
───────────────────────────────────────── */
@media (max-width: 479px) {
/* Topbar: ultra compact */
.m-uni-dept { display: none; }
.m-mini-crest { width: 26px; height: 26px; }
.m-uni-name { font-size: 0.82rem; letter-spacing: 0; }
#m-back-btn { padding: 0 8px; font-size: 0.56rem; }
/* Nav: icon-only on very small */
#m-nav-bar { height: 50px; }
.m-nav-label { display: none; }
.m-nav-btn { min-width: 38px; padding: 0 5px; }
.m-nav-icon { font-size: 1.05rem; }
/* Hero */
.pg-hero { padding: 22px 14px 28px; }
/* Inner padding */
.pg-inner { padding: 16px 12px 48px; }
/* Cards */
.adv-card { padding: 20px 14px 16px; }
.adv-card-grid { padding: 0 8px; gap: 10px; }
.adv-card-num { font-size: 2rem; margin-bottom: 8px; }
.adv-card-title { font-size: 1rem; }
.adv-card-hint { font-size: 0.66rem; }
.a5-chip { padding: 7px 10px; font-size: 0.78rem; }
/* Stats */
.m-stat .num { font-size: 1.8rem; }
.graph-stats-row { grid-template-columns: 1fr 1fr; }
/* Advisor result */
.adv-result-title { font-size: 1.2rem; }
.adv-section { padding: 14px 12px; }
.adv-year-hdr { font-size: 0.95rem; padding: 8px 12px; }
.adv-year-body { padding: 10px 12px; }
.adv-outcome-card { padding: 12px 14px; }
.adv-outcome-role { font-size: 0.98rem; }
/* CTA buttons */
.adv-cta-btn { font-size: 0.72rem; padding: 12px 16px; }
.adv-cta-row-v5 { margin: 0 8px 24px; }
/* Typography */
.m-h1 { font-size: 1.5rem; }
.m-h2 { font-size: 1.05rem; }
.m-p { font-size: 0.95rem; }
/* Timeline: hide year column */
.pg-timeline-item { grid-template-columns: 0 4px 1fr; }
.pg-tl-year { display: none; }
/* Modal */
.m-modal-box { border-radius: 0; margin: 0; max-height: 95svh; padding: 16px 14px 20px; }
}
/* ─────────────────────────────────────────
Touch: larger tap targets
───────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
.a5-chip { min-height: 44px; display: flex; align-items: center; }
.adv-cta-btn { min-height: 48px; }
.m-nav-btn { min-height: 44px; }
.m-topbar-btn { min-height: 44px; }
#m-back-btn { min-height: 44px; }
.graph-filter-btn { min-height: 40px; }
.adv-mod-code { padding: 4px 2px; }
/* Disable hover-only transforms on touch */
.pg-bento-cell:hover { transform: none !important; }
.adv-card:hover { box-shadow: none; }
}
/* ─────────────────────────────────────────
Reduced motion
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.1ms !important;
}
}
/* ── Programme info grid ── */
.prog-info-grid {
display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
gap: 12px; margin-top: 16px;
}
.prog-info-box {
background: var(--page-bg2); padding: 14px 16px;
border-top: 3px solid var(--su-maroon);
}
.prog-info-box.gold { border-top-color: var(--su-gold-d); }
.prog-info-box.green { border-top-color: #1a6040; }
.prog-info-box.blue { border-top-color: #1a3a70; }
.prog-info-box.orange{ border-top-color: var(--su-orange); }
.prog-info-hdr {
font-family:'Share Tech Mono',monospace; font-size:0.63rem;
color:var(--su-gold-d); margin-bottom:8px;
text-transform:uppercase; letter-spacing:1px;
}
.prog-info-body { font-size:0.88rem; line-height:1.75; }
/* ── Curriculum accordion ── */
.curr-section { margin:12px 0; border:1px solid var(--page-border); border-radius:3px; overflow:hidden; }
.curr-hdr {
display:flex; justify-content:space-between; align-items:center;
padding:10px 14px; background:var(--page-bg2); cursor:pointer;
font-family:'Raleway',sans-serif; font-weight:700; font-size:0.82rem;
color:var(--page-maroon); user-select:none;
border-left:3px solid var(--su-maroon);
}
.curr-hdr:hover { background:var(--page-card); }
.curr-chevron { transition:transform 0.2s; font-size:0.7rem; }
.curr-hdr.open .curr-chevron { transform:rotate(90deg); }
.curr-body { display:none; padding:12px 14px 16px; }
.curr-body.visible { display:block; }
.curr-row {
display:grid; grid-template-columns:88px 1fr 60px 56px;
gap:8px; padding:6px 0; border-bottom:1px solid var(--page-border);
font-size:0.85rem; align-items:center;
}
.curr-row:last-child { border-bottom:none; }
.curr-code { font-family:'Share Tech Mono',monospace; font-size:0.74rem; color:var(--su-maroon); font-weight:700; }
.curr-sem { font-size:0.73rem; color:var(--page-text2); }
.curr-cr { font-size:0.73rem; color:var(--su-gold-d); text-align:right; }
.curr-yr-hdr {
font-family:'Share Tech Mono',monospace; font-size:0.68rem;
color:var(--su-gold-d); text-transform:uppercase; letter-spacing:1px;
padding:8px 0 4px; margin-top:4px;
}
/* ── Range sliders ── */
.m-slider-wrap { margin:14px 0 4px; }
.m-slider-label {
display:flex; justify-content:space-between; align-items:center;
font-family:'Share Tech Mono',monospace; font-size:0.68rem;
color:var(--su-gold-d); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;
}
.m-slider-val { color:var(--su-gold); font-weight:700; font-size:0.82rem; }
input[type=range] {
width:100%; -webkit-appearance:none; appearance:none;
height:4px; background:var(--page-border); border-radius:2px; outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; width:17px; height:17px; border-radius:50%;
background:var(--su-maroon); border:3px solid var(--su-gold); cursor:pointer;
}
input[type=range]::-moz-range-thumb {
width:15px; height:15px; border-radius:50%;
background:var(--su-maroon); border:3px solid var(--su-gold); cursor:pointer;
}
/* ── Chart containers ── */
.chart-container { position:relative; width:100%; height:260px; margin:14px 0; }
.chart-wrap-2col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
/* ══ DEGREE ADVISOR ══ */
.advisor-step { margin-bottom:28px; }
.advisor-step-title {
font-family:'Share Tech Mono',monospace; font-size:0.72rem;
color:var(--su-gold-d); text-transform:uppercase; letter-spacing:2px;
margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.advisor-step-title::before { content:''; display:inline-block; width:18px; height:2px; background:var(--su-maroon); }
.advisor-chip-group { display:flex; flex-wrap:wrap; gap:8px; }
.advisor-chip {
background: var(--page-bg2);
border: 2px solid var(--page-border);
color: var(--page-text);
font-family:'Raleway',sans-serif; font-size:0.85rem; font-weight:600;
padding: 8px 18px; border-radius:24px; cursor:pointer;
transition: all 0.2s; user-select:none;
}
.advisor-chip:hover { border-color:var(--su-gold); color:var(--su-gold); }
.advisor-chip.selected {
background:var(--su-maroon); border-color:var(--su-maroon);
color:var(--su-white);
box-shadow: 0 0 12px rgba(97,34,59,0.4);
}
#MATIES-root:not(.light-mode) .advisor-chip { background:#1a0d12; border-color:rgba(202,162,88,0.2); color:rgba(202,162,88,0.7); }
#MATIES-root:not(.light-mode) .advisor-chip:hover { border-color:var(--su-gold); color:var(--su-gold); }
#MATIES-root:not(.light-mode) .advisor-chip.selected { background:var(--su-maroon); border-color:var(--su-gold); color:var(--su-white); }
.advisor-generate-btn {
background: linear-gradient(135deg, var(--su-maroon), var(--su-maroon-d));
border: 2px solid var(--su-gold);
color: var(--su-gold);
font-family:'Raleway',sans-serif; font-weight:800; font-size:0.9rem;
padding:12px 32px; cursor:pointer; letter-spacing:1.5px;
text-transform:uppercase; transition:all 0.22s;
border-radius:3px; margin-top:8px;
}
.advisor-generate-btn:hover { background:var(--su-gold); color:var(--su-dark); box-shadow: 0 0 20px rgba(202,162,88,0.5); }
.advisor-result-title {
font-family:'Raleway',sans-serif; font-size:1.69rem; font-weight:800;
color:var(--page-maroon); margin-bottom:18px;
}
.advisor-rec-section { margin-bottom:20px; }
.advisor-rec-label {
font-family:'Share Tech Mono',monospace; font-size:0.85rem;
color:var(--su-gold-d); text-transform:uppercase; letter-spacing:2px;
margin-bottom:10px;
}
.advisor-mod-pill {
display:inline-flex; align-items:center; gap:6px;
background:var(--su-maroon); color:var(--su-white);
font-family:'Share Tech Mono',monospace; font-size:0.90rem;
padding:5px 12px; border-radius:3px; margin:3px;
cursor:pointer; transition:all 0.18s;
}
.advisor-mod-pill:hover { background:var(--su-gold); color:var(--su-dark); }
.advisor-track-card {
background:var(--page-bg2); border-top:3px solid var(--su-maroon);
padding:14px 18px; margin:8px 0; border-radius:0 0 4px 4px;
}
#MATIES-root:not(.light-mode) .advisor-track-card { background:#130b0e; }
/* ── ADVISOR RESULT LAYOUT ── */
.adv-result {
margin-top: 28px;
animation: mModalIn 0.3s ease;
}
.adv-result-header {
padding: 24px 28px;
background: var(--page-card);
border-left: 4px solid var(--su-gold);
border-radius: 0 4px 4px 0;
margin-bottom: 4px;
}
#MATIES-root:not(.light-mode) .adv-result-header { background: #160a0f; }
.adv-result-title {
font-family: 'Raleway', sans-serif; font-weight: 900;
font-size: 1.69rem; color: var(--page-maroon); margin-bottom: 6px;
}
#MATIES-root:not(.light-mode) .adv-result-title { color: var(--su-gold); }
.adv-result-sub {
font-family: 'Share Tech Mono', monospace; font-size: 0.81rem;
color: var(--page-text2); letter-spacing: 1px;
}
#MATIES-root:not(.light-mode) .adv-result-sub { color: rgba(202,162,88,0.55); }
.adv-result-body { display: flex; flex-direction: column; gap: 0; }
.adv-section {
padding: 24px 28px;
background: var(--page-card);
border-left: 4px solid transparent;
border-bottom: 1px solid var(--page-border);
}
.adv-section:last-child { border-bottom: none; border-radius: 0 0 4px 4px; }
#MATIES-root:not(.light-mode) .adv-section { background: #120810; border-bottom-color: rgba(202,162,88,0.08); }
.adv-section-label {
font-family: 'Share Tech Mono', monospace; font-size: 0.81rem;
color: var(--su-gold-d); text-transform: uppercase; letter-spacing: 2px;
margin-bottom: 16px; padding-bottom: 10px;
border-bottom: 1px solid var(--page-border);
}
#MATIES-root:not(.light-mode) .adv-section-label {
color: var(--su-gold);
border-bottom-color: rgba(202,162,88,0.12);
text-shadow: 0 0 8px rgba(202,162,88,0.3);
}
/* Year cards */
.adv-year-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 12px;
}
.adv-year-card {
border-radius: 4px; overflow: hidden;
border: 1px solid var(--page-border);
}
#MATIES-root:not(.light-mode) .adv-year-card { border-color: rgba(202,162,88,0.1); }
.adv-year-hdr {
font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 1.06rem;
color: #fff; padding: 10px 14px; letter-spacing: 0.3px;
}
.adv-year-body { padding: 12px 14px; background: var(--page-bg2); }
#MATIES-root:not(.light-mode) .adv-year-body { background: #0f060a; }
/* Module rows */
.adv-mod-row {
display: flex; align-items: baseline; gap: 8px;
padding: 5px 0; border-bottom: 1px solid var(--page-border); font-size: 1.06rem;
}
.adv-mod-row:last-of-type { border-bottom: none; }
#MATIES-root:not(.light-mode) .adv-mod-row { border-bottom-color: rgba(202,162,88,0.07); }
.adv-mod-code {
font-family: 'Share Tech Mono', monospace; font-size: 0.90rem;
font-weight: 700; color: var(--su-maroon); cursor: pointer;
white-space: nowrap; flex-shrink: 0;
transition: color 0.15s;
}
.adv-mod-code:hover { color: var(--su-gold); text-decoration: underline; }
#MATIES-root:not(.light-mode) .adv-mod-code { color: var(--su-gold-d); }
#MATIES-root:not(.light-mode) .adv-mod-code:hover { color: var(--su-gold); }
.adv-mod-name {
font-family: 'Raleway', sans-serif; font-size: 0.98rem;
color: var(--page-text); flex: 1; min-width: 0;
}
#MATIES-root:not(.light-mode) .adv-mod-name { color: rgba(202,162,88,0.8); }
.adv-mod-cr {
font-family: 'Share Tech Mono', monospace; font-size: 0.81rem;
color: var(--page-text2); white-space: nowrap; flex-shrink: 0;
}
/* Credit progress bar */
.adv-credit-bar {
height: 3px; background: var(--page-border); border-radius: 2px; overflow: hidden;
}
.adv-credit-fill {
height: 100%; background: var(--su-gold); border-radius: 2px;
transition: width 0.6s ease;
}
/* Outcome cards */
.adv-outcome-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px;
}
.adv-outcome-card {
background: var(--page-bg2); border-left: 4px solid var(--su-gold);
padding: 14px 16px; border-radius: 0 4px 4px 0;
}
#MATIES-root:not(.light-mode) .adv-outcome-card { background: #130b0e; }
.adv-outcome-role {
font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 1.10rem;
color: var(--page-maroon); margin-bottom: 6px;
}
#MATIES-root:not(.light-mode) .adv-outcome-role { color: var(--su-gold-l); }
.adv-outcome-salary {
font-family: 'Share Tech Mono', monospace; font-size: 0.90rem;
color: var(--su-green); margin-bottom: 3px;
}
.adv-outcome-co {
font-family: 'Share Tech Mono', monospace; font-size: 0.85rem;
color: var(--page-text2);
}
/* Skill bars */
.adv-skill-bar {
height: 6px; background: var(--page-border); border-radius: 3px; overflow: hidden;
}
.adv-skill-fill {
height: 100%; border-radius: 3px; transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1);
}
/* ══ CURRICULUM GRAPH ══ */
#curr-graph-container {
width:100%; position:relative;
background:var(--page-bg); border:1px solid var(--page-border);
border-radius:6px; overflow:hidden;
}
#MATIES-root:not(.light-mode) #curr-graph-container { background:#0a0307; border-color:rgba(202,162,88,0.1); }
.graph-toolbar {
display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; align-items:center;
}
.graph-filter-btn {
background:var(--page-bg2); border:1px solid var(--page-border);
color:var(--page-text); font-family:'Raleway',sans-serif; font-weight:700;
font-size:0.91rem; padding:6px 12px; cursor:pointer; border-radius:3px;
transition:all 0.18s; text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap;
}
.graph-filter-btn:hover,.graph-filter-btn.active {
background:var(--su-maroon); color:var(--su-white); border-color:var(--su-maroon);
box-shadow: 0 0 12px rgba(97,34,59,0.3);
}
#MATIES-root:not(.light-mode) .graph-filter-btn { background:#1a0d12; color:rgba(202,162,88,0.7); border-color:rgba(202,162,88,0.15); }
#MATIES-root:not(.light-mode) .graph-filter-btn:hover,
#MATIES-root:not(.light-mode) .graph-filter-btn.active { background:var(--su-maroon); color:var(--su-gold); border-color:var(--su-gold); }
.graph-node-tooltip {
position:absolute; pointer-events:none; z-index:200;
background:rgba(14,5,8,0.96); border:1px solid var(--su-gold);
color:var(--su-gold); font-family:'Share Tech Mono',monospace;
font-size:0.68rem; padding:10px 14px; border-radius:3px;
max-width:220px; line-height:1.6;
box-shadow: 0 4px 20px rgba(0,0,0,0.8);
display:none;
}
.graph-legend {
display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;
font-family:'Share Tech Mono',monospace; font-size:0.87rem;
padding: 10px 14px; background: var(--page-bg2); border-radius:4px;
border: 1px solid var(--page-border); align-items: center;
}
#MATIES-root:not(.light-mode) .graph-legend { background:#130b0e; border-color:rgba(202,162,88,0.1); }
.graph-legend-item { display:flex; align-items:center; gap:5px; }
.graph-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
/* Graph page layout */
.graph-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 24px;
margin-top: 16px;
}
@media (max-width: 1200px) { .graph-layout { grid-template-columns: 1fr 300px; } }
@media (max-width: 1000px) { .graph-layout { grid-template-columns: 1fr; } }
.graph-main { min-width: 0; }
.graph-sidebar {
display: flex; flex-direction: column; gap: 14px;
}
/* Graph stats bar */
.graph-stats-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px;
}
.graph-stat-chip {
background: var(--page-card); border: 1px solid var(--page-border); border-radius:4px;
padding: 12px 16px; text-align:center;
}
#MATIES-root:not(.light-mode) .graph-stat-chip { background:#160a0f; border-color:rgba(202,162,88,0.1); }
.graph-stat-chip .gsn { font-family:'Raleway',sans-serif; font-weight:800; font-size:1.5rem; color:var(--su-maroon); display:block; }
#MATIES-root:not(.light-mode) .graph-stat-chip .gsn { color:var(--su-gold); text-shadow:0 0 12px rgba(202,162,88,0.4); }
.graph-stat-chip .gsl { font-family:'Share Tech Mono',monospace; font-size:0.68rem; color:var(--su-gold-d); text-transform:uppercase; letter-spacing:1px; margin-top:3px; }
/* Graph search */
.graph-search-wrap {
position: relative; margin-bottom: 10px;
}
.graph-search-input {
width: 100%; background: var(--page-bg2); border: 1px solid var(--page-border);
border-radius: 4px; padding: 11px 16px;
font-family: 'Raleway', sans-serif; font-size: 0.95rem;
color: var(--page-text); outline: none; transition: border-color 0.2s, box-shadow 0.2s;
text-align: center;
}
.graph-search-input::placeholder {
text-align: center;
color: var(--su-gold-d);
opacity: 0.7;
}
#MATIES-root:not(.light-mode) .graph-search-input { background:#160a0f; border-color:rgba(202,162,88,0.15); color:rgba(202,162,88,0.8); }
.graph-search-input:focus { border-color: var(--su-maroon); box-shadow: 0 0 0 3px rgba(97,34,59,0.15); }
#MATIES-root:not(.light-mode) .graph-search-input:focus { border-color:var(--su-gold); box-shadow: 0 0 0 3px rgba(202,162,88,0.1); }
.graph-search-icon { display: none; }
.graph-search-results {
position: absolute; top:100%; left:0; right:0; z-index:300;
background: var(--page-card); border:1px solid var(--page-border); border-top:none;
border-radius:0 0 4px 4px; max-height:240px; overflow-y:auto;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
display:none;
}
#MATIES-root:not(.light-mode) .graph-search-results { background:#1a0d12; border-color:rgba(202,162,88,0.15); }
.graph-search-result-item {
padding:10px 16px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:3px;
border-bottom:1px solid var(--page-border); font-family:'Raleway',sans-serif; font-size:0.85rem;
transition: background 0.1s;
}
.graph-search-result-item:hover { background:rgba(97,34,59,0.06); }
#MATIES-root:not(.light-mode) .graph-search-result-item { border-color:rgba(202,162,88,0.08); color:rgba(202,162,88,0.8); }
#MATIES-root:not(.light-mode) .graph-search-result-item:hover { background:rgba(202,162,88,0.06); }
.gsri-code { font-family:'Share Tech Mono',monospace; font-size:0.72rem; color:var(--su-maroon); font-weight:700; min-width:54px; }
#MATIES-root:not(.light-mode) .gsri-code { color:var(--su-gold); }
/* Sidebar panels */
.graph-panel {
background: var(--page-card); border:1px solid var(--page-border);
border-radius:5px; overflow:hidden;
}
#MATIES-root:not(.light-mode) .graph-panel { background:#160a0f; border-color:rgba(202,162,88,0.1); }
.graph-panel-header {
background: var(--su-maroon); color:var(--su-white);
padding: 12px 18px; font-family:'Raleway',sans-serif;
font-weight:800; font-size:1rem; letter-spacing:1px; text-transform:uppercase;
display:flex; align-items:center; gap:8px;
}
.graph-panel-body { padding:18px; }
/* Track breakdown bars */
.track-bar-row { margin-bottom:13px; }
.track-bar-label { display:flex; justify-content:space-between; font-family:'Share Tech Mono',monospace; font-size:0.88rem; color:var(--su-gold-d); margin-bottom:5px; }
.track-bar-bg { background:rgba(202,162,88,0.1); border-radius:2px; height:9px; overflow:hidden; }
.track-bar-fill { height:100%; border-radius:2px; transition:width 0.6s ease, background 0.3s ease, box-shadow 0.3s ease; }
.track-bar-row { transition:opacity 0.3s ease; }
/* Selected module detail panel */
.graph-module-detail {
background: var(--page-card); border:1px solid var(--page-border);
border-radius:5px; padding:20px; display:block;
}
#MATIES-root:not(.light-mode) .graph-module-detail { background:#160a0f; border-color:rgba(202,162,88,0.1); }
.graph-module-detail.visible { animation:mModalIn 0.2s ease; }
.gmd-code { font-family:'Share Tech Mono',monospace; font-size:1.05rem; color:var(--su-gold-d); letter-spacing:1.5px; margin-bottom:5px; }
.gmd-name { font-family:'Raleway',sans-serif; font-weight:800; font-size:1.35rem; color:var(--su-maroon); margin-bottom:14px; line-height:1.3; }
#MATIES-root:not(.light-mode) .gmd-name { color:var(--su-gold); }
.gmd-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.gmd-meta-box { background:var(--page-bg2); border-radius:3px; padding:10px 12px; text-align:center; }
#MATIES-root:not(.light-mode) .gmd-meta-box { background:#130b0e; }
.gmd-meta-val { font-family:'Raleway',sans-serif; font-weight:800; font-size:1.45rem; color:var(--su-maroon); }
#MATIES-root:not(.light-mode) .gmd-meta-val { color:var(--su-gold); }
.gmd-meta-lbl { font-family:'Share Tech Mono',monospace; font-size:0.78rem; color:var(--su-gold-d); text-transform:uppercase; letter-spacing:1px; margin-top:3px; }
.gmd-section-lbl { font-family:'Share Tech Mono',monospace; font-size:0.85rem; color:var(--su-gold-d); text-transform:uppercase; letter-spacing:1px; margin:13px 0 6px; }
.gmd-chips { display:flex; flex-wrap:wrap; gap:5px; }
.gmd-chip { font-family:'Share Tech Mono',monospace; font-size:0.88rem; padding:6px 13px; border-radius:2px; cursor:pointer; background:rgba(97,34,59,0.1); color:var(--su-maroon); border:1px solid rgba(97,34,59,0.2); transition:background 0.15s; }
.gmd-chip:hover { background:var(--su-maroon); color:#fff; }
#MATIES-root:not(.light-mode) .gmd-chip { background:rgba(202,162,88,0.08); color:var(--su-gold); border-color:rgba(202,162,88,0.15); }
#MATIES-root:not(.light-mode) .gmd-chip:hover { background:var(--su-maroon); color:var(--su-gold); }
/* Graph zoom controls */
.graph-controls {
position:absolute; bottom:14px; right:14px; z-index:100;
display:flex; flex-direction:column; gap:4px;
}
.graph-ctrl-btn {
background:var(--su-maroon); border:1px solid var(--su-gold); color:var(--su-gold);
font-family:'Share Tech Mono',monospace; font-size:1rem; width:34px; height:34px;
cursor:pointer; border-radius:3px; display:flex; align-items:center; justify-content:center;
transition: all 0.18s; line-height:1;
}
.graph-ctrl-btn:hover { background:var(--su-gold); color:var(--su-dark); }
/* Graph mini-map overview */
.graph-complexity-indicator {
display: flex; gap: 6px; align-items:center; flex-wrap:wrap; margin-bottom: 14px;
}
.gci-badge {
font-family:'Share Tech Mono',monospace; font-size:0.87rem; padding:4px 10px;
border-radius:20px; letter-spacing:0.5px;
}
.gci-badge.green { background:rgba(26,96,64,0.15); color:var(--su-green); border:1px solid rgba(130,204,174,0.25); }
.gci-badge.gold { background:rgba(202,162,88,0.12); color:var(--su-gold); border:1px solid rgba(202,162,88,0.25); }
.gci-badge.red { background:rgba(220,68,5,0.1); color:#f08040; border:1px solid rgba(220,68,5,0.2); }
.gci-badge.blue { background:rgba(26,58,112,0.15); color:#5a8ae0; border:1px solid rgba(26,58,112,0.25); }
/* Prerequisite path heatmap row */
.graph-heatmap-row {
display: flex; gap: 3px; flex-wrap:wrap; margin-bottom: 8px;
}
.hm-cell {
width:28px; height:28px; border-radius:3px; display:flex; align-items:center; justify-content:center;
font-family:'Share Tech Mono',monospace; font-size:0.52rem; cursor:pointer;
transition: transform 0.1s, box-shadow 0.1s;
border:1px solid transparent;
}
.hm-cell:hover { transform:scale(1.15); box-shadow:0 2px 8px rgba(0,0,0,0.3); border-color:var(--su-gold); z-index:10; position:relative; }
/* ══ HACKATHON EASTER EGG ══ */
#hackathon-overlay {
position:fixed; inset:0; z-index:9999;
display:none; flex-direction:column;
align-items:center; justify-content:center;
background:rgba(14,5,8,0.97);
pointer-events:none;
}
#hackathon-overlay.active { display:flex; pointer-events:all; }
.hack-badge {
font-family:'VT323',monospace; font-size:3.5rem;
color:var(--su-gold); text-shadow: 0 0 30px rgba(202,162,88,0.8), 0 0 60px rgba(202,162,88,0.4);
animation: hackGlow 1s ease-in-out infinite alternate;
text-align:center; line-height:1.1;
}
@keyframes hackGlow { from{ text-shadow:0 0 20px rgba(202,162,88,0.6);} to{ text-shadow:0 0 60px rgba(202,162,88,1),0 0 100px rgba(97,34,59,0.8);} }
.hack-sub { font-family:'Share Tech Mono',monospace; font-size:1rem; color:var(--su-green); margin-top:12px; animation:hackGlow 1.5s ease-in-out infinite alternate; }
.hack-stats {
display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
margin-top:32px; width:min(480px,90vw);
}
.hack-stat {
background:rgba(97,34,59,0.3); border:1px solid var(--su-gold);
padding:16px; text-align:center; border-radius:3px;
animation: mBootFade 0.4s forwards; opacity:0;
}
.hack-stat .num { font-family:'VT323',monospace; font-size:2.2rem; color:var(--su-gold); display:block; }
.hack-stat .lbl { font-family:'Share Tech Mono',monospace; font-size:0.6rem; color:rgba(202,162,88,0.6); text-transform:uppercase; letter-spacing:1px; }
.hack-dismiss { margin-top:28px; font-family:'Share Tech Mono',monospace; font-size:0.75rem; color:rgba(202,162,88,0.45); cursor:pointer; }
.hack-dismiss:hover { color:var(--su-gold); }
.hack-achievement {
display:inline-block; background:linear-gradient(135deg,#b8860b,#ffd700,#b8860b);
color:#1a0d00; font-family:'Raleway',sans-serif; font-weight:800;
font-size:0.75rem; padding:8px 20px; border-radius:20px;
margin-top:16px; letter-spacing:1px; text-transform:uppercase;
animation:hackBounce 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
@keyframes hackBounce { 0%{transform:scale(0) rotate(-10deg);} 100%{transform:scale(1) rotate(0deg);} }
/* ══ ENHANCED GLITCH ══ */
@keyframes mGlitchStrong {
0% { opacity:1; transform:translateX(0); clip-path:none; }
10% { opacity:0.8; transform:translateX(-4px); clip-path:inset(20% 0 45% 0); }
20% { opacity:0.9; transform:translateX(5px); clip-path:inset(58% 0 12% 0); }
30% { opacity:0.7; transform:translateX(-6px); clip-path:inset(8% 0 68% 0); }
40% { opacity:1; transform:translateX(4px); clip-path:inset(72% 0 6% 0); }
50% { opacity:0.85;transform:translateX(-3px); clip-path:inset(35% 0 42% 0); }
65% { opacity:0.6; transform:translateX(2px); clip-path:inset(14% 0 74% 0); }
80% { opacity:0.3; transform:translateX(-1px); clip-path:inset(50% 0 30% 0); }
100%{ opacity:1; transform:translateX(0); clip-path:none; }
}
#m-glitch.strong-glitch { animation: mGlitchStrong 0.35s steps(1) forwards !important; }
/* ══ BOOT SCREEN ══ */
#m-boot {
position:absolute;inset:0;
background:#0e0508;
display:flex;flex-direction:column;align-items:center;justify-content:center;
z-index:100;transition:opacity 0.8s ease;
gap:0;
}
#m-boot.fade-out { opacity:0;pointer-events:none; }
/* ══ BOOT LOGO ══ */
#boot-logo-wrap {
width:120px;height:auto;
margin-bottom:28px;
opacity:0;
animation:bootLogoIn 0.6s ease 0.1s forwards;
filter:drop-shadow(0 0 20px rgba(202,162,88,0.5));
}
@keyframes bootLogoIn {
from{opacity:0;transform:translateY(-10px) scale(0.9);}
to{opacity:1;transform:translateY(0) scale(1);}
}
/* ══ STELLENBOSCH WHITE NAME ANIMATION ══ */
#boot-su-name {
font-family:'Raleway',sans-serif;
font-weight:800;
font-size:clamp(1.1rem,3vw,1.6rem);
letter-spacing:0.28em;
text-transform:uppercase;
color:#ffffff;
margin-bottom:4px;
opacity:0;
clip-path:inset(0 100% 0 0);
animation:revealName 0.8s cubic-bezier(0.77,0,0.175,1) 0.5s forwards;
text-shadow:0 0 30px rgba(255,255,255,0.4), 0 0 60px rgba(255,255,255,0.15);
white-space:nowrap;
}
@keyframes revealName {
0% { opacity:1; clip-path:inset(0 100% 0 0); }
100%{ opacity:1; clip-path:inset(0 0% 0 0); }
}
#boot-dept-name {
font-family:'Share Tech Mono',monospace;
font-size:clamp(0.58rem,1.4vw,0.78rem);
letter-spacing:0.18em;
text-transform:uppercase;
color:rgba(202,162,88,0.75);
margin-bottom:36px;
opacity:0;
animation:fadeSlideUp 0.5s ease 1.1s forwards;
}
@keyframes fadeSlideUp {
from{opacity:0;transform:translateY(8px);}
to{opacity:1;transform:translateY(0);}
}
/* ══ BOOT BOX — fixed spacing ══ */
#boot-box {
border:1px solid rgba(202,162,88,0.3);
background:rgba(202,162,88,0.04);
border-radius:2px;
padding:20px 32px 18px;
width:min(580px,90vw);
font-family:'Share Tech Mono',monospace;
font-size:clamp(0.65rem,1.5vw,0.82rem);
line-height:1.7;
color:rgba(202,162,88,0.85);
opacity:0;
animation:fadeSlideUp 0.5s ease 1.3s forwards;
}
#boot-box .box-top {
display:flex;align-items:center;gap:10px;
border-bottom:1px solid rgba(202,162,88,0.2);
padding-bottom:10px;margin-bottom:12px;
}
#boot-box .box-top .box-title {
font-weight:700;color:#caa258;letter-spacing:0.12em;font-size:0.9em;
}
#boot-box .box-top .box-sub {
color:rgba(202,162,88,0.5);font-size:0.82em;margin-left:auto;letter-spacing:0.08em;
}
#boot-box .box-line { display:flex;align-items:baseline;gap:8px; }
#boot-box .box-line .label { color:rgba(202,162,88,0.5);min-width:90px; }
#boot-box .box-line .val { color:#caa258; }
/* ══ BOOT PROGRESS ══ */
#boot-progress-wrap {
width:min(580px,90vw);
margin-top:24px;
opacity:0;
animation:fadeSlideUp 0.4s ease 0.8s forwards;
}
#boot-progress-bar {
height:2px;background:rgba(202,162,88,0.12);border-radius:2px;overflow:hidden;
margin-bottom:8px;
}
#boot-progress-fill {
height:100%;width:0%;
background:linear-gradient(90deg,var(--su-maroon),var(--su-gold));
transition:width 0.25s ease;
box-shadow:0 0 8px rgba(202,162,88,0.5);
}
#boot-progress-text {
font-family:'Share Tech Mono',monospace;font-size:0.7rem;
color:rgba(202,162,88,0.5);letter-spacing:0.08em;
display:flex;justify-content:space-between;
}
/* ══ BOOT MESSAGES ══ */
#boot-msgs {
width:min(580px,90vw);
margin-top:14px;min-height:64px;
font-family:'Share Tech Mono',monospace;font-size:0.68rem;
line-height:1.6;color:rgba(202,162,88,0.45);
opacity:0;animation:fadeSlideUp 0.4s ease 1.0s forwards;
}
.boot-msg { animation:msgIn 0.2s ease forwards; }
@keyframes msgIn { from{opacity:0;transform:translateX(-4px);}to{opacity:1;} }
.boot-msg.ok { color:var(--term-green); }
.boot-msg.warn { color:var(--su-orange); }
.boot-msg.info { color:rgba(202,162,88,0.45); }
/* ══ TERMINAL SHELL ══ */
/* ╔══════════════════════════════════════════════════════════════╗
║ VISUAL EXCELLENCE UPGRADE v3 — Luxury Editorial Dark ║
║ Playfair Display headings · grain overlay · gold shimmer ║
║ Cinematic animations · refined spacing · micro-details ║
╚══════════════════════════════════════════════════════════════╝ */
/* ── GRAIN TEXTURE OVERLAY on page content ── */
#m-content::before {
content: '';
position: fixed; inset: 0; z-index: 0; pointer-events: none;
opacity: 0.025;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
background-size: 200px 200px;
}
/* ── TOPBAR — luxury bar with shimmer accent ── */
#m-topbar {
background: linear-gradient(90deg, #2a0a18 0%, #3d1224 35%, var(--su-maroon) 65%, #4e1a30 100%) !important;
border-bottom: none !important;
box-shadow: 0 1px 0 rgba(202,162,88,0.15), 0 2px 0 rgba(202,162,88,0.06), 0 4px 24px rgba(0,0,0,0.4);
min-height: 64px !important;
}
#m-topbar::after {
background: linear-gradient(90deg, transparent 0%, rgba(202,162,88,0.9) 30%, #fff9e6 50%, rgba(202,162,88,0.9) 70%, transparent 100%) !important;
height: 1px !important;
}
#m-topbar::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(ellipse at 75% 50%, rgba(202,162,88,0.07) 0%, transparent 60%);
pointer-events: none;
}
/* ── LOGO AREA — refined wordmark ── */
.m-logo-area {
padding: 12px 28px !important;
border-right: 1px solid rgba(202,162,88,0.12) !important;
gap: 16px !important;
}
.m-uni-name {
font-size: 0.95rem !important;
letter-spacing: 2px !important;
font-weight: 900 !important;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.m-uni-dept {
font-size: 0.58rem !important;
letter-spacing: 3px !important;
color: var(--su-gold) !important;
opacity: 1 !important;
}
/* ── NAV BAR — elevated with pill active states ── */
#m-nav-bar {
background: linear-gradient(180deg, #1a0810 0%, #120509 100%) !important;
border-bottom: 1px solid rgba(202,162,88,0.12) !important;
padding: 0 24px !important;
gap: 2px !important;
height: 64px !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.m-nav-btn {
border-bottom: none !important;
border-radius: 6px !important;
color: rgba(202,162,88,0.38) !important;
font-size: 0.62rem !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
padding: 0 16px !important;
transition: all 0.22s cubic-bezier(0.4,0,0.2,1) !important;
margin: 12px 0 !important;
height: calc(100% - 24px) !important;
position: relative;
}
.m-nav-btn::before {
content: '';
position: absolute; inset: 0;
border-radius: 6px;
background: transparent;
transition: background 0.22s;
}
.m-nav-btn:hover {
color: rgba(202,162,88,0.85) !important;
background: rgba(202,162,88,0.07) !important;
transform: translateY(-1px);
}
.m-nav-btn.active {
background: linear-gradient(135deg, rgba(97,34,59,0.8) 0%, rgba(74,22,44,0.9) 100%) !important;
color: var(--su-gold) !important;
font-weight: 800 !important;
box-shadow: 0 0 0 1px rgba(202,162,88,0.25), 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(202,162,88,0.15) !important;
transform: translateY(-1px);
}
.m-nav-icon { font-size: 1.05rem !important; }
.m-nav-label { font-size: 0.56rem !important; letter-spacing: 1.3px !important; }
/* ── PAGE LOAD ANIMATION — staggered reveal ── */
@keyframes pgReveal {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pgRevealLeft {
from { opacity: 0; transform: translateX(-14px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes goldPulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes lineGrow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes countUp {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
/* Apply reveal to all page inner wrappers */
.pg-inner, .pg-inner-wide {
animation: pgReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* ── HERO BANNER — cinematic upgrade ── */
.pg-hero {
background: linear-gradient(135deg, #1a0510 0%, #2d0e1e 30%, var(--su-maroon) 65%, #4e1830 100%) !important;
padding: 80px 88px 88px !important;
border-bottom: none !important;
position: relative; overflow: hidden;
}
/* Animated diagonal texture lines */
.pg-hero::before {
content: '';
position: absolute; inset: 0;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 60px,
rgba(202,162,88,0.02) 60px,
rgba(202,162,88,0.02) 61px
);
pointer-events: none;
}
/* Gold accent orb */
.pg-hero::after {
content: '';
position: absolute; top: -80px; right: -80px;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(202,162,88,0.08) 0%, transparent 65%);
pointer-events: none;
}
/* Gold rule under eyebrow */
.pg-hero-eyebrow {
font-size: 1.09rem !important;
letter-spacing: 4px !important;
color: var(--su-gold) !important;
opacity: 0.75;
position: relative;
animation: pgReveal 0.5s 0.05s both;
}
.pg-hero-eyebrow::before {
content: '';
display: inline-block; width: 28px; height: 1px;
background: var(--su-gold); opacity: 0.5;
vertical-align: middle; margin-right: 12px;
transform-origin: left;
animation: lineGrow 0.6s 0.2s cubic-bezier(0.22,1,0.36,1) both;
}
.pg-hero h1 {
font-family: 'Playfair Display', 'Raleway', serif !important;
font-size: clamp(2.8rem, 5vw, 4.2rem) !important;
font-weight: 900 !important;
letter-spacing: -2px !important;
line-height: 1.03 !important;
color: #fff !important;
text-shadow: 0 2px 32px rgba(0,0,0,0.3);
animation: pgReveal 0.55s 0.1s both;
}
.pg-hero-sub {
font-weight: 300 !important;
font-size: 1.1rem !important;
color: rgba(255,255,255,0.6) !important;
letter-spacing: 0.2px;
animation: pgReveal 0.55s 0.18s both;
}
.pg-hero-badges {
animation: pgReveal 0.55s 0.26s both;
}
.pg-hero-badge {
background: rgba(202,162,88,0.08) !important;
border: 1px solid rgba(202,162,88,0.22) !important;
backdrop-filter: blur(4px);
transition: all 0.22s;
font-size: 1.04rem !important;
}
.pg-hero-badge:hover {
background: rgba(202,162,88,0.18) !important;
border-color: rgba(202,162,88,0.5) !important;
transform: translateY(-1px);
}
/* Gold bottom rule on hero */
.pg-hero-rule {
position: absolute; bottom: 0; left: 88px; right: 88px; height: 1px;
background: linear-gradient(90deg, rgba(202,162,88,0.8), rgba(202,162,88,0.2), transparent);
transform-origin: left;
animation: lineGrow 1s 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
/* ── BENTO CELLS — elevated glass cards ── */
.pg-bento {
padding: 52px 88px !important;
gap: 20px !important;
}
.pg-bento-cell {
border-radius: 14px !important;
padding: 36px 32px !important;
border: 1px solid transparent !important;
position: relative; overflow: hidden;
transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s !important;
animation: pgReveal 0.5s both;
}
.pg-bento-cell::after {
content: '';
position: absolute; inset: 0;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 50%);
pointer-events: none;
}
.pg-bento-cell:hover {
transform: translateY(-5px) scale(1.01) !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(202,162,88,0.12) !important;
}
#MATIES-root:not(.light-mode) .pg-bento-cell {
background: #16090e !important;
border-color: rgba(202,162,88,0.08) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
#MATIES-root:not(.light-mode) .pg-bento-cell:hover {
box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(202,162,88,0.2), 0 0 40px rgba(202,162,88,0.04) !important;
}
.pg-bento-cell.maroon {
background: linear-gradient(135deg, #2a0c1c 0%, #3d1226 60%, #4e1830 100%) !important;
border-color: rgba(202,162,88,0.15) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.3);
}
.pg-bento-num {
font-family: 'Playfair Display', serif !important;
font-size: 4.4rem !important;
font-weight: 900 !important;
letter-spacing: -3px !important;
background: linear-gradient(135deg, var(--su-gold-l) 0%, var(--su-gold) 50%, var(--su-gold-d) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
animation: countUp 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
.pg-bento-num.white {
background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.pg-bento-lbl {
font-size: 0.65rem !important;
letter-spacing: 2px !important;
margin-top: 14px !important;
opacity: 0.65;
}
/* ── SECTION LABELS — more authority ── */
.pg-section-label {
font-size: 0.96rem !important;
letter-spacing: 4px !important;
color: rgba(97,34,59,0.5) !important;
margin-top: 64px !important;
padding: 0 88px !important;
}
#MATIES-root:not(.light-mode) .pg-section-label { color: rgba(202,162,88,0.35) !important; }
.pg-section-label::before {
content: '▸';
color: var(--su-gold); opacity: 0.5;
margin-right: 8px; font-size: 0.8rem;
}
.pg-section-label::after { background: rgba(97,34,59,0.1) !important; }
#MATIES-root:not(.light-mode) .pg-section-label::after { background: rgba(202,162,88,0.1) !important; }
/* ── MAGAZINE GRID — editorial upgrade ── */
.pg-mag-grid { padding: 0 88px 60px !important; gap: 0; }
.pg-mag-card {
padding: 40px 36px !important;
position: relative;
transition: background 0.25s, transform 0.25s !important;
}
.pg-mag-card::after {
content: '→';
position: absolute; bottom: 28px; right: 28px;
font-size: 1.1rem; color: rgba(97,34,59,0.2);
transition: all 0.25s; transform: translateX(-4px);
}
.pg-mag-card:hover::after {
color: var(--su-maroon); transform: translateX(0);
opacity: 1;
}
#MATIES-root:not(.light-mode) .pg-mag-card::after { color: rgba(202,162,88,0.15); }
#MATIES-root:not(.light-mode) .pg-mag-card:hover::after { color: var(--su-gold); }
.pg-mag-avatar {
width: 72px !important; height: 72px !important;
background: linear-gradient(135deg, #2a0c1c, #4e1830) !important;
box-shadow: 0 6px 20px rgba(97,34,59,0.35), inset 0 1px 0 rgba(202,162,88,0.15) !important;
font-size: 1.6rem !important;
transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.pg-mag-card:hover .pg-mag-avatar { transform: scale(1.08); }
.pg-mag-name {
font-family: 'Playfair Display', serif !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
letter-spacing: -0.3px !important;
}
.pg-mag-role {
font-size: 0.58rem !important;
letter-spacing: 2px !important;
color: var(--su-gold-d) !important;
opacity: 0.8;
}
/* ── FEATURE STRIP — bolder numbers ── */
.pg-feature-strip { padding: 0 88px 60px !important; }
.pg-feature-num {
font-family: 'Playfair Display', serif !important;
font-size: 3.5rem !important;
color: rgba(97,34,59,0.12) !important;
font-style: italic !important;
}
#MATIES-root:not(.light-mode) .pg-feature-num { color: rgba(202,162,88,0.1) !important; }
/* ── Fallout/CRT phosphor glow on FAQ numbers (dark mode only) ── */
#MATIES-root:not(.light-mode) .pg-feature-strip .pg-feature-num {
color: rgba(202,162,88,0.72) !important;
text-shadow:
0 0 6px rgba(202,162,88,0.9),
0 0 18px rgba(202,162,88,0.55),
0 0 40px rgba(202,162,88,0.25),
0 0 80px rgba(202,162,88,0.1);
animation: crtNumFlicker 8s ease-in-out infinite;
will-change: opacity, text-shadow;
}
@keyframes crtNumFlicker {
0% { opacity: 0.85; text-shadow: 0 0 6px rgba(202,162,88,0.9), 0 0 18px rgba(202,162,88,0.55), 0 0 40px rgba(202,162,88,0.25); }
8% { opacity: 0.72; text-shadow: 0 0 4px rgba(202,162,88,0.7), 0 0 12px rgba(202,162,88,0.4); }
9% { opacity: 0.92; text-shadow: 0 0 8px rgba(202,162,88,1.0), 0 0 22px rgba(202,162,88,0.65), 0 0 50px rgba(202,162,88,0.3); }
10% { opacity: 0.78; }
40% { opacity: 0.88; text-shadow: 0 0 6px rgba(202,162,88,0.88), 0 0 18px rgba(202,162,88,0.5), 0 0 40px rgba(202,162,88,0.22); }
55% { opacity: 0.68; text-shadow: 0 0 3px rgba(202,162,88,0.6), 0 0 10px rgba(202,162,88,0.3); }
56% { opacity: 0.90; text-shadow: 0 0 7px rgba(202,162,88,0.95), 0 0 20px rgba(202,162,88,0.6), 0 0 45px rgba(202,162,88,0.28); }
57% { opacity: 0.75; }
100% { opacity: 0.85; text-shadow: 0 0 6px rgba(202,162,88,0.9), 0 0 18px rgba(202,162,88,0.55), 0 0 40px rgba(202,162,88,0.25); }
}
/* Each number gets a slightly different flicker phase so they don't all pulse together */
#MATIES-root:not(.light-mode) .pg-feature-strip .pg-feature-row:nth-child(2) .pg-feature-num { animation-delay: -1.2s; }
#MATIES-root:not(.light-mode) .pg-feature-strip .pg-feature-row:nth-child(3) .pg-feature-num { animation-delay: -2.7s; }
#MATIES-root:not(.light-mode) .pg-feature-strip .pg-feature-row:nth-child(4) .pg-feature-num { animation-delay: -4.1s; }
#MATIES-root:not(.light-mode) .pg-feature-strip .pg-feature-row:nth-child(5) .pg-feature-num { animation-delay: -0.8s; }
#MATIES-root:not(.light-mode) .pg-feature-strip .pg-feature-row:nth-child(6) .pg-feature-num { animation-delay: -3.3s; }
#MATIES-root:not(.light-mode) .pg-feature-strip .pg-feature-row:nth-child(7) .pg-feature-num { animation-delay: -5.6s; }
.pg-feature-title {
font-family: 'Playfair Display', serif !important;
font-size: 1.4rem !important;
font-weight: 700 !important;
font-style: italic;
color: var(--page-maroon) !important;
}
#MATIES-root:not(.light-mode) .pg-feature-title { color: rgba(202,162,88,0.85) !important; }
.pg-feature-body { font-size: 0.95rem !important; line-height: 1.9 !important; font-weight: 400; }
.pg-feature-row {
transition: background 0.22s, padding 0.22s !important;
}
/* ── SPLIT PANE — sidebar refinement ── */
.pg-split-sidebar {
padding: 44px 28px !important;
background: var(--page-bg2) !important;
}
.pg-split-main { padding: 52px 64px 80px !important; }
.pg-sidebar-label {
letter-spacing: 3px !important;
font-size: 0.58rem !important;
opacity: 0.6;
}
.pg-sidebar-link {
font-size: 0.85rem !important;
padding: 10px 14px !important;
border-radius: 6px !important;
border-left: 2px solid transparent !important;
transition: all 0.18s !important;
}
.pg-sidebar-link:hover, .pg-sidebar-link.active {
border-left-color: var(--su-gold-d) !important;
background: rgba(97,34,59,0.06) !important;
padding-left: 18px !important;
}
#MATIES-root:not(.light-mode) .pg-sidebar-link:hover,
#MATIES-root:not(.light-mode) .pg-sidebar-link.active {
background: rgba(202,162,88,0.07) !important;
}
/* ── TIMELINE — more dramatic ── */
.pg-timeline { padding: 0 88px 80px !important; }
.pg-tl-item {
transition: transform 0.25s, opacity 0.25s;
animation: pgRevealLeft 0.5s both;
}
.pg-tl-dot {
box-shadow: 0 0 0 4px rgba(202,162,88,0.15), 0 0 16px rgba(202,162,88,0.3) !important;
}
.pg-tl-card {
border-radius: 12px !important;
padding: 36px 40px !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(97,34,59,0.06) !important;
transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s !important;
}
.pg-tl-card:hover {
transform: translateX(6px) !important;
box-shadow: 0 8px 40px rgba(0,0,0,0.14), 0 0 0 1px rgba(97,34,59,0.1) !important;
}
#MATIES-root:not(.light-mode) .pg-tl-card {
background: #16090e !important;
border-color: rgba(202,162,88,0.1) !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
#MATIES-root:not(.light-mode) .pg-tl-card:hover {
box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(202,162,88,0.15), 0 0 32px rgba(202,162,88,0.04) !important;
}
.pg-tl-year {
font-family: 'Playfair Display', serif !important;
font-size: 1.39rem !important;
font-style: italic !important;
letter-spacing: 0.3px !important;
line-height: 1.55 !important;
word-break: normal !important;
overflow-wrap: normal !important;
white-space: nowrap !important;
}
.pg-tl-title {
font-family: 'Playfair Display', serif !important;
font-size: 1.4rem !important;
font-weight: 700 !important;
letter-spacing: -0.3px !important;
}
/* ── KANBAN CARDS — course cards ── */
.pg-kan-col {
border-radius: 12px !important;
box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
}
#MATIES-root:not(.light-mode) .pg-kan-col {
background: #110609 !important;
border-color: rgba(202,162,88,0.08) !important;
}
.pg-kan-card {
border-radius: 8px !important;
transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s, border-color 0.22s !important;
}
.pg-kan-card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}
#MATIES-root:not(.light-mode) .pg-kan-card {
background: #1a0910 !important;
}
#MATIES-root:not(.light-mode) .pg-kan-card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
.pg-kan-code {
font-size: 0.58rem !important;
letter-spacing: 1.5px !important;
}
/* ── SPOTLIGHT GRID — research ── */
.pg-spotlight-grid { gap: 24px !important; padding: 0 88px 80px !important; }
.pg-spotlight-card {
border-radius: 14px !important;
padding: 44px 40px !important;
transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s, border-color 0.28s !important;
border: 1px solid rgba(97,34,59,0.08) !important;
position: relative; overflow: hidden;
}
.pg-spotlight-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--su-gold), transparent);
opacity: 0;
transition: opacity 0.28s;
}
.pg-spotlight-card:hover::before { opacity: 0.6; }
.pg-spotlight-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 24px 60px rgba(0,0,0,0.13), 0 0 0 1px rgba(97,34,59,0.12) !important;
border-color: rgba(97,34,59,0.18) !important;
}
#MATIES-root:not(.light-mode) .pg-spotlight-card {
background: #15080d !important;
border-color: rgba(202,162,88,0.07) !important;
}
#MATIES-root:not(.light-mode) .pg-spotlight-card:hover {
border-color: rgba(202,162,88,0.2) !important;
box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(202,162,88,0.15), 0 0 60px rgba(202,162,88,0.03) !important;
}
.pg-spotlight-icon {
font-size: 2.4rem !important;
margin-bottom: 24px !important;
display: block;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.pg-spotlight-card:hover .pg-spotlight-icon { transform: scale(1.12) translateY(-2px); }
.pg-spotlight-name {
font-family: 'Playfair Display', serif !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
letter-spacing: -0.3px !important;
}
/* ── EVENTS LAYOUT — more drama ── */
.pg-event-date-block {
border-radius: 10px !important;
background: linear-gradient(135deg, #2a0c1c, #4e1830) !important;
box-shadow: 0 4px 20px rgba(97,34,59,0.25), inset 0 1px 0 rgba(202,162,88,0.1) !important;
transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.pg-event-item:hover .pg-event-date-block { transform: scale(1.05); }
.pg-event-day {
font-family: 'Playfair Display', serif !important;
font-size: 3rem !important;
letter-spacing: -2px !important;
}
/* ── DASHBOARD (students) ── */
.pg-dash-sidebar {
background: var(--page-bg2) !important;
border-right: 1px solid rgba(97,34,59,0.08) !important;
}
#MATIES-root:not(.light-mode) .pg-dash-sidebar { background: #110609 !important; border-color: rgba(202,162,88,0.08) !important; }
.pg-dash-nav-item {
border-radius: 8px !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
transition: all 0.18s !important;
border-left: 2px solid transparent !important;
}
.pg-dash-nav-item:hover, .pg-dash-nav-item.active {
border-left-color: var(--su-gold-d) !important;
}
/* ── CONTACT MAP ── */
.pg-contact-map-hero {
box-shadow: 0 8px 40px rgba(0,0,0,0.2);
}
/* ── PUBLICATION CARDS ── */
.pg-pub-entry {
border-radius: 10px !important;
border-left: 2px solid transparent !important;
transition: all 0.22s !important;
padding: 20px 24px !important;
}
.pg-pub-entry:hover {
border-left-color: var(--su-gold-d) !important;
background: rgba(97,34,59,0.03) !important;
transform: translateX(4px);
}
#MATIES-root:not(.light-mode) .pg-pub-entry:hover {
background: rgba(202,162,88,0.03) !important;
border-left-color: var(--su-gold) !important;
}
.pg-pub-title {
font-family: 'Playfair Display', serif !important;
font-style: italic !important;
font-size: 0.98rem !important;
}
/* ── BACK BUTTON ── */
#m-back-btn {
font-family: 'Share Tech Mono', monospace !important;
font-size: 0.6rem !important;
letter-spacing: 2px !important;
color: rgba(202,162,88,0.7) !important;
background: transparent !important;
border-left: 1px solid rgba(202,162,88,0.12) !important;
transition: all 0.22s !important;
}
#m-back-btn:hover {
color: var(--su-gold) !important;
background: rgba(202,162,88,0.06) !important;
}
#m-back-btn::before { content: '← '; opacity: 0.6; }
/* ── TOPBAR BUTTONS ── */
.m-topbar-btn {
font-size: 0.6rem !important;
letter-spacing: 1.5px !important;
color: rgba(202,162,88,0.45) !important;
border-left: 1px solid rgba(202,162,88,0.08) !important;
transition: all 0.22s !important;
}
.m-topbar-btn:hover {
color: rgba(202,162,88,0.85) !important;
background: rgba(202,162,88,0.05) !important;
}
/* ── SEARCH INPUT ── */
#m-search {
background: rgba(0,0,0,0.3) !important;
border: 1px solid rgba(202,162,88,0.15) !important;
border-radius: 4px !important;
font-size: 0.65rem !important;
color: rgba(202,162,88,0.85) !important;
transition: all 0.25s !important;
}
#m-search:focus {
border-color: rgba(202,162,88,0.4) !important;
background: rgba(0,0,0,0.45) !important;
box-shadow: 0 0 0 3px rgba(202,162,88,0.06) !important;
width: 185px !important;
}
/* ── PAGE VIEW CONTAINER ── */
#m-page {
background: var(--page-bg);
}
/* Subtle warm gradient behind all content */
#MATIES-root:not(.light-mode) #m-page {
background: #0e0508 !important;
}
#MATIES-root:not(.light-mode) #m-content {
background: #0e0508 !important;
}
/* ── SCROLLBAR ── */
#m-content::-webkit-scrollbar { width: 4px !important; }
#m-content::-webkit-scrollbar-thumb {
background: rgba(97,34,59,0.2) !important;
border-radius: 0 !important;
}
#m-content::-webkit-scrollbar-thumb:hover {
background: rgba(202,162,88,0.3) !important;
}
/* ── CHIPS / TAGS ── */
.pg-mag-tag, .su-tag {
border-radius: 4px !important;
font-size: 0.6rem !important;
letter-spacing: 0.8px !important;
transition: all 0.18s !important;
}
.pg-mag-tag:hover { transform: translateY(-1px); }
/* Stagger delays for grid children */
.pg-bento-cell:nth-child(1) { animation-delay: 0.05s; }
.pg-bento-cell:nth-child(2) { animation-delay: 0.10s; }
.pg-bento-cell:nth-child(3) { animation-delay: 0.15s; }
.pg-bento-cell:nth-child(4) { animation-delay: 0.20s; }
.pg-bento-cell:nth-child(5) { animation-delay: 0.25s; }
.pg-bento-cell:nth-child(6) { animation-delay: 0.30s; }
.pg-mag-card:nth-child(1) { animation: pgReveal 0.5s 0.05s both; }
.pg-mag-card:nth-child(2) { animation: pgReveal 0.5s 0.10s both; }
.pg-mag-card:nth-child(3) { animation: pgReveal 0.5s 0.15s both; }
.pg-mag-card:nth-child(4) { animation: pgReveal 0.5s 0.20s both; }
.pg-mag-card:nth-child(5) { animation: pgReveal 0.5s 0.25s both; }
.pg-mag-card:nth-child(6) { animation: pgReveal 0.5s 0.30s both; }
.pg-spotlight-card:nth-child(1) { animation: pgReveal 0.5s 0.05s both; }
.pg-spotlight-card:nth-child(2) { animation: pgReveal 0.5s 0.12s both; }
.pg-spotlight-card:nth-child(3) { animation: pgReveal 0.5s 0.19s both; }
.pg-spotlight-card:nth-child(4) { animation: pgReveal 0.5s 0.26s both; }
.pg-spotlight-card:nth-child(5) { animation: pgReveal 0.5s 0.33s both; }
.pg-spotlight-card:nth-child(6) { animation: pgReveal 0.5s 0.40s both; }
.pg-tl-item:nth-child(1) { animation-delay: 0.05s; }
.pg-tl-item:nth-child(2) { animation-delay: 0.12s; }
.pg-tl-item:nth-child(3) { animation-delay: 0.19s; }
.pg-tl-item:nth-child(4) { animation-delay: 0.26s; }
.pg-tl-item:nth-child(5) { animation-delay: 0.33s; }
.pg-tl-item:nth-child(6) { animation-delay: 0.40s; }
/* ── MINI CREST — glow pulse ── */
.m-mini-crest {
filter: drop-shadow(0 0 6px rgba(202,162,88,0.25));
transition: filter 0.3s;
}
.m-mini-crest:hover { filter: drop-shadow(0 0 12px rgba(202,162,88,0.5)); }
/* END OF VISUAL EXCELLENCE UPGRADE */
/* ════════════════════════════════════════════════════════════
V5 — RADICAL REDESIGN Students · Contact · Advisor
Inspired by: Unseen Studio drag grids · Lacoste Heritage
storytelling strips · FPP large-type editorial · Mubasic
letter-reveal loading energy
════════════════════════════════════════════════════════════ */
/* ── SHARED: page-level scroll area fix ── */
#m-content { overflow-y: auto; }
/* ══════════════════════════════════════════
STUDENTS — full redesign
══════════════════════════════════════════ */
/* CINEMATIC HERO — full viewport height strip */
.s5-hero {
min-height: 56vh;
background: var(--su-maroon-d);
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
position: relative;
}
.s5-hero-left {
padding: 72px 64px 72px 72px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 1;
}
.s5-hero-right {
background: var(--su-maroon);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 48px;
position: relative;
overflow: hidden;
}
/* Giant background letter — Mubasic style */
.s5-hero-right::before {
content: 'SU';
position: absolute;
bottom: -20px;
right: -10px;
font-family: 'Playfair Display', serif;
font-size: 22vw;
font-weight: 900;
color: rgba(202,162,88,0.06);
line-height: 1;
pointer-events: none;
user-select: none;
}
.s5-hero-tag {
font-family: 'Share Tech Mono', monospace;
font-size: 0.58rem;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(202,162,88,0.55);
margin-bottom: 32px;
display: flex;
align-items: center;
gap: 14px;
}
.s5-hero-tag::before { content: ''; display: block; width: 40px; height: 1px; background: rgba(202,162,88,0.4); }
.s5-hero-h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 5.5vw, 6.5rem);
font-weight: 900;
line-height: 0.9;
letter-spacing: -3px;
color: #fff;
margin-bottom: 32px;
}
.s5-hero-h1 em { font-style: italic; color: var(--su-gold); }
.s5-hero-sub {
font-family: 'Raleway', sans-serif;
font-size: 1.05rem;
color: rgba(255,255,255,0.65);
max-width: 40ch;
line-height: 1.75;
}
/* Stat counters on the right panel */
.s5-stat-stack { display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; }
.s5-stat-item {
border-left: 3px solid rgba(202,162,88,0.4);
padding-left: 20px;
}
.s5-stat-num {
font-family: 'Playfair Display', serif;
font-size: 3.5rem;
font-weight: 700;
color: var(--su-gold);
line-height: 1;
}
.s5-stat-lbl {
font-family: 'Share Tech Mono', monospace;
font-size: 0.6rem;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(202,162,88,0.5);
margin-top: 4px;
}
/* PILL NAV — Unseen Studio style tight nav row */
.s5-nav {
display: flex;
align-items: center;
gap: 0;
background: var(--page-bg);
border-bottom: 2px solid var(--page-border);
padding: 0 72px;
position: sticky;
top: 0;
z-index: 20;
overflow-x: auto;
scrollbar-width: none;
}
.s5-nav::-webkit-scrollbar { display: none; }
#MATIES-root:not(.light-mode) .s5-nav { background: #0e0508; border-bottom-color: rgba(202,162,88,0.12); }
.s5-nav-btn {
font-family: 'Share Tech Mono', monospace;
font-size: 0.65rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--page-text2);
padding: 20px 28px;
border: none;
background: none;
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
transition: all 0.18s;
}
.s5-nav-btn:hover { color: var(--page-maroon); }
.s5-nav-btn.active {
color: var(--page-maroon);
border-bottom-color: var(--page-maroon);
}
#MATIES-root:not(.light-mode) .s5-nav-btn:hover,
#MATIES-root:not(.light-mode) .s5-nav-btn.active { color: var(--su-gold); }
#MATIES-root:not(.light-mode) .s5-nav-btn.active { border-bottom-color: var(--su-gold); }
/* PANELS */
.s5-panel { display: none; }
.s5-panel.active { display: block; animation: s5In 0.3s ease both; }
@keyframes s5In { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* FAQ — large editorial accordion, FPP style */
.s5-faq-wrap { padding: 64px 72px; max-width: 900px; }
.s5-faq-item {
border-top: 1px solid var(--page-border);
}
.s5-faq-item:last-child { border-bottom: 1px solid var(--page-border); }
#MATIES-root:not(.light-mode) .s5-faq-item { border-color: rgba(202,162,88,0.1); }
.s5-faq-btn {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 28px 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
gap: 24px;
}
.s5-faq-q {
font-family: 'Raleway', sans-serif;
font-size: 1.35rem;
font-weight: 700;
color: var(--page-text);
line-height: 1.35;
transition: color 0.18s;
}
#MATIES-root:not(.light-mode) .s5-faq-q { color: rgba(202,162,88,0.88); }
.s5-faq-btn:hover .s5-faq-q { color: var(--page-maroon); }
#MATIES-root:not(.light-mode) .s5-faq-btn:hover .s5-faq-q { color: var(--su-gold-l); }
.s5-faq-cross {
width: 32px;
height: 32px;
border: 1px solid var(--page-border);
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: var(--page-maroon);
transition: all 0.25s;
}
#MATIES-root:not(.light-mode) .s5-faq-cross { border-color: rgba(202,162,88,0.25); color: var(--su-gold); }
.s5-faq-item.open .s5-faq-cross { transform: rotate(45deg); background: var(--page-maroon); color: #fff; border-color: transparent; }
#MATIES-root:not(.light-mode) .s5-faq-item.open .s5-faq-cross { background: var(--su-maroon); color: var(--su-gold); }
.s5-faq-body { max-height: 0; overflow: hidden; transition: max-height 0.38s ease; }
.s5-faq-item.open .s5-faq-body { max-height: 500px; }
.s5-faq-ans {
font-family: 'Raleway', sans-serif;
font-size: 1rem;
line-height: 1.8;
color: var(--page-text2);
padding: 0 0 32px 0;
max-width: 66ch;
}
#MATIES-root:not(.light-mode) .s5-faq-ans { color: rgba(202,162,88,0.68); }
/* RESOURCES — Unseen Studio project grid with hover reveals */
.s5-res-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
@media (max-width: 1000px) { .s5-res-grid { grid-template-columns: repeat(2,1fr); } }
.s5-res-card {
position: relative;
padding: 48px 44px;
border-right: 1px solid var(--page-border);
border-bottom: 1px solid var(--page-border);
overflow: hidden;
transition: background 0.22s;
cursor: default;
}
.s5-res-card:hover { background: var(--page-bg2); }
#MATIES-root:not(.light-mode) .s5-res-card { border-color: rgba(202,162,88,0.08); }
#MATIES-root:not(.light-mode) .s5-res-card:hover { background: rgba(202,162,88,0.03); }
/* Sliding accent line on hover — Lacoste style */
.s5-res-card::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 0; height: 2px;
background: var(--su-maroon);
transition: width 0.3s ease;
}
.s5-res-card:hover::after { width: 100%; }
#MATIES-root:not(.light-mode) .s5-res-card::after { background: var(--su-gold); }
.s5-res-num {
font-family: 'Playfair Display', serif;
font-size: 4rem;
font-weight: 900;
color: var(--page-border);
line-height: 1;
margin-bottom: 16px;
transition: color 0.22s;
}
#MATIES-root:not(.light-mode) .s5-res-num { color: rgba(202,162,88,0.07); }
.s5-res-card:hover .s5-res-num { color: rgba(97,34,59,0.12); }
.s5-res-cat {
font-family: 'Share Tech Mono', monospace;
font-size: 0.57rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--su-gold-d);
margin-bottom: 10px;
}
.s5-res-title {
font-family: 'Raleway', sans-serif;
font-weight: 800;
font-size: 1.5rem;
color: var(--page-maroon);
margin-bottom: 24px;
line-height: 1.2;
}
#MATIES-root:not(.light-mode) .s5-res-title { color: var(--su-gold); }
.s5-res-links { display: flex; flex-direction: column; gap: 10px; }
.s5-res-link {
font-family: 'Raleway', sans-serif;
font-size: 0.9rem;
font-weight: 500;
color: var(--page-text2);
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
padding-left: 14px;
border-left: 2px solid transparent;
transition: all 0.18s;
line-height: 1.4;
}
.s5-res-link:hover {
color: var(--page-maroon);
border-left-color: var(--page-maroon);
padding-left: 20px;
}
#MATIES-root:not(.light-mode) .s5-res-link:hover { color: var(--su-gold-l); border-left-color: var(--su-gold); }
/* FORMS — full-bleed table, FPP editorial */
.s5-forms-header {
background: var(--su-maroon);
padding: 48px 72px 36px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.s5-forms-header h2 {
font-family: 'Playfair Display', serif;
font-size: 2.6rem;
font-weight: 900;
color: #fff;
line-height: 1;
letter-spacing: -1px;
}
.s5-forms-header p {
font-family: 'Share Tech Mono', monospace;
font-size: 0.65rem;
color: rgba(202,162,88,0.65);
letter-spacing: 2px;
text-transform: uppercase;
}
.s5-form-table { width: 100%; border-collapse: collapse; }
.s5-form-table thead th {
font-family: 'Share Tech Mono', monospace;
font-size: 0.57rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--su-gold-d);
padding: 18px 24px;
border-bottom: 2px solid var(--page-border);
text-align: left;
background: var(--page-bg2);
}
#MATIES-root:not(.light-mode) .s5-form-table thead th { background: #130b0e; border-color: rgba(202,162,88,0.1); }
.s5-form-table tbody tr {
border-bottom: 1px solid var(--page-border);
transition: background 0.18s;
}
#MATIES-root:not(.light-mode) .s5-form-table tbody tr { border-color: rgba(202,162,88,0.07); }
.s5-form-table tbody tr:hover { background: var(--page-bg2); }
#MATIES-root:not(.light-mode) .s5-form-table tbody tr:hover { background: rgba(202,162,88,0.025); }
.s5-form-table td {
padding: 24px;
font-family: 'Raleway', sans-serif;
font-size: 0.92rem;
vertical-align: top;
color: var(--page-text);
}
#MATIES-root:not(.light-mode) .s5-form-table td { color: rgba(202,162,88,0.75); }
.s5-form-table td:first-child {
font-weight: 800;
font-size: 1rem;
color: var(--page-maroon);
white-space: nowrap;
}
#MATIES-root:not(.light-mode) .s5-form-table td:first-child { color: var(--su-gold); }
.s5-form-table td:last-child {
font-family: 'Share Tech Mono', monospace;
font-size: 0.65rem;
letter-spacing: 1.5px;
color: var(--su-gold-d);
white-space: nowrap;
}
/* SOCIETIES — Lacoste heritage storytelling strips */
.s5-soc-item {
display: grid;
grid-template-columns: 64px 220px 1fr auto;
align-items: center;
gap: 0;
padding: 0;
border-bottom: 1px solid var(--page-border);
transition: background 0.2s;
cursor: default;
min-height: 100px;
}
#MATIES-root:not(.light-mode) .s5-soc-item { border-color: rgba(202,162,88,0.08); }
.s5-soc-item:first-child { border-top: 1px solid var(--page-border); }
#MATIES-root:not(.light-mode) .s5-soc-item:first-child { border-color: rgba(202,162,88,0.08); }
.s5-soc-item:hover { background: var(--page-bg2); }
#MATIES-root:not(.light-mode) .s5-soc-item:hover { background: rgba(202,162,88,0.025); }
.s5-soc-emoji {
text-align: center;
font-size: 1.8rem;
padding: 0 16px;
border-right: 1px solid var(--page-border);
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
}
#MATIES-root:not(.light-mode) .s5-soc-emoji { border-color: rgba(202,162,88,0.08); }
.s5-soc-name {
font-family: 'Raleway', sans-serif;
font-weight: 800;
font-size: 1.1rem;
color: var(--page-maroon);
padding: 28px 32px;
border-right: 1px solid var(--page-border);
align-self: stretch;
display: flex;
align-items: center;
line-height: 1.25;
}
#MATIES-root:not(.light-mode) .s5-soc-name { color: var(--su-gold); border-color: rgba(202,162,88,0.08); }
.s5-soc-desc {
font-family: 'Raleway', sans-serif;
font-size: 0.92rem;
color: var(--page-text2);
padding: 28px 40px;
line-height: 1.7;
}
#MATIES-root:not(.light-mode) .s5-soc-desc { color: rgba(202,162,88,0.6); }
.s5-soc-arrow {
padding: 0 32px;
font-size: 1.4rem;
color: var(--page-border);
transition: color 0.2s, transform 0.2s;
}
.s5-soc-item:hover .s5-soc-arrow { color: var(--page-maroon); transform: translateX(6px); }
#MATIES-root:not(.light-mode) .s5-soc-item:hover .s5-soc-arrow { color: var(--su-gold); }
/* Bottom notice strip */
.s5-notice {
background: var(--su-maroon-d);
color: rgba(202,162,88,0.75);
font-family: 'Share Tech Mono', monospace;
font-size: 0.7rem;
letter-spacing: 1px;
padding: 18px 72px;
display: flex;
align-items: center;
gap: 14px;
}
.s5-notice strong { color: var(--su-gold); }
/* ══════════════════════════════════════════
CONTACT — cinematic redesign
══════════════════════════════════════════ */
/* Tall hero with giant type — Lacoste Heritage energy */
.c5-masthead {
background: var(--su-maroon-d);
padding: 80px 72px 64px;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(202,162,88,0.15);
}
.c5-masthead::after {
content: 'CS';
position: absolute;
right: 40px; top: -20px;
font-family: 'Playfair Display', serif;
font-size: 28vw;
font-weight: 900;
color: rgba(202,162,88,0.04);
line-height: 1;
pointer-events: none;
}
.c5-mast-tag {
font-family: 'Share Tech Mono', monospace;
font-size: 0.58rem;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(202,162,88,0.5);
margin-bottom: 28px;
display: flex; align-items: center; gap: 14px;
}
.c5-mast-tag::before { content: ''; display: block; width: 36px; height: 1px; background: rgba(202,162,88,0.4); }
.c5-mast-h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(3.5rem, 7vw, 8rem);
font-weight: 900;
line-height: 0.88;
letter-spacing: -4px;
color: #fff;
margin-bottom: 36px;
position: relative;
z-index: 1;
}
.c5-mast-h1 em { font-style: italic; color: var(--su-gold); }
.c5-mast-lead {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
color: rgba(255,255,255,0.6);
max-width: 48ch;
line-height: 1.7;
position: relative; z-index: 1;
}
/* Info strip — 4 equal columns */
.c5-info-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid var(--page-border);
}
@media (max-width: 900px) { .c5-info-strip { grid-template-columns: repeat(2, 1fr); } }
#MATIES-root:not(.light-mode) .c5-info-strip { border-color: rgba(202,162,88,0.1); }
.c5-info-cell {
padding: 40px 36px;
border-right: 1px solid var(--page-border);
transition: background 0.2s;
}
.c5-info-cell:last-child { border-right: none; }
#MATIES-root:not(.light-mode) .c5-info-cell { border-color: rgba(202,162,88,0.08); }
.c5-info-cell:hover { background: var(--page-bg2); }
#MATIES-root:not(.light-mode) .c5-info-cell:hover { background: rgba(202,162,88,0.025); }
.c5-cell-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.57rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--su-gold-d);
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--page-border);
}
#MATIES-root:not(.light-mode) .c5-cell-label { border-color: rgba(202,162,88,0.1); }
.c5-cell-body {
font-family: 'Raleway', sans-serif;
font-size: 0.93rem;
color: var(--page-text);
line-height: 1.9;
}
#MATIES-root:not(.light-mode) .c5-cell-body { color: rgba(202,162,88,0.75); }
.c5-link {
color: var(--page-maroon);
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.18s;
}
.c5-link:hover { border-bottom-color: var(--page-maroon); }
#MATIES-root:not(.light-mode) .c5-link { color: var(--su-gold); }
#MATIES-root:not(.light-mode) .c5-link:hover { border-bottom-color: var(--su-gold); }
.c5-status-open { color: var(--su-green); font-family: 'Share Tech Mono', monospace; font-size: 0.65rem; font-weight: 700; }
.c5-status-closed { color: var(--su-orange); font-family: 'Share Tech Mono', monospace; font-size: 0.65rem; font-weight: 700; }
/* Full-bleed map */
.c5-map-wrap {
height: 420px;
overflow: hidden;
position: relative;
border-bottom: 1px solid var(--page-border);
}
#MATIES-root:not(.light-mode) .c5-map-wrap { border-color: rgba(202,162,88,0.1); }
.c5-map-wrap iframe {
width: 100%; height: 100%; border: 0; display: block;
filter: saturate(0.6) contrast(1.05);
}
#MATIES-root:not(.light-mode) .c5-map-wrap iframe {
filter: saturate(0.15) invert(0.9) hue-rotate(178deg) contrast(0.85) brightness(0.9);
}
.c5-map-badge {
position: absolute;
bottom: 20px; left: 28px;
background: var(--su-maroon);
color: var(--su-gold);
font-family: 'Share Tech Mono', monospace;
font-size: 0.62rem;
letter-spacing: 2px;
padding: 10px 18px;
text-transform: uppercase;
}
/* People grid — magazine portrait style */
.c5-people-header {
padding: 52px 72px 24px;
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 900;
color: var(--page-maroon);
letter-spacing: -0.5px;
}
#MATIES-root:not(.light-mode) .c5-people-header { color: var(--su-gold); }
.c5-people-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--page-border);
border-bottom: 1px solid var(--page-border);
margin-bottom: 0;
}
@media (max-width: 900px) { .c5-people-grid { grid-template-columns: repeat(2,1fr); } }
#MATIES-root:not(.light-mode) .c5-people-grid { border-color: rgba(202,162,88,0.1); }
.c5-person {
padding: 32px 36px;
border-right: 1px solid var(--page-border);
transition: background 0.2s;
}
.c5-person:last-child { border-right: none; }
#MATIES-root:not(.light-mode) .c5-person { border-color: rgba(202,162,88,0.08); }
.c5-person:hover { background: var(--page-bg2); }
#MATIES-root:not(.light-mode) .c5-person:hover { background: rgba(202,162,88,0.025); }
.c5-person-role {
font-family: 'Share Tech Mono', monospace;
font-size: 0.57rem;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--su-gold-d);
margin-bottom: 8px;
}
.c5-person-name {
font-family: 'Raleway', sans-serif;
font-weight: 800;
font-size: 1.05rem;
color: var(--page-maroon);
margin-bottom: 10px;
line-height: 1.2;
}
#MATIES-root:not(.light-mode) .c5-person-name { color: var(--su-gold); }
.c5-person-detail {
font-family: 'Raleway', sans-serif;
font-size: 0.83rem;
color: var(--page-text2);
line-height: 1.7;
}
#MATIES-root:not(.light-mode) .c5-person-detail { color: rgba(202,162,88,0.55); }
/* Transport — Lacoste 4-strip */
.c5-transport {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: var(--page-bg2);
border-top: 1px solid var(--page-border);
}
@media (max-width: 1000px) { .c5-transport { grid-template-columns: repeat(2,1fr); } }
#MATIES-root:not(.light-mode) .c5-transport { background: #0e0508; border-color: rgba(202,162,88,0.1); }
.c5-transport-cell {
padding: 36px 32px;
border-right: 1px solid var(--page-border);
transition: background 0.2s;
}
.c5-transport-cell:last-child { border-right: none; }
#MATIES-root:not(.light-mode) .c5-transport-cell { border-color: rgba(202,162,88,0.08); }
.c5-transport-cell:hover { background: var(--page-border); }
#MATIES-root:not(.light-mode) .c5-transport-cell:hover { background: rgba(202,162,88,0.03); }
.c5-transport-icon { font-size: 2rem; margin-bottom: 14px; display: block; }
.c5-transport-title {
font-family: 'Raleway', sans-serif;
font-weight: 800;
font-size: 0.82rem;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--page-maroon);
margin-bottom: 10px;
}
#MATIES-root:not(.light-mode) .c5-transport-title { color: var(--su-gold); }
.c5-transport-body {
font-family: 'Raleway', sans-serif;
font-size: 0.83rem;
color: var(--page-text2);
line-height: 1.7;
}
#MATIES-root:not(.light-mode) .c5-transport-body { color: rgba(202,162,88,0.6); }
/* Social strip */
.c5-social-strip {
background: var(--su-maroon-d);
padding: 28px 72px;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.c5-social-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.6rem;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(202,162,88,0.45);
margin-right: 8px;
}
.c5-social-chip {
font-family: 'Share Tech Mono', monospace;
font-size: 0.68rem;
letter-spacing: 1px;
padding: 8px 18px;
border: 1px solid rgba(202,162,88,0.25);
color: rgba(202,162,88,0.65);
transition: all 0.18s;
cursor: default;
}
.c5-social-chip:hover { border-color: var(--su-gold); color: var(--su-gold); }
/* ══════════════════════════════════════════
ADVISOR — bold redesign
══════════════════════════════════════════ */
/* Full-bleed dark hero — Lacoste storytelling */
.a5-hero {
background: #0a040a;
padding: 80px 72px 72px;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(202,162,88,0.12);
}
.a5-hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(ellipse at 70% 50%, rgba(97,34,59,0.35) 0%, transparent 65%);
pointer-events: none;
}
.a5-hero-eyebrow {
font-family: 'Share Tech Mono', monospace;
font-size: 0.58rem;
letter-spacing: 5px;
text-transform: uppercase;
color: rgba(202,162,88,0.5);
margin-bottom: 32px;
display: flex; align-items: center; gap: 16px;
position: relative;
}
.a5-hero-eyebrow::before { content: ''; display: block; width: 36px; height: 1px; background: rgba(202,162,88,0.35); }
.a5-hero-h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 6vw, 7rem);
font-weight: 900;
line-height: 0.9;
letter-spacing: -3px;
color: #fff;
margin-bottom: 28px;
position: relative;
}
.a5-hero-h1 em { font-style: italic; color: var(--su-gold); }
.a5-hero-sub {
font-family: 'Raleway', sans-serif;
font-size: 1.05rem;
color: rgba(255,255,255,0.55);
max-width: 52ch;
line-height: 1.75;
position: relative;
}
/* Progress bar */
.a5-progress {
padding: 28px 72px;
background: var(--page-bg2);
border-bottom: 1px solid var(--page-border);
display: flex;
align-items: center;
gap: 24px;
}
#MATIES-root:not(.light-mode) .a5-progress { background: #130b0e; border-color: rgba(202,162,88,0.1); }
.a5-prog-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.62rem;
letter-spacing: 1px;
color: var(--su-gold-d);
white-space: nowrap;
flex-shrink: 0;
min-width: 200px;
}
.a5-prog-track {
flex: 1;
height: 3px;
background: var(--page-border);
}
#MATIES-root:not(.light-mode) .a5-prog-track { background: rgba(202,162,88,0.1); }
.a5-prog-fill {
height: 100%;
background: linear-gradient(90deg, var(--su-maroon), var(--su-gold));
width: 0%;
transition: width 0.5s ease;
}
.a5-prog-pct {
font-family: 'Share Tech Mono', monospace;
font-size: 0.72rem;
color: var(--su-gold-d);
white-space: nowrap;
flex-shrink: 0;
}
/* Step layout */
.a5-body { padding: 60px 72px; }
.a5-step-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--page-border);
border: 1px solid var(--page-border);
margin-bottom: 1px;
}
#MATIES-root:not(.light-mode) .a5-step-grid { background: rgba(202,162,88,0.08); border-color: rgba(202,162,88,0.08); }
.a5-step-wide { grid-column: 1 / -1; }
.a5-step {
background: var(--page-bg);
padding: 36px 40px;
position: relative;
}
#MATIES-root:not(.light-mode) .a5-step { background: #0e0508; }
.a5-step-num {
font-family: 'Share Tech Mono', monospace;
font-size: 0.56rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--su-gold-d);
margin-bottom: 10px;
}
.a5-step-req {
display: inline;
background: var(--su-maroon);
color: var(--su-gold);
font-size: 0.5rem;
padding: 2px 7px;
letter-spacing: 1.5px;
margin-left: 8px;
vertical-align: middle;
}
.a5-step-title {
font-family: 'Raleway', sans-serif;
font-weight: 800;
font-size: 1rem;
color: var(--page-maroon);
margin-bottom: 22px;
text-transform: uppercase;
letter-spacing: 0.8px;
}
#MATIES-root:not(.light-mode) .a5-step-title { color: var(--su-gold-l); }
.a5-chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.a5-chip {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 0.95rem;
padding: 11px 22px;
border: 1.5px solid var(--page-border);
background: var(--page-bg);
color: var(--page-text);
cursor: pointer;
transition: all 0.18s;
user-select: none;
border-radius: 2px;
}
.a5-chip:hover { border-color: var(--su-maroon); color: var(--su-maroon); background: rgba(97,34,59,0.04); }
.a5-chip.on {
background: var(--su-maroon);
border-color: var(--su-gold);
color: var(--su-gold);
}
#MATIES-root:not(.light-mode) .a5-chip { background: rgba(202,162,88,0.04); border-color: rgba(202,162,88,0.14); color: rgba(202,162,88,0.65); }
#MATIES-root:not(.light-mode) .a5-chip:hover { border-color: var(--su-gold-d); color: var(--su-gold); }
#MATIES-root:not(.light-mode) .a5-chip.on { background: var(--su-maroon); border-color: var(--su-gold); color: var(--su-gold); }
/* CTA row — Lacoste-style sweeping button */
.a5-cta-row {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
margin-top: 48px;
}
.a5-gen-btn {
position: relative;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-weight: 900;
font-size: 1rem;
letter-spacing: 4px;
text-transform: uppercase;
padding: 20px 64px;
border: 2px solid var(--su-maroon);
background: var(--su-maroon);
color: var(--su-gold);
cursor: pointer;
transition: color 0.3s;
}
.a5-gen-btn::after {
content: '';
position: absolute;
inset: 0;
background: var(--su-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
z-index: 0;
}
.a5-gen-btn span { position: relative; z-index: 1; }
.a5-gen-btn:hover { color: var(--su-maroon); border-color: var(--su-gold); }
.a5-gen-btn:hover::after { transform: scaleX(1); }
.a5-reset-btn {
font-family: 'Share Tech Mono', monospace;
font-size: 0.7rem;
letter-spacing: 2px;
text-transform: uppercase;
padding: 20px 28px;
border: 1px solid var(--page-border);
background: transparent;
color: var(--page-text2);
cursor: pointer;
transition: all 0.2s;
}
.a5-reset-btn:hover { border-color: var(--page-text); color: var(--page-text); }
/* Result panel */
.a5-result { margin-top: 60px; animation: a5RevealUp 0.4s ease both; }
@keyframes a5RevealUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.a5-result-masthead {
background: linear-gradient(135deg, #0a040a 0%, var(--su-maroon-d) 50%, var(--su-maroon) 100%);
padding: 44px 52px;
position: relative;
overflow: hidden;
border: 1px solid rgba(202,162,88,0.15);
}
.a5-result-masthead::after {
content: attr(data-track);
position: absolute;
right: 40px; bottom: -10px;
font-family: 'Playfair Display', serif;
font-size: 8rem;
font-weight: 900;
color: rgba(202,162,88,0.06);
line-height: 1;
pointer-events: none;
}
.a5-result-tag {
font-family: 'Share Tech Mono', monospace;
font-size: 0.58rem;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(202,162,88,0.5);
margin-bottom: 16px;
}
.a5-result-title {
font-family: 'Playfair Display', serif;
font-size: 2.4rem;
font-weight: 900;
color: #fff;
line-height: 1.05;
letter-spacing: -1px;
}
.a5-result-title em { color: var(--su-gold); font-style: italic; }
.a5-result-body {
border: 1px solid var(--page-border);
border-top: none;
padding: 44px 52px;
}
#MATIES-root:not(.light-mode) .a5-result-body { background: #0e0508; border-color: rgba(202,162,88,0.1); }
.a5-sec-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.58rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--su-gold-d);
padding-bottom: 12px;
border-bottom: 1px solid var(--page-border);
margin-bottom: 20px;
}
#MATIES-root:not(.light-mode) .a5-sec-label { border-color: rgba(202,162,88,0.1); }
/* Year plan as timeline */
.a5-year-strip {
display: flex;
gap: 0;
overflow-x: auto;
scrollbar-width: thin;
margin-bottom: 36px;
border: 1px solid var(--page-border);
}
#MATIES-root:not(.light-mode) .a5-year-strip { border-color: rgba(202,162,88,0.1); }
.a5-year-block {
flex: 0 0 220px;
border-right: 1px solid var(--page-border);
overflow: hidden;
}
.a5-year-block:last-child { border-right: none; }
#MATIES-root:not(.light-mode) .a5-year-block { border-color: rgba(202,162,88,0.1); }
.a5-year-hdr {
padding: 14px 18px;
font-family: 'Raleway', sans-serif;
font-weight: 900;
font-size: 0.72rem;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
}
.a5-year-body { padding: 14px 18px; background: var(--page-bg2); }
#MATIES-root:not(.light-mode) .a5-year-body { background: #130b0e; }
.a5-mod-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 5px 0;
border-bottom: 1px solid var(--page-border);
gap: 8px;
}
.a5-mod-row:last-child { border-bottom: none; }
#MATIES-root:not(.light-mode) .a5-mod-row { border-color: rgba(202,162,88,0.06); }
.a5-mod-code {
font-family: 'Share Tech Mono', monospace;
font-size: 0.68rem;
font-weight: 700;
color: var(--su-gold);
cursor: pointer;
white-space: nowrap;
}
.a5-mod-code:hover { text-decoration: underline; }
.a5-mod-name {
font-family: 'Raleway', sans-serif;
font-size: 0.77rem;
color: var(--page-text2);
flex: 1;
}
#MATIES-root:not(.light-mode) .a5-mod-name { color: rgba(202,162,88,0.55); }
.a5-mod-cr {
font-family: 'Share Tech Mono', monospace;
font-size: 0.62rem;
color: var(--su-gold-d);
white-space: nowrap;
}
/* Insight chips */
.a5-insights { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.a5-insight {
font-family: 'Raleway', sans-serif;
font-size: 0.82rem;
padding: 8px 18px;
background: rgba(97,34,59,0.07);
border: 1px solid rgba(97,34,59,0.15);
color: var(--su-maroon);
}
#MATIES-root:not(.light-mode) .a5-insight { background: rgba(202,162,88,0.05); border-color: rgba(202,162,88,0.15); color: var(--su-gold-d); }
/* ══════════════════════════════════════════════════
CRT ENHANCEMENT — PAGE VIEW + TEXT
Goal: stronger phosphor feel on pages without harming readability.
Toggle intensity with CSS vars below.
══════════════════════════════════════════════════ */
/* Global knobs */
#MATIES-root{
--crt-flicker-strength: 0.035; /* 0–0.08 */
--crt-rgb-mask-opacity: 0.10; /* 0–0.22 */
--crt-scanline-alpha: 0.18; /* 0–0.30 */
--crt-glow-soft: 0 0 10px rgba(202,162,88,0.18);
--crt-glow-strong: 0 0 18px rgba(202,162,88,0.26);
}
/* Shadow mask (subpixel triads) overlay */
#m-shadowmask{
position:absolute; inset:0;
pointer-events:none;
z-index:105; /* above scanlines (100), below glitch (200) */
opacity: var(--crt-rgb-mask-opacity);
mix-blend-mode: screen;
background:
repeating-linear-gradient(
90deg,
rgba(255, 60, 60, 0.22) 0px,
rgba(255, 60, 60, 0.22) 1px,
rgba(60, 255, 140, 0.20) 1px,
rgba(60, 255, 140, 0.20) 2px,
rgba(90, 160, 255, 0.18) 2px,
rgba(90, 160, 255, 0.18) 3px
);
transform: translateZ(0);
filter: blur(0.15px);
}
/* Stronger scanlines on page content (dark mode only) */
#MATIES-root:not(.light-mode) #m-content::before{
opacity: 1;
background: repeating-linear-gradient(
0deg,
rgba(0,0,0, calc(var(--crt-scanline-alpha) * 0.55)) 0px,
rgba(0,0,0, calc(var(--crt-scanline-alpha) * 0.55)) 1px,
transparent 2px,
transparent 4px
);
mix-blend-mode: multiply;
animation: crtScanDrift 7.5s linear infinite;
}
/* Subtle bloom + chromatic fringing on page typography (dark mode) */
#MATIES-root:not(.light-mode) #m-page{
filter: saturate(1.05) contrast(1.04);
}
#MATIES-root:not(.light-mode) .m-h1,
#MATIES-root:not(.light-mode) .m-h2,
#MATIES-root:not(.light-mode) .m-h3,
#MATIES-root:not(.light-mode) .m-p,
#MATIES-root:not(.light-mode) .pg-hero h1,
#MATIES-root:not(.light-mode) .pg-hero-sub,
#MATIES-root:not(.light-mode) .pg-feature-title,
#MATIES-root:not(.light-mode) .pg-feature-body,
#MATIES-root:not(.light-mode) .pg-spotlight-title,
#MATIES-root:not(.light-mode) .pg-spotlight-body,
#MATIES-root:not(.light-mode) .pg-event-title,
#MATIES-root:not(.light-mode) .pg-event-desc{
text-shadow:
-0.55px 0 rgba(130,204,174,0.16),
0.55px 0 rgba(220,68,5,0.10),
0 0 1px rgba(255,255,255,0.05),
var(--crt-glow-soft);
}
#MATIES-root:not(.light-mode) .m-h1,
#MATIES-root:not(.light-mode) .pg-hero h1{
text-shadow:
-0.75px 0 rgba(130,204,174,0.18),
0.75px 0 rgba(220,68,5,0.12),
0 0 1px rgba(255,255,255,0.06),
var(--crt-glow-strong);
}
/* Make small mono labels look like terminal phosphor */
#MATIES-root:not(.light-mode) .pg-section-label,
#MATIES-root:not(.light-mode) .pg-hero-eyebrow,
#MATIES-root:not(.light-mode) .m-tag,
#MATIES-root:not(.light-mode) .m-badge{
text-shadow: 0 0 10px rgba(202,162,88,0.20);
}
/* Gentle brightness flicker (respects reduced motion) */
#MATIES-root:not(.light-mode) #m-page.visible #m-content{
animation: crtFlicker 5.5s infinite;
transform: translateZ(0);
}
@keyframes crtFlicker{
0% { filter: brightness(1); }
9% { filter: brightness(calc(1 - var(--crt-flicker-strength))); }
10% { filter: brightness(1); }
12% { filter: brightness(calc(1 - var(--crt-flicker-strength) * 0.6)); }
13% { filter: brightness(1); }
61% { filter: brightness(calc(1 - var(--crt-flicker-strength) * 0.5)); }
62% { filter: brightness(1); }
100% { filter: brightness(1); }
}
@keyframes crtScanDrift{
0% { background-position: 0 0; }
100% { background-position: 0 14px; }
}
/* prefers-reduced-motion: handled in main responsive block above */
@media (prefers-reduced-motion: reduce){
#MATIES-root:not(.light-mode) #m-page.visible #m-content{ animation: none; }
#MATIES-root:not(.light-mode) #m-content::before{ animation: none; }
}
/* ══════════════════════════════════════════════════════════════
GOLD HEADINGS — Stellenbosch/CRT aesthetic
All headings and subheadings rendered in SU Brilliant Gold
══════════════════════════════════════════════════════════════ */
/* Base (light mode) — gold headings with warm glow */
.m-h1 {
color: var(--su-gold-d) !important;
text-shadow: 0 0 22px rgba(160,122,48,0.35), 0 1px 0 rgba(160,122,48,0.15) !important;
}
.m-h1::after {
background: linear-gradient(90deg, var(--su-gold-d), rgba(160,122,48,0.2), transparent) !important;
}
.m-h2 {
color: var(--su-gold-d) !important;
text-shadow: 0 0 14px rgba(160,122,48,0.25) !important;
}
.m-h2::after {
background: linear-gradient(90deg, rgba(160,122,48,0.35), transparent) !important;
}
.m-h3 {
color: var(--su-gold-d) !important;
}
/* Dark mode — brighter gold with phosphor glow */
#MATIES-root:not(.light-mode) .m-h1 {
color: var(--su-gold) !important;
text-shadow: 0 0 22px rgba(202,162,88,0.55), 0 0 44px rgba(202,162,88,0.2) !important;
}
#MATIES-root:not(.light-mode) .m-h2 {
color: var(--su-gold-l) !important;
text-shadow: 0 0 14px rgba(202,162,88,0.4) !important;
}
#MATIES-root:not(.light-mode) .m-h3 {
color: var(--su-gold) !important;
text-shadow: 0 0 8px rgba(202,162,88,0.3) !important;
}
/* Page hero headings */
.pg-hero h1 { color: var(--su-gold) !important; text-shadow: 0 0 28px rgba(202,162,88,0.35), 0 2px 0 rgba(0,0,0,0.4) !important; }
#MATIES-root:not(.light-mode) .pg-hero h1 {
color: rgba(202,162,88,0.92) !important;
text-shadow:
0 0 6px rgba(202,162,88,0.95),
0 0 18px rgba(202,162,88,0.6),
0 0 40px rgba(202,162,88,0.3),
0 0 80px rgba(202,162,88,0.12) !important;
animation: crtNumFlicker 8s ease-in-out infinite;
animation-delay: -3.1s;
}
.pg-hero h2 { color: var(--su-gold-l) !important; }
.pg-hero h3 { color: var(--su-gold) !important; }
/* Feature strip titles */
.pg-feature-title { color: var(--su-gold-d) !important; }
#MATIES-root:not(.light-mode) .pg-feature-title { color: var(--su-gold) !important; text-shadow: 0 0 12px rgba(202,162,88,0.3) !important; }
/* Magazine/staff card names */
.pg-mag-name { color: var(--su-gold-d) !important; }
#MATIES-root:not(.light-mode) .pg-mag-name { color: var(--su-gold) !important; }
/* Bento section headings */
.pg-bento-cell h2, .pg-bento-cell h3 { color: var(--su-gold-d) !important; }
#MATIES-root:not(.light-mode) .pg-bento-cell h2,
#MATIES-root:not(.light-mode) .pg-bento-cell h3 { color: var(--su-gold) !important; }
/* Page section labels */
.pg-section-label { color: var(--su-gold-d) !important; }
#MATIES-root:not(.light-mode) .pg-section-label { color: var(--su-gold) !important; }
/* Card headings */
.m-card h3, .m-profile h3, .m-event h4,
.m-ebody h4, .m-pub h4 { color: var(--su-gold-d) !important; }
#MATIES-root:not(.light-mode) .m-card h3,
#MATIES-root:not(.light-mode) .m-profile h3,
#MATIES-root:not(.light-mode) .m-ebody h4,
#MATIES-root:not(.light-mode) .m-pub h4 { color: var(--su-gold) !important; }
/* Light mode heading shadow override */
#MATIES-root.light-mode #m-page .m-h1,
#MATIES-root.light-mode #m-page .m-h2,
#MATIES-root.light-mode #m-page .m-h3 {
text-shadow: 0 0 18px rgba(160,122,48,0.22) !important;
}
#MATIES-root.light-mode #m-shadowmask{ opacity: 0.035; mix-blend-mode: multiply; }
/* ══════════════════════════════════════════════════════════════════════
ADAPTIVE RESPONSIVE LAYER — driven by responsive.js data-attributes
These rules react to data-tier, data-device, data-orient, data-notch
set in real-time by the JS engine on every resize / orientation change.
══════════════════════════════════════════════════════════════════════ */
/* ── Use JS-computed custom properties everywhere ── */
#m-page { padding-bottom: var(--safe-bottom, 0px); }
#m-nav-bar { height: var(--nav-h, 72px); padding-bottom: var(--safe-bottom, 0px); }
#m-topbar { min-height: var(--topbar-h, 58px); padding-top: var(--safe-top, 0px); padding-left: var(--safe-left, 0px); padding-right: var(--safe-right, 0px); }
#m-terminal { padding-bottom: var(--safe-bottom, 0px); }
#m-boot { padding-top: var(--safe-top, 0px); padding-bottom: var(--safe-bottom, 0px); }
#curr-graph-container { min-height: var(--graph-h, 480px); }
#m-modal-box { max-height: var(--modal-max-h, 86vh); }
/* ── Fluid page padding via JS vars ── */
.pg-inner {
padding: var(--page-pad-v, 52px) var(--page-pad-h, 80px) calc(var(--page-pad-v, 52px) * 1.8);
}
.pg-hero {
padding: calc(var(--page-pad-v, 52px) * 0.7) var(--page-pad-h, 80px) calc(var(--page-pad-v, 52px) * 0.8);
}
/* ── Fluid profile/card grids ── */
.m-profile-grid {
grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 260px), 1fr));
}
/* ══════════════════════════════════════════════════════════════════════
NOTCH / DYNAMIC ISLAND — [data-notch="true"]
══════════════════════════════════════════════════════════════════════ */
#MATIES-root[data-notch="true"] #m-topbar {
padding-top: max(var(--safe-top, 0px), 12px);
}
#MATIES-root[data-notch="true"] #m-terminal {
padding-bottom: max(var(--safe-bottom, 0px), 20px);
}
#MATIES-root[data-notch="true"] #m-prompt-area {
padding-bottom: max(calc(var(--safe-bottom, 0px) + 8px), 16px);
}
/* Notch landscape: pad left/right for sensor housing */
#MATIES-root[data-notch="true"][data-orient="landscape"] .m-logo-area {
padding-left: max(var(--safe-left, 0px), 16px);
}
#MATIES-root[data-notch="true"][data-orient="landscape"] #m-topbar-right {
padding-right: max(var(--safe-right, 0px), 16px);
}
/* ══════════════════════════════════════════════════════════════════════
PHONE XS [data-tier="xs"] ≤ 479px
══════════════════════════════════════════════════════════════════════ */
#MATIES-root[data-tier="xs"] {
font-size: 14px;
}
#MATIES-root[data-tier="xs"] #m-topbar {
min-height: 48px;
}
#MATIES-root[data-tier="xs"] .m-logo-area {
padding: 6px 10px; gap: 8px;
}
#MATIES-root[data-tier="xs"] .m-mini-crest { width: 26px; height: 26px; }
#MATIES-root[data-tier="xs"] .m-uni-name { font-size: 0.8rem; letter-spacing: 0; }
#MATIES-root[data-tier="xs"] .m-uni-dept { display: none; }
#MATIES-root[data-tier="xs"] #m-back-btn { padding: 0 10px; font-size: 0.55rem; }
#MATIES-root[data-tier="xs"] #m-search { display: none; }
#MATIES-root[data-tier="xs"] #m-theme-btn { display: none; }
#MATIES-root[data-tier="xs"] #m-nav-bar { height: 48px; padding: 0 4px; }
#MATIES-root[data-tier="xs"] .m-nav-label { display: none; }
#MATIES-root[data-tier="xs"] .m-nav-btn { min-width: 36px; padding: 0 6px; }
#MATIES-root[data-tier="xs"] .m-nav-icon { font-size: 1.1rem; }
#MATIES-root[data-tier="xs"] #m-term-body { padding: 8px 12px; font-size: 0.78rem; }
#MATIES-root[data-tier="xs"] #m-prompt-label,
#MATIES-root[data-tier="xs"] #m-prompt-input,
#MATIES-root[data-tier="xs"] #m-autocomplete { font-size: 0.8rem; }
#MATIES-root[data-tier="xs"] .m-h1 { font-size: clamp(1.25rem, 6vw, 1.7rem); }
#MATIES-root[data-tier="xs"] .m-h2 { font-size: clamp(0.9rem, 4vw, 1.2rem); }
#MATIES-root[data-tier="xs"] .m-p { font-size: 0.9rem; line-height: 1.72; }
#MATIES-root[data-tier="xs"] .pg-hero h1 { font-size: clamp(1.3rem, 6.5vw, 1.85rem) !important; }
#MATIES-root[data-tier="xs"] .pg-bento { grid-template-columns: 1fr !important; padding: 12px !important; gap: 10px !important; }
#MATIES-root[data-tier="xs"] .adv-card { padding: 18px 14px 16px; }
#MATIES-root[data-tier="xs"] .adv-card-grid { grid-template-columns: 1fr; padding: 0 8px; gap: 10px; }
#MATIES-root[data-tier="xs"] .graph-stats-row { grid-template-columns: 1fr 1fr; gap: 6px; }
#MATIES-root[data-tier="xs"] .graph-toolbar { flex-wrap: nowrap; overflow-x: auto; }
#MATIES-root[data-tier="xs"] .graph-filter-btn { font-size: 0.67rem; padding: 5px 7px; flex-shrink: 0; }
#MATIES-root[data-tier="xs"] .pg-timeline-item { grid-template-columns: 0 4px 1fr; }
#MATIES-root[data-tier="xs"] .pg-tl-year { display: none; }
#MATIES-root[data-tier="xs"] #m-modal { align-items: flex-end !important; }
#MATIES-root[data-tier="xs"] #m-modal-box {
width: 100% !important; max-width: 100% !important;
border-radius: 12px 12px 0 0 !important;
margin: 0 !important;
}
/* Boot on xs */
#MATIES-root[data-tier="xs"] #boot-logo-wrap { width: 64px; margin-bottom: 14px; }
#MATIES-root[data-tier="xs"] #boot-su-name { font-size: clamp(0.78rem, 4.5vw, 1rem); letter-spacing: 0.14em; }
#MATIES-root[data-tier="xs"] #boot-dept-name { font-size: clamp(0.46rem, 2vw, 0.6rem); margin-bottom: 16px; }
#MATIES-root[data-tier="xs"] #boot-box { padding: 12px 14px 10px; font-size: 0.6rem; }
/* ══════════════════════════════════════════════════════════════════════
PHONE SM [data-tier="sm"] 480–767px
══════════════════════════════════════════════════════════════════════ */
#MATIES-root[data-tier="sm"] #m-topbar { min-height: 52px; }
#MATIES-root[data-tier="sm"] .m-logo-area { padding: 8px 12px; gap: 10px; }
#MATIES-root[data-tier="sm"] .m-mini-crest { width: 30px; height: 30px; }
#MATIES-root[data-tier="sm"] .m-uni-name { font-size: 0.88rem; }
#MATIES-root[data-tier="sm"] .m-uni-dept { font-size: 0.5rem; letter-spacing: 2px; }
#MATIES-root[data-tier="sm"] .m-breadcrumb{ display: none; }
#MATIES-root[data-tier="sm"] #m-search { display: none; }
#MATIES-root[data-tier="sm"] #m-theme-btn{ display: none; }
#MATIES-root[data-tier="sm"] #m-back-btn { font-size: 0.6rem; padding: 0 12px; }
#MATIES-root[data-tier="sm"] #m-nav-bar { height: 54px; overflow-x: auto; scroll-snap-type: x mandatory; }
#MATIES-root[data-tier="sm"] .m-nav-btn { padding: 0 10px; min-width: 48px; scroll-snap-align: start; }
#MATIES-root[data-tier="sm"] .m-nav-icon { font-size: 1.1rem; }
#MATIES-root[data-tier="sm"] .m-nav-label{ font-size: 0.46rem; letter-spacing: 0.4px; }
#MATIES-root[data-tier="sm"] #m-term-body { padding: 10px 14px; font-size: 0.82rem; }
#MATIES-root[data-tier="sm"] #m-prompt-label,
#MATIES-root[data-tier="sm"] #m-prompt-input,
#MATIES-root[data-tier="sm"] #m-autocomplete { font-size: 0.82rem; }
#MATIES-root[data-tier="sm"] #m-term-clock { display: none; }
#MATIES-root[data-tier="sm"] .m-h1 { font-size: clamp(1.4rem, 5.5vw, 2rem); }
#MATIES-root[data-tier="sm"] .m-h2 { font-size: clamp(1rem, 4vw, 1.4rem); }
#MATIES-root[data-tier="sm"] .m-p { font-size: 0.95rem; }
#MATIES-root[data-tier="sm"] .pg-hero h1 { font-size: clamp(1.5rem, 7vw, 2.2rem) !important; }
#MATIES-root[data-tier="sm"] .pg-bento { grid-template-columns: 1fr !important; padding: 14px !important; gap: 12px !important; }
#MATIES-root[data-tier="sm"] .pg-bento-cell.col3,
#MATIES-root[data-tier="sm"] .pg-bento-cell.col4,
#MATIES-root[data-tier="sm"] .pg-bento-cell.col6,
#MATIES-root[data-tier="sm"] .pg-bento-cell.col2 { grid-column: 1 !important; }
#MATIES-root[data-tier="sm"] .m-grid,
#MATIES-root[data-tier="sm"] .m-grid3 { grid-template-columns: 1fr; }
#MATIES-root[data-tier="sm"] .pg-split,
#MATIES-root[data-tier="sm"] .pg-editorial,
#MATIES-root[data-tier="sm"] .pg-events-layout,
#MATIES-root[data-tier="sm"] .pg-dash-layout,
#MATIES-root[data-tier="sm"] .pg-contact-lower { grid-template-columns: 1fr; }
#MATIES-root[data-tier="sm"] .pg-editorial-aside { display: none; }
#MATIES-root[data-tier="sm"] .pg-contact-info-strip { grid-template-columns: 1fr; }
#MATIES-root[data-tier="sm"] .pg-contact-lower-col { border-right: none; border-bottom: 1px solid var(--page-border); }
#MATIES-root[data-tier="sm"] .adv-card-grid { grid-template-columns: 1fr; padding: 0 12px; gap: 12px; }
#MATIES-root[data-tier="sm"] .adv-cta-row-v5 { flex-direction: column; }
#MATIES-root[data-tier="sm"] .adv-cta-row-v5 .a5-gen-btn,
#MATIES-root[data-tier="sm"] .adv-reset-btn { width: 100%; text-align: center; }
#MATIES-root[data-tier="sm"] .adv-year-grid { grid-template-columns: 1fr; }
#MATIES-root[data-tier="sm"] .adv-cta-row { flex-direction: column; gap: 8px; }
#MATIES-root[data-tier="sm"] .adv-cta-btn { width: 100%; justify-content: center; }
#MATIES-root[data-tier="sm"] .graph-layout { grid-template-columns: 1fr; gap: 0; }
#MATIES-root[data-tier="sm"] .graph-toolbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
#MATIES-root[data-tier="sm"] .graph-toolbar::-webkit-scrollbar { display: none; }
#MATIES-root[data-tier="sm"] .graph-filter-btn { font-size: 0.72rem; padding: 5px 9px; white-space: nowrap; flex-shrink: 0; }
#MATIES-root[data-tier="sm"] .graph-stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
#MATIES-root[data-tier="sm"] #m-modal { align-items: flex-end !important; }
#MATIES-root[data-tier="sm"] #m-modal-box {
width: 100% !important; max-width: 100% !important;
border-radius: 16px 16px 0 0 !important;
margin: 0 !important;
}
#MATIES-root[data-tier="sm"] .m-event { flex-direction: column; }
#MATIES-root[data-tier="sm"] .m-ebody { border-left: none; border-top: 3px solid rgba(202,162,88,0.25); }
#MATIES-root[data-tier="sm"] .prog-info-grid { grid-template-columns: 1fr !important; }
#MATIES-root[data-tier="sm"] .chart-wrap-2col { grid-template-columns: 1fr !important; }
/* Boot on sm */
#MATIES-root[data-tier="sm"] #boot-logo-wrap { width: 80px; margin-bottom: 18px; }
#MATIES-root[data-tier="sm"] #boot-box { padding: 14px 18px 12px; font-size: 0.65rem; }
/* ══════════════════════════════════════════════════════════════════════
TABLET MD [data-tier="md"] 768–1023px
══════════════════════════════════════════════════════════════════════ */
#MATIES-root[data-tier="md"] .adv-card-grid { grid-template-columns: 1fr 1fr; }
#MATIES-root[data-tier="md"] .pg-bento { grid-template-columns: repeat(2, 1fr) !important; }
#MATIES-root[data-tier="md"] .graph-layout { grid-template-columns: 1fr 300px; }
#MATIES-root[data-tier="md"] #m-search { width: 110px; }
#MATIES-root[data-tier="md"] .adv-year-grid { grid-template-columns: 1fr 1fr; }
/* ══════════════════════════════════════════════════════════════════════
LANDSCAPE PHONE [data-orient="landscape"][data-device="phone"]
══════════════════════════════════════════════════════════════════════ */
#MATIES-root[data-orient="landscape"][data-device="phone"] #m-nav-bar,
#MATIES-root[data-orient="landscape"][data-device="phone-xs"] #m-nav-bar {
height: 44px;
}
#MATIES-root[data-orient="landscape"][data-device="phone"] .m-nav-label,
#MATIES-root[data-orient="landscape"][data-device="phone-xs"] .m-nav-label {
display: none;
}
#MATIES-root[data-orient="landscape"][data-device="phone"] #m-topbar,
#MATIES-root[data-orient="landscape"][data-device="phone-xs"] #m-topbar {
min-height: 44px;
}
/* In landscape, content has more horizontal room — use it */
#MATIES-root[data-orient="landscape"][data-device="phone"] .pg-bento {
grid-template-columns: repeat(2, 1fr) !important;
}
#MATIES-root[data-orient="landscape"][data-device="phone"] .adv-card-grid {
grid-template-columns: 1fr 1fr;
}
/* Taller graph in landscape */
#MATIES-root[data-orient="landscape"][data-device="phone"] #curr-graph-container {
min-height: calc(var(--real-vh, 1dvh) * 100 - 100px);
}
/* ══════════════════════════════════════════════════════════════════════
FOLDABLE / SPLIT SCREEN [data-fold="true"]
══════════════════════════════════════════════════════════════════════ */
#MATIES-root[data-fold="true"] .graph-layout { grid-template-columns: 1fr; }
#MATIES-root[data-fold="true"] .pg-bento { grid-template-columns: 1fr 1fr !important; }
#MATIES-root[data-fold="true"] .adv-card-grid { grid-template-columns: 1fr 1fr; }
#MATIES-root[data-fold="true"] #curr-graph-container { min-height: 400px; }
/* ══════════════════════════════════════════════════════════════════════
TOUCH DEVICES [data-touch="true"]
Larger tap targets, no hover transforms, iOS scroll fixes
══════════════════════════════════════════════════════════════════════ */
#MATIES-root[data-touch="true"] .a5-chip { min-height: 44px; display: flex; align-items: center; }
#MATIES-root[data-touch="true"] .adv-cta-btn { min-height: 48px; }
#MATIES-root[data-touch="true"] .m-nav-btn { min-height: 44px; }
#MATIES-root[data-touch="true"] .m-topbar-btn { min-height: 44px; }
#MATIES-root[data-touch="true"] #m-back-btn { min-height: 44px; }
#MATIES-root[data-touch="true"] .graph-filter-btn { min-height: 40px; }
#MATIES-root[data-touch="true"] .mod-row-main { min-height: 48px; }
#MATIES-root[data-touch="true"] #m-prompt-input { font-size: max(16px, 0.9rem); } /* prevents iOS zoom */
#MATIES-root[data-touch="true"] .graph-search-input { font-size: max(16px, 0.9rem); }
#MATIES-root[data-touch="true"] #m-search { font-size: max(16px, 0.9rem); }
/* Disable hover-only effects on touch */
#MATIES-root[data-touch="true"] .pg-bento-cell:hover { transform: none !important; }
#MATIES-root[data-touch="true"] .adv-card:hover { box-shadow: none; }
/* Smooth momentum scrolling */
#MATIES-root[data-touch="true"] #m-content {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
#MATIES-root[data-touch="true"] #m-terminal {
-webkit-overflow-scrolling: touch;
}
/* Scroll snap on nav */
#MATIES-root[data-touch="true"] #m-nav-bar {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
#MATIES-root[data-touch="true"] .m-nav-btn {
scroll-snap-align: start;
}
/* ══════════════════════════════════════════════════════════════════════
EXTRA-WIDE / 4K [data-tier="wide"] or [data-tier="xl"]
══════════════════════════════════════════════════════════════════════ */
#MATIES-root[data-tier="wide"] .pg-inner,
#MATIES-root[data-tier="xl"] .pg-inner {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
#MATIES-root[data-tier="wide"] .graph-layout {
grid-template-columns: 1fr 420px;
}
#MATIES-root[data-tier="wide"] #curr-graph-container {
min-height: 700px;
}
/* ══════════════════════════════════════════════════════════════════════
REAL VIEWPORT HEIGHT — uses --real-vh set by responsive.js
Replaces 100vh which breaks on iOS Safari
══════════════════════════════════════════════════════════════════════ */
#MATIES-root {
height: calc(var(--real-vh, 1dvh) * 100);
min-height: calc(var(--real-vh, 1dvh) * 100);
}
#m-boot,
#m-terminal { height: calc(var(--real-vh, 1dvh) * 100); }
/* ══════════════════════════════════════════════════════════════════════
GRAPH SIDEBAR: always scroll on small screens
══════════════════════════════════════════════════════════════════════ */
#MATIES-root[data-tier="xs"] .graph-sidebar,
#MATIES-root[data-tier="sm"] .graph-sidebar {
border-top: 1px solid var(--page-border);
padding-top: 16px;
margin-top: 4px;
}
#MATIES-root[data-tier="xs"] #curr-graph-container,
#MATIES-root[data-tier="sm"] #curr-graph-container {
border-radius: 4px;
}
/* ══════════════════════════════════════════════════════════════════════
BOTTOM SAFE AREA — prevents content hiding behind home indicator
══════════════════════════════════════════════════════════════════════ */
#MATIES-root[data-touch="true"] #m-prompt-area {
padding-bottom: max(calc(var(--safe-bottom, 0px) + 8px), 12px);
}
#MATIES-root[data-touch="true"] #m-page {
padding-bottom: var(--safe-bottom, 0px);
}