/* ============================================================ /frontend/public/css/base.css Frontend design system - Animated Glassmorphism UI. Brand palette (mirrors the logo colors): green #009933 blue #333399 red #ff3333 violet #8b5cf6 = accent (green stays the master / primary colour) Every colour is a CSS custom property with light + .dark variants, so the whole site re-colours from the tokens below. Sections: ============= 1. Design tokens (brand colours + glass surfaces + text) 2. Base / reset + transparent 4-colour gradient background 3. Animated background mesh (floating brand-colour blobs) 4. Layout helpers & section headers 5. Glass navigation 6. Glass buttons 7. Glassmorphism cards + animated hero 8. Notice list 9. Footer with brand-colour top bar 10. CMS page content 11. Motion (keyframes + reduced-motion kill switch) ============================================================ */ /* ------------------------- 1. Tokens ------------------------- */ :root { --font-latin: 'Poppins', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-bangla: 'Hind Siliguri', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Brand palette - logo colours */ --green-50: #eaf6ee; --green-100: #d3f0de; --green-500: #00a93c; --green-600: #009933; /* logo green */ --green-700: #007e2a; --green-800: #00641f; --red-50: #ffecec; --red-100: #ffdcdc; --red-400: #ff5c5c; --red-500: #ff3333; /* logo red */ --red-600: #e62e2e; --red-700: #c92a2a; --red-800: #8f1d1d; --blue-50: #eaeaf4; --blue-100: #dcdcea; --blue-400: #4f4fae; --blue-500: #4141a6; --blue-600: #333399; /* logo blue */ --blue-700: #2b2b80; --blue-800: #1f1f59; --purple-50: #f5f0fd; --purple-100: #ece3fb; --purple-400: #a78bfa; --purple-500: #8b5cf6; /* accent violet */ --purple-600: #7c3aed; --purple-700: #6d28d9; --purple-800: #4c1d95; --amber-50: #fff8e6; --amber-100: #fdeec8; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --amber-700: #b45309; --amber-800: #92400e; /* Surfaces & text */ --bg-primary: #ffffff; --bg-secondary: #f1f5f9; --border-color: #e2e8f0; --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; /* Glass surfaces */ --glass-card: rgba(255, 255, 255, .55); --glass-card-strong: rgba(255, 255, 255, .72); --glass-nav: rgba(255, 255, 255, .60); --glass-menu: rgba(255, 255, 255, .92); /* opaque-ish: dropdown panels */ --glass-input: rgba(255, 255, 255, .55); --glass-section: rgba(241, 245, 249, .38); --glass-border: rgba(255, 255, 255, .38); --glass-border-strong: rgba(255, 255, 255, .60); --glass-shadow: 0 8px 32px rgba(31, 38, 60, .12); --glass-glow: 0 8px 24px rgba(0, 153, 51, .16); --green-wash: rgba(0, 153, 51, .16); /* dropdown-row hover tint */ color-scheme: light; } /* Dark theme: repoint the same token names (class strategy on ) */ html.dark { --green-50: #0b3320; --green-100: #0e3f26; --green-500: #28c95c; --green-600: #16b347; --green-700: #40d16e; --green-800: #afecc6; --red-50: #3d1010; --red-100: #4a1313; --red-400: #ff6b6b; --red-500: #ff5c5c; --red-600: #ff7a7a; --red-700: #ff9999; --red-800: #ffb3b3; --blue-50: #20204d; --blue-100: #28285c; --blue-400: #6f6fc2; --blue-500: #7d7dc9; --blue-600: #8a8ad1; --blue-700: #9d9dda; --blue-800: #b4b4e6; --purple-50: #251a4d; --purple-100: #2e215e; --purple-400: #b79cfb; --purple-500: #8b5cf6; --purple-600: #7c3aed; --purple-700: #6d28d9; --purple-800: #5b21b6; --amber-50: #3d2a08; --amber-100: #4a340c; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #fbbf24; --amber-700: #fcd34d; --amber-800: #fde68a; --bg-primary: #0f172a; --bg-secondary: #1e293b; --border-color: #334155; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --glass-card: rgba(15, 23, 42, .45); --glass-card-strong: rgba(15, 23, 42, .62); --glass-nav: rgba(15, 23, 42, .52); --glass-menu: rgba(15, 23, 42, .92); /* opaque-ish: dropdown panels */ --glass-input: rgba(30, 41, 59, .45); --glass-section: rgba(30, 41, 59, .30); --glass-border: rgba(255, 255, 255, .10); --glass-border-strong: rgba(255, 255, 255, .18); --glass-shadow: 0 8px 32px rgba(0, 0, 0, .38); --glass-glow: 0 8px 24px rgba(16, 185, 66, .22); --green-wash: rgba(40, 201, 92, .24); /* dropdown-row hover tint */ color-scheme: dark; } /* ------------------- 2. Base / reset ------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background-color: var(--bg-primary); transition: background-color .2s ease; } body { /* Transparent color-gradient background: four pinned brand-colour radial glows over the page surface. */ background: radial-gradient(46rem 30rem at 8% 0%, rgba(0, 153, 51, .10), transparent 62%), radial-gradient(40rem 28rem at 96% 12%, rgba(51, 51, 153, .10), transparent 62%), radial-gradient(36rem 26rem at 78% 95%, rgba(255, 153, 0, .09), transparent 62%), radial-gradient(32rem 24rem at 6% 78%, rgba(255, 51, 51, .08), transparent 62%), var(--bg-primary); background-attachment: fixed; color: var(--text-primary); font-family: var(--font-latin); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } /* Slightly stronger brand glows on the dark theme */ html.dark body { background: radial-gradient(46rem 30rem at 8% 0%, rgba(0, 153, 51, .16), transparent 62%), radial-gradient(40rem 28rem at 96% 12%, rgba(63, 63, 168, .16), transparent 62%), radial-gradient(36rem 26rem at 78% 95%, rgba(139, 92, 246, .16), transparent 62%), radial-gradient(32rem 24rem at 6% 78%, rgba(255, 51, 51, .10), transparent 62%), var(--bg-primary); background-attachment: fixed; } /* Bangla pages prefer the Bangla typeface first */ html[lang="bn"] body { font-family: var(--font-bangla); } h1, h2, h3, h4, h5, h6 { margin: 0 0 .75rem; line-height: 1.25; } p { margin: 0 0 1rem; } a { color: var(--green-600); } a:hover { color: var(--green-700); } img { max-width: 100%; } ::selection { background: var(--green-500); color: #fff; } :focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; border-radius: 2px; } input, textarea, select { font-family: inherit; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green-500) !important; box-shadow: 0 0 0 3px rgba(0, 153, 51, .18); } /* --------------- 3. Animated background mesh --------------- */ /* Decorative fixed layer behind the glass panels (added by base.twig). */ .bg-mesh { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .bg-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .20; will-change: transform; } html.dark .bg-blob { opacity: .34; } .bg-blob-1 { width: 44vw; height: 44vw; left: -10vw; top: -8vw; background: radial-gradient(circle at 35% 35%, rgba(0, 153, 51, .95), transparent 70%); animation: float-a 26s ease-in-out infinite; } .bg-blob-2 { width: 40vw; height: 40vw; right: -12vw; top: 6vh; background: radial-gradient(circle at 60% 40%, rgba(51, 51, 153, .95), transparent 70%); animation: float-b 30s ease-in-out infinite; } .bg-blob-3 { width: 46vw; height: 46vw; right: 8vw; bottom: -14vh; background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, .90), transparent 70%); animation: float-a 34s ease-in-out infinite reverse; } .bg-blob-4 { width: 38vw; height: 38vw; left: 6vw; bottom: -10vh; background: radial-gradient(circle at 45% 55%, rgba(255, 51, 51, .85), transparent 70%); animation: float-b 28s ease-in-out infinite reverse; } /* --------------- 4. Layout helpers --------------- */ .container { max-width: 72rem; margin: 0 auto; padding: 0 1rem; } main { position: relative; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .mt-2 { margin-top: .5rem; } .mt-4 { margin-top: 1rem; } .mt-8 { margin-top: 2rem; } .mb-8 { margin-bottom: 2rem; } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .justify-center { justify-content: center; } .items-center { align-items: center; } .gap-2 { gap: .5rem; } .text-center { text-align: center; } .section-header { text-align: center; margin-bottom: 2.5rem; } .section-header h2 { display: inline-block; position: relative; font-size: 1.75rem; margin: 0; padding-bottom: .5rem; } .section-header h2::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 5.5rem; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--green-500), var(--purple-500), var(--red-500), var(--blue-600)); background-size: 300% 100%; animation: grad-sweep 8s linear infinite; } /* Responsive grids */ .grid-2, .grid-3, .grid-4 { display: grid; gap: 1.5rem; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* Translucent full-width section (used by sections over the mesh) */ .glass-section { background: var(--glass-section); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); } /* ------------------- 5. Glass navigation ------------------- */ .navbar { position: sticky; top: 0; /* Whole-toolbar stacking context high above page content: the dropdowns inside the nav only ever layer relative to THIS context, so the nav's z-index is their effective ceiling against the page (anything with a higher z-index would paint over an open menu). Page sections max out far lower (hero z 1-3, mesh z 0), so 1000 keeps every open dropdown reliably on top. */ z-index: 1000; background: var(--glass-nav); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border-bottom: 1px solid var(--glass-border); box-shadow: 0 4px 24px rgba(31, 38, 60, .08); } .navbar-inner { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; } .navbar-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text-primary); font-weight: 600; white-space: nowrap; } .navbar-logo span { font-size: .95rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; } .navbar-logo i { color: var(--green-600); } .navbar-links { display: flex; align-items: center; gap: .9rem; list-style: none; margin: 0; padding: 0; } .navbar-links li { white-space: nowrap; } .navbar-links a { position: relative; text-decoration: none; color: var(--text-secondary); font-weight: 500; font-size: .8125rem; white-space: nowrap; transition: color .15s ease; } .navbar-links a:hover { color: var(--green-600); } .navbar-links a.active { color: var(--green-600); font-weight: 600; } .navbar-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--green-500), var(--blue-600), var(--purple-500)); background-size: 200% 100%; animation: grad-sweep 6s linear infinite; } .navbar-actions { display: flex; align-items: center; gap: .5rem; } .lang-switch, .theme-toggle, .mobile-menu-btn { appearance: none; border: 1px solid var(--glass-border-strong); background: var(--glass-input); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text-primary); border-radius: .55rem; padding: .45rem .8rem; font-family: inherit; font-size: .875rem; cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .lang-switch:hover, .theme-toggle:hover, .mobile-menu-btn:hover { border-color: var(--green-600); color: var(--green-600); } .mobile-menu-btn { display: none; } /* Mobile drawer (toggled by /public/js/main.js — .menu-open on #site-nav) */ .mobile-menu { display: none; } .navbar.menu-open .mobile-menu { display: block; } .mobile-menu { max-height: min(72vh, 34rem); overflow-y: auto; overflow-x: hidden; border-top: 1px solid var(--glass-border); box-shadow: 0 12px 32px rgba(31, 38, 60, .12); } .mobile-menu .navbar-links { flex-direction: column; align-items: stretch; gap: .35rem; padding: .75rem 1rem 1.1rem; } .mobile-menu .navbar-links a { display: flex; align-items: center; gap: .45rem; padding: .6rem .75rem; border-radius: .5rem; } .mobile-menu .navbar-links a:hover { background: var(--glass-section); } @media (max-width: 1024px) { .navbar-links { display: none; } .navbar-links.mobile-open { display: flex; } .mobile-menu-btn { display: inline-flex; } } /* Admin-driven menu tree: nested dropdowns + badges (see partials/menu_tree.twig). Desktop dropdowns open on CSS hover/focus-within; the touch/mobile copy is toggled by main.js (.menu-open on #site-nav for the drawer, .open on each branch for nested dropdowns). */ .nav-ico { font-size: .8em; opacity: .85; } .nav-chev { font-size: .625rem; opacity: .55; margin-left: .2rem; } .nav-badge { display: inline-block; margin-left: .45rem; padding: .12rem .5rem; border-radius: 999px; font-size: .625rem; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: linear-gradient(135deg, var(--purple-700), var(--purple-500)); } .has-dropdown { position: relative; } .dropdown-menu { position: absolute; top: calc(100% + .5rem); left: 0; z-index: 60; /* layers above its sibling nav rows within the nav context */ min-width: 15rem; margin: 0; padding: .35rem; list-style: none; /* Near-opaque surface, no backdrop-filter: a backdrop-filter child inside a backdrop-filter toolbar (this panel lives inside the blur-glass .navbar) can get flattened by Chromium so it paints back UNDER the nav's own glass strip on some frames — the "menu behind the navbar" glitch. The panel's own blur is dropped; the nav keeps its blur, the panel keeps the border + shadow finish, and an opaque-ish surface always paints deterministically on top. */ background: var(--glass-menu); border: 1px solid var(--glass-border-strong); border-radius: .8rem; box-shadow: var(--glass-shadow); display: none; } /* Nested levels inside a dropdown: flatten the panel into an indented group */ .dropdown-menu .has-dropdown { position: static; } .dropdown-menu .dropdown-menu { position: static; top: auto; left: auto; min-width: 0; /* No margin above a nested group: the previous margin-top (.15rem) was a second dead hover-zone on the way to the nested rows. The breathing room is now the panel's own top padding, so :hover never drops off between a nested parent row and its children. */ margin: 0 0 .25rem; padding: .4rem 0 0 1rem; border: 0; border-left: 1px solid var(--glass-border-strong); border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .dropdown-menu a { display: flex; align-items: center; gap: .35rem; padding: .5rem .7rem; border-radius: .55rem; font-size: .875rem; font-weight: 500; color: var(--text-secondary); white-space: nowrap; transition: background-color .15s ease, color .15s ease; } /* Deeper hover highlight: the old glass-section wash (alpha .30-.38) was nearly invisible on the opaque panel. A green tint reads clearly while keeping the brand colour in the row. Tinted via the --green-wash token so light/dark repoint it without per-theme rule forks (frontend-design-system skill). */ .dropdown-menu a:hover { background: var(--green-wash); color: var(--green-700); } html.dark .dropdown-menu a:hover { color: var(--green-500); } /* Disabled unresolved rows must stay visually inert in both themes */ .dropdown-menu a[aria-disabled="true"]:hover { background: transparent; color: var(--text-secondary); } html.dark .dropdown-menu a[aria-disabled="true"]:hover { background: transparent; color: var(--text-secondary); } .dropdown-menu a.active { color: var(--green-600); font-weight: 600; } /* Touch/mobile variant (.open from main.js) — open in place, indented children */ .mobile-menu .has-dropdown { position: static; } .mobile-menu .dropdown-menu { position: static; min-width: 0; margin: 0 0 .25rem; padding: 0 0 0 .75rem; border: 0; border-left: 1px solid var(--glass-border-strong); border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .mobile-menu .dropdown-menu a { white-space: normal; display: flex; } /* Tapping a parent in the mobile tree toggles the [open] class (main.js) */ .mobile-menu .has-dropdown.open > .dropdown-menu { display: block; } @media (min-width: 1025px) { .has-dropdown:hover > .dropdown-menu, .has-dropdown:focus-within > .dropdown-menu { display: block; } .navbar.menu-open .mobile-menu { display: none; } /* Bridge only for the desktop row (the mobile drawer manages its panels with .open clicks — no hover gap there). */ .navbar-inner > .navbar-links > .has-dropdown > .dropdown-menu::before { content: ""; position: absolute; top: -.75rem; /* spans the 0.5rem visual gap (+ safety) */ left: 0; right: 0; height: .75rem; } } /* Chevron + open/drag states */ .nav-chev { transition: transform .18s ease; } .navbar-links > li.has-dropdown:hover > a .nav-chev, .navbar-links > li.has-dropdown:focus-within > a .nav-chev, .mobile-menu .has-dropdown.open > a .nav-chev { transform: rotate(180deg); } .mobile-menu .has-dropdown.open > a { background: var(--glass-section); color: var(--green-600); } /* Unresolved dropdown leaves (page target missing) read as intentionally disabled */ .dropdown-menu a[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .dropdown-menu a[aria-disabled="true"]:hover { background: transparent; color: var(--text-secondary); } /* Slug-less parent whose child page is active (e.g. "Academic" on academic pages) */ .navbar-links li.has-active > a { color: var(--green-600); font-weight: 600; } /* ------------------- 6. Glass buttons ------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1.35rem; border: 1px solid var(--glass-border-strong); border-radius: .6rem; font-family: inherit; font-size: .9375rem; font-weight: 500; line-height: 1.2; text-decoration: none; color: var(--text-primary); background: var(--glass-input); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(31, 38, 60, .08); cursor: pointer; transition: filter .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease; } .btn:hover { filter: brightness(.96); box-shadow: 0 6px 18px rgba(0, 153, 51, .14); } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(135deg, var(--green-700), var(--green-600) 55%, var(--green-500)); background-size: 160% 160%; border-color: transparent; color: #fff; box-shadow: 0 6px 20px rgba(0, 153, 51, .30); } .btn-primary:hover { filter: brightness(1.05); background-position: 100% 100%; box-shadow: 0 8px 24px rgba(0, 153, 51, .38); } .btn-accent { background: linear-gradient(135deg, var(--purple-700), var(--purple-500)); border-color: transparent; color: #fff; box-shadow: 0 6px 20px rgba(124, 58, 237, .32); } .btn-accent:hover { filter: brightness(1.05); } .btn-danger { background: linear-gradient(135deg, var(--red-700), var(--red-500)); border-color: transparent; color: #fff; box-shadow: 0 6px 20px rgba(255, 51, 51, .26); } .btn-danger:hover { filter: brightness(1.05); } .btn-outline { background: transparent; color: var(--text-primary); border-color: var(--glass-border-strong); box-shadow: none; } .btn-outline:hover { border-color: var(--green-600); color: var(--green-600); background: rgba(0, 153, 51, .10); box-shadow: 0 6px 18px rgba(0, 153, 51, .12); } /* ---------------- 7. Glassmorphism cards + hero ---------------- */ .card { position: relative; background: var(--glass-card); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--glass-border-strong); border-radius: 1.15rem; padding: 1.5rem; box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .30); animation: card-in .55s cubic-bezier(.22, .68, .35, 1) backwards; } .card:hover { transform: translateY(-.5rem); } .card h3 { margin-top: 0; } .card h4 { margin: 0; } /* Brand-colour glow bar that sweeps in on hover */ a.card::before { content: ""; position: absolute; left: 1.15rem; right: 1.15rem; top: 0; height: 3px; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, var(--green-500), var(--blue-400), var(--purple-400), var(--red-400)); background-size: 300% 100%; opacity: 0; transform: scaleX(.4); transform-origin: left center; transition: opacity .2s ease, transform .2s ease; } a.card:hover::before { opacity: 1; transform: scaleX(1); animation: grad-sweep 2.4s linear infinite; } a.card { display: block; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } a.card:hover { transform: translateY(-6px); border-color: rgba(0, 153, 51, .45); box-shadow: 0 18px 40px rgba(31, 38, 60, .14), var(--glass-glow); } .hero { position: relative; overflow: hidden; /* Animated transparent-gradient: logo green -> blue -> violet -> red */ background: linear-gradient(120deg, var(--green-700) 0%, var(--green-800) 20%, var(--blue-600) 45%, var(--blue-800) 60%, var(--purple-600) 82%, var(--red-600) 100%); background-size: 300% 300%; animation: hero-shift 18s ease-in-out infinite; color: #fff; text-align: center; padding: 6rem 1rem; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 28% 18%, rgba(255, 255, 255, .18), transparent 62%), radial-gradient(50% 50% at 78% 82%, rgba(255, 255, 255, .12), transparent 62%); pointer-events: none; } .hero .container { position: relative; z-index: 1; } .hero h1 { font-size: clamp(2.1rem, 4vw, 3rem); margin: 0 0 .75rem; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .18); } .hero p { font-size: 1.125rem; opacity: .95; margin: 0 0 1.5rem; } /* ------------------- 7b. Hero slider (homepage slides) ------------------- Renders slides from GET /v1/sliders: image/video backgrounds with a dark scrim for text legibility, localized caption + optional CTA (16:7 box), prev/next arrows and dot indicators. Gradient slide variant reuses the animated brand gradient when a slide has no media. */ .hero-slider { height: clamp(26rem, 60vh, 42rem); padding: 0; text-align: left; } .hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s ease; } .hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hero-slide--gradient { background: linear-gradient(120deg, var(--green-600) 0%, var(--green-700) 20%, var(--blue-600) 45%, var(--blue-800) 60%, var(--purple-600) 82%, var(--red-600) 100%); background-size: 300% 300%; animation: hero-shift 18s ease-in-out infinite; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 26, .30) 0%, rgba(8, 12, 26, .42) 45%, rgba(8, 12, 26, .82) 100%), linear-gradient(90deg, rgba(8, 12, 26, .38) 0%, transparent 55%); } .hero-copy { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 4rem; padding-bottom: 4rem; } .hero-slide-kicker { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .875rem; padding: .35rem .85rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: .8125rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #fff; } .hero-slide .hero-copy h1 { max-width: 22ch; margin-bottom: 1.1rem; } .hero-slide .hero-copy .btn-accent { font-size: 1rem; padding: .8rem 1.9rem; } .hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .30); background: rgba(10, 15, 30, .38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 1rem; cursor: pointer; transition: background-color .15s ease; } .hero-nav:hover { background: rgba(0, 169, 60, .50); } .hero-prev { left: 1rem; } .hero-next { right: 1rem; } .hero-dots { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 3; display: flex; gap: .5rem; } .hero-dot { width: .55rem; height: .55rem; padding: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .30); cursor: pointer; transition: width .2s ease, background-color .2s ease; } .hero-dot.is-active { width: 1.6rem; background: #fff; border-color: #fff; } @media (max-width: 768px) { .hero-slider { height: clamp(22rem, 62vh, 30rem); } .hero-nav { display: none; } .hero-copy { align-items: center; text-align: center; } .hero-slide .hero-copy h1 { max-width: none; } } /* ------------------- 8. Notice list ------------------- */ .notice-list { list-style: none; margin: 0; padding: 0; } .notice-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; border-top: 1px solid var(--glass-border); } .notice-item:first-child { border-top: none; } .notice-item.pinned { background: linear-gradient(90deg, var(--green-50), transparent 70%); border-left: 3px solid var(--purple-500); } .notice-date { flex: 0 0 auto; text-align: center; min-width: 3.75rem; padding: .4rem .5rem; background: var(--glass-input); border: 1px solid var(--glass-border-strong); border-radius: .6rem; color: var(--text-secondary); line-height: 1.25; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .notice-pin { color: var(--purple-500); margin-right: .25rem; } /* ------------------- 9. Footer ------------------- */ .footer { position: relative; background: linear-gradient(180deg, rgba(15, 23, 42, .86), rgba(7, 11, 25, .96)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #cbd5e1; padding: 3.5rem 1rem 0; margin-top: 3rem; border-top: 1px solid var(--glass-border); } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--green-500), var(--blue-600), var(--purple-500), var(--red-500)); background-size: 300% 100%; animation: grad-sweep 10s linear infinite; } .footer h3 { color: #f8fafc; font-size: 1.05rem; margin-bottom: 1rem; } .footer a { color: #cbd5e1; text-decoration: none; transition: color .15s ease; } .footer a:hover { color: var(--green-500); } .footer p i { margin-right: .5rem; color: var(--green-400, #4ade80); } .footer-grid { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 2.5rem; } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 1.25rem 1rem; text-align: center; font-size: .875rem; color: #94a3b8; } /* ---------------- 10. CMS page content ---------------- */ .card img { max-width: 100%; height: auto; border-radius: .375rem; } .card table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9375rem; } .card th, .card td { border: 1px solid var(--glass-border); padding: .5rem .75rem; text-align: left; } .card th { background: var(--glass-section); } .card blockquote { margin: 1rem 0; padding: .6rem 1rem; border-left: 4px solid var(--green-500); background: var(--glass-section); border-radius: 0 .5rem .5rem 0; } /* ---------------- 10b. Rich CMS content (pe_editor output) ---------------- Shared typography for HTML saved by the admin pe_editor WYSIWYG (h2/h3/p/ul/ol/li/b/i/u/a/blockquote/table). Apply `.rich-content` to the wrapper that outputs `{{ ... | rich }}` so every dynamically rendered page (page.twig, about, academic, contact, privacy-policy) looks consistent and adapts to light/dark via the design tokens. */ .rich-content { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.8; word-wrap: break-word; } .rich-content > :first-child { margin-top: 0; } .rich-content > :last-child { margin-bottom: 0; } .rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4, .rich-content h5 { color: var(--text-primary); font-weight: 700; line-height: 1.35; margin: 1.5rem 0 .55rem; } .rich-content h1 { font-size: 1.55rem; } .rich-content h2 { font-size: 1.32rem; } .rich-content h3 { font-size: 1.12rem; } .rich-content h4 { font-size: 1.02rem; } .rich-content h5 { font-size: .95rem; } .rich-content p { margin: 0 0 1rem; } .rich-content p:last-child { margin-bottom: 0; } .rich-content ul, .rich-content ol { margin: .5rem 0 1rem; padding-left: 1.5rem; } .rich-content ul { list-style: disc; } .rich-content ol { list-style: decimal; } .rich-content li { margin: .3rem 0; } .rich-content li > ul, .rich-content li > ol { margin: .25rem 0; } .rich-content strong, .rich-content b { color: var(--text-primary); font-weight: 600; } .rich-content em, .rich-content i { font-style: italic; } .rich-content u { text-decoration: underline; } .rich-content a { color: var(--purple-500); text-decoration: underline; word-break: break-word; transition: color .15s ease; } .rich-content a:hover { color: var(--purple-600); } .rich-content blockquote { margin: 1rem 0; padding: .75rem 1rem; border-left: 3px solid var(--purple-500); background: var(--glass-section); border-radius: 0 .6rem .6rem 0; color: var(--text-secondary); font-style: italic; } .rich-content blockquote p:last-child { margin-bottom: 0; } .rich-content img { max-width: 100%; height: auto; border-radius: .8rem; margin: .5rem 0; } /* Image + text split (pe_editor "two-col" block). The admin emits a Tailwind grid wrapper (
) with two child
s (image | text). Because CMS content is dynamic DB HTML, we style it explicitly here so it reliably renders side-by-side on desktop and stacked on mobile — independent of Tailwind's runtime class scanning. */ .rich-content .grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; margin: 1.5rem 0; } .rich-content .grid > div { min-width: 0; } .rich-content .grid img { width: 100%; height: auto; margin: 0; } @media (min-width: 768px) { .rich-content .grid { grid-template-columns: 1fr 1fr; } } /* Generic multi-column grids (pe_editor "grid-2/3/4" blocks). The admin emits
with N child
s. Styled explicitly here (like the two-col split above) so dynamic DB HTML renders reliably — 1 column on mobile, N columns ≥768px — independent of Tailwind's runtime class scanning. */ .rich-content .grid-cols-2, .rich-content .grid-cols-3, .rich-content .grid-cols-4 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 1.5rem 0; } .rich-content .grid-cols-2 > div, .rich-content .grid-cols-3 > div, .rich-content .grid-cols-4 > div { min-width: 0; } @media (min-width: 768px) { .rich-content .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rich-content .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rich-content .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 640px) { .rich-content .grid-cols-3, .rich-content .grid-cols-4 { grid-template-columns: 1fr; } } .rich-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9375rem; } .rich-content th, .rich-content td { border: 1px solid var(--glass-border); padding: .55rem .75rem; text-align: left; vertical-align: top; } .rich-content th { background: var(--glass-section); color: var(--text-primary); font-weight: 600; } .rich-content hr { border: none; border-top: 1px solid var(--glass-border-strong); margin: 1.5rem 0; } @media (max-width: 640px) { .rich-content { font-size: .98rem; } .rich-content table { font-size: .875rem; } .rich-content th, .rich-content td { padding: .45rem .55rem; } } /* ------------------- 11. Motion ------------------- */ @keyframes grad-sweep { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } @keyframes hero-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes float-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 5vh) scale(1.12); } } @keyframes float-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5vw, -4vh) scale(.92); } } @keyframes card-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }