/* PupPath website — the app's palette, and nothing loaded from anywhere else. Nunito is served from this origin rather than from a font CDN: the privacy policy says the site makes no third-party requests, and that has to be true of the page making the claim. */ @font-face { font-family: Nunito; font-weight: 400; font-display: swap; src: url(nunito-400.woff2) format('woff2'); } @font-face { font-family: Nunito; font-weight: 800; font-display: swap; src: url(nunito-800.woff2) format('woff2'); } :root { --sage: #567f63; --sage-dark: #40604a; --cream: #fbf7f0; --surface: #ffffff; --border: #e6ded0; --ink: #2f3a34; --muted: #69746c; --warm: #f2a65a; --radius: 18px; --measure: 720px; } * { box-sizing: border-box; } body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.65 Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-text-size-adjust: 100%; } /* Only the chosen language is shown. The default is set before paint by assets/site.js, so no other language is ever briefly visible. */ /* Descendant, not child: data-lang sits on while main and footer sit inside , so a child combinator matches nothing and every language renders at once. */ [data-lang] main, [data-lang] footer { display: none; } [data-lang='en'] main[lang='en'], [data-lang='en'] footer[lang='en'], [data-lang='de'] main[lang='de'], [data-lang='de'] footer[lang='de'], [data-lang='fr'] main[lang='fr'], [data-lang='fr'] footer[lang='fr'] { display: block; } /* Until the script runs there is no data-lang at all, and hiding nothing would flash all three languages. Hide them, then let the script reveal one. */ main, footer { display: none; } .bar { background: var(--sage); color: var(--cream); padding: 14px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .bar a.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 800; font-size: 21px; letter-spacing: -0.4px; } .bar img { width: 34px; height: 34px; display: block; } .langs { margin-left: auto; display: flex; gap: 6px; } .langs button { font: inherit; font-weight: 800; font-size: 14px; color: var(--cream); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; padding: 5px 13px; cursor: pointer; } .langs button[aria-pressed='true'] { background: var(--cream); color: var(--sage-dark); border-color: var(--cream); } main, footer { max-width: var(--measure); margin: 0 auto; padding: 0 20px; } h1 { font-size: clamp(30px, 6vw, 42px); font-weight: 800; line-height: 1.15; letter-spacing: -0.8px; margin: 36px 0 10px; } h2 { font-size: clamp(21px, 4vw, 26px); font-weight: 800; margin: 38px 0 10px; letter-spacing: -0.3px; } h3 { font-size: 18px; font-weight: 800; margin: 26px 0 6px; } p, li { color: var(--ink); } .lead { font-size: 19px; color: var(--muted); } a { color: var(--sage-dark); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin: 18px 0; } .card.warm { background: #fdf3e7; border-color: #f2e0c8; } dl.faq dt { font-weight: 800; margin-top: 18px; } dl.faq dd { margin: 4px 0 0; color: var(--muted); } .shots { display: flex; gap: 16px; margin: 26px 0; overflow-x: auto; padding-bottom: 6px; } .shots img { width: 210px; flex: none; border-radius: 22px; border: 1px solid var(--border); } .stores { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; } .stores a { background: var(--sage); color: var(--cream); text-decoration: none; font-weight: 800; border-radius: 999px; padding: 12px 22px; } /* The browser version is the one link here that works today, so it is styled as an alternative rather than a third store. */ .stores a.ghost { background: transparent; color: var(--sage-dark); border: 2px solid var(--sage); } .meta { color: var(--muted); font-size: 15px; } /* Anything still bracketed is a blank the publisher has to fill in before this site goes up — made loud on purpose so it cannot ship unnoticed. */ .todo { background: #ffe9d6; border-bottom: 2px solid var(--warm); padding: 0 4px; font-weight: 800; } footer { border-top: 1px solid var(--border); margin-top: 54px; padding-top: 20px; padding-bottom: 46px; color: var(--muted); font-size: 15px; } footer nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; } @media (prefers-color-scheme: dark) { :root { --cream: #1b201d; --surface: #242b26; --border: #343d37; --ink: #eef2ee; --muted: #a3aea7; --sage-dark: #8fb79c; } .card.warm { background: #38301f; border-color: #4a3f29; } .todo { background: #4a3a22; } }