/* =========================================================================== Agua Fria Events - the guest side (invitation, landing page). Colours and fonts arrive as custom properties set on from the theme, the same values the email uses. Google Fonts are layered on top for the web only, with the email-safe stack as the fallback. =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600&display=swap'); *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.invite { margin: 0; min-height: 100vh; background: var(--page); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; background-image: radial-gradient(ellipse at top, rgba(255,255,255,.10), transparent 60%); } .theme-navy, .theme-gala, .theme-botanical, .theme-sunset { --heading-web: 'Cormorant Garamond', var(--heading); } .theme-minimal { --heading-web: 'Inter', var(--heading); } .theme-botanical, .theme-sunset, .theme-minimal { --body-web: 'Inter', var(--body); } .theme-navy, .theme-gala { --body-web: var(--body); } .invite { font-family: var(--body-web, var(--body)); } .stage { min-height: 100vh; display: grid; place-items: center; padding: 28px 14px 48px; position: relative; } .muted { color: var(--muted); } .small { font-size: .88rem; } a { color: var(--accent); } /* --- The card ------------------------------------------------------------ */ .card { width: 100%; max-width: 620px; background: var(--card); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.15); overflow: hidden; text-align: center; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); } .card.wide { max-width: 720px; } .card.closed { opacity: 0; transform: translateY(40px) scale(.96); position: absolute; pointer-events: none; } .card.open { opacity: 1; transform: none; position: relative; } .card .hero { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; } .card-body { padding: 48px 44px 36px; } @media (max-width: 520px) { .card-body { padding: 36px 22px 28px; } body.invite { font-size: 16px; } } .mark { margin: 0 0 26px; } .mark img { display: inline-block; width: 170px; height: auto; background: #fff; padding: 8px 14px; border-radius: 6px; } .eyebrow { margin: 0 0 14px; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); } .card h1 { margin: 0 0 8px; font-family: var(--heading-web, var(--heading)); font-weight: 500; font-size: clamp(2rem, 6vw, 2.9rem); line-height: 1.12; color: var(--accent); } .tagline { margin: 0; font-family: var(--heading-web, var(--heading)); font-style: italic; font-size: 1.2rem; color: var(--muted); } .rule { width: 64px; height: 2px; background: var(--accent2); margin: 24px auto; } .date { margin: 0; font-family: var(--heading-web, var(--heading)); font-size: 1.45rem; } .time { margin: 4px 0 0; } .venue { margin: 16px 0 0; font-family: var(--heading-web, var(--heading)); font-size: 1.2rem; } .address { margin: 2px 0 0; font-size: .95rem; } .address a { color: var(--muted); } .prepared { margin: 0; } .lede { color: var(--muted); } .details { text-align: left; } .details p { margin: 0 0 1em; } .banner { padding: 10px 16px; font-size: .9rem; background: rgba(0,0,0,.06); color: var(--ink); } .banner.ok { background: #e8f5e9; color: #1b5e20; } .banner.warn { background: #fbf2f2; color: #8c2d2d; margin: 0 0 14px; border-radius: 8px; text-align: left; } .theme-gala .banner { background: rgba(255,255,255,.08); } .btn { display: inline-block; padding: 14px 34px; border-radius: 999px; border: 2px solid var(--accent); background: var(--accent); color: var(--accent-ink); text-decoration: none; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; font-family: inherit; } .btn:hover, .btn:focus-visible { filter: brightness(1.12); } .btn-outline { background: transparent; color: var(--accent); } .btn-big { width: 100%; padding: 16px; font-size: 1rem; margin-top: 18px; } .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; } :focus-visible { outline: 3px solid var(--accent2); outline-offset: 3px; } /* --- Reply form ---------------------------------------------------------- */ .rsvp { margin-top: 28px; text-align: left; } .rsvp h2, .reply-state h2 { font-family: var(--heading-web, var(--heading)); font-weight: 500; font-size: 1.6rem; margin: 0 0 14px; text-align: center; color: var(--accent); } .reply-state { margin-top: 28px; } .choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } @media (max-width: 420px) { .choice { grid-template-columns: 1fr; } } .choice-opt { position: relative; } .choice-opt input { position: absolute; opacity: 0; inset: 0; } .choice-opt span { display: block; text-align: center; padding: 16px 10px; border: 2px solid var(--accent2); border-radius: 10px; font-family: var(--heading-web, var(--heading)); font-size: 1.2rem; cursor: pointer; color: var(--ink); } .choice-opt input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .choice-opt input:focus-visible + span { outline: 3px solid var(--accent2); outline-offset: 3px; } .field { display: block; margin: 12px 0; } .field > span { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; } .field small { display: block; color: var(--muted); font-size: .8rem; margin-top: 4px; } .field input, .field select, .field textarea { width: 100%; padding: 11px 12px; border: 1px solid rgba(0,0,0,.25); border-radius: 8px; font: inherit; font-size: 1rem; background: rgba(255,255,255,.85); color: #111; } .theme-gala .field input, .theme-gala .field select, .theme-gala .field textarea { background: rgba(255,255,255,.08); color: var(--ink); border-color: rgba(255,255,255,.25); } .q-checks { display: flex; flex-direction: column; gap: 6px; } .q-checks label { display: flex; gap: 8px; align-items: center; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--ink); } .q-checks input { width: auto; } .q-inline { flex-direction: row; gap: 18px; } .q-other { margin-top: 8px; } .q-info { margin: 26px 0 6px; padding-top: 18px; border-top: 1px solid var(--accent2); } .q-info h3 { font-family: var(--heading-web, var(--heading)); font-weight: 500; font-size: 1.35rem; margin: 0 0 6px; color: var(--accent); } .q-info p { margin: 0; font-size: .95rem; color: var(--muted); } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 480px) { .two { grid-template-columns: 1fr; } } [hidden] { display: none !important; } .files { margin-top: 22px; } .files h3 { font-family: var(--heading-web, var(--heading)); font-weight: 500; font-size: 1.2rem; margin: 0 0 8px; color: var(--accent); } .file-link { display: inline-block; margin: 4px 8px; font-weight: 600; } .file-preview { display: block; max-width: 100%; margin: 8px auto 0; border-radius: 8px; border: 1px solid var(--accent2); } .qr { margin: 18px auto 6px; } .qr img { display: block; margin: 0 auto; background: #fff; padding: 10px; border-radius: 10px; border: 1px solid var(--accent2); } .qr figcaption { font-size: .85rem; color: var(--muted); margin-top: 8px; } .card-foot { padding: 14px 24px 20px; border-top: 1px solid var(--accent2); font-size: .78rem; color: var(--muted); display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .card-foot a { color: var(--muted); } /* --- The envelope -------------------------------------------------------- */ .envelope-wrap { text-align: center; transition: opacity .8s ease, transform .8s ease; } .envelope-wrap.gone { opacity: 0; transform: scale(.9); pointer-events: none; } .envelope { position: relative; display: block; width: min(92vw, 520px); aspect-ratio: 1.55; margin: 0 auto; border: 0; background: transparent; padding: 0; cursor: pointer; perspective: 1200px; filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); } .envelope > span { position: absolute; display: block; } .env-back { inset: 0; background: var(--envelope); border-radius: 10px; } .env-letter { left: 6%; right: 6%; top: 8%; bottom: 8%; background: var(--card); border-radius: 6px; display: grid; place-items: center; padding: 8%; transform: translateY(0); transition: transform 1s cubic-bezier(.2,.8,.2,1) .35s; box-shadow: 0 4px 14px rgba(0,0,0,.15); } .env-letter-title { font-family: var(--heading-web, var(--heading)); font-size: clamp(1.1rem, 3.6vw, 1.6rem); color: var(--accent); line-height: 1.15; } .env-front { inset: 0; border-radius: 10px; background: linear-gradient(to top left, var(--envelope) 0 50%, transparent 50.5%) right bottom / 50% 100% no-repeat, linear-gradient(to top right, var(--envelope) 0 50%, transparent 50.5%) left bottom / 50% 100% no-repeat, linear-gradient(to top, color-mix(in srgb, var(--envelope) 88%, black) 0 40%, transparent 40.5%) bottom / 100% 100% no-repeat; filter: brightness(.97); } .env-flap { left: 0; right: 0; top: 0; height: 52%; transform-origin: top; transform: rotateX(0deg); background: linear-gradient(to bottom, var(--liner) 0 50%, transparent 50%) top / 100% 200%; clip-path: polygon(0 0, 100% 0, 50% 100%); background-color: var(--envelope); filter: brightness(1.03); transition: transform .9s cubic-bezier(.4,0,.2,1); z-index: 3; backface-visibility: visible; } .env-seal { left: 50%; top: 50%; transform: translate(-50%, -30%); width: 64px; height: 64px; border-radius: 50%; z-index: 4; background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent2) 70%, white), var(--accent2) 60%, color-mix(in srgb, var(--accent2) 70%, black)); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--heading-web, var(--heading)); font-size: 1.3rem; letter-spacing: .06em; box-shadow: 0 3px 8px rgba(0,0,0,.35); transition: opacity .4s ease, transform .6s ease; } .theme-minimal .env-seal { color: #fff; } .env-hint { margin: 22px 0 4px; color: rgba(255,255,255,.85); letter-spacing: .2em; text-transform: uppercase; font-size: .78rem; } .env-to { margin: 0; color: rgba(255,255,255,.7); font-family: var(--heading-web, var(--heading)); font-size: 1.15rem; } .env-skip { display: inline-block; margin-top: 14px; color: rgba(255,255,255,.6); font-size: .8rem; } .theme-botanical .env-hint, .theme-sunset .env-hint, .theme-minimal .env-hint { color: rgba(0,0,0,.6); } .theme-botanical .env-to, .theme-sunset .env-to, .theme-minimal .env-to { color: rgba(0,0,0,.75); } .theme-botanical .env-skip, .theme-sunset .env-skip, .theme-minimal .env-skip { color: rgba(0,0,0,.5); } .envelope-wrap.opening .env-flap { transform: rotateX(180deg); z-index: 0; } .envelope-wrap.opening .env-seal { opacity: 0; transform: translate(-50%, -30%) scale(.4); } .envelope-wrap.opening .env-letter { transform: translateY(-46%); z-index: 2; } .envelope:hover .env-seal, .envelope:focus-visible .env-seal { transform: translate(-50%, -30%) scale(1.06); } @media (prefers-reduced-motion: reduce) { .card, .envelope-wrap, .env-flap, .env-letter, .env-seal { transition: none !important; } } @media print { body.invite { background: #fff; color: #000; } .card { box-shadow: none; } .envelope-wrap, .btn, .card-foot { display: none; } }