/** Shopify CDN: Minification failed Line 28:0 All "@import" rules must come first **/ /* ===== CALIVOO GLOBAL CUSTOM CSS ===== */ :root { --cv-navy: #0B2244; --cv-navy2: #163570; --cv-sky: #EBF4FD; --cv-teal: #157A60; --cv-teal2: #E5F4EF; --cv-amber: #D97706; --cv-amber2: #FEF3C7; --cv-g50: #F9FAFB; --cv-g100: #F3F4F6; --cv-g200: #E5E7EB; --cv-g400: #9CA3AF; --cv-g600: #4B5563; --cv-g800: #1F2937; --cv-serif: 'DM Serif Display', Georgia, serif; --cv-sans: 'DM Sans', system-ui, sans-serif; --cv-r: 12px; --cv-rl: 20px; } /* Google Font import - add to theme.liquid instead if preferred */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@300;400;500;600&display=swap'); /* Shared section styles */ .cv-section { padding: 64px 32px; } .cv-inner { max-width: 1100px; margin: 0 auto; } .cv-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cv-teal); margin-bottom: 10px; display: block; } .cv-title { font-family: var(--cv-serif); font-size: 36px; color: var(--cv-navy); line-height: 1.15; margin-bottom: 12px; } .cv-sub { font-size: 16px; color: var(--cv-g600); max-width: 560px; line-height: 1.65; } /* ① CERT BAR */ .cv-cert-bar { background: var(--cv-sky); border-bottom: 1px solid #BFDBFE; padding: 16px 32px; } .cv-cert-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; } .cv-cert-item { display: flex; align-items: center; gap: 10px; } .cv-cert-badge { width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--cv-g200); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: var(--cv-navy); box-shadow: 0 2px 6px rgba(0,0,0,.07); text-align: center; line-height: 1.2; flex-shrink: 0; } .cv-cert-text strong { display: block; font-size: 13px; color: var(--cv-g800); font-weight: 600; } .cv-cert-text span { font-size: 11px; color: var(--cv-g400); } .cv-cert-div { width: 1px; height: 36px; background: var(--cv-g200); } /* ② SHIPPING NOTE */ .cv-shipping-note { font-size: 13px; color: var(--cv-g600); background: var(--cv-sky); padding: 10px 14px; border-radius: 8px; border-left: 3px solid #3B82F6; margin: 12px 0; } /* ③ TRUST BADGES */ .cv-trust-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; } .cv-tbadge { display: flex; align-items: center; gap: 6px; background: var(--cv-g50); border: 1px solid var(--cv-g200); padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--cv-g800); } /* ④ WARRANTY BOX (small, in buy area) */ .cv-warranty-box { background: linear-gradient(135deg, #0B2244, #163A6B); color: #fff; border-radius: var(--cv-r); padding: 18px 20px; display: flex; gap: 16px; align-items: flex-start; margin: 12px 0; } .cv-warranty-circle { width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; } .cv-warranty-circle .cv-wc-num { font-family: var(--cv-serif); font-size: 18px; color: #fff; line-height: 1; } .cv-warranty-circle .cv-wc-label { font-size: 8px; color: rgba(255,255,255,.7); text-align: center; line-height: 1.2; } .cv-warranty-text h4 { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; } .cv-warranty-text p { font-size: 12px; color: rgba(255,255,255,.75); line-height: 1.5; } /* ⑤ INCLUDES BOX */ .cv-includes-box { background: var(--cv-g50); border: 1px solid var(--cv-g200); border-radius: var(--cv-r); padding: 16px 18px; margin: 12px 0; } .cv-includes-box h4 { font-size: 13px; font-weight: 600; color: var(--cv-navy); margin-bottom: 10px; } .cv-includes-list { list-style: none; display: flex; flex-direction: column; gap: 7px; padding: 0; } .cv-includes-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cv-g600); } .cv-includes-list li::before { content: "✓"; color: var(--cv-teal); font-weight: 700; flex-shrink: 0; } /* ⑥ MARKERS GRID */ .cv-markers-section { padding: 64px 32px; } .cv-markers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; } .cv-marker-card { background: #fff; border: 1px solid var(--cv-g200); border-radius: var(--cv-r); padding: 22px 16px; text-align: center; transition: .2s; } .cv-marker-card:hover { box-shadow: 0 4px 20px rgba(11,34,68,.1); border-color: #93C5FD; } .cv-marker-ico { width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; } .cv-marker-code { font-family: var(--cv-serif); font-size: 20px; color: var(--cv-navy); margin-bottom: 4px; } .cv-marker-name { font-size: 12px; color: var(--cv-g600); margin-bottom: 8px; font-weight: 500; } .cv-marker-range-label { font-size: 10px; color: var(--cv-g400); margin-bottom: 2px; } .cv-marker-range { font-size: 10px; color: var(--cv-g400); background: var(--cv-g100); padding: 3px 8px; border-radius: 50px; display: inline-block; } .cv-range-explain { margin-top: 20px; background: var(--cv-sky); border-radius: var(--cv-r); padding: 16px 20px; font-size: 13px; color: var(--cv-g600); } .cv-range-explain strong { color: var(--cv-navy); } /* ⑦ STEPS */ .cv-steps-section { background: var(--cv-g50); padding: 64px 32px; } .cv-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 44px; } .cv-step-c { background: #fff; padding: 28px 22px; position: relative; border-top: 3px solid var(--cv-g200); } .cv-step-c.active { border-top-color: var(--cv-teal); } .cv-step-num { width: 36px; height: 36px; background: var(--cv-navy); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--cv-serif); font-size: 16px; margin-bottom: 16px; } .cv-step-c.active .cv-step-num { background: var(--cv-teal); } .cv-step-c h3 { font-size: 15px; font-weight: 600; color: var(--cv-navy); margin-bottom: 8px; } .cv-step-c p { font-size: 13px; color: var(--cv-g600); line-height: 1.6; } .cv-step-arrow { position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background: var(--cv-navy); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 2; } .cv-tip-box { text-align: center; margin-top: 24px; font-size: 13px; color: var(--cv-g600); } /* ⑧ FEATURES + SPECS */ .cv-features-section { padding: 64px 32px; } .cv-features-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-top: 44px; } .cv-feat-list { display: flex; flex-direction: column; gap: 16px; } .cv-feat-card { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--cv-g200); border-radius: var(--cv-r); transition: .2s; } .cv-feat-card:hover { box-shadow: 0 4px 16px rgba(11,34,68,.08); } .cv-feat-ico { width: 44px; height: 44px; background: var(--cv-sky); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .cv-feat-card h3 { font-size: 14px; font-weight: 600; color: var(--cv-navy); margin-bottom: 5px; } .cv-feat-card p { font-size: 13px; color: var(--cv-g600); line-height: 1.6; } .cv-spec-panel { background: var(--cv-navy); border-radius: var(--cv-rl); padding: 36px; color: #fff; } .cv-spec-panel .cv-label { color: #6EE7B7; } .cv-spec-panel h3 { font-family: var(--cv-serif); font-size: 22px; color: #fff; margin-bottom: 20px; } .cv-spec-table { width: 100%; border-collapse: collapse; } .cv-spec-table td { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 13px; } .cv-spec-table td:first-child { color: rgba(255,255,255,.6); } .cv-spec-table td:last-child { text-align: right; font-weight: 500; } /* ⑨ MANUFACTURER */ .cv-mfr-section { background: var(--cv-g50); padding: 64px 32px; } .cv-mfr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 44px; } .cv-mfr-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cv-mfr-stat { background: #fff; border: 1px solid var(--cv-g200); border-radius: var(--cv-r); padding: 20px; text-align: center; } .cv-mfr-stat .cv-big { font-family: var(--cv-serif); font-size: 28px; color: var(--cv-navy); } .cv-mfr-stat p { font-size: 12px; color: var(--cv-g400); margin-top: 4px; } .cv-mfr-awards { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; } .cv-mfr-award { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid var(--cv-g200); border-radius: 10px; padding: 14px 16px; } .cv-award-ico { font-size: 22px; flex-shrink: 0; margin-top: 2px; } .cv-award-text strong { display: block; font-size: 13px; font-weight: 600; color: var(--cv-navy); margin-bottom: 2px; } .cv-award-text span { font-size: 12px; color: var(--cv-g400); } /* ⑩ WARRANTY SECTION (large) */ .cv-warranty-section { background: var(--cv-teal); color: #fff; padding: 64px 32px; } .cv-warranty-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } .cv-w-badge { width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 28px; } .cv-w-badge .cv-wb-num { font-family: var(--cv-serif); font-size: 40px; color: #fff; line-height: 1; } .cv-w-badge .cv-wb-label { font-size: 11px; color: rgba(255,255,255,.8); } .cv-warranty-section h2 { font-family: var(--cv-serif); font-size: 36px; color: #fff; margin-bottom: 14px; } .cv-warranty-section p { font-size: 15px; color: rgba(255,255,255,.85); line-height: 1.7; margin-bottom: 20px; } .cv-w-points { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; } .cv-w-points li { display: flex; gap: 10px; font-size: 14px; color: rgba(255,255,255,.9); } .cv-w-points li::before { content: "✓"; color: #6EE7B7; font-weight: 700; flex-shrink: 0; } .cv-w-box { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--cv-r); padding: 20px 22px; margin-top: 28px; } .cv-w-box h4 { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 12px; } .cv-inbox-list { list-style: none; display: flex; flex-direction: column; gap: 9px; padding: 0; } .cv-inbox-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.85); } .cv-inbox-list li::before { content: "✓"; color: #6EE7B7; font-weight: 700; } .cv-note-box { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: var(--cv-r); padding: 16px 18px; margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.6; } /* ⑪ COMPLIANCE */ .cv-compliance-section { background: var(--cv-g50); padding: 64px 32px; } .cv-comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .cv-comp-card { background: #fff; border: 1px solid var(--cv-g200); border-radius: var(--cv-r); padding: 24px; } .cv-comp-tag { display: inline-block; background: var(--cv-sky); color: var(--cv-navy); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 50px; margin-bottom: 12px; } .cv-comp-card h3 { font-size: 14px; font-weight: 600; color: var(--cv-navy); margin-bottom: 8px; } .cv-comp-card p { font-size: 13px; color: var(--cv-g600); line-height: 1.6; } .cv-disclaimer-box { margin-top: 28px; padding: 18px 22px; background: var(--cv-amber2); border: 1px solid #FCD34D; border-radius: var(--cv-r); font-size: 12px; color: #78350F; line-height: 1.7; } /* ⑫ SHIPPING */ .cv-shipping-section { padding: 64px 32px; background: var(--cv-g50); } .cv-shipping-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; } .cv-ship-card { text-align: center; padding: 24px 16px; background: #fff; border: 1px solid var(--cv-g200); border-radius: var(--cv-r); } .cv-ship-flag { font-size: 30px; margin-bottom: 10px; } .cv-ship-card h3 { font-size: 13px; font-weight: 600; color: var(--cv-navy); margin-bottom: 5px; } .cv-ship-card p { font-size: 12px; color: var(--cv-g400); line-height: 1.5; } .cv-ship-free { font-size: 11px; color: var(--cv-teal); font-weight: 600; margin-top: 5px; } .cv-shipping-note-small { text-align: center; font-size: 13px; color: var(--cv-g400); margin-top: 20px; } /* ⑬ FAQ */ .cv-faq-section { background: var(--cv-g50); padding: 64px 32px; } .cv-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; } .cv-faq-item { background: #fff; border: 1px solid var(--cv-g200); border-radius: var(--cv-r); padding: 20px 22px; } .cv-faq-item h3 { font-size: 14px; font-weight: 600; color: var(--cv-navy); margin-bottom: 8px; display: flex; gap: 8px; align-items: flex-start; } .cv-faq-q { flex-shrink: 0; width: 20px; height: 20px; background: var(--cv-sky); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--cv-navy); margin-top: 1px; } .cv-faq-item p { font-size: 13px; color: var(--cv-g600); line-height: 1.65; margin-left: 28px; } /* ⑭ FINAL BUY SECTION */ .cv-buy-section { background: var(--cv-navy); padding: 64px 32px; } .cv-buy-inner { max-width: 860px; margin: 0 auto; text-align: center; } .cv-buy-section h2 { font-family: var(--cv-serif); font-size: 40px; color: #fff; margin-bottom: 12px; } .cv-buy-section > .cv-buy-inner > p { font-size: 16px; color: rgba(255,255,255,.7); margin-bottom: 36px; } .cv-final-card { background: #fff; border-radius: var(--cv-rl); padding: 36px; text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; } .cv-fc-orig { font-size: 14px; color: var(--cv-g400); text-decoration: line-through; } .cv-fc-current { font-family: var(--cv-serif); font-size: 48px; color: var(--cv-navy); line-height: 1; } .cv-fc-save { display: inline-block; background: #DCFCE7; color: #166534; padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 600; margin-top: 8px; } .cv-fc-list { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 8px; padding: 0; } .cv-fc-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cv-g600); } .cv-fc-list li::before { content: "✓"; color: var(--cv-teal); font-weight: 700; } .cv-atc-final { display: block; width: 100%; background: var(--cv-teal); color: #fff; padding: 16px; border-radius: 50px; font-size: 16px; font-weight: 600; border: none; cursor: pointer; text-align: center; margin-bottom: 12px; transition: .2s; } .cv-atc-final:hover { background: #0F6E56; } .cv-trust-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--cv-g400); justify-content: center; margin-top: 10px; } .cv-trust-row span { display: flex; align-items: center; gap: 4px; } /* ===== RESPONSIVE ===== */ @media (max-width: 900px) { .cv-markers-grid { grid-template-columns: repeat(3, 1fr); } .cv-steps-grid { grid-template-columns: 1fr 1fr; } .cv-features-2col { grid-template-columns: 1fr; } .cv-warranty-2col { grid-template-columns: 1fr; gap: 36px; } .cv-comp-grid { grid-template-columns: 1fr; } .cv-faq-grid { grid-template-columns: 1fr; } .cv-final-card { grid-template-columns: 1fr; } .cv-mfr-grid { grid-template-columns: 1fr; } .cv-cert-div { display: none; } .cv-section, .cv-markers-section, .cv-steps-section, .cv-features-section, .cv-mfr-section, .cv-warranty-section, .cv-compliance-section, .cv-shipping-section, .cv-faq-section, .cv-buy-section { padding: 48px 20px; } .cv-shipping-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .cv-markers-grid { grid-template-columns: 1fr 1fr; } .cv-shipping-grid { grid-template-columns: 1fr; } }