Spaces:
Running
Running
File size: 2,261 Bytes
055867e c7bf32e 19727ea 055867e c7bf32e 19727ea c7bf32e 055867e c7bf32e 5885dd1 9d21f18 c7bf32e 055867e c7bf32e 19727ea c7bf32e 19727ea 9d21f18 c7bf32e 055867e c7bf32e 5885dd1 c7bf32e 055867e c7bf32e 055867e c7bf32e 055867e c7bf32e 19727ea 055867e c7bf32e 055867e 19727ea c7bf32e 055867e 5885dd1 055867e 5885dd1 c7bf32e 055867e c7bf32e 055867e c7bf32e 5885dd1 19727ea c7bf32e 9d21f18 c7bf32e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
/* === Base Styles === */
body {
font-family: 'Segoe UI', sans-serif;
background-color: #1f2937;
color: white;
padding: 20px;
}
/* === Logo Animation === */
.studio-header {
text-align: center;
margin-bottom: 30px;
animation: float 3s ease-in-out infinite;
}
.studio-header h3 {
font-size: 18px;
color: #9ca3af;
margin-top: -5px;
font-style: italic;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* === Buttons & Inputs === */
.gr-button {
background-color: #2563eb !important;
color: white !important;
border-radius: 10px;
padding: 10px 20px;
font-weight: bold;
box-shadow: 0 0 10px #2563eb44;
border: none;
font-size: 16px;
transition: all 0.3s ease;
}
.gr-button:hover {
background-color: #3b82f6 !important;
box-shadow: 0 0 15px #3b82f6aa;
}
/* === Tabs === */
.gr-tabs button {
font-size: 16px;
padding: 10px 20px;
border-radius: 8px;
background: #1e293b;
color: white;
transition: all 0.3s ease;
}
.gr-tabs button:hover {
background: #3b82f6;
color: black;
box-shadow: 0 0 10px #3b82f6aa;
}
/* === Inputs & Dropdowns === */
input[type="text"], input[type="number"], select, textarea {
background-color: #334155 !important;
color: white !important;
border: 1px solid #475569 !important;
border-radius: 6px;
width: 100%;
padding: 10px;
}
.gr-checkboxgroup label {
background: #334155;
color: white;
border: 1px solid #475569;
border-radius: 6px;
padding: 8px 12px;
transition: background 0.3s;
}
.gr-checkboxgroup label:hover {
background: #475569;
cursor: pointer;
}
/* === Gallery Cards Hover Effect === */
.gr-gallery__items > div {
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gr-gallery__items > div:hover {
transform: scale(1.02);
box-shadow: 0 0 12px #2563eb44;
}
/* === Responsive Layout === */
@media (max-width: 768px) {
.gr-column {
min-width: 100%;
}
.gr-row {
flex-direction: column;
}
.studio-header img {
width: 90%;
}
.gr-button {
width: 100%;
}
} |