body { font-family: Quicksand } {} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } * { margin: 0; padding: 0; box-sizing: border-box; } :root { --navy: #2F4851; --teal: #3E9DBA; --gold: #E2A752; --sky-pale: #EBF6FC; --silver: #D5D8DB; --white: #FFFFFF; --body: #3D5560; } body { font-family: 'Quicksand', sans-serif; font-size: 17px; color: var(--body); background: var(--sky-pale); line-height: 1.75; min-height: 100vh; display: flex; flex-direction: column; } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .page { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vw, 48px) 20px; } .card { width: min(560px, 100%); background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(47, 72, 81, 0.08); animation: fadeUp 0.6s ease both; } .photo-wrap { aspect-ratio: 4 / 3; overflow: hidden; background: var(--silver); } .photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; } .content { padding: clamp(28px, 5vw, 40px) clamp(24px, 5vw, 36px) clamp(32px, 5vw, 44px); text-align: center; } .brand { font-family: 'PT Sans Narrow', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; } h1 { font-size: clamp(28px, 6vw, 36px); font-weight: 700; color: var(--navy); line-height: 1.2; margin-bottom: 14px; } .lead { font-size: 17px; color: var(--body); max-width: 42ch; margin: 0 auto 28px; } .divider { width: 48px; height: 3px; background: var(--gold); border-radius: 2px; margin: 0 auto 28px; } .next-steps { list-style: none; text-align: left; max-width: 36ch; margin: 0 auto 32px; display: flex; flex-direction: column; gap: 14px; } .next-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--navy); } .step-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--sky-pale); color: var(--teal); font-family: 'PT Sans Narrow', sans-serif; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .meta { font-family: 'PT Sans Narrow', sans-serif; font-size: 15px; letter-spacing: 0.04em; color: var(--navy); opacity: 0.7; margin-bottom: 24px; } .btn { display: inline-block; font-family: 'PT Sans Narrow', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--white); background: var(--gold); padding: 14px 28px; border-radius: 4px; transition: background 0.2s, transform 0.2s; } .btn:hover { background: #C58446; transform: translateY(-1px); } footer { font-family: 'PT Sans Narrow', sans-serif; font-size: 13px; letter-spacing: 0.04em; color: var(--navy); opacity: 0.55; text-align: center; padding: 20px; } @media (prefers-reduced-motion: reduce) { .card { animation: none; } } * { margin: 0; padding: 0; box-sizing: border-box; } :root { --navy: #2F4851; --teal: #3E9DBA; --gold: #E2A752; --sky-pale: #EBF6FC; --silver: #D5D8DB; --white: #FFFFFF; --body: #3D5560; --leading: 1.85; } body { font-family: 'Quicksand', sans-serif; font-size: 19px; color: var(--body); background: var(--sky-pale); line-height: var(--leading); min-height: 100vh; display: flex; flex-direction: column; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .page { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vw, 48px) 20px; } .card { width: min(800px, 100%); container-type: inline-size; container-name: thank-you; background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(47, 72, 81, 0.08); animation: fadeUp 0.6s ease both; --text-base: clamp(17px, 4.75cqw, 21px); --text-body: clamp(17px, 4.75cqw, 21px); --text-sm: clamp(15px, 4.2cqw, 18px); --text-lg: clamp(18px, 5.25cqw, 22px); --heading: clamp(26px, 8cqw, 42px); --btn-size: clamp(15px, 4.2cqw, 19px); } .photo-wrap { aspect-ratio: 4/3; overflow: hidden; background: var(--silver); } .photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1.5); transform-origin: center 30%; display: block; } .content { padding: clamp(20px, 6cqw, 40px) clamp(18px, 5cqw, 36px) clamp(24px, 7cqw, 44px); text-align: center; } .brand { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: clamp(22px, 3.5cqw, 17px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin-bottom: clamp(12px, 3cqw, 16px); } h1 { font-size: var(--heading); font-weight: 700; color: var(--navy); line-height: 1.2; margin-bottom: clamp(14px, 3.5cqw, 18px); } .lead { font-size: var(--text-lg); color: var(--body); max-width: 100%; margin: 0 auto clamp(20px, 5cqw, 28px); line-height: var(--leading); } .divider { width: 48px; height: 3px; background: var(--gold); border-radius: 2px; margin: 0 auto 28px; } .next-steps { list-style: none; text-align: left; max-width: 100%; margin: 0 auto clamp(24px, 6cqw, 32px); display: flex; flex-direction: column; gap: clamp(12px, 3.5cqw, 20px); } .next-steps li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--text-body); color: var(--navy); line-height: var(--leading); } .step-num { flex-shrink: 0; width: clamp(28px, 8cqw, 32px); height: clamp(28px, 8cqw, 32px); border-radius: 50%; background: var(--sky-pale); color: var(--teal); font-weight: 700; font-size: clamp(14px, 3.5cqw, 16px); display: flex; align-items: center; justify-content: center; margin-top: 4px; } .meta { font-family: 'PT Sans Narrow', sans-serif; font-size: var(--text-sm); letter-spacing: 0.02em; color: var(--navy); opacity: 0.85; margin-bottom: clamp(20px, 5cqw, 28px); line-height: var(--leading); max-width: 100%; margin-left: auto; margin-right: auto; } .meta a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; } .meta a:hover { color: var(--navy); } .btn { display: inline-block; font-weight: 700; font-size: var(--btn-size); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; color: var(--white); background: var(--gold); padding: clamp(14px, 3.5cqw, 18px) clamp(22px, 6cqw, 32px); min-height: clamp(50px, 12cqw, 56px); line-height: 1.35; border-radius: 6px; transition: background 0.2s, transform 0.2s; } .btn:hover { background: #C58446; transform: translateY(-1px); } footer { font-size: clamp(14px, 3.5vw, 17px); letter-spacing: 0.02em; color: var(--navy); opacity: 0.7; text-align: center; padding: clamp(18px, 4cqw, 24px) 20px; line-height: var(--leading); } @container thank-you (max-width: 420px) { .btn { display: block; width: 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { .card { animation: none; } }