/* ===================================================================== GreenCheckpoint.css All rules scoped to .gc-page — zero impact on the rest of the site. Link AFTER styles.css in the of GreenCheckpoint.html. ===================================================================== */ /* ── Page base ────────────────────────────────────────────────────────── */ .gc-page { background-color: #2E3D16; /* deep forest green page background */ color: #E8F0D8; /* soft off-white text */ } /* ── Navbar: dark on unscrolled state (no banner-image to auto-detect) ── */ .gc-page .site-header:not(.scrolled):not(.with-banner) { background-color: #1C2A0A; } .gc-page .site-header:not(.scrolled):not(.with-banner) .site-title { color: #FDFFFF; } .gc-page .site-header:not(.scrolled):not(.with-banner) .nav-menu a { color: #FDFFFF; } .gc-page .site-header:not(.scrolled):not(.with-banner) .nav-menu a:hover, .gc-page .site-header:not(.scrolled):not(.with-banner) .nav-menu a:focus { color: #A8C96A; } .gc-page .site-header:not(.scrolled):not(.with-banner) .nav-menu a.active { color: #FDFFFF; font-weight: 700; } /* ── Banner ───────────────────────────────────────────────────────────── */ .gc-banner { background-color: #425C1F; display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; width: 100%; } .gc-banner-logo { max-width: 340px; width: 100%; height: auto; display: block; } /* ── Main content area ────────────────────────────────────────────────── */ .gc-page .main-content { background-color: #2E3D16; } .gc-page article { color: #E8F0D8; } /* ── Headings ─────────────────────────────────────────────────────────── */ /* h1/h2/h3 already use Press Start 2P from styles.css; just recolour */ .gc-page h1, .gc-page h2, .gc-page h3 { color: #A8C96A; /* lime-green accent */ } /* ── Description block ────────────────────────────────────────────────── */ .gc-description { max-width: 780px; margin: 2.5rem auto 3.5rem; font-size: 1rem; line-height: 1.8; text-align: center; color: #D4E8B0; } /* ── Meme feed ────────────────────────────────────────────────────────── */ /* TO ADD A NEW MEME: Inside the
in GreenCheckpoint.html, paste one new line: Brief description That's it. The grid handles the rest automatically. */ .gc-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0 4rem; } .gc-meme { width: 100%; aspect-ratio: 4 / 3; /* landscape — adjust per image with object-position if needed */ object-fit: cover; border-radius: 0.25rem; display: block; transition: opacity 0.2s ease; cursor: zoom-in; /* lightbox-ready if .pht-photo-grid is ever added */ } .gc-meme:hover { opacity: 0.88; } /* ── Footer ───────────────────────────────────────────────────────────── */ .gc-page .site-footer { background-color: #1C2A0A; color: #A8C96A; } .gc-page .site-footer p { color: #A8C96A; } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 768px) { .gc-feed { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .gc-description { font-size: 0.9rem; padding: 0 1rem; } .gc-banner-logo { max-width: 240px; } } @media (max-width: 480px) { .gc-feed { grid-template-columns: 1fr; gap: 1rem; } .gc-banner { padding: 2rem 1.5rem; } }