/* © 2024 Victor Kaminsky. All rights reserved. */ /* Suggested by ChatGPT palettes: Palette 1: Modern & Minimalist Navigation Bar: Deep Navy (#02075D) - Conveys professionalism and focus. Information Bar: Cool Gray (#8A8D93) - Offers a sleek, modern contrast. App Area Background: Light Gray (#F0F2F5) - Keeps the area bright and reduces strain. Accent Color: Electric Blue (#007BFF) - Adds a vibrant highlight for buttons and icons. Primary Text: Dark Slate Gray (#2F4F4F) - Offers excellent readability against lighter backgrounds without the harshness of pure black. Secondary Text/Highlights: Sky Blue (#87CEEB) - Works well for links or highlighted information against both dark and light backgrounds. Logo Color: Silver (#C0C0C0) - A sleek and modern color that stands out against both the deep navy of the navigation bar and the lighter areas of the app. For added visibility on lighter backgrounds, consider adding a subtle drop shadow or border in a darker shade like Deep Navy (#02075D). Navigation Bar Text: Light Gray (#E8E8E8) - Provides a high contrast against the Deep Navy background, ensuring readability. Information Bar Text: Dark Gray (#4D4D4D) - Offers sufficient contrast against the Cool Gray background, maintaining the minimalist aesthetic. Palette 2: Warm & Inviting Navigation Bar: Earthy Brown (#5C4033) - Warm, grounding, and sophisticated. Information Bar: Soft Beige (#F5F5DC) - Invites a sense of calm and clarity. App Area Background: Cream (#FFFCEB) - A soft, light backdrop that's easy on the eyes. Accent Color: Burnt Sienna (#EE6F57) - A strong, warm color that grabs attention. Primary Text: Dark Chocolate (#45322E) - A softer alternative to black that complements the warm tones. Secondary Text/Highlights: Gold (#FFD700) - Adds a touch of luxury and attention-grabbing highlights without overwhelming. Logo Color: Copper (#B87333) - Reflects warmth and reliability, offering good visibility against both the earthy brown and cream tones. This metallic shade bridges the gap between professional and inviting, fitting the palette's aesthetic. Navigation Bar Text: Cream (#FFFCEB) - A light, warm color that stands out against the Earthy Brown, ensuring the text is easily readable. Information Bar Text: Dark Brown (#654321) - Complements the Soft Beige background with enough contrast to be easily legible. Palette 3: High Contrast & Dynamic Navigation Bar: Charcoal (#36454F) - Strong, but less harsh than black. Information Bar: Platinum (#E5E4E2) - A light, neutral tone for balance. App Area Background: Ghost White (#F8F8FF) - Maximizes brightness and contrast. Accent Color: Crimson (#DC143C) - Energizes the design with a pop of color. Primary Text: Onyx (#353839) - A deep gray that maintains the high-contrast theme for clear readability. Secondary Text/Highlights: Tomato (#FF6347) - A vibrant, yet not overpowering highlight color that pairs well with both light and dark backgrounds. Logo Color: Pearl White (#FDEEF4) - A soft, off-white color that can hold its own against the high-contrast backgrounds of this palette. To ensure legibility on lighter areas, outline the logo in Charcoal (#36454F) to maintain its prominence. Navigation Bar Text: Ghost White (#F8F8FF) - A bright, clear choice for maximized readability against the Charcoal background. Information Bar Text: Dark Slate Gray (#2F4F4F) - Ensures excellent legibility against the Platinum background, contributing to the dynamic contrast. Palette 4: Cool & Techy Navigation Bar: Midnight Blue (#003366) - Deep and thoughtful, suggests reliability. Information Bar: Slate Gray (#708090) - Matches well with tech-oriented designs. App Area Background: Alice Blue (#F0F8FF) - A subtle, soothing backdrop. Accent Color: Neon Green (#39FF14) - Bright and futuristic, perfect for highlighting. Primary Text: Gunmetal (#2A3439) - Dark enough for excellent legibility, reflecting the tech-inspired theme. Secondary Text/Highlights: Electric Cyan (#00FFFF) - Provides a futuristic feel, ideal for key actions and links, enhancing the techy vibe. Logo Color: Platinum (#E5E5E5) - A futuristic and polished color that complements the techy vibe. It works well against both the midnight blue navigation bar and the lighter app area. For differentiation, an outline or shadow in Midnight Blue (#003366) could enhance visibility. Navigation Bar Text: Alice Blue (#F0F8FF) - Offers a soft yet contrasting hue against the Midnight Blue, perfect for a techy ambiance. Information Bar Text: Dark Slate Blue (#483D8B) - Provides a striking contrast against the Slate Gray, fitting the cool and technological theme. Palette 5: Nature-Inspired & Calming Navigation Bar: Moss Green (#8A9A5B) - Reflects stability and growth. Information Bar: Pale Spring Bud (#ECEBBD) - Light and refreshing. App Area Background: Honeydew (#F0FFF0) - Provides a clean, tranquil canvas. Accent Color: Forest Green (#228B22) - Brings a lively, natural element into focus. Primary Text: Olive Drab (#6B8E23) - A natural, dark green that reads well on light backgrounds, staying true to the theme. Secondary Text/Highlights: Sea Green (#2E8B57) - A softer green for highlighted text, creating a serene and focused environment. Logo Color: Sage Green (#9DC183) - A soft, muted green that resonates with the nature-inspired theme. It's subtle yet distinct against both darker and lighter greens, maintaining consistency without overwhelming the design. Navigation Bar Text: Pale Green (#98FB98) - A soft green that contrasts well with Moss Green, enhancing the nature-inspired theme without overpowering it. Information Bar Text: Forest Green (#228B22) - Dark enough to stand out against the Pale Spring Bud background, echoing the calming, natural vibe. */ :root { --nav-bg-color: #009999; --nav-bg-color-dark: #004d4d; --nav-text-color: #E8E8E8; --nav-top-bg-color: #003434; --nav-top-text-color: #f8ffff; --info-bg-color: #ff9934; --app-bg-color: #F0F2F5; --accent-color: #007BFF; --primary-text-color: #2F4F4F; --secondary-text-color: #87CEEB; --logo-color: #C0C0C0; --info-text-color: #003467; }