/* terms-page-body.css */ /* ─── Local fonts — exact same family names as live site's main.css ─────────── */ /* Live site uses fast.fonts.net CDN which is domain-locked to cm.prudential.com.sg. We declare the same font-family names pointing to local woff files so computed styles match (WhatFont will show identical names). */ @font-face { font-family: 'Helvetica LT W01 Light'; font-style: normal; font-weight: 400; src: url('../../../../../../../../etc.clientlibs/prudential-aem-singapore/components/content/customhtmlpacs/v1/customhtml/clientlibs/pruadviser/resources/font/Helvetica-Light.woff2') format('woff2'), url('../../../../../../../../etc.clientlibs/prudential-aem-singapore/components/content/customhtmlpacs/v1/customhtml/clientlibs/pruadviser/resources/font/Helvetica-Light.woff') format('woff'); } @font-face { font-family: 'Lyon Display Web'; font-style: normal; font-weight: 700; src: url('../../../../../../../../etc.clientlibs/prudential-aem-singapore/components/content/customhtmlpacs/v1/customhtml/clientlibs/pruadviser/resources/font/LyonDisplay-Bold.woff2') format('woff2'), url('../../../../../../../../etc.clientlibs/prudential-aem-singapore/components/content/customhtmlpacs/v1/customhtml/clientlibs/pruadviser/resources/font/LyonDisplay-Bold.woff') format('woff'); } /* Override the global common ::-webkit-scrollbar (solid 8px gray) on the terms page so it auto-hides like the live site: transparent thumb when idle, visible only while scrolling (JS toggles .is-scrolling on ). Scoped via html:has() since the viewport scrollbar belongs to , an ancestor of .terms-page. */ html:has(.terms-page)::-webkit-scrollbar { width: 8px; } html:has(.terms-page)::-webkit-scrollbar-track { background: transparent; } html:has(.terms-page)::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; transition: background 0.3s; } html:has(.terms-page).is-scrolling::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.28); } html:has(.terms-page) { scrollbar-color: transparent transparent; } html:has(.terms-page).is-scrolling { scrollbar-color: rgba(0, 0, 0, 0.28) transparent; } .terms-page { --opus-copper: #da9c70; --opus-copper-dark: #b08163; --opus-dark: #393641; --opus-mid: #777584; --opus-cream: #efebe6; --opus-cream-2: #e8e4df; --opus-cream-3: #f5f3f0; --opus-white: #ffffff; /* Exact same font names as live site's main.css — loaded via fast.fonts.net CDN above. */ --font-body: 'Helvetica LT W01 Light', Helvetica, Arial, sans-serif; --font-title: 'Lyon Display Web', 'LD', Georgia, sans-serif; display: flex; flex-direction: column; /* min-height applied via JS only outside AEM edit mode */ font-family: var(--font-body); background: var(--opus-dark); color: var(--opus-dark); -webkit-font-smoothing: antialiased; } .terms-page *, .terms-page *::before, .terms-page *::after { box-sizing: border-box; margin: 0; padding: 0; } .terms-page img { display: block; max-width: 100%; } .terms-page a { color: var(--opus-copper-dark); text-decoration: none; } .terms-page a:hover { text-decoration: underline; } body { margin: 0; padding: 0; } /* ─── Header — logo centered (default, no nav) ───────────────────────────────── */ .terms-page .pa-terms-header { background: var(--opus-dark); padding: 22px 0; position: sticky; top: 0; z-index: 10; text-align: center; } .terms-page .pa-terms-header-inner { display: inline-block; } .terms-page .pa-terms-logo-link { display: inline-flex; flex-direction: column; align-items: center; line-height: 0; } .terms-page .pa-terms-logo-img { height: 52px; width: auto; } .terms-page .pa-terms-logo-text { font-family: var(--font-title); font-size: 22px; font-weight: 700; color: var(--opus-white); letter-spacing: 0.15em; } /* ─── Header — with nav (consent page) ──────────────────────────────────────── */ /* * Logo stays centered (as in the default terms header). * Nav is positioned absolute to the right so it never shifts the logo. */ .terms-page .pa-terms-header--has-nav { padding: 0; } .terms-page .pa-terms-header--has-nav .pa-terms-header-inner { position: relative; /* anchor for absolute nav */ display: flex; align-items: center; justify-content: center; /* logo stays centered */ width: 100%; min-height: 100px; padding: 0 180px; /* reserve space so long nav never overlaps logo */ } .terms-page .pa-terms-header--has-nav .pa-terms-logo-link { display: inline-flex; flex-direction: column; align-items: center; } .terms-page .pa-terms-header--has-nav .pa-terms-logo-img { height: 48px; } /* ── Nav list ────────────────────────────────────────────────────────────────── */ .terms-page .pa-terms-nav { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; } .terms-page .pa-terms-nav__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; } .terms-page .pa-terms-nav__item { position: relative; } .terms-page .pa-terms-nav__link { display: block; padding: 8px 16px; font-family: var(--font-body); font-size: 0.8125em; /* ~13px — matches live site */ font-weight: 700; letter-spacing: 0.04em; color: var(--opus-copper); text-decoration: none; white-space: nowrap; transition: color 0.2s; } .terms-page .pa-terms-nav__link:hover { color: var(--opus-white); text-decoration: none; } /* ── Burger (mobile only) ────────────────────────────────────────────────────── */ .terms-page .pa-terms-nav__burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; background: transparent; border: none; cursor: pointer; padding: 0; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); } .terms-page .pa-terms-nav__burger span { display: block; width: 22px; height: 2px; background: var(--opus-copper); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; } /* Full-height only in preview/publish — JS adds this class when not in AEM edit mode */ .terms-page--full-height { min-height: 100vh; } /* ─── Main ───────────────────────────────────────────────────────────────────── */ .terms-page .pa-terms-main { background: var(--opus-cream); flex: 1; /* pushes footer to bottom */ } /* ─── Container ──────────────────────────────────────────────────────────────── */ .terms-page .pa-terms-container { width: 100%; padding: 40px 25px 64px; } @media only screen and (min-width: 1024px) { .terms-page .pa-terms-container { width: 85%; padding: 60px 70px 80px; } } @media only screen and (min-width: 1440px) { .terms-page .pa-terms-container { width: 80%; padding: 60px 70px 80px; } } /* Consent page — full width, matches live .info-section padding */ .terms-page .pa-terms-container--full { width: 100% !important; padding: 50px 70px 80px !important; } @media only screen and (max-width: 767px) { .terms-page .pa-terms-container--full { padding: 28px 20px 48px !important; } } /* ─── Hide AEM screen-reader "opens in a new tab" injected span ──────────────── */ /* * AEM automatically appends opens in a new tab * to every target="_blank" link. Visually hidden via sr-only pattern. */ .terms-page .cmp-link__screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ─── Title ──────────────────────────────────────────────────────────────────── */ .terms-page .pa-terms-title { font-family: var(--font-body); /* Helvetica-LT = live's Helvetica LT W01 Light; title is a

on live, not h1 */ font-weight: 700; font-size: 1em; line-height: 1.3; color: var(--opus-dark); text-decoration: underline; text-underline-offset: 4px; margin-bottom: 28px; } /* Consent page title — larger, no underline, matches live .info-section h2 */ .terms-page .pa-terms-title--large { font-family: var(--font-body); font-size: 2em; font-weight: 700; text-decoration: none; margin-bottom: 32px; } @media only screen and (min-width: 1024px) { .terms-page .pa-terms-title--large { font-size: 3em; } } .terms-page .pa-terms-subtitle { font-size: 14px; color: var(--opus-mid); margin-bottom: 24px; line-height: 1.6; } /* ─── Body text ──────────────────────────────────────────────────────────────── */ .terms-page .pa-terms-body { font-size: 1em; line-height: 1.5; color: var(--opus-dark); counter-reset: terms-h2 terms-h3; } .terms-page .pa-terms-body p { margin-bottom: 12px; } /* ─── Headings ───────────────────────────────────────────────────────────────── */ .terms-page .pa-terms-body .pa-terms-h2 { font-family: var(--font-body); font-weight: 400; font-size: 1em; color: var(--opus-dark); text-decoration: underline; text-underline-offset: 3px; margin-top: 28px; margin-bottom: 16px; counter-increment: terms-h2; counter-reset: terms-h3; } .terms-page .pa-terms-body .pa-terms-h2::before { content: counter(terms-h2, upper-alpha) ". "; } .terms-page .pa-terms-body .pa-terms-h3 { font-family: var(--font-body); font-weight: 700; font-size: 1em; color: var(--opus-dark); margin-top: 20px; margin-bottom: 10px; counter-increment: terms-h3; } .terms-page .pa-terms-body .pa-terms-h3::before { content: counter(terms-h3) ". "; } .terms-page .pa-terms-body .pa-terms-h4 { font-family: var(--font-body); font-weight: 700; font-size: 1em; color: var(--opus-dark); margin-top: 28px; margin-bottom: 8px; } /* ─── Nested list (sub-items duoi ordered_list item) ─────────────────────────── */ .terms-page .pa-terms-ol li .pa-terms-sub-ul { list-style-type: square; margin-top: 4px; margin-bottom: 4px; padding-left: 20px; } /* ─── Lists ──────────────────────────────────────────────────────────────────── */ .terms-page .pa-terms-ol, .terms-page .pa-terms-ul { padding-left: 28px; margin-bottom: 16px; } .terms-page .pa-terms-ol { list-style-type: decimal; } .terms-page .pa-terms-ul { list-style-type: disc; } .terms-page .pa-terms-ol li, .terms-page .pa-terms-ul li { margin-bottom: 12px; line-height: 1.5; } .terms-page .pa-terms-defs { list-style: lower-alpha; padding-left: 96px; margin-bottom: 16px; border: none; } .terms-page .pa-terms-defs li { margin-bottom: 12px; line-height: 1.5; } .terms-page .pa-terms-defs strong { color: var(--opus-dark); } /* ─── Table ──────────────────────────────────────────────────────────────────── */ .terms-page .pa-terms-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 6px; } .terms-page .pa-terms-table { width: 100%; min-width: 360px; border-collapse: collapse; font-size: 0.85em; line-height: 1.5; } .terms-page .pa-terms-table th { background: #7f7f7f; color: var(--opus-white); font-weight: 700; padding: 10px 12px; text-align: center; border: 1px solid #555; vertical-align: middle; } .terms-page .pa-terms-table td { padding: 10px 12px; border: 1px solid #bbb; vertical-align: middle; text-align: center; } .terms-page .pa-terms-table td:first-child { text-align: left; } .terms-page .pa-terms-table-note { font-size: 0.8em; color: var(--opus-mid); margin-bottom: 20px; font-style: italic; } /* ─── Divider ────────────────────────────────────────────────────────────────── */ .terms-page .pa-terms-divider { border: none; border-top: 1px solid var(--opus-cream-2); margin: 32px 0; } /* ─── Important Notes ────────────────────────────────────────────────────────── */ .terms-page .pa-terms-notes { background: var(--opus-cream-3); border-left: 4px solid var(--opus-copper); padding: 18px 22px; margin-top: 36px; font-size: 0.8em; color: var(--opus-mid); line-height: 1.7; } .terms-page .pa-terms-notes p { margin-bottom: 10px; } .terms-page .pa-terms-notes p:last-child { margin-bottom: 0; } .terms-page .pa-terms-notes-title strong { font-weight: 700; color: var(--opus-dark); font-size: 1.1em; } /* ─── Footer ─────────────────────────────────────────────────────────────────── */ .terms-page .pa-terms-footer { background: var(--opus-dark); color: rgba(255,255,255,0.55); font-size: 13px; text-align: center; padding: 18px 24px; } /* Consent page keeps a dark strip even when footer text is omitted */ .terms-page--consent .pa-terms-footer--empty { min-height: 120px; padding: 0; } /* ─── Mobile ─────────────────────────────────────────────────────────────────── */ @media only screen and (max-width: 767px) { .terms-page .pa-terms-logo-img { height: 38px; } .terms-page .pa-terms-container { padding: 28px 20px 48px; } .terms-page .pa-terms-table th, .terms-page .pa-terms-table td { padding: 8px; font-size: 0.78em; } /* Header with nav — mobile: logo centered, burger top-right, nav dropdown */ .terms-page .pa-terms-header--has-nav .pa-terms-header-inner { padding: 0 56px 0 18px; /* right pad = burger width */ min-height: 100px; justify-content: center; } .terms-page .pa-terms-header--has-nav .pa-terms-logo-img { height: 60px; } /* Desktop nav hidden on mobile */ .terms-page .pa-terms-nav { position: fixed; top: 56px; right: 0; transform: none; background: var(--opus-dark); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; z-index: 100; } .terms-page .pa-terms-nav--open { max-height: 300px; border-top: 1px solid rgba(218, 156, 112, 0.25); } .terms-page .pa-terms-nav__list { flex-direction: column; align-items: flex-start; padding: 8px 0; } .terms-page .pa-terms-nav__link { padding: 14px 20px; border-bottom: 1px solid rgba(218, 156, 112, 0.15); font-size: 0.875em; } .terms-page .pa-terms-nav__item:last-child .pa-terms-nav__link { border-bottom: none; } /* Show burger */ .terms-page .pa-terms-nav__burger { display: flex; } } /* Lucky Draw (Opus T&C) — inherits base container width/font. */ .terms-page--lucky-draw .pa-terms-container { width: 100%; padding: 60px 25px 80px; } @media only screen and (min-width: 1024px) { .terms-page--lucky-draw .pa-terms-container { width: 85%; padding: 80px 70px 80px; } } @media only screen and (min-width: 1440px) { .terms-page--lucky-draw .pa-terms-container { width: 80%; padding: 80px 70px 80px; } } .terms-page--lucky-draw .pa-terms-body { font-size: 1em; line-height: 1.5; } .terms-page--lucky-draw .pa-terms-body .pa-terms-h2 { font-size: 1em; margin-top: 28px; margin-bottom: 16px; } .terms-page--lucky-draw .pa-terms-body .pa-terms-h3 { font-size: 1em; margin-top: 24px; margin-bottom: 12px; } .terms-page--lucky-draw .pa-terms-body .pa-terms-h4 { font-size: 1em; font-weight: 700; margin-top: 16px; margin-bottom: 8px; } .terms-page--lucky-draw .pa-terms-body p { margin-bottom: 16px; } .terms-page--lucky-draw .pa-terms-ol, .terms-page--lucky-draw .pa-terms-ul { padding-left: 28px; margin-bottom: 16px; } .terms-page--lucky-draw .pa-terms-defs { padding-left: 96px; margin-bottom: 16px; } .terms-page--lucky-draw .pa-terms-ol li, .terms-page--lucky-draw .pa-terms-ul li, .terms-page--lucky-draw .pa-terms-defs li { margin-bottom: 12px; line-height: 1.5; } .terms-page--lucky-draw .pa-terms-sub-ul { padding-left: 28px !important; } .terms-page--lucky-draw .pa-terms-table-wrap { margin-left: 0; } .terms-page--lucky-draw .pa-terms-table th, .terms-page--lucky-draw .pa-terms-table td { padding: 10px 14px; font-size: 1em; } /* Health Screening TnC only: make section labels bold, not underlined */ .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-main { background: #fff; } .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-container { box-sizing: border-box; width: calc(100vw - 16px); max-width: none; margin: 0 8px; padding: 0; } .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-body { font-family: Calibri, sans-serif; font-size: 17px; line-height: normal; color: #000; } .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-body p, .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-body li { color: #000; margin-bottom: 0; line-height: normal; } .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-defs { padding-left: 56px; margin-bottom: 0; } .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-defs > li { font-family: Times, serif; } .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-defs .pa-terms-ul { padding-left: 88px; margin-bottom: 0; } .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-defs .pa-terms-ul > li { font-family: Calibri, sans-serif; font-size: 17px; } .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-h3 + .pa-terms-ol { padding-left: 56px; margin-bottom: 0; } .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-h2 + .pa-terms-ol { padding-left: 16px; margin-bottom: 0; } .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-h2 + .pa-terms-ol > li { font-family: Calibri, sans-serif; font-size: 17px; line-height: 17px; margin-bottom: 13px; } .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-h2 + .pa-terms-ol .pa-terms-sub-ul > li { line-height: 17px; } .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-ol li .pa-terms-sub-ul { padding-left: 40px !important; } .terms-page--lucky-draw.terms-page--page-health-screening-tnc .pa-terms-body .pa-terms-h4 { font-weight: 700; text-decoration: none; } /* Legacy consent page: preserve the original browser-default typography/layout. */ .terms-page--consent.terms-page--page-consent .pa-terms-main { background: #fff; } .terms-page--consent.terms-page--page-consent .pa-terms-container { box-sizing: border-box; width: calc(100vw - 16px) !important; max-width: none; margin: 0 8px; padding: 0 !important; } .terms-page--consent.terms-page--page-consent .pa-terms-body { font-family: Times, serif; font-size: 16px; line-height: normal; color: #000; } .terms-page--consent.terms-page--page-consent .pa-terms-body p { margin-top: 16px; margin-bottom: 16px; color: #000; line-height: normal; } /* Legacy promotion/lucky-draw TnC pages: match the original full-width document. */ .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-main, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-main { background: #fff; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-container, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-container { box-sizing: border-box; width: calc(100vw - 16px); max-width: none; margin: 0 8px; padding: 0; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-body, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-body { font-family: Calibri, sans-serif; font-size: 17px; line-height: normal; color: #000; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-body p, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-body p { color: #000; line-height: normal; text-align: justify; margin-top: 15px; margin-bottom: 15px; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-body .pa-terms-h3 + p, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-body .pa-terms-h3 + p { margin-top: 0; margin-bottom: 0; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-defs, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-defs { padding-left: 56px; margin-bottom: 0; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-defs > li, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-defs > li { font-family: Times, serif; color: #000; line-height: normal; margin-bottom: 0; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-table-wrap, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-table-wrap { width: calc(100% - 56px); margin-left: 56px; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions p.pa-terms-table-note, .terms-page--lucky-draw.terms-page--page-terms-and-conditions p.pa-terms-table-note { font-family: Calibri, sans-serif; font-size: 15px; font-style: normal; line-height: normal; color: #000; text-align: justify; width: calc(100% - 56px); margin: 0 0 0 56px; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-body .pa-terms-h3 + .pa-terms-ol, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-body .pa-terms-h3 + .pa-terms-ol { padding-left: 80px; margin-bottom: 0; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-body .pa-terms-h3 + .pa-terms-ol > li, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-body .pa-terms-h3 + .pa-terms-ol > li { font-family: Times, serif; color: #000; line-height: normal; margin-bottom: 0; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-body .pa-terms-h2 + .pa-terms-ol, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-body .pa-terms-h2 + .pa-terms-ol { padding-left: 16px; margin-bottom: 0; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-body .pa-terms-h2 + .pa-terms-ol > li, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-body .pa-terms-h2 + .pa-terms-ol > li { font-family: Calibri, sans-serif; font-size: 17px; line-height: 17px; color: #000; margin-bottom: 13px; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-sub-ul > li, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-sub-ul > li { line-height: 17px; color: #000; margin-bottom: 0; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-h2 + .pa-terms-ol .pa-terms-sub-ul, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-h2 + .pa-terms-ol .pa-terms-sub-ul { padding-left: 40px !important; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-notes, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-notes { background: transparent; border: 0; padding: 0; margin-top: 0; font-family: Calibri, sans-serif; font-size: 15px; line-height: normal; color: #000; } .terms-page--lucky-draw.terms-page--page-legacy-promotion-terms-and-conditions .pa-terms-notes p, .terms-page--lucky-draw.terms-page--page-terms-and-conditions .pa-terms-notes p { margin: 0 0 0 24px; color: #000; line-height: normal; text-align: justify; }