/* ========================================================================== kmc-ui.css — shared UI kit for the refreshed marketing pages. Used by: branch.html, packages.html Load order: bootstrap.css → product.css → kmc-ui.css (this file must win). Everything is namespaced `.kmc-*` so it never collides with Bootstrap or product.css. Pages that use it link the file directly in their own and pull in only the nav from head2.html: $("header").load("head2.html nav") ========================================================================== */ .kmc-page { --kmc-deep: #015570; --kmc-accent: #0aa5b5; --kmc-accent-dark: #08838f; --kmc-ink: #1f2d3d; --kmc-muted: #6b7785; --kmc-line: #e3eaef; --kmc-bg: #f4f7f9; background: var(--kmc-bg); color: var(--kmc-ink); } /* ---------------------------------------------------------------- Hero -- */ .kmc-hero { background: linear-gradient(135deg, #015570 0%, #04738c 55%, #0aa5b5 100%); color: #fff; padding: 56px 0 92px; } .kmc-hero h1 { font-family: 'robotobold', sans-serif; color: #fff; font-size: 2.5rem; margin: 0 0 10px; } .kmc-hero p { color: rgba(255, 255, 255, .88); font-size: 1.05rem; max-width: 640px; margin: 0; } .kmc-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700; color: rgba(255, 255, 255, .75); margin-bottom: 12px; } /* ------------------------------------------------------------- Toolbar -- */ /* White bar that floats over the bottom edge of the hero. */ .kmc-toolbar { background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(1, 85, 112, .13); padding: 16px; margin-top: -52px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } .kmc-search { position: relative; flex: 1 1 280px; min-width: 0; } .kmc-search > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--kmc-muted); pointer-events: none; } .kmc-search input { width: 100%; border: 1px solid var(--kmc-line); background: #fbfcfd; border-radius: 999px; padding: 12px 16px 12px 42px; font-size: .95rem; color: var(--kmc-ink); transition: border-color .15s ease, box-shadow .15s ease; } .kmc-search input:focus { outline: none; border-color: var(--kmc-accent); background: #fff; box-shadow: 0 0 0 3px rgba(10, 165, 181, .18); } .kmc-chips { display: flex; flex-wrap: wrap; gap: 8px; } .kmc-chip { border: 1px solid var(--kmc-line); background: #fff; color: var(--kmc-ink); border-radius: 999px; padding: 9px 18px; font-size: .88rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; } .kmc-chip:hover { border-color: var(--kmc-accent); color: var(--kmc-accent-dark); text-decoration: none; } .kmc-chip:focus-visible { outline: 3px solid rgba(10, 165, 181, .35); outline-offset: 2px; } .kmc-chip[aria-pressed="true"], .kmc-chip.is-active { background: var(--kmc-deep); border-color: var(--kmc-deep); color: #fff; } .kmc-count { color: var(--kmc-muted); font-size: .88rem; margin: 20px 0 0; } /* ------------------------------------------------------------ Sections -- */ .kmc-wrap { padding-bottom: 70px; } .kmc-section { margin-top: 34px; scroll-margin-top: 20px; } .kmc-section__title { font-family: 'robotobold', sans-serif; color: var(--kmc-deep); font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 14px; margin: 0 0 18px; } .kmc-section__title::after { content: ""; flex: 1; height: 1px; background: var(--kmc-line); } .kmc-section__lead { color: var(--kmc-muted); font-size: .95rem; margin: -8px 0 20px; } /* --------------------------------------------------------------- Cards -- */ .kmc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; } /* Short blurb cards: let each card size to its own content instead of stretching to the tallest card in the row. */ .kmc-grid--tight { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; align-items: start; } .kmc-card { background: #fff; border: 1px solid var(--kmc-line); border-radius: 14px; padding: 24px 22px 22px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .kmc-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--kmc-deep), var(--kmc-accent)); opacity: 0; transition: opacity .18s ease; } .kmc-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(1, 85, 112, .12); border-color: transparent; } .kmc-card:hover::before { opacity: 1; } .kmc-card__name { font-family: 'robotobold', sans-serif; color: var(--kmc-deep); font-size: 1.3rem; margin: 0 0 16px; } .kmc-card__icon { width: 46px; height: 46px; border-radius: 12px; background: #eefafb; color: var(--kmc-accent); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 16px; } .kmc-card__text { color: #44515f; font-size: .93rem; line-height: 1.6; margin: 0; } /* Fact list (icon + value rows) */ .kmc-facts { list-style: none; padding: 0; margin: 0 0 20px; } .kmc-facts li { display: flex; gap: 12px; font-size: .92rem; line-height: 1.5; color: #44515f; padding: 7px 0; } .kmc-facts li > i { color: var(--kmc-accent); width: 16px; text-align: center; margin-top: 3px; flex: none; } .kmc-facts a { color: #44515f; text-decoration: none; border-bottom: 1px solid rgba(10, 165, 181, .35); word-break: break-word; } .kmc-facts a:hover { color: var(--kmc-accent-dark); border-bottom-color: var(--kmc-accent-dark); } .kmc-strong { font-weight: 600; color: var(--kmc-ink); } /* ------------------------------------------------------------- Buttons -- */ .kmc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--kmc-line); } .kmc-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--kmc-line); border-radius: 999px; padding: 9px 15px; font-size: .84rem; font-weight: 600; color: var(--kmc-deep); background: #fff; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; } .kmc-btn:hover, .kmc-btn:focus { background: #eefafb; border-color: var(--kmc-accent); color: var(--kmc-accent-dark); text-decoration: none; } .kmc-btn--primary { background: var(--kmc-accent); border-color: var(--kmc-accent); color: #fff; } .kmc-btn--primary:hover, .kmc-btn--primary:focus { background: var(--kmc-accent-dark); border-color: var(--kmc-accent-dark); color: #fff; } .kmc-btn--lg { padding: 12px 22px; font-size: .92rem; } /* -------------------------------------------------- Empty state / CTA --- */ .kmc-empty { display: none; text-align: center; padding: 60px 20px; color: var(--kmc-muted); } .kmc-empty i { font-size: 2.4rem; color: #c9d4dc; display: block; margin-bottom: 14px; } .kmc-page.is-empty .kmc-empty { display: block; } .kmc-help { background: #fff; border: 1px solid var(--kmc-line); border-radius: 14px; padding: 26px 24px; margin: 44px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .kmc-help h2 { font-family: 'robotobold', sans-serif; color: var(--kmc-deep); font-size: 1.15rem; margin: 0 0 4px; } .kmc-help p { color: var(--kmc-muted); font-size: .92rem; margin: 0; } /* ------------------------------------------------------------ Responsive - */ @media (max-width: 767px) { .kmc-hero { padding: 40px 0 80px; } .kmc-hero h1 { font-size: 1.9rem; } .kmc-grid, .kmc-grid--tight { grid-template-columns: 1fr; } .kmc-toolbar { padding: 14px; } .kmc-chips { width: 100%; } .kmc-chip { flex: 1 1 auto; text-align: center; } } @media (prefers-reduced-motion: reduce) { .kmc-card, .kmc-card::before, .kmc-btn, .kmc-chip { transition: none; } .kmc-card:hover { transform: none; } }