/* ---------- Fonts ---------- */ @font-face { font-family: ub; src: url('../font/Ubuntu-Regular.woff2') format('woff2'), url('../font/Ubuntu-Regular.woff') format('woff'); font-display: swap; } @font-face { font-family: is; src: url('../font/IranianSans.woff2') format('woff2'), url('../font/IranianSans.woff') format('woff'); } @font-face { font-family: ns; src: url('../font/Nassim.woff2') format('woff2'), url('../font/Nassim.woff') format('woff'); font-display: swap; } /* ---------- Global Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; direction: rtl; font-size: 100%; } body { text-align: center; font-family: is; margin: 0; } /* ---------- Links ---------- */ a { white-space: nowrap; text-decoration: none; color: yellow; border-bottom: 1px dotted yellow; padding-bottom: 2px; transition: all .3s ease-in-out; text-underline-offset: 3px; } a:hover { font-weight: bold; } /* ---------- Headings ---------- */ h1, h2, h3 { font-family: ns; margin-bottom: 10px; } h1 { font-size: 20pt; } h2 { font-size: 18pt; margin-bottom: 15px; } h3 { font-size: 16pt; } /* ---------- Media & Images ---------- */ img { max-width: 100%; height: auto; } :focus { outline: none; } /* ---------- Text ---------- */ p { font-family: is; unicode-bidi: plaintext; text-align: justify; line-height: 2.2rem; margin-bottom: 2.5rem; font-size: 1rem; } /* ---------- Layout ---------- */ .layout_padding { padding-top: 20px; } .imgIndex { border-radius: 15px; border-color: #aaa; margin-bottom: 10px; } .priceIndex { font-family: is; font-size: 11pt; font-weight: bold; color: #222; } .boxIndex { margin-bottom: 15px; cursor: default; } .cl { color: #c5204a; } /* ---------- Animations ---------- */ .blink { animation: blinker 2s linear infinite; } @keyframes blinker { 50% { filter: brightness(70%) } } .blinkFull { animation: blink 2s linear infinite; } @keyframes blink { 50% { opacity: 0.1; } } /* ---------- Components ---------- */ .hostBranch { background-color: #c5204a; padding: 20px; margin-bottom: 5px; text-align: right; font-size: 9pt; } .hostTel { padding: 5px; background-color: #333; border-radius: 4px; } .liCategory { background-color: #fff; width: 50px; height: 60px; padding: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .liCategory label { border: none; } .iUncheck { color: #aaa; } #dynamic-placeholder { height: 50px; width: 50%; font-size: 30px; background: #000; border-radius: 5px; border: none; margin: 50px auto; padding: 10px; color: #fff; outline: none; } .MovieDiv { position: relative; top: 60px; z-index: 1; margin-bottom: -10px; height: 10px; } .MovieIcon { font-size: 25pt; border-radius: 30px; padding: 4px 0; color: white; background-color: rgba(200, 200, 200, 0.7); transition: all 0.3s ease; } .MovieIcon:hover { background-color: rgba(197, 36, 122, 0.3); transform: scale(1.1); } .productImage { border: 3px solid #555; margin-top: 5px; max-width: none; max-height: none; } .tooman { font-family: is; font-size: 7pt; margin-right: 5px; color: #ddd; } .starRank { font-size: 11pt; margin-top: -35px; margin-bottom: 10px; opacity: 0.8; } .fa-spin-slow { -webkit-animation: fa-spin 5s infinite linear; animation: fa-spin 5s infinite linear; } .id, .textboxEn { width: 100%; text-align: left; font-family: ub; direction: ltr; } .id { width: 40%; } .labelFor { color: #eee; margin-left: 5px; font-weight: normal; } .section, .divForm { direction: rtl; font-family: is; text-align: right; margin: 10px 5px; border: 0.01em solid dodgerblue; border-radius: 20px; padding: 20px; background-color: #272936; } .divForm { font-size: 8pt; } .btDelEdit { font-size: 12pt; cursor: pointer; margin: 0; } /* ---------- Flex/Grid ---------- */ .cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 1rem; } .cat { background-color: #333; border-radius: 8px; padding: 2rem; transition: transform 0.3s ease; box-shadow: 0 4px 6px rgba(3, 3, 3, 0.1); } /* ---------- Responsive Video ---------- */ .video-wrapper { width: 100%; display: flex; justify-content: center; align-items: flex-start; margin: 0; } .video-frame { position: relative; width: 100vw; height: 100vh; } .video-frame iframe { display: block; border: none; width: 100%; height: 100%; } /* ---------- Responsive Breakpoints ---------- */ .desktop { display: none; } @media (min-width: 481px) { .mobile { display: none; } .desktop { display: block; } .zoomProduct { transition: transform 0.3s ease; } .zoomProduct:hover { transform: scale(1.08); } } @media (min-width: 769px) { .video-frame { width: 360px; height: 640px; } } .footerFontSize { font-size: 8pt; }