| |
|
|
| .homepage { |
| min-height: 100vh; |
| position: relative; |
| overflow-x: hidden; |
| background: #fafafa; |
| color: #1a1a1a; |
| } |
|
|
| |
| .homepage-background { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: 0; |
| overflow: hidden; |
| } |
|
|
| .gradient-orb { |
| position: absolute; |
| width: 600px; |
| height: 600px; |
| border-radius: 50%; |
| background: radial-gradient(circle, rgba(179, 122, 76, 0.15) 0%, rgba(179, 122, 76, 0.05) 50%, transparent 70%); |
| filter: blur(60px); |
| transform: translate(-50%, -50%); |
| transition: all 0.3s ease-out; |
| pointer-events: none; |
| } |
|
|
| .gradient-overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient( |
| 180deg, |
| rgba(250, 250, 250, 0.8) 0%, |
| rgba(250, 250, 250, 0.95) 50%, |
| rgba(250, 250, 250, 1) 100% |
| ); |
| pointer-events: none; |
| } |
|
|
| .singapore-background { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-image: url('https://images.unsplash.com/photo-1525625293386-3f8f99389edd?w=1920&q=80'); |
| background-size: cover; |
| background-position: center; |
| background-repeat: no-repeat; |
| opacity: 0.08; |
| filter: blur(2px); |
| pointer-events: none; |
| z-index: 0; |
| } |
|
|
| |
| .homepage-nav { |
| position: relative; |
| z-index: 100; |
| padding: 24px 48px; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| background: rgba(255, 255, 255, 0.8); |
| backdrop-filter: blur(10px); |
| border-bottom: 1px solid rgba(0, 0, 0, 0.05); |
| } |
|
|
| .nav-container { |
| width: 100%; |
| max-width: 1200px; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
|
|
| .nav-logo { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| font-size: 18px; |
| font-weight: 600; |
| color: #1a1a1a; |
| letter-spacing: -0.02em; |
| } |
|
|
| .nav-logo-image { |
| height: 48px; |
| width: auto; |
| object-fit: contain; |
| } |
|
|
| .logo-text { |
| background: linear-gradient(135deg, #B37A4C 0%, #8B6F47 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .nav-menu { |
| display: flex; |
| align-items: center; |
| gap: 32px; |
| } |
|
|
| .nav-item { |
| background: none; |
| border: none; |
| color: #666; |
| font-size: 14px; |
| font-weight: 500; |
| cursor: pointer; |
| padding: 8px 12px; |
| border-radius: 6px; |
| transition: all 0.2s ease; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| text-decoration: none; |
| } |
|
|
| .nav-item:hover { |
| color: #1a1a1a; |
| background: rgba(0, 0, 0, 0.03); |
| } |
|
|
| .nav-dropdown { |
| position: relative; |
| } |
|
|
| .dropdown-menu-home { |
| position: absolute; |
| top: calc(100% + 8px); |
| left: 0; |
| background: white; |
| border: 1px solid rgba(0, 0, 0, 0.1); |
| border-radius: 12px; |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); |
| min-width: 280px; |
| padding: 8px; |
| z-index: 1000; |
| animation: fadeInDown 0.2s ease; |
| } |
|
|
| @keyframes fadeInDown { |
| from { |
| opacity: 0; |
| transform: translateY(-8px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .dropdown-item { |
| width: 100%; |
| background: none; |
| border: none; |
| padding: 12px 16px; |
| text-align: left; |
| cursor: pointer; |
| border-radius: 8px; |
| transition: all 0.2s ease; |
| } |
|
|
| .dropdown-item:hover { |
| background: rgba(179, 122, 76, 0.08); |
| } |
|
|
| .dropdown-item-content { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| .dropdown-item-title { |
| font-size: 14px; |
| font-weight: 600; |
| color: #1a1a1a; |
| } |
|
|
| .dropdown-item-desc { |
| font-size: 12px; |
| color: #666; |
| line-height: 1.4; |
| } |
|
|
| |
| .homepage-main { |
| position: relative; |
| z-index: 10; |
| padding: 80px 48px 120px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| min-height: calc(100vh - 200px); |
| overflow: visible; |
| } |
|
|
| .hero-content { |
| max-width: 800px; |
| text-align: center; |
| animation: fadeInUp 0.8s ease; |
| overflow: visible; |
| padding-bottom: 16px; |
| } |
|
|
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .hero-title { |
| font-size: 64px; |
| font-weight: 700; |
| line-height: 1.2; |
| margin-bottom: 32px; |
| letter-spacing: -0.03em; |
| color: #1a1a1a; |
| overflow: visible; |
| padding-bottom: 4px; |
| } |
|
|
| .hero-subtitle { |
| display: block; |
| font-size: 48px; |
| font-weight: 400; |
| color: #666; |
| margin-top: 12px; |
| margin-bottom: 8px; |
| padding-bottom: 8px; |
| background: linear-gradient(135deg, #B37A4C 0%, #8B6F47 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| overflow: visible; |
| line-height: 1.3; |
| } |
|
|
| .hero-tagline { |
| font-size: 20px; |
| font-weight: 500; |
| line-height: 1.5; |
| color: #B37A4C; |
| margin-bottom: 16px; |
| font-style: italic; |
| } |
|
|
| .hero-description { |
| font-size: 18px; |
| line-height: 1.7; |
| color: #666; |
| margin-bottom: 48px; |
| max-width: 800px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
|
|
| .hero-description strong { |
| color: #1a1a1a; |
| font-weight: 600; |
| } |
|
|
| |
| .hero-features { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 24px; |
| margin-bottom: 48px; |
| width: 100%; |
| max-width: 800px; |
| } |
|
|
| .feature-card { |
| background: white; |
| border: 1px solid rgba(0, 0, 0, 0.08); |
| border-radius: 16px; |
| padding: 24px; |
| text-align: center; |
| transition: all 0.3s ease; |
| cursor: default; |
| } |
|
|
| .feature-card:hover { |
| transform: translateY(-4px); |
| box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); |
| border-color: rgba(179, 122, 76, 0.2); |
| } |
|
|
| .feature-icon { |
| font-size: 40px; |
| margin-bottom: 12px; |
| display: block; |
| animation: float 3s ease-in-out infinite; |
| } |
|
|
| @keyframes float { |
| 0%, 100% { |
| transform: translateY(0); |
| } |
| 50% { |
| transform: translateY(-10px); |
| } |
| } |
|
|
| .feature-card:nth-child(2) .feature-icon { |
| animation-delay: 0.5s; |
| } |
|
|
| .feature-card:nth-child(3) .feature-icon { |
| animation-delay: 1s; |
| } |
|
|
| .feature-content h3 { |
| font-size: 16px; |
| font-weight: 600; |
| color: #1a1a1a; |
| margin-bottom: 8px; |
| } |
|
|
| .feature-content p { |
| font-size: 13px; |
| color: #666; |
| line-height: 1.5; |
| } |
|
|
| |
| .hero-cta { |
| display: flex; |
| gap: 16px; |
| justify-content: center; |
| align-items: center; |
| flex-wrap: wrap; |
| } |
|
|
| .cta-primary { |
| background: linear-gradient(135deg, #B37A4C 0%, #9D6B42 100%); |
| color: white; |
| border: none; |
| padding: 14px 32px; |
| font-size: 16px; |
| font-weight: 600; |
| border-radius: 12px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| box-shadow: 0 4px 12px rgba(179, 122, 76, 0.3); |
| } |
|
|
| .cta-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 20px rgba(179, 122, 76, 0.4); |
| } |
|
|
| .cta-primary:active { |
| transform: translateY(0); |
| } |
|
|
| .cta-secondary { |
| background: white; |
| color: #1a1a1a; |
| border: 1px solid rgba(0, 0, 0, 0.1); |
| padding: 14px 32px; |
| font-size: 16px; |
| font-weight: 600; |
| border-radius: 12px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
|
|
| .cta-secondary:hover { |
| background: rgba(0, 0, 0, 0.02); |
| border-color: rgba(0, 0, 0, 0.15); |
| transform: translateY(-2px); |
| } |
|
|
| |
| .floating-elements { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| z-index: 1; |
| overflow: hidden; |
| } |
|
|
| .floating-circle { |
| position: absolute; |
| border-radius: 50%; |
| background: linear-gradient(135deg, rgba(179, 122, 76, 0.1) 0%, rgba(179, 122, 76, 0.05) 100%); |
| filter: blur(40px); |
| animation: floatCircle 20s ease-in-out infinite; |
| } |
|
|
| .circle-1 { |
| width: 300px; |
| height: 300px; |
| top: 10%; |
| left: 10%; |
| animation-delay: 0s; |
| } |
|
|
| .circle-2 { |
| width: 400px; |
| height: 400px; |
| top: 60%; |
| right: 15%; |
| animation-delay: 5s; |
| } |
|
|
| .circle-3 { |
| width: 250px; |
| height: 250px; |
| bottom: 20%; |
| left: 50%; |
| animation-delay: 10s; |
| } |
|
|
| @keyframes floatCircle { |
| 0%, 100% { |
| transform: translate(0, 0) scale(1); |
| opacity: 0.6; |
| } |
| 33% { |
| transform: translate(30px, -30px) scale(1.1); |
| opacity: 0.8; |
| } |
| 66% { |
| transform: translate(-20px, 20px) scale(0.9); |
| opacity: 0.5; |
| } |
| } |
|
|
| |
| .homepage-footer { |
| position: relative; |
| z-index: 10; |
| padding: 32px 48px; |
| text-align: center; |
| background: rgba(255, 255, 255, 0.8); |
| backdrop-filter: blur(10px); |
| border-top: 1px solid rgba(0, 0, 0, 0.05); |
| } |
|
|
| .footer-content { |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
|
|
| .footer-content p { |
| font-size: 14px; |
| color: #666; |
| margin: 4px 0; |
| } |
|
|
| .footer-muted { |
| font-size: 12px; |
| color: #999; |
| } |
|
|
| .footer-contact { |
| margin: 8px 0; |
| } |
|
|
| .footer-contact a { |
| color: #B37A4C; |
| text-decoration: none; |
| transition: color 0.2s ease; |
| } |
|
|
| .footer-contact a:hover { |
| color: #8B6F47; |
| text-decoration: underline; |
| } |
|
|
| .footer-copyright { |
| font-size: 12px; |
| color: #999; |
| margin-top: 8px; |
| } |
|
|
| |
| .about-section { |
| position: relative; |
| z-index: 10; |
| padding: 120px 48px; |
| background: rgba(255, 255, 255, 0.95); |
| backdrop-filter: blur(10px); |
| } |
|
|
| .about-container { |
| max-width: 1000px; |
| margin: 0 auto; |
| } |
|
|
| .about-content { |
| text-align: center; |
| } |
|
|
| .section-title { |
| font-size: 36px; |
| font-weight: 700; |
| color: #1a1a1a; |
| margin-bottom: 24px; |
| letter-spacing: -0.02em; |
| } |
|
|
| .section-description { |
| font-size: 18px; |
| line-height: 1.8; |
| color: #666; |
| max-width: 800px; |
| margin: 0 auto 32px; |
| } |
|
|
| .technology-components { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| gap: 32px; |
| margin-top: 48px; |
| text-align: left; |
| } |
|
|
| .tech-component { |
| background: white; |
| border: 1px solid rgba(0, 0, 0, 0.08); |
| border-radius: 16px; |
| padding: 32px; |
| transition: all 0.3s ease; |
| } |
|
|
| .tech-component:hover { |
| transform: translateY(-4px); |
| box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); |
| border-color: rgba(179, 122, 76, 0.2); |
| } |
|
|
| .tech-icon { |
| font-size: 48px; |
| margin-bottom: 16px; |
| display: block; |
| } |
|
|
| .tech-component h3 { |
| font-size: 22px; |
| font-weight: 600; |
| color: #1a1a1a; |
| margin-bottom: 12px; |
| } |
|
|
| .tech-desc { |
| font-size: 15px; |
| line-height: 1.8; |
| color: #666; |
| margin-bottom: 20px; |
| } |
|
|
| .tech-points { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| } |
|
|
| .tech-points li { |
| font-size: 14px; |
| line-height: 1.8; |
| color: #666; |
| margin-bottom: 10px; |
| padding-left: 24px; |
| position: relative; |
| } |
|
|
| .tech-points li:before { |
| content: "→"; |
| position: absolute; |
| left: 0; |
| color: #B37A4C; |
| font-weight: bold; |
| font-size: 16px; |
| } |
|
|
| .tech-points li:last-child { |
| margin-bottom: 0; |
| } |
|
|
| |
| .use-cases-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 24px; |
| margin-top: 48px; |
| text-align: left; |
| } |
|
|
| .use-case-card { |
| background: white; |
| border: 1px solid rgba(0, 0, 0, 0.08); |
| border-radius: 16px; |
| padding: 28px; |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .use-case-card::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 4px; |
| background: linear-gradient(90deg, #B37A4C 0%, #8B6F47 100%); |
| transform: scaleX(0); |
| transition: transform 0.3s ease; |
| } |
|
|
| .use-case-card:hover::before { |
| transform: scaleX(1); |
| } |
|
|
| .use-case-card:hover { |
| transform: translateY(-4px); |
| box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); |
| border-color: rgba(179, 122, 76, 0.2); |
| } |
|
|
| .use-case-icon { |
| font-size: 40px; |
| margin-bottom: 16px; |
| display: block; |
| } |
|
|
| .use-case-card h3 { |
| font-size: 20px; |
| font-weight: 600; |
| color: #1a1a1a; |
| margin-bottom: 12px; |
| } |
|
|
| .use-case-card p { |
| font-size: 15px; |
| line-height: 1.7; |
| color: #666; |
| margin: 0; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .homepage-nav { |
| padding: 20px 24px; |
| } |
|
|
| .nav-logo { |
| gap: 8px; |
| } |
|
|
| .nav-logo-image { |
| height: 36px; |
| } |
|
|
| .nav-logo .logo-text { |
| font-size: 16px; |
| } |
|
|
| .nav-menu { |
| gap: 16px; |
| } |
|
|
| .nav-item { |
| font-size: 13px; |
| padding: 6px 10px; |
| } |
|
|
| .homepage-main { |
| padding: 60px 24px 80px; |
| } |
|
|
| .hero-title { |
| font-size: 42px; |
| } |
|
|
| .hero-subtitle { |
| font-size: 32px; |
| } |
|
|
| .hero-description { |
| font-size: 16px; |
| margin-bottom: 32px; |
| } |
|
|
| .hero-features { |
| grid-template-columns: 1fr; |
| gap: 16px; |
| margin-bottom: 32px; |
| } |
|
|
| .hero-cta { |
| flex-direction: column; |
| width: 100%; |
| } |
|
|
| .cta-primary, |
| .cta-secondary { |
| width: 100%; |
| justify-content: center; |
| } |
|
|
| .dropdown-menu-home { |
| left: auto; |
| right: 0; |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| .hero-title { |
| font-size: 32px; |
| } |
|
|
| .hero-subtitle { |
| font-size: 24px; |
| } |
|
|
| .hero-description { |
| font-size: 15px; |
| } |
|
|
| .feature-card { |
| padding: 20px; |
| } |
|
|
| .about-section { |
| padding: 80px 24px; |
| } |
|
|
| .section-title { |
| font-size: 28px; |
| } |
|
|
| .section-description { |
| font-size: 16px; |
| } |
|
|
| .technology-components { |
| grid-template-columns: 1fr; |
| gap: 24px; |
| } |
|
|
| .use-cases-grid { |
| grid-template-columns: 1fr; |
| gap: 20px; |
| } |
|
|
| .use-case-card { |
| padding: 24px; |
| } |
| } |
|
|
|
|
