/* ========================================================================== The One Queens Bridge — landing page Built from Figma frames: TC: 1440 (node 1:2) / 768 (285:90) / 390 (285:191) EN: 1440 (2161:437) / 768 (2161:529) / 390 (2161:621) Breakpoints: desktop >=1024px, tablet 768-1023px, mobile <=767px ========================================================================== */ :root { --color-black: #000000; --color-white: #ffffff; --color-line-green: #39cd00; --color-submit-blue: #5a65ac; --color-input-border: #c2c2c2; --font-tc: 'Noto Sans TC', 'Noto Sans CJK TC', sans-serif; --font-en: Arial, Helvetica, sans-serif; /* ---- Desktop defaults (>=1024px), taken 1:1 from the 1440 frame ---- */ --header-pad-x: 48px; --logo-gap: 100px; --logo-pdg-w: 150px; --logo-pdg-h: 72px; --logo-one-w: 216px; --logo-one-h: 64px; --section-pad-x: 120px; --section-pad-y: 80px; --intro-gap: 48px; --desc2-gap: 48px; --heading-size: 32px; --body-size: 20px; --body-lh: 36px; --field-label-size: 20px; --field-label-lh: 36px; --line-pad: 12px; --line-icon: 50px; --line-font: 32px; --cta-gap: 60px; --form-gap: 24px; --code-w: 280px; --submit-h: 70px; --submit-font: 32px; --footer-pad-x: 120px; --footer-pad-y: 24px; --footer-gap: 24px; --footer-logo-h: 95px; --footer-divider-h: 109px; --footer-text: 24px; --footer-text-lh: 36px; } /* ---- Tablet (768–1023px), from the 768 frame ---- */ @media (max-width: 1023px) { :root { --header-pad-x: 60px; --logo-gap: 60px; --section-pad-x: 60px; --desc2-gap: 36px; --heading-size: 28px; --body-size: 16px; --body-lh: 36px; --field-label-size: 16px; --field-label-lh: 32px; --line-pad: 10px; --line-icon: 36px; --line-font: 28px; --code-w: 220px; --submit-h: 64px; --submit-font: 28px; --footer-pad-x: 60px; --footer-logo-h: 88px; } } /* ---- Mobile (<=767px), from the 390 frame ---- */ @media (max-width: 767px) { :root { --header-pad-x: 30px; --logo-gap: 36px; --logo-pdg-w: 90px; --logo-pdg-h: 42px; --logo-one-w: 116px; --logo-one-h: 36px; --section-pad-x: 30px; --desc2-gap: 24px; --cta-gap: 48px; --form-gap: 18px; --heading-size: 22px; --body-size: 12px; --body-lh: 22px; --field-label-size: 12px; --field-label-lh: 22px; --line-pad: 8px; --line-icon: 28px; --line-font: 18px; --submit-h: 56px; --submit-font: 22px; --footer-pad-x: 30px; --footer-gap: 16px; --footer-logo-h: 45px; --footer-divider-h: 64px; --footer-text: 12px; --footer-text-lh: 16px; } } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-tc); color: var(--color-white); background: var(--color-white); } img { display: block; max-width: 100%; } /* ---------- Language toggle behaviour ---------- */ /* Default state is TC (matches html[data-lang="tc"] on ). */ html[data-lang="tc"] .en { display: none; } html[data-lang="en"] .tc { display: none; } html[data-lang="en"] body { font-family: var(--font-en); } .lang-btn.is-active { font-weight: 700; text-decoration: underline; } /* ---------- Header ---------- */ .header { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px var(--header-pad-x); background: var(--color-white); } .lang-toggle { display: flex; align-items: center; gap: 10px; align-self: flex-end; } .lang-btn { appearance: none; border: none; background: none; cursor: pointer; padding: 12px; font-family: var(--font-tc); font-size: 12px; letter-spacing: 1.2px; color: var(--color-black); } .lang-divider { width: 1px; height: 25.5px; background: var(--color-input-border); } .logo-row { display: flex; align-items: center; justify-content: center; gap: var(--logo-gap); flex-wrap: wrap; } .logo--pdg { width: var(--logo-pdg-w); height: var(--logo-pdg-h); object-fit: contain; } .logo--theone { width: var(--logo-one-w); height: var(--logo-one-h); object-fit: contain; } /* ---------- Banner ---------- */ .banner { width: 100%; aspect-ratio: 16 / 9; /* consistent across all 3 Figma breakpoints */ overflow: hidden; } .banner__media { width: 100%; height: 100%; object-fit: cover; } /* ---------- Intro / Description (shared black block styles) ---------- */ .intro, .description { background: var(--color-black); padding: var(--section-pad-y) var(--section-pad-x); display: flex; flex-direction: column; align-items: center; gap: var(--intro-gap); text-align: center; } .intro__title { margin: 0; font-size: var(--heading-size); font-weight: 700; letter-spacing: 0.1em; max-width: 1200px; } .intro__text, .description p { margin: 0; font-size: var(--body-size); font-weight: 400; line-height: var(--body-lh); letter-spacing: 0.1em; max-width: 1200px; } .description--with-cta { gap: var(--desc2-gap); } /* ---------- Photos ---------- */ .photo { width: 100%; overflow: hidden; } .photo--1 { aspect-ratio: 16 / 9; } .photo--2 { aspect-ratio: 1440 / 880; } .photo img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 1023px) { .photo--2 { aspect-ratio: 768 / 484; } } @media (max-width: 767px) { .photo--2 { aspect-ratio: 390 / 242; } } /* ---------- Line CTA button ---------- */ .btn-line { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 890px; padding: var(--line-pad); background: var(--color-line-green); color: var(--color-white); text-decoration: none; font-weight: 700; font-size: var(--line-font); letter-spacing: 0.1em; text-align: center; } .btn-line__icon { width: var(--line-icon); height: var(--line-icon); flex-shrink: 0; } /* ---------- CTA Form ---------- */ .cta-form { background: var(--color-black); padding: var(--section-pad-y) var(--section-pad-x); display: flex; flex-direction: column; align-items: center; gap: var(--cta-gap); } .cta-form h2 { margin: 0; font-size: var(--heading-size); font-weight: 700; letter-spacing: 0.1em; text-align: center; max-width: 890px; } .lead-form { width: 100%; max-width: 890px; display: flex; flex-direction: column; gap: var(--form-gap); } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-size: var(--field-label-size); line-height: var(--field-label-lh); font-weight: 400; letter-spacing: 0.1em; } .field input, .field select { height: 57px; border: 1px solid var(--color-input-border); background: var(--color-white); color: var(--color-black); font-family: inherit; font-size: 18px; padding: 0 16px; } .field-row { display: flex; gap: 24px; } .field--code { width: var(--code-w); flex-shrink: 0; } .field--phone { flex: 1; min-width: 0; } @media (max-width: 767px) { .field-row { flex-direction: column; gap: var(--form-gap); } .field--code { width: 100%; } } .btn-submit { appearance: none; border: none; cursor: pointer; width: 100%; max-width: 890px; height: var(--submit-h); background: var(--color-submit-blue); color: var(--color-white); font-family: inherit; font-weight: 700; font-size: var(--submit-font); letter-spacing: 0.1em; } .btn-submit:hover { opacity: 0.9; } /* ---------- Footer ---------- */ .footer { background: var(--color-black); border-top: 1px solid var(--color-white); padding: var(--footer-pad-y) var(--footer-pad-x); display: flex; align-items: center; justify-content: center; gap: var(--footer-gap); flex-wrap: wrap; } .footer__logo { height: var(--footer-logo-h); width: auto; } .footer__divider { width: 1px; height: var(--footer-divider-h); background: var(--color-white); flex-shrink: 0; } .footer__partner { margin: 0; font-size: var(--footer-text); font-weight: 400; letter-spacing: 0.1em; line-height: var(--footer-text-lh); text-align: left; }