christophe/chesscubing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adoucit la charte et réduit les grandes typos

Browse Source
This commit is contained in:
Christophe JEANNEROT
2026-04-12 13:22:57 +02:00
parent f95dc80e09
commit e7e65d0b3f
1 changed files with 92 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

265
styles.css
View File

@@ -1,25 +1,21 @@
:root { :root {
--bg: #040404; --bg: #000000;
--bg-soft: rgba(9, 10, 13, 0.94); --bg-soft: #090909;
--panel: rgba(10, 12, 18, 0.88); --panel: #111111;
--panel-border: rgba(50, 123, 255, 0.28); --panel-alt: #171717;
--panel-border-soft: rgba(255, 255, 255, 0.08); --panel-border: rgba(255, 255, 255, 0.1);
--panel-glow: rgba(43, 113, 255, 0.2); --panel-border-strong: rgba(255, 255, 255, 0.16);
--grid-line: rgba(40, 74, 153, 0.1); --text: #f5f7fb;
--text: #f3f7ff; --muted: #a7adbb;
--muted: #abb4c8; --warm: #ff9d1e;
--warm: #ffb253; --warm-strong: #ff7f00;
--warm-strong: #ff7a00; --cool: #348dff;
--cool: #74aeff; --cool-strong: #1167ff;
--cool-strong: #1762ff; --white-seat: #ffb13a;
--white-seat: #ffc375; --dark-seat: #4c97ff;
--dark-seat: #7db0ff;
--danger: #ff647f; --danger: #ff647f;
--success: #ffb253; --success: #ffb13a;
--shadow: --shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
0 0 0 1px rgba(50, 123, 255, 0.08),
0 26px 80px rgba(0, 0, 0, 0.56),
0 0 34px rgba(23, 98, 255, 0.1);
--radius: 28px; --radius: 28px;
} }
@@ -86,11 +82,10 @@ a:hover {
.micro-label { .micro-label {
margin: 0 0 0.45rem; margin: 0 0 0.45rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.22em; letter-spacing: 0.18em;
color: var(--cool); color: var(--cool);
font-size: 0.78rem; font-size: 0.78rem;
font-family: "Consolas", "Lucida Console", monospace; font-family: "Consolas", "Lucida Console", monospace;
text-shadow: 0 0 14px rgba(23, 98, 255, 0.22);
} }
.micro-label { .micro-label {
@@ -157,25 +152,21 @@ p {
} }
.button.primary { .button.primary {
background: background: var(--cool-strong);
linear-gradient(135deg, rgba(23, 98, 255, 0.24), rgba(8, 14, 28, 0.96)), border-color: rgba(52, 141, 255, 0.55);
linear-gradient(135deg, var(--cool-strong), var(--cool)); box-shadow: none;
border-color: rgba(116, 174, 255, 0.48);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.06),
0 0 24px rgba(23, 98, 255, 0.18);
} }
.button.secondary { .button.secondary {
background: linear-gradient(135deg, rgba(255, 122, 0, 0.22), rgba(255, 178, 83, 0.08)); background: var(--warm-strong);
border-color: rgba(255, 178, 83, 0.34); border-color: rgba(255, 157, 30, 0.4);
box-shadow: 0 0 18px rgba(255, 122, 0, 0.12); box-shadow: none;
} }
.button.ghost { .button.ghost {
background: linear-gradient(180deg, rgba(6, 20, 31, 0.92), rgba(3, 11, 18, 0.92)); background: #131313;
border-color: var(--panel-border-soft); border-color: var(--panel-border);
box-shadow: inset 0 0 0 1px rgba(23, 98, 255, 0.05); box-shadow: none;
} }
.button.danger { .button.danger {
@@ -200,23 +191,13 @@ p {
overflow: hidden; overflow: hidden;
border: 1px solid var(--panel-border); border: 1px solid var(--panel-border);
border-radius: calc(var(--radius) + 4px); border-radius: calc(var(--radius) + 4px);
background: background: var(--panel);
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); box-shadow: var(--shadow);
} }
.hero::before, .hero::before,
.panel::before { .panel::before {
content: ""; display: none;
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 { .hero {
@@ -255,28 +236,19 @@ p {
display: block; display: block;
width: clamp(72px, 9vw, 112px); width: clamp(72px, 9vw, 112px);
height: auto; height: auto;
filter:
drop-shadow(0 0 10px rgba(255, 122, 0, 0.1))
drop-shadow(0 0 14px rgba(23, 98, 255, 0.14));
} }
.hero-logo { .hero-logo {
display: block; display: block;
width: clamp(300px, 42vw, 620px); width: clamp(300px, 42vw, 620px);
height: auto; height: auto;
filter:
drop-shadow(0 0 12px rgba(255, 122, 0, 0.08))
drop-shadow(0 0 16px rgba(23, 98, 255, 0.14));
} }
.hero-setup h1 { .hero-setup h1 {
margin: 0; margin: 0;
font-size: clamp(2.7rem, 6.5vw, 4.9rem); font-size: clamp(2.3rem, 5.2vw, 4rem);
line-height: 0.95; line-height: 0.98;
letter-spacing: 0.03em; letter-spacing: 0.03em;
text-shadow:
0 0 12px rgba(23, 98, 255, 0.18),
0 0 28px rgba(255, 122, 0, 0.08);
} }
.hero-pills { .hero-pills {
@@ -294,9 +266,9 @@ p {
justify-content: center; justify-content: center;
padding: 0.42rem 0.78rem; padding: 0.42rem 0.78rem;
border-radius: 999px; border-radius: 999px;
border: 1px solid var(--panel-border-soft); border: 1px solid var(--panel-border);
background: linear-gradient(180deg, rgba(7, 26, 40, 0.88), rgba(2, 13, 22, 0.92)); background: var(--panel-alt);
box-shadow: inset 0 0 0 1px rgba(23, 98, 255, 0.05); box-shadow: none;
} }
.preview-card, .preview-card,
@@ -309,12 +281,9 @@ p {
.modal-card, .modal-card,
.zone-inner { .zone-inner {
border-radius: 24px; border-radius: 24px;
border: 1px solid var(--panel-border-soft); border: 1px solid var(--panel-border);
background: background: var(--panel-alt);
linear-gradient(160deg, rgba(14, 20, 34, 0.96), rgba(5, 9, 16, 0.96)); box-shadow: none;
box-shadow:
inset 0 0 0 1px rgba(23, 98, 255, 0.05),
0 0 22px rgba(23, 98, 255, 0.08);
} }
.preview-card, .preview-card,
@@ -332,6 +301,8 @@ p {
margin: 0.8rem 0 0; margin: 0.8rem 0 0;
padding-left: 1.1rem; padding-left: 1.1rem;
color: var(--muted); color: var(--muted);
font-size: 1rem;
line-height: 1.5;
} }
.phase-list li + li { .phase-list li + li {
@@ -394,10 +365,9 @@ textarea {
width: 100%; width: 100%;
padding: 0.95rem 1rem; padding: 0.95rem 1rem;
border-radius: 18px; border-radius: 18px;
border: 1px solid var(--panel-border-soft); border: 1px solid var(--panel-border);
background: background: #0c0c0c;
linear-gradient(180deg, rgba(3, 14, 23, 0.96), rgba(2, 10, 16, 0.96)); box-shadow: none;
box-shadow: inset 0 0 0 1px rgba(23, 98, 255, 0.05);
color: var(--text); color: var(--text);
font: inherit; font: inherit;
} }
@@ -409,7 +379,7 @@ textarea {
input:focus, input:focus,
textarea:focus { textarea:focus {
outline: 2px solid rgba(23, 98, 255, 0.45); outline: 2px solid rgba(52, 141, 255, 0.45);
outline-offset: 1px; outline-offset: 1px;
} }
@@ -433,9 +403,8 @@ textarea:focus {
min-height: 8.7rem; min-height: 8.7rem;
padding: 1rem 1rem 1rem 3rem; padding: 1rem 1rem 1rem 3rem;
border-radius: 22px; border-radius: 22px;
border: 1px solid var(--panel-border-soft); border: 1px solid var(--panel-border);
background: background: #121212;
linear-gradient(160deg, rgba(7, 25, 39, 0.96), rgba(2, 10, 17, 0.96));
cursor: pointer; cursor: pointer;
transition: transition:
transform 160ms ease, transform 160ms ease,
@@ -446,8 +415,8 @@ textarea:focus {
.option-card:hover { .option-card:hover {
transform: translateY(-3px); transform: translateY(-3px);
border-color: rgba(23, 98, 255, 0.34); border-color: rgba(52, 141, 255, 0.34);
box-shadow: 0 0 20px rgba(23, 98, 255, 0.1); box-shadow: none;
} }
.option-card input { .option-card input {
@@ -459,12 +428,9 @@ textarea:focus {
} }
.option-card:has(input:checked) { .option-card:has(input:checked) {
border-color: rgba(23, 98, 255, 0.52); border-color: rgba(52, 141, 255, 0.52);
background: background: rgba(17, 103, 255, 0.14);
linear-gradient(160deg, rgba(23, 98, 255, 0.18), rgba(255, 122, 0, 0.1)); box-shadow: none;
box-shadow:
inset 0 0 0 1px rgba(23, 98, 255, 0.06),
0 0 24px rgba(23, 98, 255, 0.1);
} }
.setup-summary { .setup-summary {
@@ -535,10 +501,10 @@ textarea:focus {
justify-self: start; justify-self: start;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: 18px; border-radius: 18px;
border: 1px solid var(--panel-border-soft); border: 1px solid var(--panel-border);
background: linear-gradient(180deg, rgba(12, 18, 32, 0.96), rgba(5, 8, 14, 0.96)); background: transparent;
color: var(--text); color: var(--text);
box-shadow: inset 0 0 0 1px rgba(23, 98, 255, 0.04); box-shadow: none;
} }
.brand-link:hover { .brand-link:hover {
@@ -559,18 +525,12 @@ textarea:focus {
display: block; display: block;
width: 2.7rem; width: 2.7rem;
height: auto; height: auto;
filter:
drop-shadow(0 0 8px rgba(255, 122, 0, 0.1))
drop-shadow(0 0 10px rgba(23, 98, 255, 0.14));
} }
.brand-link-mark { .brand-link-mark {
display: block; display: block;
width: 10.4rem; width: 10.4rem;
height: auto; height: auto;
filter:
drop-shadow(0 0 8px rgba(255, 122, 0, 0.08))
drop-shadow(0 0 12px rgba(23, 98, 255, 0.14));
} }
.phase-title { .phase-title {
@@ -580,9 +540,6 @@ textarea:focus {
.phase-title h1 { .phase-title h1 {
margin: 0; margin: 0;
font-size: clamp(1.9rem, 4vw, 3rem); font-size: clamp(1.9rem, 4vw, 3rem);
text-shadow:
0 0 12px rgba(23, 98, 255, 0.18),
0 0 24px rgba(255, 122, 0, 0.08);
} }
.phase-subtitle { .phase-subtitle {
@@ -617,9 +574,8 @@ textarea:focus {
} }
.status-card.wide { .status-card.wide {
background: background: #151515;
linear-gradient(160deg, rgba(23, 98, 255, 0.16), rgba(255, 122, 0, 0.1)); border-color: var(--panel-border-strong);
border-color: rgba(23, 98, 255, 0.24);
} }
.faceoff-board { .faceoff-board {
@@ -674,13 +630,13 @@ textarea:focus {
.light-seat { .light-seat {
background: rgba(255, 122, 0, 0.14); background: rgba(255, 122, 0, 0.14);
color: var(--white-seat); color: var(--white-seat);
box-shadow: 0 0 16px rgba(255, 122, 0, 0.14); box-shadow: none;
} }
.dark-seat { .dark-seat {
background: rgba(23, 98, 255, 0.14); background: rgba(23, 98, 255, 0.14);
color: var(--dark-seat); color: var(--dark-seat);
box-shadow: 0 0 16px rgba(23, 98, 255, 0.14); box-shadow: none;
} }
.zone-button { .zone-button {
@@ -717,30 +673,20 @@ textarea:focus {
} }
.light-button { .light-button {
background: background: rgba(255, 127, 0, 0.12);
linear-gradient(165deg, rgba(255, 122, 0, 0.28), rgba(255, 178, 83, 0.08)),
linear-gradient(180deg, rgba(11, 19, 24, 0.96), rgba(5, 10, 14, 0.98));
color: var(--white-seat); color: var(--white-seat);
box-shadow: box-shadow: none;
inset 0 0 0 1px rgba(255, 178, 83, 0.1),
0 0 28px rgba(255, 122, 0, 0.1);
} }
.dark-button { .dark-button {
background: background: rgba(17, 103, 255, 0.12);
linear-gradient(165deg, rgba(23, 98, 255, 0.24), rgba(116, 174, 255, 0.08)),
linear-gradient(180deg, rgba(11, 19, 24, 0.96), rgba(5, 10, 14, 0.98));
color: var(--dark-seat); color: var(--dark-seat);
box-shadow: box-shadow: none;
inset 0 0 0 1px rgba(116, 174, 255, 0.1),
0 0 28px rgba(23, 98, 255, 0.1);
} }
.zone-button.active-turn { .zone-button.active-turn {
box-shadow: box-shadow: inset 0 0 0 2px currentColor;
0 0 0 1px rgba(255, 255, 255, 0.08), animation: none;
0 0 40px rgba(23, 98, 255, 0.2);
animation: pulse 1.6s ease-in-out infinite;
} }
.active-zone .zone-inner { .active-zone .zone-inner {
@@ -791,7 +737,7 @@ textarea:focus {
.modal-backdrop { .modal-backdrop {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgba(2, 8, 14, 0.72); background: rgba(0, 0, 0, 0.82);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
} }
@@ -799,8 +745,7 @@ textarea:focus {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: min(760px, 100%); width: min(760px, 100%);
background: background: #111111;
linear-gradient(180deg, rgba(14, 18, 30, 0.98), rgba(4, 7, 14, 0.98));
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
@@ -832,20 +777,19 @@ textarea:focus {
.hero-rules h1 { .hero-rules h1 {
margin: 0; margin: 0;
font-size: clamp(2.8rem, 6vw, 4.7rem); font-size: clamp(2.25rem, 4.8vw, 3.8rem);
line-height: 0.94; line-height: 0.98;
text-shadow:
0 0 12px rgba(23, 98, 255, 0.18),
0 0 30px rgba(255, 122, 0, 0.08);
} }
.hero-home h1 { .hero-home h1 {
margin: 0; margin: 0;
font-size: clamp(2.9rem, 6.4vw, 5.2rem); font-size: clamp(2.15rem, 4.8vw, 3.9rem);
line-height: 0.93; line-height: 0.98;
text-shadow: }
0 0 12px rgba(23, 98, 255, 0.18),
0 0 32px rgba(255, 122, 0, 0.1); .lead {
font-size: clamp(1rem, 1.9vw, 1.18rem);
line-height: 1.5;
} }
.hero-actions { .hero-actions {
@@ -868,12 +812,9 @@ textarea:focus {
.source-card { .source-card {
position: relative; position: relative;
border-radius: 24px; border-radius: 24px;
border: 1px solid var(--panel-border-soft); border: 1px solid var(--panel-border);
background: background: var(--panel-alt);
linear-gradient(160deg, rgba(14, 20, 34, 0.96), rgba(5, 9, 16, 0.96)); box-shadow: none;
box-shadow:
inset 0 0 0 1px rgba(23, 98, 255, 0.05),
0 0 22px rgba(23, 98, 255, 0.08);
} }
.metric-chip, .metric-chip,
@@ -950,14 +891,7 @@ textarea:focus {
} }
.format-card::before { .format-card::before {
content: ""; display: none;
position: absolute;
top: 0;
left: 1rem;
right: 1rem;
height: 1px;
background: linear-gradient(90deg, transparent, var(--cool), transparent);
opacity: 0.7;
} }
.mini-panel { .mini-panel {
@@ -966,12 +900,9 @@ textarea:focus {
gap: 0.45rem; gap: 0.45rem;
padding: 1rem; padding: 1rem;
border-radius: 22px; border-radius: 22px;
border: 1px solid var(--panel-border-soft); border: 1px solid var(--panel-border);
background: background: var(--panel-alt);
linear-gradient(160deg, rgba(14, 20, 34, 0.96), rgba(5, 9, 16, 0.96)); box-shadow: none;
box-shadow:
inset 0 0 0 1px rgba(23, 98, 255, 0.05),
0 0 22px rgba(23, 98, 255, 0.08);
} }
.mini-panel p { .mini-panel p {
@@ -1023,8 +954,8 @@ textarea:focus {
align-items: center; align-items: center;
padding: 0.48rem 0.78rem; padding: 0.48rem 0.78rem;
border-radius: 999px; border-radius: 999px;
border: 1px solid var(--panel-border-soft); border: 1px solid var(--panel-border);
background: linear-gradient(180deg, rgba(7, 26, 40, 0.88), rgba(2, 13, 22, 0.92)); background: #151515;
color: var(--text); color: var(--text);
} }
@@ -1052,10 +983,8 @@ textarea:focus {
gap: 0.45rem; gap: 0.45rem;
padding: 1rem; padding: 1rem;
border-radius: 22px; border-radius: 22px;
border: 1px solid rgba(23, 98, 255, 0.18); border: 1px solid var(--panel-border);
background: background: #151515;
linear-gradient(145deg, rgba(23, 98, 255, 0.12), rgba(255, 122, 0, 0.08)),
linear-gradient(180deg, rgba(3, 14, 23, 0.96), rgba(2, 10, 16, 0.96));
} }
.callout p { .callout p {
@@ -1102,23 +1031,8 @@ textarea:focus {
.source-card:hover { .source-card:hover {
transform: translateY(-3px); transform: translateY(-3px);
text-decoration: none; text-decoration: none;
border-color: rgba(23, 98, 255, 0.34); border-color: var(--panel-border-strong);
box-shadow: 0 0 22px rgba(23, 98, 255, 0.1); box-shadow: none;
}
@keyframes pulse {
0%,
100% {
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08),
0 0 28px rgba(23, 98, 255, 0.18);
}
50% {
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.1),
0 0 38px rgba(23, 98, 255, 0.26);
}
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {
@@ -1290,7 +1204,12 @@ textarea:focus {
@media (max-width: 640px) { @media (max-width: 640px) {
.hero-setup h1 { .hero-setup h1 {
font-size: 2.7rem; font-size: 2.1rem;
}
.hero-home h1,
.hero-rules h1 {
font-size: 2rem;
} }
.status-card { .status-card {