/* ========================================================================== Legal Pages Shared Styles Used by: ServiceAgreement.razor, PrivacyPolicy.razor NOTE: Theme classes are applied to element by _Layout.cshtml script, so we use html.theme-* selectors instead of .legal-page.theme-* to ensure theming works on both SSR prerender and Blazor navigation. ========================================================================== */ /* Base page container */ .legal-page { padding: 40px 24px 40px; max-width: 1200px; margin: 0 auto; } /* ========================================================================== Icon Styles ========================================================================== */ .icon-section { width: 28px; height: 28px; color: #3b82f6; flex-shrink: 0; } /* Theme-specific section icon colors - use global html theme class */ html.theme-space .icon-section { color: #8b5cf6; } html.theme-winter .icon-section { color: #06b6d4; } html.theme-nature .icon-section { color: #22c55e; } html.theme-ocean .icon-section { color: #0ea5e9; } /* ========================================================================== Hero Section ========================================================================== */ .legal-hero { background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%); padding: 80px 20px; border-radius: 16px; margin-bottom: 40px; text-align: center; color: white; box-shadow: 0 20px 60px rgba(30, 58, 95, 0.3); position: relative; overflow: hidden; } /* Theme-specific hero backgrounds - use global html theme class */ html.theme-space .legal-hero { background: linear-gradient(135deg, #1a1040 0%, #2d1b69 100%); box-shadow: 0 20px 60px rgba(45, 27, 105, 0.3); } html.theme-winter .legal-hero { background: linear-gradient(135deg, #164e63 0%, #0e7490 100%); box-shadow: 0 20px 60px rgba(14, 116, 144, 0.3); } html.theme-nature .legal-hero { background: linear-gradient(135deg, #14532d 0%, #166534 100%); box-shadow: 0 20px 60px rgba(22, 101, 52, 0.3); } html.theme-ocean .legal-hero { background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 100%); box-shadow: 0 20px 60px rgba(3, 105, 161, 0.3); } .legal-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 60%); } .legal-hero-content { position: relative; z-index: 1; } .legal-hero h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .legal-hero-subtitle { font-size: 1.3rem; opacity: 0.95; max-width: 700px; margin: 0 auto; } /* ========================================================================== Content Card ========================================================================== */ .legal-content { background: white; border-radius: 16px; padding: 50px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border: 1px solid #e2e8f0; margin-bottom: 40px; color: #2d3748; } /* Dark theme content - use global html theme class */ html.theme-space .legal-content, html.theme-winter .legal-content, html.theme-nature .legal-content, html.theme-ocean .legal-content { background: rgba(30, 30, 50, 0.95); border-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px); color: rgba(255, 255, 255, 0.9); } /* ========================================================================== Intro Section ========================================================================== */ .legal-intro { background: #f7fafc; border-left: 4px solid #3b82f6; padding: 20px 25px; border-radius: 8px; margin-bottom: 40px; } /* Theme-specific intro accent colors - use global html theme class */ html.theme-space .legal-intro { border-left-color: #8b5cf6; } html.theme-winter .legal-intro { border-left-color: #06b6d4; } html.theme-nature .legal-intro { border-left-color: #22c55e; } html.theme-ocean .legal-intro { border-left-color: #0ea5e9; } /* Dark theme intro - use global html theme class */ html.theme-space .legal-intro, html.theme-winter .legal-intro, html.theme-nature .legal-intro, html.theme-ocean .legal-intro { background: rgba(255, 255, 255, 0.05); } .legal-intro p { color: #2d3748; font-size: 1.1rem; line-height: 1.7; margin: 0; font-weight: 500; } /* Dark theme intro text - use global html theme class */ html.theme-space .legal-intro p, html.theme-winter .legal-intro p, html.theme-nature .legal-intro p, html.theme-ocean .legal-intro p { color: rgba(255, 255, 255, 0.9); } /* ========================================================================== Content Sections ========================================================================== */ .legal-section { margin-bottom: 40px; scroll-margin-top: 100px; padding-top: 20px; } .legal-section h4 { font-size: 1.6rem; font-weight: 700; color: #2d3748; margin-bottom: 15px; display: flex; align-items: center; gap: 12px; } /* Dark theme section titles - use global html theme class */ html.theme-space .legal-section h4, html.theme-winter .legal-section h4, html.theme-nature .legal-section h4, html.theme-ocean .legal-section h4 { color: white; } .legal-section p { color: #4a5568; font-size: 1.05rem; line-height: 1.8; margin-bottom: 15px; } /* Dark theme section text - use global html theme class */ html.theme-space .legal-section p, html.theme-winter .legal-section p, html.theme-nature .legal-section p, html.theme-ocean .legal-section p { color: rgba(255, 255, 255, 0.8); } .legal-section ul { list-style: none; padding-left: 0; } .legal-section ul li { position: relative; padding-left: 35px; margin-bottom: 12px; color: #4a5568; font-size: 1.05rem; line-height: 1.7; } /* Dark theme list items - use global html theme class */ html.theme-space .legal-section ul li, html.theme-winter .legal-section ul li, html.theme-nature .legal-section ul li, html.theme-ocean .legal-section ul li { color: rgba(255, 255, 255, 0.8); } .legal-section ul li::before { content: "✓"; position: absolute; left: 0; color: #10b981; font-weight: 700; font-size: 1.2rem; } /* ========================================================================== Last Updated Badge ========================================================================== */ .last-updated { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 20px 30px; border-radius: 12px; text-align: center; margin-bottom: 40px; font-weight: 600; } .last-updated svg { width: 18px; height: 18px; vertical-align: middle; margin-right: 6px; } /* ========================================================================== Table of Contents ========================================================================== */ .toc-card { background: #f7fafc; border-radius: 12px; padding: 30px; margin-bottom: 40px; border: 1px solid #e2e8f0; } /* Dark theme TOC card - use global html theme class */ html.theme-space .toc-card, html.theme-winter .toc-card, html.theme-nature .toc-card, html.theme-ocean .toc-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px); } .toc-title { font-size: 1.3rem; font-weight: 700; color: #2d3748; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } /* Dark theme TOC title - use global html theme class */ html.theme-space .toc-title, html.theme-winter .toc-title, html.theme-nature .toc-title, html.theme-ocean .toc-title { color: white; } .toc-title svg { width: 24px; height: 24px; color: currentColor; } .toc-list { list-style: none; padding: 0; margin: 0; } .toc-list li { margin-bottom: 10px; } .toc-link { color: #10b981; text-decoration: none; font-weight: 600; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .toc-link:hover { color: #059669; padding-left: 10px; } .toc-link svg { width: 18px; height: 18px; flex-shrink: 0; } /* ========================================================================== Contact Card ========================================================================== */ .contact-card { background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 16px; padding: 40px; text-align: center; color: white; margin-top: 40px; } .contact-card h3 { font-size: 2rem; font-weight: 700; margin-bottom: 15px; } .contact-card p { font-size: 1.1rem; opacity: 0.95; margin-bottom: 25px; } .contact-email { display: inline-flex; align-items: center; gap: 10px; background: white; color: #10b981; padding: 15px 35px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 1.1rem; transition: all 0.3s ease; word-break: break-word; max-width: 100%; } .contact-email:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); color: #10b981; } .contact-email svg { width: 20px; height: 20px; flex-shrink: 0; } /* ========================================================================== Responsive Styles ========================================================================== */ @media (max-width: 960px) { .legal-hero h1 { font-size: 2.5rem; } .legal-content { padding: 30px 25px; } .legal-section h4 { font-size: 1.4rem; } .contact-email { font-size: 0.95rem; padding: 12px 20px; gap: 8px; flex-direction: column; text-align: center; } .contact-card { padding: 30px 20px; } .contact-card h3 { font-size: 1.5rem; } .contact-card p { font-size: 1rem; } /* Adjust scroll margin for mobile */ .legal-section { scroll-margin-top: 80px; } }