. */ .f-section h2::after { content: ""; display: block; width: 48px; height: 1px; background: #a8917c; margin: 0.9rem auto 0; } .f-lede { text-align: center; color: #6b6455; font-style: italic; margin-bottom: 2rem; } /* --- Schedule -------------------------------------------------- */ .f-row { display: grid; grid-template-columns: 200px 1fr; /* time column, then details */ gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid #ddd7c8; } .f-row dt { font-style: italic; font-size: 1.25rem; color: #7a7365; } .f-row dd strong { display: block; font-weight: normal; font-size: 1.25rem; letter-spacing: 0.03em; } .f-row dd span { font-size: 1.25rem; color: #7a7365; } .f-note { margin-top: 2rem; text-align: center; font-size: 1.25rem; color: #6b6455; } /* --- Photos ---------------------------------------------------- */ /* A wider container for the grid. Same centering trick as .f-wrap. */ .f-wrap-wide { max-width: 1000px; margin: 0 auto; } .f-gallery { display: grid; /* auto-fill + minmax = a responsive grid with NO media queries. Read it as: "fit as many columns as you can, each at least 220px wide, and split any leftover space evenly among them." Wide screen -> 4 columns. Phone -> 1. It works itself out. */ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Fixed row height, so the grid geometry is predictable and every tile lines up. A landscape photo fills one row; a portrait one spans two. */ grid-auto-rows: 215px; grid-auto-flow: dense; /* backfill holes left by the taller tiles */ gap: 0.75rem; } /* The button is now the grid item. Strip its default chrome so it behaves like the plain box it looks like. */ .f-tile { display: block; padding: 0; border: 0; height: 100%; overflow: hidden; /* contains the hover zoom */ cursor: pointer; background: #e4e0d3; /* placeholder tone while the file downloads */ } /* :focus-visible shows the ring for keyboard users but not on mouse click, which is what you want -- never remove focus styling outright. */ .f-tile:focus-visible { outline: 2px solid #a8917c; outline-offset: 3px; } .f-gallery img { width: 100%; height: 100%; object-fit: cover; /* fill the tile, crop overflow, never squash */ object-position: center; /* which part survives the crop, when there is one */ display: block; transition: transform 0.35s ease; } .f-tile:hover img { transform: scale(1.05); } /* Portrait photos would be gutted by a landscape tile. class="tall" gives them two rows instead, so they keep roughly their own shape. */ .f-tile.tall { grid-row: span 2; } /* --- Lightbox -------------------------------------------------- */ #lightbox { position: fixed; inset: 0; z-index: 500; /* above the page, below the jumpscare's 999 */ display: none; place-items: center; /* grid shorthand for align+justify center */ background: rgba(22, 20, 17, 0.95); padding: 4rem 1rem 3rem; } #lightbox.active { display: grid; animation: fadein 0.2s ease-out; } /* Stops the page behind from scrolling while the lightbox is open. */ body.lb-open { overflow: hidden; } #lb-img { max-width: min(1100px, 92vw); max-height: 82vh; object-fit: contain; /* contain, not cover -- show the WHOLE photo here */ display: block; } .lb-btn { position: absolute; background: none; border: 0; color: #f6f3ed; cursor: pointer; opacity: 0.65; line-height: 1; font-family: Georgia, serif; padding: 0.5rem 0.9rem; } .lb-btn:hover, .lb-btn:focus-visible { opacity: 1; } .lb-close { top: 1rem; right: 1.25rem; font-size: 2.4rem; } .lb-prev { left: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 3.5rem; } .lb-next { right: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 3.5rem; } .lb-count { position: absolute; bottom: 1.25rem; left: 0; right: 0; text-align: center; color: #f6f3ed; opacity: 0.6; font-size: 0.8rem; letter-spacing: 0.15em; } @media (max-width: 560px) { .lb-prev, .lb-next { font-size: 2.4rem; } .lb-prev { left: 0; } .lb-next { right: 0; } } /* The placeholder box should span the whole grid, not sit in one cell. */ .f-gallery .f-embed-placeholder { grid-column: 1 / -1; } /* --- FAQ ------------------------------------------------------- */ /* Styled to echo the schedule rows: same 1px #ddd7c8 rule between items, same muted text color, so the two sections read as one system. */ .f-faq details { border-bottom: 1px solid #ddd7c8; } .f-faq summary { cursor: pointer; position: relative; padding: 1.1rem 2.5rem 1.1rem 0; /* right padding clears the +/- marker */ font-size: 1.25rem; letter-spacing: 0.01em; } /* Kill the browser's default disclosure triangle. Two rules are needed: list-style covers Firefox, the ::-webkit- pseudo covers Chrome/Safari. */ .f-faq summary { list-style: none; } .f-faq summary::-webkit-details-marker { display: none; } .f-faq summary:hover { color: #a8917c; } /* Custom marker, generated in CSS so the HTML stays clean. */ .f-faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; line-height: 1; color: #a8917c; } /* [open] is a real attribute the browser toggles for us -- no JS needed. */ .f-faq details[open] > summary::after { content: "\2212"; } /* minus sign */ .f-faq details > p { padding-right: 2.5rem; color: #6b6455; font-size: 0.95rem; line-height: 1.65; /* answers are prose; they need more room than headings */ } .f-faq details > p:last-child { padding-bottom: 1.3rem; } .f-faq details > p + p { margin-top: 0.7rem; } .f-faq details > p strong { color: #2e2b25; font-weight: normal; font-style: italic; } /* --- RSVP embed ------------------------------------------------ */ .f-embed { width: 100%; border: 1px solid #ddd7c8; background: #fff; } .f-embed-placeholder { border: 2px dashed #c4bcab; padding: 2.5rem 1.5rem; text-align: center; color: #6b6455; font-size: 0.92rem; } .f-embed-placeholder p + p { margin-top: 0.6rem; } .f-embed-placeholder code { font-family: "Courier New", monospace; background: #e4e0d3; padding: 0.1em 0.35em; } /* --- Registry -------------------------------------------------- */ .f-registry { list-style: none; } .f-registry li { padding: 1.1rem 0; border-bottom: 1px solid #ddd7c8; } .f-registry a { font-size: 1.15rem; color: #2e2b25; text-decoration: none; border-bottom: 1px solid #a8917c; } .f-registry a:hover { color: #a8917c; } .f-registry span { display: block; font-size: 0.88rem; color: #7a7365; margin-top: 0.25rem; } /* --- Footer ---------------------------------------------------- */ .f-footer { text-align: center; padding: 3rem 1.5rem; border-top: 1px solid #ddd7c8; font-size: 0.85rem; color: #7a7365; background: #dfe7d6 } .f-fine { margin-top: 0.5rem; font-size: 0.8rem; } .f-footer a { color: #7a7365; } /* --- Phones ---------------------------------------------------- */ @media (max-width: 560px) { .f-nav { gap: 1.5rem; } /* Stack the schedule instead of squeezing two columns into 320px. */ .f-row { grid-template-columns: 1fr; gap: 0.3rem; } } /* --------------------------------------------------------------- Accessibility: honor the OS "reduce motion" setting. Must be LAST in the file -- media queries add zero specificity, so these only override the rules above by virtue of source order. Test via DevTools: Ctrl+Shift+P -> "Emulate prefers-reduced-motion". --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #jumpscare.active { animation: none; /* disable animation for reduced motion */ } /* Fade in without the upward slide. The content still arrives, it just doesn't move. */ #formal { animation: fadein 0.5s ease-out; } /* No hover zoom, no lightbox fade. */ .f-gallery img { transition: none; } .f-tile:hover img { transform: none; } #lightbox.active { animation: none; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }