/* MedLicensIQ — Clinical Precision design system Shared styles, overrides, and animations that complement the Tailwind config defined inline in each page's . */ :root { --mliq-primary: #131b2e; --mliq-primary-deep: #0b1322; --mliq-accent: #3b82f6; --mliq-accent-soft: #dbeafe; --mliq-surface: #f8f9ff; --mliq-surface-card: #ffffff; --mliq-surface-low: #eff4ff; --mliq-surface-container: #e5eeff; --mliq-on-surface: #0b1c30; --mliq-on-surface-variant: #45464d; --mliq-outline: #c6c6cd; --mliq-outline-soft: #e2e8f0; --mliq-success: #0f766e; --mliq-success-soft: #d1fae5; --mliq-warning: #b45309; --mliq-warning-soft: #fef3c7; --mliq-error: #ba1a1a; --mliq-error-soft: #ffdad6; --mliq-shadow-card: 0 4px 20px rgba(15, 23, 42, 0.05); --mliq-shadow-card-hover: 0 12px 40px rgba(15, 23, 42, 0.08); --mliq-radius-sm: 0.5rem; --mliq-radius-md: 0.75rem; --mliq-radius-lg: 1rem; --mliq-radius-xl: 1.5rem; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--mliq-surface); color: var(--mliq-on-surface); } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Brand gradient (subtle, used in hero) */ .mliq-gradient-bg { background: radial-gradient(1200px 600px at 80% -10%, rgba(59, 130, 246, 0.12), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(213, 227, 253, 0.6), transparent 50%), var(--mliq-surface); } .mliq-gradient-text { background: linear-gradient(90deg, #0b1322 0%, #1e3a8a 50%, #3b82f6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Card variants */ .mliq-card { background: var(--mliq-surface-card); border: 1px solid #f1f5f9; border-radius: var(--mliq-radius-lg); box-shadow: var(--mliq-shadow-card); transition: box-shadow 0.25s ease, transform 0.25s ease; } .mliq-card:hover { box-shadow: var(--mliq-shadow-card-hover); transform: translateY(-2px); } .mliq-card-dark { background: var(--mliq-primary); color: #fff; border-radius: var(--mliq-radius-xl); } /* Buttons */ .mliq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0.01em; padding: 12px 20px; border-radius: var(--mliq-radius-md); transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } .mliq-btn-primary { background: var(--mliq-primary); color: #fff; } .mliq-btn-primary:hover { background: var(--mliq-primary-deep); box-shadow: 0 8px 24px rgba(11, 19, 34, 0.18); } .mliq-btn-primary:active { transform: scale(0.98); } .mliq-btn-secondary { background: #fff; color: var(--mliq-on-surface); border: 1px solid var(--mliq-outline-soft); } .mliq-btn-secondary:hover { background: var(--mliq-surface-low); border-color: var(--mliq-outline); } .mliq-btn-ghost { background: transparent; color: var(--mliq-on-surface); } .mliq-btn-ghost:hover { background: var(--mliq-surface-low); } /* Section padding */ .mliq-section { padding: 64px 0; } @media (min-width: 768px) { .mliq-section { padding: 96px 0; } } /* Nav link underline animation */ .mliq-nav-link { position: relative; color: var(--mliq-on-surface-variant); font-weight: 500; transition: color 0.2s ease; } .mliq-nav-link:hover, .mliq-nav-link.active { color: var(--mliq-primary); } .mliq-nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--mliq-primary); border-radius: 2px; } /* Feature icon tile */ .mliq-icon-tile { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--mliq-accent-soft); color: var(--mliq-primary); } /* Status pills */ .mliq-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .mliq-pill-success { background: var(--mliq-success-soft); color: var(--mliq-success); } .mliq-pill-warning { background: var(--mliq-warning-soft); color: var(--mliq-warning); } .mliq-pill-error { background: var(--mliq-error-soft); color: var(--mliq-error); } .mliq-pill-info { background: var(--mliq-accent-soft); color: var(--mliq-primary); } /* Mobile nav drawer */ .mliq-mobile-nav { position: fixed; inset: 0; background: rgba(11, 28, 48, 0.4); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 60; } .mliq-mobile-nav.open { opacity: 1; pointer-events: auto; } .mliq-mobile-nav-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(320px, 85%); background: #fff; padding: 24px; transform: translateX(100%); transition: transform 0.25s ease; display: flex; flex-direction: column; gap: 8px; } .mliq-mobile-nav.open .mliq-mobile-nav-panel { transform: translateX(0); } /* Reveal-on-scroll animation */ .mliq-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .mliq-reveal.visible { opacity: 1; transform: translateY(0); } /* FAQ accordion */ .mliq-faq-item summary { list-style: none; cursor: pointer; } .mliq-faq-item summary::-webkit-details-marker { display: none; } .mliq-faq-item .mliq-chevron { transition: transform 0.2s ease; } .mliq-faq-item[open] .mliq-chevron { transform: rotate(180deg); } /* Phone frame for device mockups */ .mliq-phone-frame { position: relative; width: 280px; border-radius: 36px; padding: 12px; background: #0b1322; box-shadow: 0 30px 60px -20px rgba(11, 19, 34, 0.35), 0 12px 30px -10px rgba(11, 19, 34, 0.2); } .mliq-phone-frame::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 80px; height: 6px; background: #1e293b; border-radius: 999px; z-index: 2; } .mliq-phone-frame .mliq-phone-screen { border-radius: 24px; overflow: hidden; background: var(--mliq-surface); } /* Footer link */ .mliq-footer-link { color: #94a3b8; font-size: 14px; transition: color 0.2s ease; } .mliq-footer-link:hover { color: #fff; } /* Form styles */ .mliq-input { width: 100%; padding: 12px 16px; border-radius: var(--mliq-radius-sm); border: 1px solid var(--mliq-outline-soft); background: #fff; font-size: 15px; color: var(--mliq-on-surface); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .mliq-input:focus { outline: none; border-color: var(--mliq-accent); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12); } .mliq-label { display: block; font-size: 13px; font-weight: 600; color: var(--mliq-on-surface-variant); margin-bottom: 6px; } /* Accessibility focus ring */ :focus-visible { outline: 2px solid var(--mliq-accent); outline-offset: 2px; border-radius: 4px; }