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

Intègre le logo et refond la palette du site

Browse Source
This commit is contained in:
Christophe JEANNEROT
2026-04-12 13:13:18 +02:00
parent 92bf4c0ccb
commit b63be49a6f
7 changed files with 148 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
application.html
View File

@@ -8,6 +8,7 @@
content="Application officielle de match pour ChessCubing Arena sur téléphone et tablette." content="Application officielle de match pour ChessCubing Arena sur téléphone et tablette."
/> />
<title>ChessCubing Arena | Application</title> <title>ChessCubing Arena | Application</title>
<link rel="icon" type="image/jpeg" href="logo.jpeg" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body data-page="setup"> <body data-page="setup">
@@ -17,6 +18,9 @@
<div class="setup-shell"> <div class="setup-shell">
<header class="hero hero-setup"> <header class="hero hero-setup">
<div class="hero-copy"> <div class="hero-copy">
<a class="logo-lockup" href="index.html" aria-label="Accueil ChessCubing">
<img class="hero-logo" src="logo.jpeg" alt="Logo ChessCubing" />
</a>
<p class="eyebrow">Application officielle de match</p> <p class="eyebrow">Application officielle de match</p>
<h1>ChessCubing Arena</h1> <h1>ChessCubing Arena</h1>
<p class="lead"> <p class="lead">

5
chrono.html
View File

@@ -8,12 +8,15 @@
content="Phase chrono de ChessCubing Arena avec gros boutons face-à-face." content="Phase chrono de ChessCubing Arena avec gros boutons face-à-face."
/> />
<title>ChessCubing Arena | Phase Chrono</title> <title>ChessCubing Arena | Phase Chrono</title>
<link rel="icon" type="image/jpeg" href="logo.jpeg" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body data-page="chrono" class="phase-body"> <body data-page="chrono" class="phase-body">
<main class="phase-shell"> <main class="phase-shell">
<header class="phase-header"> <header class="phase-header">
<a class="brand-link" href="application.html">Application</a> <a class="brand-link brand-link-logo" href="application.html" aria-label="Retour à l'application">
<img class="brand-link-mark" src="logo.jpeg" alt="Logo ChessCubing" />
</a>
<div class="phase-title"> <div class="phase-title">
<p class="eyebrow">Phase chrono</p> <p class="eyebrow">Phase chrono</p>
<h1 id="chronoTitle">Block 1</h1> <h1 id="chronoTitle">Block 1</h1>

5
cube.html
View File

@@ -8,12 +8,15 @@
content="Phase cube de ChessCubing Arena avec gros boutons de fin." content="Phase cube de ChessCubing Arena avec gros boutons de fin."
/> />
<title>ChessCubing Arena | Phase Cube</title> <title>ChessCubing Arena | Phase Cube</title>
<link rel="icon" type="image/jpeg" href="logo.jpeg" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body data-page="cube" class="phase-body"> <body data-page="cube" class="phase-body">
<main class="phase-shell cube-shell"> <main class="phase-shell cube-shell">
<header class="phase-header"> <header class="phase-header">
<a class="brand-link" href="application.html">Application</a> <a class="brand-link brand-link-logo" href="application.html" aria-label="Retour à l'application">
<img class="brand-link-mark" src="logo.jpeg" alt="Logo ChessCubing" />
</a>
<div class="phase-title"> <div class="phase-title">
<p class="eyebrow">Phase cube</p> <p class="eyebrow">Phase cube</p>
<h1 id="cubeTitle">Cube n°1</h1> <h1 id="cubeTitle">Cube n°1</h1>

4
index.html
View File

@@ -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." content="Découvrez ChessCubing, l'association et le jeu qui réunit échecs et Rubik's Cube dans un format simple, vivant et spectaculaire."
/> />
<title>ChessCubing Arena | Accueil</title> <title>ChessCubing Arena | Accueil</title>
<link rel="icon" type="image/jpeg" href="logo.jpeg" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body class="home-body"> <body class="home-body">
@@ -17,6 +18,9 @@
<div class="rules-shell"> <div class="rules-shell">
<header class="hero hero-home"> <header class="hero hero-home">
<div class="hero-copy"> <div class="hero-copy">
<a class="logo-lockup" href="index.html" aria-label="Accueil ChessCubing">
<img class="hero-logo" src="logo.jpeg" alt="Logo ChessCubing" />
</a>
<p class="eyebrow">Association ChessCubing</p> <p class="eyebrow">Association ChessCubing</p>
<h1>Les échecs rencontrent le Rubik's Cube</h1> <h1>Les échecs rencontrent le Rubik's Cube</h1>
<p class="lead"> <p class="lead">

BIN
logo.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

4
reglement.html
View File

@@ -8,6 +8,7 @@
content="Page règlement officielle du site ChessCubing Arena avec synthèse des formats Twice et Time." content="Page règlement officielle du site ChessCubing Arena avec synthèse des formats Twice et Time."
/> />
<title>ChessCubing Arena | Règlement officiel</title> <title>ChessCubing Arena | Règlement officiel</title>
<link rel="icon" type="image/jpeg" href="logo.jpeg" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body class="rules-body"> <body class="rules-body">
@@ -17,6 +18,9 @@
<div class="rules-shell"> <div class="rules-shell">
<header class="hero hero-rules"> <header class="hero hero-rules">
<div class="hero-copy"> <div class="hero-copy">
<a class="logo-lockup" href="index.html" aria-label="Accueil ChessCubing">
<img class="hero-logo" src="logo.jpeg" alt="Logo ChessCubing" />
</a>
<p class="eyebrow">Référentiel officiel</p> <p class="eyebrow">Référentiel officiel</p>
<h1>Règlement ChessCubing</h1> <h1>Règlement ChessCubing</h1>
<p class="lead"> <p class="lead">

213
styles.css
View File

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