diff --git a/application.html b/application.html index 1d5fd93..544f12f 100644 --- a/application.html +++ b/application.html @@ -8,6 +8,7 @@ content="Application officielle de match pour ChessCubing Arena sur téléphone et tablette." /> ChessCubing Arena | Application + @@ -17,6 +18,9 @@
+ + +

Application officielle de match

ChessCubing Arena

diff --git a/chrono.html b/chrono.html index 07add23..5167df7 100644 --- a/chrono.html +++ b/chrono.html @@ -8,12 +8,15 @@ content="Phase chrono de ChessCubing Arena avec gros boutons face-à-face." /> ChessCubing Arena | Phase Chrono +

- Application +

Phase chrono

Block 1

diff --git a/cube.html b/cube.html index 4a86b53..a784d16 100644 --- a/cube.html +++ b/cube.html @@ -8,12 +8,15 @@ content="Phase cube de ChessCubing Arena avec gros boutons de fin." /> ChessCubing Arena | Phase Cube +
- Application +

Phase cube

Cube n°1

diff --git a/index.html b/index.html index d377eac..421a934 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ content="Découvrez ChessCubing, l'association et le jeu qui réunit échecs et Rubik's Cube dans un format simple, vivant et spectaculaire." /> ChessCubing Arena | Accueil + @@ -17,6 +18,9 @@
+ + +

Association ChessCubing

Les échecs rencontrent le Rubik's Cube

diff --git a/logo.jpeg b/logo.jpeg new file mode 100644 index 0000000..5371e5e Binary files /dev/null and b/logo.jpeg differ diff --git a/reglement.html b/reglement.html index 7c396d1..5c558f9 100644 --- a/reglement.html +++ b/reglement.html @@ -8,6 +8,7 @@ content="Page règlement officielle du site ChessCubing Arena avec synthèse des formats Twice et Time." /> ChessCubing Arena | Règlement officiel + @@ -17,6 +18,9 @@

+ + +

Référentiel officiel

Règlement ChessCubing

diff --git a/styles.css b/styles.css index f94ba84..d0495aa 100644 --- a/styles.css +++ b/styles.css @@ -1,25 +1,25 @@ :root { - --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: #7df7bd; - --warm-strong: #18d97f; - --cool: #75f2ff; - --cool-strong: #1ed6ff; - --white-seat: #b6ffd8; - --dark-seat: #8ef6ff; + --bg: #040404; + --bg-soft: rgba(9, 10, 13, 0.94); + --panel: rgba(10, 12, 18, 0.88); + --panel-border: rgba(50, 123, 255, 0.28); + --panel-border-soft: rgba(255, 255, 255, 0.08); + --panel-glow: rgba(43, 113, 255, 0.2); + --grid-line: rgba(40, 74, 153, 0.1); + --text: #f3f7ff; + --muted: #abb4c8; + --warm: #ffb253; + --warm-strong: #ff7a00; + --cool: #74aeff; + --cool-strong: #1762ff; + --white-seat: #ffc375; + --dark-seat: #7db0ff; --danger: #ff647f; - --success: #7df7bd; + --success: #ffb253; --shadow: - 0 0 0 1px rgba(98, 242, 255, 0.08), + 0 0 0 1px rgba(50, 123, 255, 0.08), 0 26px 80px rgba(0, 0, 0, 0.56), - 0 0 34px rgba(30, 214, 255, 0.08); + 0 0 34px rgba(23, 98, 255, 0.1); --radius: 28px; } @@ -39,10 +39,10 @@ body { font-family: "Segoe UI", "Trebuchet MS", sans-serif; color: var(--text); background: - radial-gradient(circle at top left, rgba(24, 217, 127, 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(24, 217, 127, 0.1), transparent 26%), - linear-gradient(180deg, #01040a 0%, #03101b 48%, #041522 100%); + radial-gradient(circle at 16% 18%, rgba(255, 122, 0, 0.28), transparent 22%), + radial-gradient(circle at 78% 18%, rgba(23, 98, 255, 0.24), transparent 22%), + radial-gradient(circle at bottom center, rgba(255, 122, 0, 0.1), transparent 26%), + linear-gradient(180deg, #020202 0%, #090b12 48%, #0c1018 100%); } body::before { @@ -63,8 +63,8 @@ body::after { inset: 0; pointer-events: none; background: - radial-gradient(circle at 50% 110%, rgba(24, 217, 127, 0.18), transparent 24%), - linear-gradient(180deg, transparent 0 58%, rgba(30, 214, 255, 0.06) 72%, transparent 100%); + radial-gradient(circle at 50% 110%, rgba(255, 122, 0, 0.16), transparent 24%), + linear-gradient(180deg, transparent 0 58%, rgba(23, 98, 255, 0.07) 72%, transparent 100%); mix-blend-mode: screen; } @@ -107,7 +107,7 @@ a:hover { color: var(--cool); font-size: 0.78rem; font-family: "Consolas", "Lucida Console", monospace; - text-shadow: 0 0 14px rgba(30, 214, 255, 0.22); + text-shadow: 0 0 14px rgba(23, 98, 255, 0.22); } .micro-label { @@ -175,24 +175,24 @@ p { .button.primary { background: - linear-gradient(135deg, rgba(30, 214, 255, 0.22), rgba(7, 32, 44, 0.96)), + linear-gradient(135deg, rgba(23, 98, 255, 0.24), rgba(8, 14, 28, 0.96)), linear-gradient(135deg, var(--cool-strong), var(--cool)); - border-color: rgba(117, 242, 255, 0.5); + 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(30, 214, 255, 0.16); + 0 0 24px rgba(23, 98, 255, 0.18); } .button.secondary { - background: linear-gradient(135deg, rgba(24, 217, 127, 0.18), rgba(125, 247, 189, 0.08)); - border-color: rgba(125, 247, 189, 0.32); - box-shadow: 0 0 18px rgba(24, 217, 127, 0.1); + background: linear-gradient(135deg, rgba(255, 122, 0, 0.22), rgba(255, 178, 83, 0.08)); + border-color: rgba(255, 178, 83, 0.34); + box-shadow: 0 0 18px rgba(255, 122, 0, 0.12); } .button.ghost { 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); + box-shadow: inset 0 0 0 1px rgba(23, 98, 255, 0.05); } .button.danger { @@ -253,14 +253,39 @@ p { gap: 1rem; } +.logo-lockup { + display: inline-flex; + margin-bottom: 1rem; + padding: 0.55rem 0.8rem; + border-radius: 24px; + border: 1px solid rgba(255, 255, 255, 0.06); + background: rgba(0, 0, 0, 0.72); + box-shadow: + inset 0 0 0 1px rgba(255, 255, 255, 0.02), + 0 0 22px rgba(23, 98, 255, 0.08); +} + +.logo-lockup:hover { + text-decoration: none; +} + +.hero-logo { + display: block; + width: clamp(220px, 29vw, 360px); + 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 { 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); + 0 0 12px rgba(23, 98, 255, 0.18), + 0 0 28px rgba(255, 122, 0, 0.08); } .hero-pills { @@ -280,7 +305,7 @@ p { border-radius: 999px; 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); + box-shadow: inset 0 0 0 1px rgba(23, 98, 255, 0.05); } .preview-card, @@ -295,10 +320,10 @@ p { border-radius: 24px; border: 1px solid var(--panel-border-soft); background: - linear-gradient(160deg, rgba(10, 31, 47, 0.96), rgba(3, 13, 21, 0.96)); + linear-gradient(160deg, rgba(14, 20, 34, 0.96), rgba(5, 9, 16, 0.96)); box-shadow: - inset 0 0 0 1px rgba(30, 214, 255, 0.03), - 0 0 22px rgba(30, 214, 255, 0.04); + inset 0 0 0 1px rgba(23, 98, 255, 0.05), + 0 0 22px rgba(23, 98, 255, 0.08); } .preview-card, @@ -381,7 +406,7 @@ textarea { 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); + box-shadow: inset 0 0 0 1px rgba(23, 98, 255, 0.05); color: var(--text); font: inherit; } @@ -393,7 +418,7 @@ textarea { input:focus, textarea:focus { - outline: 2px solid rgba(30, 214, 255, 0.45); + outline: 2px solid rgba(23, 98, 255, 0.45); outline-offset: 1px; } @@ -430,8 +455,8 @@ textarea:focus { .option-card:hover { transform: translateY(-3px); - border-color: rgba(30, 214, 255, 0.34); - box-shadow: 0 0 20px rgba(30, 214, 255, 0.08); + border-color: rgba(23, 98, 255, 0.34); + box-shadow: 0 0 20px rgba(23, 98, 255, 0.1); } .option-card input { @@ -443,12 +468,12 @@ textarea:focus { } .option-card:has(input:checked) { - border-color: rgba(30, 214, 255, 0.52); + border-color: rgba(23, 98, 255, 0.52); background: - linear-gradient(160deg, rgba(30, 214, 255, 0.16), rgba(24, 217, 127, 0.09)); + linear-gradient(160deg, rgba(23, 98, 255, 0.18), rgba(255, 122, 0, 0.1)); box-shadow: - inset 0 0 0 1px rgba(30, 214, 255, 0.06), - 0 0 24px rgba(30, 214, 255, 0.08); + inset 0 0 0 1px rgba(23, 98, 255, 0.06), + 0 0 24px rgba(23, 98, 255, 0.1); } .setup-summary { @@ -513,19 +538,37 @@ textarea:focus { } .brand-link { + display: inline-flex; + align-items: center; + gap: 0.7rem; justify-self: start; padding: 0.75rem 1rem; border-radius: 18px; border: 1px solid var(--panel-border-soft); - background: linear-gradient(180deg, rgba(8, 28, 43, 0.92), rgba(3, 11, 18, 0.92)); + background: linear-gradient(180deg, rgba(12, 18, 32, 0.96), rgba(5, 8, 14, 0.96)); color: var(--text); - box-shadow: inset 0 0 0 1px rgba(30, 214, 255, 0.03); + box-shadow: inset 0 0 0 1px rgba(23, 98, 255, 0.04); } .brand-link:hover { text-decoration: none; } +.brand-link-logo { + padding: 0.5rem 0.7rem; + border-color: rgba(255, 255, 255, 0.08); + background: rgba(0, 0, 0, 0.78); +} + +.brand-link-mark { + display: block; + width: 7.6rem; + 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 { text-align: center; } @@ -534,8 +577,8 @@ textarea:focus { 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); + 0 0 12px rgba(23, 98, 255, 0.18), + 0 0 24px rgba(255, 122, 0, 0.08); } .phase-subtitle { @@ -571,8 +614,8 @@ textarea:focus { .status-card.wide { background: - linear-gradient(160deg, rgba(30, 214, 255, 0.14), rgba(24, 217, 127, 0.09)); - border-color: rgba(30, 214, 255, 0.22); + linear-gradient(160deg, rgba(23, 98, 255, 0.16), rgba(255, 122, 0, 0.1)); + border-color: rgba(23, 98, 255, 0.24); } .faceoff-board { @@ -625,15 +668,15 @@ textarea:focus { } .light-seat { - background: rgba(125, 247, 189, 0.12); + background: rgba(255, 122, 0, 0.14); color: var(--white-seat); - box-shadow: 0 0 16px rgba(24, 217, 127, 0.12); + box-shadow: 0 0 16px rgba(255, 122, 0, 0.14); } .dark-seat { - background: rgba(117, 242, 255, 0.12); + background: rgba(23, 98, 255, 0.14); color: var(--dark-seat); - box-shadow: 0 0 16px rgba(30, 214, 255, 0.12); + box-shadow: 0 0 16px rgba(23, 98, 255, 0.14); } .zone-button { @@ -671,28 +714,28 @@ textarea:focus { .light-button { background: - linear-gradient(165deg, rgba(24, 217, 127, 0.24), rgba(125, 247, 189, 0.08)), + 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); box-shadow: - inset 0 0 0 1px rgba(125, 247, 189, 0.08), - 0 0 28px rgba(24, 217, 127, 0.08); + inset 0 0 0 1px rgba(255, 178, 83, 0.1), + 0 0 28px rgba(255, 122, 0, 0.1); } .dark-button { background: - linear-gradient(165deg, rgba(30, 214, 255, 0.2), rgba(117, 242, 255, 0.08)), + 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); box-shadow: - inset 0 0 0 1px rgba(117, 242, 255, 0.08), - 0 0 28px rgba(30, 214, 255, 0.08); + inset 0 0 0 1px rgba(116, 174, 255, 0.1), + 0 0 28px rgba(23, 98, 255, 0.1); } .zone-button.active-turn { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), - 0 0 40px rgba(30, 214, 255, 0.18); + 0 0 40px rgba(23, 98, 255, 0.2); animation: pulse 1.6s ease-in-out infinite; } @@ -753,7 +796,7 @@ textarea:focus { z-index: 1; width: min(760px, 100%); background: - linear-gradient(180deg, rgba(8, 25, 39, 0.98), rgba(2, 9, 16, 0.98)); + linear-gradient(180deg, rgba(14, 18, 30, 0.98), rgba(4, 7, 14, 0.98)); box-shadow: var(--shadow); } @@ -788,8 +831,8 @@ textarea:focus { font-size: clamp(2.8rem, 6vw, 4.7rem); line-height: 0.94; text-shadow: - 0 0 12px rgba(30, 214, 255, 0.18), - 0 0 30px rgba(30, 214, 255, 0.08); + 0 0 12px rgba(23, 98, 255, 0.18), + 0 0 30px rgba(255, 122, 0, 0.08); } .hero-home h1 { @@ -797,8 +840,8 @@ textarea:focus { font-size: clamp(2.9rem, 6.4vw, 5.2rem); line-height: 0.93; text-shadow: - 0 0 12px rgba(30, 214, 255, 0.18), - 0 0 32px rgba(24, 217, 127, 0.08); + 0 0 12px rgba(23, 98, 255, 0.18), + 0 0 32px rgba(255, 122, 0, 0.1); } .hero-actions { @@ -823,10 +866,10 @@ textarea:focus { border-radius: 24px; border: 1px solid var(--panel-border-soft); background: - linear-gradient(160deg, rgba(10, 31, 47, 0.96), rgba(3, 13, 21, 0.96)); + linear-gradient(160deg, rgba(14, 20, 34, 0.96), rgba(5, 9, 16, 0.96)); box-shadow: - inset 0 0 0 1px rgba(30, 214, 255, 0.03), - 0 0 22px rgba(30, 214, 255, 0.04); + inset 0 0 0 1px rgba(23, 98, 255, 0.05), + 0 0 22px rgba(23, 98, 255, 0.08); } .metric-chip, @@ -921,10 +964,10 @@ textarea:focus { border-radius: 22px; border: 1px solid var(--panel-border-soft); background: - linear-gradient(160deg, rgba(10, 31, 47, 0.96), rgba(3, 13, 21, 0.96)); + linear-gradient(160deg, rgba(14, 20, 34, 0.96), rgba(5, 9, 16, 0.96)); box-shadow: - inset 0 0 0 1px rgba(30, 214, 255, 0.03), - 0 0 22px rgba(30, 214, 255, 0.04); + inset 0 0 0 1px rgba(23, 98, 255, 0.05), + 0 0 22px rgba(23, 98, 255, 0.08); } .mini-panel p { @@ -943,15 +986,15 @@ textarea:focus { } .cta-panel { - border-color: rgba(125, 247, 189, 0.24); + border-color: rgba(255, 122, 0, 0.26); } .twice-card { - border-color: rgba(117, 242, 255, 0.24); + border-color: rgba(255, 122, 0, 0.28); } .time-card { - border-color: rgba(125, 247, 189, 0.24); + border-color: rgba(23, 98, 255, 0.28); } .format-head h3, @@ -1005,9 +1048,9 @@ textarea:focus { gap: 0.45rem; padding: 1rem; border-radius: 22px; - border: 1px solid rgba(30, 214, 255, 0.18); + border: 1px solid rgba(23, 98, 255, 0.18); background: - linear-gradient(145deg, rgba(30, 214, 255, 0.11), rgba(24, 217, 127, 0.08)), + 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)); } @@ -1028,11 +1071,11 @@ textarea:focus { } .minus-card { - border-color: rgba(117, 242, 255, 0.22); + border-color: rgba(255, 122, 0, 0.24); } .plus-card { - border-color: rgba(125, 247, 189, 0.22); + border-color: rgba(23, 98, 255, 0.24); } .source-grid { @@ -1055,8 +1098,8 @@ textarea:focus { .source-card:hover { transform: translateY(-3px); text-decoration: none; - border-color: rgba(30, 214, 255, 0.34); - box-shadow: 0 0 22px rgba(30, 214, 255, 0.08); + border-color: rgba(23, 98, 255, 0.34); + box-shadow: 0 0 22px rgba(23, 98, 255, 0.1); } @keyframes pulse { @@ -1064,13 +1107,13 @@ textarea:focus { 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), - 0 0 28px rgba(30, 214, 255, 0.16); + 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(30, 214, 255, 0.24); + 0 0 38px rgba(23, 98, 255, 0.26); } }