/* ========================================================================== Literating India Foundation — Design System & Stylesheet Fonts are preconnected and preloaded in HTML for zero render-blocking latency. ========================================================================== */ :root { /* Core Color Palette */ --ink: #0B2545; --blue: #1B4F9C; --blue-deep: #123A73; --sky: #EAF1FB; --paper: #FFFFFF; --slate: #5B6B7C; --line: #D9E3F2; --line-deep: #BFD0E8; --gold: #B3860B; --gold-tint: #F7EDD2; /* Additional Functional Tokens */ --success: #1E7E34; --success-bg: #E8F5E9; --focus-ring: rgba(27, 79, 156, 0.35); /* Typography */ --font-serif: 'Fraunces', Georgia, serif; --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; --space-4xl: 6rem; /* Layout */ --container-max: 1180px; --container-narrow: 840px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(11, 37, 69, 0.06), 0 1px 2px rgba(11, 37, 69, 0.04); --shadow-md: 0 4px 12px rgba(11, 37, 69, 0.08), 0 2px 4px rgba(11, 37, 69, 0.04); --shadow-lg: 0 12px 28px rgba(11, 37, 69, 0.1), 0 4px 10px rgba(11, 37, 69, 0.05); /* Transitions */ --transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } /* Reset & Base */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Accessibility Focus-Visible */ :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* Accessible Skip Link */ .skip-link { position: absolute; top: -120px; left: 1rem; background: var(--ink); color: #FFFFFF !important; padding: 0.65rem 1.25rem; z-index: 99999; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: top 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .skip-link:focus { top: 1rem; outline: 3px solid var(--gold); } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } body { font-family: var(--font-sans); background-color: var(--paper); color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; position: relative; } main { flex: 1 0 auto; width: 100%; overflow-x: clip; } img, svg, picture, video, iframe, canvas { display: block; max-width: 100%; height: auto; } table { width: 100%; border-collapse: collapse; } .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem; } pre, code { max-width: 100%; overflow-x: auto; word-break: break-word; } a { color: var(--blue); text-decoration: none; transition: var(--transition); } a:hover { color: var(--blue-deep); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); color: var(--ink); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; } p { margin-bottom: 1rem; } p:last-child { margin-bottom: 0; } /* ========================================================================== Typography & Utilities ========================================================================== */ .display-title { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.15; margin-bottom: 1.25rem; letter-spacing: -0.02em; } .section-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; margin-bottom: 0.75rem; } .section-sub { font-size: 1.125rem; color: var(--slate); max-width: 680px; margin-bottom: 2rem; line-height: 1.6; } .lead-text { font-size: 1.25rem; line-height: 1.6; color: var(--slate); margin-bottom: 1.5rem; } .text-muted { color: var(--slate); } .text-center { text-align: center; } /* Eyebrow Label */ .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); margin-bottom: 0.75rem; } .eyebrow.eyebrow-dark { color: var(--gold); } /* Tags & Badges */ .tag { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.625rem; border-radius: var(--radius-full); background-color: var(--sky); color: var(--blue); border: 1px solid var(--line); letter-spacing: 0.02em; } .tag-gold { background-color: var(--gold-tint); color: var(--gold); border-color: rgba(179, 134, 11, 0.25); font-weight: 600; } /* ========================================================================== Signature Motif: Signal Bars (.signal) ========================================================================== */ .signal { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 14px; width: auto; vertical-align: middle; } .signal span, .signal-bar { display: block; width: 3px; background-color: currentColor; border-radius: 1px; transition: var(--transition); } .signal span:nth-child(1) { height: 25%; } .signal span:nth-child(2) { height: 50%; } .signal span:nth-child(3) { height: 75%; } .signal span:nth-child(4) { height: 100%; } .signal-lg { height: 20px; gap: 3.5px; } .signal-lg span { width: 4px; } .signal-sm { height: 11px; gap: 2px; } .signal-sm span { width: 2.5px; } /* ========================================================================== Layout Containers & Sections ========================================================================== */ .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .container-narrow { max-width: var(--container-narrow); } .section-pad { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); } .section-pad-sm { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); } .section-tint { background-color: var(--sky); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-hero { position: relative; padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); background: radial-gradient(circle at 85% 15%, rgba(27, 79, 156, 0.09) 0%, transparent 55%), radial-gradient(circle at 10% 85%, rgba(179, 134, 11, 0.06) 0%, transparent 50%), linear-gradient(180deg, #FFFFFF 0%, var(--sky) 100%); border-bottom: 1px solid var(--line); overflow: hidden; } .hero-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } .hero-content { display: flex; flex-direction: column; align-items: flex-start; } .hero-badge-pill { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--ink); background-color: rgba(255, 255, 255, 0.85); border: 1px solid var(--line-deep); padding: 0.35rem 0.85rem; border-radius: var(--radius-full); margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); } .hero-pulse-dot { width: 8px; height: 8px; background-color: #2E7D32; border-radius: 50%; position: relative; display: inline-block; } .hero-pulse-dot::after { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: 50%; background-color: rgba(46, 125, 50, 0.4); animation: pulse 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1); } @keyframes pulse { 0% { transform: scale(1); opacity: 0.9; } 70% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; } } .hero-trust-bar { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(11, 37, 69, 0.08); font-size: 0.8125rem; font-family: var(--font-mono); color: var(--slate); } .hero-trust-item { display: flex; align-items: center; gap: 0.4rem; } /* Glassmorphism Visual Hero Card */ .hero-visual-card { background: rgba(11, 37, 69, 0.95); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-lg); padding: 2rem; color: #FFFFFF; box-shadow: 0 20px 40px rgba(11, 37, 69, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .hero-visual-card::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(27, 79, 156, 0.4) 0%, transparent 70%); pointer-events: none; } .hero-card-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 1rem; margin-bottom: 1.25rem; } .hero-card-title { font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: #B4C4D9; } .hero-signal-meter { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--gold); } .hero-helpline-box { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .hero-helpline-info h4 { font-size: 0.9375rem; color: #FFFFFF; margin-bottom: 0.2rem; font-family: var(--font-sans); } .hero-helpline-info p { font-size: 0.75rem; color: #B4C4D9; margin: 0; } .hero-helpline-btn { background-color: var(--gold); color: var(--ink); font-family: var(--font-mono); font-weight: 700; font-size: 0.875rem; padding: 0.45rem 0.85rem; border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; transition: var(--transition); } .hero-helpline-btn:hover { background-color: #D4A017; color: var(--ink); transform: translateY(-1px); } .hero-feature-tags { display: flex; flex-direction: column; gap: 0.6rem; } .hero-feature-tag { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; color: #DDE7F5; } .hero-feature-tag svg { color: var(--gold); flex-shrink: 0; } .page-header { padding-top: 3.5rem; padding-bottom: 3rem; background-color: var(--sky); border-bottom: 1px solid var(--line); } .page-header h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); margin-bottom: 1rem; } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 600; padding: 0.65rem 1.35rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: var(--transition); line-height: 1.4; white-space: nowrap; } .btn-primary { background-color: var(--blue); color: var(--paper); border-color: var(--blue); } .btn-primary:hover { background-color: var(--blue-deep); border-color: var(--blue-deep); color: var(--paper); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn-secondary { background-color: var(--sky); color: var(--ink); border-color: var(--line-deep); } .btn-secondary:hover { background-color: var(--paper); border-color: var(--blue); color: var(--blue); transform: translateY(-1px); } .btn-outline { background-color: transparent; color: var(--ink); border-color: var(--line-deep); } .btn-outline:hover { background-color: var(--paper); border-color: var(--ink); color: var(--ink); } .btn-gold { background-color: var(--gold); color: var(--paper); border-color: var(--gold); } .btn-gold:hover { background-color: #926d09; color: var(--paper); } .btn-group { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; } /* ========================================================================== Header & Navigation ========================================================================== */ .site-header { background-color: #FFFFFF; background: #FFFFFF; border-bottom: 1px solid var(--line); position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; box-shadow: 0 1px 3px rgba(11, 37, 69, 0.05); transition: var(--transition); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand-link { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-serif); font-size: 1.1875rem; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; padding: 0.25rem 0; } .brand-logo-img { height: clamp(38px, 4.5vw, 48px); width: auto; max-width: 220px; object-fit: contain; display: block; transition: var(--transition); } .brand-link:hover .brand-logo-img { transform: scale(1.02); } .footer-brand-logo-wrap { background: rgba(255, 255, 255, 0.98); padding: 0.5rem 0.85rem; border-radius: var(--radius-md); display: inline-flex; align-items: center; width: fit-content; max-width: 220px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); margin-bottom: 0.5rem; } .footer-brand-logo-img { height: 38px; width: auto; max-width: 100%; object-fit: contain; display: block; } .brand-link .brand-mark { color: var(--blue); display: flex; align-items: center; } .brand-link:hover { color: var(--blue); } .brand-link .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-link .brand-title { font-size: 1.125rem; font-weight: 700; } .brand-link .brand-sub { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } .nav-menu { display: flex; align-items: center; gap: 1.75rem; list-style: none; } .mobile-drawer-footer { display: none; } .nav-link { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--ink); text-decoration: none; padding: 0.35rem 0; position: relative; transition: var(--transition); } .nav-link:hover { color: var(--blue); } .nav-link.active { color: var(--blue); font-weight: 600; } .nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background-color: var(--blue); border-radius: 1px; } .header-cta { margin-left: 0.5rem; } .nav-toggle { display: none; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 44px; cursor: pointer; padding: 0; align-items: center; justify-content: center; position: relative; z-index: 1001; transition: all 0.25s ease; box-shadow: 0 2px 6px rgba(11, 37, 69, 0.05); } .nav-toggle:hover { background: var(--sky); border-color: var(--line-deep); transform: translateY(-1px); } .nav-toggle:active { transform: scale(0.95); } .hamburger-box { width: 22px; height: 16px; position: relative; display: flex; flex-direction: column; justify-content: space-between; } .hamburger-bar { display: block; width: 100%; height: 2.5px; background-color: var(--ink); border-radius: 4px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background-color 0.3s ease; transform-origin: center; } /* When navigation is open */ .nav-open .nav-toggle { background: var(--blue); border-color: var(--blue); box-shadow: 0 4px 12px rgba(11, 37, 69, 0.25); } .nav-open .nav-toggle:hover { background: var(--blue-deep); border-color: var(--blue-deep); } .nav-open .nav-toggle .hamburger-bar { background-color: #FFFFFF; } .nav-open .hamburger-bar.bar-1 { transform: translateY(6.75px) rotate(45deg); } .nav-open .hamburger-bar.bar-2 { opacity: 0; transform: scaleX(0); } .nav-open .hamburger-bar.bar-3 { transform: translateY(-6.75px) rotate(-45deg); } /* ========================================================================== Cards (.card) ========================================================================== */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.5rem; } .card-grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); } .curriculum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; } .card { background-color: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.75rem; display: flex; flex-direction: column; transition: var(--transition); box-shadow: var(--shadow-sm); } .card:hover { border-color: var(--line-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); } .card-tint { background-color: var(--sky); } .card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .card-title { font-size: 1.35rem; margin-bottom: 0.6rem; font-weight: 700; } .card-body { color: var(--slate); font-size: 0.96875rem; flex: 1 1 auto; } .card-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } /* ========================================================================== Pillars (.pillar) ========================================================================== */ .pillar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .pillar { background-color: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.75rem; position: relative; transition: var(--transition); } .pillar:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); } .pillar-num { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--blue); background-color: var(--sky); display: inline-block; padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); margin-bottom: 1rem; } .pillar-title { font-size: 1.25rem; margin-bottom: 0.6rem; font-weight: 700; } .pillar-desc { font-size: 0.9375rem; color: var(--slate); } /* ========================================================================== Stat Strip (.stat-strip) ========================================================================== */ .stat-strip { background-color: var(--ink); color: var(--paper); padding: 2.75rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; } .stat-item { display: flex; flex-direction: column; align-items: center; } .stat-num { font-family: var(--font-mono); font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 700; color: var(--paper); line-height: 1.1; margin-bottom: 0.35rem; letter-spacing: -0.02em; } .stat-num .stat-accent { color: var(--gold); } .stat-label { font-family: var(--font-sans); font-size: 0.875rem; color: #B4C4D9; max-width: 220px; line-height: 1.4; } /* ========================================================================== Team / Person (.person) ========================================================================== */ .person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2rem; } .person { background-color: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.75rem; display: flex; flex-direction: column; transition: var(--transition); } .person:hover { border-color: var(--line-deep); box-shadow: var(--shadow-md); transform: translateY(-2px); } .person-avatar { width: 72px; height: 72px; border-radius: var(--radius-full); background-color: var(--sky); border: 2px solid var(--line-deep); color: var(--blue); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; margin-bottom: 1.25rem; } .person-avatar.avatar-gold { background-color: var(--gold-tint); color: var(--gold); border-color: rgba(179, 134, 11, 0.3); } .person-name { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; } .person-role { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.875rem; } .person-bio { font-size: 0.90625rem; color: var(--slate); line-height: 1.55; margin-top: auto; } /* ========================================================================== Blog Post Row (.post-row) ========================================================================== */ .post-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .post-row { display: grid; grid-template-columns: 140px 1fr 140px; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: var(--transition); } .post-row:hover { background-color: rgba(234, 241, 251, 0.35); padding-left: 0.75rem; padding-right: 0.75rem; margin-left: -0.75rem; margin-right: -0.75rem; border-radius: var(--radius-sm); } .post-date { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--slate); } .post-content { display: flex; flex-direction: column; gap: 0.35rem; } .post-title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; } .post-title a { color: var(--ink); text-decoration: none; transition: color 0.2s ease; } .post-title a:hover { color: var(--blue); } .post-excerpt { font-size: 0.9375rem; color: var(--slate); line-height: 1.55; } .post-tag-wrap { text-align: right; } /* ========================================================================== Enhanced Blog Grid & Featured Story Presentation ========================================================================== */ .featured-story-section { margin-bottom: 3rem; } .featured-post-card { display: grid; grid-template-columns: 1.15fr 0.85fr; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 20px rgba(11, 37, 69, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .featured-post-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(11, 37, 69, 0.09); border-color: var(--blue); } .featured-post-content { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; } .featured-post-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; } .featured-post-title { font-size: 1.75rem; font-weight: 700; line-height: 1.3; margin-bottom: 1rem; } .featured-post-title a { color: var(--ink); text-decoration: none; } .featured-post-title a:hover { color: var(--blue); } .featured-post-excerpt { font-size: 1.0625rem; color: var(--slate); line-height: 1.65; margin-bottom: 1.75rem; } .featured-post-img-wrap { position: relative; min-height: 280px; background: var(--sky); overflow: hidden; } .featured-post-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .featured-post-card:hover .featured-post-img-wrap img { transform: scale(1.03); } .reading-time-pill { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--slate); } /* Blog Grid View */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 2rem; } .blog-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 10px rgba(11, 37, 69, 0.03); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(11, 37, 69, 0.08); border-color: var(--blue); } .blog-card-img-wrap { height: 190px; background: var(--sky); overflow: hidden; position: relative; } .blog-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .blog-card:hover .blog-card-img-wrap img { transform: scale(1.04); } .blog-card-placeholder-pattern { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--sky) 0%, rgba(200, 218, 238, 0.6) 100%); color: var(--blue); font-size: 2.5rem; } .blog-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; } .blog-card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.85rem; font-size: 0.8125rem; } .blog-card-title { font-size: 1.25rem; font-weight: 700; line-height: 1.35; margin-bottom: 0.75rem; } .blog-card-title a { color: var(--ink); text-decoration: none; } .blog-card-title a:hover { color: var(--blue); } .blog-card-excerpt { font-size: 0.9375rem; color: var(--slate); line-height: 1.6; margin-bottom: 1.25rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-card-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } .blog-card-link { font-weight: 600; font-size: 0.875rem; color: var(--blue); display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; transition: gap 0.2s ease; } .blog-card:hover .blog-card-link { gap: 0.6rem; } /* Category Tag Enhancements */ .tag-alert { background-color: #FDEDED; color: #B71C1C; border: 1px solid #FFCDD2; } .tag-field { background-color: var(--sky); color: var(--blue-deep); border: 1px solid rgba(11, 37, 69, 0.15); } .tag-social { background-color: #FFF8E1; color: #8D6E00; border: 1px solid #FFE082; } /* Results & View Controls */ .blog-controls-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.75rem; flex-wrap: wrap; gap: 1rem; } .results-count-text { font-family: var(--font-mono); font-size: 0.875rem; color: var(--slate); } .view-mode-toggle { display: flex; gap: 0.35rem; background: var(--sky); padding: 0.25rem; border-radius: var(--radius-sm); border: 1px solid var(--line); } .view-mode-btn { border: none; background: none; padding: 0.35rem 0.65rem; font-size: 0.8125rem; font-weight: 600; color: var(--slate); border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 0.35rem; transition: all 0.2s ease; } .view-mode-btn.active { background: #FFFFFF; color: var(--blue); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } @media (max-width: 860px) { .featured-post-card { grid-template-columns: 1fr; } .featured-post-img-wrap { min-height: 220px; order: -1; } .featured-post-content { padding: 1.75rem; } .blog-grid { grid-template-columns: 1fr; } } /* ========================================================================== Callout (.callout) ========================================================================== */ .callout { background-color: var(--sky); border-left: 4px solid var(--blue); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 1.5rem 1.75rem; margin: 2rem 0; display: flex; gap: 1.25rem; align-items: flex-start; } .callout-icon { color: var(--blue); flex-shrink: 0; margin-top: 0.2rem; } .callout-content { font-size: 1rem; color: var(--ink); } .callout-content p:last-child { margin-bottom: 0; } .callout-gold { background-color: var(--gold-tint); border-left-color: var(--gold); } .callout-gold .callout-icon { color: var(--gold); } /* ========================================================================== CTA Band (.cta-band) ========================================================================== */ .cta-band { background-color: var(--ink); color: var(--paper); padding: 4rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .cta-band h2 { color: var(--paper); font-size: clamp(2rem, 3.5vw, 2.75rem); margin-bottom: 1rem; } .cta-band p { color: #B4C4D9; font-size: 1.125rem; max-width: 620px; margin-bottom: 2rem; } .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; } .cta-text { max-width: 640px; } /* ========================================================================== Partner Strip (.partner-strip) ========================================================================== */ .partner-strip { padding: 2.5rem 0; background-color: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.25rem; align-items: center; } .partner-logo-box { background-color: var(--sky); border: 1px dashed var(--line-deep); border-radius: var(--radius-sm); padding: 1.25rem 1rem; text-align: center; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; color: var(--slate); transition: var(--transition); } .partner-logo-box:hover { border-color: var(--blue); color: var(--ink); background-color: #E2ECF9; } /* ========================================================================== Form Grid & Fields (.form-grid, .field) ========================================================================== */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; } .form-group, .field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.25rem; } .form-group:last-child, .field:last-child { margin-bottom: 0; } .field-full { grid-column: 1 / -1; } .form-group label, .field label { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); } .form-input, .form-select, .form-textarea, .input, .select, .textarea { font-family: var(--font-sans); font-size: 0.9375rem; padding: 0.85rem 1rem; border: 1.5px solid var(--line-deep); border-radius: var(--radius-sm); background-color: var(--paper); color: var(--ink); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); width: 100%; box-sizing: border-box; } .form-input::placeholder, .form-textarea::placeholder, .input::placeholder, .textarea::placeholder { color: #94A3B8; font-size: 0.875rem; } .form-input:focus, .form-select:focus, .form-textarea:focus, .input:focus, .select:focus, .textarea:focus { border-color: var(--blue); background-color: #FFFFFF; outline: none; box-shadow: 0 0 0 4px rgba(11, 37, 69, 0.08); } .form-select, .select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px; padding-right: 2.5rem; cursor: pointer; } .form-textarea, .textarea { min-height: 120px; resize: vertical; line-height: 1.6; } .field-hint { font-size: 0.75rem; color: var(--slate); margin-top: 0.25rem; line-height: 1.4; } .form-note { display: none; margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); font-size: 0.9375rem; line-height: 1.5; } .form-note.is-visible { display: block; } .form-note.form-note-success { background-color: var(--success-bg); border: 1px solid #A5D6A7; color: var(--success); } /* ========================================================================== Contact Page Grid (.contact-grid) ========================================================================== */ .contact-grid { display: grid; grid-template-columns: 0.95fr 1.15fr; gap: 3rem; align-items: start; } /* ========================================================================== Program Detail Sections ========================================================================== */ .program-block { padding: 3rem 0; border-bottom: 1px solid var(--line); } .program-block:last-child { border-bottom: none; } .program-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; } .program-meta { background-color: var(--sky); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.75rem; } .spec-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; } .spec-item { display: flex; flex-direction: column; gap: 0.25rem; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; } .spec-item:last-child { border-bottom: none; padding-bottom: 0; } .spec-label { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: 0.05em; } .spec-value { font-size: 0.9375rem; color: var(--ink); font-weight: 500; } /* ========================================================================== Footer ========================================================================== */ .site-footer { background-color: #07192F; color: #B4C4D9; padding-top: 4.5rem; padding-bottom: 2.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.90625rem; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 3rem; margin-bottom: 3.5rem; } .footer-col h4 { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--paper); margin-bottom: 1.25rem; } .footer-brand { display: flex; flex-direction: column; gap: 1rem; } .footer-brand-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--paper); display: flex; align-items: center; gap: 0.5rem; } .footer-brand-title .signal { color: var(--gold); } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; } .footer-links a { color: #B4C4D9; text-decoration: none; transition: var(--transition); } .footer-links a:hover { color: var(--paper); padding-left: 3px; } .footer-contact-info { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; line-height: 1.5; } .social-links { display: flex; gap: 0.75rem; margin-top: 0.5rem; } .social-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background-color: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #B4C4D9; transition: var(--transition); } .social-btn:hover { background-color: var(--blue); color: var(--paper); border-color: var(--blue); } .footer-bottom { padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.8125rem; color: #7D8E9F; } .footer-bottom a { color: #9DB0C6; } .footer-bottom a:hover { color: var(--paper); } /* ========================================================================== Citizen Voices & Testimonials (.quote-card) ========================================================================== */ .quote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; } .quote-card { background-color: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; transition: var(--transition); box-shadow: var(--shadow-sm); } .quote-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow-md); } .quote-icon { font-size: 2.25rem; line-height: 1; font-family: var(--font-serif); color: var(--gold); margin-bottom: 0.5rem; } .quote-text { font-size: 0.96875rem; line-height: 1.65; color: var(--ink); margin-bottom: 1.25rem; font-style: italic; } .quote-author { display: flex; align-items: center; gap: 0.75rem; border-top: 1px solid var(--line); padding-top: 1rem; } .quote-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--sky); color: var(--blue); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-serif); font-size: 1rem; } .quote-name { font-size: 0.9375rem; font-weight: 700; color: var(--ink); } .quote-role { font-size: 0.78125rem; color: var(--slate); font-family: var(--font-mono); } /* ========================================================================== Filter Strip & Search Bar (Blog & Events) ========================================================================== */ .filter-strip { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .filter-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .filter-btn { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: var(--radius-full); border: 1px solid var(--line); background-color: var(--paper); color: var(--slate); cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .filter-btn:hover { border-color: var(--blue); color: var(--blue); background-color: var(--sky); } .filter-btn.active, .filter-btn.is-active { background-color: var(--blue); color: #FFFFFF; border-color: var(--blue); box-shadow: 0 2px 8px rgba(27, 79, 156, 0.2); } .tag-count { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.85; } .search-wrap { flex: 1; min-width: min(100%, 280px); position: relative; display: flex; align-items: center; } .search-input { width: 100%; font-family: var(--font-sans); font-size: 0.875rem; padding: 0.65rem 1.15rem; border-radius: var(--radius-full); border: 1px solid var(--line); background-color: var(--paper); color: var(--ink); outline: none; transition: var(--transition); box-shadow: 0 1px 3px rgba(11, 37, 69, 0.04); } .search-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(27, 79, 156, 0.12); background-color: #FFFFFF; } /* ========================================================================== Event Cards (.event-card-grid) ========================================================================== */ .event-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.75rem; } .event-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: var(--transition); box-shadow: var(--shadow-sm); } .event-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow-md); } .event-card-img { width: 100%; height: 180px; background-color: var(--sky); position: relative; overflow: hidden; } .event-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .event-card:hover .event-card-img img { transform: scale(1.03); } .event-date-badge { position: absolute; top: 1rem; left: 1rem; background-color: var(--ink); color: var(--paper); padding: 0.4rem 0.75rem; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; box-shadow: 0 2px 8px rgba(11, 37, 69, 0.25); z-index: 2; } .event-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; } .event-meta-line { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--slate); margin-bottom: 0.6rem; } .event-card-title { font-size: 1.25rem; font-weight: 700; line-height: 1.35; margin-bottom: 0.75rem; } .event-card-title a { color: var(--ink); text-decoration: none; } .event-card-title a:hover { color: var(--blue); } .event-card-desc { font-size: 0.9375rem; color: var(--slate); line-height: 1.55; margin-bottom: 1.25rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .event-card-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: auto; } /* ========================================================================== Registration Modal Popup Dialog ========================================================================== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(11, 37, 69, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease; } .registration-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%) scale(0.96); width: min(580px, calc(100vw - 1.5rem)); background: #FFFFFF; border: 1px solid rgba(11, 37, 69, 0.12); border-radius: 1.25rem; box-shadow: 0 25px 65px -10px rgba(11, 37, 69, 0.35), 0 0 0 1px rgba(11, 37, 69, 0.06); z-index: 1001; padding: clamp(1.25rem, 4vw, 2.25rem); opacity: 0; visibility: hidden; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, visibility 0.28s ease; max-height: calc(100vh - 2rem); overflow-y: auto; -webkit-overflow-scrolling: touch; } .registration-modal.is-active, .modal-backdrop.is-active { opacity: 1; visibility: visible; } .registration-modal.is-active { transform: translate(-50%, -50%) scale(1); } .modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; gap: 1rem; } .modal-badge { display: inline-flex; align-items: center; gap: 0.45rem; background: #FEF3C7; color: #92400E; font-size: 0.75rem; font-family: var(--font-mono); font-weight: 700; padding: 0.35rem 0.75rem; border-radius: 9999px; margin-bottom: 0.5rem; letter-spacing: 0.02em; } .modal-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #D97706; display: inline-block; } .modal-title { font-size: clamp(1.25rem, 3.5vw, 1.5rem); font-weight: 700; color: var(--ink); line-height: 1.3; margin: 0 0 0.35rem 0; } .modal-subtitle { font-size: 0.8125rem; color: var(--slate); font-family: var(--font-mono); line-height: 1.5; } .modal-close-btn { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; background: var(--sky); border: 1px solid var(--line-deep); color: var(--slate); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; cursor: pointer; line-height: 1; transition: all 0.2s ease; } .modal-close-btn:hover { background: #FEE2E2; color: #DC2626; border-color: #FCA5A5; transform: rotate(90deg); } .modal-trust-strip { display: flex; justify-content: center; align-items: center; gap: 0.75rem; margin-top: 1.25rem; font-size: 0.75rem; color: var(--slate); font-family: var(--font-mono); text-align: center; flex-wrap: wrap; } /* ========================================================================== Responsive Breakpoints & Mobile Navigation ========================================================================== */ /* Tablets & Small Desktops (<= 1024px) */ @media (max-width: 1024px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } .stat-grid { gap: 1.25rem; } } /* Tablets & Mobile Navigation Trigger (<= 860px) */ @media (max-width: 860px) { body.nav-locked { overflow: hidden; touch-action: none; } .site-header { height: 68px; background-color: #FFFFFF; background: #FFFFFF; position: -webkit-sticky; position: sticky; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; } .site-header.nav-open, body.nav-locked .site-header, body.nav-open .site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1005; } .header-inner { height: 68px; background-color: #FFFFFF; background: #FFFFFF; } .nav-toggle { display: flex; z-index: 1006; } /* Backdrop Overlay */ .mobile-nav-backdrop { position: fixed; inset: 0; top: 68px; background: rgba(7, 25, 47, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: 998; } .site-header.nav-open ~ .mobile-nav-backdrop, body.nav-locked .mobile-nav-backdrop, body.nav-open .mobile-nav-backdrop, .nav-open .mobile-nav-backdrop { opacity: 1; visibility: visible; } /* Slide-Down Modern Sheet */ .nav-menu { position: fixed; top: 68px; left: 0; right: 0; background: linear-gradient(180deg, #07192F 0%, #0B2545 100%); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5); flex-direction: column; align-items: stretch; padding: 1.25rem 1.5rem 2rem; gap: 0.35rem; display: flex; max-height: calc(100vh - 68px); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 999; transform: translateY(-120%); transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .nav-open .nav-menu, .site-header.nav-open .nav-menu, body.nav-locked .nav-menu, body.nav-open .nav-menu { transform: translateY(0); } .nav-menu li { width: 100%; } .nav-link { font-size: 1.0625rem; font-weight: 500; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; color: #EAF1FB; border-radius: 8px; background: transparent; transition: all 0.2s ease; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .nav-link::after { content: "→"; font-family: var(--font-sans); font-size: 0.95rem; opacity: 0; transform: translateX(-6px); transition: all 0.2s ease; color: var(--gold); } .nav-link:hover, .nav-link:focus, .nav-link.active { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); } .nav-link.active { color: var(--gold); background: rgba(179, 134, 11, 0.15); font-weight: 600; } .nav-link:hover::after, .nav-link.active::after { opacity: 1; transform: translateX(0); } /* Drawer Footer Card */ .mobile-drawer-footer { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .mobile-drawer-helpline { display: flex; align-items: center; justify-content: space-between; background: rgba(217, 83, 79, 0.15); border: 1px solid rgba(217, 83, 79, 0.35); color: #FFC0BD; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: all 0.2s ease; } .mobile-drawer-helpline:hover { background: rgba(217, 83, 79, 0.25); color: #FFFFFF; } .header-cta { margin-left: 0; width: 100%; margin-top: 0.25rem; } .header-cta .btn { width: 100%; padding: 0.85rem 1rem; font-size: 1rem; font-weight: 600; background: linear-gradient(135deg, #B3860B 0%, #D4AF37 100%); color: #07192F; border: none; border-radius: 8px; box-shadow: 0 4px 14px rgba(179, 134, 11, 0.3); text-align: center; } .hero-split { grid-template-columns: 1fr; gap: 2.5rem; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .cta-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; } .cta-actions { width: 100%; } .cta-actions .btn { width: 100%; text-align: center; justify-content: center; } .program-grid { grid-template-columns: 1fr; gap: 2rem; } .contact-grid { grid-template-columns: 1fr; gap: 2rem; } .featured-post-card { grid-template-columns: 1fr; } .featured-post-img-wrap { min-height: 220px; order: -1; } .featured-post-content { padding: 1.75rem; } .filter-strip { flex-direction: column; align-items: stretch; gap: 1rem; } .filter-tags { width: 100%; } .search-wrap { width: 100%; } .post-row { grid-template-columns: 1fr; gap: 0.5rem; } .post-tag-wrap { text-align: left; } } /* Mobile Devices & Small Tablets (<= 640px) */ @media (max-width: 640px) { .btn-group { flex-direction: column; width: 100%; gap: 0.75rem; } .btn-group .btn, .callout .btn, .cta-actions .btn { width: 100%; text-align: center; justify-content: center; padding: 0.8rem 1rem; } .form-grid, .form-row, .form-row-3 { grid-template-columns: 1fr; gap: 0.85rem; } .curriculum-grid { grid-template-columns: 1fr; gap: 0.85rem; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .stat-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } .stat-box { padding: 1.25rem 0.75rem; text-align: center; } .stat-num { font-size: clamp(1.75rem, 6vw, 2.25rem); } .quote-grid { grid-template-columns: 1fr; } .hero-visual-card { padding: 1.25rem; } .callout { flex-direction: column; align-items: flex-start; gap: 0.85rem; padding: 1.25rem; } .card, .person, .pillar { padding: 1.25rem; } .section-pad { padding-top: 2.25rem; padding-bottom: 2.25rem; } .section-pad-sm { padding-top: 1.75rem; padding-bottom: 1.75rem; } .page-header { padding-top: 2.5rem; padding-bottom: 2rem; } .footer-bottom { flex-direction: column; text-align: center; gap: 0.75rem; } .display-title { font-size: clamp(1.85rem, 7vw, 2.5rem); } .section-title { font-size: clamp(1.5rem, 5.5vw, 2rem); } .filter-tags { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.35rem; flex-wrap: nowrap; scrollbar-width: none; } .filter-tags::-webkit-scrollbar { display: none; } .filter-btn { flex-shrink: 0; } /* Prevent iOS Safari auto-zoom on input focus */ .form-input, .form-select, .form-textarea, .input, .select, .textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea { font-size: 16px !important; } } /* Phones (<= 480px) */ @media (max-width: 480px) { .container { padding-left: 1rem; padding-right: 1rem; } .brand-logo-img { height: 36px; max-width: 160px; } .brand-link .brand-title { font-size: 1rem; } .brand-link .brand-sub { font-size: 0.625rem; } .hero-badge-pill { font-size: 0.75rem; padding: 0.3rem 0.65rem; } .hero-trust-bar { flex-direction: column; align-items: flex-start; gap: 0.6rem; } .modal-header { flex-direction: row; } .registration-modal { width: calc(100vw - 1rem); padding: 1.25rem 1rem; border-radius: 1rem; } .btn { padding: 0.75rem 1rem; font-size: 0.9375rem; min-height: 44px; } } /* Extra Small Phones (<= 360px) */ @media (max-width: 360px) { .stat-grid { grid-template-columns: 1fr; } .brand-logo-img { max-width: 130px; height: 32px; } .brand-link .brand-title { font-size: 0.9375rem; } .btn { padding: 0.65rem 0.85rem; font-size: 0.875rem; } } /* ========================================================================== Reading Progress Bar (Blog & Articles) ========================================================================== */ .reading-progress-track { position: fixed; top: 72px; left: 0; width: 100%; height: 4px; background: rgba(27, 79, 156, 0.08); z-index: 1001; pointer-events: none; } @media (max-width: 840px) { .reading-progress-track { top: 68px; height: 3.5px; } } .reading-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #1B4F9C 0%, #2563EB 50%, #00C6FF 100%); box-shadow: 0 0 12px rgba(37, 99, 235, 0.9), 0 0 4px rgba(27, 79, 156, 0.7); transition: width 0.08s ease-out; border-radius: 0 4px 4px 0; } /* ========================================================================== Cumulative Layout Shift (CLS) Stabilization Min-Heights ========================================================================== */ #homepage-stats-grid { min-height: 90px; } #homepage-posts-list { min-height: 200px; } #homepage-events-grid { min-height: 260px; } #homepage-programs-grid { min-height: 200px; } #posts-container { min-height: 300px; } #events-grid { min-height: 300px; } #team-grid-container { min-height: 300px; } #dynamic-programs-grid { min-height: 220px; }