/*-------------------------------------------------------------- # Thank You Page # Scoped to .ty-page — loaded only on the "Thank You Page" template. # Figma source: node 4033:1236 (Thank You / Residential + Commercial) # # Design tokens used: # Background: #F5F0EB (site beige — already on ) # Card bg: #FFFFFF # Card radius: 24px # Text dark: #01011E # Link blue: #3D69DF # Heading: Hedvig Letters Serif 400 30px / 1.4em # Body: DM Sans 500 16px / 1.75em --------------------------------------------------------------*/ /* ── Page Wrapper ─────────────────────────────────────────── */ .ty-page { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 120px); /* subtract approx header height */ padding: 60px 24px; background-color: #F5F0EB; } /* ── Card ─────────────────────────────────────────────────── */ .ty-page__card { background-color: #FFFFFF; border-radius: 24px; width: 100%; max-width: 656px; } /* ── Card Inner (padding) ─────────────────────────────────── */ .ty-page__card-inner { display: flex; flex-direction: column; gap: 16px; padding: 50px 56px; } /* ── Heading ──────────────────────────────────────────────── */ .ty-page__heading { font-family: "Hedvig Letters Serif", serif; font-weight: 400; font-size: 3rem; line-height: 1.4em; color: #01011E; margin: 0; } /* ── Bold Intro Paragraph ─────────────────────────────────── */ .ty-page__bold-intro { font-family: "DM Sans", sans-serif; font-size: 1.6rem; line-height: 1.75em; color: #01011E; margin: 0; } .ty-page__bold-intro strong { font-weight: 700; color: #01011E; } /* ── Body Paragraphs ──────────────────────────────────────── */ .ty-page__paragraphs { display: flex; flex-direction: column; gap: 16px; } .ty-page__paragraphs p { font-family: "DM Sans", sans-serif; font-size: 1.6rem; line-height: 1.75em; color: #01011E; margin: 0; } /* ── Links Block ──────────────────────────────────────────── */ .ty-page__links-block { display: flex; flex-direction: column; gap: 8px; } .ty-page__links-label { font-family: "DM Sans", sans-serif; font-size: 1.6rem; line-height: 1.75em; color: #01011E; font-weight: 500; margin: 0; } .ty-page__links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .ty-page__links-list li { display: flex; align-items: center; gap: 8px; } /* Bullet dot before each link */ .ty-page__links-list li::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background-color: #01011E; flex-shrink: 0; } .ty-page__links-list a { font-family: "DM Sans", sans-serif; font-size: 1.6rem; line-height: 1.75em; color: #3D69DF; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out; } .ty-page__links-list a:hover { color: #2a52b8; text-decoration-color: #2a52b8; } /* ── Closing Text ─────────────────────────────────────────── */ .ty-page__closing { font-family: "DM Sans", sans-serif; font-size: 1.6rem; line-height: 1.75em; color: #01011E; font-weight: 500; margin: 0; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 768px) { .ty-page { padding: 40px 16px; min-height: calc(100vh - 80px); } .ty-page__card-inner { padding: 36px 28px; } .ty-page__heading { font-size: 2.4rem; } } @media (max-width: 480px) { .ty-page__card-inner { padding: 28px 20px; } }