/*============================================== DEHYDRATED SKIN HERO ==============================================*/ .ds-landing{ min-height:100vh; padding-top:120px; padding-inline:6%; display:flex; align-items:center; justify-content:center; background:linear-gradient( 180deg, #fffdfc 0%, #fff8fb 100% ); } .ds-canvas{ width:100%; max-width:1400px; display:flex; align-items:center; justify-content:space-between; gap:40px; } /*============================================== LEFT CONTENT ==============================================*/ .ds-copy{ flex:1; max-width:650px; } .ds-eyebrow{ font-family:var(--ff-paragraph); font-size:.9rem; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--clr-primary); margin-bottom:18px; } .ds-headline{ font-size:clamp(3.3rem,4.8vw,4.4rem); line-height:1.08; font-weight:500; color:var(--clr-heading); margin-bottom:38px; margin-top:20px; } .ds-headline span{ color:var(--clr-primary-light); } .ds-lead{ max-width:540px; font-family:var(--ff-paragraph); font-size:1.08rem; line-height:1.8; color:var(--clr-text); margin-bottom:42px; } /*============================================== RIGHT IMAGE ==============================================*/ .ds-image{ position:relative; display:flex; justify-content:center; align-items:center; } .ds-image img{ width:520px; position:relative; z-index:2; display:block; animation:float 4s ease-in-out infinite; } .ds-glow{ width:520px; height:520px; position:absolute; border-radius:60%; background:radial-gradient( circle, rgba(255,214,224,.8), transparent 70% ); filter:blur(35px); animation:pulse 6s infinite; } /*============================================== TABLET ==============================================*/ @media(max-width:1024px){ .ds-landing{ min-height:auto; padding-top:110px; padding-inline:40px; } .ds-canvas{ gap:40px; } .ds-copy{ max-width:460px; } .ds-headline{ font-size:3.2rem; margin-bottom:30px; } .ds-lead{ font-size:1rem; margin-bottom:30px; } .ds-image img{ width:430px; } .ds-glow{ width:420px; height:420px; } } /*============================================== MOBILE ==============================================*/ @media(max-width:768px){ .ds-landing{ min-height:auto; padding-top:90px; padding-inline:20px; } .ds-canvas{ flex-direction:column; text-align:center; gap:35px; } .ds-copy{ max-width:100%; } .ds-headline{ font-size:2.4rem; line-height:1.15; } .ds-lead{ max-width:100%; margin-inline:auto; font-size:.98rem; } .ds-image{ order:-1; } .ds-image img{ width:350px; } .ds-glow{ width:330px; height:330px; } .action{ width:100%; max-width:300px; } } /*============================================== SMALL MOBILE ==============================================*/ @media(max-width:480px){ .ds-headline{ font-size:2rem; } .ds-lead{ font-size:.94rem; } .ds-image img{ width:260px; } .ds-eyebrow{ font-size:.75rem; } } /*============================================== UNDERSTANDING DEHYDRATED SKIN ==============================================*/ .ds-understanding{ padding:60px 5%; background:var(--clr-white); margin-top: 90px; } .ds-understanding-container{ max-width:1300px; margin:auto; display:grid; grid-template-columns:1fr 1.15fr; gap:70px; align-items:center; } /*============================================== LEFT IMAGE ==============================================*/ .ds-understanding-image{ overflow:hidden; border-radius:34px; box-shadow:0 18px 45px rgba(0,0,0,.06); background:linear-gradient( 145deg, #fff, #fdf6fb ); transition:.35s; } .ds-understanding-image:hover{ transform:translateY(-6px); box-shadow:0 24px 55px rgba(0,0,0,.08); } .ds-understanding-image img{ width:100%; display:block; transition:.45s; } .ds-understanding-image:hover img{ transform:scale(1.03); } /*============================================== RIGHT CONTENT ==============================================*/ .ds-section-tag{ display:inline-block; padding:10px 18px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); letter-spacing:3px; font-size:.82rem; font-weight:600; margin-bottom:28px; } .ds-section-title{ font-size:clamp(2.7rem,4vw,4rem); line-height:1.15; font-weight:500; color:var(--clr-heading); margin-bottom:24px; } .ds-section-title span{ color:var(--clr-primary-light); } .ds-section-description{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size:1.05rem; line-height:1.9; margin-bottom:22px; } .ds-section-description:last-child{ margin-bottom:0; } /*============================================== TABLET ==============================================*/ @media(max-width:1024px){ .ds-understanding-container{ grid-template-columns:1fr; gap:55px; } .ds-understanding-content{ text-align:center; } } /*============================================== MOBILE ==============================================*/ @media(max-width:768px){ .ds-understanding{ padding:80px 20px; } .ds-section-title{ font-size:2.3rem; } .ds-section-description{ font-size:.98rem; } .ds-understanding-container{ gap:40px; } .ds-understanding-image{ border-radius:28px; } } /*============================================== SMALL MOBILE ==============================================*/ @media(max-width:480px){ .ds-section-title{ font-size:2rem; } .ds-section-tag{ font-size:.75rem; letter-spacing:2px; } } /*============================================== SECTION 2 - FORMATION PROCESS ==============================================*/ .ds-formation{ padding:50px 5%; background:var(--clr-white); } /*============================================== HEADING ==============================================*/ .ds-formation-heading{ max-width:760px; margin:0 auto 70px; text-align:center; } .ds-formation-tag{ display:inline-block; padding:10px 18px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); letter-spacing:3px; font-size:.82rem; font-weight:600; margin-bottom:28px; } .ds-formation-title{ font-size:clamp(2.7rem,4vw,4rem); line-height:1.15; font-weight:500; color:var(--clr-heading); margin-bottom:22px; } .ds-formation-title span{ color:var(--clr-primary-light); } .ds-formation-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); font-size:1.05rem; line-height:1.9; color:var(--clr-text); } /*============================================== TIMELINE ==============================================*/ .ds-timeline{ max-width:900px; margin:70px auto 0; display:flex; flex-direction:column; align-items:center; gap:22px; } /*============================================== STEP ==============================================*/ .ds-step{ width:100%; display:flex; align-items:center; gap:28px; padding:28px 32px; background:var(--clr-white); border-radius:30px; border:2px solid rgba(0,0,0,.05); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .ds-step:hover{ transform:translateY(-6px); border-color:rgba(214,170,210,.45); box-shadow:0 18px 45px rgba(223,184,216,.22); } /*============================================== STEP NUMBER ==============================================*/ .ds-step-number{ width:60px; height:60px; flex-shrink:0; display:flex; justify-content:center; align-items:center; border-radius:50%; background:var(--clr-primary-light); color:var(--clr-white); font-size:1.35rem; font-weight:600; } /*============================================== STEP CONTENT ==============================================*/ .ds-step-content{ flex:1; } .ds-step-content img{ width:110px; margin-bottom:18px; display:block; } .ds-step-content h3{ font-size:1.45rem; font-weight:500; color:var(--clr-heading); margin-bottom:14px; transition:.3s; font-family:var(--ff-paragraph); } .ds-step:hover h3{ color:var(--clr-primary); } .ds-step-content p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; font-size:1rem; } /*============================================== ARROW ==============================================*/ .ds-arrow{ display:flex; justify-content:center; align-items:center; color:var(--clr-primary-light); font-size:2rem; } /*============================================== TABLET ==============================================*/ @media(max-width:1024px){ .ds-timeline{ max-width:100%; } } /*============================================== MOBILE ==============================================*/ @media(max-width:768px){ .ds-formation{ padding:80px 20px; } .ds-formation-heading{ margin-bottom:45px; } .ds-formation-title{ font-size:2.2rem; } .ds-formation-description{ font-size:.98rem; } .ds-step{ flex-direction:column; text-align:center; padding:28px 24px; } .ds-step-content img{ width:90px; margin:0 auto 18px; } .ds-step-content h3{ font-size:1.3rem; } } /*============================================== SMALL MOBILE ==============================================*/ @media(max-width:480px){ .ds-formation-title{ font-size:2rem; } .ds-formation-tag{ font-size:.75rem; letter-spacing:2px; } .ds-step-number{ width:52px; height:52px; font-size:1.15rem; } } /*============================================== SECTION 3 - SIGNS & APPEARANCE ==============================================*/ .ds-signs{ padding:50px 5%; background:var(--clr-white); } /*============================================== HEADING ==============================================*/ .ds-signs-heading{ max-width:760px; margin:0 auto 60px; text-align:center; } .ds-signs-tag{ display:inline-block; padding:10px 18px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); letter-spacing:3px; font-size:.82rem; font-weight:600; margin-bottom:28px; } .ds-signs-title{ font-size:clamp(2.7rem,4vw,4rem); line-height:1.15; font-weight:500; color:var(--clr-heading); margin-bottom:22px; } .ds-signs-title span{ color:var(--clr-primary-light); } .ds-signs-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); font-size:1.05rem; line-height:1.9; color:var(--clr-text); } /*============================================== GRID ==============================================*/ .ds-signs-grid{ max-width:1300px; margin:60px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } /*============================================== CARD ==============================================*/ .ds-sign-card{ background:var(--clr-white); border-radius:30px; padding:34px 28px; text-align:center; border:2px solid rgba(0,0,0,.05); position:relative; overflow:hidden; cursor:pointer; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .ds-sign-card:hover{ transform:translateY(-10px); border-color:rgba(214,170,210,.45); box-shadow:0 18px 45px rgba(223,184,216,.22); } /*============================================== TOP ACCENT ==============================================*/ .ds-sign-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:5px; background:linear-gradient( 90deg, #f7d7ec, #e8d5ff ); transform:scaleX(0); transform-origin:left; transition:.4s; } .ds-sign-card:hover::before{ transform:scaleX(1); } /*============================================== IMAGE ==============================================*/ .ds-sign-card img{ width:110px; height:110px; object-fit:contain; margin:0 auto 24px; display:block; transition:transform .35s ease; } .ds-sign-card:hover img{ transform:scale(1.08); } /*============================================== TEXT ==============================================*/ .ds-sign-card h3{ font-size:1.35rem; font-weight:500; color:var(--clr-heading); margin-bottom:16px; transition:.3s; font-family:var(--ff-paragraph); } .ds-sign-card:hover h3{ color:var(--clr-primary); } .ds-sign-card p{ font-family:var(--ff-paragraph); font-size:1rem; line-height:1.8; color:var(--clr-text); transition:.3s; } .ds-sign-card:hover p{ color:#555; } /*============================================== TABLET ==============================================*/ @media(max-width:1024px){ .ds-signs-grid{ grid-template-columns:repeat(2,1fr); gap:24px; } } /*============================================== MOBILE ==============================================*/ @media(max-width:768px){ .ds-signs{ padding:80px 20px; } .ds-signs-heading{ margin-bottom:45px; } .ds-signs-title{ font-size:2.2rem; } .ds-signs-description{ font-size:.98rem; } .ds-signs-grid{ grid-template-columns:1fr; } .ds-sign-card{ padding:30px 24px; } .ds-sign-card img{ width:95px; height:95px; } } /*============================================== SMALL MOBILE ==============================================*/ @media(max-width:480px){ .ds-signs-title{ font-size:2rem; } .ds-signs-tag{ font-size:.75rem; letter-spacing:2px; } } /*============================================== SECTION 4 - CAUSES ==============================================*/ .ds-causes{ padding:50px 5%; background:var(--clr-white); } /*============================================== HEADING ==============================================*/ .ds-causes-heading{ max-width:760px; margin:0 auto 60px; text-align:center; } .ds-causes-tag{ display:inline-block; padding:10px 18px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); letter-spacing:3px; font-size:.82rem; font-weight:600; margin-bottom:28px; } .ds-causes-title{ font-size:clamp(2.7rem,4vw,4rem); line-height:1.15; font-weight:500; color:var(--clr-heading); margin-bottom:22px; } .ds-causes-title span{ color:var(--clr-primary-light); } .ds-causes-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); font-size:1.05rem; line-height:1.9; color:var(--clr-text); } /*============================================== GRID ==============================================*/ .ds-causes-grid{ max-width:1300px; margin:60px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } /*============================================== CARD ==============================================*/ .ds-cause-card{ background:var(--clr-white); border-radius:30px; padding:34px 28px; text-align:center; border:2px solid rgba(0,0,0,.05); position:relative; overflow:hidden; cursor:pointer; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .ds-cause-card:hover{ transform:translateY(-10px); border-color:rgba(214,170,210,.45); box-shadow:0 18px 45px rgba(223,184,216,.22); } /*============================================== TOP ACCENT ==============================================*/ .ds-cause-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:5px; background:linear-gradient( 90deg, #f7d7ec, #e8d5ff ); transform:scaleX(0); transform-origin:left; transition:.4s; } .ds-cause-card:hover::before{ transform:scaleX(1); } /*============================================== IMAGE ==============================================*/ .ds-cause-card img{ width:110px; height:110px; object-fit:contain; margin:0 auto 24px; display:block; transition:transform .35s ease; } .ds-cause-card:hover img{ transform:scale(1.08); } /*============================================== TEXT ==============================================*/ .ds-cause-card h3{ font-size:1.35rem; font-weight:500; color:var(--clr-heading); margin-bottom:16px; transition:.3s; font-family:var(--ff-paragraph); } .ds-cause-card:hover h3{ color:var(--clr-primary); } .ds-cause-card p{ font-family:var(--ff-paragraph); font-size:1rem; line-height:1.8; color:var(--clr-text); transition:.3s; } .ds-cause-card:hover p{ color:#555; } /*============================================== TABLET ==============================================*/ @media(max-width:1024px){ .ds-causes-grid{ grid-template-columns:repeat(2,1fr); gap:24px; } } /*============================================== MOBILE ==============================================*/ @media(max-width:768px){ .ds-causes{ padding:80px 20px; } .ds-causes-heading{ margin-bottom:45px; } .ds-causes-title{ font-size:2.2rem; } .ds-causes-description{ font-size:.98rem; } .ds-causes-grid{ grid-template-columns:1fr; } .ds-cause-card{ padding:30px 24px; } .ds-cause-card img{ width:95px; height:95px; } } /*============================================== SMALL MOBILE ==============================================*/ @media(max-width:480px){ .ds-causes-title{ font-size:2rem; } .ds-causes-tag{ font-size:.75rem; letter-spacing:2px; } } /*============================================== SECTION 5 - COMMON TRIGGERS ==============================================*/ .ds-triggers{ padding:50px 5%; background:var(--clr-white); } /*============================================== HEADING ==============================================*/ .ds-triggers-heading{ max-width:760px; margin:0 auto 60px; text-align:center; } .ds-triggers-tag{ display:inline-block; padding:10px 18px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); letter-spacing:3px; font-size:.82rem; font-weight:600; margin-bottom:28px; } .ds-triggers-title{ font-size:clamp(2.7rem,4vw,4rem); line-height:1.15; font-weight:500; color:var(--clr-heading); margin-bottom:22px; } .ds-triggers-title span{ color:var(--clr-primary-light); } .ds-triggers-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); font-size:1.05rem; line-height:1.9; color:var(--clr-text); } /*============================================== GRID ==============================================*/ .ds-triggers-grid{ max-width:1300px; margin:60px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:25px; } /*============================================== CARD ==============================================*/ .ds-trigger-card{ background:var(--clr-white); border-radius:30px; padding:30px 24px; text-align:center; border:2px solid rgba(0,0,0,.05); position:relative; overflow:hidden; cursor:pointer; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .ds-trigger-card:hover{ transform:translateY(-10px); border-color:rgba(214,170,210,.45); box-shadow:0 18px 45px rgba(223,184,216,.22); } /*============================================== TOP ACCENT ==============================================*/ .ds-trigger-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:5px; background:linear-gradient( 90deg, #f7d7ec, #e8d5ff ); transform:scaleX(0); transform-origin:left; transition:.4s; } .ds-trigger-card:hover::before{ transform:scaleX(1); } /*============================================== IMAGE ==============================================*/ .ds-trigger-card img{ width:95px; height:95px; object-fit:contain; margin:0 auto 22px; display:block; transition:transform .35s ease; } .ds-trigger-card:hover img{ transform:scale(1.08); } /*============================================== TEXT ==============================================*/ .ds-trigger-card h3{ font-size:1.25rem; font-weight:500; color:var(--clr-heading); margin-bottom:14px; transition:.3s; font-family:var(--ff-paragraph); } .ds-trigger-card:hover h3{ color:var(--clr-primary); } .ds-trigger-card p{ font-family:var(--ff-paragraph); font-size:.96rem; line-height:1.8; color:var(--clr-text); transition:.3s; } .ds-trigger-card:hover p{ color:#555; } /*============================================== TABLET ==============================================*/ @media(max-width:1024px){ .ds-triggers-grid{ grid-template-columns:repeat(2,1fr); gap:24px; } } /*============================================== MOBILE ==============================================*/ @media(max-width:768px){ .ds-triggers{ padding:80px 20px; } .ds-triggers-heading{ margin-bottom:45px; } .ds-triggers-title{ font-size:2.2rem; } .ds-triggers-description{ font-size:.98rem; } .ds-triggers-grid{ grid-template-columns:1fr; } .ds-trigger-card{ padding:30px 24px; } .ds-trigger-card img{ width:90px; height:90px; } } /*============================================== SMALL MOBILE ==============================================*/ @media(max-width:480px){ .ds-triggers-title{ font-size:2rem; } .ds-triggers-tag{ font-size:.75rem; letter-spacing:2px; } } /*============================================== SECTION 6 - COMMON AREAS ==============================================*/ .ds-areas{ padding:50px 5%; background:var(--clr-white); } /*============================================== HEADING ==============================================*/ .ds-areas-heading{ max-width:760px; margin:0 auto 70px; text-align:center; } .ds-areas-tag{ display:inline-block; padding:10px 18px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); letter-spacing:3px; font-size:.82rem; font-weight:600; margin-bottom:28px; } .ds-areas-title{ font-size:clamp(2.7rem,4vw,4rem); line-height:1.15; font-weight:500; color:var(--clr-heading); margin-bottom:22px; } .ds-areas-title span{ color:var(--clr-primary-light); } .ds-areas-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); font-size:1.05rem; line-height:1.9; color:var(--clr-text); } /*============================================== LAYOUT ==============================================*/ .ds-areas-container{ max-width:1300px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } /*============================================== BODY IMAGE ==============================================*/ .ds-areas-image{ background:linear-gradient( 145deg, #fff, #fdf6fb ); border-radius:34px; overflow:hidden; box-shadow:0 18px 45px rgba(0,0,0,.06); transition:.35s ease; display: flex; justify-content: center; } .ds-areas-image:hover{ transform:translateY(-6px); box-shadow:0 24px 55px rgba(0,0,0,.08); } .ds-areas-image img{ width:100%; max-width: 350px; display:block; transition:.45s ease; } .ds-areas-image:hover img{ transform:scale(1.03); } /*============================================== AREA CARDS ==============================================*/ .ds-areas-content{ display:flex; flex-direction:column; gap:22px; } .ds-area-card{ display:flex; align-items:center; gap:22px; padding:24px 26px; background:var(--clr-white); border-radius:28px; border:2px solid rgba(0,0,0,.05); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .ds-area-card:hover{ transform:translateY(-6px); border-color:rgba(214,170,210,.45); box-shadow:0 18px 45px rgba(223,184,216,.22); } /*============================================== ICON ==============================================*/ .ds-area-card img{ width:70px; height:70px; object-fit:contain; flex-shrink:0; transition:.35s ease; } .ds-area-card:hover img{ transform:scale(1.08); } /*============================================== TEXT ==============================================*/ .ds-area-card h3{ font-size:1.4rem; font-weight:500; color:var(--clr-heading); margin-bottom:10px; font-family:var(--ff-paragraph); transition:.3s; } .ds-area-card:hover h3{ color:var(--clr-primary); } .ds-area-card p{ font-family:var(--ff-paragraph); font-size:1rem; line-height:1.8; color:var(--clr-text); } /*============================================== TABLET ==============================================*/ @media(max-width:1024px){ .ds-areas-container{ grid-template-columns:1fr; gap:55px; } } /*============================================== MOBILE ==============================================*/ @media(max-width:768px){ .ds-areas{ padding:80px 20px; } .ds-areas-heading{ margin-bottom:45px; } .ds-areas-title{ font-size:2.2rem; } .ds-areas-description{ font-size:.98rem; } .ds-area-card{ padding:22px; } .ds-area-card img{ width:60px; height:60px; } } /*============================================== SMALL MOBILE ==============================================*/ @media(max-width:480px){ .ds-areas-title{ font-size:2rem; } .ds-areas-tag{ font-size:.75rem; letter-spacing:2px; } .ds-area-card{ flex-direction:column; text-align:center; } } /*============================================== SECTION 7 - COMPARISON ==============================================*/ .ds-comparison{ padding:50px 5%; background:var(--clr-white); } /*============================================== HEADING ==============================================*/ .ds-comparison-heading{ max-width:760px; margin:0 auto 60px; text-align:center; } .ds-comparison-tag{ display:inline-block; padding:10px 18px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); letter-spacing:3px; font-size:.82rem; font-weight:600; margin-bottom:28px; } .ds-comparison-title{ font-size:clamp(2.7rem,4vw,4rem); line-height:1.15; font-weight:500; color:var(--clr-heading); margin-bottom:22px; } .ds-comparison-title span{ color:var(--clr-primary-light); } .ds-comparison-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); font-size:1.05rem; line-height:1.9; color:var(--clr-text); } /*============================================== TABLE ==============================================*/ .ds-comparison-table-wrapper{ max-width:1000px; margin:60px auto 50px; overflow-x:auto; border-radius:30px; box-shadow:0 18px 45px rgba(0,0,0,.06); } .ds-comparison-table{ width:100%; border-collapse:collapse; background:var(--clr-white); } .ds-comparison-table thead{ background:var(--clr-primary-light); } .ds-comparison-table th{ padding:24px; color:var(--clr-white); font-size:1.3rem; font-weight:500; text-align:center; } .ds-comparison-table td{ padding:22px 24px; text-align:center; font-family:var(--ff-paragraph); font-size:1rem; line-height:1.7; color:var(--clr-text); border-bottom:1px solid rgba(0,0,0,.06); transition:.3s; } .ds-comparison-table tbody tr{ transition:.35s ease; } .ds-comparison-table tbody tr:hover{ background:#fff8fc; } .ds-comparison-table tbody tr:last-child td{ border-bottom:none; } /*============================================== FACT CARD ==============================================*/ .ds-fact-card{ max-width:900px; margin:auto; display:flex; align-items:center; gap:24px; padding:30px 34px; background:linear-gradient( 135deg, #fff8fc, #ffffff, #fff6fb ); border:1px solid #f4dde7; border-radius:28px; box-shadow:0 12px 35px rgba(236,177,201,.12); transition:.35s ease; } .ds-fact-card:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(236,177,201,.18); } .ds-fact-icon{ width:75px; height:75px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:2rem; background:var(--clr-hover-soft); border-radius:50%; } .ds-fact-content{ flex:1; } .ds-fact-content h3{ font-size:1.5rem; font-weight:500; color:var(--clr-heading); font-family: var(--ff-paragraph); margin-bottom:12px; } .ds-fact-content p{ font-family:var(--ff-paragraph); font-size:1.02rem; line-height:1.9; color:var(--clr-text); } .ds-fact-content strong{ color:var(--clr-primary); } /*============================================== TABLET ==============================================*/ @media(max-width:1024px){ .ds-comparison-table th{ font-size:1.15rem; } } /*============================================== MOBILE ==============================================*/ @media(max-width:768px){ .ds-comparison{ padding:80px 20px; } .ds-comparison-heading{ margin-bottom:45px; } .ds-comparison-title{ font-size:2.2rem; } .ds-comparison-description{ font-size:.98rem; } .ds-comparison-table th{ font-size:1rem; padding:18px; } .ds-comparison-table td{ padding:18px 16px; font-size:.92rem; } .ds-fact-card{ flex-direction:column; text-align:center; padding:28px; } } /*============================================== SMALL MOBILE ==============================================*/ @media(max-width:480px){ .ds-comparison-title{ font-size:2rem; } .ds-comparison-tag{ font-size:.75rem; letter-spacing:2px; } } /*============================================== SECTION 8 - INGREDIENTS ==============================================*/ .ds-ingredients{ padding:50px 5%; background:var(--clr-white); } .ds-ingredients-container{ max-width:1300px; margin:auto; display:grid; grid-template-columns:1fr 1.2fr; gap:70px; align-items:center; } /*============================================== LEFT ==============================================*/ .ds-ingredients-tag{ display:inline-block; padding:10px 18px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); letter-spacing:3px; font-size:.82rem; font-weight:600; margin-bottom:28px; } .ds-ingredients-title{ font-size:clamp(2.7rem,4vw,4rem); line-height:1.15; font-weight:500; color:var(--clr-heading); margin-bottom:25px; } .ds-ingredients-title span{ color:var(--clr-primary-light); } .ds-ingredients-description{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; font-size:1.05rem; max-width:470px; margin-bottom:40px; } /*============================================== INGREDIENT PILLS ==============================================*/ .ds-ingredient-list{ display:flex; flex-wrap:wrap; gap:15px; } .ds-ingredient-pill{ min-width:160px; padding:14px 24px; border-radius:999px; border:1px solid #eadfe8; background:#fff; cursor:pointer; transition:.35s; font-family:var(--ff-paragraph); font-size:1rem; color:var(--clr-heading); } .ds-ingredient-pill:hover{ transform:translateY(-3px); border-color:var(--clr-primary-light); } .ds-ingredient-pill.active{ background:var(--clr-primary-light); color:#fff; border:none; } /*============================================== RIGHT ==============================================*/ .ds-ingredients-right{ display:flex; flex-direction:column; gap:35px; } /*============================================== SHOWCASE ==============================================*/ .ds-ingredient-showcase{ background:linear-gradient( 145deg, #fff, #fdf6fb ); border-radius:35px; padding:30px; box-shadow:0 18px 45px rgba(0,0,0,.06); display:flex; justify-content:center; } .ds-ingredient-showcase img{ width:40%; display:block; border-radius:24px; transition:opacity .3s ease; } /*============================================== DETAIL CARDS ==============================================*/ .ds-ingredient-details{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .ds-detail-card{ background:#fff; padding:28px; border-radius:26px; box-shadow:0 15px 35px rgba(0,0,0,.05); transition:.35s; } .ds-detail-card:hover{ transform:translateY(-6px); } .ds-detail-card h4{ font-size:1.25rem; margin-bottom:15px; color:var(--clr-heading); } .ds-detail-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; transition:opacity .3s ease; } /*============================================== FADE TARGETS ==============================================*/ #dsIngredientImage, #dsIngredientBenefits, #dsIngredientSuitable, #dsIngredientWorks{ transition: opacity .35s ease, transform .35s ease; } /*============================================== TABLET ==============================================*/ @media(max-width:1024px){ .ds-ingredients-container{ grid-template-columns:1fr; gap:55px; } .ds-ingredients-description{ max-width:100%; } .ds-ingredient-details{ grid-template-columns:repeat(3,1fr); } } /*============================================== MOBILE ==============================================*/ @media(max-width:768px){ .ds-ingredients{ padding:80px 20px; } .ds-ingredients-title{ font-size:2.3rem; } .ds-ingredients-description{ font-size:.98rem; } .ds-ingredient-list{ justify-content:center; } .ds-ingredient-pill{ min-width:auto; font-size:.9rem; padding:12px 20px; } .ds-ingredient-details{ grid-template-columns:1fr; } } /*============================================== SMALL MOBILE ==============================================*/ @media(max-width:480px){ .ds-ingredients-title{ font-size:2rem; } .ds-ingredients-tag{ font-size:.75rem; letter-spacing:2px; } } /*============================================== SECTION 9 - PREVENTION ==============================================*/ .ds-prevention{ padding:50px 5%; background:var(--clr-white); } /*============================================== HEADING ==============================================*/ .ds-prevention-heading{ max-width:760px; margin:0 auto 60px; text-align:center; } .ds-prevention-tag{ display:inline-block; padding:10px 18px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); letter-spacing:3px; font-size:.82rem; font-weight:600; margin-bottom:28px; } .ds-prevention-title{ font-size:clamp(2.7rem,4vw,4rem); line-height:1.15; font-weight:500; color:var(--clr-heading); margin-bottom:22px; } .ds-prevention-title span{ color:var(--clr-primary-light); } .ds-prevention-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); font-size:1.05rem; line-height:1.9; color:var(--clr-text); } /*============================================== PREVENTION GRID ==============================================*/ .ds-prevention-grid{ max-width:1200px; margin:60px auto 0; display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } /*============================================== PREVENTION CARD ==============================================*/ .ds-prevention-card{ display:flex; align-items:flex-start; gap:22px; padding:28px; background:#fff; border-radius:30px; border:2px solid rgba(0,0,0,.05); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; cursor:pointer; } .ds-prevention-card:hover{ transform:translateY(-8px); border-color:rgba(214,170,210,.45); box-shadow:0 18px 45px rgba(223,184,216,.22); } /*============================================== ICON ==============================================*/ .ds-prevention-icon img{ width:122px; height:122px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--clr-primary-light); } .ds-prevention-icon img{ width:122px; height:100px; object-fit:contain; transition:.35s ease; } .ds-prevention-card:hover .ds-prevention-icon img{ transform:scale(1.1); } /*============================================== CONTENT ==============================================*/ .ds-prevention-content h3{ font-size:1.35rem; font-weight:500; color:var(--clr-heading); font-family:var(--ff-paragraph); margin-bottom:12px; transition:.3s; } .ds-prevention-card:hover h3{ color:var(--clr-primary); } .ds-prevention-content p{ font-family:var(--ff-paragraph); font-size:1rem; line-height:1.8; color:var(--clr-text); } /*============================================== TABLET ==============================================*/ @media(max-width:1024px){ .ds-prevention-grid{ grid-template-columns:1fr; } } /*============================================== MOBILE ==============================================*/ @media(max-width:768px){ .ds-prevention{ padding:80px 20px; } .ds-prevention-heading{ margin-bottom:45px; } .ds-prevention-title{ font-size:2.2rem; } .ds-prevention-description{ font-size:.98rem; } .ds-prevention-card{ padding:24px; gap:18px; } .ds-prevention-icon{ width:100px; height:100px; } .ds-prevention-icon img{ width:99px; height:99px; } } /*============================================== SMALL MOBILE ==============================================*/ @media(max-width:480px){ .ds-prevention-title{ font-size:2rem; } .ds-prevention-tag{ font-size:.75rem; letter-spacing:2px; } .ds-prevention-card{ flex-direction:column; text-align:center; align-items:center; } } /*============================================== SECTION 10 - MYTHS VS FACTS ==============================================*/ .ds-myths{ padding:50px 5%; background:var(--clr-white); } /*============================================== HEADING ==============================================*/ .ds-myths-heading{ max-width:760px; margin:0 auto 60px; text-align:center; } .ds-myths-tag{ display:inline-block; padding:10px 18px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); letter-spacing:3px; font-size:.82rem; font-weight:600; margin-bottom:28px; } .ds-myths-title{ font-size:clamp(2.7rem,4vw,4rem); line-height:1.15; font-weight:500; color:var(--clr-heading); margin-bottom:22px; } .ds-myths-title span{ color:var(--clr-primary-light); } .ds-myths-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); font-size:1.05rem; line-height:1.9; color:var(--clr-text); } /*============================================== GRID ==============================================*/ .ds-myths-grid{ max-width:1200px; margin:60px auto 0; display:grid; grid-template-columns:repeat(2,1fr); gap:28px; } /*============================================== CARD ==============================================*/ .ds-myth-card{ background:#fff; border-radius:30px; overflow:hidden; border:2px solid rgba(0,0,0,.05); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .ds-myth-card:hover{ transform:translateY(-8px); border-color:rgba(214,170,210,.45); box-shadow:0 18px 45px rgba(223,184,216,.22); } /*============================================== MYTH ==============================================*/ .ds-myth{ padding:28px; background:#fff5f7; border-bottom:1px solid rgba(0,0,0,.06); } .ds-label{ display:inline-block; padding:8px 16px; border-radius:999px; font-family:var(--ff-paragraph); font-size:.82rem; font-weight:600; margin-bottom:18px; } .ds-label.myth{ background:#ffe6ea; color:#c64262; } .ds-label.fact{ background:#eaf8ef; color:#27894d; } .ds-myth p{ font-family:var(--ff-paragraph); font-size:1rem; line-height:1.8; color:var(--clr-text); } /*============================================== FACT ==============================================*/ .ds-fact{ padding:28px; background:#ffffff; } .ds-fact p{ font-family:var(--ff-paragraph); font-size:1rem; line-height:1.8; color:var(--clr-text); } /*============================================== TABLET ==============================================*/ @media(max-width:1024px){ .ds-myths-grid{ grid-template-columns:1fr; } } /*============================================== MOBILE ==============================================*/ @media(max-width:768px){ .ds-myths{ padding:80px 20px; } .ds-myths-heading{ margin-bottom:45px; } .ds-myths-title{ font-size:2.2rem; } .ds-myths-description{ font-size:.98rem; } .ds-myth, .ds-fact{ padding:24px; } } /*============================================== SMALL MOBILE ==============================================*/ @media(max-width:480px){ .ds-myths-title{ font-size:2rem; } .ds-myths-tag{ font-size:.75rem; letter-spacing:2px; } } /*============================================== SECTION 11 - MIMII TIP ==============================================*/ .ds-mimii-tip{ padding:50px 5%; background:var(--clr-white); } .ds-tip-container{ /* max-width:1300px; margin:auto; display:grid; grid-template-columns:480px 1fr; gap:70px; align-items:center; */ max-width:1250px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:80px; padding:40px 50px; border-radius:32px; overflow:hidden; /* background:linear-gradient( 115deg, #fff8fc, #ffffff, #fff5fa ); */ border:1px solid #f3dce7; box-shadow: 0 18px 45px rgba(236,177,201,.12); transition:.35s ease; } .ds-tip-container:hover{ transform:translateY(-6px); box-shadow: 0 25px 55px rgba(236,177,201,.18); } /*============================================== LEFT IMAGE ==============================================*/ .ds-tip-image{ border-radius:36px; overflow:hidden; background:linear-gradient( 145deg, #fff, #fdf6fb ); box-shadow:0 18px 45px rgba(0,0,0,.06); transition:.35s ease; } .ds-tip-image:hover{ transform:translateY(-8px); box-shadow:0 24px 55px rgba(0,0,0,.08); } .mk-note-signature { font-family: var(--ff-paragraph); font-size: 0.95rem; font-weight: 600; color: rgb(191, 114, 150); } .ds-tip-image img{ width:100%; display:block; transition:.45s ease; } .ds-tip-image:hover img{ transform:scale(1.03); } /*============================================== RIGHT CONTENT ==============================================*/ .ds-tip-tag{ display:inline-block; margin-bottom:18px; color:rgb(207, 103, 157); font-family:var(--ff-heading); font-size:1.5rem; font-weight:500; } .ds-tip-title{ font-size:clamp(2.1rem,1vw,4rem); line-height:1.15; font-weight:500; color:var(--clr-heading); margin-bottom:26px; } .ds-tip-title span{ color:var(--clr-primary-light); } .ds-tip-text{ font-family:var(--ff-paragraph); font-size:1.05rem; line-height:1.9; color:var(--clr-text); margin-bottom:22px; } .ds-tip-text:last-child{ margin-bottom:0; } /* .ds-tip-text strong{ color:var(--clr-primary); font-weight:600; } */ /*============================================== TABLET ==============================================*/ @media(max-width:1024px){ .ds-tip-container{ flex-direction: column; gap:55px; } .ds-tip-content{ text-align:center; } } /*============================================== MOBILE ==============================================*/ @media(max-width:768px){ .ds-mimii-tip{ padding:80px 20px; } .ds-tip-title{ font-size:2.2rem; } .ds-tip-text{ font-size:.98rem; } .ds-tip-image{ border-radius:28px; } } /*============================================== SMALL MOBILE ==============================================*/ @media(max-width:480px){ .ds-tip-title{ font-size:2rem; } .ds-tip-tag{ font-size:.75rem; letter-spacing:2px; } }