/* =================================================== PORTAL RAMADHAN 1447 H — Global Stylesheet =================================================== */ /* ── Google Fonts are loaded in index.html ── */ /* ── CSS Variables ── */ :root { --green: #0F9D58; --green-pale: #D9F99D; --green-soft: #A7F3D0; --green-mist: #E6F9F0; --green-deep: #064E2B; --gold-mist: #FEF9C3; --bg: #F6F3E9; --bg-card: #FFFFFF; --grad: linear-gradient(135deg, var(--gold-mist), var(--green-pale), var(--green-soft)); --border: 1px solid rgba(15, 157, 88, .18); --shadow: 0 2px 8px rgba(0, 0, 0, .06); --text-dark: #1F2937; --text-mid: #4B5563; --text-light: #6B7280; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', sans-serif; color: var(--text-dark); background: var(--bg); } /* ── Keyframes ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-13px) rotate(.6deg); } } @keyframes twinkle { 0%, 100% { opacity: .65; } 50% { opacity: .1; } } /* ════════════════════════════════════ HERO SECTION ════════════════════════════════════ */ .hero-section { position: relative; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; } /* Stars */ .stars { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .star { position: absolute; background: rgba(15, 157, 88, .35); border-radius: 50%; animation: twinkle var(--d, 3s) ease-in-out infinite var(--delay, 0s); } /* Hero layout */ .hero-content { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; width: 100%; padding: 60px 32px 64px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; } .hero-text { animation: fadeUp .6s ease .08s both; } /* Hero typography */ h1.hero-title { font-family: 'Amiri', serif; font-size: clamp(44px, 5.8vw, 72px); font-weight: 700; line-height: 1.08; color: var(--green-deep); margin-bottom: 18px; } h1.hero-title .line { display: block; } h1.hero-title .hl { color: var(--green); } .hero-desc { font-size: 14px; color: var(--text-mid); line-height: 1.75; max-width: 430px; margin-bottom: 32px; } .hero-desc strong { color: var(--green-deep); } /* Hero buttons */ .hero-btns { display: flex; gap: 10px; flex-wrap: wrap; } .btn-primary { display: inline-flex; align-items: center; gap: 7px; padding: 12px 24px; background: var(--green); color: #fff; border: none; border-radius: 9px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; /* 3D effect */ transform-style: preserve-3d; transform: perspective(600px) rotateX(0deg) translateY(0px); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.2); transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s ease; will-change: transform, box-shadow; } .btn-primary:hover { transform: perspective(600px) rotateX(10deg) translateY(-5px); box-shadow: 0 12px 0 rgba(0, 0, 0, 0.22), 0 18px 32px rgba(0, 0, 0, 0.25); } .btn-primary:active { transform: perspective(600px) rotateX(2deg) translateY(3px) !important; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 3px 8px rgba(0, 0, 0, 0.15) !important; transition-duration: 0.06s; } .btn-ghost { display: inline-flex; align-items: center; gap: 7px; padding: 12px 24px; background: rgba(255, 255, 255, .6); backdrop-filter: blur(8px); color: var(--green-deep); border: 1px solid rgba(15, 157, 88, .25); border-radius: 9px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .14s, border-color .14s; } .btn-ghost:hover { background: rgba(255, 255, 255, .85); border-color: var(--green); } /* Hero visual / illustration */ .hero-visual { animation: fadeUp .6s ease .22s both; display: flex; justify-content: center; align-items: center; } .hero-img { width: 100%; max-width: 460px; height: auto; object-fit: contain; animation: float 4.5s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(6, 78, 43, .15)); } /* ════════════════════════════════════ SHARED SECTION UTILITIES ════════════════════════════════════ */ .sbox { background: var(--grad); border: var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); } .shead { margin-bottom: 18px; } .shead-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); } .shead-title { font-family: 'Amiri', serif; font-size: clamp(18px, 2.8vw, 24px); font-weight: 700; color: var(--text-dark); margin-top: 2px; } .shead-bar { width: 36px; height: 3px; background: var(--green); border-radius: 99px; margin-top: 6px; } /* ════════════════════════════════════ FITUR / PORTAL CARDS SECTION ════════════════════════════════════ */ .fitur-section { background: var(--bg); padding: 48px 0; } .fitur-inner { max-width: 1100px; margin: 0 auto; width: 100%; padding: 0 32px; } .portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px; } .portal-card { background: var(--bg-card); border: var(--border); border-radius: 12px; padding: 22px 18px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 11px; position: relative; overflow: hidden; /* 3D effect */ transform-style: preserve-3d; transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.12); transition: transform 0.22s cubic-bezier(.34, 1.4, .64, 1), box-shadow 0.22s ease; will-change: transform, box-shadow; } .portal-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .portal-card.is-hovered { box-shadow: 0 20px 0 rgba(0, 0, 0, 0.12), 0 28px 48px rgba(0, 0, 0, 0.22); } .portal-card:hover::before { transform: scaleX(1); } .portal-card:active { transform: perspective(900px) rotateX(1deg) rotateY(0deg) translateZ(2px) translateY(2px) !important; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.12) !important; transition-duration: 0.07s; } .pc-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--grad); border: var(--border); display: flex; align-items: center; justify-content: center; font-size: 20px; } .pc-title { font-family: 'Amiri', serif; font-size: 15px; font-weight: 700; color: var(--text-dark); line-height: 1.3; } .pc-desc { font-size: 11px; color: var(--text-light); line-height: 1.6; flex: 1; } .pc-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--green); margin-top: auto; transition: gap 0.2s ease, letter-spacing 0.2s ease; } .portal-card:hover .pc-cta { gap: 9px; letter-spacing: 0.02em; } /* ════════════════════════════════════ KEUNGGULAN + HADITH SECTION ════════════════════════════════════ */ .keunggulan-section { background: var(--bg); padding: 24px 32px 80px; } .keunggulan-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } /* Feature items */ .feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .feat-item { background: var(--bg-card); border: var(--border); border-radius: 10px; padding: 18px 16px; display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--shadow); transition: background .15s, transform .2s, box-shadow .2s; } .feat-item:hover { background: var(--green-mist); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 157, 88, .1); } .feat-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px; background: var(--grad); border: var(--border); display: flex; align-items: center; justify-content: center; font-size: 17px; } .feat-title { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 3px; } .feat-desc { font-size: 11px; color: var(--text-light); line-height: 1.6; } /* Hadith box */ .hadith-box { background: #fff; border: var(--border); border-radius: 16px; padding: 36px 32px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow); } .hadith-box::before { content: '\275D'; position: absolute; top: -18px; left: 20px; font-size: 110px; color: rgba(15, 157, 88, .06); line-height: 1; font-family: Georgia, serif; pointer-events: none; } .hadith-box::after { content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 32px solid rgba(15, 157, 88, .06); bottom: -100px; right: -70px; pointer-events: none; } .hadith-text { font-size: 15px; font-style: italic; color: var(--text-mid); line-height: 1.85; max-width: 560px; margin: 0 auto 10px; position: relative; } .hadith-src { font-size: 11.5px; font-weight: 700; color: var(--green); letter-spacing: .06em; } /* ════════════════════════════════════ MOBILE DRAWER ════════════════════════════════════ */ .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 999; width: 300px; background: var(--bg); border-left: var(--border); box-shadow: -8px 0 40px rgba(6, 78, 43, .12); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1); overflow-y: auto; } .drawer.open { transform: translateX(0); } .drawer-overlay { display: none; position: fixed; inset: 0; z-index: 998; background: rgba(6, 78, 43, .3); backdrop-filter: blur(4px); } .drawer-overlay.open { display: block; } .drawer-link { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--text-mid); padding: 11px 14px; border-radius: 10px; border: 1px solid transparent; transition: background .14s, color .14s, border-color .14s; } .drawer-link:hover, .drawer-link.active { background: var(--green-mist); color: var(--green-deep); border-color: rgba(15, 157, 88, .18); } .drawer-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--grad); border: var(--border); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } /* ════════════════════════════════════ RESPONSIVE ════════════════════════════════════ */ @media (max-width: 780px) { .hero-content { grid-template-columns: 1fr; padding: 40px 20px; gap: 20px; text-align: center; } .hero-text { text-align: center; display: flex; flex-direction: column; align-items: center; } h1.hero-title { font-size: clamp(2rem, 11vw, 3rem); line-height: 1.15; text-align: center; } h1.hero-title .line { display: block; text-align: center; } .hero-desc { font-size: clamp(0.85rem, 3.8vw, 1rem); line-height: 1.65; text-align: center; max-width: 100%; padding: 0 0.25rem; } /* Gambar tetap tampil di mobile */ .hero-visual { display: flex; justify-content: center; width: 100%; } .hero-img { width: min(280px, 80vw); height: auto; } .hero-btns { flex-direction: column; align-items: center; width: 100%; } .btn-primary, .btn-ghost { justify-content: center; width: 100%; } /* 3D touch devices */ .portal-card:active { transform: scale(0.97) translateY(2px) !important; transition-duration: 0.08s; } .btn-primary:active { transform: scale(0.96) translateY(3px) !important; } .fitur-section { padding: 32px 0; } .fitur-inner { padding: 0 20px; } .keunggulan-section { padding: 16px 20px 60px; } .hadith-box { padding: 28px 20px; } } /* ════════════════════════════════════ NAVBAR RESPONSIVE (manual — bukan Tailwind, karena class md: tidak diproses Tailwind CDN saat inject via innerHTML di JavaScript) ════════════════════════════════════ */ /* Mobile default: sembunyikan desktop elements, tampilkan hamburger */ .nav-desktop-links { display: none; } .nav-desktop-cta { display: none; } .nav-hamburger { display: flex; } /* Desktop (≥ 768px): balik visibilitas */ @media (min-width: 768px) { .nav-desktop-links { display: flex; } .nav-desktop-cta { display: inline-flex; } .nav-hamburger { display: none; } } /* Nav padding responsif */ .nav-inner { padding-left: 1rem; padding-right: 1rem; padding-top: 1rem; padding-bottom: 1rem; } @media (min-width: 768px) { .nav-inner { padding-left: 2rem; padding-right: 2rem; padding-top: 1.25rem; padding-bottom: 1.25rem; } } /* Brand icon size responsif */ .nav-brand-icon { width: 38px; height: 38px; } @media (min-width: 768px) { .nav-brand-icon { width: 42px; height: 42px; } } /* Brand text size responsif */ .nav-brand-name { font-size: 17px; } @media (min-width: 768px) { .nav-brand-name { font-size: 18px; } } /* Nav link hover */ .nav-link-hover:hover { background-color: rgba(15, 157, 88, 0.1); color: #064E2B; } /* ── Page Loader ── */ #page-loader { position: fixed; inset: 0; z-index: 9999; background: #F6F3E9; display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease, visibility 0.4s ease; } #page-loader.hide { opacity: 0; visibility: hidden; } .loader-spinner { width: 40px; height: 40px; border: 3px solid rgba(15, 157, 88, 0.2); border-top-color: #0F9D58; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }