========================================================= */ .home-page-gallery { padding: clamp(20px, 4vw, 32px) 0 32px; background: #ffffff; } .home-page-gallery .gallery__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 1100px; margin: 0 auto; padding: 0 10px; } .home-page-gallery .gallery__item { padding: 5px; background: #fff; overflow: hidden; } .home-page-gallery .gallery__image { display: block; width: 100%; height: auto; object-fit: cover; object-position: 50% 50%; border-radius: 8px; transition: transform 0.22s ease, box-shadow 0.22s ease; } /* hover 只在桌面端增强一点 */ @media (hover:hover) and (pointer:fine) { .home-page-gallery .gallery__image:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); } } /* 响应式：平板两列，手机一列 */ @media (max-width: 991.98px) { .home-page-gallery .gallery__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .home-page-gallery .gallery__track { grid-template-columns: 1fr; } } /* ========================= Home page – Plan Your Hibachi Party 区块 ========================= */ .home-page .colpadding { padding-left: 15px; padding-right: 15px; margin-bottom: 20px; } .home-page .image-title-wrapper { text-align: center; } /* 文本居中（Squarespace 自带类配合） */ .home-page .image-block-stack-text-alignment-center .sqs-block-image .design-layout-stack .image-card > * { text-align: center !important; } .home-page .sqs-block-image .design-layout-stack .image-card-wrapper .image-subtitle-wrapper div.image-subtitle.sqs-dynamic-text { margin-top: 12px; } .image-subtitle a { font-size: clamp(13px, 1.6vw, 14px); color: #303235; } .image-title{padding:0.1rem 0;} .image-title h3{font-size: 1.7em;} /* 下方按钮区域 */ .home-page .image-button-wrapper { width: 60%; margin: 0 auto; margin-top: 12px; } .home-page .image-button { font-size: max(0.75rem, 25.8%); background: #C22525; padding: 0.8rem 2rem; border-radius: 300px; text-align: center; color: #fff; } .home-page .image-button:hover { background-color: #B90404; color: #fff; } /* 备用 button 容器（如果以后要用） */ .home-page .sqs-block-button-container { margin-top: 1rem; } .home-page .sqs-block-button-container a { font-size: max(0.75rem, 25.8%); padding: 1.2rem 2rem; margin: 1.2rem 2rem; border-radius: 300px; border: 0.1rem solid #C22525; text-align: center; color: #C22525; } .home-page .sqs-block-button-container a:hover { color: #fff; background-color: #C22525; border: 0.1rem solid #fff; } /* 当前 primary 按钮文字 */ .home-page .sqs-button-element--primary { color: #fff; font-size: 1rem; } /* ========================= Section Divider 相关（保持和现在效果一样） ========================= */ .home-page .has-section-divider[data-section-id="660c79a84dff0c3516362fb2"] { padding-bottom: var(--divider-height); z-index: var(--z-index); } .home-page .has-section-divider[data-section-id="660c79a84dff0c3516362fb2"] .background-pause-button { bottom: calc(14px + var(--divider-height)); } .home-page .has-section-divider[data-section-id="660c79a84dff0c3516362fb2"] .section-divider-svg-clip { display: none; } .home-page .has-section-divider[data-section-id="660c79a84dff0c3516362fb2"].background-width--inset:not(.content-collection):not(.gallery-section):not(.user-items-list-section) { padding-bottom: calc(var(--sqs-site-gutter) + var(--divider-height)); } .home-page .has-section-divider[data-section-id="660c79a84dff0c3516362fb2"].background-width--inset:not(.content-collection):not(.gallery-section):not(.user-items-list-section) .section-background { bottom: calc(var(--sqs-site-gutter) + var(--divider-height)); } .home-page .has-section-divider[data-section-id="660c79a84dff0c3516362fb2"] .section-divider-block { height: var(--divider-height); } .home-page [data-section-id="660c79a84dff0c3516362fb2"] { --divider-height: 0px; --z-index: 6; } .home-page [data-section-id="65e8cb45f3d7974ead7d6c43"] { --previous-section-divider-offset: 0px; } /* ========================================================= Home Page – Reviews Section 结构对应：

...

========================================================= */ .home-page #what-hibachiw { padding: 26px 12px; text-align: center; } .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: 780px; 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); } } .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; } .home-page .how-it-works__lead { max-width: 720px; margin: 0 auto 28px; font-size: clamp(14px, 1.7vw, 16px); line-height: 1.6; color: #333; } .home-page .how-it-works__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .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 (3x3) ============================ */ .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 – 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; } .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; } .home-page .home-page-menu__actions { margin-top: 4px; } .home-page .home-page-menu__btn { display: inline-block; padding: 10px 20px; border-radius: 999px; background: #ff4f00; color: #fff; font-weight: 600; font-size: 14px; } .home-page .home-page-menu__btn:hover, .home-page .home-page-menu__btn:focus { background: #e54400; } .home-page .home-page-menu__link { display: inline-block; margin-left: 12px; font-size: 14px; text-decoration: underline; } /* ============================ Home – Service Areas (FINAL) ============================ */ .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; } .home-page .home-page-areas__group { 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); } .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; } /* Contact button */ .home-page .home-page-areas__btn { display: inline-block; padding: 10px 24px; border-radius: 999px; background: #ff4f00; color: #fff; font-weight: 600; font-size: 15px; transition: 0.2s ease; margin: 20px; } .home-page .home-page-areas__btn:hover { background: #e54400; } /* 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; } /* 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 – FAQ Section ================== */ .home-page .home-faq { padding: 20px 16px 60px; } .home-page .home-faq__container { max-width: 1200px; margin: 0 auto; } .home-page .home-faq__title { text-align: center; font-size: clamp(32px, 4vw, 42px); font-weight: 700; color: #333; margin-bottom: 28px; } /* GRID – 2 columns (desktop) / 1 column (mobile) */ .home-page .home-faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 768px) { .home-page .home-faq__grid { grid-template-columns: 1fr; } } /* FAQ CARD */ .home-page .home-faq__item { background:#f9f9f9; border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; } .home-page .home-faq__item:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.10); } /* SUMMARY HEADER */ .home-page .home-faq__item > summary { cursor: pointer; list-style: none; padding: 18px 20px; position: relative; background: #f3eee9; font-size: clamp(15px, 1.6vw, 17px); font-weight: 700; color: #333; } /* REMOVE DEFAULT MARKER */ .home-page .home-faq__item > summary::-webkit-details-marker { display: none; } /* PLUS SIGN */ .home-page .home-faq__item > summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; color: #ff6a00; font-weight: 700; transition: 0.2s; } .home-page .home-faq__item[open] > summary::after { content: "×"; color: #ff6a00; } /* BODY (answer) */ .home-page .home-faq__body { padding: 0 20px 18px; font-size: clamp(14px, 1.7vw, 16px); color: #444; line-height: 1.6; }