/* Base site styles shared by every page. */ /* Page palette. The body is a warm off-white; the header (navbar) and footer use a slightly darker shade of the same tone to set them apart. */ body { background-color: #fdf6f0; position: relative; } /* Decorative background figures. An absolute layer spanning the full document height so the figures scroll with the content, drawn in the page's own text colour at low opacity — reading as a lighter tint of it. */ .page-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; color: var(--page-text); opacity: .13; } .page-bg svg { display: block; width: 100%; height: 100%; } .navbar, .footer, footer { background-color: #f6ebe1; } /* Great Vibes — self-hosted (SIL OFL, free). Used for the "E & H" brand. The relative url() is rewritten to a fingerprinted path by AssetMapper. */ @font-face { font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/great-vibes-58ItW7e.woff2") format('woff2'); } /* EB Garamond — self-hosted (SIL OFL, free). Readable body font for page content, paired with the Great Vibes script used on headings. */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-400-normal-JZwdOnb.woff2") format('woff2'); } @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-400-italic-heXfIqM.woff2") format('woff2'); } @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/eb-garamond-700-normal-nQKDBFc.woff2") format('woff2'); } /* Navbar brand — the "E & H" wedding monogram. The E and H are bold; the ampersand is smaller and lighter. */ .navbar-brand.brand-monogram { font-family: 'Great Vibes', cursive; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--page-text); } .brand-monogram .brand-amp { font-weight: 400; font-size: .6em; margin: 0 .1em; vertical-align: .1em; } /* Header (navbar), page content and footer all take their text colour from the --page-text CSS variable, which each page can override via the {% block page_text_color %} in its template (default set on ). */ .navbar, main, .footer, footer { color: var(--page-text); } /* Headings inside the content inherit the page colour too. */ main h1, main h2, main h3, main h4, main h5, main h6 { color: var(--page-text); } /* Page content: readable EB Garamond for body text, with the "E & H" brand script (Great Vibes) reserved for the headings. */ main { font-family: 'EB Garamond', Georgia, serif; font-size: 1.25rem; line-height: 1.6; } main h1, main h2, main h3, main h4, main h5, main h6 { font-family: 'Great Vibes', cursive; } main h1 { font-size: 4rem; } main h2 { font-size: 2.75rem; } main h3 { font-size: 2.25rem; } /* Centre the paragraph text on every page. */ main p { text-align: center; } /* Extra space under a paragraph that is immediately followed by a heading, so sections breathe before the next title. */ main p:has(+ h1), main p:has(+ h2) { margin-bottom: 2.5rem; } /* Centre all content sub-headings. */ main h2 { text-align: center; } /* Home page: enlarge the welcome message. */ .home-welcome p { font-size: 1.75rem; } /* Photo gallery — masonry columns of thumbnails that open a lightbox. */ .gallery-grid { columns: 4 240px; column-gap: 12px; } .gallery-item { display: block; margin: 0 0 12px; break-inside: avoid; border-radius: 6px; overflow: hidden; line-height: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } .gallery-item img { width: 100%; height: auto; display: block; transition: transform .35s ease, filter .35s ease; } .gallery-item:hover img, .gallery-item:focus img { transform: scale(1.05); filter: brightness(1.06); } /* Fullscreen lightbox (built by gallery.js, appended to ). */ .gallery-lightbox { position: fixed; inset: 0; z-index: 1080; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .88); } .gallery-lightbox.is-open { display: flex; } .gallery-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 4px; box-shadow: 0 6px 40px rgba(0, 0, 0, .6); } .gallery-lightbox button { position: absolute; background: none; border: none; color: #fff; cursor: pointer; font-size: 2.6rem; line-height: 1; padding: .2em .45em; opacity: .8; transition: opacity .2s ease; } .gallery-lightbox button:hover { opacity: 1; } .gallery-close { top: .3rem; right: .6rem; } .gallery-prev { left: .4rem; top: 50%; transform: translateY(-50%); } .gallery-next { right: .4rem; top: 50%; transform: translateY(-50%); } /* Keep the Leaflet map controls/attribution in a legible sans-serif. */ .leaflet-container { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 12px; } /* Numbered map markers, matching the numbered list under each map. */ .visit-marker { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #8b2f3f; color: #fff; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 700; font-size: 14px; line-height: 1; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); } /* Gold badge for the wedding venue (point 1 on both maps). */ .visit-marker--wedding { background: #d4af37; color: #4a3c00; } /* Numbered "N - place" list beneath each map (place links to Google Maps). */ .visit-poi-list { font-size: 1.1rem; line-height: 1.6; text-align: center; } /* Macaron colour vote (Preparation page): a histogram bar above each macaron. */ .macaron-vote { margin: 2.5rem 0 1.5rem; text-align: center; } .macaron-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 1rem; } .macaron-col { display: flex; flex-direction: column; align-items: center; } .macaron-hist { height: 74px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; } .macaron-count { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: .8rem; font-weight: 700; line-height: 1; color: var(--page-text); } .macaron-bar { display: block; width: 26px; height: 0; background: var(--page-text); opacity: .45; border-radius: 5px 5px 0 0; transition: height .5s ease, opacity .3s ease; } .macaron-btn { padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; transition: transform .2s ease; } .macaron-btn:not(:disabled):hover, .macaron-btn:not(:disabled):focus-visible { transform: translateY(-3px) scale(1.06); outline: none; } .macaron-btn:disabled { cursor: default; } .macaron { width: 78px; height: auto; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); transition: transform .3s ease, opacity .3s ease; } /* Once voted: highlight the visitor's own pick, dim the rest. */ .macaron-col.is-mine .macaron-bar { opacity: .85; } .macaron-col.is-mine .macaron { transform: scale(1.14); } .macaron-vote.has-voted .macaron-col:not(.is-mine) .macaron { opacity: .55; } .macaron-vote-status { margin-top: 1rem; min-height: 1.5em; font-weight: 600; } /* Accommodation list: dense data table, legible sans-serif at a compact size (the EB Garamond body font is too large/loose for tabular data). */ .accommodation-table { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: .9rem; } /* Match the table background to the page (Bootstrap defaults cells to white). */ .accommodation-table .table { --bs-table-bg: #fdf6f0; --bs-table-striped-bg: #fdf6f0; --bs-table-striped-color: inherit; } .accommodation-table th, .accommodation-table td { color: #333; text-align: left; vertical-align: middle; } .navbar .navbar-brand, .navbar .nav-link { color: var(--page-text); } .navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active { color: var(--page-text); opacity: .7; } /* Footer links (menu reminder + contact) take the page text colour. */ footer a { color: inherit; } .footer-menu a { margin: 0 .5rem; } .footer-sep { margin: 0 .35rem; opacity: .6; } /* Language flag button in the navbar. */ .lang-flag-btn { line-height: 0; } .flag-icon { display: block; width: 44px; height: auto; border: 1px solid rgba(0, 0, 0, .15); border-radius: 3px; } .lang-flag-btn:hover .flag-icon { opacity: .85; } /* Flags inside the language picker modal. */ .flag-icon-lg { width: 72px; height: auto; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; } .lang-option { color: inherit; } .lang-option:hover { background-color: var(--bs-tertiary-bg); } .lang-option.active { font-weight: 600; background-color: var(--bs-secondary-bg); } /* Visit page maps (Leaflet). z-index:0 keeps them under the navbar/modal. */ .visit-map { height: 440px; width: 100%; border-radius: .5rem; z-index: 0; } /* --------------------------------------------------------------------------- RSVP — navbar call-to-action, modal and form. Bootstrap's grid handles the responsive navbar collapse and the modal sizing, so nothing here needs an @media query. --------------------------------------------------------------------------- */ /* Rounded-rectangle CTA at the end of the navbar. Takes the page's own colour from --page-text (like every nav link and the brand), so it recolours per page — an outlined pill that fills on hover to still read as the primary action rather than just another nav link. */ .rsvp-btn { padding: .4rem 1.4rem; border: 1px solid var(--page-text); border-radius: 2rem; background-color: transparent; color: var(--page-text); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: background-color .2s ease, color .2s ease, transform .2s ease; } .rsvp-btn:hover, .rsvp-btn:focus-visible { background-color: var(--page-text); color: #f6ebe1; transform: translateY(-1px); } /* The modal chrome inherits the language modal's look; its body and every RSVP form use a legible sans-serif — the EB Garamond body font is too loose for form fields. */ .rsvp-modal .modal-body, .rsvp-form { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 1rem; line-height: 1.5; } /* Standalone modify page: cap the inline form near the modal-lg width so it does not stretch across the whole screen on desktop. */ .rsvp-edit { max-width: 720px; } .rsvp-intro { color: #555; text-align: left; margin-bottom: 1.25rem; } .rsvp-section { border: 0; margin: 0 0 1.5rem; padding: 0; } .rsvp-legend { float: none; width: auto; font-size: 1.05rem; font-weight: 600; color: #8b2f3f; margin-bottom: .6rem; padding: 0; } /* Stands in for a