/* ======================================== PRIVACY.CSS - Elegant & Dynamic Privacy Page ======================================== */ /* Privacy Page Specific Styles */ .privacy-policy { padding: var(--space-6) 0; background: linear-gradient(135deg, var(--color-bg) 0%, white 50%, var(--color-beige) 100%); position: relative; overflow: hidden; } /* Animated background elements */ .privacy-policy::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 20% 30%, rgba(163, 150, 96, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(77, 63, 60, 0.03) 0%, transparent 50%); animation: float 20s ease-in-out infinite; z-index: -1; } @keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-10px, -20px) rotate(1deg); } 50% { transform: translate(20px, -10px) rotate(-1deg); } 75% { transform: translate(-20px, 10px) rotate(0.5deg); } } /* Container with glass effect */ .privacy-policy__content { max-width: 900px; margin: 0 auto; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); border-radius: var(--radius-lg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); position: relative; z-index: 1; } /* Header with elegant styling */ .privacy-policy__header { text-align: center; padding: var(--space-6) var(--space-5) var(--space-4); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-emphasis) 100%); color: white; border-radius: var(--radius-lg) var(--radius-lg) 0 0; position: relative; overflow: hidden; } .privacy-policy__header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%); animation: shimmer 4s ease-in-out infinite; } @keyframes shimmer { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } } .privacy-policy__title { font-family: var(--font-family-serif); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-2); position: relative; z-index: 2; color: white; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .privacy-policy__subtitle { font-size: var(--font-size-xl); opacity: 0.9; margin: 0; position: relative; z-index: 2; color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } /* Body content with dynamic spacing */ .privacy-policy__body { padding: var(--space-5); } .privacy-policy__intro { font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); color: var(--color-text); text-align: center; margin-bottom: var(--space-5); padding: var(--space-4); background: linear-gradient(135deg, var(--color-beige) 0%, rgba(255, 255, 255, 0.8) 100%); border-radius: var(--radius); border-left: 4px solid var(--color-primary); position: relative; overflow: hidden; } .privacy-policy__intro::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: sweep 4s ease-in-out infinite; } @keyframes sweep { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } /* Section styling with hover effects */ .privacy-policy__section { margin-bottom: var(--space-5); padding: var(--space-4); border-radius: var(--radius); transition: all var(--transition); position: relative; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(163, 150, 96, 0.2); } .privacy-policy__section:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.8); border-color: var(--color-primary); } .privacy-policy__section h2 { color: var(--color-primary); font-family: var(--font-family-serif); font-size: var(--font-size-2xl); margin-bottom: var(--space-3); position: relative; display: inline-block; } .privacy-policy__section h2::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); transition: width 0.3s ease; } .privacy-policy__section:hover h2::after { width: 100%; } /* Dynamic list styling */ .privacy-policy__list { margin: var(--space-3) 0; padding-left: 0; } .privacy-policy__list li { position: relative; padding: var(--space-2) 0 var(--space-2) var(--space-4); margin-bottom: var(--space-2); border-radius: var(--radius-sm); transition: all var(--transition); opacity: 0; transform: translateX(-20px); animation: slideInFromLeft 0.6s ease forwards; } .privacy-policy__list li:nth-child(1) { animation-delay: 0.1s; } .privacy-policy__list li:nth-child(2) { animation-delay: 0.2s; } .privacy-policy__list li:nth-child(3) { animation-delay: 0.3s; } .privacy-policy__list li:nth-child(4) { animation-delay: 0.4s; } .privacy-policy__list li:nth-child(5) { animation-delay: 0.5s; } .privacy-policy__list li:nth-child(6) { animation-delay: 0.6s; } @keyframes slideInFromLeft { to { opacity: 1; transform: translateX(0); } } .privacy-policy__list li::before { content: '✓'; position: absolute; left: 0; top: var(--space-2); width: 20px; height: 20px; background: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; transform: scale(0); animation: popIn 0.3s ease forwards; animation-delay: inherit; } @keyframes popIn { 0% { transform: scale(0) rotate(-180deg); } 80% { transform: scale(1.2) rotate(10deg); } 100% { transform: scale(1) rotate(0deg); } } .privacy-policy__list li:hover { background: rgba(163, 150, 96, 0.1); transform: translateX(5px); } /* Elegant link styling */ .privacy-policy__link { color: var(--color-primary); text-decoration: none; font-weight: 600; position: relative; transition: all var(--transition); display: inline-block; } .privacy-policy__link::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); transition: width var(--transition); } .privacy-policy__link:hover { color: var(--color-emphasis); transform: translateY(-1px); } .privacy-policy__link:hover::before { width: 100%; } /* Footer section with call-to-action */ .privacy-policy__footer { margin-top: var(--space-6); padding: var(--space-5); background: linear-gradient(135deg, var(--color-beige) 0%, rgba(255, 255, 255, 0.9) 100%); border-radius: var(--radius); text-align: center; border: 2px solid rgba(163, 150, 96, 0.3); position: relative; overflow: hidden; } .privacy-policy__footer::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--color-primary), var(--color-secondary), var(--color-primary)); background-size: 300% 300%; animation: gradientMove 3s ease infinite; z-index: -1; border-radius: var(--radius); } @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .privacy-policy__updated { margin-bottom: var(--space-4); color: var(--color-muted); font-style: italic; } .privacy-policy__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } /* Responsive design */ @media (max-width: 768px) { .privacy-policy { padding: var(--space-5) 0; } .privacy-policy__content { margin: 0 var(--space-3); } .privacy-policy__header { padding: var(--space-4) var(--space-3); } .privacy-policy__body { padding: var(--space-3); } .privacy-policy__section { padding: var(--space-3); } .privacy-policy__actions { flex-direction: column; align-items: center; } } /* Scroll animations */ @media (prefers-reduced-motion: no-preference) { .privacy-policy__section { opacity: 0; transform: translateY(30px); animation: fadeInUp 0.8s ease forwards; } .privacy-policy__section:nth-child(1) { animation-delay: 0.1s; } .privacy-policy__section:nth-child(2) { animation-delay: 0.2s; } .privacy-policy__section:nth-child(3) { animation-delay: 0.3s; } .privacy-policy__section:nth-child(4) { animation-delay: 0.4s; } .privacy-policy__section:nth-child(5) { animation-delay: 0.5s; } .privacy-policy__section:nth-child(6) { animation-delay: 0.6s; } .privacy-policy__section:nth-child(7) { animation-delay: 0.7s; } } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } /* Accessibility improvements */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .privacy-policy__section { opacity: 1; transform: none; } .privacy-policy__list li { opacity: 1; transform: none; } }