/* ================================================================
base.css — pecahan dari style.css
Fondasi: custom property (warna/font/radius), reset, garis aksen atas,
kelas utilitas, komponen tombol, navbar & menu mobile.
URUTAN PEMUATAN PENTING. CSS bersifat cascade, dan file-file ini
dipotong BERURUTAN dari satu file besar, jadi di HTML harus
tetap urut: base -> home -> sections -> responsive ->
data-sections -> article. Menukar urutannya akan mengubah tampilan.
================================================================ */
/* ================================================================
style.css — PBJ Community Website
Design System: RACING POWER — Bold Orange + Deep Black
"Built for Mama & Papa Racing"
================================================================ */
/* ----------------------------------------------------------------
GOOGLE FONTS
Font (Inter, Space Grotesk, Barlow Condensed) di-load lewat SATU
di index.html. Dulu ada @import di sini juga yang
memuat font YANG SAMA — browser jadi request font dua kali (dobel
network round-trip, lebih lambat). Sudah dihapus; kalau butuh ganti
berat/keluarga font, edit di index.html, bukan di sini.
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
CSS CUSTOM PROPERTIES (VARIABLES)
---------------------------------------------------------------- */
:root {
/* === WARNA UTAMA — Bright & Cheerful (cream hangat + putih) === */
--clr-bg: #fff7ef; /* Latar utama — cream hangat, ceria & ramah */
--clr-bg-2: #fff0e2; /* Background section selang-seling, sedikit lebih hangat */
--clr-bg-card: #fffaf2; /* Kartu putih gading (ivory hangat) — lembut, tak menyilaukan */
--clr-surface: rgba(28,43,74,0.05); /* Isian halus (input, chip) di latar terang */
--clr-border: rgba(28,43,74,0.12); /* Garis tepi lembut di latar terang */
--clr-border-hot: rgba(255,107,0,0.35);
/* === WARNA ACCENT — PBJ Racing Orange === */
--clr-orange: #ff6b00; /* Oranye utama — PBJ logo */
--clr-orange-lt: #e85d00; /* Oranye pekat untuk TEKS di latar terang (kontras cukup) */
--clr-orange-dk: #cc5500; /* Oranye gelap */
--clr-amber: #ffb347; /* Amber/emas untuk highlight */
--clr-red: #e8002d; /* Merah aksen */
--clr-accent: var(--clr-orange);
/* === Warna ceria pendukung (dari logo & aksen playful) === */
--clr-navy: #1c2b4a; /* Navy dari logo — heading & teks utama */
--clr-sky: #1aa9c9; /* Biru langit — sentuhan ceria */
--clr-green: #17a866; /* Hijau segar */
--clr-purple: #7c5cff; /* Ungu playful */
/* Gradients utama */
--gradient-fire: linear-gradient(135deg, #e8002d 0%, #ff6b00 50%, #ffb347 100%);
--gradient-orange: linear-gradient(135deg, #ff6b00 0%, #ffb347 100%);
--gradient-hot: linear-gradient(135deg, #ff5a00 0%, #ff7d1a 60%, #ff9d3c 100%);
--gradient-hero: linear-gradient(135deg, rgba(255,107,0,0.12) 0%, rgba(232,0,45,0.06) 50%, transparent 100%);
--gradient-card: linear-gradient(145deg, rgba(255,107,0,0.05) 0%, rgba(255,107,0,0.02) 100%);
/* === WARNA TEKS === */
--clr-text: #26324a; /* Body — navy-abu gelap, mudah dibaca & terpercaya */
--clr-text-muted: #5f6d84; /* Teks sekunder */
--clr-text-dim: #94a0b3; /* Teks tersier */
--clr-white: #ffffff; /* Untuk teks DI ATAS oranye/gelap */
--clr-heading: #1c2b4a; /* Warna judul (navy) */
/* === FONT === */
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--font-heading: 'Space Grotesk', 'Inter', sans-serif;
--font-racing: 'Barlow Condensed', 'Inter', sans-serif; /* Font racing untuk judul besar */
/* === BORDER RADIUS === */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px;
/* === SHADOW ===
Nilai di sini pakai navy brand (28,43,74) yang di-alpha rendah, BUKAN
hitam pekat. Alasannya: situs ini berlatar krem terang, dan bayangan
hitam ber-alpha tinggi (versi lama memakai 0.4-0.7) tidak terbaca
sebagai bayangan di latar terang — yang terlihat justru noda abu-abu
tebal mengelilingi tiap kartu. Nilai hitam pekat itu wajar hanya di
atas latar gelap; yang masih memakainya di file lain sengaja
dibiarkan karena memang berada di dalam overlay gelap (lightbox &
modal event). */
--shadow-card: 0 6px 20px rgba(28,43,74,0.10), 0 1px 3px rgba(28,43,74,0.06);
--shadow-glow: 0 0 40px rgba(255,107,0,0.16), 0 8px 24px rgba(28,43,74,0.12);
--shadow-glow-sm: 0 0 20px rgba(255,107,0,0.3);
--shadow-orange: 0 4px 24px rgba(255,107,0,0.4);
--shadow-navbar: 0 2px 14px rgba(28,43,74,0.08), 0 1px 0 rgba(255,107,0,0.1);
/* === TRANSISI === */
--transition-fast: 0.15s ease;
--transition-normal: 0.25s ease;
--transition-slow: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
/* === SPACING === */
--section-py: clamp(64px, 10vw, 120px);
}
/* ----------------------------------------------------------------
RESET & BASE STYLES
---------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
}
body {
font-family: var(--font-body);
background-color: var(--clr-bg);
color: var(--clr-text);
line-height: 1.65;
overflow-x: hidden;
min-height: 100vh;
}
/* Racing texture overlay — subtle speed lines on body */
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
repeating-linear-gradient(
-45deg,
transparent,
transparent 60px,
rgba(255,107,0,0.012) 60px,
rgba(255,107,0,0.012) 61px
);
pointer-events: none;
z-index: 0;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--clr-heading); }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--font-body); cursor: pointer; border: none; }
/* ----------------------------------------------------------------
RACING STRIPE ACCENT — Global top accent line
---------------------------------------------------------------- */
body::after {
content: '';
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gradient-fire);
z-index: 9999;
box-shadow: 0 0 20px rgba(255,107,0,0.8), 0 0 40px rgba(255,107,0,0.4);
}
/* ----------------------------------------------------------------
UTILITY CLASSES
---------------------------------------------------------------- */
/* Atribut hidden HTML harus SELALU menang, termasuk atas elemen yang
punya display:flex/grid sendiri. Tanpa ini, elemen ber-atribut hidden
bisa tetap tampil (bug kelas ini pernah terjadi pada .view-toggle). */
[hidden] { display: none !important; }
.container {
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding-inline: clamp(16px, 4vw, 48px);
position: relative;
z-index: 1;
}
/* Kerangka section generik: dipakai section baru (#events, #instagram,
#faq) lewat class="section" supaya jarak vertikal & offset anchor
terhadap navbar konsisten tanpa menyalin dua deklarasi ini. */
.section {
padding-block: var(--section-py);
}
/* Offset anchor untuk SEMUA section ber-id (#schedule, #map, #info, #manfaat,
#pengurus, #galeri, #events, #register, #faq). Navbar itu position:fixed
setinggi ±75px, jadi tanpa ini judul section yang dituju link tertutup
navbar. Sebelumnya offset ini cuma menempel di .section, padahal sebagian
besar section beranda memakai class-nya sendiri (.schedule, .map-section,
.info-section, ...) sehingga tidak kebagian — baru terlihat setelah link
antar halaman ke section beranda diperbaiki. Memakai section[id] supaya
section ber-id yang dibuat nanti otomatis ikut benar. */
section[id] {
scroll-margin-top: 80px;
}
.section-header {
text-align: center;
margin-bottom: 56px;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,107,0,0.12);
border: 1px solid rgba(255,107,0,0.35);
color: var(--clr-orange-lt);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 7px 18px;
border-radius: var(--radius-full);
margin-bottom: 20px;
backdrop-filter: blur(8px);
}
.section-badge i { color: var(--clr-orange); }
.section-title {
font-family: var(--font-racing);
font-size: clamp(2.2rem, 5vw, 3.5rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: 0.01em;
text-transform: uppercase;
margin-bottom: 16px;
}
.section-subtitle {
font-size: 1.05rem;
color: var(--clr-text-muted);
max-width: 580px;
margin-inline: auto;
}
/* ----------------------------------------------------------------
BUTTON COMPONENTS
---------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 30px;
border-radius: var(--radius-full);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: transform var(--transition-normal),
box-shadow var(--transition-normal),
opacity var(--transition-fast);
border: none;
font-family: inherit;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0); }
/* Primary — blazing orange */
.btn--primary {
background: var(--gradient-hot);
color: var(--clr-white);
box-shadow: 0 4px 24px rgba(255,107,0,0.45), 0 0 0 0 rgba(255,107,0,0.3);
animation: pulse-btn 3s ease-in-out infinite;
}
.btn--primary:hover {
box-shadow: 0 8px 40px rgba(255,107,0,0.65), 0 0 60px rgba(255,107,0,0.2);
}
@keyframes pulse-btn {
0%, 100% { box-shadow: 0 4px 24px rgba(255,107,0,0.45), 0 0 0 0 rgba(255,107,0,0.3); }
50% { box-shadow: 0 4px 24px rgba(255,107,0,0.6), 0 0 40px rgba(255,107,0,0.15); }
}
/* Ghost — glass outline */
.btn--ghost {
background: var(--clr-surface);
color: var(--clr-text);
border: 1.5px solid var(--clr-border);
backdrop-filter: blur(8px);
}
.btn--ghost:hover {
border-color: var(--clr-orange);
color: var(--clr-orange-lt);
background: rgba(255,107,0,0.08);
}
.btn--full { width: 100%; justify-content: center; }
/* ----------------------------------------------------------------
NAVBAR
---------------------------------------------------------------- */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 0 clamp(16px, 4vw, 48px);
transition: background var(--transition-normal), box-shadow var(--transition-normal);
margin-top: 3px; /* offset top racing stripe */
}
.navbar--scrolled {
background: rgba(255,247,239,0.9);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow: var(--shadow-navbar);
border-bottom: 1px solid var(--clr-border);
}
.navbar__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
max-width: 1200px;
margin-inline: auto;
}
/* Logo */
.navbar__logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo-img {
width: 40px; height: 40px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 16px rgba(255,107,0,0.6), 0 0 0 2px rgba(255,107,0,0.3);
flex-shrink: 0;
transition: box-shadow var(--transition-normal);
}
.logo-img:hover {
box-shadow: 0 0 28px rgba(255,107,0,0.9), 0 0 0 2px rgba(255,107,0,0.5);
}
.logo-img--sm { width: 36px; height: 36px; }
.logo-text {
font-family: var(--font-racing);
font-size: clamp(1.05rem, 2vw, 1.4rem);
font-weight: 900;
/* Navy solid (warna logo & judul section), BUKAN gradient oranye:
gradient oranye tenggelam di latar krem/oranye sehingga sulit dibaca */
color: var(--clr-navy);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
}
/* Nav links */
.navbar__nav {
display: flex;
align-items: center;
gap: 4px;
}
.nav-link {
padding: 8px 16px;
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 600;
color: var(--clr-text-muted);
transition: color var(--transition-fast), background var(--transition-fast);
letter-spacing: 0.02em;
}
.nav-link:hover { color: var(--clr-heading); background: rgba(28,43,74,0.06); }
.nav-link--cta {
background: var(--gradient-hot);
color: var(--clr-white) !important;
box-shadow: 0 2px 16px rgba(255,107,0,0.4);
margin-left: 8px;
text-transform: uppercase;
font-size: 0.82rem;
letter-spacing: 0.04em;
/* Label CTA berisi 2-3 kata. Tanpa nowrap ia pecah jadi beberapa baris
begitu ruang navbar menyempit, dan pill-nya meninggi 2-3x sehingga
navbar ikut melar. Lebih baik teks tetap satu baris; penyempitan
padding/font untuk layar sedang ditangani di responsive.css. */
white-space: nowrap;
}
.nav-link--cta:hover {
box-shadow: 0 4px 28px rgba(255,107,0,0.65);
background: var(--gradient-fire);
}
/* Hamburger */
.navbar__hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
padding: 8px;
}
.navbar__hamburger span {
display: block;
width: 24px; height: 2px;
background: var(--clr-orange);
border-radius: 2px;
transition: transform var(--transition-normal), opacity var(--transition-normal);
}
.navbar__hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar__hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile menu */
.mobile-menu {
display: none;
flex-direction: column;
gap: 0;
max-height: 0;
overflow: hidden;
background: rgba(255,247,239,0.98);
backdrop-filter: blur(24px);
border-top: 1px solid rgba(255,107,0,0.2);
transition: max-height 0.35s ease;
}
/* Tinggi menu mobile mengikuti sisa layar di bawah navbar, BUKAN angka tetap.
Sebelumnya max-height dipatok 400px — pas untuk 8 item, tapi begitu menu
berisi 11 item (±50px per item = ±550px) tiga item terakhir terpotong dan,
karena overflow: hidden, sama sekali tidak bisa diklik: Galeri, Event, dan
CTA "Daftar Trial Class". Sekarang sisanya bisa di-scroll, dan menu apa pun
panjangnya tetap terjangkau di layar sependek apa pun.
dvh (dynamic viewport height) dipakai setelah vh sebagai penyempurna:
di HP, bilah alamat browser menyusut/membesar saat scroll dan vh tidak
ikut menyesuaikan, sedangkan dvh iya. Browser lama mengabaikan baris dvh
dan tetap memakai vh di atasnya. */
.mobile-menu.open {
max-height: calc(100vh - 75px);
max-height: calc(100dvh - 75px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-nav-link {
padding: 16px 24px;
font-size: 1rem;
font-weight: 600;
color: var(--clr-text-muted);
border-bottom: 1px solid var(--clr-surface);
transition: color var(--transition-fast), background var(--transition-fast), padding-left var(--transition-fast);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.9rem;
}
.mobile-nav-link:hover { color: var(--clr-orange-lt); background: rgba(255,107,0,0.06); padding-left: 32px; }
.mobile-nav-link--cta { color: var(--clr-orange) !important; font-weight: 800; }