/* ============================================================================ YAI Home page — additional theme Save to: /var/www/yai/public/css/yai-home.css Then add to layouts/public.blade.php : ============================================================================ */ /* ---------- HERO ---------------------------------------------------------- */ .yai-hero { position: relative; min-height: 540px; background: linear-gradient(135deg, #1e3a8a 0%, #3b5bdb 50%, #1e3a8a 100%); color: #fff; overflow: hidden; } .yai-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(ellipse at 30% 80%, rgba(255,255,255,.06) 0%, transparent 50%), radial-gradient(ellipse at 70% 20%, rgba(255,255,255,.08) 0%, transparent 50%); pointer-events: none; } .yai-hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(30,58,138,.85) 0%, rgba(59,91,219,.6) 50%, rgba(30,58,138,.85) 100%); } .yai-hero-content { position: relative; z-index: 2; padding: 80px 0 100px; max-width: 720px; } .yai-hero-title { color: #fff; margin: 0 0 14px; line-height: 1.1; } .yai-hero-brand { display: block; font-size: clamp(48px, 7vw, 84px); font-weight: 800; letter-spacing: -.02em; text-shadow: 0 4px 20px rgba(0,0,0,.3); } .yai-hero-tag { display: block; font-size: clamp(28px, 4vw, 44px); font-weight: 600; color: rgba(255,255,255,.9); margin-top: 4px; } .yai-hero-sub { font-size: 18px; color: rgba(255,255,255,.85); margin-bottom: 30px; } .yai-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } .yai-btn-cta { padding: 14px 28px; font-weight: 600; border-radius: 10px; background: var(--yai-red); border-color: var(--yai-red); box-shadow: 0 4px 14px rgba(239,68,68,.35); } .yai-btn-cta:hover { background: var(--yai-red-dk); border-color: var(--yai-red-dk); } .yai-btn-cta-ghost { padding: 14px 28px; font-weight: 600; border-radius: 10px; border-width: 2px; } /* Decorative giant map-pin marker */ .yai-hero-pin { position: absolute; right: 8%; bottom: 12%; z-index: 1; font-size: 90px; color: rgba(255, 165, 0, .9); text-shadow: 0 20px 60px rgba(0,0,0,.4); line-height: 1; animation: yai-pin-float 4s ease-in-out infinite; pointer-events: none; } @keyframes yai-pin-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* Premium Grade badge */ .yai-hero-badge { position: absolute; left: 20px; bottom: 20px; z-index: 2; background: #000; color: #fff; padding: 8px 16px; border: 2px solid #fff; border-radius: 4px; font-size: 12px; letter-spacing: .1em; text-align: center; } .yai-hero-badge strong { display: block; font-size: 16px; color: var(--yai-red); font-weight: 800; } @media (max-width: 768px) { .yai-hero { min-height: 460px; } .yai-hero-pin { font-size: 60px; right: -20px; bottom: 4%; opacity: .5; } .yai-hero-content { padding: 50px 0 70px; } } /* ---------- SECTION TITLE ------------------------------------------------- */ .yai-section-title { font-size: 32px; font-weight: 800; color: var(--yai-blue); letter-spacing: -.02em; margin: 0 0 6px; } .yai-section-title + p { font-size: 16px; } /* ---------- STATS CARDS --------------------------------------------------- */ .yai-stat-card { background: var(--yai-card); border: 1px solid var(--yai-border); border-radius: 16px; padding: 28px 24px; text-align: center; transition: transform .15s, box-shadow .15s; height: 100%; } .yai-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); } .yai-stat-number { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.03em; } .yai-stat-number span { font-size: 36px; margin-left: 2px; color: inherit; } .yai-stat-unit { font-size: 18px; font-weight: 600; color: #6b7280; margin-top: 6px; } .yai-stat-label { font-size: 14px; color: #374151; margin-top: 10px; } .yai-stat-en { font-size: 11px; color: #9ca3af; letter-spacing: .1em; margin-top: 2px; } /* ---------- ABOUT SECTION ------------------------------------------------- */ .yai-about-section { background: var(--yai-card); border-top: 1px solid var(--yai-border); border-bottom: 1px solid var(--yai-border); } .yai-about-photo { border-radius: 16px; height: 280px; display: flex; align-items: center; justify-content: center; overflow: hidden; background-size: cover; background-position: center; } /* ---------- PROMO CARD ---------------------------------------------------- */ .yai-promo-card { background: linear-gradient(135deg, #6d28d9 0%, #db2777 100%); color: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 40px rgba(109,40,217,.25); } .yai-promo-tag { font-size: 12px; letter-spacing: .2em; color: rgba(255,255,255,.7); margin-bottom: 10px; font-weight: 600; } .yai-promo-headline { font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.1; margin: 0 0 14px; letter-spacing: -.02em; } .yai-promo-sub { font-size: 16px; color: rgba(255,255,255,.88); margin-bottom: 22px; line-height: 1.5; } .yai-promo-btn { background: #fff; color: var(--yai-blue) !important; font-weight: 600; padding: 12px 24px; border-radius: 10px; } .yai-promo-btn:hover { background: #f1f3f5; color: var(--yai-blue-dk) !important; } .yai-promo-icon { font-size: 180px; color: rgba(255,255,255,.15); line-height: 1; } .yai-promo-icon-sm { font-size: 60px; color: rgba(255,255,255,.25); margin-left: -30px; vertical-align: bottom; } /* ---------- CTA STRIP (final section) ------------------------------------- */ .yai-cta-strip { background: linear-gradient(135deg, #1e3a8a 0%, #142862 100%); color: #fff; position: relative; overflow: hidden; } .yai-cta-strip::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(239,68,68,.15) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(59,91,219,.2) 0%, transparent 40%); } .yai-cta-strip > * { position: relative; z-index: 1; } .yai-cta-strip h2 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }