/** * MMI TVLA — Main Stylesheet * UPenn-inspired academic design system * * @package MMI_TVLA * @version 2.0.0 */ /* ========================================================================== 1. CSS Variables & Design Tokens ========================================================================== */ :root { /* Brand colors */ --color-primary: #0066cc; --color-primary-dark: #004a99; --color-primary-light: #3385d6; --color-navy: #002855; /* header / footer background */ --color-navy-dark: #001a38; --color-accent: #d4a017; /* warm gold CTA accent */ --color-accent-dark: #b88a12; --color-secondary: #00843d; --color-secondary-dark: #006830; /* Text */ --color-text: #1a1a1a; --color-text-muted: #555555; --color-text-lighter: #888888; --color-on-dark: #ffffff; --color-on-dark-muted: rgba(255, 255, 255, 0.75); /* Backgrounds */ --color-bg: #ffffff; --color-bg-warm: #f8f7f4; /* warm off-white sections */ --color-bg-cool: #f0f4f8; --color-bg-dark: #e4e4e4; /* Borders */ --color-border: #d0d0d0; --color-border-light: #ebebeb; /* Typography */ --font-serif: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-sans: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Border radius */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 9999px; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14); --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.16); /* Layout */ --container-max: 1400px; --container-padding: clamp(1rem, 4vw, 2rem); /* Header */ --header-topbar-h: 38px; --header-main-h: 70px; } /* ========================================================================== 2. Reset & Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; max-width: 100%; /* Scroll width follows ; body overflow-x alone does not stop page drag when inner layout exceeds viewport. */ overflow-x: hidden; } body { font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; color: var(--color-text); background: var(--color-bg); margin: 0; padding: 0; /* Horizontal bleed only; overflow-y stays visible so sticky header can stick. */ overflow-x: hidden; overflow-x: clip; } img, video, svg { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); transition: color 0.2s ease; } a:hover { color: var(--color-primary-dark); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); line-height: 1.2; color: var(--color-text); margin-top: 0; } p { margin-top: 0; } ul, ol { margin: 0; padding: 0; } button { cursor: pointer; font-family: var(--font-sans); } /* Screen reader only */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; white-space: nowrap; } /* WordPress admin bar — toolbar row can be wider than the viewport on mobile */ body.admin-bar #wpadminbar { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } body.admin-bar #wpadminbar #wp-toolbar { max-width: 100%; box-sizing: border-box; } @media screen and (max-width: 782px) { body.admin-bar #wpadminbar { /* Core uses 46px bar height on small screens; keep clips inside the bar only */ overscroll-behavior-x: contain; } } /* ========================================================================== 3. Layout ========================================================================== */ #page.site { min-width: 0; } .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } /* Override GeneratePress float/flex sidebar layout — our templates are always full-width */ #content.site-content, .site-content { min-height: 50vh; min-width: 0; display: block !important; width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; } #main.site-main, .site-main { width: 100% !important; max-width: 100% !important; min-width: 0; float: none !important; margin: 0 !important; } /* Hide any sidebar GeneratePress may try to render */ #secondary, .widget-area, .is-right-sidebar, .is-left-sidebar { display: none !important; } /* * GeneratePress (parent): .no-sidebar .entry-content .alignfull uses 100vw. * 100vw includes the scrollbar gutter, so full-bleed blocks are wider than the * layout and cause horizontal scroll — especially with our forced no-sidebar layout. */ .no-sidebar .entry-content .alignfull { margin-left: 0; margin-right: 0; max-width: 100%; width: 100%; } /* Default pages (page.php): same max width as .container / archives */ .page-default__inner { padding-block: var(--space-12) var(--space-20); } .page-default__header { margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 3px solid var(--color-accent); } .page-default__title { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--color-navy); margin: 0; } .page-default__content > *:first-child { margin-top: 0; } /* Long URLs, tables, and embeds from the block editor */ .entry-content { overflow-wrap: break-word; word-break: break-word; } .entry-content :where(img, iframe, video) { max-width: 100%; height: auto; } .entry-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .entry-content table { max-width: 100%; } .page-links { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-border-light); font-size: 0.95rem; } .page-links__title { font-weight: 600; margin-right: var(--space-2); } /* ========================================================================== 4. Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.65rem 1.5rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; border-radius: var(--radius-sm); border: 2px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; white-space: nowrap; cursor: pointer; } .btn--primary { background: var(--color-accent); color: var(--color-navy); border-color: var(--color-accent); } .btn--primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-navy); } .btn--secondary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .btn--secondary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; } .btn--outline { background: transparent; color: var(--color-on-dark); border-color: rgba(255, 255, 255, 0.6); } .btn--outline:hover { background: rgba(255, 255, 255, 0.15); border-color: white; color: white; } .btn--outline-dark { background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn--outline-dark:hover { background: var(--color-primary); color: white; } .btn--lg { padding: 0.85rem 2rem; font-size: 1rem; } /* ========================================================================== 5. Site Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 1000; transition: box-shadow 0.3s ease; } .site-header.is-scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35); } /* --- Top bar --- */ .site-header__topbar { background: var(--color-navy-dark); /* min-height: content (e.g. Polylang) must not be clipped — fixed height caused lang links to paint over .site-header__main */ min-height: var(--header-topbar-h); display: flex; align-items: center; } .site-header__topbar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } .site-header__kpi-link { font-size: 0.78rem; color: var(--color-on-dark-muted); text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.2s; } .site-header__kpi-link:hover { color: var(--color-on-dark); } .site-header__topbar-right { display: flex; align-items: center; gap: var(--space-6); } /* Topbar nav (resources menu) */ .topbar-menu { display: flex; list-style: none; gap: var(--space-6); } .topbar-menu a { font-size: 0.78rem; color: var(--color-on-dark-muted); text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s; } .topbar-menu a:hover { color: var(--color-on-dark); } /* Language switcher (shared) */ .lang-switcher ul { display: flex; list-style: none; gap: var(--space-2); } .lang-switcher a { font-size: 0.78rem; font-weight: 600; color: var(--color-on-dark-muted); text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border-radius: var(--radius-sm); transition: background 0.2s, color 0.2s; } .lang-switcher a:hover, .lang-switcher .current-lang a { background: rgba(255, 255, 255, 0.15); color: var(--color-on-dark); } /* Top bar: keep languages on one line (Polylang / plugin styles may stack links vertically) */ .lang-switcher--topbar { flex-shrink: 0; align-items: center; display: flex; gap: 20px; } .lang-switcher--topbar ul { flex-direction: row; flex-wrap: nowrap; align-items: center; } .lang-switcher--topbar li { flex: 0 0 auto; } /* --- Main nav bar --- */ .site-header__main { background: var(--color-navy); } .site-header__main > .container { display: flex; align-items: center; gap: var(--space-8); height: var(--header-main-h); } /* Logo */ .site-header__logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex-shrink: 0; } .site-header__logo-img { display: block; width: 80px; height: 80px; flex-shrink: 0; } .site-header__logo-full { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); line-height: 1.3; max-width: 160px; } /* Primary desktop menu */ .site-header__nav { flex: 1; } .primary-menu { display: flex; list-style: none; margin: 0; padding: 0; height: var(--header-main-h); align-items: stretch; } .primary-menu > li { position: relative; display: flex; align-items: stretch; } .primary-menu > li > a { display: flex; align-items: center; padding: 0 var(--space-5); color: rgba(255, 255, 255, 0.88); text-decoration: none; font-size: 0.88rem; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; border-bottom: 3px solid transparent; transition: color 0.2s, border-color 0.2s, background 0.2s; } .primary-menu > li > a:hover, .primary-menu > li.current-menu-item > a, .primary-menu > li.current-menu-ancestor > a { color: var(--color-on-dark); border-bottom-color: var(--color-accent); background: rgba(255, 255, 255, 0.06); } /* Dropdown indicator */ .primary-menu > li.menu-item-has-children > a::after { content: ''; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-left: 6px; opacity: 0.6; transition: transform 0.2s; } .primary-menu > li.menu-item-has-children:hover > a::after, .primary-menu > li.menu-item-has-children:focus-within > a::after { transform: rotate(180deg); } /* Dropdown menu */ .primary-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--color-bg); border-top: 3px solid var(--color-accent); box-shadow: var(--shadow-lg); list-style: none; margin: 0; padding: var(--space-2) 0; z-index: 200; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; pointer-events: none; } /* Direct child only — do not match nested .sub-menu or the 3rd level opens with the 1st dropdown */ .primary-menu > li:hover > .sub-menu, .primary-menu > li:focus-within > .sub-menu, .primary-menu > li.dropdown-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .primary-menu .sub-menu li a { display: block; padding: 0.55rem var(--space-6); color: var(--color-text); text-decoration: none; font-size: 0.88rem; font-weight: 400; transition: background 0.15s, color 0.15s; } .primary-menu .sub-menu li a:hover { background: var(--color-bg-cool); color: var(--color-primary); } /* Third+ menu level: flyout to the right of parent item */ .primary-menu .sub-menu li.menu-item-has-children { position: relative; } .primary-menu .sub-menu .menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .primary-menu .sub-menu .menu-item-has-children > a::after { content: ''; display: inline-block; flex-shrink: 0; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid currentColor; opacity: 0.5; } .primary-menu .sub-menu .sub-menu { top: 0; left: 100%; margin-left: 0; border-top: 0; border-left: 3px solid var(--color-accent); } .primary-menu .sub-menu li:hover > .sub-menu, .primary-menu .sub-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* --- Header actions --- */ .site-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-shrink: 0; } .search-toggle, .hamburger { display: flex; align-items: center; justify-content: center; background: none; border: none; color: rgba(255, 255, 255, 0.85); padding: var(--space-2); border-radius: var(--radius-sm); transition: background 0.2s, color 0.2s; line-height: 1; } .search-toggle:hover, .hamburger:hover { background: rgba(255, 255, 255, 0.12); color: white; } /* Hamburger lines */ .hamburger { width: 38px; height: 38px; flex-direction: column; gap: 5px; } .hamburger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } .hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- Search bar --- */ .search-bar { background: rgba(0, 0, 0, 0.35); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: var(--space-4) 0; animation: slideDown 0.2s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .search-bar__form { display: flex; gap: var(--space-3); align-items: center; } .search-bar__input { flex: 1; padding: 0.6rem var(--space-4); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius-sm); color: white; font-family: var(--font-sans); font-size: 0.95rem; outline: none; transition: background 0.2s, border-color 0.2s; } .search-bar__input::placeholder { color: rgba(255, 255, 255, 0.45); } .search-bar__input:focus { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.5); } .search-bar__submit { display: flex; align-items: center; justify-content: center; padding: 0.6rem var(--space-4); background: var(--color-accent); color: var(--color-navy); border: none; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; transition: background 0.2s; } .search-bar__submit:hover { background: var(--color-accent-dark); } /* --- Mobile nav overlay --- */ .mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1100; opacity: 0; /* Invisible overlay still captures hits; keep off until menu is open. */ pointer-events: none; transition: opacity 0.3s ease; } .mobile-nav-overlay.is-visible { opacity: 1; pointer-events: auto; } .mobile-nav { position: fixed; top: 0; right: 0; width: min(320px, 85vw); height: 100dvh; background: var(--color-navy); z-index: 1200; overflow-y: auto; visibility: hidden; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s; padding: var(--space-6); } .mobile-nav.is-open { visibility: visible; transform: translateX(0); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .mobile-nav__close { display: flex; align-items: center; justify-content: center; background: none; border: none; color: rgba(255, 255, 255, 0.7); margin-left: auto; margin-bottom: var(--space-4); margin-top: var(--space-8); padding: var(--space-2); border-radius: var(--radius-sm); transition: color 0.2s, background 0.2s; } .mobile-nav__close:hover { color: white; background: rgba(255, 255, 255, 0.1); } .mobile-menu { list-style: none; } .mobile-menu li a { display: block; padding: var(--space-3) 0; color: rgba(255, 255, 255, 0.88); text-decoration: none; font-size: 1rem; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: color 0.2s; } .mobile-menu li a:hover { color: white; } .mobile-menu .sub-menu { list-style: none; padding-left: var(--space-4); } .mobile-menu .sub-menu a { font-size: 0.9rem; color: rgba(255, 255, 255, 0.65); border-bottom: none; padding: var(--space-2) 0; } .lang-switcher--mobile { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.12); } .lang-switcher--mobile li { margin-bottom: var(--space-4); } .lang-switcher--mobile a { font-size: 0.9rem; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.2); } /* Desktop (≥1465px): hide hamburger; below: hide desktop nav */ @media (min-width: 1225px) { .hamburger { display: none; } } @media (max-width: 1224px) { .site-header__nav { display: none; } .mobile-nav-overlay { display: block; } .site-header__main > .container { gap: var(--space-3); } .site-header__logo { flex-shrink: 1; min-width: 0; } .site-header__logo-full { min-width: 0; } } /* ========================================================================== 6. Header Quick-Nav Band ========================================================================== */ .header-quicknav { background: var(--color-navy-dark); border-top: 1px solid rgba(255, 255, 255, 0.08); } .header-quicknav__inner { display: grid; grid-template-columns: repeat(6, 1fr); } .header-quicknav__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); color: var(--color-on-dark-muted); text-decoration: none; border-right: 1px solid rgba(255, 255, 255, 0.08); transition: background 0.2s ease, color 0.2s ease; } .header-quicknav__item:last-child { border-right: none; } .header-quicknav__item:hover, .header-quicknav__item:focus-visible { background: rgba(255, 255, 255, 0.06); color: var(--color-on-dark); } .header-quicknav__icon { flex-shrink: 0; display: flex; color: var(--color-accent); } .header-quicknav__label { font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; min-width: 0; overflow-wrap: break-word; } @media (max-width: 767px) { .header-quicknav__inner { grid-template-columns: repeat(2, 1fr); } .header-quicknav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .header-quicknav__item:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.08); } .header-quicknav__item:last-child, .header-quicknav__item:nth-last-child(2):nth-child(odd) { border-bottom: none; } } /* ========================================================================== 7. Hero Section ========================================================================== */ .hero { position: relative; min-height: 62vh; display: flex; align-items: center; background: var(--color-navy); background-size: cover; background-position: center; overflow: hidden; width: 100%; max-width: 100%; min-width: 0; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(0, 24, 56, 0.3) 0%, rgba(0, 40, 85, 0.3) 60%, rgba(0, 40, 85, 0.3) 100% ); z-index: 1; } .hero__content { position: relative; z-index: 2; width: 100%; max-width: 680px; min-width: 0; padding-block: var(--space-20); box-sizing: border-box; text-align: center; } .hero__label { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-4); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); } .hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--color-on-dark); line-height: 1.1; margin-bottom: var(--space-5); overflow-wrap: break-word; word-break: break-word; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .hero__subtitle { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--color-on-dark-muted); line-height: 1.65; margin-bottom: var(--space-8); max-width: 622px; overflow-wrap: break-word; word-break: break-word; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); min-width: 0; justify-content: center; } .hero__actions .btn { max-width: 100%; } @media (max-width: 480px) { .hero__actions .btn { white-space: normal; justify-content: center; text-align: center; } } /* ========================================================================== 7. News Section ========================================================================== */ .news-section { padding-block: var(--space-12); background: var(--color-bg); } .news-section__header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); min-width: 0; } .news-section__title { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--color-navy); margin: 0; } /* News tabs */ .news-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; flex: 1 1 auto; min-width: 0; max-width: 100%; } .news-tab { padding: var(--space-2) var(--space-5); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-muted); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .news-tab:hover { border-color: var(--color-primary); color: var(--color-primary); } .news-tab.is-active { background: var(--color-navy); border-color: var(--color-navy); color: white; } /* News grid layout */ .news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-10); align-items: start; margin-bottom: var(--space-6); min-width: 0; } .news-grid__column { display: flex; flex-direction: column; min-width: 0; } /* News cards */ .news-card { display: flex; flex-direction: column; height: 100%; } /* Compact card */ .news-card--compact { display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-3); height: auto; flex: 0 0 auto; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-light); transition: background 0.2s; min-width: 0; } .news-card--compact:first-child { padding-top: 0; } .news-card--compact:last-child { border-bottom: none; padding-bottom: 0; } .news-card--compact .news-card__image-wrap { flex-shrink: 0; width: 88px; height: 60px; overflow: hidden; border-radius: var(--radius-sm); } .news-card--compact .news-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .news-card--compact:hover .news-card__image img { transform: scale(1.06); } .news-card--compact .news-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } .news-card--compact .news-card__title { font-size: 0.9rem; font-weight: 600; line-height: 1.3; margin: 0; font-family: var(--font-sans); } .news-card--compact .news-card__title a { color: var(--color-text); text-decoration: none; } .news-card--compact .news-card__title a:hover { color: var(--color-primary); } /* Shared news-card elements */ .news-card__category { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); text-decoration: none; margin-bottom: 0; transition: color 0.2s; } .news-card__category:hover { color: var(--color-primary-dark); } .news-card__date { display: block; font-size: 0.75rem; color: var(--color-text-lighter); margin-top: auto; padding-top: var(--space-2); } .news-card--compact .news-card__date { margin-top: 0; padding-top: 0; } /* Hidden by JS tab filtering */ .news-card.is-hidden { display: none; } .news-section__footer { text-align: center; margin-top: var(--space-2); } /* ========================================================================== 8. Priority / Quick-access Cards ========================================================================== */ .priorities__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat( min(var(--priority-count, 6), 3), minmax(0, 1fr) ); } .priority-card { position: relative; display: block; text-decoration: none; overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-navy); min-width: 0; } .priority-card__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.5s ease; } .priority-card__bg--placeholder { background: linear-gradient( 135deg, var(--color-navy) 0%, var(--color-primary-dark) 100% ); } .priority-card:hover .priority-card__bg { transform: scale(1.06); } .priority-card__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 24, 56, 0.88) 0%, rgba(0, 24, 56, 0.4) 50%, rgba(0, 24, 56, 0.15) 100% ); transition: background 0.3s ease; } .priority-card:hover .priority-card__overlay { background: linear-gradient( to top, rgba(0, 24, 56, 0.92) 0%, rgba(0, 24, 56, 0.55) 55%, rgba(0, 24, 56, 0.25) 100% ); } .priority-card__content { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-6); z-index: 2; display: flex; flex-direction: column; gap: var(--space-2); } .priority-card__icon { color: var(--color-accent); margin-bottom: var(--space-2); transition: transform 0.3s ease; } .priority-card:hover .priority-card__icon { transform: scale(1.1); } .priority-card__title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; color: white; line-height: 1.2; margin: 0; } .priority-card__desc { font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); line-height: 1.4; margin: 0; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; } .priority-card:hover .priority-card__desc { opacity: 1; transform: translateY(0); } .priority-card__arrow { color: var(--color-accent); margin-top: var(--space-1); transform: translateX(-4px); transition: transform 0.25s ease; display: flex; } .priority-card:hover .priority-card__arrow { transform: translateX(0); } /* ========================================================================== 9. Feature Story (full-width) ========================================================================== */ .feature-story { position: relative; min-height: 480px; display: flex; align-items: center; background: var(--color-navy); background-size: cover; background-position: center; overflow: hidden; width: 100%; max-width: 100%; min-width: 0; } .feature-story__overlay { position: absolute; inset: 0; background: linear-gradient( to right, rgba(0, 24, 56, 0.92) 0%, rgba(0, 24, 56, 0.65) 55%, rgba(0, 24, 56, 0.15) 100% ); z-index: 1; } .feature-story__content { position: relative; z-index: 2; width: 100%; max-width: 600px; min-width: 0; padding-block: var(--space-16); box-sizing: border-box; } .feature-story__label { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-4); } .feature-story__title { font-family: var(--font-serif); font-size: clamp(1.6rem, 3.5vw, 2.6rem); color: white; line-height: 1.15; margin-bottom: var(--space-5); overflow-wrap: break-word; word-break: break-word; } .feature-story__excerpt { font-size: 1.05rem; color: var(--color-on-dark-muted); line-height: 1.65; margin-bottom: var(--space-8); overflow-wrap: break-word; word-break: break-word; } /* ========================================================================== 10. About Section ========================================================================== */ .about-section { padding-block: var(--space-20); background: var(--color-bg); } .about-section__content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } .about-section__eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-4); } .about-section__title { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--color-navy); line-height: 1.15; margin-bottom: var(--space-6); } .about-section__desc { font-size: 1.05rem; color: var(--color-text-muted); line-height: 1.75; margin-bottom: var(--space-8); } .about-section__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .stat-card { background: var(--color-bg-warm); border-radius: var(--radius-md); padding: var(--space-6); text-align: center; border: 1px solid var(--color-border-light); transition: box-shadow 0.25s; } .stat-card:hover { box-shadow: var(--shadow-sm); } .stat-card__number { display: block; font-family: var(--font-serif); font-size: 2.4rem; font-weight: 700; color: var(--color-navy); line-height: 1; margin-bottom: var(--space-2); } .stat-card__label { display: block; font-size: 0.82rem; color: var(--color-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; } /* ========================================================================== 12. Contact CTA Section ========================================================================== */ .cta-section { background: var(--color-navy); padding-block: var(--space-16); } .cta-section__inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-10); align-items: center; } .cta-section__title { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.4rem); color: white; margin-bottom: var(--space-4); } .cta-section__subtitle { font-size: 1rem; color: var(--color-on-dark-muted); margin: 0; } .cta-section__contacts { display: flex; flex-direction: column; gap: var(--space-4); } .cta-item { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-on-dark-muted); font-size: 0.92rem; line-height: 1.5; } .cta-item svg { flex-shrink: 0; margin-top: 2px; opacity: 0.7; } .cta-item a { color: var(--color-on-dark-muted); text-decoration: none; transition: color 0.2s; } .cta-item a:hover { color: var(--color-accent); } .cta-section__actions { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; } /* ========================================================================== 13. Site Footer ========================================================================== */ .site-footer { background: var(--color-navy-dark); color: var(--color-on-dark-muted); } .site-footer__main { padding-block: var(--space-16); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: var(--space-10); } /* Col 1: Identity */ .site-footer__logo { display: inline-block; text-decoration: none; margin-bottom: var(--space-4); } .site-footer__logo-abbr { font-size: 1.5rem; font-weight: 700; color: var(--color-accent); letter-spacing: -0.02em; } .site-footer__tagline { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); line-height: 1.55; margin-bottom: var(--space-4); max-width: 240px; } .site-footer__kpi-link { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; transition: color 0.2s; } .site-footer__kpi-link:hover { color: var(--color-accent); } /* Column titles */ .site-footer__col-title { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); margin-bottom: var(--space-5); } /* Footer nav */ .footer-menu { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .footer-menu a { font-size: 0.88rem; color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.2s; } .footer-menu a:hover { color: var(--color-accent); } /* Address */ .site-footer__address { font-style: normal; display: flex; flex-direction: column; gap: var(--space-3); } .site-footer__address-line { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); line-height: 1.5; margin: 0; min-width: 0; overflow-wrap: anywhere; } .site-footer__address-line svg { flex-shrink: 0; margin-top: 2px; opacity: 0.5; } .site-footer__address-line a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.2s; } .site-footer__address-line a:hover { color: var(--color-accent); } /* Social links */ .site-footer__social { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); } .social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.65); text-decoration: none; transition: background 0.2s, color 0.2s, transform 0.2s; } .social-link:hover { background: var(--color-accent); color: var(--color-navy); transform: translateY(-2px); } .site-footer__col-label { font-size: 0.78rem; color: rgba(255, 255, 255, 0.45); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.06em; } /* Footer lang switcher */ .lang-switcher--footer a { font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.15); } .lang-switcher--footer a:hover, .lang-switcher--footer .current-lang a { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); } .lang-switcher--footer li { margin-bottom: var(--space-1); } /* Footer bottom bar */ .site-footer__bottom { padding-block: var(--space-6); } .site-footer__bottom .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); } .site-footer__copyright { font-size: 0.78rem; color: rgba(255, 255, 255, 0.35); margin: 0; } .site-footer__legal-nav { display: flex; gap: var(--space-6); } .site-footer__legal-nav a { font-size: 0.78rem; color: rgba(255, 255, 255, 0.35); text-decoration: none; transition: color 0.2s; } .site-footer__legal-nav a:hover { color: rgba(255, 255, 255, 0.65); } /* ========================================================================== 13. Staff Archive (directorate layout, mmi-wp parity) ========================================================================== */ .directorate-archive { background: var(--color-bg); padding-block: var(--space-12) var(--space-16); } .directorate-archive__header { border-bottom: none; padding-block: 0 var(--space-10); margin-bottom: var(--space-8); } .directorate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10) var(--space-8); } .directorate-card--inline { display: flex; align-items: flex-start; gap: var(--space-4); } .directorate-card__image { flex-shrink: 0; width: 180px; height: 240px; } .directorate-card__image a { display: block; width: 100%; height: 100%; line-height: 0; } .directorate-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .directorate-card__content { flex: 1; min-width: 0; padding-top: var(--space-1); } .directorate-card__title { margin: 0 0 var(--space-2); font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700; line-height: 1.35; text-transform: uppercase; } .directorate-card__title a { color: var(--color-primary); text-decoration: none; transition: color 0.2s; } .directorate-card__title a:hover { color: var(--color-primary-dark); text-decoration: underline; } .directorate-card__position { margin: 0 0 var(--space-2); font-size: 0.88rem; font-weight: 600; font-style: normal; line-height: 1.45; color: var(--color-primary); } .directorate-card__degree { margin: 0; font-size: 0.85rem; font-style: normal; line-height: 1.45; color: var(--color-text-muted); } @media (max-width: 1024px) { .directorate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .directorate-grid { grid-template-columns: 1fr; gap: var(--space-8); } .directorate-card__image { width: 140px; height: 187px; } } /* ========================================================================== 14. Staff Single (directorate layout, mmi-wp parity) ========================================================================== */ .directorate-single { background: var(--color-bg); padding-block: var(--space-10) var(--space-16); } .directorate__back { margin-bottom: var(--space-6); } .directorate__back a { color: var(--color-primary); font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: color 0.2s; } .directorate__back a:hover { color: var(--color-primary-dark); text-decoration: underline; } .directorate__header { padding-bottom: var(--space-10); margin-bottom: var(--space-10); border-bottom: 3px solid var(--color-accent); } .directorate__header-content { display: flex; align-items: flex-start; gap: var(--space-8); } .directorate__photo { flex-shrink: 0; width: 280px; height: 360px; overflow: hidden; background: var(--color-bg-cool); } .directorate__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .directorate__info { flex: 1; min-width: 0; padding-top: var(--space-2); } .directorate__title { margin: 0 0 var(--space-3); font-family: var(--font-sans); font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; line-height: 1.3; color: var(--color-primary); text-transform: uppercase; } .directorate__position { margin: 0 0 var(--space-2); font-size: 1.1rem; font-weight: 600; line-height: 1.45; color: var(--color-primary); } .directorate__degree { margin: 0 0 var(--space-6); font-size: 1rem; line-height: 1.45; color: var(--color-text-muted); } .directorate__contacts { display: grid; gap: var(--space-3); margin: 0 0 var(--space-6); } .directorate__contact { display: grid; grid-template-columns: minmax(6.5rem, 12rem) 1fr; gap: var(--space-3); align-items: baseline; } .directorate__contact dt { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--color-navy); } .directorate__contact dd { margin: 0; font-size: 0.95rem; color: var(--color-text); } .directorate__contact a { color: var(--color-primary); text-decoration: none; } .directorate__contact a:hover { text-decoration: underline; } .directorate__scholar-label { margin: 0 0 var(--space-3); font-size: 0.9rem; font-weight: 600; color: var(--color-navy); } .directorate__scholar-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); } .directorate__scholar-link { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-primary); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: background 0.2s, color 0.2s; } .directorate__scholar-link:hover { background: var(--color-primary); color: var(--color-on-dark); } .directorate__section { margin-bottom: var(--space-12); } .directorate__section-title { margin: 0 0 var(--space-6); padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-border-light); font-family: var(--font-serif); font-size: clamp(1.35rem, 2.5vw, 1.75rem); color: var(--color-navy); } .directorate__bio-content { font-size: 1.05rem; line-height: 1.7; color: var(--color-text); } .directorate__bio-content p { margin: 0 0 var(--space-4); } .directorate__bio-content p:last-child { margin-bottom: 0; } @media (max-width: 768px) { .directorate__header-content { flex-direction: column; align-items: center; text-align: center; } .directorate__photo { width: 220px; height: 283px; } .directorate__contact { grid-template-columns: 1fr; gap: var(--space-1); text-align: center; } .directorate__scholar-buttons { justify-content: center; } } /* ========================================================================== 15. Archive Header (shared) ========================================================================== */ .archive-header { padding-block: var(--space-12) var(--space-10); border-bottom: 3px solid var(--color-accent); margin-bottom: var(--space-10); } .archive-header__title { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--color-navy); margin: 0 0 var(--space-3); } .archive-header__description { font-size: 1.05rem; color: var(--color-text-muted); max-width: 640px; margin: 0; } /* ========================================================================== 15. Pagination ========================================================================== */ .pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-10); } .pagination a, .pagination .current, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding-inline: var(--space-3); background: var(--color-bg-cool); color: var(--color-text-muted); text-decoration: none; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; transition: background 0.2s, color 0.2s; } .pagination a:hover { background: var(--color-primary); color: white; } .pagination .current { background: var(--color-navy); color: white; } /* ========================================================================== 16. No Results ========================================================================== */ .no-results { text-align: center; padding: var(--space-20) 0; color: var(--color-text-lighter); font-size: 1.05rem; } /* ========================================================================== 17. Responsive — Tablet (≤ 1024px) ========================================================================== */ @media (max-width: 1024px) { .news-grid { grid-template-columns: 1fr; gap: 0; } .priorities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-10) var(--space-8); } .cta-section__inner { grid-template-columns: 1fr 1fr; } .cta-section__actions { grid-column: span 2; flex-direction: row; } .about-section__content { gap: var(--space-10); } } /* ========================================================================== 18. Responsive — Mobile (≤ 768px) ========================================================================== */ @media (max-width: 768px) { :root { --header-topbar-h: 0px; --header-main-h: 60px; } .site-header__topbar { display: none; } .about-section__content { grid-template-columns: 1fr; } .about-section__stats { grid-template-columns: 1fr 1fr; } .cta-section__inner { grid-template-columns: 1fr; } .cta-section__actions { grid-column: auto; flex-direction: column; } .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-8); } } /* ========================================================================== 19. Responsive — Small Mobile (≤ 640px) ========================================================================== */ @media (max-width: 640px) { .priorities__grid { grid-template-columns: 1fr; } .priority-card { aspect-ratio: 3 / 2; } } /* ========================================================================== 20. Responsive — Small Mobile (≤ 480px) ========================================================================== */ @media (max-width: 480px) { .about-section__stats { grid-template-columns: 1fr; } .news-tabs { flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .news-tabs::-webkit-scrollbar { display: none; } }