/* ========================================================================== Wedding Prep Intensive — standalone bridal page. Deliberately separate from styles.css: this page has its own black-and-white identity and shares nothing with the coral/cream brand except the logo. ========================================================================== */ :root { --w-paper: #faf9f7; --w-ink: #111111; --w-muted: #5c5955; --w-rule: #111111; --w-band: #f1efec; --w-sans: "Montserrat", system-ui, sans-serif; --w-script: "Great Vibes", cursive; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--w-paper); color: var(--w-ink); font-family: var(--w-sans); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } /* ---- Header ------------------------------------------------------------- */ .w-header { display: flex; align-items: center; justify-content: center; padding: 20px 24px; background: var(--w-paper); } .w-header img { width: clamp(58px, 7vw, 76px); height: auto; } .w-header__back { position: absolute; left: clamp(16px, 3vw, 34px); top: 26px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--w-muted); text-decoration: none; } .w-header__back:hover { color: var(--w-ink); } /* Optional faint backdrop behind the invite — answers "is the background too plain?". Toggled by adding class="has-backdrop" to . */ body.has-backdrop { position: relative; } /* Confined to the invite and faded out above the details — the details section has no card behind it, so copy would sit straight on the photo. */ body.has-backdrop::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: min(1180px, 135vh); background: url("/assets/img/wedding-bg.jpg") center 30% / cover no-repeat; filter: brightness(0.78) contrast(1.06); opacity: 0.42; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); } body.has-backdrop > * { position: relative; z-index: 1; } /* ---- Invite frame ------------------------------------------------------- */ .w-invite { max-width: clamp(520px, 52vw, 640px); margin: 0 auto clamp(48px, 8vh, 96px); padding: clamp(16px, 2.4vw, 26px); } .w-invite__frame { border: 2px solid var(--w-rule); padding: clamp(26px, 4.5vw, 54px) clamp(20px, 4vw, 48px) 0; background: #ffffff; } .w-eyebrow { margin: 0 0 clamp(18px, 3vw, 30px); text-align: center; font-size: clamp(13px, 1.9vw, 21px); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; } /* Arch portrait. The source image already has the arch baked in on white, so the inner image is scaled up slightly to push those edges outside the mask. */ .w-arch { width: clamp(170px, 40%, 260px); margin: 0 auto; aspect-ratio: 3 / 3.5; overflow: hidden; border-radius: 999px 999px 0 0; } .w-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.06); } .w-title { margin: clamp(14px, 2.4vw, 22px) 0 0; text-align: center; line-height: 0.92; } .w-title__the, .w-title__intensive { display: block; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .w-title__the { font-size: clamp(18px, 2.8vw, 30px); } .w-title__intensive { font-size: clamp(24px, 4vw, 44px); } /* Single line, overlapping THE and INTENSIVE the way the invite mock-up does. Sized off the container so it never wraps. */ .w-title__script { display: block; margin: clamp(-14px, -1.8vw, -6px) 0; font-family: var(--w-script); font-weight: 400; font-size: clamp(44px, 12.5vw, 96px); line-height: 1.05; letter-spacing: 0.01em; white-space: nowrap; } .w-standfirst { margin: 0 calc(-1 * clamp(20px, 4vw, 48px)); margin-top: clamp(20px, 3.4vw, 34px); padding: clamp(20px, 3.4vw, 32px) clamp(24px, 5vw, 56px); background: var(--w-band); text-align: center; font-size: clamp(15px, 1.9vw, 19px); line-height: 1.65; } .w-invite__cta { padding: clamp(24px, 4vw, 36px) 0 clamp(26px, 4vw, 40px); text-align: center; } /* ---- Buttons ------------------------------------------------------------ */ .w-btn { display: inline-block; padding: 14px 34px; border: 0; border-radius: 999px; background: var(--w-ink); color: #ffffff; font-family: var(--w-sans); font-size: 12px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s ease, transform .3s ease; } .w-btn:hover { background: #3a3a3a; transform: translateY(-1px); } .w-btn--ghost { background: transparent; color: var(--w-ink); border: 1px solid var(--w-ink); } .w-btn--ghost:hover { background: var(--w-ink); color: #ffffff; } /* ---- Details ------------------------------------------------------------ */ .w-details[hidden] { display: none; } .w-details { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px) clamp(60px, 9vh, 110px); } .w-details__head { text-align: center; margin-bottom: clamp(28px, 4.5vh, 48px); } .w-details__title { margin: 0; line-height: 0.95; } .w-section-label { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--w-muted); } /* Package cards */ .w-packages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 34px); align-items: start; } .w-pack { position: relative; border: 1px solid rgba(17, 17, 17, 0.18); background: #ffffff; padding: clamp(24px, 3vw, 38px) clamp(20px, 2.6vw, 32px); } .w-pack--featured { border-color: var(--w-ink); border-width: 2px; } .w-pack__flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 4px 14px; background: var(--w-ink); color: #fff; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; } .w-pack__name { margin: 0 0 4px; font-size: clamp(17px, 2vw, 22px); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .w-pack__meta { margin: 0 0 16px; font-size: 13px; color: var(--w-muted); } .w-pack__price { margin: 0; font-size: clamp(30px, 3.6vw, 42px); font-weight: 300; letter-spacing: 0.01em; } .w-pack__per { margin: 2px 0 20px; font-size: 12.5px; color: var(--w-muted); } .w-pack__list { list-style: none; margin: 0 0 24px; padding: 0; } .w-pack__list li { padding: 11px 0 11px 16px; border-top: 1px solid rgba(17, 17, 17, 0.1); font-size: 13.5px; line-height: 1.55; text-indent: -16px; } .w-pack__list li::before { content: "—"; margin-right: 8px; color: var(--w-muted); } .w-pack__list strong { font-weight: 600; } .w-pack .w-btn { width: 100%; text-align: center; } /* Progress photo */ .w-progress { margin-top: clamp(44px, 7vh, 80px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .w-progress__copy p { font-size: 15px; line-height: 1.75; color: var(--w-muted); } .w-progress__copy p:first-child { color: var(--w-ink); } .w-progress img { width: 100%; border-radius: 4px; } .w-progress__caption { margin-top: 10px; font-size: 11.5px; letter-spacing: 0.06em; color: var(--w-muted); } /* ---- Footer ------------------------------------------------------------- */ .w-foot { padding: clamp(30px, 5vh, 56px) 24px clamp(40px, 6vh, 70px); border-top: 1px solid rgba(17, 17, 17, 0.12); text-align: center; } .w-foot a { color: var(--w-muted); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; } .w-foot a:hover { color: var(--w-ink); } /* ---- Responsive --------------------------------------------------------- */ @media (max-width: 820px) { .w-packages { grid-template-columns: 1fr; } .w-progress { grid-template-columns: 1fr; } .w-progress__copy { order: 2; } } @media (max-width: 420px) { .w-invite { padding: 10px; } .w-invite__frame { padding-left: 16px; padding-right: 16px; } .w-standfirst { margin-left: -16px; margin-right: -16px; padding-left: 20px; padding-right: 20px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .w-btn { transition: none; } }