/* ========================================================= palette-navy.css — palet "Navy Klasik" (opsional) Aktif hanya bila (dipilih di dashboard: Hero & Identitas > Warna website). Palet bawaan "Hijau Bersih" ada di theme.css. ========================================================= */ /* ---------- Token ---------- */ html[data-palette="navy"] { --primary: #212265; --primary-dark: #15163f; --secondary: #2a7320; --tint: #ffffff; --tint-2: #eef1ff; --announce-bg: #15163f; --background: #f7f9f5; --surface: #ffffff; --text: #171a2e; --text-muted: #565a72; --border: rgba(33, 34, 101, .14); --focus: #212265; --on-accent: #15163f; --glass: rgba(255, 255, 255, .8); --glass-solid: rgba(255, 255, 255, .97); --shadow-sm: 0 1px 2px rgba(21, 22, 63, .06), 0 6px 16px rgba(21, 22, 63, .06); --shadow-md: 0 18px 40px rgba(21, 22, 63, .16); } html[data-palette="navy"][data-theme="dark"] { --primary: #8ddc63; --primary-dark: #08091f; --secondary: #6cbd44; --tint: #131539; --tint-2: #191b47; --announce-bg: #15163f; --background: #0b0c22; --surface: #131539; --text: #edf0f7; --text-muted: #a7acc4; --border: rgba(255, 255, 255, .14); --focus: #a9de8a; --glass: rgba(11, 12, 34, .74); --glass-solid: rgba(11, 12, 34, .97); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .25); --shadow-md: 0 18px 40px rgba(0, 0, 0, .5); } /* ---------- Bar atas & hero ---------- */ html[data-palette="navy"] .announce { color: #e8ecf8; } html[data-palette="navy"] .modal::backdrop { background: rgba(10, 11, 40, .62); } html[data-palette="navy"] .mega-scrim { background: rgba(10, 11, 40, .34); } html[data-palette="navy"] .hero__overlay { background: linear-gradient(to bottom, rgba(10, 11, 40, calc(.55 * var(--ov, 1))) 0%, rgba(10, 11, 40, 0) 24%), linear-gradient(to top, rgba(10, 11, 40, calc(.8 * var(--ov, 1))) 0%, rgba(10, 11, 40, 0) 40%), linear-gradient(180deg, rgba(21, 22, 72, calc(.84 * var(--ov, 1))), rgba(20, 56, 34, calc(.76 * var(--ov, 1)))); } @media (min-width: 768px) { html[data-palette="navy"] .hero__overlay { background: linear-gradient(to bottom, rgba(10, 11, 40, calc(.55 * var(--ov, 1))) 0%, rgba(10, 11, 40, 0) 22%), linear-gradient(to top, rgba(10, 11, 40, calc(.8 * var(--ov, 1))) 0%, rgba(10, 11, 40, 0) 40%), linear-gradient(105deg, rgba(14, 15, 50, calc(.95 * var(--ov, 1))) 0%, rgba(21, 22, 72, calc(.78 * var(--ov, 1))) 48%, rgba(24, 76, 30, calc(.5 * var(--ov, 1))) 100%); } } html[data-palette="navy"] .hero--flat .hero__overlay { background: linear-gradient(to bottom, rgba(10, 11, 40, calc(.5 * var(--ov, 1))) 0%, rgba(10, 11, 40, 0) 24%), linear-gradient(to top, rgba(10, 11, 40, calc(.65 * var(--ov, 1))) 0%, rgba(10, 11, 40, 0) 40%), linear-gradient(rgba(14, 15, 50, calc(.62 * var(--ov, 1))), rgba(14, 15, 50, calc(.62 * var(--ov, 1)))); } html[data-palette="navy"] .fcard, html[data-palette="navy"] .video-toggle { background: rgba(14, 15, 50, .58); } html[data-palette="navy"] .hero--low .btn--ghost { background: rgba(10, 11, 40, .38); } /* ---------- Bagian beranda ---------- */ html[data-palette="navy"] .section--tint { background: var(--surface); } html[data-palette="navy"] .section--navy { background: var(--primary-dark); } html[data-palette="navy"] .acts a { border-top-color: rgba(255, 255, 255, .18); } html[data-palette="navy"] .acts li:last-child a { border-bottom-color: rgba(255, 255, 255, .18); } html[data-palette="navy"] .acts span { color: rgba(255, 255, 255, .78); } html[data-palette="navy"] .acts .ic, html[data-palette="navy"] .acts a:hover { color: var(--accent-light); } html[data-palette="navy"] .pgm__item--navy { background: var(--primary-dark); } html[data-palette="navy"] .pgm__item--navy .pgm__prog { background: var(--accent); color: var(--on-accent); } html[data-palette="navy"] .pgm__item--navy .pgm__desc { color: rgba(255, 255, 255, .82); } html[data-palette="navy"] .nfeat__media { background: linear-gradient(135deg, var(--primary-dark), #212265 55%, #1d5a2c 130%); } html[data-palette="navy"] .gal__tile { background: linear-gradient(135deg, var(--primary-dark), #212265); } html[data-palette="navy"] .gal__tile--a { background: linear-gradient(135deg, #212265, #1d5a2c); } html[data-palette="navy"] .gal__tile--b { background: linear-gradient(135deg, #1d5a2c, #4a9a30); } html[data-palette="navy"] .gal__tile--c { background: linear-gradient(135deg, #15163f, #2f7d20 140%); } /* CTA gelap */ html[data-palette="navy"] .cta { background: linear-gradient(120deg, var(--primary-dark), #212265 55%, #1d5a2c 135%); color: #fff; border-color: transparent; } html[data-palette="navy"] .cta::after { opacity: .1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%23a9de8a' stroke-width='1.2'%3E%3Crect x='24' y='24' width='48' height='48'/%3E%3Crect x='24' y='24' width='48' height='48' transform='rotate(45 48 48)'/%3E%3C/svg%3E"); } html[data-palette="navy"] .cta .sec-title { color: #fff; } html[data-palette="navy"] .cta > p { color: rgba(255, 255, 255, .82); } html[data-palette="navy"] .cta .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .04); } html[data-palette="navy"] .cta .btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; } html[data-palette="navy"] .cta :focus-visible, html[data-palette="navy"] .footer :focus-visible { --focus: #fff; } /* Footer gelap */ html[data-palette="navy"] .footer { background: var(--primary-dark); color: #dfe4f5; border-top: 0; } html[data-palette="navy"] .footer__brand img { border-color: transparent; } html[data-palette="navy"] .footer__brand strong, html[data-palette="navy"] .footer__h { color: #fff; } html[data-palette="navy"] .footer__brand span { color: rgba(223, 228, 245, .75); } html[data-palette="navy"] .footer li a { color: rgba(223, 228, 245, .85); } html[data-palette="navy"] .footer li a:hover { color: var(--accent-light); } html[data-palette="navy"] .footer__base { border-top-color: rgba(255, 255, 255, .14); color: rgba(223, 228, 245, .7); } /* ---------- Halaman dalam ---------- */ html[data-palette="navy"] .pagehead { background: linear-gradient(120deg, var(--primary-dark), #212265 55%, #1d5a2c 135%); } html[data-palette="navy"] .pagehead p { color: rgba(255, 255, 255, .86); } html[data-palette="navy"] .crumbs { color: rgba(255, 255, 255, .8); } html[data-palette="navy"] .galgrid span, html[data-palette="navy"] .gal__tile--photo::after { background: linear-gradient(to top, rgba(10, 11, 40, .8), transparent 55%); }