/* ePASS embed: tokens + components scoped to .service-packages-page (no global reset) */ :root { --ds-primary: #002c6c; --ds-primary-rgb: 0, 44, 108; --ds-accent: #f26334; --ds-accent-rgb: 242, 99, 52; --ds-bg: #f5f6f8; --ds-surface: #fff; --ds-dark: #0d1b2e; --ds-dark-2: #142337; --ds-dark-3: #1a2c42; --ds-border: #dfe1e6; --ds-border-dark: #2c3e55; --ds-text: #0d1b2e; --ds-text-secondary: #505f79; --ds-text-muted: #97a0af; --ds-text-on-dark: #edf0f4; --ds-text-dim: #8993a4; --ds-link: #002c6c; --ds-link-hover: #f26334; --ds-success: #002c6c; --ds-success-bg: #e4ebf5; --ds-info-bg: #e4ebf5; --ds-font: "Inter", sans-serif; --ds-font-mono: "JetBrains Mono", monospace; --ds-radius-sm: 6px; --ds-radius: 8px; --ds-radius-lg: 12px; --ds-radius-full: 9999px; --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --ds-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06); --ds-transition: 0.2s ease; --ds-transition-slow: 0.3s ease; --ds-sp-2: 8px; --ds-sp-3: 12px; --ds-sp-6: 24px; --ds-sp-8: 32px; --ds-sp-12: 48px; --ds-sp-16: 64px; } .service-packages-page { font-family: var(--ds-font); line-height: 1.5; color: var(--ds-text); } .service-packages-page a.doc-link { color: var(--ds-text-secondary); text-decoration: underline; } .service-packages-page a.doc-link:hover { color: var(--ds-link-hover); } .service-packages-page .compare-toggle__btn { font-family: inherit; font-size: inherit; cursor: pointer; } /* Reset Bootstrap .tooltip (opacity:0) — glossary terms must stay visible */ .service-packages-page .tooltip { position: relative !important; display: inline !important; opacity: 1 !important; z-index: auto; margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; text-align: inherit; white-space: normal; word-break: normal; cursor: help; pointer-events: auto; } .service-packages-page .tooltip__badge { font-family: Awesome; font-style: normal; font-size: 16px; color: #479e96; padding: 0 0 0 4px; margin-left: 2px; vertical-align: middle; line-height: 1; display: inline-block; } /* Bubbles are portaled to by service-packages.js */ .tooltip__bubble { display: none; position: fixed; top: 0; left: 0; background: #333; color: #fff; font-size: 0.875rem; font-weight: normal; line-height: 1.4; padding: 0.5rem 0.75rem; border-radius: 0.25rem; white-space: normal; word-break: break-word; width: max-content; max-width: min(420px, calc(100vw - 2rem)); z-index: 10000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); pointer-events: none; text-align: left; font-style: normal; letter-spacing: 0; text-transform: none; } .tooltip__bubble.is-visible { display: block; } .tooltip__bubble::after { content: ""; position: absolute; left: var(--ds-arrow-left, 50%); transform: translateX(-50%); border: 6px solid transparent; } .tooltip__bubble--above::after { top: 100%; border-top-color: #333; } .tooltip__bubble--below::after { bottom: 100%; border-bottom-color: #333; } .service-packages-page .criteria-logos-cell { padding: 18px 12px !important; width: 240px; min-width: 240px; max-width: 240px; background: #eef0f8; text-align: center; vertical-align: middle; } /* Compare table: isolate from ePASS global typography / word-break */ .service-packages-page .compare-table { min-width: 1120px; table-layout: auto; } .service-packages-page .compare-table td, .service-packages-page .compare-table th { word-break: normal; overflow-wrap: normal; hyphens: manual; } .service-packages-page .compare-table .tooltip { display: inline; white-space: normal; } .service-packages-page .compare-table colgroup col:not(.compare-table__col) { min-width: 140px; } @media (max-width: 700px) { .service-packages-page .compare-table { min-width: 1100px; } .service-packages-page .criteria-logos-cell { width: 160px; min-width: 160px; max-width: 160px; } } .service-packages-page .criteria-logos-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; } .service-packages-page .epass-logo-text { font-weight: 800; font-size: 14px; color: #002c6c; } /* Sticky footer: main content grows, footer stays at bottom of viewport */ body.layout-sticky-footer { display: flex !important; flex-direction: column; min-height: 100vh; } body.layout-sticky-footer .layout-main { flex: 1 0 auto; } body.layout-sticky-footer .footer { flex-shrink: 0; margin-top: auto; } /* Less top gap under ePASS title bar */ .service-packages-page .hero { padding-top: var(--ds-sp-8); } .service-packages-page .compare-toggle { padding-bottom: var(--ds-sp-12); }