/* ======================================== SHUNET — Design Tokens & Shop Detail Page Drop into your PHP template's : ======================================== */ @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* Brand colors */ --bg: #f5f1ea; --paper: #fbf8f3; --ink: #1c1a16; --ink-2: #4a463e; --ink-3: #8a8479; --line: #e5dfd3; --line-2: #efeae0; --sage: #8aa97a; --sage-deep: #5a7a4d; --sage-soft: #e8efe1; --clay: #c97a4a; --clay-soft: #f5e3d6; --gold: #c9a04a; --plum: #7a4a6a; --berry: #b85a6a; /* Brand colors for messaging */ --ig-grad: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); --tg-grad: linear-gradient(135deg, #2aabee, #229ed9); --wa: #25d366; --bale: #1e88e5; --rubika-grad: linear-gradient(135deg, #ff7a4d, #e84a3a); } /* ===== Reset & base ===== */ * { box-sizing: border-box; } body.shunet-detail { margin: 0; background: var(--bg); font-family: 'Vazirmatn', system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; direction: rtl; } .shunet-detail .mono { font-family: 'JetBrains Mono', monospace; } .shunet-detail button { font-family: inherit; cursor: pointer; } .shunet-detail svg { display: block; } /* ===== Page container ===== */ .shunet-detail .page { max-width: 480px; margin: 0 auto; background: var(--bg); min-height: 100vh; position: relative; padding-bottom: 100px; /* room for sticky CTA */ } /* ===== Top nav (header) ===== */ .shunet-detail .topnav { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } .shunet-detail .topnav .brand { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; } .shunet-detail .topnav .back-pill { background: var(--paper); border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .shunet-detail .topnav .lang { display: flex; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 2px; font-size: 11px; } .shunet-detail .topnav .lang a { padding: 4px 9px; border-radius: 999px; color: var(--ink-3); text-decoration: none; } .shunet-detail .topnav .lang a.on { background: var(--sage-soft); color: var(--sage-deep); font-weight: 700; } /* ===== Cover hero ===== */ .shunet-detail .cover { height: 280px; position: relative; overflow: hidden; } .shunet-detail .cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .shunet-detail .cover .cover-fallback { position: absolute; inset: 0; background: linear-gradient(135deg, #c97a4a 0%, #8a3a2a 50%, #5a2a1a 100%); } .shunet-detail .cover .grain { position: absolute; inset: 0; opacity: 0.4; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 4px); } .shunet-detail .cover .ribbon { position: absolute; top: 16px; inset-inline-end: -2px; background: var(--sage-deep); color: white; padding: 5px 12px 5px 14px; border-radius: 6px 0 0 6px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; z-index: 5; box-shadow: 0 4px 12px rgba(90,122,77,0.4); } /* ===== Shop header card (overlaps cover) ===== */ .shunet-detail .shop-header { position: relative; z-index: 10; margin: -56px 16px 0; background: var(--paper); border-radius: 20px; padding: 16px; border: 1px solid var(--line); box-shadow: 0 16px 32px -16px rgba(60,40,20,0.18); } .shunet-detail .shop-header .top-row { display: flex; gap: 14px; align-items: flex-start; } .shunet-detail .shop-av { width: 64px; height: 64px; border-radius: 16px; border: 4px solid var(--paper); margin-top: -36px; box-shadow: 0 6px 16px rgba(60,40,20,0.18); display: grid; place-items: center; font-size: 22px; font-weight: 800; color: white; flex-shrink: 0; /* color set inline per shop, e.g. style="background: linear-gradient(...)" */ } .shunet-detail .shop-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; } .shunet-detail .shop-meta { flex: 1; min-width: 0; padding-top: 2px; } .shunet-detail .shop-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 3px; line-height: 1.2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; word-break: break-word; } .shunet-detail .vcheck { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--sage-deep); color: white; flex-shrink: 0; } .shunet-detail .vcheck svg { width: 9px; height: 9px; } .shunet-detail .shop-handle { font-size: 12px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; direction: ltr; text-align: right; unicode-bidi: embed; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shunet-detail .shop-pills { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; } .shunet-detail .pill { font-size: 10px; padding: 3px 8px; border-radius: 999px; font-weight: 600; } .shunet-detail .pill--clay { background: var(--clay-soft); color: var(--clay); } .shunet-detail .pill--gold { background: #f5ecd6; color: #8a6a2a; } .shunet-detail .pill--plum { background: #f0e2ec; color: var(--plum); } .shunet-detail .pill--sage { background: var(--sage-soft); color: var(--sage-deep); } .shunet-detail .pill--neutral { background: var(--bg); color: var(--ink-2); } /* Stats strip */ .shunet-detail .stats { display: flex; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line-2); } .shunet-detail .stat { flex: 1; text-align: center; position: relative; } .shunet-detail .stat + .stat::before { content: ''; position: absolute; right: 0; top: 4px; bottom: 4px; width: 1px; background: var(--line-2); } .shunet-detail .stat .v { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 3px; } .shunet-detail .stat .v.muted { color: var(--ink-3); font-weight: 700; } .shunet-detail .stat .v.like-color { color: var(--sage-deep); } .shunet-detail .stat .v svg.star { width: 13px; height: 13px; color: var(--gold); } .shunet-detail .stat .l { font-size: 10px; color: var(--ink-3); margin-top: 2px; } /* ===== Sections ===== */ .shunet-detail .section { padding: 18px 16px 0; } .shunet-detail .section-title { font-size: 11px; font-weight: 700; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; } /* About */ .shunet-detail .about-text { font-size: 14px; line-height: 1.7; color: var(--ink-2); } .shunet-detail .about-text .more { color: var(--sage-deep); font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; } /* Info grid */ .shunet-detail .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .shunet-detail .info-cell { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; min-width: 0; } .shunet-detail .info-cell .ic { width: 32px; height: 32px; border-radius: 8px; background: var(--bg); display: grid; place-items: center; color: var(--ink-2); flex-shrink: 0; } .shunet-detail .info-cell .ic svg { width: 16px; height: 16px; } .shunet-detail .info-cell .k { font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-family: 'JetBrains Mono', monospace; } .shunet-detail .info-cell .v { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 1px; line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; } /* Channels */ .shunet-detail .channels-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .shunet-detail .channels-head h3 { margin: 0; } .shunet-detail .channels-head .count { font-size: 10px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; } .shunet-detail .channels { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .shunet-detail .channel { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: all 0.15s; text-decoration: none; color: inherit; min-width: 0; overflow: hidden; } .shunet-detail .channel:hover { transform: translateY(-1px); border-color: var(--ink); } .shunet-detail .channel:active { transform: scale(0.97); } .shunet-detail .channel .br { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; } .shunet-detail .channel .br svg { width: 36px; height: 36px; border-radius: 10px; } .shunet-detail .channel .lbl { font-size: 12px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shunet-detail .channel .sub { font-size: 9px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; direction: ltr; unicode-bidi: embed; max-width: 100%; line-height: 1.4; overflow: hidden; overflow-wrap: anywhere; word-break: break-word; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Vote bar */ .shunet-detail .votes { margin: 16px 16px 0; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; } .shunet-detail .votes .q { font-size: 13px; font-weight: 600; color: var(--ink); } .shunet-detail .votes .q .s { font-size: 10px; color: var(--ink-3); font-weight: 500; } .shunet-detail .vote-btns { display: flex; gap: 6px; } .shunet-detail .vote-btns button { border: 1px solid var(--line); background: var(--bg); padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all 0.15s; } .shunet-detail .vote-btns button.is-up { color: var(--sage-deep); border-color: var(--sage-soft); background: var(--sage-soft); } .shunet-detail .vote-btns button.is-down { color: var(--berry); border-color: #f4d6da; background: #fbeaec; } .shunet-detail .vote-btns svg { width: 12px; height: 12px; } /* Reviews empty */ .shunet-detail .reviews-empty { margin: 16px 16px 0; padding: 14px; background: var(--paper); border: 1px dashed var(--line); border-radius: 14px; display: flex; align-items: center; gap: 12px; } .shunet-detail .reviews-empty .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--bg); display: grid; place-items: center; color: var(--ink-3); flex-shrink: 0; } .shunet-detail .reviews-empty .tx { flex: 1; } .shunet-detail .reviews-empty .tx h4 { font-size: 14px; font-weight: 700; margin: 0 0 2px; } .shunet-detail .reviews-empty .tx p { font-size: 12px; color: var(--ink-3); margin: 0; line-height: 1.5; } .shunet-detail .reviews-empty .btn { background: var(--ink); color: var(--paper); border: 0; padding: 7px 12px; border-radius: 9px; font-weight: 600; font-size: 12px; } /* ===== Sticky CTA ===== */ .shunet-detail .sticky-cta { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: rgba(251,248,243,0.96); backdrop-filter: blur(20px); border-top: 1px solid var(--line); padding: 10px 16px calc(env(safe-area-inset-bottom, 16px) + 16px); display: flex; gap: 8px; z-index: 80; } .shunet-detail .sticky-cta .secondary { width: 44px; height: 44px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); transition: all 0.15s; } .shunet-detail .sticky-cta .secondary svg { width: 18px; height: 18px; } .shunet-detail .sticky-cta .secondary.is-active { color: var(--berry); background: #fbeaec; border-color: #f4d6da; } .shunet-detail .sticky-cta .primary { flex: 1; background: linear-gradient(135deg, #f09433 0%, #dc2743 50%, #bc1888 100%); color: white; border: 0; padding: 12px; border-radius: 12px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; box-shadow: 0 8px 20px -8px rgba(220,39,67,0.45); transition: all 0.15s; } .shunet-detail .sticky-cta .primary:active { transform: scale(0.97); } .shunet-detail .sticky-cta .primary svg { width: 16px; height: 16px; } /* ===== Register invitation ===== */ .shunet-detail .register-invite { position: fixed; inset-inline-start: 18px; top: 56%; z-index: 72; width: 218px; padding: 5px; border: 1px solid rgba(138, 169, 122, 0.55); border-radius: 16px; background: rgba(251, 248, 243, 0.97); box-shadow: 0 18px 42px -22px rgba(42, 36, 30, 0.42); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); transition: opacity .28s ease, transform .28s ease, visibility .28s; } .shunet-detail .register-invite.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .shunet-detail .register-invite-link { min-height: 58px; padding: 8px 9px; border-radius: 12px; display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; } .shunet-detail .register-invite-link:hover { background: var(--sage-soft); } .shunet-detail .register-invite-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 36px; background: var(--sage-deep); color: white; } .shunet-detail .register-invite-mark svg { width: 19px; height: 19px; } .shunet-detail .register-invite-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.35; } .shunet-detail .register-invite-copy strong { font-size: 13px; font-weight: 800; } .shunet-detail .register-invite-copy small { margin-top: 2px; color: var(--sage-deep); font-size: 11px; font-weight: 600; } .shunet-detail .register-invite-arrow { color: var(--sage-deep); font-size: 17px; line-height: 1; } .shunet-detail .register-invite-close { position: absolute; inset-inline-start: -8px; top: -8px; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; padding: 0 0 2px; background: var(--paper); color: var(--ink-3); box-shadow: 0 5px 14px rgba(42, 36, 30, 0.12); font-size: 17px; line-height: 1; } .shunet-detail .register-invite-close:hover { color: var(--ink); border-color: var(--ink-3); } /* ===== Toast ===== */ .shunet-detail .toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; box-shadow: 0 12px 24px rgba(0,0,0,0.3); z-index: 200; animation: shunet-toast-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes shunet-toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } /* ===== Responsive ===== */ @media (min-width: 520px) { .shunet-detail .page { box-shadow: 0 0 60px rgba(0,0,0,0.05); } } /* Hard guards for long shop names, handles, URLs and phone numbers. */ .shunet-detail .shop-name, .shunet-detail .info-cell .v, .shunet-detail .about-text { overflow-wrap: anywhere !important; word-break: break-word !important; } .shunet-detail .shop-handle, .shunet-detail .channel .sub, .shunet-detail .sidebar-ch-sub { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .shunet-detail .shop-handle, .shunet-detail .sidebar-ch-sub { white-space: nowrap !important; } .shunet-detail .channels { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .shunet-detail .channel, .shunet-detail .info-cell, .shunet-detail .sidebar-ch, .shunet-detail .sidebar-ch-info { min-width: 0 !important; } .shunet-detail .channel .sub { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal !important; text-align: center; } @media (max-width: 700px) { body.shunet-detail, .shunet-detail .page { overflow-x: hidden !important; } .shunet-detail .channels { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .shunet-detail .channel { width: auto !important; padding: 12px 6px !important; } .shunet-detail .channel .sub { font-size: 10px !important; line-height: 1.45 !important; } .shunet-detail .sticky-cta { left: 0 !important; right: 0 !important; transform: none !important; width: 100% !important; max-width: none !important; } .shunet-detail .sticky-cta .primary { min-width: 0 !important; font-size: 12.5px !important; line-height: 1.35 !important; text-align: center !important; white-space: normal !important; overflow-wrap: anywhere !important; } .shunet-detail .register-invite { inset-inline-start: auto !important; inset-inline-end: auto !important; left: 16px !important; right: auto !important; top: auto; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 32px) !important; max-width: none !important; margin: 0 !important; padding: 4px; border-radius: 999px; transform: translateY(12px); } .shunet-detail .register-invite.is-visible { transform: translateY(0); } .shunet-detail .register-invite-link { min-height: 44px; padding: 5px 10px 5px 6px; border-radius: 999px; } .shunet-detail .register-invite-mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 50%; } .shunet-detail .register-invite-copy { flex-direction: row; align-items: baseline; gap: 5px; white-space: nowrap; } .shunet-detail .register-invite-copy strong { font-size: 12.5px; } .shunet-detail .register-invite-copy small { font-size: 10.5px; } .shunet-detail .register-invite-close { inset-inline-start: -5px; top: -9px; } .shunet-detail .votes { gap: 10px !important; } .shunet-detail .votes .q { min-width: 0 !important; overflow-wrap: anywhere !important; } } @media (max-width: 360px) { .shunet-detail .info-grid { grid-template-columns: 1fr !important; } }