/* ============================================================ foodprints — Brand system for content / legal / support pages Self-contained (does not depend on styles.css). Cream paper, Titan One titles, terracotta accents, espresso footer — matches the Instagram @foodprintsapp identity used on the landing page. Reuses the existing .legal-* / .nav / .footer class names so page bodies don't need to change; only the + nav-brand markup do. ============================================================ */ :root { --terra: #C75B3F; --terra-deep: #A8452C; --cream: #FBF7EF; --cream-2: #F3EDE0; --ink: #14110E; --espresso: #3A2018; --cheese: #F0A62E; --text-primary: #14110E; --text-secondary: rgba(20,17,14,.80); --text-tertiary: rgba(20,17,14,.55); --border: rgba(20,17,14,.12); --display: 'Titan One', 'Inter', system-ui, sans-serif; --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --r-md: 16px; --r-full: 999px; --maxw: 1180px; --shadow-md: 0 12px 30px rgba(20,17,14,.14); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--body); background: var(--cream); color: var(--text-primary); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---------- Nav (solid terracotta bar over cream pages) ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--terra); box-shadow: 0 2px 14px rgba(20,17,14,.10); } .nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .nav-brand { display: flex; align-items: center; gap: 10px; } .nav-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--cream); padding: 3px; } .nav-wordmark { font-family: var(--display); font-size: 1.35rem; color: var(--cream); letter-spacing: -.01em; } /* Legacy lockup image, if a page still uses it */ .nav-lockup { height: 26px; width: auto; } .nav-actions { display: flex; align-items: center; gap: 8px; } .nav-link { color: rgba(251,247,239,.85); font-weight: 600; font-size: .95rem; padding: 10px 14px; border-radius: var(--r-full); transition: color .2s, background .2s; } .nav-link:hover { color: var(--cream); background: rgba(251,247,239,.12); } /* Language switch — a bordered pill so it reads as a toggle, not a page link. */ .nav-lang { border: 1px solid rgba(251,247,239,.45); color: var(--cream); } .nav-lang:hover { background: rgba(251,247,239,.18); } /* ---------- Article layout ---------- */ .legal-main { max-width: 820px; margin: 0 auto; padding: 128px 24px 96px; } .legal-header { padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--border); } .legal-doc-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -.005em; color: var(--espresso); /* Long German compounds (e.g. "Nutzungsbedingungen") in the heavy display face overflow narrow phones — let them wrap/hyphenate instead of clipping. */ overflow-wrap: break-word; hyphens: auto; text-wrap: balance; } .legal-meta { margin-top: 14px; font-family: var(--body); font-size: .85rem; color: var(--text-tertiary); letter-spacing: .01em; text-transform: uppercase; font-weight: 600; } .legal-body { color: var(--text-secondary); font-size: 1rem; line-height: 1.7; } .legal-body h2 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.005em; color: var(--espresso); margin: 44px 0 14px; } .legal-body h3 { font-family: var(--body); font-weight: 800; font-size: 1.1rem; color: var(--text-primary); letter-spacing: -.01em; margin: 30px 0 8px; } .legal-body p { margin: 0 0 14px; } .legal-body strong { color: var(--text-primary); font-weight: 700; } .legal-body a { color: var(--terra); text-decoration: underline; text-underline-offset: 2px; } .legal-body a:hover { color: var(--terra-deep); } .legal-body ul { margin: 0 0 16px; padding-left: 1.25rem; list-style: disc; } .legal-body li { margin: 0 0 6px; } .legal-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em; background: var(--cream-2); padding: 1px 5px; border-radius: 4px; } .legal-body blockquote { margin: 0 0 18px; padding: 16px 20px; background: var(--cream-2); border-left: 3px solid var(--terra); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--text-primary); font-size: .9375rem; line-height: 1.6; } .legal-body hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; } .legal-body .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 20px; border: 1px solid var(--border); border-radius: var(--r-md); } .legal-body table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 460px; } .legal-body thead th { background: var(--cream-2); text-align: left; font-weight: 700; color: var(--text-primary); } .legal-body th, .legal-body td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; } .legal-body tbody tr:last-child td { border-bottom: none; } .legal-version-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: .8125rem; color: var(--text-tertiary); font-style: italic; } /* ---------- Footer (espresso) ---------- */ .footer { background: var(--espresso); color: rgba(251,247,239,.70); padding: 48px 0 40px; } .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .footer-copy { font-size: .9rem; } .footer-links { display: flex; gap: 22px; flex-wrap: wrap; } .footer-links a { color: rgba(251,247,239,.70); font-size: .9rem; transition: color .2s; } .footer-links a:hover { color: var(--cheese); } @media (max-width: 640px) { .legal-main { padding: 92px 18px 64px; } .nav-inner { padding: 12px 16px; } .nav-wordmark { font-size: 1.15rem; } .nav-link { padding: 8px 11px; font-size: .9rem; } .legal-doc-title { font-size: 1.55rem; line-height: 1.12; } .legal-header { padding-bottom: 18px; margin-bottom: 24px; } .legal-body { font-size: .95rem; } .legal-body h2 { font-size: 1.2rem; margin: 32px 0 12px; overflow-wrap: break-word; hyphens: auto; } .legal-body h3 { font-size: 1.02rem; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto; } }