# سی اس فابل -golden-tips-in-shopping-malls


/* =========================
   IRANYekan – Regular & Bold
   ========================= */
/* =========================================================
   SalamBaba Font Setup
   Path: https://salambaba.co/font/
   ========================================================= */

/* --- IRANSansWeb --- */
@font-face {
  font-family: 'IRANSansWeb';
  src: url('https://salambaba.co/font/IRANSansWeb.woff2') format('woff2'),
       url('https://salambaba.co/font/IRANSansWeb.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSansWeb';
  src: url('https://salambaba.co/font/IRANSansWeb_Bold.woff2') format('woff2'),
       url('https://salambaba.co/font/IRANSansWeb_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSansWeb';
  src: url('https://salambaba.co/font/IRANSansWeb_Medium.woff2') format('woff2'),
       url('https://salambaba.co/font/IRANSansWeb_Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSansWeb';
  src: url('https://salambaba.co/font/IRANSansWeb_Light.woff2') format('woff2'),
       url('https://salambaba.co/font/IRANSansWeb_Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* امکان اضافه کردن UltraLight یا Black اگر نیاز باشه */
@font-face {
  font-family: 'IRANSansWeb';
  src: url('https://salambaba.co/font/IRANSansWeb_UltraLight.woff2') format('woff2'),
       url('https://salambaba.co/font/IRANSansWeb_UltraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSansWeb';
  src: url('https://salambaba.co/font/IRANSansWeb_Black.woff2') format('woff2'),
       url('https://salambaba.co/font/IRANSansWeb_Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- IRANYekanX --- */
@font-face {
  font-family: 'IRANYekanX';
  src: url('https://salambaba.co/font/IRANYekanXRegular.woff2') format('woff2'),
       url('https://salambaba.co/font/IRANYekanXRegular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IRANYekanX';
  src: url('https://salambaba.co/font/IRANYekanXBold.woff2') format('woff2'),
       url('https://salambaba.co/font/IRANYekanXBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Global Font Setup --- */
html, body {
  font-family: 'IRANYekanX', 'IRANSansWeb', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
strong, b, h1, h2, h3 {
  font-weight: 700;
}


:root{ --blue:#0ea5e9; --green:#22c55e; --yellow:#f59e0b; --red:#ef4444; --radius:14px; --pad:12px; --gap:10px; --fs:14.2px; --fs-h:15.8px; }
*{box-sizing:border-box} html,body{height:100%}
body{ direction:rtl; margin:0; font-family:'PYekanEmbed','YekanBoomEmbed',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; transition: background .3s ease, color .3s ease; }
body[data-theme="light"]{ --bg-grad: linear-gradient(135deg, #eef2f7, #ffffff); --text:#0f172a; --muted:#475569; --glass: rgba(255,255,255,.35); --border: 1px solid rgba(0,0,0,.06); --shadow: 0 6px 16px rgba(0,0,0,.08); }
body[data-theme="dark"]{ --bg-grad: linear-gradient(135deg, #0b1020, #111827); --text:#f1f5f9; --muted:#cbd5e1; --glass: rgba(255,255,255,.08); --border: 1px solid rgba(255,255,255,.16); --shadow: 0 6px 18px rgba(0,0,0,.5); }
.wrap{padding:16px; background:var(--bg-grad); color:var(--text)}
.brand{ position:sticky; top:0; z-index:10; margin:0 0 12px; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); background:var(--glass); border:var(--border); border-radius:12px; padding:10px 12px; box-shadow:var(--shadow); }
.brand-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.logo{display:flex; align-items:center; gap:8px} .logo img{height:38px; width:auto}
.titlebox h1{margin:0; font-family:'YekanBoomEmbed'; font-size:1.05rem} .titlebox p{margin:2px 0 0; font-size:.8rem; opacity:.85}
.tools{display:flex; gap:8px; flex-wrap:wrap} .btn{ padding:6px 10px; border-radius:10px; border:var(--border); background:var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor:pointer; font-weight:700; font-size:.85rem; color:inherit; text-decoration:none }
.btn:hover{transform:translateY(-1px)} .stripes{display:flex; height:3px; margin-top:8px; border-radius:999px; overflow:hidden; box-shadow:var(--shadow)} .stripes i{flex:1; display:block}
.stripes i:nth-child(1){background:var(--blue)} .stripes i:nth-child(2){background:var(--green)} .stripes i:nth-child(3){background:var(--yellow)} .stripes i:nth-child(4){background:var(--red)}
.container{max-width:900px; margin:0 auto; display:grid; gap:12px}
.card{ background:var(--glass); border:var(--border); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-radius: var(--radius); padding: var(--pad); box-shadow: var(--shadow); transition: transform .2s ease; font-size: var(--fs); }
.card:hover{transform: translateY(-2px)} .card h2{margin:0 0 4px; font-size: var(--fs-h); font-family:'YekanBoomEmbed'; display:flex; justify-content:space-between; gap:8px} .tag{opacity:.75; font-weight:700; font-size:.78rem}
.bullets{margin:4px 0 0; padding:0 1.1rem 0 0; line-height:1.75} .desc{margin:6px 0 0; opacity:.95; border-radius:10px; padding:8px 10px; border:var(--border); background:var(--glass); font-size: var(--fs)}
@media (max-width: 640px){ .container{gap:10px} .card{font-size:13.6px} } @media print{ .brand, .btn{display:none} body{background:white} }



# سی اس فابل -golden-tips-in-shopping-malls