/* brand-theme.css — Easy Go Sydney branding (v3) Place this file in: public/pages/brand-theme.css Then add in pages/_header.php . */ /* ----- Colors ----- */ :root{ --brand-bg: #0e1726; /* deep navy to match logo background */ --brand-bg-2:#0b1320; --brand-surface:#111b2d; /* card surface */ --brand-border:#1f2a44; --brand-text:#e7e9f0; /* primary text */ --brand-text-dim:#b8c2d6; /* secondary text */ --brand-gold:#d4af37; /* gold accent (logo) */ --brand-gold-2:#e5c15a; } /* ----- Base ----- */ html,body{background:var(--brand-bg); color:var(--brand-text);} a{color:var(--brand-gold);} a:hover{color:var(--brand-gold-2);} a:visited{color:var(--brand-gold);} /* กันสีม่วง */ .container{max-width:1100px;margin:0 auto;padding:0 16px;} /* ----- Navbar / Header (generic) ----- */ .topbar, .site-top, header.site-top{ background:var(--brand-bg); border-bottom:1px solid rgba(212,175,55,.25); box-shadow:0 6px 20px rgba(0,0,0,.25); } .nav a, .menu a{color:var(--brand-text);} .nav a:hover, .menu a:hover{color:var(--brand-gold);} .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--brand-text);text-decoration:none;} .brand-img{height:36px;width:auto;display:block;filter:drop-shadow(0 4px 16px rgba(0,0,0,.35));} .brand-text{letter-spacing:.5px} /* ----- Hero / Slider overlay text ----- */ .inner-hero .shade, .hero-slider .overlay{ background:linear-gradient(180deg,rgba(14,23,38,.20),rgba(14,23,38,.75)); } /* ----- Cards / Sections ----- */ .section{padding:28px 0;} .card{background:var(--brand-surface);border:1px solid var(--brand-border);border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.20);color:var(--brand-text)} .card .body{padding:14px} .block-head h2{color:var(--brand-text)} /* ----- Buttons / badges ----- */ .badge{display:inline-block;padding:8px 14px;border-radius:999px; background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2)); color:#111;font-weight:700;text-decoration:none;box-shadow:0 10px 24px rgba(212,175,55,.25)} .badge:hover{filter:brightness(1.05)} /* ----- Planner / gallery cards ----- */ .plan-card{background:var(--brand-surface);border:1px solid var(--brand-border);} .plan-card .title{color:var(--brand-text)} .plan-card .desc{color:var(--brand-text-dim)} .tour-card{background:var(--brand-surface);border:1px solid var(--brand-border);} .tour-card .title{color:var(--brand-text)} .tour-card .desc{color:var(--brand-text-dim)} /* ----- Footer & Floating Contact ----- */ .site-bottom{background:var(--brand-bg-2);color:var(--brand-text-dim);border-top:1px solid rgba(212,175,55,.2)} .contact-fab{background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));color:#111} .contact-panel{border:1px solid var(--brand-border)} .contact-ic span{color:var(--brand-text)} /* =========================================================== Header / Nav OVERRIDES (สำหรับโครงสร้างที่ใช้ .header) =========================================================== */ .header{ background:var(--brand-bg) !important; border-bottom:1px solid rgba(212,175,55,.25); box-shadow:0 6px 18px rgba(0,0,0,.28); position:sticky; top:0; z-index:60; } /* จัดโครงสร้างภายใน header เป็น flex เสมอ */ .header .container.inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; } /* ซ่อน .logo/.name เก่า (กันตัวหนังสือซ้ำ) */ .header .brand .logo, .header .name{ display:none !important; } /* โลโก้ + ข้อความแบรนด์ให้ชัดบนพื้นเข้ม */ .header .brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .header .brand-text{ color:var(--brand-text) !important; } .header .brand-img{ display:block !important; height:38px !important; width:auto !important; max-height:44px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.35)); } /* สีเมนูบนพื้นเข้ม + เน้น active/hover เป็นสีทอง */ .header .nav a{ color:var(--brand-text) !important; opacity:.92; transition:opacity .15s,color .15s,background .15s; } .header .nav a:hover, .header .nav a.active{ color:var(--brand-gold) !important; opacity:1; } /* ปุ่มเมนูมือถือให้อ่านง่าย */ .header .mobile-toggle{ color:var(--brand-text) !important; background:transparent; border:1px solid rgba(231,233,240,.25); border-radius:10px; padding:6px 10px; } /* กันกรณีมีสไตล์เดิมทับ ให้เมนูไม่ซีด */ .header .nav a, .header .brand-text, .header .mobile-toggle{ text-shadow:none; } /* เผื่อ header เดิมมีพื้นโปร่ง/เบลอ ให้ปิดด้วยพื้นเข้มล้วน */ .header::before{ content:none !important; } /* ย่อข้อความแบรนด์บนจอเล็ก */ @media (max-width:640px){ .header .brand-text{ display:none; } } /* =========================================================== Floating Contact Panel – readability fix (ขั้นพื้นฐาน) =========================================================== */ .contact-panel{ background: rgba(255,255,255,.98) !important; color: #0e1726 !important; border: 1px solid rgba(15,25,40,.12) !important; box-shadow: 0 12px 28px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08) !important; backdrop-filter: blur(4px); z-index: 70; /* ให้อยู่เหนือเนื้อหาอื่น */ max-width: min(92vw, 380px); /* ไม่ล้นจอเล็ก */ } .contact-panel .contact-ic span, .contact-panel .label, .contact-panel .title, .contact-panel b, .contact-panel strong, .contact-panel small{ color: #0e1726 !important; opacity: 1 !important; font-weight: 700; /* label: โทร:, LINE: ฯลฯ */ } .contact-panel .value, .contact-panel a{ color: #0e1726 !important; font-weight: 600; text-decoration: none; } .contact-panel a:hover{ color: var(--brand-gold) !important; text-decoration: underline; } .contact-panel .row, .contact-panel .contact-row{ line-height: 1.48; margin: 4px 0; } /* ปุ่มลอย */ .contact-fab{ background: linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2)) !important; color: #111 !important; box-shadow: 0 10px 24px rgba(212,175,55,.25); } /* =========================================================== Floating Contact Panel – ULTRA OVERRIDE (เข้มสุด) ยกเลิกความซีด/ฟิลเตอร์/เบลนด์โหมดทั้งหมด รวมทั้ง ::before/::after =========================================================== */ .contact-panel, .contact-panel * , .contact-panel *::before, .contact-panel *::after{ color:#0e1726 !important; opacity:1 !important; text-shadow:none !important; filter:none !important; mix-blend-mode:normal !important; } /* จัดการคลาสที่พบบ่อยว่าทำให้สีจาง */ .contact-panel :is(.muted,.text-muted,.dim,.help,.note,.text-gray-400,.text-slate-400,small){ color:#0e1726 !important; opacity:1 !important; } /* ไอคอนให้เป็นสีเข้มด้วย */ .contact-panel svg, .contact-panel i{ color:#0e1726 !important; fill:#0e1726 !important; stroke:#0e1726 !important; opacity:1 !important; } /* กรณีใช้โครงสร้างแบบรายการ (เช่น dl/dt/dd) */ .contact-panel dt{font-weight:800 !important; color:#0e1726 !important;} .contact-panel dd{font-weight:600 !important; color:#0e1726 !important;} /* === Footer Brand (bottom logo band) === */ .footer-brand{ background: linear-gradient(180deg, #0e1726 0%, #0b1320 100%); border-top: 1px solid rgba(212,175,55,.28); padding: 26px 0; } .footer-brand .fb-link{ max-width: 1100px; margin: 0 auto; padding: 0 16px; display: grid; place-items: center; gap: 10px; text-decoration: none; } .footer-brand .fb-logo{ height: 46px; width: auto; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); border-radius: 8px; } .footer-brand .fb-text{ text-align: center; line-height: 1.15; } .footer-brand .fb-name{ color: var(--brand-text); font-weight: 800; letter-spacing: .6px; } .footer-brand .fb-tag{ color: var(--brand-text-dim); font-size: .95rem; margin-top: 4px; } /* responsive */ @media (max-width: 640px){ .footer-brand{ padding: 22px 0; } .footer-brand .fb-logo{ height: 40px; } }