/* Baseline Lifestyle — Theme Palettes Centralised colour tokens + derived surfaces per system page. Each page chooses a palette via . */ :root{ /* Shared layout tokens (sitewide) */ --homebar-h: 56px; --maxw: 1500px; --gutter: 24px; --gutter-lg: 64px; --radius-lg: 22px; --radius: 16px; --space-1: 10px; --space-2: 16px; --space-3: 22px; --space-4: 30px; --dur: 120ms; /* Shared fonts */ --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-soft: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; /* Motion tokens (used across pages) */ --ease-soft: cubic-bezier(.2,.8,.2,1); --ease-cushion: cubic-bezier(.16,1,.3,1); --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms; /* Extended spacing (referenced by legacy inline CSS) */ --space-5: 24px; --space-6: 32px; /* Header offsets (updated by JS). Header is in-flow; banner is fixed. */ --header-h: 0px; } /* ----------------------------- HOME (Index) -------------------------------- */ body[data-app="home"]{ --ink:#23110b; --muted:#5f2a18; /* Scrollbars (sitewide theme match) */ --scroll-track: rgba(255,210,106,0.28); --scroll-thumb: rgba(143,15,31,0.56); --scroll-thumb-hover: rgba(143,15,31,0.74); /* Split-gradient source colours (index.html) */ --food-deep:#8f0f1f; --food-red:#e6392f; --food-orange:#f08a24; --food-gold:#ffb000; --food-yellow:#ffd26a; --skin-cream:#f3e3d2; --skin-milk:#f0dfd5; --skin-wash:#ffd2b8; --skin-peach:#f7b18f; --page-bg: linear-gradient(90deg, var(--food-deep) 0%, var(--food-orange) 18%, var(--food-gold) 34%, var(--food-yellow) 50%, var(--skin-cream) 50%, var(--skin-milk) 70%, var(--skin-wash) 86%, var(--skin-peach) 100% ); } /* ----------------------------- FOOD SYSTEM -------------------------------- */ body[data-app="food"]{ --bg: #b11226; --bg-2: #e6392f; --bg-3: #ffb000; --card: rgba(255,176,0,0.14); --ink: #1b0b09; --muted: #3b1a13; --accent: #e6392f; --accent-2: #5a0c15; --accent-3: #f08a24; --accent-4: #ffd26a; --accent-soft: rgba(255,210,106,0.28); --border: rgba(27,11,9,0.18); --border-2: rgba(27,11,9,0.26); --ring: rgba(255,210,106,0.52); --shadow: 0 18px 46px rgba(0,0,0,0.16); --shadow-soft: 0 12px 30px -22px rgba(194,31,43,0.26); --glow: 0 0 0 3px rgba(255,210,106,0.18); --glow-soft: 0 16px 34px -28px rgba(240,138,36,0.26); --tip-bg: rgba(90,12,21,0.95); --tip-ink: #ffe8bf; --tip-border: rgba(255,210,106,0.32); /* Links */ --link: #b11c2a; --link-hover:#7a1a21; /* Scrollbars (sitewide theme match) */ --scroll-track: rgba(255,210,106,0.34); --scroll-thumb: rgba(90,12,21,0.58); --scroll-thumb-hover: rgba(90,12,21,0.74); /* Derived surfaces */ --page-bg: linear-gradient(90deg, var(--bg) 0%, var(--accent-3) 18%, var(--bg-3) 34%, var(--accent-4) 50%, var(--bg-3) 66%, var(--accent-3) 82%, var(--bg) 100% ); --card-bg: linear-gradient(180deg, rgba(255,210,106,0.96), rgba(240,138,36,0.26) ); --filter-bg: linear-gradient(180deg, rgba(255,210,106,0.60), rgba(240,138,36,0.18) ); /* “Show all” surface is reused for: Show all, banner dropdown, print buttons */ --showall-bg: linear-gradient(180deg, rgba(255,210,106,0.42), rgba(240,138,36,0.16) ); --showall-border: rgba(200,100,50,0.22); /* Fixed banner bar (match food theme: solid, deeper than the page background) */ --homebar-bg: var(--bg-2); --homebar-border: rgba(27,11,9,0.18); } /* ----------------------------- SKIN SYSTEM -------------------------------- */ body[data-app="skin"]{ --bg: #f3e3d2; /* cream */ --bg-2: #ffd2b8; /* wash */ --bg-3: #f0dfd5; /* milk */ --card: rgba(239,127,89,0.07); --ink: #2b1210; --muted: #6a3a2c; --accent: #ef7f59; --accent-2: #b23b24; --accent-3: #c3543a; --accent-4: #f4c6b7; --accent-soft: #fff0e8; --border: rgba(43,18,16,0.14); --border-2: rgba(239,127,89,0.24); --ring: rgba(239,127,89,0.40); --shadow: 0 18px 46px rgba(0,0,0,0.10); --shadow-soft: 0 12px 30px -22px rgba(239,127,89,0.42); --glow: 0 26px 64px -46px rgba(239,127,89,0.72); --glow-soft: 0 0 0 3px rgba(239,127,89,0.12); --tip-bg: rgba(43,18,16,0.94); --tip-ink: #fff0e8; --tip-border: rgba(239,127,89,0.28); /* Links */ --link: #8b4633; --link-hover:#6f3526; /* Scrollbars (sitewide theme match) */ --scroll-track: rgba(255,240,232,0.62); --scroll-thumb: rgba(178,59,36,0.56); --scroll-thumb-hover: rgba(178,59,36,0.74); /* Index (centre → far right) peach tone already present in your skin CSS */ --skin-peach: #f7b18f; /* Derived surfaces */ /* Background matches the Baseline Natural Skincare half of the home page: centre → far right, then mirrored to the left. (Index right-half stops: 50/70/86/100 mirrored → 0/14/30/50/70/86/100) */ --page-bg: linear-gradient(90deg, var(--skin-peach) 0%, var(--bg-2) 14%, var(--bg-3) 30%, var(--bg) 50%, var(--bg-3) 70%, var(--bg-2) 86%, var(--skin-peach) 100% ); --card-bg: linear-gradient(180deg, rgba(247,233,220,0.94), rgba(255,210,184,0.86) ); --filter-bg: linear-gradient(180deg, rgba(246,228,214,0.92), rgba(255,210,184,0.38) ); --showall-bg: linear-gradient(180deg, rgba(246,228,214,0.88), rgba(255,231,214,0.82) ); --showall-border: rgba(239,127,89,0.22); } /* Ensure the skin pages rely on the theme background (no extra overlay layers). */ body[data-app="skin"]::before, body[data-app="skin"]::after{ content: none !important; display: none !important; } /* Apply the per-page gradient backgrounds consistently */ body[data-app="home"], body[data-app="food"], body[data-app="skin"]{ background: var(--page-bg); background-attachment: fixed; background-size: 100% 100%; }