/* * ZITLAS Design System — Premium Fitness + Nutrition + AI * LOCKED PALETTE — Do not invent alternative shades as brand colors. * All platforms (Flutter + website) use identical token values. * * COLOR HIERARCHY: * 50% Warm White / White / Cream — foundation * 20% Deep Green #234B35 — health, brand, identity * 15% Tangerine #234B35 — fitness, energy, action * 5% Sage — subtle accents * 5% Warm Yellow — achievements * 2% Teal — hydration * 2% Plum — AI/premium * 1% Coral — mood/attention * * VISUAL TARGET: Premium + Energetic + Fitness-Focused * NOT: Clinical, Green-Heavy, Hospital-Like * * CRITICAL RULE: Tangerine (#234B35) is the PRIMARY ACTION COLOR for fitness CTAs. * Do NOT replace Tangerine with green for CTAs. * * NOTE on --white-rgb / --black-rgb: legacy rules build glass surfaces as * rgba(var(--white-rgb), 0.05-0.15) and text as rgba(var(--white-rgb), 0.3-0.6). * On this light theme, tokens are remapped to ink shades so the same rules * yield soft gray surfaces and readable secondary text. Use literal #fff when * you truly mean white (e.g. text on green). */ :root, html, html[data-theme="dark"], html[data-theme="light"] { /* BACKGROUNDS — light foundation with subtle variety */ --bg-primary: #FAFAF7; --bg-card: #FFFFFF; --bg-card-light: #F3F0E6; /* cream */ /* GREEN PALETTE — LOCKED PALETTE: Deep Green #234B35 */ /** Subtle wellness accent (cards, selections, backgrounds). */ --sage-green: #A8B79A; /** Primary ZITLAS Deep Green — LOCKED: #234B35 — brand identity, health, selected states. */ --primary: #234B35; --primary-hover: #2E5F47; --primary-dark: #1A3A2A; --primary-rgb: 35,75,53; /** Success uses primary green. */ --success: #234B35; --success-dark: #1A3A2A; --success-rgb: 35,75,53; /* SEMANTIC FUNCTIONAL COLORS — each with clear meaning */ /** Fitness, training, energy, active workout, calories burned. */ --fitness-orange: #234B35; /** Achievement, milestone, badge, reward, streak celebration. */ --achievement-yellow: #F4C95D; /** Hydration, recovery, water intake, health metrics. */ --hydration-teal: #3A8F8B; /** AI, Zino, intelligent recommendations, premium AI functionality. */ --ai-purple: #6B5878; /** Mood, wellbeing, stress, emotional state. */ --wellness-coral: #E76F51; /* Compatibility alias — was cyan, now purple per semantic system. */ --ai-accent: #6B5878; --ai-rgb: 107,88,120; /* TYPOGRAPHY */ --text-primary: #17221A; --text-secondary: #66716A; --text-muted: #8A968E; /* Remapped for the light theme — see note above. */ --white-rgb: 23,34,26; --black-rgb: 102,113,106; /* BORDERS & UTILITIES */ --border: #E5EBE7; --shadow: rgba(23,34,26,0.08); /* Compatibility aliases used by existing page styles. */ --bg: var(--bg-primary); --bg-alt: var(--bg-card); --bg-secondary: var(--bg-card); --surface: var(--bg-card); --surface2: var(--bg-card-light); --card: var(--bg-card); --card-bg: var(--bg-card); --card-hover: var(--bg-card-light); --card-active: var(--bg-card-light); --border-light: var(--border); --border-sub: var(--border); --accent: var(--primary); --accent-light: var(--primary-hover); --accent-hover: var(--primary-hover); --accent-dark: var(--primary-dark); --accent-glow: rgba(35,75,53,0.18); --accent-glow-s: rgba(35,75,53,0.10); --green: var(--success); --green-dark: var(--success-dark); --blue: var(--ai-accent); --cyan: var(--ai-accent); /* Semantic accent colors — each with meaning. */ --orange: var(--fitness-orange); --yellow: var(--achievement-yellow); --teal: var(--hydration-teal); --purple: var(--ai-purple); --coral: var(--wellness-coral); --text: var(--text-primary); --text-sec: var(--text-secondary); --text-1: var(--text-primary); --text-2: var(--text-secondary); --text-3: var(--text-muted); --text-dim: var(--text-muted); --radius: 24px; --radius-md: 24px; --radius-sm: 16px; --radius-xs: 12px; --radius-lg: 28px; --card-shadow: 0 10px 30px rgba(23,34,26,0.08); --glow-focus: 0 0 0 3px rgba(35,75,53,0.20); --button-shadow: 0 10px 26px rgba(35,75,53,0.28); } body { background: linear-gradient(180deg, #FAFAF7 0%, #F3F0E6 100%) fixed; color: var(--text-primary); } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .text-success { color: var(--success) !important; } .text-primary { color: var(--primary) !important; } .text-ai { color: var(--ai-accent) !important; } /* ── Shared premium background (homebg.png) ────────────────────────────── Applied to on the 5 bottom-nav pages: dashboard, diet, weekly-plan, coaches, profile. Path is relative to THIS file (assets/css/theme.css), so it resolves correctly no matter which page/depth includes it — do not copy this rule into a page-specific stylesheet with a different path. A class selector (0,1,0) outranks the plain `body { background: var(--bg) }` element selector (0,0,1) already in each page's own CSS, so this wins the cascade regardless of load order without needing !important. */ .zitlas-premium-bg { background-image: linear-gradient(rgba(250,250,247,0.45), rgba(250,250,247,0.55)), url('../homebg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh; } .bg-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 24px !important; box-shadow: var(--card-shadow) !important; } .btn-primary { background: linear-gradient(135deg, #234B35, #2E5F47) !important; color: #FFFFFF !important; border: 1px solid transparent !important; box-shadow: 0 10px 25px rgba(35,75,53,0.35) !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(35,75,53,0.40) !important; } .badge-success { background: rgba(35,75,53,0.12) !important; color: var(--success-dark) !important; border: 1px solid rgba(35,75,53,0.30) !important; } .badge-ai { background: rgba(107,88,120,0.10) !important; color: var(--ai-accent) !important; border: 1px solid rgba(107,88,120,0.26) !important; } /* Common semantic hooks used across existing pages. */ [class*="ai-badge"], [class*="badge--ai"], [class*="--ai"] { --badge-bg: rgba(107,88,120,0.10); --badge-color: var(--ai-accent); } [class*="success"], [class*="complete"], [class*="verified"], [class*="online"] { --state-color: var(--success); } /* ══════════════════════════════════════════════════════════ PREMIUM GLASS CARDS — scoped to the 5 photo-background pages (body.zitlas-premium-bg). Descendant selectors (0,2,0) beat the page stylesheets' single-class rules (0,1,0) regardless of load order, so no !important is needed. One recipe, every main card: floating, frosted, layered green glow using the semantic ZITLAS primary + dark-green for depth, never dominant color — maintains the 60–70% white/cream foundation visual principle. ══════════════════════════════════════════════════════════ */ .zitlas-premium-bg .goal-card, .zitlas-premium-bg .qs-card, .zitlas-premium-bg .swot-widget-section, .zitlas-premium-bg .focus-card, .zitlas-premium-bg .diet-hydration-card, .zitlas-premium-bg .vn-section, .zitlas-premium-bg .plan-section, .zitlas-premium-bg .tip-card, .zitlas-premium-bg .consult-section, .zitlas-premium-bg .version-history-section, .zitlas-premium-bg .wp-hero, .zitlas-premium-bg .wp-day-card, .zitlas-premium-bg .nutri-card, .zitlas-premium-bg .profile-header, .zitlas-premium-bg .settings-list, .zitlas-premium-bg .quick-actions-list, .zitlas-premium-bg .logout-section { background: rgba(255,255,255,0.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 28px; border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 15px 40px rgba(35,75,53,0.10), 0 8px 20px rgba(26,58,42,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Hero/section cards get a restrained green glow on top — subtle layering only for premium visual depth, never dominant. Maintains the light, clean aesthetic emphasized in the design system. */ .zitlas-premium-bg .goal-card, .zitlas-premium-bg .swot-widget-section, .zitlas-premium-bg .focus-card, .zitlas-premium-bg .wp-hero, .zitlas-premium-bg .plan-section { box-shadow: 0 15px 40px rgba(35,75,53,0.10), 0 8px 20px rgba(26,58,42,0.08); } /* Floating hover lift — pointer devices only, honors reduced motion */ @media (hover: hover) { .zitlas-premium-bg .goal-card:hover, .zitlas-premium-bg .qs-card:hover, .zitlas-premium-bg .swot-widget-section:hover, .zitlas-premium-bg .focus-card:hover, .zitlas-premium-bg .diet-hydration-card:hover, .zitlas-premium-bg .tip-card:hover, .zitlas-premium-bg .wp-day-card:hover, .zitlas-premium-bg .nutri-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(35,75,53,0.14), 0 10px 26px rgba(26,58,42,0.12); } } /* Quick-action tap feedback: press-in with a green glow */ .zitlas-premium-bg .qs-card:active, .zitlas-premium-bg .nutri-card:active { transform: scale(0.97); box-shadow: 0 0 24px rgba(35,75,53,0.25); } @media (prefers-reduced-motion: reduce) { .zitlas-premium-bg .goal-card, .zitlas-premium-bg .qs-card, .zitlas-premium-bg .swot-widget-section, .zitlas-premium-bg .focus-card, .zitlas-premium-bg .diet-hydration-card, .zitlas-premium-bg .tip-card, .zitlas-premium-bg .wp-day-card, .zitlas-premium-bg .nutri-card, .btn-primary { transition: none !important; transform: none !important; } }