/* ============================================================================= Federal Public School, Raichur — public website design system (mobile first) Base rules target phones; @media (min-width) blocks refine larger screens. Six colour schemes are CSS variable sets keyed on ; a background pattern () shows through hero, headers, section shades and the footer. ========================================================================== */ :root { --font-head: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --gold: #d9a520; --gold-2: #f2c94c; --gold-3: #fff3cf; --gold-ink: #5c4300; --sky: #1e88c9; --sky-50: #e4f3fc; --leaf: #2e9e5b; --leaf-50: #e3f6ea; --coral: #e2583e; --coral-50: #fdebe6; --violet: #6b4fc4; --violet-50: #eeeafb; --ink: #1d2230; --muted: #5d6576; --paper: #f7f5f2; --surface: #ffffff; --line: #e6e1da; --radius: 1.1rem; --radius-sm: .7rem; --shadow: 0 16px 40px rgba(24, 20, 38, .14); --shadow-sm: 0 4px 14px rgba(24, 20, 38, .08); --nav-h: 68px; --bar-h: 64px; } /* Colour schemes: 900 darkest … 50 lightest */ [data-theme="maroon"] { --brand-900: #420d0e; --brand-700: #6b1718; --brand-600: #861e1d; --brand-500: #a8302e; --brand-100: #f6dcda; --brand-50: #fcefee; --accent-2: #312465; } [data-theme="indigo"] { --brand-900: #1a1340; --brand-700: #2c2166; --brand-600: #3b2d86; --brand-500: #5443b0; --brand-100: #e2defa; --brand-50: #f2f0fd; --accent-2: #861e1d; } [data-theme="green"] { --brand-900: #043622; --brand-700: #085a39; --brand-600: #0a6b45; --brand-500: #13895b; --brand-100: #d2f0e1; --brand-50: #ebf8f1; --accent-2: #1b3f7a; } [data-theme="navy"] { --brand-900: #0b1c38; --brand-700: #16325f; --brand-600: #1b3f7a; --brand-500: #2a5aa6; --brand-100: #dbe5f5; --brand-50: #eef3fb; --accent-2: #0a6b45; } [data-theme="teal"] { --brand-900: #05363a; --brand-700: #0c5a60; --brand-600: #10707a; --brand-500: #16909b; --brand-100: #d2eef0; --brand-50: #eaf7f8; --accent-2: #312465; } [data-theme="sunset"] { --brand-900: #4a1d05; --brand-700: #8a3d0e; --brand-600: #b24f12; --brand-500: #d46a1c; --brand-100: #fbe3cf; --brand-50: #fef3ea; --accent-2: #2c2166; } html:not([data-theme]) { --brand-900: #420d0e; --brand-700: #6b1718; --brand-600: #861e1d; --brand-500: #a8302e; --brand-100: #f6dcda; --brand-50: #fcefee; --accent-2: #312465; } /* Five accent hues used to colour cards, icons and rails in rotation (never white-dominated) */ .accent-1 { --accent: var(--brand-600); --accent-soft: var(--brand-100); --accent-ink: var(--brand-900); } .accent-2 { --accent: var(--gold); --accent-soft: var(--gold-3); --accent-ink: var(--gold-ink); } .accent-3 { --accent: var(--sky); --accent-soft: var(--sky-50); --accent-ink: #0b3552; } .accent-4 { --accent: var(--leaf); --accent-soft: var(--leaf-50); --accent-ink: #0d3d22; } .accent-5 { --accent: var(--violet); --accent-soft: var(--violet-50); --accent-ink: #2a1a66; } .accent-6 { --accent: var(--coral); --accent-soft: var(--coral-50); --accent-ink: #5e1b0e; } /* ---------- Base ---------- */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } [id] { scroll-margin-top: calc(var(--nav-h) + 1rem); } body { background: var(--paper); background-image: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--brand-100) 60%, transparent), transparent 40%), radial-gradient(circle at 100% 35%, color-mix(in srgb, var(--gold-3) 70%, transparent), transparent 36%); background-attachment: fixed; color: var(--ink); font-family: var(--font-body); font-size: calc(1rem * var(--fs-scale)); line-height: 1.65; padding-bottom: var(--bar-h); min-height: 100svh; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); color: var(--brand-900); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; } a { color: var(--brand-600); text-decoration: none; } a:hover { color: var(--brand-700); } img { max-width: 100%; height: auto; } .text-brand { color: var(--brand-600) !important; } .text-muted { color: var(--muted) !important; } .skip-link { position: absolute; left: 0; top: -100px; background: var(--gold); color: var(--gold-ink); padding: .5rem 1rem; z-index: 2000; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { top: 0; } ::selection { background: var(--gold-3); } :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } /* Bootstrap mapping */ .btn { border-radius: 999px; padding: .62rem 1.3rem; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-head); letter-spacing: .01em; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .btn:active { transform: translateY(1px); } .btn-sm { min-height: 36px; padding: .35rem .95rem; } .btn-primary { --bs-btn-bg: var(--brand-600); --bs-btn-border-color: var(--brand-600); --bs-btn-hover-bg: var(--brand-700); --bs-btn-hover-border-color: var(--brand-700); --bs-btn-active-bg: var(--brand-900); --bs-btn-active-border-color: var(--brand-900); --bs-btn-disabled-bg: var(--brand-500); --bs-btn-disabled-border-color: var(--brand-500); box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-600) 32%, transparent); } .btn-primary:hover { transform: translateY(-2px); } .btn-outline-primary { --bs-btn-color: var(--brand-600); --bs-btn-border-color: var(--brand-600); --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600); --bs-btn-active-bg: var(--brand-700); --bs-btn-active-border-color: var(--brand-700); } .btn-gold { --bs-btn-bg: var(--gold); --bs-btn-border-color: var(--gold); --bs-btn-color: #2b1f00; --bs-btn-hover-bg: var(--gold-2); --bs-btn-hover-border-color: var(--gold-2); --bs-btn-hover-color: #2b1f00; --bs-btn-active-bg: #bf8f14; --bs-btn-active-border-color: #bf8f14; --bs-btn-active-color: #2b1f00; box-shadow: 0 8px 20px rgba(217, 165, 32, .38); } .btn-gold:hover { transform: translateY(-2px); } .btn-outline-light { --bs-btn-hover-color: var(--brand-900); } .btn-glass { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.55); backdrop-filter: blur(6px); } .btn-glass:hover { background: rgba(255,255,255,.26); color: #fff; } .badge-brand { background: var(--brand-100); color: var(--brand-900); font-weight: 600; border-radius: 999px; padding: .35em .85em; } .badge-gold { background: var(--gold-3); color: var(--gold-ink); font-weight: 600; border-radius: 999px; padding: .35em .85em; } .form-control, .form-select { min-height: 48px; border-radius: var(--radius-sm); border-color: var(--line); font-size: max(1rem, calc(1rem * var(--fs-scale))); background-color: #fff; } textarea.form-control { min-height: 110px; } .form-control:focus, .form-select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--brand-500) 22%, transparent); } .form-label { font-weight: 600; color: var(--brand-900); margin-bottom: .35rem; } .form-check-input:checked { background-color: var(--brand-600); border-color: var(--brand-600); } .page-link { color: var(--brand-600); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .active > .page-link, .page-link.active { background: var(--brand-600); border-color: var(--brand-600); } .accordion-button { min-height: 58px; font-weight: 600; color: var(--brand-900); gap: .6rem; font-family: var(--font-head); font-size: calc(1rem * var(--fs-scale)); } .accordion-button:not(.collapsed) { background: var(--accent-soft, var(--brand-50)); color: var(--accent-ink, var(--brand-900)); box-shadow: inset 0 -1px 0 var(--line); } .accordion-button:focus { box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--brand-500) 22%, transparent); } .accordion-item { border-color: var(--line); } .breadcrumb { --bs-breadcrumb-divider: '›'; font-size: calc(.88rem * var(--fs-scale)); margin: 0; } .breadcrumb a { color: rgba(255,255,255,.82); } .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.55); } .breadcrumb .active { color: var(--gold-2); } .table > :not(caption) > * > * { padding: .7rem .8rem; } .table thead th { background: var(--brand-50); color: var(--brand-900); font-weight: 600; border-bottom: 2px solid var(--brand-100); font-family: var(--font-head); } .alert { border-radius: var(--radius-sm); } .alert-brand { background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-900); } /* ---------- Top info strip + header ---------- */ .topbar { display: none; background: var(--brand-900); color: rgba(255,255,255,.85); font-size: .82rem; } .topbar .container { display: flex; align-items: center; gap: 1.25rem; min-height: 36px; } .topbar a { color: rgba(255,255,255,.88); display: inline-flex; align-items: center; gap: .35rem; } .topbar a:hover { color: var(--gold-2); } .topbar .topbar-badge { margin-left: auto; background: var(--gold); color: var(--gold-ink); border-radius: 999px; padding: .08rem .75rem; font-weight: 700; font-family: var(--font-head); animation: pulse-badge 2.6s ease-in-out infinite; } @keyframes pulse-badge { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 201, 76, .55); } 50% { box-shadow: 0 0 0 7px rgba(242, 201, 76, 0); } } .site-header { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.94); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .25s ease, background .25s ease; } .site-header::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--brand-600), var(--gold) 50%, var(--accent-2, var(--brand-900))); } .site-header.is-scrolled { box-shadow: var(--shadow-sm); background: rgba(255,255,255,.98); } .site-nav { min-height: var(--nav-h); padding: .45rem calc(var(--bs-gutter-x, 1.5rem) * .5) .3rem; } /* container + navbar on one element: keep the container gutters */ .brand-logo { height: 44px; width: auto; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-text .brand-name { font-family: var(--font-head); font-weight: 700; color: var(--brand-900); font-size: 1.02rem; white-space: nowrap; } .brand-text .brand-sub { font-size: .7rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; } .nav-tools { display: flex; align-items: center; gap: .35rem; } .nav-toggle { border: 0; background: var(--brand-50); color: var(--brand-900); width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; } .desktop-nav { display: none; } .desktop-nav .nav-link { color: var(--ink); font-weight: 600; padding: .6rem .8rem; border-radius: 999px; font-family: var(--font-head); font-size: .95rem; white-space: nowrap; } .desktop-nav .nav-link:hover, .desktop-nav .nav-link.active, .desktop-nav .show > .nav-link { background: var(--brand-50); color: var(--brand-700); } .desktop-nav .dropdown-menu { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); padding: .55rem; margin-top: .55rem; min-width: 17rem; border-top: 4px solid var(--brand-600); } .desktop-nav .dropdown-item { border-radius: var(--radius-sm); padding: .58rem .9rem; color: var(--ink); display: flex; align-items: center; gap: .65rem; font-weight: 500; } .desktop-nav .dropdown-item:hover, .desktop-nav .dropdown-item.active { background: var(--brand-50); color: var(--brand-900); } .desktop-nav .dropdown-item .bi { color: var(--brand-600); width: 1.2rem; text-align: center; } .nav-cta { display: none; } .theme-picker { display: flex; gap: .4rem; align-items: center; } .theme-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; padding: 0; } .theme-dot[data-theme-pick="maroon"] { background: linear-gradient(135deg, #861e1d 50%, #312465 50%); } .theme-dot[data-theme-pick="indigo"] { background: linear-gradient(135deg, #3b2d86 50%, #d9a520 50%); } .theme-dot[data-theme-pick="green"] { background: linear-gradient(135deg, #0a6b45 50%, #1b3f7a 50%); } .theme-dot[data-theme-pick="navy"] { background: linear-gradient(135deg, #1b3f7a 50%, #0a6b45 50%); } .theme-dot[data-theme-pick="teal"] { background: linear-gradient(135deg, #10707a 50%, #d9a520 50%); } .theme-dot[data-theme-pick="sunset"] { background: linear-gradient(135deg, #b24f12 50%, #2c2166 50%); } .theme-dot.active { box-shadow: 0 0 0 2.5px var(--gold); } .pattern-picker { display: grid; grid-template-columns: repeat(6, 34px); gap: .4rem; } .pattern-dot { width: 34px; height: 34px; border-radius: 9px; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; padding: 0; background-color: var(--brand-600); background-size: 60px 60px; background-position: center; } .pattern-dot.active { box-shadow: 0 0 0 2.5px var(--gold); } .offcanvas-nav { width: min(88vw, 360px); } .offcanvas-nav .offcanvas-header { background: linear-gradient(140deg, var(--brand-900), var(--brand-600)); color: #fff; padding: 1rem 1.25rem; position: relative; overflow: hidden; } .offcanvas-nav .offcanvas-header::after { content: ''; position: absolute; inset: 0; background-image: var(--pattern); background-size: 110px 110px; opacity: .12; pointer-events: none; } .offcanvas-nav .offcanvas-header > * { position: relative; z-index: 1; } .offcanvas-nav .btn-close { filter: invert(1); opacity: .9; } .offcanvas-nav .offcanvas-body { padding: .5rem 0 1.5rem; } .mobile-cta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .75rem 1.25rem 1rem; } .mobile-menu { list-style: none; margin: 0; padding: 0; } .mobile-menu > li { border-bottom: 1px solid var(--line); } .mobile-menu a, .mobile-menu button { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .9rem 1.25rem; min-height: 52px; color: var(--ink); background: none; border: 0; text-align: start; font: inherit; font-weight: 600; font-family: var(--font-head); } .mobile-menu a.active { color: var(--brand-700); background: var(--brand-50); } .mobile-menu .bi { color: var(--brand-600); font-size: 1.15rem; width: 1.5rem; text-align: center; } .mobile-menu button .bi-chevron-down { margin-left: auto; color: var(--muted); transition: transform .25s; font-size: .9rem; } .mobile-menu button[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); } .mobile-menu .submenu { list-style: none; padding: 0 0 .5rem; margin: 0; background: var(--brand-50); } .mobile-menu .submenu a { padding-left: 3.4rem; min-height: 46px; font-weight: 500; font-family: var(--font-body); } .mobile-tools { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .mobile-tools .tools-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } /* ---------- Bottom action bar (phones; slides away while scrolling down) ---------- */ .bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--bar-h); z-index: 1025; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 18px rgba(0,0,0,.07); transition: transform .3s ease; } .bottom-bar.is-hidden { transform: translateY(110%); } .bottom-bar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; color: var(--brand-900); font-size: .72rem; font-weight: 600; font-family: var(--font-head); min-height: 44px; } .bottom-bar-item .bi { font-size: 1.35rem; color: var(--brand-600); } .bottom-bar-item.is-primary { color: #fff; background: linear-gradient(160deg, var(--brand-600), var(--brand-700)); margin: .45rem .3rem; border-radius: 14px; } .bottom-bar-item.is-primary .bi { color: var(--gold-2); } .bottom-bar-item.is-wa .bi { color: #1faa53; } /* ---------- Hero: cross-fading photo slideshow with a slow zoom ---------- */ .hero { position: relative; overflow: hidden; color: #fff; min-height: 76svh; display: flex; align-items: flex-end; background: linear-gradient(140deg, var(--brand-900), var(--brand-700) 60%, var(--brand-600)); } .hero-slides { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 9s ease-out; } .hero-slide.is-active { opacity: 1; } .hero-slide.is-active img { transform: scale(1.0); } .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.18) 40%, color-mix(in srgb, var(--brand-900) 88%, transparent) 100%), linear-gradient(90deg, color-mix(in srgb, var(--brand-900) 70%, transparent) 0%, transparent 70%); pointer-events: none; } .hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background-image: var(--pattern); background-size: 120px 120px; opacity: .08; pointer-events: none; } .hero-inner { position: relative; z-index: 2; padding-top: 5.5rem; padding-bottom: 2.75rem; width: 100%; } .hero-badge { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px); border-radius: 999px; padding: .3rem .9rem; font-size: calc(.8rem * var(--fs-scale)); font-weight: 600; letter-spacing: .02em; } .hero-badge .bi { color: var(--gold-2); } .hero-title { color: #fff; font-size: clamp(2rem, 8vw, 4rem); margin: .9rem 0 .7rem; font-weight: 800; letter-spacing: -.025em; text-shadow: 0 4px 22px rgba(0,0,0,.35); max-width: 16ch; } .hero-title .hl { color: var(--gold-2); } .hero-tagline { color: rgba(255,255,255,.92); max-width: 38rem; font-size: calc(1.05rem * var(--fs-scale)); text-shadow: 0 2px 10px rgba(0,0,0,.3); } .hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; } .hero-caption { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; font-size: .78rem; color: rgba(255,255,255,.85); background: rgba(0,0,0,.35); border-radius: 999px; padding: .2rem .8rem; display: none; } .hero-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: .9rem; z-index: 3; display: flex; gap: .45rem; } .hero-dots button { width: 10px; height: 10px; border-radius: 999px; border: 0; background: rgba(255,255,255,.5); padding: 0; transition: width .3s, background .3s; } .hero-dots button.active { width: 28px; background: var(--gold-2); } .hero-inner > * { animation: heroIn .9s cubic-bezier(.2, .7, .2, 1) both; } .hero-inner > *:nth-child(2) { animation-delay: .12s; } .hero-inner > *:nth-child(3) { animation-delay: .24s; } .hero-inner > *:nth-child(4) { animation-delay: .36s; } @keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* News ticker under the hero */ .ticker { position: relative; z-index: 3; background: var(--surface); box-shadow: var(--shadow-sm); display: flex; align-items: stretch; } .ticker-label { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; background: var(--gold); color: var(--gold-ink); font-family: var(--font-head); font-weight: 700; padding: .55rem 1rem; font-size: .9rem; } .ticker-label::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-600); animation: blink 1.4s ease-in-out infinite; } @keyframes blink { 50% { opacity: .2; } } .ticker .marquee { flex: 1; margin: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); } .ticker .marquee-group { gap: 2.5rem; padding-right: 2.5rem; align-items: center; } .ticker-item { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 0; white-space: nowrap; color: var(--ink); font-weight: 500; } .ticker-item .badge { font-size: .7rem; } .ticker-item:hover { color: var(--brand-600); } /* ---------- Admission banner ---------- */ .admission-banner { background: linear-gradient(90deg, var(--brand-50), var(--gold-3)); border-bottom: 1px solid var(--line); color: var(--brand-900); } .admission-banner .inner { display: flex; flex-direction: column; gap: .6rem; padding-top: 1rem; padding-bottom: 1rem; } .admission-banner .ab-icon { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; background: var(--brand-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-600) 35%, transparent); } /* ---------- Counters ---------- */ .stats-strip { position: relative; background: linear-gradient(110deg, var(--brand-700), var(--brand-600) 55%, var(--brand-500)); color: #fff; overflow: hidden; } .stats-strip::before { content: ''; position: absolute; inset: 0; background-image: var(--pattern); background-size: 120px 120px; opacity: .1; pointer-events: none; } .stats-grid { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; padding: 1.75rem 0; } .stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); padding: 1rem .75rem; text-align: center; backdrop-filter: blur(4px); } .stat .bi { font-size: 1.5rem; color: var(--gold-2); } .stat-value { font-family: var(--font-head); font-size: 2rem; font-weight: 800; line-height: 1.1; color: #fff; margin-top: .2rem; } .stat-label { color: rgba(255,255,255,.85); font-size: calc(.86rem * var(--fs-scale)); } /* Quick links: colourful icon tiles */ .quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .quick-tile { display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem; border-radius: var(--radius); background: linear-gradient(160deg, var(--surface) 40%, var(--accent-soft)); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; height: 100%; } .quick-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--ink); } .quick-tile .qi { width: 48px; height: 48px; border-radius: 14px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; box-shadow: 0 8px 16px color-mix(in srgb, var(--accent) 35%, transparent); } .accent-2 .qi, .quick-tile.accent-2 .qi { color: var(--gold-ink); } .quick-tile h3 { font-size: calc(1rem * var(--fs-scale)); margin: 0; color: var(--accent-ink); } .quick-tile p { font-size: calc(.86rem * var(--fs-scale)); color: var(--muted); margin: 0; } /* ---------- Sections and home shades ---------- */ .section { padding: 3.25rem 0; position: relative; } .section-alt { background: var(--surface); } .section[class*="shade-"]::before { content: ''; position: absolute; inset: 0; background-image: var(--pattern); background-size: 120px 120px; opacity: .08; pointer-events: none; } .section[class*="shade-"] > * { position: relative; } .shade-1 { background: color-mix(in srgb, var(--brand-600) 5%, #fff); } .shade-2 { background: color-mix(in srgb, var(--gold) 12%, #fff); } .shade-3 { background: color-mix(in srgb, var(--brand-600) 12%, #fff); } .shade-4 { background: color-mix(in srgb, var(--accent-2, var(--brand-600)) 11%, #fff); } .shade-5 { background: color-mix(in srgb, var(--brand-600) 20%, #fff); } .shade-6 { background: color-mix(in srgb, var(--gold) 22%, #fff); } .shade-7 { background: linear-gradient(160deg, var(--brand-900), var(--brand-700)); color: rgba(255,255,255,.92); } .shade-1::before, .shade-2::before, .shade-3::before, .shade-4::before, .shade-5::before, .shade-6::before { filter: invert(1); opacity: .05; } /* the patterns are drawn white for dark grounds */ .shade-7 .section-title, .shade-7 h3 { color: #fff; } .shade-7 .section-sub { color: rgba(255,255,255,.78); } .shade-7 .section-link { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.6); --bs-btn-hover-bg: var(--gold); --bs-btn-hover-border-color: var(--gold); --bs-btn-hover-color: var(--gold-ink); } .shade-7 .btn-primary { --bs-btn-bg: var(--gold); --bs-btn-border-color: var(--gold); --bs-btn-color: var(--gold-ink); --bs-btn-hover-bg: var(--gold-2); --bs-btn-hover-border-color: var(--gold-2); --bs-btn-hover-color: var(--gold-ink); } .shade-7 .empty-state { color: rgba(255,255,255,.78); } .shade-7 .card-soft, .shade-7 .up-item, .shade-7 .testimonial { color: var(--ink); } .section-heading { margin-bottom: 1.75rem; } .section-kicker { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-head); font-weight: 700; font-size: calc(.78rem * var(--fs-scale)); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-600); } .section-kicker::before { content: ''; width: 26px; height: 3px; border-radius: 3px; background: var(--gold); } .shade-7 .section-kicker { color: var(--gold-2); } .section-title { font-size: clamp(1.55rem, 5vw, 2.35rem); margin: .3rem 0 .35rem; } .section-sub { color: var(--muted); margin: 0; } .section-heading.text-center .section-kicker { justify-content: center; } .section-heading .section-link { margin-top: .85rem; } /* ---------- Cards ---------- */ .card-soft { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .28s ease, box-shadow .28s ease; overflow: hidden; } .card-soft::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent, var(--brand-600)), var(--gold-2)); z-index: 1; } a.card-soft:hover, .card-soft.is-link:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .card-media { aspect-ratio: 16 / 10; background: var(--brand-50); overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .card-soft:hover .card-media img { transform: scale(1.05); } .card-body-p { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .news-card { display: flex; flex-direction: column; height: 100%; color: inherit; } .news-card .news-date { color: var(--brand-700); font-size: calc(.82rem * var(--fs-scale)); display: inline-flex; align-items: center; gap: .4rem; background: var(--brand-50); border-radius: 999px; padding: .15rem .7rem; align-self: flex-start; font-weight: 600; } .news-card .news-title { font-size: calc(1.1rem * var(--fs-scale)); margin: 0; color: var(--brand-900); } .news-card .news-summary { color: var(--muted); font-size: calc(.93rem * var(--fs-scale)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .news-card .news-more { margin-top: auto; font-weight: 600; font-size: calc(.9rem * var(--fs-scale)); display: inline-flex; align-items: center; gap: .3rem; } .type-chip { font-size: calc(.72rem * var(--fs-scale)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: .12rem .6rem; } .type-news { background: var(--sky-50); color: #0b3552; } .type-notice { background: var(--gold-3); color: var(--gold-ink); } .type-circular { background: var(--violet-50); color: #2a1a66; } .icon-card { padding: 1.35rem 1.25rem; display: flex; flex-direction: column; gap: .6rem; height: 100%; background: linear-gradient(165deg, var(--surface) 55%, var(--accent-soft)); } .icon-card .ic { width: 54px; height: 54px; border-radius: 16px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 32%, transparent); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); } .icon-card:hover .ic { transform: rotate(-8deg) scale(1.08); } .accent-2 .ic { color: var(--gold-ink); } .icon-card h3 { font-size: calc(1.08rem * var(--fs-scale)); margin: 0; color: var(--accent-ink); } .icon-card p { margin: 0; color: var(--muted); font-size: calc(.93rem * var(--fs-scale)); } .person-card { text-align: center; padding: 1.5rem 1.1rem 1.3rem; height: 100%; display: flex; flex-direction: column; align-items: center; gap: .35rem; } .avatar { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--accent, var(--brand-100)); background: var(--accent-soft, var(--brand-50)); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--accent-ink, var(--brand-900)); margin-bottom: .6rem; } .avatar-sm { width: 64px; height: 64px; font-size: 1.2rem; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent, var(--brand-100)); margin-bottom: 0; } .person-card h3 { font-size: calc(1.05rem * var(--fs-scale)); margin: 0; } .person-card .role { color: var(--brand-600); font-weight: 600; font-size: calc(.88rem * var(--fs-scale)); } .person-card .meta { color: var(--muted); font-size: calc(.84rem * var(--fs-scale)); } .staff-row { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; height: 100%; } .staff-row h3 { font-size: calc(1rem * var(--fs-scale)); margin: 0; } .staff-row .role { color: var(--brand-600); font-weight: 600; font-size: calc(.84rem * var(--fs-scale)); } .staff-row .meta { color: var(--muted); font-size: calc(.8rem * var(--fs-scale)); } .message-card { padding: 1.5rem; display: grid; gap: 1.25rem; align-items: center; background: linear-gradient(160deg, var(--surface), var(--brand-50)); } .message-card .quote-mark { font-size: 3rem; color: var(--gold); line-height: 1; font-family: Georgia, serif; } .message-card blockquote { font-size: calc(1.08rem * var(--fs-scale)); color: var(--ink); margin: 0 0 .75rem; font-style: italic; } .topper-card { text-align: center; padding: 1.4rem 1rem 1.2rem; height: 100%; background: linear-gradient(170deg, var(--gold-3), var(--surface) 55%); } .topper-card .score { display: inline-block; margin-top: .35rem; background: var(--brand-600); color: #fff; border-radius: 999px; padding: .2rem .85rem; font-family: var(--font-head); font-weight: 700; font-size: calc(.95rem * var(--fs-scale)); } .topper-card .rank { position: absolute; top: .8rem; right: .8rem; background: var(--gold); color: var(--gold-ink); border-radius: 999px; padding: .1rem .6rem; font-weight: 800; font-size: .78rem; z-index: 2; } .testimonial { padding: 1.4rem 1.3rem; height: 100%; display: flex; flex-direction: column; gap: .8rem; background: var(--surface); } .testimonial blockquote { margin: 0; color: var(--ink); font-size: calc(.98rem * var(--fs-scale)); } .testimonial blockquote::before { content: '“'; font-family: Georgia, serif; font-size: 2.6rem; line-height: 0; vertical-align: -.45em; color: var(--gold); margin-right: .15rem; } .testimonial .who { display: flex; align-items: center; gap: .7rem; margin-top: auto; } .testimonial .who strong { display: block; color: var(--brand-900); font-family: var(--font-head); } .testimonial .who span { color: var(--muted); font-size: calc(.84rem * var(--fs-scale)); } .stars { color: var(--gold); letter-spacing: .08em; } /* Upcoming (calendar) list */ .up-list { display: grid; gap: .6rem; } .up-item { display: flex; gap: .85rem; align-items: center; background: var(--surface); border-radius: var(--radius-sm); padding: .65rem .8rem; box-shadow: var(--shadow-sm); border-left: 4px solid var(--accent, var(--brand-600)); } .up-date { flex: 0 0 auto; width: 54px; text-align: center; border-radius: 12px; background: var(--accent-soft, var(--brand-50)); color: var(--accent-ink, var(--brand-900)); padding: .25rem 0; font-family: var(--font-head); line-height: 1.1; } .up-date .d { display: block; font-size: 1.35rem; font-weight: 800; } .up-date .m { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } .up-item h4 { font-size: calc(.98rem * var(--fs-scale)); margin: 0; color: var(--ink); font-family: var(--font-body); font-weight: 600; } .up-item .up-meta { font-size: calc(.8rem * var(--fs-scale)); color: var(--muted); } .tone-holiday { --accent: var(--coral); --accent-soft: var(--coral-50); --accent-ink: #5e1b0e; } .tone-activity { --accent: var(--leaf); --accent-soft: var(--leaf-50); --accent-ink: #0d3d22; } .tone-exam { --accent: var(--violet); --accent-soft: var(--violet-50); --accent-ink: #2a1a66; } /* Video + lite YouTube */ .video-card { display: block; color: inherit; } .video-thumb { position: relative; aspect-ratio: 16 / 9; background: #0d1015 center / cover no-repeat; } .video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .play-btn { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--brand-700); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; box-shadow: 0 10px 26px rgba(0,0,0,.35); transition: transform .25s ease, background .25s ease; padding-left: 4px; } .video-card:hover .play-btn, .lite-yt:hover .lite-yt-play { transform: scale(1.1); background: var(--gold); color: var(--gold-ink); } .video-card .video-title { padding: .85rem 1rem 1rem; font-size: calc(.98rem * var(--fs-scale)); color: var(--brand-900); margin: 0; font-weight: 600; } .lite-yt { position: relative; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; cursor: pointer; overflow: hidden; border-radius: var(--radius-sm); } .lite-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .lite-yt-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--brand-700); border: 0; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; box-shadow: 0 10px 26px rgba(0,0,0,.35); transition: transform .25s ease, background .25s ease; padding-left: 5px; } .video-carousel { max-width: 760px; margin: 0 auto; padding-bottom: 2.6rem; } .video-carousel .carousel-indicators { margin-bottom: 0; } .video-carousel .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; } .carousel-dark .carousel-indicators [data-bs-target] { background-color: var(--brand-600); } /* ---------- Gallery ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .gallery-tile { position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; background: var(--brand-50); aspect-ratio: 4 / 3; } .gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .gallery-tile:hover img { transform: scale(1.07); } .gallery-tile .tile-play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--brand-700); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; padding-left: 3px; } .gallery-tile .tile-caption { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); color: #fff; padding: 1.3rem .65rem .5rem; font-size: calc(.84rem * var(--fs-scale)); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; } .gallery-tile:hover .tile-caption, .gallery-tile:focus .tile-caption { opacity: 1; transform: none; } .album-card { display: block; color: inherit; height: 100%; } .album-cover { aspect-ratio: 4 / 3; background: var(--brand-50) center / cover no-repeat; position: relative; } .album-cover .album-count { position: absolute; right: .6rem; bottom: .6rem; background: rgba(0,0,0,.58); color: #fff; border-radius: 999px; padding: .2rem .7rem; font-size: calc(.76rem * var(--fs-scale)); display: inline-flex; gap: .5rem; z-index: 1; } .album-card .album-body { padding: .95rem 1.05rem 1.15rem; } .album-card .album-title { font-size: calc(1.05rem * var(--fs-scale)); margin: 0 0 .2rem; color: var(--brand-900); } .album-card .album-meta { color: var(--muted); font-size: calc(.85rem * var(--fs-scale)); } .year-chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 42px; padding: .35rem 1.05rem; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--brand-600); color: var(--brand-700); font-family: var(--font-head); font-weight: 600; font-size: calc(.92rem * var(--fs-scale)); transition: background .2s, color .2s, transform .2s; } .chip:hover, .chip.active { background: var(--brand-600); color: #fff; transform: translateY(-1px); } /* Album / event cards cycle through random photos with a random transition (site.js) */ .slideshow { overflow: hidden; isolation: isolate; } .slideshow .slides { position: absolute; inset: 0; overflow: hidden; } .slideshow .slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1), clip-path .9s ease, filter .9s ease; } .slideshow .fx-fade { opacity: 0; } .slideshow .fx-zoom-in { opacity: 0; transform: scale(1.25); } .slideshow .fx-zoom-out { opacity: 0; transform: scale(.8); } .slideshow .fx-blur { opacity: 0; filter: blur(12px); } .slideshow .fx-left { transform: translateX(100%); } .slideshow .fx-right { transform: translateX(-100%); } .slideshow .fx-up { transform: translateY(100%); } .slideshow .fx-down { transform: translateY(-100%); } .slideshow .fx-wipe { clip-path: inset(0 0 0 100%); } .slideshow .fx-wipe-r { clip-path: inset(0 100% 0 0); } .slideshow .is-in { opacity: 1; transform: none; } .slideshow .fx-blur.is-in { filter: blur(0); } .slideshow .fx-wipe.is-in, .slideshow .fx-wipe-r.is-in { clip-path: inset(0); } .slideshow .is-out.fx-left { transform: translateX(-100%); } .slideshow .is-out.fx-right { transform: translateX(100%); } .slideshow .is-out.fx-up { transform: translateY(-100%); } .slideshow .is-out.fx-down { transform: translateY(100%); } /* ---------- Page header (inner pages) ---------- */ .page-header { position: relative; background: linear-gradient(135deg, var(--brand-900), var(--brand-700) 60%, var(--brand-600)); color: #fff; padding: 2.1rem 0 2.4rem; overflow: hidden; } .page-header::before { content: ''; position: absolute; inset: 0; background-image: var(--pattern); background-size: 120px 120px; opacity: .1; pointer-events: none; } .page-header::after { content: ''; position: absolute; width: 46vw; height: 46vw; max-width: 460px; max-height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(242,201,76,.32) 0%, rgba(242,201,76,0) 65%); right: -12vw; top: -18vw; pointer-events: none; } .page-header .container { position: relative; } .page-title { color: #fff; font-size: clamp(1.7rem, 6vw, 2.7rem); margin: .45rem 0 .3rem; font-weight: 800; } .page-sub { color: rgba(255,255,255,.88); margin: 0; max-width: 46rem; } .page-header .wave { position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; color: var(--paper); } /* ---------- Prose (rich text from the admin) ---------- */ .prose { max-width: 50rem; } .prose p { margin-bottom: 1rem; } .prose h2 { font-size: calc(1.4rem * var(--fs-scale)); margin: 1.6rem 0 .6rem; } .prose h3 { font-size: calc(1.2rem * var(--fs-scale)); margin: 1.4rem 0 .5rem; } .prose img { border-radius: var(--radius-sm); } .prose ul { padding-left: 1.25rem; } .prose li { margin-bottom: .35rem; } .prose blockquote { border-left: 4px solid var(--gold); background: var(--brand-50); padding: .85rem 1.1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .prose table { width: 100%; margin: 1rem 0; border-collapse: collapse; } .prose th, .prose td { border: 1px solid var(--line); padding: .5rem .7rem; } .lead-text { font-size: calc(1.18rem * var(--fs-scale)); color: var(--ink); } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.35rem; } .panel-tint { background: linear-gradient(160deg, var(--brand-50), var(--surface)); } .check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; } .check-list li { display: flex; gap: .6rem; align-items: flex-start; } .check-list li::before { content: '\F26A'; font-family: 'bootstrap-icons'; color: var(--leaf); flex: 0 0 auto; margin-top: .05rem; } /* ---------- Tables (fees, disclosure) ---------- */ .data-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); } .data-table th, .data-table td { padding: .75rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; } .data-table thead th { background: var(--brand-600); color: #fff; font-family: var(--font-head); font-weight: 600; border-bottom: 0; } .data-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--brand-50) 55%, #fff); } .data-table tbody tr:hover td { background: var(--brand-50); } .data-table tr:last-child td { border-bottom: 0; } .data-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .data-table td.label-cell { font-weight: 600; color: var(--brand-900); width: 45%; } .table-stack thead { display: none; } .table-stack tbody tr { display: block; border-bottom: 1px solid var(--line); padding: .35rem 0; } .table-stack tbody td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .4rem .9rem; } .table-stack tbody td::before { content: attr(data-label); color: var(--muted); font-size: calc(.84rem * var(--fs-scale)); flex: 0 0 45%; } .table-stack tbody td.num { text-align: right; } .term-card { padding: 1rem 1.1rem; height: 100%; } .term-card .t-name { font-family: var(--font-head); font-weight: 700; color: var(--brand-900); } .term-card .t-pct { font-size: 1.6rem; font-weight: 800; color: var(--brand-600); font-family: var(--font-head); } .doc-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; } .doc-missing { color: var(--muted); font-style: italic; font-size: calc(.88rem * var(--fs-scale)); } /* ---------- Calendar ---------- */ .cal-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; } .cal-filter { border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink); border-radius: 999px; padding: .3rem .9rem; font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; gap: .4rem; } .cal-filter[aria-pressed="false"] { background: var(--surface); opacity: .6; } .cal-month { margin-bottom: 1.6rem; } .cal-month > h2 { font-size: calc(1.2rem * var(--fs-scale)); display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; } .cal-month.is-current > h2::after { content: 'This month'; font-size: .72rem; background: var(--gold); color: var(--gold-ink); border-radius: 999px; padding: .1rem .6rem; font-family: var(--font-body); } .cal-item { display: flex; gap: .85rem; align-items: flex-start; background: var(--surface); border-radius: var(--radius-sm); padding: .75rem .85rem; box-shadow: var(--shadow-sm); border-left: 4px solid var(--accent); margin-bottom: .55rem; transition: opacity .3s, transform .3s; } .cal-item.is-past { opacity: .6; } .cal-item.is-hidden { display: none; } .cal-item .up-date { width: 58px; } /* ---------- Results (OTP) ---------- */ .otp-card { max-width: 500px; margin: 0 auto; padding: 1.6rem 1.35rem; } .otp-card .form-control { font-size: 1.3rem; letter-spacing: .08em; min-height: 56px; text-align: center; } .otp-input { letter-spacing: .5em !important; font-size: 1.7rem !important; font-weight: 700; } .otp-steps { display: flex; justify-content: center; gap: .6rem; margin-bottom: 1.1rem; } .otp-steps span { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .85rem; color: var(--muted); } .otp-steps span b { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-50); color: var(--brand-900); display: inline-flex; align-items: center; justify-content: center; } .otp-steps span.active { color: var(--brand-900); } .otp-steps span.active b { background: var(--brand-600); color: #fff; } .otp-steps span.done b { background: var(--leaf); color: #fff; } .otp-error { display: none; } .otp-error.show { display: block; } .dev-code { background: repeating-linear-gradient(45deg, #fff8e1, #fff8e1 10px, #fff1c2 10px, #fff1c2 20px); border: 1px dashed var(--gold); border-radius: var(--radius-sm); padding: .6rem .8rem; font-size: .9rem; } .card-frame { width: 100%; min-height: 70vh; border: 0; background: #fff; border-radius: var(--radius-sm); } .student-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } /* ---------- Contact ---------- */ .contact-card { padding: 1.2rem; display: flex; gap: 1rem; align-items: flex-start; height: 100%; } .contact-card .ci { width: 50px; height: 50px; border-radius: 15px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: 0 0 auto; } .contact-card h3 { font-size: calc(1.02rem * var(--fs-scale)); margin: 0 0 .25rem; } .contact-card a { word-break: break-word; } .map-frame { border-radius: var(--radius); overflow: hidden; border: 4px solid #fff; box-shadow: var(--shadow); } .map-frame iframe { width: 100%; height: 330px; border: 0; display: block; } .social-links { display: flex; flex-wrap: wrap; gap: .5rem; } .social-links a { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--brand-50); color: var(--brand-700); transition: transform .2s, background .2s; } .social-links a:hover { background: var(--brand-600); color: #fff; transform: translateY(-2px); } .play-badge { display: inline-flex; align-items: center; gap: .6rem; background: #111; color: #fff; border-radius: 12px; padding: .45rem .9rem; font-weight: 600; } .play-badge:hover { color: #fff; background: #000; } .play-badge .bi { font-size: 1.4rem; } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--brand-700), var(--brand-600) 50%, var(--accent-2, var(--brand-900))); color: #fff; border-radius: var(--radius); padding: 1.8rem 1.4rem; box-shadow: var(--shadow); } .cta-band::before { content: ''; position: absolute; inset: 0; background-image: var(--pattern); background-size: 110px 110px; opacity: .12; pointer-events: none; } .cta-band > * { position: relative; } .cta-band h2 { color: #fff; font-size: clamp(1.4rem, 5vw, 2rem); margin: 0 0 .4rem; } .cta-band p { color: rgba(255,255,255,.9); margin: 0 0 1rem; } /* ---------- Footer ---------- */ .site-footer { position: relative; background: linear-gradient(165deg, var(--brand-900), #0f0d18); color: rgba(255,255,255,.82); padding: 3rem 0 1.5rem; overflow: hidden; } .site-footer::before { content: ''; position: absolute; inset: 0; background-image: var(--pattern); background-size: 120px 120px; opacity: .06; pointer-events: none; } .site-footer::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--brand-500), var(--gold), var(--accent-2, var(--brand-500))); } .site-footer .container { position: relative; } .footer-title { color: var(--gold-2); font-size: calc(1rem * var(--fs-scale)); margin-bottom: .8rem; text-transform: uppercase; letter-spacing: .08em; } .footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; } .footer-links a { color: rgba(255,255,255,.84); display: inline-flex; align-items: flex-start; gap: .45rem; min-height: 30px; } .footer-links a:hover { color: var(--gold-2); } .footer-brand { display: flex; align-items: center; gap: .8rem; } .footer-brand img { height: 62px; width: auto; background: #fff; border-radius: 14px; padding: 6px; } .footer-brand .fb-name { color: #fff; font-family: var(--font-head); font-weight: 700; font-size: calc(1.08rem * var(--fs-scale)); line-height: 1.3; } .footer-aff { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; } .footer-aff span { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .12rem .7rem; font-size: .8rem; } .site-footer .social-links a { background: rgba(255,255,255,.09); color: #fff; } .site-footer .social-links a:hover { background: var(--gold); color: var(--gold-ink); } .footer-counter { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .85rem; color: rgba(255,255,255,.7); margin-top: 1rem; } .footer-counter strong { color: #fff; font-variant-numeric: tabular-nums; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1rem; font-size: calc(.84rem * var(--fs-scale)); color: rgba(255,255,255,.66); display: flex; flex-direction: column; gap: .5rem; } .footer-bottom a { color: rgba(255,255,255,.78); } /* ---------- Empty state, toasts ---------- */ .empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--muted); } .empty-state .bi { font-size: 2.6rem; color: var(--brand-500); display: block; margin-bottom: .5rem; } .toast-copy { position: fixed; bottom: calc(var(--bar-h) + 1rem); left: 50%; transform: translateX(-50%); background: var(--brand-900); color: #fff; border-radius: 999px; padding: .5rem 1.1rem; font-size: calc(.9rem * var(--fs-scale)); z-index: 1100; opacity: 0; transition: opacity .25s; pointer-events: none; } .toast-copy.show { opacity: 1; } .back-top { position: fixed; right: 1rem; bottom: calc(var(--bar-h) + 1rem); z-index: 1020; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--brand-600); color: #fff; box-shadow: var(--shadow); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .3s, transform .3s; } .back-top.show { opacity: 1; transform: none; pointer-events: auto; } /* ============================================================================= Motion: show / hide animations (every time content enters the screen) ========================================================================== */ [data-animate] { transition: opacity .75s ease, transform .85s cubic-bezier(.16, 1, .3, 1), filter .75s ease; transition-delay: var(--d, 0s); } [data-animate]:not(.is-visible) { opacity: 0; } [data-animate="up"]:not(.is-visible) { transform: translateY(34px); } [data-animate="down"]:not(.is-visible) { transform: translateY(-26px); } [data-animate="left"]:not(.is-visible) { transform: translateX(-46px); } [data-animate="right"]:not(.is-visible) { transform: translateX(46px); } [data-animate="zoom"]:not(.is-visible) { transform: scale(.9); } [data-animate="flip"]:not(.is-visible) { transform: perspective(800px) rotateX(18deg) translateY(20px); } [data-animate="blur"]:not(.is-visible) { filter: blur(10px); transform: translateY(14px); } /* Home sections slide in from a side (the section box never moves, so it can be observed) */ .slide-section { --slide-x: 100vw; } .slide-section > * { opacity: .08; transform: translateX(var(--slide-x)); transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1); will-change: transform, opacity; } .slide-section.from-left { --slide-x: -100vw; } .slide-section.is-visible > * { opacity: 1; transform: none; } .slide-section [data-animate] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; } .dropdown-menu.show { animation: fadeDown .2s ease; } @keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* "Read more": a smooth reveal */ .expander { position: relative; overflow: hidden; transition: max-height .6s cubic-bezier(.2, .7, .2, 1); } .expander:not(.is-open)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(to bottom, transparent, var(--expander-bg, var(--paper))); pointer-events: none; } .expander-toggle .bi { transition: transform .3s; } .expander-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); } /* Filter chips fade items in and out */ .is-filtering .filter-item { transition: opacity .35s ease, transform .35s ease; } .filter-item.is-leaving { opacity: 0; transform: scale(.96); } .filter-item.is-hidden { display: none; } /* No animation: reduced-motion users and screenshots (?noanim=1) */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-animate], .slide-section > *, .hero-inner > * { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; } .hero-slide img { transform: none !important; transition: none !important; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } html.no-anim [data-animate], html.no-anim .slide-section > *, html.no-anim .hero-inner > * { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; } html.no-anim .marquee-track { animation: none !important; } html.no-anim .hero-slide img { transform: none !important; transition: none !important; } /* ---------- Marquee (news ticker, photo viewer) ---------- */ .marquee { position: relative; overflow: hidden; margin-top: .5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .marquee-track { display: flex; width: max-content; animation: marquee var(--marquee-duration, 50s) linear infinite; } .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; } .marquee-group { display: flex; gap: .8rem; padding-right: .8rem; } .marquee-item { display: block; flex: 0 0 auto; width: 230px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--brand-50); } .marquee-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .marquee-item:hover img { transform: scale(1.06); } @keyframes marquee { to { transform: translateX(-50%); } } .news-marquee .marquee-group { align-items: stretch; gap: 1rem; padding-right: 1rem; } .news-marquee .marquee-item { display: flex; width: min(330px, 82vw); aspect-ratio: auto; border-radius: 0; overflow: visible; box-shadow: none; background: none; } .news-marquee .marquee-item .news-card { width: 100%; } .news-marquee .marquee-item img { height: 100%; } @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .marquee-track { animation: none; } .marquee-group[aria-hidden="true"] { display: none; } } /* ---------- Text size (A- / A+) ---------- */ html { --fs-scale-root: 1; --fs-scale: var(--fs-scale-root); } html[data-font="xs"] { --fs-scale-root: .75; } html[data-font="s"] { --fs-scale-root: .875; } html[data-font="l"] { --fs-scale-root: 1.125; } html[data-font="xl"] { --fs-scale-root: 1.25; } html[data-font="xxl"] { --fs-scale-root: 1.4; } html[data-font="xxxl"] { --fs-scale-root: 1.55; } .site-header, .bottom-bar, .topbar { --fs-scale: 1; } .btn { font-size: calc(var(--bs-btn-font-size) * var(--fs-scale)); } .btn-lg { font-size: var(--bs-btn-font-size); } .lead, .fs-5 { font-size: calc(1.2rem * var(--fs-scale)) !important; } .dropdown-menu { --bs-dropdown-font-size: calc(1rem * var(--fs-scale)); } .pagination { --bs-pagination-font-size: calc(1rem * var(--fs-scale)); } .desktop-nav .dropdown-menu { --bs-dropdown-font-size: 1rem; } .font-ctl { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); font-size: 1rem; } .font-ctl button { background: transparent; border: 0; min-width: 40px; min-height: 38px; padding: 0 .55rem; font-weight: 700; color: var(--brand-900); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; } .font-ctl > * + * { border-left: 1.5px solid var(--line); } .font-ctl button[data-font-step="1"] { font-size: 1.02rem; } .font-ctl .font-level { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 0 .4rem; font-size: .72rem; color: var(--muted); } .font-ctl button:hover { background: var(--brand-50); } .font-ctl button:disabled { opacity: .35; } /* ============================================================================= Larger screens ========================================================================== */ @media (min-width: 576px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; } .quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .admission-banner .inner { flex-direction: row; align-items: center; justify-content: space-between; } .stats-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .section { padding: 4.25rem 0; } .hero { min-height: 82vh; } .hero-inner { padding-top: 7rem; padding-bottom: 4.25rem; } .hero-caption { display: block; } .stats-grid { grid-template-columns: repeat(5, 1fr); gap: 1rem; padding: 2.25rem 0; } .stat-value { font-size: 2.4rem; } .table-stack thead { display: table-header-group; } .table-stack tbody tr { display: table-row; padding: 0; } .table-stack tbody td { display: table-cell; padding: .75rem .9rem; border-bottom: 1px solid var(--line); } .table-stack tbody td::before { content: none; } .map-frame iframe { height: 400px; } .brand-logo { height: 50px; } .otp-card { padding: 2.1rem 2rem; } .message-card { grid-template-columns: auto 1fr; padding: 2rem; } .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } .cta-band { padding: 2.4rem 2.6rem; } .marquee-item { width: 300px; } } @media (min-width: 992px) { body { padding-bottom: 0; } .bottom-bar { display: none; } .back-top { bottom: 1.5rem; } .toast-copy { bottom: 1.5rem; } .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .quick-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .section { padding: 4.75rem 0; } .topbar { display: block; } } /* Home page tiles (large screens): HomeLayout places the sections on a six-column grid (span 2 = a third, 3 = a half, 4 = two thirds, 6 = a band); each section carries its cell as --r/--rs/--c/--s and the edge it touches as data-side. Phones keep the stacked order. A tile is a size container, so the Bootstrap columns inside follow the tile's width instead of the viewport's. */ @media (min-width: 1200px) { .home-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; max-width: 96%; margin: 2.5rem auto; padding-inline: .75rem; } .home-tiles > .section { --tile-px: 1rem; grid-row: var(--r) / span var(--rs, 1); grid-column: var(--c) / span var(--s); container: tile / inline-size; padding: 2.2rem var(--tile-px) 2.4rem; border-radius: calc(var(--radius) + 4px); overflow: hidden; box-shadow: var(--shadow-sm); } .home-tiles > [data-span="2"] { --tile-px: .5rem; } .home-tiles > .section > .container { max-width: none; } .home-tiles > .section > .marquee { margin-inline: calc(-1 * var(--tile-px)); } .home-tiles.layout-rail > [data-span="2"] { display: flex; flex-direction: column; justify-content: center; } } @container tile (max-width: 559px) { .home-tiles [class*="col-lg-"], .home-tiles [class*="col-md-"] { width: 100%; } .home-tiles .quick-grid { grid-template-columns: 1fr; } } @container tile (min-width: 560px) and (max-width: 879px) { .home-tiles .row > .col-lg-4, .home-tiles .row > .col-lg-3 { width: 50%; } } @media (min-width: 1200px) { .container { max-width: 1220px; } .nav-toggle { display: none; } .desktop-nav { display: flex; align-items: center; } .nav-cta { display: inline-flex; } .site-nav .font-ctl .font-level { display: none; } } @media (min-width: 1360px) { .desktop-nav .nav-link { padding-inline: 1rem; } .site-nav .font-ctl .font-level { display: inline-flex; } } @media print { .topbar, .site-header, .bottom-bar, .site-footer, .hero-actions, .back-top, .ticker { display: none !important; } body { padding: 0; background: #fff; } [data-animate], .slide-section > * { opacity: 1 !important; transform: none !important; } } /* ============================================================================= Page furniture: preview strip, placeholders, the plain hero, small helpers ========================================================================== */ .font-head { font-family: var(--font-head); } .min-w-0 { min-width: 0; } .preview-strip { background: repeating-linear-gradient(45deg, #fff3cf, #fff3cf 12px, #ffe9a8 12px, #ffe9a8 24px); color: var(--gold-ink); text-align: center; font-size: .82rem; font-weight: 600; padding: .25rem .75rem; } .appearance-menu { min-width: 250px; } .page-kicker { display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: var(--gold-2); border-radius: 999px; padding: .1rem .75rem; font-size: calc(.78rem * var(--fs-scale)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-head); } .media-ph { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(140deg, var(--accent, var(--brand-600)), var(--brand-900)); color: rgba(255,255,255,.92); font-size: 2.6rem; overflow: hidden; } .media-ph::before { content: ''; position: absolute; inset: 0; background-image: var(--pattern); background-size: 110px 110px; opacity: .22; } .media-ph .bi { position: relative; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); } .accent-2 .media-ph { background: linear-gradient(140deg, var(--gold), #9a6c05); } .news-card .card-media { display: block; } .news-single { max-width: 560px; } .topper-name { font-size: calc(1.02rem * var(--fs-scale)); margin: .1rem 0 0; } .section-quick { padding: 2rem 0 1rem; } .section-cta { padding: 1.5rem 0 3.5rem; } .testimonial-carousel { max-width: 740px; margin: 0 auto; padding-bottom: 2.6rem; } .testimonial-carousel .carousel-indicators { margin-bottom: 0; } .testimonial-carousel .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; } .hero-caption[hidden] { display: none !important; } .hero-caption .hc-link { color: var(--gold-2); font-weight: 700; margin-left: .6rem; } .hero-caption .hc-link:hover { color: #fff; } .hero-emblem { display: none; } @keyframes floaty { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 12px)); } } @media (max-width: 575.98px) { .stats-grid .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); } .hero-caption { display: flex; align-items: center; } } @media (min-width: 992px) { .quick-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .hero-plain .hero-inner { padding-right: min(38vw, 420px); } .hero-emblem { display: flex; align-items: center; justify-content: center; position: absolute; right: 6%; top: 50%; transform: translateY(-50%); z-index: 2; width: clamp(240px, 26vw, 360px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: 0 0 0 14px rgba(255,255,255,.12), 0 0 0 30px rgba(255,255,255,.06), var(--shadow); animation: floaty 7s ease-in-out infinite; } .hero-emblem img { width: 84%; height: auto; } } @media (prefers-reduced-motion: reduce) { .hero-emblem { animation: none; } } html.no-anim .hero-emblem { animation: none; } /* The darkest shade: light text on the section itself, normal ink inside white panels and cards */ .shade-7 .lead-text, .shade-7 .section-heading ~ p { color: rgba(255,255,255,.9); } .shade-7 .panel, .shade-7 .card-soft { color: var(--ink); } .shade-7 .panel h3, .shade-7 .card-soft h3, .shade-7 .up-item h4 { color: var(--accent-ink, var(--brand-900)); } .shade-7 .badge-brand { background: rgba(255,255,255,.14); color: #fff; } /* ============================================================================= Inner pages ========================================================================== */ .live-note { display: flex; gap: .45rem; align-items: flex-start; color: var(--muted); font-size: calc(.84rem * var(--fs-scale)); margin: 1.25rem 0 0; } .live-note .bi { color: var(--leaf); } .link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; } .link-list a { display: flex; gap: .55rem; align-items: center; padding: .45rem .6rem; border-radius: var(--radius-sm); color: var(--ink); font-weight: 500; } .link-list a:hover { background: var(--surface); color: var(--brand-700); } .link-list .bi { color: var(--brand-600); } .avatar-xl { width: 160px; height: 160px; font-size: 2.8rem; } /* About */ .facts { margin: 0; display: grid; gap: .1rem; } .facts > div { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: .75rem; padding: .55rem 0; border-bottom: 1px dashed var(--line); } .facts > div:last-child { border-bottom: 0; } .facts dt { color: var(--muted); font-weight: 500; font-size: calc(.88rem * var(--fs-scale)); } .facts dd { margin: 0; font-weight: 600; color: var(--brand-900); } .mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; } .mini-stats > div { background: linear-gradient(160deg, var(--brand-600), var(--brand-700)); color: #fff; border-radius: var(--radius-sm); padding: .8rem .5rem; text-align: center; } .mini-stats strong { display: block; font-family: var(--font-head); font-size: 1.6rem; line-height: 1.1; color: var(--gold-2); } .mini-stats span { font-size: .78rem; opacity: .9; } .founder-card { padding: 1.75rem 1.25rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; background: linear-gradient(170deg, var(--gold-3), var(--surface) 60%); } .message-person { top: calc(var(--nav-h) + 1rem); } .message-body { position: relative; font-size: calc(1.05rem * var(--fs-scale)); } .message-body .quote-mark { display: block; font-family: Georgia, serif; font-size: 4rem; line-height: .6; color: var(--gold); margin-bottom: .3rem; } .message-body .signature { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--gold-3); } .prose-cards { max-width: 56rem; } .prose-cards h2 { display: flex; align-items: center; gap: .6rem; } .prose-cards h2::before { content: ''; width: 10px; height: 26px; border-radius: 4px; background: linear-gradient(var(--brand-600), var(--gold)); flex: 0 0 auto; } /* Staff */ .staff-search { position: relative; display: block; min-width: min(100%, 300px); } .staff-search .bi { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .staff-search .form-control { padding-left: 2.4rem; border-radius: 999px; } .staff-row.is-featured { background: linear-gradient(160deg, var(--surface) 55%, var(--gold-3)); } .staff-group[hidden], [data-staff][hidden], tr[hidden] { display: none !important; } /* Disclosure */ .disclosure-toc { display: flex; flex-wrap: wrap; gap: .5rem; } .disclosure-toc .chip { min-height: 38px; font-size: calc(.85rem * var(--fs-scale)); } .disclosure-block { margin-bottom: 2.5rem; } .disclosure-block > h2 { display: flex; align-items: center; gap: .6rem; padding-bottom: .5rem; border-bottom: 3px solid var(--brand-100); margin-bottom: 1rem; } .disclosure-block caption { padding: 0 0 .5rem; } .disclosure-video { max-width: 720px; } /* Academics */ .stage-card { position: relative; } .stage-card .stage-no { position: absolute; top: .9rem; right: 1rem; font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--accent); opacity: .18; } .stage-accordion .accordion-item { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: .6rem; border: 1px solid var(--line); } .stage-accordion .accordion-button .bi { color: var(--accent, var(--brand-600)); font-size: 1.2rem; } .class-card { height: 100%; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent, var(--brand-600)); border-radius: var(--radius-sm); padding: .8rem .9rem; } .subject-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; } .subject-chips span { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .6rem; font-size: calc(.78rem * var(--fs-scale)); color: var(--ink); } .activity-card { text-align: center; align-items: center; } /* Results */ .result-card { padding: 1rem; } .result-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .9rem; } .student-tabs { gap: .5rem; } .student-tabs .chip { cursor: pointer; } /* Achievements */ .board-card { padding: 1.2rem 1.25rem; height: 100%; background: linear-gradient(160deg, var(--surface) 50%, var(--accent-soft, var(--brand-50))); } .board-pct { font-family: var(--font-head); font-weight: 800; font-size: 2.3rem; line-height: 1.1; color: var(--accent, var(--brand-600)); } .board-icon { font-size: 2rem; color: var(--accent, var(--brand-600)); opacity: .5; } .board-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .7rem; font-size: calc(.86rem * var(--fs-scale)); color: var(--muted); } .board-meta strong { color: var(--ink); } /* Downloads */ .doc-card { display: flex; align-items: center; gap: .9rem; padding: .95rem 1rem; height: 100%; color: var(--ink); } .doc-card:hover { color: var(--ink); } .doc-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft, var(--brand-50)); color: var(--accent, var(--brand-600)); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; } .doc-go { color: var(--brand-500); font-size: 1.15rem; transition: transform .25s; } .doc-card:hover .doc-go { transform: translateY(3px); } /* Admissions */ .status-banner { display: flex; gap: 1rem; align-items: center; border-radius: var(--radius); padding: 1rem 1.2rem; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); } .status-banner > .bi { font-size: 2rem; flex: 0 0 auto; } .status-banner.is-open { background: linear-gradient(100deg, var(--leaf-50), var(--surface)); border-color: color-mix(in srgb, var(--leaf) 30%, transparent); } .status-banner.is-open > .bi { color: var(--leaf); } .status-banner.is-closed { background: linear-gradient(100deg, var(--gold-3), var(--surface)); } .status-banner.is-closed > .bi { color: var(--gold-ink); } .steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; } .step { position: relative; display: flex; gap: 1rem; align-items: flex-start; } .step:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 46px; bottom: -.9rem; width: 2px; background: repeating-linear-gradient(var(--line) 0 6px, transparent 6px 10px); } .step-no { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--accent, var(--brand-600)); color: #fff; font-family: var(--font-head); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent, var(--brand-600)) 35%, transparent); } .accent-2 .step-no { color: var(--gold-ink); } .step-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 1rem; flex: 1; box-shadow: var(--shadow-sm); } .step-body h3 .bi { color: var(--accent, var(--brand-600)); } .contact-quick a { color: var(--ink); } .contact-quick a:hover { color: var(--brand-700); } .contact-quick .bi { color: var(--brand-600); } /* Forms */ .form-card { padding: 1.35rem 1.2rem 1.4rem; } fieldset.form-card { min-width: 0; margin-bottom: 1.1rem; } .form-legend { display: flex; align-items: center; gap: .6rem; font-family: var(--font-head); font-weight: 700; font-size: calc(1.15rem * var(--fs-scale)); color: var(--brand-900); margin-bottom: 1rem; } .legend-no { width: 32px; height: 32px; border-radius: 50%; background: var(--accent, var(--brand-600)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; } .accent-2 .legend-no { color: var(--gold-ink); } .req { color: var(--coral); } .hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .choice-row { display: flex; flex-wrap: wrap; gap: .5rem; } .choice { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .4rem 1rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-weight: 500; transition: border-color .2s, background .2s; } .choice:hover { border-color: var(--brand-500); } .choice:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-900); } .choice input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand-600); flex: 0 0 auto; } .choice-block { display: flex; border-radius: var(--radius-sm); align-items: flex-start; padding: .75rem 1rem; } .choice-block input { margin-top: .2rem; } .choice.is-invalid { border-color: #dc3545; } .thanks-card { max-width: 640px; padding: 2rem 1.5rem; text-align: center; } .thanks-icon { display: inline-flex; width: 84px; height: 84px; border-radius: 50%; align-items: center; justify-content: center; font-size: 2.8rem; background: var(--leaf-50); color: var(--leaf); margin-bottom: 1rem; animation: pop .6s cubic-bezier(.3, 1.6, .5, 1) both; } @keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } .ref-code { font-family: var(--font-head); background: var(--gold-3); color: var(--gold-ink); padding: .05rem .5rem; border-radius: 8px; letter-spacing: .04em; white-space: nowrap; } .thanks-steps { text-align: left; max-width: 28rem; margin: 0 auto; display: grid; gap: .4rem; } /* Campus life */ .news-meta-line { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: rgba(255,255,255,.85); font-size: calc(.9rem * var(--fs-scale)); margin-top: .4rem; } .masonry { columns: 1; column-gap: 1rem; } .masonry-item { break-inside: avoid; margin-bottom: 1rem; } .faq-wrap { max-width: 900px; } .faq-accordion .accordion-item { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: .55rem; border: 1px solid var(--line); } .faq-accordion .accordion-button .bi { color: var(--accent, var(--brand-600)); } .job-card { height: 100%; } .facility-card { display: flex; flex-direction: column; height: 100%; color: inherit; } .facility-card:hover { color: inherit; } .page-hero-img { max-height: 460px; object-fit: cover; } .error-page { padding: 4rem 0; } .error-code { font-family: var(--font-head); font-weight: 800; font-size: clamp(4.5rem, 20vw, 8rem); line-height: 1; background: linear-gradient(135deg, var(--brand-600), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (min-width: 768px) { .masonry { columns: 2; } .form-card { padding: 1.75rem 1.8rem; } } @media (min-width: 1200px) { .masonry { columns: 3; } }