/* ---- The website's own rules. The design's CSS is in design-pc.css and design-phone.css, generated by tools/build_website.mjs and each loaded only at its own width. ---- */ /* the form and thank-you carry an inline display, which would otherwise beat [hidden] */ [hidden]{display:none!important} /* the design's conditions (menu, thank-you, contact bar, footer folds) become wrappers that take no room of their own (contracts/page-hooks.md) */ [data-if]{display:contents} [data-if][hidden]{display:none!important} /* ---- One page, two copies: the PC design from 600 px, the phone design below (research R1) */ @media (width < 600px){.vg-pc{display:none!important}} @media (width >= 600px){.vg-ph{display:none!important}} /* the phone design's page colour, now that it fills the screen instead of a 430 px frame */ @media (width < 600px){body{background:#f2f5f2}} /* a section link lands below the sticky header, not under it (the phone design sets its own) */ .vg-pc section[id]{scroll-margin-top:84px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* tool cards: the corner glow and bottom line have an inline opacity/transform that would beat the design's own hover rules */ [data-card]:hover [data-sweep]{transform:scaleX(1)!important} [data-card]:hover [data-halo]{opacity:1!important} /* items with no page yet: dimmed, not links, with a small Soon tag */ .soon{color:rgba(163,176,168,.55)!important;cursor:default} .soon small{display:inline-block;margin-inline-start:6px;padding:2px 6px;border-radius:5px;background:#2e3933;color:#a3b0a8;font-family:'Rubik',system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;line-height:1.3;vertical-align:2px} /* decorative loops pause while their section is off screen (main.js sets .vg-offscreen on narrow screens). [style*="infinite"] only matches an element's own inline loop; no scroll-driven hook carries one, so none of them can be paused by this */ .vg-offscreen [style*="infinite"]{animation-play-state:paused!important} /* "Send another message", after a confirmed send */ .vg-again:hover{background:#f2f5f2!important} /* ---- Scroll animations where the browser has no scroll timelines (Firefox). main.js adds .vg-io to only there, and never under reduced motion; then .vg-in to each element once it comes into view. The same keyframes play on a clock. .vg-in sets the end state itself, so nothing stays hidden if animations are switched off. ---- */ .vg-io [data-reveal]:not(.vg-in),.vg-io [data-count]:not(.vg-in),.vg-io [data-line]:not(.vg-in),.vg-io [data-tilt]:not(.vg-in),.vg-io [data-progress],.vg-io [data-nav]{animation:none} .vg-io [data-reveal]:not(.vg-in){opacity:0} .vg-io [data-reveal].vg-in{opacity:1;animation:vg-rv .8s cubic-bezier(.2,.8,.2,1) both} .vg-io [data-reveal="zoom"].vg-in{animation-name:vg-zoom} .vg-io [data-stagger]>*:nth-child(4n+2).vg-in{animation-delay:.1s} .vg-io [data-stagger]>*:nth-child(4n+3).vg-in{animation-delay:.2s} .vg-io [data-stagger]>*:nth-child(4n).vg-in{animation-delay:.3s} .vg-io [data-count]:not(.vg-in){--n:0!important} .vg-io [data-count].vg-in{animation:vg-count 1.6s ease-out both} .vg-io [data-line]{transform-origin:left} .vg-io [data-line]:not(.vg-in){transform:scaleX(0)} .vg-io [data-line].vg-in{animation:vg-line .8s both} .vg-io [data-tilt].vg-in{animation:vg-tilt 1.2s both} .vg-io [data-par="a"]{animation:vg-float 7s ease-in-out infinite} .vg-io [data-par="b"]{animation:vg-float 7s -3.5s ease-in-out infinite} /* ---- Tablets (600–1079 px) get the PC design (spec P14-FR-024). Only what was measured to overlap or push sideways is fixed here, each with the width it was seen at. ---- */ /* Header, measured 27 Sep 2026: the four section links wrap in the middle column into a stack — header 100 px tall at 768–900, 150 at 700, 237 at 600, sticky over a third of the screen. Below 920 px they get a row of their own under the logo, on one line. Nothing else overlapped at 600, 700, 768, 900 or 1024 (text boxes compared with animation off). */ @media (width >= 600px) and (width < 920px){ .vg-pc header nav{grid-template-columns:auto auto!important;justify-content:space-between!important;row-gap:8px!important;padding-bottom:12px!important} .vg-pc header nav>div:nth-child(2){grid-column:1/-1;grid-row:2;flex-wrap:nowrap!important;gap:24px!important} } /* ---- Inner pages (About us, Security, Help centre): the home page's colours, fonts and cards, laid out for reading. Not in the design; built from its tokens. ---- */ .pg-hero{position:relative;padding:72px 28px 36px;overflow:clip} .pg-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#dde5de 1px,transparent 1px),linear-gradient(90deg,#dde5de 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 70% 20%,#000 10%,transparent 65%);-webkit-mask-image:radial-gradient(ellipse at 70% 20%,#000 10%,transparent 65%);pointer-events:none} .pg-wrap{max-width:780px;margin:0 auto;position:relative} .pg-label{font-family:'JetBrains Mono',monospace;font-size:14px;color:#33705b;letter-spacing:.06em} .pg-title{font-size:clamp(36px,5vw,56px);letter-spacing:-.03em;line-height:1.06;margin:14px 0 18px;font-weight:800;text-wrap:balance} .pg-intro{font-size:20px;line-height:1.6;color:#57655d;margin:0;text-wrap:pretty} .pg-body{padding:12px 28px 110px} .pg-body .pg-wrap{display:flex;flex-direction:column;gap:14px} .pg-card{position:relative;overflow:clip;background:#fff;border-radius:18px;padding:28px;box-shadow:0 1px 3px rgba(30,42,36,.07)} .pg-card h2{font-size:23px;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:0 0 10px} .pg-card p{font-size:17px;line-height:1.65;color:#57655d;margin:0 0 10px;text-wrap:pretty} .pg-card p:last-child,.pg-card ul:last-child{margin-bottom:0} .pg-card ul{list-style:none;padding:0;margin:4px 0 10px;display:flex;flex-direction:column;gap:9px} .pg-card li{position:relative;padding-inline-start:22px;font-size:17px;line-height:1.55;color:#57655d} .pg-card li::before{content:"";position:absolute;inset-inline-start:3px;top:.62em;width:7px;height:7px;border-radius:50%;background:#5cae91} .pg-card a{color:#33705b;font-weight:600;text-decoration:underline;text-underline-offset:2px} .pg-card [data-line]{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#33705b,#5cae91)} .pg-updated{font-family:'JetBrains Mono',monospace;font-size:13px;color:#8a968e;margin-top:10px} @media (max-width:520px){.pg-card{padding:22px}.pg-intro{font-size:18px}} #ask{scroll-margin-top:84px} /* the Help centre's question form: the same focus ring and button lift as the design's form */ .pg-field:focus{border-color:#33705b!important;box-shadow:0 0 0 4px rgba(51,112,91,.14)!important} .pg-send:hover{transform:translateY(-2px)!important;box-shadow:0 14px 30px rgba(22,28,25,.25)!important} /* Arabic: the design turns letter-spacing off for Arabic script; the inner pages do too */ [dir="rtl"] .pg-title,[dir="rtl"] .pg-card h2,[dir="rtl"] .pg-label{letter-spacing:0}