/*========================================== HYPERPIGMENTATION HERO ==========================================*/ .sb-showcase{ padding:130px 5% 50px; background: radial-gradient(circle at top right,#fff0f8 0%,transparent 35%), radial-gradient(circle at bottom left,#fdf6ff 0%,transparent 30%), var(--clr-white); } .sb-shell{ max-width:1300px; margin:auto; display:grid; grid-template-columns:.70fr 1fr; gap:65px; align-items:center; } /*========================================== CONTENT ==========================================*/ .sb-copy{ display:flex; flex-direction:column; align-items:flex-start; } /*========================================== PILL ==========================================*/ .sb-pill{ display:inline-flex; align-items:center; justify-content:center; padding:9px 18px; border-radius:999px; background:var(--background-sb); border:1px solid var(--color-primary-hover); color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.88rem; font-weight:500; margin-bottom:26px; } /*========================================== TITLE ==========================================*/ .sb-title{ font-family:var(--ff-heading); font-size:70px; font-weight:200; line-height:1.1; color:var(--clr-heading); margin-bottom:22px; } .sb-title span{ color:var(--clr-primary); } /*========================================== TEXT ==========================================*/ .sb-lead{ max-width:700px; font-size:1.05rem; line-height:1.8; color:var(--clr-text); font-family:var(--ff-paragraph); margin-bottom: 20px; } .sb-body{ max-width:700px; font-size:1.1rem; line-height:2; color:var(--clr-text); font-family:var(--ff-paragraph); } /*========================================== BUTTONS ==========================================*/ .sb-actions{ display:flex; gap:18px; margin:42px 0; } .sb-btn-primary{ display:inline-flex; align-items:center; justify-content:center; padding:16px 34px; border-radius:999px; background:var(--clr-primary); color:var(--clr-white); text-decoration:none; font-family:var(--ff-paragraph); transition:.35s; } .sb-btn-primary:hover{ transform:translateY(-4px); box-shadow:0 18px 35px rgba(229,170,218,.28); } .sb-btn-secondary{ display:inline-flex; align-items:center; justify-content:center; padding:16px 34px; border-radius:999px; background:var(--clr-white); border:1px solid rgba(223,200,223,.6); color:var(--clr-heading); text-decoration:none; font-family:var(--ff-paragraph); transition:.35s; } .sb-btn-secondary:hover{ transform:translateY(-4px); border-color:var(--clr-primary); } /*========================================== IMAGE ==========================================*/ .sb-canvas{ display:flex; justify-content:center; align-items:flex-start; position:relative; } .sb-artwork{ width:135%; max-width:500px; transform:translateY(-30px); } /*========================================== RESPONSIVE ==========================================*/ @media(max-width:1024px){ .sb-shell{ grid-template-columns:1fr; text-align:center; } .sb-copy{ align-items:center; } .sb-actions{ justify-content:center; } .sb-canvas{ margin-top:50px; } } @media(max-width:768px){ .sb-showcase{ width:100%; padding:70px 7%; } .sb-title{ font-size:2.8rem; } .sb-lead{ font-size:1.1rem; } .sb-actions{ flex-direction:column; width:100%; } .sb-btn-primary, .sb-btn-secondary{ width:100%; } .sb-canvas{ width:80%; margin:auto; } } /*========================================== WHAT IS HYPERPIGMENTATION? ==========================================*/ .hp-intro{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .hp-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .hp-head{ text-align:center; margin-bottom:70px; } .hp-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-size:.9rem; font-family:var(--ff-paragraph); margin-bottom:18px; } .hp-title{ font-family:var(--ff-heading); font-size:2.8rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .hp-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*========================================== MAIN LAYOUT ==========================================*/ .hp-main{ display:grid; grid-template-columns:1fr 430px; gap:70px; align-items:center; } /*========================================== CONTENT ==========================================*/ .hp-small-title{ display:inline-block; color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.9rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px; } .hp-content h3{ font-family:var(--ff-paragraph); font-size:2rem; font-weight:500; color:var(--clr-heading); margin-bottom:22px; } .hp-content p{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size: 1.03rem; line-height:2; margin-bottom:22px; } /*========================================== IMAGE ==========================================*/ .hp-image{ display:flex; justify-content:center; align-items:center; } .hp-image img{ width:100%; max-width:400px; transition:.35s; } .hp-image img:hover{ transform:translateY(-8px); } /*========================================== NOTE CARD ==========================================*/ .hp-note{ display:flex; align-items:flex-start; gap:20px; margin-top:35px; padding:28px; background:#fff; border:1px solid #f3dce9; border-radius:28px; box-shadow:0 15px 40px rgba(235,185,212,.12); } .hp-note-icon{ width:65px; height:65px; border-radius:50%; display:flex; justify-content:center; align-items:center; background:#fff3fa; font-size:1.8rem; flex-shrink:0; } .hp-note h4{ font-family:var(--ff-heading); font-size:1.35rem; font-weight:500; color:var(--clr-heading); margin-bottom:10px; } .hp-note p{ margin:0; line-height:1.8; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .hp-main{ grid-template-columns:1fr; gap:50px; text-align:center; } .hp-image{ order:-1; } .hp-note{ text-align:left; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .hp-intro{ padding:70px 6%; } .hp-title{ font-size:2.2rem; } .hp-sub{ font-size:1rem; } .hp-content h3{ font-size:1.6rem; } .hp-note{ flex-direction:column; align-items:center; text-align:center; padding:24px; } .hp-note-icon{ width:58px; height:58px; font-size:1.5rem; } .hp-image img{ max-width:320px; } } /*========================================== HOW DOES HYPERPIGMENTATION DEVELOP? ==========================================*/ .hp-process{ padding:90px 6%; background:linear-gradient( 180deg, #fff8fc 0%, #ffffff 100% ); } .hpp-wrap{ max-width:1250px; margin:auto; } /*========================================== HEADING ==========================================*/ .hpp-head{ text-align:center; margin-bottom:80px; } .hpp-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-size:.9rem; font-family:var(--ff-paragraph); margin-bottom:18px; } .hpp-title{ font-family:var(--ff-heading); font-size:2.8rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .hpp-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*========================================== FLOW ==========================================*/ .hpp-flow{ display:flex; flex-direction:column; gap:18px; } /*========================================== STEP ==========================================*/ .hpp-step{ display:grid; grid-template-columns:280px 1fr; gap:45px; align-items:center; } .hpp-step.reverse{ grid-template-columns:1fr 280px; } /*========================================== IMAGE ==========================================*/ .hpp-step img{ width:100%; max-width:260px; margin:auto; transition:.35s; } .hpp-step:hover img{ transform:scale(1.05); } /*========================================== CONTENT ==========================================*/ .hpp-content{ background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:30px; padding:35px; box-shadow:0 15px 40px rgba(0,0,0,.05); transition:.35s; } .hpp-content:hover{ transform:translateY(-6px); border-color:#efc5db; box-shadow:0 22px 55px rgba(236,180,215,.18); } .hpp-content span{ display:inline-block; margin-bottom:15px; color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.85rem; font-weight:700; letter-spacing:.12em; } .hpp-content h3{ font-family:var(--ff-paragraph); font-size:1.8rem; font-weight:500; color:var(--clr-heading); margin-bottom:16px; } .hpp-content p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; font-size: 1.03rem; } /*========================================== CONNECTOR ==========================================*/ .hpp-line{ width:4px; height:55px; background:linear-gradient( to bottom, #ffd7ea, #efb8d5 ); margin:0 auto; border-radius:50px; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .hpp-step, .hpp-step.reverse{ grid-template-columns:1fr; text-align:center; } .hpp-step.reverse img{ order:-1; } .hpp-step img{ max-width:220px; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .hp-process{ padding:70px 6%; } .hpp-title{ font-size:2.2rem; } .hpp-sub{ font-size:1rem; } .hpp-content{ padding:26px 22px; } .hpp-content h3{ font-size:1.45rem; } .hpp-content p{ font-size:.95rem; } .hpp-line{ height:40px; } .hpp-step img{ max-width:180px; } } /*========================================== TYPES OF HYPERPIGMENTATION ==========================================*/ .hp-types{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .ht-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .ht-head{ text-align:center; margin-bottom:70px; } .ht-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-size:.9rem; font-family:var(--ff-paragraph); margin-bottom:18px; } .ht-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .ht-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*========================================== GRID ==========================================*/ .ht-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; } /*========================================== CARD ==========================================*/ .ht-card{ background:#fff; border:1px solid rgba(236,220,230,.8); border-radius:30px; padding:34px; text-align:center; box-shadow:0 12px 35px rgba(0,0,0,.05); transition:.35s; } .ht-card:hover{ transform:translateY(-8px); border-color:#efc5db; box-shadow:0 24px 55px rgba(236,180,215,.18); } /*========================================== IMAGE ==========================================*/ .ht-card img{ width:180px; max-width:100%; margin-bottom:24px; transition:.35s; } .ht-card:hover img{ transform:scale(1.06); } /*========================================== TEXT ==========================================*/ .ht-card h3{ font-family:var(--ff-paragraph); font-size:1.5rem; font-weight:500; color:var(--clr-heading); margin-bottom:16px; line-height:1.4; } .ht-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; font-size: 1.03rem; } /*========================================== INFORMATION NOTE ==========================================*/ .ht-note{ margin-top:45px; display:flex; align-items:flex-start; gap:18px; padding:28px; background:#fff7fb; border:1px solid #f4dbe8; border-radius:24px; } .ht-note i{ color:var(--clr-primary); font-size:1.5rem; margin-top:3px; flex-shrink:0; } .ht-note p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; margin:0; font-size: 1.03rem; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .ht-grid{ grid-template-columns:1fr; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .hp-types{ padding:70px 6%; } .ht-title{ font-size:2.1rem; } .ht-sub{ font-size:1rem; } .ht-card{ padding:26px 22px; } .ht-card img{ width:140px; } .ht-card h3{ font-size:1.25rem; } .ht-card p{ font-size:.95rem; } .ht-note{ flex-direction:column; align-items:center; text-align:center; padding:22px; } .ht-note i{ font-size:1.35rem; } } /*========================================== WHAT CAUSES HYPERPIGMENTATION? ==========================================*/ .hp-causes{ padding:90px 6%; background:linear-gradient( 180deg, #fff8fc 0%, #ffffff 100% ); } .hc-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .hc-head{ text-align:center; margin-bottom:70px; } .hc-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-size:.9rem; font-family:var(--ff-paragraph); margin-bottom:18px; } .hc-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .hc-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*========================================== GRID ==========================================*/ .hc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; } /*========================================== CARD ==========================================*/ .hc-card{ display:flex; align-items:center; gap:26px; background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:28px; padding:28px; box-shadow:0 12px 35px rgba(0,0,0,.05); transition:.35s; } .hc-card:hover{ transform:translateY(-6px); border-color:#efc5db; box-shadow:0 22px 50px rgba(236,180,215,.18); } /*========================================== ICON ==========================================*/ .hc-icon{ width:110px; height:110px; flex-shrink:0; display:flex; justify-content:center; align-items:center; background:#fff4fa; border-radius:24px; } .hc-icon img{ width:70px; height:70px; object-fit:contain; transition:.35s; } .hc-card:hover .hc-icon img{ transform:scale(1.08); } /*========================================== CONTENT ==========================================*/ .hc-content{ flex:1; } .hc-content h3{ font-family:var(--ff-paragraph); font-size:1.45rem; font-weight:500; color:var(--clr-heading); margin-bottom:14px; } .hc-content p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; font-size: 1.03rem; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .hc-grid{ grid-template-columns:1fr; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .hp-causes{ padding:70px 6%; } .hc-title{ font-size:2.1rem; } .hc-sub{ font-size:1rem; } .hc-card{ flex-direction:column; text-align:center; padding:24px; } .hc-icon{ width:90px; height:90px; } .hc-icon img{ width:55px; height:55px; } .hc-content h3{ font-size:1.25rem; } .hc-content p{ font-size:.95rem; } } /*========================================== COMMON TRIGGERS ==========================================*/ .hp-triggers{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .hg-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .hg-head{ text-align:center; margin-bottom:70px; } .hg-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-size:.9rem; font-family:var(--ff-paragraph); margin-bottom:18px; } .hg-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .hg-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*========================================== GRID ==========================================*/ .hg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } /*========================================== CARD ==========================================*/ .hg-card{ background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:28px; padding:32px 24px; text-align:center; box-shadow:0 12px 35px rgba(0,0,0,.05); transition:.35s; position:relative; overflow:hidden; } .hg-card:hover{ transform:translateY(-8px); border-color:#efc5db; box-shadow:0 22px 50px rgba(236,180,215,.18); } /*========================================== TOP ACCENT BAR ==========================================*/ .hg-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:5px; background:linear-gradient( 90deg, #ffd8eb, #efb8d5, #ffd8eb ); } /*========================================== IMAGE ==========================================*/ .hg-card img{ width:100px; height:100px; object-fit:contain; margin-bottom:22px; transition:.35s; } .hg-card:hover img{ transform:scale(1.08); } /*========================================== TEXT ==========================================*/ .hg-card h3{ font-family:var(--ff-paragraph); font-size:1.35rem; font-weight:500; color:var(--clr-heading); margin-bottom:14px; line-height:1.4; } .hg-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size: 1.03rem; line-height:1.8; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .hg-grid{ grid-template-columns:repeat(2,1fr); } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .hp-triggers{ padding:70px 6%; } .hg-title{ font-size:2.1rem; } .hg-sub{ font-size:1rem; } .hg-grid{ grid-template-columns:1fr; gap:22px; } .hg-card{ padding:26px 22px; } .hg-card img{ width:85px; height:85px; } .hg-card h3{ font-size:1.2rem; } .hg-card p{ font-size:.95rem; } } /*========================================== SIGNS & APPEARANCE ==========================================*/ .hp-signs{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .hs-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .hs-head{ text-align:center; margin-bottom:70px; } .hs-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-size:.9rem; font-family:var(--ff-paragraph); margin-bottom:18px; } .hs-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .hs-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*========================================== MAIN LAYOUT ==========================================*/ .hs-layout{ display:grid; grid-template-columns:420px 1fr; gap:60px; align-items:start; } /*========================================== IMAGE ==========================================*/ .hs-image{ display:flex; justify-content:center; position:sticky; top:120px; } .hs-image img{ width:100%; max-width:380px; transition:.35s; } .hs-image img:hover{ transform:translateY(-8px); } /*========================================== FEATURES ==========================================*/ .hs-features{ display:flex; flex-direction:column; gap:18px; } /*========================================== CARD ==========================================*/ .hs-card{ display:flex; align-items:center; gap:20px; background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:22px; padding:22px; transition:.35s; box-shadow:0 10px 28px rgba(0,0,0,.05); } .hs-card:hover{ transform:translateX(8px); border-color:#efc5db; box-shadow:0 18px 40px rgba(236,180,215,.18); } /*========================================== ICON ==========================================*/ .hs-icon{ width:60px; height:60px; border-radius:18px; background:#fff3fa; display:flex; justify-content:center; align-items:center; font-size:1.6rem; flex-shrink:0; color: var(--clr-primary); } /*========================================== TEXT ==========================================*/ .hs-card h3{ font-family:var(--ff-paragraph); font-size:1.3rem; font-weight:500; color:var(--clr-heading); margin-bottom:8px; } .hs-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size: 1.03rem; line-height:1.8; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .hs-layout{ grid-template-columns:1fr; } .hs-image{ position:static; margin-bottom:15px; } .hs-image img{ max-width:300px; margin:auto; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .hp-signs{ padding:70px 6%; } .hs-title{ font-size:2.1rem; } .hs-sub{ font-size:1rem; } .hs-card{ flex-direction:column; text-align:center; padding:22px; } .hs-icon{ width:54px; height:54px; font-size:1.4rem; } .hs-card h3{ font-size:1.2rem; } .hs-card p{ font-size:.95rem; } } /*========================================== COMMON AREAS ==========================================*/ .hp-areas{ padding:90px 6%; background:linear-gradient( 180deg, #fff8fc 0%, #ffffff 100% ); } .ha-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .ha-head{ text-align:center; margin-bottom:70px; } .ha-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-size:.9rem; font-family:var(--ff-paragraph); margin-bottom:18px; } .ha-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .ha-sub{ max-width:760px; margin:auto; color:var(--clr-text); font-family:var(--ff-paragraph); line-height:1.9; } /*========================================== MAIN LAYOUT ==========================================*/ .ha-layout{ display:grid; grid-template-columns:430px 1fr; gap:60px; align-items:center; } /*========================================== IMAGE ==========================================*/ .ha-image{ display:flex; justify-content:center; align-items:center; } .ha-image img{ width:100%; max-width:390px; transition:.35s; } .ha-image img:hover{ transform:translateY(-8px); } /*========================================== GRID ==========================================*/ .ha-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } /*========================================== CARD ==========================================*/ .ha-card{ background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:28px; padding:28px; box-shadow:0 12px 35px rgba(0,0,0,.05); transition:.35s; } .ha-card:hover{ transform:translateY(-6px); border-color:#efc5db; box-shadow:0 22px 50px rgba(236,180,215,.18); } /*========================================== ICON ==========================================*/ .ha-icon{ width:64px; height:64px; border-radius:20px; background:#fff3fa; display:flex; justify-content:center; align-items:center; color:var(--clr-primary); font-size:1.6rem; margin-bottom:20px; } /*========================================== TEXT ==========================================*/ .ha-card h3{ font-family:var(--ff-paragraph); font-size:1.45rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .ha-card ul{ list-style:none; } .ha-card ul li{ position:relative; padding-left:22px; margin-bottom:12px; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.7; } .ha-card ul li::before{ content:"•"; position:absolute; left:0; color:var(--clr-primary); font-size:1.2rem; } .ha-card ul li:last-child{ margin-bottom:0; } .ha-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; font-size:.95rem; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .ha-layout{ grid-template-columns:1fr; gap:50px; } .ha-image{ order:-1; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .hp-areas{ padding:70px 6%; } .ha-title{ font-size:2.1rem; } .ha-sub{ font-size:1rem; } .ha-grid{ grid-template-columns:1fr; } .ha-card{ padding:24px; } .ha-icon{ width:56px; height:56px; font-size:1.4rem; } .ha-card h3{ font-size:1.25rem; } .ha-image img{ max-width:300px; } } /*========================================== HYPERPIGMENTATION VS PIH ==========================================*/ .hp-compare{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .hv-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .hv-head{ text-align:center; margin-bottom:70px; } .hv-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-size:.9rem; font-family:var(--ff-paragraph); margin-bottom:18px; } .hv-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .hv-sub{ max-width:780px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*========================================== COMPARISON GRID ==========================================*/ .hv-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:35px; align-items:center; } /*========================================== CARD ==========================================*/ .hv-card{ background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:30px; padding:35px; box-shadow:0 15px 40px rgba(0,0,0,.05); transition:.35s; } .hv-card:hover{ transform:translateY(-8px); border-color:#efc5db; box-shadow:0 24px 55px rgba(236,180,215,.18); } /*========================================== IMAGE ==========================================*/ .hv-image{ display:flex; justify-content:center; margin-bottom:24px; } .hv-image img{ width:100%; max-width:240px; transition:.35s; } .hv-card:hover .hv-image img{ transform:scale(1.05); } /*========================================== TEXT ==========================================*/ .hv-card h3{ text-align:center; font-family:var(--ff-heading); font-size:1.55rem; font-weight:500; color:var(--clr-heading); margin-bottom:22px; line-height:1.4; } .hv-card ul{ list-style:none; } .hv-card li{ display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid #f3e6ed; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.7; } .hv-card li:last-child{ border-bottom:none; } .hv-card li i{ color:var(--clr-primary); margin-top:5px; flex-shrink:0; } /*========================================== VS ==========================================*/ .hv-divider{ width:90px; height:90px; border-radius:50%; display:flex; justify-content:center; align-items:center; background:linear-gradient( 135deg, #ffd8eb, #f6bdd9 ); color:#ffffff; font-family:var(--ff-heading); font-size:1.5rem; box-shadow:0 20px 40px rgba(236,180,215,.28); } /*========================================== DID YOU KNOW ==========================================*/ .hv-note{ margin-top:50px; display:flex; align-items:flex-start; gap:18px; padding:24px 28px; background:#fff7fb; border:1px solid #f4dbe8; border-radius:24px; } .hv-note i{ color:var(--clr-primary); font-size:1.5rem; margin-top:3px; flex-shrink:0; } .hv-note p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; } .hv-note strong{ color:var(--clr-heading); } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .hv-grid{ grid-template-columns:1fr; } .hv-divider{ margin:auto; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .hp-compare{ padding:70px 6%; } .hv-title{ font-size:2.1rem; } .hv-sub{ font-size:1rem; } .hv-card{ padding:26px 22px; } .hv-card h3{ font-size:1.3rem; } .hv-image img{ max-width:180px; } .hv-divider{ width:70px; height:70px; font-size:1.2rem; } .hv-note{ padding:22px; } } /*========================================== HOW LONG DOES HYPERPIGMENTATION TAKE TO FADE? ==========================================*/ .hp-fading{ padding:90px 6%; background:linear-gradient( 180deg, #fff8fc 0%, #ffffff 100% ); } .hfade-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .hfade-head{ text-align:center; margin-bottom:70px; } .hfade-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-size:.9rem; font-family:var(--ff-paragraph); margin-bottom:18px; } .hfade-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .hfade-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*========================================== MAIN LAYOUT ==========================================*/ .hfade-layout{ display:grid; grid-template-columns:400px 1fr; gap:60px; align-items:center; } /*========================================== IMAGE ==========================================*/ .hfade-image{ display:flex; justify-content:center; align-items:center; } .hfade-image img{ width:100%; max-width:360px; transition:.35s; } .hfade-image img:hover{ transform:translateY(-8px); } /*========================================== TIMELINE ==========================================*/ .hfade-content{ display:flex; flex-direction:column; gap:22px; } .hfade-step{ display:flex; align-items:flex-start; gap:20px; padding:24px; background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:24px; box-shadow:0 12px 35px rgba(0,0,0,.05); transition:.35s; } .hfade-step:hover{ transform:translateX(8px); border-color:#efc5db; box-shadow:0 22px 50px rgba(236,180,215,.18); } /*========================================== ICON ==========================================*/ .hfade-icon{ width:60px; height:60px; border-radius:18px; background:#fff3fa; display:flex; justify-content:center; color:var(--clr-primary); align-items:center; font-size:1.6rem; flex-shrink:0; } /*========================================== TEXT ==========================================*/ .hfade-step h3{ font-family:var(--ff-paragraph); font-size:1.35rem; font-weight:500; color:var(--clr-heading); margin-bottom:10px; } .hfade-step p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; font-size: 1.03rem; } /*========================================== NOTE ==========================================*/ .hfade-note{ margin-top:45px; display:flex; align-items:flex-start; gap:18px; background:#fff7fb; border:1px solid #f4dbe8; border-radius:24px; padding:26px; } .hfade-note i{ color:var(--clr-primary); font-size:1.5rem; margin-top:3px; flex-shrink:0; } .hfade-note p{ margin:0; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; } .hfade-note strong{ color:var(--clr-heading); } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .hfade-layout{ grid-template-columns:1fr; gap:50px; } .hfade-image{ order:-1; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .hp-fading{ padding:70px 6%; } .hfade-title{ font-size:2.1rem; } .hfade-sub{ font-size:1rem; } .hfade-step{ padding:22px; } .hfade-step h3{ font-size:1.2rem; } .hfade-step p{ font-size:.95rem; } .hfade-icon{ width:52px; height:52px; font-size:1.35rem; } .hfade-note{ flex-direction:column; align-items:center; text-align:center; padding:22px; } .hfade-image img{ max-width:280px; } } /*========================================== INGREDIENTS THAT HELP ==========================================*/ .hp-ingredients{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .hi-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .hi-head{ text-align:center; margin-bottom:70px; } .hi-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-size:.9rem; font-family:var(--ff-paragraph); margin-bottom:18px; } .hi-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .hi-sub{ max-width:780px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*========================================== GRID ==========================================*/ .hi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; } /*========================================== CARD ==========================================*/ .hi-card{ background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:30px; padding:30px 24px; text-align:center; box-shadow:0 12px 35px rgba(0,0,0,.05); transition:.35s; position:relative; overflow:hidden; } .hi-card:hover{ transform:translateY(-8px); border-color:#efc5db; box-shadow:0 24px 55px rgba(236,180,215,.18); } /*========================================== TOP ACCENT ==========================================*/ .hi-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:5px; background:linear-gradient( 90deg, #ffd7ea, #efb8d5, #ffd7ea ); } /*========================================== IMAGE ==========================================*/ .hi-card img{ width:110px; height:110px; object-fit:contain; margin-bottom:22px; transition:.35s; } .hi-card:hover img{ transform:scale(1.08); } /*========================================== TEXT ==========================================*/ .hi-card h3{ font-family:var(--ff-paragraph); font-size:1.35rem; font-weight:500; color:var(--clr-heading); margin-bottom:14px; line-height:1.4; } .hi-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size:.95rem; line-height:1.8; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .hi-grid{ grid-template-columns:repeat(2,1fr); } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .hp-ingredients{ padding:70px 6%; } .hi-title{ font-size:2.1rem; } .hi-sub{ font-size:1rem; } .hi-grid{ grid-template-columns:1fr; gap:22px; } .hi-card{ padding:26px 22px; } .hi-card img{ width:90px; height:90px; } .hi-card h3{ font-size:1.2rem; } .hi-card p{ font-size:.95rem; } } /*========================================== PREVENTION TIPS ==========================================*/ .hp-prevention{ padding:90px 6%; background:linear-gradient( 180deg, #fff8fc 0%, #ffffff 100% ); } .hpr-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .hpr-head{ text-align:center; margin-bottom:70px; } .hpr-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-size:.9rem; font-family:var(--ff-paragraph); margin-bottom:18px; } .hpr-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .hpr-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*========================================== GRID ==========================================*/ .hpr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } /*========================================== CARD ==========================================*/ .hpr-card{ background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:28px; padding:30px 24px; text-align:center; box-shadow:0 12px 35px rgba(0,0,0,.05); transition:.35s; } .hpr-card:hover{ transform:translateY(-8px); border-color:#efc5db; box-shadow:0 22px 50px rgba(236,180,215,.18); } /*========================================== IMAGE ==========================================*/ .hpr-card img{ width:100px; height:100px; object-fit:contain; margin-bottom:20px; transition:.35s; } .hpr-card:hover img{ transform:scale(1.08) rotate(-3deg); } /*========================================== TEXT ==========================================*/ .hpr-card h3{ font-family:var(--ff-paragraph); font-size:1.35rem; font-weight:500; color:var(--clr-heading); margin-bottom:14px; line-height:1.4; } .hpr-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size: 1.03rem; line-height:1.8; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .hpr-grid{ grid-template-columns:repeat(2,1fr); } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .hp-prevention{ padding:70px 6%; } .hpr-title{ font-size:2.1rem; } .hpr-sub{ font-size:1rem; } .hpr-grid{ grid-template-columns:1fr; gap:22px; } .hpr-card{ padding:26px 22px; } .hpr-card img{ width:85px; height:85px; } .hpr-card h3{ font-size:1.2rem; } .hpr-card p{ font-size:.95rem; } } /*========================================== MYTHS VS FACTS ==========================================*/ .hp-myths{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .hm-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .hm-head{ text-align:center; margin-bottom:70px; } .hm-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-size:.9rem; font-family:var(--ff-paragraph); margin-bottom:18px; } .hm-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .hm-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*========================================== GRID ==========================================*/ .hm-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; } /*========================================== CARD ==========================================*/ .hm-card{ background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:30px; overflow:hidden; box-shadow:0 12px 35px rgba(0,0,0,.05); transition:.35s; } .hm-card:hover{ transform:translateY(-8px); border-color:#efc5db; box-shadow:0 24px 55px rgba(236,180,215,.18); } /*========================================== MYTH ==========================================*/ .hm-top{ padding:26px; background:linear-gradient( 135deg, #fff5f9, #ffeef6 ); border-bottom:1px solid #f4d9e8; } .hm-myth{ display:inline-block; margin-bottom:14px; color:#dc4f79; font-family:var(--ff-heading); font-size:1.15rem; } .hm-top h3{ font-family:var(--ff-paragraph); font-size:1.45rem; font-weight:500; color:var(--clr-heading); line-height:1.5; } /*========================================== FACT ==========================================*/ .hm-bottom{ padding:26px; } .hm-fact{ display:inline-block; margin-bottom:14px; color:#46a96f; font-family:var(--ff-heading); font-size:1.15rem; } .hm-bottom p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; font-size: 1.03rem; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .hm-grid{ grid-template-columns:1fr; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .hp-myths{ padding:70px 6%; } .hm-title{ font-size:2.1rem; } .hm-sub{ font-size:1rem; } .hm-top, .hm-bottom{ padding:22px; } .hm-top h3{ font-size:1.2rem; } .hm-bottom p{ font-size:.95rem; } .hm-myth, .hm-fact{ font-size:1rem; } } /*========================================== WHEN SHOULD YOU SEE A DERMATOLOGIST? ==========================================*/ .hp-dermatologist{ padding:90px 6%; background:linear-gradient( 180deg, #fff8fc 0%, #ffffff 100% ); } .hd-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .hd-head{ text-align:center; margin-bottom:70px; } .hd-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-size:.9rem; font-family:var(--ff-paragraph); margin-bottom:18px; } .hd-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .hd-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*========================================== MAIN LAYOUT ==========================================*/ .hd-layout{ display:grid; grid-template-columns:380px 1fr; gap:55px; align-items:start; } /*========================================== IMAGE ==========================================*/ .hd-image{ display:flex; justify-content:center; position:sticky; top:120px; } .hd-image img{ width:120%; max-width:640px; transition:.35s; } .hd-image img:hover{ transform:translateY(-8px); } /*========================================== GRID ==========================================*/ .hd-grid{ display:flex; flex-direction:column; gap:20px; } /*========================================== CARD ==========================================*/ .hd-card{ display:flex; align-items:flex-start; gap:20px; background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:24px; padding:24px; box-shadow:0 12px 35px rgba(0,0,0,.05); transition:.35s; } .hd-card:hover{ transform:translateX(8px); border-color:#efc5db; box-shadow:0 22px 50px rgba(236,180,215,.18); } /*========================================== ICON ==========================================*/ .hd-icon{ width:60px; height:60px; border-radius:18px; background:#fff3fa; display:flex; justify-content:center; align-items:center; flex-shrink:0; } .hd-icon i{ color:var(--clr-primary); font-size:1.4rem; } /*========================================== TEXT ==========================================*/ .hd-card h3{ font-family:var(--ff-paragraph); font-size:1.3rem; font-weight:500; color:var(--clr-heading); margin-bottom:10px; line-height:1.4; } .hd-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; font-size: 1.03rem; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .hd-layout{ grid-template-columns:1fr; gap:45px; } .hd-image{ position:static; } .hd-image img{ max-width:280px; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .hp-dermatologist{ padding:70px 6%; } .hd-title{ font-size:2.1rem; } .hd-sub{ font-size:1rem; } .hd-card{ flex-direction:column; text-align:center; align-items:center; padding:22px; } .hd-icon{ width:54px; height:54px; } .hd-icon i{ font-size:1.25rem; } .hd-card h3{ font-size:1.2rem; } .hd-card p{ font-size:.95rem; } } /*========================================== MIMII TIP ==========================================*/ .hp-mimii-tip{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .hmt-wrap{ max-width:1300px; margin:auto; } /*========================================== MAIN CARD ==========================================*/ .hmt-card{ display:grid; grid-template-columns:380px 1fr; gap:50px; align-items:center; background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:36px; padding:45px; box-shadow:0 18px 45px rgba(236,180,215,.12); } /*========================================== IMAGE ==========================================*/ .hmt-image{ display:flex; justify-content:center; align-items:center; } .hmt-image img{ width:100%; max-width:320px; transition:.35s; } .hmt-image img:hover{ transform:translateY(-8px); } /*========================================== CONTENT ==========================================*/ .hmt-pill{ /* display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-size:.9rem; font-family:var(--ff-paragraph); margin-bottom:18px; */ display: inline-block; font-family: var(--ff-heading); font-size: 1.7rem; font-weight: 500; color: #cf679d; margin-bottom: 18px } .cc-note-signature{ font-family:var(--ff-paragraph); font-size:.95rem; font-weight:600; color:#bf7296; padding-top: 50px; } .hmt-content h2{ font-family:var(--ff-heading); font-size:2.3rem; font-weight:500; color:var(--clr-heading); margin-bottom:22px; line-height:1.3; } .hmt-content p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; margin-bottom:18px; font-size: 1.03rem; } /*========================================== HIGHLIGHT BOX ==========================================*/ .hmt-highlight{ margin-top:28px; display:flex; align-items:flex-start; gap:18px; padding:22px; background:#fff7fb; border:1px solid #f4dbe8; border-radius:22px; } .hmt-highlight i{ color:var(--clr-primary); font-size:1.45rem; margin-top:3px; flex-shrink:0; } .hmt-highlight p{ margin:0; line-height:1.8; } .hmt-highlight strong{ color:var(--clr-heading); } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .hmt-card{ grid-template-columns:1fr; text-align:center; } .hmt-highlight{ text-align:left; } .hmt-image img{ max-width:260px; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .hp-mimii-tip{ padding:70px 6%; } .hmt-card{ padding:30px 24px; gap:35px; } .hmt-content h2{ font-size:1.9rem; } .hmt-content p{ font-size:.96rem; } .hmt-image img{ max-width:220px; } .hmt-highlight{ flex-direction:column; align-items:center; text-align:center; padding:20px; } .hmt-highlight i{ font-size:1.3rem; } }