/* ========================================================== KARDIA UI FRAMEWORK v1.0 PART 1 — FOUNDATION Kardia Vision ========================================================== */ /* =========================== CSS VARIABLES =========================== */ :root{ --k-primary:#0d6efd; --k-primary-dark:#084298; --k-secondary:#1e3a8a; --k-success:#198754; --k-warning:#ffc107; --k-danger:#dc3545; --k-white:#ffffff; --k-light:#f8fbff; --k-light-blue:#eef5ff; --k-border:#dce7f8; --k-text:#333333; --k-text-light:#666666; --k-shadow-sm:0 2px 6px rgba(0,0,0,.05); --k-shadow:0 4px 12px rgba(0,0,0,.08); --k-shadow-lg:0 8px 24px rgba(0,0,0,.12); --k-radius-sm:10px; --k-radius:18px; --k-radius-lg:24px; --k-transition:.25s ease; --k-max-width:1000px; } /* =========================== RESET =========================== */ .kardia-ui, .kardia-ui *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } /* WordPress-safe: body styles removed */ /* =========================== TYPOGRAPHY =========================== */ .kardia-page-header h1, .kardia-page-header h2, .kardia-card h1, .kardia-card h2, .kardia-card h3, .kardia-card h4, .kardia-card h5, .kardia-card h6{ margin-top:0; font-weight:700; line-height:1.3; color:var(--k-secondary); } h1{ font-size:42px; } h2{ font-size:34px; } h3{ font-size:28px; } h4{ font-size:22px; } .kardia-content p{ margin:0 0 18px; color:var(--k-text-light); } .kardia-content strong{ color:var(--k-secondary); } /* =========================== LINKS =========================== */ a{ color:var(--k-primary); text-decoration:none; transition:color var(--k-transition); } a:hover{ color:var(--k-primary-dark); } /* =========================== IMAGES =========================== */ img{ max-width:100%; height:auto; display:block; border:0; } /* =========================== CONTAINERS =========================== */ .kardia-container{ max-width:1000px; margin:0 auto; padding-left:20px; padding-right:20px; } .kardia-section{ padding:60px 0; } .kardia-section-sm{ padding:35px 0; } .kardia-section-lg{ padding:90px 0; } /* =========================== GRID =========================== */ .kardia-grid{ display:grid; gap:30px; } .kardia-grid-2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); } .kardia-grid-3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } .kardia-grid-4{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } /* =========================== FLEX =========================== */ .kardia-flex{ display:flex; align-items:center; gap:20px; } .kardia-flex-between{ display:flex; justify-content:space-between; align-items:center; gap:20px; } .kardia-flex-center{ display:flex; justify-content:center; align-items:center; } /* =========================== BUTTONS =========================== */ .kardia-btn{ display:inline-flex; align-items:center; justify-content:center; padding:13px 28px; background:var(--k-primary) !important; color:#fff !important; border:0; border-radius:999px; font-weight:600; text-decoration:none; transition: background .25s ease, transform .25s ease, box-shadow .25s ease; box-shadow:0 6px 18px rgba(13,110,253,.18); } .kardia-btn:hover{ background:var(--k-primary-dark) !important; color:#fff !important; transform:translateY(-2px); box-shadow:0 10px 24px rgba(13,110,253,.25); } .kardia-btn:visited{ color:#fff !important; } .kardia-btn:focus{ color:#fff !important; } /* =========================== CARDS =========================== */ .kardia-card{ background:#fff; border:1px solid var(--k-border); border-radius:var(--k-radius); box-shadow:var(--k-shadow); overflow:visible; } .kardia-card-/* WordPress-safe: body styles removed */ .kardia-card-title{ margin-bottom:15px; } .kardia-card-text{ margin-bottom:20px; } /* =========================== IMAGES =========================== */ .kardia-responsive-image{ width:100%; height:auto; display:block; } .kardia-avatar{ width:60px; height:60px; border-radius:50%; object-fit:cover; } /* =========================== SPACING =========================== */ .mt-0{margin-top:0;} .mt-1{margin-top:10px;} .mt-2{margin-top:20px;} .mt-3{margin-top:30px;} .mt-4{margin-top:40px;} .mb-0{margin-bottom:0;} .mb-1{margin-bottom:10px;} .mb-2{margin-bottom:20px;} .mb-3{margin-bottom:30px;} .mb-4{margin-bottom:40px;} .pt-1{padding-top:10px;} .pt-2{padding-top:20px;} .pt-3{padding-top:30px;} .pt-4{padding-top:40px;} .pb-1{padding-bottom:10px;} .pb-2{padding-bottom:20px;} .pb-3{padding-bottom:30px;} .pb-4{padding-bottom:40px;} /* =========================== TEXT =========================== */ .text-center{ text-align:center; } .text-left{ text-align:left; } .text-right{ text-align:right; } .text-primary{ color:var(--k-primary); } .text-secondary{ color:var(--k-secondary); } .text-muted{ color:var(--k-text-light); } /* =========================== RESPONSIVE =========================== */ @media (max-width:992px){ h1{ font-size:36px; } h2{ font-size:30px; } h3{ font-size:24px; } .kardia-section{ padding:45px 0; } } @media (max-width:768px){ /* WordPress-safe: body styles removed */ .kardia-container{ padding-left:15px; padding-right:15px; } .kardia-grid{ gap:20px; } .kardia-flex, .kardia-flex-between{ flex-direction:column; align-items:flex-start; } .kardia-btn, .kardia-btn-outline{ width:100%; text-align:center; } } @media (max-width:480px){ h1{ font-size:30px; } h2{ font-size:26px; } h3{ font-size:22px; } .kardia-card-/* WordPress-safe: body styles removed */ } /* ========================================================== KARDIA UI FRAMEWORK v1.0 PART 2 — COMPONENTS ========================================================== */ /* =========================== HERO =========================== */ .kardia-hero{ background:#1b3b6f; color:#fff; padding:70px 40px; border-radius:24px; text-align:center; margin:40px 0; } .kardia-hero h1, .kardia-hero h2{ color:#fff; margin-bottom:20px; } .kardia-hero p{ max-width:760px; margin:auto; color:rgba(255,255,255,.92); font-size:18px; } .kardia-hero .kardia-btn{ margin-top:30px; } /* =========================== FEATURED SECTION =========================== */ .kardia-featured{ margin:60px 0; } .kardia-featured-title{ text-align:center; margin-bottom:40px; } .kardia-featured-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:25px; } /* =========================== FEATURED CARD =========================== */ .kardia-featured-card{ background:#fff; border:1px solid var(--k-border); border-radius:18px; overflow:hidden; box-shadow:var(--k-shadow); transition: transform .2s ease, box-shadow .2s ease; } .kardia-featured-card:hover{ transform:translateY(-4px); box-shadow:var(--k-shadow-lg); } .kardia-featured-card img{ width:100%; height:auto; display:block; } .kardia-featured-content{ padding:24px; } .kardia-featured-content h3{ margin-bottom:12px; } .kardia-featured-content p{ margin-bottom:20px; } /* =========================== INFORMATION CARD =========================== */ .kardia-info{ background:#fff; border-left:5px solid var(--k-primary); border-radius:16px; padding:24px; border:1px solid var(--k-border); box-shadow:var(--k-shadow-sm); margin:25px 0; } .kardia-info h3{ margin-bottom:15px; } .kardia-info p:last-child{ margin-bottom:0; } /* =========================== MEDICAL ALERT =========================== */ .kardia-alert{ padding:22px; border-radius:16px; margin:25px 0; font-weight:500; } .kardia-alert-info{ background:#eef6ff; border-left:6px solid #0d6efd; } .kardia-alert-warning{ background:#fff9e8; border-left:6px solid #ffc107; } .kardia-alert-danger{ background:#fff1f1; border-left:6px solid #dc3545; } /* =========================== EYE HEALTH TIP =========================== */ .kardia-tip{ background:#fff; border:1px solid var(--k-border); border-left:5px solid var(--k-primary); border-radius:18px; padding:24px; box-shadow:var(--k-shadow-sm); margin:25px 0; } .kardia-tip h3{ margin-bottom:15px; color:var(--k-secondary); } .kardia-tip p{ margin-bottom:0; } /* =========================== IMAGE CARD =========================== */ .kardia-image-card{ background:#fff; border-radius:18px; overflow:hidden; border:1px solid var(--k-border); box-shadow:var(--k-shadow); } .kardia-image-card img{ display:block; width:100%; height:auto; } .kardia-image-/* WordPress-safe: body styles removed */ /* =========================== TEAM =========================== */ .kardia-team{ display:flex; align-items:center; gap:15px; padding:15px 0; border-bottom:1px solid #edf2fb; } .kardia-team:last-child{ border-bottom:none; } .kardia-team img{ width:60px; height:60px; border-radius:50%; object-fit:cover; border:2px solid var(--k-primary); } .kardia-team-name{ font-weight:700; color:var(--k-secondary); } .kardia-team-title{ font-size:14px; color:var(--k-text-light); } /* =========================== CATEGORY CARD =========================== */ .kardia-category{ background:#fff; border-radius:16px; padding:24px; text-align:center; border:1px solid var(--k-border); box-shadow:var(--k-shadow-sm); } .kardia-category h3{ margin-bottom:15px; } .kardia-category p{ margin-bottom:20px; } /* =========================== CTA =========================== */ .kardia-cta{ background:var(--k-primary); padding:40px; border-radius:20px; text-align:center; margin:50px 0; color:#fff; } .kardia-cta h2{ color:#fff; margin-bottom:20px; } .kardia-cta p{ color:rgba(255,255,255,.92); margin-bottom:25px; } .kardia-cta .kardia-btn{ background:#fff; color:var(--k-primary); } .kardia-cta .kardia-btn:hover{ background:#f4f4f4; } /* =========================== SECTION TITLE =========================== */ .kardia-section-title{ text-align:center; margin-bottom:40px; } .kardia-section-title h2{ margin-bottom:12px; } .kardia-section-title p{ max-width:700px; margin:auto; } /* =========================== RESPONSIVE =========================== */ @media(max-width:768px){ .kardia-hero{ padding:50px 25px; } .kardia-hero p{ font-size:16px; } .kardia-featured-grid{ grid-template-columns:1fr; } .kardia-team{ align-items:flex-start; } .kardia-cta{ padding:30px 20px; } } /* ========================================================== KARDIA UI FRAMEWORK v1.0 PART 3 — MEDICAL COMPONENTS ========================================================== */ /* ========================================================== FLASH CARDS ========================================================== */ .kardia-flash-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; } .kardia-flash-card{ background:#fff; border:1px solid var(--k-border); border-radius:18px; padding:24px; box-shadow:var(--k-shadow-sm); } .kardia-flash-card h3{ color:var(--k-secondary); margin-bottom:15px; } .kardia-flash-card p:last-child{ margin-bottom:0; } /* ========================================================== DISEASE SUMMARY ========================================================== */ .kardia-summary{ background:#f8fbff; border:1px solid var(--k-border); border-left:6px solid var(--k-primary); border-radius:18px; padding:28px; margin:35px 0; } .kardia-summary h2, .kardia-summary h3{ margin-bottom:18px; } .kardia-summary p:last-child{ margin-bottom:0; } /* ========================================================== QUICK FACTS ========================================================== */ .kardia-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin:35px 0; } .kardia-fact{ background:#fff; border:1px solid var(--k-border); border-radius:16px; padding:22px; text-align:center; box-shadow:var(--k-shadow-sm); } .kardia-fact-number{ font-size:34px; font-weight:700; color:var(--k-primary); margin-bottom:10px; } .kardia-fact-title{ font-weight:600; color:var(--k-secondary); } /* ========================================================== SYMPTOMS GRID ========================================================== */ .kardia-symptoms{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin:30px 0; } .kardia-symptom{ background:#fff; border-left:5px solid var(--k-primary); padding:20px; border-radius:16px; box-shadow:var(--k-shadow-sm); } .kardia-symptom h4{ margin-bottom:10px; } /* ========================================================== WARNING BOX ========================================================== */ .kardia-warning{ background:#fff7e6; border-left:6px solid #ff9800; padding:22px; border-radius:16px; margin:35px 0; } .kardia-danger{ background:#fff3f3; border-left:6px solid #dc3545; padding:22px; border-radius:16px; margin:35px 0; } .kardia-success{ background:#eefbf4; border-left:6px solid #198754; padding:22px; border-radius:16px; margin:35px 0; } /* ========================================================== ANATOMY LABELS ========================================================== */ .kardia-anatomy{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin:35px 0; } .kardia-part{ background:#fff; border:1px solid var(--k-border); border-radius:14px; padding:18px; text-align:center; box-shadow:var(--k-shadow-sm); font-weight:600; } /* ========================================================== COMPARISON TABLE ========================================================== */ .kardia-table{ width:100%; border-collapse:collapse; margin:40px 0; font-size:15px; } .kardia-table th{ background:var(--k-primary); color:#fff; padding:15px; text-align:left; } .kardia-table td{ padding:15px; border-bottom:1px solid var(--k-border); } .kardia-table tr:nth-child(even){ background:#f8fbff; } /* ========================================================== FAQ ========================================================== */ .kardia-faq{ margin:35px 0; } .kardia-faq-item{ background:#fff; border:1px solid var(--k-border); border-radius:16px; margin-bottom:15px; padding:20px; } .kardia-faq-question{ font-weight:700; margin-bottom:12px; color:var(--k-secondary); } .kardia-faq-answer p:last-child{ margin-bottom:0; } /* ========================================================== TIMELINE ========================================================== */ .kardia-timeline{ border-left:4px solid var(--k-primary); margin:40px 0; padding-left:30px; } .kardia-step{ margin-bottom:35px; position:relative; } .kardia-step:before{ content:""; position:absolute; left:-39px; top:5px; width:14px; height:14px; border-radius:50%; background:var(--k-primary); } /* ========================================================== ICON LIST ========================================================== */ .kardia-list{ list-style:none; padding:0; margin:25px 0; } .kardia-list li{ padding-left:28px; position:relative; margin-bottom:12px; } .kardia-list li:before{ content:"✓"; position:absolute; left:0; color:var(--k-success); font-weight:bold; } /* ========================================================== MEDICAL BADGES ========================================================== */ .kardia-badge{ display:inline-block; padding:6px 14px; border-radius:50px; font-size:13px; font-weight:600; margin:4px; } .kardia-badge-info{ background:#eaf3ff; color:#0d6efd; } .kardia-badge-warning{ background:#fff4dd; color:#ff9800; } .kardia-badge-danger{ background:#ffe7e7; color:#dc3545; } .kardia-badge-success{ background:#e8f7ef; color:#198754; } /* ========================================================== IMAGE CAPTION ========================================================== */ .kardia-caption{ font-size:14px; color:#777; text-align:center; margin-top:10px; font-style:italic; } /* ========================================================== CALLOUT ========================================================== */ .kardia-callout{ background:#eef6ff; border-radius:18px; padding:30px; margin:35px 0; border:1px solid var(--k-border); } /* ========================================================== READING PROGRESS BOX ========================================================== */ .kardia-reading{ background:#f8fbff; border-radius:16px; padding:18px 22px; margin-bottom:30px; font-size:15px; border:1px solid var(--k-border); } /* ========================================================== RESPONSIVE ========================================================== */ @media(max-width:768px){ .kardia-facts, .kardia-symptoms, .kardia-flash-grid, .kardia-anatomy{ grid-template-columns:1fr; } .kardia-table{ display:block; overflow-x:auto; white-space:nowrap; } } /* ========================================================== KARDIA UI FRAMEWORK v1.0 PART 4 — UTILITIES & SITE COMPONENTS ========================================================== */ /* ========================================================== HEADER ========================================================== */ .kardia-page-header{ padding:50px 30px; text-align:center; background:#f8fbff; border:1px solid var(--k-border); border-radius:24px; margin-bottom:40px; } .kardia-page-header h1{ margin-bottom:15px; } .kardia-page-header p{ max-width:760px; margin:auto; } /* ========================================================== BREADCRUMBS ========================================================== */ .kardia-breadcrumb{ display:flex; flex-wrap:wrap; gap:8px; font-size:14px; margin-bottom:25px; color:#777; } .kardia-breadcrumb a{ color:var(--k-primary); } /* ========================================================== FORMS ========================================================== */ .kardia-form{ margin:30px 0; } .kardia-form-group{ margin-bottom:20px; } .kardia-form label{ display:block; font-weight:600; margin-bottom:8px; color:var(--k-secondary); } .kardia-input, .kardia-select, .kardia-textarea{ width:100%; padding:14px; border:1px solid var(--k-border); border-radius:12px; font-size:16px; background:#fff; transition:border-color .2s ease; } .kardia-input:focus, .kardia-select:focus, .kardia-textarea:focus{ outline:none; border-color:var(--k-primary); } /* ========================================================== TABLE OF CONTENTS ========================================================== */ .kardia-toc{ background:#f8fbff; border:1px solid var(--k-border); border-radius:18px; padding:25px; margin:35px 0; } .kardia-toc ul{ margin:0; padding-left:20px; } .kardia-toc li{ margin-bottom:10px; } /* ========================================================== SIDEBAR WIDGET ========================================================== */ .kardia-widget{ background:#fff; border:1px solid var(--k-border); border-radius:18px; padding:22px; margin-bottom:25px; box-shadow:var(--k-shadow-sm); } .kardia-widget h3{ margin-bottom:18px; } /* ========================================================== TAGS ========================================================== */ .kardia-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; } .kardia-tag-pill{ padding:7px 14px; background:#eef5ff; border-radius:50px; font-size:13px; color:var(--k-primary); } /* ========================================================== DIVIDERS ========================================================== */ .kardia-divider{ height:1px; background:var(--k-border); margin:40px 0; border:none; } /* ========================================================== LISTS ========================================================== */ .kardia-check-list{ padding-left:20px; } .kardia-check-list li{ margin-bottom:10px; } .kardia-number-list{ padding-left:22px; } .kardia-number-list li{ margin-bottom:10px; } /* ========================================================== ACCORDION ========================================================== */ .kardia-accordion{ border:1px solid var(--k-border); border-radius:16px; overflow:visible; } .kardia-accordion-item{ border-bottom:1px solid var(--k-border); } .kardia-accordion-item:last-child{ border-bottom:none; } .kardia-accordion-title{ padding:18px 22px; font-weight:700; background:#f8fbff; } .kardia-accordion-content{ padding:22px; } /* ========================================================== FOOTER ========================================================== */ .kardia-footer{ background:#0b2545; color:#fff; padding:50px 20px; margin-top:60px; } .kardia-footer h3{ color:#fff; } .kardia-footer p, .kardia-footer a{ color:rgba(255,255,255,.9); } /* ========================================================== UTILITIES ========================================================== */ .shadow-none{ box-shadow:none!important; } .rounded{ border-radius:18px; } .rounded-lg{ border-radius:24px; } .border{ border:1px solid var(--k-border); } .bg-light{ background:#f8fbff; } .bg-white{ background:#fff; } .text-primary{ color:var(--k-primary); } .text-secondary{ color:var(--k-secondary); } .text-muted{ color:#777; } .w-100{ width:100%; } .h-auto{ height:auto; } .d-none{ display:none; } .d-block{ display:block; } .d-flex{ display:flex; } .justify-center{ justify-content:center; } .align-center{ align-items:center; } .gap-10{ gap:10px; } .gap-20{ gap:20px; } .gap-30{ gap:30px; } /* ========================================================== ACCESSIBILITY ========================================================== */ :focus-visible{ outline:3px solid var(--k-primary); outline-offset:2px; } img{ max-width:100%; height:auto; } /* ========================================================== PERFORMANCE HELPERS ========================================================== */ .kardia-card, .kardia-featured-card, .kardia-widget, .kardia-image-card{ content-visibility:auto; contain-intrinsic-size:500px; } /* ========================================================== PRINT ========================================================== */ @media print{ .kardia-btn, .kardia-footer, .kardia-widget, .kardia-cta{ display:none!important; } /* WordPress-safe: body styles removed */ a{ text-decoration:none; color:#000; } } /* ========================================================== RESPONSIVE ========================================================== */ @media(max-width:768px){ .kardia-page-header{ padding:35px 20px; } .kardia-breadcrumb{ font-size:13px; } .kardia-tags{ justify-content:center; } .kardia-footer{ text-align:center; } } /* =========================================== WELCOME LAYOUT =========================================== */ .kardia-card > .kardia-grid-2{ align-items:stretch; } .kardia-responsive-image{ min-height:450px; } .kardia-responsive-image img{ width:100%; height:100%; object-fit:cover; display:block; } .kardia-card-/* WordPress-safe: body styles removed */ .kardia-tag-pill{ display:inline-block; padding:8px 18px; border-radius:999px; background:linear-gradient(135deg,#0d6efd,#4da3ff); color:#fff; font-weight:700; letter-spacing:.5px; margin-bottom:20px; } .kardia-card-body h2{ font-size:42px; margin-bottom:15px; } .kardia-card-body h3{ font-size:22px; font-weight:400; margin-bottom:30px; color:#555; } .kardia-card{ border-radius:28px; overflow:hidden; box-shadow: 0 12px 35px rgba(0,0,0,.08), 0 30px 70px rgba(0,0,0,.06); } @media (max-width:900px){ .kardia-card-/* WordPress-safe: body styles removed */ .kardia-responsive-image{ min-height:300px; } } /* =========================== FEATURE CARD =========================== */ .kardia-card{ background:#fff; border:1px solid var(--k-border); border-radius:22px; overflow:hidden; box-shadow:var(--k-shadow); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .kardia-card:hover{ transform:translateY(-6px); border-color:#c7dcff; box-shadow: 0 12px 30px rgba(15,23,42,.08), 0 24px 60px rgba(15,23,42,.10); } .kardia-card > img{ width:100%; display:block; } .kardia-card-/* WordPress-safe: body styles removed */ .kardia-card-body h3{ margin-top:0; margin-bottom:18px; } .kardia-card-body p{ margin-bottom:25px } /* ========================================== KARDIA UI NAMESPACE PROTECTION Eye Anatomy Component ========================================== */ .kardia-ui .kardia-card{ background:#ffffff; border:1px solid var(--k-border); border-radius:22px; overflow:hidden; box-shadow: 0 8px 25px rgba(15,23,42,.08); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .kardia-ui .kardia-card:hover{ transform:translateY(-6px); border-color:#c7dcff; box-shadow: 0 15px 40px rgba(15,23,42,.10); } .kardia-ui .kardia-card-/* WordPress-safe: body styles removed */ .kardia-ui .kardia-responsive-image{ width:100%; height:auto; display:block; } .kardia-ui .kardia-btn{ display:inline-flex; align-items:center; justify-content:center; padding:13px 28px; background:#0d6efd !important; color:#ffffff !important; border-radius:999px; font-weight:600; text-decoration:none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .kardia-ui .kardia-btn:hover{ background:#084298 !important; color:#ffffff !important; transform:translateY(-3px); box-shadow: 0 10px 25px rgba(13,110,253,.25); } .kardia-ui h2{ color:#1e3a8a; } .kardia-ui h3{ color:#1e3a8a; } .kardia-ui p{ color:#555; line-height:1.8; } /* ========================================================== KARDIA UI FRAMEWORK MODERN DESIGN ENHANCEMENT LAYER ========================================================== */ /* =========================== GLOBAL CARD SYSTEM =========================== */ .kardia-ui .kardia-card, .kardia-ui .kardia-widget, .kardia-ui .kardia-featured-card, .kardia-ui .kardia-image-card, .kardia-ui .kardia-info, .kardia-ui .kardia-tip, .kardia-ui .kardia-category, .kardia-ui .kardia-fact, .kardia-ui .kardia-flash-card, .kardia-ui .kardia-part{ border:1px solid rgba(13,110,253,.12); background:#ffffff; box-shadow: 0 8px 25px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.04); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } /* =========================== UNIVERSAL HOVER LIFT =========================== */ .kardia-ui .kardia-card:hover, .kardia-ui .kardia-widget:hover, .kardia-ui .kardia-featured-card:hover, .kardia-ui .kardia-image-card:hover, .kardia-ui .kardia-info:hover, .kardia-ui .kardia-tip:hover, .kardia-ui .kardia-category:hover, .kardia-ui .kardia-fact:hover, .kardia-ui .kardia-flash-card:hover, .kardia-ui .kardia-part:hover{ transform:translateY(-8px); border-color:#c7dcff; box-shadow: 0 18px 45px rgba(13,110,253,.14), 0 8px 20px rgba(15,23,42,.08); } /* =========================== IMAGE ZOOM EFFECT =========================== */ .kardia-ui .kardia-image-card img, .kardia-ui .kardia-featured-card img{ transition:transform .5s ease; } .kardia-ui .kardia-image-card:hover img, .kardia-ui .kardia-featured-card:hover img{ transform:scale(1.04); } /* =========================== MODERN BORDER ACCENT =========================== */ .kardia-ui .kardia-card::before, .kardia-ui .kardia-widget::before{ content:""; position:absolute; top:0; left:0; width:0; height:4px; background: linear-gradient(90deg,#0d6efd,#4da3ff); transition:.35s ease; } .kardia-ui .kardia-card:hover::before, .kardia-ui .kardia-widget:hover::before{ width:100%; } .kardia-ui .kardia-card, .kardia-ui .kardia-widget{ position:relative; overflow:visible; } /* =========================== BUTTON MODERN STYLE =========================== */ .kardia-ui .kardia-btn{ box-shadow: 0 8px 20px rgba(13,110,253,.22); } .kardia-ui .kardia-btn:hover{ transform:translateY(-4px) scale(1.02); box-shadow: 0 15px 35px rgba(13,110,253,.35); } /* =========================== TEAM MODERN STYLE =========================== */ .kardia-ui .kardia-team{ transition: transform .3s ease, background .3s ease; padding:16px; border-radius:14px; } .kardia-ui .kardia-team:hover{ transform:translateX(8px); background:#f8fbff; } .kardia-ui .kardia-team img{ transition: transform .3s ease, box-shadow .3s ease; } .kardia-ui .kardia-team:hover img{ transform:scale(1.08); box-shadow: 0 8px 20px rgba(13,110,253,.25); } /* =========================== SECTION TITLES =========================== */ .kardia-ui .kardia-section-title h2{ position:relative; } .kardia-ui .kardia-section-title h2:after{ content:""; display:block; width:70px; height:4px; margin:15px auto 0; border-radius:20px; background: linear-gradient(90deg,#0d6efd,#4da3ff); } /* =========================== SMOOTH PAGE ELEMENT LOAD =========================== */ .kardia-ui .kardia-card, .kardia-ui .kardia-widget, .kardia-ui .kardia-featured-card{ animation:kardiaFade .45s ease; } @keyframes kardiaFade{ from{ opacity:0; transform:translateY(15px); } to{ opacity:1; transform:translateY(0); } } /* =========================== MOBILE OPTIMIZATION =========================== */ @media(max-width:768px){ .kardia-ui .kardia-card:hover, .kardia-ui .kardia-widget:hover, .kardia-ui .kardia-featured-card:hover{ transform:none; } }

💡 Eye Health Tip

Follow the 20-20-20 Rule to reduce digital eye strain. Every 20 minutes, look at something 20 feet away for at least 20 seconds.

/* ========================================== KARDIA TEAM WIDGET ========================================== */ .kardia-ui .kardia-widget{ background:#ffffff; border:1px solid var(--k-border); border-radius:22px; padding:22px; box-shadow: 0 8px 25px rgba(15,23,42,.06); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; position:relative; overflow:hidden; } /* Widget hover lift */ .kardia-ui .kardia-widget:hover{ transform:translateY(-6px); border-color:#c7dcff; box-shadow: 0 18px 45px rgba(13,110,253,.14), 0 8px 20px rgba(15,23,42,.08); } /* Header */ .kardia-ui .kardia-widget-title{ margin:0 0 20px; text-align:center; color:var(--k-secondary); font-size:24px; font-weight:700; } /* Team row */ .kardia-ui .kardia-team{ display:flex; align-items:center; gap:16px; padding:15px 8px; border-bottom:1px solid #edf2fb; border-radius:14px; transition: transform .3s ease, background .3s ease; } .kardia-ui .kardia-team:last-child{ border-bottom:none; } /* Team hover */ .kardia-ui .kardia-team:hover{ transform:translateX(8px); background:#f8fbff; } /* Profile image */ .kardia-ui .kardia-team img{ width:60px; height:60px; border-radius:50%; object-fit:cover; border:3px solid var(--k-primary); flex-shrink:0; transition: transform .3s ease, box-shadow .3s ease; } .kardia-ui .kardia-team:hover img{ transform:scale(1.08); box-shadow: 0 8px 20px rgba(13,110,253,.25); } /* Name */ .kardia-ui .kardia-team-name{ font-size:17px; font-weight:700; color:var(--k-secondary); margin-bottom:4px; } /* Title */ .kardia-ui .kardia-team-title{ font-size:14px; color:var(--k-text-light); } /* ========================================== KARDIA FEATURE CARD ========================================== */ .kardia-ui .kardia-feature-card{ max-width:900px; margin:40px auto; background:#ffffff; border:1px solid var(--k-border); border-radius:26px; overflow:hidden; box-shadow: 0 10px 30px rgba(15,23,42,.08); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } /* Hover lift */ .kardia-ui .kardia-feature-card:hover{ transform:translateY(-10px); border-color:#c7dcff; box-shadow: 0 20px 45px rgba(13,110,253,.18), 0 8px 20px rgba(15,23,42,.08); } /* Title */ .kardia-ui .kardia-feature-title{ text-align:center; color:#1e3a8a; font-size:34px; margin:0; padding:35px 30px 30px; } /* Image container */ .kardia-ui .kardia-feature-image{ overflow:hidden; background:#f8fbff; } /* Image */ .kardia-ui .kardia-feature-image img{ width:100%; height:auto; display:block; transition: transform .5s ease; } /* Image zoom */ .kardia-ui .kardia-feature-card:hover img{ transform:scale(1.05); } /* Content */ .kardia-ui .kardia-feature-content{ padding:30px; text-align:center; } .kardia-ui .kardia-feature-content h3{ color:#1e3a8a; font-size:26px; margin:0 0 15px; } .kardia-ui .kardia-feature-content p{ color:#666; font-size:16px; line-height:1.8; margin-bottom:25px; } /* Button */ .kardia-ui .kardia-btn{ display:inline-flex; align-items:center; justify-content:center; padding:13px 30px; background: linear-gradient(135deg,#2f6fed,#5ea6ff); color:#fff !important; border-radius:999px; font-weight:700; text-decoration:none; transition: transform .25s ease, box-shadow .25s ease; } .kardia-ui .kardia-btn:hover{ transform:translateY(-3px); box-shadow: 0 12px 25px rgba(47,111,237,.35); } /* Mobile */ @media(max-width:768px){ .kardia-ui .kardia-feature-title{ font-size:28px; padding:25px; } .kardia-ui .kardia-feature-content{ padding:25px 20px; } } /* ========================================== KARDIA WELCOME COMPONENT ========================================== */ .kardia-ui .kardia-welcome-card{ display:grid; grid-template-columns:420px 1fr; background:#ffffff; border:1px solid var(--k-border); border-radius:32px; overflow:hidden; box-shadow: 0 12px 35px rgba(15,23,42,.08); transition: transform .35s ease, box-shadow .35s ease; } .kardia-ui .kardia-welcome-card:hover{ transform:translateY(-6px); box-shadow: 0 20px 50px rgba(13,110,253,.15); } /* Image */ .kardia-ui .kardia-welcome-image{ overflow:hidden; } .kardia-ui .kardia-welcome-image img{ width:100%; height:100%; min-height:520px; object-fit:cover; display:block; transition:transform .5s ease; } .kardia-ui .kardia-welcome-card:hover img{ transform:scale(1.04); } /* Content */ .kardia-ui .kardia-welcome-content{ padding:55px; } .kardia-ui .kardia-welcome-content h2{ color:var(--k-secondary); font-size:42px; line-height:1.2; margin:15px 0; } .kardia-ui .kardia-welcome-content h3{ color:#555; font-size:22px; font-weight:400; line-height:1.5; margin-bottom:30px; } .kardia-ui .kardia-welcome-content p{ color:var(--k-text-light); font-size:17px; line-height:1.9; } /* Mobile */ @media(max-width:900px){ .kardia-ui .kardia-welcome-card{ grid-template-columns:1fr; } .kardia-ui .kardia-welcome-image img{ min-height:300px; } .kardia-ui .kardia-welcome-content{ padding:35px 25px; } .kardia-ui .kardia-welcome-content h2{ font-size:34px; } } /* ========================================== KARDIA SECTION DIVIDER ========================================== */ .kardia-ui .kardia-divider{ display:flex; align-items:center; justify-content:center; margin:70px 0; gap:18px; } /* Lines */ .kardia-ui .kardia-divider-line{ flex:1; height:2px; background: linear-gradient( 90deg, transparent, var(--k-primary) ); } .kardia-ui .kardia-divider-line:last-child{ background: linear-gradient( 90deg, var(--k-primary), transparent ); } /* Center icon */ .kardia-ui .kardia-divider-icon{ width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: linear-gradient( 135deg, var(--k-primary), #4da3ff ); color:#fff; font-size:28px; box-shadow: 0 8px 25px rgba(13,110,253,.25); transition: transform .3s ease, box-shadow .3s ease; } /* Hover effect */ .kardia-ui .kardia-divider:hover .kardia-divider-icon{ transform: translateY(-5px) scale(1.08); box-shadow: 0 15px 35px rgba(13,110,253,.35); } /* Mobile */ @media(max-width:600px){ .kardia-ui .kardia-divider{ margin:45px 0; gap:12px; } .kardia-ui .kardia-divider-icon{ width:50px; height:50px; font-size:24px; } } /* ========================================== KARDIA FEATURED TOPICS ========================================== */ .kardia-ui .kardia-feature-header{ background: linear-gradient(135deg,#0b2545,#1b3b6f); border-radius:32px; padding:40px; margin-bottom:45px; text-align:center; overflow:hidden; box-shadow: 0 12px 35px rgba(13,110,253,.18); } .kardia-ui .kardia-feature-header h2{ color:#fff; font-size:40px; margin:0; } /* GRID */ .kardia-ui .kardia-topic-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:30px; } /* CARD */ .kardia-ui .kardia-topic-card{ background:#fff; border:1px solid var(--k-border); border-radius:22px; overflow:hidden; box-shadow: 0 8px 25px rgba(15,23,42,.06); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .kardia-ui .kardia-topic-card:hover{ transform:translateY(-8px); border-color:#c7dcff; box-shadow: 0 18px 45px rgba(13,110,253,.16); } /* IMAGE */ .kardia-ui .kardia-topic-image{ overflow:hidden; } .kardia-ui .kardia-topic-image img{ width:100%; height:220px; object-fit:cover; display:block; transition: transform .5s ease; } .kardia-ui .kardia-topic-card:hover img{ transform:scale(1.05); } /* CONTENT */ .kardia-ui .kardia-topic-content{ padding:25px; text-align:center; } .kardia-ui .kardia-topic-content h3{ color:var(--k-secondary); font-size:24px; margin-bottom:12px; } .kardia-ui .kardia-topic-content p{ color:var(--k-text-light); line-height:1.7; font-size:15px; margin-bottom:22px; } /* MOBILE */ @media(max-width:768px){ .kardia-ui .kardia-feature-header{ padding:30px 20px; border-radius:24px; } .kardia-ui .kardia-feature-header h2{ font-size:32px; } } /* ========================================== KARDIA COMPACT SYMPTOM CARDS ========================================== */ .kardia-ui .kardia-symptom-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:22px; } /* CARD */ .kardia-ui .kardia-symptom-card{ position:relative; background:#ffffff; border:1px solid var(--k-border); border-radius:18px; overflow:hidden; box-shadow: 0 6px 18px rgba(15,23,42,.06); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } /* Lift effect */ .kardia-ui .kardia-symptom-card:hover{ transform:translateY(-7px); border-color:#c7dcff; box-shadow: 0 16px 35px rgba(13,110,253,.15); } /* IMAGE */ .kardia-ui .kardia-symptom-image{ overflow:hidden; } .kardia-ui .kardia-symptom-image img{ width:100%; height:160px; object-fit:cover; display:block; transition: transform .45s ease; } .kardia-ui .kardia-symptom-card:hover img{ transform:scale(1.06); } /* CONTENT */ .kardia-ui .kardia-symptom-content{ padding:18px; text-align:center; } .kardia-ui .kardia-symptom-content h3{ margin:0 0 8px; color:#0d4f8b; font-size:20px; font-weight:700; } .kardia-ui .kardia-symptom-content p{ margin:0; color:#666; font-size:14px; line-height:1.6; } /* RIBBON */ .kardia-ui .kardia-ribbon{ position:absolute; top:15px; right:-45px; width:145px; padding:7px 0; text-align:center; color:#fff; font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; transform:rotate(45deg); z-index:5; box-shadow: 0 4px 10px rgba(0,0,0,.2); } /* Severity */ .kardia-ui .kardia-ribbon.common{ background:#28a745; } .kardia-ui .kardia-ribbon.attention{ background:#f39c12; } .kardia-ui .kardia-ribbon.urgent{ background:#dc3545; } /* MOBILE */ @media(max-width:768px){ .kardia-ui .kardia-symptom-grid{ grid-template-columns:1fr; } .kardia-ui .kardia-symptom-image img{ height:180px; } } /* ========================================== KARDIA WIDGET SPACING CONTROL ========================================== */ /* Reduce space between sidebar widgets */ .widget, .wp-block-widget{ margin-bottom:20px; } /* Kardia widgets */ .kardia-ui .kardia-widget{ margin-bottom:18px; } /* Footer widgets */ .footer-widget, .site-footer .widget{ margin-bottom:20px; } /* Remove extra bottom spacing on last widget */ .widget:last-child, .kardia-widget:last-child{ margin-bottom:0; } /* KARDIA UI FRAMEWORK v1.1 - PERFORMANCE OPTIMIZED */ /* Reduced animation workload, lighter shadows, optimized hover effects */ :root{ --k-shadow-sm:0 3px 10px rgba(15,23,42,.05); --k-shadow:0 5px 16px rgba(15,23,42,.07); --k-shadow-lg:0 12px 28px rgba(13,110,253,.12); } .kardia-ui .kardia-card, .kardia-ui .kardia-widget, .kardia-ui .kardia-featured-card, .kardia-ui .kardia-image-card, .kardia-ui .kardia-topic-card, .kardia-ui .kardia-info, .kardia-ui .kardia-tip, .kardia-ui .kardia-category, .kardia-ui .kardia-fact, .kardia-ui .kardia-flash-card, .kardia-ui .kardia-part{ background:#fff; border:1px solid rgba(13,110,253,.12); box-shadow:var(--k-shadow); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; } .kardia-ui .kardia-card:hover, .kardia-ui .kardia-widget:hover, .kardia-ui .kardia-featured-card:hover, .kardia-ui .kardia-topic-card:hover{ transform:translateY(-5px); border-color:#c7dcff; box-shadow:var(--k-shadow-lg); } .kardia-ui .kardia-card, .kardia-ui .kardia-widget, .kardia-ui .kardia-featured-card{ animation:none !important; } .kardia-ui .kardia-image-card img, .kardia-ui .kardia-featured-card img, .kardia-ui .kardia-topic-card img{ transition:transform .35s ease; } .kardia-ui .kardia-image-card:hover img, .kardia-ui .kardia-featured-card:hover img, .kardia-ui .kardia-topic-card:hover img{ transform:scale(1.03); } .kardia-ui .kardia-card, .kardia-ui .kardia-widget, .kardia-ui .kardia-featured-card, .kardia-ui .kardia-topic-card{ content-visibility:auto; contain-intrinsic-size:350px; } .kardia-ui .kardia-btn{ transition:transform .2s ease,box-shadow .2s ease,background .2s ease; } .kardia-ui .kardia-btn:hover{ transform:translateY(-2px); } .kardia-ui .kardia-team{ transition:transform .2s ease,background .2s ease; } .kardia-ui .kardia-team:hover{ transform:translateX(5px); } @media(max-width:768px){ .kardia-ui .kardia-card:hover, .kardia-ui .kardia-widget:hover, .kardia-ui .kardia-featured-card:hover, .kardia-ui .kardia-topic-card:hover{ transform:none; } } /* ========================================== REDUCE KARDIA FEATURE CARD SPACING ========================================== */ .kardia-ui .kardia-section{ margin-top:25px; margin-bottom:25px; } /* Reduce bottom space after feature cards */ .kardia-ui .kardia-feature-card{ margin-bottom:20px; } /* ========================================== KARDIA FINAL SPACING FIX Add at the END of Additional CSS ========================================== */ /* Remove excessive section spacing inside cards/widgets */ .kardia-ui .kardia-section{ padding-top:20px; padding-bottom:20px; margin-top:0; margin-bottom:0; } /* Eye Anatomy and feature cards */ .kardia-ui .kardia-feature-card{ margin:20px auto; } /* Prevent nested containers from adding extra gaps */ .kardia-ui .kardia-container{ padding-top:0; padding-bottom:0; } /* Control spacing between stacked Kardia components */ .kardia-ui + .kardia-ui{ margin-top:20px; } /* Sidebar widgets */ .kardia-ui .kardia-widget, .kardia-ui .kardia-sidebar-qr, .kardia-ui .kardia-tip{ margin-bottom:18px; } /* Remove last widget empty space */ .kardia-ui:last-child, .kardia-ui .kardia-widget:last-child, .kardia-ui .kardia-feature-card:last-child{ margin-bottom:0; } /* Keep cards compact */ .kardia-ui .kardia-feature-content{ padding:25px; } /* Mobile */ @media(max-width:768px){ .kardia-ui .kardia-section{ padding-top:15px; padding-bottom:15px; } } /* ========================================== KARDIA FOOTER QR WIDGET 4 ========================================== */ .kardia-ui .kardia-footer-qr{ color:#ffffff; text-align:center; padding:5px; } .kardia-ui .kardia-footer-qr h3{ margin:0 0 12px; color:#ffffff; font-size:22px; font-weight:700; } .kardia-ui .kardia-footer-qr p{ margin:0 0 20px; color:rgba(255,255,255,.75); font-size:14px; line-height:1.6; } /* QR border */ .kardia-ui .kardia-qr-wrapper{ display:inline-flex; padding:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:18px; transition: transform .3s ease, box-shadow .3s ease; } .kardia-ui .kardia-qr-wrapper:hover{ transform:translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,.25); } /* QR Image */ .kardia-ui .kardia-qr-image{ width:180px; height:180px; display:block; background:#ffffff; border-radius:12px; transition:transform .3s ease; } .kardia-ui .kardia-qr-wrapper:hover img{ transform:scale(1.04); } /* Mobile */ @media(max-width:768px){ .kardia-ui .kardia-qr-image{ width:160px; height:160px; } } /* ========================================== KARDIA ABOUT PAGE ========================================== */ .kardia-about-page{ max-width:1200px; margin:50px auto; padding:20px; } /* Hero */ .kardia-about-hero{ background:#f8fbff; border:1px solid #dce7f8; border-radius:22px; padding:60px 40px; text-align:center; box-shadow: 0 6px 18px rgba(0,0,0,.08); transition:.3s ease; } .kardia-about-hero:hover{ transform:translateY(-6px); box-shadow: 0 15px 30px rgba(13,110,253,.15); } .kardia-about-hero h1{ color:#0d4f8b; font-size:44px; margin:0 0 20px; } .kardia-about-hero p{ max-width:850px; margin:auto; color:#555; font-size:18px; line-height:1.8; } /* Cards */ .kardia-about-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:25px; margin-top:40px; } .kardia-about-card{ background:#fff; border:1px solid #dce7f8; border-radius:18px; padding:30px; text-align:center; box-shadow: 0 5px 15px rgba(0,0,0,.08); transition:.3s ease; } .kardia-about-card:hover{ transform:translateY(-8px); box-shadow: 0 18px 35px rgba(13,110,253,.15); } .kardia-about-icon{ font-size:45px; margin-bottom:15px; } .kardia-about-card h2, .kardia-about-trust h2{ color:#0d4f8b; } .kardia-about-card p, .kardia-about-trust p{ color:#555; line-height:1.8; } /* Trust */ .kardia-about-trust{ margin-top:45px; background:#f8fbff; border:1px solid #dce7f8; border-radius:20px; padding:35px; box-shadow: 0 6px 18px rgba(0,0,0,.08); } .kardia-trust-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:30px; margin-top:25px; } /* Disclaimer */ .kardia-about-disclaimer{ margin-top:40px; background:#fff8e8; border-left:6px solid #f4b400; border-radius:18px; padding:30px; box-shadow: 0 6px 18px rgba(0,0,0,.08); } .kardia-about-disclaimer h2{ color:#a65d00; } .kardia-about-disclaimer p{ color:#555; line-height:1.9; } @media(max-width:768px){ .kardia-about-hero{ padding:45px 25px; } .kardia-about-hero h1{ font-size:34px; } } /* ========================================== KARDIA EYE ANATOMY CARD ENHANCEMENT ========================================== */ /* Anatomy cards */ .kardia-ui .anatomy-card{ background:#ffffff; border:1px solid var(--k-border); border-radius:18px; padding:25px; box-shadow: 0 5px 15px rgba(15,23,42,.06); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } /* Hover lift */ .kardia-ui .anatomy-card:hover{ transform:translateY(-7px); border-color:#c7dcff; box-shadow: 0 18px 35px rgba(13,110,253,.15), 0 8px 18px rgba(15,23,42,.08); } /* Anatomy headings */ .kardia-ui .anatomy-card h3{ margin-top:0; margin-bottom:12px; color:#1565c0; font-size:22px; font-weight:700; } /* Anatomy text */ .kardia-ui .anatomy-card p{ margin:0; color:#555; line-height:1.8; font-size:15px; } /* Anatomy grid spacing */ .kardia-ui .anatomy-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:25px; margin-bottom:40px; } /* Anatomy overview box */ .kardia-ui .intro-box{ background:#ffffff; border:1px solid var(--k-border); border-radius:22px; padding:35px; box-shadow: 0 6px 18px rgba(15,23,42,.06); transition: transform .3s ease, box-shadow .3s ease; } .kardia-ui .intro-box:hover{ transform:translateY(-5px); box-shadow: 0 15px 35px rgba(13,110,253,.12); } /* Why Anatomy Matters box */ .kardia-ui .info-banner{ background:#f8fbff; border:1px solid var(--k-border); border-left:6px solid var(--k-primary); border-radius:18px; padding:35px; box-shadow: 0 6px 18px rgba(15,23,42,.06); } .kardia-ui .info-banner h2{ color:var(--k-secondary); } .kardia-ui .info-banner p{ color:#555; line-height:1.8; } /* Mobile */ @media(max-width:768px){ .kardia-ui .anatomy-grid{ grid-template-columns:1fr; } .kardia-ui .intro-box{ padding:25px; } } /* ========================================== KARDIA CONDITIONS HERO ========================================== */ .kardia-ui .kardia-condition-hero{ max-width:1200px; margin:40px auto; padding:50px 30px; text-align:center; background:#f8fbff; border:1px solid #dce7f8; border-radius:22px; box-shadow: 0 8px 25px rgba(0,0,0,.08); transition:.35s ease; } .kardia-ui .kardia-condition-hero:hover{ transform:translateY(-6px); box-shadow: 0 18px 35px rgba(13,110,253,.15); } .kardia-ui .kardia-condition-hero h1{ margin:0 0 15px; color:#0d4f8b; font-size:42px; font-weight:700; } .kardia-ui .kardia-condition-hero p{ max-width:850px; margin:0 auto 35px; color:#555; font-size:18px; line-height:1.8; } /* Stats Grid */ .kardia-ui .kardia-condition-stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; } .kardia-ui .kardia-stat-card{ background:#ffffff; border:1px solid #dce7f8; border-radius:16px; padding:25px 15px; box-shadow: 0 5px 15px rgba(0,0,0,.06); transition:.3s ease; } .kardia-ui .kardia-stat-card:hover{ transform:translateY(-8px); box-shadow: 0 18px 35px rgba(13,110,253,.15); } .kardia-ui .kardia-stat-card h2{ margin:0; color:#0d6efd; font-size:38px; font-weight:700; } .kardia-ui .kardia-stat-card span{ display:block; margin-top:10px; color:#555; font-size:15px; line-height:1.5; } @media(max-width:900px){ .kardia-ui .kardia-condition-stats{ grid-template-columns: repeat(2,1fr); } .kardia-ui .kardia-condition-hero h1{ font-size:34px; } } @media(max-width:500px){ .kardia-ui .kardia-condition-stats{ grid-template-columns:1fr; } } /* ========================================== KARDIA CONDITION CATEGORY CARDS ========================================== */ .kardia-condition-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap:22px; } .kardia-condition-card{ position:relative; background:#ffffff; border:1px solid #dce7f8; border-radius:18px; overflow:hidden; box-shadow: 0 5px 15px rgba(0,0,0,.06); transition: transform .35s ease, box-shadow .35s ease; } .kardia-condition-card:hover{ transform:translateY(-8px); box-shadow: 0 18px 35px rgba(13,110,253,.15); } .kardia-condition-card a{ text-decoration:none; color:inherit; } .kardia-condition-card img{ width:100%; height:170px; object-fit:cover; display:block; transition:.4s ease; } .kardia-condition-card:hover img{ transform:scale(1.05); } .kardia-condition-content{ padding:18px; text-align:center; } .kardia-condition-content h3{ margin:0 0 10px; color:#0d4f8b; font-size:21px; font-weight:700; } .kardia-condition-content p{ margin:0; color:#666; font-size:14px; line-height:1.6; } /* Category Badge */ .kardia-condition-badge{ position:absolute; top:12px; right:12px; z-index:5; background: linear-gradient(135deg,#0d6efd,#4da3ff); color:#fff; padding:7px 13px; border-radius:30px; font-size:12px; font-weight:700; box-shadow: 0 4px 12px rgba(0,0,0,.18); } @media(max-width:768px){ .kardia-condition-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:500px){ .kardia-condition-grid{ grid-template-columns:1fr; } } /* ========================================== KARDIA RESOURCE CARDS ========================================== */ .kardia-resource-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:25px; } .kardia-resource-card{ background:#ffffff; border:1px solid #dce7f8; border-radius:18px; overflow:hidden; box-shadow: 0 5px 15px rgba(0,0,0,.06); transition: transform .35s ease, box-shadow .35s ease; } .kardia-resource-card:hover{ transform:translateY(-8px); box-shadow: 0 18px 35px rgba(13,110,253,.15); } .kardia-resource-card a{ display:block; text-decoration:none; color:inherit; } .kardia-resource-image{ overflow:hidden; height:170px; } .kardia-resource-image img{ width:100%; height:100%; object-fit:cover; display:block; transition:.4s ease; } .kardia-resource-card:hover img{ transform:scale(1.06); } .kardia-resource-content{ padding:20px; text-align:center; } .kardia-resource-content h3{ margin:0 0 10px; color:#0d4f8b; font-size:22px; font-weight:700; } .kardia-resource-content p{ margin:0; color:#666; font-size:15px; line-height:1.6; } @media(max-width:600px){ .kardia-resource-grid{ grid-template-columns:1fr; } } /* ========================================== KARDIA RESOURCE CARD SYSTEM ========================================== */ .kardia-resource-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:25px; } .kardia-resource-card{ background:#ffffff; border:1px solid #dce7f8; border-radius:18px; overflow:hidden; box-shadow: 0 5px 15px rgba(0,0,0,.06); transition: transform .35s ease, box-shadow .35s ease; } .kardia-resource-card:hover{ transform:translateY(-8px); box-shadow: 0 18px 35px rgba(13,110,253,.15); } .kardia-resource-card a{ text-decoration:none; color:inherit; display:block; } .kardia-resource-image{ height:170px; overflow:hidden; } .kardia-resource-image img{ width:100%; height:100%; object-fit:cover; transition:.4s ease; } .kardia-resource-card:hover img{ transform:scale(1.06); } .kardia-resource-content{ padding:20px; text-align:center; } .kardia-resource-content h3{ margin:0 0 10px; color:#0d4f8b; font-size:21px; font-weight:700; } .kardia-resource-content p{ margin:0; color:#666; font-size:15px; line-height:1.6; } @media(max-width:600px){ .kardia-resource-grid{ grid-template-columns:1fr; } } /* ========================================== KARDIA TEAM PAGE DESIGN ========================================== */ /* Hero Header */ .kardia-page-header{ background:linear-gradient(135deg,#0d47a1,#1976d2); border-radius:22px; padding:60px 40px; text-align:center; margin-bottom:40px; box-shadow: 0 8px 25px rgba(0,0,0,.08); transition:.35s ease; } .kardia-page-header:hover{ transform:translateY(-8px); box-shadow: 0 18px 35px rgba(13,110,253,.18); } .kardia-page-header h1{ color:#ffffff; font-size:42px; margin-bottom:20px; } .kardia-page-header p{ max-width:850px; margin:auto; color:#ffffff; font-size:18px; line-height:1.8; } /* Doctor Grid */ .kardia-doctor-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(330px,1fr)); gap:30px; margin-bottom:45px; } /* Doctor Cards */ .kardia-doctor-card{ background:#ffffff; border:1px solid #dce7f8; border-radius:20px; padding:30px; text-align:center; box-shadow: 0 8px 25px rgba(0,0,0,.08); transition: transform .35s ease, box-shadow .35s ease; } .kardia-doctor-card:hover{ transform:translateY(-8px); box-shadow: 0 18px 35px rgba(13,110,253,.18); } /* ========================================== CENTER DOCTOR PROFILE IMAGE ========================================== */ .kardia-doctor-image{ display:flex; justify-content:center; align-items:center; width:100%; } .kardia-doctor-image img{ display:block; margin:0 auto 20px; } /* ========================================== KARDIA MODERN CONTACT DESIGN ========================================== */ /* Hero */ .kardia-contact-hero{ background: linear-gradient(135deg,#0d47a1,#2563eb); border-radius:24px; padding:70px 40px; text-align:center; color:#ffffff; box-shadow: 0 10px 30px rgba(0,0,0,.12); transition:.35s ease; margin-bottom:40px; } .kardia-contact-hero:hover{ transform:translateY(-8px); box-shadow: 0 20px 45px rgba(13,110,253,.25); } .kardia-contact-hero h1{ font-size:44px; margin-bottom:20px; color:#ffffff; } .kardia-contact-hero p{ max-width:850px; margin:auto; font-size:18px; line-height:1.8; color:#ffffff; } /* Main Contact Grid */ .kardia-contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:30px; margin-bottom:40px; } /* About Card */ .kardia-contact-about{ background:#ffffff; border:1px solid #dce7f8; border-radius:22px; padding:40px; box-shadow: 0 8px 25px rgba(0,0,0,.08); transition:.35s ease; } .kardia-contact-about:hover{ transform:translateY(-8px); box-shadow: 0 18px 40px rgba(13,110,253,.15); } .kardia-contact-about h2{ color:#0d47a1; margin-top:0; font-size:30px; } .kardia-contact-about p{ color:#555; line-height:1.8; font-size:16px; } /* Contact Options */ .kardia-contact-options{ display:flex; flex-direction:column; gap:20px; } .kardia-contact-option{ display:flex; align-items:center; gap:18px; background:#ffffff; border:1px solid #dce7f8; border-radius:18px; padding:22px; box-shadow: 0 5px 18px rgba(0,0,0,.06); transition:.35s ease; } .kardia-contact-option:hover{ transform:translateX(8px); box-shadow: 0 15px 30px rgba(13,110,253,.15); } /* Icons */ .kardia-contact-icon{ width:55px; height:55px; display:flex; align-items:center; justify-content:center; background:#eff6ff; border-radius:50%; font-size:28px; flex-shrink:0; } .kardia-contact-option h3{ margin:0 0 5px; color:#0d47a1; font-size:20px; } .kardia-contact-option a{ color:#2563eb; font-weight:700; text-decoration:none; } .kardia-contact-option p{ margin:0; color:#666; line-height:1.6; } /* Response Box */ .kardia-response-card{ background:#eef6ff; border:1px solid #dbeafe; border-radius:22px; padding:35px; text-align:center; margin-bottom:35px; box-shadow: 0 8px 25px rgba(0,0,0,.06); transition:.35s ease; } .kardia-response-card:hover{ transform:translateY(-7px); } .kardia-response-card h2{ color:#0d47a1; margin-top:0; } .kardia-response-card p{ max-width:850px; margin:auto; color:#555; line-height:1.8; } /* Disclaimer */ .kardia-contact-disclaimer-modern{ background:#fff8e8; border-left:6px solid #f4b400; border-radius:18px; padding:35px; text-align:center; box-shadow: 0 8px 25px rgba(0,0,0,.08); transition:.35s ease; } .kardia-contact-disclaimer-modern:hover{ transform:translateY(-8px); box-shadow: 0 18px 35px rgba(0,0,0,.15); } .kardia-contact-disclaimer-modern h2{ color:#a65d00; margin-top:0; } .kardia-contact-disclaimer-modern p{ max-width:900px; margin:15px auto; color:#555; line-height:1.8; } /* Responsive */ @media(max-width:850px){ .kardia-contact-grid{ grid-template-columns:1fr; } .kardia-contact-hero{ padding:50px 25px; } .kardia-contact-hero h1{ font-size:32px; } .kardia-contact-hero p{ font-size:16px; } } @media(max-width:500px){ .kardia-contact-option{ align-items:flex-start; } .kardia-contact-icon{ width:45px; height:45px; font-size:22px; } } /* ========================================== KARDIA FOOTER QUICK LINKS ========================================== */ .kardia-footer-links{ color:#ffffff; } .kardia-footer-links h3{ margin:0 0 20px; color:#ffffff; font-size:22px; font-weight:700; letter-spacing:.3px; } .kardia-footer-links ul{ list-style:none; padding:0; margin:0; } .kardia-footer-links li{ border-bottom: 1px solid rgba(255,255,255,.10); } .kardia-footer-links li:last-child{ border-bottom:none; } .kardia-footer-links a{ display:flex; align-items:center; gap:8px; padding:11px 0; color:rgba(255,255,255,.85); text-decoration:none; font-size:15px; font-weight:500; transition:.3s ease; } .kardia-footer-arrow{ color:#60a5fa; font-size:22px; font-weight:bold; transition:.3s ease; } .kardia-footer-links a:hover{ color:#ffffff; transform:translateX(6px); } .kardia-footer-links a:hover .kardia-footer-arrow{ color:#ffffff; transform:translateX(4px); } /* ========================================== KARDIA FOOTER WIDGET 3 - CONTACT ========================================== */ .kardia-footer-contact{ color:#ffffff; } .kardia-footer-contact h3{ margin:0 0 20px; color:#ffffff; font-size:22px; font-weight:700; letter-spacing:.3px; } /* Contact Row */ .kardia-contact-item-footer{ display:flex !important; flex-direction:row !important; align-items:center !important; flex-wrap:nowrap !important; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.10); transition:.3s ease; } /* Icon */ .kardia-contact-icon-footer{ width:34px; height:34px; min-width:34px; border-radius:50%; display:flex !important; align-items:center !important; justify-content:center !important; background:rgba(255,255,255,.10); color:#ffffff; flex-shrink:0; transition:.3s ease; } .kardia-contact-icon-footer i{ font-size:14px; } /* Text */ .kardia-contact-item-footer a{ display:inline-flex !important; align-items:center !important; white-space:nowrap !important; color:rgba(255,255,255,.88); text-decoration:none; font-size:15px; font-weight:500; line-height:1; transition:.3s ease; } /* Hover */ .kardia-contact-item-footer:hover{ transform:translateX(6px); } .kardia-contact-item-footer:hover .kardia-contact-icon-footer{ background:#2563eb; transform:scale(1.12); box-shadow:0 6px 15px rgba(37,99,235,.35); } .kardia-contact-item-footer:hover a{ color:#ffffff; } /* Trust Badge */ .kardia-trust-badge{ margin-top:35px; text-align:center; } .kardia-trust-badge img{ width:180px; max-width:100%; height:auto; display:block; margin:auto; transition:.35s ease; } .kardia-trust-badge img:hover{ transform:scale(1.05); } /* ========================================== KARDIA FOOTER CONTACT - BLUE STYLE ========================================== */ /* Icons */ .kardia-contact-icon-footer{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.10); color:#ffffff; flex-shrink:0; transition:.3s ease; } .kardia-contact-icon-footer i{ font-size:14px; } /* Hover */ .kardia-contact-item-footer:hover .kardia-contact-icon-footer{ background:#2563eb; color:#ffffff; transform:scale(1.12); box-shadow: 0 6px 15px rgba(37,99,235,.35); } .kardia-contact-item-footer:hover a{ color:#ffffff; } /* Trust Badge */ .kardia-trust-badge img{ width:180px; max-width:100%; height:auto; display:block; margin:auto; transition:.35s ease; filter:drop-shadow(0 8px 15px rgba(37,99,235,.25)); } .kardia-trust-badge img:hover{ transform:scale(1.06); } /* ========================================== KARDIA FOOTER BLUE OVERRIDE FIX Add at END of Additional CSS ========================================== */ /* Contact icons */ .kardia-footer-contact .contact-icon{ background:rgba(255,255,255,.10) !important; color:#ffffff !important; } /* Contact hover icon */ .kardia-footer-contact .contact-item:hover .contact-icon{ background:#0d6efd !important; color:#ffffff !important; transform:scale(1.08); } /* Contact links */ .kardia-footer-contact .contact-item a{ color:rgba(255,255,255,.92) !important; } .kardia-footer-contact .contact-item:hover a{ color:#ffffff !important; } /* Remove old red colors globally */ .kardia-footer-contact *, .kardia-footer-social *, .kardia-footer-links *{ --footer-accent:#0d6efd; } /* Social hover blue */ .kardia-footer-social a:hover .social-icon{ background:#0d6efd !important; } /* Quick links arrow blue */ .kardia-footer-links .arrow{ color:#0d6efd !important; } .kardia-footer-links a:hover .arrow{ color:#4da3ff !important; } /* Trust badge hover */ .kardia-trust-badge img:hover{ transform:scale(1.05); filter:none !important; } /* ========================================== REMOVE BLUE SHADOW FROM FOOTER IMAGE ========================================== */ .kardia-trust-badge img, .kardia-trust-badge a{ box-shadow:none !important; filter:none !important; } .kardia-trust-badge img:hover{ box-shadow:none !important; transform:scale(1.05); } /* ========================================== KARDIA FOOTER WIDGET 2 FOLLOW KARDIA ========================================== */ .kardia-footer-social{ color:#ffffff; } .kardia-footer-social h3{ margin:0 0 20px; color:#ffffff; font-size:22px; font-weight:700; letter-spacing:.3px; } /* Social List */ .kardia-footer-social ul{ list-style:none; padding:0; margin:0; } .kardia-footer-social li{ border-bottom: 1px solid rgba(255,255,255,.10); } .kardia-footer-social li:last-child{ border-bottom:none; } /* Social Links */ .kardia-footer-social a{ display:flex !important; flex-direction:row !important; align-items:center !important; flex-wrap:nowrap !important; gap:12px; padding:11px 0; color:rgba(255,255,255,.88); text-decoration:none; font-size:15px; font-weight:500; transition:.3s ease; } /* Social Icons */ .kardia-social-icon{ width:34px; height:34px; min-width:34px; border-radius:50%; display:flex !important; align-items:center !important; justify-content:center !important; background:rgba(255,255,255,.10); color:#ffffff; transition:.3s ease; } .kardia-social-icon i{ font-size:15px; } /* Hover Effects */ .kardia-footer-social a:hover{ color:#ffffff; transform:translateX(6px); } .kardia-footer-social a:hover .kardia-social-icon{ background:#2563eb; color:#ffffff; transform:scale(1.12); box-shadow: 0 6px 15px rgba(37,99,235,.35); } /* Description */ .kardia-footer-description{ margin-top:18px; color:rgba(255,255,255,.70); font-size:14px; line-height:1.7; } /* Mobile */ @media(max-width:768px){ .kardia-footer-social a{ font-size:14px; } } /* ========================================== KARDIA FOOTER QR WIDGET ========================================== */ .kardia-footer-qr{ color:#ffffff; text-align:center; } .kardia-footer-qr h3{ margin:0 0 18px; color:#ffffff; font-size:22px; font-weight:700; } .kardia-footer-qr p{ margin:0 0 20px; color:rgba(255,255,255,.72); font-size:14px; line-height:1.6; } /* QR Container */ .kardia-qr-wrapper{ display:inline-flex; margin-top:40px; padding:12px; border-radius:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); transition:.35s ease; } .kardia-qr-wrapper:hover{ transform:translateY(-5px); background:rgba(37,99,235,.25); border-color:#2563eb; } .kardia-qr-image{ width:160px; height:160px; display:block; border-radius:12px; background:#ffffff; transition:.35s ease; } .kardia-qr-image:hover{ transform:scale(1.04); } /* Mobile */ @media(max-width:768px){ .kardia-qr-image{ width:140px; height:140px; } } /* ========================================== KARDIA UI FINAL HOVER OVERRIDES ========================================== */ .kardia-card{ transition:box-shadow .25s ease; } .kardia-card:hover{ transform:none; box-shadow:0 10px 25px rgba(37,99,235,.08); } .kardia-fact-card, .kardia-type-card{ transition: transform .25s ease, box-shadow .25s ease; } .kardia-fact-card:hover, .kardia-type-card:hover{ transform:translateY(-5px); box-shadow:0 12px 25px rgba(37,99,235,.12); } @media(max-width:768px){ .kardia-card:hover, .kardia-fact-card:hover, .kardia-type-card:hover{ transform:none; } } /* ========================================== KARDIA UNIVERSAL CARD HOVER LIFT ========================================== */ .kardia-card, .kardia-fact-card, .kardia-type-card, .kardia-table-card, .kardia-faq-card{ transition: transform .25s ease, box-shadow .25s ease; will-change:transform; } .kardia-card:hover, .kardia-fact-card:hover, .kardia-type-card:hover, .kardia-table-card:hover, .kardia-faq-card:hover{ transform:translateY(-5px); box-shadow: 0 15px 35px rgba(37,99,235,.12); } /* ========================================== KARDIA MOBILE MENU ABOVE SLIDER - FIX ========================================== */ @media(max-width:768px){ /* Keep header above slider */ .site-header, #masthead, .main-header, .navbar-area{ position:relative; z-index:9999; } /* Mobile dropdown menu */ .navbar-collapse, .mobile-menu, .main-navigation ul.sub-menu{ z-index:99999 !important; } /* Slider stays behind */ .hero-slider, .swiper, .swiper-container, .owl-carousel{ z-index:1; } } /* ========================================================== KARDIA WORDPRESS SIDEBAR PROTECTION PATCH Added automatically ========================================================== */ .kardia-ui{ width:auto; max-width:100%; } .kardia-ui .kardia-container{ width:auto; max-width:1000px; margin-left:auto; margin-right:auto; } .kardia-ui img{ max-width:100%; height:auto; } .kardia-ui .kardia-card, .kardia-ui .kardia-widget, .kardia-ui section{ max-width:100%; } @media(max-width:768px){ .kardia-ui .kardia-container{ padding-left:15px; padding-right:15px; } }