/* ============================================================================ Peptide Manager Pro — v10 Design System (shared, site-wide) Single source of truth for design tokens + reusable chrome. Linked into every served HTML page; matches the v10 LIGHT homepage. Architecture: 1. :root — canonical v10 --color-* tokens (verbatim from directive) 2. :root — legacy --pmp-* / bespoke token REMAP to v10 LIGHT values, so existing pages flip centrally (link this sheet LAST in so this :root wins the cascade over each page's inline dark :root). 3. .v10 — opt-in v10 chrome (nav / footer / buttons / cards / sections), scoped so it never clobbers a page that doesn't opt in. ============================================================================ */ :root { /* ---- canonical v10 tokens ---- */ --color-bg: #FBFAF7; --color-bg-tint: #F5F2EC; --color-text: #14181B; --color-text-soft: #4A5158; --color-text-muted: #4A5158; --color-rule: #E4E0D6; --color-accent: #007299; --color-accent-soft: #E6F5FA; --color-accent-bright: #00d4ff; --color-green: #00794f; --color-warm: #cc5429; --color-warm-soft: #FDE8DC; --color-warm-bright: #ff6b35; --color-smoke: #2A2F36; --color-smoke-soft: #3A3F47; --max-width: 1100px; --max-text: 680px; --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); /* ---- legacy --pmp-* remap -> v10 LIGHT ---- Existing pages reference these names with dark values in their inline :root. Redefining them here (sheet linked last) flips them to v10 light while preserving each page's component layout. Bright cyan is mapped to the READABLE accent (#007299) because the legacy pages use --pmp-cyan for accent TEXT/links, which would be invisible as #00d4ff on a light bg. */ --pmp-cyan: #007299; --pmp-cyan-dark: #00657f; --pmp-green: #00794f; --pmp-green-dark: #008f5e; --pmp-text: #14181B; --pmp-text-secondary: #4A5158; --pmp-text-tertiary: #4A5158; --pmp-bg: #FBFAF7; --pmp-surface: #F5F2EC; --pmp-surface-2: #EFEBE1; --pmp-border: #E4E0D6; --pmp-border-light: #EDEAE1; --pmp-success: #00794f; --pmp-amber: #b45309; --pmp-amber-bg: rgba(180, 83, 9, 0.10); /* legacy "orange" names (already repurposed to cyan/green on dark pages) */ --pmp-orange: #007299; --pmp-orange-dark: #00657f; --pmp-orange-glow: #00794f; --pmp-orange-pale: rgba(0, 153, 204, 0.08); /* bespoke calculator-hub token names (generic) -> v10 light */ --bg: #FBFAF7; --surface: #F5F2EC; --surface2: #EFEBE1; --border: #E4E0D6; --text: #14181B; --muted: #4A5158; --accent: #007299; --accent2: #00794f; --warning: #b45309; --error: #c0392b; --success: #00794f; --accent-bg: rgba(0, 153, 204, 0.07); } /* ============================================================================ v10 CHROME — opt-in via class="v10" on . Scoped so it never affects pages that don't opt in. Mirrors the homepage nav/footer/buttons/sections. ============================================================================ */ .v10 { font-family: 'Syne', -apple-system, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .v10 .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } .v10 .narrow { max-width: var(--max-text); margin: 0 auto; } .v10 .mono { font-family: 'JetBrains Mono', monospace; } .v10 ::selection { background: var(--color-accent-soft); } /* ---- nav ---- */ .v10 .nav { padding: 1.5rem 0; background: rgba(251, 250, 247, 0); position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: all 0.4s var(--ease-premium); border-bottom: 1px solid transparent; } .v10 .nav.scrolled { background: rgba(251, 250, 247, 0.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom-color: var(--color-rule); padding: 1rem 0; } .v10 .nav-inner { display: flex; align-items: center; justify-content: space-between; } .v10 .logo-nav { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-text); text-decoration: none; display: flex; align-items: center; gap: 0.6rem; } .v10 .logo-nav-mark { width: 22px; height: 22px; border-radius: 5px; display: block; } .v10 .nav-links { display: flex; gap: 2rem; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; } .v10 .nav-links a { color: var(--color-text-soft); text-decoration: none; transition: color 0.2s; } .v10 .nav-links a:hover { color: var(--color-accent); } .v10 .nav-right { display: flex; align-items: center; gap: 1.5rem; } .v10 .nav-signin { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 600; color: var(--color-text); text-decoration: none; padding: 0.5rem 0.9rem; border: 1px solid var(--color-text-soft); border-radius: 6px; transition: color 0.2s, border-color 0.2s, background 0.2s; } .v10 .nav-signin:hover { color: var(--color-accent); border-color: var(--color-accent); background: rgba(0,212,255,.06); } @media (max-width: 640px) { .v10 .nav-links { display: none; } } /* ---- buttons ---- */ .v10 .btn { display: inline-block; padding: 0.95rem 1.85rem; border-radius: 8px; font-family: 'Syne', sans-serif; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all 0.35s var(--ease-premium); border: none; cursor: pointer; position: relative; overflow: hidden; } .v10 .btn-primary { background: var(--color-accent); color: #fff; box-shadow: 0 1px 0 rgba(0, 153, 204, 0.2); } .v10 .btn-primary:hover { background: var(--color-accent-bright); color: var(--color-text); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 212, 255, 0.25); } .v10 .btn-text { color: var(--color-text-soft); font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; text-decoration: none; border-bottom: 1px solid var(--color-rule); padding-bottom: 2px; transition: all 0.25s var(--ease-premium); } .v10 .btn-text:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); } /* ---- sections / headings ---- */ .v10 section { padding: 7rem 0; } .v10 .section-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--color-warm); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; } .v10 .section-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--color-warm); } .v10 h2 { font-size: clamp(1.85rem, 3.5vw, 2.85rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 1.25rem; max-width: 720px; } .v10 h2 .accent { color: var(--color-accent); } .v10 .section-intro { font-size: 1.15rem; color: var(--color-text-soft); margin-bottom: 3.5rem; max-width: 620px; line-height: 1.55; } /* ---- card ---- */ .v10 .card { background: var(--color-bg-tint); border: 1px solid var(--color-rule); border-radius: 14px; padding: 1.75rem; } /* ---- footer ---- */ .v10 .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; } .v10 .footer-brand .logo-nav { display: inline-flex; margin-bottom: 1rem; font-size: 0.9rem; } .v10 .footer-brand p { font-size: 0.9rem; color: var(--color-text-soft); line-height: 1.6; max-width: 320px; } .v10 .footer-col h4 { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1rem; font-weight: 700; } .v10 .footer-col a { display: block; color: var(--color-text-soft); text-decoration: none; font-size: 0.9rem; padding: 0.35rem 0; transition: color 0.2s; } .v10 .footer-col a:hover { color: var(--color-accent); } .v10 .footer-bottom { padding-top: 2rem; border-top: 1px solid var(--color-rule); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--color-text-muted); letter-spacing: 0.04em; } @media (max-width: 720px) { .v10 .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .v10 .footer-brand { grid-column: 1 / -1; } } /* ────────────────────────────────────────────────────────────────────────── 4. Universal dark-leak fixes for legacy shared chrome These legacy components hardcode dark glass / low-contrast gray that bypass the token system (sticky nav background, fixed social sidebar inline styles, footer social row). Forced to v10 LIGHT site-wide via !important so they override inline styles + per-page rules on every page that links this sheet. (The v10 homepage does NOT link this sheet, so it is unaffected.) ────────────────────────────────────────────────────────────────────────── */ .site-nav { background: rgba(251, 250, 247, 0.85) !important; } .nav-back { color: var(--color-text-soft) !important; } .nav-back:hover { color: var(--color-accent) !important; } #social-sidebar a { background: rgba(251, 250, 247, 0.85) !important; color: var(--color-text-soft) !important; border-color: var(--color-rule) !important; } #social-sidebar a:hover { background: rgba(0, 153, 204, 0.12) !important; color: var(--color-accent) !important; } .footer-social-row a { color: var(--color-text-soft) !important; } .footer-social-row a:hover { color: var(--color-accent) !important; }