/* ============================================================ LEGAL PAGES — Terms of Service / Privacy Policy / Refund Policy Brand colours only: #A0174F / #DA256D pink family, #0B0E13 ink ============================================================ */ .lg-page { --lg-pri: #A0174F; --lg-pri2: #DA256D; --lg-ink: #0B0E13; --lg-head: #12151B; --lg-text: #3E4453; --lg-muted: #6A7080; --lg-bg: #FAF7F9; --lg-line: #F1E6EC; --lg-soft: #FDE7F0; --lg-offset: calc(var(--header-h, 74px) + 24px); } /* The site sets body{overflow-x:hidden}, which turns into its own scroll box and silently breaks position:sticky. "clip" cuts sideways overflow the same way without creating a scroll box. */ body.lg-page { overflow-x: clip; overflow-y: visible; } /* ---------- Hero ---------- */ .lg-hero { position: relative; overflow: hidden; background: var(--lg-ink); color: #fff; padding: calc(var(--topbar-h, 42px) + var(--header-h, 74px) + 46px) 0 58px; } .lg-hero::before { content: ""; position: absolute; left: -180px; bottom: -320px; width: 720px; height: 720px; background: radial-gradient(circle, rgba(218, 37, 109, .26), transparent 64%); pointer-events: none; } .lg-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; } .lg-bc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .62); margin-bottom: 18px; } .lg-bc a { color: rgba(255, 255, 255, .78); text-decoration: none; } .lg-bc a:hover { color: #fff; } .lg-bc i { font-size: 9px; opacity: .6; } .lg-bc__cur { color: #fff; font-weight: 600; } .lg-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 50px; background: rgba(218, 37, 109, .16); border: 1px solid rgba(218, 37, 109, .38); color: #FFB3CF; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .lg-hero h1 { font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: clamp(2.1rem, 4.2vw, 3.2rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: #fff; margin: 16px 0 14px; } .lg-hero__lead { color: rgba(255, 255, 255, .78); font-size: 1.05rem; line-height: 1.7; max-width: 560px; margin: 0 0 26px; } .lg-meta { display: flex; flex-wrap: wrap; gap: 10px; } .lg-meta > span, .lg-print { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 50px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .88); font: 500 13px/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .lg-meta i { color: #FF8DB8; } .lg-print { cursor: pointer; transition: background .2s, border-color .2s; } .lg-print:hover { background: var(--lg-pri2); border-color: var(--lg-pri2); color: #fff; } .lg-print:hover i { color: #fff; } .lg-hero__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 360px; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); } /* ---------- Layout ---------- */ .lg-main { background: var(--lg-bg); padding: 56px 0 90px; } .lg-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; } .lg-side { position: sticky; top: var(--lg-offset); max-height: calc(100vh - var(--lg-offset) - 20px); overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 18px; padding-bottom: 4px; } .lg-card { background: #fff; border: 1px solid var(--lg-line); border-radius: 18px; padding: 20px; box-shadow: 0 2px 14px rgba(17, 20, 28, .04); } .lg-card h4, .lg-toc summary { font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lg-head); margin: 0 0 12px; } /* Contents */ .lg-toc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: default; } .lg-toc summary::-webkit-details-marker { display: none; } .lg-toc summary i { color: var(--lg-pri); margin-right: 6px; } .lg-toc summary .lg-toc__chev { display: none; transition: transform .25s; } .lg-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .lg-toc li { margin: 0; padding: 0; } .lg-toc li::before { display: none; } .lg-toc a { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; color: #4A5060; font-size: 13.5px; font-weight: 500; line-height: 1.4; text-decoration: none; transition: background .2s, color .2s; } .lg-toc a:hover { background: #FDF3F7; color: var(--lg-pri); } .lg-toc__n { flex: 0 0 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #F4EDF1; color: var(--lg-muted); font-size: 11px; font-weight: 700; transition: background .2s, color .2s; } .lg-toc a.is-active { background: var(--lg-soft); color: var(--lg-pri); font-weight: 700; } .lg-toc a.is-active .lg-toc__n { background: var(--lg-pri); color: #fff; } /* Policy switcher (above the document) */ .lg-col { min-width: 0; } .lg-switch { display: flex; gap: 6px; padding: 6px; margin-bottom: 18px; background: #fff; border: 1px solid var(--lg-line); border-radius: 16px; box-shadow: 0 2px 14px rgba(17, 20, 28, .04); } .lg-switch a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 14px; border-radius: 12px; color: #3A404D; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; } .lg-switch a i { color: var(--lg-pri); font-size: 14px; } .lg-switch a:hover { background: #FDF3F7; color: var(--lg-pri); } .lg-switch a.is-cur, .lg-switch a.is-cur:hover { background: linear-gradient(135deg, var(--lg-pri), var(--lg-pri2)); color: #fff; box-shadow: 0 8px 18px -8px rgba(160, 23, 79, .6); } .lg-switch a.is-cur i { color: #fff; } .lg-switch__short { display: none; } /* Help */ .lg-help { background: var(--lg-ink); border-color: var(--lg-ink); } .lg-help h4 { color: #fff; } .lg-help p { color: rgba(255, 255, 255, .72); font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; } .lg-help__btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border-radius: 12px; background: linear-gradient(135deg, var(--lg-pri), var(--lg-pri2)); color: #fff !important; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: filter .2s, transform .2s; } .lg-help__btn + .lg-help__btn { margin-top: 8px; } .lg-help__btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .lg-help__btn--ghost { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); } /* ---------- Document ---------- */ .lg-doc { background: #fff; border: 1px solid var(--lg-line); border-radius: 22px; padding: 8px 52px 14px; box-shadow: 0 2px 18px rgba(17, 20, 28, .04); counter-reset: lgsec; min-width: 0; } .lg-sec { padding: 34px 0; border-bottom: 1px solid #F3EAEF; counter-increment: lgsec; } .lg-sec:last-child { border-bottom: 0; } .lg-doc h2 { display: flex; align-items: center; gap: 14px; font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1.38rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: var(--lg-head); margin: 0 0 16px; scroll-margin-top: var(--lg-offset); } .lg-doc h2::before { content: counter(lgsec, decimal-leading-zero); flex: 0 0 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--lg-soft); color: var(--lg-pri); font-size: 13px; font-weight: 800; letter-spacing: 0; } .lg-doc h3 { font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1.03rem; font-weight: 700; color: var(--lg-head); margin: 24px 0 8px; } .lg-doc p, .lg-doc li, .lg-doc dd { color: var(--lg-text); font-size: .97rem; line-height: 1.8; } .lg-doc p { margin: 0 0 14px; } .lg-doc p:last-child { margin-bottom: 0; } .lg-doc strong { color: var(--lg-head); font-weight: 700; } .lg-doc a { color: var(--lg-pri); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(160, 23, 79, .3); text-underline-offset: 3px; word-break: break-word; } .lg-doc a:hover { color: var(--lg-pri2); text-decoration-color: currentColor; } .lg-doc ul { list-style: none; margin: 4px 0 16px; padding: 0; } .lg-doc ul li { position: relative; padding-left: 28px; margin: 8px 0; } .lg-doc ul li::before { content: ""; position: absolute; left: 7px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--lg-pri2); box-shadow: 0 0 0 4px var(--lg-soft); } /* Definitions */ .lg-defs { margin: 6px 0 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); border-top: 1px solid #F3EAEF; } .lg-defs dt, .lg-defs dd { margin: 0; padding: 13px 0; border-bottom: 1px solid #F3EAEF; } .lg-defs dt { font-weight: 700; color: var(--lg-head); font-size: .95rem; padding-right: 20px; } /* Notes */ .lg-note { margin: 18px 0; padding: 15px 18px; border-radius: 12px; background: #FDF3F7; border: 1px solid #F7D6E3; border-left: 4px solid var(--lg-pri); color: #4A2A38; font-size: .95rem; line-height: 1.75; } .lg-note--strong { background: var(--lg-ink); border-color: var(--lg-ink); border-left-color: var(--lg-pri2); color: rgba(255, 255, 255, .9); } .lg-note--strong strong { color: #fff; } .lg-note a { color: inherit; } /* Contact block */ .lg-doc ul.lg-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .lg-doc ul.lg-contact li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--lg-bg); border: 1px solid var(--lg-line); font-size: .93rem; line-height: 1.55; } .lg-doc ul.lg-contact li::before { display: none; } .lg-doc ul.lg-contact li > i { flex: 0 0 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lg-soft); color: var(--lg-pri); font-size: 13px; } .lg-doc ul.lg-contact li > span { min-width: 0; padding-top: 6px; } .lg-empty { padding: 40px 0; text-align: center; color: var(--lg-muted); } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .lg-layout { grid-template-columns: 270px minmax(0, 1fr); gap: 28px; } .lg-doc { padding: 6px 38px 26px; } } @media (max-width: 960px) { .lg-page { --lg-offset: 88px; } .lg-hero { padding-bottom: 44px; } .lg-hero__grid { grid-template-columns: 1fr; gap: 30px; } .lg-hero__photo img { aspect-ratio: 16 / 9; max-height: 300px; } .lg-layout { display: flex; flex-direction: column; align-items: stretch; gap: 18px; } .lg-side, .lg-col { display: contents; } .lg-switch { order: 1; margin-bottom: 0; } .lg-toc { order: 2; } .lg-doc { order: 3; } .lg-help { order: 4; } .lg-toc summary { cursor: pointer; margin: 0; } .lg-toc[open] summary { margin-bottom: 12px; } .lg-toc summary .lg-toc__chev { display: inline-block; color: var(--lg-muted); margin: 0; } .lg-toc[open] summary .lg-toc__chev { transform: rotate(180deg); } .lg-main { padding: 28px 0 64px; } } @media (max-width: 640px) { .lg-hero { padding-top: calc(var(--topbar-h, 42px) + var(--header-h, 74px) + 26px); } .lg-hero__lead { font-size: .98rem; } .lg-meta > span, .lg-print { padding: 8px 12px; font-size: 12.5px; } .lg-doc { padding: 2px 20px 18px; border-radius: 18px; } .lg-sec { padding: 26px 0; } .lg-doc h2 { font-size: 1.14rem; gap: 12px; } .lg-doc h2::before { flex-basis: 34px; height: 34px; border-radius: 10px; font-size: 12px; } .lg-doc p, .lg-doc li, .lg-doc dd { font-size: .94rem; line-height: 1.75; } .lg-defs { grid-template-columns: 1fr; } .lg-defs dt { padding-bottom: 2px; border-bottom: 0; } .lg-defs dd { padding-top: 0; } .lg-doc ul.lg-contact { grid-template-columns: 1fr; } .lg-switch { gap: 4px; padding: 5px; } .lg-switch a { padding: 11px 6px; font-size: 13px; gap: 7px; } .lg-switch__long { display: none; } .lg-switch__short { display: inline; } } /* ---------- Print ---------- */ @media print { .pg-loader, .topbar, .header, header, .footer, .back-to-top, .lg-side, .lg-switch, .lg-hero__photo, .lg-meta .lg-print { display: none !important; } .lg-hero { background: #fff; color: #000; padding: 0 0 16px; } .lg-hero::before { display: none; } .lg-hero h1, .lg-bc__cur { color: #000; } .lg-hero__lead, .lg-bc, .lg-bc a, .lg-meta > span { color: #333; } .lg-tag { display: none; } .lg-hero__grid, .lg-layout { display: block; } .lg-main { background: #fff; padding: 0; } .lg-doc { border: 0; box-shadow: none; padding: 0; } .lg-note--strong { background: #f3f3f3; color: #000; } }