commit 4c7542bd7f428e1ea92eeb4cfe6cafb6cc4891db Author: Admin Date: Fri May 8 16:00:57 2026 +0700 first commit diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..d8fbf95 Binary files /dev/null and b/.DS_Store differ diff --git a/assets/Banner_Ebay_Final_news-min.png b/assets/Banner_Ebay_Final_news-min.png new file mode 100644 index 0000000..73a3f1f Binary files /dev/null and b/assets/Banner_Ebay_Final_news-min.png differ diff --git a/assets/Prology_logo.png b/assets/Prology_logo.png new file mode 100644 index 0000000..79ddbed Binary files /dev/null and b/assets/Prology_logo.png differ diff --git a/assets/css/styles.css b/assets/css/styles.css new file mode 100644 index 0000000..095d2d9 --- /dev/null +++ b/assets/css/styles.css @@ -0,0 +1,3973 @@ +/* ===== MAGENTO CMS RESET ===== */ +body { background:#0B1120 !important; margin:0 !important; padding:0 !important; } +.page-wrapper, .page-main, main, .columns, .column.main, +.cms-content-important, .std { + background:transparent !important; padding:0 !important; margin:0 !important; + max-width:100% !important; width:100% !important; float:none !important; +} +header.page-header, .page-header, +.nav-sections, .nav-toggle, .breadcrumbs, .page-title-wrapper, +.message.global, .cookie-status-message, .header.links, +.minicart-wrapper, .customer-welcome, .authorization-link, +.compare.wrapper, .wishlist-link { display:none !important; } + + +/* ===== DARK SECTION TEXT OVERRIDE ===== + #who-we-serve là dark section — Magento override h4 color thành màu tối, + không readable. Force white cho tất cả text trong section này. ===== */ +#who-we-serve, +#who-we-serve * { + font-family: var(--font) !important; +} +#who-we-serve h2, +#who-we-serve h3, +#who-we-serve h4 { + color: white !important; + font-weight: 700 !important; +} +#who-we-serve .serve-item h4 { + font-size: 1.25rem !important; + color: white !important; + font-weight: 700 !important; + margin-bottom: 12px !important; + opacity: 1 !important; + visibility: visible !important; +} +#who-we-serve .serve-item p { + color: #94A3B8 !important; +} +#who-we-serve .serve-icon svg { + stroke: white !important; +} + +/* ===== MAGENTO HEADING OVERRIDE ===== + Magento injects h1-h6 font-size/weight resets globally ===== */ +.section h2, +.section-header h2, +.section h3, +.section h4 { + font-weight: 800 !important; + letter-spacing: -0.02em !important; + line-height: 1.2 !important; + margin: 0 0 16px 0 !important; + padding: 0 !important; + font-family: var(--font) !important; + color: var(--text) !important; +} + +.section-header h2 { + font-size: 3rem !important; +} + +/* Why choose section specifically */ +#quality .section-header h2 { + font-size: clamp(2rem, 4vw, 3rem) !important; + font-weight: 800 !important; +} + +/* Who we serve dark section */ +#who-we-serve h2 { + color: white !important; + font-size: clamp(2rem, 4vw, 3rem) !important; + font-weight: 800 !important; +} + +/* Services section */ +#services .section-header h2 { + font-size: clamp(2.5rem, 5vw, 3.5rem) !important; +} + +/* why-card and serve-item headings */ +.why-card h3, +.serve-item h4 { + font-size: 1.25rem !important; + font-weight: 700 !important; +} + +/* ===== MAGENTO ELEMENT RESET — ul, li, input, button text alignment ===== */ + +/* Fix ul margin injected by Magento (margin: 0 0 30px) */ +.navbar ul, +.nav-links { + margin: 0 !important; + padding: 0 !important; + list-style: none !important; +} +.nav-links li { + margin: 0 !important; + padding: 0 !important; + list-style: none !important; +} + +/* Fix button text alignment & line-height Magento injects */ +.search-tab, +.hero-search-form button, +.sell-capsule-static button, +.nav-cta button, +.btn-primary, +.btn-secondary, +.btn-success { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + line-height: 1 !important; + text-align: center !important; + vertical-align: middle !important; +} +.search-tab span, +.hero-search-form button span, +.sell-capsule-static button span, +.nav-cta button span, +.btn-primary span, +.btn-secondary span, +.btn-success span { + display: block !important; + line-height: 1 !important; + margin: 0 !important; + padding: 0 !important; +} + +/* Fix input text vertical alignment */ +.hero-search-form input, +.sell-capsule-static input { + line-height: normal !important; + vertical-align: middle !important; +} + +/* ===== MAGENTO BUTTON/INPUT OVERRIDE ===== + Magento injects global button styles that shrink our buttons. + We use high-specificity selectors to win. ===== */ +.navbar button, +.search-tab, +.hero-search-form button, +.sell-capsule-static button, +.btn-primary, +.btn-secondary, +.btn-success, +.btn-modal-primary, +.btn-shop-mini, +.nav-cta button { + box-sizing: border-box !important; + line-height: normal !important; + font-family: var(--font) !important; + letter-spacing: normal !important; + text-transform: none !important; + vertical-align: baseline !important; + -webkit-appearance: none !important; + appearance: none !important; +} + +/* Search tabs specifically */ +.search-tab { + padding: 10px 24px !important; + border-radius: 100px !important; + font-size: 0.95rem !important; + font-weight: 600 !important; + height: auto !important; + min-height: unset !important; + width: auto !important; + display: inline-block !important; +} + +.search-tab.active { + background: var(--primary) !important; + color: white !important; + border-color: var(--primary) !important; +} + +/* Hero search form & button */ +.hero-search-form { + height: 72px !important; + padding: 0 8px 0 28px !important; + border-radius: 100px !important; + display: flex !important; + align-items: center !important; +} + +.hero-search-form button { + height: 54px !important; + padding: 0 36px !important; + border-radius: 100px !important; + font-size: 1rem !important; + font-weight: 600 !important; + background: var(--primary) !important; + color: white !important; + border: none !important; + flex-shrink: 0 !important; +} + +.hero-search-form input { + height: 100% !important; + padding: 0 20px !important; + font-size: 1.05rem !important; + border: none !important; + outline: none !important; + background: transparent !important; + box-shadow: none !important; +} + +/* Sell capsule button */ +.sell-capsule-static { + height: 72px !important; + border-radius: 100px !important; + display: flex !important; + align-items: center !important; + padding: 0 8px 0 28px !important; +} + +.sell-capsule-static button { + height: 54px !important; + padding: 0 36px !important; + border-radius: 100px !important; + font-size: 1rem !important; + background: var(--primary) !important; + color: white !important; + border: 0 !important; + flex-shrink: 0 !important; +} + +.sell-capsule-static input { + height: 100% !important; + border: none !important; + outline: none !important; + background: transparent !important; + box-shadow: none !important; + padding: 0 20px !important; +} + +/* Nav CTA button */ +.nav-cta button { + padding: 12px 28px !important; + border-radius: 8px !important; + font-size: 1rem !important; + font-weight: 700 !important; + height: auto !important; + background: transparent !important; + color: #fff !important; + border: 1px solid var(--primary) !important; +} + + +/* ============ DESIGN SYSTEM (Google Workspace / Gmail Style) ============ */ +:root { + --bg: #FFFFFF; + --bg-alt: #F8F9FA; /* Google Soft Gray */ + --primary: #1A73E8; /* Google Blue */ + --primary-glow: rgba(26, 115, 232, 0.15); + + --border: #DADCE0; + + --text: #202124; + --text-dim: #70757a; /* Brightened for placeholders/muted text */ + + --font: 'Plus Jakarta Sans', sans-serif; + --container: 1200px; + + --transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1); +} + +/* ============ RESET & BASE ============ */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html:not(.no-snap) { + scroll-snap-type: y mandatory; + scroll-behavior: smooth; + overflow-y: auto; + /* Loại bỏ scroll-padding-top để section snap sát đỉnh */ +} + +html.no-snap { + scroll-behavior: smooth; + overflow-y: auto; +} + +body { + background-color: var(--bg); + color: var(--text); + font-family: var(--font); + line-height: 1.6; + -webkit-font-smoothing: antialiased; +} + +a { + text-decoration: none; + color: inherit; +} + +li { + list-style: none; +} + +/* ============ LAYOUT UTILITIES ============ */ +.section { + min-height: 100vh; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 90px 0 60px 0; /* padding-top: 90px để đẩy nội dung xuống dưới header */ + scroll-snap-align: start; + scroll-snap-stop: always; /* overridden for last section below */ + position: relative; + overflow: hidden; + box-sizing: border-box; +} + +/* Đảm bảo nội dung không bao giờ quá sát navbar */ +.section > .container { + padding-top: 20px; + padding-bottom: 20px; +} + +.container { + width: 90%; + max-width: var(--container); + margin-left: auto; + margin-right: auto; + position: relative; + z-index: 2; +} + +/* Mảng sáng mờ đằng sau (Logo color blur) trang trí section */ +.section::before { + content: ''; + position: absolute; + top: -200px; + left: -200px; + width: 800px; + height: 800px; + background: radial-gradient(circle, rgba(26, 115, 232, 0.25) 0%, rgba(26, 115, 232, 0) 70%); + z-index: 1; + pointer-events: none; + border-radius: 50%; +} + +.section::after { + content: ''; + position: absolute; + bottom: -300px; + right: -200px; + width: 1000px; + height: 1000px; + background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0) 70%); /* Màu Cam Vàng (Amber/Orange) */ + z-index: 1; + pointer-events: none; + border-radius: 50%; +} + +/* ============ NAVIGATION (light theme — match default header) ============ */ +.navbar { + position: fixed; + top: 0; + width: 100%; + height: 80px; + background: #FFFFFF; + border-bottom: 1px solid var(--border); + box-shadow: 0 2px 4px rgba(60, 64, 67, 0.06); + display: flex; + justify-content: center; + z-index: 1000; +} + +.nav-content { + width: 90%; + max-width: var(--container); + display: flex; + align-items: center; + justify-content: space-between; + gap: 32px; +} + +.nav-brand img { + height: 44px; + width: auto; + display: block; + filter: none !important; +} + +.nav-links { + display: flex; + gap: 32px; + align-items: center; +} + +.nav-links a, +.nav-links a:link, +.nav-links a:visited { + font-size: 0.95rem; + font-weight: 500; + color: #5F6368; /* Google muted grey on white */ + transition: var(--transition); + text-transform: none; + letter-spacing: 0; + text-decoration: none; + position: relative; + padding: 8px 0; +} + +.nav-links a:hover { + color: var(--text); +} + +.nav-links a.active, +.nav-links a.active:link, +.nav-links a.active:visited { + color: var(--primary); + font-weight: 600; +} + +.nav-links a.active::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 100%; + height: 2px; + background: var(--primary); + border-radius: 2px; +} + +.nav-cta { + display: flex; + align-items: center; + gap: 10px; +} + +/* ─── Hamburger Menu Button — full Magento reset ────────────── */ +.hamburger-btn { + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; + cursor: pointer; + width: 40px !important; + height: 40px !important; + padding: 0 !important; + background: transparent !important; + background-color: transparent !important; + border: none !important; + border-radius: 8px !important; + box-shadow: none !important; + outline: none !important; + -webkit-appearance: none !important; + appearance: none !important; + margin-left: 4px; + z-index: 1001; + flex-shrink: 0; + transition: background 0.18s ease !important; +} +.hamburger-btn:hover, +.hamburger-btn:focus, +.hamburger-btn:focus-visible { + background: rgba(0,0,0,0.07) !important; + border: none !important; + box-shadow: none !important; + outline: none !important; +} +.hamburger-btn:active { background: rgba(0,0,0,0.12) !important; } +.hamburger-btn .bar { + display: block; + width: 20px; + height: 2px; + background: #374151; + border-radius: 2px; + pointer-events: none; + transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.18s ease, width 0.18s ease; +} +.hamburger-btn.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } +.hamburger-btn.open .bar:nth-child(2) { opacity: 0; width: 0; } +.hamburger-btn.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } + +/* ─── Store switcher (AU / US) — light navbar ─────────────────── */ +/* :link + :visited để chặn browser bôi tím link đã thăm */ +.store-btn, +.store-btn:link, +.store-btn:visited { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 18px; + border-radius: 8px; + font-size: 0.9rem; + font-weight: 600; + text-decoration: none; + white-space: nowrap; + line-height: 1; + border: 1px solid var(--border); + background: #FFFFFF; + color: var(--text); + transition: var(--transition); +} + +.store-btn:hover { + border-color: var(--primary); + color: var(--primary); + background: rgba(26, 115, 232, 0.04); +} + +/* Active = filled blue (giống Cart trong ảnh tham chiếu) */ +.store-btn--active, +.store-btn--active:link, +.store-btn--active:visited { + background: var(--primary); + border-color: var(--primary); + color: #FFFFFF; + box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.1); +} + +.store-btn--active:hover { + background: #174ea6; + border-color: #174ea6; + color: #FFFFFF; +} + +/* Country code badge */ +.store-code { + display: inline-block; + font-weight: 700; + font-size: 0.7rem; + letter-spacing: 0.05em; + padding: 3px 7px; + border-radius: 5px; + background: rgba(255, 255, 255, 0.22); + color: inherit; +} + +/* Inactive button: badge xanh nhạt */ +.store-btn:not(.store-btn--active) .store-code { + background: var(--bg-alt); + color: var(--primary); +} + +.store-btn:hover:not(.store-btn--active) .store-code { + background: rgba(26, 115, 232, 0.12); +} + +/* ============ BASE BUTTONS ============ */ +.btn-primary { + background: #174ea6; /* Màu xanh đậm hiện đại */ + color: #ffffff; + border: 0 !important; + padding: 16px 36px; + border-radius: 50px; + font-size: 1.05rem; + font-weight: 600; + cursor: pointer; + box-shadow: 0 4px 15px rgba(26, 115, 232, 0.3); + transition: all 0.3s ease; + margin: 0; +} +.btn-primary:hover, .btn-primary:focus, .btn-primary:active { + background: #1a73e8 !important; + color: #ffffff !important; + box-shadow: 0 6px 20px rgba(26, 115, 232, 0.5) !important; + transform: translateY(-2px) !important; + border-color: transparent !important; +} + +.btn-secondary { + background: rgba(255, 255, 255, 0.05); /* Nền mờ */ + color: #ffffff; + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 16px 36px; + border-radius: 50px; + font-size: 1.05rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + backdrop-filter: blur(5px); + margin: 0; +} +.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { + background: rgba(255, 255, 255, 0.1) !important; + color: #ffffff !important; + border-color: rgba(255, 255, 255, 0.4) !important; + transform: translateY(-2px) !important; +} + +.btn-success { + background: #10B981; /* Xanh lá */ + color: #ffffff; + border: 0 !important; + padding: 16px 36px; + border-radius: 50px; + font-size: 1.05rem; + font-weight: 600; + cursor: pointer; + box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); + transition: all 0.3s ease; + margin: 0; +} +.btn-success:hover, .btn-success:focus, .btn-success:active { + background: #059669 !important; + color: #ffffff !important; + box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important; + transform: translateY(-2px) !important; + border-color: transparent !important; +} + +/* ============ HERO ============ */ +.hero { + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding-top: 90px; /* Hero is first section - needs top padding for navbar clearance */ + padding-bottom: 0; +} + +/* ============ HERO ANIMATION ============ */ +/* ============ HERO ANIMATION: SERVER FOCUS ============ */ +.hero-animation-wrapper { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 460px; + margin-bottom: 0; +} + +.switch-panel-scene { + width: 100%; height: 100%; position: relative; + display: flex; align-items: center; justify-content: center; + animation: scenePlay 4s forwards; +} + +.server-only-focus { + width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; +} + +.hero-text-overlay { + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + width: 100%; text-align: center; z-index: 60; pointer-events: none; +} + +/* --- UCS 5108 BLADE CHASSIS --- */ +.blade-chassis { + width: 700px; height: 340px; + display: flex; align-items: stretch; + opacity: 0; + animation: serverBounce 4s forwards; + position: relative; box-sizing: border-box; +} + +/* Rack Ears (tall, 6 screws) */ +.bc-ear { + width: 22px; background: linear-gradient(180deg, #64748B 0%, #4B5563 100%); + display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; + border: 1px solid #475569; flex-shrink: 0; +} +.bc-ear.left { border-radius: 4px 0 0 4px; border-right: 2px solid #334155; } +.bc-ear.right { border-radius: 0 4px 4px 0; border-left: 2px solid #334155; } +.bc-screw { + width: 10px; height: 10px; border-radius: 50%; background: #0F172A; + border: 1px solid #94A3B8; box-shadow: inset 0 1px 2px rgba(255,255,255,0.2); +} + +/* Chassis Body */ +.bc-body { + flex: 1; background: #0B1120; + border: 2px solid #475569; + display: flex; flex-direction: column; + box-shadow: inset 0 4px 12px rgba(0,0,0,0.8), 0 20px 60px rgba(0,0,0,0.9); + overflow: hidden; +} + +/* Top: Blades Section */ +.bc-blades-section { + flex: 1; display: flex; border-bottom: 2px solid #334155; +} + +/* Management Panel (left vertical strip) */ +.bc-mgmt-panel { + width: 60px; background: linear-gradient(180deg, #1E293B, #0F172A); + border-right: 2px solid #334155; + display: flex; flex-direction: column; align-items: center; + padding: 12px 4px; gap: 8px; +} +.bc-logo { + font-size: 0.55rem; font-weight: 900; color: #E2E8F0; letter-spacing: 0.15em; + writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); + margin-top: auto; +} +.bc-model { + font-size: 0.9rem; font-weight: 800; color: #94A3B8; letter-spacing: 0.1em; +} +.bc-sys-leds { + display: flex; flex-direction: column; gap: 6px; align-items: center; margin-top: auto; +} +.bc-led-btn { + width: 14px; height: 14px; border-radius: 50%; border: 1px solid #475569; + position: relative; background: #0B1120; +} +.bc-led-btn.square { border-radius: 3px; } +.bc-led { + width: 6px; height: 6px; border-radius: 50%; + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); +} +.bc-led.power { background: #10B981; box-shadow: 0 0 8px #10B981; } +.bc-led.health { background: #10B981; box-shadow: 0 0 4px #10B981; } +.bc-led.uid { background: #374151; animation: ciscoUIDFlash 4s forwards; } + +/* Blade Server Row */ +.bc-blade-row { + flex: 1; display: flex; gap: 3px; padding: 6px; align-items: stretch; +} + +/* Individual Blade */ +.bc-blade { + flex: 1; background: #1E293B; border: 1px solid #334155; border-radius: 2px; + display: flex; flex-direction: column; position: relative; + box-shadow: inset -1px 0 3px rgba(0,0,0,0.6), inset 1px 0 3px rgba(255,255,255,0.03); + transition: box-shadow 0.3s; +} + +.blade-faceplate { + flex: 1; display: flex; flex-direction: column; align-items: center; + padding: 6px 0; gap: 4px; +} + +/* The ejector handle at the top */ +.blade-handle { + width: 80%; height: 16px; + background: linear-gradient(180deg, #475569, #334155); + border-radius: 2px; border: 1px solid #64748B; + box-shadow: 0 2px 4px rgba(0,0,0,0.4); + position: relative; +} +.blade-handle::after { + content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + width: 60%; height: 2px; background: #94A3B8; border-radius: 1px; +} + +/* Vent pattern on each blade */ +.blade-vents { + flex: 1; width: 80%; + background: repeating-linear-gradient( + 0deg, + transparent 0px, transparent 3px, + #0B1120 3px, #0B1120 5px + ); + border-radius: 1px; opacity: 0.6; +} + +/* Blade slot number */ +.blade-label { + font-size: 0.6rem; color: #64748B; font-weight: 800; letter-spacing: 0.1em; +} + +/* LED strip at the bottom of each blade */ +.blade-led-strip { + display: flex; gap: 4px; justify-content: center; padding: 4px 0; + background: #0B1120; border-top: 1px solid #1E293B; +} +.c-drive-led { + width: 7px; height: 7px; border-radius: 50%; background: #1E293B; + transition: all 0.3s; +} +.c-drive-led.b { background: #0F172A; width: 5px; height: 5px; margin-top: 1px; } + +/* Blade LED animations (8 blades) */ +.d-slot-1 .c-drive-led.g { animation: dL1 4s forwards; } +.d-slot-2 .c-drive-led.g { animation: dL2 4s forwards; } +.d-slot-3 .c-drive-led.g { animation: dL3 4s forwards; } +.d-slot-4 .c-drive-led.g { animation: dL4 4s forwards; } +.d-slot-5 .c-drive-led.g { animation: dL5 4s forwards; } +.d-slot-6 .c-drive-led.g { animation: dL6 4s forwards; } +.d-slot-7 .c-drive-led.g { animation: dL7 4s forwards; } +.d-slot-8 .c-drive-led.g { animation: dL8 4s forwards; } + +/* Bottom: Power Supply Bays */ +.bc-psu-section { + height: 56px; display: flex; gap: 3px; padding: 4px 6px; + background: linear-gradient(180deg, #0F172A, #0B1120); +} +.bc-psu { + flex: 1; background: #1E293B; border: 1px solid #334155; border-radius: 2px; + display: flex; align-items: center; justify-content: center; gap: 8px; + position: relative; + box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4); +} +.psu-handle { + width: 20px; height: 28px; + background: linear-gradient(180deg, #475569, #334155); + border: 1px solid #64748B; border-radius: 2px; +} +.psu-label { + font-size: 0.55rem; color: #64748B; font-weight: 700; letter-spacing: 0.05em; +} +.psu-led { + width: 6px; height: 6px; border-radius: 50%; + background: #10B981; box-shadow: 0 0 6px #10B981; +} + +/* --- ANIMATIONS --- */ +@keyframes scenePlay { + 0%, 75% { transform: scale(1.1); filter: blur(0); opacity: 1; } + 85%, 100% { transform: scale(2) translateY(-80px); filter: blur(20px); opacity: 0; visibility: hidden; } +} + +@keyframes serverBounce { + 0% { opacity: 0; transform: translateY(40px) scale(0.92); } + 15%, 75% { opacity: 1; transform: translateY(0) scale(1); } + 85%, 100% { opacity: 0; transform: translateY(-30px) scale(1.05); } +} + +@keyframes textPopSlow { + 0%, 60% { opacity: 0; transform: scale(0.9) translateY(40px); filter: blur(15px); } + 78%, 100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } +} + +/* 8 blade LED scan animations (with blinking blink between 1s-4s) */ +@keyframes dL1 { 0%, 10% { background: #1E293B; } 12%, 40% { background: #00f2ff; box-shadow: 0 0 12px #00f2ff; } 45%, 55%, 65%, 75% { background: #10B981; box-shadow: 0 0 12px #10B981; } 50%, 60%, 70%, 80% { background: #1E293B; box-shadow: none; } 85%, 100% { background: #10B981; box-shadow: 0 0 8px #10B981; } } +@keyframes dL2 { 0%, 12% { background: #1E293B; } 14%, 40% { background: #00f2ff; box-shadow: 0 0 12px #00f2ff; } 45%, 55%, 65%, 75% { background: #10B981; box-shadow: 0 0 12px #10B981; } 50%, 60%, 70%, 80% { background: #1E293B; box-shadow: none; } 85%, 100% { background: #10B981; box-shadow: 0 0 8px #10B981; } } +@keyframes dL3 { 0%, 14% { background: #1E293B; } 16%, 40% { background: #00f2ff; box-shadow: 0 0 12px #00f2ff; } 45%, 55%, 65%, 75% { background: #10B981; box-shadow: 0 0 12px #10B981; } 50%, 60%, 70%, 80% { background: #1E293B; box-shadow: none; } 85%, 100% { background: #10B981; box-shadow: 0 0 8px #10B981; } } +@keyframes dL4 { 0%, 16% { background: #1E293B; } 18%, 40% { background: #00f2ff; box-shadow: 0 0 12px #00f2ff; } 45%, 55%, 65%, 75% { background: #10B981; box-shadow: 0 0 12px #10B981; } 50%, 60%, 70%, 80% { background: #1E293B; box-shadow: none; } 85%, 100% { background: #10B981; box-shadow: 0 0 8px #10B981; } } +@keyframes dL5 { 0%, 18% { background: #1E293B; } 20%, 40% { background: #00f2ff; box-shadow: 0 0 12px #00f2ff; } 45%, 55%, 65%, 75% { background: #10B981; box-shadow: 0 0 12px #10B981; } 50%, 60%, 70%, 80% { background: #1E293B; box-shadow: none; } 85%, 100% { background: #10B981; box-shadow: 0 0 8px #10B981; } } +@keyframes dL6 { 0%, 20% { background: #1E293B; } 22%, 40% { background: #00f2ff; box-shadow: 0 0 12px #00f2ff; } 45%, 55%, 65%, 75% { background: #10B981; box-shadow: 0 0 12px #10B981; } 50%, 60%, 70%, 80% { background: #1E293B; box-shadow: none; } 85%, 100% { background: #10B981; box-shadow: 0 0 8px #10B981; } } +@keyframes dL7 { 0%, 22% { background: #1E293B; } 24%, 40% { background: #00f2ff; box-shadow: 0 0 12px #00f2ff; } 45%, 55%, 65%, 75% { background: #10B981; box-shadow: 0 0 12px #10B981; } 50%, 60%, 70%, 80% { background: #1E293B; box-shadow: none; } 85%, 100% { background: #10B981; box-shadow: 0 0 8px #10B981; } } +@keyframes dL8 { 0%, 24% { background: #1E293B; } 26%, 40% { background: #00f2ff; box-shadow: 0 0 12px #00f2ff; } 45%, 55%, 65%, 75% { background: #10B981; box-shadow: 0 0 12px #10B981; } 50%, 60%, 70%, 80% { background: #1E293B; box-shadow: none; } 85%, 100% { background: #10B981; box-shadow: 0 0 8px #10B981; } } + +@keyframes ciscoUIDFlash { + 0%, 15% { background: #374151; box-shadow: none; } + 20%, 75% { background: #60A5FA; box-shadow: 0 0 15px #60A5FA; } + 80%, 100% { background: #374151; box-shadow: none; } +} + +.hero-text-animated { + font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.2; color: var(--text); + margin: 0 auto; width: fit-content; max-width: 90%; + min-height: 220px; /* Space for Brand Logo + Tagline box */ + display: flex; flex-direction: column; align-items: center; justify-content: center; + transition: opacity 0.5s ease-out; + text-align: center; + gap: 15px; +} + +/* Localized cursor on the active span */ +.typing-cursor { + display: inline-block; + border-right: 2px solid var(--primary); + animation: cursorBlink 0.8s step-end infinite alternate; + padding-right: 4px; + margin-right: -6px; /* Offset the cursor space */ + vertical-align: middle; +} + +/* Class for JS to handle cross-fades between strings */ +.hero-text-animated.fade-ready { opacity: 0; } + +@keyframes cursorBlink { + 0%, 100% { border-right-color: var(--primary); } + 50% { border-right-color: transparent; } +} + +@keyframes fadeIn { + to { opacity: 1; } +} + +.hero-text-overlay { + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + width: 100%; text-align: center; z-index: 60; pointer-events: none; +} + +.reveal { + opacity: 0; + animation: fadeIn 1.2s forwards; +} + +.hero p.reveal { animation-delay: 18.2s; } +.hero-search-container.reveal { animation-delay: 19.0s; } +.dash-grid.reveal { animation-delay: 20.0s; } + +/* revealUp removed as requested for a cleaner static fade-in */ + +.hero p { + font-size: 1.25rem; + color: var(--text-dim); + max-width: 650px; + margin: 0 auto 24px auto; +} + +/* ============ HERO SEARCH ============ */ +.hero-search-container { + width: 100%; + max-width: 720px; + margin: 0 auto 40px auto; + position: relative; + z-index: 70; +} + +.hero-search-container.reveal { + animation: fadeIn 1s forwards 19s, searchPulse 3s ease-in-out infinite 20s; +} +/* Multi-color gradient glow behind the search box */ +.hero-search-container::before { + content: ''; + position: absolute; + top: 50%; left: 50%; + transform: translate(-50%, -50%); + width: 130%; height: 180%; + background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.3) 0%, rgba(16, 185, 129, 0.2) 40%, rgba(245, 158, 11, 0.1) 70%, transparent 100%); + filter: blur(60px); + opacity: 0.5; + z-index: -1; + border-radius: 50%; + animation: glowShift 10s ease-in-out infinite alternate; +} + +@keyframes glowShift { + 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; } + 50% { transform: translate(-45%, -55%) scale(1.1); opacity: 0.6; } + 100% { transform: translate(-55%, -45%) scale(1); opacity: 0.4; } +} + +@keyframes searchPulse { + 0%, 100% { transform: scale(1); filter: brightness(1); } + 50% { transform: scale(1.025); filter: brightness(1.15); } +} + +.hero-search-form { + display: flex; + align-items: center; + background: #FFFFFF; + border: 1px solid transparent; + border-radius: 100px; + padding: 0 8px 0 28px; /* Fixed vertical padding to 0, use height instead */ + height: 72px; /* Fixed Height */ + transition: var(--transition); + box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15); /* Google shadow */ + position: relative; + overflow: hidden; +} + +.hero-search-form:focus-within { + border-color: transparent; + background: #FFFFFF; + box-shadow: 0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15); + transform: translateY(-1px); +} + +.search-icon { + color: var(--text-dim); /* standard dim search icon */ + display: flex; + align-items: center; + justify-content: center; +} + +.hero-search-form input { + flex: 1; + background: transparent; + border: none; + color: var(--text); + font-size: 1.05rem; + font-family: var(--font); + padding: 16px 20px; + outline: none; +} + +.hero-search-form input::placeholder { + color: var(--text-dim); +} + +.hero-search-form button { + background: var(--primary); /* Plain Google Blue */ + color: white; + border: none; + padding: 16px 36px; + border-radius: 100px; + font-weight: 500; + font-size: 1rem; + cursor: pointer; + transition: var(--transition); + box-shadow: none; +} + +.hero-search-form button:hover, .hero-search-form button:focus { + background: #174ea6 !important; + color: white !important; + box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15) !important; +} + +/* ============ DASHBOARD STRIP ============ */ +.dash-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1px; + background: var(--border); + border: 1px solid var(--border); + border-radius: 16px; + overflow: hidden; + margin-top: 40px; +} + +.dash-item { + background: var(--bg-alt); + padding: 40px 20px; + text-align: center; +} + +.dash-item .val { + font-size: 2.8rem; + font-weight: 800; + color: var(--primary); + display: block; + letter-spacing: -0.02em; +} + +.dash-item .lab { + font-size: 13px; + font-weight: 700; + color: var(--text); /* Brighter than text-dim */ + text-transform: uppercase; + letter-spacing: 0.15em; + margin-top: 8px; + opacity: 0.8; +} + + + +/* ============ SECTION: QUALITY EXCELLENCE ============ */ +.quality-box { + background: var(--bg-alt); + border: 1px solid var(--border); + border-radius: 24px; + padding: 60px; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; + min-height: 420px; +} + +.quality-slider { + position: relative; + width: 100%; +} + +.q-slide { + display: none; + animation: slideFadeIn 0.6s ease-out forwards; +} + +.q-slide.active { + display: flex; + gap: 40px; + align-items: center; +} + +.q-icon { + font-size: 5rem; + flex-shrink: 0; + opacity: 0.9; +} + +.q-text h3 { + font-size: 2rem; + margin-bottom: 16px; + color: var(--text); +} + +.q-text p { + font-size: 1.15rem; + color: var(--text-dim); + line-height: 1.6; +} + +.q-dots { + display: flex; + gap: 12px; + margin-top: 40px; +} + +.dot { + width: 12px; + height: 12px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.1); + cursor: pointer; + transition: var(--transition); +} + +.dot.active { + background: var(--primary); + width: 32px; + border-radius: 6px; +} + +@keyframes slideFadeIn { + from { opacity: 0; transform: translateX(20px); } + to { opacity: 1; transform: translateX(0); } +} + +@media (max-width: 768px) { + .side-nav { display: none; } + .q-slide.active { flex-direction: column; text-align: center; } + .quality-box { padding: 40px 24px; } +} + +.hubs-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; +} + +@media (max-width: 1024px) { + .hubs-grid { + grid-template-columns: 1fr; + } +} +.search-tabs { + display: flex; + gap: 12px; + justify-content: center; + margin-bottom: 24px; +} + +.search-tab { + background: var(--bg-alt); + border: 1px solid var(--border); + color: var(--text-dim); + padding: 10px 24px; + border-radius: 100px; + font-size: 0.95rem; + font-weight: 600; + cursor: pointer; + transition: var(--transition); +} + +.search-tab:hover { + background: #e8eaed; + color: var(--text); +} + +.search-tab.active { + background: var(--primary); + color: white; + border-color: var(--primary); +} + +/* ============ STATIC SELL WORKFLOW ============ */ +.sell-capsule-static { + display: flex; + align-items: center; + background: #FFFFFF; /* Brighter background */ + border: 1px solid transparent; + border-radius: 100px; + padding: 0 8px 0 28px; /* Đồng bộ tuyệt đối */ + box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15); + height: 72px; /* Fixed Height */ + width: 100%; + max-width: 720px; + margin: 0 auto; + transition: none; +} + +.sell-capsule-static input { + flex: 1; + background: transparent; + border: none; + color: var(--text); + font-size: 1.05rem; /* Đồng bộ font-size 1.05rem */ + font-family: var(--font); + padding: 16px 20px; + outline: none; +} + +.input-with-icon { + display: flex; + align-items: center; +} + +/* Make textarea behave like a clean list input */ +.sell-capsule-static textarea { + padding-top: 28px; + resize: none; + white-space: nowrap; + overflow-x: auto; +} + +.sell-capsule-static button { + background: var(--primary); + color: white; + border: none; + padding: 16px 36px; /* Đồng bộ với nút Search */ + border-radius: 100px; + font-weight: 500; + font-size: 1rem; + cursor: pointer; + box-shadow: none; + transition: var(--transition); +} + +/* ============ SELL MODAL WINDOW ============ */ +.modal-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(12px); + z-index: 1000; + display: flex; + align-items: flex-start; + justify-content: center; + padding: 20px; + overflow-y: auto; + transition: opacity 0.4s ease; +} + +.modal-window { + background: #0B1120; + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 32px; + width: 100%; + max-width: 600px; + max-height: calc(100vh - 40px); + overflow-y: auto; + padding: 40px; + box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8); + position: relative; + margin: auto; + transform: scale(0.95); + transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.modal-overlay[style*="opacity: 1"] .modal-window { + transform: scale(1); +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 30px; +} + +.modal-header h3 { + font-size: 1.75rem; + color: white; +} + +.modal-title-group { + display: flex; + flex-direction: column; + gap: 4px; +} + +.modal-badge { + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--primary); + background: var(--primary-glow); + padding: 4px 12px; + border-radius: 4px; + width: fit-content; +} + +.modal-intro { + color: #94A3B8; + margin-bottom: 30px; + font-size: 1rem; + line-height: 1.5; +} + +.modal-form-grid { + display: grid; + grid-template-columns: 1fr; + gap: 20px; + margin-bottom: 30px; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 8px; +} + +.form-group label { + font-size: 0.85rem; + font-weight: 600; + color: #E2E8F0; +} + +.form-group input, +.form-group textarea, +.form-group select { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 12px 16px; + color: white; + font-family: var(--font); + font-size: 0.95rem; + outline: none; + transition: var(--transition); +} + +.form-group input:focus, +.form-group textarea:focus, +.form-group select:focus { + border-color: var(--primary); + background: rgba(255, 255, 255, 0.08); +} + +.form-group textarea { + min-height: 120px; + resize: vertical; +} + +.btn-modal-primary { + width: 100%; + background: var(--primary); + color: white; + border: none; + padding: 16px; + border-radius: 14px; + font-weight: 700; + font-size: 1rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + transition: var(--transition); +} + +.btn-modal-primary:hover { + background: #174ea6; + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.close-btn { + background: none; + border: none; + color: #94A3B8; + font-size: 1.5rem; + cursor: pointer; + transition: var(--transition); +} + +.close-btn:hover { + color: white; + transform: rotate(90deg); +} + +.email-summary { + background: rgba(26, 115, 232, 0.1); + padding: 12px 16px; + border-radius: 12px; + margin-bottom: 20px; + display: flex; + gap: 10px; +} + +.email-summary .label { font-weight: 700; color: var(--primary); } + font-size: 1.8rem; + color: var(--text); +} + +.close-btn { + background: rgba(255, 255, 255, 0.05); + border: none; + color: var(--text-dim); + width: 40px; + height: 40px; + border-radius: 50%; + cursor: pointer; + font-size: 1.2rem; + display: flex; + align-items: center; + justify-content: center; + transition: var(--transition); +} + +.close-btn:hover { + background: rgba(239, 68, 68, 0.2); + color: #EF4444; +} + +.modal-body p { + color: var(--text-dim); + margin-bottom: 24px; + line-height: 1.6; +} + +.email-summary { + background: rgba(255, 255, 255, 0.03); + padding: 12px 20px; + border-radius: 12px; + margin-bottom: 24px; + font-size: 0.95rem; +} + +.email-summary .label { + color: var(--text-dim); + margin-right: 10px; +} + +.modal-body textarea { + width: 100%; + min-height: 180px; + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + color: var(--text); + padding: 20px; + font-size: 1.1rem; + font-family: var(--font); + outline: none; + resize: none; + margin-bottom: 30px; + transition: border-color 0.3s; +} + +.modal-body textarea:focus { + border-color: #10B981; +} + +.btn-send-valuation { + width: 100%; + height: 64px; + background: linear-gradient(135deg, #10B981, #059669); + color: white; + border: none; + border-radius: 100px; + font-size: 1.15rem; + font-weight: 500; + cursor: pointer; + box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4); + transition: var(--transition); +} + +.btn-send-valuation:hover { + transform: translateY(-2px); + box-shadow: 0 15px 40px rgba(16, 185, 129, 0.5); +} + +/* ============ SERVICES ============ */ +.hero-animation-sequence { + position: relative; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.section-header { + text-align: center; + margin-bottom: 80px; +} + +.section-header h2 { + font-size: 3rem; + font-weight: 800; + margin-bottom: 16px; + letter-spacing: -0.02em; +} + +.section-header p { + color: var(--text-dim); + font-size: 1.2rem; +} + +.services-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 32px; +} + +.service-card { + background: var(--bg-alt); + border: 1px solid var(--border); + padding: 48px; + border-radius: 20px; + transition: var(--transition); +} + +.service-card:hover { + transform: translateY(-4px); + border-color: rgba(255, 255, 255, 0.15); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); +} + +.service-card .icon { + font-size: 3rem; + margin-bottom: 24px; + display: block; + opacity: 0.9; +} + +.service-card h3 { + font-size: 1.6rem; + margin-bottom: 16px; + color: var(--text); +} + +.service-card p { + color: var(--text-dim); + font-size: 1.05rem; +} + +/* ============ CATEGORY GRID ============ */ +.category-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 30px; +} + +.category-card { + background: var(--bg-alt); + border: 1px solid var(--border); + border-radius: 20px; + overflow: hidden; + transition: var(--transition); + text-align: center; + padding-bottom: 32px; +} + +.category-card:hover { + border-color: rgba(255, 255, 255, 0.15); + transform: translateY(-6px); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); +} + +.cat-img { + height: 180px; + background: rgba(255, 255, 255, 0.02); + display: flex; + align-items: center; + justify-content: center; + font-size: 4rem; + margin-bottom: 24px; + opacity: 0.85; +} + +.category-card h3 { + font-size: 1.4rem; + margin-bottom: 12px; +} + +.category-card p { + color: var(--text-dim); + font-size: 1rem; + padding: 0 24px; +} + +/* ============ CALL TO ACTION (DUAL) ============ */ +.cta-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 32px; + width: 100%; +} + +.cta-box { + background: linear-gradient(135deg, var(--bg-alt), #0F172A); + padding: 80px 40px; + border-radius: 24px; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1px solid var(--border); +} + +.cta-box.sell { + background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), #0F172A); + border-color: rgba(16, 185, 129, 0.15); +} + +.cta-box h2 { + font-size: 2.5rem; + margin-bottom: 20px; + font-weight: 800; +} + +.cta-box .btn-big { + background: var(--primary); + color: white; + padding: 16px 40px; + border-radius: 12px; + font-weight: 700; + font-size: 1.1rem; + border: none; + cursor: pointer; + margin-top: 30px; + transition: var(--transition); +} + +.cta-box.sell .btn-big { + background: #10B981; + /* Approachable Green */ + color: #FFF; +} + +.cta-box .btn-big:hover { + transform: translateY(-2px); + filter: brightness(1.2); +} + +/* Animation Classes */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1); +} + +.visible .reveal { + opacity: 1; + transform: translateY(0); +} + + +/* ============ SCROLL INDICATOR ============ */ +.scroll-indicator { + position: fixed; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + text-align: center; + z-index: 1000; + pointer-events: none; + transition: opacity 0.4s ease; +} + +.mouse { + width: 24px; + height: 38px; + border: 2px solid var(--text-dim); + border-radius: 12px; + margin: 0 auto 8px auto; + position: relative; + animation: fadeAndBounce 2s infinite ease-in-out; +} + +.mouse::before { + content: ''; + position: absolute; + top: 6px; + left: 50%; + transform: translateX(-50%); + width: 4px; + height: 8px; + background: var(--primary); + border-radius: 2px; + animation: scrollWheel 2s infinite; +} + +.scroll-indicator p { + font-size: 0.75rem; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 0.1em; + font-weight: 600; +} + +/* Light version for dark sections */ +.scroll-indicator.light .mouse { + border-color: rgba(255, 255, 255, 0.5); +} + +.scroll-indicator.light p { + color: #FFFFFF; +} + +@keyframes scrollWheel { + 0% { + top: 6px; + opacity: 1; + } + + 50% { + top: 16px; + opacity: 0; + } + + 100% { + top: 6px; + opacity: 0; + } +} + +@keyframes fadeAndBounce { + + 0%, + 100% { + transform: translateY(0); + } + + 50% { + transform: translateY(8px); + } +} + +/* ============ LOGISTICS & GLOBAL REACH ============ */ +.logistics-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + margin-bottom: 60px; + margin-top: 40px; +} + +.logistics-card { + background: rgba(255, 255, 255, 0.03); + border: 1px solid var(--border); + border-radius: 24px; + padding: 50px; + transition: var(--transition); + position: relative; + overflow: hidden; +} + +.logistics-card:hover { + border-color: var(--primary); + transform: translateY(-5px); + background: rgba(255, 255, 255, 0.05); +} + +.logistics-card h3 { + font-size: 1.8rem; + margin-bottom: 20px; + color: var(--text); +} + +.logistics-card p { + color: var(--text-dim); + line-height: 1.6; +} + +.trust-strip { + display: flex; + justify-content: space-around; + background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.05), transparent); + padding: 60px 40px; + border-radius: 24px; + gap: 40px; + margin-top: 40px; +} + +.trust-item { + text-align: center; + max-width: 350px; +} + +.trust-item h4 { + font-size: 1.3rem; + color: var(--primary); + margin-bottom: 12px; +} + +.trust-item p { + font-size: 1rem; + color: var(--text-dim); + line-height: 1.5; +} + +/* ============ PO BANNER ============ */ +.po-banner { + background: var(--bg-alt); /* Soft gray background */ + border: 1px solid var(--border); + border-radius: 28px; + padding: 80px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 60px; + position: relative; + overflow: hidden; + box-shadow: none; + margin-top: 40px; +} + +.po-banner::after { + display: none; +} + +.po-content { + flex: 2; + position: relative; + z-index: 1; +} + +.po-content h2 { + font-size: 2.8rem; + margin-bottom: 24px; + color: var(--text); + font-weight: 500; +} + +.po-content p { + font-size: 1.2rem; + line-height: 1.6; + color: var(--text-dim); +} + +.po-badges { + flex: 1; + display: flex; + flex-direction: column; + gap: 20px; + position: relative; + z-index: 1; +} + +.badge-item { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + padding: 16px 24px; + border-radius: 12px; + font-weight: 700; + font-size: 1rem; + color: var(--text); + display: flex; + align-items: center; + gap: 12px; +} + +/* ============ GLOBAL BACKGROUND & THEME ============ */ +body { + background-color: #020617; + background-image: + linear-gradient(rgba(15, 23, 42, 0.4) 1px, transparent 1px), + linear-gradient(90deg, rgba(15, 23, 42, 0.4) 1px, transparent 1px); + background-size: 80px 80px; + position: relative; +} + +body::before { + content: ''; + position: fixed; + top: -20%; left: -10%; + width: 140%; height: 140%; + background: radial-gradient(circle at 20% 30%, rgba(30, 41, 59, 0.2) 0%, transparent 40%), + radial-gradient(circle at 80% 70%, rgba(15, 23, 42, 0.2) 0%, transparent 40%); + z-index: -1; + pointer-events: none; +} + +/* ============ SPLIT CONTENT LAYOUT ============ */ +.split-content { + display: flex; + align-items: center; + gap: 80px; + min-height: 500px; + padding: 60px 0; +} + +.split-content.rev { + flex-direction: row-reverse; +} + +.text-side { + flex: 1.2; +} + +.image-side { + flex: 1; + position: relative; +} + +.img-frame { + position: relative; + border-radius: 24px; + overflow: hidden; + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); + transform: perspective(1000px) rotateY(-8deg); + transition: var(--transition); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.split-content.rev .img-frame { + transform: perspective(1000px) rotateY(8deg); +} + +.img-frame:hover { + transform: perspective(1000px) rotateY(0deg) scale(1.02); +} + +.img-frame img { + width: 100%; + display: block; + aspect-ratio: 16/10; + object-fit: cover; +} + +.img-overlay { + position: absolute; + inset: 0; + background: linear-gradient(to right, rgba(2, 6, 23, 0.3), transparent); + pointer-events: none; +} + +/* ============ MINI GRIDS & STACKS ============ */ +.services-mini-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); /* 4 columns for full-width layout */ + gap: 24px; + width: 100%; +} + +.mini-card { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + padding: 32px 24px; + border-radius: 20px; + transition: var(--transition); + display: flex; + flex-direction: column; +} + +.mini-card:hover { + background: rgba(255, 255, 255, 0.06); + border-color: var(--primary); + transform: translateY(-8px); +} + +.cta-card { + background: linear-gradient(135deg, var(--primary), #0D47A1); + border: none; + color: white; +} + +.cta-card h4, .cta-card p { + color: white !important; +} + +.btn-shop-mini { + margin-top: auto; + background: white; + color: var(--primary); + padding: 10px 20px; + border-radius: 8px; + font-weight: 700; + font-size: 0.9rem; + text-align: center; + transition: var(--transition); +} + +.btn-shop-mini:hover { + background: var(--bg); + transform: scale(1.05); +} + +@media (max-width: 1200px) { + .services-mini-grid { grid-template-columns: repeat(3, 1fr); } +} + +@media (max-width: 768px) { + .services-mini-grid { grid-template-columns: repeat(2, 1fr); } +} + +@media (max-width: 480px) { + .services-mini-grid { grid-template-columns: 1fr; } +} + +.mini-card h4 { + margin: 16px 0 8px; + font-size: 1.15rem; + color: var(--text); +} + +.mini-card p { + font-size: 0.85rem; + color: var(--text-dim) !important; + line-height: 1.6; +} + +.logistics-stack { + display: flex; + flex-direction: column; + gap: 30px; +} + +.hub-item { + padding-left: 20px; + border-left: 2px solid rgba(255, 255, 255, 0.1); +} + +.hub-item h3 { + font-size: 1.3rem; + margin-bottom: 8px; + color: var(--text); +} + +.trust-highlight { + background: rgba(59, 130, 246, 0.05); + border: 1px dashed rgba(59, 130, 246, 0.2); + padding: 24px; + border-radius: 12px; +} + +.trust-highlight h4 { + color: var(--primary); + margin-bottom: 8px; +} + +.po-visual { + flex: 1; + max-width: 500px; +} + +/* ============ GLOBAL ATMOSPHERIC BACKGROUND ============ */ +body { + background: var(--bg) !important; +} + +body::before { + display: none !important; +} + +/* ============ DARK & ATMOSPHERIC SECTIONS ============ */ +#services, #who-we-serve, #contact { + background: #0B1120 !important; /* Deep Dark */ + color: #FFFFFF !important; + position: relative; + overflow: hidden; +} + +/* Ambient "Neon" Glow Lights for Dark Sections */ +#services::before, #who-we-serve::before, #contact::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: + radial-gradient(circle at 15% 25%, rgba(66, 133, 244, 0.25) 0%, transparent 45%), + radial-gradient(circle at 85% 75%, rgba(16, 185, 129, 0.15) 0%, transparent 40%); + pointer-events: none; + z-index: 1; +} + +#services .section-header h2, +#services .section-header p { + color: white !important; +} + +#services .l-badge { + color: var(--primary); + background: rgba(26, 115, 232, 0.15); +} + +/* ============ ALTERNATING SECTIONS ============ */ +.hero, #quality, #institutional, #about-summary { + background: #FFFFFF !important; + color: var(--text); + position: relative; +} + +/* ============ WHY CHOOSE US ============ */ +.why-choose-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); /* 2 columns to fit in visible area */ + gap: 24px; + margin-top: 30px; +} + +/* Standardized vertical rhythm across all sections */ +.section { + /* Đã dùng padding để căn chỉnh, không cần scroll-margin-top */ +} + + + +#quality .section-header h2 { + color: #1a1a1b !important; /* Deepest blue/black */ + font-weight: 800; +} + +#quality .section-header p { + color: var(--text-dim) !important; +} + +.why-card { + background: #FFFFFF; + border: 1px solid var(--border); + padding: 40px 32px; /* Denser padding for 3-column layout */ + border-radius: 24px; + transition: var(--transition); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + + +.why-card:hover { + box-shadow: 0 30px 60px rgba(59, 130, 246, 0.1); + border-color: var(--primary); + transform: translateY(-8px); +} + +.why-card h3 { + font-size: 1.4rem; /* Scaled down for 3 columns */ + color: #1a1a1b; + margin-bottom: 16px; + letter-spacing: -0.02em; + font-weight: 700; +} + + +.why-card p { + font-size: 1rem; + color: #4A5568 !important; + line-height: 1.6; + margin-bottom: 0; +} + + +.q-icon-large { + font-size: 2.5rem; + margin-bottom: 20px; + display: block; +} + + +.why-list { + list-style: none; + display: flex; + flex-direction: column; + gap: 14px; + margin-top: 24px; +} + +.why-list li { + font-size: 1rem; + color: #2D3748; + font-weight: 600; + display: flex; + align-items: center; + gap: 12px; +} + +.why-list li::before { + content: '→'; + color: var(--primary); + font-weight: 800; +} + +/* ============ WHO WE SERVE ============ */ +.serve-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 32px; +} + +.serve-item { + text-align: center; + padding: 20px; + transition: var(--transition); +} + +.serve-icon { + font-size: 3rem; + margin-bottom: 24px; + opacity: 0.9; + color: white !important; +} +.serve-icon svg { + stroke: white !important; + color: white !important; +} + +.serve-item h4 { + font-size: 1.25rem !important; + font-weight: 700 !important; + margin-bottom: 12px !important; + color: white !important; + font-family: var(--font) !important; +} + +.serve-item p { + font-size: 0.95rem; + color: #94A3B8 !important; + line-height: 1.5; +} + +@media (max-width: 1024px) { + .why-choose-grid { grid-template-columns: 1fr; } + .serve-grid { grid-template-columns: 1fr 1fr; } +} + +@media (max-width: 640px) { + .serve-grid { grid-template-columns: 1fr; } +} + left: 0; + background: + radial-gradient(circle at 15% 25%, rgba(66, 133, 244, 0.35) 0%, transparent 45%), /* Stronger Blue */ + radial-gradient(circle at 85% 75%, rgba(52, 168, 83, 0.35) 0%, transparent 45%), /* Stronger Green */ + radial-gradient(circle at 50% 40%, rgba(251, 188, 5, 0.15) 0%, transparent 70%); /* Stronger Yellow core */ + filter: blur(60px); /* Slightly less blur to keep it more "visible" */ + z-index: 0; + animation: ambientPulse 8s ease-in-out infinite alternate; +} + +@keyframes ambientPulse { + 0% { opacity: 0.7; transform: scale(1) translate(0, 0); } + 100% { opacity: 1; transform: scale(1.15) translate(20px, 10px); } +} + +/* Ensure content stays above the ambient glow */ +#services .container, #quality .container, #contact .container { + position: relative; + z-index: 10; +} + +/* Base styles for light section cards */ +.mini-card, .trust-highlight, .hub-item { + background: #FFFFFF; + border: 1px solid var(--border); + backdrop-filter: none; + border-radius: 12px; +} + +/* Dark section headings & text */ +#services h2, #quality h2, #contact h2 { + color: #FFFFFF !important; +} +#services p, #quality p, #contact p { + color: #9AA0A6 !important; +} +#quality .q-text h3 { color: #FFFFFF !important; } +#quality .q-text p { color: #9AA0A6 !important; } + +/* Dark section cards adapt to dark background */ +#services .mini-card, #quality .quality-box, #contact .cta-box { + background: #303134 !important; + border: 1px solid #5F6368 !important; + border-radius: 12px; +} +#quality .quality-box { border-radius: 24px; } +#contact .cta-box { border-radius: 20px; } + +#services .mini-card h4, #quality .quality-box h3, #contact .cta-box h2 { + color: #FFFFFF !important; +} +#services .mini-card p, #quality .quality-box p, #contact .cta-box p { + color: #9AA0A6 !important; +} + +.img-frame { + box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15); + border: 1px solid var(--border); +} + +/* Contact Footer specifically */ +#contact .footer-col h4 { + color: #FFFFFF !important; +} +#contact .footer-col p { + color: #9AA0A6 !important; +} +#contact .footer-col a { + color: #9AA0A6 !important; +} +#contact .footer-col a:hover { + color: #FFFFFF !important; +} +#contact .footer-col img { + filter: none !important; +} + +.services-action { + margin-top: 45px; + padding-top: 40px; + border-top: 1px solid var(--border); +} + +.btn-shop { + display: inline-flex; + align-items: center; + gap: 12px; + background: var(--primary); + color: #fff; + padding: 16px 36px; + border-radius: 100px; + font-weight: 500; + text-decoration: none; + font-size: 1rem; + box-shadow: none; + transition: all 0.2s; +} + +.btn-shop:hover { + background: #174ea6; + box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15); + transform: none; + color: #fff; +} + +.btn-shop svg { + transition: transform 0.4s ease; +} + +.btn-shop:hover svg { + transform: translateX(5px); +} + +.cta-note { + display: block; + margin-top: 18px; + color: var(--text-dim); + font-size: 0.85rem; + font-weight: 500; + opacity: 0.8; +} + +.po-banner { + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(30px); + border: 1px solid rgba(255, 255, 255, 0.1); + padding: 60px; + border-radius: 40px; +} + +.flag-icon { + display: inline-flex; + align-items: center; + margin-right: 12px; + vertical-align: middle; +} + +.flag-icon svg { + border-radius: 2px; + box-shadow: 0 2px 4px rgba(0,0,0,0.3); +} + +/* ============ CENTRAL INSTITUTIONAL LAYOUT ============ */ +.official-seal-large { + width: 260px; /* To hơn một chút theo yêu cầu */ + height: auto; + display: block; + margin: 0 auto 30px auto; + filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)); + transition: transform 0.4s var(--ease); +} + +.official-seal-large:hover { + transform: scale(1.05) translateY(-5px); +} + +.po-titles-central h2 { + font-size: 2.8rem; + font-weight: 800; + margin-bottom: 20px; + color: #0F172A; /* Màu xanh đen đậm trên nền trắng để có contrast mạnh */ +} + +.po-titles-central p { + color: #475569; /* Xám tối, dễ đọc trên nền sáng */ + font-size: 1.15rem; + line-height: 1.6; +} + +.po-badges-central { + display: flex; + justify-content: center; + gap: 30px; + margin-top: 60px; + flex-wrap: wrap; +} + +.badge-item-large { + background: #F8FAFC; /* Xám siêu nhạt cho nền sáng */ + border: 1px solid #E2E8F0; /* Viền xám hiển thị rõ trên nền trắng */ + padding: 16px 32px; + border-radius: 100px; + font-size: 1.1rem; + font-weight: 600; + color: #1E293B; /* Chữ tối rõ nét */ + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* Bóng đổ mềm nổi bật */ + transition: all 0.3s ease; +} + +.badge-item-large:hover { + background: #FFFFFF; + border-color: #cbd5e1; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + transform: translateY(-3px); +} + +@media (max-width: 768px) { + .official-seal-large { + width: 180px; + } + .po-titles-central h2 { + font-size: 2rem; + } +} + +/* Cleanup layout for background usage */ +.split-content { + background: transparent !important; +} + +.img-frame { + box-shadow: 0 40px 100px rgba(0,0,0,0.8); +} + +/* ============ MINIMALIST STRATEGIC LOGISTICS ============ */ +.minimal-logistics-header { + text-align: center; + max-width: 800px; + margin: 0 auto 60px auto; +} + +.l-badge { + display: inline-block; + padding: 6px 16px; + background: var(--primary-glow); + color: var(--primary); + border-radius: 100px; + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 20px; +} + +.minimal-logistics-header h2 { + font-size: clamp(2.5rem, 4vw, 3.5rem); + font-weight: 800; + letter-spacing: -0.04em; + margin-bottom: 20px; +} + +.minimal-logistics-header p { + font-size: 1.2rem; + color: var(--text-dim) !important; + line-height: 1.6; +} + +.map-stage-minimal { + position: relative; + width: 100%; + max-width: 1100px; + aspect-ratio: 2 / 1; + margin: 40px auto; + display: flex; + align-items: center; + justify-content: center; +} + +.minimal-map-img { + width: 100%; + height: 100%; + object-fit: contain; + opacity: 0.45; /* Slightly increased */ + filter: contrast(1.1) brightness(1.05); + pointer-events: none; + mask-image: radial-gradient(circle, black 80%, transparent 100%); +} + +/* FLOATING HUB CARDS - PRECISION ALIGNED TO SVG COORDS */ +.floating-hub { + position: absolute; + z-index: 20; +} + +/* CA: matches SVG 180,160 -> 18% Left, 32% Top */ +.floating-hub.ca { + top: 32%; + left: 18%; +} + +/* SYD: matches SVG 850,380 -> 85% Left, 76% Top */ +.floating-hub.syd { + top: 76%; + left: 85%; +} + +.f-hub-card { + background: rgba(255, 255, 255, 0.7); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.5); + padding: 20px; + border-radius: 20px; + width: 240px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); + transition: transform 0.4s var(--transition); + transform: translate(-50%, -50%); /* Center the card on the coordinate */ +} + +.f-hub-card:hover { + transform: translate(-50%, -60%); + background: rgba(255, 255, 255, 0.9); + border-color: var(--primary); +} + +.f-status { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.65rem; + font-weight: 800; + color: #10B981; + margin-bottom: 8px; + letter-spacing: 0.05em; +} + +.f-status .pulse { + width: 6px; height: 6px; + background: #10B981; + border-radius: 50%; + animation: hubPulseTiny 2s infinite; +} + +.f-hub-card h3 { + font-size: 1.1rem; + margin-bottom: 4px; + color: var(--text); +} + +.f-hub-card p { + font-size: 0.8rem; + color: var(--text-dim) !important; + line-height: 1.4; + margin-bottom: 12px; +} + +.f-specs { + list-style: none; + display: flex; + gap: 8px; +} + +.f-specs li { + font-size: 0.7rem; + font-weight: 700; + color: var(--primary); + background: var(--primary-glow); + padding: 3px 8px; + border-radius: 4px; +} + +/* CONNECTION VECTOR (SVG) */ +.minimal-vector { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 10; +} + +.minimal-vector svg { + width: 100%; + height: 100%; +} + +.vector-path { + fill: none; + stroke: var(--primary); + stroke-width: 2.5; /* Slightly thicker */ + stroke-dasharray: 8 8; + opacity: 0.6; /* Increased opacity */ + animation: dashOffset 30s linear infinite; +} + +@keyframes dashOffset { + from { stroke-dashoffset: 200; } + to { stroke-dashoffset: 0; } +} + +.vector-point { + fill: var(--primary); + filter: drop-shadow(0 0 15px var(--primary)) drop-shadow(0 0 5px white); +} + +/* MINIMAL STATS */ +.minimal-stats { + display: flex; + justify-content: center; + gap: 60px; + margin-top: 40px; +} + +.m-stat { + font-size: 1.1rem; + color: var(--text-dim) !important; +} + +.m-stat strong { + color: var(--text); + margin-right: 8px; + font-size: 1.2rem; +} + +@media (max-width: 1024px) { + .floating-hub { + position: static; + margin-bottom: 20px; + } + .map-stage-minimal { + height: auto; + flex-direction: column; + padding: 40px 0; + } + .minimal-vector { display: none; } + .f-hub-card { width: 100%; max-width: 400px; } +} + +@media (max-width: 768px) { + .minimal-stats { + flex-direction: column; + gap: 20px; + text-align: center; + } + .minimal-map-img { display: none; } +} + +/* ============ MODAL STYLES ============ */ +.modal-overlay { + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + background: rgba(11, 17, 32, 0.85); /* Tối đồng bộ chủ đề */ + backdrop-filter: blur(8px); + z-index: 1000; + display: none; /* hidden default */ + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s ease; +} + +.modal-overlay.active { + display: flex; + opacity: 1; +} + +.modal-box { + background: linear-gradient(145deg, #2A3B54, #1E293B); /* Sáng hơn một chút với dải màu nhẹ */ + border: 1px solid rgba(255,255,255,0.15); + border-radius: 20px; + padding: 40px; + width: 90%; + max-width: 600px; + position: relative; + transform: scale(0.95) translateY(20px); + transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); +} + +.modal-overlay.active .modal-box { + transform: scale(1) translateY(0); +} + +.modal-close { + position: absolute; + top: 20px; + right: 20px; + background: transparent; + border: none; + color: #94A3B8; + font-size: 1.5rem; + cursor: pointer; + transition: var(--transition); +} + +.modal-close:hover { + color: white; + transform: rotate(90deg); +} + +.modal-label { + display: block; + color: #94A3B8; + font-size: 0.85rem; + font-weight: 600; + margin-bottom: 8px; + text-transform: uppercase; + letter-spacing: 0.05em; + text-align: left; +} + +.modal-input { + width: 100%; + background: rgba(255, 255, 255, 0.06); /* Sáng hơn, trong suốt trên nền xanh đậm */ + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 8px; + padding: 14px 16px; + color: white; + font-size: 1rem; + font-family: var(--font); + transition: all 0.2s ease; + box-sizing: border-box; +} + +.modal-input:focus { + outline: none; + border-color: var(--primary); + background: rgba(15, 23, 42, 0.8); + box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2); +} + +.modal-input::placeholder { + color: #64748B; /* Placeholder sáng hơn xíu để dễ đọc */ +} + + +/* ============ RESPONSIVE DESIGN (TABLET & MOBILE) ============ */ + +@media (max-width: 1200px) { + .container { width: 92%; } + .hero-animation-wrapper { transform: scale(0.85); } +} + +/* Tablet (1024px and below) */ +@media (max-width: 1024px) { + html { + scroll-snap-type: none; /* Tắt snap để cuộn mượt hơn trên máy tính bảng */ + } + + .section { + height: auto; + min-height: 100vh; + padding: 100px 0 60px; + } + + .dash-grid { + grid-template-columns: repeat(2, 1fr); + } + + .services-mini-grid { + grid-template-columns: repeat(2, 1fr); + } + + .why-choose-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +/* Mobile (768px and below) */ +@media (max-width: 768px) { + html { + scroll-snap-type: none; + } + + .section { + height: auto; + min-height: auto; /* Cho phép co giãn hoàn toàn theo nội dung */ + padding: 80px 0 40px 0; + } + + .navbar { + height: 70px; + } + + .nav-content { + width: 95%; + } + + .nav-brand img { + height: 40px; + } + + .nav-links { + display: none; /* Ẩn menu chính trên mobile để tránh tràn, có thể thêm menu toggle sau */ + } + + .nav-cta button { + padding: 8px 16px; + font-size: 13px; + } + + .hero-animation-wrapper { + min-height: 250px; + transform: scale(0.6); /* Thu nhỏ Server Animation trên mobile */ + margin-bottom: 0; + } + + .hero-text-overlay { + position: relative; + top: 0; + left: 0; + transform: none; + margin-top: -40px; + } + + .hero-text-animated { + font-size: 1.8rem; + min-height: 120px; + } + + .hero-search-form { + flex-direction: column; + border-radius: 20px; + padding: 10px; + height: auto; + gap: 10px; + } + + .hero-search-form input { + width: 100%; + padding: 12px; + text-align: center; + } + + .hero-search-form button { + width: 100%; + border-radius: 12px; + } + + .dash-grid { + grid-template-columns: repeat(2, 1fr); + margin-top: 20px; + } + + .dash-item { + padding: 20px 10px; + } + + .dash-item .val { + font-size: 1.8rem; + } + + .services-mini-grid, .why-choose-grid, .serve-grid { + grid-template-columns: 1fr !important; /* Luôn là 1 cột trên mobile */ + } + + .section-header h2 { + font-size: 1.8rem; + } + + .po-banner { + padding: 40px 20px; + } + + .official-seal-large { + width: 120px; + } + + .cta-grid { + grid-template-columns: 1fr; + gap: 16px; + } +} + + + + + +/* Re-adjust Institutional color slightly for contrast */ +#institutional { + background: linear-gradient(180deg, var(--bg) 0%, #151F33 100%); +} + +/* ============ ABOUT PAGE STYLES ============ */ +.about-hero { + height: 70vh; + min-height: 500px; + background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.9)), url('real_datacenter_wide_1773982986702.png'); + background-size: cover; + background-position: center; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: white; + padding-top: 90px; + position: relative; + overflow: hidden; +} + +.about-hero::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 150px; + background: linear-gradient(to top, var(--bg), transparent); +} + +.about-hero h1 { + font-size: clamp(2.5rem, 6vw, 4.5rem); + font-weight: 800; + letter-spacing: -0.04em; + line-height: 1.1; + margin-bottom: 24px; +} + +.about-hero p { + font-size: 1.25rem; + color: rgba(255,255,255,0.8); + max-width: 700px; + margin: 0 auto; +} + +.about-content-section { + padding: 120px 0; +} + +.about-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 100px; + align-items: center; + grid-template-areas: "text img"; +} + +.how-we-work-dark h2 { + color: white; +} + +.about-text { + grid-area: text; +} + +.about-text h2 { + font-size: 3rem; + margin-bottom: 30px; + letter-spacing: -0.02em; +} + +.about-text p { + font-size: 1.2rem; + color: var(--text-dim); + line-height: 1.8; + margin-bottom: 25px; +} + +.about-stats { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px; + margin-top: 50px; +} + +.stat-box h4 { + font-size: 2.5rem; + color: var(--primary); + margin-bottom: 8px; +} + +.stat-box p { + font-size: 0.85rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--text); + opacity: 0.6; +} + +.about-image-frame { + position: relative; + grid-area: img; +} + +.about-image-frame img { + width: 100%; + border-radius: 32px; + box-shadow: 0 40px 80px rgba(0,0,0,0.12); +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 32px; + margin-top: 60px; +} + +.feature-card { + background: var(--bg-alt); + padding: 50px; + border-radius: 24px; + border: 1px solid var(--border); + transition: var(--transition); +} + +.feature-card:hover { + box-shadow: 0 20px 40px rgba(0,0,0,0.05); + border-color: var(--primary); + transform: translateY(-8px); +} + +.feature-card h3 { + font-size: 1.5rem; + margin-bottom: 20px; +} + +.feature-card p { + color: var(--text-dim); + line-height: 1.6; +} + +.how-we-work-dark { + background: #0B1120; + color: white; + padding: 120px 0; +} + +.work-steps { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 48px; + margin-top: 80px; +} + +.step-item span { + font-size: 0.9rem; + font-weight: 800; + color: var(--primary); + margin-bottom: 24px; + display: block; + opacity: 0.7; +} + +.step-item h4 { + font-size: 1.6rem; + margin-bottom: 16px; +} + +.step-item p { + color: #94A3B8; + line-height: 1.7; +} + +.b2b-cta-banner { + background: var(--bg-alt); + padding: 80px; + border-radius: 40px; + text-align: center; + border: 1px solid var(--border); + margin-top: 100px; +} + +.b2b-cta-banner h3 { + font-size: 2.5rem; + margin-bottom: 24px; +} + +.b2b-cta-banner p { + font-size: 1.2rem; + max-width: 700px; + margin: 0 auto 40px; + color: var(--text-dim); +} + +.btn-primary { + background: var(--primary); + color: white; + padding: 20px 48px; + border-radius: 100px; + font-weight: 700; + font-size: 1.1rem; + border: none; + cursor: pointer; + transition: var(--transition); +} + + + +@media (max-width: 1024px) { + .about-grid { grid-template-columns: 1fr; gap: 60px; } + .work-steps { grid-template-columns: 1fr 1fr; } + .why-choose-grid { grid-template-columns: 1fr 1fr; } +} + +@media (max-width: 640px) { + .work-steps { grid-template-columns: 1fr; } + .b2b-cta-banner { padding: 40px 20px; } + .why-choose-grid { grid-template-columns: 1fr; gap: 20px; } + .section { height: auto !important; min-height: 100vh; padding: 110px 20px 60px; } +} + + + +/* ===== MAGENTO FOOTER SCROLL FIX ===== + scroll-snap-type on html with overflow-y:auto lets content below + the last snap section scroll naturally into view (Magento footer). */ +.section:last-of-type { + scroll-snap-stop: normal !important; + scroll-snap-align: start !important; + /* Shrink last section so Magento footer is reachable via snap */ + min-height: unset !important; + height: auto !important; + padding-bottom: 80px; +} +/* Magento footer must be visible and scrollable */ +.page-footer, footer.page-footer, .page-wrapper > footer { + display: block !important; + position: relative !important; + z-index: 1 !important; +} + +/* ============ HERO EBAY BANNER (shown after typewriter) ============ */ +.ebay-banner-float { + width: 100%; + max-width: 100%; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 20px 60px rgba(0,0,0,0.15); + border: 1px solid var(--border); + opacity: 0; + pointer-events: none; + transform: translateY(16px); + transition: opacity 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1); + display: none; + margin-bottom: 32px; +} +.ebay-banner-float.visible { + display: block; + opacity: 1; + pointer-events: all; + transform: translateY(0); +} +.ebay-banner-float img { + width: 100%; + display: block; + transition: filter 0.3s; +} +.ebay-banner-float:hover img { + filter: brightness(1.1); +} + +/* Brand logo in typewriter sequence */ +#typewriter-title img { + height: 80px !important; + width: auto !important; + margin: 0 !important; + padding: 0 !important; + display: block !important; + max-width: none !important; + border: none !important; +} + +/* Remove browser/Magento outline on buttons */ +.btn-primary, +.btn-secondary, +.btn-success, +.search-tab, +.hero-search-form button, +.sell-capsule-static button, +.nav-cta button { + outline: none !important; + outline-offset: 0 !important; +} +.btn-primary:focus, +.btn-success:focus, +.hero-search-form button:focus, +.sell-capsule-static button:focus { + border: 0 !important; + outline: none !important; +} + +/* Xóa gap giữa section cuối và Magento footer */ +.section:last-of-type { + margin-bottom: 0 !important; + padding-bottom: 0 !important; + border-bottom: none !important; +} +.page-wrapper, .page-main { + margin-top: 0 !important; + padding-top: 0 !important; +} +/* Magento thường có border-top trên footer */ +.page-footer { + margin-top: 0 !important; + border-top: none !important; +} + +/* ============================================================ + NS FOOTER — matches Magento (Netstore) footer layout + ============================================================ */ +.page-footer { + background: #0d1f3c; + color: rgba(255, 255, 255, 0.65); + margin-top: auto; + padding: 0; + font-family: "Plus Jakarta Sans", sans-serif; +} +.page-footer .footer.content { + max-width: var(--container); + margin: 0 auto; + padding: 0; + border: none; +} + +/* ── FOOTER TOP: brand + link columns ── */ +.ns-footer__top { + padding: 56px 24px 48px; + display: grid; + grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; + gap: 48px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + max-width: var(--container); + margin: 0 auto; +} + +/* Brand column */ +.ns-footer__brand .ns-footer__logo { + display: block; + margin-bottom: 14px; + text-decoration: none; + font-size: 1.4rem; + font-weight: 700; + color: #ffffff; + letter-spacing: -0.02em; +} +.ns-footer__brand .ns-footer__logo img { + display: block; + max-height: 48px; + width: auto; +} +.ns-footer__brand .ns-footer__company { + margin-top: 16px; + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.35); + line-height: 1.7; +} +.ns-footer__company--top { + margin-top: 12px; + margin-bottom: 0; + font-size: 0.82rem; + color: rgba(255, 255, 255, 0.5); + line-height: 1.7; +} +.ns-footer__company--address { + margin-top: 14px; + margin-bottom: 0; + font-size: 0.82rem; + color: rgba(255, 255, 255, 0.5); + line-height: 1.7; +} +.ns-footer__region-label { + color: rgba(255, 255, 255, 0.95); + font-weight: 600; + font-size: 0.82rem; +} + +/* Trust list (phones + email) */ +.ns-footer__trust-list { + margin: 10px 0 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 6px; +} +.ns-footer__trust-item { + display: flex; + align-items: center; + gap: 6px; + white-space: nowrap; + font-size: 0.78rem; + color: rgba(255, 255, 255, 0.55); + font-weight: 500; +} +.ns-footer__trust-item svg { flex-shrink: 0; } +.ns-footer__trust-item a { + color: inherit; + text-decoration: none; + transition: color 0.18s ease; +} +.ns-footer__trust-item a:hover { color: #ffffff; } + +/* Link columns */ +.ns-footer__col .ns-footer__col-title { + font-size: 0.72rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + color: rgba(255, 255, 255, 0.4); + margin: 0 0 16px; +} +.ns-footer__col ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 2px; +} +.ns-footer__col li a { + font-size: 0.83rem; + color: rgba(255, 255, 255, 0.6); + text-decoration: none; + padding: 4px 0; + display: block; + transition: color 0.18s ease; +} +.ns-footer__col li a:hover { color: #ffffff; } + +/* ── FOOTER PARTNERS: payment + shipping logos ── */ +.ns-footer__partners { + max-width: var(--container); + margin: 0 auto; + padding: 20px 24px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + display: flex; + flex-direction: column; + gap: 14px; +} +.ns-footer__partner-row { + display: flex; + align-items: center; + gap: 20px; + flex-wrap: wrap; +} +.ns-footer__partner-label { + font-size: 0.65rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + color: rgba(255, 255, 255, 0.3); + white-space: nowrap; + flex-shrink: 0; + min-width: 130px; +} +.ns-footer__partner-logos { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 10px; +} +.ns-footer__partner-logos img { + display: block; + height: 50px; + width: auto; + min-width: 40px; + max-width: 72px; + object-fit: contain; + padding: 8px 16px; + background: rgba(255, 255, 255, 0.07); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + box-sizing: content-box; + opacity: 0.75; + filter: brightness(0) invert(1); + transition: opacity 0.18s ease, background 0.18s ease; +} +.ns-footer__partner-logos img:hover { + opacity: 1; + background: rgba(255, 255, 255, 0.12); +} + +/* ── FOOTER BOTTOM: copyright + legal links + social ── */ +.ns-footer__bottom { + max-width: var(--container); + margin: 0 auto; + padding: 20px 24px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + flex-wrap: wrap; +} +.ns-footer__copyright { + margin: 0; + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.35); +} +.ns-footer__bottom-links { + display: flex; + gap: 20px; + list-style: none; + margin: 0; + padding: 0; +} +.ns-footer__bottom-links a { + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.35); + text-decoration: none; + transition: color 0.18s ease; +} +.ns-footer__bottom-links a:hover { color: rgba(255, 255, 255, 0.7); } + +/* Social icons */ +.ns-footer__social { + display: flex; + gap: 8px; +} +.ns-footer__social-link { + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + color: rgba(255, 255, 255, 0.5); + text-decoration: none; + transition: all 0.18s ease; + font-size: 0.75rem; +} +.ns-footer__social-link:hover { + background: rgba(255, 255, 255, 0.15); + color: #ffffff; + text-decoration: none; +} +.ns-footer__social-link svg { + width: 14px; + height: 14px; +} +.ns-footer__social-link--ebay { + width: auto; + padding: 0 8px; + font-size: 0.7rem; + font-weight: 700; + letter-spacing: 0.01em; + color: rgba(255, 255, 255, 0.6); +} +.ns-footer__social-link--ebay:hover { color: #ffffff; } + +/* ── FOOTER RESPONSIVE BREAKPOINTS ── */ +@media (min-width: 768px) and (max-width: 1024px) { + .ns-footer__top { + grid-template-columns: 1fr 1fr 1fr; + gap: 32px; + padding: 40px 24px 36px; + } + .ns-footer__top .ns-footer__brand { grid-column: 1 / -1; } +} +@media (max-width: 767px) { + .ns-footer__top { + grid-template-columns: 1fr 1fr; + gap: 24px; + padding: 32px 15px; + } + .ns-footer__top .ns-footer__brand { grid-column: 1 / -1; } + .ns-footer__bottom { + flex-direction: column; + align-items: flex-start; + gap: 12px; + padding: 16px 15px; + } + .ns-footer__bottom-links { flex-wrap: wrap; gap: 12px; } + .ns-footer__partners { padding: 16px 15px; gap: 12px; } + .ns-footer__partner-row { + flex-direction: column; + align-items: flex-start; + gap: 10px; + } + .ns-footer__partner-label { min-width: unset; } +} +@media (max-width: 480px) { + .ns-footer__top { + grid-template-columns: 1fr; + gap: 20px; + padding: 28px 15px; + } +} + +/* ===== MOBILE RESPONSIVE FIX ===== */ +@media (max-width: 768px) { + + /* ── NAV: hamburger placeholder, show abbreviated links ── */ + /* Nav links ẩn trên tablet/mobile */ + + /* ── HERO SEARCH: stack vertically ── */ + .hero-search-container { + padding: 0 16px !important; + } + .hero-search-form { + flex-direction: column !important; + border-radius: 20px !important; + padding: 12px !important; + height: auto !important; + gap: 8px !important; + box-sizing: border-box !important; + } + .hero-search-form input { + width: 100% !important; + padding: 12px 16px !important; + text-align: left !important; + font-size: 0.9rem !important; + height: auto !important; + } + .hero-search-form button { + width: 100% !important; + height: 48px !important; + border-radius: 12px !important; + font-size: 1rem !important; + padding: 0 !important; + } + + /* Sell capsule mobile */ + .sell-capsule-static { + flex-direction: column !important; + border-radius: 20px !important; + padding: 12px !important; + height: auto !important; + gap: 8px !important; + } + .sell-capsule-static input { + width: 100% !important; + padding: 12px 16px !important; + height: auto !important; + } + .sell-capsule-static button { + width: 100% !important; + height: 48px !important; + border-radius: 12px !important; + padding: 0 !important; + } + + /* ── SEARCH TABS ── */ + .search-tabs { gap: 8px !important; } + .search-tab { + padding: 10px 16px !important; + font-size: 0.85rem !important; + } + + /* ── eBay BANNER ── */ + .ebay-banner-float { + border-radius: 8px !important; + } + + /* ── DASH GRID: 2x2 ── */ + .dash-grid { + grid-template-columns: repeat(2, 1fr) !important; + margin-top: 16px !important; + } + .dash-item { padding: 20px 10px !important; } + .dash-item .val { font-size: 1.6rem !important; } + .dash-item .lab { font-size: 11px !important; letter-spacing: 0.1em !important; } + + /* ── SECTION padding ── */ + .section { padding: 80px 0 40px !important; } + + /* ── CTA GRID ── */ + .cta-grid { grid-template-columns: 1fr !important; gap: 16px !important; } + .cta-box { padding: 40px 24px !important; } + + /* ── SERVE GRID ── */ + .serve-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } + .serve-item h4 { font-size: 1rem !important; } +} + +@media (max-width: 480px) { + .nav-links { display: none !important; } /* Too cramped on very small screens */ + .serve-grid { grid-template-columns: 1fr !important; } + .dash-item .val { font-size: 1.4rem !important; } + .section-header h2 { font-size: 1.6rem !important; } + .cta-box h2 { font-size: 1.6rem !important; } +} + +/* ===== MOBILE RESPONSIVE OVERRIDES (max-width: 480px) ===== */ +@media (max-width: 480px) { + + /* ── NAV: chỉ show logo + button, links ẩn ── */ + .nav-links { display: none !important; } + .navbar { height: 64px !important; } + .nav-brand img { height: 36px !important; } + .nav-cta button { + padding: 8px 14px !important; + font-size: 12px !important; + height: auto !important; + } + + /* ── SEARCH TABS: full width ── */ + .search-tabs { + gap: 8px !important; + width: 100% !important; + padding: 0 4px !important; + } + .search-tab { + flex: 1 !important; + padding: 10px 8px !important; + font-size: 0.8rem !important; + text-align: center !important; + white-space: nowrap !important; + } + .search-tab.active { + background: var(--primary) !important; + color: white !important; + border-color: var(--primary) !important; + } + + /* ── HERO SEARCH ── */ + .hero-search-container { padding: 0 12px !important; } + .hero-search-form { + flex-direction: column !important; + border-radius: 16px !important; + padding: 10px !important; + height: auto !important; + gap: 8px !important; + } + .hero-search-form input { + width: 100% !important; + height: 44px !important; + padding: 0 12px !important; + font-size: 0.9rem !important; + text-align: left !important; + border-radius: 8px !important; + } + .hero-search-form button { + width: 100% !important; + height: 44px !important; + border-radius: 10px !important; + padding: 0 !important; + font-size: 0.95rem !important; + } + .sell-capsule-static { + flex-direction: column !important; + border-radius: 16px !important; + padding: 10px !important; + height: auto !important; + gap: 8px !important; + } + .sell-capsule-static input { + width: 100% !important; + height: 44px !important; + padding: 0 12px !important; + font-size: 0.9rem !important; + border-radius: 8px !important; + } + .sell-capsule-static button { + width: 100% !important; + height: 44px !important; + border-radius: 10px !important; + padding: 0 !important; + } + + /* ── SERVE GRID: 1 column ── */ + .serve-grid { grid-template-columns: 1fr !important; } + .serve-icon svg { width: 40px !important; height: 40px !important; } + .serve-item h4 { font-size: 1.1rem !important; } + + /* ── SECTION headings ── */ + .section-header h2, + #quality .section-header h2, + #who-we-serve h2 { font-size: 1.5rem !important; } + + /* ── CTA ── */ + .cta-box { padding: 32px 20px !important; } + .cta-box h2 { font-size: 1.4rem !important; } + + /* ── DASH GRID ── */ + .dash-grid { grid-template-columns: repeat(2, 1fr) !important; } + .dash-item .val { font-size: 1.4rem !important; } +} + +/* ============ VIEW PRODUCTS BUTTON ============ */ +.nav-content .nav-cta .btn-view-products, +.navbar .btn-view-products { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 8px !important; + padding: 11px 22px !important; + border-radius: 8px !important; + font-size: 0.95rem !important; + font-weight: 700 !important; + background: #1A73E8 !important; + color: #FFFFFF !important; + border: none !important; + outline: none !important; + cursor: pointer !important; + font-family: var(--font) !important; + letter-spacing: 0 !important; + white-space: nowrap !important; + line-height: 1 !important; + text-transform: none !important; + text-decoration: none !important; + vertical-align: middle !important; + box-shadow: 0 1px 2px rgba(60,64,67,0.3), 0 1px 3px rgba(60,64,67,0.15) !important; + -webkit-appearance: none !important; + appearance: none !important; + min-height: unset !important; + height: auto !important; + width: auto !important; + transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important; +} +.nav-content .nav-cta .btn-view-products:hover, +.navbar .btn-view-products:hover { + background: #174ea6 !important; + color: #FFFFFF !important; + box-shadow: 0 2px 6px rgba(60,64,67,0.35) !important; + transform: translateY(-1px) !important; +} + +/* ============ STORE PICKER MODAL ============ */ +.store-modal-overlay { + position: fixed; + inset: 0; + background: rgba(11, 17, 32, 0.65); + backdrop-filter: blur(8px); + z-index: 2000; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + pointer-events: none; + transition: opacity 0.25s ease; +} +.store-modal-overlay.open { + opacity: 1; + pointer-events: all; +} +.store-modal-box { + background: #FFFFFF; + border-radius: 24px; + padding: 40px; + width: 90%; + max-width: 460px; + position: relative; + transform: scale(0.95) translateY(16px); + transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); + box-shadow: 0 25px 60px rgba(0,0,0,0.18); +} +.store-modal-overlay.open .store-modal-box { + transform: scale(1) translateY(0); +} +.store-modal-close { + position: absolute; + top: 16px; + right: 16px; + background: #F1F3F4; + border: none; + width: 32px; + height: 32px; + border-radius: 50%; + font-size: 1rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: #5F6368; + transition: background 0.2s; + line-height: 1 !important; + -webkit-appearance: none; + appearance: none; +} +.store-modal-close:hover { + background: #DADCE0; + color: #202124; + transform: rotate(90deg); +} +.store-modal-title { + font-size: 1.4rem; + font-weight: 800; + color: var(--text); + margin-bottom: 6px; +} +.store-modal-subtitle { + font-size: 0.9rem; + color: var(--text-dim); + margin-bottom: 28px; +} +.store-options { + display: flex; + flex-direction: column; + gap: 14px; +} +.store-option { + display: flex; + align-items: center; + gap: 18px; + padding: 18px 22px; + border: 2px solid var(--border); + border-radius: 16px; + cursor: pointer; + text-decoration: none !important; + transition: all 0.2s ease; + background: var(--bg-alt); +} +.store-option *, +.store-option:link, +.store-option:visited, +.store-option:hover, +.store-option:active { + text-decoration: none !important; +} +.store-info-name, +.store-info-desc { + text-decoration: none !important; +} +.store-option:hover:not(.store-option--disabled) { + border-color: var(--primary); + background: rgba(26, 115, 232, 0.05); + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(26,115,232,0.12); +} +.store-option--active { + border-color: var(--primary); + background: rgba(26, 115, 232, 0.04); +} +.store-option--disabled { + opacity: 0.55; + cursor: not-allowed; +} +.store-flag { + flex-shrink: 0; + line-height: 0; + display: flex; + align-items: center; +} +.store-flag svg { + border-radius: 4px; + box-shadow: 0 1px 4px rgba(0,0,0,0.22); + display: block; +} +.store-info { + flex: 1; +} +.store-info-name { + font-size: 1.05rem; + font-weight: 700; + color: var(--text); + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 4px; +} +.store-info-desc { + font-size: 0.82rem; + color: var(--text-dim); +} +.store-badge-active { + font-size: 0.65rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + background: #34A853; + color: white; + padding: 3px 9px; + border-radius: 100px; +} +.store-badge-soon { + font-size: 0.65rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + background: #F8F9FA; + color: #5F6368; + border: 1px solid #DADCE0; + padding: 3px 9px; + border-radius: 100px; +} +.store-arrow { + color: var(--primary); + font-size: 1.1rem; + opacity: 0; + transition: opacity 0.2s, transform 0.2s; + flex-shrink: 0; +} +.store-option:hover:not(.store-option--disabled) .store-arrow { + opacity: 1; + transform: translateX(4px); +} + +/* ─── Mobile hamburger & dropdown menu ───────────────────────── */ +@media (max-width: 900px) { + .hamburger-btn { display: flex; } + + /* Backdrop */ + .nav-backdrop { + display: none; + position: fixed; + inset: 0; + background: rgba(15,23,42,0.3); + backdrop-filter: blur(2px); + -webkit-backdrop-filter: blur(2px); + z-index: 998; + animation: backdropIn 0.22s ease both; + } + .nav-backdrop.open { display: block; } + @keyframes backdropIn { + from { opacity: 0; } + to { opacity: 1; } + } + + /* Dropdown panel */ + .nav-links.open { + display: flex !important; + flex-direction: column; + position: fixed; + top: 70px; + left: 0; + width: 100%; + background: #ffffff; + padding: 4px 0 12px; + box-shadow: 0 12px 32px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06); + border-top: 2px solid #1A73E8; + z-index: 999; + gap: 0; + list-style: none; + margin: 0; + animation: navSlideDown 0.22s cubic-bezier(0.4,0,0.2,1) both; + } + @keyframes navSlideDown { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } + } + + /* Divider via li::after */ + .nav-links.open li { width: 100%; position: relative; } + .nav-links.open li::after { + content: ''; + display: block; + height: 1px; + margin: 0 20px; + background: #f3f4f6; + } + .nav-links.open li:last-child::after { display: none; } + + /* Link base */ + .nav-links.open a, + .nav-links.open a:link, + .nav-links.open a:visited { + display: flex; + align-items: center; + padding: 15px 24px; + font-size: 0.95rem; + font-weight: 500; + color: #374151; + letter-spacing: 0; + text-decoration: none; + position: relative; + transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease; + } + + /* Left accent bar on hover/active */ + .nav-links.open a::before { + content: ''; + position: absolute; + left: 0; + top: 22%; + bottom: 22%; + width: 3px; + background: #1A73E8; + border-radius: 0 3px 3px 0; + transform: scaleY(0); + transition: transform 0.18s cubic-bezier(0.4,0,0.2,1); + } + .nav-links.open a:hover, + .nav-links.open a:focus { + background: rgba(26,115,232,0.06); + color: #1A73E8; + padding-left: 30px; + } + .nav-links.open a:hover::before, + .nav-links.open a:focus::before { transform: scaleY(1); } + .nav-links.open a.active, + .nav-links.open a.active:link, + .nav-links.open a.active:visited { + color: #1A73E8; + font-weight: 600; + background: rgba(26,115,232,0.05); + } + .nav-links.open a.active::before { transform: scaleY(1); } +} + +@media (max-width: 480px) { + .nav-links.open { top: 64px; } +} diff --git a/assets/data-footer.json b/assets/data-footer.json new file mode 100644 index 0000000..e132ca3 --- /dev/null +++ b/assets/data-footer.json @@ -0,0 +1,169 @@ +{ + "_comment": "Schema for Magento Custom Variable code 'prology_footer_config'. Paste WITHOUT this _comment field into Stores > Custom Variables > prology_footer_config > Plain Value. JSON invalid sẽ tự fallback về defaults trong footer.phtml.", + + "company_name": "Prology Pty Ltd Trading as Prology", + + "addresses": [ + { + "label": "AU Warehouse", + "lines": ["Unit 8/4A Bachell Ave,", "Lidcombe NSW 2141, Australia"] + }, + { + "label": "US Warehouse", + "lines": ["17150 Newhope St Ste 308,", "Fountain Valley, CA 92708, U.S.A"] + } + ], + + "phones": [ + { + "label": "AU", + "numbers": [{ "display": "+612 8061 6886", "href": "tel:+61280616886" }] + }, + { + "label": "US", + "numbers": [{ "display": "+1 4689 3350", "href": "tel:+146893350" }] + } + ], + + "emails": [ + { + "label": "Sales", + "addresses": ["sales@prology.net"] + } + ], + + "links": { + "information": [ + { "label": "About Us", "url": "about-us", "external": false }, + { "label": "News", "url": "https://prology.net/blog", "external": true }, + { "label": "Contact Us", "url": "contact", "external": false }, + { "label": "Terms of Use & Sale", "url": "terms", "external": false }, + { + "label": "Privacy & Cookie Policy", + "url": "privacy-policy-cookie-restriction-mode", + "external": false + } + ], + "your_orders": [ + { "label": "My Account", "url": "customer/account", "external": false }, + { "label": "My Order", "url": "sales/order/history", "external": false }, + { "label": "My Wish List", "url": "wishlist", "external": false }, + { + "label": "Manufacturers List", + "url": "manufacturers", + "external": false + } + ], + "support": [ + { + "label": "Track Your Order", + "url": "sales/guest/form", + "external": false + }, + { "label": "Returns & Exchanges", "url": "returns", "external": false }, + { "label": "FAQ", "url": "faq", "external": false } + ] + }, + + "payment_methods": [ + { + "name": "PayPal", + "image": "images/icons/payment/paypal.png", + "width": 48, + "height": 48 + }, + { + "name": "Visa", + "image": "images/icons/payment/visa.png", + "width": 48, + "height": 48 + }, + { + "name": "Mastercard", + "image": "images/icons/payment/master.png", + "width": 48, + "height": 48 + }, + { + "name": "American Express", + "image": "images/icons/payment/amex.png", + "width": 48, + "height": 48 + }, + { + "name": "Afterpay", + "image": "images/icons/payment/after.png", + "width": 48, + "height": 48 + } + ], + + "shipping_partners": [ + { "name": "DHL Express", "image": "images/icons/shipping/dhl.png" }, + { + "name": "UPS", + "image": "images/icons/shipping/ups.png", + "width": 48, + "height": 48 + }, + { + "name": "Fedex", + "image": "images/icons/shipping/fedex.png", + "width": 68, + "height": 68 + }, + { + "name": "TNT", + "image": "images/icons/shipping/tnt.png", + "width": 68, + "height": 68 + }, + { + "name": "Couriers Please", + "image": "images/icons/shipping/couriers.png", + "width": 68, + "height": 68 + }, + { + "name": "Startrack", + "image": "images/icons/shipping/star.png", + "width": 68, + "height": 68 + }, + { + "name": "Australia Post", + "image": "images/icons/shipping/aupost.png", + "width": 68, + "height": 68 + }, + { + "name": "Sendle", + "image": "images/icons/shipping/sendle.png", + "width": 68, + "height": 68 + } + ], + + "social": [ + { + "name": "Facebook", + "url": "https://www.facebook.com/prology.net/", + "icon": "facebook" + }, + { + "name": "LinkedIn", + "url": "https://www.linkedin.com/company/unavailable/", + "icon": "linkedin" + }, + { + "name": "eBay", + "url": "https://www.ebay.com.au/str/prologyptyltd", + "icon": "ebay" + }, + { + "name": "YouTube", + "url": "https://www.youtube.com/@PrologyPtyLtd", + "icon": "youtube" + } + ] +} diff --git a/assets/js/config.js b/assets/js/config.js new file mode 100644 index 0000000..ca7d2e7 --- /dev/null +++ b/assets/js/config.js @@ -0,0 +1,28 @@ +window.PROLOGY_CONFIG = { + API_URL: "https://prologyms.nswteam.net/chat-plugin/api/support", + LOGO_SRC: "assets/Prology_logo.png", + + // ── Footer ── + FOOTER_DATA_URL: "assets/data-footer.json", + FOOTER_BASE_URL: "http://localhost:8080/", + FOOTER_STATIC_URL: + "http://localhost:8080/static/version1778227322/frontend/Netstore/default/en_US/", + FOOTER_LOGO_URL: + "http://localhost:8080/media/logo/stores/1/Prology-2-e1665964900953_6_.png", + FOOTER_CATEGORIES: [ + { label: "Compute", url: "compute.html" }, + { label: "Storage", url: "storage.html" }, + { label: "Networking", url: "networking.html" }, + { label: "Security", url: "security.html" }, + { label: "End User", url: "end-user.html" }, + { label: "Data Center", url: "data-center.html" }, + { label: "Components", url: "components.html" }, + ], + FOOTER_LEGAL_LINKS: [ + { label: "Privacy Policy", url: "privacy-policy-cookie-restriction-mode" }, + { label: "Terms of Use & Sale", url: "terms" }, + { label: "Cookie Policy", url: "enable-cookies" }, + ], + FOOTER_COPYRIGHT: + "Copyright © 2013-present Magento, Inc. All rights reserved.", +}; diff --git a/assets/js/footer.js b/assets/js/footer.js new file mode 100644 index 0000000..922f69c --- /dev/null +++ b/assets/js/footer.js @@ -0,0 +1,162 @@ +(() => { + const CFG = window.PROLOGY_CONFIG; + + // ── Icons ── + const ICON_PHONE = ``; + const ICON_EMAIL = ``; + const SOCIAL_SVG = { + facebook: ``, + linkedin: ``, + youtube: ``, + ebay: ``, + }; + + // ── Helpers ── + const escape = (s) => + String(s ?? "").replace(/[&<>"']/g, (c) => ({ + "&": "&", "<": "<", ">": ">", '"': """, "'": "'", + })[c]); + + const linkUrl = (item) => { + const url = item.url || ""; + if (item.external || /^https?:\/\//i.test(url)) return url; + const trimmed = url.replace(/^\/+/, ""); + const suffix = /\.[a-z0-9]+$/i.test(trimmed) ? "" : "/"; + return CFG.FOOTER_BASE_URL + trimmed + suffix; + }; + + const staticUrl = (rel) => + /^https?:\/\//i.test(rel) ? rel : CFG.FOOTER_STATIC_URL + rel.replace(/^\/+/, ""); + + // ── Renderers ── + const renderBrand = (data) => { + const phoneItems = (data.phones || []) + .flatMap((g) => + (g.numbers || []).map( + (n) => `
  • + ${ICON_PHONE} + ${escape(g.label)}: + ${escape(n.display)} +
    • `, + ), + ) + .join(""); + + const emailItems = (data.emails || []) + .flatMap((g) => + (g.addresses || []).map( + (addr) => `
  • + ${ICON_EMAIL} + ${escape(addr)} +
    • `, + ), + ) + .join(""); + + const addressBlocks = (data.addresses || []) + .map( + (a) => `

    + ${escape(a.label)}:
    + ${(a.lines || []).map(escape).join("
    ")} +

    `, + ) + .join(""); + + return ` +
    + +

    ${escape(data.company_name || "")}

    + ${addressBlocks} + +
    `; + }; + + const renderCol = (title, items) => { + if (!items || !items.length) return ""; + const lis = items + .map( + (it) => + `
  • ${escape(it.label)}
    • `, + ) + .join(""); + return ``; + }; + + const renderPartnerRow = (label, items, ariaLabel) => { + if (!items || !items.length) return ""; + const imgs = items + .map((p) => { + const w = p.width ? ` width="${p.width}"` : ""; + const h = p.height ? ` height="${p.height}"` : ""; + return `${escape(p.name)}`; + }) + .join(""); + return `
    + ${escape(label)} +
    ${imgs}
    +
    `; + }; + + const renderSocial = (items) => { + if (!items || !items.length) return ""; + return items + .map((s) => { + const icon = SOCIAL_SVG[s.icon] || ""; + const cls = + "ns-footer__social-link" + + (s.icon === "ebay" ? " ns-footer__social-link--ebay" : ""); + return `${icon}`; + }) + .join(""); + }; + + const renderFooter = (data) => { + const links = data.links || {}; + return ` +
    +
    + ${renderBrand(data)} + ${renderCol("Categories", CFG.FOOTER_CATEGORIES)} + ${renderCol("Information", links.information)} + ${renderCol("Your Orders", links.your_orders)} + ${renderCol("Support", links.support)} +
    +
    + ${renderPartnerRow("Payment Methods", data.payment_methods, "We accept")} + ${renderPartnerRow("Shipping Partners", data.shipping_partners, "We ship with")} +
    +
    +

    ${escape(CFG.FOOTER_COPYRIGHT)}

    + + +
    +
    `; + }; + + // ── Boot ── + const mount = document.querySelector("footer.page-footer"); + if (!mount) return; + + fetch(CFG.FOOTER_DATA_URL) + .then((r) => { + if (!r.ok) throw new Error("HTTP " + r.status); + return r.json(); + }) + .then((data) => { + mount.innerHTML = renderFooter(data); + }) + .catch((err) => { + console.error("[footer] failed to load", CFG.FOOTER_DATA_URL, err); + }); +})(); diff --git a/assets/js/hero.js b/assets/js/hero.js new file mode 100644 index 0000000..59f6455 --- /dev/null +++ b/assets/js/hero.js @@ -0,0 +1,337 @@ +document.addEventListener("DOMContentLoaded", () => { + // Fix double H1: demote hidden Magento page-title h1 to

    + const magH1 = document.querySelector(".page-title-wrapper h1"); + if (magH1) { + const p = document.createElement("p"); + p.className = magH1.className; + p.innerHTML = magH1.innerHTML; + magH1.parentNode.replaceChild(p, magH1); + } + + // Hamburger menu toggle + const hamburgerBtn = document.querySelector(".hamburger-btn"); + const navMenu = document.querySelector(".nav-links"); + const navBackdrop = document.getElementById("nav-backdrop"); + + function closeNavMenu() { + navMenu.classList.remove("open"); + hamburgerBtn.classList.remove("open"); + hamburgerBtn.setAttribute("aria-expanded", "false"); + if (navBackdrop) navBackdrop.classList.remove("open"); + } + + if (hamburgerBtn && navMenu) { + hamburgerBtn.addEventListener("click", () => { + const isOpen = navMenu.classList.toggle("open"); + hamburgerBtn.classList.toggle("open", isOpen); + hamburgerBtn.setAttribute("aria-expanded", String(isOpen)); + if (navBackdrop) navBackdrop.classList.toggle("open", isOpen); + }); + navMenu.querySelectorAll("a").forEach((a) => { + a.addEventListener("click", closeNavMenu); + }); + if (navBackdrop) navBackdrop.addEventListener("click", closeNavMenu); + } + + const sections = document.querySelectorAll(".section"); + const navLinks = document.querySelectorAll(".nav-links a"); + const scrollIndicator = document.querySelector(".scroll-indicator"); + const heroInput = document.getElementById("hero-input"); + const typewriterEl = document.getElementById("typewriter-title"); + + // Multi-stage Typewriter Sequence + const typeStrings = [ + "Network hardware sourcing made simple", + "for every site", + "for every need", + "for every environment", + ]; + + async function runTypewriter() { + if (!typewriterEl) return; + + async function typeInto(element, text, speed) { + element.classList.add("typing-cursor"); + for (const char of text) { + element.textContent += char; + await new Promise((r) => setTimeout(r, speed)); + } + element.classList.remove("typing-cursor"); + } + + async function fadeStep() { + typewriterEl.style.opacity = "0"; + await new Promise((r) => setTimeout(r, 600)); + typewriterEl.innerHTML = ""; + typewriterEl.style.opacity = "1"; + await new Promise((r) => setTimeout(r, 200)); + } + + // Delay for server animation + await new Promise((r) => setTimeout(r, 3500)); + + // -- Text Phases -- + for (let i = 0; i < typeStrings.length; i++) { + const span = document.createElement("span"); + typewriterEl.appendChild(span); + await typeInto(span, typeStrings[i], 45); + + await new Promise((r) => setTimeout(r, 1200)); + await fadeStep(); + } + + // -- FINAL PHASE: BRAND LOGO -- + const brandBox = document.createElement("div"); + brandBox.style.display = "flex"; + brandBox.style.flexDirection = "column"; + brandBox.style.alignItems = "center"; + brandBox.style.gap = "15px"; + brandBox.style.opacity = "0"; // Start invisible + brandBox.style.transition = "opacity 0.6s ease-out"; + + const brandImg = document.createElement("img"); + brandImg.src = window.PROLOGY_CONFIG.LOGO_SRC; + brandImg.style.height = "80px"; + brandImg.style.width = "auto"; + brandImg.style.filter = "none"; // Logo full màu + + const finalTag = document.createElement("div"); + finalTag.style.fontSize = "1.6rem"; + finalTag.style.fontWeight = "600"; + finalTag.style.color = "var(--primary)"; + finalTag.style.letterSpacing = "0.15em"; + finalTag.style.textTransform = "uppercase"; + + brandBox.appendChild(brandImg); + brandBox.appendChild(finalTag); + typewriterEl.appendChild(brandBox); + + // 1. Kick off Logo Fade-in + setTimeout(() => { + brandBox.style.opacity = "1"; + }, 200); + await new Promise((r) => setTimeout(r, 1000)); + + // 2. Type the final tagline + await typeInto(finalTag, "Your Network Hardware Partner", 50); + + // 3. Wait a moment so user can read it, then fade out the tagline/logo + await new Promise((r) => setTimeout(r, 1500)); + brandBox.style.opacity = "0"; + + // 4. Wait for fade out, hide it, and show the eBay Banner + await new Promise((r) => setTimeout(r, 600)); + brandBox.style.display = "none"; + + const ebayBanner = document.getElementById("hero-ebay-integrated"); + if (ebayBanner) { + // Typewriter xong hẳn — giờ mới hide wrapper và show banner + const wrapper = document.querySelector(".hero-animation-wrapper"); + if (wrapper) wrapper.style.display = "none"; + ebayBanner.classList.add("visible"); + } + } + + runTypewriter(); + + // Đã hủy bỏ bộ hẹn giờ auto-focus ở đây. + // Việc auto-focus sau 19s khiến trình duyệt tự động cuộn giật ngược lên đầu trang nếu user đang đọc ở dưới. + + // Switch between Source (Buy) and Sell Modes + window.switchTab = function (mode) { + const buySection = document.getElementById("buy-section"); + const sellSection = document.getElementById("sell-section"); + const tabs = document.querySelectorAll(".search-tab"); + + // Toggle tabs + tabs.forEach((tab) => { + tab.classList.toggle( + "active", + tab.textContent.toLowerCase().includes(mode), + ); + }); + + // Toggle sections with a small fade + if (mode === "buy") { + sellSection.style.display = "none"; + buySection.style.display = "block"; + document.getElementById("hero-input").focus(); + } else { + buySection.style.display = "none"; + sellSection.style.display = "block"; + document.getElementById("sell-email-init").focus(); + } + }; + + let isScrolling = false; + let currentSectionIndex = 0; + + function updateUI(index) { + currentSectionIndex = index; + const currentSection = sections[index]; + const id = currentSection.getAttribute("id"); + + // Update Top Nav based on href matches, not raw index parity + navLinks.forEach((link) => { + link.classList.remove("active", "past"); + const targetId = link.getAttribute("href"); + + if (targetId === `#${id}`) { + link.classList.add("active"); + } else if (id === "warehouse" && targetId === "#quality") { + link.classList.add("active"); + } + }); + + // Toggle light color for scroll indicator on dark sections (1, 3, 5) + if (scrollIndicator) { + if (index % 2 !== 0) { + scrollIndicator.classList.add("light"); + } else { + scrollIndicator.classList.remove("light"); + } + } + + // Hide Scroll Indicator on last page + if (scrollIndicator) { + if (index === sections.length - 1) { + scrollIndicator.style.opacity = "0"; + } else { + scrollIndicator.style.opacity = "1"; + } + } + } + + // Logic cuộn tự động đã được chuyển qua CSS scroll-snap để tối ưu hiệu năng và tương thích màn hình + + function scrollToSection(index) { + isScrolling = true; + updateUI(index); + sections[index].scrollIntoView({ behavior: "smooth" }); + + setTimeout(() => { + isScrolling = false; + }, 800); // Wait for animation to finish + } + + // ============ SECTION OBSERVER ============ + const observerOptions = { + threshold: 0.5, + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const id = entry.target.getAttribute("id"); + const index = Array.from(sections).indexOf(entry.target); + + // Update internal index for wheel/space navigation + if (!isScrolling) currentSectionIndex = index; + + // Update Top Nav + navLinks.forEach((link) => { + link.classList.remove("active"); + const targetId = link.getAttribute("href"); + + if (targetId === `#${id}`) { + link.classList.add("active"); + } + // Special case: Keep 'Why Us' highlighted when inside Global Logistics + if (id === "warehouse" && targetId === "#quality") { + link.classList.add("active"); + } + }); + + entry.target.classList.add("visible"); + } + }); + }, observerOptions); + + sections.forEach((section) => observer.observe(section)); + + // ============ SMOOTH SCROLL (Navbar) ============ + document.querySelectorAll('a[href^="#"]').forEach((anchor) => { + anchor.addEventListener("click", function (e) { + e.preventDefault(); + const targetId = this.getAttribute("href"); + const target = document.querySelector(targetId); + if (target) { + const index = Array.from(sections).indexOf(target); + if (index !== -1) scrollToSection(index); + } + }); + }); + + // ============ ANIMATE PORT SEQUENCE ============ + const switchPanel = document.getElementById("animated-switch-panel"); + if (switchPanel) { + const totalColumns = 24; + const totalRows = 2; + + for (let r = 0; r < totalRows; r++) { + const rowDiv = document.createElement("div"); + rowDiv.className = "port-row"; + + for (let c = 0; c < totalColumns; c++) { + const portDiv = document.createElement("div"); + + // Randomly decide if this port gets a cable ( ~40% chance ) + // EXCLUDE Port 22 of Bottom Row (r=1, c=21) for the master cable + if (Math.random() < 0.4 && !(r === 1 && c === 21)) { + portDiv.className = "port-front active-port"; + // Random drop-in delay between 0 and 2.5 seconds + const plugDelay = Math.random() * 2.5; + portDiv.style.setProperty("--delay", `${plugDelay}s`); + + portDiv.innerHTML = ` +

    +
    +
    +
    +
    + `; + } else { + // Inactive port just has the base shell and an unlit LED + portDiv.className = "port-front"; + portDiv.innerHTML = `
    `; + } + + rowDiv.appendChild(portDiv); + } + switchPanel.appendChild(rowDiv); + } + } + + // ============ QUALITY SLIDER LOGIC ============ + let currentQSlide = 0; + const qSlides = document.querySelectorAll(".q-slide"); + const qDots = document.querySelectorAll(".dot"); + let qInterval; + + window.setQSlide = function (index) { + if (index === currentQSlide) return; + + qSlides[currentQSlide].classList.remove("active"); + qDots[currentQSlide].classList.remove("active"); + + currentQSlide = index; + + qSlides[currentQSlide].classList.add("active"); + qDots[currentQSlide].classList.add("active"); + + // Reset interval on manual click + clearInterval(qInterval); + startQAutoPlay(); + }; + + function startQAutoPlay() { + qInterval = setInterval(() => { + let next = (currentQSlide + 1) % qSlides.length; + setQSlide(next); + }, 5000); + } + + if (qSlides.length > 0) { + startQAutoPlay(); + } +}); diff --git a/assets/js/modals.js b/assets/js/modals.js new file mode 100644 index 0000000..327687f --- /dev/null +++ b/assets/js/modals.js @@ -0,0 +1,507 @@ +(() => { + // ── API Config ── + const API_ENDPOINT = window.PROLOGY_CONFIG.API_URL; + + // ── Shared submit function ── + async function submitToAPI(payload, btnEl, onSuccess) { + btnEl.disabled = true; + const origHTML = btnEl.innerHTML; + btnEl.innerHTML = "Sending..."; + + const restore = () => { + btnEl.innerHTML = origHTML; + btnEl.disabled = false; + }; + + try { + const res = await fetch(API_ENDPOINT, { + method: "POST", + headers: { + "Content-Type": "application/json", + "X-Requested-With": "XMLHttpRequest", + }, + body: JSON.stringify({ + ...payload, + source: window.location.href, + ts: Date.now(), + nonce: Math.random().toString(36).slice(2), + }), + }); + + const data = await res.json(); + + if (res.ok && data.ok) { + onSuccess(restore); + } else { + const msg = + data.error || "Something went wrong. Please try again."; + btnEl.innerHTML = "⚠ " + msg + ""; + setTimeout(restore, 3000); + } + } catch (e) { + btnEl.innerHTML = + "⚠ Network error. Please try again."; + setTimeout(restore, 3000); + } + } + + // ── Shared Shadow DOM CSS ── + const MODAL_CSS = ` + :host { display: none; } + :host(.open) { display: block; } + + .overlay { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.75); + backdrop-filter: blur(12px); + z-index: 9999; + display: flex; + align-items: flex-start; + justify-content: center; + padding: 20px; + overflow-y: auto; + } + .box { + background: linear-gradient(145deg, #2A3B54, #1E293B); + border: 1px solid rgba(255,255,255,0.15); + border-radius: 24px; + width: 100%; + max-width: 580px; + max-height: calc(100vh - 40px); + overflow-y: auto; + padding: 36px; + margin: auto; + position: relative; + box-shadow: 0 40px 100px rgba(0,0,0,0.8); + font-family: 'Plus Jakarta Sans', sans-serif; + color: white; + box-sizing: border-box; + } + .badge { + display: inline-block; + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + color: #1A73E8; + background: rgba(26,115,232,0.15); + padding: 4px 12px; + border-radius: 4px; + margin-bottom: 10px; + } + h3 { font-size: 1.75rem; font-weight: 800; margin: 0 0 8px; color: white; } + .intro { font-size: 0.95rem; color: #94A3B8; line-height: 1.6; margin-bottom: 28px; } + .close { + position: absolute; top: 20px; right: 20px; + background: none; border: none; color: #94A3B8; + font-size: 1.4rem; cursor: pointer; line-height: 1; + padding: 4px 8px; border-radius: 6px; transition: color 0.2s; + } + .close:hover { color: white; } + .field { margin-bottom: 20px; } + .field-row { display: flex; gap: 16px; margin-bottom: 20px; } + .field-row .field { flex: 1; margin-bottom: 0; } + label { + display: block; font-size: 0.85rem; font-weight: 600; + color: #E2E8F0; margin-bottom: 8px; + } + .req { color: #f87171; font-size: 0.8em; margin-left: 2px; font-weight: 700; } + input, textarea, select { + width: 100%; box-sizing: border-box; + background: rgba(255,255,255,0.06); + border: 1px solid rgba(255,255,255,0.12); + border-radius: 12px; + padding: 12px 16px; + color: white; + font-family: 'Plus Jakarta Sans', sans-serif; + font-size: 0.95rem; + outline: none; + transition: border-color 0.2s; + -webkit-appearance: none; + appearance: none; + } + input:focus, textarea:focus, select:focus { + border-color: #1A73E8; + background: rgba(255,255,255,0.09); + } + input::placeholder, textarea::placeholder { color: #64748B; } + textarea { min-height: 120px; resize: vertical; } + select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394A3B8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 14px center; + padding-right: 36px; + cursor: pointer; + } + select option { background: #1E293B; color: white; } + .btn-submit { + width: 100%; padding: 16px; + background: #1A73E8; color: white; + border: none; border-radius: 14px; + font-size: 1rem; font-weight: 700; + cursor: pointer; display: flex; + align-items: center; justify-content: center; + gap: 10px; transition: background 0.2s, transform 0.2s; + font-family: 'Plus Jakarta Sans', sans-serif; + margin-top: 8px; + } + .btn-submit:hover { background: #174ea6; transform: translateY(-2px); } + .btn-submit svg { flex-shrink: 0; } + .btn-submit:disabled { + opacity: 0.7; + cursor: not-allowed; + transform: none !important; + } + `; + + const ARROW_SVG = ``; + + // ── Base class ── + class ProloModal extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + } + + open(prefillEmail = "") { + this.classList.add("open"); + document.body.style.overflow = "hidden"; + if (prefillEmail) { + const emailInput = this.shadowRoot.querySelector( + 'input[type="email"]', + ); + if (emailInput) emailInput.value = prefillEmail; + } + requestAnimationFrame(() => { + const first = this.shadowRoot.querySelector("input, textarea"); + if (first) first.focus(); + }); + } + + close() { + this.classList.remove("open"); + document.body.style.overflow = ""; + const form = this.shadowRoot.querySelector("form"); + if (form) form.reset(); + } + + _bindClose() { + this.shadowRoot + .querySelector(".close") + .addEventListener("click", () => this.close()); + this.shadowRoot + .querySelector(".overlay") + .addEventListener("click", (e) => { + if (e.target.classList.contains("overlay")) this.close(); + }); + document.addEventListener("keydown", (e) => { + if (e.key === "Escape" && this.classList.contains("open")) + this.close(); + }); + } + } + + // ── 1. Sell / Valuation Modal ── + class PrologySellModal extends ProloModal { + connectedCallback() { + this.shadowRoot.innerHTML = ` + +
    +
    + + Asset Recovery +

    Get a Valuation

    +

    Tell us what hardware you have. Our team will provide a competitive buy-back offer within 4 business hours.

    +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    +
    +
    `; + this._bindClose(); + this.shadowRoot + .querySelector("form") + .addEventListener("submit", (e) => { + e.preventDefault(); + const sr = this.shadowRoot; + const email = sr.querySelector('[name="email"]').value; + if (!email) return; + const inventory = sr.querySelector('[name="inventory"]').value; + const condition = sr.querySelector('[name="condition"]').value; + const btn = sr.querySelector(".btn-submit"); + submitToAPI( + { + email, + message: `[Asset Recovery]\nCondition: ${condition}\n\n${inventory || "(no inventory listed)"}`, + channel: "sell", + }, + btn, + (restore) => { + btn.innerHTML = "✓ Request Sent!"; + setTimeout(() => { + this.close(); + restore(); + }, 1800); + }, + ); + }); + } + } + + // ── 2. Source / Quote Modal ── + class PrologySourceModal extends ProloModal { + connectedCallback() { + this.shadowRoot.innerHTML = ` + +
    +
    + + Hardware Sourcing +

    Request a Quote

    +

    Looking for specific equipment? We source authorized and refurbished Cisco, HP, and more.

    +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    +
    +
    `; + this._bindClose(); + this.shadowRoot + .querySelector("form") + .addEventListener("submit", (e) => { + e.preventDefault(); + const sr = this.shadowRoot; + const email = sr.querySelector('[name="email"]').value; + if (!email) return; + const parts = sr.querySelector('[name="parts"]').value; + const timing = sr.querySelector('[name="timing"]').value; + const btn = sr.querySelector(".btn-submit"); + submitToAPI( + { + email, + message: `[Hardware Sourcing]\nTiming: ${timing}\n\n${parts || "(no parts listed)"}`, + channel: "source", + }, + btn, + (restore) => { + btn.innerHTML = "✓ Request Sent!"; + setTimeout(() => { + this.close(); + restore(); + }, 1800); + }, + ); + }); + } + } + + // ── 3. Quote Modal (Request a Quote from Who We Serve) ── + class PrologyQuoteModal extends ProloModal { + connectedCallback() { + this.shadowRoot.innerHTML = ` + +
    +
    + + IT Procurement +

    Request a Quote

    +

    Please provide details about your project or hardware requirements. Our team will verify stock and get back to you within 24 hours.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    +
    + + +
    + +
    +
    +
    `; + this._bindClose(); + this.shadowRoot + .querySelector("form") + .addEventListener("submit", (e) => { + e.preventDefault(); + const sr = this.shadowRoot; + const name = sr.querySelector('[name="name"]').value; + const email = sr.querySelector('[name="email"]').value; + const phone = sr.querySelector('[name="phone"]').value; + const company = sr.querySelector('[name="company"]').value; + const requirements = sr.querySelector( + '[name="requirements"]', + ).value; + const destination = sr.querySelector( + '[name="destination"]', + ).value; + const btn = sr.querySelector(".btn-submit"); + submitToAPI( + { + name, + email, + phone, + message: `[Quote Request]\nCompany: ${company || "N/A"}\nDestination: ${destination || "N/A"}\n\n${requirements}`, + channel: "quote", + }, + btn, + (restore) => { + btn.innerHTML = "✓ Request Sent!"; + setTimeout(() => { + this.close(); + restore(); + }, 1800); + }, + ); + }); + } + } + + // ── 4. Enquire Modal (Gov & Corp) ── + class PrologyEnquireModal extends ProloModal { + connectedCallback() { + this.shadowRoot.innerHTML = ` + +
    +
    + + Government & Corporate +

    Corporate Enquiry

    +

    Get in touch with our specialized team to establish customized procurement workflows for your organization.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + +
    +
    +
    `; + this._bindClose(); + this.shadowRoot + .querySelector("form") + .addEventListener("submit", (e) => { + e.preventDefault(); + const sr = this.shadowRoot; + const name = sr.querySelector('[name="name"]').value; + const email = sr.querySelector('[name="email"]').value; + const phone = sr.querySelector('[name="phone"]').value; + const org = sr.querySelector('[name="org"]').value; + const details = sr.querySelector('[name="details"]').value; + const btn = sr.querySelector(".btn-submit"); + submitToAPI( + { + name, + email, + phone, + message: `[Corporate Enquiry]\nOrganization: ${org}\n\n${details}`, + channel: "enquire", + }, + btn, + (restore) => { + btn.innerHTML = "✓ Enquiry Sent!"; + setTimeout(() => { + this.close(); + restore(); + }, 1800); + }, + ); + }); + } + } + + customElements.define("prology-sell-modal", PrologySellModal); + customElements.define("prology-source-modal", PrologySourceModal); + customElements.define("prology-quote-modal", PrologyQuoteModal); + customElements.define("prology-enquire-modal", PrologyEnquireModal); + + // ── Global API (backward compatible with onclick calls) ── + window.openValuationModal = (email = "") => + document.getElementById("wc-sell-modal").open(email); + window.openSourcingModal = () => + document.getElementById("wc-source-modal").open(); + window.openQuoteModal = () => + document.getElementById("wc-quote-modal").open(); + window.openEnquireModal = () => + document.getElementById("wc-enquire-modal").open(); + + // goToSellStep2: pass email from capsule input into sell modal + // ── Store picker modal ── + window.openStoreModal = function () { + const overlay = document.getElementById("store-modal-overlay"); + if (overlay) overlay.classList.add("open"); + }; + window.closeStoreModal = function () { + const overlay = document.getElementById("store-modal-overlay"); + if (overlay) overlay.classList.remove("open"); + }; + document + .getElementById("store-modal-overlay") + .addEventListener("click", function (e) { + if (e.target === this) closeStoreModal(); + }); + document.addEventListener("keydown", function (e) { + if (e.key === "Escape") closeStoreModal(); + }); + + window.goToSellStep2 = function () { + const emailInput = document.getElementById("sell-email-init"); + const email = emailInput ? emailInput.value : ""; + if (!email || !email.includes("@")) { + alert("Please input a valid email address."); + return; + } + window.openValuationModal(email); + }; +})(); diff --git a/index.html b/index.html new file mode 100644 index 0000000..2b81eeb --- /dev/null +++ b/index.html @@ -0,0 +1,1097 @@ + + + + + + Prology IT | Enterprise Network Infrastructure Brokerage + + + + + + + + +
    +
    +

    Scroll / Space

    +
    + + + + + + +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    + +
    BLADE
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    1
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    2
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    3
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    4
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    5
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    6
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    7
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    8
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    PSU 1
    +
    +
    +
    +
    +
    PSU 2
    +
    +
    +
    +
    +
    PSU 3
    +
    +
    +
    +
    +
    PSU 4
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +

    +
    +
    +
    + + +
    + + Prology Store + +
    + +
    + +
    + + +
    + + +
    +
    +
    + + + + +
    + + +
    +
    + + + +
    + + +
    +
    + 15+ + Years of Experience +
    +
    + 45+ + Countries Served +
    +
    + 100k+ + Units Stocked +
    +
    + USA & AUS + Warehouses +
    +
    +
    +
    + + +
    +
    +
    + Inventory Spectrum +

    + Product Categories +

    +

    + Explore our comprehensive spectrum of enterprise networking + infrastructure from the world's leading manufacturers. +

    +
    + +
    +
    + + + + + +

    Routers

    +

    + Edge, Core, and Distribution backbone hardware for seamless + connectivity. +

    +
    +
    + + + + + + +

    Switches

    +

    + Managed Layer 2/3 switches with VLAN and high-speed fiber + capacity. +

    +
    +
    + + + + + +

    Wireless Access

    +

    + High-density Wi-Fi Access Points (WAPs) with centralized + management. +

    +
    +
    + + +

    Security Appliances

    +

    + Next-gen firewalls, VPN gateways, and intrusion prevention + systems. +

    +
    +
    + + + + + +

    Load Balancers

    +

    + Traffic distribution solutions to maximize performance and + reliability. +

    +
    +
    + + + + +

    WAN Access

    +

    + Modems and WAN devices for stable fiber and ethernet ISP + connectivity. +

    +
    +
    + + + +

    Network Mgmt

    +

    + Centralized controllers for configuring and monitoring + infrastructure. +

    +
    + +
    +

    Ready to Procure?

    +

    Access our real-time inventory and competitive trade pricing.

    + View Shop +
    +
    +
    +
    + + +
    +
    +
    + Our Competitive Edge +

    Why Choose Prology?

    +

    + Reliable sourcing, fast logistics, and competitive pricing — for + enterprises across Australia and the United States. +

    +
    + +
    + +
    +
    + + + + + +
    +

    Dual Warehouse: AU & US

    +

    Stock available in both Australia and California.

    +
    + +
    +
    + + + + +
    +

    Strong Sourcing Network

    +

    We can source hard-to-find and discontinued items.

    +
    + +
    +
    + + + + + + +
    +

    Faster, Smarter Logistics

    +

    Optimised shipping between AU & US to reduce lead time.

    +
    + +
    +
    + + + + +
    +

    Flexible for Business Orders

    +

    Bulk pricing, custom sourcing, ongoing supply support.

    +
    +
    +
    +
    + + +
    +
    +
    +

    Built for Every Scale

    +

    + From simple setups to large-scale supply — flexible to match your + needs. +

    +
    + +
    +
    +
    + + + + + + +
    +

    Getting Started

    +

    Reliable hardware, fast delivery, straightforward purchasing.

    +
    +
    +
    + + + + +
    +

    Running Projects

    +

    + Fast sourcing and access to wider inventory when local stock is + limited. +

    +
    +
    +
    + + + + +
    +

    Growing Operations

    +

    + Ongoing supply support for upgrades, expansions, and maintenance. +

    +
    +
    +
    + + + + + +
    +

    Large-Scale Procurement

    +

    + Support for bulk orders, complex requirements, and consistent + supply. +

    +
    +
    + +
    + + +
    +
    +
    + + +
    +
    +
    +
    +
    + Coat of arms of the Commonwealth of Australia +
    +

    Government & Corporate Orders

    +

    + Supporting purchase orders and specialized procurement + workflows for public and private organizations. +

    +
    +
    +
    +
    Purchase Orders Accepted
    +
    Procurement Support
    +
    Flexible Payment Options
    +
    + +
    + +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +

    Source IT Hardware

    +

    + Procure authentic Cisco, HP & Toshiba equipment. Delivery + worldwide. +

    + +
    +
    +

    Sell Us Your Assets

    +

    + Get competitive buy-back offers for your decommissioned network + gear. +

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + +