/*========================================== IRRITATED SKIN 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:1fr 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.1rem; line-height:1.8; /* color:var(--clr-heading); */ font-family:var(--ff-paragraph); } .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:100%; max-width:450px; 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 IRRITATED SKIN? ==========================================*/ .is-intro{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .isi-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .isi-head{ text-align:center; margin-bottom:70px; } .isi-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.9rem; margin-bottom:18px; } .isi-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .isi-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; font-size: 1.04rem; } /*========================================== MAIN LAYOUT ==========================================*/ .isi-layout{ display:grid; grid-template-columns:420px 1fr; gap:60px; align-items:center; } /*========================================== IMAGE ==========================================*/ .isi-image{ display:flex; justify-content:center; align-items:center; } .isi-image img{ width:100%; max-width:380px; transition:.35s; } .isi-image img:hover{ transform:translateY(-8px); } /*========================================== CONTENT ==========================================*/ .isi-small{ display:inline-block; font-family:var(--ff-paragraph); color:var(--clr-primary); font-size:.9rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; } .isi-content h3{ font-family:var(--ff-paragraph); font-size:2rem; font-weight:500; color:var(--clr-heading); margin-bottom:20px; line-height:1.3; } .isi-content p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; margin-bottom:20px; font-size: 1.04rem; } /*========================================== INFORMATION CARD ==========================================*/ .isi-note{ display:flex; align-items:flex-start; gap:20px; margin-top:35px; padding:26px; background:#fff7fb; border:1px solid #f4dbe8; border-radius:24px; } .isi-icon{ width:60px; height:60px; border-radius:18px; background:#fff1f8; display:flex; justify-content:center; align-items:center; flex-shrink:0; } .isi-icon i{ color:var(--clr-primary); font-size:1.5rem; } .isi-note h4{ font-family:var(--ff-heading); font-size:1.35rem; font-weight:500; color:var(--clr-heading); margin-bottom:10px; } .isi-note p{ margin:0; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; font-size: 1.04rem; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .isi-layout{ grid-template-columns:1fr; gap:50px; } .isi-image{ order:-1; } .isi-image img{ max-width:300px; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .is-intro{ padding:70px 6%; } .isi-title{ font-size:2.1rem; } .isi-sub{ font-size:1rem; } .isi-content h3{ font-size:1.6rem; } .isi-note{ flex-direction:column; align-items:center; text-align:center; padding:22px; } .isi-icon{ width:54px; height:54px; } .isi-icon i{ font-size:1.3rem; } } /*========================================== HOW DOES IRRITATED SKIN DEVELOP? ==========================================*/ .is-process{ padding:90px 6%; background:linear-gradient( 180deg, #fff8fc 0%, #ffffff 100% ); } .isp-wrap{ max-width:1100px; margin:auto; } /*========================================== HEADING ==========================================*/ .isp-head{ text-align:center; margin-bottom:70px; } .isp-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.9rem; margin-bottom:18px; } .isp-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .isp-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); font-size: 1.04rem; line-height:1.9; } /*========================================== FLOW ==========================================*/ .isp-flow{ display:flex; flex-direction:column; align-items:center; } /*========================================== CARD ==========================================*/ .isp-card{ width:100%; display:grid; grid-template-columns:90px 180px 1fr; gap:30px; align-items:center; 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; } .isp-card:hover{ transform:translateY(-6px); border-color:#efc5db; box-shadow:0 22px 50px rgba(236,180,215,.18); } /*========================================== NUMBER ==========================================*/ .isp-number{ width:70px; height:70px; border-radius:20px; background:linear-gradient( 135deg, #ffd9eb, #efb8d5 ); display:flex; justify-content:center; align-items:center; font-family:var(--ff-heading); font-size:1.6rem; color:#ffffff; } /*========================================== IMAGE ==========================================*/ .isp-image{ display:flex; justify-content:center; } .isp-image img{ width:150px; max-width:100%; transition:.35s; } .isp-card:hover .isp-image img{ transform:scale(1.06); } /*========================================== CONTENT ==========================================*/ .isp-content h3{ font-family:var(--ff-paragraph); font-size:1.6rem; font-weight:500; color:var(--clr-heading); margin-bottom:14px; line-height:1.4; } .isp-content p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; font-size: 1.04rem; } /*========================================== ARROW ==========================================*/ .isp-arrow{ height:55px; display:flex; align-items:center; justify-content:center; } .isp-arrow i{ font-size:1.5rem; color:#e7a7c7; } /*========================================== TABLET ==========================================*/ @media(max-width:992px){ .isp-card{ grid-template-columns:1fr; text-align:center; gap:20px; } .isp-number{ margin:auto; } .isp-image img{ width:130px; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .is-process{ padding:70px 6%; } .isp-title{ font-size:2.1rem; } .isp-sub{ font-size:1rem; } .isp-card{ padding:22px; } .isp-number{ width:60px; height:60px; font-size:1.35rem; } .isp-image img{ width:110px; } .isp-content h3{ font-size:1.3rem; } .isp-content p{ font-size:.95rem; } .isp-arrow{ height:40px; } .isp-arrow i{ font-size:1.2rem; } } /*========================================== SIGNS & APPEARANCE ==========================================*/ .is-signs{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .iss-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .iss-head{ text-align:center; margin-bottom:70px; } .iss-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.9rem; margin-bottom:18px; } .iss-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .iss-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; font-size: 1.04rem; } /*========================================== GRID ==========================================*/ .iss-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; } /*========================================== CARD ==========================================*/ .iss-card{ background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:26px; padding:28px 22px; text-align:center; box-shadow:0 12px 35px rgba(0,0,0,.05); transition:.35s; } .iss-card:hover{ transform:translateY(-8px); border-color:#efc5db; box-shadow:0 22px 50px rgba(236,180,215,.18); } /*========================================== ICON ==========================================*/ .iss-icon{ width:70px; height:70px; margin:0 auto 20px; border-radius:20px; display:flex; justify-content:center; align-items:center; background:#fff3fa; } .iss-icon i{ font-size:1.8rem; color:var(--clr-primary); } /*========================================== TEXT ==========================================*/ .iss-card h3{ font-family:var(--ff-paragraph); font-size:1.25rem; font-weight:500; color:var(--clr-heading); margin-bottom:14px; line-height:1.4; } .iss-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size: 1.04rem; line-height:1.8; } /*========================================== LAPTOP ==========================================*/ @media(max-width:1200px){ .iss-grid{ grid-template-columns:repeat(3,1fr); } } /*========================================== TABLET ==========================================*/ @media(max-width:900px){ .iss-grid{ grid-template-columns:repeat(2,1fr); } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .is-signs{ padding:70px 6%; } .iss-title{ font-size:2.1rem; } .iss-sub{ font-size:1rem; } .iss-grid{ grid-template-columns:1fr; } .iss-card{ padding:24px 20px; } .iss-icon{ width:60px; height:60px; } .iss-icon i{ font-size:1.5rem; } .iss-card h3{ font-size:1.15rem; } .iss-card p{ font-size:.95rem; } } /*========================================== WHAT CAUSES IRRITATED SKIN? ==========================================*/ .is-causes{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .isc-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .isc-head{ text-align:center; margin-bottom:70px; } .isc-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.9rem; margin-bottom:18px; } .isc-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .isc-sub{ max-width:760px; font-size: 1.04rem; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*========================================== GRID ==========================================*/ .isc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; } /*========================================== CARD ==========================================*/ .isc-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; } .isc-card:hover{ transform:translateY(-8px); border-color:#efc5db; box-shadow:0 24px 55px rgba(236,180,215,.18); } /*========================================== IMAGE ==========================================*/ .isc-image{ background:#fff7fb; padding:28px; display:flex; justify-content:center; align-items:center; border-bottom:1px solid #f4dbe8; } .isc-image img{ width:170px; max-width:100%; transition:.35s; } .isc-card:hover .isc-image img{ transform:scale(1.06); } .isc-image1{ background:#fff7fb; padding:28px; padding-bottom: 83px; padding-top: 50px; display:flex; justify-content:center; align-items:center; border-bottom:1px solid #f4dbe8; } .isc-image1 img{ width:270px; max-width:100%; transition:.35s; } .isc-card:hover .isc-image1 img{ transform:scale(1.06); } /*========================================== CONTENT ==========================================*/ .isc-content{ padding:28px; } .isc-content h3{ font-family:var(--ff-paragraph); font-size:1.5rem; font-weight:500; color:var(--clr-heading); margin-bottom:14px; line-height:1.4; } .isc-content p{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size: 1.04rem; line-height:1.85; } /*========================================== TABLET ==========================================*/ @media(max-width:992px){ .isc-grid{ grid-template-columns:1fr; } .isc-image img{ width:150px; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .is-causes{ padding:70px 6%; } .isc-title{ font-size:2.1rem; } .isc-sub{ font-size:1rem; } .isc-content{ padding:24px; } .isc-content h3{ font-size:1.3rem; } .isc-content p{ font-size:.95rem; } .isc-image{ padding:22px; } .isc-image img{ width:120px; } } /*========================================== COMMON TRIGGERS ==========================================*/ .is-triggers{ padding:90px 6%; background:linear-gradient( 180deg, #fff8fc 0%, #ffffff 100% ); } .ist-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .ist-head{ text-align:center; margin-bottom:70px; } .ist-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.9rem; margin-bottom:18px; } .ist-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .ist-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; font-size: 1.04rem; } /*========================================== GRID ==========================================*/ .ist-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } /*========================================== CARD ==========================================*/ .ist-card{ background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:28px; padding:34px 26px; text-align:center; box-shadow:0 12px 35px rgba(0,0,0,.05); transition:.35s; position:relative; overflow:hidden; } .ist-card:hover{ transform:translateY(-8px); border-color:#efc5db; box-shadow:0 22px 55px rgba(236,180,215,.18); } /*========================================== TOP ACCENT ==========================================*/ .ist-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:5px; background:linear-gradient( 90deg, #ffd7ea, #efb8d5, #ffd7ea ); } /*========================================== ICON ==========================================*/ .ist-icon{ width:78px; height:78px; margin:0 auto 22px; border-radius:22px; background:#fff3fa; display:flex; justify-content:center; align-items:center; transition:.35s; } .ist-icon i{ font-size:2rem; color:var(--clr-primary); } .ist-card:hover .ist-icon{ transform:rotate(-8deg) scale(1.08); } /*========================================== TEXT ==========================================*/ .ist-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; } .ist-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size: 1.04rem; line-height:1.8; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .ist-grid{ grid-template-columns:repeat(2,1fr); } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .is-triggers{ padding:70px 6%; } .ist-title{ font-size:2.1rem; } .ist-sub{ font-size:1rem; } .ist-grid{ grid-template-columns:1fr; gap:22px; } .ist-card{ padding:28px 22px; } .ist-icon{ width:68px; height:68px; } .ist-icon i{ font-size:1.7rem; } .ist-card h3{ font-size:1.2rem; } .ist-card p{ font-size:.95rem; } } /*========================================== COMMON AREAS ==========================================*/ .is-areas{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .isa-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .isa-head{ text-align:center; margin-bottom:70px; } .isa-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.9rem; margin-bottom:18px; } .isa-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .isa-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; font-size: 1.04rem; } /*========================================== MAIN LAYOUT ==========================================*/ .isa-layout{ display:grid; grid-template-columns:420px 1fr; gap:55px; align-items:center; } /*========================================== IMAGE ==========================================*/ .isa-image{ display:flex; justify-content:center; align-items:center; } .isa-image img{ width:100%; max-width:570px; transition:.35s; } .isa-image img:hover{ transform:translateY(-8px); } /*========================================== CONTENT ==========================================*/ .isa-content{ display:flex; flex-direction:column; gap:22px; } /*========================================== CARD ==========================================*/ .isa-card{ 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; } .isa-card:hover{ transform:translateX(8px); border-color:#efc5db; box-shadow:0 22px 50px rgba(236,180,215,.18); } /*========================================== ICON ==========================================*/ .isa-icon{ width:64px; height:64px; flex-shrink:0; border-radius:20px; background:#fff3fa; display:flex; justify-content:center; align-items:center; } .isa-icon i{ color:var(--clr-primary); font-size:1.6rem; } /*========================================== TEXT ==========================================*/ .isa-info{ flex:1; } .isa-info h3{ font-family:var(--ff-paragraph); font-size:1.4rem; font-weight:500; color:var(--clr-heading); margin-bottom:14px; } .isa-info p{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size: 1.04rem; line-height:1.8; } .isa-info ul{ list-style:none; margin:0; padding:0; } .isa-info ul li{ position:relative; padding-left:22px; margin-bottom:10px; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.7; } .isa-info ul li:last-child{ margin-bottom:0; } .isa-info ul li::before{ content:""; position:absolute; left:0; top:10px; width:8px; height:8px; border-radius:50%; background:var(--clr-primary); } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .isa-layout{ grid-template-columns:1fr; gap:45px; } .isa-image{ order:-1; } .isa-image img{ max-width:300px; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .is-areas{ padding:70px 6%; } .isa-title{ font-size:2.1rem; } .isa-sub{ font-size:1rem; } .isa-card{ flex-direction:column; align-items:center; text-align:center; padding:22px; } .isa-icon{ width:56px; height:56px; } .isa-icon i{ font-size:1.4rem; } .isa-info h3{ font-size:1.2rem; } .isa-info p{ font-size:.95rem; } .isa-info ul{ text-align:left; display:inline-block; } } /*========================================== IRRITATED SKIN VS SENSITIVE SKIN ==========================================*/ .is-comparison{ padding:90px 6%; background:linear-gradient( 180deg, #fff8fc 0%, #ffffff 100% ); } .iscp-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .iscp-head{ text-align:center; margin-bottom:70px; } .iscp-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.9rem; margin-bottom:18px; } .iscp-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .iscp-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); font-size: 1.04rem; color:var(--clr-text); line-height:1.9; } /*========================================== COMPARISON LAYOUT ==========================================*/ .iscp-layout{ display:grid; grid-template-columns:1fr auto 1fr; gap:35px; align-items:center; } /*========================================== CARD ==========================================*/ .iscp-card{ background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:30px; padding:35px; box-shadow:0 12px 35px rgba(0,0,0,.05); transition:.35s; } .iscp-card:hover{ transform:translateY(-8px); border-color:#efc5db; box-shadow:0 24px 55px rgba(236,180,215,.18); } /*========================================== CARD HEADER ==========================================*/ .iscp-top{ text-align:center; margin-bottom:28px; } .iscp-top img{ width:170px; max-width:100%; margin-bottom:18px; transition:.35s; } .iscp-card:hover .iscp-top img{ transform:scale(1.05); } .iscp-top h3{ font-family:var(--ff-paragraph); font-size:1.6rem; font-weight:500; color:var(--clr-heading); } /*========================================== LIST ==========================================*/ .iscp-card ul{ list-style:none; padding:0; margin:0; } .iscp-card li{ display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid #f3e5ed; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; } .iscp-card li:last-child{ border-bottom:none; } .iscp-card li i{ color:var(--clr-primary); margin-top:5px; flex-shrink:0; } /*========================================== VS ==========================================*/ .iscp-middle{ display:flex; justify-content:center; align-items:center; } .iscp-circle{ width:90px; height:90px; border-radius:50%; background:linear-gradient( 135deg, #ffd8eb, #efb8d5 ); display:flex; justify-content:center; align-items:center; color:#ffffff; font-family:var(--ff-heading); font-size:1.5rem; box-shadow:0 15px 35px rgba(236,180,215,.25); } /*========================================== NOTE ==========================================*/ .iscp-note{ margin-top:45px; display:flex; align-items:flex-start; gap:18px; padding:24px; background:#fff7fb; border:1px solid #f4dbe8; border-radius:24px; } .iscp-note i{ color:var(--clr-primary); font-size:1.4rem; margin-top:3px; flex-shrink:0; } .iscp-note p{ margin:0; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; font-size: 1.04rem; } .iscp-note strong{ color:var(--clr-heading); } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .iscp-layout{ grid-template-columns:1fr; } .iscp-circle{ width:70px; height:70px; font-size:1.2rem; margin:10px auto; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .is-comparison{ padding:70px 6%; } .iscp-title{ font-size:2.1rem; } .iscp-sub{ font-size:1rem; } .iscp-card{ padding:26px 22px; } .iscp-top img{ width:130px; } .iscp-top h3{ font-size:1.3rem; } .iscp-card li{ font-size:.95rem; } .iscp-note{ flex-direction:column; align-items:center; text-align:center; padding:22px; } } /*========================================== CAN IRRITATED SKIN HEAL? ==========================================*/ .is-healing{ padding:90px 6%; background:linear-gradient( 180deg, #fff8fc 0%, #ffffff 100% ); } .ish-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .ish-head{ text-align:center; margin-bottom:70px; } .ish-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.9rem; margin-bottom:18px; } .ish-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .ish-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; font-size: 1.04rem; } /*========================================== LAYOUT ==========================================*/ .ish-layout{ display:grid; grid-template-columns:380px 1fr; gap:55px; align-items:center; } /*========================================== IMAGE ==========================================*/ .ish-image{ display:flex; justify-content:center; align-items:center; } .ish-image img{ width:100%; max-width:330px; transition:.35s; } .ish-image img:hover{ transform:translateY(-8px); } /*========================================== TIMELINE ==========================================*/ .ish-timeline{ display:flex; flex-direction:column; gap:22px; } .ish-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; } .ish-step:hover{ transform:translateX(8px); border-color:#efc5db; box-shadow:0 22px 50px rgba(236,180,215,.18); } /*========================================== ICON ==========================================*/ .ish-icon{ width:60px; height:60px; flex-shrink:0; border-radius:18px; background:#fff3fa; display:flex; justify-content:center; align-items:center; } .ish-icon i{ font-size:1.45rem; color:var(--clr-primary); } /*========================================== TEXT ==========================================*/ .ish-step h3{ font-family:var(--ff-paragraph); font-size:1.35rem; font-weight:500; color:var(--clr-heading); margin-bottom:10px; line-height:1.4; } .ish-step p{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size: 1.04rem; line-height:1.8; } /*========================================== RECOVERY NOTE ==========================================*/ .ish-note{ margin-top:45px; display:flex; align-items:flex-start; gap:22px; padding:28px; background:#fff7fb; border:1px solid #f4dbe8; border-radius:26px; } .ish-note-icon{ width:65px; height:65px; flex-shrink:0; border-radius:20px; background:#fff1f8; display:flex; justify-content:center; align-items:center; } .ish-note-icon i{ color:var(--clr-primary); font-size:1.5rem; } .ish-note h3{ font-family:var(--ff-paragraph); font-size:1.4rem; font-weight:500; color:var(--clr-heading); margin-bottom:12px; } .ish-note p{ margin:0; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.8; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .ish-layout{ grid-template-columns:1fr; gap:45px; } .ish-image{ order:-1; } .ish-image img{ max-width:280px; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .is-healing{ padding:70px 6%; } .ish-title{ font-size:2.1rem; } .ish-sub{ font-size:1rem; } .ish-step{ flex-direction:column; align-items:center; text-align:center; padding:22px; } .ish-icon{ width:54px; height:54px; } .ish-icon i{ font-size:1.3rem; } .ish-step h3{ font-size:1.2rem; } .ish-step p{ font-size:.95rem; } .ish-note{ flex-direction:column; align-items:center; text-align:center; padding:22px; } .ish-note-icon{ width:56px; height:56px; } .ish-note h3{ font-size:1.25rem; } } /*========================================== INGREDIENTS THAT HELP ==========================================*/ .is-ingredients{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .isi-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .isi-head{ text-align:center; margin-bottom:70px; } .isi-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.9rem; margin-bottom:18px; } .isi-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .isi-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); font-size: 1.04rem; color:var(--clr-text); line-height:1.9; } /*========================================== GRID ==========================================*/ .isi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; } /*========================================== CARD ==========================================*/ .isi-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; } .isi-card:hover{ transform:translateY(-8px); border-color:#efc5db; box-shadow:0 24px 55px rgba(236,180,215,.18); } /*========================================== TOP ACCENT ==========================================*/ .isi-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:5px; background:linear-gradient( 90deg, #ffd7ea, #efb8d5, #ffd7ea ); } /*========================================== IMAGE ==========================================*/ .isi-card img{ width:110px; height:110px; object-fit:contain; margin-bottom:22px; transition:.35s; } .isi-card:hover img{ transform:scale(1.08); } /*========================================== TEXT ==========================================*/ .isi-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; } .isi-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size:.95rem; line-height:1.8; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .isi-grid{ grid-template-columns:repeat(2,1fr); } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .is-ingredients{ padding:70px 6%; } .isi-title{ font-size:2.1rem; } .isi-sub{ font-size:1rem; } .isi-grid{ grid-template-columns:1fr; gap:22px; } .isi-card{ padding:26px 22px; } .isi-card img{ width:90px; height:90px; } .isi-card h3{ font-size:1.2rem; } .isi-card p{ font-size:.95rem; } } /*========================================== WHAT SHOULD YOU AVOID WHILE YOUR SKIN IS HEALING? ==========================================*/ .is-avoid{ padding:90px 6%; background:linear-gradient( 180deg, #fff8fc 0%, #ffffff 100% ); } .isa-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .isa-head{ text-align:center; margin-bottom:70px; } .isa-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.9rem; margin-bottom:18px; } .isa-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .isa-sub{ max-width:760px; font-size: 1.04rem; margin:auto; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; } /*========================================== GRID ==========================================*/ .isa-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } /*========================================== CARD ==========================================*/ .isa-card{ background:#ffffff; border:2px solid #f6dce9; border-radius:28px; padding:32px 26px; text-align:center; transition:.35s; position:relative; overflow:hidden; } .isa-card:hover{ transform:translateY(-8px); border-color:#efb8d5; box-shadow:0 20px 45px rgba(236,180,215,.18); } .isa-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:6px; background:linear-gradient( 90deg, #ffb9d7, #ef9fc7, #ffb9d7 ); } /*========================================== ICON ==========================================*/ .isa-icon{ width:76px; height:76px; margin:0 auto 22px; border-radius:22px; background:#fff3fa; display:flex; justify-content:center; align-items:center; transition:.35s; } .isa-card:hover .isa-icon{ transform:rotate(-8deg); } .isa-icon i{ font-size:2rem; color: var(--clr-primary); } /*========================================== TEXT ==========================================*/ .isa-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; } .isa-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size:.95rem; line-height:1.8; } /*========================================== REMINDER BOX ==========================================*/ .isa-reminder{ margin-top:45px; display:flex; align-items:flex-start; gap:22px; padding:30px; background:#fff7fb; border:1px solid #f4dbe8; border-radius:26px; } .isa-reminder-icon{ width:66px; height:66px; flex-shrink:0; border-radius:20px; background:#fff1f8; display:flex; justify-content:center; align-items:center; } .isa-reminder-icon i{ font-size:1.6rem; color:var(--clr-primary); } .isa-reminder h3{ font-family:var(--ff-paragraph); font-size:1.45rem; font-weight:500; color:var(--clr-heading); margin-bottom:12px; } .isa-reminder p{ margin:0; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.85; font-size: 1.04rem; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .isa-grid{ grid-template-columns:repeat(2,1fr); } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .is-avoid{ padding:70px 6%; } .isa-title{ font-size:2.1rem; } .isa-sub{ font-size:1rem; } .isa-grid{ grid-template-columns:1fr; gap:22px; } .isa-card{ padding:26px 22px; } .isa-icon{ width:64px; height:64px; } .isa-icon i{ font-size:1.6rem; } .isa-card h3{ font-size:1.2rem; } .isa-card p{ font-size:.95rem; } .isa-reminder{ flex-direction:column; align-items:center; text-align:center; padding:24px; } .isa-reminder-icon{ width:56px; height:56px; } .isa-reminder h3{ font-size:1.25rem; } } /*========================================== PREVENTION TIPS ==========================================*/ .is-prevention{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .ispv-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .ispv-head{ text-align:center; margin-bottom:70px; } .ispv-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.9rem; margin-bottom:18px; } .ispv-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .ispv-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); font-size: 1.04rem; color:var(--clr-text); line-height:1.9; } /*========================================== GRID ==========================================*/ .ispv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; } /*========================================== CARD ==========================================*/ .ispv-card{ background:#ffffff; border:1px solid rgba(236,220,230,.8); border-radius:28px; padding:30px 22px; text-align:center; box-shadow:0 12px 35px rgba(0,0,0,.05); transition:.35s; position:relative; overflow:hidden; } .ispv-card:hover{ transform:translateY(-8px); border-color:#efc5db; box-shadow:0 22px 55px rgba(236,180,215,.18); } .ispv-card::before{ content:""; position:absolute; left:0; top:0; width:100%; height:5px; background:linear-gradient( 90deg, #ffd9eb, #efb8d5, #ffd9eb ); } /*========================================== ICON ==========================================*/ .ispv-icon{ width:72px; height:72px; margin:0 auto 20px; border-radius:20px; background:#fff3fa; display:flex; justify-content:center; align-items:center; transition:.35s; } .ispv-card:hover .ispv-icon{ transform:scale(1.08) rotate(-6deg); } .ispv-icon i{ color:var(--clr-primary); font-size:1.8rem; } /*========================================== TEXT ==========================================*/ .ispv-card h3{ font-family:var(--ff-paragraph); font-size:1.3rem; font-weight:500; color:var(--clr-heading); margin-bottom:14px; line-height:1.4; } .ispv-card p{ font-family:var(--ff-paragraph); color:var(--clr-text); font-size: 1.04rem; line-height:1.8; } /*========================================== TABLET ==========================================*/ @media(max-width:1100px){ .ispv-grid{ grid-template-columns:repeat(2,1fr); } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .is-prevention{ padding:70px 6%; } .ispv-title{ font-size:2.1rem; } .ispv-sub{ font-size:1rem; } .ispv-grid{ grid-template-columns:1fr; gap:22px; } .ispv-card{ padding:26px 22px; } .ispv-icon{ width:62px; height:62px; } .ispv-icon i{ font-size:1.5rem; } .ispv-card h3{ font-size:1.2rem; } .ispv-card p{ font-size:.95rem; } } /*========================================== MYTHS VS FACTS ==========================================*/ .is-myths{ padding:90px 6%; background:linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } .ism-wrap{ max-width:1300px; margin:auto; } /*========================================== HEADING ==========================================*/ .ism-head{ text-align:center; margin-bottom:70px; } .ism-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:#fff4fa; border:1px solid #f5d8e8; color:var(--clr-primary); font-family:var(--ff-paragraph); font-size:.9rem; margin-bottom:18px; } .ism-title{ font-family:var(--ff-heading); font-size:2.7rem; font-weight:500; color:var(--clr-heading); margin-bottom:18px; } .ism-sub{ max-width:760px; margin:auto; font-family:var(--ff-paragraph); font-size: 1.04rem; color:var(--clr-text); line-height:1.9; } /*========================================== GRID ==========================================*/ .ism-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; } /*========================================== CARD ==========================================*/ .ism-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; } .ism-card:hover{ transform:translateY(-8px); border-color:#efc5db; box-shadow:0 24px 55px rgba(236,180,215,.18); } /*========================================== MYTH ==========================================*/ .ism-myth{ padding:24px; background:linear-gradient( 135deg, #fff5f9, #ffeef6 ); border-bottom:1px solid #f4dbe8; display:flex; align-items:flex-start; gap:16px; } .ism-myth i{ color:#df4b74; font-size:1.4rem; margin-top:3px; flex-shrink:0; } .ism-myth h3{ font-family:var(--ff-paragraph); font-size:1.3rem; font-weight:400; color:var(--clr-heading); line-height:1.5; margin:0; } /*========================================== FACT ==========================================*/ .ism-fact{ padding:24px; display:flex; align-items:flex-start; gap:16px; } .ism-fact i{ color:#48a66b; font-size:1.4rem; margin-top:3px; flex-shrink:0; } .ism-fact p{ margin:0; font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.85; font-size:.96rem; } /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .ism-grid{ grid-template-columns:1fr; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .is-myths{ padding:70px 6%; } .ism-title{ font-size:2.1rem; } .ism-sub{ font-size:1rem; } .ism-myth, .ism-fact{ padding:20px; } .ism-myth h3{ font-size:1.2rem; } .ism-fact p{ font-size:.95rem; } .ism-myth i, .ism-fact i{ font-size:1.2rem; } } /*========================================== MIMII TIP ==========================================*/ .is-mimii{ padding:90px 6%; background:linear-gradient( 180deg, #fff8fc 0%, #ffffff 100% ); } .ismt-wrap{ max-width:1300px; margin:auto; } /*========================================== MAIN CARD ==========================================*/ .ismt-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 ==========================================*/ .ismt-image{ display:flex; justify-content:center; align-items:center; } .ismt-image img{ width:100%; max-width:320px; transition:.35s; } .ismt-image img:hover{ transform:translateY(-8px); } /*========================================== CONTENT ==========================================*/ .ismt-pill{ display: inline-block; font-family: var(--ff-heading); font-size: 1.7rem; font-weight: 500; color: #cf679d; margin-bottom: 18px; } .ismt-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; } .ismt-content p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; margin-bottom:18px; font-size: 1.04rem; } .ismt-content strong{ color: var(--color-primary-hover); } .cc-note-signature{ font-family: var(--ff-paragraph); font-size: .95rem; font-weight: 600; color: #bf7296; padding-top: 50px; } /*========================================== MIMII NOTE ==========================================*/ /* .ismt-note{ margin-top:30px; display:flex; align-items:flex-start; gap:20px; padding:24px; /* background:#fff7fb; */ /* border:1px solid #f4dbe8; border-radius:24px; */ /* .ismt-icon{ width:60px; height:60px; flex-shrink:0; border-radius:18px; background:#fff1f8; display:flex; justify-content:center; align-items:center; } .ismt-icon i{ color:var(--clr-primary); font-size:1.5rem; } */ /* .ismt-note h3{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; margin-bottom:18px; } .ismt-note p{ font-family:var(--ff-paragraph); color:var(--clr-text); line-height:1.9; margin-bottom:18px; */ /*========================================== TABLET ==========================================*/ @media(max-width:1024px){ .ismt-card{ grid-template-columns:1fr; text-align:center; } .ismt-image{ order:-1; } .ismt-image img{ max-width:260px; } .ismt-note{ text-align:left; } } /*========================================== MOBILE ==========================================*/ @media(max-width:768px){ .is-mimii{ padding:70px 6%; } .ismt-card{ padding:30px 24px; gap:35px; } .ismt-content h2{ font-size:1.9rem; } .ismt-content p{ font-size:.96rem; } .ismt-image img{ max-width:220px; } .ismt-note{ flex-direction:column; align-items:center; text-align:center; padding:20px; } .ismt-icon{ width:54px; height:54px; } .ismt-icon i{ font-size:1.3rem; } .ismt-note h3{ font-size:1.2rem; } }