Donne a l'interface un style neon inspire de Tron
This commit is contained in:
223
styles.css
223
styles.css
@@ -1,19 +1,25 @@
|
||||
:root {
|
||||
--bg: #06131d;
|
||||
--bg-soft: rgba(11, 26, 38, 0.88);
|
||||
--panel: rgba(9, 22, 34, 0.9);
|
||||
--panel-border: rgba(255, 255, 255, 0.08);
|
||||
--text: #edf6f3;
|
||||
--muted: #9bb1b6;
|
||||
--warm: #ffbd6d;
|
||||
--warm-strong: #ff8f37;
|
||||
--cool: #64dfd4;
|
||||
--cool-strong: #1bbcae;
|
||||
--white-seat: #ffd9b0;
|
||||
--dark-seat: #baf5ef;
|
||||
--danger: #ff7272;
|
||||
--success: #8fe388;
|
||||
--shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
|
||||
--bg: #01050b;
|
||||
--bg-soft: rgba(2, 12, 20, 0.92);
|
||||
--panel: rgba(4, 18, 30, 0.84);
|
||||
--panel-border: rgba(98, 242, 255, 0.22);
|
||||
--panel-border-soft: rgba(98, 242, 255, 0.1);
|
||||
--panel-glow: rgba(56, 213, 255, 0.18);
|
||||
--grid-line: rgba(92, 234, 255, 0.09);
|
||||
--text: #e4fbff;
|
||||
--muted: #7da9b6;
|
||||
--warm: #ffb45d;
|
||||
--warm-strong: #ff7a1f;
|
||||
--cool: #75f2ff;
|
||||
--cool-strong: #1ed6ff;
|
||||
--white-seat: #ffd08a;
|
||||
--dark-seat: #8ef6ff;
|
||||
--danger: #ff647f;
|
||||
--success: #9ff68e;
|
||||
--shadow:
|
||||
0 0 0 1px rgba(98, 242, 255, 0.08),
|
||||
0 26px 80px rgba(0, 0, 0, 0.56),
|
||||
0 0 34px rgba(30, 214, 255, 0.08);
|
||||
--radius: 28px;
|
||||
}
|
||||
|
||||
@@ -30,12 +36,13 @@ html {
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: "Avenir Next", "Segoe UI", sans-serif;
|
||||
font-family: "Segoe UI", "Trebuchet MS", sans-serif;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(255, 189, 109, 0.16), transparent 28%),
|
||||
radial-gradient(circle at bottom right, rgba(100, 223, 212, 0.18), transparent 26%),
|
||||
linear-gradient(165deg, #020a10 0%, #07141d 45%, #0a2433 100%);
|
||||
radial-gradient(circle at top left, rgba(255, 122, 31, 0.18), transparent 22%),
|
||||
radial-gradient(circle at 78% 18%, rgba(30, 214, 255, 0.18), transparent 20%),
|
||||
radial-gradient(circle at bottom center, rgba(30, 214, 255, 0.1), transparent 26%),
|
||||
linear-gradient(180deg, #01040a 0%, #03101b 48%, #041522 100%);
|
||||
}
|
||||
|
||||
body::before {
|
||||
@@ -44,10 +51,21 @@ body::before {
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
|
||||
linear-gradient(var(--grid-line) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
|
||||
background-size: 42px 42px;
|
||||
mask-image: linear-gradient(to bottom, black 0%, black 72%, transparent 100%);
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(circle at 50% 110%, rgba(30, 214, 255, 0.24), transparent 24%),
|
||||
linear-gradient(180deg, transparent 0 58%, rgba(30, 214, 255, 0.06) 72%, transparent 100%);
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
.ambient {
|
||||
@@ -55,8 +73,8 @@ body::before {
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
opacity: 0.22;
|
||||
filter: blur(90px);
|
||||
opacity: 0.28;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -73,7 +91,7 @@ body::before {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--warm);
|
||||
color: var(--cool);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -85,9 +103,11 @@ a:hover {
|
||||
.micro-label {
|
||||
margin: 0 0 0.45rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--cool);
|
||||
font-size: 0.76rem;
|
||||
font-size: 0.78rem;
|
||||
font-family: "Consolas", "Lucida Console", monospace;
|
||||
text-shadow: 0 0 14px rgba(30, 214, 255, 0.22);
|
||||
}
|
||||
|
||||
.micro-label {
|
||||
@@ -98,7 +118,7 @@ h1,
|
||||
h2,
|
||||
h3,
|
||||
strong {
|
||||
font-family: "Baskerville", "Georgia", serif;
|
||||
font-family: "Trebuchet MS", "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -122,13 +142,19 @@ p {
|
||||
|
||||
.button {
|
||||
appearance: none;
|
||||
border: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 18px;
|
||||
padding: 0.95rem 1.15rem;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
cursor: pointer;
|
||||
transition: transform 160ms ease, filter 160ms ease, background 160ms ease;
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
filter 160ms ease,
|
||||
background 160ms ease,
|
||||
box-shadow 160ms ease,
|
||||
border-color 160ms ease;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@@ -144,18 +170,25 @@ p {
|
||||
}
|
||||
|
||||
.button.primary {
|
||||
background: linear-gradient(135deg, var(--warm-strong), var(--warm));
|
||||
color: #20150a;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(30, 214, 255, 0.22), rgba(7, 32, 44, 0.96)),
|
||||
linear-gradient(135deg, var(--cool-strong), var(--cool));
|
||||
border-color: rgba(117, 242, 255, 0.5);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.06),
|
||||
0 0 24px rgba(30, 214, 255, 0.16);
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
background: linear-gradient(135deg, rgba(100, 223, 212, 0.18), rgba(100, 223, 212, 0.08));
|
||||
border: 1px solid rgba(100, 223, 212, 0.2);
|
||||
background: linear-gradient(135deg, rgba(255, 122, 31, 0.18), rgba(255, 180, 93, 0.08));
|
||||
border-color: rgba(255, 180, 93, 0.32);
|
||||
box-shadow: 0 0 18px rgba(255, 122, 31, 0.1);
|
||||
}
|
||||
|
||||
.button.ghost {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
background: linear-gradient(180deg, rgba(6, 20, 31, 0.92), rgba(3, 11, 18, 0.92));
|
||||
border-color: var(--panel-border-soft);
|
||||
box-shadow: inset 0 0 0 1px rgba(30, 214, 255, 0.04);
|
||||
}
|
||||
|
||||
.button.danger {
|
||||
@@ -176,13 +209,29 @@ p {
|
||||
|
||||
.hero,
|
||||
.panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: calc(var(--radius) + 4px);
|
||||
background: var(--panel);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(7, 24, 39, 0.92), rgba(3, 11, 18, 0.94)),
|
||||
var(--panel);
|
||||
backdrop-filter: blur(20px);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.hero::before,
|
||||
.panel::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto auto 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--cool), transparent);
|
||||
opacity: 0.55;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr);
|
||||
@@ -204,6 +253,10 @@ p {
|
||||
margin: 0;
|
||||
font-size: clamp(2.7rem, 6.5vw, 4.9rem);
|
||||
line-height: 0.95;
|
||||
letter-spacing: 0.03em;
|
||||
text-shadow:
|
||||
0 0 12px rgba(30, 214, 255, 0.18),
|
||||
0 0 28px rgba(30, 214, 255, 0.08);
|
||||
}
|
||||
|
||||
.hero-pills {
|
||||
@@ -221,8 +274,9 @@ p {
|
||||
justify-content: center;
|
||||
padding: 0.42rem 0.78rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--panel-border-soft);
|
||||
background: linear-gradient(180deg, rgba(7, 26, 40, 0.88), rgba(2, 13, 22, 0.92));
|
||||
box-shadow: inset 0 0 0 1px rgba(30, 214, 255, 0.03);
|
||||
}
|
||||
|
||||
.preview-card,
|
||||
@@ -235,9 +289,12 @@ p {
|
||||
.modal-card,
|
||||
.zone-inner {
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid var(--panel-border-soft);
|
||||
background:
|
||||
linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
|
||||
linear-gradient(160deg, rgba(10, 31, 47, 0.96), rgba(3, 13, 21, 0.96));
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(30, 214, 255, 0.03),
|
||||
0 0 22px rgba(30, 214, 255, 0.04);
|
||||
}
|
||||
|
||||
.preview-card,
|
||||
@@ -311,8 +368,10 @@ textarea {
|
||||
width: 100%;
|
||||
padding: 0.95rem 1rem;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid var(--panel-border-soft);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(3, 14, 23, 0.96), rgba(2, 10, 16, 0.96));
|
||||
box-shadow: inset 0 0 0 1px rgba(30, 214, 255, 0.03);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
}
|
||||
@@ -324,7 +383,7 @@ textarea {
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
outline: 2px solid rgba(100, 223, 212, 0.35);
|
||||
outline: 2px solid rgba(30, 214, 255, 0.45);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
@@ -348,15 +407,21 @@ textarea:focus {
|
||||
min-height: 8.7rem;
|
||||
padding: 1rem 1rem 1rem 3rem;
|
||||
border-radius: 22px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid var(--panel-border-soft);
|
||||
background:
|
||||
linear-gradient(160deg, rgba(7, 25, 39, 0.96), rgba(2, 10, 17, 0.96));
|
||||
cursor: pointer;
|
||||
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
border-color 160ms ease,
|
||||
background 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.option-card:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(255, 189, 109, 0.3);
|
||||
border-color: rgba(30, 214, 255, 0.34);
|
||||
box-shadow: 0 0 20px rgba(30, 214, 255, 0.08);
|
||||
}
|
||||
|
||||
.option-card input {
|
||||
@@ -368,9 +433,12 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.option-card:has(input:checked) {
|
||||
border-color: rgba(255, 189, 109, 0.55);
|
||||
border-color: rgba(30, 214, 255, 0.52);
|
||||
background:
|
||||
linear-gradient(160deg, rgba(255, 189, 109, 0.17), rgba(100, 223, 212, 0.08));
|
||||
linear-gradient(160deg, rgba(30, 214, 255, 0.16), rgba(255, 122, 31, 0.08));
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(30, 214, 255, 0.06),
|
||||
0 0 24px rgba(30, 214, 255, 0.08);
|
||||
}
|
||||
|
||||
.setup-summary {
|
||||
@@ -438,9 +506,10 @@ textarea:focus {
|
||||
justify-self: start;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--panel-border-soft);
|
||||
background: linear-gradient(180deg, rgba(8, 28, 43, 0.92), rgba(3, 11, 18, 0.92));
|
||||
color: var(--text);
|
||||
box-shadow: inset 0 0 0 1px rgba(30, 214, 255, 0.03);
|
||||
}
|
||||
|
||||
.brand-link:hover {
|
||||
@@ -454,6 +523,9 @@ textarea:focus {
|
||||
.phase-title h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(1.9rem, 4vw, 3rem);
|
||||
text-shadow:
|
||||
0 0 12px rgba(30, 214, 255, 0.16),
|
||||
0 0 24px rgba(30, 214, 255, 0.06);
|
||||
}
|
||||
|
||||
.phase-subtitle {
|
||||
@@ -489,7 +561,8 @@ textarea:focus {
|
||||
|
||||
.status-card.wide {
|
||||
background:
|
||||
linear-gradient(160deg, rgba(255, 189, 109, 0.14), rgba(100, 223, 212, 0.08));
|
||||
linear-gradient(160deg, rgba(30, 214, 255, 0.14), rgba(255, 122, 31, 0.09));
|
||||
border-color: rgba(30, 214, 255, 0.22);
|
||||
}
|
||||
|
||||
.faceoff-board {
|
||||
@@ -542,13 +615,15 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.light-seat {
|
||||
background: rgba(255, 189, 109, 0.14);
|
||||
background: rgba(255, 180, 93, 0.12);
|
||||
color: var(--white-seat);
|
||||
box-shadow: 0 0 16px rgba(255, 122, 31, 0.12);
|
||||
}
|
||||
|
||||
.dark-seat {
|
||||
background: rgba(100, 223, 212, 0.14);
|
||||
background: rgba(117, 242, 255, 0.12);
|
||||
color: var(--dark-seat);
|
||||
box-shadow: 0 0 16px rgba(30, 214, 255, 0.12);
|
||||
}
|
||||
|
||||
.zone-button {
|
||||
@@ -556,7 +631,7 @@ textarea:focus {
|
||||
min-height: clamp(220px, 44vh, 560px);
|
||||
padding: 1rem;
|
||||
border-radius: 28px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
border: 1px solid currentColor;
|
||||
font: inherit;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.01em;
|
||||
@@ -564,8 +639,13 @@ textarea:focus {
|
||||
font-size: clamp(2.1rem, 5vw, 4.5rem);
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
|
||||
transition:
|
||||
transform 150ms ease,
|
||||
filter 150ms ease,
|
||||
opacity 150ms ease,
|
||||
box-shadow 150ms ease;
|
||||
touch-action: manipulation;
|
||||
text-shadow: 0 0 18px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.zone-button:hover {
|
||||
@@ -581,20 +661,28 @@ textarea:focus {
|
||||
|
||||
.light-button {
|
||||
background:
|
||||
linear-gradient(165deg, rgba(255, 143, 55, 0.24), rgba(255, 189, 109, 0.1));
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 189, 109, 0.08);
|
||||
linear-gradient(165deg, rgba(255, 122, 31, 0.24), rgba(255, 180, 93, 0.08)),
|
||||
linear-gradient(180deg, rgba(11, 19, 24, 0.96), rgba(5, 10, 14, 0.98));
|
||||
color: var(--white-seat);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 180, 93, 0.08),
|
||||
0 0 28px rgba(255, 122, 31, 0.08);
|
||||
}
|
||||
|
||||
.dark-button {
|
||||
background:
|
||||
linear-gradient(165deg, rgba(27, 188, 174, 0.22), rgba(100, 223, 212, 0.09));
|
||||
box-shadow: inset 0 0 0 1px rgba(100, 223, 212, 0.08);
|
||||
linear-gradient(165deg, rgba(30, 214, 255, 0.2), rgba(117, 242, 255, 0.08)),
|
||||
linear-gradient(180deg, rgba(11, 19, 24, 0.96), rgba(5, 10, 14, 0.98));
|
||||
color: var(--dark-seat);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(117, 242, 255, 0.08),
|
||||
0 0 28px rgba(30, 214, 255, 0.08);
|
||||
}
|
||||
|
||||
.zone-button.active-turn {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, 0.08),
|
||||
0 0 40px rgba(255, 189, 109, 0.18);
|
||||
0 0 40px rgba(30, 214, 255, 0.18);
|
||||
animation: pulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -654,7 +742,8 @@ textarea:focus {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(760px, 100%);
|
||||
background: rgba(10, 23, 35, 0.96);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(8, 25, 39, 0.98), rgba(2, 9, 16, 0.98));
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
@@ -682,13 +771,13 @@ textarea:focus {
|
||||
100% {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, 0.08),
|
||||
0 0 28px rgba(255, 189, 109, 0.12);
|
||||
0 0 28px rgba(30, 214, 255, 0.16);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1),
|
||||
0 0 38px rgba(255, 189, 109, 0.2);
|
||||
0 0 38px rgba(30, 214, 255, 0.24);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user