/* * ═══════════════════════════════════════════════════════════════ * umkmdetail_fj26.css * "#umkmdetail" — UMKM store detail page: a two-column profile card * (description + contact + marketplace/social links on the left, * an image panel on the right), a flat brochure/catalogue list * (document name left, download icon right — no thumbnails), and a * clickable product grid with a lightbox-style order modal. * Reuses --fj26-* tokens (color_fj26_override.css) and the shared * .fj26-eyebrow / .fj26-grad-text / .fj26-pub-headwrap components * (about_fesyar_fj26.css / publikasi_fj26.css). Loaded LAST in * so nothing existing needs to change. * Pairs with /asset_easy/js_town/umkmdetail_fj26.js for the * copy-phone-number button and the product order modal. * ═══════════════════════════════════════════════════════════════ */ #umkmdetail{ position:relative; background: radial-gradient(ellipse 55% 60% at 92% 6%, rgba(30,111,255,0.13), transparent 60%), radial-gradient(ellipse 60% 55% at 4% 94%, rgba(23,201,148,0.13), transparent 60%) !important; } /* right-align the subheader hero (title/underline/breadcrumb) — scoped to this page only since umkmdetail_fj26.css isn't loaded elsewhere */ #subheader .fj26-subhdr-inner{ align-items:flex-end; text-align:right; } /* ══════════════════════════════════════════════════════ STORE PROFILE CARD — description left, image panel right ══════════════════════════════════════════════════════ */ .fj26-umkm-profile{ position:relative; border-radius:22px; overflow:hidden; margin-bottom:56px; padding:32px; background:linear-gradient(160deg, rgba(10,20,66,0.7), rgba(10,23,112,0.4)); border:1px solid rgba(53,225,255,0.18); } .fj26-umkm-profile-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:36px; align-items:stretch; } .fj26-umkm-profile-left{ display:flex; flex-direction:column; } .fj26-umkm-name{ margin:12px 0 12px; font-family:'Exo', sans-serif; font-weight:800; font-size:30px; line-height:1.2; } .fj26-umkm-desc{ max-width:600px; margin:0; color:var(--fj26-muted,rgba(230,240,255,0.68)); font-family:'Barlow', Arial, sans-serif; font-size:14.5px; line-height:1.7; } /* ── image panel (right column) ── */ .fj26-umkm-profile-right{ display:flex; } .fj26-umkm-imgpanel{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; width:100%; min-height:280px; border-radius:20px; background: radial-gradient(ellipse 75% 65% at 20% 15%, rgba(30,111,255,0.5), transparent 60%), radial-gradient(ellipse 70% 60% at 85% 85%, rgba(23,201,148,0.35), transparent 62%), linear-gradient(160deg, #0A1442 0%, #0A2A5E 100%); background-size:cover; background-position:center; border:1px solid rgba(53,225,255,0.22); box-shadow:0 20px 44px rgba(0,0,0,0.35); } .fj26-umkm-imgpanel-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,11,34,0.2) 0%, rgba(5,11,34,0.78) 100%); } .fj26-umkm-imgpanel-dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.14) 1.4px, transparent 1.4px); background-size:20px 20px; pointer-events:none; } .fj26-umkm-imgpanel-ring{ position:absolute; width:150px; height:150px; border-radius:50%; border:1.5px dashed rgba(53,225,255,0.4); animation:fj26UmkmRingSpin 16s linear infinite; } @keyframes fj26UmkmRingSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } .fj26-umkm-imgpanel-icon{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:112px; height:112px; border-radius:50%; color:var(--fj26-navy-deepest,#050B22); background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF)); box-shadow:0 14px 30px rgba(0,0,0,0.4); animation:fj26UmkmIconFloat 4.5s ease-in-out infinite; } @keyframes fj26UmkmIconFloat{ 0%, 100%{ transform:translateY(0); box-shadow:0 14px 30px rgba(0,0,0,0.4), 0 0 0 rgba(53,225,255,0); } 50%{ transform:translateY(-10px); box-shadow:0 14px 30px rgba(0,0,0,0.4), 0 0 26px rgba(53,225,255,0.5); } } .fj26-umkm-imgpanel-label{ position:relative; z-index:1; padding:6px 16px; border-radius:20px; background:rgba(5,11,34,0.55); border:1px solid rgba(53,225,255,0.3); color:var(--fj26-white,#F3F7FF); font-family:'Exo', sans-serif; font-weight:700; font-size:12.5px; text-align:center; } /* ── contact row ── */ .fj26-umkm-contact-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; } .fj26-umkm-contact-item{ position:relative; display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:14px; background:rgba(53,225,255,0.06); border:1px solid rgba(53,225,255,0.16); } .fj26-umkm-contact-icon{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; color:var(--fj26-cyan,#35E1FF); background:rgba(53,225,255,0.1); } .fj26-umkm-contact-text{ display:flex; flex-direction:column; gap:2px; } .fj26-umkm-contact-label{ font-family:'Barlow', Arial, sans-serif; font-weight:700; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:rgba(230,240,255,0.5); } .fj26-umkm-contact-value{ font-family:'Exo', sans-serif; font-weight:700; font-size:14px; color:var(--fj26-white,#F3F7FF); } .fj26-umkm-copy-btn{ display:inline-flex; align-items:center; gap:6px; margin-left:6px; padding:6px 12px; border-radius:20px; border:1px solid rgba(53,225,255,0.3); background:transparent; color:var(--fj26-cyan,#35E1FF); font-family:'Exo', sans-serif; font-weight:700; font-size:11px; cursor:pointer; transition:background .25s ease, color .25s ease, transform .25s ease; } .fj26-umkm-copy-btn:hover{ background:rgba(53,225,255,0.14); transform:translateY(-1px); } .fj26-umkm-copy-btn.is-copied{ background:var(--fj26-green,#17C994); border-color:var(--fj26-green,#17C994); color:var(--fj26-navy-deepest,#050B22); } /* ── link groups (marketplace / social) ── */ .fj26-umkm-linkgroup{ margin-top:20px; } .fj26-umkm-linkgroup-title{ display:block; margin-bottom:12px; font-family:'Barlow', Arial, sans-serif; font-weight:700; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:rgba(230,240,255,0.55); } .fj26-umkm-market-row{ display:flex; flex-wrap:wrap; gap:10px; } .fj26-umkm-market{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:24px; color:var(--fj26-navy-deepest,#050B22) !important; background:linear-gradient(135deg, var(--fj26-gold,#E8C766), #f6e3a8); font-family:'Exo', sans-serif; font-weight:700; font-size:13px; text-decoration:none !important; box-shadow:0 6px 16px rgba(232,199,102,0.25); transition:transform .3s ease, box-shadow .3s ease; } .fj26-umkm-market:before{ content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,0.6), transparent); transform:skewX(-20deg); transition:left .6s ease; } .fj26-umkm-market:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(232,199,102,0.4); } .fj26-umkm-market:hover:before{ left:130%; } .fj26-umkm-social-row{ display:flex; flex-wrap:wrap; gap:10px; } .fj26-umkm-social{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:rgba(53,225,255,0.08); border:1px solid rgba(53,225,255,0.22); color:var(--fj26-cyan,#35E1FF); font-size:15px; transition:transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease; } .fj26-umkm-social:hover{ transform:translateY(-3px) scale(1.08); color:var(--fj26-navy-deepest,#050B22); background:var(--fj26-cyan,#35E1FF); border-color:var(--fj26-cyan,#35E1FF); } .fj26-umkm-social.is-disabled{ opacity:.35; pointer-events:none; cursor:not-allowed; } /* every clickable (non-disabled) icon gets a bright, solid-fill resting state instead of the dim translucent default — WhatsApp still stands out further via its own green .is-highlighted below */ .fj26-umkm-social:not(.is-disabled):not(.is-highlighted){ color:var(--fj26-navy-deepest,#050B22); background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF)); border-color:var(--fj26-cyan,#35E1FF); box-shadow:0 6px 16px rgba(53,225,255,0.3); } /* WhatsApp called out as the primary contact channel */ .fj26-umkm-social.is-highlighted{ color:#fff; background:linear-gradient(135deg, #1FBE68, #25D366); border-color:#25D366; box-shadow:0 0 0 rgba(37,211,102,0.5); animation:fj26UmkmSocialGlow 2.4s ease-in-out infinite; } .fj26-umkm-social.is-highlighted:hover{ color:#fff; background:linear-gradient(135deg, #25D366, #1FBE68); border-color:#25D366; transform:translateY(-3px) scale(1.12); } @keyframes fj26UmkmSocialGlow{ 0%, 100%{ box-shadow:0 0 0 rgba(37,211,102,0.45); } 50%{ box-shadow:0 0 16px rgba(37,211,102,0.75); } } @media (max-width:991px){ .fj26-umkm-profile-grid{ grid-template-columns:1fr; } .fj26-umkm-profile-right{ order:-1; } .fj26-umkm-imgpanel{ min-height:220px; } } @media (max-width:767px){ .fj26-umkm-profile{ padding:22px; } .fj26-umkm-name{ font-size:24px; } } /* ══════════════════════════════════════════════════════ BROCHURE LIST — document name left, download icon right ══════════════════════════════════════════════════════ */ .fj26-umkm-brochure-list{ display:flex; flex-direction:column; gap:12px; max-width:720px; margin-bottom:56px; } .fj26-umkm-brochure-item{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:14px; background:linear-gradient(160deg, rgba(10,20,66,0.65), rgba(10,23,112,0.35)); border:1px solid rgba(53,225,255,0.16); text-decoration:none !important; transition:border-color .25s ease, background .25s ease, transform .25s ease; } .fj26-umkm-brochure-item:not(.is-disabled):hover{ border-color:rgba(53,225,255,0.4); background:linear-gradient(160deg, rgba(10,20,66,0.8), rgba(10,23,112,0.5)); transform:translateX(4px); } .fj26-umkm-brochure-icon{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:rgba(53,225,255,0.1); color:var(--fj26-cyan,#35E1FF); } .fj26-umkm-brochure-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; } .fj26-umkm-brochure-name{ font-family:'Exo', sans-serif; font-weight:700; font-size:14px; color:var(--fj26-white,#F3F7FF); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fj26-umkm-brochure-status{ font-family:'Barlow', Arial, sans-serif; font-size:11.5px; color:rgba(230,240,255,0.5); } .fj26-umkm-brochure-download{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; color:var(--fj26-navy-deepest,#050B22); background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF)); transition:transform .3s ease, box-shadow .3s ease; } .fj26-umkm-brochure-item:not(.is-disabled):hover .fj26-umkm-brochure-download{ transform:scale(1.1); box-shadow:0 6px 16px rgba(53,225,255,0.4); } .fj26-umkm-brochure-item.is-disabled{ cursor:not-allowed; opacity:.6; } .fj26-umkm-brochure-item.is-disabled .fj26-umkm-brochure-download{ background:rgba(230,240,255,0.12); color:rgba(230,240,255,0.55); } /* ══════════════════════════════════════════════════════ PRODUCT GRID ══════════════════════════════════════════════════════ */ .fj26-umkm-product{ margin-bottom:28px; } .fj26-umkm-product-thumb{ position:relative; display:block; width:100%; aspect-ratio:1 / 1; padding:0; border:1px solid rgba(53,225,255,0.18); border-radius:18px; overflow:hidden; cursor:zoom-in; background: radial-gradient(ellipse 75% 65% at 20% 15%, rgba(30,111,255,0.5), transparent 60%), radial-gradient(ellipse 70% 60% at 85% 85%, rgba(53,225,255,0.35), transparent 62%), linear-gradient(160deg, #0A1442 0%, #0A2A5E 100%); background-size:cover; background-position:center; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .fj26-umkm-product-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,11,34,0.1) 0%, rgba(5,11,34,0.6) 100%); } .fj26-umkm-product-food{ background: radial-gradient(ellipse 75% 65% at 20% 15%, rgba(23,201,148,0.5), transparent 60%), radial-gradient(ellipse 70% 60% at 85% 85%, rgba(232,199,102,0.35), transparent 62%), linear-gradient(160deg, #0A1442 0%, #0A2A5E 100%); } .fj26-umkm-product-thumb:hover{ transform:translateY(-5px); border-color:rgba(53,225,255,0.45); box-shadow:0 16px 34px rgba(0,0,0,0.35), 0 0 22px rgba(53,225,255,0.15); } .fj26-umkm-product-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(243,247,255,0.85); filter:drop-shadow(0 10px 18px rgba(0,0,0,0.4)); animation:fj26UmkmProductFloat 5s ease-in-out infinite; } @keyframes fj26UmkmProductFloat{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } } .fj26-umkm-product-thumb:hover .fj26-umkm-product-icon{ animation-play-state:paused; transform:translateY(-4px) scale(1.08) !important; } .fj26-umkm-product-zoom{ position:absolute; right:10px; bottom:10px; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:rgba(5,11,34,0.55); border:1px solid rgba(255,255,255,0.28); color:#fff; opacity:0; transform:scale(.7); transition:opacity .3s ease, transform .3s ease; } .fj26-umkm-product-thumb:hover .fj26-umkm-product-zoom{ opacity:1; transform:scale(1); } .fj26-umkm-product-body{ padding:12px 4px 0; } .fj26-umkm-product-body h4{ margin:0 0 4px; font-family:'Exo', sans-serif; font-weight:700; font-size:14px; color:var(--fj26-white,#F3F7FF); } /* ── description row — short text with trailing dots, expands to the full description on click with a sliding height reveal ── */ .fj26-umkm-product-desc{ display:flex; align-items:flex-start; gap:8px; width:100%; margin:0 0 10px; padding:0; border:none; background:none; text-align:left; cursor:pointer; } .fj26-umkm-product-desc-text{ flex:1 1 auto; display:block; overflow:hidden; max-height:2.9em; font-family:'Barlow', Arial, sans-serif; font-size:11.5px; line-height:1.55; color:rgba(230,240,255,0.6); transition:color .25s ease, max-height .35s ease; } .fj26-umkm-product-desc:hover .fj26-umkm-product-desc-text{ color:rgba(230,240,255,0.85); } .fj26-umkm-product-desc-chevron{ flex:0 0 auto; display:flex; margin-top:3px; color:var(--fj26-cyan,#35E1FF); transition:transform .3s ease; } .fj26-umkm-product-desc[aria-expanded="true"] .fj26-umkm-product-desc-chevron{ transform:rotate(180deg); } .fj26-umkm-product-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .fj26-umkm-product-price{ font-family:'Barlow', Arial, sans-serif; font-weight:700; font-size:13px; color:var(--fj26-cyan,#35E1FF); } .fj26-umkm-product-download{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:none; border-radius:50%; color:var(--fj26-navy-deepest,#050B22); background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF)); cursor:pointer; transition:transform .3s ease, box-shadow .3s ease; } .fj26-umkm-product-download:hover{ transform:scale(1.12); box-shadow:0 6px 16px rgba(53,225,255,0.4); } /* ══════════════════════════════════════════════════════ PRODUCT + BROCHURE SPLIT — Produk Kami (col-md-8) left, Brosur & Katalog (col-md-4) right ══════════════════════════════════════════════════════ */ .fj26-umkm-split-brochure{ border-left:1px solid rgba(53,225,255,0.14); padding-left:32px; } @media (max-width:991px){ .fj26-umkm-split-brochure{ border-left:none; border-top:1px solid rgba(53,225,255,0.14); padding-left:15px; padding-top:32px; margin-top:8px; } } /* ══════════════════════════════════════════════════════ PRODUCT ORDER MODAL ══════════════════════════════════════════════════════ */ body.fj26-umkm-modal-lock{ overflow:hidden; } .fj26-umkm-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; visibility:hidden; opacity:0; transition:opacity .3s ease, visibility 0s linear .3s; } .fj26-umkm-modal.is-open{ visibility:visible; opacity:1; transition:opacity .3s ease, visibility 0s linear 0s; } .fj26-umkm-modal-backdrop{ position:absolute; inset:0; background:rgba(3,7,20,0.88); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .fj26-umkm-modal-inner{ position:relative; z-index:1; width:100%; max-width:360px; display:flex; flex-direction:column; align-items:center; padding:32px 26px 26px; border-radius:20px; background:linear-gradient(160deg, #0A1442 0%, #0A2A5E 100%); border:1px solid rgba(53,225,255,0.28); box-shadow:0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(53,225,255,0.18); transform:scale(.92); transition:transform .35s cubic-bezier(.34,1.56,.64,1); } .fj26-umkm-modal.is-open .fj26-umkm-modal-inner{ transform:scale(1); } .fj26-umkm-modal-icon{ display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%; margin-bottom:18px; color:var(--fj26-navy-deepest,#050B22); background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF)); box-shadow:0 10px 26px rgba(0,0,0,0.4); } .fj26-umkm-modal-name{ margin:0 0 8px; font-family:'Exo', sans-serif; font-weight:800; font-size:19px; color:var(--fj26-white,#F3F7FF); text-align:center; } .fj26-umkm-modal-price{ display:inline-block; margin-bottom:22px; padding:5px 16px; border-radius:20px; background:rgba(53,225,255,0.12); border:1px solid rgba(53,225,255,0.3); color:var(--fj26-cyan,#35E1FF); font-family:'Exo', sans-serif; font-weight:700; font-size:14px; } .fj26-umkm-modal-order{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; border-radius:24px; color:#fff !important; background:linear-gradient(135deg, #1FBE68, #17C994); font-family:'Exo', sans-serif; font-weight:700; font-size:14px; text-decoration:none !important; box-shadow:0 8px 20px rgba(23,201,148,0.35); transition:transform .3s ease, box-shadow .3s ease; } .fj26-umkm-modal-order:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(23,201,148,0.5); } .fj26-umkm-modal-close{ position:absolute; top:-46px; right:0; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(10,20,66,0.75); border:1px solid rgba(53,225,255,0.35); color:var(--fj26-white,#F3F7FF); cursor:pointer; padding:0; transition:background .25s ease, transform .25s ease, border-color .25s ease; } .fj26-umkm-modal-close:hover{ background:rgba(53,225,255,0.22); border-color:var(--fj26-cyan,#35E1FF); transform:rotate(90deg); } .fj26-umkm-modal-close:focus-visible{ outline:2px solid var(--fj26-cyan,#35E1FF); outline-offset:2px; } @media (max-width:600px){ .fj26-umkm-modal-close{ top:auto; bottom:calc(100% + 10px); right:0; } } @media (prefers-reduced-motion: reduce){ .fj26-umkm-imgpanel-ring, .fj26-umkm-imgpanel-icon, .fj26-umkm-product-icon{ animation:none !important; } .fj26-umkm-market, .fj26-umkm-social, .fj26-umkm-copy-btn, .fj26-umkm-brochure-item, .fj26-umkm-brochure-download, .fj26-umkm-product-thumb, .fj26-umkm-product-icon, .fj26-umkm-product-download, .fj26-umkm-product-desc-text, .fj26-umkm-product-desc-chevron, .fj26-umkm-modal, .fj26-umkm-modal-inner, .fj26-umkm-modal-close, .fj26-umkm-modal-order{ transition:none !important; } }