/* ============================================= MAIN.CSS - Coffee Kur (Kopi Untuk Rakyat) Tema: Grand Café Eropa — espresso gelap, brass tua, marmer gading, aksen bordeaux. Motif tanda tangan: garis-belah ketupat emas (gold flourish rule) pada setiap heading & pembatas section. ============================================= */ /* Font: Cormorant Garamond, Libre Baskerville & Poppins sudah dimuat lewat (includes/header.php) — tidak perlu @import tambahan. */ :root { --coffee-dark: #241510; /* espresso hampir hitam */ --coffee: #4a2c1a; /* kayu walnut gelap */ --coffee-light: #7a5233; /* walnut hangat */ --caramel: #b8863d; /* brass / emas tua */ --caramel-light: #dcb570; /* champagne gold */ --wine: #5c1a22; /* bordeaux, aksen sekunder */ --cream: #f7f0e3; /* marmer gading */ --cream-soft: #efe0c4; --ink: #241811; --ink-soft: rgba(36, 24, 17, 0.72); --white: #fffdf9; --radius: 6px; --radius-sm: 3px; --tracking: 0.09em; --shadow-soft: 0 10px 28px rgba(36, 21, 12, 0.14); --shadow-hover: 0 20px 44px rgba(36, 21, 12, 0.26); --gold-line: linear-gradient(90deg, transparent, var(--caramel) 12%, var(--caramel) 36%, transparent 43%, transparent 57%, var(--caramel) 64%, var(--caramel) 88%, transparent); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Poppins", sans-serif; color: var(--ink); background-color: var(--cream); background-image: radial-gradient(ellipse at top, rgba(184, 134, 61, 0.05), transparent 55%), repeating-linear-gradient(135deg, rgba(74, 44, 26, 0.025) 0px, rgba(74, 44, 26, 0.025) 1px, transparent 1px, transparent 5px); overflow-x: hidden; } .cormorant-garamond { font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: 900 !important; font-style: normal; } a { color: var(--caramel); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--coffee-dark); } /** Headings **/ h1, h2, h3 { color: var(--coffee-dark); font-family: "Libre Baskerville", "Cormorant Garamond", serif; } h2 { font-size: 34px; font-weight: 700; color: var(--coffee-dark); position: relative; display: inline-block; margin-bottom: 2rem; padding-bottom: 20px; letter-spacing: 0.01em; } /* Signature motif: garis emas — belah ketupat — garis emas */ h2::before { content: ""; display: block; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 96px; height: 2px; background: var(--gold-line); } h2::after { content: ""; display: block; position: absolute; left: 50%; bottom: 0; width: 8px; height: 8px; background: var(--caramel); transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px rgba(184, 134, 61, 0.4); } /** Section Spacing **/ section { padding-top: 90px; padding-bottom: 90px; } /** Icons **/ .menuicon { color: var(--caramel); border: none; background: transparent; font-size: 22px; } .fa-flip-horizontal { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; transform: scaleX(-1); } /** Backgrounds **/ .section-bg { background: linear-gradient(180deg, var(--cream-soft), var(--cream)); } /** Buttons **/ .btn-primary { display: inline-block; padding: 14px 34px; font-size: 15px; font-weight: 600; letter-spacing: var(--tracking); text-transform: uppercase; border-radius: 50px; color: var(--coffee-dark); background: linear-gradient(135deg, var(--caramel-light), var(--caramel) 55%, #a0722f); border: 1px solid rgba(255, 253, 249, 0.4); box-shadow: 0 10px 24px rgba(92, 58, 18, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease; } .btn-primary:hover { color: var(--white); background: var(--coffee-dark); border-color: var(--caramel); transform: translateY(-3px); box-shadow: var(--shadow-hover); } .btn-secondary { display: inline-block; padding: 14px 34px; font-size: 15px; font-weight: 600; letter-spacing: var(--tracking); text-transform: uppercase; border-radius: 50px; color: var(--cream); background-color: var(--coffee-dark); border: 1px solid var(--caramel); transition: all 0.2s ease; } .btn-secondary:hover { color: var(--coffee-dark); background-color: var(--caramel-light); border-color: var(--caramel-light); } /** Header **/ #header { position: sticky; top: 0; z-index: 100; background: rgba(247, 240, 227, 0.94); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(36, 21, 16, 0.1); border-bottom: 1px solid rgba(184, 134, 61, 0.35); padding: 14px 0; } #header .container { display: flex !important; align-items: center !important; justify-content: space-between !important; } .logo { transition: transform 0.2s ease; } .logo:hover { transform: scale(1.04); } /** Navbar **/ .navbar ul { margin-top: 0; display: flex; list-style: none; align-items: center; padding-left: 0; margin-bottom: 0; } .navbar ul li { padding: 8px 0 8px 34px; } .navbar ul li:first-child { padding-left: 0; } .navbar ul li a { position: relative; color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 4px; } .navbar ul li a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--caramel); transition: width 0.2s ease; } .navbar ul li a:hover::after, .navbar ul li a.active::after { width: 100%; } #navbar ul li a.active { color: var(--caramel); } /** Intro / Hero Section **/ #intro { position: relative; padding-top: 200px; padding-bottom: 200px; min-height: 100%; background: linear-gradient(120deg, rgba(24, 14, 8, 0.82), rgba(58, 24, 20, 0.62)), url(../images/kopiame.jpg); background-size: cover; background-position: center center; background-attachment: fixed; text-align: center; color: var(--white); } #intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(220, 181, 112, 0.2), transparent 60%); pointer-events: none; } #intro .container { position: relative; z-index: 1; padding: 56px 48px; border: 1px solid rgba(220, 181, 112, 0.45); box-shadow: inset 0 0 0 6px rgba(20, 12, 8, 0.15); } #intro h1 { font-size: 54px; font-weight: 700; font-family: "Libre Baskerville", "Cormorant Garamond", serif; text-transform: capitalize; color: var(--white); text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4); } #intro p { margin-top: 1.25rem; margin-bottom: 2.25rem; font-size: 17px; font-weight: 300; line-height: 1.8; letter-spacing: 0.02em; color: rgba(255, 253, 249, 0.9); } /** About Section **/ #about { text-align: center; } #about p { font-size: 18px; line-height: 1.9; font-weight: 400; color: var(--ink-soft); max-width: 720px; margin-left: auto; margin-right: auto; } /** Decorative Elements **/ .design-7 { float: right; margin-top: -3%; } /** Footer **/ #footer { background: linear-gradient(180deg, var(--coffee-dark), #180c07); color: rgba(255, 253, 249, 0.85); } #footer section { padding-top: 68px; padding-bottom: 10px; } #footer hr { position: relative; margin-left: auto; margin-right: auto; width: 50%; border: none; border-top: 1px solid rgba(220, 181, 112, 0.3); overflow: visible; } #footer hr::after { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg); background: var(--caramel-light); } #footer ul { margin-top: 1.5rem; padding-left: unset; list-style: none; } #footer ul li { padding-top: 5px; padding-bottom: 5px; } #footer h5 { font-size: 14px; font-weight: 700; font-family: "Poppins", sans-serif; color: var(--caramel-light); text-transform: uppercase; letter-spacing: 0.14em; position: relative; display: inline-block; padding-bottom: 10px; } #footer h5::after { display: block; position: absolute; left: 0; bottom: 0; width: 2rem; height: 2px; content: ""; background: var(--caramel-light); } #footer h6 a { font-size: 14px; font-weight: 300; color: rgba(255, 253, 249, 0.8); } #footer h6 a:hover { color: var(--caramel-light); } /** Copyright **/ .copyright { padding-top: 0.75rem; padding-bottom: 0.75rem; } .copyright p, .copyright a { font-size: 13px; font-weight: 300; letter-spacing: 0.03em; text-align: center; color: rgba(255, 253, 249, 0.65); } .copyright a:hover { color: var(--caramel-light); } /* ============================================= Mobile Drawer Menu ============================================= */ #mobileDrawer { display: none; background: var(--white); border-top: 1px solid var(--cream-soft); box-shadow: var(--shadow-soft); } #mobileDrawer.open { display: block; } #mobileDrawer ul { margin: 0; padding: 0; } #mobileDrawer ul li a { display: block; padding: 14px 20px; border-bottom: 1px solid var(--cream-soft); color: var(--ink); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; } #mobileDrawer ul li a:hover { color: var(--caramel); background: var(--cream-soft); } /* ============================================= About / Visi Misi ============================================= */ #visi-misi ul li { margin-bottom: 12px; line-height: 1.7; } #visi-misi ul li::marker { color: var(--caramel); } .text-start { text-align: left; } /* ============================================= Section umum tambahan (Home) ============================================= */ #menu-preview, #cta-kontak { text-align: center; } #cta-kontak { background: linear-gradient(180deg, var(--cream-soft), var(--cream)); } #cta-kontak p { font-size: 17px; color: var(--ink-soft); margin-bottom: 4px; } .mt-4 { margin-top: 1.5rem; } /* ============================================= Grid Menu / Produk ============================================= */ .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 40px; } .menu-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); text-align: left; transition: transform 0.25s ease, box-shadow 0.25s ease; border: 1px solid rgba(184, 134, 61, 0.14); position: relative; } .menu-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--coffee-light), var(--caramel), var(--caramel-light)); z-index: 2; } .menu-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); } .menu-card img { width: 100%; height: 200px; object-fit: cover; display: block; filter: saturate(1.05) contrast(1.03); } .menu-card-body { padding: 22px 24px; } .menu-card-body h5 { font-family: "Libre Baskerville", "Cormorant Garamond", serif; margin-bottom: 8px; color: var(--coffee-dark); font-size: 19px; } .menu-card-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 12px; } .menu-card-body .harga { display: inline-block; color: var(--wine); font-weight: 700; font-size: 18px; font-family: "Libre Baskerville", serif; padding-top: 10px; border-top: 1px dashed var(--cream-soft); width: 100%; } .menu-kategori-filter { margin: 24px 0 10px; } .menu-kategori-filter a { display: inline-block; padding: 9px 22px; margin: 4px; border: 1px solid var(--caramel); border-radius: 30px; color: var(--caramel); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.2s ease; } .menu-kategori-filter a.active, .menu-kategori-filter a:hover { background: linear-gradient(135deg, var(--caramel), var(--coffee-light)); border-color: transparent; color: var(--white); } /* ============================================= Galeri ============================================= */ .galeri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 300px)); justify-content: center; gap: 22px; margin-top: 40px; } .galeri-item { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); position: relative; background: var(--cream-soft); border: 1px solid rgba(184, 134, 61, 0.14); /* Rasio 4:3 tetap, tidak peduli ukuran asli foto */ aspect-ratio: 4 / 3; } .galeri-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .galeri-item:hover img { transform: scale(1.08); } /* ===== Lightbox (tampilan penuh saat foto galeri diklik) ===== */ .lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(15, 9, 5, 0.94); align-items: center; justify-content: center; padding: 30px; opacity: 0; transition: opacity 0.25s ease; } .lightbox.open { display: flex; opacity: 1; } .lightbox img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius-sm); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); object-fit: contain; border: 1px solid rgba(220, 181, 112, 0.4); } .lightbox-close { position: absolute; top: 22px; right: 30px; background: rgba(220, 181, 112, 0.14); border: 1px solid rgba(220, 181, 112, 0.4); color: var(--caramel-light); font-size: 28px; line-height: 1; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; transition: background 0.2s ease; } .lightbox-close:hover { background: rgba(220, 181, 112, 0.28); } /* ============================================= Kontak & Maps ============================================= */ .kontak-wrapper { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; margin-top: 40px; text-align: left; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 40px; border: 1px solid rgba(184, 134, 61, 0.18); } .kontak-info-item { margin-bottom: 22px; } .kontak-info-item h6 { color: var(--caramel); margin-bottom: 6px; font-weight: 600; letter-spacing: 0.04em; } .kontak-info-item i { margin-right: 8px; } .kontak-info-item p { color: var(--ink-soft); margin: 0; } .form-control-custom { width: 100%; padding: 12px 16px; margin-bottom: 16px; border: 1.5px solid var(--cream-soft); border-radius: var(--radius-sm); font-family: "Poppins", sans-serif; background: var(--cream); transition: border-color 0.2s ease; } .form-control-custom:focus { outline: none; border-color: var(--caramel); background: var(--white); } .maps-embed { width: 100%; height: 360px; border: 0; border-radius: var(--radius); margin-top: 24px; box-shadow: var(--shadow-soft); filter: sepia(0.15) saturate(0.9); } /* ============================================= Alert Sederhana ============================================= */ .alert-box { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-weight: 500; } .alert-success { background: #eef1e2; color: #3f5c2e; border: 1px solid #cbdab2; } .alert-error { background: #f6e6e6; color: var(--wine); border: 1px solid #e3bcbc; } /* ============================================= RESPONSIVE (mobile-first, max-width: 768px) ============================================= */ @media (max-width: 768px) { section { padding-top: 48px; padding-bottom: 48px; } #header { padding: 10px 0; } #intro { padding: 90px 0 70px; background-attachment: scroll; } #intro .container { padding: 32px 22px; } #intro h1 { font-size: 30px; } #intro p { font-size: 15px; } h2 { font-size: 26px; margin-bottom: 1.5rem; } .btn-primary, .btn-secondary { padding: 12px 26px; font-size: 13px; } #about p { font-size: 15px; line-height: 1.75; } .kontak-wrapper { grid-template-columns: 1fr; padding: 24px; gap: 24px; } .copyright p, .copyright a { font-size: 12px; } } @media (max-width: 480px) { #intro h1 { font-size: 26px; } .menu-grid, .galeri-grid { grid-template-columns: 1fr; } }