/* ============================================================= Lomba HUT RI ke-81 — BPKD Kabupaten Pekalongan Tema: merah-putih festival. Ditulis mobile-first. ============================================================= */ :root { --red: #c1121f; --red-deep: #7d0a10; --red-dark: #5c060b; --cream: #fff8ef; --cream-2: #fdeedd; --gold: #f4b53f; --gold-soft: #ffd98a; /* Emas pucat untuk teks kecil di atas merah: #ffd98a hanya mencapai rasio 3.8:1, sedangkan nilai ini 4.5:1 terhadap merah paling terang. */ --gold-pale: #fff0d0; --ink: #2b1a12; --ink-dim: #6b5548; --white: #ffffff; --radius-lg: 28px; --radius-md: 18px; --radius-sm: 12px; --container: 1140px; --header-h: 60px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --display: 'Bungee', 'Plus Jakarta Sans', sans-serif; --body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* supaya target anchor tidak tertutup header yang sticky */ scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--body); font-size: 16px; line-height: 1.65; color: var(--ink); background: var(--cream); overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; line-height: 1.2; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 18px; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--white); color: var(--red-deep); padding: 12px 18px; font-weight: 700; border-radius: 0 0 12px 0; } .skip-link:focus { left: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- reveal on scroll ---------- Sengaja diberi awalan .js (kelas ini dipasang skrip di ). Kalau JavaScript mati atau gagal dimuat, aturan ini tidak berlaku sama sekali sehingga seluruh isi halaman tetap terbaca — pengumuman tidak boleh sampai tersembunyi hanya karena animasi tidak jalan. */ .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); } .js .reveal.is-visible { opacity: 1; transform: none; } /* ===================== HEADER ===================== */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--red-deep); box-shadow: 0 1px 0 rgba(244, 181, 63, .35); transition: box-shadow .35s var(--ease); } .site-header.scrolled { box-shadow: 0 6px 24px rgba(92, 6, 11, .35), 0 1px 0 rgba(244, 181, 63, .35); } .header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--white); min-width: 0; } /* Lambang Kabupaten Pekalongan berformat potret (100x126), bukan persegi. Tingginya dipatok dan lebarnya dibiarkan mengikuti supaya tidak gepeng. */ .brand-logo { width: auto; height: 36px; flex: none; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .brand-text strong { font-family: var(--display); font-size: 1rem; letter-spacing: .02em; } .brand-text small { font-size: .68rem; color: var(--gold-soft); font-weight: 600; white-space: nowrap; } .site-nav { display: flex; align-items: center; gap: 6px; flex: none; } .site-nav a { text-decoration: none; color: var(--white); font-size: .78rem; font-weight: 700; padding: 8px 10px; border-radius: 999px; white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease); } .site-nav a:hover { background: var(--gold); color: var(--red-deep); } /* ===================== HERO ===================== */ .hero { position: relative; overflow: hidden; isolation: isolate; /* dikurangi tinggi header karena header sticky ikut memakan ruang */ min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; padding: 92px 0 72px; color: var(--white); background: radial-gradient(ellipse 120% 80% at 50% 0%, #d61f2b 0%, transparent 60%), linear-gradient(170deg, var(--red) 0%, var(--red-deep) 58%, var(--red-dark) 100%); } /* sinar matahari di belakang konten */ .hero-rays { position: absolute; top: -30%; left: 50%; width: 160vmax; height: 160vmax; transform: translateX(-50%); z-index: -2; pointer-events: none; background: repeating-conic-gradient( from 0deg at 50% 50%, rgba(255, 255, 255, .07) 0deg 5deg, transparent 5deg 12deg ); mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 62%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 62%); animation: spin 90s linear infinite; } @keyframes spin { to { transform: translateX(-50%) rotate(360deg); } } /* deretan umbul-umbul segitiga menggantung di bawah header */ .bunting { position: absolute; top: 0; left: 0; right: 0; height: 42px; z-index: 2; pointer-events: none; /* Warna selang-seling krem & emas, bukan merah-putih: di atas latar merah, bendera merah tidak akan terlihat sama sekali. */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='42' viewBox='0 0 56 42'%3E%3Cpath d='M0 2.5H56' stroke='%23ffe8b0' stroke-width='3'/%3E%3Cpolygon points='0,4 28,4 14,38' fill='%23fff8ef'/%3E%3Cpolygon points='28,4 56,4 42,38' fill='%23f4b53f'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 56px 42px; filter: drop-shadow(0 3px 4px rgba(92, 6, 11, .45)); } /* konfeti — dibatasi hanya di area hero */ .confetti { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .confetti span { position: absolute; top: -8vh; width: 8px; height: 13px; border-radius: 2px; opacity: .85; will-change: transform; animation-name: confetti-fall; animation-timing-function: linear; animation-iteration-count: infinite; } .confetti span:nth-child(3n + 1) { background: var(--gold); } .confetti span:nth-child(3n + 2) { background: var(--white); } .confetti span:nth-child(3n) { background: #ff8a95; } .confetti span:nth-child(4n) { border-radius: 50%; width: 9px; height: 9px; } @keyframes confetti-fall { 0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; } 12% { opacity: .9; } 100% { transform: translate3d(28px, 108vh, 0) rotate(680deg); opacity: .35; } } .confetti span:nth-child(1) { left: 2%; animation-duration: 8.4s; animation-delay: -0.2s; } .confetti span:nth-child(2) { left: 8%; animation-duration: 10.1s; animation-delay: -3.4s; } .confetti span:nth-child(3) { left: 13%; animation-duration: 7.2s; animation-delay: -1.6s; } .confetti span:nth-child(4) { left: 18%; animation-duration: 11.3s; animation-delay: -5.1s; } .confetti span:nth-child(5) { left: 23%; animation-duration: 9.0s; animation-delay: -0.9s; } .confetti span:nth-child(6) { left: 29%; animation-duration: 6.8s; animation-delay: -4.2s; } .confetti span:nth-child(7) { left: 34%; animation-duration: 10.7s; animation-delay: -2.3s; } .confetti span:nth-child(8) { left: 39%; animation-duration: 8.0s; animation-delay: -6.0s; } .confetti span:nth-child(9) { left: 44%; animation-duration: 9.6s; animation-delay: -1.1s; } .confetti span:nth-child(10) { left: 49%; animation-duration: 7.6s; animation-delay: -3.9s; } .confetti span:nth-child(11) { left: 54%; animation-duration: 11.0s; animation-delay: -5.7s; } .confetti span:nth-child(12) { left: 59%; animation-duration: 8.7s; animation-delay: -2.8s; } .confetti span:nth-child(13) { left: 64%; animation-duration: 9.9s; animation-delay: -0.5s; } .confetti span:nth-child(14) { left: 69%; animation-duration: 7.0s; animation-delay: -4.6s; } .confetti span:nth-child(15) { left: 74%; animation-duration: 10.4s; animation-delay: -1.9s; } .confetti span:nth-child(16) { left: 79%; animation-duration: 8.3s; animation-delay: -6.4s; } .confetti span:nth-child(17) { left: 84%; animation-duration: 9.2s; animation-delay: -3.1s; } .confetti span:nth-child(18) { left: 89%; animation-duration: 7.4s; animation-delay: -0.7s; } .confetti span:nth-child(19) { left: 94%; animation-duration: 10.9s; animation-delay: -5.4s; } .confetti span:nth-child(20) { left: 97%; animation-duration: 8.9s; animation-delay: -2.0s; } .confetti span:nth-child(21) { left: 5%; animation-duration: 9.4s; animation-delay: -7.2s; } .confetti span:nth-child(22) { left: 26%; animation-duration: 11.6s; animation-delay: -4.9s; } .confetti span:nth-child(23) { left: 62%; animation-duration: 7.8s; animation-delay: -6.7s; } .confetti span:nth-child(24) { left: 86%; animation-duration: 10.2s; animation-delay: -8.1s; } .hero-inner { position: relative; z-index: 1; text-align: center; } .eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-pale); margin-bottom: 18px; } .hero-kicker { font-family: var(--display); text-transform: uppercase; font-size: clamp(.85rem, 3.8vw, 1.6rem); letter-spacing: .04em; color: var(--gold-pale); text-shadow: 0 2px 0 rgba(92, 6, 11, .55); } .hero-numeral { font-family: var(--display); font-size: clamp(6rem, 30vw, 15rem); line-height: .85; margin: 6px 0 10px; color: var(--gold); background: linear-gradient(178deg, #fff3d4 8%, var(--gold-soft) 34%, var(--gold) 62%, #c98a12 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 0 rgba(92, 6, 11, .5)) drop-shadow(0 14px 24px rgba(0, 0, 0, .35)); } .hero-title { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.15rem, 5.2vw, 2.5rem); letter-spacing: .01em; text-shadow: 0 3px 0 rgba(92, 6, 11, .5); } .hero-sub { max-width: 620px; margin: 18px auto 0; font-size: clamp(.92rem, 3.4vw, 1.06rem); color: rgba(255, 255, 255, .92); } .hero-ribbon { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 10px 20px; background: var(--cream); color: var(--red-deep); border-radius: 999px; border: 3px solid var(--gold); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); transform: rotate(-1.4deg); max-width: 100%; flex-wrap: wrap; justify-content: center; } .ribbon-day { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; background: var(--red); color: var(--white); padding: 3px 12px; border-radius: 999px; } .ribbon-date { font-family: var(--display); font-size: clamp(.92rem, 4vw, 1.25rem); text-transform: uppercase; } .hero-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; padding: 14px 26px; min-height: 48px; background: var(--gold); color: var(--red-dark); font-weight: 800; font-size: .95rem; text-decoration: none; border-radius: 999px; box-shadow: 0 8px 0 #b3801f, 0 14px 26px rgba(0, 0, 0, .3); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } /* Kespesifikan disamakan dengan ".js .reveal" (sama-sama dua kelas) dan ditaruh setelahnya, supaya animasi tekan tombol tidak ikut melambat mengikuti durasi transisi reveal. */ .hero-cta.reveal { transition: opacity .7s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease); } .hero-cta:hover, .hero-cta:active { transform: translateY(3px); box-shadow: 0 5px 0 #b3801f, 0 10px 20px rgba(0, 0, 0, .3); } .hero-cta svg { animation: bob 1.8s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } /* ===================== SECTION UMUM ===================== */ .section-title { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.25rem, 5.6vw, 2.1rem); color: var(--red-deep); text-align: center; } .section-sub { max-width: 620px; margin: 14px auto 0; text-align: center; color: var(--ink-dim); font-size: .95rem; } /* ===================== COUNTDOWN ===================== */ .countdown-section { padding: 54px 0 48px; background: radial-gradient(circle at 12% 18%, rgba(244, 181, 63, .16) 0 2px, transparent 2px) 0 0/26px 26px, var(--cream-2); border-bottom: 4px solid var(--gold); } .countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 560px; margin: 26px auto 0; } .cd-unit { background: var(--white); border: 2px solid rgba(193, 18, 31, .18); border-top: 5px solid var(--red); border-radius: var(--radius-sm); padding: 12px 4px 10px; text-align: center; box-shadow: 0 6px 16px rgba(92, 6, 11, .1); } .cd-num { display: block; font-family: var(--display); font-size: clamp(1.35rem, 7.5vw, 2.4rem); line-height: 1.05; color: var(--red-deep); font-variant-numeric: tabular-nums; } .cd-label { display: block; margin-top: 4px; font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); } /* state saat hari-H / acara sudah lewat */ .countdown[data-state="done"] { display: none; } .countdown-note { margin-top: 18px; text-align: center; font-weight: 700; color: var(--red-deep); font-size: .92rem; } .countdown-note.is-highlight { /* max-content + margin auto membuat blok ini menciut selebar teksnya lalu tetap berada di tengah, tanpa perlu elemen pembungkus. */ max-width: max-content; margin: 26px auto 0; padding: 12px 22px; background: var(--red); color: var(--white); border-radius: 999px; font-family: var(--display); text-transform: uppercase; font-size: clamp(.78rem, 3.6vw, 1.1rem); line-height: 1.35; } /* ===================== MARQUEE ===================== */ .marquee { overflow: hidden; background: var(--red); border-bottom: 4px solid var(--gold); padding: 10px 0; } .marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; } .marquee-track span { font-family: var(--display); text-transform: uppercase; font-size: .8rem; color: var(--white); white-space: nowrap; padding-right: 8px; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ===================== LOMBA ===================== */ .lomba-section { padding: 54px 0 60px; background: radial-gradient(circle at 80% 65%, rgba(193, 18, 31, .07) 0 2px, transparent 2px) 0 0/30px 30px, var(--cream); } .section-head { margin-bottom: 26px; } .chip-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 30px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chip-nav::-webkit-scrollbar { display: none; } .chip-nav a { flex: none; text-decoration: none; font-size: .78rem; font-weight: 700; color: var(--red-deep); background: var(--white); border: 2px solid rgba(193, 18, 31, .25); padding: 9px 15px; border-radius: 999px; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .chip-nav a:hover { background: var(--red); border-color: var(--red); color: var(--white); } .lomba-list { display: flex; flex-direction: column; gap: 26px; } .lomba { background: var(--white); border: 2px solid rgba(193, 18, 31, .14); border-radius: var(--radius-lg); padding: 14px; box-shadow: 0 10px 30px rgba(92, 6, 11, .08); } /* ----- video ----- */ .video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(150deg, var(--red-deep), var(--red-dark)); } /* fallback untuk peramban tanpa aspect-ratio */ @supports not (aspect-ratio: 16 / 9) { .video { height: 0; padding-bottom: 56.25%; } } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* state: ID video belum diisi */ .video-soon { position: absolute; inset: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; border: 2px dashed rgba(255, 255, 255, .35); border-radius: var(--radius-sm); color: var(--white); padding: 10px; } .video-soon-ico { font-size: 1.5rem; color: var(--gold); line-height: 1; } .video-soon strong { font-family: var(--display); text-transform: uppercase; font-size: .85rem; } .video-soon small { font-size: .72rem; color: rgba(255, 255, 255, .75); } /* state: thumbnail + tombol putar (iframe dimuat saat diklik) */ .video-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: transparent; display: block; } .video-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .4s var(--ease); } .video-play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(92, 6, 11, .1), rgba(92, 6, 11, .45)); } .video-play .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 62px; height: 62px; border-radius: 50%; background: var(--red); border: 4px solid var(--white); box-shadow: 0 8px 22px rgba(0, 0, 0, .4); display: grid; place-items: center; transition: transform .25s var(--ease), background .25s var(--ease); } .video-play .play-btn svg { width: 22px; height: 22px; fill: var(--white); margin-left: 3px; } .video-play:hover img { transform: scale(1.05); } .video-play:hover .play-btn { transform: translate(-50%, -50%) scale(1.1); background: var(--gold); } .video-play:hover .play-btn svg { fill: var(--red-deep); } /* ----- teks lomba ----- */ .lomba-body { padding: 20px 6px 8px; } .lomba-num { display: inline-block; font-family: var(--display); font-size: 1.75rem; line-height: 1; color: var(--gold); -webkit-text-stroke: 1.5px var(--red-deep); margin-bottom: 6px; } .lomba-title { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.05rem, 4.6vw, 1.5rem); color: var(--red-deep); } .lomba-desc { margin-top: 12px; color: var(--ink-dim); font-size: .94rem; } .lomba-subhead { margin-top: 20px; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: 8px; } .lomba-subhead::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px); } .lomba-rules { margin-top: 12px; display: grid; gap: 8px; } .lomba-rules li { position: relative; padding-left: 26px; font-size: .9rem; color: var(--ink); } .lomba-rules li::before { content: ""; position: absolute; left: 0; top: .48em; width: 12px; height: 12px; border-radius: 3px; background: var(--red); box-shadow: 3px 3px 0 var(--gold); } /* ===================== PENUTUP ===================== */ .closing { padding: 52px 0 58px; text-align: center; color: var(--white); background: radial-gradient(ellipse 100% 70% at 50% 0%, #d61f2b 0%, transparent 65%), linear-gradient(160deg, var(--red) 0%, var(--red-deep) 100%); border-top: 4px solid var(--gold); } .closing-line { font-size: .95rem; color: rgba(255, 255, 255, .9); } .closing-shout { margin-top: 10px; font-family: var(--display); /* Bungee sangat lebar — 14vw membuat "MERDEKA!" melewati tepi layar 360px */ font-size: clamp(2rem, 12vw, 4.6rem); line-height: 1; letter-spacing: .02em; color: var(--gold-soft); text-shadow: 0 4px 0 var(--red-dark), 0 12px 26px rgba(0, 0, 0, .35); } /* ===================== FOOTER ===================== */ .site-footer { background: var(--red-dark); color: rgba(255, 255, 255, .85); padding: 34px 0 30px; } .footer-inner { text-align: center; } .footer-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; } .footer-logo { width: auto; height: 54px; flex: none; } .footer-brand > div { text-align: left; } .footer-brand strong { display: block; color: var(--white); font-size: .92rem; line-height: 1.25; } .footer-brand p { font-size: .8rem; color: var(--gold-soft); } .footer-note { font-size: .82rem; max-width: 460px; margin: 0 auto; } .footer-copy { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .75rem; color: rgba(255, 255, 255, .6); } /* Layar sangat sempit (iPhone SE lama, 320px): rampingkan header supaya brand dan navigasi tidak saling mendorong keluar layar. */ @media (max-width: 379px) { .brand-text small { display: none; } .site-nav a { padding: 8px 9px; font-size: .73rem; } } /* ===================== BREAKPOINT 640px ===================== */ @media (min-width: 640px) { .container { padding: 0 28px; } .countdown { gap: 14px; } .cd-unit { padding: 16px 8px 14px; } .cd-label { font-size: .68rem; } .marquee-track span { font-size: 1rem; } .lomba { padding: 18px; } .lomba-body { padding: 24px 12px 10px; } .chip-nav { flex-wrap: wrap; overflow-x: visible; justify-content: center; } } /* ===================== BREAKPOINT 900px ===================== */ @media (min-width: 900px) { :root { --header-h: 68px; } .brand-logo { height: 42px; } .brand-text strong { font-size: 1.15rem; } .brand-text small { font-size: .74rem; } .site-nav { gap: 10px; } .site-nav a { font-size: .85rem; padding: 9px 16px; } .countdown-section { padding: 70px 0 62px; } .lomba-section { padding: 74px 0 84px; } .section-head { margin-bottom: 40px; } .lomba-list { gap: 40px; } .lomba { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; padding: 22px; } /* zig-zag: lomba genap menaruh video di sebelah kanan */ .lomba:nth-child(even) .lomba-media { order: 2; } .lomba-body { padding: 6px 4px; } .lomba-num { font-size: 2.4rem; -webkit-text-stroke-width: 2px; } } @media (min-width: 1100px) { .lomba { gap: 44px; padding: 26px; } } /* ===================== HEMAT GERAK ===================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .confetti { display: none; } .hero-rays { animation: none; } .marquee-track { animation: none; transform: none; width: 100%; } .marquee-track span:last-child { display: none; } .hero-cta svg { animation: none; } .js .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }