|
|
| خط ۱: |
خط ۱: |
| /* --------------------- Begin Font Style ----------------- */ | | /* Common.css temporarily cleared */ |
| @font-face {
| |
| font-family: 'IRANSansXFaNum';
| |
| font-style: normal;
| |
| font-weight: 400;
| |
| font-display: swap;
| |
| src: url('/w/resources/fonts/IRANSansXFaNum-Regular.woff2') format('woff2'),
| |
| url('/w/resources/fonts/IRANSansXFaNum-Regular.woff') format('woff');
| |
| }
| |
| | |
| body {
| |
| font-family: IRANSansXFaNum !important;
| |
| }
| |
| | |
| #content.mw-body h1,
| |
| #content.mw-body h2,
| |
| #content.mw-body #firstHeading,
| |
| #content.mw-body .mw-editsection,
| |
| .mw-body .mw-editsection-like,
| |
| #content.mw-body #toc h2,
| |
| #content.mw-body .toc h2,
| |
| .vector-sticky-header-context-bar-primary,
| |
| #template-documentation,
| |
| #documentation-meta-data {
| |
| font-family: IRANSansXFaNum !important;
| |
| line-height: 1.6;
| |
| }
| |
| | |
| textarea {
| |
| font-family: IRANSansXFaNum !important;
| |
| }
| |
| | |
| .mw-body-content {
| |
| font-kerning: auto;
| |
| font-size: 16px;
| |
| line-height: 2.0;
| |
| font-family: IRANSansXFaNum !important;
| |
| }
| |
| | |
| .ace_editor {
| |
| font-family: IRANSansXFaNum !important;
| |
| }
| |
| | |
| .ui-widget,
| |
| .ui-widget *,
| |
| button,
| |
| input,
| |
| select,
| |
| optgroup {
| |
| font-family: IRANSansXFaNum !important;
| |
| }
| |
| | |
| dfn {
| |
| font-style: inherit;
| |
| }
| |
| | |
| sup, sub {
| |
| line-height: 1em;
| |
| }
| |
| /* --------------------- End Font Style ----------------- */
| |
| | |
| /* --------------------- End Font Style ----------------- */
| |
| | |
| /* --------------------- End Font Style ----------------- */
| |
| /* end */
| |
| | |
| dfn {
| |
| font-style: inherit; /* Reset default styling for <dfn> */
| |
| }
| |
| sup, sub {
| |
| line-height: 1em; /* Reduce line-height for <sup> and <sub> */
| |
| }
| |
| | |
| /* Main page fixes */
| |
| | |
| body.page-ویکیپدیا_صفحه_تمرین #ca-edit,
| |
| body.page-ویکیپدیا_آشنایی #ca-edit {
| |
| border: 1px dotted #36c;
| |
| }
| |
| body.page-ویکیپدیا_صفحه_تمرین #ca-edit:hover,
| |
| body.page-ویکیپدیا_آشنایی #ca-edit:hover {
| |
| background: none repeat scroll 0 0 white;
| |
| border-color: transparent;
| |
| }
| |
| body.page-صفحهٔ_اصلی #mp-topbanner {
| |
| clear: both;
| |
| }
| |
| | |
| body.page-صفحهٔ_اصلی #ca-delete,
| |
| body.page-صفحهٔ_اصلی #deleteconfirm,
| |
| body.page-صفحهٔ_اصلی #t-cite,
| |
| body.page-صفحهٔ_اصلی #lastmod,
| |
| body.page-صفحهٔ_اصلی #siteSub,
| |
| body.page-صفحهٔ_اصلی #contentSub,
| |
| body.page-صفحهٔ_اصلی #catlinks,
| |
| body.page-صفحهٔ_اصلی h1.firstHeading,
| |
| body.page-صفحهٔ_اصلی #centralNotice,
| |
| body.page-درگاه_ورودی #siteSub,
| |
| body.page-درگاه_ورودی h1.firstHeading {
| |
| display: none !important;
| |
| }
| |
| | |
| body.page-صفحهٔ_اصلی #ca-history,
| |
| body.page-صفحهٔ_اصلی #pagehistory {
| |
| dis play: none;
| |
| }
| |
| | |
| /* Make the list of references in [[Template:Reflist]] smaller */
| |
| .references-small {
| |
| font-size: 90%;
| |
| }
| |
| | |
| /* Highlight clicked reference in blue to help navigation */
| |
| ol.references > li:target,
| |
| sup.reference:target,
| |
| span.citation:target, cite:target {
| |
| background-color: #ecf0fa;
| |
| }
| |
| | |
| /* Ensure refs in table headers and the like aren't bold or italic */
| |
| sup.reference {
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| | |
| /* Styling for citations */
| |
| span.citation, cite {
| |
| word-wrap: break-word;
| |
| }
| |
| | |
| /* If there is an inline link to a full citation, the full citation will turn blue when the inline link is clicked */
| |
| cite:target {
| |
| background-color: #ecf0fa;
| |
| }
| |
| | |
| /* For linked citation numbers and document IDs, where the number need not be shown on a screen or a handheld, but should be included in the printed version */
| |
| | |
| @media screen, handheld, projection {
| |
| cite *.printonly {
| |
| display: none;
| |
| }
| |
| }
| |
| | |
| /* Style for horizontal lists (separator following item) */
| |
| | |
| .skin-monobook .hlist dl,
| |
| .skin-modern .hlist dl,
| |
| .skin-vector .hlist dl {
| |
| line-height: 1.5em;
| |
| }
| |
| /* Style for horizontal lists (separator following item).
| |
| IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].
| |
| @source mediawiki.org/wiki/Snippets/Horizontal_lists
| |
| @revision 5 (2014-02-24)
| |
| @author [[User:Edokter]]
| |
| */
| |
| .hlist dl,
| |
| .hlist ol,
| |
| .hlist ul {
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| /* Display list items inline */
| |
| .hlist dd,
| |
| .hlist dt,
| |
| .hlist li {
| |
| margin: 0;
| |
| display: inline;
| |
| }
| |
| /* Display nested lists inline */
| |
| .hlist.inline,
| |
| .hlist.inline dl,
| |
| .hlist.inline ol,
| |
| .hlist.inline ul,
| |
| .hlist dl dl, .hlist dl ol, .hlist dl ul,
| |
| .hlist ol dl, .hlist ol ol, .hlist ol ul,
| |
| .hlist ul dl, .hlist ul ol, .hlist ul ul {
| |
| display: inline;
| |
| }
| |
| /* Generate interpuncts */
| |
| .hlist dt:after {
| |
| content: ": ";
| |
| }
| |
| .hlist dd:after,
| |
| .hlist li:after {
| |
| content: " •";
| |
| /*font-weight: bold;*/
| |
| }
| |
| .hlist dd:last-child:after,
| |
| .hlist dt:last-child:after,
| |
| .hlist li:last-child:after {
| |
| content: none;
| |
| }
| |
| /* For IE8 */
| |
| .hlist dd.hlist-last-child:after,
| |
| .hlist dt.hlist-last-child:after,
| |
| .hlist li.hlist-last-child:after {
| |
| content: none;
| |
| }
| |
| /* Add parentheses around nested lists */
| |
| .hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
| |
| .hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
| |
| .hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
| |
| content: " (";
| |
| font-weight: normal;
| |
| }
| |
| .hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
| |
| .hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
| |
| .hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
| |
| content: ") ";
| |
| font-weight: normal;
| |
| }
| |
| /* For IE8 */
| |
| .hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,
| |
| .hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,
| |
| .hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {
| |
| content: ") ";
| |
| font-weight: normal;
| |
| }
| |
| /* Put ordinals in front of ordered list items */
| |
| .hlist ol {
| |
| counter-reset: listitem;
| |
| }
| |
| .hlist ol > li {
| |
| counter-increment: listitem;
| |
| }
| |
| .hlist ol > li:before {
| |
| content: " " counter(listitem) " ";
| |
| content: " " counter(listitem, -moz-persian) " ";
| |
| content: " " counter(listitem, persian) " ";
| |
| white-space: nowrap;
| |
| }
| |
| .hlist dd ol > li:first-child:before,
| |
| .hlist dt ol > li:first-child:before,
| |
| .hlist li ol > li:first-child:before {
| |
| content: " (" counter(listitem) " ";
| |
| content: " (" counter(listitem, -moz-persian) " ";
| |
| content: " (" counter(listitem, persian) " ";
| |
| }
| |
| | |
| /* فهرست بدون گلوله */
| |
| .plainlist ul {
| |
| line-height: inherit;
| |
| list-style: none none;
| |
| margin: 0;
| |
| }
| |
| .plainlist ul li {
| |
| margin-bottom: 0;
| |
| }
| |
| | |
| /* Normal font styling for table row headers with scope="row" tag */
| |
| .wikitable.plainrowheaders th[scope=row] {
| |
| font-weight: normal;
| |
| /* @noflip */
| |
| text-align: right;
| |
| }
| |
|
| |
| /* Lists in data cells are always left-aligned */
| |
| .wikitable td ul,
| |
| .wikitable td ol,
| |
| .wikitable td dl {
| |
| /* @noflip */
| |
| text-align: right;
| |
| }
| |
| /* ...unless they also use the hlist class */
| |
| .wikitable.hlist td ul,
| |
| .wikitable.hlist td ol,
| |
| .wikitable.hlist td dl {
| |
| text-align: inherit;
| |
| }
| |
| | |
| /* Default style for navigation boxes */
| |
| .navbox { /* Navbox container style */
| |
| box-sizing: border-box;
| |
| border: 1px solid #a2a9b1;
| |
| width: 100%;
| |
| margin: auto;
| |
| clear: both;
| |
| font-size: 88%;
| |
| text-align: center;
| |
| padding: 1px;
| |
| }
| |
| .navbox-inner,
| |
| .navbox-subgroup {
| |
| width: 100%;
| |
| }
| |
| .navbox-group,
| |
| .navbox-title,
| |
| .navbox-abovebelow {
| |
| padding: 0.25em 1em; /* Title, group and above/below styles */
| |
| line-height: 1.5em;
| |
| text-align: center;
| |
| }
| |
| th.navbox-group { /* Group style */
| |
| white-space: nowrap;
| |
| /* @noflip */
| |
| text-align: right;
| |
| }
| |
| .navbox,
| |
| .navbox-subgroup {
| |
| background: #f8f9fa; /* Background color */
| |
| }
| |
| .navbox-list {
| |
| line-height: 1.8em;
| |
| border-color: #f8f9fa; /* Must match background color */
| |
| }
| |
| .navbox th,
| |
| .navbox-title {
| |
| background: #b3ccff; /* Level 1 color */
| |
| }
| |
| .navbox-abovebelow,
| |
| th.navbox-group,
| |
| .navbox-subgroup .navbox-title {
| |
| background: #dbe7ff; /* Level 2 color */
| |
| }
| |
| .navbox-subgroup .navbox-group,
| |
| .navbox-subgroup .navbox-abovebelow {
| |
| background: #e5edff; /* Level 3 color */
| |
| }
| |
| .navbox-even {
| |
| background: #f8f9fa; /* Even row striping */
| |
| }
| |
| .navbox-odd {
| |
| background: transparent; /* Odd row striping */
| |
| }
| |
| table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */
| |
| margin-top: -1px; /* (doesn't work for IE6, but that's okay) */
| |
| }
| |
| .navbox .hlist td dl,
| |
| .navbox .hlist td ol,
| |
| .navbox .hlist td ul,
| |
| .navbox td.hlist dl,
| |
| .navbox td.hlist ol,
| |
| .navbox td.hlist ul {
| |
| padding: 0.125em 0; /* Adjust hlist padding in navboxes */
| |
| }
| |
| ol + table.navbox,
| |
| ul + table.navbox {
| |
| margin-top: 0.5em; /* Prevent lists from clinging to navboxes */
| |
| }
| |
| | |
| /* RTL fix for navbox-list bullet lists; See [[Special:Permalink/24864265#خطای ظاهری]]. */
| |
| .navbox-list li {
| |
| unicode-bidi: isolate;
| |
| }
| |
| | |
| /* Default styling for Navbar template */
| |
| .navbar {
| |
| display: inline;
| |
| font-size: 88%;
| |
| font-weight: normal;
| |
| }
| |
| .navbar ul {
| |
| display: inline;
| |
| white-space: nowrap;
| |
| }
| |
| .navbar li {
| |
| word-spacing: -0.125em;
| |
| }
| |
| .navbar.mini li { /* span is removed */
| |
| font-size: xx-small;
| |
| }
| |
| .nv-talk > a {
| |
| color: #002BB8;
| |
| }
| |
| /* Navbar styling when nested in infobox and navbox */
| |
| .infobox .navbar {
| |
| font-size: 100%;
| |
| }
| |
| .navbox .navbar {
| |
| display: block;
| |
| font-size: 100%;
| |
| }
| |
| .navbox-title .navbar {
| |
| /* @noflip */
| |
| float: right;
| |
| /* @noflip */
| |
| text-align: right;
| |
| /* @noflip */
| |
| margin-left: 0.5em;
| |
| width: 6em;
| |
| }
| |
| | |
| /* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
| |
| in [[MediaWiki:Common.js]] are styled here so they can be customised. */
| |
| .collapseButton {
| |
| /* @noflip */
| |
| float: left;
| |
| font-weight: normal;
| |
| /* @noflip */
| |
| margin-right: 0.5em;
| |
| /* @noflip */
| |
| text-align: left;
| |
| width: auto;
| |
| }
| |
| /* In navboxes, the show/hide button balances the v·d·e links
| |
| from [[Template:Navbar]], so they need to be the same width. */
| |
| .navbox .collapseButton {
| |
| width: 6em;
| |
| }
| |
| | |
| /* Infobox template style */
| |
| .infobox {
| |
| border: 1px solid #a2a9b1;
| |
| background-color: #f8f9fa;
| |
| color: black;
| |
| /* @noflip */
| |
| margin: 0.5em 1em 0.5em 0;
| |
| padding: 0.2em;
| |
| /* @noflip */
| |
| float: left;
| |
| /* @noflip */
| |
| clear: left;
| |
| /* @noflip */
| |
| text-align: right;
| |
| font-size: 88%;
| |
| line-height: 1.5em;
| |
| /* added */
| |
| max-width: 25%;
| |
| }
| |
| .infobox caption {
| |
| font-size: 125%;
| |
| font-weight: bold;
| |
| }
| |
| .infobox td,
| |
| .infobox th {
| |
| vertical-align: top;
| |
| }
| |
| .infobox.bordered {
| |
| border-collapse: collapse;
| |
| }
| |
| .infobox.bordered td,
| |
| .infobox.bordered th {
| |
| border: 1px solid #a2a9b1;
| |
| }
| |
| .infobox.bordered .borderless td,
| |
| .infobox.bordered .borderless th {
| |
| border: 0;
| |
| }
| |
|
| |
| .infobox.sisterproject {
| |
| width: 20em;
| |
| font-size: 90%;
| |
| }
| |
|
| |
| .infobox.standard-talk {
| |
| border: 1px solid #d2ad76;
| |
| background-color: #fff2cc;
| |
| }
| |
| .infobox.standard-talk.bordered td,
| |
| .infobox.standard-talk.bordered th {
| |
| border: 1px solid #d2ad76;
| |
| }
| |
|
| |
| /* styles for bordered infobox with merged rows */
| |
| .infobox.bordered .mergedtoprow td,
| |
| .infobox.bordered .mergedtoprow th {
| |
| border: 0;
| |
| border-top: 1px solid #a2a9b1;
| |
| /* @noflip */
| |
| border-left: 1px solid #a2a9b1;
| |
| }
| |
|
| |
| .infobox.bordered .mergedrow td,
| |
| .infobox.bordered .mergedrow th {
| |
| border: 0;
| |
| border-left: 1px solid #a2a9b1;
| |
| }
| |
|
| |
| /* Styles for geography infoboxes, eg countries,
| |
| country subdivisions, cities, etc. */
| |
| .infobox.geography {
| |
| text-align: right;
| |
| border-collapse: collapse;
| |
| line-height: 1.2em;
| |
| font-size: 90%;
| |
| }
| |
| | |
| .infobox.geography caption { /* کمی فاصله بیشتر برای عنوان */
| |
| line-height: 1.6em;
| |
| }
| |
|
| |
| .infobox.geography td,
| |
| .infobox.geography th {
| |
| border-top: 1px solid #a2a9b1;
| |
| padding: 0.4em 0.6em 0.4em 0.6em;
| |
| }
| |
| .infobox.geography .mergedtoprow td,
| |
| .infobox.geography .mergedtoprow th {
| |
| border-top: 1px solid #a2a9b1;
| |
| padding: 0.4em 0.6em 0.2em 0.6em;
| |
| }
| |
|
| |
| .infobox.geography .mergedrow td,
| |
| .infobox.geography .mergedrow th {
| |
| border: 0;
| |
| padding: 0 0.6em 0.2em 0.6em;
| |
| }
| |
|
| |
| .infobox.geography .mergedbottomrow td,
| |
| .infobox.geography .mergedbottomrow th {
| |
| border-top: 0;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| padding: 0 0.6em 0.4em 0.6em;
| |
| }
| |
|
| |
| .infobox.geography .maptable td,
| |
| .infobox.geography .maptable th {
| |
| border: 0;
| |
| padding: 0;
| |
| }
| |
| | |
| /* Style for "notices" */
| |
| .notice {
| |
| margin: 1em;
| |
| padding: 0.2em;
| |
| }
| |
| | |
| #disambig {
| |
| border-top: 1px solid #c8ccd1;
| |
| border-bottom: 1px solid #c8ccd1;
| |
| }
| |
| | |
| .notice-text, .toggle-box, .red-button, .goal, div.red-button, div.siteNoticeSmall, div#siteNotice {
| |
| font-family: inherit;
| |
| }
| |
| | |
| DIV.siteNoticeSmall {
| |
| font-size: 15pt;
| |
| }
| |
| | |
| /* Persondata and other (future) metadata */
| |
| table.InChI, /* temporary */
| |
| table.persondata {
| |
| border: 1px solid #a2a9b1;
| |
| display: none;
| |
| speak: none;
| |
| }
| |
| .InChI-label, /* temporary */
| |
| .persondata-label {
| |
| color: #a2a9b1;
| |
| }
| |
| | |
| /* Icons for medialist templates [[Template:Listen]], [[Template:Multi-listen_start]], [[Template:Video]], [[Template:Multi-video_start]] */
| |
| div.listenlist {
| |
| background: url("//upload.wikimedia.org/wikipedia/commons/3/3f/Gnome_speakernotes_30px.png");
| |
| /* @noflip */
| |
| padding-right: 40px;
| |
| }
| |
| | |
| div.videolist, div.multivideolist {
| |
| background: url("//upload.wikimedia.org/wikipedia/commons/thumb/2/20/Tango-video-x-generic.png/40px-Tango-video-x-generic.png");
| |
| padding-right: 50px;
| |
| }
| |
| | |
| /* Change the external link icon to an Adobe icon for all PDF files
| |
| in browsers that support these CSS selectors, like Mozilla and Opera */
| |
| .mw-body a[href$=".pdf"].external,
| |
| .mw-body a[href*=".pdf?"].external,
| |
| .mw-body a[href*=".pdf#"].external,
| |
| .mw-body a[href$=".PDF"].external,
| |
| .mw-body a[href*=".PDF?"].external,
| |
| .mw-body a[href*=".PDF#"].external,
| |
| div#mw_content a[href$=".pdf"].external,
| |
| div#mw_content a[href*=".pdf?"].external,
| |
| div#mw_content a[href*=".pdf#"].external,
| |
| div#mw_content a[href$=".PDF"].external,
| |
| div#mw_content a[href*=".PDF?"].external,
| |
| div#mw_content a[href*=".PDF#"].external {
| |
| background: url("//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif") no-repeat left;
| |
| /* @noflip */
| |
| padding-left: 18px;
| |
| }
| |
| | |
| /* Change the external link icon to an Adobe icon anywhere the PDFlink class */
| |
| /* is used (notably Template:PDFlink). This works in IE, unlike the above. */
| |
| span.PDFlink a {
| |
| background: url("//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif") center left no-repeat !important;
| |
| padding-left: 18px !important;
| |
| }
| |
| | |
| span.geolink a {
| |
| background: url(//upload.wikimedia.org/wikipedia/en/a/a7/Monobook-globe.png) center left no-repeat !important;
| |
| padding-left: 11px !important;
| |
| }
| |
| | |
| /* Content in columns with CSS instead of tables [[Template:Columns]] */
| |
| div.columns-2 div.column {
| |
| /* @noflip */
| |
| float: right;
| |
| width: 50%;
| |
| min-width: 300px;
| |
| }
| |
| | |
| div.columns-3 div.column {
| |
| /* @noflip */
| |
| float: right;
| |
| width: 33.3%;
| |
| min-width: 200px;
| |
| }
| |
| | |
| div.columns-4 div.column {
| |
| /* @noflip */
| |
| float: right;
| |
| width: 25%;
| |
| min-width: 150px;
| |
| }
| |
| | |
| div.columns-5 div.column {
| |
| /* @noflip */
| |
| float: right;
| |
| width: 20%;
| |
| min-width: 120px;
| |
| }
| |
| | |
| /*Add formatting to make sure that "external references" from [[Template:Ref]] do
| |
| not get URL expansion, not even when printed. The mechanism up to MediaWiki 1.4 was
| |
| that the HTML code contained a SPAN following the anchor A; this SPAN had the class
| |
| "urlexpansion", which was not displayed on screen, but was shown when the medium was
| |
| "print". The rules below ensure (a) that there is no extra padding to the left of
| |
| the anchor (displayed as "[<number>]"), (b) that there is no "external link arrow" for
| |
| the link, and (c) that this SPAN of class "urlexpansion" is never shown.
| |
| */
| |
| | |
| .plainlinksneverexpand {
| |
| background: none ! important;
| |
| padding: 0 ! important;
| |
| }
| |
| | |
| .plainlinksneverexpand .urlexpansion {
| |
| display: none ! important;
| |
| }
| |
| | |
| /* Make sure that ext links displayed within "plainlinksneverexpand" don't get
| |
| the arrow...
| |
| */
| |
| .plainlinksneverexpand a {
| |
| background: none !important;
| |
| padding: 0 !important;
| |
| }
| |
| | |
| /* Messagebox templates */
| |
| .messagebox {
| |
| border: 1px solid #a2a9b1;
| |
| background-color: #f8f9fa;
| |
| width: 80%;
| |
| margin: 0 auto 1em auto;
| |
| padding: .2em;
| |
| }
| |
| .messagebox.merge {
| |
| border: 1px solid #c0b8cc;
| |
| background-color: #f0e5ff;
| |
| text-align: center;
| |
| }
| |
| .messagebox.cleanup {
| |
| border: 1px solid #9f9fff;
| |
| background-color: #efefff;
| |
| text-align: center;
| |
| }
| |
| .messagebox.standard-talk {
| |
| border: 1px solid #c0c090;
| |
| background-color: #f8eaba;
| |
| }
| |
| .messagebox.nested-talk {
| |
| border: 1px solid #c0c090;
| |
| background-color: #f8eaba;
| |
| width: 100%;
| |
| margin: 2px 4px 2px 4px;
| |
| }
| |
| .messagebox.small {
| |
| width: 238px;
| |
| font-size: 85%;
| |
| /* @noflip */
| |
| float: left;
| |
| clear: both;
| |
| /* @noflip */
| |
| margin: 0 0 1em 1em;
| |
| line-height: 1.25em;
| |
| }
| |
| .messagebox.small-talk {
| |
| width: 238px;
| |
| font-size: 85%;
| |
| /* @noflip */
| |
| float: left;
| |
| clear: both;
| |
| /* @noflip */
| |
| margin: 0 0 1em 1em;
| |
| line-height: 1.25em;
| |
| background: #fff2cc;
| |
| }
| |
| | |
| /* Article message box styles */
| |
| table.ambox {
| |
| margin: 0px 10%; /* 10% = Will not overlap with other elements */
| |
| border: 1px solid #a2a9b1;
| |
| border-right: 10px solid #36c; /* Default "notice" blue */
| |
| background: #f8f9fa;
| |
| }
| |
| table.ambox + table.ambox { /* Single border between stacked boxes. */
| |
| margin-top: -1px;
| |
| }
| |
| .ambox th.mbox-text,
| |
| .ambox td.mbox-text { /* The message body cell(s) */
| |
| padding: 0.25em 0.5em; /* 0.5em left/right */
| |
| }
| |
| .ambox td.mbox-image { /* The left image cell */
| |
| padding: 2px 0.5em 2px 0; /* 0.5em right, 0px left */
| |
| }
| |
| .ambox td.mbox-imageright { /* The right image cell */
| |
| padding: 2px 0 2px 0.5em; /* 0px right, 0.5em left */
| |
| }
| |
|
| |
| table.ambox-notice {
| |
| border-right: 10px solid #36c; /* Blue */
| |
| }
| |
| table.ambox-speedy {
| |
| border-right: 10px solid #DD0000; /* Red */
| |
| background: #fee7e6; /* Pink */
| |
| }
| |
| table.ambox-delete {
| |
| border-right: 10px solid #DD0000; /* Red */
| |
| }
| |
| table.ambox-content {
| |
| border-right: 10px solid #FF5D00; /* Orange */
| |
| }
| |
| table.ambox-style {
| |
| border-right: 10px solid #fc3; /* Yellow */
| |
| }
| |
| table.ambox-move {
| |
| border-right: 10px solid #9932cc; /* Purple */
| |
| }
| |
| table.ambox-protection {
| |
| border-right: 10px solid #a2a9b1; /* Gray-gold */
| |
| }
| |
| | |
| /* Disambig and set index box styles */
| |
| table.dmbox {
| |
| clear: both;
| |
| margin: 0.9em 1em;
| |
| border-top: 1px solid #c8ccd1;
| |
| border-bottom: 1px solid #c8ccd1;
| |
| background: transparent;
| |
| }
| |
|
| |
| /* Footer and header message box styles */
| |
| table.fmbox {
| |
| clear: both;
| |
| margin: 0.2em 0;
| |
| width: 100%;
| |
| border: 1px solid #a2a9b1;
| |
| background: #f8f9fa; /* Default "system" gray */
| |
| }
| |
| table.fmbox-system {
| |
| background: #f8f9fa;
| |
| }
| |
| table.fmbox-warning {
| |
| border: 1px solid #DD0000; /* Dark pink */
| |
| background: #fee7e6; /* Pink */
| |
| }
| |
| table.fmbox-editnotice {
| |
| background: transparent;
| |
| }
| |
| /* Div based "warning" style fmbox messages. */
| |
| div.mw-warning-with-logexcerpt,
| |
| div.mw-lag-warn-high,
| |
| div.mw-cascadeprotectedwarning,
| |
| div#mw-protect-cascadeon {
| |
| clear: both;
| |
| margin: 0.2em 0;
| |
| border: 1px solid #DD0000;
| |
| background: #fee7e6;
| |
| padding: 0.25em 0.9em;
| |
| }
| |
| /* Div based "system" style fmbox messages.
| |
| Used in [[MediaWiki:Readonly lag]]. */
| |
| div.mw-lag-warn-normal,
| |
| div.fmbox-system {
| |
| clear: both;
| |
| margin: 0.2em 0;
| |
| border: 1px solid #a2a9b1;
| |
| background: #f8f9fa;
| |
| padding: 0.25em 0.9em;
| |
| }
| |
|
| |
| /* These mbox-small classes must be placed after all other
| |
| ambox/tmbox/ombox etc classes. "body.mediawiki" is so
| |
| they override "table.ambox + table.ambox" above. */
| |
| body.mediawiki table.mbox-small { /* For the "small=yes" option. */
| |
| /* @noflip */
| |
| clear: left;
| |
| /* @noflip */
| |
| float: left;
| |
| /* @noflip */
| |
| margin: 4px 1em 4px 0;
| |
| width: 238px;
| |
| font-size: 88%;
| |
| line-height: 1.25em;
| |
| }
| |
| body.mediawiki table.mbox-small-right { /* For the "small=right" option. */
| |
| /* @noflip */
| |
| margin: 4px 0 4px 1em;
| |
| width: 238px;
| |
| border-collapse: collapse;
| |
| font-size: 88%;
| |
| line-height: 1.25em;
| |
| }
| |
| | |
| /* Put a checker background at the image description page only visible if the image has transparent background */
| |
| #file img {
| |
| background: url("//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png") repeat;
| |
| }
| |
| | |
| #wpSave {
| |
| font-weight: bold;
| |
| }
| |
| | |
| /* suppress missing interwiki image links where #ifexist cannot be used due to high number of requests */
| |
| /* use restricted to rail icon management pages */
| |
| /* see .hidden-redlink on //meta.wikimedia.org/wiki/MediaWiki:Common.css */
| |
| .check-icon a.new {
| |
| display: none;
| |
| speak:none;
| |
| }
| |
| | |
| /* Removes underlines from links */
| |
| .nounderlines a {
| |
| text-decoration: none;
| |
| }
| |
| | |
| /* Remove underline from IPA links */
| |
| .IPA a:link, .IPA a:visited {
| |
| text-decoration: none;
| |
| }
| |
| | |
| /* Removes useless links from printout */
| |
| @media print {
| |
| #privacy, #about, #disclaimer {display:none;}
| |
| }
| |
| | |
| #EnWpMpBook { background-image: url(//upload.wikimedia.org/wikipedia/en/7/7e/MP-open-book.png); }
| |
| #EnWpMpSearch { background: url(//upload.wikimedia.org/wikipedia/en/a/ae/MP-magnifying-glass.png) no-repeat top left; }
| |
| #EnWpMpSearchInner { float: left; width: 20em; text-align: center; }
| |
| #EnWpMpBook2 { background-image: url(//upload.wikimedia.org/wikipedia/commons/8/8e/MP-open-book2.png); }
| |
| | |
| /* Standard Navigationsleisten, aka box hiding thingy from .de. Documentation at [[Wikipedia:NavFrame]]. */
| |
| | |
| div.Boxmerge,
| |
| div.NavFrame {
| |
| margin: 0px;
| |
| padding: 4px;
| |
| border: 1px solid #a2a9b1;
| |
| text-align: center;
| |
| border-collapse: collapse;
| |
| font-size: 95%;
| |
| }
| |
| div.Boxmerge div.NavFrame {
| |
| border-style: none;
| |
| border-style: hidden;
| |
| }
| |
| div.NavFrame + div.NavFrame {
| |
| border-top-style: none;
| |
| border-top-style: hidden;
| |
| }
| |
| div.NavPic {
| |
| background-color: #fff;
| |
| margin: 0px;
| |
| padding: 2px;
| |
| float: right;
| |
| }
| |
| div.NavFrame div.NavHead {
| |
| height: 1.6em;
| |
| font-weight: bold;
| |
| background-color: #b3ccff;
| |
| position:relative;
| |
| }
| |
| div.NavFrame div.NavHead:hover {
| |
| background-color: #aaf;
| |
| }
| |
| div.NavFrame p {
| |
| font-size: 100%;
| |
| }
| |
| div.NavFrame div.NavContent {
| |
| font-size: 100%;
| |
| }
| |
| div.NavFrame div.NavContent p {
| |
| font-size: 100%;
| |
| }
| |
| div.NavEnd {
| |
| margin: 0px;
| |
| padding: 0px;
| |
| line-height: 1px;
| |
| clear: both;
| |
| }
| |
| a.NavToggle {
| |
| position:absolute;
| |
| top:0px;
| |
| left:3px;
| |
| font-weight:normal;
| |
| font-size:smaller;
| |
| }
| |
| | |
| /* Hatnotes and disambiguation notices */
| |
| .rellink,
| |
| .dablink,
| |
| .hatnote {
| |
| font-style: italic;
| |
| }
| |
| .rellink i,
| |
| .dablink i,
| |
| .hatnote i {
| |
| font-style: normal;
| |
| }
| |
| div.rellink,
| |
| div.dablink,
| |
| div.hatnote {
| |
| /* @noflip */
| |
| padding-right: 1.6em;
| |
| margin-bottom: 0.5em;
| |
| }
| |
| | |
| span.updatedmarker {
| |
| background-color: transparent;
| |
| color: #006400;
| |
| }
| |
| | |
| /* Coloured watchlist numbers */
| |
| .mw-plusminus-pos {
| |
| color: #006400; /* darkgreen */
| |
| }
| |
| | |
| /* .mw-plusminus-null currently at developer default */
| |
| | |
| .mw-plusminus-neg {
| |
| color: #8B0000; /* darkred */
| |
| }
| |
| | |
| .dablink {
| |
| font-style: italic;
| |
| padding-right: 2em;
| |
| }
| |
| | |
| .dablink i {
| |
| font-style: normal;
| |
| }
| |
| | |
| /* Style for horizontal UL lists */
| |
| .horizontal ul {
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
| | |
| .horizontal li {
| |
| padding: 0 0.6em 0 0.4em;
| |
| display: inline;
| |
| border-left: 1px solid;
| |
| }
| |
| | |
| /* Geographical coordinates
| |
| | |
| To display coordinates using the notation in the source code, write this in your User:Username/monobook.css:
| |
| .geo-default { display: inline } .geo-nondefault { display: none }
| |
| .geo-dec { display: inline } .geo-dms { display: inline }
| |
| | |
| To display coordinates using decimal notation, write this in your User:Username/monobook.css:
| |
| .geo-default { display: inline } .geo-nondefault { display: inline }
| |
| .geo-dec { display: inline } .geo-dms { display: none }
| |
| | |
| To display coordinates using DMS notation, write this in your User:Username/monobook.css:
| |
| .geo-default { display: inline } .geo-nondefault { display: inline }
| |
| .geo-dec { display: none } .geo-dms { display: inline }
| |
| | |
| To display coordinates in both decimal and DMS notation, write this in your User:Username/monobook.css:
| |
| .geo-default { display: inline } .geo-nondefault { display: inline }
| |
| .geo-dec { display: inline } .geo-dms { display: inline }
| |
| .geo-multi-punct { display: inline }
| |
| | |
| See [[Template:Coor link]] for how these are used.
| |
| | |
| Note that the classes "geo", "longitude", and "latitude" are not just styles but also used by the [[Geo microformat]], so the names should not be changed.
| |
| | |
| */
| |
| | |
| .geo-default { display: inline; }
| |
| .geo-nondefault { display: none; }
| |
| .geo-dms { display: inline; }
| |
| .geo-dec { display: inline; }
| |
| .geo-multi-punct { display: none; }
| |
| | |
| .longitude .latitude {
| |
| white-space: nowrap;
| |
| }
| |
| | |
| /* This is used for the Geo microformat, but no style is needed for now other than .geo-dec. */
| |
| .geo { }
| |
| | |
| /***** end Geo-related */
| |
| | |
| /* When <div class="nonumtoc"> is used on the table of contents, the ToC will display without numbers */
| |
| .nonumtoc .tocnumber { display:none; }
| |
| .nonumtoc #toc ul,
| |
| .nonumtoc .toc ul {
| |
| line-height: 1.5em;
| |
| list-style: none;
| |
| margin: .3em 0 0;
| |
| padding: 0;
| |
| }
| |
| .nonumtoc #toc ul ul,
| |
| .nonumtoc .toc ul ul {
| |
| margin: 0 0 0 2em;
| |
| }
| |
| | |
| /* Allow limiting of which header levels are shown in a TOC; <div class="toclimit-3">, for
| |
| instance, will limit to showing ==headings== and ===headings=== but no further (as long as
| |
| there are no =headings= on the page, which there shouldn't be according to the MoS). */
| |
| .toclimit-2 .toclevel-2 {display:none;}
| |
| .toclimit-3 .toclevel-3 {display:none;}
| |
| .toclimit-4 .toclevel-4 {display:none;}
| |
| .toclimit-5 .toclevel-5 {display:none;}
| |
| .toclimit-6 .toclevel-6 {display:none;}
| |
| .toclimit-7 .toclevel-7 {display:none;}
| |
| | |
| /* Allow transcluded pages to display in lists rather than a table. Compatible in Firefox; incompatible in IE6. */
| |
| .listify td {display:list-item;}
| |
| .listify tr {display:block;}
| |
| .listify table {display:block;}
| |
| | |
| div.user-block {
| |
| padding: 5px;
| |
| border: 1px solid #a2a9b1;
| |
| background-color: #fee7e6;
| |
| }
| |
| /* Prevent line breaks in silly places:
| |
| 1) links when we don't want them to
| |
| 2) HTML formulae
| |
| 3) Ref tags with group names <ref group="Note"> --> "[Note 1]"
| |
| */
| |
| .nowrap,
| |
| .nowraplinks a,
| |
| span.texhtml,
| |
| sup.reference a { white-space: nowrap; }
| |
| | |
| /* Contents of <math> tag should have an ltr layout */
| |
| span.texhtml {
| |
| direction:ltr;
| |
| unicode-bidi:bidi-override;
| |
| }
| |
| | |
| .thumbinner {
| |
| min-width: 100px;
| |
| }
| |
| | |
| /* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
| |
| th.mbox-text, td.mbox-text { /* The message body cell(s) */
| |
| border: none;
| |
| padding: 0.25em 0.9em; /* 0.9em left/right */
| |
| width: 100%; /* Make all mboxes the same width regardless of text length */
| |
| }
| |
| td.mbox-image { /* The left image cell */
| |
| border: none;
| |
| padding: 2px 0.9em 2px 0px; /* 0.9em right, 0px left */
| |
| text-align: center;
| |
| }
| |
| td.mbox-imageright { /* The right image cell */
| |
| border: none;
| |
| padding: 2px 0px 2px 0.9em; /* 0px left, 0.9em right */
| |
| text-align: center;
| |
| }
| |
| /* Reduce line-height for <sup> and <sub> */
| |
| sup, sub {
| |
| line-height: 1em;
| |
| }
| |
| /* Styling for Abuse Filter tags */
| |
| .mw-tag-markers {
| |
| font-style:italic;
| |
| font-size:90%;
| |
| }
| |
| | |
| /* Für <nowiki><hiero>…</hiero></nowiki> */
| |
| .mw-hierotable, .hierotable-mw,
| |
| .mw-hierotable th, .hierotable mw-th,
| |
| .mw-hierotable td, .hierotable mw-td {
| |
| border: 0px;
| |
| padding: 0px;
| |
| }
| |
| /* With MediaWiki 1.5, the mechanism has changed: instead of a SPAN of class "urlexpansion"
| |
| following the anchor A, the anchor itself now has class "external autonumber" and the
| |
| expansion is inserted when printing (see the common printing style sheet at
| |
| //en.wikipedia.org/w/skins/common/commonPrint.css) using the ":after" pseudo-
| |
| element of CSS. We have to switch this off for links due to Template:Ref!
| |
| */
| |
| .plainlinksneverexpand a.external.text:after {
| |
| display: none !important;
| |
| }
| |
| .plainlinksneverexpand a.external.autonumber:after {
| |
| display: none !important;
| |
| }
| |
| /* for Main Page */
| |
| .globegris {
| |
| background: url(//upload.wikimedia.org/wikipedia/commons/1/10/Wikipedia-logo-v2-200px-transparent.png);
| |
| }
| |
| /* End */
| |
| | |
| .prefsection fieldset {
| |
| float: right;
| |
| }
| |
| | |
| /* Small font-size for hidden categories */
| |
| #mw-hidden-catlinks { font-size: 87% !important; }
| |
| | |
| .listify {
| |
| margin-left:0;
| |
| margin-right:2em;
| |
| }
| |
| #wpFilterRules {
| |
| direction: ltr;
| |
| }
| |
| | |
| /* این نیز باگ است که وقتی عنوان یک بخش انگلیسی است، فارسی درون خلاصه ویرایش در تاریخچه به هم میریزد */
| |
| .comment > span { unicode-bidi: normal; }
| |
| | |
| /* نمایش بهتر خلاصه ویرایشهای خیلی طولانی */
| |
| .comment {
| |
| overflow-wrap: break-word;
| |
| word-break: break-word ;
| |
| }
| |
| | |
| /* زیاد کردن اندازه توضیحات صفحه بارگذاری */
| |
| #wpUploadDescription {
| |
| height: 25em;
| |
| }
| |
| | |
| /*ابزار پررنگ کننده نظرهای کاربر*/
| |
| .mycomment { background: #ff9; }
| |
| | |
| /* Pie chart test: Transparent borders */
| |
| .transborder {
| |
| border: solid transparent;
| |
| }
| |
| | |
| /* Hide edittools base for those not using the gadget */
| |
| #mw-edittools-charinsert {
| |
| display: none;
| |
| }
| |
| | |
| /* Category tree styling. Works in conjuction with [[MediaWiki:Categorytree-expand-bullet]],
| |
| [[MediaWiki:Categorytree-collapse-bullet]] and [[MediaWiki:Categorytree-empty-bullet]]. */
| |
| #mw-subcategories ul {
| |
| list-style: none none;
| |
| margin-left: 0.25em;
| |
| }
| |
| .CategoryTreeChildren {
| |
| margin-left: 1.25em;
| |
| }
| |
| .CategoryTreeToggle {
| |
| color: #36c;
| |
| }
| |
| .CategoryTreeEmptyBullet {
| |
| color: #c8ccd1;
| |
| }
| |
| | |
| /* توضیح به کاربران درباره صفحه تمرین */
| |
| body.ns-2[class*="_صفحه_تمرین"] #firstHeading::after {
| |
| color: #72777d;
| |
| content: "توجه:این صفحه بخشی از دانشنامه نیست.";
| |
| float: left;
| |
| width: 40%;
| |
| font-size: 40%;
| |
| }
| |
| | |
| /*اصلاح اندازه فونت در تغییرات اخیر برای [ویرایشهای در حال انتظار] برگرفته از ویکیروسی*/
| |
| .mw-fr-reviewlink, .fr-hist-basic-user, .fr-hist-basic-auto {
| |
| font-weight: normal;
| |
| font-size: smaller;
| |
| }
| |
| | |
| /* temporary fix for T86979 */
| |
| .ui-dialog { right: auto; }
| |
| | |
| /* Make it possible to hide checkboxes in <inputbox> */
| |
| .inputbox-hidecheckboxes form .inputbox-element {
| |
| display: none !important;
| |
| }
| |
| | |
| /* این برچسپ بهتر است فقط برای Gadget-taghighlighter.css را فعال کرده اند دیده شوند */
| |
| .mw-tag-marker-نیازمند_بازبینی { display: none; }
| |
| | |
| /* Reduce page jumps by hiding collapsed/dismissed content */
| |
| .client-js .mw-special-Watchlist #watchlist-message {
| |
| display: none;
| |
| }
| |
| | |
| /* کمی پیوند ایجاد مقاله بزرگتر شود که پس از حذف بیشتر استفاده شود */
| |
| .mw-warning-with-logexcerpt a[title="ویکیپدیا:ایجاد مقاله"] { font-size: 120%; font-weight: bold; }
| |
| | |
| /* Make the textarea pink when an admin is editing a protected page */
| |
| .mw-textarea-protected {
| |
| background-color: #fee7e6;
| |
| }
| |
| | |
| /* Made diffs use Wikimedia UI color palette ([[phab:M82]]) */
| |
| td.diff-addedline {
| |
| border-color: #36c;
| |
| }
| |
| td.diff-deletedline {
| |
| border-color: #fc3;
| |
| }
| |
| td.diff-addedline .diffchange {
| |
| background: #e9eef9;
| |
| }
| |
| td.diff-deletedline .diffchange {
| |
| background: #fff4d6;
| |
| }
| |
| | |
| /* Spacing between the rows of navbox */
| |
| tr + tr > .navbox-abovebelow,
| |
| tr + tr > .navbox-group,
| |
| tr + tr > .navbox-image,
| |
| tr + tr > .navbox-list { /* Borders above 2nd, 3rd, etc. rows */
| |
| border-top: 2px solid #fdfdfd; /* Must match background color */
| |
| }
| |
| /* End of Spacing between the rows of navbox */
| |
| | |
| /* Color diff links */
| |
| .mw-diff-edit a {
| |
| color: #2a4b8d;
| |
| }
| |
| | |
| .mw-diff-undo a, .mw-history-undo a, .mw-rollback-link a {
| |
| color: #d33;
| |
| }
| |
| | |
| a.mw-thanks-thank-link {
| |
| color: #14866d;
| |
| }
| |
| | |
| /* Make sure cite and dfn are not italicized thorugh the user agent stylesheet */
| |
| cite, dfn {
| |
| font-style:inherit;
| |
| }
| |
| | |
| /* LTR citations should be listed LTR and be left-aligned, as is the case in Persian literature */
| |
| LI.mw-cite-dir-ltr {
| |
| direction: ltr;
| |
| margin-left: 2.3em;
| |
| text-align: left;
| |
| list-style-type: decimal !important;
| |
| }
| |
| | |
| /* OL with Persian alphabet used for its counter */
| |
| @counter-style persian-alpha {
| |
| system: cyclic;
| |
| symbols: "\627\644\641" "\628" "\67E" "\62A" "\62B" "\62C" "\684" "\62D" "\62E" "\62F" "\630" "\631" "\632" "\698" "\633" "\634" "\635" "\636" "\637" "\638" "\639" "\63A" "\641" "\642" "\6A9" "\6AB" "\644" "\645" "\646" "\648" "\6BE" "\6CC";
| |
| suffix = " ";
| |
| }
| |
| | |
| .reflist-persian-alpha ol:lang( fa ) li {
| |
| list-style-type: persian-alpha !important;
| |
| direction: rtl;
| |
| text-align: right;
| |
| margin-left: 0;
| |
| }
| |
| | |
| /* Right margin for left-aligned tables */
| |
| table[align="left"] {
| |
| margin-right: 1.2em;
| |
| }
| |
| | |
| /* Center aligning wikitables should be as easy as using align=center */
| |
| table.wikitable[align="center"] {
| |
| margin-right: auto;
| |
| margin-left: auto;
| |
| }
| |
| | |
| .mw-indicator, .mw-helplink, .mw-indicator-pp-default {
| |
| -moz-user-select: none;
| |
| -webkit-user-select: none;
| |
| -ms-user-select: none;
| |
| user-select: none;
| |
| }
| |
| /* For portals, added 2011-12-07 -bv
| |
| On wide screens, show these as two columns
| |
| On narrow and mobile screens, let them collapse into a single column */
| |
| .mainpage-portals {
| |
| float: right;
| |
| width: 14.2%;
| |
| margin: 12px auto;
| |
| }
| |
| .portal-container-2 {
| |
| display: grid;
| |
| grid-gap: 15px;
| |
| grid-template-columns: repeat(2, auto);
| |
| grid-template-rows: auto;
| |
| width: 100%
| |
| }
| |
| .portal-container-3 {
| |
| display: grid;
| |
| grid-gap: 15px;
| |
| grid-template-columns: repeat(3, auto);
| |
| grid-template-rows: auto;
| |
| width: 100%
| |
| }
| |
| .portal-container-4 {
| |
| display: grid;
| |
| grid-gap: 15px;
| |
| grid-template-columns: repeat(4, auto);
| |
| grid-template-rows: auto;
| |
| width: 100%
| |
| }
| |
| .portal-container-5 {
| |
| display: grid;
| |
| grid-gap: 15px;
| |
| grid-template-columns: repeat(5, auto);
| |
| grid-template-rows: auto;
| |
| width: 100%
| |
| }
| |
| .portal-container-6 {
| |
| display: grid;
| |
| grid-gap: 15px;
| |
| grid-template-columns: repeat(6, auto);
| |
| grid-template-rows: auto;
| |
| width: 100%
| |
| }
| |
| .portal-container-7 {
| |
| display: grid;
| |
| grid-gap: 15px;
| |
| grid-template-columns: repeat(7, auto);
| |
| grid-template-rows: auto;
| |
| width: 100%
| |
| }
| |
| .portal-column-2-3 {
| |
| grid-column-end: span 2;
| |
| }
| |
| .portal-column-2-4 {
| |
| grid-column-end: span 2;
| |
| }
| |
| .portal-column-3-4 {
| |
| grid-column-end: span 3;
| |
| }
| |
| .portal-column-1-2,
| |
| .portal-column-1-3,
| |
| .portal-column-1-4,
| |
| .portal-column-1-5,
| |
| .portal-column-1-6,
| |
| .portal-column-1-7 {
| |
| grid-column-end: span 1;
| |
| }
| |
| .portal-column-2-2 {
| |
| grid-column-end: span 2;
| |
| }
| |
| .portal-column-3-3 {
| |
| grid-column-end: span 3;
| |
| }
| |
| .portal-column-4-4 {
| |
| grid-column-end: span 4;
| |
| }
| |
| .portal-column-5-5 {
| |
| grid-column-end: span 5;
| |
| }
| |
| .portal-column-6-6 {
| |
| grid-column-end: span 6;
| |
| }
| |
| .portal-column-7-7 {
| |
| grid-column-end: span 7;
| |
| }
| |
| @media only screen and (max-width: 700px) {
| |
| .mainpage-portals {
| |
| width: 25%;
| |
| }
| |
| /* Decouple the columns on narrow screens */
| |
| .portal-container-2,
| |
| .portal-container-3,
| |
| .portal-container-4,
| |
| .portal-container-5,
| |
| .portal-container-6,
| |
| .portal-container-7 {
| |
| display: block;
| |
| }
| |
| .portal-column-1-2,
| |
| .portal-column-2-4,
| |
| .portal-column-3-4,
| |
| .portal-column-1-3,
| |
| .portal-column-2-3,
| |
| .portal-column-2-2,
| |
| .portal-column-3-3,
| |
| .portal-column-4-4,
| |
| .portal-column-5-5,
| |
| .portal-column-6-6,
| |
| .portal-column-7-7 {
| |
| flo at: inherit;
| |
| wid th: 100%;
| |
| margin-top: 16px;
| |
| display: block !important;
| |
| text-align: center;
| |
| }
| |
| .portal-column-1-4 {
| |
| wid th: calc(50% - 16px);
| |
| }
| |
| .portal-column-1-6 {
| |
| wid th: calc(33.3% - 16px);
| |
| }
| |
| .portal-column-1-7 {
| |
| flo at: right;
| |
| wid th: calc(25% - 16px);
| |
| }
| |
| }
| |
| @media only screen and (max-width: 600px) {
| |
| .portal-column-1-4,
| |
| .portal-column-1-6,
| |
| .portal-column-1-5 {
| |
| float: inherit;
| |
| width: 100%;
| |
| margin: 0;
| |
| display: block !important;
| |
| text-align: center;
| |
| }
| |
| }
| |
| /* temporary fix for T86979 */
| |
| .ui-dialog { right: auto; }
| |
| | |
| /* wikipedia styles with unknown origin! */
| |
| .mw-body-content blockquote {
| |
| border-right:4px solid #eaecf0;
| |
| padding:8px 32px
| |
| }
| |
| | |
| /* طراحی صفحه اول */
| |
| .mainpage-top {
| |
| background-image: url(/mainpage-top-2.jpg);
| |
| background-repeat: no-repeat;
| |
| background-size: cover;
| |
| background-position-y: 60%;
| |
| background-position-x: center;
| |
| }
| |
| | |
| .rootpage-صفحهٔ_اصلی .firstHeading {
| |
| display: none;
| |
| }
| |
| | |
| /* عنوان جعبه ها */
| |
| .mainpage-box .heading {
| |
| background-image: url(/background-3.png);
| |
| }
| |
| /* فیدبک */
| |
| .page-صفحهٔ_اصلی .articleFeedbackv5 {
| |
| display: none
| |
| }
| |
| #mw-articlefeedbackv5 {
| |
| max-width: 100%;
| |
| width: auto !important;
| |
| }
| |
| .articleFeedbackv5 {
| |
| font-size: 80%;
| |
| }
| |
| .articleFeedbackv5-panel{
| |
| max-width: 100%;
| |
| }
| |
| .articleFeedbackv5-tooltip-trigger {
| |
| display:none
| |
| }
| |
| .articleFeedbackv5-title {
| |
| margin-top:0 !important
| |
| }
| |
| .feedback-text {
| |
| height: 6em !important;
| |
| margin-bottom: 12px;
| |
| }
| |
| .articleFeedbackv5-disclosure {
| |
| display:none
| |
| }
| |
| .articleFeedbackv5-submit {
| |
| float:left !important;
| |
| }
| |
| .articleFeedbackv5-cta-5 {
| |
| display: none;
| |
| }
| |
| | |
| .page-صفحهٔ_اصلی #content{
| |
| padding-top: 0;
| |
| }
| |
| | |
| /* مخفی کردن از بازدید کننده ها */
| |
| .showtologgedin {
| |
| display: none
| |
| }
| |
| | |
| /* navbox */
| |
| .navbox {
| |
| width: auto !important
| |
| }
| |
| | |
| /* side bar
| |
| #mw-panel{
| |
| posi tion: fixed;
| |
| z-index: 100;
| |
| /* background-color: #fefdf9; */
| |
| width: 10.5em;
| |
| overflow: auto;
| |
| }*/
| |
| | |
| /* navbox */
| |
| .navbox-title a {
| |
| color: black !important;;
| |
| text-decoration: underline;
| |
| }
| |
| .nv-talk {
| |
| display: none !important;
| |
| }
| |
| | |
| /* font-sizes */
| |
| .mw-body-content{
| |
| font-size: 16px;
| |
| }
| |
| .mw-editfont-monospace{
| |
| font-size: 15px;
| |
| }
| |
| img {
| |
| max-width: 100%;
| |
| height: auto !important;
| |
| clip: rect(auto, auto, auto, auto) !important;
| |
| }
| |
| | |
| /*
| |
| * New image thumb design
| |
| *
| |
| * @dependencies none
| |
| * @source en.wikipedia.org/wiki/MediaWiki:Gadget-NewImageThumb.css
| |
| * @revision 2
| |
| * @author: Edokter ([[User:Edokter]])
| |
| */
| |
| | |
| .tocnumber {
| |
| color: #333;
| |
| }
| |
| .toc, #toc,
| |
| .catlinks,
| |
| .mw-gallery-traditional li.gallerybox div.thumb,
| |
| div.thumbinner {
| |
| border-width: 1px;
| |
| border-style: solid;
| |
| border-color: #E0E0E0 #B1B1B1 #B1B1B1 #E0E0E0;
| |
| box-shadow: 0.25em 0.25em 0.5em rgba(0, 0, 0, 0.05);
| |
| }
| |
| div.thumbinner {
| |
| padding: 0;
| |
| }
| |
| div.thumbinner.mp-thumb {
| |
| box-shadow: none;
| |
| }
| |
| html .thumbimage {
| |
| border: none;
| |
| }
| |
| html .thumbcaption {
| |
| line-height: 1.5;
| |
| padding: 0.5em;
| |
| }
| |
| img.thumbborder {
| |
| border-width: 1px;
| |
| border-style: solid;
| |
| border-color: #E0E0E0 #B1B1B1 #B1B1B1 #E0E0E0;
| |
| }
| |
| .tmulti .tsingle {
| |
| margin: 0 !important;
| |
| }
| |
| | |
| /* پاپ آپ منابع
| |
| .mwe-popups.mwe-popups-type-reference .mwe-popups-title {
| |
| margin-top: 5px;
| |
| }
| |
| .mwe-popups .mwe-popups-title {
| |
| margin: 0 5px;
| |
| }
| |
| .mwe-popups.mwe-popups-type-reference .mwe-popups-extract .mwe-popups-fade {
| |
| position: inherit;
| |
| }
| |
| .mwe-popups .mwe-popups-extract {
| |
| margin: 5px;
| |
| position: unset;
| |
| }
| |
| */
| |
| /* جستجو
| |
| #searchInput {
| |
| padding: 0.2em 0.4em;
| |
| background-color: white !important;
| |
| }
| |
| */
| |
| /* لوگو */
| |
| #p-logo {
| |
| height: 180px;
| |
| }
| |
| #p-logo a {
| |
| posi tion: fixed;
| |
| margin-top: 10px;
| |
| height: 185px;
| |
| }
| |
| /*
| |
| #mw-panel #p-logo + .portal {
| |
| margin-top: 3em;
| |
| }*/
| |
| | |
| /* تصویر زمینه
| |
| body {
| |
| background-color: #b3e1b3;
| |
| background-image: url(background-3.png);
| |
| }
| |
| #mw-page-base {
| |
| background-color: unset;
| |
| background-image: none;
| |
| }*/
| |
| /* تب های بالا
| |
| .vectorTabs li {
| |
| background-image: linear-gradient(to top, #6c6 0, rgb(246, 255, 246) 1px, rgba(255,255,255,0) 100%);
| |
| }
| |
| .vectorTabs, .vectorTabs span, #mw-head .vectorMenu h3 {
| |
| background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #4bd74b 100%);
| |
| }
| |
| .vectorTabs .selected {
| |
| background: linear-gradient(to bottom, rgba(179, 225, 179, .1), #fff 70%);
| |
| }*/
| |
| | |
| /* محیط ویرایش */
| |
| #wpTextbox1 {
| |
| font-size: 15px;
| |
| font-family: tahoma;
| |
| }
| |
| /* الگوی شاخه */
| |
| .mw-indicator {
| |
| font-size: 20px;
| |
| }
| |
| | |
| /* دکمه های جمع شدن منوی سمت راست، بازگشت به بالای صفحه و تغییر اندازه فونت */
| |
| .sidebarbottons {
| |
| display: block;
| |
| position: fixed;
| |
| z-index: 999;
| |
| right: 0;
| |
| height: 23px;
| |
| width: 23px;
| |
| border: 1px solid #356843;
| |
| padding: 2px;
| |
| background-repeat: no-repeat;
| |
| background-position: center;
| |
| border-radius: 3px;
| |
| }
| |
| .sidebarbottons:hover {
| |
| filter: invert(40%);
| |
| }
| |
| #collsidebar {
| |
| background-image: url('/images/d/d6/Right.png');
| |
| bottom: calc( 50% + 11px );
| |
| }
| |
| | |
| #totop {
| |
| background-image: url('/images/d/da/Up.png');
| |
| bottom: calc( 50% + 11px );
| |
| }
| |
| | |
| #fontsizeup {
| |
| background-image: url('/images/2/2f/Plus.png');
| |
| bottom: calc( 50% - 11px );
| |
| }
| |
| | |
| #fontsizedown {
| |
| background-image: url('/images/e/ee/Minus.png');
| |
| bottom: calc( 50% - 33px );
| |
| }
| |
| | |
| /* حذف فاصله خالی اول مقالات */
| |
| p br {
| |
| display: none;
| |
| }
| |
| .page-کتاب_پاسخ .firstHeading,
| |
| .page-نرمافزار_پاسخ .firstHeading,
| |
| .page-درگاه_کرونا_و_بلایا .firstHeading,
| |
| .page-درگاه_مهدویت .firstHeading,
| |
| .page-درگاه_غدیر .firstHeading,
| |
| .page-درگاه_امام_حسین_ع .firstHeading,
| |
| .page-درگاه_فاطمی .firstHeading,
| |
| .page-درگاه_حکومت_دینی .firstHeading,
| |
| .page-درگاه_حوزه_و_روحانیت .firstHeading,
| |
| .page-درگاه_زن_و_خانواده .firstHeading {
| |
| display:none;
| |
| }
| |
| .page-کتاب_پاسخ #content,
| |
| .page-نرمافزار_پاسخ #content,
| |
| .page-درگاه_کرونا_و_بلایا #content,
| |
| .page-درگاه_مهدویت #content,
| |
| .page-درگاه_غدیر #content,
| |
| .page-درگاه_امام_حسین_ع #content,
| |
| .page-درگاه_فاطمی #content,
| |
| .page-درگاه_حکومت_دینی #content,
| |
| .page-درگاه_حوزه_و_روحانیت #content,
| |
| .page-درگاه_زن_و_خانواده #content {
| |
| padding-top: 0;
| |
| }
| |
| /* الگو:مقالههای کاربر */
| |
| .user-articles .mw-newpages-history, .user-articles .mw-newpages-length, .user-articles .mw-userlink, .user-articles .mw-usertoollinks, .user-articles .comment, .user-articles .mw-tag-markers, .user-articles .mw-newpages-oldtitle {
| |
| display: none;
| |
| }
| |
| .user-articles ul {
| |
| list-style: persian;
| |
| }
| |
| /* خرده ریز */
| |
| dd {
| |
| margin-left: 1em !important;
| |
| }
| |
| .navbar-mini, .mw-collapsible-toggle {
| |
| font-size: 80% !important;
| |
| }
| |
| .navbox-image img{
| |
| max-width: none;
| |
| }
| |
| /* بسم الله */
| |
| .page-صفحهٔ_اصلی #mw-head {
| |
| background-image: url('/images/1/15/Basmala.png');
| |
| background-repeat: no-repeat;
| |
| background-attachment: fixed;
| |
| background-position-x: 50%;
| |
| }
| |
| /* headings */
| |
| h1, h2, h3, h4, h5, h6 {
| |
| font-family: sahel;
| |
| font-weight: bold;
| |
| }
| |
| /* editing */
| |
| .ve-ui-mwWikitextSurface .ve-ce-attachedRootNode{
| |
| font-family:vazir;
| |
| font-size: 16px
| |
| }
| |
| #ca-ve-edit {
| |
| display: block !important;
| |
| }
| |
| /* language list */
| |
| #interwiki-completelist {
| |
| display: none;
| |
| }
| |
| * {
| |
| box-sizing: border-box;
| |
| }
| |
| /* vector 2022 */
| |
| .mw-logo {
| |
| | |
| background-repeat: no-repeat;
| |
| background-position: right;
| |
| background-size: 60px;
| |
| padding: 0px 65px;
| |
| height: 60px;
| |
| }
| |
| .mw-logo-wordmark {
| |
| font-size: 130%;
| |
| }
| |
| .mw-header {
| |
| min-height: 6em;
| |
| }
| |
| .mw-content-container, .mw-article-toolbar-container {
| |
| max -width: none;
| |
| }
| |
| .mw-sidebar-action {
| |
| display: none;
| |
| }
| |
| #p-lang-btn.mw-portlet-empty {
| |
| display: block;
| |
| }
| |
| #p-lang-btn {
| |
| float: left;
| |
| }
| |
| /* جعبه گفتاورد */
| |
| .quotebox {
| |
| width: 30%
| |
| }
| |
| @media only screen and (max-width: 600px) {
| |
| .quotebox {
| |
| width: 100%;
| |
| }
| |
| }
| |
| /* book reader */
| |
| .fileInfo .mediawiki-filewarning {
| |
| display: none;
| |
| }
| |
| .fileInfo .oo-ui-buttonElement-frameless.oo-ui-labelElement.oo-ui-iconElement > .oo-ui-buttonElement-button {
| |
| padding-right: unset;
| |
| }
| |
| .fileInfo .oo-ui-image-warning {
| |
| display: none;
| |
| }
| |
| .fullMedia .internal::before {
| |
| content: "دانلود "
| |
| }
| |
| .fullMedia .internal {
| |
| color: #fff;
| |
| background-color: #36c;
| |
| border-color: #36c;
| |
| line-height: 1.28571429em;
| |
| padding-top: 6px;
| |
| padding-bottom: 6px;
| |
| transition: background-color 100ms,color 100ms,border-color 100ms,box-shadow 100ms;
| |
| padding-right: 12px;
| |
| padding-left: 12px;
| |
| min-height: 2.28571429em;
| |
| }
| |
| .fileInfo .mime-type.has-warning {
| |
| color: black;
| |
| }
| |
| .oo-ui-tagMultiselectWidget-handle {
| |
| margin-right: 0;
| |
| }
| |
| /* sidebar */
| |
| .sidebar {
| |
| max-width: 25%;
| |
| }
| |
| .mw-parser-output .sidebar {
| |
| width: auto !important;
| |
| }
| |
| /* شاخه */
| |
| .mw-indicators {
| |
| float: right;
| |
| margin: 16px 0;
| |
| }
| |
| /* hide excess menus for non-logged-in */
| |
| #n-امتیاز-مشارکت, #t-whatlinkshere, #t-recentchangeslinked, #t-upload, #t-redirectmaker, #left-navigation, #ca-view, #ca-viewsource {
| |
| display: none;
| |
| }
| |
| .action-history #ca-view {
| |
| display: block;
| |
| }
| |
| .action-history #ca-history {
| |
| display: none;
| |
| }
| |
| .vector-menu-tabs .mw-list-item > a {
| |
| padding: 10px 0;
| |
| margin-bottom: 0;
| |
| border-bottom: none;
| |
| }
| |
| .mw-article-toolbar-container {
| |
| border-bottom: none;
| |
| }
| |
| .vector-article-toolbar {
| |
| float: left;
| |
| margin: 10px;
| |
| z-index: 1;
| |
| position: relative;
| |
| }
| |
| .page-صفحهٔ_اصلی .vector-article-toolbar {
| |
| display: none;
| |
| }
| |
| #mw-indicator-mw-helplink {
| |
| display: none;
| |
| }
| |
| /* compress header */
| |
| .mw-body-content {
| |
| margin-top: 0;
| |
| }
| |
| | |
| /* بزرگنمایی هنگام رفتن موس روی تصویر استفاده شده در الگو های zoom و imagelabel */
| |
|
| |
| .zoomonhover {
| |
| position: relative;
| |
| float: left;
| |
| clear: left;
| |
| }
| |
| .zoomonhovertext {
| |
| display: none;
| |
| z-index: 1000;
| |
| }
| |
| .zoomonhoverimageabove {
| |
| position: absolute;
| |
| left: 0px;
| |
| top: 0px;
| |
| display: none;
| |
| z-index: 100;
| |
| max-width: initial;
| |
| }
| |
| .zoomonhover:hover .zoomonhoverimageabove {
| |
| z-index: 10;
| |
| display: block;
| |
| background-color:white; /* in case of files with transparent background */
| |
| }
| |
| .zoomonhover:hover .zoomonhovertext {
| |
| display: block;
| |
| transition: .7s;
| |
| position: relative;
| |
| }
| |
| /* video and audio */
| |
| .video, .audio {
| |
| max-width: 30%;
| |
| }
| |
| .thumbinner .video, .thumbinner .audio {
| |
| max-width: none;
| |
| }
| |
| /* redirected from */
| |
| .mw-redirectedfrom {
| |
| float: left;
| |
| margin: -35px 0 0 0;
| |
| }
| |
| /* hide hitcounter */
| |
| #footer-info-0 {
| |
| display: none;
| |
| }
| |
| /* related */
| |
| .mw-body {
| |
| padding-bottom: 0.5em;
| |
| }
| |
| .ra-read-more {
| |
| padding-top: 0;
| |
| }
| |
| /* comment section */
| |
| .cs-comments, .cs-title-edit-field, .cs-body-edit-field {
| |
| font-family: vazir !important;
| |
| }
| |
| .cs-header .oo-ui-buttonElement-button[tabindex="0"] {
| |
| position: fixed;
| |
| top: 4em;
| |
| left: 1em;
| |
| }
| |
| .cs-header .oo-ui-buttonElement-button[title="لغو"], .cs-header .oo-ui-buttonElement-button[title="ثبت"] {
| |
| position: relative;
| |
| top: unset;
| |
| left: unset;
| |
| }
| |
| /* red links color */
| |
| a.new {
| |
| color: black;
| |
| }
| |
| | |
| | |
| | |
| | |
| /* ==========================================================================
| |
| طراحی آیکونهای مربعی سهبعدی و هوشمند (سازگار با انواع تصاویر)
| |
| ========================================================================== */
| |
| | |
| /* کانتینر اصلی و سهبعدی آیکون */
| |
| .wiki-3d-box {
| |
| width: 110px;
| |
| height: 110px;
| |
| border-radius: 15px; /* گوشههای نرم مربع */
| |
| background: radial-gradient(circle at 30% 30%, #ffffff 0%, #fcfcfc 40%, #ececec 80%, #dfdfdf 100%);
| |
| border: 3px solid #eef0f3;
| |
| box-shadow: 0 0px 8px rgba(0, 0, 0, 0.15),
| |
| inset 0 4px 8px rgba(255, 255, 255, 1),
| |
| inset 0 -6px 12px rgba(0, 0, 0, 0.08);
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| overflow: hidden;
| |
| position: relative;
| |
| transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* انیمیشن نرم رفتن موس */
| |
| cursor: pointer;
| |
| }
| |
| | |
| /* افکت رفتن موس روی آیکون (Hover) */
| |
| .wiki-3d-box:hover {
| |
| transform: scale(1.08); /* ۸ درصد بزرگنمایی */
| |
| box-shadow: 0 0px 10px rgb(93, 156, 227),
| |
| inset 0 4px 8px rgba(255, 255, 255, 1),
| |
| inset 0 -6px 12px rgba(0, 0, 0, 0.08) !important; /* عمیقتر شدن سایه بیرونی */
| |
| }
| |
| | |
| /* فریم یا قاب داخلی سفید رنگ دور تصویر */
| |
| .wiki-3d-inner-frame {
| |
| width: 105px;
| |
| height: 105px;
| |
| border-radius: 8px;
| |
| border: 4px solid #ffffff;
| |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
| |
| overflow: hidden;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| background-color: #f9f9f9;
| |
| }
| |
| | |
| /* نگهدارنده هوشمند تصویر جهت فیت شدن کامل عکسهای مربع یا مستطیل */
| |
| .wiki-3d-image-wrapper {
| |
| min-width: 100%;
| |
| min-height: 100%;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| }
| |
| | |
| | |
| | |
| | |
| /* ==========================================================================
| |
| طراحی آیکونهای دایره سهبعدی و هوشمند (سازگار با انواع تصاویر)
| |
| ========================================================================== */
| |
| /* کانتینر اصلی و سهبعدی آیکون */
| |
| .wiki-3d-circle {
| |
| box-sizing: border-box;
| |
| width: 110px;
| |
| height: 110px;
| |
| border-radius: 50%;
| |
| background: radial-gradient(circle at 30% 30%, #ffffff 0%, #fcfcfc 40%, #ececec 80%, #dfdfdf 100%);
| |
| border: 3px solid #eef0f3;
| |
| box-shadow: 0 0 8px rgba(0, 0, 0, 0.12),
| |
| inset 0 4px 8px rgba(255, 255, 255, 1),
| |
| inset 0 -6px 12px rgba(0, 0, 0, 0.08);
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| overflow: hidden;
| |
| position: relative;
| |
| transition: transform 0.3s ease, box-shadow 0.3s ease !important;
| |
| cursor: pointer;
| |
| }
| |
| | |
| /* افکت رفتن موس روی آیکون */
| |
| .wiki-3d-circle:hover {
| |
| transform: scale(1.08);
| |
| box-shadow: 0 0 10px rgba(93, 156, 227, 0.5),
| |
| inset 0 4px 8px rgba(255, 255, 255, 1),
| |
| inset 0 -6px 12px rgba(0, 0, 0, 0.08) !important;
| |
| }
| |
| | |
| /* فریم داخلی سفید */
| |
| .wiki-3d-inner-frame-circle {
| |
| box-sizing: border-box;
| |
| width: 102px; /* کمی کوچکتر شد تا از تداخل مرزها جلوگیری شود */
| |
| height: 102px;
| |
| border-radius: 50%;
| |
| border: 3px solid #ffffff; /* کاهش ضخامت برای هماهنگی بیشتر */
| |
| background-clip: padding-box; /* جلوگیری از نشست رنگ مرز به داخل */
| |
| overflow: hidden;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| background-color: #f9f9f9;
| |
| }
| |
| | |
| /* نگهدارنده تصویر */
| |
| .wiki-3d-image-wrapper-circle {
| |
| width: 100%;
| |
| height: 100%;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| }
| |
| | |
| .wiki-3d-image-wrapper-circle img,
| |
| .wiki-3d-circle img {
| |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: cover; /* پر کردن کامل بدون بهم ریختگی */
| |
| display: block !important;
| |
| | |
| }
| |
| | |
| | |
| /* --- MediaWiki Full-Width Banner Slider (3:1) --- */
| |
| .fgwiki-slider {
| |
| --fgwiki-radius: 8px; /* کمی گردتر برای ظاهر بنری */
| |
| --fgwiki-dot-size: 10px;
| |
| --fgwiki-shadow: none; /* در حالت تمامعرض سایه کمتر زیباتر است */
| |
| --fgwiki-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
| |
|
| |
| position: relative;
| |
| width: 100%; /* تمام عرض صفحه */
| |
| max-width: 100%; /* حذف محدودیت عرض */
| |
| margin: 0; /* حذف حاشیه اضافی برای چسبیدن به متنهای بالا و پایین */
| |
| border-radius: var(--fgwiki-radius);
| |
| overflow: hidden;
| |
| background: #1a1a1a;
| |
| aspect-ratio: 3 / 1; /* نسبت ۳ به ۱: ارتفاع دقیقاً یکسوم عرض */
| |
| direction: ltr;
| |
| }
| |
| | |
| .fgwiki-slider, .fgwiki-slider * { box-sizing: border-box; }
| |
| | |
| .fgwiki-slider__track {
| |
| position: relative; /* یا absolute، بسته به نیاز */
| |
| width: 100%; /* یا مقدار ثابت */
| |
| height: 100%; /* یا مقدار ثابت/متغیر دیگر */
| |
| | |
| overflow: hidden; /* برای جلوگیری از بیرون زدن اسلایدها */
| |
| }
| |
| .fgwiki-slider__slide {
| |
| position: absolute;
| |
| inset: 0;
| |
| opacity: 0;fgwiki-slider__slide
| |
| visibility: hidden;
| |
| transition: opacity 1s ease, visibility 1s ease;
| |
| }
| |
| | |
| .fgwiki-slider__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
| |
| | |
| .fgwiki-slider__slide::after {
| |
| content: "";
| |
| position: absolute;
| |
| inset: 0;
| |
| background: var(--fgwiki-overlay);
| |
| pointer-events: none;
| |
| }
| |
| | |
| .fgwiki-slider__slide img {
| |
| display: block;
| |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: cover; /* پر کردن کادر بدون بههمریختگی تصویر */
| |
| object-position: center; /* تمرکز عکس روی مرکز */
| |
| }
| |
| | |
| /* دایرههای پایین */
| |
| .fgwiki-slider__dots {
| |
| position: absolute;
| |
| bottom: 12px;
| |
| left: 50%;
| |
| transform: translateX(-50%);
| |
| z-index: 3;
| |
| display: flex;
| |
| gap: 8px;
| |
| }
| |
| | |
| .fgwiki-slider__dot {
| |
| width: var(--fgwiki-dot-size);
| |
| height: var(--fgwiki-dot-size);
| |
| border: 0;
| |
| border-radius: 50%;
| |
| background: rgba(255, 255, 255, 0.5);
| |
| cursor: pointer;
| |
| padding: 0;
| |
| transition: all 0.3s ease;
| |
| }
| |
| | |
| .fgwiki-slider__dot.is-active {
| |
| background: #ffffff;
| |
| transform: scale(1.2);
| |
| }
| |
| /* کانتینر اصلی */
| |
| .video-grid {
| |
| display: flex;
| |
| flex-wrap: wrap; /* اجازه میدهد در صفحه کوچک، ویدیوها به سطر بعدی بروند */
| |
| gap: 15px; /* فاصله بین ویدیوها */
| |
| justify-content: center;
| |
| }
| |
| | |
| /* آیتم ویدیو */
| |
| .video-item {
| |
| /* در دسکتاپ: ۳ ویدیو در هر ردیف (با کسر فاصله) */
| |
| flex: 1 1 calc(33.33% - 15px);
| |
| min-width: 280px; /* حداقل عرض برای اینکه در تبلت خیلی کوچک نشوند */
| |
| }
| |
| | |
| /* در موبایل: ویدیوها ۱۰۰ درصد عرض را میگیرند */
| |
| @media (max-width: 768px) {
| |
| .video-item {
| |
| flex: 1 1 100%;
| |
| min-width: 100%; /* این خط باعث میشود در موبایل کامل پر شود */
| |
| }
| |
| }
| |
| | |
| /* تنظیمات خود ویدیو */
| |
| .video-item video {
| |
| width: 100%;
| |
| height: auto;
| |
| display: block;
| |
| border-radius: 8px;
| |
| background-color: #000; /* رنگ پسزمینه در صورت لود نشدن */
| |
| }
| |
| | |
| | |
| .category-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
| |
| gap: 16px;
| |
| margin: 20px 0;
| |
| padding: 0;
| |
| }
| |
| | |
| .category-card {
| |
| display: block;
| |
| padding: 18px 16px;
| |
| background: #ffffff;
| |
| border: 1px solid #e5e7eb;
| |
| border-radius: 14px;
| |
| text-decoration: none;
| |
| color: #1f2937;
| |
| box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
| |
| transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
| |
| }
| |
| | |
| .category-card:hover {
| |
| transform: translateY(-4px);
| |
| box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
| |
| border-color: #cbd5e1;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .category-title {
| |
| display: block;
| |
| font-size: 16px;
| |
| font-weight: 700;
| |
| line-height: 1.8;
| |
| margin: 0;
| |
| color: #111827;
| |
| }
| |
| | |
| .category-desc {
| |
| display: block;
| |
| margin-top: 8px;
| |
| font-size: 13px;
| |
| line-height: 1.9;
| |
| color: #6b7280;
| |
| }
| |
| | |
| .category-section-title {
| |
| font-size: 24px;
| |
| font-weight: 800;
| |
| margin: 24px 0 16px;
| |
| color: #111827;
| |
| text-align: center;
| |
| }
| |
| | |
| @media (max-width: 768px) {
| |
| .category-grid {
| |
| grid-template-columns: 1fr;
| |
| gap: 12px;
| |
| }
| |
| | |
| .category-card {
| |
| padding: 16px 14px;
| |
| border-radius: 12px;
| |
| }
| |
| | |
| .category-title {
| |
| font-size: 15px;
| |
| }
| |
| | |
| .category-desc {
| |
| font-size: 12px;
| |
| }
| |
| }
| |
| | |
| /* =========================================
| |
| Full CSS - only requested fixes applied
| |
| Based on pasted-text.txt
| |
| ========================================= */
| |
| | |
| /* 1) Category Tree */
| |
| #mw-subcategories ul {
| |
| margin: 0;
| |
| padding-right: 1.5em;
| |
| list-style: none;
| |
| }
| |
| | |
| .CategoryTreeChildren {
| |
| margin-left: 1.25em;
| |
| }
| |
| | |
| .CategoryTreeToggle {
| |
| color: #36c;
| |
| }
| |
| | |
| .CategoryTreeEmptyBullet {
| |
| color: #c8ccd1;
| |
| }
| |
| | |
| /* 2) Portal / Province Layouts */
| |
| .portal-container-2,
| |
| .portal-container-3,
| |
| .portal-container-4,
| |
| .portal-container-5,
| |
| .portal-container-6,
| |
| .portal-container-7 {
| |
| display: grid;
| |
| grid-gap: 15px;
| |
| margin: 0;
| |
| padding: 0;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .portal-container-2 {
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| }
| |
| | |
| .portal-container-3 {
| |
| grid-template-columns: repeat(3, minmax(0, 1fr));
| |
| }
| |
| | |
| .portal-container-4 {
| |
| grid-template-columns: repeat(4, minmax(0, 1fr));
| |
| }
| |
| | |
| .portal-container-5 {
| |
| grid-template-columns: repeat(5, minmax(0, 1fr));
| |
| }
| |
| | |
| .portal-container-6 {
| |
| grid-template-columns: repeat(6, auto);
| |
| grid-template-rows: auto;
| |
| }
| |
| | |
| .portal-container-7 {
| |
| grid-template-columns: repeat(7, minmax(0, 1fr));
| |
| }
| |
| | |
| /* Decouple the columns on narrow screens */
| |
| @media screen and (max-width: 992px) {
| |
| .portal-container-2,
| |
| .portal-container-3,
| |
| .portal-container-4,
| |
| .portal-container-5,
| |
| .portal-container-6,
| |
| .portal-container-7 {
| |
| grid-template-columns: repeat(3, minmax(0, 1fr));
| |
| }
| |
| }
| |
| | |
| @media screen and (max-width: 768px) {
| |
| .portal-container-2,
| |
| .portal-container-3,
| |
| .portal-container-4,
| |
| .portal-container-5,
| |
| .portal-container-6,
| |
| .portal-container-7 {
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| }
| |
| }
| |
| | |
| /* Sidebar override */
| |
| .mw-parser-output .sidebar {
| |
| width: auto !important;
| |
| }
| |
| | |
| /* 3) Generic Category Grid */
| |
| .category-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(5, minmax(0, 1fr));
| |
| gap: 16px;
| |
| margin: 0;
| |
| padding: 0;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .category-card {
| |
| display: block;
| |
| padding: 18px 16px;
| |
| border-radius: 12px;
| |
| background: #fff;
| |
| border: 1px solid #e5e7eb;
| |
| text-decoration: none;
| |
| color: #1f2937;
| |
| box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
| |
| transition: transform 0.2s ease, box-shadow 0.2s ease;
| |
| }
| |
| | |
| .category-card:hover {
| |
| transform: translateY(-4px);
| |
| box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
| |
| }
| |
| | |
| .category-title {
| |
| display: block;
| |
| font-size: 16px;
| |
| font-weight: 700;
| |
| line-height: 1.5;
| |
| }
| |
| | |
| .category-desc {
| |
| display: block;
| |
| margin-top: 8px;
| |
| font-size: 13px;
| |
| color: #6b7280;
| |
| line-height: 1.7;
| |
| }
| |
| | |
| /* 4) Wiki Category Grid */
| |
| .wiki-category-container {
| |
| direction: rtl;
| |
| max-width: 1400px;
| |
| margin: 10px auto;
| |
| padding: 10px;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .wiki-category-grid {
| |
| display: grid !important;
| |
| grid-template-columns: repeat(5, 1fr) !important;
| |
| gap: 12px !important;
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| }
| |
| | |
| .wiki-category-card {
| |
| display: flex !important;
| |
| align-items: center;
| |
| justify-content: center;
| |
| width: 100% !important;
| |
| min-width: 0 !important;
| |
| min-height: 52px;
| |
| padding: 12px 8px !important;
| |
| border: 1.5px solid #8ee0d8;
| |
| border-radius: 12px;
| |
| background: #ffffff;
| |
| color: #2d3748 !important;
| |
| text-decoration: none !important;
| |
| text-align: center;
| |
| font-size: clamp(10px, 0.9vw, 13px) !important;
| |
| font-weight: 400;
| |
| line-height: 1.3;
| |
| white-space: nowrap !important;
| |
| overflow: hidden !important;
| |
| text-overflow: clip !important;
| |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
| |
| transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
| |
| }
| |
| | |
| .wiki-category-card:hover,
| |
| .wiki-category-card:active {
| |
| transform: translateY(-3px);
| |
| border-color: #65c3ba;
| |
| color: #65c3ba !important;
| |
| text-decoration: none !important;
| |
| box-shadow: 0 4px 12px rgba(101, 195, 186, 0.15);
| |
| }
| |
| | |
| .wiki-category-card:visited {
| |
| color: #2d3748 !important;
| |
| }
| |
| | |
| .wiki-category-card:focus {
| |
| outline: none;
| |
| border-color: #65c3ba;
| |
| box-shadow: 0 0 0 3px rgba(101, 195, 186, 0.18);
| |
| }
| |
| | |
| @media (max-width: 992px) {
| |
| .wiki-category-grid {
| |
| grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
| |
| }
| |
| | |
| .wiki-category-card {
| |
| font-size: clamp(9.5px, 1.3vw, 12px) !important;
| |
| }
| |
| | |
| .category-grid {
| |
| grid-template-columns: repeat(3, minmax(0, 1fr));
| |
| }
| |
| }
| |
| | |
| @media (max-width: 768px) {
| |
| .wiki-category-container {
| |
| padding: 8px;
| |
| }
| |
| | |
| .wiki-category-grid {
| |
| grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
| |
| gap: 10px !important;
| |
| }
| |
| | |
| .wiki-category-card {
| |
| min-height: 46px;
| |
| padding: 10px 6px !important;
| |
| font-size: clamp(9px, 2.8vw, 11px) !important;
| |
| }
| |
| | |
| .category-grid {
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| }
| |
| }
| |
| | |
| | |
| | |
| | |
| | |
| /* ==========================================================================
| |
| ساختار گالری تصاویر دایرهای منعطف (Responsive Circle Gallery)
| |
| طراحی شده برای استفاده در الگوهای ردیفی ویکی
| |
| ========================================================================== */
| |
| | |
| /* کانتینر اصلی گالری */
| |
| .wiki-circle-gallery {
| |
| display: flex;
| |
| flex-direction: row;
| |
| flex-wrap: wrap;
| |
| gap: 16px;
| |
| justify-content: center;
| |
| align-items: flex-start;
| |
| width: 100%;
| |
| margin: 15px 0;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| /* آیتمهای مجزای گالری (شامل تصویر و کپشن زیر آن) */
| |
| .wiki-circle-item {
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| justify-content: flex-start;
| |
| flex: 1 1 21%; /* توزیع بهینه ۴ ستون در حالت دسکتاپ */
| |
| min-width: 130px; /* جلوگیری از تغییر فرم در صفحات بسیار کوچک */
| |
| gap: 8px; /* فاصله عمودی استاندارد بین دایره و متن */
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| /* استایل کپشن زیر تصاویر */
| |
| .wiki-circle-caption {
| |
| font-size: 0.88em;
| |
| font-weight: 500;
| |
| line-height: 1.45;
| |
| color: #3b3b3b;
| |
| text-align: center;
| |
| word-break: break-word;
| |
| max-width: 100%;
| |
| }
| |
| | |
| | |
| /* مدل جدید برای فیت کردن عکس داخل دایره */
| |
| | |
| .wiki-avatar-3d {
| |
| width: 230px;
| |
| height: 230px;
| |
| margin: 20px auto;
| |
| border-radius: 50%;
| |
| background: radial-gradient(circle at 30% 30%, #ffffff 0%, #fcfcfc 42%, #ececec 80%, #dfdfdf 100%);
| |
| border: 3px solid #eef0f3;
| |
| box-shadow:
| |
| 0 15px 35px rgba(0, 0, 0, 0.15),
| |
| inset 0 4px 8px rgba(255, 255, 255, 1),
| |
| inset 0 -6px 12px rgba(0, 0, 0, 0.08);
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| overflow: hidden;
| |
| transition: transform 0.3s ease, box-shadow 0.3s ease;
| |
| }
| |
| | |
| .wiki-avatar-3d:hover {
| |
| transform: scale(1.08);
| |
| box-shadow:
| |
| 0 20px 45px rgba(0, 0, 0, 0.25),
| |
| inset 0 4px 8px rgba(255, 255, 255, 1),
| |
| inset 0 -6px 12px rgba(0, 0, 0, 0.08);
| |
| }
| |
| | |
| .wiki-avatar-3d__inner {
| |
| width: 82%;
| |
| height: 82%;
| |
| border-radius: 50%;
| |
| border: 4px solid #fff;
| |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
| |
| overflow: hidden;
| |
| background-color: #f9f9f9;
| |
| background-position: center center;
| |
| background-repeat: no-repeat;
| |
| background-size: cover;
| |
| }
| |
| | |
| | |
| | |
| /* جلوگیری از اسکرول صفحه */
| |
| /* کانتینر اصلی پاپآپ */
| |
| /* جلوگیری از اسکرول صفحه */
| |
| body.modal-open { overflow: hidden !important; }
| |
| | |
| .discount-overlay {
| |
| position: fixed; inset: 0; z-index: 99999;
| |
| display: flex; align-items: center; justify-content: center;
| |
| padding: 20px; background: rgba(15, 23, 42, 0.75);
| |
| backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
| |
| opacity: 0; visibility: hidden; transition: all 0.3s ease;
| |
| }
| |
| .discount-overlay.is-visible { opacity: 1; visibility: visible; }
| |
| | |
| .discount-modal {
| |
| position: relative; width: min(100%, 500px); padding: 40px 30px;
| |
| text-align: center; background: white; border-radius: 24px;
| |
| box-shadow: 0 20px 50px rgba(0,0,0,0.3);
| |
| transform: translateY(30px); transition: 0.4s cubic-bezier(0.17, 0.84, 0.44, 1);
| |
| direction: rtl; font-family: iransans, sans-serif;
| |
| }
| |
| .discount-overlay.is-visible .discount-modal { transform: translateY(0); }
| |
| | |
| .discount-modal__close {
| |
| position: absolute; top: 15px; left: 15px; background: #f1f5f9;
| |
| border: none; border-radius: 50%; width: 35px; height: 35px; cursor: pointer;
| |
| }
| |
| | |
| .discount-modal__image {
| |
| width: 80px; height: 80px; object-fit: contain; margin-bottom: 15px;
| |
| border-radius: 15px;
| |
| }
| |
| | |
| .discount-modal__title { color: #0f172a; font-size: 22px; margin: 10px 0; font-weight: 900; }
| |
| .discount-modal__desc { color: #64748b; font-size: 14px; line-height: 1.8; margin-bottom: 20px; }
| |
| | |
| .discount-modal__button {
| |
| display: block; width: 100%; padding: 14px; background: #f59e0b;
| |
| color: #111827; text-decoration: none; border-radius: 12px;
| |
| font-weight: bold; font-size: 15px; transition: 0.2s;
| |
| }
| |
| .discount-modal__button:hover { background: #d97706; color: white; }
| |
| | |
| /* المان تنظیمات که در صفحه مخفی است */
| |
| #popup-settings { display: none; }
| |
| | |
| @media (max-width: 768px) {
| |
| .discount-modal {
| |
| width: calc(100% - 24px);
| |
| max-width: none;
| |
| padding: 32px 20px;
| |
| border-radius: 20px;
| |
| }
| |
| | |
| .discount-modal__title {
| |
| font-size: 20px;
| |
| }
| |
| | |
| .discount-modal__desc {
| |
| font-size: 15px;
| |
| }
| |
| | |
| .discount-modal__button {
| |
| padding: 15px;
| |
| font-size: 16px;
| |
| }
| |
| | |
| .discount-modal__image {
| |
| width: 90px;
| |
| height: 90px;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 480px) {
| |
| .discount-modal {
| |
| width: calc(100% - 16px);
| |
| padding: 30px 16px;
| |
| }
| |
| }
| |
| | |
| | |
| /* نقطه روی عکس */
| |
| /* کانتینر اصلی تصویر */
| |
| .interactive-image {
| |
| position: relative;
| |
| width: min(100%, 1000px);
| |
| margin-inline: auto;
| |
| isolation: isolate;
| |
| }
| |
| | |
| /* تصویر اصلی */
| |
| .interactive-image__main {
| |
| display: block;
| |
| width: 100%;
| |
| height: auto;
| |
| border-radius: 18px;
| |
| }
| |
| | |
| /* نقطه تعاملی */
| |
| .image-hotspot {
| |
| position: absolute;
| |
| z-index: 3;
| |
| top: var(--y);
| |
| left: var(--x);
| |
| width: 42px;
| |
| height: 42px;
| |
| padding: 0;
| |
| border: 0;
| |
| border-radius: 50%;
| |
| background: transparent;
| |
| cursor: pointer;
| |
| transform: translate(-50%, -50%);
| |
| display: grid;
| |
| place-items: center;
| |
| }
| |
| | |
| /* خود نقطه */
| |
| .image-hotspot__dot {
| |
| position: relative;
| |
| display: block;
| |
| width: 16px;
| |
| height: 16px;
| |
| border: 3px solid #fff;
| |
| border-radius: 50%;
| |
| background: #e11d48;
| |
| box-shadow:
| |
| 0 4px 12px rgba(0, 0, 0, 0.3),
| |
| 0 0 0 5px rgba(225, 29, 72, 0.25);
| |
| }
| |
| | |
| /* افکت موج دور نقطه */
| |
| .image-hotspot__dot::before,
| |
| .image-hotspot__dot::after {
| |
| content: "";
| |
| position: absolute;
| |
| inset: 50%;
| |
| width: 100%;
| |
| height: 100%;
| |
| border: 2px solid rgba(255, 255, 255, 0.9);
| |
| border-radius: inherit;
| |
| transform: translate(-50%, -50%);
| |
| animation: hotspotPulse 2s infinite;
| |
| }
| |
| | |
| .image-hotspot__dot::after {
| |
| animation-delay: 1s;
| |
| }
| |
| | |
| @keyframes hotspotPulse {
| |
| 0% {
| |
| width: 100%;
| |
| height: 100%;
| |
| opacity: 0.9;
| |
| }
| |
| | |
| 100% {
| |
| width: 300%;
| |
| height: 300%;
| |
| opacity: 0;
| |
| }
| |
| }
| |
| | |
| /* کارت اطلاعات */
| |
| .hotspot-card {
| |
| position: absolute;
| |
| z-index: 10;
| |
| top: 50%;
| |
| left: 50%;
| |
| width: min(290px, calc(100% - 24px));
| |
| padding: 10px;
| |
| border: 1px solid rgba(255, 255, 255, 0.6);
| |
| border-radius: 16px;
| |
| background: rgba(255, 255, 255, 0.96);
| |
| box-shadow: 0 18px 50px rgba(15, 23, 42, 0.25);
| |
| backdrop-filter: blur(10px);
| |
| | |
| opacity: 0;
| |
| visibility: hidden;
| |
| pointer-events: none;
| |
| transform: translate(-50%, -45%) scale(0.94);
| |
| transition:
| |
| opacity 180ms ease,
| |
| visibility 180ms ease,
| |
| transform 180ms ease;
| |
| }
| |
| | |
| /* وضعیت باز بودن کارت */
| |
| .hotspot-card.is-open {
| |
| opacity: 1;
| |
| visibility: visible;
| |
| pointer-events: auto;
| |
| transform: translate(-50%, -50%) scale(1);
| |
| }
| |
| | |
| /* تصویر داخل کارت */
| |
| .hotspot-card__image {
| |
| display: block;
| |
| width: 100%;
| |
| aspect-ratio: 16 / 9;
| |
| object-fit: cover;
| |
| border-radius: 11px;
| |
| }
| |
| | |
| /* محتوای کارت */
| |
| .hotspot-card__content {
| |
| padding: 12px 4px 4px;
| |
| text-align: right;
| |
| }
| |
| | |
| .hotspot-card__title {
| |
| display: block;
| |
| margin-bottom: 5px;
| |
| color: #0f172a;
| |
| font-size: 16px;
| |
| line-height: 1.6;
| |
| }
| |
| | |
| .hotspot-card__description {
| |
| margin: 0 0 12px;
| |
| color: #64748b;
| |
| font-size: 13px;
| |
| line-height: 1.7;
| |
| }
| |
| | |
| /* دکمه CTA */
| |
| .hotspot-card__cta {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| min-height: 42px;
| |
| padding: 8px 16px;
| |
| border-radius: 10px;
| |
| background: #e11d48;
| |
| color: #fff;
| |
| font-size: 14px;
| |
| font-weight: 700;
| |
| text-decoration: none;
| |
| transition:
| |
| background-color 160ms ease,
| |
| transform 160ms ease;
| |
| }
| |
| | |
| .hotspot-card__cta:hover {
| |
| background: #be123c;
| |
| transform: translateY(-1px);
| |
| }
| |
| | |
| /* دکمه بستن */
| |
| .hotspot-card__close {
| |
| position: absolute;
| |
| z-index: 2;
| |
| top: 16px;
| |
| left: 16px;
| |
| width: 30px;
| |
| height: 30px;
| |
| padding: 0;
| |
| border: 0;
| |
| border-radius: 50%;
| |
| background: rgba(15, 23, 42, 0.75);
| |
| color: #fff;
| |
| font-size: 22px;
| |
| line-height: 1;
| |
| cursor: pointer;
| |
| }
| |
| | |
| /* نمایش فوکوس برای کاربران کیبورد */
| |
| .image-hotspot:focus-visible,
| |
| .hotspot-card__close:focus-visible,
| |
| .hotspot-card__cta:focus-visible {
| |
| outline: 3px solid #38bdf8;
| |
| outline-offset: 3px;
| |
| }
| |
| | |
| /* موبایل */
| |
| @media (max-width: 600px) {
| |
| .interactive-image__main {
| |
| border-radius: 12px;
| |
| }
| |
| | |
| .hotspot-card {
| |
| width: calc(100% - 20px);
| |
| }
| |
| | |
| .hotspot-card__image {
| |
| aspect-ratio: 2 / 1;
| |
| }
| |
| }
| |
| | |
| /* غیرفعالکردن انیمیشن برای کاربران حساس به حرکت */
| |
| @media (prefers-reduced-motion: reduce) {
| |
| .image-hotspot__dot::before,
| |
| .image-hotspot__dot::after {
| |
| animation: none;
| |
| }
| |
| | |
| .hotspot-card {
| |
| transition: none;
| |
| }
| |
| }
| |
| | |
| | |
| /* کانتینر 4 تایی*/
| |
| | |
| .sajad-categories {
| |
| width: 100%;
| |
| }
| |
| | |
| .sajad-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| gap: 16px;
| |
| }
| |
| | |
| .sajad-card {
| |
| position: relative;
| |
| display: block;
| |
| overflow: hidden;
| |
| border-radius: 20px;
| |
| aspect-ratio: 1 / 0.72;
| |
| text-decoration: none;
| |
| background: #f3f3f3;
| |
| }
| |
| | |
| .sajad-card img {
| |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: cover;
| |
| display: block;
| |
| transition: transform 0.35s ease;
| |
| }
| |
| | |
| .sajad-card:hover img {
| |
| transform: scale(1.04);
| |
| }
| |
| | |
| .sajad-card::after {
| |
| content: "";
| |
| position: absolute;
| |
| inset: 0;
| |
| background: linear-gradient(
| |
| to top,
| |
| rgba(0, 0, 0, 0.35) 0%,
| |
| rgba(0, 0, 0, 0.05) 45%,
| |
| rgba(0, 0, 0, 0) 70%
| |
| );
| |
| pointer-events: none;
| |
| }
| |
| | |
| .sajad-label {
| |
| position: absolute;
| |
| right: 16px;
| |
| bottom: 14px;
| |
| z-index: 2;
| |
| color: #111;
| |
| font-size: 18px;
| |
| font-weight: 700;
| |
| line-height: 1.4;
| |
| text-shadow: 0 1px 2px rgba(255,255,255,0.55);
| |
| }
| |
| | |
| .sajad-label--white {
| |
| color: #fff;
| |
| text-shadow: 0 1px 3px rgba(0,0,0,0.55);
| |
| }
| |
| | |
| .sajad-card:focus-visible {
| |
| outline: 3px solid #111;
| |
| outline-offset: 3px;
| |
| }
| |
| | |
| .sr-only {
| |
| position: absolute;
| |
| width: 1px;
| |
| height: 1px;
| |
| padding: 0;
| |
| margin: -1px;
| |
| overflow: hidden;
| |
| clip: rect(0, 0, 0, 0);
| |
| white-space: nowrap;
| |
| border: 0;
| |
| }
| |
| | |
| @media (max-width: 768px) {
| |
| .sajad-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| | |
| .sajad-card {
| |
| aspect-ratio: 1 / 0.68;
| |
| }
| |
| }
| |
| | |
| | |
| /* کانتینر متن و عکس -عکس های اورراید */
| |
| | |
| .sajad-hero {
| |
| background: var(--hero-bg, #E5D5C0);
| |
| padding: clamp(24px, 4vw, 56px);
| |
| direction: rtl;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .sajad-hero__container {
| |
| max-width: 1200px;
| |
| margin: 0 auto;
| |
| display: grid;
| |
| grid-template-columns: 1.1fr 0.9fr;
| |
| align-items: center;
| |
| gap: clamp(24px, 4vw, 64px);
| |
| min-height: min(620px, auto);
| |
| }
| |
| | |
| .sajad-hero__content {
| |
| text-align: right;
| |
| max-width: 560px;
| |
| }
| |
| | |
| .sajad-hero__badge {
| |
| display: inline-block;
| |
| background: var(--hero-badge-bg, #100E47);
| |
| color: var(--hero-badge-text, #fff);
| |
| font-size: clamp(0.85rem, 1vw, 1rem);
| |
| font-weight: 700;
| |
| padding: 10px 16px;
| |
| border-radius: 10px;
| |
| margin-bottom: 18px;
| |
| line-height: 1.6;
| |
| }
| |
| | |
| .sajad-hero__title {
| |
| margin: 0 0 14px;
| |
| color: var(--hero-title, #100E47);
| |
| font-size: clamp(1.8rem, 3vw, 3.4rem);
| |
| font-weight: 800;
| |
| line-height: 1.25;
| |
| letter-spacing: -0.02em;
| |
| }
| |
| | |
| .sajad-hero__description {
| |
| margin: 0 0 28px;
| |
| color: var(--hero-text, #3E3A36);
| |
| font-size: clamp(0.98rem, 1.1vw, 1.12rem);
| |
| line-height: 2;
| |
| max-width: 52ch;
| |
| }
| |
| | |
| .sajad-hero__button {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| background: var(--hero-btn-bg, #100E47);
| |
| color: var(--hero-btn-text, #fff);
| |
| text-decoration: none;
| |
| font-weight: 700;
| |
| padding: 14px 26px;
| |
| border-radius: 999px;
| |
| transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
| |
| box-shadow: 0 10px 24px rgba(16, 14, 71, 0.18);
| |
| }
| |
| | |
| .sajad-hero__button:hover {
| |
| transform: translateY(-2px);
| |
| opacity: 0.95;
| |
| }
| |
| | |
| .sajad-hero__media {
| |
| position: relative;
| |
| min-height: 480px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| }
| |
| | |
| .sajad-hero__img {
| |
| position: absolute;
| |
| border-radius: 18px;
| |
| overflow: hidden;
| |
| box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
| |
| background: #fff;
| |
| }
| |
| | |
| .sajad-hero__img img {
| |
| display: block;
| |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: cover;
| |
| }
| |
| | |
| .sajad-hero__img--back {
| |
| width: min(260px, 42vw);
| |
| height: 420px;
| |
| left: 8%;
| |
| top: 6%;
| |
| z-index: 1;
| |
| }
| |
| | |
| .sajad-hero__img--front {
| |
| width: min(290px, 48vw);
| |
| height: 360px;
| |
| left: 28%;
| |
| top: 18%;
| |
| z-index: 2;
| |
| }
| |
| | |
| @media (max-width: 992px) {
| |
| .sajad-hero__container {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| | |
| .sajad-hero__content {
| |
| max-width: 100%;
| |
| }
| |
| | |
| .sajad-hero__media {
| |
| min-height: 420px;
| |
| order: 2;
| |
| }
| |
| | |
| .sajad-hero__img--back {
| |
| left: 12%;
| |
| }
| |
| | |
| .sajad-hero__img--front {
| |
| left: 34%;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 768px) {
| |
| .sajad-hero {
| |
| padding: 20px 16px 28px;
| |
| }
| |
| | |
| .sajad-hero__title {
| |
| font-size: clamp(1.55rem, 6vw, 2.2rem);
| |
| }
| |
| | |
| .sajad-hero__description {
| |
| font-size: 0.98rem;
| |
| line-height: 1.9;
| |
| }
| |
| | |
| .sajad-hero__media {
| |
| min-height: 340px;
| |
| margin-top: 8px;
| |
| }
| |
| | |
| .sajad-hero__img--back {
| |
| width: 42vw;
| |
| height: 260px;
| |
| left: 2%;
| |
| top: 10%;
| |
| }
| |
| | |
| .sajad-hero__img--front {
| |
| width: 52vw;
| |
| height: 220px;
| |
| left: 34%;
| |
| top: 18%;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 480px) {
| |
| .sajad-hero__badge {
| |
| width: 100%;
| |
| text-align: center;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .sajad-hero__button {
| |
| width: 100%;
| |
| }
| |
| | |
| .sajad-hero__media {
| |
| min-height: 280px;
| |
| }
| |
| | |
| .sajad-hero__img--back {
| |
| width: 46vw;
| |
| height: 220px;
| |
| }
| |
| | |
| .sajad-hero__img--front {
| |
| width: 58vw;
| |
| height: 190px;
| |
| }
| |
| }
| |
| | |
| /* جدول چاپ بنر*/
| |
| .banner-table-section {
| |
| width: 100%;
| |
| margin: 30px auto;
| |
| direction: rtl;
| |
| font-family: iransans , sans-serif;
| |
| }
| |
| | |
| .banner-table-wrap {
| |
| width: 100%;
| |
| }
| |
| | |
| .banner-table-title {
| |
| margin: 0 0 18px;
| |
| text-align: right;
| |
| font-size: clamp(20px, 2.2vw, 32px);
| |
| font-weight: 700;
| |
| color: #333;
| |
| line-height: 1.8;
| |
| }
| |
| | |
| .banner-table-responsive {
| |
| width: 100%;
| |
| overflow-x: auto;
| |
| -webkit-overflow-scrolling: touch;
| |
| border-radius: 12px;
| |
| }
| |
| | |
| .banner-table {
| |
| width: 100%;
| |
| min-width: 760px;
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| background: #fff;
| |
| border: 1px solid #ececec;
| |
| border-radius: 12px;
| |
| overflow: hidden;
| |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
| |
| }
| |
| | |
| .banner-table caption {
| |
| caption-side: top;
| |
| text-align: right;
| |
| padding: 0 0 14px;
| |
| font-size: 15px;
| |
| color: #666;
| |
| font-weight: 500;
| |
| }
| |
| | |
| .banner-table thead th {
| |
| background: #ef2b2d;
| |
| color: #fff;
| |
| font-size: 16px;
| |
| font-weight: 700;
| |
| padding: 18px 16px;
| |
| text-align: center;
| |
| vertical-align: middle;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .banner-table thead th:first-child {
| |
| border-top-right-radius: 12px;
| |
| }
| |
| | |
| .banner-table thead th:last-child {
| |
| border-top-left-radius: 12px;
| |
| }
| |
| | |
| .banner-table tbody td {
| |
| padding: 18px 16px;
| |
| font-size: 15px;
| |
| color: #333;
| |
| text-align: center;
| |
| vertical-align: middle;
| |
| line-height: 2;
| |
| border-top: 1px solid #f1f1f1;
| |
| }
| |
| | |
| .banner-table tbody tr:nth-child(even) td {
| |
| background: #fafafa;
| |
| }
| |
| | |
| .banner-table tbody tr:hover td {
| |
| background: #fff4f4;
| |
| transition: 0.25s ease;
| |
| }
| |
| | |
| /* بهبود خوانایی ستون اول */
| |
| .banner-table tbody td:first-child {
| |
| font-weight: 700;
| |
| color: #222;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| /* اسکرول موبایل */
| |
| @media (max-width: 768px) {
| |
| .banner-table-title {
| |
| font-size: 20px;
| |
| }
| |
| | |
| .banner-table {
| |
| min-width: 680px;
| |
| }
| |
| | |
| .banner-table thead th,
| |
| .banner-table tbody td {
| |
| padding: 14px 12px;
| |
| font-size: 14px;
| |
| }
| |
| }
| |
| | |
| | |
| /* الگو:کانتینر متن عکس دکمه */
| |
| /* Nemati Printing Styles - Updated */
| |
| .nemati-wrapper {
| |
| background: #fff;
| |
| border-radius: 40px;
| |
| box-shadow: 0 4px 20px rgba(0,0,0,0.08);
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| align-items: center;
| |
| padding: 30px;
| |
| gap: 25px;
| |
| border: 1px solid #e0e0e0;
| |
| margin: 20px 0;
| |
| font-family: 'IRANSans', sans-serif; /* مطمئن شوید این فونت در محیط ویکی شما موجود است */
| |
| }
| |
| | |
| .nemati-image {
| |
| flex: 1 1 300px; /* تنظیم انعطافپذیری برای جایگزینی */
| |
| text-align: center;
| |
| order: 2; /* تصویر در سمت راست قرار میگیرد */
| |
| }
| |
| .nemati-image img { max-width: 100%; border-radius: 20px; }
| |
| | |
| .nemati-text {
| |
| flex: 2 1 400px; /* تنظیم انعطافپذیری */
| |
| text-align: justify;
| |
| order: 1; /* متن در سمت چپ قرار میگیرد */
| |
| }
| |
| /* تغییر اندازه فونت اینجا اعمال شده است */
| |
| .nemati-text h2 { color: #333; margin-top: 0; font-size: 1.3em; } /* 2 درجه کوچکتر از 1.5em */
| |
| .nemati-text p { color: #444; line-height: 1.8; margin-bottom: 20px; font-size: 0.9em; } /* 2 درجه کوچکتر از 1.1em */
| |
| | |
| .nemati-btns {
| |
| display: flex;
| |
| gap: 10px;
| |
| flex-wrap: wrap;
| |
| justify-content: flex-end; /* دکمهها به سمت راست منتقل شدند */
| |
| }
| |
| .nemati-btn {
| |
| padding: 10px 20px;
| |
| border: 1px solid #ccc;
| |
| border-radius: 12px;
| |
| text-decoration: none !important;
| |
| color: #333;
| |
| font-weight: bold;
| |
| display: flex;
| |
| align-items: center;
| |
| transition: 0.3s;
| |
| font-size: 0.85em; /* کمی کوچکتر برای هماهنگی */
| |
| }
| |
| .nemati-btn:hover { background: #f0f0f0; }
| |
| | |
| @media (max-width: 768px) {
| |
| .nemati-wrapper { flex-direction: column; text-align: center; }
| |
| .nemati-text { text-align: center; }
| |
| .nemati-btns { justify-content: center; } /* در موبایل دکمهها وسط چین شوند */
| |
| .nemati-image { order: 1; } /* در موبایل تصویر اول نمایش داده شود */
| |
| .nemati-text { order: 2; } /* در موبایل متن بعد از تصویر نمایش داده شود */
| |
| }
| |
| | |
| | |
| /* سایه منحنی */
| |
| /* Container styling for Wiki pages */
| |
| .nikan-box {
| |
| position: relative;
| |
| background: #ffffff;
| |
| border: 1px solid #dcdcdc;
| |
| border-top: 4px solid #8b0000; /* خط قرمز تیره بالا */
| |
| padding: 25px;
| |
| margin: 30px 0;
| |
| box-sizing: border-box;
| |
| /* این خاصیت برای دیده شدن سایه پشت کادر ضروری است */
| |
| z-index: 1;
| |
| }
| |
| | |
| /* افکت سایه برای القای حس قوس پایین کادر */
| |
| .nikan-box::before,
| |
| .nikan-box::after {
| |
| content: "";
| |
| position: absolute;
| |
| bottom: -15px;
| |
| width: 44%;
| |
| height: 35px;
| |
| background: transparent;
| |
| box-shadow: 0 15px 20px rgba(0, 0, 0, 0.25);
| |
| border-radius: 50%;
| |
| z-index: -1;
| |
| pointer-events: none; /* تا مزاحم کلیک روی محتوا نشود */
| |
| }
| |
| | |
| /* قوس سمت چپ */
| |
| .nikan-box::before {
| |
| left: 10px;
| |
| transform: rotate(-3deg);
| |
| }
| |
| | |
| /* قوس سمت راست */
| |
| .nikan-box::after {
| |
| right: 10px;
| |
| transform: rotate(3deg);
| |
| }
| |
| | |
| /* برای اطمینان از اینکه در موبایل هم به هم نریزد */
| |
| @media (max-width: 600px) {
| |
| .nikan-box::before, .nikan-box::after {
| |
| display: none; /* در موبایل برای سادگی سایه را حذف میکنیم */
| |
| }
| |
| }
| |
| | |
| | |
| | |
| | |
| .security-door-card {
| |
| max-width: 1200px;
| |
| margin: 2rem auto;
| |
| background: #fff;
| |
| border-radius: 14px;
| |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
| |
| overflow: hidden;
| |
| }
| |
| | |
| .security-door-card__image {
| |
| display: block;
| |
| width: 100%;
| |
| height: auto;
| |
| aspect-ratio: 1200 / 675;
| |
| object-fit: cover;
| |
| }
| |
| | |
| .security-door-card__content {
| |
| padding: clamp(16px, 2.5vw, 24px);
| |
| }
| |
| | |
| .security-door-card__title {
| |
| margin: 0 0 12px;
| |
| font-size: clamp(1.5rem, 3vw, 2rem);
| |
| font-weight: 700;
| |
| line-height: 1.4;
| |
| color: #222;
| |
| }
| |
| | |
| .security-door-card__text {
| |
| margin: 0 0 16px;
| |
| font-size: clamp(1rem, 2vw, 1.0625rem);
| |
| line-height: 1.9;
| |
| color: #444;
| |
| }
| |
| | |
| .security-door-card__link {
| |
| display: inline-block;
| |
| padding: 10px 18px;
| |
| border-radius: 10px;
| |
| background: #111;
| |
| color: #fff;
| |
| text-decoration: none;
| |
| font-weight: 600;
| |
| }
| |
| | |
| .security-door-card__link:hover,
| |
| .security-door-card__link:focus {
| |
| background: #333;
| |
| }
| |
| | |
| @media (max-width: 480px) {
| |
| .security-door-card {
| |
| margin: 1rem auto;
| |
| border-radius: 12px;
| |
| }
| |
| }
| |
| | |
| | |
| /*باکس های کافی نت*/
| |
| .services-section{
| |
| | |
| max-width:1400px;
| |
| margin:auto;
| |
| padding:40px 20px;
| |
| | |
| }
| |
| | |
| .services-section h2{
| |
| | |
| text-align:center;
| |
| margin-bottom:35px;
| |
| font-size:32px;
| |
| font-weight:700;
| |
| color:#222;
| |
| | |
| }
| |
| | |
| .service-grid{
| |
| | |
| display:grid;
| |
| | |
| grid-template-columns:repeat(4,1fr);
| |
| | |
| gap:22px;
| |
| | |
| }
| |
| | |
| .service-box{
| |
| | |
| background:#fff;
| |
| | |
| border-radius:18px;
| |
| | |
| min-height:180px;
| |
| | |
| display:flex;
| |
| | |
| flex-direction:column;
| |
| | |
| justify-content:center;
| |
| | |
| align-items:center;
| |
| | |
| text-decoration:none;
| |
| | |
| transition:.35s;
| |
| | |
| box-shadow:0 5px 20px rgba(0,0,0,.08);
| |
| | |
| border:1px solid #ececec;
| |
| | |
| padding:20px;
| |
| | |
| }
| |
| | |
| .service-box:hover{
| |
| | |
| transform:translateY(-8px);
| |
| | |
| box-shadow:0 15px 35px rgba(0,0,0,.15);
| |
| | |
| }
| |
| | |
| .service-box i{
| |
| | |
| font-size:60px;
| |
| | |
| color:#00b894;
| |
| | |
| margin-bottom:22px;
| |
| | |
| }
| |
| | |
| .service-box span{
| |
| | |
| font-size:20px;
| |
| | |
| font-weight:600;
| |
| | |
| color:#333;
| |
| | |
| text-align:center;
| |
| | |
| line-height:1.8;
| |
| | |
| }
| |
| | |
| /* Tablet */
| |
| | |
| @media(max-width:991px){
| |
| | |
| .service-grid{
| |
| | |
| grid-template-columns:repeat(2,1fr);
| |
| | |
| }
| |
| | |
| .service-box{
| |
| | |
| min-height:165px;
| |
| | |
| }
| |
| | |
| .service-box i{
| |
| | |
| font-size:50px;
| |
| | |
| }
| |
| | |
| }
| |
| | |
| /* Mobile */
| |
| | |
| @media(max-width:576px){
| |
| | |
| .service-grid{
| |
| | |
| grid-template-columns:1fr;
| |
| | |
| }
| |
| | |
| .services-section{
| |
| | |
| padding:20px 15px;
| |
| | |
| }
| |
| | |
| .service-box{
| |
| | |
| min-height:150px;
| |
| | |
| }
| |
| | |
| .service-box i{
| |
| | |
| font-size:42px;
| |
| | |
| }
| |
| | |
| .service-box span{
| |
| | |
| font-size:18px;
| |
| | |
| }
| |
| | |
| }
| |
| | |
| | |
| /*کانتینر متن و کارت*/
| |
| | |
| .stats-section { padding: 40px 20px; background: #ffffff; font-family: IRANsans,sans-serif; }
| |
| .container { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
| |
| | |
| .text-side { flex: 1; min-width: 300px; }
| |
| .text-side h2 { color: #00b894; margin-bottom: 15px; }
| |
| | |
| .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; flex: 1; }
| |
| | |
| .stat-card {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 15px;
| |
| background: #f8f9fa;
| |
| padding: 15px 20px; /* ارتفاع کمتر */
| |
| border-radius: 10px;
| |
| border: 1px solid #eee;
| |
| }
| |
| | |
| .icon { font-size: 24px; color: #00b894; }
| |
| | |
| .stat-info { display: flex; flex-direction: column; }
| |
| .number { font-size: 1.4rem; font-weight: bold; color: #333; line-height: 1; }
| |
| .stat-info p { font-size: 0.85rem; color: #666; margin: 0; }
| |
| | |
| /* ریسپانسیو */
| |
| @media (max-width: 768px) {
| |
| .container { flex-direction: column; }
| |
| .stats-grid { width: 100%; }
| |
| }
| |
| | |
| .services-list li i {
| |
| color: #00b894;
| |
| }
| |
| | |
| /* منو */
| |
| /* اصلاح تداخل با مدیاویکی */
| |
| .poly-nav ul {
| |
| list-style: none !important;
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| display: flex !important; /* اجبار به افقی شدن */
| |
| flex-direction: row !important; /* جهت افقی */
| |
| justify-content: flex-start !important;
| |
| background-color: #ffffff;
| |
| }
| |
| | |
| .poly-nav li {
| |
| display: block !important;
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| }
| |
| | |
| /* ظاهر نوار بالای صفحه */
| |
| .poly-menu-container {
| |
| width: 100%;
| |
| position: sticky; /* برای اینکه در بالای صفحه بماند */
| |
| top: 0;
| |
| z-index: 999;
| |
| }
| |
| | |
| .poly-nav {
| |
| border-bottom: 3px solid #2e7d32;
| |
| background: #fff;
| |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1);
| |
| }
| |
| | |
| .poly-nav a {
| |
| display: block;
| |
| padding: 15px 20px;
| |
| text-decoration: none;
| |
| color: #0277bd;
| |
| font-weight: bold;
| |
| white-space: nowrap; /* جلوگیری از شکستن کلمات در منو */
| |
| }
| |
| | |
| /* ریست کردن استایلهای li که ممکن است از پوسته گرفته شود */
| |
| .poly-nav li::before {
| |
| content: none !important; /* حذف بولتهای پیشفرض ویکی */
| |
| }
| |
| /* تنظیمات پایه برای منوی اصلی */
| |
| .poly-nav ul {
| |
| list-style: none !important;
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| display: flex !important;
| |
| flex-direction: row !important;
| |
| background-color: #ffffff;
| |
| }
| |
| | |
| .poly-nav li {
| |
| position: relative; /* بسیار مهم برای موقعیت قرارگیری منوی کشویی */
| |
| }
| |
| | |
| .poly-nav a {
| |
| display: block;
| |
| padding: 15px 20px;
| |
| text-decoration: none;
| |
| color: #0277bd;
| |
| font-weight: bold;
| |
| transition: all 0.3s ease;
| |
| }
| |
| | |
| /* استایل منوی کشویی (Dropdown) */
| |
| .dropdown-content {
| |
| display: none; /* در حالت عادی مخفی باشد */
| |
| position: absolute;
| |
| background-color: #ffffff;
| |
| min-width: 180
| |
| box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
| |
| z-index: 1000;
| |
| border-top: 3px solid #ff8f00; /* رنگ مکمل برای زیبایی */
| |
| border-radius: 0 0 8px 8px;
| |
| }
| |
| | |
| /* استایل لینکهای داخل منوی کشویی */
| |
| .dropdown-content a {
| |
| color: #333 !important;
| |
| padding: 12px 16px !important;
| |
| font-size: 0.9rem !important;
| |
| border-bottom: 1px solid #eee;
| |
| }
| |
| | |
| .dropdown-content a:last-child {
| |
| border-bottom: none;
| |
| }
| |
| | |
| /* حالت Hover برای باز شدن منو */
| |
| .dropdown:hover .dropdown-content {
| |
| display: block;
| |
| }
| |
| | |
| /* تغییر رنگ در هنگام هاور لینکهای داخلی */
| |
| .dropdown-content a:hover {
| |
| background-color: #f1f8ff !important;
| |
| color: #0277bd !important;
| |
| }
| |
| | |
| /* ریسپانسیو: در موبایل منوی کشویی به صورت ستونی زیر هم باز شود */
| |
| @media (max-width: 768px) {
| |
| .poly-nav ul {
| |
| flex-direction: column !important;
| |
| }
| |
| .dropdown-content {
| |
| position: static; /* در موبایل، منو زیر هم باز شود نه روی صفحه */
| |
| width: 100%;
| |
| box-shadow: none;
| |
| background-color: #f9f9f9;
| |
| }
| |
| .dropdown:hover .dropdown-content {
| |
| display: block;
| |
| }
| |
| }
| |
| | |
| /* مخفی کردن کامل منو در موبایل */
| |
| @media (max-width: 768px) {
| |
| .poly-menu-container,
| |
| .poly-nav,
| |
| .poly-nav ul,
| |
| .poly-nav li,
| |
| .poly-nav a {
| |
| display: none !important;
| |
| }
| |
| }
| |
| | |
| | |
| | |
| | |
| /* کانتینر 3ردیف در 2 ستون کادر شامل متن و عکس */
| |
| | |
| /*==============================================================
| |
| DPX PROFESSIONAL CARD GRID
| |
| Production Version 1.0
| |
| Optimized for MediaWiki
| |
| ==============================================================*/
| |
| | |
| | |
| /*==============================================================
| |
| THEME
| |
| ==============================================================*/
| |
| | |
| :root{
| |
| | |
| --dpx-primary:#0f5fa8;
| |
| --dpx-primary-hover:#0c4f8d;
| |
| | |
| --dpx-secondary:#00b894;
| |
| --dpx-secondary-hover:#009a7d;
| |
| | |
| --dpx-accent:#38bdf8;
| |
| | |
| --dpx-title:#183153;
| |
| --dpx-text:#5f6f7c;
| |
| | |
| --dpx-bg:#f7fafc;
| |
| --dpx-card:#ffffff;
| |
| | |
| --dpx-border:#d9e7ef;
| |
| | |
| --dpx-radius:24px;
| |
| | |
| --dpx-speed:.35s;
| |
| | |
| --dpx-shadow:
| |
| | |
| 0 10px 30px rgba(0,0,0,.06),
| |
| | |
| 0 2px 10px rgba(15,95,168,.05);
| |
| | |
| --dpx-shadow-hover:
| |
| | |
| 0 20px 50px rgba(15,95,168,.16),
| |
| | |
| 0 8px 24px rgba(0,0,0,.08);
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| RESET
| |
| ==============================================================*/
| |
| | |
| .dpx-section,
| |
| .dpx-section *,
| |
| .dpx-section *::before,
| |
| .dpx-section *::after{
| |
| | |
| box-sizing:border-box;
| |
| | |
| }
| |
| | |
| .dpx-section img{
| |
| | |
| display:block;
| |
| | |
| max-width:100%;
| |
| | |
| border:0;
| |
| | |
| }
| |
| | |
| .dpx-section a{
| |
| | |
| text-decoration:none;
| |
| | |
| }
| |
| | |
| .dpx-section{
| |
| | |
| direction:rtl;
| |
| | |
| width:100%;
| |
| | |
| max-width:1320px;
| |
| | |
| margin:60px auto;
| |
| | |
| padding:0 18px;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| GRID
| |
| ==============================================================*/
| |
| | |
| .dpx-grid{
| |
| | |
| display:grid;
| |
| | |
| grid-template-columns:repeat(2,minmax(0,1fr));
| |
| | |
| gap:34px;
| |
| | |
| align-items:stretch;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| CARD
| |
| ==============================================================*/
| |
| | |
| .dpx-card{
| |
| | |
| position:relative;
| |
| | |
| display:flex;
| |
| | |
| justify-content:space-between;
| |
| | |
| align-items:stretch;
| |
| | |
| overflow:hidden;
| |
| | |
| background:linear-gradient(
| |
| 180deg,
| |
| #ffffff,
| |
| #fbfdff
| |
| );
| |
| | |
| border:1px solid var(--dpx-border);
| |
| | |
| border-radius:var(--dpx-radius);
| |
| | |
| box-shadow:var(--dpx-shadow);
| |
| | |
| transition:
| |
| transform var(--dpx-speed),
| |
| box-shadow var(--dpx-speed),
| |
| border-color var(--dpx-speed);
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| LEFT GLOW
| |
| ==============================================================*/
| |
| | |
| .dpx-card::before{
| |
| | |
| content:"";
| |
| | |
| position:absolute;
| |
| | |
| inset:auto auto -120px -120px;
| |
| | |
| width:240px;
| |
| | |
| height:240px;
| |
| | |
| border-radius:50%;
| |
| | |
| background:
| |
| | |
| radial-gradient(
| |
| | |
| rgba(56,189,248,.14),
| |
| | |
| transparent 70%
| |
| | |
| );
| |
| | |
| pointer-events:none;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| RIGHT ACCENT
| |
| ==============================================================*/
| |
| | |
| .dpx-card::after{
| |
| | |
| content:"";
| |
| | |
| position:absolute;
| |
| | |
| top:0;
| |
| | |
| right:0;
| |
| | |
| width:8px;
| |
| | |
| height:100%;
| |
| | |
| background:
| |
| | |
| linear-gradient(
| |
| | |
| 180deg,
| |
| | |
| var(--dpx-primary),
| |
| | |
| var(--dpx-secondary)
| |
| | |
| );
| |
| | |
| transition:width .35s ease;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| HOVER
| |
| ==============================================================*/
| |
| | |
| .dpx-card:hover{
| |
| | |
| transform:translateY(-8px);
| |
| | |
| border-color:#b8ddee;
| |
| | |
| box-shadow:var(--dpx-shadow-hover);
| |
| | |
| }
| |
| | |
| .dpx-card:hover::after{
| |
| | |
| width:12px;
| |
| | |
| }
| |
| /*==============================================================
| |
| IMAGE MODULE
| |
| ==============================================================*/
| |
| | |
| .dpx-image{
| |
| | |
| position:relative;
| |
| | |
| flex:0 0 42%;
| |
| | |
| max-width:42%;
| |
| | |
| overflow:hidden;
| |
| | |
| background:#edf6fb;
| |
| | |
| isolation:isolate;
| |
| | |
| }
| |
| | |
| .dpx-image a{
| |
| | |
| display:block;
| |
| | |
| width:100%;
| |
| | |
| height:100%;
| |
| | |
| }
| |
| | |
| .dpx-image img{
| |
| | |
| width:100%;
| |
| | |
| height:100%;
| |
| | |
| min-height:290px;
| |
| | |
| object-fit:cover;
| |
| | |
| object-position:center;
| |
| | |
| transform:scale(1);
| |
| | |
| transition:
| |
| | |
| transform .65s ease,
| |
| | |
| filter .45s ease;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| IMAGE OVERLAY
| |
| ==============================================================*/
| |
| | |
| .dpx-image::before{
| |
| | |
| content:"";
| |
| | |
| position:absolute;
| |
| | |
| inset:0;
| |
| | |
| background:
| |
| | |
| linear-gradient(
| |
| | |
| 90deg,
| |
| | |
| rgba(15,95,168,.06),
| |
| | |
| rgba(0,184,148,.14)
| |
| | |
| );
| |
| | |
| z-index:1;
| |
| | |
| transition:opacity .35s ease;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| SHINE EFFECT
| |
| ==============================================================*/
| |
| | |
| .dpx-image::after{
| |
| | |
| content:"";
| |
| | |
| position:absolute;
| |
| | |
| top:-35%;
| |
| | |
| left:-150%;
| |
| | |
| width:55%;
| |
| | |
| height:180%;
| |
| | |
| background:
| |
| | |
| linear-gradient(
| |
| | |
| 90deg,
| |
| | |
| transparent,
| |
| | |
| rgba(255,255,255,.40),
| |
| | |
| transparent
| |
| | |
| );
| |
| | |
| transform:rotate(18deg);
| |
| | |
| transition:left .9s ease;
| |
| | |
| z-index:2;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| IMAGE HOVER
| |
| ==============================================================*/
| |
| | |
| .dpx-card:hover .dpx-image img{
| |
| | |
| transform:scale(1.08);
| |
| | |
| filter:
| |
| | |
| saturate(110%)
| |
| | |
| contrast(104%)
| |
| | |
| brightness(102%);
| |
| | |
| }
| |
| | |
| .dpx-card:hover .dpx-image::after{
| |
| | |
| left:170%;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| IMAGE RADIUS
| |
| ==============================================================*/
| |
| | |
| .dpx-image{
| |
| | |
| border-radius:0 24px 24px 0;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| IMAGE LOADING
| |
| ==============================================================*/
| |
| | |
| .dpx-image img{
| |
| | |
| background:#eef5fa;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| IMAGE PERFORMANCE
| |
| ==============================================================*/
| |
| | |
| .dpx-image,
| |
| .dpx-image img{
| |
| | |
| backface-visibility:hidden;
| |
| | |
| transform:translateZ(0);
| |
| | |
| will-change:transform;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| OPTIONAL IMAGE BADGE
| |
| ==============================================================*/
| |
| | |
| .dpx-badge{
| |
| | |
| position:absolute;
| |
| | |
| top:18px;
| |
| | |
| right:18px;
| |
| | |
| z-index:3;
| |
| | |
| display:inline-flex;
| |
| | |
| align-items:center;
| |
| | |
| justify-content:center;
| |
| | |
| padding:7px 14px;
| |
| | |
| border-radius:30px;
| |
| | |
| background:rgba(255,255,255,.94);
| |
| | |
| color:var(--dpx-primary);
| |
| | |
| font-size:.78rem;
| |
| | |
| font-weight:700;
| |
| | |
| box-shadow:
| |
| | |
| 0 6px 18px rgba(0,0,0,.08);
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| OPTIONAL IMAGE GRADIENT
| |
| ==============================================================*/
| |
| | |
| .dpx-gradient{
| |
| | |
| position:absolute;
| |
| | |
| inset:auto 0 0 0;
| |
| | |
| height:90px;
| |
| | |
| background:
| |
| | |
| linear-gradient(
| |
| | |
| transparent,
| |
| | |
| rgba(0,0,0,.18)
| |
| | |
| );
| |
| | |
| z-index:2;
| |
| | |
| pointer-events:none;
| |
| | |
| }
| |
| | |
| /*==============================================================
| |
| CONTENT MODULE
| |
| ==============================================================*/
| |
| | |
| .dpx-content{
| |
| | |
| flex:1;
| |
| | |
| display:flex;
| |
| | |
| flex-direction:column;
| |
| | |
| justify-content:center;
| |
| | |
| align-items:flex-start;
| |
| | |
| padding:34px 32px;
| |
| | |
| position:relative;
| |
| | |
| z-index:3;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| CATEGORY
| |
| ==============================================================*/
| |
| | |
| .dpx-category{
| |
| | |
| display:inline-flex;
| |
| | |
| align-items:center;
| |
| | |
| justify-content:center;
| |
| | |
| margin-bottom:16px;
| |
| | |
| padding:7px 16px;
| |
| | |
| border-radius:40px;
| |
| | |
| background:rgba(0,184,148,.10);
| |
| | |
| color:var(--dpx-secondary);
| |
| | |
| font-size:.80rem;
| |
| | |
| font-weight:700;
| |
| | |
| line-height:1;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| TITLE
| |
| ==============================================================*/
| |
| | |
| .dpx-title{
| |
| | |
| margin:0 0 14px;
| |
| | |
| color:var(--dpx-title);
| |
| | |
| font-size:1.45rem;
| |
| | |
| font-weight:800;
| |
| | |
| line-height:1.6;
| |
| | |
| letter-spacing:-.2px;
| |
| | |
| }
| |
| | |
| .dpx-title a{
| |
| | |
| color:inherit;
| |
| | |
| text-decoration:none;
| |
| | |
| transition:color .30s ease;
| |
| | |
| }
| |
| | |
| .dpx-card:hover .dpx-title{
| |
| | |
| color:var(--dpx-primary);
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| TITLE BAR
| |
| ==============================================================*/
| |
| | |
| .dpx-title::after{
| |
| | |
| content:"";
| |
| | |
| display:block;
| |
| | |
| width:54px;
| |
| | |
| height:4px;
| |
| | |
| margin-top:12px;
| |
| | |
| border-radius:20px;
| |
| | |
| background:
| |
| | |
| linear-gradient(
| |
| | |
| 90deg,
| |
| | |
| var(--dpx-primary),
| |
| | |
| var(--dpx-secondary)
| |
| | |
| );
| |
| | |
| transition:width .35s ease;
| |
| | |
| }
| |
| | |
| .dpx-card:hover .dpx-title::after{
| |
| | |
| width:88px;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| DESCRIPTION
| |
| ==============================================================*/
| |
| | |
| .dpx-desc{
| |
| | |
| margin:0;
| |
| | |
| color:var(--dpx-text);
| |
| | |
| font-size:1rem;
| |
| | |
| line-height:2;
| |
| | |
| text-align:justify;
| |
| | |
| display:-webkit-box;
| |
| | |
| -webkit-box-orient:vertical;
| |
| | |
| -webkit-line-clamp:2;
| |
| | |
| overflow:hidden;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| SPACER
| |
| ==============================================================*/
| |
| | |
| .dpx-spacer{
| |
| | |
| flex:1;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| FOOTER
| |
| ==============================================================*/
| |
| | |
| .dpx-footer{
| |
| | |
| width:100%;
| |
| | |
| margin-top:24px;
| |
| | |
| display:flex;
| |
| | |
| justify-content:space-between;
| |
| | |
| align-items:center;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| META
| |
| ==============================================================*/
| |
| | |
| .dpx-meta{
| |
| | |
| color:#8a98a6;
| |
| | |
| font-size:.85rem;
| |
| | |
| font-weight:600;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| BUTTON
| |
| ==============================================================*/
| |
| | |
| .dpx-more{
| |
| | |
| display:inline-flex;
| |
| | |
| align-items:center;
| |
| | |
| gap:10px;
| |
| | |
| padding:12px 22px;
| |
| | |
| border-radius:60px;
| |
| | |
| background:
| |
| | |
| linear-gradient(
| |
| | |
| 135deg,
| |
| | |
| var(--dpx-primary),
| |
| | |
| var(--dpx-secondary)
| |
| | |
| );
| |
| | |
| color:#ffffff;
| |
| | |
| font-size:.92rem;
| |
| | |
| font-weight:700;
| |
| | |
| text-decoration:none;
| |
| | |
| transition:
| |
| | |
| transform .30s ease,
| |
| | |
| box-shadow .30s ease;
| |
| | |
| box-shadow:
| |
| | |
| 0 8px 20px rgba(15,95,168,.18);
| |
| | |
| }
| |
| | |
| .dpx-more:hover{
| |
| | |
| transform:translateX(-5px);
| |
| | |
| box-shadow:
| |
| | |
| 0 14px 28px rgba(15,95,168,.26);
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| BUTTON ICON
| |
| ==============================================================*/
| |
| | |
| .dpx-more svg{
| |
| | |
| width:18px;
| |
| | |
| height:18px;
| |
| | |
| flex-shrink:0;
| |
| | |
| transition:transform .30s ease;
| |
| | |
| }
| |
| | |
| .dpx-more:hover svg{
| |
| | |
| transform:translateX(-5px);
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| FOCUS
| |
| ==============================================================*/
| |
| | |
| .dpx-more:focus-visible{
| |
| | |
| outline:3px solid rgba(56,189,248,.35);
| |
| | |
| outline-offset:3px;
| |
| | |
| }
| |
| | |
| /*==============================================================
| |
| PREMIUM EFFECTS
| |
| ==============================================================*/
| |
| | |
| /* Glass Light */
| |
| .dpx-card::before{
| |
| | |
| content:"";
| |
| | |
| position:absolute;
| |
| | |
| left:-140px;
| |
| | |
| bottom:-140px;
| |
| | |
| width:260px;
| |
| | |
| height:260px;
| |
| | |
| border-radius:50%;
| |
| | |
| background:
| |
| radial-gradient(
| |
| circle,
| |
| rgba(56,189,248,.16) 0%,
| |
| rgba(56,189,248,.05) 45%,
| |
| transparent 72%
| |
| );
| |
| | |
| pointer-events:none;
| |
| | |
| transition:
| |
| transform .55s ease,
| |
| opacity .35s ease;
| |
| | |
| opacity:.9;
| |
| | |
| }
| |
| | |
| .dpx-card:hover::before{
| |
| | |
| transform:scale(1.18);
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| Premium Border
| |
| ==============================================================*/
| |
| | |
| .dpx-card{
| |
| | |
| position:relative;
| |
| | |
| }
| |
| | |
| .dpx-card:hover{
| |
| | |
| border-color:rgba(0,184,148,.35);
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| Image Animation
| |
| ==============================================================*/
| |
| | |
| .dpx-card:hover .dpx-image img{
| |
| | |
| transform:scale(1.07);
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| Content Animation
| |
| ==============================================================*/
| |
| | |
| .dpx-title,
| |
| .dpx-desc,
| |
| .dpx-category{
| |
| | |
| transition:
| |
| transform .35s ease,
| |
| color .35s ease;
| |
| | |
| }
| |
| | |
| .dpx-card:hover .dpx-category{
| |
| | |
| transform:translateY(-2px);
| |
| | |
| }
| |
| | |
| .dpx-card:hover .dpx-title{
| |
| | |
| transform:translateY(-3px);
| |
| | |
| }
| |
| | |
| .dpx-card:hover .dpx-desc{
| |
| | |
| transform:translateY(-2px);
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| Button Shine
| |
| ==============================================================*/
| |
| | |
| .dpx-more{
| |
| | |
| position:relative;
| |
| | |
| overflow:hidden;
| |
| | |
| }
| |
| | |
| .dpx-more::before{
| |
| | |
| content:"";
| |
| | |
| position:absolute;
| |
| | |
| top:0;
| |
| | |
| left:-150%;
| |
| | |
| width:60%;
| |
| | |
| height:100%;
| |
| | |
| background:
| |
| linear-gradient(
| |
| 90deg,
| |
| transparent,
| |
| rgba(255,255,255,.45),
| |
| transparent
| |
| );
| |
| | |
| transform:skewX(-20deg);
| |
| | |
| transition:left .7s ease;
| |
| | |
| }
| |
| | |
| .dpx-more:hover::before{
| |
| | |
| left:170%;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| Soft Card Lift
| |
| ==============================================================*/
| |
| | |
| .dpx-card{
| |
| | |
| transform-origin:center;
| |
| | |
| }
| |
| | |
| .dpx-card:hover{
| |
| | |
| transform:
| |
| translateY(-8px)
| |
| scale(1.015);
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| Shadow Layers
| |
| ==============================================================*/
| |
| | |
| .dpx-card{
| |
| | |
| box-shadow:
| |
| | |
| 0 10px 20px rgba(15,95,168,.05),
| |
| | |
| 0 18px 40px rgba(0,0,0,.05);
| |
| | |
| }
| |
| | |
| .dpx-card:hover{
| |
| | |
| box-shadow:
| |
| | |
| 0 16px 34px rgba(15,95,168,.10),
| |
| | |
| 0 30px 70px rgba(0,0,0,.10);
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| Fade Animation
| |
| ==============================================================*/
| |
| | |
| @keyframes dpxFade{
| |
| | |
| from{
| |
| | |
| opacity:0;
| |
| | |
| transform:
| |
| translateY(24px);
| |
| | |
| }
| |
| | |
| to{
| |
| | |
| opacity:1;
| |
| | |
| transform:
| |
| translateY(0);
| |
| | |
| }
| |
| | |
| }
| |
| | |
| .dpx-card{
| |
| | |
| animation:
| |
| dpxFade .65s ease both;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| Accessibility
| |
| ==============================================================*/
| |
| | |
| .dpx-card:focus-within{
| |
| | |
| box-shadow:
| |
| | |
| 0 0 0 4px rgba(56,189,248,.18),
| |
| | |
| 0 18px 45px rgba(15,95,168,.14);
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| Better Typography
| |
| ==============================================================*/
| |
| | |
| .dpx-title,
| |
| .dpx-desc{
| |
| | |
| text-rendering:optimizeLegibility;
| |
| | |
| -webkit-font-smoothing:antialiased;
| |
| | |
| }
| |
| | |
| | |
| /*==============================================================
| |
| Better Selection
| |
| ==============================================================*/
| |
| | |
| .dpx-card *::selection{
| |
| | |
| background:#d9f7ef;
| |
| | |
| color:#183153;
| |
| | |
| }
| |
| | |
| /*==============================================================
| |
| DPX PRODUCTION FINAL
| |
| Responsive + Performance + Accessibility
| |
| ==============================================================*/
| |
| | |
| | |
| /*==============================
| |
| Desktop
| |
| ==============================*/
| |
| | |
| @media (max-width:1200px){
| |
| | |
| .dpx-grid{
| |
| | |
| gap:28px;
| |
| | |
| }
| |
| | |
| .dpx-content{
| |
| | |
| padding:28px;
| |
| | |
| }
| |
| | |
| .dpx-title{
| |
| | |
| font-size:1.32rem;
| |
| | |
| }
| |
| | |
| }
| |
| | |
| | |
| /*==============================
| |
| Tablet
| |
| ==============================*/
| |
| | |
| @media (max-width:992px){
| |
| | |
| .dpx-grid{
| |
| | |
| grid-template-columns:1fr;
| |
| | |
| }
| |
| | |
| }
| |
| | |
| | |
| /*==============================
| |
| Mobile
| |
| ==============================*/
| |
| | |
| @media (max-width:768px){
| |
| | |
| .dpx-section{
| |
| | |
| padding:0 14px;
| |
| | |
| margin:36px auto;
| |
| | |
| }
| |
| | |
| .dpx-card{
| |
| | |
| flex-direction:column;
| |
| | |
| }
| |
| | |
| .dpx-image{
| |
| | |
| flex:none;
| |
| | |
| max-width:100%;
| |
| | |
| width:100%;
| |
| | |
| min-height:240px;
| |
| | |
| border-radius:24px 24px 0 0;
| |
| | |
| }
| |
| | |
| .dpx-image img{
| |
| | |
| min-height:240px;
| |
| | |
| }
| |
| | |
| .dpx-content{
| |
| | |
| width:100%;
| |
| | |
| padding:24px 20px;
| |
| | |
| }
| |
| | |
| .dpx-title{
| |
| | |
| font-size:1.20rem;
| |
| | |
| }
| |
| | |
| .dpx-desc{
| |
| | |
| -webkit-line-clamp:3;
| |
| | |
| }
| |
| | |
| .dpx-footer{
| |
| | |
| flex-wrap:wrap;
| |
| | |
| gap:14px;
| |
| | |
| }
| |
| | |
| }
| |
| | |
| | |
| /*==============================
| |
| Small Mobile
| |
| ==============================*/
| |
| | |
| @media (max-width:480px){
| |
| | |
| .dpx-grid{
| |
| | |
| gap:18px;
| |
| | |
| }
| |
| | |
| .dpx-image{
| |
| | |
| min-height:200px;
| |
| | |
| }
| |
| | |
| .dpx-image img{
| |
| | |
| min-height:200px;
| |
| | |
| }
| |
| | |
| .dpx-content{
| |
| | |
| padding:18px;
| |
| | |
| }
| |
| | |
| .dpx-title{
| |
| | |
| font-size:1.05rem;
| |
| | |
| }
| |
| | |
| .dpx-desc{
| |
| | |
| font-size:.92rem;
| |
| | |
| line-height:1.9;
| |
| | |
| }
| |
| | |
| .dpx-more{
| |
| | |
| width:100%;
| |
| | |
| justify-content:center;
| |
| | |
| }
| |
| | |
| }
| |
| | |
| | |
| /*==============================
| |
| Images
| |
| ==============================*/
| |
| | |
| .dpx-image img{
| |
| | |
| display:block;
| |
| | |
| width:100%;
| |
| | |
| height:100%;
| |
| | |
| object-fit:cover;
| |
| | |
| }
| |
| | |
| | |
| /*==============================
| |
| Links
| |
| ==============================*/
| |
| | |
| .dpx-card a{
| |
| | |
| -webkit-tap-highlight-color:transparent;
| |
| | |
| }
| |
| | |
| | |
| /*==============================
| |
| Keyboard
| |
| ==============================*/
| |
| | |
| .dpx-card a:focus-visible{
| |
| | |
| outline:3px solid rgba(56,189,248,.35);
| |
| | |
| outline-offset:3px;
| |
| | |
| border-radius:8px;
| |
| | |
| }
| |
| | |
| | |
| /*==============================
| |
| Reduced Motion
| |
| ==============================*/
| |
| | |
| @media (prefers-reduced-motion:reduce){
| |
| | |
| .dpx-card,
| |
| .dpx-card *,
| |
| .dpx-image img,
| |
| .dpx-more{
| |
| | |
| animation:none !important;
| |
| | |
| transition:none !important;
| |
| | |
| }
| |
| | |
| }
| |
| | |
| | |
| /*==============================
| |
| Print
| |
| ==============================*/
| |
| | |
| @media print{
| |
| | |
| .dpx-card{
| |
| | |
| break-inside:avoid;
| |
| | |
| box-shadow:none;
| |
| | |
| border:1px solid #cfcfcf;
| |
| | |
| }
| |
| | |
| }
| |
| | |
| | |
| /*==============================
| |
| Performance
| |
| ==============================*/
| |
| | |
| .dpx-card{
| |
| | |
| contain:layout paint;
| |
| | |
| }
| |
| | |
| .dpx-image img{
| |
| | |
| image-rendering:auto;
| |
| | |
| }
| |
| | |
| | |
| /*==============================
| |
| FINAL FIXES
| |
| ==============================*/
| |
| | |
| /* حذف فاصله ناخواسته تصاویر */
| |
| | |
| .dpx-image picture{
| |
| | |
| display:block;
| |
| | |
| width:100%;
| |
| | |
| height:100%;
| |
| | |
| }
| |
| | |
| /* رفع کشیدگی متن */
| |
| | |
| .dpx-title,
| |
| .dpx-desc{
| |
| | |
| overflow-wrap:anywhere;
| |
| | |
| }
| |
| | |
| /* جلوگیری از اسکرول افقی */
| |
| | |
| .dpx-section{
| |
| | |
| overflow:hidden;
| |
| | |
| }
| |
| | |
| | |
| /* رنگ پس زمینه اختصاصی یک صفحه */
| |
| | |
| /* ۱. شفاف کردن پسزمینه اصلی مدیاویکی برای نمایش گرادینت */
| |
| #content, #mw-page-base, #mw-head, .mw-body {
| |
| background: transparent !important;
| |
| }
| |
| | |
| /* ۲. تعریف کلاس گرادینت اختصاصی شما */
| |
| .my-custom-gradient {
| |
| /* ایجاد گرادینت از بالا به پایین با ترتیب رنگهای درخواستی شما */
| |
| background: linear-gradient(180deg,
| |
| #2A7B9B 0%, /* رنگ بالا */
| |
| #57C785 50%, /* رنگ میانی */
| |
| #EDDD53 100% /* رنگ پایین */
| |
| ) !important;
| |
| | |
| /* ثابت نگه داشتن پسزمینه هنگام اسکرول برای جلوگیری از بهم ریختگی */
| |
| background-attachment: fixed !important;
| |
|
| |
| /* ایجاد حس نرمی و محو بودن (Blur effect) با استفاده از ترکیب رنگها */
| |
| /* توجه: خود گرادینت در لبهها محو میشود، اما اگر میخواهید محتوا هم نرم باشد: */
| |
| border-radius: 15px;
| |
| padding: 20px;
| |
| }
| |
| | |
| | |
| #content, #mw-page-base, #mw-head, .mw-body {
| |
| background: transparent !important;
| |
| }
| |
| | |
| | |
| =============================================================
| |
| تغییرات جدید
| |
| ============================================================
| |
| /* استایل فونت متحرک */
| |
| .sanjab-typewriter {
| |
| direction: rtl;
| |
| text-align: center;
| |
| font-family: Tahoma, 'B Nazanin', sans-serif;
| |
| font-size: 50px;
| |
| font-weight: bold;
| |
| color: #1a202c;
| |
| min-height: 120px;
| |
| display: block;
| |
| visibility: hidden; /* تا قبل از شروع جاوااسکریپت مخفی بماند */
| |
| border-left: 4px solid #ff7a00;
| |
| padding-left: 10px;
| |
| }
| |
| | |
| ===================================================================
| |
| | |
| /*=====================================================
| |
| Deniz Door Products Section
| |
| Version : 2.0
| |
| Responsive + SEO + Accessibility
| |
| ======================================================*/
| |
| @charset "UTF-8";
| |
| /*-------------------------
| |
| IRANSans Font
| |
| --------------------------*/
| |
| @font-face{
| |
| font-family:'IRANSans';
| |
| src:url('/fonts/IRANSans.woff2') format('woff2'),
| |
| url('/fonts/IRANSans.woff') format('woff');
| |
| font-display:swap;
| |
| font-weight:normal;
| |
| }
| |
| @font-face{
| |
| font-family:'IRANSans';
| |
| src:url('/fonts/IRANSans-Bold.woff2') format('woff2'),
| |
| url('/fonts/IRANSans-Bold.woff') format('woff');
| |
| font-display:swap;
| |
| font-weight:bold;
| |
| }
| |
| /*-------------------------
| |
| Variables
| |
| --------------------------*/
| |
| :root{
| |
| --primary:#222222;
| |
| --secondary:#666666;
| |
| --border:#ececec;
| |
| --bg:#ffffff;
| |
| --hover:#fafafa;
| |
| --radius:22px;
| |
| --shadow:
| |
| 0 8px 20px rgba(0,0,0,.06);
| |
| --shadow-hover:
| |
| 0 18px 40px rgba(0,0,0,.12);
| |
| --transition:.35s ease;
| |
| }
| |
| /*-------------------------
| |
| Reset
| |
| --------------------------*/
| |
| *,
| |
| *::before,
| |
| *::after{
| |
| margin:0;
| |
| padding:0;
| |
| box-sizing:border-box;
| |
| }
| |
| html{
| |
| font-size:16px;
| |
| scroll-behavior:smooth;
| |
| }
| |
| body{
| |
| font-family:'IRANSans',Tahoma,sans-serif;
| |
| direction:rtl;
| |
| background:#fff;
| |
| color:var(--primary);
| |
| line-height:2;
| |
| overflow-x:hidden;
| |
| text-rendering:optimizeLegibility;
| |
| }
| |
| img{
| |
| display:block;
| |
| max-width:100%;
| |
| height:auto;
| |
| }
| |
| a{
| |
| text-decoration:none;
| |
| color:inherit;
| |
| }
| |
| ul{
| |
| list-style:none;
| |
| }
| |
| /*==================================================
| |
| PRODUCTS SECTION
| |
| ===================================================*/
| |
| .deniz-products{
| |
| padding:90px 20px;
| |
| background:#fff;
| |
| position:relative;
| |
| }
| |
| .deniz-products .container{
| |
| max-width:1320px;
| |
| margin:auto;
| |
| }
| |
| /*=========================
| |
| Heading
| |
| ==========================*/
| |
| .deniz-heading{
| |
| text-align:center;
| |
| margin-bottom:70px;
| |
| }
| |
| .deniz-heading h2{
| |
| font-size:46px;
| |
| font-weight:700;
| |
| color:#111;
| |
| line-height:1.3;
| |
| }
| |
| .deniz-heading::after{
| |
| content:"";
| |
| display:block;
| |
| width:90px;
| |
| height:2px;
| |
| background:#d9d9d9;
| |
| margin:22px auto 0;
| |
| }
| |
| /*=========================
| |
| Grid
| |
| ==========================*/
| |
| .deniz-grid{
| |
| display:grid;
| |
| grid-template-columns:
| |
| repeat(4,minmax(240px,1fr));
| |
| gap:42px;
| |
| align-items:start;
| |
| }
| |
| /*=========================
| |
| Card
| |
| ==========================*/
| |
| .deniz-card{
| |
| position:relative;
| |
| padding:0;
| |
| text-align:center;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-card:hover{
| |
| transform:translateY(-10px);
| |
| }
| |
| .deniz-card a{
| |
| display:block;
| |
| padding:10px;
| |
| border-radius:var(--radius);
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-card:hover a{
| |
| background:var(--hover);
| |
| box-shadow:var(--shadow-hover);
| |
| }
| |
| /*=========================
| |
| Image Area
| |
| ==========================*/
| |
| .deniz-card .image-box{
| |
| position:relative;
| |
| width:100%;
| |
| aspect-ratio:1 / 1;
| |
| overflow:hidden;
| |
| border-radius:var(--radius);
| |
| background:#f7f7f7;
| |
| margin-bottom:22px;
| |
| }
| |
| .deniz-card .image-box img{
| |
| width:100%;
| |
| height:100%;
| |
| object-fit:cover;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-card:hover .image-box img{
| |
| transform:scale(1.08);
| |
| }
| |
| /*=========================
| |
| Product Title
| |
| ==========================*/
| |
| .deniz-card h3{
| |
| font-size:22px;
| |
| font-weight:700;
| |
| color:#111;
| |
| line-height:1.8;
| |
| margin-bottom:12px;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-card:hover h3{
| |
| color:#444;
| |
| }
| |
| /*=========================
| |
| Description
| |
| ==========================*/
| |
| .deniz-card p{
| |
| font-size:15px;
| |
| color:var(--secondary);
| |
| line-height:2;
| |
| max-width:280px;
| |
| margin:0 auto;
| |
| }
| |
| /*=========================
| |
| Read More
| |
| ==========================*/
| |
| .deniz-card .read-more{
| |
| display:inline-flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| gap:8px;
| |
| margin-top:18px;
| |
| font-size:14px;
| |
| font-weight:bold;
| |
| color:#555;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-card .read-more::after{
| |
| content:"←";
| |
| font-size:18px;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-card:hover .read-more{
| |
| color:#111;
| |
| }
| |
| .deniz-card:hover .read-more::after{
| |
| transform:translateX(-6px);
| |
| }
| |
| /*=========================
| |
| Accessibility Focus
| |
| ==========================*/
| |
| .deniz-card a:focus-visible{
| |
| outline:3px solid #777;
| |
| outline-offset:5px;
| |
| }
| |
| /*==================================================
| |
| TABLET RESPONSIVE
| |
| ===================================================*/
| |
| @media(max-width:1100px){
| |
| .deniz-products{
| |
| padding:70px 20px;
| |
| }
| |
| .deniz-heading h2{
| |
| font-size:38px;
| |
| }
| |
| .deniz-grid{
| |
| grid-template-columns:
| |
| repeat(2,minmax(240px,1fr));
| |
| gap:35px;
| |
| }
| |
| .deniz-card h3{
| |
| font-size:20px;
| |
| }
| |
| }
| |
| /*==================================================
| |
| MOBILE RESPONSIVE
| |
| ===================================================*/
| |
| @media(max-width:600px){
| |
| .deniz-products{
| |
| padding:45px 15px;
| |
| }
| |
| .deniz-heading{
| |
| margin-bottom:40px;
| |
| }
| |
| .deniz-heading h2{
| |
| font-size:28px;
| |
| }
| |
| .deniz-heading::after{
| |
| width:60px;
| |
| }
| |
| .deniz-grid{
| |
| grid-template-columns:1fr;
| |
| gap:28px;
| |
| }
| |
| .deniz-card a{
| |
| padding:8px;
| |
| }
| |
| .deniz-card .image-box{
| |
| border-radius:18px;
| |
| }
| |
| .deniz-card h3{
| |
| font-size:18px;
| |
| }
| |
| .deniz-card p{
| |
| font-size:14px;
| |
| }
| |
| .deniz-card:hover{
| |
| transform:none;
| |
| }
| |
| }
| |
| /*==================================================
| |
| SMALL MOBILE
| |
| ===================================================*/
| |
| @media(max-width:380px){
| |
| .deniz-heading h2{
| |
| font-size:24px;
| |
| }
| |
| .deniz-card h3{
| |
| font-size:17px;
| |
| }
| |
| .deniz-card p{
| |
| font-size:13px;
| |
| }
| |
| }
| |
| /*==================================================
| |
| SEO + PERFORMANCE OPTIMIZATION
| |
| ===================================================*/
| |
| /* جلوگیری از پرش محتوا هنگام لود تصاویر */
| |
| .deniz-card .image-box{
| |
| contain:layout paint;
| |
| }
| |
| /* بهینه سازی رندر متن */
| |
| .deniz-products,
| |
| .deniz-products *{
| |
| -webkit-font-smoothing:antialiased;
| |
| -moz-osx-font-smoothing:grayscale;
| |
| }
| |
| /*==================================================
| |
| IMAGE SEO SUPPORT
| |
| ===================================================*/
| |
| .deniz-card img{
| |
| loading:lazy;
| |
| object-fit:cover;
| |
| }
| |
| /*==================================================
| |
| HIGH CONTRAST SUPPORT
| |
| ===================================================*/
| |
| @media (prefers-contrast:high){
| |
| .deniz-card h3{
| |
| color:#000;
| |
| }
| |
| .deniz-card p{
| |
| color:#222;
| |
| }
| |
| .deniz-card a{
| |
| border:1px solid #333;
| |
| }
| |
| }
| |
| /*==================================================
| |
| REDUCED MOTION ACCESSIBILITY
| |
| ===================================================*/
| |
| @media(prefers-reduced-motion:reduce){
| |
| *,
| |
| *::before,
| |
| *::after{
| |
| animation-duration:.01ms!important;
| |
| animation-iteration-count:1!important;
| |
| transition-duration:.01ms!important;
| |
| scroll-behavior:auto!important;
| |
| }
| |
| }
| |
| /*==================================================
| |
| DARK MODE SUPPORT
| |
| ===================================================*/
| |
| @media(prefers-color-scheme:dark){
| |
| .deniz-products{
| |
| background:#111;
| |
| }
| |
| .deniz-heading h2{
| |
| color:#fff;
| |
| }
| |
| .deniz-heading::after{
| |
| background:#444;
| |
| }
| |
| .deniz-card:hover a{
| |
| background:#1b1b1b;
| |
| }
| |
| .deniz-card h3{
| |
| color:#fff;
| |
| }
| |
| .deniz-card p{
| |
| color:#bbb;
| |
| }
| |
| .deniz-card .image-box{
| |
| background:#1c1c1c;
| |
| }
| |
| .deniz-card .read-more{
| |
| color:#ddd;
| |
| }
| |
| }
| |
| /*==================================================
| |
| LARGE DESKTOP OPTIMIZATION
| |
| ===================================================*/
| |
| @media(min-width:1400px){
| |
| .deniz-products .container{
| |
| max-width:1450px;
| |
| }
| |
| .deniz-grid{
| |
| gap:50px;
| |
| }
| |
| .deniz-card h3{
| |
| font-size:24px;
| |
| }
| |
| }
| |
| /*==================================================
| |
| PRINT OPTIMIZATION
| |
| ===================================================*/
| |
| @media print{
| |
| .deniz-products{
| |
| padding:20px;
| |
| }
| |
| .deniz-card:hover{
| |
| transform:none;
| |
| }
| |
| .deniz-card a{
| |
| box-shadow:none!important;
| |
| background:none!important;
| |
| }
| |
| .deniz-card .read-more{
| |
| display:none;
| |
| }
| |
| }
| |
| /*==================================================
| |
| PRODUCT BADGE
| |
| (ویژگی / جدید / پرفروش)
| |
| ===================================================*/
| |
| .deniz-card .product-badge{
| |
| position:absolute;
| |
| top:18px;
| |
| right:18px;
| |
| z-index:5;
| |
| background:#111;
| |
| color:#fff;
| |
| font-size:13px;
| |
| padding:6px 14px;
| |
| border-radius:30px;
| |
| font-weight:bold;
| |
| line-height:1.5;
| |
| }
| |
| /* رنگهای مختلف Badge */
| |
| .deniz-card .product-badge.new{
| |
| background:#2ecc71;
| |
| }
| |
| .deniz-card .product-badge.sale{
| |
| background:#e74c3c;
| |
| }
| |
| .deniz-card .product-badge.best{
| |
| background:#f39c12;
| |
| }
| |
| /*==================================================
| |
| PRODUCT FEATURE LIST
| |
| ===================================================*/
| |
| .deniz-features{
| |
| margin-top:18px;
| |
| display:flex;
| |
| flex-wrap:wrap;
| |
| justify-content:center;
| |
| gap:8px;
| |
| }
| |
| .deniz-features span{
| |
| background:#f6f6f6;
| |
| border-radius:20px;
| |
| padding:5px 12px;
| |
| font-size:12px;
| |
| color:#555;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-card:hover .deniz-features span{
| |
| background:#fff;
| |
| box-shadow:0 5px 15px rgba(0,0,0,.06);
| |
| }
| |
| /*==================================================
| |
| PRODUCT BUTTON
| |
| ===================================================*/
| |
| .deniz-card .product-btn{
| |
| display:inline-flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| margin-top:22px;
| |
| padding:10px 28px;
| |
| border-radius:30px;
| |
| background:#111;
| |
| color:#fff;
| |
| font-size:14px;
| |
| font-weight:bold;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-card .product-btn:hover{
| |
| background:#333;
| |
| transform:translateY(-3px);
| |
| }
| |
| /*==================================================
| |
| FEATURED PRODUCT CARD
| |
| ===================================================*/
| |
| .deniz-card.featured a{
| |
| background:#fafafa;
| |
| box-shadow:
| |
| 0 10px 30px rgba(0,0,0,.08);
| |
| }
| |
| .deniz-card.featured:hover a{
| |
| box-shadow:
| |
| 0 20px 45px rgba(0,0,0,.15);
| |
| }
| |
| /*==================================================
| |
| PRODUCT IMAGE OVERLAY
| |
| ===================================================*/
| |
| .deniz-card .image-overlay{
| |
| position:absolute;
| |
| inset:0;
| |
| background:linear-gradient(
| |
| to top,
| |
| rgba(0,0,0,.35),
| |
| transparent 60%
| |
| );
| |
| opacity:0;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-card:hover .image-overlay{
| |
| opacity:1;
| |
| }
| |
| /*==================================================
| |
| ICON SUPPORT
| |
| ===================================================*/
| |
| .deniz-icon{
| |
| width:45px;
| |
| height:45px;
| |
| display:flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| margin:0 auto 15px;
| |
| border-radius:50%;
| |
| background:#f4f4f4;
| |
| color:#222;
| |
| font-size:20px;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-card:hover .deniz-icon{
| |
| transform:translateY(-5px);
| |
| background:#111;
| |
| color:#fff;
| |
| }
| |
| /*==================================================
| |
| MOBILE CARD IMPROVEMENT
| |
| ===================================================*/
| |
| @media(max-width:600px){
| |
| .deniz-card .product-badge{
| |
| top:12px;
| |
| right:12px;
| |
| font-size:11px;
| |
| padding:5px 10px;
| |
| }
| |
| .deniz-features span{
| |
| font-size:11px;
| |
| padding:4px 9px;
| |
| }
| |
| .deniz-card .product-btn{
| |
| width:100%;
| |
| padding:9px 20px;
| |
| }
| |
| }
| |
| /*==================================================
| |
| SEO STRUCTURE SUPPORT
| |
| Breadcrumb + Schema Layout
| |
| ===================================================*/
| |
| .deniz-breadcrumb{
| |
| width:100%;
| |
| max-width:1320px;
| |
| margin:0 auto 35px;
| |
| padding:12px 20px;
| |
| background:#fafafa;
| |
| border-radius:15px;
| |
| font-size:14px;
| |
| color:#777;
| |
| }
| |
| .deniz-breadcrumb a{
| |
| color:#555;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-breadcrumb a:hover{
| |
| color:#111;
| |
| }
| |
| /*==================================================
| |
| SEO INTRO BOX
| |
| ===================================================*/
| |
| .deniz-intro{
| |
| max-width:1000px;
| |
| margin:0 auto 60px;
| |
| text-align:center;
| |
| font-size:16px;
| |
| color:#555;
| |
| line-height:2.2;
| |
| }
| |
| .deniz-intro strong{
| |
| color:#111;
| |
| font-weight:bold;
| |
| }
| |
| /*==================================================
| |
| FAQ SECTION SEO
| |
| ===================================================*/
| |
| .deniz-faq{
| |
| max-width:1000px;
| |
| margin:80px auto 0;
| |
| }
| |
| .deniz-faq-item{
| |
| border-bottom:1px solid var(--border);
| |
| padding:20px 0;
| |
| }
| |
| .deniz-faq-question{
| |
| display:flex;
| |
| align-items:center;
| |
| justify-content:space-between;
| |
| cursor:pointer;
| |
| font-size:18px;
| |
| font-weight:bold;
| |
| color:#111;
| |
| }
| |
| .deniz-faq-answer{
| |
| margin-top:12px;
| |
| font-size:15px;
| |
| color:#666;
| |
| line-height:2;
| |
| }
| |
| /*==================================================
| |
| CTA SEO BOX
| |
| ===================================================*/
| |
| .deniz-cta{
| |
| margin-top:80px;
| |
| padding:45px 35px;
| |
| background:#111;
| |
| color:#fff;
| |
| border-radius:25px;
| |
| text-align:center;
| |
| }
| |
| .deniz-cta h3{
| |
| font-size:28px;
| |
| margin-bottom:15px;
| |
| }
| |
| .deniz-cta p{
| |
| font-size:16px;
| |
| color:#ddd;
| |
| margin-bottom:25px;
| |
| }
| |
| .deniz-cta a{
| |
| display:inline-flex;
| |
| padding:12px 35px;
| |
| background:#fff;
| |
| color:#111;
| |
| border-radius:30px;
| |
| font-weight:bold;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-cta a:hover{
| |
| transform:translateY(-4px);
| |
| }
| |
| /*==================================================
| |
| SEO KEYWORD HIGHLIGHT
| |
| ===================================================*/
| |
| .deniz-keyword{
| |
| font-weight:bold;
| |
| color:#111;
| |
| }
| |
| /*==================================================
| |
| RESPONSIVE SEO ELEMENTS
| |
| ===================================================*/
| |
| @media(max-width:768px){
| |
| .deniz-breadcrumb{
| |
| font-size:12px;
| |
| padding:10px 14px;
| |
| }
| |
| .deniz-intro{
| |
| font-size:14px;
| |
| padding:0 10px;
| |
| }
| |
| .deniz-faq-question{
| |
| font-size:16px;
| |
| }
| |
| .deniz-faq-answer{
| |
| font-size:14px;
| |
| }
| |
| .deniz-cta{
| |
| padding:30px 20px;
| |
| }
| |
| .deniz-cta h3{
| |
| font-size:22px;
| |
| }
| |
| }
| |
| /*==================================================
| |
| PERFORMANCE + CORE WEB VITALS
| |
| ===================================================*/
| |
| .deniz-products{
| |
| content-visibility:auto;
| |
| }
| |
| .deniz-card{
| |
| will-change:transform;
| |
| }
| |
| .deniz-card .image-box img{
| |
| backface-visibility:hidden;
| |
| }
| |
| /*==================================================
| |
| LOADING PLACEHOLDER
| |
| ===================================================*/
| |
| .deniz-card .image-box.loading{
| |
| background:
| |
| linear-gradient(
| |
| 90deg,
| |
| #f3f3f3 25%,
| |
| #fafafa 50%,
| |
| #f3f3f3 75%
| |
| );
| |
| background-size:200% 100%;
| |
| animation:deniz-loading 1.5s infinite;
| |
| }
| |
| @keyframes deniz-loading{
| |
| 0%{
| |
| background-position:200% 0;
| |
| }
| |
| 100%{
| |
| background-position:-200% 0;
| |
| }
| |
| }
| |
| /*==================================================
| |
| PREMIUM CARD STYLE
| |
| ===================================================*/
| |
| .deniz-card.premium a{
| |
| border:1px solid #ededed;
| |
| background:#fff;
| |
| }
| |
| .deniz-card.premium:hover a{
| |
| border-color:#ddd;
| |
| }
| |
| /*==================================================
| |
| PRODUCT PRICE AREA
| |
| ===================================================*/
| |
| .deniz-price{
| |
| display:flex;
| |
| justify-content:center;
| |
| align-items:center;
| |
| gap:10px;
| |
| margin-top:15px;
| |
| }
| |
| .deniz-price .old-price{
| |
| font-size:14px;
| |
| color:#999;
| |
| text-decoration:line-through;
| |
| }
| |
| .deniz-price .new-price{
| |
| font-size:20px;
| |
| font-weight:bold;
| |
| color:#111;
| |
| }
| |
| /*==================================================
| |
| TRUST BADGES
| |
| ===================================================*/
| |
| .deniz-trust{
| |
| display:flex;
| |
| justify-content:center;
| |
| flex-wrap:wrap;
| |
| gap:15px;
| |
| margin-top:30px;
| |
| }
| |
| .deniz-trust-item{
| |
| display:flex;
| |
| align-items:center;
| |
| gap:8px;
| |
| font-size:14px;
| |
| color:#555;
| |
| }
| |
| .deniz-trust-item i{
| |
| font-size:18px;
| |
| color:#222;
| |
| }
| |
| /*==================================================
| |
| HOVER MICRO INTERACTIONS
| |
| ===================================================*/
| |
| .deniz-card:hover .deniz-trust-item i{
| |
| transform:scale(1.1);
| |
| }
| |
| .deniz-trust-item i{
| |
| transition:var(--transition);
| |
| }
| |
| /*==================================================
| |
| PRODUCT CATEGORY FILTER
| |
| ===================================================*/
| |
| .deniz-filter{
| |
| display:flex;
| |
| justify-content:center;
| |
| flex-wrap:wrap;
| |
| gap:12px;
| |
| margin-bottom:50px;
| |
| }
| |
| .deniz-filter button{
| |
| border:1px solid #ddd;
| |
| background:#fff;
| |
| padding:10px 25px;
| |
| border-radius:30px;
| |
| font-family:inherit;
| |
| cursor:pointer;
| |
| font-size:14px;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-filter button:hover,
| |
| .deniz-filter button.active{
| |
| background:#111;
| |
| color:#fff;
| |
| border-color:#111;
| |
| }
| |
| /*==================================================
| |
| MOBILE FINAL OPTIMIZATION
| |
| ===================================================*/
| |
| @media(max-width:600px){
| |
| .deniz-price .new-price{
| |
| font-size:18px;
| |
| }
| |
| .deniz-trust{
| |
| gap:10px;
| |
| }
| |
| .deniz-trust-item{
| |
| font-size:12px;
| |
| }
| |
| .deniz-filter{
| |
| margin-bottom:30px;
| |
| }
| |
| .deniz-filter button{
| |
| padding:8px 16px;
| |
| font-size:12px;
| |
| }
| |
| }
| |
| /*==================================================
| |
| PROFESSIONAL SHOP STYLE
| |
| Product Actions
| |
| ===================================================*/
| |
| .deniz-actions{
| |
| display:flex;
| |
| justify-content:center;
| |
| align-items:center;
| |
| gap:12px;
| |
| margin-top:25px;
| |
| }
| |
| /* دکمه مشاهده محصول */
| |
| .deniz-view-btn{
| |
| display:inline-flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| padding:11px 28px;
| |
| border-radius:30px;
| |
| background:#111;
| |
| color:#fff;
| |
| font-size:14px;
| |
| font-weight:bold;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-view-btn:hover{
| |
| background:#333;
| |
| transform:translateY(-3px);
| |
| }
| |
| /* دکمه تماس */
| |
| .deniz-call-btn{
| |
| display:inline-flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| padding:11px 22px;
| |
| border-radius:30px;
| |
| background:#f5f5f5;
| |
| color:#111;
| |
| font-size:14px;
| |
| font-weight:bold;
| |
| border:1px solid #ddd;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-call-btn:hover{
| |
| background:#111;
| |
| color:#fff;
| |
| border-color:#111;
| |
| }
| |
| /*==================================================
| |
| TRUST SECTION
| |
| ===================================================*/
| |
| .deniz-trust-box{
| |
| margin-top:70px;
| |
| padding:35px 25px;
| |
| background:#fafafa;
| |
| border-radius:25px;
| |
| display:grid;
| |
| grid-template-columns:
| |
| repeat(4,1fr);
| |
| gap:25px;
| |
| text-align:center;
| |
| }
| |
| .deniz-trust-box .item{
| |
| padding:15px;
| |
| }
| |
| .deniz-trust-box .icon{
| |
| width:55px;
| |
| height:55px;
| |
| margin:0 auto 15px;
| |
| border-radius:50%;
| |
| display:flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| background:#111;
| |
| color:#fff;
| |
| font-size:22px;
| |
| }
| |
| .deniz-trust-box h4{
| |
| font-size:17px;
| |
| color:#111;
| |
| margin-bottom:8px;
| |
| }
| |
| .deniz-trust-box p{
| |
| font-size:13px;
| |
| color:#666;
| |
| line-height:1.9;
| |
| }
| |
| /*==================================================
| |
| PRODUCT HOVER BORDER EFFECT
| |
| ===================================================*/
| |
| .deniz-card a::before{
| |
| content:"";
| |
| position:absolute;
| |
| inset:0;
| |
| border-radius:var(--radius);
| |
| border:1px solid transparent;
| |
| transition:var(--transition);
| |
| pointer-events:none;
| |
| }
| |
| .deniz-card:hover a::before{
| |
| border-color:#ddd;
| |
| }
| |
| /*==================================================
| |
| IMAGE ZOOM BUTTON
| |
| ===================================================*/
| |
| .deniz-image-btn{
| |
| position:absolute;
| |
| bottom:20px;
| |
| left:20px;
| |
| width:42px;
| |
| height:42px;
| |
| border-radius:50%;
| |
| display:flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| background:#fff;
| |
| color:#111;
| |
| opacity:0;
| |
| transform:translateY(15px);
| |
| transition:var(--transition);
| |
| box-shadow:0 8px 20px rgba(0,0,0,.12);
| |
| }
| |
| .deniz-card:hover .deniz-image-btn{
| |
| opacity:1;
| |
| transform:translateY(0);
| |
| }
| |
| /*==================================================
| |
| BRAND HIGHLIGHT
| |
| ===================================================*/
| |
| .deniz-brand{
| |
| font-weight:bold;
| |
| color:#111;
| |
| position:relative;
| |
| }
| |
| .deniz-brand::after{
| |
| content:"";
| |
| position:absolute;
| |
| height:2px;
| |
| width:100%;
| |
| bottom:-5px;
| |
| right:0;
| |
| background:#111;
| |
| }
| |
| /*==================================================
| |
| RESPONSIVE TRUST BOX
| |
| ===================================================*/
| |
| @media(max-width:992px){
| |
| .deniz-trust-box{
| |
| grid-template-columns:
| |
| repeat(2,1fr);
| |
| }
| |
| }
| |
| @media(max-width:600px){
| |
| .deniz-actions{
| |
| flex-direction:column;
| |
| }
| |
| .deniz-view-btn,
| |
| .deniz-call-btn{
| |
| width:100%;
| |
| }
| |
| .deniz-trust-box{
| |
| grid-template-columns:1fr;
| |
| padding:25px 15px;
| |
| }
| |
| .deniz-trust-box h4{
| |
| font-size:15px;
| |
| }
| |
| }
| |
| /*==================================================
| |
| PRODUCT DETAIL SECTION
| |
| مشخصات صفحه محصول
| |
| ===================================================*/
| |
| .deniz-product-detail{
| |
| max-width:1200px;
| |
| margin:80px auto;
| |
| padding:0 20px;
| |
| }
| |
| /* عنوان محصول */
| |
| .deniz-product-title{
| |
| font-size:36px;
| |
| font-weight:700;
| |
| color:#111;
| |
| line-height:1.5;
| |
| margin-bottom:25px;
| |
| }
| |
| /* توضیحات محصول */
| |
| .deniz-product-description{
| |
| font-size:16px;
| |
| color:#555;
| |
| line-height:2.3;
| |
| margin-bottom:40px;
| |
| }
| |
| /*==================================================
| |
| SPECIFICATIONS TABLE
| |
| ===================================================*/
| |
| .deniz-specs{
| |
| width:100%;
| |
| border-collapse:separate;
| |
| border-spacing:0;
| |
| overflow:hidden;
| |
| border-radius:20px;
| |
| box-shadow:0 10px 30px rgba(0,0,0,.06);
| |
| }
| |
| .deniz-specs tr{
| |
| background:#fff;
| |
| }
| |
| .deniz-specs tr:nth-child(even){
| |
| background:#fafafa;
| |
| }
| |
| .deniz-specs td{
| |
| padding:16px 22px;
| |
| border-bottom:1px solid #eee;
| |
| font-size:15px;
| |
| }
| |
| .deniz-specs td:first-child{
| |
| font-weight:bold;
| |
| color:#111;
| |
| width:35%;
| |
| }
| |
| .deniz-specs tr:last-child td{
| |
| border-bottom:none;
| |
| }
| |
| /*==================================================
| |
| PRODUCT ADVANTAGES
| |
| ===================================================*/
| |
| .deniz-advantages{
| |
| display:grid;
| |
| grid-template-columns:
| |
| repeat(3,1fr);
| |
| gap:25px;
| |
| margin-top:50px;
| |
| }
| |
| .deniz-advantage-item{
| |
| padding:30px 20px;
| |
| background:#fff;
| |
| border-radius:22px;
| |
| text-align:center;
| |
| box-shadow:var(--shadow);
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-advantage-item:hover{
| |
| transform:translateY(-8px);
| |
| box-shadow:var(--shadow-hover);
| |
| }
| |
| .deniz-advantage-item .icon{
| |
| font-size:35px;
| |
| margin-bottom:15px;
| |
| color:#111;
| |
| }
| |
| .deniz-advantage-item h4{
| |
| font-size:18px;
| |
| margin-bottom:10px;
| |
| color:#111;
| |
| }
| |
| .deniz-advantage-item p{
| |
| font-size:14px;
| |
| color:#666;
| |
| line-height:2;
| |
| }
| |
| /*==================================================
| |
| CUSTOMER REVIEWS
| |
| ===================================================*/
| |
| .deniz-reviews{
| |
| margin-top:80px;
| |
| }
| |
| .deniz-review-item{
| |
| background:#fff;
| |
| padding:25px;
| |
| border-radius:20px;
| |
| box-shadow:var(--shadow);
| |
| margin-bottom:20px;
| |
| }
| |
| .deniz-review-header{
| |
| display:flex;
| |
| align-items:center;
| |
| justify-content:space-between;
| |
| margin-bottom:15px;
| |
| }
| |
| .deniz-review-name{
| |
| font-size:16px;
| |
| font-weight:bold;
| |
| color:#111;
| |
| }
| |
| .deniz-stars{
| |
| color:#555;
| |
| font-size:18px;
| |
| letter-spacing:3px;
| |
| }
| |
| .deniz-review-text{
| |
| font-size:14px;
| |
| color:#666;
| |
| line-height:2;
| |
| }
| |
| /*==================================================
| |
| RELATED PRODUCTS
| |
| ===================================================*/
| |
| .deniz-related{
| |
| margin-top:90px;
| |
| }
| |
| .deniz-related-title{
| |
| text-align:center;
| |
| font-size:30px;
| |
| font-weight:bold;
| |
| margin-bottom:45px;
| |
| color:#111;
| |
| }
| |
| .deniz-related-grid{
| |
| display:grid;
| |
| grid-template-columns:
| |
| repeat(4,1fr);
| |
| gap:25px;
| |
| }
| |
| .deniz-related-item{
| |
| background:#fff;
| |
| border-radius:20px;
| |
| overflow:hidden;
| |
| box-shadow:var(--shadow);
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-related-item:hover{
| |
| transform:translateY(-7px);
| |
| }
| |
| .deniz-related-item img{
| |
| width:100%;
| |
| aspect-ratio:1/1;
| |
| object-fit:cover;
| |
| }
| |
| .deniz-related-item h5{
| |
| padding:15px;
| |
| font-size:16px;
| |
| text-align:center;
| |
| color:#111;
| |
| }
| |
| /*==================================================
| |
| RESPONSIVE PRODUCT DETAIL
| |
| ===================================================*/
| |
| @media(max-width:992px){
| |
| .deniz-product-title{
| |
| font-size:30px;
| |
| }
| |
| .deniz-advantages{
| |
| grid-template-columns:repeat(2,1fr);
| |
| }
| |
| .deniz-related-grid{
| |
| grid-template-columns:repeat(2,1fr);
| |
| }
| |
| }
| |
| @media(max-width:600px){
| |
| .deniz-product-detail{
| |
| margin:50px auto;
| |
| padding:0 15px;
| |
| }
| |
| .deniz-product-title{
| |
| font-size:24px;
| |
| }
| |
| .deniz-product-description{
| |
| font-size:14px;
| |
| }
| |
| .deniz-specs td{
| |
| padding:12px;
| |
| font-size:13px;
| |
| }
| |
| .deniz-specs td:first-child{
| |
| width:40%;
| |
| }
| |
| .deniz-advantages{
| |
| grid-template-columns:1fr;
| |
| }
| |
| .deniz-related-grid{
| |
| grid-template-columns:1fr;
| |
| }
| |
| .deniz-related-title{
| |
| font-size:24px;
| |
| }
| |
| }
| |
| /*==================================================
| |
| FINAL SEO COMPONENTS
| |
| FAQ + SHARE + SCHEMA SUPPORT
| |
| ===================================================*/
| |
| /*=========================
| |
| FAQ ACCORDION
| |
| ==========================*/
| |
| .deniz-faq-wrapper{
| |
| max-width:1100px;
| |
| margin:80px auto;
| |
| padding:0 20px;
| |
| }
| |
| .deniz-faq-title{
| |
| text-align:center;
| |
| font-size:32px;
| |
| font-weight:700;
| |
| color:#111;
| |
| margin-bottom:40px;
| |
| }
| |
| .deniz-faq-item{
| |
| border:1px solid #ececec;
| |
| border-radius:18px;
| |
| margin-bottom:15px;
| |
| overflow:hidden;
| |
| background:#fff;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-faq-item:hover{
| |
| box-shadow:var(--shadow);
| |
| }
| |
| .deniz-faq-item summary{
| |
| cursor:pointer;
| |
| padding:20px 25px;
| |
| font-size:17px;
| |
| font-weight:bold;
| |
| color:#111;
| |
| list-style:none;
| |
| display:flex;
| |
| justify-content:space-between;
| |
| align-items:center;
| |
| }
| |
| .deniz-faq-item summary::-webkit-details-marker{
| |
| display:none;
| |
| }
| |
| .deniz-faq-item summary::after{
| |
| content:"+";
| |
| font-size:25px;
| |
| font-weight:bold;
| |
| }
| |
| .deniz-faq-item[open] summary::after{
| |
| content:"−";
| |
| }
| |
| .deniz-faq-content{
| |
| padding:0 25px 25px;
| |
| font-size:15px;
| |
| color:#666;
| |
| line-height:2.2;
| |
| }
| |
| /*==================================================
| |
| SOCIAL SHARE
| |
| ===================================================*/
| |
| .deniz-share{
| |
| display:flex;
| |
| justify-content:center;
| |
| align-items:center;
| |
| gap:12px;
| |
| margin:50px auto;
| |
| }
| |
| .deniz-share a{
| |
| width:42px;
| |
| height:42px;
| |
| display:flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| border-radius:50%;
| |
| background:#f5f5f5;
| |
| color:#222;
| |
| font-size:18px;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-share a:hover{
| |
| background:#111;
| |
| color:#fff;
| |
| transform:translateY(-5px);
| |
| }
| |
| /*==================================================
| |
| CONTACT CTA FINAL
| |
| ===================================================*/
| |
| .deniz-final-contact{
| |
| margin:90px auto;
| |
| max-width:1200px;
| |
| padding:45px 30px;
| |
| border-radius:30px;
| |
| background:#111;
| |
| color:#fff;
| |
| text-align:center;
| |
| }
| |
| .deniz-final-contact h2{
| |
| font-size:32px;
| |
| margin-bottom:15px;
| |
| }
| |
| .deniz-final-contact p{
| |
| font-size:16px;
| |
| color:#ddd;
| |
| line-height:2;
| |
| margin-bottom:30px;
| |
| }
| |
| .deniz-final-contact a{
| |
| display:inline-flex;
| |
| padding:13px 40px;
| |
| background:#fff;
| |
| color:#111;
| |
| border-radius:35px;
| |
| font-weight:bold;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-final-contact a:hover{
| |
| transform:translateY(-4px);
| |
| }
| |
| /*==================================================
| |
| FOOTER PRODUCT LINKS
| |
| ===================================================*/
| |
| .deniz-footer-links{
| |
| display:grid;
| |
| grid-template-columns:
| |
| repeat(4,1fr);
| |
| gap:25px;
| |
| margin-top:70px;
| |
| }
| |
| .deniz-footer-links h4{
| |
| font-size:17px;
| |
| margin-bottom:15px;
| |
| color:#111;
| |
| }
| |
| .deniz-footer-links a{
| |
| display:block;
| |
| font-size:14px;
| |
| color:#666;
| |
| margin-bottom:8px;
| |
| transition:var(--transition);
| |
| }
| |
| .deniz-footer-links a:hover{
| |
| color:#111;
| |
| padding-right:5px;
| |
| }
| |
| /*==================================================
| |
| FINAL RESPONSIVE SETTINGS
| |
| ===================================================*/
| |
| @media(max-width:992px){
| |
| .deniz-footer-links{
| |
| grid-template-columns:repeat(2,1fr);
| |
| }
| |
| .deniz-final-contact h2{
| |
| font-size:26px;
| |
| }
| |
| }
| |
| @media(max-width:600px){
| |
| .deniz-faq-wrapper{
| |
| padding:0 15px;
| |
| }
| |
| .deniz-faq-title{
| |
| font-size:24px;
| |
| }
| |
| .deniz-faq-item summary{
| |
| font-size:14px;
| |
| padding:16px;
| |
| }
| |
| .deniz-faq-content{
| |
| font-size:13px;
| |
| padding:0 16px 18px;
| |
| }
| |
| .deniz-share a{
| |
| width:38px;
| |
| height:38px;
| |
| }
| |
| .deniz-final-contact{
| |
| margin:60px 15px;
| |
| padding:30px 20px;
| |
| }
| |
| .deniz-final-contact h2{
| |
| font-size:22px;
| |
| }
| |
| .deniz-footer-links{
| |
| grid-template-columns:1fr;
| |
| }
| |
| }
| |
| /*==================================================
| |
| END OF DENIZ PRODUCTS CSS
| |
| Version 2.0 COMPLETE
| |
| ===================================================*/
| |
| | |
| /* محصولات دایره ای */
| |
| | |
| .products-section{
| |
| | |
| padding:70px 15px;
| |
| | |
| background:#fff;
| |
| | |
| }
| |
| | |
| .container{
| |
| | |
| max-width:1300px;
| |
| | |
| margin:auto;
| |
| | |
| }
| |
| | |
| .section-header{
| |
| | |
| text-align:center;
| |
| | |
| margin-bottom:55px;
| |
| | |
| }
| |
| | |
| .section-header h2{
| |
| | |
| font-size:42px;
| |
| | |
| font-weight:700;
| |
| | |
| color:#111;
| |
| | |
| position:relative;
| |
| | |
| display:inline-block;
| |
| | |
| }
| |
| | |
| .section-header h2::after{
| |
| | |
| content:"";
| |
| | |
| display:block;
| |
| | |
| width:80px;
| |
| | |
| height:3px;
| |
| | |
| background:#e6e6e6;
| |
| | |
| margin:15px auto 0;
| |
| | |
| }
| |
| | |
| .products-grid{
| |
| | |
| display:grid;
| |
| | |
| grid-template-columns:repeat(4,1fr);
| |
| | |
| gap:40px;
| |
| | |
| }
| |
| | |
| .product-card{
| |
| | |
| text-align:center;
| |
| | |
| transition:.35s;
| |
| | |
| }
| |
| | |
| .product-card a{
| |
| | |
| color:#333;
| |
| | |
| text-decoration:none;
| |
| | |
| display:block;
| |
| | |
| }
| |
| | |
| .product-card figure{
| |
| | |
| width:190px;
| |
| | |
| height:190px;
| |
| | |
| margin:0 auto 25px;
| |
| | |
| border-radius:50%;
| |
| | |
| overflow:hidden;
| |
| | |
| transition:.4s;
| |
| | |
| }
| |
| | |
| .product-card img{
| |
| | |
| width:100%;
| |
| | |
| height:100%;
| |
| | |
| object-fit:cover;
| |
| | |
| transition:.5s;
| |
| | |
| }
| |
| | |
| .product-card h3{
| |
| | |
| font-size:29px;
| |
| | |
| margin-bottom:18px;
| |
| | |
| color:#222;
| |
| | |
| }
| |
| | |
| .product-card p{
| |
| | |
| line-height:2;
| |
| | |
| color:#666;
| |
| | |
| font-size:17px;
| |
| | |
| }
| |
| | |
| .product-card:hover figure{
| |
| | |
| transform:translateY(-8px);
| |
| | |
| box-shadow:0 18px 40px rgba(0,0,0,.18);
| |
| | |
| }
| |
| | |
| .product-card:hover img{
| |
| | |
| transform:scale(1.08);
| |
| | |
| }
| |
| | |
| .product-card:hover h3{
| |
| | |
| color:#b48b45;
| |
| | |
| }
| |
| | |
| @media(max-width:1100px){
| |
| | |
| .products-grid{
| |
| | |
| grid-template-columns:repeat(2,1fr);
| |
| | |
| }
| |
| | |
| }
| |
| | |
| @media(max-width:650px){
| |
| | |
| .products-section{
| |
| | |
| padding:45px 15px;
| |
| | |
| }
| |
| | |
| .section-header h2{
| |
| | |
| font-size:34px;
| |
| | |
| }
| |
| | |
| .products-grid{
| |
| | |
| grid-template-columns:1fr;
| |
| | |
| gap:35px;
| |
| | |
| }
| |
| | |
| .product-card figure{
| |
| | |
| width:170px;
| |
| | |
| height:170px;
| |
| | |
| }
| |
| | |
| .product-card h3{
| |
| | |
| font-size:25px;
| |
| | |
| }
| |
| | |
| .product-card p{
| |
| | |
| font-size:16px;
| |
| | |
| line-height:1.9;
| |
| | |
| }
| |
| | |
| }
| |
| | |
| /* دکمه شیشه ای*/
| |
| :root {
| |
| /* استخراج پالت رنگی از تصویر */
| |
| --primary-pink: #f8c8d3;
| |
| --glass-bg: rgba(255, 255, 255, 0.25);
| |
| --glass-border: rgba(255, 255, 255, 0.4);
| |
| --shadow-color: rgba(248, 200, 211, 0.5);
| |
| --text-color: #7a5c66;
| |
| }
| |
| | |
| .button-container {
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| padding: 20px;
| |
| }
| |
| | |
| .glass-button {
| |
| /* ایجاد ساختار دایرهای و ریسپانسیو */
| |
| width: 15vw; /* اندازه بر اساس عرض صفحه نمایش */
| |
| min-width: 100px;
| |
| max-width: 200px;
| |
| aspect-ratio: 1 / 1; /* تضمین دایره ماندن در هر شرایطی */
| |
| border-radius: 50%;
| |
|
| |
| /* افکت شیشهای (Glassmorphism) */
| |
| background: var(--glass-bg);
| |
| backdrop-filter: blur(12px);
| |
| -webkit-backdrop-filter: blur(12px);
| |
| border: 2px solid var(--glass-border);
| |
|
| |
| /* افکت سهبعدی و سایهها */
| |
| box-shadow:
| |
| 0 8px 32px 0 var(--shadow-color),
| |
| inset 0 4px 4px rgba(255, 255, 255, 0.3),
| |
| inset 0 -4px 6px rgba(0, 0, 0, 0.05);
| |
|
| |
| /* تایپوگرافی */
| |
| color: var(--text-color);
| |
| font-family: 'Tahoma', sans-serif; /* یا فونت فارسی مورد نظر شما */
| |
| font-weight: bold;
| |
| font-size: 1.2rem;
| |
| cursor: pointer;
| |
|
| |
| /* انیمیشن و تعامل */
| |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| outline: none;
| |
| }
| |
| | |
| /* افکت هنگام نگه داشتن موس (Hover) */
| |
| .glass-button:hover {
| |
| transform: translateY(-5px) scale(1.05);
| |
| background: rgba(255, 255, 255, 0.4);
| |
| box-shadow:
| |
| 0 15px 45px 0 var(--shadow-color),
| |
| inset 0 2px 2px rgba(255, 255, 255, 0.5);
| |
| color: #4a343c;
| |
| }
| |
| | |
| /* افکت هنگام کلیک (Active) */
| |
| .glass-button:active {
| |
| transform: translateY(2px) scale(0.98);
| |
| box-shadow: 0 5px 15px 0 var(--shadow-color);
| |
| }
| |
| | |
| | |
| ======================================================
| |
| | |
| | |
| #city-search-wrapper { margin: 20px 0; }
| |
| #search-input { width: 100%; max-width: 400px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
| |
| .province-section { margin-top: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
| |
| .province-title { font-weight: bold; color: #007bff; margin-bottom: 5px; }
| |
| .city-list { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; }
| |
| .city-list li { background: #f0f0f0; padding: 3px 10px; border-radius: 10px; font-size: 0.9em; }
| |
| | |
| | |
| /* 4 کارت اهدا بخشنده*/
| |
| | |
| /* -------------------------
| |
| Medical Categories
| |
| -------------------------*/
| |
| | |
| .medical-categories{
| |
| width:100%;
| |
| max-width:1200px;
| |
| margin:auto;
| |
| padding:20px;
| |
| direction:rtl;
| |
| }
| |
| | |
| .category-grid{
| |
| | |
| display:grid;
| |
| grid-template-columns:repeat(4,1fr);
| |
| gap:22px;
| |
| | |
| }
| |
| | |
| .category-card{
| |
| | |
| background:#f5f5f5;
| |
| border-radius:18px;
| |
| padding:35px 20px;
| |
| | |
| display:flex;
| |
| flex-direction:column;
| |
| align-items:center;
| |
| justify-content:center;
| |
| | |
| text-align:center;
| |
| | |
| text-decoration:none;
| |
| | |
| transition:.35s ease;
| |
| | |
| border:1px solid transparent;
| |
| | |
| min-height:220px;
| |
| | |
| }
| |
| | |
| .category-card:hover{
| |
| | |
| transform:translateY(-8px);
| |
| | |
| box-shadow:0 18px 40px rgba(0,0,0,.08);
| |
| | |
| border-color:#3b82f6;
| |
| | |
| background:#fff;
| |
| | |
| }
| |
| | |
| .category-card .icon{
| |
| | |
| width:85px;
| |
| height:85px;
| |
| | |
| border-radius:50%;
| |
| | |
| background:#ffffff;
| |
| | |
| display:flex;
| |
| justify-content:center;
| |
| align-items:center;
| |
| | |
| margin-bottom:22px;
| |
| | |
| box-shadow:0 8px 18px rgba(0,0,0,.05);
| |
| | |
| }
| |
| | |
| .category-card .icon i{
| |
| | |
| font-size:42px;
| |
| | |
| color:#14B8A6;
| |
| | |
| transition:.35s;
| |
| | |
| }
| |
| | |
|
| |
| .category-card:hover .icon i{
| |
| | |
| transform:scale(1.12);
| |
| | |
| color:#0F9E90;
| |
| | |
| }
| |
| | |
|
| |
| .category-card h3{
| |
| | |
| margin:0;
| |
| | |
| color:#F97316;
| |
| | |
| font-size:23px;
| |
| | |
| line-height:1.8;
| |
| | |
| font-weight:700;
| |
| | |
| }
| |
| | |
| | |
| /* رنگ حاشیه هنگام هاور */
| |
| .category-card:hover{
| |
| transform:translateY(-8px);
| |
| box-shadow:0 18px 40px rgba(0,0,0,.08);
| |
| border-color:#14B8A6;
| |
| background:#fff;
| |
| | |
| | |
| /* دسترسی برای موتورهای جستجو */
| |
| | |
| .sr-only{
| |
| | |
| position:absolute;
| |
| width:1px;
| |
| height:1px;
| |
| padding:0;
| |
| margin:-1px;
| |
| overflow:hidden;
| |
| clip:rect(0,0,0,0);
| |
| white-space:nowrap;
| |
| border:0;
| |
| | |
| }
| |
| | |
| /* ===========================
| |
| Tablet
| |
| =========================== */
| |
| | |
| @media(max-width:992px){
| |
| | |
| .category-grid{
| |
| | |
| grid-template-columns:repeat(2,1fr);
| |
| | |
| }
| |
| | |
| .category-card{
| |
| | |
| min-height:200px;
| |
| | |
| }
| |
| | |
| }
| |
| | |
| /* ===========================
| |
| Mobile
| |
| =========================== */
| |
| | |
| @media(max-width:576px){
| |
| | |
| .category-grid{
| |
| | |
| grid-template-columns:repeat(2,1fr);
| |
| | |
| gap:15px;
| |
| | |
| }
| |
| | |
| .category-card{
| |
| | |
| padding:25px 15px;
| |
| | |
| min-height:170px;
| |
| | |
| border-radius:15px;
| |
| | |
| }
| |
| | |
| .category-card .icon{
| |
| | |
| width:65px;
| |
| height:65px;
| |
| | |
| margin-bottom:15px;
| |
| | |
| }
| |
| | |
| .category-card .icon i{
| |
| | |
| font-size:32px;
| |
| | |
| }
| |
| | |
| .category-card h3{
| |
| | |
| font-size:18px;
| |
| | |
| }
| |
| | |
| }
| |
| /*=============================
| |
| General
| |
| =============================*/
| |
| | |
| *{
| |
| margin:0;
| |
| padding:0;
| |
| box-sizing:border-box;
| |
| }
| |
| | |
| .medical-categories{
| |
| | |
| max-width:1200px;
| |
| margin:auto;
| |
| padding:20px;
| |
| direction:rtl;
| |
| | |
| }
| |
| | |
| /*=============================
| |
| Grid
| |
| =============================*/
| |
| | |
| .category-grid{
| |
| | |
| display:grid;
| |
| grid-template-columns:repeat(4,1fr);
| |
| gap:22px;
| |
| | |
| }
| |
| | |
| /*=============================
| |
| Card
| |
| =============================*/
| |
| | |
| .category-card{
| |
| | |
| background:#f3f3f3;
| |
| border-radius:18px;
| |
| | |
| text-decoration:none;
| |
| | |
| display:flex;
| |
| flex-direction:column;
| |
| align-items:center;
| |
| justify-content:center;
| |
| | |
| padding:35px 20px;
| |
| | |
| min-height:210px;
| |
| | |
| transition:.35s ease;
| |
| | |
| border:1px solid #ececec;
| |
| | |
| box-shadow:0 4px 12px rgba(0,0,0,.03);
| |
| | |
| }
| |
| | |
| .category-card:hover{
| |
| | |
| background:#ffffff;
| |
| | |
| transform:translateY(-8px);
| |
| | |
| box-shadow:0 18px 40px rgba(0,0,0,.08);
| |
| | |
| border-color:#14B8A6;
| |
| | |
| }
| |
| | |
| /*=============================
| |
| Icon
| |
| =============================*/
| |
| | |
| .card-icon{
| |
| | |
| font-size:62px;
| |
| | |
| color:#14B8A6;
| |
| | |
| margin-bottom:20px;
| |
| | |
| transition:.35s;
| |
| | |
| }
| |
| | |
| .category-card:hover .card-icon{
| |
| | |
| color:#0F9D8E;
| |
| | |
| transform:scale(1.1);
| |
| | |
| }
| |
| | |
| /*=============================
| |
| Title
| |
| =============================*/
| |
| | |
| .category-card h3{
| |
| | |
| color:#F97316;
| |
| | |
| text-align:center;
| |
| | |
| font-size:24px;
| |
| | |
| line-height:1.9;
| |
| | |
| font-weight:700;
| |
| | |
| }
| |
| | |
| /*=============================
| |
| Tablet
| |
| =============================*/
| |
| | |
| @media(max-width:992px){
| |
| | |
| .category-grid{
| |
| | |
| grid-template-columns:repeat(2,1fr);
| |
| | |
| }
| |
| | |
| }
| |
| | |
| /*=============================
| |
| Mobile
| |
| =============================*/
| |
| | |
| @media(max-width:576px){
| |
| | |
| .category-grid{
| |
| | |
| grid-template-columns:repeat(2,1fr);
| |
| | |
| gap:15px;
| |
| | |
| }
| |
| | |
| .category-card{
| |
| | |
| min-height:165px;
| |
| | |
| padding:25px 15px;
| |
| | |
| border-radius:16px;
| |
| | |
| }
| |
| | |
| .card-icon{
| |
| | |
| font-size:45px;
| |
| | |
| margin-bottom:15px;
| |
| | |
| }
| |
| | |
| .category-card h3{
| |
| | |
| font-size:18px;
| |
| | |
| line-height:1.7;
| |
| | |
| }
| |
| | |
| }
| |
| | |
| /* کانتینر کادرهای زیر هم دماوندپلیمر */
| |
| | |
| *{
| |
| margin:0;
| |
| padding:0;
| |
| box-sizing:border-box;
| |
| }
| |
| | |
| body{
| |
| | |
| font-family:'Vazirmatn',sans-serif;
| |
| | |
| background:#f2f6fb;
| |
| | |
| display:flex;
| |
| | |
| justify-content:center;
| |
| | |
| padding:40px 15px;
| |
| | |
| }
| |
| | |
| | |
| .production{
| |
| | |
| width:100%;
| |
| max-width:550px;
| |
| | |
| }
| |
| | |
| | |
| .container{
| |
| | |
| background:linear-gradient(180deg,#1f3f97,#6cbcff);
| |
| | |
| border-radius:35px;
| |
| | |
| padding:35px 25px 0;
| |
| | |
| position:relative;
| |
| | |
| overflow:hidden;
| |
| | |
| box-shadow:0 15px 40px rgba(0,0,0,.15);
| |
| | |
| }
| |
| | |
| h1{
| |
| | |
| color:#fff;
| |
| | |
| font-size:34px;
| |
| | |
| font-weight:700;
| |
| | |
| text-align:center;
| |
| | |
| margin-bottom:35px;
| |
| | |
| }
| |
| | |
| | |
| .steps{
| |
| | |
| display:flex;
| |
| | |
| flex-direction:column;
| |
| | |
| gap:18px;
| |
| | |
| }
| |
| | |
| .step{
| |
| | |
| background:rgba(255,255,255,.12);
| |
| | |
| border:2px solid rgba(255,255,255,.8);
| |
| | |
| border-radius:18px;
| |
| | |
| padding:18px;
| |
| | |
| text-align:center;
| |
| | |
| color:#fff;
| |
| | |
| font-size:21px;
| |
| | |
| transition:.3s;
| |
| | |
| backdrop-filter:blur(4px);
| |
| | |
| }
| |
| | |
| .step:hover{
| |
| | |
| background:#fff;
| |
| | |
| color:#1d4ca1;
| |
| | |
| transform:translateY(-4px);
| |
| | |
| }
| |
| | |
| | |
| .image-box{
| |
| | |
| margin-top:35px;
| |
| | |
| display:flex;
| |
| | |
| justify-content:center;
| |
| | |
| }
| |
| | |
| .image-box img{
| |
| | |
| width:65%;
| |
| | |
| max-width:280px;
| |
| | |
| display:block;
| |
| | |
| }
| |
| | |
| .logo{
| |
| | |
| display:flex;
| |
| | |
| justify-content:center;
| |
| | |
| margin-top:25px;
| |
| | |
| }
| |
| | |
| .logo img{
| |
| | |
| width:120px;
| |
| | |
| background:white;
| |
| | |
| padding:12px;
| |
| | |
| border-radius:18px 18px 0 0;
| |
| | |
| }
| |
| | |
| /* ---------- Tablet ---------- */
| |
| | |
| @media(max-width:768px){
| |
| | |
| .container{
| |
| | |
| padding:30px 18px 0;
| |
| | |
| }
| |
| | |
| h1{
| |
| | |
| font-size:28px;
| |
| | |
| }
| |
| | |
| .step{
| |
| | |
| font-size:18px;
| |
| | |
| padding:15px;
| |
| | |
| }
| |
| | |
| .image-box img{
| |
| | |
| width:72%;
| |
| | |
| }
| |
| | |
| }
| |
| | |
| /* ---------- Mobile ---------- */
| |
| | |
| @media(max-width:480px){
| |
| | |
| body{
| |
| | |
| padding:15px;
| |
| | |
| }
| |
| | |
| .container{
| |
| | |
| border-radius:25px;
| |
| | |
| padding:22px 15px 0;
| |
| | |
| }
| |
| | |
| h1{
| |
| | |
| font-size:22px;
| |
| | |
| }
| |
| | |
| .step{
| |
| | |
| font-size:15px;
| |
| | |
| padding:13px;
| |
| | |
| border-radius:14px;
| |
| | |
| }
| |
| | |
| .logo img{
| |
| | |
| width:90px;
| |
| | |
| }
| |
| | |
| .image-box img{
| |
| | |
| width:80%;
| |
| | |
| }
| |
| | |
| }
| |
| | |
| /* ---------- Large Screen ---------- */
| |
| | |
| @media(min-width:1400px){
| |
| | |
| .production{
| |
| | |
| max-width:650px;
| |
| | |
| }
| |
| | |
| h1{
| |
| | |
| font-size:40px;
| |
| | |
| }
| |
| | |
| .step{
| |
| | |
| font-size:23px;
| |
| | |
| }
| |