File size: 1,722 Bytes
134930c dd5a26e 9029379 192b00e ffe1ae9 620629d 134930c | 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 |
body {
padding: 2rem;
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
}
h1 {
font-size: 16px;
margin-top: 0;
}
p {
color: rgb(107, 114, 128);
font-size: 15px;
margin-bottom: 10px;
margin-top: 5px;
}
.card {
max-width: 620px;
margin: 0 auto;
padding: 16px;
border: 1px solid lightgray;
border-radius: 16px;
}
.card p:last-child {
margin-bottom: 0;
}
/* Button Hover Effects */
.btn-primary i {
transition: transform 0.3s ease;
}
.btn-primary:hover i {
transform: rotate(15deg);
}
/* Floating Label Form Styles */
.relative.z-0 input:focus ~ label,
.relative.z-0 input:not(:placeholder-shown) ~ label {
transform: translateY(-1.5rem) scale(0.75);
color: var(--vlc-leaf);
}
/* Form Input Transitions */
input, textarea, select {
transition: all 0.3s ease;
}
input:focus, textarea:focus, select:focus {
box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.2);
}
/* Form Button Hover Effects */
button[type="submit"] {
transition: all 0.3s ease;
transform: translateY(0);
}
button[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 32, 96, 0.15);
}
/* Text Shadow for Banner */
.text-shadow-lg {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Flip Card Styles */
.flip-card {
perspective: 1000px;
height: 300px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.flip-card-back {
transform: rotateY(180deg);
}
|