/** * landing-page.css * * Shared CSS for all landing pages (header, footer, nav, responsive) * Gold standard: harga.html * * Usage: Add to */ /* ============================================ CSS VARIABLES ============================================ */ :root { --primary-color: #213555; --primary-rgb: 33, 53, 85; --secondary-color: #3E5879; --accent-color: #D8C4B6; --bg-surface: #F5EFE7; } /* ============================================ BASE RESET ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scrollbar-gutter: stable; scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: #ffffff; color: #1e293b; line-height: 1.6; overflow-x: hidden; width: 100%; display: flex; flex-direction: column; min-height: 100vh; } /* ============================================ HEADER ============================================ */ .header { padding: 1rem 2rem; background: #ffffff; border-bottom: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); position: sticky; top: 0; z-index: 1000; } .nav-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .logo-section { display: flex; align-items: center; gap: 1rem; } .logo { font-size: 1.5rem; font-weight: 800; color: #1e293b; text-decoration: none; } .tagline { color: #64748b; font-size: 0.75rem; font-weight: 500; line-height: 1.5; padding-left: 1rem; border-left: 2px solid #e2e8f0; } .tagline-line { display: block; white-space: nowrap; } /* ============================================ NAVIGATION LINKS ============================================ */ .nav-links { display: flex; align-items: center; gap: 2rem; } .nav-links>a { color: #64748b; text-decoration: none; font-weight: 500; font-size: 0.9375rem; padding: 0.5rem 0.75rem; border-radius: 6px; transition: all 0.2s; } .nav-links>a:hover { color: var(--primary-color); background: var(--bg-surface); } /* ============================================ NAV DROPDOWN ============================================ */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { color: #64748b; text-decoration: none; font-weight: 500; font-size: 0.9375rem; padding: 0.5rem 0.75rem; border-radius: 6px; transition: all 0.2s; display: flex; align-items: center; gap: 4px; cursor: pointer; } .nav-dropdown-trigger:hover { color: var(--primary-color); background: var(--bg-surface); } .dropdown-arrow { width: 12px; height: 12px; transition: transform 0.2s; } .nav-dropdown:hover .dropdown-arrow { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: 100%; left: 0; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.2s; z-index: 1000; padding: 0.5rem 0; } .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-menu a { display: block; padding: 0.6rem 1rem; color: #64748b; text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: all 0.15s; } .nav-dropdown-menu a:hover { background: var(--bg-surface); color: var(--primary-color); } /* ============================================ AUTH BUTTONS ============================================ */ .auth-buttons { display: flex; gap: 0.75rem; align-items: center; } .btn-login { background: transparent; color: var(--primary-color); padding: 0.5rem 1.25rem; border: 1px solid rgba(var(--primary-rgb), 0.3); border-radius: 8px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: all 0.2s; } .btn-login:hover { background: var(--bg-surface); border-color: var(--primary-color); } .btn-start { background: var(--primary-color); color: #ffffff; padding: 0.5rem 1.25rem; border: none; border-radius: 8px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: all 0.2s; } .btn-start:hover { background: var(--secondary-color); } /* ============================================ HEADER DEMO BUTTON ============================================ */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .header-demo-btn { background-color: #213555; color: white !important; border: 2px solid #213555; padding: 0.5rem 1.25rem; border-radius: 8px; font-weight: 700; font-size: 0.9375rem; text-decoration: none; transition: all 0.3s; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 6px rgba(33, 53, 85, 0.3); flex-shrink: 0; white-space: nowrap; } .header-demo-btn:hover { background-color: var(--accent-color) !important; color: var(--primary-color) !important; border-color: var(--accent-color) !important; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(33, 53, 85, 0.2); } /* ============================================ FOOTER ============================================ */ .footer { background: var(--bg-surface); padding: 2.5rem 2rem; border-top: 1px solid rgba(var(--primary-rgb), 0.08); margin-top: auto; } .footer-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; } .footer-links { display: flex; gap: 2rem; } .footer-links a { color: #64748b; text-decoration: none; font-weight: 500; font-size: 0.875rem; transition: color 0.2s; } .footer-links a:hover { color: var(--primary-color); } .copyright { color: #94a3b8; font-size: 0.875rem; } /* ============================================ RESPONSIVE - LARGE TABLET / IPAD PRO (969px - 1200px) ============================================ */ @media (min-width: 969px) and (max-width: 1200px) { .header { padding: 0.75rem 1.5rem; } .nav-container { gap: 1rem; } .nav-links { gap: 1rem; } .nav-links>a, .nav-dropdown-trigger { font-size: 0.875rem; /* Slightly smaller font */ padding: 0.5rem; } .logo { font-size: 1.35rem; } .tagline { display: none; /* Hide tagline on compact tablet headers to save space */ } .auth-buttons { gap: 0.5rem; } .btn-login, .btn-start { padding: 0.5rem 1rem; font-size: 0.875rem; } } /* ============================================ RESPONSIVE - TABLET / IPAD MINI (641px - 968px) ============================================ */ @media (min-width: 641px) and (max-width: 968px) { .header { padding: 0.75rem 1.5rem; } .nav-container { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; } /* Row 1: Logo & Tagline */ .logo-section { width: 100%; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid #f1f5f9; justify-content: flex-start; } .logo { font-size: 1.35rem; } .tagline { display: block; font-size: 0.7rem; padding-left: 0.75rem; border-left: 2px solid #e2e8f0; } .tagline-line { display: block; } /* Row 2: Nav & Auth */ .nav-links { display: flex; gap: 0.5rem; flex: 1; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } .nav-links>a, .nav-dropdown-trigger { font-size: 0.875rem; padding: 0.5rem 0.6rem; white-space: nowrap; } .nav-dropdown-menu { min-width: 160px; left: 0; transform: translateY(10px); } .auth-buttons { display: flex; gap: 0.5rem; flex-shrink: 0; } .btn-login, .btn-start { padding: 0.45rem 1rem; font-size: 0.8125rem; } .header-demo-btn { padding: 0.35rem 0.8rem; font-size: 0.8rem; } .user-profile-name { display: inline-block; margin-right: 0.5rem; font-size: 0.875rem; } .footer-content, .footer-links { flex-direction: column; gap: 1rem; text-align: center; } } /* ============================================ RESPONSIVE - MOBILE (Max 640px) ============================================ */ @media (max-width: 640px) { .header { padding: 0.75rem 1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .nav-container { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; } .logo-section { width: 100%; display: flex; align-items: center; gap: 0.5rem; } .logo { font-size: 1.25rem; } /* Mobile Tagline: Stacked tight or smaller */ .tagline { font-size: 0.65rem; line-height: 1.2; padding-left: 0.5rem; border-left: 1px solid #e2e8f0; display: block; flex: 1; } .tagline-line { display: block; white-space: normal; } /* Nav Links: Wrap naturally */ .nav-links { width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; order: 2; } .nav-links>a, .nav-dropdown-trigger { font-size: 0.8rem; padding: 0.4rem 0.6rem; border: 1px solid #f1f5f9; border-radius: 6px; } .header-demo-btn { padding: 0.4rem 0.6rem; font-size: 0.75rem; margin-left: auto; /* Push to right if space allows */ } /* Auth Buttons: Full width bottom */ .auth-buttons { order: 3; width: 100%; display: flex; gap: 0.5rem; flex-wrap: wrap; } .btn-login, .btn-start { flex: 1; text-align: center; padding: 0.6rem; font-size: 0.875rem; } .user-profile-name { display: none; } /* Hide name on mobile */ .nav-dropdown-menu { min-width: 150px; } .footer-content, .footer-links { flex-direction: column; text-align: center; } }