/* ===================================================================== Literasi Hukum Indonesia — Footer Light Redesign v2 Scope: public footer partials only. Does not override site.css globally. ===================================================================== */ .footer-section.lhi-footer-v2{ --lhi-footer-primary: var(--primary-color, #b91c1c); --lhi-footer-primary-rgb: var(--primary-color-rgb, 185,28,28); --lhi-footer-ink: #0f172a; --lhi-footer-muted: #64748b; --lhi-footer-soft: #f8fafc; --lhi-footer-soft-2: #f1f5f9; --lhi-footer-line: rgba(15,23,42,.09); --lhi-footer-shadow: 0 24px 70px -50px rgba(15,23,42,.55); position: relative; overflow: hidden; isolation: isolate; margin-top: clamp(2.5rem, 5vw, 5.5rem); padding: 0 !important; border-top: 1px solid rgba(15,23,42,.07) !important; background: radial-gradient(720px 280px at 12% 0%, rgba(var(--lhi-footer-primary-rgb),.10), transparent 62%), radial-gradient(560px 260px at 94% 18%, rgba(245,158,11,.12), transparent 58%), linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important; color: var(--lhi-footer-ink); } .footer-section.lhi-footer-v2::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; background: linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(180deg, rgba(15,23,42,.026) 1px, transparent 1px); background-size:64px 64px; mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 74%); opacity:.42; } .footer-section.lhi-footer-v2 .lhi-footer-v2__accent{ position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg, var(--lhi-footer-primary), #ef4444 42%, #f59e0b 100%); z-index:1; } .footer-section.lhi-footer-v2 .lhi-footer-v2__container{ max-width: var(--lhi-public-shell-max, 1180px); position:relative; padding-top: clamp(1.65rem, 3vw, 2.4rem); padding-bottom: clamp(1.35rem, 3vw, 2.2rem); } .footer-section.lhi-footer-v2 a{ color: inherit; text-decoration: none; } .footer-section.lhi-footer-v2 a:focus-visible{ outline: 3px solid rgba(var(--lhi-footer-primary-rgb), .22); outline-offset: 3px; border-radius: 12px; } .footer-section.lhi-footer-v2 .lhi-footer-v2__cta{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem 1.35rem; margin-bottom: clamp(1.35rem, 3vw, 2.1rem); padding: clamp(1.15rem, 2.4vw, 1.8rem); border:1px solid rgba(var(--lhi-footer-primary-rgb),.18); border-radius:28px; background: linear-gradient(135deg, rgba(var(--lhi-footer-primary-rgb),.105), rgba(var(--lhi-footer-primary-rgb),.028) 58%), rgba(255,255,255,.86); box-shadow: var(--lhi-footer-shadow); backdrop-filter: blur(12px); } .footer-section.lhi-footer-v2 .lhi-footer-v2__eyebrow{ display:inline-flex; align-items:center; gap:.48rem; margin-bottom:.55rem; color:var(--lhi-footer-primary); font-size:.74rem; line-height:1.2; font-weight:850; letter-spacing:.11em; text-transform:uppercase; } .footer-section.lhi-footer-v2 .lhi-footer-v2__eyebrow::before{ content:""; width:.56rem; height:.56rem; border-radius:999px; background:var(--lhi-footer-primary); box-shadow:0 0 0 6px rgba(var(--lhi-footer-primary-rgb),.12); } .footer-section.lhi-footer-v2 .lhi-footer-v2__cta-title{ max-width: 21ch; margin:0 0 .45rem; color:#111827; font-size:clamp(1.35rem, 2.2vw, 2.18rem); line-height:1.05; letter-spacing:-.045em; font-weight:850; } .footer-section.lhi-footer-v2 .lhi-footer-v2__cta-text{ max-width:62ch; margin:0; color:#475569; font-size:.98rem; line-height:1.68; } .footer-section.lhi-footer-v2 .lhi-footer-v2__cta-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.7rem; } .footer-section.lhi-footer-v2 .lhi-footer-v2__button{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.68rem 1rem; border-radius:999px; border:1px solid transparent; font-weight:800; font-size:.92rem; line-height:1.1; transition:transform .16s ease, box-shadow .16s ease, color .16s ease, background .16s ease, border-color .16s ease; } .footer-section.lhi-footer-v2 .lhi-footer-v2__button:hover{ transform:translateY(-1px); } .footer-section.lhi-footer-v2 .lhi-footer-v2__button--primary{ background:var(--lhi-footer-primary); border-color:var(--lhi-footer-primary); color:#fff; box-shadow:0 15px 28px -20px rgba(var(--lhi-footer-primary-rgb),.9); } .footer-section.lhi-footer-v2 .lhi-footer-v2__button--primary:hover{ background:#991b1b; border-color:#991b1b; color:#fff; } .footer-section.lhi-footer-v2 .lhi-footer-v2__button--secondary{ background:#fff; border-color:rgba(15,23,42,.12); color:#111827; } .footer-section.lhi-footer-v2 .lhi-footer-v2__button--secondary:hover{ border-color:rgba(var(--lhi-footer-primary-rgb),.26); color:var(--lhi-footer-primary); box-shadow:0 14px 30px -24px rgba(15,23,42,.55); } .footer-section.lhi-footer-v2 .lhi-footer-v2__main{ align-items:stretch; } .footer-section.lhi-footer-v2 .lhi-footer-v2__brand-card, .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-card{ border:1px solid var(--lhi-footer-line); background:rgba(255,255,255,.88); box-shadow:0 18px 46px -40px rgba(15,23,42,.55); } .footer-section.lhi-footer-v2 .lhi-footer-v2__brand-card{ height:100%; padding:clamp(1.1rem, 2.4vw, 1.55rem); border-radius:26px; } .footer-section.lhi-footer-v2 .lhi-footer-v2__brand-link{ display:inline-flex; align-items:center; max-width:100%; } .footer-section.lhi-footer-v2 .lhi-footer-v2__logo-frame{ display:inline-flex; align-items:center; justify-content:center; padding:.62rem .78rem; border-radius:18px; background:#fff; border:1px solid rgba(15,23,42,.08); box-shadow:0 12px 28px -24px rgba(15,23,42,.60); } .footer-section.lhi-footer-v2 .footer-logo, .footer-section.lhi-footer-v2 .lhi-footer-v2__logo{ display:block; height:38px; width:auto; max-width:min(240px, 72vw); object-fit:contain; } .footer-section.lhi-footer-v2 .lhi-footer-v2__about{ margin:1rem 0 0; color:#475569; font-size:.96rem; line-height:1.75; } .footer-section.lhi-footer-v2 .lhi-footer-v2__chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem; } .footer-section.lhi-footer-v2 .lhi-footer-v2__chip{ display:inline-flex; align-items:center; min-height:34px; padding:.48rem .68rem; border-radius:999px; border:1px solid rgba(var(--lhi-footer-primary-rgb),.14); background:rgba(var(--lhi-footer-primary-rgb),.055); color:#7f1d1d; font-size:.82rem; font-weight:780; } .footer-section.lhi-footer-v2 .lhi-footer-v2__chip:hover{ border-color:rgba(var(--lhi-footer-primary-rgb),.24); background:rgba(var(--lhi-footer-primary-rgb),.09); color:var(--lhi-footer-primary); } .footer-section.lhi-footer-v2 .lhi-footer-v2__contact-card{ margin-top:1.05rem; padding:1rem; border-radius:20px; background:linear-gradient(180deg, #f8fafc, #fff); border:1px solid rgba(15,23,42,.07); } .footer-section.lhi-footer-v2 .lhi-footer-v2__contact-title{ margin-bottom:.55rem; color:#0f172a; font-weight:850; font-size:.9rem; letter-spacing:-.01em; } .footer-section.lhi-footer-v2 .lhi-footer-v2__contact-link{ display:flex; align-items:center; gap:.58rem; width:max-content; max-width:100%; color:#475569; font-size:.9rem; line-height:1.35; font-weight:700; padding:.32rem 0; overflow-wrap:anywhere; } .footer-section.lhi-footer-v2 .lhi-footer-v2__contact-link:hover{ color:var(--lhi-footer-primary); } .footer-section.lhi-footer-v2 .lhi-footer-v2__contact-icon{ display:inline-flex; flex:0 0 auto; color:var(--lhi-footer-primary); } .footer-section.lhi-footer-v2 .lhi-footer-v2__address{ margin-top:.55rem; color:#64748b; font-size:.86rem; line-height:1.55; } .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-grid{ display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:.8rem; height:100%; } .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-card{ min-width:0; padding:1rem; border-radius:22px; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; } .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-card:hover{ transform:translateY(-2px); border-color:rgba(var(--lhi-footer-primary-rgb),.18); box-shadow:0 22px 48px -38px rgba(15,23,42,.72); } .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-title{ position:relative; margin:0 0 .78rem; padding-bottom:.62rem; color:#111827; font-size:.94rem; line-height:1.2; letter-spacing:-.015em; font-weight:850; } .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-title::after{ content:""; position:absolute; left:0; bottom:0; width:2rem; height:2px; border-radius:999px; background:linear-gradient(90deg, var(--lhi-footer-primary), rgba(245,158,11,.95)); } .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-list{ list-style:none; padding:0; margin:0; display:grid; gap:.42rem; } .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-link{ display:flex; align-items:center; min-height:30px; color:#64748b; font-size:.9rem; line-height:1.35; font-weight:650; transition:color .14s ease, transform .14s ease; } .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-link::before{ content:""; flex:0 0 auto; width:.35rem; height:.35rem; margin-right:.52rem; border-radius:999px; background:rgba(var(--lhi-footer-primary-rgb),.28); transition:background .14s ease, transform .14s ease; } .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-link:hover{ color:var(--lhi-footer-primary); transform:translateX(2px); } .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-link:hover::before{ background:var(--lhi-footer-primary); transform:scale(1.15); } .footer-section.lhi-footer-v2 .lhi-footer-v2__bottom{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:clamp(1.35rem,3vw,2rem); padding-top:1.15rem; border-top:1px solid rgba(15,23,42,.10); } .footer-section.lhi-footer-v2 .lhi-footer-v2__copyright{ color:#475569; font-size:.9rem; line-height:1.5; font-weight:700; } .footer-section.lhi-footer-v2 .lhi-footer-v2__disclaimer{ max-width:68ch; color:#64748b; font-size:.82rem; line-height:1.55; } .footer-section.lhi-footer-v2 .lhi-footer-v2__bottom-actions{ display:flex; align-items:center; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; } .footer-section.lhi-footer-v2 .lhi-footer-v2__mini-link{ display:inline-flex; align-items:center; min-height:34px; padding:.45rem .68rem; border-radius:999px; color:#64748b; font-size:.84rem; font-weight:800; } .footer-section.lhi-footer-v2 .lhi-footer-v2__mini-link:hover{ background:rgba(var(--lhi-footer-primary-rgb),.06); color:var(--lhi-footer-primary); } .footer-section.lhi-footer-v2 .lhi-footer-v2__social{ display:flex; align-items:center; gap:.42rem; margin-left:.25rem; } .footer-section.lhi-footer-v2 .lhi-footer-v2__social-link{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; border:1px solid rgba(15,23,42,.10); background:#fff; color:#475569; transition:transform .16s ease, color .16s ease, border-color .16s ease, background .16s ease; } .footer-section.lhi-footer-v2 .lhi-footer-v2__social-link:hover{ transform:translateY(-1px); border-color:rgba(var(--lhi-footer-primary-rgb),.25); background:rgba(var(--lhi-footer-primary-rgb),.06); color:var(--lhi-footer-primary); } @media (max-width: 1399.98px){ .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 991.98px){ .footer-section.lhi-footer-v2 .lhi-footer-v2__cta{ grid-template-columns:1fr; } .footer-section.lhi-footer-v2 .lhi-footer-v2__cta-title{ max-width: 24ch; } .footer-section.lhi-footer-v2 .lhi-footer-v2__cta-actions{ justify-content:flex-start; } .footer-section.lhi-footer-v2 .lhi-footer-v2__bottom{ align-items:flex-start; flex-direction:column; } .footer-section.lhi-footer-v2 .lhi-footer-v2__bottom-actions{ justify-content:flex-start; } } @media (max-width: 767.98px){ .footer-section.lhi-footer-v2{ margin-top:2rem; } .footer-section.lhi-footer-v2 .lhi-footer-v2__container{ padding-top:1.35rem; } .footer-section.lhi-footer-v2 .lhi-footer-v2__cta, .footer-section.lhi-footer-v2 .lhi-footer-v2__brand-card, .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-card{ border-radius:20px; } .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:.72rem; } .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-card{ padding:.92rem; } } @media (max-width: 575.98px){ .footer-section.lhi-footer-v2 .lhi-footer-v2__cta-actions, .footer-section.lhi-footer-v2 .lhi-footer-v2__button{ width:100%; } .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-grid{ grid-template-columns:1fr; } .footer-section.lhi-footer-v2 .lhi-footer-v2__bottom-actions{ width:100%; } .footer-section.lhi-footer-v2 .lhi-footer-v2__mini-link{ padding-left:.55rem; padding-right:.55rem; } } html[data-theme="dark"] .footer-section.lhi-footer-v2{ background: radial-gradient(720px 280px at 12% 0%, rgba(var(--lhi-footer-primary-rgb),.16), transparent 62%), radial-gradient(560px 260px at 94% 18%, rgba(245,158,11,.10), transparent 58%), linear-gradient(180deg, #111827 0%, #0f172a 100%) !important; color:#e5e7eb; border-top-color:rgba(255,255,255,.10) !important; } html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__cta, html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__brand-card, html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-card{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); } html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__cta-title, html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-title, html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__contact-title{ color:#f8fafc; } html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__cta-text, html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__about, html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__nav-link, html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__contact-link, html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__address, html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__copyright, html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__disclaimer, html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__mini-link{ color:#cbd5e1; } html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__contact-card{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.10); } html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__button--secondary, html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__logo-frame, html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__social-link{ background:rgba(255,255,255,.08); color:#f8fafc; border-color:rgba(255,255,255,.14); } html[data-theme="dark"] .footer-section.lhi-footer-v2 .lhi-footer-v2__bottom{ border-top-color:rgba(255,255,255,.12); }