/* ─────────────────────────────────────────────────────────────────────────── * Motoco CH – styles for the B2B embed form and utility pages. Ubuntu Sans is self-hosted in static/fonts/ (CORS-safe, nDSG-compliant). YOOtheme theme.1.css is loaded before this file and sets the base UIkit variables; we only override what is necessary. * ─────────────────────────────────────────────────────────────────────────── */ :root { --tm-primary: #C8901A; --tm-primary-lt: rgba(200,144,26,.12); --tm-dark: #1a1a1a; --tm-radius: 4px; } /* ── Typography ──────────────────────────────────────────────────────────── */ /* Ensure Ubuntu Sans loads from our self-hosted copy regardless of CORS on www.motoco.ch. Mirrors what YOOtheme theme.1.css sets on html{…}. */ html, body { font-family: 'Ubuntu Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge, .uk-heading-2xlarge { font-family: 'Ubuntu Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Ban PT Serif site-wide */ * { font-family: inherit; } blockquote, cite, q, .uk-blockquote { font-family: 'Ubuntu Sans', sans-serif !important; font-style: normal !important; } /* ── Embed-mode overrides ────────────────────────────────────────────────── */ /* Applied via in base_embed.html */ .tm-embed-root { background: transparent !important; } .tm-embed-root .tm-form-card { box-shadow: none; border-radius: 0; background: transparent; } .tm-embed-root .uk-card-body { padding: 0; } /* ── Registration Form ───────────────────────────────────────────────────── */ .tm-form-card { border-radius: 8px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,.12); } .tm-fieldset { margin-bottom: 32px; border: 0; padding: 0; } .tm-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em; color: var(--tm-primary); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--tm-primary-lt); width: 100%; } .uk-form-label { font-size: 13px; font-weight: 600; color: var(--tm-dark); margin-bottom: 6px; display: block; } .uk-input, .uk-textarea, .uk-select { border-radius: var(--tm-radius) !important; border: 1.5px solid #ddd !important; font-family: 'Ubuntu Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 15px !important; transition: border-color .15s, box-shadow .15s !important; } .uk-input:focus, .uk-textarea:focus { border-color: var(--tm-primary) !important; box-shadow: 0 0 0 3px rgba(200,144,26,.14) !important; } .tm-field-error .uk-input, .tm-field-error .uk-textarea { border-color: #e21 !important; } .tm-form-footer { border-top: 1px solid #eee; padding-top: 24px; } /* ── Zefix autocomplete ──────────────────────────────────────────────────── */ .tm-autocomplete-wrap { position: relative; } .tm-autocomplete { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1.5px solid #ddd; border-radius: var(--tm-radius); box-shadow: 0 8px 32px rgba(0,0,0,.14); z-index: 999; max-height: 300px; overflow-y: auto; } .tm-ac-item { padding: 11px 16px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #f0f0f0; line-height: 1.4; } .tm-ac-item:last-child { border-bottom: none; } .tm-ac-item:hover, .tm-ac-item.is-active { background: var(--tm-primary-lt); } .tm-ac-uid { font-size: 12px; color: #888; margin-left: 6px; } .tm-ac-ort { font-size: 12px; color: #888; } .tm-ac-lf { font-size: 11px; color: #bbb; } /* ── Status pages (verify, success, error) ───────────────────────────────── */ .tm-status-section { padding: 80px 0; } .tm-status-card { max-width: 560px; margin: auto; text-align: center; padding: 48px 40px; } .tm-status-icon { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; } .tm-status-icon--success { background: #e8f5e9; color: #2E7D32; } .tm-status-icon--error { background: #fdecea; color: #C62828; } .tm-status-icon--pending { background: var(--tm-primary-lt); color: var(--tm-primary); } .tm-status-icon--info { background: #e3f2fd; color: #1565C0; } /* ── Static pages (Impressum, Datenschutz) ───────────────────────────────── */ .tm-static-section { padding: 64px 0; } .tm-static-section h1 { font-size: 2rem; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 3px solid var(--tm-primary); } .tm-static-section h2 { margin-top: 32px; margin-bottom: 12px; font-size: 1.1rem; } .tm-static-section p, .tm-static-section li { color: #555; line-height: 1.8; } /* ── Footer (utility pages) ──────────────────────────────────────────────── */ .tm-footer-health { background: #111 !important; border-top: 1px solid rgba(255,255,255,.06); } .uk-section-secondary { background: var(--tm-dark) !important; } .uk-section-secondary .uk-grid-divider > :not(.uk-first-column)::before { border-left-color: rgba(255,255,255,.10); } .uk-section-secondary .uk-text-muted { color: rgba(255,255,255,.55) !important; } .uk-section-secondary a { color: rgba(255,255,255,.55); } .uk-section-secondary a:hover { color: var(--tm-primary); } /* ── Logo ────────────────────────────────────────────────────────────────── */ .uk-logo img { height: 48px; width: auto; display: block; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .uk-card-body { padding: 24px 20px; } .tm-status-card { padding: 32px 20px; } .tm-legend { font-size: 11px; } }