/* ========================================================== INCEPTION HOMEPAGE CLEAN V3.0 INCEPTION HOMEPAGE COLOR NORMALIZATION V3.1 INCEPTION HOMEPAGE LOGO RED V3.2 ========================================================== Homepage presentation layer. NO: - 100vmax - clip-path canvas hacks - giant section shadows - stacked V2.x patches YES: - real full-width sections - semantic section IDs/classes - one color system - blue dominant - coral micro accents ========================================================== */ /* ========================================================== 01. TOKENS ========================================================== */ body.inception-home-blue-v16 { --home-bg: #101d3d; --home-bg-deep: #0b1530; --home-bg-soft: #13254a; --home-section-blue: #172c57; --home-section-blue-2: #1a305b; --home-card: #1a2b52; --home-card-hover: #213763; --home-blue: #3d63bb; --home-blue-light: #8eadf2; --home-blue-soft: #b8caff; --home-coral: #b65352; --home-coral-soft: #d77a70; --home-heading: #f7f2e8; --home-text: #d4ddef; --home-muted: #98a8c8; --home-border: rgba(182,83,82,.38); --home-border-strong: rgba(182,83,82,.62); --home-content: 1180px; background: var(--home-bg-deep) !important; color: var(--home-text); overflow-x: hidden; } /* ========================================================== 02. ROOT ========================================================== */ html body.inception-home-blue-v16 #root { width: 100%; min-height: 100vh; overflow-x: hidden; background: var(--home-bg) !important; } /* ========================================================== 03. SECTION ARCHITECTURE Section itself = full viewport width. Horizontal padding keeps content around 1180px. No fake 100vmax shadow. ========================================================== */ html body.inception-home-blue-v16 .section, html body.inception-home-blue-v16 .history-section, html body.inception-home-blue-v16 section#riwayat { box-sizing: border-box !important; position: relative !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding-top: clamp(76px, 7vw, 108px) !important; padding-bottom: clamp(76px, 7vw, 108px) !important; padding-left: max( 24px, calc((100vw - var(--home-content)) / 2) ) !important; padding-right: max( 24px, calc((100vw - var(--home-content)) / 2) ) !important; overflow: hidden; clip-path: none; box-shadow: none !important; } /* ========================================================== 04. RESET LEGACY SECTION PSEUDOS ========================================================== */ html body.inception-home-blue-v16 .section::before, html body.inception-home-blue-v16 .section::after, html body.inception-home-blue-v16 .section:nth-of-type(odd)::before, html body.inception-home-blue-v16 .section:nth-of-type(odd)::after, html body.inception-home-blue-v16 .section:nth-of-type(even)::before, html body.inception-home-blue-v16 .section:nth-of-type(even)::after, html body.inception-home-blue-v16 .history-section::before, html body.inception-home-blue-v16 .history-section::after, html body.inception-home-blue-v16 section#riwayat::before, html body.inception-home-blue-v16 section#riwayat::after { content: none !important; display: none !important; } /* ========================================================== 05. NAVBAR ========================================================== */ html body.inception-home-blue-v16 .navbar { background: rgba(11,21,48,.98) !important; border-bottom: 1px solid rgba(155,186,255,.14) !important; box-shadow: none !important; backdrop-filter: none; } html body.inception-home-blue-v16 .navbar a { color: #eef3ff !important; } html body.inception-home-blue-v16 .navbar a:hover { color: var(--home-blue-light) !important; } /* Login = intentional coral */ html body.inception-home-blue-v16 .navbar a[href="/login"], html body.inception-home-blue-v16 .navbar a[href="/login/"] { background: var(--home-coral) !important; border-color: var(--home-coral) !important; color: #fff !important; box-shadow: none !important; } /* ========================================================== 06. HERO ========================================================== */ html body.inception-home-blue-v16 .hero { box-sizing: border-box; position: relative; isolation: isolate; width: 100% !important; max-width: none !important; margin: 0 !important; padding-top: clamp(72px, 7vw, 108px); padding-bottom: clamp(72px, 7vw, 108px); padding-left: max( 24px, calc((100vw - var(--home-content)) / 2) ); padding-right: max( 24px, calc((100vw - var(--home-content)) / 2) ); overflow: hidden; background: linear-gradient( 106deg, #101d3d 0%, #26468e 38%, #3d63bb 70%, #7898e2 100% ) !important; box-shadow: none !important; } html body.inception-home-blue-v16 .hero::before { content: ""; display: block; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient( circle at 77% 44%, rgba(168,197,255,.17), transparent 32% ); } html body.inception-home-blue-v16 .hero::after { content: ""; display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient( 180deg, rgba(255,255,255,.025), transparent 38%, rgba(4,9,23,.08) ); } html body.inception-home-blue-v16 .hero-inner { width: 100%; max-width: var(--home-content); margin-inline: auto; } html body.inception-home-blue-v16 .hero-title { color: var(--home-heading) !important; text-shadow: none !important; } html body.inception-home-blue-v16 .hero-desc { color: rgba(241,245,255,.87) !important; } /* ========================================================== 07. HERO LOGO / ORBIT ========================================================== */ html body.inception-home-blue-v16 .hero-ring { border-color: rgba(184,207,255,.23) !important; } html body.inception-home-blue-v16 .hero-rings-wrap img { filter: brightness(1.12) saturate(1.05) !important; } html body.inception-home-blue-v16 .hero-ai-chip { background: rgba(19,37,79,.55) !important; border: 1px solid rgba(169,197,255,.24) !important; color: #dce7ff !important; box-shadow: none !important; } /* ========================================================== 08. HERO BUTTONS ========================================================== */ html body.inception-home-blue-v16 .hero .btn-primary { background: var(--home-blue-light) !important; border-color: var(--home-blue-light) !important; color: #102043 !important; box-shadow: none !important; } html body.inception-home-blue-v16 .hero .btn-secondary { background: rgba(16,30,65,.73) !important; border-color: rgba(180,203,255,.23) !important; color: #f4f7ff !important; box-shadow: none !important; } /* ========================================================== 09. HERO CARDS ========================================================== */ html body.inception-home-blue-v16 .info-card { background: linear-gradient( 145deg, #1b2c56, #172445 ) !important; border: 1px solid rgba(182,83,82,.42) !important; border-left: 3px solid var(--home-coral) !important; box-shadow: none !important; } html body.inception-home-blue-v16 .info-card:nth-child(2) { border-left-color: var(--home-coral) !important; } html body.inception-home-blue-v16 .info-card-label { color: var(--home-coral-soft) !important; } html body.inception-home-blue-v16 .info-card:nth-child(2) .info-card-label { color: var(--home-coral-soft) !important; } /* ========================================================== 10. COUNTDOWN ========================================================== */ html body.inception-home-blue-v16 .hero-countdown { background: rgba(11,22,48,.48) !important; border: 1px solid rgba(158,187,255,.12) !important; box-shadow: none !important; } html body.inception-home-blue-v16 .hero-countdown-value { color: var(--home-blue-light) !important; } /* ========================================================== 11. TYPOGRAPHY ========================================================== */ html body.inception-home-blue-v16 .section-title, html body.inception-home-blue-v16 .about-title, html body.inception-home-blue-v16 .location-title, html body.inception-home-blue-v16 .history-section h2 { color: var(--home-heading) !important; text-shadow: none !important; } html body.inception-home-blue-v16 .section-subtitle, html body.inception-home-blue-v16 .about-text, html body.inception-home-blue-v16 .history-description { color: var(--home-muted) !important; } html body.inception-home-blue-v16 .section-kicker, html body.inception-home-blue-v16 .history-year, html body.inception-home-blue-v16 .location-contact-eyebrow { color: var(--home-blue-light) !important; } /* ========================================================== 12. TENTANG ========================================================== */ html body.inception-home-blue-v16 #tentang { background: linear-gradient( 180deg, #1b3262, #223f79 ) !important; } html body.inception-home-blue-v16 .fact-card { background: linear-gradient( 145deg, #1d2e56, var(--home-card) ) !important; border: 1px solid var(--home-border) !important; border-left: 3px solid var(--home-coral) !important; box-shadow: none !important; } html body.inception-home-blue-v16 .fact-card:nth-child(2), html body.inception-home-blue-v16 .fact-card:nth-child(4) { border-left-color: var(--home-coral) !important; } html body.inception-home-blue-v16 .fact-card::before, html body.inception-home-blue-v16 .fact-card::after { content: none !important; display: none !important; } /* ========================================================== 13. RANGKAIAN / STAGES ========================================================== */ html body.inception-home-blue-v16 #rangkaian.section-stages { background: linear-gradient( 180deg, #1b3262, #223f79 ) !important; } html body.inception-home-blue-v16 .stage-item { background: var(--home-card) !important; border: 1px solid var(--home-border) !important; border-left: 3px solid var(--home-coral) !important; box-shadow: none !important; } html body.inception-home-blue-v16 .stage-step { color: var(--home-coral) !important; } /* ========================================================== 14. TIMELINE ========================================================== */ html body.inception-home-blue-v16 #timeline.section-timeline { background: linear-gradient( 180deg, #1b3262, #223f79 ) !important; } html body.inception-home-blue-v16 .timeline-list { max-width: 1040px; margin-inline: auto; } html body.inception-home-blue-v16 .timeline-list::before { background: linear-gradient( 180deg, transparent, rgba(182,83,82,.38) 8%, rgba(182,83,82,.38) 92%, transparent ) !important; box-shadow: none !important; } html body.inception-home-blue-v16 .timeline-item { background: var(--home-card) !important; border: 1px solid var(--home-border) !important; box-shadow: none !important; } html body.inception-home-blue-v16 .timeline-item::before, html body.inception-home-blue-v16 .timeline-item::after { box-shadow: none !important; } html body.inception-home-blue-v16 .timeline-dot { background: var(--home-coral) !important; border-color: var(--home-coral-soft) !important; color: #ffffff !important; box-shadow: none !important; } html body.inception-home-blue-v16 .timeline-item:last-child .timeline-dot { background: var(--home-coral) !important; border-color: var(--home-coral-soft) !important; color: #fff !important; } html body.inception-home-blue-v16 .timeline-date { color: var(--home-blue-soft) !important; } /* ========================================================== 15. RIWAYAT ========================================================== */ html body.inception-home-blue-v16 .history-section, html body.inception-home-blue-v16 section#riwayat { background: linear-gradient( 180deg, #1b3262, #223f79 ) !important; } html body.inception-home-blue-v16 .history-feature { background: linear-gradient( 145deg, #182746, #14203c ) !important; border: 1px solid var(--home-border) !important; box-shadow: none !important; } html body.inception-home-blue-v16 .history-main-media, html body.inception-home-blue-v16 .riwayat-feature-media { background: radial-gradient( circle at 50% 44%, rgba(91,124,214,.10), transparent 43% ), #10192f !important; box-shadow: none !important; } html body.inception-home-blue-v16 .riwayat-news-card { background: linear-gradient( 145deg, #192746, #141f3a ) !important; border: 1px solid rgba(244,111,100,.17) !important; box-shadow: none !important; } /* ========================================================== 16. HADIAH ========================================================== */ html body.inception-home-blue-v16 #hadiah { background: linear-gradient( 180deg, #1b3262, #223f79 ) !important; } html body.inception-home-blue-v16 .prize-card, html body.inception-home-blue-v16 .other-prize-card { background: linear-gradient( 145deg, #1d2e56, #19284c ) !important; border: 1px solid var(--home-border-strong) !important; box-shadow: none !important; } html body.inception-home-blue-v16 .prize-card::after { content: none !important; display: none !important; } html body.inception-home-blue-v16 .prize-card:first-child { border: 1px solid rgba(244,111,100,.65) !important; border-top: 2px solid var(--home-coral) !important; } html body.inception-home-blue-v16 .prize-place { color: var(--home-coral-soft) !important; } html body.inception-home-blue-v16 .prize-card:first-child .prize-place { color: var(--home-coral-soft) !important; } html body.inception-home-blue-v16 .prize-amount, html body.inception-home-blue-v16 .other-prize-amount { color: var(--home-heading) !important; } /* ========================================================== 17. LOKASI ========================================================== */ html body.inception-home-blue-v16 #lokasi { background: linear-gradient( 180deg, #1b3262, #223f79 ) !important; } html body.inception-home-blue-v16 .location-card, html body.inception-home-blue-v16 .location-contact-card { background: linear-gradient( 145deg, #19294f, #162342 ) !important; border: 1px solid var(--home-border) !important; box-shadow: none !important; } html body.inception-home-blue-v16 .location-label, html body.inception-home-blue-v16 .location-contact-label { color: var(--home-coral-soft) !important; } html body.inception-home-blue-v16 .location-map { overflow: hidden; border: 1px solid var(--home-border) !important; border-radius: 18px; box-shadow: none !important; } /* ========================================================== 18. CONTACT MICRO ACCENT ========================================================== */ html body.inception-home-blue-v16 .location-contact::before { content: ""; display: block; width: 46px; height: 2px; margin-bottom: 18px; background: linear-gradient( 90deg, var(--home-coral) 0%, var(--home-coral-soft) 100% ) !important; } /* ========================================================== 19. CLOSING CTA ========================================================== */ html body.inception-home-blue-v16 .final-cta, html body.inception-home-blue-v16 .cta-section, html body.inception-home-blue-v16 .closing-section, html body.inception-home-blue-v16 .home-cta { box-sizing: border-box; width: 100% !important; max-width: none !important; margin: 0 !important; padding: clamp(86px, 9vw, 130px) max( 24px, calc((100vw - var(--home-content)) / 2) ); background: radial-gradient( circle at 72% 70%, rgba(244,111,100,.06), transparent 26% ), linear-gradient( 180deg, #1b3262, #172c57 ) !important; clip-path: none; box-shadow: none !important; } html body.inception-home-blue-v16 .final-cta::before, html body.inception-home-blue-v16 .final-cta::after, html body.inception-home-blue-v16 .cta-section::before, html body.inception-home-blue-v16 .cta-section::after { box-shadow: none !important; } html body.inception-home-blue-v16 .final-cta h2, html body.inception-home-blue-v16 .cta-section h2, html body.inception-home-blue-v16 .closing-section h2, html body.inception-home-blue-v16 .home-cta h2 { color: var(--home-heading) !important; text-shadow: none !important; } /* ========================================================== 20. FOOTER ========================================================== */ html body.inception-home-blue-v16 footer { background: #081023 !important; border-top: 1px solid rgba(155,186,255,.11) !important; box-shadow: none !important; } /* ========================================================== 21. GLOBAL CARD SHADOW RESET ========================================================== */ html body.inception-home-blue-v16 .info-card, html body.inception-home-blue-v16 .fact-card, html body.inception-home-blue-v16 .stage-item, html body.inception-home-blue-v16 .timeline-item, html body.inception-home-blue-v16 .history-feature, html body.inception-home-blue-v16 .riwayat-news-card, html body.inception-home-blue-v16 .prize-card, html body.inception-home-blue-v16 .other-prize-card, html body.inception-home-blue-v16 .location-card, html body.inception-home-blue-v16 .location-contact-card { box-shadow: none !important; } /* ========================================================== 22. HOVER ========================================================== */ html body.inception-home-blue-v16 .info-card, html body.inception-home-blue-v16 .fact-card, html body.inception-home-blue-v16 .stage-item, html body.inception-home-blue-v16 .timeline-item, html body.inception-home-blue-v16 .prize-card, html body.inception-home-blue-v16 .other-prize-card, html body.inception-home-blue-v16 .location-card, html body.inception-home-blue-v16 .location-contact-card { transition: transform .17s ease, border-color .17s ease, background .17s ease; } html body.inception-home-blue-v16 .info-card:hover, html body.inception-home-blue-v16 .fact-card:hover, html body.inception-home-blue-v16 .stage-item:hover, html body.inception-home-blue-v16 .timeline-item:hover, html body.inception-home-blue-v16 .prize-card:hover, html body.inception-home-blue-v16 .other-prize-card:hover, html body.inception-home-blue-v16 .location-card:hover, html body.inception-home-blue-v16 .location-contact-card:hover { transform: translateY(-2px); border-color: rgba(170,197,255,.38) !important; } /* ========================================================== 23. MOBILE ========================================================== */ @media (max-width: 900px) { html body.inception-home-blue-v16 .section, html body.inception-home-blue-v16 .history-section, html body.inception-home-blue-v16 section#riwayat { padding-left: 24px !important; padding-right: 24px !important; } html body.inception-home-blue-v16 .hero { padding-left: 24px; padding-right: 24px; } } @media (max-width: 640px) { html body.inception-home-blue-v16 .section, html body.inception-home-blue-v16 .history-section, html body.inception-home-blue-v16 section#riwayat { padding: 62px 18px !important; } html body.inception-home-blue-v16 .hero { padding: 66px 18px; background: linear-gradient( 145deg, #101d3d, #2f55a5 62%, #6789da ) !important; } } /* ========================================================== END CLEAN V3.0 ========================================================== */ /* INCEPTION_HOMEPAGE_RED_FILL_V33 START */ /* INCEPTION RED CONSISTENCY V3.4 INCEPTION UNIFIED CANVAS V3.5 */ /* ========================================================== INCEPTION V3.3 BLUE CANVAS + RED FILLED CARDS Logo red: #B65352 Dark logo-red: #9F4646 Mid logo-red: #B65352 Light logo-orange: #D77A70 ========================================================== */ body.inception-home-blue-v16 { --home-red-card-dark: #9f4646; --home-red-card: #b65352; --home-red-card-logo: #c5635b; --home-red-card-light: #d77a70; --home-red-text: #fff9f6; --home-red-muted: #ffe1dc; } /* ========================================================== 01. ALL PRIMARY CARDS = RED FILLED ========================================================== */ html body.inception-home-blue-v16 .info-card, html body.inception-home-blue-v16 .fact-card, html body.inception-home-blue-v16 .stage-item, html body.inception-home-blue-v16 .timeline-item, html body.inception-home-blue-v16 .history-feature, html body.inception-home-blue-v16 .riwayat-news-card, html body.inception-home-blue-v16 .prize-card, html body.inception-home-blue-v16 .other-prize-card, html body.inception-home-blue-v16 .location-card, html body.inception-home-blue-v16 .location-contact-card { background: linear-gradient( 145deg, var(--home-red-card-dark) 0%, var(--home-red-card) 56%, var(--home-red-card-logo) 100% ) !important; border: 0 !important; border-left: 0 !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; box-shadow: none !important; color: var(--home-red-text) !important; } /* ========================================================== 02. REMOVE CARD DECORATIVE LINES ========================================================== */ html body.inception-home-blue-v16 .info-card::before, html body.inception-home-blue-v16 .info-card::after, html body.inception-home-blue-v16 .fact-card::before, html body.inception-home-blue-v16 .fact-card::after, html body.inception-home-blue-v16 .stage-item::before, html body.inception-home-blue-v16 .stage-item::after, html body.inception-home-blue-v16 .timeline-item::before, html body.inception-home-blue-v16 .timeline-item::after, html body.inception-home-blue-v16 .prize-card::before, html body.inception-home-blue-v16 .prize-card::after, html body.inception-home-blue-v16 .other-prize-card::before, html body.inception-home-blue-v16 .other-prize-card::after, html body.inception-home-blue-v16 .location-card::before, html body.inception-home-blue-v16 .location-card::after, html body.inception-home-blue-v16 .location-contact-card::before, html body.inception-home-blue-v16 .location-contact-card::after { content: none !important; display: none !important; } /* ========================================================== 03. CARD TEXT = WHITE ========================================================== */ html body.inception-home-blue-v16 .info-card *, html body.inception-home-blue-v16 .fact-card *, html body.inception-home-blue-v16 .stage-item *, html body.inception-home-blue-v16 .timeline-item *, html body.inception-home-blue-v16 .history-feature *, html body.inception-home-blue-v16 .riwayat-news-card *, html body.inception-home-blue-v16 .prize-card *, html body.inception-home-blue-v16 .other-prize-card *, html body.inception-home-blue-v16 .location-card *, html body.inception-home-blue-v16 .location-contact-card * { color: var(--home-red-text) !important; } /* secondary/muted text tetap sedikit beda */ html body.inception-home-blue-v16 :is( .info-card, .fact-card, .stage-item, .timeline-item, .history-feature, .riwayat-news-card, .prize-card, .other-prize-card, .location-card, .location-contact-card ) :is( small, .timeline-date, .prize-note, .section-kicker, .info-card-label, .location-label, .location-contact-label, .other-prize-label, .history-year ) { color: var(--home-red-muted) !important; } /* ========================================================== 04. HERO CARDS ========================================================== */ html body.inception-home-blue-v16 .hero .info-card { background: linear-gradient( 145deg, #9f4646 0%, #b65352 56%, #c5635b 100% ) !important; border: 0 !important; box-shadow: none !important; } /* ========================================================== 05. TENTANG CARDS ========================================================== */ html body.inception-home-blue-v16 #tentang .fact-card { background: linear-gradient( 145deg, #9f4646, #b65352 60%, #c5635b ) !important; } /* ========================================================== 06. RANGKAIAN ========================================================== */ html body.inception-home-blue-v16 #rangkaian .stage-item { background: linear-gradient( 145deg, #9f4646, #b65352 58%, #c5635b ) !important; } /* ========================================================== 07. TIMELINE CARDS Cards = RED Center line = subtle BLUE ========================================================== */ html body.inception-home-blue-v16 #timeline .timeline-item { background: linear-gradient( 145deg, #9f4646, #b65352 58%, #c5635b ) !important; border: 0 !important; } /* jangan merah garis tengah */ html body.inception-home-blue-v16 .timeline-list::before { background: linear-gradient( 180deg, transparent, rgba(142,173,242,.35) 8%, rgba(142,173,242,.35) 92%, transparent ) !important; box-shadow: none !important; } /* node tetap merah logo */ html body.inception-home-blue-v16 .timeline-dot { background: var(--home-red-card-logo) !important; border: 2px solid var(--home-red-card-light) !important; color: #ffffff !important; box-shadow: none !important; } /* ========================================================== 08. RIWAYAT ========================================================== */ html body.inception-home-blue-v16 .history-feature, html body.inception-home-blue-v16 .riwayat-news-card { background: linear-gradient( 145deg, #934040, #b65352 58%, #c5635b ) !important; border: 0 !important; box-shadow: none !important; } /* Media / photo placeholder tetap gelap, supaya foto nanti tidak ketiban merah. */ html body.inception-home-blue-v16 .history-main-media, html body.inception-home-blue-v16 .riwayat-feature-media, html body.inception-home-blue-v16 .riwayat-gallery-card { background: #10192f !important; } /* ========================================================== 09. HADIAH ========================================================== */ html body.inception-home-blue-v16 #hadiah .prize-card, html body.inception-home-blue-v16 #hadiah .other-prize-card { background: linear-gradient( 145deg, #9f4646, #b65352 58%, #c5635b ) !important; border: 0 !important; } html body.inception-home-blue-v16 #hadiah .prize-card:first-child { border: 0 !important; border-top: 0 !important; box-shadow: none !important; } /* ========================================================== 10. LOKASI / GRAND FINAL ========================================================== */ html body.inception-home-blue-v16 #lokasi .location-card, html body.inception-home-blue-v16 #lokasi .location-contact-card { background: linear-gradient( 145deg, #9f4646, #b65352 58%, #c5635b ) !important; border: 0 !important; box-shadow: none !important; } /* ========================================================== 11. CONTACT TOP LINE User tidak mau garis merah lagi. ========================================================== */ html body.inception-home-blue-v16 .location-contact::before { content: none !important; display: none !important; } /* ========================================================== 12. HOVER Bukan outline. Card cuma dibuat sedikit lebih terang. ========================================================== */ html body.inception-home-blue-v16 :is( .info-card, .fact-card, .stage-item, .timeline-item, .history-feature, .riwayat-news-card, .prize-card, .other-prize-card, .location-card, .location-contact-card ):hover { background: linear-gradient( 145deg, #aa4b4a, #bf5a55 56%, #d57469 ) !important; border: 0 !important; box-shadow: none !important; transform: translateY(-2px); } /* ========================================================== 13. MOBILE ========================================================== */ @media (max-width: 640px) { html body.inception-home-blue-v16 :is( .info-card, .fact-card, .stage-item, .timeline-item, .history-feature, .riwayat-news-card, .prize-card, .other-prize-card, .location-card, .location-contact-card ) { background: linear-gradient( 145deg, #9f4646, #b65352 58%, #c5635b ) !important; border: 0 !important; box-shadow: none !important; } } /* ========================================================== V3.4 — DATE VISIBILITY ========================================================== */ html body.inception-home-blue-v16 .timeline-date { color: #ffffff !important; font-weight: 800 !important; font-size: 13px !important; line-height: 1.35 !important; letter-spacing: .025em !important; opacity: 1 !important; } /* tanggal di card merah jangan dianggap muted */ html body.inception-home-blue-v16 .timeline-item .timeline-date { color: #fff8f6 !important; font-weight: 800 !important; opacity: 1 !important; } /* Grand Final date/value */ html body.inception-home-blue-v16 #lokasi .location-value { font-weight: 700; } /* hero information value */ html body.inception-home-blue-v16 .info-card strong, html body.inception-home-blue-v16 .info-card b { font-weight: 800 !important; } /* V3.5 RIWAYAT FULL RED */ /* ========================================================== RIWAYAT FEATURE ========================================================== */ html body.inception-home-blue-v16 .history-feature { background: linear-gradient( 145deg, #9f4646 0%, #b65352 58%, #c5635b 100% ) !important; border: 0 !important; box-shadow: none !important; } /* Left media + right information panel. These were the remaining dark panels. */ html body.inception-home-blue-v16 .history-feature > * { background: linear-gradient( 145deg, #9f4646 0%, #b65352 60%, #c5635b 100% ) !important; border-color: rgba(255,255,255,.12) !important; box-shadow: none !important; } /* Explicit historical media classes. Only background fallback changes. A future actual image remains visible. */ html body.inception-home-blue-v16 .history-main-media, html body.inception-home-blue-v16 .riwayat-feature-media { background: linear-gradient( 145deg, #934040, #b65352 62%, #c5635b ) !important; border: 0 !important; box-shadow: none !important; } /* ========================================================== RIWAYAT GALLERY ========================================================== */ html body.inception-home-blue-v16 .history-gallery > *, html body.inception-home-blue-v16 .riwayat-gallery-card { background: linear-gradient( 145deg, #9f4646, #b65352 58%, #c5635b ) !important; border: 0 !important; box-shadow: none !important; color: #fff9f6 !important; } html body.inception-home-blue-v16 .history-gallery > * *, html body.inception-home-blue-v16 .riwayat-gallery-card * { color: #fff9f6 !important; } /* Gallery supporting text */ html body.inception-home-blue-v16 .history-gallery > * small, html body.inception-home-blue-v16 .riwayat-gallery-card small { color: #ffe1dc !important; } /* ========================================================== HISTORY INNER METADATA Keep hierarchy but use red-family surfaces. ========================================================== */ html body.inception-home-blue-v16 .history-feature :is( [class*="meta"], [class*="detail"] ) { background: rgba(125,45,48,.28) !important; border-color: rgba(255,225,220,.22) !important; } /* Year pill */ html body.inception-home-blue-v16 .history-feature .history-year { color: #ffffff !important; font-weight: 800 !important; } /* INCEPTION_HOMEPAGE_RED_FILL_V33 END */ /* INCEPTION_PUBLIC_STATS_V43_FIX_CSS START */ /* ========================================================== PUBLIC STATS HERO -> STATS -> ABOUT ========================================================== */ html body.inception-home-blue-v16 .public-stats-section { width: 100%; padding: 52px 24px 56px; background: linear-gradient( 180deg, #294b96 0%, #223f79 100% ); color: #ffffff; } html body.inception-home-blue-v16 .public-stats-shell { width: min( 1180px, 100% ); margin: 0 auto; } html body.inception-home-blue-v16 .public-stats-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 24px; } html body.inception-home-blue-v16 .public-stats-heading > div { min-width: 0; } html body.inception-home-blue-v16 .public-stats-heading > span { display: none; } html body.inception-home-blue-v16 .public-stats-heading h2 { margin: 0 0 8px; color: #fffaf7; font-size: clamp( 28px, 3.5vw, 42px ); font-weight: 800; line-height: 1.05; } html body.inception-home-blue-v16 .public-stats-heading p { max-width: 650px; margin: 0; color: #d4def6; font-size: 14px; line-height: 1.65; } html body.inception-home-blue-v16 .public-stats-grid { display: grid; grid-template-columns: repeat( 3, minmax(0,1fr) ); gap: 16px; } html body.inception-home-blue-v16 .public-stat-card { min-width: 0; padding: 25px; border: 0; border-radius: 19px; background: linear-gradient( 145deg, #9f4646 0%, #b65352 58%, #c5635b 100% ); box-shadow: none; color: #ffffff; } html body.inception-home-blue-v16 .public-stat-card strong { display: block; margin-bottom: 9px; color: #ffffff; font-size: clamp( 38px, 5vw, 58px ); font-weight: 850; line-height: .95; } html body.inception-home-blue-v16 .public-stat-card h3 { margin: 0 0 6px; color: #fffdfb; font-size: 17px; font-weight: 800; } html body.inception-home-blue-v16 .public-stat-card p { margin: 0; color: #ffe1dc; font-size: 12px; line-height: 1.55; } html body.inception-home-blue-v16 .public-stat-card:hover { transform: translateY(-2px); background: linear-gradient( 145deg, #a94848 0%, #ba5753 55%, #cb6b62 100% ); box-shadow: none; } @media ( max-width: 820px ) { html body.inception-home-blue-v16 .public-stats-section { padding: 42px 18px; } html body.inception-home-blue-v16 .public-stats-grid { grid-template-columns: 1fr; } } /* INCEPTION_PUBLIC_STATS_V43_FIX_CSS END */