@charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* DEFAULT = dark mode look */ --page-bg: #0a0a0a; --page-section-bg: #0a0a0a; --page-text-main: #f5f5f5; --page-text-muted: #b1b1b1; /* cards / panels */ --page-card-bg: #0a0a0a; --page-card-soft-bg: #0a0a0a; /* accents (you can keep your current ones) */ --primary: #0a0a0a; --accent: #ff3366; --accent-hover: #ff1149; /* layout */ --container: 1400px; --gutter: 40px; } html { scroll-behavior: smooth; } section { scroll-margin-top: 70px; } body { font-family: 'Inter', sans-serif; background: var(--page-bg); color: var(--page-text-main); overflow-x: hidden; } /* When LIGHT theme is ON (template adds this class to ) */ body.tt-light-style-on { --page-bg: #ffffff; --page-section-bg: #ffffff; --page-text-main: #1E2722; --page-text-muted: #828282; --page-card-bg: #f7f7f7; --page-card-soft-bg: #f1f1f1; } .gray-bg { background: #D5D7D7 !important; color: #424242 !important; } .logo-link { display: flex; align-items: center; text-decoration: none; transition: transform 0.3s ease; } .logo-link:hover { transform: scale(1.05); } .logo-svg { width: 40px; height: 40px; margin-right: 10px; } .logo-text { font-size: 28px; font-weight: 900; letter-spacing: -2px; background: linear-gradient(135deg, #fff, var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ================= Masa Depan Kulai Live Isolation ================= */ body.masa-depan-kulai-body { overflow-x: hidden; } body.masa-depan-kulai-body #content-wrap, body.masa-depan-kulai-body #page-content { overflow: visible; } /* Make custom sections escape template width */ body.masa-depan-kulai-body .hero--masa-depan, body.masa-depan-kulai-body .voters-approach, body.masa-depan-kulai-body .journey-banner, body.masa-depan-kulai-body .campaign-scroll-showcase, body.masa-depan-kulai-body .kulai-colour-palette, body.masa-depan-kulai-body .kulai-horizontal-story, body.masa-depan-kulai-body .kulai-interview-video-section, body.masa-depan-kulai-body .kulai-voter-slider, body.masa-depan-kulai-body .kulai-poster-collage, body.masa-depan-kulai-body .kulai-service-centre-intro, body.masa-depan-kulai-body .kulai-service-centre-logo, body.masa-depan-kulai-body .service-centre-horizontal, body.masa-depan-kulai-body .service-centre-identity { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Prevent theme img max-width rules from affecting your exact layout */ /* body.masa-depan-kulai-body .campaign-scroll-showcase img, body.masa-depan-kulai-body .kulai-horizontal-story img, body.masa-depan-kulai-body .service-centre-horizontal img, body.masa-depan-kulai-body .kulai-poster-collage img, body.masa-depan-kulai-body .service-centre-identity img { max-width: none; } */ /* Horizontal sections must remain native sticky */ body.masa-depan-kulai-body .campaign-scroll-showcase__sticky, body.masa-depan-kulai-body .kulai-horizontal-story__sticky, body.masa-depan-kulai-body .service-centre-horizontal__sticky { position: sticky !important; top: 0 !important; } /* Mobile reset */ @media (max-width: 768px) { body.masa-depan-kulai-body .hero--masa-depan, body.masa-depan-kulai-body .voters-approach, body.masa-depan-kulai-body .journey-banner, body.masa-depan-kulai-body .campaign-scroll-showcase, body.masa-depan-kulai-body .kulai-colour-palette, body.masa-depan-kulai-body .kulai-horizontal-story, body.masa-depan-kulai-body .kulai-interview-video-section, body.masa-depan-kulai-body .kulai-voter-slider, body.masa-depan-kulai-body .kulai-poster-collage, body.masa-depan-kulai-body .kulai-service-centre-intro, body.masa-depan-kulai-body .kulai-service-centre-logo, body.masa-depan-kulai-body .service-centre-horizontal, body.masa-depan-kulai-body .service-centre-identity { width: 100%; margin-left: 0; margin-right: 0; } } /* ================= HERO ================= */ .hero.hero--masa-depan { position: relative; background: var(--page-section-bg); color: var(--page-text-main); overflow: hidden; min-height: 100vh; display: flex; align-items: center; } .hero.hero--masa-depan .hero-container { width: min(1400px, calc(100% - 100px)); margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; grid-template-rows: 1fr auto; column-gap: 30px; row-gap: 0; align-items: stretch; min-height: calc(80vh - 120px); padding: 60px 20px 40px; position: relative; z-index: 2; } .hero-left, .hero-right { display: flex; flex-direction: column; } .hero-left { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; } .hero-right { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; } .hero-bottom { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 0.85fr 1.15fr; column-gap: 30px; align-items: end; /* align-items: center; */ margin-top: 36px; } .hero-bottom-left { display: flex; align-items: flex-end; } .hero-bottom-right { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; flex-wrap: wrap; max-width: 62ch; } .hero-left--logo { justify-content: space-between; min-height: 100%; } .hero-logo { width: clamp(220px, 24vw, 265px); max-width: 100%; height: auto; display: block; } .hero-right--content { justify-content: space-between; min-height: 100%; /* padding-top: 8px; */ } .hero-copy { max-width: 720px; padding-top: 0; } .hero-title { margin: 0 0 24px; font-size: 36px; line-height: 121%; font-weight: 400; letter-spacing: 0; color: var(--page-text-main); } .hero-description { margin: 0; max-width: 68ch; font-size: 15px; line-height: 20px; color: var(--page-text-main); } .hero-declare-container { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; } /* .hero-declare-container--client { margin-top: auto; padding-bottom: 6px; justify-content: flex-start; } */ /* .hero-declare-container--meta { width: 100%; max-width: 62ch; margin-top: 36px; padding-top: 18px; align-items: flex-start; } */ .hero-description-declare { margin: 0; font-size: 15px; line-height: 121%; color: #B1B1B1; } /* tablet */ @media (max-width: 768px) { .hero.hero--masa-depan .hero-container { width: min(100%, calc(100% - 60px)); grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 32px; min-height: auto; } .hero-left { grid-column: 1; grid-row: 1; align-items: center; text-align: center; } .hero-right { grid-column: 1; grid-row: 2; text-align: left; } .hero-bottom { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; row-gap: 14px; margin-top: 0; text-align: center; } .hero-bottom-left { /* display: none; */ text-align: left; } .hero-bottom-right { justify-content: flex-start; align-items: center; text-align: left; } .hero-bottom-right { flex-direction: row; gap: 30px; max-width: unset; } .hero-copy { width: 100%; margin: 0; } .hero-description { width: 100%; max-width: 600px; margin: 0; } } /* mobile */ @media (max-width: 640px) { .hero.hero--masa-depan .hero-container { width: calc(100% - 36px); row-gap: 100px; } .hero-logo { width: min(62vw, 260px); } .hero-title { /* font-size: clamp(28px, 8vw, 42px); line-height: 1.12; */ margin-bottom: 18px; font-size: 30px; line-height: 34px; } .hero-description { font-size: 15px; /* line-height: 1.65; */ } .hero-declare-container { flex-direction: column; gap: 10px; } .hero-description-declare { font-size: 13px; } } /* ================= Voters Approach Section ================= */ .voters-approach { position: relative; background: #2F2C7C; color: #ffffff; min-height: 600px; padding: 120px 20px 130px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: visible; z-index: 2; } .voters-approach__wrap { width: min(1200px, 90%); margin: 0 auto; } .voters-approach__text { margin: 0; font-size: clamp(24px, 3.15vw, 48px); line-height: 1.15; font-weight: 400; /* letter-spacing: -0.02em; */ color: #ffffff; } .voters-approach__underline { display: inline; text-decoration-line: underline; text-decoration-color: #FFE90B; text-decoration-thickness: 3px; text-underline-offset: 7px; } .voters-approach__down { position: absolute; left: 50%; bottom: -41px; transform: translateX(-50%); width: 98px; height: 82px; border-radius: 0 0 999px 999px; background: #2F2C7C; display: flex; align-items: flex-start; justify-content: center; padding-top: 17px; text-decoration: none; z-index: 5; transition: transform 0.25s ease; } .voters-approach__down:hover { transform: translateX(-50%) translateY(4px); } .voters-approach__down svg { display: block; width: 56px; height: auto; } /* tablet */ @media (max-width: 900px) { .voters-approach { min-height: 340px; padding: 85px 30px 100px; } /* .voters-approach__text { font-size: clamp(28px, 5vw, 38px); line-height: 1.35; } */ } /* mobile */ @media (max-width: 768px) { .voters-approach__down { width: 58px; height: 52px; bottom: -30px; } .voters-approach__down svg { width: 27px; } } @media (max-width: 640px) { .voters-approach { min-height: auto; padding: 70px 22px 95px; } /* .voters-approach__text { font-size: 24px; line-height: 1.38; letter-spacing: -0.01em; } */ .voters-approach__underline { text-decoration-thickness: 2px; text-underline-offset: 5px; } /* .voters-approach__down { width: 78px; height: 66px; bottom: -33px; padding-top: 13px; } */ /* .voters-approach__down svg { width: 43px; } */ } @media (max-width: 420px) { .voters-approach__text { font-size: 21px; } } /* ================= Journey Banner Video ================= */ .journey-banner { padding: 0; background: var(--page-section-bg); overflow: hidden; margin-bottom: -10px; } .journey-banner__media { position: relative; width: 100%; overflow: hidden; aspect-ratio: 16 / 7; background: #111111; } .journey-banner__video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; background: #111111; } /* tablet */ @media (max-width: 900px) { .journey-banner__media { aspect-ratio: 16 / 9; } } /* mobile */ @media (max-width: 640px) { .journey-banner__media { aspect-ratio: 4 / 5; } .journey-banner__video { object-position: center; } } /* ================= Campaign Scroll Showcase ================= */ .campaign-scroll-showcase { position: relative; min-height: 220vh; background: #ffffff; } .campaign-scroll-showcase__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #ffffff; } .campaign-scroll-showcase__logo { position: absolute; left: 7.5vw; top: 12vh; z-index: 3; width: clamp(110px, 9.5vw, 160px); } .campaign-scroll-showcase__logo img { width: 100%; height: auto; display: block; } .campaign-scroll-showcase__copy { position: absolute; top: 16vh; left: 36vw; right: 7vw; z-index: 2; /* max-width: 780px; */ } .campaign-scroll-showcase__copy p { margin: 0 0 22px; font-size: 15px; line-height: 20px; color: #b1b1b1; font-weight: 400; } /* Campaign copy switch */ .campaign-scroll-showcase__copy-stack { min-height: 190px; } .campaign-scroll-showcase__copy-panel { position: absolute; inset: 0; opacity: 0; transform: translate3d(0, 18px, 0); pointer-events: none; will-change: opacity, transform; } .campaign-scroll-showcase__copy-panel--one { opacity: 1; transform: translate3d(0, 0, 0); } .campaign-scroll-showcase__copy-panel p { margin: 0 0 22px; font-size: 15px; line-height: 20px; color: #b1b1b1; font-weight: 400; } .campaign-scroll-showcase__copy-panel p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .campaign-scroll-showcase__copy-stack { min-height: 230px; } } @media (max-width: 640px) { .campaign-scroll-showcase__copy-stack { min-height: 310px; } .campaign-scroll-showcase__copy-panel p { font-size: 11px; } } .campaign-scroll-showcase__stage { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .campaign-scroll-showcase__item { position: absolute; display: block; height: auto; opacity: 0; transform: translate3d(0, 40px, 0) scale(0.92); will-change: transform, opacity; backface-visibility: hidden; contain: layout paint; } /* image positions */ .campaign-scroll-showcase__item--one { width: clamp(145px, 23.5vw, 340px); /* width: clamp(145px, 14.5vw, 240px); */ left: 17vw; top: 16vh; z-index: 1; /* left: 35vw; top: 52vh; */ } .campaign-scroll-showcase__item--two { width: clamp(190px, 20vw, 335px); right: 15vw; top: 5vh; } .campaign-scroll-showcase__item--three { width: clamp(180px, 24vw, 310px); /* width: clamp(180px, 19vw, 300px); */ left: 26vw; bottom: 14vh; } .campaign-scroll-showcase__item--four { width: clamp(150px, 30.2vw, 380px); /* width: clamp(150px, 18.2vw, 280px); */ left: 53vw; bottom: 10vh; } .campaign-scroll-showcase__item--five { width: clamp(120px, 14vw, 220px); right: -2vw; top: 28vh; } @media (max-width: 1165px) { .campaign-scroll-showcase__item--three { bottom: 25vh; } .campaign-scroll-showcase__item--four { bottom: 22vh; } } /* tablet */ @media (max-width: 900px) { .campaign-scroll-showcase { min-height: 210vh; } .campaign-scroll-showcase__logo { left: 7vw; top: 11vh; width: 110px; } .campaign-scroll-showcase__copy { top: 12vh; left: 30vw; right: 6vw; } .campaign-scroll-showcase__copy p { font-size: 13px; line-height: 1.45; } .campaign-scroll-showcase__item--one { left: 38vw; top: 37vh; } .campaign-scroll-showcase__item--two { right: 5vw; top: 30vh; } .campaign-scroll-showcase__item--three { left: 12vw; bottom: 17vh; } .campaign-scroll-showcase__item--four { left: 50vw; bottom: 9vh; } .campaign-scroll-showcase__item--five { right: -12vw; top: 12vh; } } /* mobile */ @media (max-width: 640px) { .campaign-scroll-showcase { min-height: 230vh; } .campaign-scroll-showcase__sticky { height: 100svh; } .campaign-scroll-showcase__logo { left: 25px; top: 50px; width: 88px; } .campaign-scroll-showcase__copy { top: 48px; left: 165px; right: 25px; } .campaign-scroll-showcase__copy p { font-size: 11px; /* line-height: 1.45; margin-bottom: 12px; */ } .campaign-scroll-showcase__item--one { width: 165px; left: 34vw; top: 34vh; } .campaign-scroll-showcase__item--two { width: 185px; right: 0px; top: 10vh; } .campaign-scroll-showcase__item--three { width: 170px; left: 22px; bottom: 28vh; } .campaign-scroll-showcase__item--four { width: 165px; left: 32vw; bottom: 10vh; } .campaign-scroll-showcase__item--five { width: 120px; right: -45px; top: 12vh; } } @media (prefers-reduced-motion: reduce) { .campaign-scroll-showcase { min-height: 100vh; } .campaign-scroll-showcase__item { opacity: 1 !important; transform: none !important; } } /* ================= Kulai Colour Palette ================= */ .kulai-colour-palette { width: 100%; min-height: 62vh; background: var(--page-section-bg); overflow: hidden; } .kulai-colour-palette__top { display: grid; grid-template-columns: 2.35fr 1fr 1fr 1fr; min-height: 72vh; } .kulai-colour-palette__bottom { min-height: 22vh; background: #FFE806; position: relative; } .kulai-colour-palette__block { position: relative; } .kulai-colour-palette__block span, .kulai-colour-palette__bottom span { position: absolute; top: 24px; left: 32px; font-size: 13px; line-height: 20px; font-weight: 400; /* letter-spacing: 0.02em; */ } .kulai-colour-palette__block span { color: #ffffff; } .kulai-colour-palette__bottom span { color: #1E2722; } .kulai-colour-palette__block--purple { background: #2F2C7C; } .kulai-colour-palette__block--deep-blue { background: #0025DA; } .kulai-colour-palette__block--blue { background: #3185F8; } .kulai-colour-palette__block--light-blue { background: #8CD3FF; } /* tablet */ @media (max-width: 900px) { .kulai-colour-palette { min-height: 56vh; } .kulai-colour-palette__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; min-height: 42vh; } .kulai-colour-palette__bottom { min-height: 14vh; } .kulai-colour-palette__block span, .kulai-colour-palette__bottom span { top: 20px; left: 22px; font-size: 11px; } } /* mobile */ @media (max-width: 640px) { .kulai-colour-palette { min-height: auto; } .kulai-colour-palette__top { grid-template-columns: 1fr 1fr; min-height: auto; } .kulai-colour-palette__block { min-height: 180px; } .kulai-colour-palette__bottom { min-height: 120px; } .kulai-colour-palette__block span, .kulai-colour-palette__bottom span { top: 18px; left: 18px; font-size: 10px; } } /* ================= Kulai Horizontal Story ================= */ .kulai-horizontal-story { position: relative; background: var(--page-section-bg); } .kulai-horizontal-story__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--page-section-bg); } .kulai-horizontal-story__track { height: 100%; display: flex; flex-wrap: nowrap; width: max-content; will-change: transform; transform: translate3d(0, 0, 0); } .kulai-horizontal-story__panel { position: relative; flex: 0 0 125vw; height: 100vh; overflow: hidden; } .kulai-horizontal-story__panel--intro { background: var(--page-section-bg); display: grid; grid-template-columns: 40vw 75vw; align-items: center; padding-left: 10.5vw; min-width: 2005px; } .kulai-horizontal-story__intro-copy { max-width: 520px; z-index: 2; } .kulai-horizontal-story__intro-copy h2 { margin: 0 0 32px; font-size: clamp(30px, 2.5vw, 36px); line-height: 121%; font-weight: 400; color: var(--page-text-main); } .kulai-horizontal-story__intro-copy p { margin: 0 0 24px; font-size: 15px; line-height: 20px; color: #b1b1b1; } .kulai-horizontal-story__intro-gallery { display: flex; gap: 12px; align-items: center; width: 100%; max-width: 1200px; /* width: 72vw; */ padding-left: 4vw; } .kulai-horizontal-story__intro-gallery img { width: 380px; /* width: clamp(260px, 22vw, 380px); */ aspect-ratio: 1 / 1; object-fit: cover; display: block; } .kulai-horizontal-story__panel--dark { background: var(--page-section-bg); color: #ffffff; } .kulai-horizontal-story__panel--wide { flex-basis: 125vw; min-width: 1930px; } .kulai-horizontal-story__showcase { position: relative; height: 100%; width: 100%; } .kulai-horizontal-story__showcase img { display: block; height: auto; object-fit: cover; } .kulai-horizontal-story__large-img { position: absolute; left: 80px; top: 24vh; /* top: 18vh; */ width: 100%; max-width: 765px; } .kulai-horizontal-story__dark-copy { position: absolute; left: 1340px; top: 20vh; width: 34vw; max-width: 560px; } .kulai-horizontal-story__dark-copy p { margin: 0; font-size: 15px; line-height: 20px; color: #b1b1b1; } .kulai-horizontal-story__small-row { position: absolute; left: 860px; bottom: 20vh; display: flex; gap: 10px; align-items: flex-end; } .kulai-horizontal-story__small-row img { width: 250px; /* width: clamp(210px, 16vw, 250px); */ aspect-ratio: 1 / 1; object-fit: cover; } .kulai-horizontal-story__poster-img { position: absolute; left: 0; top: 22vh; /* top: 17vh; */ width: 100%; max-width: 520px; } .kulai-horizontal-story__portrait-img { position: absolute; left: 525px; top: 22vh; width: 100%; max-width: 305px; } .kulai-horizontal-story__card-row { position: absolute; left: 835px; bottom: 20vh; display: flex; gap: 12px; } .kulai-horizontal-story__card-row img { width: 300px; /* width: clamp(220px, 18vw, 300px); */ aspect-ratio: 1 / 1; object-fit: cover; } .kulai-horizontal-story__dark-copy--last { top: 46vh; left: 1470px; width: 25vw; } /* horizontal scroll progress bar */ .kulai-horizontal-story__progress { position: absolute; left: 0; bottom: 0; /* width: 28vw; */ width: 100%; height: 6px; background: transparent; z-index: 20; pointer-events: none; } .kulai-horizontal-story__progress-fill { width: 0%; height: 100%; background: #0025DA; transform-origin: left center; transition: width 0.08s linear; } /* tablet */ @media (max-width: 900px) { .kulai-horizontal-story__progress { width: 38vw; height: 4px; } } /* mobile */ @media (max-width: 640px) { .kulai-horizontal-story__progress { width: 55vw; height: 3px; } } @media (min-width: 1545px) { /* Your custom CSS for 1545px and bigger screens here */ .kulai-horizontal-story { --intro-panel-w: 1850px; --dark-panel-w: 1950px; } .kulai-horizontal-story__panel { flex: 0 0 80vw; min-width: 2030px; } .kulai-horizontal-story__panel--intro { padding-left: 140px; grid-template-columns: 600px 1300px; column-gap: 110px; } .kulai-horizontal-story__intro-copy { width: 560px; } .kulai-horizontal-story__intro-gallery img { width: 360px; } .kulai-horizontal-story__large-img { width: 700px; } .kulai-horizontal-story__small-row { left: 875px; bottom: 25vh; } .kulai-horizontal-story__showcase--one .kulai-horizontal-story__dark-copy { left: 1350px; } .kulai-horizontal-story__poster-img { width: 460px; } .kulai-horizontal-story__portrait-img { left: 520px; width: 280px; } .kulai-horizontal-story__card-row { left: 830px; bottom: 27vh; } .kulai-horizontal-story__dark-copy--last { top: 40vh; /* top: 37vh; */ left: 1480px; width: 16vw; } } @media (max-width: 1100px) { .kulai-horizontal-story__panel--intro { min-width: 1775px; } .kulai-horizontal-story__panel--wide { min-width: 1790px; } } /* tablet */ @media (max-width: 900px) { .kulai-horizontal-story__panel--intro { grid-template-columns: 45vw 55vw; padding-left: 7vw; min-width: 1370px; } .kulai-horizontal-story__intro-copy { max-width: 390px; } .kulai-horizontal-story__intro-copy h2 { /* font-size: 32px; */ margin-bottom: 24px; } .kulai-horizontal-story__intro-copy p { font-size: 13px; line-height: 1.3; } .kulai-horizontal-story__dark-copy p { font-size: 13px; line-height: 1.3; } .kulai-horizontal-story__intro-gallery img { width: 280px; } .kulai-horizontal-story__panel--wide { flex-basis: 160vw; } .kulai-horizontal-story__large-img { /* width: 62vw; */ left: 36px; } .kulai-horizontal-story__dark-copy { left: 1200px; /* top: 13vh; */ width: 56vw; } .kulai-horizontal-story__small-row { left: 820px; /* bottom: 11vh; */ } .kulai-horizontal-story__small-row img { width: 250px; } /* .kulai-horizontal-story__poster-img { width: 48vw; } */ /* .kulai-horizontal-story__portrait-img { left: 50vw; width: 30vw; } */ /* .kulai-horizontal-story__card-row { left: 75vw; } */ .kulai-horizontal-story__card-row img { width: 250px; } .kulai-horizontal-story__dark-copy--last { top: 50vh; left: 1370px; width: 35vw; } } /* ================= Kulai Horizontal Story Mobile / Tablet <= 768px ================= */ @media (max-width: 768px) { .kulai-horizontal-story { height: auto !important; background: var(--page-section-bg); overflow: hidden; } .kulai-horizontal-story__sticky { position: relative; top: auto; height: auto; overflow: visible; background: var(--page-section-bg); } .kulai-horizontal-story__track { display: block; width: 100%; height: auto; transform: none !important; } .kulai-horizontal-story__panel, .kulai-horizontal-story__panel--intro, .kulai-horizontal-story__panel--wide { width: 100%; min-width: 0 !important; height: auto; min-height: 0; flex: none; overflow: visible; } .kulai-horizontal-story__progress { display: none; } /* ---------- Intro section ---------- */ .kulai-horizontal-story__panel--intro { display: block; padding: 70px 25px 15px; background: var(--page-section-bg); } .kulai-horizontal-story__intro-copy { width: 100%; /* max-width: 100%; */ max-width: 590px; } .kulai-horizontal-story__intro-copy h2 { margin: 0 0 28px; /* font-size: 28px; */ line-height: 34px; font-weight: 400; } .kulai-horizontal-story__intro-copy p { margin: 0 0 16px; /* font-size: 10px; line-height: 1.5; color: #a6a6a6; */ } /* Intro images become horizontal swipe row */ .kulai-horizontal-story__intro-gallery { position: relative; left: auto; bottom: auto; width: calc(100% + 44px); max-width: none; /* margin-left: -22px; */ margin-top: 34px; padding: 0 22px; display: flex; gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .kulai-horizontal-story__intro-gallery::-webkit-scrollbar { display: none; } .kulai-horizontal-story__intro-gallery img { /* flex: 0 0 'max-width: 200px'; */ width: 200px; max-width: none; aspect-ratio: 1 / 1; object-fit: cover; scroll-snap-align: start; } /* ---------- Content panels become normal vertical layout ---------- */ .kulai-horizontal-story__panel--dark { background: var(--page-section-bg); color: var(--page-text-main); padding: 0 25px 10px; } .kulai-horizontal-story__showcase { position: relative; width: 100%; height: auto; display: block; } .kulai-horizontal-story__showcase img { display: block; height: auto; object-fit: cover; } /* reset all desktop absolute positioning */ .kulai-horizontal-story__large-img, .kulai-horizontal-story__poster-img, .kulai-horizontal-story__portrait-img, .kulai-horizontal-story__dark-copy, .kulai-horizontal-story__small-row, .kulai-horizontal-story__card-row { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; max-width: none !important; } /* Panel 02 order: text > big poster > 3 images */ .kulai-horizontal-story__showcase--one { display: flex; flex-direction: column; } .kulai-horizontal-story__showcase--one .kulai-horizontal-story__dark-copy { order: 1; margin: 30px 0 24px; max-width: 590px !important; } .kulai-horizontal-story__large-img { order: 2; margin: 0; } .kulai-horizontal-story__small-row { order: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; } .kulai-horizontal-story__small-row img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* .kulai-horizontal-story__dark-copy p { margin: 0; font-size: 10px; line-height: 1.5; color: #a6a6a6; } */ /* Panel 03 order: text > two images > two cards */ .kulai-horizontal-story__showcase--two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; /* padding-bottom: 60px; */ } .kulai-horizontal-story__dark-copy--last { order: 1; grid-column: 1 / -1; margin: 34px 0 20px; max-width: 590px !important; } .kulai-horizontal-story__poster-img { order: 2; grid-column: 1 / 2; } .kulai-horizontal-story__portrait-img { order: 3; grid-column: 2 / 3; } .kulai-horizontal-story__card-row { order: 4; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 0; } .kulai-horizontal-story__card-row img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } } /* smaller phone refinement */ @media (max-width: 420px) { .kulai-horizontal-story__intro-gallery img { flex-basis: 48vw; width: 48vw; } /* .kulai-horizontal-story__intro-copy h2 { font-size: 26px; } */ /* .kulai-horizontal-story__intro-copy p, .kulai-horizontal-story__dark-copy p { font-size: 9.5px; } */ } @media (prefers-reduced-motion: reduce) { .kulai-horizontal-story { height: auto !important; } .kulai-horizontal-story__sticky { position: relative; height: auto; overflow: visible; } .kulai-horizontal-story__track { transform: none !important; display: block; width: 100%; } .kulai-horizontal-story__panel { height: auto; min-height: 100vh; } } /* ================= Kulai Interview Video Section ================= */ .kulai-interview-video-section { background: var(--page-section-bg); padding: 110px 0; overflow: hidden; } .kulai-interview-video-section__wrap { width: min(900px, calc(100% - 44px)); margin: 0 auto; text-align: center; } .kulai-interview-video-section__media { position: relative; width: 100%; overflow: hidden; background: #f2f2f2; } .kulai-interview-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; background: #111111; } .kulai-interview-video-section__caption { margin: 22px 0 0; font-size: 15px; line-height: 20px; color: #b1b1b1; } /* sound button fallback */ .kulai-interview-video__sound-btn { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; border: 0; border-radius: 999px; padding: 10px 18px; background: rgba(0, 0, 0, 0.65); color: #ffffff; font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .kulai-interview-video__sound-btn.is-visible { opacity: 1; pointer-events: auto; } @media (max-width: 768px) { .kulai-interview-video-section { padding: 70px 0; } .kulai-interview-video-section__wrap { width: 100%; } .kulai-interview-video-section__caption { font-size: 10px; /* margin-top: 16px; */ } } /* ================= Kulai Voter Slider ================= */ .kulai-voter-slider { position: relative; background: #F8F8F8; padding: 130px 0; overflow: hidden; } .kulai-voter-slider__wrap { width: min(1200px, calc(100% - 44px)); margin: 0 auto; } .kulai-voter-slider__stage { position: relative; width: 100%; height: 520px; display: flex; align-items: center; justify-content: center; } .kulai-voter-slider__item { position: absolute; width: 470px; /* aspect-ratio: 16 / 9; */ padding: 0; border: 0; background: transparent; cursor: pointer; overflow: hidden; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22); opacity: 0; transform: translateX(0) scale(0.7); transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, filter 0.45s ease, z-index 0.2s ease; will-change: transform, opacity; } .kulai-voter-slider__item img { width: 100%; height: 100%; display: block; object-fit: cover; } .kulai-voter-slider__item[data-pos="0"] { z-index: 5; opacity: 1; transform: translateX(0) scale(1.16); filter: none; } .kulai-voter-slider__item[data-pos="-1"] { z-index: 4; opacity: 1; transform: translateX(-55%) scale(0.92); filter: brightness(0.94); } .kulai-voter-slider__item[data-pos="1"] { z-index: 4; opacity: 1; transform: translateX(55%) scale(0.92); filter: brightness(0.94); } .kulai-voter-slider__item[data-pos="-2"] { z-index: 3; opacity: 0.75; transform: translateX(-90%) scale(0.78); filter: brightness(0.96); } .kulai-voter-slider__item[data-pos="2"] { z-index: 3; opacity: 0.75; transform: translateX(90%) scale(0.78); filter: brightness(0.96); } .kulai-voter-slider__item[data-pos="hidden-left"] { z-index: 1; opacity: 0; transform: translateX(-140%) scale(0.7); pointer-events: none; } .kulai-voter-slider__item[data-pos="hidden-right"] { z-index: 1; opacity: 0; transform: translateX(140%) scale(0.7); pointer-events: none; } /* special size for voter-guide-02 */ .kulai-voter-slider__item--feature { /* width: 620px; height: 370px; */ aspect-ratio: auto; } .kulai-voter-slider__item--feature img { width: 100%; height: 100%; object-fit: cover; } /* when voter-guide-02 becomes center */ .kulai-voter-slider__item--feature[data-pos="0"] { z-index: 8; transform: translateX(0) scale(1.65); } /* when voter-guide-02 is beside the center */ .kulai-voter-slider__item--feature[data-pos="-1"] { transform: translateX(-35%) scale(1.4); } .kulai-voter-slider__item--feature[data-pos="1"] { transform: translateX(35%) scale(1.4); } .kulai-voter-slider__item--feature[data-pos="-2"] { transform: translateX(-92%) scale(0.8); } .kulai-voter-slider__item--feature[data-pos="2"] { transform: translateX(92%) scale(0.8); } /* lightbox */ /* .kulai-voter-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.82); display: flex; align-items: center; justify-content: center; padding: 28px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .kulai-voter-lightbox.is-open { opacity: 1; pointer-events: auto; } .kulai-voter-lightbox__img { display: block; max-width: min(1100px, 92vw); max-height: 86vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); } .kulai-voter-lightbox__close { position: absolute; top: 22px; right: 28px; border: 0; background: transparent; color: #ffffff; font-size: 42px; line-height: 1; cursor: pointer; } */ /* tablet */ @media (max-width: 900px) { .kulai-voter-slider { padding: 100px 0; } .kulai-voter-slider__stage { height: 450px; } .kulai-voter-slider__item { width: 350px; } } /* mobile */ @media (max-width: 768px) { .kulai-voter-slider { padding: 80px 0; } .kulai-voter-slider__wrap { width: 100%; } .kulai-voter-slider__stage { height: 300px; } .kulai-voter-slider__item { width: 280px; } .kulai-voter-slider__item--feature { width: 330px; height: 200px; } .kulai-voter-slider__item[data-pos="0"] { transform: translateX(0) scale(1); } .kulai-voter-slider__item[data-pos="-1"] { transform: translateX(-42%) scale(0.82); } .kulai-voter-slider__item[data-pos="1"] { transform: translateX(42%) scale(0.82); } .kulai-voter-slider__item[data-pos="-2"] { transform: translateX(-70%) scale(0.68); } .kulai-voter-slider__item[data-pos="2"] { transform: translateX(70%) scale(0.68); } .kulai-voter-slider__item--feature[data-pos="0"] { transform: translateX(0) scale(1.5); } .kulai-voter-slider__item--feature[data-pos="-1"] { transform: translateX(-20%) scale(1.1); } .kulai-voter-slider__item--feature[data-pos="1"] { transform: translateX(20%) scale(1.1); } } @media (max-width: 420px) { .kulai-voter-slider__stage { height: 230px; } /* .kulai-voter-slider__item { width: 245px; } */ .kulai-voter-slider__item--feature[data-pos="0"] { transform: translateX(0) scale(1); } } /* ================= Kulai Poster Collage ================= */ .kulai-poster-collage { position: relative; background: var(--page-section-bg); padding: 76px 0 110px; overflow: hidden; } .kulai-poster-collage::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 240px; background: #3185F8; z-index: 0; } .kulai-poster-collage__top, .kulai-poster-collage__bottom { position: relative; z-index: 1; } .kulai-poster-collage__item img { width: 100%; height: auto; display: block; object-fit: cover; } /* ---------- top collage ---------- */ .kulai-poster-collage__top { width: 100%; /* width: min(1400px, 100%); */ margin: 140px auto 90px; display: grid; grid-template-columns: 2fr 1fr; gap: 0; align-items: stretch; } .kulai-poster-collage__item--mother img { aspect-ratio: 1 / 1; height: 100%; object-fit: cover; } .kulai-poster-collage__work-stack { display: grid; grid-template-rows: 1fr 1fr; } .kulai-poster-collage__work-stack img { aspect-ratio: 1 / 1; height: 100%; object-fit: cover; } /* ---------- bottom poster layout ---------- */ .kulai-poster-collage__bottom { width: min(1400px, calc(100% - 44px)); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 60px; row-gap: 20px; align-items: start; } .kulai-poster-collage__item--peace { grid-column: 1 / 7; grid-row: 1 / 5; } .kulai-poster-collage__item--supply { grid-column: 8 / -1; grid-row: 3 / 7; /* margin-top: 190px; */ } .kulai-poster-collage__item--meet { grid-column: 3 / 8; grid-row: 6 / 10; /* margin-top: 10px; */ } /* tablet */ /* @media (max-width: 900px) { .kulai-poster-collage { padding: 64px 0 100px; } .kulai-poster-collage::before { height: 64px; } .kulai-poster-collage__top { width: 100%; margin-bottom: 70px; } .kulai-poster-collage__bottom { width: calc(100% - 44px); column-gap: 18px; } .kulai-poster-collage__item--supply { margin-top: 130px; } } */ /* mobile */ @media (max-width: 768px) { .kulai-poster-collage { padding: 48px 0 80px; } .kulai-poster-collage::before { height: 90px; } .kulai-poster-collage__top { width: min(360px, calc(100% - 44px)); display: flex; flex-direction: column; margin: 80px auto 15px; gap: 15px; } .kulai-poster-collage__work-stack { display: flex; flex-direction: column; gap: 15px; } .kulai-poster-collage__bottom { width: min(360px, calc(100% - 44px)); display: flex; flex-direction: column; gap: 15px; } .kulai-poster-collage__item { width: 100%; margin: 0 !important; } .kulai-poster-collage__item img { width: 100%; height: auto; } } /* ================= Kulai Service Centre Intro ================= */ .kulai-service-centre-intro { position: relative; background: #0069C8; color: #ffffff; padding: 92px 20px 100px; text-align: center; overflow: visible; } /* .kulai-service-centre-intro::after { content: ""; position: absolute; left: 50%; bottom: -31px; transform: translateX(-50%); width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-top: 31px solid #0069C8; z-index: 2; } */ .kulai-service-centre-intro__notch { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: 56px; height: 31px; z-index: 2; } .kulai-service-centre-intro__notch svg { display: block; width: 100%; height: auto; } .kulai-service-centre-intro__wrap { width: min(1100px, 80%); margin: 0 auto; } .kulai-service-centre-intro p { margin: 0; font-size: clamp(24px, 3.15vw, 48px); line-height: 1.15; font-weight: 400; /* letter-spacing: -0.02em; */ color: #ffffff; } .kulai-service-centre-intro span { display: inline; text-decoration-line: underline; text-decoration-color: #FFE806; text-decoration-thickness: 3px; text-underline-offset: 7px; } /* tablet */ @media (max-width: 900px) { .kulai-service-centre-intro { padding: 78px 24px 88px; } .kulai-service-centre-intro__notch svg { max-height: 75px; } /* .kulai-service-centre-intro p { font-size: clamp(26px, 4.8vw, 36px); } */ } /* mobile */ @media (max-width: 768px) { .kulai-service-centre-intro { padding: 70px 22px 80px; } /* .kulai-service-centre-intro::after { bottom: -24px; border-left-width: 22px; border-right-width: 22px; border-top-width: 24px; } */ /* .kulai-service-centre-intro p { font-size: 24px; line-height: 1.18; } */ .kulai-service-centre-intro span { text-decoration-thickness: 2px; text-underline-offset: 5px; } } /* @media (max-width: 420px) { .kulai-service-centre-intro p { font-size: 21px; } } */ /* ================= Kulai Poster Collage Top Scroll Effect ================= */ .kulai-poster-collage__top.is-scroll-effect-ready .kulai-poster-collage__item { opacity: 0; transform: translate3d(0, 80px, 0) scale(0.92); transform-origin: center center; will-change: transform, opacity; backface-visibility: hidden; } .kulai-poster-collage__top .kulai-poster-collage__item img { will-change: transform; } /* mobile: softer motion */ @media (max-width: 768px) { .kulai-poster-collage__top.is-scroll-effect-ready .kulai-poster-collage__item { transform: translate3d(0, 55px, 0) scale(0.96); } } @media (prefers-reduced-motion: reduce) { .kulai-poster-collage__top.is-scroll-effect-ready .kulai-poster-collage__item { opacity: 1 !important; transform: none !important; } } /* ================= Kulai Poster Collage Bottom Scroll Effect ================= */ .kulai-poster-collage__bottom.is-scroll-effect-ready .kulai-poster-collage__item { opacity: 0; transform: translate3d(0, 80px, 0) scale(0.92); transform-origin: center center; will-change: transform, opacity; backface-visibility: hidden; } /* make the motion feel smoother */ .kulai-poster-collage__bottom .kulai-poster-collage__item img { will-change: transform; } /* mobile: keep same vertical layout, only softer movement */ @media (max-width: 768px) { .kulai-poster-collage__bottom.is-scroll-effect-ready .kulai-poster-collage__item { transform: translate3d(0, 55px, 0) scale(0.96); } } @media (prefers-reduced-motion: reduce) { .kulai-poster-collage__bottom.is-scroll-effect-ready .kulai-poster-collage__item { opacity: 1 !important; transform: none !important; } } /* ================= Kulai Service Centre Logo ================= */ .kulai-service-centre-logo { background: #ffffff; padding: 200px 20px 110px; overflow: hidden; } .kulai-service-centre-logo__wrap { width: min(760px, 100%); margin: 0 auto; display: flex; justify-content: center; align-items: center; } .kulai-service-centre-logo__img { width: min(560px, 100%); height: auto; display: block; } /* tablet */ @media (max-width: 900px) { /* .kulai-service-centre-logo { padding: 130px 24px 90px; } */ .kulai-service-centre-logo__img { width: min(500px, 100%); } } /* mobile */ @media (max-width: 768px) { .kulai-service-centre-logo { padding: 180px 22px 75px; } .kulai-service-centre-logo__img { width: min(360px, 100%); } } @media (max-width: 420px) { .kulai-service-centre-logo__img { width: min(300px, 100%); } } /* ================= Service Centre Horizontal ================= */ .service-centre-horizontal { position: relative; background: var(--page-section-bg); overflow: visible; } .service-centre-horizontal__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--page-section-bg); } .service-centre-horizontal__track { height: 100%; display: flex; flex-wrap: nowrap; width: max-content; will-change: transform; transform: translate3d(0, 0, 0); } .service-centre-horizontal__panel { position: relative; flex: 0 0 115vw; height: 100vh; overflow: hidden; } /* progress bar */ .service-centre-horizontal__progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; z-index: 20; pointer-events: none; } .service-centre-horizontal__progress-fill { width: 0%; height: 100%; background: #0025DA; transform-origin: left center; transition: width 0.08s linear; } /* Panel 01 */ .service-centre-horizontal__panel--light { background: var(--page-section-bg); } .service-centre-horizontal__intro { position: absolute; left: 7vw; top: 20vh; width: 430px; } .service-centre-horizontal__intro h2 { margin: 0 0 34px; font-size: clamp(30px, 2.5vw, 36px); line-height: 121%; font-weight: 400; color: var(--page-text-main); } .service-centre-horizontal__intro p { margin: 0 0 24px; font-size: 15px; line-height: 20px; color: #b1b1b1; } .service-centre-horizontal__colour-system { position: absolute; left: 48vw; top: 28vh; width: 725px; height: 270px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; border: none; } .service-centre-horizontal__colour--navy { background: #032341; } .service-centre-horizontal__colour--blue { background: #0069C8; } .service-centre-horizontal__colour--soft { background: #BBCDD7; } .service-centre-horizontal__colour--grey { background: #D5D7D7; } /* .service-centre-horizontal__colour--dark { background: #1E1E1E; } */ /* .service-centre-horizontal__size-label { position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%); background: #2EA3FF; color: #ffffff; padding: 5px 10px; border-radius: 2px; font-size: 14px; line-height: 1; } */ /* Panel 02 */ .service-centre-horizontal__panel--dark { background: var(--page-section-bg); color: #ffffff; } .service-centre-horizontal__pattern-wrap { position: absolute; left: 10vw; top: 24vh; width: 420px; } /* .service-centre-horizontal__layer-label { margin: 0 0 18px; font-size: 13px; line-height: 1; color: #777777; } */ .service-centre-horizontal__mini-flags { /* display: grid; grid-template-columns: repeat(7, 22px); gap: 17px 28px; */ margin-bottom: 60px; } .service-centre-horizontal__mini-flags svg { width: 100%; height: auto; } .service-centre-horizontal__big-pattern svg{ width: 100%; height: auto; } /* .service-centre-horizontal__mini-flags span { width: 22px; height: 12px; background: #0069C8; clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%); } */ /* .service-centre-horizontal__big-pattern { display: grid; grid-template-columns: repeat(10, 32px); gap: 0; } */ /* .service-centre-horizontal__big-pattern span { width: 32px; height: 46px; background: #0069C8; clip-path: polygon(0 0, 100% 0, 58% 50%, 100% 100%, 0 100%); } */ .service-centre-horizontal__dark-copy { position: absolute; left: 620px; bottom: 38vh; width: 410px; } .service-centre-horizontal__dark-copy p { margin: 0; font-size: 15px; line-height: 20px; color: #b1b1b1; } /* large desktop */ @media (min-width: 1545px) { .service-centre-horizontal__panel { flex: 0 0 95vw; } .service-centre-horizontal__intro { left: 110px; } .service-centre-horizontal__colour-system { left: 735px; } .service-centre-horizontal__pattern-wrap { left: 170px; } .service-centre-horizontal__dark-copy { left: 620px; bottom: 38vh; } } /* tablet */ @media (max-width: 1100px) { .service-centre-horizontal__intro { left: 65px; width: 360px; } .service-centre-horizontal__colour-system { left: 480px; width: 600px; height: 230px; } .service-centre-horizontal__pattern-wrap { left: 80px; } .service-centre-horizontal__dark-copy { left: 530px; width: 330px; } } @media (max-width: 945px) { .service-centre-horizontal__panel { flex: 0 0 140vw; } } /* mobile / tablet vertical layout */ @media (max-width: 768px) { .service-centre-horizontal { height: auto !important; background: var(--page-section-bg); overflow: hidden; } .service-centre-horizontal__sticky { position: relative; height: auto; overflow: visible; } .service-centre-horizontal__track { display: block; width: 100%; height: auto; transform: none !important; } .service-centre-horizontal__panel { width: 100%; height: auto; min-height: 0; flex: none; overflow: visible; } .service-centre-horizontal__progress { display: none; } .service-centre-horizontal__panel--light { padding: 0 0 40px; } .service-centre-horizontal__intro { position: relative; left: auto; top: auto; width: 100%; padding: 0 30px; max-width: 620px; margin: 0 auto; } .service-centre-horizontal__intro h2 { /* font-size: 28px; */ margin-bottom: 26px; } .service-centre-horizontal__intro p { font-size: 13px; line-height: 1.3; margin-bottom: 16px; } .service-centre-horizontal__dark-copy p { font-size: 13px; line-height: 1.3; } .service-centre-horizontal__colour-system { position: relative; left: auto; top: auto; width: 100%; height: 140px; margin-top: 38px; } /* .service-centre-horizontal__size-label { display: none; } */ .service-centre-horizontal__panel--dark { padding: 0 30px 60px; max-width: 620px; margin: 0 auto; } .service-centre-horizontal__pattern-wrap { position: relative; left: auto; top: auto; width: 100%; } /* .service-centre-horizontal__mini-flags { grid-template-columns: repeat(7, 18px); gap: 14px 18px; } */ /* .service-centre-horizontal__big-pattern { grid-template-columns: repeat(8, 28px); } */ /* .service-centre-horizontal__big-pattern span { width: 28px; height: 40px; } */ .service-centre-horizontal__dark-copy { position: relative; right: auto; left: 0; bottom: auto; width: 100%; margin-top: 30px; max-width: 590px; } /* .service-centre-horizontal__dark-copy p { font-size: 10px; line-height: 1.5; } */ } /* ================= Smooth Horizontal Drag Effect ================= */ .kulai-horizontal-story__track, .service-centre-horizontal__track { will-change: transform; backface-visibility: hidden; } .kulai-horizontal-story__intro-gallery img, .kulai-horizontal-story__large-img, .kulai-horizontal-story__small-row img, .kulai-horizontal-story__poster-img, .kulai-horizontal-story__portrait-img, .kulai-horizontal-story__card-row img, .service-centre-horizontal__colour-system, .service-centre-horizontal__mini-flags, .service-centre-horizontal__big-pattern { will-change: transform, opacity; backface-visibility: hidden; transform-origin: center center; } /* safety reset for mobile */ @media (max-width: 768px) { .kulai-horizontal-story__intro-gallery img, .kulai-horizontal-story__large-img, .kulai-horizontal-story__small-row img, .kulai-horizontal-story__poster-img, .kulai-horizontal-story__portrait-img, .kulai-horizontal-story__card-row img, .service-centre-horizontal__colour-system, .service-centre-horizontal__mini-flags, .service-centre-horizontal__big-pattern { transform: none !important; opacity: 1 !important; } } @media (prefers-reduced-motion: reduce) { .kulai-horizontal-story__intro-gallery img, .kulai-horizontal-story__large-img, .kulai-horizontal-story__small-row img, .kulai-horizontal-story__poster-img, .kulai-horizontal-story__portrait-img, .kulai-horizontal-story__card-row img, .service-centre-horizontal__colour-system, .service-centre-horizontal__mini-flags, .service-centre-horizontal__big-pattern { transform: none !important; opacity: 1 !important; } } /* ================= Service Centre Identity ================= */ .service-centre-identity { background: var(--page-section-bg); padding: 120px 0 180px; overflow: hidden; } .service-centre-identity__wrap { width: min(1180px, calc(100% - 88px)); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 34px; row-gap: 48px; align-items: start; } .service-centre-identity__media img { width: 100%; height: auto; display: block; object-fit: cover; } .service-centre-identity__copy p { margin: 0; font-size: 15px; line-height: 20px; color: #b1b1b1; font-weight: 400; } /* top left card */ .service-centre-identity__media--card { grid-column: 1 / 6; grid-row: 1 / 3; } /* top copy */ .service-centre-identity__copy--top { grid-column: 6 / 11; grid-row: 1; max-width: 520px; margin-top: 30px; } /* large stage image */ .service-centre-identity__media--stage { grid-column: 6 / 13; grid-row: 2 / 5; /* margin-top: 10px; */ } /* stationery image */ .service-centre-identity__media--stationery { grid-column: 1 / 8; grid-row: 5 / 9; } /* middle copy */ .service-centre-identity__copy--middle { grid-column: 8 / 13; grid-row: 7; max-width: 460px; align-self: end; } /* flags image */ .service-centre-identity__media--flags { grid-column: 8 / 13; grid-row: 8 / 11; } /* bottom left copy */ .service-centre-identity__copy--bottom { grid-column: 3 / 8; grid-row: 10; max-width: 380px; margin-top: 24px; } /* tablet */ @media (max-width: 1024px) { .service-centre-identity { padding: 100px 0 140px; } .service-centre-identity__wrap { width: calc(100% - 60px); column-gap: 24px; row-gap: 38px; } .service-centre-identity__copy p { font-size: 13px; } .service-centre-identity__copy--top { grid-column: 6 / 13; } .service-centre-identity__media--stage { grid-column: 6 / 13; } .service-centre-identity__copy--middle { grid-column: 8 / 13; } .service-centre-identity__media--flags { grid-column: 8 / 13; } } @media (max-width: 960px) { .service-centre-identity__copy--bottom { grid-column: 2 / 8; margin-top: 0; } } /* mobile */ @media (max-width: 768px) { .service-centre-identity { padding: 0 0 90px; } .service-centre-identity__wrap { width: 100%; display: flex; flex-direction: column; gap: 24px; margin: 0; } .service-centre-identity__media, .service-centre-identity__copy { width: 100%; max-width: none; margin: 0; } .service-centre-identity__copy p { font-size: 13px; line-height: 1.3; max-width: 450px; } .service-centre-identity__copy--top { order: 2; } .service-centre-identity__media--card { order: 1; } .service-centre-identity__media--stage { order: 3; } .service-centre-identity__media--stationery { order: 4; } .service-centre-identity__copy--middle { order: 5; } .service-centre-identity__media--flags { order: 6; } .service-centre-identity__copy--bottom { order: 7; } .service-centre-identity__copy--top, .service-centre-identity__copy--middle, .service-centre-identity__copy--bottom, .service-centre-identity__media--stage, .service-centre-identity__media--stationery, .service-centre-identity__media--flags { padding: 0 30px; max-width: 620px; margin: 0 auto; } } /* ================= Service Centre Identity Scroll Effect ================= */ .service-centre-identity__wrap.is-scroll-effect-ready .service-centre-identity__media { opacity: 0; transform: translate3d(0, 80px, 0) scale(0.92); transform-origin: center center; will-change: transform, opacity; backface-visibility: hidden; } .service-centre-identity__media img { will-change: transform; } /* mobile: softer motion */ @media (max-width: 768px) { .service-centre-identity__wrap.is-scroll-effect-ready .service-centre-identity__media { transform: translate3d(0, 55px, 0) scale(0.96); } } @media (prefers-reduced-motion: reduce) { .service-centre-identity__wrap.is-scroll-effect-ready .service-centre-identity__media { opacity: 1 !important; transform: none !important; } }