/* 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; } } /* ========================================================================== Katalog produk + contoh laporan (inc/catalog.php) Dipakai di home-brand.php (3 situs brand) dan page-korporasi.php. Token CVI sama dengan seluruh ekosistem ALDI: hitam #000, emas #D3AB61. ========================================================================== */ .aldi-cat { border-bottom: 1px solid rgba(255,255,255,0.07); } .aldi-cat-in { max-width: 1200px; margin: 0 auto; padding: 80px 40px; } .aldi-cat-eyebrow { font-size: 12px; letter-spacing: .3em; font-weight: 700; color: #D3AB61; text-transform: uppercase; margin-bottom: 16px; } .aldi-cat-h { font-size: clamp(28px, 4vw, 40px); line-height: 1.08; font-weight: 800; color: #fff; margin: 0 0 18px; letter-spacing: -.02em; max-width: 720px; text-wrap: balance; } .aldi-cat-lead { font-size: 16.5px; line-height: 1.75; color: #C4C5C7; margin: 0 0 44px; max-width: 720px; } .aldi-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .aldi-card { display: flex; flex-direction: column; border: 1px solid rgba(211,171,97,.22); border-radius: 5px; background: #050505; overflow: hidden; transition: border-color .18s ease, transform .18s ease; } .aldi-card:hover { border-color: rgba(211,171,97,.55); transform: translateY(-2px); } .aldi-card-thumb { position: relative; display: block; background: #0B0B0B; border-bottom: 1px solid rgba(211,171,97,.18); line-height: 0; } .aldi-card-thumb img { width: 100%; height: 210px; object-fit: cover; object-position: top center; display: block; opacity: .93; transition: opacity .18s ease; } .aldi-card-thumb:hover img { opacity: 1; } .aldi-card-badge { position: absolute; left: 12px; top: 12px; background: #D3AB61; color: #000; font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; line-height: 1; } .aldi-card-body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; } .aldi-card-h { font-size: 18.5px; line-height: 1.25; font-weight: 800; color: #fff; margin: 0 0 12px; letter-spacing: -.01em; text-wrap: balance; } .aldi-card-p { font-size: 14.5px; line-height: 1.72; color: #B7B8BA; margin: 0 0 24px; flex: 1; } .aldi-card-act { display: flex; flex-wrap: wrap; gap: 10px; } .aldi-btn-gold { background: #D3AB61; color: #000 !important; font-size: 13px; font-weight: 700; padding: 12px 20px; border-radius: 3px; text-decoration: none; line-height: 1; display: inline-block; transition: background .18s ease; } .aldi-btn-gold:hover { background: #E4C283; } .aldi-btn-ghost { border: 1px solid rgba(255,255,255,.22); color: #EDEDEE !important; font-size: 13px; font-weight: 600; padding: 12px 18px; border-radius: 3px; text-decoration: none; line-height: 1; display: inline-block; transition: border-color .18s ease, color .18s ease; } .aldi-btn-ghost:hover { border-color: #D3AB61; color: #D3AB61 !important; } .aldi-cat-note { margin: 40px 0 0; font-size: 14.5px; line-height: 1.7; color: #9A9B9E; } .aldi-cat-note a { color: #D3AB61; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 1000px) { .aldi-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 640px) { .aldi-cat-in { padding: 56px 20px; } .aldi-cat-grid { grid-template-columns: 1fr; } .aldi-card-thumb img { height: 200px; } } /* ---- Tier Human Design (page-paket-human-design.php + ringkasan homepage) ---- */ .aldi-tier-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch; } .aldi-tier { display:flex; flex-direction:column; position:relative; border:1px solid rgba(211,171,97,.22); border-radius:5px; background:#050505; padding:30px 26px 28px; } .aldi-tier.is-sorot { border-color:#D3AB61; box-shadow:0 0 0 1px rgba(211,171,97,.35); } .aldi-tier-tag { position:absolute; top:-11px; left:26px; background:#D3AB61; color:#000; font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; padding:5px 10px; border-radius:2px; line-height:1; } .aldi-tier-n { font-size:13px; letter-spacing:.2em; text-transform:uppercase; font-weight:800; color:#D3AB61; margin:0 0 10px; } .aldi-tier-h { font-size:30px; font-weight:800; color:#fff; margin:0 0 6px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .aldi-tier-r { font-size:14.5px; line-height:1.6; color:#EDEDEE; font-weight:600; margin:0 0 6px; } .aldi-tier-u { font-size:13.5px; line-height:1.65; color:#9A9B9E; margin:0 0 20px; font-style:italic; } .aldi-tier ul { list-style:none; margin:0 0 24px; padding:0; flex:1; } .aldi-tier li { font-size:14px; line-height:1.65; color:#B7B8BA; padding:9px 0 9px 22px; position:relative; border-top:1px solid rgba(255,255,255,.07); } .aldi-tier li:first-child { border-top:0; } .aldi-tier li::before { content:"º6"; position:absolute; left:0; top:9px; color:#D3AB61; font-size:12px; } .aldi-tier .aldi-btn-gold, .aldi-tier .aldi-btn-ghost { text-align:center; width:100%; box-sizing:border-box; } .aldi-upg { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:26px; } .aldi-upg-c { border:1px solid rgba(255,255,255,.14); border-radius:5px; padding:24px; background:#030303; } @media (max-width:1000px){ .aldi-tier-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .aldi-tier-grid{grid-template-columns:1fr;} .aldi-upg{grid-template-columns:1fr;} } /* ---- Perbaikan navigasi header ---- *