/* ══════════════════════════════════════════════════════════════════ MAP Kids · Info pages (Safety / Terms / Privacy / Contact) Loads AFTER landing.css and speaks its language: same rem canvas (1rem = 10 design-px), cream paper, navy voice, sticker accents, boing hovers. Each page sets its accent with --pg on . ══════════════════════════════════════════════════════════════════ */ .pg{ padding:0 max(12rem, 50% - 84rem) 2rem; min-height:52vh; } /* ── Hero: friendly title with a hand-drawn squiggle and two sparks — compact, so the words start high on the page ── */ .pg-hero{ position:relative; padding:4.8rem 0 3.2rem; max-width:118rem; } .pg-title{ margin:0; font:700 7rem/1.05 "Gotham Rounded","Nunito",sans-serif; color:var(--navy); text-wrap:balance; } .pg-squig{ display:block; width:34rem;max-width:60%;height:auto; margin-top:1.6rem; color:var(--pg,var(--pink)); overflow:visible; } .pg-intro{ margin:2rem 0 0; font:500 2.6rem/1.55 "Gotham Rounded","Nunito",sans-serif; color:var(--navy); max-width:104rem; text-wrap:pretty; } /* ── "Read this with a grown-up" — a plain lead-in line ── */ .grown-up{margin:0 0 3.2rem} .grown-up p{ margin:0; font:700 2.4rem/1.5 "Gotham Rounded","Nunito",sans-serif; color:var(--ink); text-wrap:pretty; } /* ── Content: plain flowing sections — no panels, the words sit straight on the paper ── */ .pg-card + .pg-card, .grown-up + .pg-card{margin-top:3.4rem} .pg-card + .grown-up{margin-top:3.4rem} .pg-h2{ margin:0 0 1.2rem; font:700 3rem/1.2 "Gotham Rounded","Nunito",sans-serif; color:var(--ink); text-wrap:balance; } .pg-card p{ margin:0; font:500 2.2rem/1.55 "Gotham Rounded","Nunito",sans-serif; color:var(--navy); max-width:104rem; text-wrap:pretty; } .pg-card p + p{margin-top:1.4rem} /* ── Legal pages (Privacy / Terms): a plain flowing document. No panels, no subheadings — the paragraphs sit straight on the paper in the order the client supplied. They fill the full centred content box (no narrower cap) and are justified, so the block has equal margins on both sides instead of piling all the leftover space up on the right. ── */ .pg-legal > p{ margin:0; font:500 2.2rem/1.62 "Gotham Rounded","Nunito",sans-serif; color:var(--navy); max-width:none; text-align:justify; text-wrap:pretty; } .pg-legal > p + p{margin-top:2rem} .pg-legal > .pg-h2{margin-top:3.4rem} /* Safety keeps its subheadings, but its paragraphs get the same even, edge-to- edge measure — fill the content box and justify, so left and right margins match instead of leaving a gap on the right. */ .pg-justify .pg-card p{ max-width:none; text-align:justify; } .pg-link{ color:var(--pink);font-weight:700; text-decoration:underline; text-decoration-thickness:.4rem; text-decoration-color:rgba(255,31,150,.35); text-underline-offset:.5rem; transition:text-decoration-color .2s var(--ease); border-radius:.6rem; } .pg-link:hover{text-decoration-color:var(--pink)} /* big friendly pill (Safety's email, echoes .see-all) */ .pg-pill{ display:inline-flex;align-items:center;gap:1.6rem; margin-top:2.2rem; background:var(--pink);color:#fff; font:700 2.4rem/1 "Gotham Rounded","Nunito",sans-serif; padding:1.8rem 3.2rem;border-radius:99rem; box-shadow:0 .8rem 2.6rem rgba(255,31,150,.32); transition:transform .3s var(--boing), box-shadow .3s var(--ease); } .pg-pill:hover{transform:translateY(-.5rem);box-shadow:0 1.4rem 3.4rem rgba(255,31,150,.4)} .pg-pill:active{transform:translateY(-.1rem) scale(.98)} .pg-pill svg{width:3rem;height:3rem;flex:0 0 auto} /* ── Contact: three doorways ── */ .contact-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4rem; align-items:stretch; } .c-card{ --theme:var(--pink); position:relative; display:flex;flex-direction:column;align-items:flex-start;gap:2rem; background:#FFFDF6; border:.7rem solid var(--theme); border-radius:3.2rem; padding:4.2rem 4rem 4.4rem; box-shadow:0 .9rem 2.6rem rgba(20,20,31,.10); transition:transform .35s var(--boing), box-shadow .35s var(--ease); will-change:transform; } .c-card:hover{ transform:translateY(-1rem); box-shadow:0 2.6rem 5.4rem rgba(20,20,31,.18); } .c-card:active{transform:translateY(-.3rem) scale(.995)} .c-card.is-pink {--theme:#FF1F96} .c-card.is-orange{--theme:#FFA300} .c-card.is-purple{--theme:#500778} .c-icon{ width:11rem;height:11rem;color:var(--theme); margin-bottom:.6rem; } .c-icon svg{width:100%;height:100%;display:block;overflow:visible} .c-icon{transform-origin:50% 90%;transition:transform .35s var(--boing)} .c-card:hover .c-icon{transform:rotate(-6deg) scale(1.07)} .c-label{ margin:0; font:700 3.8rem/1.15 "Gotham Rounded","Nunito",sans-serif; color:var(--ink); } .c-value{ margin:0; font:500 2.6rem/1.55 "Gotham Rounded","Nunito",sans-serif; color:var(--navy); text-wrap:pretty; overflow-wrap:anywhere; /* long email survives narrow columns */ } /* the phone number reads as ONE thing — plain spaces + nowrap (the Gotham Rounded OTF ships a broken no-break-space glyph, so is off the table in this face) */ .c-value.c-nowrap{white-space:nowrap;overflow-wrap:normal} .c-go{ margin-top:auto; display:inline-flex;align-items:center;gap:1.4rem; background:var(--theme);color:#fff; font:700 2.4rem/1 "Gotham Rounded","Nunito",sans-serif; padding:1.9rem 3.2rem;border-radius:99rem; box-shadow:0 .7rem 2rem rgba(20,20,31,.16); transition:transform .3s var(--boing), box-shadow .3s var(--ease); } .c-card:hover .c-go{transform:translateY(-.3rem)} .c-go svg{width:2.6rem;height:2.6rem;transition:transform .3s var(--boing)} .c-card:hover .c-go svg{transform:translateX(.5rem)} /* Tuesday secret — a sticker leaning on the visit card */ .c-sticker{ position:absolute;top:-3rem;right:-2.2rem;z-index:2; transform:rotate(6deg); background:var(--face); color:var(--ink); font:700 2.1rem/1.3 "Gotham Rounded","Nunito",sans-serif; padding:1.6rem 2.4rem; border-radius:2rem; max-width:26rem; box-shadow:0 .8rem 2rem rgba(120,60,0,.22); text-wrap:balance; transition:transform .3s var(--boing); } .c-card:hover .c-sticker{transform:rotate(2deg) scale(1.04)} /* ── entrance: soft rise, staggered — landing.css's reduced-motion block zeroes these for prefers-reduced-motion. The rise animates the standalone `translate` property and fills `backwards`, so `transform` stays free for the hover tilts/lifts: a `both` fill on `transform` deadened every hover transition and made the entrance re-run on mouse-leave. ── */ @keyframes pg-rise{ from{opacity:0;translate:0 2.4rem} to{opacity:1;translate:0 0} } .pg-hero > *,.pg-flow > *{ animation:pg-rise .7s var(--ease) backwards; } .pg-flow > :nth-child(1){animation-delay:.12s} .pg-flow > :nth-child(2){animation-delay:.2s} .pg-flow > :nth-child(3){animation-delay:.28s} .pg-flow > :nth-child(4){animation-delay:.36s} .pg-flow > :nth-child(5){animation-delay:.44s} .pg-flow > :nth-child(6){animation-delay:.52s} .pg-flow > :nth-child(n+7){animation-delay:.6s} .pg-hero > :nth-child(2){animation-delay:.06s} .pg-hero > :nth-child(3){animation-delay:.12s} .pg-hero > :nth-child(n+4){animation-delay:.18s} /* footer: light up the page you're on */ .foot-links a.is-here{color:var(--pink)} .foot-links a.is-here::after{width:100%} /* ── ≤720px re-flow (mirrors landing.css's breakpoint) ── */ @media (max-width:720px){ .pg{padding:0 18px 8px} .pg-hero{padding:22px 0 16px} .pg-title{font-size:30px} .pg-squig{width:150px;margin-top:8px} .pg-intro{font-size:14px;margin-top:10px;max-width:none;padding-right:0} .grown-up{margin-bottom:14px} .grown-up p{font-size:13px} .pg-card + .pg-card,.grown-up + .pg-card{margin-top:16px} .pg-card + .grown-up{margin-top:16px} .pg-h2{font-size:17px;margin-bottom:6px} .pg-card p{font-size:12.5px} .pg-card p + p{margin-top:7px} /* On phones the measure is too narrow to justify cleanly — fall back to a ragged-right flow. */ .pg-legal > p{font-size:12.5px;max-width:none;text-align:left} .pg-legal > p + p{margin-top:11px} .pg-legal > .pg-h2{margin-top:16px} .pg-justify .pg-card p{text-align:left} .pg-pill{font-size:13px;padding:11px 18px;gap:8px;margin-top:12px} .pg-pill svg{width:16px;height:16px} .contact-grid{grid-template-columns:1fr;gap:26px} .c-card{border-width:4px;border-radius:16px;padding:20px 18px 22px;gap:10px} .c-icon{width:54px;height:54px} .c-label{font-size:20px} .c-value{font-size:14px} .c-go{font-size:13px;padding:11px 18px;gap:8px} .c-go svg{width:14px;height:14px} .c-sticker{font-size:11px;padding:9px 12px;border-radius:10px;max-width:150px;top:-16px;right:-6px} } /* ── Info-page background (client request): a flat #FFFDF6 sheet with the text sitting straight on it — replaces the cream + paper-grain surface now that the bordered content boxes are gone. Scoped here because only the four info pages load pages.css; the landing page is untouched. ── */ body{background:#FFFDF6} body::before{display:none} /* kill the paper grain on info pages */