/* --- style --- */ :root { --bg: #ffffff; --card: #ffffff; --text: #1a1d23; --muted: #8993a4; --border: #e4edef; --accent: #5EC5BE; --accent-light: rgba(129,216,208,0.12); --accent-vivid: #81D8D0; --blue: #2d7fc1; --red: #d63050; --teal: #81D8D0; --teal-light: #B5E7E2; --teal-dark: #3A9B94; --shadow: 0 1px 8px rgba(0,0,0,0.04); --radius: 12px; --icon-bg: #E8F7F5; --icon-stroke: #3A9B94; --section-bg: #ffffff; } [data-theme="dark"] { --bg: #0e1117; --card: #1a1d23; --text: #e4e7eb; --muted: #8b929e; --border: #2a2f38; --accent: #4DB6AC; --accent-light: rgba(77,182,172,0.1); --accent-vivid: #00E5CC; --shadow: 0 2px 12px rgba(0,0,0,0.3); --icon-bg: rgba(77,182,172,0.12); --icon-stroke: #4DB6AC; --section-bg: #161b22; } /* ── White-label: Sygeforsikringen "danmark" full skin (red) ── */ :root[data-partner="danmark"] { --accent: #CD1D28; --accent-vivid: #CD1D28; --accent-light: rgba(205,29,40,0.10); --teal: #CD1D28; --teal-light: #F3C9CC; --teal-dark: #A8141E; --icon-bg: #F9E6E7; --icon-stroke: #CD1D28; } /* ── White-label DEMO: Generali (rød) — brand-hex bekræftes af Peter ── */ :root[data-partner="generali"] { --accent: #C8102E; --accent-vivid: #C8102E; --accent-light: rgba(200,16,46,0.10); --teal: #C8102E; --teal-light: #F1C6CD; --teal-dark: #8E0B20; --icon-bg: #F8E1E5; --icon-stroke: #C8102E; } /* ── White-label: Helicopteros Sanitarios full skin (red #C4383E) ── */ :root[data-partner="helicopteros"] { --accent: #C4383E; --accent-vivid: #C4383E; --accent-light: rgba(196,56,62,0.10); --teal: #C4383E; --teal-light: #F1CBCD; --teal-dark: #9C2A30; --icon-bg: #F8E6E7; --icon-stroke: #C4383E; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Mobil-sort-baggrund-fix (Peter 2026-08-04): havde ingen baggrund → transparent → iOS/mobil dark mode viste sort i overscroll/under indholdet. Giv html samme baggrund som body (var(--bg)) → aldrig sort udenfor indholdet. */ html { background: var(--bg); color-scheme: light; } body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; } /* ============================================================ HEADER — sticky navigation ============================================================ */ .header { background: var(--card); border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow); height: 56px; } .logo { font-size: 1.4em; font-weight: 800; color: var(--text); text-decoration: none; } .logo span { color: var(--accent); } .mgx-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;} .mgx-brand-mark{display:inline-flex;filter:drop-shadow(0 2px 4px rgba(0,121,107,.18));} .mgx-brand-text{display:flex;flex-direction:column;line-height:1;} .mgx-brand-name{font-size:1.15rem;font-weight:800;letter-spacing:.04em;color:var(--text);} .mgx-brand-tag{font-size:.5rem;font-weight:700;letter-spacing:.13em;color:var(--muted);margin-top:3px;white-space:nowrap;} .nav-links { display: flex; align-items: center; gap: 6px; } .nav-link { padding: 8px 14px; color: var(--muted); text-decoration: none; font-size: 0.85em; font-weight: 600; border-radius: 8px; transition: all 0.2s; cursor: pointer; border: none; background: none; font-family: inherit; } .nav-link:hover, .nav-link.active { color: var(--accent); background: var(--accent-light); } .header-right { display: flex; align-items: center; gap: 10px; } .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 1.1em; color: var(--text); } .header-stats { font-size: 0.72em; color: var(--muted); } .header-stats strong { color: var(--accent); } /* ============================================================ HERO / LANDING — dark section with animated counters ============================================================ */ .hero { background: linear-gradient(135deg, #0a0f1a 0%, #111827 40%, #0e1a2e 100%); color: #e4e7eb; text-align: center; padding: 70px 24px 60px; position: relative; overflow: hidden; transition: background 0.4s, color 0.4s; } /* Light mode hero — elegant light version */ :root:not([data-theme="dark"]) .hero { background: linear-gradient(135deg, #f8f9fb 0%, #e8ecf1 40%, #eef2f7 100%); color: #1a1d23; } :root:not([data-theme="dark"]) .hero h1 { color: #1a1d23; } :root:not([data-theme="dark"]) .hero h1 .gold { color: #00897B; } :root:not([data-theme="dark"]) .hero h1 .teal { color: #00695C; } :root:not([data-theme="dark"]) .hero p { color: #6b7280; } :root:not([data-theme="dark"]) .hero-badge { background: rgba(0,137,123,0.1); color: #00897B; border-color: rgba(0,137,123,0.25); } :root:not([data-theme="dark"]) .hero-stat .counter { color: #1a1d23; } :root:not([data-theme="dark"]) .hero-stat .stat-label { color: #6b7280; } :root:not([data-theme="dark"]) .hero-cat-pill { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #6b7280; } :root:not([data-theme="dark"]) .hero-cat-pill:hover { background: rgba(0,137,123,0.08); color: #00897B; border-color: rgba(0,137,123,0.2); } :root:not([data-theme="dark"]) .ask-ai-label { color: #00897B; } :root:not([data-theme="dark"]) .ask-ai-input-wrap { background: #fff; border-color: rgba(0,137,123,0.3); } :root:not([data-theme="dark"]) .ask-ai-input-wrap:focus-within { border-color: #00897B; box-shadow: 0 0 20px rgba(0,137,123,0.1); } :root:not([data-theme="dark"]) .ask-ai-input { color: #1a1d23; } :root:not([data-theme="dark"]) .ask-ai-input::placeholder { color: #9ca3af; } :root:not([data-theme="dark"]) .ask-ai-hint { color: #9ca3af; } :root:not([data-theme="dark"]) .ask-ai-response { background: rgba(0,137,123,0.06); border-color: rgba(0,137,123,0.15); color: #1a1d23; } :root:not([data-theme="dark"]) .ask-card { background: #fff; border-color: #e2e5ea; } :root:not([data-theme="dark"]) .ask-card:hover { border-color: rgba(0,137,123,0.4); background: rgba(0,137,123,0.03); } :root:not([data-theme="dark"]) .ask-card-name { color: #1a1d23; } :root:not([data-theme="dark"]) .ask-card-meta { color: #6b7280; } :root:not([data-theme="dark"]) .ask-card .rc-avatar { background: #e0f2f1; } :root:not([data-theme="dark"]) .ask-card .rc-avatar svg { fill: #00897B; } :root:not([data-theme="dark"]) .ask-card .rc-cat-icon { background: #fff; border-color: #e2e5ea; } :root:not([data-theme="dark"]) .ask-card .rc-cat-icon svg { stroke: #00897B; } :root:not([data-theme="dark"]) .ask-detected .ask-tag { background: rgba(0,137,123,0.08); color: #00897B; border-color: rgba(0,137,123,0.2); } .hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 50%, rgba(0,137,123,0.08) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(0,191,165,0.06) 0%, transparent 50%); pointer-events: none; } [data-theme="dark"] .hero::before { opacity: 1; } :root:not([data-theme="dark"]) .hero::before { opacity: 0.3; } .hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; } .hero-badge { display: inline-block; padding: 6px 16px; background: rgba(0,137,123,0.15); color: var(--teal-light); border: 1px solid rgba(0,137,123,0.3); border-radius: 20px; font-size: 0.8em; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 24px; } .hero h1 { font-size: 2.8em; font-weight: 800; line-height: 1.15; margin-bottom: 16px; letter-spacing: -0.5px; } .hero h1 .gold { color: var(--teal-light); } .hero h1 .teal { color: #00BFA5; } .hero p { font-size: 1.15em; color: #8b929e; max-width: 580px; margin: 0 auto 36px; line-height: 1.7; } .hero-cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; background: linear-gradient(135deg, var(--teal) 0%, var(--accent-vivid) 100%); color: #fff; border: none; border-radius: 12px; font-size: 1.1em; font-weight: 700; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; box-shadow: 0 4px 20px rgba(0,137,123,0.3); } .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,137,123,0.4); } .hero-cta svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* Animated stats counters */ .hero-stats { display: flex; justify-content: center; gap: 50px; margin-top: 50px; flex-wrap: wrap; } .hero-stat { text-align: center; } .hero-stat .counter { font-size: 2.6em; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; } .hero-stat .counter .gold-num { color: var(--accent-vivid); } .hero-stat .stat-label { font-size: 0.8em; color: #6b7280; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; } .hero-stat .stat-divider { width: 40px; height: 2px; background: linear-gradient(90deg, transparent, var(--teal), transparent); margin: 8px auto 0; } /* Category showcase on hero */ .hero-categories { display: flex; justify-content: center; gap: 12px; margin-top: 40px; flex-wrap: wrap; max-width: 600px; margin-left: auto; margin-right: auto; } .hero-cat-pill { padding: 6px 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; font-size: 0.78em; color: #8b929e; cursor: pointer; transition: all 0.2s; } .hero-cat-pill:hover { background: rgba(16,185,152,0.15); color: #10b998; border-color: rgba(16,185,152,0.3); } /* ============================================================ SEARCH LAYOUT — filters LEFT, results RIGHT ============================================================ */ .main { display: flex; max-width: 1400px; margin: 0 auto; gap: 0; min-height: calc(100vh - 56px); } .search-panel { flex: 0 0 320px; width: 320px; background: var(--card); border-right: 1px solid var(--border); padding: 20px; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; } .results-panel { flex: 1; padding: 20px 24px; overflow-y: auto; min-width: 0; background: var(--section-bg); } /* Search panel */ .search-title { font-size: 1em; font-weight: 700; color: var(--accent); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .search-title svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .search-group { margin-bottom: 12px; } .search-label { font-size: 0.7em; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: block; } .search-input, .search-select { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font-size: 0.88em; font-family: inherit; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .search-input:focus, .search-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,150,136,0.1); } .search-input::placeholder { color: var(--muted); } .btn-search { width: 100%; padding: 11px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 0.95em; font-weight: 600; cursor: pointer; margin-top: 6px; transition: opacity 0.2s; } .btn-search:hover { opacity: 0.9; } .btn-clear { width: 100%; padding: 8px; background: none; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; font-size: 0.82em; cursor: pointer; margin-top: 6px; } /* ============================================================ DYNAMIC COUNTER — big animated number at top of results ============================================================ */ .results-counter-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .results-big-count { font-size: 1.5em; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; transition: all 0.3s; } .results-big-count .count-label { font-size: 0.5em; font-weight: 500; color: var(--muted); margin-left: 6px; } .results-subtitle { font-size: 0.82em; color: var(--muted); } .results-subtitle strong { color: var(--accent); } /* ============================================================ RESULT CARDS ============================================================ */ .result-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.02); cursor: pointer; transition: border-color 0.2s, transform 0.15s, box-shadow 0.15s; display: flex; gap: 14px; align-items: flex-start; } .result-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,150,136,0.1); } .result-card.premium { border-left: 4px solid var(--accent); } /* Person silhouette avatar */ .rc-avatar { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; background: var(--icon-bg); display: flex; align-items: center; justify-content: center; margin-top: 2px; position: relative; } .rc-avatar svg { width: 26px; height: 26px; fill: var(--icon-stroke); opacity: 0.7; } .rc-cat-icon { display: none; } .rc-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; background: var(--icon-bg); display: flex; align-items: center; justify-content: center; margin-top: 2px; } .rc-icon svg { width: 26px; height: 26px; stroke: var(--icon-stroke); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .rc-body { flex: 1; min-width: 0; } .rc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; gap: 8px; } .rc-name { font-size: 1.02em; font-weight: 700; color: var(--text); } .rc-category { font-size: 0.7em; background: var(--accent-light); color: var(--accent); padding: 3px 10px; border-radius: 20px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 0.2s; } .rc-category:hover { background: var(--accent); color: #fff; } .rc-location { font-size: 0.82em; color: var(--muted); margin-bottom: 3px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .rc-contact { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.78em; align-items: center; } .rc-contact-item { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); } .rc-contact-item a { color: var(--blue); text-decoration: none; } .rc-contact-item a:hover { text-decoration: underline; } .rc-contact-item svg { width: 13px; height: 13px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .rc-contact-item a svg { stroke: var(--blue); } /* Stetoskop rating */ .stetoskop-rating { display: inline-flex; gap: 4px; margin-left: 8px; } .stetoskop-rating svg { width: 16px; height: 16px; } .stetoskop-rating.rating-lg { gap: 6px; margin-left: 0; } .stetoskop-rating.rating-lg svg { width: 26px; height: 26px; } /* Blurred text */ .blurred-text { filter: blur(4px); user-select: none; pointer-events: none; color: var(--muted); } /* Knock / Upgrade buttons */ .btn-knock { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--teal); color: #fff; border: none; border-radius: 8px; font-size: 0.95em; font-weight: 600; cursor: pointer; transition: background 0.2s; } .btn-knock:hover { background: var(--teal-dark); } .btn-upgrade { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 0.85em; font-weight: 600; cursor: pointer; } /* Profile card in modal */ .profile-hero { text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .profile-avatar { width: 90px; height: 90px; border-radius: 50%; background: var(--icon-bg); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; border: 3px solid var(--border); } .profile-avatar svg { width: 50px; height: 50px; fill: var(--icon-stroke); opacity: 0.6; } .profile-badges { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .profile-badge { font-size: 0.72em; padding: 3px 12px; border-radius: 20px; border: 1px solid var(--border); font-weight: 600; } .badge-verified { background: var(--accent-light); color: var(--accent); border-color: var(--accent); } .profile-name { font-size: 1.5em; font-weight: 800; margin-bottom: 4px; } .profile-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; font-size: 0.85em; color: var(--muted); margin: 8px 0; } .profile-meta-item { display: inline-flex; align-items: center; gap: 4px; } .profile-meta-item svg { width: 14px; height: 14px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .profile-stats { display: flex; justify-content: center; gap: 32px; margin: 16px 0 8px; font-size: 0.82em; color: var(--muted); } .profile-stats span { display: inline-flex; align-items: center; gap: 6px; } .profile-stats svg { width: 15px; height: 15px; stroke: var(--teal-dark); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .profile-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; } .profile-action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1.5px solid var(--teal); border-radius: 99px; background: var(--card); color: var(--teal-dark); font-size: 0.88em; font-weight: 600; cursor: pointer; transition: all 0.15s; text-decoration: none; } .profile-action-btn:hover { background: var(--teal); color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(129,216,208,0.3); } .profile-action-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* Contact rows at the bottom of the modal */ .modal-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; } .modal-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82em; color: var(--muted); font-weight: 600; min-width: 90px; } .modal-label svg { width: 15px; height: 15px; stroke: var(--teal-dark); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .modal-value { font-size: 0.92em; color: var(--text); } .modal-value a { color: var(--teal-dark); text-decoration: none; font-weight: 500; } .modal-value a:hover { text-decoration: underline; } .knock-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .knock-form input, .knock-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 0.9em; margin-bottom: 8px; } .knock-form textarea { height: 60px; resize: vertical; } .upgrade-banner { background: linear-gradient(135deg, var(--teal) 0%, var(--accent-vivid) 100%); color: #fff; padding: 12px 16px; border-radius: 10px; margin-top: 16px; text-align: center; font-size: 0.85em; } .upgrade-banner strong { font-size: 1.1em; } /* Modal */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; } .modal-overlay.active { display: flex; } .modal { background: var(--card); border-radius: 16px; padding: 30px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .modal-row { display: flex; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.9em; } .modal-row:last-child { border-bottom: none; } .modal-label { font-weight: 600; color: var(--muted); min-width: 120px; } .modal-value { color: var(--text); } .modal-close { float: right; background: none; border: none; font-size: 1.5em; cursor: pointer; color: var(--muted); } /* Pagination */ .pagination { display: flex; justify-content: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; } .page-btn { padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); cursor: pointer; font-size: 0.85em; } .page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .page-btn:hover:not(.active) { border-color: var(--accent); } /* ============================================================ CONTENT PAGES — About, Contact, Pricing ============================================================ */ .page-view { display: none; max-width: 800px; margin: 0 auto; padding: 40px 24px 60px; } .page-view.active { display: block; } .page-view h1 { font-size: 2em; font-weight: 800; margin-bottom: 8px; } .page-view h1 span { color: var(--accent); } .page-view .page-subtitle { font-size: 1.05em; color: var(--muted); margin-bottom: 32px; line-height: 1.6; } .page-view h2 { font-size: 1.3em; font-weight: 700; color: var(--accent); margin: 28px 0 12px; } .page-view p { line-height: 1.7; margin-bottom: 14px; color: var(--text); } /* Pricing cards */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0; } .price-card { background: var(--card); border: 2px solid var(--border); border-radius: 16px; padding: 28px 20px; text-align: center; transition: border-color 0.2s, transform 0.2s; } .price-card:hover { transform: translateY(-3px); } .price-card.featured { border-color: var(--teal); position: relative; } .price-card.featured::before { content: 'Most Popular'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--teal), var(--accent-vivid)); color: #fff; padding: 4px 16px; border-radius: 12px; font-size: 0.72em; font-weight: 700; } .price-card h3 { font-size: 1.2em; margin-bottom: 4px; } .price-card .price { font-size: 2.2em; font-weight: 800; color: var(--accent); margin: 12px 0 4px; } .price-card .price-period { font-size: 0.8em; color: var(--muted); } .price-card .price-features { list-style: none; margin: 20px 0; text-align: left; font-size: 0.88em; } .price-card .price-features li { padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--text); } .price-card .price-features li::before { content: ''; margin-right: 8px; color: var(--accent); } .price-btn { display: inline-block; padding: 10px 28px; border-radius: 8px; font-weight: 600; font-size: 0.9em; cursor: pointer; transition: all 0.2s; text-decoration: none; border: none; } .price-btn-outline { background: none; border: 2px solid var(--border); color: var(--text); } .price-btn-outline:hover { border-color: var(--accent); color: var(--accent); } .price-btn-gold { background: linear-gradient(135deg, var(--teal), var(--accent-vivid)); color: #fff; } .price-btn-gold:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(0,137,123,0.3); } .price-btn-accent { background: var(--accent); color: #fff; } .price-btn-accent:hover { opacity: 0.9; } /* Contact form */ .contact-form { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin-top: 20px; } .contact-form .form-group { margin-bottom: 14px; } .contact-form label { display: block; font-size: 0.8em; font-weight: 600; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 0.9em; } .contact-form textarea { height: 120px; resize: vertical; } .contact-form .btn-submit { padding: 12px 32px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 0.95em; font-weight: 600; cursor: pointer; margin-top: 4px; } /* Footer */ .footer { text-align: center; padding: 24px; font-size: 0.75em; color: var(--muted); border-top: 1px solid var(--border); background: var(--card); } .footer a { color: var(--accent); text-decoration: none; } /* Ticker */ @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Admin */ .admin-panel { padding: 30px; max-width: 1200px; margin: 0 auto; } .admin-login { max-width: 300px; margin: 80px auto; text-align: center; } /* Admin Directory */ .adm-dir-bar { display:flex; gap:8px; align-items:center; margin-bottom:16px; flex-wrap:wrap; } .adm-dir-bar input { flex:1; min-width:200px; } .adm-level-pills { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; } .adm-level-pills button { padding:6px 16px; border-radius:20px; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:0.82em; cursor:pointer; transition: all 0.2s; } .adm-level-pills button.active { background:var(--accent); color:#fff; border-color:var(--accent); } .adm-level-pills button:hover:not(.active) { border-color:var(--accent); } .adm-row { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--card); border:1px solid var(--border); border-radius:10px; margin-bottom:6px; font-size:0.85em; transition: border-color 0.2s; } .adm-row:hover { border-color:var(--accent); } .adm-row.inactive { opacity:0.45; } .adm-row .adm-name { font-weight:700; min-width:180px; color:var(--text); } .adm-row .adm-loc { color:var(--muted); font-size:0.9em; min-width:140px; } .adm-row .adm-lang { color:var(--muted); font-size:0.82em; min-width:80px; } .adm-row .adm-email { color:var(--muted); font-size:0.82em; min-width:160px; overflow:hidden; text-overflow:ellipsis; } .adm-row .adm-level { display:inline-block; padding:2px 10px; border-radius:10px; font-size:0.75em; font-weight:700; min-width:20px; text-align:center; } .adm-row .adm-level.lv1 { background:var(--border); color:var(--muted); } .adm-row .adm-level.lv2 { background:rgba(16,185,152,0.15); color:var(--accent); } .adm-row .adm-level.lv3 { background:rgba(0,137,123,0.18); color:var(--teal); } .adm-row .adm-actions { margin-left:auto; display:flex; gap:4px; flex-shrink:0; } .adm-row .adm-actions button { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--muted); cursor:pointer; font-size:0.9em; display:flex; align-items:center; justify-content:center; transition:all 0.2s; } .adm-row .adm-actions button:hover { border-color:var(--accent); color:var(--accent); } .adm-row .adm-actions button.danger:hover { border-color:var(--red); color:var(--red); } .adm-pager { display:flex; gap:8px; align-items:center; justify-content:center; margin-top:16px; font-size:0.85em; } .adm-pager button { padding:6px 14px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer; } .adm-pager button:disabled { opacity:0.3; cursor:default; } .adm-pager button:hover:not(:disabled) { border-color:var(--accent); } /* Admin Edit Modal */ .adm-edit-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:3000; display:flex; align-items:center; justify-content:center; } .adm-edit-modal { background:var(--card); border:1px solid var(--border); border-radius:16px; width:90%; max-width:640px; max-height:85vh; overflow-y:auto; padding:28px; } .adm-edit-modal h3 { margin-bottom:20px; color:var(--accent); } .adm-field { margin-bottom:10px; } .adm-field label { display:block; font-size:0.72em; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px; } .adm-field input, .adm-field select, .adm-field textarea { width:100%; padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:0.88em; } .adm-field textarea { min-height:60px; resize:vertical; } .adm-field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; } } @media (max-width: 768px) { body { font-size: 15px; } .main { flex-direction: column; padding: 8px; gap: 10px; } .search-panel { flex: none; width: 100%; max-width: 100%; position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 14px; } .results-panel { padding: 12px; } /* HERO */ .hero { padding: 20px 14px !important; } .hero h1 { font-size: 1.6em; line-height: 1.2; } .hero p { font-size: 0.92em; } .hero-badge { font-size: 0.7em; padding: 4px 10px; } .hero-stats { gap: 14px; flex-wrap: wrap; } .hero-stat .counter { font-size: 1.6em; } .stat-label { font-size: 0.75em; } .hero-cta { padding: 10px 20px !important; font-size: 0.9em !important; } /* ASK AI BOX */ .ask-ai-box { padding: 12px 14px !important; } .ask-ai-input { font-size: 16px !important; /* iOS prevents zoom at 16px+ */ padding: 10px 12px; } .ask-ai-btn { padding: 10px 14px; } /* HEADER / NAV — mobile minimalist + hamburger */ .header { padding: 14px 18px !important; } .header-stats { display: none; } .header-logo, .logo { font-size: 1.25em !important; } .nav-links { display: none !important; } /* hide on mobile */ .header-right select.lang-select { padding: 6px 10px !important; font-size: 0.8em !important; } .header-right .theme-toggle { display: none; } /* save space */ /* Peter doctrine 2026-05-09: INGEN HAMBURGER på mobil — det er en fatal risiko at gemme MM/Donate bag en menu. Knapperne skal ligge fremme. Hamburger-knap skjult; MM + Donate vises direkte ved siden af lang-select. */ .mobile-menu-btn { display: none !important; } /* HIDDEN — no hamburger */ .mobile-mm-btn { display: flex !important; } /* show on mobile */ .mobile-donate-btn { display: flex !important; } /* show on mobile */ } /* ============= MOBILE MENU BUTTON + MM/DONATE SHORTCUTS ============= */ .mobile-menu-btn, .mobile-mm-btn, .mobile-donate-btn { display: none; /* hidden on desktop */ background: transparent; border: 1.5px solid var(--border); border-radius: 8px; width: 40px; height: 40px; cursor: pointer; align-items: center; justify-content: center; padding: 0; color: var(--text); transition: background 0.15s, border-color 0.15s; } .mobile-menu-btn:hover, .mobile-mm-btn:hover, .mobile-donate-btn:hover { background: var(--accent-light); border-color: var(--accent); } .mobile-menu-btn svg { width: 22px; height: 22px; } /* Backdrop overlay */ .menu-backdrop { position: fixed; inset: 0; background: rgba(13, 53, 54, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 998; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .menu-backdrop.open { opacity: 1; pointer-events: auto; } /* Slide-in panel from right */ .mobile-menu-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: var(--card); box-shadow: -10px 0 40px rgba(0,0,0,0.18); z-index: 999; transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; overflow-y: auto; } .mobile-menu-panel.open { transform: translateX(0); } .mmp-header { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px 18px; border-bottom: 1px solid var(--border); } .mmp-brand { font-size: 1.15em; font-weight: 700; color: var(--teal); text-decoration: none; } .mmp-brand span { color: var(--text); } .mmp-close { background: transparent; border: 0; font-size: 1.6em; color: var(--muted); cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .mmp-close:hover { background: var(--accent-light); } .mmp-section { padding: 12px 0; border-bottom: 1px solid var(--border); } .mmp-section-label { font-size: 0.7em; font-weight: 700; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; padding: 8px 24px 6px; } .mmp-link { display: flex; align-items: center; gap: 14px; padding: 13px 24px; background: transparent; border: 0; width: 100%; text-align: left; font-size: 1.02em; color: var(--text); cursor: pointer; text-decoration: none; transition: background 0.12s, color 0.12s, padding 0.18s; font-family: inherit; } .mmp-link:hover, .mmp-link:focus { background: var(--accent-light); color: var(--teal-dark); padding-left: 28px; } .mmp-link .icon { font-size: 1.15em; width: 24px; text-align: center; color: var(--accent); } .mmp-link.cta { color: var(--teal); font-weight: 700; } .mmp-stats { padding: 18px 24px; background: linear-gradient(135deg, rgba(58,155,148,0.08), rgba(58,155,148,0.02)); border-bottom: 1px solid var(--border); } .mmp-stats .num { font-size: 1.6em; font-weight: 800; color: var(--teal); line-height: 1; } .mmp-stats .lbl { font-size: 0.78em; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; } .mmp-footer { margin-top: auto; padding: 18px 24px 24px; font-size: 0.74em; color: var(--muted); line-height: 1.5; } .mmp-footer a { color: var(--teal); text-decoration: none; } @media (max-width: 800px) { /* Already declared above; nothing extra here */ /* RESULT CARDS */ .rc-avatar { width: 42px; height: 42px; min-width: 42px; } .rc-avatar svg { width: 24px; height: 24px; } .rc-cat-icon { width: 20px; height: 20px; } .rc-cat-icon svg { width: 11px; height: 11px; } .result-card { padding: 10px 12px !important; flex-wrap: wrap; } .rc-name { font-size: 0.92em !important; } .rc-category { font-size: 0.74em !important; padding: 2px 6px !important; } .rc-specialty, .rc-location { font-size: 0.78em !important; max-width: 100% !important; } .rc-contact-item { font-size: 0.78em; } .results-big-count { font-size: 1.2em; } /* MODAL / PROFILE */ .detail-modal { padding: 8px !important; } .detail-modal .modal-content { max-width: 100% !important; max-height: 95vh !important; padding: 16px !important; overflow-y: auto; } .profile-hero { padding: 8px 4px !important; } .profile-avatar { width: 80px !important; height: 80px !important; } .profile-name { font-size: 1.15em !important; } .profile-slogan { font-size: 0.85em !important; } .profile-badge { font-size: 0.7em; padding: 2px 8px; } .modal-close { width: 38px; height: 38px; font-size: 1.5em; top: 8px !important; right: 8px !important; } .profile-action-btn { padding: 10px 14px !important; font-size: 0.88em !important; } .btn-knock { padding: 12px 18px !important; font-size: 0.95em !important; } .modal-row { padding: 10px 12px !important; font-size: 0.88em; flex-wrap: wrap; } .modal-label { min-width: 80px !important; font-size: 0.82em; } .modal-value { font-size: 0.88em; word-break: break-word; } /* FORMS & SEARCH INPUTS — prevent iOS zoom */ .search-input, input[type="text"], input[type="email"], input[type="tel"], textarea, select { font-size: 16px !important; } /* RECOMMEND modal */ #recModal >div { max-width: 100% !important; padding: 20px !important; } /* Category grid on hero */ .hero-categories { gap: 6px !important; } .hero-categories >div { font-size: 0.8em !important; padding: 6px 10px !important; } /* Admin sidebar */ #adminLayout { grid-template-columns: 1fr !important; } #adminTabs { position: static !important; } .adm-field-row { grid-template-columns: 1fr !important; } } /* SMALL MOBILE (iPhone SE, old devices) */ @media (max-width: 400px) { .hero h1 { font-size: 1.35em; } .hero-stats { gap: 8px; } .hero-stat .counter { font-size: 1.3em; } .nav-link { font-size: 0.72em; padding: 5px 6px; } .search-input { padding: 8px 10px; } .profile-name { font-size: 1em !important; } } /* ============================================================ ASK MEDICUS AI ============================================================ */ .ask-ai-box { max-width: 580px; margin: 0 auto 8px; text-align: left; } .ask-ai-label { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.9em; font-weight: 700; color: var(--teal-light); margin-bottom: 8px; } .ask-ai-input-wrap { display: flex; gap: 0; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(0,137,123,0.35); border-radius: 12px; overflow: hidden; transition: border-color 0.2s; } .ask-ai-input-wrap:focus-within { border-color: var(--teal-light); box-shadow: 0 0 20px rgba(0,137,123,0.15); } .ask-ai-input { flex: 1; padding: 14px 16px; background: transparent; border: none; color: #e4e7eb; font-size: 1em; font-family: inherit; outline: none; } .ask-ai-input::placeholder { color: #6b7280; } .ask-ai-btn { padding: 14px 18px; background: linear-gradient(135deg, var(--teal), var(--accent-vivid)); border: none; color: #fff; cursor: pointer; transition: opacity 0.2s; display: flex; align-items: center; } .ask-ai-btn:hover { opacity: 0.85; } .ask-ai-hint { font-size: 0.72em; color: #4b5563; margin-top: 6px; text-align: center; } /* AI Results on hero */ .ask-results { max-width: 620px; margin: 0 auto; text-align: left; } .ask-ai-response { background: rgba(0,137,123,0.08); border: 1px solid rgba(0,137,123,0.2); border-radius: 12px; padding: 14px 18px; margin: 16px 0 12px; font-size: 0.92em; color: #e4e7eb; line-height: 1.5; } .ask-ai-response svg { vertical-align: middle; margin-right: 6px; } .ask-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .ask-card:hover { border-color: rgba(0,137,123,0.4); background: rgba(0,137,123,0.06); } .ask-card .rc-avatar { background: rgba(16,185,152,0.15); } .ask-card .rc-avatar svg { fill: #10b998; } .ask-card .rc-cat-icon { background: rgba(20,20,30,0.9); border-color: rgba(255,255,255,0.15); } .ask-card .rc-cat-icon svg { stroke: #10b998; } .ask-card-name { font-weight: 700; color: #e4e7eb; font-size: 0.95em; } .ask-card-meta { font-size: 0.8em; color: #8b929e; margin-top: 3px; } .ask-card-meta span { margin-right: 10px; } .ask-card-cat { font-size: 0.7em; padding: 2px 10px; border-radius: 12px; background: rgba(16,185,152,0.12); color: #10b998; font-weight: 600; } .ask-detected { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; justify-content: center; } .ask-tag { font-size: 0.72em; padding: 4px 12px; border-radius: 12px; background: rgba(16,185,152,0.1); color: #10b998; border: 1px solid rgba(16,185,152,0.25); } .ask-loading { text-align: center; padding: 20px; color: var(--teal-light); font-size: 0.95em; } .ask-loading .dots::after { content: ''; animation: dots 1.5s steps(4, end) infinite; } @keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } /* Language selector */ .lang-select { padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 0.85em; font-weight: 600; cursor: pointer; font-family: inherit; min-width: 130px; max-width: 160px; } /* MM form view/edit modes (Peter doctrine 2026-05-09): View-mode default → click "Rediger" → fields editable → "Gem ændringer" or "Annullér" */ .mm-readonly input:not([type="hidden"]), .mm-readonly textarea, .mm-readonly select, .mm-readonly [data-mm] { pointer-events: none; background: #f8fafa !important; color: #1a1d23 !important; border-color: #e0e6e8 !important; cursor: default !important; opacity: 0.95; } .mm-readonly label { color: #5a7a7a !important; } .mm-readonly details >summary { pointer-events: auto; } /* Animate counters */ /* === MOBILE STICKY SEARCH BAR === */ @media (max-width: 720px) { #mobileSearchBar { display: flex; position: fixed; top: 0; left: 0; right: 0; background: white; padding: 8px 12px; z-index: 999; box-shadow: 0 2px 8px rgba(0,0,0,0.06); gap: 8px; align-items: center; } #mobileSearchBar input { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 24px; font-size: 0.92em; outline: none; } #mobileSearchBar input:focus { border-color: var(--accent); } #mobileSearchBar button { background: var(--accent); color: white; border: 0; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } body { padding-top: 56px; } } @media (min-width: 721px) { #mobileSearchBar { display: none !important; } } /* === KEYBOARD SHORTCUT KBD STYLE === */ kbd.shortcut { display: inline-block; padding: 1px 6px; font-family: -apple-system, monospace; font-size: 0.78em; background: #f0f6f6; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; color: var(--accent); margin: 0 2px; } /* === TOAST NOTIFICATIONS === */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 100000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 380px; } .toast { background: #fff; color: #1a1d23; padding: 14px 18px; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.06); display: flex; align-items: flex-start; gap: 12px; font-size: 0.92em; line-height: 1.45; pointer-events: auto; transform: translateX(420px); opacity: 0; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; border-left: 4px solid var(--accent); min-width: 260px; } .toast.show { transform: translateX(0); opacity: 1; } .toast.success { border-left-color: #22c55e; } .toast.error { border-left-color: #ef4444; } .toast.warn { border-left-color: #f59e0b; } .toast.info { border-left-color: var(--accent); } .toast-icon { font-size: 1.3em; flex-shrink: 0; } .toast-body { flex: 1; } .toast-close { background: none; border: 0; color: #9ca3af; cursor: pointer; padding: 0 0 0 8px; font-size: 1.2em; line-height: 1; } .toast-close:hover { color: #1a1d23; } @media (max-width: 600px) { .toast-container { left: 10px; right: 10px; bottom: 10px; max-width: none; } .toast { transform: translateY(120%); } .toast.show { transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeInUp 0.6s ease forwards; } /* Subtle card entrance animation */ @keyframes cardSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .result-card { animation: cardSlideIn 0.35s ease forwards; opacity: 0; } .result-card:nth-child(1) { animation-delay: 0s; } .result-card:nth-child(2) { animation-delay: 0.04s; } .result-card:nth-child(3) { animation-delay: 0.08s; } .result-card:nth-child(4) { animation-delay: 0.12s; } .result-card:nth-child(5) { animation-delay: 0.16s; } .result-card:nth-child(6) { animation-delay: 0.2s; } .result-card:nth-child(7) { animation-delay: 0.24s; } .result-card:nth-child(8) { animation-delay: 0.28s; } .result-card:nth-child(n+9) { animation-delay: 0.3s; } /* Gentle pulse on knock button */ @keyframes gentlePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,137,123,0.4); } 50% { box-shadow: 0 0 0 8px rgba(0,137,123,0); } } .btn-knock { animation: gentlePulse 2.5s ease-in-out infinite; } .btn-knock:hover { animation: none; } /* Smooth page-view transition */ .page-view.active { animation: fadeInUp 0.3s ease; } /* Modal entrance */ @keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-overlay.active .modal { animation: modalIn 0.25s ease; } /* Hero badge floating animation */ @keyframes floatBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .hero-badge { animation: floatBadge 3s ease-in-out infinite; } /* Search button hover glow */ .btn-search { transition: opacity 0.2s, box-shadow 0.3s; } .btn-search:hover { box-shadow: 0 4px 16px rgba(0,137,123,0.3); } /* Help tooltip */ .help-tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-size: 0.65em; font-weight: 700; cursor: help; margin-left: 6px; position: relative; } .help-tip:hover::after { content: attr(data-tip); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--card); padding: 6px 10px; border-radius: 6px; font-size: 1.6em; font-weight: 400; white-space: nowrap; max-width: 260px; white-space: normal; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.15); line-height: 1.4; } .help-tip:hover::before { content: ''; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--text); z-index: 100; } /* --- mmx-styles --- */ /* ===================================================================== My Medicus dashboard — NEW DESIGN (V2), scoped under .mmx-app. "Meta Business Settings meets Apple Wallet". Everything prefixed mmx- and scoped so it can never leak into the rest of the SPA. Ported from static/design-preview (Peter-approved prototype). ===================================================================== */ /* Hide global site chrome while the new dashboard owns the screen */ body.mmx-active .header, body.mmx-active #footerContent, body.mmx-active #cookieBanner, body.mmx-active #medicusChatBtn { display: none !important; } body.mmx-active { background: #F7F9FA; } /* Break V2 out of the old container → full-bleed app shell. Scope to the ACTIVE view ONLY: otherwise a hidden #viewMM (still holding a previous MM login's content in this browser) gets force-shown whenever ANOTHER mmx shell — e.g. the professional dashboard — sets body.mmx-active, leaking a stranger's dashboard onto the page. (Peter 2026-07-30: "Christopher under Miranda".) The professional view gets its own full-bleed rule so it fills the screen like the MM view instead of the narrow 800px .page-view box. */ body.mmx-active #viewMM.active, body.mmx-active #viewMM.active > *, body.mmx-active #viewMM.active #mmContent, body.mmx-active #viewProfessional.active, body.mmx-active #viewProfessional.active > *, body.mmx-active #profDashboard { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.mmx-active #viewMM.active { display: block !important; } /* Dashboard-switch button in the V2 topbar (Peter 2026-07-30). Icon+label on desktop; icon-only on narrow screens so the topbar never overflows. */ .mmx-switch-btn { white-space: nowrap; gap: 6px; } .mmx-switch-btn .mmx-switch-label { margin-left: 4px; } @media (max-width: 640px) { .mmx-switch-btn .mmx-switch-label { display: none; } } .mmx-app { --teal:#3A9B94; --teal-600:#2C8B86; --teal-700:#007C73; --teal-800:#00695C; --teal-050:#EAF8F6; --teal-bg:#E8F3F1; --teal-tint:#F1FAF8; --charcoal:#27343D; --ink:#1A1D23; --muted:#5A7A7A; --muted-2:#8894A0; --bg:#F7F9FA; --bg-2:#F4F7F9; --surface:#FFFFFF; --border:#E4EDEF; --border-2:#EDF1F3; --danger:#CD1D28; --danger-dark:#A8141E; --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px; --shadow-xs:0 1px 2px rgba(39,52,61,.05); --shadow-sm:0 1px 3px rgba(39,52,61,.06),0 1px 2px rgba(39,52,61,.04); --shadow-card:0 2px 8px rgba(39,52,61,.06),0 1px 2px rgba(39,52,61,.04); --shadow-md:0 8px 24px rgba(39,52,61,.08); --shadow-lg:0 18px 48px rgba(39,52,61,.12); --shadow-teal:0 8px 24px rgba(58,155,148,.22); --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,"Courier New",monospace; --topbar-h:64px; --sidebar-w:268px; --ease:cubic-bezier(.22,.61,.36,1); background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.5; text-align:left; -webkit-font-smoothing:antialiased; } .mmx-app *, .mmx-app *::before, .mmx-app *::after { box-sizing:border-box; } .mmx-app h1,.mmx-app h2,.mmx-app h3 { color:var(--charcoal); margin:0; line-height:1.15; letter-spacing:-.01em; } .mmx-app p { margin:0; } .mmx-app img,.mmx-app svg { display:block; max-width:100%; } .mmx-app button { font-family:inherit; cursor:pointer; } /* buttons */ .mmx-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:.95rem; font-weight:600; line-height:1; padding:12px 20px; border-radius:var(--r-pill); border:1px solid transparent; background:none; color:var(--ink); transition:transform .12s var(--ease),background .16s,box-shadow .16s,border-color .16s; white-space:nowrap; } .mmx-btn:active { transform:translateY(1px) scale(.99); } .mmx-btn svg { width:18px; height:18px; } .mmx-btn-primary { background:var(--teal); color:#fff; box-shadow:var(--shadow-teal); } .mmx-btn-primary:hover { background:var(--teal-600); } .mmx-btn-ghost { background:var(--surface); color:var(--charcoal); border-color:var(--border); box-shadow:var(--shadow-xs); } .mmx-btn-ghost:hover { background:var(--teal-tint); border-color:var(--teal); color:var(--teal-700); } .mmx-btn-danger { background:var(--danger); color:#fff; } .mmx-btn-danger:hover { background:var(--danger-dark); } .mmx-btn-sm { padding:8px 14px; font-size:.85rem; } .mmx-btn-lg { padding:15px 28px; font-size:1rem; } .mmx-btn-icon { padding:10px; width:42px; height:42px; border-radius:var(--r-pill); border:none; background:none; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); } .mmx-btn-icon:hover { background:var(--teal-tint); } /* topbar */ .mmx-topbar { position:sticky; top:0; z-index:800; height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 20px; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--border); } .mmx-topbar-left,.mmx-topbar-right { display:flex; align-items:center; gap:12px; } .mmx-topbar-brand .mmx-logo-name { font-size:1.08rem; } .mmx-topbar-divider { width:1px; height:26px; background:var(--border); } .mmx-topbar-title { font-size:1.02rem; font-weight:700; color:var(--charcoal); } .mmx-sos-btn { box-shadow:0 6px 16px rgba(205,29,40,.24); } .mmx-sos-btn svg { width:16px; height:16px; } .mmx-bell { position:relative; } .mmx-bell .mmx-dot { position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:1.5px solid #fff; } .mmx-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#4FB3AA,#00796B); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; flex:none; } .mmx-account-btn { display:flex; align-items:center; gap:9px; padding:5px 10px 5px 6px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); transition:border-color .15s; } .mmx-account-btn:hover { border-color:var(--teal); } .mmx-account-name { font-size:.9rem; font-weight:600; color:var(--charcoal); } .mmx-account-btn svg { width:14px; height:14px; color:var(--muted-2); } .mmx-account-menu { position:absolute; top:58px; right:20px; width:260px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:8px; z-index:850; display:none; } .mmx-account-menu.open { display:block; } .mmx-account-head { display:flex; align-items:center; gap:10px; padding:10px; border-bottom:1px solid var(--border-2); margin-bottom:6px; } .mmx-account-head strong { display:block; font-size:.92rem; color:var(--charcoal); } .mmx-account-head span { font-size:.78rem; color:var(--muted-2); word-break:break-all; } .mmx-account-menu button { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px; border:none; background:none; border-radius:var(--r-sm); font-size:.9rem; color:var(--charcoal); } .mmx-account-menu button:hover { background:var(--teal-tint); } .mmx-account-menu button.mmx-danger { color:var(--danger); } .mmx-account-menu button svg { width:16px; height:16px; } .mmx-account-menu hr { border:none; border-top:1px solid var(--border-2); margin:6px 0; } /* language switcher */ .mmx-lang { position:relative; } .mmx-lang-menu { position:absolute; top:48px; right:0; width:196px; max-height:min(70vh,380px); overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:6px; z-index:850; display:none; } .mmx-lang-menu.open { display:block; } .mmx-lang-menu button { display:block; width:100%; text-align:left; padding:9px 12px; border:none; background:none; border-radius:var(--r-sm); font-size:.9rem; color:var(--charcoal); } .mmx-lang-menu button:hover { background:var(--teal-tint); } .mmx-lang-menu button.mmx-cur { color:var(--teal-700); font-weight:700; background:var(--teal-050); } /* shell + sidebar */ .mmx-shell { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:calc(100vh - var(--topbar-h)); } .mmx-sidebar { position:sticky; top:var(--topbar-h); align-self:start; height:calc(100vh - var(--topbar-h)); overflow-y:auto; border-right:1px solid var(--border); background:var(--surface); padding:14px 12px 0; display:flex; flex-direction:column; } .mmx-sidebar nav { flex:1; } .mmx-nav-group { margin-bottom:6px; } .mmx-nav-group-label { display:flex; align-items:center; justify-content:space-between; padding:14px 12px 6px; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); cursor:default; } .mmx-nav-group-label.mmx-collapsible { cursor:pointer; } .mmx-nav-group-label .mmx-chev { width:14px; height:14px; transition:transform .18s; color:var(--muted-2); } .mmx-nav-group.mmx-collapsed .mmx-chev { transform:rotate(-90deg); } .mmx-nav-group.mmx-collapsed .mmx-nav-items { display:none; } .mmx-nav-items { display:flex; flex-direction:column; gap:1px; } .mmx-nav-item { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--r-sm); font-size:.9rem; font-weight:500; color:var(--charcoal); border:none; background:none; width:100%; text-align:left; transition:background .13s,color .13s; position:relative; } .mmx-nav-item .mmx-ni-ico { width:18px; height:18px; color:var(--muted); flex:none; transition:color .13s; } .mmx-nav-item:hover { background:var(--teal-tint); } .mmx-nav-item:hover .mmx-ni-ico { color:var(--teal-700); } .mmx-nav-item.mmx-active { background:var(--teal-050); color:var(--teal-700); font-weight:600; } .mmx-nav-item.mmx-active .mmx-ni-ico { color:var(--teal-700); } .mmx-nav-item.mmx-active::before { content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--teal); } .mmx-nav-item .mmx-ni-badge { margin-left:auto; font-size:.64rem; font-weight:700; padding:2px 7px; border-radius:var(--r-pill); background:var(--teal-050); color:var(--teal-700); } .mmx-sidebar-foot { padding:12px 4px 16px; border-top:1px solid var(--border-2); margin-top:8px; } .mmx-plan-chip { display:flex; align-items:center; gap:10px; padding:11px 12px; background:linear-gradient(120deg,var(--teal-050),var(--teal-tint)); border-radius:var(--r-md); } .mmx-plan-chip .mmx-plan-dot { width:9px; height:9px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px rgba(58,155,148,.2); flex:none; } .mmx-plan-chip strong { display:block; font-size:.85rem; color:var(--teal-800); } .mmx-plan-chip span { font-size:.72rem; color:var(--muted); } /* main */ .mmx-main { padding:30px 34px 60px; max-width:1180px; } .mmx-view { animation:mmxfade .22s var(--ease); } @keyframes mmxfade { from { opacity:0; transform:translateY(6px); } } .mmx-welcome { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; } .mmx-welcome h1 { font-size:1.8rem; font-weight:800; } .mmx-welcome-sub { color:var(--muted); margin-top:6px; max-width:52ch; } .mmx-welcome .mmx-btn svg { width:18px; height:18px; } .mmx-home-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:22px; align-items:start; } .mmx-home-main,.mmx-home-side { display:flex; flex-direction:column; gap:22px; } .mmx-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:22px; } .mmx-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } .mmx-panel-head h2 { font-size:1.05rem; font-weight:700; } .mmx-panel-note { font-size:.84rem; color:var(--muted); margin-top:4px; } .mmx-eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); } /* ID card */ .mmx-idcard-tabs { display:inline-flex; gap:4px; padding:4px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-pill); margin-bottom:16px; } .mmx-idtab { padding:8px 18px; border-radius:var(--r-pill); border:none; background:none; font-size:.86rem; font-weight:600; color:var(--muted); } .mmx-idtab.mmx-active { background:var(--surface); color:var(--teal-700); box-shadow:var(--shadow-sm); } .mmx-idcard { border-radius:var(--r-xl); padding:24px; color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); } .mmx-idcard.mmx-standard { background:linear-gradient(135deg,#0C4A44 0%,#0B7A6F 55%,#3A9B94 100%); } .mmx-idcard.mmx-emergency { background:linear-gradient(135deg,#7A0E16 0%,#A8141E 55%,#CD1D28 100%); } .mmx-idcard::after { content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%); } .mmx-idcard-top { display:flex; align-items:flex-start; justify-content:space-between; position:relative; z-index:1; } .mmx-idcard-brand { display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.04em; } .mmx-idcard-brand svg { width:22px; height:22px; } .mmx-idcard-chip { font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-pill); background:rgba(255,255,255,.18); display:inline-flex; align-items:center; gap:5px; } .mmx-idcard-chip svg { width:13px; height:13px; } .mmx-idcard-body { display:flex; gap:18px; margin-top:22px; position:relative; z-index:1; } .mmx-idcard-photo { width:78px; height:78px; border-radius:var(--r-md); background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:700; flex:none; overflow:hidden; } .mmx-idcard-photo img { width:100%; height:100%; object-fit:cover; } .mmx-idcard-id { flex:1; min-width:0; } .mmx-idcard-name { font-size:1.4rem; font-weight:800; letter-spacing:-.01em; } .mmx-idcard-role { font-size:.92rem; opacity:.9; margin-top:2px; } .mmx-idcard-meta { display:flex; gap:22px; margin-top:14px; flex-wrap:wrap; } .mmx-idcard-meta .mmx-m { display:flex; flex-direction:column; } .mmx-idcard-meta .mmx-m span { font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; opacity:.7; } .mmx-idcard-meta .mmx-m strong { font-size:.96rem; font-weight:700; margin-top:2px; } .mmx-idcard-foot { display:flex; align-items:center; justify-content:space-between; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.18); position:relative; z-index:1; } .mmx-idcard-num { font-family:var(--font-mono); font-size:.95rem; letter-spacing:.12em; } .mmx-idcard-qr { width:60px; height:60px; border-radius:10px; background:#fff; padding:5px; flex:none; } .mmx-idcard-qr img { width:100%; height:100%; } .mmx-idcard-emg-list { margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:10px; position:relative; z-index:1; } .mmx-idcard-emg-list .mmx-e { background:rgba(255,255,255,.14); border-radius:var(--r-sm); padding:10px 12px; } .mmx-idcard-emg-list .mmx-e span { font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; opacity:.8; } .mmx-idcard-emg-list .mmx-e strong { display:block; font-size:.92rem; margin-top:3px; } /* quick actions */ .mmx-quick-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .mmx-qa { display:flex; flex-direction:column; align-items:center; gap:9px; padding:18px 10px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); text-align:center; transition:all .15s var(--ease); } .mmx-qa:hover { border-color:var(--teal); background:var(--teal-tint); transform:translateY(-2px); } .mmx-qa .mmx-qa-ico { width:42px; height:42px; border-radius:var(--r-sm); background:var(--teal-050); color:var(--teal-700); display:flex; align-items:center; justify-content:center; } .mmx-qa .mmx-qa-ico svg { width:21px; height:21px; } .mmx-qa span { font-size:.84rem; font-weight:600; color:var(--charcoal); } /* profile completion */ .mmx-pct { font-size:1.05rem; font-weight:800; color:var(--teal-700); } .mmx-progress { height:9px; border-radius:var(--r-pill); background:var(--bg-2); overflow:hidden; } .mmx-progress-bar { height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--teal-700),var(--teal)); transition:width .5s var(--ease); } .mmx-steps { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; } .mmx-step { display:flex; align-items:center; gap:12px; padding:11px 8px; border-radius:var(--r-sm); transition:background .13s; cursor:pointer; } .mmx-step:hover { background:var(--teal-tint); } .mmx-step .mmx-step-check { width:22px; height:22px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; flex:none; } .mmx-step.mmx-done .mmx-step-check { background:var(--teal); border-color:var(--teal); color:#fff; } .mmx-step .mmx-step-label { font-size:.9rem; color:var(--charcoal); } .mmx-step.mmx-done .mmx-step-label { color:var(--muted-2); text-decoration:line-through; } .mmx-step .mmx-step-arrow { margin-left:auto; color:var(--muted-2); width:16px; height:16px; } /* edit view */ .mmx-edit-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:16px; } .mmx-edit-head h1 { font-size:1.6rem; font-weight:800; margin-top:4px; } .mmx-save-indicator { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; padding:8px 14px; border-radius:var(--r-pill); opacity:0; transform:translateY(-4px); transition:opacity .2s,transform .2s; white-space:nowrap; } .mmx-save-indicator.mmx-show { opacity:1; transform:translateY(0); } .mmx-save-indicator.mmx-ok { color:var(--teal-700); background:var(--teal-050); } .mmx-save-indicator.mmx-err { color:var(--danger); background:#FBE9EB; } .mmx-save-indicator svg { width:15px; height:15px; } .mmx-edit-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:24px; align-items:start; } .mmx-edit-form { display:flex; flex-direction:column; gap:18px; } .mmx-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .mmx-field { display:flex; flex-direction:column; gap:7px; } .mmx-field label { font-size:.82rem; font-weight:600; color:var(--charcoal); } .mmx-field .mmx-hint { font-size:.78rem; color:var(--muted-2); } .mmx-input, .mmx-select, .mmx-textarea { width:100%; font:inherit; font-size:.95rem; color:var(--ink); padding:12px 14px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface); transition:border-color .15s,box-shadow .15s; } .mmx-textarea { min-height:88px; resize:vertical; line-height:1.5; } .mmx-input:focus, .mmx-select:focus, .mmx-textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(58,155,148,.14); } .mmx-input::placeholder, .mmx-textarea::placeholder { color:var(--muted-2); } .mmx-form-foot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--border-2); font-size:.82rem; } .mmx-preview-sticky { position:sticky; top:calc(var(--topbar-h) + 24px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:20px; } .mmx-preview-sticky .mmx-eyebrow { margin-bottom:12px; display:block; } @media (max-width:1080px) { .mmx-edit-grid { grid-template-columns:1fr; } .mmx-edit-preview { order:-1; } .mmx-preview-sticky { position:static; } } @media (max-width:560px) { .mmx-form-row { grid-template-columns:1fr; } } /* placeholder view */ .mmx-placeholder { max-width:520px; margin:60px auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; } .mmx-placeholder-ico { width:72px; height:72px; border-radius:var(--r-lg); background:var(--teal-050); color:var(--teal-700); display:flex; align-items:center; justify-content:center; } .mmx-placeholder-ico svg { width:34px; height:34px; } .mmx-placeholder h1 { font-size:1.5rem; } .mmx-placeholder p { color:var(--muted); } .mmx-proto-tag { font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#C9971B; background:#FDF6E3; border:1px solid #F2E4BC; padding:3px 8px; border-radius:var(--r-pill); } /* dashboard chooser (transition interstitial) */ .mmx-chooser-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; } .mmx-chooser { max-width:520px; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:40px 36px; text-align:center; } .mmx-chooser-logo { display:inline-flex; margin-bottom:18px; } .mmx-chooser h1 { font-size:1.5rem; font-weight:800; } .mmx-chooser p { color:var(--muted); margin-top:12px; line-height:1.55; } .mmx-chooser-actions { display:flex; flex-direction:column; gap:12px; margin-top:26px; } .mmx-chooser-actions .mmx-btn { width:100%; } .mmx-chooser-note { font-size:.82rem; color:var(--muted-2); margin-top:18px; } /* emergency modal */ .mmx-modal-overlay { position:fixed; inset:0; z-index:3000; background:rgba(39,52,61,.5); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:20px; } .mmx-modal-overlay.open { display:flex; } .mmx-modal { background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); width:100%; max-width:440px; overflow:hidden; padding:22px; } .mmx-emergency-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; } .mmx-emergency-head h2 { font-size:1.2rem; } .mmx-emergency-head span { font-size:.78rem; color:var(--muted-2); } .mmx-emg-badge { width:42px; height:42px; border-radius:var(--r-md); background:#FBE9EB; color:var(--danger); display:flex; align-items:center; justify-content:center; flex:none; } .mmx-emg-badge svg { width:24px; height:24px; } .mmx-emergency-call { display:flex; align-items:center; gap:14px; width:100%; padding:16px 18px; border-radius:var(--r-md); border:none; background:linear-gradient(120deg,var(--danger-dark),var(--danger)); color:#fff; text-align:left; box-shadow:0 8px 20px rgba(205,29,40,.28); } .mmx-emergency-call svg { width:26px; height:26px; } .mmx-emergency-call strong { display:block; font-size:1.02rem; } .mmx-emergency-call span { font-size:.82rem; opacity:.9; } .mmx-emergency-actions { display:flex; flex-direction:column; gap:8px; margin-top:14px; } .mmx-emg-action { display:flex; align-items:center; gap:13px; padding:13px 14px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); text-align:left; width:100%; transition:all .14s; } .mmx-emg-action:hover { border-color:var(--teal); background:var(--teal-tint); } .mmx-emg-action .mmx-ea-ico { width:36px; height:36px; border-radius:var(--r-sm); background:var(--teal-050); color:var(--teal-700); display:flex; align-items:center; justify-content:center; flex:none; } .mmx-emg-action .mmx-ea-ico svg { width:19px; height:19px; } .mmx-emg-action .mmx-ea-meta strong { display:block; font-size:.92rem; color:var(--charcoal); } .mmx-emg-action .mmx-ea-meta span { font-size:.78rem; color:var(--muted-2); } .mmx-emergency-foot { display:flex; align-items:center; gap:9px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border-2); font-size:.78rem; color:var(--muted); } /* logo */ .mmx-logo { display:inline-flex; align-items:center; gap:11px; } .mmx-logo-mark { flex:none; filter:drop-shadow(0 2px 4px rgba(0,121,107,.18)); } .mmx-logo-name { font-weight:800; letter-spacing:.04em; color:var(--charcoal); } /* mobile */ .mmx-mobile-only { display:none; } @media (max-width:1080px) { .mmx-home-grid { grid-template-columns:1fr; } } @media (max-width:860px) { .mmx-mobile-only { display:inline-flex; } .mmx-shell { grid-template-columns:1fr; } .mmx-sidebar { position:fixed; top:0; left:0; height:100vh; width:280px; z-index:1200; transform:translateX(-100%); transition:transform .26s var(--ease); box-shadow:var(--shadow-lg); } .mmx-sidebar.mmx-open { transform:translateX(0); } .mmx-drawer-scrim { position:fixed; inset:0; background:rgba(39,52,61,.4); z-index:1100; } .mmx-account-name { display:none; } .mmx-main { padding:20px 16px 50px; } .mmx-welcome { flex-direction:column; align-items:flex-start; } .mmx-welcome .mmx-btn { width:100%; } } @media (max-width:560px) { .mmx-sos-label { display:none; } .mmx-sos-btn { padding:9px; } .mmx-quick-actions { grid-template-columns:repeat(2,1fr); } .mmx-idcard-name { font-size:1.2rem; } .mmx-idcard-emg-list { grid-template-columns:1fr; } .mmx-topbar-title { display:none; } .mmx-idcard-body { flex-direction:column; } } /* --- style --- */ @keyframes awakeHeartPulse { 0%,100% { transform: scale(1); } 40% { transform: scale(1.08); filter: drop-shadow(0 0 18px rgba(0,191,165,0.55)); } 60% { transform: scale(1.02); } } .awake-heart-pulse { animation: awakeHeartPulse 0.9s ease-out 1 forwards; transform-origin: center; transform-box: fill-box; } /* --- style --- */ .mgx-hero{--mgx-teal:#3A9B94;--mgx-teal7:#007C73;--mgx-teal05:#EAF8F6;--mgx-ink:#1a1d23;--mgx-char:#27343D;--mgx-mut:#5a7a7a;--mgx-mut2:#8894a0;--mgx-bd:#e4edef; position:relative;overflow:hidden;padding:0;min-height:940px;background:linear-gradient(180deg,#FCFDFE 0%,#F4F7F9 100%);box-shadow:none;color:var(--mgx-ink);text-align:left;} .hero.mgx-hero{background:#ffffff!important;} /* --- image layers --- */ .mgx-map-img{position:absolute;top:150px;right:-40px;width:60%;max-width:none;pointer-events:none;user-select:none;z-index:1;} .mgx-earth-img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:104%;min-width:1150px;max-width:1750px;pointer-events:none;user-select:none;z-index:0;-webkit-mask-image:linear-gradient(to bottom,transparent 34%,#000 60%);mask-image:linear-gradient(to bottom,transparent 34%,#000 60%);} .mgx-hero-content{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:52px 40px 0;} .mgx-hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:40px;align-items:start;} /* --- left --- */ .mgx-badge{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mgx-teal7);background:var(--mgx-teal05);padding:7px 15px;border-radius:999px;} .mgx-title{font-size:clamp(2.6rem,4.3vw,3.9rem);font-weight:800;line-height:1.06;color:var(--mgx-char);letter-spacing:-.02em;margin:24px 0 0;max-width:11ch;} .mgx-title .mgx-teal{color:var(--mgx-teal);} .mgx-underline{width:58px;height:4px;border-radius:2px;background:var(--mgx-teal);margin:26px 0 0;} .mgx-sub{margin:24px 0 0;font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--mgx-mut);line-height:1.5;max-width:27ch;} .mgx-sub .mgx-teal{color:var(--mgx-teal);font-weight:700;} .mgx-sub strong{color:var(--mgx-char);font-weight:700;} .mgx-stats{display:flex;margin-top:46px;} .mgx-stat{display:flex;flex-direction:column;gap:9px;padding:0 28px;position:relative;background:none!important;border:none!important;box-shadow:none!important;cursor:pointer;text-align:left;} .mgx-stat:first-child{padding-left:0;} .mgx-stat:not(:last-child)::after{content:"";position:absolute;right:0;top:4px;bottom:4px;width:1px;background:var(--mgx-bd);} .mgx-stat .mgx-stat-ico{width:27px;height:27px;color:var(--mgx-teal);} .mgx-stat .mgx-stat-num{font-size:1.65rem;font-weight:800;color:var(--mgx-char);line-height:1;display:inline-flex;align-items:baseline;} .mgx-stat:first-child .mgx-stat-num,.mgx-stat:first-child .counter{color:var(--mgx-teal7);} .mgx-stat .counter{font-size:1.65rem;font-weight:800;line-height:1;} .mgx-plus{color:var(--mgx-teal7);font-weight:800;} .mgx-stat .mgx-stat-label{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mgx-mut);} .mgx-info{width:12px;height:12px;color:var(--mgx-mut2);flex:none;} /* Hero is always on a WHITE surface — force intended light-mode text colors regardless of the site [data-theme="dark"] theme (fixes white-on-white counters/labels on dark-mode phones). */ .mgx-hero .mgx-title{color:#27343D!important;} .mgx-hero .mgx-title .mgx-teal{color:#3A9B94!important;} .mgx-hero .mgx-sub{color:#5a7a7a!important;} .mgx-hero .mgx-sub .mgx-teal{color:#3A9B94!important;} .mgx-hero .mgx-sub strong{color:#27343D!important;} .mgx-hero .mgx-badge{color:#007C73!important;} .mgx-stats .mgx-stat .counter{color:#27343D!important;} .mgx-stats .mgx-stat:first-child .counter{color:#007C73!important;} .mgx-stats .mgx-stat .mgx-stat-label,.mgx-stats .mgx-stat .mgx-stat-label span{color:#5a7a7a!important;} .mgx-hero .mgx-band-slogan{color:#27343D!important;} .mgx-hero .mgx-band-sub{color:#5a7a7a!important;} .mgx-hero .mgx-band-eyebrow{color:#007C73!important;} .mgx-hero .mgx-popular-label{color:#5a7a7a!important;} .mgx-hero .mgx-chip{color:#27343D!important;} .mgx-hero .mgx-search-input{color:#1a1d23!important;} /* --- right (search + popular) --- */ .mgx-hero-right{padding-top:2px;margin-top:210px;} .mgx-search{position:relative;z-index:3;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--mgx-bd);border-radius:999px;padding:11px 11px 11px 24px;box-shadow:0 20px 52px rgba(39,52,61,.13);} .mgx-search:focus-within{border-color:var(--mgx-teal);box-shadow:0 20px 52px rgba(39,52,61,.14),0 0 0 4px rgba(58,155,148,.14);} .mgx-search-ico{color:var(--mgx-teal);display:flex;flex:none;} .mgx-search-ico svg{width:22px;height:22px;} .mgx-search-input{flex:1;min-width:0;border:none;outline:none;background:none;font:inherit;font-size:1.02rem;color:var(--mgx-ink);padding:8px 0;} .mgx-search-input::placeholder{color:var(--mgx-mut2);} .mgx-search-btn{flex:none;border:none;background:var(--mgx-teal);color:#fff;font-weight:700;font-size:.95rem;padding:13px 30px;border-radius:999px;box-shadow:0 8px 22px rgba(58,155,148,.28);cursor:pointer;transition:background .15s;} .mgx-search-btn:hover{background:#2C8B86;} .mgx-popular{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px;padding-left:8px;position:relative;z-index:3;} .mgx-popular-label{font-size:.9rem;color:var(--mgx-mut);} .mgx-chip{font-size:.9rem;color:var(--mgx-char);background:rgba(255,255,255,.65);border:1px solid var(--mgx-bd);border-radius:999px;padding:8px 16px;cursor:pointer;transition:all .14s;} .mgx-chip:hover{border-color:var(--mgx-teal);color:var(--mgx-teal7);background:#fff;} /* --- band over the earth --- */ .mgx-band-wrap{position:relative;z-index:3;display:flex;justify-content:center;margin-top:130px;padding:0 24px 90px;} .mgx-band{position:relative;max-width:840px;width:100%;text-align:center;padding:36px 44px 42px;border-radius:26px;background:rgba(255,255,255,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);box-shadow:0 24px 70px rgba(39,52,61,.09);} .mgx-band-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.18em;color:var(--mgx-teal7);opacity:.6;margin-bottom:6px;} .mgx-band-eyebrow::after{content:"";display:block;width:26px;height:2px;background:var(--mgx-teal);opacity:.5;margin:8px auto 0;border-radius:2px;} .mgx-band-slogan{font-size:clamp(1.7rem,2.9vw,2.5rem);font-weight:800;color:var(--mgx-char);letter-spacing:.01em;margin-top:12px;} .mgx-band-sub{font-size:1rem;color:var(--mgx-mut);margin-top:14px;} .mgx-band-globe{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;background:#fff;box-shadow:0 8px 20px rgba(39,52,61,.13);display:flex;align-items:center;justify-content:center;font-size:1.7rem;} /* --- responsive --- */ /* ---------- TABLET ---------- */ @media (max-width:1024px){ .mgx-hero{min-height:0;} .mgx-hero-content{padding:44px 32px 0;} .mgx-hero-grid{grid-template-columns:1fr;gap:30px;} .mgx-hero-right{order:2;margin-top:4px;} .mgx-map-img{position:relative;top:auto;right:auto;width:96%;max-width:640px;margin:14px auto -20px;display:block;} .mgx-earth-img{width:170%;min-width:1000px;} .mgx-band-wrap{margin-top:40px;padding-bottom:76px;} } /* ---------- MOBILE ---------- */ @media (max-width:560px){ .mgx-hero-content{padding:28px 18px 0;} .mgx-badge{font-size:.66rem;padding:6px 12px;} .mgx-title{font-size:2.05rem;line-height:1.1;max-width:100%;margin-top:18px;} .mgx-underline{margin-top:18px;} .mgx-sub{margin-top:18px;font-size:1.02rem;max-width:100%;} .mgx-stats{flex-wrap:wrap;gap:22px 0;margin-top:30px;} .mgx-stat{width:50%;padding:0 12px;box-sizing:border-box;} .mgx-stat:nth-child(odd){padding-left:0;} .mgx-stat::after{display:none!important;} .mgx-stat .mgx-stat-num,.mgx-stat .counter{font-size:1.45rem;} .mgx-search{padding:9px 9px 9px 18px;gap:10px;} .mgx-search-input{font-size:.95rem;} .mgx-search-btn{padding:12px 20px;font-size:.9rem;} .mgx-popular{padding-left:0;margin-top:18px;gap:8px;} .mgx-popular-label{width:100%;margin-bottom:2px;} .mgx-chip{font-size:.85rem;padding:7px 14px;} .mgx-map-img{width:118%;max-width:none;margin:16px -9% -30px;opacity:.95;} .mgx-earth-img{width:230%;min-width:0;} .mgx-band-wrap{margin-top:20px;padding:0 12px 80px;} .mgx-band{padding:28px 22px 36px;border-radius:22px;} .mgx-band-slogan{font-size:1.55rem;} .mgx-band-sub{font-size:.9rem;} } /* --- style --- */ #askMicBtn._mic-live{color:#e0314b !important;animation:mgMicPulse 1s ease-in-out infinite}@keyframes mgMicPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}} /* --- mgx-mobile-fixes --- */ /* ================= MOBILE FIXES (Peter 2026-07-24) — only <=1023px; desktop (>=1024px) untouched ================= */ @media (max-width:1023px){ html,body{max-width:100%;overflow-x:hidden;} } @media (max-width:767px){ .mgx-hero-content img,.mgx-hero-content svg{max-width:100%;} /* Opgave 7 — one primary search on phones: hide the redundant sticky top search bar */ #mobileSearchBar{display:none!important;} /* Opgave 2 — compact header that fits the viewport */ .header{padding:10px 14px!important;gap:8px!important;} .header .nav-links{display:none!important;} .header-right{gap:6px!important;min-width:0;flex-wrap:nowrap;} .header-right .lang-select{max-width:132px;font-size:.82rem!important;padding:6px 8px!important;} .mobile-donate-btn{display:none!important;} .mgx-brand .mgx-brand-mark{width:30px;height:30px;} .mgx-brand .mgx-brand-name{font-size:1rem;} .mgx-brand .mgx-brand-tag{font-size:.44rem;} /* Opgave 3+4 — single-column hero in natural flow; decorative map hidden (was a tall empty block) */ #viewLanding .mgx-hero{min-height:0!important;padding:0!important;} .mgx-hero-content{padding:24px 16px 0!important;max-width:100%!important;} .mgx-hero-grid{display:block!important;grid-template-columns:none!important;} .mgx-hero-left,.mgx-hero-right{width:100%!important;min-width:0!important;margin:0!important;padding:0!important;} .mgx-hero-right{margin-top:22px!important;} .mgx-map-img{display:none!important;} .mgx-earth-img{width:150%!important;min-width:0!important;max-width:none!important;} /* Opgave 5 — responsive headline */ .mgx-badge{margin-bottom:14px;} .mgx-title{font-size:clamp(1.9rem,8.2vw,2.5rem)!important;line-height:1.08!important;letter-spacing:-.02em;max-width:100%!important;overflow-wrap:break-word;word-break:normal;margin-top:16px!important;} .mgx-underline{margin-top:16px!important;} .mgx-sub{max-width:100%!important;font-size:1rem!important;margin-top:16px!important;} /* Opgave 6 — clean 2x2 stats */ .mgx-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 14px!important;margin-top:28px!important;} .mgx-stat{padding:0!important;min-width:0!important;} .mgx-stat::after{display:none!important;} .mgx-stat .mgx-stat-num,.mgx-stat .counter{font-size:clamp(1.25rem,6.6vw,1.6rem)!important;} /* Opgave 7 — hero search fits; input shrinks; button stays put */ .mgx-search{width:100%!important;max-width:100%!important;padding:8px 8px 8px 16px!important;gap:8px!important;} .mgx-search-input{min-width:0!important;flex:1 1 auto;font-size:.95rem!important;} .mgx-search-btn{flex:0 0 auto;padding:11px 18px!important;font-size:.9rem!important;} /* Opgave 8 — popular searches wrap */ .mgx-popular{margin-top:16px!important;gap:8px!important;padding-left:0!important;} .mgx-popular-label{width:100%;margin-bottom:2px;} .mgx-chip{font-size:.86rem;padding:7px 14px;} /* Opgave 9 — responsive card + globe */ .mgx-band-wrap{margin-top:22px!important;padding:0 16px 44px!important;} .mgx-band{width:100%!important;max-width:100%!important;padding:26px 20px 34px!important;border-radius:20px!important;} .mgx-band-slogan{font-size:clamp(1.4rem,6.2vw,1.9rem)!important;line-height:1.15;} .mgx-band-sub{font-size:.92rem!important;} .mgx-band-globe{width:48px;height:48px;bottom:-24px;} /* Opgave 10 — readable footer, clear of the fixed support button */ .footer{padding:26px 16px calc(112px + env(safe-area-inset-bottom))!important;line-height:1.65!important;} .footer a{white-space:normal;} /* Opgave 11 — compact support button above the safe area */ .medicusChatBtn{right:14px!important;bottom:calc(14px + env(safe-area-inset-bottom))!important;max-width:calc(100vw - 28px)!important;padding:11px 16px!important;font-size:.82rem!important;} } @media (max-width:430px){ /* very narrow: shrink the logo footprint (hide tagline) + compact language so the header fits to 320px */ .mgx-brand .mgx-brand-tag{display:none!important;} .header-right .lang-select{max-width:108px;font-size:.78rem!important;} } @media (max-width:380px){ .mgx-band-slogan{font-size:1.3rem!important;} .header{padding:10px 10px!important;} .header-right{gap:5px!important;} .header-right .lang-select{max-width:96px;} .mgx-stat .mgx-stat-num,.mgx-stat .counter{font-size:1.28rem!important;} } /* --- style --- */ .near-me-btn-panel:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(58,155,148,0.5); } /* 2026-05-22 (Peter feedback): grøn knap SKAL være synlig på mobil — det er hovedindgangen */ @media(max-width:768px) { .near-me-btn-panel { padding:16px 14px;font-size:1em; } } /* --- style --- */ .su-hours-preset { background:white; color:var(--accent); border:1px solid var(--accent); padding:7px 12px; border-radius:7px; cursor:pointer; font-weight:600; font-size:0.82em; transition:all 0.15s; } .su-hours-preset:hover { background:#e7f4f3; } .su-hours-preset.active { background:var(--accent); color:white; } /* --- style --- */ /* AMEX-stige (Peter 2026-08-01): L3-EKSTRA-features skjules for L2/Micro (level<3). Supersæt-doktrin — L3 beholder alt. Reversibel: fjern klassen prof-below-l3. */ body.prof-below-l3 #profMediTeleBox, body.prof-below-l3 #profFlashReportBox, body.prof-below-l3 #profCalendarBox, body.prof-below-l3 #profBookingsBox, body.prof-below-l3 #profBookingSettingsBox, body.prof-below-l3 #profMtYieldBox, body.prof-below-l3 #profStaffInviteBox, body.prof-below-l3 #profKartotekBox, body.prof-below-l3 #profHoursBox { display: none !important; } /* Åbningstider = L3, IKKE L2 (Peter 2026-08-06). Skjules for L1/L2 (below-L3), vises kun på L3. Apotek/Micro sætter tider via DIY-micrositen. Skjul, ikke slet. */ /* Gratis MM = TAK efter BETALING (Peter 2026-08-01): skjul indtil betalt. subscription_status !== 'active' (fx 'pending'/prøve) → prof-unpaid → skjult. */ body.prof-unpaid #profMyMmBtn { display: none !important; } /* Micro/apotek (Peter 2026-08-01): læge-only felter (konsultationspriser + lægenummer) hører ikke til et apotek/firma → skjul for is_micro. */ body.prof-micro #profPricingBox, body.prof-micro #profMedIdField, /* Micro-oprydning (Peter 2026-08-02): L3-opgraderings/Stripe-boks, My Medicus Specials og Peer Witness hører ikke til et apotek/firma. */ body.prof-micro #profStripeBox, body.prof-micro #profMyOffersBox, body.prof-micro #profVouchBox { display: none !important; } /* Kat A trumfer micro (Peter 2026-08-12: "det handler om Kat A, ikke micro"): en læge med et Kat-A-speciale (kræver Medical ID → skal verificeres) SKAL se Medical-ID-nummer + dokument-upload + verify-blok ved login, også hvis han tilfældigvis har en microsite (is_micro). To body-klasser slår 1-klasses-hide. */ body.prof-micro.prof-kata #profMedIdField, body.prof-micro.prof-kata #profMedIdDocBox, body.prof-micro.prof-kata #profVerifyBlock { display: block !important; } /* Navneskilt = My Medicus (patient), IKKE professionel (Peter 2026-08-02): hverken L2 eller L3 skal have den i prof-dashboardet — den bor inde i MM. */ #profNameTagBtn { display: none !important; } /* Micro = KUN Peters 12 punkter, alt andet væk (Peter 2026-08-02): stats · Del din profil · Min MM · Indbakke hører ikke til Micro. Log ud bliver. Senere kan vi bygge til "på det rigtige sted". */ body.prof-micro #profStatsBar, body.prof-micro #profShareBox, body.prof-micro #profMyMmBtn, body.prof-micro #profInboxBtn, /* Åbningstider/tilgængelighed = redundant for Micro (Peter 2026-08-02): Micro skriver tider/priser/hilsner selv i de 3 frie felter (DIY, auto-oversat til 25 sprog). Struktureret hours-boks hører ikke til Micro. */ body.prof-micro #profHoursBox { display: none !important; } /* Subtraktiv gate (Peter 2026-08-03, "kør omvendt vej"): multi-lokation (Clinics) + multi-specialitet (Specialties) = L3-only jf. niveau-tabellen. Skjul editorernes INDHOLD for level<3 (per-lokation priser + cover-dublet bor her) — belt-and-suspenders oveni nav-gaten. L2/Micro redigerer sin ene lokation via adressefelterne (synkes til primær-lokation ved gem). L3 urørt. */ body.prof-below-l3 #profLocationsBox, body.prof-below-l3 #profExpertisesBox { display: none !important; } /* ===== MICRO EDIT-FORM = KUN de 13 punkter (Peter 2026-08-02) ===== ALT herunder er gated på body.prof-micro → ikke-Micro/L3 er 100% urørt. REMOVALS = display:none (felter uden for de 13 punkter). REORDER = CSS order på #profForm's direkte børn (INGEN DOM-flyt i template-literal). Fuldt reversibelt: fjern reglerne el. prof-micro-klassen. */ body.prof-micro #profMedIdDocBox, /* Medicinsk ID-dokument (upload-boks) */ body.prof-micro #profTitleField, /* Titel-felt */ body.prof-micro #profEducatedField, /* Uddannet i */ body.prof-micro #profSloganField, /* Slogan + Generér */ body.prof-micro #profVerifyBlock, /* Verificér din medicinske ID — GRATIS */ body.prof-micro #profUpgradeCta, /* 2. opgraderings-boks (bunden af formularen) */ body.prof-micro .loc-save-btn { display: none !important; } /* dublet per-klinik "Gem" */ /* Save-konsolidering (Peter 2026-08-03): Micro har KUN én Gem-knap. Profil-formens separate Gem skjules; microsite-editorens "Gem & gør live" gemmer begge dele (den kalder parent.profSave via sideSaveAll). Ingen to-knap-forvirring. */ /* Gemme-knap SKAL være synlig for micro (Peter 2026-08-12): den var skjult i troen på at iframe-microsite-editorens "Gem og gå live" gemte profil-felterne via parent.profSave() — men i praksis efterlod det micro-konti UDEN en synlig gemme-knap → adresse/foto/baggrund "gemmes ikke". profSave() er verificeret sund (gemmer + synker til lokation), så vi viser knappen igen. Fuldt reversibelt. */ /* (tidligere: body.prof-micro #profSaveBar { display:none !important; }) */ /* Micro strikt rækkefølge (Peter 2026-08-02): loadProfForm() bygger nu en dedikeret is_micro-skabelon der EMITTERER felt-blokkene i den låste 1–12-orden, så 'order:'-reglerne er fjernet (de ville tværtimod overstyre DOM-ordenen). #profForm forbliver flex-kolonne → ren kilde-/DOM-orden. */ body.prof-micro #profForm { display: flex; flex-direction: column; } /* --- mgCmpStyle --- */ #profCompareBox{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;margin-bottom:20px;} #profCompareBox h3{margin:0 0 4px;font-size:1.05em;color:var(--text);} #profCompareBox .cmp-sub{margin:0 0 16px;color:var(--muted);font-size:0.9em;line-height:1.5;} #profCompareBox .cmp-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;} #profCompareBox input.cmp-url{flex:1;min-width:220px;padding:11px 13px;border:1px solid var(--border);border-radius:10px;font-size:0.95em;} #profCompareBox button.cmp-go{background:var(--teal);color:#fff;border:0;border-radius:10px;padding:11px 22px;font-weight:700;cursor:pointer;font-size:0.95em;} #profCompareBox button.cmp-go:disabled{opacity:.55;cursor:progress;} #mgCmpCols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;} @media(max-width:560px){#mgCmpCols{grid-template-columns:1fr!important;}} .cmp-col{border:1px solid var(--border);border-radius:14px;padding:16px;} .cmp-col.med{border-color:var(--teal);box-shadow:0 0 0 2px rgba(58,155,148,.15);} .cmp-col h4{margin:0 0 2px;font-size:0.92em;color:var(--text);} .cmp-col .cmp-host{font-size:0.8em;color:var(--muted);margin-bottom:12px;word-break:break-all;} .cmp-metric{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border);} .cmp-metric:first-of-type{border-top:0;} .cmp-metric .cmp-ic{width:24px;height:24px;flex:none;color:var(--teal);} .cmp-metric .cmp-lbl{flex:1;font-size:0.86em;color:var(--text);} .cmp-metric .cmp-val{font-size:1.1em;font-weight:800;min-width:36px;text-align:right;} .cmp-stamp{margin-top:12px;font-size:0.74em;color:var(--muted);text-align:center;} .cmp-hint{color:var(--muted);font-size:0.85em;margin-top:8px;line-height:1.5;} .cmp-metric .cmp-lbltxt{flex:1;display:flex;flex-direction:column;} .cmp-metric .cmp-expl{font-size:0.72em;color:var(--muted);line-height:1.3;margin-top:1px;} .cmp-total{margin-top:10px;padding-top:10px;border-top:2px solid var(--border);display:flex;justify-content:space-between;align-items:baseline;} .cmp-total .cmp-total-lbl{font-size:0.86em;font-weight:700;color:var(--text);} .cmp-total .cmp-total-val{font-size:1.35em;font-weight:800;} #mgCmpUpsell{margin-top:14px;padding:14px 16px;background:rgba(58,155,148,.08);border:1px solid var(--teal);border-radius:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;} #mgCmpUpsell .cmp-up-txt{flex:1;min-width:200px;font-size:0.88em;line-height:1.5;color:var(--text);} /* --- style --- */ /* 2026-05-15 (Peter "annimerede punkter" — bringer animationen tilbage): Q&A rows kommer pænt ind enkeltvis når de scrolles i syne (staggered), og deres venstre-bjælke pulserer SUBTILT ved hover så de "lever". Bedre demo-præsentation = mere selvtillid på scenen. */ @keyframes qaFadeSlideIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes qaPulseBorder { 0%,100% { box-shadow: -4px 0 0 0 var(--accent), 0 0 0 0 rgba(58,155,148,0); } 50% { box-shadow: -4px 0 0 0 var(--accent), -4px 0 16px 2px rgba(58,155,148,0.35); } } .qaRow { display: grid; grid-template-columns: 1fr 170px; gap: 16px; align-items: center; scroll-margin-top: 90px; position: relative; opacity: 0; transition: transform 0.18s ease, box-shadow 0.18s ease; } .qaRow.qaInView { animation: qaFadeSlideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* 2026-05-17 (Peter "springer de forskellige felter når min mus kommer i nærheden"): fjernet translateX-jump + pulse-animation på hover. Bevarer kun subtil baggrunds-tint så feltet stadig signalerer at det er klikbart. */ .qaRow:hover { background: rgba(58,155,148,0.04); } /* Reduced motion: respect user's OS preference — show instantly, no animation */ @media (prefers-reduced-motion: reduce) { .qaRow { opacity: 1; } .qaRow.qaInView, .qaRow:hover { animation: none; } } .qaBtn { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#2C8B86,#1a5f5b); color: white; padding: 14px 16px; border-radius: 6px; text-decoration: none; font-weight: 700; letter-spacing: 0.05em; text-align: center; height: 48px; transition: transform 0.12s, box-shadow 0.12s; } .qaBtn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(44,139,134,0.3); color: white; } @media (max-width: 640px) { .qaRow { grid-template-columns: 1fr; gap: 12px; } .qaBtn { width: 100%; padding: 12px 14px; font-size: 0.95em; } } /* FERIE-2026-05-13: Anchor-copy button på hver Q&A row. Lader læge/sek/medarbejder kopiere deep-link til specifik question. Vises som lille -ikon i top-højre, opacitet stiger ved hover. */ .qaAnchor { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.7); border: 1px solid rgba(58,155,148,0.3); border-radius: 6px; cursor: pointer; opacity: 0.5; font-size: 0.85em; line-height: 1; transition: opacity 0.15s, transform 0.15s; z-index: 1; } .qaRow:hover .qaAnchor { opacity: 1; } .qaAnchor:hover { transform: scale(1.1); background: var(--accent-light); } .qaAnchor.copied { background: #00C853; color: white; opacity: 1; } .qaAnchorToast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #0d3536; color: white; padding: 10px 18px; border-radius: 8px; font-size: 0.88em; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 9999; } .qaAnchorToast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); } /* Jump-bar pills (sticky table-of-contents for FAQ) */ .qaJump { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: #f0f7f6; border: 1px solid #d6ebe9; border-radius: 10px; margin-bottom: 18px; position: sticky; top: 8px; z-index: 5; backdrop-filter: blur(6px); } .qaJump a { display: inline-block; padding: 6px 11px; background: white; border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; text-decoration: none; font-size: 0.82em; font-weight: 600; transition: all 0.12s; white-space: nowrap; } .qaJump a:hover { background: var(--accent); color: white; } .qaGroup { margin: 26px 0 12px; padding: 8px 14px; background: linear-gradient(90deg, var(--accent) 0%, transparent 100%); color: white; border-radius: 6px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85em; } /* --- style --- */ /* Inline Medicus CI-icons til Level-matrix */ .lvl-feat { display:flex; align-items:center; gap:8px; padding:5px 0; } .lvl-feat svg { flex-shrink:0; width:18px; height:18px; color:var(--accent); } .lvl-feat-gold svg { color:#8B6914; } .lvl-feat-gray svg { color:#999; } /* --- style --- */ .lvl-tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px; border:1.5px solid #d4dbe0; } .lvl-tbl { width:100%; border-collapse:collapse; background:white; } .lvl-tbl th, .lvl-tbl td { padding:14px 14px; border-bottom:1px solid #eef1f3; vertical-align:middle; } .lvl-tbl thead th { font-size:1em; font-weight:800; text-align:center; padding:18px 14px; } .lvl-tbl thead th:first-child { text-align:left; background:#f4f7f9; color:#5a7a7a; font-size:0.85em; font-weight:700; letter-spacing:0.5px; } .lvl-tbl thead .col-l1 { background:#fafafa; color:#1a1d23; } .lvl-tbl thead .col-l2 { background:linear-gradient(135deg,#e0f7f5,#f7fdfc); color:var(--accent-dark); border-top:3px solid var(--accent); } .lvl-tbl thead .col-l3 { background:linear-gradient(135deg,#fff6e8,#fffaef); color:#8B6914; border-top:3px solid #FFC107; position:relative; } .lvl-tbl thead .col-l3::before { content:"PREMIUM"; position:absolute; top:-3px; right:8px; background:#277A72; color:#fff; font-size:0.55em; font-weight:800; letter-spacing:1px; padding:2px 8px; border-radius:0 0 6px 6px; } .lvl-tbl thead .stet-svg { width:28px; height:28px; display:block; margin:0 auto 6px; } .lvl-tbl thead .lvl-price { display:block; font-size:0.78em; font-weight:600; margin-top:4px; opacity:0.85; } .lvl-tbl tbody td { text-align:center; } .lvl-tbl tbody td.col-l1 { background:#fafafa; } .lvl-tbl tbody td.col-l2 { background:linear-gradient(135deg,#f7fdfc,#ffffff); } .lvl-tbl tbody td.col-l3 { background:linear-gradient(135deg,#fffaef,#ffffff); } .lvl-tbl tbody td.feat-name { text-align:left; font-weight:700; color:#1a1d23; background:#f4f7f9; } .lvl-tbl tbody td.feat-name .feat-icon { display:inline-flex; align-items:center; gap:10px; } .lvl-tbl tbody td.feat-name svg { width:20px; height:20px; flex-shrink:0; color:var(--accent); } .lvl-tbl .yes svg { color:var(--accent); width:22px; height:22px; } .lvl-tbl .col-l3.yes svg { color:#FFC107; } .lvl-tbl .col-l1.yes svg { color:#1a1d23; } .lvl-tbl .no { color:#cfd5da; font-size:1.4em; } .lvl-tbl tfoot td { padding:18px 14px; } .lvl-tbl tfoot button { width:100%; border:0; border-radius:8px; font-weight:700; padding:11px 14px; cursor:pointer; font-size:0.92em; } /* --- style --- */ /* FERIE-2026-05-13 (Peter): flag-blink keyframe — teal-familien only per verdenskort-doktrin. 3 pulse i 1.8s, slutter på Medicus teal. */ @keyframes covBlink { 0%, 100% { fill: #3A9B94; stroke: #fff; stroke-width: 0.6; } 33% { fill: #B5F2EC; stroke: #3A9B94; stroke-width: 1.4; } 66% { fill: #00BFA5; stroke: #fff; stroke-width: 0.6; } } .cov-blink-active { animation: covBlink 0.55s ease-in-out 3; transform-box: fill-box; transform-origin: center; } /* Flag-knapper i legenden */ .cov-flag-btn { cursor: pointer; border: none; transition: transform 0.15s, box-shadow 0.15s, filter 0.15s; font-family: inherit; } .cov-flag-btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 4px 12px rgba(58,155,148,0.25); } .cov-flag-btn:active { transform: translateY(0); } #medicusChatBtn { position: fixed; bottom: 22px; right: 22px; width: 46px; height: 46px; padding: 0; background: linear-gradient(135deg, #3A9B94, #00695C); color: white; border: 0; border-radius: 50%; box-shadow: 0 6px 20px rgba(58,155,148,0.45); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 99996; transition: transform 0.2s, box-shadow 0.2s; font-family: inherit; } #medicusChatBtn .mc-btn-icon { display: block; } #medicusChatBtn .mc-btn-x { font-size: 1.5rem; line-height: 1; font-weight: 400; } @media (max-width: 480px) { #medicusChatBtn { bottom: calc(84px + env(safe-area-inset-bottom)); } #medicusChatPanel { bottom: calc(140px + env(safe-area-inset-bottom)); max-height: calc(100vh - 190px); } } #medicusChatBtn:hover { transform: scale(1.06); box-shadow: 0 8px 28px rgba(58,155,148,0.6); } #medicusChatBtn .pulse { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; background: #ff5252; border: 2px solid white; border-radius: 50%; animation: pulse 1.4s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.55; } } #medicusChatPanel { position: fixed; bottom: 92px; right: 22px; width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 130px); background: white; border-radius: 18px; box-shadow: 0 12px 48px rgba(0,0,0,0.18); z-index: 99997; display: none; flex-direction: column; overflow: hidden; font-family: -apple-system, system-ui, sans-serif; } #medicusChatPanel.open { display: flex; animation: slideUp 0.25s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .mc-header { background: linear-gradient(135deg, #3A9B94, #00695C); color: white; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; } .mc-header .ttl { font-size: 1em; font-weight: 700; line-height: 1.2; } .mc-header .sub { font-size: 0.78em; opacity: 0.92; margin-top: 2px; } .mc-close { background: transparent; border: 0; color: white; font-size: 1.4em; cursor: pointer; opacity: 0.8; padding: 0 4px; } .mc-close:hover { opacity: 1; } .mc-messages { flex: 1; overflow-y: auto; padding: 14px; background: #fafdfd; display: flex; flex-direction: column; gap: 10px; } .mc-msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 0.92em; line-height: 1.45; word-wrap: break-word; } .mc-msg.assistant { background: white; border: 1px solid #d0e3e1; color: #0d3536; align-self: flex-start; border-bottom-left-radius: 4px; } .mc-msg.user { background: linear-gradient(135deg, #3A9B94, #00695C); color: white; align-self: flex-end; border-bottom-right-radius: 4px; } .mc-typing { display: inline-flex; gap: 3px; padding: 12px 14px; } .mc-typing span { width: 7px; height: 7px; background: #3A9B94; border-radius: 50%; animation: typing 1.4s infinite; } .mc-typing span:nth-child(2) { animation-delay: 0.2s; } .mc-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes typing { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } } .mc-input-row { border-top: 1px solid #e0e8e7; padding: 10px 12px; display: flex; gap: 8px; background: white; } .mc-input { flex: 1; padding: 10px 12px; border: 1px solid #d0e3e1; border-radius: 22px; font-size: 0.92em; outline: none; font-family: inherit; } .mc-input:focus { border-color: #3A9B94; } .mc-send { background: linear-gradient(135deg, #3A9B94, #00695C); color: white; border: 0; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1em; flex-shrink: 0; } .mc-send:disabled { opacity: 0.5; cursor: not-allowed; } .mc-quickreplies { padding: 8px 12px 0; display: flex; gap: 6px; flex-wrap: wrap; } .mc-qr-btn { background: white; border: 1px solid #d0e3e1; color: #00695C; font-size: 0.78em; padding: 5px 10px; border-radius: 14px; cursor: pointer; } .mc-qr-btn:hover { background: #e0f7f5; border-color: #3A9B94; } .mc-disclaimer { font-size: 0.7em; color: #5a7a7a; text-align: center; padding: 4px 12px 8px; border-top: 1px solid #f0f3f5; } @media print { #medicusChatBtn, #medicusChatPanel { display: none !important; } /* Clean single-document print of the admin Security Pitch — only when the Print button toggles body.printing-doc, so it never affects other prints (e.g. the MM QR card). Isolates .printable-doc, hides all admin chrome. */ body.printing-doc * { visibility: hidden !important; } body.printing-doc .printable-doc, body.printing-doc .printable-doc * { visibility: visible !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } body.printing-doc .printable-doc { position: absolute; left: 0; top: 0; width: 100%; padding: 16px 20px; background: #fff !important; } body.printing-doc .noprint { display: none !important; } } /* --- mgx-header-responsive: nav overflow -> dropdown --- */ .header { gap: 12px; } .header .nav-links { flex-wrap: nowrap; min-width: 0; } .header .nav-link { white-space: nowrap; } .header-right { flex-wrap: nowrap; } .header-stats { white-space: nowrap; } @media (max-width: 1400px) { .header .nav-link { padding: 8px 10px; font-size: .8em; } .header-right { gap: 8px; } } @media (max-width: 1120px) { .header-stats { display: none !important; } } /* "Mere"-knap + dropdown */ .mgx-more { position: relative; } .mgx-more-btn { display: inline-flex; align-items: center; gap: 4px; } .mgx-more-menu { position: fixed; z-index: 4000; min-width: 210px; padding: 6px; background: var(--card, #fff); border: 1px solid #e2e8ea; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.14); display: none; flex-direction: column; } .mgx-more.open .mgx-more-menu { display: flex; } .mgx-more-menu .nav-link { display: block; width: 100%; text-align: left; padding: 9px 12px !important; font-size: .86em !important; border-radius: 8px; } .mgx-more-menu .nav-link:hover { background: #eef7f6; } .cmp-spin{display:inline-block;width:12px;height:12px;border:2px solid rgba(58,155,148,.35);border-top-color:#3A9B94;border-radius:50%;animation:cmpspin .8s linear infinite;vertical-align:-1px;margin-right:6px;} @keyframes cmpspin{to{transform:rotate(360deg)}} /* Reduce excessive whitespace above the footer on the redesigned homepage hero */ .mg-original .mgx-hero.mgx-hero { min-height: 800px !important; } .mg-original .mgx-band-wrap.mgx-band-wrap { margin-top: 90px !important; padding: 0 24px 24px !important; } @media (max-width: 1024px) { .mg-original .mgx-hero.mgx-hero { min-height: 0 !important; } .mg-original .mgx-band-wrap.mgx-band-wrap { margin-top: 34px !important; padding-bottom: 24px !important; } } @media (max-width: 560px) { .mg-original .mgx-band-wrap.mgx-band-wrap { margin-top: 18px !important; padding: 0 12px 24px !important; } }