/* Shared styles for legal pages (privacy, terms, tokushoho) */ :root { --navy: #1B2A6B; --navy-deep: #131f52; --cream: #FAF6EF; --gold: #F0B429; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Nunito', 'M PLUS Rounded 1c', sans-serif; background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 40%, var(--navy-deep) 100%); color: var(--cream); line-height: 1.8; min-height: 100vh; } .legal-header { text-align: center; padding: 2.5rem 1rem 0.5rem; } .legal-header a { font-family: 'Fredoka', sans-serif; font-size: 1.6rem; font-weight: 600; color: var(--gold); text-decoration: none; } .legal-wrap { max-width: 760px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } .legal-wrap h1 { font-family: 'Fredoka', 'M PLUS Rounded 1c', sans-serif; font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--cream); margin: 1rem 0 0.25rem; line-height: 1.4; } .legal-updated { color: rgba(250, 246, 239, 0.65); font-size: 0.85rem; margin-bottom: 2rem; } .legal-wrap h2 { font-family: 'Fredoka', 'M PLUS Rounded 1c', sans-serif; font-size: 1.15rem; color: var(--gold); margin: 2.2rem 0 0.6rem; } .legal-wrap p, .legal-wrap li { margin-bottom: 0.75rem; font-size: 0.95rem; } .legal-wrap ul { padding-left: 1.4rem; margin-bottom: 0.75rem; } .legal-wrap a { color: var(--gold); } .legal-lang-divider { margin: 3.5rem 0 2.5rem; border: 0; border-top: 1px solid rgba(250, 246, 239, 0.25); } .legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; } .legal-table th, .legal-table td { border: 1px solid rgba(250, 246, 239, 0.25); padding: 0.7rem 0.9rem; font-size: 0.9rem; text-align: left; vertical-align: top; } .legal-table th { width: 34%; font-weight: 700; background: rgba(250, 246, 239, 0.06); } .legal-footer { text-align: center; padding: 2rem 1rem 3rem; font-size: 0.85rem; color: rgba(250, 246, 239, 0.75); } .legal-footer a { color: rgba(250, 246, 239, 0.9); } @media (max-width: 600px) { .legal-table th, .legal-table td { display: block; width: 100%; } .legal-table th { border-bottom: 0; } .legal-table td { border-top: 0; margin-bottom: 0; } } /* Stage-1 EN/JP content toggle (shared with styles.css): paired real-HTML text nodes keyed off body[data-lang]. Hide-only pattern so any element type (span, p, li, h1) keeps its natural display when active. Pages that default to Japanese set data-lang="jp" on statically. */ body:not([data-lang="jp"]) .i18n-jp { display: none; } body[data-lang="jp"] .i18n-en { display: none; } /* ── DEFAULT PAGE FURNITURE (Tom's standing rule, 2026-07-02) ── Every new page on the site gets, unless it would hurt SEO (it doesn't — all of this is pure presentation on real text): 1. The wordmark logo in the header (alt="Mukashi"), not plain text 2. Fraunces C3 narrative headlines with the lamplight gold gradient (JP glyphs fall back to M PLUS Rounded 1c, same gradient) 3. The site's star-field background Load Fraunces via: family=Fraunces:opsz,wght,SOFT,WONK@60,700,100,1 */ /* 2. Narrative headline voice (mirror of styles.css v2 rules) */ .page-headline { font-family: 'Fraunces', 'M PLUS Rounded 1c', Georgia, serif; font-variation-settings: 'opsz' 60, 'wght' 700, 'SOFT' 100, 'WONK' 1; font-weight: 700; letter-spacing: -0.005em; color: #F5A623; /* fallback */ } .page-headline > span { background: linear-gradient(180deg, #FFE9B8 0%, #F5A623 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* 3. Star field (same recipe as styles.css) as a fixed page backdrop */ .page-stars { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .page-stars::before, .page-stars::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.50) 0%, transparent 100%), radial-gradient(1px 1px at 25% 40%, rgba(245,166,35,0.45) 0%, transparent 100%), radial-gradient(2px 2px at 40% 10%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(1px 1px at 55% 65%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(1px 1px at 68% 25%, rgba(245,166,35,0.35) 0%, transparent 100%), radial-gradient(2px 2px at 78% 50%, rgba(255,255,255,0.30) 0%, transparent 100%), radial-gradient(1px 1px at 85% 80%, rgba(245,166,35,0.40) 0%, transparent 100%), radial-gradient(1px 1px at 92% 35%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(1px 1px at 15% 75%, rgba(255,255,255,0.30) 0%, transparent 100%), radial-gradient(2px 2px at 48% 85%, rgba(245,166,35,0.25) 0%, transparent 100%); } .page-stars::after { background-image: radial-gradient(1px 1px at 5% 55%, rgba(255,255,255,0.25) 0%, transparent 100%), radial-gradient(1px 1px at 32% 20%, rgba(245,166,35,0.30) 0%, transparent 100%), radial-gradient(1px 1px at 60% 45%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(2px 2px at 75% 15%, rgba(255,255,255,0.20) 0%, transparent 100%), radial-gradient(1px 1px at 90% 70%, rgba(245,166,35,0.35) 0%, transparent 100%); } /* Content sits above the star layer */ .legal-header, .legal-wrap, .coloring-wrap, .legal-footer { position: relative; z-index: 1; } /* Twinkling stars (populated by page-stars.js — same recipe as the main site) */ @keyframes twinkle-pulse { 0%, 100% { opacity: var(--tw-hi, 0.8); transform: scale(1); } 50% { opacity: var(--tw-lo, 0.05); transform: scale(0.4); } } .tw-star { position: absolute; border-radius: 50%; pointer-events: none; animation: twinkle-pulse var(--tw-dur, 3s) ease-in-out infinite var(--tw-delay, 0s); } /* Curtain border art framing the page bottom, above the footer. mix-blend-mode: lighten melts the art's black areas into the page background (the same trick adults.html uses); the top mask softens the upper edge into the sky. */ .page-curtain { display: block; width: 100%; height: auto; /* The art's top ~third is flat sky that blends into the page background, so it reads as empty padding. Pull the image up by a width-proportional amount (the sky band scales with width) — the invisible sky overlaps the content area harmlessly (pointer-events none, blend + mask). */ margin-top: -13%; /* Same trick at the bottom: the art fades to black in its lower band, so let the footer ride up into it (footer is z-index 1, links stay centered clear of the side clouds). */ margin-bottom: -9%; pointer-events: none; position: relative; z-index: 0; mix-blend-mode: lighten; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); } /* "A Letter from Hoshi" email signup (letter-signup.js posts to Supabase) */ .letter-signup { margin: 2.6rem auto 0; max-width: 560px; text-align: center; position: relative; z-index: 1; } .letter-signup form { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; } .letter-signup input[type="email"] { flex: 1 1 240px; max-width: 330px; padding: 0.65rem 1.1rem; border-radius: 999px; border: 1px solid rgba(250, 246, 239, 0.35); background: var(--cream); color: var(--navy-deep); font-family: 'Nunito', sans-serif; font-size: 0.95rem; } .letter-signup input[name="website"] { position: absolute; left: -9999px; width: 1px; height: 1px; } .letter-signup button { font-family: 'Fredoka', sans-serif; padding: 0.65rem 1.4rem; border-radius: 999px; border: 0; background: var(--gold); color: var(--navy-deep); font-weight: 600; font-size: 0.95rem; cursor: pointer; } .letter-signup button:disabled { opacity: 0.6; cursor: wait; } .letter-signup-video { display: block; width: min(190px, 55%); margin: 0.9rem auto 0; border-radius: 14px; opacity: 1; transition: opacity 0.7s ease; } .letter-signup-msg { margin-top: 0.8rem; min-height: 1.4em; color: var(--cream); } .letter-signup-note { margin-top: 0.4rem; font-size: 0.8rem; color: rgba(250, 246, 239, 0.6); } .letter-signup-note a { color: rgba(250, 246, 239, 0.8); } .line-add { margin-top: 1.5rem; font-size: 0.9rem; color: rgba(250, 246, 239, 0.85); } .line-btn { display: inline-block; margin-top: 0.6rem; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.9rem; padding: 0.55rem 1.35rem; border-radius: 999px; background: #06C755; color: #fff; text-decoration: none; } .letter-signup .line-btn { color: #fff; } /* 1. Wordmark logo in resource-page headers (replaces the plain-text link) */ .legal-header .header-wordmark { height: 30px; width: auto; display: inline-block; vertical-align: middle; } /* Minimal EN|JP toggle for resource pages */ .page-lang-toggle { position: absolute; top: 2.6rem; right: 1.25rem; background: rgba(250, 246, 239, 0.08); border: 1px solid rgba(250, 246, 239, 0.3); border-radius: 999px; padding: 0.35rem 0.9rem; font-family: 'Fredoka', sans-serif; font-size: 0.8rem; color: rgba(250, 246, 239, 0.6); cursor: pointer; } .page-lang-toggle .lang-en.active, .page-lang-toggle .lang-jp.active { color: var(--gold); font-weight: 600; } .page-lang-toggle .lang-sep { margin: 0 0.3rem; opacity: 0.5; } .legal-header { position: relative; }