Upload files to "berlayar-sinema-app"
This commit is contained in:
278
berlayar-sinema-app/style.css
Normal file
278
berlayar-sinema-app/style.css
Normal file
@@ -0,0 +1,278 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
|
||||
url('assets/hero-cover.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
|
||||
.film-card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.film-card .p-6 {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.film-card .p-6 .flex-wrap {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.film-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.sponsor-logo {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.7;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.sponsor-logo:hover {
|
||||
filter: grayscale(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #6b46c1;
|
||||
box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.2);
|
||||
}
|
||||
|
||||
.title-font {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Form styling */
|
||||
#registration-form {
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#registration-form input,
|
||||
#registration-form textarea,
|
||||
#registration-form select {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#registration-form input:focus,
|
||||
#registration-form textarea:focus,
|
||||
#registration-form select:focus {
|
||||
box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.5);
|
||||
}
|
||||
|
||||
|
||||
#registration-form input::placeholder,
|
||||
#registration-form textarea::placeholder {
|
||||
color: #A9A9A9; /* Solid light gray */
|
||||
}
|
||||
|
||||
#registration-form input:not(:placeholder-shown),
|
||||
#registration-form textarea:not(:placeholder-shown),
|
||||
#registration-form select:not([value=""]) {
|
||||
color: #4B0082; /* Solid dark purple for active input */
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
.animate-scroll {
|
||||
display: inline-block;
|
||||
animation: scroll 20s linear infinite;
|
||||
}
|
||||
|
||||
.sponsor-carousel:hover .animate-scroll {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.sponsor-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.sponsor-container::before, .sponsor-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100px;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.sponsor-container::before, .sponsor-container::after {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.sponsor-container::before {
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
|
||||
.sponsor-container::after {
|
||||
right: 0;
|
||||
background: linear-gradient(270deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.sponsor-container::before {
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
.sponsor-container::after {
|
||||
background: linear-gradient(270deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.sponsor-track {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
animation: scroll 20s linear infinite;
|
||||
}
|
||||
|
||||
.sponsor-track:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.sponsor-slide {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
/* Improved dropdown styles */
|
||||
#registration-form select {
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
#registration-form select option {
|
||||
background-color: #ffffff;
|
||||
color: #6b46c1;
|
||||
}
|
||||
|
||||
/* Chat window styles */
|
||||
#chatWindow {
|
||||
background: rgba(255, 255, 255, 0.15); /* Slightly more opaque than glass-card for better readability */
|
||||
backdrop-filter: blur(15px); /* Stronger blur for frosted effect */
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3); /* Slightly more visible border */
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Stronger shadow */
|
||||
transition: all 0.3s ease;
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
|
||||
#chatWindow:not(.hidden) {
|
||||
animation: chatFadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes chatFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8) translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
/* Chat bubble styles */
|
||||
.chat-message-received {
|
||||
background-color: #e9d5ff; /* Purple pastel for received messages */
|
||||
color: #4b0082; /* Dark purple text */
|
||||
border-radius: 1.25rem; /* Rounded corners */
|
||||
padding: 0.75rem 1rem;
|
||||
display: inline-block;
|
||||
max-width: 75%; /* Limit width */
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.chat-message-sent {
|
||||
background-color: #6b46c1; /* Purple for sent messages */
|
||||
color: #ffffff; /* White text */
|
||||
border-radius: 1.25rem;
|
||||
padding: 0.75rem 1rem;
|
||||
display: inline-block;
|
||||
max-width: 75%;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Typing indicator styles */
|
||||
.typing-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.typing-indicator span {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
background-color: #4b0082;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
animation: bounce 1.4s infinite both;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(1) {
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(2) {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.film-carousel-btn-hidden {
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for film carousel */
|
||||
#film-carousel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#film-carousel {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.shadow-purple {
|
||||
box-shadow: 0 10px 15px -3px rgba(76, 29, 149, 0.3), 0 4px 6px -2px rgba(76, 29, 149, 0.2);
|
||||
}
|
||||
Reference in New Issue
Block a user