/* ========================================================================== StoForY Limited — corporate site Design tokens derived from the corporate brand system (green / graphite, Montserrat display + Inter body). Light, restrained, document-grade. ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root { /* Brand */ --green-100: #80DEBC; --green-300: #52D2A2; --green-500: #00BE7F; --green-700: #00A26C; --green-900: #008F5F; --blue-500: #3E5BB8; --graphite: #333333; /* Neutrals */ --white: #FFFFFF; --gray-25: #FAFBFB; --gray-50: #F5F7F6; --gray-100:#F2F2F2; --gray-200:#E7EAE9; --gray-300:#D6DBD9; --ink-900: #161A19; --ink-700: #333333; --ink-500: #5C6462; --ink-400: #7C8481; /* Semantic */ --surface: var(--white); --surface-muted: var(--gray-50); --surface-dark: #232726; --surface-darker: #1A1D1C; --border: var(--gray-200); --border-strong: var(--gray-300); --fg: var(--ink-900); --fg-muted: var(--ink-500); --accent: var(--green-700); --accent-bright: var(--green-500); /* Radii */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; /* Elevation */ --sh-1: 0 1px 2px rgba(22, 26, 25, .06), 0 0 0 1px rgba(22, 26, 25, .04); --sh-2: 0 2px 4px rgba(22, 26, 25, .05), 0 8px 24px rgba(22, 26, 25, .06); --sh-3: 0 4px 8px rgba(22, 26, 25, .06), 0 16px 40px rgba(22, 26, 25, .09); /* Motion */ --dur: 200ms; --ease: cubic-bezier(.16, 1, .3, 1); /* Layout */ --wrap: 1160px; --gutter: clamp(20px, 5vw, 40px); --header-h: 68px; } /* ---------- 2. Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); /* Kept on the root, not on : overflow on the body would turn it into its own scroll container and break window.scrollY, anchors and scrollIntoView. */ overflow-x: hidden; } body { margin: 0; background: var(--surface); color: var(--fg); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.62; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5 { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--ink-900); margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(32px, 4.3vw, 50px); } h2 { font-size: clamp(26px, 3.4vw, 38px); } h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 700; letter-spacing: -.015em; } h4 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; } p { margin: 0 0 1.1em; } p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--green-900); text-decoration: underline; text-underline-offset: 3px; } img, svg { max-width: 100%; height: auto; } strong { font-weight: 600; color: var(--ink-900); } :focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 190, 127, .38); border-radius: var(--r-xs); } ::selection { background: rgba(0, 190, 127, .22); } /* ---------- 3. Layout primitives ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(56px, 8vw, 96px); } .section--tight { padding-block: clamp(40px, 5vw, 64px); } .section--muted { background: var(--surface-muted); border-block: 1px solid var(--border); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--accent-bright); border-radius: 2px; } .lede { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.68; color: var(--fg-muted); max-width: 68ch; } .section-head { max-width: 72ch; margin-bottom: clamp(28px, 4vw, 44px); } .grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 700px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 700px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } } /* ---------- 4. Header ---------- */ .site-header { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--header-h); } .logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-900); font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -.02em; text-decoration: none; flex-shrink: 0; } .logo:hover { color: var(--ink-900); text-decoration: none; } .logo__mark { width: 30px; height: 34px; display: block; } .logo__suffix { font-weight: 500; font-size: 12px; color: var(--ink-400); letter-spacing: .04em; align-self: flex-end; padding-bottom: 3px; } .nav { display: flex; align-items: center; gap: 4px; } .nav a { display: inline-block; padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink-700); font-size: 14.5px; font-weight: 500; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .nav a:hover { background: var(--gray-100); color: var(--ink-900); text-decoration: none; } .nav a[aria-current] { color: var(--accent); background: rgba(0, 190, 127, .09); font-weight: 600; } /* The call-to-action inside the nav keeps its button colours */ .nav a.btn--primary, .nav a.btn--primary:hover, .nav a.btn--primary[aria-current] { color: var(--white); background: var(--green-700); } .nav a.btn--primary:hover { background: var(--green-900); } .nav-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--white); cursor: pointer; color: var(--ink-700); } @media (max-width: 980px) { .nav-toggle { display: inline-flex; } .nav { display: none; position: absolute; inset-inline: var(--gutter); top: calc(var(--header-h) + 8px); flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-3); } .nav.is-open { display: flex; } .nav a { padding: 11px 14px; font-size: 15.5px; } .nav .btn { margin-top: 6px; justify-content: center; } } /* ---------- 5. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; min-height: 46px; border-radius: var(--r-sm); border: 1px solid transparent; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:hover { text-decoration: none; } .btn:active { transform: scale(.985); } .btn--primary { background: var(--green-700); color: var(--white); box-shadow: 0 1px 2px rgba(0, 143, 95, .24); } .btn--primary:hover { background: var(--green-900); color: var(--white); box-shadow: 0 4px 14px rgba(0, 143, 95, .26); } .btn--ghost { background: var(--white); color: var(--ink-700); border-color: var(--border-strong); } .btn--ghost:hover { background: var(--gray-50); color: var(--ink-900); border-color: var(--ink-400); } .btn--on-dark { background: rgba(255, 255, 255, .08); color: var(--white); border-color: rgba(255, 255, 255, .22); } .btn--on-dark:hover { background: rgba(255, 255, 255, .16); color: var(--white); } .btn--sm { padding: 9px 14px; min-height: 38px; font-size: 14px; } /* ---------- 6. Hero ---------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #FBFDFC 0%, var(--white) 62%); border-bottom: 1px solid var(--border); padding-block: clamp(52px, 7vw, 88px) clamp(52px, 7vw, 84px); } .hero::before { content: ''; position: absolute; inset: 0; background-image: url('../img/pattern-hex.svg'); background-size: 150px auto; opacity: .55; pointer-events: none; -webkit-mask-image: radial-gradient(120% 90% at 88% 6%, #000 0%, transparent 68%); mask-image: radial-gradient(120% 90% at 88% 6%, #000 0%, transparent 68%); } .hero > .wrap { position: relative; } .hero__grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: start; } @media (min-width: 980px) { .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); } } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* Fact card — the “corporate passport”, first thing a reviewer looks for */ .factcard { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; } .factcard__head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; background: var(--gray-50); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); } .factcard__head::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 3px rgba(0, 190, 127, .18); } .factcard dl { margin: 0; padding: 6px 22px 18px; } .factcard dt { font-size: 12.5px; font-weight: 500; color: var(--ink-400); letter-spacing: .01em; padding-top: 13px; } .factcard dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-900); padding-bottom: 13px; border-bottom: 1px solid var(--gray-100); } .factcard dd:last-of-type { border-bottom: none; padding-bottom: 4px; } .factcard dd .mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; } /* Hero panel: what the company does, in four lines */ .glance { list-style: none; margin: 0; padding: 8px 22px 20px; display: grid; gap: 2px; } .glance li { padding: 14px 0; border-bottom: 1px solid var(--gray-100); } .glance li:last-child { border-bottom: none; padding-bottom: 4px; } .glance__k { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink-900); } .glance__v { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--fg-muted); } /* ---------- 6b. Brand strip ---------- */ .brandbar__title { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); text-align: center; margin-bottom: 22px; } .brandbar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 34px) clamp(14px, 2vw, 28px); align-items: center; justify-items: center; } @media (min-width: 480px) { .brandbar { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 640px) { .brandbar { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 1000px) { .brandbar { grid-template-columns: repeat(8, minmax(0, 1fr)); } } .brand { width: 100%; max-width: 104px; height: 30px; background: var(--ink-500); opacity: .72; transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .brand:hover { opacity: 1; background: var(--ink-700); } .brand--steam { -webkit-mask-image: url('../img/brands/steam.svg'); mask-image: url('../img/brands/steam.svg'); } .brand--playstation { -webkit-mask-image: url('../img/brands/playstation.svg'); mask-image: url('../img/brands/playstation.svg'); } .brand--xbox { -webkit-mask-image: url('../img/brands/xbox.svg'); mask-image: url('../img/brands/xbox.svg'); } .brand--nintendo { -webkit-mask-image: url('../img/brands/nintendo.svg'); mask-image: url('../img/brands/nintendo.svg'); } .brand--epicgames { -webkit-mask-image: url('../img/brands/epicgames.svg'); mask-image: url('../img/brands/epicgames.svg'); } .brand--ea { -webkit-mask-image: url('../img/brands/ea.svg'); mask-image: url('../img/brands/ea.svg'); } .brand--ubisoft { -webkit-mask-image: url('../img/brands/ubisoft.svg'); mask-image: url('../img/brands/ubisoft.svg'); } .brand--rockstargames { -webkit-mask-image: url('../img/brands/rockstargames.svg'); mask-image: url('../img/brands/rockstargames.svg'); } .brand--riotgames { -webkit-mask-image: url('../img/brands/riotgames.svg'); mask-image: url('../img/brands/riotgames.svg'); } .brand--roblox { -webkit-mask-image: url('../img/brands/roblox.svg'); mask-image: url('../img/brands/roblox.svg'); } .brand--microsoft { -webkit-mask-image: url('../img/brands/microsoft.svg'); mask-image: url('../img/brands/microsoft.svg'); } .brand--appstore { -webkit-mask-image: url('../img/brands/appstore.svg'); mask-image: url('../img/brands/appstore.svg'); } .brand--googleplay { -webkit-mask-image: url('../img/brands/googleplay.svg'); mask-image: url('../img/brands/googleplay.svg'); } .brand--netflix { -webkit-mask-image: url('../img/brands/netflix.svg'); mask-image: url('../img/brands/netflix.svg'); } .brand--spotify { -webkit-mask-image: url('../img/brands/spotify.svg'); mask-image: url('../img/brands/spotify.svg'); } .brand--discord { -webkit-mask-image: url('../img/brands/discord.svg'); mask-image: url('../img/brands/discord.svg'); } .brandbar__note { margin: 26px auto 0; max-width: 74ch; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--ink-400); } /* ---------- 7. Cards ---------- */ .card { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 24px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .card--hover:hover { border-color: var(--green-300); box-shadow: var(--sh-2); transform: translateY(-2px); } .card h3 { margin-bottom: .45em; } .card p { color: var(--fg-muted); font-size: 15.5px; } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: var(--r-sm); background: rgba(0, 190, 127, .10); color: var(--green-900); } .card__icon svg { width: 21px; height: 21px; } .card--flat { background: var(--gray-25); border-color: var(--gray-200); } .card__num { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 800; color: var(--accent-bright); letter-spacing: .06em; margin-bottom: 10px; } /* Feature list */ .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .ticks li { position: relative; padding-left: 28px; font-size: 15.5px; color: var(--fg-muted); } .ticks li::before { content: ''; position: absolute; left: 0; top: .45em; width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 190, 127, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008F5F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px 10px no-repeat; } /* Compact key/value list — company information, no table needed */ .factlist { margin: 16px 0 0; } .factlist dt { font-size: 12.5px; color: var(--ink-400); padding-top: 12px; } .factlist dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-900); padding-bottom: 12px; border-bottom: 1px solid var(--gray-100); } .factlist dd:last-of-type { border-bottom: none; padding-bottom: 0; } .legal-foot { margin: 26px auto 0; max-width: 86ch; font-size: 13.5px; line-height: 1.65; color: var(--ink-400); } /* ---------- 8. Data table (corporate details) ---------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--white); } .data-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; } .data-table th, .data-table td { text-align: left; padding: 14px 22px; border-bottom: 1px solid var(--gray-100); vertical-align: top; } .data-table tr:last-child th, .data-table tr:last-child td { border-bottom: none; } .data-table th { width: 38%; font-weight: 500; color: var(--ink-500); } .data-table td { font-weight: 600; color: var(--ink-900); } .data-table tbody tr:hover { background: var(--gray-25); } /* ---------- 9. Dark band ---------- */ .band-dark { position: relative; overflow: hidden; background: var(--surface-dark); color: rgba(255, 255, 255, .74); } .band-dark h2, .band-dark h3 { color: var(--white); } .band-dark::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 130% at 100% 0%, rgba(0, 190, 127, .16) 0%, transparent 60%); pointer-events: none; } .band-dark > .wrap { position: relative; z-index: 1; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; } .stat-grid { display: grid; gap: 22px; margin-top: 8px; } @media (min-width: 700px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } } .stat { border-left: 2px solid rgba(0, 190, 127, .55); padding-left: 16px; } .stat__k { display: block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; color: var(--white); letter-spacing: -.01em; } .stat__v { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .58); margin-top: 4px; } /* ---------- 10. Legal document pages ---------- */ .doc-head { background: var(--gray-50); border-bottom: 1px solid var(--border); padding-block: clamp(34px, 5vw, 52px); } .doc-head h1 { font-size: clamp(28px, 3.8vw, 42px); margin-bottom: .35em; } .doc-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--ink-500); } .doc-meta span { display: inline; } .doc-meta b { font-weight: 600; color: var(--ink-700); } .doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); padding-block: clamp(36px, 5vw, 60px); } @media (min-width: 1000px) { .doc-layout { grid-template-columns: 250px minmax(0, 1fr); } } .toc { align-self: start; } @media (min-width: 1000px) { .toc { position: sticky; top: calc(var(--header-h) + 24px); } } .toc__title { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 12px; } .toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); } .toc li { margin: 0; } .toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; color: var(--ink-500); } .toc a:hover { color: var(--accent); border-left-color: var(--green-300); text-decoration: none; } /* Below the two-column breakpoint the contents list becomes a compact index card */ @media (max-width: 999px) { .toc { background: var(--gray-25); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; } .toc__title { margin-bottom: 8px; } .toc ol { border-left: none; } .toc a { padding: 4px 0; border-left: none; margin-left: 0; font-size: 13.5px; } } .doc-body { max-width: 76ch; min-width: 0; } .doc-body h2 { font-size: clamp(20px, 2.1vw, 24px); margin-top: 2.2em; padding-top: .2em; scroll-margin-top: calc(var(--header-h) + 20px); } .doc-body > h2:first-child { margin-top: 0; } .doc-body h3 { margin-top: 1.9em; font-size: 17.5px; } .doc-body p, .doc-body li { color: var(--ink-700); font-size: 15.7px; } .doc-body ul, .doc-body ol { padding-left: 22px; margin: 0 0 1.1em; } .doc-body li { margin-bottom: .5em; } .doc-body ol > li::marker { color: var(--ink-400); font-weight: 600; } .doc-note { border-left: 3px solid var(--green-500); background: var(--gray-25); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 16px 20px; margin: 1.6em 0; font-size: 15px; color: var(--ink-700); } .doc-list { display: grid; gap: 14px; } .doc-list a.card { display: block; } .doc-list a.card:hover { text-decoration: none; } .doc-list h3 { color: var(--ink-900); margin-bottom: .3em; } .doc-list p { margin: 0; } /* ---------- 10b. Legal accordions (one-page layout) ---------- */ .legal-stack { display: grid; gap: 12px; } .legal-doc { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 20px); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .legal-doc[open] { border-color: var(--green-300); box-shadow: var(--sh-2); } .legal-doc:hover { border-color: var(--border-strong); } .legal-doc[open]:hover { border-color: var(--green-300); } .legal-doc > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; cursor: pointer; list-style: none; user-select: none; } .legal-doc > summary::-webkit-details-marker { display: none; } .legal-doc > summary:focus-visible { box-shadow: inset 0 0 0 3px rgba(0, 190, 127, .38); } .legal-doc__head { display: block; min-width: 0; } .legal-doc__title { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(17px, 1.7vw, 19px); letter-spacing: -.015em; color: var(--ink-900); } .legal-doc__note { display: block; margin-top: 4px; font-size: 14.5px; color: var(--fg-muted); } .legal-doc__state { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .legal-doc__meta { font-size: 12.5px; color: var(--ink-400); white-space: nowrap; } .legal-doc__chevron { color: var(--ink-400); transition: transform var(--dur) var(--ease); } .legal-doc[open] .legal-doc__chevron { transform: rotate(180deg); color: var(--accent); } .legal-doc__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); padding: 4px 24px 30px; border-top: 1px solid var(--border); margin-top: -1px; } @media (min-width: 1000px) { .legal-doc__body { grid-template-columns: 230px minmax(0, 1fr); padding-top: 26px; } } .legal-doc__body .toc { position: static; background: var(--gray-25); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; align-self: start; } .legal-doc__body .toc ol { border-left: none; } .legal-doc__body .toc a { padding: 4px 0; border-left: none; margin-left: 0; font-size: 13.5px; } .legal-doc__body .doc-body { padding-top: 4px; } .legal-doc__body .doc-body > h2:first-of-type { margin-top: 0; } @media (max-width: 760px) { /* Stack the summary: the title gets the full width instead of wrapping one word per line next to the version label. */ .legal-doc > summary { position: relative; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 46px 18px 18px; } .legal-doc__state { width: 100%; } .legal-doc__meta { font-size: 12px; white-space: normal; } .legal-doc__chevron { position: absolute; top: 20px; right: 18px; } .legal-doc__body { padding-inline: 18px; } } /* ---------- 11. Contact ---------- */ .contact-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 24px; } .contact-card h3 { margin-bottom: .4em; } .contact-card a { font-weight: 600; word-break: break-word; } .contact-card p { color: var(--fg-muted); font-size: 15.5px; } .addr { font-style: normal; color: var(--ink-700); font-size: 15.5px; line-height: 1.7; } /* ---------- 12. Footer ---------- */ .site-footer { background: var(--surface-darker); color: rgba(255, 255, 255, .62); padding-block: clamp(44px, 6vw, 64px) 28px; font-size: 14.5px; } .site-footer__grid { display: grid; gap: 32px; } @media (min-width: 700px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.7fr 1fr 1.3fr; } } .site-footer h4 { color: rgba(255, 255, 255, .95); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .site-footer a { color: rgba(255, 255, 255, .62); } .site-footer a:hover { color: var(--green-100); text-decoration: none; } .site-footer .logo { color: var(--white); } .site-footer .logo__suffix { color: rgba(255, 255, 255, .45); } .site-footer .addr { color: rgba(255, 255, 255, .62); font-size: 14.5px; } .footer-about { color: rgba(255, 255, 255, .55); font-size: 14px; margin-top: 14px; max-width: 34ch; } .footer-legal { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; font-size: 13.2px; color: rgba(255, 255, 255, .46); } .footer-legal p { margin: 0; max-width: 78ch; } /* ---------- 13. Utilities ---------- */ .mono { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .center { text-align: center; } .mt-0 { margin-top: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; transform: translate(-50%, -120%); z-index: 100; padding: 10px 18px; background: var(--green-900); color: #fff; border-radius: 0 0 var(--r-sm) var(--r-sm); font-size: 14px; font-weight: 600; } .skip-link:focus { transform: translate(-50%, 0); color: #fff; text-decoration: none; } .badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(0, 190, 127, .10); border: 1px solid rgba(0, 190, 127, .24); color: var(--green-900); font-size: 12.5px; font-weight: 600; } .badge--neutral { background: var(--gray-100); border-color: var(--border-strong); color: var(--ink-500); } /* ---------- 14. Motion & print ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } @media print { .site-header, .site-footer, .toc, .hero::before, .skip-link, .nav-toggle { display: none !important; } .legal-doc { border: none; box-shadow: none; page-break-inside: auto; } .legal-doc > summary { padding: 0; margin-top: 18pt; } .legal-doc__chevron, .legal-doc__note { display: none; } .legal-doc__body { border-top: none; padding: 0; display: block; } body { font-size: 11pt; line-height: 1.5; color: #000; } .doc-layout { display: block; padding-block: 0; } .doc-body { max-width: none; } .doc-body h2 { page-break-after: avoid; margin-top: 18pt; } a { color: #000; text-decoration: none; } .doc-head { background: none; border: none; padding-block: 0 12pt; } }