:root { --ink:#13231c; --forest:#1d4034; --pink:#ef6e94; --yellow:#ffd34d; --paper:#faf9f5; --quiet:#5e6962; --line:rgb(19 35 28 / 17%); --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; --serif:"Noto Serif SC","Songti SC",serif; --ease:cubic-bezier(.22,1,.36,1); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.65; } a { color:inherit; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--serif); text-wrap:balance; }
.demo-note { display:grid; min-height:34px; place-items:center; margin:0; padding:8px 20px; background:var(--yellow); color:#33260b; font-size:.72rem; font-weight:800; text-align:center; }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.88fr); min-height:720px; overflow:hidden; background:var(--forest); color:#fffdf7; }.nav { position:absolute; z-index:2; top:0; right:0; left:0; display:flex; justify-content:space-between; align-items:center; padding:25px clamp(24px,4vw,64px); font-size:.84rem; font-weight:800; }.back,.nav-link { text-decoration:none; }.nav-link { color:#fff6cd; }.hero-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(96px,12vw,185px) clamp(24px,6vw,108px); }.kicker,.section-label { color:var(--yellow); font-size:.73rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }.hero h1 { max-width:10ch; margin:.8rem 0 1.5rem; font-size:clamp(3.35rem,5.9vw,6.3rem); letter-spacing:-.04em; line-height:1; }.hero h1 em { color:#ffc0d0; font-style:normal; }.hero-copy > p:not(.kicker) { max-width:29ch; margin-bottom:2rem; color:#e2eee7; font-size:1.05rem; }.hero-action,.closing a { display:inline-flex; align-items:center; gap:1rem; width:fit-content; padding:15px 18px; background:var(--yellow); color:#172219; font-weight:900; text-decoration:none; transition:transform 180ms var(--ease),background 180ms var(--ease); }.hero-action:hover,.closing a:hover { background:#ffe68a; transform:translateY(-2px); }.hero-photo { position:relative; min-height:100%; margin:0; overflow:hidden; }.hero-photo::after { position:absolute; inset:0; background:linear-gradient(90deg,rgb(29 64 52 / 48%),transparent 45%); content:""; }.hero-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.93) contrast(.97); }.hero-photo figcaption { position:absolute; z-index:1; right:clamp(20px,4vw,52px); bottom:28px; left:clamp(20px,4vw,52px); color:white; font-size:.78rem; font-weight:700; }
.bouquets { padding:clamp(88px,12vw,172px) max(24px,calc((100vw - 1200px)/2)); }.bouquets-head { display:flex; justify-content:space-between; gap:32px; align-items:end; }.bouquets-head .section-label { margin:0 0 .55rem; color:#a83355; }.bouquets h2 { max-width:12ch; margin:0; font-size:clamp(2.65rem,5.2vw,5.9rem); letter-spacing:-.04em; line-height:1.07; }.bouquet-gallery { display:grid; grid-template-columns:minmax(0,.96fr) minmax(0,1.1fr) minmax(0,.8fr); gap:clamp(12px,2vw,28px); align-items:start; margin-top:clamp(52px,7vw,92px); }.bouquet-card { position:relative; min-height:470px; margin:0; overflow:hidden; background:var(--ink); color:#fff; }.bouquet-card--pink { transform:translateY(60px); }.bouquet-card--sun { min-height:610px; }.bouquet-card--note { transform:translateY(120px); }.bouquet-card img { display:block; width:100%; height:100%; min-height:inherit; object-fit:cover; transition:transform 600ms var(--ease); }.bouquet-card:hover img { transform:scale(1.04); }.bouquet-card::after { position:absolute; inset:0; background:linear-gradient(0deg,rgb(9 19 14 / 84%),transparent 60%); content:""; }.bouquet-card figcaption { position:absolute; z-index:1; right:22px; bottom:20px; left:22px; }.bouquet-card span { display:block; margin-bottom:7px; color:#fff8c7; font-size:.7rem; font-weight:900; letter-spacing:.08em; }.bouquet-card h3 { margin:0; font-size:clamp(1.9rem,3.2vw,3.45rem); letter-spacing:-.035em; line-height:1.06; }.bouquet-card b { display:block; margin-top:10px; font-size:.83rem; }.bouquet-card--sun::after { background:linear-gradient(0deg,rgb(69 37 5 / 82%),transparent 63%); }.bouquet-card--note::after { background:linear-gradient(0deg,rgb(21 24 20 / 86%),transparent 64%); }
.delivery { display:flex; justify-content:space-between; gap:42px; align-items:end; margin-top:clamp(130px,17vw,250px); padding:clamp(48px,7vw,86px) max(24px,calc((100vw - 1200px)/2)); background:#f3dfca; }.delivery > p { max-width:11ch; margin:0; color:#613342; font-family:var(--serif); font-size:clamp(1.65rem,2.5vw,2.7rem); line-height:1.2; }.delivery-points { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px 28px; }.delivery-points span { color:#543b3b; font-size:.86rem; white-space:nowrap; }.delivery-points b { margin-right:8px; color:#a83355; font-size:.74rem; }
.closing { padding:clamp(100px,14vw,190px) max(24px,calc((100vw - 1200px)/2)); background:var(--pink); color:#2d1720; }.closing > p { margin-bottom:20px; color:#613342; font-size:.76rem; font-weight:850; }.closing h2 { max-width:13ch; margin:0; font-size:clamp(3rem,6vw,6.8rem); letter-spacing:-.05em; line-height:1.02; }.closing a { margin-top:38px; background:#292f1c; color:#fffcef; }.closing a:hover { background:#172219; }.closing a span { color:var(--yellow); } footer { display:flex; justify-content:space-between; gap:18px; padding:22px max(24px,calc((100vw - 1200px)/2)); background:var(--ink); color:#d2e1d5; font-size:.76rem; } footer a { color:#fff8c7; font-weight:800; text-decoration:none; }
@media (max-width:800px) { .hero { grid-template-columns:1fr; min-height:0; }.hero-copy { min-height:610px; }.hero-photo { min-height:430px; }.hero-photo::after { background:linear-gradient(0deg,rgb(29 64 52 / 55%),transparent 50%); }.bouquets-head { display:block; }.bouquets-head h2 { margin-top:18px; }.bouquet-gallery { grid-template-columns:1fr; gap:18px; margin-top:48px; }.bouquet-card,.bouquet-card--sun { min-height:480px; transform:none; }.bouquet-card--note { min-height:420px; }.delivery { display:block; margin-top:82px; }.delivery-points { justify-content:flex-start; margin-top:25px; }.closing h2 { max-width:12ch; } }
@media (max-width:520px) { .nav { padding:19px 20px; }.hero-copy { padding:120px 20px 70px; min-height:610px; }.hero h1 { font-size:clamp(3.25rem,15vw,4.7rem); }.bouquets,.closing { padding-right:20px; padding-left:20px; }.delivery { padding:52px 20px; }.hero-action,.closing a { width:100%; justify-content:space-between; }.delivery-points { display:grid; gap:9px; } footer { flex-direction:column; padding:22px 20px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }