/* ===================================================== style.css — TikeTaka Landing Page Main Styles ===================================================== */ /* ── CSS Custom Properties ── */ :root { /* Brand Colors */ --color-primary: #2563EB; --color-primary-dark: #1D4ED8; --color-primary-light: #DBEAFE; --color-secondary: #0EA5E9; --color-accent: #10B981; --color-accent-dark: #059669; --color-warning: #F59E0B; --color-danger: #EF4444; /* Background */ --color-bg: #F8FAFC; --color-bg-alt: #EFF6FF; --color-surface: #FFFFFF; --color-surface-2: #F1F5F9; /* Text */ --color-text: #0F172A; --color-text-muted: #64748B; --color-text-light: #94A3B8; /* Borders */ --color-border: #E2E8F0; --color-border-light: #F1F5F9; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 4px 20px rgba(0,0,0,0.08); --shadow-lg: 0 8px 40px rgba(0,0,0,0.10); --shadow-xl: 0 20px 60px rgba(0,0,0,0.12); --shadow-blue: 0 8px 32px rgba(37,99,235,0.20); --shadow-blue-lg: 0 16px 64px rgba(37,99,235,0.25); /* Border Radius */ --radius-xs: 0.375rem; --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-2xl: 2rem; --radius-full: 9999px; /* Spacing */ --section-py: 6rem; --section-py-sm: 4rem; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Fira Code', 'Cascadia Code', Consolas, monospace; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Transitions */ --transition-fast: all 0.15s ease; --transition-base: all 0.25s ease; --transition-slow: all 0.4s ease; --transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Gradients */ --gradient-primary: linear-gradient(135deg, #2563EB 0%, #0EA5E9 100%); --gradient-accent: linear-gradient(135deg, #0EA5E9 0%, #10B981 100%); --gradient-dark: linear-gradient(135deg, #0F172A 0%, #1E3A5F 100%); --gradient-hero: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 50%, #E0F2FE 100%); --gradient-cta: linear-gradient(135deg, #2563EB 0%, #0EA5E9 50%, #10B981 100%); /* Glass */ --glass-bg: rgba(255,255,255,0.7); --glass-border: rgba(255,255,255,0.6); --glass-blur: blur(20px); } /* ── Font Face (Local Inter) ── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: local('Inter Regular'), local('Inter-Regular'), url('../fonts/inter/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: local('Inter Medium'), local('Inter-Medium'), url('../fonts/inter/inter-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: local('Inter SemiBold'), local('Inter-SemiBold'), url('../fonts/inter/inter-600.woff2') format('woff2'); } /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* scroll-behavior: smooth is intentionally REMOVED from here. * Setting it on hijacks ALL scroll events including the mouse wheel, * causing jump/double-scroll/overscroll bugs on Windows & high-res mice. * Smooth scrolling for anchor links is handled per-click in animation.js only. */ scroll-padding-top: 80px; font-size: 16px; } body { font-family: var(--font-sans); font-weight: var(--fw-regular); color: var(--color-text); background-color: var(--color-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } ::selection { background-color: var(--color-primary-light); color: var(--color-primary-dark); } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: var(--transition-base); } /* ── Typography Scale ── */ .display-hero { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: var(--fw-extrabold); line-height: 1.15; letter-spacing: -0.03em; } .display-section { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -0.02em; } .section-label { font-size: 0.8125rem; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--color-bg); } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-light); } /* ===================================================== NAVBAR ===================================================== */ #navbar { background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(226,232,240,0.6); transition: all 0.3s ease; z-index: 1000; padding: 1rem 0; } #navbar.scrolled { padding: 0.6rem 0; box-shadow: var(--shadow-md); background: rgba(255,255,255,0.97); } .navbar-brand { display: flex; align-items: center; gap: 0.625rem; font-weight: var(--fw-bold); font-size: 1.375rem; color: var(--color-text); } .navbar-brand .brand-icon { width: 36px; height: 36px; background: var(--gradient-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(37,99,235,0.35); } .navbar-brand .brand-icon svg { width: 20px; height: 20px; color: white; } .brand-text-primary { color: var(--color-primary); } .brand-text-accent { color: var(--color-accent); } .nav-link { font-size: 0.9375rem; font-weight: var(--fw-medium); color: var(--color-text-muted) !important; padding: 0.5rem 0.875rem !important; border-radius: var(--radius-sm); transition: var(--transition-base); position: relative; } .nav-link:hover, .nav-link.active { color: var(--color-primary) !important; background: var(--color-primary-light); } .navbar-toggler { border: none; padding: 0.5rem; border-radius: var(--radius-sm); } .navbar-toggler:focus { box-shadow: none; } /* ── CTA Button (Navbar) ── */ .btn-nav-cta { background: var(--gradient-primary); color: white !important; font-weight: var(--fw-semibold); padding: 0.5rem 1.25rem !important; border-radius: var(--radius-full); font-size: 0.9rem; box-shadow: var(--shadow-blue); transition: var(--transition-base); } .btn-nav-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-blue-lg); filter: brightness(1.05); } /* ===================================================== BUTTONS ===================================================== */ .btn { font-weight: var(--fw-semibold); border-radius: var(--radius-full); padding: 0.75rem 2rem; font-size: 1rem; transition: var(--transition-bounce); border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-primary { background: var(--gradient-primary); color: white; box-shadow: var(--shadow-blue); } .btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-blue-lg); filter: brightness(1.07); color: white; } .btn-outline-primary { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); } .btn-outline-primary:hover { background: var(--color-primary); color: white; transform: translateY(-3px); box-shadow: var(--shadow-blue); } .btn-white { background: white; color: var(--color-primary); box-shadow: var(--shadow-md); } .btn-white:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--color-primary-dark); } .btn-outline-white { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.7); } .btn-outline-white:hover { background: white; color: var(--color-primary); transform: translateY(-3px); } .btn-lg { padding: 0.875rem 2.25rem; font-size: 1.0625rem; } .btn svg { width: 20px; height: 20px; flex-shrink: 0; } /* ===================================================== SECTION UTILITIES ===================================================== */ .section-py { padding: var(--section-py) 0; } .section-py-sm { padding: var(--section-py-sm) 0; } .section-header { margin-bottom: 3.5rem; } .section-header .section-label { margin-bottom: 0.75rem; display: block; } .section-header .display-section { margin-bottom: 1rem; } .section-header p { color: var(--color-text-muted); font-size: 1.0625rem; max-width: 640px; } .section-header.centered { text-align: center; } .section-header.centered p { margin: 0 auto; } .bg-alt { background-color: var(--color-bg-alt); } .bg-surface { background-color: var(--color-surface); } /* ── Divider ── */ .section-divider { width: 60px; height: 4px; background: var(--gradient-primary); border-radius: var(--radius-full); margin: 1rem auto; } .section-divider.left { margin-left: 0; } /* ===================================================== HERO SECTION ===================================================== */ #hero { min-height: calc(100vh - 80px); background: var(--gradient-hero); display: flex; align-items: center; position: relative; overflow: hidden; padding: 120px 0 100px; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--glass-bg); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-full); padding: 0.4rem 1rem 0.4rem 0.4rem; font-size: 0.8125rem; font-weight: var(--fw-medium); color: var(--color-text-muted); margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); } .hero-badge .badge-dot { width: 24px; height: 24px; background: var(--gradient-accent); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; } .hero-badge .badge-dot svg { width: 12px; height: 12px; color: white; } .hero-title { color: var(--color-text); } .hero-title .highlight { color: var(--color-primary); } .hero-desc { color: var(--color-text-muted); font-size: 1.125rem; line-height: 1.75; max-width: 520px; margin: 1.5rem 0 2.5rem; } .hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } /* ── Hero Trust Badges ── */ .hero-trust { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.5rem; flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: var(--fw-medium); color: var(--color-text-muted); } .trust-item svg { width: 16px; height: 16px; color: var(--color-accent); } /* ── Hero Image ── */ .hero-img-wrap { position: relative; z-index: 1; } .hero-img-main { border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.8); width: 100%; object-fit: cover; } .hero-img-float-1, .hero-img-float-2 { position: absolute; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 3px solid white; } .hero-img-float-1 { bottom: -24px; left: -24px; width: 140px; animation: floatY 4s ease-in-out 1s infinite; background: white; padding: 0.75rem; } .hero-img-float-2 { top: -16px; right: -16px; width: 120px; animation: floatY 5s ease-in-out 2s infinite; background: white; padding: 0.75rem; } /* ── Hero Background Shapes ── */ .hero-bg-shapes { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .blob-shape { position: absolute; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; opacity: 0.15; filter: blur(40px); } .blob-1 { width: 500px; height: 500px; background: var(--color-primary); top: -100px; right: -100px; } .blob-2 { width: 350px; height: 350px; background: var(--color-secondary); bottom: -50px; left: 20%; } .blob-3 { width: 200px; height: 200px; background: var(--color-accent); top: 40%; left: -50px; } /* ── Floating Cards ── */ .float-card { background: white; border-radius: var(--radius-lg); padding: 1rem 1.25rem; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; font-weight: var(--fw-semibold); color: var(--color-text); min-width: 160px; } .float-card-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .float-card-icon svg { width: 18px; height: 18px; } .float-card .float-card-label { font-size: 0.6875rem; color: var(--color-text-muted); font-weight: var(--fw-regular); } /* ===================================================== STATS SECTION ===================================================== */ #stats { padding: 2rem 0; background: var(--color-surface); border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light); } .stat-card { text-align: center; padding: 2.5rem 1.5rem; border-radius: var(--radius-xl); background: white; position: relative; overflow: hidden; transition: var(--transition-bounce); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); border-radius: var(--radius-full) var(--radius-full) 0 0; } .stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-blue); } .stat-number { font-size: 2.75rem; font-weight: var(--fw-extrabold); color: var(--color-primary); line-height: 1; letter-spacing: -0.03em; display: block; margin-bottom: 0.5rem; } .stat-label { font-size: 0.9375rem; font-weight: var(--fw-semibold); color: var(--color-text); margin-bottom: 0.25rem; } .stat-sub { font-size: 0.8125rem; color: var(--color-text-muted); } /* ===================================================== KEUNGGULAN (FEATURES) SECTION ===================================================== */ #keunggulan { background: var(--color-bg); } .feature-card { background: white; border-radius: var(--radius-xl); padding: 2rem; border: 1px solid var(--color-border-light); height: 100%; position: relative; overflow: hidden; transition: var(--transition-bounce); } .feature-card::after { content: ''; position: absolute; inset: 0; background: var(--gradient-primary); opacity: 0; transition: opacity 0.3s ease; border-radius: var(--radius-xl); z-index: 0; } .feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-blue); border-color: transparent; } .feature-card:hover::after { opacity: 1; } .feature-card > * { position: relative; z-index: 1; } .feature-card:hover .feature-title, .feature-card:hover .feature-desc, .feature-card:hover .feature-icon { color: white; } .feature-card:hover .feature-icon-wrap { background: rgba(255,255,255,0.2) !important; } .feature-icon-wrap { width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; transition: var(--transition-base); } .feature-icon { width: 28px; height: 28px; transition: var(--transition-base); } .feature-title { font-size: 1.0625rem; font-weight: var(--fw-bold); margin-bottom: 0.5rem; transition: var(--transition-base); } .feature-desc { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.65; transition: var(--transition-base); } /* ===================================================== MODUL SECTION ===================================================== */ #modul { background: var(--color-bg-alt); } .modul-card { background: white; border-radius: var(--radius-xl); padding: 1.75rem 1.5rem; border: 1px solid var(--color-border-light); text-align: center; height: 100%; transition: var(--transition-bounce); position: relative; overflow: hidden; } .modul-card::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform: scaleY(0); transform-origin: bottom; background: var(--gradient-primary); transition: transform 0.3s ease; z-index: 0; will-change: transform; } .modul-card:hover { transform: translate3d(0, -8px, 0); box-shadow: var(--shadow-blue); border-color: transparent; } .modul-card:hover::before { transform: scaleY(1); } .modul-card > * { position: relative; z-index: 1; } .modul-card:hover .modul-name, .modul-card:hover .modul-desc { color: white; } .modul-card:hover .modul-icon-wrap { background: rgba(255,255,255,0.2) !important; } .modul-card:hover .modul-icon { color: white !important; } .modul-icon-wrap { width: 60px; height: 60px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; transition: var(--transition-base); } .modul-icon { width: 30px; height: 30px; transition: var(--transition-base); } .modul-name { font-size: 1rem; font-weight: var(--fw-bold); color: var(--color-text); margin-bottom: 0.375rem; transition: var(--transition-base); } .modul-desc { font-size: 0.8rem; color: var(--color-text-muted); transition: var(--transition-base); } /* ===================================================== DETAIL SECTIONS (POS, CRM, Inventory, etc.) ===================================================== */ .detail-section { background: white; } .detail-section.alt { background: var(--color-bg-alt); } .detail-img-wrap { position: relative; } .detail-img { border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); width: 100%; } .detail-img-badge { position: absolute; background: white; border-radius: var(--radius-lg); padding: 0.75rem 1.125rem; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; font-weight: var(--fw-semibold); } .detail-img-badge svg { width: 16px; height: 16px; } .checklist-item { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border-light); font-size: 0.9375rem; font-weight: var(--fw-medium); color: var(--color-text); transition: transform 0.2s ease, color 0.2s ease; will-change: transform; } .checklist-item:last-child { border-bottom: none; } .checklist-item:hover { color: var(--color-primary); transform: translate3d(0.5rem, 0, 0); } .checklist-icon { width: 28px; height: 28px; border-radius: var(--radius-full); background: #DCFCE7; color: var(--color-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .checklist-icon svg { width: 14px; height: 14px; } /* ===================================================== MULTI GUDANG TIMELINE ===================================================== */ #multi-gudang { background: var(--color-bg); } .gudang-timeline { position: relative; max-width: 600px; margin: 0 auto; } .gudang-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--color-primary), var(--color-accent)); transform: translateX(-50%); } .timeline-item { display: flex; align-items: center; gap: 2rem; margin-bottom: 2rem; position: relative; } .timeline-item:nth-child(even) { flex-direction: row-reverse; } .timeline-item-content { flex: 1; background: white; border-radius: var(--radius-xl); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-md); border: 1px solid var(--color-border-light); transition: var(--transition-bounce); } .timeline-item-content:hover { transform: translateY(-4px); box-shadow: var(--shadow-blue); } .timeline-dot { width: 48px; height: 48px; background: var(--gradient-primary); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-blue); z-index: 1; } .timeline-dot svg { width: 22px; height: 22px; color: white; } .timeline-label { font-size: 0.875rem; font-weight: var(--fw-bold); color: var(--color-text); margin-bottom: 0.25rem; } .timeline-sub { font-size: 0.8125rem; color: var(--color-text-muted); } /* ===================================================== DASHBOARD SECTION ===================================================== */ #dashboard-section { background: var(--color-bg-alt); } .dashboard-card { background: white; border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: var(--shadow-md); border: 1px solid var(--color-border-light); } .kpi-card { background: white; border-radius: var(--radius-xl); padding: 1.5rem; border: 1px solid var(--color-border-light); box-shadow: var(--shadow-sm); transition: var(--transition-bounce); } .kpi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-blue); } .kpi-value { font-size: 1.75rem; font-weight: var(--fw-extrabold); color: var(--color-text); letter-spacing: -0.02em; } .kpi-label { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 0.25rem; } .kpi-badge { font-size: 0.75rem; font-weight: var(--fw-semibold); padding: 0.2rem 0.625rem; border-radius: var(--radius-full); } .kpi-badge.up { background: #DCFCE7; color: #166534; } .kpi-badge.down { background: #FEE2E2; color: #991B1B; } /* ── CSS Bar Chart ── */ .css-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 120px; } .chart-bar-wrap { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; justify-content: flex-end; } .chart-bar { width: 100%; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--gradient-primary); transform: scaleY(0); transform-origin: bottom; transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; min-height: 4px; } .chart-bar-wrap:hover .chart-bar { filter: brightness(1.1); } .chart-bar-label { font-size: 0.625rem; color: var(--color-text-muted); margin-top: 0.375rem; text-align: center; } /* ── CSS Donut Chart ── */ .donut-chart { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient( var(--color-primary) 0% 45%, var(--color-secondary) 45% 70%, var(--color-accent) 70% 88%, var(--color-warning) 88% 100% ); position: relative; margin: 0 auto; } .donut-chart::before { content: ''; position: absolute; inset: 20px; background: white; border-radius: 50%; } .donut-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: 0.875rem; color: var(--color-text); } /* ===================================================== CARA KERJA (HOW IT WORKS) ===================================================== */ #cara-kerja { background: white; } .how-timeline { position: relative; display: flex; gap: 0; overflow: hidden; } .how-timeline::before { content: ''; position: absolute; top: 40px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); } .how-step { flex: 1; text-align: center; padding: 0 0.5rem; position: relative; } .how-step-number { width: 80px; height: 80px; border-radius: var(--radius-full); background: white; border: 3px solid var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; font-size: 1.5rem; font-weight: var(--fw-extrabold); color: var(--color-primary); position: relative; z-index: 1; transition: var(--transition-bounce); box-shadow: var(--shadow-sm); } .how-step:hover .how-step-number { background: var(--gradient-primary); color: white; border-color: transparent; transform: scale(1.1); box-shadow: var(--shadow-blue); } .how-step-icon { width: 40px; height: 40px; margin: 0 auto 1rem; color: var(--color-primary); } .how-step-title { font-size: 0.9375rem; font-weight: var(--fw-bold); color: var(--color-text); margin-bottom: 0.375rem; } .how-step-desc { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.6; } /* ===================================================== MENGAPA TIKETAKA (WHY) ===================================================== */ #mengapa { background: var(--color-bg-alt); } .why-card { background: white; border-radius: var(--radius-xl); padding: 1.75rem 1.5rem; border: 1px solid var(--color-border-light); height: 100%; transition: var(--transition-bounce); text-align: center; } .why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-blue); border-color: var(--color-primary-light); } .why-icon-wrap { width: 64px; height: 64px; border-radius: var(--radius-xl); background: var(--color-primary-light); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; transition: var(--transition-base); } .why-card:hover .why-icon-wrap { background: var(--gradient-primary); } .why-icon { width: 30px; height: 30px; color: var(--color-primary); transition: var(--transition-base); } .why-card:hover .why-icon { color: white; } .why-title { font-size: 1rem; font-weight: var(--fw-bold); margin-bottom: 0.375rem; } .why-desc { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.6; } /* ===================================================== SCREENSHOT SLIDER ===================================================== */ #screenshots-section { background: white; } .slider-container { position: relative; overflow: hidden; border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); } .slider-track { display: flex; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .slider-slide { min-width: 100%; position: relative; } .slider-slide img { width: 100%; height: 480px; object-fit: cover; display: block; } .slider-slide-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(15,23,42,0.85) 0%, transparent 100%); padding: 2.5rem 2rem 1.5rem; color: white; } .slider-slide-caption h4 { font-size: 1.125rem; font-weight: var(--fw-bold); margin-bottom: 0.25rem; } .slider-slide-caption p { font-size: 0.875rem; opacity: 0.8; } .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: rgba(255,255,255,0.95); border: none; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-lg); transition: var(--transition-bounce); z-index: 10; color: var(--color-text); } .slider-btn:hover { background: var(--color-primary); color: white; transform: translateY(-50%) scale(1.1); } .slider-btn-prev { left: 1rem; } .slider-btn-next { right: 1rem; } .slider-btn svg { width: 20px; height: 20px; } .slider-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; } .slider-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-border); border: none; cursor: pointer; transition: var(--transition-base); padding: 0; } .slider-dot.active { width: 28px; background: var(--gradient-primary); } /* ===================================================== THUMBNAIL STRIP ===================================================== */ .slider-thumbs { display: flex; gap: 0.75rem; overflow-x: auto; padding: 0.5rem 0 0.5rem; margin-top: 1rem; scrollbar-width: none; } .slider-thumbs::-webkit-scrollbar { display: none; } .slider-thumb { flex-shrink: 0; width: 80px; height: 52px; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: var(--transition-base); } .slider-thumb img { width: 100%; height: 100%; object-fit: cover; } .slider-thumb.active { border-color: var(--color-primary); } .slider-thumb:hover { border-color: var(--color-secondary); } /* ===================================================== FAQ ===================================================== */ #faq { background: var(--color-bg); } .faq-accordion .accordion-item { border: 1px solid var(--color-border-light); border-radius: var(--radius-xl) !important; margin-bottom: 1rem; overflow: hidden; box-shadow: var(--shadow-xs); transition: var(--transition-base); } .faq-accordion .accordion-item:hover { box-shadow: var(--shadow-md); } .faq-accordion .accordion-button { font-weight: var(--fw-semibold); font-size: 1rem; color: var(--color-text); background: white; padding: 1.25rem 1.5rem; border-radius: var(--radius-xl) !important; } .faq-accordion .accordion-button:not(.collapsed) { color: var(--color-primary); background: var(--color-bg-alt); box-shadow: none; } .faq-accordion .accordion-button::after { display: none; } .faq-accordion .accordion-button .acc-indicator { margin-left: auto; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-primary-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition-base); } .faq-accordion .accordion-button:not(.collapsed) .acc-indicator { background: var(--color-primary); transform: rotate(45deg); } .faq-accordion .accordion-button .acc-indicator svg { width: 14px; height: 14px; color: var(--color-primary); } .faq-accordion .accordion-button:not(.collapsed) .acc-indicator svg { color: white; } .faq-accordion .accordion-body { padding: 0 1.5rem 1.5rem; color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.75; background: var(--color-bg-alt); } .faq-accordion .accordion-collapse { border: none; } /* ===================================================== CTA SECTION ===================================================== */ #cta { background: var(--gradient-cta); background-size: 200% 200%; animation: gradientShift 8s ease infinite; position: relative; overflow: hidden; } #cta::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .cta-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: var(--fw-extrabold); color: white; line-height: 1.2; letter-spacing: -0.02em; } .cta-desc { color: rgba(255,255,255,0.85); font-size: 1.125rem; } .cta-badges { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; } .cta-badge { background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: var(--radius-full); padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: var(--fw-medium); display: flex; align-items: center; gap: 0.375rem; } .cta-badge svg { width: 14px; height: 14px; } /* ===================================================== FOOTER ===================================================== */ #footer { background: var(--color-text); color: rgba(255,255,255,0.75); } .footer-top { padding: 5rem 0 3rem; } .footer-brand { margin-bottom: 1.25rem; } .footer-desc { font-size: 0.9rem; line-height: 1.75; color: rgba(255,255,255,0.6); max-width: 280px; margin-bottom: 1.5rem; } .footer-contact-item { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: rgba(255,255,255,0.65); margin-bottom: 0.75rem; transition: var(--transition-base); } .footer-contact-item:hover { color: white; } .footer-contact-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-primary); } .footer-heading { font-size: 0.875rem; font-weight: var(--fw-bold); color: white; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.25rem; } .footer-links { list-style: none; padding: 0; } .footer-links li { margin-bottom: 0.625rem; } .footer-links a { font-size: 0.9rem; color: rgba(255,255,255,0.6); transition: transform 0.2s ease, color 0.2s ease; display: flex; align-items: center; gap: 0.375rem; will-change: transform; } .footer-links a::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 5px; border-color: transparent transparent transparent var(--color-primary); opacity: 0; transition: var(--transition-base); } .footer-links a:hover { color: white; transform: translate3d(0.375rem, 0, 0); } .footer-links a:hover::before { opacity: 1; } .footer-divider { border-color: rgba(255,255,255,0.1); margin: 0; } .footer-bottom { padding: 1.5rem 0; font-size: 0.875rem; color: rgba(255,255,255,0.45); } .footer-bottom a { color: rgba(255,255,255,0.6); } .footer-bottom a:hover { color: white; } .social-links { display: flex; gap: 0.75rem; } .social-link { width: 36px; height: 36px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); transition: var(--transition-bounce); } .social-link:hover { background: var(--color-primary); color: white; transform: translateY(-3px); } .social-link svg { width: 16px; height: 16px; } /* ===================================================== BACK TO TOP ===================================================== */ #back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; background: var(--gradient-primary); color: white; border: none; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-blue); z-index: 999; } #back-to-top:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-blue-lg); } #back-to-top svg { width: 20px; height: 20px; } /* ===================================================== GLASS CARD ===================================================== */ .glass-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); } /* ===================================================== BADGE / PILL ===================================================== */ .pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.875rem; border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: var(--fw-semibold); } .pill-primary { background: var(--color-primary-light); color: var(--color-primary-dark); } .pill-accent { background: #DCFCE7; color: #166534; } .pill-warning { background: #FEF3C7; color: #92400E; } .pill svg { width: 12px; height: 12px; } /* ===================================================== NAVBAR LOGO IMAGE ===================================================== */ .navbar-logo-img { height: 36px; width: auto; object-fit: contain; max-width: 160px; transition: opacity var(--transition-fast); } .navbar.scrolled .navbar-logo-img { filter: none; } /* ===================================================== HERO: DOMAIN BADGE & 3RD BUTTON ===================================================== */ .hero-domain-badge { margin-top: 1rem; display: flex; align-items: center; gap: 0.5rem; } .hero-domain-link { display: inline-flex; align-items: center; gap: 0.4rem; color: rgba(255,255,255,0.75); font-size: 0.875rem; font-weight: 500; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,0.4); padding-bottom: 1px; transition: color var(--transition-fast), border-color var(--transition-fast); } .hero-domain-link:hover { color: white; border-color: white; } /* WhatsApp hero button */ .btn-wa-hero { display: inline-flex; align-items: center; gap: 0.5rem; background: #25D366; color: white; font-weight: 600; border: none; border-radius: var(--radius-lg); padding: 0.65rem 1.5rem; text-decoration: none; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); box-shadow: 0 4px 15px rgba(37,211,102,0.35); } .btn-wa-hero:hover { background: #1ebe5d; color: white; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,211,102,0.5); } /* ===================================================== CONTACT SECTION ===================================================== */ .contact-info-card { background: white; border-radius: var(--radius-2xl); padding: 2rem; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); height: 100%; } .contact-form-card { background: white; border-radius: var(--radius-2xl); padding: 2.5rem; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); } .contact-company-name { font-size: 1rem; font-weight: 700; color: var(--color-text); margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .contact-detail-item { display: flex; align-items: flex-start; gap: 0.875rem; margin-bottom: 1rem; } .contact-detail-icon { width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.375rem; letter-spacing: 0.01em; } .contact-input { width: 100%; padding: 0.75rem 1rem; font-size: 0.9375rem; font-family: inherit; color: var(--color-text); background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); resize: vertical; } .contact-input:focus { border-color: var(--color-primary); background: white; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); } .contact-input.is-invalid { border-color: var(--color-danger); } .contact-input::placeholder { color: var(--color-text-light); } .invalid-feedback { display: none; font-size: 0.8125rem; color: var(--color-danger); margin-top: 0.375rem; } .contact-input.is-invalid ~ .invalid-feedback { display: block; } /* ===================================================== WHATSAPP FLOATING BUTTON ===================================================== */ #wa-float { position: fixed; bottom: 5.5rem; /* above back-to-top */ right: 1.5rem; z-index: 998; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 20px rgba(37,211,102,0.5); animation: wa-float-anim 3s ease-in-out infinite; transition: transform 0.2s ease, box-shadow 0.2s ease; } #wa-float:hover { transform: scale(1.12); box-shadow: 0 6px 28px rgba(37,211,102,0.65); } #wa-float img { width: 28px; height: 28px; position: relative; z-index: 2; } /* Pulse ring */ .wa-pulse-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(37, 211, 102, 0.6); animation: wa-pulse 2s ease-out infinite; } /* Tooltip */ .wa-tooltip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: #1a1a1a; color: white; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; padding: 0.4rem 0.875rem; border-radius: var(--radius-md); pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; transform: translateY(-50%) translateX(6px); } .wa-tooltip::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: #1a1a1a; } #wa-float:hover .wa-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); } @keyframes wa-float-anim { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes wa-pulse { 0% { transform: scale(1); opacity: 0.8; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } } /* ===================================================== FOOTER: DOMAIN LINK ===================================================== */ .footer-domain-link { display: inline-flex; align-items: center; gap: 0.375rem; color: rgba(255,255,255,0.65); font-size: 0.875rem; font-weight: 500; text-decoration: none; margin-bottom: 0.5rem; transition: color 0.2s; } .footer-domain-link:hover { color: white; }