/* ===================================================================== IG China Travel — Shared stylesheet Extracted from design-reference.html (do not modify the reference) Used by every page in this site. ===================================================================== */ :root{ --yellow:#FFD60A; --yellow-deep:#F5C400; --yellow-soft:#FFF7C2; --yellow-bg:#FFFBEA; --black:#0E0E0E; --ink:#1A1A1A; --gray-900:#222; --gray-700:#4A4A4A; /* Darkened 2026-07-31 (finding #21). The old #7A7A7A carried real body text — .tour-code, .tour-rating .count, .tour-price .from/.was, .dest-zh, .contact-card .hint, .review-author-info .trip, .breadcrumb, .listing-empty, tour.css .qi-item .lbl / .dep-note — at 11-14px, so it never qualified as large text, and it measured 4.29:1 on #FFFFFF and 4.14:1 on --yellow-bg #FFFBEA. Both under AA. #6B6B6B relative luminance 0.14700 on #FFFFFF (L 1.00000) → 5.33:1 AA ✓ (AAA for large text) on #FFFBEA (L 0.96195) → 5.14:1 AA ✓ on #F2F2F2 (L 0.88791) → 4.76:1 AA ✓ (.map-placeholder) One token change fixes every consumer at once; no rule and no layout is touched, and at 11-14px the visual shift is imperceptible. */ --gray-500:#6B6B6B; --gray-300:#D9D9D9; --gray-100:#F2F2F2; --white:#FFFFFF; --red:#DE2910; --red-dark:#B71C1C; --green:#22A06B; --shadow-sm:0 2px 8px rgba(14,14,14,.06); --shadow-md:0 8px 24px rgba(14,14,14,.10); --shadow-lg:0 20px 50px rgba(14,14,14,.16); --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:hidden} body{ font-family:'IBM Plex Sans Thai','Mitr',sans-serif; color:var(--ink); background:var(--white); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; max-width:100vw; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font-family:inherit;cursor:pointer;border:none;background:none} /* ============ TOP UTILITY BAR ============ */ .topbar{ background:var(--black); color:#fff; font-size:13px; padding:8px 0; } .topbar-inner{ max-width:1280px;margin:0 auto;padding:0 24px; display:flex;justify-content:space-between;align-items:center;gap:16px; } .topbar-left{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .topbar-left span{display:inline-flex;align-items:center;gap:6px;opacity:.9} .topbar-left .dot{width:6px;height:6px;background:var(--yellow);border-radius:50%} .topbar-right{display:flex;gap:14px;align-items:center} .topbar-right a{opacity:.85;transition:opacity .2s} .topbar-right a:hover{opacity:1;color:var(--yellow)} .lang-pill{ background:var(--yellow);color:var(--black); padding:3px 10px;border-radius:99px;font-weight:600;font-size:12px; white-space:nowrap; } /* Mobile: hide secondary info, keep only phone + lang */ @media (max-width:768px){ .topbar{font-size:12px;padding:6px 0} .topbar-inner{padding:0 16px;gap:8px} .topbar-left{gap:10px} .topbar-left .tb-hours, .topbar-left .tb-license, .topbar-right .tb-track, .topbar-right .tb-help{display:none} .topbar-right{gap:8px} } /* ============ HEADER ============ */ header.main{ position:sticky;top:0;z-index:100; background:#fff; border-bottom:1px solid var(--gray-100); box-shadow:var(--shadow-sm); } .header-inner{ max-width:1280px;margin:0 auto;padding:14px 24px; display:flex;align-items:center;justify-content:space-between;gap:24px; } .logo-wrap{display:flex;align-items:center;gap:10px;flex-shrink:0} .logo-mark{ width:54px;height:54px; display:flex;align-items:center;justify-content:center; position:relative; flex-shrink:0; } .logo-mark img{ width:100%;height:100%; object-fit:contain; display:block; filter:drop-shadow(0 4px 10px rgba(255,214,10,.45)); } .logo-text{ font-family:'Mitr',sans-serif; font-weight:700;font-size:22px; line-height:1;letter-spacing:-.5px; } .logo-text .ig{color:var(--red)} .logo-text small{display:block;font-size:11px;font-weight:500;color:var(--gray-500);letter-spacing:1px;margin-top:2px} nav.main-nav{display:flex;gap:4px;align-items:center} nav.main-nav > a, nav.main-nav > div{ padding:10px 14px; font-weight:500;font-size:15px; border-radius:10px; transition:all .2s; position:relative; display:inline-flex;align-items:center;gap:6px; cursor:pointer; } nav.main-nav > a:hover, nav.main-nav > div:hover{background:var(--yellow-soft);color:var(--black)} nav.main-nav > a.active{background:var(--yellow-soft);color:var(--black);font-weight:600} nav.main-nav .has-arrow::after{content:'▾';font-size:10px;margin-left:2px;opacity:.6} .hot-badge{ background:var(--red);color:#fff;font-size:10px; padding:2px 6px;border-radius:99px;font-weight:600;letter-spacing:.3px; } .header-actions{display:flex;gap:10px;align-items:center;flex-shrink:0} .btn-line{ background:#06C755;color:#fff; padding:10px 18px;border-radius:99px;font-weight:600;font-size:14px; display:inline-flex;align-items:center;gap:6px; transition:transform .15s, box-shadow .2s; white-space:nowrap; } .btn-line:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(6,199,85,.4)} /* Mobile: shrink LINE button text → show only "LINE" or icon */ @media (max-width:768px){ .btn-line{padding:8px 14px;font-size:13px;gap:4px} .btn-line .btn-line-id{display:none} .btn-line .btn-line-short{display:inline} } @media (min-width:769px){ .btn-line .btn-line-short{display:none} .btn-line .btn-line-id{display:inline} } /* ============ HERO ============ */ .hero{ position:relative; background:var(--black) url('../assets/hero-great-wall.jpg') center/cover no-repeat; overflow:hidden; padding:48px 0 96px; } .hero::before{ content:'';position:absolute;inset:0; background:linear-gradient(100deg, rgba(14,14,14,.72) 0%, rgba(14,14,14,.45) 55%, rgba(14,14,14,.2) 100%); pointer-events:none; } .hero::after{ content:'';position:absolute; bottom:-1px;left:0;right:0;height:60px; background:#fff; clip-path:polygon(0 100%, 100% 100%, 100% 30%, 0 60%); } .hero-inner{ max-width:1280px;margin:0 auto;padding:0 24px; position:relative;z-index:2; } .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} @media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:24px}} .hero-eyebrow{ display:inline-flex;align-items:center;gap:8px; background:rgba(255,255,255,.15); padding:6px 14px;border-radius:99px; font-size:13px;font-weight:600;color:#fff; margin-bottom:18px; } .hero-eyebrow .cn-flag{width:18px;height:12px;background:var(--red);border-radius:2px;position:relative} .hero-eyebrow .cn-flag::before{content:'★';position:absolute;color:var(--yellow);font-size:8px;top:-1px;left:2px} h1.hero-title{ font-family:'Mitr',sans-serif; font-size:clamp(40px,5.5vw,68px); line-height:1.05; font-weight:700; color:#fff; letter-spacing:-1.5px; margin-bottom:18px; text-shadow:0 2px 16px rgba(0,0,0,.35); } h1.hero-title .accent{ color:var(--yellow); } .hero-sub{ font-size:18px;color:rgba(255,255,255,.85);max-width:520px; margin-bottom:28px;font-weight:400; } .hero-stats{display:flex;gap:32px;flex-wrap:wrap;margin-top:28px} .hero-stat .num{font-family:'Mitr',sans-serif;font-size:32px;font-weight:700;color:var(--yellow);line-height:1} .hero-stat .lbl{font-size:13px;color:rgba(255,255,255,.75);margin-top:2px} /* hero panda illustration */ .hero-art{ position:relative;min-height:380px; display:flex;align-items:center;justify-content:center; } .panda-card{ width:100%;max-width:380px; background:var(--black); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-xl); padding:0; color:#fff; box-shadow:var(--shadow-lg); position:relative; z-index:1; transform:rotate(-2deg); border:4px solid var(--black); } .panda-card::before{ content:'';position:absolute;top:-18px;right:-18px;z-index:4; width:80px;height:80px;background:var(--red); border-radius:50%; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 20px rgba(222,41,16,.4); } .panda-card::after{ content:'SALE\A 50% OFF';white-space:pre; position:absolute;top:-18px;right:-18px;z-index:5;width:80px;height:80px; display:flex;align-items:center;justify-content:center;text-align:center; color:#fff;font-family:'Mitr',sans-serif;font-weight:700;font-size:13px;line-height:1.1; transform:rotate(15deg); } .panda-photo{ height:160px; background-size:cover;background-position:center; border-radius:calc(var(--r-xl) - 6px) calc(var(--r-xl) - 6px) 0 0; position:relative;display:flex;align-items:flex-end;overflow:hidden; } .panda-photo::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.82)); } .panda-cap{position:relative;z-index:2;padding:16px 18px} .panda-kicker{display:block;font-size:12px;color:var(--yellow);font-weight:700;margin-bottom:3px} .panda-title{ font-family:'Mitr',sans-serif;font-size:21px;font-weight:600;line-height:1.15; text-shadow:0 2px 10px rgba(0,0,0,.55); } .panda-body{padding:14px 18px 18px} .panda-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px} .panda-thumbs span{display:block;height:60px;border-radius:10px;background-size:cover;background-position:center} .panda-price-row{ display:flex;align-items:baseline;justify-content:center;gap:8px; padding:0 0 14px;border-bottom:1px dashed #555; margin-bottom:14px; } .panda-price-row .was{font-size:14px;color:#999;text-decoration:line-through} .panda-price-row .now{font-family:'Mitr',sans-serif;font-size:34px;font-weight:700;color:var(--yellow)} .panda-price-row .unit{font-size:13px;color:#ccc} .panda-cta{ display:block;background:var(--yellow);color:var(--black); text-align:center;padding:12px;border-radius:12px; font-weight:700;font-family:'Mitr',sans-serif;font-size:16px; transition:transform .15s; } .panda-cta:hover{transform:translateY(-2px)} .floater{ position:absolute; z-index:2; background:#fff;border-radius:14px;padding:10px 14px; box-shadow:var(--shadow-md); font-size:13px;font-weight:600; display:flex;align-items:center;gap:8px; animation:float 4s ease-in-out infinite; } .floater.f1{top:10px;left:-10px;transform:rotate(-4deg)} .floater.f2{bottom:30px;right:-20px;transform:rotate(4deg);animation-delay:1.5s} @keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-8px) rotate(var(--r,0deg))}} .floater.f1{--r:-4deg} .floater.f2{--r:4deg} .floater .ico{font-size:18px} /* SALE badge — shrink + tuck inside card on small screens so the text doesn't get clipped by the hero container's right padding. */ @media (max-width:600px){ .panda-card::before, .panda-card::after{top:-8px;right:-8px;width:60px;height:60px} .panda-card::after{font-size:11px;line-height:1.05} .floater.f1{top:-6px;left:-4px} /* At ≤600px the card goes full-width, so an absolutely-positioned review chip landed on top of the CTA label ("ดูรายละเอียดโปรแกรม") and hid half of it. Drop it out of absolute positioning and let it flow under the card instead — .hero-art stacks so f1 (still absolute) is unaffected. */ .hero-art{flex-direction:column} .floater.f2{position:static;transform:rotate(2deg);margin-top:16px;align-self:center} } /* ============ SEARCH BAR ============ */ .search-card{ max-width:1180px;margin:-72px auto 0; background:#fff;border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:8px; position:relative;z-index:5; border:1px solid var(--gray-100); } .search-tabs{display:flex;gap:4px;padding:8px 8px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .search-tabs::-webkit-scrollbar{display:none} .search-tab{ padding:10px 18px;border-radius:10px 10px 0 0; font-weight:600;font-size:14px;color:var(--gray-500); display:inline-flex;align-items:center;gap:6px; cursor:pointer;transition:all .2s; white-space:nowrap;flex-shrink:0; } .search-tab.active{background:var(--yellow-bg);color:var(--black)} .search-tab .ico{font-size:18px} /* FOUR tracks, not five (finding #13/#19/#34). The งบประมาณ field was removed per integration-spec §2.3, leaving 3 × .search-field + the submit = 4 grid items. With five tracks declared, auto-placement put .search-btn in track 4 (a 1fr track ≈ 241px at the card's max width) instead of the trailing `auto` track it was designed for, and the gutter between track 4 and the empty track 5 survived as a 12px dead strip at the right edge. */ .search-row{ background:var(--yellow-bg); border-radius:14px; padding:16px; display:grid; grid-template-columns:1.5fr 1fr 1fr auto; gap:12px;align-items:end; } @media (max-width:900px){.search-row{grid-template-columns:1fr 1fr;gap:10px}} /* Phone tier. At 375px a 2×2 grid puts the submit button half-width beside a field, which reads as a fourth field rather than the action. One column: three fields then a full-width button. */ @media (max-width:560px){ .search-row{grid-template-columns:1fr;gap:8px;padding:14px} .search-btn{justify-content:center;padding:14px 20px} } .search-field{display:flex;flex-direction:column;gap:4px} .search-field label{font-size:11px;font-weight:600;color:var(--gray-700);text-transform:uppercase;letter-spacing:.5px} .search-field .input{ background:#fff;border:1px solid var(--gray-300);border-radius:10px; padding:12px 14px;font-size:15px;font-weight:500;color:var(--ink); font-family:inherit; display:flex;align-items:center;gap:8px; cursor:pointer; } .search-field .input span:first-child{font-size:18px} .search-btn{ background:var(--black);color:var(--yellow); padding:14px 28px;border-radius:10px; font-weight:700;font-family:'Mitr',sans-serif;font-size:16px; display:inline-flex;align-items:center;gap:8px; transition:transform .15s; } .search-btn:hover{transform:translateY(-1px)} /* ============ SECTION COMMON ============ */ section.block{padding:72px 0;max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px} .section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;flex-wrap:wrap;gap:12px} .section-head h2{ font-family:'Mitr',sans-serif; font-size:clamp(28px,3.5vw,40px); font-weight:700;letter-spacing:-1px;color:var(--black);line-height:1.1; } .section-head h2 .zh{font-family:'Noto Serif SC',serif;font-size:.6em;color:var(--red);margin-left:12px;font-weight:500} .section-head p{color:var(--gray-700);font-size:16px;margin-top:8px;max-width:560px} .see-all{ color:var(--black);font-weight:600;font-size:14px; display:inline-flex;align-items:center;gap:6px; padding:8px 16px;border-radius:99px;border:2px solid var(--black); transition:all .2s; } .see-all:hover{background:var(--black);color:var(--yellow)} /* ============ DESTINATIONS CIRCLE GRID ============ */ .destinations-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:18px; } @media (max-width:900px){.destinations-grid{grid-template-columns:repeat(4,1fr)}} @media (max-width:500px){.destinations-grid{grid-template-columns:repeat(3,1fr)}} .dest-tile{ display:flex;flex-direction:column;align-items:center;gap:8px; cursor:pointer;text-align:center; transition:transform .2s; } .dest-tile:hover{transform:translateY(-4px)} .dest-circle{ width:100%;max-width:150px;aspect-ratio:1/1;margin:0 auto; border-radius:50%; background-size:cover;background-position:center; border:4px solid var(--yellow); box-shadow:var(--shadow-sm); position:relative;overflow:hidden; } .dest-circle::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,transparent 50%, rgba(0,0,0,.4)); } .dest-name{font-size:15px;font-weight:600;color:var(--black);line-height:1.2} .dest-zh{font-family:'Noto Serif SC',serif;font-size:13px;color:var(--gray-500);font-weight:500} /* ============ PROMO BANNERS ============ */ .promo-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px} @media (max-width:900px){.promo-grid{grid-template-columns:1fr}} .promo-card{ border-radius:var(--r-lg);padding:32px;position:relative;overflow:hidden; min-height:220px; display:flex;flex-direction:column;justify-content:space-between; cursor:pointer;transition:transform .2s, box-shadow .2s; } .promo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .promo-card h3{font-family:'Mitr',sans-serif;font-size:28px;line-height:1.1;letter-spacing:-.5px;font-weight:700} .promo-card p{font-size:14px;opacity:.9;margin-top:8px} .promo-card .promo-cta{ margin-top:16px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px; padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.25);align-self:flex-start; backdrop-filter:blur(4px); } .promo-1{background:linear-gradient(135deg,var(--red) 0%, var(--red-dark) 100%);color:#fff} .promo-1::after{content:'🏯';position:absolute;right:-10px;bottom:-20px;font-size:140px;opacity:.25} .promo-2{background:var(--black);color:var(--yellow)} .promo-2::after{content:'🐼';position:absolute;right:-10px;bottom:-20px;font-size:120px;opacity:.5} .promo-2 p{color:#fff;opacity:.8} .promo-3{background:var(--yellow);color:var(--black);border:3px solid var(--black)} .promo-3::after{content:'💳';position:absolute;right:-10px;bottom:-20px;font-size:110px;opacity:.4} /* ============ TOUR CARDS ============ */ .tour-pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px} .tour-pill{ padding:8px 16px;border-radius:99px; border:1.5px solid var(--gray-300);font-weight:600;font-size:14px;color:var(--gray-700); cursor:pointer;transition:all .15s; } .tour-pill:hover{border-color:var(--black);color:var(--black)} .tour-pill.active{background:var(--black);border-color:var(--black);color:var(--yellow)} .tour-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} @media (max-width:1100px){.tour-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.tour-grid{grid-template-columns:1fr}} .tour-card{ background:#fff;border-radius:var(--r-md);overflow:hidden; border:1px solid var(--gray-100); transition:transform .2s, box-shadow .2s; cursor:pointer; display:flex;flex-direction:column; } .tour-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)} .tour-img{ height:200px;background-size:cover;background-position:center; position:relative; } .tour-tag{ position:absolute;top:12px;left:12px; background:var(--red);color:#fff;font-weight:700;font-size:11px; padding:5px 10px;border-radius:6px;letter-spacing:.3px; } .tour-tag.tag-new{background:var(--green)} .tour-tag.tag-premium{background:var(--black);color:var(--yellow)} .tour-heart{ position:absolute;top:12px;right:12px; width:36px;height:36px;background:rgba(255,255,255,.95); border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:16px; } .tour-airline{ position:absolute;bottom:10px;right:10px; background:#fff;padding:4px 10px;border-radius:6px; font-size:11px;font-weight:600;color:var(--gray-700); box-shadow:var(--shadow-sm); } /* Poster-style card (full marketing poster + slim price/CTA bar) */ .tour-poster{ width:100%;aspect-ratio:991/1400; /* matches the poster -> full image, no crop */ background-size:cover;background-position:center;position:relative; } .poster-card .poster-bar{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:14px 16px;flex:1; } .tour-body{padding:18px;display:flex;flex-direction:column;flex:1} .tour-code{font-size:11px;color:var(--gray-500);font-weight:600;letter-spacing:.5px;margin-bottom:4px} .tour-title{ font-family:'Mitr',sans-serif;font-weight:600;font-size:16px;line-height:1.3; color:var(--black);margin-bottom:10px;min-height:42px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .tour-meta{display:flex;gap:12px;font-size:12px;color:var(--gray-700);margin-bottom:10px;flex-wrap:wrap} .tour-meta span{display:inline-flex;align-items:center;gap:4px} .tour-rating{display:flex;align-items:center;gap:6px;margin-bottom:12px;font-size:13px} .tour-rating .stars{color:var(--yellow-deep)} .tour-rating .count{color:var(--gray-500)} .tour-price-row{ display:flex;align-items:flex-end;justify-content:space-between; margin-top:auto;padding-top:12px;border-top:1px dashed var(--gray-300); } .tour-price .from{font-size:11px;color:var(--gray-500);font-weight:500} .tour-price .was{font-size:13px;color:var(--gray-500);text-decoration:line-through;margin-right:4px} .tour-price .now{font-family:'Mitr',sans-serif;font-size:24px;font-weight:700;color:var(--red);line-height:1} .tour-price .unit{font-size:12px;color:var(--gray-700)} .tour-book{ background:var(--yellow);color:var(--black); padding:8px 14px;border-radius:8px;font-weight:700;font-size:13px; font-family:'Mitr',sans-serif; transition:transform .15s; } .tour-book:hover{transform:translateY(-1px);background:var(--yellow-deep)} /* ============ WHY US ============ */ .why-section{background:var(--black);color:#fff;border-radius:var(--r-xl);padding:64px 48px;margin:0 24px;max-width:1232px;margin-left:auto;margin-right:auto;position:relative;overflow:hidden} .why-section::before{ content:'';position:absolute;top:-100px;right:-100px; width:300px;height:300px;background:var(--yellow); border-radius:50%;opacity:.08; } .why-section::after{ content:'中国';position:absolute;bottom:-40px;left:-20px; font-family:'Noto Serif SC',serif;font-size:220px;font-weight:700; color:rgba(255,214,10,.06);line-height:1;letter-spacing:-10px; } .why-head{text-align:center;margin-bottom:48px;position:relative;z-index:2} .why-head h2{font-family:'Mitr',sans-serif;font-size:42px;font-weight:700;letter-spacing:-1px;margin-bottom:12px} .why-head h2 .y{color:var(--yellow)} .why-head p{color:#ccc;max-width:600px;margin:0 auto} .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:2} @media (max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:500px){.why-grid{grid-template-columns:1fr}} .why-card{ background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1); padding:28px 24px;border-radius:var(--r-md); backdrop-filter:blur(4px); } .why-icon{ width:56px;height:56px;background:var(--yellow);color:var(--black); border-radius:14px;display:flex;align-items:center;justify-content:center; font-size:28px;margin-bottom:16px; } .why-card h3{font-family:'Mitr',sans-serif;font-size:18px;font-weight:600;margin-bottom:8px} .why-card p{font-size:14px;color:#bbb;line-height:1.55} /* ============ REGION SECTION ============ */ .region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media (max-width:900px){.region-grid{grid-template-columns:1fr}} .region-card{ border-radius:var(--r-md);overflow:hidden; position:relative;height:280px; background-size:cover;background-position:center; cursor:pointer; display:flex;align-items:flex-end; transition:transform .25s; } .region-card:hover{transform:scale(1.02)} .region-card::before{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,transparent 30%, rgba(0,0,0,.85)); } .region-content{position:relative;z-index:2;padding:24px;color:#fff;width:100%} .region-content h3{font-family:'Mitr',sans-serif;font-size:24px;font-weight:700;margin-bottom:4px} .region-content .zh{font-family:'Noto Serif SC',serif;font-size:14px;opacity:.8;margin-bottom:10px;display:block} .region-content .cities{font-size:13px;opacity:.9;line-height:1.5} .region-content .badge{ display:inline-flex;align-items:center;gap:6px; background:var(--yellow);color:var(--black); padding:4px 12px;border-radius:99px;font-size:12px;font-weight:700; margin-top:12px; } /* ============ REVIEWS ============ */ .reviews-section{background:var(--yellow-bg)} .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media (max-width:900px){.reviews-grid{grid-template-columns:1fr}} .review-card{ background:#fff;border-radius:var(--r-md); padding:28px;border:1px solid var(--gray-100); box-shadow:var(--shadow-sm); position:relative; } .review-card::before{ content:'"';position:absolute;top:8px;right:24px; font-family:'Mitr',sans-serif;font-size:80px;color:var(--yellow);line-height:1; } .review-stars{color:var(--yellow-deep);font-size:16px;margin-bottom:12px} /* Finding #20 — the ★★★★★ glyphs are --yellow-deep #F5C400 on the white .review-card, which measures 1.64:1 and is the ONLY carrier of the rating, so they are meaningful text failing WCAG 1.4.3. Darkening the gold to ~#8A6200 would clear 4.5:1 but is no longer the brand colour the owner approved, so the glyphs stay exactly as they look and are marked aria-hidden in the markup instead, with the rating restated as real text. This class carries that text: exposed to assistive tech, zero pixels on screen, so the visible design is unchanged. Same technique as .sr-only further down — declared here as well so the reviews component is self-contained and either hook works. */ .review-rating-text{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; } .review-text{font-size:15px;line-height:1.6;color:var(--gray-900);margin-bottom:20px;position:relative;z-index:2} .review-author{display:flex;align-items:center;gap:12px} .review-avatar{ width:44px;height:44px;border-radius:50%; background-size:cover;background-position:center; background-color:var(--yellow); display:flex;align-items:center;justify-content:center; font-weight:700;color:var(--black);font-family:'Mitr',sans-serif; } .review-author-info .name{font-weight:600;font-size:14px} .review-author-info .trip{font-size:12px;color:var(--gray-500)} /* ============ NEWSLETTER ============ */ .nl-section{padding:48px 24px} .nl-card{ max-width:1100px;margin:0 auto; background:var(--yellow); border-radius:var(--r-xl); padding:48px; display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center; position:relative;overflow:hidden; border:4px solid var(--black); } @media (max-width:800px){.nl-card{grid-template-columns:1fr;padding:32px}} .nl-card::before{ content:'🐼';position:absolute;right:24px;bottom:-24px; font-size:180px;opacity:.15; } .nl-card h3{font-family:'Mitr',sans-serif;font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-.5px;margin-bottom:8px} .nl-card p{font-size:15px;color:var(--gray-900);max-width:440px} .nl-form{display:flex;gap:8px;background:#fff;padding:6px;border-radius:99px;border:2px solid var(--black);position:relative;z-index:2;min-width:0} .nl-form input{ flex:1;min-width:0;border:none;padding:10px 16px; font-family:inherit;font-size:15px;background:transparent; /* `outline:none` removed (bug #2): it suppressed the only focus signal on this field and shipped no replacement. Focus is now handled by the :focus-visible system at the end of this file. */ } .nl-form button{ background:var(--black);color:var(--yellow); padding:10px 20px;border-radius:99px;font-weight:700;font-family:'Mitr',sans-serif; white-space:nowrap;flex-shrink:0; } @media (max-width:500px){ .nl-form{flex-direction:column;border-radius:22px;padding:8px;gap:6px} .nl-form input{padding:12px 14px;text-align:center} .nl-form button{width:100%;padding:12px} } /* --------------------------------------------------------------------- NEWSLETTER PANEL, SECOND COLUMN — the LINE add-friend stack js/include.js no longer renders
here: the email field posted nowhere and alert()-ed a confirmation for a signup that never happened. Every .nl-form rule ABOVE is left defined on purpose (project rule: rules are never deleted) — they simply stop matching. What replaces the form has to hold the same amount of the yellow card, because this panel is a major footer element on all 14 pages and would read as broken if it thinned into a strip. So the second grid column is a white action panel — button, LINE id, availability line, and the two other channels — which occupies more vertical space than the pill-shaped form did, not less. Contrast, all measured against the surface each thing actually sits on: --black #0E0E0E on --yellow #FFD60A 13.68:1 (headings) --gray-900 #222 on --yellow 11.27:1 (body, bullets) --yellow on --black (the .nl-cta button) 13.68:1 --black on --white (inside .nl-action) 19.31:1 --gray-700 #4A4A4A on --white 8.86:1 (.nl-note) Nothing here paints yellow text on white (~1.7:1) — the yellow only ever appears as a fill under black, or as a label on top of black. --------------------------------------------------------------------- */ .nl-copy{position:relative;z-index:2;min-width:0} .nl-points{list-style:none;margin-top:16px;display:grid;gap:9px} .nl-points li{ display:flex;align-items:flex-start;gap:9px; font-size:14.5px;line-height:1.5;color:var(--gray-900); } .nl-points svg.ico{font-size:17px;color:var(--black);margin-top:2px} /* z-index:2 keeps the panel above .nl-card::before, the 180px 🐼 that sits bottom-right of the card at opacity .15 — i.e. directly behind this column. Same guard the old .nl-form carried. */ .nl-action{ position:relative;z-index:2; display:flex;flex-direction:column;gap:11px; background:var(--white); border:2px solid var(--black); border-radius:var(--r-lg); padding:22px; min-width:0; } .nl-cta{ display:flex;align-items:center;justify-content:center;gap:10px; background:var(--black);color:var(--yellow); font-family:'Mitr',sans-serif;font-weight:700;font-size:17px;line-height:1.3; padding:14px 20px;border-radius:99px; text-align:center; transition:background-color .2s, transform .15s; } .nl-cta:hover{background:var(--ink);transform:translateY(-1px)} .nl-cta svg.ico{font-size:20px} .nl-id{ text-align:center; font-family:'Mitr',sans-serif;font-weight:600;font-size:15px;letter-spacing:.3px; color:var(--black); } .nl-note{text-align:center;font-size:12.5px;line-height:1.55;color:var(--gray-700)} .nl-alt{ display:flex;flex-wrap:wrap;gap:8px;justify-content:center; padding-top:13px;border-top:1px solid rgba(14,14,14,.16); } .nl-alt a{ display:inline-flex;align-items:center;gap:6px; padding:7px 14px;border-radius:99px; border:1.5px solid var(--black); font-size:13px;font-weight:600;color:var(--black); transition:background-color .2s, color .2s; } .nl-alt a:hover{background:var(--black);color:var(--yellow)} .nl-alt svg.ico{font-size:15px} @media (max-width:800px){ .nl-card h3{font-size:27px} .nl-card p{max-width:none} .nl-action{padding:20px} } @media (max-width:500px){ .nl-cta{font-size:16px;padding:13px 14px;gap:8px} .nl-action{padding:18px;gap:10px} .nl-points li{font-size:14px} } /* ============ FOOTER ============ */ footer{ background:var(--black);color:#ccc;padding:60px 24px 24px; } .footer-inner{max-width:1280px;margin:0 auto} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px} @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:24px}} /* Real operating entity, in the footer slot where the licence seal used to be. Ships on all 14 pages via SITE_FOOTER. */ .footer-company{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px 20px;margin-bottom:24px; } .footer-company .co-th{font-family:'Mitr',sans-serif;font-weight:600;color:#fff;font-size:14px;line-height:1.5} .footer-company .co-en{font-size:12px;color:#aaa;line-height:1.5;margin-top:3px} .footer-company .co-zh{font-family:'Noto Serif SC',serif;font-size:12px;color:#888;line-height:1.5;margin-top:2px} .footer-company .co-addr{font-size:12px;color:#aaa;line-height:1.7;margin-top:10px} .footer-company .co-addr svg.ico{width:14px;height:14px;color:var(--yellow);vertical-align:-2px;margin-right:4px} .footer-company .co-note{ font-size:11px;color:#888;line-height:1.6; margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08); } .footer-brand .logo-text{color:#fff;margin-bottom:14px} .footer-brand .logo-text small{color:#888} .footer-brand .desc{font-size:14px;color:#aaa;margin-bottom:20px;line-height:1.55;max-width:300px} .footer-contact{font-size:13px;line-height:1.8} .footer-contact strong{color:#fff;display:block;margin-top:8px} /* The block now lists every channel the business actually answers on — phone, emergency line, LINE, Facebook, Instagram, WeChat, email — so any page can reach any of them without a detour through contact.html. Six of the seven are links; WeChat is the exception, because a WeChat ID has no URL scheme. It is therefore marked as text you copy rather than a dead link that looks tappable and does nothing. */ .wechat-id{ color:#ccc; /* 12.03:1 on --black */ -webkit-user-select:all;user-select:all; cursor:text; } .channel-note{ display:block; font-size:12px;line-height:1.5; color:#888; /* 5.45:1 on --black — same as the 24h note above it */ margin-top:2px; } .footer-col h4{font-family:'Mitr',sans-serif;color:#fff;font-size:15px;font-weight:600;margin-bottom:14px} .footer-col ul{list-style:none} .footer-col li{margin-bottom:8px} .footer-col a{font-size:13px;color:#aaa;transition:color .15s} .footer-col a:hover{color:var(--yellow)} .footer-license{ background:rgba(255,255,255,.04);padding:16px 20px;border-radius:12px; display:flex;gap:16px;align-items:center;margin-bottom:24px;border:1px solid rgba(255,255,255,.08); } .footer-license .seal{ width:60px;height:60px;flex-shrink:0; background:var(--yellow);color:var(--black);border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:'Mitr',sans-serif;font-weight:700;font-size:11px;text-align:center;line-height:1.1; } .footer-license .info .ttl{font-weight:600;color:#fff;font-size:14px} .footer-license .info .det{font-size:12px;color:#aaa;margin-top:2px} .footer-payments{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .pay-badge{ background:#fff;color:var(--black); padding:6px 12px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.5px; } .footer-social{display:flex;gap:10px;margin-top:14px} .footer-social a{ width:38px;height:38px;border-radius:10px; background:rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center; font-size:16px;transition:all .2s; } .footer-social a:hover{background:var(--yellow);color:var(--black)} /* The row now carries three real destinations (Facebook, Instagram, LINE) instead of one 💬 emoji, so it is a genuine tap target cluster rather than decoration. Restating width/height rather than editing the rule above: 38px is under the 44px WCAG 2.5.8 target minimum, and on a majority-mobile audience three chips 10px apart at 38px are easy to mis-hit. #fff glyph on the .08 white wash over --black (≈#212121) measures 16.0:1, far past the 3:1 non-text graphics need; the :hover rule above is more specific, so black-on-yellow (13.68:1) still wins there. */ .footer-social a{width:44px;height:44px;color:#fff} .footer-social svg.ico{font-size:20px} .footer-bottom{ border-top:1px solid rgba(255,255,255,.08);padding-top:24px; display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; font-size:12px;color:#888; } /* ============ FLOATING LINE BUTTON ============ */ .float-line{ position:fixed;bottom:24px;right:24px;z-index:50; background:#06C755;color:#fff; padding:14px 22px;border-radius:99px; font-weight:700;font-size:15px; box-shadow:0 8px 24px rgba(6,199,85,.4); display:inline-flex;align-items:center;gap:10px; animation:pulse 2s ease-in-out infinite; transition:transform .15s; } .float-line:hover{transform:scale(1.05)} @keyframes pulse{0%,100%{box-shadow:0 8px 24px rgba(6,199,85,.4)}50%{box-shadow:0 8px 28px rgba(6,199,85,.6),0 0 0 8px rgba(6,199,85,.15)}} /* ===================================================================== PAGE HERO — smaller hero used on about/contact/404 (not homepage) ===================================================================== */ .page-hero{ position:relative; min-height:280px; background:var(--black); color:#fff; display:flex;align-items:center;justify-content:center; text-align:center; padding:64px 24px; overflow:hidden; } .page-hero::before{ content:'';position:absolute;inset:0; background-size:cover;background-position:center; opacity:.35; background-image:var(--bg-image,none); } .page-hero::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg, rgba(14,14,14,.4) 0%, rgba(14,14,14,.8) 100%); } .page-hero-inner{position:relative;z-index:2;max-width:760px} .page-hero h1{ font-family:'Mitr',sans-serif; font-size:clamp(32px,4vw,52px); font-weight:700;letter-spacing:-1px;line-height:1.1;margin-bottom:14px; } .page-hero p{font-size:18px;color:#eee;max-width:560px;margin:0 auto} .page-hero .zh{font-family:'Noto Serif SC',serif;color:var(--yellow);font-weight:500;margin-left:10px;font-size:.7em} /* ===================================================================== STORY SECTION — image + text, used on about page ===================================================================== */ .story-grid{ display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; max-width:1180px;margin:0 auto;padding:72px 24px; } @media (max-width:900px){.story-grid{grid-template-columns:1fr;gap:32px;padding:48px 24px}} .story-image{ border-radius:var(--r-lg);overflow:hidden; aspect-ratio:4/3; background-size:cover;background-position:center; box-shadow:var(--shadow-md); } .story-text h2{ font-family:'Mitr',sans-serif; font-size:clamp(28px,3.5vw,40px); font-weight:700;letter-spacing:-1px;color:var(--black);line-height:1.15; margin-bottom:16px; } .story-text h2 .zh{font-family:'Noto Serif SC',serif;font-size:.6em;color:var(--red);margin-left:12px;font-weight:500} .story-text p{color:var(--gray-700);font-size:16px;line-height:1.7;margin-bottom:14px} .story-text strong{color:var(--black)} /* ===================================================================== TEAM SECTION ===================================================================== */ .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media (max-width:900px){.team-grid{grid-template-columns:1fr}} .team-card{ background:#fff;border:1px solid var(--gray-100);border-radius:var(--r-md); padding:28px 24px;text-align:center; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; } .team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .team-avatar{ width:96px;height:96px;border-radius:50%; background:var(--yellow);color:var(--black); font-family:'Mitr',sans-serif;font-size:42px;font-weight:700; display:flex;align-items:center;justify-content:center; margin:0 auto 16px; border:4px solid var(--black); } .team-name{font-family:'Mitr',sans-serif;font-size:18px;font-weight:600;color:var(--black);margin-bottom:4px} .team-role{font-size:13px;color:var(--gray-500);margin-bottom:12px;font-weight:500} .team-line{ display:inline-flex;align-items:center;gap:6px; background:#06C755;color:#fff; padding:6px 14px;border-radius:99px; font-size:12px;font-weight:600; } /* ===================================================================== CERT / LICENSE ROW ===================================================================== */ .cert-row{ display:flex;flex-wrap:wrap;justify-content:center;gap:20px; max-width:1100px;margin:0 auto;padding:48px 24px; } .cert-item{ background:#fff;border:2px solid var(--gray-100);border-radius:var(--r-md); padding:20px 28px; display:flex;align-items:center;gap:14px; min-width:220px; } .cert-item .cert-mark{ width:48px;height:48px;border-radius:10px; background:var(--yellow);color:var(--black); display:flex;align-items:center;justify-content:center; font-size:22px;flex-shrink:0; } .cert-item .cert-info .ttl{font-weight:600;font-size:14px;color:var(--black)} .cert-item .cert-info .det{font-size:12px;color:var(--gray-500);margin-top:2px} /* ===================================================================== CTA BANNER (bottom of about / contact) ===================================================================== */ .cta-banner{ background:var(--yellow);color:var(--black); padding:56px 24px;text-align:center; border-top:4px solid var(--black);border-bottom:4px solid var(--black); } .cta-banner h2{ font-family:'Mitr',sans-serif; font-size:clamp(26px,3.2vw,38px); font-weight:700;letter-spacing:-1px;line-height:1.15;margin-bottom:14px; } .cta-banner p{font-size:16px;color:var(--gray-900);max-width:520px;margin:0 auto 24px} .cta-actions{display:inline-flex;flex-wrap:wrap;gap:12px;justify-content:center} .btn-primary, .btn-secondary{ display:inline-flex;align-items:center;gap:8px; padding:14px 28px;border-radius:99px; font-weight:700;font-family:'Mitr',sans-serif;font-size:16px; transition:transform .15s, box-shadow .2s; } .btn-primary{background:var(--black);color:var(--yellow)} .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn-secondary{background:#06C755;color:#fff} .btn-secondary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(6,199,85,.4)} /* ===================================================================== CONTACT GRID (4 contact methods) ===================================================================== */ .contact-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px; max-width:1180px;margin:0 auto;padding:48px 24px 24px; } @media (max-width:900px){.contact-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:500px){.contact-grid{grid-template-columns:1fr}} .contact-card{ background:#fff;border:1px solid var(--gray-100);border-radius:var(--r-md); padding:28px 22px;text-align:center; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; } .contact-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .contact-icon{ width:60px;height:60px;border-radius:50%; background:var(--yellow);color:var(--black); font-size:28px; display:flex;align-items:center;justify-content:center; margin:0 auto 14px; } .contact-card.line .contact-icon{background:#06C755;color:#fff} .contact-card h3{font-family:'Mitr',sans-serif;font-size:16px;font-weight:600;margin-bottom:6px;color:var(--black)} .contact-card .val{font-size:14px;color:var(--gray-700);line-height:1.5;font-weight:500;margin-bottom:8px;word-break:break-word} .contact-card .hint{font-size:12px;color:var(--gray-500)} /* ===================================================================== CONTACT FORM ===================================================================== */ .form-section{max-width:1180px;margin:0 auto;padding:48px 24px} .form-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:flex-start} @media (max-width:900px){.form-grid{grid-template-columns:1fr}} .contact-form-wrap{ background:#fff;border:1px solid var(--gray-100);border-radius:var(--r-lg); padding:32px;box-shadow:var(--shadow-sm); } .contact-form-wrap h2{ font-family:'Mitr',sans-serif;font-size:24px;font-weight:700; margin-bottom:6px;color:var(--black); } .contact-form-wrap > p{color:var(--gray-700);font-size:14px;margin-bottom:24px} .contact-form{display:flex;flex-direction:column;gap:16px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:600px){.form-row{grid-template-columns:1fr}} .form-field{display:flex;flex-direction:column;gap:6px} .form-field label{ font-size:12px;font-weight:600;color:var(--gray-700); text-transform:uppercase;letter-spacing:.4px; } .form-field label .req{color:var(--red)} .form-field input, .form-field select, .form-field textarea{ font-family:inherit;font-size:15px; padding:11px 14px; border:1.5px solid var(--gray-300); border-radius:10px; background:#fff;color:var(--ink); transition:border-color .15s, box-shadow .15s; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none;border-color:var(--black); box-shadow:0 0 0 3px rgba(255,214,10,.35); } .form-field textarea{resize:vertical;min-height:110px} .form-submit{ margin-top:8px; background:var(--yellow);color:var(--black); padding:14px 28px;border-radius:10px; font-weight:700;font-family:'Mitr',sans-serif;font-size:16px; border:2px solid var(--black); align-self:flex-start; display:inline-flex;align-items:center;gap:8px; transition:transform .15s, background-color .2s; } .form-submit:hover{transform:translateY(-1px);background:var(--yellow-deep)} /* Map placeholder side of form */ .map-placeholder{ background:var(--gray-100); border:2px dashed var(--gray-300); border-radius:var(--r-md); min-height:280px; display:flex;align-items:center;justify-content:center; text-align:center;color:var(--gray-500);font-size:14px; padding:24px; } .map-placeholder .ico{font-size:36px;display:block;margin-bottom:8px} /* ===================================================================== FAQ (static, expanded — no JS toggle required) ===================================================================== */ .faq-section{max-width:880px;margin:0 auto;padding:48px 24px 72px} .faq-section .section-head{justify-content:center;text-align:center} .faq-section .section-head h2{text-align:center} .faq-list{display:flex;flex-direction:column;gap:12px} .faq-item{ background:#fff;border:1px solid var(--gray-100); border-radius:var(--r-md); padding:20px 24px; box-shadow:var(--shadow-sm); } .faq-question{ font-family:'Mitr',sans-serif;font-weight:600;font-size:16px; color:var(--black);margin-bottom:8px; display:flex;align-items:flex-start;gap:10px; } .faq-question::before{ content:'Q.';color:var(--red);font-weight:700;flex-shrink:0; } .faq-answer{ font-size:14px;color:var(--gray-700);line-height:1.65; padding-left:26px; } /* ===================================================================== 404 PAGE ===================================================================== */ .not-found{ min-height:60vh; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center; padding:80px 24px; background:linear-gradient(180deg, var(--yellow-bg) 0%, #fff 100%); } .not-found-emoji{font-size:96px;line-height:1;margin-bottom:8px;animation:float 4s ease-in-out infinite} .not-found-num{ font-family:'Mitr',sans-serif; font-size:clamp(80px,12vw,160px); font-weight:700;line-height:1;letter-spacing:-4px; color:var(--black); background:linear-gradient(180deg, var(--black) 0%, var(--gray-700) 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:8px; } .not-found h1{ font-family:'Mitr',sans-serif;font-size:28px;font-weight:600;color:var(--black); margin-bottom:10px; } .not-found p{color:var(--gray-700);font-size:16px;max-width:460px;margin:0 auto 28px} .not-found-actions{display:inline-flex;flex-wrap:wrap;gap:12px;justify-content:center} /* ===================================================================== TOUR LISTING PAGE — tours.html (city-filtered program grid) ===================================================================== */ /* Breadcrumb (tours.html does not load tour.css, so define it here too) */ .breadcrumb{max-width:1280px;margin:0 auto;padding:18px 24px 0;font-size:13px;color:var(--gray-500)} .breadcrumb a{color:var(--gray-500);transition:color .15s} .breadcrumb a:hover{color:var(--black)} .breadcrumb .sep{margin:0 6px;color:var(--gray-300)} /* Hero banner — city image + title, dark gradient */ .listing-hero{position:relative;overflow:hidden;background:var(--black);color:#fff;margin-top:16px} .listing-hero::before{ content:'';position:absolute;inset:0; background-image:var(--bg-image,none); background-size:cover;background-position:center; opacity:.55;transition:opacity .3s; } .listing-hero::after{ content:'';position:absolute;inset:0; background:linear-gradient(100deg, rgba(14,14,14,.9) 0%, rgba(14,14,14,.6) 55%, rgba(14,14,14,.3) 100%); } .listing-hero-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:54px 24px} .listing-hero-eyebrow{ display:inline-block;background:var(--yellow);color:var(--black); font-weight:700;font-size:12px;letter-spacing:.5px; padding:5px 14px;border-radius:99px;margin-bottom:14px; } .listing-hero h1{ font-family:'Mitr',sans-serif;font-size:clamp(28px,3.4vw,44px); font-weight:700;letter-spacing:-1px;line-height:1.1;margin-bottom:10px; } .listing-hero h1 .zh{font-family:'Noto Serif SC',serif;color:var(--yellow);font-weight:500;font-size:.62em;margin-left:10px} .listing-hero p{font-size:16px;color:#e8e8e8;max-width:600px} /* City chips — horizontal quick filter */ .city-chips-wrap{background:#fff;border-bottom:1px solid var(--gray-100)} .city-chips{max-width:1280px;margin:0 auto;padding:16px 24px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none} .city-chips::-webkit-scrollbar{display:none} .city-chip{ flex:0 0 auto;display:inline-flex;align-items:center;gap:5px; border:1.5px solid var(--gray-300);background:#fff;color:var(--gray-700); font-family:inherit;font-weight:600;font-size:14px; padding:9px 16px;border-radius:99px;transition:all .15s;white-space:nowrap; } .city-chip .zh{font-family:'Noto Serif SC',serif;font-size:.85em;color:var(--gray-500);font-weight:500} .city-chip:hover{border-color:var(--black);color:var(--black)} .city-chip.active{background:var(--black);border-color:var(--black);color:var(--yellow)} .city-chip.active .zh{color:var(--yellow)} /* Toolbar — result count + sort */ .listing-toolbar{ max-width:1280px;margin:0 auto;padding:22px 24px 0; display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; } .listing-count{font-size:15px;color:var(--gray-700)} .listing-count strong{color:var(--black);font-family:'Mitr',sans-serif;font-size:1.05em} .listing-sort{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--gray-700)} .listing-sort select{ font-family:inherit;font-size:14px;font-weight:600;color:var(--black); border:1.5px solid var(--gray-300);background:#fff;border-radius:99px; padding:8px 32px 8px 14px;cursor:pointer; appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%230E0E0E' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center; } .listing-sort select:focus{outline:none;border-color:var(--black)} /* Results block */ .listing-block{padding-top:26px} /* Empty state */ .listing-empty{text-align:center;padding:56px 24px;max-width:480px;margin:0 auto} .listing-empty-emoji{font-size:64px;line-height:1;margin-bottom:12px} .listing-empty h3{font-family:'Mitr',sans-serif;font-size:22px;color:var(--black);margin-bottom:8px} .listing-empty p{color:var(--gray-700);margin-bottom:22px} /* Large LINE button (empty state + CTA strip) */ .btn-line-lg{ display:inline-flex;align-items:center;gap:8px; background:#06C755;color:#fff;font-weight:600;font-size:15px; padding:12px 24px;border-radius:99px; transition:transform .15s, box-shadow .15s;box-shadow:var(--shadow-sm); } .btn-line-lg:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} /* Bottom CTA strip */ .listing-cta{ margin-top:44px;background:var(--yellow-bg);border:2px solid var(--yellow); border-radius:var(--r-lg);padding:28px 32px; display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; } .listing-cta h3{font-family:'Mitr',sans-serif;font-size:22px;color:var(--black);margin-bottom:6px} .listing-cta p{color:var(--gray-700);font-size:15px;max-width:560px} @media (max-width:600px){ .listing-hero-inner{padding:40px 20px} .city-chips{padding:14px 20px} .listing-toolbar{padding:18px 20px 0} .listing-cta{padding:22px 20px;flex-direction:column;align-items:flex-start} } /* ===================================================================== ORIGINAL RESPONSIVE — keep at end so it overrides ===================================================================== */ @media (max-width:1100px){ nav.main-nav{display:none} } /* ===================================================================== GALLERY LIGHTBOX (js/lightbox.js) — site-wide ===================================================================== */ .lb-overlay{ position:fixed;inset:0;z-index:1000; background:rgba(0,0,0,.93); display:none;align-items:center;justify-content:center; } .lb-overlay.open{display:flex} .lb-img{ max-width:92vw;max-height:88vh;object-fit:contain; border-radius:8px;box-shadow:0 12px 50px rgba(0,0,0,.6); } .lb-overlay button{color:#fff;background:rgba(255,255,255,.14);border:none;cursor:pointer;transition:background .15s} .lb-overlay button:hover{background:rgba(255,255,255,.28)} .lb-close{ position:absolute;top:18px;right:22px;z-index:2; width:46px;height:46px;border-radius:50%;font-size:22px;line-height:1; } .lb-nav{ position:absolute;top:50%;transform:translateY(-50%); width:54px;height:54px;border-radius:50%; font-family:'Mitr',sans-serif;font-size:34px;line-height:0; display:flex;align-items:center;justify-content:center; } .lb-prev{left:18px} .lb-next{right:18px} .lb-count{ position:absolute;bottom:20px;left:0;right:0;text-align:center; color:#fff;font-size:14px;letter-spacing:.5px; } @media (max-width:600px){ .lb-nav{width:44px;height:44px;font-size:28px} .lb-close{top:12px;right:12px;width:42px;height:42px} } /* ===================================================================== ██ PRIVATE / PREMIUM CONTENT LAYER — added 2026-07-31 Styling for the new components in integration-spec §2, plus the CSS half of bugs #1, #2, #3, #4, #5 and #11. Everything below is ADDITIVE. No existing rule was deleted or repurposed. No --gold* token, no .surface-* system, no dark theme — this is the yellow-and-black brand only. Contrast budget used throughout (sRGB, WCAG 2.x): #FFFFFF on the hero plate (worst case) 6.78:1 AA body ✓ #4A4A4A (--gray-700) on #FFFBEA 8.54:1 AA body ✓ #0E0E0E (--black) on #FFD60A 13.67:1 AAA ✓ #DE2910 (--red) on #FFFFFF 4.74:1 AA body ✓ #FFD60A (--yellow) on #0E0E0E 13.67:1 AAA ✓ Rejected on measurement, not on taste: #FFD60A (--yellow) on #FFFFFF 1.41:1 banned for text #F5C400 (--yellow-deep) on #FFFFFF 1.64:1 banned for text On light surfaces --yellow only ever appears as a fill, a rule or an icon chip — never as text. --gray-500 was #7A7A7A when this layer was written (4.29:1 on white, 4.14:1 on the cream), which is why the new components below avoid it entirely. The token has since been darkened to #6B6B6B — 5.33:1 on white, 5.14:1 on --yellow-bg — so it now passes AA everywhere it is used. The new components keep --gray-700 regardless: at 10.5-12.5px the extra headroom is worth having. ===================================================================== */ /* --------------------------------------------------------------------- 1 · VISUALLY-HIDDEN HELPER (bug #11) contact.html and tours.html jump h1 → h3. The fix is a real

that is exposed to assistive tech but takes no space, so the visual design is untouched while the document outline becomes valid. --------------------------------------------------------------------- */ .sr-only{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; } /* --------------------------------------------------------------------- 2 · SVG SPRITE ICONS Markup contract (binding, see the sprite list in js/include.js): Sized from font-size so any context can scale a glyph with one declaration, painted with currentColor so it inherits its surface. Scoped to `svg.ico` on purpose: the existing emoji markup (🎫 in .floater / .search-tab / .map-placeholder) must keep working untouched — the owner likes those and they stay. --------------------------------------------------------------------- */ svg.ico{ width:1em;height:1em; font-size:1.15em; flex:0 0 auto; display:inline-block; vertical-align:-.15em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; /* An SVG root clips to its viewBox by default, which shaves half the stroke off any path that touches the edge. Where the glyph sits in a padded chip the overflow stays inside the chip. */ overflow:visible; } /* --------------------------------------------------------------------- 3 · FOCUS-VISIBLE SYSTEM (bug #2) One indicator for the whole site. It has to be legible on four very different backdrops, so it is a two-tone ring rather than one colour: 0–3px from the border box : --yellow (box-shadow spread) 3–6px from the border box : --black (outline at 3px offset) Whichever surface the control sits on, at least one band clears 3:1 against everything it touches: on #FFF black band vs white 19.3:1 on #FFFBEA black band vs cream 18.6:1 on #FFD60A black band vs yellow 13.7:1 on #0E0E0E yellow band vs black 13.7:1 on the hero yellow band vs the dark plate 4.8:1 The two bands also clear 3:1 against each other (13.7:1), so the ring is never ambiguous. No border-radius is declared — outline and box-shadow both follow the element's own radius, so pills stay pills. --------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .tour-pill:focus-visible, .city-chip:focus-visible, .dest-tile:focus-visible, .search-field .input:focus-visible, .nav-toggle:focus-visible, .gallery-item:focus-visible{ outline:3px solid var(--black); outline-offset:3px; box-shadow:0 0 0 3px var(--yellow); } /* Controls that already suppressed their outline behind a weak replacement. These come after the originals, so keyboard users get the real ring while pointer users keep the existing soft :focus look. */ .form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible, .listing-sort select:focus-visible, .nl-form input:focus-visible{ outline:3px solid var(--black); outline-offset:3px; box-shadow:0 0 0 3px var(--yellow); } /* On a black or photographic panel the OUTER black band disappears into the background, leaving the ring's silhouette undefined. On those surfaces the two bands swap: yellow outside (13.7:1 on --black, 4.8:1 on the hero plate), black inside against the control itself. The geometry, thickness and offset are identical, so the indicator reads as one system across the whole site. */ .why-section a:focus-visible, .why-section button:focus-visible, .consult-card a:focus-visible, .consult-card button:focus-visible, .hero a:focus-visible, .hero button:focus-visible, /* `.hero .search-field .input:focus-visible` used to sit here and matched nothing (finding #32): .search-card is a SIBLING of .hero, not a descendant — index.html closes before opening it — so the search fields correctly fall through to the light-surface ring above, which is the right ring for a white card. The selector is dropped rather than rescoped so nobody later relies on a rule that cannot fire. `.hero button:focus-visible` above already covers any real in-hero control. */ footer a:focus-visible, footer button:focus-visible, .topbar a:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; box-shadow:0 0 0 3px var(--black); } /* The newsletter field is borderless inside a pill-shaped shell, so the shell echoes the state as well as the ring on the input itself. */ .nl-form:focus-within{border-color:var(--red)} /* --------------------------------------------------------------------- 4 · SEARCH CARD — display-only fields become real controls (bug #3) js/main.js + index.html swap
for