606 lines
11 KiB
CSS
606 lines
11 KiB
CSS
:root {
|
|
/* --bulma-primary-h: ; */
|
|
--bulma-primary-l: 47%;
|
|
--bulma-info-h: 175deg;
|
|
--bulma-info-s: 88%;
|
|
--bulma-info-l: 42%;
|
|
--bulma-navbar-item-img-max-height: 200px;
|
|
color-scheme: light;
|
|
}
|
|
|
|
html {
|
|
background-color: #e7e6dd;
|
|
font-family: "Autour One", serif; /* font-family: "Playwrite AU SA", serif; */
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: "Autour One", serif;
|
|
color:#363636;
|
|
}
|
|
|
|
|
|
nav {
|
|
font-family: "Autour One", serif;
|
|
}
|
|
.update{
|
|
height: 50px;
|
|
width:100%;
|
|
/* background-color: #deb0f0; */
|
|
text-align: center;
|
|
margin: auto;
|
|
overflow: hidden;
|
|
background-color: #fef6e4;
|
|
padding: 10px 0;
|
|
/* border-top: 2px solid #94d601;; */
|
|
/* border-bottom: 2px solid #94d601;; */
|
|
position: relative;
|
|
}
|
|
#message{
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
padding-left: 100%; /* Start off-screen */
|
|
animation: scroll-left 25s linear infinite;
|
|
font-size: 1.2rem;
|
|
color: #333;
|
|
}
|
|
|
|
@keyframes scroll-left {
|
|
0% {
|
|
transform: translateX(0%);
|
|
}
|
|
100% {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
|
|
.update-carousel {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
background-color: #fef6e4;
|
|
border-top: 2px solid #ffd100;
|
|
border-bottom: 2px solid #ffd100;
|
|
padding: 10px;
|
|
position: relative;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.1rem;
|
|
color: #333;
|
|
}
|
|
|
|
.message-text {
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
left: 100%;
|
|
animation: slide-left 8s linear infinite;
|
|
}
|
|
|
|
@keyframes slide-left {
|
|
0% {
|
|
left: 100%;
|
|
}
|
|
10% {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
90% {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
100% {
|
|
left: -100%;
|
|
}
|
|
}
|
|
|
|
header {
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
|
|
.centerimg {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 4em;
|
|
}
|
|
|
|
#heroImg {
|
|
position: absolute; /* height: 600px; */
|
|
}
|
|
|
|
.navbar-item img, .navbar-item svg {
|
|
max-height: 1.30em;
|
|
}
|
|
|
|
.is-overlay {
|
|
margin: auto;
|
|
}
|
|
|
|
.padding{
|
|
padding: 1.2rem;
|
|
}
|
|
|
|
|
|
|
|
/* Centered text */
|
|
.text-on-image {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
}
|
|
|
|
.image-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.image-container img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.overlay {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: rgba(0, 0, 0, 0.5); /* Optional: adds background for better readability */
|
|
padding: 10px;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
}
|
|
.lightbox .close {
|
|
pointer-events: auto;
|
|
z-index: 1001;
|
|
}
|
|
|
|
h1 label button{color: #363636}
|
|
|
|
form{
|
|
background-color: rgb(231, 230, 221);
|
|
font-family: "Autour One", serif; /* font-family: "Playwrite AU SA", serif; */
|
|
color:#363636;
|
|
|
|
}
|
|
|
|
#top {
|
|
font-family: "Autour One", serif; /* font-family: "Playwrite AU SA", serif; */
|
|
|
|
display: none; /* Hidden by default */
|
|
position: fixed; /* Fixed/sticky position */
|
|
bottom: 12px; /* Place the button at the bottom of the page */
|
|
right: 10px; /* Place the button 30px from the right */
|
|
z-index: 99; /* Make sure it does not overlap */
|
|
border: none; /* Remove borders */
|
|
outline: none; /* Remove outline */
|
|
background-color: #94d601; /* Set a background color */
|
|
cursor: pointer; /* Add a mouse pointer on hover */
|
|
padding: 15px; /* Some padding */
|
|
border-radius: 10px; /* Rounded corners */
|
|
font-size: 18px; /* Increase font size */
|
|
border:solid 1px #363636;
|
|
box-shadow: 3px 3px 3px #363636 ;
|
|
}
|
|
|
|
#top:hover {
|
|
background-color: #aedad3; /* Add a dark-grey background on hover */
|
|
}
|
|
|
|
#status{
|
|
color: rgb(221, 74, 214);
|
|
margin-bottom: 1rem;;
|
|
}
|
|
|
|
.reviews-section {
|
|
background: transparent;
|
|
border-top: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.reviews-section h2,
|
|
.reviews-section .is-size-3 {
|
|
color: #7585ff !important;
|
|
}
|
|
|
|
.reviews-summary {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
justify-items: center;
|
|
}
|
|
|
|
.reviews-stars {
|
|
font-size: 1.4rem;
|
|
color: #f2b01e;
|
|
letter-spacing: 0.1rem;
|
|
}
|
|
|
|
.reviews-grid {
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
transition: opacity 0.35s ease;
|
|
}
|
|
|
|
.reviews-grid.is-fading {
|
|
opacity: 0;
|
|
}
|
|
|
|
.review-card {
|
|
background: #fff;
|
|
border: 1px solid #e6dfc8;
|
|
border-radius: 14px;
|
|
padding: 1.1rem 1.25rem;
|
|
box-shadow: 0 10px 22px rgba(24, 40, 72, 0.08);
|
|
text-align: left;
|
|
min-height: 150px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.review-card p {
|
|
margin-bottom: 0.5rem;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.review-author {
|
|
color: #6b6b6b;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.review-card.is-expanded {
|
|
min-height: 0;
|
|
}
|
|
|
|
.review-card.is-expanded p {
|
|
display: block;
|
|
-webkit-line-clamp: unset;
|
|
overflow: visible;
|
|
}
|
|
|
|
.trusted-section {
|
|
background: transparent;
|
|
}
|
|
|
|
.trusted-section h2,
|
|
.trusted-section .is-size-3 {
|
|
color: #7585ff !important;
|
|
}
|
|
|
|
.section-divider {
|
|
border: none;
|
|
border-top: 2px solid rgba(117, 133, 255, 0.35);
|
|
margin: 2rem auto 0;
|
|
max-width: 920px;
|
|
}
|
|
|
|
|
|
.trusted-logos {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
gap: 1.25rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.trusted-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 96px;
|
|
padding: 0.85rem 1rem;
|
|
background: #fff;
|
|
border-radius: 14px;
|
|
box-shadow: 0 10px 22px rgba(24, 40, 72, 0.08);
|
|
border: 1px solid #e6dfc8;
|
|
}
|
|
|
|
.trusted-logo img {
|
|
height: 52px;
|
|
width: 100%;
|
|
max-width: 150px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.trusted-logo--dark {
|
|
background: #1b1b1b;
|
|
border-color: #1b1b1b;
|
|
}
|
|
|
|
.gallery-hero {
|
|
background: linear-gradient(135deg, #12b7ad, #1078c2);
|
|
color: #fff;
|
|
}
|
|
|
|
.gallery-hero .hero-body {
|
|
padding: 3.5rem 1.5rem;
|
|
}
|
|
|
|
.gallery-kicker {
|
|
border: 1px solid rgba(255, 255, 255, 0.65);
|
|
color: #0b3b58;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.gallery-wrap {
|
|
background: #f8f4e8;
|
|
padding-top: 2.5rem;
|
|
padding-bottom: 3rem;
|
|
}
|
|
|
|
.search-box {
|
|
background: #fffef9;
|
|
border: 1px solid #e6dfc8;
|
|
box-shadow: 0 10px 25px rgba(24, 40, 72, 0.08);
|
|
border-radius: 14px;
|
|
margin-bottom: 1.75rem;
|
|
}
|
|
|
|
.search-input {
|
|
border-radius: 999px;
|
|
border: 1px solid #d7cfa7;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.search-input:focus {
|
|
border-color: #2e7dbf;
|
|
box-shadow: 0 0 0 0.15em rgba(30, 144, 225, 0.25);
|
|
}
|
|
|
|
.search-field {
|
|
min-width: 260px;
|
|
}
|
|
|
|
.gap-sm {
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.gallery-grid .column {
|
|
display: flex;
|
|
}
|
|
|
|
.gallery-card {
|
|
width: 100%;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
box-shadow: 0 18px 35px rgba(24, 40, 72, 0.08);
|
|
border: 1px solid #e9e4cf;
|
|
background: #ffffff;
|
|
transition: transform 180ms ease, box-shadow 180ms ease;
|
|
}
|
|
|
|
.gallery-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 25px 50px rgba(24, 40, 72, 0.12);
|
|
}
|
|
|
|
.gallery-card .card-image img {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.gallery-card .card-content {
|
|
padding: 1rem 1.25rem 1.25rem;
|
|
}
|
|
|
|
.gallery-card .title {
|
|
color: #15384c;
|
|
}
|
|
|
|
.gallery-card .subtitle {
|
|
color: #56707f;
|
|
}
|
|
|
|
.gallery-section {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.gallery-section-title {
|
|
margin-bottom: 1.25rem;
|
|
color: #15384c;
|
|
}
|
|
|
|
.admin-page {
|
|
background: #f4f0e5;
|
|
}
|
|
|
|
.admin-hero {
|
|
background: linear-gradient(120deg, #0a2d46 0%, #0b6786 45%, #11b3be 100%);
|
|
color: #fff;
|
|
padding: 2.5rem 1.5rem 2rem;
|
|
margin-bottom: 1.75rem;
|
|
box-shadow: 0 10px 25px rgba(24, 40, 72, 0.08);
|
|
}
|
|
|
|
.admin-kicker {
|
|
border: 1px solid rgba(255, 255, 255, 0.65);
|
|
color: #0b3b58;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.admin-card {
|
|
border: 1px solid #e6dfc8;
|
|
box-shadow: 0 10px 25px rgba(24, 40, 72, 0.08);
|
|
border-radius: 14px;
|
|
background: #fffef9;
|
|
}
|
|
.photo-columns {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
.photo-columns > .column {
|
|
width: 100%;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
.photo-columns .upload-column .box,
|
|
.photo-columns .manage-column .box {
|
|
width: 100%;
|
|
}
|
|
|
|
.admin-gallery-grid .card {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 20px rgba(24, 40, 72, 0.06);
|
|
border: 1px solid #ebe5d2;
|
|
}
|
|
|
|
.admin-gallery-grid .card-footer-item {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.admin-gallery-grid .card-image img {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.admin-login-card {
|
|
max-width: 420px;
|
|
margin: auto;
|
|
border-radius: 16px;
|
|
box-shadow: 0 16px 30px rgba(24, 40, 72, 0.14);
|
|
}
|
|
|
|
.tabs.is-boxed li.is-active a {
|
|
background: #2e7dbf;
|
|
color: #fff;
|
|
border-color: #2e7dbf;
|
|
}
|
|
|
|
.tabs.is-boxed a {
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
.neonTextOpen {
|
|
color: #fff;
|
|
text-shadow:
|
|
0 0 7px #fff,
|
|
0 0 10px #fff,
|
|
0 0 21px #fff,
|
|
0 0 42px #bc13fe,
|
|
0 0 82px #bc13fe,
|
|
0 0 92px #bc13fe,
|
|
0 0 102px #bc13fe,
|
|
0 0 151px #bc13fe;
|
|
animation: pulsateOpen 1.5s infinite alternate;
|
|
max-width: fit-content;
|
|
margin: auto;
|
|
border: 0.1rem solid #fff;
|
|
border-radius: 2rem;
|
|
padding: 0.4em;
|
|
margin-bottom: 1rem;
|
|
box-shadow:
|
|
0 0 0.2rem #fff,
|
|
0 0 0.2rem #fff,
|
|
0 0 2rem #bc13fe,
|
|
0 0 0.8rem #bc13fe,
|
|
inset 0 0 1.3rem #bc13fe;
|
|
}
|
|
|
|
.neonTextClosed {
|
|
color: #fff;
|
|
text-shadow:
|
|
0 0 7px #fff,
|
|
0 0 10px #fff,
|
|
0 0 21px #fff,
|
|
0 0 42px #11c9f7,
|
|
0 0 82px #11c9f7,
|
|
0 0 92px #11c9f7,
|
|
0 0 102px #11c9f7,
|
|
0 0 151px #11c9f7;
|
|
animation: pulsateClosed 1.5s infinite alternate;
|
|
max-width: fit-content;
|
|
margin: auto;
|
|
border: 0.1rem solid #fff;
|
|
border-radius: 2rem;
|
|
padding: 0.4em;
|
|
margin-bottom: 1rem;
|
|
box-shadow:
|
|
0 0 0.2rem #fff,
|
|
0 0 0.2rem #fff,
|
|
0 0 2rem #11c9f7,
|
|
0 0 0.8rem #11c9f7,
|
|
inset 0 0 1.3rem #11c9f7;
|
|
}
|
|
|
|
@keyframes pulsateOpen {
|
|
|
|
100% {
|
|
text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #bc13fe,
|
|
0 0 80px #bc13fe,
|
|
0 0 90px #bc13fe,
|
|
0 0 100px #bc13fe,
|
|
0 0 150px #bc13fe;
|
|
}
|
|
|
|
0% {
|
|
text-shadow:
|
|
0 0 2px #fff,
|
|
0 0 4px #fff,
|
|
0 0 6px #fff,
|
|
0 0 10px #bc13fe,
|
|
0 0 45px #bc13fe,
|
|
0 0 55px #bc13fe,
|
|
0 0 70px #bc13fe,
|
|
0 0 80px #bc13fe;
|
|
}
|
|
|
|
@keyframes pulsateClosed {
|
|
|
|
100% {
|
|
text-shadow:
|
|
0 0 4px #fff,
|
|
0 0 11px #fff,
|
|
0 0 19px #fff,
|
|
0 0 40px #11c9f7,
|
|
0 0 80px #11c9f7,
|
|
0 0 90px #11c9f7,
|
|
0 0 100px #11c9f7,
|
|
0 0 150px #11c9f7;
|
|
}
|
|
|
|
0% {
|
|
text-shadow:
|
|
0 0 2px #fff,
|
|
0 0 4px #fff,
|
|
0 0 6px #fff,
|
|
0 0 10px #11c9f7,
|
|
0 0 45px #11c9f7,
|
|
0 0 55px #11c9f7,
|
|
0 0 70px #11c9f7,
|
|
0 0 80px #11c9f7;
|
|
}
|
|
|
|
/* Styles for edit and delete buttons */
|
|
.card-footer-item.edit-button {
|
|
color: #3273dc;
|
|
}
|
|
|
|
.card-footer-item.delete-button {
|
|
color: #ff3860;
|
|
}
|
|
|
|
/* Fix for search input and card content background */
|
|
.input, .card-content {
|
|
background-color: #fff; /* Or a color that matches the design */
|
|
color: #363636;
|
|
}
|
|
.card {
|
|
background-color: #fff;
|
|
}
|