/* ============================================ PappyDeez Investment Group Inc. Common Stylesheet Building Tools For Informed Decision Making ============================================ */ /* ============================================ BROWSER COMPATIBILITY NOTES ============================================ REQUIRED HTML META TAG: Add this to your HTML section for proper mobile rendering: This stylesheet is optimized for cross-browser compatibility: - Chrome/Edge (Chromium): Full support ✅ - Brave: Full support ✅ (Chromium-based, identical to Chrome) - Firefox: Full support ✅ - Safari: Full support ✅ (including iOS Safari) - Opera: Full support ✅ (Chromium-based) - Vivaldi: Full support ✅ (Chromium-based) - Samsung Internet: Full support ✅ - Mobile browsers: Optimized and tested ✅ Key compatibility features: - Vendor prefixes for sticky positioning (Safari) - Vendor prefixes for background-clip (gradient text) - Vendor prefixes for backdrop-filter effects - Vendor prefixes for user-select - Motion-safe smooth scrolling (accessibility) - Will-change hints for performance - Flexbox gap fallbacks for Safari < 14.1 - Safe area insets for devices with notches Responsive Design Breakpoints: - Desktop: 1200px+ - Large Tablets/Small Desktop: 1024px - 1200px - Tablets: 768px - 1024px - Large Phones/Small Tablets: 600px - 768px - Phones: 480px - 600px - Small Phones: 360px - 480px - Extra Small: Below 360px Touch Device Optimizations: - Minimum 44px touch targets (Apple guidelines) - 48px navigation touch targets - Disabled hover effects on touch devices - Active state feedback for touches - Landscape and portrait specific layouts Minimum browser versions supported: - Chrome 88+ - Brave 1.20+ (based on Chromium 88+) - Firefox 85+ - Safari 14+ - Edge 88+ - iOS Safari 14+ - Android Chrome 88+ - Samsung Internet 14+ Mobile Device Testing Coverage: - iPhone SE (375×667) to iPhone 15 Pro Max (430×932) - iPad (768×1024) to iPad Pro 12.9" (1024×1366) - Android phones (360×640) to (412×915) - Android tablets (600×960) to (1280×800) - Foldable devices (Galaxy Fold, Surface Duo) ============================================ */ /* ============================================ CSS VARIABLES - THEME SYSTEM ============================================ */ :root { /* Dark Theme (Default) */ --bg-primary: #0a0e27; --bg-secondary: #141b3d; --bg-tertiary: #1a1f3a; --text-primary: #ffffff; --text-secondary: #b8c5d6; --accent: #00f0ff; --accent-glow: rgba(0, 240, 255, 0.3); --accent-dim: rgba(0, 240, 255, 0.1); --accent-hover: rgba(0, 240, 255, 0.2); --card-bg: rgba(20, 27, 61, 0.6); --border-color: rgba(0, 240, 255, 0.2); --success-color: #00ff88; --error-color: #ff4444; --cta-primary: #00f0ff; --cta-secondary: #7c3aed; } [data-theme="light"] { /* Light Theme */ --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-tertiary: #f1f5f9; --text-primary: #1a202c; --text-secondary: #4a5568; --accent: #0066cc; --accent-glow: rgba(0, 102, 204, 0.2); --accent-dim: rgba(0, 102, 204, 0.05); --accent-hover: rgba(0, 102, 204, 0.15); --card-bg: rgba(255, 255, 255, 0.95); --border-color: rgba(0, 102, 204, 0.2); --success-color: #10b981; --error-color: #ef4444; --cta-primary: #0066cc; --cta-secondary: #7c3aed; } /* ============================================ RESET & BASE STYLES ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Smooth scrolling - respects user's motion preferences */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: 'Work Sans', sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; min-height: 100vh; transition: background-color 0.3s ease, color 0.3s ease; /* Safe area insets for devices with notches */ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); /* Mobile performance optimizations */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Prevent horizontal scroll on mobile */ width: 100%; position: relative; } a { color: var(--text-primary); } a:hover { color: var(--accent); } a:hover::after { width: 100%; } strong { color: var(--text-primary); font-weight: 700; } p{ padding-top: 1rem; padding-bottom: 1.25rem; } h1{ padding-top: 1rem; } h2{ padding-top: 1rem; } h3{ padding-top: 0.5rem; } ol{ padding-top: 1rem; padding-left: 1rem; } ul{ padding-top: 1rem; padding-left: 1rem; } /* ============================================ ACCESSIBILITY ============================================ */ .skip-to-content { position: absolute; top: -40px; left: 0; background: var(--accent); color: var(--bg-primary); padding: 8px 16px; text-decoration: none; border-radius: 0 0 8px 0; font-weight: 600; z-index: 1000; } .skip-to-content:focus { top: 0; } /* ============================================ ANIMATED BACKGROUND ============================================ */ .animated-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.08; pointer-events: none; background: linear-gradient(90deg, var(--accent) 1px, transparent 1px), linear-gradient(0deg, var(--accent) 1px, transparent 1px); background-size: 50px 50px; animation: gridMove 20s linear infinite; } @keyframes gridMove { 0% { transform: translate(0, 0); } 100% { transform: translate(50px, 50px); } } /* ============================================ HEADER & NAVIGATION ============================================ */ header { background-color: var(--bg-secondary); padding: 1rem 2rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); position: -webkit-sticky; /* Safari */ position: sticky; top: 0; z-index: 100; border-bottom: 2px solid var(--border-color); /* Safe area insets for devices with notches */ padding-left: max(2rem, env(safe-area-inset-left)); padding-right: max(2rem, env(safe-area-inset-right)); padding-top: max(1rem, env(safe-area-inset-top)); } nav { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; position: relative; } .logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; z-index: 101; } .logo img { height: 50px; width: auto; transition: transform 0.3s ease; will-change: transform; } .logo:hover img { transform: scale(1.05); } .logo-text { font-family: 'Archivo Black', sans-serif; font-size: 1.1rem; color: var(--accent); text-shadow: 0 0 20px var(--accent-glow); letter-spacing: 1px; } /* Hamburger Menu */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 101; } .hamburger span { width: 25px; height: 3px; background: var(--accent); border-radius: 3px; transition: all 0.3s ease; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } /* Navigation Links */ .navigation { display: flex; justify-content: space-between; margin-top: 60px; padding-top: 30px; border-top: 2px solid var(--accent); } .nav-links { display: flex; gap: 1.2rem; align-items: center; } .nav-links a { color: var(--text-primary); text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: color 0.3s ease; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 0.3s ease; } .nav-links a:hover::after { width: 100%; } .nav-links a:hover { color: var(--accent); } /* CTA Navigation Links */ .nav-cta { padding: 0.5rem 1rem; border: 1px solid var(--accent); border-radius: 5px; transition: all 0.3s ease; } .nav-cta:hover { background: var(--accent-hover); } .nav-cta-primary { padding: 0.5rem 1rem; background: var(--accent); color: var(--bg-primary) !important; border-radius: 5px; font-weight: 600; transition: all 0.3s ease; will-change: transform; } .nav-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--accent-glow); } .nav-cta-primary::after { display: none; } /* ============================================ THEME TOGGLE BUTTON ============================================ */ .theme-toggle { background: none; border: 2px solid var(--accent); color: var(--accent); padding: 0.5rem 1rem; border-radius: 5px; cursor: pointer; font-weight: 600; font-family: 'Work Sans', sans-serif; font-size: 0.9rem; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; } .theme-toggle:hover { background: var(--accent); color: var(--bg-primary); box-shadow: 0 0 20px var(--accent-glow); } #theme-icon { font-size: 1.2rem; } /* ============================================ CONTAINER & LAYOUT ============================================ */ .container { max-width: 1200px; margin: 0 auto; padding: 2rem; position: relative; z-index: 1; } /* ============================================ HERO SECTIONS ============================================ */ /* Main Hero Section */ .hero-main { text-align: center; padding: 4rem 2rem; background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); border-radius: 20px; margin: 2rem 0 4rem 0; border: 2px solid var(--border-color); position: relative; overflow: hidden; } .hero-main::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); animation: pulse 4s ease-in-out infinite; pointer-events: none; } @keyframes pulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.1); } } .hero-content { position: relative; z-index: 2; } .hero-title { font-family: 'Archivo Black', sans-serif; font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; background: linear-gradient(135deg, var(--accent) 0%, #00a0ff 100%); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; } .hero-subtitle { font-size: clamp(1.1rem, 3vw, 1.5rem); color: var(--text-primary); margin-bottom: 1rem; font-weight: 600; } .hero-description { font-size: clamp(0.95rem, 2vw, 1.1rem); color: var(--text-secondary); max-width: 800px; margin: 0 auto 2.5rem; line-height: 1.8; } /* CTA Buttons */ .cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; } .cta-button { padding: 1rem 2rem; font-size: 1rem; font-weight: 700; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; font-family: 'Work Sans', sans-serif; text-decoration: none; display: inline-block; border: 2px solid transparent; will-change: transform; } .cta-primary { background: var(--cta-primary); color: var(--bg-primary); box-shadow: 0 5px 20px var(--accent-glow); } .cta-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 30px var(--accent-glow); } .cta-secondary { background: transparent; color: var(--text-primary); border: 2px solid var(--text-primary); } .cta-secondary:hover { background: var(--accent-hover); border-color: var(--accent); color: var(--accent); transform: translateY(-3px); } /* Hero Stats */ .hero-stats { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; } .stat-item { text-align: center; padding: 1rem 2rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); min-width: 150px; } .stat-number { font-family: 'Archivo Black', sans-serif; font-size: 2.5rem; color: var(--accent); line-height: 1; } .stat-label { font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.5rem; } /* ============================================ SECTIONS ============================================ */ .content-section { margin-bottom: 4rem; padding: 2rem 0; } .section-alt { background: var(--bg-secondary); padding: 3rem 2rem; border-radius: 20px; border: 2px solid var(--border-color); } .section-header { text-align: center; margin-bottom: 3rem; } .section-title { font-family: 'Archivo Black', sans-serif; font-size: clamp(2rem, 4vw, 2.5rem); margin-bottom: 1rem; color: var(--accent); } .section-description { font-size: 1.1rem; color: var(--text-secondary); max-width: 800px; margin: 0 auto; line-height: 1.8; } /* ============================================ CARDS & GUIDES ============================================ */ .guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .guide-card { background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 15px; overflow: hidden; transition: all 0.3s ease; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; flex-direction: column; will-change: transform; } .guide-card:hover { transform: translateY(-10px); border-color: var(--accent); box-shadow: 0 10px 40px var(--accent-glow); } .guide-card-image { position: relative; overflow: hidden; } .guide-card-cover { width: 100%; height: 200px; object-fit: cover; transition: transform 0.3s ease; will-change: transform; } .guide-card:hover .guide-card-cover { transform: scale(1.05); } .guide-card-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; } .guide-card h3 { font-family: 'Archivo Black', sans-serif; color: var(--accent); margin-bottom: 1rem; font-size: 1.3rem; } .guide-card p { color: var(--text-secondary); margin-bottom: 1.5rem; flex-grow: 1; line-height: 1.6; } .guide-meta { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; } .guide-cover { max-height: 100%; max-width: 100%; height: auto; width: auto; object-fit: contain; object-position: center; background: var(--bg-secondary); border-bottom: 2px solid var(--border-color); margin: 0 auto 1rem auto; display: block; transition: transform 0.3s ease; } /* Desktop: Use 75% width */ @media (min-width: 1024px) { .guide-cover { max-width: 75%; } } /* Tablets: Use 80% width */ @media (min-width: 768px) and (max-width: 1023px) { .guide-cover { max-width: 80%; } } /* Mobile devices: Use 80% width */ @media (max-width: 767px) { .guide-cover { max-width: 80%; } } /* Landscape orientation on mobile/tablet - optimize for shorter viewport */ @media (max-width: 1023px) and (orientation: landscape) { .guide-cover { max-width: 75%; max-height: 70vh; object-fit: contain; } } /* Portrait orientation - allow more vertical space */ @media (orientation: portrait) { .guide-cover { max-height: none; } } /* Coming soon elements */ .coming-soon { font-family: 'Archivo Black', sans-serif; font-size: 1rem; color: var(--accent); text-shadow: 0 0 30px var(--accent-glow); margin-top: 15px; margin-bottom: 15px; } .coming-soon-image { width: 100px; height: 100px; object-fit: cover; } /* ============================================ SERIES-SPECIFIC BUTTONS ============================================ */ .read-btn { display: inline-block; padding: 12px 25px; background: transparent; color: var(--accent); border: 2px solid var(--accent); border-radius: 25px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; margin-top: 10px; } .read-btn:hover { background: var(--accent); color: var(--bg-primary); transform: translateX(5px); box-shadow: 0 5px 20px var(--accent-glow); } .guide-badge { display: inline-block; padding: 0.25rem 0.75rem; background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent); border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .badge-popular { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border-color: #fbbf24; } .badge-critical { background: rgba(239, 68, 68, 0.1); color: #ef4444; border-color: #ef4444; } .badge-advanced { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; border-color: #8b5cf6; } .badge-new { background: rgba(16, 185, 129, 0.1); color: #10b981; border-color: #10b981; } .guide-time { font-size: 0.85rem; color: var(--text-secondary); } .guide-link { display: inline-block; color: var(--accent); text-decoration: none; font-weight: 600; transition: all 0.3s ease; padding: 0.75rem 1.5rem; margin: 0 1.5rem 1.5rem 1.5rem; border: 1px solid var(--accent); border-radius: 5px; text-align: center; } .guide-link:hover { background: var(--accent-hover); transform: translateX(5px); } /* ============================================ ABOUT SECTION ============================================ */ .about-section { background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 20px; padding: 3rem; backdrop-filter: blur(10px); } .about-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; margin-top: 2rem; } /* .about-grid img { height: 30vh; max-height: 100px; width: auto; display: block; max-width: 100%; }*/ .about-text h3 { font-family: 'Archivo Black', sans-serif; color: var(--accent); margin: 2rem 0 1rem 0; font-size: 1.5rem; } .about-text p { color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.8; } .services-list { list-style: none; padding: 0; } .services-list li { padding: 0.75rem 0; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; } .about-cta { display: flex; align-items: center; } .cta-box { background: var(--bg-secondary); border: 2px solid var(--border-color); border-radius: 15px; padding: 2rem; text-align: center; } .cta-box h3 { font-family: 'Archivo Black', sans-serif; color: var(--accent); margin-bottom: 1rem; font-size: 1.3rem; } .cta-box p { color: var(--text-secondary); margin-bottom: 1.5rem; } .cta-box img{ height: 30vh; max-height: 100px; width: auto; display: inline-block; max-width: 100%; } /* ============================================ CONTACT PAGE ============================================ */ .contact-header { text-align: center; margin-bottom: 3rem; } .contact-header h1 { font-family: 'Archivo Black', sans-serif; font-size: clamp(2rem, 5vw, 2.5rem); margin-bottom: 1rem; color: var(--text-primary); } .contact-header .tagline { color: var(--accent); font-size: 1.1rem; font-weight: 500; margin-bottom: 1rem; } .contact-header p { color: var(--text-secondary); font-size: 1rem; line-height: 1.8; max-width: 800px; margin: 0 auto; } /* Alternative Contact Section */ .alt-contact { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 15px; padding: 2rem; margin-bottom: 2rem; text-align: center; } .alt-contact.featured { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); border: 2px solid var(--accent); padding: 2.5rem; box-shadow: 0 4px 20px var(--accent-glow); } .alt-contact h2 { font-family: 'Archivo Black', sans-serif; font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-primary); } .alt-contact p { color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.8; } .calendly-btn { display: inline-block; padding: 1rem 2rem; background: var(--accent); color: var(--bg-primary); text-decoration: none; border: none; border-radius: 8px; font-weight: 700; transition: all 0.3s ease; font-family: 'Work Sans', sans-serif; } .calendly-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px var(--accent-glow); } .contact-divider { text-align: center; margin: 2rem 0; position: relative; } .contact-divider::before, .contact-divider::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--border-color); } .contact-divider::before { left: 0; } .contact-divider::after { right: 0; } .contact-divider span { background: var(--bg-primary); padding: 0 1rem; color: var(--text-secondary); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; } /* Contact Form */ .contact-form { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 15px; padding: 2.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; color: var(--text-primary); font-weight: 500; font-size: 0.95rem; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.875rem; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-family: 'Work Sans', sans-serif; font-size: 1rem; transition: all 0.3s ease; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .form-group textarea { min-height: 150px; resize: vertical; } .form-group small { display: block; margin-top: 0.5rem; color: var(--text-secondary); font-size: 0.85rem; } .required { color: var(--accent); } .submit-btn { width: 100%; padding: 1rem; background: var(--accent); color: var(--bg-primary); border: none; border-radius: 8px; font-family: 'Work Sans', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; will-change: transform; } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--accent-glow); } .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Status Messages */ .status-message { padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; font-weight: 500; display: none; } .status-message.success { background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success-color); color: var(--success-color); display: block; } .status-message.error { background: rgba(239, 68, 68, 0.1); border: 1px solid var(--error-color); color: var(--error-color); display: block; } /* Contact Info Section */ .contact-info { margin-top: 3rem; padding: 2rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 15px; } .contact-info h3 { font-family: 'Archivo Black', sans-serif; color: var(--accent); margin-bottom: 2rem; text-align: center; font-size: 1.5rem; } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .info-item { text-align: center; } .info-icon { font-size: 2.5rem; margin-bottom: 1rem; } .info-item h4 { font-family: 'Archivo Black', sans-serif; color: var(--text-primary); margin-bottom: 0.75rem; font-size: 1.1rem; } .info-item p { color: var(--text-secondary); line-height: 1.6; } /* ============================================ FOOTER ============================================ */ footer { background-color: var(--bg-secondary); padding: 2rem; text-align: center; margin-top: 4rem; border-top: 2px solid var(--border-color); position: relative; z-index: 10; } .footer-content p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.5rem; } .footer-tagline { font-size: 0.85rem; color: var(--text-secondary); font-weight: 300; font-style: italic; margin-top: 0.5rem; } .back-link { display: inline-block; margin-top: 1rem; color: var(--accent); text-decoration: none; font-weight: 600; transition: all 0.3s ease; will-change: transform; } .back-link:hover { transform: translateX(-5px); } /* ============================================ CTA SECTION (Index Page) ============================================ */ .cta-section { background: var(--bg-secondary); border: 2px solid var(--accent); border-radius: 10px; padding: 3rem; text-align: center; margin-top: 4rem; } .cta-section h2 { font-family: 'Archivo Black', sans-serif; font-size: 2rem; margin-bottom: 1rem; color: var(--accent); } .cta-section p { color: var(--text-primary); margin-bottom: 1.5rem; } /* ============================================ RESPONSIVE DESIGN ============================================ */ /* Large Tablets and Small Desktops (1024px - 1200px) */ @media (max-width: 1200px) { .container { max-width: 1000px; } .hero-main { padding: 3rem 1.5rem; } .guides-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } /* Tablets (768px - 1024px) */ @media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; } .cta-box { margin-top: 2rem; } /* Tablet-optimized navigation - keep horizontal */ .nav-links { gap: 1rem; } .nav-links a { font-size: 0.9rem; } /* Two-column grid for tablets */ .guides-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .info-grid { grid-template-columns: repeat(2, 1fr); } /* Adjust hero stats for tablet */ .hero-stats { gap: 1.5rem; } .stat-item { min-width: 140px; } /* Adjust section padding for tablets */ .section-alt { padding: 2.5rem 1.5rem; } } /* Small Tablets and Large Phones (600px - 768px) */ @media (max-width: 768px) { /* Header & Navigation */ .hamburger { display: flex; } .logo-text { font-size: 0.9rem; } .logo img { height: 40px; } .nav-links { position: fixed; top: 76px; right: -100%; width: 280px; height: calc(100vh - 76px); background: var(--bg-secondary); flex-direction: column; padding: 2rem; gap: 1rem; align-items: stretch; border-left: 2px solid var(--border-color); transition: right 0.3s ease; overflow-y: auto; /* iOS momentum scrolling */ -webkit-overflow-scrolling: touch; /* Prevent content shift on scroll */ overscroll-behavior-y: contain; } .nav-links.active { right: 0; } .nav-links a { padding: 0.75rem 1rem; border-radius: 5px; text-align: center; } .nav-links a::after { display: none; } .theme-toggle { width: 100%; justify-content: center; } /* Hero */ .hero-main { padding: 2rem 1rem; } .cta-buttons { flex-direction: column; align-items: stretch; } .cta-button { width: 100%; text-align: center; } .hero-stats { flex-direction: column; gap: 1rem; } .stat-item { width: 100%; } /* Sections */ .guides-grid { grid-template-columns: 1fr; } .section-alt { padding: 2rem 1rem; } /* Contact */ .contact-form { padding: 1.5rem; } .contact-divider::before, .contact-divider::after { width: 30%; } .info-grid { grid-template-columns: 1fr; } /* Container */ .container { padding: 1rem; } } /* Very Small Phones (320px - 480px) */ @media (max-width: 480px) { .logo-text { display: none; } header { padding: 1rem; } .contact-divider::before, .contact-divider::after { width: 20%; } /* Reduce button padding for very small screens */ .cta-button { padding: 0.875rem 1.5rem; font-size: 0.95rem; } /* Stack hero stats vertically */ .stat-item { min-width: 100%; } /* Reduce form padding */ .contact-form { padding: 1rem; } /* Smaller hero padding */ .hero-main { padding: 1.5rem 1rem; margin: 1rem 0 2rem 0; } /* Adjust font sizes for readability */ .hero-title { font-size: clamp(1.75rem, 8vw, 2.5rem); } .section-title { font-size: clamp(1.5rem, 6vw, 2rem); } } /* Extra Small Devices (below 360px) */ @media (max-width: 360px) { .container { padding: 0.75rem; } .nav-links { width: 100%; padding: 1.5rem; } .cta-button { padding: 0.75rem 1rem; font-size: 0.9rem; } .guide-card-content { padding: 1rem; } } button, .cta-button, .nav-cta, .nav-cta-primary, .submit-btn, .read-btn, .guide-link, .theme-toggle { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* ============================================ UTILITY CLASSES ============================================ */ .text-center { text-align: center; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mt-4 { margin-top: 4rem; } .p-2 { padding: 2rem; } .p-3 { padding: 3rem; } /* ============================================ TOUCH DEVICE OPTIMIZATIONS ============================================ */ /* Disable hover effects on touch devices */ @media (hover: none) and (pointer: coarse) { .guide-card:hover, .cta-button:hover, .nav-links a:hover, .logo:hover img { transform: none; } /* Add active states for touch feedback */ .cta-button:active { transform: scale(0.98); } .guide-card:active { transform: scale(0.99); } } /* Increase touch target sizes for better accessibility */ @media (max-width: 768px) { button, a, input, select, textarea { min-height: 44px; /* Apple's recommended minimum */ } .nav-links a { min-height: 48px; /* Larger for navigation */ display: flex; align-items: center; justify-content: center; } } /* Landscape Tablets (768px - 1024px in landscape) */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .hero-main { padding: 2rem 2rem; } .guides-grid { grid-template-columns: repeat(3, 1fr); } .nav-links { gap: 1.25rem; } /* Optimize for wider but shorter screens */ .hero-stats { flex-direction: row; } } /* Portrait Tablets (768px - 1024px in portrait) */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .guides-grid { grid-template-columns: repeat(2, 1fr); } .hero-stats { flex-direction: row; flex-wrap: wrap; } } /* ============================================ BROWSER-SPECIFIC OPTIMIZATIONS ============================================ */ /* Brave Browser - Chromium-based, inherits all Chrome optimizations */ /* Brave Shields compatible - no tracking/analytics dependencies */ /* Privacy-focused features fully supported */ /* Firefox-specific optimizations */ @-moz-document url-prefix() { /* Smooth scrollbar for Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-secondary); } } /* Safari-specific optimizations */ @supports (-webkit-backdrop-filter: blur(10px)) { /* Enhanced for Safari */ .guide-card, .stat-item { -webkit-backdrop-filter: blur(15px); } } /* Samsung Internet optimizations */ @supports (-webkit-appearance: none) { input[type="text"], input[type="email"], textarea, select { -webkit-appearance: none; appearance: none; } } /* ============================================ BROWSER SUPPORT FALLBACKS ============================================ */ /* Flexbox gap fallback for older Safari (< 14.1) */ @supports not (gap: 1rem) { /* Hamburger menu gap fallback */ .hamburger span:not(:last-child) { margin-bottom: 5px; } /* Nav links gap fallback */ .nav-links a:not(:last-child) { margin-right: 1.5rem; } /* CTA buttons gap fallback */ .cta-buttons > *:not(:last-child) { margin-right: 1rem; } /* Guide grid gap fallback - using margins */ .guides-grid { margin: -1rem; } .guides-grid > * { margin: 1rem; } } /* ============================================ MOBILE DEVICE SPECIFIC FIXES ============================================ */ /* Prevent zoom on input focus (iOS Safari) */ @media screen and (max-width: 768px) { input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select { font-size: 16px; /* Prevents auto-zoom on iOS */ } } /* Fix for mobile Safari bottom bar */ @supports (-webkit-touch-callout: none) { /* iOS-specific fix for viewport height with bottom bar */ .nav-links { height: -webkit-fill-available; } } /* Android Chrome address bar compensation */ @media screen and (max-width: 768px) { html { /* Use dvh (dynamic viewport height) for better mobile support */ min-height: 100dvh; min-height: -webkit-fill-available; } body { min-height: 100dvh; min-height: -webkit-fill-available; } } /* Prevent horizontal scroll on all mobile devices */ html, body { max-width: 100vw; overflow-x: hidden; } /* Fix for landscape mode on mobile */ @media screen and (max-width: 768px) and (orientation: landscape) { header { padding: 0.5rem 1rem; } .hero-main { padding: 1.5rem 1rem; } } /* ============================================ LEGAL PAGES STYLES ============================================ */ /* ============================================ VISIT OUR FRIENDS SECTION ============================================ */ .friends-section { background: var(--bg-secondary); border-radius: 20px; padding: 3rem 2rem; margin: 3rem 0; } .friends-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; } .friend-card { position: relative; display: block; border-radius: 15px; overflow: hidden; background: var(--card-bg); border: 2px solid var(--border-color); transition: all 0.3s ease; text-decoration: none; cursor: pointer; aspect-ratio: 4/3; } .friend-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px var(--accent-glow); border-color: var(--accent); } .friend-card-image { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); } .friend-card-image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: center; display: block; transition: transform 0.3s ease; } .friend-card:hover .friend-card-image img { transform: scale(1.03); } .friend-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7), transparent); padding: 2rem 1.5rem 1.5rem 1.5rem; transform: translateY(0); transition: all 0.3s ease; } .friend-card:hover .friend-card-overlay { background: linear-gradient(to top, rgba(0, 240, 255, 0.2), rgba(0, 0, 0, 0.8), transparent); } .friend-card-overlay h3 { color: var(--accent); font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem 0; padding: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .friend-card-overlay p { color: var(--text-primary); font-size: 1rem; margin: 0; padding: 0; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); } /* Responsive adjustments for friends section */ @media (max-width: 1024px) { .friends-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } } @media (max-width: 768px) { .friends-section { padding: 2rem 1rem; } .friends-grid { grid-template-columns: 1fr; gap: 1.5rem; } .friend-card { aspect-ratio: 16/9; } .friend-card-overlay h3 { font-size: 1.3rem; } .friend-card-overlay p { font-size: 0.9rem; } } @media (max-width: 480px) { .friends-section { padding: 1.5rem 1rem; margin: 2rem 0; } .friend-card-overlay { padding: 1.5rem 1rem 1rem 1rem; } .friend-card-overlay h3 { font-size: 1.2rem; } } /* Touch device optimization for friend cards */ @media (hover: none) and (pointer: coarse) { .friend-card:hover { transform: none; } .friend-card:active { transform: scale(0.98); } .friend-card:hover .friend-card-image img { transform: none; } } /* ============================================ LEGAL PAGES STYLES ============================================ */ .legal-container { max-width: 900px; margin: 0 auto; padding: 2rem; } .legal-container h1 { font-size: 2.5rem; margin-bottom: 1rem; color: var(--accent-color); text-align: center; } .effective-date, .last-updated { text-align: center; font-size: 0.9rem; color: var(--text-color); opacity: 0.8; margin: 0.5rem 0; } .legal-section { margin: 2.5rem 0; line-height: 1.8; } .legal-section h2 { font-size: 1.8rem; color: var(--accent-color); margin: 2rem 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(0, 255, 255, 0.3); } .legal-section h3 { font-size: 1.3rem; color: var(--text-color); margin: 1.5rem 0 1rem 0; font-weight: 600; } .legal-section p { margin: 1rem 0; text-align: justify; } .legal-section ul { margin: 1rem 0 1rem 2rem; list-style-type: disc; } .legal-section ul li { margin: 0.5rem 0; line-height: 1.6; } .legal-section strong { color: var(--accent-color); font-weight: 600; } .contact-info { background: rgba(0, 255, 255, 0.1); padding: 1.5rem; border-radius: 8px; border-left: 4px solid var(--accent-color); margin: 1rem 0; } .contact-info p { margin: 0.5rem 0; } .contact-info a { color: var(--accent-color); text-decoration: underline; } .contact-info a:hover { color: #00cccc; } .acknowledgment { background: rgba(0, 255, 255, 0.05); padding: 2rem; border-radius: 10px; border: 2px solid var(--accent-color); margin-top: 3rem; } .acknowledgment h2 { border-bottom: none; text-align: center; } .acknowledgment p { text-align: center; font-weight: 500; } .warning-box { background: rgba(255, 100, 0, 0.1); border-left: 4px solid #ff6400; padding: 1.5rem; margin: 1.5rem 0; border-radius: 5px; } .warning-box p { margin: 0.5rem 0; color: var(--text-color); } .warning-box strong { color: #ff6400; } .footer-nav { margin-top: 1rem; display: flex; gap: 2rem; justify-content: center; } .footer-nav a { color: var(--accent-color); text-decoration: none; font-size: 0.9rem; transition: color 0.3s ease; } .footer-nav a:hover { color: #00cccc; text-decoration: underline; } /* ============================================ PRINT STYLES ============================================ */ @media print { .animated-bg, header, .hamburger, .theme-toggle, .cta-buttons, footer { display: none; } body { background: white; color: black; } }