/* ================== HERO VIDEO AREA ================== */ .home-page .show-desktop { display: block; } .home-page .show-mobile { display: none; } @media (max-width: 767.98px) { .home-page .show-desktop { display: none; } .home-page .show-mobile { display: block; } } /* ============================ Home 首页 Hero 基础样式作用范围： ============================ */ .home-page .hero { position: relative; min-height: 80vh; background: #0e0e0e url("https://hibachiw.s3.us-east-2.amazonaws.com/images/poster/home/hibachi-w-home-hero-desktop.webp") center / cover no-repeat; color: #fff; overflow: hidden; } @media (max-width: 767.98px) { .home-page .hero { min-height: 520px; background-image: url("https://hibachiw.s3.us-east-2.amazonaws.com/images/poster/home/hibachi-w-home-hero-mobile.webp"); } } /* 减少动态效果时：禁用视频 */ @media (prefers-reduced-motion: reduce) { .home-page .hero__video { display: none; } } .home-page .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; } .home-page .hero__overlay { position: relative; z-index: 1; max-width: var(--overlay-maxw, 960px); margin-inline: auto; padding: calc(var(--overlay-pad-top, 60px) + env(safe-area-inset-top, 0px)) var(--overlay-pad-x, 20px) var(--overlay-pad-bottom, 40px); text-align: center; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.35), 0 8px 14px rgba(0,0,0,0.20); } .home-page .hero__overlay::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( to top, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100% ); } .home-page .hero__title { display: block; font-size: clamp(26px, 5.5vw + 4px, 34px); font-weight: 700; line-height: 1.25; margin: 0 0 20px; text-align: center; color: #fff; font-family: sans-serif; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); } .home-page .hero__tagline { font-size: clamp(17px, 2.4vw, 19px); font-weight: 500; line-height: 1.2; margin: 0 0 20px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); color: #fff; } .home-page .hero__logo { color: #fff; font-size: clamp(40px, 6vw + 4px, 48px); font-weight: 700; line-height: 1.1; margin: 10px 0 25px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); } .home-page .hero__logo-highlight { color: #00ff26; text-shadow: 0 2px 6px rgba(0,0,0,.65); } .home-page .hero__price { font-size: clamp(16px, 2.2vw, 18px); color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); margin-bottom: 8px; } .home-page .hero__description { font-size: clamp(14px, 2.2vw, 18px); line-height: 1.5; opacity: .95; font-weight: 400; color: #fff; margin: 0 0 5px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); } .home-page .hero__cta { position: relative; z-index: 3; } .home-page .hero__noscript { width: 100%; height: auto; display: block; } .home-page .hw-btn--invert { --btn-bg: #ffffff; --btn-bg-hover: #d7d3d3; --btn-text: var(--hw-text-main); --btn-text-hover: #495e59; --btn-border: var(--hw-border); font-size: 17px; font-weight: 700; line-height: 18px; padding: 18px 42px; margin: 40px 0 0; box-shadow: none; text-shadow: none; color: #222; } /* ========================================================= Home – Party Intro Block (above photos-home) ========================================================= */ .home-page .home-page-party-intro { padding: clamp(24px, 4vw, 32px) 16px 8px; background: #fffaf6; } .home-page .home-page-party-intro__inner { max-width: 920px; margin: 0 auto; text-align: center; } .home-page .home-page-party-intro__title { font-size: clamp(28px, 4vw, 38px); font-weight: 700; color: #333; margin: 0 0 0.7em; } .home-page .home-page-party-intro__text { font-size: clamp(14px, 2vw, 16px); line-height: 1.7; color: #555; margin: 0.25em auto; max-width: 60rem; font-weight: 500; } .home-page .home-page-party-intro__text--cta { color: #c22525; } .home-page-party-intro__text .home-page-party-intro__text--cta, .home-page .home-page-party-intro__text--highlight strong { font-weight: 600; } /* ============================= Home Page — What is Hibachi W ============================= */ .home-page #what-hibachiw { padding: 26px 12px; text-align: center; background: #ffffff; } .home-page .what__container { max-width: 1100px; margin: 0 auto; } .home-page .what__title { font-size: clamp(32px, 4vw, 42px); font-weight: 700; margin-bottom: 20px; color: #222; } .home-page .what__lead { max-width: 850px; margin: 0 auto 36px; line-height: 1.7; font-size: 16px; color: #333; } .home-page .what__grid { display: grid; gap: 20px; } @media (min-width: 768px) { .home-page .what__grid { grid-template-columns: repeat(3, 1fr); } } .home-page .what__block { text-align: left; background: #f0eeee; padding: 20px 18px; border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.05); } .home-page .what__block h3 { font-size: 18px; margin-bottom: 12px; font-weight: 600; } .home-page .what__block ul { padding-left: 18px; margin: 0; } .home-page .what__block li { margin-bottom: 8px; font-size: 15px; line-height: 1.6; color: #374151; } /* ============================= Home Page — Why Choose Block ============================= */ .home-page #why-hibachiw { padding: 26px 12px; text-align: center; background: #ffffff; } .home-page .why__container { max-width: 1100px; margin: 0 auto; } .home-page .why__title { font-size: clamp(32px, 4vw, 42px); font-weight: 700; margin-bottom: 18px; color: #333; } .home-page .why__lead { max-width: 800px; margin: 0 auto 36px; line-height: 1.7; font-size: 16px; color: #333; } .home-page .why__grid { display: grid; gap: 20px; } @media (min-width: 768px) { .home-page .why__grid { grid-template-columns: repeat(2, 1fr); } } /* Why Section FAQ Note */ .home-page .why__note { max-width: 860px; margin: 22px auto 0; text-align: center; font-size: 0.95rem; line-height: 1.6; color: #555; opacity: 0.95; } @media (max-width: 768px) { .home-page .why__note { font-size: 0.9rem; margin-top: 18px; padding: 0 14px; } } .home-page .why__block { text-align: left; background: #f0eeee; padding: 22px 20px; border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.05); } .home-page .why__block h3 { font-size: 18px; margin-bottom: 10px; font-weight: 600; } .home-page .why__block p { font-size: 15px; line-height: 1.6; color: #444; } /* ========================================================= Home Page – Reviews Section ========================================================= */ .home-page #reviews { padding: 12px 10px 12px; } .home-page #reviews .reviews__container { max-width: 1120px; margin: 0 auto; } /* 网格列表 */ .home-page .reviews-grid__list { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } /* 单个卡片 */ .home-page .reviews-grid__card { background: #ffffff; border-radius: 18px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(15, 23, 42, 0.04); padding: 20px 22px 22px; height: 100%; display: flex; flex-direction: column; transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out; } .home-page .reviews-grid__card:hover { transform: translateY(-3px); border-color: rgba(255, 79, 0, 0.25); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.09), 0 4px 10px rgba(15, 23, 42, 0.06); } /* 卡片头部：头像 + 名字 + 星级 */ .home-page .reviews-grid__header { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; } .home-page .reviews-grid__avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; } .home-page .reviews-grid__author { font-weight: 600; font-size: 0.98rem; color: #111827; } .home-page .reviews-grid__stars { font-size: 0.85rem; color: #f59e0b; } /* 文本内容 */ .home-page .reviews-grid__text { margin: 0; margin-top: 2px; font-size: 0.95rem; line-height: 1.6; color: #374151; } /* 小屏优化 */ @media (max-width: 767.98px) { .home-page #reviews { padding-inline: 12px; } .home-page .reviews-grid__card { padding: 12px 12px; } } /* ============================ Home: How It Works ============================ */ .home-page .how-it-works { padding: 26px 12px; background: #faf7f5; } .home-page .how-it-works__container { max-width: 1120px; margin: 0 auto; text-align: center; } .home-page .how-it-works__title { font-size: clamp(32px, 4vw, 42px); margin-bottom: 12px; color: #333; font-weight: 700; } /* 统一 3×3 布局，手机 1 列 */ .home-page .how-it-works__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 768px) { .home-page .how-it-works__steps { grid-template-columns: 1fr; } } .home-page .how-it-works__step { background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05); text-align: center; } /* Badge */ .home-page .how-it-works__step-badge { width: 38px; height: 38px; margin: 0 auto 10px; border-radius: 999px; border: 2px solid #ff4f00; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #ff4f00; } .home-page .how-it-works__step-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; } .home-page .how-it-works__step-text { font-size: 14px; line-height: 1.6; color: #444; } .home-page .how-it-works__step .how-it-works__step-text strong { font-weight: 600; } /* =========================== Home – Menu & Pricing (最终版) =========================== */ .home-page .home-page-menu { padding: 26px 12px; background: #faf7f5; } .home-page .home-page-menu__container { max-width: 1120px; margin: 0 auto; text-align: center; } .home-page .home-page-menu__title { font-size: clamp(32px, 4vw, 42px); margin-bottom: 16px; color: #333; font-weight: 700; } .home-page .home-page-menu__lead { max-width: 860px; margin: 0 auto 28px; font-size: clamp(14px, 1.7vw, 16px); } .home-page .home-page-menu__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 8px; text-align: left; } .home-page .home-page-menu__col { background: #ffffff; border-radius: 18px; padding: 24px 22px 20px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); } .home-page .home-page-menu__subtitle { font-size: 18px; margin-bottom: 10px; font-weight: 600; } .home-page .home-page-menu__list { margin: 0 0 16px; padding-left: 18px; font-size: 14px; color: #374151; } .home-page .home-page-menu__list li + li { margin-top: 4px; } /* CTA 按钮区域 */ .home-page .home-page-menu__actions { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } @media (max-width: 1024px) { .home-page .home-page-menu__actions { padding: 8px 20px; gap: 10px; } .home-page .home-page-menu__actions .hw-btn { padding: 13px 26px; font-size: 15px; min-height: unset; min-width: 240px; } } @media (max-width: 768px) { .home-page .home-page-menu__actions { padding: 6px 16px; gap: 8px; } .home-page .home-page-menu__actions .hw-btn { padding: 12px 22px; font-size: 14px; border-radius: 999px; } } /* 超小屏 */ @media (max-width: 480px) { .home-page .home-page-menu__actions { padding-inline: 10px; gap: 10px; } .home-page .home-page-menu__actions .hw-btn { padding: 9px 18px; font-size: 12px; width: 100%; max-width: 320px; margin-inline: auto; } } /* ============================ Home – Service Areas ============================ */ .home-page .home-page-areas { padding: 15px 12px 20px; text-align: center; } .home-page .home-page-areas__container { max-width: 1120px; margin: 0 auto; } .home-page .home-page-areas__title { font-size: clamp(32px, 4vw, 42px); font-weight: 700; margin-bottom: 12px; color: #333; } .home-page .home-page-areas__lead { max-width: 800px; margin: 0 auto 28px; font-size: clamp(14px, 1.7vw, 16px); line-height: 1.6; color: #444; } /* List Grid */ .home-page .home-page-areas__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; text-align: left; margin-bottom: 28px; } /* Make entire card clickable */ .home-page .home-page-areas__group { display: block; text-decoration: none; color: inherit; background: #faf7f5; padding: 18px 20px; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03); transition: transform .15s ease, box-shadow .15s ease; } .home-page .home-page-areas__group h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; } .home-page .home-page-areas__group p { margin: 0; font-size: 14px; line-height: 1.4; } /* Hover effect */ .home-page .home-page-areas__group:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.05); } .home-page .action-wrap{ margin: 20px auto; text-align: center; min-width: 240px; } /* Contact button */ /* 公共按钮（base/buttons.css） */ .hw-btn{ padding: 13px 28px; } .hw-btn--cta{ min-width: 240px; } /* ========================================================= Home Page – FAQ (Unified Menu FAQ Structure) ========================================================= */ .home-page .faq-section{ max-width: 1200px; margin: 0 auto 60px; padding: 0 16px; } .home-page .faq-wrap{ width: 100%; } .home-page .faq-title{ font-size: clamp(23px, 2.6vw, 30px); font-weight: 700; line-height: 1.25; text-align: center; margin: 10px 0 20px; padding: 6px 10px; color: #333; } .home-page .faq-intro{ max-width: 960px; margin: 0 auto 18px; font-size: clamp(14px, 2vw, 16px); line-height: 1.65; color: rgba(68,58,58,.85); text-align: center; } /* ---------- Grid ---------- */ .home-page .faq-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; } @media (max-width: 768px){ .home-page .faq-grid{ grid-template-columns: 1fr; gap: 12px; } } /* ---------- FAQ Card ---------- */ .home-page #faq .faq-item{ border-radius: 14px; background: #fff; overflow: hidden; border: 1px solid transparent; box-shadow: 0 4px 14px rgba(0,0,0,.06); transform: translateZ(0); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } @media (hover:hover){ .home-page #faq .faq-item:hover{ transform: translateY(-1px); border-color: #dfdfdf; box-shadow: 0 14px 28px rgba(15,23,42,.10); } } /* ---------- Summary ---------- */ .home-page #faq .faq-item > summary::-webkit-details-marker{ display: none; } .home-page #faq .faq-item > summary{ list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; min-height: 56px; cursor: pointer; font-size: clamp(15px, 2.6vw, 17px); font-weight: 600; line-height: 1.25; color: #222; background: #fff; transition: background .18s ease; width: 100%; user-select: none; } @media (hover:hover){ .home-page #faq .faq-item > summary:hover{ background: #fff7f1; } } .home-page #faq .faq-item > summary:focus-visible{ outline: 2px solid #bdbdbd; outline-offset: 1px; } /* Plus icon */ .home-page #faq .faq-item > summary::after{ content: "+"; margin-left: auto; font-weight: 800; font-size: 20px; line-height: 1; color: #ff6a00; transform: rotate(0deg); transition: transform .20s ease; flex: 0 0 auto; pointer-events: none; } .home-page #faq .faq-item[open] > summary::after{ transform: rotate(45deg); } .home-page #faq .faq-item[open] > summary{ background: #faf2eb; } .home-page #faq .faq-item[open]{ border-color: #eddbcb; box-shadow: 0 10px 24px rgba(15,23,42,.12); } /* ---------- Body ---------- */ .home-page #faq .faq-body{ overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-6px); padding: 0 18px; transition: max-height .32s ease, opacity .22s ease, transform .22s ease, padding .22s ease; } .home-page #faq .faq-item[open] .faq-body{ max-height: 1200px; opacity: 1; transform: translateY(0); padding: 12px 18px 16px; background: #fbfbfb; position: relative; } /* Divider line */ .home-page #faq .faq-item[open] .faq-body::before{ content: ""; display: block; height: 1px; margin: 0 -18px 12px; background: linear-gradient( to right, transparent, rgba(255,106,0,.18), transparent ); } /* ---------- Text ---------- */ .home-page #faq .faq-text{ font-size: clamp(14px, 2.1vw, 16px); line-height: 1.6; color: rgba(68,58,58,.90); margin: 0 0 12px; } .home-page #faq .u-strong, .home-page #faq strong{ font-weight: 600; color: #222; } .home-page #faq .faq-text a, .home-page #faq .faq-body a{ color: #4169e1; font-weight: 600; text-decoration: underline; text-underline-offset: 1px; } /* ---------- Key / Value rows (optional) ---------- */ .home-page #faq .faq-row{ display: grid; grid-template-columns: 120px 1fr; gap: 8px; margin: 8px 0; line-height: 1.6; } .home-page #faq .faq-key{ font-weight: 700; color: #222; } .home-page #faq .faq-val{ color: #444; } @media (max-width: 600px){ .home-page #faq .faq-row{ grid-template-columns: 1fr; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ .home-page #faq .faq-item, .home-page #faq .faq-item > summary, .home-page #faq .faq-item > summary::after, .home-page #faq .faq-body{ transition: none; transform: none; } .home-page #faq .faq-body{ max-height: none; opacity: 1; padding: 12px 18px 16px; } } /* ========================= Home Intro（Hero 下短介绍） ========================= */ .home-page .home-intro { padding: 24px 16px 8px; background: #ffffff; } .home-page .home-intro__container { max-width: 960px; margin: 0 auto; } .home-page .home-intro__text { margin: 0; text-align: center; font-size: 16px; line-height: 1.7; color: #443a3ae6; } @media (max-width: 768px) { .home-page .home-intro { padding-top: 16px; padding-inline: 16px; background: #ffffff; } .home-page .home-intro__text { font-size: 15px; line-height: 1.6; } } /* ================== 内联链接（蓝色下划线） ================== */ .home-page .inline-link { font-size: 16px; color: #443a3ae6; text-decoration: none; } /* ========================================= * Home Page · Locations Hub * ======================================= */ /* 基础：文本与链接 */ .home-page .locations-page a { text-decoration: none; } .home-page .locations-page p { font-size: 14px; color: #443a3ae6; line-height: 1.5; margin-bottom: 8px; } .home-page .locations-page .locations-desc { max-width: 1000px; margin: 2px auto 12px; padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.06); text-align: center; font-size: clamp(13px, 2.6vw, 15px); line-height: 1.6; color: #767676; } .home-page .locations-page .locations-desc {strong font-weight: 600; } /* 顶部标题 */ .home-page .locations-page .locations-header { text-align: center; margin-bottom: 18px; } .home-page .locations-page .locations-title { font-size: clamp(26px, 3.5vw, 32px); font-weight: 700; color: #222; margin: 20px 0 12px; } .home-page .locations-page .locations-subtitle { font-size: clamp(22px, 3vw, 26px); font-weight: 600; color: #B90404; margin: 0; } /* 三列布局 */ .home-page .locations-page .locations-row { margin-top: 15px; } .home-page .locations-page .locations-col { margin-bottom: 24px; padding-left: 15px; padding-right: 15px; } .home-page .locations-page .locations-card { background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); overflow: hidden; display: flex; flex-direction: column; } .home-page .locations-page .locations-card-body { padding: 14px 16px 16px; text-align: center; flex-grow: 1; } /* 区域标题 */ .home-page .locations-page .region-title { margin: 0 0 6px; font-size: clamp(20px, 2.8vw, 24px); font-weight: 700; color: #222; } /* 城市列表 */ .home-page .locations-page .locations-city-list { margin: 0; font-size: clamp(12px, 2.2vw, 14px); line-height: 1.6; color: #555; max-width: 95%; margin-inline: auto; } .home-page .locations-page .locations-city-list a { color: #767676; border-bottom: 1px dashed rgba(0, 0, 0, .2); } .home-page .locations-page .locations-city-list a:hover { border-bottom-style: solid; } /* 区域电话 */ .home-page .locations-page .location-phone { margin: 10px 0; } .home-page .locations-page .location-phone a { font-size: clamp(16px, 2.4vw, 18px); font-weight: 700; color: #3b6ca9ed; } /* 按钮区域 */ .home-page .locations-page .image-button-wrapper { margin: 15px 0; font-weight: 600; } /* 图片 */ .home-page .locations-page .locations-image { position: relative; width: 100%; border-radius: 14px; overflow: hidden; } .home-page .locations-page .locations-image img { display: block; width: 100%; height: auto; object-fit: cover; border: 1px solid #e5e7eb; }