/*============================================== DARK CIRCLES HERO ==============================================*/ .dc-landing{ min-height:100vh; padding-top:140px; padding-inline:4%; padding-bottom:50px; display:flex; align-items:center; justify-content:center; background:linear-gradient( 180deg, #fffdfc 0%, #fff8fb 100% ); } .dc-canvas{ width:100%; max-width:1400px; display:flex; align-items:center; justify-content:space-between; gap:60px; } /*============================================== LEFT ==============================================*/ .dc-copy{ flex:1; max-width:650px; } .dc-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; } .dc-headline{ font-size:clamp(3.3rem,4.8vw,4.4rem); line-height:1.08; font-weight:500; color:var(--clr-heading); margin-bottom:35px; margin-top: 20px; } .dc-headline span{ color:var(--clr-primary-light); } .dc-lead{ max-width:540px; font-family:var(--ff-paragraph); font-size:1.08rem; line-height:1.9; color:var(--clr-text); margin-bottom:35px; } /*============================================== DID YOU KNOW CARD ==============================================*/ .dc-highlight{ display:flex; align-items:flex-start; gap:18px; padding:24px; margin-bottom:40px; background:linear-gradient( 135deg, #fff8fc, #ffffff ); border:1px solid #f3dce8; border-radius:24px; box-shadow:0 15px 35px rgba(0,0,0,.05); } .dc-highlight i{ font-size:1.6rem; color:#f2c94c; margin-top:4px; } .dc-highlight p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; } .dc-highlight strong{ color:var(--clr-primary); } /*============================================== RIGHT ==============================================*/ .dc-image{ position:relative; display:flex; justify-content:center; align-items:center; bottom: 30px; } .dc-image img{ width:540px; position:relative; z-index:2; display:block; animation:float 4s ease-in-out infinite; } .dc-glow{ width:520px; height:520px; position:absolute; border-radius:60%; background:radial-gradient( circle, rgba(255,214,224,.75), transparent 70% ); filter:blur(35px); animation:pulse 6s infinite; } /*============================================== TABLET ==============================================*/ @media(max-width:1024px){ .dc-landing{ min-height:auto; padding-top:110px; padding-inline:40px; } .dc-canvas{ gap:40px; } .dc-copy{ max-width:460px; } .dc-headline{ font-size:3.2rem; } .dc-image img{ width:430px; } .dc-glow{ width:420px; height:420px; } } /*============================================== MOBILE ==============================================*/ @media(max-width:768px){ .dc-landing{ min-height:auto; padding-top:90px; padding-inline:20px; } .dc-canvas{ flex-direction:column; text-align:center; gap:35px; } .dc-copy{ max-width:100%; } .dc-headline{ font-size:2.4rem; } .dc-lead{ max-width:100%; margin-inline:auto; font-size:.98rem; } .dc-image{ order:-1; } .dc-image img{ width:350px; } .dc-glow{ width:330px; height:330px; } .dc-highlight{ text-align:left; } } /*============================================== SMALL MOBILE ==============================================*/ @media(max-width:480px){ .dc-headline{ font-size:2rem; } .dc-lead{ font-size:.94rem; } .dc-image img{ width:260px; } .dc-eyebrow{ font-size:.75rem; } } /*============================================== SECTION 1 - INTRODUCTION ==============================================*/ .dc-intro{ padding:50px 5%; background:var(--clr-white); } /*============================================== HEADING ==============================================*/ .dc-intro-heading{ max-width:760px; margin:0 auto 70px; text-align:center; } .dc-intro-tag{ display:inline-block; padding:10px 18px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.82rem; font-weight:600; letter-spacing:3px; text-transform:uppercase; margin-bottom:24px; } .dc-intro-title{ font-size:clamp(2.7rem,4vw,4rem); line-height:1.15; font-weight:500; color:var(--clr-heading); margin-bottom:22px; } .dc-intro-title span{ color:var(--clr-primary-light); } .dc-intro-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); font-size:1.05rem; line-height:1.9; color:var(--clr-text); } /*============================================== LAYOUT ==============================================*/ .dc-intro-container{ max-width:1300px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } /*============================================== IMAGE ==============================================*/ .dc-intro-image{ display:flex; justify-content:center; align-items:center; } .dc-intro-image img{ width:100%; max-width:620px; display:block; transition:.45s ease; } .dc-intro-image:hover img{ transform:scale(1.03); } /*============================================== CONTENT ==============================================*/ .dc-main-text{ font-family:var(--ff-paragraph); font-size:1.05rem; line-height:1.9; color:var(--clr-text); margin-bottom:35px; } /*============================================== INFO GRID ==============================================*/ .dc-info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-bottom:30px; } /*============================================== INFO BOX ==============================================*/ .dc-info-box{ padding:28px; border-radius:24px; background:#fff; border:1px solid rgba(0,0,0,.06); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .dc-info-box:hover{ transform:translateY(-6px); border-color:rgba(214,170,210,.4); box-shadow:0 18px 40px rgba(223,184,216,.18); } .dc-info-box i{ font-size:1.5rem; color:var(--clr-primary); margin-bottom:18px; } .dc-info-box h3{ font-size:1.3rem; font-weight:500; color:var(--clr-heading); font-family: var(--ff-paragraph); margin-bottom:12px; } .dc-info-box p{ font-family:var(--ff-paragraph); line-height:1.8; color:var(--clr-text); } /*============================================== MIMII TIP ==============================================*/ .dc-tip{ display:flex; align-items:flex-start; gap:18px; padding:28px; border-radius:26px; background:linear-gradient( 135deg, #fff8fc, #ffffff ); border:1px solid #f2dce8; } .dc-tip i{ font-size:1.6rem; color:#e0b53f; margin-top:2px; } .dc-tip h4{ font-size:1.1rem; color:var(--clr-heading); margin-bottom:10px; font-weight:500; } .dc-tip p{ font-family:var(--ff-paragraph); line-height:1.8; color:var(--clr-text); } /*============================================== TABLET ==============================================*/ @media(max-width:1024px){ .dc-intro-container{ grid-template-columns:1fr; gap:50px; } } /*============================================== MOBILE ==============================================*/ @media(max-width:768px){ .dc-intro{ padding:80px 20px; } .dc-intro-heading{ margin-bottom:45px; } .dc-intro-title{ font-size:2.2rem; } .dc-info-grid{ grid-template-columns:1fr; } .dc-tip{ padding:24px; } } /*============================================== SMALL MOBILE ==============================================*/ @media(max-width:480px){ .dc-intro-title{ font-size:2rem; } .dc-intro-tag{ font-size:.75rem; letter-spacing:2px; } .dc-tip{ flex-direction:column; } } /*================================================== SECTION 2 — UNDER THE SKIN ==================================================*/ .dc-anatomy{ padding:110px 5%; background:var(--clr-white); overflow:hidden; } /*================================================== HEADING ==================================================*/ .dc-anatomy-header{ max-width:760px; margin:0 auto 80px; text-align:center; } .dc-anatomy-tag{ display:inline-flex; align-items:center; justify-content:center; padding:10px 22px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.85rem; font-weight:600; letter-spacing:2px; margin-bottom:24px; } .dc-anatomy-title{ font-family:var(--ff-heading); font-size:clamp(2.8rem,4vw,4.3rem); font-weight:500; line-height:1.15; color:var(--clr-heading); margin-bottom:20px; } .dc-anatomy-title span{ color:var(--clr-primary-light); } .dc-anatomy-subtitle{ max-width:640px; margin:auto; font-family:var(--ff-paragraph); font-size:1.05rem; line-height:1.9; color:var(--clr-text); } /*================================================== LAYOUT ==================================================*/ .dc-anatomy-layout{ max-width:1300px; margin:auto; display:grid; grid-template-columns:520px 1fr; gap:80px; align-items:center; } /*================================================== LEFT SIDE ==================================================*/ .dc-anatomy-left{ display:flex; justify-content:center; align-items:center; } /*================================================== IMAGE CARD ==================================================*/ .dc-eye-card{ width:100%; max-width:500px; background:#fff; border-radius:36px; padding:35px; border:1px solid rgba(0,0,0,.05); box-shadow: 0 18px 45px rgba(0,0,0,.07), 0 6px 18px rgba(0,0,0,.03); } .dc-eye-card img{ width:100%; display:block; transition: opacity .35s ease, transform .35s ease; } /*================================================== RIGHT SIDE ==================================================*/ .dc-anatomy-right{ display:flex; flex-direction:column; gap:28px; } /*================================================== MENU ==================================================*/ .dc-layer-menu{ display:flex; flex-direction:column; gap:18px; } /*================================================== LAYER CARD ==================================================*/ .dc-layer{ width:100%; display:flex; align-items:center; gap:22px; padding:22px 26px; border:none; border-radius:24px; background:#fff; border:1px solid rgba(0,0,0,.06); cursor:pointer; transition:.35s ease; text-align:left; } /*================================================== NUMBER ==================================================*/ .layer-id{ width:52px; height:52px; flex-shrink:0; display:flex; justify-content:center; align-items:center; border-radius:50%; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-weight:700; transition:.35s; } /*================================================== TEXT ==================================================*/ .layer-content{ flex:1; } .layer-content h3{ font-family:var(--ff-paragraph); font-size:1.45rem; font-weight:500; color:var(--clr-heading); margin-bottom:6px; } .layer-content p{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size:.95rem; line-height:1.7; } /*================================================== ARROW ==================================================*/ .dc-layer i{ font-size:1rem; color:var(--clr-primary-light); transition:.35s ease; } /*================================================== HOVER ==================================================*/ .dc-layer:hover{ transform:translateY(-4px); border-color:rgba(220,180,215,.45); box-shadow: 0 18px 40px rgba(221,184,216,.18); } .dc-layer:hover .layer-id{ background:var(--clr-primary-light); color:#fff; } .dc-layer:hover i{ transform:translateX(6px); } /*================================================== ACTIVE ==================================================*/ .dc-layer.active{ background:#fff; border-color:rgba(220,180,215,.55); box-shadow: 0 20px 45px rgba(221,184,216,.22); } .dc-layer.active .layer-id{ background:var(--clr-primary-light); color:#fff; } .dc-layer.active i{ transform:translateX(8px); } /*================================================== INFORMATION CARD ==================================================*/ .dc-layer-info{ background:linear-gradient( 180deg, #fff, #fcf8fb ); border:1px solid rgba(0,0,0,.05); border-radius:30px; padding:40px; box-shadow: 0 18px 45px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.03); transition:.35s ease; } .info-tag{ display:inline-flex; align-items:center; justify-content:center; padding:8px 18px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.8rem; font-weight:700; letter-spacing:2px; margin-bottom:20px; } .dc-layer-info h3{ font-family:var(--ff-paragraph); font-size:2rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .dc-layer-info p{ font-family:var(--ff-paragraph); font-size:1rem; line-height:1.9; color:var(--clr-text); } /*================================================== IMAGE ANIMATION ==================================================*/ .dc-eye-card img{ animation:fadeImage .45s ease; } @keyframes fadeImage{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:scale(1); } } /*================================================== INFO ANIMATION ==================================================*/ .dc-layer-info{ animation:fadeInfo .45s ease; } @keyframes fadeInfo{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } } /*================================================== SMALL INTERACTIONS ==================================================*/ .dc-eye-card{ transition:.4s ease; } .dc-eye-card:hover{ transform:translateY(-6px); box-shadow: 0 25px 60px rgba(221,184,216,.18); } .dc-layer-info:hover{ transform:translateY(-4px); } /*================================================== TABLET ==================================================*/ @media(max-width:1024px){ .dc-anatomy{ padding:90px 40px; } .dc-anatomy-layout{ grid-template-columns:1fr; gap:60px; } .dc-anatomy-left{ order:1; } .dc-anatomy-right{ order:2; } .dc-eye-card{ max-width:520px; margin:auto; } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .dc-anatomy{ padding:80px 20px; } .dc-anatomy-header{ margin-bottom:60px; } .dc-anatomy-title{ font-size:2.2rem; } .dc-anatomy-subtitle{ font-size:1rem; } .dc-layer{ padding:18px; gap:16px; } .layer-id{ width:46px; height:46px; font-size:.9rem; } .layer-content h3{ font-size:1.2rem; } .layer-content p{ font-size:.9rem; } .dc-layer-info{ padding:28px; } .dc-layer-info h3{ font-size:1.6rem; } } /*================================================== SMALL MOBILE ==================================================*/ @media(max-width:480px){ .dc-layer{ flex-wrap:wrap; align-items:flex-start; } .dc-layer i{ margin-left:auto; margin-top:15px; } } /*================================================== SECTION 3 - TYPES ==================================================*/ .dc-types{ padding:120px 5%; background:var(--clr-white); } /*================================================== HEADING ==================================================*/ .dc-types-heading{ max-width:760px; margin:0 auto 70px; text-align:center; } .dc-types-tag{ display:inline-block; padding:10px 20px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.82rem; font-weight:600; letter-spacing:2px; margin-bottom:24px; } .dc-types-title{ font-family:var(--ff-heading); font-size:clamp(2.8rem,4vw,4rem); font-weight:500; line-height:1.15; color:var(--clr-heading); margin-bottom:18px; } .dc-types-title span{ color:var(--clr-primary-light); } .dc-types-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*================================================== GRID ==================================================*/ .dc-types-grid{ max-width:1300px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:35px; } /*================================================== CARD ==================================================*/ .dc-type-card{ background:#fff; border-radius:30px; overflow:hidden; border:1px solid rgba(0,0,0,.06); transition:.35s ease; box-shadow:0 18px 40px rgba(0,0,0,.05); } .dc-type-card:hover{ transform:translateY(-8px); box-shadow:0 28px 60px rgba(221,184,216,.18); } /*================================================== IMAGE ==================================================*/ .dc-type-image{ overflow:hidden; display: flex; justify-content: center; } .dc-type-image img{ width:100%; max-width: 400px; display:block; transition:.45s ease; } .dc-type-card:hover img{ transform:scale(1.05); } /*================================================== CONTENT ==================================================*/ .dc-type-content{ padding:30px; } .dc-type-label{ display:inline-block; padding:7px 15px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.78rem; font-weight:700; letter-spacing:1.5px; margin-bottom:18px; } .dc-type-content h3{ font-family:var(--ff-paragraph); font-size:2rem; font-weight:500; color:var(--clr-heading); margin-bottom:15px; } .dc-type-content p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; margin-bottom:25px; } /*================================================== CAUSE PILLS ==================================================*/ .dc-causes{ display:flex; flex-wrap:wrap; gap:12px; } .dc-causes span{ padding:10px 18px; border-radius:999px; background:#faf5f8; color:var(--clr-heading); font-family:var(--ff-paragraph); font-size:.88rem; transition:.3s ease; } .dc-causes span:hover{ background:var(--clr-primary-light); color:#fff; } /*================================================== TABLET ==================================================*/ @media(max-width:992px){ .dc-types-grid{ grid-template-columns:1fr; } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .dc-types{ padding:80px 20px; } .dc-types-title{ font-size:2.2rem; } .dc-type-content{ padding:24px; } .dc-type-content h3{ font-size:1.6rem; } } /*================================================== SECTION 4 - CAUSES ==================================================*/ .dc-causes-section{ padding:120px 5%; /* background:var(--clr-hover-soft); */ } /*================================================== HEADING ==================================================*/ .dc-causes-heading{ max-width:760px; margin:0 auto 70px; text-align:center; } .dc-causes-tag{ display:inline-block; padding:10px 20px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.82rem; font-weight:600; letter-spacing:2px; margin-bottom:24px; } .dc-causes-title{ font-family:var(--ff-heading); font-size:clamp(2.8rem,4vw,4rem); font-weight:500; line-height:1.15; color:var(--clr-heading); margin-bottom:18px; } .dc-causes-title span{ color:var(--clr-primary-light); } .dc-causes-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*================================================== GRID ==================================================*/ .dc-causes-grid{ max-width:1300px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; } /*================================================== CARD ==================================================*/ .dc-cause-card{ background:var(--clr-white); padding:35px 30px; border-radius:28px; border:1px solid rgba(0,0,0,.06); transition:.35s ease; box-shadow:0 15px 35px rgba(0,0,0,.05); } .dc-cause-card:hover{ transform:translateY(-8px); box-shadow:0 25px 55px rgba(223,184,216,.18); } /*================================================== ICON ==================================================*/ .dc-cause-icon img{ width:130px; height:100px; display:flex; justify-content:center; align-items:center; border-radius:22px; background:#fcf4f9; color:var(--clr-primary); font-size:1.5rem; margin-bottom:25px; transition:.35s ease; } .dc-cause-card:hover .dc-cause-icon img{ background:var(--clr-primary-light); color:var(--clr-white); transform:rotate(-8deg); } /*================================================== TEXT ==================================================*/ .dc-cause-card h3{ font-family:var(--ff-paragraph); font-size:1.6rem; font-weight:500; color:var(--clr-heading); margin-bottom:15px; } .dc-cause-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; } /*================================================== TABLET ==================================================*/ @media(max-width:1100px){ .dc-causes-grid{ grid-template-columns:repeat(2,1fr); } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .dc-causes-section{ padding:80px 20px; } .dc-causes-title{ font-size:2.2rem; } .dc-causes-grid{ grid-template-columns:1fr; } .dc-cause-card{ padding:28px; } } /*================================================== SECTION 5 - TRIGGERS ==================================================*/ .dc-triggers{ padding:120px 5%; background:var(--clr-white); } /*================================================== HEADING ==================================================*/ .dc-triggers-heading{ max-width:760px; margin:0 auto 70px; text-align:center; } .dc-triggers-tag{ display:inline-block; padding:10px 20px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.82rem; font-weight:600; letter-spacing:2px; margin-bottom:24px; } .dc-triggers-title{ font-family:var(--ff-heading); font-size:clamp(2.8rem,4vw,4rem); font-weight:500; color:var(--clr-heading); line-height:1.15; margin-bottom:18px; } .dc-triggers-title span{ color:var(--clr-primary-light); } .dc-triggers-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*================================================== LAYOUT ==================================================*/ .dc-triggers-container{ max-width:1300px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } /*================================================== IMAGE ==================================================*/ .dc-triggers-image{ overflow:hidden; border-radius:32px; box-shadow:0 20px 50px rgba(0,0,0,.06); display: flex; justify-content: center; } .dc-triggers-image img{ width:100%; max-width: 350px; display:block; transition:.5s ease; } .dc-triggers-image:hover img{ transform:scale(1.04); } /*================================================== CONTENT ==================================================*/ .dc-triggers-content{ display:flex; flex-direction:column; gap:22px; } /*================================================== ITEM ==================================================*/ .dc-trigger-item{ display:flex; align-items:flex-start; gap:18px; padding:20px 24px; border-radius:24px; background:#fff; border:1px solid rgba(0,0,0,.06); transition:.35s ease; box-shadow:0 12px 30px rgba(0,0,0,.04); } .dc-trigger-item:hover{ transform:translateX(8px); box-shadow:0 18px 40px rgba(223,184,216,.18); } /*================================================== ICON ==================================================*/ .dc-trigger-item i{ width:44px; height:44px; flex-shrink:0; display:flex; justify-content:center; align-items:center; border-radius:50%; background:var(--clr-hover-soft); color:var(--clr-primary); font-size:.9rem; transition:.35s ease; } .dc-trigger-item:hover i{ background:var(--clr-primary-light); color:var(--clr-white); } /*================================================== TEXT ==================================================*/ .dc-trigger-item h3{ font-family:var(--ff-paragraph); font-size:1.35rem; font-weight:500; color:var(--clr-heading); margin-bottom:8px; } .dc-trigger-item p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; } /*================================================== TABLET ==================================================*/ @media(max-width:992px){ .dc-triggers-container{ grid-template-columns:1fr; gap:50px; } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .dc-triggers{ padding:80px 20px; } .dc-triggers-title{ font-size:2.2rem; } .dc-trigger-item{ padding:18px; } .dc-trigger-item h3{ font-size:1.2rem; } } /*================================================== SECTION 6 - COMMON SIGNS ==================================================*/ .dc-signs{ padding:120px 5%; /* background:var(--clr-hover-soft); */ } /*================================================== HEADING ==================================================*/ .dc-signs-heading{ max-width:760px; margin:0 auto 70px; text-align:center; } .dc-signs-tag{ display:inline-block; padding:10px 20px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.82rem; font-weight:600; letter-spacing:2px; margin-bottom:24px; } .dc-signs-title{ font-family:var(--ff-heading); font-size:clamp(2.8rem,4vw,4rem); font-weight:500; color:var(--clr-heading); line-height:1.15; margin-bottom:18px; } .dc-signs-title span{ color:var(--clr-primary-light); } .dc-signs-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*================================================== LAYOUT ==================================================*/ .dc-signs-container{ max-width:1300px; margin:0 auto; display:grid; grid-template-columns:1fr 420px 1fr; gap:50px; align-items:center; } /*================================================== IMAGE ==================================================*/ .dc-signs-image{ overflow:hidden; border-radius:32px; background:var(--clr-white); padding:20px; box-shadow:0 18px 45px rgba(0,0,0,.06); } .dc-signs-image img{ width:100%; display:block; transition:.45s ease; } .dc-signs-image:hover img{ transform:scale(1.04); } /*================================================== COLUMN ==================================================*/ .dc-signs-column{ display:flex; flex-direction:column; gap:22px; } /*================================================== ITEM ==================================================*/ .dc-sign-item{ display:flex; align-items:center; gap:18px; padding:20px 24px; background:var(--clr-white); border-radius:22px; border:1px solid rgba(0,0,0,.06); transition:.35s ease; box-shadow:0 12px 30px rgba(0,0,0,.04); } .dc-sign-item:hover{ transform:translateY(-5px); box-shadow:0 20px 45px rgba(223,184,216,.18); } /*================================================== ICON ==================================================*/ .dc-sign-item i{ font-size:1.2rem; color:var(--clr-primary); transition:.35s ease; } .dc-sign-item:hover i{ transform:scale(1.15); color:var(--clr-primary-light); } /*================================================== TEXT ==================================================*/ .dc-sign-item span{ font-family:var(--ff-paragraph); font-size:1rem; font-weight:600; color:var(--clr-heading); } /*================================================== TABLET ==================================================*/ @media(max-width:1024px){ .dc-signs-container{ grid-template-columns:1fr; gap:45px; } .dc-signs-image{ max-width:420px; margin:auto; } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .dc-signs{ padding:80px 20px; } .dc-signs-title{ font-size:2.2rem; } .dc-sign-item{ padding:18px; } } /*================================================== SECTION 7 - INGREDIENTS ==================================================*/ .dc-ingredients{ padding:120px 5%; background:var(--clr-white); } /*================================================== HEADING ==================================================*/ .dc-ingredients-heading{ max-width:760px; margin:0 auto 70px; text-align:center; } .dc-ingredients-tag{ display:inline-block; padding:10px 20px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.82rem; font-weight:600; letter-spacing:2px; margin-bottom:24px; } .dc-ingredients-title{ font-family:var(--ff-heading); font-size:clamp(2.8rem,4vw,4rem); font-weight:500; color:var(--clr-heading); line-height:1.15; margin-bottom:18px; } .dc-ingredients-title span{ color:var(--clr-primary-light); } .dc-ingredients-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*================================================== GRID ==================================================*/ .dc-ingredients-grid{ max-width:1300px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:30px; } /*================================================== CARD ==================================================*/ .dc-ingredient-card{ display:flex; align-items:flex-start; gap:24px; background:var(--clr-white); padding:30px; border-radius:28px; border:1px solid rgba(0,0,0,.06); box-shadow:0 15px 35px rgba(0,0,0,.05); transition:.35s ease; } .dc-ingredient-card:hover{ transform:translateY(-8px); box-shadow:0 25px 55px rgba(223,184,216,.18); } /*================================================== ICON ==================================================*/ .dc-ingredient-icon{ width:70px; height:70px; flex-shrink:0; display:flex; justify-content:center; align-items:center; border-radius:22px; background:#fcf5f9; color:var(--clr-primary); font-size:1.6rem; transition:.35s ease; } .dc-ingredient-card:hover .dc-ingredient-icon{ background:var(--clr-primary-light); color:var(--clr-white); transform:rotate(-8deg); } /*================================================== CONTENT ==================================================*/ .dc-ingredient-content{ flex:1; } .dc-ingredient-content h3{ font-family:var(--ff-paragraph); font-size:1.6rem; font-weight:500; color:var(--clr-heading); margin-bottom:12px; } .dc-ingredient-content p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; margin-bottom:18px; } /*================================================== BADGE ==================================================*/ .dc-ingredient-content span{ display:inline-block; padding:8px 16px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.85rem; font-weight:600; } /*================================================== TABLET ==================================================*/ @media(max-width:992px){ .dc-ingredients-grid{ grid-template-columns:1fr; } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .dc-ingredients{ padding:80px 20px; } .dc-ingredients-title{ font-size:2.2rem; } .dc-ingredient-card{ flex-direction:column; align-items:flex-start; padding:24px; } .dc-ingredient-icon{ width:60px; height:60px; font-size:1.3rem; } .dc-ingredient-content h3{ font-size:1.4rem; } } /*================================================== SECTION 8 - EXPECTATIONS ==================================================*/ .dc-expectations{ padding:120px 5%; } /*================================================== HEADING ==================================================*/ .dc-expectations-heading{ max-width:760px; margin:0 auto 70px; text-align:center; } .dc-expectations-tag{ display:inline-block; padding:10px 20px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.82rem; font-weight:600; letter-spacing:2px; margin-bottom:24px; } .dc-expectations-title{ font-family:var(--ff-heading); font-size:clamp(2.8rem,4vw,4rem); font-weight:500; line-height:1.15; color:var(--clr-heading); margin-bottom:18px; } .dc-expectations-title span{ color:var(--clr-primary-light); } .dc-expectations-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*================================================== GRID ==================================================*/ .dc-expectations-grid{ max-width:1300px; margin:0 auto 60px; display:grid; grid-template-columns:repeat(2,1fr); gap:30px; } /*================================================== CARD ==================================================*/ .dc-expectation-card{ background:var(--clr-white); padding:35px; border-radius:30px; border:1px solid rgba(0,0,0,.06); box-shadow:0 15px 35px rgba(0,0,0,.05); transition:.35s ease; } .dc-expectation-card:hover{ transform:translateY(-8px); box-shadow:0 25px 55px rgba(223,184,216,.18); } /*================================================== ICON ==================================================*/ .dc-expectation-icon{ width:70px; height:70px; display:flex; justify-content:center; align-items:center; border-radius:22px; background:#fcf4f9; color:var(--clr-primary); font-size:1.5rem; margin-bottom:24px; transition:.35s ease; } .dc-expectation-card:hover .dc-expectation-icon{ background:var(--clr-primary-light); color:var(--clr-white); transform:rotate(-8deg); } /*================================================== TEXT ==================================================*/ .dc-expectation-card h3{ font-family:var(--ff-paragraph); font-size:1.6rem; font-weight:500; color:var(--clr-heading); margin-bottom:15px; } .dc-expectation-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; margin-bottom:20px; } /*================================================== STATUS BADGE ==================================================*/ .dc-expectation-card span{ display:inline-block; padding:9px 18px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.85rem; font-weight:600; } /*================================================== NOTE ==================================================*/ .dc-expectation-note{ max-width:1000px; margin:0 auto; display:flex; align-items:flex-start; gap:22px; padding:30px; border-radius:28px; background:var(--clr-white); border:1px solid rgba(0,0,0,.06); box-shadow:0 15px 35px rgba(0,0,0,.05); } .dc-expectation-note i{ width:60px; height:60px; flex-shrink:0; display:flex; justify-content:center; align-items:center; border-radius:18px; background:#fcf4f9; color:var(--clr-primary); font-size:1.4rem; } .dc-expectation-note p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } .dc-expectation-note strong{ color:var(--clr-heading); } /*================================================== TABLET ==================================================*/ @media(max-width:992px){ .dc-expectations-grid{ grid-template-columns:1fr; } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .dc-expectations{ padding:80px 20px; } .dc-expectations-title{ font-size:2.2rem; } .dc-expectation-card{ padding:28px; } .dc-expectation-note{ flex-direction:column; padding:24px; } } /*================================================== SECTION 9 - PREVENTION ==================================================*/ .dc-prevention{ padding:120px 5%; background:var(--clr-white); } /*================================================== HEADING ==================================================*/ .dc-prevention-heading{ max-width:760px; margin:0 auto 70px; text-align:center; } .dc-prevention-tag{ display:inline-block; padding:10px 20px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.82rem; font-weight:600; letter-spacing:2px; margin-bottom:24px; } .dc-prevention-title{ font-family:var(--ff-heading); font-size:clamp(2.8rem,4vw,4rem); font-weight:500; line-height:1.15; color:var(--clr-heading); margin-bottom:18px; } .dc-prevention-title span{ color:var(--clr-primary-light); } .dc-prevention-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*================================================== GRID ==================================================*/ .dc-prevention-grid{ max-width:1300px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; } /*================================================== CARD ==================================================*/ .dc-prevention-card{ background:var(--clr-white); padding:32px 28px; border-radius:28px; border:1px solid rgba(0,0,0,.06); box-shadow:0 15px 35px rgba(0,0,0,.05); transition:.35s ease; } .dc-prevention-card:hover{ transform:translateY(-8px); box-shadow:0 25px 55px rgba(223,184,216,.18); } /*================================================== ICON ==================================================*/ .dc-prevention-icon img{ width:98px; height:98px; display:flex; justify-content:center; align-items:center; border-radius:20px; background:#fcf4f9; color:var(--clr-primary); font-size:1.5rem; margin-bottom:24px; transition:.35s ease; } .dc-prevention-card:hover .dc-prevention-icon img{ background:var(--clr-primary-light); color:var(--clr-white); transform:rotate(-8deg); } /*================================================== TEXT ==================================================*/ .dc-prevention-card h3{ font-family:var(--ff-paragraph); font-size:1.45rem; font-weight:500; color:var(--clr-heading); margin-bottom:14px; } .dc-prevention-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; } /*================================================== TABLET ==================================================*/ @media(max-width:1100px){ .dc-prevention-grid{ grid-template-columns:repeat(2,1fr); } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .dc-prevention{ padding:80px 20px; } .dc-prevention-title{ font-size:2.2rem; } .dc-prevention-grid{ grid-template-columns:1fr; } .dc-prevention-card{ padding:26px; } .dc-prevention-card h3{ font-size:1.3rem; } } /*================================================== SECTION 10 - MYTHS VS FACTS ==================================================*/ .dc-myths{ padding:120px 5%; } /*================================================== HEADING ==================================================*/ .dc-myths-heading{ max-width:760px; margin:0 auto 70px; text-align:center; } .dc-myths-tag{ display:inline-block; padding:10px 20px; border-radius:999px; background:var(--clr-hover-soft); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.82rem; font-weight:600; letter-spacing:2px; margin-bottom:24px; } .dc-myths-title{ font-family:var(--ff-heading); font-size:clamp(2.8rem,4vw,4rem); font-weight:500; line-height:1.15; color:var(--clr-heading); margin-bottom:18px; } .dc-myths-title span{ color:var(--clr-primary-light); } .dc-myths-description{ max-width:650px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*================================================== LIST ==================================================*/ .dc-myths-list{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:30px; } /*================================================== ITEM ==================================================*/ .dc-myth-item{ display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border-radius:30px; background:var(--clr-white); border:1px solid rgba(0,0,0,.06); box-shadow:0 15px 35px rgba(0,0,0,.05); transition:.35s ease; } .dc-myth-item:hover{ transform:translateY(-6px); box-shadow:0 25px 55px rgba(223,184,216,.18); } /*================================================== MYTH / FACT COLUMN ==================================================*/ .dc-myth, .dc-fact{ padding:35px; } .dc-myth{ border-right:1px solid rgba(0,0,0,.06); } /*================================================== LABEL ==================================================*/ .dc-label{ display:inline-flex; align-items:center; gap:10px; padding:8px 18px; border-radius:999px; margin-bottom:22px; font-family:var(--ff-paragraph); font-size:.85rem; font-weight:700; } .dc-label i{ font-size:.9rem; } /*================================================== MYTH ==================================================*/ .dc-label.myth{ background:#fff2f2; color:#c74d4d; } /*================================================== FACT ==================================================*/ .dc-label.fact{ background:#eef9f2; color:#3d8d5a; } /*================================================== TEXT ==================================================*/ .dc-myth p, .dc-fact p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*================================================== TABLET ==================================================*/ @media(max-width:900px){ .dc-myth-item{ grid-template-columns:1fr; } .dc-myth{ border-right:none; border-bottom:1px solid rgba(0,0,0,.06); } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .dc-myths{ padding:80px 20px; } .dc-myths-title{ font-size:2.2rem; } .dc-myth, .dc-fact{ padding:24px; } } /*================================================== SECTION 11 - MIMII TIP ==================================================*/ .dc-mimii-tip{ padding:120px 5%; background:var(--clr-white); } /*================================================== CARD ==================================================*/ .dc-tip-card{ max-width:1250px; margin:0 auto; display:grid; grid-template-columns:420px 1fr; gap:60px; align-items:center; padding:45px; border-radius:36px; background:linear-gradient( 135deg, #ffffff, #fcf7fa ); border:1px solid rgba(0,0,0,.06); box-shadow: 0 20px 50px rgba(0,0,0,.06); } /*================================================== IMAGE ==================================================*/ .dc-tip-image{ overflow:hidden; border-radius:28px; } .dc-tip-image img{ width:100%; display:block; transition:.45s ease; } .dc-tip-card:hover .dc-tip-image img{ transform:scale(1.03); } /*================================================== CONTENT ==================================================*/ .dc-tip-content{ display:flex; flex-direction:column; align-items:flex-start; } /*================================================== TAG ==================================================*/ .dc-tip-tag{ display: inline-block; color: #cf679d; font-size: 1.7rem; font-family: var(--ff-heading); font-weight: 500; margin-bottom: 16px; } /*================================================== TITLE ==================================================*/ .dc-tip-content h2{ font-family: var(--ff-heading); color: #222; font-size: 2rem; margin-bottom: 16px; font-weight: 400; } /*================================================== PARAGRAPH ==================================================*/ .dc-tip-content > p{ font-family: var(--ff-paragraph); font-size: 1.02rem; line-height: 1.9; color: #666; margin-bottom: 22px; } /*================================================== QUOTE ==================================================*/ .dc-mimii-quote{ display:flex; gap:18px; align-items:flex-start; margin:20px 0 35px; padding:24px; background:var(--clr-white); border-radius:22px; border-left:5px solid var(--clr-primary-light); } .dc-mimii-quote i{ color:var(--clr-primary-light); font-size:1.3rem; margin-top:5px; } .mk-note-signature { font-family: var(--ff-paragraph); font-size: 0.95rem; font-weight: 600; color: rgb(191, 114, 150); } .dc-mimii-quote p{ font-family:var(--ff-paragraph); color:var(--clr-heading); line-height:1.8; font-style:italic; } /*================================================== BUTTON ==================================================*/ .dc-tip-btn{ display:inline-flex; align-items:center; gap:14px; padding:16px 28px; border-radius:999px; background:var(--clr-primary); color:var(--clr-white); font-family:var(--ff-paragraph); font-weight:600; text-decoration:none; transition:.35s ease; } .dc-tip-btn:hover{ background:var(--clr-primary-light); transform:translateY(-4px); } .dc-tip-btn i{ transition:.35s ease; } .dc-tip-btn:hover i{ transform:translateX(6px); } /*================================================== TABLET ==================================================*/ @media(max-width:992px){ .dc-tip-card{ grid-template-columns:1fr; text-align:center; } .dc-tip-content{ align-items:center; } .dc-tip-image{ max-width:380px; margin:auto; } .dc-mimii-quote{ text-align:left; } } /*================================================== MOBILE ==================================================*/ @media(max-width:768px){ .dc-mimii-tip{ padding:80px 20px; } .dc-tip-card{ padding:28px; gap:35px; } .dc-tip-content h2{ font-size:2.2rem; } }