137 lines
9.2 KiB
CSS
137 lines
9.2 KiB
CSS
@import '@fontsource/fraunces/400.css';
|
|
@import '@fontsource/fraunces/600.css';
|
|
@import '@fontsource/public-sans/400.css';
|
|
@import '@fontsource/public-sans/500.css';
|
|
@import '@fontsource/public-sans/600.css';
|
|
|
|
:root{
|
|
--petrol: oklch(0.46 0.066 207);
|
|
--petrol-deep: oklch(0.36 0.06 210);
|
|
--petrol-soft: oklch(0.95 0.018 200);
|
|
--ink: oklch(0.24 0.02 250);
|
|
--slate: oklch(0.52 0.02 250);
|
|
--light: oklch(0.985 0.006 230);
|
|
--card: oklch(1 0 0);
|
|
--line: oklch(0.9 0.01 240);
|
|
--warm: oklch(0.68 0.15 47);
|
|
--warm-bg: oklch(0.96 0.035 60);
|
|
--danger: oklch(0.55 0.18 25);
|
|
--danger-bg: oklch(0.95 0.04 30);
|
|
--ok: oklch(0.55 0.11 155);
|
|
--ok-bg: oklch(0.95 0.04 160);
|
|
--radius: 12px;
|
|
--maxw: 1100px;
|
|
--font-head: 'Fraunces', Georgia, serif;
|
|
--font-body: 'Public Sans', system-ui, sans-serif;
|
|
}
|
|
*{box-sizing:border-box}
|
|
html{scroll-behavior:smooth}
|
|
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--light);line-height:1.6;-webkit-font-smoothing:antialiased}
|
|
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:1.15;margin:0 0 .5em}
|
|
h1{font-size:clamp(2rem,5vw,3.1rem);letter-spacing:-.01em}
|
|
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
|
|
h3{font-size:1.2rem}
|
|
p{margin:0 0 1rem}
|
|
a{color:var(--petrol);text-underline-offset:3px}
|
|
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.2rem}
|
|
.u{display:inline-block;height:.18em;width:2.2rem;background:var(--warm);vertical-align:middle;margin-right:.5rem;border-radius:2px}
|
|
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-family:var(--font-body);padding:.8rem 1.3rem;border-radius:999px;border:1.5px solid var(--petrol);background:var(--petrol);color:#fff;text-decoration:none;cursor:pointer;transition:transform .08s ease,background .2s}
|
|
.btn:hover{background:var(--petrol-deep);border-color:var(--petrol-deep)}
|
|
.btn:active{transform:scale(.98)}
|
|
.btn.ghost{background:transparent;color:var(--petrol)}
|
|
.btn.ghost:hover{background:var(--petrol-soft)}
|
|
.btn.sm{padding:.5rem .9rem;font-size:.9rem}
|
|
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem}
|
|
.badge{display:inline-block;font-size:.78rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;background:var(--petrol-soft);color:var(--petrol-deep)}
|
|
.tag-ok{background:var(--ok-bg);color:var(--ok)}
|
|
.tag-warn{background:var(--warm-bg);color:oklch(0.45 0.12 47)}
|
|
.tag-danger{background:var(--danger-bg);color:var(--danger)}
|
|
.muted{color:var(--slate)}
|
|
.grid{display:grid;gap:1rem}
|
|
.note{font-size:.85rem;color:var(--slate)}
|
|
header.site{position:sticky;top:0;z-index:50;background:oklch(0.985 0.006 230 / .92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
|
|
header.site .bar{display:flex;align-items:center;justify-content:space-between;height:62px}
|
|
header.site nav a{margin-left:1.2rem;text-decoration:none;color:var(--ink);font-weight:500;font-size:.95rem}
|
|
header.site nav a:hover{color:var(--petrol)}
|
|
.brand{font-family:var(--font-head);font-weight:600;font-size:1.25rem;color:var(--ink);text-decoration:none}
|
|
.brand b{color:var(--petrol)}
|
|
footer.site{margin-top:4rem;border-top:1px solid var(--line);background:var(--petrol-soft)}
|
|
footer.site .wrap{padding-top:2rem;padding-bottom:2rem}
|
|
@media(max-width:720px){
|
|
header.site .bar{gap:.6rem}
|
|
.brand{flex:0 0 auto;font-size:1.15rem}
|
|
header.site nav{display:flex;align-items:center;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
|
|
header.site nav::-webkit-scrollbar{display:none}
|
|
header.site nav a{margin-left:0;margin-right:.95rem;font-size:.9rem;white-space:nowrap;flex:0 0 auto}
|
|
header.site nav a:last-child{margin-right:0}
|
|
}
|
|
|
|
/* --- v2 additions: data-monitor craft (ui-ux-design-pro + design-taste-frontend) --- */
|
|
:root{
|
|
--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
|
|
--ok-dot:oklch(0.62 0.13 155);
|
|
--low-dot:oklch(0.78 0.15 75);
|
|
--off-dot:oklch(0.80 0.01 240);
|
|
--ink-2:oklch(0.34 0.02 250);
|
|
--surface-2:oklch(0.975 0.006 230);
|
|
--shadow-sm:0 1px 2px oklch(0.4 0.03 250 / .06);
|
|
--shadow-md:0 6px 20px oklch(0.4 0.05 250 / .08),0 1px 3px oklch(0.4 0.05 250 / .05);
|
|
}
|
|
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
|
|
:focus-visible{outline:2px solid var(--petrol);outline-offset:2px;border-radius:4px}
|
|
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle}
|
|
.dot.ok{background:var(--ok-dot)}.dot.low{background:var(--low-dot)}.dot.off{background:var(--off-dot)}
|
|
.skel{background:linear-gradient(90deg,var(--line),var(--surface-2),var(--line));background-size:200% 100%;animation:sh 1.2s infinite;border-radius:6px}
|
|
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
|
|
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
|
|
|
|
/* --- v3 SaaS polish --- */
|
|
:root{
|
|
--shadow-card:0 1px 2px oklch(0.45 0.03 250 / .05), 0 8px 24px oklch(0.45 0.05 250 / .06);
|
|
--shadow-pop:0 12px 40px oklch(0.4 0.06 250 / .14);
|
|
--grad-hero:radial-gradient(900px 420px at 80% -10%, oklch(0.93 0.05 200 / .9), transparent 60%), linear-gradient(180deg, var(--petrol-soft), var(--light));
|
|
}
|
|
body{background:var(--light)}
|
|
.card{box-shadow:var(--shadow-card);border-color:oklch(0.92 0.008 240)}
|
|
.card.flat{box-shadow:none}
|
|
.btn{box-shadow:0 1px 2px oklch(0.3 0.05 230 / .12)}
|
|
.btn:hover{transform:translateY(-1px)}
|
|
header.site{box-shadow:0 1px 0 oklch(0.9 0.01 240)}
|
|
header.site .brand{letter-spacing:-.02em}
|
|
.nav-cta{background:var(--petrol);color:#fff!important;padding:.5rem .9rem;border-radius:999px;font-weight:600!important}
|
|
.nav-cta:hover{background:var(--petrol-deep)}
|
|
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol-deep);background:oklch(1 0 0 / .6);border:1px solid var(--line);padding:.3rem .7rem;border-radius:999px}
|
|
.feature{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.4rem;box-shadow:var(--shadow-card);transition:transform .15s,box-shadow .15s}
|
|
.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop)}
|
|
.feature .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--petrol-soft);color:var(--petrol-deep);font-size:1.2rem;margin-bottom:.7rem}
|
|
.pill-stat{display:inline-flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.45rem .9rem;box-shadow:var(--shadow-card);font-size:.9rem}
|
|
.pill-stat b{font-family:var(--mono);color:var(--petrol-deep)}
|
|
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
|
|
|
|
/* --- v4 animations + polish --- */
|
|
@keyframes kf-pulse{0%{box-shadow:0 0 0 0 oklch(0.62 0.13 155 / .5)}70%{box-shadow:0 0 0 8px oklch(0.62 0.13 155 / 0)}100%{box-shadow:0 0 0 0 oklch(0.62 0.13 155 / 0)}}
|
|
.dot.live{animation:kf-pulse 2.2s infinite}
|
|
.reveal{opacity:0;transform:translateY(16px)}
|
|
.reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease,cubic-bezier(.16,1,.3,1)),transform .6s var(--ease,cubic-bezier(.16,1,.3,1))}
|
|
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}
|
|
@keyframes kf-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
|
.anim-in{animation:kf-in .45s cubic-bezier(.16,1,.3,1) both}
|
|
.flag{font-size:1.05em;line-height:1}
|
|
@media (prefers-reduced-motion: reduce){.reveal{opacity:1!important;transform:none!important}.dot.live{animation:none}}
|
|
|
|
/* --- Offer-Cards (Live-Angebote): Quelle/Preis/Name/Status sauber getrennt, ganze Karte klickbar --- */
|
|
.offer-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .9rem;align-content:start;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;background:var(--card);box-shadow:var(--shadow-card);transition:border-color .15s,transform .1s}
|
|
.offer-card:hover{border-color:var(--petrol);transform:translateY(-1px)}
|
|
.offer-card:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
|
|
.offer-source{font-weight:600;min-width:0;overflow-wrap:anywhere}
|
|
.offer-price{font-family:var(--mono);font-weight:700;white-space:nowrap;text-align:right;color:var(--petrol-deep)}
|
|
.offer-title{grid-column:1 / -1;color:var(--ink-2);font-size:.82rem;line-height:1.35;overflow-wrap:anywhere}
|
|
.offer-meta{grid-column:1 / -1;color:var(--slate);font-size:.74rem;display:inline-flex;gap:.4rem;align-items:center}
|
|
.offer-card:hover .offer-source{text-decoration:underline}
|
|
.offer-card.is-alert{border-color:var(--danger)}.offer-card.is-alert .offer-price{color:var(--danger)}
|
|
.status-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;display:inline-block}
|
|
.status-ok{background:var(--ok-dot)}.status-warn{background:var(--warm)}.status-bad{background:var(--danger)}.status-mut{background:var(--slate)}
|
|
.market-link{font-weight:600;font-size:.92rem;color:var(--petrol-deep);text-decoration:none}
|
|
.market-link:hover{text-decoration:underline}
|
|
.empty-note{color:var(--slate);font-size:.85rem;padding:.6rem .2rem}
|