/* ============================================================ EFA Family Shared Theme Bundle Extracted from openefa.com — used across goefa.com and designed to drop in to phase-2 re-themes of efadrive.com and any future EFASentry standalone site. ============================================================ */ :root { /* Family palette */ --efa-primary: #0d6efd; --efa-primary-dark: #0b5ed7; --efa-text: #212529; --efa-text-muted: #6c757d; --efa-warn: #fd7e14; --efa-danger: #dc3545; --efa-bg: #ffffff; --efa-bg-soft: #f8f9fa; --efa-border: #dee2e6; /* Hero gradient (matches openefa.com hero) */ --efa-hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Per-product accent — overridden in each product page */ --efa-accent: var(--efa-primary); --efa-accent-soft: rgba(13, 110, 253, 0.10); /* Spacing scale */ --efa-section-y: 5rem; --efa-section-y-sm: 3rem; /* Typography */ --efa-font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; } html, body { font-family: var(--efa-font); color: var(--efa-text); background: var(--efa-bg); } a { color: var(--efa-primary); text-decoration: none; } a:hover { color: var(--efa-primary-dark); text-decoration: underline; } /* ---------- Navbar ---------- */ .efa-navbar { background: var(--efa-bg); border-bottom: 1px solid var(--efa-border); padding: 0.75rem 0; } .efa-navbar .navbar-brand img { height: 72px; width: auto; } .efa-navbar .nav-link { color: var(--efa-text); font-weight: 500; } .efa-navbar .nav-link:hover, .efa-navbar .nav-link:focus { color: var(--efa-accent); } .efa-navbar .dropdown-menu { border-top: 3px solid var(--efa-accent); } .efa-navbar .dropdown-header { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; color: var(--efa-text-muted); } /* ---------- Hero ---------- */ .efa-hero { background: var(--efa-hero-gradient); color: #fff; padding: 6rem 0 5rem; } .efa-hero h1 { font-weight: 700; font-size: 2.75rem; line-height: 1.15; } .efa-hero p.lead { font-size: 1.25rem; opacity: 0.95; } .efa-hero .btn-primary { background: #fff; color: var(--efa-primary); border-color: #fff; font-weight: 600; } .efa-hero .btn-primary:hover { background: rgba(255,255,255,0.92); color: var(--efa-primary-dark); } .efa-hero .btn-outline-light { font-weight: 600; } /* ---------- Section spacing ---------- */ .efa-section { padding: var(--efa-section-y) 0; } .efa-section-sm { padding: var(--efa-section-y-sm) 0; } .efa-section-soft { background: var(--efa-bg-soft); } /* ---------- Feature cards ---------- */ .efa-feature-card { border: 1px solid var(--efa-border); border-radius: 0.75rem; padding: 1.5rem; height: 100%; transition: transform 0.15s ease, box-shadow 0.15s ease; background: #fff; } .efa-feature-card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.08); } .efa-feature-card .icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.5rem; background: var(--efa-accent-soft); color: var(--efa-accent); font-size: 1.5rem; margin-bottom: 1rem; } .efa-feature-card h3 { font-size: 1.15rem; font-weight: 600; } /* ---------- Product grid card ---------- */ .efa-product-card { border: 1px solid var(--efa-border); border-radius: 0.75rem; padding: 2rem 1.5rem; height: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; background: #fff; display: flex; flex-direction: column; } .efa-product-card:hover { border-color: var(--efa-accent); box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.06); } .efa-product-card .product-name { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.5rem; } .efa-product-card .product-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--efa-text-muted); margin-bottom: 0.75rem; } .efa-product-card .product-cta { margin-top: auto; padding-top: 1rem; } /* ---------- Trust strip / compliance badges ---------- */ .efa-trust-strip { background: var(--efa-bg-soft); border-top: 1px solid var(--efa-border); border-bottom: 1px solid var(--efa-border); padding: 2rem 0; } .efa-trust-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: #fff; border: 1px solid var(--efa-border); border-radius: 999px; padding: 0.4rem 0.9rem; margin: 0.25rem; font-size: 0.85rem; font-weight: 500; color: var(--efa-text); } .efa-trust-badge i { color: var(--efa-accent); } /* ---------- FAQ accordion ---------- */ .efa-faq .accordion-button { font-weight: 600; background: var(--efa-bg-soft); color: var(--efa-text); } .efa-faq .accordion-button:not(.collapsed) { background: var(--efa-accent-soft); color: var(--efa-accent); box-shadow: none; } .efa-faq .accordion-button:focus { box-shadow: 0 0 0 0.15rem var(--efa-accent-soft); } /* ---------- CTA strip ---------- */ .efa-cta-strip { background: var(--efa-accent); color: #fff; padding: 3rem 0; } .efa-cta-strip h2 { color: #fff; } .efa-cta-strip .btn-light { font-weight: 600; color: var(--efa-accent); } /* ---------- Sibling-product strip (used on intro pages) ---------- */ .efa-sibling-strip { padding: var(--efa-section-y-sm) 0; } .efa-sibling-card { border: 1px solid var(--efa-border); border-radius: 0.5rem; padding: 1rem 1.25rem; background: #fff; display: flex; align-items: center; gap: 0.75rem; } .efa-sibling-card:hover { border-color: var(--efa-accent); text-decoration: none; } .efa-sibling-card .name { font-weight: 600; color: var(--efa-text); } .efa-sibling-card .blurb { font-size: 0.85rem; color: var(--efa-text-muted); } /* ---------- Footer ---------- */ .efa-footer { background: #1a1d23; color: #c8ccd1; padding: 3rem 0 2rem; font-size: 0.9rem; } .efa-footer a { color: #fff; } .efa-footer a:hover { color: var(--efa-accent); } .efa-footer h5 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; } .efa-footer .copyright { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #2a2e36; font-size: 0.8rem; color: #8a8f96; } /* ---------- Contact form ---------- */ .efa-contact-form .form-label { font-weight: 500; } .efa-contact-form .form-control:focus, .efa-contact-form .form-select:focus { border-color: var(--efa-accent); box-shadow: 0 0 0 0.2rem var(--efa-accent-soft); } .efa-contact-form .honeypot { position: absolute; left: -9999px; } /* ---------- Responsive ---------- */ @media (max-width: 768px) { .efa-hero { padding: 4rem 0 3rem; } .efa-hero h1 { font-size: 2rem; } :root { --efa-section-y: 3rem; } }