/* * Legal document template. * * Design tokens come from the Naxos parent theme so the page reads as part of * the site: Roboto, #111 headings, the active accent palette, the #212121 hero. * What is deliberately different is everything a long legal document needs and * a marketing page does not: a constrained measure, a persistent table of * contents, left-aligned headings, and a real print sheet. */ /* * The accent follows whichever palette the theme has active. Naxos ships eight * colour files and prints the active one as a color-* class on , so the * page picks up the site's accent instead of hard-coding one and drifting the * day somebody switches schemes. Defaults match the theme's own default (blue). */ body { --legal-accent: #7c4fe0; --legal-accent-dark: #5f36bb; --legal-ink: #16161a; --legal-body: #4c4c55; --legal-muted: #8a8a95; --legal-rule: #e7e7ee; --legal-rule-soft: #f1f1f6; --legal-surface: #fafafc; --legal-measure: 42em; --legal-offset: 104px; /* Clears the sticky navbar. */ } body.color-red { --legal-accent: #ff3d65; --legal-accent-dark: #df103b; } body.color-green { --legal-accent: #2aa275; --legal-accent-dark: #1f8760; } body.color-turquoise { --legal-accent: #46cad7; --legal-accent-dark: #006c77; } body.color-purple { --legal-accent: #d1397c; --legal-accent-dark: #8c1047; } body.color-orange { --legal-accent: #ee8f67; --legal-accent-dark: #ab4c24; } body.color-yellow { --legal-accent: #ffbe00; --legal-accent-dark: #e9ae01; } body.color-grey { --legal-accent: #656d78; --legal-accent-dark: #5a5e63; } /* ---------------------------------------------------------------- Hero --- */ .page-title--legal { height: auto; min-height: 400px; padding: 200px 0 90px; } .page-title--legal .container { padding-top: 0; padding-bottom: 0; } /* The parent theme colours page headings #111, which only works because its heroes always carry an image. This one is a flat dark panel. */ .page-title--legal .blog-title { padding: 0; max-width: 16em; margin: 0 auto; color: #fff; font-size: 2.5em; letter-spacing: -0.015em; } .page-title--legal .blog-info { max-width: 34em; margin: 18px auto 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); } .legal-eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--legal-accent); } /* --------------------------------------------------- Reading progress --- */ .legal-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; pointer-events: none; background: transparent; } .legal-progress__bar { display: block; height: 100%; width: 0; background: var(--legal-accent); transition: width 80ms linear; } /* -------------------------------------------------------------- Layout --- */ .legal .container { padding-top: 80px; padding-bottom: 100px; } .legal__layout { display: grid; grid-template-columns: 1fr; gap: 40px; } .legal__doc { min-width: 0; } .legal .legal__body { max-width: var(--legal-measure); } @media (min-width: 992px) { .legal__layout { grid-template-columns: 260px minmax(0, 1fr); gap: 72px; } } /* --------------------------------------------------- Table of contents --- */ .legal__aside { min-width: 0; } .legal-toc { border: 1px solid var(--legal-rule); border-radius: 10px; background: var(--legal-surface); overflow: hidden; } .legal-toc__heading { display: none; } .legal-toc__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 18px; border: 0; background: transparent; font-family: "Roboto", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--legal-ink); cursor: pointer; } .legal-toc__toggle-icon { width: 10px; height: 10px; border-right: 2px solid var(--legal-muted); border-bottom: 2px solid var(--legal-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s ease; } .legal-toc__toggle[aria-expanded="true"] .legal-toc__toggle-icon { transform: rotate(-135deg) translate(-2px, -2px); } .legal-toc__list { list-style: none; margin: 0; padding: 0 18px 18px; } .legal-toc__toggle[aria-expanded="false"] + .legal-toc__list { display: none; } .legal-toc__item { margin: 0; } .legal-toc__link { display: block; padding: 7px 0 7px 14px; border-left: 2px solid var(--legal-rule); font-size: 14px; line-height: 1.45; color: var(--legal-body); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; } .legal-toc__link:hover, .legal-toc__link:focus-visible { color: var(--legal-ink); border-left-color: var(--legal-muted); } .legal-toc__item--h3 .legal-toc__link { padding-left: 26px; font-size: 13px; color: var(--legal-muted); } .legal-toc__link[aria-current="true"] { color: var(--legal-accent); border-left-color: var(--legal-accent); font-weight: 500; } @media (min-width: 992px) { .legal-toc { position: sticky; top: var(--legal-offset); max-height: calc(100vh - var(--legal-offset) - 40px); overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 0; background: transparent; scrollbar-width: thin; scrollbar-color: var(--legal-rule) transparent; } .legal-toc::-webkit-scrollbar { width: 4px; } .legal-toc::-webkit-scrollbar-thumb { background: var(--legal-rule); border-radius: 4px; } .legal-toc::-webkit-scrollbar-track { background: transparent; } .legal-toc__heading { display: block; margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--legal-muted); } .legal-toc__toggle { display: none; } .legal-toc__toggle[aria-expanded="false"] + .legal-toc__list { display: block; } .legal-toc__list { padding: 0; } } /* ----------------------------------------------------------- Meta line --- */ .legal__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: var(--legal-measure); margin: 0 0 40px; padding-bottom: 18px; border-bottom: 1px solid var(--legal-rule); } .legal__updated { margin: 0; font-size: 13px; line-height: 1.5; letter-spacing: 0.02em; color: var(--legal-muted); } .legal__print { padding: 0; border: 0; border-bottom: 1px solid var(--legal-rule); background: none; font-family: "Roboto", sans-serif; font-size: 13px; font-weight: 500; color: var(--legal-body); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .legal__print:hover, .legal__print:focus-visible { color: var(--legal-accent); border-bottom-color: var(--legal-accent); } /* ------------------------------------------------------- Document body --- */ .legal .legal__body > *:first-child { margin-top: 0; } .legal .legal__body p { font-size: 17px; line-height: 1.75; color: var(--legal-body); margin: 0 0 1.35em; } .legal .legal__body p.legal-lede { font-size: 19px; line-height: 1.65; color: var(--legal-ink); margin-bottom: 1.6em; } .legal .legal__body strong, .legal .legal__body b { font-weight: 700; color: var(--legal-ink); } .legal .legal__body h2 { margin: 3.5em 0 0.9em; padding-top: 2.2em; border-top: 1px solid var(--legal-rule); font-size: 1.625em; line-height: 1.25; letter-spacing: -0.01em; color: var(--legal-ink); scroll-margin-top: var(--legal-offset); } .legal .legal__body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .legal .legal__body h3 { margin: 2.4em 0 0.75em; font-size: 1.0625em; line-height: 1.4; color: var(--legal-ink); scroll-margin-top: var(--legal-offset); } /* The source document underlined its sub-headings. Underline belongs to links, so the emphasis is carried by a short accent rule instead. */ .legal .legal__body h3::before { content: ""; display: block; width: 26px; height: 2px; margin-bottom: 10px; background: var(--legal-accent); border-radius: 2px; } /* Self-linking headings: revealed on hover, always reachable by keyboard. */ .legal-anchor { margin-left: 0.4em; font-weight: 400; color: var(--legal-accent); text-decoration: none; opacity: 0; transition: opacity 0.15s ease; } .legal .legal__body h2:hover .legal-anchor, .legal .legal__body h3:hover .legal-anchor, .legal-anchor:focus-visible { opacity: 1; } .legal .legal__body ul, .legal .legal__body ol { max-width: var(--legal-measure); margin: 0 0 1.6em; padding-left: 0; list-style: none; } .legal .legal__body li { position: relative; padding-left: 1.6em; margin-bottom: 0.7em; font-size: 17px; line-height: 1.7; color: var(--legal-body); } .legal .legal__body ul > li::before { content: ""; position: absolute; left: 0.3em; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--legal-accent); } .legal .legal__body ol { counter-reset: legal-ol; } .legal .legal__body ol > li { counter-increment: legal-ol; } .legal .legal__body ol > li::before { content: counter(legal-ol) "."; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--legal-accent); } /* Definitions section. */ .legal .legal__body dl { max-width: var(--legal-measure); margin: 0 0 1.6em; } .legal .legal__body dt { margin: 1.5em 0 0.4em; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--legal-ink); } .legal .legal__body dd { margin: 0; padding-left: 18px; border-left: 2px solid var(--legal-rule-soft); font-size: 17px; line-height: 1.7; color: var(--legal-body); } .legal .legal__body dd p { margin: 0; font-size: inherit; line-height: inherit; } .legal .legal__body a:not(.legal-anchor) { color: var(--legal-accent); text-decoration: underline; text-underline-offset: 2px; } .legal .legal__body a:not(.legal-anchor):hover { color: var(--legal-accent-dark); } /* ------------------------------------------------------- Contact block --- */ .legal__contact { max-width: var(--legal-measure); margin-top: 4em; padding: 32px 34px; border: 1px solid var(--legal-rule); border-radius: 12px; background: var(--legal-surface); } .legal__contact-title { margin: 0 0 8px; font-size: 1.25em; color: var(--legal-ink); } .legal__contact-text { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--legal-body); } /* --------------------------------------------------------- Back to top --- */ .legal-top { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--legal-accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; } .legal-top[hidden] { display: none; } .legal-top.is-visible { opacity: 1; transform: translateY(0); } .legal-top__icon { width: 9px; height: 9px; border-top: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(45deg) translate(2px, 2px); } /* ------------------------------------------------------- Small screens --- */ @media (max-width: 991.98px) { .page-title--legal { min-height: 300px; padding: 175px 0 60px; } .page-title--legal .blog-title { font-size: 1.875em; } .legal .container { padding-top: 56px; padding-bottom: 72px; } .legal .legal__body p, .legal .legal__body li, .legal .legal__body dt, .legal .legal__body dd { font-size: 16px; } .legal-anchor { display: none; } } @media (prefers-reduced-motion: reduce) { .legal-progress__bar, .legal-top, .legal-toc__link, .legal-toc__toggle-icon { transition: none; } } /* -------------------------------------------------------------- Print --- */ @media print { .header, .main-menu-area, .footer, footer, .legal__aside, .legal__print, .legal__contact, .legal-top, .legal-progress, .legal-eyebrow, .scroll-top, #trp-floater-ls { display: none !important; } .page-title--legal { min-height: 0; padding: 0 0 24px; background: none !important; border-bottom: 1pt solid #000; } .page-title--legal .col-12 { text-align: left !important; } .page-title--legal .blog-title, .page-title--legal .blog-info { color: #000 !important; max-width: none; } .legal .container { padding: 0; } .legal__layout { display: block; } .legal .legal__body, .legal .legal__body ul, .legal .legal__body ol, .legal .legal__body dl, .legal__meta { max-width: none; } .legal .legal__body p, .legal .legal__body li, .legal .legal__body dd, .legal .legal__body dt, .legal__updated { color: #000 !important; font-size: 10.5pt; line-height: 1.5; } .legal .legal__body h2, .legal .legal__body h3 { color: #000 !important; break-after: avoid; page-break-after: avoid; } .legal .legal__body h2 { font-size: 14pt; margin-top: 18pt; padding-top: 12pt; } .legal .legal__body h3::before { background: #000; } .legal .legal__body li, .legal .legal__body dd { break-inside: avoid; page-break-inside: avoid; } .legal-anchor { display: none; } .legal .legal__body a:not(.legal-anchor)::after { content: " (" attr(href) ")"; font-size: 9pt; } }