/** * Landing V2 — tenant storefront โฉมใหม่ * โครงเดียว สลับผิวด้วย data-theme บน * ธีม: mint / latte / forest / galaxy / sunshine / ocean * (เพิ่มธีมใหม่ = เพิ่ม token block เดียว ห้ามแตะ layout) */ :root, [data-theme="mint"] { --bg: #F7FBF9; --surface: #FFFFFF; --ink: #17332C; --muted: #5B7570; --accent: #0E7D68; --accent-ink: #FFFFFF; --accent-soft: #E1F1EC; --border: #D9E7E2; --hero-bg: linear-gradient(160deg, #E9F5F0 0%, #F7FBF9 55%, #DFF0E9 100%); --hero-ink: #17332C; --hero-muted: #4E6862; --radius: 12px; --radius-lg: 18px; --shadow: 0 1px 2px rgba(23,51,44,.05), 0 8px 24px -12px rgba(23,51,44,.12); --line-green: #06C755; --line-green-dark: #05A847; } [data-theme="latte"] { --bg: #FBF6EE; --surface: #FFFFFF; --ink: #3B2E20; --muted: #82715B; --accent: #A9651F; --accent-ink: #FFFFFF; --accent-soft: #F6E9D4; --border: #ECDFC9; --hero-bg: linear-gradient(160deg, #F9EEDC 0%, #FBF6EE 60%, #F3E4CC 100%); --hero-ink: #3B2E20; --hero-muted: #6E5D45; --radius: 18px; --radius-lg: 26px; --shadow: 0 1px 2px rgba(59,46,32,.05), 0 8px 24px -12px rgba(59,46,32,.14); } [data-theme="forest"] { --bg: #F3F5F7; --surface: #FFFFFF; --ink: #0F1C24; --muted: #55656F; --accent: #0B5A47; --accent-ink: #FFFFFF; --accent-soft: #DCEAE5; --border: #D8DFE4; --hero-bg: linear-gradient(150deg, #0E2A24 0%, #103A30 70%, #0B241E 100%); --hero-ink: #F2F7F5; --hero-muted: #A8C4BB; --radius: 8px; --radius-lg: 12px; --shadow: 0 1px 2px rgba(15,28,36,.06), 0 10px 28px -14px rgba(15,28,36,.2); } [data-theme="galaxy"] { --bg: #F6F5FB; --surface: #FFFFFF; --ink: #201A3D; --muted: #625C82; --accent: #4C3FA8; --accent-ink: #FFFFFF; --accent-soft: #E7E4F6; --border: #DEDAF0; --hero-bg: radial-gradient(1px 1px at 18% 30%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 72% 22%, rgba(255,255,255,.55) 50%, transparent 51%), radial-gradient(1px 1px at 55% 68%, rgba(255,255,255,.45) 50%, transparent 51%), radial-gradient(1px 1px at 88% 55%, rgba(255,255,255,.5) 50%, transparent 51%), linear-gradient(150deg, #191340 0%, #2B2160 65%, #151034 100%); --hero-ink: #F1EFFC; --hero-muted: #B7AFDB; --radius: 14px; --radius-lg: 20px; --shadow: 0 1px 2px rgba(32,26,61,.06), 0 10px 28px -14px rgba(32,26,61,.22); } [data-theme="sunshine"] { --bg: #FFFBEE; --surface: #FFFFFF; --ink: #3A2E12; --muted: #86763F; --accent: #B45309; --accent-ink: #FFFFFF; --accent-soft: #FCEFD3; --border: #F0E4C4; --hero-bg: linear-gradient(160deg, #FFF3C9 0%, #FFFBEE 55%, #FFE9AE 100%); --hero-ink: #3A2E12; --hero-muted: #7A6733; --radius: 16px; --radius-lg: 24px; --shadow: 0 1px 2px rgba(58,46,18,.05), 0 8px 24px -12px rgba(58,46,18,.14); } [data-theme="ocean"] { --bg: #F2F8FB; --surface: #FFFFFF; --ink: #123240; --muted: #4F6B78; --accent: #0A6C8C; --accent-ink: #FFFFFF; --accent-soft: #DCEFF6; --border: #D3E5EC; --hero-bg: linear-gradient(160deg, #D8EEF6 0%, #F2F8FB 55%, #C9E6F1 100%); --hero-ink: #123240; --hero-muted: #45646F; --radius: 14px; --radius-lg: 20px; --shadow: 0 1px 2px rgba(18,50,64,.05), 0 8px 24px -12px rgba(18,50,64,.14); } /* ════════ base ════════ */ .lv2 * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .lv2 * { animation: none !important; transition: none !important; } } body.lv2 { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Sarabun', 'Noto Sans Thai UI', 'Noto Sans Thai', 'Leelawadee UI', 'Segoe UI', system-ui, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } .lv2 img { max-width: 100%; } .lv2 a { color: var(--accent); } .lv2 .wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; } .lv2 .section { padding: 56px 0; } .lv2 .section-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; } .lv2 .eyebrow { font-size: 13px; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; } .lv2 .eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--accent); } .lv2 h2 { font-size: 26px; margin: 0; line-height: 1.35; font-weight: 800; } .lv2 .section-sub { color: var(--muted); margin: 0; max-width: 60ch; } .lv2 button { font-family: inherit; } .lv2 :focus-visible { outline: 3px solid var(--line-green); outline-offset: 2px; border-radius: 6px; } /* ════════ header ════════ */ .lv2 .site-header { position: sticky; top: 0; z-index: 80; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .lv2 .header-in { display: flex; align-items: center; gap: 14px; padding: 12px 0; } .lv2 .logo-mark { width: 40px; height: 40px; border-radius: 12px; flex: none; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: 18px; overflow: hidden; } .lv2 .logo-mark img { width: 100%; height: 100%; object-fit: cover; } .lv2 .shop-ident { line-height: 1.25; min-width: 0; } .lv2 .shop-ident b { font-size: 17px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lv2 .shop-ident small { color: var(--muted); font-size: 12.5px; } .lv2 .header-nav { margin-left: auto; display: flex; gap: 22px; font-size: 14.5px; } .lv2 .header-nav a { color: var(--muted); text-decoration: none; font-weight: 600; } .lv2 .header-nav a:hover { color: var(--ink); } @media (max-width: 860px) { .lv2 .header-nav { display: none; } } .lv2 .header-cta { margin-left: auto; flex: none; } @media (min-width: 861px) { .lv2 .header-cta { margin-left: 18px; } } /* ════════ buttons ════════ */ .lv2 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; font-weight: 800; text-decoration: none; cursor: pointer; border: none; font-size: 16px; padding: 13px 26px; line-height: 1.2; transition: transform .12s ease, background .15s; } .lv2 .btn:active { transform: scale(.98); } .lv2 .btn-line { background: var(--line-green); color: #fff; box-shadow: 0 6px 18px -6px rgba(6,199,85,.55); } .lv2 .btn-line:hover { background: var(--line-green-dark); color: #fff; } .lv2 .btn-ghost { background: transparent; color: var(--hero-ink); border: 1.5px solid var(--hero-muted); } .lv2 .btn-ghost:hover { border-color: var(--hero-ink); } .lv2 .btn-sm { font-size: 14px; padding: 9px 18px; } .lv2 .line-icon { width: 20px; height: 20px; flex: none; } /* ════════ hero ════════ */ .lv2 .hero { background: var(--hero-bg); color: var(--hero-ink); overflow: hidden; } .lv2 .hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 56px 0 60px; } .lv2 .hero-in.single { grid-template-columns: 1fr; } @media (max-width: 860px) { .lv2 .hero-in { grid-template-columns: 1fr; padding: 40px 0 44px; } } .lv2 .status-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.8); border: 1px solid var(--border); color: var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 13.5px; font-weight: 700; margin-bottom: 18px; } [data-theme="forest"] .status-pill, [data-theme="galaxy"] .status-pill { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: var(--hero-ink); } .lv2 .status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-green); box-shadow: 0 0 0 4px rgba(6,199,85,.18); } .lv2 .status-dot.closed { background: #94A3B8; box-shadow: 0 0 0 4px rgba(148,163,184,.18); } .lv2 .hero h1 { margin: 0 0 14px; font-size: clamp(30px, 5vw, 44px); line-height: 1.25; font-weight: 800; letter-spacing: -.3px; } .lv2 .hero p.lede { margin: 0 0 26px; font-size: 17.5px; color: var(--hero-muted); max-width: 46ch; } .lv2 .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .lv2 .hero-art { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); background: var(--surface); margin: 0; } [data-theme="forest"] .hero-art, [data-theme="galaxy"] .hero-art { border-color: rgba(255,255,255,.14); } .lv2 .hero-art img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .lv2 .hero-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .lv2 .hero-prod-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; } .lv2 .hero-prod-card img { height: 74px; width: 100%; object-fit: cover; border-radius: 8px; } .lv2 .hero-prod-card b { font-size: 14px; line-height: 1.35; } .lv2 .hero-prod-card .price { color: var(--accent); font-weight: 800; font-size: 15px; } /* ════════ banner slider ════════ */ .lv2 .banner-wrap { padding: 24px 0 0; } .lv2 .banner-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); background: var(--surface); } .lv2 .banner-track { display: flex; transition: transform .5s ease; } @media (prefers-reduced-motion: reduce) { .lv2 .banner-track { transition: none; } } .lv2 .banner-slide { min-width: 100%; flex: none; } .lv2 .banner-slide a { display: block; } .lv2 .banner-slide img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; display: block; background: var(--accent-soft); } @media (max-width: 640px) { .lv2 .banner-slide img { aspect-ratio: 16 / 10; } } .lv2 .banner-caption { position: absolute; left: 16px; bottom: 14px; background: rgba(0,0,0,.5); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; } .lv2 .banner-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.85); color: var(--ink); font-size: 15px; display: grid; place-items: center; box-shadow: var(--shadow); } .lv2 .banner-nav:hover { background: #fff; } .lv2 .banner-nav.prev { left: 12px; } .lv2 .banner-nav.next { right: 12px; } .lv2 .banner-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; } .lv2 .banner-dot { width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.55); padding: 0; } .lv2 .banner-dot.active { background: #fff; width: 20px; border-radius: 4px; } /* ════════ trust block ════════ */ .lv2 .trust-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; } @media (max-width: 860px) { .lv2 .trust-grid { grid-template-columns: 1fr; } } .lv2 .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } .lv2 .card-pad { padding: 22px; } .lv2 .card h3 { margin: 0 0 4px; font-size: 17px; } .lv2 .card .sub { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; } .lv2 .trust-col { display: flex; flex-direction: column; gap: 20px; } .lv2 .photo-strip { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 110px 110px; gap: 8px; } .lv2 .photo-strip .photo { position: relative; border-radius: 8px; overflow: hidden; } .lv2 .photo-strip .photo:first-child { grid-row: span 2; } .lv2 .photo-strip .photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .lv2 .photo-strip .photo span { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.45); color: #fff; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; } .lv2 .photo-strip.two { grid-template-columns: 1fr 1fr; grid-template-rows: 150px; } .lv2 .photo-strip.two .photo:first-child { grid-row: auto; } .lv2 .photo-strip.one { grid-template-columns: 1fr; grid-template-rows: 200px; } .lv2 .photo-strip.one .photo:first-child { grid-row: auto; } .lv2 .hours-row { display: flex; justify-content: space-between; padding: 7px 2px; border-bottom: 1px dashed var(--border); font-size: 14.5px; } .lv2 .hours-row:last-child { border-bottom: none; } .lv2 .hours-row.today { background: var(--accent-soft); border-radius: 8px; padding: 7px 10px; font-weight: 800; border-bottom: none; color: var(--accent); } .lv2 .hours-row.closed-day .t { color: var(--muted); } .lv2 .hours-row .t { font-variant-numeric: tabular-nums; } .lv2 .map-frame { width: 100%; height: 200px; border: 0; display: block; border-radius: 8px; } .lv2 .map-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .lv2 .chip-link { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 700; color: var(--ink); text-decoration: none; background: var(--surface); } .lv2 .chip-link:hover { border-color: var(--accent); color: var(--accent); } /* ════════ services ════════ */ .lv2 .svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 960px) { .lv2 .svc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .lv2 .svc-grid { grid-template-columns: 1fr; } } .lv2 .svc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 20px; box-shadow: var(--shadow); border-top: 3px solid var(--accent); } .lv2 .svc b { display: block; font-size: 15.5px; margin-bottom: 6px; } .lv2 .svc p { margin: 0; font-size: 13.5px; color: var(--muted); } /* ════════ products ════════ */ .lv2 .prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 960px) { .lv2 .prod-grid { grid-template-columns: repeat(2, 1fr); } } .lv2 .prod { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; position: relative; } .lv2 .prod .prod-img { height: 130px; width: 100%; object-fit: cover; display: block; background: var(--accent-soft); } .lv2 .prod-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .lv2 .prod-body b { font-size: 15px; line-height: 1.4; } .lv2 .prod-body small { color: var(--muted); font-size: 12.5px; } .lv2 .prod-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; gap: 8px; } .lv2 .price { font-weight: 800; font-size: 17px; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; } .lv2 .prod-foot .btn-sm { padding: 8px 14px; font-size: 13px; } /* ════════ FAQ ════════ */ .lv2 .faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 720px; } .lv2 details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .lv2 summary { cursor: pointer; padding: 16px 20px; font-weight: 700; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .lv2 summary::-webkit-details-marker { display: none; } .lv2 summary::after { content: "+"; font-size: 20px; color: var(--accent); font-weight: 400; flex: none; } .lv2 details[open] summary::after { content: "-"; } .lv2 details .a { padding: 0 20px 16px; color: var(--muted); font-size: 14.5px; } /* ════════ articles ════════ */ .lv2 .art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 860px) { .lv2 .art-grid { grid-template-columns: 1fr; } } .lv2 .art-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; } .lv2 .art-card img { height: 140px; width: 100%; object-fit: cover; background: var(--accent-soft); } .lv2 .art-card .art-body { padding: 16px; } .lv2 .art-card b { font-size: 15px; line-height: 1.45; display: block; margin-bottom: 6px; } .lv2 .art-card small { color: var(--muted); font-size: 12.5px; } /* ════════ final CTA ════════ */ .lv2 .cta-final { background: var(--hero-bg); border-radius: var(--radius-lg); padding: 44px 36px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; color: var(--hero-ink); overflow: hidden; border: 1px solid var(--border); } [data-theme="forest"] .cta-final, [data-theme="galaxy"] .cta-final { border-color: rgba(255,255,255,.12); } @media (max-width: 760px) { .lv2 .cta-final { grid-template-columns: 1fr; padding: 32px 24px; } } .lv2 .cta-final.no-qr { grid-template-columns: 1fr; } .lv2 .cta-final h2 { font-size: 28px; margin: 0 0 8px; } .lv2 .cta-final p { color: var(--hero-muted); margin: 0 0 22px; } .lv2 .qr-wrap { justify-self: center; background: #fff; padding: 16px; border-radius: 16px; box-shadow: var(--shadow); text-align: center; } .lv2 .qr-wrap img { width: 132px; height: 132px; display: block; } .lv2 .qr-wrap small { display: block; color: #555; font-size: 12px; margin-top: 8px; font-weight: 600; } /* ════════ footer ════════ */ .lv2 footer { border-top: 1px solid var(--border); padding: 36px 0 110px; background: var(--surface); } .lv2 .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; font-size: 14px; } @media (max-width: 760px) { .lv2 .foot-grid { grid-template-columns: 1fr; } } .lv2 .foot-grid h4 { margin: 0 0 10px; font-size: 14px; } .lv2 .foot-grid p, .lv2 .foot-grid li { color: var(--muted); margin: 0 0 6px; } .lv2 .foot-grid ul { list-style: none; padding: 0; margin: 0; } .lv2 .foot-credit { margin-top: 28px; padding-top: 16px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } /* ════════ sticky mobile CTA + floating LINE ════════ */ .lv2 .mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--border); } .lv2 .mobile-cta .btn { flex: 1; font-size: 15px; padding: 12px 10px; } .lv2 .mobile-cta .btn-call { background: var(--surface); color: var(--ink); border: 1.5px solid var(--border); flex: .6; } @media (max-width: 760px) { .lv2 .mobile-cta { display: flex; } .lv2 .float-line { display: none; } } .lv2 .float-line { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 58px; height: 58px; border-radius: 50%; background: var(--line-green); display: grid; place-items: center; box-shadow: 0 10px 26px -6px rgba(6,199,85,.6); transition: transform .15s ease; } .lv2 .float-line:hover { transform: scale(1.07); } /* ════════ draft preview banner (แอดมินเท่านั้น) ════════ */ .lv2 .v2-preview-banner { position: sticky; top: 0; z-index: 100; background: #B45309; color: #fff; text-align: center; padding: 8px 14px; font-size: 13.5px; font-weight: 700; } .lv2 .v2-preview-banner a { color: #fff; text-decoration: underline; }