/* ============================================================================= SJC Design System — tokens, components, sections (mobile-first) ============================================================================= */ :root { /* 8px grid scale */ --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-5: 2.5rem; /* 40px */ --space-6: 3rem; /* 48px */ --space-7: 3.5rem; /* 56px */ --space-8: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --color-bg: #f4f1ec; --color-surface: #fffdf9; --color-surface-elevated: #f0ebe3; --color-text: #0f1c2e; --color-text-muted: #3d4f63; --color-border: #e0d8cc; --color-primary: #0c2340; --color-primary-hover: #163a5c; --color-primary-mid: #1a4d73; --color-accent: #b8860b; --color-accent-soft: #e8c96a; --color-accent-deep: #8b6914; --color-gold: #c9a227; --color-gold-light: #f0d78c; --color-emerald: #1a6b52; --color-emerald-bright: #2d9d72; --color-emerald-soft: rgba(26, 107, 82, 0.12); --color-dark: #061528; --color-dark-surface: #0f2744; --gradient-brand-ring: linear-gradient(145deg, var(--color-gold-light) 0%, var(--color-gold) 38%, var(--color-emerald-bright) 100%); --gradient-nav-bar: linear-gradient(90deg, var(--color-dark) 0%, var(--color-primary) 22%, var(--color-primary-mid) 50%, var(--color-primary) 78%, var(--color-dark) 100%); --gradient-header-shell: linear-gradient(165deg, #fffdf9 0%, #faf6ef 42%, #f3ece2 100%); --gradient-top-strip: linear-gradient(102deg, var(--color-dark) 0%, var(--color-primary) 38%, var(--color-primary-mid) 62%, var(--color-primary) 100%); --gradient-title: linear-gradient(125deg, var(--color-primary) 0%, var(--color-primary-mid) 45%, var(--color-emerald) 100%); --gradient-page-hero: var(--gradient-header-shell); --gradient-page-hero-wash: radial-gradient(ellipse 70% 55% at 100% 0%, rgba(201, 162, 39, 0.1) 0%, transparent 55%), radial-gradient(ellipse 55% 50% at 0% 100%, rgba(26, 107, 82, 0.08) 0%, transparent 50%), var(--gradient-header-shell); --gradient-page-dark: linear-gradient(165deg, var(--color-dark) 0%, var(--color-primary) 48%, var(--color-dark-surface) 100%); --shadow-page-card: 0 10px 32px rgba(12, 35, 64, 0.08); --border-page-accent: rgba(201, 162, 39, 0.22); --font-heading: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --font-ui: "Source Sans 3", "Segoe UI", system-ui, sans-serif; --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif; --line-height-tight: 1.25; --line-height-snug: 1.4; --line-height-normal: 1.65; --line-height-relaxed: 1.75; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1rem; --text-md: 1.0625rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: clamp(1.75rem, 4vw, 2.25rem); --text-4xl: clamp(2rem, 5vw, 3rem); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(12, 35, 64, 0.06); --shadow-md: 0 8px 24px rgba(12, 35, 64, 0.08); --shadow-lg: 0 16px 48px rgba(12, 35, 64, 0.12); --header-h: 72px; --strip-h: 44px; --container-max: 90%; --container-gutter-x: var(--space-4); --transition: 0.2s ease; --z-header: 100; --z-mega: 110; --z-top-strip: 125; --z-modal: 200; --z-fab: 150; --mobile-drawer-top: 7.5rem; /* Hero notice ticker — highlight colours on dark strip (cascade with theme presets) */ --notice-ticker-highlight: var(--color-gold-light); --notice-ticker-link: var(--color-accent-soft); --notice-ticker-fg: #ffffff; --notice-ticker-badge-bg: var(--color-accent); --notice-ticker-badge-fg: #ffffff; } /* ----------------------------------------------------------------------------- Theme presets — applied via [data-theme] on by the theme switcher. Each preset overrides brand color tokens; gradients/components cascade from them. ----------------------------------------------------------------------------- */ [data-theme="emerald"] { --color-primary: #0f5132; --color-primary-hover: #15683f; --color-primary-mid: #1c7a4c; --color-dark: #062a1a; --color-dark-surface: #0d4029; --color-accent: #b8860b; --color-accent-soft: #e8c96a; --color-accent-deep: #8b6914; --color-gold: #c9a227; --color-gold-light: #f0d78c; --color-emerald: #0f5132; --color-emerald-bright: #2d9d72; --color-emerald-soft: rgba(15, 81, 50, 0.12); } [data-theme="royal"] { --color-primary: #4a2b7a; --color-primary-hover: #5c3796; --color-primary-mid: #6f45ad; --color-dark: #2a1650; --color-dark-surface: #3a2168; --color-accent: #c99700; --color-accent-soft: #f0d382; --color-accent-deep: #96700a; --color-gold: #d4a017; --color-gold-light: #f2d98a; --color-emerald: #6f45ad; --color-emerald-bright: #9163cf; --color-emerald-soft: rgba(111, 69, 173, 0.14); } [data-theme="maroon"] { --color-primary: #7a1f2b; --color-primary-hover: #94222f; --color-primary-mid: #a83643; --color-dark: #4a1119; --color-dark-surface: #661722; --color-accent: #b8860b; --color-accent-soft: #e8c96a; --color-accent-deep: #8b6914; --color-gold: #c9a227; --color-gold-light: #f0d78c; --color-emerald: #1a6b52; --color-emerald-bright: #2d9d72; --color-emerald-soft: rgba(26, 107, 82, 0.12); } [data-theme="teal"] { --color-primary: #0e5a63; --color-primary-hover: #127078; --color-primary-mid: #178793; --color-dark: #06343a; --color-dark-surface: #0d4a52; --color-accent: #d97706; --color-accent-soft: #fbbf6b; --color-accent-deep: #b45309; --color-gold: #e0912a; --color-gold-light: #f7c579; --color-emerald: #0e7490; --color-emerald-bright: #22a7c4; --color-emerald-soft: rgba(14, 116, 144, 0.12); } [data-theme="indigo"] { --color-primary: #303f9f; --color-primary-hover: #3949ab; --color-primary-mid: #3f51b5; --color-dark: #1a237e; --color-dark-surface: #283593; --color-accent: #be185d; --color-accent-soft: #f472b6; --color-accent-deep: #9d174d; --color-gold: #db2777; --color-gold-light: #f9a8d4; --color-emerald: #4f46e5; --color-emerald-bright: #6366f1; --color-emerald-soft: rgba(79, 70, 229, 0.14); } [data-theme="slate"] { --color-primary: #334155; --color-primary-hover: #3f4e63; --color-primary-mid: #475569; --color-dark: #1e293b; --color-dark-surface: #334155; --color-accent: #b45309; --color-accent-soft: #f0b27a; --color-accent-deep: #92400e; --color-gold: #c2691c; --color-gold-light: #e8b88a; --color-emerald: #0f766e; --color-emerald-bright: #14b8a6; --color-emerald-soft: rgba(15, 118, 110, 0.12); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; max-width: 100%; font-size: clamp(100%, 98% + 0.35vw, 112.5%); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background-color: var(--color-primary); } body { margin: 0; display: flex; flex-direction: column; min-height: 100dvh; font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: var(--line-height-normal); letter-spacing: 0.01em; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; max-width: 100%; } /* Fixed overlays must not extend document scroll height. Theme switcher is excluded from paint containment so its panel (absolutely positioned above the toggle) is not clipped. */ body > .mobile-drawer, body > #lightbox { position: fixed; contain: layout style paint; } body > .theme-switcher { position: fixed; } img { max-width: 100%; height: auto; display: block; } button { font-family: inherit; cursor: pointer; } a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--color-primary-hover); } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: var(--line-height-tight); letter-spacing: -0.015em; margin: 0 0 var(--space-2); } p { line-height: var(--line-height-normal); } /* ----------------------------------------------------------------------------- Body copy — justified alignment (multi-line paragraphs only) ----------------------------------------------------------------------------- */ :root { --prose-text-align: justify; --prose-text-align-last: start; --prose-text-justify: inter-word; } #main { hyphens: manual; } /* Long-form paragraph blocks only — never section headers, titles, or cards */ #main .about-page__text, #main .about-page__section-intro, #main .about-page__quality-text, #main .submenu-page__intro-body, #main .split__content > p:not(.lead):not(.eyebrow):not(.section__desc), #main .library-page__prose, #main .article-read__prose, #main .article-read__prose p, #main .history-page__prose, #main .history-page__prose p, #main .emblem-page__prose, #main .emblem-page__prose p, #main .conduct-page__intro-prose, #main .conduct-page__value-text, #main .conduct-page__after, #main .placement-page__prose, #main .iqac-page__section-desc, #main .admission-procedure-page__prose, #main .infrastructure-page__prose, #main .secretary-desk-page__prose, #main .principal-desk-page__prose, #main .teaching-faculty-page__prose, #main .non-teaching-staff-page__prose, #main .prospectus-page__doc-intro, #main .contact-page__intro { text-align: var(--prose-text-align); text-align-last: var(--prose-text-align-last); text-justify: var(--prose-text-justify); hyphens: auto; -webkit-hyphens: auto; } /* Headings & section headers — never justify; keep designed alignment */ #main :is(h1, h2, h3, h4, h5, h6) { text-justify: auto; hyphens: manual; overflow-wrap: normal; word-break: normal; white-space: normal; } #main .section__head :is(.eyebrow, h1, h2, h3, h4, .section__title, .section__title--gradient) { display: block; width: 100%; max-width: 100%; margin-inline: auto; text-align: center; text-align-last: center; hyphens: manual; overflow-wrap: normal; word-break: normal; white-space: normal; } #main .section__head .section__desc { display: block; width: 100%; max-width: min(52ch, 100%); margin-inline: auto; text-align: center; text-align-last: center; hyphens: manual; text-wrap: pretty; } #main .section__title--left, #main .welcome-section__header .section__title--left, #main .submenu-page__intro-title, #main .library-page__title, #main .contact-page__title, #main .gallery-page__title { text-align: left; text-align-last: left; } #main .about-page__motto-card p { text-align: center; text-align-last: center; hyphens: manual; } /* Cards, section intros, and UI copy — keep designed alignment */ .course-card__body, .course-card__title, .course-card__text, .fac-card, .fac-card__title, .fac-card__text, .news-card__body, .news-card__title, .news-card__excerpt, .cta-band__text, .site-footer__about, .departments-page__card-title { text-align: start; text-align-last: auto; hyphens: manual; overflow-wrap: normal; word-break: normal; } .programmes-section__head, .home-departments-section__head { text-align: center; width: 100%; margin-inline: auto; } .programmes-section__desc, .home-departments-section__desc { text-align: center; text-align-last: center; margin-inline: auto; } .welcome-section__lead, .submenu-page__intro-lead, .library-page__lead, .contact-page__lead, .contact-page__section-lead { text-align: start; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-2); top: -100px; z-index: 300; padding: var(--space-2) var(--space-3); background: var(--color-primary); color: #fff; border-radius: var(--radius-sm); font-weight: 600; } .skip-link:focus { top: var(--space-2); } /* ----------------------------------------------------------------------------- Layout ----------------------------------------------------------------------------- */ .container { width: 90%; max-width: none; margin-inline: auto; padding-inline: 0; box-sizing: border-box; } #main { max-width: 100%; overflow-x: clip; overflow-y: visible; flex: 1 0 auto; } .section { padding-block: var(--space-8); } .section--tight { padding-block: var(--space-4); } .section--muted { background: var(--color-bg); } .section--dark { background: linear-gradient(165deg, var(--color-dark) 0%, var(--color-primary) 100%); color: #e8ecf1; max-width: 100%; overflow-x: hidden; } .section__head { text-align: center; width: 100%; max-width: min(40rem, 100%); margin-inline: auto; margin-bottom: var(--space-6); } .section__head .eyebrow, .section__head .section__title, .section__head .section__title--gradient, .section__head .section__desc, .section__head :is(h1, h2, h3, h4) { text-align: center; text-align-last: center; margin-inline: auto; overflow-wrap: normal; word-break: normal; hyphens: manual; } .section__head .section__desc { max-width: min(52ch, 100%); } .section__head--light .section__desc { color: rgba(255, 255, 255, 0.85); } .section__title { font-size: var(--text-3xl); color: var(--color-primary); margin-bottom: var(--space-2); } .section--dark .section__title { color: #fff; } .section__title--left { text-align: left; } .section__desc { margin: 0; color: var(--color-text-muted); font-size: var(--text-lg); line-height: var(--line-height-relaxed); } .lead { font-size: var(--text-lg); line-height: var(--line-height-relaxed); color: var(--color-text-muted); margin-bottom: var(--space-4); } .eyebrow { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: linear-gradient(90deg, var(--color-gold), var(--color-emerald-bright)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--color-accent-soft); margin-bottom: var(--space-2); overflow-wrap: normal; word-break: normal; hyphens: manual; white-space: normal; } /* ----------------------------------------------------------------------------- Buttons & badges (design system) ----------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: 0.625rem 1.25rem; font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600; border-radius: var(--radius-sm); border: 2px solid transparent; text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); } .btn--primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--color-primary-hover); color: #fff; box-shadow: var(--shadow-md); } .btn--secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-border); } .btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary); } .btn--light { background: #fff; color: var(--color-primary); } .btn--light:hover { background: #f0f4f8; color: var(--color-primary); } .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); } .btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .btn--accent { background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 48%, var(--color-accent-deep) 100%); color: #1a1204; border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 2px 10px rgba(201, 162, 39, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .btn--accent:hover { background: linear-gradient(135deg, #f5e4a8 0%, #d4ad3a 50%, #9a7510 100%); color: #1a1204; box-shadow: 0 4px 16px rgba(201, 162, 39, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .btn--lg { padding: 0.875rem 1.5rem; font-size: var(--text-base); } .btn--sm { padding: 0.375rem 0.75rem; font-size: var(--text-sm); } .btn--block { width: 100%; } .btn-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .badge { display: inline-block; padding: 0.25rem 0.5rem; font-size: var(--text-xs); font-weight: 700; font-family: var(--font-ui); border-radius: var(--radius-sm); background: rgba(12, 35, 64, 0.08); color: var(--color-primary); } .badge--light { background: rgba(255, 255, 255, 0.2); color: #fff; } .glass { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: var(--shadow-md); } /* ----------------------------------------------------------------------------- Top strip ----------------------------------------------------------------------------- */ .top-strip { position: relative; z-index: var(--z-top-strip); isolation: isolate; background: radial-gradient(ellipse 40% 120% at 15% 0%, rgba(45, 157, 114, 0.22) 0%, transparent 60%), radial-gradient(ellipse 40% 120% at 85% 100%, rgba(201, 162, 39, 0.2) 0%, transparent 60%), var(--gradient-top-strip); color: #eef3f8; font-size: var(--text-base); padding-block: 0.55rem; max-width: 100%; overflow: visible; box-shadow: 0 2px 14px rgba(6, 21, 40, 0.28); } /* Slow moving light sheen sweeping across the strip */ .top-strip::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.07) 54%, transparent 70%); background-size: 250% 100%; animation: topStripSheen 9s linear infinite; overflow: hidden; pointer-events: none; } .top-strip::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent 2%, var(--color-emerald-bright) 22%, var(--color-gold-light) 42%, var(--color-gold) 50%, var(--color-gold-light) 58%, var(--color-emerald-bright) 78%, transparent 98%); background-size: 200% 100%; animation: topStripFlow 7s linear infinite; opacity: 0.9; pointer-events: none; } @keyframes topStripSheen { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } @keyframes topStripFlow { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } .top-strip__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); } .top-strip__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); flex-shrink: 0; position: relative; z-index: 2; } .top-strip__drop, .top-strip__fee { position: relative; z-index: 3; } .top-strip__drop-summary, .top-strip__fee-summary { list-style: none; cursor: pointer; user-select: none; } .top-strip__drop-summary::-webkit-details-marker, .top-strip__fee-summary::-webkit-details-marker { display: none; } .top-strip__drop-panel, .top-strip__fee-panel { position: absolute; top: calc(100% + 0.35rem); right: 0; min-width: 11rem; padding-block: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 10; } .top-strip__drop-panel { min-width: 15.5rem; padding: 0; border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border)); border-radius: var(--radius-md); background: linear-gradient(180deg, #fff 0%, var(--color-surface) 100%); box-shadow: 0 16px 44px rgba(6, 21, 40, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.85) inset; overflow: hidden; animation: topStripDropIn 0.22s ease; } .top-strip__drop-panel::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--color-gold), var(--color-emerald-bright), var(--color-gold-light)); } .top-strip__drop-panel-head { margin: 0; padding: 0.65rem 1rem 0.45rem; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } .top-strip__drop-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.72rem 1rem; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); text-decoration: none; border-top: 1px solid var(--color-border); transition: background var(--transition), color var(--transition), padding-inline-start var(--transition); } .top-strip__drop-link:hover, .top-strip__drop-link:focus-visible { background: linear-gradient( 90deg, color-mix(in srgb, var(--color-gold) 16%, transparent) 0%, color-mix(in srgb, var(--color-emerald) 8%, transparent) 100% ); color: var(--color-primary); padding-inline-start: 1.2rem; outline: none; } .top-strip__drop-link-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; padding: 0.2rem 0.45rem; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.04em; color: var(--color-primary); background: color-mix(in srgb, var(--color-gold-light) 55%, #fff); border: 1px solid color-mix(in srgb, var(--color-gold) 35%, transparent); } .top-strip__drop-link-text { flex: 1; min-width: 0; line-height: 1.35; } .top-strip__drop-link::after { content: "→"; flex: 0 0 auto; font-size: 1rem; line-height: 1; opacity: 0; transform: translateX(-6px); transition: opacity var(--transition), transform var(--transition); color: var(--color-emerald-bright); } .top-strip__drop-link:hover::after, .top-strip__drop-link:focus-visible::after { opacity: 1; transform: translateX(0); } .top-strip__fee-panel a { display: block; padding: 0.5rem 1rem; font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600; color: var(--color-text); text-decoration: none; } .top-strip__fee-panel a:hover { background: var(--color-bg); color: var(--color-primary); } @keyframes topStripDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .top-strip__text { margin: 0; flex: 1; min-width: min(100%, 280px); } .top-strip__text strong { color: #fff; } .top-strip__text a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 3px; } .top-strip__text a:hover { color: var(--color-accent-soft); text-decoration-color: currentColor; } .top-strip__quick { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; justify-content: center; flex: 0 1 auto; } .top-strip__quick a { position: relative; color: rgba(255, 255, 255, 0.92); text-decoration: none; font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.03em; padding: 0.32rem 0.75rem; border-radius: var(--radius-full); border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition); } /* Shine that sweeps across a pill on hover */ .top-strip__quick a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%); transform: translateX(-120%); transition: transform 0.6s ease; pointer-events: none; } .top-strip__quick a:hover { background: linear-gradient(135deg, rgba(26, 107, 82, 0.5) 0%, rgba(45, 157, 114, 0.4) 100%); border-color: rgba(45, 157, 114, 0.6); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(6, 21, 40, 0.3), 0 0 0 1px rgba(45, 157, 114, 0.35); } .top-strip__quick a:hover::before { transform: translateX(120%); } .top-strip__quick a:nth-child(odd):hover { background: linear-gradient(135deg, rgba(201, 162, 39, 0.42) 0%, rgba(240, 215, 140, 0.26) 100%); border-color: rgba(240, 215, 140, 0.5); box-shadow: 0 6px 18px rgba(6, 21, 40, 0.3), 0 0 0 1px rgba(240, 215, 140, 0.4); } .top-strip__quick-label { position: relative; z-index: 1; } .top-strip__fee-btn { border-color: rgba(240, 215, 140, 0.45) !important; color: var(--color-gold-light) !important; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition); } .top-strip__fee-btn:hover { background: rgba(240, 215, 140, 0.14) !important; border-color: var(--color-gold-light) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(240, 215, 140, 0.25); } /* Admissions Open — animated, attention-grabbing */ .top-strip__drop-summary { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; letter-spacing: 0.02em; color: #fff !important; text-shadow: 0 1px 3px rgba(6, 21, 40, 0.42); border-color: rgba(255, 255, 255, 0.42) !important; animation: admitGlow 2.8s ease-in-out infinite; } .top-strip__drop-summary:hover { color: #fff !important; } .top-strip__drop-label { white-space: nowrap; } .top-strip__drop-live { flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); animation: livePulse 1.8s ease-in-out infinite; } .top-strip__drop-chevron { flex: 0 0 auto; width: 0.45rem; height: 0.45rem; margin-inline-start: 0.1rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); opacity: 0.9; transition: transform 0.2s ease; } .top-strip__drop[open] .top-strip__drop-summary { animation: none; box-shadow: 0 4px 18px rgba(201, 162, 39, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .top-strip__drop[open] .top-strip__drop-chevron { transform: rotate(-135deg) translateY(1px); } .top-strip__drop[open] .top-strip__drop-live { animation: none; background: var(--color-emerald-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-emerald-bright) 35%, transparent); } @keyframes admitGlow { 0%, 100% { box-shadow: 0 3px 12px rgba(201, 162, 39, 0.28); } 50% { box-shadow: 0 4px 22px rgba(240, 215, 140, 0.6); } } @keyframes livePulse { 0% { transform: scale(0.85); opacity: 0.7; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 70% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } 100% { transform: scale(0.85); opacity: 0.7; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @media (max-width: 639px) { .site-header__credentials-line { display: block; } .site-header__credentials-line + .site-header__credentials-line::before { content: none; } .top-strip__inner { flex-direction: column; align-items: stretch; text-align: center; } .top-strip__text { font-size: var(--text-xs); } .top-strip__actions { justify-content: center; align-self: center; } .top-strip__quick { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; padding-bottom: 0.2rem; scrollbar-width: none; } .top-strip__quick::-webkit-scrollbar { display: none; } .top-strip__quick a { flex-shrink: 0; } .top-strip__drop-panel, .top-strip__fee-panel { right: auto; left: 50%; transform: translateX(-50%); } .top-strip__drop-panel { min-width: min(15.5rem, calc(100vw - 2rem)); } .top-strip__drop-link-text { font-size: var(--text-xs); } } /* ----------------------------------------------------------------------------- Header & navigation ----------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-surface); max-width: 100%; overflow-x: hidden; overflow-y: visible; transition: box-shadow 0.35s ease; } .site-header.is-scrolled { box-shadow: 0 10px 40px rgba(6, 21, 40, 0.14); } .site-header__top-shell { position: relative; z-index: calc(var(--z-header) + 1); background: var(--gradient-header-shell); overflow: hidden; } .site-header__top-shell::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 100% at 100% 0%, rgba(201, 162, 39, 0.09) 0%, transparent 58%), radial-gradient(ellipse 45% 90% at 0% 100%, rgba(26, 107, 82, 0.07) 0%, transparent 55%), repeating-linear-gradient( -12deg, transparent, transparent 28px, rgba(12, 35, 64, 0.018) 28px, rgba(12, 35, 64, 0.018) 29px ); pointer-events: none; } .site-header__top-shell::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--color-emerald), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-emerald)); opacity: 0.92; pointer-events: none; } .site-header__top { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; grid-template-areas: "brandrow"; align-items: center; gap: var(--space-2); padding-block: var(--space-2); min-width: 0; transition: padding 0.3s ease; } .site-header__brand-row { grid-area: brandrow; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; } .site-header.is-scrolled .site-header__top { padding-block: 0.375rem; } .nav-toggle { flex-shrink: 0; align-self: center; } .site-header__meta--desktop { display: none; } .site-header__meta { grid-area: meta; min-width: 0; align-self: stretch; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.3rem; padding-top: 0; text-align: left; } .site-header__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .site-header__badge { position: relative; display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-primary); background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(243, 236, 226, 0.9) 100%); border: 1px solid rgba(12, 35, 64, 0.14); border-radius: var(--radius-full); line-height: 1.3; box-shadow: 0 1px 4px rgba(12, 35, 64, 0.06); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .site-header__badge:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(12, 35, 64, 0.14); } .site-header__badge--gold { color: #5c4206; background: linear-gradient(135deg, #fdf6e3 0%, #f0dfa8 45%, #e8c96a 100%); border-color: rgba(201, 162, 39, 0.45); box-shadow: 0 2px 8px rgba(201, 162, 39, 0.22); } /* Slow shine sweep to draw the eye to the flagship NAAC badge */ .site-header__badge--gold::after { content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%); transform: skewX(-18deg) translateX(-260%); animation: badgeShine 5.5s ease-in-out infinite; pointer-events: none; } @keyframes badgeShine { 0%, 100% { transform: skewX(-18deg) translateX(-260%); } 18%, 30% { transform: skewX(-18deg) translateX(360%); } } @media (prefers-reduced-motion: reduce) { .top-strip::before, .top-strip::after, .site-header__nav-row::before, .top-strip__drop-summary, .top-strip__drop-live, .top-strip__drop-panel, .site-header__badge--gold::after { animation: none; } .top-strip__quick a::before { transition: none; } } .site-header__badge--emerald { color: #0f4a38; background: linear-gradient(135deg, #e8f5f0 0%, #c5e8d8 55%, #a8dcc8 100%); border-color: rgba(26, 107, 82, 0.35); box-shadow: 0 2px 8px rgba(26, 107, 82, 0.15); } .site-header__credentials { margin: 0; font-size: clamp(0.8125rem, 2.6vw, 0.9375rem); line-height: 1.5; color: var(--color-text-muted); } .site-header__credentials-line { display: inline; } .site-header__credentials-line + .site-header__credentials-line::before { content: " · "; opacity: 0.65; } .site-header__address-line { margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; font-size: clamp(0.875rem, 2.8vw, 1rem); font-weight: 600; line-height: 1.4; color: var(--color-primary); letter-spacing: -0.01em; } .site-header__pin { flex-shrink: 0; color: var(--color-emerald); } .site-header__nav-row { display: none; position: relative; background: var(--gradient-nav-bar); border-top: none; box-shadow: 0 4px 20px rgba(6, 21, 40, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.07); } .site-header__nav-row::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 4%, var(--color-gold-light) 22%, var(--color-emerald-bright) 40%, var(--color-gold) 50%, var(--color-emerald-bright) 60%, var(--color-gold-light) 78%, transparent 96%); background-size: 200% 100%; animation: topStripFlow 8s linear infinite; pointer-events: none; opacity: 0.9; } .site-header__nav-row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%); pointer-events: none; } .site-header__nav-inner { position: relative; padding-block: var(--space-1); min-width: 0; } .brand { grid-area: brand; display: flex; align-items: center; gap: clamp(0.75rem, 1.8vw, 1.125rem); text-decoration: none; color: inherit; flex: 1 1 auto; min-width: 0; max-width: 100%; transition: transform 0.25s ease; } .brand:hover { color: inherit; } .brand__logo-ring { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 3px; border-radius: var(--radius-md); background: var(--gradient-brand-ring); box-shadow: 0 8px 24px rgba(12, 35, 64, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; transition: box-shadow 0.3s ease, transform 0.3s ease; } .brand__logo-ring::after { content: ""; position: absolute; inset: -7px; z-index: -1; border-radius: inherit; background: var(--gradient-brand-ring); filter: blur(11px); opacity: 0.4; transition: opacity 0.3s ease; pointer-events: none; } .brand:hover .brand__logo-ring { box-shadow: 0 12px 32px rgba(12, 35, 64, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; } .brand:hover .brand__logo-ring::after { opacity: 0.7; } .brand__mark { flex-shrink: 0; border-radius: calc(var(--radius-md) - 3px); width: clamp(3.75rem, 15vw, 5rem); height: clamp(3.75rem, 15vw, 5rem); object-fit: contain; background: #fff; transition: width 0.3s ease, height 0.3s ease; } .site-header.is-scrolled .brand__mark { width: clamp(3.25rem, 12vw, 4.25rem); height: clamp(3.25rem, 12vw, 4.25rem); } .brand__text { display: flex; flex-direction: column; flex: 1 1 0%; line-height: 1.2; min-width: 0; gap: 0.15rem; } .brand__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.1875rem, 4.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: normal; word-break: normal; hyphens: none; background: var(--gradient-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--color-primary); } .brand__tagline { font-family: var(--font-ui); font-size: clamp(0.75rem, 2.2vw, 0.875rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-accent-deep) 50%, var(--color-emerald) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--color-accent); transition: opacity 0.25s ease, max-height 0.25s ease; } .site-header.is-scrolled .brand__tagline { opacity: 0; max-height: 0; overflow: hidden; } .nav-main { display: none; align-items: center; justify-content: flex-end; flex: 1; min-width: 0; } .nav-main__strip { min-width: 0; flex: 1; max-width: 100%; width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .nav-main__strip::-webkit-scrollbar { display: none; width: 0; height: 0; } .nav-main__list { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.125rem; list-style: none; margin: 0; padding: 0; width: max-content; } .nav-main__item { flex: 0 0 auto; min-width: max-content; } .nav-main__link { display: block; position: relative; padding: 0.55rem 0.6rem; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.9); text-decoration: none; border-radius: var(--radius-full); white-space: nowrap; transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .nav-main__link::after { content: ""; position: absolute; left: 50%; bottom: 0.3rem; width: 0; height: 2px; background: linear-gradient(90deg, var(--color-gold-light), var(--color-emerald-bright)); border-radius: 1px; transform: translateX(-50%); transition: width 0.25s ease; } .nav-main__link:hover, .nav-main__link.is-active { background: linear-gradient(135deg, rgba(201, 162, 39, 0.28) 0%, rgba(26, 107, 82, 0.22) 100%); color: #fff; box-shadow: inset 0 0 0 1px rgba(240, 215, 140, 0.32), 0 4px 14px rgba(6, 21, 40, 0.28); } .nav-main__link:hover::after, .nav-main__link.is-active::after { width: 55%; } .nav-main__trigger { display: flex; align-items: center; gap: 0.15rem; position: relative; padding: 0.55rem 0.6rem; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.9); background: transparent; border: 0; border-radius: var(--radius-full); white-space: nowrap; transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .nav-main__trigger::after { content: ""; display: inline-block; width: 0.35rem; height: 0.35rem; margin-left: 0.15rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); opacity: 0.7; transition: transform 0.2s ease; } .nav-main__trigger:hover, .nav-main__trigger[aria-expanded="true"] { background: linear-gradient(135deg, rgba(201, 162, 39, 0.28) 0%, rgba(26, 107, 82, 0.22) 100%); color: #fff; box-shadow: inset 0 0 0 1px rgba(240, 215, 140, 0.32), 0 4px 14px rgba(6, 21, 40, 0.28); } .nav-main__trigger[aria-expanded="true"] { background: linear-gradient(135deg, rgba(201, 162, 39, 0.4) 0%, rgba(26, 107, 82, 0.32) 100%); box-shadow: inset 0 0 0 1px rgba(240, 215, 140, 0.45), 0 6px 18px rgba(6, 21, 40, 0.32); } .nav-main__trigger[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(1px); } .has-mega { position: static; } .mega { position: absolute; left: 0; right: 0; top: 100%; padding: var(--space-4) var(--space-3); background: linear-gradient(180deg, #fffdf9 0%, var(--color-surface-elevated) 100%); border: 1px solid rgba(201, 162, 39, 0.22); border-top: 2px solid var(--color-gold); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: 0 20px 48px rgba(6, 21, 40, 0.16); z-index: var(--z-mega); } .mega[hidden] { display: none !important; } .mega__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } /* Match ncw mega widths while keeping existing mega styles */ .mega--narrow .mega__grid { max-width: 560px; margin-inline: auto; } .mega--wide .mega__grid { max-width: 960px; margin-inline: auto; } .mega__heading { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); margin: 0 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--color-gold), var(--color-emerald-bright)) 1; } .mega__col > .mega__heading + .mega__links { margin-top: var(--space-1); } .mega__col > .mega__heading ~ .mega__heading { margin-top: var(--space-4); } .mega__links { list-style: none; margin: 0; padding: 0; } .mega__links li { margin: 0; } .mega__links a { display: block; padding: 0.5rem 0.65rem; margin-inline: -0.65rem; font-size: var(--text-base); font-weight: 500; text-decoration: none; color: var(--color-text); border-radius: var(--radius-sm); transition: background var(--transition), color var(--transition); } .mega__links a:hover { background: linear-gradient(90deg, var(--color-emerald-soft) 0%, rgba(201, 162, 39, 0.1) 100%); color: var(--color-primary); } .mega__col--cta { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg); } .mega__lead { margin: 0 0 var(--space-3); font-size: var(--text-base); color: var(--color-text-muted); } .nav-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-width: 3.25rem; min-height: 3.25rem; padding: 0.45rem 0.55rem; background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-mid) 100%); border: 2px solid rgba(240, 215, 140, 0.45); border-radius: var(--radius-md); flex-shrink: 0; cursor: pointer; box-shadow: 0 4px 14px rgba(12, 35, 64, 0.22); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; } .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: linear-gradient(145deg, var(--color-emerald) 0%, var(--color-primary) 100%); border-color: var(--color-gold-light); box-shadow: 0 6px 18px rgba(26, 107, 82, 0.28); } .nav-toggle__bars { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 1.35rem; height: 0.85rem; } .nav-toggle__bar { display: block; height: 2.5px; width: 100%; background: #fff; border-radius: 2px; flex-shrink: 0; transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease; } .nav-toggle__label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold-light); line-height: 1; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; width: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__label { color: #fff; } .mobile-drawer { position: fixed; inset: 0; z-index: calc(var(--z-header) + 15); pointer-events: none; } .mobile-drawer:not([hidden]) { pointer-events: auto; } .mobile-drawer__backdrop { position: absolute; inset: 0; border: 0; padding: 0; margin: 0; background: rgba(6, 21, 40, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); cursor: pointer; opacity: 0; transition: opacity 0.3s ease; } .mobile-drawer:not([hidden]) .mobile-drawer__backdrop { opacity: 1; } .mobile-drawer__panel { position: absolute; top: var(--mobile-drawer-top, 7.5rem); right: 0; bottom: 0; width: min(100%, 22.5rem); display: flex; flex-direction: column; background: linear-gradient(180deg, #fffdf9 0%, var(--color-surface-elevated) 100%); border-left: 1px solid rgba(201, 162, 39, 0.25); box-shadow: -12px 0 40px rgba(6, 21, 40, 0.18); overflow: hidden; transform: translateX(105%); transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .mobile-drawer:not([hidden]) .mobile-drawer__panel { transform: translateX(0); } .mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 100%); border-bottom: 2px solid var(--color-gold); flex-shrink: 0; } .mobile-drawer__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: #fff; letter-spacing: 0.02em; } .mobile-drawer__close { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .mobile-drawer__close:hover { background: rgba(255, 255, 255, 0.2); border-color: var(--color-gold-light); } .mobile-drawer__actions { display: grid; gap: 0.5rem; padding: var(--space-3) var(--space-4); background: rgba(12, 35, 64, 0.04); border-bottom: 1px solid rgba(201, 162, 39, 0.15); flex-shrink: 0; } .mobile-drawer__panel nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--space-2) var(--space-4) var(--space-6); } .mobile-drawer[hidden] { display: none !important; } .mobile-nav { list-style: none; margin: 0; padding: 0; } .mobile-nav > li { margin: 0; } .mobile-nav > li > a { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; padding: 0.75rem 0; font-weight: 700; font-size: var(--text-base); text-decoration: none; color: var(--color-primary); border-bottom: 1px solid rgba(201, 162, 39, 0.18); transition: color 0.2s ease, padding-left 0.2s ease; } .mobile-nav > li > a::after { content: ""; width: 0.4rem; height: 0.4rem; border-right: 2px solid var(--color-emerald-bright); border-bottom: 2px solid var(--color-emerald-bright); transform: rotate(-45deg); opacity: 0.6; flex-shrink: 0; } .mobile-nav > li > a:hover { color: var(--color-emerald); padding-left: 0.25rem; } .mobile-nav__details { border-bottom: 1px solid rgba(201, 162, 39, 0.18); } .mobile-nav__summary { list-style: none; cursor: pointer; padding: 0.85rem 0; min-height: 3rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-weight: 700; font-size: var(--text-base); color: var(--color-primary); transition: color 0.2s ease; } .mobile-nav__summary::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid var(--color-gold); border-bottom: 2px solid var(--color-gold); transform: rotate(45deg); transition: transform 0.25s ease; flex-shrink: 0; } .mobile-nav__details[open] > .mobile-nav__summary { color: var(--color-emerald); } .mobile-nav__details[open] > .mobile-nav__summary::after { transform: rotate(-135deg); } .mobile-nav__summary::-webkit-details-marker { display: none; } .mobile-nav__sub { padding: 0 0 var(--space-2) var(--space-1); display: flex; flex-direction: column; gap: 0.15rem; border-left: 2px solid rgba(26, 107, 82, 0.25); margin: 0 0 var(--space-2) var(--space-2); } .mobile-nav__sub a { display: block; font-weight: 500; font-size: var(--text-base); padding: 0.55rem 0.65rem; text-decoration: none; color: var(--color-text-muted); border-radius: var(--radius-sm); border-bottom: none; transition: background 0.2s ease, color 0.2s ease; } .mobile-nav__sub a:hover { background: rgba(26, 107, 82, 0.08); color: var(--color-primary); padding-left: 0.65rem; } @media (max-width: 479px) { .mobile-drawer__panel { width: 100%; border-left: 0; } .nav-toggle__label { display: none; } .nav-toggle { min-width: 2.85rem; min-height: 2.85rem; padding: 0.5rem; } } @media (min-width: 1024px) { .mobile-drawer { display: none !important; } } body.mobile-nav-open { overflow: hidden; } /* ----------------------------------------------------------------------------- Hero ----------------------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; min-height: 88vh; min-height: min(88vh, 720px); color: #fff; max-width: 100%; overflow: hidden; background-color: var(--color-dark); } .hero__slides { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(88vh, 1fr); position: relative; min-height: 88vh; min-height: min(88vh, 720px); } .hero__slide { grid-area: 1 / 1; align-self: stretch; position: relative; display: flex; align-items: flex-end; padding-bottom: var(--space-10); overflow: hidden; background-color: var(--color-dark); min-height: 88vh; min-height: min(88vh, 720px); width: 100%; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; z-index: 0; } .hero__slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; } /* Real avoids CSS var + background shorthand issues (missing banners) */ .hero__slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; } .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 26, 46, 0.35) 0%, rgba(10, 26, 46, 0.82) 100%); pointer-events: none; } .hero__content { position: relative; z-index: 2; max-width: 720px; padding-bottom: var(--space-4); } .hero__title { font-size: var(--text-4xl); color: #fff; margin-bottom: var(--space-3); text-wrap: balance; } .hero__lead { font-size: var(--text-lg); color: rgba(255, 255, 255, 0.9); margin-bottom: var(--space-4); max-width: 540px; } .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-2); } .hero__nav-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px)); box-sizing: border-box; max-width: 100%; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(6, 21, 40, 0.55) 55%, rgba(6, 21, 40, 0.82) 100%); } .hero__nav-bar > * { pointer-events: auto; } .hero__arrow { width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--radius-full); border: 1.5px solid rgba(240, 215, 140, 0.55); background: linear-gradient(145deg, rgba(12, 35, 64, 0.82) 0%, rgba(6, 21, 40, 0.92) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--color-gold-light); display: flex; align-items: center; justify-content: center; padding: 0; transition: background var(--transition), border-color var(--transition), transform var(--transition); } .hero__arrow:hover { background: linear-gradient(145deg, rgba(26, 107, 82, 0.88) 0%, rgba(12, 35, 64, 0.95) 100%); border-color: var(--color-gold-light); color: #fff; transform: scale(1.06); } .hero__arrow:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 2px; } .hero__arrow-icon { display: block; width: 9px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; } .hero__arrow--prev .hero__arrow-icon { transform: rotate(45deg) translate(2px, -2px); } .hero__arrow--next .hero__arrow-icon { transform: rotate(-135deg) translate(2px, -2px); } .hero__progress { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; max-width: min(22rem, 72vw); min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-inline: 0.15rem; } .hero__progress::-webkit-scrollbar { display: none; } .hero__segment { flex: 1 1 0; min-width: 0.65rem; max-width: 2.5rem; height: 4px; padding: 0; border: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: background 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease; } .hero__segment:hover { background: rgba(240, 215, 140, 0.65); transform: scaleY(1.3); } .hero__segment.is-active { background: linear-gradient(90deg, var(--color-gold-light), var(--color-emerald-bright)); box-shadow: 0 0 8px rgba(240, 215, 140, 0.5); transform: scaleY(1.4); } .hero__segment:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 3px; } /* Image-only home hero: no overlay, full-bleed bright photos */ .hero.hero--image-only { color: inherit; } .hero.hero--image-only .hero__slide { align-items: stretch; padding-bottom: 0; } .hero.hero--has-notice .hero__nav-bar { bottom: 2.75rem; } .hero__notice-ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: stretch; min-height: 2.75rem; background: linear-gradient( 90deg, color-mix(in srgb, var(--color-dark) 92%, transparent) 0%, color-mix(in srgb, var(--color-primary) 88%, transparent) 50%, color-mix(in srgb, var(--color-dark) 92%, transparent) 100% ); border-top: 1px solid rgba(255, 255, 255, 0.12); color: var(--notice-ticker-fg); overflow: hidden; pointer-events: auto; } .hero__notice-ticker-label { flex: 0 0 auto; display: flex; align-items: center; padding: 0 var(--space-3); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--notice-ticker-badge-bg); color: var(--notice-ticker-badge-fg); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); } .hero__notice-ticker-viewport { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); } .hero__notice-ticker-track { display: flex; align-items: center; gap: var(--space-4); width: max-content; padding: 0.65rem var(--space-3); animation: hero-notice-scroll 45s linear infinite; } .hero__notice-ticker:hover .hero__notice-ticker-track { animation-play-state: paused; } .hero__notice-item { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; font-size: var(--text-base); font-weight: 500; } .hero__notice-date { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; color: var(--notice-ticker-link); opacity: 0.92; } .hero__notice-link { color: var(--notice-ticker-link); font-weight: 600; text-decoration: none; } .hero__notice-link:hover { text-decoration: underline; color: var(--notice-ticker-highlight); } .hero__notice-label { color: var(--notice-ticker-highlight); font-weight: 700; } .hero__notice-sep { opacity: 0.45; font-size: 0.5rem; user-select: none; } @keyframes hero-notice-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .brand:hover, .brand:hover .brand__logo-ring, .top-strip__quick a:hover, .hero__arrow:hover, .hero__segment:hover, .hero__segment.is-active { transform: none; } .stat-card--showcase:hover, .course-card:hover, .course-card__cta:hover, .home-departments-section .departments-page__card:hover { transform: none; } .about-tabs__panel { animation: none; } .mobile-drawer__panel, .mobile-drawer__backdrop { transition: none; } .course-card, .course-card.is-revealed { animation: none; } .hero__notice-ticker-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; } } .page-home .top-strip__text { display: none; } /* ----------------------------------------------------------------------------- Stats ----------------------------------------------------------------------------- */ .stats--showcase { position: relative; padding-block: var(--space-6); background: linear-gradient(125deg, var(--color-dark) 0%, var(--color-primary) 38%, #143a58 62%, var(--color-emerald) 100%); overflow: hidden; } .stats--showcase__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 90% at 15% 50%, rgba(240, 215, 140, 0.14) 0%, transparent 55%), radial-gradient(ellipse 60% 80% at 85% 30%, rgba(45, 157, 114, 0.18) 0%, transparent 50%); pointer-events: none; } .stats--showcase .container { position: relative; z-index: 1; } .stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); list-style: none; margin: 0; padding: 0; } @media (min-width: 768px) { .stats__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } } .stat-card { text-align: center; padding: var(--space-4); border-radius: var(--radius-md); } .stat-card--showcase { position: relative; padding: var(--space-4) var(--space-3); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(6, 21, 40, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .stat-card--showcase:hover { transform: translateY(-4px); border-color: rgba(240, 215, 140, 0.45); box-shadow: 0 14px 40px rgba(6, 21, 40, 0.28); } .stat-card--showcase.stat-card--gold:hover { border-color: rgba(240, 215, 140, 0.65); } .stat-card--showcase.stat-card--emerald:hover { border-color: rgba(45, 157, 114, 0.65); } .stat-card__icon { display: block; font-size: 1.5rem; line-height: 1; margin-bottom: 0.35rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } .stat-card__value { display: block; font-family: var(--font-heading); font-size: clamp(1.375rem, 3vw, var(--text-2xl)); font-weight: 800; color: #fff; letter-spacing: -0.02em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .stat-card--showcase .stat-card__value { background: linear-gradient(180deg, #fff 30%, var(--color-gold-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; } .stat-card--gold .stat-card__value { background: linear-gradient(180deg, #fff 20%, var(--color-gold-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-card__label { display: block; margin-top: 0.25rem; font-size: var(--text-base); font-weight: 600; color: rgba(255, 255, 255, 0.82); letter-spacing: 0.02em; } /* ----------------------------------------------------------------------------- Programmes section ----------------------------------------------------------------------------- */ .programmes-section { position: relative; overflow: hidden; padding-block: var(--space-8); } .programmes-section__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(201, 162, 39, 0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 100% 80%, rgba(26, 107, 82, 0.08) 0%, transparent 55%), radial-gradient(ellipse 45% 35% at 0% 90%, rgba(12, 35, 64, 0.06) 0%, transparent 50%), linear-gradient(180deg, #fffdf9 0%, var(--color-bg) 55%, #f0ebe3 100%); pointer-events: none; } .programmes-section__inner { position: relative; z-index: 1; } .programmes-section__head { margin-bottom: var(--space-5); } .programmes-section__eyebrow { margin-bottom: var(--space-2); } .section__title--gradient { background: var(--gradient-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--color-primary); overflow-wrap: normal; word-break: normal; hyphens: manual; } .programmes-section__desc { max-width: min(52ch, 100%); margin-inline: auto; font-size: var(--text-lg); color: var(--color-text-muted); } .programmes-section__count { margin: 0 0 var(--space-4); text-align: center; font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600; color: var(--color-emerald); letter-spacing: 0.02em; } /* ----------------------------------------------------------------------------- Course grid & filters ----------------------------------------------------------------------------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); justify-content: center; } .filter-bar--rich { padding: 0.35rem; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(201, 162, 39, 0.22); border-radius: var(--radius-full); box-shadow: 0 8px 28px rgba(12, 35, 64, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); width: fit-content; max-width: 100%; margin-inline: auto; margin-bottom: var(--space-5); } .filter-bar__btn { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.55rem 1.25rem; font-family: var(--font-ui); font-size: var(--text-base); font-weight: 700; border: 2px solid transparent; border-radius: var(--radius-full); background: transparent; color: var(--color-text-muted); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; cursor: pointer; } .filter-bar__btn-hint { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; } .filter-bar__btn:hover { color: var(--color-primary); background: rgba(12, 35, 64, 0.05); } .filter-bar__btn.is-active { background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 55%, var(--color-accent-deep) 100%); color: #1a1204; border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 4px 16px rgba(201, 162, 39, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.4); transform: scale(1.02); } .filter-bar__btn.is-active .filter-bar__btn-hint { opacity: 0.85; color: #3d2e08; } .course-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; } .course-grid--rich { gap: var(--space-5); } @media (min-width: 640px) { .course-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .course-grid { grid-template-columns: repeat(3, 1fr); } } @keyframes courseCardIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .course-card { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(201, 162, 39, 0.15); box-shadow: 0 10px 32px rgba(12, 35, 64, 0.08); transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease; animation: courseCardIn 0.5s ease backwards; } .course-card.is-revealed { animation: courseCardIn 0.55s ease backwards; } .course-card:nth-child(1) { animation-delay: 0.04s; } .course-card:nth-child(2) { animation-delay: 0.08s; } .course-card:nth-child(3) { animation-delay: 0.12s; } .course-card:nth-child(4) { animation-delay: 0.16s; } .course-card:nth-child(5) { animation-delay: 0.2s; } .course-card:nth-child(6) { animation-delay: 0.24s; } .course-card:nth-child(n+7) { animation-delay: 0.28s; } .course-card:hover { box-shadow: 0 20px 48px rgba(12, 35, 64, 0.14); transform: translateY(-6px); border-color: rgba(45, 157, 114, 0.35); } .course-card.is-hidden { display: none; } .course-card__media { position: relative; aspect-ratio: 5/3; overflow: hidden; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-emerald) 100%); } .course-card__media--placeholder { min-height: 8rem; } .course-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .course-card:hover .course-card__media img { transform: scale(1.08); } .course-card__media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6, 21, 40, 0.55) 100%); pointer-events: none; opacity: 0.7; transition: opacity 0.35s ease; } .course-card:hover .course-card__media-shade { opacity: 0.85; } .course-card__badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; padding: 0.28rem 0.65rem; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius-full); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .course-card--ug .course-card__badge { color: #0f4a38; background: linear-gradient(135deg, #e8f5f0 0%, #b8e4d0 100%); border: 1px solid rgba(26, 107, 82, 0.3); } .course-card--pg .course-card__badge { color: #5c4206; background: linear-gradient(135deg, #fdf6e3 0%, #f0dfa8 100%); border: 1px solid rgba(201, 162, 39, 0.4); } .course-card--doctoral .course-card__badge { color: #fff; background: linear-gradient(135deg, var(--color-primary-mid) 0%, var(--color-primary) 100%); border: 1px solid rgba(255, 255, 255, 0.2); } .course-card__body { padding: var(--space-3) var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 0.35rem; border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--color-gold), var(--color-emerald-bright)) 1; } .course-card__title { font-size: var(--text-lg); margin: 0; color: var(--color-primary); line-height: 1.3; transition: color 0.25s ease; } .course-card:hover .course-card__title { color: var(--color-emerald); } .course-card__text { margin: 0; font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--line-height-normal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .course-card__cta { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; margin-top: 0.5rem; padding: 0.5rem 1rem; font-family: var(--font-ui); font-size: var(--text-base); font-weight: 700; text-decoration: none; color: #fff; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 100%); box-shadow: 0 4px 14px rgba(12, 35, 64, 0.22); transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease, gap 0.25s ease; } .course-card__cta:hover { background: linear-gradient(135deg, var(--color-emerald) 0%, var(--color-primary) 100%); box-shadow: 0 6px 20px rgba(26, 107, 82, 0.35); color: #fff; gap: 0.55rem; transform: translateX(2px); } .course-card__cta-icon { flex-shrink: 0; transition: transform 0.25s ease; } .course-card__cta:hover .course-card__cta-icon { transform: translateX(3px); } /* Legacy alias */ .course-card__link { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-ui); font-size: var(--text-base); font-weight: 700; text-decoration: none; color: var(--color-primary); } .course-card__link:hover { text-decoration: underline; } @media (max-width: 479px) { .filter-bar--rich { width: 100%; justify-content: center; } .filter-bar__btn-hint { display: none; } .filter-bar__btn { flex: 1 1 auto; min-width: 4.5rem; padding: 0.5rem 0.75rem; } .stat-card--showcase { padding: var(--space-3) var(--space-2); } .stat-card__icon { font-size: 1.25rem; } } /* ----------------------------------------------------------------------------- About split & Welcome section ----------------------------------------------------------------------------- */ .split { display: grid; gap: var(--space-6); align-items: center; } .split--welcome { position: relative; z-index: 1; align-items: center; } @media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; } } .split__media { position: relative; min-width: 0; } .split__content { min-width: 0; } .split__img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); object-fit: cover; max-height: 480px; } /* Home — Departments strip */ .home-departments-section { position: relative; padding-block: var(--space-8); overflow: hidden; } .home-departments-section__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 0% 0%, rgba(26, 107, 82, 0.09) 0%, transparent 55%), radial-gradient(ellipse 60% 45% at 100% 100%, rgba(201, 162, 39, 0.1) 0%, transparent 50%), linear-gradient(180deg, var(--color-bg) 0%, #fffdf9 50%, var(--color-surface-elevated) 100%); pointer-events: none; } .home-departments-section__inner { position: relative; z-index: 1; } .home-departments-section__head { margin-bottom: var(--space-5); } .home-departments-section__desc { max-width: min(52ch, 100%); margin-inline: auto; text-align: center; text-align-last: center; } .home-departments-section__all-link { font-weight: 700; color: var(--color-emerald); text-decoration: none; border-bottom: 1px solid rgba(26, 107, 82, 0.35); } .home-departments-section__all-link:hover { color: var(--color-primary); border-bottom-color: var(--color-gold); } .home-departments-section__rail { min-width: 0; overflow: visible; } .home-departments-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } @media (min-width: 768px) { .home-departments-section__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .home-departments-section__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } } @media (min-width: 640px) and (max-width: 1099px) { .home-departments-section__rail { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 0.35rem; scrollbar-width: thin; scrollbar-color: rgba(201, 162, 39, 0.45) transparent; } .home-departments-section__grid { display: flex; flex-wrap: nowrap; gap: var(--space-3); padding-inline: 0.15rem; } .home-departments-section__grid .departments-page__cell { flex: 0 0 clamp(220px, 32vw, 280px); scroll-snap-align: start; } } .home-departments-section .departments-page__card { min-height: 12rem; aspect-ratio: 4 / 3; border: 1px solid rgba(201, 162, 39, 0.2); box-shadow: 0 10px 28px rgba(12, 35, 64, 0.1); } .home-departments-section .departments-page__card-scrim { background: linear-gradient(180deg, rgba(6, 21, 40, 0.08) 0%, rgba(6, 21, 40, 0.72) 100%); } .home-departments-section .departments-page__card:hover { border-color: rgba(45, 157, 114, 0.45); box-shadow: 0 16px 40px rgba(12, 35, 64, 0.16); transform: translateY(-4px); } .home-departments-section .departments-page__card-link-icon { background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold)); color: var(--color-primary); } /* Home — Welcome section */ .welcome-section { position: relative; overflow: hidden; } .welcome-section__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(26, 107, 82, 0.07) 0%, transparent 55%), radial-gradient(ellipse 50% 70% at 100% 40%, rgba(201, 162, 39, 0.09) 0%, transparent 50%), linear-gradient(180deg, var(--color-bg) 0%, #faf6ef 100%); pointer-events: none; } .welcome-section__inner { position: relative; z-index: 1; } /* Scroll-reveal (staggered) — falls back to visible when JS/observer absent */ .welcome-section [data-welcome-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .welcome-section.is-revealed [data-welcome-reveal], .welcome-section [data-welcome-reveal].is-visible { opacity: 1; transform: none; } .welcome-section__card { position: relative; background: linear-gradient(165deg, #fffdf9 0%, #ffffff 48%, #faf7f1 100%); border: 1px solid rgba(201, 162, 39, 0.28); border-radius: var(--radius-lg); box-shadow: 0 4px 6px rgba(12, 35, 64, 0.04), 0 18px 48px rgba(12, 35, 64, 0.08); overflow: hidden; transition: box-shadow 0.4s ease, transform 0.4s ease; } .welcome-section__card:hover { box-shadow: 0 6px 10px rgba(12, 35, 64, 0.06), 0 26px 60px rgba(12, 35, 64, 0.12); } .welcome-section__figure { position: relative; width: 100%; max-width: 13.5rem; aspect-ratio: 1; margin: 0; padding: 0.45rem; background: var(--gradient-brand-ring); border-radius: calc(var(--radius-lg) + 2px); box-shadow: 0 10px 28px rgba(12, 35, 64, 0.12); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease; } .welcome-section__figure:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 18px 40px rgba(12, 35, 64, 0.2); } .welcome-section__figure-glow { position: absolute; inset: -18%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(201, 162, 39, 0.35) 0%, rgba(45, 157, 114, 0.18) 45%, transparent 70%); filter: blur(24px); opacity: 0.7; animation: welcomeGlowPulse 6s ease-in-out infinite; pointer-events: none; } @keyframes welcomeGlowPulse { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.08); opacity: 0.85; } } .welcome-section__img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px rgba(12, 35, 64, 0.06); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .welcome-section__figure:hover .welcome-section__img { transform: scale(1.03); } .welcome-section__years { position: absolute; right: -0.4rem; bottom: -0.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 3.5rem; padding: 0.4rem 0.55rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-emerald) 100%); border: 2px solid var(--color-gold-light); border-radius: var(--radius-md); box-shadow: 0 8px 20px rgba(6, 21, 40, 0.22); color: #fff; text-align: center; line-height: 1.1; animation: welcomeBadgeFloat 4.5s ease-in-out infinite; } @keyframes welcomeBadgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .welcome-section__years-value { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; } .welcome-section__years-label { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.92; } .welcome-section__main { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); } @media (min-width: 768px) { .welcome-section__main { padding: var(--space-5) var(--space-6); gap: var(--space-4); } } .welcome-section__header { text-align: left; padding-bottom: var(--space-2); border-bottom: 1px solid rgba(12, 35, 64, 0.08); } .welcome-section__eyebrow { margin: 0 0 var(--space-1); } .welcome-section__header .section__title { margin: 0; } .welcome-section__title-rule { display: block; width: 3.5rem; height: 3px; margin-top: var(--space-2); border-radius: var(--radius-full); background: linear-gradient(90deg, var(--color-gold), var(--color-emerald-bright)); } .welcome-section__hero { display: grid; grid-template-columns: minmax(10.5rem, 13.5rem) minmax(0, 1fr); gap: var(--space-4); align-items: stretch; } @media (min-width: 768px) { .welcome-section__hero { gap: var(--space-5); } } .welcome-section__intro { display: flex; flex-direction: column; gap: var(--space-3); justify-content: space-between; min-width: 0; min-height: 100%; } .welcome-section__lead { margin: 0; max-width: none; font-size: var(--text-md); line-height: var(--line-height-relaxed); } .welcome-section__focus-block { min-width: 0; } .welcome-section__focus-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-deep); } .welcome-section__focus-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-emerald) 0%, var(--color-emerald-bright) 100%); color: #fff; box-shadow: 0 6px 16px rgba(26, 107, 82, 0.25); } .welcome-section__focus-icon svg { width: 1.35rem; height: 1.35rem; } .welcome-section__focus-icon--mission { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-accent-deep) 0%, var(--color-gold) 100%); box-shadow: 0 6px 16px rgba(201, 162, 39, 0.28), 0 0 0 4px color-mix(in srgb, var(--color-gold) 22%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.35); } .welcome-section__focus-icon--mission svg { width: 1.4rem; height: 1.4rem; } .welcome-section__focus-block--vision { flex: 1; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: linear-gradient(135deg, rgba(26, 107, 82, 0.07) 0%, rgba(201, 162, 39, 0.06) 100%); border: 1px solid rgba(26, 107, 82, 0.12); border-left: 3px solid var(--color-emerald-bright); border-radius: var(--radius-md); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .welcome-section__focus-block--vision:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(26, 107, 82, 0.16); border-left-color: var(--color-gold); } .welcome-section__focus-body { min-width: 0; } .welcome-section__focus-block--vision .welcome-section__focus-title { margin-bottom: 0.35rem; } .welcome-section__vision-text { margin: 0; font-size: var(--text-md); font-style: italic; font-weight: 500; line-height: var(--line-height-relaxed); color: var(--color-primary); } .welcome-section__mission-block { width: 100%; padding: var(--space-4); background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(12, 35, 64, 0.08); border-radius: var(--radius-md); } .welcome-section__mission-head { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: var(--space-4); } .welcome-section__mission-head .welcome-section__focus-title { position: relative; margin: 0; padding-bottom: 0.65rem; font-size: var(--text-md); letter-spacing: 0.14em; color: var(--color-primary); } .welcome-section__mission-head .welcome-section__focus-title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 3.25rem; height: 3px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--color-gold), var(--color-emerald-bright)); } /* Mission — connected "journey" stepper (horizontal desktop, vertical timeline mobile) */ .welcome-section__mission-list { position: relative; margin: 0; padding: 0; list-style: none; display: flex; gap: 0; } /* Flowing connector line running through the node centers */ .welcome-section__mission-list::before { content: ""; position: absolute; top: 1.65rem; left: 10%; right: 10%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--color-emerald), var(--color-gold), var(--color-emerald-bright), var(--color-accent), var(--color-emerald-bright)); background-size: 200% 100%; animation: missionFlow 6s linear infinite; z-index: 0; } @keyframes missionFlow { 0% { background-position: 0 0; } 100% { background-position: 200% 0; } } .welcome-section__mission-item { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; margin: 0; padding: 0 0.4rem; } .welcome-section__mission-num { position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%); display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.35rem; border-radius: var(--radius-full); background: var(--color-surface); border: 2px solid color-mix(in srgb, var(--mission-accent) 55%, #fff); color: var(--mission-accent); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 800; line-height: 1; box-shadow: 0 2px 6px rgba(12, 35, 64, 0.14); z-index: 2; transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; } .welcome-section__mission-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3.3rem; height: 3.3rem; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--mission-accent) 0%, var(--mission-accent-2) 100%); color: #fff; border: 4px solid var(--color-surface); box-shadow: 0 8px 20px color-mix(in srgb, var(--mission-accent) 32%, transparent); z-index: 1; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; } .welcome-section__mission-icon svg { width: 1.5rem; height: 1.5rem; } .welcome-section__mission-item:hover .welcome-section__mission-icon { transform: translateY(-5px) scale(1.08); box-shadow: 0 14px 28px color-mix(in srgb, var(--mission-accent) 48%, transparent); } .welcome-section__mission-item:hover .welcome-section__mission-num { background: linear-gradient(135deg, var(--mission-accent) 0%, var(--mission-accent-2) 100%); color: #fff; transform: translate(-50%, -55%) scale(1.1); } .welcome-section__mission-text { min-width: 0; font-size: var(--text-sm); font-weight: 700; line-height: var(--line-height-snug); color: var(--color-primary); transition: color 0.3s ease; } .welcome-section__mission-item:hover .welcome-section__mission-text { color: color-mix(in srgb, var(--mission-accent) 80%, var(--color-primary)); } /* Vertical timeline on small screens */ @media (max-width: 639px) { .welcome-section__mission-list { flex-direction: column; gap: 1.15rem; align-items: stretch; } .welcome-section__mission-list::before { top: 1.65rem; bottom: 1.65rem; left: 1.65rem; right: auto; width: 3px; height: auto; background: linear-gradient(180deg, var(--color-emerald), var(--color-gold), var(--color-emerald-bright), var(--color-accent), var(--color-emerald-bright)); background-size: 100% 200%; } .welcome-section__mission-item { flex-direction: row; align-items: center; text-align: left; gap: 1rem; padding: 0; } .welcome-section__mission-num { top: 50%; left: 1.65rem; transform: translate(-50%, calc(-50% - 1.65rem)); } .welcome-section__mission-item:hover .welcome-section__mission-num { transform: translate(-50%, calc(-50% - 1.65rem)) scale(1.1); } .welcome-section__mission-text { font-size: var(--text-base); } } @media (prefers-reduced-motion: reduce) { .welcome-section__mission-list::before { animation: none; } } .welcome-section__actions { margin-top: 0; padding-top: var(--space-2); border-top: 1px solid rgba(12, 35, 64, 0.08); } .welcome-section__cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; } .welcome-section__cta-arrow { width: 1.05rem; height: 1.05rem; transition: transform 0.25s ease; } .welcome-section__cta:hover .welcome-section__cta-arrow { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .welcome-section [data-welcome-reveal] { opacity: 1; transform: none; transition: none; } .welcome-section__figure-glow, .welcome-section__years { animation: none; } } @media (max-width: 767px) { .welcome-section__main { padding: var(--space-4); } .welcome-section__hero { grid-template-columns: minmax(8.5rem, 10.5rem) minmax(0, 1fr); gap: var(--space-3); } .welcome-section__figure { max-width: 10.5rem; } .welcome-section__img { min-height: 0; } .welcome-section__lead { font-size: var(--text-base); } } .about-tabs--rich { margin-bottom: 0; } .about-tabs--rich .about-tabs__nav { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.3rem; margin-bottom: var(--space-4); background: rgba(12, 35, 64, 0.05); border: 1px solid rgba(201, 162, 39, 0.18); border-radius: var(--radius-full); } .about-tabs--rich .about-tabs__btn { padding: 0.55rem 1.15rem; font-family: var(--font-ui); font-weight: 700; font-size: var(--text-base); border: 2px solid transparent; border-radius: var(--radius-full); background: transparent; color: var(--color-text-muted); transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; cursor: pointer; } .about-tabs--rich .about-tabs__btn:hover { color: var(--color-primary); background: rgba(255, 255, 255, 0.65); } .about-tabs--rich .about-tabs__btn.is-active { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 100%); color: #fff; border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 14px rgba(12, 35, 64, 0.22); } .about-tabs__panels { min-height: 7.5rem; } .about-tabs__panel { animation: aboutPanelIn 0.35s ease; } @keyframes aboutPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .quote--rich { margin: 0; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); border: none; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(26, 107, 82, 0.08) 0%, rgba(201, 162, 39, 0.08) 100%); border-left: 4px solid transparent; border-image: linear-gradient(180deg, var(--color-gold), var(--color-emerald-bright)) 1; font-size: clamp(1.0625rem, 2vw, var(--text-lg)); font-style: italic; font-weight: 500; line-height: 1.65; color: var(--color-primary); } .mission-list--rich { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.65rem; } .mission-list--rich li { position: relative; margin: 0; padding: 0.65rem 0.85rem 0.65rem 2rem; font-size: var(--text-base); font-weight: 500; color: var(--color-text); background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(12, 35, 64, 0.08); border-radius: var(--radius-sm); line-height: 1.5; } .mission-list--rich li::before { content: ""; position: absolute; left: 0.75rem; top: 50%; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: linear-gradient(135deg, var(--color-gold), var(--color-emerald-bright)); transform: translateY(-50%); } /* ----------------------------------------------------------------------------- Submenu page layout tuning ----------------------------------------------------------------------------- */ .submenu-page__intro-section { position: relative; overflow: hidden; padding-block: var(--space-8); } .submenu-page__intro-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 120% 80% at 100% 0%, rgba(12, 35, 64, 0.08) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 0% 100%, rgba(184, 134, 11, 0.06) 0%, transparent 50%); pointer-events: none; } .submenu-page__intro { position: relative; z-index: 1; } .submenu-page__intro-grid { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 900px) { .submenu-page__intro-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-8); } .submenu-page__intro.is-reverse .submenu-page__intro-copy { order: 2; } .submenu-page__intro.is-reverse .submenu-page__intro-visual { order: 1; } } .submenu-page__intro-copy { min-width: 0; max-width: 62ch; } .submenu-page__intro-title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--space-3); } .submenu-page__intro-lead { font-size: clamp(1.0625rem, 0.9rem + 0.35vw, 1.25rem); line-height: 1.65; margin-bottom: var(--space-3); } .submenu-page__intro-body { margin: 0 0 var(--space-4); font-size: var(--text-md); line-height: 1.78; text-wrap: pretty; color: var(--color-text); } .submenu-page__intro-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .submenu-page__intro-highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } @media (min-width: 640px) { .submenu-page__intro-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .submenu-page__intro-highlight { min-width: 0; padding: var(--space-3); border-radius: var(--radius-md); background: #fff; border: 1px solid rgba(12, 35, 64, 0.1); box-shadow: var(--shadow-sm); } .submenu-page__intro-highlight-text { display: block; font-size: var(--text-base); font-weight: 600; line-height: 1.55; color: rgba(15, 23, 42, 0.9); } .submenu-page__intro-visual { margin: 0; } /* Generic submenu hero: drop the empty image column and present a centered, prominent full-width band (consistent with the dedicated page heroes). */ .submenu-page__intro-visual { display: none; } .submenu-page__intro-grid { justify-items: center; } @media (min-width: 900px) { .submenu-page__intro-grid { grid-template-columns: minmax(0, 1fr); } } .submenu-page__intro-copy { max-width: 60rem; margin-inline: auto; text-align: center; } #main .submenu-page__intro-copy .submenu-page__intro-title, #main .submenu-page__intro-copy .section__title--left { text-align: center; text-align-last: center; } .submenu-page__intro-copy .eyebrow { justify-content: center; margin-inline: auto; } #main .submenu-page__intro-copy .submenu-page__intro-title { font-size: clamp(2rem, 4.4vw, 3.1rem); } #main .submenu-page__intro-copy .submenu-page__intro-title::after { content: ""; display: block; width: 72px; height: 4px; margin: var(--space-3) auto 0; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); } #main .submenu-page__intro-copy .submenu-page__intro-lead, #main .submenu-page__intro-copy .submenu-page__intro-body { margin-inline: auto; max-width: 52rem; text-align: center; text-align-last: center; text-justify: auto; hyphens: manual; } .submenu-page__intro-actions { justify-content: center; } .submenu-page__intro-highlights { max-width: 44rem; margin-inline: auto; } .submenu-page__intro-frame { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.65); background: linear-gradient(160deg, rgba(12, 35, 64, 0.1), rgba(255, 255, 255, 0.45)); padding: var(--space-2); } .submenu-page__intro-frame--emblem { display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: #fff; min-height: min(360px, 48vh); } .submenu-page__intro-img:not(.submenu-page__intro-img--contain) { display: block; width: 100%; height: auto; max-height: min(420px, 52vh); object-fit: cover; object-position: center; border-radius: calc(var(--radius-lg) - 6px); } .submenu-page__intro-img--contain { display: block; width: auto; max-width: min(280px, 72%); max-height: min(240px, 34vh); height: auto; margin-inline: auto; object-fit: contain; object-position: center; box-sizing: border-box; } .submenu-page__intro-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 280px; width: 100%; padding: var(--space-6) var(--space-4); border-radius: calc(var(--radius-lg) - 6px); background: linear-gradient(145deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.88) 55%, rgba(184, 134, 11, 0.35) 100%); text-align: center; } .submenu-page__intro-placeholder-mark { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 800; letter-spacing: 0.08em; color: #fff; } .submenu-page__intro-placeholder-text { max-width: 24ch; font-size: var(--text-base); font-weight: 600; line-height: 1.5; color: rgba(255, 255, 255, 0.9); } .submenu-page .split { align-items: start; } .submenu-page .split__content { max-width: 62ch; } .submenu-page__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .submenu-page__chip { display: inline-block; border-radius: var(--radius-full); padding: 0.35rem 0.75rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.01em; } .submenu-page .fac-card { height: 100%; } .submenu-page__narrative .fac-card, .submenu-page__focus .fac-card { border-width: 1px; } /* Category themes */ .submenu-page.theme-about .section__title { color: var(--color-primary); } .submenu-page.theme-about .submenu-page__chip { background: rgba(12, 35, 64, 0.08); color: var(--color-primary); border: 1px solid var(--border-page-accent); } .submenu-page.theme-about .submenu-page__focus .fac-card { border-top: 3px solid var(--color-gold); } .submenu-page.theme-about .submenu-page__intro-highlight { border-left: 3px solid var(--color-gold); } .submenu-page.theme-management .section__title { color: var(--color-primary); } .submenu-page.theme-management .submenu-page__chip { background: rgba(12, 35, 64, 0.08); color: var(--color-primary-mid); border: 1px solid var(--border-page-accent); } .submenu-page.theme-management .submenu-page__focus .fac-card { border-top: 3px solid var(--color-primary-mid); } .submenu-page.theme-management .submenu-page__intro-highlight { border-left: 3px solid var(--color-primary-mid); } .submenu-page.theme-admission .section__title { color: var(--color-accent-deep); } .submenu-page.theme-admission .submenu-page__chip { background: rgba(201, 162, 39, 0.12); color: #5c4206; border: 1px solid rgba(201, 162, 39, 0.28); } .submenu-page.theme-admission .submenu-page__focus .fac-card { border-top: 3px solid var(--color-gold); } .submenu-page.theme-admission .submenu-page__intro-highlight { border-left: 3px solid var(--color-gold); } .submenu-page.theme-academics .section__title { color: var(--color-primary-mid); } .submenu-page.theme-academics .submenu-page__chip { background: var(--color-emerald-soft); color: var(--color-emerald); border: 1px solid rgba(26, 107, 82, 0.2); } .submenu-page.theme-academics .submenu-page__focus .fac-card { border-top: 3px solid var(--color-emerald-bright); } .submenu-page.theme-academics .submenu-page__intro-highlight { border-left: 3px solid var(--color-emerald-bright); } .submenu-page.theme-students .section__title { color: var(--color-emerald); } .submenu-page.theme-students .submenu-page__chip { background: var(--color-emerald-soft); color: var(--color-emerald); border: 1px solid rgba(26, 107, 82, 0.22); } .submenu-page.theme-students .submenu-page__focus .fac-card { border-top: 3px solid var(--color-emerald); } .submenu-page.theme-students .submenu-page__intro-highlight { border-left: 3px solid var(--color-emerald); } .submenu-page.theme-alumnae .section__title { color: var(--color-primary); } .submenu-page.theme-alumnae .submenu-page__chip { background: rgba(201, 162, 39, 0.1); color: #5c4206; border: 1px solid var(--border-page-accent); } .submenu-page.theme-alumnae .submenu-page__focus .fac-card { border-top: 3px solid var(--color-gold-light); } .submenu-page.theme-alumnae .submenu-page__intro-highlight { border-left: 3px solid var(--color-gold); } .submenu-page.theme-support .section__title { color: var(--color-primary); } .submenu-page.theme-support .submenu-page__chip { background: rgba(12, 35, 64, 0.07); color: var(--color-primary); border: 1px solid rgba(26, 107, 82, 0.18); } .submenu-page.theme-support .submenu-page__focus .fac-card { border-top: 3px solid var(--color-emerald-bright); } .submenu-page.theme-support .submenu-page__intro-highlight { border-left: 3px solid var(--color-emerald-bright); } /* About SJC page (submenu slug=about-sjc) */ .about-page [id] { scroll-margin-top: calc(var(--strip-h) + var(--header-h) + 52px); } .about-page__hero { position: relative; overflow: hidden; padding-block: var(--space-8); } .about-page__hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 120% 80% at 100% 0%, rgba(12, 35, 64, 0.1) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 0% 100%, rgba(184, 134, 11, 0.07) 0%, transparent 50%); pointer-events: none; } .about-page__hero-grid { position: relative; z-index: 1; display: grid; gap: var(--space-5); align-items: start; grid-template-columns: 1fr; grid-template-areas: "copy" "media" "stats"; } .about-page__hero-copy { grid-area: copy; min-width: 0; } @media (min-width: 900px) { .about-page__hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-rows: auto auto; grid-template-areas: "copy media" "stats stats"; gap: var(--space-5) var(--space-8); align-items: center; } } .about-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: var(--color-dark-surface); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .about-page__lead { max-width: 58ch; margin-bottom: var(--space-4); } .about-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .about-page__hero-visual { grid-area: media; margin: 0; } .about-page__hero-frame { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.65); background: linear-gradient(160deg, rgba(12, 35, 64, 0.12), rgba(255, 255, 255, 0.4)); padding: var(--space-2); } .about-page__hero-img { display: block; width: 100%; height: auto; max-height: min(420px, 52vh); object-fit: cover; object-position: center; border-radius: calc(var(--radius-lg) - 6px); } .about-page__hero-frame--emblem { padding: var(--space-4); background: #fff; min-height: min(360px, 48vh); } .about-page__hero-img--contain { width: auto; max-width: 100%; max-height: min(360px, 48vh); object-fit: contain; object-position: center; padding: var(--space-4); box-sizing: border-box; background: #fff; } .about-page__hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 280px; padding: var(--space-6) var(--space-4); border-radius: calc(var(--radius-lg) - 6px); background: linear-gradient(145deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.88) 55%, rgba(184, 134, 11, 0.35) 100%); text-align: center; } .about-page__hero-placeholder-mark { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 800; letter-spacing: 0.08em; color: #fff; } .about-page__hero-placeholder-text { max-width: 22ch; font-size: var(--text-base); font-weight: 600; line-height: 1.5; color: rgba(255, 255, 255, 0.9); } .about-page__hero-caption { margin-top: var(--space-2); font-size: var(--text-base); color: var(--color-text-muted); text-align: center; } .about-page__stat-strip { grid-area: stats; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); min-width: 0; } @media (min-width: 640px) { .about-page__stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 420px) { .about-page__stat-strip { grid-template-columns: 1fr; } } .about-page__stat-card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid rgba(12, 35, 64, 0.12); min-width: 0; transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); } .about-page__stat-card:hover { box-shadow: var(--shadow-md); border-color: rgba(12, 35, 64, 0.22); transform: translateY(-2px); } .about-page__stat-card-inner { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: var(--space-2); min-height: 4.75rem; padding: var(--space-3) var(--space-2); box-sizing: border-box; } .about-page__stat-num { display: block; font-size: var(--text-xl); font-weight: 800; color: var(--color-primary); letter-spacing: -0.02em; line-height: 1.3; } .about-page__stat-label { display: block; margin: 0; font-size: clamp(0.625rem, 1.1vw + 0.35rem, 0.75rem); font-weight: 600; color: rgba(12, 35, 64, 0.78); text-transform: uppercase; letter-spacing: 0.035em; line-height: 1.35; } .about-page__jump { position: sticky; top: calc(var(--strip-h) + var(--header-h)); z-index: 85; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(12, 35, 64, 0.1); box-shadow: 0 4px 20px rgba(12, 35, 64, 0.05); } .about-page__jump-inner { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-2); align-items: center; } .about-page__jump-link { font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600; color: var(--color-primary); text-decoration: none; padding: 0.45rem 0.85rem; border-radius: var(--radius-full); border: 1px solid transparent; transition: background var(--transition), color var(--transition), border-color var(--transition); } .about-page__jump-link:hover { background: rgba(12, 35, 64, 0.08); border-color: rgba(12, 35, 64, 0.12); } .about-page__section-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; color: var(--color-primary); margin: 0 0 var(--space-3); } .about-page__section-intro { max-width: 62ch; margin: 0; font-size: var(--text-lg); color: var(--color-text-muted); line-height: var(--line-height-relaxed); } .about-page__section-head { margin-bottom: var(--space-5); } .about-page__split { display: grid; gap: var(--space-6); align-items: start; } @media (min-width: 900px) { .about-page__split { grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); gap: var(--space-8); } } .about-page__text { margin: 0 0 var(--space-4); font-size: var(--text-md); line-height: 1.78; text-wrap: pretty; color: var(--color-text); } .about-page__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .about-page__facts li { display: grid; gap: 0.35rem; padding: var(--space-3); border-radius: var(--radius-md); background: rgba(12, 35, 64, 0.04); border: 1px solid rgba(12, 35, 64, 0.08); } .about-page__fact-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(12, 35, 64, 0.72); } .about-page__fact-value { font-size: var(--text-base); line-height: 1.55; color: var(--color-text); } .about-page__motto-card { margin: 0; min-height: 12rem; display: flex; align-items: center; justify-content: center; padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(12, 35, 64, 0.1) 0%, rgba(12, 35, 64, 0.04) 50%, rgba(184, 134, 11, 0.08) 100%); border: 1px solid rgba(12, 35, 64, 0.14); position: relative; box-shadow: var(--shadow-sm); } .about-page__motto-card::before { content: "“"; font-size: 3.5rem; line-height: 1; color: rgba(12, 35, 64, 0.2); position: absolute; top: var(--space-3); left: var(--space-4); font-family: Georgia, "Times New Roman", serif; } .about-page__motto-card p { margin: 0; padding-top: var(--space-3); font-size: clamp(1.15rem, 2.8vw, 1.45rem); font-weight: 700; font-style: italic; color: var(--color-primary); line-height: 1.45; text-align: center; font-family: var(--font-heading); } .about-page__value-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } @media (min-width: 700px) { .about-page__value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .about-page__value-card { height: 100%; padding: var(--space-4); border-radius: var(--radius-md); background: #fff; border: 1px solid rgba(12, 35, 64, 0.1); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); } .about-page__value-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .about-page__value-title { margin: 0; font-size: var(--text-base); line-height: 1.55; color: var(--color-primary); } .about-page__quality-grid { display: grid; gap: var(--space-4); } @media (min-width: 900px) { .about-page__quality-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .about-page__quality-card { height: 100%; padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.1); box-shadow: var(--shadow-sm); } .about-page__quality-kicker { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); } .about-page__quality-title { margin: 0 0 var(--space-2); font-size: var(--text-xl); color: var(--color-primary); } .about-page__quality-text { margin: 0; line-height: 1.65; color: var(--color-text-muted); } .about-page__mission-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } @media (min-width: 700px) { .about-page__mission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .about-page__mission-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .about-page__mission-card { border-top: 3px solid var(--color-primary); } /* History page (submenu slug=history) — full layout, motion, founder portrait */ .history-page [id] { scroll-margin-top: calc(var(--strip-h) + var(--header-h) + 52px); } /* One size + line-height for all narrative paragraphs (no mixed clamp / sm / md) */ .history-page { --history-prose-font-size: var(--text-md); --history-prose-line-height: 1.78; } .history-page__rich p, .history-page__growth-copy p, .history-page__founder-main p, .history-page__timeline-body p, .history-page .history-page__founder-quote { font-size: var(--history-prose-font-size); line-height: var(--history-prose-line-height); } .history-page__rich p, .history-page__growth-copy p, .history-page__founder-main p { text-wrap: pretty; } .history-page__hero { position: relative; overflow: hidden; padding-block: var(--space-8); } .history-page__hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 120% 80% at 100% 0%, rgba(12, 35, 64, 0.09) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 0% 100%, rgba(184, 134, 11, 0.06) 0%, transparent 50%); pointer-events: none; } .history-page__hero-grid { position: relative; z-index: 1; display: grid; gap: var(--space-5); align-items: start; grid-template-columns: 1fr; grid-template-areas: "copy" "stats" "media"; } .history-page__hero-copy { grid-area: copy; min-width: 0; } @media (min-width: 900px) { .history-page__hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-rows: auto auto; grid-template-areas: "copy media" "stats stats"; gap: var(--space-5) var(--space-8); align-items: center; } } .history-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: var(--color-dark-surface); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .history-page__tagline em { font-style: normal; color: var(--color-primary); font-weight: 700; } .history-page__stat-strip { grid-area: stats; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); min-width: 0; } @media (min-width: 640px) { .history-page__stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 420px) { .history-page__stat-strip { grid-template-columns: 1fr; } } .history-page__stat-card { background: #fff; border-radius: var(--radius-md); padding: 0; box-shadow: var(--shadow-sm); border: 1px solid rgba(12, 35, 64, 0.12); min-width: 0; transition: box-shadow var(--transition), border-color var(--transition); } .history-page__stat-card:hover { box-shadow: var(--shadow-md); border-color: rgba(12, 35, 64, 0.22); } .history-page__stat-card-inner { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: var(--space-2); min-height: 4.75rem; padding: var(--space-3) var(--space-2); box-sizing: border-box; } .history-page__stat-num { display: block; flex-shrink: 0; font-size: var(--text-xl); font-weight: 800; color: var(--color-primary); letter-spacing: -0.02em; line-height: 1.3; } .history-page__stat-label { display: block; flex-shrink: 0; margin: 0; font-size: clamp(0.625rem, 1.1vw + 0.35rem, 0.75rem); font-weight: 600; color: rgba(12, 35, 64, 0.78); text-transform: uppercase; letter-spacing: 0.035em; line-height: 1.35; white-space: nowrap; } .history-page__hero-visual { grid-area: media; margin: 0; } @media (min-width: 900px) { .history-page__hero-visual { align-self: center; } } .history-page__hero-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.65); background: linear-gradient(160deg, rgba(12, 35, 64, 0.12), rgba(255, 255, 255, 0.4)); padding: var(--space-2); } .history-page__hero-img { display: block; width: 100%; height: auto; max-height: min(420px, 52vh); object-fit: cover; object-position: center; border-radius: calc(var(--radius-lg) - 6px); } @media (min-width: 900px) { .history-page__hero-img { max-height: 440px; } } .history-page__hero-frame--emblem { display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: #fff; min-height: min(360px, 48vh); } .history-page__hero-img--contain { display: block; width: auto; max-width: 100%; max-height: min(320px, 44vh); height: auto; margin-inline: auto; object-fit: contain; object-position: center; } /* Sticky in-page navigation */ .history-page__jump { position: sticky; top: calc(var(--strip-h) + var(--header-h)); z-index: 85; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(12, 35, 64, 0.1); box-shadow: 0 4px 20px rgba(12, 35, 64, 0.05); } .history-page__jump-inner { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-2); align-items: center; } .history-page__jump-link { font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600; color: var(--color-primary); text-decoration: none; padding: 0.45rem 0.85rem; border-radius: var(--radius-full); border: 1px solid transparent; transition: background var(--transition), color var(--transition), border-color var(--transition); } .history-page__jump-link:hover { background: rgba(12, 35, 64, 0.08); } .history-page__jump-link.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .history-page__jump-link:focus-visible { outline: 3px solid rgba(12, 35, 64, 0.35); outline-offset: 2px; } /* Section rhythm & readability */ .history-page__section-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; color: var(--color-dark-surface); margin: 0 0 var(--space-4); line-height: 1.2; letter-spacing: -0.02em; } .history-page__block-head { margin-bottom: var(--space-6); max-width: min(40rem, 100%); } .history-page__section-lead { margin: var(--space-2) 0 0; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.76); } .history-page__rich p { color: rgba(15, 23, 42, 0.92); margin: 0; } .history-page__rich p + p { margin-top: var(--space-4); } /* Inline emphasis: bold + darker colour only (no rules, backgrounds, or underline) */ .history-page .history-page__hl, .emblem-page .emblem-page__hl:not(.emblem-page__hl--on-dark) { font-weight: 700; color: #050f1a; background: none; padding: 0; margin: 0; border: none; border-radius: 0; letter-spacing: 0; box-shadow: none; text-decoration: none; font-style: normal; font-variant: normal; } /* Shared reset for all emblem highlights (colour set per context below) */ .emblem-page .emblem-page__hl { font-weight: 700; background: none; padding: 0; margin: 0; border: none; border-radius: 0; letter-spacing: 0; box-shadow: none; text-decoration: none; font-style: normal; font-variant: normal; } .history-page .history-page__hl--role { font-weight: 700; color: #050f1a; font-style: normal; font-variant: normal; letter-spacing: 0; } .history-page .history-page__hl--motto { font-weight: 700; color: #050f1a; font-style: italic; } .history-page__section-lead .history-page__hl { font-size: inherit; } /* Founder intro: one line (full container width + scale on small viewports) */ .history-page__founder .history-page__block-head { max-width: 100%; } .history-page__founder .history-page__block-head .history-page__section-lead { max-width: 100%; font-size: clamp(0.8125rem, 0.6rem + 1vw, var(--text-md)); line-height: 1.5; text-wrap: balance; } .history-page .history-page__founder-quote { display: block; margin: var(--space-3) 0 0; padding: var(--space-3) 0 0; border: none; border-top: 1px solid rgba(12, 35, 64, 0.12); background: none; border-radius: 0; font-family: var(--font-body); font-style: italic; font-weight: 400; color: rgba(15, 23, 42, 0.92); text-align: start; } /* Origins: align with main + aside grid (no orphan whitespace on wide viewports) */ .history-page__prose--origins.section { padding-top: var(--space-4); padding-bottom: var(--space-4); } .history-page__timeline-wrap.section { padding-top: var(--space-4); } .history-page__origins-grid { display: grid; gap: var(--space-5); align-items: start; } @media (min-width: 900px) { /* Prose fills the flexible column so it sits right beside the aside (no empty band) */ .history-page__origins-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); column-gap: var(--space-6); row-gap: var(--space-5); align-items: start; } } .history-page__origins-main { min-width: 0; max-width: none; justify-self: stretch; } .history-page__origins-main .history-page__section-title, .history-page__origins-main .history-page__rich { max-width: none; width: 100%; } .history-page__origins-aside { margin: 0; padding: var(--space-4) var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(165deg, rgba(12, 35, 64, 0.06) 0%, var(--color-surface) 45%, rgba(201, 162, 39, 0.08) 100%); border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: var(--shadow-sm); } @media (min-width: 900px) { .history-page__origins-aside { position: sticky; top: calc(var(--strip-h) + var(--header-h) + 52px); padding: var(--space-5); } } .history-page__origins-aside-label { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); } .history-page__origins-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .history-page__origins-facts li { display: grid; grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid rgba(12, 35, 64, 0.1); } .history-page__origins-facts li:first-child { padding-top: 0; } .history-page__origins-facts li:last-child { border-bottom: 0; padding-bottom: 0; } .history-page__origins-fact-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(12, 35, 64, 0.65); } .history-page__origins-fact-value { font-size: var(--text-base); font-weight: 700; color: var(--color-dark-surface); line-height: 1.4; } .history-page__origins-fact-value--quote { font-weight: 600; font-style: italic; color: var(--color-primary); font-size: var(--text-md); line-height: 1.45; text-align: left; text-align-last: left; text-justify: auto; display: block; } /* Timeline: stacks vertically, then wraps into a responsive grid (no inner scroll) */ .history-page__timeline { list-style: none; margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-2) 0 var(--space-4); } @media (min-width: 640px) { .history-page__timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .history-page__timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; } } .history-page__timeline-item { position: relative; padding: var(--space-4) var(--space-4) var(--space-5); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid rgba(12, 35, 64, 0.1); border-top: 4px solid var(--color-primary); transition: transform var(--transition), box-shadow var(--transition); } @media (min-width: 900px) { .history-page__timeline-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } } .history-page__timeline-year { display: block; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-2); } .history-page__timeline-heading { font-size: var(--text-lg); margin: 0 0 var(--space-2); color: #0f172a; font-family: var(--font-heading); } .history-page__timeline-body p { margin: 0; color: rgba(15, 23, 42, 0.92); } /* Mission + motto */ .history-page__growth-grid { display: grid; gap: var(--space-6); align-items: stretch; } @media (min-width: 900px) { .history-page__growth-grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-8); align-items: start; } } .history-page__growth-copy p { color: rgba(15, 23, 42, 0.92); margin: 0; } .history-page__pullquote { margin: 0; } .history-page__motto-card { margin: 0; height: 100%; min-height: 12rem; display: flex; align-items: center; justify-content: center; padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(12, 35, 64, 0.1) 0%, rgba(12, 35, 64, 0.04) 50%, rgba(184, 134, 11, 0.08) 100%); border: 1px solid rgba(12, 35, 64, 0.14); position: relative; box-shadow: var(--shadow-sm); } .history-page__motto-card::before { content: "“"; font-size: 3.5rem; line-height: 1; color: rgba(12, 35, 64, 0.2); position: absolute; top: var(--space-3); left: var(--space-4); font-family: Georgia, "Times New Roman", serif; } .history-page__motto-card p { margin: 0; padding-top: var(--space-3); font-size: clamp(1.2rem, 3vw, 1.55rem); font-weight: 700; font-style: italic; color: var(--color-primary); line-height: 1.45; text-align: center; font-family: var(--font-heading); } /* Founder portrait + biography */ .history-page__founder-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid rgba(12, 35, 64, 0.1); padding: var(--space-5) var(--space-4); } @media (min-width: 768px) { .history-page__founder-card { padding: var(--space-6) var(--space-6); } } .history-page__founder-split { display: grid; gap: var(--space-6); align-items: start; } @media (min-width: 768px) { .history-page__founder-split { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--space-6) var(--space-8); } } .history-page__founder-figure { margin: 0; text-align: center; } @media (min-width: 768px) { .history-page__founder-figure { text-align: left; } } .history-page__founder-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 3px solid rgba(12, 35, 64, 0.15); background: #f0f2f5; margin-bottom: var(--space-3); transition: transform var(--transition), box-shadow var(--transition); } .history-page__founder-figure:hover .history-page__founder-frame { transform: scale(1.02); box-shadow: 0 20px 50px rgba(12, 35, 64, 0.15); } .history-page__founder-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; } .history-page__founder-caption { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-base); line-height: 1.45; color: rgba(15, 23, 42, 0.85); } .history-page__founder-caption strong { font-size: var(--text-base); color: var(--color-dark-surface); } .history-page__founder-dates { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(12, 35, 64, 0.75); } .history-page__founder-enlarge { align-self: center; margin-top: var(--space-1); } @media (min-width: 768px) { .history-page__founder-enlarge { align-self: flex-start; } } .history-page__founder-main p { color: rgba(15, 23, 42, 0.92); margin: 0 0 var(--space-4); } .history-page__founder-main p:last-child { margin-bottom: 0; } .history-page__cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; } @media (max-width: 767px) { .history-page__cta-actions { justify-content: stretch; width: 100%; } .history-page__cta-actions .btn { flex: 1 1 auto; justify-content: center; } } /* Emblem & Motto inner page (submenu slug=emblem) — editorial layout, not History clone */ .emblem-page [id] { scroll-margin-top: calc(var(--strip-h) + var(--header-h) + 48px); } .emblem-page__hero { position: relative; overflow: hidden; padding-block: var(--space-8); background: linear-gradient(180deg, #f6f3ec 0%, #faf9f7 55%, #fff 100%); } .emblem-page__hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(12, 35, 64, 0.06) 0%, transparent 55%); pointer-events: none; } .emblem-page__hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-6); } .emblem-page__mast { max-width: 42rem; margin-inline: auto; } .emblem-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: var(--color-dark-surface); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .emblem-page__toc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.5rem; margin-top: var(--space-4); font-family: var(--font-ui); font-size: var(--text-base); } .emblem-page__toc-link { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(12, 35, 64, 0.35); text-underline-offset: 0.2em; } .emblem-page__toc-link:hover { text-decoration-color: var(--color-primary); } .emblem-page__toc-sep { color: rgba(12, 35, 64, 0.45); user-select: none; } .emblem-page__toc-link:focus-visible { outline: 3px solid rgba(12, 35, 64, 0.35); outline-offset: 2px; } .emblem-page__hero-figure { margin: 0; } .emblem-page__hero-frame { border-radius: 50%; overflow: hidden; box-shadow: 0 24px 48px rgba(12, 35, 64, 0.12), 0 0 0 1px rgba(12, 35, 64, 0.08); background: #fff; padding: var(--space-4); width: min(280px, 72vw); margin-inline: auto; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .emblem-page__hero-img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: center; } .emblem-page__lede { margin: 0; max-width: 40rem; margin-inline: auto; text-align: center; text-wrap: pretty; } .emblem-page__band { padding-block: var(--space-8); } .emblem-page__band--cream { background: #f3efe6; } .emblem-page__band--navy { background: var(--gradient-page-dark); color: rgba(255, 255, 255, 0.92); } .emblem-page__band--paper { background: #fafafa; } .emblem-page__band--paper > .container > .emblem-page__section-title { text-align: center; } .emblem-page__panel { box-sizing: border-box; width: 100%; max-width: 70ch; margin-inline: auto; padding-inline-start: var(--space-5); border-inline-start: 4px solid var(--color-accent); } .emblem-page__panel--on-dark { border-inline-start: none; padding-inline-start: 0; } .emblem-page__panel > .emblem-page__prose { max-width: none; width: 100%; margin-inline: 0; } .emblem-page__section-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; color: var(--color-dark-surface); margin: 0 0 var(--space-4); line-height: 1.2; letter-spacing: -0.02em; } .emblem-page__section-title--on-dark { color: #fff; } .emblem-page__prose { max-width: 70ch; margin-inline: auto; } .emblem-page__panel .emblem-page__section-title { margin: 0 0 var(--space-4); } .emblem-page__prose p { margin: 0; font-size: var(--text-md); line-height: 1.78; color: rgba(15, 23, 42, 0.92); text-wrap: pretty; } .emblem-page__prose p + p { margin-top: var(--space-4); } .emblem-page__prose--on-dark p { color: rgba(255, 255, 255, 0.9); } .emblem-page__panel--on-dark .emblem-page__prose--on-dark p { text-align: justify; text-align-last: start; hyphens: auto; text-wrap: wrap; text-justify: inter-word; } .emblem-page__ref { font-size: var(--text-base); font-weight: 600; color: rgba(12, 35, 64, 0.75); } .emblem-page__band--navy .emblem-page__ref { color: rgba(255, 255, 255, 0.72); } .emblem-page .emblem-page__hl.emblem-page__hl--on-dark { color: #fff4d6; } .emblem-page__band--navy ::selection { background: rgba(255, 244, 214, 0.45); color: #0c1f35; } .emblem-page__symbols-intro { margin: 0 0 var(--space-5); max-width: 42rem; margin-inline: auto; text-align: center; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.76); } .emblem-page__symbol-steps { list-style: none; margin: 0; padding: 0; max-width: 52rem; margin-inline: auto; counter-reset: emblem-step; } .emblem-page__symbol-step { counter-increment: emblem-step; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding-block: var(--space-4); border-block-end: 1px solid rgba(12, 35, 64, 0.12); } .emblem-page__symbol-step:first-child { padding-top: 0; } .emblem-page__symbol-step:last-child { border-block-end: none; padding-bottom: 0; } .emblem-page__symbol-step::before { content: counter(emblem-step, decimal-leading-zero); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; color: var(--color-accent); line-height: 1; letter-spacing: -0.03em; } .emblem-page__symbol-step--song { margin-top: var(--space-3); padding-top: var(--space-5); } .emblem-page__symbol-step--song::before { color: var(--color-primary); } .emblem-page__symbol-step-body { display: flex; flex-direction: column; gap: var(--space-1); } .emblem-page__symbol-name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); } .emblem-page__symbol-desc { font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.86); } .emblem-page__cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; } @media (max-width: 767px) { .emblem-page__cta-actions { justify-content: stretch; width: 100%; } .emblem-page__cta-actions .btn { flex: 1 1 auto; justify-content: center; } } /* Milestones inner page (submenu slug=milestones) */ .milestones-page [id^="milestone-"] { scroll-margin-top: calc(var(--strip-h) + var(--header-h) + 24px); } .milestones-page__hero { padding-block: var(--space-8); background: var(--gradient-page-hero-wash); } .milestones-page__hero-inner { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 880px) { .milestones-page__hero-inner { grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: var(--space-8); } } .milestones-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: var(--color-dark-surface); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .milestones-page__lead { margin: 0; max-width: 48rem; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; } .milestones-page__hero-figure { margin: 0; justify-self: center; } .milestones-page__hero-frame { border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: var(--shadow-lg); padding: var(--space-4); max-width: 300px; margin-inline: auto; } .milestones-page__hero-img { display: block; width: 100%; height: auto; object-fit: contain; } .milestones-page__timeline-section { padding-block: var(--space-8); } .milestones-page__timeline-head { max-width: 42rem; margin-bottom: var(--space-7); } .milestones-page__timeline-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; color: var(--color-dark-surface); margin: 0 0 var(--space-2); letter-spacing: -0.02em; } .milestones-page__timeline-intro { margin: 0; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.78); } .milestones-page__explorer { position: relative; z-index: 1; margin-inline: auto; max-width: 44rem; } .milestones-page__years-wrap { margin-bottom: var(--space-4); } .milestones-page__years { display: flex; gap: var(--space-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: var(--space-1) var(--space-1) var(--space-2); margin: 0 calc(-1 * var(--space-1)); } .milestones-page__year-btn { flex: 0 0 auto; scroll-snap-align: center; padding: 0.45rem 0.85rem; border-radius: var(--radius-full); border: 1px solid rgba(12, 35, 64, 0.2); background: #fff; color: var(--color-primary); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; line-height: 1.25; white-space: nowrap; cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } .milestones-page__year-btn:hover { border-color: rgba(12, 35, 64, 0.35); box-shadow: var(--shadow-sm); } .milestones-page__year-btn.is-active, .milestones-page__year-btn[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.28); } .milestones-page__year-btn-short { display: none; } .milestones-page__viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .milestones-page__viewer-meta { margin: 0; font-size: var(--text-base); font-weight: 700; color: rgba(15, 23, 42, 0.72); text-align: center; flex: 1; } .milestones-page__nav { flex-shrink: 0; position: relative; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); border: 1px solid rgba(12, 35, 64, 0.22); background: #fff; color: var(--color-primary); cursor: pointer; transition: background var(--transition), border-color var(--transition), opacity var(--transition); } .milestones-page__nav:hover:not(:disabled) { background: var(--color-bg); border-color: rgba(12, 35, 64, 0.35); } .milestones-page__nav:disabled { opacity: 0.38; cursor: not-allowed; } .milestones-page__nav span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .milestones-page__nav--prev::after, .milestones-page__nav--next::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0.55rem; height: 0.55rem; border-color: currentColor; border-style: solid; } .milestones-page__nav--prev::after { border-width: 0 0 2px 2px; transform: rotate(45deg) translate(2px, -2px); } .milestones-page__nav--next::after { border-width: 2px 2px 0 0; transform: rotate(45deg) translate(-2px, 2px); } .milestones-page__panels { position: relative; touch-action: pan-y; user-select: none; } .milestones-page__panel { margin: 0; } .milestones-page__panel[hidden] { display: none !important; } .milestones-page__panel.is-active { animation: milestones-panel-in 0.35s ease; } @keyframes milestones-panel-in { from { opacity: 0; transform: translateX(0.75rem); } to { opacity: 1; transform: translateX(0); } } .milestones-page__swipe-hint { margin: var(--space-3) 0 0; font-size: var(--text-base); line-height: 1.5; color: rgba(15, 23, 42, 0.62); text-align: center; } @media (max-width: 520px) { .milestones-page__year-btn-full { display: none; } .milestones-page__year-btn-short { display: inline; } } @media (prefers-reduced-motion: reduce) { .milestones-page__panel.is-active { animation: none; } } .milestones-page__roadmap-card { min-width: 0; padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .milestones-page__roadmap-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(12, 35, 64, 0.2); } .milestones-page__period-label { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; color: var(--color-primary); letter-spacing: -0.01em; line-height: 1.3; } .milestones-page__items { margin: 0; padding: 0; list-style: none; } .milestones-page__items li { position: relative; margin-bottom: var(--space-2); padding-left: 1.1rem; font-size: var(--text-md); line-height: 1.72; color: rgba(15, 23, 42, 0.9); text-wrap: pretty; } .milestones-page__items li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--color-accent); transform: translateY(-50%); } .milestones-page__items li:last-child { margin-bottom: 0; } @media (min-width: 900px) { .milestones-page__explorer { max-width: 52rem; } .milestones-page__roadmap-card { padding: var(--space-5); } } .milestones-page__cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; } @media (max-width: 767px) { .milestones-page__cta-actions { justify-content: stretch; width: 100%; } .milestones-page__cta-actions .btn { flex: 1 1 auto; justify-content: center; } } /* Infrastructure inner page (submenu slug=infrastructure) */ /* * overflow-x: hidden on html/body breaks position:sticky for the sidebar. * Applied only on Infrastructure via .page-infrastructure-scroll (see submenu.php + header.php). */ html.page-infrastructure-scroll, body.page-infrastructure-scroll, html.page-cocurricular-scroll, body.page-cocurricular-scroll { overflow-x: clip; max-width: 100%; } #main.infrastructure-page, #main.cocurricular-page { overflow-x: visible; } .infrastructure-page [id^="infra-"] { scroll-margin-top: calc(var(--strip-h) + var(--header-h) + 20px); } @media (max-width: 639px) { .infrastructure-page [id^="infra-"] { scroll-margin-bottom: 7rem; } .infrastructure-page__main { padding-bottom: 5.5rem; } } .infrastructure-page__hero { padding-block: var(--space-8); background: var(--gradient-page-hero-wash); } .infrastructure-page__hero-inner { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 880px) { .infrastructure-page__hero-inner { grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: var(--space-8); } } .infrastructure-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: var(--color-dark-surface); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .infrastructure-page__lead { margin: 0; max-width: 48rem; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; } .infrastructure-page__hero-figure { margin: 0; justify-self: center; width: 100%; max-width: 520px; } .infrastructure-page__hero-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: var(--shadow-lg); background: #fff; } .infrastructure-page__hero-img { display: block; width: 100%; height: auto; max-height: min(380px, 52vw); object-fit: cover; object-position: center; } .infrastructure-page__hero-frame--emblem { display: flex; align-items: center; justify-content: center; padding: var(--space-4); min-height: min(360px, 48vh); } .infrastructure-page__hero-img--contain { display: block; width: auto; max-width: 100%; max-height: min(320px, 44vh); height: auto; margin-inline: auto; object-fit: contain; object-position: center; } .infrastructure-page__layout { padding-block: var(--space-6) var(--space-3); background: linear-gradient(180deg, #e8ecf2 0%, #eef1f6 48%, #f3f5f9 100%); border-top: 1px solid rgba(12, 35, 64, 0.07); } .infrastructure-page__layout-grid { display: block; } /* Two columns from 640px so tablet/narrow laptop keeps the nav beside long content */ @media (min-width: 640px) { .infrastructure-page__layout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 13.75rem; gap: var(--space-3); align-items: stretch; } } @media (min-width: 768px) { .infrastructure-page__layout-grid { grid-template-columns: minmax(0, 1fr) 15.25rem; gap: var(--space-4); } } @media (min-width: 1024px) { .infrastructure-page__layout-grid { grid-template-columns: minmax(0, 1fr) 18.25rem; gap: var(--space-6); } } @media (min-width: 1200px) { .infrastructure-page__layout-grid { grid-template-columns: minmax(0, 1fr) 20.5rem; gap: 2.75rem; } } .infrastructure-page__main { min-width: 0; } .infrastructure-page__sidebar { display: none; margin: 0; } @media (min-width: 640px) { .infrastructure-page__sidebar { display: flex; flex-direction: column; min-width: 0; align-self: stretch; } } .infrastructure-page__sidebar-sticky { position: sticky; top: calc(var(--strip-h) + var(--header-h) + 12px); z-index: 80; align-self: flex-start; width: 100%; box-sizing: border-box; padding: var(--space-5) var(--space-4) var(--space-3); border-radius: var(--radius-lg); border: 1px solid rgba(12, 35, 64, 0.1); background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 12px 40px rgba(12, 35, 64, 0.08); max-height: calc(100vh - var(--strip-h) - var(--header-h) - 20px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(12, 35, 64, 0.35) rgba(12, 35, 64, 0.06); } .infrastructure-page__sidebar-eyebrow { margin: 0 0 0.15rem; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #9a7209; } .infrastructure-page__sidebar-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; color: var(--color-dark-surface); letter-spacing: -0.02em; } .infrastructure-page__sidebar-hint { margin: 0 0 var(--space-3); font-size: var(--text-xs); line-height: 1.4; color: rgba(15, 23, 42, 0.55); } .infrastructure-page__dock { display: none; } @media (max-width: 639px) { .infrastructure-page__dock { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 120; padding: 0.35rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); border-top: 1px solid rgba(12, 35, 64, 0.12); box-shadow: 0 -8px 32px rgba(12, 35, 64, 0.08); } } .infrastructure-page__dock-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-3) 0.3rem; max-width: var(--container-max); margin-inline: auto; box-sizing: border-box; } .infrastructure-page__dock-label { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); } .infrastructure-page__dock-hint { font-size: var(--text-xs); color: rgba(15, 23, 42, 0.45); } .infrastructure-page__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .infrastructure-page__chips-item { margin: 0; } .infrastructure-page__chips--sidebar { flex-direction: column; flex-wrap: nowrap; gap: 0.28rem; } .infrastructure-page__chips--sidebar .infrastructure-page__chips-item { width: 100%; } .infrastructure-page__chips--dock { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 0.45rem; padding: 0 var(--space-3); max-width: var(--container-max); margin-inline: auto; box-sizing: border-box; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .infrastructure-page__chips--dock::-webkit-scrollbar { display: none; } .infrastructure-page__chips--dock .infrastructure-page__chips-item { flex: 0 0 auto; } .infrastructure-page__chip { display: flex; align-items: center; gap: 0.65rem; width: 100%; min-height: 3.25rem; padding: 0.5rem 0.75rem 0.5rem 0.5rem; text-decoration: none; color: var(--color-dark-surface); background: #f1f5f9; border: 1px solid rgba(12, 35, 64, 0.12); border-radius: var(--radius-md); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset; transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } .infrastructure-page__chip:hover { background: #fff; border-color: rgba(12, 35, 64, 0.28); box-shadow: var(--shadow-sm); } .infrastructure-page__chip:focus-visible { outline: 3px solid rgba(12, 35, 64, 0.35); outline-offset: 2px; } .infrastructure-page__chip.is-active { background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-dark) 100%); border-color: #0c2840; color: #fff; box-shadow: 0 4px 14px rgba(12, 35, 64, 0.28); } .infrastructure-page__chip.is-active .infrastructure-page__chip-icon { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); color: #fff; } .infrastructure-page__chip.is-active:hover { background: linear-gradient(145deg, var(--color-primary-hover) 0%, var(--color-primary) 100%); color: #fff; } .infrastructure-page__chip-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); background: #fff; border: 1px solid rgba(12, 35, 64, 0.1); color: var(--color-primary); transition: background var(--transition), border-color var(--transition), color var(--transition); } .infrastructure-page__chip-icon-svg { display: block; } .infrastructure-page__chip-label { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; text-align: left; text-wrap: balance; } .infrastructure-page__chip--sidebar { min-height: 2.5rem; padding: 0.38rem 0.5rem 0.38rem 0.42rem; } .infrastructure-page__chip--sidebar .infrastructure-page__chip-icon { width: 2rem; height: 2rem; } .infrastructure-page__chip--sidebar .infrastructure-page__chip-icon-svg { width: 17px; height: 17px; } .infrastructure-page__chip--sidebar .infrastructure-page__chip-label { font-size: var(--text-xs); line-height: 1.28; } .infrastructure-page__chip--dock { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 0.35rem; min-height: auto; min-width: 4.85rem; max-width: 5.65rem; padding: 0.45rem 0.35rem; } .infrastructure-page__chip--dock .infrastructure-page__chip-icon { width: 2rem; height: 2rem; } .infrastructure-page__chip--dock .infrastructure-page__chip-icon-svg { width: 17px; height: 17px; } .infrastructure-page__chip--dock .infrastructure-page__chip-label { font-size: var(--text-xs); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-align: center; } .infrastructure-page__block { padding-block: var(--space-5); } .infrastructure-page__main > .infrastructure-page__block:first-child { padding-top: 0; } .infrastructure-page__block--band { background: transparent; } .infrastructure-page__block--band .infrastructure-page__panel { background: #fafbfd; border-color: rgba(12, 35, 64, 0.09); } .infrastructure-page__panel { max-width: none; width: 100%; margin-inline: 0; padding: var(--space-5); background: #fff; border: 1px solid rgba(12, 35, 64, 0.09); border-radius: var(--radius-lg); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 36px rgba(12, 35, 64, 0.07); } @media (min-width: 640px) { .infrastructure-page__panel { padding: var(--space-6); } } .infrastructure-page__block-body { max-width: 72ch; } .infrastructure-page__block-head { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid rgba(12, 35, 64, 0.08); } .infrastructure-page__block-heading { display: flex; align-items: flex-start; gap: var(--space-4); } .infrastructure-page__block-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 3.35rem; height: 3.35rem; border-radius: var(--radius-md); background: linear-gradient(155deg, rgba(12, 35, 64, 0.1) 0%, rgba(12, 35, 64, 0.04) 100%); border: 1px solid rgba(12, 35, 64, 0.14); color: var(--color-primary); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset; } .infrastructure-page__block-icon .infrastructure-page__chip-icon-svg { width: 26px; height: 26px; } .infrastructure-page__block-heading-text { min-width: 0; } .infrastructure-page__block-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; color: var(--color-dark-surface); margin: 0; letter-spacing: -0.02em; line-height: 1.22; padding-bottom: 0; border-bottom: none; } .infrastructure-page__block-body > *:first-child { margin-top: 0; } .infrastructure-page__prose { margin: 0 0 var(--space-4); font-size: var(--text-md); line-height: 1.78; color: rgba(15, 23, 42, 0.9); text-wrap: pretty; } .infrastructure-page__subhead { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); margin: var(--space-5) 0 var(--space-3); } .infrastructure-page__block-body .infrastructure-page__subhead:first-child { margin-top: 0; } .infrastructure-page__list { margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-4) var(--space-4) 1.75rem; list-style: disc; background: var(--color-surface); border-radius: var(--radius-md); border: 1px solid rgba(12, 35, 64, 0.08); } .infrastructure-page__list li { margin-bottom: var(--space-2); font-size: var(--text-md); line-height: 1.7; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; } .infrastructure-page__list li:last-child { margin-bottom: 0; } .infrastructure-page__cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; } @media (max-width: 767px) { .infrastructure-page__cta-actions { justify-content: stretch; width: 100%; } .infrastructure-page__cta-actions .btn { flex: 1 1 auto; justify-content: center; } } /* Secretary's & Principal's Desk — shared layout (secretary-desk, principal-desk) */ .secretary-desk-page__hero, .principal-desk-page__hero { padding-block: var(--space-8); background: var(--gradient-page-hero-wash); } .secretary-desk-page__hero-inner, .principal-desk-page__hero-inner { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 880px) { .secretary-desk-page__hero-inner, .principal-desk-page__hero-inner { grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: var(--space-8); } } .secretary-desk-page__title, .principal-desk-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: #2f2452; margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .secretary-desk-page__lead, .principal-desk-page__lead { margin: 0; max-width: 40rem; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; } .secretary-desk-page__hero-figure, .principal-desk-page__hero-figure { margin: 0; justify-self: center; width: 100%; max-width: 420px; } .secretary-desk-page__hero-frame, .principal-desk-page__hero-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(58, 42, 100, 0.12); box-shadow: var(--shadow-lg); background: #fff; } .secretary-desk-page__hero-img, .principal-desk-page__hero-img { display: block; width: 100%; height: auto; max-height: min(360px, 50vw); object-fit: cover; object-position: center; } .secretary-desk-page__hero-frame--emblem, .principal-desk-page__hero-frame--emblem { display: flex; align-items: center; justify-content: center; padding: var(--space-4); min-height: min(360px, 48vh); } .secretary-desk-page__hero-img--contain, .principal-desk-page__hero-img--contain { display: block; width: auto; max-width: 100%; max-height: min(320px, 44vh); height: auto; margin-inline: auto; object-fit: contain; object-position: center; } .secretary-desk-page__message, .principal-desk-page__message { padding-block: var(--space-10); background: radial-gradient(120% 80% at 10% 0%, rgba(91, 74, 138, 0.08) 0%, transparent 55%), linear-gradient(180deg, #f4f1fa 0%, #ffffff 42%, #faf9fc 100%); border-block: 1px solid rgba(58, 42, 100, 0.07); } .secretary-desk-page__message-inner, .principal-desk-page__message-inner { max-width: 72rem; } .secretary-desk-page__message-heading, .principal-desk-page__message-heading { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; color: #2f2452; text-align: center; } .secretary-desk-page__message-sub, .principal-desk-page__message-sub { margin: 0 auto var(--space-7); max-width: 36rem; text-align: center; font-size: var(--text-md); line-height: 1.55; color: rgba(15, 23, 42, 0.72); text-wrap: pretty; } .secretary-desk-page__letter, .principal-desk-page__letter { display: grid; gap: var(--space-7); align-items: start; } @media (min-width: 900px) { .secretary-desk-page__letter, .principal-desk-page__letter { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--space-8); align-items: stretch; } } .secretary-desk-page__portrait, .principal-desk-page__portrait { margin: 0; justify-self: center; width: 100%; max-width: 300px; } @media (min-width: 900px) { .secretary-desk-page__portrait, .principal-desk-page__portrait { justify-self: stretch; max-width: none; } } .secretary-desk-page__portrait-frame, .principal-desk-page__portrait-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(58, 42, 100, 0.14); box-shadow: 0 4px 6px rgba(47, 36, 82, 0.04), 0 22px 48px rgba(47, 36, 82, 0.14); background: linear-gradient(160deg, #ebe6f4 0%, #ffffff 45%, #f7f5fb 100%); aspect-ratio: 4 / 5; max-height: 420px; } @media (min-width: 900px) { .secretary-desk-page__portrait-frame, .principal-desk-page__portrait-frame { max-height: min(440px, 52vh); } } .secretary-desk-page__portrait-img, .principal-desk-page__portrait-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; } .secretary-desk-page__portrait-zoom, .principal-desk-page__portrait-zoom { position: absolute; right: var(--space-2); bottom: var(--space-2); z-index: 1; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.94); color: #3a2a64; box-shadow: 0 2px 10px rgba(47, 36, 82, 0.18); cursor: pointer; transition: background var(--transition), color var(--transition), transform var(--transition); } .secretary-desk-page__portrait-zoom:hover, .principal-desk-page__portrait-zoom:hover { background: #fff; color: #2f2452; transform: scale(1.04); } .secretary-desk-page__portrait-zoom:focus-visible, .principal-desk-page__portrait-zoom:focus-visible { outline: 2px solid #5b4a8a; outline-offset: 2px; } .secretary-desk-page__portrait-zoom-icon, .principal-desk-page__portrait-zoom-icon { display: block; flex-shrink: 0; } .secretary-desk-page__portrait-caption, .principal-desk-page__portrait-caption { display: flex; flex-direction: column; gap: 0.2rem; margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); text-align: center; background: linear-gradient(180deg, #4b3d86 0%, #3a2a64 100%); border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(47, 36, 82, 0.15); } .secretary-desk-page__portrait-caption-name, .principal-desk-page__portrait-caption-name { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; line-height: 1.35; } .secretary-desk-page__portrait-caption-role, .principal-desk-page__portrait-caption-role { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.92); line-height: 1.35; } .secretary-desk-page__paper, .principal-desk-page__paper { position: relative; max-width: none; margin-inline: 0; padding: var(--space-8) var(--space-6) var(--space-7); padding-left: var(--space-7); background: #fff; border: 1px solid rgba(58, 42, 100, 0.1); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(47, 36, 82, 0.04), 0 16px 48px rgba(47, 36, 82, 0.08); } .secretary-desk-page__paper::before, .principal-desk-page__paper::before { content: "\201C"; position: absolute; left: var(--space-5); top: var(--space-5); font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 6vw, 4.25rem); line-height: 1; color: rgba(91, 74, 138, 0.11); pointer-events: none; } .secretary-desk-page__paper::after, .principal-desk-page__paper::after { content: ""; position: absolute; left: 0; top: var(--space-5); bottom: var(--space-5); width: 4px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #5b4a8a 0%, #3a2a64 100%); pointer-events: none; } @media (min-width: 640px) { .secretary-desk-page__paper, .principal-desk-page__paper { padding: var(--space-8) var(--space-7); padding-left: calc(var(--space-8) + 0.35rem); } .secretary-desk-page__paper::before, .principal-desk-page__paper::before { left: var(--space-6); top: var(--space-6); } .secretary-desk-page__paper::after, .principal-desk-page__paper::after { top: var(--space-6); bottom: var(--space-6); } } .secretary-desk-page__prose, .principal-desk-page__prose { margin: 0 0 var(--space-4); font-size: var(--text-md); line-height: 1.82; color: rgba(15, 23, 42, 0.92); text-align: justify; text-wrap: pretty; } .secretary-desk-page__paper > .secretary-desk-page__prose:last-of-type { margin-bottom: var(--space-6); } .principal-desk-page__best-wishes { margin: var(--space-6) 0 var(--space-5); font-size: var(--text-lg); font-style: italic; font-weight: 500; line-height: 1.6; color: rgba(58, 42, 100, 0.88); text-align: center; text-wrap: pretty; } .principal-desk-page__portrait-img { object-position: center 12%; } /* Governing Body (submenu slug=governing-body) */ .governing-body-page__hero { padding-block: var(--space-8); background: var(--gradient-page-hero-wash); } .governing-body-page__hero-inner { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 880px) { .governing-body-page__hero-inner { grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: var(--space-8); } } .governing-body-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: #2f2452; margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .governing-body-page__lead { margin: 0; max-width: 40rem; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; } .governing-body-page__hero-figure { margin: 0; justify-self: center; width: 100%; max-width: 420px; } .governing-body-page__hero-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(58, 42, 100, 0.12); box-shadow: var(--shadow-lg); background: #fff; } .governing-body-page__hero-img { display: block; width: 100%; height: auto; max-height: min(360px, 50vw); object-fit: cover; object-position: center; } .governing-body-page__hero-frame--emblem { display: flex; align-items: center; justify-content: center; padding: var(--space-4); min-height: min(360px, 48vh); } .governing-body-page__hero-img--contain { display: block; width: auto; max-width: 100%; max-height: min(320px, 44vh); height: auto; margin-inline: auto; object-fit: contain; object-position: center; } .governing-body-page__board { padding-block: var(--space-10); background: linear-gradient(180deg, #ffffff 0%, #f7f5fb 52%, #eeebf4 100%); border-block: 1px solid rgba(58, 42, 100, 0.07); } .governing-body-page__board-inner { max-width: 72rem; } .governing-body-page__board-head { margin: 0 auto var(--space-8); max-width: 44rem; text-align: center; } .governing-body-page__board-title { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; color: #2f2452; } .governing-body-page__board-title::after, .governing-body-page__members-title::after { content: ""; display: block; width: 64px; height: 3px; margin: var(--space-3) auto 0; border-radius: var(--radius-full); background: linear-gradient(90deg, #3a2a64, var(--color-accent)); } .governing-body-page__board-lead { margin: 0; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.76); text-wrap: pretty; } .governing-body-page__grid { display: grid; gap: var(--space-5); margin-bottom: var(--space-8); } .governing-body-page__grid--3 { grid-template-columns: 1fr; } @media (min-width: 640px) { .governing-body-page__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .governing-body-page__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .governing-body-page__grid--single { justify-items: center; margin-bottom: var(--space-10); } .governing-body-page__grid--single .governing-body-page__card { width: 100%; max-width: 18rem; } .governing-body-page__members-head { margin: var(--space-10) auto var(--space-7); max-width: 40rem; text-align: center; } .governing-body-page__members-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; color: #2f2452; } .governing-body-page__members-lead { margin: 0; font-size: var(--text-md); line-height: 1.6; color: rgba(15, 23, 42, 0.74); text-wrap: pretty; } .governing-body-page__card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(58, 42, 100, 0.1); box-shadow: 0 10px 30px rgba(47, 36, 82, 0.08); transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); } .governing-body-page__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #3a2a64 0%, #7a5cc4 55%, var(--color-accent) 100%); z-index: 2; } @media (prefers-reduced-motion: no-preference) { .governing-body-page__card:hover { box-shadow: 0 20px 46px rgba(47, 36, 82, 0.16); transform: translateY(-4px); border-color: rgba(58, 42, 100, 0.18); } .governing-body-page__card:hover .governing-body-page__card-img { transform: scale(1.03); } } @media (prefers-reduced-motion: reduce) { .governing-body-page__card:hover { transform: none; } .governing-body-page__card:hover .governing-body-page__card-img { transform: none; } } .governing-body-page__card-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(160deg, #ebe6f4 0%, #f4f1fa 100%); } .governing-body-page__card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(47, 36, 82, 0) 62%, rgba(47, 36, 82, 0.16) 100%); pointer-events: none; } .governing-body-page__card-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; image-rendering: auto; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .governing-body-page__card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5) var(--space-5); } .governing-body-page__card-name { margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: #2f2452; } .governing-body-page__card-role { margin: 0.15rem 0 0; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); } .governing-body-page__card-detail { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid rgba(58, 42, 100, 0.1); font-size: var(--text-sm); line-height: 1.55; color: rgba(15, 23, 42, 0.7); text-wrap: pretty; } .secretary-desk-page__signoff, .principal-desk-page__signoff { margin: 0; padding-top: var(--space-5); border-top: 1px solid rgba(58, 42, 100, 0.12); } .secretary-desk-page__signoff-name, .principal-desk-page__signoff-name { margin: 0 0 var(--space-1); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: #3a2a64; } .secretary-desk-page__signoff-role, .principal-desk-page__signoff-role, .secretary-desk-page__signoff-inst, .principal-desk-page__signoff-inst { margin: 0; font-size: var(--text-base); line-height: 1.55; color: rgba(15, 23, 42, 0.75); } .secretary-desk-page__cta-actions, .principal-desk-page__cta-actions, .governing-body-page__cta-actions, .prospectus-page__cta-actions, .admission-procedure-page__cta-actions, .programmes-offered-page__cta-actions, .departments-page__cta-actions, .library-page__cta-actions, .teaching-faculty-page__cta-actions, .non-teaching-staff-page__cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; } @media (max-width: 767px) { .secretary-desk-page__cta-actions, .principal-desk-page__cta-actions, .governing-body-page__cta-actions, .prospectus-page__cta-actions, .admission-procedure-page__cta-actions, .programmes-offered-page__cta-actions, .departments-page__cta-actions, .library-page__cta-actions, .teaching-faculty-page__cta-actions, .non-teaching-staff-page__cta-actions { justify-content: stretch; width: 100%; } .secretary-desk-page__cta-actions .btn, .principal-desk-page__cta-actions .btn, .governing-body-page__cta-actions .btn, .prospectus-page__cta-actions .btn, .admission-procedure-page__cta-actions .btn, .programmes-offered-page__cta-actions .btn, .departments-page__cta-actions .btn, .library-page__cta-actions .btn, .teaching-faculty-page__cta-actions .btn, .non-teaching-staff-page__cta-actions .btn { flex: 1 1 auto; justify-content: center; } } /* Prospectus (submenu slug=prospectus) */ .prospectus-page__hero { padding-block: var(--space-8); background: linear-gradient(165deg, #fff8ef 0%, #fffdf9 50%, #fff 100%); } .prospectus-page__hero-inner { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 880px) { .prospectus-page__hero-inner { grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: var(--space-8); } } .prospectus-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: #5c3409; margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .prospectus-page__lead { margin: 0; max-width: 40rem; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; } .prospectus-page__hero-figure { margin: 0; justify-self: center; width: 100%; max-width: 420px; } .prospectus-page__hero-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(122, 62, 0, 0.15); box-shadow: var(--shadow-lg); background: #fff; } .prospectus-page__hero-img { display: block; width: 100%; height: auto; max-height: min(360px, 50vw); object-fit: cover; object-position: center; } .prospectus-page__hero-frame--emblem { display: flex; align-items: center; justify-content: center; padding: var(--space-4); min-height: min(360px, 48vh); } .prospectus-page__hero-img--contain { display: block; width: auto; max-width: 100%; max-height: min(320px, 44vh); height: auto; margin-inline: auto; object-fit: contain; object-position: center; } .prospectus-page__document { padding-block: var(--space-10); background: linear-gradient(180deg, #fff 0%, #faf6ef 45%, #f3ece0 100%); border-block: 1px solid rgba(122, 62, 0, 0.1); } .prospectus-page__document-inner { display: grid; gap: var(--space-6); max-width: 72rem; margin-inline: auto; } @media (min-width: 960px) { .prospectus-page__document-inner { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: var(--space-8); align-items: start; } } .prospectus-page__aside { position: relative; } @media (min-width: 960px) { .prospectus-page__nav { position: sticky; top: calc(var(--header-h) + var(--space-3)); padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(122, 62, 0, 0.14); box-shadow: 0 8px 28px rgba(92, 52, 9, 0.06); } } @media (max-width: 959px) { .prospectus-page__nav { padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(122, 62, 0, 0.14); } } .prospectus-page__nav-label { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(92, 52, 9, 0.75); } .prospectus-page__nav-list { margin: 0; padding: 0; list-style: none; } .prospectus-page__nav-list li + li { margin-top: var(--space-1); } .prospectus-page__nav-link { display: block; padding: var(--space-2) var(--space-2); font-size: var(--text-base); font-weight: 600; color: #7a3e00; text-decoration: none; border-radius: var(--radius-sm); transition: background var(--transition), color var(--transition); } .prospectus-page__nav-link:hover { background: rgba(200, 111, 18, 0.1); color: #5c3409; } .prospectus-page__doc-head { margin-bottom: var(--space-6); max-width: 48rem; } .prospectus-page__doc-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; color: #5c3409; } .prospectus-page__doc-intro { margin: 0; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.82); text-wrap: pretty; } .prospectus-page__spreads { display: flex; flex-direction: column; gap: var(--space-7); } .prospectus-page__spread { margin: 0; } .prospectus-page__spread-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(122, 62, 0, 0.14); background: #fff; box-shadow: 0 12px 40px rgba(92, 52, 9, 0.1); } .prospectus-page__spread-img { display: block; width: 100%; height: auto; } .prospectus-page__spread-zoom { position: absolute; right: var(--space-2); bottom: var(--space-2); z-index: 1; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.94); color: #7a3e00; box-shadow: 0 2px 10px rgba(92, 52, 9, 0.2); cursor: pointer; transition: background var(--transition), color var(--transition), transform var(--transition); } .prospectus-page__spread-zoom:hover { background: #fff; color: #5c3409; transform: scale(1.04); } .prospectus-page__spread-zoom:focus-visible { outline: 2px solid #c86f12; outline-offset: 2px; } .prospectus-page__spread-zoom-icon { display: block; flex-shrink: 0; } .prospectus-page__spread-cap { margin: var(--space-3) 0 0; font-size: var(--text-base); font-weight: 600; color: rgba(92, 52, 9, 0.85); text-align: center; } /* Admission procedure (submenu slug=admission-procedure) */ .admission-procedure-page__hero { padding-block: var(--space-8); background: linear-gradient(165deg, #fff8ef 0%, #fffdf9 50%, #fff 100%); } .admission-procedure-page__hero-inner { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 880px) { .admission-procedure-page__hero-inner { grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: var(--space-8); } } .admission-procedure-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: #5c3409; margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .admission-procedure-page__lead { margin: 0; max-width: 40rem; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; } .admission-procedure-page__hero-figure { margin: 0; justify-self: center; width: 100%; max-width: 420px; } .admission-procedure-page__hero-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(122, 62, 0, 0.15); box-shadow: var(--shadow-lg); background: #fff; } .admission-procedure-page__hero-img { display: block; width: 100%; height: auto; max-height: min(360px, 50vw); object-fit: cover; object-position: center; } .admission-procedure-page__hero-frame--emblem { display: flex; align-items: center; justify-content: center; padding: var(--space-4); min-height: min(360px, 48vh); } .admission-procedure-page__hero-img--contain { display: block; width: auto; max-width: 100%; max-height: min(320px, 44vh); height: auto; margin-inline: auto; object-fit: contain; object-position: center; } .admission-procedure-page__content { padding-block: var(--space-10); background: linear-gradient(180deg, #fff 0%, #faf6ef 50%, #f3ece0 100%); border-block: 1px solid rgba(122, 62, 0, 0.1); } .admission-procedure-page__content-inner { display: grid; gap: var(--space-6); max-width: 72rem; margin-inline: auto; } @media (min-width: 960px) { .admission-procedure-page__content-inner { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: var(--space-8); align-items: start; } } @media (min-width: 960px) { .admission-procedure-page__nav { position: sticky; top: calc(var(--header-h) + var(--space-3)); padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(122, 62, 0, 0.14); box-shadow: 0 8px 28px rgba(92, 52, 9, 0.06); } } @media (max-width: 959px) { .admission-procedure-page__nav { padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(122, 62, 0, 0.14); } } .admission-procedure-page__nav-label { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(92, 52, 9, 0.75); } .admission-procedure-page__nav-list { margin: 0; padding: 0; list-style: none; } .admission-procedure-page__nav-list li + li { margin-top: var(--space-1); } .admission-procedure-page__nav-link { display: block; padding: var(--space-2) var(--space-2); font-size: var(--text-base); font-weight: 600; color: #7a3e00; text-decoration: none; border-radius: var(--radius-sm); transition: background var(--transition), color var(--transition); } .admission-procedure-page__nav-link:hover { background: rgba(200, 111, 18, 0.1); color: #5c3409; } .admission-procedure-page__doc-title { margin: 0 0 var(--space-5); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; color: #5c3409; } .admission-procedure-page__prose { margin: 0 0 var(--space-6); max-width: 48rem; font-size: var(--text-md); line-height: 1.75; color: rgba(15, 23, 42, 0.9); text-align: justify; text-wrap: pretty; } .admission-procedure-page__mail-card { margin: 0 0 var(--space-8); max-width: 28rem; padding: var(--space-5) var(--space-5); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(122, 62, 0, 0.14); box-shadow: 0 8px 28px rgba(92, 52, 9, 0.07); border-left: 4px solid #c86f12; } .admission-procedure-page__mail-label { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(92, 52, 9, 0.75); } .admission-procedure-page__address { margin: 0; font-style: normal; font-size: var(--text-md); line-height: 1.65; font-weight: 600; color: #3d2206; } .admission-procedure-page__address-line { display: block; } .admission-procedure-page__docs-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: #5c3409; } .admission-procedure-page__docs-intro { margin: 0 0 var(--space-4); max-width: 48rem; font-size: var(--text-base); line-height: 1.6; color: rgba(15, 23, 42, 0.78); text-wrap: pretty; } .admission-procedure-page__checklist { margin: 0; padding: 0; list-style: none; max-width: 48rem; } .admission-procedure-page__checklist-item { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; padding: var(--space-2) 0 var(--space-3); font-size: var(--text-md); line-height: 1.55; color: rgba(15, 23, 42, 0.9); border-bottom: 1px solid rgba(122, 62, 0, 0.1); } .admission-procedure-page__checklist-item:last-child { border-bottom: 0; } .admission-procedure-page__checklist-item::before { content: ""; flex: 0 0 auto; width: 0.55rem; height: 0.55rem; margin-top: 0.42em; border-radius: var(--radius-full); background: linear-gradient(145deg, #c86f12 0%, #7a3e00 100%); box-shadow: 0 0 0 3px rgba(200, 111, 18, 0.2); } /* Programmes offered (submenu slug=programmes-offered) */ .programmes-offered-page__hero-section { position: relative; overflow: hidden; padding-block: var(--space-8); } .programmes-offered-page__hero-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 120% 80% at 100% 0%, rgba(12, 35, 64, 0.1) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 0% 100%, rgba(184, 134, 11, 0.06) 0%, transparent 50%); pointer-events: none; } .programmes-offered-page__hero-inner { position: relative; z-index: 1; display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 900px) { .programmes-offered-page__hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-8); } } .programmes-offered-page__hero-copy { min-width: 0; max-width: 62ch; } .programmes-offered-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: var(--color-primary-mid); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .programmes-offered-page__lead { margin: 0 0 var(--space-4); max-width: 40rem; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; font-size: clamp(1.0625rem, 0.9rem + 0.35vw, 1.25rem); line-height: 1.65; } .programmes-offered-page__quick { margin-top: var(--space-2); } .programmes-offered-page__quick-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } @media (min-width: 640px) { .programmes-offered-page__quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .programmes-offered-page__quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .programmes-offered-page__quick-link { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: var(--space-2) var(--space-3); font-size: var(--text-base); font-weight: 600; line-height: 1.35; text-align: center; color: var(--color-primary-mid); text-decoration: none; border-radius: var(--radius-md); border: 1px solid rgba(12, 35, 64, 0.14); background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition); } .programmes-offered-page__quick-link:hover { transform: translateY(-2px); background: rgba(12, 35, 64, 0.04); border-color: rgba(12, 35, 64, 0.28); box-shadow: var(--shadow-md); color: var(--color-primary-hover); } .programmes-offered-page__hero-figure { margin: 0; width: 100%; } .programmes-offered-page__hero-frame { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.65); box-shadow: var(--shadow-lg); background: linear-gradient(160deg, rgba(12, 35, 64, 0.1), rgba(255, 255, 255, 0.45)); padding: var(--space-2); } .programmes-offered-page__hero-frame--emblem { padding: var(--space-4); background: #fff; min-height: min(360px, 48vh); } .programmes-offered-page__hero-img { display: block; width: 100%; height: auto; max-height: min(420px, 52vh); object-fit: cover; object-position: center; border-radius: calc(var(--radius-lg) - 6px); } .programmes-offered-page__hero-img--contain { display: block; width: auto; max-width: 100%; max-height: min(320px, 44vh); height: auto; margin-inline: auto; object-fit: contain; object-position: center; } .programmes-offered-page__hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 280px; width: 100%; padding: var(--space-6) var(--space-4); border-radius: calc(var(--radius-lg) - 6px); background: linear-gradient(145deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.88) 55%, rgba(184, 134, 11, 0.35) 100%); text-align: center; } .programmes-offered-page__hero-placeholder-mark { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 800; letter-spacing: 0.08em; color: #fff; } .programmes-offered-page__hero-placeholder-text { max-width: 24ch; font-size: var(--text-base); font-weight: 600; line-height: 1.5; color: rgba(255, 255, 255, 0.9); } @media (max-width: 899px) { .programmes-offered-page__hero-inner { gap: var(--space-4); } .programmes-offered-page__hero-img { max-height: 360px; } } .programmes-offered-page__catalog { padding-block: var(--space-10); background: linear-gradient(180deg, #fff 0%, #f3f7fb 55%, #e8f0f8 100%); border-block: 1px solid rgba(12, 35, 64, 0.08); } .programmes-offered-page__catalog-inner { max-width: 72rem; margin-inline: auto; } .programmes-offered-page__intro { margin: 0 0 var(--space-8); max-width: 48rem; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.86); text-wrap: pretty; } .programmes-offered-page__tier { margin-bottom: var(--space-8); } .programmes-offered-page__tier:last-of-type { margin-bottom: 0; } .programmes-offered-page__tier-title { margin: 0 0 var(--space-4); padding-bottom: var(--space-2); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; color: var(--color-primary-mid); letter-spacing: -0.02em; border-bottom: 2px solid rgba(12, 35, 64, 0.18); } .programmes-offered-page__grid { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; } @media (min-width: 520px) { .programmes-offered-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .programmes-offered-page__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .programmes-offered-page__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .programmes-offered-page__cell { margin: 0; min-width: 0; } .programmes-offered-page__card { position: relative; display: flex; width: 100%; min-height: 11.5rem; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; background-color: var(--color-primary-mid); border: 1px solid rgba(12, 35, 64, 0.16); box-shadow: 0 6px 22px rgba(12, 35, 64, 0.08); transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); } .programmes-offered-page__card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } .programmes-offered-page__card--fallback { background-image: linear-gradient(145deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.88) 55%, rgba(184, 134, 11, 0.35) 100%); } .programmes-offered-page__card-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12, 35, 64, 0.12) 0%, rgba(12, 35, 64, 0.62) 100%); } .programmes-offered-page__card-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 100%; padding: var(--space-4); box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { .programmes-offered-page__card:hover { border-color: rgba(12, 35, 64, 0.28); box-shadow: 0 12px 32px rgba(12, 35, 64, 0.14); transform: translateY(-2px); } .programmes-offered-page__card:hover .programmes-offered-page__card-link-icon { transform: translateY(-2px); background: #fff; } } @media (prefers-reduced-motion: reduce) { .programmes-offered-page__card:hover { transform: none; } } .programmes-offered-page__card:focus-visible { outline: 3px solid rgba(184, 134, 11, 0.85); outline-offset: 3px; } .programmes-offered-page__card-title { margin: 0; max-width: 18ch; font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; line-height: 1.35; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.35); } .programmes-offered-page__card-link-icon { align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--color-primary-mid); box-shadow: 0 4px 14px rgba(12, 35, 64, 0.18); transition: transform var(--transition), background var(--transition); } .programmes-offered-page__card-link-icon-svg { display: block; width: 1.15rem; height: 1.15rem; } .programmes-offered-page__downloads { padding-block: var(--space-8); } .programmes-offered-page__downloads-inner { max-width: 72rem; margin-inline: auto; } .programmes-offered-page__downloads-head { max-width: 42rem; margin: 0 auto var(--space-7); text-align: center; } .programmes-offered-page__downloads-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; color: var(--color-primary-mid); letter-spacing: -0.02em; } .programmes-offered-page__downloads-intro { margin: 0; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.78); text-wrap: pretty; } .programmes-offered-page__downloads-groups { display: grid; gap: var(--space-7); } .programmes-offered-page__downloads-group-title { position: relative; margin: 0 0 var(--space-4); padding-bottom: var(--space-3); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; color: var(--color-primary-mid); letter-spacing: -0.02em; border-bottom: 1px solid rgba(12, 35, 64, 0.12); } .programmes-offered-page__downloads-group-title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 3rem; height: 3px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); } .programmes-offered-page__downloads-grid { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; } @media (min-width: 640px) { .programmes-offered-page__downloads-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .programmes-offered-page__downloads-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .programmes-offered-page__downloads-cell { margin: 0; } .programmes-offered-page__download-card { position: relative; display: flex; align-items: center; gap: var(--space-3); height: 100%; min-height: 5.25rem; padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-4) + 4px); border-radius: var(--radius-lg); border: 1px solid rgba(12, 35, 64, 0.1); background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%); box-shadow: 0 6px 18px rgba(12, 35, 64, 0.06); text-decoration: none; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .programmes-offered-page__download-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--color-primary), var(--color-accent)); transform: scaleY(0); transform-origin: top center; transition: transform var(--transition); } .programmes-offered-page__download-card::after { content: ""; flex: 0 0 auto; margin-left: auto; width: 0.5rem; height: 0.5rem; border-right: 2px solid rgba(12, 35, 64, 0.32); border-bottom: 2px solid rgba(12, 35, 64, 0.32); transform: rotate(-45deg); transition: transform var(--transition), border-color var(--transition); } .programmes-offered-page__download-card:hover { transform: translateY(-3px); border-color: rgba(12, 35, 64, 0.2); box-shadow: 0 16px 32px rgba(12, 35, 64, 0.13); } .programmes-offered-page__download-card:hover::before { transform: scaleY(1); } .programmes-offered-page__download-card:hover::after { border-color: var(--color-accent); transform: rotate(-45deg) translate(2px, 2px); } .programmes-offered-page__download-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border-radius: var(--radius-md); background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-mid) 65%, var(--color-accent) 150%); color: #fff; box-shadow: 0 5px 14px rgba(12, 35, 64, 0.2); transition: transform var(--transition), box-shadow var(--transition); } .programmes-offered-page__download-card:hover .programmes-offered-page__download-icon { transform: scale(1.06); box-shadow: 0 8px 20px rgba(12, 35, 64, 0.26); } .programmes-offered-page__download-icon-svg { display: block; width: 1.35rem; height: 1.35rem; } .programmes-offered-page__download-label { flex: 1 1 auto; font-size: var(--text-base); font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; color: var(--color-dark-surface); } @media (prefers-reduced-motion: reduce) { .programmes-offered-page__download-card:hover { transform: none; } .programmes-offered-page__download-card:hover .programmes-offered-page__download-icon { transform: none; } } /* Departments (submenu slug=departments) */ .departments-page__hero { padding-block: var(--space-8); background: var(--gradient-page-hero-wash); } .departments-page__hero-inner { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 880px) { .departments-page__hero-inner { grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: var(--space-8); } } .departments-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: var(--color-primary-mid); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .departments-page__lead { margin: 0 0 var(--space-4); max-width: 40rem; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; } .departments-page__quick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .departments-page__quick-link { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-size: var(--text-base); font-weight: 600; color: var(--color-primary-mid); text-decoration: none; border-radius: var(--radius-full); border: 1px solid rgba(12, 35, 64, 0.22); background: rgba(255, 255, 255, 0.9); transition: background var(--transition), border-color var(--transition), color var(--transition); } .departments-page__quick-link:hover { background: rgba(12, 35, 64, 0.08); border-color: rgba(12, 35, 64, 0.35); color: var(--color-primary-hover); } .departments-page__hero-figure { margin: 0; justify-self: center; width: 100%; max-width: 420px; } .departments-page__hero-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: var(--shadow-lg); background: #fff; } .departments-page__hero-img:not(.departments-page__hero-img--contain) { display: block; width: 100%; height: auto; max-height: min(360px, 50vw); object-fit: cover; object-position: center; } .departments-page__catalog { padding-block: var(--space-10); background: var(--gradient-page-hero-wash); border-block: 1px solid rgba(12, 35, 64, 0.08); } .departments-page__catalog-inner { max-width: 72rem; margin-inline: auto; } .departments-page__intro { margin: var(--space-4) auto 0; max-width: 48rem; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.86); text-wrap: pretty; text-align: center; } .departments-page__tier { margin-bottom: var(--space-8); } .departments-page__tier:last-of-type { margin-bottom: 0; } .departments-page__tier-title { margin: 0 0 var(--space-4); padding-bottom: var(--space-2); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; color: var(--color-primary-mid); letter-spacing: -0.02em; border-bottom: 2px solid rgba(12, 35, 64, 0.2); } .departments-page__grid { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 520px) { .departments-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .departments-page__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .departments-page__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .departments-page__cell { margin: 0; min-width: 0; } .departments-page__card { position: relative; display: flex; width: 100%; min-height: 11.5rem; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; background-color: var(--color-primary-mid); border: 1px solid rgba(12, 35, 64, 0.16); box-shadow: 0 6px 22px rgba(12, 35, 64, 0.08); transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); } .departments-page__card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } .departments-page__card--fallback { background-image: linear-gradient(145deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.88) 55%, rgba(184, 134, 11, 0.35) 100%); } .departments-page__card-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12, 35, 64, 0.12) 0%, rgba(12, 35, 64, 0.62) 100%); } .departments-page__card-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 100%; padding: var(--space-4); box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { .departments-page__card:hover { border-color: rgba(12, 35, 64, 0.28); box-shadow: 0 12px 32px rgba(12, 35, 64, 0.14); transform: translateY(-2px); } .departments-page__card:hover .departments-page__card-link-icon { transform: translateY(-2px); background: #fff; } } @media (prefers-reduced-motion: reduce) { .departments-page__card:hover { transform: none; } } .departments-page__card:focus-visible { outline: 3px solid rgba(184, 134, 11, 0.85); outline-offset: 3px; } .departments-page__card-title { margin: 0; max-width: 18ch; font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; line-height: 1.35; color: #fff; text-align: start; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.35); overflow-wrap: normal; word-break: normal; hyphens: manual; } .departments-page__card-link-icon { align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--color-primary-mid); box-shadow: 0 4px 14px rgba(12, 35, 64, 0.18); transition: transform var(--transition), background var(--transition); } .departments-page__card-link-icon-svg { display: block; width: 1.15rem; height: 1.15rem; } /* Library (submenu slug=library) */ .library-page [id] { scroll-margin-top: calc(var(--strip-h) + var(--header-h) + 52px); } .library-page__hero { padding-block: var(--space-8); background: var(--gradient-page-hero-wash); } .library-page__hero-inner { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 880px) { .library-page__hero-inner { grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: var(--space-8); } } .library-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: var(--color-primary-mid); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .library-page__lead { margin: 0 0 var(--space-4); max-width: 40rem; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; } .library-page__quick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .library-page__quick-link { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-size: var(--text-base); font-weight: 600; color: var(--color-primary-mid); text-decoration: none; border-radius: var(--radius-full); border: 1px solid rgba(12, 35, 64, 0.22); background: rgba(255, 255, 255, 0.9); transition: background var(--transition), border-color var(--transition), color var(--transition); } .library-page__quick-link:hover { background: rgba(12, 35, 64, 0.08); border-color: rgba(12, 35, 64, 0.35); color: var(--color-primary-hover); } .library-page__hero-figure { margin: 0; justify-self: center; width: 100%; max-width: 420px; } .library-page__hero-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: var(--shadow-lg); background: #fff; } .library-page__hero-img:not(.library-page__hero-img--contain) { display: block; width: 100%; height: auto; max-height: min(360px, 50vw); object-fit: cover; object-position: center; } .library-page__hero-frame--emblem { display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: #fff; min-height: min(360px, 48vh); } .library-page__hero-img--contain { display: block; width: auto; max-width: 100%; max-height: min(320px, 44vh); height: auto; object-fit: contain; object-position: center; margin-inline: auto; } /* College logo hero — centered in academics / support banner boxes */ .departments-page__hero-frame--emblem, .teaching-faculty-page__hero-frame--emblem, .non-teaching-staff-page__hero-frame--emblem, .syllabus-gateway-page__frame--emblem { display: flex; align-items: center; justify-content: center; padding: var(--space-4); min-height: min(360px, 48vh); } .departments-page__hero-img--contain, .teaching-faculty-page__hero-img--contain, .non-teaching-staff-page__hero-img--contain, .syllabus-gateway-page__img--contain { display: block; width: auto; max-width: 100%; max-height: min(320px, 44vh); height: auto; margin-inline: auto; object-fit: contain; object-position: center; } .library-page__body { padding-block: var(--space-10); background: var(--gradient-page-hero-wash); border-block: 1px solid rgba(12, 35, 64, 0.08); } .library-page__layout { display: grid; gap: var(--space-6); max-width: 72rem; margin-inline: auto; align-items: start; } @media (min-width: 960px) { .library-page__layout { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: var(--space-8); } } .library-page__aside { position: relative; } @media (min-width: 960px) { .library-page__toc { position: sticky; top: calc(var(--header-h) + var(--space-3)); padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.14); box-shadow: 0 8px 28px rgba(12, 35, 64, 0.06); } } @media (max-width: 959px) { .library-page__toc { padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.14); } } .library-page__toc-label { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(12, 35, 64, 0.75); } .library-page__toc-list { margin: 0; padding: 0; list-style: none; } .library-page__toc-list li + li { margin-top: var(--space-1); } .library-page__toc-link { display: block; padding: var(--space-2); font-size: var(--text-base); font-weight: 600; color: var(--color-primary-mid); text-decoration: none; border-radius: var(--radius-sm); transition: background var(--transition), color var(--transition); } .library-page__toc-link:hover { background: rgba(12, 35, 64, 0.08); color: var(--color-primary-hover); } .library-page__toc-link:focus-visible { outline: 2px solid var(--color-primary-mid); outline-offset: 2px; } .library-page__main { min-width: 0; } .library-page__panel { margin-bottom: var(--space-10); padding-bottom: var(--space-8); border-bottom: 1px solid rgba(12, 35, 64, 0.1); } .library-page__panel:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .library-page__panel-title { margin: 0 0 var(--space-4); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary-mid); } .library-page__prose { margin: 0 0 var(--space-4); max-width: 48rem; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.86); text-wrap: pretty; text-align: justify; } .library-page__prose:last-of-type { margin-bottom: var(--space-5); } .library-page__actions { margin: 0; } .library-page__faculty-card { max-width: 40rem; padding: var(--space-5); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: 0 6px 22px rgba(12, 35, 64, 0.06); } .library-page__faculty-name { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; color: var(--color-dark-surface); } .library-page__faculty-cred { margin: 0 0 var(--space-4); font-size: var(--text-base); line-height: 1.55; color: rgba(15, 23, 42, 0.78); } .library-page__activity-grid { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; } @media (min-width: 520px) { .library-page__activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .library-page__activity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .library-page__activity-cell { margin: 0; } .library-page__activity-link { display: flex; align-items: center; justify-content: center; min-height: 4.5rem; padding: var(--space-3) var(--space-4); font-size: var(--text-base); font-weight: 700; text-align: center; text-decoration: none; color: var(--color-primary-mid); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.14); box-shadow: 0 4px 16px rgba(12, 35, 64, 0.05); transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); } @media (prefers-reduced-motion: no-preference) { .library-page__activity-link:hover { border-color: rgba(12, 35, 64, 0.28); box-shadow: 0 10px 28px rgba(12, 35, 64, 0.09); transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .library-page__activity-link:hover { transform: none; } .library-page__gallery-zoom:hover { transform: none; } } .library-page__gallery { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; } @media (min-width: 600px) { .library-page__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .library-page__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .library-page__gallery-item { margin: 0; } .library-page__gallery-figure { margin: 0; height: 100%; } .library-page__gallery-frame { position: relative; height: 100%; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(12, 35, 64, 0.12); background: #fff; box-shadow: 0 8px 28px rgba(12, 35, 64, 0.07); } .library-page__gallery-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .library-page__gallery-zoom { position: absolute; right: var(--space-2); bottom: var(--space-2); z-index: 1; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.94); color: var(--color-primary-mid); box-shadow: 0 2px 10px rgba(12, 35, 64, 0.18); cursor: pointer; transition: background var(--transition), color var(--transition), transform var(--transition); } .library-page__gallery-zoom:hover { background: #fff; color: var(--color-primary-hover); transform: scale(1.04); } .library-page__gallery-zoom:focus-visible { outline: 2px solid var(--color-primary-mid); outline-offset: 2px; } .library-page__gallery-zoom-icon { display: block; flex-shrink: 0; } .library-page__mini-title { margin: var(--space-6) 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--color-primary-mid); } .library-page__micro-title { margin: var(--space-4) 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--color-primary); } .library-page__gym-block { margin: 0 0 var(--space-5); } .library-page__gym-block .library-page__micro-title { margin-top: 0; } .library-page__gym-grid { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; } @media (min-width: 520px) { .library-page__gym-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .library-page__gym-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .library-page__gym-item { display: flex; align-items: center; gap: var(--space-3); min-height: 3.75rem; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(12, 35, 64, 0.12); background: #fff; box-shadow: var(--shadow-sm); } .library-page__gym-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); background: rgba(12, 35, 64, 0.1); color: var(--color-primary-mid); } .library-page__gym-icon-svg { display: block; width: 1.2rem; height: 1.2rem; } .library-page__gym-label { font-size: var(--text-base); font-weight: 600; line-height: 1.45; color: var(--color-dark-surface); text-wrap: pretty; } .library-page__gym-note { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); font-size: var(--text-base); line-height: 1.65; color: rgba(15, 23, 42, 0.88); background: rgba(12, 35, 64, 0.05); border-left: 3px solid rgba(12, 35, 64, 0.35); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .library-page__games-figure { margin: var(--space-5) 0 0; max-width: 42rem; } .library-page__games-frame { border-radius: var(--radius-lg); overflow: hidden; border: 2px solid rgba(40, 167, 69, 0.35); box-shadow: 0 8px 28px rgba(12, 35, 64, 0.08); background: #fff; padding: var(--space-2); } .library-page__games-img { display: block; width: 100%; height: auto; max-height: min(450px, 55vw); object-fit: contain; } .library-page__games-caption { margin: var(--space-2) 0 0; font-size: var(--text-base); color: rgba(15, 23, 42, 0.68); text-align: center; } .library-page__highlight { max-width: 48rem; margin: var(--space-4) 0 0; padding: var(--space-5); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(12, 35, 64, 0.07) 0%, #fff 46%, #f3f7fb 100%); border: 1px solid rgba(12, 35, 64, 0.14); box-shadow: 0 6px 22px rgba(12, 35, 64, 0.05); } .library-page__highlight .library-page__prose:last-of-type { margin-bottom: var(--space-4); } .library-page__highlight-stat { margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; line-height: 1.45; color: var(--color-primary-mid); } /* Syllabus gateway (submenu slug=syllabus) — opens BU in new tab */ .syllabus-gateway-page__hero { padding-block: var(--space-8); background: var(--gradient-page-hero-wash); } .syllabus-gateway-page__hero-inner { display: grid; gap: var(--space-6); align-items: center; justify-items: center; } .syllabus-gateway-page__hero-copy { width: 100%; max-width: 48rem; margin-inline: auto; text-align: center; } .syllabus-gateway-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: var(--color-primary-mid); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .syllabus-gateway-page__lead { margin: 0 auto var(--space-3); max-width: 40rem; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; } .syllabus-gateway-page__body { margin: 0 auto var(--space-4); max-width: 40rem; font-size: var(--text-md); line-height: 1.6; color: rgba(15, 23, 42, 0.84); text-wrap: pretty; } .syllabus-gateway-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: center; margin: var(--space-5) auto var(--space-2); } .syllabus-gateway-page__hint { margin: 0 auto var(--space-4); max-width: 40rem; font-size: var(--text-base); color: rgba(15, 23, 42, 0.72); } .syllabus-gateway-page__back { margin: var(--space-3) 0 0; text-align: center; } .syllabus-gateway-page__back-link { font-size: var(--text-base); font-weight: 600; color: var(--color-primary-mid); text-decoration: underline; text-underline-offset: 0.15em; } .syllabus-gateway-page__back-link:hover { color: var(--color-primary-hover); } .research-page__copy { max-width: 52rem; } .research-page__content { margin: 0 auto var(--space-4); max-width: 48rem; text-align: left; } .research-page__prose { margin-left: 0; margin-right: 0; max-width: none; text-align: left; } .research-page__list-intro { margin-bottom: var(--space-2); font-weight: 600; } .research-page__list { margin: 0 0 var(--space-4); padding-left: 1.25rem; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.84); } .research-page__list li + li { margin-top: 0.45rem; } .research-page__list li::marker { color: var(--color-accent); } /* Physical Education page */ .physical-education-page [id] { scroll-margin-top: calc(var(--strip-h) + var(--header-h) + 52px); } .physical-education-page__hero { padding-block: var(--space-8); background: var(--gradient-page-hero-wash); } .physical-education-page__hero-inner { display: grid; gap: var(--space-6); align-items: center; justify-items: center; } .physical-education-page__hero-copy { width: 100%; max-width: 48rem; margin-inline: auto; text-align: center; } .physical-education-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: var(--color-primary-mid); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .physical-education-page__lead { margin: 0 auto; max-width: 40rem; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; } .physical-education-page__body { padding-block: var(--space-10); background: rgba(248, 250, 252, 0.9); border-block: 1px solid rgba(12, 35, 64, 0.08); } .physical-education-page__layout { display: grid; gap: var(--space-6); max-width: 72rem; margin-inline: auto; } @media (min-width: 960px) { .physical-education-page__layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-8); align-items: start; } } .physical-education-page__toc { padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.14); box-shadow: 0 8px 28px rgba(12, 35, 64, 0.06); } @media (min-width: 960px) { .physical-education-page__toc { position: sticky; top: calc(var(--header-h) + var(--space-3)); max-height: calc(100vh - var(--header-h) - var(--space-6)); overflow-y: auto; } } .physical-education-page__toc-label { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary-mid); border-bottom: 1px solid rgba(12, 35, 64, 0.12); } .physical-education-page__toc-list { margin: 0; padding: 0; list-style: none; } .physical-education-page__toc-list li + li { margin-top: 2px; } .physical-education-page__toc-link { display: block; padding: 0.5rem 0.7rem; font-size: var(--text-sm); font-weight: 600; color: #23324f; text-decoration: none; border-radius: var(--radius-sm); line-height: 1.4; border-left: 3px solid transparent; transition: background var(--transition), color var(--transition), border-color var(--transition); } .physical-education-page__toc-link:hover, .physical-education-page__toc-link:focus-visible { background: rgba(12, 35, 64, 0.06); color: var(--color-primary-mid); border-left-color: var(--color-accent); } .physical-education-page__main { display: grid; gap: var(--space-6); } .physical-education-page__panel { padding: var(--space-6); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: 0 6px 24px rgba(12, 35, 64, 0.05); } .physical-education-page__panel-title { margin: 0 0 var(--space-4); padding-bottom: var(--space-3); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; color: var(--color-primary-mid); border-bottom: 2px solid rgba(12, 35, 64, 0.1); } .physical-education-page__prose { margin: 0 0 var(--space-3); font-size: var(--text-md); line-height: 1.7; color: rgba(15, 23, 42, 0.86); } .physical-education-page__prose:last-child { margin-bottom: 0; } .physical-education-page__faculty-card { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(12, 35, 64, 0.04), rgba(255, 255, 255, 0.9)); border: 1px solid rgba(12, 35, 64, 0.1); } .physical-education-page__faculty-icon { flex: 0 0 auto; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--radius-full); color: var(--color-primary-mid); background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(12, 35, 64, 0.12); } .physical-education-page__faculty-name { margin: 0 0 var(--space-1); font-size: var(--text-xl); font-weight: 800; color: var(--color-primary-mid); } .physical-education-page__faculty-cred { margin: 0 0 var(--space-3); font-size: var(--text-md); color: rgba(15, 23, 42, 0.78); } .physical-education-page__year-block + .physical-education-page__year-block { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid rgba(12, 35, 64, 0.1); } .physical-education-page__panel--gallery { padding-bottom: var(--space-6); } .physical-education-page__gallery-lead { max-width: 42rem; margin: 0 auto var(--space-6); text-align: center; } .physical-education-page__year-head { text-align: center; margin: 0 0 var(--space-5); } .physical-education-page__year-title { display: inline-block; margin: 0; padding: 0; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; color: var(--color-primary-mid); background: none; border-radius: 0; } .physical-education-page__year-title::after { content: ""; display: block; width: 3.5rem; height: 3px; margin: 0.65rem auto 0; border-radius: 999px; background: linear-gradient(90deg, var(--color-gold), var(--color-emerald)); } .physical-education-page__year-meta { margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: 600; color: rgba(15, 23, 42, 0.55); } .physical-education-page__events { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } @media (min-width: 640px) { .physical-education-page__events { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .physical-education-page__events { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .physical-education-page__event-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.1); box-shadow: 0 4px 18px rgba(12, 35, 64, 0.06); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .physical-education-page__event-card:hover { transform: translateY(-3px); border-color: rgba(12, 35, 64, 0.16); box-shadow: 0 14px 32px rgba(12, 35, 64, 0.1); } .physical-education-page__event-media { position: relative; flex: 0 0 auto; height: 220px; overflow: hidden; background: #e2e8f0; } @media (min-width: 640px) { .physical-education-page__event-media { height: 240px; } } .physical-education-page__event-card--has-photo .physical-education-page__event-media { display: block; } .physical-education-page__photo { margin: 0; height: 100%; } .physical-education-page__photo--cover { height: 100%; } .physical-education-page__photo--thumb { display: none; } .physical-education-page__photo-btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: none; overflow: hidden; cursor: zoom-in; background: #0f172a; } .physical-education-page__photo-btn:hover .physical-education-page__photo-overlay { opacity: 1; } .physical-education-page__photo-btn:hover .physical-education-page__photo-img { transform: scale(1.04); } .physical-education-page__photo-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.35s ease; } .physical-education-page__photo-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 35, 64, 0.42); color: #fff; opacity: 0; transition: opacity var(--transition); pointer-events: none; } .physical-education-page__photo-icon { display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)); } .physical-education-page__photo-count { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 2; padding: 0.3rem 0.65rem; font-size: var(--text-xs); font-weight: 700; color: #fff; background: rgba(12, 35, 64, 0.78); border-radius: var(--radius-full); backdrop-filter: blur(4px); pointer-events: none; } .physical-education-page__event-placeholder { display: grid; place-items: center; flex: 0 0 auto; height: 220px; color: rgba(12, 35, 64, 0.28); background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(226, 232, 240, 0.65)); } @media (min-width: 640px) { .physical-education-page__event-placeholder { height: 240px; } } .physical-education-page__event-body { display: flex; flex-direction: column; align-items: stretch; gap: 0; flex: 1 1 auto; padding: var(--space-3) var(--space-4) var(--space-4); text-align: center; } .physical-education-page__event-date { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; margin: 0; padding-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 600; line-height: 1.35; letter-spacing: 0.02em; color: rgba(12, 35, 64, 0.62); text-align: center; } .physical-education-page__event-title { margin: 0; min-height: 4.35rem; display: flex; align-items: flex-start; justify-content: center; font-size: var(--text-md); font-weight: 700; line-height: 1.45; text-align: center; text-wrap: balance; color: rgba(15, 23, 42, 0.92); } .physical-education-page__event-empty { margin: 0.25rem 0 0; font-size: var(--text-sm); color: rgba(15, 23, 42, 0.5); font-style: italic; } .physical-education-page__highlight { padding: var(--space-4); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(255, 255, 255, 0.95)); border: 1px solid rgba(212, 175, 55, 0.35); } .physical-education-page__highlight-stat { margin: var(--space-3) 0 0; padding-top: var(--space-3); font-size: var(--text-md); font-weight: 700; color: var(--color-primary-mid); border-top: 1px solid rgba(12, 35, 64, 0.12); } .syllabus-gateway-page__quick { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin: var(--space-4) auto; max-width: 40rem; } .syllabus-gateway-page__catalog { padding-block: var(--space-8); background: rgba(248, 250, 252, 0.9); } .syllabus-gateway-page__catalog-inner { max-width: var(--container-max, 72rem); margin-inline: auto; } .syllabus-gateway-page__catalog-head { max-width: 48rem; margin: 0 0 var(--space-6); } .syllabus-gateway-page__catalog-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; color: var(--color-primary-mid); margin: 0 0 var(--space-2); } .syllabus-gateway-page__catalog-lead { margin: 0; max-width: none; } .syllabus-gateway-page__catalog-empty { margin: 0; max-width: 48rem; } .syllabus-gateway-page__filters { display: grid; gap: var(--space-3); margin: 0 0 var(--space-6); padding: var(--space-4); background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: var(--radius-lg); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04); } @media (min-width: 720px) { .syllabus-gateway-page__filters { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } } .syllabus-gateway-page__filter-label { display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .syllabus-gateway-page__filter-input { width: 100%; padding: var(--space-2) var(--space-3); font-family: var(--font-ui); font-size: var(--text-base); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: inset 0 1px 2px rgba(12, 35, 64, 0.04); } .syllabus-gateway-page__filter-input:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; border-color: var(--color-primary); } .syllabus-gateway-page__filter-empty { margin: 0 0 var(--space-4); font-size: var(--text-base); color: var(--color-text-muted); } .syllabus-gateway-page__programme--hidden { display: none !important; } .syllabus-gateway-page__doc-cell--hidden { display: none !important; } .syllabus-gateway-page__grid { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .syllabus-gateway-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .syllabus-gateway-page__programme { background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04); height: 100%; display: flex; flex-direction: column; } .syllabus-gateway-page__programme-title { font-size: var(--text-xl); font-weight: 700; color: var(--color-primary-mid); margin: 0 0 var(--space-2); } .syllabus-gateway-page__programme-link { margin: 0 0 var(--space-3); font-size: var(--text-sm); } .syllabus-gateway-page__programme-link a { font-weight: 600; color: var(--color-primary-mid); } .syllabus-gateway-page__doc-grid { margin: 0; padding: 0; list-style: none; flex: 1 1 auto; } .syllabus-gateway-page__figure { margin: 0; justify-self: center; width: 100%; max-width: 420px; } .syllabus-gateway-page__frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: var(--shadow-lg); background: #fff; } .syllabus-gateway-page__img:not(.syllabus-gateway-page__img--contain) { display: block; width: 100%; height: auto; max-height: min(360px, 50vw); object-fit: cover; object-position: center; } /* Teaching faculty (submenu slug=teaching-faculty) */ .teaching-faculty-page [id] { scroll-margin-top: calc(var(--strip-h) + var(--header-h) + 52px); } .teaching-faculty-page__hero { padding-block: var(--space-8); background: var(--gradient-page-hero-wash); } .teaching-faculty-page__hero-inner { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 880px) { .teaching-faculty-page__hero-inner { grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: var(--space-8); } } .teaching-faculty-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: var(--color-primary-mid); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .teaching-faculty-page__lead { margin: 0 0 var(--space-4); max-width: 40rem; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; } .teaching-faculty-page__hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); } .teaching-faculty-page__hero-stat { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-mid); background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(12, 35, 64, 0.14); border-radius: var(--radius-full); } .teaching-faculty-page__hero-stat strong { font-size: var(--text-base); font-weight: 800; } .teaching-faculty-page__quick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .teaching-faculty-page__quick-link { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-size: var(--text-base); font-weight: 600; color: var(--color-primary-mid); text-decoration: none; border-radius: var(--radius-full); border: 1px solid rgba(12, 35, 64, 0.22); background: rgba(255, 255, 255, 0.9); transition: background var(--transition), border-color var(--transition), color var(--transition); } .teaching-faculty-page__quick-link:hover { background: rgba(12, 35, 64, 0.08); border-color: rgba(12, 35, 64, 0.35); color: var(--color-primary-hover); } .teaching-faculty-page__hero-figure { margin: 0; justify-self: center; width: 100%; max-width: 420px; } .teaching-faculty-page__hero-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: var(--shadow-lg); background: #fff; } .teaching-faculty-page__hero-img:not(.teaching-faculty-page__hero-img--contain) { display: block; width: 100%; height: auto; max-height: min(360px, 50vw); object-fit: cover; object-position: center; } .teaching-faculty-page__body { padding-block: var(--space-10); background: var(--gradient-page-hero-wash); border-block: 1px solid rgba(12, 35, 64, 0.08); } .teaching-faculty-page__layout { display: block; max-width: 72rem; margin-inline: auto; } .teaching-faculty-page__aside { position: relative; } @media (min-width: 960px) { .teaching-faculty-page__toc { position: sticky; top: calc(var(--header-h) + var(--space-3)); max-height: calc(100vh - var(--header-h) - var(--space-6)); overflow-y: auto; padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.14); box-shadow: 0 8px 28px rgba(12, 35, 64, 0.06); } } @media (max-width: 959px) { .teaching-faculty-page__toc { padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.14); } } .teaching-faculty-page__toc-label { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary-mid); border-bottom: 1px solid rgba(12, 35, 64, 0.12); } .teaching-faculty-page__toc-list { margin: 0; padding: 0; list-style: none; } .teaching-faculty-page__toc-list li + li { margin-top: 2px; } .teaching-faculty-page__toc-link { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.7rem; font-size: var(--text-sm); font-weight: 600; color: #23324f; text-decoration: none; border-radius: var(--radius-sm); line-height: 1.4; border-left: 3px solid transparent; transition: background var(--transition), color var(--transition), border-color var(--transition); } .teaching-faculty-page__toc-link-text { flex: 1 1 auto; min-width: 0; } .teaching-faculty-page__toc-count { flex: 0 0 auto; min-width: 1.35rem; padding: 0.1rem 0.45rem; font-size: 0.68rem; font-weight: 800; line-height: 1.4; text-align: center; color: var(--color-primary-mid); background: rgba(12, 35, 64, 0.08); border-radius: var(--radius-full); } .teaching-faculty-page__toc-link:hover { background: rgba(12, 35, 64, 0.06); border-left-color: var(--color-accent); color: var(--color-primary-hover); } .teaching-faculty-page__toc-link.is-active { background: rgba(12, 35, 64, 0.08); border-left-color: var(--color-accent); color: var(--color-primary-mid); font-weight: 700; } .teaching-faculty-page__toc-link:focus-visible { outline: 2px solid var(--color-primary-mid); outline-offset: 2px; } .teaching-faculty-page__main { min-width: 0; } .teaching-faculty-page__panel { margin-bottom: var(--space-5); scroll-margin-top: calc(var(--strip-h, 0px) + var(--header-h) + var(--space-4)); } .teaching-faculty-page__panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 0; } .teaching-faculty-page__live-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #166534; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.28); border-radius: var(--radius-full); } .teaching-faculty-page__live-badge::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); } .teaching-faculty-page__panel-title { margin: 0; font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary-mid); } .teaching-faculty-page__prose--note { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(12, 35, 64, 0.1); } .teaching-faculty-page__prose--muted { color: rgba(15, 23, 42, 0.62); font-style: italic; } .teaching-faculty-page__filter { margin-bottom: var(--space-8); padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: 0 6px 20px rgba(12, 35, 64, 0.05); } .teaching-faculty-page__filter-row { display: grid; gap: var(--space-3); align-items: end; } @media (min-width: 720px) { .teaching-faculty-page__filter-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; } } .teaching-faculty-page__filter-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .teaching-faculty-page__filter-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(15, 23, 42, 0.62); } .teaching-faculty-page__filter-input, .teaching-faculty-page__filter-select { width: 100%; padding: 0.65rem 0.85rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-dark-surface); background: #fff; border: 1px solid rgba(12, 35, 64, 0.16); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); } .teaching-faculty-page__filter-input:focus, .teaching-faculty-page__filter-select:focus { outline: none; border-color: var(--color-primary-mid); box-shadow: 0 0 0 3px rgba(12, 35, 64, 0.1); } .teaching-faculty-page__filter-actions { display: flex; align-items: flex-end; } .teaching-faculty-page__filter-clear { padding: 0.65rem 1rem; font-size: var(--text-sm); font-weight: 700; color: var(--color-primary-mid); background: rgba(12, 35, 64, 0.06); border: 1px solid rgba(12, 35, 64, 0.12); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background var(--transition), border-color var(--transition); } .teaching-faculty-page__filter-clear:hover { background: rgba(12, 35, 64, 0.1); border-color: rgba(12, 35, 64, 0.2); } .teaching-faculty-page__filter-status { margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: 600; color: rgba(15, 23, 42, 0.68); } .teaching-faculty-page__filter-empty { margin-bottom: var(--space-8); padding: var(--space-6); text-align: center; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.85); border: 1px dashed rgba(12, 35, 64, 0.18); } .teaching-faculty-page__filter-empty.is-hidden, .teaching-faculty-page__dept.is-filter-hidden { display: none !important; } .teaching-faculty-page__member.is-filter-hidden { display: none !important; } .teaching-faculty-page__empty { text-align: center; padding: var(--space-10) var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px dashed rgba(12, 35, 64, 0.18); } .teaching-faculty-page__empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; margin-bottom: var(--space-3); color: var(--color-primary-mid); background: rgba(12, 35, 64, 0.06); border-radius: 50%; } .teaching-faculty-page__empty-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; color: var(--color-primary-mid); } .teaching-faculty-page__prose { margin: 0 0 var(--space-4); max-width: 48rem; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.86); text-wrap: pretty; } .teaching-faculty-page__prose:last-child { margin-bottom: 0; } .teaching-faculty-page__dept { margin-bottom: var(--space-10); padding-bottom: var(--space-8); border-bottom: 1px solid rgba(12, 35, 64, 0.1); scroll-margin-top: calc(var(--strip-h, 0px) + var(--header-h) + var(--space-4)); } .teaching-faculty-page__dept--featured { padding: var(--space-5); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%); border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: 0 10px 28px rgba(12, 35, 64, 0.06); } .teaching-faculty-page__dept-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(12, 35, 64, 0.05) 0%, rgba(255, 255, 255, 0.96) 100%); border: 1px solid rgba(12, 35, 64, 0.1); border-left: 4px solid var(--color-accent); box-shadow: 0 4px 16px rgba(12, 35, 64, 0.05); } .teaching-faculty-page__dept-count { display: inline-flex; align-items: center; padding: 0.35rem 0.8rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-primary-mid); background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(12, 35, 64, 0.12); border-radius: var(--radius-full); } .teaching-faculty-page__dept:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .teaching-faculty-page__dept-title { margin: 0; font-family: var(--font-heading); font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; color: var(--color-primary-mid); } .teaching-faculty-page__members { display: flex; flex-direction: column; gap: var(--space-3); } .teaching-faculty-page__dept--featured .teaching-faculty-page__members { grid-template-columns: 1fr; max-width: 42rem; } @media (min-width: 640px) { .teaching-faculty-page__members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; } /* An expanded profile takes the full width so the PDF viewer is readable */ .teaching-faculty-page__member[open] { grid-column: 1 / -1; } } .teaching-faculty-page__member { border-radius: var(--radius-md); border: 1px solid rgba(12, 35, 64, 0.12); background: #fff; box-shadow: 0 4px 14px rgba(12, 35, 64, 0.05); transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); } .teaching-faculty-page__member:hover { border-color: rgba(12, 35, 64, 0.22); box-shadow: 0 10px 24px rgba(12, 35, 64, 0.1); } .teaching-faculty-page__member[open] { border-color: color-mix(in srgb, var(--color-primary-mid) 45%, transparent); box-shadow: 0 12px 30px rgba(12, 35, 64, 0.12); } .teaching-faculty-page__member-summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; } .teaching-faculty-page__member-summary::-webkit-details-marker { display: none; } .teaching-faculty-page__member-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--color-primary-mid) 0%, #1e5a8e 100%); color: #fff; box-shadow: 0 4px 12px rgba(12, 35, 64, 0.16); } .teaching-faculty-page__member-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .teaching-faculty-page__member-initials { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em; } .teaching-faculty-page__member-summary-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .teaching-faculty-page__member-name { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 800; line-height: 1.35; color: var(--color-dark-surface); } .teaching-faculty-page__member-cred { font-size: var(--text-sm); line-height: 1.45; color: rgba(15, 23, 42, 0.72); } .teaching-faculty-page__member-desig { display: inline-flex; align-self: flex-start; margin-top: 0.15rem; padding: 0.15rem 0.55rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-primary-mid); background: rgba(12, 35, 64, 0.08); border-radius: var(--radius-full); } .teaching-faculty-page__member-summary::after { content: ""; flex-shrink: 0; margin-left: auto; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--color-primary-mid); border-bottom: 2px solid var(--color-primary-mid); transform: rotate(45deg); transition: transform var(--transition); } .teaching-faculty-page__member[open] .teaching-faculty-page__member-summary::after { transform: rotate(-135deg); } .teaching-faculty-page__member-body { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid rgba(12, 35, 64, 0.08); } .teaching-faculty-page__member-detail { margin: var(--space-4) 0; padding: var(--space-4); border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, #fff 100%); border: 1px solid rgba(12, 35, 64, 0.1); } .teaching-faculty-page__member-detail-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(12, 35, 64, 0.08); } .teaching-faculty-page__member-detail-photo { flex: 0 0 auto; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(12, 35, 64, 0.14); } .teaching-faculty-page__member-detail-intro { min-width: 0; } .teaching-faculty-page__member-detail-name { margin: 0 0 0.25rem; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; line-height: 1.3; color: var(--color-primary-mid); } .teaching-faculty-page__member-detail-desig { margin: 0 0 0.2rem; font-size: var(--text-sm); font-weight: 700; color: var(--color-dark-surface); } .teaching-faculty-page__member-detail-cred { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: rgba(15, 23, 42, 0.72); } .teaching-faculty-page__member-meta { display: grid; gap: 0.65rem; margin: 0; } @media (min-width: 640px) { .teaching-faculty-page__member-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.25rem; } } .teaching-faculty-page__member-meta-row { margin: 0; } .teaching-faculty-page__member-meta dt { margin: 0 0 0.15rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(15, 23, 42, 0.55); } .teaching-faculty-page__member-meta dd { margin: 0; font-size: var(--text-sm); font-weight: 600; line-height: 1.45; color: var(--color-dark-surface); } .teaching-faculty-page__member-meta dd a { color: var(--color-primary-mid); text-decoration: none; } .teaching-faculty-page__member-meta dd a:hover { text-decoration: underline; } .teaching-faculty-page__pdf-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-3); padding: 0; list-style: none; } .teaching-faculty-page__embeds { display: flex; flex-direction: column; gap: var(--space-3); } .teaching-faculty-page__embed-wrap { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(12, 35, 64, 0.12); background: var(--color-surface); min-height: 28rem; } .teaching-faculty-page__iframe { display: block; width: 100%; height: min(70vh, 32rem); border: 0; background: #fff; } @media (max-width: 639px) { .teaching-faculty-page__iframe { height: 24rem; } } /* Department pager: compact prev/next chips */ .teaching-faculty-page__dept-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: var(--space-4); } .teaching-faculty-page__dept-pager-spacer { flex: 1 1 auto; min-width: 0; } .teaching-faculty-page__dept-pager-link { display: inline-flex; align-items: center; gap: 0.4rem; max-width: min(100%, 15rem); padding: 0.4rem 0.85rem; border-radius: var(--radius-full); border: 1px solid rgba(12, 35, 64, 0.14); background: #fff; box-shadow: 0 2px 10px rgba(12, 35, 64, 0.06); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition); } .teaching-faculty-page__dept-pager-link--next { margin-left: auto; } .teaching-faculty-page__dept-pager-link:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); background: linear-gradient(135deg, rgba(212, 175, 55, 0.14) 0%, #fff 100%); box-shadow: 0 6px 18px rgba(12, 35, 64, 0.1); } .teaching-faculty-page__dept-pager-link:focus-visible { outline: 2px solid var(--color-primary-mid); outline-offset: 2px; } .teaching-faculty-page__dept-pager-arrow { flex: 0 0 auto; font-size: 0.8rem; font-weight: 800; line-height: 1; color: var(--color-accent); } .teaching-faculty-page__dept-pager-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.01em; color: var(--color-primary-mid); } @media (max-width: 559px) { .teaching-faculty-page__dept-pager-link { max-width: calc(50% - 0.25rem); padding: 0.38rem 0.7rem; } .teaching-faculty-page__dept-pager-name { font-size: 0.68rem; } } /* Non-teaching staff (submenu slug=non-teaching-staff) */ .non-teaching-staff-page [id] { scroll-margin-top: calc(var(--strip-h) + var(--header-h) + 52px); } .non-teaching-staff-page__hero { padding-block: var(--space-8); background: var(--gradient-page-hero-wash); } .non-teaching-staff-page__hero-inner { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 880px) { .non-teaching-staff-page__hero-inner { grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: var(--space-8); } } .non-teaching-staff-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: var(--color-primary-mid); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .non-teaching-staff-page__lead { margin: 0 0 var(--space-4); max-width: 40rem; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; } .non-teaching-staff-page__quick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .non-teaching-staff-page__quick-link { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-size: var(--text-base); font-weight: 600; color: var(--color-primary-mid); text-decoration: none; border-radius: var(--radius-full); border: 1px solid rgba(12, 35, 64, 0.22); background: rgba(255, 255, 255, 0.9); transition: background var(--transition), border-color var(--transition), color var(--transition); } .non-teaching-staff-page__quick-link:hover { background: rgba(12, 35, 64, 0.08); border-color: rgba(12, 35, 64, 0.35); color: var(--color-primary-hover); } .non-teaching-staff-page__hero-figure { margin: 0; justify-self: center; width: 100%; max-width: 420px; } .non-teaching-staff-page__hero-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: var(--shadow-lg); background: #fff; } .non-teaching-staff-page__hero-img:not(.non-teaching-staff-page__hero-img--contain) { display: block; width: 100%; height: auto; max-height: min(360px, 50vw); object-fit: cover; object-position: center; } .non-teaching-staff-page__body { padding-block: var(--space-10); background: var(--gradient-page-hero-wash); border-block: 1px solid rgba(12, 35, 64, 0.08); } .non-teaching-staff-page__layout { display: grid; gap: var(--space-6); max-width: 72rem; margin-inline: auto; align-items: start; } @media (min-width: 960px) { .non-teaching-staff-page__layout { grid-template-columns: minmax(200px, 220px) minmax(0, 1fr); gap: var(--space-8); } } .non-teaching-staff-page__aside { position: relative; } @media (min-width: 960px) { .non-teaching-staff-page__toc { position: sticky; top: calc(var(--header-h) + var(--space-3)); padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.14); box-shadow: 0 8px 28px rgba(12, 35, 64, 0.06); } } @media (max-width: 959px) { .non-teaching-staff-page__toc { padding: var(--space-4); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.14); } } .non-teaching-staff-page__toc-label { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(12, 35, 64, 0.75); } .non-teaching-staff-page__toc-list { margin: 0; padding: 0; list-style: none; } .non-teaching-staff-page__toc-list li + li { margin-top: var(--space-1); } .non-teaching-staff-page__toc-link { display: block; padding: var(--space-2); font-size: var(--text-base); font-weight: 600; color: var(--color-primary-mid); text-decoration: none; border-radius: var(--radius-sm); transition: background var(--transition), color var(--transition); } .non-teaching-staff-page__toc-link:hover { background: rgba(12, 35, 64, 0.08); color: var(--color-primary-hover); } .non-teaching-staff-page__toc-link:focus-visible { outline: 2px solid var(--color-primary-mid); outline-offset: 2px; } .non-teaching-staff-page__main { min-width: 0; } .non-teaching-staff-page__panel { margin-bottom: var(--space-10); padding-bottom: var(--space-8); border-bottom: 1px solid rgba(12, 35, 64, 0.1); } .non-teaching-staff-page__panel-title { margin: 0 0 var(--space-4); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary-mid); } .non-teaching-staff-page__prose { margin: 0 0 var(--space-4); max-width: 48rem; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.86); text-wrap: pretty; } .non-teaching-staff-page__prose:last-child { margin-bottom: 0; } .non-teaching-staff-page__tier { margin-bottom: var(--space-10); padding-bottom: var(--space-8); border-bottom: 1px solid rgba(12, 35, 64, 0.1); } .non-teaching-staff-page__tier:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .non-teaching-staff-page__tier-title { margin: 0 0 var(--space-4); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary-mid); padding-bottom: var(--space-2); border-bottom: 2px solid rgba(12, 35, 64, 0.18); } .non-teaching-staff-page__table-wrap, .students-union-page__table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid rgba(12, 35, 64, 0.14); background: #fff; box-shadow: 0 4px 18px rgba(12, 35, 64, 0.05); } .non-teaching-staff-page__table, .students-union-page__table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: var(--text-base); } .students-union-page__table--assoc { min-width: 36rem; } .non-teaching-staff-page__table thead th, .students-union-page__table thead th { padding: var(--space-3) var(--space-3); text-align: left; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--text-xs); color: #fff; background: linear-gradient(135deg, var(--color-primary-mid) 0%, #1a5f8f 100%); border: 1px solid rgba(255, 255, 255, 0.12); } .non-teaching-staff-page__table tbody td, .students-union-page__table tbody td { padding: var(--space-3) var(--space-3); border: 1px solid rgba(12, 35, 64, 0.1); color: rgba(15, 23, 42, 0.9); vertical-align: top; } .non-teaching-staff-page__table tbody tr:nth-child(even), .students-union-page__table tbody tr:nth-child(even) { background: rgba(12, 35, 64, 0.04); } .non-teaching-staff-page__table tbody tr:hover, .students-union-page__table tbody tr:hover { background: rgba(12, 35, 64, 0.07); } .students-union-page__table-hint { margin: var(--space-2) 0 var(--space-6); max-width: 40rem; font-size: var(--text-xs); color: rgba(15, 23, 42, 0.62); } .students-union-page__assoc-heading { margin-top: var(--space-2); } .students-union-page__person-name { font-weight: 600; color: rgba(15, 23, 42, 0.94); } .students-union-page__person-class { display: inline-block; margin-top: 0.15rem; font-size: var(--text-xs); color: rgba(15, 23, 42, 0.65); } .students-union-page__td-muted { color: rgba(15, 23, 42, 0.45); font-weight: 600; } .submenu-page.theme-students.library-page .library-page__title { color: #0f5a4c; } .submenu-page.theme-students.library-page .library-page__panel-title { color: #0d4a40; } .submenu-page.theme-students.library-page .library-page__toc-link { color: #0d4a40; } .submenu-page.theme-students.library-page .library-page__toc-link:hover { color: #0a362e; } .submenu-page.theme-students.library-page .library-page__mini-title { color: #0d4a40; } /* SJC Clubs (submenu slug=sjc-clubs) */ .sjc-clubs-page__note { margin-bottom: var(--space-5); } .sjc-clubs-page__grid { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; } @media (min-width: 520px) { .sjc-clubs-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .sjc-clubs-page__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sjc-clubs-page__cell { margin: 0; } .sjc-clubs-page__card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 5.5rem; height: 100%; padding: var(--space-4) var(--space-3); text-align: center; text-decoration: none; color: #0d4a40; font-weight: 700; font-size: var(--text-base); line-height: 1.45; border-radius: var(--radius-lg); background: #fff; border: 2px solid rgba(15, 90, 76, 0.35); box-shadow: 0 4px 16px rgba(12, 35, 64, 0.05); transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition), color var(--transition); } @media (prefers-reduced-motion: no-preference) { .sjc-clubs-page__card:hover { border-color: rgba(15, 90, 76, 0.55); box-shadow: 0 10px 28px rgba(12, 35, 64, 0.09); transform: translateY(-2px); color: #0a362e; } } @media (prefers-reduced-motion: reduce) { .sjc-clubs-page__card:hover { transform: none; } } .sjc-clubs-page__card:focus-visible { outline: 2px solid #0f5a4c; outline-offset: 3px; } .sjc-clubs-page__card-label { text-wrap: balance; } .sjc-clubs-page__card-hint { font-size: var(--text-xs); font-weight: 600; color: rgba(15, 23, 42, 0.55); } /* Individual SJC club pages (submenu slug=club-*) */ .club-detail-page__inner { max-width: 48rem; margin-inline: auto; padding-inline: var(--space-2); } .club-detail-page__crumb { color: inherit; text-decoration: none; font-weight: 600; } .club-detail-page__crumb:hover { text-decoration: underline; } .club-detail-page__back { margin-top: var(--space-3); } .club-detail-page__gallery-outer { max-width: 72rem; margin-inline: auto; margin-top: var(--space-10); padding-inline: var(--space-2); } .club-detail-page__gallery-panel { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } /* Code of Conduct (submenu slug=code-of-conduct) */ .conduct-page__shell { max-width: 72rem; margin-inline: auto; padding-inline: var(--space-2); } .conduct-page__intro-prose { max-width: 42rem; margin-top: var(--space-3); margin-bottom: 0; } .conduct-page__tabbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); padding-bottom: var(--space-4); border-bottom: 1px solid rgba(12, 35, 64, 0.12); } .conduct-page__tab { appearance: none; margin: 0; cursor: pointer; border: 2px solid rgba(12, 35, 64, 0.2); border-radius: 999px; padding: 0.55rem 1.15rem; font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; color: var(--color-primary-mid); background: rgba(255, 255, 255, 0.92); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .conduct-page__tab:hover { border-color: rgba(12, 35, 64, 0.45); background: #fff; } .conduct-page__tab.is-active { border-color: var(--color-primary-mid); background: var(--color-primary-mid); color: #fff; } .conduct-page__tab:focus-visible { outline: 2px solid var(--color-primary-mid); outline-offset: 3px; } .conduct-page__block { margin-bottom: var(--space-10); } .conduct-page__block:last-child { margin-bottom: var(--space-4); } .conduct-page__block-title { margin: 0 0 var(--space-5); font-family: var(--font-heading); font-size: clamp(1.05rem, 2.5vw, 1.35rem); font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary-mid); text-align: center; text-wrap: balance; } .conduct-page__details { border: 1px solid rgba(12, 35, 64, 0.12); border-radius: 12px; margin-bottom: var(--space-3); background: #fff; box-shadow: 0 1px 0 rgba(12, 35, 64, 0.04); } .conduct-page__summary { cursor: pointer; list-style: none; padding: var(--space-4) var(--space-5); font-weight: 700; font-size: var(--text-base); color: var(--color-primary-mid); } .conduct-page__summary::-webkit-details-marker { display: none; } .conduct-page__list { margin: 0; padding: 0 var(--space-5) var(--space-4) var(--space-8); font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.88); } .conduct-page__list li { margin-bottom: var(--space-2); } .conduct-page__list li:last-child { margin-bottom: 0; } .conduct-page__after { margin: calc(var(--space-2) * -1) 0 0; padding: 0 var(--space-5) var(--space-4); font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.86); text-wrap: pretty; } .conduct-page__panel-head { margin-bottom: var(--space-6); } .conduct-page__panel-title { margin: 0; font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary-mid); } .conduct-page__values-grid { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .conduct-page__values-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; } } .conduct-page__value-card { margin-bottom: var(--space-6); } .conduct-page__value-card:last-child { margin-bottom: 0; } .conduct-page__value-heading { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; color: var(--color-primary-mid); } .conduct-page__value-text { margin: 0; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.86); text-wrap: pretty; } /* Co-curricular Activities (submenu slug=cocurricular) */ .cocurricular-page__intro { max-width: 42rem; } .cocurricular-page__intro + .cocurricular-page__intro { margin-top: var(--space-2); } .cocurricular-page__quick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); } .cocurricular-page__quick-link { display: inline-flex; align-items: center; padding: 0.45rem 0.95rem; border-radius: 999px; font-size: var(--text-base); font-weight: 700; color: var(--color-primary-mid); text-decoration: none; border: 2px solid rgba(12, 35, 64, 0.22); background: rgba(255, 255, 255, 0.85); transition: border-color 0.2s ease, background 0.2s ease; } .cocurricular-page__quick-link:hover { border-color: rgba(12, 35, 64, 0.45); background: #fff; } .cocurricular-page__quick-link:focus-visible { outline: 2px solid var(--color-primary-mid); outline-offset: 3px; } .cocurricular-page__body { overflow: visible; } .cocurricular-page__jump { position: sticky; top: calc(var(--strip-h) + var(--header-h)); z-index: 90; width: 100%; margin: 0; background: rgba(240, 246, 252, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block: 1px solid rgba(12, 35, 64, 0.08); padding-block: var(--space-3); box-shadow: 0 4px 20px rgba(12, 35, 64, 0.06); } .cocurricular-page__jump-inner { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; max-width: 72rem; margin-inline: auto; padding-inline: var(--space-2); } .cocurricular-page__jump-link { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; text-decoration: none; color: var(--color-primary-mid); padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid rgba(12, 35, 64, 0.18); background: #fff; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .cocurricular-page__jump-link:hover { border-color: rgba(12, 35, 64, 0.4); } .cocurricular-page__jump-link.is-active { background: var(--color-primary-mid); color: #fff; border-color: var(--color-primary-mid); } .cocurricular-page__jump-link:focus-visible { outline: 2px solid var(--color-primary-mid); outline-offset: 2px; } .cocurricular-page__shell { max-width: 52rem; margin-inline: auto; padding-inline: var(--space-2); } .cocurricular-page__block { scroll-margin-top: calc(var(--strip-h) + var(--header-h) + 5rem); } .cocurricular-page__list { margin: var(--space-4) 0 0; padding-left: 1.25rem; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.88); } .cocurricular-page__list li { margin-bottom: var(--space-2); } .cocurricular-page__list li:last-child { margin-bottom: 0; } .cocurricular-page__list--muted { color: rgba(15, 23, 42, 0.78); } .cocurricular-page__gallery { margin-top: var(--space-5); } .cocurricular-page__links { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); } /* Academic calendar (submenu slug=academic-calendar) */ .academic-calendar-page__intro { max-width: 42rem; } .academic-calendar-page__intro + .academic-calendar-page__intro { margin-top: var(--space-2); } .academic-calendar-page__jump { background: var(--gradient-page-hero-wash); border-block: 1px solid rgba(12, 35, 64, 0.08); padding-block: var(--space-4); } .academic-calendar-page__jump-inner { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; max-width: 72rem; margin-inline: auto; padding-inline: var(--space-2); } .academic-calendar-page__jump-link { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; text-decoration: none; color: var(--color-primary-mid); padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid rgba(12, 35, 64, 0.18); background: #fff; } .academic-calendar-page__jump-link:hover { border-color: rgba(12, 35, 64, 0.4); } .academic-calendar-page__jump-link:focus-visible { outline: 2px solid var(--color-primary-mid); outline-offset: 2px; } .academic-calendar-page__shell { max-width: 72rem; margin-inline: auto; padding-inline: var(--space-2); } .academic-calendar-page__overview { margin-bottom: var(--space-8); } .academic-calendar-page__list { margin: var(--space-4) 0 0; padding-left: 1.25rem; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.88); } .academic-calendar-page__list li { margin-bottom: var(--space-2); } .academic-calendar-page__list li:last-child { margin-bottom: 0; } .academic-calendar-page__catalog { margin-top: var(--space-2); padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid rgba(12, 35, 64, 0.12); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #f3f8fb 100%); box-shadow: var(--shadow-md); } .academic-calendar-page__catalog-head { margin-bottom: var(--space-5); max-width: 42rem; } .academic-calendar-page__catalog-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary-mid); } .academic-calendar-page__catalog-lead { margin: 0; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.82); text-wrap: pretty; } .academic-calendar-page__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin: 0; padding: 0; } @media (min-width: 640px) { .academic-calendar-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .academic-calendar-page__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .academic-calendar-page__cell { margin: 0; min-width: 0; scroll-margin-top: calc(var(--strip-h) + var(--header-h) + 52px); } .academic-calendar-page__card { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; min-height: 100%; padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid rgba(12, 35, 64, 0.12); background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition); } .academic-calendar-page__card:hover { transform: translateY(-3px); border-color: rgba(12, 35, 64, 0.24); box-shadow: var(--shadow-md); background: rgba(12, 35, 64, 0.02); } .academic-calendar-page__card:focus-visible { outline: 3px solid rgba(15, 90, 76, 0.45); outline-offset: 3px; } .academic-calendar-page__card--latest { border-color: rgba(12, 35, 64, 0.28); background: linear-gradient(165deg, rgba(12, 35, 64, 0.08) 0%, #fff 48%); box-shadow: var(--shadow-md); } .academic-calendar-page__card--latest .academic-calendar-page__card-icon { background: var(--color-primary-mid); color: #fff; } .academic-calendar-page__card--latest .academic-calendar-page__card-cta-icon { background: var(--color-primary-mid); color: #fff; } .academic-calendar-page__card-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-md); background: rgba(12, 35, 64, 0.1); color: var(--color-primary-mid); } .academic-calendar-page__card-icon-svg { display: block; width: 1.45rem; height: 1.45rem; } .academic-calendar-page__card-content { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-2); min-width: 0; } .academic-calendar-page__card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .academic-calendar-page__badge { display: inline-flex; align-items: center; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--color-primary-mid); } .academic-calendar-page__year { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(15, 23, 42, 0.62); } .academic-calendar-page__card-title { margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; color: var(--color-primary-mid); text-wrap: pretty; } .academic-calendar-page__card-text { margin: 0; font-size: var(--text-base); line-height: 1.65; color: rgba(15, 23, 42, 0.82); text-wrap: pretty; } .academic-calendar-page__card-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid rgba(12, 35, 64, 0.1); } .academic-calendar-page__card-cta-label { font-family: var(--font-ui); font-size: var(--text-base); font-weight: 700; color: var(--color-primary-mid); } .academic-calendar-page__card-cta-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(12, 35, 64, 0.1); color: var(--color-primary-mid); transition: transform var(--transition), background var(--transition), color var(--transition); } .academic-calendar-page__card-cta-icon-svg { display: block; width: 1.15rem; height: 1.15rem; } @media (prefers-reduced-motion: no-preference) { .academic-calendar-page__card:hover .academic-calendar-page__card-cta-icon { transform: translateY(-2px); background: var(--color-primary-mid); color: #fff; } } .academic-calendar-page__card-actions { margin-top: var(--space-4); } .academic-calendar-page__aff { margin-top: var(--space-10); } /* Student download forms (submenu slug=download-forms) */ .download-forms-page__intro { max-width: 42rem; } .download-forms-page__intro + .download-forms-page__intro { margin-top: var(--space-2); } .download-forms-page__source { margin: var(--space-4) 0 0; font-size: var(--text-base); } .download-forms-page__source-link { font-weight: 700; color: var(--color-primary-mid); text-decoration: underline; text-underline-offset: 3px; } .download-forms-page__source-link:hover { color: #0a2f4d; } .download-forms-page__jump { background: var(--gradient-page-hero-wash); border-block: 1px solid rgba(12, 35, 64, 0.08); padding-block: var(--space-4); } .download-forms-page__jump-inner { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; max-width: 72rem; margin-inline: auto; padding-inline: var(--space-2); } .download-forms-page__jump-link { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; text-decoration: none; color: var(--color-primary-mid); padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid rgba(12, 35, 64, 0.18); background: #fff; } .download-forms-page__jump-link:hover { border-color: rgba(12, 35, 64, 0.4); } .download-forms-page__jump-link:focus-visible { outline: 2px solid var(--color-primary-mid); outline-offset: 2px; } .download-forms-page__shell { max-width: 72rem; margin-inline: auto; padding-inline: var(--space-2); } .download-forms-page__notes { margin-bottom: var(--space-8); } .download-forms-page__list { margin: var(--space-4) 0 0; padding-left: 1.25rem; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.88); } .download-forms-page__list li { margin-bottom: var(--space-2); } .download-forms-page__list li:last-child { margin-bottom: 0; } .download-forms-page__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; } @media (min-width: 640px) { .download-forms-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .download-forms-page__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .download-forms-page__card { scroll-margin-top: calc(var(--strip-h) + var(--header-h) + 52px); border: 1px solid rgba(12, 35, 64, 0.12); border-radius: 14px; padding: var(--space-5); background: #fff; box-shadow: 0 1px 0 rgba(12, 35, 64, 0.04); } .download-forms-page__card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); } .download-forms-page__code { flex-shrink: 0; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--color-primary-mid); padding: 0.2rem 0.55rem; border-radius: 6px; } .download-forms-page__card-title { margin: 0; flex: 1 1 10rem; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary-mid); } .download-forms-page__card-text { margin: 0; font-size: var(--text-md); line-height: 1.6; color: rgba(15, 23, 42, 0.86); text-wrap: pretty; } .download-forms-page__card-actions { margin-top: var(--space-4); } /* Alumnae (association, register-here, alumnae-video) */ .alumnae-page__sibling-nav { background: linear-gradient(180deg, #f7f2ec 0%, #efe6dc 100%); border-block: 1px solid rgba(90, 60, 40, 0.12); padding-block: var(--space-4); } .alumnae-page__sibling-inner { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; align-items: center; max-width: 72rem; margin-inline: auto; padding-inline: var(--space-2); } .alumnae-page__sibling { display: inline-flex; align-items: center; padding: 0.45rem 1rem; border-radius: 999px; font-size: var(--text-base); font-weight: 700; text-decoration: none; color: #5a3c28; border: 2px solid rgba(90, 60, 40, 0.22); background: rgba(255, 255, 255, 0.9); transition: border-color 0.2s ease, background 0.2s ease; } .alumnae-page__sibling:hover { border-color: rgba(90, 60, 40, 0.45); background: #fff; } .alumnae-page__sibling:focus-visible { outline: 2px solid #5a3c28; outline-offset: 3px; } .alumnae-page__sibling.is-current { border-color: #5a3c28; background: #5a3c28; color: #fff; cursor: default; } .alumnae-page__shell { max-width: 48rem; margin-inline: auto; padding-inline: var(--space-2); } .alumnae-page__subhead { margin: var(--space-8) 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; color: #5a3c28; } .alumnae-page__list { margin: 0 0 var(--space-6); padding-left: 1.25rem; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.88); } .alumnae-page__list li { margin-bottom: var(--space-2); } .alumnae-page__list li:last-child { margin-bottom: 0; } .alumnae-page__actions { margin-top: var(--space-6); } .support-page__shell { max-width: 52rem; } .support-page__h2 { margin: var(--space-6) 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); } .support-page__list, .support-page__olist { margin: 0 0 var(--space-5); padding-left: 1.35rem; line-height: 1.65; } .support-page__list li, .support-page__olist li { margin-bottom: var(--space-2); } .support-page__panel { margin: var(--space-5) 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-elevated); border: 1px solid var(--color-border); } .support-page__contact-list { margin: 0; padding-left: 1.25rem; } .support-page__contact-list li { margin-bottom: var(--space-2); } .support-page__table-wrap { margin: var(--space-5) 0; overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); } .support-page__table { width: 100%; border-collapse: collapse; font-size: var(--text-base); background: var(--color-surface); } .support-page__table th, .support-page__table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; } .support-page__table th { background: var(--color-primary); color: #fff; font-weight: 600; } .support-page__table tr:last-child td { border-bottom: 0; } .support-page__role-grid { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; } @media (min-width: 640px) { .support-page__role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .support-page__role-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .support-page__role-card { margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .support-page__role-title { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: 700; color: var(--color-primary); } .support-page__role-note { margin: 0 0 var(--space-3); font-size: var(--text-base); color: var(--color-text-muted); } .support-page__doc-links { margin: 0 0 var(--space-6); padding-left: 1.25rem; } .support-page__doc-links a { font-weight: 600; } .support-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } .iic-page__downloads { margin-top: var(--space-4); } .iic-page__year + .iic-page__year { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); } .iic-page__intro { text-align: justify; max-width: none; } .iic-page__subheading { text-align: center; margin-top: var(--space-6); } /* ============================================================ IQAC submenu page ============================================================ */ .iqac-page__intro .library-page__panel-title { margin-bottom: var(--space-3); } .iqac-page__section { scroll-margin-top: 6.5rem; } .iqac-page__section .library-page__panel-title { position: relative; display: inline-flex; align-items: center; gap: 0.7rem; padding-left: 0.9rem; border-left: 4px solid var(--color-primary-mid); line-height: 1.15; } .iqac-page__section-desc { margin: 0 0 var(--space-5); font-size: var(--text-sm); line-height: 1.6; color: rgba(15, 23, 42, 0.72); max-width: 56rem; } /* ----- Pane switching (TOC shows one section at a time) ----- */ .iqac-page__pane:not(.iqac-page__pane--active) { display: none !important; } .iqac-page__pane--active { display: block; } .iqac-page__pane--active.iqac-page__vm { display: grid; } .iqac-page__toc-link--active { background: rgba(12, 35, 64, 0.12); color: var(--color-primary-hover); font-weight: 700; } .iqac-page__toc-link--active:hover { background: rgba(12, 35, 64, 0.16); } /* ----- Document grid ----- */ .iqac-page__doc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 720px) { .iqac-page__doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } } .iqac-page__doc-cell { margin: 0; } .iqac-page__doc-link { display: flex; align-items: center; gap: 0.9rem; width: 100%; min-height: 4.4rem; padding: 0.85rem 1rem; border-radius: 0.8rem; background: #fff; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: 0 1px 0 rgba(12, 35, 64, 0.02); text-decoration: none; text-align: left; color: var(--color-dark-surface); position: relative; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .iqac-page__doc-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 0.7rem; background: linear-gradient(135deg, var(--color-primary-mid) 0%, #1e5a8e 100%); color: #fff; flex: 0 0 auto; box-shadow: 0 4px 12px rgba(12, 35, 64, 0.18); transition: transform var(--transition), box-shadow var(--transition); } .iqac-page__doc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .iqac-page__doc-label { font-size: var(--text-sm); font-weight: 600; line-height: 1.35; color: var(--color-dark-surface); word-break: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .iqac-page__doc-meta { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--text-xs); color: rgba(15, 23, 42, 0.6); } .iqac-page__doc-meta-tag { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #b3261e; background: rgba(179, 38, 30, 0.08); padding: 0.12rem 0.45rem; border-radius: 999px; } .iqac-page__doc-meta-divider { opacity: 0.6; } .iqac-page__doc-meta-size { font-weight: 600; letter-spacing: 0.01em; color: rgba(15, 23, 42, 0.62); } .iqac-page__doc-arrow { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; flex: 0 0 auto; color: rgba(12, 35, 64, 0.5); background: transparent; transition: transform var(--transition), color var(--transition), background var(--transition); } @media (prefers-reduced-motion: no-preference) { .iqac-page__doc-link:hover { border-color: rgba(12, 35, 64, 0.32); box-shadow: 0 12px 28px rgba(12, 35, 64, 0.10); transform: translateY(-2px); } .iqac-page__doc-link:hover .iqac-page__doc-arrow { color: var(--color-primary-mid); background: rgba(12, 35, 64, 0.08); transform: translate(2px, -2px); } .iqac-page__doc-link:hover .iqac-page__doc-icon { box-shadow: 0 8px 18px rgba(12, 35, 64, 0.28); } } .iqac-page__doc-link:focus-visible { outline: 2px solid var(--color-primary-mid); outline-offset: 3px; } /* ----- Vision & Mission ----- */ .iqac-page__vm { display: grid; gap: var(--space-4); } @media (min-width: 900px) { .iqac-page__vm { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: stretch; } .iqac-page__vm .library-page__panel-title { grid-column: 1 / -1; } } .iqac-page__vm-card { position: relative; padding: var(--space-5); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: 0 6px 22px rgba(12, 35, 64, 0.06); overflow: hidden; } .iqac-page__vm-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; } .iqac-page__vm-card--vision::before { background: linear-gradient(180deg, var(--color-primary-mid), #1e5a8e); } .iqac-page__vm-card--mission::before { background: linear-gradient(180deg, #b3261e, #d04a3f); } .iqac-page__vm-heading { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 800; color: var(--color-primary-mid); letter-spacing: 0.12em; text-transform: uppercase; } .iqac-page__vm-card--mission .iqac-page__vm-heading { color: #b3261e; } .iqac-page__vm-text { margin: 0; font-size: 1rem; line-height: 1.65; color: rgba(15, 23, 42, 0.86); } .iqac-page__vm-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; color: rgba(15, 23, 42, 0.86); line-height: 1.55; font-size: var(--text-sm); } .iqac-page__vm-list li { position: relative; padding-left: 1.4rem; } .iqac-page__vm-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #b3261e; } /* ----- Policy sub-groups ----- */ .iqac-page__groups { display: grid; gap: var(--space-6); margin-top: var(--space-2); } .iqac-page__group-heading { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: var(--color-primary-mid); letter-spacing: -0.005em; display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0 0 0.4rem; border-bottom: 2px solid rgba(12, 35, 64, 0.18); } .iqac-page__group-count { font-size: var(--text-sm); font-weight: 600; color: rgba(15, 23, 42, 0.55); } /* ============================================================ Department detail pages (per-dept submenu) ============================================================ */ /* Full-width justified body copy across all department pages */ .department-detail-page .library-page__prose, .department-detail-page .iqac-page__section-desc { max-width: none; width: 100%; text-align: justify; text-align-last: start; } .department-detail-page .iqac-page__vm-text, .department-detail-page .iqac-page__vm-list li { text-align: justify; text-align-last: start; } /* Mirror layout (#dept-profile): vision/mission in vm-cards + readable colours */ .department-detail-page #dept-profile .department-detail-page__profile-vm-stack { display: grid; gap: var(--space-5); margin-top: var(--space-5); } .department-detail-page #dept-profile .department-detail-page__profile-vm-card { margin: 0; } .department-detail-page #dept-profile .iqac-page__vm-heading, .department-detail-page #dept-profile .iqac-page__vm-text, .department-detail-page #dept-profile .iqac-page__vm-list, .department-detail-page #dept-profile .iqac-page__vm-list li { background-color: #fff; background-image: none; } .department-detail-page #dept-profile .iqac-page__vm-heading { color: var(--color-primary-mid); } .department-detail-page #dept-profile .iqac-page__vm-card--mission .iqac-page__vm-heading { color: #b3261e; } .department-detail-page #dept-profile .iqac-page__vm-text, .department-detail-page #dept-profile .iqac-page__vm-list, .department-detail-page #dept-profile .iqac-page__vm-list li { color: rgba(15, 23, 42, 0.9); } /* Space after vision/mission (association prose), or between two profile paragraphs when no VM block */ .department-detail-page #dept-profile .department-detail-page__profile-vm-stack + .library-page__prose, .department-detail-page #dept-profile .library-page__prose + .library-page__prose { margin-top: var(--space-6); } .department-detail-page__meta { margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); border: 1px solid rgba(12, 35, 64, 0.12); border-radius: 0.85rem; background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%); display: grid; gap: 0.6rem; max-width: 38rem; } .department-detail-page__meta-row { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 0.75rem; align-items: baseline; font-size: var(--text-sm); } .department-detail-page__meta-row dt { margin: 0; font-weight: 700; color: rgba(15, 23, 42, 0.62); letter-spacing: 0.02em; } .department-detail-page__meta-row dd { margin: 0; color: var(--color-dark-surface); font-weight: 600; } .department-detail-page__assoc-name { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.005em; color: #b3261e; } .department-detail-page__faculty { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .department-detail-page__faculty { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .department-detail-page__faculty-cell { margin: 0; } .department-detail-page__faculty-card { display: flex; gap: 0.9rem; padding: 1rem 1.1rem; border-radius: 0.9rem; background: #fff; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: 0 1px 0 rgba(12, 35, 64, 0.02); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); height: 100%; } @media (prefers-reduced-motion: no-preference) { .department-detail-page__faculty-card:hover { border-color: rgba(12, 35, 64, 0.32); box-shadow: 0 12px 28px rgba(12, 35, 64, 0.10); transform: translateY(-2px); } } .department-detail-page__faculty-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary-mid) 0%, #1e5a8e 100%); color: #fff; flex: 0 0 auto; box-shadow: 0 4px 12px rgba(12, 35, 64, 0.18); } .department-detail-page__faculty-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .department-detail-page__faculty-name { margin: 0; font-family: var(--font-heading); font-size: 1rem; font-weight: 800; color: var(--color-dark-surface); letter-spacing: -0.005em; } .department-detail-page__faculty-cred { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: rgba(15, 23, 42, 0.7); } .department-detail-page__faculty-link { margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--text-sm); font-weight: 700; color: #b3261e; text-decoration: none; } .department-detail-page__faculty-link:hover { text-decoration: underline; } .department-detail-page__gallery { margin-top: var(--space-3); } .alumnae-page__intro { max-width: 42rem; } .alumnae-page__register-card { margin-top: var(--space-6); padding: var(--space-6); border-radius: 14px; border: 1px solid rgba(90, 60, 40, 0.15); background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 0 rgba(90, 60, 40, 0.06); } .alumnae-page__register-lead { margin: 0 0 var(--space-4); font-size: var(--text-md); color: rgba(15, 23, 42, 0.86); } .alumnae-page__video-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; max-width: 72rem; margin-inline: auto; } @media (min-width: 768px) { .alumnae-page__video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .alumnae-page__video-card { margin: 0; padding: 0; border: 1px solid rgba(12, 35, 64, 0.1); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgba(12, 35, 64, 0.04); } .alumnae-page__video-cap { padding: var(--space-3) var(--space-4); font-size: var(--text-base); font-weight: 700; color: var(--color-primary-mid); background: rgba(240, 246, 252, 0.9); border-bottom: 1px solid rgba(12, 35, 64, 0.08); } .alumnae-page__video-frame { position: relative; aspect-ratio: 16 / 10; background: #0f172a; } .alumnae-page__video { display: block; width: 100%; height: 100%; object-fit: contain; vertical-align: middle; } /* Scholarships / Endowment (submenu slug=scholarships) */ .scholarships-page__shell { max-width: 72rem; margin-inline: auto; padding-inline: var(--space-2); } .scholarships-page__intro-prose { max-width: 48rem; margin: 0 0 var(--space-6); } .scholarships-page__block { margin-top: var(--space-8); } .scholarships-page__block:first-of-type { margin-top: var(--space-6); } .scholarships-page__numbered-list { margin: var(--space-3) 0 0; padding-left: 1.35rem; font-size: var(--text-md); line-height: 1.65; color: rgba(15, 23, 42, 0.9); } .scholarships-page__numbered-list li { margin-bottom: var(--space-2); } .scholarships-page__numbered-list li:last-child { margin-bottom: 0; } .scholarships-page__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; } @media (min-width: 520px) { .scholarships-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .scholarships-page__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } } .scholarships-page__cell { margin: 0; } .scholarships-page__card { display: block; height: 100%; min-height: 3.5rem; padding: var(--space-4) var(--space-4); border-radius: 12px; border: 1px solid rgba(12, 35, 64, 0.12); background: #fff; box-shadow: 0 1px 0 rgba(12, 35, 64, 0.04); font-size: var(--text-md); font-weight: 600; line-height: 1.45; color: rgba(15, 23, 42, 0.9); text-wrap: pretty; } /* Scroll-driven entrance (toggled by JS; no motion if reduced-motion) */ @media (prefers-reduced-motion: no-preference) { .history-page .js-history-reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .history-page .js-history-reveal.is-visible { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .history-page .js-history-reveal { opacity: 1; transform: none; } } @media (max-width: 899px) { .submenu-page__intro.is-reverse .submenu-page__intro-copy, .submenu-page__intro.is-reverse .submenu-page__intro-visual { order: initial; } .submenu-page__intro-grid { gap: var(--space-4); } .submenu-page__intro-img { max-height: 360px; } .submenu-page .split { gap: var(--space-4); } } .split__badge { position: absolute; bottom: var(--space-3); right: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); display: flex; flex-direction: column; font-size: var(--text-base); } .split__badge strong { font-size: var(--text-xl); color: var(--color-primary); } .about-tabs__nav { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); } .about-tabs__btn { padding: var(--space-2) var(--space-3); font-weight: 600; font-size: var(--text-base); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .about-tabs__btn.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .about-tabs__panel[hidden] { display: none !important; } .about-tabs__panel.is-active { display: block; } .quote { margin: 0; padding-left: var(--space-3); border-left: 4px solid var(--color-accent); font-size: var(--text-lg); font-style: italic; color: var(--color-text); } .mission-list { margin: 0; padding-left: var(--space-4); color: var(--color-text-muted); } .mission-list li { margin-bottom: var(--space-2); } /* ----------------------------------------------------------------------------- Facilities ----------------------------------------------------------------------------- */ .fac-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; } @media (min-width: 520px) { .fac-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .fac-grid { grid-template-columns: repeat(4, 1fr); } } .fac-card { display: block; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .fac-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(12, 35, 64, 0.15); } .fac-card__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background: rgba(12, 35, 64, 0.06); color: var(--color-primary); margin-bottom: var(--space-3); } .fac-card__title { font-size: var(--text-lg); margin-bottom: var(--space-1); color: var(--color-primary); } .fac-card__text { margin: 0; font-size: var(--text-base); line-height: var(--line-height-normal); color: var(--color-text-muted); } /* ----------------------------------------------------------------------------- Carousel (rank holders) ----------------------------------------------------------------------------- */ .carousel { position: relative; display: flex; align-items: center; gap: var(--space-2); } .carousel__viewport { overflow: hidden; flex: 1; margin-inline: var(--space-1); } .carousel__track { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: var(--space-2) 0; transition: transform 0.4s ease; } .rank-card { flex: 0 0 min(260px, 85vw); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; backdrop-filter: blur(8px); } .rank-card__img { width: 96px; height: 96px; margin: 0 auto var(--space-3); border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.15); object-fit: cover; } .rank-card__name { font-size: var(--text-base); color: #fff; margin-bottom: var(--space-1); } .rank-card__course { font-size: var(--text-base); color: rgba(255, 255, 255, 0.75); margin: 0 0 var(--space-2); } .rank-card__badge { display: inline-block; padding: 0.25rem 0.75rem; font-size: var(--text-xs); font-weight: 700; border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-dark); } .carousel__nav { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-full); border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.1); color: #fff; position: relative; } .carousel__nav:hover { background: rgba(255, 255, 255, 0.2); } .carousel__nav--prev::after { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(2px, -2px); } .carousel__nav--next::after { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg) translate(-2px, 2px); } .link-light { color: var(--color-accent-soft); } /* ----------------------------------------------------------------------------- News ----------------------------------------------------------------------------- */ .news-grid { display: grid; gap: var(--space-4); list-style: none; margin: 0; padding: 0; } @media (min-width: 900px) { .news-grid { grid-template-columns: repeat(3, 1fr); } } .news-card { background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); height: 100%; display: flex; flex-direction: column; } .news-card__media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--color-bg); } .news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .news-card:hover .news-card__media img { transform: scale(1.03); } .news-card__body { padding: var(--space-3); flex: 1; display: flex; flex-direction: column; } .news-card__date { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-accent); } .news-card__tag { display: inline-block; margin-bottom: var(--space-1); padding: 0.15em 0.5em; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-primary); background: rgba(12, 35, 64, 0.08); border-radius: var(--radius-sm); } .news-grid--stream { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .news-card__title { font-size: var(--text-lg); margin: var(--space-2) 0; color: var(--color-primary); } .news-card__excerpt { flex: 1; margin: 0 0 var(--space-3); font-size: var(--text-base); color: var(--color-text-muted); } .news-card__link { font-weight: 600; font-size: var(--text-base); text-decoration: none; color: var(--color-primary); align-self: flex-start; } /* ----------------------------------------------------------------------------- Masonry gallery ----------------------------------------------------------------------------- */ .masonry { display: grid; gap: var(--space-3); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; } @media (min-width: 600px) { .masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .masonry li { break-inside: avoid; margin: 0; min-width: 0; aspect-ratio: 4 / 3; } .masonry__item { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--radius-md); overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); } .masonry__item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* ----------------------------------------------------------------------------- Gallery page — rich editorial layout ----------------------------------------------------------------------------- */ .gallery-page { background: linear-gradient(180deg, var(--color-bg) 0%, #eef1f6 48%, var(--color-bg) 100%); } .gallery-page__hero { --gh-accent: var(--color-accent-soft); --gh-accent-deep: var(--color-accent); --gh-accent-glow: rgba(212, 168, 75, 0.35); --gh-accent-ring: rgba(212, 168, 75, 0.55); --gh-accent-wash: rgba(212, 168, 75, 0.12); position: relative; padding: var(--space-8) 0 var(--space-10); color: #f4f6fa; overflow: hidden; } .gallery-page__hero-bg { position: absolute; inset: 0; background: radial-gradient(115% 75% at 100% 0%, rgba(212, 168, 75, 0.42) 0%, transparent 52%), radial-gradient(90% 70% at 0% 100%, rgba(26, 61, 102, 0.5) 0%, transparent 50%), linear-gradient(160deg, var(--color-dark) 0%, var(--color-primary) 45%, var(--color-dark-surface) 100%); } .gallery-page__hero-bg::after { content: ""; position: absolute; inset: 0; opacity: 0.06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23fff' stroke-width='0.5'%3E%3Cpath d='M0 40h80M40 0v80'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .gallery-page__hero-inner { position: relative; z-index: 1; display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 900px) { .gallery-page__hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr); gap: var(--space-8); } } .gallery-page__hero-copy { max-width: 38rem; } .gallery-page__hero-stats { width: 100%; } .gallery-page__eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236, 214, 160, 0.88); } .gallery-page__hero-title { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.28), 0 0 48px rgba(212, 168, 75, 0.12); } .gallery-page__hero-lead { margin: 0 0 var(--space-5); max-width: 36rem; font-size: var(--text-lg); line-height: 1.65; color: rgba(250, 247, 238, 0.9); } .gallery-page__stats { display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--space-3); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: no-preference) { .gallery-page__stats .gallery-page__stat { animation: gallery-hero-stat-in 0.55s cubic-bezier(0.33, 1, 0.68, 1) both; } .gallery-page__stats .gallery-page__stat:nth-child(1) { animation-delay: 0.04s; } .gallery-page__stats .gallery-page__stat:nth-child(2) { animation-delay: 0.1s; } .gallery-page__stats .gallery-page__stat:nth-child(3) { animation-delay: 0.16s; } } @keyframes gallery-hero-stat-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .gallery-page__stat { flex: 1 1 0; min-width: 0; min-height: 0; padding: var(--space-3) var(--space-3); border-radius: var(--radius-md); text-align: center; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(212, 168, 75, 0.08); backdrop-filter: blur(10px); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; } .gallery-page__stat-num { transition: color 0.2s ease, text-shadow 0.2s ease; } .gallery-page__stat-label { transition: color 0.2s ease; } .gallery-page__stat--action { padding: 0; background: transparent; border-color: transparent; backdrop-filter: none; justify-content: flex-start; } .gallery-page__stat-btn { flex: 1 1 auto; align-self: stretch; width: 100%; min-height: 0; box-sizing: border-box; margin: 0; border-radius: var(--radius-md); text-align: center; justify-content: center; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; text-decoration: none; transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease, box-shadow 0.22s ease; } .gallery-page__stat-btn:not(.btn--secondary) { background: linear-gradient(145deg, var(--gh-accent) 0%, var(--gh-accent-deep) 100%); color: var(--color-dark); border-color: rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0 0 1px rgba(212, 168, 75, 0.25); } .gallery-page__stat-btn:not(.btn--secondary):active { transform: translateY(0); filter: brightness(0.98); } .gallery-page__stat-btn:not(.btn--secondary):focus-visible { outline: 2px solid var(--gh-accent); outline-offset: 3px; } .gallery-page__stat-num { display: block; font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 600; line-height: 1; color: var(--gh-accent); } .gallery-page__stat-label { display: block; margin-top: var(--space-1); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244, 246, 250, 0.65); } @media (prefers-reduced-motion: reduce) { .gallery-page__stats .gallery-page__stat { animation: none; } .gallery-page__stat { transition: none; } .gallery-page__stat-num, .gallery-page__stat-label { transition: none; } .gallery-page__stat-btn { transition: none; } .gallery-page__hero-mosaic { animation: none; } .gallery-page__hero-cell, .gallery-page__hero-cell img { transition: none; } } .gallery-page__hero-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 5rem); gap: 11px; max-width: 420px; margin-inline: auto; } @media (prefers-reduced-motion: no-preference) { .gallery-page__hero-mosaic { animation: gallery-hero-mosaic-in 0.7s cubic-bezier(0.33, 1, 0.68, 1) 0.12s both; } } @keyframes gallery-hero-mosaic-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (min-width: 900px) { .gallery-page__hero-mosaic { grid-auto-rows: minmax(0, 5.75rem); margin-inline: 0; max-width: none; } } .gallery-page__hero-cell { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease, border-color 0.28s ease; } .gallery-page__hero-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .gallery-page__hero-cell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, transparent 40%, rgba(10, 26, 46, 0.35) 100%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } @media (hover: hover) { .gallery-page__stat:not(.gallery-page__stat--action):hover { transform: translateY(-3px); border-color: rgba(212, 168, 75, 0.45); background: rgba(255, 255, 255, 0.11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(212, 168, 75, 0.18), 0 14px 34px rgba(0, 0, 0, 0.38), 0 0 28px var(--gh-accent-wash); } .gallery-page__stat:not(.gallery-page__stat--action):hover .gallery-page__stat-num { color: #f0d78c; text-shadow: 0 0 22px var(--gh-accent-glow); } .gallery-page__stat:not(.gallery-page__stat--action):hover .gallery-page__stat-label { color: rgba(255, 250, 235, 0.88); } .gallery-page__stat-btn:not(.btn--secondary):hover { transform: translateY(-3px); filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 0 0 2px var(--gh-accent-ring), 0 16px 36px rgba(0, 0, 0, 0.42), 0 0 32px var(--gh-accent-wash); } .gallery-page__hero-cell:hover { transform: translateY(-3px); border-color: rgba(212, 168, 75, 0.4); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(212, 168, 75, 0.2), 0 0 28px var(--gh-accent-wash); } .gallery-page__hero-cell:hover img { transform: scale(1.06); } .gallery-page__hero-cell:hover::after { opacity: 1; } } .gallery-page__hero-cell--lead { grid-column: span 2; grid-row: span 2; } .gallery-page__intro--compact .section__head { margin-bottom: var(--space-4); } .gallery-page__intro-head { text-align: center; max-width: 40rem; margin-inline: auto; } .gallery-page__intro-desc { margin-inline: auto; } .gallery-page__meta { display: block; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); } .gallery-page__official { display: inline-block; margin-top: var(--space-2); } .gallery-page__counts { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); } .gallery-page__code { font-size: 0.9em; padding: 0.1em 0.35em; border-radius: var(--radius-sm); background: var(--color-surface-elevated); } .gallery-page__split { display: grid; gap: var(--space-5); margin-top: var(--space-6); align-items: start; } @media (min-width: 960px) { .gallery-page__split { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--space-7); } } .gallery-page__toc-wrap { position: relative; } @media (min-width: 960px) { .gallery-page__toc-wrap { position: sticky; top: calc(var(--header-h) + var(--space-3)); align-self: start; max-height: calc(100vh - var(--header-h) - var(--space-6)); } } .gallery-page__toc { position: relative; z-index: 1; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--gradient-page-hero-wash); box-shadow: var(--shadow-md); border: 1px solid rgba(12, 35, 64, 0.08); } @media (min-width: 960px) { .gallery-page__toc { max-height: inherit; overflow: auto; } } .gallery-page__toc-title { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; color: var(--color-primary); } .gallery-page__filter-label { display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .gallery-page__filter { width: 100%; margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3); font-family: var(--font-ui); font-size: var(--text-base); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: inset 0 1px 2px rgba(12, 35, 64, 0.04); } .gallery-page__filter:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; border-color: var(--color-primary); } .gallery-page__filter-empty { margin: var(--space-3) 0 0; font-size: var(--text-base); color: var(--color-text-muted); } .gallery-page__toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .gallery-page__toc-item--hidden { display: none; } .gallery-page__toc-link { display: block; padding: var(--space-2) var(--space-2); margin: 0 calc(var(--space-2) * -1); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.45; color: var(--color-text); text-decoration: none; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .gallery-page__toc-link:hover { background: rgba(12, 35, 64, 0.06); color: var(--color-primary); } .gallery-page__toc-id { flex: 0 0 auto; min-width: 2.25rem; font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--text-xs); color: var(--color-accent); } .gallery-page__toc-text { flex: 1 1 auto; min-width: 0; opacity: 0.92; } .gallery-page__events { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; } .gallery-page__event { scroll-margin-top: calc(var(--header-h) + var(--space-3)); } @media (prefers-reduced-motion: no-preference) { .gallery-page__event { animation: gallery-page-fade-up 0.65s ease backwards; animation-delay: calc(var(--gallery-i, 0) * 0.04s); } } @keyframes gallery-page-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .gallery-page__event--hidden { display: none !important; } .gallery-page__event-card { position: relative; padding: var(--space-5) var(--space-5) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); border: 1px solid rgba(12, 35, 64, 0.06); overflow: hidden; } .gallery-page__event-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-accent) 50%, var(--color-primary) 100%); } .gallery-page__event-head { margin-bottom: var(--space-4); padding-left: var(--space-2); } .gallery-page__event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .gallery-page__event-id { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .gallery-page__event-badge { display: inline-block; padding: 0.2rem 0.55rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-full); background: rgba(12, 35, 64, 0.06); color: var(--color-primary); } .gallery-page__event-badge--pdf { background: rgba(184, 134, 11, 0.15); color: #7a5e0a; } .gallery-page__event-title { margin: 0; font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 600; line-height: 1.45; color: var(--color-primary); } .gallery-page__event-grid { list-style: none; margin: 0; padding: 0 0 0 var(--space-2); display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 640px) { .gallery-page__event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .gallery-page__event-grid--dense { gap: var(--space-2); } .gallery-page__grid-cell { aspect-ratio: 4 / 3; min-width: 0; } .gallery-page__grid-cell .gallery-page__tile { width: 100%; height: 100%; min-height: 0; } @media (min-width: 640px) { .gallery-page__event-grid--feature .gallery-page__grid-cell--lead { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; } } @media (max-width: 639px) { .gallery-page__event-grid--feature .gallery-page__grid-cell--lead { grid-column: 1 / -1; aspect-ratio: 16 / 9; } } .gallery-page .masonry__item.gallery-page__tile { position: relative; height: 100%; border-radius: var(--radius-md); } .gallery-page__tile-in { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } .gallery-page .gallery-page__tile-in img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .gallery-page__tile-hint { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); font-size: var(--text-base); font-weight: 600; font-family: var(--font-ui); color: #fff; background: linear-gradient(transparent, rgba(10, 26, 46, 0.88)); opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } .gallery-page__tile-icon { flex-shrink: 0; opacity: 0.95; } .gallery-page__tile:hover .gallery-page__tile-hint, .gallery-page__tile:focus-visible .gallery-page__tile-hint { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: no-preference) { .gallery-page__tile:hover .gallery-page__tile-in img, .gallery-page__tile:focus-visible .gallery-page__tile-in img { transform: scale(1.06); } } .gallery-page__event-pdfs { margin-top: var(--space-4); margin-left: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(12, 35, 64, 0.04) 0%, rgba(184, 134, 11, 0.06) 100%); border: 1px solid rgba(12, 35, 64, 0.08); } .gallery-page__event-pdfs-title { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary); } .gallery-page__pdf-links { margin: 0; padding-left: 1.25rem; } .gallery-page__pdf-links a { font-weight: 500; } .gallery-page__insights { background: var(--color-surface); border-block: 1px solid var(--color-border); } .gallery-page__insight-grid { display: grid; gap: var(--space-4); margin-top: var(--space-2); } @media (min-width: 768px) { .gallery-page__insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } } .gallery-page__insight { position: relative; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-bg); border: 1px solid var(--color-border); transition: box-shadow 0.25s ease, transform 0.25s ease; } .gallery-page__insight:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .gallery-page__insight:hover { transform: none; } .gallery-page__event { animation: none; } } .gallery-page__insight-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-3); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--color-accent); border: 2px solid rgba(184, 134, 11, 0.45); border-radius: var(--radius-sm); } .gallery-page__insight-title { margin: 0 0 var(--space-2); font-size: var(--text-lg); color: var(--color-primary); } .gallery-page__insight-text { margin: 0; font-size: var(--text-base); line-height: 1.65; color: var(--color-text-muted); } .gallery-page__cta { position: relative; } .gallery-page__cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(184, 134, 11, 0.12) 0%, transparent 40%, transparent 60%, rgba(255, 255, 255, 0.06) 100%); pointer-events: none; } .masonry__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ----------------------------------------------------------------------------- Testimonials ----------------------------------------------------------------------------- */ .testimonial-slider { max-width: 720px; margin-inline: auto; text-align: center; } .testimonial-slider__track { list-style: none; margin: 0 0 var(--space-4); padding: 0; min-height: 160px; } .testimonial-card { display: none; padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); } .testimonial-card.is-active { display: block; animation: fadeIn 0.4s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .testimonial-card__quote { margin: 0 0 var(--space-3); font-size: var(--text-xl); line-height: 1.45; color: var(--color-text); } .testimonial-card__meta { font-size: var(--text-base); color: var(--color-text-muted); } .testimonial-slider__dots { display: flex; justify-content: center; gap: var(--space-2); } .testimonial-slider__dots button { width: 10px; height: 10px; border-radius: var(--radius-full); border: 0; background: var(--color-border); padding: 0; } .testimonial-slider__dots button.is-active { background: var(--color-primary); } /* ----------------------------------------------------------------------------- CTA band ----------------------------------------------------------------------------- */ .cta-band { background: var(--color-primary); color: #fff; padding-block: var(--space-8); max-width: 100%; overflow-x: hidden; } .cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); } .cta-band__title { font-size: var(--text-3xl); color: #fff; margin-bottom: var(--space-2); } .cta-band__text { margin: 0; max-width: 560px; color: rgba(255, 255, 255, 0.88); } /* ----------------------------------------------------------------------------- Footer ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Contact page (rich layout — map + icon tiles + quick actions) ----------------------------------------------------------------------------- */ .contact-page__hero--rich { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-8); background: var(--gradient-page-hero-wash); border-bottom: 1px solid var(--color-border); } .contact-page__hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 120% 80% at 100% 0%, rgba(12, 35, 64, 0.1) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 0% 100%, rgba(184, 134, 11, 0.06) 0%, transparent 50%); opacity: 1; } .contact-page__hero-inner { position: relative; z-index: 1; display: grid; gap: var(--space-6); } .contact-page__hero-grid { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 900px) { .contact-page__hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-8); } } .contact-page__hero-copy { min-width: 0; max-width: 100%; width: 100%; } .contact-page__title { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; color: var(--color-primary-mid); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .contact-page__lead { margin: 0 0 var(--space-3); max-width: 40rem; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; font-size: clamp(1.0625rem, 0.9rem + 0.35vw, 1.25rem); line-height: 1.65; } .contact-page__intro { margin: 0 0 var(--space-4); font-size: var(--text-md); line-height: 1.7; color: rgba(15, 23, 42, 0.82); text-wrap: pretty; } .contact-page__highlights { list-style: none; margin: 0; padding: 0; align-self: stretch; width: 100%; display: grid; gap: var(--space-2); grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 899px) { .contact-page__highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .contact-page__highlights { grid-template-columns: 1fr; } } .contact-page__highlight { display: flex; flex-direction: column; gap: 0.2rem; min-height: 4.5rem; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid rgba(12, 35, 64, 0.12); border-left: 3px solid var(--color-primary-mid); background: rgba(255, 255, 255, 0.88); box-shadow: var(--shadow-sm); } .contact-page__highlight-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); } .contact-page__highlight-value { font-family: var(--font-ui); font-size: var(--text-base); font-weight: 700; line-height: 1.45; color: var(--color-primary-mid); text-wrap: pretty; } .contact-page__hero-figure { margin: 0; width: 100%; } .contact-page__hero-frame { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.65); box-shadow: var(--shadow-lg); background: linear-gradient(160deg, rgba(12, 35, 64, 0.1), rgba(255, 255, 255, 0.45)); padding: var(--space-2); } .contact-page__hero-frame--emblem { padding: var(--space-4); background: #fff; } .contact-page__hero-img { display: block; width: 100%; height: auto; max-height: min(420px, 52vh); object-fit: cover; object-position: center; border-radius: calc(var(--radius-lg) - 6px); } .contact-page__hero-img--contain { width: auto; max-width: 100%; object-fit: contain; padding: var(--space-2); box-sizing: border-box; } .contact-page__hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 280px; width: 100%; padding: var(--space-6) var(--space-4); border-radius: calc(var(--radius-lg) - 6px); background: linear-gradient(145deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.88) 55%, rgba(184, 134, 11, 0.35) 100%); text-align: center; } .contact-page__hero-placeholder-mark { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 800; letter-spacing: 0.08em; color: #fff; } .contact-page__hero-placeholder-text { max-width: 24ch; font-size: var(--text-base); font-weight: 600; line-height: 1.5; color: rgba(255, 255, 255, 0.9); } .contact-page__quick-panel { padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid rgba(12, 35, 64, 0.12); background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-md); } .contact-page__quick-heading { margin: 0 0 var(--space-4); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--color-primary-mid); } .contact-page__quick { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); } .contact-page__quick-link { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 5.25rem; padding: var(--space-4); text-align: left; text-decoration: none; color: var(--color-text); background: #fff; border: 1px solid rgba(12, 35, 64, 0.12); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .contact-page__quick-link:hover { border-color: rgba(12, 35, 64, 0.28); background: rgba(12, 35, 64, 0.03); box-shadow: var(--shadow-md); transform: translateY(-2px); } .contact-page__quick-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .contact-page__quick-link--button { cursor: pointer; font: inherit; width: 100%; box-sizing: border-box; } .contact-page__quick-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); color: var(--color-primary-mid); background: rgba(12, 35, 64, 0.1); } .contact-page__quick-text { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 auto; min-width: 0; } .contact-page__quick-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .contact-page__quick-value { font-family: var(--font-ui); font-size: var(--text-base); font-weight: 700; line-height: 1.45; color: var(--color-primary-mid); } .contact-page__quick-value--tel, .contact-page__contact-tel { white-space: nowrap; } .contact-page__quick-value--email, .contact-page__contact-email { overflow-wrap: normal; word-break: normal; text-wrap: pretty; } @media (max-width: 899px) { .contact-page__hero-grid { gap: var(--space-4); } .contact-page__hero-img { max-height: 360px; } } .contact-page__body .contact-page__section-title { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-primary); text-align: center; margin: 0 0 var(--space-2); } .contact-page__section-lead { margin: 0 auto var(--space-7); max-width: 36rem; text-align: center; font-size: var(--text-md); color: var(--color-text-muted); line-height: 1.6; } .contact-page__shell { position: relative; padding: var(--space-5) var(--space-4) var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 4px 6px -1px rgba(12, 35, 64, 0.07), 0 12px 24px -8px rgba(12, 35, 64, 0.12); overflow: hidden; } @media (min-width: 768px) { .contact-page__shell { padding: var(--space-6) var(--space-7) var(--space-7); } } .contact-page__shell-accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 55%, var(--color-accent-soft) 100%); } .contact-page__grid { display: grid; gap: var(--space-6); align-items: start; } @media (min-width: 900px) { .contact-page__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-7); align-items: stretch; } } .contact-page__map-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .contact-page__map-title { margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); } .contact-page__map-link { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600; color: var(--color-accent); text-decoration: none; padding: 0.35rem 0.65rem; border-radius: var(--radius-sm); border: 1px solid rgba(184, 134, 11, 0.35); background: rgba(184, 134, 11, 0.08); transition: background var(--transition), color var(--transition); } .contact-page__map-link:hover { background: rgba(184, 134, 11, 0.16); color: var(--color-primary); } .contact-page__map-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .contact-page__map-frame { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); background: var(--color-surface-elevated); aspect-ratio: 4 / 3; } .contact-page__map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .contact-page__aside { display: flex; flex-direction: column; gap: var(--space-3); } .contact-page__tile { display: flex; gap: var(--space-3); margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: linear-gradient(165deg, #fff 0%, var(--color-bg) 100%); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, border-color 0.2s ease; } .contact-page__tile:hover { border-color: rgba(12, 35, 64, 0.18); box-shadow: var(--shadow-md); } .contact-page__tile-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); color: var(--color-primary); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 2px 4px rgba(12, 35, 64, 0.06); } .contact-page__tile-body { min-width: 0; } .contact-page__tile-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-md); font-weight: 700; color: var(--color-primary); } .contact-page__tile-text { margin: 0; font-size: var(--text-md); line-height: 1.65; color: var(--color-text); } .contact-page__tile-text a { font-weight: 600; } .contact-page__social--rich { margin-top: var(--space-1); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-primary); color: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--shadow-md); } .contact-page__social-heading { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-md); font-weight: 700; color: #fff; } .contact-page__social-list--icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); } .contact-page__social-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.55rem 1rem; font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600; text-decoration: none; border-radius: var(--radius-md); border: 1px solid transparent; transition: transform 0.15s ease, filter 0.15s ease; } .contact-page__social-btn:hover { transform: translateY(-1px); filter: brightness(1.05); } .contact-page__social-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .contact-page__social-btn--fb { color: #fff; background: #1877f2; border-color: rgba(255, 255, 255, 0.2); } .contact-page__social-btn--ig { color: #fff; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-color: rgba(255, 255, 255, 0.2); } .site-footer { position: relative; flex-shrink: 0; margin-top: auto; background: linear-gradient(165deg, var(--color-dark) 0%, var(--color-dark) 42%, var(--color-primary) 100%); color: rgba(255, 255, 255, 0.88); padding-top: 0; max-width: 100%; overflow: clip; isolation: isolate; contain: layout paint; } .site-footer__accent { height: 4px; background: linear-gradient(90deg, var(--color-emerald-bright), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-emerald-bright)); opacity: 0.92; } .site-footer__glow { position: absolute; width: min(42vw, 28rem); height: min(42vw, 28rem); border-radius: 50%; pointer-events: none; opacity: 0.28; } .site-footer__glow--left { top: 8%; left: -8%; background: radial-gradient(circle, rgba(26, 107, 82, 0.42) 0%, rgba(26, 107, 82, 0) 68%); } .site-footer__glow--right { top: 20%; right: -6%; background: radial-gradient(circle, rgba(201, 162, 39, 0.34) 0%, rgba(201, 162, 39, 0) 68%); } .site-footer__upper { position: relative; z-index: 1; padding-block: var(--space-8) var(--space-6); } .site-footer__upper > .container, .site-footer__bottom > .container { width: min(92%, 76rem); max-width: 76rem; margin-inline: auto; } .site-footer__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-bottom: var(--space-6); } .site-footer__col { min-width: 0; } @media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) clamp(1.5rem, 3vw, 2.5rem); } .site-footer__col--brand { grid-column: 1 / -1; } .site-footer__col--links { grid-column: 1 / -1; } .site-footer__links-cols { max-width: 36rem; } } @media (min-width: 1024px) { .site-footer__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 3.5vw, 3.75rem); align-items: start; } .site-footer__col--brand { grid-column: auto; padding-right: 0.5rem; } .site-footer__col--links { grid-column: auto; justify-self: center; width: 100%; max-width: 22rem; } .site-footer__col--contact { justify-self: end; width: 100%; max-width: 24rem; } } .site-footer a { color: rgba(255, 255, 255, 0.92); text-decoration: none; transition: color 0.2s ease; } .site-footer a:hover { color: var(--color-gold-light); } .site-footer a.site-footer__credit-link { color: var(--color-gold-light); font-weight: 600; } .site-footer a.site-footer__credit-link:hover { color: #fff; } .site-footer__brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); text-decoration: none; color: inherit; } .site-footer__brand:hover { color: inherit; } .site-footer__brand-logo { flex-shrink: 0; width: 4rem; height: 4rem; object-fit: contain; padding: 0.25rem; background: #fff; border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .site-footer__brand-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .site-footer__brand-name { font-family: var(--font-heading); font-size: clamp(1rem, 2vw, 1.125rem); font-weight: 800; line-height: 1.2; color: #fff; letter-spacing: -0.01em; } .site-footer__brand-place { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gold-light); } .site-footer__about { margin: 0 0 var(--space-4); max-width: 38ch; font-size: var(--text-base); line-height: 1.65; color: rgba(255, 255, 255, 0.78); } .site-footer__heading { position: relative; display: flex; align-items: center; min-height: 3rem; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-gold-light); margin: 0 0 var(--space-3); padding-bottom: var(--space-2); } @media (min-width: 1024px) { .site-footer__heading { min-height: 4rem; } } .site-footer__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--color-gold), var(--color-emerald-bright)); } .site-footer__col--links { min-width: 0; } .site-footer__links-cols { display: grid; grid-template-columns: 1fr; gap: 0.35rem 0; } @media (min-width: 480px) { .site-footer__links-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem clamp(1.25rem, 3vw, 2rem); align-items: start; } } .site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; } .site-footer__links li { display: block; max-width: 100%; } .site-footer__links a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; font-size: var(--text-sm); font-weight: 500; line-height: 1.35; text-decoration: none; color: rgba(255, 255, 255, 0.85); transition: color 0.2s ease, padding-left 0.2s ease; } .site-footer__links a::before { content: ""; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: linear-gradient(135deg, var(--color-gold), var(--color-emerald-bright)); opacity: 0.7; flex-shrink: 0; transition: opacity 0.2s ease, transform 0.2s ease; } .site-footer__links a:hover { color: #fff; padding-left: 0.2rem; } .site-footer__links a:hover::before { opacity: 1; transform: scale(1.15); } .site-footer__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; } .site-footer__badge { display: inline-flex; align-items: center; padding: 0.28rem 0.65rem; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-full); line-height: 1.3; } .site-footer__badge--gold { color: #3d2e08; background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold)); border: 1px solid rgba(255, 255, 255, 0.25); } .site-footer__badge--emerald { color: #e8f5f0; background: linear-gradient(135deg, rgba(26, 107, 82, 0.9), rgba(45, 157, 114, 0.85)); border: 1px solid rgba(255, 255, 255, 0.2); } .site-footer__contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .site-footer__contact-item { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start; font-size: var(--text-sm); line-height: 1.55; color: rgba(255, 255, 255, 0.82); } .site-footer__contact-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin-top: 0.1rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(240, 215, 140, 0.2); color: var(--color-gold-light); } .site-footer__contact-item a { text-decoration: underline; text-decoration-color: rgba(240, 215, 140, 0.35); text-underline-offset: 3px; } .site-footer__contact-item a:hover { text-decoration-color: currentColor; } .site-footer__map-card { padding: var(--space-4); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(240, 215, 140, 0.18); border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .site-footer__map-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .site-footer__map-title { margin: 0 0 0.25rem; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: #fff; } .site-footer__map-lead { margin: 0; font-size: var(--text-base); color: rgba(255, 255, 255, 0.72); max-width: 36ch; } .site-footer__map-directions { flex-shrink: 0; white-space: nowrap; } .site-footer__map-frame { position: relative; height: 320px; max-height: 320px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); line-height: 0; } .site-footer__map-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); border-radius: inherit; } .site-footer__map-frame iframe { display: block; width: 100%; max-width: 100%; height: 320px; max-height: 320px; min-height: 0; border: 0; filter: saturate(0.85) contrast(1.04); } @media (min-width: 768px) { .site-footer__map-frame iframe { height: 320px; max-height: 320px; } } .site-footer__bottom { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.18); padding-block: var(--space-4); font-size: var(--text-base); } .site-footer__bottom-inner { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; } @media (min-width: 768px) { .site-footer__bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; } } .site-footer__copyright, .site-footer__credit { margin: 0; color: rgba(255, 255, 255, 0.65); font-size: var(--text-base); } /* Legacy selectors kept for other pages */ .site-footer__social { display: flex; gap: var(--space-2); list-style: none; margin: var(--space-2) 0 0; padding: 0; } .site-footer__map iframe { display: block; width: 100%; max-width: 100%; } /* ----------------------------------------------------------------------------- Sticky apply & WhatsApp ----------------------------------------------------------------------------- */ .sticky-apply { position: fixed; right: max(var(--space-3), env(safe-area-inset-right, 0px)); bottom: calc(56px + var(--space-3) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-fab); box-shadow: var(--shadow-lg); border: 0; } .whatsapp-fab { position: fixed; right: max(var(--space-3), env(safe-area-inset-right, 0px)); bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px)); z-index: var(--z-fab); width: 56px; height: 56px; border-radius: var(--radius-full); background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); } .whatsapp-fab:hover { transform: scale(1.05); color: #fff; box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4); } /* ----------------------------------------------------------------------------- Modal & form ----------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-3); } .modal[hidden] { display: none !important; } .modal__backdrop { position: absolute; inset: 0; background: rgba(10, 26, 46, 0.55); backdrop-filter: blur(4px); } .modal__panel { position: relative; width: min(100%, 440px); max-height: min(calc(100vh - var(--space-6)), calc(100dvh - var(--space-6))); overflow-y: auto; padding: var(--space-5); border-radius: var(--radius-lg); z-index: 1; background: rgba(255, 255, 255, 0.95); } .modal__close { position: absolute; top: var(--space-2); right: var(--space-2); width: 40px; height: 40px; border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--color-text-muted); border-radius: var(--radius-sm); } .modal__close:hover { background: var(--color-bg); color: var(--color-text); } .modal__title { margin-bottom: var(--space-2); color: var(--color-primary); } .modal__lead { margin: 0 0 var(--space-4); font-size: var(--text-base); color: var(--color-text-muted); } .modal--brochure { padding: var(--space-2); } .modal__panel--brochure { width: min(100%, 720px); padding: var(--space-4) var(--space-4) var(--space-5); } .modal__brochure-figure { margin: 0 0 var(--space-4); } .modal__brochure-img { display: block; width: 100%; height: auto; max-height: min(70vh, 640px); object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 8px 28px rgba(10, 26, 46, 0.12); } .modal__brochure-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; } @media (max-width: 479px) { .modal__brochure-actions .btn { flex: 1 1 100%; } } .form__row { margin-bottom: var(--space-3); } .form__label { display: block; font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-1); color: var(--color-text); } .form__input { width: 100%; padding: 0.625rem 0.75rem; font-size: var(--text-base); font-family: inherit; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); } .form__input:focus { outline: 2px solid rgba(12, 35, 64, 0.25); outline-offset: 2px; } .form__textarea { resize: vertical; min-height: 80px; } /* ----------------------------------------------------------------------------- Lightbox ----------------------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 250; background: rgba(10, 26, 46, 0.92); display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .lightbox[hidden] { display: none !important; } .lightbox__close { position: fixed; top: var(--space-3); right: var(--space-3); width: 48px; height: 48px; border: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.75rem; cursor: pointer; } .lightbox__figure { margin: 0; width: auto; max-width: calc(100vw - 5rem); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } .lightbox__img { display: block; width: auto; height: auto; max-width: calc(100vw - 5rem); max-height: calc(100vh - 7rem); margin: 0; border: 0; border-radius: var(--radius-md); object-fit: contain; object-position: center; image-orientation: from-image; background: transparent; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } .lightbox__caption { margin-top: var(--space-3); max-width: calc(100vw - 5rem); color: rgba(255, 255, 255, 0.85); font-size: var(--text-base); line-height: 1.4; pointer-events: auto; } .lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; z-index: 1; } .lightbox__nav:hover, .lightbox__nav:focus-visible { background: rgba(255, 255, 255, 0.28); } .lightbox__nav--prev { left: var(--space-3); } .lightbox__nav--next { right: var(--space-3); } .placement-gallery { margin-top: var(--space-8); } .placement-gallery__album-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); list-style: none; margin: var(--space-5) 0 var(--space-6); padding: 0; } .placement-gallery__album-btn { display: flex; flex-direction: column; width: 100%; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .placement-gallery__album-btn:hover, .placement-gallery__album-btn:focus-visible { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .placement-gallery__album-btn.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(26, 86, 166, 0.18); } .placement-gallery__album-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-muted); } .placement-gallery__album-thumb img { width: 100%; height: 100%; object-fit: cover; } .placement-gallery__album-copy { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); } .placement-gallery__album-name { font-weight: 700; font-size: var(--text-base); } .placement-gallery__album-count { font-size: var(--text-base); color: var(--color-text-muted); } .placement-gallery__panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .placement-gallery__back { border: 0; background: none; color: var(--color-primary); font-weight: 600; cursor: pointer; padding: 0; } .placement-gallery__back:hover, .placement-gallery__back:focus-visible { text-decoration: underline; } .placement-gallery__panel-title { margin: 0; font-size: var(--text-lg); } .placement-gallery__grid { margin-top: 0; } .placement-gallery__grid .library-page__gallery-item, .placement-gallery__grid .library-page__gallery-figure, .placement-gallery__grid .library-page__gallery-frame { height: 100%; } .placement-gallery__grid .library-page__gallery-frame { aspect-ratio: 4 / 3; } .placement-gallery__grid .library-page__gallery-img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; background: var(--color-surface-elevated); } /* Placement Cell — layout, year tabs, gallery cards */ .placement-page .library-page__panel { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .placement-page .iqac-page__pane { scroll-margin-top: calc(var(--header-h) + var(--space-4)); } .placement-page__pane-head { margin-bottom: var(--space-5); padding: var(--space-5); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 246, 252, 0.98) 100%); border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: 0 10px 32px rgba(12, 35, 64, 0.06); } .placement-page__pane-title { margin: 0; padding-left: var(--space-3); border-left: 4px solid var(--color-accent); line-height: 1.2; } .placement-page__pane-lead { margin: var(--space-3) 0 0; padding-left: calc(var(--space-3) + 4px); max-width: 42rem; font-size: var(--text-md); line-height: 1.6; color: rgba(15, 23, 42, 0.78); } .placement-page__prose { max-width: none; } .placement-page .library-page__toc-link { font-size: var(--text-base); line-height: 1.35; } .placement-page .iqac-page__toc-link--active { background: var(--color-primary); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .placement-page .iqac-page__toc-link--active:hover { background: #0f3050; color: #fff; } .placement-page__subhead { margin: var(--space-5) 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-primary); } .placement-page__year-shell { margin-top: 0; } .placement-page__year-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); padding: var(--space-3); border-radius: var(--radius-md); background: rgba(12, 35, 64, 0.04); border: 1px solid rgba(12, 35, 64, 0.08); } .placement-page__year-tab { flex: 0 0 auto; padding: 0.5rem 1rem; border-radius: var(--radius-full); border: 1px solid rgba(12, 35, 64, 0.2); background: #fff; color: var(--color-primary); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; line-height: 1.25; white-space: nowrap; cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } .placement-page__year-tab:hover { border-color: rgba(12, 35, 64, 0.35); box-shadow: var(--shadow-sm); } .placement-page__year-tab.is-active, .placement-page__year-tab[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.28); } .placement-page__year-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .placement-page__year-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: rgba(184, 134, 11, 0.08); border: 1px solid rgba(184, 134, 11, 0.22); } .placement-page__year-meta-label { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #7a5e0a; } .placement-page__year-meta-value { font-size: var(--text-base); font-weight: 600; color: var(--color-primary); } .placement-page__year-panel:not(.is-active) { display: none; } .placement-page__year-panel.is-active { display: block; } .placement-page__grid { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; } @media (min-width: 640px) { .placement-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .placement-page__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } } .placement-page__card { margin: 0; min-width: 0; } .placement-page__card-figure { display: flex; flex-direction: column; height: 100%; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid rgba(12, 35, 64, 0.12); box-shadow: 0 8px 24px rgba(12, 35, 64, 0.07); } .placement-page__card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-elevated); } .placement-page__card-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; } .placement-page__card-zoom { right: var(--space-2); bottom: var(--space-2); } .placement-page__card-caption { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 auto; margin: 0; padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid rgba(12, 35, 64, 0.08); background: #fff; } .placement-page__card-date { display: block; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent); } .placement-page__card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: var(--text-base); font-weight: 600; line-height: 1.5; color: var(--color-primary); } .placement-page__empty { margin-top: var(--space-3); font-style: italic; color: rgba(12, 35, 64, 0.72); } @media (max-width: 767px) { .placement-page__pane-head { padding: var(--space-4); } .placement-page__year-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .placement-page__year-tab { scroll-snap-align: center; } } /* ----------------------------------------------------------------------------- Desktop navigation ----------------------------------------------------------------------------- */ @media (min-width: 1024px) { .nav-main { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: relative; } .nav-main__strip { overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain; } /* Dropdowns anchor to nav row (not full viewport); wide megas span full nav width */ .site-header .mega { position: absolute; box-sizing: border-box; top: 100%; margin-top: 0; max-height: min(70vh, 32rem); overflow-y: auto; overflow-x: hidden; border-top: 1px solid var(--color-border); } .site-header .mega.mega--wide { left: 0; right: 0; width: 100%; max-width: none; border-radius: 0 0 var(--radius-md) var(--radius-md); } /* Popover-style panels: horizontal position set in JS under each trigger */ .site-header .mega:not(.mega--wide) { left: auto; right: auto; width: auto; min-width: 14rem; max-width: min(36rem, calc(100vw - var(--space-4))); border-radius: var(--radius-md); border-top: 1px solid var(--color-border); margin-top: 2px; } .site-header .mega:not(.mega--wide) .mega__grid.container { width: 100%; max-width: none; margin-inline: 0; padding-inline: 0; } .site-header .mega:not(.mega--wide) .mega__grid { max-width: none; margin-inline: 0; } .site-header .mega:not(.mega--wide) .mega__grid:has(.mega__col:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-header .mega:not(.mega--wide) .mega__grid:not(:has(.mega__col:nth-child(2))) { grid-template-columns: 1fr; } .site-header .mega.mega--wide .mega__grid { width: 100%; max-width: min(960px, 100%); margin-inline: auto; } .nav-toggle { display: none; } .site-header__brand-row { display: contents; } .site-header__meta--desktop { display: flex; } .site-header { overflow-x: visible; } /* Logo + credentials as two columns (reference: grouped bar, no dead space between blocks) */ .site-header__top { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: none; align-items: center; column-gap: var(--space-4); row-gap: 0; padding-block: 0.625rem 0.75rem; } .brand { grid-area: unset; flex-shrink: 0; align-self: center; } .site-header__meta { grid-area: unset; display: flex; flex: unset; align-self: center; justify-self: end; width: max-content; max-width: 32rem; min-width: 0; padding: 0.45rem 0.85rem 0.45rem calc(var(--space-3) + 0.25rem); margin-left: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(250, 246, 239, 0.88) 100%); border: 1px solid rgba(201, 162, 39, 0.2); border-radius: var(--radius-md); box-shadow: 0 6px 24px rgba(12, 35, 64, 0.07); position: relative; gap: 0.25rem; } .site-header__meta::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px; border-radius: 0 2px 2px 0; background: linear-gradient(180deg, var(--color-gold), var(--color-emerald-bright)); } .site-header.is-scrolled .site-header__badges { display: none; } .site-header.is-scrolled .site-header__credentials { font-size: var(--text-xs); line-height: 1.35; } .site-header__credentials-line { display: block; } .site-header__credentials-line + .site-header__credentials-line { margin-top: 0.25rem; } .site-header__credentials-line + .site-header__credentials-line::before { content: none; } .site-header__credentials { display: flex; flex-direction: column; font-size: clamp(0.75rem, 0.9vw, 0.8125rem); line-height: 1.35; color: var(--color-text-muted); } .site-header__address-line { font-size: clamp(0.75rem, 0.95vw, 0.875rem); line-height: 1.35; } .site-header__nav-row { display: block; } .site-header__nav-inner { padding-block: 0.25rem; } /* Same .container width as .site-header__top — no separate nav width */ .nav-main { justify-content: flex-start; width: 100%; } .nav-main__list { width: 100%; max-width: 100%; justify-content: space-between; gap: 0; } /* Never clip the last label: if the row can't fit, scroll instead of cutting */ .nav-main__strip { scroll-padding-inline: 0.25rem; } .nav-main__item:last-child { padding-inline-end: 0.15rem; } .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mega--wide .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 480px) and (max-width: 1023px) { .brand__mark { width: 5rem; height: 5rem; } .brand__title { font-size: clamp(1.3125rem, 3.4vw, 1.75rem); } } @media (min-width: 768px) and (max-width: 1023px) { .brand__mark { width: 5.25rem; height: 5.25rem; } .brand__title { font-size: clamp(1.375rem, 2.8vw, 1.875rem); } .site-header__top { column-gap: var(--space-4); } } @media (max-width: 359px) { .site-header__top { gap: var(--space-2) var(--space-2); padding-block: var(--space-2); } .brand__mark { width: 3.5rem; height: 3.5rem; } .brand__title { font-size: 1.0625rem; letter-spacing: -0.015em; } .site-header__credentials-line { display: block; } .site-header__credentials-line + .site-header__credentials-line::before { content: none; } .site-header__credentials { font-size: var(--text-xs); line-height: 1.4; } .site-header__address-line { font-size: var(--text-xs); } } @media (min-width: 1024px) { .brand__mark { width: 5rem; height: 5rem; } .brand__title { font-size: clamp(1.25rem, 1.45vw, 1.625rem); max-width: min(26rem, 42vw); overflow-wrap: normal; } .site-header.is-scrolled .brand__mark { width: 4rem; height: 4rem; } } @media (min-width: 1200px) { .brand__mark { width: 5.25rem; height: 5.25rem; } .brand__title { font-size: clamp(1.3125rem, 1.3vw, 1.75rem); max-width: none; } .site-header__top { column-gap: var(--space-5); } .site-header.is-scrolled .brand__mark { width: 4.25rem; height: 4.25rem; } .site-header__meta { padding-left: calc(var(--space-4) + 0.25rem); } } @media (min-width: 1024px) and (max-width: 1199px) { .site-header__credentials, .site-header__address-line { font-size: var(--text-xs); } .nav-main__link, .nav-main__trigger { padding: 0.35rem 0.45rem; font-size: var(--text-xs); } .nav-main__list { gap: 0; } } @media (min-width: 1400px) { .nav-main__link, .nav-main__trigger { font-size: var(--text-base); padding: var(--space-1) 0.65rem; } .nav-main__list { gap: 0; } .site-header__credentials { font-size: var(--text-xs); line-height: 1.35; } .site-header__address-line { font-size: var(--text-xs); line-height: 1.35; } .brand__mark { width: 5.5rem; height: 5.5rem; } .brand__title { font-size: clamp(1.375rem, 1.05vw, 1.75rem); } .site-header.is-scrolled .brand__mark { width: 4.5rem; height: 4.5rem; } } @media (max-width: 1023px) { #main { position: relative; z-index: 1; } .top-strip { padding-block: 0.45rem; } .top-strip__inner { gap: 0.35rem; } .site-header__top-shell { min-height: 4.25rem; } .site-header__top { display: block; } .site-header__meta.site-header__meta--desktop { display: none !important; } .site-header__brand-row { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); width: 100%; min-height: 3.5rem; } .brand { display: flex; flex: 1 1 auto; min-width: 0; max-width: none; overflow: visible; } .brand__text { flex: 1 1 auto; min-width: 0; overflow: visible; } .brand__title { -webkit-text-fill-color: currentColor; background: none; color: var(--color-primary); font-size: clamp(0.875rem, 3.6vw, 1.0625rem); line-height: 1.2; overflow-wrap: normal; word-break: normal; white-space: normal; } .brand__tagline { -webkit-text-fill-color: currentColor; background: none; color: var(--color-emerald); opacity: 1; max-height: none; font-size: var(--text-xs); letter-spacing: 0.1em; overflow-wrap: normal; word-break: normal; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .brand__mark { width: 3.25rem; height: 3.25rem; min-width: 3.25rem; min-height: 3.25rem; } .brand__logo-ring { flex-shrink: 0; padding: 3px; } .nav-toggle { position: relative; z-index: 2; flex: 0 0 auto; flex-shrink: 0; margin-left: 0; min-width: 2.85rem; min-height: 2.85rem; padding: 0.45rem; } .hero, .hero__slides { grid-template-rows: minmax(82vh, 1fr); min-height: 82vh; min-height: min(82vh, 600px); } .hero__slide { min-height: 82vh; min-height: min(82vh, 600px); } .mega { display: none !important; } } /* ----------------------------------------------------------------------------- Typography — readability across devices ----------------------------------------------------------------------------- */ @media (max-width: 767px) { .hero__lead { font-size: var(--text-lg); line-height: var(--line-height-relaxed); } .submenu-page__intro-lead, .about-page__lead { font-size: var(--text-lg); line-height: var(--line-height-relaxed); } } /* ----------------------------------------------------------------------------- Global responsive polish (all sections) ----------------------------------------------------------------------------- */ @media (max-width: 1023px) { .course-card__title, .news-card__title, .fac-card__title { overflow-wrap: break-word; word-break: normal; } .carousel { gap: var(--space-1); } .carousel__nav { width: 40px; height: 40px; flex-shrink: 0; } } @media (max-width: 479px) { .section { padding-block: var(--space-6); } .section--tight { padding-block: var(--space-3); } .hero, .hero__slides, .hero__slide { min-height: 82vh; min-height: min(82vh, 600px); } .hero__slide { padding-bottom: var(--space-8); align-items: flex-end; } .hero__content { padding-inline: 0; } .hero__lead { font-size: var(--text-lg); line-height: var(--line-height-relaxed); } .hero__nav-bar { gap: var(--space-2); padding-inline: var(--space-2); } .hero__progress { max-width: 10rem; } .cta-band__inner { flex-direction: column; text-align: center; align-items: stretch; } .cta-band .btn { width: 100%; max-width: 20rem; margin-inline: auto; } .testimonial-card__quote { font-size: var(--text-lg); } .rank-card { flex-basis: min(240px, 88vw); } } @media print { .sticky-apply, .whatsapp-fab, .nav-toggle, .top-strip .btn { display: none !important; } .site-header { position: static; box-shadow: none; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ----------------------------------------------------------------------------- Scroll-spy layout demo (scroll-spy-demo.php) — sticky nav + section tracking ----------------------------------------------------------------------------- */ #main.scroll-spy-demo { overflow-x: clip; } .scroll-spy-demo__hero { padding-block: var(--space-8); background: var(--gradient-page-hero-wash); } .scroll-spy-demo__title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; color: var(--color-dark-surface); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } .scroll-spy-demo__lead { max-width: 42rem; margin: 0; color: rgba(15, 23, 42, 0.88); text-wrap: pretty; } .scroll-spy-demo__layout { padding-block: var(--space-6) var(--space-4); background: linear-gradient(180deg, #e8ecf2 0%, #f0f3f8 100%); border-top: 1px solid rgba(12, 35, 64, 0.07); } .scroll-spy-demo__grid { display: block; } @media (min-width: 768px) { .scroll-spy-demo__grid { display: grid; grid-template-columns: minmax(0, 1fr) 16.5rem; gap: var(--space-6); align-items: stretch; } } @media (min-width: 1024px) { .scroll-spy-demo__grid { grid-template-columns: minmax(0, 1fr) 18.5rem; gap: var(--space-8); } } .scroll-spy-demo__content { min-width: 0; } .scroll-spy-demo__section { scroll-margin-top: calc(var(--strip-h) + var(--header-h) + 16px); padding-block: var(--space-4); } .scroll-spy-demo__section:first-child { padding-top: 0; } .scroll-spy-demo__panel { padding: var(--space-5); background: #fff; border: 1px solid rgba(12, 35, 64, 0.1); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(12, 35, 64, 0.07); } @media (min-width: 640px) { .scroll-spy-demo__panel { padding: var(--space-6); } } .scroll-spy-demo__panel-head { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(12, 35, 64, 0.1); } .scroll-spy-demo__kicker { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(12, 35, 64, 0.55); } .scroll-spy-demo__panel-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; color: var(--color-dark-surface); margin: 0; line-height: 1.2; letter-spacing: -0.02em; } .scroll-spy-demo__prose { margin: 0 0 var(--space-4); font-size: var(--text-md); line-height: 1.75; color: rgba(15, 23, 42, 0.9); text-wrap: pretty; } .scroll-spy-demo__prose:last-child { margin-bottom: 0; } .scroll-spy-demo__aside { display: none; margin: 0; } @media (min-width: 768px) { .scroll-spy-demo__aside { display: flex; flex-direction: column; align-self: stretch; min-width: 0; } } .scroll-spy-demo__nav-wrap { position: sticky; top: calc(var(--strip-h) + var(--header-h) + 12px); z-index: 85; align-self: flex-start; width: 100%; box-sizing: border-box; padding: var(--space-4); background: #fff; border: 1px solid rgba(12, 35, 64, 0.1); border-radius: var(--radius-lg); box-shadow: 0 10px 36px rgba(12, 35, 64, 0.08); max-height: calc(100vh - var(--strip-h) - var(--header-h) - 24px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(12, 35, 64, 0.35) rgba(12, 35, 64, 0.06); } .scroll-spy-demo__nav-eyebrow { margin: 0 0 0.2rem; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #9a7209; } .scroll-spy-demo__nav-title { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 800; color: var(--color-dark-surface); } .scroll-spy-demo__nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; } .scroll-spy-demo__nav-link { display: block; padding: 0.5rem 0.65rem; font-size: var(--text-sm); font-weight: 600; line-height: 1.3; color: var(--color-dark-surface); text-decoration: none; background: #f1f5f9; border: 1px solid rgba(12, 35, 64, 0.1); border-radius: var(--radius-sm); transition: background var(--transition), border-color var(--transition), color var(--transition); } .scroll-spy-demo__nav-link:hover { background: #fff; border-color: rgba(12, 35, 64, 0.22); } .scroll-spy-demo__nav-link:focus-visible { outline: 3px solid rgba(12, 35, 64, 0.35); outline-offset: 2px; } .scroll-spy-demo__nav-link.is-active { background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-dark) 100%); border-color: #0c2840; color: #fff; box-shadow: 0 4px 12px rgba(12, 35, 64, 0.25); } .scroll-spy-demo__dock { display: none; } @media (max-width: 767px) { .scroll-spy-demo__section { scroll-margin-bottom: 6.5rem; } .scroll-spy-demo__content { padding-bottom: 5.25rem; } .scroll-spy-demo__dock { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 120; padding: 0.4rem 0 calc(0.45rem + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); border-top: 1px solid rgba(12, 35, 64, 0.12); box-shadow: 0 -8px 28px rgba(12, 35, 64, 0.08); } .scroll-spy-demo__dock-label { margin: 0; padding: 0 var(--space-3) 0.25rem; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); max-width: var(--container-max); margin-inline: auto; box-sizing: border-box; } .scroll-spy-demo__dock-list { list-style: none; margin: 0; padding: 0 var(--space-3); display: flex; flex-wrap: nowrap; gap: 0.4rem; overflow-x: auto; max-width: var(--container-max); margin-inline: auto; box-sizing: border-box; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .scroll-spy-demo__dock-list::-webkit-scrollbar { display: none; } .scroll-spy-demo__dock-list li { flex: 0 0 auto; } .scroll-spy-demo__dock-link { display: block; max-width: 8.5rem; padding: 0.4rem 0.55rem; font-size: var(--text-xs); font-weight: 600; line-height: 1.25; color: var(--color-dark-surface); text-decoration: none; text-align: center; background: #f1f5f9; border: 1px solid rgba(12, 35, 64, 0.12); border-radius: var(--radius-sm); } .scroll-spy-demo__dock-link.is-active { background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-dark) 100%); border-color: #0c2840; color: #fff; } } @media print { .scroll-spy-demo__dock { display: none !important; } .scroll-spy-demo__aside { display: none !important; } .scroll-spy-demo__nav-wrap { position: static; max-height: none; } } /* ----------------------------------------------------------------------------- Homepage CMS: article carousels, gallery albums, Instagram, videos ----------------------------------------------------------------------------- */ .carousel__item { flex: 0 0 min(320px, 88vw); list-style: none; } .carousel__item .news-card { height: 100%; margin: 0; } .carousel--surface .carousel__nav { border-color: rgba(12, 35, 64, 0.15); background: #fff; color: var(--color-primary, var(--color-primary)); box-shadow: 0 2px 8px rgba(12, 35, 64, 0.08); } .carousel--surface .carousel__nav:hover { background: #f1f5f9; } /* ----------------------------------------------------------------------------- Home: News + Events (prominent two-column carousels under the notice) ----------------------------------------------------------------------------- */ .news-events { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4.5rem); } .news-events__bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--color-emerald) 12%, transparent) 0%, transparent 55%), radial-gradient(120% 90% at 0% 100%, color-mix(in srgb, var(--color-gold) 14%, transparent) 0%, transparent 55%), linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-elevated) 100%); } .news-events__bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(color-mix(in srgb, var(--color-primary) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%); opacity: 0.5; } .news-events__header { text-align: center; max-width: 42rem; margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem); } .news-events__section-eyebrow { justify-content: center; margin-bottom: 0.5rem; } .news-events__section-title { margin: 0; font-family: var(--font-heading); font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; background: linear-gradient(100deg, var(--color-primary) 0%, var(--color-emerald) 55%, var(--color-accent-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .news-events__section-desc { margin: 0.75rem auto 0; max-width: 36rem; color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.6; } .news-events__cols { display: grid; gap: var(--space-4); } @media (min-width: 900px) { .news-events__cols { grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: stretch; } } .news-events__col { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 0 var(--space-4) var(--space-4); background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 253, 249, 0.88) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--color-primary) 8%, var(--color-border)); border-radius: var(--radius-xl, 20px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 48px rgba(12, 35, 64, 0.1); overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease; } .news-events__col::after { content: ""; position: absolute; right: -2rem; bottom: -2rem; width: 8rem; height: 8rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--color-gold) 18%, transparent) 0%, transparent 70%); pointer-events: none; } .news-events__col--events::after { background: radial-gradient(circle, color-mix(in srgb, var(--color-emerald-bright) 16%, transparent) 0%, transparent 70%); } .news-events__col:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(12, 35, 64, 0.18); } .news-events__col::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--color-accent-deep), var(--color-gold), var(--color-gold-light)); } .news-events__col--events::before { background: linear-gradient(90deg, var(--color-emerald), var(--color-emerald-bright), var(--color-gold-light)); } .news-events__head { display: flex; align-items: center; gap: 0.85rem; padding: var(--space-4) 0 var(--space-3); margin-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); } .news-events__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3rem; height: 3rem; border-radius: var(--radius-md); color: #fff; background: linear-gradient(135deg, var(--color-accent-deep) 0%, var(--color-gold) 100%); box-shadow: 0 8px 20px color-mix(in srgb, var(--color-gold) 38%, transparent); } .news-events__col--events .news-events__icon { background: linear-gradient(135deg, var(--color-emerald) 0%, var(--color-emerald-bright) 100%); box-shadow: 0 8px 20px color-mix(in srgb, var(--color-emerald) 38%, transparent); } .news-events__icon svg { width: 1.55rem; height: 1.55rem; } .news-events__headings { display: flex; flex-direction: column; min-width: 0; gap: 0.15rem; } .news-events__eyebrow { margin: 0; } .news-events__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; line-height: 1.12; color: var(--color-primary); } .news-events__count { display: inline-flex; align-items: center; margin-top: 0.2rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.03em; color: var(--color-text-muted); } .news-events__count::before { content: ""; width: 1.25rem; height: 2px; margin-right: 0.45rem; border-radius: 2px; background: linear-gradient(90deg, var(--color-gold), transparent); } .news-events__col--events .news-events__count::before { background: linear-gradient(90deg, var(--color-emerald-bright), transparent); } .news-events__all { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; flex-shrink: 0; padding: 0.4rem 0.85rem; font-size: var(--text-sm); font-weight: 700; color: var(--color-emerald); background: color-mix(in srgb, var(--color-emerald) 10%, transparent); border-radius: var(--radius-full); text-decoration: none; transition: background 0.25s ease, color 0.25s ease, gap 0.25s ease; } .news-events__col--news .news-events__all { color: var(--color-accent-deep); background: color-mix(in srgb, var(--color-gold) 16%, transparent); } .news-events__all svg { width: 0.95rem; height: 0.95rem; } .news-events__all:hover { gap: 0.55rem; color: #fff; background: var(--color-emerald); } .news-events__col--news .news-events__all:hover { color: #fff; background: var(--color-accent-deep); } /* One card per column — editorial carousel stage */ .news-events__carousel { gap: 0; flex: 1 1 auto; flex-direction: column; align-items: stretch; } .news-events__carousel-stage { position: relative; display: flex; align-items: stretch; min-height: 0; } .news-events__carousel .carousel__viewport { align-self: stretch; display: flex; margin-inline: 0; flex: 1; border-radius: var(--radius-lg); overflow: hidden; } .news-events__carousel .carousel__track { flex: 1; align-items: stretch; gap: 0; padding-block: 0; } .news-events__carousel .carousel__item { display: flex; flex: 0 0 100%; } .news-events__carousel-nav { position: absolute; top: 38%; z-index: 4; width: 2.65rem; height: 2.65rem; border: 1px solid rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.92); color: var(--color-primary); box-shadow: 0 8px 24px rgba(12, 35, 64, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .news-events__carousel-nav:hover { transform: scale(1.06); background: var(--color-primary); color: #fff; box-shadow: 0 12px 28px rgba(12, 35, 64, 0.24); } .news-events__carousel .carousel__nav--prev { left: 0.75rem; } .news-events__carousel .carousel__nav--next { right: 0.75rem; } .news-events__carousel-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed color-mix(in srgb, var(--color-primary) 14%, var(--color-border)); } .news-events__carousel-dots { display: flex; align-items: center; gap: 0.4rem; } .news-events__dot { width: 0.45rem; height: 0.45rem; padding: 0; border: 0; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-primary) 18%, transparent); cursor: pointer; transition: width 0.25s ease, background 0.25s ease; } .news-events__dot.is-active { width: 1.35rem; background: linear-gradient(90deg, var(--color-emerald), var(--color-emerald-bright)); } .news-events__col--news .news-events__dot.is-active { background: linear-gradient(90deg, var(--color-accent-deep), var(--color-gold)); } .news-events__carousel-counter { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } /* Featured editorial cards inside home News & Events */ .news-events__carousel .news-card--featured { width: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent); border-radius: var(--radius-lg); background: linear-gradient(165deg, #fff 0%, #faf7f1 52%, #f3f7fb 100%); box-shadow: 0 4px 6px rgba(12, 35, 64, 0.04), 0 18px 40px rgba(12, 35, 64, 0.1); transition: transform 0.35s ease, box-shadow 0.35s ease; } .news-events__carousel .news-card--featured:hover { transform: translateY(-4px); box-shadow: 0 8px 12px rgba(12, 35, 64, 0.06), 0 28px 52px rgba(12, 35, 64, 0.16); } .news-events__carousel .news-card--featured .news-card__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-bg); } .news-events__carousel .news-card--featured .news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .news-events__carousel .news-card--featured:hover .news-card__media img { transform: scale(1.06); } .news-events__carousel .news-card__media-shade { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(6, 21, 40, 0.15) 0%, rgba(6, 21, 40, 0.02) 42%, rgba(6, 21, 40, 0.55) 100% ); pointer-events: none; } .news-events__carousel .news-card__category { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2; padding: 0.28rem 0.7rem; font-family: var(--font-ui); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(6, 21, 40, 0.55); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--radius-full); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .news-events__carousel .news-card--news .news-card__category { background: color-mix(in srgb, var(--color-accent-deep) 82%, transparent); border-color: color-mix(in srgb, var(--color-gold-light) 45%, transparent); } .news-events__carousel .news-card--events .news-card__category { background: color-mix(in srgb, var(--color-emerald) 82%, transparent); border-color: color-mix(in srgb, var(--color-emerald-bright) 45%, transparent); } .news-events__carousel .news-card__date-badge { position: absolute; left: 0.85rem; bottom: 0.85rem; z-index: 2; display: inline-flex; align-items: stretch; overflow: hidden; border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(6, 21, 40, 0.28); } .news-events__carousel .news-card__date-day { display: flex; align-items: center; justify-content: center; min-width: 2.65rem; padding: 0.45rem 0.55rem; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; line-height: 1; color: var(--color-primary); background: #fff; } .news-events__carousel .news-card__date-meta { display: flex; flex-direction: column; justify-content: center; gap: 0.05rem; padding: 0.35rem 0.65rem; color: #fff; background: linear-gradient(160deg, var(--color-emerald) 0%, var(--color-emerald-bright) 100%); } .news-events__carousel .news-card--news .news-card__date-meta { background: linear-gradient(160deg, var(--color-accent-deep) 0%, var(--color-gold) 100%); } .news-events__carousel .news-card__date-month { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1.1; } .news-events__carousel .news-card__date-year { font-size: 0.72rem; font-weight: 700; line-height: 1.1; opacity: 0.92; } .news-events__carousel .news-card--featured .news-card__body { display: flex; flex-direction: column; flex: 1; gap: 0.55rem; padding: var(--space-4) var(--space-4) var(--space-3); } .news-events__carousel .news-card--featured .news-card__title { margin: 0; font-family: var(--font-heading); font-size: clamp(1.05rem, 1.8vw, 1.2rem); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; } .news-events__carousel .news-card--featured .news-card__title a { color: var(--color-primary); text-decoration: none; transition: color 0.2s ease; } .news-events__carousel .news-card--featured .news-card__title a:hover { color: var(--color-emerald); } .news-events__carousel .news-card--news .news-card__title a:hover { color: var(--color-accent-deep); } .news-events__carousel .news-card--featured .news-card__excerpt { flex: 1; margin: 0; font-size: var(--text-sm); line-height: 1.65; color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-events__carousel .news-card__cta { display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start; margin-top: 0.35rem; padding: 0.55rem 1.05rem; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--color-emerald) 0%, var(--color-emerald-bright) 100%); border-radius: var(--radius-full); box-shadow: 0 6px 18px color-mix(in srgb, var(--color-emerald) 35%, transparent); transition: gap 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .news-events__carousel .news-card--news .news-card__cta { background: linear-gradient(135deg, var(--color-accent-deep) 0%, var(--color-gold) 100%); box-shadow: 0 6px 18px color-mix(in srgb, var(--color-gold) 38%, transparent); } .news-events__carousel .news-card__cta svg { width: 1rem; height: 1rem; transition: transform 0.25s ease; } .news-events__carousel .news-card__cta:hover { gap: 0.7rem; transform: translateY(-1px); } .news-events__carousel .news-card__cta:hover svg { transform: translateX(2px); } @media (max-width: 899px) { .news-events__carousel-nav { width: 2.35rem; height: 2.35rem; top: 34%; } .news-events__carousel .carousel__nav--prev { left: 0.45rem; } .news-events__carousel .carousel__nav--next { right: 0.45rem; } .news-events__carousel .news-card--featured .news-card__body { padding: var(--space-3); } } @media (max-width: 899px) { .news-events__all { padding: 0.3rem 0.7rem; } } .gallery-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; } .gallery-album-card { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 4px 16px rgba(12, 35, 64, 0.1); } .gallery-album-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .gallery-album-card:hover .gallery-album-card__img { transform: scale(1.05); } .gallery-album-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-3); background: linear-gradient(180deg, transparent 40%, rgba(12, 35, 64, 0.85)); color: #fff; } .gallery-album-card__title { font-size: var(--text-base); font-weight: 600; line-height: 1.3; } .gallery-album-card__count { font-size: var(--text-xs); opacity: 0.9; } .instagram-embeds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); } .instagram-embeds-grid__item { background: #fff; border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(12, 35, 64, 0.1); } .instagram-embeds-grid__iframe { display: block; width: 100%; min-height: 420px; border: 0; } .instagram-embeds-grid__caption { margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-base); color: var(--color-text-muted); } .video-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; } .video-strip__card { display: block; position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--color-dark-surface); color: #fff; text-decoration: none; } .video-strip__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; } .video-strip__thumb img { width: 100%; height: 100%; object-fit: cover; } .video-strip__play { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .video-strip__play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #c41e3a; } .video-strip__title { display: block; padding: var(--space-3); font-size: var(--text-base); font-weight: 600; line-height: 1.35; } /* Under construction (fee payment portal) */ .under-construction-page__section { min-height: min(70vh, 640px); display: flex; align-items: center; } .under-construction-page__inner { max-width: 36rem; margin-inline: auto; text-align: center; } .under-construction-page__logo { margin: 0 auto var(--space-4); display: block; } .under-construction-page__lead { margin-bottom: var(--space-3); } .under-construction-page__note { color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: var(--space-5); } .under-construction-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } /* Shared hero placeholder (submenu / content pages) */ .page-hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 280px; padding: var(--space-5); background: linear-gradient(145deg, #f1f5f9 0%, #e8ecf1 100%); border-radius: inherit; } .page-hero-placeholder__mark { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: var(--color-primary); opacity: 0.35; } .page-hero-placeholder__text { font-size: var(--text-base); font-weight: 600; color: var(--color-text-muted); text-align: center; max-width: 16rem; } /* College logo in hero boxes — contained, centered, with inset padding */ [class*='__hero-frame--emblem'], [class*='__frame--emblem'] { display: flex; align-items: center; justify-content: center; box-sizing: border-box; } [class*='__hero-img--contain'], [class*='__img--contain'] { display: block; width: auto; max-width: min(280px, 72%); max-height: min(240px, 34vh); height: auto; margin-inline: auto; object-fit: contain; object-position: center; box-sizing: border-box; } /* ----------------------------------------------------------------------------- Theme switcher (visitor color preferences) ----------------------------------------------------------------------------- */ .theme-switcher { position: fixed; left: max(var(--space-3), env(safe-area-inset-left, 0px)); bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px)); z-index: var(--z-modal); } .theme-switcher__toggle { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 0; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-emerald) 100%); color: #fff; box-shadow: 0 8px 24px rgba(6, 21, 40, 0.28); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .theme-switcher__toggle:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 30px rgba(6, 21, 40, 0.34); } .theme-switcher__toggle:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 3px; } .theme-switcher__toggle svg { width: 1.5rem; height: 1.5rem; } .theme-switcher__panel { position: absolute; left: 0; bottom: calc(100% + 0.75rem); width: min(20rem, calc(100vw - 2rem)); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 20px 52px rgba(12, 35, 64, 0.22); opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.98); transform-origin: bottom left; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .theme-switcher__panel[hidden] { display: none !important; } .theme-switcher.is-open .theme-switcher__panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .theme-switcher__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); } .theme-switcher__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-md); font-weight: 700; color: var(--color-primary); } .theme-switcher__close { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--color-surface-elevated); color: var(--color-text-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; } .theme-switcher__close:hover { color: var(--color-primary); background: var(--color-border); } .theme-switcher__label { display: block; margin: 0 0 0.5rem; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } .theme-switcher__swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-bottom: var(--space-3); } .theme-switcher__swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-ui); font-size: 0.625rem; font-weight: 600; color: var(--color-text-muted); } .theme-switcher__chip { width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(12, 35, 64, 0.1); transition: transform 0.15s ease, border-color 0.15s ease; } .theme-switcher__swatch:hover .theme-switcher__chip { transform: scale(1.06); } .theme-switcher__swatch.is-active .theme-switcher__chip { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 2px var(--color-accent-soft); } .theme-switcher__swatch.is-active { color: var(--color-primary); } .theme-switcher__custom { display: flex; flex-direction: column; gap: 0.6rem; padding-top: var(--space-2); border-top: 1px solid var(--color-border); } .theme-switcher__custom-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .theme-switcher__custom-label { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); } .theme-switcher__color { width: 2.75rem; height: 2rem; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; } .theme-switcher__color::-webkit-color-swatch-wrapper { padding: 0; } .theme-switcher__color::-webkit-color-swatch { border: 0; border-radius: 4px; } .theme-switcher__actions { display: flex; gap: 0.6rem; margin-top: var(--space-2); } .theme-switcher__reset { flex: 1; padding: 0.55rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-muted); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .theme-switcher__reset:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-surface-elevated); } @media (prefers-reduced-motion: reduce) { .theme-switcher__panel, .theme-switcher__toggle, .theme-switcher__chip { transition: none; } } /* ============================================================================= Submenu page heroes — right-side image retired, richer full-width layout ============================================================================= */ /* Collapse the former two-column hero grids to a single full-width column */ .about-page__hero-grid, .history-page__hero-grid, .contact-page__hero-grid, .library-page__hero-inner, .departments-page__hero-inner, .non-teaching-staff-page__hero-inner, .admission-procedure-page__hero-inner, .prospectus-page__hero-inner, .governing-body-page__hero-inner, .secretary-desk-page__hero-inner, .principal-desk-page__hero-inner, .infrastructure-page__hero-inner, .milestones-page__hero-inner, .syllabus-gateway-page__hero-inner, .teaching-faculty-page__hero-inner, .physical-education-page__hero-inner, .programmes-offered-page__hero-inner, .gallery-page__hero-inner { grid-template-columns: 1fr !important; gap: var(--space-4) !important; } .about-page__hero-grid, .history-page__hero-grid { grid-template-areas: "copy" "stats" !important; align-items: stretch !important; } .history-page__hero-grid .history-page__hero-visual { display: none; } /* Rich, prominent hero band shared across submenu pages */ .about-page__hero, .history-page__hero, .library-page__hero, .departments-page__hero, .non-teaching-staff-page__hero, .admission-procedure-page__hero, .prospectus-page__hero, .governing-body-page__hero, .principal-desk-page__hero, .secretary-desk-page__hero, .infrastructure-page__hero, .milestones-page__hero, .syllabus-gateway-page__hero, .teaching-faculty-page__hero, .physical-education-page__hero, .programmes-offered-page__hero, .gallery-page__hero, .contact-page__hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.25rem, 4vw, 3.75rem); text-align: center; background: radial-gradient(75% 120% at 100% 0%, color-mix(in srgb, var(--color-emerald) 13%, transparent), transparent 58%), radial-gradient(70% 120% at 0% 100%, color-mix(in srgb, var(--color-gold) 15%, transparent), transparent 58%), var(--gradient-page-hero-wash); } /* Decorative monogram watermark for a richer, intentional hero */ .about-page__hero > .container, .history-page__hero > .container, .library-page__hero > .container, .departments-page__hero > .container, .non-teaching-staff-page__hero > .container, .admission-procedure-page__hero > .container, .prospectus-page__hero > .container, .governing-body-page__hero > .container, .principal-desk-page__hero > .container, .secretary-desk-page__hero > .container, .infrastructure-page__hero > .container, .milestones-page__hero > .container, .syllabus-gateway-page__hero > .container, .teaching-faculty-page__hero > .container, .physical-education-page__hero > .container, .programmes-offered-page__hero > .container, .gallery-page__hero > .container, .contact-page__hero > .container { position: relative; z-index: 1; } /* Top accent ribbon for a prominent, branded edge */ .about-page__hero::after, .history-page__hero::after, .library-page__hero::after, .departments-page__hero::after, .non-teaching-staff-page__hero::after, .admission-procedure-page__hero::after, .prospectus-page__hero::after, .governing-body-page__hero::after, .principal-desk-page__hero::after, .secretary-desk-page__hero::after, .infrastructure-page__hero::after, .milestones-page__hero::after, .syllabus-gateway-page__hero::after, .teaching-faculty-page__hero::after, .physical-education-page__hero::after, .programmes-offered-page__hero::after, .gallery-page__hero::after, .contact-page__hero::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 3; background: linear-gradient(90deg, var(--color-accent-deep), var(--color-gold), var(--color-emerald)); } /* Prominent, centered hero copy */ .about-page__hero-copy, .history-page__hero-copy, .library-page__hero-copy, .departments-page__hero-copy, .non-teaching-staff-page__hero-copy, .admission-procedure-page__hero-copy, .prospectus-page__hero-copy, .governing-body-page__hero-copy, .principal-desk-page__hero-copy, .secretary-desk-page__hero-copy, .infrastructure-page__hero-copy, .milestones-page__hero-copy, .syllabus-gateway-page__hero-copy, .teaching-faculty-page__hero-copy, .physical-education-page__hero-copy, .programmes-offered-page__hero-copy, .gallery-page__hero-copy, .contact-page__hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 62rem; margin-inline: auto; } /* Center the eyebrow chip and intro text within the hero */ .about-page__hero-copy .eyebrow, .history-page__hero-copy .eyebrow, .library-page__hero-copy .eyebrow, .departments-page__hero-copy .eyebrow, .non-teaching-staff-page__hero-copy .eyebrow, .admission-procedure-page__hero-copy .eyebrow, .prospectus-page__hero-copy .eyebrow, .governing-body-page__hero-copy .eyebrow, .principal-desk-page__hero-copy .eyebrow, .secretary-desk-page__hero-copy .eyebrow, .infrastructure-page__hero-copy .eyebrow, .milestones-page__hero-copy .eyebrow, .syllabus-gateway-page__hero-copy .eyebrow, .teaching-faculty-page__hero-copy .eyebrow, .physical-education-page__hero-copy .eyebrow, .programmes-offered-page__hero-copy .eyebrow, .gallery-page__hero-copy .eyebrow, .contact-page__hero-copy .eyebrow { justify-content: center; } .about-page__hero-copy p, .history-page__hero-copy p, .library-page__hero-copy p, .departments-page__hero-copy p, .non-teaching-staff-page__hero-copy p, .admission-procedure-page__hero-copy p, .prospectus-page__hero-copy p, .governing-body-page__hero-copy p, .principal-desk-page__hero-copy p, .secretary-desk-page__hero-copy p, .infrastructure-page__hero-copy p, .milestones-page__hero-copy p, .syllabus-gateway-page__hero-copy p, .teaching-faculty-page__hero-copy p, .physical-education-page__hero-copy p, .programmes-offered-page__hero-copy p, .gallery-page__hero-copy p, .contact-page__hero-copy p { margin-inline: auto; } /* Larger, bolder hero titles with a gradient underline accent */ .about-page__hero-copy > h1, .history-page__hero-copy > h1, .library-page__hero-copy > h1, .departments-page__hero-copy > h1, .non-teaching-staff-page__hero-copy > h1, .admission-procedure-page__hero-copy > h1, .prospectus-page__hero-copy > h1, .governing-body-page__hero-copy > h1, .principal-desk-page__hero-copy > h1, .secretary-desk-page__hero-copy > h1, .infrastructure-page__hero-copy > h1, .milestones-page__hero-copy > h1, .syllabus-gateway-page__hero-copy > h1, .teaching-faculty-page__hero-copy > h1, .physical-education-page__hero-copy > h1, .programmes-offered-page__hero-copy > h1, .gallery-page__hero-copy > h1, .contact-page__hero-copy > h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); } .about-page__hero-copy > h1::after, .history-page__hero-copy > h1::after, .library-page__hero-copy > h1::after, .departments-page__hero-copy > h1::after, .non-teaching-staff-page__hero-copy > h1::after, .admission-procedure-page__hero-copy > h1::after, .prospectus-page__hero-copy > h1::after, .governing-body-page__hero-copy > h1::after, .principal-desk-page__hero-copy > h1::after, .secretary-desk-page__hero-copy > h1::after, .infrastructure-page__hero-copy > h1::after, .milestones-page__hero-copy > h1::after, .syllabus-gateway-page__hero-copy > h1::after, .teaching-faculty-page__hero-copy > h1::after, .physical-education-page__hero-copy > h1::after, .programmes-offered-page__hero-copy > h1::after, .gallery-page__hero-copy > h1::after, .contact-page__hero-copy > h1::after { content: ""; display: block; width: 68px; height: 4px; margin: 0.9rem auto 0; border-radius: 999px; background: linear-gradient(90deg, var(--color-gold), var(--color-emerald)); } /* Center hero headings as a single block so the accent rule sits under the title */ #main .about-page__hero-copy > h1, #main .history-page__hero-copy > h1, #main .library-page__hero-copy > h1, #main .departments-page__hero-copy > h1, #main .non-teaching-staff-page__hero-copy > h1, #main .admission-procedure-page__hero-copy > h1, #main .prospectus-page__hero-copy > h1, #main .governing-body-page__hero-copy > h1, #main .principal-desk-page__hero-copy > h1, #main .secretary-desk-page__hero-copy > h1, #main .infrastructure-page__hero-copy > h1, #main .milestones-page__hero-copy > h1, #main .syllabus-gateway-page__hero-copy > h1, #main .teaching-faculty-page__hero-copy > h1, #main .physical-education-page__hero-copy > h1, #main .programmes-offered-page__hero-copy > h1, #main .gallery-page__hero-copy > h1, #main .contact-page__hero-copy > h1 { width: fit-content; max-width: 100%; margin-inline: auto; text-align: center; text-align-last: center; } #main .about-page__hero .about-page__lead, #main .history-page__hero .history-page__lead, #main .library-page__hero .library-page__lead, #main .contact-page__hero .contact-page__lead { text-align: center; text-align-last: center; margin-inline: auto; } .about-page__hero-copy .eyebrow, .history-page__hero-copy .eyebrow, .library-page__hero-copy .eyebrow, .contact-page__hero-copy .eyebrow { display: block; width: 100%; text-align: center; } .about-page__section-head, .history-page__section-head { text-align: center; max-width: 42rem; margin-inline: auto; } .about-page__section-head .about-page__section-title, .about-page__section-head .about-page__section-intro { text-align: center; text-align-last: center; margin-inline: auto; } .about-page__jump-inner { justify-content: center; } /* Center hero action buttons and quick-link chips */ .about-page__actions, .history-page__hero-actions, .library-page__quick, .departments-page__hero-actions, .departments-page__quick, .syllabus-gateway-page__quick, .syllabus-gateway-page__actions, .programmes-offered-page__hero-actions { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; } /* Center and constrain the quick-fact stat strips */ .about-page__stat-strip, .history-page__stat-strip { max-width: 60rem; margin-inline: auto; width: 100%; } /* Submenu content sections: scroll reveal (only active once JS adds the class) */ .reveal-init { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal-init.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal-init { opacity: 1; transform: none; transition: none; } } /* About: elevate the highlight stat cards */ .about-page__stat-strip { position: relative; z-index: 2; } .about-page__stat-card { border: 1px solid var(--color-border); box-shadow: 0 12px 30px rgba(12, 35, 64, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .about-page__stat-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(12, 35, 64, 0.16); } /* ----------------------------------------------------------------------------- Article reader — news / events detail page ----------------------------------------------------------------------------- */ .article-page { background: #f8f6f2; } .article-read { position: relative; } .article-read__top-band { height: 1px; background: color-mix(in srgb, var(--color-primary) 12%, var(--color-border)); } .article-read__header { padding: 0 0 var(--space-3); margin-bottom: var(--space-1); } .article-read__standfirst { margin: var(--space-3) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid rgba(12, 35, 64, 0.08); border-left: 0; padding-left: 0; font-family: var(--font-heading); font-size: clamp(1.05rem, 1.8vw, 1.2rem); font-weight: 500; font-style: italic; line-height: 1.62; color: rgba(26, 45, 66, 0.82); text-wrap: pretty; } .article-read__sheet { padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.07); box-shadow: 0 2px 8px rgba(12, 35, 64, 0.04); } .article-read__layout { display: grid; gap: var(--space-4); align-items: start; padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3.5rem); } .article-read__main { min-width: 0; } .article-read__layout--solo { max-width: 44rem; margin-inline: auto; } .article-read__figure { margin: var(--space-3) 0; } .article-read__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.02em; color: rgba(61, 79, 99, 0.78); } .article-read__crumb a { color: rgba(26, 77, 115, 0.88); text-decoration: none; } .article-read__crumb a:hover { color: var(--color-primary); text-decoration: underline; } .article-read__kicker { margin-bottom: 0.85rem; } .article-read__category { display: inline-flex; align-items: center; padding-left: 0.65rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(61, 79, 99, 0.82); border-left: 3px solid var(--color-gold); } .article-read__category--events { border-left-color: var(--color-emerald-bright); } .article-read__title { margin: 0 0 0.85rem; font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 2.65rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; color: #1a2d42; text-wrap: balance; } .article-read__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0; font-size: var(--text-sm); font-weight: 500; color: rgba(61, 79, 99, 0.78); } .article-read__meta-sep { opacity: 0.45; } .article-read__figure-frame { overflow: hidden; border-radius: var(--radius-md); border: 1px solid rgba(12, 35, 64, 0.08); box-shadow: 0 8px 28px rgba(12, 35, 64, 0.07); } .article-read__figure-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } @media (min-width: 1024px) { .article-read__layout { grid-template-columns: minmax(0, 1fr) minmax(250px, 290px); gap: var(--space-5); } } .article-read__prose { margin: 0 0 var(--space-4); font-size: 1.0625rem; line-height: 1.85; color: rgba(30, 41, 59, 0.88); text-wrap: pretty; } .article-read__prose--dropcap::first-letter { float: left; margin: 0.04em 0.14em 0 0; padding-right: 0.02em; font-family: var(--font-heading); font-size: 2.75em; font-weight: 700; line-height: 0.88; color: color-mix(in srgb, var(--color-primary) 88%, #000); } .theme-students .article-read__prose--dropcap::first-letter { color: color-mix(in srgb, var(--color-emerald) 90%, #000); } .article-read__downloads { margin-bottom: var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); background: #faf9f7; border: 1px solid rgba(12, 35, 64, 0.07); } .article-read__downloads-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: #1a2d42; } .article-read__download-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .article-read__download-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; font-size: var(--text-sm); font-weight: 600; text-decoration: none; color: var(--color-primary-mid); background: #fff; border: 1px solid rgba(12, 35, 64, 0.1); border-radius: var(--radius-sm); transition: background 0.2s ease, border-color 0.2s ease; } .article-read__download-link svg { width: 1rem; height: 1rem; flex-shrink: 0; opacity: 0.75; } .article-read__download-link:hover { background: #f4f7fa; border-color: rgba(12, 35, 64, 0.18); } .article-read__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgba(12, 35, 64, 0.08); } .article-read__back { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.95rem; font-size: var(--text-sm); font-weight: 600; text-decoration: none; color: var(--color-primary); background: #fff; border: 1px solid rgba(12, 35, 64, 0.14); border-radius: var(--radius-full); transition: background 0.2s ease, border-color 0.2s ease; } .article-read__back svg { width: 0.95rem; height: 0.95rem; } .article-read__back:hover { background: #f4f7fa; border-color: rgba(12, 35, 64, 0.22); } .article-read__home { font-size: var(--text-sm); font-weight: 600; color: rgba(61, 79, 99, 0.82); text-decoration: none; } .article-read__home:hover { color: var(--color-primary); text-decoration: underline; } .article-read__aside-sticky { position: sticky; top: calc(var(--header-h) + 1.25rem); padding: var(--space-3); border-radius: var(--radius-md); background: #fff; border: 1px solid rgba(12, 35, 64, 0.08); box-shadow: 0 4px 18px rgba(12, 35, 64, 0.05); } .article-read__aside-title { margin: 0 0 var(--space-3); padding-bottom: 0.65rem; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(61, 79, 99, 0.72); border-bottom: 1px solid rgba(12, 35, 64, 0.08); } .article-read__related { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .article-read__related li + li { border-top: 1px solid rgba(12, 35, 64, 0.07); } .article-read__related-link { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 0; text-decoration: none; color: inherit; transition: background 0.2s ease; } .article-read__related-link:hover { opacity: 1; } .article-read__related-link:hover .article-read__related-title { color: var(--color-primary-mid); } .article-read__related-thumb { flex: 0 0 4.25rem; overflow: hidden; border-radius: 6px; aspect-ratio: 3 / 2; background: #f0ebe3; } .article-read__related-thumb img { width: 100%; height: 100%; object-fit: cover; } .article-read__related-copy { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .article-read__related-date { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(61, 79, 99, 0.68); } .article-read__related-title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; line-height: 1.4; color: #1a2d42; transition: color 0.2s ease; } .article-read__aside-all { display: inline-flex; margin-top: var(--space-2); padding-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-mid); text-decoration: none; border-top: 1px solid rgba(12, 35, 64, 0.08); width: 100%; } .article-read__aside-all:hover { text-decoration: underline; } .article-read--empty .article-read__shell { max-width: 40rem; padding-block: clamp(2rem, 5vw, 4rem); } @media (max-width: 1023px) { .article-read__aside-sticky { position: static; } .article-read__sheet { padding: var(--space-3); } } @media (prefers-reduced-motion: reduce) { .article-read__back:hover { transform: none; } } /* ----------------------------------------------------------------------------- Articles archive — news / events listing page ----------------------------------------------------------------------------- */ .articles-archive { background: #f8f6f2; } .articles-archive__top-band { height: 4px; background: linear-gradient(90deg, var(--color-accent-deep), var(--color-gold), var(--color-emerald)); } .articles-archive__shell { padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--space-4); } .articles-archive__header { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); } .articles-archive__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: var(--space-3); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.02em; color: rgba(61, 79, 99, 0.78); } .articles-archive__crumb a { color: rgba(26, 77, 115, 0.88); text-decoration: none; } .articles-archive__crumb a:hover { color: var(--color-primary); text-decoration: underline; } .articles-archive__intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-4); padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.07); box-shadow: 0 2px 8px rgba(12, 35, 64, 0.04); } .articles-archive__intro-copy { flex: 1 1 18rem; min-width: 0; text-align: left; } .articles-archive__eyebrow { margin: 0 0 0.5rem; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(61, 79, 99, 0.72); } .articles-archive__title { margin: 0 0 0.65rem; font-family: var(--font-heading); font-size: clamp(1.85rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #1a2d42; text-wrap: balance; } .articles-archive__title::after { content: ""; display: block; width: 3.25rem; height: 3px; margin-top: 0.65rem; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--color-accent-deep), var(--color-gold)); } .theme-students.articles-archive .articles-archive__title::after { background: linear-gradient(90deg, var(--color-emerald), var(--color-emerald-bright)); } .articles-archive__desc { margin: 0; max-width: 42rem; font-size: clamp(1rem, 1.6vw, 1.08rem); line-height: 1.65; color: rgba(61, 79, 99, 0.82); text-wrap: pretty; } .articles-archive__count { margin: 0.85rem 0 0; font-size: var(--text-sm); font-weight: 600; color: rgba(61, 79, 99, 0.68); } .articles-archive__actions { flex: 0 0 auto; } .articles-archive__back { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.95rem; font-size: var(--text-sm); font-weight: 600; text-decoration: none; color: var(--color-primary); background: #fff; border: 1px solid rgba(12, 35, 64, 0.14); border-radius: var(--radius-full); transition: background 0.2s ease, border-color 0.2s ease; } .articles-archive__back svg { width: 0.95rem; height: 0.95rem; } .articles-archive__back:hover { background: #f4f7fa; border-color: rgba(12, 35, 64, 0.22); } .articles-archive__feed { min-width: 0; } .articles-archive__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(1.25rem, 2.5vw, 1.75rem); list-style: none; margin: 0; padding: 0; } .articles-archive__item { min-width: 0; } .articles-archive__empty { padding: clamp(2rem, 4vw, 3rem); text-align: center; border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(12, 35, 64, 0.07); color: rgba(61, 79, 99, 0.82); } .articles-archive__empty p { margin: 0 0 var(--space-3); font-size: var(--text-base); } /* Archive editorial cards */ .articles-archive__grid .news-card--archive { height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent); border-radius: var(--radius-lg); background: linear-gradient(165deg, #fff 0%, #faf7f1 52%, #f3f7fb 100%); box-shadow: 0 4px 6px rgba(12, 35, 64, 0.04), 0 18px 40px rgba(12, 35, 64, 0.1); transition: transform 0.35s ease, box-shadow 0.35s ease; } .articles-archive__grid .news-card--archive:hover { transform: translateY(-4px); box-shadow: 0 8px 12px rgba(12, 35, 64, 0.06), 0 28px 52px rgba(12, 35, 64, 0.16); } .articles-archive__grid .news-card--archive .news-card__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-bg); } .articles-archive__grid .news-card--archive .news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .articles-archive__grid .news-card--archive:hover .news-card__media img { transform: scale(1.06); } .articles-archive__grid .news-card__media-shade { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(6, 21, 40, 0.15) 0%, rgba(6, 21, 40, 0.02) 42%, rgba(6, 21, 40, 0.55) 100% ); pointer-events: none; } .articles-archive__grid .news-card__category { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2; padding: 0.28rem 0.7rem; font-family: var(--font-ui); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(6, 21, 40, 0.55); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--radius-full); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .articles-archive__grid .news-card--news .news-card__category { background: color-mix(in srgb, var(--color-accent-deep) 82%, transparent); border-color: color-mix(in srgb, var(--color-gold-light) 45%, transparent); } .articles-archive__grid .news-card--events .news-card__category { background: color-mix(in srgb, var(--color-emerald) 82%, transparent); border-color: color-mix(in srgb, var(--color-emerald-bright) 45%, transparent); } .articles-archive__grid .news-card__date-badge { position: absolute; left: 0.85rem; bottom: 0.85rem; z-index: 2; display: inline-flex; align-items: stretch; overflow: hidden; border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(6, 21, 40, 0.28); } .articles-archive__grid .news-card__date-day { display: flex; align-items: center; justify-content: center; min-width: 2.65rem; padding: 0.45rem 0.55rem; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; line-height: 1; color: var(--color-primary); background: #fff; } .articles-archive__grid .news-card__date-meta { display: flex; flex-direction: column; justify-content: center; gap: 0.05rem; padding: 0.35rem 0.65rem; color: #fff; background: linear-gradient(160deg, var(--color-emerald) 0%, var(--color-emerald-bright) 100%); } .articles-archive__grid .news-card--news .news-card__date-meta { background: linear-gradient(160deg, var(--color-accent-deep) 0%, var(--color-gold) 100%); } .articles-archive__grid .news-card__date-month { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1.1; } .articles-archive__grid .news-card__date-year { font-size: 0.72rem; font-weight: 700; line-height: 1.1; opacity: 0.92; } .articles-archive__grid .news-card--archive .news-card__body { display: flex; flex-direction: column; flex: 1; gap: 0.55rem; padding: var(--space-4) var(--space-4) var(--space-3); } .articles-archive__grid .news-card--archive .news-card__date { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(61, 79, 99, 0.68); } .articles-archive__grid .news-card--archive .news-card__title { margin: 0; font-family: var(--font-heading); font-size: clamp(1.05rem, 1.8vw, 1.2rem); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; } .articles-archive__grid .news-card--archive .news-card__title a { color: var(--color-primary); text-decoration: none; transition: color 0.2s ease; } .articles-archive__grid .news-card--archive .news-card__title a:hover { color: var(--color-emerald); } .articles-archive__grid .news-card--news .news-card__title a:hover { color: var(--color-accent-deep); } .articles-archive__grid .news-card--archive .news-card__excerpt { flex: 1; margin: 0; font-size: var(--text-sm); line-height: 1.65; color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .articles-archive__grid .news-card__cta { display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start; margin-top: 0.35rem; padding: 0.55rem 1.05rem; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--color-emerald) 0%, var(--color-emerald-bright) 100%); border-radius: var(--radius-full); box-shadow: 0 6px 18px color-mix(in srgb, var(--color-emerald) 35%, transparent); transition: gap 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .articles-archive__grid .news-card--news .news-card__cta { background: linear-gradient(135deg, var(--color-accent-deep) 0%, var(--color-gold) 100%); box-shadow: 0 6px 18px color-mix(in srgb, var(--color-gold) 38%, transparent); } .articles-archive__grid .news-card__cta svg { width: 1rem; height: 1rem; transition: transform 0.25s ease; } .articles-archive__grid .news-card__cta:hover { gap: 0.7rem; transform: translateY(-1px); } .articles-archive__grid .news-card__cta:hover svg { transform: translateX(2px); } @media (max-width: 639px) { .articles-archive__intro { flex-direction: column; align-items: stretch; } .articles-archive__actions { width: 100%; } .articles-archive__back { justify-content: center; width: 100%; } .articles-archive__grid .news-card--archive .news-card__body { padding: var(--space-3); } } @media (prefers-reduced-motion: reduce) { .articles-archive__grid .news-card--archive:hover { transform: none; } .articles-archive__grid .news-card--archive:hover .news-card__media img { transform: none; } .articles-archive__grid .news-card__cta:hover { transform: none; } }