/* ────────────────────────────────────────────────────────── คลินิกตาหมอณัฐฐา & Glasses LAB · Warm & Friendly theme ────────────────────────────────────────────────────────── */ /* Fonts loaded via + stylesheet in index.html (was @import — render-blocking). */ :root { --bg: #FAF3E7; --card: #FFFCF6; --ink: #2C1F14; --ink-soft: #6B5644; --cream: #F5E6D3; --brown: #A87547; --brown-deep: #7A4F2E; --rose: #E85A4F; --yellow: #FFCB47; --border: #E8D9C2; --line-green: #06C755; /* Warm Luxe brand tokens (promoted from the index.html redesign layer so styles.css can use them) */ --gold: #C99A4E; --gold-2: #E6B85C; --gold-soft: #F2DFB8; --espresso: #241810; --espresso-2: #3A2818; --font-display: 'Mitr', sans-serif; --font-body: 'IBM Plex Sans Thai', sans-serif; --font-caps: 'Bai Jamjuree', sans-serif; --font-italic: 'Cormorant Garamond', serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } button:disabled { cursor: not-allowed; opacity: 0.5; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; border: 1px solid var(--border); background: #fff; border-radius: 12px; padding: 12px 14px; width: 100%; outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--brown); } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; } /* ── Reusable buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 99px; font-size: 14px; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--brown-deep); color: #fff; } .btn-primary:hover { background: #5a3a20; } .btn-outline { background: #fff; color: var(--ink); border: 1.5px solid var(--border); } .btn-yellow { background: var(--yellow); color: var(--ink); font-weight: 700; } .btn-line { background: var(--line-green); color: #fff; font-weight: 700; } .btn-sm { padding: 10px 16px; font-size: 12px; } .btn-lg { padding: 16px 28px; font-size: 15px; } /* ── Card surfaces ── */ .card { background: #fff; border-radius: 18px; border: 1px solid var(--border); overflow: hidden; } /* ── Layout helpers ── */ .container { max-width: 1440px; margin: 0 auto; } .section-pad { padding: 56px; } .section-pad-lg { padding: 56px 56px 48px; } /* ── Top decorative caps (eyebrow text) ── */ .eyebrow { font-family: var(--font-caps); font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--brown); margin-bottom: 8px; text-transform: uppercase; } /* ── Headline display ── */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--ink); } /* ── Tag / chip ── */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--cream); border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--brown-deep); } /* ── Hover lift on cards ── */ .lift { transition: transform .2s ease, box-shadow .2s ease; } .lift:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(122,79,46,0.12); } /* ── Frame catalog tabs ── */ .tab { padding: 8px 14px; background: #fff; color: var(--ink); border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); transition: all .15s ease; } .tab.active { background: var(--brown-deep); color: #fff; border-color: var(--brown-deep); } .tab:hover:not(.active) { background: var(--cream); } /* ── Booking widget specifics ── */ .book-service-tile { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.12); text-align: left; transition: background .12s ease; } .book-service-tile:hover { background: rgba(255,255,255,0.12); } .book-service-tile.active { background: var(--yellow); color: var(--ink); border-color: var(--yellow); } .book-day { text-align: center; padding: 7px 0; font-size: 11px; font-weight: 500; border-radius: 6px; cursor: pointer; transition: background .12s ease; color: #fff; } .book-day:hover:not(.disabled):not(.active) { background: rgba(255,255,255,0.12); } .book-day.active { background: var(--yellow); color: var(--ink); } .book-day.disabled { color: rgba(255,255,255,0.25); cursor: not-allowed; } .book-day.empty { visibility: hidden; } .book-time { padding: 8px 4px; font-size: 11px; border-radius: 8px; background: rgba(255,255,255,0.06); color: #fff; font-weight: 600; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: background .12s ease; } .book-time:hover:not(.active):not(.disabled) { background: rgba(255,255,255,0.12); } .book-time.active { background: var(--yellow); color: var(--ink); border-color: var(--yellow); } .book-time.disabled { opacity: 0.35; cursor: not-allowed; } /* ── Booking confirm panel ── */ .book-confirm-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 12px; } .book-confirm-row:last-child { border-bottom: none; } .book-input { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.15); font-size: 12px; width: 100%; margin-bottom: 8px; } .book-input::placeholder { color: rgba(255,255,255,0.5); } .book-input:focus { border-color: var(--yellow); background: rgba(255,255,255,0.1); } /* Medical question radios (โรคประจำตัว / แพ้ยา) */ .book-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.85); cursor: pointer; user-select: none; } .book-radio input[type="radio"] { width: 18px; height: 18px; accent-color: var(--yellow); margin: 0; cursor: pointer; } .book-radio input[type="radio"]:checked + span { color: var(--yellow); font-weight: 600; } /* ── Loading / empty states ── */ .skeleton { background: linear-gradient(90deg, var(--cream) 0%, #f9f0e4 50%, var(--cream) 100%); background-size: 200% 100%; animation: skel 1.4s ease infinite; } @keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .toast { position: fixed; bottom: 24px; right: 24px; padding: 14px 20px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; box-shadow: 0 12px 32px rgba(0,0,0,0.22); transform: translateY(100px); opacity: 0; transition: transform .2s ease, opacity .2s ease; z-index: 100; } .toast.show { transform: translateY(0); opacity: 1; } .toast.error { background: var(--rose); } .toast.success { background: #2E8B57; } /* ── Responsive ── */ @media (max-width: 980px) { .desktop-frame { width: 100% !important; border-radius: 0 !important; } .section-pad, .section-pad-lg { padding: 36px 22px !important; } .grid-2-1 { grid-template-columns: 1fr !important; gap: 28px !important; } .contact-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .nav-links { display: none !important; } h1.hero-title { font-size: 38px !important; } h2.section-title { font-size: 28px !important; } } /* Mobile: hide hero floating cards (open-status + review) so they don't overlap mascot */ @media (max-width: 720px) { #hero-open-card, #hero-review { display: none !important; } } @media (max-width: 600px) { .section-pad, .section-pad-lg { padding: 28px 18px !important; } .grid-1-2 { grid-template-columns: 1fr !important; gap: 20px !important; } .grid-1-2-mobile-1 { grid-template-columns: 1fr !important; gap: 16px !important; } .catalog-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .articles-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .doctor-grid { grid-template-columns: 1fr !important; gap: 28px !important; } .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 22px !important; } h1.hero-title { font-size: 30px !important; } h2.section-title { font-size: 22px !important; } .stats-row { flex-wrap: wrap; gap: 16px !important; } .stats-row > div { flex: 1 1 30%; } /* Brand/category tab strip: bound to viewport so it scrolls inside instead of widening the whole page ("ออกข้าง" fix). */ .catalog-actions { width: 100%; max-width: 100%; min-width: 0; } .catalog-tabs { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; flex-wrap: nowrap !important; justify-content: flex-start !important; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .catalog-tabs::-webkit-scrollbar { display: none; } .catalog-tabs .tab { flex-shrink: 0; } } /* ────────────────────────────────────────────────────────── Article cards — mobile tuning + tap feedback ────────────────────────────────────────────────────────── */ .articles-grid a.card { /* Make whole card behave like a link (touch-friendly) */ display: block; text-decoration: none; color: inherit; -webkit-tap-highlight-color: rgba(122,79,46,0.10); transition: transform 0.18s ease, box-shadow 0.18s ease; } .articles-grid a.card:active { transform: scale(0.985); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .articles-grid a.card .card-read-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--brown-deep); font-size: 13px; font-weight: 600; } .articles-grid a.card .card-read-more svg { transition: transform 0.18s ease; } .articles-grid a.card:hover .card-read-more svg { transform: translateX(3px); } @media (max-width: 720px) { #articles { padding: 36px 16px !important; } #articles h2.section-title { font-size: 24px !important; } #articles .eyebrow { font-size: 11px; } #articles > div:first-child { margin-bottom: 24px !important; } .articles-grid { gap: 14px !important; } .articles-grid a.card .card-cover { aspect-ratio: 16/10 !important; } .articles-grid a.card .card-body { padding: 14px 16px !important; } .articles-grid a.card h4 { font-size: 16px !important; line-height: 1.4 !important; /* Truncate long titles to 2 lines so cards stay compact */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .articles-grid a.card .chip { font-size: 10px !important; padding: 3px 9px !important; } .articles-grid a.card .card-read-more { margin-top: 12px; font-size: 14px; } } /* On tablet width — 2-column instead of 1 to use space better */ @media (min-width: 601px) and (max-width: 980px) { .articles-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; } } /* ────────────────────────────────────────────────────────── Booking widget — mobile tuning - 16px+ inputs so iOS won't zoom on focus - 44px+ tap targets for date/time/buttons - Tighter outer padding so the form gets max usable width ────────────────────────────────────────────────────────── */ @media (max-width: 720px) { /* Outer booking strip — give the form room */ #booking { padding: 24px 14px !important; } #booking > div.booking-strip { padding: 22px !important; border-radius: 22px !important; gap: 22px !important; } #booking h2 { font-size: 26px !important; line-height: 1.2 !important; margin-bottom: 10px !important; } #booking p { font-size: 13px !important; } #book-form { padding: 16px !important; border-radius: 16px !important; } /* Inputs: 16px prevents iOS auto-zoom on focus */ .book-input { font-size: 16px !important; padding: 14px 14px !important; border-radius: 12px !important; margin-bottom: 10px !important; min-height: 48px; } textarea.book-input { min-height: 80px; } /* Service tiles — 1 column for full-width tap targets */ #book-services { grid-template-columns: 1fr !important; gap: 10px !important; } #book-services > * { min-height: 56px; padding: 14px 16px !important; font-size: 15px !important; border-radius: 14px !important; } /* Calendar — keep 7 columns but bigger cells */ #book-calendar { grid-template-columns: repeat(7, 1fr) !important; gap: 6px !important; } #book-calendar > * { min-height: 44px !important; font-size: 13px !important; border-radius: 10px !important; padding: 4px !important; } /* Time slots — 3 columns gives bigger touch targets */ #book-times { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } #book-times > * { min-height: 48px !important; font-size: 15px !important; border-radius: 12px !important; padding: 12px 8px !important; font-weight: 600; } /* Radios in medical block — bigger labels + spacing */ .book-radio { font-size: 15px !important; gap: 8px !important; } .book-radio input[type="radio"] { width: 22px !important; height: 22px !important; } /* Confirm step rows — bump font for readability */ .book-confirm-row { font-size: 14px !important; padding: 12px 0 !important; } /* Bottom actions — make confirm button big + thumb-friendly */ #book-form > div:last-child { gap: 10px !important; margin-top: 18px !important; } #book-submit, #book-back { min-height: 52px; padding: 14px 18px !important; font-size: 15px !important; border-radius: 14px !important; font-weight: 700; } #book-submit { flex: 1; margin-left: 0 !important; } /* Consent label — bigger, easier to tap */ #book-form label[for="book-consent"] { font-size: 12.5px !important; line-height: 1.55 !important; padding: 8px 0; } #book-consent { width: 22px !important; height: 22px !important; } /* Success card — center, more breathing room */ #book-success { padding: 28px 20px !important; } #book-success h3 { font-size: 22px !important; } } @media (max-width: 380px) { #book-times { grid-template-columns: repeat(2, 1fr) !important; } #book-calendar > * { font-size: 12px !important; min-height: 40px !important; } } /* โ”€โ”€ Facebook updates โ”€โ”€ */ .facebook-updates-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .fb-card { display: flex; flex-direction: column; min-height: 100%; background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; } .fb-card-media { position: relative; aspect-ratio: 5 / 3; overflow: hidden; background: var(--cream); } .fb-card-media img { width: 100%; height: 100%; object-fit: cover; } .fb-card-media-empty { display: flex; align-items: center; justify-content: center; color: var(--brown-deep); } .fb-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 10px; border-radius: 99px; background: var(--cream); color: var(--brown-deep); font-size: 10px; font-weight: 700; } .fb-card-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; } .fb-message { color: var(--ink); font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .fb-post-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; color: var(--ink-soft); font-size: 11px; } .fb-stats { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .fb-stat { white-space: nowrap; }@media (max-width: 600px) { .facebook-updates-grid { grid-template-columns: 1fr; } .fb-post-meta { align-items: flex-start; flex-direction: column; } .fb-stats { justify-content: flex-start; } } /* ────────────────────────────────────────────────────────── Sticky announcement bar (top of page, above header) ────────────────────────────────────────────────────────── */ .announce-bar { position: sticky; top: 0; z-index: 60; height: 38px; display: flex; align-items: center; padding: 0 56px; background: linear-gradient(90deg, #5C3A1F 0%, var(--brown-deep) 50%, #5C3A1F 100%); background-size: 200% 100%; color: #fff; font-size: 13px; font-weight: 600; overflow: hidden; animation: announceShimmer 6s ease-in-out infinite; box-shadow: 0 2px 8px rgba(0,0,0,0.12); } @keyframes announceShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .announce-link { display: inline-flex; align-items: center; gap: 10px; flex: 1; justify-content: center; color: #fff; text-decoration: none; white-space: nowrap; overflow: hidden; padding: 0 40px; } .announce-link:hover { color: var(--yellow); } .announce-spark { font-size: 17px; display: inline-flex; animation: announceSparkBounce 1.6s ease-in-out infinite; } @keyframes announceSparkBounce { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-2px) rotate(8deg); } } .announce-text { overflow: hidden; text-overflow: ellipsis; } .announce-text strong { color: var(--yellow); font-weight: 700; } .announce-arrow { display: inline-flex; align-items: center; font-size: 16px; font-weight: 700; color: var(--yellow); transition: transform 0.2s; } .announce-link:hover .announce-arrow { transform: translateX(4px); } .announce-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,0.6); font-size: 22px; font-weight: 300; line-height: 1; cursor: pointer; padding: 4px 9px; border-radius: 6px; transition: color 0.15s, background 0.15s; } .announce-close:hover { color: #fff; background: rgba(255,255,255,0.12); } /* When announce bar is showing, push the sticky header down by 38px */ body.has-announce header { top: 38px !important; } @media (max-width: 720px) { .announce-bar { padding: 0 22px; font-size: 12px; height: 36px; } .announce-link { gap: 7px; padding: 0 30px; } .announce-spark { font-size: 14px; } body.has-announce header { top: 36px !important; } } /* ────────────────────────────────────────────────────────── Promo carousel — 2026-05-13 multi-promo rewrite Aesthetic: calm clinical premium. Cream surfaces, hairline borders, single saffron accent. NO drop shadows beyond a single soft one on hero. ────────────────────────────────────────────────────────── */ .promo-section { padding: 0 56px 32px; } /* ─ Carousel header (eyebrow + counter + arrow controls) */ .promo-carousel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 0; } .promo-carousel-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--brown-deep); font-family: var(--font-caps); font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; } .promo-carousel-controls { display: inline-flex; align-items: center; gap: 8px; } .promo-counter { font-family: var(--font-caps); font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--brown-deep); font-variant-numeric: tabular-nums; padding-right: 4px; } .promo-nav { width: 36px; height: 36px; border-radius: 50%; background: #FAF3E8; border: 1px solid var(--border); color: var(--brown-deep); display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; } .promo-nav:hover { background: var(--cream); border-color: var(--brown); } .promo-nav:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } .promo-nav-play { width: 34px; height: 34px; } /* ─ Hero stage (60/40 split on desktop) */ .promo-hero-wrap { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; /* Stable height to avoid CLS as the slides cross-fade */ min-height: 460px; touch-action: pan-y; } .promo-hero-wrap:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } .promo-hero-track { position: relative; width: 100%; height: 100%; } /* Each slide is absolutely stacked; only .is-active is visible */ .promo-card { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(280px, 42%) 1fr; gap: 36px; align-items: stretch; padding: 0; background: var(--card); text-decoration: none; color: var(--ink); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(12px); transition: opacity 320ms cubic-bezier(0.32, 0.72, 0, 1), transform 400ms cubic-bezier(0.32, 0.72, 0, 1); } .promo-card.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); } /* Image column (left) — 4:5 ratio inside slide */ .promo-img-wrap { position: relative; width: 100%; height: 100%; background: var(--cream); overflow: hidden; } .promo-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1); } .promo-card.is-active .promo-img-wrap img { transform: translateX(0); } .promo-img-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 96px; background: linear-gradient(135deg, #FAF3E8, var(--cream)); color: var(--brown); } .promo-card.has-image .promo-img-fallback { display: none; } .promo-card:not(.has-image) .promo-img-wrap img { display: none; } /* Badge — slim hairline ribbon top-left */ .promo-badge { position: absolute; top: 14px; left: 14px; padding: 5px 11px; background: var(--yellow); color: var(--brown-deep); font-size: 11px; font-weight: 700; letter-spacing: 0.6px; border-radius: 2px; z-index: 2; white-space: nowrap; } /* Body (right column) */ .promo-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 40px 56px 36px 0; align-self: center; transition: transform 320ms 60ms cubic-bezier(0.32, 0.72, 0, 1); } .promo-card:not(.is-active) .promo-body { transform: translateX(8px); } .promo-eyebrow { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 5px 12px; background: #FAF3E8; color: var(--brown-deep); font-family: var(--font-caps); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 999px; border: 1px solid var(--border); } .promo-title { font-size: 34px; line-height: 1.18; color: var(--brown-deep); margin: 0; font-weight: 600; word-break: break-word; font-family: var(--font-display); letter-spacing: -0.2px; } .promo-desc { font-size: 15px; color: var(--ink-soft); line-height: 1.7; margin: 0; } .promo-desc:empty { display: none; } .promo-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--brown-deep); margin-top: 2px; } .promo-dates { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: transparent; color: var(--brown-deep); border: 1px solid var(--border); border-radius: 6px; font-weight: 600; } .promo-countdown { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: #FAF3E8; color: var(--brown-deep); border: 1px solid var(--border); border-radius: 6px; font-weight: 700; font-size: 12px; letter-spacing: 0.3px; } .promo-countdown.is-urgent { background: var(--rose); color: #fff; border-color: var(--rose); } .promo-cta { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 10px; padding: 14px 22px; background: var(--yellow); color: var(--brown-deep); border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: 0.4px; border: 1px solid var(--yellow); transition: background 0.15s, color 0.15s; } .promo-card:hover .promo-cta { background: var(--brown-deep); color: #fff; border-color: var(--brown-deep); } .promo-card:focus-visible { outline: none; } .promo-card:focus-visible .promo-cta { outline: 2px solid var(--yellow); outline-offset: 3px; } /* ─ Numbered vertical indicator column (desktop) */ .promo-indicators { position: absolute; top: 50%; right: 24px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; z-index: 3; } .promo-dot { display: inline-flex; align-items: center; justify-content: flex-end; width: 44px; height: 28px; padding: 0 6px; background: none; color: rgba(122, 79, 46, 0.32); border: none; font-family: var(--font-caps); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; font-variant-numeric: tabular-nums; position: relative; transition: color 200ms; cursor: pointer; } .promo-dot::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 2px; background: rgba(122, 79, 46, 0.18); transition: width 300ms cubic-bezier(0.32, 0.72, 0, 1), background 200ms; } .promo-dot.is-active { color: var(--brown-deep); } .promo-dot.is-active::before { width: 48px; background: var(--yellow); } .promo-dot:hover:not(.is-active) { color: var(--brown); } .promo-dot:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } .promo-dot-num { display: inline-block; } /* Single-promo mode: hide chrome */ #promo-banner.is-single .promo-indicators, #promo-banner.is-single .promo-rail-wrap { display: none; } /* Visually hidden live region */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ─ Secondary rail (horizontal scroll of compact mini-cards) */ .promo-rail-wrap { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .promo-rail { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; flex: 1; scroll-snap-type: x proximity; scrollbar-width: thin; } .promo-rail::-webkit-scrollbar { height: 6px; } .promo-rail::-webkit-scrollbar-thumb { background: rgba(122,79,46,0.18); border-radius: 3px; } .promo-rail-card { flex: 0 0 220px; display: flex; gap: 10px; align-items: stretch; padding: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; text-align: left; cursor: pointer; scroll-snap-align: start; transition: border-color 0.15s, background 0.15s; } .promo-rail-card:hover { border-color: var(--brown); } .promo-rail-card.is-active { border-color: var(--yellow); background: #FAF3E8; } .promo-rail-card:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } .promo-rail-img { position: relative; flex: 0 0 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--cream); } .promo-rail-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .promo-rail-img-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--brown); } .promo-rail-urgent { position: absolute; bottom: 2px; left: 2px; right: 2px; background: var(--rose); color: #fff; font-size: 9px; font-weight: 700; text-align: center; padding: 1px 0; border-radius: 4px; letter-spacing: 0.3px; line-height: 1.3; } .promo-rail-body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .promo-rail-num { font-family: var(--font-caps); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--brown); font-variant-numeric: tabular-nums; margin-bottom: 2px; } .promo-rail-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .promo-rail-all { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: transparent; color: var(--brown-deep); border: 1px solid var(--border); border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; white-space: nowrap; transition: background 0.15s; } .promo-rail-all:hover { background: var(--cream); } /* ─ Tablet (≤960px) — narrow hero column, smaller controls */ @media (max-width: 960px) { .promo-section { padding: 0 24px 28px; } .promo-hero-wrap { min-height: 420px; } .promo-card { grid-template-columns: minmax(220px, 38%) 1fr; gap: 24px; } .promo-body { padding: 30px 38px 28px 0; } .promo-title { font-size: 28px; } .promo-indicators { right: 14px; } } /* ─ Mobile (≤720px) — stacked, dot indicators (shape-family with desktop numbers) */ @media (max-width: 720px) { .promo-section { padding: 0 18px 22px; } .promo-carousel-head { margin-bottom: 12px; } .promo-carousel-eyebrow { font-size: 11px; letter-spacing: 2px; } .promo-counter { font-size: 11px; letter-spacing: 1.5px; } .promo-nav { width: 32px; height: 32px; } .promo-hero-wrap { min-height: auto; border-radius: 18px; } .promo-card { grid-template-columns: 1fr; gap: 0; padding: 0; } .promo-img-wrap { aspect-ratio: 4 / 3; height: auto; } .promo-img-fallback { font-size: 56px; } .promo-body { padding: 22px 22px 22px; gap: 12px; } .promo-title { font-size: 24px; } .promo-desc { font-size: 14px; line-height: 1.6; } .promo-meta { gap: 6px; } .promo-dates, .promo-countdown { font-size: 12px; padding: 4px 10px; } .promo-cta { width: 100%; justify-content: center; padding: 16px 18px; min-height: 56px; margin-top: 4px; } /* Indicators morph from numbered column → dot row at the bottom of the image */ .promo-indicators { position: relative; top: auto; right: auto; transform: none; flex-direction: row; gap: 8px; justify-content: center; padding: 12px 0 0; border-top: 1px solid var(--border); background: var(--card); } .promo-dot { width: 18px; height: 18px; padding: 0; align-items: center; justify-content: center; } .promo-dot-num { display: none; } .promo-dot::before { position: absolute; inset: auto; width: 6px; height: 6px; border-radius: 50%; background: rgba(122,79,46,0.2); transform: none; top: 50%; left: 50%; margin-top: -3px; margin-left: -3px; } .promo-dot.is-active::before { width: 8px; height: 8px; border-radius: 1px; background: var(--yellow); margin-top: -4px; margin-left: -4px; } /* Rail tightens up on mobile */ .promo-rail-wrap { flex-direction: column; align-items: stretch; gap: 8px; } .promo-rail-card { flex: 0 0 200px; } .promo-rail-all { align-self: center; } } /* ─ Very narrow (≤380px) */ @media (max-width: 380px) { .promo-title { font-size: 20px; } .promo-img-fallback { font-size: 48px; } } /* ─ Reduced motion — instant transitions, no auto-rotate vibe */ @media (prefers-reduced-motion: reduce) { .promo-card, .promo-img-wrap img, .promo-body, .promo-dot::before { transition: opacity 200ms linear !important; transform: none !important; animation: none !important; } } /* ═══════════════════════════════════════════════════════════ Detail modal (frame + promotion popup) ═══════════════════════════════════════════════════════════ */ .detail-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; animation: detail-fade-in 180ms ease; -webkit-tap-highlight-color: transparent; } @keyframes detail-fade-in { from { opacity: 0; } to { opacity: 1; } } .detail-modal { background: #fff; border-radius: 16px; max-width: 520px; width: 100%; max-height: 92vh; overflow-y: auto; position: relative; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35); animation: detail-pop 200ms cubic-bezier(0.2, 0.8, 0.3, 1); } @keyframes detail-pop { from { transform: translateY(20px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .detail-modal-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; font-size: 18px; line-height: 1; backdrop-filter: blur(4px); } .detail-modal-close:hover { background: rgba(0, 0, 0, 0.75); } .detail-modal-img { width: 100%; max-height: 70vh; height: auto; object-fit: contain; display: block; background: #000; border-radius: 16px 16px 0 0; cursor: zoom-in; } .detail-modal-img.is-square { max-height: 60vh; } /* Lightbox: full-image zoom overlay */ .detail-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 0; cursor: zoom-out; animation: detail-fade-in 180ms ease; } .detail-lightbox img { max-width: 100vw; max-height: 100vh; width: auto; height: auto; object-fit: contain; display: block; } .detail-lightbox-close { position: fixed; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; border: 0; cursor: pointer; font-size: 20px; line-height: 1; backdrop-filter: blur(6px); z-index: 10001; } .detail-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); } .detail-modal-body { padding: 22px 24px 24px; } .detail-modal-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--brown, #A87547); text-transform: uppercase; margin-bottom: 6px; } .detail-modal-title { font-size: 19px; font-weight: 600; color: var(--ink, #2a1f15); line-height: 1.35; margin: 0 0 12px; } .detail-modal-desc { font-size: 14px; line-height: 1.65; color: var(--ink-soft, #6b5a47); margin: 0 0 16px; white-space: pre-wrap; } .detail-modal-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 18px; font-size: 13px; color: var(--ink-soft, #6b5a47); } .detail-modal-meta strong { color: var(--ink, #2a1f15); font-weight: 600; } .detail-modal-price { font-family: var(--font-display, serif); font-size: 22px; font-weight: 500; color: var(--brown-deep, #6b3d18); margin-bottom: 16px; } .detail-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; } .detail-modal-actions .btn, .detail-modal-actions a { flex: 1 1 140px; text-align: center; justify-content: center; } .detail-modal-tag { display: inline-block; padding: 3px 9px; background: var(--cream, #f5ede0); color: var(--brown-deep, #6b3d18); border-radius: 99px; font-size: 11px; font-weight: 600; margin-bottom: 10px; } @media (max-width: 480px) { .detail-modal { border-radius: 14px; } .detail-modal-body { padding: 18px 18px 20px; } .detail-modal-title { font-size: 17px; } } body.detail-modal-open { overflow: hidden; }