/* ============================================================= Ikris Health+ Landing Page Styles Upload to: assets/css/ikris-health-plus.css Link in AFTER style.css: ============================================================= */ :root { --ikris-blue: #1e82da; --ikris-navy: #0044c3; --ikris-dark: #ffffff; --ikris-text: #b9c4d4; --ikris-bg: #000000; --ikris-card: #14161a; --ikris-radius: 22px; --ikris-shadow: 0 10px 34px rgba(0, 0, 0, 0.55); } .appWrapper { background: var(--ikris-bg); color: var(--ikris-text); font-family: 'Aeonik', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow-x: hidden; } .appWrapper .site-width, .appWrapper .site-width-Medi { max-width: 1180px; margin: 0 auto; padding: 0 20px; } .appWrapper img { max-width: 100%; height: auto; } /* ---------------- Header ---------------- */ .appHeader { padding: 22px 0; background: transparent; } .appHeaderWrap ul { display: flex; align-items: center; justify-content: space-between; list-style: none; margin: 0; padding: 0; } .appHeaderWrap .appLogo { max-height: 54px; width: auto; } .sayHiBtn { display: inline-flex; align-items: center; gap: 10px; background: var(--ikris-card); border: 1px solid rgba(30, 130, 218, 0.25); border-radius: 40px; padding: 10px 22px; font-weight: 600; color: var(--ikris-navy); box-shadow: var(--ikris-shadow); transition: transform .25s ease, box-shadow .25s ease; } .sayHiBtn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(16, 60, 120, 0.16); } .sayHiBtn img { width: 26px; height: 26px; object-fit: contain; } /* ---------------- Hero title ---------------- */ .appTitleSection { padding: 46px 0 10px; text-align: center; } .appTitleWrap h5 { color: var(--ikris-blue); font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; font-size: 15px; margin-bottom: 14px; } .appTitleWrap h1 { color: var(--ikris-dark); font-weight: 700; font-size: clamp(34px, 5vw, 62px); line-height: 1.12; margin: 0 auto; max-width: 900px; } /* ---------------- Hero centered image ---------------- */ .appCenteredImg { text-align: center; padding: 30px 20px 0; } .appCImgWrap img { max-width: 560px; width: 100%; } /* ---------------- Intro paragraph ---------------- */ .middContent { padding: 40px 0 10px; } .middContentWrap { max-width: 860px; margin: 0 auto; text-align: center; padding: 0 20px; } .middContentWrap h6 { font-size: 19px; line-height: 1.75; font-weight: 400; color: var(--ikris-text); } /* ---------------- Feature cards ---------------- */ .middCardSection { padding: 50px 0; } .mcardRow { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; margin-bottom: 24px; } .mFeatureCard { background: var(--ikris-card); border-radius: var(--ikris-radius); box-shadow: var(--ikris-shadow); padding: 30px 28px 22px; flex: 1 1 260px; max-width: 350px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .3s ease, box-shadow .3s ease; } .mFeatureCard:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(16, 60, 120, 0.16); } .mfcTitle h2 { color: var(--ikris-dark); font-size: 26px; font-weight: 700; margin-bottom: 10px; } .mfcTitle p { font-size: 15.5px; line-height: 1.6; color: var(--ikris-text); margin-bottom: 16px; } .mfcImg { text-align: right; } .mfcImg img { max-width: 96px; max-height: 96px; object-fit: contain; } /* ---------------- Safe & Secure ---------------- */ .appSafeSecure { padding: 60px 0 30px; text-align: center; } .apssImg img { max-width: 130px; } .apssContnt h2 { margin-top: 18px; color: var(--ikris-dark); font-size: clamp(28px, 4vw, 44px); font-weight: 700; } /* ---------------- Feature trio (privacy / friendly / expertise) ---------------- */ .appSomeFeature { padding: 30px 0 60px; } .appsfRow { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; } .appsCard { background: var(--ikris-card); border-radius: var(--ikris-radius); box-shadow: var(--ikris-shadow); padding: 30px 28px 22px; flex: 1 1 280px; max-width: 360px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .3s ease, box-shadow .3s ease; } .appsCard:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(16, 60, 120, 0.16); } .appsCardTitle h2 { color: var(--ikris-dark); font-size: 24px; font-weight: 700; margin-bottom: 10px; } .appsCardTitle p { font-size: 15.5px; line-height: 1.6; margin-bottom: 16px; } .appsCardImg { text-align: right; } .appsCardImg img { max-width: 96px; max-height: 96px; object-fit: contain; } /* ---------------- QR / Download ---------------- */ .appQRdownload { padding: 40px 0 70px; } .apqrContainer { background: linear-gradient(135deg, var(--ikris-navy) 0%, var(--ikris-blue) 100%); border-radius: 30px; padding: 55px 30px; text-align: center; color: #fff; box-shadow: 0 20px 50px rgba(0, 68, 195, 0.28); } .apqrWrapper { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-bottom: 30px; } .apqrimgCard { background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); } .apqrimgCard img { width: 150px; height: 150px; object-fit: contain; display: block; } .apqrContents h3 { color: #fff; font-size: clamp(24px, 3.5vw, 36px); font-weight: 700; margin-bottom: 6px; } .apqrContents p { color: rgba(255, 255, 255, 0.85); font-size: 16px; margin-bottom: 22px; } .appDownloadBtns { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } .appDownloadbtns img { height: 52px; width: auto; transition: transform .25s ease; } .appDownloadbtns img:hover { transform: translateY(-3px); } /* ---------------- Footer links ---------------- */ .aapFooter { padding: 30px 0 40px; } .appFootterLinks ul { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .appFootterLinks a { color: var(--ikris-text); font-weight: 600; font-size: 15px; text-decoration: none; transition: color .2s ease; } .appFootterLinks a:hover { color: var(--ikris-blue); } /* ---------------- Responsive ---------------- */ @media (max-width: 767px) { .appHeaderWrap .appLogo { max-height: 42px; } .appTitleSection { padding-top: 30px; } .middContentWrap h6 { font-size: 16.5px; } .mFeatureCard, .appsCard { max-width: 100%; flex: 1 1 100%; } .mfcImg img, .appsCardImg img { max-width: 76px; max-height: 76px; } .apqrimgCard img { width: 120px; height: 120px; } .appFootterLinks ul { gap: 22px; } } .sayHiBtn { background: #14161a; color: #ffffff; } .appFootterLinks a { color: #b9c4d4; }