This commit is contained in:
2025-11-19 01:10:25 +01:00
parent 0834e1f733
commit 3ca1922c30
2 changed files with 25 additions and 183 deletions

View File

@@ -1,171 +0,0 @@
/* Base layout */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background:
radial-gradient(circle at top left, rgba(0, 81, 255, 0.35), transparent 55%),
radial-gradient(circle at bottom right, rgba(200, 203, 208, 0.25), transparent 55%),
#0b0b0d;
color: #FFFFFF;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* Page wrapper */
.page {
position: relative;
width: 100%;
max-width: 960px;
padding: 24px;
display: flex;
align-items: center;
justify-content: center;
}
/* Subtle background glow */
.glow {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 10% 10%, rgba(0, 81, 255, 0.35), transparent 55%),
radial-gradient(circle at 90% 90%, rgba(3, 193, 96, 0.20), transparent 50%);
opacity: 0.75;
z-index: 0;
}
/* Card container */
.card {
position: relative;
z-index: 1;
max-width: 720px;
width: 100%;
padding: 32px 32px 28px;
border-radius: 18px;
background: linear-gradient(
135deg,
rgba(26, 26, 26, 0.96),
rgba(11, 11, 13, 0.98)
);
box-shadow:
0 18px 45px rgba(0, 0, 0, 0.65),
0 0 0 1px rgba(200, 203, 208, 0.08);
text-align: left;
overflow: hidden;
}
/* Accent bar oben */
.card::before {
content: "";
position: absolute;
top: 0;
left: 12%;
right: 12%;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, #0051FF, #03C160);
opacity: 0.9;
}
/* Logo */
.logo {
display: block;
max-width: 260px;
width: 60%;
margin-bottom: 24px;
filter:
drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6))
drop-shadow(0 0 14px rgba(200, 203, 208, 0.45));
}
/* Heading & text */
h1 {
font-family: 'Montserrat', system-ui, sans-serif;
font-weight: 700; /* Montserrat Bold */
font-size: clamp(2.1rem, 2.6vw, 2.6rem);
margin: 0 0 12px;
letter-spacing: 0.04em;
color: #FFFFFF;
}
.lead {
margin: 0 0 22px;
font-size: 1.05rem;
line-height: 1.7;
color: #F4F4F4;
}
/* Pills / Badges */
.pill-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.pill {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.82rem;
font-family: 'Montserrat', system-ui, sans-serif;
font-weight: 600; /* Montserrat SemiBold */
letter-spacing: 0.02em;
border: 1px solid rgba(200, 203, 208, 0.28);
background: rgba(26, 26, 26, 0.85);
color: #FFFFFF;
backdrop-filter: blur(8px);
}
.pill-safe {
border-color: rgba(3, 193, 96, 0.55);
box-shadow: 0 0 12px rgba(3, 193, 96, 0.45);
}
.pill-size {
border-color: rgba(0, 81, 255, 0.6);
box-shadow: 0 0 12px rgba(0, 81, 255, 0.45);
}
.pill-fake {
border-color: rgba(230, 57, 70, 0.6);
box-shadow: 0 0 12px rgba(230, 57, 70, 0.45);
}
/* Footer note */
.note {
margin: 0;
font-size: 0.9rem;
line-height: 1.6;
color: #C8CBD0; /* silver */
}
/* Responsive tweaks */
@media (max-width: 640px) {
.card {
padding: 24px 20px 22px;
text-align: left;
}
.card::before {
left: 16px;
right: 16px;
}
.logo {
max-width: 220px;
width: 70%;
margin-bottom: 20px;
}
.pill-row {
flex-direction: row;
}
}

View File

@@ -31,21 +31,34 @@
</nav> </nav>
<!-- Language Switch --> <!-- Language Switch -->
<div class="relative"> <!-- Language Switch: inline pills -->
<button id="langCurrent" <div class="flex items-center gap-1 sm:gap-1.5 text-[11px] sm:text-xs font-medium uppercase tracking-[0.18em]">
class="text-xs uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary transition"> <button type="button"
<?= strtoupper($lang) ?> class="lang-pill px-1.5 py-0.5 rounded-full border border-transparent text-brand-muted hover:text-brand-primary hover:border-brand-border transition"
data-lang="de">
DE
</button>
<span class="text-brand-border/60">·</span>
<button type="button"
class="lang-pill px-1.5 py-0.5 rounded-full border border-transparent text-brand-muted hover:text-brand-primary hover:border-brand-border transition"
data-lang="en">
EN
</button>
<span class="text-brand-border/60">·</span>
<button type="button"
class="lang-pill px-1.5 py-0.5 rounded-full border border-transparent text-brand-muted hover:text-brand-primary hover:border-brand-border transition"
data-lang="it">
IT
</button>
<span class="text-brand-border/60">·</span>
<button type="button"
class="lang-pill px-1.5 py-0.5 rounded-full border border-transparent text-brand-muted hover:text-brand-primary hover:border-brand-border transition"
data-lang="fr">
FR
</button> </button>
<div id="langMenu"
class="hidden absolute right-0 mt-2 w-28 rounded-md bg-brand-surface border border-brand-border shadow-lg p-2 text-xs">
<a href="?lang=de" class="block py-1 hover:text-brand-primary">Deutsch</a>
<a href="?lang=en" class="block py-1 hover:text-brand-primary">English</a>
<a href="?lang=it" class="block py-1 hover:text-brand-primary">Italiano</a>
<a href="?lang=fr" class="block py-1 hover:text-brand-primary">Français</a>
</div>
</div> </div>
<!-- Login Button / Avatar --> <!-- Login Button / Avatar -->
<button id="loginButton" <button id="loginButton"
class="relative inline-flex items-center justify-center rounded-full bg-brand-primary px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-brand-bg shadow-soft hover:bg-cyan-400 transition-colors" class="relative inline-flex items-center justify-center rounded-full bg-brand-primary px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-brand-bg shadow-soft hover:bg-cyan-400 transition-colors"