/* * MAS Marine Academy — design system layer (Phase 1) * Loaded last, after the legacy Educavo theme. Tokens + base typography + scoped `mas-*` components. * Spec: docs/website-design-reference.md (Part C). Keep this file small; no global layout changes here. */ /* --------------------------------------------------------------------------- * 1. Fonts — zero download. * The legacy theme declares 'Rubik' and 'Nunito' in ~30 places. Instead of fetching them from Google Fonts * (render-blocking @import, 12 weights), alias both names to fonts already installed on the device. * If none of the local() faces exist the browser falls through to the declared `sans-serif`. * ------------------------------------------------------------------------- */ @font-face { font-family: 'Rubik'; font-weight: 300 400; font-style: normal; font-display: swap; src: local('Segoe UI'), local('SegoeUI'), local('Roboto'), local('Roboto-Regular'), local('Helvetica Neue'), local('HelveticaNeue'), local('Arial'), local('ArialMT'); } @font-face { font-family: 'Rubik'; font-weight: 500 600; font-style: normal; font-display: swap; src: local('Segoe UI Semibold'), local('SegoeUI-Semibold'), local('Roboto Medium'), local('Roboto-Medium'), local('Helvetica Neue Medium'), local('HelveticaNeue-Medium'), local('Arial'), local('ArialMT'); } @font-face { font-family: 'Rubik'; font-weight: 700 900; font-style: normal; font-display: swap; src: local('Segoe UI Bold'), local('SegoeUI-Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Arial Bold'), local('Arial-BoldMT'); } @font-face { font-family: 'Nunito'; font-weight: 300 400; font-style: normal; font-display: swap; src: local('Segoe UI'), local('SegoeUI'), local('Roboto'), local('Roboto-Regular'), local('Helvetica Neue'), local('HelveticaNeue'), local('Arial'), local('ArialMT'); } @font-face { font-family: 'Nunito'; font-weight: 500 600; font-style: normal; font-display: swap; src: local('Segoe UI Semibold'), local('SegoeUI-Semibold'), local('Roboto Medium'), local('Roboto-Medium'), local('Helvetica Neue Medium'), local('HelveticaNeue-Medium'), local('Arial'), local('ArialMT'); } @font-face { font-family: 'Nunito'; font-weight: 700 900; font-style: normal; font-display: swap; src: local('Segoe UI Bold'), local('SegoeUI-Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Arial Bold'), local('Arial-BoldMT'); } /* Real italic faces (otherwise the browser slants the upright face). */ @font-face { font-family: 'Rubik'; font-weight: 300 600; font-style: italic; font-display: swap; src: local('Segoe UI Italic'), local('SegoeUI-Italic'), local('Roboto Italic'), local('Roboto-Italic'), local('Helvetica Neue Italic'), local('HelveticaNeue-Italic'), local('Arial Italic'), local('Arial-ItalicMT'); } @font-face { font-family: 'Rubik'; font-weight: 700 900; font-style: italic; font-display: swap; src: local('Segoe UI Bold Italic'), local('SegoeUI-BoldItalic'), local('Roboto Bold Italic'), local('Roboto-BoldItalic'), local('Helvetica Neue Bold Italic'), local('HelveticaNeue-BoldItalic'), local('Arial Bold Italic'), local('Arial-BoldItalicMT'); } @font-face { font-family: 'Nunito'; font-weight: 300 600; font-style: italic; font-display: swap; src: local('Segoe UI Italic'), local('SegoeUI-Italic'), local('Roboto Italic'), local('Roboto-Italic'), local('Helvetica Neue Italic'), local('HelveticaNeue-Italic'), local('Arial Italic'), local('Arial-ItalicMT'); } @font-face { font-family: 'Nunito'; font-weight: 700 900; font-style: italic; font-display: swap; src: local('Segoe UI Bold Italic'), local('SegoeUI-BoldItalic'), local('Roboto Bold Italic'), local('Roboto-BoldItalic'), local('Helvetica Neue Bold Italic'), local('HelveticaNeue-BoldItalic'), local('Arial Bold Italic'), local('Arial-BoldItalicMT'); } /* --------------------------------------------------------------------------- * 2. Tokens * ------------------------------------------------------------------------- */ :root { --mas-navy-900: #0b1f44; --mas-navy-800: #112958; --mas-navy-700: #1b3a73; --mas-blue-600: #1f4fa3; --mas-blue-050: #eef3fb; --mas-red-600: #c8102e; --mas-green-700: #1e7b3c; --mas-gold-400: #f5b700; --mas-ink: #1a2233; --mas-text: #3e4a5e; --mas-muted: #5e6a7d; --mas-border: #e3e8f0; --mas-surface: #f6f8fb; --mas-white: #fff; --mas-font: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Bengali', 'Nirmala UI', Vrinda, sans-serif; /* Re-review 2026-11-04: grey page canvas + flat white blocks (no shadows), 8 px corners — see section 7. */ --mas-canvas: #f3f5f8; --mas-tint: #e9eff8; --mas-radius-sm: 6px; --mas-radius: 8px; --mas-radius-pill: 999px; --mas-shadow-sm: none; --mas-shadow: 0 4px 12px rgba(16, 24, 40, .08); --mas-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12); --mas-ease: cubic-bezier(.4, 0, .2, 1); --mas-section-y: clamp(3rem, 2rem + 4vw, 6rem); } /* --------------------------------------------------------------------------- * 3. Base — minimal, contrast-safe overrides of the legacy theme * ------------------------------------------------------------------------- */ html, body { font-family: var(--mas-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { color: var(--mas-text); } .home-style2 h1, .home-style2 h2, .home-style2 h3, .home-style2 h4, .home-style2 h5, .home-style2 h6 { letter-spacing: -.01em; } /* Legacy link colour #21a7d0 is 2.8:1 on white (fails WCAG AA). */ a { color: var(--mas-blue-600); } a:active, a:hover { color: var(--mas-navy-800); } /* same selectors/specificity as the theme rule */ /* The theme forces `outline: none !important` on links; restore a visible keyboard focus ring. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .btn:focus-visible, iframe:focus-visible { outline: 3px solid var(--mas-blue-600) !important; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .9); } /* --------------------------------------------------------------------------- * 3b. Layout stability (CLS) * The homepage hero reserves its 1920:820 frame and shows slide 1 before Owl starts — see section 5c (Phase 3; * replaced the Phase 1 `.rs-slider.style1` aspect-ratio rule). * ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- * 4. Accessibility utilities * ------------------------------------------------------------------------- */ .mas-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mas-skip-link { position: absolute; left: 1rem; top: -100px; z-index: 10000; padding: .75rem 1rem; border-radius: var(--mas-radius-sm); background: var(--mas-navy-900); color: var(--mas-white) !important; font-weight: 600; } .mas-skip-link:focus { top: 1rem; } /* The skip-link target gets focus programmatically; outlining the whole page area would only confuse. */ .main-content[tabindex="-1"]:focus, .main-content[tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none; } /* --------------------------------------------------------------------------- * 5. Components (scoped — only affect markup that opts in with `mas-*`) * ------------------------------------------------------------------------- */ .mas-section { padding-top: var(--mas-section-y); padding-bottom: var(--mas-section-y); } .mas-section--tint { background: var(--mas-surface); } .mas-section--navy { background: var(--mas-navy-900); color: rgba(255, 255, 255, .85); } .mas-section--navy .mas-title { color: var(--mas-white); } .mas-container-wide { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .mas-eyebrow { display: inline-block; margin-bottom: .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mas-red-600); } .mas-title { margin: 0 0 1rem; font-family: var(--mas-font); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); color: var(--mas-navy-800); } .mas-lead { font-size: 1.0625rem; line-height: 1.7; color: var(--mas-muted); max-width: 65ch; } .mas-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .625rem 1.25rem; border: 2px solid transparent; border-radius: var(--mas-radius-sm); font-family: var(--mas-font); font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color .15s var(--mas-ease), color .15s var(--mas-ease), border-color .15s var(--mas-ease), box-shadow .15s var(--mas-ease), transform .15s var(--mas-ease); } .mas-btn:hover { transform: translateY(-1px); box-shadow: var(--mas-shadow); } .mas-btn--primary { background: var(--mas-blue-600); color: var(--mas-white) !important; } .mas-btn--primary:hover { background: var(--mas-navy-700); } .mas-btn--accent { background: var(--mas-red-600); color: var(--mas-white) !important; } .mas-btn--accent:hover { background: #a50d26; } .mas-btn--outline { background: transparent; border-color: var(--mas-blue-600); color: var(--mas-blue-600) !important; } .mas-btn--outline:hover { background: var(--mas-blue-600); color: var(--mas-white) !important; } .mas-btn--light { background: var(--mas-white); color: var(--mas-navy-800) !important; } .mas-btn--block { display: flex; width: 100%; } .mas-link-arrow { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; color: var(--mas-blue-600); } .mas-link-arrow::after { content: "\2192"; transition: transform .15s var(--mas-ease); } .mas-link-arrow:hover::after { transform: translateX(3px); } .mas-card { display: flex; flex-direction: column; height: 100%; background: var(--mas-white); border: 1px solid var(--mas-border); border-radius: var(--mas-radius); box-shadow: var(--mas-shadow-sm); overflow: hidden; } .mas-card--hover { transition: box-shadow .18s var(--mas-ease), transform .18s var(--mas-ease), border-color .18s var(--mas-ease); } .mas-card--hover:hover { transform: translateY(-3px); box-shadow: var(--mas-shadow-lg); border-color: #cfd8e6; } .mas-card__media { aspect-ratio: 16 / 9; background: var(--mas-blue-050); overflow: hidden; } .mas-card__media img { width: 100%; height: 100%; object-fit: cover; } .mas-card__body { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: 1.25rem; } .mas-card__title { margin: 0; font-family: var(--mas-font); font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--mas-ink); } .mas-card__meta { font-size: .875rem; color: var(--mas-muted); } .mas-date { display: inline-flex; align-items: center; padding: .125rem .625rem; border-radius: var(--mas-radius-pill); background: var(--mas-blue-050); color: var(--mas-navy-800); font-size: .8125rem; font-weight: 600; white-space: nowrap; } .mas-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: var(--mas-radius-pill); background: var(--mas-navy-800); color: var(--mas-white); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .mas-badge--red { background: var(--mas-red-600); } .mas-stat { text-align: center; } .mas-stat__num { display: block; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 700; line-height: 1.1; color: var(--mas-navy-800); } .mas-section--navy .mas-stat__num { color: var(--mas-gold-400); } .mas-stat__label { display: block; margin-top: .25rem; font-size: .9375rem; color: var(--mas-muted); } .mas-section--navy .mas-stat__label { color: rgba(255, 255, 255, .8); } .mas-list { margin: 0; padding: 0; list-style: none; } .mas-list__item { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 0; border-bottom: 1px solid var(--mas-border); } .mas-list__item:last-child { border-bottom: 0; } /* --------------------------------------------------------------------------- * 5b. Header, navigation, notice ticker, footer (Phase 2) * The whole
becomes position:sticky once mas-nav.js has set --mas-sticky-top to minus the height above the * part that should stay visible (brand row on mobile, nav bar on desktop). Sticky never moves other content (no CLS). * Without JS the header is static and the menu is always shown (the toggle is hidden). * ------------------------------------------------------------------------- */ /* The theme's `html, body { overflow-x: hidden }` turns into a scroll container, which disables sticky. * `clip` still prevents horizontal scrolling but is not a scroll container. Older browsers keep `hidden` (header * is then simply not sticky). */ @supports (overflow: clip) { html, body { overflow-x: clip; } } .mas-header { position: relative; z-index: 1000; background: var(--mas-white); box-shadow: var(--mas-shadow-sm); } .mas-header.is-sticky-ready { position: -webkit-sticky; position: sticky; top: var(--mas-sticky-top, 0px); } .mas-header ul { margin: 0; padding: 0; list-style: none; } .mas-topbar :focus-visible, .mas-navbar :focus-visible, .mas-footer :focus-visible, .mas-ticker :focus-visible { outline-color: var(--mas-gold-400) !important; box-shadow: none; } .mas-topbar { background: var(--mas-navy-900); font-size: .8125rem; } .mas-topbar__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1.25rem; padding-top: .25rem; padding-bottom: .25rem; } .mas-topbar__list { display: flex; flex-wrap: wrap; gap: 0 1.25rem; } .mas-topbar a { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; color: rgba(255, 255, 255, .9); white-space: nowrap; } .mas-topbar a:hover { color: var(--mas-gold-400); } .mas-topbar .fa { color: var(--mas-gold-400); } .mas-topbar__short { display: none; } .mas-brandbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .625rem; padding-bottom: .625rem; } .mas-brand { display: block; min-width: 0; } .mas-brand picture, .mas-footer__brand picture { display: block; } /* re-review: WebP logo wrapper */ /* 2026-11-06: a fixed height (not max-height) so the logo has its space before the image loads: with width and height both auto the width/height attributes could not reserve it, and the header grew by up to 84 px when the logo arrived. The width follows from the attributes, then from the real image; object-fit keeps the ratio if a narrow screen limits it. */ .mas-brand img { display: block; width: auto; height: 72px; max-width: 100%; object-fit: contain; object-position: left center; } .mas-nav-toggle { display: none; flex: none; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .875rem; border: 2px solid var(--mas-navy-800); border-radius: var(--mas-radius-sm); background: var(--mas-white); color: var(--mas-navy-800); font-family: var(--mas-font); font-size: .9375rem; font-weight: 600; cursor: pointer; } .mas-nav-toggle__bars, .mas-nav-toggle__bars::before, .mas-nav-toggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; transition: transform .15s var(--mas-ease); } .mas-nav-toggle__bars { position: relative; } .mas-nav-toggle__bars::before, .mas-nav-toggle__bars::after { content: ""; position: absolute; left: 0; } .mas-nav-toggle__bars::before { top: -6px; } .mas-nav-toggle__bars::after { top: 6px; } .mas-nav-toggle[aria-expanded="true"] .mas-nav-toggle__bars { background: transparent; } .mas-nav-toggle[aria-expanded="true"] .mas-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); } .mas-nav-toggle[aria-expanded="true"] .mas-nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); } .mas-navbar { background: var(--mas-navy-800); } .mas-menu { display: flex; flex-wrap: wrap; } .mas-menu__item { position: relative; display: flex; align-items: stretch; } .mas-menu__link { display: flex; align-items: center; gap: .4rem; min-height: 52px; padding: 0 .875rem; margin: 0; border: 0; background: none; color: var(--mas-white) !important; font-family: var(--mas-font); font-size: .9375rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; } .mas-menu__item:hover > .mas-menu__link, .mas-menu__link:hover, .mas-menu__item.is-open > .mas-menu__link { background: var(--mas-navy-700); } .mas-menu__item.is-active > .mas-menu__link { box-shadow: inset 0 -3px 0 var(--mas-gold-400); } .mas-menu__toggle { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: none; color: var(--mas-white); cursor: pointer; } .mas-menu__toggle:not(.mas-menu__toggle--label) { width: 28px; margin-left: -.625rem; padding-right: .375rem; } .mas-menu__toggle::after { content: ""; width: .45em; height: .45em; border-right: 2px solid; border-bottom: 2px solid; transform: translateY(-2px) rotate(45deg); transition: transform .15s var(--mas-ease); } .mas-menu__toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); } .mas-submenu__link { display: block; padding: .5rem 1.25rem; line-height: 1.4; } .mas-submenu__link[aria-current="page"] { font-weight: 700; } .mas-ticker { background: var(--mas-blue-050); border-bottom: 1px solid var(--mas-border); } .mas-ticker__inner { display: flex; align-items: center; gap: .75rem; min-height: 52px; } .mas-ticker__label { flex: none; padding: .25rem .75rem; border-radius: var(--mas-radius-pill); background: var(--mas-red-600); color: var(--mas-white); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .mas-ticker__viewport { flex: 1; min-width: 0; overflow: hidden; } .mas-ticker__track { display: inline-block; padding-left: 100%; white-space: nowrap; color: var(--mas-navy-800); font-size: 1.0625rem; font-weight: 600; line-height: 1.6; animation: mas-ticker var(--mas-ticker-duration, 30s) linear infinite; } .mas-ticker__track > * { display: inline; margin: 0; } .mas-ticker:hover .mas-ticker__track, .mas-ticker:focus-within .mas-ticker__track, .mas-ticker.is-paused .mas-ticker__track { animation-play-state: paused; } .mas-ticker__pause { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--mas-border); border-radius: 50%; background: var(--mas-white); color: var(--mas-navy-800); cursor: pointer; } @keyframes mas-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } } .mas-footer { background: var(--mas-navy-900); color: rgba(255, 255, 255, .8); font-size: .9375rem; line-height: 1.6; } .mas-footer ul { margin: 0; padding: 0; list-style: none; } .mas-footer a { color: rgba(255, 255, 255, .88); } .mas-footer a:hover { color: var(--mas-gold-400); text-decoration: underline; } .mas-footer__main { padding: 3.5rem 0 1rem; } .mas-footer__col { margin-bottom: 2rem; } .mas-footer__brand img { display: block; width: 100%; max-width: 280px; height: auto; margin-bottom: 1.5rem; } .mas-footer .mas-footer__title { /* beats the theme `.home-style2 h2` colour */ margin: 0 0 1rem; padding-bottom: .625rem; border-bottom: 2px solid var(--mas-gold-400); display: inline-block; font-family: var(--mas-font); font-size: .9375rem; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; color: var(--mas-white); } .mas-footer__links li { margin-bottom: .5rem; } .mas-footer a[href^="tel:"] { white-space: nowrap; } .mas-footer__contact li { display: flex; gap: .75rem; margin-bottom: .625rem; } .mas-footer__contact .fa { flex: none; width: 1rem; margin-top: .3rem; text-align: center; color: var(--mas-gold-400); } .mas-footer__social { display: flex; gap: .5rem; margin-top: 1.25rem !important; } .mas-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--mas-white); } .mas-footer__social a:hover { background: var(--mas-gold-400); color: var(--mas-navy-900); text-decoration: none; } .mas-footer__bottom { padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .875rem; } .mas-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; } .mas-footer__copy { margin: 0; color: rgba(255, 255, 255, .8); } .mas-footer__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; } /* Desktop: one-row nav bar with dropdowns (hover for mouse, the toggle button for keyboard and touch) */ @media (min-width: 992px) { html { scroll-padding-top: 64px; } .mas-submenu { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 240px; padding: .5rem 0 !important; border-top: 3px solid var(--mas-red-600); border-radius: 0 0 var(--mas-radius-sm) var(--mas-radius-sm); background: var(--mas-white); box-shadow: var(--mas-shadow-lg); visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .15s var(--mas-ease), transform .15s var(--mas-ease), visibility 0s linear .15s; } .mas-menu__item:last-child > .mas-submenu { left: auto; right: 0; } .mas-submenu--cols { min-width: 480px; columns: 2; column-gap: 0; } .mas-submenu--cols li { break-inside: avoid; } .mas-menu__item.is-open > .mas-submenu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } .mas-submenu__link { color: var(--mas-ink); } .mas-submenu__link:hover, .mas-submenu__link[aria-current="page"] { background: var(--mas-blue-050); color: var(--mas-navy-800); } } @media (min-width: 992px) and (hover: hover) { .mas-menu__item--parent:hover > .mas-submenu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } } @media (min-width: 1200px) { .mas-menu__link { padding: 0 1.125rem; } } /* Mobile and tablet: menu panel under the brand row, sub-menus as accordions */ @media (max-width: 991.98px) { html { scroll-padding-top: 80px; } /* sticky brand row */ .mas-js .mas-nav-toggle { display: inline-flex; } .mas-js .mas-navbar { display: none; } .mas-js .mas-navbar.is-open { display: block; max-height: var(--mas-panel-max, 75vh); overflow-y: auto; overscroll-behavior: contain; } .mas-menu { flex-direction: column; padding: .25rem 0 .75rem !important; } .mas-menu__item { flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .1); } .mas-menu__link { flex: 1; min-height: 48px; padding: 0 .25rem; } .mas-menu__item.is-active > .mas-menu__link { box-shadow: inset 3px 0 0 var(--mas-gold-400); padding-left: .75rem; } .mas-menu__toggle:not(.mas-menu__toggle--label) { width: 48px; margin: 0; padding: 0; } .mas-menu__toggle--label { justify-content: space-between; text-align: left; } .mas-submenu { display: none; flex-basis: 100%; padding: 0 0 .5rem .75rem !important; } .mas-menu__item.is-open > .mas-submenu { display: block; } .mas-submenu__link { padding: .625rem .5rem; color: rgba(255, 255, 255, .88) !important; } .mas-submenu__link[aria-current="page"] { color: var(--mas-gold-400) !important; } } @media (max-width: 575.98px) { /* One-row utility bar on phones: short visible labels; the full text stays available to screen readers. */ .mas-topbar__inner, .mas-topbar__list { gap: 0 1rem; } .mas-topbar__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .mas-topbar__short { display: inline; } } @media (max-width: 767.98px) { .mas-topbar__inner { justify-content: center; } .mas-topbar__list { justify-content: center; } .mas-brand img { height: 52px; } .mas-ticker__track { font-size: 1rem; } .mas-footer__main { padding-top: 2.5rem; } .mas-footer__bottom { padding-bottom: 6rem; } /* keep the bottom links clear of the theme scroll-to-top button (fixed, 80 px from the bottom) */ .mas-footer__bottom-inner { justify-content: center; text-align: center; } .mas-footer__legal { justify-content: center; } } /* --------------------------------------------------------------------------- * 5c. Homepage (Phase 3) * ------------------------------------------------------------------------- */ /* Hero: fixed 1920:820 frame (no CLS); slide 1 is shown before Owl starts so the LCP image does not wait for JS. */ .mas-hero__frame { position: relative; overflow: hidden; aspect-ratio: 1920 / 820; background: var(--mas-navy-900); } /* Hero slideshow (2026-11-06, assets/js/mas-hero.js; no Owl): slides are stacked and fade; slide 1 is visible from the first paint and never moves. Control colours are custom properties so dark mode keeps them light on the photos. */ .mas-hero { --mas-hero-ctrl-bg: rgba(255, 255, 255, .92); --mas-hero-ctrl-ink: #112958; --mas-hero-dot: rgba(255, 255, 255, .6); --mas-hero-dot-on: #fff; } .mas-hero__track, .mas-hero__slide { height: 100%; } .mas-hero__track { position: relative; } .mas-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; will-change: opacity; } /* every slide on its own layer, slide 1 too: the same pixel rounding, so a later slide never counts as a larger, later LCP */ .mas-hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity .8s ease; } @media (prefers-reduced-motion: reduce) { .mas-hero__slide, .mas-hero__slide.is-active { transition: none; } } .mas-hero__slide img { display: block; width: 100%; height: 100%; object-fit: contain; } /* other ratios letterbox, never crop banner text */ .mas-hero__dots { position: absolute; left: 0; right: 0; bottom: .75rem; z-index: 2; display: flex; justify-content: center; gap: .25rem; pointer-events: none; } .mas-hero__dot { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; } .mas-hero__dot span { display: block; width: 10px; height: 10px; border-radius: 50%; background-color: var(--mas-hero-dot); box-shadow: 0 0 0 1px rgba(11, 31, 68, .5); } .mas-hero__dot[aria-current="true"] span { background-color: var(--mas-hero-dot-on); transform: scale(1.25); } .mas-hero__arrow { position: absolute; top: 50%; z-index: 2; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background-color: var(--mas-hero-ctrl-bg); color: var(--mas-hero-ctrl-ink); font-size: 1.5rem; line-height: 1; cursor: pointer; } .mas-hero__arrow:hover { background-color: var(--mas-hero-dot-on); } .mas-hero__arrow--prev { left: 1rem; } .mas-hero__arrow--next { right: 1rem; } @media (min-width: 768px) { .mas-hero__arrow { display: flex; } } .mas-hero__dot:focus-visible span, .mas-hero__arrow:focus-visible { outline: 3px solid var(--mas-hero-dot-on); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(11, 31, 68, .8); } /* without JS the controls would do nothing */ html:not(.mas-js) .mas-hero__dots, html:not(.mas-js) .mas-hero__arrow { display: none; } .mas-carousel .owl-dot { cursor: pointer; } .mas-hero__pause { position: absolute; right: .75rem; bottom: .5rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(11, 31, 68, .6); color: var(--mas-white); font-size: .75rem; cursor: pointer; } /* Pause buttons need JS; without it they would do nothing */ html:not(.mas-js) .mas-carousel__pause, html:not(.mas-js) .mas-ticker__pause { display: none; } /* Re-review: the hero frame sits in .container (slider.php); rounded from 576 px, edge to edge on phones. */ .mas-hero { padding-top: 1.5rem; } @media (min-width: 576px) { .mas-hero__frame { border-radius: var(--mas-radius); } } @media (max-width: 575.98px) { .mas-hero { padding-top: 0; } .mas-hero__container { padding: 0; } } /* Admission + verification cards */ .mas-quick { padding: 2rem 0 1rem; } .mas-quick__col { margin-bottom: 1.5rem; } .mas-quick__card { border-top: 4px solid var(--mas-blue-600); } .mas-quick__card--accent { border-top-color: var(--mas-red-600); } .mas-quick__card .mas-card__body { gap: .75rem; } .mas-quick__card .mas-card__meta { margin: 0; } .mas-quick .mas-btn { margin-top: auto; } .mas-verify { display: flex; flex-direction: column; gap: .625rem; flex: 1; } .mas-verify .mas-btn { margin-top: .25rem; } .mas-verify__label { margin: 0; font-size: .875rem; font-weight: 600; color: var(--mas-ink); } .mas-linklist { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0; padding: 0; list-style: none; } .mas-linklist a { display: flex; align-items: center; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--mas-border); border-radius: var(--mas-radius-sm); background: var(--mas-surface); color: var(--mas-navy-800); font-weight: 600; line-height: 1.3; } .mas-linklist a:hover { border-color: var(--mas-blue-600); background: var(--mas-blue-050); } /* Noticeboard + news panels */ .mas-updates__col { margin-bottom: 1.5rem; } .mas-panel { display: flex; flex-direction: column; height: 100%; padding: 1.5rem; border: 1px solid var(--mas-border); border-radius: var(--mas-radius); background: var(--mas-white); box-shadow: var(--mas-shadow-sm); } .mas-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; padding-bottom: .75rem; border-bottom: 2px solid var(--mas-navy-800); } .home-style2 .mas-panel__title { margin: 0; font-family: var(--mas-font); font-size: 1.375rem; font-weight: 700; color: var(--mas-navy-800); } .mas-panel__more { margin-top: auto; padding-top: 1rem; align-self: flex-start; } .mas-list__item { flex-direction: column; gap: .375rem; } .mas-list__link { color: var(--mas-ink); font-weight: 600; line-height: 1.45; } .mas-list__link:hover { color: var(--mas-blue-600); text-decoration: underline !important; } .mas-news { margin: 0; padding: 0; list-style: none; } .mas-news__item { display: flex; align-items: flex-start; gap: .875rem; padding: .75rem 0; border-bottom: 1px solid var(--mas-border); } .mas-news__date { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--mas-radius-sm); background: var(--mas-blue-050); color: var(--mas-navy-800); font-size: .75rem; font-weight: 600; line-height: 1.1; text-transform: uppercase; } .mas-news__date span { font-size: 1.25rem; font-weight: 700; } .mas-news__link { color: var(--mas-ink); font-size: .9375rem; line-height: 1.45; } .mas-news__link:hover { color: var(--mas-blue-600); text-decoration: underline !important; } /* Quick-link tiles */ .mas-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; } .mas-tile { display: flex; align-items: center; gap: .875rem; height: 100%; min-height: 72px; padding: .875rem 1rem; border: 1px solid var(--mas-border); border-radius: var(--mas-radius); background: var(--mas-white); color: var(--mas-navy-800) !important; font-weight: 600; line-height: 1.3; box-shadow: var(--mas-shadow-sm); transition: box-shadow .18s var(--mas-ease), transform .18s var(--mas-ease), border-color .18s var(--mas-ease); } .mas-tile:hover { transform: translateY(-2px); border-color: var(--mas-blue-600); box-shadow: var(--mas-shadow); } .mas-tile img { flex: none; width: 48px; height: 48px; object-fit: contain; } /* Phase 6: one column on the narrowest phones / 400 % zoom, so tile labels are not cut off (WCAG 1.4.10) */ @media (max-width: 359.98px) { .mas-tiles { grid-template-columns: 1fr; } } @media (min-width: 768px) { .mas-tiles { grid-template-columns: repeat(4, 1fr); } } /* Principal + why-us */ .mas-about__col { margin-bottom: 2rem; } .mas-principal { margin: 0; } /* Reset the theme blockquote look (italic, white box, shadow, blue bar) for our quotes */ .mas-principal__quote, .mas-quote__text { clear: none; background: none; box-shadow: none; color: var(--mas-text); font-style: normal; } .mas-principal__quote::before { content: none; } .mas-principal__quote { margin: .5rem 0 0; padding: 0; border: 0; } .mas-principal__quote p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.7; color: var(--mas-text); } .mas-principal__person { display: flex; align-items: center; gap: 1rem; margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--mas-border); font-size: .875rem; color: var(--mas-muted); line-height: 1.4; } .mas-principal__person img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; } .mas-principal__person strong { display: block; font-size: 1rem; color: var(--mas-navy-800); } .mas-features { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } .mas-feature { padding: 1.25rem 1.25rem 1.25rem 3.5rem; position: relative; border: 1px solid var(--mas-border); border-radius: var(--mas-radius); background: var(--mas-white); } .mas-feature::before { content: "\f00c"; content: "\f00c" / ""; /* decorative: empty alt text where supported */ position: absolute; left: 1.25rem; top: 1.25rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--mas-green-700); color: var(--mas-white); font: normal normal normal .75rem/1.5rem FontAwesome; text-align: center; } .home-style2 .mas-feature__title { margin: 0 0 .375rem; font-family: var(--mas-font); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: var(--mas-navy-800); } .mas-feature p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--mas-text); } @media (min-width: 768px) { .mas-features { grid-template-columns: 1fr 1fr; } } /* Stats band */ .mas-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; margin: 0; padding: 0; list-style: none; } @media (min-width: 992px) { .mas-stats { grid-template-columns: repeat(4, 1fr); } } .mas-stats-section { padding-top: 3rem; padding-bottom: 3rem; } /* Testimonials */ .mas-testimonials__head { position: relative; margin-bottom: 1.5rem; padding: 0 3rem; text-align: center; } .mas-testimonials__head .mas-carousel__pause { position: absolute; right: 0; bottom: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--mas-border); border-radius: 50%; background: var(--mas-white); color: var(--mas-navy-800); cursor: pointer; } /* "Principal's Message" is an

styled as an eyebrow (beats the theme `.home-style2 h2` size/colour) */ .home-style2 h2.mas-eyebrow { margin: 0 0 .5rem; font-family: var(--mas-font); font-size: .8125rem; line-height: 1.4; color: var(--mas-red-600); } .mas-quote { justify-content: space-between; margin: 0; padding: 1.5rem; } .mas-quote__text { position: relative; margin: 0 0 1.25rem; padding: 0 0 0 2.25rem; border: 0; font-size: 1rem; line-height: 1.7; color: var(--mas-text); } .mas-quote__text::before { content: "\201C"; content: "\201C" / ""; position: absolute; left: 0; top: -.75rem; width: auto; height: auto; background: none; font: 700 3.5rem/1 Georgia, serif; color: var(--mas-gold-400); } .mas-quote__text p { margin: 0; } .mas-quote__person { display: flex; align-items: center; gap: .875rem; font-size: .875rem; line-height: 1.4; color: var(--mas-muted); } .mas-quote__person img { flex: none; width: 56px !important; height: 56px; border-radius: 50%; object-fit: cover; } .mas-quote__person picture { flex: none; display: block; width: 56px; height: 56px; } /* 2026-11-06: photos now come in a */ .mas-quote__person strong { display: block; font-size: 1rem; color: var(--mas-navy-800); } /* Before Owl starts (lazily, near the viewport — or never, without JS): show the first cards in the same layout, so nothing jumps when it does start */ .mas-testimonials .owl-carousel:not(.owl-loaded) { display: flex; gap: 30px; overflow: hidden; margin-bottom: 40px; } /* 40px = the dots row Owl adds */ .mas-testimonials .owl-carousel:not(.owl-loaded) > * { flex: 0 0 100%; } @media (min-width: 768px) { .mas-testimonials .owl-carousel:not(.owl-loaded) > * { flex-basis: calc(50% - 15px); } } .mas-testimonials .owl-stage { display: flex; } .mas-testimonials .owl-item { display: flex; } .mas-testimonials .owl-item > .mas-quote { width: 100%; } .mas-testimonials .owl-dots { display: flex; justify-content: center; gap: .25rem; margin-top: 1rem; } .mas-testimonials .owl-dots .owl-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; } .mas-testimonials .owl-dots .owl-dot span { display: block; width: 10px; height: 10px; border-radius: 50%; background: #c4cddb; } .mas-testimonials .owl-dots .owl-dot.active span { background: var(--mas-blue-600); } /* --------------------------------------------------------------------------- * 5d. Inner pages (Phase 4) — scoped to .mas-page (theme.php adds it when a page has a breadcrumb) * ------------------------------------------------------------------------- */ .mas-pagehead { padding: 1.5rem 0; border-bottom: 1px solid var(--mas-border); background: var(--mas-surface); } .mas-pagehead--image { background: linear-gradient(rgba(11, 31, 68, .88), rgba(11, 31, 68, .88)), var(--mas-pagehead-img) center / cover; } .home-style2 .mas-pagehead__title { margin: .5rem 0 0; font-family: var(--mas-font); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--mas-navy-800); } .mas-breadcrumb ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: .875rem; line-height: 1.5; color: var(--mas-muted); } .mas-breadcrumb li + li::before { content: "/"; content: "/" / ""; margin: 0 .5rem; color: #8c97a8; } .mas-breadcrumb li:last-child { color: var(--mas-text); font-weight: 600; } .mas-breadcrumb a { color: var(--mas-blue-600); text-decoration: underline; text-underline-offset: 2px; } .home-style2 .mas-pagehead--image .mas-pagehead__title, .mas-pagehead--image .mas-breadcrumb li, .mas-pagehead--image .mas-breadcrumb a { color: var(--mas-white); } /* Templates keep the theme's pt-100/pt-50 wrappers; one consistent gap under the new header. */ .mas-pagehead + * { padding-top: 2.5rem !important; } /* CMS HTML (pages.content, posts.details, course details): readable typography; wide tables scroll sideways. */ .mas-prose { overflow-x: auto; font-size: 1rem; line-height: 1.75; color: var(--mas-text); } /* overflow-x clips focus rings at the edges: give them room without moving the text */ .mas-prose { padding: 6px; margin: -6px; } .mas-prose > :first-child { margin-top: 0; } /* 2026-11-06: text wrapped in a
by the editor (BMA Cadet Placement): no extra space at the top or bottom */ .home-style2 .mas-prose > div:first-child > :first-child { margin-top: 0; } .mas-prose > :last-child, .mas-prose > div:last-child > :last-child { margin-bottom: 0; } .home-style2 .mas-prose h1, .home-style2 .mas-prose h2, .home-style2 .mas-prose h3, .home-style2 .mas-prose h4, .home-style2 .mas-prose h5, .home-style2 .mas-prose h6 { margin: 1.75rem 0 .75rem; font-family: var(--mas-font); font-weight: 700; line-height: 1.3; color: var(--mas-navy-800); } .home-style2 .mas-prose h1, .home-style2 .mas-prose h2 { font-size: 1.625rem; } .home-style2 .mas-prose h3 { font-size: 1.375rem; } .home-style2 .mas-prose h4 { font-size: 1.1875rem; } .home-style2 .mas-prose h5, .home-style2 .mas-prose h6 { font-size: 1.0625rem; } .mas-prose p { margin: 0 0 1rem; line-height: 1.75; } .mas-prose ul, .mas-prose ol { margin: 0 0 1rem; padding-left: 1.5rem; } .mas-prose ul { list-style: disc; } .mas-prose ol { list-style: decimal; } .mas-prose li { margin-bottom: .375rem; } .mas-prose a { text-decoration: underline; text-underline-offset: 2px; } .mas-prose img { max-width: 100%; height: auto; border-radius: var(--mas-radius-sm); } .mas-prose table { width: 100%; margin: 0 0 1.5rem; border-collapse: collapse; font-size: .9375rem; } .mas-prose th, .mas-prose td { padding: .625rem .75rem; border: 1px solid var(--mas-border); vertical-align: top; } .mas-prose th, .mas-prose thead td { background: var(--mas-blue-050); color: var(--mas-navy-800); font-weight: 700; } .mas-prose blockquote { margin: 0 0 1rem; padding: .75rem 1.25rem; border-left: 4px solid var(--mas-gold-400); background: var(--mas-surface); box-shadow: none; font-style: normal; color: var(--mas-text); } .mas-prose blockquote::before { content: none; } /* Tables in the page templates (Bootstrap .table) */ .mas-page .table { font-size: .9375rem; color: var(--mas-text); } .mas-page .table th, .mas-page .table td { padding: .625rem .75rem; border-color: var(--mas-border); vertical-align: middle; } .mas-page .table thead th, .mas-page .table .thead-dark th { border-color: var(--mas-navy-700); background: var(--mas-navy-800); color: var(--mas-white); font-weight: 600; } .mas-page .table-striped tbody tr:nth-of-type(odd) { background: var(--mas-surface); } .mas-page .mas-verify-table th { width: 38%; background: var(--mas-blue-050); color: var(--mas-navy-800); font-weight: 600; } .mas-table-wrap { overflow-x: auto; margin-bottom: 1.5rem; border: 1px solid var(--mas-border); border-radius: var(--mas-radius-sm); } .mas-table-wrap .table { margin-bottom: 0; border: 0; } .mas-table-wrap .table th:first-child, .mas-table-wrap .table td:first-child { border-left: 0; } .mas-table-wrap .table th:last-child, .mas-table-wrap .table td:last-child { border-right: 0; } /* Contact page (theme markup): long e-mail addresses wrap instead of being cut off at 320 px */ .mas-page .address-item .address-text { min-width: 0; overflow-wrap: anywhere; } /* Group headings that are h2 for structure but keep the old h4 size (student database, job placement) */ .home-style2 h2.mas-h4 { font-size: 24px; line-height: 1.25; } /* Theme buttons with too little contrast: contact "Submit" (white on #ff5421 = 3.2:1) and Bootstrap 4 .btn-primary (white on #007bff = 3.97:1, admit-card form) → MAS colours (≥ 7:1). */ .mas-page .contact-page-section .rs-quick-contact .form-group .btn-send { background: var(--mas-red-600); } .mas-page .contact-page-section .rs-quick-contact .form-group .btn-send:hover, .mas-page .contact-page-section .rs-quick-contact .form-group .btn-send:focus { background: #a50d26; } .mas-page .btn-primary { border-color: var(--mas-blue-600); background-color: var(--mas-blue-600); } .mas-page .btn-primary:hover, .mas-page .btn-primary:focus { border-color: var(--mas-navy-800); background-color: var(--mas-navy-800); } /* Phase 6: Bootstrap 4 text utilities that fail AA on white (success 3.1:1, primary 4.0:1, info 3.0:1) → MAS colours. Bootstrap sets them with !important, so these must too. */ html .text-success { color: var(--mas-green-700) !important; } html .text-primary { color: var(--mas-blue-600) !important; } html .text-info { color: #0b6e83 !important; } /* CMS content pasted from Word: table headings use inline light grey (#F2F2F2) on blue (#4472C4) = 4.2:1; white is 4.6:1 */ .mas-prose [style*="color:#F2F2F2" i], .mas-prose [style*="color: #F2F2F2" i] { color: #fff !important; } /* Phase 6: #scrollUp is now a real