.btn-outline:hover{ background:var(--color-navy); color:#fff } .hero{ padding:4.5rem 0 3rem; text-align:center } body { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } footer { margin-top: auto; } .eyebrow{ margin:0 0 .5rem; color:var(--color-sage); font-size:.85rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase } h1{ color:var(--color-navy); font-size:2.2rem; font-weight:800; line-height:1.25; letter-spacing:normal; margin-bottom:1.25rem } @media (min-width:768px){ h1{font-size:3rem} } .hero-text{ max-width:650px; margin:auto; font-size:1.15rem } main{ padding:0 0 5.5rem } .heading{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.8rem } .heading h2{ margin:0; color:var(--color-navy); font-size:1.75rem } .status{ margin:0; color:var(--color-text-alt); font-size:.9rem } .posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem } .card{ display:flex; min-width:0; flex-direction:column; overflow:hidden; background:#fff; border:1px solid var(--color-border-soft); border-radius:18px; box-shadow:var(--color-shadow-soft) } .card-img, .placeholder{ display:block; width:100%; height:210px; object-fit:cover } .placeholder{ display:grid; place-items:center; background:linear-gradient(135deg,#d4dfc8,#f6f1e7); color:var(--color-navy); font-size:1.15rem; font-weight:800 } .card-body{ display:flex; flex:1; flex-direction:column; padding:1.35rem } .date{ margin:0 0 .65rem; color:var(--color-sage); font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase } .text{ display:-webkit-box; overflow:hidden; margin:0 0 1.35rem; -webkit-box-orient:vertical; -webkit-line-clamp:5; white-space:pre-line } .link{ margin-top:auto; color:var(--color-navy); font-size:.9rem; font-weight:800 } .link:hover{ color:var(--color-sage) } .empty{ grid-column:1/-1; padding:2.75rem 1.5rem; background:#fff; border:1px solid var(--color-border-soft); border-radius:18px; text-align:center } .empty h3{ margin:0; color:var(--color-navy) } .facebook-cta{ text-align:center; padding:0 0 5.5rem } .facebook-box{ max-width:760px; margin:auto; padding:2.5rem; background:var(--color-light-sage); border-radius:20px } .facebook-box h2{ margin:0 0 .5rem; color:var(--color-navy); font-size:1.5rem } .facebook-box p{ margin:.4rem auto 1.35rem } footer{ background:#172e3f; color:#fff; padding:2rem 0; text-align:center; font-size:.85rem; opacity:.9 } @media(max-width:1024px){ .nav ul{gap:.75rem} .nav a{font-size:.82rem} .nav .btn, .nav .social{display:none} } @media(max-width:1400px){ .logo img{ height:62px } .nav{ display:none } .menu-btn{ display:flex } .hero{ padding:4rem 0 3rem } .posts{ grid-template-columns:repeat(2,1fr) } .facebook-cta{ padding:0 0 4rem } } @media(max-width:560px){ .posts{ grid-template-columns:1fr } .heading{ display:block } .status{ margin-top:.35rem } .facebook-box{ padding:2rem 1.2rem } } .side-nav { position: fixed; right: 20px; top: 50%; transform: translateY(-50%) translateX(40px); background: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); border-radius: 20px; padding: 0.9rem 0.75rem; z-index: 1000; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; max-height: 80vh; overflow-y: auto; } .side-nav-logo { display: flex; align-items: center; justify-content: center; padding: 4px 0; } .side-nav-logo img { height: 76px; width: auto; object-fit: contain; display: block; } .side-nav-divider { width: 80%; height: 1px; background-color: var(--color-border); margin: 0.25rem 0; } .side-nav-list { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; width: 100%; } .side-nav-link { font-size: 0.825rem; font-weight: 600; color: var(--color-navy); padding: 0.3rem 0.75rem; border-radius: 24px; white-space: nowrap; width: 100%; text-align: center; } .side-nav-link:hover { background-color: var(--color-light-sage); color: var(--color-navy); } .side-nav-btn { padding: 0.55rem 0.9rem; font-size: 0.825rem; border-radius: 10px; white-space: nowrap; width: 100%; min-height: auto; } .news-loading-card { pointer-events: none; } .news-loading-card::before { content: ""; display: block; height: 210px; background: var(--color-light-sage); } .news-loading-card::after { content: ""; display: block; height: 132px; margin: 1.35rem; border-radius: 6px; background: linear-gradient( to bottom, var(--color-light-sage) 0 12px, transparent 12px 26px, var(--color-light-sage) 26px 38px, transparent 38px 52px, var(--color-light-sage) 52px 64px ); } @media (min-width: 851px) { body.is-scrolled .side-nav { opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(-50%) translateX(0); } } @media (min-width: 851px) and (max-width: 1500px) { main .container { transition: padding-right 0.35s ease; } body.is-scrolled main .container { padding-right: 210px; } } .mobile-floating-btn { display: none; } @media (max-width: 850px) { .mobile-floating-btn { position: fixed; right: 16px; bottom: 75px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid var(--color-border); border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); z-index: 999; cursor: pointer; opacity: 0; pointer-events: none; transform: scale(0.8); transition: opacity 0.3s ease, transform 0.3s ease; padding: 8px; } .mobile-floating-btn img { width: 100%; height: 100%; object-fit: contain; display: block; } body.is-scrolled .mobile-floating-btn { opacity: 1; pointer-events: auto; transform: scale(1); } }