/* ════════════════════════════════════════════════════════════════
CASUAL DEUTSCHLAND — THEME : EDITORIAL DAYLIGHT × SCHWARZ-ROT-GOLD
Berlin editorial magazine × warm cream paper × Bundesfarben
⚠ Google Fonts moved to as for parallel loading.
════════════════════════════════════════════════════════════════ */
/* ── 1. TOKENS — palette daylight × allemande v2 ─────────────── */
:root {
/* Paper — surfaces (warm cream, like vintage Bundesdrucksache paper) */
--ink-void: #F7EFDD; /* outer paper cream */
--ink-base: #F2EBDD; /* canvas, warm cream */
--ink-raised: #FFFCF6; /* cards, raised surfaces */
--ink-floor: rgba(0, 0, 0, 0.02);
--ink-edge: rgba(30, 20, 10, 0.09);
--ink-edge-soft: rgba(30, 20, 10, 0.05);
/* Ink — text */
--paper-pure: #0A0A0A; /* deep Schwarz (drapeau allemand) — headlines */
--paper-mute: #4A4A57; /* body */
--paper-fade: #7B7B85; /* metadata, captions */
--paper-ghost: #C2BFB5; /* hairlines, subtle dividers */
/* German flag accents — Schwarz × Rot × Gold */
--alpine-red: #DD0000; /* Bundesrot officiel (drapeau allemand) — primary action */
--alpine-rouge: #B30000; /* deeper Bundesrot for hover */
--alpine-spark: #FF3B47; /* highlight red for borders + sparks */
--alpine-glacier: #0A0A0A; /* Bundesschwarz (drapeau) — secondary deep */
--alpine-ash: #2C2C2C; /* charcoal — supportive deep */
--alpine-pine: #3F6E4E; /* fir green for trust signals (verified badge) */
--alpine-gold: #FFCE00; /* Bundesgold (drapeau) — premium accents */
--alpine-gold-deep:#D4A800; /* deep gold for hovers */
--alpine-cream: #FFFCF6; /* paper cream */
/* Action */
--action: var(--alpine-red); /* Bundesrot for CTAs */
--action-warm: var(--alpine-gold); /* gold for premium accents */
--action-success: var(--alpine-pine);
/* Type scale (modular, 1.25 ratio) */
--type-xs: 0.75rem; /* 12 */
--type-sm: 0.875rem; /* 14 */
--type-base: 1rem; /* 16 */
--type-md: 1.125rem; /* 18 */
--type-lg: 1.5rem; /* 24 */
--type-xl: 2rem; /* 32 */
--type-2xl: 3rem; /* 48 */
--type-3xl: clamp(3rem, 7vw, 5.5rem);
--type-4xl: clamp(4rem, 12vw, 9rem);
/* Spacing rhythm */
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2rem;
--space-5: 3rem;
--space-6: 5rem;
--space-7: 8rem;
/* Radii */
--radius-sm: 2px;
--radius-md: 8px;
--radius-lg: 18px;
--radius-xl: 28px;
--radius-full: 9999px;
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-glide: cubic-bezier(0.65, 0, 0.35, 1);
--transition: 300ms var(--ease-out);
/* Layout */
--max-w: 1280px;
--gutter: clamp(1rem, 4vw, 2.5rem);
/* Legacy aliases (rétro-compat avec inline styles existants) */
--primary: var(--alpine-red);
--primary-dark: #B81C13;
--secondary: var(--paper-pure);
--accent: var(--alpine-gold);
--white: var(--ink-raised);
--gray-50: var(--ink-base);
--gray-200: var(--paper-fade);
--gray-400: var(--paper-mute);
--gray-800: var(--ink-raised);
--shadow-xl: 0 30px 80px -20px rgba(30, 20, 10, 0.20);
}
/* ── 2. RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
body {
font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-weight: 400;
font-size: var(--type-base);
line-height: 1.55;
background-color: var(--ink-base);
color: var(--paper-pure);
overflow-x: hidden;
position: relative;
letter-spacing: -0.005em;
min-height: 100vh;
}
/* Soft daylight ambient — German flag washes (Bundesrot + Bundesschwarz + Bundesgold) */
body::before {
content: "";
position: fixed;
inset: -10%;
z-index: -2;
pointer-events: none;
background:
radial-gradient(ellipse 80% 60% at 15% 20%, rgba(221, 0, 0, 0.06), transparent 70%),
radial-gradient(ellipse 70% 50% at 85% 75%, rgba(10, 10, 10, 0.05), transparent 70%),
radial-gradient(ellipse 60% 45% at 50% 100%, rgba(255, 206, 0, 0.05), transparent 70%);
will-change: transform;
animation: alpine-drift 90s ease-in-out infinite alternate;
}
@media (max-width: 768px) {
body::before { animation: none; }
}
@keyframes alpine-drift {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(1.5%, -2%, 0) scale(1.04); }
100% { transform: translate3d(0.8%, 0.8%, 0) scale(1.02); }
}
/* Paper grain — subtle texture, like printed magazine fiber */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.025;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) {
body::before { animation: none; }
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* ── 3. TYPOGRAPHY ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: 'Fraunces', 'Times New Roman', serif;
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--paper-pure);
font-variation-settings: 'opsz' 144, 'SOFT' 40;
}
h1 {
font-size: var(--type-4xl);
font-weight: 380;
letter-spacing: -0.03em;
}
h2 {
font-size: var(--type-3xl);
font-weight: 400;
margin-bottom: var(--space-3);
}
h3 {
font-size: var(--type-xl);
font-weight: 500;
letter-spacing: -0.02em;
}
h4 {
font-size: var(--type-lg);
font-weight: 500;
}
p { color: var(--paper-mute); line-height: 1.65; }
em, i { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 60; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
a.link, .editorial-link {
color: var(--paper-pure);
background-image: linear-gradient(var(--action), var(--action));
background-size: 0% 1px;
background-position: 0% 100%;
background-repeat: no-repeat;
transition: background-size 400ms var(--ease-out), color var(--transition);
padding-bottom: 1px;
}
a.link:hover, .editorial-link:hover {
background-size: 100% 1px;
color: var(--action);
}
.eyebrow {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: var(--type-xs);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--paper-fade);
display: inline-block;
}
.eyebrow .num {
color: var(--action);
margin-right: 0.5em;
}
.display-italic {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 350;
font-variation-settings: 'opsz' 144, 'SOFT' 80;
letter-spacing: -0.02em;
color: var(--paper-pure);
}
.mono, code, kbd, samp, pre {
font-family: 'Geist Mono', ui-monospace, monospace;
font-feature-settings: 'tnum' 1;
}
/* ── 4. LAYOUT PRIMITIVES ─────────────────────────────────────── */
.container {
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
position: relative;
}
.section {
padding: var(--space-7) 0;
position: relative;
}
.section--quiet { padding: var(--space-6) 0; }
.section-head {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-4);
align-items: baseline;
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--ink-edge);
}
.section-head .eyebrow { white-space: nowrap; }
.section-head h2 { margin-bottom: 0; max-width: 18ch; }
.section-head .lede {
grid-column: 2;
color: var(--paper-mute);
font-size: var(--type-md);
margin-top: var(--space-2);
max-width: 50ch;
line-height: 1.6;
}
@media (max-width: 768px) {
.section-head { grid-template-columns: 1fr; gap: var(--space-2); }
.section-head .lede { grid-column: 1; }
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
}
/* ── 5. BUTTONS ──────────────────────────────────────────────── */
.btn {
--btn-pad-x: var(--space-4);
--btn-pad-y: 0.95rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: var(--btn-pad-y) var(--btn-pad-x);
border: 1px solid transparent;
border-radius: var(--radius-full);
font-family: 'Geist', sans-serif;
font-weight: 500;
font-size: var(--type-sm);
letter-spacing: 0.02em;
text-transform: none;
cursor: pointer;
text-decoration: none;
transition:
transform 250ms var(--ease-out),
background-color var(--transition),
border-color var(--transition),
color var(--transition),
box-shadow var(--transition);
position: relative;
isolation: isolate;
will-change: transform;
}
.btn:focus-visible {
outline: 2px solid var(--action);
outline-offset: 3px;
}
/* PRIMARY : Bundesrot solid fill, conic gradient on hover (rouge × or × glacier) */
.btn-primary {
color: #FFFFFF;
background: var(--alpine-red);
border-color: transparent;
font-weight: 600;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.15) inset,
0 6px 18px -6px rgba(221, 0, 0, 0.45);
}
.btn-primary::before {
content: "";
position: absolute;
inset: -150%;
z-index: -1;
background: conic-gradient(
from 0deg,
var(--alpine-red),
var(--alpine-gold),
var(--alpine-glacier),
var(--alpine-red),
var(--alpine-rouge),
var(--alpine-red)
);
opacity: 0;
transition: opacity 400ms var(--ease-out);
animation: spin-conic 8s linear infinite;
}
.btn-primary:hover {
transform: translateY(-2px);
color: #FFFFFF;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.2) inset,
0 12px 28px -8px rgba(221, 0, 0, 0.6);
}
.btn-primary:hover::before { opacity: 0.7; }
@keyframes spin-conic {
to { transform: rotate(360deg); }
}
.btn-ghost, .btn:not(.btn-primary) {
background: var(--ink-raised);
color: var(--paper-pure) !important;
border: 1px solid rgba(10, 10, 10, 0.15);
box-shadow: 0 2px 8px -4px rgba(30, 20, 10, 0.08);
}
.btn-ghost:hover, .btn:not(.btn-primary):hover {
background: var(--paper-pure);
color: var(--ink-base) !important;
border-color: var(--paper-pure);
transform: translateY(-1px);
}
/* Defensive : ensure ghost btn text is always visible even with legacy inline color */
.btn:not(.btn-primary):not([style*="background"]) {
color: var(--paper-pure) !important;
}
.btn-sm { --btn-pad-x: 1.2rem; --btn-pad-y: 0.6rem; font-size: var(--type-xs); }
/* ── 6. HEADER ────────────────────────────────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
height: 84px;
background: rgba(245, 240, 228, 0.82);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
border-bottom: 1px solid var(--ink-edge);
display: flex;
align-items: center;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: var(--space-3);
}
/* Logo : serif italic "Casual" + luxury mark + grotesk "Deutschland" */
.logo {
display: inline-flex;
align-items: center;
gap: 0.35em;
font-family: 'Fraunces', serif;
font-weight: 360;
font-style: italic;
font-size: 1.6rem;
letter-spacing: -0.03em;
color: var(--paper-pure);
text-decoration: none;
line-height: 1;
font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.logo i { display: none; }
/* Luxury mark — gold star on black, matches home-luxury.php theme (CD-specific) */
.logo::before {
content: "★";
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.05em;
height: 1.05em;
background: #0a0a0a;
color: #c9a35b;
font-family: 'Geist', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 0.7em;
line-height: 1;
border-radius: 4px;
border: 1px solid #c9a35b;
margin-right: 0.2em;
box-shadow: 0 2px 8px -2px rgba(201, 163, 91, 0.45);
flex-shrink: 0;
}
.logo span {
font-family: 'Geist', sans-serif;
font-weight: 600;
font-style: normal;
font-size: 0.95em;
letter-spacing: -0.02em;
color: var(--paper-pure);
background: linear-gradient(135deg, var(--alpine-red) 0%, var(--alpine-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Footer logo — adjust the cross color for dark BG */
.site-footer .logo::before {
background: #0a0a0a;
color: #c9a35b;
border: 1px solid #c9a35b;
box-shadow: 0 2px 8px -2px rgba(201, 163, 91, 0.55);
}
.site-header nav > a {
filter: none;
opacity: 0.85;
}
.site-header nav > a:hover {
opacity: 1;
transform: translateY(-1px);
}
.site-header nav {
display: flex;
align-items: center;
gap: var(--space-3);
font-family: 'Geist', sans-serif;
font-size: var(--type-sm);
font-weight: 400;
}
.site-header nav > a {
color: var(--paper-mute);
transition: color var(--transition), transform 200ms var(--ease-out);
display: inline-block;
font-size: 1.15rem;
line-height: 1;
filter: grayscale(0.3);
opacity: 0.75;
}
.site-header nav > a:hover {
color: var(--paper-pure);
transform: translateY(-1px);
filter: grayscale(0);
opacity: 1;
}
/* ── 7. HERO ──────────────────────────────────────────────────── */
.hero {
min-height: min(92vh, 920px);
display: flex;
align-items: center;
position: relative;
padding: var(--space-7) 0 var(--space-6);
overflow: hidden;
isolation: isolate;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(90deg, rgba(242, 235, 221, 0.92) 0%, rgba(242, 235, 221, 0.55) 50%, rgba(242, 235, 221, 0.2) 100%),
linear-gradient(180deg, rgba(242, 235, 221, 0.4) 0%, transparent 30%, var(--ink-base) 95%),
url('/hero.webp?v=2');
background-size: cover;
background-position: center 40%;
background-repeat: no-repeat;
animation: hero-drift 40s ease-in-out infinite alternate;
}
@keyframes hero-drift {
0% { background-position: 50% 38%; transform: scale(1); }
100% { background-position: 52% 42%; transform: scale(1.04); }
}
.hero::after {
content: "";
position: absolute;
top: -20%; right: -10%;
width: 60%; height: 80%;
background: radial-gradient(ellipse at center,
rgba(221, 0, 0, 0.12) 0%,
rgba(255, 206, 0, 0.06) 30%,
rgba(10, 10, 10, 0.04) 60%,
transparent 75%);
pointer-events: none;
z-index: 0;
filter: blur(30px);
}
.hero-inner { position: relative; z-index: 2; }
.hero-content { max-width: 920px; }
.hero-content h1 {
font-size: var(--type-4xl);
line-height: 0.95;
letter-spacing: -0.04em;
font-weight: 320;
color: var(--paper-pure);
font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.hero-content h1 em,
.hero-content h1 i,
.hero-content h1 .italic {
font-style: italic;
color: var(--alpine-red);
font-variation-settings: 'opsz' 144, 'SOFT' 80;
}
.hero-content p {
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
color: var(--paper-mute);
margin-top: var(--space-4);
max-width: 56ch;
line-height: 1.55;
font-weight: 400;
}
.hero-meta {
display: flex;
gap: var(--space-4);
margin-top: var(--space-3);
color: var(--paper-fade);
font-family: 'Geist Mono', monospace;
font-size: var(--type-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
flex-wrap: wrap;
}
.hero-meta span {
display: inline-flex;
align-items: center;
gap: 0.5em;
}
.hero-meta span::before {
content: "";
width: 4px; height: 4px;
background: var(--action);
border-radius: 50%;
box-shadow: 0 0 8px var(--action);
}
.hero-actions {
display: flex;
gap: var(--space-2);
margin-top: var(--space-5);
flex-wrap: wrap;
}
.scroll-indicator {
position: absolute;
bottom: var(--space-4);
left: 50%;
transform: translateX(-50%);
color: var(--paper-fade);
font-family: 'Geist Mono', monospace;
font-size: var(--type-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
opacity: 0.6;
animation: scroll-pulse 2.4s ease-in-out infinite;
}
.scroll-indicator::after {
content: "";
width: 1px;
height: 32px;
background: linear-gradient(to bottom, currentColor, transparent);
}
@keyframes scroll-pulse {
0%, 100% { opacity: 0.5; transform: translate(-50%, 0); }
50% { opacity: 0.85; transform: translate(-50%, 4px); }
}
/* ── 8. PROFILE CARDS ──────────────────────────────────────── */
.profile-card {
position: relative;
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-lg);
overflow: hidden;
color: var(--paper-pure);
text-decoration: none;
transition:
transform 400ms var(--ease-out),
border-color var(--transition),
box-shadow var(--transition);
isolation: isolate;
display: block;
box-shadow: 0 2px 8px -4px rgba(10, 10, 10, 0.08);
}
.profile-card:hover {
transform: translateY(-6px);
border-color: rgba(221, 0, 0, 0.4);
box-shadow:
0 20px 40px -16px rgba(30, 20, 10, 0.22),
0 0 0 1px rgba(221, 0, 0, 0.12),
0 0 24px -8px rgba(255, 206, 0, 0.25);
}
.profile-card .profile-img {
width: 100%;
height: 380px;
object-fit: cover;
filter: brightness(1) saturate(0.95) contrast(1.02);
transition: transform 700ms var(--ease-out), filter 400ms var(--ease-out);
display: block;
}
.profile-card:hover .profile-img {
transform: scale(1.04);
filter: brightness(1.02) saturate(1.05) contrast(1.04);
}
.profile-card .profile-meta {
padding: var(--space-3);
position: relative;
z-index: 2;
}
.profile-card .profile-name {
font-family: 'Fraunces', serif;
font-weight: 380;
font-size: 1.4rem;
letter-spacing: -0.02em;
color: var(--paper-pure);
line-height: 1.1;
font-variation-settings: 'opsz' 144, 'SOFT' 50;
display: flex;
align-items: baseline;
gap: 0.5em;
}
.profile-card .profile-age {
font-family: 'Geist Mono', monospace;
font-weight: 500;
font-size: 0.9rem;
color: var(--paper-fade);
letter-spacing: 0.05em;
}
.profile-card .profile-strip {
margin-top: 0.4rem;
font-family: 'Geist Mono', monospace;
font-size: var(--type-xs);
color: var(--paper-fade);
text-transform: uppercase;
letter-spacing: 0.12em;
display: flex;
gap: 0.5em;
align-items: center;
}
.profile-card .profile-strip .sep {
width: 4px; height: 4px;
background: var(--paper-ghost);
border-radius: 50%;
flex-shrink: 0;
}
.profile-card .profile-bio {
margin-top: var(--space-2);
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 0.95rem;
line-height: 1.45;
color: var(--paper-mute);
font-weight: 350;
font-variation-settings: 'opsz' 144, 'SOFT' 70;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.profile-card .profile-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: var(--space-3);
}
.profile-card .profile-tag {
font-family: 'Geist Mono', monospace;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.06em;
padding: 0.3rem 0.65rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-full);
color: var(--paper-mute);
text-transform: lowercase;
}
.profile-card .profile-status {
margin-top: var(--space-3);
padding-top: var(--space-2);
border-top: 1px dashed var(--ink-edge);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.profile-card .profile-online {
font-family: 'Geist Mono', monospace;
font-size: var(--type-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--action-success);
display: flex;
align-items: center;
gap: 0.5em;
}
.profile-card .profile-online.offline {
color: var(--paper-fade);
}
.profile-card .profile-online::before {
content: "";
width: 6px; height: 6px;
background: currentColor;
border-radius: 50%;
box-shadow: 0 0 8px currentColor;
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.profile-card .profile-match {
font-family: 'Geist Mono', monospace;
font-size: var(--type-xs);
font-weight: 600;
color: var(--alpine-gold-deep);
letter-spacing: 0.08em;
}
.profile-card .pill {
position: absolute;
z-index: 3;
top: var(--space-2);
padding: 0.3rem 0.65rem;
border-radius: var(--radius-full);
font-family: 'Geist Mono', monospace;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.profile-card .pill-verified {
left: var(--space-2);
background: var(--alpine-red);
color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.4);
font-weight: 600;
box-shadow: 0 2px 8px -2px rgba(221, 0, 0, 0.4);
}
.profile-card .pill-distance {
right: var(--space-2);
background: rgba(255, 255, 255, 0.95);
color: var(--paper-pure);
border: 1px solid var(--ink-edge);
}
/* ── 9. COUNTRY / CATEGORY CARDS ──────────────────────────── */
.country-card,
.topic-card {
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-lg);
padding: var(--space-4);
text-decoration: none;
color: var(--paper-pure);
transition: transform 400ms var(--ease-out), border-color var(--transition);
position: relative;
overflow: hidden;
display: block;
isolation: isolate;
}
.country-card {
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.country-card .country-photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: -2;
transition: transform 700ms var(--ease-out), filter 600ms var(--ease-out);
filter: brightness(0.78) saturate(1) contrast(1.03);
}
.country-card::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.78) 100%);
z-index: -1;
transition: opacity 400ms var(--ease-out);
pointer-events: none;
}
.country-card:hover {
transform: translateY(-6px);
border-color: rgba(255, 206, 0, 0.55);
box-shadow:
0 22px 50px -18px rgba(30, 20, 10, 0.28),
0 0 0 1px rgba(255, 206, 0, 0.25);
}
.country-card:hover .country-photo {
transform: scale(1.06);
filter: brightness(0.85) saturate(1.05) contrast(1.03);
}
.country-card .country-num {
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.75);
letter-spacing: 0.15em;
position: relative;
z-index: 1;
}
.country-card .country-name {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 320;
font-size: 2.4rem;
letter-spacing: -0.025em;
color: #FFFFFF;
line-height: 1;
margin-top: 0.4rem;
font-variation-settings: 'opsz' 144, 'SOFT' 60;
text-shadow: 0 2px 20px rgba(10, 10, 10, 0.45);
position: relative;
z-index: 1;
}
.country-card .country-native {
font-family: 'Geist Mono', monospace;
font-size: 0.78rem;
color: var(--alpine-gold);
margin-top: 0.5rem;
letter-spacing: 0.12em;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.country-card .country-cta {
margin-top: var(--space-4);
display: flex;
align-items: center;
justify-content: space-between;
color: #FFFFFF;
font-family: 'Geist Mono', monospace;
font-size: var(--type-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
position: relative;
z-index: 1;
padding-top: var(--space-2);
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.country-card .country-cta .arrow {
transition: transform 300ms var(--ease-out);
color: var(--alpine-gold);
}
.country-card:hover .country-cta .arrow { transform: translateX(4px); }
/* ── 9b. EDITORIAL SPREADS ──────────────────────────────── */
.spread {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--space-5);
align-items: center;
margin: var(--space-7) 0;
}
.spread.spread-reverse {
grid-template-columns: 1fr 1.1fr;
}
.spread.spread-reverse .spread-image { order: 2; }
.spread.spread-reverse .spread-text { order: 1; }
.spread-image {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--ink-edge);
aspect-ratio: 4 / 3;
background: var(--ink-raised);
}
.spread-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(1) saturate(0.95) contrast(1.02);
transition: transform 1200ms var(--ease-out), filter 600ms var(--ease-out);
}
.spread-image:hover img {
transform: scale(1.04);
filter: brightness(1.02) saturate(1.05) contrast(1.03);
}
.spread-image figcaption {
position: absolute;
bottom: var(--space-2);
left: var(--space-3);
right: var(--space-3);
font-family: 'Geist Mono', monospace;
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.92);
letter-spacing: 0.12em;
text-transform: uppercase;
padding: var(--space-2) var(--space-2) 0;
border-top: 1px solid rgba(255, 255, 255, 0.35);
background: linear-gradient(180deg, transparent, rgba(10, 10, 10, 0.5));
text-shadow: 0 1px 4px rgba(10, 10, 10, 0.6);
}
.spread-text .eyebrow {
margin-bottom: var(--space-2);
}
.spread-text h2 {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.05;
margin-bottom: var(--space-3);
font-variation-settings: 'opsz' 144, 'SOFT' 70;
}
.spread-text p {
font-size: 1.05rem;
color: var(--paper-mute);
line-height: 1.7;
max-width: 50ch;
}
.spread-text .spread-quote {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 350;
font-size: 1.4rem;
color: var(--paper-pure);
line-height: 1.4;
border-left: 2px solid var(--alpine-red);
padding-left: var(--space-3);
margin: var(--space-3) 0;
font-variation-settings: 'opsz' 144, 'SOFT' 80;
}
@media (max-width: 768px) {
.spread, .spread.spread-reverse { grid-template-columns: 1fr; gap: var(--space-3); }
.spread.spread-reverse .spread-image { order: 1; }
.spread.spread-reverse .spread-text { order: 2; }
}
/* ── 9c. PAGE HERO IMAGE ──────────────────────────────── */
.page-hero {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
aspect-ratio: 21 / 9;
margin-bottom: var(--space-6);
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
}
.page-hero img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.95) saturate(1) contrast(1.03);
}
.page-hero::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 50%, rgba(10, 10, 10, 0.35) 100%);
pointer-events: none;
}
.page-hero-caption {
position: absolute;
bottom: var(--space-3);
left: var(--space-4);
right: var(--space-4);
z-index: 2;
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.92);
letter-spacing: 0.12em;
text-transform: uppercase;
text-shadow: 0 1px 4px rgba(10, 10, 10, 0.5);
}
/* ── 10. CITY LINKS ───────────────────────────────────── */
.city-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-1);
}
.city-link {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.85rem 1.2rem;
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-full);
text-align: left;
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: var(--type-sm);
color: var(--paper-pure);
text-decoration: none;
transition: all var(--transition);
}
button.city-link {
cursor: pointer;
font-family: inherit;
width: 100%;
}
.city-link:hover {
background: var(--paper-pure);
border-color: var(--paper-pure);
color: var(--ink-raised);
transform: translateY(-1px);
}
/* ── 11. STEPS — editorial cards with German accent washes ──── */
.step {
position: relative;
padding: var(--space-5) var(--space-4) var(--space-4);
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-lg);
transition:
transform 400ms var(--ease-out),
border-color var(--transition),
box-shadow var(--transition);
overflow: hidden;
isolation: isolate;
}
/* Couleurs differentes par etape — drapeau suisse subtle */
.step:nth-child(1) { --step-accent: var(--alpine-red); --step-accent-rgb: 218, 41, 28; }
.step:nth-child(2) { --step-accent: var(--alpine-gold); --step-accent-rgb: 201, 169, 110; }
.step:nth-child(3) { --step-accent: var(--alpine-glacier); --step-accent-rgb: 42, 95, 127; }
/* Wash colore subtil dans le coin superieur droit */
.step::before {
content: "";
position: absolute;
top: -40%; right: -40%;
width: 80%; height: 80%;
background: radial-gradient(circle at center,
rgba(var(--step-accent-rgb, 218, 41, 28), 0.10) 0%,
rgba(var(--step-accent-rgb, 218, 41, 28), 0.04) 30%,
transparent 70%);
pointer-events: none;
z-index: 0;
transition: transform 600ms var(--ease-out), opacity 400ms var(--ease-out);
}
/* Trait colore en haut */
.step::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 60px; height: 3px;
background: var(--step-accent, var(--alpine-red));
border-radius: 0 0 3px 0;
z-index: 1;
}
.step > * { position: relative; z-index: 1; }
.step:hover {
transform: translateY(-4px);
border-color: rgba(var(--step-accent-rgb, 218, 41, 28), 0.4);
box-shadow:
0 22px 40px -18px rgba(30, 20, 10, 0.18),
0 0 0 1px rgba(var(--step-accent-rgb, 218, 41, 28), 0.15);
}
.step:hover::before {
transform: scale(1.15);
opacity: 1.2;
}
.step:hover::after {
width: 100px;
transition: width 400ms var(--ease-out);
}
.step-num {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 280;
font-size: 5rem;
line-height: 0.9;
color: var(--paper-ghost);
margin-bottom: var(--space-3);
font-variation-settings: 'opsz' 144, 'SOFT' 80;
letter-spacing: -0.04em;
transition: color 600ms var(--ease-out), transform 500ms var(--ease-out);
display: inline-block;
}
.step:hover .step-num {
color: var(--step-accent, var(--alpine-gold));
transform: scale(1.04);
}
/* Petite croix suisse decorative pres du numero */
.step-num::after {
content: "+";
display: inline-block;
font-family: 'Geist Mono', monospace;
font-style: normal;
font-weight: 400;
font-size: 0.5em;
color: var(--step-accent, var(--alpine-red));
margin-left: 0.3em;
vertical-align: 0.4em;
opacity: 0.7;
transition: transform 600ms var(--ease-out), opacity 400ms var(--ease-out);
}
.step:hover .step-num::after {
transform: rotate(45deg) scale(1.2);
opacity: 1;
}
.step-icon {
width: 52px; height: 52px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-3);
color: var(--step-accent, var(--paper-pure));
border: 1px solid rgba(var(--step-accent-rgb, 218, 41, 28), 0.18);
border-radius: var(--radius-md);
background: rgba(var(--step-accent-rgb, 218, 41, 28), 0.06);
transition: all 400ms var(--ease-out);
}
.step:hover .step-icon {
background: var(--step-accent, var(--alpine-red));
color: #FFFFFF;
border-color: var(--step-accent, var(--alpine-red));
transform: rotate(-4deg) scale(1.05);
box-shadow: 0 8px 18px -6px rgba(var(--step-accent-rgb, 218, 41, 28), 0.45);
}
.step h3 {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 380;
font-size: 1.6rem;
margin-bottom: 0.5rem;
color: var(--paper-pure);
font-variation-settings: 'opsz' 144, 'SOFT' 60;
letter-spacing: -0.02em;
}
.step p {
color: var(--paper-mute);
font-size: 0.95rem;
line-height: 1.6;
max-width: 28ch;
}
/* Petite fleche connective entre les etapes (desktop uniquement) */
@media (min-width: 769px) {
.grid-3 .step:not(:last-child) .step-icon {
position: relative;
}
.grid-3 .step:not(:last-child) .step-icon::before {
content: "→";
position: absolute;
right: calc(-1 * var(--space-4) - 1rem);
top: 50%;
transform: translateY(-50%);
font-family: 'Geist Mono', monospace;
font-size: 1.4rem;
color: var(--paper-ghost);
opacity: 0.5;
z-index: 4;
transition: color 400ms var(--ease-out), opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
pointer-events: none;
}
}
/* ── 12. SITE FOOTER ──────────────────────────────────── */
.site-footer {
background: #1B1B25;
border-top: 1px solid rgba(10, 10, 10, 0.12);
padding: var(--space-7) 0 var(--space-4);
margin-top: var(--space-7);
color: rgba(245, 240, 228, 0.7);
font-family: 'Geist', sans-serif;
}
.site-footer .logo,
.site-footer .logo span {
color: #c9a35b !important;
-webkit-text-fill-color: #c9a35b !important;
background: none !important;
background-clip: initial !important;
-webkit-background-clip: initial !important;
}
.site-footer h3 {
color: rgba(245, 240, 228, 0.55) !important;
font-family: 'Geist Mono', monospace;
font-size: var(--type-xs);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: var(--space-3);
}
.site-footer ul a {
color: rgba(245, 240, 228, 0.82) !important;
font-size: var(--type-sm);
text-decoration: none;
transition: color var(--transition);
display: inline-block;
}
.site-footer ul a:hover { color: #FFFFFF !important; }
.site-footer p,
.site-footer div { color: rgba(245, 240, 228, 0.68); }
.site-footer .logo {
margin-bottom: var(--space-3);
}
.site-footer ul {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer ul li {
margin-bottom: 0.6rem;
}
/* ── 13. ACTIVITY TICKER ─────────────────────────────── */
.activity-ticker-wrap {
background: transparent;
border-top: 1px solid var(--ink-edge);
border-bottom: 1px solid var(--ink-edge);
padding: var(--space-2) 0;
overflow: hidden;
position: relative;
}
.activity-ticker-wrap::before,
.activity-ticker-wrap::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 80px;
z-index: 2;
pointer-events: none;
}
.activity-ticker-wrap::before {
left: 0;
background: linear-gradient(90deg, var(--ink-base) 0%, var(--ink-base) 30%, transparent 100%);
}
.activity-ticker-wrap::after {
right: 0;
background: linear-gradient(-90deg, var(--ink-base) 0%, var(--ink-base) 30%, transparent 100%);
}
.activity-ticker {
display: flex;
gap: var(--space-6);
white-space: nowrap;
animation: ticker 50s linear infinite;
font-family: 'Geist Mono', monospace;
font-size: var(--type-xs);
letter-spacing: 0.06em;
color: var(--paper-mute);
text-transform: uppercase;
}
.activity-ticker span {
display: inline-flex;
align-items: center;
gap: 0.5em;
}
.activity-ticker span::before {
content: "◆";
color: var(--action);
font-size: 0.6em;
}
@keyframes ticker {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ── 14. STICKY MOBILE CTA ───────────────────────────── */
.sticky-cta-mobile {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--action);
color: #FFFFFF;
text-align: center;
padding: var(--space-2) var(--space-3);
font-family: 'Geist', sans-serif;
font-weight: 600;
text-decoration: none;
font-size: var(--type-sm);
z-index: 9998;
box-shadow: 0 -8px 24px -6px rgba(221, 0, 0, 0.35);
}
.sticky-cta-mobile::after {
content: " →";
color: rgba(255, 255, 255, 0.9);
font-family: 'Geist Mono', monospace;
}
@media (max-width: 768px) {
.sticky-cta-mobile { display: block; }
body { padding-bottom: 64px; }
}
/* ── 15. AGE GATE & COOKIE BANNER ────────────────────── */
#age-gate {
background: rgba(10, 10, 10, 0.55) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
#age-gate > div {
background: var(--ink-raised) !important;
border: 1px solid var(--ink-edge) !important;
border-radius: var(--radius-xl) !important;
box-shadow: 0 40px 80px rgba(10, 10, 10, 0.25);
max-width: 480px !important;
padding: var(--space-5) !important;
color: var(--paper-pure);
}
#age-gate h2 {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 380;
font-size: 2rem;
color: var(--paper-pure);
font-variation-settings: 'opsz' 144, 'SOFT' 60;
margin-bottom: var(--space-2);
}
#age-gate p { color: var(--paper-mute) !important; }
#cookie-banner {
background: var(--ink-raised) !important;
border-top: 1px solid var(--ink-edge) !important;
box-shadow: 0 -10px 30px rgba(10, 10, 10, 0.08);
color: var(--paper-pure);
}
#cookie-banner p {
color: var(--paper-mute) !important;
font-size: var(--type-sm);
}
/* ── 16. BREADCRUMBS ─────────────────────────────────── */
.breadcrumbs {
display: flex;
gap: 0.6em;
font-family: 'Geist Mono', monospace;
font-size: var(--type-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--paper-fade);
margin-bottom: var(--space-4);
list-style: none;
align-items: center;
flex-wrap: wrap;
}
.breadcrumbs a {
color: var(--paper-mute);
text-decoration: none;
transition: color var(--transition);
}
.breadcrumbs a:hover { color: var(--paper-pure); }
.breadcrumbs li:not(:last-child)::after {
content: "/";
margin-left: 0.6em;
color: var(--paper-ghost);
}
/* ── 17. REVEAL ANIMATIONS ────────────────────────────── */
.reveal-on-scroll {
opacity: 0;
transform: translateY(24px);
transition:
opacity 800ms var(--ease-out),
transform 800ms var(--ease-out);
}
.reveal-on-scroll.revealed {
opacity: 1;
transform: translateY(0);
}
.stagger > * {
opacity: 0;
transform: translateY(20px);
animation: stagger-in 700ms var(--ease-out) forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.18s; }
.stagger > *:nth-child(3) { animation-delay: 0.32s; }
.stagger > *:nth-child(4) { animation-delay: 0.46s; }
.stagger > *:nth-child(5) { animation-delay: 0.6s; }
@keyframes stagger-in {
to { opacity: 1; transform: translateY(0); }
}
/* ── 18. FEATURE / TRUST STRIP ────────────────────────── */
.feature-strip {
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-xl);
padding: var(--space-6) var(--space-5);
text-align: center;
position: relative;
overflow: hidden;
}
.feature-strip::before {
content: "";
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg,
rgba(221, 0, 0, 0.05) 90deg,
transparent 180deg,
rgba(10, 10, 10, 0.05) 270deg,
transparent 360deg);
animation: spin-conic 60s linear infinite;
opacity: 0.7;
z-index: 0;
}
.feature-strip > * { position: relative; z-index: 1; }
.feature-strip h2 {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 320;
font-variation-settings: 'opsz' 144, 'SOFT' 70;
font-size: clamp(2rem, 4vw, 3rem);
}
.feature-strip .features {
display: flex;
gap: var(--space-5);
justify-content: center;
flex-wrap: wrap;
margin-top: var(--space-4);
font-family: 'Geist Mono', monospace;
font-size: var(--type-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--paper-mute);
}
.feature-strip .features > div {
display: flex;
align-items: center;
gap: 0.5em;
}
/* ── 19. QUIZ / FEATURE BLOCK ────────────────────────── */
.feature-block {
position: relative;
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-xl);
padding: var(--space-6);
overflow: hidden;
text-align: center;
}
.feature-block::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(221, 0, 0, 0.06) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(10, 10, 10, 0.06) 0%, transparent 50%);
pointer-events: none;
}
.feature-block > * { position: relative; z-index: 1; }
/* ── 20. UTILITIES ────────────────────────────────────── */
.text-center { text-align: center; }
.text-mute { color: var(--paper-mute); }
.text-fade { color: var(--paper-fade); }
.text-action { color: var(--action); }
.divider-line {
height: 1px;
background: var(--ink-edge);
border: 0;
margin: var(--space-5) 0;
}
/* ── 21. RESPONSIVE ────────────────────────────────────── */
@media (max-width: 1024px) {
:root { --gutter: clamp(1rem, 4vw, 1.5rem); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.site-footer .container > div:first-child {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 700px) {
.site-footer .container > div:first-child {
grid-template-columns: 1fr !important;
gap: var(--space-4) !important;
}
.site-footer ul { columns: 2; column-gap: var(--space-3); }
.site-footer ul li { break-inside: avoid; }
.site-footer .logo span {
background: none !important;
-webkit-background-clip: initial !important;
-webkit-text-fill-color: var(--paper-pure) !important;
background-clip: initial !important;
color: var(--alpine-gold) !important;
}
}
@media (max-width: 768px) {
.grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
.hero { min-height: 80vh; padding-top: var(--space-5); padding-bottom: var(--space-5); }
.hero-content h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
.hero-content p { font-size: 1.05rem; }
.hero::before { top: 30%; }
.section { padding: var(--space-5) 0; }
.section-head { gap: var(--space-1); }
.site-header nav { gap: var(--space-2); flex-wrap: wrap; }
.site-header .btn-primary { padding: 0.7rem 1.1rem; font-size: var(--type-xs); }
.header-inner { gap: var(--space-2); }
.feature-strip .features { gap: var(--space-3); }
.country-card .country-name { font-size: 1.7rem; }
.step-num { font-size: 3rem; }
}
.profile-card, .country-card, .topic-card {
transform: translateZ(0);
backface-visibility: hidden;
}
/* ════════════════════════════════════════════════════════════════
── 22. CONVERSION TACTICS ─────────────────────────────────────
════════════════════════════════════════════════════════════════ */
/* ── A. URGENCY BAR ──────────────────────────────────── */
.urgency-bar {
position: sticky;
top: 0;
z-index: 1100;
background: var(--paper-pure);
color: var(--ink-base);
padding: 0.55rem var(--space-3);
text-align: center;
font-family: 'Geist Mono', monospace;
font-size: 0.8rem;
letter-spacing: 0.05em;
border-bottom: 1px solid rgba(10, 10, 10, 0.2);
overflow: hidden;
min-height: 36px;
}
.urgency-bar .pulse-dot {
display: inline-block;
width: 7px; height: 7px;
background: var(--alpine-spark);
border-radius: 50%;
margin-right: 0.5em;
box-shadow: 0 0 10px var(--alpine-spark);
animation: pulse-dot 1.5s ease-in-out infinite;
vertical-align: 1px;
}
.urgency-bar strong {
font-weight: 600;
letter-spacing: 0.04em;
}
.urgency-bar .timer {
color: var(--alpine-spark);
font-weight: 600;
font-variant-numeric: tabular-nums;
margin-left: 0.4em;
}
.urgency-bar a {
color: var(--ink-base);
text-decoration: underline;
text-underline-offset: 3px;
margin-left: 0.6em;
font-weight: 600;
}
.urgency-bar a:hover { color: var(--alpine-spark); }
.urgency-bar + .site-header { top: 36px; }
/* ── B. GEO BANNER ───────────────────────────────────── */
.geo-banner {
position: relative;
margin: var(--space-4) auto 0;
max-width: var(--max-w);
padding: 0.85rem var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: 44px;
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-left: 3px solid var(--alpine-red);
border-radius: var(--radius-md);
font-size: 0.95rem;
flex-wrap: wrap;
}
.geo-banner .geo-text {
color: var(--paper-pure);
flex: 1;
min-width: 240px;
}
.geo-banner .geo-text strong {
font-family: 'Geist Mono', monospace;
color: var(--alpine-red);
font-weight: 500;
margin-right: 0.4em;
}
.geo-banner .geo-text em {
font-family: 'Fraunces', serif;
font-style: italic;
color: var(--paper-pure);
font-weight: 380;
font-variation-settings: 'opsz' 144, 'SOFT' 70;
}
.geo-banner .geo-cta {
font-family: 'Geist Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--alpine-red);
text-decoration: none;
white-space: nowrap;
}
.geo-banner .geo-cta:hover { color: var(--paper-pure); }
/* ── C. FAKE MESSAGE BANNER ────────────────────────── */
.message-banner {
position: sticky;
top: 88px;
z-index: 990;
margin: 0 auto var(--space-4);
max-width: var(--max-w);
background: linear-gradient(135deg, var(--alpine-red) 0%, var(--alpine-glacier) 100%);
color: #FFFFFF;
border-radius: var(--radius-lg);
padding: var(--space-2) var(--space-3);
display: flex;
align-items: center;
gap: var(--space-2);
box-shadow: 0 12px 32px -10px rgba(221, 0, 0, 0.45);
animation: slide-down 0.6s var(--ease-out);
}
@keyframes slide-down {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
.message-banner .msg-avatar {
width: 44px; height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid #FFFFFF;
}
.message-banner .msg-content { flex: 1; min-width: 0; }
.message-banner .msg-name {
font-family: 'Geist', sans-serif;
font-weight: 600;
font-size: 0.95rem;
color: #FFFFFF;
}
.message-banner .msg-name .ago {
font-family: 'Geist Mono', monospace;
font-weight: 400;
font-size: 0.7rem;
opacity: 0.85;
margin-left: 0.5em;
letter-spacing: 0.05em;
}
.message-banner .msg-text {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.95);
line-height: 1.3;
margin-top: 0.15rem;
font-variation-settings: 'opsz' 144, 'SOFT' 70;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.message-banner .msg-cta {
flex-shrink: 0;
background: #FFFFFF;
color: var(--alpine-red);
padding: 0.55rem 1rem;
border-radius: var(--radius-full);
font-family: 'Geist', sans-serif;
font-weight: 600;
font-size: 0.85rem;
text-decoration: none;
transition: transform 250ms var(--ease-out);
}
.message-banner .msg-cta:hover {
transform: scale(1.05);
}
.message-banner .msg-close {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
font-size: 1.2rem;
padding: 0.3rem;
line-height: 1;
}
.message-banner .msg-close:hover { color: #FFFFFF; }
@media (max-width: 768px) {
.message-banner { flex-wrap: wrap; gap: var(--space-1); }
.message-banner .msg-text { white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; }
.message-banner .msg-cta { width: 100%; text-align: center; }
}
/* ── D. HERO SEARCH WIDGET ───────────────────────────── */
.hero-search {
margin-top: var(--space-4);
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-xl);
padding: var(--space-3);
display: grid;
grid-template-columns: repeat(4, 1fr) auto;
gap: var(--space-2);
align-items: end;
box-shadow: 0 12px 30px -16px rgba(10, 10, 10, 0.18);
max-width: 720px;
}
.hero-search .field {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.hero-search .field label {
font-family: 'Geist Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--paper-fade);
}
.hero-search select,
.hero-search input {
background: var(--ink-base);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-md);
padding: 0.55rem 0.7rem;
font-family: 'Geist', sans-serif;
font-size: 0.9rem;
color: var(--paper-pure);
appearance: none;
cursor: pointer;
transition: border-color var(--transition);
}
.hero-search select:focus,
.hero-search input:focus {
outline: none;
border-color: var(--alpine-red);
}
.hero-search .search-btn {
grid-row: 2;
height: 100%;
min-height: 42px;
}
.hero-search-result {
margin-top: var(--space-3);
padding: var(--space-3);
background: linear-gradient(135deg, rgba(221, 0, 0, 0.08), rgba(10, 10, 10, 0.06));
border: 1px solid rgba(221, 0, 0, 0.2);
border-radius: var(--radius-lg);
display: none;
animation: fade-up 0.5s var(--ease-out);
max-width: 720px;
}
.hero-search-result.visible { display: block; }
.hero-search-result .result-num {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 350;
font-size: 2.2rem;
color: var(--alpine-red);
line-height: 1;
font-variation-settings: 'opsz' 144, 'SOFT' 80;
}
.hero-search-result .result-text {
color: var(--paper-mute);
margin-top: 0.5rem;
font-size: 0.95rem;
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.hero-search { grid-template-columns: 1fr; }
.hero-search .search-btn { grid-row: auto; }
}
/* ── E. LIVE COUNTER WIDGET ──────────────────────────── */
#live-counter-widget {
display: none;
position: fixed;
top: 110px;
right: 18px;
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
padding: 0.7rem 1rem;
border-radius: var(--radius-full);
font-family: 'Geist Mono', monospace;
font-size: 0.78rem;
color: var(--paper-pure);
z-index: 990;
box-shadow: 0 12px 30px -10px rgba(10, 10, 10, 0.15);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
#live-counter-widget .live-dot {
display: inline-block;
width: 7px; height: 7px;
background: var(--action-success);
border-radius: 50%;
margin-right: 0.5em;
box-shadow: 0 0 10px var(--action-success);
animation: pulse-dot 1.5s ease-in-out infinite;
vertical-align: 1px;
}
#live-counter-widget .live-num {
color: var(--alpine-red);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
#live-counter-widget { top: auto; bottom: 78px; right: 10px; font-size: 0.7rem; padding: 0.5rem 0.85rem; }
}
/* ── F. FAQ KILLER ───────────────────────────────────── */
.faq-section {
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-xl);
padding: var(--space-5);
max-width: 960px;
margin: 0 auto;
}
.faq-list {
display: grid;
gap: var(--space-1);
margin-top: var(--space-4);
}
.faq-item {
border-bottom: 1px solid var(--ink-edge);
transition: background var(--transition);
}
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
cursor: pointer;
padding: var(--space-3) var(--space-2);
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 380;
font-size: 1.2rem;
color: var(--paper-pure);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
font-variation-settings: 'opsz' 144, 'SOFT' 60;
transition: color var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
font-family: 'Geist Mono', monospace;
font-style: normal;
color: var(--action);
font-weight: 400;
font-size: 1.5rem;
transition: transform 300ms var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--action); }
.faq-item .faq-answer {
padding: 0 var(--space-2) var(--space-3);
color: var(--paper-mute);
font-size: 0.95rem;
line-height: 1.7;
}
.faq-item .faq-answer a {
color: var(--action);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── G. TESTIMONIALS ─────────────────────────────────── */
.testimonials {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.testimonial {
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-lg);
padding: var(--space-4);
position: relative;
}
.testimonial {
border-top: 3px solid var(--alpine-gold);
}
.testimonial::before {
content: "\201C";
position: absolute;
top: -8px; left: var(--space-3);
font-family: 'Fraunces', serif;
font-size: 4rem;
line-height: 1;
color: var(--alpine-gold);
font-variation-settings: 'opsz' 144, 'SOFT' 100;
font-style: italic;
}
.testimonial-quote {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 350;
font-size: 1.1rem;
line-height: 1.5;
color: var(--paper-pure);
margin: var(--space-2) 0 var(--space-3);
font-variation-settings: 'opsz' 144, 'SOFT' 70;
}
.testimonial-author {
display: flex;
align-items: center;
gap: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--ink-edge);
}
.testimonial-avatar {
width: 40px; height: 40px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.testimonial-name {
font-family: 'Geist', sans-serif;
font-weight: 500;
font-size: 0.9rem;
color: var(--paper-pure);
}
.testimonial-meta {
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
color: var(--paper-fade);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 0.15rem;
}
@media (max-width: 768px) {
.testimonials { grid-template-columns: 1fr; }
}
/* ── H. PUSH NOTIF OPTIN POPUP ──────────────────────── */
#push-optin {
display: none;
position: fixed;
bottom: var(--space-3);
left: var(--space-3);
z-index: 9997;
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-xl);
padding: var(--space-3);
max-width: 340px;
box-shadow: 0 24px 50px -16px rgba(10, 10, 10, 0.22);
animation: slide-up 0.4s var(--ease-out);
}
@keyframes slide-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
#push-optin.visible { display: block; }
#push-optin .push-icon {
width: 38px; height: 38px;
background: var(--action);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
margin-bottom: var(--space-2);
}
#push-optin h4 {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 380;
font-size: 1.2rem;
margin-bottom: 0.4rem;
color: var(--paper-pure);
font-variation-settings: 'opsz' 144, 'SOFT' 70;
}
#push-optin p {
color: var(--paper-mute);
font-size: 0.85rem;
line-height: 1.5;
}
#push-optin .push-actions {
display: flex;
gap: 0.6rem;
margin-top: var(--space-2);
}
#push-optin .push-actions button {
flex: 1;
padding: 0.55rem 0.8rem;
border-radius: var(--radius-full);
font-family: 'Geist', sans-serif;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
border: 1px solid var(--ink-edge);
background: var(--ink-base);
color: var(--paper-pure);
transition: all var(--transition);
}
#push-optin .push-yes {
background: var(--action);
color: #FFFFFF;
border-color: var(--action);
}
#push-optin .push-yes:hover { background: var(--primary-dark); }
#push-optin .push-no:hover { background: var(--ink-raised); }
#push-optin .push-close {
position: absolute;
top: 8px; right: 10px;
background: none;
border: none;
color: var(--paper-fade);
font-size: 1.1rem;
cursor: pointer;
line-height: 1;
}
@media (max-width: 768px) {
#push-optin { left: var(--space-1); right: var(--space-1); max-width: none; }
}
/* Selection styling */
::selection {
background: var(--alpine-red);
color: #FFFFFF;
}
/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-base); }
::-webkit-scrollbar-thumb {
background: rgba(10, 10, 10, 0.18);
border-radius: 5px;
border: 2px solid var(--ink-base);
}
::-webkit-scrollbar-thumb:hover { background: rgba(10, 10, 10, 0.32); }
/* ════════════════════════════════════════════════════════════════
── 23. CONVERSION QUICK WINS v4.3 ─────────────────────────────
Trust strip, pricing, press logos, live activity, bottom tabs
════════════════════════════════════════════════════════════════ */
/* ── A. TRUST STRIP (sous urgency-bar, sticky avec header) ─── */
.trust-strip {
background: var(--ink-raised);
border-bottom: 1px solid var(--ink-edge);
font-family: 'Geist Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--paper-mute);
padding: 0.5rem 0;
overflow: hidden;
}
.trust-strip-inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-4);
}
.trust-item {
display: inline-flex;
align-items: center;
gap: 0.4em;
white-space: nowrap;
}
.trust-item .trust-flag {
font-size: 1rem;
line-height: 1;
}
.trust-item .trust-stars {
color: var(--alpine-gold);
letter-spacing: 0.05em;
font-size: 0.78rem;
}
@media (max-width: 768px) {
.trust-strip { font-size: 0.65rem; }
.trust-strip-inner { gap: var(--space-2); }
/* Hide 2 items on mobile to keep one row */
.trust-strip-inner .trust-item:nth-child(2) { display: none; }
}
/* ── B. PRICING STRIP ──────────────────────────────────── */
.pricing-strip {
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-xl);
padding: var(--space-5);
position: relative;
overflow: hidden;
}
.pricing-strip::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 0% 0%, rgba(221, 0, 0, 0.05) 0%, transparent 50%),
radial-gradient(ellipse at 100% 100%, rgba(255, 206, 0, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.pricing-strip > * { position: relative; z-index: 1; }
.pricing-head {
text-align: center;
margin-bottom: var(--space-4);
}
.pricing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.pricing-card {
background: var(--ink-base);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-lg);
padding: var(--space-4);
position: relative;
transition: transform 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.pricing-card:hover {
transform: translateY(-2px);
}
.pricing-card--free {
border-color: rgba(63, 110, 78, 0.25);
}
.pricing-card--premium {
border-color: rgba(255, 206, 0, 0.4);
background: linear-gradient(135deg, var(--ink-base) 0%, rgba(255, 206, 0, 0.06) 100%);
}
.pricing-tag {
display: inline-block;
font-family: 'Geist Mono', monospace;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.18em;
padding: 0.25rem 0.7rem;
border-radius: var(--radius-full);
margin-bottom: var(--space-2);
background: var(--alpine-pine);
color: #FFFFFF;
}
.pricing-tag--premium {
background: linear-gradient(135deg, var(--alpine-gold), var(--alpine-gold-deep));
color: #FFFFFF;
}
.pricing-card h3 {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 380;
font-size: 1.4rem;
margin-bottom: 0.4rem;
color: var(--paper-pure);
line-height: 1.2;
}
.pricing-card p {
font-size: 0.92rem;
color: var(--paper-mute);
line-height: 1.5;
}
.pricing-cancel {
text-align: center;
font-family: 'Geist Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
color: var(--paper-mute);
display: flex;
align-items: center;
justify-content: center;
gap: 0.4em;
margin-top: var(--space-2);
}
@media (max-width: 768px) {
.pricing-grid { grid-template-columns: 1fr; }
}
/* ── C. PRESS LOGOS BAND ─────────────────────────────── */
.press-band {
padding: var(--space-4) 0;
border-top: 1px solid var(--ink-edge);
border-bottom: 1px solid var(--ink-edge);
background: rgba(255, 252, 246, 0.5);
}
.press-label {
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--paper-fade);
text-align: center;
margin-bottom: var(--space-3);
}
.press-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-5);
opacity: 0.55;
transition: opacity 300ms var(--ease-out);
}
.press-band:hover .press-logos { opacity: 0.85; }
.press-logo {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 400;
font-size: 1.2rem;
color: var(--paper-pure);
letter-spacing: -0.01em;
line-height: 1;
padding: 0.3rem 0;
}
.press-logo--nzz {
font-family: 'Times New Roman', serif;
font-weight: 700;
font-style: normal;
letter-spacing: 0.05em;
}
.press-logo--letemps {
font-family: 'Fraunces', serif;
font-style: italic;
}
.press-logo--rts {
font-family: 'Geist', sans-serif;
font-weight: 800;
font-style: normal;
letter-spacing: 0.1em;
}
.press-logo--corriere {
font-family: 'Times New Roman', serif;
font-style: italic;
font-weight: 600;
}
.press-logo--20min {
font-family: 'Geist', sans-serif;
font-weight: 800;
font-style: normal;
}
.press-logo--sonntag {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 500;
}
@media (max-width: 768px) {
.press-logos { gap: var(--space-3); }
.press-logo { font-size: 1rem; }
}
/* ── D. LIVE ACTIVITY WIDGET (sticky bottom-right rotatif) ─── */
.live-activity {
position: fixed;
bottom: var(--space-3);
left: var(--space-3);
z-index: 9990;
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-xl);
padding: var(--space-3);
width: 320px;
max-width: calc(100vw - var(--space-4));
box-shadow:
0 24px 50px -16px rgba(30, 20, 10, 0.25),
0 0 0 1px rgba(221, 0, 0, 0.05);
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
border-left: 3px solid var(--alpine-red);
}
.live-activity.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.live-activity .la-pulse {
position: absolute;
top: var(--space-3);
right: var(--space-3);
width: 8px;
height: 8px;
background: var(--action-success);
border-radius: 50%;
box-shadow: 0 0 10px var(--action-success);
animation: pulse-dot 2s ease-in-out infinite;
}
.live-activity .la-close {
position: absolute;
top: 4px;
right: 14px;
background: transparent;
border: none;
color: var(--paper-fade);
font-size: 1.1rem;
cursor: pointer;
line-height: 1;
padding: 0.4rem;
z-index: 3;
}
.live-activity .la-close:hover { color: var(--paper-pure); }
.live-activity .la-card {
display: none;
align-items: center;
gap: var(--space-2);
cursor: pointer;
}
.live-activity .la-card.active {
display: flex;
animation: la-slide-in 0.4s var(--ease-out);
}
@keyframes la-slide-in {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
.live-activity .la-avatar {
width: 44px; height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--alpine-red);
}
.live-activity .la-content {
flex: 1;
min-width: 0;
}
.live-activity .la-name {
font-family: 'Geist', sans-serif;
font-size: 0.85rem;
color: var(--paper-pure);
line-height: 1.2;
}
.live-activity .la-name strong { font-weight: 600; }
.live-activity .la-name .la-city {
color: var(--paper-fade);
font-weight: 400;
margin-left: 0.3em;
}
.live-activity .la-action {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 0.85rem;
color: var(--paper-mute);
line-height: 1.3;
margin-top: 0.2rem;
font-variation-settings: 'opsz' 144, 'SOFT' 70;
}
.live-activity .la-time {
font-family: 'Geist Mono', monospace;
font-size: 0.65rem;
color: var(--paper-fade);
letter-spacing: 0.08em;
margin-top: 0.2rem;
}
.live-activity .la-cta {
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--alpine-red);
text-decoration: none;
flex-shrink: 0;
align-self: stretch;
display: flex;
align-items: center;
padding: 0 0 0 var(--space-1);
}
.live-activity .la-cta:hover { color: var(--alpine-rouge); }
@media (max-width: 768px) {
.live-activity {
bottom: 78px; /* above bottom-tabs */
left: var(--space-1);
right: var(--space-1);
width: auto;
max-width: none;
}
.live-activity .la-cta { display: none; }
}
/* ── E. BOTTOM TAB BAR (mobile only) ───────────────────── */
.bottom-tabs {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9998;
background: var(--ink-raised);
border-top: 1px solid var(--ink-edge);
box-shadow: 0 -8px 24px -10px rgba(30, 20, 10, 0.15);
padding: 0.4rem 0 0.5rem;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.bottom-tabs .bt-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
padding: 0.4rem 0.2rem 0.3rem;
color: var(--paper-fade);
text-decoration: none;
font-family: 'Geist', sans-serif;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.02em;
transition: color var(--transition);
position: relative;
}
.bottom-tabs .bt-icon {
width: 22px;
height: 22px;
transition: transform 250ms var(--ease-out);
}
.bottom-tabs .bt-label { line-height: 1; }
.bottom-tabs .bt-tab--active,
.bottom-tabs .bt-tab:hover {
color: var(--paper-pure);
}
.bottom-tabs .bt-tab--active .bt-icon { transform: translateY(-2px); }
.bottom-tabs .bt-tab--cta {
color: var(--alpine-red);
position: relative;
}
.bottom-tabs .bt-tab--cta .bt-icon {
width: 28px;
height: 28px;
color: var(--alpine-red);
}
.bottom-tabs .bt-tab--cta::before {
content: "";
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 36px;
background: rgba(221, 0, 0, 0.1);
border-radius: 50%;
z-index: -1;
animation: pulse-dot 2.5s ease-in-out infinite;
}
.bottom-tabs .bt-tab--cta:hover .bt-icon {
transform: scale(1.1);
}
.bottom-tabs .bt-badge {
position: absolute;
top: 0.3rem;
right: calc(50% - 16px);
background: var(--alpine-red);
color: #FFFFFF;
font-family: 'Geist', sans-serif;
font-size: 0.6rem;
font-weight: 700;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
@media (max-width: 768px) {
.bottom-tabs { display: flex; align-items: stretch; }
body { padding-bottom: 70px; }
/* Quand bottom-tabs est present, hide le sticky-cta-mobile (redondant) */
.sticky-cta-mobile { display: none !important; }
}
/* ── F. PROFILE MULTI-CTA STACK (profile.php) ────────── */
.profile-cta-stack {
margin-top: var(--space-5);
border-top: 1px solid var(--ink-edge);
padding-top: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.profile-cta-stack .cta-action {
display: flex !important;
align-items: center;
gap: var(--space-2);
padding: 0.85rem var(--space-3);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-full);
background: var(--ink-base);
color: var(--paper-pure) !important;
text-decoration: none;
font-family: 'Geist', sans-serif;
font-weight: 500;
font-size: 0.95rem;
transition: all 250ms var(--ease-out);
position: relative;
overflow: hidden;
isolation: isolate;
z-index: 1;
}
.profile-cta-stack .cta-action::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(221, 0, 0, 0.08), transparent);
transform: translateX(-100%);
transition: transform 600ms var(--ease-out);
pointer-events: none;
z-index: -1;
}
.profile-cta-stack .cta-action:hover {
transform: translateX(4px);
border-color: var(--alpine-red);
box-shadow: 0 6px 14px -6px rgba(221, 0, 0, 0.25);
}
.profile-cta-stack .cta-action:hover::before { transform: translateX(100%); }
.profile-cta-stack .cta-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: inherit;
position: relative;
z-index: 1;
}
.profile-cta-stack .cta-label {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
gap: 0.5em;
color: var(--paper-pure) !important;
position: relative;
z-index: 1;
line-height: 1.3;
font-weight: 500;
}
.profile-cta-stack .cta-label-text {
color: var(--paper-pure) !important;
flex: 1 1 auto;
min-width: 0;
}
.profile-cta-stack .cta-icon {
/* Pour les emojis, taille generique */
font-size: 1.15rem;
line-height: 1;
}
.profile-cta-stack .cta-count {
font-family: 'Geist Mono', monospace;
font-size: 0.75rem;
color: var(--alpine-gold-deep) !important;
background: rgba(255, 206, 0, 0.18);
padding: 0.15rem 0.5rem;
border-radius: var(--radius-full);
font-weight: 600;
flex-shrink: 0;
}
.profile-cta-stack .cta-arrow {
font-family: 'Geist Mono', monospace;
color: var(--paper-fade);
transition: transform 250ms var(--ease-out), color 250ms var(--ease-out);
flex-shrink: 0;
position: relative;
z-index: 1;
}
.profile-cta-stack .cta-action:hover .cta-arrow {
color: var(--alpine-red);
transform: translateX(4px);
}
.profile-cta-stack .cta-wink { border-left: 3px solid var(--alpine-rouge); }
.profile-cta-stack .cta-wink .cta-icon { color: var(--alpine-rouge) !important; }
.profile-cta-stack .cta-photos { border-left: 3px solid var(--alpine-gold-deep); }
.profile-cta-stack .cta-photos .cta-icon { color: var(--alpine-gold-deep) !important; }
.profile-cta-stack .cta-message {
width: 100%;
padding: var(--space-3);
font-size: 1.05rem;
margin-top: var(--space-1);
justify-content: center;
}
.profile-cta-stack .cta-secure {
text-align: center;
margin-top: var(--space-2);
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
color: var(--paper-fade);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ════════════════════════════════════════════════════════════════
── 24. CONVERSION QUICK WINS PHASE 2 (v4.5) ──────────────────
Scarcity, reciprocity, day-banner, filters, search, sticky-rail,
floating-chat, profile-completeness, timezone, 404, cookie granular
════════════════════════════════════════════════════════════════ */
/* ── G. SCARCITY COUNTER (badge profile-card) ────────── */
.profile-card .scarcity-badge {
position: absolute;
bottom: 8px;
left: 8px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.3rem 0.65rem;
background: rgba(255, 252, 246, 0.92);
color: var(--alpine-red);
border: 1px solid rgba(221, 0, 0, 0.25);
border-radius: var(--radius-full);
font-family: 'Geist Mono', monospace;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.06em;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 10px -4px rgba(221, 0, 0, 0.18);
}
.profile-card .scarcity-dot {
width: 6px;
height: 6px;
background: var(--alpine-red);
border-radius: 50%;
box-shadow: 0 0 6px var(--alpine-red);
animation: pulse-dot 1.5s ease-in-out infinite;
}
/* ── H. RECIPROCITY TOAST ────────────────────────────── */
.reciprocity-toast {
position: fixed;
top: 90px;
right: 18px;
z-index: 9994;
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-xl);
padding: var(--space-3);
width: 320px;
max-width: calc(100vw - var(--space-4));
box-shadow: 0 24px 50px -16px rgba(30, 20, 10, 0.22);
border-left: 3px solid var(--alpine-gold);
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.reciprocity-toast.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.reciprocity-toast .rt-close {
position: absolute;
top: 4px;
right: 8px;
background: transparent;
border: none;
color: var(--paper-fade);
font-size: 1.1rem;
cursor: pointer;
line-height: 1;
padding: 0.4rem;
}
.reciprocity-toast .rt-emoji {
font-size: 1.6rem;
margin-bottom: 0.4rem;
line-height: 1;
}
.reciprocity-toast .rt-text {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 0.95rem;
color: var(--paper-pure);
line-height: 1.4;
font-variation-settings: 'opsz' 144, 'SOFT' 60;
}
.reciprocity-toast .rt-text strong {
font-style: normal;
font-family: 'Geist Mono', monospace;
font-weight: 600;
color: var(--alpine-gold-deep);
margin-right: 0.2em;
}
.reciprocity-toast .rt-cta {
display: inline-block;
margin-top: var(--space-2);
font-family: 'Geist Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--alpine-red);
text-decoration: none;
font-weight: 600;
}
.reciprocity-toast .rt-cta:hover { color: var(--alpine-rouge); }
@media (max-width: 768px) {
.reciprocity-toast { top: 80px; right: var(--space-1); left: var(--space-1); width: auto; max-width: none; }
}
/* ── I. DAY-OF-WEEK BANNER ─────────────────────────── */
.day-banner {
background: linear-gradient(135deg,
rgba(221, 0, 0, 0.08) 0%,
rgba(255, 206, 0, 0.08) 50%,
rgba(10, 10, 10, 0.08) 100%);
border-top: 1px solid var(--ink-edge);
border-bottom: 1px solid var(--ink-edge);
padding: var(--space-2) 0;
margin: var(--space-3) 0;
min-height: 40px;
}
.day-banner-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
}
.day-banner-text {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 1.05rem;
color: var(--paper-pure);
font-variation-settings: 'opsz' 144, 'SOFT' 60;
line-height: 1.4;
flex: 1;
min-width: 280px;
}
.day-banner-cta {
font-family: 'Geist Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--alpine-red);
text-decoration: none;
font-weight: 600;
white-space: nowrap;
padding: 0.4rem 0.8rem;
border: 1px solid var(--alpine-red);
border-radius: var(--radius-full);
transition: all var(--transition);
}
.day-banner-cta:hover {
background: var(--alpine-red);
color: #FFFFFF;
}
/* ── J. PROFILE FILTERS ──────────────────────────── */
.profile-filters {
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-lg);
padding: var(--space-3);
margin-bottom: var(--space-4);
box-shadow: 0 2px 8px -4px rgba(30, 20, 10, 0.08);
}
.pf-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-family: 'Geist', sans-serif;
font-size: 0.85rem;
}
.pf-icon { font-size: 1rem; }
.pf-label {
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--paper-fade);
margin-right: var(--space-2);
}
.pf-select {
background: var(--ink-base);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-full);
padding: 0.4rem 0.85rem;
font-family: inherit;
font-size: 0.85rem;
color: var(--paper-pure);
cursor: pointer;
appearance: none;
transition: border-color var(--transition);
}
.pf-select:focus, .pf-age-input:focus {
outline: none;
border-color: var(--alpine-red);
}
.pf-age {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.4rem 0.7rem;
background: var(--ink-base);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-full);
}
.pf-age-label {
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--paper-fade);
}
.pf-age-input {
width: 38px;
background: transparent;
border: none;
font-family: inherit;
font-size: 0.85rem;
color: var(--paper-pure);
text-align: center;
appearance: textfield;
-moz-appearance: textfield;
}
.pf-age-input::-webkit-outer-spin-button,
.pf-age-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pf-age-sep { color: var(--paper-fade); }
.pf-toggle {
display: inline-flex;
align-items: center;
gap: 0.4em;
cursor: pointer;
padding: 0.4rem 0.85rem;
background: var(--ink-base);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-full);
transition: all var(--transition);
}
.pf-toggle input { accent-color: var(--alpine-red); cursor: pointer; }
.pf-toggle:hover { border-color: var(--alpine-red); }
.pf-toggle:has(input:checked) {
background: rgba(221, 0, 0, 0.08);
border-color: var(--alpine-red);
color: var(--alpine-red);
}
.pf-reset {
background: transparent;
border: 1px solid var(--ink-edge);
color: var(--paper-mute);
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.4rem 0.85rem;
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--transition);
}
.pf-reset:hover {
color: var(--alpine-red);
border-color: var(--alpine-red);
}
.pf-count {
margin-left: auto;
font-family: 'Geist Mono', monospace;
font-size: 0.75rem;
color: var(--paper-fade);
letter-spacing: 0.05em;
}
.pf-count #pf-count-num { color: var(--alpine-red); font-weight: 700; }
@media (max-width: 768px) {
.pf-bar { font-size: 0.78rem; }
.pf-count { width: 100%; text-align: center; margin-left: 0; }
}
/* ── K. SEARCH AUTOCOMPLETE (header) ─────────────── */
.search-autocomplete {
position: relative;
display: inline-flex;
align-items: center;
}
.sa-trigger {
background: transparent;
border: 1px solid var(--ink-edge);
color: var(--paper-mute);
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
}
.sa-trigger:hover {
border-color: var(--alpine-red);
color: var(--alpine-red);
}
.sa-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 320px;
max-width: 90vw;
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-lg);
box-shadow: 0 24px 50px -16px rgba(30, 20, 10, 0.2);
padding: var(--space-2);
display: none;
z-index: 1100;
}
.sa-dropdown.open { display: block; }
.sa-input {
width: 100%;
padding: 0.55rem 0.85rem;
border: 1px solid var(--ink-edge);
border-radius: var(--radius-full);
background: var(--ink-base);
color: var(--paper-pure);
font-family: inherit;
font-size: 0.9rem;
outline: none;
}
.sa-input:focus { border-color: var(--alpine-red); }
.sa-results {
margin-top: var(--space-1);
max-height: 280px;
overflow-y: auto;
}
.sa-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.55rem 0.85rem;
color: var(--paper-pure);
text-decoration: none;
border-radius: var(--radius-md);
transition: background var(--transition);
}
.sa-item:hover { background: var(--ink-base); }
.sa-item-name { font-size: 0.9rem; }
.sa-item-arrow { color: var(--alpine-red); font-family: 'Geist Mono', monospace; }
.sa-empty {
padding: var(--space-2);
text-align: center;
color: var(--paper-fade);
font-size: 0.85rem;
}
@media (max-width: 768px) {
.sa-dropdown { width: 280px; right: -50px; }
}
/* ── L. STICKY RIGHT RAIL (desktop only) ─────────── */
.sticky-rail {
position: fixed;
top: 130px;
right: 18px;
width: 280px;
z-index: 9985;
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-xl);
padding: var(--space-3);
box-shadow: 0 24px 50px -16px rgba(30, 20, 10, 0.18);
border-top: 3px solid var(--alpine-red);
opacity: 0;
transform: translateX(20px);
pointer-events: none;
transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.sticky-rail.visible {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.sr-close {
position: absolute;
top: 4px;
right: 8px;
background: transparent;
border: none;
color: var(--paper-fade);
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
padding: 0.4rem;
}
.sr-pulse-wrap {
display: flex;
align-items: center;
gap: 0.5em;
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--paper-fade);
margin-bottom: var(--space-2);
}
.sr-pulse {
width: 8px;
height: 8px;
background: var(--action-success);
border-radius: 50%;
box-shadow: 0 0 8px var(--action-success);
animation: pulse-dot 2s ease-in-out infinite;
}
.sr-profile {
display: none;
align-items: center;
gap: var(--space-2);
padding: 0.6rem 0;
text-decoration: none;
color: var(--paper-pure);
}
.sr-profile.active { display: flex; animation: la-slide-in 0.4s var(--ease-out); }
.sr-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--alpine-red);
}
.sr-meta { flex: 1; min-width: 0; }
.sr-name {
font-family: 'Geist', sans-serif;
font-size: 0.85rem;
font-weight: 600;
color: var(--paper-pure);
}
.sr-city {
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
color: var(--paper-fade);
letter-spacing: 0.05em;
}
.sr-arrow { font-family: 'Geist Mono', monospace; color: var(--alpine-red); }
.sr-divider {
height: 1px;
background: var(--ink-edge);
margin: var(--space-2) 0;
}
.sr-cta {
width: 100%;
padding: 0.7rem;
font-size: 0.85rem;
text-align: center;
justify-content: center;
}
@media (max-width: 1199px) { .sticky-rail { display: none; } }
/* ── M. FLOATING CHAT WIDGET ──────────────────────── */
.floating-chat {
position: fixed;
bottom: 90px;
right: 18px;
z-index: 9989;
opacity: 0;
transform: scale(0.8) translateY(20px);
transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.floating-chat.visible {
opacity: 1;
transform: scale(1) translateY(0);
}
.fc-bubble {
background: var(--alpine-red);
border: 3px solid #FFFFFF;
border-radius: 50%;
width: 60px;
height: 60px;
cursor: pointer;
position: relative;
overflow: visible;
padding: 0;
box-shadow: 0 12px 30px -8px rgba(221, 0, 0, 0.45);
transition: transform 250ms var(--ease-out);
}
.fc-bubble:hover { transform: scale(1.05); }
.fc-bubble-avatar {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.fc-bubble-dot {
position: absolute;
bottom: 4px;
right: 4px;
width: 14px;
height: 14px;
background: var(--action-success);
border: 2px solid var(--ink-raised);
border-radius: 50%;
box-shadow: 0 0 8px var(--action-success);
}
.fc-bubble-badge {
position: absolute;
top: -4px;
right: -4px;
background: #FFFFFF;
color: var(--alpine-red);
font-family: 'Geist', sans-serif;
font-size: 0.7rem;
font-weight: 700;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--alpine-red);
box-shadow: 0 4px 8px rgba(221, 0, 0, 0.3);
animation: pulse-dot 2.5s ease-in-out infinite;
}
.floating-chat.chat-open .fc-bubble { display: none; }
.fc-panel {
display: none;
position: absolute;
bottom: 0;
right: 0;
width: 340px;
max-width: calc(100vw - var(--space-3));
height: 480px;
max-height: calc(100vh - 160px);
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-xl);
box-shadow: 0 32px 60px -20px rgba(30, 20, 10, 0.3);
flex-direction: column;
overflow: hidden;
}
.fc-panel.open { display: flex; }
.fc-header {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2);
border-bottom: 1px solid var(--ink-edge);
background: linear-gradient(135deg, rgba(221, 0, 0, 0.05), rgba(255, 206, 0, 0.05));
}
.fc-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--alpine-red);
}
.fc-info { flex: 1; min-width: 0; }
.fc-name {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 380;
font-size: 1rem;
color: var(--paper-pure);
}
.fc-status {
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
color: var(--paper-fade);
letter-spacing: 0.05em;
display: inline-flex;
align-items: center;
gap: 0.4em;
}
.fc-status-dot {
width: 6px;
height: 6px;
background: var(--action-success);
border-radius: 50%;
box-shadow: 0 0 6px var(--action-success);
}
.fc-close {
background: transparent;
border: none;
color: var(--paper-fade);
cursor: pointer;
font-size: 1.4rem;
line-height: 1;
padding: 0.4rem;
}
.fc-body {
flex: 1;
overflow-y: auto;
padding: var(--space-2);
background: var(--ink-base);
}
.fc-msg {
margin-bottom: var(--space-2);
}
.fc-msg-bubble {
display: inline-block;
padding: 0.6rem 0.9rem;
border-radius: 14px;
font-size: 0.9rem;
line-height: 1.4;
max-width: 80%;
}
.fc-msg--in .fc-msg-bubble {
background: var(--ink-raised);
color: var(--paper-pure);
border: 1px solid var(--ink-edge);
border-bottom-left-radius: 4px;
}
.fc-msg--out {
text-align: right;
}
.fc-msg--out .fc-msg-bubble {
background: var(--alpine-red);
color: #FFFFFF;
border-bottom-right-radius: 4px;
}
.fc-msg-time {
font-family: 'Geist Mono', monospace;
font-size: 0.65rem;
color: var(--paper-fade);
margin-top: 0.2rem;
letter-spacing: 0.05em;
}
.fc-msg--new { animation: la-slide-in 0.3s var(--ease-out); }
.fc-typing {
display: none;
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: 14px;
border-bottom-left-radius: 4px;
padding: 0.6rem 0.9rem;
width: fit-content;
}
.fc-typing.active { display: inline-flex; gap: 0.3em; align-items: center; }
.fc-typing-dot {
width: 6px;
height: 6px;
background: var(--paper-fade);
border-radius: 50%;
animation: typing-bounce 1.4s ease-in-out infinite;
}
.fc-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.fc-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-4px); opacity: 1; }
}
.fc-input {
display: flex;
align-items: center;
gap: 0.4rem;
padding: var(--space-2);
border-top: 1px solid var(--ink-edge);
background: var(--ink-raised);
}
.fc-input input {
flex: 1;
padding: 0.55rem 0.85rem;
border: 1px solid var(--ink-edge);
border-radius: var(--radius-full);
background: var(--ink-base);
color: var(--paper-pure);
font-family: inherit;
font-size: 0.85rem;
outline: none;
}
.fc-input input:focus { border-color: var(--alpine-red); }
.fc-send {
background: var(--alpine-red);
border: none;
color: #FFFFFF;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.fc-send:hover { background: var(--alpine-rouge); }
@media (max-width: 768px) {
.floating-chat { bottom: 80px; right: var(--space-1); }
.fc-bubble { width: 52px; height: 52px; }
.fc-panel { right: 0; bottom: 70px; width: calc(100vw - var(--space-2)); }
}
/* ── N. PROFILE COMPLETENESS ──────────────────── */
.profile-completeness {
margin-top: var(--space-3);
background: linear-gradient(135deg, rgba(255, 206, 0, 0.06), rgba(221, 0, 0, 0.04));
border: 1px solid rgba(255, 206, 0, 0.25);
border-radius: var(--radius-lg);
padding: var(--space-3);
}
.pc-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-1);
}
.pc-pct {
font-family: 'Geist Mono', monospace;
font-size: 0.85rem;
font-weight: 600;
color: var(--alpine-gold-deep);
letter-spacing: 0.05em;
}
.pc-lock-badge { font-size: 1.1rem; }
.pc-bar {
height: 6px;
background: rgba(10, 10, 10, 0.06);
border-radius: 3px;
overflow: hidden;
margin: var(--space-1) 0;
}
.pc-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--alpine-gold), var(--alpine-red));
border-radius: 3px;
transition: width 1s var(--ease-out);
}
.pc-desc {
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
color: var(--paper-fade);
letter-spacing: 0.05em;
margin-top: var(--space-1);
}
.pc-cta {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--space-2);
padding: 0.7rem var(--space-2);
background: var(--ink-raised);
border: 1px solid rgba(255, 206, 0, 0.35);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--paper-pure);
transition: all var(--transition);
}
.pc-cta:hover {
background: var(--alpine-gold);
border-color: var(--alpine-gold);
color: #FFFFFF;
}
.pc-cta-text {
font-size: 0.9rem;
}
.pc-cta-text strong {
color: var(--alpine-gold-deep);
font-weight: 600;
}
.pc-cta:hover .pc-cta-text strong { color: #FFFFFF; }
.pc-cta-gated {
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--alpine-gold-deep);
font-weight: 600;
}
.pc-cta:hover .pc-cta-gated { color: #FFFFFF; }
/* ── O. TIMEZONE MESSAGE ─────────────────────── */
.timezone-msg {
margin-top: var(--space-3);
text-align: center;
font-family: 'Geist Mono', monospace;
font-size: 0.72rem;
color: var(--action-success);
letter-spacing: 0.06em;
display: inline-flex;
align-items: center;
gap: 0.5em;
width: 100%;
justify-content: center;
}
.tz-dot {
width: 6px;
height: 6px;
background: var(--action-success);
border-radius: 50%;
box-shadow: 0 0 6px var(--action-success);
animation: pulse-dot 2s ease-in-out infinite;
}
/* ── P. 404 RICH PAGE ───────────────────────── */
.error-404-num {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 280;
font-size: clamp(6rem, 18vw, 12rem);
line-height: 0.9;
letter-spacing: -0.05em;
color: var(--alpine-red);
margin-bottom: var(--space-3);
background: linear-gradient(135deg, var(--alpine-red), var(--alpine-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
/* ── Q. COOKIE BANNER GRANULAR ─────────────── */
.cookie-banner-granular {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--ink-raised);
border-top: 1px solid var(--ink-edge);
box-shadow: 0 -16px 40px -10px rgba(30, 20, 10, 0.18);
padding: var(--space-3) 0;
z-index: 99998;
transform: translateY(100%);
transition: transform 400ms var(--ease-out);
}
.cookie-banner-granular.visible { transform: translateY(0); }
.cookie-banner-granular .cb-inner {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.cb-head {
display: flex;
gap: var(--space-2);
align-items: flex-start;
}
.cb-head .cb-icon {
color: var(--alpine-red);
flex-shrink: 0;
width: 24px;
height: 24px;
margin-top: 2px;
}
.cb-titles { flex: 1; min-width: 0; }
.cb-title {
display: block;
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 380;
font-size: 1.1rem;
color: var(--paper-pure);
margin-bottom: 0.2rem;
}
.cb-body {
font-size: 0.85rem;
color: var(--paper-mute);
line-height: 1.5;
margin: 0;
}
.cb-body a { color: var(--alpine-red); text-decoration: underline; text-underline-offset: 2px; }
.cb-toggles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-2);
}
.cb-toggle {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: var(--space-2);
background: var(--ink-base);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-md);
cursor: pointer;
}
.cb-toggle:has(input:checked) {
border-color: var(--alpine-red);
background: rgba(221, 0, 0, 0.04);
}
.cb-toggle:has(input:disabled) {
opacity: 0.7;
cursor: not-allowed;
}
.cb-toggle-head {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-size: 0.9rem;
color: var(--paper-pure);
}
.cb-toggle-head input { accent-color: var(--alpine-red); }
.cb-toggle-badge {
font-family: 'Geist Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--alpine-pine);
background: rgba(63, 110, 78, 0.12);
padding: 0.1rem 0.5rem;
border-radius: var(--radius-full);
margin-left: auto;
}
.cb-toggle-desc {
font-size: 0.78rem;
color: var(--paper-mute);
line-height: 1.4;
}
.cb-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
justify-content: flex-end;
}
@media (max-width: 768px) {
.cb-toggles { grid-template-columns: 1fr; }
.cb-actions { flex-direction: column; }
.cb-actions .btn { width: 100%; }
}
/* ════════════════════════════════════════════════════════════════
── 25. CONTENT PAGES (find-match, quiz, compare, thematic, blog)
════════════════════════════════════════════════════════════════ */
/* ── A. FIND MATCH / QUIZ — multi-step wizard ───────── */
.fm-wrap { max-width: 920px; }
.fm-card {
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-xl);
padding: var(--space-5);
box-shadow: 0 12px 30px -16px rgba(30, 20, 10, 0.15);
}
.fm-progress {
margin-bottom: var(--space-5);
}
.fm-progress-bar {
height: 4px;
background: var(--ink-base);
border-radius: 2px;
overflow: hidden;
margin-bottom: var(--space-1);
}
.fm-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--alpine-red), var(--alpine-gold));
transition: width 500ms var(--ease-out);
}
.fm-progress-label {
font-family: 'Geist Mono', monospace;
font-size: 0.75rem;
color: var(--paper-fade);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.fm-progress-label strong { color: var(--alpine-red); }
.fm-step {
display: none;
animation: fade-up 0.4s var(--ease-out);
}
.fm-step.active { display: block; }
.fm-step-title {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 380;
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
color: var(--paper-pure);
line-height: 1.15;
margin-bottom: var(--space-2);
font-variation-settings: 'opsz' 144, 'SOFT' 60;
}
.fm-step-lede {
font-size: 1rem;
color: var(--paper-mute);
margin-bottom: var(--space-4);
}
.fm-options {
display: grid;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.fm-options--canton { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.fm-options--age, .fm-options--type, .fm-options--quiz { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.fm-option-card {
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.85rem 1rem;
background: var(--ink-base);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 250ms var(--ease-out);
color: var(--paper-pure);
}
.fm-option-card:hover {
border-color: var(--alpine-red);
background: rgba(221, 0, 0, 0.04);
}
.fm-option-card input { accent-color: var(--alpine-red); }
.fm-option-card:has(input:checked) {
border-color: var(--alpine-red);
background: rgba(221, 0, 0, 0.08);
box-shadow: 0 4px 12px -4px rgba(221, 0, 0, 0.2);
}
.fm-option-card--all { background: linear-gradient(135deg, rgba(218,41,28,0.06), rgba(201,169,110,0.06)); }
.fm-option-emoji { flex-direction: column; text-align: center; padding: var(--space-3); }
.fm-emoji { font-size: 2rem; margin-bottom: 0.4rem; }
.fm-option-name { font-size: 0.95rem; font-weight: 500; }
.fm-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4); }
.fm-actions .btn-ghost { margin-right: auto; }
.fm-email-input {
width: 100%;
padding: var(--space-3);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-md);
background: var(--ink-base);
color: var(--paper-pure);
font-family: inherit;
font-size: 1.05rem;
margin-bottom: var(--space-3);
outline: none;
}
.fm-email-input:focus { border-color: var(--alpine-red); }
.fm-loading {
text-align: center;
padding: var(--space-6) 0;
color: var(--paper-mute);
}
.fm-spinner {
width: 48px;
height: 48px;
border: 3px solid var(--ink-base);
border-top-color: var(--alpine-red);
border-radius: 50%;
margin: 0 auto var(--space-3);
animation: fm-spin 1s linear infinite;
}
@keyframes fm-spin { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
.fm-actions { flex-direction: column-reverse; }
.fm-actions .btn { width: 100%; }
.fm-actions .btn-ghost { margin-right: 0; }
}
/* ── B. COMPARE TABLE ────────────────────────────── */
.compare-tldr {
background: linear-gradient(135deg, rgba(218,41,28,0.05), rgba(201,169,110,0.05));
border: 1px solid rgba(221, 0, 0, 0.18);
border-left: 4px solid var(--alpine-red);
border-radius: var(--radius-lg);
padding: var(--space-4);
margin-bottom: var(--space-5);
}
.compare-tldr .ct-eyebrow {
font-family: 'Geist Mono', monospace;
font-size: 0.75rem;
color: var(--alpine-red);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: var(--space-2);
}
.compare-tldr .ct-text {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 1.1rem;
color: var(--paper-pure);
font-variation-settings: 'opsz' 144, 'SOFT' 60;
margin: 0;
}
.compare-table-wrap {
overflow-x: auto;
border-radius: var(--radius-lg);
border: 1px solid var(--ink-edge);
margin-bottom: var(--space-5);
}
.compare-table {
width: 100%;
border-collapse: collapse;
background: var(--ink-raised);
font-family: 'Geist', sans-serif;
}
.compare-table th, .compare-table td {
padding: var(--space-2);
text-align: center;
border-bottom: 1px solid var(--ink-edge);
font-size: 0.85rem;
color: var(--paper-pure);
}
.compare-table th { background: var(--ink-base); font-weight: 600; }
.compare-table .ctab-criteria { text-align: left; color: var(--paper-mute); font-size: 0.78rem; }
.compare-table td:first-child { text-align: left; }
.compare-table .ctab-name { padding: var(--space-3) var(--space-2); }
.compare-table .ctab-logo { display: block; font-size: 1.6rem; line-height: 1; margin-bottom: 0.3rem; }
.compare-table .ctab-text { font-size: 0.85rem; }
.compare-table .ctab-winner {
display: inline-block;
margin-left: 0.3em;
padding: 0.15rem 0.4rem;
background: var(--alpine-gold);
color: #FFFFFF;
font-family: 'Geist Mono', monospace;
font-size: 0.55rem;
letter-spacing: 0.08em;
font-weight: 700;
border-radius: var(--radius-sm);
vertical-align: 0.2em;
}
.compare-table .ctab-highlight {
background: rgba(221, 0, 0, 0.04) !important;
}
.compare-table th.ctab-highlight {
background: linear-gradient(180deg, rgba(218,41,28,0.1), rgba(218,41,28,0.04)) !important;
border-bottom: 3px solid var(--alpine-red);
}
.compare-table .ctab-stars { color: var(--alpine-gold); letter-spacing: 0.05em; font-size: 0.95rem; }
.compare-table .ctab-score-row td { font-size: 1.1rem; padding: var(--space-3) var(--space-2); }
.compare-table .ctab-cta-row td { padding: var(--space-3) var(--space-2); }
.compare-verdict {
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-xl);
padding: var(--space-5);
text-align: center;
border-top: 3px solid var(--alpine-red);
}
.compare-verdict h2 {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 380;
font-size: 1.8rem;
margin-bottom: var(--space-3);
}
/* ── C. THEMATIC PAGES ───────────────────────────── */
.thematic-page .thematic-content {
max-width: 760px;
margin: 0 auto;
}
.thematic-section {
margin-bottom: var(--space-5);
}
.thematic-section h2 {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 380;
font-size: clamp(1.5rem, 2.6vw, 2rem);
color: var(--paper-pure);
margin-bottom: var(--space-2);
line-height: 1.2;
font-variation-settings: 'opsz' 144, 'SOFT' 60;
}
.thematic-section p {
font-size: 1.02rem;
color: var(--paper-mute);
line-height: 1.7;
}
/* ── D. BLOG ────────────────────────────────────── */
.blog-card {
display: flex;
flex-direction: column;
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-lg);
padding: var(--space-4);
text-decoration: none;
color: var(--paper-pure);
transition: all 300ms var(--ease-out);
position: relative;
overflow: hidden;
}
.blog-card:hover {
transform: translateY(-4px);
border-color: var(--alpine-red);
box-shadow: 0 20px 40px -16px rgba(30, 20, 10, 0.15);
}
.blog-card-meta {
display: flex;
gap: var(--space-2);
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
color: var(--paper-fade);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: var(--space-2);
}
.blog-card-title {
font-family: 'Fraunces', serif;
font-weight: 380;
font-size: 1.4rem;
margin-bottom: var(--space-2);
line-height: 1.25;
font-variation-settings: 'opsz' 144, 'SOFT' 60;
}
.blog-card-desc {
font-size: 0.92rem;
color: var(--paper-mute);
line-height: 1.5;
margin-bottom: var(--space-3);
flex: 1;
}
.blog-card-cta {
font-family: 'Geist Mono', monospace;
font-size: 0.75rem;
color: var(--alpine-red);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
margin-top: auto;
}
.blog-article {
max-width: 760px;
margin: 0 auto;
}
.blog-article .blog-header {
margin-bottom: var(--space-5);
}
.blog-article h1 {
font-size: clamp(2.2rem, 5vw, 3.5rem);
line-height: 1.1;
}
.blog-meta {
font-family: 'Geist Mono', monospace;
font-size: 0.78rem;
color: var(--paper-fade);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: var(--space-3);
}
.blog-section { margin-bottom: var(--space-4); }
.blog-section h2 {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 380;
font-size: 1.4rem;
color: var(--paper-pure);
line-height: 1.3;
margin-bottom: var(--space-2);
font-variation-settings: 'opsz' 144, 'SOFT' 60;
}
.blog-section p {
font-size: 1.02rem;
color: var(--paper-mute);
line-height: 1.7;
}
.blog-inline-cta {
margin: var(--space-5) 0;
text-align: center;
padding: var(--space-3);
background: linear-gradient(135deg, rgba(218,41,28,0.04), rgba(201,169,110,0.04));
border: 1px solid rgba(221, 0, 0, 0.15);
border-radius: var(--radius-lg);
}
.blog-footer-cta {
margin-top: var(--space-6);
text-align: center;
padding: var(--space-4);
border-top: 1px solid var(--ink-edge);
}
/* ── E. SWISS MAP (cantons grid) ──────────────── */
.swiss-map {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--space-2);
background: linear-gradient(135deg, rgba(218,41,28,0.03), rgba(201,169,110,0.03));
padding: var(--space-3);
border-radius: var(--radius-xl);
border: 1px solid var(--ink-edge);
}
.sm-canton {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-3) var(--space-2);
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-md);
color: var(--paper-pure);
text-decoration: none;
transition: all 300ms var(--ease-out);
min-height: 90px;
overflow: hidden;
}
.sm-canton:hover {
border-color: var(--alpine-red);
background: var(--alpine-red);
color: #FFFFFF;
transform: scale(1.04);
box-shadow: 0 12px 24px -8px rgba(221, 0, 0, 0.3);
z-index: 2;
}
.sm-canton-name {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 380;
font-size: 1.05rem;
line-height: 1.1;
margin-bottom: 0.4rem;
}
.sm-canton-count {
font-family: 'Geist Mono', monospace;
font-size: 0.65rem;
color: var(--paper-fade);
letter-spacing: 0.05em;
transition: color 300ms var(--ease-out);
}
.sm-canton:hover .sm-canton-count { color: rgba(255, 255, 255, 0.9); }
@media (max-width: 480px) {
.swiss-map { grid-template-columns: repeat(2, 1fr); }
.sm-canton-name { font-size: 0.95rem; }
.sm-canton-count { font-size: 0.6rem; }
}
/* ════════════════════════════════════════════════════════════════
── 26. EXIT POPUP V2 (Editorial Daylight) ────────────────────
════════════════════════════════════════════════════════════════ */
.exit-popup {
position: fixed;
inset: 0;
z-index: 99996;
display: none;
opacity: 0;
transition: opacity 400ms var(--ease-out);
}
.exit-popup.visible {
display: block;
opacity: 1;
}
.exit-popup .ep-overlay {
position: absolute;
inset: 0;
background: rgba(10, 10, 10, 0.78);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.exit-popup .ep-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.92);
width: 92%;
max-width: 540px;
background: var(--ink-raised);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-xl);
padding: var(--space-5);
box-shadow: 0 40px 80px -20px rgba(10, 10, 10, 0.4);
text-align: center;
transition: transform 500ms var(--ease-out);
max-height: 90vh;
overflow-y: auto;
}
.exit-popup.visible .ep-card { transform: translate(-50%, -50%) scale(1); }
.ep-close {
position: absolute;
top: var(--space-2);
right: var(--space-2);
background: transparent;
border: none;
color: var(--paper-fade);
font-size: 1.6rem;
cursor: pointer;
line-height: 1;
padding: var(--space-1);
transition: color var(--transition);
}
.ep-close:hover { color: var(--paper-pure); }
.ep-eyebrow {
font-family: 'Geist Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--paper-fade);
margin-bottom: var(--space-2);
}
.ep-eyebrow--gold { color: var(--alpine-gold-deep); }
.ep-eyebrow--red { color: var(--alpine-red); }
.ep-title {
font-family: 'Fraunces', serif;
font-weight: 380;
font-size: clamp(1.6rem, 4vw, 2.4rem);
color: var(--paper-pure);
line-height: 1.1;
margin: 0 0 var(--space-3);
font-variation-settings: 'opsz' 144, 'SOFT' 60;
}
.ep-title em {
font-style: italic;
color: var(--alpine-red);
}
.ep-desc {
font-size: 1rem;
color: var(--paper-mute);
line-height: 1.6;
max-width: 42ch;
margin: 0 auto var(--space-4);
}
.ep-form {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.ep-input {
padding: var(--space-3);
border: 1px solid var(--ink-edge);
border-radius: var(--radius-md);
background: var(--ink-base);
color: var(--paper-pure);
font-family: inherit;
font-size: 1.05rem;
text-align: center;
outline: none;
}
.ep-input:focus { border-color: var(--alpine-red); }
.ep-cta {
width: 100%;
padding: var(--space-3);
font-size: 1.05rem;
font-weight: 600;
}
.ep-no-thanks {
background: transparent;
border: none;
color: var(--paper-fade);
font-size: 0.85rem;
cursor: pointer;
padding: var(--space-2);
margin-top: var(--space-2);
text-decoration: underline;
text-underline-offset: 3px;
font-family: inherit;
}
.ep-no-thanks:hover { color: var(--paper-pure); }
.ep-fineprint {
font-family: 'Geist Mono', monospace;
font-size: 0.7rem;
color: var(--paper-fade);
margin-top: var(--space-2);
letter-spacing: 0.05em;
}
/* Variant B : code box */
.ep-code-box {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: linear-gradient(135deg, rgba(255, 206, 0, 0.18), rgba(221, 0, 0, 0.08));
border: 2px dashed var(--alpine-gold);
border-radius: var(--radius-md);
margin: 0 0 var(--space-3);
}
.ep-code {
font-family: 'Geist Mono', monospace;
font-size: 1.4rem;
font-weight: 700;
color: var(--alpine-red);
letter-spacing: 0.1em;
}
.ep-copy {
background: transparent;
border: 1px solid var(--alpine-gold);
border-radius: var(--radius-md);
padding: 0.4rem 0.6rem;
cursor: pointer;
font-size: 1rem;
transition: all var(--transition);
}
.ep-copy:hover {
background: var(--alpine-gold);
color: #FFFFFF;
}
/* Variant C : scarcity */
.ep-scarcity {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: rgba(221, 0, 0, 0.06);
border: 1px solid rgba(221, 0, 0, 0.25);
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
font-family: 'Geist Mono', monospace;
font-size: 0.85rem;
color: var(--paper-pure);
letter-spacing: 0.05em;
}
.ep-scarcity strong {
color: var(--alpine-red);
font-weight: 700;
}
.ep-scarcity-dot {
width: 8px;
height: 8px;
background: var(--alpine-red);
border-radius: 50%;
box-shadow: 0 0 10px var(--alpine-red);
animation: pulse-dot 1.2s ease-in-out infinite;
}
@media (max-width: 480px) {
.exit-popup .ep-card { padding: var(--space-4) var(--space-3); width: 96%; }
.ep-title { font-size: 1.5rem; }
.ep-desc { font-size: 0.95rem; }
}
/* === RESPONSIVE-MOBILE-PATCH v1 — 2026-05-12 (v3 spec-boost) ===
Master mobile-first patch for the 100+ aprod-* portfolio.
v3 : selectors prefixed with body/html body to win cascade against
inline