hm
This commit is contained in:
844
static/css/styles.css
Normal file
844
static/css/styles.css
Normal file
@@ -0,0 +1,844 @@
|
||||
/* Theme Variables */
|
||||
:root {
|
||||
/* Light theme (default fallback) */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9fa;
|
||||
--bg-input: #ffffff;
|
||||
--text-primary: #212529;
|
||||
--text-secondary: #6c757d;
|
||||
--border-color: #dee2e6;
|
||||
--border-hover: #adb5bd;
|
||||
--shadow: rgba(0, 0, 0, 0.1);
|
||||
--accent: #0d6efd;
|
||||
--accent-hover: #0b5ed7;
|
||||
|
||||
/* Smooth theme transitions */
|
||||
transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-primary: #0b0f14;
|
||||
--bg-secondary: #121821;
|
||||
--bg-input: #0d131b;
|
||||
--text-primary: #e8eef7;
|
||||
--text-secondary: #adb5bd;
|
||||
--border-color: #223042;
|
||||
--border-hover: #495057;
|
||||
--shadow: rgba(0, 0, 0, 0.3);
|
||||
--accent: #6ea8fe;
|
||||
--accent-hover: #9ec5fe;
|
||||
}
|
||||
}
|
||||
|
||||
/* Manual theme overrides */
|
||||
[data-theme="light"] {
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9fa;
|
||||
--bg-input: #ffffff;
|
||||
--text-primary: #212529;
|
||||
--text-secondary: #6c757d;
|
||||
--border-color: #dee2e6;
|
||||
--border-hover: #adb5bd;
|
||||
--shadow: rgba(0, 0, 0, 0.1);
|
||||
--accent: #0d6efd;
|
||||
--accent-hover: #0b5ed7;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg-primary: #0b0f14;
|
||||
--bg-secondary: #121821;
|
||||
--bg-input: #0d131b;
|
||||
--text-primary: #e8eef7;
|
||||
--text-secondary: #adb5bd;
|
||||
--border-color: #223042;
|
||||
--border-hover: #495057;
|
||||
--shadow: rgba(0, 0, 0, 0.3);
|
||||
--accent: #6ea8fe;
|
||||
--accent-hover: #9ec5fe;
|
||||
}
|
||||
|
||||
/* Smooth theme transitions for all elements */
|
||||
* {
|
||||
transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Enhanced smooth transition during theme changes */
|
||||
.theme-transitioning * {
|
||||
transition-duration: 0.6s !important;
|
||||
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
color: var(--text-primary);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Animated background elements */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background:
|
||||
radial-gradient(circle at 25% 25%, rgba(13, 110, 253, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 75% 75%, rgba(110, 168, 254, 0.08) 0%, transparent 50%);
|
||||
animation: float 20s ease-in-out infinite;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: rotate(0deg) scale(1); }
|
||||
33% { transform: rotate(1deg) scale(1.1); }
|
||||
66% { transform: rotate(-1deg) scale(0.9); }
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
background: linear-gradient(145deg, var(--bg-secondary), var(--bg-input));
|
||||
border-radius: 20px;
|
||||
padding: 32px;
|
||||
box-shadow:
|
||||
0 20px 40px -12px var(--shadow),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow:
|
||||
0 32px 64px -12px var(--shadow),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
top: var(--logo-y, 20px);
|
||||
left: var(--logo-x, 20px);
|
||||
max-height: 80px;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
z-index: 100;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.05);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.logo:active,
|
||||
.logo.dragging {
|
||||
cursor: grabbing;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.logo.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
position: fixed;
|
||||
top: var(--typewriter-y, 110px);
|
||||
left: var(--typewriter-x, 20px);
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-input));
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20px;
|
||||
padding: 8px 12px;
|
||||
box-shadow:
|
||||
0 8px 24px -6px var(--shadow),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.08);
|
||||
z-index: 98;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
backdrop-filter: blur(8px);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.info-box::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
}
|
||||
|
||||
.info-box:hover {
|
||||
transform: translateY(-2px) scale(1.05);
|
||||
box-shadow:
|
||||
0 12px 32px -6px var(--shadow),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.info-box:active,
|
||||
.info-box.dragging {
|
||||
cursor: grabbing;
|
||||
transform: scale(0.98);
|
||||
box-shadow:
|
||||
0 6px 20px -4px var(--shadow),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.typewriter-text {
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
color: var(--text-primary);
|
||||
font-family: 'Courier New', monospace;
|
||||
min-height: 14px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-feature-settings: "kern" 1;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Emoji rendering improvements */
|
||||
font-variant-emoji: emoji;
|
||||
-webkit-font-feature-settings: "liga", "kern";
|
||||
font-synthesis: none;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.typewriter-text::after {
|
||||
content: '|';
|
||||
color: var(--accent);
|
||||
animation: blink 1s infinite;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.typewriter-text.typing::after {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.typewriter-text.paused::after {
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.info-box {
|
||||
top: 85px;
|
||||
left: 15px;
|
||||
width: 110px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.typewriter-text {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
left: 15px;
|
||||
max-height: 65px;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.typewriter-text {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme-specific styling */
|
||||
[data-theme="dark"] .info-box {
|
||||
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-input) 100%);
|
||||
border-color: var(--border-color);
|
||||
box-shadow: 0 2px 8px var(--shadow), 0 0 20px rgba(110, 168, 254, 0.05);
|
||||
}
|
||||
|
||||
[data-theme="light"] .info-box {
|
||||
background: linear-gradient(135deg, var(--bg-secondary) 0%, #ffffff 100%);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: fixed;
|
||||
top: var(--theme-button-y, 20px);
|
||||
right: 20px;
|
||||
background: var(--bg-input);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-primary);
|
||||
cursor: grab;
|
||||
font-size: 18px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 1000;
|
||||
box-shadow: 0 4px 12px var(--shadow);
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
/* Custom positioned theme button */
|
||||
.theme-toggle.positioned {
|
||||
top: var(--theme-button-y);
|
||||
left: var(--theme-button-x);
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--bg-secondary);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 20px var(--shadow);
|
||||
}
|
||||
|
||||
.theme-toggle:active,
|
||||
.theme-toggle.dragging {
|
||||
cursor: grabbing;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 8px 25px var(--shadow);
|
||||
}
|
||||
|
||||
.theme-toggle.bounce {
|
||||
animation: bounce 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0) scale(1.1);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-10px) scale(1.15);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-5px) scale(1.12);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 var(--accent);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.theme-toggle.pulse {
|
||||
animation: pulse 1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0%, 7% { transform: rotateZ(0); }
|
||||
15% { transform: rotateZ(-15deg); }
|
||||
20% { transform: rotateZ(10deg); }
|
||||
25% { transform: rotateZ(-10deg); }
|
||||
30% { transform: rotateZ(6deg); }
|
||||
35% { transform: rotateZ(-4deg); }
|
||||
40%, 100% { transform: rotateZ(0); }
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--bg-secondary);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 20px var(--shadow);
|
||||
animation: wiggle 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
/* Add glow effect for dark theme */
|
||||
[data-theme="dark"] .theme-toggle {
|
||||
box-shadow: 0 4px 12px var(--shadow), 0 0 20px rgba(110, 168, 254, 0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-toggle:hover {
|
||||
box-shadow: 0 6px 20px var(--shadow), 0 0 30px rgba(110, 168, 254, 0.2);
|
||||
}
|
||||
|
||||
/* Add subtle gradient backgrounds */
|
||||
[data-theme="light"] .theme-toggle {
|
||||
background: linear-gradient(135deg, var(--bg-input) 0%, var(--bg-secondary) 100%);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-toggle {
|
||||
background: linear-gradient(135deg, var(--bg-input) 0%, var(--bg-secondary) 100%);
|
||||
}
|
||||
|
||||
/* Smooth transitions for all states */
|
||||
.theme-toggle * {
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
/* Mobile-friendly touch improvements */
|
||||
@media (max-width: 768px) {
|
||||
.theme-toggle {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--text-primary), var(--accent));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 20px 0 8px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
input, select {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--border-color);
|
||||
background: var(--bg-input);
|
||||
color: var(--text-primary);
|
||||
font-size: 16px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-sizing: border-box;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow:
|
||||
0 0 0 4px rgba(13, 110, 253, 0.1),
|
||||
0 8px 24px -8px var(--shadow);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
input:hover, select:hover {
|
||||
border-color: var(--border-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
#card-element {
|
||||
padding: 10px;
|
||||
background: var(--bg-input);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-top: 16px;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
button[type="submit"]:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
button[type="submit"]:disabled {
|
||||
background: var(--text-secondary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#result {
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#result:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Express Checkout Styling */
|
||||
#express-checkout-element {
|
||||
margin-bottom: 28px;
|
||||
min-height: 50px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.payment-divider {
|
||||
text-align: center;
|
||||
margin: 32px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.payment-divider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--border-color), transparent);
|
||||
}
|
||||
|
||||
.payment-divider span {
|
||||
background: linear-gradient(145deg, var(--bg-secondary), var(--bg-input));
|
||||
padding: 8px 20px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--border-color);
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
/* Express payment button styling */
|
||||
.StripeElement--express {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
/* Card element improvements */
|
||||
#card-element {
|
||||
padding: 18px;
|
||||
background: var(--bg-input);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--border-color);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
margin-bottom: 24px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
#card-element:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow:
|
||||
0 0 0 4px rgba(13, 110, 253, 0.1),
|
||||
0 8px 24px -8px var(--shadow);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
#card-element:hover {
|
||||
border-color: var(--border-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Improved submit button */
|
||||
#card-submit-button {
|
||||
width: 100%;
|
||||
padding: 18px;
|
||||
margin-top: 16px;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: inherit;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
#card-submit-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
#card-submit-button:hover {
|
||||
background: linear-gradient(135deg, var(--accent-hover), var(--accent));
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 32px -8px rgba(13, 110, 253, 0.4);
|
||||
}
|
||||
|
||||
#card-submit-button:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
#card-submit-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#card-submit-button:disabled {
|
||||
background: var(--text-secondary);
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Success result styling */
|
||||
#result.success {
|
||||
background: linear-gradient(135deg, #28a745, #20c997);
|
||||
color: white;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
animation: slideIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
#result.error {
|
||||
background: linear-gradient(135deg, #dc3545, #fd7e14);
|
||||
color: white;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
animation: slideIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Logo bounce animation */
|
||||
@keyframes logoBounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0) scale(1.05);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-8px) scale(1.1);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-4px) scale(1.07);
|
||||
}
|
||||
}
|
||||
|
||||
/* Supporter Wall */
|
||||
.supporter-wall {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 280px;
|
||||
max-height: 400px;
|
||||
background: linear-gradient(145deg, var(--bg-secondary), var(--bg-input));
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-shadow:
|
||||
0 12px 32px -8px var(--shadow),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.08);
|
||||
z-index: 95;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.supporter-wall h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 16px;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.supporters-list {
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border-color) transparent;
|
||||
}
|
||||
|
||||
.supporters-list::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.supporters-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.supporters-list::-webkit-scrollbar-thumb {
|
||||
background: var(--border-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.supporter-item {
|
||||
padding: 8px 12px;
|
||||
margin: 4px 0;
|
||||
background: var(--bg-input);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
animation: slideInRight 0.5s ease-out;
|
||||
}
|
||||
|
||||
.supporter-item:hover {
|
||||
transform: translateX(-2px);
|
||||
border-color: var(--accent);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.supporter-item .name {
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.supporter-item .time {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.supporter-item.new {
|
||||
animation: newSupporter 1s ease-out;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes newSupporter {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 0 var(--accent);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 0 10px rgba(13, 110, 253, 0.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile responsiveness for supporter wall */
|
||||
@media (max-width: 768px) {
|
||||
.supporter-wall {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
left: 10px;
|
||||
width: auto;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.supporters-list {
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile responsiveness for payment methods */
|
||||
@media (max-width: 768px) {
|
||||
#express-checkout-element {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.payment-divider {
|
||||
margin: 20px 0;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.payment-divider span {
|
||||
font-size: 13px;
|
||||
padding: 8px 20px;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
background: linear-gradient(145deg, var(--bg-secondary), var(--bg-input));
|
||||
border: 2px solid var(--accent);
|
||||
box-shadow: 0 4px 12px var(--shadow);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
#card-element {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
button {
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #6aa6ff;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
#result { margin-top: 12px; min-height: 20px; }
|
||||
Reference in New Issue
Block a user