/** * FrigoSmart – Clean, professional design. * This file loads LAST to override the theme. Do not move it earlier in . */ /* ========== Design tokens ========== */ :root { --pro-primary: #0d9488; --pro-primary-hover: #0f766e; --pro-primary-light: #ccfbf1; --pro-heading: #0f172a; --pro-body: #475569; --pro-muted: #64748b; --pro-border: #e2e8f0; --pro-bg: #ffffff; --pro-bg-alt: #f1f5f9; --pro-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --pro-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --pro-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --pro-radius: 12px; --pro-radius-lg: 16px; --pro-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --pro-read-width: 65ch; --pro-container: 1100px; } /* ========== Force layout: contained width ========== */ #main-content .container { max-width: var(--pro-container) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; } @media (min-width: 576px) { #main-content .container { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } } /* ========== Base typography & readability ========== */ body { font-size: 1rem; line-height: 1.6; } /* Limit line length for easier reading */ .description-layout-one p, .soft-details-info p, .faq-style-one .accordion-body, .feature-style-one p { max-width: var(--pro-read-width); } /* ========== Section headings (clear structure) ========== */ .section-heading { margin-bottom: 2.5rem !important; } .section-heading__label { font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--pro-primary) !important; margin-bottom: 0.5rem !important; } .section-heading__title { font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important; font-weight: 700 !important; color: var(--pro-heading) !important; line-height: 1.25 !important; margin-bottom: 0.5rem !important; } .section-heading__sub { font-size: 1.0625rem !important; color: var(--pro-muted) !important; max-width: 42ch !important; line-height: 1.5 !important; } /* ========== Base typography ========== */ body { font-family: var(--pro-font) !important; color: var(--pro-body) !important; background-color: #fafbfc !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .title, .site-heading .title, .description-layout-one h3, .description-layout-one h4, .soft-details-style-one h2, .soft-details-style-one h4 { color: var(--pro-heading) !important; font-family: var(--pro-font) !important; font-weight: 600 !important; letter-spacing: -0.02em; } p, .description-layout-one p, .soft-details-info p, .feature-style-one p { color: var(--pro-body) !important; line-height: 1.65 !important; } /* ========== Hero / Banner – high specificity over theme ========== */ #hero.banner-style-one-area, .banner-style-one-area { position: relative !important; background-size: cover !important; background-position: center !important; min-height: 85vh !important; display: flex !important; align-items: center !important; } .banner-style-one-area::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(6, 78, 59, 0.82) 100%) !important; z-index: 0 !important; } .banner-style-one-area .banner-style-one, .banner-style-one-area .container, .banner-style-one-area .content, .banner-style-one-area .row { position: relative !important; z-index: 1 !important; } .banner-style-one .content { padding-top: 2rem !important; padding-bottom: 3rem !important; } @media (min-width: 768px) { .banner-style-one .content { padding-top: 4rem !important; padding-bottom: 5rem !important; } } .banner-style-one h2.title-improved { font-size: clamp(1.875rem, 5vw, 3.25rem) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.03em !important; color: #fff !important; text-shadow: none !important; margin-bottom: 1rem !important; padding-right: 0 !important; } .banner-style-one p.paragraph-improved { font-size: 1.125rem !important; line-height: 1.65 !important; color: rgba(255, 255, 255, 0.95) !important; text-shadow: none !important; max-width: 28em !important; margin-bottom: 1.75rem !important; padding-right: 0 !important; } .banner-buttons .btn-outline-light { background: #fff !important; border: 2px solid #fff !important; color: var(--pro-primary) !important; font-weight: 600 !important; padding: 1rem 2rem !important; border-radius: 10px !important; font-family: var(--pro-font) !important; font-size: 1rem !important; transition: transform 0.2s, box-shadow 0.2s !important; } .banner-buttons .btn-outline-light:hover { background: var(--pro-primary-light) !important; color: var(--pro-primary-hover) !important; border-color: #fff !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important; } .banner-style-one .thumb { margin-bottom: 0 !important; } @media (max-width: 991px) { .banner-style-one .thumb { margin-top: 2rem !important; } } /* ========== Section labels and headings ========== */ .sub-title, .description-layout-one .sub-title, .soft-details-style-one .sub-title { font-size: 0.8125rem !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--pro-primary) !important; margin-bottom: 0.5rem !important; } .description-layout-one h3, .soft-details-style-one .title { font-size: clamp(1.5rem, 2.5vw, 2rem) !important; font-weight: 700 !important; line-height: 1.3 !important; margin-bottom: 1rem !important; } /* ========== Feature cards ========== */ #features { background: var(--pro-bg-alt) !important; background-image: none !important; } #features .feature-style-one p { max-width: none; } .feature-style-one { background: var(--pro-bg) !important; border: 1px solid var(--pro-border) !important; border-radius: var(--pro-radius-lg) !important; box-shadow: var(--pro-shadow) !important; padding: 2rem 1.75rem !important; transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s; } .feature-style-one:hover { box-shadow: var(--pro-shadow-lg) !important; border-color: var(--pro-primary-light) !important; transform: translateY(-4px); } .feature-style-one.active { border-color: var(--pro-primary) !important; box-shadow: 0 0 0 1px var(--pro-primary), var(--pro-shadow-md) !important; } .feature-style-one.active::after { display: none !important; } .feature-style-one .bg { display: none !important; } .feature-style-one .icon i, .feature-style-one .icon .flaticon-qr-code, .feature-style-one .icon .flaticon-financial-report, .feature-style-one .icon .flaticon-invoice { color: var(--pro-primary) !important; font-size: 2.25rem !important; margin-bottom: 1rem !important; } .feature-style-one h4 { font-size: 1.25rem !important; font-weight: 600 !important; color: var(--pro-heading) !important; margin-bottom: 0.5rem !important; } .feature-style-one p { font-size: 0.9375rem !important; margin-top: 0.5rem !important; } /* Feature table */ .feature-style-one .table { font-size: 0.8125rem; margin-top: 1rem; } .feature-style-one .table thead th { background: var(--pro-bg-alt) !important; color: var(--pro-heading) !important; font-weight: 600 !important; border-color: var(--pro-border) !important; padding: 0.75rem !important; } .feature-style-one .table td { padding: 0.65rem 0.75rem !important; border-color: var(--pro-border) !important; } /* ========== Brand / Sensors section ========== */ .brand-style-one-items { background: linear-gradient(160deg, var(--pro-heading) 0%, #1e293b 100%) !important; border-radius: var(--pro-radius-lg) !important; padding: 3rem 2rem !important; } .brand-style-one h2 { color: #fff !important; font-size: clamp(1.25rem, 2vw, 1.5rem) !important; font-weight: 600 !important; } .brand-style-one h2 strong { color: var(--pro-primary-light) !important; } /* ========== Software details ========== */ .software-details-area { background: var(--pro-bg) !important; } .soft-details-item { background: var(--pro-bg) !important; } .soft-details-item h4 { font-size: 1.25rem !important; font-weight: 600 !important; color: var(--pro-heading) !important; } .soft-details-item .list-circle li { color: var(--pro-body) !important; } .circle-process .circle { border-color: var(--pro-primary) !important; } .circle-process .circle strong, .progressbar h4 { color: var(--pro-heading) !important; } /* ========== Current user / Pain point section ========== */ .current-user-area { background: var(--pro-bg-alt) !important; } /* ========== FAQ ========== */ .faq-area { background: var(--pro-bg-alt) !important; background-image: none !important; } .faq-style-one .shape-arro { display: none !important; } .faq-style-one { background: var(--pro-bg) !important; border: 1px solid var(--pro-border) !important; border-radius: var(--pro-radius-lg) !important; padding: 2.5rem !important; box-shadow: var(--pro-shadow) !important; } .faq-style-one .title, .faq-style-one #faq-heading { font-size: 1.5rem !important; font-weight: 700 !important; color: var(--pro-heading) !important; } .faq-style-one .accordion-button { background: var(--pro-bg) !important; color: var(--pro-heading) !important; font-weight: 600 !important; border: none !important; border-bottom: 1px solid var(--pro-border) !important; padding: 1rem 0 !important; } .faq-style-one .accordion-button:not(.collapsed) { color: var(--pro-primary) !important; box-shadow: none !important; } .faq-style-one .accordion-button:focus { box-shadow: none !important; border-color: var(--pro-border) !important; } .faq-style-one .accordion-body { color: var(--pro-body) !important; padding-top: 0.75rem !important; } .faq-style-one .accordion-body p { max-width: var(--pro-read-width) !important; } .faq-tab-navs .nav-link { font-weight: 500 !important; color: var(--pro-body) !important; } .faq-tab-navs .nav-link.active { background: var(--pro-primary) !important; color: #fff !important; border-color: var(--pro-primary) !important; } /* ========== Footer ========== */ footer#contact { background: var(--pro-heading) !important; border-top: 1px solid rgba(255, 255, 255, 0.08); } footer#contact .widget-title { font-size: 0.875rem !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.9) !important; margin-bottom: 1rem !important; } footer#contact .footer-item.contact li, footer#contact .footer-item.contact a { color: rgba(255, 255, 255, 0.75) !important; } footer#contact .footer-item.contact a:hover { color: #fff !important; } footer#contact .footer-social li a { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; transition: background 0.2s; } footer#contact .footer-social li a:hover { background: var(--pro-primary) !important; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding-top: 1rem !important; padding-bottom: 1rem !important; } .footer-bottom p { font-size: 0.8125rem !important; color: rgba(255, 255, 255, 0.5) !important; } .footer-bottom a { color: rgba(255, 255, 255, 0.7) !important; } /* ========== Navbar ========== */ .navbar.white.no-background .navbar-brand .logo-display, .navbar .lang-toggle { transition: opacity 0.2s; } .navbar .lang-toggle { background: var(--pro-primary) !important; border-color: var(--pro-primary) !important; font-weight: 600 !important; } .navbar .lang-toggle:hover { background: var(--pro-primary-hover) !important; border-color: var(--pro-primary-hover) !important; } /* ========== Spacing and layout ========== */ #main-content .default-padding { padding-top: 4rem !important; padding-bottom: 4rem !important; } @media (min-width: 992px) { #main-content .default-padding { padding-top: 5rem !important; padding-bottom: 5rem !important; } } @media (max-width: 767px) { .banner-style-one .content { padding-top: 2rem !important; padding-bottom: 2.5rem !important; } #main-content .default-padding { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .faq-style-one { padding: 1.5rem !important; } .banner-style-one-area { min-height: auto !important; } } /* ========== List styling ========== */ .list-check li, .description-layout-one .list-check li { color: var(--pro-body) !important; margin-bottom: 0.5rem !important; } .list-check li i, .list-check .fa-thermometer-half, .list-check .fa-bell, .list-check .fa-mobile-alt, .list-check .fa-file-invoice-dollar { color: var(--pro-primary) !important; margin-right: 0.5rem !important; } .list-circle li { color: var(--pro-body) !important; } .list-circle li::before { color: var(--pro-primary) !important; } /* Description / About block – clear and scannable */ .description-layout-one { max-width: 36em; } .description-layout-one h3 { margin-top: 0 !important; } .description-layout-one p + p { margin-top: 1rem !important; } .description-layout-one .list-check { margin-top: 1.5rem !important; } /* ========== Buttons (global) ========== */ .btn-primary, a.btn-primary { background: var(--pro-primary) !important; border-color: var(--pro-primary) !important; font-weight: 600 !important; font-family: var(--pro-font) !important; } .btn-primary:hover, a.btn-primary:hover { background: var(--pro-primary-hover) !important; border-color: var(--pro-primary-hover) !important; }