@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; } .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; } /* ================= HERO ================= */ .hero.hero--dnaplus { position: relative; background: var(--page-section-bg); color: var(--page-text-main); overflow: hidden; min-height: 100vh; display: flex; align-items: center; } .hero.hero--dnaplus .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: 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-wrap { flex: 1; display: flex; align-items: flex-start; justify-content: flex-start; /* padding-top: 70px; */ } .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: 1.08; font-weight: 400; letter-spacing: 0; color: var(--page-text-main); } .hero-description { margin: 0; max-width: 68ch; font-size: 16px; line-height: 24px; 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: #8F8F8F; } /* decorative molecule corners */ .hero-molecule { position: absolute; z-index: 1; /* opacity: 0.75; */ pointer-events: none; } .hero-molecule--tl { top: 0; left: 0; width: clamp(200px, 30vw, 460px); } .hero-molecule--br { right: 0; bottom: -210px; width: clamp(280px, 40vw, 620px); } /* tablet */ @media (max-width: 991px) { .hero.hero--dnaplus .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: center; } .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; } .hero-bottom-right { justify-content: center; align-items: center; text-align: center; } .hero-bottom-right { flex-direction: column; gap: 30px; max-width: unset; } .hero-copy { width: 100%; margin: 0 auto; } .hero-description { width: 100%; max-width: 600px; margin: 0 auto; } } /* mobile */ @media (max-width: 640px) { .hero.hero--dnaplus .hero-container { width: calc(100% - 36px); row-gap: 28px; } .hero-logo { width: min(62vw, 260px); } .hero-title { /* font-size: clamp(28px, 8vw, 42px); line-height: 1.12; */ margin-bottom: 18px; } /* .hero-description { font-size: 15px; line-height: 1.65; } */ .hero-declare-container { flex-direction: column; gap: 10px; } /* .hero-description-declare { font-size: 13px; } */ /* .hero-molecule--tl { width: 160px; } */ .hero-molecule--br { bottom: 0; width: 180px; } } /* ================= Journey Banner ================= */ .journey-banner { padding: 0; background: var(--page-section-bg); } .journey-banner__media { position: relative; width: 100%; overflow: hidden; aspect-ratio: 2.5 / 1; } .journey-banner__img { display: block; width: 100%; height: auto; transform: translateY(-55px); } /* text overlay */ .journey-banner__content { position: absolute; top: 50%; left: calc( (95vw - min(var(--container), 100vw - 2*var(--gutter))) / 2 + var(--gutter) ); transform: translateY(-50%); z-index: 2; } .journey-banner__title { margin: 0; color: var(--page-text-main); font-size: clamp(26px, 4vw, 55px); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; line-height: 126%; letter-spacing: -0.02em; text-transform: uppercase; max-width: 19.8ch; } @media (max-width: 900px) { .journey-banner__content { left: 40px; } .journey-banner__title { font-size: clamp(22px, 4.5vw, 36px); max-width: 20ch; } .journey-banner__media { aspect-ratio: 2.2 / 1; } .journey-banner__img { transform: none; } } @media (max-width: 640px) { .journey-banner__content { left: 30px; } .journey-banner__title { font-size: clamp(18px, 6vw, 26px); line-height: 1.12; max-width: 15ch; } } /* ================= Service Blocks ================= */ .service-blocks { padding: 150px 0; background: var(--page-section-bg); } .service-blocks__wrap { width: min(1400px, calc(100% - 100px)); margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .service-card { position: relative; min-height: 430px; border: 0; border-radius: 8px; background: #F3F3F3; padding: 24px; text-align: left; cursor: pointer; overflow: hidden; transition: background 0.35s ease, transform 0.25s ease; display: block; } .service-card__dot { position: absolute; top: 24px; left: 24px; width: 24px; height: 24px; border-radius: 50%; background: #1E7CAE; z-index: 2; transition: background 0.3s ease; } .service-card__inner { position: relative; width: 100%; height: 100%; min-height: 382px; /* 430 - padding space approx */ } /* .service-card__title { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; color: #1E7CAE; font-size: clamp(28px, 2.3vw, 38px); line-height: 1.1; font-weight: 600; max-width: 8ch; transform: translateY(0); transition: transform 0.45s cubic-bezier(.22,.61,.36,1), color 0.3s ease; z-index: 2; } */ .service-card__title-wrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 80px; transform: translateY(0); transition: transform 0.45s cubic-bezier(.22,.61,.36,1) 0.1s; } .service-card__title { margin: 0; color: #1E7CAE; font-size: clamp(28px, 2.3vw, 38px); line-height: 1.1; font-weight: 600; max-width: 8ch; /* transition: color 0.3s ease; */ } .service-card__desc { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; color: #ffffff; font-size: 16px; line-height: 20px; opacity: 0; transform: translateY(24px); transition: opacity 0.35s ease 0.08s, transform 0.45s cubic-bezier(.22,.61,.36,1) 0.08s; pointer-events: none; z-index: 1; } /* hover / click active */ .service-card:hover, .service-card.is-active { background: linear-gradient(180deg, #a7cdf0 0%, #2e86cc 100%); } .service-card:hover .service-card__title-wrap, .service-card.is-active .service-card__title-wrap { transform: translateY(-245px); } .service-card:hover .service-card__title, .service-card.is-active .service-card__title { color: #ffffff; } .service-card:hover .service-card__desc, .service-card.is-active .service-card__desc { opacity: 1; transform: translateY(0); } .service-card:hover .service-card__dot, .service-card.is-active .service-card__dot { background: #ffffff; } @media (max-width: 1100px) { .service-blocks__wrap { width: min(100%, calc(100% - 60px)); grid-template-columns: repeat(2, minmax(0, 350px)); justify-content: center; } .service-card { min-height: 360px; } .service-card__inner { min-height: 312px; } .service-card__title-wrap { height: 75px; } .service-card__title { font-size: 30px; } .service-card:hover .service-card__title-wrap, .service-card.is-active .service-card__title-wrap { transform: translateY(-185px); } .service-card__desc { font-size: 15px; line-height: 19px; } } @media (max-width: 640px) { .service-blocks { padding: 60px 0; } .service-blocks__wrap { width: calc(100% - 36px); grid-template-columns: 300px; gap: 14px; } .service-card { min-height: 240px; padding: 20px; } .service-card__inner { min-height: 220px; } .service-card__dot { top: 18px; left: 18px; width: 22px; height: 22px; } .service-card__title-wrap { height: 60px; } .service-card__title { font-size: 24px; max-width: none; } .service-card:hover .service-card__title-wrap, .service-card.is-active .service-card__title-wrap { transform: translateY(-110px); } .service-card__desc { font-size: 14px; line-height: 1.4; } } /* ================= Packaging Story ================= */ .packaging-story { padding: 90px 0 110px; background: var(--page-section-bg); } .packaging-story__wrap { width: min(1400px, calc(100% - 100px)); margin: 0 auto; } /* ---------- intro ---------- */ .packaging-story__intro { /* max-width: 860px; */ margin: 0 auto 42px; text-align: left; } .packaging-story__heading { margin: 0 0 18px; font-size: 36px; /* font-size: clamp(34px, 3.1vw, 52px); */ line-height: 121%; font-weight: 400; color: var(--page-text-main); } .packaging-story__intro-copy { /* max-width: 720px; */ margin: 0 auto; } .packaging-story__intro-copy p { margin: 0 0 16px; font-size: 15px; line-height: 20px; color: #8f8f8f; } .packaging-story__intro-copy p:last-child { margin-bottom: 0; } .packaging-story__intro-copy em, .packaging-story__text em { color: #4FA1DE; font-style: italic; font-weight: 600; } /* ---------- logo row ---------- */ .packaging-story__logo-row { display: flex; justify-content: flex-start; align-items: center; gap: 28px; margin-bottom: 42px; } .packaging-story__logo { /* width: clamp(220px, 22vw, 320px); */ width: 100%; max-width: 300px; height: auto; display: block; } .packaging-story__logo-mark { /* width: clamp(70px, 7vw, 110px); */ width: 100%; max-width: 440px; height: auto; display: block; } /* ---------- canvas for absolute decorative molecules ---------- */ .packaging-story__canvas { position: relative; } /* molecules do NOT affect layout */ .packaging-story__molecule { position: absolute; pointer-events: none; /* opacity: 0.5; */ z-index: 0; } .packaging-story__molecule--right { width: 100%; max-width: 510px; top: 1050px; right: 0px; } .packaging-story__molecule--left { width: 100%; max-width: 530px; left: -250px; top: 850px; rotate: 180deg; } /* ---------- strict desktop grid ---------- */ .packaging-story__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 50px; align-items: start; } .packaging-story__grid .packaging-story__intro { grid-column: 4 / 10; grid-row: 1; } .packaging-story__grid .packaging-story__logo-row { grid-column: 1 / 4; grid-row: 1; } .packaging-story__grid .packaging-story__logo-only-row { grid-column: 8 / -1; grid-row: 2 / 6; } /* media */ /* Packaging story scroll pop animation */ .packaging-story__media { opacity: 0; transform: translateY(36px) scale(0.94); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .packaging-story__media.is-visible { opacity: 1; transform: translateY(0) scale(1); } .packaging-story__media img { width: 100%; height: auto; display: block; } .packaging-story__media--box { grid-column: 1 / 5; grid-row: 3 / 7; } .packaging-story__media--box img { max-height: 500px; } .packaging-story__text--clarity { grid-column: 5 / 10; grid-row: 5 / 7; align-self: center; max-width: 500px; } .packaging-story__media--instruction { grid-column: 4 / 7; grid-row: 8; /* margin-top: 14px; */ } .packaging-story__media--kit { grid-column: 7 / 11; grid-row: 8; /* margin-top: -80px; */ display: flex; flex-direction: column; max-width: 520px; } .packaging-story__text--guide { grid-column: 6 / 10; grid-row: 7; margin-top: 30px; } /* text */ .packaging-story__text { position: relative; } .packaging-story__text h3 { margin: 0 0 16px; /* font-size: clamp(28px, 2.1vw, 40px); */ font-size: 36px; line-height: 121%; font-weight: 400; color: var(--page-text-main); } .packaging-story__text p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: #8f8f8f; } .packaging-story__text .packaging-story__desc { font-size: 20px; line-height: 24px; } .packaging-story__desc em { color: #3BA0EB; font-style: italic; font-weight: 600; } .packaging-story__text p:last-child { margin-bottom: 0; } @media (max-width: 1040px) { .packaging-story__wrap { width: 100%; margin: 0; } .packaging-story__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 50px; column-gap: 25px; /* justify-items: center; */ } .packaging-story__grid .packaging-story__intro { grid-column: 2 / 7; grid-row: 1; text-align: center; } .packaging-story__intro-copy p { font-size: 20px; line-height: 24px; } .packaging-story__grid .packaging-story__logo-row { grid-column: 2 / 5; grid-row: 3; margin-bottom: 0; } .packaging-story__grid .packaging-story__logo-only-row { grid-column: 5 / 7; grid-row: 2 / 5; display: flex; justify-content: center; } .packaging-story__logo { max-width: 390px; } .packaging-story__logo-mark { width: 100%; max-width: 185px; } /* media */ .packaging-story__media img { width: 100%; height: auto; display: block; } .packaging-story__media--box { grid-column: 1 / 4; grid-row: 5 / 8; } .packaging-story__media--box img { max-height: 600px; } .packaging-story__text--clarity { grid-column: 4 / 7; grid-row: 6 / 8; align-self: center; max-width: 500px; } .packaging-story__media--instruction { grid-column: 2 / 5; grid-row: 9 / 12; /* margin-top: 14px; */ } .packaging-story__media--kit { grid-column: 5 / 8; grid-row: 8 / 11; /* margin-top: -80px; */ display: flex; flex-direction: column; max-width: 520px; } .packaging-story__text--guide { margin-top: 30px; padding: 0 25px 0 0; } .packaging-story__molecule--right { max-width: 350px; top: 850px; right: 0px; } .packaging-story__molecule--left { max-width: 320px; top: 1350px; left: -50px; } } @media (max-width: 680px) { .packaging-story__wrap { width: 100%; margin: 0; } .packaging-story__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 50px; column-gap: 25px; /* justify-items: center; */ } .packaging-story__grid .packaging-story__intro { grid-column: 2 / 7; grid-row: 1; text-align: center; } .packaging-story__heading, .packaging-story__text h3 { font-size: 30px; } .packaging-story__intro-copy p, .packaging-story__text .packaging-story__desc { font-size: 14px !important; line-height: 24px; } .packaging-story__grid .packaging-story__logo-row { grid-column: 2 / 5; grid-row: 3; margin-bottom: 0; } .packaging-story__grid .packaging-story__logo-only-row { grid-column: 5 / 7; grid-row: 2 / 5; display: flex; justify-content: center; } .packaging-story__logo { max-width: 220px; } .packaging-story__logo-mark { width: 100%; max-width: 135px; } /* media */ .packaging-story__media--box { grid-column: 1 / 4; grid-row: 5 / 8; } .packaging-story__text--clarity { grid-column: 4 / 7; grid-row: 5 / 8; /* align-self: center; max-width: 500px; */ } .packaging-story__media--instruction { grid-column: 2 / 5; grid-row: 9 / 12; /* margin-top: 14px; */ } .packaging-story__media--kit { grid-column: 5 / 8; grid-row: 8 / 11; /* margin-top: -80px; */ display: flex; flex-direction: column; max-width: 520px; } .packaging-story__molecule--left { top: 1150px; left: 0px; } .packaging-story__molecule--right { top: 650px; } } @media (max-width: 600px) { .packaging-story__heading, .packaging-story__text h3 { font-size: 26px; } .packaging-story__grid .packaging-story__intro { grid-column: 2 / 7; grid-row: 1; text-align: center; } .packaging-story__grid .packaging-story__logo-row { grid-column: 2 / 5; grid-row: 3; margin-bottom: 0; } .packaging-story__grid .packaging-story__logo-only-row { grid-column: 5 / 7; grid-row: 2 / 5; display: flex; justify-content: center; } /* media */ .packaging-story__media--box { grid-column: 2 / 7; grid-row: 5; } .packaging-story__media--box img { max-height: 400px; } .packaging-story__text--clarity { grid-column: 2 / 7; grid-row: 6; text-align: center; /* align-self: center; max-width: 500px; */ } .packaging-story__media--instruction { grid-column: 2 / 7; grid-row: 7; /* margin-top: 14px; */ } .packaging-story__media--instruction img { max-height: 480px; object-fit: cover; } .packaging-story__media--kit { grid-column: 2 / 7; grid-row: 8; } .packaging-story__text--guide { padding: 0; text-align: center; } .packaging-story__molecule--left { top: 1100px; } .packaging-story__molecule--right { top: 1900px; } } /* ================= DNA Video Section ================= */ .dna-video-section { padding: 80px 0 0; background: var(--page-section-bg); } .dna-video-wrap { /* width: min(1400px, calc(100% - 100px)); */ width: 100%; margin: 0 auto; overflow: hidden; background: #f3f3f3; aspect-ratio: 16 / 9; position: relative; } .dna-video-wrap::after { content: ""; position: absolute; inset: 0; z-index: 2; background: transparent; pointer-events: none; } .dna-video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } /* tablet */ @media (max-width: 900px) { .dna-video-section { padding: 60px 0 0; } /* .dna-video-wrap { width: calc(100% - 60px); } */ } /* mobile */ @media (max-width: 640px) { .dna-video-section { padding: 50px 0 0; } .dna-video-wrap { /* width: calc(100% - 36px); */ aspect-ratio: 4 / 3; } .dna-video { object-position: center right; } } /* ================= DNA Highlight ================= */ .dna-highlight { position: relative; padding: 120px 0; background: var(--page-section-bg); overflow: hidden; } .dna-highlight__wrap { width: min(1400px, calc(100% - 100px)); margin: 0 auto; position: relative; } /* layout */ .dna-highlight__content { display: flex; align-items: center; justify-content: center; gap: 40px; } /* text */ .dna-highlight__text { font-size: clamp(18px, 1.3vw,24px); line-height: 1.5; color: #8f8f8f; /* max-width: 260px; */ } .dna-highlight__text--left { text-align: right; align-self: flex-start; } .dna-highlight__text--right { text-align: left; align-self: flex-end; } /* BIG DNA */ .dna-highlight__title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-style: italic; font-size: clamp(130px, 9.2vw,160px); line-height: 1.26; margin: 0; background: linear-gradient(180deg, #ACD5F9 0%, #1580D0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* molecule (same style as previous section) */ .dna-highlight__molecule { position: absolute; /* opacity: 0.4; */ pointer-events: none; } .dna-highlight__molecule--top-right { top: -280px; right: 0px; width: 420px; } .dna-highlight__molecule--bottom-left { bottom: -280px; left: 0px; width: 420px; rotate: 180deg; } @media (max-width: 900px) { .dna-highlight { padding: 90px 0; } .dna-highlight__wrap { width: calc(100% - 60px); } .dna-highlight__content { column-gap: 24px; row-gap: 10px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .dna-highlight__title { font-size: 110px; grid-column: 3 / 6; grid-row: 1; } .dna-highlight__text { font-size: 16px; } .dna-highlight__text--left { grid-column: 1 / 3; grid-row: 1; } .dna-highlight__text--right { grid-column: 4 / 6; grid-row: 2; } .dna-highlight__molecule { display: none; } } @media (max-width: 470px) { .dna-highlight__content { row-gap: 20px; grid-template-columns: repeat(1, minmax(0, 1fr)); } .dna-highlight__text--left { grid-column: 1; grid-row: 1; } .dna-highlight__title { grid-column: 1; grid-row: 2; text-align: center; } .dna-highlight__text--right { grid-column: 1; grid-row: 3; } } /* ================= Website Showcase ================= */ .website-showcase { padding: 120px 0; background: #F1F1F1; overflow: hidden; } .website-showcase__wrap { position: relative; width: min(980px, calc(100% - 100px)); margin: 0 auto; } .website-showcase__desktop { width: 82%; } .website-showcase__desktop img { max-height: 1000px; object-fit: cover; object-position: top; } .website-showcase__desktop img, .website-showcase__mobile img { display: block; width: 100%; height: auto; border-radius: 10px; } .website-showcase__mobile { position: absolute; right: 0; top: 23%; width: 32%; z-index: 2; } @media (max-width: 900px) { .website-showcase { padding: 90px 0; } .website-showcase__wrap { width: calc(100% - 60px); } .website-showcase__desktop { width: 82%; } .website-showcase__mobile { width: 32%; top: 20%; right: 0; } .website-showcase__desktop img { max-height: 750px; } } @media (max-width: 640px) { .website-showcase { padding: 70px 0; } .website-showcase__wrap { width: calc(100% - 36px); } .website-showcase__desktop { width: 82%; } .website-showcase__mobile { width: 34%; top: 24%; right: 0; } .website-showcase__desktop img { max-height: 600px; } } @media (max-width: 480px) { .website-showcase__desktop img { max-height: 350px; } } /* ================= Mobile Report ================= */ .mobile-report { padding: 100px 0 0; background: #cfe7ff; } .mobile-report__wrap { width: min(1400px, calc(100% - 100px)); margin: 0 auto; overflow: hidden; /* important for crop */ /* background: #d8ecff; */ } .mobile-report__img { width: 100%; height: auto; display: block; } @media (max-width: 900px) { .mobile-report__wrap { width: calc(100% - 60px); } .mobile-report__img { width: 100%; height: auto; display: block; } } @media (max-width: 640px) { .mobile-report__wrap { width: 100%; height: 380px; /* control visible area */ } .mobile-report__img { width: 100%; height: 100%; object-fit: cover; /* crop instead of shrink */ object-position: center; /* keep phone centered */ } } @media (max-width: 600px) { .mobile-report { padding: 60px 0 0; } .mobile-report__wrap { width: 100%; height: 290px; /* control visible area */ } } /* ================= Testimonial ================= */ .dna-testimonial { padding: 100px 0; background: var(--page-section-bg); position: relative; overflow: hidden; } .dna-testimonial__molecule { position: absolute; pointer-events: none; z-index: 0; display: none; } .dna-testimonial__molecule--left { width: 420px; left: -160px; bottom: 40px; transform: rotate(180deg); } .dna-testimonial__molecule--right { width: 420px; right: -150px; top: 80px; } .dna-testimonial__wrap { position: relative; z-index: 2; } .dna-testimonial__wrap { width: min(1100px, calc(100% - 100px)); margin: 0 auto; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; column-gap: 28px; } .dna-testimonial__slider { position: relative; overflow: hidden; min-height: 480px; grid-column: 2; display: flex; align-items: center; } .dna-testimonial__slide { position: absolute; inset: 0; opacity: 0; transform: translateX(24px); pointer-events: none; text-align: center; padding: 80px 60px; border-radius: 12px; transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.33, 1, 0.68, 1); } .dna-testimonial__slide.is-active { position: relative; opacity: 1; transform: translateX(0); pointer-events: auto; } .dna-testimonial__slide.is-leaving-left { transform: translateX(-24px); } /* themes */ .dna-testimonial__slide.light { background: transparent; color: #2a2a2a; } .dna-testimonial__slide.dark { background: transparent; color: #ffffff; } /* text */ .dna-testimonial__text { font-size: clamp(20px, 1.3vw, 24px); line-height: 1.6; margin-bottom: 24px; color: var(--page-text-main); } .dna-testimonial__author { font-size: 20px; /* opacity: 0.6; */ color: #B1B1B1; line-height: 30px; } /* arrows */ .dna-testimonial__nav { display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; cursor: pointer; transition: transform 0.2s ease; } /* .dna-testimonial__nav:hover { transform: scale(1.08); background: #1e6fe0; } */ .dna-testimonial__nav.prev { grid-column: 1; } .dna-testimonial__nav.next { grid-column: 3; } .dna-testimonial__nav img { width: 60px; height: 60px; object-fit: contain; display: block; } @media (max-width: 900px) { .dna-testimonial__molecule { display: block; } .dna-testimonial__molecule--left { width: 320px; left: 0px; bottom: 0px; } .dna-testimonial__molecule--right { width: 320px; right: -80px; top: 20px; } } @media (max-width: 780px) { .dna-testimonial__slide { padding: 50px 30px; } } @media (max-width: 640px) { .dna-testimonial { padding: 70px 0; } .dna-testimonial__wrap { width: calc(100% - 36px); grid-template-columns: 36px 1fr 36px; column-gap: 10px; } .dna-testimonial__slide { padding: 40px 20px; } .dna-testimonial__text { font-size: 16px; } .dna-testimonial__author { font-size: 15px; } .dna-testimonial__nav img{ width: 36px; height: 36px; } /* .dna-testimonial__nav img { width: 14px; height: 14px; } */ } @media (max-width: 600px) { .dna-testimonial__molecule--left { width: 260px; left: -30px; bottom: 20px; } .dna-testimonial__molecule--right { width: 260px; right: -30px; top: 0px; } } /* ================= Brand Presence ================= */ .brand-presence { padding: 0 0 120px; background: var(--page-section-bg); overflow: hidden; } .brand-presence__wrap { width: 100%; /* width: min(1400px, calc(100% - 100px)); */ margin: 0; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 36px; row-gap: 40px; } .brand-presence__media img { width: 100%; height: auto; display: block; position: relative; } .brand-presence__media--top { grid-column: 2 / 7; grid-row: 1; } .brand-presence__copy { grid-column: 7 / 12; grid-row: 1; align-self: start; } .brand-presence__copy h2 { margin: 0 0 22px; font-size: 36px; line-height: 121%; font-weight: 400; color: var(--page-text-main); } .brand-presence__copy p { margin: 0 0 18px; font-size: 15px; font-weight: 400; line-height: 20px; color: #8f8f8f; max-width: 550px; } .brand-presence__copy em { color: #3BA0EB; font-style: italic; font-weight: 600; } .brand-presence__media--bottom-left { grid-column: 3 / 8; grid-row: 3 / 6; overflow: hidden; } .brand-presence__media--bottom-left img { transform: scale(1.15); /* increase as you like */ transform-origin: center; } .brand-presence__media--bottom-right { grid-column: 8 / -1; grid-row: 2 / 5; margin-left: 50px; } .brand-presence__molecule { position: absolute; pointer-events: none; z-index: 0; } .brand-presence__molecule--left { width: 500px; left: -130px; top: 250px; /* transform: rotate(180deg); */ } .brand-presence__molecule--right { width: 500px; right: -120px; bottom: -80px; } /* Desktop: keep original scattered layout */ .brand-presence__carousel, .brand-presence__track { display: contents; } .brand-presence__nav { display: none; } @media (max-width: 1200px) { .brand-presence__molecule--left, .brand-presence__molecule--right { width: 350px; } .brand-presence__wrap { column-gap: 25px; row-gap: 20px; } .brand-presence__copy h2 { font-size: 32px; margin: 0 0 16px; } } @media (max-width: 900px) { .brand-presence { padding: 0 0 90px; } .brand-presence__copy { grid-column: 2 / 12; grid-row: 1; text-align: center; } .brand-presence__copy p { max-width: unset; } .brand-presence__copy em { color: #3BA0EB; } .brand-presence__carousel { display: block; grid-column: 1 / -1; grid-row: 2; position: relative; width: calc(100% - 72px); margin: 0 auto; } .brand-presence__track { display: flex; position: relative; overflow: hidden; min-height: 550px; align-items: center; justify-content: center; } .brand-presence__track .brand-presence__media { display: none; grid-column: unset; grid-row: unset; margin: 0; } .brand-presence__track .brand-presence__media.is-active { display: block; } .brand-presence__track .brand-presence__media img { width: 100%; height: auto; display: block; transform: none; } .brand-presence__nav { display: block; position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; border: 0; background: transparent; padding: 0; cursor: pointer; } .brand-presence__nav img { width: 48px; height: 48px; display: block; } .brand-presence__nav--prev { left: 15px; } .brand-presence__nav--next { right: 15px; } .brand-presence__molecule--left { width: 300px; left: -120px; top: 330px; } .brand-presence__molecule--right { width: 300px; right: -90px; bottom: -40px; } } @media (max-width: 600px) { .brand-presence__wrap { /* width: calc(100% - 36px); */ grid-template-columns: 1fr; row-gap: 32px; padding: 0 20px; justify-items: center; } .brand-presence__carousel { width: calc(100% - 72px); } .brand-presence__track { min-height: 350px; } .brand-presence__nav img { width: 40px; height: 40px; } /* .brand-presence__nav--prev { left: -20px; } .brand-presence__nav--next { right: -20px; } */ .brand-presence__media--top, .brand-presence__copy, .brand-presence__media--bottom-left, .brand-presence__media--bottom-right { grid-column: 1; grid-row: auto; margin-top: 0; } .brand-presence__copy { width: calc(100% - 30px); text-align: center; } .brand-presence__copy h2 { font-size: 26px; } .brand-presence__copy p { font-size: 14px; line-height: 1.5; } .brand-presence__molecule--left { width: 220px; left: -80px; top: 620px; } .brand-presence__molecule--right { width: 220px; right: -80px; bottom: 260px; } } @media (max-width: 480px) { .brand-presence__molecule--right { width: 180px; right: -60px; bottom: 140px; } .brand-presence__track { min-height: 250px; } .brand-presence__nav img { width: 30px; height: 30px; } } /* ================= DNA Social Carousel ================= */ .dna-social-carousel { padding: 60px 0 150px; background: var(--page-section-bg); overflow: hidden; } .dna-social-carousel__wrap { position: relative; width: min(1350px, calc(100% - 100px)); margin: 0 auto; } .dna-social-carousel__track { position: relative; height: 520px; display: flex; align-items: center; justify-content: center; } .dna-social-carousel__item { position: absolute; width: clamp(320px, 28vw, 480px); aspect-ratio: 4 / 5; opacity: 0; cursor: pointer; transition: transform 0.65s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.45s ease, filter 0.45s ease, z-index 0.2s ease; will-change: transform, opacity; } .dna-social-carousel__item img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 8px; } /* active center */ .dna-social-carousel__item[data-pos="0"] { opacity: 1; z-index: 5; transform: translateX(0) scale(1.08); } /* near left/right */ .dna-social-carousel__item[data-pos="-1"] { /* opacity: 0.9; */ opacity: 1; z-index: 4; transform: translateX(-52%) scale(0.93); } .dna-social-carousel__item[data-pos="1"] { /* opacity: 0.9; */ opacity: 1; z-index: 4; transform: translateX(52%) scale(0.93); } /* far left/right */ .dna-social-carousel__item[data-pos="-2"] { /* opacity: 0.75; */ opacity: 1; z-index: 3; transform: translateX(-90%) scale(0.82); } .dna-social-carousel__item[data-pos="2"] { /* opacity: 0.75; */ opacity: 1; z-index: 3; transform: translateX(90%) scale(0.82); } /* hidden */ .dna-social-carousel__item[data-pos="hidden-left"] { opacity: 0; z-index: 1; transform: translateX(-150%) scale(0.75); } .dna-social-carousel__item[data-pos="hidden-right"] { opacity: 0; z-index: 1; transform: translateX(150%) scale(0.75); } /* arrows */ .dna-social-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; border: 0; background: transparent; padding: 0; cursor: pointer; } .dna-social-carousel__nav img { width: 60px; height: 60px; display: block; } .dna-social-carousel__nav--prev { left: 0; } .dna-social-carousel__nav--next { right: 0; } @media (max-width: 900px) { .dna-social-carousel { padding: 90px 0; } .dna-social-carousel__wrap { width: calc(100% - 60px); } .dna-social-carousel__track { height: 460px; } .dna-social-carousel__item { width: clamp(200px, 42vw, 320px); } .dna-social-carousel__nav img { width: 48px; height: 48px; } } @media (max-width: 840px) { .dna-social-carousel { padding: 0 0 80px; } .dna-social-carousel__nav { display: none; } } @media (max-width: 600px) { .dna-social-carousel { padding: 0 0 70px; } .dna-social-carousel__wrap { width: 100%; } .dna-social-carousel__track { height: 390px; } .dna-social-carousel__item { width: 240px; } .dna-social-carousel__item[data-pos="-2"], .dna-social-carousel__item[data-pos="2"] { opacity: 0; } .dna-social-carousel__nav--prev { left: 18px; } .dna-social-carousel__nav--next { right: 18px; } .dna-social-carousel__nav img { width: 40px; height: 40px; } } /* ================= Social Video Section ================= */ .dna-social-video { background: linear-gradient(180deg, #e8f6ff 0%, #54aee9 100%); padding: 90px 0; overflow: hidden; } .dna-social-video__wrap { width: min(1200px, calc(100% - 100px)); margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 60px; } .dna-social-video__phone { display: flex; justify-content: flex-end; } .dna-social-video__phone img { width: min(320px, 100%); height: auto; display: block; } .dna-video-sound-btn { position: absolute; left: 23%; bottom: -18%; /* transform: translateX(-50%); */ z-index: 30; border: 0; border-radius: 999px; background: rgba(0,0,0,0.5); color: #ffffff; padding: 12px 20px; font-size: 14px; line-height: 1; cursor: pointer; transition: opacity 0.3s ease, transform 0.3s ease; } .dna-video-sound-btn:hover { transform: scale(1.04); } .dna-video-sound-btn.is-hidden { opacity: 0; pointer-events: none; } /* video carousel */ .dna-video-carousel { position: relative; } .dna-video-carousel__track { position: relative; height: 560px; display: flex; align-items: center; justify-content: center; } .dna-video-carousel__item { position: absolute; /* width: 300px; */ aspect-ratio: 9 / 16; opacity: 0; cursor: pointer; transition: transform 0.65s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.45s ease; will-change: transform, opacity; } .dna-video-carousel__item[data-pos="0"] { cursor: pointer; opacity: 1; z-index: 5; transform: translateX(0) scale(1.05); } .dna-video-carousel__item[data-pos="-1"] { pointer-events: none; opacity: 0.75; z-index: 3; transform: translateX(-45%) scale(0.9); } .dna-video-carousel__item[data-pos="1"] { cursor: pointer; opacity: 0.75; z-index: 3; transform: translateX(45%) scale(0.9); } .dna-video-carousel__item[data-pos="hidden-left"] { pointer-events: none; opacity: 0; transform: translateX(-90%) scale(0.8); } .dna-video-carousel__item[data-pos="hidden-right"] { cursor: pointer; opacity: 0; transform: translateX(90%) scale(0.8); } .dna-video-carousel__video { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 14px; background: transparent; } /* arrows */ .dna-video-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; border: 0; background: transparent; padding: 0; cursor: pointer; } .dna-video-carousel__nav img { width: 56px; height: 56px; display: block; } .dna-video-carousel__nav--prev { display: none; left: -20px; } .dna-video-carousel__nav--next { right: -20px; } /* ================= Social Video Section - Desktop Fix ================= */ @media (min-width: 901px) { .dna-social-video { position: relative; background: var(--page-section-bg); padding: 150px 0; overflow: hidden; } /* left 50% gradient background only */ .dna-social-video::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 65%; background: linear-gradient(180deg, #F0F8FF 0%, #4FA1DE 100%); z-index: 0; } .dna-social-video__wrap { position: relative; z-index: 1; width: min(1400px, calc(100% - 30px)); grid-template-columns: 0.95fr 1.05fr; gap: 45px; } /* .dna-social-video__phone { justify-content: center; } */ .dna-social-video__phone img { width: min(400px, 90%); } .dna-video-carousel { width: 100%; overflow: visible; } .dna-video-carousel__track { height: 560px; justify-content: flex-start; overflow: visible; } .dna-video-carousel__item { /* width: 320px; */ left: 35%; transform-origin: center center; } /* 1 = active / biggest */ .dna-video-carousel__item[data-pos="0"] { opacity: 1; z-index: 5; transform: translateX(-50%) scale(1); } /* 2 = behind active / smaller */ .dna-video-carousel__item[data-pos="1"] { opacity: 1; z-index: 4; transform: translateX(-8%) scale(0.88); } /* 3 = further behind / smallest */ .dna-video-carousel__item[data-pos="hidden-right"] { opacity: 1; z-index: 3; transform: translateX(28%) scale(0.78); } /* previous slide hides to left */ .dna-video-carousel__item[data-pos="-1"], .dna-video-carousel__item[data-pos="hidden-left"] { opacity: 0; z-index: 1; transform: translateX(-95%) scale(0.75); pointer-events: none; } .dna-video-carousel__nav--prev { left: -25px; } .dna-video-carousel__nav--next { right: 10px; } } @media (max-width: 1380px) { .dna-video-sound-btn { left: 22%; bottom: -6%; } } @media (max-width: 1135px) { .dna-video-sound-btn { left: 20%; bottom: 0%; } } @media (max-width: 1040px) { .dna-video-sound-btn { left: 18%; bottom: 6%; } } @media (max-width: 980px) { .dna-social-video { padding: 90px 0; } } @media (max-width: 900px) { .dna-social-video { padding: 70px 0; background: #ffffff; } .dna-social-video__wrap { width: 100%; grid-template-columns: 1fr; gap: 70px; } .dna-social-video__phone { background: linear-gradient(180deg, #F0F8FF 0%, #4FA1DE 100%); padding: 60px 0; justify-content: center; } .dna-social-video__phone img { width: min(420px, 75%); } .dna-video-carousel__track { height: 600px; } .dna-video-carousel__item { width: 320px; } .dna-video-carousel__nav { display: none; } .dna-video-carousel__nav--prev { left: 20px; } .dna-video-carousel__nav--next { right: 20px; } .dna-video-sound-btn { left: 40%; bottom: 20px; } } @media (max-width: 600px) { .dna-video-carousel__track { height: 420px; } .dna-video-carousel__item { width: 240px; } .dna-video-carousel__nav img { width: 42px; height: 42px; } .dna-video-sound-btn { font-size: 12px; left: 35%; bottom: 0px; } } /* ================= DNA Closing ================= */ .dna-closing { padding: 110px 0 100px; background: var(--page-section-bg); } .dna-closing__wrap { width: min(980px, calc(100% - 100px)); margin: 0 auto; text-align: center; padding: 0 20px; } .dna-closing__icon { width: 72px; height: auto; display: block; margin: 0 auto 42px; } .dna-closing p { margin: 0 auto 26px; font-size: 20px; line-height: 24px; font-weight: 400; color: #8f8f8f; } .dna-closing__links { margin-top: 8px; } @media (max-width: 640px) { .dna-closing { padding: 80px 0 90px; } .dna-closing__wrap { width: calc(100% - 40px); } .dna-closing__icon { width: 58px; margin-bottom: 30px; } .dna-closing p { font-size: 16px; line-height: 1.45; margin-bottom: 22px; } }