/* ========================================================================== SHANTHA HI TECH — LEGAL PAGES css/legal.css Shared by terms.html, privacy.html and refund.html. Deliberately light, unlike enquire.css's full-bleed black. These are the only long-form reading documents on the site — several thousand words of clause text — and dark-on-light at a constrained measure is materially easier to read at that length than the reverse. It also matches the .surface-light register services/website/marketing already use, so the shift reads as "document", not "different site". Tokens mirror css/website.css exactly so the three legal pages sit in the same type and spacing system as everything else. No JS beyond the shared header — the contents rail is plain anchor links with CSS position: sticky, so it works with scripting off. ========================================================================== */ :root { --paper: #ffffff; --paper-2: #f8f7f5; --paper-3: #f1efeb; --charcoal: #1a1a1a; --ink: #2e2e2e; --muted: #6f6f6f; --line: #e3e1dc; --deep: #131313; --on-deep: #ffffff; --on-deep-muted: rgba(255, 255, 255, 0.62); --line-deep: rgba(255, 255, 255, 0.12); --font: "Clarkson", "Helvetica", Helvetica, Arial, sans-serif; --t-xs: 12px; --t-sm: 14px; --t-base: 16px; --t-lg: clamp(17px, 0.3vw + 16px, 19px); --t-xl: clamp(20px, 0.9vw + 17px, 26px); --t-3xl: clamp(30px, 3.6vw + 16px, 56px); --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --gutter: 24px; /* Narrower than the 1280px the marketing pages use. Those are full-bleed layouts; this is a reading column plus a rail, and at 1280 the pair sat visibly left of centre with dead space to their right. 1040 wraps the rail + measure snugly so the block reads as centred and deliberate. */ --container: 1040px; --r-btn: 4px; --r-card: 10px; --ease: cubic-bezier(0.645, 0.045, 0.355, 1); --fast: 200ms; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } img { display: block; max-width: 100%; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The masthead scrolls away with the page (it is only fixed on pages that opt into .header-overlay, which these do not), so anchor targets just need breathing room, not a full header's worth of offset. */ scroll-padding-top: var(--s4); } body { background-color: var(--paper); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } :focus-visible { outline: 2px solid var(--charcoal); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; top: -80px; left: 16px; z-index: 300; padding: 16px 24px; background: var(--charcoal); color: var(--paper); border-radius: var(--r-btn); font-size: var(--t-sm); } .skip-link:focus { top: 16px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* ========================================================================== DOCUMENT HEAD The masthead is in normal flow here (no .header-overlay on ), so it already occupies its own height — this only needs its own breathing room, not a reserved header offset. ========================================================================== */ .legal-hero { padding-top: var(--s6); padding-bottom: var(--s6); border-bottom: 1px solid var(--line); background-color: var(--paper-2); } .legal-hero__eyebrow { display: block; font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); } .legal-hero__title { max-width: 18ch; font-size: var(--t-3xl); font-weight: 300; letter-spacing: -0.035em; line-height: 1.06; color: var(--charcoal); } .legal-hero__sub { max-width: 58ch; margin-top: var(--s3); font-size: var(--t-lg); line-height: 1.55; color: var(--muted); } .legal-hero__meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s4); font-size: var(--t-sm); color: var(--muted); } .legal-hero__meta b { font-weight: 500; color: var(--ink); } /* ========================================================================== DOCUMENT LAYOUT Contents rail left, clause body right. The rail is sticky on desktop and collapses above the body on narrow screens, where a fixed side column would eat the measure the document depends on. ========================================================================== */ .legal-body { display: grid; grid-template-columns: 1fr; gap: var(--s6); padding-top: var(--s6); padding-bottom: var(--s7); } .legal-toc__title { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); } .legal-toc__list { display: flex; flex-direction: column; border-left: 1px solid var(--line); } .legal-toc__list a { display: block; padding: 7px 0 7px var(--s2); margin-left: -1px; border-left: 1px solid transparent; font-size: var(--t-sm); line-height: 1.4; color: var(--muted); transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); } .legal-toc__list a:hover { color: var(--charcoal); border-left-color: var(--charcoal); } /* The reading column. ~72ch is the measure the clause text is set for — wider and the eye loses the line return on a dense numbered list. */ .legal-doc { max-width: 72ch; } .legal-doc__section + .legal-doc__section { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line); } .legal-doc__h { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--t-xl); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; color: var(--charcoal); margin-bottom: var(--s3); } .legal-doc__n { flex: none; font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.08em; color: var(--muted); /* Optically aligns the numeral with the cap-height of the heading beside it rather than its baseline, which sat low against the larger type. */ transform: translateY(-0.15em); } .legal-doc p { font-size: var(--t-base); line-height: 1.7; color: var(--ink); } .legal-doc p + p { margin-top: var(--s2); } .legal-doc__list { margin-top: var(--s2); display: flex; flex-direction: column; gap: var(--s1); } .legal-doc__list li { position: relative; padding-left: var(--s3); font-size: var(--t-base); line-height: 1.7; color: var(--ink); } .legal-doc__list li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 1px; background-color: var(--muted); } .legal-doc__list b { font-weight: 500; color: var(--charcoal); } .legal-doc a:not(.legal-callout__link) { border-bottom: 1px solid var(--line); transition: border-color var(--fast) var(--ease); } .legal-doc a:not(.legal-callout__link):hover { border-bottom-color: var(--charcoal); } /* Pulled-out clause — used for the things a reader most often arrives looking for (the refund window, the data-deletion route). */ .legal-callout { margin-top: var(--s3); padding: var(--s3); background-color: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-card); } .legal-callout__t { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s1); } .legal-callout p { font-size: var(--t-sm); line-height: 1.65; } .legal-doc__contact { margin-top: var(--s2); font-size: var(--t-base); line-height: 1.7; } .legal-doc__contact a { font-weight: 500; color: var(--charcoal); } /* ========================================================================== CROSS-LINKS The three documents are read as a set — someone checking the refund window often wants the terms next. Dark band so it reads as a footer lead-in rather than another clause. ========================================================================== */ .legal-more { background-color: var(--deep); color: var(--on-deep); padding-block: var(--s6); } .legal-more__t { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-deep-muted); margin-bottom: var(--s4); } .legal-more__grid { display: grid; grid-template-columns: 1fr; gap: var(--s2); } .legal-more__card { display: block; padding: var(--s3); border: 1px solid var(--line-deep); border-radius: var(--r-card); transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease); } .legal-more__card:hover { border-color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.04); } .legal-more__card[aria-current="page"] { opacity: 0.45; pointer-events: none; } .legal-more__card-t { font-size: var(--t-lg); font-weight: 400; letter-spacing: -0.02em; margin-bottom: var(--s1); } .legal-more__card-b { font-size: var(--t-sm); line-height: 1.55; color: var(--on-deep-muted); } /* ========================================================================== FOOTER Matches the .foot convention shared by the newer pages. ========================================================================== */ .foot { background-color: var(--deep); color: var(--on-deep); border-top: 1px solid var(--line-deep); padding: var(--s4) var(--gutter) var(--s2); } .foot__container { width: 100%; /* Pinned to 1280 rather than --container: the footer is shared furniture and should match its width on every other page, even though the document column above it is deliberately narrower. */ max-width: 1280px; margin-inline: auto; } .foot__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--s3); } .foot__logo { height: 48px; width: auto; } .foot__tag { margin-top: var(--s2); color: var(--on-deep-muted); font-size: var(--t-sm); } .foot__t { font-size: var(--t-xs); font-weight: 400; line-height: 1.06; letter-spacing: 0.16em; text-transform: uppercase; color: #898989; margin-bottom: 36px; } .foot__list { display: grid; gap: 0; } .foot__list a { font-size: var(--t-sm); color: #898989; transition: color var(--fast) var(--ease); display: inline-flex; align-items: center; min-height: 32px; } .foot__list a:hover { color: var(--on-deep); } .foot__base { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: 36px; padding-top: var(--s1); border-top: 1px solid var(--line-deep); color: #898989; font-size: var(--t-sm); } .foot__base a { /* WCAG 2.2 SC 2.5.8 wants 24px; min-height (not padding) so font metrics can't leave it a pixel short — matches .foot__list a's treatment. */ display: inline-flex; align-items: center; min-height: 32px; } .foot__base a:hover { color: var(--on-deep); } .foot__base a[aria-current="page"] { color: var(--on-deep); } /* ========================================================================== RESPONSIVE ========================================================================== */ /* 992px, matching css/header.css's own hamburger-to-desktop cutover (max-width: 991px there) rather than the more usual 900/1024 — see css/company.css's identical note. */ @media (min-width: 992px) { .legal-body { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s7); } .legal-toc { position: sticky; top: var(--s4); align-self: start; /* Long documents give the rail more entries than a short viewport can hold; let it scroll independently rather than clipping. */ max-height: calc(100vh - var(--s6)); overflow-y: auto; } } @media (min-width: 640px) { .legal-more__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1023px) { .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--s4); } } @media (max-width: 600px) { .foot__grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }