/* ========================================================= common.css — shared by EVERY page Header, footer, base styles and reusable components live here. Page-specific styles stay in each page's own .css file. ========================================================= */ /* ---------- Design tokens (change colours in one place) ---------- */ :root { --green-dark: #0b5d1e; /* header + footer */ --pill-bg: #1e6b1e; /* green heading bars */ --page-bg: #f4f4f4; /* page background (each page may override) */ --gold: #ffd700; --link: #0b7a75; --teal: #1abc9c; --teal-dark: #16a085; --radius-pill: 30px; --font-main: Arial, Helvetica, sans-serif; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-main); background: var(--page-bg); } img { max-width: 100%; } /* Pages that were designed with zero default spacing add class="reset-spacing" on */ .reset-spacing :where(h1, h2, h3, h4, p, ul, ol, li) { margin: 0; padding: 0; } /* ---------- Layout helpers ---------- */ .container { width: min(92%, 960px); margin-inline: auto; } .card { background: #fff; padding: 30px; border-radius: 10px; margin-block: 30px; } /* ---------- Green heading bar (used by every page) ---------- */ .pill { margin: 0 0 20px; padding: 15px 20px; background: var(--pill-bg); color: #fff; text-align: center; font-weight: 700; line-height: 1.3; border-radius: var(--radius-pill); } .pill :is(h1, h2, h3) { margin: 0; color: #fff; } /* ========================================================= HEADER (markup is generated by site.js) ========================================================= */ .navbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 40px; background: var(--green-dark); } .navbar .logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .navbar .logo img { display: block; height: 50px; width: auto; } .menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 22px; } .menu a { padding: 6px 0; color: #fff; font-size: 14px; text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; } .menu a:hover, .menu a:focus-visible { color: var(--gold); } .menu a.active { color: var(--gold); border-bottom-color: var(--gold); } .download-btn { display: inline-block; flex-shrink: 0; padding: 10px 20px; background: var(--teal); color: #fff; font-family: inherit; font-size: 15px; font-weight: bold; text-decoration: none; border: none; border-radius: 6px; cursor: pointer; transition: background 0.3s; } .download-btn:hover { background: var(--teal-dark); } /* Hamburger button (only visible on small screens) */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 40px; padding: 0 9px; background: transparent; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 6px; cursor: pointer; } .nav-toggle span { display: block; height: 2px; background: #fff; transition: transform 0.25s, opacity 0.25s; } .navbar.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar.open .nav-toggle span:nth-child(2) { opacity: 0; } .navbar.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1100px) { .navbar { flex-wrap: wrap; padding: 12px 20px; } .download-btn { order: 2; margin-left: auto; } .nav-toggle { order: 3; display: flex; } .menu { order: 4; display: none; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding-top: 8px; } .navbar.open .menu { display: flex; } .menu a { padding: 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .menu a.active { border-bottom-color: var(--gold); } } @media (max-width: 480px) { .navbar .logo img { height: 40px; } .download-btn { padding: 8px 14px; font-size: 14px; } } /* ========================================================= FOOTER (markup is generated by site.js) ========================================================= */ .footer { padding: 20px 0; background: var(--green-dark); color: #fff; font-size: 14px; } .footer-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; max-width: 1100px; margin: 0 auto; padding: 0 20px; } .footer-left a { color: var(--gold); text-decoration: none; } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; } .footer-links a { color: #fff; font-weight: 500; text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(--gold); } .footer a:hover { text-decoration: underline; } @media (max-width: 768px) { .footer-container { flex-direction: column; text-align: center; } .footer-links { justify-content: center; } } /* Back-to-top button (appears after scrolling) */ .scroll-top { position: fixed; right: 20px; bottom: 20px; z-index: 50; padding: 10px 12px; background: #ffcc00; color: #000; font-size: 18px; line-height: 1; border: none; border-radius: 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s, background 0.3s; } .scroll-top.visible { opacity: 1; visibility: visible; } .scroll-top:hover { background: #ffaa00; }