.elementor-6696 .elementor-element.elementor-element-40d62b7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6696 .elementor-element.elementor-element-06711fe{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-6696 .elementor-element.elementor-element-b4bf9cb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6696 .elementor-element.elementor-element-4687ac0{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-6696 .elementor-element.elementor-element-4687ac0.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );letter-spacing:var( --e-global-typography-text-letter-spacing );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-6696 .elementor-element.elementor-element-0a16028{width:var( --container-widget-width, 22.841% );max-width:22.841%;--container-widget-width:22.841%;--container-widget-flex-grow:0;text-align:center;font-family:"YekanBakhFaNum", Sans-serif;font-size:15px;font-weight:400;color:#644010;}.elementor-6696 .elementor-element.elementor-element-0a16028.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-6696 .elementor-element.elementor-element-e5cf043{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-6696 .elementor-element.elementor-element-e5cf043 .elementor-divider-separator{width:100%;}.elementor-6696 .elementor-element.elementor-element-e5cf043 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-6696 .elementor-element.elementor-element-119bccb{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--gap:16px 16px;--row-gap:16px;--column-gap:16px;--grid-auto-flow:row;--justify-items:center;--align-items:center;}.elementor-6696 .elementor-element.elementor-element-eaa7c4c{--display:flex;}.elementor-6696 .elementor-element.elementor-element-34cad91{--display:flex;}.elementor-6696 .elementor-element.elementor-element-20a4e94{--display:flex;}.elementor-6696 .elementor-element.elementor-element-12da470{--display:flex;}.elementor-6696 .elementor-element.elementor-element-50a1d83{--display:flex;}.elementor-6696 .elementor-element.elementor-element-b257521{--display:flex;}.elementor-6696 .elementor-element.elementor-element-3484289{--display:flex;}.elementor-6696 .elementor-element.elementor-element-e9e7496{--display:flex;}.elementor-6696 .elementor-element.elementor-element-3a635e0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6696 .elementor-element.elementor-element-641617c{--display:flex;}.elementor-6696 .elementor-element.elementor-element-1e86689{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6696 .elementor-element.elementor-element-5abff00{font-family:"YekanBakhFaNum", Sans-serif;font-size:25px;font-weight:400;}.elementor-6696 .elementor-element.elementor-element-a5e0096{--display:flex;}.elementor-6696 .elementor-element.elementor-element-97233af{--display:flex;}@media(min-width:768px){.elementor-6696 .elementor-element.elementor-element-4687ac0{--width:97.889%;}}@media(max-width:1024px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-6696 .elementor-element.elementor-element-119bccb{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-6696 .elementor-element.elementor-element-119bccb{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for shortcode, class: .elementor-element-5a4b094 *//* ========================================================= SSC — ERA BREADCRUMB Premium Gold Museum Style ========================================================= */ .ssc-breadcrumb-wrap { width: 100%; margin: 2px 0 2px; } /* ========================================================= Breadcrumb ========================================================= */ .ssc-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; line-height: 1.8; color: #7A6B5B; } /* ========================================================= Links ========================================================= */ .ssc-breadcrumb a { color: #7A6B5B; text-decoration: none; transition: color .25s ease, opacity .25s ease; } /* Hover */ .ssc-breadcrumb a:hover { color: #C89B3C; } /* ========================================================= Separator ========================================================= */ .ssc-breadcrumb .ssc-separator { color: #C89B3C; opacity: .45; font-size: 13px; line-height: 1; } /* ========================================================= Current Page ========================================================= */ .ssc-breadcrumb .ssc-current { color: #3E2F1E; font-weight: 700; } /* ========================================================= Mobile ========================================================= */ @media (max-width: 768px) { .ssc-breadcrumb-wrap { margin: 0; } .ssc-breadcrumb { gap: 7px; font-size: 13px; line-height: 1.9; } .ssc-breadcrumb .ssc-separator { font-size: 12px; } } /* ========================================================= Small Mobile ========================================================= */ @media (max-width: 480px) { .ssc-breadcrumb { gap: 5px; font-size: 12px; } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-0a16028 *//*================================================== Tag ==================================================*/ .ssc-hero-content .ssc-hero-tag{ display:inline-flex; align-items:center; justify-content:center; padding:8px 18px; margin-bottom:22px; background:rgba(200,155,60,.08); border:1px solid rgba(200,155,60,.18); border-radius:999px; font-size:.88rem; font-weight:700; color:#C89B3C; letter-spacing:.3px; text-align:center; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-641617c *//* ========================================================= * SSC — Era Watermark Gallery * ========================================================= */ .ssc-era-watermarks-gallery { width: 100%; margin-top: 42px; } /* ========================================================= * Header * ========================================================= */ .ssc-era-watermarks-header { margin-bottom: 24px; } .ssc-era-watermarks-header .ssc-section-tag { display: inline-block; margin-bottom: 8px; } .ssc-era-watermarks-header .ssc-section-title { margin: 0; } /* ========================================================= * Gallery * ========================================================= */ .ssc-era-watermarks-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; width: 100%; } /* ========================================================= * Watermark Card * Desktop → 4 per row * ========================================================= */ .ssc-era-watermark-card { flex: 0 0 calc(25% - 16.5px); max-width: calc(25% - 16.5px); display: flex; flex-direction: column; text-decoration: none; color: inherit; min-width: 0; } /* ========================================================= * Image Frame * ========================================================= */ .ssc-era-watermark-image { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient( 145deg, rgba(255,255,255,.96), rgba(247,241,228,.92) ); border: 1px solid rgba(200,155,60,.22); border-radius: 14px; box-shadow: 0 6px 20px rgba(62,47,30,.06); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } /* ========================================================= * Image * ========================================================= */ .ssc-era-watermark-image img { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 8px; transition: transform .35s ease; } /* ========================================================= * Hover * ========================================================= */ .ssc-era-watermark-card:hover .ssc-era-watermark-image { transform: translateY(-4px); border-color: rgba(200,155,60,.45); box-shadow: 0 12px 30px rgba(62,47,30,.11); } .ssc-era-watermark-card:hover .ssc-era-watermark-image img { transform: scale(1.035); } /* ========================================================= * Title * ========================================================= */ .ssc-era-watermark-title { margin-top: 11px; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.8; color: #3E2F1E; } /* ========================================================= * No Image * ========================================================= */ .ssc-era-watermark-no-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-size: 13px; line-height: 1.8; color: #7d705f; } /* ========================================================= * Tablet * 3 per row * ========================================================= */ @media (max-width: 991px) { .ssc-era-watermark-card { flex: 0 0 calc(33.333% - 15px); max-width: calc(33.333% - 15px); } .ssc-era-watermarks-grid { gap: 18px; } } /* ========================================================= * Mobile * 2 per row * ========================================================= */ @media (max-width: 767px) { .ssc-era-watermarks-gallery { margin-top: 32px; } .ssc-era-watermark-card { flex: 0 0 calc(50% - 9px); max-width: calc(50% - 9px); } .ssc-era-watermarks-grid { gap: 14px; } .ssc-era-watermark-image { padding: 11px; border-radius: 11px; } .ssc-era-watermark-title { margin-top: 8px; font-size: 12px; } } /* ========================================================= * Very Small Mobile * ========================================================= */ @media (max-width: 420px) { .ssc-era-watermark-card { flex: 0 0 calc(50% - 7px); max-width: calc(50% - 7px); } .ssc-era-watermarks-grid { gap: 12px; } .ssc-era-watermark-image { padding: 8px; } } /* ========================================================= SSC — ERA WATERMARK TITLES Museum / Parchment / Gold Theme ========================================================= */ /* ========================================================= 01 — SECTION HEADER ========================================================= */ .ssc-era-watermarks-header { width: 100%; margin: 0 0 26px !important; padding: 0 !important; text-align: center !important; direction: rtl; } /* --------------------------------------------------------- Eyebrow / Tag --------------------------------------------------------- */ .ssc-era-watermarks-header .ssc-section-tag { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; margin: 0 auto 14px !important; padding: 6px 15px !important; color: #C89B3C !important; background: linear-gradient( 180deg, #FFFFFF 0%, #FAF7F0 100% ) !important; border: 1px solid rgba(200, 155, 60, 0.28) !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.8 !important; text-align: center !important; box-shadow: 0 4px 15px rgba(62, 47, 30, 0.035); } /* --------------------------------------------------------- Main Section Title --------------------------------------------------------- */ .ssc-era-watermarks-header .ssc-section-title { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #3E2F1E !important; font-size: clamp(25px, 2.5vw, 34px) !important; font-weight: 800 !important; line-height: 1.45 !important; letter-spacing: -0.2px !important; text-align: center !important; } /* ========================================================= 02 — GOLD DIVIDER --------------------------------------------------------- اگر داخل HTML عنوان، .ssc-title-divider وجود داشته باشد همان استایل اصلی را می‌گیرد. ========================================================= */ .ssc-era-watermarks-header .ssc-title-divider { position: relative; width: 78px !important; height: 2px !important; margin: 16px auto 0 !important; padding: 0 !important; } .ssc-era-watermarks-header .ssc-title-divider::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, #C89B3C 0%, #E7C475 50%, #C89B3C 100% ); border-radius: 999px; } .ssc-era-watermarks-header .ssc-title-divider::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%); background: #FAF7F0; border: 1.5px solid #C89B3C; border-radius: 50%; } /* ========================================================= 03 — WATERMARK CARD TITLE ========================================================= */ .ssc-era-watermark-title { position: relative; width: 100%; margin: 12px 0 0 !important; padding: 9px 8px 0 !important; color: #3E2F1E !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.8 !important; text-align: center !important; direction: rtl; transition: color .25s ease, transform .25s ease; } /* --------------------------------------------------------- خط طلایی بسیار ظریف بالای عنوان --------------------------------------------------------- */ .ssc-era-watermark-title::before { content: ""; display: block; width: 34px; height: 1px; margin: 0 auto 7px; background: linear-gradient( 90deg, transparent 0%, #C89B3C 50%, transparent 100% ); opacity: .65; transition: width .25s ease, opacity .25s ease; } /* --------------------------------------------------------- Hover --------------------------------------------------------- */ .ssc-era-watermark-card:hover .ssc-era-watermark-title { color: #9A7627 !important; transform: translateY(-1px); } .ssc-era-watermark-card:hover .ssc-era-watermark-title::before { width: 48px; opacity: 1; } /* ========================================================= 04 — MOBILE ========================================================= */ @media (max-width: 767px) { .ssc-era-watermarks-header { margin-bottom: 20px !important; } .ssc-era-watermarks-header .ssc-section-tag { margin-bottom: 11px !important; padding: 5px 12px !important; font-size: 11px !important; } .ssc-era-watermarks-header .ssc-section-title { font-size: 23px !important; line-height: 1.55 !important; } .ssc-era-watermarks-header .ssc-title-divider { width: 66px !important; margin-top: 13px !important; } .ssc-era-watermark-title { margin-top: 9px !important; padding-top: 7px !important; font-size: 12px !important; line-height: 1.75 !important; } .ssc-era-watermark-title::before { width: 28px; margin-bottom: 5px; } } /* ========================================================= 05 — SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .ssc-era-watermarks-header .ssc-section-title { font-size: 21px !important; } .ssc-era-watermark-title { font-size: 11px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1e86689 *//* ========================================================= SSC ERA — PUBLISHERS + ACTION Premium Gold Museum Style ========================================================= */ /* ========================================================= 01 — PUBLISHERS SECTION ========================================================= */ .ssc-era-publishers { width: 100%; margin-top: 42px !important; margin-bottom: 0 !important; } /* ========================================================= 02 — PUBLISHERS TITLE ========================================================= */ .ssc-era-publishers-title { width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; text-align: center !important; } .ssc-era-publishers-title .elementor-widget-container { margin: 0 !important; padding: 0 !important; } .ssc-era-publishers-title .elementor-widget-container p { margin: 0 !important; padding: 0 !important; color: #7A6847 !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.8 !important; text-align: center !important; } /* ========================================================= 03 — PUBLISHER LIST ========================================================= */ .ssc-era-publisher-list { width: 100% !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 04 — SHORTCODE WIDGET ========================================================= */ .ssc-era-publisher-list-widget { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } .ssc-era-publisher-list-widget .elementor-widget-container { margin: 0 !important; padding: 0 !important; } /* ========================================================= 05 — PUBLISHER ========================================================= */ .ssc-era-publisher { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 5px 13px !important; color: #967026 !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.8 !important; text-decoration: none !important; border-radius: 50px; transition: color .3s ease, background-color .3s ease, transform .3s ease !important; } /* Hover بانک */ .ssc-era-publisher:hover { color: #C89B3C !important; background: rgba(200, 155, 60, .08) !important; transform: translateY(-2px); } /* ========================================================= 06 — SEPARATOR ========================================================= */ .ssc-era-publisher-list .ssc-separator { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 2px !important; color: #C89B3C !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; } /* ========================================================= 07 — ACTION BUTTON WIDGET ========================================================= */ .ssc-era-action { width: 100% !important; margin-top: 34px !important; margin-bottom: 0 !important; padding: 0 !important; text-align: center !important; } /* ========================================================= 08 — ELEMENTOR BUTTON ========================================================= */ .ssc-era-action .elementor-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 48px; padding: 13px 30px !important; border: 1px solid rgba(200, 155, 60, .35) !important; border-radius: 14px !important; background: linear-gradient( 135deg, #C89B3C 0%, #A97822 100% ) !important; color: #FFFFFF !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.7 !important; text-decoration: none !important; box-shadow: 0 10px 28px rgba(120, 85, 25, .15) !important; transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease !important; } /* ========================================================= 09 — BUTTON TEXT ========================================================= */ .ssc-era-action .elementor-button-text { color: #FFFFFF !important; font-weight: 800 !important; } /* ========================================================= 10 — BUTTON HOVER ========================================================= */ .ssc-era-action .elementor-button:hover { color: #FFFFFF !important; background: linear-gradient( 135deg, #D4A64A 0%, #B88429 100% ) !important; border-color: rgba(212, 166, 74, .60) !important; transform: translateY(-3px); box-shadow: 0 17px 38px rgba(120, 85, 25, .22) !important; } .ssc-era-action .elementor-button:hover .elementor-button-text { color: #FFFFFF !important; } /* ========================================================= 11 — BUTTON FOCUS ========================================================= */ .ssc-era-action .elementor-button:focus, .ssc-era-action .elementor-button:focus-visible { color: #FFFFFF !important; outline: none !important; } /* ========================================================= 12 — MOBILE ========================================================= */ @media (max-width: 768px) { .ssc-era-publishers { margin-top: 34px !important; } .ssc-era-publishers-title { margin-bottom: 10px !important; } .ssc-era-publishers-title .elementor-widget-container p { font-size: 12px !important; } .ssc-era-publisher-list { gap: 5px 7px !important; } .ssc-era-publisher { padding: 4px 10px !important; font-size: 14px !important; } .ssc-era-action { margin-top: 28px !important; } .ssc-era-action .elementor-button { min-height: 46px; padding: 12px 25px !important; border-radius: 13px !important; font-size: 13px !important; } } /* ========================================================= 13 — SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .ssc-era-publishers { margin-top: 30px !important; } .ssc-era-publisher-list { gap: 4px 6px !important; } .ssc-era-publisher { padding: 3px 8px !important; font-size: 13px !important; } .ssc-era-action { margin-top: 24px !important; } .ssc-era-action .elementor-button { min-height: 45px; padding: 11px 21px !important; border-radius: 12px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3a635e0 *//* ========================================================= SSC ERA — PUBLISHERS + ACTION Premium Gold Museum Style ========================================================= */ /* ========================================================= 01 — PUBLISHERS SECTION ========================================================= */ .ssc-era-publishers { width: 100%; margin-top: 42px !important; margin-bottom: 0 !important; } /* ========================================================= 02 — PUBLISHERS TITLE ========================================================= */ .ssc-era-publishers-title { width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; text-align: center !important; } .ssc-era-publishers-title .elementor-widget-container { margin: 0 !important; padding: 0 !important; } .ssc-era-publishers-title .elementor-widget-container p { margin: 0 !important; padding: 0 !important; color: #7A6847 !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.8 !important; text-align: center !important; } /* ========================================================= 03 — PUBLISHER LIST ========================================================= */ .ssc-era-publisher-list { width: 100% !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 04 — SHORTCODE WIDGET ========================================================= */ .ssc-era-publisher-list-widget { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } .ssc-era-publisher-list-widget .elementor-widget-container { margin: 0 !important; padding: 0 !important; } /* ========================================================= 05 — PUBLISHER ========================================================= */ .ssc-era-publisher { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 5px 13px !important; color: #967026 !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.8 !important; text-decoration: none !important; border-radius: 50px; transition: color .3s ease, background-color .3s ease, transform .3s ease !important; } /* Hover بانک */ .ssc-era-publisher:hover { color: #C89B3C !important; background: rgba(200, 155, 60, .08) !important; transform: translateY(-2px); } /* ========================================================= 06 — SEPARATOR ========================================================= */ .ssc-era-publisher-list .ssc-separator { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 2px !important; color: #C89B3C !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; } /* ========================================================= 07 — ACTION BUTTON WIDGET ========================================================= */ .ssc-era-action { width: 100% !important; margin-top: 34px !important; margin-bottom: 0 !important; padding: 0 !important; text-align: center !important; } /* ========================================================= 08 — ELEMENTOR BUTTON ========================================================= */ .ssc-era-action .elementor-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 48px; padding: 13px 30px !important; border: 1px solid rgba(200, 155, 60, .35) !important; border-radius: 14px !important; background: linear-gradient( 135deg, #C89B3C 0%, #A97822 100% ) !important; color: #FFFFFF !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.7 !important; text-decoration: none !important; box-shadow: 0 10px 28px rgba(120, 85, 25, .15) !important; transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease !important; } /* ========================================================= 09 — BUTTON TEXT ========================================================= */ .ssc-era-action .elementor-button-text { color: #FFFFFF !important; font-weight: 800 !important; } /* ========================================================= 10 — BUTTON HOVER ========================================================= */ .ssc-era-action .elementor-button:hover { color: #FFFFFF !important; background: linear-gradient( 135deg, #D4A64A 0%, #B88429 100% ) !important; border-color: rgba(212, 166, 74, .60) !important; transform: translateY(-3px); box-shadow: 0 17px 38px rgba(120, 85, 25, .22) !important; } .ssc-era-action .elementor-button:hover .elementor-button-text { color: #FFFFFF !important; } /* ========================================================= 11 — BUTTON FOCUS ========================================================= */ .ssc-era-action .elementor-button:focus, .ssc-era-action .elementor-button:focus-visible { color: #FFFFFF !important; outline: none !important; } /* ========================================================= 12 — MOBILE ========================================================= */ @media (max-width: 768px) { .ssc-era-publishers { margin-top: 34px !important; } .ssc-era-publishers-title { margin-bottom: 10px !important; } .ssc-era-publishers-title .elementor-widget-container p { font-size: 12px !important; } .ssc-era-publisher-list { gap: 5px 7px !important; } .ssc-era-publisher { padding: 4px 10px !important; font-size: 14px !important; } .ssc-era-action { margin-top: 28px !important; } .ssc-era-action .elementor-button { min-height: 46px; padding: 12px 25px !important; border-radius: 13px !important; font-size: 13px !important; } } /* ========================================================= 13 — SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .ssc-era-publishers { margin-top: 30px !important; } .ssc-era-publisher-list { gap: 4px 6px !important; } .ssc-era-publisher { padding: 3px 8px !important; font-size: 13px !important; } .ssc-era-action { margin-top: 24px !important; } .ssc-era-action .elementor-button { min-height: 45px; padding: 11px 21px !important; border-radius: 12px !important; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-a8cb00a *//* ========================================================= SSC — FAQ SECTION Premium Gold Museum Style ========================================================= */ /* ========================================================= FAQ SECTION ========================================================= */ .ssc-banknote-faq { width: 100%; padding: 90px 0; } /* ========================================================= SECTION HEADER ========================================================= */ .ssc-banknote-faq .ssc-section-header { max-width: 900px; margin: 0 auto; text-align: center; } /* ========================================================= SECTION TAG ========================================================= */ .ssc-banknote-faq .ssc-section-tag { display: inline-flex; align-items: center; justify-content: center; padding: 7px 20px; margin-bottom: 20px; border-radius: 50px; background: rgba(200, 155, 60, .08); border: 1px solid rgba(200, 155, 60, .20); color: #A47724; font-size: 13px; font-weight: 800; line-height: 1.7; } /* ========================================================= SECTION TITLE ========================================================= */ .ssc-banknote-faq .ssc-section-title { margin: 0; font-size: 34px; font-weight: 900; line-height: 1.8; color: #3E2F1E; } /* ========================================================= DIVIDER ========================================================= */ .ssc-banknote-faq .ssc-title-divider { width: 90px; height: 3px; margin: 22px auto; border-radius: 10px; background: linear-gradient( 90deg, transparent, #C89B3C, transparent ); } /* ========================================================= DESCRIPTION ========================================================= */ .ssc-banknote-faq .ssc-section-description { max-width: 750px; margin: 0 auto; font-size: 16px; line-height: 2.2; color: #756A5B; } /* ========================================================= FAQ LIST ========================================================= */ .ssc-banknote-faq .ssc-faq-list { max-width: 980px; margin: 70px auto 0; } /* ========================================================= FAQ CARD ========================================================= */ .ssc-banknote-faq .ssc-faq-item { position: relative; background: #FFFFFF; border: 1px solid rgba(200, 155, 60, .18); border-radius: 20px; margin-bottom: 18px; overflow: hidden; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; box-shadow: 0 10px 30px rgba(62, 47, 30, .045); } /* ========================================================= TOP GOLD LINE ========================================================= */ .ssc-banknote-faq .ssc-faq-item::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient( 90deg, #A97822, #C89B3C, #E7C475, #C89B3C, #A97822 ); } /* ========================================================= HOVER CARD ========================================================= */ .ssc-banknote-faq .ssc-faq-item:hover { transform: translateY(-4px); border-color: rgba(200, 155, 60, .45); box-shadow: 0 18px 45px rgba(120, 85, 25, .11); } /* ========================================================= QUESTION ========================================================= */ .ssc-banknote-faq .ssc-faq-item summary { position: relative; list-style: none; cursor: pointer; padding: 28px 70px 28px 34px; font-size: 20px; font-weight: 900; color: #3E2F1E; line-height: 1.8; transition: color .3s ease, background-color .3s ease; } /* Remove native marker */ .ssc-banknote-faq .ssc-faq-item summary::-webkit-details-marker { display: none; } /* Firefox */ .ssc-banknote-faq .ssc-faq-item summary::marker { display: none; content: ""; } /* ========================================================= QUESTION HOVER ========================================================= */ .ssc-banknote-faq .ssc-faq-item summary:hover { color: #A47724; } /* ========================================================= PLUS / MINUS ICON ========================================================= */ .ssc-banknote-faq .ssc-faq-item summary::after { content: "+"; position: absolute; left: 32px; top: 50%; transform: translateY(-50%); font-size: 32px; font-weight: 300; color: #C89B3C; line-height: 1; transition: color .3s ease, transform .3s ease; } /* Open */ .ssc-banknote-faq .ssc-faq-item[open] summary::after { content: "−"; color: #A47724; } /* ========================================================= OPEN STATE ========================================================= */ .ssc-banknote-faq .ssc-faq-item[open] summary { border-bottom: 1px dashed rgba(200, 155, 60, .25); } /* ========================================================= ANSWER ========================================================= */ .ssc-banknote-faq .ssc-faq-content { padding: 28px 34px 34px; font-size: 16px; line-height: 2.3; color: #756A5B; background: linear-gradient( 180deg, rgba(200, 155, 60, .045), transparent ); } /* ========================================================= ANSWER PARAGRAPH ========================================================= */ .ssc-banknote-faq .ssc-faq-content p { margin: 0; } /* ========================================================= STRONG ========================================================= */ .ssc-banknote-faq .ssc-faq-content strong { color: #3E2F1E; font-weight: 900; } /* ========================================================= LINKS INSIDE ANSWERS ========================================================= */ .ssc-banknote-faq .ssc-faq-content a { color: #A47724; font-weight: 800; text-decoration: none; transition: color .25s ease; } .ssc-banknote-faq .ssc-faq-content a:hover { color: #C89B3C; } /* ========================================================= MOBILE — 768px ========================================================= */ @media (max-width: 768px) { .ssc-banknote-faq { padding: 60px 0; } .ssc-banknote-faq .ssc-section-tag { padding: 7px 17px; margin-bottom: 16px; font-size: 12px; } .ssc-banknote-faq .ssc-section-title { font-size: 25px; line-height: 1.75; } .ssc-banknote-faq .ssc-section-description { font-size: 15px; line-height: 2.1; } .ssc-banknote-faq .ssc-title-divider { width: 75px; margin: 18px auto; } .ssc-banknote-faq .ssc-faq-list { margin-top: 45px; } .ssc-banknote-faq .ssc-faq-item { border-radius: 16px; margin-bottom: 14px; } .ssc-banknote-faq .ssc-faq-item summary { padding: 22px 55px 22px 22px; font-size: 17px; line-height: 1.9; } .ssc-banknote-faq .ssc-faq-item summary::after { left: 18px; font-size: 28px; } .ssc-banknote-faq .ssc-faq-content { padding: 22px; font-size: 15px; line-height: 2.05; } } /* ========================================================= SMALL MOBILE — 480px ========================================================= */ @media (max-width: 480px) { .ssc-banknote-faq { padding: 48px 0; } .ssc-banknote-faq .ssc-section-tag { padding: 6px 15px; font-size: 11px; } .ssc-banknote-faq .ssc-section-title { font-size: 22px; line-height: 1.8; } .ssc-banknote-faq .ssc-section-description { font-size: 14px; line-height: 2; } .ssc-banknote-faq .ssc-faq-list { margin-top: 35px; } .ssc-banknote-faq .ssc-faq-item { border-radius: 14px; } .ssc-banknote-faq .ssc-faq-item summary { padding: 19px 48px 19px 18px; font-size: 15px; line-height: 1.9; } .ssc-banknote-faq .ssc-faq-item summary::after { left: 15px; font-size: 25px; } .ssc-banknote-faq .ssc-faq-content { padding: 19px 18px; font-size: 14px; line-height: 2; } } /* ========================================================= SSC — FAQ → RELATED SPACING Desktop + Mobile ========================================================= */ /* Desktop */ .ssc-banknote-faq { padding-bottom: 25px; } .ssc-related-section { padding-top: 25px; } /* Mobile */ @media (max-width: 768px) { .ssc-banknote-faq { padding-bottom: 20px; } .ssc-related-section { padding-top: 20px; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-4246708 *//* ========================================================= SSC — RELATED / NEXT CARDS Premium Gold Museum Style ========================================================= */ /* ========================================================= SECTION ========================================================= */ .ssc-related-section { width: 100%; padding: 90px 0; } /* ========================================================= HEADER Scoped فقط داخل Related ========================================================= */ .ssc-related-section .ssc-section-header { max-width: 900px; margin: 0 auto; text-align: center; } /* ========================================================= SECTION TAG ========================================================= */ .ssc-related-section .ssc-section-tag { display: inline-flex; align-items: center; justify-content: center; padding: 7px 20px; margin-bottom: 20px; border-radius: 50px; background: rgba(200, 155, 60, .08); border: 1px solid rgba(200, 155, 60, .20); color: #A47724; font-size: 13px; font-weight: 800; line-height: 1.7; } /* ========================================================= TITLE ========================================================= */ .ssc-related-section .ssc-section-title { margin: 0; font-size: 34px; font-weight: 900; line-height: 1.8; color: #3E2F1E; } /* ========================================================= DIVIDER ========================================================= */ .ssc-related-section .ssc-title-divider { width: 90px; height: 3px; margin: 22px auto; border-radius: 10px; background: linear-gradient( 90deg, transparent, #C89B3C, transparent ); } /* ========================================================= GRID ========================================================= */ .ssc-related-section .ssc-next-grid { display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: 24px; margin-top: 55px; align-items: stretch; } /* ========================================================= CARD ========================================================= */ .ssc-related-section .ssc-next-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 30px; background: #FFFFFF; border: 1px solid rgba(200, 155, 60, .18); border-radius: 22px; overflow: hidden; text-decoration: none; box-shadow: 0 10px 30px rgba(62, 47, 30, .045); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } /* ========================================================= GOLD TOP LINE ========================================================= */ .ssc-related-section .ssc-next-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient( 90deg, #A97822, #C89B3C, #E7C475, #C89B3C, #A97822 ); } /* ========================================================= CARD HOVER ========================================================= */ .ssc-related-section .ssc-next-card:hover { transform: translateY(-8px); border-color: rgba(200, 155, 60, .48); box-shadow: 0 20px 45px rgba(120, 85, 25, .12); } /* ========================================================= ICON ========================================================= */ .ssc-related-section .ssc-next-icon { width: 62px; height: 62px; flex: 0 0 62px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; border-radius: 18px; background: linear-gradient( 145deg, rgba(200, 155, 60, .14), rgba(231, 196, 117, .08) ); border: 1px solid rgba(200, 155, 60, .18); color: #A47724; transition: background .35s ease, color .35s ease, transform .35s ease; } .ssc-related-section .ssc-next-icon svg { width: 30px; height: 30px; display: block; } /* ========================================================= ICON HOVER ========================================================= */ .ssc-related-section .ssc-next-card:hover .ssc-next-icon { background: #C89B3C; color: #FFFFFF; transform: translateY(-2px); } /* ========================================================= TITLE ========================================================= */ .ssc-related-section .ssc-next-card h3 { margin: 0 0 12px; font-size: 22px; font-weight: 900; line-height: 1.7; color: #3E2F1E; transition: color .3s ease; } /* ========================================================= TITLE HOVER ========================================================= */ .ssc-related-section .ssc-next-card:hover h3 { color: #A47724; } /* ========================================================= DESCRIPTION ========================================================= */ .ssc-related-section .ssc-next-card p { margin: 0 0 25px; flex-grow: 1; font-size: 15px; line-height: 2.1; color: #756A5B; } /* ========================================================= LINK ========================================================= */ .ssc-related-section .ssc-next-card > span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 900; line-height: 1.8; color: #A47724; transition: color .3s ease, gap .3s ease; } /* ========================================================= ARROW ========================================================= */ .ssc-related-section .ssc-next-card > span b { font-size: 16px; font-weight: 900; line-height: 1; transition: transform .3s ease; } .ssc-related-section .ssc-next-card:hover > span { color: #C89B3C; gap: 11px; } .ssc-related-section .ssc-next-card:hover > span b { transform: translateX(-3px); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1200px) { .ssc-related-section .ssc-next-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .ssc-related-section { padding: 60px 0; } .ssc-related-section .ssc-section-title { font-size: 25px; line-height: 1.75; } .ssc-related-section .ssc-title-divider { width: 75px; margin: 18px auto; } .ssc-related-section .ssc-next-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 42px; } .ssc-related-section .ssc-next-card { padding: 24px; border-radius: 18px; } .ssc-related-section .ssc-next-icon { width: 56px; height: 56px; flex-basis: 56px; border-radius: 16px; margin-bottom: 18px; } .ssc-related-section .ssc-next-icon svg { width: 27px; height: 27px; } .ssc-related-section .ssc-next-card h3 { font-size: 19px; line-height: 1.8; } .ssc-related-section .ssc-next-card p { font-size: 14px; line-height: 2; margin-bottom: 20px; } .ssc-related-section .ssc-next-card > span { font-size: 13px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .ssc-related-section { padding: 48px 0; } .ssc-related-section .ssc-section-tag { padding: 6px 15px; font-size: 11px; } .ssc-related-section .ssc-section-title { font-size: 22px; } .ssc-related-section .ssc-next-grid { margin-top: 34px; gap: 14px; } .ssc-related-section .ssc-next-card { padding: 21px; border-radius: 16px; } .ssc-related-section .ssc-next-card h3 { font-size: 18px; } .ssc-related-section .ssc-next-card p { font-size: 13px; } } /* ========================================================= SSC — Reduce Gap Between Final Sections ========================================================= */ .ssc-banknote-faq + .ssc-related-section { margin-top: -40px; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-97233af *//* ========================================================= SSC — BANKNOTE SERIES Premium Gold Museum Style ========================================================= */ /* ========================================================= GRID ========================================================= */ .ssc-series-grid { width: 100%; direction: rtl; } .ssc-series-grid .ssc-container { width: 100%; max-width: 1200px; margin: 0 auto; } .ssc-series-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; width: 100%; } /* ========================================================= CARD ========================================================= */ .ssc-series-card { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100%; padding: 25px 23px 22px; overflow: hidden; background: linear-gradient( 145deg, #FFFFFF 0%, #FCFAF5 100% ) !important; border: 1px solid rgba(200,155,60,.20) !important; border-radius: 20px; box-shadow: 0 8px 25px rgba(62,47,30,.045); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease; } /* ========================================================= TOP GOLD LINE ========================================================= */ .ssc-series-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: linear-gradient( 90deg, #B88A2E, #E7C475, #B88A2E ); transition: height .35s ease; } /* ========================================================= CARD HOVER ========================================================= */ @media (hover:hover) { .ssc-series-card:hover { transform: translateY(-7px); border-color: rgba(200,155,60,.50) !important; background: linear-gradient( 145deg, #FFFFFF, #FBF7ED ) !important; box-shadow: 0 20px 45px rgba(62,47,30,.09), 0 8px 24px rgba(200,155,60,.08); } .ssc-series-card:hover::before { height: 5px; } } /* ========================================================= BADGE ========================================================= */ .ssc-series-badge { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; width: fit-content; margin-bottom: 18px; padding: 6px 15px; color: #A77B24 !important; background: rgba(200,155,60,.075) !important; border: 1px solid rgba(200,155,60,.22) !important; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .12em; line-height: 1.7; white-space: nowrap; transition: background .3s ease, border-color .3s ease, color .3s ease; } .ssc-series-card:hover .ssc-series-badge { color: #8D661C !important; background: rgba(200,155,60,.12) !important; border-color: rgba(200,155,60,.35) !important; } /* ========================================================= HEADER ========================================================= */ .ssc-series-header { width: 100%; margin: 0 0 20px; } .ssc-series-header h3 { margin: 0 0 8px; color: #3E2F1E !important; font-size: 23px; font-weight: 800; line-height: 1.55; } .ssc-series-header h3 a { color: inherit !important; text-decoration: none !important; transition: color .3s ease; } .ssc-series-card:hover .ssc-series-header h3 a { color: #8D661C !important; } .ssc-series-header p { min-height: 52px; margin: 0; color: #766650 !important; font-size: 13px; line-height: 1.95; } /* ========================================================= INFO ========================================================= */ .ssc-series-info { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; width: 100%; margin-bottom: 20px; } /* ========================================================= INFO ITEM ========================================================= */ .ssc-series-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 76px; padding: 11px 10px; text-align: center; background: linear-gradient( 145deg, #FCFAF5, #F8F4EA ) !important; border: 1px solid rgba(200,155,60,.14) !important; border-radius: 12px; transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease; } /* امضا تمام عرض */ .ssc-series-item:last-child { grid-column: 1 / -1; } /* ========================================================= INFO HOVER ========================================================= */ @media (hover:hover) { .ssc-series-item:hover { transform: translateY(-3px); background: linear-gradient( 145deg, #FBF7ED, #F5EDDB ) !important; border-color: rgba(200,155,60,.34) !important; box-shadow: 0 8px 18px rgba(62,47,30,.045); } } /* ========================================================= LABEL ========================================================= */ .ssc-series-item > span { display: block; width: 100%; margin-bottom: 5px; color: #927D60 !important; font-size: 10px; font-weight: 600; line-height: 1.7; } /* ========================================================= VALUE ========================================================= */ .ssc-series-item > strong { display: block; width: 100%; margin: 0; color: #3E2F1E !important; font-size: 13px; font-weight: 800; line-height: 1.85; overflow-wrap: anywhere; transition: color .3s ease; } .ssc-series-item:hover > strong { color: #8D661C !important; } /* ========================================================= INNER LINKS ========================================================= */ .ssc-series-item strong a { color: #8D661C !important; text-decoration: none !important; transition: color .25s ease; } .ssc-series-item strong a:hover { color: #B88A2E !important; } /* ========================================================= DENOMINATION CHIPS ========================================================= */ .ssc-series-values { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; margin-bottom: 22px; } .ssc-series-values a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 12px; color: #8D661C !important; background: rgba(200,155,60,.075) !important; border: 1px solid rgba(200,155,60,.18) !important; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.7; text-decoration: none !important; white-space: nowrap; transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; } @media (hover:hover) { .ssc-series-values a:hover { transform: translateY(-3px); color: #FFFFFF !important; background: linear-gradient( 135deg, #B88A2E, #D4A64A ) !important; border-color: #C89B3C !important; box-shadow: 0 7px 16px rgba(200,155,60,.18); } } /* ========================================================= BOTTOM LINK ========================================================= */ .ssc-series-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: auto; padding-top: 10px; color: #8D661C !important; font-size: 13px; font-weight: 800; line-height: 1.8; text-decoration: none !important; transition: color .25s ease, gap .25s ease; } .ssc-series-link:hover { color: #B88A2E !important; gap: 14px; text-decoration: none !important; } /* ========================================================= SVG ========================================================= */ .ssc-series-link svg { flex: 0 0 auto; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .25s ease; transform: scaleX(-1); } .ssc-series-link:hover svg { transform: scaleX(-1) translateX(-2px); } /* ========================================================= TABLET ========================================================= */ @media (max-width:1200px) { .ssc-series-grid .ssc-container { padding-inline: 24px; } .ssc-series-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:700px) { .ssc-series-grid .ssc-container { padding-inline: 16px; } .ssc-series-cards { grid-template-columns: 1fr; gap: 14px; } .ssc-series-card { padding: 22px 18px 20px; border-radius: 17px; } .ssc-series-header h3 { font-size: 21px; } .ssc-series-header p { min-height: 0; font-size: 12.5px; line-height: 1.9; } .ssc-series-info { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } .ssc-series-item { min-height: 72px; padding: 10px 8px; } .ssc-series-item > span { font-size: 9.5px; } .ssc-series-item > strong { font-size: 12px; } .ssc-series-values { gap: 7px; margin-bottom: 20px; } .ssc-series-values a { min-height: 32px; padding: 5px 10px; font-size: 11.5px; } .ssc-series-link { font-size: 12px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:380px) { .ssc-series-grid .ssc-container { padding-inline: 12px; } .ssc-series-card { padding: 20px 15px 18px; } .ssc-series-header h3 { font-size: 20px; } .ssc-series-info { grid-template-columns: 1fr; } .ssc-series-item:last-child { grid-column: auto; } .ssc-series-values a { font-size: 11px; } }/* End custom CSS */ /* Start custom CSS *//* ========================================================= SSC — BN ERA FINAL MUSEUM STYLE Elementor + WoodMart Gold / Parchment Theme ========================================================= */ /* ========================================================= 01 — GLOBAL ========================================================= */ .ssc-era-hero, .ssc-era-hero *, .ssc-era-hero *::before, .ssc-era-hero *::after { box-sizing: border-box; } .ssc-era-hero { width: 100%; direction: rtl; color: #3E2F1E; } .ssc-era-hero .text-left { text-align: inherit; } /* ========================================================= 02 — MAIN CONTAINER ========================================================= */ .ssc-era-container { width: 100%; max-width: 1200px; margin-inline: auto; } .ssc-era-container > .e-con-inner { width: 100%; padding: 0; } /* ========================================================= 03 — HERO IMAGE ========================================================= */ .ssc-era-cover { width: 100%; margin: 0 0 42px; padding: 0; overflow: hidden; border-radius: 22px; line-height: 0; } .ssc-era-cover img { display: block; width: 100%; height: auto; max-width: 100%; margin: 0; padding: 0; border: 1px solid rgba(200, 155, 60, 0.18); border-radius: 22px; background: #FFFFFF; box-shadow: 0 18px 50px rgba(62, 47, 30, 0.09), 0 6px 20px rgba(200, 155, 60, 0.06); } /* ========================================================= 04 — HEADER ========================================================= */ .ssc-era-header { width: 100%; margin: 0; padding: 0; text-align: center !important; } /* ========================================================= 05 — EYEBROW ========================================================= */ .ssc-era-eyebrow { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; max-width: 100%; margin: 0 auto 22px !important; padding: 7px 18px !important; color: #C89B3C !important; background: linear-gradient( 180deg, #FFFFFF 0%, #FAF7F0 100% ) !important; border: 1px solid rgba(200, 155, 60, 0.30) !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.8 !important; text-align: center !important; white-space: nowrap; box-shadow: 0 4px 15px rgba(62, 47, 30, 0.035); } .ssc-era-eyebrow .elementor-widget-container { margin: 0 !important; padding: 0 !important; } .ssc-era-eyebrow p { margin: 0 !important; padding: 0 !important; color: #C89B3C !important; font: inherit !important; line-height: inherit !important; text-align: center !important; } /* ========================================================= 06 — TITLE ========================================================= */ /* هر دو Elementor Widget عنوان کلاس: ssc-era-title */ .ssc-era-title { width: 100% !important; margin: 0 !important; padding: 0 !important; color: #3E2F1E !important; text-align: center !important; } /* --------------------------------------------------------- Heading Widget کاتالوگ اسکناس‌های --------------------------------------------------------- */ .ssc-era-title .elementor-heading-title { display: block !important; margin: 0 !important; padding: 0 !important; color: #3E2F1E !important; font-size: clamp(30px, 3.2vw, 46px) !important; font-weight: 800 !important; line-height: 1.35 !important; letter-spacing: -0.3px !important; text-align: center !important; } /* --------------------------------------------------------- Shortcode Widget --------------------------------------------------------- */ .ssc-era-title .elementor-widget-container { margin: 0 !important; padding: 0 !important; text-align: center !important; } /* دقیقاً همان HTML که PHP تولید می‌کند:
کاتالوگ اسکناس‌های دوره محمدرضاشاه پهلوی
*/ .ssc-era-title .elementor-shortcode { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #3E2F1E !important; font-size: clamp(30px, 3.2vw, 46px) !important; font-weight: 800 !important; line-height: 1.35 !important; text-align: center !important; } /* خط اول */ .ssc-era-title .ssc-era-title-prefix { display: block !important; margin: 0 !important; padding: 0 !important; color: #3E2F1E !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; text-align: center !important; } /* خط دوم */ .ssc-era-title .ssc-era-title-name { display: block !important; margin: 0 !important; padding: 0 !important; color: #9A7627 !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; text-align: center !important; } /* ========================================================= 07 — DIVIDER ========================================================= */ .ssc-era-divider { position: relative; width: 92px !important; height: 3px !important; margin: 20px auto 24px !important; padding: 0 !important; } .ssc-era-divider .elementor-widget-container { width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; } .ssc-era-divider .elementor-divider { width: 100%; height: 100%; padding: 0 !important; } .ssc-era-divider .elementor-divider-separator { display: block !important; width: 100% !important; height: 3px !important; margin: 0 !important; border: 0 !important; background: linear-gradient( 90deg, #C89B3C 0%, #E7C475 50%, #C89B3C 100% ) !important; border-radius: 999px; } /* نقطه مرکزی */ .ssc-era-divider::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%); background: #FAF7F0; border: 2px solid #C89B3C; border-radius: 50%; z-index: 2; } /* ========================================================= 08 — DESCRIPTION ========================================================= */ .ssc-era-description { width: 100% !important; max-width: 820px !important; margin: 0 auto 46px !important; padding: 0 !important; color: #62513D !important; font-size: 15px !important; font-weight: 400 !important; line-height: 2.25 !important; text-align: center !important; } .ssc-era-description .elementor-widget-container, .ssc-era-description .elementor-shortcode { margin: 0 !important; padding: 0 !important; color: #62513D !important; font: inherit !important; line-height: inherit !important; text-align: center !important; } .ssc-era-description p { margin: 0 !important; padding: 0 !important; color: #62513D !important; } /* ========================================================= 09 — OVERVIEW ========================================================= */ .ssc-era-overview { width: 100%; margin: 0 0 48px !important; padding: 0 !important; direction: rtl; } .ssc-era-overview > .e-con-inner { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; width: 100%; margin: 0 !important; padding: 0 !important; } /* ========================================================= 10 — OVERVIEW CARD ========================================================= */ .ssc-era-overview-card { position: relative; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0; min-height: 124px; margin: 0 !important; padding: 28px 16px 22px !important; overflow: hidden; background: linear-gradient( 145deg, #FFFFFF 0%, #FCFAF5 100% ) !important; border: 1px solid rgba(200, 155, 60, 0.22) !important; border-radius: 18px !important; box-shadow: 0 7px 24px rgba(62, 47, 30, 0.055); text-align: center !important; transition: transform 0.30s ease, box-shadow 0.30s ease, border-color 0.30s ease, background 0.30s ease; } /* خط طلایی */ .ssc-era-overview-card::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 3px; background: linear-gradient( 90deg, #C89B3C, #E7C475, #C89B3C ); border-radius: 0 0 999px 999px; transition: left 0.30s ease, right 0.30s ease, height 0.30s ease; } /* ========================================================= 11 — OVERVIEW VALUE ========================================================= */ .ssc-era-overview-value { width: 100% !important; margin: 0 0 8px !important; padding: 0 !important; color: #3E2F1E !important; font-size: 24px !important; font-weight: 800 !important; line-height: 1.35 !important; text-align: center !important; direction: rtl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.30s ease, transform 0.30s ease; } .ssc-era-overview-value .elementor-widget-container { margin: 0 !important; padding: 0 !important; text-align: center !important; } .ssc-era-overview-value .elementor-shortcode { display: block; width: 100%; margin: 0 !important; padding: 0 !important; color: #3E2F1E !important; font: inherit !important; line-height: inherit !important; text-align: center !important; white-space: nowrap; } /* ========================================================= 12 — OVERVIEW LABEL ========================================================= */ .ssc-era-overview .ssc-era-overview-label, .ssc-era-overview .ssc-era-overview-label .elementor-widget-container, .ssc-era-overview .ssc-era-overview-label p { color: #806C53 !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.8 !important; text-align: center !important; } .ssc-era-overview-label { width: 100% !important; margin: 0 !important; padding: 0 !important; } .ssc-era-overview-label .elementor-widget-container { margin: 0 !important; padding: 0 !important; } .ssc-era-overview-label p { margin: 0 !important; padding: 0 !important; font: inherit !important; } /* ========================================================= 13 — CARD HOVER ========================================================= */ @media (hover: hover) { .ssc-era-overview-card:hover { transform: translateY(-5px) !important; border-color: rgba(200, 155, 60, 0.50) !important; background: linear-gradient( 145deg, #FFFFFF 0%, #FBF7ED 100% ) !important; box-shadow: 0 18px 38px rgba(62, 47, 30, 0.09), 0 7px 20px rgba(200, 155, 60, 0.09); } .ssc-era-overview-card:hover::before { left: 10px; right: 10px; height: 4px; } .ssc-era-overview-card:hover .ssc-era-overview-value .elementor-shortcode { color: #A77B24 !important; transform: translateY(-1px); } .ssc-era-overview-card:hover .ssc-era-overview-label p { color: #5F4A2E !important; } } /* ========================================================= 14 — PUBLISHERS ========================================================= */ .ssc-era-publishers { width: 100%; margin: 0 0 40px !important; padding: 0 !important; text-align: center !important; } .ssc-era-publishers-title { display: block; width: 100%; margin: 0 0 14px !important; padding: 0 !important; color: #806C53 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.8 !important; text-align: center !important; } .ssc-era-publisher-list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; width: 100%; margin: 0 !important; padding: 0 !important; } .ssc-era-publisher { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; margin: 0 !important; padding: 5px 13px; color: #6B573D !important; background: transparent; border: 1px solid rgba(200, 155, 60, 0.24); border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.7; text-decoration: none !important; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; } .ssc-era-publisher:hover { color: #3E2F1E !important; background: rgba(200, 155, 60, 0.08); border-color: rgba(200, 155, 60, 0.48); transform: translateY(-1px); } /* ========================================================= 15 — ACTIONS ========================================================= */ .ssc-era-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; width: 100%; margin: 0 0 62px !important; padding: 0 !important; } .ssc-era-action { display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; } /* ========================================================= 16 — PRIMARY BUTTON ========================================================= */ .ssc-era-action-primary { display: inline-flex; align-items: center; justify-content: center; min-width: 190px; min-height: 48px; margin: 0 !important; padding: 10px 25px; color: #FFFFFF !important; background: linear-gradient( 135deg, #B88A2E 0%, #D4A64A 50%, #B88A2E 100% ) !important; border: 1px solid #C89B3C !important; border-radius: 13px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.7 !important; text-align: center !important; text-decoration: none !important; box-shadow: 0 9px 24px rgba(200, 155, 60, 0.18); transition: transform .25s ease, box-shadow .25s ease; } .ssc-era-action-primary .elementor-button { color: #FFFFFF !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font: inherit !important; text-decoration: none !important; } .ssc-era-action-primary:hover { color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(200, 155, 60, 0.25); } /* ========================================================= 17 — SECONDARY BUTTON ========================================================= */ .ssc-era-action-secondary { display: inline-flex; align-items: center; justify-content: center; min-width: 190px; min-height: 48px; margin: 0 !important; padding: 10px 25px; color: #6B573D !important; background: #FFFFFF !important; border: 1px solid rgba(200, 155, 60, 0.28) !important; border-radius: 13px !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.7 !important; text-align: center !important; text-decoration: none !important; transition: transform .25s ease, border-color .25s ease, background .25s ease, color .25s ease; } .ssc-era-action-secondary:hover { color: #3E2F1E !important; background: #FCF8EF !important; border-color: rgba(200, 155, 60, 0.55) !important; transform: translateY(-2px); } /* ========================================================= 18 — TABLET ========================================================= */ @media (max-width: 1024px) { .ssc-era-container { padding-inline: 24px; } .ssc-era-overview > .e-con-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .ssc-era-overview-card { min-height: 116px; } .ssc-era-overview-value { font-size: 23px !important; } } /* ========================================================= 19 — MOBILE ========================================================= */ @media (max-width: 767px) { .ssc-era-container { padding-inline: 16px; } .ssc-era-cover { margin-bottom: 28px; border-radius: 16px; } .ssc-era-cover img { border-radius: 16px; } .ssc-era-eyebrow { margin-bottom: 17px !important; padding: 6px 13px !important; font-size: 11px !important; white-space: normal; } /* TITLE */ .ssc-era-title .elementor-heading-title, .ssc-era-title .elementor-shortcode { font-size: 27px !important; line-height: 1.55 !important; letter-spacing: 0 !important; } /* DIVIDER */ .ssc-era-divider { width: 74px !important; height: 2px !important; margin: 16px auto 19px !important; } .ssc-era-divider .elementor-divider-separator { height: 2px !important; } .ssc-era-divider::after { width: 10px; height: 10px; } /* DESCRIPTION */ .ssc-era-description { margin-bottom: 32px !important; font-size: 13px !important; line-height: 2.15 !important; } /* OVERVIEW */ .ssc-era-overview { margin-bottom: 36px !important; } .ssc-era-overview > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* CARDS */ .ssc-era-overview-card { min-height: 108px; padding: 21px 9px 17px !important; border-radius: 15px !important; } .ssc-era-overview-card::before { left: 14px; right: 14px; height: 2px; } /* VALUE */ .ssc-era-overview-value { margin-bottom: 6px !important; font-size: 21px !important; line-height: 1.3 !important; } /* LABEL */ .ssc-era-overview .ssc-era-overview-label, .ssc-era-overview .ssc-era-overview-label p { font-size: 11px !important; line-height: 1.7 !important; } /* PUBLISHERS */ .ssc-era-publishers { margin-bottom: 30px !important; } .ssc-era-publishers-title { margin-bottom: 12px !important; font-size: 12px !important; } .ssc-era-publisher-list { gap: 7px 8px; } .ssc-era-publisher { min-height: 33px; padding: 5px 11px; font-size: 11px; } /* ACTIONS */ .ssc-era-actions { flex-direction: column; gap: 10px; margin-bottom: 46px !important; } .ssc-era-action, .ssc-era-action-primary, .ssc-era-action-secondary { width: 100%; min-width: 0; } .ssc-era-action-primary, .ssc-era-action-secondary { min-height: 46px; padding-inline: 18px; font-size: 12px !important; } } /* ========================================================= 20 — SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .ssc-era-container { padding-inline: 12px; } .ssc-era-title .elementor-heading-title, .ssc-era-title .elementor-shortcode { font-size: 24px !important; } .ssc-era-overview > .e-con-inner { gap: 10px; } .ssc-era-overview-card { min-height: 104px; padding-inline: 7px !important; border-radius: 14px !important; } .ssc-era-overview-value { font-size: 19px !important; } .ssc-era-overview .ssc-era-overview-label, .ssc-era-overview .ssc-era-overview-label p { font-size: 10.5px !important; } }/* End custom CSS */