Initialisieren
This commit is contained in:
374
app/globals.css
Normal file
374
app/globals.css
Normal file
@@ -0,0 +1,374 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
/* Typografie */
|
||||
--font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||||
--font-display: var(--font-cormorant), Georgia, serif;
|
||||
|
||||
/* Farben – Warmes Porzellan-Papier mit sattem Gelb-Grün / Smaragd */
|
||||
--color-paper: #faf8f3;
|
||||
--color-surface: #ffffff;
|
||||
--color-ink: #111412;
|
||||
--color-ink-soft: #45504a;
|
||||
--color-line: #e0eae4;
|
||||
|
||||
--color-primary: #111412;
|
||||
--color-primary-strong: #000000;
|
||||
--color-primary-soft: #e6f7f0;
|
||||
|
||||
/* Glücksspiel & Zufall – Gelb-Grün / Smaragdgrün */
|
||||
--color-emerald-accent: #0d7a57;
|
||||
--color-emerald-strong: #095c41;
|
||||
--color-emerald-soft: #e6f7f0;
|
||||
--color-emerald-line: #b2e5d1;
|
||||
|
||||
--color-clay: #b4633f;
|
||||
--color-clay-soft: #f6eae2;
|
||||
|
||||
/* Schatten */
|
||||
--shadow-soft: 0 2px 4px rgb(17 20 18 / 0.03), 0 12px 36px rgb(17 20 18 / 0.06);
|
||||
--shadow-lift: 0 4px 12px rgb(17 20 18 / 0.06), 0 24px 52px rgb(17 20 18 / 0.10);
|
||||
--shadow-cta: 0 12px 28px rgb(17 20 18 / 0.22);
|
||||
|
||||
/* Animationen */
|
||||
--animate-float: float 7s ease-in-out infinite;
|
||||
--animate-coin-spin: coin-spin 10s linear infinite;
|
||||
--animate-bob: bob 2.4s ease-in-out infinite;
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-16px);
|
||||
}
|
||||
}
|
||||
@keyframes coin-spin {
|
||||
from {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotateY(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes bob {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(6px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes stream {
|
||||
from {
|
||||
stroke-dashoffset: 1000;
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
@keyframes shootTL {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
80% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: translate(520px, 180px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes shootTR {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
80% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-520px, 190px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes shootBL {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 0.65;
|
||||
}
|
||||
80% {
|
||||
opacity: 0.65;
|
||||
}
|
||||
100% {
|
||||
transform: translate(480px, -170px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Basis ---------- */
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-paper);
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Der Inline-Check im Root-Layout läuft vor der Hydration. Dadurch blitzt der
|
||||
Preloader bei einem Reload innerhalb derselben Browser-Session nicht auf. */
|
||||
html[data-preloader="cached"] [data-preloader-overlay] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Der Preloader würde auf einem gedrosselten Mobilgerät das LCP-Element
|
||||
verdecken. Die Seite bleibt dort sofort lesbar; Desktop behält den Effekt. */
|
||||
@media (max-width: 767px) {
|
||||
[data-preloader-overlay] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Die Hero-Inhalte sind bereits vor dem Öffnen des Vorhangs im Startzustand.
|
||||
So kann GSAP sie nicht erst sichtbar machen und anschließend zurücksetzen. */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
html[data-preloader="active"] .hero-el {
|
||||
opacity: 0;
|
||||
transform: translateY(34px);
|
||||
}
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(var(--reveal-y, 30px));
|
||||
transition:
|
||||
opacity 0.7s ease var(--reveal-delay, 0s),
|
||||
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
|
||||
}
|
||||
|
||||
.reveal--visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgb(22 21 19 / 0.12);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Dezente Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-paper);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d5d0c2;
|
||||
border-radius: 8px;
|
||||
border: 2px solid var(--color-paper);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #c1bbab;
|
||||
}
|
||||
|
||||
/* ---------- Hintergrund-Deko ---------- */
|
||||
|
||||
.bg-grid {
|
||||
background-image:
|
||||
linear-gradient(to right, rgb(32 30 25 / 0.045) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgb(32 30 25 / 0.045) 1px, transparent 1px);
|
||||
background-size: 46px 46px;
|
||||
mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, black 25%, transparent 78%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, black 25%, transparent 78%);
|
||||
}
|
||||
|
||||
.bg-noise {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
opacity: 0.03;
|
||||
}
|
||||
|
||||
/* ---------- 3D-Münze (gebürstetes Messing, flach) ---------- */
|
||||
|
||||
.coin-scene {
|
||||
perspective: 1100px;
|
||||
}
|
||||
|
||||
.coin {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-style: preserve-3d;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.coin-face {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 9999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.coin-face--front {
|
||||
transform: translateZ(4px);
|
||||
background: #dec998;
|
||||
box-shadow:
|
||||
inset 0 1px 2px rgb(255 250 235 / 0.5),
|
||||
inset 0 -2px 4px rgb(120 90 40 / 0.12);
|
||||
}
|
||||
|
||||
.coin-face--back {
|
||||
background: #d6be87;
|
||||
box-shadow:
|
||||
inset 0 1px 2px rgb(255 248 228 / 0.5),
|
||||
inset 0 -2px 4px rgb(110 82 36 / 0.12);
|
||||
}
|
||||
|
||||
.coin-edge {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 9999px;
|
||||
background: #8a6f44;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.coin-engraving {
|
||||
position: absolute;
|
||||
inset: 8%;
|
||||
border-radius: 9999px;
|
||||
border: 2px solid rgb(122 94 51 / 0.38);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.coin-engraving--inner {
|
||||
inset: 16%;
|
||||
border-width: 1px;
|
||||
border-color: rgb(122 94 51 / 0.26);
|
||||
}
|
||||
|
||||
.coin-label {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
color: #6e5533;
|
||||
text-shadow: 0 1px 0 rgb(255 246 224 / 0.8);
|
||||
max-width: 78%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ---------- 3D-Würfel ---------- */
|
||||
|
||||
.dice-scene {
|
||||
perspective: 900px;
|
||||
}
|
||||
|
||||
.dice {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-style: preserve-3d;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.dice-face {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fdfcf9;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 18%;
|
||||
box-shadow: inset 0 0 14px rgb(32 30 25 / 0.06);
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
overflow: hidden;
|
||||
padding: 8%;
|
||||
}
|
||||
|
||||
.dice-face-label {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: clamp(9px, 1.6vw, 13px);
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
color: var(--color-ink);
|
||||
overflow-wrap: anywhere;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ---------- Magic 8-Ball (warmes Anthrazit, flach) ---------- */
|
||||
|
||||
.ball-body {
|
||||
background: #1d1b17;
|
||||
box-shadow:
|
||||
inset 0 -18px 42px rgb(0 0 0 / 0.6),
|
||||
inset 0 10px 26px rgb(255 255 255 / 0.07),
|
||||
0 30px 60px rgb(32 30 25 / 0.28);
|
||||
}
|
||||
|
||||
.ball-window {
|
||||
background: #12130f;
|
||||
box-shadow:
|
||||
inset 0 4px 18px rgb(0 0 0 / 0.75),
|
||||
0 0 0 6px rgb(255 255 255 / 0.05);
|
||||
}
|
||||
|
||||
/* ---------- Diverse ---------- */
|
||||
|
||||
.tabular {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-outer-spin-button,
|
||||
input[type="number"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
Reference in New Issue
Block a user