/* ========================================================= Services overview page (บริการของเรา) Loaded AFTER style.css ========================================================= */ /* ---------- Hero banner ---------- */ .svp-hero { position: relative; min-height: 280px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 64px 0; background: linear-gradient(rgba(46,26,13,.72), rgba(46,26,13,.72)), url("img/service/banner-hero.jpg?v=20260877") center/cover no-repeat; } .svp-hero h1 { font-weight: 700; font-size: 46px; margin: 0 0 16px; letter-spacing: .5px; } .svp-hero p { max-width: 780px; margin: 0 auto; font-weight: 400; font-size: 18px; line-height: 1.9; color: rgba(255,255,255,.85); } /* ---------- Service list (text left, image right, divider between) ---------- */ .svp-list { padding: 84px 0; } .svp-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; } .svp-row + .svp-row { margin-top: 60px; padding-top: 60px; border-top: 1px solid var(--line); } .svp-text h2 { font-weight: 700; font-size: 38px; color: var(--ink); margin: 0 0 20px; } .svp-text p { font-weight: 400; font-size: 18px; line-height: 1.95; color: var(--text); margin: 0 0 32px; } .svp-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; display: block; } .svp-more { display: inline-flex; align-items: center; gap: 8px; background: #2E1A0D; color: #fff; font-weight: 500; font-size: 16px; padding: 13px 30px; border-radius: 2px; transition: background .2s ease; } .svp-more:hover { background: #46311F; } /* ---------- CTA: image band + brown box ---------- */ .svp-cta-img { width: 100%; height: 360px; object-fit: cover; display: block; } .svp-cta { background: #2E1A0D; color: #fff; text-align: center; padding: 72px 0 80px; } .svp-cta h2 { font-weight: 600; font-size: 38px; line-height: 1.4; margin: 0 0 34px; } .svp-cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .svp-cta-actions a { white-space: nowrap; } /* ========================================================= Scroll animation (reveal-in added by main.js when in view) Only active when has .has-motion (skipped for reduced-motion) ========================================================= */ @media (prefers-reduced-motion: no-preference) { /* hero: title + intro fade up, staggered */ .has-motion .svp-hero h1, .has-motion .svp-hero p { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.75,.25,1); } .has-motion .svp-hero p { transition-delay: .12s; } .has-motion .svp-hero.reveal-in h1, .has-motion .svp-hero.reveal-in p { opacity: 1; transform: none; } /* service rows: text slides in from the left, image from the right */ .has-motion .svp-row .svp-text { opacity: 0; transform: translateX(-44px); transition: opacity .75s ease, transform .85s cubic-bezier(.2,.75,.25,1); } .has-motion .svp-row .svp-media { opacity: 0; transform: translateX(44px); transition: opacity .75s ease .1s, transform .85s cubic-bezier(.2,.75,.25,1) .1s; } .has-motion .svp-row.reveal-in .svp-text, .has-motion .svp-row.reveal-in .svp-media { opacity: 1; transform: none; } /* CTA break image: gentle zoom-out as it scrolls into view */ .has-motion .svp-cta-img { opacity: 0; transform: scale(1.08); transition: opacity 1s ease, transform 1.5s cubic-bezier(.2,.75,.25,1); } .has-motion .svp-cta-img.reveal-in { opacity: 1; transform: scale(1); } /* CTA band: content fades up */ .has-motion .svp-cta .container { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.75,.25,1); } .has-motion .svp-cta.reveal-in .container { opacity: 1; transform: none; } } /* ---------- Responsive ---------- */ @media (max-width: 860px) { /* stack each service: image → heading → description → button */ .svp-row, .svp-row + .svp-row { grid-template-columns: 1fr; gap: 22px; } .svp-media { order: -1; } .svp-hero h1 { font-size: 31px; } .svp-cta-img { height: 240px; } .svp-cta h2 { font-size: 27px; } }