@charset "UTF-8";@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");/* * emic.ai CSS Framework v3.2 * Author:Your Name/Company * Description:A minimal CSS framework for emic.ai design blocks. * - Fixed img-as-icon scaling issue in side-by-side blocks.
*/
/* ================================================= * 1. Core &Variables * ================================================= */
.emic-ai{all:initial;display:block;--c-primary:#09ba65;--c-primary-hover:#52d093;--c-secondary:#283236;--c-secondary-hover:#494949;--c-text-base:#283236;--c-text-light:#5f5f5f;--c-text-on-primary:#ffffff;--c-bg-light:#f2f3f5;--c-bg-white:#ffffff;--c-border:#e5e7eb;--c-warning:#f59e0b;--space-1:0.25rem;--space-2:0.5rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 4px 6px rgba(0, 0, 0, 0.05);--shadow-md:0 10px 15px rgba(0, 0, 0, 0.1);line-height:1.7;color:var(--c-text-base)}.emic-ai h1, .emic-ai h2, .emic-ai h3, .emic-ai h4, .emic-ai h5, .emic-ai h6, .emic-ai p, .emic-ai ul, .emic-ai li, .emic-ai figure, .emic-ai figcaption, .emic-ai blockquote{margin:0;padding:0;line-height:1.7;font-weight:normal}.emic-ai h1, .emic-ai h2, .emic-ai h3, .emic-ai h4{font-weight:700}.emic-ai a{text-decoration:none;color:var(--c-primary)}.emic-ai a:hover{text-decoration:underline}.emic-ai ul, .emic-ai ol{margin-bottom:var(--space-4);padding-left:1.5em}.emic-ai strong{font-weight:bold}.emic-ai img{max-width:100%;height:auto;display:block}.emic-ai p{margin-bottom:var(--space-4)}.emic-ai p:last-child{margin-bottom:0}.emic-ai h3{font-size:1.5rem;margin-top:var(--space-8);margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:2px solid var(--c-border)}/* ================================================= * 2. Utility Classes * ================================================= */
.emic-ai .mb-2{margin-bottom:var(--space-2)}.emic-ai .mb-4{margin-bottom:var(--space-4)}.emic-ai .mb-6{margin-bottom:var(--space-6)}.emic-ai .mb-8{margin-bottom:var(--space-8)}.emic-ai .mt-auto{margin-top:auto}.emic-ai .text-center{text-align:center}.emic-ai .text-light{color:var(--c-text-light)}.emic-ai .bg-light{background-color:var(--c-bg-light)}.emic-ai .bg-white{background-color:var(--c-bg-white)}/* ================================================= * 3. Layout Components * ================================================= */
.emic-ai .container{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:var(--space-8);padding-right:var(--space-8)}.emic-ai .section{padding-top:var(--space-12);padding-bottom:var(--space-12)}.emic-ai .section-header{text-align:center;margin-bottom:var(--space-8)}.emic-ai .section-header .heading{font-size:2.25rem;margin-bottom:var(--space-2)}.emic-ai .section-header .subheading{font-size:1.1rem;color:var(--c-text-light);max-width:600px;margin:0 auto}.emic-ai .grid{display:grid;gap:var(--space-8);align-items:stretch}.emic-ai .grid-cols-1{grid-template-columns:1fr}.emic-ai .grid-cols-2{grid-template-columns:repeat(2, 1fr)}.emic-ai .grid-cols-3{grid-template-columns:repeat(3, 1fr)}.emic-ai .grid-cols-4{grid-template-columns:repeat(4, 1fr)}.emic-ai .content-narrow{max-width:800px;margin-left:auto;margin-right:auto}/* ================================================= * 4. Core Components * ================================================= */
.emic-ai .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);border:2px solid transparent;border-radius:var(--radius-lg);font-size:1.1rem;font-weight:600;text-align:center;text-decoration:none;cursor:pointer;transition:all 0.2s ease-in-out;box-shadow:var(--shadow-sm);box-sizing:border-box}.emic-ai .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.emic-ai .btn-primary{background-color:var(--c-primary);color:var(--c-text-on-primary)}.emic-ai .btn-primary:hover{background-color:var(--c-primary-hover);color:var(--c-text-on-primary)}.emic-ai .btn-secondary{background-color:var(--c-secondary);color:var(--c-text-on-primary)}.emic-ai .btn-secondary:hover{background-color:var(--c-secondary-hover);color:var(--c-text-on-primary)}.emic-ai .btn i{font-size:1.2em}.emic-ai .btn-full{width:100%}.emic-ai .icon-wrapper{display:inline-flex;justify-content:center;align-items:center;color:var(--c-primary)}.emic-ai .icon-wrapper.icon-xl i{font-size:64px}.emic-ai .icon-wrapper.icon-lg i{font-size:48px}.emic-ai .icon-wrapper.icon-md i{font-size:32px}.emic-ai .icon-wrapper.icon-sm i{font-size:24px}/* ================================================= * 5. Design Blocks * ================================================= */ .emic-ai .cta-block{padding:var(--space-12) var(--space-8);text-align:center}.emic-ai .cta-block.cta-hero{padding:var(--space-16) var(--space-8);background-size:cover;background-position:center;color:var(--c-text-on-primary);position:relative}.emic-ai .cta-block.cta-hero::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0, 0, 0, 0.5)}.emic-ai .cta-block .cta-content{position:relative;z-index:1}.emic-ai .cta-block .heading{font-size:3rem;font-weight:800;margin-bottom:var(--space-4);border-bottom:none;margin-top:0}.emic-ai .cta-block.cta-hero .heading{color:var(--c-text-on-primary) !important}.emic-ai .cta-block.cta-simple .heading{font-size:2.25rem;color:var(--c-text-base)}.emic-ai .cta-block .subheading{font-size:1.25rem;max-width:700px;margin:0 auto var(--space-6);opacity:0.9}.emic-ai .cta-block.cta-simple .subheading{color:var(--c-text-light);opacity:1}.emic-ai .cta-block .cta-buttons{display:flex;justify-content:center;gap:var(--space-4);flex-wrap:wrap}.emic-ai .media-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}.emic-ai .media-content.ratio-icon{grid-template-columns:1fr 2fr}.emic-ai .media-content.media-right .media-object{order:1}.emic-ai .media-content.ratio-icon.media-right{grid-template-columns:2fr 1fr}.emic-ai .media-object img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.emic-ai .media-content.ratio-icon .media-object{display:grid;place-content:center}.emic-ai .media-content.ratio-icon .media-object img{border-radius:0;box-shadow:none;width:100%;max-width:192px;margin:0 auto}.emic-ai .media-body .heading{font-size:2rem;margin-bottom:var(--space-4);border-bottom:none;margin-top:0}.emic-ai .media-body .text{color:var(--c-text-light);margin-bottom:var(--space-6)}.emic-ai .card{background-color:var(--c-bg-white);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform 0.2s ease, box-shadow 0.2s ease;overflow:visible;position:relative}.emic-ai .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.emic-ai .card-content{padding:var(--space-8);flex-grow:1;display:flex;flex-direction:column}.emic-ai .card.card-featured{border-color:var(--c-primary)}.emic-ai .card.card-featured .card-content{margin-top:15px}.emic-ai .card .featured-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background-color:var(--c-primary);color:var(--c-text-on-primary);padding:var(--space-1) var(--space-4);border-radius:16px;font-size:0.8rem;font-weight:bold;z-index:1;border:4px solid var(--c-bg-white)}.emic-ai .bg-light .card .featured-badge{border-color:var(--c-bg-light)}.emic-ai .card-title{font-size:1.25rem;font-weight:600;color:var(--c-text-base);margin-bottom:var(--space-2);border-bottom:none;margin-top:0}.emic-ai .card-basic{text-align:center}.emic-ai .card-basic .card-icon{margin-bottom:var(--space-4)}.emic-ai .card-basic .card-text{color:var(--c-text-light);font-size:0.95rem;flex-grow:1;margin-bottom:var(--space-6)}.emic-ai .card-content >.btn:not(.btn-full){align-self:center}.emic-ai .card-blog .card-image{width:100%;height:200px;object-fit:cover;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.emic-ai .card-blog .card-meta{font-size:0.85rem;color:var(--c-text-light);margin-bottom:var(--space-4)}.emic-ai .card-blog .card-excerpt{font-size:0.95rem;flex-grow:1;margin-bottom:var(--space-6)}.emic-ai .card-profile{text-align:center}.emic-ai .card-profile .profile-image{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto var(--space-4);border:4px solid var(--c-bg-white);box-shadow:0 0 10px rgba(0, 0, 0, 0.1)}.emic-ai .card-profile .profile-name{font-size:1.25rem;font-weight:600}.emic-ai .card-profile .profile-title{color:var(--c-primary);font-weight:500;margin-bottom:var(--space-4)}.emic-ai .card-profile .profile-socials{display:flex;justify-content:center;gap:var(--space-4)}.emic-ai .card-profile .profile-socials a{font-size:1.2rem;color:var(--c-text-light);transition:color 0.2s}.emic-ai .card-profile .profile-socials a:hover{color:var(--c-primary)}.emic-ai .card-horizontal{flex-direction:row;align-items:center}.emic-ai .card-horizontal .card-image-wrapper{flex:0 0 40%}.emic-ai .card-horizontal .card-image{width:100%;height:100%;object-fit:cover}.emic-ai .card-pricing{text-align:center}.emic-ai .card-pricing .plan-name{font-size:1.25rem;font-weight:600;margin-bottom:var(--space-2)}.emic-ai .card-pricing .plan-description{color:var(--c-text-light);margin-bottom:var(--space-4);min-height:40px}.emic-ai .card-pricing .plan-price{font-size:2.5rem;font-weight:700;line-height:1;margin-bottom:var(--space-6)}.emic-ai .card-pricing .plan-price .period{font-size:1rem;font-weight:400;color:var(--c-text-light)}.emic-ai .card-pricing .plan-features{list-style:none;padding:0;text-align:left;flex-grow:1;margin-bottom:var(--space-6)}.emic-ai .card-pricing .plan-features li{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.emic-ai .card-pricing .plan-features i{color:var(--c-primary)}.emic-ai .icon-list{list-style:none;padding:0;margin-bottom:var(--space-4)}.emic-ai .icon-list li{display:flex;gap:var(--space-4);margin-bottom:var(--space-6)}.emic-ai .icon-list .list-icon{flex-shrink:0;color:var(--c-primary)}.emic-ai .icon-list .list-icon i{font-size:24px}.emic-ai .icon-list .list-content .title{font-size:1.15rem;font-weight:600;margin-bottom:var(--space-1);border-bottom:none;margin-top:0}.emic-ai .icon-list .list-content .text{color:var(--c-text-light);margin:0}.emic-ai .table-wrapper{overflow-x:auto;scrollbar-gutter:stable}.emic-ai .content-table{width:100%;border-collapse:collapse;margin-bottom:var(--space-8)}.emic-ai .content-table th, .emic-ai .content-table td{border:1px solid var(--c-border);padding:var(--space-4);text-align:left;vertical-align:top;white-space:nowrap}.emic-ai .content-table.allow-wrap th, .emic-ai .content-table.allow-wrap td{white-space:normal}.emic-ai .content-table thead th{background-color:var(--c-bg-light);font-weight:600}.emic-ai .content-table tbody tr:nth-child(even){background-color:var(--c-bg-light)}.emic-ai .faq-list{list-style:none;padding:0}.emic-ai .faq-item{border-bottom:1px solid var(--c-border);padding:var(--space-6) 0}.emic-ai .faq-item:first-child{padding-top:0}.emic-ai .faq-item:last-child{border-bottom:none;padding-bottom:0}.emic-ai .faq-question{font-size:1.1rem;font-weight:600;margin-bottom:var(--space-2);border-bottom:none;margin-top:0}.emic-ai .faq-answer{color:var(--c-text-light)}.emic-ai .faq-question::before{content:'Q. ';color:var(--c-primary);font-weight:bold;margin-right:var(--space-1)}.emic-ai .faq-answer::before{content:'A. ';font-weight:bold;margin-right:var(--space-1)}.emic-ai .timeline{position:relative;list-style:none;padding:0}.emic-ai .timeline::before{content:'';position:absolute;top:0;left:20px;height:100%;width:4px;background:var(--c-border)}.emic-ai .timeline-item{position:relative;padding-left:60px;margin-bottom:var(--space-8)}.emic-ai .timeline-item:last-child{margin-bottom:0}.emic-ai .timeline-item::before{content:'';position:absolute;left:8px;top:5px;width:28px;height:28px;border-radius:50%;background:var(--c-primary);border:4px solid var(--c-bg-light);z-index:1}.emic-ai .timeline-item .timeline-date{font-size:0.9rem;font-weight:600;color:var(--c-primary);margin-bottom:var(--space-1)}.emic-ai .timeline-item .timeline-title{font-size:1.2rem;font-weight:600;border-bottom:none;margin-top:0}.emic-ai .timeline-item .timeline-text{color:var(--c-text-light)}.emic-ai .timeline-item .timeline-content{background-color:var(--c-bg-white);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:var(--space-6);margin-top:var(--space-4)}.emic-ai .logo-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:var(--space-8);align-items:center}.emic-ai .logo-grid img{max-height:60px;width:auto;margin:0 auto;filter:grayscale(100%);opacity:0.6;transition:all 0.2s}.emic-ai .logo-grid img:hover{filter:grayscale(0%);opacity:1}.emic-ai .blockquote{background-color:var(--c-bg-light);border-left:4px solid var(--c-primary);padding:var(--space-6);border-radius:0 var(--radius-md) var(--radius-md) 0;margin-bottom:var(--space-6)}.emic-ai .blockquote p{margin-bottom:var(--space-4);font-style:italic}.emic-ai .blockquote footer{text-align:right;font-style:normal;font-weight:600;color:var(--c-text-light)}.emic-ai .blockquote footer::before{content:'— '}/* ================================================= * 6. Responsive Design * ================================================= */
@media (max-width:1024px){.emic-ai .grid-cols-2, .emic-ai .grid-cols-3, .emic-ai .grid-cols-4{grid-template-columns:1fr}.emic-ai .media-content, .emic-ai .media-content.ratio-icon, .emic-ai .media-content.ratio-icon.media-right{grid-template-columns:1fr;gap:var(--space-8)}.emic-ai .media-content.media-right .media-object{order:-1}.emic-ai .card-horizontal{flex-direction:column}.emic-ai .card-horizontal .card-image-wrapper{flex-basis:auto;width:100%;height:250px}}@media (max-width:767px){.emic-ai .container{padding-left:var(--space-4);padding-right:var(--space-4)}.emic-ai .section{padding-top:var(--space-8);padding-bottom:var(--space-8)}.emic-ai .section-header .heading{font-size:1.75rem}.emic-ai .cta-block .heading{font-size:2rem}.emic-ai .cta-block .cta-buttons{flex-direction:column;align-items:stretch}.emic-ai .cta-block .cta-buttons .btn{width:100%}.emic-ai .logo-grid{grid-template-columns:repeat(auto-fit, minmax(120px, 1fr))}}