/* * Cryptoatics Legal Docs - Frontend Styles * * Description: Styles for the legal documents page (Terms of Service, Privacy Policy, etc.). * Version: 2.1.0 (Consolidated Styles) * */ :root { /* Brand Colors (pulled from old dynamic styles) */ --cld-primary-color: #00FF9D; --cld-secondary-color: #F857A6; /* Using the pink from homepage as secondary */ /* Typography settings are now pulled from here */ /* They are generated in class-custom-styles.php and injected in */ } /* ========================================================================== 1. Base Container & Layout ========================================================================== */ body.single-legal-document main#main { padding: 0 !important; } .legal-document-container { background-color: var(--color-bg-light, #0a0a0a); --legal-sidebar-width: 250px; --legal-content-gap: 5rem; /* * CONSOLIDATED SPACING: * - Vertical margin is removed to prevent compounding with theme styles. * - All spacing is now controlled by this single padding property for precision. */ max-width: 1200px; margin: 0 auto; /* Center container, no vertical margin */ padding: 0; /* Reduced top/bottom padding */ color: #fff; } .legal-document-body { display: flex; flex-direction: row; align-items: flex-start; gap: var(--legal-content-gap); } /* ========================================================================== 2. Page Header ========================================================================== */ .legal-document-header { margin-bottom: 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .legal-document-title { font-family: 'Inter', sans-serif; font-size: var(--h1-font-size, 3rem); font-weight: var(--h1-font-weight, 700); line-height: 1.2; margin-bottom: 0.5rem; color: var(--h1-color, #FFFFFF); } .legal-document-effective-date { font-family: 'Inter', sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.6); /* Muted for secondary info */ } /* ========================================================================== 3. Main Content Area ========================================================================== */ .legal-document-content { flex: 1; min-width: 0; /* Prevents flexbox overflow */ max-width: calc(100% - var(--legal-sidebar-width) - var(--legal-content-gap)); } /* ========================================================================== 4. Typography & Content Styling (Matching Homepage) ========================================================================== */ .legal-document-content h1, .legal-document-content h2, .legal-document-content h3, .legal-document-content h4 { font-family: 'Inter', sans-serif; font-weight: var(--h1-font-weight, 600); color: var(--h1-color, #FFFFFF); line-height: 1.4; margin-top: 2em; /* Reduced */ margin-bottom: 1em; scroll-margin-top: 1.5rem; /* For scroll-spy */ } .legal-document-content h2 { font-size: var(--h2-font-size, 1.75rem); font-weight: var(--h2-font-weight, 600); color: var(--h2-color, var(--cld-primary-color)); border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.25em; /* Reduced */ } .legal-document-content h3 { font-size: var(--h3-font-size, 1.4rem); font-weight: var(--h3-font-weight, 600); color: var(--h3-color, #FFFFFF); } .legal-document-content h4 { font-size: 1.1rem; color: rgba(255, 255, 255, 0.8); } .legal-document-content p, .legal-document-content li { font-family: 'Inter', sans-serif; font-size: var(--body-font-size, 1rem); line-height: var(--body-line-height, 1.8); color: rgba(255, 255, 255, 0.8); margin-bottom: 1.5rem; } .legal-document-content a { color: var(--link-color, var(--cld-secondary-color)); text-decoration: var(--link-decoration, none); transition: color 0.2s ease, text-decoration 0.2s ease; } .legal-document-content a:hover { color: #FFFFFF; text-decoration: var(--link-hover-decoration, underline); } .legal-document-content ul, .legal-document-content ol { padding-left: 20px; } /* ========================================================================== 5. Sidebar Table of Contents ========================================================================== */ .legal-document-sidebar { width: var(--legal-sidebar-width); flex-shrink: 0; position: sticky; top: 4rem; /* Adjust based on your header's height */ align-self: flex-start; } .legal-document-toc ul { list-style: none; padding: 0; margin: 0; border-left: 1px solid rgba(255, 255, 255, 0.15); } .legal-document-toc li a { display: block; padding: 0.6rem 1.5rem; font-family: 'Inter', sans-serif; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); text-decoration: none; border-left: 2px solid transparent; margin-left: -2px; /* Overlap the main border */ transition: all 0.2s ease-in-out; } .legal-document-toc li a:hover { background-color: rgba(255, 255, 255, 0.05); color: #FFFFFF; } .legal-document-toc li.active > a { color: var(--sidebar-active-color, var(--cld-primary-color)); border-left-color: var(--sidebar-active-color, var(--cld-primary-color)); transform: translateX(5px); font-weight: 600; } /* Sub-heading levels in TOC */ .legal-document-toc li.level-3 a { padding-left: 2.5rem; } .legal-document-toc li.level-4 a { padding-left: 3.5rem; } /* ========================================================================== 7. Theme Compatibility Fixes ========================================================================== */ /* This is the key fix: remove the top margin from the first element in the content area to prevent it from being pushed down by theme styles or our own heading margins. */ .legal-document-content > *:first-child { margin-top: 0 !important; } /* THE DEFINITIVE STICKY FIX: The debug script revealed the theme sets `overflow: hidden` on the tag itself, which breaks sticky positioning globally. This rule overrides that specific style ONLY on legal document pages, allowing the sidebar to be sticky as intended. */ body.single-legal-document { overflow: visible !important; } /* ========================================================================== 6. Responsive Design ========================================================================== */ @media (max-width: 900px) { .legal-document-container { margin: 0 auto; padding: 0; /* Standardized and reduced padding */ } .legal-document-body { flex-direction: column; } .legal-document-sidebar { display: none; /* Hide sidebar on smaller screens */ } .legal-document-content { max-width: 100%; } .legal-document-title { font-size: 2.25rem; } /* Reduce heading sizes and margins for mobile */ .legal-document-content h2, .legal-document-content h3, .legal-document-content h4 { margin-top: 1.75rem; /* Reduced */ } } @media (max-width: 600px) { .legal-document-container { padding: 0; /* Reduced */ } .legal-document-title { font-size: 1.8rem; } } /* ========================================================================== 9. Table Styles ========================================================================== */ .legal-document-content table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: 0.95rem; } .legal-document-content th, .legal-document-content td { text-align: left; padding: 1.25rem 1rem; vertical-align: top; /* Ensures consistent top alignment */ border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .legal-document-content th { font-weight: var(--h2-font-weight, 600); color: var(--h2-color, var(--cld-primary-color)); font-size: 1rem; } .legal-document-content tr:last-child td { border-bottom: none; /* Remove border from the last row */ } /* Responsive Table Wrapper */ @media (max-width: 768px) { .legal-document-content .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 2em 0; } .legal-document-content .table-wrapper table { /* On mobile, allow the table to be wider than the screen */ width: auto; min-width: 100%; /* Ensures it at least fills the container */ } .legal-document-content table { margin: 0; /* Reset margin as wrapper will handle it */ } } /* ========================================================================== 8. Final Overrides ========================================================================== */ /* This ensures the custom background color from the admin panel is applied correctly to the container, overriding any theme or inline styles. */ .legal-document-container { background-color: var(--color-bg-light, #0a0a0a) !important; }