/* Theme Name: ALDI - Merancang Kehidupan Theme URI: https://merancangkehidupan.id Author: Advance Life Designer Institute Description: Tema kustom ringan ekosistem ALDI - hitam #000, emas #D3AB61, biru #609CEC, Montserrat, latar serbuk cahaya. Pengganti Elementor. Version: 1.0.0 Requires PHP: 7.4 License: Proprietary Text Domain: aldi */ /* ============================================================ ALDI Corporate Visual Identity (locked) ============================================================ */ :root { --aldi-black: #000000; --aldi-card: #0A0A0B; --aldi-gold: #D3AB61; --aldi-gold-hover: #E4C489; --aldi-blue: #609CEC; --aldi-green: #3EF0A8; --aldi-wa: #1EA34E; --aldi-hairline: rgba(255, 255, 255, 0.07); --aldi-goldline: rgba(211, 171, 97, 0.2); --aldi-cardborder: rgba(255, 255, 255, 0.09); --aldi-text: #EDEDED; --aldi-muted: #9A9A9F; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; color: var(--aldi-text); font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif; font-size: 15px; line-height: 1.75; } /* Black lives on (backmost layer) so the fixed z-index:-1 particle canvas is not painted over by 's own background. body stays transparent. */ html { background: var(--aldi-black); } body { background: transparent; } #bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .aldi-site { position: relative; z-index: 1; background: transparent; } h1, h2, h3, h4, h5 { font-weight: 800; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.2; } h1 { font-size: 46px; } h2 { font-size: 30px; } h3 { font-size: 20px; } @media (max-width: 640px) { h1 { font-size: 32px; } h2 { font-size: 24px; } } a { color: var(--aldi-gold); text-decoration: none; } a:hover { color: var(--aldi-gold-hover); } img { max-width: 100%; height: auto; } .aldi-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; } @media (max-width: 760px) { .aldi-wrap { padding: 0 18px; } } .aldi-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--aldi-gold); border: 1px solid var(--aldi-goldline); border-radius: 3px; padding: 7px 18px; } .aldi-hr { border: 0; border-top: 1px solid var(--aldi-hairline); margin: 34px 0; } .aldi-hr-gold { border-top-color: var(--aldi-goldline); } /* buttons */ .aldi-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; letter-spacing: 0.04em; border-radius: 4px; padding: 14px 26px; text-decoration: none; transition: transform 0.15s ease; border: 0; cursor: pointer; } .aldi-btn:hover { transform: translateY(-2px); } .aldi-btn-gold { background: var(--aldi-gold); color: #000; } .aldi-btn-gold:hover { background: var(--aldi-gold-hover); color: #000; } .aldi-btn-blue { background: transparent; color: var(--aldi-blue); border: 1px solid var(--aldi-blue); } .aldi-btn-blue:hover { border-color: var(--aldi-gold); color: var(--aldi-gold); } /* cards */ .aldi-card { background: var(--aldi-card); border: 1px solid var(--aldi-cardborder); border-radius: 5px; padding: 24px; transition: transform 0.18s ease, border-color 0.18s ease; } .aldi-card:hover { transform: translateY(-3px); border-color: rgba(211, 171, 97, 0.45); } .aldi-card.featured { border-top: 2px solid var(--aldi-gold); } .aldi-grid { display: grid; gap: 18px; } .aldi-grid.c3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .aldi-grid.c4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .aldi-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; } .aldi-tag.gold { color: var(--aldi-gold); border: 1px solid var(--aldi-goldline); } .aldi-tag.solid { color: #000; background: var(--aldi-gold); } .aldi-tag.free { color: #000; background: var(--aldi-green); } /* ---------------- header ---------------- */ #aldi-header { position: sticky; top: 0; z-index: 60; background: rgba(0, 0, 0, 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--aldi-goldline); } #aldi-header .in { display: flex; align-items: center; gap: 26px; height: 68px; } #aldi-header .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } #aldi-header .mono { width: 34px; height: 34px; border: 1.5px solid var(--aldi-gold); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--aldi-gold); font-weight: 900; font-size: 17px; } #aldi-header .word { color: #fff; font-weight: 800; font-size: 13.5px; letter-spacing: 0.08em; } #aldi-header .word small { display: block; color: var(--aldi-muted); font-weight: 500; font-size: 9px; letter-spacing: 0.24em; } #aldi-header nav { flex: 1; } #aldi-header nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; } #aldi-header nav a { color: #CFCFD4; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; padding: 6px 0; border-bottom: 2px solid transparent; } #aldi-header nav li.current-menu-item > a, #aldi-header nav a:hover { color: var(--aldi-gold-hover); border-bottom-color: var(--aldi-gold); } #aldi-header .lang { display: flex; gap: 2px; align-items: center; font-size: 11.5px; font-weight: 700; } #aldi-header .lang a { color: var(--aldi-muted); padding: 3px 6px; border-radius: 3px; } #aldi-header .lang a.on { color: #000; background: var(--aldi-gold); } #aldi-header .cta { background: var(--aldi-gold); color: #000; font-weight: 800; font-size: 12px; letter-spacing: 0.06em; padding: 10px 18px; border-radius: 4px; white-space: nowrap; } #aldi-header .cta:hover { background: var(--aldi-gold-hover); } #aldi-header .burger { display: none; background: none; border: 1px solid var(--aldi-cardborder); color: var(--aldi-gold); border-radius: 4px; width: 38px; height: 38px; font-size: 17px; } @media (max-width: 980px) { #aldi-header nav { display: none; position: absolute; top: 68px; left: 0; right: 0; background: #050506; border-bottom: 1px solid var(--aldi-goldline); padding: 8px 20px 16px; } #aldi-header nav.open { display: block; } #aldi-header nav ul { flex-direction: column; gap: 0; } #aldi-header nav a { display: block; padding: 11px 4px; border-bottom: 1px solid var(--aldi-hairline); } #aldi-header .burger { display: block; margin-left: auto; } #aldi-header .cta { display: none; } } /* ---------------- footer ---------------- */ #aldi-footer { margin-top: 70px; border-top: 1px solid var(--aldi-goldline); background: rgba(5, 5, 6, 0.92); } #aldi-footer .brandrow { display: flex; align-items: flex-start; gap: 22px; padding: 40px 0 26px; border-bottom: 1px solid var(--aldi-hairline); } #aldi-footer .brandrow img { width: 120px; height: auto; border-radius: 6px; flex-shrink: 0; } #aldi-footer .brandrow .nm { color: #fff; font-weight: 800; font-size: 14px; letter-spacing: 0.1em; } #aldi-footer .brandrow .tg { color: var(--aldi-gold); font-weight: 600; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; margin: 5px 0 10px; } #aldi-footer .brandrow .ds { color: var(--aldi-muted); font-size: 12.5px; line-height: 1.8; max-width: 620px; margin: 0; } @media (max-width: 700px) { #aldi-footer .brandrow { flex-direction: column; gap: 14px; } } #aldi-footer .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; padding: 34px 0 30px; } @media (max-width: 860px) { #aldi-footer .grid { grid-template-columns: repeat(2, 1fr); } } #aldi-footer h5 { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--aldi-gold); font-weight: 700; margin: 0 0 13px; } #aldi-footer a, #aldi-footer p { color: #B9B9BF; font-size: 12.5px; line-height: 2; display: block; margin: 0; } #aldi-footer a:hover { color: var(--aldi-gold-hover); } #aldi-footer .base { border-top: 1px solid var(--aldi-hairline); padding: 16px 0 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--aldi-muted); font-size: 11px; letter-spacing: 0.04em; } #aldi-footer .soc a { display: inline-block; margin-left: 14px; font-size: 12px; font-weight: 600; } /* ---------------- WhatsApp ---------------- */ #aldi-wa { position: fixed; right: 22px; bottom: 22px; z-index: 70; display: flex; align-items: center; gap: 9px; background: var(--aldi-wa); color: #fff; padding: 12px 17px; border-radius: 5px; font-weight: 700; font-size: 12.5px; letter-spacing: 0.03em; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); } #aldi-wa:hover { filter: brightness(1.08); color: #fff; } #aldi-wa svg { width: 17px; height: 17px; } @media (max-width: 640px) { #aldi-wa span { display: none; } #aldi-wa { padding: 13px; border-radius: 50%; } } /* ---------------- content / prose (blog & pages) ---------------- */ .aldi-hero { text-align: center; padding: 76px 0 60px; position: relative; } .aldi-hero .lead { color: var(--aldi-muted); font-size: 16px; max-width: 620px; margin: 16px auto 30px; } .aldi-prose { max-width: 760px; margin: 0 auto; padding: 40px 0 20px; } .aldi-prose p, .aldi-prose li { color: var(--aldi-text); font-size: 15px; } .aldi-prose h2 { margin-top: 40px; border-left: 3px solid var(--aldi-gold); padding-left: 14px; } .aldi-prose blockquote { border-left: 3px solid var(--aldi-goldline); margin: 20px 0; padding: 4px 20px; color: var(--aldi-muted); font-style: italic; } .aldi-prose img { border-radius: 5px; } .aldi-meta { color: var(--aldi-muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } /* forms (kontak/beasiswa/CF7/WPForms umum) */ input, select, textarea { background: #0E0E10; color: var(--aldi-text); border: 1px solid var(--aldi-cardborder); border-radius: 4px; padding: 12px 14px; font-family: inherit; font-size: 14px; width: 100%; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--aldi-gold); } input[type="submit"], button[type="submit"] { width: auto; background: var(--aldi-gold); color: #000; font-weight: 800; letter-spacing: 0.04em; border: 0; padding: 13px 26px; cursor: pointer; } input[type="submit"]:hover, button[type="submit"]:hover { background: var(--aldi-gold-hover); } /* ---------------- design-handoff helper classes (.dc.html parity) ---------------- */ html { scroll-behavior: smooth; } ::selection { background: rgba(211, 171, 97, 0.3); color: #fff; } .navlink { color: #B7B8BA; transition: color 0.2s; } .navlink:hover { color: #fff; } .card-lift { transition: border-color 0.2s, transform 0.2s; } .card-lift:hover { border-color: rgba(211, 171, 97, 0.5); transform: translateY(-2px); } .btn-gold { transition: background 0.2s, transform 0.1s; } .btn-gold:hover { background: #E4C489; } .btn-gold:active { transform: translateY(1px); } .btn-ghost { transition: border-color 0.2s, color 0.2s; } .btn-ghost:hover { border-color: rgba(211, 171, 97, 0.7); color: #fff; } /* handoff grids are desktop-first; make them collapse on mobile */ @media (max-width: 860px) { .aldi-site section [style*="grid-template-columns:repeat(4"], .aldi-site section [style*="grid-template-columns:repeat(3"], .aldi-site section [style*="grid-template-columns:1.1fr 1fr"], .aldi-site section [style*="grid-template-columns:240px 1fr"], .aldi-site section [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } .aldi-site section [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; } }