/** * IfOnly.ai Unified Theme System * Liquid Glass Design Language * * Usage: Link this file in your template's * All pages inherit consistent branding while allowing contextual backgrounds */ :root { /* ===== BRAND COLORS ===== */ --brand-orange: #F7931A; --brand-orange-light: #FFB84D; --brand-orange-dark: #d17515; --brand-orange-glow: rgba(247, 147, 26, 0.4); /* ===== LIQUID GLASS SYSTEM ===== */ --glass-bg: rgba(255, 255, 255, 0.08); --glass-bg-hover: rgba(255, 255, 255, 0.12); --glass-bg-strong: rgba(255, 255, 255, 0.15); --glass-border: rgba(255, 255, 255, 0.18); --glass-border-strong: rgba(255, 255, 255, 0.25); --glass-blur: 20px; --glass-blur-strong: 40px; --glass-radius: 20px; --glass-radius-lg: 32px; --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* ===== TEXT COLORS ===== */ --text-primary: #FFFFFF; --text-secondary: rgba(255, 255, 255, 0.7); --text-tertiary: rgba(255, 255, 255, 0.5); --text-muted: rgba(255, 255, 255, 0.4); /* ===== STATUS COLORS ===== */ --color-success: #10B981; --color-success-glow: rgba(16, 185, 129, 0.4); --color-warning: #FB923C; --color-warning-glow: rgba(251, 146, 60, 0.4); --color-danger: #EF4444; --color-danger-glow: rgba(239, 68, 68, 0.4); /* ===== ACCENT COLORS ===== */ --accent-purple: #9B59B6; --accent-purple-dark: #6B46C1; --accent-violet: #8B5CF6; --accent-pink: #EC4899; --accent-gold: #FFD700; --accent-gold-light: #FFAA00; /* ===== DARK BACKGROUNDS ===== */ --bg-dark: #0a0a0f; --bg-dark-elevated: #141420; --bg-dark-card: #1a1a2e; --bg-gradient-dark: linear-gradient(180deg, #0d0d1a 0%, #1a1a2e 50%, #0d0d1a 100%); --bg-gradient-purple: linear-gradient(135deg, #9B59B6 0%, #6B46C1 100%); --bg-gradient-machine: linear-gradient(180deg, #2a1f4e 0%, #1a1035 100%); /* ===== TYPOGRAPHY ===== */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-lg: 18px; --font-size-xl: 24px; --font-size-2xl: 32px; --font-size-3xl: 48px; /* ===== SPACING ===== */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; /* ===== TRANSITIONS ===== */ --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; /* ===== SAFE AREAS (iOS) ===== */ --safe-area-inset-top: env(safe-area-inset-top); --safe-area-inset-bottom: env(safe-area-inset-bottom); --safe-area-inset-left: env(safe-area-inset-left); --safe-area-inset-right: env(safe-area-inset-right); } /* ===== GLASS CARD COMPONENT ===== */ .glass-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); } .glass-card-strong { background: var(--glass-bg-strong); backdrop-filter: blur(var(--glass-blur-strong)); -webkit-backdrop-filter: blur(var(--glass-blur-strong)); border: 1px solid var(--glass-border-strong); border-radius: var(--glass-radius-lg); box-shadow: var(--glass-shadow); } /* ===== GLASS BUTTON ===== */ .glass-btn { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: 12px; color: var(--text-primary); padding: 12px 24px; font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; transition: all var(--transition-base); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .glass-btn:hover { background: var(--glass-bg-hover); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .glass-btn-primary { background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-light)); border: none; box-shadow: 0 4px 15px var(--brand-orange-glow); } .glass-btn-primary:hover { box-shadow: 0 6px 25px var(--brand-orange-glow); } .glass-btn-success { background: linear-gradient(135deg, var(--color-success), #059669); border: none; box-shadow: 0 4px 15px var(--color-success-glow); } /* ===== GLASS INPUT ===== */ .glass-input { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: 12px; color: var(--text-primary); padding: 14px 18px; font-size: var(--font-size-base); width: 100%; transition: all var(--transition-base); } .glass-input:focus { outline: none; border-color: var(--brand-orange); box-shadow: 0 0 0 3px var(--brand-orange-glow); } .glass-input::placeholder { color: var(--text-muted); } /* ===== GRADIENT TEXT ===== */ .gradient-text-orange { background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gradient-text-gold { background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gradient-text-purple { background: linear-gradient(135deg, var(--accent-purple), var(--accent-violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ===== GLOW EFFECTS ===== */ .glow-orange { box-shadow: 0 0 20px var(--brand-orange-glow); } .glow-success { box-shadow: 0 0 20px var(--color-success-glow); } .glow-danger { box-shadow: 0 0 20px var(--color-danger-glow); } /* ===== FLOATING ORB ANIMATION ===== */ @keyframes float-orb { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; } 25% { transform: translate(10px, -20px) scale(1.1); opacity: 0.8; } 50% { transform: translate(-5px, -40px) scale(1); opacity: 0.5; } 75% { transform: translate(-15px, -20px) scale(0.9); opacity: 0.7; } } .floating-orb { position: absolute; border-radius: 50%; filter: blur(40px); animation: float-orb 8s ease-in-out infinite; pointer-events: none; } /* ===== SHIMMER ANIMATION ===== */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .shimmer { background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100% ); background-size: 200% 100%; animation: shimmer 3s infinite; } /* ===== PULSE ANIMATION ===== */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px var(--brand-orange-glow); } 50% { box-shadow: 0 0 40px var(--brand-orange-glow), 0 0 60px var(--brand-orange-glow); } } .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } /* ===== UTILITY CLASSES ===== */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-muted { color: var(--text-muted); } .text-orange { color: var(--brand-orange); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-danger { color: var(--color-danger); } .bg-dark { background: var(--bg-dark); } .bg-dark-elevated { background: var(--bg-dark-elevated); } .bg-gradient-dark { background: var(--bg-gradient-dark); } .bg-gradient-purple { background: var(--bg-gradient-purple); }