/* ═══════════════════════════════════════════════════════════════ MASTER THEME — Bangkok Business Luxury แทนที่ไฟล์เหล่านี้ทั้งหมด: theme-sections.css, fixes-minor.css, fixes-partners-footer.css, fixes-whyus-contact.css, navbar-scrolled.css Load order ใน : bootstrap → landing → font-upgrade → about-section → services-section → master-theme → facilities-section ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 1. DESIGN TOKENS ══════════════════════════════════════════════════════════════ */ :root { --sys-navy: #1a2b4a; --sys-navy-deep: #111e33; --sys-ivory: #f2efe8; --sys-ivory-mid: #ebe8e0; --sys-white: #ffffff; --sys-gold: #c9a452; --sys-gold-dim: #a07830; --sys-gold-lt: #e3c47a; --sys-border: rgba(201, 164, 82, .15); --sys-border-hover: rgba(201, 164, 82, .30); --sys-muted-dark: rgba(26, 43, 74, .55); --sys-muted-light: rgba(255, 255, 255, .42); } /* ══════════════════════════════════════════════════════════════ 2. GLOBAL ══════════════════════════════════════════════════════════════ */ section { position: relative; } section + section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--sys-border), transparent); pointer-events: none; z-index: 1; } .btn-cta { letter-spacing: .14em !important; border-radius: 0 !important; } .btn-warning { background: var(--sys-gold) !important; border-color: var(--sys-gold) !important; color: var(--sys-navy) !important; } .btn-warning:hover { background: var(--sys-gold-dim) !important; border-color: var(--sys-gold-dim) !important; color: #fff !important; } section h2.fd.display-5 { font-size: clamp(1.8rem, 3vw, 2.4rem) !important; line-height: 1.2 !important; letter-spacing: -.01em !important; } /* ══════════════════════════════════════════════════════════════ 3. HERO — stat labels บน dark bg ══════════════════════════════════════════════════════════════ */ #hero .text-secondary { color: rgba(255, 255, 255, .5) !important; } #hero .text-warning, #hero .fd.fw-bold.text-warning { color: var(--sys-gold) !important; } /* ══════════════════════════════════════════════════════════════ 4. WHY US ══════════════════════════════════════════════════════════════ */ #why { background: var(--sys-ivory) !important; } #why h2.fd { color: var(--sys-navy) !important; } #why h4.fd { color: var(--sys-navy) !important; font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important; font-weight: 500 !important; font-size: 1.05rem !important; } #why .text-secondary { color: var(--sys-muted-dark) !important; font-size: .875rem !important; font-weight: 400 !important; line-height: 1.8 !important; } #why .border-end, #why .border-top { border-color: var(--sys-border) !important; } #why .fd.fw-bold[style*="font-size:3.5rem"] { color: var(--sys-gold) !important; opacity: .5 !important; font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important; font-weight: 500 !important; display: block !important; visibility: visible !important; transition: color .4s ease, transform .4s ease; } #why .col-lg-3:hover { background: rgba(201, 164, 82, .02); } #why .col-lg-3:hover .fd.fw-bold[style*="font-size:3.5rem"] { color: rgba(201, 164, 82, .7) !important; transform: scale(1.05); } /* ══════════════════════════════════════════════════════════════ 5. PROCESS ══════════════════════════════════════════════════════════════ */ #process { background: var(--sys-ivory) !important; } #process h2.fd { color: var(--sys-navy) !important; } #process h5.fd { color: var(--sys-navy) !important; font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important; font-weight: 500 !important; font-size: 1.05rem !important; } #process .text-secondary { color: var(--sys-muted-dark) !important; font-weight: 400 !important; } #process .step-dot { background: var(--sys-ivory-mid) !important; border-color: var(--sys-border-hover) !important; } #process .step-dot:hover { border-color: var(--sys-gold) !important; box-shadow: 0 0 20px rgba(201, 164, 82, .15) !important; } #process .step-dot span { color: var(--sys-gold) !important; font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important; font-size: 1.8rem !important; } #process .process-row::before { background: var(--sys-border) !important; } /* ══════════════════════════════════════════════════════════════ 6. FAQ ══════════════════════════════════════════════════════════════ */ #faq { background: var(--sys-ivory) !important; } #faq .faq-content-col { background: var(--sys-ivory) !important; } #faq h2.fd { color: var(--sys-navy) !important; font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important; font-weight: 700 !important; } #faq h2.fd::after { content: ''; display: block; width: 36px; height: 1px; background: var(--sys-gold); margin-top: 1.25rem; } #faq .accordion-item { background: transparent !important; border-color: rgba(201, 164, 82, .18) !important; transition: background-color .3s ease; } #faq .accordion-item:hover { background: rgba(255, 255, 255, .4) !important; } #faq .accordion-button { background: transparent !important; color: var(--sys-navy) !important; font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important; font-size: 1.05rem !important; font-weight: 500 !important; } #faq .accordion-button:not(.collapsed) { color: var(--sys-gold) !important; box-shadow: none !important; } #faq .accordion-button::after { filter: brightness(0) saturate(100%) invert(66%) sepia(40%) saturate(500%) hue-rotate(5deg) brightness(95%) contrast(90%); } #faq .accordion-body { color: var(--sys-muted-dark) !important; font-weight: 400 !important; font-size: .9rem !important; line-height: 1.85 !important; } /* ══════════════════════════════════════════════════════════════ 7. CONTACT ══════════════════════════════════════════════════════════════ */ #contact { background: var(--sys-ivory) !important; } #contact h2.fd { color: var(--sys-navy) !important; font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important; font-weight: 700 !important; } #contact h2.fd::after { content: ''; display: block; width: 36px; height: 1px; background: var(--sys-gold); margin: 1.25rem auto 0; } #contact .eyebrow { color: var(--sys-gold) !important; } #contact p[style*="max-width:520px"], #contact p[style*="max-width:600px"] { color: var(--sys-muted-dark) !important; font-weight: 400 !important; font-size: .9rem !important; } /* ฝั่งซ้าย navy panel */ #contact .col-lg-5 > div { background: var(--sys-navy) !important; border-left: 3px solid var(--sys-gold) !important; } #contact .col-lg-5 a.fd { color: #fff !important; } #contact .col-lg-5 p { color: rgba(255, 255, 255, .45) !important; } #contact .col-lg-5 [style*="letter-spacing:.14em"] { color: rgba(201, 164, 82, .6) !important; } #contact .col-lg-5 .text-white { color: rgba(255, 255, 255, .75) !important; } /* ฝั่งขวา contact rows */ #contact .col-lg-7 > div { border: 1px solid rgba(26, 43, 74, .1) !important; border-left: none !important; } #contact .contact-row { border-bottom: 1px solid rgba(26, 43, 74, .08) !important; } #contact [style*="letter-spacing:.14em"] { color: rgba(201, 164, 82, .75) !important; } #contact .fd.fw-semibold[style*="font-size:.95rem"], #contact p.fd.fw-semibold { color: var(--sys-navy) !important; } #contact .contact-icon { border-color: rgba(201, 164, 82, .25) !important; color: var(--sys-gold) !important; } #contact .contact-arrow { color: rgba(26, 43, 74, .2) !important; } #contact a.contact-row:hover { background: var(--sys-ivory) !important; } #contact a.contact-row:hover .contact-icon { background: rgba(201, 164, 82, .08) !important; border-color: var(--sys-gold) !important; } #contact a.contact-row:hover .contact-arrow { color: var(--sys-gold) !important; transform: translateX(3px); } /* ══════════════════════════════════════════════════════════════ 8. PARTNERS ══════════════════════════════════════════════════════════════ */ #partners { background: var(--sys-ivory) !important; padding: 5rem 0 !important; border-top: 1px solid var(--sys-border) !important; border-bottom: 1px solid var(--sys-border) !important; } #partners .eyebrow, #partners p.eyebrow { color: var(--sys-gold) !important; font-family: var(--font-body, 'DM Sans', sans-serif) !important; font-weight: 700 !important; justify-content: center; } #partners h2.fd { font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif) !important; font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important; font-weight: 400 !important; color: var(--sys-navy) !important; text-align: center; } #partners h2.fd::after { content: ''; display: block; width: 36px; height: 1px; background: var(--sys-gold); margin: 1rem auto 0; } #partners .d-flex { gap: 3.5rem !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; padding-top: 2.5rem !important; } #partners img { height: 80px !important; width: auto !important; max-width: 150px !important; object-fit: contain !important; filter: grayscale(100%) opacity(.4) sepia(100%) saturate(500%) hue-rotate(5deg) brightness(.85) !important; transition: filter .4s ease, transform .3s ease !important; } #partners img:hover { filter: grayscale(0%) opacity(1) !important; transform: translateY(-2px) !important; } @media (max-width: 767.98px) { #partners .d-flex { gap: 2rem !important; } #partners img { height: 48px !important; max-width: 90px !important; } } /* ══════════════════════════════════════════════════════════════ 9. FOOTER ══════════════════════════════════════════════════════════════ */ footer { background: var(--sys-navy-deep) !important; border-top: 1px solid var(--sys-border) !important; padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } footer .text-secondary { color: rgba(255, 255, 255, .28) !important; font-family: var(--font-body, 'DM Sans', sans-serif) !important; font-size: .72rem !important; font-weight: 400 !important; letter-spacing: .04em !important; } footer .container::after { content: ''; display: block; width: 32px; height: 1px; background: rgba(201, 164, 82, .3); margin-left: auto; } /* ══════════════════════════════════════════════════════════════ 10. NAVBAR SCROLLED ══════════════════════════════════════════════════════════════ */ #mainNav.scrolled { background: rgba(242, 239, 232, .97) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border-bottom: 1px solid rgba(201, 164, 82, .2) !important; } #mainNav.scrolled .nav-link { color: rgba(26, 43, 74, .5) !important; font-weight: 500 !important; letter-spacing: .16em !important; } #mainNav.scrolled .nav-link:hover { color: var(--sys-navy) !important; } #mainNav.scrolled .lang-btn { color: rgba(26, 43, 74, .35) !important; } #mainNav.scrolled .lang-btn.active, #mainNav.scrolled .lang-btn:hover { color: var(--sys-gold) !important; } #mainNav.scrolled .lang-sep { color: rgba(26, 43, 74, .15) !important; } /* ══════════════════════════════════════════════════════════════ 11. NAVBAR LOGO — silver (icon.png) ↔ gold (LOGO BB ทอง.png) ══════════════════════════════════════════════════════════════ */ /* default: แสดง silver ซ่อน gold */ .bba-nav .brand-logo-w { display: block !important; height: 146px !important; } .bba-nav .brand-logo-b { display: none !important; } /* scrolled: ซ่อน silver แสดง gold */ .bba-nav.scrolled .brand-logo-w { display: none !important; } .bba-nav.scrolled .brand-logo-b { display: block !important; height: 146px !important; } /* hover ทุกสถานะ: แสดง gold */ .bba-nav .navbar-brand:hover .brand-logo-w { display: none !important; } .bba-nav .navbar-brand:hover .brand-logo-b { display: block !important; height: 146px !important; } /* transition */ .brand-logo-w, .brand-logo-b { transition: height .4s ease; }