/* ==========================================================================
SIG123 Refresh — CSS Override Modern (DRAFT untuk review)
--------------------------------------------------------------------------
Cara pakai: panggil SETELAH styles.css di , contoh:
Catatan:
- TIDAK mengubah struktur HTML/PHP/form/logika. Flow tetap 100% sama.
- Berbasis tema korporat navy (#051831 / #002247) + aksen emas modern.
- Selector spesifik agar tidak bentrok dengan tema Rethouse lama.
========================================================================== */
/* ------------------------------------------------------------------
1. VARIABEL TEMA (CSS variables — aman, didukung semua browser modern)
------------------------------------------------------------------ */
:root {
--sig-navy: #051831;
--sig-navy-2: #0c2f5c;
--sig-blue: #3454d1;
--sig-gold: #c9a227;
--sig-gold-dark: #a8841d;
--sig-gold-light: #e6c65a;
--sig-bg-soft: #f7f9fc;
--sig-text: #1c2530;
--sig-text-muted: #6b7785;
--sig-radius: 14px;
--sig-shadow: 0 10px 30px rgba(5, 24, 49, 0.08);
--sig-shadow-hover: 0 18px 45px rgba(5, 24, 49, 0.16);
--sig-border: #e6ebf2;
}
/* ------------------------------------------------------------------
2. BASE — tipografi & warna umum
------------------------------------------------------------------ */
body {
color: var(--sig-text);
background-color: #ffffff;
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
font-size: 15px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
/* Warna seleksi teks */
::selection {
background: var(--sig-gold-light);
color: var(--sig-navy);
}
h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
color: var(--sig-navy);
line-height: 1.35;
letter-spacing: -0.01em;
}
/* Judul section terasa lebih presisi */
.title__head-v2 h5,
.title__head h5 {
font-size: 22px;
font-weight: 700;
letter-spacing: 0.3px;
color: var(--sig-navy);
}
/* ------------------------------------------------------------------
3. TOMBOL AKTIF — satu aksen emas modern (menggantikan darkgoldenrod & #996a57)
- pakai !important agar menang atas background-color inline lama
------------------------------------------------------------------ */
.btn-primary,
button.btn-sm.btn-primary,
button[type="submit"].btn-primary,
button.btn-block,
button[style*="996a57"],
button[style*="darkgoldenrod"] {
background: linear-gradient(135deg, var(--sig-gold) 0%, var(--sig-gold-dark) 100%) !important;
border: none !important;
color: #ffffff !important;
border-radius: 10px !important;
box-shadow:
0 1px 2px rgba(5, 24, 49, 0.08),
0 4px 12px rgba(201, 162, 39, 0.25) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary:hover,
button.btn-sm.btn-primary:hover,
button[type="submit"].btn-primary:hover,
button.btn-block:hover,
button[style*="996a57"]:hover,
button[style*="darkgoldenrod"]:hover {
background: linear-gradient(135deg, var(--sig-gold-light) 0%, var(--sig-gold) 100%) !important;
color: #ffffff !important;
filter: brightness(1.03);
box-shadow:
0 1px 2px rgba(5, 24, 49, 0.08),
0 8px 20px rgba(201, 162, 39, 0.35) !important;
transform: translateY(-2px);
}
.btn-primary:active,
button.btn-sm.btn-primary:active,
button.btn-block:active {
transform: translateY(0);
box-shadow: none !important;
}
/* ------------------------------------------------------------------
4. KARTU PROPERTI — shadow lembut + rounded + hover lift
------------------------------------------------------------------ */
.card__image {
border-radius: 14px;
border: 1px solid var(--sig-border);
box-shadow:
0 1px 2px rgba(5, 24, 49, 0.04),
0 6px 18px rgba(5, 24, 49, 0.06);
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.card__image:hover {
transform: translateY(-6px);
box-shadow:
0 2px 4px rgba(5, 24, 49, 0.06),
0 16px 36px rgba(5, 24, 49, 0.12);
}
.card__image img.img-transition {
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.card__image:hover img.img-transition {
transform: scale(1.05);
}
/* Kartu di area listing (card__box-v1) */
.card__image.card__box-v1 {
border-radius: 14px;
box-shadow:
0 1px 2px rgba(5, 24, 49, 0.04),
0 6px 18px rgba(5, 24, 49, 0.06);
}
/* ------------------------------------------------------------------
5. RIBBON "Ready Now" / "Jual" / "Sewa" — rapi & modern
------------------------------------------------------------------ */
.card__image__header .ribbon,
.ribbon {
background: linear-gradient(135deg, var(--sig-blue) 0%, #1d3f9e 100%);
color: #ffffff;
font-weight: 600;
letter-spacing: 0.5px;
border-radius: 6px;
box-shadow: 0 3px 10px rgba(52, 84, 209, 0.3);
}
/* ------------------------------------------------------------------
6. BADGE kategori
------------------------------------------------------------------ */
.badge.badge-primary {
background: linear-gradient(135deg, var(--sig-blue) 0%, #1d3f9e 100%);
color: #ffffff;
border-radius: 6px;
padding: 0.45em 0.7em;
font-weight: 600;
}
/* ------------------------------------------------------------------
7. FORM FILTER & SEARCH — input membulat & fokus biru
------------------------------------------------------------------ */
select.form-control,
input.form-control,
.form-control {
border-radius: 8px;
border: 1px solid var(--sig-border);
background-color: #ffffff;
color: var(--sig-text);
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
select.form-control:focus,
input.form-control:focus,
.form-control:focus {
border-color: var(--sig-blue);
box-shadow: 0 0 0 3px rgba(52, 84, 209, 0.14);
outline: none;
}
/* Label filter di header */
#form-label,
.col-form-label {
color: #ffffff;
font-weight: 600;
letter-spacing: 0.3px;
}
/* ------------------------------------------------------------------
8. HERO & HEADER (index.php) — overlay navy modern + judul tegas
------------------------------------------------------------------ */
/* Header hero index:
- PENTING: PERTAHANKAN background-image sofa (bg7.jpg) dari .bg-theme-v5.
- Hanya beri tint navy semi-transparan lewat .bg-overlay yang sudah ada,
jadi foto sofa tetap terlihat & latar terasa lebih modern.
- TIDAK menimpa `background`/`background-image` header. */
header.jumbotron.bg-theme-v5 {
background-color: transparent !important;
}
header.jumbotron.bg-theme-v5 .bg-overlay {
background: linear-gradient(180deg, rgba(5, 24, 49, 0.72) 0%, rgba(5, 24, 49, 0.35) 100%) !important;
}
/* Baris bawah/garis aksen emas pada header */
header.jumbotron.bg-theme-v5 {
border-bottom: 3px solid var(--sig-gold);
}
/* Judul hero */
.wrap__intro-heading h1 {
color: #ffffff !important;
letter-spacing: 0.4px;
font-weight: 700;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}
/* Kotak pencarian di hero: lebih premium & membulat */
.bg__overlay-black {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 18px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.2),
0 24px 50px rgba(0, 0, 0, 0.3);
}
/* Tab JUAL / SEWA / INTERIOR */
.home .nav-tabs-02 .nav-link:not(.active),
.wrap__intro .nav-tabs-02 .nav-link {
color: #dbe4ff !important;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.wrap__intro .nav-tabs-02 .nav-link.active {
background: var(--sig-gold) !important;
color: #ffffff !important;
border-color: var(--sig-gold);
box-shadow: 0 6px 14px rgba(201, 162, 39, 0.35);
}
/* ------------------------------------------------------------------
9. NAVBAR — link putih bersih, tetap transparan supaya foto sofa
di hero terlihat. (Overlay gelap disediakan oleh .bg-overlay header)
------------------------------------------------------------------ */
/* Navbar melekat di atas saat scroll + latar semi-transparan agar link
putih tetap terbaca saat konten lewat di belakangnya */
.navbar-soft,
.navbar.navbar-hover.navbar-soft {
background-color: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
position: sticky;
top: 0;
z-index: 1030;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* Saat halaman discroll, beri latar navy solid supaya navbar tetap terbaca */
.navbar-soft.navbar-scrolled,
.navbar.navbar-hover.navbar-soft.navbar-scrolled {
background-color: rgba(5, 24, 49, 0.92) !important;
box-shadow: 0 4px 20px rgba(5, 24, 49, 0.35);
}
.navbar-soft .nav-link,
.navbar .nav-link {
color: #ffffff !important;
font-weight: 500;
}
.navbar-soft .nav-link:hover {
color: var(--sig-gold-light) !important;
}
/* ------------------------------------------------------------------
10. JUDUL SECTION — garis aksen emas di bawah
------------------------------------------------------------------ */
.title__head-v2 h5::after,
.title__head h5::after,
.detail-heading::after {
content: "";
display: block;
width: 46px;
height: 3px;
margin-top: 8px;
border-radius: 3px;
background: linear-gradient(90deg, var(--sig-gold), var(--sig-gold-light));
}
/* ------------------------------------------------------------------
11. FOOTER — latar navy-2 lebih modern
------------------------------------------------------------------ */
.bg__footer,
.wrapper__footer.bg__footer {
background: linear-gradient(180deg, var(--sig-navy-2) 0%, var(--sig-navy) 100%) !important;
border-top: 3px solid var(--sig-gold);
}
.footer-title {
color: #ffffff !important;
}
.bg__footer p,
.bg__footer h4 {
color: #dce4f1 !important;
}
/* ------------------------------------------------------------------
12. BORDER-RADIUS MENYELURUH — jangan ada elemen yang terlalu kotak
Berlaku untuk index.php + semua halaman yang memuat refresh.css
(Kartu properti memakai radius 14px dari bagian 4 — di sini hanya
elemen-elemen kecil/UI yang dipaksa lembut)
------------------------------------------------------------------ */
/* Tombol — semua varian (btn-primary memakai 10px dari bagian 3) */
.btn,
.btn-sm,
.btn-block,
.btn-outline-success,
.btn-outline-secondary,
.btn-light,
button,
input[type="submit"],
input[type="button"] {
border-radius: 5px !important;
}
/* Input & select */
.form-control,
select.form-control,
input.form-control,
textarea.form-control,
.input-group-text {
border-radius: 5px !important;
}
/* Tab JUAL / SEWA / INTERIOR */
.nav-tabs-02 .nav-link,
.nav-tabs .nav-link {
border-radius: 5px !important;
}
/* Badge kategori & ribbon */
.badge,
.badge-primary,
.ribbon {
border-radius: 5px !important;
}
/* Kotak pencarian / overlay / box putih */
.bg__overlay-black,
.search__container,
.search-box,
.btn-group,
.btn-toolbar,
.panel,
.well,
.thumbnail,
.img-thumbnail {
border-radius: 5px !important;
}
/* Filter & widget di listing */
.filter__search,
.widget__footer,
.widget__form-newsletter,
.link__category {
border-radius: 5px !important;
}
/* Dropdown menu */
.dropdown-menu {
border-radius: 5px !important;
}
/* Scroll to top */
#return-to-top {
border-radius: 5px !important;
}
/* Table & konten umum */
.table,
.table-bordered,
.table-striped {
border-radius: 5px !important;
}
/* ------------------------------------------------------------------
13. REFINEMENT — karakter lebih lembut, premium & hidup
------------------------------------------------------------------ */
/* Section spacing lebih lega */
section {
padding: 72px 0;
}
.recent__property {
padding: 72px 0;
}
@media screen and (min-width: 320px) and (max-width: 575px) {
section,
.recent__property {
padding: 48px 0;
}
}
/* Heading section dengan jarak lebih baik */
.title__head-v2 {
margin-bottom: 28px;
}
/* Kartu properti: konten lebih lega */
.card__image-body {
padding: 18px 20px;
}
.card-footer {
padding: 14px 20px;
border-top: 1px solid var(--sig-border);
background: #fbfcfe;
}
/* Harga & teks di kartu lebih jelas */
.card-footer h6 {
font-weight: 700;
color: var(--sig-navy);
}
.card__image-body h6 a {
color: var(--sig-navy);
font-weight: 700;
transition: color 0.2s ease;
}
.card__image-body h6 a:hover {
color: var(--sig-blue);
text-decoration: none;
}
/* Tab filter hero: transisi halus */
.wrap__intro .nav-tabs-02 .nav-link {
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.wrap__intro .nav-tabs-02 .nav-link:hover {
transform: translateY(-1px);
}
/* Focus ring global — keyboard users tetap terlihat */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid rgba(52, 84, 209, 0.55);
outline-offset: 2px;
}
/* Navbar: transisi sudah ada, tambah dukungan reduced motion */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}