/* ========================================================= Service detail page (shared template for all services) ========================================================= */ /* ---------- Hero (solid #2E1A0D, full width) ---------- */ .svc-hero { background: #2E1A0D; color: #fff; text-align: center; padding: 76px 0 0; } .svc-hero h1 { font-weight: 600; font-size: 46px; letter-spacing: .5px; margin: 0; } .svc-hero-desc { max-width: 720px; margin: 20px auto 0; font-weight: 300; font-size: 20px; line-height: 1.9; color: rgba(255, 255, 255, .68); } /* 3 images: 50% / 25% / 25% */ .svc-hero-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-top: 48px; padding-bottom: 60px; } .svc-hero-gallery img { width: 100%; height: 480px; object-fit: cover; border-radius: 2px; } /* ---------- Our Success (#F0F0F0) ---------- */ .svc-success { background: #F0F0F0; padding: 84px 0; } .svc-success-grid { display: grid; grid-template-columns: 1fr 2.4fr; gap: 44px; align-items: start; } .svc-success .overline-sm { color: var(--gold); font-size: 21px; letter-spacing: 1px; font-weight: 500; } .svc-success h2 { font-weight: 500; font-size: 27px; line-height: 1.55; color: var(--ink); margin: 0; } .svc-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 46px; } .svc-kpi .kpi { padding-left: 26px; border-left: 1px solid #d6d6d6; } .svc-kpi .kpi:first-child { padding-left: 0; border-left: 0; } .svc-kpi .num { font-weight: 500; font-size: 54px; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; } .svc-kpi .label { margin-top: 12px; font-size: 16px; font-weight: 400; color: var(--ink); line-height: 1.5; } /* ---------- Alternating text / image (mirrored, balanced, aligned) ---------- */ .svc-alt { padding: 88px 0; } .svc-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; } .svc-split.reverse { grid-template-columns: 1.2fr 1fr; } .svc-split + .svc-split { margin-top: 120px; } /* identical image box on both rows so the two blocks line up, never staggered */ .svc-split-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; box-shadow: var(--shadow); display: block; } .svc-split-body h3 { font-weight: 600; font-size: 26px; color: var(--ink); margin: 0 0 16px; line-height: 1.4; } .svc-split-body p { font-weight: 400; font-size: 20px; line-height: 1.95; color: var(--text); margin: 0; } /* ---------- 5 success factors ---------- */ .svc-factors { background: linear-gradient(rgba(46,26,13,.18), rgba(46,26,13,.30)), url("img/bg-factors.jpg?v=20260877") center/cover no-repeat; color: #fff; padding: 84px 0; } .svc-factors h2 { text-align: center; font-weight: 600; font-size: 32px; margin: 0 0 52px; text-shadow: 0 2px 12px rgba(0,0,0,.45); } .factors-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .factor-card { background: #2E1A0D; border: 1px solid rgba(255, 255, 255, .08); border-radius: 0; padding: 30px 24px; transition: transform .3s ease, border-color .3s ease; } .factor-card:hover { border-color: rgba(226,167,46,.5); transform: translateY(-5px); } .factor-icon { width: 54px; height: 54px; display: block; } .factor-card h3 { font-weight: 600; font-size: 19px; margin: 18px 0 10px; color: #fff; } .factor-card p { font-weight: 350; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .6); margin: 0; } /* ---------- Projects ---------- */ .svc-projects { padding: 82px 0; } /* ========================================================= Scroll animation (reveal-in added by main.js when in view) Active only when has .has-motion (skipped for reduced-motion) ========================================================= */ @media (prefers-reduced-motion: no-preference) { /* hero: title + description fade up, staggered */ .has-motion .svc-hero h1, .has-motion .svc-hero-desc { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.75,.25,1); } .has-motion .svc-hero-desc { transition-delay: .1s; } .has-motion .svc-hero.reveal-in h1, .has-motion .svc-hero.reveal-in .svc-hero-desc { opacity: 1; transform: none; } /* hero gallery: each image fades + settles from a slight zoom, one after another */ .has-motion .svc-hero-gallery img { opacity: 0; transform: translateY(30px) scale(1.05); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.75,.25,1); } .has-motion .svc-hero-gallery.reveal-in img { opacity: 1; transform: none; } .has-motion .svc-hero-gallery.reveal-in img:nth-child(2) { transition-delay: .12s; } .has-motion .svc-hero-gallery.reveal-in img:nth-child(3) { transition-delay: .24s; } /* 5 success factors: cards fade up one after another */ .has-motion .factor-card { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.75,.25,1); } .has-motion .factor-card.reveal-in { opacity: 1; transform: none; } .has-motion .factor-card:nth-child(2) { transition-delay: .09s; } .has-motion .factor-card:nth-child(3) { transition-delay: .18s; } .has-motion .factor-card:nth-child(4) { transition-delay: .27s; } .has-motion .factor-card:nth-child(5) { transition-delay: .36s; } } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .svc-hero-gallery { grid-template-columns: 2fr 1fr 1fr; } .svc-hero-gallery img { height: 300px; } .svc-success-grid { grid-template-columns: 1fr; gap: 18px; } .svc-kpi { grid-template-columns: 1fr 1fr; gap: 30px 0; } /* stack each block: image → heading → description */ .svc-split, .svc-split.reverse { grid-template-columns: 1fr; gap: 22px; } .svc-split-media { order: -1; } .factors-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .svc-hero h1 { font-size: 29px; } .svc-hero-gallery { grid-template-columns: 1fr; } .svc-hero-gallery img { height: 230px; } .svc-kpi { grid-template-columns: 1fr 1fr; } .svc-kpi .kpi:nth-child(3) { padding-left: 0; border-left: 0; } .svc-split-body h3 { font-size: 22px; } /* 1 card per row → horizontal card (icon left, text right) with rounded corners */ .factors-grid { grid-template-columns: 1fr; gap: 16px; } .factor-card { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: center; text-align: left; border-radius: 12px; padding: 24px 26px; } .factor-card:hover { transform: none; } .factor-icon { width: 58px; height: 58px; grid-row: 1 / span 2; align-self: center; } .factor-card h3 { grid-column: 2; margin: 0 0 6px; } .factor-card p { grid-column: 2; margin: 0; } }