:root { /* Aliased to the network-wide canonical tokens in zc-brand.css (linked in each legal page's ), so a palette change happens once, there, instead of being hand-edited in 5 codebases. */ --bg: var(--zc-bg, #0A0A0C); --card: #141414; --border: #2a2a2a; --text: #f2f2f2; --text-dim: #9a9a9a; --pink: var(--zc-pink, #C8145A); --pink-dim: var(--zc-pink-dim, #780C37); --highlight: var(--zc-pink-light, #FFAAC8); --green: var(--zc-green, #2DD4A8); } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); } @font-face { font-family: 'Game Of Squids'; src: url('../fonts/game-of-squids.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-weight: 300; background: var(--bg); color: var(--text); line-height: 1.6; background-image: radial-gradient(circle at 8% 12%, rgba(200,20,90,0.08), transparent 40%), radial-gradient(circle at 92% 88%, rgba(255,170,200,0.06), transparent 40%); } .legal-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--pink); background: var(--card); color: var(--text); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; } .legal-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .shape { position: fixed; opacity: 0.14; pointer-events: none; z-index: 0; } .shape.circle { width: 110px; height: 110px; border: 5px solid var(--pink); border-radius: 50%; top: 8%; right: 6%; } .shape.square { width: 90px; height: 90px; border: 5px solid var(--text-dim); top: 62%; right: 9%; transform: rotate(8deg); } .shape.triangle { width: 0; height: 0; top: 10%; left: 6%; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 104px solid var(--highlight); } h1, h2, .logo { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } a { color: inherit; } header { position: sticky; top: 0; z-index: 10; background: rgba(10,10,10,0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .nav { max-width: 1100px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: flex-start; } .logo { display: flex; align-items: center; gap: 8px; text-decoration: none; } .logo-text { display: flex; align-items: baseline; gap: 1px; font-size: 1.65rem; } .logo-zephy, .logo-cube { font-family: 'Game Of Squids', 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; } .logo-zephy { color: #ffffff; } .logo-cube { color: var(--pink); } .legal-band { border-bottom: 2px solid var(--pink); padding: 44px 24px 34px; position: relative; z-index: 1; } .legal-band-inner { max-width: 720px; margin: 0 auto; } .legal-eyebrow { font-family: 'Poppins', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--highlight); display: flex; align-items: center; gap: 0.6rem; margin-bottom: 14px; } .legal-mark { width: 12px; height: 12px; border: 2px solid var(--pink); border-radius: 50%; display: inline-block; } .legal-title { font-family: 'Game Of Squids', 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; font-size: 2.1rem; color: var(--text); margin-bottom: 10px; } .legal-title .accent { color: var(--pink); } .legal-lead { color: #cfcfcf; font-size: 0.95rem; max-width: 52ch; margin-bottom: 14px; } .legal-band--alt { border-bottom-color: var(--green); } .legal-band--alt .legal-eyebrow { color: var(--green); } .legal-band--alt .legal-mark { border-color: var(--green); } .shape.circle.alt { background: var(--green); border: 0; opacity: 0.5; } body.legal-alt main h2::before { background: var(--green); } body.legal-alt main li::before { background: var(--green); } body.legal-alt main a.inline { color: var(--green); border-bottom-color: var(--pink-dim); } body.legal-alt main a.inline:hover { color: var(--highlight); border-bottom-color: var(--green); } body.legal-alt .legal-meta::before { color: var(--green); } body.legal-alt .legal-to-top { border-color: var(--green); } body.legal-alt footer { border-top-color: var(--green); } main { max-width: 720px; margin: 0 auto; padding: 40px 24px 90px; position: relative; z-index: 1; } .legal-meta { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 30px; padding-bottom: 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.5rem; } .legal-meta::before { content: '\25CF'; color: var(--pink); font-size: 0.6rem; } main h2 { counter-increment: legalnum; position: relative; padding-left: 38px; font-size: 1.15rem; font-weight: 600; margin: 34px 0 12px; } main h2::before { content: counter(legalnum); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; background: var(--pink); color: var(--bg); font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } main { counter-reset: legalnum; } main p { color: #cfcfcf; margin-bottom: 14px; font-size: 0.96rem; } main ul { list-style: none; margin: 8px 0 14px 0; font-size: 0.96rem; } main li { position: relative; padding-left: 22px; margin-bottom: 8px; color: #cfcfcf; } main li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; background: var(--highlight); transform: rotate(45deg); } main a.inline { color: var(--pink); text-decoration: none; border-bottom: 1px dashed var(--pink-dim); } main a.inline:hover { border-bottom-color: var(--pink); color: var(--highlight); } footer { background: var(--bg); border-top: 2px solid var(--highlight); padding: 28px 24px; text-align: center; color: var(--text); font-size: 0.8rem; position: relative; z-index: 1; } footer a { color: var(--text); text-decoration: none; transition: color 0.2s ease, text-shadow 0.2s ease; } footer a:hover, footer a:focus-visible { color: var(--highlight); text-shadow: 0 0 10px rgba(200,20,90,0.35); } footer .foot-ver { color: var(--highlight); font-weight: 700; } footer .footer-legal { margin-top: 10px; }