/* ========================================================================== BE THE POLICE — Design System & Components -------------------------------------------------------------------------- 01 Tokens 11 Ticker 21 Team 02 Base 12 Helplines 22 Partner marquee 03 Layout 13 Split / About 23 Footer 04 Typography 14 Cards 24 Floating elements 05 Buttons & chips 15 Stats 25 Inner page hero 06 Access. top bar 16 Stepper 26 Content + aside 07 Header & nav 17 Socials 27 Article (AEO/GEO) 08 Off-canvas 18 Logo rail 28 Listing tools 09 Search overlay 19 Notice board 29 Timeline / Gallery / Video 10 Hero slider 20 FAQ + testimonials 30 Contact / Glossary / Scam / 404 31 Utilities, motion, themes ========================================================================== */ /* 01 TOKENS ---------------------------------------------------------------- */ :root { --navy: #0B2545; --navy-900: #071A33; --blue: #1F4E8C; --blue-50: #EEF3FA; --blue-100: #DCE7F5; --saffron: #F28C28; --saffron-50: #FFF4E8; --red: #C62828; --red-700: #A61F1F; --green: #138808; --green-50: #EAF6E8; --bg: #F5F7FA; --surface: #FFFFFF; --text: #1A1A1A; --muted: #5A6270; --heading: var(--navy); --link: var(--blue); --line: #E3E8EF; --focus: #1F4E8C; --font: "Noto Sans", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-hi: "Noto Sans Devanagari", "Noto Sans", system-ui, sans-serif; --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; --shadow-sm: 0 1px 2px rgba(11, 37, 69, .06), 0 1px 3px rgba(11, 37, 69, .08); --shadow: 0 6px 20px rgba(11, 37, 69, .08); --shadow-lg: 0 16px 40px rgba(11, 37, 69, .14); --header-h: 84px; --section-y: 48px; --gutter: 16px; --ease: cubic-bezier(.2, .7, .2, 1); --dur: 300ms; } @media (min-width: 768px) { :root { --gutter: 24px; --section-y: 64px; } } @media (min-width: 1024px) { :root { --section-y: 80px; } } /* 02 BASE ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.65; color: var(--text); background: var(--bg); overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, svg, video, iframe { display: block; max-width: 100%; } img { height: auto; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--navy); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } ul, ol { padding-left: 1.25rem; } hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; } table { border-collapse: collapse; width: 100%; } [hidden] { display: none !important; } :lang(hi):not(.fa-solid, .fa-regular, .fa-brands, .fa), .hi:not(.fa-solid, .fa-regular, .fa-brands, .fa) { font-family: var(--font-hi); line-height: 1.8; } /* Google auto-translate (English mode): keep its UI invisible */ body { top: 0 !important; } html.is-gt [data-gt-hide] { display: none !important; } .skiptranslate > iframe, iframe.goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt, .goog-tooltip, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-yAWNEb-L7lbkb, #gt-el { display: none !important; } .goog-text-highlight, .VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q { background: none !important; box-shadow: none !important; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } .on-dark :focus-visible, .site-footer :focus-visible, .topbar :focus-visible, .page-hero :focus-visible, .stats-strip :focus-visible, .cta-strip :focus-visible { outline-color: var(--saffron); } ::selection { background: var(--saffron); color: #fff; } /* 03 LAYOUT ---------------------------------------------------------------- */ .container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 880px; } .section { padding-block: var(--section-y); } .section--white { background: var(--surface); } .section--tint { background: linear-gradient(180deg, var(--blue-50), var(--bg)); } .section--navy { background: var(--navy); color: #fff; } .grid { display: grid; gap: 24px; } .grid-2, .grid-3, .grid-4 { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 576px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } } .grid-2--tight { gap: 16px; } .stack > * + * { margin-top: 1rem; } .center { text-align: center; } .mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: 1rem; } .mt-4 { margin-top: 2rem; } .mb-0 { margin-bottom: 0 !important; } /* 04 TYPOGRAPHY ------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { color: var(--heading); line-height: 1.25; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.01em; } h1 { font-size: clamp(2rem, 1.35rem + 2.3vw, 3rem); } h2 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); } h3 { font-size: 1.375rem; } h4 { font-size: 1.125rem; } .h3 { font-size: 1.375rem; } p { margin: 0 0 1rem; } strong { font-weight: 700; color: inherit; } .lead { font-size: 1.125rem; color: var(--muted); } .muted { color: var(--muted); } .small { font-size: .875rem; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: .5rem; } .eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--saffron); } .section-head { margin-bottom: 40px; max-width: 760px; } .section-head--center { margin-inline: auto; text-align: center; } .section-title { position: relative; padding-bottom: 14px; margin-bottom: 12px; } .section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 4px; background: var(--saffron); } .section-head--center .section-title::after { left: 50%; transform: translateX(-50%); } .section--navy .section-title, .on-dark .section-title { color: #fff; } .subtitle { font-size: 1.125rem; font-weight: 600; color: var(--blue); margin-bottom: 1rem; } .line-clamp-2, .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { -webkit-line-clamp: 2; } .line-clamp-3 { -webkit-line-clamp: 3; } /* 05 BUTTONS & CHIPS ------------------------------------------------------- */ .btn { --btn-bg: var(--blue); --btn-fg: #fff; --btn-bd: var(--blue); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .625rem 1.25rem; font-size: .9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-bd); border-radius: var(--radius-sm); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:hover { --btn-bg: var(--navy); --btn-bd: var(--navy); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); } .btn:active { transform: translateY(0); box-shadow: none; } .btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; } .btn--outline { --btn-bg: transparent; --btn-fg: var(--blue); } .btn--outline:hover { --btn-bg: var(--blue); --btn-bd: var(--blue); } .btn--light { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; } .btn--light:hover { --btn-bg: var(--saffron); --btn-bd: var(--saffron); color: #fff; } .btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.5); } .btn--ghost-light:hover { --btn-bg: #fff; --btn-bd: #fff; color: var(--navy); } .btn--danger { --btn-bg: var(--red); --btn-bd: var(--red); } .btn--danger:hover { --btn-bg: var(--red-700); --btn-bd: var(--red-700); } .btn--sm { min-height: 36px; padding: .4rem .9rem; font-size: .875rem; } .btn--lg { min-height: 52px; padding: .8rem 1.6rem; font-size: 1rem; } .btn--block { width: 100%; } .btn .fa-arrow-right { transition: transform var(--dur) var(--ease); } .btn:hover .fa-arrow-right { transform: translateX(3px); } .btn.is-loading { pointer-events: none; } .btn.is-loading::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; } .link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; color: var(--blue); } .link-arrow i { transition: transform var(--dur) var(--ease); font-size: .8em; } .link-arrow:hover i { transform: translateX(4px); } .icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--navy); transition: background var(--dur), color var(--dur), border-color var(--dur); } .icon-btn:hover { background: var(--blue-50); color: var(--blue); border-color: var(--blue-100); } .chips { display: flex; gap: .5rem; flex-wrap: wrap; } .chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .chips--scroll::-webkit-scrollbar { display: none; } .chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .35rem 1rem; font-size: .875rem; font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--navy); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; transition: background var(--dur), color var(--dur), border-color var(--dur); } .chip:hover { border-color: var(--blue); color: var(--blue); } .chip[aria-pressed="true"], .chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; } .chip--sm { min-height: 30px; padding: .2rem .7rem; font-size: .8125rem; } .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .02em; border-radius: 999px; background: var(--blue-50); color: var(--blue); } .badge--saffron { background: var(--saffron-50); color: #9A4F05; } .badge--green { background: var(--green-50); color: #0E6606; } .badge--red { background: #FDECEC; color: var(--red-700); } /* 06 ACCESSIBILITY TOP BAR ------------------------------------------------- */ .skip-link { position: absolute; left: 12px; top: -100px; z-index: 1000; padding: .6rem 1rem; background: var(--saffron); color: #1A1A1A; font-weight: 700; border-radius: var(--radius-sm); } .skip-link:focus { top: 12px; } .topbar { background: var(--navy-900); color: #D3DCEA; font-size: .8125rem; } .topbar a { color: #D3DCEA; text-decoration: none; } .topbar a:hover { color: #fff; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 42px; flex-wrap: wrap; padding-block: 4px; } .topbar__group { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; } .topbar__sep { width: 1px; height: 16px; background: rgba(255,255,255,.18); } .topbar__link { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; } .topbar__erss { color: #fff !important; font-weight: 700; } .topbar__erss .num { display: inline-block; margin-left: .25rem; padding: 0 .45rem; background: var(--red); border-radius: 4px; } .a11y-tools { display: inline-flex; align-items: center; gap: 4px; } .a11y-btn { min-width: 32px; height: 28px; padding: 0 .45rem; background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; font-size: .75rem; font-weight: 700; line-height: 1; } .a11y-btn:hover, .a11y-btn[aria-pressed="true"] { background: var(--saffron); border-color: var(--saffron); color: #1A1A1A; } .lang-switch { display: inline-flex; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; overflow: hidden; } .lang-switch button { height: 28px; padding: 0 .6rem; background: transparent; border: 0; color: #D3DCEA; font-size: .75rem; font-weight: 600; } .lang-switch button[aria-pressed="true"] { background: #fff; color: var(--navy); } .topbar__social { display: inline-flex; gap: 2px; } .topbar__social a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; } .topbar__social a:hover { background: rgba(255,255,255,.1); } .topbar__erss-short { display: none; } @media (min-width: 768px) and (max-width: 1199.98px) { .topbar__inner { flex-wrap: nowrap; } .topbar__erss-full { display: none; } .topbar__erss-short { display: inline; } } @media (min-width: 768px) and (max-width: 991.98px) { .topbar__contact { display: none; } } /* Phones/tablets: one row — Emergency 112 on the left, language switch on the right */ @media (max-width: 767.98px) { .topbar__contact, .topbar__social, .topbar__sep--md { display: none; } .topbar__inner { flex-wrap: nowrap; justify-content: space-between; min-height: 44px; padding-block: 6px; } .topbar__group { flex-wrap: nowrap; } .topbar__erss { gap: .5rem; font-size: .8125rem; white-space: nowrap; } .topbar__erss i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--saffron); font-size: .75rem; } .topbar__erss-full { display: none; } .topbar__erss-short { display: inline; } .topbar__erss .num { margin-left: 0; padding: 2px .5rem; font-size: .8125rem; line-height: 1.3; } .lang-switch button { height: 28px; padding: 0 .75rem; } } @media (max-width: 420px) { .topbar__sr { display: none; } } /* 07 HEADER & NAV ---------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--line); transition: box-shadow var(--dur) var(--ease); } .site-header.is-shrunk { box-shadow: var(--shadow); } .header-inner { display: flex; align-items: center; gap: 16px; height: var(--header-h); transition: height var(--dur) var(--ease); } .site-header.is-shrunk .header-inner { height: 66px; } .brand { display: inline-flex; align-items: center; flex-shrink: 0; } .brand img { height: 60px; width: auto; transition: height var(--dur) var(--ease); } .site-header.is-shrunk .brand img { height: 46px; } .nav { margin-left: auto; display: none; } .nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .nav__item { position: relative; } .nav__link { position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .5rem .8rem; font-size: .9375rem; font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; background: none; border: 0; border-radius: var(--radius-sm); transition: color var(--dur), background var(--dur); } .nav__link::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 4px; height: 3px; border-radius: 3px; background: var(--saffron); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .nav__link:hover { color: var(--blue); background: var(--blue-50); } .nav__link.is-active, .nav__link[aria-current="page"] { color: var(--blue); } .nav__link.is-active::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); } .nav__link .fa-chevron-down { font-size: .65rem; transition: transform var(--dur); } .nav__item.is-open .fa-chevron-down { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; list-style: none; margin: 0; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); } .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .nav__item:hover > .dropdown, .nav__item.is-open > .dropdown, .nav__item:focus-within > .dropdown { opacity: 1; visibility: visible; transform: none; } .dropdown a { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; color: var(--text); font-weight: 500; text-decoration: none; border-radius: var(--radius-sm); } .dropdown a i { width: 18px; color: var(--blue); } .dropdown a:hover, .dropdown a[aria-current="page"] { background: var(--blue-50); color: var(--blue); } .header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .btn-helpline { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .4rem 1rem .4rem .45rem; background: var(--red); color: #fff; border-radius: 999px; text-decoration: none; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 16px rgba(198, 40, 40, .28); transition: background var(--dur), transform var(--dur); } .btn-helpline:hover { background: var(--red-700); color: #fff; transform: translateY(-1px); } .btn-helpline__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); position: relative; } .btn-helpline__icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); animation: ping 2s var(--ease) infinite; } .btn-helpline__text { display: flex; flex-direction: column; line-height: 1.1; } .btn-helpline__label { font-size: .6875rem; font-weight: 600; opacity: .9; text-transform: uppercase; letter-spacing: .04em; } .btn-helpline__num { font-size: 1.125rem; letter-spacing: .02em; } html[lang="hi"] .btn-helpline__text, html[lang="hi"] .btn-helpline__label, html[lang="hi"] .btn-helpline__num { line-height: 1.2; } html[lang="hi"] .btn-helpline__label { font-size: .75rem; letter-spacing: 0; text-transform: none; } html[lang="hi"] .btn-helpline__num { margin-top: 1px; } .menu-toggle { display: inline-grid; } @media (max-width: 575.98px) { :root { --header-h: 70px; } .header-inner { gap: 8px; } .header-actions { gap: 6px; } .brand img { height: 46px; } .site-header.is-shrunk .brand img { height: 40px; } .btn-helpline { padding-right: .7rem; } .btn-helpline__label { display: none; } .header-actions .icon-btn { width: 40px; height: 40px; } } /* Small phones (320–374px): keep logo + search + 1930 + menu on one row */ @media (max-width: 374.98px) { .header-inner { gap: 6px; } .header-actions { gap: 4px; } .brand img, .site-header.is-shrunk .brand img { height: 36px; } .btn-helpline { gap: .35rem; min-height: 40px; padding: .3rem .6rem .3rem .3rem; } .btn-helpline__icon { width: 30px; height: 30px; } .btn-helpline__num { font-size: 1rem; } .header-actions .icon-btn { width: 38px; height: 38px; } } @media (min-width: 1200px) { .nav { display: block; } .header-actions { margin-left: 8px; } .menu-toggle { display: none; } } /* 08 OFF-CANVAS ------------------------------------------------------------ */ .offcanvas-backdrop { position: fixed; inset: 0; z-index: 290; background: rgba(7, 26, 51, .55); opacity: 0; visibility: hidden; transition: opacity var(--dur), visibility var(--dur); } .offcanvas { position: fixed; top: 0; right: 0; bottom: 0; z-index: 300; width: min(360px, 88vw); display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(100%); visibility: hidden; transition: transform var(--dur) var(--ease), visibility var(--dur); } body.offcanvas-open .offcanvas { transform: none; visibility: visible; } body.offcanvas-open .offcanvas-backdrop { opacity: 1; visibility: visible; } body.offcanvas-open, body.modal-open { overflow: hidden; } .offcanvas__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); } .offcanvas__head img { height: 44px; width: auto; } .offcanvas__body { flex: 1; overflow-y: auto; padding: 8px 12px 24px; } .m-nav { list-style: none; margin: 0; padding: 0; } .m-nav > li { border-bottom: 1px solid var(--line); } .m-nav a, .m-nav__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: .5rem .5rem; font-weight: 600; color: var(--navy); text-decoration: none; background: none; border: 0; text-align: left; } .m-nav a[aria-current="page"] { color: var(--blue); } .m-nav__toggle i { transition: transform var(--dur); } .m-nav__toggle[aria-expanded="true"] i { transform: rotate(180deg); } .m-nav__sub { list-style: none; margin: 0 0 8px; padding: 4px 0 4px 12px; border-left: 2px solid var(--saffron); } .m-nav__sub a { min-height: 44px; font-weight: 500; color: var(--text); } .offcanvas__foot { padding: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; } /* 09 SEARCH OVERLAY -------------------------------------------------------- */ .search-overlay { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: rgba(7, 26, 51, .96); color: #fff; padding: 24px var(--gutter); opacity: 0; visibility: hidden; transition: opacity var(--dur), visibility var(--dur); } .search-overlay.is-open { opacity: 1; visibility: visible; } .search-overlay__close { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); } .search-overlay__inner { width: 100%; max-width: 820px; margin: 10vh auto 0; } .search-field { position: relative; } .search-field i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--muted); } .search-field input { width: 100%; height: 64px; padding: 0 140px 0 54px; font-size: 1.25rem; background: #fff; color: var(--text); border: 0; border-radius: var(--radius); } .search-field .btn { position: absolute; right: 8px; top: 8px; bottom: 8px; } .search-overlay h2 { color: #fff; font-size: .875rem; text-transform: uppercase; letter-spacing: .08em; margin: 32px 0 12px; opacity: .8; } .search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .search-list a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); color: #fff; text-decoration: none; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); } .search-list a:hover { background: rgba(255,255,255,.12); color: #fff; } .search-list i { color: var(--saffron); } .search-overlay .chip { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); } /* 10 HERO SLIDER ----------------------------------------------------------- */ .hero { position: relative; background: var(--navy); overflow: hidden; } /* Banners contain baked-in text: keep their native 1400×600 ratio so nothing is cropped */ .hero__track { position: relative; aspect-ratio: var(--hero-ratio, 1400 / 600); max-height: 78vh; width: 100%; } .hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 900ms var(--ease), visibility 900ms; } .hero__slide.is-active { opacity: 1; visibility: visible; } .hero__slide img { width: 100%; height: 100%; object-fit: cover; } .hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 26, 51, .55) 0%, rgba(7, 26, 51, 0) 38%); pointer-events: none; } .hero__controls { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 999px; background: rgba(7, 26, 51, .55); backdrop-filter: blur(6px); } .hero__dots { display: flex; gap: 6px; } .hero__dot { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; background: rgba(255,255,255,.5); transition: width var(--dur), background var(--dur); } .hero__dot[aria-current="true"] { width: 28px; background: var(--saffron); } .hero__ctrl { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: .8rem; } .hero__ctrl:hover { background: #fff; color: var(--navy); } .hero__arrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(4px); transition: background var(--dur), color var(--dur); } .hero__arrow:hover { background: #fff; color: var(--navy); } .hero__arrow--prev { left: 16px; } .hero__arrow--next { right: 16px; } @media (max-width: 767.98px) { .hero__arrow { display: none; } .hero__controls { bottom: 8px; } } /* 11 TICKER ---------------------------------------------------------------- */ .ticker { display: flex; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); } .ticker__label { position: relative; display: flex; align-items: center; gap: .5rem; flex-shrink: 0; padding: 0 1.25rem 0 var(--gutter); background: var(--navy); color: #fff; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .ticker__label::after { content: ""; position: absolute; right: -14px; top: 0; bottom: 0; width: 14px; background: var(--navy); clip-path: polygon(0 0, 100% 50%, 0 100%); } .ticker__label i { color: var(--saffron); } .ticker__viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; min-height: 48px; display: flex; align-items: center; margin-left: 14px; mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); } .ticker__track { display: flex; width: max-content; animation: marquee var(--ticker-dur, 60s) linear infinite; } .ticker:hover .ticker__track, .ticker:focus-within .ticker__track, .ticker.is-paused .ticker__track { animation-play-state: paused; } .ticker__list { display: flex; list-style: none; margin: 0; padding: 0; } .ticker__list li { display: flex; align-items: center; white-space: nowrap; } .ticker__list li::before { content: ""; width: 6px; height: 6px; margin: 0 20px; border-radius: 50%; background: var(--saffron); } .ticker__list a { color: var(--text); font-weight: 500; text-decoration: none; } .ticker__list a:hover { color: var(--blue); text-decoration: underline; } .ticker__pause { flex-shrink: 0; width: 48px; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--navy); } .ticker__pause:hover { background: var(--blue-50); } .ticker__list span { color: var(--text); font-weight: 500; } /* Top headline strip (header partial) */ .ticker--top { box-shadow: none; } .ticker--top .ticker__label { background: var(--saffron); color: var(--navy-900); font-size: .8125rem; } .ticker--top .ticker__label i { color: var(--navy-900); } .ticker--top .ticker__label::after { background: var(--saffron); } .ticker--top .ticker__viewport { min-height: 40px; } .ticker--top .ticker__list span { font-size: .875rem; font-weight: 600; color: var(--navy); } .ticker--top .ticker__pause { width: 44px; } @media (max-width: 575.98px) { .ticker--top .ticker__label { justify-content: center; width: 44px; min-width: 44px; padding: 0; font-size: 0; gap: 0; } .ticker--top .ticker__label i { font-size: .9375rem; } .ticker--top .ticker__label::after { display: none; } .ticker--top .ticker__viewport { padding-left: 10px; } } /* 12 HELPLINES ------------------------------------------------------------- */ .helpline-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .helpline-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .helpline-grid { grid-template-columns: repeat(4, 1fr); } } .helpline-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur); } .helpline-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-100); } .helpline-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--blue-50); color: var(--blue); font-size: 1.1rem; } .helpline-card__label { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--muted); line-height: 1.35; } .helpline-card__nums { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; } .helpline-card__num { font-size: 1.5rem; font-weight: 800; color: var(--navy); text-decoration: none; letter-spacing: .01em; line-height: 1.2; } .helpline-card__num:hover { color: var(--blue); } .helpline-card__note { font-size: .75rem; font-weight: 700; color: var(--green); } .helpline-card--alert { border-color: rgba(198, 40, 40, .35); } .helpline-card--alert .helpline-card__icon { background: #FDECEC; color: var(--red); } .helpline-card--alert .helpline-card__num { color: var(--red); } .helpline-card--primary { grid-column: 1 / -1; color: #fff; border: 0; padding: 24px; background: radial-gradient(120% 140% at 100% 0%, #E24B4B 0%, var(--red) 45%, var(--red-700) 100%); box-shadow: 0 16px 36px rgba(198, 40, 40, .3); overflow: hidden; } .helpline-card--primary::after { content: "\f3ed"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: -18px; bottom: -34px; font-size: 9rem; opacity: .08; line-height: 1; } .helpline-card--primary .helpline-card__icon { width: 56px; height: 56px; background: rgba(255,255,255,.16); color: #fff; font-size: 1.4rem; } .helpline-card--primary .helpline-card__label { color: rgba(255,255,255,.92); font-size: 1.0625rem; } .helpline-card--primary .helpline-card__num { color: #fff; font-size: clamp(3rem, 2rem + 4vw, 4.5rem); line-height: 1; } .helpline-card--primary .btn { align-self: flex-start; } @media (min-width: 1100px) { .helpline-card--primary { grid-column: span 2; grid-row: span 2; justify-content: center; padding: 32px; } .helpline-card--wide { grid-column: span 2; } } /* 13 SPLIT / ABOUT --------------------------------------------------------- */ .split { display: grid; gap: 36px; align-items: center; } @media (min-width: 1024px) { .split { grid-template-columns: 5fr 7fr; gap: 64px; } .split--reverse { grid-template-columns: 7fr 5fr; } .split--reverse .split__media { order: 2; } .split--even { grid-template-columns: 1fr 1fr; } .split--fill { align-items: start; } .split--fill > .media-frame { position: sticky; top: calc(var(--header-h) + 24px); } .split--fill > .media-frame img { height: auto; } } .media-frame { position: relative; margin: 0 14px 14px 0; } .media-frame::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--saffron); border-radius: var(--radius-lg); z-index: 0; } .media-frame img { position: relative; z-index: 1; width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); object-fit: cover; } .media-frame__badge { position: absolute; z-index: 2; left: -8px; bottom: 28px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); font-weight: 700; color: var(--navy); } .media-frame__badge i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--navy); color: var(--saffron); } .feature-list { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 12px; } .feature { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--saffron); border-radius: var(--radius); transition: box-shadow var(--dur), transform var(--dur); } .feature:hover { box-shadow: var(--shadow); transform: translateX(3px); } .feature__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--blue-50); color: var(--blue); font-size: 1.15rem; } .feature p { margin: 0; } .icon-list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 10px; } .icon-list li { position: relative; padding-left: 34px; } .icon-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .7rem; position: absolute; left: 0; top: .3em; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green-50); color: var(--green); } .icon-list--shield li::before { content: "\f3ed"; background: var(--blue-50); color: var(--blue); } .icon-list--num { counter-reset: n; } .icon-list--num li::before { content: counter(n); counter-increment: n; font-family: var(--font); font-size: .75rem; background: var(--navy); color: #fff; } .quote { position: relative; margin: 1.5rem 0; padding: 20px 24px 20px 64px; background: var(--saffron-50); border-left: 4px solid var(--saffron); border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.125rem; font-weight: 600; color: var(--navy); } .quote::before { content: "\f10d"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 22px; top: 20px; color: var(--saffron); font-size: 1.4rem; } .quote p:last-child { margin: 0; } /* 14 CARDS ----------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .card--hover { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .card--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .card__body { padding: 20px; } .update-card { display: grid; grid-template-columns: 1fr; height: 100%; } @media (min-width: 576px) { .update-card { grid-template-columns: 180px 1fr; } } .update-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--blue-50); } @media (min-width: 576px) { .update-card__media { aspect-ratio: auto; min-height: 180px; } } .update-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); } .update-card:hover .update-card__media img { transform: scale(1.06); } .update-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; } .update-card__title { font-size: 1.125rem; margin: 0; } .update-card__text { margin: 0; color: var(--muted); font-size: .9375rem; } .update-card__text p { margin: 0; } .news-card { display: flex; flex-direction: column; height: 100%; } .news-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--blue-50); } .news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); } .news-card:hover .news-card__media img { transform: scale(1.06); } .news-card__cat { position: absolute; left: 12px; top: 12px; } .news-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 18px 18px; } .news-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--muted); } .news-card__meta li { display: inline-flex; align-items: center; gap: .35rem; } .news-card__meta i { color: var(--saffron); } .news-card__title { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.55; } .news-card__title a { color: var(--heading); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur); } .news-card__title a:hover { background-size: 100% 1px; color: var(--blue); } .news-card__title a::after { content: ""; position: absolute; inset: 0; } .news-card { position: relative; } .news-card__foot { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); } .news-card__foot .link-arrow { position: relative; z-index: 1; } /* 15 STATS ----------------------------------------------------------------- */ .stats-strip { position: relative; background: var(--navy); color: #fff; overflow: hidden; } .stats-strip::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; } .stats-grid { position: relative; display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } } .fact-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .fact-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--blue-50); color: var(--blue); } .fact-card__num { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 800; line-height: 1.1; color: var(--blue); font-variant-numeric: tabular-nums; } .fact-card__label { font-weight: 600; color: var(--heading); } .fact-card__source { margin-top: auto; font-size: .75rem; color: var(--muted); } .stats-strip .fact-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); box-shadow: none; } .stats-strip .fact-card__icon { background: rgba(242,140,40,.15); color: var(--saffron); } .stats-strip .fact-card__num, .stats-strip .fact-card__label { color: #fff; } .stats-strip .fact-card__source { color: #B8C4D6; } /* 16 STEPPER --------------------------------------------------------------- */ .stepper { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; } .step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding-bottom: 28px; } .step::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: repeating-linear-gradient(var(--blue-100) 0 6px, transparent 6px 12px); } .step:last-child::before { display: none; } .step__num { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); border: 2px solid var(--blue); color: var(--blue); font-size: 1.2rem; z-index: 1; } .step__num span { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .7rem; font-weight: 700; } .step__body h3 { font-size: 1.0625rem; margin-bottom: .25rem; } .step__body p { margin: 0; color: var(--muted); font-size: .9375rem; } .step--urgent .step__num { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 0 6px rgba(198,40,40,.12); } .step__badge { margin-bottom: .4rem; } @media (min-width: 1024px) { .stepper { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; } .step { grid-template-columns: 1fr; text-align: center; padding: 0 6px; justify-items: center; } .step::before { left: calc(50% + 36px); right: calc(-50% + 36px); top: 27px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--blue-100) 0 6px, transparent 6px 12px); } } /* 17 SOCIALS --------------------------------------------------------------- */ .social-card { display: flex; flex-direction: column; height: 100%; } .social-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); } .social-card__brand { display: flex; align-items: center; gap: 12px; } .social-card__brand i { font-size: 1.75rem; } .social-card__brand h3 { margin: 0; font-size: 1.125rem; } .social-card--fb .social-card__brand i { color: #1877F2; } .social-card--x .social-card__brand i { color: #0F1419; } .social-card--yt .social-card__brand i { color: #FF0000; } .embed-facade { position: relative; flex: 1; min-height: 420px; display: grid; place-items: center; text-align: center; padding: 24px; background: linear-gradient(160deg, var(--blue-50), var(--surface)); } .embed-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .embed-facade__icon { font-size: 2.75rem; color: var(--blue-100); margin-bottom: 12px; } /* 18 LOGO RAIL ------------------------------------------------------------- */ .rail { position: relative; } .rail__viewport { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 2px 14px; scrollbar-width: none; } .rail__viewport::-webkit-scrollbar { display: none; } .rail__viewport > * { scroll-snap-align: start; } @media (min-width: 1024px) { .rail__viewport { grid-auto-columns: calc((100% - 60px) / 4); } } .rail__nav { display: flex; justify-content: center; gap: 10px; margin-top: 12px; } .logo-tile { display: grid; place-items: center; height: 130px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); } .logo-tile img { max-height: 84px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(.35); transition: filter var(--dur); } a.logo-tile:hover, .logo-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--saffron); } .logo-tile:hover img { filter: none; } /* 19 NOTICE BOARD ---------------------------------------------------------- */ .notice-board { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .notice-board__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--navy); color: #fff; } .notice-board__head h3 { display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; font-size: 1.0625rem; } .notice-board__head h3 i { color: var(--saffron); } .notice-board__head .icon-btn { width: 36px; height: 36px; background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); } .notice-board__viewport { position: relative; height: 320px; overflow: hidden; mask-image: linear-gradient(180deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); } .notice-board__track { animation: scroll-up var(--notice-dur, 30s) linear infinite; } .notice-board:hover .notice-board__track, .notice-board:focus-within .notice-board__track, .notice-board.is-paused .notice-board__track { animation-play-state: paused; } .notice-list { list-style: none; margin: 0; padding: 0; } .notice-list li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 500; } .notice-list li i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--saffron-50); color: var(--saffron); } .notice-content { padding: 18px 20px; font-weight: 500; line-height: 1.8; } .notice-content p { position: relative; margin: 0 0 12px; padding-left: 30px; } .notice-content p::before { content: "\f0a1"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: .2em; color: var(--saffron); } .notice-content [style*="background-color"] { background-color: transparent !important; } .notice-board.is-static .notice-board__viewport { height: auto; max-height: 360px; overflow-y: auto; mask-image: none; } .notice-board.is-static .notice-board__track { animation: none; } .notice-board.is-static .notice-board__head .icon-btn { display: none; } .feeds-art { display: grid; place-items: center; padding: 16px; } .feeds-art img { width: min(100%, 440px); } /* 20 FAQ + TESTIMONIALS ---------------------------------------------------- */ .faq-layout { display: grid; gap: 32px; } @media (min-width: 1024px) { .faq-layout { grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; } } .faq-panel { position: relative; overflow: hidden; padding: 32px; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(145deg, var(--navy) 0%, var(--blue) 100%); } .faq-panel::after { content: "\f059"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: -30px; bottom: -50px; font-size: 14rem; opacity: .07; line-height: 1; } .faq-panel h2 { color: #fff; } .faq-panel__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,.12); color: var(--saffron); font-size: 1.6rem; margin-bottom: 20px; } @media (min-width: 1024px) { .faq-panel { position: sticky; top: calc(var(--header-h) + 24px); } } .faq-tools { display: grid; gap: 12px; margin-bottom: 16px; } .accordion { display: grid; gap: 10px; } .acc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--dur), box-shadow var(--dur); } .acc.is-open { border-color: var(--blue-100); box-shadow: var(--shadow); } .acc__head { margin: 0; font-size: 1rem; } .acc__btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 18px; background: none; border: 0; text-align: left; font-weight: 600; color: var(--heading); line-height: 1.5; } .acc__icon { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-50); transition: background var(--dur), transform var(--dur); } .acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--blue); border-radius: 2px; transition: transform var(--dur) var(--ease); } .acc__icon::after { transform: rotate(90deg); } .acc.is-open .acc__icon { background: var(--saffron); } .acc.is-open .acc__icon::before, .acc.is-open .acc__icon::after { background: #fff; } .acc.is-open .acc__icon::after { transform: rotate(0); } .acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); } .acc.is-open .acc__panel { grid-template-rows: 1fr; } .acc__inner { overflow: hidden; } .acc__content { padding: 0 18px 18px; color: var(--muted); } .acc__content > :last-child { margin-bottom: 0; } .faq-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding: 14px 18px; border-radius: var(--radius); background: #FDECEC; color: var(--red-700); font-weight: 600; } .faq-cta a { color: var(--red-700); font-weight: 800; } .empty-note { padding: 20px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); } .testimonials { position: relative; max-width: 880px; margin-inline: auto; } .testi { display: none; text-align: center; padding: 40px 28px 32px; } .testi.is-active { display: block; animation: fade-in 500ms var(--ease); } @media (min-width: 768px) { .testi { padding: 48px 72px 36px; } } .testi__quote { font-size: 2rem; color: var(--saffron); margin-bottom: 12px; } .testi__text { font-size: 1.125rem; line-height: 1.8; color: var(--text); margin-bottom: 24px; } .testi__person { display: inline-flex; align-items: center; gap: 14px; text-align: left; } .testi__person img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--saffron-50); } .testi__name { margin: 0; font-size: 1rem; } .testi__role { margin: 0; font-size: .875rem; color: var(--muted); } .testimonials__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; } .dots { display: flex; gap: 6px; } .dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: var(--blue-100); transition: width var(--dur), background var(--dur); } .dots button[aria-current="true"] { width: 26px; background: var(--saffron); } /* 21 TEAM ------------------------------------------------------------------ */ /* Home — Our Volunteers: official profile cards (photo shown at native size so it stays sharp) */ .vol-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (min-width: 992px) { .vol-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } } .vol-card { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 28px 20px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: center; box-shadow: var(--shadow-sm); } .vol-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 92px; background: var(--navy); } .vol-card__photo { position: relative; width: 150px; height: 150px; overflow: hidden; border: 5px solid var(--surface); border-radius: 50%; background: var(--blue-50); box-shadow: 0 6px 18px rgba(11, 37, 69, .18); } .vol-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .vol-card__name { margin: 18px 0 4px; font-size: 1.125rem; } .vol-card__role { display: inline-block; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--saffron-50); font-size: .8125rem; font-weight: 600; color: #9A4A00; } @media (max-width: 575.98px) { .vol-grid { gap: 12px; } .vol-card { padding: 20px 12px 18px; } .vol-card::before { height: 68px; } .vol-card__photo { width: 108px; height: 108px; border-width: 4px; } .vol-card__name { margin-top: 14px; font-size: 1rem; } .vol-card__role { font-size: .75rem; } } .team-card { position: relative; text-align: center; } .team-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--blue-50); } .team-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 600ms var(--ease); } .team-card__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 18px; background: linear-gradient(0deg, rgba(11,37,69,.85) 0%, rgba(11,37,69,0) 60%); opacity: 0; transition: opacity var(--dur) var(--ease); } .team-card:hover .team-card__overlay, .team-card:focus-within .team-card__overlay { opacity: 1; } .team-card:hover .team-card__media img { transform: scale(1.05); } .team-card__body { padding: 16px 14px 18px; } .team-card__name { margin: 0 0 2px; font-size: 1.0625rem; } .team-card__role { margin: 0; font-size: .875rem; color: var(--muted); } .team-card__role::before { content: ""; display: block; width: 28px; height: 3px; margin: 8px auto; border-radius: 3px; background: var(--saffron); } @media (hover: none) { .team-card__overlay { opacity: 1; background: linear-gradient(0deg, rgba(11,37,69,.7) 0%, rgba(11,37,69,0) 45%); } } .profile { display: grid; gap: 24px; padding: 24px; scroll-margin-top: calc(var(--header-h) + 24px); } @media (min-width: 768px) { .profile { grid-template-columns: 220px 1fr; align-items: center; } } .profile:target { outline: 3px solid var(--saffron); outline-offset: 4px; } .profile__img { width: 100%; max-width: 220px; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: var(--radius-lg); } .profile__role { color: var(--blue); font-weight: 600; margin-bottom: .75rem; } /* 22 PARTNER MARQUEE ------------------------------------------------------- */ /* Partner logos — navy label + continuous logo slide (marquee JS in main.js §9) */ .partners { padding-block: 28px; background: var(--surface); border-top: 1px solid var(--line); } .partners__panel { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--navy); border-radius: var(--radius); background: var(--navy); box-shadow: var(--shadow-sm); } .partners__label { position: relative; z-index: 1; display: flex; flex: none; align-items: center; gap: 12px; margin: 0; padding: 0 30px 0 24px; background: var(--surface); font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--navy); } .partners__label::after { content: ""; position: absolute; top: 50%; right: -11px; border-block: 11px solid transparent; border-left: 11px solid var(--surface); transform: translateY(-50%); } .partners__icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 1rem; } .partners .marquee { flex: 1; min-width: 0; margin-left: 24px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent); } .marquee__track { display: flex; width: max-content; animation: marquee 45s linear infinite; } .marquee__list { display: flex; align-items: center; gap: 64px; margin: 0; padding: 0 32px; list-style: none; } .marquee__list li { display: flex; flex: none; align-items: center; height: 104px; } .marquee__list img { width: auto; height: 56px; max-width: none; object-fit: contain; transition: transform var(--dur); } .marquee__list li:hover img { transform: scale(1.06); } .marquee__list a { display: flex; align-items: center; height: 100%; border-radius: 6px; } .marquee__list a:focus-visible { outline: 3px solid var(--saffron); outline-offset: 4px; } @media (max-width: 767.98px) { .partners { padding-block: 20px; } .partners__label { margin: 0; } .partners__panel { flex-direction: column; } .partners__label { padding: 12px 16px; font-size: .875rem; } .partners__label br { display: none; } .partners__label::after { top: auto; right: auto; bottom: -10px; left: 30px; border-block: 0; border-top: 10px solid var(--surface); border-inline: 10px solid transparent; transform: none; } .partners__icon { width: 32px; height: 32px; font-size: .875rem; } .partners .marquee { mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); } .partners .marquee { margin-left: 0; } .marquee__list { gap: 40px; padding: 0 20px; } .marquee__list li { height: 84px; padding-top: 6px; } .marquee__list img { height: 44px; } } @media (prefers-reduced-motion: reduce) { .partners .marquee { overflow-x: auto; } .marquee__list li:hover img { transform: none; } } /* 23 FOOTER ---------------------------------------------------------------- */ .site-footer { position: relative; background: var(--navy); color: #C9D3E1; font-size: .9375rem; } .footer-main { padding-block: 56px 32px; } .footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; } @media (max-width: 639.98px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } .footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; } } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 48px; } } .footer-logo { display: inline-block; padding: 10px 14px; background: #fff; border-radius: var(--radius); margin-bottom: 18px; } .footer-logo img { height: 56px; width: auto; } .site-footer h2 { position: relative; color: #fff; font-size: 1.0625rem; padding-bottom: 12px; margin-bottom: 18px; } .site-footer h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 3px; background: var(--saffron); } .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .footer-links a { display: inline-flex; align-items: center; gap: .6rem; min-height: 36px; color: #C9D3E1; text-decoration: none; transition: color var(--dur), transform var(--dur); } .footer-links a i { font-size: .7rem; color: var(--saffron); } .footer-links a:hover { color: #fff; transform: translateX(3px); } .footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .footer-contact li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; } .footer-contact i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.07); color: var(--saffron); } .footer-contact a { color: #C9D3E1; text-decoration: none; } .footer-contact a:hover { color: #fff; } .footer-social { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.07); color: #fff; text-decoration: none; transition: background var(--dur), transform var(--dur); } .footer-social a:hover { background: var(--saffron); color: #1A1A1A; transform: translateY(-3px); } .flw-title { color: #fff; font-weight: 700; margin: 18px 0 10px; } .footer-bottom { background: var(--navy-900); padding-block: 16px; font-size: .8125rem; color: #AEB9CA; } .footer-bottom__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; } .footer-bottom p { margin: 0; } .footer-bottom a { color: #fff; } .footer-bottom a:hover { color: var(--saffron); } /* 24 FLOATING ELEMENTS ----------------------------------------------------- */ .float-social { position: fixed; right: 0; top: 50%; z-index: 90; transform: translateY(-50%); display: none; list-style: none; margin: 0; padding: 0; } @media (min-width: 1024px) { .float-social { display: grid; gap: 4px; } } .float-social a { display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 44px; width: 44px; margin-left: auto; padding: 0 13px; overflow: hidden; white-space: nowrap; color: #fff; text-decoration: none; font-size: .875rem; font-weight: 600; background: var(--fs-bg, var(--navy)); border-radius: 10px 0 0 10px; box-shadow: var(--shadow); transition: width var(--dur) var(--ease); } .float-social a span { opacity: 0; transition: opacity var(--dur); } .float-social a i { flex-shrink: 0; width: 18px; text-align: center; font-size: 1.05rem; } .float-social a:hover, .float-social a:focus-visible { width: 220px; color: #fff; } .float-social a:hover span, .float-social a:focus-visible span { opacity: 1; } .fs-wa { --fs-bg: #128C4B; } .fs-fb { --fs-bg: #1668D8; } .fs-x { --fs-bg: #0F1419; } .fs-ig { --fs-bg: #C1356B; } .fs-yt { --fs-bg: #D40000; } .fs-ch { --fs-bg: #0B7A45; } .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 -6px 20px rgba(11,37,69,.15); } .mobile-bar a { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 56px; color: #fff; font-weight: 700; text-decoration: none; } .mobile-bar__call { background: var(--red); } .mobile-bar__wa { background: var(--green); } @media (max-width: 767.98px) { body { padding-bottom: 56px; } } @media (min-width: 768px) { .mobile-bar { display: none; } } .back-to-top { position: fixed; right: 18px; bottom: 76px; z-index: 94; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--blue); color: #fff; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--dur), transform var(--dur), visibility var(--dur), background var(--dur); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .back-to-top:hover { background: var(--navy); } @media (min-width: 768px) { .back-to-top { bottom: 24px; right: 64px; } } .reading-progress { position: fixed; left: 0; top: 0; z-index: 500; height: 4px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--saffron); } /* 25 INNER PAGE HERO ------------------------------------------------------- */ .page-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(ellipse 60% 90% at 85% 50%, rgba(30, 86, 160, .55), transparent 70%), linear-gradient(120deg, #071A33 0%, var(--navy) 45%, #12345F 100%); padding-block: 48px 44px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); } @media (min-width: 1024px) { .page-hero { padding-block: 72px 64px; } } /* Circuit-board traces + binary, fading out towards the text */ .page-hero::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%23fff' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M0 40h40l20 20h40M100 60v40l20 20h40M20 160v-30l20-20h30M160 20h-30l-20-20M60 0v20l-20 20M100 160v-20h20'/%3E%3Cg fill='%23fff' fill-opacity='.35' stroke='none'%3E%3Ccircle cx='100' cy='60' r='3'/%3E%3Ccircle cx='70' cy='110' r='3'/%3E%3Ccircle cx='130' cy='20' r='3'/%3E%3Ccircle cx='120' cy='140' r='3'/%3E%3Ccircle cx='40' cy='40' r='2.5'/%3E%3C/g%3E%3Ctext x='8' y='92' font-family='monospace' font-size='9' fill='%23fff' fill-opacity='.2' stroke='none'%3E0101 1101%3C/text%3E%3Ctext x='92' y='36' font-family='monospace' font-size='9' fill='%23fff' fill-opacity='.14' stroke='none'%3E1001%3C/text%3E%3C/svg%3E"), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 160px 160px, 32px 32px, 32px 32px; -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 70%); mask-image: linear-gradient(90deg, transparent 15%, #000 70%); } /* Shield + lock emblem inside radar rings */ .page-hero::after { content: ""; position: absolute; top: 50%; right: max(24px, calc((100vw - 1240px) / 2)); width: 380px; height: 380px; transform: translateY(-50%); border-radius: 50%; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cpath d='M100 10 180 40v65c0 55-35 90-80 107-45-17-80-52-80-107V40z' fill='%23fff' fill-opacity='.05' stroke='%23fff' stroke-opacity='.4' stroke-width='2'/%3E%3Cpath d='M100 10 180 40v65c0 55-35 90-80 107-45-17-80-52-80-107V40z' transform='translate(100 111) scale(.8) translate(-100 -111)' fill='none' stroke='%23F28C28' stroke-opacity='.7' stroke-width='2' stroke-dasharray='4 6'/%3E%3Cpath d='M82 102V88a18 18 0 0 1 36 0v14' fill='none' stroke='%23F28C28' stroke-width='7'/%3E%3Crect x='70' y='100' width='60' height='48' rx='9' fill='%23F28C28'/%3E%3Ccircle cx='100' cy='118' r='6' fill='%230B2545'/%3E%3Crect x='97' y='120' width='6' height='15' rx='2' fill='%230B2545'/%3E%3C/svg%3E") center / 150px 165px no-repeat, radial-gradient(circle, rgba(242,140,40,.22), transparent 55%), repeating-radial-gradient(circle, rgba(255,255,255,.1) 0 1px, transparent 1px 30px); -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 71%); mask-image: radial-gradient(circle, #000 55%, transparent 71%); animation: heroPulse 5s ease-in-out infinite; } @keyframes heroPulse { 50% { opacity: .75; } } @media (max-width: 1023.98px) { .page-hero::after { width: 280px; height: 280px; right: -40px; background-size: 110px 121px, auto, auto; } } @media (max-width: 767.98px) { .page-hero::after { width: 200px; height: 200px; right: -50px; opacity: .45; animation: none; background-size: 80px 88px, auto, auto; } } @media (prefers-reduced-motion: reduce) { .page-hero::after { animation: none; } } /* Breadcrumb as a secure-channel pill */ .page-hero .breadcrumb { display: inline-flex; margin-bottom: 18px; padding: 6px 14px 6px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .page-hero .breadcrumb li:first-child::before { content: "\f3ed"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .8rem; color: var(--saffron); } .page-hero .container { position: relative; z-index: 1; } .page-hero h1 { color: #fff; margin-bottom: .5rem; max-width: 900px; } .page-hero__lead { color: #D3DCEA; max-width: 720px; margin: 0; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; font-size: .875rem; } .breadcrumb li { display: inline-flex; align-items: center; gap: 6px; color: #D3DCEA; } .breadcrumb li + li::before { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .6rem; color: var(--saffron); } .breadcrumb a { color: #fff; text-decoration: none; } .breadcrumb a:hover { color: var(--saffron); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: #D3DCEA; } /* 26 CONTENT + ASIDE ------------------------------------------------------- */ .with-aside { display: grid; gap: 32px; } @media (min-width: 1024px) { .with-aside { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; } } .aside { display: grid; gap: 20px; } @media (min-width: 1024px) { .aside--sticky { position: sticky; top: calc(var(--header-h) + 20px); } } .aside-card { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .aside-card h2 { font-size: 1.0625rem; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .aside-card h2 i { color: var(--saffron); } .quick-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .quick-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-weight: 500; } .quick-links a i { color: var(--muted); font-size: .75rem; transition: transform var(--dur); } .quick-links a:hover, .quick-links a[aria-current="page"] { background: var(--blue-50); color: var(--blue); } .quick-links a:hover i { transform: translateX(3px); color: var(--blue); } .helpline-mini { position: relative; overflow: hidden; padding: 22px; border-radius: var(--radius); color: #fff; background: linear-gradient(145deg, var(--red) 0%, var(--red-700) 100%); } .helpline-mini::after { content: "\f095"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: -10px; bottom: -22px; font-size: 6rem; opacity: .1; } .helpline-mini p { margin: 0 0 4px; font-weight: 600; opacity: .95; } .helpline-mini a.num { display: block; color: #fff; font-size: 2.75rem; font-weight: 800; text-decoration: none; line-height: 1.1; margin-bottom: 12px; } .helpline-mini .btn { position: relative; z-index: 1; } .content-card { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } @media (min-width: 768px) { .content-card { padding: 36px; } } .content-card > :last-child { margin-bottom: 0; } .content-card__img { width: 100%; border-radius: var(--radius); margin-bottom: 24px; } .caution { display: grid; gap: 24px; padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--red); box-shadow: var(--shadow-sm); } @media (min-width: 768px) { .caution { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 32px; } } .caution__title { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(1.125rem, .9rem + 1.3vw, 1.875rem); color: var(--red-700); letter-spacing: .04em; } @media (min-width: 768px) { .caution__title { white-space: nowrap; } } .caution__title i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #FDECEC; color: var(--red); } .caution img { border-radius: var(--radius); } /* 27 ARTICLE (AEO / GEO) --------------------------------------------------- */ .article-head { padding-block: 32px 8px; background: var(--surface); } .article-head h1 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem); line-height: 1.4; max-width: 980px; } .article-head .breadcrumb li, .article-head .breadcrumb [aria-current="page"] { color: var(--muted); } .article-head .breadcrumb a { color: var(--blue); } .article-head .breadcrumb [aria-current="page"] { max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; } .meta-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 14px 0; border-block: 1px solid var(--line); margin: 20px 0 24px; } .meta-bar__info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; list-style: none; margin: 0; padding: 0; font-size: .875rem; color: var(--muted); } .meta-bar__info li { display: inline-flex; align-items: center; gap: .4rem; } .meta-bar__info i { color: var(--saffron); } .author-mini { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; text-decoration: none; } .author-mini img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: top; } .author-mini .fa-circle-check { color: var(--green); } .share { display: flex; align-items: center; gap: 6px; } .share__label { font-size: .8125rem; font-weight: 600; color: var(--muted); margin-right: 4px; } .share__btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--navy); text-decoration: none; transition: all var(--dur); } .share__btn:hover { color: #fff; transform: translateY(-2px); } .share__btn--wa:hover { background: #128C4B; border-color: #128C4B; } .share__btn--fb:hover { background: #1668D8; border-color: #1668D8; } .share__btn--x:hover { background: #0F1419; border-color: #0F1419; } .share__btn--in:hover { background: #0A66C2; border-color: #0A66C2; } .share__btn--copy:hover { background: var(--navy); border-color: var(--navy); } .share__btn--wa { background: #128C4B; border-color: #128C4B; color: #fff; } .article-featured { margin: 0 0 28px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--blue-50); } /* Article page — cyber hero head + government "document sheet" */ .article-hero { padding-block: 36px 28px; } @media (min-width: 1024px) { .article-hero { padding-block: 52px 36px; } } .page-hero.article-hero h1 { max-width: 820px; margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.5; } .article-hero .breadcrumb { max-width: 100%; } .article-hero .breadcrumb [aria-current="page"] { display: inline-block; max-width: min(42ch, 52vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .article-hero .breadcrumb [aria-current="page"]::before { display: inline-block; margin-right: 6px; } @media (max-width: 575.98px) { .article-hero .breadcrumb [aria-current="page"] { display: none; } } @media (max-width: 1023.98px) { .article-hero::after { top: auto; bottom: -70px; transform: none; opacity: .3; animation: none; } } .article-hero .meta-bar { margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 0; } .article-hero .meta-bar__info { color: #D3DCEA; } .article-hero .share__label { color: #D3DCEA; } .article-hero .share__btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; } .article-hero .share__btn--wa { background: #128C4B; border-color: #128C4B; } .article-hero .share__btn--print:hover { background: var(--saffron); border-color: var(--saffron); color: var(--navy-900); } @media (max-width: 575.98px) { .article-hero .share__label { display: none; } .article-hero .share__btn { width: 36px; height: 36px; } } .article-body { padding-top: 32px; } @media (min-width: 1024px) { .article-body { padding-top: 44px; } } .article-sheet { min-width: 0; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } @media (min-width: 768px) { .article-sheet { padding: 28px 36px 36px; } } .article-sheet .article-featured { margin: 0 0 28px; border-radius: var(--radius); box-shadow: none; border: 1px solid var(--line); } .article-sheet .article-featured img { max-height: 520px; object-fit: contain; background: var(--blue-50); } .article-sheet .prose > p:first-child { font-size: 1.125rem; color: var(--heading); } .article-sheet .prose h2 { margin-top: 1.8em; padding: 10px 14px; background: var(--bg); border-left-width: 4px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .article-sheet .prose h2:first-child { margin-top: 0; } .article-sheet .helpful { margin-bottom: 0; } .article-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin: 36px 0 0; padding: 16px 20px; background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--saffron); border-radius: var(--radius-sm); } .article-share__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; color: var(--heading); } .article-share__title i { color: var(--saffron); } .article-share .share { flex-wrap: wrap; } .article-featured img { width: 100%; } .article-grid { display: grid; gap: 32px; } @media (min-width: 1024px) { .article-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; } } .quick-answer { position: relative; margin: 0 0 32px; padding: 20px 24px 20px 24px; background: linear-gradient(0deg, rgba(31,78,140,.04), rgba(31,78,140,.04)), var(--surface); border: 1px solid var(--blue-100); border-left: 4px solid var(--saffron); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .quick-answer__label { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); } .quick-answer__label i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--saffron); color: #fff; font-size: .8rem; } .quick-answer__text { margin: 0; font-size: 1.0625rem; font-weight: 500; color: var(--text); } .quick-answer__text p:last-child { margin: 0; } .prose { font-size: 1.0625rem; line-height: 1.85; color: var(--text); } .prose > * + * { margin-top: 1.1em; } .prose p { margin: 0; } .prose p + p { margin-top: 1em; } .prose h2 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); margin: 2em 0 .6em; padding-left: 14px; border-left: 4px solid var(--saffron); scroll-margin-top: calc(var(--header-h) + 24px); line-height: 1.45; } .prose h3 { font-size: 1.1875rem; margin: 1.6em 0 .5em; scroll-margin-top: calc(var(--header-h) + 24px); line-height: 1.5; } .prose ul, .prose ol { padding-left: 1.4rem; } .prose li + li { margin-top: .4em; } .prose li::marker { color: var(--saffron); font-weight: 700; } .prose a { font-weight: 600; } .prose img { border-radius: var(--radius); } .prose table { margin: 1.5em 0; font-size: .9375rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: block; overflow-x: auto; } .prose th, .prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .prose thead th { background: var(--navy); color: #fff; font-weight: 700; } .prose tbody tr:nth-child(even) { background: var(--bg); } .prose blockquote { margin: 1.5em 0; padding: 16px 20px; border-left: 4px solid var(--blue); background: var(--blue-50); border-radius: 0 var(--radius) var(--radius) 0; } .prose [style*="font-size"] { font-size: inherit !important; } .key-takeaways { position: relative; overflow: hidden; margin: 40px 0; padding: 28px; border-radius: var(--radius-lg); background: var(--navy); color: #fff; } .key-takeaways::after { content: "\f3ed"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: -20px; bottom: -40px; font-size: 12rem; line-height: 1; opacity: .06; } .key-takeaways h2 { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 1.375rem; margin-bottom: 18px; border: 0; padding: 0; } .key-takeaways h2 i { color: var(--saffron); } .key-takeaways ul { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 28px; } @media (min-width: 768px) { .key-takeaways ul { grid-template-columns: 1fr 1fr; } } .key-takeaways li { position: relative; padding-left: 32px; line-height: 1.7; } .key-takeaways li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .7rem; position: absolute; left: 0; top: .35em; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--saffron); color: #1A1A1A; } .toc { font-size: .9375rem; } @media (min-width: 1024px) { .toc { position: sticky; top: calc(var(--header-h) + 20px); } } .toc__box { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .toc__title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1rem; } .toc__title i { color: var(--saffron); } .toc__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); max-height: 60vh; overflow-y: auto; } .toc__list a { display: block; margin-left: -2px; padding: 6px 12px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.5; transition: color var(--dur), border-color var(--dur), background var(--dur); } .toc__list .toc__sub a { padding-left: 26px; font-size: .875rem; } .toc__list a:hover { color: var(--blue); } .toc__list a.is-active { color: var(--blue); font-weight: 600; border-left-color: var(--saffron); background: var(--blue-50); } .toc-mobile { position: sticky; top: calc(66px + 8px); z-index: 20; margin-bottom: 20px; } .toc-mobile summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; list-style: none; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 600; box-shadow: var(--shadow); cursor: pointer; } .toc-mobile summary::-webkit-details-marker { display: none; } .toc-mobile[open] summary i.fa-chevron-down { transform: rotate(180deg); } .toc-mobile .toc__box { margin-top: 10px; } @media (min-width: 1024px) { .toc-mobile { display: none; } } @media (max-width: 1023.98px) { .toc--desktop { display: none; } } .author-box { display: grid; gap: 18px; margin: 40px 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } @media (min-width: 576px) { .author-box { grid-template-columns: 96px 1fr auto; align-items: center; } } .author-box__img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: top; border: 4px solid var(--blue-50); } .author-box__label { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .author-box__name { display: flex; align-items: center; gap: 8px; margin: 2px 0; font-size: 1.25rem; } .author-box__name i { color: var(--green); font-size: 1rem; } .author-box__role { margin: 0; color: var(--blue); font-weight: 600; } .author-box__bio { margin: 6px 0 0; color: var(--muted); font-size: .9375rem; } .sources { margin: 40px 0; padding: 20px 24px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); } .sources h2 { font-size: 1.125rem; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; border: 0; padding: 0; } .sources h2 i { color: var(--muted); } .sources ol { margin: 0; padding-left: 1.25rem; font-size: .875rem; color: var(--muted); display: grid; gap: 6px; } .sources a { color: var(--muted); font-weight: 500; word-break: break-word; } .sources a:hover { color: var(--blue); } .sources a i { font-size: .7rem; margin-left: 4px; } .related-q { margin: 40px 0; } .related-q__list { display: grid; gap: 8px; } .related-q details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .related-q summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-weight: 600; color: var(--heading); cursor: pointer; list-style: none; } .related-q summary::-webkit-details-marker { display: none; } .related-q summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .75rem; color: var(--blue); transition: transform var(--dur); } .related-q details[open] summary::after { transform: rotate(180deg); } .related-q__answer { padding: 0 18px 16px; color: var(--muted); } .helpful { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 40px 0; padding: 18px 22px; border-radius: var(--radius); background: var(--blue-50); } .helpful p { margin: 0; font-weight: 600; color: var(--heading); } .helpful__btns { display: flex; gap: 8px; } .helpful__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--blue-100); background: var(--surface); color: var(--navy); font-weight: 600; } .helpful__btn:hover { border-color: var(--blue); color: var(--blue); } .helpful__btn[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; } .helpful__thanks { color: var(--green) !important; } .cta-strip { position: relative; overflow: hidden; color: #fff; background: linear-gradient(110deg, var(--red-700) 0%, var(--red) 60%, #D84343 100%); padding-block: 32px; } .cta-strip::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px); } .cta-strip__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; } .cta-strip__main { display: flex; align-items: center; gap: 18px; } .cta-strip__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 1.5rem; flex-shrink: 0; } .cta-strip p { margin: 0; font-weight: 600; opacity: .95; } .cta-strip__num { display: block; color: #fff; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 800; line-height: 1.1; text-decoration: none; } .cta-strip__num:hover { color: #fff; text-decoration: underline; } /* 28 LISTING TOOLS --------------------------------------------------------- */ .toolbar { display: grid; gap: 16px; margin-bottom: 32px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } @media (min-width: 900px) { .toolbar { grid-template-columns: 360px 1fr; align-items: center; } } .input-search { position: relative; } .input-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .input-search input { width: 100%; height: 46px; padding: 0 14px 0 42px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); } .input-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,78,140,.18); background: var(--surface); } /* News toolbar: search · date · week · reset, categories on their own row */ .toolbar--news { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .toolbar--news > form.input-search, .toolbar--news > [data-hide-empty], .toolbar--news .toolbar__reset { grid-column: 1 / -1; } @media (min-width: 900px) { .toolbar--news { grid-template-columns: minmax(0, 1fr) 200px 200px auto; } .toolbar--news > form.input-search, .toolbar--news .toolbar__reset { grid-column: auto; } } .input-search select { width: 100%; height: 46px; padding: 0 38px 0 42px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; } .input-search--select::after { content: "\f078"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .7rem; color: var(--muted); pointer-events: none; } .input-search select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,78,140,.18); background-color: var(--surface); } .input-search input[type="date"] { color: var(--text); font: inherit; padding-right: 10px; } .input-search input[type="date"] { padding-left: 38px; } .input-search input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; } .input-search input:hover, .input-search select:hover { border-color: var(--blue-100); } .toolbar__reset { height: 46px; white-space: nowrap; } .toolbar__reset:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .result-count { font-size: .875rem; color: var(--muted); margin: -16px 0 20px; } .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 48px 0 0; padding: 0; } .pagination a, .pagination span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--navy); font-weight: 600; text-decoration: none; } .pagination a:hover { border-color: var(--blue); color: var(--blue); } .pagination [aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; } .pagination .is-disabled { opacity: .5; } /* 29 TIMELINE / GALLERY / VIDEO ------------------------------------------- */ /* Achievements — government listing: one panel, navy head with year tabs, clipping rows */ .ach-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .ach-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 20px; background: var(--navy); } .ach-panel__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 1.125rem; color: #fff; } .ach-panel__title i { color: var(--saffron); } .ach-panel__count { font-weight: 600; color: #D3DCEA; } .ach-tabs { display: inline-flex; gap: 4px; padding: 3px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; } .ach-tabs .chip { min-height: 32px; padding: 0 16px; border: 0; background: transparent; color: #D3DCEA; } .ach-tabs .chip:hover { background: rgba(255, 255, 255, .1); color: #fff; } .ach-tabs .chip[aria-pressed="true"] { background: var(--saffron); color: var(--navy-900); } .ach-panel__empty { margin: 0; padding: 28px 20px; text-align: center; } .ach-item { position: relative; display: grid; gap: 16px; padding: 20px; border-top: 1px solid var(--line); transition: background var(--dur); } .ach-item:first-child { border-top: 0; } .ach-item[hidden] { display: none; } .ach-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--saffron); transform: scaleY(0); transition: transform var(--dur) var(--ease); } .ach-item:hover { background: var(--bg); } .ach-item:hover::before { transform: scaleY(1); } @media (min-width: 640px) { .ach-item { grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 24px; padding: 24px 28px; } } @media (min-width: 1024px) { .ach-item { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; } } .ach-item__thumb { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: zoom-in; } .ach-item:hover .ach-item__thumb { background: var(--surface); border-color: var(--blue-100); } .ach-item__thumb img { width: 100%; height: 100%; object-fit: contain; } .ach-item__zoom { position: absolute; inset: auto 10px 10px auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-size: .75rem; font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity var(--dur), transform var(--dur); } .ach-item__thumb:hover .ach-item__zoom, .ach-item__thumb:focus-visible .ach-item__zoom { opacity: 1; transform: none; } @media (hover: none) { .ach-item__zoom { opacity: 1; transform: none; } } .ach-item__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .ach-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; } .ach-item__date, .ach-item__tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; } .ach-item__date { background: var(--blue-50); color: var(--navy); } .ach-item__date i { color: var(--blue); } .ach-item__tag { background: var(--saffron-50); color: var(--saffron-ink, #B35C00); letter-spacing: .02em; } .ach-item__title { margin: 0; font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); line-height: 1.45; } .ach-item__title a { color: var(--heading); text-decoration: none; } .ach-item__title a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } .ach-item__text { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ach-item__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } @media (max-width: 639.98px) { .ach-item__actions .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { .ach-item::before, .ach-item__zoom { transition: none; } } .timeline { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; } .timeline::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--saffron), var(--blue)); } .timeline__item { position: relative; padding-left: 56px; } .timeline__dot { position: absolute; left: 0; top: 18px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 2px solid var(--saffron); color: var(--saffron); z-index: 1; } .timeline__card { display: grid; } @media (min-width: 640px) { .timeline__card { grid-template-columns: 240px 1fr; } } .timeline__card .news-card__media { aspect-ratio: 4 / 3; height: 100%; } @media (min-width: 1024px) { .timeline::before { left: 50%; transform: translateX(-1px); } .timeline__item { width: 50%; padding: 0 44px 0 0; } .timeline__item:nth-child(even) { margin-left: 50%; padding: 0 0 0 44px; } .timeline__dot { left: auto; right: -20px; } .timeline__item:nth-child(even) .timeline__dot { right: auto; left: -20px; } .timeline__card { grid-template-columns: 1fr; } } .masonry { columns: 1; column-gap: 16px; } @media (min-width: 576px) { .masonry { columns: 2; } } @media (min-width: 1024px) { .masonry { columns: 3; } } .masonry__item { break-inside: avoid; margin-bottom: 16px; } .gallery-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--blue-50); box-shadow: var(--shadow-sm); } .gallery-btn img { width: 100%; transition: transform 600ms var(--ease); } .gallery-btn::after { content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.5rem; background: rgba(11,37,69,.45); opacity: 0; transition: opacity var(--dur); } .gallery-btn:hover img, .gallery-btn:focus-visible img { transform: scale(1.05); } .gallery-btn:hover::after, .gallery-btn:focus-visible::after { opacity: 1; } /* Photo gallery — government panel, uniform tiles; photos never upscaled (stay sharp) */ .gal-panel__hint { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .8125rem; color: #D3DCEA; } .gal-panel__hint i { color: var(--saffron); } .gal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; } @media (min-width: 640px) { .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px; } } @media (min-width: 1024px) { .gal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 24px; } } .gal-item .gallery-btn { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 10px; isolation: isolate; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: none; cursor: zoom-in; transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease); } .gal-item .gallery-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--img) center / cover no-repeat; filter: blur(18px) saturate(1.1); opacity: .35; transform: scale(1.2); } .gal-item .gallery-btn img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 6px 16px -8px rgba(11, 37, 69, .45); } .gal-item .gallery-btn:hover, .gal-item .gallery-btn:focus-visible { border-color: var(--saffron); box-shadow: var(--shadow); transform: translateY(-3px); } .gal-item .gallery-btn:hover img, .gal-item .gallery-btn:focus-visible img { transform: none; } .gal-item .gallery-btn::after { inset: auto 8px 8px auto; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); font-size: .875rem; } @media (hover: none) { .gal-item .gallery-btn::after { opacity: .9; } } @media (prefers-reduced-motion: reduce) { .gal-item .gallery-btn:hover { transform: none; } } /* Viewer: show every photo at full natural size up to the screen, never stretched */ .lightbox__figure img { max-width: min(92vw, 1200px); object-fit: contain; background: #fff; } .modal { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; } .modal::backdrop { background: rgba(7, 18, 36, .92); } .modal[open] { display: grid; place-items: center; animation: fade-in 250ms var(--ease); } .modal__close { position: fixed; top: 16px; right: 16px; z-index: 2; background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); } .modal__close:hover { background: #fff; color: var(--navy); } .lightbox__figure { margin: 0; padding: 64px 16px; display: grid; justify-items: center; gap: 12px; } .lightbox__figure img { max-height: 80vh; width: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); } .lightbox__count { font-size: .875rem; color: #C9D3E1; } .lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); width: 52px; height: 52px; } .lightbox__nav:hover { background: #fff; color: var(--navy); } .lightbox__prev { left: 12px; } .lightbox__next { right: 12px; } .video-modal__frame { width: min(1000px, 92vw); aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); } .video-modal__frame iframe { width: 100%; height: 100%; border: 0; } .video-card { position: relative; } .video-card__thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; overflow: hidden; background: linear-gradient(135deg, var(--navy), var(--blue)); } .video-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); } .video-card__thumb:hover img { transform: scale(1.05); } .video-card__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: rgba(198,40,40,.92); color: #fff; font-size: 1.3rem; box-shadow: 0 0 0 10px rgba(255,255,255,.18); transition: transform var(--dur) var(--ease); } .video-card__thumb:hover .video-card__play { transform: translate(-50%, -50%) scale(1.08); } .video-card__title { margin: 0; font-size: 1.0625rem; } /* 30 CONTACT / GLOSSARY / SCAM / 404 --------------------------------------- */ .info-card { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 20px; height: 100%; } .info-card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--navy); color: var(--saffron); font-size: 1.2rem; } .info-card h2, .info-card h3 { font-size: 1rem; margin: 0 0 4px; } .info-card p { margin: 0; color: var(--muted); } .info-card a { color: var(--text); text-decoration: none; font-weight: 600; } .info-card a:hover { color: var(--blue); } .wa-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: var(--radius); color: #fff; } .wa-card--group { background: linear-gradient(135deg, #128C4B, #0B6B39); } .wa-card--channel { background: linear-gradient(135deg, var(--blue), var(--navy)); } .wa-card__info { display: flex; align-items: center; gap: 12px; } .wa-card__info i { font-size: 1.6rem; } .wa-card strong { display: block; } .wa-card span { font-size: .8125rem; opacity: .9; } /* Contact — government panels: info + helplines + WhatsApp | form + map */ .ct-grid { display: grid; gap: 24px; } @media (min-width: 1024px) { .ct-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 28px; } } .ct-col { display: grid; gap: 24px; min-width: 0; } .ct-info, .ct-lines, .ct-wa { list-style: none; margin: 0; padding: 0; } .ct-info li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 20px; border-top: 1px solid var(--line); } .ct-info li:first-child { border-top: 0; } .ct-info__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--blue-50); color: var(--navy); font-size: 1.05rem; } .ct-info__label { margin: 0 0 2px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .ct-info__value { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--heading); overflow-wrap: anywhere; } .ct-info__value a { color: var(--heading); text-decoration: none; } .ct-info__value a:hover { color: var(--blue); text-decoration: underline; } .ct-info__link { margin-top: 6px; font-size: .875rem; } .ct-lines__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); } .ct-lines__item:first-child { border-top: 0; } .ct-lines__name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; color: var(--heading); } .ct-lines__name i { width: 18px; text-align: center; color: var(--blue); } .ct-lines__num { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 1.0625rem; font-weight: 800; color: var(--navy); text-decoration: none; transition: background var(--dur), color var(--dur), border-color var(--dur); } .ct-lines__num i { font-size: .8rem; color: var(--saffron); } .ct-lines__num:hover { background: var(--navy); border-color: var(--navy); color: #fff; } .ct-lines__item--alert { background: rgba(198, 40, 40, .05); } .ct-lines__item--alert .ct-lines__name i { color: var(--red); } .ct-lines__item--alert .ct-lines__num { background: var(--red); border-color: var(--red); color: #fff; } .ct-lines__item--alert .ct-lines__num i { color: #fff; } .ct-lines__item--alert .ct-lines__num:hover { background: var(--red-700); border-color: var(--red-700); } .ct-wa li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); } .ct-wa li:first-child { border-top: 0; } .ct-wa__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(18, 140, 75, .1); color: #128C4B; } .ct-wa__text { display: grid; min-width: 0; } .ct-wa__text strong { color: var(--heading); } .ct-wa__text span { font-size: .8125rem; color: var(--muted); } .ct-wa__btn { --btn-bg: #128C4B; --btn-bd: #128C4B; --btn-fg: #fff; white-space: nowrap; } .ct-wa__btn:hover { --btn-bg: #0E7340; --btn-bd: #0E7340; } .ct-form { padding: 20px; } @media (min-width: 640px) { .ct-form { padding: 28px; } } .ct-form__note { margin: 0 0 16px; font-size: .8125rem; color: var(--muted); } .ct-form .field textarea { min-height: 96px; height: 96px; } /* Desktop: both columns end on the same line — the map absorbs the difference */ @media (min-width: 1024px) { .ct-grid { align-items: stretch; } .ct-col { align-content: start; } .ct-col:last-child { display: flex; flex-direction: column; } .ct-col:last-child > .ach-panel:last-child { display: flex; flex: 1; flex-direction: column; } .ct-col:last-child .ct-map { flex: 1; height: auto; min-height: 220px; } } .ct-form__note .req { color: var(--red); } .ct-map__dir { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; font-size: .8125rem; font-weight: 600; color: #fff; text-decoration: none; } .ct-map__dir:hover { background: var(--saffron); border-color: var(--saffron); color: var(--navy-900); } .ct-map { height: 320px; background: var(--blue-50); } .ct-map iframe { display: block; width: 100%; height: 100%; border: 0; } @media (max-width: 399.98px) { .ct-lines__item { padding-inline: 14px; } .ct-wa li { grid-template-columns: 36px minmax(0, 1fr); } .ct-wa__btn { grid-column: 1 / -1; justify-content: center; } } .form-card { padding: 24px; } @media (min-width: 768px) { .form-card { padding: 32px; } } .form-grid { display: grid; gap: 18px; } @media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } } .field label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 600; color: var(--heading); } .field label .req { color: var(--red); } .field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 10px 14px; background: var(--surface); color: var(--text); border: 1px solid #CDD5E0; border-radius: var(--radius-sm); transition: border-color var(--dur), box-shadow var(--dur); } .field textarea { min-height: 140px; resize: vertical; } .field input:hover, .field textarea:hover { border-color: #AFBACA; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,78,140,.18); } .field [aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(198,40,40,.12); } .field__error { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: .8125rem; color: var(--red-700); } .field__error:empty { display: none; } .field__error::before { content: "\f06a"; font-family: "Font Awesome 6 Free"; font-weight: 900; } .form-status { padding: 12px 16px; border-radius: var(--radius-sm); font-weight: 600; } .form-status--ok { background: var(--green-50); color: #0E6606; } .form-status--err { background: #FDECEC; color: var(--red-700); } .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .map-frame { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow); height: 340px; background: var(--blue-50); } @media (min-width: 768px) { .map-frame { height: auto; aspect-ratio: 16 / 7; } } .map-frame iframe { width: 100%; height: 100%; border: 0; } .az-bar { position: sticky; top: calc(66px + 4px); z-index: 20; display: flex; gap: 4px; overflow-x: auto; padding: 10px; margin-bottom: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); scrollbar-width: thin; } .az-bar button { flex: 0 0 auto; min-width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm); background: transparent; font-weight: 700; color: var(--navy); } .az-bar button:hover { background: var(--blue-50); color: var(--blue); } .az-bar button[aria-pressed="true"] { background: var(--navy); color: #fff; } .az-bar button:disabled { color: #B7C0CC; background: transparent; cursor: not-allowed; } .term-card { padding: 22px; display: flex; flex-direction: column; gap: 10px; height: 100%; } .term-card__letter { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--saffron-50); color: #9A4F05; font-weight: 800; } .term-card h3 { margin: 0; font-size: 1.1875rem; } .term-card p { margin: 0; color: var(--muted); } .scam-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; height: 100%; } .scam-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .scam-card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--blue-50); color: var(--blue); font-size: 1.3rem; } .scam-card h3 { margin: 0; font-size: 1.1875rem; } .scam-card p { margin: 0; color: var(--muted); } .scam-card .link-arrow { margin-top: auto; } .risk { display: inline-flex; align-items: center; gap: 6px; padding: .25rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .risk::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .risk--low { background: var(--green-50); color: #0E6606; } .risk--medium { background: var(--saffron-50); color: #9A4F05; } .risk--high { background: #FDECEC; color: var(--red-700); } .empty-state { display: none; max-width: 560px; margin: 0 auto; padding: 48px 24px; text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-lg); } [data-hide-empty][hidden] + .empty-state { display: block; } .empty-state i { font-size: 2.5rem; color: var(--blue-100); margin-bottom: 12px; } .empty-state p { margin: 0; color: var(--muted); } [data-preview="true"] { outline: 2px dashed var(--saffron); outline-offset: -2px; } .error-page { text-align: center; padding-block: 72px; } .error-page__code { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(5rem, 3rem + 10vw, 9rem); font-weight: 800; line-height: 1; color: var(--navy); letter-spacing: -.04em; } .error-page__code i { color: var(--saffron); font-size: .7em; } .error-page .search-field { max-width: 620px; margin: 28px auto 0; } .error-page .search-field input { border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 1rem; height: 56px; } /* 31 UTILITIES, MOTION, THEMES --------------------------------------------- */ .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; } .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); } .js .reveal.is-visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: 80ms !important; } .reveal-delay-2 { transition-delay: 160ms !important; } .reveal-delay-3 { transition-delay: 240ms !important; } @keyframes marquee { to { transform: translateX(-50%); } } @keyframes scroll-up { to { transform: translateY(-50%); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(1.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js .reveal { opacity: 1; transform: none; } .ticker__track, .marquee__track, .notice-board__track { animation: none !important; } .ticker__viewport { overflow-x: auto; } .notice-board__viewport { overflow-y: auto; } } html.motion-paused .ticker__track, html.motion-paused .marquee__track, html.motion-paused .notice-board__track { animation-play-state: paused !important; } /* ========================================================================== 32 REDESIGN LAYER — vertical rhythm + rebuilt Helpline / Socials / Feeds / Testimonials. Later in the file, so these win over the base rules above. ========================================================================== */ /* --- 32.1 Vertical rhythm: more air, consistent section spacing ---------- */ :root { --section-y: 40px; } @media (min-width: 768px) { :root { --section-y: 52px; } } @media (min-width: 1024px) { :root { --section-y: 64px; } } .section-head { margin-bottom: 28px; } /* Wider canvas so content is not lost on 1680–1920 screens */ @media (min-width: 1400px) { .container { max-width: 1320px; } } .section-head--center { max-width: 720px; } .section-head .section-title { margin-bottom: 0; } .section-head p.lead { margin-top: 16px; } .eyebrow { margin-bottom: 10px; letter-spacing: .1em; } .grid-2, .grid-3, .grid-4 { gap: 24px; } @media (min-width: 1024px) { .grid-2, .grid-3, .grid-4 { gap: 28px; } } .split { gap: 32px; } @media (min-width: 1024px) { .split { gap: 56px; } } /* Soft hairline between same-coloured sections so blocks never merge */ .section + .section:not(.section--white):not(.section--tint):not(.section--navy) { border-top: 1px solid var(--line); } /* --- 32.2 Language switch (only control left in the top bar) ------------- */ .lang-switch { display: inline-flex; padding: 3px; gap: 2px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; } .lang-switch button { height: 28px; padding: 0 .85rem; border: 0; border-radius: 999px; background: transparent; color: #D3DCEA; font-size: .75rem; font-weight: 600; line-height: 1; transition: background var(--dur), color var(--dur); } .lang-switch button:hover { color: #fff; } .lang-switch button[aria-pressed="true"] { background: var(--saffron); color: #1A1A1A; } .lang-switch--block { display: flex; margin-top: 18px; background: var(--blue-50); border-color: var(--line); } .lang-switch--block button { flex: 1; height: 40px; color: var(--navy); font-size: .875rem; } html[data-lang="hi"] body { font-family: var(--font-hi); } html[data-lang="hi"] .nav__link, html[data-lang="hi"] .btn, html[data-lang="hi"] .chip { letter-spacing: 0; } /* --- 32.3 Helpline: one directory card, not ten floating boxes ----------- */ .helpline-wrap { display: grid; gap: 24px; } @media (min-width: 1024px) { .helpline-wrap { grid-template-columns: 5fr 7fr; gap: 32px; align-items: start; } } .helpline-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: var(--radius-lg); text-decoration: none; color: #fff; background: radial-gradient(130% 150% at 100% 0%, #E24B4B 0%, var(--red) 45%, var(--red-700) 100%); box-shadow: 0 20px 44px rgba(198, 40, 40, .28); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .helpline-hero:hover { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(198, 40, 40, .34); color: #fff; } .helpline-hero::after { content: "\f3ed"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: -24px; bottom: -40px; font-size: 11rem; line-height: 1; opacity: .09; } .helpline-hero__badge { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; padding: .3rem .8rem; border-radius: 999px; background: rgba(255,255,255,.18); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .helpline-hero__label { margin: 0; font-size: 1.0625rem; font-weight: 600; opacity: .95; } .helpline-hero__num { font-size: clamp(3.5rem, 2.4rem + 4.6vw, 5.25rem); font-weight: 800; line-height: 1; letter-spacing: .01em; } .helpline-hero__note { margin: 0; font-size: .875rem; opacity: .9; } .helpline-hero .btn { align-self: flex-start; position: relative; z-index: 1; } .helpline-list { padding: 8px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .helpline-list ul { list-style: none; margin: 0; padding: 0; } @media (min-width: 640px) { .helpline-list ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; } } .hl-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); } @media (min-width: 640px) { .hl-row:nth-last-child(-n+2) { border-bottom: 0; } } @media (max-width: 639.98px) { .hl-row:last-child { border-bottom: 0; } } .hl-row__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--blue-50); color: var(--blue); font-size: .95rem; } .hl-row__label { display: block; font-size: .8125rem; font-weight: 600; color: var(--muted); line-height: 1.35; } .hl-row__nums { display: flex; flex-wrap: wrap; gap: 2px 10px; } .hl-row__num { font-size: 1.125rem; font-weight: 800; color: var(--navy); text-decoration: none; letter-spacing: .01em; } .hl-row__num:hover { color: var(--blue); text-decoration: underline; } .hl-row__note { font-size: .6875rem; font-weight: 700; color: var(--green); } .hl-row__call { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blue-50); color: var(--blue); text-decoration: none; opacity: 0; transform: translateX(-4px); transition: opacity var(--dur), transform var(--dur), background var(--dur), color var(--dur); } .hl-row:hover .hl-row__call, .hl-row:focus-within .hl-row__call { opacity: 1; transform: none; } .hl-row__call:hover { background: var(--blue); color: #fff; } @media (hover: none) { .hl-row__call { opacity: 1; transform: none; } } .hl-row--alert .hl-row__icon { background: #FDECEC; color: var(--red); } .hl-row--alert .hl-row__num { color: var(--red); } /* --- 32.4 Our Socials: proper channel cards ----------------------------- */ .social-grid { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 768px) { .social-grid { grid-template-columns: repeat(3, 1fr); } } .social-tile { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .social-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .social-tile__head { display: flex; align-items: center; gap: 14px; padding: 20px; color: #fff; background: var(--tile-bg, var(--navy)); } .social-tile__head i { font-size: 1.75rem; } .social-tile__name { margin: 0; font-size: 1.0625rem; color: #fff; } .social-tile__handle { display: block; font-size: .8125rem; opacity: .85; } .social-tile__head .btn { margin-left: auto; } .social-tile--fb { --tile-bg: linear-gradient(135deg, #1877F2, #0B4FA8); } .social-tile--x { --tile-bg: linear-gradient(135deg, #2B3945, #0F1419); } .social-tile--yt { --tile-bg: linear-gradient(135deg, #FF3D3D, #B80000); } .social-tile__body { position: relative; flex: 1; min-height: 520px; display: grid; place-items: center; padding: 28px 20px; text-align: center; background: radial-gradient(120% 120% at 50% 0%, var(--blue-50) 0%, var(--surface) 70%); } .social-tile__body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .social-tile__art { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); font-size: 1.6rem; color: var(--muted); } .social-tile__hint { margin: 12px 0 0; font-size: .8125rem; color: var(--muted); } /* --- 32.5 Latest Feeds: readable notice board ---------------------------- */ .feeds-layout { display: grid; gap: 24px; align-items: stretch; } @media (min-width: 1024px) { .feeds-layout { grid-template-columns: 7fr 5fr; gap: 48px; } } .notice-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .notice-card__head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; background: var(--navy); color: #fff; } .notice-card__head h3 { margin: 0; font-size: 1.0625rem; color: #fff; } .notice-card__head i { color: var(--saffron); } .notice-card__head .badge { margin-left: auto; background: rgba(255,255,255,.14); color: #fff; } .notice-items { list-style: none; margin: 0; padding: 4px 22px 10px; } .notice-items li { border-bottom: 1px solid var(--line); } .notice-items li:last-child { border-bottom: 0; } .notice-items a, .notice-items span.item { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; padding: 15px 0; color: var(--text); text-decoration: none; font-weight: 500; line-height: 1.6; } .notice-items i.ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--saffron-50); color: var(--saffron); font-size: .85rem; } .notice-items a:hover { color: var(--blue); } .notice-items a .go { color: var(--muted); font-size: .75rem; transition: transform var(--dur); } .notice-items a:hover .go { transform: translateX(3px); color: var(--blue); } .feeds-aside { display: grid; gap: 20px; align-content: center; justify-items: center; padding: 24px; background: linear-gradient(160deg, var(--blue-50), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius-lg); text-align: center; } .feeds-aside img { width: min(100%, 320px); } /* --- 32.6 People Says: testimonial cards in a scroll rail ---------------- */ /* Flex (not grid) so each card keeps its width and the rail scrolls instead of squeezing */ .testi-rail { display: flex; align-items: flex-start; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 2px 10px; scrollbar-width: none; } .testi-rail::-webkit-scrollbar { display: none; } .testi-rail > * { flex: 0 0 86%; scroll-snap-align: start; } @media (min-width: 768px) { .testi-rail > * { flex-basis: calc((100% - 24px) / 2); } } @media (min-width: 1100px) { .testi-rail > * { flex-basis: calc((100% - 48px) / 3); } } /* Review cards (Google-review style: reviewer on top, stars, text with Read more) */ .testi-card { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px 22px 18px; border: 1px solid #DADCE0; border-radius: 10px; background: var(--surface); box-shadow: 0 1px 2px rgba(60, 64, 67, .08); transition: box-shadow var(--dur), border-color var(--dur); } .testi-card:hover { border-color: #C6CACF; box-shadow: 0 1px 3px rgba(60, 64, 67, .15), 0 4px 12px rgba(60, 64, 67, .12); } .testi-card__person { display: flex; align-items: center; gap: 12px; min-width: 0; } .testi-card__person img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #E8EAED; } .testi-card__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue); font-weight: 700; font-size: 1.1rem; } .testi-card__person > span { min-width: 0; } .testi-card__name { display: block; overflow: hidden; font-size: .9375rem; font-weight: 700; line-height: 1.35; color: #202124; white-space: nowrap; text-overflow: ellipsis; } .testi-card__role { display: block; font-size: .8125rem; line-height: 1.4; color: #70757A; } .testi-card__stars { display: flex; gap: 2px; color: #FBBC04; font-size: .875rem; } .testi-card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: 0; font-size: .9375rem; line-height: 1.65; color: #3C4043; } .testi-card.is-open .testi-card__text { display: block; -webkit-line-clamp: none; } .testi-card__more { align-self: flex-start; margin-top: -4px; padding: 0; border: 0; background: none; font: inherit; font-size: .875rem; font-weight: 600; color: #1A73E8; cursor: pointer; } .testi-card__more:hover { text-decoration: underline; } .testi-card__more:focus-visible { outline: 2px solid #1A73E8; outline-offset: 2px; border-radius: 3px; } /* People Says — review carousel: cards, arrows + dots below */ .rv-main { min-width: 0; } .rv-nav__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #DADCE0; border-radius: 50%; background: var(--surface); color: #202124; cursor: pointer; transition: background-color var(--dur), opacity var(--dur); } .rv-nav__btn:hover:not(:disabled) { background: #F1F3F4; } .rv-nav__btn:disabled { opacity: .4; cursor: default; } .rv-nav__btn:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; } .rv.is-static .rv-foot { display: none; } .rv-foot { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; } .rv-viewport { display: flex; align-items: stretch; gap: 20px; overflow-x: auto; padding: 2px 2px 6px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; } .rv-viewport::-webkit-scrollbar { display: none; } .rv-viewport > .testi-card { flex: 0 0 88%; scroll-snap-align: start; } @media (min-width: 640px) { .rv-viewport > .testi-card { flex-basis: calc((100% - 20px) / 2); } } @media (min-width: 1200px) { .rv-viewport > .testi-card { flex-basis: calc((100% - 40px) / 3); } } .rv-dots { display: flex; justify-content: center; gap: 12px; } .rv-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #DADCE0; cursor: pointer; } .rv-dots button[aria-current="true"] { background: #202124; box-shadow: 0 0 0 3px var(--bg, #F4F7FB), 0 0 0 4px #202124; } .rv-dots button:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; } .testi-card { position: relative; } @media (prefers-reduced-motion: reduce) { .rv-viewport { scroll-behavior: auto; } } /* --- 32.7 Misc polish ---------------------------------------------------- */ .hero { border-bottom: 4px solid var(--navy); } .card--hover:hover { border-color: var(--blue-100); } .logo-tile { height: 118px; padding: 14px 20px; } .rail__nav { margin-top: 12px; } .media-frame__badge { bottom: 22px; } .helpline-note { margin: 18px 0 0; font-size: .8125rem; color: var(--muted); text-align: center; } /* ========================================================================== 33 HELPLINE BOARD / SOCIAL TILES / WIDE NOTICE BOARD (v3) ========================================================================== */ /* --- 33.1 Helpline: gov-portal directory — navy 1930 panel + card grid ---- */ .hl-board { display: grid; gap: 20px; } @media (min-width: 1024px) { .hl-board { grid-template-columns: 320px 1fr; gap: 24px; align-items: stretch; } } /* Primary panel: flat navy, number is the hero */ .hl-board__hero { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px 16px; padding: 30px 24px 24px; color: #fff; text-decoration: none; background: var(--navy); border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow var(--dur), transform var(--dur) var(--ease); } .hl-board__hero::after { content: "\f3ed"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: -18px; bottom: -30px; font-size: 8rem; line-height: 1; opacity: .06; pointer-events: none; } .hl-board__hero:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(11, 37, 69, .26); } .hl-board__hero:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; } .hl-board__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: var(--saffron); font-size: 1.3rem; } .hl-board__copy { display: flex; flex-direction: column; gap: 4px; } .hl-board__eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--saffron); } .hl-board__label { font-size: 1rem; font-weight: 600; line-height: 1.35; color: rgba(255,255,255,.95); } .hl-board__num { position: relative; z-index: 1; grid-column: 1 / -1; margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: clamp(3rem, 2.2rem + 2.6vw, 4.25rem); font-weight: 800; line-height: 1; letter-spacing: .03em; font-variant-numeric: tabular-nums; } .hl-board__hero .btn { position: relative; z-index: 1; grid-column: 1 / -1; justify-content: center; width: 100%; --btn-bg: var(--saffron); --btn-bd: var(--saffron); --btn-fg: var(--navy); font-weight: 700; } .hl-board__hero:hover .btn { --btn-bg: #fff; --btn-bd: #fff; } @media (min-width: 640px) and (max-width: 1023.98px) { .hl-board__hero { grid-template-columns: auto 1fr auto; padding: 28px 24px 22px; } .hl-board__num { grid-column: auto; margin: 0; padding: 0; border: 0; } .hl-board__hero .btn { grid-column: 1 / -1; width: auto; justify-self: start; } } /* Directory cards */ .hl-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } @media (min-width: 768px) { .hl-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } } .hl-item { position: relative; display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; align-content: center; min-height: 92px; padding: 14px 16px 14px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 10px; transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease); } .hl-item:hover { border-color: var(--blue-100); border-left-color: var(--saffron); box-shadow: var(--shadow); transform: translateY(-2px); } .hl-item__icon { grid-column: 1; grid-row: 1 / span 3; align-self: center; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--blue-50); color: var(--blue); font-size: .95rem; } .hl-item__label { grid-column: 2; font-size: .8125rem; font-weight: 600; color: var(--muted); line-height: 1.35; } .hl-item__nums { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0 14px; align-items: baseline; margin-top: 2px; } .hl-item__nums a { font-size: 1.3125rem; font-weight: 800; color: var(--navy); text-decoration: none; letter-spacing: .02em; line-height: 1.25; font-variant-numeric: tabular-nums; } .hl-item__nums a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } .hl-item__nums a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; } .hl-item__chip { grid-column: 2; justify-self: start; margin-top: 5px; padding: 1px 8px; border-radius: 999px; background: var(--green-50); font-size: .6875rem; font-weight: 700; color: var(--green); } .hl-item--alert { border-left-color: var(--red); } .hl-item--alert .hl-item__icon { background: #FDECEC; color: var(--red); } .hl-item--alert .hl-item__nums a { color: var(--red); } @media (max-width: 767.98px) { .hl-grid { gap: 8px; } .hl-item { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-content: center; min-height: 0; padding: 10px 10px 10px 12px; border-left-width: 3px; } .hl-item:hover { transform: none; } .hl-item__icon { grid-row: 1 / span 3; width: 30px; height: 30px; font-size: .75rem; } .hl-item__label { font-size: .75rem; line-height: 1.3; } .hl-item__nums { gap: 0 8px; margin-top: 1px; } .hl-item__nums a { font-size: 1.0625rem; } .hl-item__chip { margin-top: 3px; font-size: .625rem; } .hl-item--alert { grid-column: 1 / -1; } } @media (max-width: 639.98px) { .hl-board { gap: 12px; } .hl-board__hero { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px 14px; padding: 18px; } .hl-board__hero::after { font-size: 6rem; bottom: -24px; } .hl-board__icon { width: 44px; height: 44px; font-size: 1.05rem; } .hl-board__copy { grid-column: 2 / -1; } .hl-board__label { font-size: .9375rem; } .hl-board__num { grid-column: 1 / 3; margin: 0; padding: 4px 0 0; border-top: 0; font-size: 2.75rem; } .hl-board__hero .btn { grid-column: 3; align-self: end; width: auto; min-height: 44px; padding-inline: 18px; } } /* --- 33.1b Latest Updates / Official links / Press clippings (gov-portal) - */ /* Latest Updates — campaign posters: tall image cards, outlined number, title + summary over the photo. Desktop 4-up, tablet 2-up, phones a swipe carousel. */ .updates-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); counter-reset: upd; } @media (min-width: 1100px) { .updates-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } } @media (max-width: 575.98px) { .updates-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter); scrollbar-width: none; } .updates-grid::-webkit-scrollbar { display: none; } .updates-grid > .update-card { scroll-snap-align: start; } } .update-card { counter-increment: upd; position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; min-height: 360px; overflow: hidden; border: 0; border-radius: 18px; background: var(--navy); box-shadow: 0 14px 30px -18px rgba(11, 37, 69, .55); isolation: isolate; transition: transform var(--dur) var(--ease), box-shadow var(--dur); } .update-card:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -20px rgba(11, 37, 69, .6); } @media (max-width: 575.98px) { .update-card { aspect-ratio: 4 / 5; min-height: 0; } } .update-card__media { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; min-height: 0; background: var(--navy); } .update-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 900ms var(--ease); } .update-card:hover .update-card__media img { transform: scale(1.07); } .update-card__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(7, 26, 51, .96) 0%, rgba(7, 26, 51, .78) 38%, rgba(7, 26, 51, .1) 72%, rgba(7, 26, 51, .35) 100%); transition: opacity var(--dur); } /* big outlined number */ .update-card::before { content: counter(upd, decimal-leading-zero); position: absolute; top: 14px; left: 18px; z-index: 1; font-size: 3.25rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85); } /* saffron corner accent */ .update-card::after { content: ""; position: absolute; top: 0; right: 0; z-index: 1; width: 64px; height: 64px; background: linear-gradient(225deg, var(--saffron) 0 50%, transparent 50%); opacity: .95; } .update-card__body { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; } .update-card__title { position: relative; margin: 0; padding-bottom: 12px; font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: #fff; } .update-card__title::before { content: "Campaign"; display: table; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(242, 140, 40, .18); border: 1px solid rgba(247, 178, 103, .55); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #F7B267; } .update-card__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 2px; background: var(--saffron); transition: width var(--dur) var(--ease); } .update-card:hover .update-card__title::after { width: 72px; } .update-card__text { margin: 0; font-size: .875rem; line-height: 1.65; color: rgba(255, 255, 255, .85); -webkit-line-clamp: 3; } @media (prefers-reduced-motion: reduce) { .update-card:hover { transform: none; } .update-card:hover .update-card__media img { transform: none; } } .rail.is-static .rail__nav { display: none; } .rail.is-static .rail__viewport { padding-bottom: 6px; } .logo-tile { position: relative; height: 132px; padding: 18px 24px; border-radius: 10px; } .logo-tile img { max-height: 88px; filter: none; } .logo-tile:hover { border-color: var(--blue-100); } .logo-tile__ext { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-50); color: var(--blue); font-size: .625rem; opacity: 0; transform: scale(.8); transition: opacity var(--dur), transform var(--dur) var(--ease); } a.logo-tile:hover .logo-tile__ext, a.logo-tile:focus-visible .logo-tile__ext { opacity: 1; transform: none; } a.logo-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } @media (hover: none) { .logo-tile__ext { opacity: 1; transform: none; } } @media (max-width: 767.98px) { .rail--logos .rail__viewport { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; } .rail--logos .logo-tile { height: 104px; padding: 14px; } .rail--logos .logo-tile img { max-height: 72px; } } @media (min-width: 768px) { .rail--logos .rail__viewport { grid-auto-columns: calc((100% - 60px) / 4); } } .rail--press .rail__viewport { grid-auto-columns: calc((100% - 20px) / 2); } @media (min-width: 768px) { .rail--press .rail__viewport { grid-auto-columns: calc((100% - 40px) / 3); } } @media (min-width: 1200px) { .rail--press .rail__viewport { grid-auto-columns: calc((100% - 80px) / 5); } } /* Press clippings — document cards: paper on a grey mount, caption strip, opens in the lightbox */ .clip { display: flex; flex-direction: column; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); } .clip:hover { transform: translateY(-4px); border-color: #C9D5E4; box-shadow: var(--shadow); } .clip__link { position: relative; display: block; padding: 14px; background: #EEF2F7; } .clip__paper { display: block; overflow: hidden; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(11, 37, 69, .12), 0 6px 14px -6px rgba(11, 37, 69, .25); } .clip__paper img { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; object-position: top; transition: transform 600ms var(--ease); } .clip:hover .clip__paper img { transform: scale(1.04); } .clip__zoom { position: absolute; left: 50%; bottom: 26px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--navy); font-size: .8125rem; font-weight: 700; color: #fff; white-space: nowrap; opacity: 0; transform: translate(-50%, 8px); transition: opacity var(--dur), transform var(--dur); box-shadow: 0 6px 16px rgba(11, 37, 69, .3); } .clip:hover .clip__zoom, .clip__link:focus-visible .clip__zoom { opacity: 1; transform: translate(-50%, 0); } .clip__link:focus-visible { outline: 3px solid var(--saffron); outline-offset: -3px; } .clip__cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); } .clip__tag { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; color: var(--muted); } .clip__tag i { color: var(--saffron); } .clip__num { font-size: .875rem; font-weight: 800; letter-spacing: .04em; color: var(--navy); } @media (hover: none) { .clip__zoom { opacity: 1; transform: translate(-50%, 0); padding: 6px 12px; font-size: .75rem; } } @media (max-width: 575.98px) { .clip__link { padding: 10px; } .clip__zoom { bottom: 18px; } .clip__cap { padding: 10px 12px; } .clip__tag { font-size: .75rem; } } @media (prefers-reduced-motion: reduce) { .clip:hover, .clip:hover .clip__paper img { transform: none; } } /* --- 33.2 Social tiles: fixed height so embeds can never break the grid --- */ .social-tile .social-tile__body { position: relative; flex: 0 0 auto; height: 420px; min-height: 0; overflow: hidden; display: grid; place-items: center; padding: 24px; text-align: center; } .social-tile .social-tile__body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .social-tile__ph { display: grid; gap: 14px; justify-items: center; } .social-tile__body--panel { background: linear-gradient(160deg, var(--blue-50), var(--surface)); } .social-tile__body--video { background: #0B1220; } /* Fallback link sits on the dark video tile — keep it readable if the embed is blocked */ .social-tile__body--video .social-tile__art { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; } .social-tile__body--video .btn--outline { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.55); } .social-tile__body--video .btn--outline:hover { --btn-bg: #fff; --btn-bd: #fff; color: var(--navy); } .social-panel { display: grid; gap: 12px; justify-items: center; max-width: 280px; } .social-panel__icon { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: var(--navy); color: #fff; font-size: 1.9rem; } .social-panel__handle { margin: 0; font-size: 1.125rem; font-weight: 800; color: var(--heading); } .social-panel__note { margin: 0; font-size: .875rem; color: var(--muted); } /* --- 33.3 Latest Feeds: full-width board, two columns on desktop --------- */ .notice-card--wide { position: relative; } .notice-card__watermark { position: absolute; right: -20px; bottom: -20px; width: 240px; height: auto; opacity: .06; pointer-events: none; } .notice-card__head .badge { margin-left: auto; background: rgba(255,255,255,.14); color: #fff; } .notice-items--2col { position: relative; z-index: 1; padding: 6px 24px 14px; } @media (min-width: 900px) { .notice-items--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } .notice-items--2col li:nth-last-child(-n+2) { border-bottom: 0; } } @media print { .topbar, .site-header, .float-social, .mobile-bar, .back-to-top, .reading-progress, .share, .article-share, .helpful, .toc, .toc-mobile, .cta-strip, .site-footer, .partners, .ticker, .latest-feeds, .aside, .page-hero::before, .page-hero::after { display: none !important; } .page-hero { background: none !important; color: #000; padding: 0 0 12px; } .page-hero h1, .article-hero .meta-bar__info { color: #000 !important; } .article-grid { display: block; } .article-sheet { border: 0; box-shadow: none; padding: 0; } body { background: #fff; } .prose a::after { content: " (" attr(href) ")"; font-size: .8em; } } /* ========================================================================== 34 BP SECTIONS — Important Website Links (navy) + Press Release (featured + recent) ========================================================================== */ /* ========================================================================== BP SECTIONS — Important Website Links + Press Release Move this block into style.css. Every class is prefixed "bp-"; tokens are scoped to the sections so nothing leaks into the rest of the site. ========================================================================== */ .bp-links, .bp-press, .bp-lightbox { --bp-navy: #0B2545; --bp-navy-2: #13335C; --bp-blue: #1F4E8C; --bp-blue-50: #EEF3FA; --bp-saffron: #F28C28; --bp-saffron-ink: #A85300; /* saffron darkened for AA text on light backgrounds */ --bp-green: #138808; --bp-red: #C62828; --bp-bg: #F5F7FA; --bp-border: #DDE3EC; --bp-text: #1A1A1A; --bp-muted: #5A6270; --bp-ease: cubic-bezier(.2, .7, .2, 1); --bp-dur: 280ms; font-family: "Noto Sans", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color: var(--bp-text); -webkit-font-smoothing: antialiased; } .bp-links *, .bp-links *::before, .bp-links *::after, .bp-press *, .bp-press *::before, .bp-press *::after, .bp-lightbox * { box-sizing: border-box; } .bp-links [lang="hi"], .bp-press [lang="hi"], .bp-lightbox [lang="hi"] { font-family: "Noto Sans Devanagari", "Noto Sans", system-ui, sans-serif; } /* --- Shared ------------------------------------------------------------ */ .bp-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter, 16px); } @media (min-width: 1400px) { .bp-container { max-width: 1320px; } } .bp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; } @media (min-width: 1024px) { .bp-head { margin-bottom: 40px; } } .bp-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bp-saffron); } .bp-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; } .bp-h2 { position: relative; margin: 0; padding-bottom: 18px; font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.375rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; } .bp-h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 4px; border-radius: 2px; background: var(--bp-saffron); } /* ========================================================================== SECTION 1 — IMPORTANT WEBSITE LINKS ========================================================================== */ .bp-links { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 64px; background: radial-gradient(circle at 100% 0%, rgba(242, 140, 40, .24), transparent 36%), linear-gradient(135deg, var(--bp-navy) 0%, var(--bp-navy-2) 100%); } @media (min-width: 768px) { .bp-links { padding: 72px 0 80px; } } @media (min-width: 1024px) { .bp-links { padding: 88px 0 96px; } } /* "Security print" rings, bottom-right */ .bp-links::before { content: ""; position: absolute; z-index: -1; right: -240px; bottom: -300px; width: 760px; height: 760px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255, 255, 255, .07) 0 1px, transparent 1px 14px); -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%); mask-image: radial-gradient(circle, #000 25%, transparent 68%); pointer-events: none; } .bp-links .bp-h2 { color: #fff; } .bp-newtab { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .07); color: #E4EAF3; font-size: .8125rem; font-weight: 600; line-height: 1.3; } .bp-newtab i { color: var(--bp-saffron); } /* Cards grid: 4 equal columns on desktop, 2 below */ .bp-portals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (min-width: 1024px) { .bp-portals { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } } .bp-portals > li { display: flex; min-width: 0; } .bp-portal { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 14px; background: #fff; color: var(--bp-text); text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 18px 40px -14px rgba(0, 0, 0, .55); transition: transform var(--bp-dur) var(--bp-ease), box-shadow var(--bp-dur); } .bp-portal::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--bp-blue); transition: background-color var(--bp-dur); } .bp-portal__body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 38px 20px 22px; text-align: center; } /* Circular seal: white disc + 6px light gap + 1px ring, logo normalised to 96px */ .bp-seal { display: grid; place-items: center; flex: none; width: 132px; height: 132px; margin: 7px 0 26px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px #EEF1F6, 0 0 0 7px var(--bp-border), 0 10px 22px rgba(11, 37, 69, .14); } .bp-seal img { display: block; width: 96px; height: 96px; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.03); } .bp-portal__name { display: flex; align-items: center; justify-content: center; min-height: 2.8em; margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; color: var(--bp-navy); } .bp-portal__domain { margin-top: 4px; font-size: .8125rem; line-height: 1.4; color: var(--bp-muted); overflow-wrap: anywhere; } .bp-portal__foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--bp-border); background: var(--bp-bg); color: var(--bp-blue); font-size: .875rem; font-weight: 700; transition: background-color var(--bp-dur), color var(--bp-dur), border-color var(--bp-dur); } .bp-portal__foot i { font-size: .75rem; transition: transform var(--bp-dur) var(--bp-ease); } .bp-portal:hover, .bp-portal:focus-visible { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 32px 60px -16px rgba(0, 0, 0, .7); } .bp-portal:hover::before, .bp-portal:focus-visible::before { background: var(--bp-saffron); } .bp-portal:hover .bp-portal__foot, .bp-portal:focus-visible .bp-portal__foot { background: var(--bp-navy); border-color: var(--bp-navy); color: #fff; } .bp-portal:hover .bp-portal__foot i, .bp-portal:focus-visible .bp-portal__foot i { transform: translate(3px, -3px); } .bp-portal:focus-visible { outline: 3px solid var(--bp-saffron); outline-offset: 4px; } @media (max-width: 767.98px) { .bp-portal__body { padding: 30px 12px 18px; } .bp-seal { width: 92px; height: 92px; margin: 5px 0 20px; box-shadow: 0 0 0 4px #EEF1F6, 0 0 0 5px var(--bp-border), 0 8px 16px rgba(11, 37, 69, .14); } .bp-seal img { width: 66px; height: 66px; } .bp-portal__name { font-size: .9375rem; } .bp-portal__domain { display: none; } .bp-portal__foot { padding: 12px 10px; font-size: .8125rem; } } /* ========================================================================== SECTION 2 — PRESS RELEASE ========================================================================== */ .bp-press { --bp-tri-mid: #C9D3E0; padding: 56px 0 64px; background: var(--bp-bg); } @media (min-width: 768px) { .bp-press { padding: 72px 0 80px; } } @media (min-width: 1024px) { .bp-press { padding: 88px 0 96px; } } .bp-press .bp-kicker { color: var(--bp-saffron-ink); } .bp-press .bp-h2 { color: var(--bp-navy); } .bp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 20px; border: 2px solid var(--bp-navy); border-radius: 10px; background: var(--bp-navy); color: #fff; font: inherit; font-size: .9375rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color var(--bp-dur), color var(--bp-dur), border-color var(--bp-dur); } .bp-btn i { font-size: .8125rem; transition: transform var(--bp-dur) var(--bp-ease); } .bp-btn:hover { background: var(--bp-blue); border-color: var(--bp-blue); color: #fff; } .bp-btn:hover .fa-arrow-right { transform: translateX(4px); } .bp-btn:focus-visible { outline: 3px solid var(--bp-blue); outline-offset: 3px; } .bp-btn--outline { background: transparent; color: var(--bp-navy); } .bp-btn--outline:hover { background: var(--bp-navy); border-color: var(--bp-navy); color: #fff; } .bp-press__grid { display: grid; gap: 20px; } @media (min-width: 1024px) { .bp-press__grid { grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } } /* --- Featured release --------------------------------------------------- */ .bp-feature { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--bp-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 37, 69, .05), 0 14px 34px -14px rgba(11, 37, 69, .22); } .bp-feature__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #DCE3EC; } .bp-feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--bp-ease); } .bp-feature:hover .bp-feature__media img { transform: scale(1.05); } .bp-feature__media::after { content: ""; position: absolute; inset: auto 0 0; height: 58%; background: linear-gradient(to top, rgba(6, 18, 38, .9), transparent); pointer-events: none; } .bp-badge { position: absolute; z-index: 1; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--bp-red); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1; box-shadow: 0 6px 16px rgba(198, 40, 40, .35); } .bp-feature__meta { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; color: #fff; font-size: .875rem; font-weight: 600; } .bp-feature__meta i { margin-right: 7px; color: var(--bp-saffron); } .bp-feature__body { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 20px 20px 22px; } @media (min-width: 768px) { .bp-feature__body { padding: 22px 24px 24px; } } .bp-feature__title { margin: 0; font-size: clamp(1.125rem, 1rem + .55vw, 1.4375rem); font-weight: 700; line-height: 1.55; color: var(--bp-navy); } .bp-feature__title a { color: inherit; text-decoration: none; } .bp-feature__title a:hover { color: var(--bp-blue); text-decoration: underline; text-underline-offset: 4px; } .bp-feature__title a:focus-visible { outline: 3px solid var(--bp-blue); outline-offset: 3px; border-radius: 4px; } .bp-feature__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: auto; } .bp-feature__actions .bp-btn { justify-content: center; white-space: nowrap; } /* --- Recent releases panel --------------------------------------------- */ .bp-recent { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--bp-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 37, 69, .05), 0 14px 34px -14px rgba(11, 37, 69, .22); } .bp-recent__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--bp-navy); color: #fff; } .bp-recent__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: #fff; } .bp-recent__title i { color: var(--bp-saffron); } .bp-recent__note { font-size: .8125rem; color: #B9C6D8; white-space: nowrap; } .bp-recent__list { flex: 1; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .bp-recent__item { position: relative; flex: 1; display: grid; grid-template-columns: 72px minmax(0, 1fr) 112px; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--bp-border); transition: background-color var(--bp-dur); } .bp-recent__item:last-child { border-bottom: 0; } .bp-recent__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bp-saffron); transform: scaleY(0); transition: transform var(--bp-dur) var(--bp-ease); } .bp-recent__item:hover, .bp-recent__item:focus-within { background: var(--bp-blue-50); } .bp-recent__item:hover::before, .bp-recent__item:focus-within::before { transform: scaleY(1); } .bp-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; padding: 10px 4px; border: 1px solid var(--bp-border); border-radius: 10px; background: var(--bp-bg); color: var(--bp-navy); line-height: 1; transition: background-color var(--bp-dur); } .bp-recent__item:hover .bp-date, .bp-recent__item:focus-within .bp-date { background: #fff; } .bp-date__day { font-size: 1.625rem; font-weight: 800; } .bp-date__my { margin-top: 6px; font-size: .6875rem; font-weight: 700; color: var(--bp-muted); white-space: nowrap; } .bp-recent__main { min-width: 0; } .bp-recent__link { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .9375rem; font-weight: 700; line-height: 1.55; color: var(--bp-navy); text-decoration: none; } .bp-recent__link::after { content: ""; position: absolute; inset: 0; } /* whole row is clickable */ .bp-recent__link:hover { color: var(--bp-blue); } .bp-recent__link:focus-visible { outline: none; } .bp-recent__item:has(.bp-recent__link:focus-visible) { outline: 3px solid var(--bp-blue); outline-offset: -3px; } .bp-recent__by { display: block; margin-top: 6px; font-size: .8125rem; font-weight: 600; color: var(--bp-blue); } .bp-recent__thumb { display: block; width: 112px; height: 84px; border-radius: 8px; object-fit: cover; background: #DCE3EC; } .bp-recent__foot { padding: 14px 20px; border-top: 1px solid var(--bp-border); background: var(--bp-bg); } .bp-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 700; color: var(--bp-blue); text-decoration: none; } .bp-link-arrow i { font-size: .8125rem; transition: transform var(--bp-dur) var(--bp-ease); } .bp-link-arrow:hover { color: var(--bp-navy); } .bp-link-arrow:hover i { transform: translateX(4px); } .bp-link-arrow:focus-visible { outline: 3px solid var(--bp-blue); outline-offset: 3px; border-radius: 4px; } @media (max-width: 767.98px) { .bp-recent__item { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px 16px; } .bp-date { width: 64px; } .bp-date__day { font-size: 1.375rem; } .bp-recent__thumb { display: none; } .bp-recent__note { display: none; } } /* --- Lightbox ------------------------------------------------------------ */ .bp-lightbox { width: min(1040px, calc(100% - 32px)); max-width: none; max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--bp-navy); color: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); } .bp-lightbox::backdrop { background: rgba(7, 20, 40, .88); } .bp-lightbox__bar { display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, .14); } .bp-lightbox__title { flex: 1; margin: 0; overflow: hidden; color: #fff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 1rem; font-weight: 700; line-height: 1.5; } .bp-lightbox__close { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 1rem; cursor: pointer; transition: background-color var(--bp-dur), color var(--bp-dur); } .bp-lightbox__close:hover { background: #fff; color: var(--bp-navy); } .bp-lightbox__close:focus-visible { outline: 3px solid var(--bp-saffron); outline-offset: 2px; } .bp-lightbox__body { display: grid; place-items: center; padding: 16px; background: #071428; } .bp-lightbox__body img { display: block; width: auto; height: auto; max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 6px; } body.bp-modal-open { overflow: hidden; } /* --- Reduced motion ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .bp-links *, .bp-press *, .bp-lightbox * { transition: none !important; animation: none !important; } .bp-portal:hover, .bp-portal:focus-visible { transform: none; } .bp-feature:hover .bp-feature__media img { transform: none; } } /* ========================================================================== 35 OUR SOCIALS — three live feeds (Facebook page · X timeline · YouTube uploads) Newest posts load automatically; scrolling inside a card reveals older ones. ========================================================================== */ .bp-soc { --bp-navy: #0B2545; --bp-navy-2: #13335C; --bp-blue: #1F4E8C; --bp-saffron: #F28C28; --bp-saffron-ink: #A85300; --bp-green: #138808; --bp-bg: #F5F7FA; --bp-border: #DDE3EC; --bp-text: #1A1A1A; --bp-muted: #5A6270; --bp-ease: cubic-bezier(.2, .7, .2, 1); --bp-dur: 250ms; --bp-tri-mid: #C9D3E0; --bp-feed-h: 460px; --bp-facebook: #1877F2; --bp-x: #000000; --bp-youtube: #FF0000; --bp-instagram: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%); --bp-whatsapp: #25D366; position: relative; padding: 56px 0 64px; background-color: #FFFFFF; background-image: radial-gradient(rgba(11, 37, 69, .08) 1px, transparent 1.3px); background-size: 22px 22px; font-family: "Noto Sans", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color: var(--bp-text); scroll-margin-top: calc(var(--header-h, 84px) + 12px); } @media (min-width: 768px) { .bp-soc { padding: 72px 0 80px; --bp-feed-h: 500px; } } @media (min-width: 1024px) { .bp-soc { padding: 88px 0 96px; --bp-feed-h: 520px; } } .bp-soc *, .bp-soc *::before, .bp-soc *::after { box-sizing: border-box; } .bp-soc [hidden] { display: none !important; } .bp-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .bp-soc .bp-kicker { color: var(--bp-saffron-ink); } .bp-soc .bp-h2 { color: var(--bp-navy); scroll-margin-top: calc(var(--header-h, 84px) + 12px); } /* --- Header: quick follow icons ---------------------------------------- */ .bp-soc__follow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .bp-soc__follow-label { margin-right: 4px; font-size: .8125rem; font-weight: 600; color: var(--bp-muted); } .bp-soc__icon-link { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; font-size: 1.05rem; text-decoration: none; box-shadow: 0 4px 12px rgba(11, 37, 69, .15); transition: transform var(--bp-dur) var(--bp-ease), box-shadow var(--bp-dur); } .bp-soc__icon-link:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(11, 37, 69, .22); } .bp-soc__icon-link:focus-visible { outline: 3px solid var(--bp-navy); outline-offset: 3px; } .bp-soc .bp-brand--facebook { background: var(--bp-facebook); } .bp-soc .bp-brand--x { background: var(--bp-x); } .bp-soc .bp-brand--instagram { background: var(--bp-instagram); } .bp-soc .bp-brand--youtube { background: var(--bp-youtube); } .bp-soc .bp-brand--whatsapp { background: var(--bp-whatsapp); } /* --- Cards row: 3 columns on desktop, swipeable below ------------------- */ .bp-soc__grid { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 400px); gap: 16px; margin: -8px; padding: 8px 8px 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; scrollbar-width: thin; scrollbar-color: var(--bp-border) transparent; } .bp-soc__grid > * { scroll-snap-align: start; } @media (min-width: 768px) and (max-width: 1023.98px) { .bp-soc__grid { grid-auto-columns: calc((100% - 16px) / 2 - 8px); } } @media (min-width: 1024px) { .bp-soc__grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; overflow: visible; } } .bp-soc__swipe { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; font-size: .8125rem; font-weight: 600; color: var(--bp-muted); } @media (min-width: 1024px) { .bp-soc__swipe { display: none; } } /* --- Card --------------------------------------------------------------- */ .bp-soc-card { position: relative; /* contains absolutely-positioned children inside the swipe row */ display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--bp-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 37, 69, .05), 0 16px 36px -16px rgba(11, 37, 69, .25); transition: box-shadow var(--bp-dur), transform var(--bp-dur) var(--bp-ease); } .bp-soc-card:hover { box-shadow: 0 1px 2px rgba(11, 37, 69, .06), 0 24px 48px -18px rgba(11, 37, 69, .34); } .bp-soc-card__head { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 16px 16px 18px; background: linear-gradient(135deg, var(--bp-navy-2) 0%, var(--bp-navy) 100%); color: #fff; } .bp-soc-card__head::before { /* security-print rings */ content: ""; position: absolute; z-index: -1; right: -70px; top: -90px; width: 220px; height: 220px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255, 255, 255, .08) 0 1px, transparent 1px 10px); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%); mask-image: radial-gradient(circle, #000 20%, transparent 70%); } .bp-soc-card__head::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--bp-brand-line, var(--bp-saffron)); } .bp-soc-card--facebook { --bp-brand-line: var(--bp-facebook); } .bp-soc-card--x { --bp-brand-line: #FFFFFF; } .bp-soc-card--youtube { --bp-brand-line: var(--bp-youtube); } .bp-soc-card__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #fff; font-size: 1.3rem; } .bp-soc-card--x .bp-soc-card__icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); } .bp-soc-card__id { flex: 1; min-width: 0; } .bp-soc-card__name { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; color: #fff; } .bp-soc-card__handle { display: block; overflow: hidden; margin-top: 2px; font-size: .8125rem; color: #B9C6D8; white-space: nowrap; text-overflow: ellipsis; } .bp-live { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #D6F5DC; } .bp-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3DDC6F; animation: bp-live 1.8s ease-in-out infinite; } @keyframes bp-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(61, 220, 111, .6); } 50% { box-shadow: 0 0 0 5px rgba(61, 220, 111, 0); } } .bp-soc-card.is-fallback .bp-live { display: none; } .bp-soc-card__cta { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px; border-radius: 999px; background: #fff; color: var(--bp-navy); font-size: .8125rem; font-weight: 700; text-decoration: none; transition: background-color var(--bp-dur), color var(--bp-dur); } .bp-soc-card__cta:hover { background: var(--bp-saffron); color: var(--bp-navy); } .bp-soc-card__cta:focus-visible { outline: 3px solid var(--bp-saffron); outline-offset: 2px; } /* Feed area */ .bp-soc-card__body { position: relative; height: var(--bp-feed-h); overflow: hidden; background: #fff; } .bp-soc-card__body--scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #C9D3E0 transparent; } .bp-soc-card__body::-webkit-scrollbar { width: 8px; } .bp-soc-card__body::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 8px; background: #C9D3E0; } .bp-soc-card__body:focus-visible { outline: 3px solid var(--bp-blue); outline-offset: -3px; } .bp-soc-frame { display: block; width: 100%; height: 100%; border: 0; } .bp-soc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--bp-border); background: var(--bp-bg); } .bp-soc-hint { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 600; color: var(--bp-muted); } .bp-soc-hint i { color: var(--bp-saffron-ink); animation: bp-nudge 1.8s ease-in-out infinite; } @keyframes bp-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } .bp-soc-card.is-fallback .bp-soc-hint { visibility: hidden; } .bp-soc-open { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; color: var(--bp-blue); text-decoration: none; white-space: nowrap; } .bp-soc-open:hover { color: var(--bp-navy); } .bp-soc-open:focus-visible { outline: 3px solid var(--bp-blue); outline-offset: 3px; border-radius: 4px; } /* --- Loading skeleton ---------------------------------------------------- */ .bp-soc-skel { position: absolute; inset: 0; display: grid; align-content: start; gap: 14px; padding: 16px; background: #fff; } .bp-soc-skel span { display: block; border-radius: 8px; background: linear-gradient(90deg, #EEF1F6 25%, #F8FAFC 37%, #EEF1F6 63%); background-size: 400% 100%; animation: bp-shimmer 1.4s ease infinite; } .bp-soc-skel__row { display: flex !important; align-items: center; gap: 12px; background: none !important; animation: none !important; } .bp-soc-skel__avatar { flex: none; width: 44px; height: 44px; border-radius: 50% !important; } .bp-soc-skel__line { flex: 1; height: 12px; } .bp-soc-skel__line--s { width: 55%; flex: none; } .bp-soc-skel__media { height: 190px; } @keyframes bp-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .bp-soc-card__body.is-ready .bp-soc-skel, .bp-soc-card__body.is-fallback .bp-soc-skel { display: none; } /* --- Fallback (embed blocked / not available) ---------------------------- */ .bp-soc-fallback { position: absolute; inset: 0; z-index: 2; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 24px; text-align: center; overflow: hidden; background: radial-gradient(circle at 50% 30%, rgba(31, 78, 140, .09), transparent 58%), var(--bp-bg); } .bp-soc-card__body.is-fallback .bp-soc-fallback { display: flex; } .bp-soc-card__body.is-fallback .bp-soc-mount { display: none; } .bp-soc-fallback__mark { position: absolute; right: -40px; bottom: -50px; font-size: 13rem; line-height: 1; color: rgba(11, 37, 69, .04); pointer-events: none; } .bp-soc-fallback__icon { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 6px; border-radius: 22px; color: #fff; font-size: 2rem; box-shadow: 0 14px 30px rgba(11, 37, 69, .2); } .bp-soc-fallback__handle { margin: 0; font-size: 1.1875rem; font-weight: 800; color: var(--bp-navy); } .bp-soc-fallback__note { max-width: 30ch; margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--bp-muted); } .bp-soc-fallback__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 10px 20px; border-radius: 10px; background: var(--bp-navy); color: #fff; font-size: .9375rem; font-weight: 700; text-decoration: none; transition: background-color var(--bp-dur); } .bp-soc-fallback__btn:hover { background: var(--bp-blue); color: #fff; } .bp-soc-fallback__btn:focus-visible { outline: 3px solid var(--bp-saffron); outline-offset: 3px; } html:not(.js) .bp-soc .bp-soc-skel { display: none; } html:not(.js) .bp-soc .bp-soc-fallback { display: flex; } /* --- YouTube feed ------------------------------------------------------- */ .bp-ytf { padding: 14px; } .bp-ytf__player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #0B1220; } .bp-ytf__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .bp-ytf__facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .bp-ytf__facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--bp-ease); } .bp-ytf__facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent 45%); } .bp-ytf__facade:hover img { transform: scale(1.04); } .bp-ytf__facade:focus-visible { outline: 3px solid var(--bp-saffron); outline-offset: -3px; } .bp-ytf__play { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 44px; border-radius: 12px; background: var(--bp-youtube); color: #fff; font-size: 1.1rem; transform: translate(-50%, -50%); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); transition: transform var(--bp-dur) var(--bp-ease); } .bp-ytf__facade:hover .bp-ytf__play { transform: translate(-50%, -50%) scale(1.08); } .bp-ytf__badge { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 4px 9px; border-radius: 6px; background: var(--bp-youtube); color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; } .bp-ytf__now { margin: 12px 2px 0; } .bp-ytf__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--bp-navy); } .bp-ytf__date { display: block; margin-top: 4px; font-size: .8125rem; color: var(--bp-muted); } .bp-ytf__label { display: flex; align-items: center; gap: 10px; margin: 18px 2px 8px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-saffron-ink); } .bp-ytf__label::after { content: ""; flex: 1; height: 1px; background: var(--bp-border); } .bp-ytf__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .bp-ytf__row { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; text-align: left; font: inherit; cursor: pointer; transition: background-color var(--bp-dur); } .bp-ytf__row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--bp-saffron); transform: scaleY(0); transition: transform var(--bp-dur) var(--bp-ease); } .bp-ytf__row:hover, .bp-ytf__row[aria-current="true"] { background: #EEF3FA; } .bp-ytf__row:hover::before, .bp-ytf__row[aria-current="true"]::before { transform: scaleY(1); } .bp-ytf__row:focus-visible { outline: 3px solid var(--bp-blue); outline-offset: -3px; } .bp-ytf__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #DCE3EC; } .bp-ytf__thumb img { width: 100%; height: 100%; object-fit: cover; } .bp-ytf__thumb i { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 30px; height: 22px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #fff; font-size: .6rem; transform: translate(-50%, -50%); } .bp-ytf__row .bp-ytf__title { font-size: .875rem; line-height: 1.45; } .bp-ytf__row .bp-ytf__date { font-size: .75rem; } [lang="hi"].bp-ytf__title { font-family: "Noto Sans Devanagari", "Noto Sans", system-ui, sans-serif; } /* X posts (main.js → renderX) */ .bp-xf { margin: 0; padding: 0; list-style: none; } .bp-xf__post { padding: 16px 18px; border-bottom: 1px solid var(--bp-border); transition: background-color var(--bp-dur) var(--bp-ease); } .bp-xf__post:last-child { border-bottom: 0; } .bp-xf__post:hover { background: #F6F8FB; } .bp-xf__repost { display: flex; align-items: center; gap: 6px; margin: 0 0 8px 50px; font-size: .75rem; font-weight: 600; color: var(--bp-muted); } .bp-xf__head { display: flex; align-items: center; gap: 10px; min-width: 0; } .bp-xf__avatar { display: grid; flex: none; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: #DCE3EC; font-weight: 700; color: var(--bp-navy); } .bp-xf__avatar img { width: 100%; height: 100%; object-fit: cover; } .bp-xf__who { display: grid; min-width: 0; } .bp-xf__name { overflow: hidden; font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--bp-navy); white-space: nowrap; text-overflow: ellipsis; } .bp-xf__meta { overflow: hidden; font-size: .8125rem; color: var(--bp-muted); white-space: nowrap; text-overflow: ellipsis; } .bp-xf__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; margin: 10px 0 0; font-size: .9375rem; line-height: 1.6; color: var(--bp-ink, #1F2937); white-space: pre-line; overflow-wrap: anywhere; } [lang="hi"].bp-xf__text { font-family: "Noto Sans Devanagari", "Noto Sans", system-ui, sans-serif; } .bp-xf__media { display: grid; gap: 2px; margin-top: 12px; overflow: hidden; border: 1px solid var(--bp-border); border-radius: 12px; } .bp-xf__media--2, .bp-xf__media--4 { grid-template-columns: 1fr 1fr; } .bp-xf__media--3 { grid-template-columns: 1fr 1fr; } .bp-xf__media--3 img:first-child { grid-row: span 2; } .bp-xf__media img { width: 100%; height: 100%; max-height: 240px; object-fit: cover; background: #DCE3EC; } .bp-xf__media:not(.bp-xf__media--1) img { aspect-ratio: 4 / 3; max-height: none; } .bp-xf__foot { display: flex; align-items: center; gap: 18px; margin-top: 12px; font-size: .8125rem; color: var(--bp-muted); } .bp-xf__stat { display: inline-flex; align-items: center; gap: 6px; min-width: 28px; } .bp-xf__link { margin-left: auto; font-weight: 700; color: var(--bp-blue); text-decoration: none; } .bp-xf__link:hover { text-decoration: underline; } .bp-xf__link:focus-visible { outline: 3px solid var(--bp-blue); outline-offset: 2px; border-radius: 4px; } /* --- X timeline mount ---------------------------------------------------- */ .bp-soc-mount { min-height: 100%; } .bp-soc-card--facebook .bp-soc-mount { height: 100%; } /* the plugin iframe needs a definite height */ .bp-soc-card--x .bp-soc-mount { padding: 0 4px; } @media (max-width: 767.98px) { .bp-soc__follow-label { display: none; } .bp-soc__icon-link { width: 40px; height: 40px; } .bp-soc-card__head { padding: 14px 14px 16px; } .bp-soc-card__icon { width: 42px; height: 42px; font-size: 1.15rem; } .bp-ytf__row { grid-template-columns: 96px minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .bp-soc *, .bp-soc *::before, .bp-soc *::after { transition: none !important; animation: none !important; } .bp-soc__icon-link:hover, .bp-ytf__facade:hover img { transform: none; } } /* Latest Feeds — live-site look: HQ photo, outlined see-through board (auto-scroll up) + emblem */ .feeds { background: linear-gradient(rgba(12, 18, 28, .42), rgba(12, 18, 28, .5)), url("/img/servicebg.jpg") center / cover no-repeat; } .feeds__grid { display: grid; gap: 32px; align-items: center; } @media (min-width: 992px) { .feeds__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; } } .feeds-panel { border: 1px solid rgba(255, 255, 255, .75); border-radius: 6px; background: rgba(255, 255, 255, .04); box-shadow: none; backdrop-filter: blur(2px); } .feeds-panel__head { margin: 0; padding: 22px 26px 14px; font-size: clamp(1.5rem, 1.25rem + .8vw, 2rem); font-weight: 500; color: #fff; } .feeds-panel .notice-board__viewport { height: 360px; } .feeds-panel .notice-list li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 26px; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 1rem; font-weight: 500; line-height: 1.6; color: #fff; } .feeds-panel .notice-list li i { display: block; flex: none; width: auto; height: auto; margin-top: 6px; border-radius: 0; background: none; font-size: .75rem; color: #F7B267; } .feeds__emblem { display: grid; place-items: center; } .feeds__emblem img { width: min(340px, 78%); height: auto; } @media (max-width: 991.98px) { .feeds__emblem { order: -1; } .feeds__emblem img { width: min(200px, 55%); } } @media (max-width: 575.98px) { .feeds-panel__head { padding: 18px 18px 10px; } .feeds-panel .notice-list li { padding: 13px 18px; font-size: .9375rem; } .feeds-panel .notice-board__viewport { height: 320px; } } /* Marquees keep painting even when scrolled past, which costs main-thread time on a long page. main.js flags them while they are off-screen. */ .is-offscreen .ticker__track, .is-offscreen .notice-board__track, .is-offscreen .marquee__track { animation-play-state: paused !important; } /* The home page is long, and laying out every section up front is the slowest part of the first paint. Sections below the fold are skipped until they are scrolled near. Carousels and marquees are left out because their scripts measure real widths on load, which only works once a section is rendered. Browsers without :has() simply drop this rule and behave as before. */ @supports (content-visibility: auto) { main > section:not(.hero):not(:has([data-marquee])):not(:has([data-slider])) { content-visibility: auto; contain-intrinsic-size: auto 600px; } }