supaya halaman alumunium terasa beda (identitas "metal/steel" sendiri), bukan re-skin halaman arsitek. Dimuat SETELAH css/style.css, css/tukang-cat.css, dan css/service-interactive.css. Catatan: var(--card), var(--ink) dst di bawah ini SEMUA ditulis dengan nilai cadangan (var(--card, #fff) dst) supaya kalau css/style.css atau css/tukang-cat.css gagal/telat ke-load di server, section-section baru di file ini TETAP punya warna dan bingkai — tidak polos putih. Kalau var aslinya ke-load normal, cadangan ini tidak dipakai sama sekali (transparan buat tema asli). ============================================================ */ .page-alumunium{ --al-accent:#46586b; --al-accent-soft:#eef1f4; --al-line:rgba(70,88,107,0.32); --al-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Jaring pengaman terakhir: apapun penyebabnya, halaman ini tidak boleh bisa digeser ke samping di HP. */ overflow-x:hidden; max-width:100vw; } /* DIHAPUS: html:has(...){overflow-x:hidden} — memberi overflow pada membuat jadi scroll container, sehingga header position:sticky berhenti mengambang. body{overflow-x:hidden} di style.css sudah merambat ke viewport, jadi aturan ini memang tidak diperlukan. */ /* Gambar placeholder yang belum diganti foto asli (404) tampil sebagai kotak warna polos, bukan ikon "gambar patah" + teks alt yang berantakan dan bisa memicu halaman scroll ke samping. */ .page-alumunium img{ color:transparent;font-size:0;max-width:100%; } /* ---------- LANG SWITCH & TRANSLATE OVERLAY: jaga-jaga ---------- Duplikat dari service-interactive.css, dengan alasan sama seperti di atas: kalau file itu gagal ke-load, tombol ganti bahasa & overlay loading tetap tampil benar, bukan teks/tombol polos tanpa bingkai. */ @keyframes al-translate-spin{to{transform:rotate(360deg);}} /* ---------- HERO: bingkai frame alumunium (kaca jendela) ---------- */ .page-alumunium .hero-alumunium{position:relative;} .page-alumunium .hero-frame{ position:absolute;top:14px;right:6%;width:220px;height:280px; pointer-events:none;z-index:0;opacity:0.9; } .page-alumunium .hero-alumunium .hero-split{position:relative;z-index:1;} .page-alumunium .hero-alumunium .eyebrow{ font-family:var(--al-mono);letter-spacing:.06em;text-transform:uppercase; border:1px solid var(--al-line);background:var(--al-accent-soft); color:var(--al-accent);padding:5px 12px;border-radius:4px; display:inline-block;font-size:12px; } .page-alumunium .hero-alumunium .hero-media{ border-radius:6px;border:1px solid var(--al-line);box-shadow:none; } /* ---------- FORM KONSULTASI: bingkai + layout lengkap (jaga-jaga) ---------- */ .page-alumunium .wa-form-card{ background:var(--card, #ffffff); border:1px solid var(--card-border, #e4e2d8); box-shadow:0 24px 60px -30px rgba(23,23,15,0.2); border-radius:20px; padding:34px;max-width:620px;margin:0 auto; } .page-alumunium .wa-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .page-alumunium .wa-form-field{display:flex;flex-direction:column;gap:7px;} .page-alumunium .wa-form-field.full{grid-column:1/-1;} .page-alumunium .wa-form-field label{font-size:13px;font-weight:600;color:var(--ink, #201f18);} .page-alumunium .wa-form-field input, .page-alumunium .wa-form-field select, .page-alumunium .wa-form-field textarea{ width:100%;box-sizing:border-box; padding:11px 14px;border-radius:10px; border:1px solid var(--card-border, #d8d6cb); background:var(--bg-alt, #f6f5ef); font-size:14px;color:var(--ink, #201f18);font-family:inherit;resize:vertical; } .page-alumunium .wa-form-field input:focus, .page-alumunium .wa-form-field select:focus, .page-alumunium .wa-form-field textarea:focus{ outline:2px solid var(--al-accent);outline-offset:1px; } .page-alumunium .wa-form-submit{width:100%;margin-top:22px;justify-content:center;} .page-alumunium .wa-form-note{margin-top:14px;font-size:12.5px;color:var(--ink-muted, #6b6a5f);text-align:center;} @media(max-width:560px){ .page-alumunium .wa-form-grid{grid-template-columns:1fr;} .page-alumunium .wa-form-card{padding:24px 20px;} } /* ---------- TOC: aksen warna berbeda ---------- */ .page-alumunium .toc-card{border-left-color:var(--al-accent);} .page-alumunium .toc-card a:hover{color:var(--al-accent);} .page-alumunium .toc-card a::before{background:var(--al-accent);} /* ---------- KALKULATOR: satu pembungkus utuh, form + panel tips ---------- */ .page-alumunium .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .page-alumunium .calc-field{display:flex;flex-direction:column;gap:7px;} .page-alumunium .calc-field.full{grid-column:1/-1;} .page-alumunium .calc-field label{font-size:13px;font-weight:600;color:var(--ink, #201f18);} .page-alumunium .calc-field input, .page-alumunium .calc-field select{ width:100%;box-sizing:border-box; padding:11px 14px;border-radius:10px; border:1px solid var(--card-border, #d8d6cb); background:var(--bg-alt, #f6f5ef); font-size:14px;color:var(--ink, #201f18);font-family:inherit; } .page-alumunium .calc-field input:focus, .page-alumunium .calc-field select:focus{outline:2px solid var(--al-accent);outline-offset:1px;} .page-alumunium .calc-btn{width:100%;margin-top:22px;justify-content:center;} @media(max-width:560px){.page-alumunium .calc-grid{grid-template-columns:1fr;}} .page-alumunium .al-calc-layout{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.75fr); gap:0;align-items:stretch; background:var(--card, #ffffff); border:1px solid var(--card-border, #e4e2d8); border-radius:20px;overflow:hidden; box-shadow:0 24px 60px -30px rgba(23,23,15,0.2); } .page-alumunium .al-calc-layout .calc-card{ margin:0;max-width:none;background:transparent;border:none;box-shadow:none; border-radius:0;padding:32px; border-right:1px solid var(--card-border, #e4e2d8); } .page-alumunium .calc-result{ margin-top:24px;padding:20px 22px;border-radius:14px; font-size:14.5px;color:var(--ink, #201f18);line-height:1.7; background:var(--bg-alt, #f6f5ef); border:1px solid var(--card-border, #e4e2d8); border-left:3px solid var(--al-accent); } .page-alumunium .calc-result:empty{display:none;} .page-alumunium .al-calc-tips{ background:var(--al-accent-soft);border:none;border-radius:0;padding:32px 28px; display:flex;flex-direction:column;justify-content:center; } .page-alumunium .al-calc-tips h4{ font-family:var(--serif, Georgia, serif);font-size:16px;color:var(--al-accent);margin-bottom:12px; } .page-alumunium .al-calc-tips ul{list-style:none;display:flex;flex-direction:column;gap:11px;} .page-alumunium .al-calc-tips li{ font-size:13.5px;color:var(--ink-muted, #6b6a5f);padding-left:16px;position:relative;line-height:1.55; } .page-alumunium .al-calc-tips li::before{content:'—';position:absolute;left:0;color:var(--al-accent);} @media(max-width:860px){ .page-alumunium .al-calc-layout{grid-template-columns:minmax(0,1fr);border-radius:16px;} .page-alumunium .al-calc-layout .calc-card{ border-right:none;border-bottom:1px solid var(--card-border, #e4e2d8);padding:26px 22px; } .page-alumunium .al-calc-tips{padding:24px 22px;} } /* ---------- KENAPA KAMI: kartu aksen kiri, grid 3 kolom ---------- */ .page-alumunium #kenapa-kami .why-grid.al-feature-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px; } .page-alumunium #kenapa-kami .why-grid.al-feature-grid .why-card{ background:var(--card, #ffffff);border:1px solid var(--card-border, #e4e2d8); border-left:3px solid var(--al-accent);border-radius:10px; padding:22px 20px;box-shadow:none;min-width:0; } .page-alumunium #kenapa-kami .why-grid.al-feature-grid .why-ic{ width:38px;height:38px;border-radius:8px; background:var(--al-accent-soft);color:var(--al-accent); display:flex;align-items:center;justify-content:center;margin-bottom:12px; } .page-alumunium #kenapa-kami .why-grid.al-feature-grid h3{font-size:14.5px;margin-bottom:6px;color:var(--ink, #201f18);} .page-alumunium #kenapa-kami .why-grid.al-feature-grid p{font-size:13px;line-height:1.5;color:var(--ink-muted, #6b6a5f);margin:0;} @media(max-width:900px){.page-alumunium #kenapa-kami .why-grid.al-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:560px){.page-alumunium #kenapa-kami .why-grid.al-feature-grid{grid-template-columns:minmax(0,1fr);}} /* ---------- KATALOG & HARGA: filter tab + kartu horizontal ---------- */ .page-alumunium .al-katalog-tabs{ display:flex;gap:8px;overflow-x:auto;padding:2px 2px 14px; margin:32px 0 6px;position:relative;z-index:1; /* border-top transparan: mencegah margin-top di atas "collapse" dengan margin-bottom elemen sebelumnya — pelajaran dari halaman arsitek. */ border-top:1px solid transparent; scrollbar-width:none; } .page-alumunium .al-katalog-tabs::-webkit-scrollbar{display:none;} .page-alumunium .al-ktab{ flex:0 0 auto;padding:9px 16px;border-radius:999px;white-space:nowrap; border:1px solid var(--card-border, #e4e2d8);background:var(--card, #ffffff); color:var(--ink, #201f18);font-size:13px;font-weight:600;cursor:pointer; transition:all .15s ease; } .page-alumunium .al-ktab.active{ background:var(--al-accent);border-color:var(--al-accent);color:#fff; } .page-alumunium .al-katalog-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; } .page-alumunium .al-kcard{ display:flex;gap:16px;background:var(--card, #ffffff); border:1px solid var(--card-border, #e4e2d8);border-radius:14px; padding:16px;position:relative;min-width:0; } .page-alumunium .al-kcard[hidden]{display:none;} .page-alumunium .al-kcard-thumb{ flex:0 0 96px;width:96px;height:96px;border-radius:10px;overflow:hidden; background:var(--al-accent-soft); } .page-alumunium .al-kcard-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .page-alumunium .al-kcard-body{flex:1;min-width:0;display:flex;flex-direction:column;} .page-alumunium .al-kcard-cat{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; color:var(--al-accent);margin-bottom:4px; } .page-alumunium .al-kcard-body h3{font-size:15px;margin:0 0 6px;color:var(--ink, #201f18);} .page-alumunium .al-kcard-body p{font-size:12.5px;line-height:1.5;color:var(--ink-muted, #6b6a5f);margin:0 0 10px;} .page-alumunium .al-kcard-foot{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:auto;flex-wrap:wrap; } .page-alumunium .al-kcard-price{font-size:13.5px;font-weight:700;color:var(--al-accent);} .page-alumunium .al-kcard-price span{font-weight:400;color:var(--ink-muted, #6b6a5f);font-size:11.5px;} .page-alumunium .al-kcard-link{ font-size:12.5px;font-weight:600;color:var(--gold, #a9821f);white-space:nowrap; } @media(max-width:720px){ .page-alumunium .al-katalog-grid{grid-template-columns:minmax(0,1fr);} } .page-alumunium .al-katalog-note{ text-align:center;font-size:12.5px;color:var(--ink-muted, #6b6a5f);margin-top:14px; } /* ---------- JENIS LAYANAN: grid indeks 2 kolom dengan angka besar ---------- */ .page-alumunium #layanan .why-grid.al-service-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px; background:var(--card-border, #e4e2d8);border:1px solid var(--card-border, #e4e2d8); border-radius:16px;overflow:hidden;counter-reset:al-service; } .page-alumunium #layanan .why-grid.al-service-grid .why-card{ background:var(--card, #ffffff);padding:26px 24px;position:relative; counter-increment:al-service;box-shadow:none;border-radius:0; } .page-alumunium #layanan .why-grid.al-service-grid .why-card::after{ content:counter(al-service,decimal-leading-zero); position:absolute;top:18px;right:22px; font-family:var(--al-mono);font-size:26px;font-weight:700; color:transparent;-webkit-text-stroke:1px var(--al-line); } .page-alumunium #layanan .why-grid.al-service-grid .why-ic.on-alt{ background:transparent;border:1px solid var(--al-accent);color:var(--al-accent); border-radius:8px; } @media(max-width:720px){.page-alumunium #layanan .why-grid.al-service-grid{grid-template-columns:minmax(0,1fr);}} /* ---------- FINISHING: kartu bingkai putus-putus + label indeks ---------- */ .page-alumunium #finishing .brand-grid.al-finish-grid{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:al-finish; } .page-alumunium #finishing .brand-grid.al-finish-grid .brand-card{ border:1px solid var(--al-line);border-radius:4px;background:var(--card, #ffffff); position:relative;padding:26px 20px 20px;counter-increment:al-finish; box-shadow:none; } .page-alumunium #finishing .brand-grid.al-finish-grid .brand-card::before{ content:counter(al-finish,decimal-leading-zero); position:absolute;top:-11px;left:16px;background:var(--al-accent); color:#fff;font-family:var(--al-mono);font-size:11px; padding:2px 8px;border-radius:3px; } .page-alumunium #finishing .brand-grid.al-finish-grid .brand-tag{ background:var(--al-accent-soft);color:var(--al-accent);border:none; } @media(max-width:900px){.page-alumunium #finishing .brand-grid.al-finish-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:560px){.page-alumunium #finishing .brand-grid.al-finish-grid{grid-template-columns:minmax(0,1fr);}} /* ---------- PORTFOLIO ---------- */ .page-alumunium #portfolio .portfolio-grid.al-portfolio-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; } .page-alumunium #portfolio .portfolio-grid.al-portfolio-grid .portfolio-visual img{ background:var(--al-accent-soft); } @media(max-width:860px){ .page-alumunium #portfolio .portfolio-grid.al-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:560px){ .page-alumunium #portfolio .portfolio-grid.al-portfolio-grid{grid-template-columns:minmax(0,1fr);} } /* ---------- TESTIMONI: carousel horizontal bergambar ---------- */ .page-alumunium #testimoni .testi-grid.al-testi-carousel{ display:flex;gap:20px;overflow-x:auto;max-width:100%;scroll-snap-type:x mandatory; padding-bottom:10px;margin:0 -4px; scrollbar-width:thin;scrollbar-color:var(--al-accent) transparent; } .page-alumunium #testimoni .testi-grid.al-testi-carousel .testi-card{ flex:0 0 280px;max-width:280px;scroll-snap-align:start;position:relative; min-height:300px;display:flex;flex-direction:column;justify-content:flex-end; border-radius:16px;overflow:hidden;padding:22px;border:none; background-color:var(--al-accent-soft); } .page-alumunium #testimoni .testi-grid.al-testi-carousel .testi-card.has-bg{ background-size:cover;background-position:center;color:#fff; } .page-alumunium #testimoni .testi-grid.al-testi-carousel .testi-card.has-bg::before{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,26,32,0.15) 0%,rgba(20,26,32,0.55) 55%,rgba(20,26,32,0.92) 100%); z-index:0; } .page-alumunium #testimoni .testi-grid.al-testi-carousel .testi-stars, .page-alumunium #testimoni .testi-grid.al-testi-carousel .testi-quote, .page-alumunium #testimoni .testi-grid.al-testi-carousel .testi-author{ position:relative;z-index:1; } .page-alumunium #testimoni .testi-grid.al-testi-carousel .testi-stars{color:#ffc973;font-size:13px;margin-bottom:8px;} .page-alumunium #testimoni .testi-grid.al-testi-carousel .testi-quote{ font-family:var(--serif, Georgia, serif);font-size:15.5px;font-style:italic;color:#fff;line-height:1.5; } .page-alumunium #testimoni .testi-grid.al-testi-carousel .testi-author{ display:flex;align-items:center;gap:10px;margin-top:14px; } .page-alumunium #testimoni .testi-grid.al-testi-carousel .testi-avatar{ background:rgba(255,255,255,0.18);color:#fff;border:1px solid rgba(255,255,255,0.4); } .page-alumunium #testimoni .testi-grid.al-testi-carousel .testi-author h4{color:#fff;} .page-alumunium #testimoni .testi-grid.al-testi-carousel .testi-author span{color:rgba(255,255,255,0.75);} .page-alumunium .al-carousel-hint{ text-align:center;font-size:12.5px;color:var(--ink-muted, #6b6a5f);margin-top:10px; } @media(min-width:900px){.page-alumunium .al-carousel-hint{display:none;}} /* ---------- PROSES: garis waktu vertikal ---------- */ .page-alumunium #proses .why-grid.al-timeline{ display:flex;flex-direction:column;gap:0;position:relative; max-width:700px;margin:0 auto; } .page-alumunium #proses .why-grid.al-timeline::before{ content:'';position:absolute;left:23px;top:6px;bottom:6px;width:1px; background:var(--al-line); } .page-alumunium #proses .why-grid.al-timeline .why-card{ display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px; padding:0 0 32px;position:relative;background:transparent; border:none;box-shadow:none; } .page-alumunium #proses .why-grid.al-timeline .why-card:last-child{padding-bottom:0;} .page-alumunium #proses .why-grid.al-timeline .why-ic.is-step{ grid-column:1;grid-row:1; width:48px;height:48px;border-radius:999px;flex-shrink:0; background:var(--al-accent);color:#fff; display:flex;align-items:center;justify-content:center; font-family:var(--al-mono);font-weight:700;position:relative;z-index:1; } .page-alumunium #proses .why-grid.al-timeline .why-card h3{ grid-column:2;grid-row:1;margin-bottom:4px;padding-top:10px; } .page-alumunium #proses .why-grid.al-timeline .why-card p{ grid-column:2;grid-row:2;margin:0; } /* ---------- GARANSI & PEMBAYARAN: dua kartu info ringkas ---------- */ .page-alumunium .al-info-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; } .page-alumunium .al-info-card{ background:var(--card, #ffffff);border:1px solid var(--card-border, #e4e2d8); border-radius:14px;padding:24px;min-width:0; } .page-alumunium .al-info-card h3{ display:flex;align-items:center;gap:10px;font-size:15.5px;color:var(--al-accent);margin-bottom:10px; } .page-alumunium .al-info-card h3 svg{flex-shrink:0;} .page-alumunium .al-info-card ol, .page-alumunium .al-info-card ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;} .page-alumunium .al-info-card li{font-size:13.5px;line-height:1.55;color:var(--ink-muted, #6b6a5f);} @media(max-width:720px){.page-alumunium .al-info-grid{grid-template-columns:minmax(0,1fr);}} /* ---------- AREA: sentuhan ringan ---------- */ .page-alumunium #area .chip{border-radius:4px;} .page-alumunium #area .cta-card{border:1px dashed var(--al-line);} /* ---------- FAQ: akordeon bernomor ---------- */ .page-alumunium #faq .faq-list.al-faq-list{display:flex;flex-direction:column;gap:10px;counter-reset:al-faq;} .page-alumunium #faq .faq-list.al-faq-list .faq-item{ border:1px solid var(--card-border, #e4e2d8);border-left:3px solid var(--al-accent); border-radius:8px;background:var(--card, #ffffff);counter-increment:al-faq; } .page-alumunium #faq .faq-list.al-faq-list .faq-item summary{padding-left:44px;position:relative;} .page-alumunium #faq .faq-list.al-faq-list .faq-item summary::before{ content:counter(al-faq,decimal-leading-zero); position:absolute;left:16px;top:50%;transform:translateY(-50%); font-family:var(--al-mono);font-size:12px;color:var(--al-accent); } /* ---------- SAFETY NET: cegah scroll horizontal dari elemen manapun ---------- */ .page-alumunium main{max-width:100vw;overflow-x:clip;} .page-alumunium .wrap{min-width:0;} /* Blok .lp- dipindah ke css/layanan.css (dipakai bersama semua halaman). */