/** * clearTime Landing Page Template * Standalone CSS for header, footer, and base styles * Version: 2.0.0 - Production Ready * * Usage: Add class="ct-custom-landing" to * * Architecture: * - Uses data attributes [data-ct-menu-open] for state management * - Mobile nav positioned at body level (outside header) * - Scroll position preserved when menu opens */ /* ========================================================================== 1. CSS Variables (Design Tokens) ========================================================================== */ :root { /* Brand Colors */ --ct-red: #EF5350; --ct-red-light: #FF8A80; --ct-red-dark: #D32F2F; --ct-red-glow: rgba(239, 83, 80, 0.15); /* Neutrals */ --ct-dark: #1A1A2E; --ct-dark-soft: #2D2D44; --ct-gray-900: #1F2937; --ct-gray-700: #374151; --ct-gray-600: #4B5563; --ct-gray-500: #6B7280; --ct-gray-400: #9CA3AF; --ct-gray-200: #E5E7EB; --ct-gray-100: #F3F4F6; --ct-gray-50: #F9FAFB; /* Backgrounds */ --ct-bg-warm: #FFFBF8; --ct-bg-cream: #FEF7F0; --ct-bg-blush: #FFF5F5; /* Typography */ --ct-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ct-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Spacing */ --ct-header-height: 80px; --ct-header-top: 20px; --ct-container-max: 1200px; --ct-container-padding: 24px; /* Shadows */ --ct-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --ct-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06); --ct-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08); --ct-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12); /* Transitions */ --ct-ease: cubic-bezier(0.16, 1, 0.3, 1); --ct-transition-fast: 0.2s ease; --ct-transition-normal: 0.3s ease; --ct-transition-slow: 0.4s ease; } /* ========================================================================== 2. Font Imports ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap'); /* ========================================================================== 3. Base Reset for Landing Pages ========================================================================== */ .ct-custom-landing { margin: 0; padding: 0; font-family: var(--ct-font-body); background: var(--ct-bg-warm); color: var(--ct-dark); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ct-custom-landing *, .ct-custom-landing *::before, .ct-custom-landing *::after { box-sizing: border-box; } /* ========================================================================== 4. HEADER - Entry Animation ========================================================================== */ @keyframes ct-header-slide-down { 0% { opacity: 0; transform: translateX(-50%) translateY(-20px); } 100% { opacity: 1; transform: translateX(-50%) translateY(0); } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .ct-custom-landing .ct-header { animation: none !important; } } /* ========================================================================== 5. HEADER - Desktop Styles ========================================================================== */ .ct-custom-landing .ct-header { position: fixed !important; top: 16px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 9999 !important; width: 680px !important; /* Fixed width pill */ max-width: calc(100% - 32px) !important; background: rgba(255, 255, 255, 0.35) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-radius: 50px !important; padding: 10px 16px !important; /* More vertical padding for centering */ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important; transition: all 0.3s ease !important; animation: ct-header-slide-down 0.6s ease-out forwards; } /* Frosted glass effect on scroll */ .ct-custom-landing .ct-header.scrolled { background: rgba(255, 255, 255, 0.35) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important; } .ct-custom-landing .ct-header__inner { display: flex !important; align-items: center !important; justify-content: space-between !important; /* Logo left, nav right, space in middle */ gap: 0 !important; position: relative !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================================== 6. HEADER - Logo ========================================================================== */ .ct-custom-landing .ct-header__logo { position: relative !important; left: auto !important; z-index: 10 !important; display: flex !important; align-items: center !important; text-decoration: none !important; flex-shrink: 0 !important; } .ct-custom-landing .ct-header__logo img { width: 60px !important; height: 60px !important; border-radius: 12px !important; transition: transform 0.3s ease !important; } .ct-custom-landing .ct-header__logo:hover img { transform: scale(1.08) !important; } /* ========================================================================== 7. HEADER - Navigation ========================================================================== */ .ct-custom-landing .ct-header__nav { display: flex !important; align-items: center !important; gap: 16px !important; } .ct-custom-landing .ct-header__menu { display: flex !important; align-items: center !important; gap: 12px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } .ct-custom-landing .ct-header__menu li { list-style: none !important; margin: 0 !important; padding: 0 !important; } .ct-custom-landing .ct-header__menu li::before, .ct-custom-landing .ct-header__menu li::after { display: none !important; content: none !important; } /* Nav Buttons - White pills with light radiation shadow */ .ct-custom-landing .ct-header__link { display: inline-block !important; padding: 14px 32px !important; background: #FFFFFF !important; color: #1A1A1A !important; font-family: var(--ct-font-body) !important; font-size: 15px !important; font-weight: 500 !important; text-decoration: none !important; border-radius: 50px !important; border: none !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 40px rgba(255, 255, 255, 0.3) !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; } .ct-custom-landing .ct-header__link:hover { background: #FFFFFF !important; transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 30px rgba(255, 255, 255, 0.8), 0 0 60px rgba(255, 255, 255, 0.4) !important; } /* ========================================================================== 8. HEADER - CTA Button (clearTime Red) ========================================================================== */ .ct-custom-landing .ct-header__cta { display: inline-flex !important; align-items: center !important; padding: 14px 32px !important; background: #EF5350 !important; color: #FFFFFF !important; font-family: var(--ct-font-body) !important; font-size: 15px !important; font-weight: 600 !important; text-decoration: none !important; border-radius: 50px !important; border: none !important; box-shadow: 0 4px 16px rgba(239, 83, 80, 0.4), 0 0 20px rgba(239, 83, 80, 0.3), 0 0 40px rgba(239, 83, 80, 0.15) !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; } .ct-custom-landing .ct-header__cta:hover { background: #EF5350 !important; transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 8px 24px rgba(239, 83, 80, 0.5), 0 0 30px rgba(239, 83, 80, 0.4), 0 0 60px rgba(239, 83, 80, 0.2) !important; } /* ========================================================================== 9. HEADER - Burger Menu Toggle (Mobile) ========================================================================== */ /* ========================================================================== 8. BURGER TOGGLE - Universal Fix (All Screen Sizes) IMPORTANT: Using !important to override all conflicting styles ========================================================================== */ .ct-custom-landing .ct-header__toggle { display: none !important; position: relative !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; background: none !important; border: none !important; cursor: pointer !important; padding: 0 !important; z-index: 10001 !important; -webkit-tap-highlight-color: transparent !important; } .ct-custom-landing .ct-header__toggle span { display: block !important; position: absolute !important; width: 24px !important; height: 3px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; background: #333 !important; border-radius: 3px !important; transition: all 0.3s var(--ct-ease) !important; transform-origin: center !important; pointer-events: none !important; } /* Span positions - ALWAYS include translateX(-50%) */ .ct-custom-landing .ct-header__toggle span:nth-child(1) { top: 12px !important; transform: translateX(-50%) !important; } .ct-custom-landing .ct-header__toggle span:nth-child(2) { top: 50% !important; transform: translateX(-50%) translateY(-50%) !important; } .ct-custom-landing .ct-header__toggle span:nth-child(3) { bottom: 12px !important; top: auto !important; transform: translateX(-50%) !important; } /* X Animation - ALWAYS maintain translateX(-50%) for horizontal centering */ .ct-custom-landing .ct-header__toggle[data-ct-menu-open="true"] span:nth-child(1) { top: 50% !important; transform: translateX(-50%) translateY(-50%) rotate(45deg) !important; } .ct-custom-landing .ct-header__toggle[data-ct-menu-open="true"] span:nth-child(2) { opacity: 0 !important; transform: translateX(-50%) translateY(-50%) !important; } .ct-custom-landing .ct-header__toggle[data-ct-menu-open="true"] span:nth-child(3) { bottom: auto !important; top: 50% !important; transform: translateX(-50%) translateY(-50%) rotate(-45deg) !important; } 10. MOBILE NAVIGATION OVERLAY Positioned at body level (outside header) to prevent layout conflicts ========================================================================== */ /* MOBILE NAV - Override custom-landing.css conflicts */ .ct-custom-landing .ct-header__mobile-nav { display: flex !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; background: #ffffff !important; z-index: 2147483647 !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.35s ease, visibility 0.35s ease !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; transform: none !important; } /* Open state - show the nav */ .ct-custom-landing .ct-header__mobile-nav[data-ct-menu-open="true"] { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Reset header transform when menu is open to allow mobile nav to be truly fullscreen */ body.ct-mobile-menu-open .ct-header { transform: none !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; } /* Hide main page content when menu is open */ body.ct-mobile-menu-open { overflow: hidden !important; } body.ct-mobile-menu-open .ct-header__inner, body.ct-mobile-menu-open .ct-header__logo, body.ct-mobile-menu-open .ct-header__nav { visibility: hidden !important; opacity: 0 !important; } /* Close Button (X) inside mobile nav */ .ct-custom-landing .ct-header__mobile-close { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.05); border: none; border-radius: 50%; cursor: pointer; color: #333; transition: background 0.2s ease, transform 0.2s ease; z-index: 10002; -webkit-tap-highlight-color: transparent; } .ct-custom-landing .ct-header__mobile-close:hover { background: rgba(0, 0, 0, 0.1); transform: scale(1.05); } .ct-custom-landing .ct-header__mobile-close svg { width: 24px; height: 24px; } /* Mobile Menu List */ .ct-custom-landing .ct-header__mobile-menu { display: flex; flex-direction: column; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; } .ct-custom-landing .ct-header__mobile-menu li { list-style: none; margin: 0; padding: 0; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; } /* Staggered animation for menu items */ .ct-custom-landing .ct-header__mobile-nav[data-ct-menu-open="true"] .ct-header__mobile-menu li { opacity: 1; transform: translateY(0); } .ct-custom-landing .ct-header__mobile-nav[data-ct-menu-open="true"] .ct-header__mobile-menu li:nth-child(1) { transition-delay: 0.1s; } .ct-custom-landing .ct-header__mobile-nav[data-ct-menu-open="true"] .ct-header__mobile-menu li:nth-child(2) { transition-delay: 0.18s; } .ct-custom-landing .ct-header__mobile-nav[data-ct-menu-open="true"] .ct-header__mobile-menu li:nth-child(3) { transition-delay: 0.26s; } .ct-custom-landing .ct-header__mobile-nav[data-ct-menu-open="true"] .ct-header__mobile-menu li:nth-child(4) { transition-delay: 0.34s; } /* Reset delay on close for snappy hide */ .ct-custom-landing .ct-header__mobile-nav:not([data-ct-menu-open="true"]) .ct-header__mobile-menu li { transition-delay: 0s; transition-duration: 0.15s; } .ct-custom-landing .ct-header__mobile-menu a { display: inline-block; padding: 16px 48px; background: #FFFFFF; color: #1A1A1A; font-family: var(--ct-font-body); font-size: 18px; font-weight: 500; text-decoration: none; border-radius: 50px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 20px rgba(255, 255, 255, 0.6); transition: transform 0.25s ease, box-shadow 0.25s ease; } .ct-custom-landing .ct-header__mobile-menu a:hover { transform: translateY(-3px) scale(1.02); } .ct-custom-landing .ct-header__mobile-menu .ct-header__cta { font-size: 18px; padding: 16px 48px; } /* ========================================================================== 11. BODY SCROLL LOCK Prevents background scrolling when mobile menu is open Uses position: fixed with scroll position preservation ========================================================================== */ body.ct-custom-landing.ct-menu-open { overflow: hidden; position: fixed; width: 100%; height: 100%; /* top is set dynamically via JS to preserve scroll position */ } /* ========================================================================== 12. TABLET BREAKPOINT (769px - 1024px) ========================================================================== */ @media (min-width: 769px) and (max-width: 1024px) { .ct-custom-landing .ct-header { width: calc(100% - 32px); } .ct-custom-landing .ct-header__inner { justify-content: flex-end; } .ct-custom-landing .ct-header__link { padding: 12px 24px; font-size: 14px; } .ct-custom-landing .ct-header__cta { padding: 12px 24px; font-size: 14px; } } /* ========================================================================== 13. MOBILE BREAKPOINT (≤768px) ========================================================================== */ @media (max-width: 768px) { .ct-custom-landing .ct-header { top: 12px !important; width: calc(100% - 24px) !important; /* Full width minus margins on mobile */ max-width: none !important; height: auto !important; padding: 8px 12px !important; /* Balanced vertical padding */ border-radius: 50px !important; background: rgba(255, 255, 255, 0.35) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important; transition: all 0.3s ease !important; } .ct-custom-landing .ct-header__inner { display: flex !important; align-items: center !important; justify-content: space-between !important; /* Logo left, burger right */ gap: 0 !important; min-height: 52px !important; width: 100% !important; transition: min-height 0.3s ease !important; } .ct-custom-landing .ct-header__logo { position: relative !important; left: auto !important; flex-shrink: 0 !important; } .ct-custom-landing .ct-header__logo img { width: 48px; height: 48px; transition: width 0.3s ease, height 0.3s ease !important; } .ct-custom-landing .ct-header__nav { display: none !important; visibility: hidden !important; } .ct-custom-landing .ct-header__toggle { display: flex !important; visibility: visible !important; opacity: 1 !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; pointer-events: auto !important; transition: width 0.3s ease, height 0.3s ease !important; } .ct-custom-landing .ct-header__toggle span { display: block !important; background: #333 !important; transition: width 0.3s ease !important; } /* Compact header on scroll - mobile only */ .ct-custom-landing .ct-header.scrolled { top: 8px !important; padding: 4px 4px !important; } .ct-custom-landing .ct-header.scrolled .ct-header__inner { min-height: 44px !important; } .ct-custom-landing .ct-header.scrolled .ct-header__logo img { width: 36px !important; height: 36px !important; } .ct-custom-landing .ct-header.scrolled .ct-header__toggle { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; } .ct-custom-landing .ct-header.scrolled .ct-header__toggle span { width: 20px !important; } } /* ========================================================================== 14. FOOTER ========================================================================== */ .ct-custom-landing .ct-footer { background: var(--ct-gray-50); padding: 64px 0 32px; border-top: 1px solid var(--ct-gray-200); } /* Reset lists in footer */ .ct-custom-landing .ct-footer ul, .ct-custom-landing .ct-footer ol, .ct-custom-landing .ct-footer li { list-style: none; margin: 0; padding: 0; } .ct-custom-landing .ct-footer__main { display: grid; grid-template-columns: 1.5fr 2fr 1fr; gap: 48px; max-width: var(--ct-container-max); margin: 0 auto; padding: 0 var(--ct-container-padding); } /* Footer - Brand Column */ .ct-custom-landing .ct-footer__brand { display: flex; flex-direction: column; gap: 16px; } .ct-custom-landing .ct-footer__logo { display: inline-block; } .ct-custom-landing .ct-footer__logo img { height: 60px; } .ct-custom-landing .ct-footer__tagline { font-family: var(--ct-font-body); font-size: 14px; color: var(--ct-gray-600); line-height: 1.6; margin: 0; } /* Footer - Social Links */ .ct-custom-landing .ct-footer__social { display: flex; gap: 16px; } .ct-custom-landing .ct-footer__social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--ct-gray-200); border-radius: 50%; color: var(--ct-gray-600); transition: all var(--ct-transition-fast); text-decoration: none; } .ct-custom-landing .ct-footer__social a:hover { background: var(--ct-dark); color: #FFFFFF; } .ct-custom-landing .ct-footer__social svg { width: 20px; height: 20px; } /* Footer - Navigation Columns */ .ct-custom-landing .ct-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .ct-custom-landing .ct-footer__col { display: flex; flex-direction: column; gap: 16px; } .ct-custom-landing .ct-footer__heading { font-family: var(--ct-font-body); font-size: 14px; font-weight: 600; color: var(--ct-dark); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px 0; } .ct-custom-landing .ct-footer__links { display: flex; flex-direction: column; gap: 12px; } .ct-custom-landing .ct-footer__links li { display: block; } .ct-custom-landing .ct-footer__links a { font-family: var(--ct-font-body); font-size: 14px; color: var(--ct-gray-600); text-decoration: none; transition: color var(--ct-transition-fast); } .ct-custom-landing .ct-footer__links a:hover { color: var(--ct-dark); } /* Footer - App Download */ .ct-custom-landing .ct-footer__app { display: flex; flex-direction: column; gap: 12px; } .ct-custom-landing .ct-footer__app-label { font-family: var(--ct-font-body); font-size: 14px; font-weight: 600; color: var(--ct-dark); margin: 0; } .ct-custom-landing .ct-footer__badge { width: 135px; height: auto; } .ct-custom-landing .ct-footer__badge img { width: 135px; height: auto; aspect-ratio: 564 / 168; object-fit: contain; display: block; } .ct-custom-landing .ct-footer__app a:hover .ct-footer__badge { opacity: 0.9; } /* Footer - Bottom */ .ct-custom-landing .ct-footer__bottom { max-width: var(--ct-container-max); margin: 48px auto 0; padding: 24px var(--ct-container-padding) 0; border-top: 1px solid var(--ct-gray-200); } .ct-custom-landing .ct-footer__copyright { font-family: var(--ct-font-body); font-size: 14px; color: var(--ct-gray-400); margin: 0; } /* ========================================================================== 15. FOOTER - Tablet Breakpoint ========================================================================== */ @media (max-width: 1024px) { .ct-custom-landing .ct-footer__main { grid-template-columns: 1fr 1fr; } .ct-custom-landing .ct-footer__app { grid-column: span 2; } } /* ========================================================================== 16. FOOTER - Mobile Breakpoint ========================================================================== */ @media (max-width: 768px) { .ct-custom-landing .ct-footer { padding: 48px 0 24px; } .ct-custom-landing .ct-footer__main { grid-template-columns: 1fr; gap: 32px; } .ct-custom-landing .ct-footer__app { grid-column: span 1; } .ct-custom-landing .ct-footer__nav { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .ct-custom-landing .ct-footer__nav { grid-template-columns: 1fr; } } /* ========================================================================== 17. Utility: Content Spacing for Fixed Header ========================================================================== */ .ct-custom-landing .ct-hero, .ct-custom-landing .ct-main-content { padding-top: 120px; } /* ========================================================================== 18. Container Utility ========================================================================== */ .ct-custom-landing .ct-container { max-width: var(--ct-container-max); margin: 0 auto; padding: 0 var(--ct-container-padding); } /* ========================================================================== 19. Hide Preloader (prevents click blocking) ========================================================================== */ .ct-custom-landing .preloader-plus { display: none !important; pointer-events: none !important; }