diff --git a/public/assets/css/auth.css b/public/assets/css/auth.css new file mode 100644 index 0000000..4725a64 --- /dev/null +++ b/public/assets/css/auth.css @@ -0,0 +1,191 @@ +/* ===================================================================== + Auth / Forms / Account + ===================================================================== */ + +.auth-page { + padding: 4rem 0; +} + +.auth-layout { + max-width: 480px; + margin: 0 auto; +} + +.auth-card { + background: #fff; + border-radius: 18px; + padding: 1.6rem 1.8rem; + box-shadow: var(--shadow-soft); + border: 1px solid rgba(200, 203, 208, 0.5); +} + +.auth-title { + font-family: var(--font-heading); + font-weight: 700; + font-size: 1.5rem; + margin: 0 0 0.35rem; + color: var(--deep-gray); +} + +.auth-subtitle { + font-size: 0.95rem; + color: #555; + margin: 0 0 1.5rem; +} + +.auth-flash-success, +.auth-flash-error { + border-radius: 12px; + padding: 0.75rem 0.9rem; + font-size: 0.9rem; + margin-bottom: 1rem; +} + +.auth-flash-success { + background: #e6f9ef; + border: 1px solid rgba(3, 193, 96, 0.4); + color: #145c32; +} + +.auth-flash-error { + background: #fde7ea; + border: 1px solid rgba(230, 57, 70, 0.4); + color: #7f1d1d; +} + +/* Forms */ + +.form-row { + margin-bottom: 1rem; +} + +.form-label { + display: block; + font-size: 0.85rem; + color: #555; + margin-bottom: 0.3rem; +} + +.form-input, +.form-select, +.form-textarea { + width: 100%; + border-radius: 10px; + border: 1px solid var(--silver); + padding: 0.55rem 0.7rem; + font-size: 0.95rem; + font-family: inherit; + transition: + border-color 0.12s ease, + box-shadow 0.12s ease, + background-color 0.12s ease; + background: #fff; +} + +.form-input:focus, +.form-select:focus, +.form-textarea:focus { + outline: none; + border-color: var(--brand-blue); + box-shadow: 0 0 0 1px rgba(0, 81, 255, 0.15); + background: #fff; +} + +.form-input[readonly], +.form-select[readonly] { + background: #f3f4f6; + color: #666; +} + +.form-error { + margin-top: 0.3rem; + font-size: 0.8rem; + color: var(--error-red); +} + +.form-help { + margin-top: 0.3rem; + font-size: 0.8rem; + color: #777; +} + +.form-actions { + margin-top: 1.5rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; +} + +.auth-link { + font-size: 0.9rem; + color: var(--brand-blue); + text-decoration: none; +} + +.auth-link:hover { + text-decoration: underline; +} + +/* Account page */ + +.account-page { + padding: 4rem 0; +} + +.account-grid { + display: grid; + grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr); + gap: 2rem; +} + +.account-card { + background: #fff; + border-radius: 18px; + padding: 1.6rem 1.8rem; + box-shadow: var(--shadow-soft); + border: 1px solid rgba(200, 203, 208, 0.5); +} + +.account-title { + font-family: var(--font-heading); + font-weight: 700; + font-size: 1.4rem; + margin: 0 0 0.4rem; + color: var(--deep-gray); +} + +.account-subtitle { + margin: 0 0 1.4rem; + font-size: 0.95rem; + color: #555; +} + +.account-meta { + font-size: 0.85rem; + color: #777; +} + +.account-avatar-preview { + display: flex; + align-items: center; + gap: 1rem; + margin-top: 0.75rem; +} + +.account-avatar-preview .user-avatar { + width: 44px; + height: 44px; + font-size: 1.05rem; +} + +.account-avatar-note { + font-size: 0.85rem; + color: #666; +} + +@media (max-width: 900px) { + .account-grid { + grid-template-columns: 1fr; + } +} diff --git a/public/assets/css/base.css b/public/assets/css/base.css new file mode 100644 index 0000000..7b2780f --- /dev/null +++ b/public/assets/css/base.css @@ -0,0 +1,136 @@ +:root { + /* Brand Colors */ + --brand-blue: #3a6ff8; + --deep-gray: #0f1f3d; + --silver: #d9e1f2; + --green-check: #1fce88; + --error-red: #f46666; + --amber-yellow: #ffb347; + --light-gray: #edf2fb; + --very-light-gray: #f9fbff; + --off-white: #ffffff; + + /* Radii & Shadows */ + --radius-lg: 16px; + --radius-pill: 999px; + --shadow-soft: 0 18px 45px rgba(55, 101, 202, 0.15); + + /* Fonts */ + --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + --font-heading: 'Montserrat', system-ui, sans-serif; +} + +/* ===================================================================== + Global Reset & Base + ===================================================================== */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; +} + +body { + font-family: var(--font-body); + font-weight: 400; + color: #1f2a44; + background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 50%, #f1f6ff 100%); +} + +/* Layout helpers */ + +.container { + width: 100%; + max-width: 1120px; + margin: 0 auto; + padding: 0 1.5rem; +} + +.hidden { + display: none !important; +} + +/* ===================================================================== + Buttons & Avatar (global nutzbar) + ===================================================================== */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-pill); + border: none; + font-family: var(--font-heading); + font-weight: 600; + font-size: 0.95rem; + padding: 0.6rem 1.4rem; + cursor: pointer; + text-decoration: none; + transition: + transform 0.08s ease, + box-shadow 0.08s ease, + background 0.1s ease; +} + +.btn-primary { + background: linear-gradient(135deg, var(--brand-blue), #2a73ff); + color: #fff; + box-shadow: 0 12px 24px rgba(0, 81, 255, 0.35); +} + +.btn-primary:hover { + transform: translateY(-1px); + box-shadow: 0 16px 32px rgba(0, 81, 255, 0.4); +} + +.btn-outline { + border: 1px solid var(--silver); + background: #fff; + color: #333; +} + +.btn-outline:hover { + background: var(--very-light-gray); +} + +.btn-ghost { + border-radius: var(--radius-pill); + padding-inline: 1.2rem; + background: transparent; + border: 1px solid transparent; + color: #333; +} + +.btn-ghost:hover { + border-color: var(--silver); + background: rgba(0, 0, 0, 0.02); +} + +.btn-disabled { + background: var(--light-gray); + color: #888; + cursor: not-allowed; + box-shadow: none; +} + +/* Avatar */ + +.user-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + background: var(--deep-gray); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-weight: 700; + font-size: 0.9rem; +} diff --git a/public/assets/css/fakecheck.css b/public/assets/css/fakecheck.css index ed20d77..78eeaf3 100644 --- a/public/assets/css/fakecheck.css +++ b/public/assets/css/fakecheck.css @@ -31,7 +31,7 @@ .fc-header-text h2 { margin: 0 0 0.3rem; - font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + font-family: var(--font-heading, "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-weight: 700; font-size: clamp(1.6rem, 2.3vw, 2rem); color: var(--fc-text); @@ -87,7 +87,7 @@ .fc-card-title { margin: 0 0 0.45rem; font-size: 1.05rem; - font-family: "Montserrat", system-ui, sans-serif; + font-family: var(--font-heading, "Montserrat", system-ui, sans-serif); font-weight: 600; color: var(--fc-text); } @@ -124,7 +124,10 @@ font-size: 0.92rem; cursor: pointer; text-decoration: none; - transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease; + transition: + transform 0.1s ease, + box-shadow 0.1s ease, + background 0.15s ease; white-space: nowrap; box-shadow: 0 12px 28px rgba(58, 111, 248, 0.35); } @@ -174,7 +177,10 @@ border: 1px solid var(--fc-border); background: linear-gradient(140deg, #ffffff 0%, #f3f7ff 100%); cursor: pointer; - transition: border 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; + transition: + border 0.15s ease, + box-shadow 0.15s ease, + transform 0.1s ease; } .fc-mode-tile.selected { @@ -434,6 +440,8 @@ font-size: 0.85rem; } +/* Log Scrollbar */ + .fc-log::-webkit-scrollbar { width: 6px; } diff --git a/public/assets/css/header-extras.css b/public/assets/css/header-extras.css new file mode 100644 index 0000000..645db43 --- /dev/null +++ b/public/assets/css/header-extras.css @@ -0,0 +1,104 @@ +/* ===================================================================== + USBCheck Header Dropdowns (neuer Header) + Logout-Modal + ===================================================================== */ + +/* Dropdown Panels für Sprach- & User-Menü */ + +#langMenu, +#userMenu { + background: rgba(255, 255, 255, 0.96); + border-radius: 12px; + border: 1px solid rgba(200, 203, 208, 0.85); + box-shadow: var(--shadow-soft); + backdrop-filter: blur(10px); +} + +#langMenu .lang-pill, +#userMenu a, +#userMenu button { + background: transparent; +} + +#langMenu .lang-pill:hover, +#userMenu a:hover, +#userMenu button:hover { + background: rgba(237, 242, 251, 0.95); +} + +/* Logout-Modal Overlay & Panel */ + +#logoutModalBackdrop { + background: rgba(15, 31, 61, 0.32); + backdrop-filter: blur(4px); +} + +#logoutModalBackdrop > div { + background: #ffffff; + border-radius: 24px; + border: 1px solid rgba(200, 203, 208, 0.85); + box-shadow: var(--shadow-soft); + padding: 1.8rem 2rem; +} + +#logoutModalBackdrop h2 { + font-family: var(--font-heading); + font-weight: 700; + font-size: 1.25rem; + color: var(--deep-gray); + margin-bottom: 0.4rem; +} + +#logoutModalBackdrop p { + font-size: 0.95rem; + color: #555; +} + +/* Cancel Button */ + +#logoutCancel { + border-radius: var(--radius-pill); + border: 1px solid var(--silver); + background: #fff; + color: #555; + font-family: var(--font-heading); + font-weight: 600; + font-size: 0.8rem; + letter-spacing: 0.18em; + text-transform: uppercase; + padding: 0.45rem 1.4rem; + transition: + background 0.12s ease, + box-shadow 0.12s ease, + transform 0.08s ease; +} + +#logoutCancel:hover { + background: var(--very-light-gray); + transform: translateY(-1px); +} + +/* Confirm Button (Danger) */ + +#logoutConfirm { + border-radius: var(--radius-pill); + border: none; + background: linear-gradient(135deg, var(--error-red), #ff7a7a); + color: #fff; + font-family: var(--font-heading); + font-weight: 600; + font-size: 0.8rem; + letter-spacing: 0.18em; + text-transform: uppercase; + padding: 0.45rem 1.6rem; + box-shadow: 0 12px 24px rgba(244, 102, 102, 0.35); + transition: + background 0.12s ease, + box-shadow 0.12s ease, + transform 0.08s ease; +} + +#logoutConfirm:hover { + background: linear-gradient(135deg, #ff7a7a, var(--error-red)); + box-shadow: 0 16px 30px rgba(244, 102, 102, 0.45); + transform: translateY(-1px); +} diff --git a/public/assets/css/layout-main.css b/public/assets/css/layout-main.css new file mode 100644 index 0000000..9f7199f --- /dev/null +++ b/public/assets/css/layout-main.css @@ -0,0 +1,655 @@ +/* ===================================================================== + Header (legacy Layout – kann parallel zur neuen Tailwind-Header-Partial existieren) + ===================================================================== */ + +.site-header { + position: sticky; + top: 0; + z-index: 20; + backdrop-filter: blur(10px); + background: rgba(250, 250, 250, 0.92); + border-bottom: 1px solid rgba(200, 203, 208, 0.4); +} + +.header-inner { + display: flex; + align-items: center; + justify-content: space-between; + height: 72px; +} + +.logo-img { + height: 36px; + display: block; +} + +.main-nav { + display: none; + gap: 1.5rem; + margin-left: 2rem; +} + +.nav-link { + font-family: var(--font-heading); + font-weight: 600; + font-size: 0.95rem; + text-decoration: none; + color: #444; +} + +.nav-link:hover { + color: var(--brand-blue); +} + +.header-actions { + display: flex; + align-items: center; + gap: 1rem; +} + +/* Language switcher (alte Variante) */ + +.lang-switch { + position: relative; +} + +.lang-current { + border-radius: var(--radius-pill); + border: 1px solid var(--silver); + background: #fff; + padding: 0.35rem 0.8rem; + font-size: 0.85rem; + cursor: pointer; +} + +.lang-menu { + position: absolute; + right: 0; + top: 120%; + background: #fff; + border-radius: 12px; + box-shadow: var(--shadow-soft); + padding: 0.4rem; + min-width: 140px; +} + +.lang-menu button { + width: 100%; + border: none; + background: transparent; + padding: 0.35rem 0.6rem; + text-align: left; + font-size: 0.85rem; + cursor: pointer; + border-radius: 8px; +} + +.lang-menu button:hover { + background: var(--very-light-gray); +} + +/* ===================================================================== + Sections & Hero + ===================================================================== */ + +.section { + padding: 4rem 0; +} + +.section-alt { + background: var(--very-light-gray); +} + +.section-title { + font-family: var(--font-heading); + font-weight: 700; + font-size: 2rem; + margin: 0 0 0.5rem; + color: var(--deep-gray); +} + +.section-lead { + max-width: 680px; + font-size: 1rem; + color: #555; + margin: 0.25rem 0 2.5rem; +} + +/* Hero */ + +.hero-section { + position: relative; + padding-top: 5rem; + padding-bottom: 4rem; + background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 55%, #e7f0ff 100%); +} + +.hero-section::before { + content: ""; + position: absolute; + inset: 0; + background: + radial-gradient(circle at top left, rgba(58, 111, 248, 0.14), transparent 55%), + radial-gradient(circle at bottom right, rgba(255, 215, 166, 0.25), transparent 60%); + pointer-events: none; +} + +.hero-shell { + display: flex; + flex-direction: column; + gap: 2rem; +} + +@media (min-width: 1024px) { + .hero-shell { + flex-direction: row; + gap: 2.5rem; + } +} + +.hero-copy { + flex: 1; +} + +.hero-preview { + flex: 1; + max-width: 480px; +} + +.hero-kicker { + font-family: var(--font-heading); + font-weight: 600; + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--brand-blue); + margin: 0 0 0.75rem; +} + +.hero-title { + font-family: var(--font-heading); + font-weight: 700; + font-size: clamp(2rem, 3vw, 2.6rem); + margin: 0 0 0.75rem; + color: var(--deep-gray); +} + +.hero-subtitle { + margin: 0 0 1.5rem; + color: #555; + font-size: 1rem; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-bottom: 1.2rem; +} + +.hero-bullets { + list-style: none; + padding: 0; + margin: 0; + color: #555; + font-size: 0.95rem; +} + +.hero-bullets li::before { + content: "•"; + color: var(--green-check); + font-weight: 700; + display: inline-block; + margin-right: 0.45rem; +} + +.hero-visual { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +/* ===================================================================== + Quick test visual + ===================================================================== */ + +.quick-preview-card { + position: relative; + border-radius: 32px; + padding: 1.8rem; + background: linear-gradient(165deg, #ffffff 0%, #eef4ff 100%); + border: 1px solid rgba(56, 102, 214, 0.2); + box-shadow: var(--shadow-soft); + overflow: hidden; +} + +.quick-preview-card::after { + content: ""; + position: absolute; + inset: 12% auto auto 60%; + width: 220px; + height: 220px; + background: radial-gradient(circle, rgba(58, 111, 248, 0.12), transparent 65%); + pointer-events: none; +} + +.quick-preview-header { + display: flex; + justify-content: space-between; + gap: 1rem; + align-items: flex-start; +} + +.quick-preview-eyebrow { + font-size: 0.75rem; + letter-spacing: 0.3em; + text-transform: uppercase; + font-weight: 600; + color: var(--brand-blue); +} + +.quick-badge { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.35rem 0.75rem; + border-radius: 999px; + font-size: 0.75rem; + font-weight: 600; + color: #1b4045; + background: rgba(31, 206, 136, 0.15); +} + +.quick-metric-card { + background: rgba(255, 255, 255, 0.9); + border-radius: 20px; + border: 1px solid rgba(90, 132, 224, 0.2); + padding: 0.8rem 1rem; + display: flex; + flex-direction: column; + gap: 0.2rem; +} + +.quick-metric-card span:first-child { + font-size: 0.75rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: #6c7695; +} + +.quick-metric-card span:last-child { + font-size: 1.05rem; + font-weight: 600; + color: var(--deep-gray); +} + +.quick-kit { + position: relative; + margin-top: 1.5rem; + border-radius: 30px; + padding: 1.5rem; + background: linear-gradient(120deg, #ffffff 0%, #f2f7ff 100%); + border: 1px solid rgba(68, 121, 249, 0.18); + display: grid; + grid-template-columns: 1.1fr 0.9fr; + gap: 1rem; +} + +.quick-kit-left h4 { + margin: 0; + font-size: 1.1rem; + font-family: var(--font-heading); + color: var(--deep-gray); +} + +.quick-kit-left p { + margin: 0.35rem 0 0; + font-size: 0.9rem; + color: #5f6b85; +} + +.quick-kit-lines { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-top: 0.8rem; +} + +.quick-kit-line { + position: relative; + height: 14px; + border-radius: 999px; + background: rgba(92, 120, 192, 0.12); + overflow: hidden; +} + +.quick-kit-line::after { + content: ""; + position: absolute; + inset: 2px; + border-radius: 999px; + background: linear-gradient(90deg, rgba(58, 111, 248, 0.1), rgba(31, 206, 136, 0.5)); +} + +.quick-kit-line.is-alert::after { + background: linear-gradient(90deg, rgba(255, 180, 90, 0.2), rgba(255, 118, 118, 0.5)); +} + +.quick-kit-window { + position: relative; + border-radius: 26px; + padding: 1rem; + background: linear-gradient(145deg, #edf2ff, #ffffff); + box-shadow: inset 0 2px 6px rgba(15, 33, 66, 0.08); +} + +.quick-kit-window .window-label { + font-size: 0.7rem; + letter-spacing: 0.3em; + text-transform: uppercase; + color: #8390b3; + margin-bottom: 0.5rem; + display: block; +} + +.quick-kit-window .window-strip { + height: 60px; + border-radius: 18px; + background: #ffffff; + border: 1px dashed rgba(89, 124, 178, 0.4); + display: flex; + align-items: center; + justify-content: space-around; + padding: 0 1.2rem; +} + +.window-dot { + width: 14px; + height: 14px; + border-radius: 50%; + background: #e6ecff; + position: relative; +} + +.window-dot.is-active { + background: #3a6ff8; + box-shadow: 0 0 0 6px rgba(58, 111, 248, 0.18); +} + +.window-dot.is-pass { + background: #1fce88; + box-shadow: 0 0 0 6px rgba(31, 206, 136, 0.18); +} + +.quick-kit-footnote { + margin-top: 0.7rem; + font-size: 0.75rem; + color: #7a86a8; +} + +/* ===================================================================== + Generic Section Shell & Cards + ===================================================================== */ + +.section-shell { + position: relative; + max-width: 1120px; + margin: 0 auto; + padding: clamp(1.75rem, 3.5vw, 3.25rem); + border-radius: 36px; + background: linear-gradient(155deg, #ffffff 0%, #f4f7ff 100%); + border: 1px solid rgba(58, 111, 248, 0.14); + box-shadow: 0 30px 60px rgba(15, 33, 66, 0.08); + backdrop-filter: blur(6px); + overflow: hidden; +} + +.section-shell::after { + content: ""; + position: absolute; + inset: 12% 8% auto auto; + width: 160px; + height: 160px; + background: radial-gradient(circle, rgba(255, 215, 166, 0.18), transparent 65%); + pointer-events: none; +} + +.card-frame { + border-radius: 26px; + padding: 1.5rem; + background: linear-gradient(140deg, #ffffff 0%, #f5f7ff 100%); + border: 1px solid rgba(58, 111, 248, 0.14); + box-shadow: 0 18px 40px rgba(15, 33, 66, 0.08); +} + +.card-frame--accent { + border-color: rgba(58, 111, 248, 0.3); + box-shadow: 0 22px 45px rgba(58, 111, 248, 0.15); +} + +.card-frame--soft { + background: linear-gradient(140deg, #fbfcff 0%, #f2f6ff 100%); +} + +.section-band { + position: relative; +} + +.section-band--soft { + background: linear-gradient(180deg, #edf3ff 0%, #f9fbff 100%); +} + +.section-band--reverse { + background: linear-gradient(180deg, #f9fbff 0%, #edf3ff 100%); +} + +/* ===================================================================== + Steps / Features / Pricing / FAQ + ===================================================================== */ + +.steps-grid, +.features-grid, +.pricing-grid, +.faq-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1.5rem; +} + +.step-card, +.feature-card, +.pricing-card, +.faq-item { + background: #fff; + border-radius: 18px; + padding: 1.3rem 1.4rem; + box-shadow: 0 8px 22px rgba(0, 0, 0, 0.03); + border: 1px solid rgba(230, 230, 230, 0.9); +} + +.section-alt .step-card, +.section-alt .feature-card, +.section-alt .pricing-card, +.section-alt .faq-item { + background: #fff; +} + +.step-icon { + width: 32px; + height: 32px; + border-radius: 12px; + background: rgba(0, 81, 255, 0.07); + color: var(--brand-blue); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-weight: 700; + margin-bottom: 0.8rem; +} + +.step-card h3, +.feature-card h3, +.pricing-card h3 { + font-family: var(--font-heading); + font-weight: 600; + margin: 0 0 0.5rem; + font-size: 1.1rem; +} + +.step-card p, +.feature-card p, +.pricing-card p, +.faq-item p { + margin: 0; + font-size: 0.95rem; + color: #555; +} + +.feature-card ul, +.pricing-card ul { + list-style: none; + margin: 0.75rem 0 0; + padding: 0; +} + +.feature-card li, +.pricing-card li { + font-size: 0.95rem; + color: #555; + margin-bottom: 0.35rem; +} + +.feature-card li::before, +.pricing-card li::before { + content: "✔"; + color: var(--green-check); + margin-right: 0.45rem; +} + +/* Pro card */ + +.feature-card-pro { + border-color: rgba(0, 81, 255, 0.3); +} + +.pill { + display: inline-block; + padding: 0.18rem 0.55rem; + border-radius: var(--radius-pill); + background: rgba(0, 81, 255, 0.08); + color: var(--brand-blue); + font-size: 0.75rem; + font-family: var(--font-heading); + font-weight: 600; + margin-bottom: 0.4rem; +} + +/* Pricing */ + +.pricing-card { + position: relative; +} + +.pricing-card-muted { + opacity: 0.85; +} + +.price-tag { + font-family: var(--font-heading); + font-weight: 700; + font-size: 1.4rem; + margin: 0.3rem 0 0.4rem; +} + +/* FAQ */ + +.faq-item summary { + font-family: var(--font-heading); + font-weight: 600; + cursor: pointer; + list-style: none; +} + +.faq-item summary::-webkit-details-marker { + display: none; +} + +.faq-item summary::after { + content: "+"; + float: right; + font-weight: 700; +} + +.faq-item[open] summary::after { + content: "−"; +} + +.faq-item p { + margin-top: 0.6rem; +} + +/* ===================================================================== + Footer + ===================================================================== */ + +.site-footer { + border-top: 1px solid rgba(200, 203, 208, 0.6); + background: #fafafa; + padding: 1.5rem 0; + font-size: 0.85rem; + color: #666; +} + +.footer-inner { + display: flex; + align-items: center; + justify-content: space-between; +} + +.footer-links { + display: flex; + gap: 1.2rem; +} + +.footer-links a { + color: #666; + text-decoration: none; +} + +.footer-links a:hover { + text-decoration: underline; +} + +/* ===================================================================== + Responsive + ===================================================================== */ + +@media (min-width: 900px) { + .main-nav { + display: flex; + } +} + +@media (max-width: 899px) { + .hero-grid { + grid-template-columns: 1fr; + } + + .hero-visual { + order: -1; + } + + .header-inner { + gap: 0.75rem; + } +} + +@media (max-width: 720px) { + .steps-grid, + .features-grid, + .pricing-grid, + .faq-grid { + grid-template-columns: 1fr; + } +} diff --git a/public/assets/css/main.css b/public/assets/css/main.css index 069dbb0..75a4079 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -1,1041 +1,6 @@ -:root { - --brand-blue: #3a6ff8; - --deep-gray: #0f1f3d; - --silver: #d9e1f2; - --green-check: #1fce88; - --error-red: #f46666; - --amber-yellow: #ffb347; - --light-gray: #edf2fb; - --very-light-gray: #f9fbff; - --off-white: #ffffff; +/* main.css – Import-Hub für allgemeines Layout */ - --radius-lg: 16px; - --radius-pill: 999px; - --shadow-soft: 0 18px 45px rgba(55, 101, 202, 0.15); -} - -*, -*::before, -*::after { - box-sizing: border-box; -} - -html, body { - margin: 0; - padding: 0; -} - -body { - font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - font-weight: 400; - color: #1f2a44; - background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 50%, #f1f6ff 100%); -} - -/* Layout helpers */ - -.container { - width: 100%; - max-width: 1120px; - margin: 0 auto; - padding: 0 1.5rem; -} - -/* Header */ - -.site-header { - position: sticky; - top: 0; - z-index: 20; - backdrop-filter: blur(10px); - background: rgba(250, 250, 250, 0.92); - border-bottom: 1px solid rgba(200, 203, 208, 0.4); -} - -.header-inner { - display: flex; - align-items: center; - justify-content: space-between; - height: 72px; -} - -.logo-img { - height: 36px; - display: block; -} - -.main-nav { - display: none; - gap: 1.5rem; - margin-left: 2rem; -} - -.nav-link { - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 600; - font-size: 0.95rem; - text-decoration: none; - color: #444; -} - -.nav-link:hover { - color: var(--brand-blue); -} - -.header-actions { - display: flex; - align-items: center; - gap: 1rem; -} - -/* Language switcher */ - -.lang-switch { - position: relative; -} - -.lang-current { - border-radius: var(--radius-pill); - border: 1px solid var(--silver); - background: #fff; - padding: 0.35rem 0.8rem; - font-size: 0.85rem; - cursor: pointer; -} - -.lang-menu { - position: absolute; - right: 0; - top: 120%; - background: #fff; - border-radius: 12px; - box-shadow: var(--shadow-soft); - padding: 0.4rem; - min-width: 140px; -} - -.lang-menu button { - width: 100%; - border: none; - background: transparent; - padding: 0.35rem 0.6rem; - text-align: left; - font-size: 0.85rem; - cursor: pointer; - border-radius: 8px; -} - -.lang-menu button:hover { - background: var(--very-light-gray); -} - -.hidden { - display: none !important; -} - -/* Buttons */ - -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: var(--radius-pill); - border: none; - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 600; - font-size: 0.95rem; - padding: 0.6rem 1.4rem; - cursor: pointer; - text-decoration: none; - transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.1s ease; -} - -.btn-primary { - background: linear-gradient(135deg, var(--brand-blue), #2a73ff); - color: #fff; - box-shadow: 0 12px 24px rgba(0, 81, 255, 0.35); -} - -.btn-primary:hover { - transform: translateY(-1px); - box-shadow: 0 16px 32px rgba(0, 81, 255, 0.4); -} - -.btn-outline { - border: 1px solid var(--silver); - background: #fff; - color: #333; -} - -.btn-outline:hover { - background: var(--very-light-gray); -} - -.btn-ghost { - border-radius: var(--radius-pill); - padding-inline: 1.2rem; - background: transparent; - border: 1px solid transparent; - color: #333; -} - -.btn-ghost:hover { - border-color: var(--silver); - background: rgba(0, 0, 0, 0.02); -} - -.btn-disabled { - background: var(--light-gray); - color: #888; - cursor: not-allowed; - box-shadow: none; -} - -/* Avatar */ - -.user-avatar { - width: 36px; - height: 36px; - border-radius: 50%; - background: var(--deep-gray); - color: #fff; - display: flex; - align-items: center; - justify-content: center; - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 700; - font-size: 0.9rem; -} - -/* Sections */ - -.section { - padding: 4rem 0; -} - -.section-alt { - background: var(--very-light-gray); -} - -.section-title { - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 700; - font-size: 2rem; - margin: 0 0 0.5rem; - color: var(--deep-gray); -} - -.section-lead { - max-width: 680px; - font-size: 1rem; - color: #555; - margin: 0.25rem 0 2.5rem; -} - -/* Hero */ - -.hero-section { - position: relative; - padding-top: 5rem; - padding-bottom: 4rem; - background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 55%, #e7f0ff 100%); -} - -.hero-section::before { - content: ""; - position: absolute; - inset: 0; - background: radial-gradient(circle at top left, rgba(58, 111, 248, 0.14), transparent 55%), - radial-gradient(circle at bottom right, rgba(255, 215, 166, 0.25), transparent 60%); - pointer-events: none; -} - -.hero-shell { - display: flex; - flex-direction: column; - gap: 2rem; -} - -@media (min-width: 1024px) { - .hero-shell { - flex-direction: row; - gap: 2.5rem; - } -} - -.hero-copy { - flex: 1; -} - -.hero-preview { - flex: 1; - max-width: 480px; -} - -.hero-kicker { - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 600; - font-size: 0.9rem; - text-transform: uppercase; - letter-spacing: 0.12em; - color: var(--brand-blue); - margin: 0 0 0.75rem; -} - -.hero-title { - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 700; - font-size: clamp(2rem, 3vw, 2.6rem); - margin: 0 0 0.75rem; - color: var(--deep-gray); -} - -.hero-subtitle { - margin: 0 0 1.5rem; - color: #555; - font-size: 1rem; -} - -.hero-actions { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; - margin-bottom: 1.2rem; -} - -.hero-bullets { - list-style: none; - padding: 0; - margin: 0; - color: #555; - font-size: 0.95rem; -} - -.hero-bullets li::before { - content: "•"; - color: var(--green-check); - font-weight: 700; - display: inline-block; - margin-right: 0.45rem; -} - -.hero-visual { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -/* Quick test visual */ - -.quick-preview-card { - position: relative; - border-radius: 32px; - padding: 1.8rem; - background: linear-gradient(165deg, #ffffff 0%, #eef4ff 100%); - border: 1px solid rgba(56, 102, 214, 0.2); - box-shadow: var(--shadow-soft); - overflow: hidden; -} - -.quick-preview-card::after { - content: ""; - position: absolute; - inset: 12% auto auto 60%; - width: 220px; - height: 220px; - background: radial-gradient(circle, rgba(58, 111, 248, 0.12), transparent 65%); - pointer-events: none; -} - -.quick-preview-header { - display: flex; - justify-content: space-between; - gap: 1rem; - align-items: flex-start; -} - -.quick-preview-eyebrow { - font-size: 0.75rem; - letter-spacing: 0.3em; - text-transform: uppercase; - font-weight: 600; - color: var(--brand-blue); -} - -.quick-badge { - display: inline-flex; - align-items: center; - gap: 0.35rem; - padding: 0.35rem 0.75rem; - border-radius: 999px; - font-size: 0.75rem; - font-weight: 600; - color: #1b4045; - background: rgba(31, 206, 136, 0.15); -} - -.quick-metric-card { - background: rgba(255, 255, 255, 0.9); - border-radius: 20px; - border: 1px solid rgba(90, 132, 224, 0.2); - padding: 0.8rem 1rem; - display: flex; - flex-direction: column; - gap: 0.2rem; -} - -.quick-metric-card span:first-child { - font-size: 0.75rem; - letter-spacing: 0.08em; - text-transform: uppercase; - color: #6c7695; -} - -.quick-metric-card span:last-child { - font-size: 1.05rem; - font-weight: 600; - color: var(--deep-gray); -} - -.quick-kit { - position: relative; - margin-top: 1.5rem; - border-radius: 30px; - padding: 1.5rem; - background: linear-gradient(120deg, #ffffff 0%, #f2f7ff 100%); - border: 1px solid rgba(68, 121, 249, 0.18); - display: grid; - grid-template-columns: 1.1fr 0.9fr; - gap: 1rem; -} - -.quick-kit-left h4 { - margin: 0; - font-size: 1.1rem; - font-family: 'Montserrat', system-ui, sans-serif; - color: var(--deep-gray); -} - -.quick-kit-left p { - margin: 0.35rem 0 0; - font-size: 0.9rem; - color: #5f6b85; -} - -.quick-kit-lines { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 0.8rem; -} - -.quick-kit-line { - position: relative; - height: 14px; - border-radius: 999px; - background: rgba(92, 120, 192, 0.12); - overflow: hidden; -} - -.quick-kit-line::after { - content: ""; - position: absolute; - inset: 2px; - border-radius: 999px; - background: linear-gradient(90deg, rgba(58, 111, 248, 0.1), rgba(31, 206, 136, 0.5)); -} - -.quick-kit-line.is-alert::after { - background: linear-gradient(90deg, rgba(255, 180, 90, 0.2), rgba(255, 118, 118, 0.5)); -} - -.quick-kit-window { - position: relative; - border-radius: 26px; - padding: 1rem; - background: linear-gradient(145deg, #edf2ff, #ffffff); - box-shadow: inset 0 2px 6px rgba(15, 33, 66, 0.08); -} - -.quick-kit-window .window-label { - font-size: 0.7rem; - letter-spacing: 0.3em; - text-transform: uppercase; - color: #8390b3; - margin-bottom: 0.5rem; - display: block; -} - -.quick-kit-window .window-strip { - height: 60px; - border-radius: 18px; - background: #ffffff; - border: 1px dashed rgba(89, 124, 178, 0.4); - display: flex; - align-items: center; - justify-content: space-around; - padding: 0 1.2rem; -} - -.window-dot { - width: 14px; - height: 14px; - border-radius: 50%; - background: #e6ecff; - position: relative; -} - -.window-dot.is-active { - background: #3a6ff8; - box-shadow: 0 0 0 6px rgba(58, 111, 248, 0.18); -} - -.window-dot.is-pass { - background: #1fce88; - box-shadow: 0 0 0 6px rgba(31, 206, 136, 0.18); -} - -.quick-kit-footnote { - margin-top: 0.7rem; - font-size: 0.75rem; - color: #7a86a8; -} - -.section-shell { - position: relative; - max-width: 1120px; - margin: 0 auto; - padding: clamp(1.75rem, 3.5vw, 3.25rem); - border-radius: 36px; - background: linear-gradient(155deg, #ffffff 0%, #f4f7ff 100%); - border: 1px solid rgba(58, 111, 248, 0.14); - box-shadow: 0 30px 60px rgba(15, 33, 66, 0.08); - backdrop-filter: blur(6px); - overflow: hidden; -} - -.section-shell::after { - content: ""; - position: absolute; - inset: 12% 8% auto auto; - width: 160px; - height: 160px; - background: radial-gradient(circle, rgba(255, 215, 166, 0.18), transparent 65%); - pointer-events: none; -} - -.card-frame { - border-radius: 26px; - padding: 1.5rem; - background: linear-gradient(140deg, #ffffff 0%, #f5f7ff 100%); - border: 1px solid rgba(58, 111, 248, 0.14); - box-shadow: 0 18px 40px rgba(15, 33, 66, 0.08); -} - -.card-frame--accent { - border-color: rgba(58, 111, 248, 0.3); - box-shadow: 0 22px 45px rgba(58, 111, 248, 0.15); -} - -.card-frame--soft { - background: linear-gradient(140deg, #fbfcff 0%, #f2f6ff 100%); -} - -.section-band { - position: relative; -} - -.section-band--soft { - background: linear-gradient(180deg, #edf3ff 0%, #f9fbff 100%); -} - -.section-band--reverse { - background: linear-gradient(180deg, #f9fbff 0%, #edf3ff 100%); -} - -/* Steps / Features / Pricing */ - -.steps-grid, -.features-grid, -.pricing-grid, -.faq-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 1.5rem; -} - -.step-card, -.feature-card, -.pricing-card, -.faq-item { - background: #fff; - border-radius: 18px; - padding: 1.3rem 1.4rem; - box-shadow: 0 8px 22px rgba(0, 0, 0, 0.03); - border: 1px solid rgba(230, 230, 230, 0.9); -} - -.section-alt .step-card, -.section-alt .feature-card, -.section-alt .pricing-card, -.section-alt .faq-item { - background: #fff; -} - -.step-icon { - width: 32px; - height: 32px; - border-radius: 12px; - background: rgba(0, 81, 255, 0.07); - color: var(--brand-blue); - display: flex; - align-items: center; - justify-content: center; - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 700; - margin-bottom: 0.8rem; -} - -.step-card h3, -.feature-card h3, -.pricing-card h3 { - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 600; - margin: 0 0 0.5rem; - font-size: 1.1rem; -} - -.step-card p, -.feature-card p, -.pricing-card p, -.faq-item p { - margin: 0; - font-size: 0.95rem; - color: #555; -} - -.feature-card ul, -.pricing-card ul { - list-style: none; - margin: 0.75rem 0 0; - padding: 0; -} - -.feature-card li, -.pricing-card li { - font-size: 0.95rem; - color: #555; - margin-bottom: 0.35rem; -} - -.feature-card li::before, -.pricing-card li::before { - content: "✔"; - color: var(--green-check); - margin-right: 0.45rem; -} - -/* Pro card */ - -.feature-card-pro { - border-color: rgba(0, 81, 255, 0.3); -} - -.pill { - display: inline-block; - padding: 0.18rem 0.55rem; - border-radius: var(--radius-pill); - background: rgba(0, 81, 255, 0.08); - color: var(--brand-blue); - font-size: 0.75rem; - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 600; - margin-bottom: 0.4rem; -} - -/* Pricing */ - -.pricing-card { - position: relative; -} - -.pricing-card-muted { - opacity: 0.85; -} - -.price-tag { - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 700; - font-size: 1.4rem; - margin: 0.3rem 0 0.4rem; -} - -/* FAQ */ - -.faq-item summary { - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 600; - cursor: pointer; - list-style: none; -} - -.faq-item summary::-webkit-details-marker { - display: none; -} - -.faq-item summary::after { - content: "+"; - float: right; - font-weight: 700; -} - -.faq-item[open] summary::after { - content: "−"; -} - -.faq-item p { - margin-top: 0.6rem; -} - -/* Footer */ - -.site-footer { - border-top: 1px solid rgba(200, 203, 208, 0.6); - background: #fafafa; - padding: 1.5rem 0; - font-size: 0.85rem; - color: #666; -} - -.footer-inner { - display: flex; - align-items: center; - justify-content: space-between; -} - -.footer-links { - display: flex; - gap: 1.2rem; -} - -.footer-links a { - color: #666; - text-decoration: none; -} - -.footer-links a:hover { - text-decoration: underline; -} - -/* Responsive */ - -@media (min-width: 900px) { - .main-nav { - display: flex; - } -} - -@media (max-width: 899px) { - .hero-grid { - grid-template-columns: 1fr; - } - .hero-visual { - order: -1; - } - .header-inner { - gap: 0.75rem; - } -} - -@media (max-width: 720px) { - .steps-grid, - .features-grid, - .pricing-grid, - .faq-grid { - grid-template-columns: 1fr; - } -} - - -/* Auth / Forms / Account */ - -.auth-page { - padding: 4rem 0; -} - -.auth-layout { - max-width: 480px; - margin: 0 auto; -} - -.auth-card { - background: #fff; - border-radius: 18px; - padding: 1.6rem 1.8rem; - box-shadow: var(--shadow-soft); - border: 1px solid rgba(200, 203, 208, 0.5); -} - -.auth-title { - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 700; - font-size: 1.5rem; - margin: 0 0 0.35rem; - color: var(--deep-gray); -} - -.auth-subtitle { - font-size: 0.95rem; - color: #555; - margin: 0 0 1.5rem; -} - -.auth-flash-success, -.auth-flash-error { - border-radius: 12px; - padding: 0.75rem 0.9rem; - font-size: 0.9rem; - margin-bottom: 1rem; -} - -.auth-flash-success { - background: #e6f9ef; - border: 1px solid rgba(3, 193, 96, 0.4); - color: #145c32; -} - -.auth-flash-error { - background: #fde7ea; - border: 1px solid rgba(230, 57, 70, 0.4); - color: #7f1d1d; -} - -.form-row { - margin-bottom: 1rem; -} - -.form-label { - display: block; - font-size: 0.85rem; - color: #555; - margin-bottom: 0.3rem; -} - -.form-input, -.form-select, -.form-textarea { - width: 100%; - border-radius: 10px; - border: 1px solid var(--silver); - padding: 0.55rem 0.7rem; - font-size: 0.95rem; - font-family: inherit; - transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease; - background: #fff; -} - -.form-input:focus, -.form-select:focus, -.form-textarea:focus { - outline: none; - border-color: var(--brand-blue); - box-shadow: 0 0 0 1px rgba(0, 81, 255, 0.15); - background: #fff; -} - -.form-input[readonly], -.form-select[readonly] { - background: #f3f4f6; - color: #666; -} - -.form-error { - margin-top: 0.3rem; - font-size: 0.8rem; - color: var(--error-red); -} - -.form-help { - margin-top: 0.3rem; - font-size: 0.8rem; - color: #777; -} - -.form-actions { - margin-top: 1.5rem; - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.75rem; -} - -.auth-link { - font-size: 0.9rem; - color: var(--brand-blue); - text-decoration: none; -} - -.auth-link:hover { - text-decoration: underline; -} - -/* Account page */ - -.account-page { - padding: 4rem 0; -} - -.account-grid { - display: grid; - grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr); - gap: 2rem; -} - -.account-card { - background: #fff; - border-radius: 18px; - padding: 1.6rem 1.8rem; - box-shadow: var(--shadow-soft); - border: 1px solid rgba(200, 203, 208, 0.5); -} - -.account-title { - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 700; - font-size: 1.4rem; - margin: 0 0 0.4rem; - color: var(--deep-gray); -} - -.account-subtitle { - margin: 0 0 1.4rem; - font-size: 0.95rem; - color: #555; -} - -.account-meta { - font-size: 0.85rem; - color: #777; -} - -.account-avatar-preview { - display: flex; - align-items: center; - gap: 1rem; - margin-top: 0.75rem; -} - -.account-avatar-preview .user-avatar { - width: 44px; - height: 44px; - font-size: 1.05rem; -} - -.account-avatar-note { - font-size: 0.85rem; - color: #666; -} - -@media (max-width: 900px) { - .account-grid { - grid-template-columns: 1fr; - } -} -/* --- USBCheck Header Dropdowns: Language + Avatar ----------------------- */ - -#langMenu, -#userMenu { - background: rgba(255, 255, 255, 0.96); /* fast deckend, minimal transparent */ - border-radius: 12px; - border: 1px solid rgba(200, 203, 208, 0.85); - box-shadow: var(--shadow-soft); - backdrop-filter: blur(10px); /* sorgt für lesbares, „frostiges“ Popup */ -} - -/* Innenabstände für Links / Buttons in den Menüs */ -#langMenu .lang-pill, -#userMenu a, -#userMenu button { - background: transparent; -} - -/* Hover leicht absetzen, aber nicht durchsichtig machen */ -#langMenu .lang-pill:hover, -#userMenu a:hover, -#userMenu button:hover { - background: rgba(237, 242, 251, 0.95); /* var(--very-light-gray)-artig */ -} - - -/* --- Logout-Modal Overlay & Panel -------------------------------------- */ - -#logoutModalBackdrop { - /* statt knalligem Schwarz: soften Deep-Gray-Ton mit leichter Transparenz */ - background: rgba(15, 31, 61, 0.32); /* angelehnt an var(--deep-gray) */ - backdrop-filter: blur(4px); -} - -#logoutModalBackdrop > div { - background: #ffffff; /* klar und deckend */ - border-radius: 24px; - border: 1px solid rgba(200, 203, 208, 0.85); - box-shadow: var(--shadow-soft); - padding: 1.8rem 2rem; /* etwas mehr Luft als die Tailwind-Defaults */ -} - - -#logoutModalBackdrop h2 { - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 700; - font-size: 1.25rem; - color: var(--deep-gray); - margin-bottom: 0.4rem; -} - -#logoutModalBackdrop p { - font-size: 0.95rem; - color: #555; -} - - -/* Cancel = Outline-Style */ -#logoutCancel { - border-radius: var(--radius-pill); - border: 1px solid var(--silver); - background: #fff; - color: #555; - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 600; - font-size: 0.8rem; - letter-spacing: 0.18em; - text-transform: uppercase; - padding: 0.45rem 1.4rem; - transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease; -} - -#logoutCancel:hover { - background: var(--very-light-gray); - transform: translateY(-1px); -} - -/* Confirm = „Danger Primary“ */ -#logoutConfirm { - border-radius: var(--radius-pill); - border: none; - background: linear-gradient(135deg, var(--error-red), #ff7a7a); - color: #fff; - font-family: 'Montserrat', system-ui, sans-serif; - font-weight: 600; - font-size: 0.8rem; - letter-spacing: 0.18em; - text-transform: uppercase; - padding: 0.45rem 1.6rem; - box-shadow: 0 12px 24px rgba(244, 102, 102, 0.35); - transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease; -} - -#logoutConfirm:hover { - background: linear-gradient(135deg, #ff7a7a, var(--error-red)); - box-shadow: 0 16px 30px rgba(244, 102, 102, 0.45); - transform: translateY(-1px); -} +@import url("base.css"); +@import url("layout-main.css"); +@import url("header-extras.css"); +/* KEIN auth.css mehr hier */ diff --git a/public/landingpage/login/index.php b/public/landingpage/login/index.php index 4bdd629..848ea9c 100644 --- a/public/landingpage/login/index.php +++ b/public/landingpage/login/index.php @@ -1,4 +1,13 @@