add styling for pesan buket, detail buket, and pembayaran buket view
This commit is contained in:
parent
7e8203b787
commit
5983e6d357
|
|
@ -10,24 +10,18 @@ :root,
|
|||
[data-bs-theme=light] {
|
||||
/* --- BRAND COLORS --- */
|
||||
--bs-primary: #3B8181;
|
||||
/* Teal Utama */
|
||||
--bs-primary-rgb: 59, 129, 129;
|
||||
--bs-primary-hover: #2f6666;
|
||||
/* Hover Teal */
|
||||
|
||||
--bs-link-hover-color: #2a6161;
|
||||
/* Link Hover Spesifik */
|
||||
|
||||
--flo-accent: #E05D44;
|
||||
/* Merah Bata (Tombol Aksi) */
|
||||
--flo-accent-hover: #c04d36;
|
||||
|
||||
--bs-brick: #E66351;
|
||||
--bs-brick-hover: #cf5948;
|
||||
--bs-red: #DC464F;
|
||||
--bs-red-hover: #c43e46;
|
||||
/* --- STANDARD COLORS (Grayscale) --- */
|
||||
--bs-white: #ffffff;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
|
||||
--bs-black: #000000;
|
||||
/* Hitam Pekat */
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
|
||||
--bs-gray-100: #f8f9fa;
|
||||
|
|
@ -49,13 +43,19 @@ [data-bs-theme=light] {
|
|||
|
||||
/* --- THEME ASSIGNMENTS --- */
|
||||
--bs-body-bg: var(--bs-white);
|
||||
--bs-body-color: var(--bs-gray-600);
|
||||
--bs-heading-color: var(--bs-gray-900);
|
||||
--bs-body-color: var(--bs-gray-700);
|
||||
--bs-heading-color: black;
|
||||
|
||||
/* Legacy Template Vars */
|
||||
--bs-secondary-rgb: 108, 117, 125;
|
||||
--inverse-color-rgb: 33, 37, 41;
|
||||
|
||||
--body-font: 0.85rem;
|
||||
--heading-font: 1.7rem;
|
||||
--heading2-font: 1.5rem;
|
||||
--heading3-font: 1.2rem;
|
||||
--subheading-font: 1rem;
|
||||
--nav-font: 0.95rem;
|
||||
/* --- LAYOUT --- */
|
||||
--navbar-height: 80px;
|
||||
--header-spacing: 120px;
|
||||
|
|
@ -65,7 +65,8 @@ [data-bs-theme=light] {
|
|||
2. BASE STYLES
|
||||
========================================= */
|
||||
body {
|
||||
font: 1rem/1.7 "Inter", sans-serif;
|
||||
font-family: "Poppins", sans-serif !important;
|
||||
line-height: 1.7;
|
||||
background-color: var(--bs-body-bg);
|
||||
color: var(--bs-body-color);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -134,13 +135,14 @@ .x-small {
|
|||
|
||||
/* Buttons Default */
|
||||
.btn {
|
||||
padding: 8px 26px;
|
||||
padding: 10px 24px;
|
||||
background-color: var(--bs-primary);
|
||||
color: var(--bs-white);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 36px;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
font-size: var(--body-font)
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
|
|
@ -156,7 +158,7 @@ .form-control {
|
|||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-width: 1px;
|
||||
font-size: 16px;
|
||||
font-size: var(--body-font);
|
||||
background-color: transparent;
|
||||
border-color: rgba(var(--inverse-color-rgb), 0.1);
|
||||
}
|
||||
|
|
@ -206,7 +208,7 @@ .fbs__net-navbar .navbar-brand .logo.light {
|
|||
.fbs__net-navbar .navbar-nav>li>.nav-link {
|
||||
position: relative;
|
||||
padding: 22px 10px;
|
||||
font-size: 0.9375rem;
|
||||
font-size: var(--nav-font);
|
||||
color: rgba(var(--inverse-color-rgb), 1);
|
||||
transition: 0.3s all ease;
|
||||
}
|
||||
|
|
@ -283,23 +285,29 @@ .subtitle {
|
|||
padding: 5px 12px;
|
||||
border-radius: 7px;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
font-size: var(--body-font);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
color: var(--bs-body-color);
|
||||
font-size: var(--subheading-font);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero__v6 .hero-title {
|
||||
font-size: 48px;
|
||||
font-size: 3rem
|
||||
}
|
||||
|
||||
@media (max-width: 1199.98px) {
|
||||
.hero__v6 .hero-title {
|
||||
font-size: 40px;
|
||||
font-size: 2.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.hero__v6 .hero-title {
|
||||
font-size: 30px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -352,9 +360,9 @@ @media (max-width: 991px) {
|
|||
5. LANDING SECTIONS
|
||||
========================================= */
|
||||
.section-buket {
|
||||
padding-top: 80px !important;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
background-color: var(--bs-gray-100);
|
||||
background-color: rgba(var(--bs-primary-rgb), 0.05);
|
||||
}
|
||||
|
||||
.section-foto {
|
||||
|
|
@ -363,68 +371,106 @@ .section-foto {
|
|||
background-color: var(--bs-white);
|
||||
}
|
||||
|
||||
/* --- TYPOGRAPHY --- */
|
||||
.buket-title,
|
||||
.foto-title {
|
||||
font-weight: 800;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
font-size: var(--heading-font);
|
||||
color: var(--bs-heading-color);
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.buket-desc,
|
||||
.foto-desc {
|
||||
color: var(--bs-body-color);
|
||||
line-height: 1.8;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 2rem;
|
||||
font-size: var(--subheading-font);
|
||||
margin-bottom: 1rem;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.buket-img,
|
||||
.foto-img {
|
||||
/* --- COLLAGE WRAPPER --- */
|
||||
.collage-wrapper {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Gambar Besar (2 buah ditumpuk) */
|
||||
.img-lg {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.buket-img:hover,
|
||||
.foto-img:hover {
|
||||
transform: scale(1.02);
|
||||
/* Gambar Sedang/Kecil (1 buah di tengah) */
|
||||
.img-md {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.buket-img.main-img {
|
||||
height: 300px;
|
||||
/* Hover Effect */
|
||||
.img-lg:hover,
|
||||
.img-md:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.buket-img.secondary-img {
|
||||
height: 250px;
|
||||
/* Responsive Fix (Mobile) */
|
||||
@media (max-width: 767.98px) {
|
||||
.collage-wrapper {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.img-lg,
|
||||
.img-md {
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.mt-n-custom {
|
||||
margin-top: -1.5rem !important;
|
||||
}
|
||||
|
||||
/* Custom Buttons */
|
||||
/* --- BUTTONS --- */
|
||||
.btn-buket,
|
||||
.btn-foto {
|
||||
background-color: var(--flo-accent);
|
||||
border: 1px solid var(--flo-accent);
|
||||
color: var(--bs-white);
|
||||
padding: 10px 30px;
|
||||
padding: 12px 24px;
|
||||
border-radius: 50px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
/* Tambahan shadow tombol */
|
||||
}
|
||||
|
||||
.btn-buket:hover,
|
||||
.btn-foto:hover {
|
||||
background-color: var(--flo-accent-hover);
|
||||
/* Warna Brick (Buket) */
|
||||
.btn-buket {
|
||||
background-color: var(--bs-brick);
|
||||
border: 1px solid var(--bs-brick);
|
||||
}
|
||||
|
||||
.btn-buket:hover {
|
||||
background-color: var(--bs-brick-hover) !important;
|
||||
border-color: var(--bs-brick-hover) !important;
|
||||
color: var(--bs-white);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px rgba(230, 99, 81, 0.3);
|
||||
/* Shadow warna brick */
|
||||
}
|
||||
|
||||
/* Warna Red (Foto) */
|
||||
.btn-foto {
|
||||
background-color: var(--bs-red);
|
||||
border: 1px solid var(--bs-red);
|
||||
}
|
||||
|
||||
.btn-foto:hover {
|
||||
background-color: var(--bs-red-hover) !important;
|
||||
border-color: var(--bs-red-hover) !important;
|
||||
color: var(--bs-white);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px rgba(220, 70, 79, 0.3);
|
||||
/* Shadow warna red */
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
6. KATALOG PAGES
|
||||
|
|
@ -439,9 +485,8 @@ .section-bookingfoto {
|
|||
.katalogbuket-title,
|
||||
.bookingfoto-title {
|
||||
font-weight: 800;
|
||||
font-size: 2rem;
|
||||
font-size: var(--heading-font);
|
||||
color: var(--bs-black);
|
||||
/* Menggunakan Black Pekat sesuai request */
|
||||
}
|
||||
|
||||
/* Search */
|
||||
|
|
@ -456,7 +501,7 @@ .katalogbuket-search-input {
|
|||
border: none;
|
||||
border-radius: 50px;
|
||||
padding: 12px 20px 12px 45px;
|
||||
font-size: 0.95rem;
|
||||
font-size: var(--body-font);
|
||||
}
|
||||
|
||||
.katalogbuket-search-input:focus {
|
||||
|
|
@ -480,10 +525,45 @@ .katalogbuket-filter-box {
|
|||
background-color: var(--bs-white);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
6. KATALOG PAGES (Update Sidebar Fonts)
|
||||
========================================= */
|
||||
|
||||
/* 1. Judul "Filter" Paling Atas */
|
||||
.katalogbuket-filter-box h5 {
|
||||
font-weight: 600 !important;
|
||||
/* Bold */
|
||||
font-size: var(--subheading-font);
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
.katalogbuket-category-list li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.katalogbuket-category-list a.active {
|
||||
color: var(--bs-black);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 3. Judul Accordion (Harga, Ukuran) */
|
||||
.katalogbuket .accordion-button {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 600 !important;
|
||||
font-size: 1rem;
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
/* Teks angka range harga (Rp 50.000 - Rp 200.000) */
|
||||
.katalogbuket-filter-box .small {
|
||||
font-weight: 500;
|
||||
font-size: var(--body-font);
|
||||
}
|
||||
|
||||
.katalogbuket-category-list a {
|
||||
text-decoration: none;
|
||||
color: var(--bs-gray-600);
|
||||
font-size: 0.95rem;
|
||||
font-size: var(--nav-font);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -492,17 +572,18 @@ .katalogbuket-category-list a {
|
|||
|
||||
.katalogbuket-category-list a:hover {
|
||||
color: var(--bs-black);
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-size {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0 !important;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--bs-gray-200);
|
||||
background-color: var(--bs-gray-100);
|
||||
color: var(--bs-gray-800);
|
||||
font-size: 0.85rem;
|
||||
font-size: var(--body-font);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -511,6 +592,7 @@ .btn-size {
|
|||
|
||||
.btn-size:hover {
|
||||
border-color: var(--bs-black);
|
||||
background-color: var(--bs-black) !important;
|
||||
}
|
||||
|
||||
.btn-size.active {
|
||||
|
|
@ -524,14 +606,15 @@ .btn-katalogbuket-dark {
|
|||
color: var(--bs-white);
|
||||
border-radius: 50px;
|
||||
padding: 10px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
border: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-katalogbuket-dark:hover {
|
||||
background-color: var(--bs-gray-800);
|
||||
background-color: var(--bs-gray-900) !important;
|
||||
border-color: var(--bs-gray-900) !important;
|
||||
color: var(--bs-white);
|
||||
}
|
||||
|
||||
|
|
@ -539,9 +622,9 @@ .btn-katalogbuket-dark:hover {
|
|||
.katalogbuket-card {
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
padding: 8px 10px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--bs-gray-200);
|
||||
border-radius: 12px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.katalogbuket-card:hover {
|
||||
|
|
@ -554,6 +637,8 @@ .katalogbuket-card .img-wrapper img {
|
|||
object-fit: cover;
|
||||
background-color: var(--bs-gray-100);
|
||||
transition: transform 0.5s ease;
|
||||
border-radius: 10px;
|
||||
|
||||
}
|
||||
|
||||
.katalogbuket-card:hover .img-wrapper img {
|
||||
|
|
@ -562,17 +647,61 @@ .katalogbuket-card:hover .img-wrapper img {
|
|||
|
||||
.katalogbuket-product-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
font-size: var(--subheading-font);
|
||||
margin-bottom: 4px;
|
||||
color: var(--bs-black);
|
||||
}
|
||||
|
||||
.katalogbuket-product-price {
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--nav-font);
|
||||
color: var(--bs-gray-600);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-pagination {
|
||||
color: var(--bs-black);
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--bs-gray-500);
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-pagination:hover {
|
||||
background-color: var(--bs-black) !important;
|
||||
/* Background jadi Teal */
|
||||
color: var(--bs-white);
|
||||
/* Teks jadi Putih */
|
||||
transform: translateY(-2px);
|
||||
/* Efek naik dikit */
|
||||
box-shadow: 0 4px 10px rgba(59, 129, 129, 0.2);
|
||||
}
|
||||
|
||||
/* 2. Angka Halaman */
|
||||
.pagination-numbers .page-number {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Hover pada angka */
|
||||
.pagination-numbers .page-number:hover {
|
||||
color: var(--bs-black);
|
||||
background-color: var(--bs-gray-100);
|
||||
}
|
||||
|
||||
/* Angka Aktif (Halaman saat ini) */
|
||||
.pagination-numbers .page-number.active {
|
||||
color: var(--bs-black);
|
||||
font-weight: 700;
|
||||
border-bottom: 2px solid var(--bs-black);
|
||||
/* Garis bawah indikator aktif */
|
||||
border-radius: 0;
|
||||
/* Biar garis bawahnya kotak */
|
||||
}
|
||||
|
||||
/* Grid Cards (Foto - Clean) */
|
||||
.bookingfoto-card {
|
||||
background: transparent;
|
||||
|
|
@ -640,26 +769,69 @@ .section-detailfoto {
|
|||
}
|
||||
|
||||
.detailbuket-title {
|
||||
font-weight: 800;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
font-size: var(--heading-font);
|
||||
color: var(--bs-heading-color);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.detailbuket-price {
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
font-size: var(--subheading-font);
|
||||
color: var(--bs-gray-800);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detailbuket-spec-label {
|
||||
font-size: var(--body-font);
|
||||
/* Pengganti style="font-size: 0.75rem" */
|
||||
font-weight: 600;
|
||||
/* Pengganti style="font-weight: 600" */
|
||||
color: var(--bs-gray-600);
|
||||
/* Pengganti class text-muted */
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Value Besar (Fresh Flowers / Medium) */
|
||||
.detailbuket-spec-val {
|
||||
font-weight: 600;
|
||||
/* Pengganti class fw-bold */
|
||||
color: black;
|
||||
font-size: var(--body-font);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Garis Pemisah Vertical Custom */
|
||||
.detailbuket-vr {
|
||||
width: 1px;
|
||||
height: 35px;
|
||||
/* Pengganti style="height: 35px" */
|
||||
background-color: var(--bs-gray-400);
|
||||
/* Warna abu */
|
||||
opacity: 0.5;
|
||||
margin: 0 1.5rem;
|
||||
/* Memberi jarak kiri-kanan otomatis */
|
||||
}
|
||||
|
||||
.detailbuket-desc {
|
||||
font-size: var(--nav-font);
|
||||
font-weight: 400;
|
||||
line-height: 1.7;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.detailbuket-note {
|
||||
font-size: var(--body-font);
|
||||
line-height: 1.7;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* Image Frame */
|
||||
.detailbuket-img-frame {
|
||||
background-color: var(--bs-white);
|
||||
background-color: transparent;
|
||||
padding: 15px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid var(--bs-gray-200);
|
||||
}
|
||||
|
||||
.detailbuket-img-frame img {
|
||||
|
|
@ -813,9 +985,9 @@ .btn-detailfoto-primary {
|
|||
background-color: var(--bs-primary);
|
||||
border: 1px solid var(--bs-primary);
|
||||
color: var(--bs-white);
|
||||
padding: 12px 30px;
|
||||
padding: 12px 24px;
|
||||
border-radius: 50px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
transition: all 0.3s;
|
||||
|
|
@ -833,9 +1005,9 @@ .btn-detailfoto-outline {
|
|||
background-color: var(--bs-white);
|
||||
border: 1px solid #dee2e6;
|
||||
color: var(--bs-primary);
|
||||
padding: 12px 30px;
|
||||
padding: 12px 24px;
|
||||
border-radius: 50px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -858,11 +1030,34 @@ .section-formulirfoto {
|
|||
|
||||
.formulirbuket-page-title,
|
||||
.formulirfoto-page-title {
|
||||
font-weight: 800;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
font-size: var(--heading-font);
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
.formulirbuket-section-title,
|
||||
.formulirfoto-section-title {
|
||||
font-weight: 600;
|
||||
font-size: var(--heading3-font);
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
|
||||
.formulirbuket-section h6,
|
||||
.formulirfoto-section h6 {
|
||||
font-weight: 600;
|
||||
font-size: var(--nav-font);
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
.formulirbuket-section p,
|
||||
.formulirfoto-section p {
|
||||
font-weight: 500;
|
||||
font-size: var(--nav-font);
|
||||
color: var(--bs-gray-700) !important;
|
||||
}
|
||||
|
||||
|
||||
/* Inputs & Cards */
|
||||
.formulirbuket-input,
|
||||
.formulirfoto-input {
|
||||
|
|
@ -879,6 +1074,34 @@ .formulirfoto-input:focus {
|
|||
box-shadow: 0 0 0 4px rgba(59, 129, 129, 0.1);
|
||||
}
|
||||
|
||||
.formulirbuket-payment-box h5 {
|
||||
font-weight: 600;
|
||||
color: var(--bs-black);
|
||||
font-size: var(--subheading-font);
|
||||
}
|
||||
|
||||
.formulirbuket-payment-box .text-muted {
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
color: var(--bs-gray-600) !important;
|
||||
}
|
||||
|
||||
/* 3. Teks Instruksi ("Transfer ke Rekening Berikut", "Upload Bukti") */
|
||||
.formulirbuket-payment-box p.small {
|
||||
font-weight: 600;
|
||||
/* Bold */
|
||||
color: var(--bs-heading-color);
|
||||
font-size: var(--subheading-font);
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.formulirbuket-payment-box .d-flex.justify-content-between.mb-4 {
|
||||
border-bottom: 1px solid var(--bs-gray-300);
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.formulirfoto-card,
|
||||
.formulirfoto-payment-box,
|
||||
.formulirbuket-product-summary {
|
||||
|
|
@ -889,7 +1112,7 @@ .formulirbuket-product-summary {
|
|||
}
|
||||
|
||||
.formulirbuket-product-summary {
|
||||
padding: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.formulirbuket-product-summary img {
|
||||
|
|
@ -909,7 +1132,7 @@ .formulirfoto-bank-card {
|
|||
|
||||
.formulirbuket-upload-area,
|
||||
.formulirfoto-upload-area {
|
||||
border: 2px dashed var(--bs-gray-300);
|
||||
border: 1.5px dashed var(--bs-gray-300);
|
||||
border-radius: 12px;
|
||||
background-color: var(--bs-gray-100);
|
||||
transition: all 0.3s;
|
||||
|
|
@ -921,7 +1144,89 @@ .formulirfoto-upload-area:hover {
|
|||
background-color: var(--bs-gray-200);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.formulirbuket-upload-area i {
|
||||
font-size: 2rem;
|
||||
color: var(--bs-gray-400);
|
||||
margin-bottom: 5px;
|
||||
display: inline-block;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.formulirbuket-upload-area p.small {
|
||||
font-weight: 600;
|
||||
color: var(--bs-gray-600) !important;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.formulirbuket-upload-area p.x-small {
|
||||
color: var(--bs-gray-500) !important;
|
||||
font-size: var(--body-font);
|
||||
}
|
||||
|
||||
p.x-small.text-muted.mb-4 {
|
||||
font-size: var(--body-font);
|
||||
color: var(--bs-gray-600) !important;
|
||||
margin-top: 10px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.bank-num {
|
||||
font-weight: 700;
|
||||
font-size: var(--nav-font) !important;
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
.bank-name {
|
||||
font-weight: 500;
|
||||
font-size: var(--body-font) !important;
|
||||
color: var(--bs-gray-600);
|
||||
}
|
||||
|
||||
.form-label.small {
|
||||
font-weight: 600;
|
||||
color: var(--bs-heading-color);
|
||||
font-size: var(--subheading-font);
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.formulirbuket-input {
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--bs-gray-300);
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
font-size: 0.95rem;
|
||||
color: var(--bs-body-color);
|
||||
width: 100%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.formulirbuket-input:focus {
|
||||
background-color: #fff;
|
||||
border-color: var(--bs-gray-500);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.formulirbuket-input::placeholder {
|
||||
color: var(--bs-gray-600);
|
||||
/* Abu muda */
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
textarea.formulirbuket-input {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
input[type="date"].formulirbuket-input,
|
||||
input[type="time"].formulirbuket-input {
|
||||
cursor: pointer;
|
||||
color: var(--bs-gray-600);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.formulirbuket-btn-submit,
|
||||
.formulirfoto-btn-submit {
|
||||
background-color: var(--bs-primary);
|
||||
|
|
@ -930,7 +1235,7 @@ .formulirfoto-btn-submit {
|
|||
padding: 12px;
|
||||
border-radius: 50px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.formulirbuket-btn-submit:hover,
|
||||
|
|
@ -953,21 +1258,24 @@ .formulirfoto-btn-cancel {
|
|||
.formulirbuket-btn-cancel:hover,
|
||||
.formulirfoto-btn-cancel:hover {
|
||||
background-color: var(--bs-gray-100);
|
||||
color: var(--bs-gray-800);
|
||||
color: var(--bs-white);
|
||||
}
|
||||
|
||||
|
||||
/* =========================================
|
||||
9. FAQ SECTION (Fixes)
|
||||
========================================= */
|
||||
.faq__v2 {
|
||||
background-color: rgba(var(--inverse-color-rgb), 0.02);
|
||||
|
||||
.faq__v2 h2 {
|
||||
font-weight: 600;
|
||||
font-size: 1.7rem;
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
.faq__v2 .subtitle {
|
||||
background-color: rgba(var(--bs-secondary-rgb), 0.2);
|
||||
color: var(--bs-primary);
|
||||
padding: 5px 12px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 7px;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -975,17 +1283,18 @@ .faq__v2 .subtitle {
|
|||
|
||||
.faq__v2 .custom-accordion .accordion-item {
|
||||
border: none;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
transition: 0.3s all ease-in-out;
|
||||
border: 1px solid var(--bs-gray-200);
|
||||
}
|
||||
|
||||
.faq__v2 .custom-accordion .accordion-button {
|
||||
font-size: 18px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--bs-heading-color);
|
||||
padding: 20px;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -997,7 +1306,7 @@ .faq__v2 .custom-accordion .accordion-button:focus {
|
|||
|
||||
.faq__v2 .custom-accordion .accordion-button:not(.collapsed) {
|
||||
background-color: transparent;
|
||||
color: var(--bs-primary);
|
||||
color: black;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
|
@ -1006,7 +1315,7 @@ .faq__v2 .custom-accordion .accordion-button:not(.collapsed) {
|
|||
.faq__v2 .custom-accordion .accordion-button::after {
|
||||
content: "\f4fe";
|
||||
font-family: "bootstrap-icons";
|
||||
color: var(--bs-primary);
|
||||
color: black;
|
||||
font-size: 30px;
|
||||
background-image: none;
|
||||
transform: rotate(0deg);
|
||||
|
|
@ -1029,6 +1338,14 @@ .footer {
|
|||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.footer-menu li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer-menu li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.footer-menu a {
|
||||
color: var(--bs-black);
|
||||
text-decoration: none;
|
||||
|
|
@ -1043,6 +1360,27 @@ .copyright-bar {
|
|||
color: var(--bs-white);
|
||||
}
|
||||
|
||||
/* --- SOCIAL ICONS --- */
|
||||
.social-icon {
|
||||
font-size: 1.2rem;
|
||||
color: var(--bs-heading-color);
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.social-icon:hover {
|
||||
color: var(--bs-heading-color);
|
||||
background-color: var(--bs-white);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
visibility: hidden;
|
||||
|
|
|
|||
Loading…
Reference in New Issue