/* InkPocket — the one stylesheet. Every real page links this: /index, /privacy, /terms, /support, /changelog and their Italian twins under /it/. Until the site went bilingual each page inlined its own copy of the block below; with ten pages instead of five that arrangement guarantees drift, so the copies were merged here on 2026-08-19. Two page shapes, selected by a class on : (no class) the landing page — 1100px wide, lighter veil over the artwork .doc-page privacy / terms / support / changelog — 880px, darker veil, looser line height for long-form reading Still inlining their own styles, deliberately: 404.html (the deck-link fallback, kept self-contained) and features/contact/faq.html (stale drafts of the landing page that nothing links to). Colours mirror the app's own tokens — keep them in sync with the app. */ :root{ --bg:#1c1919; /* onBackground (dark) */ --card:#373b70; /* appPrimary (dark) */ --text:#ffffff; /* appLabelColor (dark) */ --muted:#e3e3e3; /* Outline */ --accent:#6d70a4; /* appPrimaryContainer (dark) */ --accent2:#3ed598; /* Tertiary */ --stroke:rgba(255,255,255,.08); /* Darkness of the veil over the background artwork; .doc-page raises it so body text stays readable over a busy image. */ --veil-top:.30; --veil-bottom:.30; } *{box-sizing:border-box} html,body{height:100%} body{margin:0; color:var(--text); font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background:var(--bg)} body.doc-page{line-height:1.6; --veil-top:.45; --veil-bottom:.55} /* Global link colour = app accent */ a{color:var(--accent2)} a:hover{text-decoration:underline} .hero-bg{ position:fixed; inset:0; pointer-events:none; z-index:-1; background: linear-gradient(180deg, rgba(0,0,0,var(--veil-top)), rgba(0,0,0,var(--veil-bottom))), url('/assets/lorcana-bg-hero.jpg') center/cover no-repeat fixed, radial-gradient(1400px 800px at 20% -10%, rgba(109,112,164,.32), transparent 60%), radial-gradient(1200px 700px at 120% 5%, rgba(62,213,152,.18), transparent 55%), radial-gradient(900px 500px at 70% 90%, rgba(255,255,255,.06), transparent 60%), var(--bg); } .wrap{max-width:1100px; margin:0 auto; padding:24px} body.doc-page .wrap{max-width:880px} /* --- Navigation --- */ .nav{position:relative; display:flex; align-items:center; justify-content:center; gap:16px; padding:14px 18px; border:1px solid var(--stroke); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); backdrop-filter:saturate(140%) blur(6px)} .brand{display:flex; align-items:center; gap:10px; position:absolute; left:18px; top:50%; transform:translateY(-50%); text-decoration:none; color:var(--text)} .brand:hover{text-decoration:none} .logo{width:28px; height:28px; border-radius:8px; display:block; object-fit:cover; box-shadow:inset 0 0 14px rgba(0,0,0,.35); overflow:hidden} .brand b{letter-spacing:.2px} .links{display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap} .links a{color:var(--text); text-decoration:none; font-weight:500; opacity:.9} .links a:hover{opacity:1} /* Language switch. It rides inside .links rather than being pinned to the right of the nav: the brand is already absolutely positioned there, and a second absolute element collides with the centred links at tablet widths. In flow it simply wraps with everything else. Text, not flags: a flag is a country, not a language — the Union Jack tells a reader in Boston or Sydney that English isn't for them, and Italian is spoken outside Italy. Both codes are always shown, one of them marked current, so it reads as a switch rather than as a link to somewhere unknown. */ .langswitch{display:flex; align-items:center; gap:2px; margin-left:4px; padding:3px; border:1px solid var(--stroke); border-radius:999px; background:rgba(12,14,21,.5); font-size:12px; font-weight:700; letter-spacing:.4px} .langswitch a, .langswitch span{padding:3px 9px; border-radius:999px; color:var(--muted); text-decoration:none; line-height:1.2} .langswitch a:hover{color:var(--text); background:rgba(255,255,255,.07); text-decoration:none} .langswitch [aria-current="true"]{background:rgba(62,213,152,.16); color:var(--text)} /* --- Landing page --- */ .hero{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center; margin-top:36px} .hero::before{content:""; position:absolute; inset:-24px 0 -24px 0; pointer-events:none; z-index:-1; opacity:.35; background:radial-gradient(900px 460px at 52% 8%, rgba(109,112,164,.28), transparent 60%); mix-blend-mode:screen} h1{font-size:52px; line-height:1.08; margin:0 0 12px; text-shadow:0 2px 18px rgba(0,0,0,.35)} .lead{color:var(--muted); font-size:18px; margin:0 0 18px} .cta{display:flex; gap:12px; flex-wrap:wrap} /* Two entry hooks under the hero: one per existing-collection audience. */ .hooks{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:0 0 18px; color:var(--muted); font-size:15px} .hooks span{display:inline-block; position:relative; padding-left:22px; text-align:left} .hooks span::before{content:"\21B3"; position:absolute; left:0; top:0; color:var(--accent2)} .hero-phone{width:100%; max-width:420px; display:block; justify-self:end; filter:drop-shadow(0 20px 60px rgba(0,0,0,.6)); transform:perspective(1000px) rotateY(-8deg); transition:transform .25s ease} .hero-phone:hover{transform:perspective(1000px) rotateY(-2deg)} .pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); background:rgba(12,14,21,.6); font-size:13px; color:var(--muted)} .pill .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(123,92,255,.65)} .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid var(--stroke); text-decoration:none; font-weight:600; color:var(--text)} .btn:hover{text-decoration:none} .btn-primary{background:linear-gradient(180deg, rgba(109,112,164,.30), rgba(55,59,112,.15))} .btn-primary:hover{filter:brightness(1.08)} .btn-ghost{background:rgba(255,255,255,.06)} .btn-ghost:hover{background:rgba(12,14,21,.9)} /* The consent banner's controls are real