Skip to content

Y
yinzhuang
Commit aa954e49 authored by xuchentao's avatar xuchentao
Browse files
Options

feat: 首页与内页视觉优化及轮播交互改进 

- 首页：移除 hero 区红底 logo 徽章、移除 craft 区长图及印章，步骤改横向四栏布局
- 产品与定制：图文模块取消图片裁剪按原比例展示，银项链条目删除错误配图改单栏
- 关于银妆：品牌故事图片取消竖版裁剪，改用金色错位边框效果
- 门店与服务：重设计六步流程几何图形，连接线与数字圆圈精确相交
- 轮播图：支持鼠标拖拽滚动，拖拽期间禁用滚动吸附与文字选中
parent bfe511a1
Hide whitespace changes
Inline Side-by-side
Showing with 32 additions and 32 deletions
src/components/ProductCarousel.astro
View file @ aa954e49
...@@ -35,5 +35,11 @@ const items = [ ...@@ -35,5 +35,11 @@ const items = [
carousel.querySelector('[data-carousel-prev]')?.addEventListener('click', () => move(-1)); carousel.querySelector('[data-carousel-next]')?.addEventListener('click', () => move(1)); carousel.querySelector('[data-carousel-prev]')?.addEventListener('click', () => move(-1)); carousel.querySelector('[data-carousel-next]')?.addEventListener('click', () => move(1));
const sync = () => { if (!track || !progress) return; const ratio = track.scrollWidth <= track.clientWidth ? 1 : (track.scrollLeft + track.clientWidth) / track.scrollWidth; progress.style.width = `${Math.max(12, ratio * 100)}%`; }; const sync = () => { if (!track || !progress) return; const ratio = track.scrollWidth <= track.clientWidth ? 1 : (track.scrollLeft + track.clientWidth) / track.scrollWidth; progress.style.width = `${Math.max(12, ratio * 100)}%`; };
track?.addEventListener('scroll', sync, { passive: true }); addEventListener('resize', sync); sync(); track?.addEventListener('scroll', sync, { passive: true }); addEventListener('resize', sync); sync();
if (!track) return;
let dragging = false, startX = 0, startScroll = 0;
track.addEventListener('mousedown', (e) => { dragging = true; startX = e.pageX; startScroll = track.scrollLeft; track.classList.add('is-dragging'); e.preventDefault(); });
track.addEventListener('dragstart', (e) => e.preventDefault());
addEventListener('mousemove', (e) => { if (dragging) track.scrollLeft = startScroll - (e.pageX - startX); });
addEventListener('mouseup', () => { dragging = false; track.classList.remove('is-dragging'); });
}); });
</script> </script>
src/pages/about/index.astro
View file @ aa954e49
...@@ -5,7 +5,7 @@ const title = `关于银妆｜${site.brand.name}`; const description = "了解 ...@@ -5,7 +5,7 @@ const title = `关于银妆｜${site.brand.name}`; const description = "了解
--- ---
<Base {title} {description}><Header /><main id="main-content"> <Base {title} {description}><Header /><main id="main-content">
<section class="page-hero" data-word="INZUNG"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / 关于银妆</div><div class="eyebrow"><span></span>ABOUT INZUNG</div><h1>不只卖一件银饰<br/><em>更为一段记忆负责</em></h1><p>十四年行业积淀，让真材实料、手作温度与长期陪伴成为银妆最朴素的坚持。</p></div></section> <section class="page-hero" data-word="INZUNG"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / 关于银妆</div><div class="eyebrow"><span></span>ABOUT INZUNG</div><h1>不只卖一件银饰<br/><em>更为一段记忆负责</em></h1><p>十四年行业积淀，让真材实料、手作温度与长期陪伴成为银妆最朴素的坚持。</p></div></section>
<section id="story" class="section-pad section-cream"><div class="container about-story-grid"><div data-reveal><Image src={image} widths={[480, 720, 960]} sizes="(max-width: 760px) calc(100vw - 32px), 42vw" format="webp" quality={86} alt="银妆古法足银手镯" /></div><div><SectionHeading eyebrow="OUR STORY" title={site.about.heading} />{site.about.story.map((paragraph) => <p class="story-paragraph" data-reveal>{paragraph}</p>)}</div></div></section> <section id="story" class="section-pad section-cream"><div class="container about-story-grid"><div class="about-story__image" data-reveal><Image src={image} widths={[480, 720, 960]} sizes="(max-width: 760px) calc(100vw - 32px), 42vw" format="webp" quality={86} alt="银妆古法足银手镯" /></div><div><SectionHeading eyebrow="OUR STORY" title={site.about.heading} />{site.about.story.map((paragraph) => <p class="story-paragraph" data-reveal>{paragraph}</p>)}</div></div></section>
<section class="stat-band"><div class="container stat-grid">{site.home.stats.map((stat) => <div data-reveal><strong>{stat.value}</strong><p>{stat.label}</p></div>)}</div></section> <section class="stat-band"><div class="container stat-grid">{site.home.stats.map((stat) => <div data-reveal><strong>{stat.value}</strong><p>{stat.label}</p></div>)}</div></section>
<section id="advantages" class="section-pad section-white"><div class="container"><SectionHeading eyebrow="WHY INZUNG" title="从选购到养护，把每一步都交代清楚" description="银妆的专业，不止体现在成品，也体现在你能看见、能理解的全过程。" /><div class="advantage-grid">{site.about.advantages.map((item, index) => <article data-reveal><span>0{index + 1}</span><h3>{item.title}</h3><p>{item.desc}</p></article>)}</div></div></section> <section id="advantages" class="section-pad section-white"><div class="container"><SectionHeading eyebrow="WHY INZUNG" title="从选购到养护，把每一步都交代清楚" description="银妆的专业，不止体现在成品，也体现在你能看见、能理解的全过程。" /><div class="advantage-grid">{site.about.advantages.map((item, index) => <article data-reveal><span>0{index + 1}</span><h3>{item.title}</h3><p>{item.desc}</p></article>)}</div></div></section>
<section id="values" class="section-pad values-section"><div class="container values-grid"><SectionHeading eyebrow="BRAND BELIEF" title="让传统手艺，回到今天的生活" description="坚守透明经营与终身养护，不把传统工艺放在橱窗里，而是让它成为每个人都能参与、佩戴和传承的日常。" light /><blockquote data-reveal>“银有光，手有温度，<br/>心意才有了长久的形状。”</blockquote></div></section> <section id="values" class="section-pad values-section"><div class="container values-grid"><SectionHeading eyebrow="BRAND BELIEF" title="让传统手艺，回到今天的生活" description="坚守透明经营与终身养护，不把传统工艺放在橱窗里，而是让它成为每个人都能参与、佩戴和传承的日常。" light /><blockquote data-reveal>“银有光，手有温度，<br/>心意才有了长久的形状。”</blockquote></div></section>
......
src/pages/index.astro
View file @ aa954e49
...@@ -9,8 +9,6 @@ import { site } from "../data/site"; ...@@ -9,8 +9,6 @@ import { site } from "../data/site";
import { getPublishedArticles } from "../lib/articles"; import { getPublishedArticles } from "../lib/articles";
import { fmtDate } from "../lib/articles"; import { fmtDate } from "../lib/articles";
import hero from "../../pic/product/微信图片_20260508131943_573_199.jpg"; import hero from "../../pic/product/微信图片_20260508131943_573_199.jpg";
import detail from "../../pic/product/优先-画板 1(3).jpg";
import logoRed from "../../pic/LOGO-红底白字-底较大.png";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
const latest = (await getPublishedArticles()).slice(0, 3); const latest = (await getPublishedArticles()).slice(0, 3);
const title = `银妆银饰｜足银首饰、手工定制与终身养护`; const title = `银妆银饰｜足银首饰、手工定制与终身养护`;
...@@ -32,7 +30,6 @@ const jsonLd = { "@context": "https://schema.org", "@type": "WebSite", name: sit ...@@ -32,7 +30,6 @@ const jsonLd = { "@context": "https://schema.org", "@type": "WebSite", name: sit
</div> </div>
<div class="hero__visual" data-reveal> <div class="hero__visual" data-reveal>
<div class="hero__image"><Image src={hero} widths={[480, 720, 960]} sizes="(max-width: 760px) calc(100vw - 60px), 48vw" format="webp" quality={88} alt="银妆古法鎏金足银手镯" fetchpriority="high" /></div> <div class="hero__image"><Image src={hero} widths={[480, 720, 960]} sizes="(max-width: 760px) calc(100vw - 60px), 48vw" format="webp" quality={88} alt="银妆古法鎏金足银手镯" fetchpriority="high" /></div>
<div class="hero-seal"><Image src={logoRed} width={148} height={149} format="webp" quality={88} alt="银妆" /><span>INZUNG<br/>SILVER</span></div>
<div class="hero-caption"><span>01</span><div><strong>古法錾金</strong><small>手工温度，历久弥新</small></div></div> <div class="hero-caption"><span>01</span><div><strong>古法錾金</strong><small>手工温度，历久弥新</small></div></div>
</div> </div>
</div> </div>
...@@ -55,7 +52,6 @@ const jsonLd = { "@context": "https://schema.org", "@type": "WebSite", name: sit ...@@ -55,7 +52,6 @@ const jsonLd = { "@context": "https://schema.org", "@type": "WebSite", name: sit
<section id="craft" class="section-pad craft-section"> <section id="craft" class="section-pad craft-section">
<div class="container craft-grid"> <div class="container craft-grid">
<div class="craft-visual" data-reveal><Image src={detail} widths={[480, 720, 960]} sizes="(max-width: 760px) calc(100vw - 62px), 42vw" format="webp" quality={86} alt="平安喜乐宝宝足银对镯" loading="lazy" /><div class="craft-visual__stamp">手作<br/>有温度</div></div>
<div class="craft-content"><SectionHeading eyebrow="CRAFT & CUSTOM" title="一双手，一件银，一段只属于你的故事" description="从沟通构想到交付养护，每一步都把透明、专业与专属做到细处。" light /> <div class="craft-content"><SectionHeading eyebrow="CRAFT & CUSTOM" title="一双手，一件银，一段只属于你的故事" description="从沟通构想到交付养护，每一步都把透明、专业与专属做到细处。" light />
<ol class="craft-steps">{[ <ol class="craft-steps">{[
["01", "沟通构想", "确认用途、预算、材质、尺寸与风格偏好"], ["02", "设计定稿", "梳理图案、刻字与工艺细节，明确交付方案"], ["03", "匠人打制", "由专业匠人完成锻打、錾刻、焊接与抛光"], ["04", "交付养护", "配套质检与长期养护，让心意一直焕新"], ["01", "沟通构想", "确认用途、预算、材质、尺寸与风格偏好"], ["02", "设计定稿", "梳理图案、刻字与工艺细节，明确交付方案"], ["03", "匠人打制", "由专业匠人完成锻打、錾刻、焊接与抛光"], ["04", "交付养护", "配套质检与长期养护，让心意一直焕新"],
......
src/pages/services/index.astro
View file @ aa954e49
--- ---
import Base from "../../layouts/Base.astro"; import Header from "../../components/Header.astro"; import Footer from "../../components/Footer.astro"; import SectionHeading from "../../components/SectionHeading.astro"; import ProductCarousel from "../../components/ProductCarousel.astro"; import CTA from "../../components/CTA.astro"; import { site } from "../../data/site"; import Base from "../../layouts/Base.astro"; import Header from "../../components/Header.astro"; import Footer from "../../components/Footer.astro"; import SectionHeading from "../../components/SectionHeading.astro"; import ProductCarousel from "../../components/ProductCarousel.astro"; import CTA from "../../components/CTA.astro"; import { site } from "../../data/site";
import b1 from "../../../pic/product/微信图片_20260508131941_571_199.jpg"; import b2 from "../../../pic/product/优先-画板 1(1).jpg"; import b3 from "../../../pic/product/22.jpg"; import b4 from "../../../pic/product/微信图片_20260508131948_578_199.jpg"; import b1 from "../../../pic/product/微信图片_20260508131941_571_199.jpg"; import b2 from "../../../pic/product/优先-画板 1(1).jpg"; import b3 from "../../../pic/product/22.jpg";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
const images = [b1, b2, b3, b4]; const images = [b1, b2, b3, null];
const title = `产品与定制｜${site.brand.name}`; const description = "探索银妆足银手镯、银饰DIY编织、银耳环、银项链与私人定制服务。"; const title = `产品与定制｜${site.brand.name}`; const description = "探索银妆足银手镯、银饰DIY编织、银耳环、银项链与私人定制服务。";
--- ---
<Base {title} {description}><Header /><main id="main-content"> <Base {title} {description}><Header /><main id="main-content">
<section class="page-hero page-hero--product" data-word="SILVER"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / 产品与定制</div><div class="eyebrow"><span></span>PRODUCT & CUSTOM</div><h1>匠心银作<br/><em>专属信物</em></h1><p>以足银为载体，融合古法手工与个性化定制，满足自戴、送礼、纪念与旧银新生的多重需要。</p></div></section> <section class="page-hero page-hero--product" data-word="SILVER"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / 产品与定制</div><div class="eyebrow"><span></span>PRODUCT & CUSTOM</div><h1>匠心银作<br/><em>专属信物</em></h1><p>以足银为载体，融合古法手工与个性化定制，满足自戴、送礼、纪念与旧银新生的多重需要。</p></div></section>
<nav class="anchor-nav"><div class="container">{site.products.map((item) => <a href={`#${item.slug}`}><span>{item.index}</span>{item.name}</a>)}</div></nav> <nav class="anchor-nav"><div class="container">{site.products.map((item) => <a href={`#${item.slug}`}><span>{item.index}</span>{item.name}</a>)}</div></nav>
<section class="section-pad section-cream"><div class="container product-detail-list">{site.products.map((item, index) => <article id={item.slug} class:list={["product-detail", { "product-detail--reverse": index % 2 }]}> <section class="section-pad section-cream"><div class="container product-detail-list">{site.products.map((item, index) => <article id={item.slug} class:list={["product-detail", { "product-detail--reverse": index % 2, "product-detail--no-image": !images[index] }]}>
<div class="product-detail__image" data-reveal><Image src={images[index]} widths={[480, 720, 960]} sizes="(max-width: 760px) calc(100vw - 62px), 44vw" format="webp" quality={86} alt={item.name} loading={index ? "lazy" : "eager"} /><span>{item.index}</span></div> {images[index] && <div class="product-detail__image" data-reveal><Image src={images[index]} widths={[480, 720, 960]} sizes="(max-width: 760px) calc(100vw - 62px), 44vw" format="webp" quality={86} alt={item.name} loading={index ? "lazy" : "eager"} /><span>{item.index}</span></div>}
<div class="product-detail__content" data-reveal><div class="eyebrow"><span></span>INZUNG {item.index}</div><h2>{item.name}</h2><p class="lead">{item.intro}</p><ul>{item.features.map((feature) => <li><span>✓</span>{feature}</li>)}</ul><div class="spec-box"><strong>规格与工艺</strong><p>{item.specification}</p></div><a class="button button--outline" href="tel:4008113922">咨询该系列</a></div> <div class="product-detail__content" data-reveal><div class="eyebrow"><span></span>INZUNG {item.index}</div><h2>{item.name}</h2><p class="lead">{item.intro}</p><ul>{item.features.map((feature) => <li><span>✓</span>{feature}</li>)}</ul><div class="spec-box"><strong>规格与工艺</strong><p>{item.specification}</p></div><a class="button button--outline" href="tel:4008113922">咨询该系列</a></div>
</article>)}</div></section> </article>)}</div></section>
<section class="section-pad section-white"><div class="container"><SectionHeading eyebrow="MORE SILVER PIECES" title="更多银妆产品" description="不同款式与工艺持续上新，具体库存、圈口与克重欢迎咨询门店。" /><ProductCarousel /></div></section> <section class="section-pad section-white"><div class="container"><SectionHeading eyebrow="MORE SILVER PIECES" title="更多银妆产品" description="不同款式与工艺持续上新，具体库存、圈口与克重欢迎咨询门店。" /><ProductCarousel /></div></section>
......
src/styles/global.css
View file @ aa954e49
...@@ -137,8 +137,9 @@ h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; lin ...@@ -137,8 +137,9 @@ h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; lin
.gallery-section { overflow: hidden; } .gallery-section { overflow: hidden; }
.product-carousel__viewport { overflow: hidden; } .product-carousel__viewport { overflow: hidden; }
.product-carousel__track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .product-carousel__track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.product-carousel__track::-webkit-scrollbar { display: none; } .product-carousel__track::-webkit-scrollbar { display: none; }
.product-carousel__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.product-slide { flex: 0 0 min(31vw, 390px); scroll-snap-align: start; } .product-slide { flex: 0 0 min(31vw, 390px); scroll-snap-align: start; }
.product-slide__image { aspect-ratio: 1 / 1; overflow: hidden; background: #eee8df; } .product-slide__image { aspect-ratio: 1 / 1; overflow: hidden; background: #eee8df; }
.product-slide__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; } .product-slide__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
...@@ -152,17 +153,13 @@ h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; lin ...@@ -152,17 +153,13 @@ h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; lin
.product-carousel__controls button { width: 46px; height: 46px; margin-left: 8px; background: transparent; border: 1px solid var(--border); color: var(--ink); } .product-carousel__controls button { width: 46px; height: 46px; margin-left: 8px; background: transparent; border: 1px solid var(--border); color: var(--ink); }
.product-carousel__controls button:hover { background: var(--ink); color: #fff; } .product-carousel__controls button:hover { background: var(--ink); color: #fff; }
.craft-section { background: var(--ink); } .craft-section { background: var(--ink); padding: 88px 0; }
.craft-grid { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(55px, 8vw, 115px); } .craft-grid { display: grid; grid-template-columns: 1fr; }
.craft-visual { position: relative; padding: 30px 0 30px 30px; } .craft-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3.5vw, 48px); margin: 44px 0 38px; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.13); }
.craft-visual::before { position: absolute; inset: 0 25% 0 0; border: 1px solid rgba(244,220,132,.35); content: ""; } .craft-steps li { padding-top: 26px; }
.craft-visual img { position: relative; width: 100%; aspect-ratio: .82; object-fit: cover; } .craft-steps li > span { display: block; color: var(--gold); font-family: var(--serif); }
.craft-visual__stamp { position: absolute; right: -20px; bottom: 0; display: grid; width: 105px; height: 105px; place-content: center; background: var(--primary); color: var(--gold); border-radius: 50%; text-align: center; font-family: var(--serif); font-size: 17px; line-height: 1.35; } .craft-steps h3 { margin: 8px 0 6px; color: #fff; font-size: 20px; }
.craft-steps { margin: 42px 0 36px; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.13); } .craft-steps p { margin: 0; color: #bfb6ae; font-size: 14px; line-height: 1.7; }
.craft-steps li { display: grid; grid-template-columns: 60px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.craft-steps li > span { color: var(--gold); font-family: var(--serif); }
.craft-steps h3 { margin: 0 0 5px; color: #fff; font-size: 20px; }
.craft-steps p { margin: 0; color: #bfb6ae; font-size: 14px; }
.brand-story-grid { display: grid; grid-template-columns: 1fr .55fr .9fr; gap: 60px; align-items: center; } .brand-story-grid { display: grid; grid-template-columns: 1fr .55fr .9fr; gap: 60px; align-items: center; }
.brand-story-number { position: relative; text-align: center; } .brand-story-number { position: relative; text-align: center; }
...@@ -216,9 +213,10 @@ h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; lin ...@@ -216,9 +213,10 @@ h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; lin
.product-detail-list { display: grid; gap: 120px; } .product-detail-list { display: grid; gap: 120px; }
.product-detail { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(55px, 8vw, 110px); scroll-margin-top: 160px; } .product-detail { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(55px, 8vw, 110px); scroll-margin-top: 160px; }
.product-detail--reverse .product-detail__image { order: 2; } .product-detail--reverse .product-detail__image { order: 2; }
.product-detail--no-image { grid-template-columns: 1fr; max-width: 720px; }
.product-detail__image { position: relative; padding: 0 0 30px 30px; } .product-detail__image { position: relative; padding: 0 0 30px 30px; }
.product-detail__image::before { position: absolute; inset: 30px 30px 0 0; border: 1px solid var(--gold-deep); content: ""; } .product-detail__image::before { position: absolute; inset: 30px 30px 0 0; border: 1px solid var(--gold-deep); content: ""; }
.product-detail__image img { position: relative; aspect-ratio: 1; width: 100%; object-fit: cover; } .product-detail__image img { position: relative; display: block; width: 100%; height: auto; }
.product-detail__image > span { position: absolute; bottom: 0; left: 0; display: grid; width: 86px; height: 86px; place-items: center; background: var(--primary); color: var(--gold); font-family: var(--serif); font-size: 26px; } .product-detail__image > span { position: absolute; bottom: 0; left: 0; display: grid; width: 86px; height: 86px; place-items: center; background: var(--primary); color: var(--gold); font-family: var(--serif); font-size: 26px; }
.product-detail__content h2 { margin-bottom: 20px; font-size: clamp(38px, 4vw, 55px); } .product-detail__content h2 { margin-bottom: 20px; font-size: clamp(38px, 4vw, 55px); }
.product-detail__content .lead { color: var(--text); font-size: 17px; } .product-detail__content .lead { color: var(--text); font-size: 17px; }
...@@ -229,7 +227,9 @@ h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; lin ...@@ -229,7 +227,9 @@ h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; lin
.spec-box p { margin: 7px 0 0; color: var(--muted); font-size: 14px; } .spec-box p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.about-story-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: clamp(55px, 8vw, 110px); } .about-story-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: clamp(55px, 8vw, 110px); }
.about-story-grid img { width: 100%; aspect-ratio: .82; object-fit: cover; } .about-story__image { position: relative; padding: 0 0 30px 30px; }
.about-story__image::before { position: absolute; inset: 30px 30px 0 0; border: 1px solid var(--gold-deep); content: ""; }
.about-story__image img { position: relative; display: block; width: 100%; height: auto; }
.story-paragraph { color: var(--text); font-size: 16px; } .story-paragraph { color: var(--text); font-size: 16px; }
.advantage-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 52px; border-left: 1px solid var(--border); } .advantage-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 52px; border-left: 1px solid var(--border); }
.advantage-grid article { min-height: 270px; padding: 34px; border-block: 1px solid var(--border); border-right: 1px solid var(--border); } .advantage-grid article { min-height: 270px; padding: 34px; border-block: 1px solid var(--border); border-right: 1px solid var(--border); }
...@@ -240,11 +240,11 @@ h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; lin ...@@ -240,11 +240,11 @@ h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; lin
.values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; } .values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.values-grid blockquote { margin: 0; padding: 45px; border: 1px solid rgba(244,220,132,.36); color: var(--gold); font-family: var(--serif); font-size: clamp(28px, 3.2vw, 45px); line-height: 1.55; } .values-grid blockquote { margin: 0; padding: 45px; border: 1px solid rgba(244,220,132,.36); color: var(--gold); font-family: var(--serif); font-size: clamp(28px, 3.2vw, 45px); line-height: 1.55; }
.flow-grid { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 60px; } .flow-grid { --marker: 56px; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 60px; }
.flow-grid > div { position: relative; padding: 30px 12px; text-align: center; } .flow-grid > div { position: relative; padding: 0 12px; text-align: center; }
.flow-grid > div:not(:last-child)::after { position: absolute; top: 48px; right: -15px; width: 30px; height: 1px; background: var(--gold-deep); content: ""; } .flow-grid > div:not(:last-child)::after { position: absolute; top: calc(var(--marker) / 2); left: calc(50% + var(--marker) / 2 - 1px); width: calc(100% - var(--marker) + 2px); height: 1px; background: var(--gold-deep); content: ""; }
.flow-grid span { display: grid; width: 65px; height: 65px; margin: 0 auto 18px; place-items: center; border: 1px solid var(--gold-deep); border-radius: 50%; color: var(--primary); font-family: var(--serif); } .flow-grid span { position: relative; z-index: 1; display: grid; width: var(--marker); height: var(--marker); margin: 0 auto 16px; place-items: center; background: var(--surface); border: 1px solid var(--gold-deep); border-radius: 50%; color: var(--primary); font-family: var(--serif); }
.flow-grid strong { color: var(--ink); } .flow-grid strong { display: block; color: var(--ink); font-size: 16px; }
.store-service-section { background: var(--ink); } .store-service-section { background: var(--ink); }
.store-service-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; align-items: center; } .store-service-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; align-items: center; }
.service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
...@@ -401,10 +401,8 @@ h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; lin ...@@ -401,10 +401,8 @@ h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 700; lin
.product-category-grid, .scene-grid, .promise-grid { grid-template-columns: 1fr; } .product-category-grid, .scene-grid, .promise-grid { grid-template-columns: 1fr; }
.product-category-card { min-height: 270px; } .product-category-card { min-height: 270px; }
.product-slide { flex-basis: 78vw; } .product-slide { flex-basis: 78vw; }
.craft-grid, .about-story-grid, .values-grid, .store-service-grid, .faq-layout, .contact-hero__grid, .visit-grid { grid-template-columns: 1fr; } .about-story-grid, .values-grid, .store-service-grid, .faq-layout, .contact-hero__grid, .visit-grid { grid-template-columns: 1fr; }
.craft-grid { gap: 58px; } .craft-steps { grid-template-columns: repeat(2, 1fr); }
.craft-visual { max-width: 520px; }
.craft-visual__stamp { right: 0; }
.brand-story-grid { grid-template-columns: 1fr; gap: 45px; } .brand-story-grid { grid-template-columns: 1fr; gap: 45px; }
.brand-story-number { order: initial; text-align: left; } .brand-story-number { order: initial; text-align: left; }
.cta-band__inner { min-height: 420px; align-items: flex-start; flex-direction: column; justify-content: center; } .cta-band__inner { min-height: 420px; align-items: flex-start; flex-direction: column; justify-content: center; }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment