/* ========================================================================== Little Firsts — legal & support pages (Privacy, Terms, Support) A contained dark "lantern" hero band (light text) over a calm cream reading sheet (dark text) — so the body is always fully readable. Same warm world. Fonts (Instrument Sans + Newsreader + Gentium Book Plus) load in each . ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } :root { --ink: oklch(0.33 0.032 156); --ink-2: oklch(0.45 0.030 152); --ink-3: oklch(0.56 0.026 140); --paper: oklch(0.955 0.018 84); --surface: oklch(0.978 0.012 86); --line: oklch(0.880 0.024 80); --amber: oklch(0.76 0.128 70); --amber-deep: oklch(0.66 0.125 62); --amber-ink: oklch(0.50 0.098 58); --amber-wash: oklch(0.945 0.040 78); --maxw: 720px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --dusk: linear-gradient(166deg, oklch(0.35 0.055 158) 0%, oklch(0.29 0.050 156) 48%, oklch(0.27 0.050 144) 74%, oklch(0.30 0.064 96) 100%); } html { -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: 'Instrument Sans', 'Helvetica Neue', system-ui, sans-serif; font-size: 17px; line-height: 1.68; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: oklch(0.80 0.10 72 / 0.40); } a { color: var(--amber-ink); text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--amber) 50%, transparent); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--amber-deep); } a:focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 3px; border-radius: 5px; } /* ---- Dark lantern hero band (contained) ---- */ .doc__hero { position: relative; isolation: isolate; overflow: hidden; background: var(--dusk); color: oklch(0.965 0.012 86); padding: 36px 0 48px; } .doc__hero::before { content:""; position:absolute; inset:0; z-index:-2; background-image:url(/grain.png); background-size:320px 320px; opacity:.16; mix-blend-mode:overlay; } .doc__hero::after { content:""; position:absolute; z-index:-1; left:50%; bottom:-40%; width:70%; height:90%; transform:translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, oklch(0.80 0.13 74 / 0.24), transparent 70%); filter: blur(20px); } .hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .doc__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; } .back-link { display: inline-flex; align-items: center; gap: 10px; color: oklch(0.92 0.02 84); text-decoration: none; font-size: 13px; letter-spacing: 0.02em; } .back-link:hover { color: #fff; } .back-link__arrow { font-size: 16px; } .head-mark { display: inline-flex; align-items: center; gap: 9px; color: oklch(0.94 0.018 84); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; } .head-mark .brand__fox { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .doc__title { font-family: 'Newsreader', Georgia, serif; font-weight: 300; font-style: italic; font-size: clamp(38px, 7vw, 56px); line-height: 1.04; letter-spacing: 0.004em; color: oklch(0.98 0.012 86); margin: 0 0 12px; } .doc__meta { color: oklch(0.88 0.03 84); font-size: 14px; margin: 0; } .langswitch { display: flex; flex-wrap: wrap; gap: 4px; margin: 26px 0 0; } .langswitch__label { font-family: 'Gentium Book Plus', serif; font-style: italic; color: oklch(0.86 0.03 82); font-size: 14px; margin-right: 8px; align-self: center; } .langswitch a, .langswitch span { font-size: 13px; padding: 5px 11px; border-radius: 99px; text-decoration: none; } .langswitch a { color: oklch(0.92 0.02 84); border: 1px solid oklch(0.97 0.01 86 / 0.22); } .langswitch a:hover { background: oklch(0.97 0.01 86 / 0.14); } .langswitch .is-cur { background: var(--amber); color: oklch(0.30 0.05 152); } /* ---- Cream reading sheet ---- */ .doc__sheet { max-width: var(--maxw); margin: 0 auto; padding: 48px 28px 100px; } .doc__intro { font-family: 'Newsreader', serif; font-weight: 300; font-size: 21px; line-height: 1.5; color: var(--ink); margin: 0 0 12px; text-wrap: pretty; } .doc__body { margin-top: 8px; } .doc__body section { margin-top: 40px; } .doc__body h2 { font-family: 'Newsreader', serif; font-weight: 400; font-size: 26px; line-height: 1.2; margin: 0 0 14px; letter-spacing: 0.004em; } .doc__body h3 { font-weight: 600; font-size: 18px; margin: 26px 0 8px; } .doc__body p { margin: 0 0 16px; } .doc__body ul { margin: 0 0 16px; padding-left: 1.3em; } .doc__body li { margin: 8px 0; } .doc__body li::marker { color: var(--amber-deep); } .doc__body strong { font-weight: 600; } .callout { background: var(--amber-wash); border: 1px solid color-mix(in oklch, var(--amber) 30%, var(--line)); border-radius: 14px; padding: 18px 22px; margin: 22px 0; } .callout p:last-child { margin-bottom: 0; } .doc__foot { margin-top: 72px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; align-items: center; color: var(--ink-3); font-size: 13.5px; } .foot-links { display: flex; gap: 20px; flex-wrap: wrap; } .foot-links a { color: var(--ink-2); text-decoration: none; font-weight: 500; } .foot-links a:hover { color: var(--amber-ink); }