/* ═══════════════════════════════════════════════════════════════════════════ wedding-modern-mono-flyer — styles.css A black & white, typography-led poster invitation. Monospace type · hairline rules · grid-paper texture · generous whitespace. Design tokens ─────────────────────────────────────────────────────────────────────── */ :root { --ink: #0c0c0e; --paper: #fcfcfb; --muted: #6b6b70; --hairline: rgba(12, 12, 14, 0.9); --gridline: rgba(12, 12, 14, 0.055); --font-mono: "Space Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --chrome-h: 3.25rem; /* top bar height */ --rail-w: 9.5rem; /* desktop right rail width */ --bottom-bar-h: 3.75rem; /* mobile bottom bar height */ --pad-x: clamp(1.25rem, 6vw, 6rem); --pad-y: clamp(3rem, 9vh, 6rem); --ease: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 0.28s; --t-slow: 0.55s; } /* ── Reset & base ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* main.js adds `js` to immediately; the brand footer (.app-footer) relies on it to know whether the shell is running (see BRAND FOOTER). */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 0.9375rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } img, svg { max-width: 100%; display: block; } [hidden] { display: none !important; } ::selection { background: var(--ink); color: var(--paper); } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* ── Shared labels (tiny, tracked-out uppercase) ─────────────────────── */ .k, .panel__index, .rsvp-countdown__label, .chrome, .panel-nav, .poster__eyebrow, .poster__sub, .poster__city, .poster__tag, .skip-link, .rsvp-field label, .guestbook-section label, .agenda__time, .rsvp-submit, .loading, .error { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.6875rem; font-weight: 700; } /* ── Skip link ────────────────────────────────────────────────────────── */ .skip-link { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 100; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; transform: translateY(-300%); transition: transform var(--t-fast) var(--ease); } .skip-link:focus { transform: none; } /* ═══════════════════════════════════════════════════════════════════════════ SHELL — single-viewport experience Without JS every panel is a normal block (page scrolls naturally). main.js adds `body.panels-on` which locks the shell to 100dvh and lets only the active panel scroll internally. ═══════════════════════════════════════════════════════════════════════ */ .shell { position: relative; } .panels > .panel { padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) + 1.5rem); } .panel--bleed { padding: 0 !important; } /* chrome + rail sit on top of everything */ .chrome, .panel-nav { position: fixed; z-index: 40; background: var(--paper); } .chrome { top: 0; left: 0; right: 0; height: var(--chrome-h); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--hairline); font-size: 0.625rem; letter-spacing: 0.22em; } .chrome__brand { display: flex; align-items: baseline; gap: 0.5em; min-width: 0; overflow: hidden; white-space: nowrap; } .chrome__amp { font-style: italic; font-weight: 700; } .chrome__sep { opacity: 0.45; } .chrome__sub { opacity: 0.55; font-weight: 400; } .chrome__counter { font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── Panels: static (no-JS) ───────────────────────────────────────────── */ .panel { position: relative; background: var(--paper); } .panel + .panel { border-top: 1px solid var(--hairline); } /* ── Panels: fixed shell (JS on) ──────────────────────────────────────── */ body.panels-on .shell { height: 100vh; height: 100dvh; overflow: hidden; } body.panels-on .panels { position: absolute; inset: 0; } body.panels-on .panel { position: absolute; inset: 0; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; border-top: 0; opacity: 0; visibility: hidden; transform: translateY(1.25rem); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow); } body.panels-on .panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } body.panels-on .panel::-webkit-scrollbar { width: 6px; } body.panels-on .panel::-webkit-scrollbar-thumb { background: var(--ink); } body.panels-on .panel::-webkit-scrollbar-track { background: transparent; } /* desktop: keep content clear of the right rail */ @media (min-width: 1024px) { body.panels-on .panels > .panel { padding-right: calc(var(--rail-w) + var(--pad-x)); } body.panels-on .panel--bleed { padding: 0 !important; } body.panels-on .poster { padding-right: var(--rail-w); } } /* ── Panel nav ────────────────────────────────────────────────────────── */ .panel-nav { display: flex; flex-direction: column; gap: 0; padding: 0; } .panel-nav__item, .panel-nav__print { display: flex; align-items: center; gap: 0.6rem; background: transparent; border: 0; cursor: pointer; text-align: left; color: var(--ink); padding: 0.8rem 1rem; font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; border-top: 1px solid var(--hairline); font-family: var(--font-mono); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .panel-nav__item:first-child { border-top: 0; } .panel-nav__num { font-variant-numeric: tabular-nums; opacity: 0.55; font-weight: 400; } .panel-nav__item.is-active, .panel-nav__item[aria-current="page"] { background: var(--ink); color: var(--paper); } .panel-nav__item.is-active .panel-nav__num { opacity: 0.75; } .panel-nav__item:hover { background: var(--ink); color: var(--paper); } .panel-nav__print { justify-content: center; gap: 0.5rem; margin-top: auto; } .panel-nav__print:hover { background: var(--ink); color: var(--paper); } .panel-nav__print .ph { font-size: 1rem; } /* desktop: vertical rail, right edge */ @media (min-width: 1024px) { .panel-nav { top: 50%; right: 0; transform: translateY(-50%); width: var(--rail-w); border: 1px solid var(--hairline); border-right: 0; } .panel-nav__item, .panel-nav__print { flex-direction: column; align-items: flex-start; } .panel-nav__item { padding: 1rem 1.25rem; } .panel-nav__label { font-weight: 400; } } /* mobile: bottom bar — labels are shown (small but readable) so every tab is self-explanatory; the active tab inverts. */ @media (max-width: 1023.98px) { .panel-nav { left: 0; right: 0; bottom: 0; flex-direction: row; justify-content: space-around; border-top: 1px solid var(--hairline); padding-bottom: env(safe-area-inset-bottom); } .panel-nav__item { flex: 1; flex-direction: column; gap: 0.1rem; justify-content: center; border-top: 0; padding: 0.55rem 0.2rem 0.6rem; line-height: 1.15; } .panel-nav__num { font-size: 0.5625rem; } .panel-nav__label { font-size: 0.5625rem; letter-spacing: 0.06em; white-space: nowrap; font-weight: 700; } .panel-nav__print { flex: 1; border-top: 0; border-left: 1px solid var(--hairline); margin-top: 0; } .panel-nav__print span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body.panels-on .panels > .panel { padding-bottom: calc(var(--pad-y) + var(--bottom-bar-h) + env(safe-area-inset-bottom)); } body.panels-on .panel--bleed { padding-bottom: 0 !important; } body.panels-on .poster { padding-bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom)); } } /* ═══════════════════════════════════════════════════════════════════════════ 01 · THE POSTER ═══════════════════════════════════════════════════════════════════════ */ .poster { position: relative; isolation: isolate; /* keep the photo backdrop behind the type */ min-height: 100%; display: flex; flex-direction: column; padding: calc(var(--chrome-h) + 1.25rem) var(--pad-x) 0; background-image: linear-gradient(to right, var(--gridline) 1px, transparent 1px), linear-gradient(to bottom, var(--gridline) 1px, transparent 1px); background-size: 3rem 3rem; } /* registration marks */ .reg { position: absolute; width: 1.125rem; height: 1.125rem; z-index: 2; } .reg::before, .reg::after { content: ""; position: absolute; background: var(--ink); } .reg::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); } .reg::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); } .reg--tl { top: var(--chrome-h); left: 0.75rem; } .reg--tr { top: var(--chrome-h); right: 0.75rem; } .reg--bl { bottom: 0.75rem; left: 0.75rem; } .reg--br { bottom: 0.75rem; right: 0.75rem; } /* optional photo backdrop behind the poster type (delete the
in index.html to remove — see README) */ .poster__photo { position: absolute; inset: 0; margin: 0; z-index: -1; pointer-events: none; } .poster__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: grayscale(1); opacity: 0.45; transition: opacity var(--t-slow) var(--ease); } /* a gentle reveal on hover: the photo "emerges" behind the names */ .poster:hover .poster__photo img { opacity: 0.6; } /* fade the photo back to paper toward the bottom so the meta strip stays crisp */ .poster__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(252, 252, 251, 0.08) 0%, rgba(252, 252, 251, 0) 30%, rgba(252, 252, 251, 0.35) 72%, rgba(252, 252, 251, 0.85) 100%); } /* photo missing (placeholder stripped on upload): fall back to the plain type-only poster */ .poster__photo.is-broken { display: none; } .poster__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .poster__head .panel__index { margin-bottom: 0; } .poster__tag { font-size: 0.6875rem; letter-spacing: 0.22em; font-weight: 700; opacity: 0.75; } .poster__hero { position: relative; /* anchor for the clickable photo hotspot */ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4vh 0; } /* clickable photo hotspot — covers the hero; opens the backdrop photo full size in the lightbox (see main.js initLightbox). Hidden by main.js when the backdrop is removed or broken. */ .poster__photo-btn { position: absolute; inset: 0; z-index: 3; display: block; padding: 0; border: 0; background: transparent; cursor: zoom-in; } .poster__photo-badge { position: absolute; top: 0.5rem; right: 0.5rem; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: var(--paper); border: 1px solid var(--hairline); opacity: 0.9; pointer-events: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); } .poster__photo-badge .ph { font-size: 1.1rem; } .poster__photo-btn:hover .poster__photo-badge, .poster__photo-btn:focus-visible .poster__photo-badge { background: var(--ink); color: var(--paper); opacity: 1; } .poster__eyebrow { opacity: 0.7; margin-bottom: clamp(1.25rem, 4vh, 2.5rem); } .poster__names { font-size: clamp(4.25rem, 15vw, 13.5rem); line-height: 0.92; letter-spacing: -0.02em; font-weight: 700; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; } .poster__amp { font-style: italic; font-size: 0.3em; line-height: 1; margin: 0.12em 0 0.1em; } .poster__sub { margin-top: clamp(1.5rem, 4vh, 2.75rem); opacity: 0.85; font-size: clamp(0.72rem, 1.5vw, 0.9rem); letter-spacing: 0.42em; text-indent: 0.42em; /* optically recenter tracked type */ } .poster__hero .poster__dateblock { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); margin: clamp(2rem, 6vh, 3.5rem) auto 0; } .poster__rule { flex: 1; border-top: 1px solid var(--ink); } .poster__date { font-size: clamp(2.9rem, 11vw, 9rem); line-height: 1; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: center; } .poster__city { margin-top: clamp(1.25rem, 3vh, 2rem); opacity: 0.85; font-size: clamp(0.72rem, 1.5vw, 0.9rem); letter-spacing: 0.42em; text-indent: 0.42em; } /* meta strip */ .poster__meta { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); margin-top: 3rem; } .poster__meta li { padding: 1.5rem clamp(1rem, 2vw, 2rem) 2rem; border-left: 1px solid var(--ink); } .poster__meta li:first-child { border-left: 0; } .poster__meta .k { display: block; opacity: 0.65; margin-bottom: 0.9rem; } .poster__meta .v { display: block; font-size: clamp(1.1rem, 2.2vw, 1.55rem); font-weight: 700; line-height: 1.2; margin-bottom: 0.5rem; } .poster__meta .d { display: block; font-size: 0.8rem; opacity: 0.75; } /* ticker */ .ticker { overflow: hidden; border-top: 1px solid var(--ink); margin-top: 3rem; background: var(--ink); color: var(--paper); } .ticker__track { display: inline-flex; white-space: nowrap; animation: ticker 26s linear infinite; will-change: transform; } .ticker__line { padding: 0.7rem 0; font-size: 0.6875rem; letter-spacing: 0.3em; text-transform: uppercase; } @keyframes ticker { to { transform: translateX(-50%); } } /* ═══════════════════════════════════════════════════════════════════════════ 02 · THE DETAILS ═══════════════════════════════════════════════════════════════════════ */ .details { max-width: 1080px; margin: 0 auto; } .panel__index { display: flex; gap: 0.6rem; align-items: baseline; opacity: 0.6; margin-bottom: clamp(1.75rem, 5vh, 3rem); } .panel__num { font-variant-numeric: tabular-nums; } .details__title, .rsvp-title, .guestbook-title, .film-title, .flyer-title { font-size: clamp(2.1rem, 6.5vw, 4.5rem); line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; font-weight: 700; } .details__lede, .film-description, .flyer-description { max-width: 52ch; margin-top: 1.25rem; font-size: clamp(1rem, 1.8vw, 1.2rem); opacity: 0.85; } .agenda { margin-top: clamp(2.5rem, 7vh, 4.5rem); border-top: 1px solid var(--ink); } .agenda li { display: grid; grid-template-columns: 10rem 1fr auto; gap: 1.5rem; align-items: baseline; padding: 1.4rem 0; border-bottom: 1px solid var(--hairline); transition: background var(--t-fast) var(--ease), padding var(--t-fast) var(--ease); } .agenda li:hover { background: rgba(12, 12, 14, 0.045); padding-left: 0.75rem; padding-right: 0.75rem; } .agenda__time { opacity: 0.6; } .agenda__what { font-size: clamp(1.05rem, 2.4vw, 1.6rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .agenda__where { font-size: 0.85rem; opacity: 0.8; text-align: right; } .notes { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin-top: clamp(2.5rem, 7vh, 4rem); } .notes li { padding: 1.5rem clamp(1.25rem, 3vw, 2.5rem); border-bottom: 1px solid var(--hairline); } .notes li:nth-child(odd) { border-right: 1px solid var(--ink); } .notes li:nth-last-child(-n + 2) { border-bottom: 0; } .notes .k { display: block; opacity: 0.6; margin-bottom: 0.6rem; } .notes .v { font-size: 1.05rem; line-height: 1.5; } .details__quote { margin-top: clamp(2.5rem, 7vh, 4rem); text-align: center; font-style: italic; font-size: clamp(1.05rem, 2.2vw, 1.5rem); opacity: 0.9; } /* optional photo gallery (delete
in index.html to remove — see README) */ .gallery { margin-top: clamp(2.5rem, 7vh, 4rem); border-top: 1px solid var(--ink); padding-top: 1.6rem; } .gallery__title { font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em; font-weight: 700; } .gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 1.75rem; } .gallery__item { min-width: 0; } .gallery__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--hairline); background: var(--paper); } /* the whole photo is a button — click opens it full size in the lightbox */ .gallery__btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; } .gallery__btn:focus-visible { outline-offset: -4px; } .gallery__frame.is-broken .gallery__btn { cursor: default; } .gallery__frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform var(--t-slow) var(--ease); } .gallery__item:hover .gallery__frame img { transform: scale(1.04); } .gallery__cap { margin-top: 0.65rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gallery__no { font-variant-numeric: tabular-nums; opacity: 0.55; margin-right: 0.6em; } /* image missing (placeholder stripped on upload): a styled label, never a broken icon */ .gallery__frame.is-broken::before { content: "YOUR PHOTO"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.55; } /* ═══════════════════════════════════════════════════════════════════════════ 03 · RSVP (form is ours; behaviour is the platform's) ═══════════════════════════════════════════════════════════════════════ */ .rsvp-inner { max-width: 780px; margin: 0 auto; } .rsvp-title { margin-bottom: 1.25rem; } .rsvp-description { opacity: 0.8; max-width: 52ch; } .guest-greeting { margin-top: 1.5rem; font-size: 1.05rem; font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 0.9rem 0; letter-spacing: 0.04em; } /* countdown (revealed by main.js only when a deadline exists) */ .rsvp-countdown { margin-top: 2.5rem; border: 1px solid var(--ink); padding: 1.5rem; } .rsvp-countdown__label { opacity: 0.6; margin-bottom: 1rem; } .rsvp-countdown__digits { display: flex; gap: clamp(1rem, 4vw, 3rem); } .rsvp-countdown__cell { display: flex; flex-direction: column; } .rsvp-countdown__cell span { font-size: clamp(1.9rem, 5vw, 3.2rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .rsvp-countdown__cell small { opacity: 0.6; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.625rem; margin-top: 0.5rem; } /* the form */ #rsvp-form { margin-top: 2.5rem; } .rsvp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.25rem; } .rsvp-field { margin-bottom: 2.25rem; } .rsvp-field--wide { grid-column: 1 / -1; } .rsvp-field label { display: block; margin-bottom: 0.55rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.6875rem; } .f-control { width: 100%; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; padding: 0.65rem 0.4rem; font-size: 1rem; color: var(--ink); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .f-control::placeholder { color: var(--muted); opacity: 0.75; } .f-control:focus { outline: none; background: var(--ink); color: var(--paper); } .f-control:focus::placeholder { color: rgba(252, 252, 251, 0.55); } textarea.f-control { resize: vertical; min-height: 4.5rem; line-height: 1.6; } /* selects: custom arrow, inverts with the field */ .f-select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230c0c0e' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.25rem center; padding-right: 2rem; } .f-select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fcfcfb' stroke-width='1.5'/%3E%3C/svg%3E"); } .f-select option { color: var(--ink); background: var(--paper); } /* platform inline errors (hidden until the platform writes text) */ .error { display: none; margin-top: 0.55rem; font-size: 0.6875rem; letter-spacing: 0.06em; background: var(--ink); color: var(--paper); padding: 0.35rem 0.65rem; line-height: 1.4; } .error:not(:empty) { display: block; } .error::before { content: "! "; font-weight: 700; } /* submit */ .rsvp-submit { display: block; width: 100%; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 1.05rem 1.5rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .rsvp-submit:hover { background: var(--paper); color: var(--ink); } .rsvp-submit:disabled { opacity: 0.45; cursor: default; } .rsvp-submit:focus-visible { outline-offset: 3px; } /* loading (shown/hidden by the platform — jQuery .show() sets an inline style that overrides this default) */ .loading { display: none; margin-top: 1.25rem; text-align: center; letter-spacing: 0.2em; opacity: 0.75; } .loading::before { content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-right: 0.6em; vertical-align: -0.15em; border: 1px solid var(--ink); border-top-color: transparent; border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* platform thank-you / closed state (injected into #rsvp-form) */ #rsvp-form .thank-you-message { border: 1px dashed var(--ink); padding: clamp(2rem, 6vh, 3.5rem) 1.5rem !important; text-align: center; margin-top: 1rem !important; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } #rsvp-form .thank-you-message h3 { font-size: clamp(1.5rem, 4vw, 2.4rem); letter-spacing: -0.01em; text-transform: uppercase; font-weight: 700; } #rsvp-form .thank-you-message p { opacity: 0.85; max-width: 46ch; } #rsvp-form .thank-you-message small { opacity: 0.6; } /* ═══════════════════════════════════════════════════════════════════════════ 05 · FILM (optional video embed — delete
in index.html to remove — see README) ═══════════════════════════════════════════════════════════════════════ */ .film-wrap { max-width: 780px; margin: 0 auto; } .film-figure { margin: 0; } .film-embed { position: relative; width: 100%; /* Cap by height so a tall phone screen never inflates the video; the 16/9 ratio is preserved (width caps first on phones). */ max-width: min(100%, calc(56vh * 16 / 9)); margin: 0 auto; aspect-ratio: 16 / 9; border: 1px solid var(--hairline); overflow: hidden; /* grid-paper while the embed loads — nothing ever looks broken */ background: linear-gradient(to right, var(--gridline) 1px, transparent 1px), linear-gradient(to bottom, var(--gridline) 1px, transparent 1px), var(--paper); background-size: 3rem 3rem; } .film-embed iframe, .film-embed video { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; } .film-cap { margin-top: 0.75rem; text-align: center; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; } .film-open { margin-top: 1.5rem; text-align: center; } .film-open a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.4rem; border: 1px solid var(--ink); background: transparent; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .film-open a:hover, .film-open a:focus-visible { background: var(--ink); color: var(--paper); } /* ═══════════════════════════════════════════════════════════════════════════ 06 · THE FLYER (optional showcase — delete
in index.html to remove — see README) ═══════════════════════════════════════════════════════════════════════ */ .flyer-wrap { max-width: 780px; margin: 0 auto; } /* reuses the gallery frame + caption; centered and capped in width so an already-designed flyer reads like a flyer */ .flyer-figure { max-width: 420px; margin: clamp(2rem, 5vh, 3rem) auto 0; } .flyer-cap { white-space: normal; text-align: center; } /* ═══════════════════════════════════════════════════════════════════════════ 07 · FREE PAGE (optional host-filled panel — see README) Repeatable blocks, each a free title + free text + an OPTIONAL photo. The panel ships hidden: the render engine removes the whole section when the host leaves every block empty (or toggles the Free Page section off), so the nav entry main.js syncs from this panel disappears with it. A block without a photo (engine removes .free-media) still renders cleanly as title + text. ═══════════════════════════════════════════════════════════════════════ */ .free-page { max-width: 780px; margin: 0 auto; } .free-blocks { margin-top: clamp(1.5rem, 4vh, 2.5rem); } .free-block { text-align: center; padding: clamp(2.25rem, 6vh, 3.5rem) 0; border-top: 1px solid var(--hairline); } .free-block:first-child { border-top: 0; padding-top: 0; } .free-title { font-size: clamp(1.9rem, 6vw, 3.2rem); line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; font-weight: 700; } .free-title:focus { outline: none; } /* optional photo — framed like a gallery moment (reuses .gallery__frame / .gallery__btn / .gallery__cap), mono and clickable into the lightbox */ .free-media { margin: clamp(1.5rem, 4vh, 2.5rem) auto; max-width: 420px; } .free-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.02); } .free-cap { white-space: normal; text-align: center; } .free-content { margin: 0 auto; max-width: 52ch; text-align: left; font-size: 1rem; line-height: 1.75; opacity: 0.85; white-space: pre-line; overflow-wrap: anywhere; } /* ═══════════════════════════════════════════════════════════════════════════ MEDIA LIGHTBOX (driven by main.js; optional — no-ops with no photo features). One shared viewer: the gallery, the flyer showcase and the poster photo. Full size, click-to-zoom + pan, prev/next per group, "Open full size" link, Esc / backdrop close. ═══════════════════════════════════════════════════════════════════════ */ .lightbox { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 2.5rem); background: rgba(12, 12, 14, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .lightbox.is-open { display: flex; } .lightbox__figure { margin: 0; max-width: min(920px, 94vw); } .lightbox__img { display: block; max-width: 100%; max-height: 74vh; margin: 0 auto; border: 1px solid rgba(252, 252, 251, 0.35); /* stays monochrome inside the design; the "Open full size" link shows the true, full-resolution original */ filter: grayscale(1); cursor: zoom-in; transition: transform var(--t-fast) var(--ease); } /* zoomed: the photo scales 2× and the viewer becomes a scrollable pane so guests can pan around — click the photo (or the zoom button / Z key) to toggle, click the dark backdrop to close. */ .lightbox.is-zoomed { align-items: flex-start; justify-content: flex-start; overflow: auto; -webkit-overflow-scrolling: touch; } .lightbox.is-zoomed .lightbox__img { max-width: none; max-height: none; transform: scale(2); transform-origin: 0 0; cursor: zoom-out; } .lightbox__cap { margin-top: 0.9rem; text-align: center; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); opacity: 0.9; } .lightbox__hint { margin-top: 0.5rem; text-align: center; font-size: 0.625rem; letter-spacing: 0.14em; color: rgba(252, 252, 251, 0.55); } .lightbox__original { margin: 1rem auto 0; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border: 1px solid rgba(252, 252, 251, 0.4); background: rgba(12, 12, 14, 0.55); color: var(--paper); font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; transition: background var(--t-fast) var(--ease); } .lightbox__original:hover { background: rgba(12, 12, 14, 0.9); } .lightbox__close, .lightbox__prev, .lightbox__next, .lightbox__zoom { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 0; border: 1px solid rgba(252, 252, 251, 0.4); background: rgba(12, 12, 14, 0.55); color: var(--paper); font-family: var(--font-mono); cursor: pointer; transition: background var(--t-fast) var(--ease); } .lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover, .lightbox__zoom:hover, .lightbox__close:focus-visible, .lightbox__prev:focus-visible, .lightbox__next:focus-visible, .lightbox__zoom:focus-visible { background: rgba(12, 12, 14, 0.95); } .lightbox__close { top: calc(0.75rem + env(safe-area-inset-top)); right: 0.75rem; font-size: 1.4rem; line-height: 1; } .lightbox__prev { left: 0.75rem; top: 50%; transform: translateY(-50%); font-size: 1.8rem; line-height: 1; } .lightbox__next { right: 0.75rem; top: 50%; transform: translateY(-50%); font-size: 1.8rem; line-height: 1; } .lightbox__zoom { bottom: calc(0.75rem + env(safe-area-inset-bottom)); right: 0.75rem; } .lightbox__zoom svg { width: 20px; height: 20px; } .lightbox__prev.is-hidden, .lightbox__next.is-hidden { display: none; } @media (max-width: 560px) { .lightbox__prev { left: 0.4rem; } .lightbox__next { right: 0.4rem; } } /* ═══════════════════════════════════════════════════════════════════════════ BRAND FOOTER (placeholder — main.js tucks it into the last existing panel) ═══════════════════════════════════════════════════════════════════════ */ html:not(.js) .app-footer { display: block; padding: 2rem var(--pad-x) calc(2rem + var(--bottom-bar-h) + env(safe-area-inset-bottom)); text-align: center; } html.js .app-footer { display: none; } html.js .panel .app-footer { display: block; margin-top: clamp(2.5rem, 7vh, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--hairline); text-align: center; } .footer-brand { margin: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } /* ── powered-by brand strip (full-width footer line) ─────────────────── A slim “Powered by Kundangi” line at the very foot of the invitation. This strip is static platform HTML — the engine swaps the literal Kundangi token for the platform name at render; it is NOT a morph field and must stay unbound. Full-width in the JS shell (tucked into the last panel by main.js, after the brand footer) and at the end of the stacked document without JS. */ html:not(.js) .powered-by { display: block; padding: 1rem var(--pad-x) calc(1rem + var(--bottom-bar-h) + env(safe-area-inset-bottom)); text-align: center; } html.js .powered-by { display: none; } html.js .panel .powered-by { display: block; width: 100%; text-align: center; margin-top: clamp(2rem, 6vh, 3.5rem); padding: 1rem 0 0.25rem; border-top: 1px solid var(--hairline); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); opacity: 0.7; } .powered-by .link-footer { color: var(--ink); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════════ 04 · GUESTBOOK (Style A mount — platform injects the form + list) ═══════════════════════════════════════════════════════════════════════ */ .guestbook-inner { max-width: 780px; margin: 0 auto; } .guestbook-title { margin-bottom: 1.25rem; } .guestbook-description { opacity: 0.8; max-width: 52ch; } /* injected functional block */ .guestbook-form { margin-top: 2.5rem; } #guestbookForm .form-group { margin-bottom: 2.25rem; } #guestbookForm label { display: block; margin-bottom: 0.55rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.6875rem; } #guestbookForm .form-control { width: 100%; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; padding: 0.65rem 0.4rem; font-size: 1rem; color: var(--ink); font-family: var(--font-mono); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } #guestbookForm textarea.form-control { resize: vertical; min-height: 5.5rem; line-height: 1.6; } #guestbookForm .form-control:focus { outline: none; background: var(--ink); color: var(--paper); } #guestbookForm .error { display: none; margin-top: 0.55rem; font-size: 0.6875rem; letter-spacing: 0.06em; background: var(--ink); color: var(--paper); padding: 0.35rem 0.65rem; } #guestbookForm .error:not(:empty) { display: block; } #guestbookForm .error::before { content: "! "; font-weight: 700; } .guestbook-chapta { margin: 1rem 0 1.75rem; } /* re-skin the platform's Bootstrap-ish button to match */ .guestbook-section .d-flex { display: flex; } .guestbook-section .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--ink) !important; color: var(--paper) !important; border: 1px solid var(--ink); border-radius: 0 !important; padding: 0.9rem 1.75rem !important; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; margin: 0 auto !important; margin-top: 0.5rem !important; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .guestbook-section .btn:hover { background: var(--paper) !important; color: var(--ink) !important; } .guestbook-section .btn:disabled { opacity: 0.45; cursor: default; } .guestbook-section .btn .ph { font-size: 1.05rem; } .loading-guestbook { margin-top: 1.25rem; text-align: center; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.6875rem; opacity: 0.75; } /* message list (overrides the injected inline styles) */ #comments-container { max-height: none !important; overflow: visible !important; border-top: 1px solid var(--ink) !important; margin-top: 2.75rem !important; padding-top: 0.5rem; } .guestbook-entry { padding: 1.4rem 0; border-bottom: 1px solid var(--hairline); overflow-wrap: anywhere; } .guestbook-entry h5 { margin: 0 0 0.4rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .guestbook-entry p { margin: 0 0 0.4rem; font-size: 0.9375rem; line-height: 1.65; } .guestbook-entry small { font-size: 0.6875rem; opacity: 0.6; letter-spacing: 0.08em; } .more-guestbook-wrap { margin-top: 1.75rem; text-align: center; } #load-more { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 0.75rem 1.75rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } #load-more:hover { background: var(--ink); color: var(--paper); } /* guestbook thank-you (injected) */ .guestbook-section .thank-you-message { border: 1px dashed var(--ink); padding: 2rem 1.5rem; text-align: center; } .guestbook-section .thank-you-message h4 { font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; margin-bottom: 0.5rem; } .guestbook-section .thank-you-message p { opacity: 0.85; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { .poster__meta { grid-template-columns: 1fr; } .poster__meta li { border-left: 0; border-top: 1px solid var(--ink); } .poster__meta li:first-child { border-top: 0; } .agenda li { grid-template-columns: 1fr; gap: 0.35rem; padding: 1.2rem 0; } .agenda__where { text-align: left; } .notes { grid-template-columns: 1fr; } .notes li:nth-child(odd) { border-right: 0; } .notes li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--hairline); } .notes li:last-child { border-bottom: 0; } /* gallery becomes a snap-scroll strip that bleeds to the screen edge; swiping it does not switch panels (see main.js touch guard) */ .gallery__grid { display: flex; gap: 1rem; margin-left: calc(var(--pad-x) * -1); margin-right: calc(var(--pad-x) * -1); padding: 0 var(--pad-x) 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .gallery__grid::-webkit-scrollbar { display: none; } .gallery__item { flex: 0 0 76vw; scroll-snap-align: start; } .gallery__item:hover .gallery__frame img { transform: none; } .rsvp-grid { grid-template-columns: 1fr; } } /* tablets: 4-up is too tight — drop the gallery to two columns */ @media (min-width: 761px) and (max-width: 1023.98px) { .gallery__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .chrome__sub { display: none; } .poster__tag { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ REDUCED MOTION ═══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } body.panels-on .panel { transition: none; } .ticker__track { transform: none !important; } .skip-link { transform: translateY(-300%); } } /* ═══════════════════════════════════════════════════════════════════════════ PRINT — a clean sheet per panel (poster + details); interactive parts (nav, chrome, ticker, RSVP, guestbook) are omitted. ═══════════════════════════════════════════════════════════════════════ */ @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body { background: #fff !important; } .chrome, .panel-nav, .ticker, .skip-link, .reg, .lightbox, .powered-by { display: none !important; } .panel--rsvp, .panel--guestbook, .panel--film { display: none !important; } body.panels-on .shell { height: auto !important; overflow: visible !important; } body.panels-on .panels { position: static !important; } body.panels-on .panel { position: static !important; inset: auto !important; height: auto !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; transform: none !important; padding: 1in 0.75in !important; page-break-after: always; } body.panels-on .panel:last-of-type { page-break-after: auto; } .poster { min-height: auto !important; padding: 0.5in 0 0.25in !important; background-image: none !important; } .poster__hero { padding: 0.5in 0; } .ticker { display: none !important; } .panel__index { margin-bottom: 0.75rem; } .gallery__item { page-break-inside: avoid; } }